| Version 2 (modified by , 15 years ago) (diff) |
|---|
小窓の作り方
解説：手嶋
文：井本
小窓とは
概要
一言で言うとOpenPNEを拡張するための仕組みです。
OpenPNEには「日記を書く」「写真を貼る」などの機能がありますが、他の機能を取り込んだり、コンテンツを追加するということが従来は出来ませんでした。そこで、YouTubeをSNSの日記に貼ったり、Googleマップの地図をコミュニティのイベントに貼ってオフ会のイベント会場を知らせたりするなど、外部のサービスをSNSに取り込んでOpenPNEを拡張するように出来る様にした仕組みがこの小窓です。
(小窓のスクリーンショット)
小窓の歴史
元々この小窓を作ったときにはこの外部サービスを取り込む仕組みを「コマンド」と読んでいました。これは、日記にコマンドを打ち込むことで外部のサービスを取り込むという考えで始めたものだったのでコマンドと読んでいました。 実際にコマンドを動作させるときも、コマンドタグと呼ばれるタグを使用してYouTubeを呼び出していました。
コマンドタグ <cmd src="youtube" args="a,b">
このコマンドタグと呼ばれるタグを入力して外部サービスを取り込んでいましたが、タグを使うのは技術者向けでとっつきにくいという側面もありました。
そこでいろいろ考えていたところ、YouTubeをSNSの日記に貼ったらその様子がSNSに窓が出来て外の景色を見ているような感じがしたというのがコマンドから小窓になったきっかけです。 そこで、これは窓に近いなということで「窓。。。コマンド。。。コマド。。小窓」という形で連想し、現在の小窓という名前になりました。
使用言語
現在この小窓はすべてJavaScriptで書かれています。 小窓はOpenPNE本体の様にPHPで書かれておらず、 JavaScriptで書かれているので、ブラウザさえあれば動作するという特徴を持っています。 この様な特徴を持っているので、ブラウザやエディタなど身近にあるもので気軽に開発ができるという面があります！
通常小窓形式とURL2CMD形式
現在小窓には、作り方、貼り方にニ種類あります。その二種類とは通常小窓形式とURL2CMD形式です。それでは実際にYouTubeの動画をSNSに貼る方法を参照しながらそれぞれ特長を見ていきましょう。
通常小窓形式
まず、YouTubeの貼りたい動画のページにいきます。 次に、そこからその動画のIDをURLからコピーします。
(通常小窓形式 スクリーンショット)
次に、SNSの「日記を書く」に行き、小窓タグを入力します。 YouTube小窓タグは以下のような形式で入力します。
<cmd src="youtube" args="YouTubeの動画ID">
(通常小窓形式2 スクリーンショット)
すると、この様な形で日記にYouTubeの日記を貼ることが出来ます。 (通常小窓形式3 スクリーンショット)
これが通常小窓形式と呼ばれる形式で、小窓タグと呼ばれるタグを入力してYouTubeの動画をSNSの日記に貼ることが出来ます。 また、この通常小窓形式の強みとしては、この後に説明するURL2CMD形式では実現不可能な小窓を表示できるという点です。 例えば、複数の引数を持たせて小窓のサイズを小さくしたり、大きくしたりといったURL以外から引数を与えることで違う形で見せ方をしたいというときに使用されます。
URL2CMD形式
次に、URL2CMD形式でSNSにYouTubeの動画を貼って見ましょう。 通常小窓形式と同じくYouTubeの貼りたい動画のページにいきます。 そして、その動画が表示されているURLをコピーします。
(URL2CMD スクリーンショット)
先ほどコピーしたURLをYouTubeの動画を入力したい箇所に入力します。 今回は先ほど通常小窓形式で入力した日記の下にコメントとしてい入力してみましょう。
(URL2CMD2 スクリーンショット)
すると、この様にURLを貼り付けるだけで簡単にYouTubeの日記を貼ることが出来ます。 (URL2CMD3 スクリーンショット)
これがURL2CMD形式です。このURL2CMDの特徴としてはやはりURLを貼るだけで外部のサービスを取り込むことが出来るという点です。 URL2CMD形式の様にURLを入力するだけで外部サービスが取り込めると非常に使いやすいという点で、OpenPNEとしては、通常小窓のように小窓タグを入力するのではなく、こちらのURL2CMD形式のようにURLを入力するだけで表示が出来る形式を推奨していきたいと考えています。
小窓の動作フロー
(動作フロー 画像) それでは次に小窓の動作フローを解説します。この画像が小窓の動作フローを表した図です。 小窓では、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のデバッグを行います。次に、テストをするためにFTPサイトを用意してください。これはファイルをアップロードして確認するために使います。今回はターミナルを使って解説をしますが、FTPソフトを使っても構いません。 後はエディタを用意してください。
Mozilla Japan - Firefox http://www.mozilla-japan.org/products/firefox/ (スクリーンショット) Firebug :: Firefox Add-ons https://addons.mozilla.org/ja/firefox/addon/1843 (スクリーンショット)