チュートリアル：フェイスブックにパノラマVRコンテンツを載せる方法
という訳で以前にこのブログで予告した、フェイスブックに自作のパノラマVRコンテンツを埋め込む方法を、ご紹介したいと思います。
その前に「フェイスブック（Facdebook）」、皆さん使ってますか？
ボク自身は元々がWeb屋なので、Twitterも早くから使ってたんですが、Facebookはそれ以上に早く登録してました（2005年の暮れかな）。けれども当時は海外のWeb関連情報を少し集めるぐらいで、余り使ってなかったんですよね。で、昨今のブームに乗じるのもイヤだったんですが、今年に入って、やたら"友達リクエスト"が増えてきて、こりゃ何かあるかなと思ったら、どうも海外のパノラマ屋さんの"主要メンバー"は皆さん使ってる感じがあったので、日本国内は放っておいて、海外のパノラマ屋さんの最新情報を交流も含めて収集できたらと思い、最近使い始めた訳です。ちなみに、このブログをご覧の方は、どうぞ気軽に友達リクエストして下さい。承認させていただきます。
すると、世界No.1パノラマVRポータルサイト「360cities」のコンテンツが、Facebookに埋め込まれているじゃないですか！これってどんな仕組みで作られてるのかなぁ？って色々調べてみたら、Facebookのパノラマ情報グループ「Panoramic Photographers on Facebook」に、チュートリアルが載ってましたので、ココにご紹介しておきたいと思います。
□ Facebook Panorama Embed Tutorial
そして、本日はこのお話を、チュートリアル和訳してご紹介しようと思います！
一応、ボクがこのブログ記事のために作ったサンプルデータは、本日のお昼過ぎに投稿したボクのFacebookの記事にあります。こちらを参照して下さい。
（ちなみに今日の話って、フェイスブックのユーザーに既になってる人が対象ですからね。なってない人は、ならないと見られないページばかりですので、お気をつけ下さい）
■ Akila Ninomiya on Facebook
http://www.facebook.com/AkilaNinomiya.QTVRDiary/posts/166994456698537
このページにアクセスしたら、サムネール画像の中の横向きの「▲」ボタンをクリックしてみて下さい。すると、画面の中で大きくなり、パノラマVRムービーが開きます。
普通は、このムービーの上のURLをクリックした時のように、別画面で開くような感じになるんですが、ならないですよね？その種明かしをしたいと思います。
工程数は4ステップです。順を追って説明していきますね。
[ STEP1 ] Facebookの開発者ページで、動画の再生許可リクエストのための"ホワイトリスト"として、自分のサイトURLを登録します。
フェイスブックは、自分のページに様々なリッチコンテンツを埋め込んだり、Webアプリをインストールすることが可能です。但しこれらに悪意があってはいけませんので、どこから来ているのかを認証させなければなりません。
そこで、自分が作成したパノラマVRコンテンツを保管しておくWebサーバのドメインを、フェイスブックに登録する必要があります。下記URLから登録して下さい。
■ 動画の再生許可リクエスト
http://www.facebook.com/help/contact.php?show_form=video_embed_whitelist
- 開発者名：パノラマの作者
- メールアドレス：パノラマ作者のメールアドレス
- ファイルのホストURL：パノラマを配信するドメイン（絶対パスで）
特に(3)は、http://から始まるドメイン名を明記して下さい。送信したら10分もしないウチに自動返信メールが返って来ます。以下のような内容のメールが返って来たら、それで登録完了です。
[ STEP2 ] パノラマVRコンテンツを、一つにまとめたSWFに仕立てて下さい。同時にサムネールも作っておいて下さい。
このフェイスブックへの埋め込みに使用するパノラマVRコンテンツのフォーマットはFlash（swf）です。それも"ひとまとめ"になっているコンテンツです。マルチレゾリューションもコントローラーもサウンドも、全て1枚のSWFファイルに収まってなければなりません。
こういう時に便利なのはPano2VRですね。何たって、何も言わなくても"勝手"にSWF１枚にまとめてくれますから！更にHTML書き出しもしてくれますし、本当に有り難いです。
さらにPano2VRなら、同時にサムネール画像も作ってくれますからねぇ。変換時間の短縮にも役立って一挙両得です。
折角なので、ウチで普段使っているコントローラーをココで公開しましょう。非商用に限り改編可能です。著作権表示とかは抜いても抜かなくても結構です。良かったら使ってみて下さい。
□ pano2vr_template sample（25KB）
他にも、krpanoを使っても出来ますね。
...と言っても、付属の「krpanotools」にバンドルされているドロップレット「MAKE PANO (NORMAL) droplet」を使うことで実現したり、ヴァーチャルツアーコンテンツであれば「kprotect」を使ってひとまとめのSWFを作成することが可能です。どちらにしろ、ちょっぴり面倒な手順を踏まなければならないことを考えると、ココはPano2VRの方が一枚上手って感じでしょうか。
[ STEP3 ] 上記で作成したSWFを埋め込むHTMLファイルのMETAタグに、Facebook掲載用タグを追加して下さい。そしてサーバにアップロードして下さい。
パノラマVRコンテンツを作成した時に一緒にHTMLを生成しておきましょう。するとそのページを開くと普通にパノラマVRコンテンツを開くことが出来ます。しかしこれではただ単なるページです。そこにフェイスブックに掲載できる"おまじない"的な最適化コードを埋め込みます。殆ど全てをMETAタグで入れますので、場所は<head>〜</head>の間に記述します。中身は以下の通りです。
今回作ったサンプルで、実際にPano2VRで書き出したHTMLファイルに加えてみると、以下の通りとなります。
「image_src」「video_src」は、実際に上げるサーバのURLを絶対パスで記述します。
またコンテンツのサイズは350×470pxがほぼ最適なんじゃないかなと思いますので、このまま使ってみて下さい。
なので、思案して記述するのは、タイトルと説明文だけですかね。
一連の作業は全て手入力になりますが、上のMETAタグのひとまとめをテキストエディタでコピペしておいて、保存しておくと良いでしょう。
[ STEP4 ] フェイスブックの投稿欄に、アップロードしたHTMLファイルのURLを記入して下さい。
すると、投稿したコンテンツのURLと、コンテンツの題名／説明文と、そしてコンテンツのサムネールが表示されます。
そして「シェア」ボタンをクリックすると、出来上がり！
さぁ、みなさん是非チャレンジしてみて下さい。質問やご意見ご感想は、ぜひ「パノラマニア，フォーラム」をご活用下さい！
そしてフェイスブックをもっと活用してみませんか？！
ちなみにボクは、この技術を使ってMovableTypeのテンプレートを作って、VRPodcastのFacebook埋め込み用ページを作ろうかなと思っています。
さらに、現在思案中の日本発のパノラマ投稿サイト「パノラマニア，ワールド」で、フェイスブックへの埋め込み実装も可能になるんじゃないかな、と思っています。
両方とも、とっても簡単な実装なので、あとは...やる気だけっす（それが一番問題という話も）
トラックバック(0)
トラックバックURL:
( 2011年7月31日 17:17 )
早速、トライしてみましたが、http://www.facebook.com/help/contact.php?show_form=video_embed_whitelist
のページがHELPのトップページしか出ないのですが、サービスが変わったのでしょうか、是非アドバイスをお願いいたします。
( 2011年7月31日 21:47 )
必要がなくなりましたhttp://www.facebook.com/groups/panoramicphotographers/doc/?id=172042586173194
( 2011年8月 1日 10:52 )
T-Photoworksさま
早速のコメントをありがとうございました。
英文なのでまだ完全に理解できていないのですが、メタタグを付けてリンクを張れば良いと推察していますが、。。。
これから訳してみますね。ありがとうございました。
( 2011年8月 1日 17:40 )
ありがとうございました。
メタタグの追加だけで動きました。
( 2011年8月 1日 20:09 )
＞塚本逸彦さん江
初めまして、ようこそようこそ。
＞T-Photoworksさん江
ご無沙汰しております。
7月はちょっと体調不良で“ど〜んより”してたのですが、
8月に入ったことで、気分的にはちょっと上がってきた感もあり、
先日からコメントいただいていた件、
調べようと思っていたら…
どうやら、EMBEDタグの埋め込みだけで、
利用できるようになったみたいですね。
ホワイトリストの登録が面倒だったので、
この手順が無くなったのは、とっても有り難いです。
ハードルが大きく下がった感じですね〜！
ちなみにこの方法ですが、
krpanoやPano2VRのような、
FlashとHTML5を併用できるプレイヤーでは、
PCでもiOSでもどちらでも見られるんですよ。
こちらも併せてお試し有れ！
( 2011年8月 3日 17:59 )
Krpanoも可能なんですね。
やはりプロテクトはかけないとHTMLの中身が見られてしまうのでしょうかね？
( 2011年8月 4日 11:13 )
ninomiyaさん
「krpanoやPano2VRのような、FlashとHTML5を併用できるプレイヤーでは、PCでもiOSでもどちらでも」とのことですが、swfのところで指定するのはflashファイルを指定するのでしょうか。