VRPodcastのiPhoneブラウズ専用サイトを開設しました
えーっと...実はこの1ヶ月半の間、仕事が山のように詰まっていて、ニッチもサッチもいかない状況でした。
そんな中、ちょっと公言は出来ないんですが、あるところのiPhone用サイトを作成しておりまして、せっかくそのノウハウをGETしたので、ついでにウチの「VRPodcast」のiPhone専用サイトを作ってみたりしました。これ、かなり特殊なことしてるので、ココでご紹介します。

■ VR Podcast - 普段着の京都の360°パノラマ風景をあなたのiPodの中に(「Safari for iPhone」専用サイト)
http://pencil-jp.net/vrpodcast/i/
さて、iPhoneのデフォルトブラウザでもある「Safari for iPhone」で、上記URLを開くと、最新記事から過去50エントリーのリストページが出て来ます。
最下段には月別アーカイブ(過去1年半分)が出て来ます。
カテゴリーアーカイブもイケそうな感じですが、まだやってません(そのうちやります)。
で、投稿記事ページを開くと、タイトルの下に関連リンク先とカテゴリーがあって、その下に四角い画像が見えます。
これを指でドラッグしてみて下さいヨ。
...そう、ストリートビューのようなドラッグインターフェイスですが、パノラマVRコンテンツになってるでしょ!
後日改めてこのブログでご紹介しますが、Safari for iPhoneでパノラマVRコンテンツを実装するJavaScriptライブラリ「moblVR」の有料プロ版を導入したからです。
どんなことが出来るのか、ご覧になって下さい。

■ moblVR - Go There From Anywhere
http://moblvr.com/
※iPhoneで見られるデモサイトはこちら⇒http://www.moblvr.mobi/
ちなみにココ、トップページはPCでも見られますが、投稿記事はPCでは見られません。
(今回導入した特殊なプログラム「moblVR」が入っていて、iPhone以外のブラウザでは読み込めないようになっているからだと思われますが、どうしてそんなことしたんですかねぇ?)
無料版と有料版があるんですが、ボクの場合、更新コンテンツの再生エンジンとして使用するので、いちいち同じファイルをサーバにアップしたりする無駄を極力減らしたかったので、有料版を導入したりしています。
無料版は、"取り敢えず載せる"ことしか出来ないんですが、有料版はかなり面白いオーサリングが出来ます。
ただし開発が行われたばかりで、まだまだ機能としては不完全なところが多いです。特に画面デザインのカスタマイズ性が非常に悪く、肝心なCSSのID/クラス名が分からなかったりして、今回は特にトライ&エラーでなんとか"凌いだ"んですが、今のところはこれが限界かな(開発元に教えてくれるように言ってるんですけどねぇ...なかなか答えてくれないです)。
例えば...
・コンテンツのロード時に画像が読めていないです。これ、オリジナルのロゴを貼付けられるようになっているんですが、外部フォルダから読み出すコトが出来ずに困っています。
・ピンチでの拡大縮小を「VR Podcast(Safari for iPhone)」でやると、レイアウトの関係上、なんだか変なことになってしまったり...。
ウチのサイトでは未だ"α版"と言ったところでしょうか。
但し、twitterで先行してお話してたりして、既に日本国内でも何人かが実装実験を始めています(この方とか)。
iPhoneと言えば、PangeaVRとCubeWorldによってパノラマコンテンツブラウザの地位は確立されていますが(Androidのパノラマビューワーは、ボクの友人が現在開発中だそうです...期待して待ちましょう!)、iPhoneAppをダウンロードしなくても見られるのは、とっても便利だと思います...人に伝えやすいしね。
moblVRの説明は、後日しっかり行います。
オフィシャル以外できちんと説明してるサイトは、海外でも殆ど無いので、開発元と協業して、詳細なチュートリアルを行えればと思っています。
(なんだか去年のPTGuiみたいやな)
ご期待ください!

サイト開設ついでに、WebClipアイコンも作っちゃいました。上から2段目の右端にあるのが、今回の「VRPodcast」のアイコンです。
サイトを開いた時に画面下中央の「+」マークをタップして「ホーム画面に追加」を選ぶと、ホーム画面のアイコンリストの空いているところに配置されます。お試しアレ!
ちなみにこのアイコン、陰無しフチ無しで作りたかったんですけどねぇ...Safari for iPhoneからできる陰無しフチ無しWebClipアイコンの生成方法をご存知の方、教えて下さい(アプリのアイコンの陰無しフチ無しの方法は分かったんですが、その方法はSafariでは通用しませんでした)。
トラックバック(0)
トラックバックURL:


( 2009年6月 2日 07:49 )
お久しぶりです。
この機能はCSS3のTransform機能を使っとるようで、現状ではwebkitが独自に拡張したcssのプロパティを使用してるよーです。
http://wiki.sohaya.com/index.php/CSSTransform#kc453581
あたりが参考になるかも。
でもこの機能、iPhone OS 3.0ではうまく動かないかも(涙)。
( 2009年6月 3日 03:48 )
>takagiさん江
ご無沙汰してますー!(笑
禁断のcss3ですかぁ...でも、購入したmoblVRProのパッケージの中には、
cssファイルは存在しないんですよ。
たぶん、暗号化されたjsファイルに埋め込まれてるのでしょうか?
開発元に訊ねてるんですが、未だ返事が来ません。
twitterで公開質問してみようかな!
( 2009年6月 3日 10:04 )
>開発元に訊ねてるんですが、未だ返事が来ません。
このcss部分が公開されちゃったらmoblVRProのビジネスモデルが崩れちゃうからねぇ。隠すなら隠すで汎用のスタイルを定義してくれれば使いやすいのに...。
ちなみにiPhone OS 3.0でうまく動かないかもしれないのは、CSS3のTransform機能ではなくて、画像をドラッグするjsの問題かも。言葉が足らずでした...。
( 2009年6月 4日 08:18 )
>takagiさん江
mobileSafariって、そんな怪しいですかねー?
jsってそれなりにバージョンの互換性は保てると思うんですが...。
3.0に搭載される予定のWebKitって、
今のmobileSafariとjs周りはそんな変化無いように思いますが、どうでしょう?
(それともUI関係のjsライブラリって、ガラっと変わってましたっけ?)
それより、moblVRのアドバンテージは、
何と言ってもオブジェクトVRの実装ですよ。間違いないです。
未だオブジェクトVRの再生アプリが出てこないことを見ると、
余り需要が無いのかもしれませんが、
ECサイトのiPhone専用画面とかに使えるのは間違いないでしょう。
今後どんどん増えてくるんじゃないかなと、正直、狙っています!