↑先頭 最新 検索 追記 編集

dev : サイト開発と blex のサイト

TOP

/

システム

/

plugin

|

ページ:

|1|

2

3

>

image_album.rb アルバム表示pluginとcgi

tDiary plugin, image_album.rb 0.0.5 released at 2012-04-21

写真などのイメージのサムネイルと写真を一覧表示するpluginとcgi。 Jonathan Schemoulが提供する SmoothGallery の css と javascript ライブラリを使用して、アルバムを表示する。

使用例はこちらをご覧ください。⇒ホームタウンジャパン

更新 2012-04-21: image_album.rb 0.0.5

概要

お絵かきプラグイン(image.rb)でアップロードしたイメージ、または、ftpなどでアップロードしたイメージを表示します。

特徴:

  • dayモード(記事表示)では大きなイメージ、latestなどの他のモード(一覧表示など)では小さなイメージを表示します。
    • ページに表示するイメージ数は変更できます。初期値は 3 です。
    • 表示サイズは、css内で指定しており、変更できます。
    • 多数のイメージがある場合、ランダムに表示します。
  • イメージのタグ情報を用意すると、タグによる検索表示ができます。
    • 複数フォルダのイメージをワイルドカードで指定できます。
    • OR条件、ADN条件、除外条件でイメージを絞込指定できます。
    • 複雑な条件検索を毎回行わないように、結果をキャッシュしています。
  • アルバム表示ができます。(SmoothGalleryが必要)
    • 多数のイメージがある場合、最大50イメージ(初期値)をランダムに表示します。
    • 携帯電話では、アルバム表示はできません。(通信費用に考慮)

重要: ruby 1.9.2を前提として開発しています。古いバージョンでは未確認です。

簡単な使い方

本文に次のように書きます。(wiki記法の場合)

{{image_album}}

image.rbでアップロードされたイメージを、一覧表示(latestモード)では小さなイメージ、記事表示(dayモード)では大きなイメージで表示します。記事表示で表示されるアルバムボタンを押すと、SmoothGalleryでアルバムを表示します。

イメージのタグ情報がある場合は、次のような複雑な指定ができます。

例 2012年4月に小石川後楽園で撮影した、「桜(サクラ、ザクラ)」を含み、「水や空」のタグを除くイメージを表示する。

{{image_album image:'album/2012/1204*.jpg', key:'小石川後楽園', key2:'桜,サクラ,ザクラ', except:'水,空'}}

設定

pluginとcgiのインストール

(1)ダウンロードします。

⇒ image_album_005.zip ※古いバージョンは削除され、リンク先がない場合があります。

(2)解凍します。

解凍すると、フォルダ付きのファイルが生成されます。

html/
  image_album.cgi # アルバムを表示するcgi
  image_album_cgi.conf#sample # cgi用の設定ファイル
plugin/
  image_album.rb # pluginの本体
plugin/ja/
  image_album.rb # 日本語リソース
theme/
 image_album.css # スタイルシート

(3)あなたの環境に合わせて設定を変更します。

image_album_cgi.conf (名前から#sampleを削除ください)
  @home_url = './'  # ホームの場所を指定します。変更が必要であれば、後で更新するので、とりあえず、そのまま。
  @cache_path = '/home/hoge/data/tdiary/cache' # ※重要※ tDiaryのキャッシュのパスを指定します。

(4)所定の場所に保存します。

html/ image_album_cgi.rb, image_album_cgi.conf
  この2ファイルを tDiaryを起動するフォルダ(index.rbがある場所)に保存。
  image_album_cgi.rb は、permissionを変更し、cgiとして起動できるようにする。
plugin/ image_album.rb
  plugin本体を tDiary のシステムフォルダの mics/plugin/ に保存。
plugin/ja/ image_album.rb
  日本語リソースを tDiary のシステムフォルダの mics/plugin/ja/ に保存。
  これがないと、英語表記になります。
theme/ image_album.css
  スタイルのファイルを tDiary のテーマのフォルダ theme/ に保存。

SmoothGalleryのインストール

アルバムを表示しないのであれば、必要ありません。

(1)ダウンロードします。

http://smoothgallery.jondesign.net/ から探してください。

以下の内容は、Smooth Gallery 2.0の場合の例です。開発版(dev)やバージョンによって状況が違うようです。

ダウンロード

  1. http://smoothgallery.jondesign.net/download/ の Download JonDesign's Smooth Gallery 2.0 in Zip Formatをクリックします。
  2. ダウンロードするファイルを保管する場所を指定すると、ダウンロードが始まります。
  3. ファイルを解凍します。

(2)解凍したファイルを所定の場所に保存します。

SmoothGallery-2.0(すぐ下にscriptとcssがある方)の内容をフォルダごと、tDiaryの起動フォルダ(index.rbがある場所)にコピーします。 解凍方法によっては、SmoothGallery-2.0のフォルダが二重に作成されます。内側の方のフォルダをコピーします。

他のバージョンの場合、または、別の場所に保管する場合は、image_album_cgi.conf を編集してください。 説明は省略します。confの内容を見て、理解できなかったら、実行しないでください。

(3)SmoothGallerのカスタマイズ

アルバムのイメージサイズを変更するには、css/jd.gallery.cssの最初の部分を更新します。

#myGallery, #myGallerySet, #flickrGallery
{
  width: 460px; ⇒ 例 640px
  height: 345px; ⇒ 例 640px
  z-index:5;
  border: 1px solid #000;
}

手を入れれば、もっと使いやすくなるのでしょうが、CSSは苦手です。 他はオリジナルのまま使用しています。 どなたか、デザインとCSSで協力できる方がいらっしゃいましたら、連絡ください。

(4) ローカルPCでのテスト

SmoothGallery-2.0フォルダの下の demo.html をクリックします。 アルバムが表示されれば、この段階でのインストールは成功です。

(5) 不要なファイルの削除

pluginからアルバムの表示に成功したら、不要なファイルを削除します。 SmoothGallery-2.0フォルダの下の cssとscriptsのフォルダを残し、imagesフォルダやdemo.htmlなどを削除します。

プラグインの有効化

tDiaryの「設定」メニュー⇒「プラグイン選択」⇒「image_album.rb」にチェックを入れます。

テスト

(1)image.rbでアップロードしたイメージのあるページを編集し、本文の最初にpluginを追加します。

{{image_album}}

(2)プレビューボタンを押すと、プレビューに大きなイメージが3個表示されれば、インストール成功です。

(3)次に、登録ボタンを押し、ページを保存します。

最新などの一覧表示で、小さなイメージが 3個 表示されるか確認します。

(4)記事を表示し、「アルバムを表示」するボタンが表示されるか確認します。

アルバムを表示のボタンを押し、アルバムが表示されれば、SmoothGalleryもインストール成功です。

おめでとうございます。

使い方

image_albumは、image.rbでアップロードしたイメージファイル、または、ftpなどでアップロードしたイメージファイルを表示します。 image.rbとは、絵日記プラグインなどと呼ばれる、写真などのイメージファイルを記事(日記)にアップロードし、表示するプラグインです。

wiki記法では、次のように、本文に記入します。

{{image_album image:'album/*.jpg', title:'アルバムのタイトル', key:'絞り込みの条件' }}

例 最新の一覧の概要に小さいイメージを表示し、記事の表示で大きなイメージを表示する。

{{image_album }}

基本設定で、dayモード(その日の記事表示)で大きなイメージとアルバムボタンを表示します。

  1. latestなどday以外のモード(最新の一覧など)で、小さなイメージを表示します。(アルバムボタンは表示しない)
  2. title:を書かないと、そのページのタイトル(カテゴリと日付を除く)をアルバムのタイトルにします。

例 最新の一覧で小さいサイズを概要に表示し、記事表示では本文の後ろに表示する。

次の設定では、最新の一覧でイメージを表示し、記事表示では何も表示しません。
{{image_album day:'hide'}}

!最初のパラグラフ。これより前が最新の一覧で表示される。

次の設定では、最新の一覧で何も表示せず、記事表示でイメージとアルバムボタンを表示します。
{{image_album latest:'hide'}}

例 別の記事のイメージを表示する

例えば、2012年3月3日のページにimage.rbでアップロードしたイメージを表示します。

{{image_album image:'20120303*.jpg', title:'わが家のひな祭り' }}

絵日記プラグイン image.rb でアップロードしたイメージファイルは、日付(YYYYMMDD)、下線(_)、連番の数字という形式で保存されています。この特徴を利用し、イメージファイルを指定します。

例 ftpなどでアップロードしたイメージファイルを表示する

イメージが保存されているパスを確認し、記入します。

{{image_album image:'album/*/*.jpg' }}

ファイル名やパス構成は、ある程度規則がある方が、ファイルの絞り込みが楽になります。

例えば、ホームタウンジャパンでは、次のようなイメージのフォルダ構成を取っています。

album/
  2009/
  2010/
  2011/
  2012/

各イメージファイルは、次の規則に従って、ファイル名を命名しています。

年の2桁 + 月の2桁 + 日の2桁 + イメージの管理番号4～5桁

この規則性を利用し、特定の日付や月を指定しています。

{{image_album image:'album/*/*.jpg' }} # アルバムの全てのイメージを指定
{{image_album image:'album/2012/1204*.jpg' }} # 2012年4月の全イメージを指定
{{image_album image:'album/*/??04*.jpg' }} # 各年の4月の全イメージを指定

例 タグ情報を利用し、イメージを条件検索する

フォルダに image.conf というタグ情報ファイルがあると、その内容からイメージを条件検索します。 条件検索は、選択されたイメージファイルを絞り込むものです。つまり、ファイルの指定がなければ機能しません。

条件指定は、絞込条件の key:(key1:), key2:, key3: (別名のtag1:, tag2:, tag3:も使用可)と、除外条件の except: が使用できます。

key:(key1:, key2:, key3:)と except: では、同列の条件を「,」で区切り複数指定できます。 key:(key1:), key2:, key3: の間は、AND条件になります。

先に示したホームタウンジャパンでは、場所、テーマ、被写体の種類などをタグ情報として保管しています。

# 東京国立博物館を含む上野地域の桜を選択
{{image_album image:'album/*/*.jpg', key:'上野,東京国立博物館', key2:'桜,サクラ,ザクラ' }}
# 上野公園の蓮を選択
{{image_album image:'album/*/*.jpg', key:'上野公園,不忍池', key2:'蓮,ハス', except:'木蓮,モクレン' }}

タグ情報 image.conf の作り方

一行にひとつのイメージファイルのタグ情報を記入します。 文字コードは UTF-8、改行コードは LF (実際は CR、CR+LF も可)にします。 それぞれのフォルダに、そのフォルダが含むイメージのタグ情報を作成しておきます。

書式:

ファイル名(拡張子を除く) + 半角スペース(タブも可) + タグ情報 + 半角スペース(タブも可) ...

実際の例 (一部の抜粋):

1201136886 蓮池と弁天堂 上野不忍池
12011369211 五条天神 上野公園
1201136928 曽我直庵筆 龍図屏風 東京国立博物館
1201137047 旧寛永寺五重塔 上野公園
1201277144 雪吊 小石川後楽園
1201277168 梅 光圀梅 小石川後楽園
1201277237 白梅 湯島天神
1202046940 蓮池の弁天堂 上野不忍池
1202047332 梅まつりの黄門様 小石川後楽園
1202047353 梅 光圀梅 小石川後楽園

余談ですが、写真管理で使用してきた規則性を利用して、簡単にアルバム表示ができるように作成しました。 写真の管理には、DPP(Digital Photo Professional)で規則的なファイル名の作成とファイル名にタグ情報を付加、Flexible Renamerでファイル名の一括更新、dir/bでファイル名からタグ情報ファイルを一度に作成、お手軽画像変換でイメージにタグ情報を一括挿入しています。

エラーのチェック

編集のプレビューで、エラーがあれば、そのエラー内容を簡単に表示します。

  1. REFER INVALIED FOLDER: tDiaryの起動パスより上位のパス指定である。 ⇒ image:のパス指定を変更する。
  2. WRONG FILE EXTEDNT: イメージ(.jpg, .jpeg, .png, .gif)以外の拡張子が指定されている。⇒ image:のファイル指定を変更する。
  3. NO IMAGE FILE: imageの指定でイメージファイルがない。 ⇒ イメージファイルがある場所を指定する。
  4. NO MATCHING IMAGE: 条件指定で該当するイメージファイルがない。 ⇒ 条件を変える。
  5. INTERNAL ERROR - WRONG IMAGE CACHE FORMAT: キャッシュが壊れている ⇒ 設定 ⇒ Image Albumでリセットする。
  6. ERROR : その他のエラー

また、image_albumのバグ(不具合)や環境により正常に動作しない場合、他のエラーが表示されるかも知れません。

本文に記入するパラメーターの書き方

パラメーターの順序は、どこからでもOKです。

記入例: {{image_album image:'201202*.jpg', key:'ほにゃらら, むにゃらら', title:'tDiaryのある情景'}}
  1. image: イメージのファイルを指定します。
    1. imageを指定しない場合、そのページにimage.rbで登録されたイメージになります。
    2. パス(例: album/など)を指定しない場合、image.rbでアップロードしたパスになります。(@options['image.dir']を見ている)
    3. ワイルドカードが使用可能です。(例: 'album/*/*.jpg')
    4. イメージとして有効な拡張子は、.jpg, .jpeg, ,.png, .gifです。(大文字も可)
    5. tDiaryを起動したパスより、上位のパスは指定できません。
  2. key:(key1:), key2:, key3:(tag1:, tag2:, tag3:も可), exception: で、タグ条件を指定します。
    1. imageでファイルが存在しないと、タグ条件は機能しません。
    2. 同じタグ内では、ORになります。(例: '蓮,ハス')
    3. key:, key2:, key3: の間は AND条件 になります。
    4. exception:は、除外条件になります。(例: key:'蓮,ハス',exception:'木蓮,モクレン')
    5. 複数のタグを「,」で並べることができます。各タグの前後の空白は削除されます。
  3. title: アルバム表示のタイトルを指定します。
    1. 指定がない場合は、記事のタイトルから、カテゴリと日付を除いた文字列を使用します。
  4. limit: tDiaryのページに表示するイメージの最大数を指定します。(初期値 3)
    1. 携帯電話で、ページに表示するイメージは1つ(初期値)です。
  5. play_limit: アルバムに表示するイメージの最大数を指定します。(初期値 50)
    1. 携帯電話で、アルバム表示は行いません。通信料金がえらく高いことになります。
  6. day: 記事の表示(dayモード)でのイメージ表示を、1個、または、3個のパラメーターで指定します。
    1. day:'hide' は特別な表記で、何も表示しません。(イメージとアルバムボタンを表示しません)
    2. day: を記入しない場合は、すべて初期値になります。
    3. day: "イメージのサイズ, イメージの最大表示数, アルバムボタンの表示" で指定します。指定内容を文字で記入します。
    4. show イメージのサイズ (初期値 大きなイメージ): photoで大きなイメージ、thumbnailで小さなイメージ、hideで表示しない
    5. limit イメージの最大表示数 (初期値 3): 入力値がない場合は、@options['image.limit']、@options['image.day_limit']、または、3を取る。
    6. play アルバムボタンの表示 (初期値 ボタンを表示): showでボタンを表示、hideで表示しない
    7. 例 day:'hide,,' アルバムボタンのみ表示します。(イメージを表示しない。アルバムボタンを表示する)
    8. 例 day:'thumbnail,,' 小さいイメージとアルバムボタンを表示する。
    9. 例 day:',50,' 表示するイメージを50にします。イメージのサイズとボタンは、初期値を使用します。
  7. latest: 一覧の表示など(day以外)のイメージ表示を、1個、または、3個のパラメーターで指定します。記入方法はday:と同じです。
    1. latest:'hide' は特別な表記で、何も表示しません。(イメージとアルバムボタンを表示しません)
    2. latest: を記入しない場合は、すべて初期値になります。次の内容です。
    3. 各初期値は、thumbnail(小さなイメージ); limit イメージの最大表示数 3; アルバムボタンを表示しない です。
    4. 例 latest:'hide,,' アルバムボタンのみ表示します。(イメージを表示しない。アルバムボタンを表示する)
    5. 例 latest:'photo,,' 大きなイメージとアルバムボタンを表示する。

キャッシュについて

表示するイメージの内容は、初回の検索結果をキャッシュに保存して、次回よりキャッシュの内容を元に表示しています。

キャッシュは、始めて image_album でイメージを表示するときに作成されます。 また、プレビューを指定したとき、キャッシュが古い時(初期値で2日後)に更新されます。

イメージファイルが削除・追加されたり、タグ情報が更新された場合、キャッシュの更新が必要です。

  1. 特定のページにのみ、影響がある場合は、そのページを編集して、プレビューを行ってください。
  2. 全てのキャッシュを更新したい場合は、設定ページのImage Albumページから、キャッシュの削除を実行してください。
  1. キャッシュの場所: tDiaryのキャッシュ(@cache_pathで指定)パスの image_album/ の中
  2. 目的: ファイル検索と条件検索を表示の度に毎回行う負荷を軽減するため。
  3. 寿命: 初期値で 48時間、つまり、2日間。@options['image.cache_cycle']で変更可能

基本設定 @options

必要であれば、基本設定を追加します。多くの場合、初期設定のままでも多分問題ありません。 設定する場合は、必要な項目をコピーして、tdiary.confなどに追記してください。

基本設定と初期値

@options['image.dir'] ||= "./images/" # image.rbの設定を使う。image:でパス指定がない場合のイメージの保管場所。
@options['image.css'] = "/theme/image_album.css" # cssファイルの指定。
@options['image.cache_cycle'] = 48*60*60 # キャッシュの寿命。秒単位。0 を指定すると、キャッシュを自動更新しない。1など小さい値を設定すると、毎回更新する。

本文に記入するプラグインで変更できる基本設定と初期値。パラメーターが優先します。

@options['image.day_show'] = 'photo' # dayモードのときのイメージの表示。photo:大きい、thumbnail:小さい、hide:表示しない
@options['image.latest_show'] = 'thumbnail' # latestなどday以外のモードのときのイメージの表示。
@options['image.limit'] = 3 # tDiaryのページで表示するイメージの上限
@options['image.mobile_limit'] = 1 # 携帯電話の場合のtDiaryのページで表示するイメージの上限
@options['image.day_limit'] = 3 # dayモードのイメージの上限。@options['image.limit']があれば、その値が優先。
@options['image.latest_limit'] = 3 # latestモードのイメージの上限。@options['image.limit']があれば、その値が優先。
@options['image.day_play'] = 'show' # dayモードのときのアルバムボタンの表示。show:表示、hide:表示しない
@options['image.latest_play'] = 'hide' # latestなどday以外のモードのときのアルバムボタンの表示。
@options['image.play_limit'] = 50 # アルバムに表示するイメージの上限。0 に設定すると、アルバムボタンを表示しない。

履歴

plugin image_album.rb

  1. 0.0.1 2012-01-30
  2. 0.0.2 2012-02-23
  3. 0.0.3 2012-03-03
    1. 2012-03-08 change button later place
    2. 2012-03-12 get default title
    3. 2012-03-13 get config file
    4. 2012-03-14 add key2, key3 and error message on preview
    5. 2012-03-15 add validate, wild card in file path
  4. 0.0.4 2012-03-17
    1. 2012-03-20 add opt day, latest, except; limit/play_limit to array; remove photo/thumbnail/button
    2. 2012-03-22 debug except
    3. 2012-03-26 add hide option
    4. 2012-03-28 debug when ,,hide
    5. 2012-04-20 add clear cache, separate resources
    6. 2012-04-21 add add @excepts to cache seeds
  5. 0.0.5 2012-04-21

cgi image_album_cgi.rb

  1. revision history
  2. 0.0.1 2012-01-30
  3. 0.0.2 2012-02-23
    1. 2012-03-03 add name '-cgi' to cgi and the config file, sort images
  4. 0.0.3 2012-03-03
    1. 2012-03-13 add alt in img tag
    2. 2012-03-15 add keys, wild card in path
  5. 0.0.4 2012-03-17
    1. 2012-04-21 change scrpit name image_album_cgi or unified name
    2. 2012-04-21 separate header and script element for adapting any versions of SmoothGallery 2.x
  6. 0.0.5 2012-04-21
作成: 2012年1月30日 更新: 2012年5月8日
カテゴリ: plugin SmoothGallery image_album.rb

TOP

/

システム

/

plugin

|

ページ:

|1|

2

3

>

関連ページ [plugin]

↑先頭| TOP(このサイトについて)| 個人情報| お問い合わせ| 検索| © Teruo Kohashi, kohashi.org

Enhanced by blexversion 0.1.5
Generated by tDiary version 3.1.2
Powered by Ruby version 1.9.2-p290