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

Changes between Version 4 and Version 5 of pne-book-9-3


Ignore:
Timestamp:
Feb 26, 2008, 6:21:28 PM (14 years ago)
Author:
imoto
Comment:

--

Legend:

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

    v4 v5  
    66 小窓とは一言で言うとOpenPNEを拡張するための仕組みです。
    77
    8  OpenPNEには「日記を書く」「写真を貼る」などの機能がありますが、他の機能を取り込んだり、コンテンツを追加するということが従来は出来ませんでした。そこで、YouTubeをSNSの日記に貼ったり、Googleマップの地図をコミュニティのイベントに貼ってオフ会のイベント会場を知らせたりするなど、外部のサービスをSNSに取り込んでOpenPNEを拡張するように出来る様にした仕組みがこの小窓です。[[BR]]
     8 OpenPNEには「日記を書く」「写真を貼る」などの機能がありますが、他の機能を取り込んだり、コンテンツを追加するということが従来は出来ませんでした。そこで、YouTubeをSNSの日記に貼ったり、Googleマップの地図をコミュニティのイベントに貼ってオフ会のイベント会場を知らせたり、外部の投票システムを日記に貼ったりするなど、外部のサービスをOpenPNEに取り込んでOpenPNEを拡張するように出来る様にした仕組みがこの小窓です。[[BR]]
    99
    1010 [[Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/1.png,650)]]
     
    2424 
    2525 そこでいろいろ考えていたところ、YouTubeをSNSの日記に貼ったらその様子がSNSに窓が出来て外の景色を見ているような感じがしたというのがコマンドから小窓になったきっかけです。[[BR]]
    26  そこで、これは窓に近いなということで「窓。。。コマンド。。。コマド。。小窓」という形で連想し、現在の小窓という名前になりました。
     26 これは窓に近いなということで「窓。。。コマンド。。。コマド。。小窓」という形で連想し、現在の小窓という名前になりました。
    2727 
    2828 
     
    3535
    3636== 通常小窓形式とURL2CMD形式 ==
    37 現在小窓には、作り方、貼り方にニ種類あります。その二種類とは通常小窓形式とURL2CMD形式です。それでは実際にYouTubeの動画をSNSに貼る方法を参照しながらそれぞれ特長を見ていきましょう。
     37現在小窓には、作り方、使い方にニ種類あります。その二種類とは通常小窓形式とURL2CMD形式です。それでは実際にYouTubeの動画をSNSに貼る方法を参照しながらそれぞれ特長を見ていきましょう。
    3838
    3939 === 通常小窓形式 ===
     
    5151 
    5252 [[Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/3.png,650)]]
     53 
    5354 すると、この様な形で日記にYouTubeの日記を貼ることが出来ます。[[BR]]
     55 
    5456 [[Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/4.png,650)]]
    5557
     
    7173[[Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/6.png,650)]]
    7274
    73  すると、この様にURLを貼り付けるだけで簡単にYouTubeの日記を貼ることが出来ます。[[BR]]
     75 すると、この様にURLを貼り付けるだけで簡にURLを入力するだけで外部サービスが取り込めると非常単にYouTubeの日記を貼ることが出来ます。[[BR]]
    7476
    7577[[Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/7.png,650)]]
    7678
    77  これがURL2CMD形式です。このURL2CMDの特徴としてはやはりURLを貼るだけで外部のサービスを取り込むことが出来るという点です。[[BR]]
    78  URL2CMD形式の様にURLを入力するだけで外部サービスが取り込めると非常に使いやすいという点で、OpenPNEとしては、通常小窓のように小窓タグを入力するのではなく、こちらのURL2CMD形式のようにURLを入力するだけで表示が出来る形式を推奨していきたいと考えています。
     79 これがURL2CMD形式です。このURL2CMDの特徴としてはURLを貼るだけで簡単に外部のサービスを取り込むことが出来るという点です。[[BR]]
     80 URL2CMD形式の様にURLを入力するだけで外部サービスが取り込めると非常に使いやすいというメリットがあります。
     81 
     82 OpenPNEとしては、通常小窓のように小窓タグを入力するのではなく、こちらのURL2CMD形式のようにURLを入力するだけで表示が出来る形式を推奨しています。
    7983 
    8084
     
    8892まず、OpenPNEの日記などでURLを含むリンクが存在した場合、OpenPNE側でそのドメインに対応した小窓があるか探します。[[BR]]
    8993もしここで対応した小窓でないと判断した場合はそのURLをリンクとして出力します。[[BR]]
    90 もし、URLが対応している小窓と一致すれば、OpenPNE側で小窓を呼び出すJavaScriptに置き換えます。
     94もし、URLが対応している小窓と一致すれば、OpenPNE側で小窓を呼JavaScriptに置き換えます。
    9195
    9296後は、OpenPNEから小窓が処理を引き継ぎ、URL2CMD関数を呼び出してURLを解析してmain関数を呼びます。[[BR]]
     
    99103 === 準備 ===
    100104 準備するものはFirefox、Firebug、WEBサイト、エディタが必要です。[[BR]]
    101  ブラウザでも開発は出来るのですが、このFirefoxには優れたアドオンがあるので今回はこのFirefoxを使用します。[[BR]]
     105 他のブラウザでも開発は出来るのですが、Firefoxには優れたアドオンがあるので今回はこのFirefoxを使用します。[[BR]]
    102106 FirebugはFirefoxのアドオンです。このFirebugを使用して、JavaScriptのデバッグを行います。このFirebugはインストールした状態にしておいてください。[[BR]]
    103107 次に、テストをするためにFTPサイトを用意してください。これはファイルをアップロードして確認するために使います。今回はターミナルを使って解説をしますが、FTPソフトを使っても構いません。[[BR]]
     
    163167 次に、このAPIやEmbedタグを通常の状態で貼ることが出来るかWEBサイトで確認します。[[BR]]
    164168 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 
    168169
    169170 次に、貼り付けたらWEBサイトにアクセスしてYouTubeが表示されるか確認して見ましょう。[[BR]]
     
    177178
    178179 === コーディング ===
    179  まずは開発するようにディレクトリを作ります。[[BR]]
     180 まずは開発ディレクトリを作ります。[[BR]]
    180181 root以下にindex.htmlというHTMLファイルを作ります。[[BR]]
    181182 次に、cmdディレクトリを作りその下にjp.youtube.jsを作ります。[[BR]]
     
    194195 この二つのファイルはすでにコーディングが終わった状態でソースを見ていきます。[[BR]]
    195196
    196  まず、index.htmlです。このファイルはjp.youtube.jsのJavaScriptを呼び出すHTMLファイルです。[[BR]]
     197 まず、index.htmlです。このファイルはjp.youtube.jsのJavaScriptを呼HTMLファイルです。[[BR]]
    197198 ソースを見ると、cmdディレクトリ以下のjp.youtube.com.jsファイルを読み込み、url2cmd関数を実行しているのが分かります。
    198199 
     
    268269 まず、このjp.youtube.com.jsファイルにはurl2cmd関数とmain関数があるのでurl2cmd関数から解説します。
    269270 
    270  {{{
     271 
     272  ==== url2cmd関数 ====
     273  {{{
    271274 function url2cmd(url) {
    272275    if (!url.match(/^http:\/\/jp\.youtube\.com\/watch\?v=([a-zA-Z0-9_\-]+)/)) {
     
    282285 }}}
    283286 
    284  このurl2cmd関数は先ほどのindex.htmlファイルで呼ばれる関数です。[[BR]]
     287  このurl2cmd関数は先ほどのindex.htmlファイルで呼ばれる関数です。[[BR]]
    285288 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  {{{
     289  もし、URLがjp.youtube.comの型には一致していた場合はRegExp.$1で括弧の一つ目を取得します。この括弧の中身がYouTubeのコンテンツのIDになります。その括弧の中身をidに入れます。[[BR]]
     290  また、widthとheightに425、350と値を入れてmain関数を呼びます。[[BR]]
     291  それでは次にurl2cmd関数から呼び出されるmain関数を見てみましょう。
     292 
     293  ==== main関数 ====
     294  {{{
    291295 function main(id, width, height) {
    292296    if (!id.match(/^[a-zA-Z0-9_\-]+$/)) {
     
    319323 }}}
    320324
    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]]
     325  このmain関数ではid、width、heightを受け取ります。[[BR]]
     326  次に、idをもう一度正規表現で検証して、もし指定された文字列でない場合は処理を中止します。[[BR]]
     327  widthとheightも検証し、もし想定していない幅と高さが指定されていた場合はwidthに425をheightに350を入れます。[[BR]]
     328  最後に、id、width、heightをYouTubeのオブジェクトタグに埋め込み、出力をしています。
     329
     330これがYouTube小窓のJavaScriptファイルです。[[BR]]
    327331間違っていなければ、index.htmlにアクセスすればYouTubeを見ることができます。[[BR]]
    328332次はこの完成したファイルをOpenPNEに設置します。[[BR]]
     
    330334
    331335 === 設置、確認 ===
    332  最後に、この完成したYouTube小窓を設置します。[[BR]]
     336 最後に、この完成したYouTube小窓をOpenPNEに設置します。[[BR]]
    333337 小窓の設置は、OpenPNEのpublic_htmlディレクトリ以下のcmdディレクトリに完成したJavaScriptファイルを置くだけです。[[BR]]
    334338 OpenPNEの以前のバージョンでは管理画面で有効にする必要がありましたが、現在のOpenPNEの最新版であれば、JavaScriptファイルをcmd以下に設置するだけで小窓を使用することが出来ます。[[BR]]
     
    337341
    338342 === デバッグ ===
    339  一連の小窓の開発の流れを説明しました。しかし、実際の開発ではすぐにこのように作ったファイルが正常に動作するということはありません。この小窓はJavaScriptで作っているので、デバッグも容易ではありません。[[BR]]
     343 一連の小窓の開発の流れを説明しました。しかし、実際の開発ではすぐにこのように作ったファイルが正常に動作するということはありません。やはり細かいミスをしていることもあります。しかし、小窓はJavaScriptで作っているので、デバッグも容易ではありません。[[BR]]
    340344 そこで、デバッグを容易にするためにFirebugを使います。[[BR]]
    341345 今回は、デバッグの方法を解説するために先ほどのjp.youtube.com.jsファイルにわざと間違えを加えてデバッグする方法を見ていくことにします。
     
    355359 [[Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/14.png,650)]]
    356360 
    357  勿論、ソースの中に間違いがあるためYouTubeは表示されていません。[[BR]]
     361 もちろん、ソースの中に間違いがあるためYouTubeは表示されていません。[[BR]]
    358362 また、JavaScriptなのでデフォルトの状態だとどこが間違っているのか分かりません。[[BR]]
    359363 どこが間違っているかを知るためにFirebugを使います。[[BR]]
     
    378382== 注意点 ==
    379383
    380 小窓開発は比較的容易にはじめることが出来き、簡単なソースで外部のサービスを取り込むことが出来るのが特徴です。[[BR]]
     384小窓開発は比較的容易に開発することが出来き、簡単なソースで外部のサービスを取り込むことが出来るのが特徴です。[[BR]]
    381385しかし、この小窓を開発する上での注意点があります。それは、ブラウザレベルでのセキュリティーに注意するということです。[[BR]]
    382386具体的にはXSS(クロスサイトスクリプティング)やCSRF(クロスサイトリクエストフォージェリ)などの知識を持ち、対策をする必要があります。[[BR]]
    383 OpenPNE本体で、タグなどはサニタイズするようにはなっていますが、小窓側注意をする必要があります。特に、ユーザが入力する値や、サイトによって変わったりURLによって変わるパラメータは気をつける必要があります。
     387OpenPNE本体で、タグなどはサニタイズするようにはなっていますが、小窓側でも注意する必要があります。特に、ユーザが入力する値や、サイトによって変わったりURLによって変わるパラメータは気をつける必要があります。
    384388
    385389実際に、今回解説したYouTube小窓で言うと、YouTubeのidを[a-zA-Z0-9_\-]とし、タグになりそうな文字は許可していません。[[BR]]
     
    389393
    390394== 今後の小窓 ==
    391 今後、小窓をどの様に発展させたいかというと、小窓はOpenPNE特有のマッシュアップだと思っています。[[BR]]
     395小窓はOpenPNE特有のマッシュアップだと思っています。[[BR]]
    392396他のサービスを見てもURLを貼るだけで外部のサービスを利用できるというのはありそうでなかったので面白いなと思っています。[[BR]]
    393 これだけシンプルに外部サービスを取り込むことが出来るので、小窓の適用範囲を増やしたり、小窓の露出機会を増やしてもっと小窓を使ってもらいたいと考えています。[[BR]]
     397これだけシンプルに外部サービスを取り込むことが出来るので、今後は小窓の適用範囲を増やしたり、小窓の露出機会を増やしてもっと小窓を使ってもらいたいと考えています。[[BR]]
    394398その小窓の露出機会を増やして小窓を使ってもらうためにいくつか今後の小窓の展開を考えているので、今回はその4つの案を紹介します。
    395399
     
    426430通常小窓形式はCMDタグと呼ばれるタグで呼び出されます。[[BR]]
    427431CMDタグが日記などに存在した場合、OpenPNEがmain('引数')の形に変換してくれます。[[BR]]
    428 すると、直接main関数を呼ぶことになります。[[BR]]
    429 
    430 ですので、今回の場合だと、index.htmlでurl2cmd関数を呼び出すのではなく、main関数を呼びます。[[BR]]
     432つまり、直接main関数を呼ぶことになります。[[BR]]
     433
     434今回の場合だと、index.htmlでurl2cmd関数を呼ぶのではなく、main関数を呼ぶことで、通常小窓形式での開発を行うことができます。[[BR]]
    431435
    432436{{{
     
    452456 URL2CMD形式というのは、url2cmd関数でidを解析してmain関数に値を渡しています。[[BR]]
    453457 つまり、すべての基本には通常小窓形式があるということです。[[BR]]
    454  先ほどのURL2CMD形式で作ったYouTube小窓も通常小窓形式で呼び出すことが可能です。[[BR]]
     458 先ほどのURL2CMD形式で作ったYouTube小窓も通常小窓形式で呼ことが可能です。[[BR]]
    455459 srcには、ドメイン名(.jsを除いたファイル名)、argsにはidを入力します。[[BR]]
    456  すると、通常小窓形式でYoutubeを表示することができます。[[BR]]
    457  
    458  {{{
    459  URL2CMDを通常小窓形式で呼び出す場合
     460 すると、URL2CMD形式で作っても通常小窓形式でYoutubeを表示することができます。[[BR]]
     461 
     462 {{{
     463 URL2CMDを通常小窓形式で呼場合
    460464   
    461465    <cmd src="jp.youtube" args="WsKX-exNIfw">