Home > NewsLister

NewsLister

  • 2010-03-23 (火) 13:23

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 (v1.2)

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を読み込ませる。

PLAIN TEXT
PHP:
  1. <?php require("view.php");?>

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

PLAIN TEXT
PHP:
  1. <?php get_newslister(); ?>

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

PLAIN TEXT
PHP:
  1. <?php get_newslister(5);//5件だけ表示 ?>

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

PLAIN TEXT
PHP:
  1. <?php get_newslister_all();?>

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

PLAIN TEXT
PHP:
  1. <?php get_newslister_all(10,"table");?>

MooTools版導入方法

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

オプション

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

PLAIN TEXT
JavaScript:
  1. 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氏作日本語ファイルはこちら

PLAIN TEXT
JavaScript:
  1. MooTools.lang.setLanguage('ja-JP');

jQuery版導入方法

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

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

オプション

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

PLAIN TEXT
JavaScript:
  1. .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") 呼び出す時の関数名

レスポンス例：

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

RSS Feed

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

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

Atom Feed

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

PLAIN TEXT
HTML:
  1. <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が揃ったので公開

Comments:7

jun 10-03-18 (木) 21:18

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

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

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

Tenderfeel 10-03-23 (火) 13:24

jun さん＞
コメントありがとうございます！先程ZIPをうｐしたので是非ご利用ください :D

jun 10-03-30 (火) 10:40

返事遅れてすみません。。。

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

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

tendousouji 11-05-24 (火) 13:59

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

Tenderfeel 11-05-24 (火) 16:48

tendousouji さん>

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

tendousouji 11-05-24 (火) 23:56

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

Tenderfeel 11-05-25 (水) 10:58

tendousouji さん>

方法が３つあります

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は未検証です。

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://tenderfeel.xsrv.jp/newslister/trackback/
Listed below are links to weblogs that reference
NewsLister from WebTecNote

Home > NewsLister

Scripts
カテゴリー
Recent Reactions
最近の投稿
最近の修正
Tag Cloud
おすすめサーバー・他

メタ情報

Return to page top