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
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では通用しませんでした)。

このページをdel.icio.usに追加する このページをGoogleBookmark に追加 このページをBlogPeople Instant Bookmarkに登録 このページをTechnoratiに追加 Digg This Story このページをはてなブックマークする Add Yahoo Myweb このページをRedditへ追加 このページをニフティクリップに追加 このページをLivedoor クリップに追加 このページをFC2ブックマークに追加 このページををBuzzurlに追加

アイコンをクリックして、iPhoneで使えるパノラマアプリを体感しよう!
PangeaVR
PangeaVR
free
★★★★★
PangeaVR Pro
PangeaVR Pro
¥1,200-
★★★★・
Cube World
Cube World
free
★★★★★
Sphere View
Sphere View
¥230-
★★★・・
Pano Tool
Pano Tool
¥350-
★★・・・
PanoCalc
PanoCalc
¥230-
★★★・・
AutoStitch
AutoStitch
¥230-
★★★★★
TripStitch
TripStitch
¥600-
★★★・・
Pano
Pano
¥350-
★★★・・
Panorama
Panorama
¥1,200-
★★・・・
Panoramas
Panoramas
¥230-
★★・・・

PANORAMA Picker
¥115-
★・・・・
PanoLabo
PanoLabo
free
★★★★★
PanoLabo Pro
PanoLabo Pro
¥600-
★★★★・
Mosaica Lite
Mosaica Lite
free
★★★・・
Mosaica
Mosaica
free
★★★★・
Panorama Maker
Panorama Maker
¥230-
★★・・・
Panorama Camera
Panorama Camera
¥350-
★★・・・
ASKAParama
ASKAParama
free
★・・・・
MawsonsHut
MawsonsHut
free
★★★・・
EON
EON
free
★★・・・
Panoramascope
Panoramascope
¥600-
★★★・・
Topo Maps
Topo Maps
¥800-
★★・・・
iViews iViews
¥230-
★★★・・
Google Earth
Google Earth
free
★★★・・
Seadragon Mobile
Seadragon Mobile
free
★★・・・
iSynth iSynth
free
★★★★・
Hong Kong 720°
HongKong720°
¥230-
★★・・・
vCathedrals
vCathedrals
¥115-
★★★・・
360Viewer
360 Viewer
free
★・・・・

KAKUYOの携帯用コンバージョンレンズ「Clip-On」で、iPhoneの写真をもっと楽しく! (eyeMobile/イザワオプト)
魚眼レンズ(シルバー)
魚眼レンズ
(シルバー)
KSW-3

¥3,480-
魚眼レンズ(ブラック)
魚眼レンズ
(ブラック)
KSW-3B

¥3,480-
超広角レンズ
超広角レンズ
KSW-1

¥1,980-
広角レンズ
広角レンズ
KW-1

¥1,980-
接写レンズ
接写レンズ
KC-1

¥1,480-
ケータイ電話用魚眼レンズ(KSW-4)
★QTVR Diaryオススメ★
ケータイ電話用魚眼レンズ
KSW-4

¥5,300-
iPhone用ラバーパッド
iPhone用ラバーパッド
¥420-

トラックバック(0)

このブログ記事を参照しているブログ一覧: VRPodcastのiPhoneブラウズ専用サイトを開設しました

このブログ記事に対するトラックバックURL: http://pencil-jp.net/mt/mt-tb.cgi/748

コメント(4)

お久しぶりです。
この機能はCSS3のTransform機能を使っとるようで、現状ではwebkitが独自に拡張したcssのプロパティを使用してるよーです。

http://wiki.sohaya.com/index.php/CSSTransform#kc453581
あたりが参考になるかも。
でもこの機能、iPhone OS 3.0ではうまく動かないかも(涙)。

>takagiさん江
ご無沙汰してますー!(笑
禁断のcss3ですかぁ...でも、購入したmoblVRProのパッケージの中には、
cssファイルは存在しないんですよ。
たぶん、暗号化されたjsファイルに埋め込まれてるのでしょうか?
開発元に訊ねてるんですが、未だ返事が来ません。
twitterで公開質問してみようかな!

>開発元に訊ねてるんですが、未だ返事が来ません。
 このcss部分が公開されちゃったらmoblVRProのビジネスモデルが崩れちゃうからねぇ。隠すなら隠すで汎用のスタイルを定義してくれれば使いやすいのに...。
 ちなみにiPhone OS 3.0でうまく動かないかもしれないのは、CSS3のTransform機能ではなくて、画像をドラッグするjsの問題かも。言葉が足らずでした...。

>takagiさん江
mobileSafariって、そんな怪しいですかねー?
jsってそれなりにバージョンの互換性は保てると思うんですが...。
3.0に搭載される予定のWebKitって、
今のmobileSafariとjs周りはそんな変化無いように思いますが、どうでしょう?
(それともUI関係のjsライブラリって、ガラっと変わってましたっけ?)

それより、moblVRのアドバンテージは、
何と言ってもオブジェクトVRの実装ですよ。間違いないです。
未だオブジェクトVRの再生アプリが出てこないことを見ると、
余り需要が無いのかもしれませんが、
ECサイトのiPhone専用画面とかに使えるのは間違いないでしょう。
今後どんどん増えてくるんじゃないかなと、正直、狙っています!

コメントする