CentOS5で新サーバ構築/(11)OpenPNEのカスタマイズ-2

Last-modified: 2008-07-02 (水) 13:12:52 (5796d)

OpenPNEのカスタマイズ　写真のオーバーレイ表示 †

OpenPNEの日記等の写真（サムネール）をクリックすると原寸大で表示するのだが、これが別画面で開くのは、いかにも操作性が悪い。Wordpress(ブログ)やイメージ掲示板はオーバレイ表示できるように改善してきたので、これも同じようにと言う思いがないわけではなかった。ただ、先々のバージョンアップなどを考えて、カスタマイズは最小限にしておこうと思っていたのだ。
だが、その決心も2ヶ月で崩れた(^^;)　「カタクリの花」氏の何気ないコメントに触発されて、やっぱりヤランバ！と一気呵成に取り組んだ記録です。(2008/4/11 実施)

OpenPNEのカスタマイズ　写真のオーバーレイ表示

Lightboxの動作原理 †

基本的なやり方は今までどおり。「Lightbox」をOpenPNEに組み込むということ。
Lightboxは、そもそもJavascriptである。PC側に送信するhtml文に組み込めばそれでよいのです。
サーバ側ではPHP(CGI)やデータベースなどを駆使してコンテンツを動的に作成するが、最終的には、html形式のデータになってパソコン側に送られる。あとは、ブラウザが自分でjavascriptを処理して表示するだけ。

html文で画像を表示するのは、<img src=""> というタグだが、別画面で開く場合は「target=_blank」というオプションである。同じ画面内でオーバレー表示するためには、これを「rel="lightbox"」と変更すればよい。

したがって、組み込みのポイントは２つ。
1. 出力するhtml文は、どのPHPで作成しているか？　その個所を見つけ出し、そこを上記のように修正する
2. lightboxはjavascriptだが、css等も連動しているので、<head>部分に、それらも組み込んであげる必要もある。

Wordpressの時は、このへんが「プラグイン」という形で一括供給されていたので比較的簡単だった。むしろ、イメージ掲示板の方が、完全に手作業になってたいへんだったが、先の理屈が分かっていれば、基本的に難しいことではない。掲示板はCGIだけで動いていたので、割と簡単にクリアできたのだ。

OpenPNEではどうする †

残念ながら、OpenPNEのサイトには、Lightboxのサポート記事はないし、もちろんプラグインもなかった。
ソースの構成が何も分かっていない時は、力技しかないが、一応こんな手が考えられる。
1. OpenPNEのPHPは何10本とあるわけだが、「target=_blank」をキーワードにマルチファイル検索する。
2. 画像表示個所と思われたら、そこを「rel="lightbox"」と修正して、表示の変化を見る
3. 実際に日記を表示させた状態でソースを表示し、変化の具合を確認するのも有効

ただし、これはウィンドウの開き方だけなので、<head>部分の修正を、先に対処する必要がある。どのファイルを構えばいいのか、また悩みが深い。

OpenPNEでLightbox †

しかし、心配ご無用！　どの世界にも先達はいるもので、ネット検索したら見事に見つかった。
その名も■OpenPNEでLightboxや、■OpenPNEにLightBoxを導入と、文字どおりのブログ記事が見つかった。どちらかと言うと、後者の方がやや詳しい解説だった。

要約すると、手順は以下の3つ
1. まず、「Lightbox plus」最新版をダウンロードして、サーバにセットする
2. OpenPNEへ、 Lightbox.css の引用、<script type>への追加などを行う
3. OpnePNEの該当ソースを修正する

実際の組込み手順 †

理屈はそれくらいにして、実際のセットアップの記録は以下のとおり。最終結果に合わせて整理したものであるが、どこでハマったかは、最後に軽く触れます。

■ Lightboxのダウンロードと組み込み †

ダウンロード先は、Lightbox Plus。サンプル画面があり、ポイントも詳しく解説されている。もちろん日本語。
ここで、「サンプルのダウンロード」をクリックすると、「lightbox_sample.zip」が落ちて来る。

サンプル画像も一式入っているが、必要なのは resourceホルダーのみ。ファイル構成は大きく変わっていない。

lightbox_plus.js　　メインスクリプト 
lightbox.css　　　　スタイルシート（改変版らしい) 
overlay.png　　　　 透過率 50% の PNG イメージ (バックグラウンドのマスク用)
loading.gif　　　　 ロード用のアニメーション GIF イメージ 
expand.gif　　　　　拡大ボタン用イメージ 
shrink.gif　　　　　縮小ボタン用イメージ 
blank.gif 　　　　　ブランクイメージ 
close.gif 　　　　　右上に置かれるクローズボタン用イメージ
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
他にも追加されたイメージファイル等がいくつかあるが、通常の利用では、上記だけで十分。

これを、WinSCP使って、サーバの/home配下にアップしておく。

このうち、まずJavascriptのファイルを、サーバのOpenPNE配下のディレクトリー public_html/js/ にコピーする。
```
[root@kuraric5]# cd /var/www/OpenPNE/public_html/js
[root@kuraric5 js]# cp -arp  /home/eizo/resources/*.js .
```

その次に、pngやgif等のイメージファイルだが、今回は専用のディレクトリーを作成して、そこへコピーした。

[root@kuraric5 bbsdata]# mkdir /var/www/OpenPNE/public_html/lb_images
[root@kuraric5 bbsdata]# cp -arp *.gif /var/www/OpenPNE/public_html/lb_images
[root@kuraric5 bbsdata]# cp -arp *.png /var/www/OpenPNE/public_html/lb_images
[root@kuraric5 bbsdata]# ls /var/www/OpenPNE/public_html/lb_images
blank.gif  expand.gif   next.gif     prev.gif    zzoop.gif
close.gif  loading.gif  overlay.png  shrink.gif

ポイントは、相対パスを正確に記述すること。それさえできれば、どこにおいてもよい。jsファイルと同じところでも問題はないはず。

その相対パスの関係だが、エディタで lightbox-plus.js を開いて、以下のように画像ファイルのパスを修正する。起点となるDIRは public_html/ である。

[root@kuraric5 js]# vi lightbox-plus.js
----------------------
(最後の数行を、*.gif や.*.png の格納DIRに合わせる。起点となるDIRは public_html/ ）
Event.register(window,"load",function() {
       var lightbox = new LightBox({
               loadingimg:'lb_images/loading.gif',
               expandimg:'lb_images/expand.gif',
               shrinkimg:'lb_images/shrink.gif',
               previmg:'lb_images/prev.gif',
               nextimg:'lb_images/next.gif',
               effectimg:'lb_images/zzoop.gif',
               effectpos:{x:-40,y:-20},
               effectclass:'effectable',
               closeimg:'lb_images/close.gif',
               resizable:true
       });

オリジナルでは、resource/・・・となっている。したがって、フォルダをそのままコピーした場合は、何もしなくていいことになるが、今回は敢えて変更してみたと言うことで(^^;)

■ CSSの追加 †

これは悩むところだが、実はOpenPNEの管理画面で、簡単に追加CSSが記述できる。
「デザイン」－「配色・CSS変更」－「カスタムCSS追加」で、カスタムCSSの一番下の行に、lightbox.cssの内容をまるごとコピペで追記する。

　　　

■ ヘッダへの追加 †

OpenPNEが作成するhtml文のヘッダ部分に、<script type>への追加を行う。
これも、管理画面に機能があり、　デザイン→HTML挿入→HTML挿入(HTML head内)を利用する。

使っていないけれど携帯用とPC用のメニューが2つあるので注意。もちろんPC用！

以下の2行だが、必ず"spica.js"を先に記述する 
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
<script type="text/javascript" src="spica.js"></script>
<script type="text/javascript" src="lightbox_plus.js"></script>

　　　

■ 画像へのリンクへ「rel=”lightbox”」属性を追記 †

さて、作業はいよいよ大詰めに。日記のテンプレートに修正を加える。対象ファイルは２つ。

日記関係のファイルはここにある。拡張子「tpl」はtemplatesの略ということで、テキストです。

　/var/www/OpenPNE/webapp/modules/pc/templates/
　　　fh_diary.tpl　　　　　　・・・日記本文
　　　fh_diary_list.tpl　　　　・・・日記リスト

ここにも携帯用のファイル /var/www/OpenPNE/webapp/modules/ktai/templates が用意されているので、要注意！！

({if $item.image_filename_1})<span class="padding_s"><a href="({t_img_url filename=$item.image_filename_1})" target="_blank"><img src="({t_img_url filename=$item.image_filename_1 w=120 h=120})"></a></span>({/if})
({if $item.image_filename_2})<span class="padding_s"><a href="({t_img_url filename=$item.image_filename_2})" target="_blank"><img src="({t_img_url filename=$item.image_filename_2 w=120 h=120})"></a></span>({/if})
({if $item.image_filename_3})<span class="padding_s"><a href="({t_img_url filename=$item.image_filename_3})" target="_blank"><img src="({t_img_url filename=$item.image_filename_3 w=120 h=120})"></a></span>({/if}) 

ここを、以下のように修正する。

({if $item.image_filename_1})<span class="padding_s"><a href="({t_img_url filename=$item.image_filename_1})" rel="lightbox"><img src="({t_img_url filename=$item.image_filename_1 w=120 h=120})"></a></span>({/if})
({if $item.image_filename_2})<span class="padding_s"><a href="({t_img_url filename=$item.image_filename_2})" rel="lightbox"><img src="({t_img_url filename=$item.image_filename_2 w=120 h=120})"></a></span>({/if})
({if $item.image_filename_3})<span class="padding_s"><a href="({t_img_url filename=$item.image_filename_3})" rel="lightbox"><img src="({t_img_url filename=$item.image_filename_3 w=120 h=120})"></a></span>({/if}) 

つまり target="_blank" を rel="lightbox" へ書き換えればOK

3行ある。1つの日記に3つまで写真が添付できるのに対応していると思われる。この3行がもう1箇所あるので、都合6行分の修正と言うことになる。
リストについても全く同様に、6箇所の修正となる。

コミュニティやイベントの書き込みにも適用する場合はそれぞれのテンプレートをおなじように編集すればOKとあるが、まぁ利用が進んだ段階で対処することにして、一応完了に。

　　　

トラブル原因 †

以上、参考記事のとおりやればナンと言うことはない話だったが、見事にハマって半日仕事とあいなった。失敗は以下の2つ。

target_blankの修正間違い
　rel="lightbox"　とすべきを　target="lightbox" としてしまった！　文法間違いで、全く動作しない。いかにも、ケアレスミス。
HTML挿入間違い
「ログイン前フッタ－」などという、全く意味のないところへ挿入してしまった。　<head>~</head>等を前後に付けてみたが、何の意味もなかった。左フレームのメニューをよくれば、ちゃんと『ヘッド内』という項目があった！

（2008/04/14 記録）

添付ファイル:

custom_css.jpg 1317件 [詳細]

html_pc.jpg 1253件 [詳細]

finish.jpg 1284件 [詳細]