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

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


Ignore:
Timestamp:
Mar 30, 2008, 7:54:55 PM (10 years ago)
Author:
imoto
Comment:

--

Legend:

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

    v8 v9  
    55文:井本
    66== 小窓とは ==
    7 
     7 === 概要 ===
    88 小窓とは一言で言うとOpenPNEを拡張するための仕組みです。
    99
    10  OpenPNEには「日記を書く」「写真を貼る」などの機能がありますが、他の機能を取り込んだり、コンテンツを追加するということが従来は出来ませんでした。そこで、YouTubeをSNSの日記に貼ったり、Googleマップの地図をコミュニティのイベントに貼ってオフ会のイベント会場を知らせたり、外部の投票システムを日記に貼ったりするなど、外部のサービスをOpenPNEに取り込んでOpenPNEを拡張するように出来る様にした仕組みがこの小窓です。[[BR]]
     10 OpenPNEには「日記を書く」「写真を貼る」などの機能がありますが、他の機能を取り込んだり、コンテンツを追加するということが従来はできませんでした。そこで、YouTubeをSNSの日記に貼ったり、Googleマップの地図をコミュニティのイベントに貼ってオフ会のイベント会場を知らせたり、外部の投票システムを日記に貼ったりするなど、外部のサービスをOpenPNEに取り込んでOpenPNEを拡張するように出来る様にした仕組みがこの小窓です。[[BR]]
    1111
    1212 [[Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/1.png,650)]]
     
    2525 このコマンドタグと呼ばれるタグを入力して外部サービスを取り込んでいましたが、タグを使うのは技術者向けでとっつきにくいという側面もありました。
    2626 
    27  そこでいろいろ考えていたところ、YouTubeをSNSの日記に貼ったらその様子がSNSに窓が出来て外の景色を見ているような感じがしたというのがコマンドから小窓になったきっかけです。[[BR]]
     27 そこでいろいろ考えたところ、YouTubeをSNSの日記に貼ったらその様子がSNSに窓ができて外の景色を見ているような感じがしたというのがコマンドから小窓になったきっかけです。[[BR]]
    2828 これは窓に近いなということで「窓。。。コマンド。。。コマド。。小窓」という形で連想し、現在の小窓という名前になりました。
    2929 
     
    3232 現在この小窓はすべてJavaScriptで書かれています。[[BR]]
    3333 小窓はOpenPNE本体の様にPHPで書かれておらず、 JavaScriptで書かれているので、ブラウザさえあれば動作するという特徴を持っています。[[BR]]
    34  この様な特徴を持っているので、ブラウザやエディタなど[[BR]]身近にあるもので気軽に開発ができるという面があります!
     34 この様な特徴を持っているので、ブラウザやエディタなど[[BR]]
     35 身近にあるもので気軽に開発ができるという面があります!
    3536
    3637
    3738
    3839== 通常小窓形式とURL2CMD形式 ==
    39 現在小窓には、作り方、使い方ニ種類あります。その二種類とは通常小窓形式とURL2CMD形式です。それでは実際にYouTubeの動画をSNSに貼る方法を参照しながらそれぞれ特長を見ていきましょう。
     40現在小窓には、作り方、使い方ニ種類あります。その二種類とは通常小窓形式とURL2CMD形式です。それでは実際にYouTubeの動画をSNSに貼る方法を参照しながらそれぞれ特長を見ていきましょう。
    4041
    4142 === 通常小窓形式 ===
    42  まず、YouTubeの貼りたい動画ページにいきます。[[BR]]
     43 まず、YouTubeの貼りたい動画ページにいきます。[[BR]]
    4344 次に、そこからその動画のIDをURLからコピーします。
    4445 
     
    5455 [[Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/3.png,650)]]
    5556 
    56  すると、この様な形で日記にYouTubeの日記を貼ることが出来ます。[[BR]]
     57 すると、この様な形で日記にYouTubeの日記を貼ることができます。[[BR]]
    5758 
    5859 [[Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/4.png,650)]]
    5960
    60  これが通常小窓形式と呼ばれる形式で、小窓タグと呼ばれるタグを入力してYouTubeの動画をSNSの日記に貼ることが出来ます。[[BR]]
     61 これが通常小窓形式と呼ばれる形式で、小窓タグと呼ばれるタグを入力してYouTubeの動画をSNSの日記に貼ることができます。[[BR]]
    6162 また、この通常小窓形式の強みとしては、この後に説明するURL2CMD形式では実現不可能な小窓を表示できるという点です。[[BR]]
    6263 例えば、複数の引数を持たせて小窓のサイズを小さくしたり、大きくしたりといったURL以外から引数を与えることで違う形で見せ方をしたいというときに使用されます。[[BR]]
     
    6566 === URL2CMD形式 ===
    6667 次に、URL2CMD形式でSNSにYouTubeの動画を貼って見ましょう。[[BR]]
    67  通常小窓形式と同じくYouTubeの貼りたい動画ページにいきます。[[BR]]
     68 通常小窓形式と同じくYouTubeの貼りたい動画ページにいきます。[[BR]]
    6869 そして、その動画が表示されているURLをコピーします。[[BR]]
    6970 
     
    7576[[Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/6.png,650)]]
    7677
    77  すると、この様にURLを貼り付けるだけで簡にURLを入力するだけで外部サービスが取り込めると非常単にYouTubeの日記を貼ることが出来ます。[[BR]]
     78 すると、この様にURLを貼り付けるだけで、外部サービスが取り込むことができます。
    7879
    7980[[Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/7.png,650)]]
    8081
    81  これがURL2CMD形式です。このURL2CMDの特徴としてはURLを貼るだけで簡単に外部のサービスを取り込むことが出来るという点です。[[BR]]
     82 これがURL2CMD形式です。このURL2CMDの特徴としてはURLを貼るだけで簡単に外部サービスを取り込むことができるという点です。[[BR]]
    8283 URL2CMD形式の様にURLを入力するだけで外部サービスが取り込めると非常に使いやすいというメリットがあります。
    8384 
    84  OpenPNEとしては、通常小窓のように小窓タグを入力するのではなく、こちらのURL2CMD形式のようにURLを入力するだけで表示が出来る形式を推奨しています。
     85 OpenPNEとしては、通常小窓のように小窓タグを入力するのではなく、こちらのURL2CMD形式のようにURLを入力するだけで表示ができる形式を推奨しています。
    8586 
    8687
     
    104105
    105106 === 準備 ===
    106  準備するものはFirefox、Firebug、WEBサイト、エディタが必要です。[[BR]]
    107  他のブラウザでも開発は出来るのですが、Firefoxには優れたアドオンがあるので今回はこのFirefoxを使用します。[[BR]]
     107 準備するものはFirefox、Firebug、Webサイト、エディタが必要です。[[BR]]
     108 他のブラウザでも開発はできるのですが、Firefoxには優れたアドオンがあるので今回はこのFirefoxを使用します。[[BR]]
    108109 FirebugはFirefoxのアドオンです。このFirebugを使用して、JavaScriptのデバッグを行います。このFirebugはインストールした状態にしておいてください。[[BR]]
    109110 次に、テストをするためにFTPサイトを用意してください。これはファイルをアップロードして確認するために使います。今回はターミナルを使って解説をしますが、FTPソフトを使っても構いません。[[BR]]
     
    133134 
    134135 まず、サイズの規約です。小窓は日記に貼られることが多いので、横幅のサイズは425pxと決めています。しかし、小窓にはそれ以下のモノもあるので、厳密には425px以下を推奨しています。この425pxは日記に小窓が貼られた時にOpenPNEのレイアウトが崩れない最大のサイズです。[[BR]]
    135  しかし、縦は制限はありません。見やすさを維持している限り自由に縦幅のサイズを決めることが出来ます。
     136 しかし、縦は制限はありません。見やすさを維持している限り自由に縦幅のサイズを決めることができます。
    136137 
    137138 
     
    155156それでは実際にYouTube小窓を作ると仮定して小窓開発を見ていきましょう。[[BR]]
    156157まだ開発ツールが準備できていない人は、開発の前に戻って小窓開発に必要なツールを用意してください。[[BR]]
    157 今回はWEBサイトにSSHでアクセスして、直接ファイルを書き換えていますが、FTPソフトを使ってアップロードして開発することも可能です。適時自分の環境に読み替えてください。[[BR]]
     158今回はWebサイトにSSHでアクセスして、直接ファイルを書き換えていますが、FTPソフトを使ってアップロードして開発することも可能です。適時自分の環境に読み替えてください。[[BR]]
    158159
    159160それではURL2CMD形式小窓の開発を見ていきましょう。[[BR]]
     
    162163 まずは、何を作るかを決めます。[[BR]]
    163164 例えば、YouTube、ぐるなび、Amazonなど外部サービスを決める必要があります。基本的にはAPIが公開されている外部サービスから小窓を作る作り方が現在の小窓の主流です。[[BR]]
    164  また、Blogなどにそのコンテンツを埋め込むためのEmbedタグがある場合はそれを使用することも出来ます。[[BR]]
     165 また、Blogなどにそのコンテンツを埋め込むためのEmbedタグがある場合はそれを使用することもできます。[[BR]]
    165166 
    166167 [[Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/11.png,650)]]
    167168
    168169 
    169  次に、このAPIやEmbedタグを通常の状態で貼ることが出来るかWEBサイトで確認します。[[BR]]
     170 次に、このAPIやEmbedタグを通常の状態で貼ることができるかWebサイトで確認します。[[BR]]
    170171 YouTubeだと動画の右にEmbedタグがあるのでこれをコピーして、エディタに貼り付けます。[[BR]]
    171172
    172  次に、貼り付けたらWEBサイトにアクセスしてYouTubeが表示されるか確認して見ましょう。[[BR]]
     173 次に、貼り付けたらWebサイトにアクセスしてYouTubeが表示されるか確認して見ましょう。[[BR]]
    173174
    174175 [[Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/13.png,650)]]
    175176
    176177
    177  これで、実際にYoutTubeを貼ることが出来ました。[[BR]]
    178  実際に通常のEmbedタグをWEBサイトに貼ることができたので、実際にコーディングをしていきます。[[BR]]
     178 これで、実際にYouTubeを貼ることができました。[[BR]]
     179 実際に通常のEmbedタグをWebサイトに貼ることができたので、実際にコーディングをしていきます。[[BR]]
    179180 
    180181
     
    338339 最後に、この完成したYouTube小窓をOpenPNEに設置します。[[BR]]
    339340 小窓の設置は、OpenPNEのpublic_htmlディレクトリ以下のcmdディレクトリに完成したJavaScriptファイルを置くだけです。[[BR]]
    340  OpenPNEの以前のバージョンでは管理画面で有効にする必要がありましたが、現在のOpenPNEの最新版であれば、JavaScriptファイルをcmd以下に設置するだけで小窓を使用することが出来ます。[[BR]]
     341 OpenPNEの以前のバージョンでは管理画面で有効にする必要がありましたが、現在のOpenPNEの最新版であれば、JavaScriptファイルをcmd以下に設置するだけで小窓を使用することができます。[[BR]]
    341342 最後に、新しい小窓を追加したときは、実際に日記などにURLを貼って小窓が正常に動作するか確認しましょう。[[BR]]
    342343
     
    380381 右下にあった2Errorsがなくなり緑のチェックアイコンになったときは正常に小窓が動いているということです。[[BR]]
    381382 Firebugはこのような構文エラーだけでなく、さまざまなエラーを出力してくれるので、小窓開発の時には便利なツールです。[[BR]]
    382  また、FirebugはテストサイトだけでなくOpenPNEに設置したときも使うことが出来るので、設置した後に正常に動作しない時はFirebugで確認することも出来ます。[[BR]]
     383 また、FirebugはテストサイトだけでなくOpenPNEに設置したときも使うことができるので、設置した後に正常に動作しない時はFirebugで確認することもできます。[[BR]]
    383384
    384385== 注意点 ==
    385386
    386 小窓開発は比較的容易に開発することが出来き、簡単なソースで外部のサービスを取り込むことが出来るのが特徴です。[[BR]]
     387小窓開発は比較的容易に開発することができ、簡単なソースで外部のサービスを取り込むことができるのが特徴です。[[BR]]
    387388しかし、この小窓を開発する上での注意点があります。それは、ブラウザレベルでのセキュリティーに注意するということです。[[BR]]
    388389具体的にはXSS(クロスサイトスクリプティング)やCSRF(クロスサイトリクエストフォージェリ)などの知識を持ち、対策をする必要があります。[[BR]]
     
    397398小窓はOpenPNE特有のマッシュアップだと思っています。[[BR]]
    398399他のサービスを見てもURLを貼るだけで外部のサービスを利用できるというのはありそうでなかったので面白いなと思っています。[[BR]]
    399 これだけシンプルに外部サービスを取り込むことが出来るので、今後は小窓の適用範囲を増やしたり、小窓の露出機会を増やしてもっと小窓を使ってもらいたいと考えています。[[BR]]
     400これだけシンプルに外部サービスを取り込むことができるので、今後は小窓の適用範囲を増やしたり、小窓の露出機会を増やしてもっと小窓を使ってもらいたいと考えています。[[BR]]
    400401その小窓の露出機会を増やして小窓を使ってもらうためにいくつか今後の小窓の展開を考えているので、今回はその4つの案を紹介します。
    401402
     
    403404 === 小窓検索ポータルサイト ===
    404405
    405  OpenPNEの中にどのような小窓を使うことが出来るのか分からなかったり、どの様にして小窓を貼るのか分からないという問題があります。[[BR]]
     406 OpenPNEの中にどのような小窓を使うことができるのか分からなかったり、どの様にして小窓を貼るのか分からないという問題があります。[[BR]]
    406407 そこで、検索すると検索結果が小窓しか表示されない小窓検索ポータルサイトを作りたいと考えています。例えば、東京で検索したらYouTubeで東京に関するビデオが出てきたり、ぐるなびで東京とうキーワードに関するお店の情報を出したり、Google Mapsで東京駅を表示します。[[BR]]
    407408 そして、その横に小窓URLを表示することで、小窓が貼るという敷居が低くなり、小窓を使用する機会が増えると思っています。[[BR]]
     
    409410
    410411 === 小窓レビュー ===
    411  OpenPNEでは、レビューとしてAmazonのコンテンツを使って単体のコンテンツとして存在しています。しかし、Amazon小窓として小窓を作った時に、レビューよりAmazon小窓の方が使われる機会が多くありました。しかも、小窓にすることによって、日記、コミュニティ、プロフィール、メッセージなどさまざまな所に小窓を貼ることが出来て、便利だし、多くの場所に貼ることが出来る方が人の目に触れる機会が多いことに気づきました。[[BR]]
    412  そこで、今後はレビューのようにOpenPNEにコンテンツを取り込むのではなく、小窓としてレビュー機能を考えたいと思っています。また、現在のレビューはAmazonのレビューだけですが、今後は小窓レビューとして、ぐるなびのお店をレビューしたり、僕の好きな土地として地図を表示して場所をレビューしたりとさまざまなレビューが出来る様な小窓レビューを作っていきたいと考えています。
     412 OpenPNEでは、レビューとしてAmazonのコンテンツを使って単体のコンテンツとして存在しています。しかし、Amazon小窓として小窓を作った時に、レビューよりAmazon小窓の方が使われる機会が多くありました。しかも、小窓にすることによって、日記、コミュニティ、プロフィール、メッセージなどさまざまな所に小窓を貼ることができて、便利だし、多くの場所に貼ることができる方が人の目に触れる機会が多いことに気づきました。[[BR]]
     413 そこで、今後はレビューのようにOpenPNEにコンテンツを取り込むのではなく、小窓としてレビュー機能を考えたいと思っています。また、現在のレビューはAmazonのレビューだけですが、今後は小窓レビューとして、ぐるなびのお店をレビューしたり、僕の好きな土地として地図を表示して場所をレビューしたりとさまざまなレビューができるような小窓レビューを作っていきたいと考えています。
    413414
    414415
     
    426427
    427428
    428 == 通常小窓形式で開発する時は? ==
     429== 通常小窓形式で開発する場合 ==
    429430
    430431今回、開発の中でURL2CMD形式小窓の開発を見ましたが、通常小窓形式で開発するときはどのような手順で開発をするのか簡単に解説します。