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

Changes between Version 2 and Version 3 of pne-book-9-3


Ignore:
Timestamp:
Feb 26, 2008, 5:16:57 PM (12 years ago)
Author:
imoto
Comment:

--

Legend:

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

    v2 v3  
    44== 小窓とは ==
    55 === 概要 ===
    6 一言で言うとOpenPNEを拡張するための仕組みです。
    7 
    8 OpenPNEには「日記を書く」「写真を貼る」などの機能がありますが、他の機能を取り込んだり、コンテンツを追加するということが従来は出来ませんでした。そこで、YouTubeをSNSの日記に貼ったり、Googleマップの地図をコミュニティのイベントに貼ってオフ会のイベント会場を知らせたりするなど、外部のサービスをSNSに取り込んでOpenPNEを拡張するように出来る様にした仕組みがこの小窓です。
    9 
    10 (小窓のスクリーンショット)
     6 小窓とは一言で言うとOpenPNEを拡張するための仕組みです。
     7
     8 OpenPNEには「日記を書く」「写真を貼る」などの機能がありますが、他の機能を取り込んだり、コンテンツを追加するということが従来は出来ませんでした。そこで、YouTubeをSNSの日記に貼ったり、Googleマップの地図をコミュニティのイベントに貼ってオフ会のイベント会場を知らせたりするなど、外部のサービスをSNSに取り込んでOpenPNEを拡張するように出来る様にした仕組みがこの小窓です。[[BR]]
     9
     10 [Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/1.png,650)]]
     11
    1112
    1213 === 小窓の歴史 ===
    13  元々この小窓を作ったときにはこの外部サービスを取り込む仕組みを「コマンド」と読んでいました。これは、日記にコマンドを打ち込むことで外部のサービスを取り込むという考えで始めたものだったのでコマンドと読んでいました。
     14 当初この小窓を作ったときにはこの外部サービスを取り込む仕組みを「コマンド」と読んでいました。これは、日記にコマンドを打ち込むことで外部のサービスを取り込むという考えで始めたものだったのでコマンドと読んでいました。[[BR]]
    1415 実際にコマンドを動作させるときも、コマンドタグと呼ばれるタグを使用してYouTubeを呼び出していました。
    1516 
     
    2223 このコマンドタグと呼ばれるタグを入力して外部サービスを取り込んでいましたが、タグを使うのは技術者向けでとっつきにくいという側面もありました。
    2324 
    24  そこでいろいろ考えていたところ、YouTubeをSNSの日記に貼ったらその様子がSNSに窓が出来て外の景色を見ているような感じがしたというのがコマンドから小窓になったきっかけです。
     25 そこでいろいろ考えていたところ、YouTubeをSNSの日記に貼ったらその様子がSNSに窓が出来て外の景色を見ているような感じがしたというのがコマンドから小窓になったきっかけです。[[BR]]
    2526 そこで、これは窓に近いなということで「窓。。。コマンド。。。コマド。。小窓」という形で連想し、現在の小窓という名前になりました。
    2627 
    2728 
    2829 === 使用言語 ===
    29  現在この小窓はすべてJavaScriptで書かれています。
    30  小窓はOpenPNE本体の様にPHPで書かれておらず、 JavaScriptで書かれているので、ブラウザさえあれば動作するという特徴を持っています。
    31  この様な特徴を持っているので、ブラウザやエディタなど身近にあるもので気軽に開発ができるという面があります!
    32  
    33  
     30 現在この小窓はすべてJavaScriptで書かれています。[[BR]]
     31 小窓はOpenPNE本体の様にPHPで書かれておらず、 JavaScriptで書かれているので、ブラウザさえあれば動作するという特徴を持っています。[[BR]]
     32 この様な特徴を持っているので、ブラウザやエディタなど[[BR]]身近にあるもので気軽に開発ができるという面があります!
    3433
    3534
     
    3938
    4039 === 通常小窓形式 ===
    41  まず、YouTubeの貼りたい動画のページにいきます。
     40 まず、YouTubeの貼りたい動画のページにいきます。[[BR]]
    4241 次に、そこからその動画のIDをURLからコピーします。
    4342 
    44  (通常小窓形式 スクリーンショット)
    45  
    46  次に、SNSの「日記を書く」に行き、小窓タグを入力します。
     43 [Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/2.png,650)]]
     44 
     45 次に、SNSの「日記を書く」に行き、小窓タグを入力します。[[BR]]
    4746 YouTube小窓タグは以下のような形式で入力します。
    4847 
     
    5150 }}}
    5251 
    53  (通常小窓形式2 スクリーンショット)
    54 
    55  すると、この様な形で日記にYouTubeの日記を貼ることが出来ます。
    56  (通常小窓形式3 スクリーンショット)
    57 
    58 
    59  これが通常小窓形式と呼ばれる形式で、小窓タグと呼ばれるタグを入力してYouTubeの動画をSNSの日記に貼ることが出来ます。
    60  また、この通常小窓形式の強みとしては、この後に説明するURL2CMD形式では実現不可能な小窓を表示できるという点です。
    61  例えば、複数の引数を持たせて小窓のサイズを小さくしたり、大きくしたりといったURL以外から引数を与えることで違う形で見せ方をしたいというときに使用されます。
     52 [Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/3.png,650)]]
     53 すると、この様な形で日記にYouTubeの日記を貼ることが出来ます。[[BR]]
     54 [Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/4.png,650)]]
     55
     56 これが通常小窓形式と呼ばれる形式で、小窓タグと呼ばれるタグを入力してYouTubeの動画をSNSの日記に貼ることが出来ます。[[BR]]
     57 また、この通常小窓形式の強みとしては、この後に説明するURL2CMD形式では実現不可能な小窓を表示できるという点です。[[BR]]
     58 例えば、複数の引数を持たせて小窓のサイズを小さくしたり、大きくしたりといったURL以外から引数を与えることで違う形で見せ方をしたいというときに使用されます。[[BR]]
    6259
    6360
    6461 === URL2CMD形式 ===
    65  次に、URL2CMD形式でSNSにYouTubeの動画を貼って見ましょう。
    66  通常小窓形式と同じくYouTubeの貼りたい動画のページにいきます。
    67  そして、その動画が表示されているURLをコピーします。
    68  
    69   (URL2CMD スクリーンショット)
     62 次に、URL2CMD形式でSNSにYouTubeの動画を貼って見ましょう。[[BR]]
     63 通常小窓形式と同じくYouTubeの貼りたい動画のページにいきます。[[BR]]
     64 そして、その動画が表示されているURLをコピーします。[[BR]]
     65 
     66[Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/5.png,650)]]
    7067 
    71  先ほどコピーしたURLをYouTubeの動画を入力したい箇所に入力します。
    72  今回は先ほど通常小窓形式で入力した日記の下にコメントとしてい入力してみましょう。
    73  
    74  (URL2CMD2 スクリーンショット)
    75  
    76  すると、この様にURLを貼り付けるだけで簡単にYouTubeの日記を貼ることが出来ます。
    77  (URL2CMD3 スクリーンショット)
    78 
    79 
    80  これがURL2CMD形式です。このURL2CMDの特徴としてはやはりURLを貼るだけで外部のサービスを取り込むことが出来るという点です。
     68 先ほどコピーしたURLをYouTubeの動画を入力したい箇所に入力します。[[BR]]
     69 今回は先ほど通常小窓形式で入力した日記の下にコメントとしてい入力してみましょう。[[BR]]
     70 
     71[Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/6.png,650)]]
     72
     73 すると、この様にURLを貼り付けるだけで簡単にYouTubeの日記を貼ることが出来ます。[[BR]]
     74
     75[Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/7.png,650)]]
     76
     77 これがURL2CMD形式です。このURL2CMDの特徴としてはやはりURLを貼るだけで外部のサービスを取り込むことが出来るという点です。[[BR]]
    8178 URL2CMD形式の様にURLを入力するだけで外部サービスが取り込めると非常に使いやすいという点で、OpenPNEとしては、通常小窓のように小窓タグを入力するのではなく、こちらのURL2CMD形式のようにURLを入力するだけで表示が出来る形式を推奨していきたいと考えています。
    8279 
    8380
    8481== 小窓の動作フロー ==
    85 (動作フロー 画像)
    86 それでは次に小窓の動作フローを解説します。この画像が小窓の動作フローを表した図です。
     82
     83[Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/8.png,650)]]
     84
     85それでは次に小窓の動作フローを解説します。この画像が小窓の動作フローを表した図です。[[BR]]
    8786小窓では、OpenPNEのPHPと小窓のJavaScriptが連動して動作しています。よって、OpenPNE側の動作と小窓での動作という二つの動作があります。
    8887
    89 まず、OpenPNEの日記などでURLを含むリンクが存在した場合、OpenPNE側でそのドメインに対応した小窓があるか探します。
    90 もしここで対応した小窓でないと判断した場合はそのURLをリンクとして出力します。
     88まず、OpenPNEの日記などでURLを含むリンクが存在した場合、OpenPNE側でそのドメインに対応した小窓があるか探します。[[BR]]
     89もしここで対応した小窓でないと判断した場合はそのURLをリンクとして出力します。[[BR]]
    9190もし、URLが対応している小窓と一致すれば、OpenPNE側で小窓を呼び出すJavaScriptに置き換えます。
    9291
    93 後は、OpenPNEから小窓が処理を引き継ぎ、URL2CMD関数を呼び出してURLを解析してmain関数を呼びます。
    94 このmain関数の中で、実際に表示させる形式に整えて最後は出力しています。
     92後は、OpenPNEから小窓が処理を引き継ぎ、URL2CMD関数を呼び出してURLを解析してmain関数を呼びます。[[BR]]
     93このmain関数の中で、実際に表示させる形式に整えて最後は出力しています。[[BR]]
    9594
    9695
     
    9998
    10099 === 準備 ===
    101  準備するものはFirefox、Firebug、WEBサイト、エディタが必要です。
    102  ブラウザでも開発は出来るのですが、このFirefoxには優れたアドオンがあるので今回はこのFirefoxを使用します。
    103  FirebugはFirefoxのアドオンです。このFirebugを使用して、JavaScriptのデバッグを行います。次に、テストをするためにFTPサイトを用意してください。これはファイルをアップロードして確認するために使います。今回はターミナルを使って解説をしますが、FTPソフトを使っても構いません。
    104  後はエディタを用意してください。
     100 準備するものはFirefox、Firebug、WEBサイト、エディタが必要です。[[BR]]
     101 ブラウザでも開発は出来るのですが、このFirefoxには優れたアドオンがあるので今回はこのFirefoxを使用します。[[BR]]
     102 FirebugはFirefoxのアドオンです。このFirebugを使用して、JavaScriptのデバッグを行います。このFirebugはインストールした状態にしておいてください。[[BR]]
     103 次に、テストをするためにFTPサイトを用意してください。これはファイルをアップロードして確認するために使います。今回はターミナルを使って解説をしますが、FTPソフトを使っても構いません。[[BR]]
     104 後はエディタを用意してください。[[BR]]
    105105 
    106106 {{{
     
    108108 http://www.mozilla-japan.org/products/firefox/
    109109 
    110  (スクリーンショット)
     110 (スクリーンショット?)
    111111 
    112112 Firebug :: Firefox Add-ons
    113113 https://addons.mozilla.org/ja/firefox/addon/1843
    114114 
    115   (スクリーンショット)
    116 
    117  
    118  }}}
    119  
    120  
    121  
    122  === 順序 ===
     115  (スクリーンショット?)
     116
     117 
     118 }}}
     119 
     120 
    123121 === 小窓の規約 ===
     122 小窓には2つの規約があります。[[BR]]
     123 一つ目は、サイズの規約で二つ目はファイル名の規約です。
     124 
     125 [Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/9.png,650)]]
     126
     127 
     128 まず、サイズの規約です。小窓は日記に貼られることが多いので、横幅のサイズは425pxと決めています。しかし、小窓にはそれ以下のモノもあるので、厳密には425px以下を推奨しています。この425pxは日記に小窓が貼られた時にOpenPNEのレイアウトが崩れない最大のサイズです。[[BR]]
     129 しかし、縦は制限はありません。見やすさを維持している限り自由に縦幅のサイズを決めることが出来ます。
     130 
     131 
     132 [Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/10.png,650)]]
     133
     134 
     135 次に、ファイル名の規約です。
     136 ファイル名は反応させたいドメインに.jsをつけたものとします。
     137 例えば、YouTubeの場合は、youtube.com.jsとなります。しかし、YouTubeの場合は小窓に反応させたいドメインが3つ(youtube.com、www.youtube.com、jp.youtube.com)あるのでそれぞれのドメインに対して1ファイル作る必要があります。(youtube.com.js、www.youtube.com.js、jp.youtube.com.js)
     138
     139{{{
     140小窓の規則
     141
     1421.横幅のサイズを425px以下にする
     1432.ファイル名は「ドメイン + .js」とする
     144
     145}}}
     146
    124147
    125148== 開発 ==
     149それでは実際にYouTube小窓を作ると仮定して小窓開発を見ていきましょう。[[BR]]
     150まだ開発ツールが準備できていない人は、開発の前に戻って小窓開発に必要なツールを用意してください。[[BR]]
     151今回はWEBサイトにSSHでアクセスして、直接ファイルを書き換えていますが、FTPソフトを使ってアップロードして開発することも可能です。適時自分の環境に読み替えてください。[[BR]]
     152
     153それではURL2CMD形式小窓の開発を見ていきましょう。[[BR]]
     154
     155 === 準備 ===
     156 まずは、何を作るかを決めます。[[BR]]
     157 例えば、YouTube、ぐるなび、Amazonなど外部サービスを決める必要があります。基本的にはAPIが公開されている外部サービスから小窓を作る作り方が現在の小窓の主流です。[[BR]]
     158 また、Blogなどにそのコンテンツを埋め込むためのEmbedタグがある場合はそれを使用することも出来ます。[[BR]]
     159 
     160 [Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/11.png,650)]]
     161
     162 
     163 次に、このAPIやEmbedタグを通常の状態で貼ることが出来るかWEBサイトで確認します。[[BR]]
     164 YouTubeだと動画の右にEmbedタグがあるのでこれをコピーして、エディタに貼り付けます。[[BR]]
     165 
     166 [Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/12.png,650)]]
     167
     168
     169 次に、貼り付けたらWEBサイトにアクセスしてYouTubeが表示されるか確認して見ましょう。[[BR]]
     170
     171 [Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/13.png,650)]]
     172
     173
     174 これで、実際にYoutTubeを貼ることが出来ました。[[BR]]
     175 実際に通常のEmbedタグをWEBサイトに貼ることができたので、実際にコーディングをしていきます。[[BR]]
     176 
     177
     178 === コーディング ===
     179 まずは開発するようにディレクトリを作ります。[[BR]]
     180 root以下にindex.htmlというHTMLファイルを作ります。[[BR]]
     181 次に、cmdディレクトリを作りその下にjp.youtube.jsを作ります。[[BR]]
     182 このjp.youtube.jsというファイル名は小窓の規約に則りドメインに.jsを加えたファイル名になっています。[[BR]]
     183
     184
     185 {{{
     186 root/
     187 
     188 cmd/jp.youtube.js
     189 index.html
     190 }}}
     191
     192
     193 それではjp.youtube.jsファイルとindex.htmlファイルについて解説します。[[BR]]
     194 この二つのファイルはすでにコーディングが終わった状態でソースを見ていきます。[[BR]]
     195
     196 まず、index.htmlです。このファイルはjp.youtube.jsのJavaScriptを呼び出すHTMLファイルです。[[BR]]
     197 ソースを見ると、cmdディレクトリ以下のjp.youtube.com.jsファイルを読み込み、url2cmd関数を実行しているのが分かります。
     198 
     199 
     200 {{{
     201root/index.html
     202
     203<html>
     204<head>YouTube小窓</head>
     205<body>
     206
     207<script type="text/javascript" src="cmd/jp.youtube.com.js"></script>
     208<script type="text/javascript">
     209<!--
     210url2cmd('http://jp.youtube.com/watch?v=WsKX-exNIfw');
     211//-->
     212</script>
     213
     214</body>
     215</html>
     216 
     217 }}}
     218 
     219 次に、cmdディレクトリ以下のjp.youtube.com.jsファイルです。こちらは、index.htmlから呼ばれるJavaScriptファイルです。また、このファイルの中でURLをYouTubeのEmbedタグに置き換えています。[[BR]]
     220 jp.youtube.com.jsファイルの中でどの様な処理が行われているか解説していきます。[[BR]]
     221 
     222 
     223 {{{
     224root/cmd/jp.youtube.com.js
     225
     226function url2cmd(url) {
     227    if (!url.match(/^http:\/\/jp\.youtube\.com\/watch\?v=([a-zA-Z0-9_\-]+)/)) {
     228        pne_url2a(url);
     229        return;
     230    }
     231    var id = RegExp.$1;
     232    var width = 425;
     233    var height = 350;
     234    main(id, width, height);
     235}
     236
     237function main(id, width, height) {
     238    if (!id.match(/^[a-zA-Z0-9_\-]+$/)) {
     239        return;
     240    }
     241    if (!width) width = 0; else width = parseInt(width);
     242    if (!height) height = 0; else height = parseInt(height);
     243    if (width <= 0 || width > 425) {
     244        width = 425;
     245    }
     246    if (height <= 0 || height > 350) {
     247        height = 350;
     248    }
     249    var html = '<object width="'
     250            + width
     251            + '" height="'
     252            + height
     253            + '"><param name="movie" value="http://www.youtube.com/v/'
     254            + id
     255            + '"></param><embed src="http://www.youtube.com/v/'
     256            + id
     257            + '" type="application/x-shockwave-flash" width="'
     258            + width
     259            + '" height="'
     260            + height
     261            + '"></embed></object>';
     262    document.write(html);
     263}
     264
     265 }}}
     266 
     267 
     268 まず、このjp.youtube.com.jsファイルにはurl2cmd関数とmain関数があるのでurl2cmd関数から解説します。
     269 
     270 {{{
     271 function url2cmd(url) {
     272    if (!url.match(/^http:\/\/jp\.youtube\.com\/watch\?v=([a-zA-Z0-9_\-]+)/)) {
     273        pne_url2a(url);
     274        return;
     275    }
     276    var id = RegExp.$1;
     277    var width = 425;
     278    var height = 350;
     279    main(id, width, height);
     280}
     281
     282 }}}
     283 
     284 このurl2cmd関数は先ほどのindex.htmlファイルで呼ばれる関数です。[[BR]]
     285 URLをindex.htmlから渡されたら、まずURLかどうかを正規表現で判別処理をしています。もし、正規表現でマッチしないURLと判断した場合はURLを通常のリンクとしてで表示をします。[[BR]]
     286 もし、URLがjp.youtube.comの型には一致していた場合はRegExp.$1で括弧の一つ目を取得します。この括弧の中身がYouTubeのコンテンツのIDになります。その括弧の中身をidに入れます。[[BR]]
     287 また、widthとheightに425、350と値を入れてmain関数を呼び出します。[[BR]]
     288 それでは次にurl2cmd関数から呼び出されるmain関数を見てみましょう。
     289 
     290 {{{
     291 function main(id, width, height) {
     292    if (!id.match(/^[a-zA-Z0-9_\-]+$/)) {
     293        return;
     294    }
     295    if (!width) width = 0; else width = parseInt(width);
     296    if (!height) height = 0; else height = parseInt(height);
     297    if (width <= 0 || width > 425) {
     298        width = 425;
     299    }
     300    if (height <= 0 || height > 350) {
     301        height = 350;
     302    }
     303    var html = '<object width="'
     304            + width
     305            + '" height="'
     306            + height
     307            + '"><param name="movie" value="http://www.youtube.com/v/'
     308            + id
     309            + '"></param><embed src="http://www.youtube.com/v/'
     310            + id
     311            + '" type="application/x-shockwave-flash" width="'
     312            + width
     313            + '" height="'
     314            + height
     315            + '"></embed></object>';
     316    document.write(html);
     317}
     318
     319 }}}
     320
     321 このmain関数ではid、width、heightを受け取ります。[[BR]]
     322 次に、idをもう一度正規表現で検証して、もし指定された文字列でない場合は処理を中止します。[[BR]]
     323 widthとheightも検証し、もし想定していない幅と高さが指定されていた場合はwidthに425をheightに350を入れます。[[BR]]
     324 最後に、id、width、heightをYouTubeのオブジェクトタグに埋め込み、出力をしています。
     325
     326これで、YouTube小窓のJavaScriptファイルが完成しました。[[BR]]
     327間違っていなければ、index.htmlにアクセスすればYouTubeを見ることができます。[[BR]]
     328次はこの完成したファイルをOpenPNEに設置します。[[BR]]
     329
     330
     331 === 設置、確認 ===
     332 最後に、この完成したYouTube小窓を設置します。[[BR]]
     333 小窓の設置は、OpenPNEのpublic_htmlディレクトリ以下のcmdディレクトリに完成したJavaScriptファイルを置くだけです。[[BR]]
     334 OpenPNEの以前のバージョンでは管理画面で有効にする必要がありましたが、現在のOpenPNEの最新版であれば、JavaScriptファイルをcmd以下に設置するだけで小窓を使用することが出来ます。[[BR]]
     335 最後に、新しい小窓を追加したときは、実際に日記などにURLを貼って小窓が正常に動作するか確認しましょう。[[BR]]
     336
     337
     338 === デバッグ ===
     339 一連の小窓の開発の流れを説明しました。しかし、実際の開発ではすぐにこのように作ったファイルが正常に動作するということはありません。この小窓はJavaScriptで作っているので、デバッグも容易ではありません。[[BR]]
     340 そこで、デバッグを容易にするためにFirebugを使います。[[BR]]
     341 今回は、デバッグの方法を解説するために先ほどのjp.youtube.com.jsファイルにわざと間違えを加えてデバッグする方法を見ていくことにします。
     342 
     343 例として、以下のようにmain関数の中にmain(;という間違えたものを書いたとします。[[BR]]
     344 それでは、index.htmlにアクセスして見ましょう。[[BR]]
     345 
     346 {{{
     347  function main(id, width, height) {
     348    main(;
     349   
     350    if (!id.match(/^[a-zA-Z0-9_\-]+$/)) {
     351        return;
     352    }
     353 }}}
     354 
     355 [Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/14.png,650)]]
     356 
     357 勿論、ソースの中に間違いがあるためYouTubeは表示されていません。[[BR]]
     358 また、JavaScriptなのでデフォルトの状態だとどこが間違っているのか分かりません。[[BR]]
     359 どこが間違っているかを知るためにFirebugを使います。[[BR]]
     360 正常にFirebugがインストールされていれば、右下に2Errorsと赤く表示されています。[[BR]]
     361 この2Errorsをクリックするとどこでエラーが出ているか見ることができます。[[BR]]
     362 
     363 [Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/15.png,650)]]
     364 
     365 syntax errorと出ています。syntaxとは構文のことで、ここでは構文に間違えがあることを指摘しています。[[BR]]
     366 syntax errorを横にたどっていくと、line13とあります。これは13行目でエラーが発生していますということを表しています。[[BR]]
     367 syntax errorの下には、main(;\nとあり、このmain(;\nでエラーが発生していることが分かります。[[BR]]
     368 このFirebugの情報で、「13行目のmain(;で構文エラーがある」ということが分かります。
     369 
     370 このようにして、JavaScriptをデバッグします。
     371
     372  [Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/16.png,650)]]
     373
     374 右下にあった2Errorsがなくなり緑のチェックアイコンになったときは正常に小窓が動いているということです。[[BR]]
     375 Firebugはこのような構文エラーだけでなく、さまざまなエラーを出力してくれるので、小窓開発の時には便利なツールです。[[BR]]
     376 また、FirebugはテストサイトだけでなくOpenPNEに設置したときも使うことが出来るので、設置した後に正常に動作しない時はFirebugで確認することも出来ます。[[BR]]
    126377
    127378== 注意点 ==
    128379
    129 == 設置方法 ==
     380小窓開発は比較的容易にはじめることが出来き、簡単なソースで外部のサービスを取り込むことが出来るのが特徴です。[[BR]]
     381しかし、この小窓を開発する上での注意点があります。それは、ブラウザレベルでのセキュリティーに注意するということです。[[BR]]
     382具体的にはXSS(クロスサイトスクリプティング)やCSRF(クロスサイトリクエストフォージェリ)などの知識を持ち、対策をする必要があります。[[BR]]
     383OpenPNE本体で、タグなどはサニタイズするようにはなっていますが、小窓側注意をする必要があります。特に、ユーザが入力する値や、サイトによって変わったりURLによって変わるパラメータは気をつける必要があります。
     384
     385実際に、今回解説したYouTube小窓で言うと、YouTubeのidを[a-zA-Z0-9_\-]とし、タグになりそうな文字は許可していません。[[BR]]
     386また、widthとheightも変な文字列が入力されないように検証して最後は必ず数値が入るようになっています。
     387
    130388
    131389
    132390== 今後の小窓 ==
     391今後、小窓をどの様に発展させたいかというと、小窓はOpenPNE特有のマッシュアップだと思っています。[[BR]]
     392他のサービスを見てもURLを貼るだけで外部のサービスを利用できるというのはありそうでなかったので面白いなと思っています。[[BR]]
     393これだけシンプルに外部サービスを取り込むことが出来るので、小窓の適用範囲を増やしたり、小窓の露出機会を増やしてもっと小窓を使ってもらいたいと考えています。[[BR]]
     394その小窓の露出機会を増やして小窓を使ってもらうためにいくつか今後の小窓の展開を考えているので、今回はその4つの案を紹介します。
     395
     396
     397 === 小窓検索ポータルサイト ===
     398
     399 OpenPNEの中にどのような小窓を使うことが出来るのか分からなかったり、どの様にして小窓を貼るのか分からないという問題があります。[[BR]]
     400 そこで、検索すると検索結果が小窓しか表示されない小窓検索ポータルサイトを作りたいと考えています。例えば、東京で検索したらYouTubeで東京に関するビデオが出てきたり、ぐるなびで東京とうキーワードに関するお店の情報を出したり、Google Mapsで東京駅を表示します。[[BR]]
     401 そして、その横に小窓URLを表示することで、小窓が貼るという敷居が低くなり、小窓を使用する機会が増えると思っています。[[BR]]
     402
     403
     404 === 小窓レビュー ===
     405 OpenPNEでは、レビューとしてAmazonのコンテンツを使って単体のコンテンツとして存在しています。しかし、Amazon小窓として小窓を作った時に、レビューよりAmazon小窓の方が使われる機会が多くありました。しかも、小窓にすることによって、日記、コミュニティ、プロフィール、メッセージなどさまざまな所に小窓を貼ることが出来て、便利だし、多くの場所に貼ることが出来る方が人の目に触れる機会が多いことに気づきました。[[BR]]
     406 そこで、今後はレビューのようにOpenPNEにコンテンツを取り込むのではなく、小窓としてレビュー機能を考えたいと思っています。また、現在のレビューはAmazonのレビューだけですが、今後は小窓レビューとして、ぐるなびのお店をレビューしたり、僕の好きな土地として地図を表示して場所をレビューしたりとさまざまなレビューが出来る様な小窓レビューを作っていきたいと考えています。
     407
     408
     409 === 小窓ランキング ===
     410 特定のSNSの中で、どの小窓がどのくらい使われているのかといったランキングを表示できる小窓ランキングを考えています。[[BR]]
     411 ランキングの中には、新着ランキングやクリック率が高いランキングなどを作ることによってレコメンド的な要素にもなると考えています。[[BR]]
     412 例えば、社内SNSでOpenPNEを運用している場合ぐるなび小窓でランキングなどを表示して、ランチのお店をレコメンドできると考えています。
     413 
     414
     415 === 携帯小窓 ===
     416 現在のOpenPNEではこの小窓という便利な機能が定着しているので携帯サイトにも小窓を取り込みたいと考えています。[[BR]]
     417 現在の小窓はJavaScriptだけで作っています。[[BR]]
     418 しかし、携帯サイトはJavaScriptが使えません。ですので、OpenPNE本体側でPHPを使って小窓を開発するというのも考えています。
     419
     420
     421
     422== コラム ==
     423
     424今回、開発の中でURL2CMD形式小窓の開発を見ましたが、通常小窓形式で開発するときはどのような手順で開発をするのか簡単に解説します。
     425
     426通常小窓形式はCMDタグと呼ばれるタグで呼び出されます。[[BR]]
     427CMDタグが日記などに存在した場合、OpenPNEがmain('引数')の形に変換してくれます。[[BR]]
     428すると、直接main関数を呼ぶことになります。[[BR]]
     429
     430ですので、今回の場合だと、index.htmlでurl2cmd関数を呼び出すのではなく、main関数を呼びます。[[BR]]
     431
     432{{{
     433root/index.html
     434
     435<html>
     436<head>YouTube小窓</head>
     437<body>
     438
     439<script type="text/javascript" src="cmd/jp.youtube.com.js"></script>
     440<script type="text/javascript">
     441<!--
     442main('WsKX-exNIfw');
     443//-->
     444</script>
     445
     446</body>
     447</html>
     448 
     449 }}}
     450 
     451 
     452 URL2CMD形式というのは、url2cmd関数でidを解析してmain関数に値を渡しています。[[BR]]
     453 つまり、すべての基本には通常小窓形式があるということです。[[BR]]
     454 先ほどのURL2CMD形式で作ったYouTube小窓も通常小窓形式で呼び出すことが可能です。[[BR]]
     455 srcには、ドメイン名(.jsを除いたファイル名)、argsにはidを入力します。[[BR]]
     456 すると、通常小窓形式でYoutubeを表示することができます。[[BR]]
     457 
     458 {{{
     459 URL2CMDを通常小窓形式で呼び出す場合
     460   
     461    <cmd src="jp.youtube" args="WsKX-exNIfw">
     462 }}}
     463
     464