１．Lightboxの導入

Ｔｈａｉ：Ｐｏ－ＳＮＳ

メンバー現在１７０名超えました！


登録いただいたみなさまに感謝です（涙；；；



さて、こちらのブログでは、

Ｔｈａｉ：Ｐｏ－ＳＮＳにかかわるＩＴネタ

ってことで、

主に、その大本のＯｐｅｎＰＮＥのカスタマイズについて

書き残していきたいわけでありますが、

前回、予告だけしておいて、中身は何にも書いていないので、

自分で作業内容忘れないうちに、

書き残しておこうと思います。


１．Lightboxの導入

２．ショートメッセージ機能の導入（MIXIボイスとかTwitterみたいなやつ）

３．あしあと数推移グラフ設置

４．あしあと画面にメンバーの写真を載せる

５．コメント欄にメンバー写真を載せる

６．メッセージスパム防止策（その１）

７．フレンド申請スパム防止策（その１）

さらに追加（汗（汗（汗

８．小窓ファイルの追加・修正

９．右サイドバーに新着情報（日記・トピック・ブログ・登録者・ログオンメンバー）

１０．ＩＥでのエラーとの格闘Ｐａｒｔ１（状況→原因究明→対処）

１１．ソーシャルマップの導入

１２．右サイドバーのてこ入れｗ

１３．携帯用のリンク・サイト内リンク表示方法の変更

。。。



とりあえず、、、

今回は、１．Lightboxの導入について

作業内容を残しておきます。



・・・って、何したっけｗ

すでに忘れかけている・・・。



と、とりあえず最初は、

OpenPNE拡張モジュール Ver.0.3.0

を入れようとしたんです。。。たしか；；；


・・・これが何かと申しますと、

(1) 改造なしに「レスをつける」リンクを表示する
(2) 改造なしにコメント欄にメンバーの写真を表示する
(3) 改造なしに投稿された写真にLightboxを適用する

テンプレートファイルやＰＨＰのファイルをいじることなしに、

上記の機能をＯｐｅｎＰＮＥに追加できるとか。

ほっほぉ～。。。

一番惹かれたのは実はコメント欄にメンバーの写真を表示するってやつ。

指示通りにやってみると、

見事、コメント欄に写真がついたー！！ｗｗｗ

・・・が、コメントするボタンが文字リンクにダウングレードしていたりｗ

・・・やっぱりOpenPNE2.12用だから？？？

・・・うちのがOpenPNE2.14だから？？？


ま、まぁ、おかげで、OpenPNEの仕組みや、

Javascriptやなんやら勉強する機会にめぐまれましたが。。。


そんな理由で、

最初は導入予定のなかった(3) 改造なしに投稿された写真にLightboxを適用する、

も挙動チェックのために、入れてみることに・・・。


・・・が、

動かんじゃんｗオワタｗｗｗ


で終わってはこのあと何も進まんっ！！

ってことで、火がついたｗ

ググッたググッたｗ


もうすでに、この時点で、本体の改造なしに云々はどうでもよくなっている。

本体改造上等！テンプレートいじる？バッチこいっ！！


で、出てきたのがコチラ↓

http://blog.karakuriya.biz/developers/openpne/000770.html

テンプレートいろいろいじらなきゃだが、わかりそう！（・・・な気がするｗ）


早速、作業をイメージ。。。


【作業内容】

１．Lightbox2一式ダウンロード
※参考ページではLightbox2のソースをいじっているが、いじらない方針で
２．一式を適切なディレクトリに配置
３．webapp/modules/pc/templates/common/layput.tplの修正
４．webapp/modules/pc/templates/fh_daialy.tpl（日記テンプレート）の修正
５．webapp/modules/pc/templates/fh_daialy_list.tpl（日記一覧テンプレート）の修正
６．webapp/modules/pc/templates/fh_daialy_edit.tpl（日記編集テンプレート）の修正
７．webapp/modules/pc/templates/c_topic_detail.tpl（トピック詳細テンプレート）の修正
８．webapp/modules/pc/templates/c_topic_list.tpl（トピック一覧テンプレート）の修正
９．webapp/modules/pc/templates/c_event_detail.tpl（イベント詳細テンプレート）の修正
１０．webapp/modules/pc/templates/c_event_list.tpl（イベント一覧テンプレート）の修正


・・・ま、まぁ、ざっとこんな感じでしょうか（汗（汗（汗

修正するファイル大杉ｗｗｗ

OpenPNEは上のように見てくれを操作するのはすべてテンプレートファイル（.tpl）

てことは、見てくれを変えたいときは、

その画面に使われている.tplを特定して、

そのファイルを弄ればＯＫということだな、、、ということがわかったｗ

さて、作業をひとつずつ。。。


１．ダウンロードは問題なし。

２．適切な場所＝Lightbox2で指定された通り。

　　あまりにいろんなもの弄りすぎて訳わからなくなるのを防止ｗ

　　ので、.jsファイルはpublic_htmlフォルダの下、jsフォルダの中、

　　imagesフォルダもpublic_htmlフォルダの下に設置、

　　cssフォルダも同様。


さぁ、いよいよ.tplファイルの修正です。。。

・・・というところで、大前提。

webappフォルダ下にある.tplファイルや.phpファイルは、

弄った場合は、webapp下の元の位置には配置しない！

webapp_extフォルダ下の同様の位置に置くことにする！！

これで、たとえ変更が気に入らず元に戻す場合も、webapp_ext下に置いたファイルを

削除すれば元に戻るｗ

・・・ただし、

そういう仕様にするには、

OpenPNEフォルダ直下のconfig.phpファイルをちょいと変更。


///
// webapp_ext ディレクトリ使用設定
///

define('USE_EXT_DIR', false);


の"false"→"true"へ変更！以上！！


３．webapp/modules/pc/templates/common/layput.tplの修正

全体的にLightBoxを読み込む部分の修正。

webapp/modules/pc/templates/common/layput.tpl

のの前に


＜span style="font-style:italic;"＞＜span style="font-style:italic;"＞＜script type="text/javascript" src="./js/scriptaculous.js?load=effects,builder"＞＜/script>＞＜script type="text/javascript" src="./js/lightbox.js"＞＜/script＞＜link rel="stylesheet" href="./css/lightbox.css" type="text/css" media="screen" /＞＜/span＞＜/span＞

（上の＜＞は全角です。そのまんま貼り付けたらエラーですｗ<>に変更してねｗ）の３行を追加。以上！！ｗ


さて、以降（４～１０）は、対象ファイルの、

target="_blank" を rel="lightbox～" に変更すればＯＫ。

それぞれの大体の変更箇所は、


■webapp/modules/pc/templates/fh_daialy.tpl

106行目から108行目 target="_blank" を rel="lightbox[diary]"
187行目から189行目 rel="lightbox[c({$item.c_diary_comment_id})]"

■webapp/modules/pc/templates/fh_daialy_list.tpl

144行目から146行目 target="_blank" → rel="lightbox[d({$item.c_diary_id})]"

■webapp/modules/pc/templates/fh_daialy_edit.tpl

103行目、116行目、129行目 target="_blank" → rel="lightbox[dialyedit]"

■webapp/modules/pc/templates/c_topic_detail.tpl

23行目から25行目 target="_blank" → rel="lightbox[t({$c_topic.c_commu_topic_id})]"
102行目から104行目 target="_blank" → rel="lightbox[c({$item.c_commu_topic_comment_id})]"

■webapp/modules/pc/templates/c_topic_list.tpl

63行目から65行目 target="_blank" → rel="lightbox[d({$item.c_commu_topic_id})]"

■webapp/modules/pc/templates/c_event_detail.tpl

26行目から28行目 target="_blank" → rel="lightbox[t({$c_topic.c_commu_topic_id})]"
136行目から138行目 target="_blank" → rel="lightbox[c({$item.c_commu_topic_comment_id})]"

■webapp/modules/pc/templates/c_event_list.tpl

62行目から64行目 target="_blank" → rel="lightbox[d({$item.c_commu_topic_id})]"


lightbox[d({$item.c_commu_topic_id})]

などのようにlightboxのあとについている[]はおまじないですｗｗｗ

複数写真がある場合にグルーピングしてくれます。


とにかく以上の作業で無事成功！

テンプレートファイル弄ったほうが簡単にできたｗ

以上の作業で、

弄る場所さえ間違えていなければ、

テンプレートファイルいじりはそんなに難しくはないぞ、、、

（非常に面倒くさいがｗ）

と、変な自信はついた気がするｗ



これと平行して、

ダウングレードした“コメントする”ボタンとメンバー画像の共存も、

テンプレートファイルを弄ることで解決！

・・・が、こちらは作業内容、、、

いろいろやりすぎて、どれが正しい作業か思い出せないｗ

まぁ、思い出したら、どこかで書きますｗ






にほんブログ村


にほんブログ村


にほんブログ村