wiki:pne-book-9-note
 ここの情報は古いです。ご理解頂いた上でお取り扱いください。

Version 6 (modified by imoto, 12 years ago) (diff)

--

開発ツールの使い方

http://sc.pne.jp/200801261138.png

コードフロー

OpenPNE構造

※カスタマイズの方法は説明しない

小窓の作り方

技術解説

ディレクトリツアー

OpenPNEのディレクトリ構造と役割 OpenPNEの現在2.0系では独自のフレームワークを採用しています。 よってディレクトリ構造も独自の構成をしているので、主要な5つのディレクトリについて見ていきたいと思います。

  • binディレクトリについて
    • binにはWEBブラウザ以外から呼ばれるプログラムが入っています。
    • 通常PHPというのは、WEBブラウザからアクセスされて、PHPで処理してWEBブラウザに返事をする形ですが、このbinにはLINUXのシステムであるCRONや、メールサーバなど、WEBブラウザ以外から呼ばれるファイルがあります。
    • binの中には2種類のファイルタイプがあります。一つ目はPHP、もう一つはcronです。このcronというファイルは同じファイル名のPHPと対になって存在している。
    • もう一つは、携帯の写メール投稿や、プロフィール画像の変更などの処理をするPHPファイルです。どのファイルもconfig.inc.phpをrequire_onceで呼んでいます。
      require_once './config.inc.php';
      
    • このconfig.inc.phpの中身見て見ると、config.phpを呼ぶ処理が書いています。config.phpには、SNSのサーバー管理設定、パス設定などがあります。
      <?php
      /**
       * @copyright 2005-2007 OpenPNE Project
       * @license   http://www.php.net/license/3_01.txt PHP License 3.01
       */
      
      define('OPENPNE_DIR', realpath('../'));
      require_once OPENPNE_DIR . '/config.php';
      
      ?>
      
    • mail.phpというPHPファイルを見ていきます。まず、config.inc.phpやinit.incなど必要なものを読み込む。その後にライブラリを読み込みます。
    • 次に、受信したメールを読み込みます。
      // 標準入力からメールデータの読み込み
      $stdin = fopen('php://stdin', 'rb');
      $raw_mail = '';
      do {
          $data = fread($stdin, 8192);
          if (strlen($data) == 0) {
              break;
          }
          $raw_mail .= $data;
      } while(true);
      fclose($stdin);
      
    • そして、m_process_mailの関数内で、誰から送信されたメールなのか?どこに宛てて送信したメールなのか?などを判断してそれぞれの処理を振り分けます。
    • 最後に、m_process_mail($raw_mail);ですべての処理をしています。
      // メールの処理
      m_process_mail($raw_mail);
      
    • このmail関数にはデバッグ用ログ保存もあり、同時にデバッグの処理をしています。
      // デバッグ用ログ保存
      m_debug_log(ob_get_contents(), PEAR_LOG_DEBUG);
      
      while (@ob_end_clean());
      

  • libディレクトリについて
    • libには主に、OpenPNEが利用する外部のライブラリがここにまとめています。
    • OpenPNEの外部ライブラリではほとんどがPEARですが、中にはSmartyなど他のライブラリもこのlibにまとめられています。
    • OpenPNEでは、この様にライブラリを同梱しているのでPEARを自由に扱うことが出来ないレンタルサーバでも対応できます。また、OpenPNEに同梱されているライブラリを使うことで、バージョンによる違いなどを考えなくても、処理が実行されるようになっています。
    • libにはPEARなどが入っているincludeディレクトリとsmarty_pluginsディレクトリがあります。
    • このsmarty_pluginsディレクトリにはOpenPNEにとってSmartyを便利に扱うプラグインが入っています。SmartyというのはPHPで書かれたテンプレートエンジンと呼ばれるもので、アプリケーションのロジックとコンテンツを分離して容易に管理するためのライブラリです。このSmartyを便利に使うためのプラグインがsmarty_pluginsディレクトリに入っています。

  • pubic_htmlディレクトリについて
    • このpubic_htmlには、直接ブラウザから呼ばれるCSSや、JavaScriptなどが入っています。
    • このディレクトリは、OpenPNEを呼び出すApache側、webサーバ側がここのpublic_htmlを基点にして、呼び出すという形になっています。ですので、ここから下のディレクトリは、インターネット上に公開され、ブラウザから直接アクセスされるということを忘れてはいけません。例えば、会員のみに公開したい資料をここに置いたとしても、URL直接たたかれたら会員でない人も見えてしまうので、注意が必要です。
    • まず、このディレクトリの中を上から見て見ると、cmdディレクトリがあります。cmdディレクトリにはYouTube、kakaku.comとか、tabelogといった、小窓のリストが入っています。このディレクトリには、企業さんが提供してくださったもの、OpenPNEプロジェクトで開発したものなどさまざまな小窓リストが入っています。
    • このcmdの中に入っているのはすべてJavaScriptで書かれています。小窓の特長として、ファイル名を使いたいドメインに「.js」をつけるという規約があります。小窓の詳しい解説は小窓の作り方で説明します。
    • 次にcssです。このcssディレクトリにはOpenPNEで使うスタイルシートが入っています。
    • 次はflashです。このflashディレクトリは現在1つしかありません。現在あるフレンドリストをFlashで表示するという機能のソースがここにあります。現在このflashのソースも公開してますので、これを編集しなおしてオリジナルのフレンドリストを作ることが出来ます。(ソースのURLを紹介)
    • 次はimgです。このimgディレクトリはデフォルトの設定では使いません。この機能を使うときは、config.phpで設定します。OpenPNEのパフォーマンスを上げるために、画像の一時ファイルをvarディレクトリに入れるのではなくpublic_htmlに公開することで、ブラウザが直接アクセスできるようになるので、スピードが上がります。
    • 次はjsです。このjsディレクトリはprototype.jpなど、必要なJavaScriptが入っています。
    • 次はmodulesです。このmodulesディレクトリはモジュールごとに画像やファイルを置くときに使います。
    • 最後のディレクトリはskinです。このskinディレクトリはOpenPNEのスキンが入っています。defaultというのがOpenPNEのデフォルトのスキンが入っているディレクトリです。
    • 次に、pubic_html以下にあるファイルを上から見ていきます。まず、cap.phpです。Captchaの略です。このcap.phpはCaptchaを生成するためにあります。cap.phpは友人を招待するときに、波打った文字を入力しますが、あの画像を生成するためににあります。
    • 次に、config.inc.phpです。config.inc.phpは、config.phpを読みにいくためのファイルです。
    • 次に、download.phpです。download.phpはファイルアップロードのためのファイルです。OpnePNE2.8からファイルアップロード機能が追加されています。
    • 次がimg.phpです。プロフィール画像や日記の写真だけは、index.phpではなくて特別なimg.phpというのを読んでいます。その下にあるimg_skin.phpはスキン画像が読んでいます。
    • 最後にindex.phpです。現在、OpenPNEはフロントコントローラモデルというのを採用しており、このindex.phpに集約しています。(ソースを表示)
    • index.phpのソースを見て見ると、openpne_execute()という関数があるのが分かります。このopenpne_execute()という関数が、すべての処理を振り分ける役割をしています。openpne_executeは、webapp/libのcontroller.phpの中にあります。このpublic_htmlの中のindex.phpが呼ばれて、ここからすべてのアクションに誘導されます。
  • setupディレクトリについて
    • このsetupディレクトリはOpenPNEをセットアップするときに使用するものが入っています。中を見て見ると、主にSQLとOpenPNEをセットアップするための手順示したHTMLファイルが入っています。
    • sqlのディレクトリの中には、mysql40、mysql41、postgres74というディレクトリがあります。mysqlは4.0と4.1で日本語処理に違いがあるのでsqlを分けています。
    • 各ディレクトリには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を使います。
    • 2.10からは、PostgreSQLに対応したので、postgres74というディレクトリがあります。
    • SQLには大きく分けて2種類あります。create_tablesというテーブルを作るSQLとinsert_dataという初期設定値のデータを挿入するSQLがあります。
  • varディレクトリについて
    • varディレクトリには一時的なファイル、一時的なデータを置く場所です。
    • OpenPNEは「データはデータベースに置く」という方針を採用しています。しかし、毎回データベースに接続して読み込んでいるとスピードが遅くなることがあるので、一度データベースから読み込んだファイルはこのvarディレクトリに置いておきます。そうすることで、毎回データベースにデータを読み込みに行く必要がなくなるのでスピードが上がります。このvarディレクトリにあるのは基本的に一時的なファイルやデータなので削除してしまっても問題ありません。
    • 上からvarディレクトリを見て見ると、function_cacheがあります。このfunction_cacheは、functionをキャッシュするために存在します。例えば、OpenPNEにはランキングという機能がありますが、このランキングを集計するのは非常に時間がかかります。しかも、ランキングは一日に一回しか計算しないので、あらかじめ計算しておいて、このfunction_cacheディレクトリに置いています。このように、計算の難しいことや時間のかかることは一回計算した結果をこのfunction_cacheに置いておきます。そして、二回目からはデータベースを読み込まないで、ファイルを読み込んで計算結果を出しています。
    • 次に、img_cacheです。このimg_cacheは日記やプロフィールなどの画像をキャッシュするために存在します。このimg_cacheディレクトリを見ると、まずは拡張子別で分かれていて、次に高さ・幅、サイズ別に分かれています。サイズを分けてキャッシュをとることによって性能が劣化するのを避けています。
    • 次に、logです。このlogディレクトリにはエラーログやメールの実行ログなどを記録するために存在します。
    • 次に、rss_cacheです。rss_cacheディレクトリには外部ブログを取り込んだ結果を置いておきます。
    • 次に、templates_cです。templates_cディレクトリにはSmartyのテンプレートを一度解析して、解析の結果を一時ファイルとして置いています。Smartyのテンプレートもキャッシュをここに置いておくことで次に読み込まれるときに、このキャッシュを読み込むので一回目にアクセスしたときより表示されるのが速いです。
    • 最後に、tmpです。tmpディレクトリには一時画像や一時ファイルを保存しておく場所として存在します。

  • webappディレクトリについて
    • webappディレクトリには根幹になる部分があります。

間違いやすいのが、webappの下にもlibがあるってことです。

webappの下にあるlibとは違いますので、ちょっと気をつけていただきたい。 webappの下にあるlibは、OpenPNEが作ったOpenPNEで利用するプラグインやライブラリになっています。 sqlのディレクトリ

コードフロー

コードの読み方

テーブル表

小窓の作り方

小窓とは

小窓(CMD)とは、外部のWebサービスを取り込んで、マッシュアップさせるための機構のことを言います。具体的な例としては、URL一つで、自分の紹介文にYouTubeの動画を貼ったり、日記にぐるなびのお店情報を掲載して日記を書いたり、メッセージにGoogleマップを貼って地図を教えることなどさまざまなことが出来ます。 小窓を使用出来る場所としては、コミュニティ、日記、プロフィール、メッセージ、サイドバナー、お知らせ、テンプレート挿入と多くの部分に対応しているので使い方は自由自在です。 機能としては、現在OpenPNEに取り込まれている小窓だけでも37を超えました。(2.11.3時点) また、公開されている小窓をあわせると、その種類は100を超えます。

小窓を開発する前に

小窓には「 通常小窓形式」と「URL2CMD形式」という2つの形式があります。 この2つの違いは小窓を貼り付ける時に入力する方法が違います。 通常小窓形式は一定の形式に沿って入力することによって小窓を表示する形式です。一方、URL2CMD形式というのはURLを貼り付けるだけで、そのURLを判別して小窓を表示させる形式です。 現在、OpenPNEに採用されている小窓は大半がURL2CMD形式です。

小窓には標準サイズがあります。横幅を標準サイズ以上にしてしまうと、レイアウトが崩れる可能性が非常に高いです。ただし、縦幅は小窓の見やすさを維持している限り自由です。

日記は横幅425ピクセル
プロフィールは横幅400ピクセル
サイドバーは横幅160ピクセル 

小窓作りに便利なツール

小窓は現在はすべてJavaScriptで作成されています。

https://addons.mozilla.org/ja/firefox/addon/60

javascriptで生成したHTMLソースが確認できる。

小窓動作フロー

小窓の動作フローを紹介します。
http://www.openpne.jp/wp-content/uploads/scp/20071008_1.png

通常小窓形式での作り方

通常小窓形式とは、下のようなcmdタグを入力することによって、小窓を表示する形式です。

<cmd src="www.youtube.com" args="id,width,height">

ここでは、YouTube小窓を例に通常小窓形式での小窓の作り方を紹介します。

[手順]
1.JavaScriptのファイル名を決める JavaScriptのファイル名は「サービスのURL+.js」とするという規約があります。 例えば、YouTube小窓であれば、ドメイン名がwww.youtube.comなので、ファイル名はwww.youtube.com.jsとする。@nifty 投票であれば、サービスのURLがvote.nifty.comなのでファイル名はvote.nifty.com.jsとなります。

2.main() 関数を作る このmain()関数が機能の実体部です。 例えば、function main(id){} とすると、上の小窓タグのargs="id"が代入される。

3.main()関数内でdocument.write()して、HTMLタグを生成 最後に、表示するHTMLタグを表示します。 今回のYouTubeのように、Flashのオブジェクトタグがある場合は、そのオブジェクトタグをdocument.write()で生成します。

ソース解説

//main(args)と関数定義する。この関数名がテンプレート側から自動的に呼ばれる
function main(id, width, height) {
//XSS脆弱性などに注意して入力値チェックを厳しく行う
    if (!id.match(/^[a-zA-Z0-9_\-]+$/)) {
        return;
    }
    if (!width) width = 0; else width = parseInt(width);
    if (!height) height = 0; else height = parseInt(height);
    if (width <= 0 || width > 425) {
        width = 425;
    }
    if (height <= 0 || height > 350) {
        height = 350;
    }
//表示するHTMLタグを生成する
    var html = '<object width="'
            + width
            + '" height="'
            + height
            + '"><param name="movie" value="http://www.youtube.com/v/'
            + id
            + '"></param><embed src="http://www.youtube.com/v/'
            + id
            + '" type="application/x-shockwave-flash" width="'
            + width
            + '" height="'
            + height
            + '"></embed></object>';
    document.write(html);
}

URL2CMD形式での作り方

URL2CMD形式とは、下のようなURLを入力することによって、小窓を表示する形式です。

http://www.youtube.com/watch?v=id

ここでは引続き、通常小窓形式のYouTube小窓を例にURL2CMD形式での小窓の作り方を紹介します。 基本的にURL2CMD形式を作るときは通常小窓形式にurl2cmd()という関数を追加するだけです。

[手順] 1.先ほどの通常小窓形式にurl2cmd()を追加 url2cmd()という関数を追加して、URLからIDを抜き出し、main関数に渡す

//url2cmd(url)と関数定義をする この関数名がテンプレート側から自動的に呼ばれる
function url2cmd(url) {
//URLが正しい形式かどうかをチェックする
//()を使って抜き出したいID部分を囲う
    if (!url.match(/^http:\/\/(?:www\.|)youtube\.com\/watch\?v=([a-zA-Z0-9_-]+)/)) {
        return;
    }
//()の中身を抽出
    var id = RegExp.$1;
    var width = 425;
    var height = 350;
//通常の小窓main()関数を呼び出す
    main(id, width, height);
}

モジュールを作る

新しいページの作り方

OpenPNE開発者、開発方法

ツールの紹介と使い方

Trac

SVN

Eclipse

開発環境(作業環境)

  • VMware
  • XAMPP

その他

  • ML
  • MindMAP

メモ
開発者の日常を記述しながら、ツールを紹介する