３．あしあと数推移グラフ設置 ＆４．あしあと画面にメンバーの写真を載せる

Ｔｈａｉ：Ｐｏ－ＳＮＳ

また１週間ほどが過ぎましたが、

その後は、ソーシャルマップの修正ぐらいで、

大きなことはしていないでしょうか。。。


というわけで、現実と水が空きすぎないうちに、先へ。。。


１．Lightboxの導入

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

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

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

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

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

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

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

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

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

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

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

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





今回は、


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

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


の２つを一気にｗ

・・・っていっても、これは同時に設置できてしまったのでｗ



はい、今回も前回と同様、お助けページはコチラ、

http://hiro.oneoctave.jp/?page_id=1067

前回のショートメッセンジャーのすぐ下に、

『足あとカスタムテンプレート』

ってところがございます。。。

もう、そちらにおんぶに抱っこ。

必要なファイルをダウンロード→解凍、

必要なディレクトリにＦＴＰでアップアップ。

管理画面でカスタムＣＳＳも追加してみて、

＆ついでに、メンバー画像の正方形化処理ってやつもやってみた。



ファイルを置く場所さえ間違えなければ、

おそらく大丈夫。。。

それほど、簡単に今回の作業は終了～ｗｗｗ

無事、足あと数推移グラフが表示され、

足あとにメンバー画像が付与され、

しかもその画像が正方形化処理されている。


感涙；；；




が、、、



この次の　５．コメント欄にメンバー画像、、、


で、その分しっかりどっぷり嵌ったのでした；；；





にほんブログ村


にほんブログ村


にほんブログ村

２．ショートメッセージ機能の導入

Ｔｈａｉ：Ｐｏ－ＳＮＳ


はい、書けるときにどんどん逝きますｗ

１．Lightboxの導入

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

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

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

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

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

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

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

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

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

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

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

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



で、今回は、

２．ショートメッセージ機能の導入

でござる。。。


基本スクラッチから作ることなどできる技術もないので、

他力本願ｗｗｗ

で、今回の他力様は、、、

http://hiro.oneoctave.jp/?page_id=1067

ここからの主な変更は、こちらさまにお世話になりっぱなし；；；

ひとまず必要なファイル（explate1.1.zip）をダウンロードいたします。

あとは同梱の説明書通りでＯＫ。ｗ

１．explateフォルダ直下のconfig.phpを編集

２．phpAdminでOpenPNEで使っているＤＢにexplate/setup/smsger.sqlファイルをインポート

３．必要なファイルを適切な位置に設置

４．explate/setup/smsger(OpenPNE2.12).tplの内容をOpenPNE管理画面/テンプレート挿入
　
　　から、好きな場所にペースト。


だけ。

１．の修正も簡単。２箇所。使っているベースの選択と、OpenPNEディレクトリの場所だけ。

２．のＤＢ弄りはちょいと不安でしたが、.sqlファイルのインポートだけなので、

　　そりゃあ、OpenPNE2の導入ですでに経験済みな作業なわけでｗ

　　無事完了！

３．public_html直下にexplateフォルダをまんま設置でＯＫ。

　　今回は、ショートメッセンジャー機能だけ欲しかったので、

　　smsgerフォルダだけアップロード。

４．h_home 9の場所にペースト。


・・・はい、怖いぐらい何事もなく、無事インストール完了ｗｗｗ

これぐらい簡単に機能の着脱可能になったら、

何の予備知識もなくＳＮＳの構築が可能になりますねｗ








にほんブログ村


にほんブログ村


にほんブログ村

１．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のあとについている[]はおまじないですｗｗｗ

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


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

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

以上の作業で、

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

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

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

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



これと平行して、

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

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

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

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

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






にほんブログ村


にほんブログ村


にほんブログ村

Thai:Po-SNSを手探りながらいじってます；；；

Thai:Po-SNS

ここでもアドレスを晒し、

MIXIでもテスト参加者を募ったのち、アドレスを晒し、

ついでに、招待制→オープン登録制に仕様変更。

自ブログでもアドレスを晒した結果、、、

現在メンバー６９名！！

思ったよりペース速いぞ！！

といいつつ、１０月８日までに１００名とかとんでもない目標たてていたりするｗｗｗ

・・・今日が５日だから、、、なんとかなるんじゃね？？？

俄然、やる気が出てくる私ｗ

さて、こちらのブログでは、携帯投稿設定を可能にするまで、

というか、それまででも、今まででも、

それが一番大きな山場であったことは間違いない。。。

きっと、今後はアップグレードが大きな山場になるに違いない。。。

・・・まぁ、現状で作りこめば、

サービス上、アップグレードは必要ないかもなのですが。。。



まぁ、先のことはさておき、

その後、Thai:Po－SNSでいじっているのは、

まぁ、機能的には

１．Lightboxの導入

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

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

・・・ぐらいか？

と同時に、

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

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

な見た目変更も。

このあたりを自分の作業備忘録としてエントリーに残そうと思います。



あっ、忘れていた！！

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

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

も施術済みでした。




・・・作業詳細はあとでねｗ







にほんブログ村


にほんブログ村


にほんブログ村