[3084] スマホサイトが面倒だ

投稿:  著者:


《一瞬ノーミソがエンストしそうになる》

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

■グラフィック薄氷大魔王[264]
 東京国際ブックフェア。図鑑で調べた虫。すごい錯視。
 吉井 宏



━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■Dの憂鬱[03]
スマホサイトが面倒だ

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

しかしまぁ、こっちもピンで書く限りは「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ベータをインストールしてみた
< https://bn.dgcr.com/archives/20110615140200.html
>
Dの憂鬱[01]オレのデータは雲の上
< https://bn.dgcr.com/archives/20110216140300.html
>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■グラフィック薄氷大魔王[264]
東京国際ブックフェア。図鑑で調べた虫。すごい錯視。

吉井 宏
< https://bn.dgcr.com/archives/20110713140100.html
>
───────────────────────────────────

●東京国際ブックフェア

15年ぶりくらいで行ってきた。信じられないくらいの人の多さ! ぎっしりな混み具合でした。ビジネスデーはみなさん必死。後半の土日が一般用の日らしいです。逆に一般の日のほうが空いてるのかも。

10時半前に入りましたけど、受付横で大音量でジャズ演奏で歌ってて、盛り上げたいのはわかるけど、音量が大きすぎて受付業務に支障をきたしてた。

僕にとっては、ブックフェアよりもどちらかというと同時開催の電子出版EXPOとライセンシングジャパンのほうがメイン。知り合いのブースをいくつか回ってきました。電子出版EXPOは、電子書籍デバイスや電子書籍制作関連の企業が大半。パナソニックのデバイスを触ってみたけど、軽くて見やすくてなかなかイイ。

教育ITソリューションEXPOってのも2階でやってる。おもしろかったのが出展社の半分くらいが電子版の黒板・ホワイトボード関連。プロジェクターで投影したホワイトボードに電子マーカーで書くやつ。これ、ひょっとするとデカいサイズで下絵とかスケッチとかできそう。

で、全部回るのは体力的に無理なので14時すぎには出て来ちゃったけど、国際文具紙製品展と国際雑貨EXPOなんてのも同時にやってる。たぶんこちらのほうが見物するのは楽しそう! その中でDESIGN TOKYOってのもやってるんだよ。一日で全部回ったら本当に倒れる。

ところで、ある大きなブースで、「OCRの超スゴイやつ」のデモを見せてもらった。どんなに汚い字でも、魔法のようにテキストデータになるとのことで。ちょっと興味ある。わざと汚く書かなくてももともとヘタな字で受付用紙に記入してみた。これはいくらなんでもムリだろう。

コンパニオンが受付用紙をドキュメントスキャナに通し、パソコン画面でOCR処理をする。「普通のOCRではこの程度、ほとんど使いものになりませんね」「はいそうですね」「では、そのスゴイOCR。今、読み取った用紙のデータが中国に送られております」 え??何それ??

「送られた受付用紙の内容を、今、中国でキーボードで打っております」 ええ〜〜っ!! つまり、人力OCR。いちおう、それはギャグですか? とかマジに本当なんですか? と何度も確認したんですが、マジだそうです。

すぐテキストが送られてきた。そりゃ確かに正確にテキスト化されてるけど。だまされた! と思いました。自動販売機の中に人がいた感じ。それに、勝手に外国に送るなよ! 受付用紙にはしかたなく書いたけど、勝手に外国に流されることがわかってたら書かなかった。

そこ、ものすごい広くてコンパニオン多くてブースデザインもかっこよくしてて、いかにもお金かけてるっぽい。そのビジネスモデル、儲かるんだ。クヤシイ。なので企業名は書かない。

ああっ! 無料ドリンク引換券を使うのを忘れてた!

●壁にいた虫を図鑑で調べた

先日、外の壁に朝からずっといた、小さいカミキリムシみたいな虫。2cmくらい。背中の色がきれい。オレンジ色の顔に黒いおめめがポチポチ。
< http://goo.gl/2LXo2
>

自炊PDFの図鑑でちゃんと調べてみると、アオカミキリモドキってののようです。この虫には毒があって、触ると水腫ができるそうです。触らないでよかったー。

子供の頃はよく図鑑で調べたけど、最近は調べるまで行かないなあ。っていうか、こういう虫でもなんでも、ちゃんと種類と名前があるってのが面白い。テキトーなカミキリムシっぽいヤツが、いろんなバリエーションで存在するんじゃなくて。

前回、図鑑で調べたのって2年前、「いっぱい咲いてるこのラッパみたいな花は何だ?」って調べたら、「エンジェルス・トランペット」という花だった。そのまんまやないけーっ! と思いました。

ちなみに、そのトランペットって花にも毒がある。過去2年間の統計では、僕が気になって図鑑で調べるものには100%毒があるということに。

●おまけ1 すごい錯視

Twitterで知った錯視効果がめちゃくちゃおもしろい。顔の歪み効果? っていう最近発見された錯視の一つらしいんだけど、とにかく見てみてください。二つの顔の中央の十字を見つめたままムービーが進むと、とんでもない化けものが次々に現れる。そんなバカなと巻き戻して、顔だけを見ても化けものは出てこない。すげ〜〜なコレ。自分の脳みそが信じられなくなる。
< http://naglly.com/archives/2011/07/flashed-face.php
>

●おまけ2 お気に入りコマーシャル

何度見てもおかしい! KINCHOプレシャワー「ベンチの二人」篇
< http://www.kincho.co.jp/cm/html/preshower_bench/index.html
>

【吉井 宏/イラストレーター】
HP < http://www.yoshii.com
>
Blog < http://yoshii-blog.blogspot.com/
>

先々週の土曜、「潜入!リアルスコープ」って番組の中で、「次はピクサー本社に潜入!」って出た。わくわくしながら待ってたら、そのまま番組は終わってしまった。あれ〜? ピクサー本社に潜入って次回じゃないか! 最近の番組の中の予告って、この後すぐやるのかと錯覚すること多し。番組の終わりもはっきりしないし。気がつくと次の番組になってたりする。

「ピクサー本社」でTwitter検索するとおなじく「待ってたのに来週でがっかり」って人が多かった。ってことは錯覚させるように作ってある。悪質! 日本中でいったい何人の人が競艇の訓練風景をしかたなく見ながらピクサーやるの待ってたか。15分って、×1000万人だったらどれだけの損失かと。とか怒っていたんだけど、あれっ? 結局先週土曜日、ピクサー潜入見るの忘れちゃったい。

・iPhone/iPadアプリ「REAL STEELPAN」販売中
REAL STEELPAN < http://bit.ly/9aC0XV
>

・「ヤンス!ガンス!」DVD発売中
amazonのDVD詳細 < http://amzn.to/bsTAcb
>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■編集後記(7/13)

・2009年の6月に、デジクリを1週間休んで福島県に行った。母が90歳超の姉に久しぶりに会いたいというので、兄と妹と母との4人で、福島県双葉郡の2軒の親戚に行って来たのだ。浪江町と大熊町、まさに福島第一原子力発電所事故の被害をもろに受けている地域である。彼の地を襲った地震、津波の報道を受けてまず思ったのは、原発は無事かということだった。果たして、最悪の事態となり、親戚は山形と会津若松の知り合いを頼って、それぞれ早い時期に町を出た。それが分かるまで不安な日々を過ごした。先月の母の葬儀に、彼らも駆けつけてくれたので話を聞いた。津波こそ来なかったが、目に見えぬ放射線が来た。国の対応は遅いうえにいい加減で、判断を住民に委ねる無責任なものだったという。更にくわしく話を聞いたが、本人たち以上にわたしのほうが腹が立ってなかなかおさまらなかった。やはりこれは人災である。菅災である。「原発から20〜30キロの住民に対する首相の姿勢は、福島県民の命の安全をも自分で決めろという『鬼の政治』に終始した。政治責任を巧妙に逃れる、言語道断な指示、要請を繰り返してきた。」と西岡参院議長が民主党所属議員に不信任、問責を呼びかける論文で強く非難しているが、まさにその通りだ。「首相交代に必要な時間は、菅首相が居座ることによる壮大な時間の浪費に比べれば微々たるものだ。」とも。激しく同感するが、週刊新潮で「今は辞めるな菅総理。国民が骨の髄まで懲りるまで」という記事を読んで、それもありかもとも思う。ああいう擬似市民運動の野望家を首相に選んだのは国民なんだから。(柴田)
< https://bn.dgcr.com/archives/20090629140000.html
>
2009年6月29日の編集後記 たしかにあそこに行っていた

・笠居さんの話、頷きまくり。リアルなお話が聞けるのはいいなぁ。天使の声に聞こえる、のところとか。私が提案する仕事では、IE6は切り捨てている。IE6を使う人たちは、少々崩れようがそれ以外のメリットを考えて使い続けている。開発終了してからの期間、サポート終了、IEの自動的にアップデートする仕組み、大手サイトのIE6切り捨て、アクセス者数の割合。電子入札やイントラなどで離れられない人たちは、自宅で閲覧する場合はたぶん最新だろう。IE6でしか見られないユーザは世間で言われるより少ないのだと考えている。このサイトを次にリニューアルするのはいつですか? その時にはIE6のユーザはもっと少なくなっています。IE6対策のために、新しいことができませんがいいですか? 今後広まる新しい技術との不具合が出てくるかもしれません。それよりもその予算を別のところに使いませんか? と話す。直接お客さんと話せない時は、代理店さんに入れ知恵してみるが、IE6対応は根強い。まずはお客さん側の責任者のパソコンを最新にしないと。/スマホはまだちゃんと手がけてないなぁ。笠居さんのを読むとガクブルである。一応見られますよレベルならやったが、ちょっと前は実質iPhone、iPadだけだったから、逆に楽だったのにな。デバイス戦争のくだり、既視感があるわ。Flashを使えるように、お客さんを説得した時期もあったのになぁ。Flashは得意ではないので、HTML5+CSS3の勉強だけにしたい......。/人力OCRにぶっ飛んだ。あれ? 私の頭おかしくなってる? と二度読みした。錯視ではフランケンのような頭の人や、異様に目の大きな人が。「まだまだ続くよ」の後は次回予告。その怪しいテロップが出たら時計を見る。もう騙されないぞ。ピクサー社内を見てみたい〜。(hammer.mule)