Context Navigation

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

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

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
  小窓とは一言で言うとOpenPNEを拡張するための仕組みです。
  OpenPNEには「日記を書く」「写真を貼る」などの機能がありますが、他の機能を取り込んだり、コンテンツを追加するということが従来は出来ませんでした。そこで、YouTubeをSNSの日記に貼ったり、Googleマップの地図をコミュニティのイベントに貼ってオフ会のイベント会場を知らせたりするなど、外部のサービスをSNSに取り込んでOpenPNEを拡張するように出来る様にした仕組みがこの小窓です。[[BR]]
+ OpenPNEには「日記を書く」「写真を貼る」などの機能がありますが、他の機能を取り込んだり、コンテンツを追加するということが従来は出来ませんでした。そこで、YouTubeをSNSの日記に貼ったり、Googleマップの地図をコミュニティのイベントに貼ってオフ会のイベント会場を知らせたり、外部の投票システムを日記に貼ったりするなど、外部のサービスをOpenPNEに取り込んでOpenPNEを拡張するように出来る様にした仕組みがこの小窓です。[[BR]]
  [[Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/1.png,650)]]
 …
  そこでいろいろ考えていたところ、YouTubeをSNSの日記に貼ったらその様子がSNSに窓が出来て外の景色を見ているような感じがしたというのがコマンドから小窓になったきっかけです。[[BR]]
  そこで、これは窓に近いなということで「窓。。。コマンド。。。コマド。。小窓」という形で連想し、現在の小窓という名前になりました。
+ これは窓に近いなということで「窓。。。コマンド。。。コマド。。小窓」という形で連想し、現在の小窓という名前になりました。
 …
 == 通常小窓形式とURL2CMD形式 ==
 現在小窓には、作り方、貼り方にニ種類あります。その二種類とは通常小窓形式とURL2CMD形式です。それでは実際にYouTubeの動画をSNSに貼る方法を参照しながらそれぞれ特長を見ていきましょう。
+現在小窓には、作り方、使い方にニ種類あります。その二種類とは通常小窓形式とURL2CMD形式です。それでは実際にYouTubeの動画をSNSに貼る方法を参照しながらそれぞれ特長を見ていきましょう。
  === 通常小窓形式 ===
 …
  [[Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/3.png,650)]]
  すると、この様な形で日記にYouTubeの日記を貼ることが出来ます。[[BR]]
  [[Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/4.png,650)]]
 …
 [[Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/6.png,650)]]
  すると、この様にURLを貼り付けるだけで簡単にYouTubeの日記を貼ることが出来ます。[[BR]]
+ すると、この様にURLを貼り付けるだけで簡にURLを入力するだけで外部サービスが取り込めると非常単にYouTubeの日記を貼ることが出来ます。[[BR]]
 [[Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/7.png,650)]]
+ これがURL2CMD形式です。このURL2CMDの特徴としてはやはりURLを貼るだけで外部のサービスを取り込むことが出来るという点です。[[BR]]
+ URL2CMD形式の様にURLを入力するだけで外部サービスが取り込めると非常に使いやすいという点で、OpenPNEとしては、通常小窓のように小窓タグを入力するのではなく、こちらのURL2CMD形式のようにURLを入力するだけで表示が出来る形式を推奨していきたいと考えています。
+ これがURL2CMD形式です。このURL2CMDの特徴としてはURLを貼るだけで簡単に外部のサービスを取り込むことが出来るという点です。[[BR]]
+ URL2CMD形式の様にURLを入力するだけで外部サービスが取り込めると非常に使いやすいというメリットがあります。
+ OpenPNEとしては、通常小窓のように小窓タグを入力するのではなく、こちらのURL2CMD形式のようにURLを入力するだけで表示が出来る形式を推奨しています。
 …
 まず、OpenPNEの日記などでURLを含むリンクが存在した場合、OpenPNE側でそのドメインに対応した小窓があるか探します。[[BR]]
 もしここで対応した小窓でないと判断した場合はそのURLをリンクとして出力します。[[BR]]
 もし、URLが対応している小窓と一致すれば、OpenPNE側で小窓を呼び出すJavaScriptに置き換えます。
+もし、URLが対応している小窓と一致すれば、OpenPNE側で小窓を呼ぶJavaScriptに置き換えます。
 後は、OpenPNEから小窓が処理を引き継ぎ、URL2CMD関数を呼び出してURLを解析してmain関数を呼びます。[[BR]]
 …
  === 準備 ===
  準備するものはFirefox、Firebug、WEBサイト、エディタが必要です。[[BR]]
  ブラウザでも開発は出来るのですが、このFirefoxには優れたアドオンがあるので今回はこのFirefoxを使用します。[[BR]]
+ 他のブラウザでも開発は出来るのですが、Firefoxには優れたアドオンがあるので今回はこのFirefoxを使用します。[[BR]]
  FirebugはFirefoxのアドオンです。このFirebugを使用して、JavaScriptのデバッグを行います。このFirebugはインストールした状態にしておいてください。[[BR]]
  次に、テストをするためにFTPサイトを用意してください。これはファイルをアップロードして確認するために使います。今回はターミナルを使って解説をしますが、FTPソフトを使っても構いません。[[BR]]
 …
  次に、このAPIやEmbedタグを通常の状態で貼ることが出来るかWEBサイトで確認します。[[BR]]
  YouTubeだと動画の右にEmbedタグがあるのでこれをコピーして、エディタに貼り付けます。[[BR]]
- [[Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/12.png,650)]]
  次に、貼り付けたらWEBサイトにアクセスしてYouTubeが表示されるか確認して見ましょう。[[BR]]
 …
  === コーディング ===
  まずは開発するようにディレクトリを作ります。[[BR]]
+ まずは開発用ディレクトリを作ります。[[BR]]
  root以下にindex.htmlというHTMLファイルを作ります。[[BR]]
  次に、cmdディレクトリを作りその下にjp.youtube.jsを作ります。[[BR]]
 …
  この二つのファイルはすでにコーディングが終わった状態でソースを見ていきます。[[BR]]
  まず、index.htmlです。このファイルはjp.youtube.jsのJavaScriptを呼び出すHTMLファイルです。[[BR]]
+ まず、index.htmlです。このファイルはjp.youtube.jsのJavaScriptを呼ぶHTMLファイルです。[[BR]]
  ソースを見ると、cmdディレクトリ以下のjp.youtube.com.jsファイルを読み込み、url2cmd関数を実行しているのが分かります。
 …
  まず、このjp.youtube.com.jsファイルにはurl2cmd関数とmain関数があるのでurl2cmd関数から解説します。
+ {{{
+  ==== url2cmd関数 ====
+  {{{
  function url2cmd(url) {
     if (!url.match(/^http:\/\/jp\.youtube\.com\/watch\?v=([a-zA-Z0-9_\-]+)/)) {
 …
  }}}
  このurl2cmd関数は先ほどのindex.htmlファイルで呼ばれる関数です。[[BR]]
+  このurl2cmd関数は先ほどのindex.htmlファイルで呼ばれる関数です。[[BR]]
  URLをindex.htmlから渡されたら、まずURLかどうかを正規表現で判別処理をしています。もし、正規表現でマッチしないURLと判断した場合はURLを通常のリンクとしてで表示をします。[[BR]]
+ もし、URLがjp.youtube.comの型には一致していた場合はRegExp.$1で括弧の一つ目を取得します。この括弧の中身がYouTubeのコンテンツのIDになります。その括弧の中身をidに入れます。[[BR]]
+ また、widthとheightに425、350と値を入れてmain関数を呼び出します。[[BR]]
+ それでは次にurl2cmd関数から呼び出されるmain関数を見てみましょう。
+ {{{
+  もし、URLがjp.youtube.comの型には一致していた場合はRegExp.$1で括弧の一つ目を取得します。この括弧の中身がYouTubeのコンテンツのIDになります。その括弧の中身をidに入れます。[[BR]]
+  また、widthとheightに425、350と値を入れてmain関数を呼びます。[[BR]]
+  それでは次にurl2cmd関数から呼び出されるmain関数を見てみましょう。
+  ==== main関数 ====
+  {{{
  function main(id, width, height) {
     if (!id.match(/^[a-zA-Z0-9_\-]+$/)) {
 …
  }}}
  このmain関数ではid、width、heightを受け取ります。[[BR]]
  次に、idをもう一度正規表現で検証して、もし指定された文字列でない場合は処理を中止します。[[BR]]
  widthとheightも検証し、もし想定していない幅と高さが指定されていた場合はwidthに425をheightに350を入れます。[[BR]]
  最後に、id、width、heightをYouTubeのオブジェクトタグに埋め込み、出力をしています。
 これで、YouTube小窓のJavaScriptファイルが完成しました。[[BR]]
+  このmain関数ではid、width、heightを受け取ります。[[BR]]
+  次に、idをもう一度正規表現で検証して、もし指定された文字列でない場合は処理を中止します。[[BR]]
+  widthとheightも検証し、もし想定していない幅と高さが指定されていた場合はwidthに425をheightに350を入れます。[[BR]]
+  最後に、id、width、heightをYouTubeのオブジェクトタグに埋め込み、出力をしています。
+これがYouTube小窓のJavaScriptファイルです。[[BR]]
 間違っていなければ、index.htmlにアクセスすればYouTubeを見ることができます。[[BR]]
 次はこの完成したファイルをOpenPNEに設置します。[[BR]]
 …
  === 設置、確認 ===
  最後に、この完成したYouTube小窓を設置します。[[BR]]
+ 最後に、この完成したYouTube小窓をOpenPNEに設置します。[[BR]]
  小窓の設置は、OpenPNEのpublic_htmlディレクトリ以下のcmdディレクトリに完成したJavaScriptファイルを置くだけです。[[BR]]
  OpenPNEの以前のバージョンでは管理画面で有効にする必要がありましたが、現在のOpenPNEの最新版であれば、JavaScriptファイルをcmd以下に設置するだけで小窓を使用することが出来ます。[[BR]]
 …
  === デバッグ ===
  一連の小窓の開発の流れを説明しました。しかし、実際の開発ではすぐにこのように作ったファイルが正常に動作するということはありません。この小窓はJavaScriptで作っているので、デバッグも容易ではありません。[[BR]]
+ 一連の小窓の開発の流れを説明しました。しかし、実際の開発ではすぐにこのように作ったファイルが正常に動作するということはありません。やはり細かいミスをしていることもあります。しかし、小窓はJavaScriptで作っているので、デバッグも容易ではありません。[[BR]]
  そこで、デバッグを容易にするためにFirebugを使います。[[BR]]
  今回は、デバッグの方法を解説するために先ほどのjp.youtube.com.jsファイルにわざと間違えを加えてデバッグする方法を見ていくことにします。
 …
  [[Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/14.png,650)]]
  勿論、ソースの中に間違いがあるためYouTubeは表示されていません。[[BR]]
+ もちろん、ソースの中に間違いがあるためYouTubeは表示されていません。[[BR]]
  また、JavaScriptなのでデフォルトの状態だとどこが間違っているのか分かりません。[[BR]]
  どこが間違っているかを知るためにFirebugを使います。[[BR]]
 …
 == 注意点 ==
 小窓開発は比較的容易にはじめることが出来き、簡単なソースで外部のサービスを取り込むことが出来るのが特徴です。[[BR]]
+小窓開発は比較的容易に開発することが出来き、簡単なソースで外部のサービスを取り込むことが出来るのが特徴です。[[BR]]
 しかし、この小窓を開発する上での注意点があります。それは、ブラウザレベルでのセキュリティーに注意するということです。[[BR]]
 具体的にはXSS(クロスサイトスクリプティング)やCSRF(クロスサイトリクエストフォージェリ)などの知識を持ち、対策をする必要があります。[[BR]]
 OpenPNE本体で、タグなどはサニタイズするようにはなっていますが、小窓側注意をする必要があります。特に、ユーザが入力する値や、サイトによって変わったりURLによって変わるパラメータは気をつける必要があります。
+OpenPNE本体で、タグなどはサニタイズするようにはなっていますが、小窓側でも注意する必要があります。特に、ユーザが入力する値や、サイトによって変わったりURLによって変わるパラメータは気をつける必要があります。
 実際に、今回解説したYouTube小窓で言うと、YouTubeのidを[a-zA-Z0-9_\-]とし、タグになりそうな文字は許可していません。[[BR]]
 …
 == 今後の小窓 ==
 今後、小窓をどの様に発展させたいかというと、小窓はOpenPNE特有のマッシュアップだと思っています。[[BR]]
+小窓はOpenPNE特有のマッシュアップだと思っています。[[BR]]
 他のサービスを見てもURLを貼るだけで外部のサービスを利用できるというのはありそうでなかったので面白いなと思っています。[[BR]]
 これだけシンプルに外部サービスを取り込むことが出来るので、小窓の適用範囲を増やしたり、小窓の露出機会を増やしてもっと小窓を使ってもらいたいと考えています。[[BR]]
+これだけシンプルに外部サービスを取り込むことが出来るので、今後は小窓の適用範囲を増やしたり、小窓の露出機会を増やしてもっと小窓を使ってもらいたいと考えています。[[BR]]
 その小窓の露出機会を増やして小窓を使ってもらうためにいくつか今後の小窓の展開を考えているので、今回はその4つの案を紹介します。
 …
 通常小窓形式はCMDタグと呼ばれるタグで呼び出されます。[[BR]]
 CMDタグが日記などに存在した場合、OpenPNEがmain('引数')の形に変換してくれます。[[BR]]
 すると、直接main関数を呼ぶことになります。[[BR]]
 ですので、今回の場合だと、index.htmlでurl2cmd関数を呼び出すのではなく、main関数を呼びます。[[BR]]
+つまり、直接main関数を呼ぶことになります。[[BR]]
+今回の場合だと、index.htmlでurl2cmd関数を呼ぶのではなく、main関数を呼ぶことで、通常小窓形式での開発を行うことができます。[[BR]]
 {{{
 …
  URL2CMD形式というのは、url2cmd関数でidを解析してmain関数に値を渡しています。[[BR]]
  つまり、すべての基本には通常小窓形式があるということです。[[BR]]
  先ほどのURL2CMD形式で作ったYouTube小窓も通常小窓形式で呼び出すことが可能です。[[BR]]
+ 先ほどのURL2CMD形式で作ったYouTube小窓も通常小窓形式で呼ぶことが可能です。[[BR]]
  srcには、ドメイン名(.jsを除いたファイル名)、argsにはidを入力します。[[BR]]
  すると、通常小窓形式でYoutubeを表示することができます。[[BR]]
  {{{
  URL2CMDを通常小窓形式で呼び出す場合
+ すると、URL2CMD形式で作っても通常小窓形式でYoutubeを表示することができます。[[BR]]
+ {{{
+ URL2CMDを通常小窓形式で呼ぶ場合
     <cmd src="jp.youtube" args="WsKX-exNIfw">