ここの情報は古いです。ご理解頂いた上でお取り扱いください。

Changes between Version 8 and Version 9 of pne-book-9-note


Ignore:
Timestamp:
Mar 6, 2008, 4:54:54 PM (11 years ago)
Author:
imoto
Comment:

--

Legend:

Unmodified
Added
Removed
Modified
  • pne-book-9-note

    v8 v9  
    11= ディベロッパーガイドは分量が多いためページ分けしました =
     2
     3= 記事の修正があればノートに書いてください =
     4
     5
    26== 開発ツールの使い方 ==
    37[[Image(http://sc.pne.jp/200801261138.png)]]
     
    1216
    1317== 技術解説 ==
    14 === ディレクトリツアー ===
    15 
    16 OpenPNEのディレクトリ構造と役割
    17 OpenPNEの現在2.0系では独自のフレームワークを採用しています。
    18 よってディレクトリ構造も独自の構成をしているので、主要な5つのディレクトリについて見ていきたいと思います。
    19 
    20  * binディレクトリについて
    21    * binにはWEBブラウザ以外から呼ばれるプログラムが入っています。
    22    * 通常PHPというのは、WEBブラウザからアクセスされて、PHPで処理してWEBブラウザに返事をする形ですが、このbinにはLINUXのシステムであるCRONや、メールサーバなど、WEBブラウザ以外から呼ばれるファイルがあります。
    23    * binの中には2種類のファイルタイプがあります。一つ目はPHP、もう一つはcronです。このcronというファイルは同じファイル名のPHPと対になって存在している。
    24    * もう一つは、携帯の写メール投稿や、プロフィール画像の変更などの処理をするPHPファイルです。どのファイルもconfig.inc.phpをrequire_onceで呼んでいます。
    25 {{{
    26 require_once './config.inc.php';
    27 }}}
    28    * このconfig.inc.phpの中身見て見ると、config.phpを呼ぶ処理が書いています。config.phpには、SNSのサーバー管理設定、パス設定などがあります。
    29 {{{
    30 <?php
    31 /**
    32  * @copyright 2005-2007 OpenPNE Project
    33  * @license   http://www.php.net/license/3_01.txt PHP License 3.01
    34  */
    35 
    36 define('OPENPNE_DIR', realpath('../'));
    37 require_once OPENPNE_DIR . '/config.php';
    38 
    39 ?>
    40 }}}
    41    * mail.phpというPHPファイルを見ていきます。まず、config.inc.phpやinit.incなど必要なものを読み込む。その後にライブラリを読み込みます。
    42    * 次に、受信したメールを読み込みます。   
    43 {{{
    44 // 標準入力からメールデータの読み込み
    45 $stdin = fopen('php://stdin', 'rb');
    46 $raw_mail = '';
    47 do {
    48     $data = fread($stdin, 8192);
    49     if (strlen($data) == 0) {
    50         break;
    51     }
    52     $raw_mail .= $data;
    53 } while(true);
    54 fclose($stdin);
    55 }}}
    56    * そして、m_process_mailの関数内で、誰から送信されたメールなのか?どこに宛てて送信したメールなのか?などを判断してそれぞれの処理を振り分けます。
    57    * 最後に、m_process_mail($raw_mail);ですべての処理をしています。
    58 {{{
    59 // メールの処理
    60 m_process_mail($raw_mail);
    61 }}}
    62    * このmail関数にはデバッグ用ログ保存もあり、同時にデバッグの処理をしています。
    63 {{{
    64 // デバッグ用ログ保存
    65 m_debug_log(ob_get_contents(), PEAR_LOG_DEBUG);
    66 
    67 while (@ob_end_clean());
    68 }}} 
    69    
    70  * libディレクトリについて
    71    * libには主に、OpenPNEが利用する外部のライブラリがここにまとめています。
    72    * OpenPNEの外部ライブラリではほとんどがPEARですが、中にはSmartyなど他のライブラリもこのlibにまとめられています。
    73    * OpenPNEでは、この様にライブラリを同梱しているのでPEARを自由に扱うことが出来ないレンタルサーバでも対応できます。また、OpenPNEに同梱されているライブラリを使うことで、バージョンによる違いなどを考えなくても、処理が実行されるようになっています。
    74    * libにはPEARなどが入っているincludeディレクトリとsmarty_pluginsディレクトリがあります。
    75    * このsmarty_pluginsディレクトリにはOpenPNEにとってSmartyを便利に扱うプラグインが入っています。SmartyというのはPHPで書かれたテンプレートエンジンと呼ばれるもので、アプリケーションのロジックとコンテンツを分離して容易に管理するためのライブラリです。このSmartyを便利に使うためのプラグインがsmarty_pluginsディレクトリに入っています。
    76    
    77  
    78  * pubic_htmlディレクトリについて
    79    * このpubic_htmlには、直接ブラウザから呼ばれるCSSや、JavaScriptなどが入っています。
    80    * このディレクトリは、OpenPNEを呼び出すApache側、webサーバ側がここのpublic_htmlを基点にして、呼び出すという形になっています。ですので、ここから下のディレクトリは、インターネット上に公開され、ブラウザから直接アクセスされるということを忘れてはいけません。例えば、会員のみに公開したい資料をここに置いたとしても、URL直接たたかれたら会員でない人も見えてしまうので、注意が必要です。
    81    * まず、このディレクトリの中を上から見て見ると、cmdディレクトリがあります。cmdディレクトリにはYouTube、kakaku.comとか、tabelogといった、小窓のリストが入っています。このディレクトリには、企業さんが提供してくださったもの、OpenPNEプロジェクトで開発したものなどさまざまな小窓リストが入っています。
    82    * このcmdの中に入っているのはすべてJavaScriptで書かれています。小窓の特長として、ファイル名を使いたいドメインに「.js」をつけるという規約があります。小窓の詳しい解説は小窓の作り方で説明します。
    83    * 次にcssです。このcssディレクトリにはOpenPNEで使うスタイルシートが入っています。
    84    * 次はflashです。このflashディレクトリは現在1つしかありません。現在あるフレンドリストをFlashで表示するという機能のソースがここにあります。現在このflashのソースも公開してますので、これを編集しなおしてオリジナルのフレンドリストを作ることが出来ます。(ソースのURLを紹介)
    85    * 次はimgです。このimgディレクトリはデフォルトの設定では使いません。この機能を使うときは、config.phpで設定します。OpenPNEのパフォーマンスを上げるために、画像の一時ファイルをvarディレクトリに入れるのではなくpublic_htmlに公開することで、ブラウザが直接アクセスできるようになるので、スピードが上がります。
    86    * 次はjsです。このjsディレクトリはprototype.jpなど、必要なJavaScriptが入っています。
    87    * 次はmodulesです。このmodulesディレクトリはモジュールごとに画像やファイルを置くときに使います。
    88    * 最後のディレクトリはskinです。このskinディレクトリはOpenPNEのスキンが入っています。defaultというのがOpenPNEのデフォルトのスキンが入っているディレクトリです。
    89    * 次に、pubic_html以下にあるファイルを上から見ていきます。まず、cap.phpです。Captchaの略です。このcap.phpはCaptchaを生成するためにあります。cap.phpは友人を招待するときに、波打った文字を入力しますが、あの画像を生成するためににあります。
    90    * 次に、config.inc.phpです。config.inc.phpは、config.phpを読みにいくためのファイルです。
    91    * 次に、download.phpです。download.phpはファイルアップロードのためのファイルです。OpnePNE2.8からファイルアップロード機能が追加されています。
    92    * 次がimg.phpです。プロフィール画像や日記の写真だけは、index.phpではなくて特別なimg.phpというのを読んでいます。その下にあるimg_skin.phpはスキン画像が読んでいます。
    93    * 最後にindex.phpです。現在、OpenPNEはフロントコントローラモデルというのを採用しており、このindex.phpに集約しています。(ソースを表示)
    94    * index.phpのソースを見て見ると、openpne_execute()という関数があるのが分かります。このopenpne_execute()という関数が、すべての処理を振り分ける役割をしています。openpne_executeは、webapp/libのcontroller.phpの中にあります。このpublic_htmlの中のindex.phpが呼ばれて、ここからすべてのアクションに誘導されます。
    95  * setupディレクトリについて
    96    * このsetupディレクトリはOpenPNEをセットアップするときに使用するものが入っています。中を見て見ると、主にSQLとOpenPNEをセットアップするための手順示したHTMLファイルが入っています。
    97    * sqlのディレクトリの中には、mysql40、mysql41、postgres74というディレクトリがあります。mysqlは4.0と4.1で日本語処理に違いがあるのでsqlを分けています。
    98    * 各ディレクトリにはinstall、option、update、upgradeという4つのディレクトリがあります。新規にインストールをする人はinstallの中のSQLがだけ必要です。optionには、前バージョンのPNEBIZのスケジュールをインポートしたいなどが入っています。updateには、OpenPNE2.9.1から2.9.2、2.9.2から2.9.3っていう形で、開発版のバージョンを上げるためのSQLが入っています。主に開発者が使用するSQLです。upgradeには2.6から2.8、2.8から2.10という形で、大きくバージョンが上がるときに使います。通常SNSのバージョンをあげたい場合はこちらのupgradeを使います。
    99    * 2.10からは、PostgreSQLに対応したので、postgres74というディレクトリがあります。
    100    * SQLには大きく分けて2種類あります。create_tablesというテーブルを作るSQLとinsert_dataという初期設定値のデータを挿入するSQLがあります。
    101 
    102 
    103  * varディレクトリについて
    104     * varディレクトリには一時的なファイル、一時的なデータを置く場所です。
    105     * OpenPNEは「データはデータベースに置く」という方針を採用しています。しかし、毎回データベースに接続して読み込んでいるとスピードが遅くなることがあるので、一度データベースから読み込んだファイルはこのvarディレクトリに置いておきます。そうすることで、毎回データベースにデータを読み込みに行く必要がなくなるのでスピードが上がります。このvarディレクトリにあるのは基本的に一時的なファイルやデータなので削除してしまっても問題ありません。
    106     * 上からvarディレクトリを見て見ると、function_cacheがあります。このfunction_cacheは、functionをキャッシュするために存在します。例えば、OpenPNEにはランキングという機能がありますが、このランキングを集計するのは非常に時間がかかります。しかも、ランキングは一日に一回しか計算しないので、あらかじめ計算しておいて、このfunction_cacheディレクトリに置いています。このように、計算の難しいことや時間のかかることは一回計算した結果をこのfunction_cacheに置いておきます。そして、二回目からはデータベースを読み込まないで、ファイルを読み込んで計算結果を出しています。
    107     * 次に、img_cacheです。このimg_cacheは日記やプロフィールなどの画像をキャッシュするために存在します。このimg_cacheディレクトリを見ると、まずは拡張子別で分かれていて、次に高さ・幅、サイズ別に分かれています。サイズを分けてキャッシュをとることによって性能が劣化するのを避けています。
    108     * 次に、logです。このlogディレクトリにはエラーログやメールの実行ログなどを記録するために存在します。
    109     * 次に、rss_cacheです。rss_cacheディレクトリには外部ブログを取り込んだ結果を置いておきます。
    110     * 次に、templates_cです。templates_cディレクトリにはSmartyのテンプレートを一度解析して、解析の結果を一時ファイルとして置いています。Smartyのテンプレートもキャッシュをここに置いておくことで次に読み込まれるときに、このキャッシュを読み込むので一回目にアクセスしたときより表示されるのが速いです。
    111     * 最後に、tmpです。tmpディレクトリには一時画像や一時ファイルを保存しておく場所として存在します。
    112    
    113    
    114  * webappディレクトリについて
    115     * webappディレクトリにはOpenPNEの根幹になる部分です。
    116     * それでは上から見ていきましょう。一番上にあるのはlibディレクトリなのですが、このlibディレクトリはOpenPNEが作ったOpenPNEで利用するプラグインやライブラリが置かれています。一つ上のディレクトリにもlibがありますが、違いに注意してください。
    117     *
    118     * libの中を見ると、dbディレクトリがありますが、これはOpenPNEの定義された50ぐらいあるデータベースを読み書きするために使うライブラリ群が入っています。ディレクトリ以下にaction.phpというファイルがあるが、これはactionというテーブルを操作するためのdbライブラリです。例えば、c_member_idからその対象メンバーのあしあとの情報がほしいときは、ashiato.phpのdb_ashiato_c_ashiato_list4c_member_idという関数を使ってc_member_idと取得したい件数を渡せば取得してくれます。同じようにmember.phpの中の関数を使えば、c_member_idからそのメンバーのプロフィール情報を簡単に取り出すことが出来ます。操作したいデータベースやテーブルがあるときはテーブルに該当するファイルから関数を探してみると、目的の操作をしてくれる関数を探し出せるかも知れません。
    119     * 次にmailです。このmailディレクトリの中にsns.phpというのがありますが、これはメール投稿や、コミュニティ書き込みの処理をしています。binの中にmail.phpがありましたが実態はこの中にあります。ですので、メール投稿関連で新機能を追加したいとかいった場合には、こちらを修正する必要があります。
    120     * その下のOpenPNEディレクトリにはOpenPNE本体の中で使われているライブラリ郡があります。例えば、携帯メールの処理をしたり、画像の処理をしたり、バリデータといって入力の妥当性検証したりしています。
    121     * 次にmailです。このmailディレクトリの中にsns.phpというのがありますが、これはメール投稿や、コミュニティ書き込みの処理をしています。binの中にmail.phpがありましたが実態はこの中にあります。ですので、メール投稿関連で新機能を追加したいとかいった場合には、こちらを修正する必要があります。
    122     * modulesを見ていきます。
    123 
    124 === コードフロー ===
    125 === コードの読み方 ===
    126 === テーブル表 ===
    127 
    128 === 小窓の作り方 ===
    129 ==== 小窓とは ====
    130 小窓(CMD)とは、外部のWebサービスを取り込んで、マッシュアップさせるための機構のことを言います。具体的な例としては、URL一つで、自分の紹介文にYouTubeの動画を貼ったり、日記にぐるなびのお店情報を掲載して日記を書いたり、メッセージにGoogleマップを貼って地図を教えることなどさまざまなことが出来ます。
    131 小窓を使用出来る場所としては、コミュニティ、日記、プロフィール、メッセージ、サイドバナー、お知らせ、テンプレート挿入と多くの部分に対応しているので使い方は自由自在です。
    132 機能としては、現在OpenPNEに取り込まれている小窓だけでも37を超えました。(2.11.3時点)
    133 また、公開されている小窓をあわせると、その種類は100を超えます。
    134 
    135 
    136 ==== 小窓を開発する前に ====
    137 小窓には「 通常小窓形式」と「URL2CMD形式」という2つの形式があります。
    138 この2つの違いは小窓を貼り付ける時に入力する方法が違います。
    139 通常小窓形式は一定の形式に沿って入力することによって小窓を表示する形式です。一方、URL2CMD形式というのはURLを貼り付けるだけで、そのURLを判別して小窓を表示させる形式です。
    140 現在、OpenPNEに採用されている小窓は大半がURL2CMD形式です。
    141 
    142 小窓には標準サイズがあります。横幅を標準サイズ以上にしてしまうと、レイアウトが崩れる可能性が非常に高いです。ただし、縦幅は小窓の見やすさを維持している限り自由です。
    143 
    144 {{{
    145 日記は横幅425ピクセル
    146 プロフィールは横幅400ピクセル
    147 サイドバーは横幅160ピクセル
    148 }}}
    149 
    150 ==== 小窓作りに便利なツール ====
    151 小窓は現在はすべてJavaScriptで作成されています。[[BR]]
    152 
    153 
    154 https://addons.mozilla.org/ja/firefox/addon/60
    155 
    156 javascriptで生成したHTMLソースが確認できる。
    157 
    158 
    159 ==== 小窓動作フロー ====
    160 小窓の動作フローを紹介します。[[BR]]
    161 [[Image(http://www.openpne.jp/wp-content/uploads/scp/20071008_1.png)]]
    162 
    163 ==== 通常小窓形式での作り方 ====
    164 通常小窓形式とは、下のようなcmdタグを入力することによって、小窓を表示する形式です。
    165 {{{
    166 <cmd src="www.youtube.com" args="id,width,height">
    167 }}}
    168 ここでは、YouTube小窓を例に通常小窓形式での小窓の作り方を紹介します。
    169 
    170 [手順][[BR]]
    171 1.JavaScriptのファイル名を決める
    172 JavaScriptのファイル名は「サービスのURL+.js」とするという規約があります。
    173 例えば、YouTube小窓であれば、ドメイン名がwww.youtube.comなので、ファイル名はwww.youtube.com.jsとする。@nifty 投票であれば、サービスのURLがvote.nifty.comなのでファイル名はvote.nifty.com.jsとなります。
    174 
    175 2.main() 関数を作る
    176 このmain()関数が機能の実体部です。
    177 例えば、function main(id){} とすると、上の小窓タグのargs="id"が代入される。
    178 
    179 3.main()関数内でdocument.write()して、HTMLタグを生成
    180 最後に、表示するHTMLタグを表示します。
    181 今回のYouTubeのように、Flashのオブジェクトタグがある場合は、そのオブジェクトタグをdocument.write()で生成します。
    182 
    183 ソース解説
    184 {{{
    185 //main(args)と関数定義する。この関数名がテンプレート側から自動的に呼ばれる
    186 function main(id, width, height) {
    187 //XSS脆弱性などに注意して入力値チェックを厳しく行う
    188     if (!id.match(/^[a-zA-Z0-9_\-]+$/)) {
    189         return;
    190     }
    191     if (!width) width = 0; else width = parseInt(width);
    192     if (!height) height = 0; else height = parseInt(height);
    193     if (width <= 0 || width > 425) {
    194         width = 425;
    195     }
    196     if (height <= 0 || height > 350) {
    197         height = 350;
    198     }
    199 //表示するHTMLタグを生成する
    200     var html = '<object width="'
    201             + width
    202             + '" height="'
    203             + height
    204             + '"><param name="movie" value="http://www.youtube.com/v/'
    205             + id
    206             + '"></param><embed src="http://www.youtube.com/v/'
    207             + id
    208             + '" type="application/x-shockwave-flash" width="'
    209             + width
    210             + '" height="'
    211             + height
    212             + '"></embed></object>';
    213     document.write(html);
    214 }
    215 
    216 }}}
    217 
    218 
    219 ==== URL2CMD形式での作り方 ====
    220 URL2CMD形式とは、下のようなURLを入力することによって、小窓を表示する形式です。
    221 {{{
    222 http://www.youtube.com/watch?v=id
    223 }}}
    224 ここでは引続き、通常小窓形式のYouTube小窓を例にURL2CMD形式での小窓の作り方を紹介します。
    225 基本的にURL2CMD形式を作るときは通常小窓形式にurl2cmd()という関数を追加するだけです。
    226 
    227 
    228 [手順]
    229 1.先ほどの通常小窓形式にurl2cmd()を追加
    230 url2cmd()という関数を追加して、URLからIDを抜き出し、main関数に渡す
    231 
    232 {{{
    233 //url2cmd(url)と関数定義をする この関数名がテンプレート側から自動的に呼ばれる
    234 function url2cmd(url) {
    235 //URLが正しい形式かどうかをチェックする
    236 //()を使って抜き出したいID部分を囲う
    237     if (!url.match(/^http:\/\/(?:www\.|)youtube\.com\/watch\?v=([a-zA-Z0-9_-]+)/)) {
    238         return;
    239     }
    240 //()の中身を抽出
    241     var id = RegExp.$1;
    242     var width = 425;
    243     var height = 350;
    244 //通常の小窓main()関数を呼び出す
    245     main(id, width, height);
    246 }
    247 
    248 }}}
    249 
    250 === モジュールを作る ===
    251 === 新しいページの作り方 ===
    252 
    253 
    254 == OpenPNE開発者、開発方法 ==
    255 === ツールの紹介と使い方 ===
    256 ==== Trac ====
    257 ==== SVN ====
    258 ==== Eclipse ====
    259 ==== 開発環境(作業環境) ====
    260  * VMware
    261  * XAMPP
    262 ==== その他 ====
    263  * ML
    264  * MindMAP
    265 
    266 メモ[[BR]]
    267 開発者の日常を記述しながら、ツールを紹介する