Dの憂鬱[03]スマホサイトが面倒だ/笠居トシヒロ

投稿:  著者:  読了時間:8分(本文:約3,900文字)


ピン原稿第二弾だ。前回のまつむらさんのテキストを見ると、連載タイトルが「ユーレカの日々」に変わっている。ユーレカってなんだよ、なんか聞いたことあるけど、と思ってぐぐってみると、アルキメデスが風呂に入って叫んだ言葉だとある。ということは「熱っ!」とか「うぇぇぇーーーい」とか、ひょっとすると「溺れるーっ!」とかそんな意味だろうかと思うがよくわからない。

しかしまぁ、こっちもピンで書く限りは「MKチャット」ではカッコがつかないので、なんか適当な連載タイトルをひねり出さねばならん。で、考えた。

最近僕は、自分で制作することよりも、他のクリエイターに仕事を振って、自分ではディレクションに回るということのほうが多い。それによって、案件に企画・立案の段階から関わるという、これまでにはあまりなかった要素が入ってきて、それはそれなりにスキームとして面白いのだが、これまでになかった悩みも比例して増える。

でもまぁ、こういうところからネタを拾うことがこれから増えるんだろうな。とりあえず、仕事の愚痴みたいなのを適当に書き出しに持ってくれば、5000文字くらいの原稿は何とか書けるだろう。というわけで、連載タイトルは「Dの憂鬱」とさせてもらうことにした。「D」はディレクターの頭文字で、大福餅でも団子っ鼻でもない。当然「頭文字D」とも関係ない(読んだことないけど)。

さて、Webの制作というのは、関わったことがある人には自明だろうが、対応するデバイスやブラウザなどが少なければ少ないほど楽だ。「この動作に関しては、Macは切り捨てていい」とか「この部分の表示はIE6以下は対応しなくてもいい」とか言われると、天使の声に感じる、、が実際にはそんな甘い話はまずない。それどころか、最近ではWebコンテンツを閲覧できる環境がドンドン増えているので、PC以外のデバイスに対応しなければならないことも多い。

とくに多いのは「スマホ(スマートホン)対応」というリクエストだ。クライアントは、十把一絡げに「スマホ」と言ってくれるが、そんな簡単な話でもない。とくにインタラクティブな要素を含むコンテンツで、これを言われたりすると、一瞬ノーミソがエンストしそうになる(おおげさ)。

てなわけで、今後ノーミソのエンストを防ぐためにも、スマホ対応というものについて自分なりにまとめてみたい。



で、スマホとはなんぞや?

Wikipediaによるざっくりとした説明だと「PDA機能が付いた多機能携帯電話」ということらしい。現在、スマホと呼べるデバイスには、大きく分けて5つのOSがある。まずはAppleのiPhone(iOS)。次にGoogleのAndroid。海外では最も勢力を誇る(誇っていた?)BlackBerry。スマホの先駆けとも言えるNokiaのSymbian。そして、そのNokiaが今後Symbianからシフトする、と発表したMicrosoftのWindows Phoneだ。

ただ、海外では絶大な人気があったBlackBerryもSymbianも、日本ではさほど普及しなかった。Windows Phoneの前身であったWindows Mobileも、その使いにくさ故に一般に広まることはなかった。Windows Phoneは、最後発ということもあり、また、Windows Mobileの悪しき記憶がはびこる中、今後の動向にどう関わってくるのかはよくわからない。

というわけで、幸いにも現状日本のWeb制作において、考慮しなければならない「スマホ」は、iPhoneとAndroidに限られることになる。さて、ではこのふたつで同じコンテンツを見せるために、どうすべきか。まずはふたつの違いを把握しなければならない。

iPhoneの場合、ブラウザは元々搭載されている「Safari」だ。他にも色々なブラウザが配布されているが、基本的にレンダリングエンジンは、Safariのモノ(WebKit)を使うので、Safariでちゃんと表示・動作すれば、まず問題ない。かつ、Safariは、MacOSのデフォルトブラウザでもあるので、iPhoneのSafariで動作するものは、基本的にMacのSafariでも動作する。

では、Androidの場合はどうだろうか。Androidには、デフォルトで「Browser(ブラウザ)」という素敵な名前のブラウザが搭載されている。これは、GoogleのPC版ブラウザChromeと同じWebKitをベースにしているが、何故かChromeではない。タブブラウズの機能も搭載されていないし、Safariのように、PCとスマホ間でブックマークを同期することもできない。

だからなのか、Androidユーザは、デフォルト以外のブラウザをインストールして使っていることが多い。最も人気があるのは、軽くて高機能なDolphin Browser HDだ。
※機能の説明に字数を割けないので、興味のある方はこちらを参照して下さい。
< http://appmax.jp/archives/65674142.html >
もう一つ人気があるのは、ケータイサイトにも柔軟に対応できる国産ブラウザAngel Browser。
< http://octoba.net/archives/20110707-android-1803.html >

どちらも、ユーザーエージェントの変更が可能で、どんなサイトも過不足なく見ることができるが、残念ながら、HTML5+CSS3によるインタラクティブなコンテンツの表示には癖があり、iPhoneやiPad用に作成したサイトがうまく動作するかというと、確率はフィフティ・フィフティといった感じだ。

Android向けのコンテンツは、Flashで作ればいいってなもんだが、Android2.2から動作するようになったFlashPlayer10.1〜も、一部の機種では動作しない(僕の持っている、HTC Ariaでは、CPUのスペック不足のため動作しない)ため、FlashLite4で作成する必要がある。で、iPhoneでは、当然のことながら、Flash自体が動作しない。

まとめてみると、PCも含めたインタラクティブ・コンテンツ作成の場合、以下のようになる。
※この場合、Flashでは可能だが、HTML5+CSS3では不可能という物もたくさんあるので、制作技術の上限はHTML5+CSS3で作成できるもの、という制限付きの話となる。

・PC版は、HTML5+CSS3では、Safari・Chrome以外のブラウザでまともに動作しない。なんといってもIEで動かないのは致命的なので、Flashで作成。
・iPhone及びiPad版は、HTML5+CSS3で作成。
・Android版は、HTML5+CSS3でつくると、ブラウザごとの動作が保証できないので、FlashLite4で作成。
・さらに、このコンテンツにアクセスしてきたデバイスを判定して、それぞれ最適なバージョンへと振り分け誘導する仕組み(PHP、Javascript、.htaccessなど)が必要となる。

※裏側のサーバーサイドでゴニョゴニョすればなんとかなるんじゃねーの?と思われた方もいるかもだが、その話は長くなるのでまた今度。

将来的に、どんなブラウザでも、HTML5+CSS3の表示や動作が保証されるようになるか、iOSのSafariで、Flashコンテンツが表示できるようになるか、どちらかの方向に進んでくれればいいんだが、どっちも望み薄だ。

Web制作者にとっての「癌」ともいえるIE6は、MSのサポートが完全終了した今でも、根強く企業内のPCに残っていて、まだ当分は駆除されそうにないし、スティーブ・ジョブスが死にでもしない限り(かつ世間一般の欲求がAppleの方向転換を迫らない限り)iOSでFlashが動作する日も来ないだろう。

クライアントにしてみても、いつまでも一つのコンテンツのために、これまでの2倍近い予算を割き続けるわけにはいかないだろうし、我々制作者だって、予算以上の労力をかけ続けるわけにはいかない。結局のところ、このデバイス戦争に勝利したOSに追随するしかないのか。

まったく新しいインタラクティブ技術が登場し、デバイスやOSを問わず、同じコンテンツをらくらく表示できるように。。。。なればいいのになあ。

【笠居 トシヒロ/WEBディレクター、デジハリ大学院客員教授、京都嵯峨芸術大学講師】

iOS5ベータ2がリリースされたので、さっそくアップデートしてみたが、全然メールの不具合が解消されていないので、仕方なく4.3.3にダウングレードした。5の時とったバックアップは、4では復元に利用できないので、いくつかのメールと写真がiPhone本体から消えてしまった。まぁしょうがないけど。ダウングレードの手順をメモっておいたので、必要な方はこちらを参照下さい。
< http://mad-c.tumblr.com/post/7178509113/iphone4-ios5-beta-4-3-3 >
< http://www.mad-c.com/ > < kasai@mad-c.com >

Dの憂鬱[02]速報:iOS 5.0ベータをインストールしてみた
< http://bn.dgcr.com/archives/20110615140200.html >
Dの憂鬱[01]オレのデータは雲の上
< http://bn.dgcr.com/archives/20110216140300.html >