開発者がOpenPNEの全容を把握するためにすべきこと。

概要

この記事は、開発者視点でOpenPNEを改造しようと思った時に、まずどうやってOpenPNEの全容と内部構造を把握すればいいかについてまとめたものである。したがって、実際のコーディングについては一切触れていない。実際のコーディングについては一切触れていない。記事を書くにあたっては、OpenPNEの公式ドキュメントのページを見ながら必要最小限の内容についてまとめた。

OpenPNEとは、株式会社手嶋屋が中心になり2004年からオープンソースで開発してきたSNS構築ソフトウェアで、PC、ガラケー、スマフォなど各デバイス対応、様々なサーバで利用可能。Apache2.0ライセンスを採用し、開発・利用・配布のすべてを無償で行える。個人的にはPHP フレームワークと呼んで差し支えないと思う。

OpenPNEの内部構造を知る

改造イメージ

日記、メッセージ、足あと、マイミク、コミュニティに準ずる機能があるmixiライクなSNSが基本だけど、採用実績を見ると結構たくさん利用しているサイトがあるので、ザーッとトップ画面だけさらって気になるページはよく観察して、「こういう改造ができるんだ」と勉強してみよう。

仕様書読め

注意深く読む必要はなく、だいたいこういう内容なんだーとさらっていく方が気楽にやれる。開発ドキュメントのページにある「概要仕様書」(PDFファイル)と「テーブル定義書」(Excelファイル)と「画面遷移図」(PPTファイル)をバージョンに応じてダウンロードして読むといい。悩んだら最新版でいい。OpenPNEはこれらに反しない。存在する機能についてはこちらのスプレッドシートを参照。APIについてはこちらのAPIドキュメントを参照。

外見の変更にあたる準備として

公式ドキュメントにはこんなものとかこんなものがあったけど、いまいちまだよく分からない。たぶん、divタグのclassとかidとかに対応しているんだと思う。配色を考える時のページ構成要素の早見表にはなりそう。

HTMLソース読め

Firefoxのfirebugとか使えば、要素ごとに階層になって展開のオンオフが楽にできるからオススメ。それで、divタグの構造を確認しておくこと。適当にOpenPNEのSNSをテストで作って、ホーム画面あたりをブラウザのソース閲覧機能で開く。どんなidやclassを持ったdivが存在するのかを自分で確かめる。これができるとCSSいじりが楽になる。