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

Changes between Version 5 and Version 6 of pne-book-9-note


Ignore:
Timestamp:
Jan 28, 2008, 8:07:19 PM (12 years ago)
Author:
imoto
Comment:

--

Legend:

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

    v5 v6  
    103103    * varディレクトリには一時的なファイル、一時的なデータを置く場所です。
    104104    * OpenPNEは「データはデータベースに置く」という方針を採用しています。しかし、毎回データベースに接続して読み込んでいるとスピードが遅くなることがあるので、一度データベースから読み込んだファイルはこのvarディレクトリに置いておきます。そうすることで、毎回データベースにデータを読み込みに行く必要がなくなるのでスピードが上がります。このvarディレクトリにあるのは基本的に一時的なファイルやデータなので削除してしまっても問題ありません。
    105     * 上からvarディレクトリを見て見ると、function_cacheがあります。このfunction_cacheは、functionをキャッシュするために存在します。例えば、OpenPNEにはランキングという機能がありますが、このランキングを集計するのは非常に時間がかかります。しかも、ランキングは一日に一回しか計算しないので、あらかじめ計算しておいて、このfunction_cacheディレクトリに置いています。このように、計算の難しいことや時間のかかることは一回計算した結果をこのfunction_cacheに置いておきます。そして、二回目からはデータベースを読み込まないで、ファイルを読み込んで計算結果を出しています
     105    * 上からvarディレクトリを見て見ると、function_cacheがあります。このfunction_cacheは、functionをキャッシュするために存在します。例えば、OpenPNEにはランキングという機能がありますが、このランキングを集計するのは非常に時間がかかります。しかも、ランキングは一日に一回しか計算しないので、あらかじめ計算しておいて、このfunction_cacheディレクトリに置いています。このように、計算の難しいことや時間のかかることは一回計算した結果をこのfunction_cacheに置いておきます。そして、二回目からはデータベースを読み込まないで、ファイルを読み込んで計算結果を出しています
    106106    * 次に、img_cacheです。このimg_cacheは日記やプロフィールなどの画像をキャッシュするために存在します。このimg_cacheディレクトリを見ると、まずは拡張子別で分かれていて、次に高さ・幅、サイズ別に分かれています。サイズを分けてキャッシュをとることによって性能が劣化するのを避けています。
    107107    * 次に、logです。このlogディレクトリにはエラーログやメールの実行ログなどを記録するために存在します。
     
    123123=== コードの読み方 ===
    124124=== テーブル表 ===
     125
    125126=== 小窓の作り方 ===
     127==== 小窓とは ====
     128小窓(CMD)とは、外部のWebサービスを取り込んで、マッシュアップさせるための機構のことを言います。具体的な例としては、URL一つで、自分の紹介文にYouTubeの動画を貼ったり、日記にぐるなびのお店情報を掲載して日記を書いたり、メッセージにGoogleマップを貼って地図を教えることなどさまざまなことが出来ます。
     129小窓を使用出来る場所としては、コミュニティ、日記、プロフィール、メッセージ、サイドバナー、お知らせ、テンプレート挿入と多くの部分に対応しているので使い方は自由自在です。
     130機能としては、現在OpenPNEに取り込まれている小窓だけでも37を超えました。(2.11.3時点)
     131また、公開されている小窓をあわせると、その種類は100を超えます。
     132
     133
     134==== 小窓を開発する前に ====
     135小窓には「 通常小窓形式」と「URL2CMD形式」という2つの形式があります。
     136この2つの違いは小窓を貼り付ける時に入力する方法が違います。
     137通常小窓形式は一定の形式に沿って入力することによって小窓を表示する形式です。一方、URL2CMD形式というのはURLを貼り付けるだけで、そのURLを判別して小窓を表示させる形式です。
     138現在、OpenPNEに採用されている小窓は大半がURL2CMD形式です。
     139
     140小窓には標準サイズがあります。横幅を標準サイズ以上にしてしまうと、レイアウトが崩れる可能性が非常に高いです。ただし、縦幅は小窓の見やすさを維持している限り自由です。
     141
     142{{{
     143日記は横幅425ピクセル
     144プロフィールは横幅400ピクセル
     145サイドバーは横幅160ピクセル
     146}}}
     147
     148==== 小窓作りに便利なツール ====
     149小窓は現在はすべてJavaScriptで作成されています。[[BR]]
     150
     151
     152https://addons.mozilla.org/ja/firefox/addon/60
     153
     154javascriptで生成したHTMLソースが確認できる。
     155
     156
     157==== 小窓動作フロー ====
     158小窓の動作フローを紹介します。[[BR]]
     159[[Image(http://www.openpne.jp/wp-content/uploads/scp/20071008_1.png)]]
     160
     161==== 通常小窓形式での作り方 ====
     162通常小窓形式とは、下のようなcmdタグを入力することによって、小窓を表示する形式です。
     163{{{
     164<cmd src="www.youtube.com" args="id,width,height">
     165}}}
     166ここでは、YouTube小窓を例に通常小窓形式での小窓の作り方を紹介します。
     167
     168[手順][[BR]]
     1691.JavaScriptのファイル名を決める
     170JavaScriptのファイル名は「サービスのURL+.js」とするという規約があります。
     171例えば、YouTube小窓であれば、ドメイン名がwww.youtube.comなので、ファイル名はwww.youtube.com.jsとする。@nifty 投票であれば、サービスのURLがvote.nifty.comなのでファイル名はvote.nifty.com.jsとなります。
     172
     1732.main() 関数を作る
     174このmain()関数が機能の実体部です。
     175例えば、function main(id){} とすると、上の小窓タグのargs="id"が代入される。
     176
     1773.main()関数内でdocument.write()して、HTMLタグを生成
     178最後に、表示するHTMLタグを表示します。
     179今回のYouTubeのように、Flashのオブジェクトタグがある場合は、そのオブジェクトタグをdocument.write()で生成します。
     180
     181ソース解説
     182{{{
     183//main(args)と関数定義する。この関数名がテンプレート側から自動的に呼ばれる
     184function main(id, width, height) {
     185//XSS脆弱性などに注意して入力値チェックを厳しく行う
     186    if (!id.match(/^[a-zA-Z0-9_\-]+$/)) {
     187        return;
     188    }
     189    if (!width) width = 0; else width = parseInt(width);
     190    if (!height) height = 0; else height = parseInt(height);
     191    if (width <= 0 || width > 425) {
     192        width = 425;
     193    }
     194    if (height <= 0 || height > 350) {
     195        height = 350;
     196    }
     197//表示するHTMLタグを生成する
     198    var html = '<object width="'
     199            + width
     200            + '" height="'
     201            + height
     202            + '"><param name="movie" value="http://www.youtube.com/v/'
     203            + id
     204            + '"></param><embed src="http://www.youtube.com/v/'
     205            + id
     206            + '" type="application/x-shockwave-flash" width="'
     207            + width
     208            + '" height="'
     209            + height
     210            + '"></embed></object>';
     211    document.write(html);
     212}
     213
     214}}}
     215
     216
     217==== URL2CMD形式での作り方 ====
     218URL2CMD形式とは、下のようなURLを入力することによって、小窓を表示する形式です。
     219{{{
     220http://www.youtube.com/watch?v=id
     221}}}
     222ここでは引続き、通常小窓形式のYouTube小窓を例にURL2CMD形式での小窓の作り方を紹介します。
     223基本的にURL2CMD形式を作るときは通常小窓形式にurl2cmd()という関数を追加するだけです。
     224
     225
     226[手順]
     2271.先ほどの通常小窓形式にurl2cmd()を追加
     228url2cmd()という関数を追加して、URLからIDを抜き出し、main関数に渡す
     229
     230{{{
     231//url2cmd(url)と関数定義をする この関数名がテンプレート側から自動的に呼ばれる
     232function url2cmd(url) {
     233//URLが正しい形式かどうかをチェックする
     234//()を使って抜き出したいID部分を囲う
     235    if (!url.match(/^http:\/\/(?:www\.|)youtube\.com\/watch\?v=([a-zA-Z0-9_-]+)/)) {
     236        return;
     237    }
     238//()の中身を抽出
     239    var id = RegExp.$1;
     240    var width = 425;
     241    var height = 350;
     242//通常の小窓main()関数を呼び出す
     243    main(id, width, height);
     244}
     245
     246}}}
     247
    126248=== モジュールを作る ===
    127249=== 新しいページの作り方 ===