NewsListerは日時とテキストコメントが保存出来る、シンプルな更新履歴表示スクリプトです。
PCに詳しくない初心者およびPHPに詳しくない製作者が使うのを想定しており、
説明が無くてもパッと見で使えるように機能を抑え、使用・設置難易度を下げています。

newslister 1.2

こんなことが出来ます:

  • 日時とテキストコメントをセットにしたデータの保存
  • RSS2.0の出力
  • Atom1.0の出力 (ver1.2)
  • JSONPの出力
  • PHP埋め込み表示
  • Ajax(MooTools, jQuery)による埋め込み表示
  • 独自Wiki記法によるタグ使用(strong, em, リンク, 文字色変更)

管理画面はTwitterライクなAjax仕様となっております。
投稿済みデータの編集機能はありません。

RSSやJSONPを使えば他のサイトでもニュースの表示が出来ます。

Demo

動作環境とダウンロード

  • PHP5.2以上の環境
  • UTF-8の出力環境(Ajax表示時)

5.2以下の環境では動作しません。
テキストファイルに保存するのでデータベースは必要ありません。
PHP埋込み表示は文字コードが変更可能なのでShift-JISやEUCのページでも表示は出来ます。
Ajaxによる表示はUTF-8のみ対応です。

なお、IE6はサポート外としました。
表示用jsファイルはブラウザアップデートのアナウンスが表示されます。

“NewsLister” をダウンロード NewsLister_v102.zip – 791回のダウンロード – 118 kB

Google Code

本体設置方法

  1. ダウンロードファイルを解凍する
  2. includeフォルダのconfig.phpを開く
  3. 環境に合わせてconfig.phpの設定とログファイル名を変更する
    (必要があればadmin.jsの設定も変更する)
  4. サーバーに全てアップロードしてパーミッション変更
  5. admin.phpにアクセスして動作確認

パーミッションは設置サーバーの規定に従ってください。

管理画面の説明 (ver1.2)

newslister_admin

  • ログアウトボタン
  • 日付。デフォルト値は現在時刻
  • 独自Wiki記法ショートカットボタン。左から、strongタグ、emタグ、リンク、文字色
    Eのテキストエリアで文字列が選択状態でない場合は何もおきません。
  • Cのボタンに関するヘルプ表示。
  • 本文記入エリア
  • 送信ボタン
  • リロードボタン。連続投稿したあとに押すと、Hのページリンクが更新される。
  • ページリンク。黄色背景が現在地
  • 削除ボタン。ボタンクリックで即削除する。
    ページに記事が無くなると自動的にリロードされる。

カラーピッカーはMooRainbow、アイコンはFamFamFam SILK ICONSを使用しています。

PHP埋込方法

requireもしくはincludeでview.phpを読み込ませる。

<?php require("view.php");?>

更新履歴を表示する場所に次のソースを追加。

<?php get_newslister(); ?>

カッコの中に数値を入れると、その数値と同じ件数を表示する。
空の場合はconfig.phpのDISPMAXと同じになります。

<?php get_newslister(5);//5件だけ表示 ?>

ページナビゲーション付きの表示をする場合は次のソースを書きます。

<?php get_newslister_all();?>

これも数値を指定すると1ページあたりに表示する件数を変更出来ます。
デフォルトでは定義リスト形式ですが、数値の後に”table” “ul”と書くと、テーブル、リスト形式で出力します。

<?php get_newslister_all(10,"table");?>

MooTools版導入方法

  1. mootools-coreとnewslister.jsを読み込む
  2. 必要があればMoreを読み込む
    (Request.JSONP、Date, Date.Extrasが必要。includeに入っているものは全部まとめてあります)
  3. window.addEvent(“domready”)などでインスタンス作成
window.addEvent('domready', function(){
	new NewsLister();
});

オプション

指定はオブジェクト形式で。

new NewsLister({pass:'feed.php'});
logarea
(string:newslister) ログ表示要素のID
pass
(string:newslister/feed.php) feed.phpまでのパス
loader
(html) ローデイング画像
method
(string:get) ログ読み込み時のメソッド
dispmax
(number:5) ログの最大表示数
style
(string:null) 出力形式
table:テーブル ul:リスト  dl(null):定義リスト
dateformat
(string:%Y/%m/%d) 日付のフォーマット。MooToolsのdate.formatに依存
diff
(bool:false) 経過時間の表示

diffについて

デフォルトは英語表記になります。
DateのLocalizationファイルを別途読み込み、setメソッドでデフォルト言語を設定することで各国の表記に変更可能です。
(初期falseなので外しておきました)

holy氏作日本語ファイルはこちら

MooTools.lang.setLanguage('ja-JP');

jQuery版導入方法

MooToolsと大体同じ表示になりますが、diff機能がなく、日時フォーマットが簡易的です。

  1. jquery-1.3.2.min.jsとnewslister.jquery.plugin.jsを読み込む
  2. $(document).readyなどでインスタンス作成
$(document).ready(function(){
	$("#newslister").NewsLister();
});

オプション

指定はオブジェクト形式で。

.NewsLister({pass:'feed.php'});
logarea
(string:newslister) ログ表示要素のID
pass
(string:newslister/feed.php) feed.phpまでのパス
loader
(html) ローデイング画像HTML
method
(string:get) ログ読み込み時のメソッド
dispmax
(number:5) ログの最大表示数
style
(string:null) 出力形式
table:テーブル ul:リスト  dl(null):定義リスト
dateformat
(string:%Y/%m/%d) 日付のフォーマット。
%Y=4桁年、%m=月、%d=日、%h=時、%m=分

JSONP

feed.phpにvewtype=jsonを渡すとJSONPを出力します。
他に必要な値は次の通り。(タイプ/初期値)

page
(number/0) 0から始まる現在表示中のページ番号。
max
(number/全件) 取得件数
callback
(string/”jsoncallback”) 呼び出す時の関数名

レスポンス例:

({
	"items":
	{
		"0":{"id":"1266470836","date":"1266470820","comment":"更新履歴が入ります。"},
		"1":{"id":"1266468064","date":"1266468000","comment":"更新履歴が入ります。"},
		"2":{"id":"1266468036","date":"1266468000","comment":"更新履歴が入ります。"},
		"3":{"id":"1266468049","date":"1263789600","comment":"更新履歴が入ります。"}
	},
	"pagenum":0,
	"current":0, 
	"count":4
})
  • items ・・・ データ。
    id=投稿日タイムスタンプ dat=投稿時設定された日時 comment=投稿されたコメント
  • pagenum ・・・ 最大ページ数
  • current ・・・ 現在のページ番号(pageで渡されたものと同じ)
  • count ・・・ データ件数

RSS Feed

feed.phpにvewtype=rssを渡すとRSS 2.0を出力します。

<link rel="alternate" type="application/rss+xml" title="RSS Feed" href="feed.php?viewtype=rss" />

Atom Feed

feed.phpにvewtype=atomを渡すとAtom 1.0を出力します。

<link rel="alternate" type="application/atom+xml" title="Atom Feed" href="feed.php?viewtype=atom" />

バージョン履歴

  • 2010-03-23 ver1.2 ZIP公開
  • 2010-03-15 ver1.2 Atomと一部のタグ使用に対応
  • 2010-03-09 ver1.1 jQuery.pluginが揃ったので公開

1件のコメント

  1. 拝見させていただきました。

    とても使いやすいですね!
    ver1.2もさらに機能が追加されているみたいなので非常に楽しみです!

    早くダウンロード出来る様にならないかな~♪

    Reply
  2. jun さん>
    コメントありがとうございます!先程ZIPをうpしたので是非ご利用ください 😀

    Reply
  3. 返事遅れてすみません。。。

    こんなにも早く出来るとは思わなかったもので・・(汗)
    早速、私のサイトでも使わせていただきたいと思います!

    わがまま言ったにも関わらず迅速な対応ありがとうございました!
    これからもちょくちょく立ち寄らせていただきますねっ!☆

    Reply
  4. 初心者的な質問ですいません。
    リンクを貼ったときにクリック別窓で出るようにしたいのですが
    どのようにしたら宜しいでしょうか?

    Reply
  5. tendousouji さん>

    新しいウィンドウやタブを開きたいならアンカータグにtarget=”_blank”を加える
    小窓を出したいなら「JavaScirpt+ポップアップ」で検索
    Ajaxらしくスタイリッシュに表示したいなら「Lightbox+iframe」で検索
    してみてください

    Reply
  6. すいません。私の質問が悪かったかもしれません。
    NewsListerをテスト的に動作させてもらっております
    ありがとうございます
    E.本文記入エリアに書き込んだあとにC.リンクを貼りSAVEします
    実際書き込まれたページのリンクをクリックすると新しいウィンドウで開かないので
    新しいウィンドウで開けるようにしたいという事でした
    いろいろ調べて試しているのですが解決方法がわからず困っているところでした
    お忙しいのにすいません。

    Reply
  7. tendousouji さん>

    方法が3つあります

    1. Ctrlを押しながらリンクをクリックする

    2. post.php 173行目にある アンカータグにtarget属性を追加する
     http://code.google.com/p/newslister/source/browse/trunk/include/post.php#173

    3. admin.js 138行目の上に追加
     txt.comment = txt.comment.replace(/<(a[^>]+)>/i, ‘<$1 target="_blank">’);

    2と3は未検証です。

    Reply
  8. はじめまして。
    とてもシンプルで早速使用させていただきました。

    ところが、Chromeではちゃんと機能すのですが、IE9ではなぜか読み込み、書き込みができません。
    どこが悪いのかわからずで困っています。
    何か設定が悪いのでしょうか???

    よろしくお願いします。

    Reply
  9. IE9は作った1年後くらいにリリースされたブラウザなので
    これ自体更新が滞ってますし、動かなくても仕方ない感じです。IEだしw
    おそらくJS周りの不具合だと思うのですが。
    修正を待つよりも別のスクリプトを探していただく方が早いかもしれません。

    Reply
  10. ありがとうございます。

    やはりIEは使い物にならない感じでなんですね。
    一応IE9上の開発者ツールでIE8に戻して動かしてみました。
    IE9にバージョンアップしたら動かなくなるっていうあたりが、IEらしいです。

    ご丁寧にありがとうございました。

    Reply

Leave a Comment.