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

TOC

小窓の作り方

解説:手嶋
文:井本

小窓とは

概要

小窓とは一言で言うとOpenPNEを拡張するための仕組みです。

OpenPNEには「日記を書く」「写真を貼る」などの機能がありますが、他の機能を取り込んだり、コンテンツを追加するということが従来はできませんでした。そこで、YouTubeをSNSの日記に貼ったり、Googleマップの地図をコミュニティのイベントに貼ってオフ会のイベント会場を知らせたり、外部の投票システムを日記に貼ったりするなど、外部のサービスをOpenPNEに取り込んでOpenPNEを拡張するように出来る様にした仕組みがこの小窓です。

https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/1.png

小窓の歴史

当初この小窓を作ったときにはこの外部サービスを取り込む仕組みを「コマンド」と読んでいました。これは、日記にコマンドを打ち込むことで外部のサービスを取り込むという考えで始めたものだったのでコマンドと読んでいました。
実際にコマンドを動作させるときも、コマンドタグと呼ばれるタグを使用してYouTubeを呼び出していました。

コマンドタグ
   
<cmd src="youtube" args="a,b">

このコマンドタグと呼ばれるタグを入力して外部サービスを取り込んでいましたが、タグを使うのは技術者向けでとっつきにくいという側面もありました。

そこでいろいろ考えたところ、YouTubeをSNSの日記に貼ったらその様子がSNSに窓ができて外の景色を見ているような感じがしたというのがコマンドから小窓になったきっかけです。
これは窓に近いなということで「窓。。。コマンド。。。コマド。。小窓」という形で連想し、現在の小窓という名前になりました。

使用言語

現在この小窓はすべてJavaScriptで書かれています。
小窓はOpenPNE本体の様にPHPで書かれておらず、 JavaScriptで書かれているので、ブラウザさえあれば動作するという特徴を持っています。
この様な特徴を持っているので、ブラウザやエディタなど
身近にあるもので気軽に開発ができるという面があります!

通常小窓形式とURL2CMD形式

現在小窓には、作り方、使い方がニ種類あります。その二種類とは通常小窓形式とURL2CMD形式です。それでは実際にYouTubeの動画をSNSに貼る方法を参照しながらそれぞれ特長を見ていきましょう。

通常小窓形式

まず、YouTubeの貼りたい動画ページにいきます。
次に、そこからその動画のIDをURLからコピーします。

https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/2.png

次に、SNSの「日記を書く」に行き、小窓タグを入力します。
YouTube小窓タグは以下のような形式で入力します。

<cmd src="youtube" args="YouTubeの動画ID">

https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/3.png

すると、この様な形で日記にYouTubeの日記を貼ることができます。

https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/4.png

これが通常小窓形式と呼ばれる形式で、小窓タグと呼ばれるタグを入力してYouTubeの動画をSNSの日記に貼ることができます。
また、この通常小窓形式の強みとしては、この後に説明するURL2CMD形式では実現不可能な小窓を表示できるという点です。
例えば、複数の引数を持たせて小窓のサイズを小さくしたり、大きくしたりといったURL以外から引数を与えることで違う形で見せ方をしたいというときに使用されます。

URL2CMD形式

次に、URL2CMD形式でSNSにYouTubeの動画を貼って見ましょう。
通常小窓形式と同じくYouTubeの貼りたい動画ページにいきます。
そして、その動画が表示されているURLをコピーします。

https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/5.png

先ほどコピーしたURLをYouTubeの動画を入力したい箇所に入力します。
今回は先ほど通常小窓形式で入力した日記の下にコメントとしてい入力してみましょう。

https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/6.png

すると、この様にURLを貼り付けるだけで、外部サービスが取り込むことができます。

https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/7.png

これがURL2CMD形式です。このURL2CMDの特徴としてはURLを貼るだけで簡単に外部サービスを取り込むことができるという点です。
URL2CMD形式の様にURLを入力するだけで外部サービスが取り込めると非常に使いやすいというメリットがあります。

OpenPNEとしては、通常小窓のように小窓タグを入力するのではなく、こちらのURL2CMD形式のようにURLを入力するだけで表示ができる形式を推奨しています。

小窓の動作フロー

https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/8.png

それでは次に小窓の動作フローを解説します。この画像が小窓の動作フローを表した図です。
小窓では、OpenPNEのPHPと小窓のJavaScriptが連動して動作しています。よって、OpenPNE側の動作と小窓での動作という二つの動作があります。

まず、OpenPNEの日記などでURLを含むリンクが存在した場合、OpenPNE側でそのドメインに対応した小窓があるか探します。
もしここで対応した小窓でないと判断した場合はそのURLをリンクとして出力します。
もし、URLが対応している小窓と一致すれば、OpenPNE側で小窓を呼ぶJavaScriptに置き換えます。

後は、OpenPNEから小窓が処理を引き継ぎ、URL2CMD関数を呼び出してURLを解析してmain関数を呼びます。
このmain関数の中で、実際に表示させる形式に整えて最後は出力しています。

開発の前に

それでは次に実際に小窓を開発する前にどの様な準備が必要か、どの様な手順で進めるか、どの様な規約があるのかなどを確認し、次の開発に入っていきましょう。

準備

準備するものはFirefox、Firebug、Webサイト、エディタが必要です。
他のブラウザでも開発はできるのですが、Firefoxには優れたアドオンがあるので今回はこのFirefoxを使用します。
FirebugはFirefoxのアドオンです。このFirebugを使用して、JavaScriptのデバッグを行います。このFirebugはインストールした状態にしておいてください。
次に、テストをするためにFTPサイトを用意してください。これはファイルをアップロードして確認するために使います。今回はターミナルを使って解説をしますが、FTPソフトを使っても構いません。
後はエディタを用意してください。

Mozilla Japan - Firefox
http://www.mozilla-japan.org/products/firefox/

(スクリーンショット?)

Firebug :: Firefox Add-ons
https://addons.mozilla.org/ja/firefox/addon/1843

 (スクリーンショット?)


小窓の規約

小窓には2つの規約があります。
一つ目は、サイズの規約で二つ目はファイル名の規約です。

https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/9.png

まず、サイズの規約です。小窓は日記に貼られることが多いので、横幅のサイズは425pxと決めています。しかし、小窓にはそれ以下のモノもあるので、厳密には425px以下を推奨しています。この425pxは日記に小窓が貼られた時にOpenPNEのレイアウトが崩れない最大のサイズです。
しかし、縦は制限はありません。見やすさを維持している限り自由に縦幅のサイズを決めることができます。

https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/10.png

次に、ファイル名の規約です。 ファイル名は反応させたいドメインに.jsをつけたものとします。 例えば、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)

小窓の規則

1.横幅のサイズを425px以下にする
2.ファイル名は「ドメイン + .js」とする

開発

それでは実際にYouTube小窓を作ると仮定して小窓開発を見ていきましょう。
まだ開発ツールが準備できていない人は、開発の前に戻って小窓開発に必要なツールを用意してください。
今回はWebサイトにSSHでアクセスして、直接ファイルを書き換えていますが、FTPソフトを使ってアップロードして開発することも可能です。適時自分の環境に読み替えてください。

それではURL2CMD形式小窓の開発を見ていきましょう。

準備

まずは、何を作るかを決めます。
例えば、YouTube?、ぐるなび、Amazonなど外部サービスを決める必要があります。基本的にはAPIが公開されている外部サービスから小窓を作る作り方が現在の小窓の主流です。
また、Blogなどにそのコンテンツを埋め込むためのEmbedタグがある場合はそれを使用することもできます。

https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/11.png

次に、このAPIやEmbedタグを通常の状態で貼ることができるかWebサイトで確認します。
YouTubeだと動画の右にEmbedタグがあるのでこれをコピーして、エディタに貼り付けます。

次に、貼り付けたらWebサイトにアクセスしてYouTubeが表示されるか確認して見ましょう。

https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/13.png

これで、実際にYouTubeを貼ることができました。
実際に通常のEmbedタグをWebサイトに貼ることができたので、実際にコーディングをしていきます。

コーディング

まずは開発用ディレクトリを作ります。
root以下にindex.htmlというHTMLファイルを作ります。
次に、cmdディレクトリを作りその下にjp.youtube.jsを作ります。
このjp.youtube.jsというファイル名は小窓の規約に則りドメインに.jsを加えたファイル名になっています。

root/

cmd/jp.youtube.js
index.html

それではjp.youtube.jsファイルとindex.htmlファイルについて解説します。
この二つのファイルはすでにコーディングが終わった状態でソースを見ていきます。

まず、index.htmlです。このファイルはjp.youtube.jsのJavaScriptを呼ぶHTMLファイルです。
ソースを見ると、cmdディレクトリ以下のjp.youtube.com.jsファイルを読み込み、url2cmd関数を実行しているのが分かります。

root/index.html

<html>
<head>YouTube小窓</head>
<body>

<script type="text/javascript" src="cmd/jp.youtube.com.js"></script>
<script type="text/javascript">
<!--
url2cmd('http://jp.youtube.com/watch?v=WsKX-exNIfw');
//-->
</script>

</body>
</html>
 

次に、cmdディレクトリ以下のjp.youtube.com.jsファイルです。こちらは、index.htmlから呼ばれるJavaScriptファイルです。また、このファイルの中でURLをYouTubeのEmbedタグに置き換えています。
jp.youtube.com.jsファイルの中でどの様な処理が行われているか解説していきます。

root/cmd/jp.youtube.com.js

function url2cmd(url) {
    if (!url.match(/^http:\/\/jp\.youtube\.com\/watch\?v=([a-zA-Z0-9_\-]+)/)) {
        pne_url2a(url);
        return;
    }
    var id = RegExp.$1;
    var width = 425;
    var height = 350;
    main(id, width, height);
}

function main(id, width, height) {
    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;
    }
    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);
}

まず、このjp.youtube.com.jsファイルにはurl2cmd関数とmain関数があるのでurl2cmd関数から解説します。

url2cmd関数

 function url2cmd(url) {
    if (!url.match(/^http:\/\/jp\.youtube\.com\/watch\?v=([a-zA-Z0-9_\-]+)/)) {
        pne_url2a(url);
        return;
    }
    var id = RegExp.$1;
    var width = 425;
    var height = 350;
    main(id, width, height);
}

このurl2cmd関数は先ほどのindex.htmlファイルで呼ばれる関数です。

URLをindex.htmlから渡されたら、まずURLかどうかを正規表現で判別処理をしています。もし、正規表現でマッチしないURLと判断した場合はURLを通常のリンクとしてで表示をします。

もし、URLがjp.youtube.comの型には一致していた場合はRegExp.$1で括弧の一つ目を取得します。この括弧の中身がYouTubeのコンテンツのIDになります。その括弧の中身をidに入れます。
また、widthとheightに425、350と値を入れてmain関数を呼びます。
それでは次にurl2cmd関数から呼び出されるmain関数を見てみましょう。

main関数

 function main(id, width, height) {
    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;
    }
    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);
}

このmain関数ではid、width、heightを受け取ります。
次に、idをもう一度正規表現で検証して、もし指定された文字列でない場合は処理を中止します。
widthとheightも検証し、もし想定していない幅と高さが指定されていた場合はwidthに425をheightに350を入れます。
最後に、id、width、heightをYouTubeのオブジェクトタグに埋め込み、出力をしています。

これがYouTube小窓のJavaScriptファイルです。
間違っていなければ、index.htmlにアクセスすればYouTubeを見ることができます。
次はこの完成したファイルをOpenPNEに設置します。

設置、確認

最後に、この完成したYouTube小窓をOpenPNEに設置します。
小窓の設置は、OpenPNEのpublic_htmlディレクトリ以下のcmdディレクトリに完成したJavaScriptファイルを置くだけです。
OpenPNEの以前のバージョンでは管理画面で有効にする必要がありましたが、現在のOpenPNEの最新版であれば、JavaScriptファイルをcmd以下に設置するだけで小窓を使用することができます。
最後に、新しい小窓を追加したときは、実際に日記などにURLを貼って小窓が正常に動作するか確認しましょう。

デバッグ

一連の小窓の開発の流れを説明しました。しかし、実際の開発ではすぐにこのように作ったファイルが正常に動作するということはありません。やはり細かいミスをしていることもあります。しかし、小窓はJavaScriptで作っているので、デバッグも容易ではありません。
そこで、デバッグを容易にするためにFirebugを使います。
今回は、デバッグの方法を解説するために先ほどのjp.youtube.com.jsファイルにわざと間違えを加えてデバッグする方法を見ていくことにします。

例として、以下のようにmain関数の中にmain(;という間違えたものを書いたとします。
それでは、index.htmlにアクセスして見ましょう。

 function main(id, width, height) {
   main(;
   
   if (!id.match(/^[a-zA-Z0-9_\-]+$/)) {
       return;
   }

https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/14.png

もちろん、ソースの中に間違いがあるためYouTubeは表示されていません。
また、JavaScriptなのでデフォルトの状態だとどこが間違っているのか分かりません。
どこが間違っているかを知るためにFirebugを使います。
正常にFirebugがインストールされていれば、右下に2Errorsと赤く表示されています。
この2Errorsをクリックするとどこでエラーが出ているか見ることができます。

https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/15.png

syntax errorと出ています。syntaxとは構文のことで、ここでは構文に間違えがあることを指摘しています。
syntax errorを横にたどっていくと、line13とあります。これは13行目でエラーが発生していますということを表しています。
syntax errorの下には、main(;\nとあり、このmain(;\nでエラーが発生していることが分かります。
このFirebugの情報で、「13行目のmain(;で構文エラーがある」ということが分かります。

このようにして、JavaScriptをデバッグします。

https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/16.png

右下にあった2Errorsがなくなり緑のチェックアイコンになったときは正常に小窓が動いているということです。
Firebugはこのような構文エラーだけでなく、さまざまなエラーを出力してくれるので、小窓開発の時には便利なツールです。
また、FirebugはテストサイトだけでなくOpenPNEに設置したときも使うことができるので、設置した後に正常に動作しない時はFirebugで確認することもできます。

注意点

小窓開発は比較的容易に開発することができ、簡単なソースで外部のサービスを取り込むことができるのが特徴です。
しかし、この小窓を開発する上での注意点があります。それは、ブラウザレベルでのセキュリティーに注意するということです。
具体的にはXSS(クロスサイトスクリプティング)やCSRF(クロスサイトリクエストフォージェリ)などの知識を持ち、対策をする必要があります。
OpenPNE本体で、タグなどはサニタイズするようにはなっていますが、小窓側でも注意する必要があります。特に、ユーザが入力する値や、サイトによって変わったりURLによって変わるパラメータは気をつける必要があります。

実際に、今回解説したYouTube小窓で言うと、YouTubeのidを[a-zA-Z0-9_\-]とし、タグになりそうな文字は許可していません。
また、widthとheightも変な文字列が入力されないように検証して最後は必ず数値が入るようになっています。

今後の小窓

小窓はOpenPNE特有のマッシュアップだと思っています。
他のサービスを見てもURLを貼るだけで外部のサービスを利用できるというのはありそうでなかったので面白いなと思っています。
これだけシンプルに外部サービスを取り込むことができるので、今後は小窓の適用範囲を増やしたり、小窓の露出機会を増やしてもっと小窓を使ってもらいたいと考えています。
その小窓の露出機会を増やして小窓を使ってもらうためにいくつか今後の小窓の展開を考えているので、今回はその4つの案を紹介します。

小窓検索ポータルサイト

OpenPNEの中にどのような小窓を使うことができるのか分からなかったり、どの様にして小窓を貼るのか分からないという問題があります。
そこで、検索すると検索結果が小窓しか表示されない小窓検索ポータルサイトを作りたいと考えています。例えば、東京で検索したらYouTubeで東京に関するビデオが出てきたり、ぐるなびで東京とうキーワードに関するお店の情報を出したり、Google Mapsで東京駅を表示します。
そして、その横に小窓URLを表示することで、小窓が貼るという敷居が低くなり、小窓を使用する機会が増えると思っています。

小窓レビュー

OpenPNEでは、レビューとしてAmazonのコンテンツを使って単体のコンテンツとして存在しています。しかし、Amazon小窓として小窓を作った時に、レビューよりAmazon小窓の方が使われる機会が多くありました。しかも、小窓にすることによって、日記、コミュニティ、プロフィール、メッセージなどさまざまな所に小窓を貼ることができて、便利だし、多くの場所に貼ることができる方が人の目に触れる機会が多いことに気づきました。
そこで、今後はレビューのようにOpenPNEにコンテンツを取り込むのではなく、小窓としてレビュー機能を考えたいと思っています。また、現在のレビューはAmazonのレビューだけですが、今後は小窓レビューとして、ぐるなびのお店をレビューしたり、僕の好きな土地として地図を表示して場所をレビューしたりとさまざまなレビューができるような小窓レビューを作っていきたいと考えています。

小窓ランキング

特定のSNSの中で、どの小窓がどのくらい使われているのかといったランキングを表示できる小窓ランキングを考えています。
ランキングの中には、新着ランキングやクリック率が高いランキングなどを作ることによってレコメンド的な要素にもなると考えています。
例えば、社内SNSでOpenPNEを運用している場合ぐるなび小窓でランキングなどを表示して、ランチのお店をレコメンドできると考えています。

携帯小窓

現在のOpenPNEではこの小窓という便利な機能が定着しているので携帯サイトにも小窓を取り込みたいと考えています。
現在の小窓はJavaScriptだけで作っています。
しかし、携帯サイトはJavaScriptが使えません。ですので、OpenPNE本体側でPHPを使って小窓を開発するというのも考えています。

通常小窓形式で開発する場合

今回、開発の中でURL2CMD形式小窓の開発を見ましたが、通常小窓形式で開発するときはどのような手順で開発をするのか簡単に解説します。

通常小窓形式はCMDタグと呼ばれるタグで呼び出されます。
CMDタグが日記などに存在した場合、OpenPNEがmain('引数')の形に変換してくれます。
つまり、直接main関数を呼ぶことになります。

今回の場合だと、index.htmlでurl2cmd関数を呼ぶのではなく、main関数を呼ぶことで、通常小窓形式での開発を行うことができます。

root/index.html

<html>
<head>YouTube小窓</head>
<body>

<script type="text/javascript" src="cmd/jp.youtube.com.js"></script>
<script type="text/javascript">
<!--
main('WsKX-exNIfw');
//-->
</script>

</body>
</html>
 

URL2CMD形式というのは、url2cmd関数でidを解析してmain関数に値を渡しています。
つまり、すべての基本には通常小窓形式があるということです。
先ほどのURL2CMD形式で作ったYouTube小窓も通常小窓形式で呼ぶことが可能です。
srcには、ドメイン名(.jsを除いたファイル名)、argsにはidを入力します。
すると、URL2CMD形式で作っても通常小窓形式でYoutubeを表示することができます。

URL2CMDを通常小窓形式で呼ぶ場合
   
   <cmd src="jp.youtube" args="WsKX-exNIfw">
Last modified 10 years ago Last modified on Mar 30, 2008, 7:54:55 PM