peacepipe

先週iPadが事務所にやってきてtrico interactiveのサイトをみてFlashが表示されてないのを見て、やっぱりこれではダメだねって事でiPadでも見れるように調整しましょうという話になりましていろいろやってました。まぁFlashをちょろちょろっと使ってるので、どうしても新しく作る必要があるので調整というよりiPad用のページを作るって事になったんですね。

まずは既存サイトとiPad用のページの振り分けって事なんですが、流れとしてはよく携帯サイトでやるような事なんですけど、うちのサイトトップページしかないって事とWordpressで作ってるって事でテンプレート分けしてユーザーエージェント別で読み込むテンプレートを変えるって事にしてみました。

1. PHPでユーザーエージェントを判別
2. ユーザーエージェント別で読み込むテンプレートファイルを変える

って感じですね。iPadだけってするのもなんだったので「Mobile」って文字列で判定してます。だからiPhoneもiPad用のページが表示されます。まぁiPhoneは画面が小さいからiPhone用のを作るのがベストだとは思うんですけど、うちのサイトをiPhoneで見る人なんかいないだろうって事で保留にしました。やっぱそれなりに時間かかるんで、きるところはきっていかないとね。これでページの割り振りもできたんで、さー作りますよって段階に移ってですね、iPad用なんだから左エリアにメニュー固定で右エリアにコンテンツを表示してスクロールできるようにしたいって話になったんですよ。で、まーやったことなかったけどそれくらいできるでしょうって思ってはいはいって言って作業に取りかかったら、これができねーできねーって事なんですわ。

普通ページに要素を固定する時はCSSの「position:fixed」ってするとサクっとできるんですけど、なんかiPadのSafariでは「position:fixed」は動作しないんです。なんだよーバグかよー直してくれよーって思ったら、これ仕様なんですね…（まー英語そこまで読めないんで違うかもしれないんでサイトで確認して自分で判断してください)
そっかーできないのかーって事で違う方法を探す事に…

で、CSSが無理ならJavaScriptでしょう！って事でありました「iScroll」。

やーよかったよかった。って事でこれで作り始めて一通りできたなーって思って、よしプレビュー！左メニューは固定で右エリアがスクロールと、うんうんちゃんと動いてるなよしよし。できたぞー良かった良かったサクサクですわースクロールだけじゃなくもちろんズームもっと…お？あ、あれ？できない？

ズームインとかアウトができなくなってしまってるじゃないですか！

なんかおかしな事しちゃったかなーといろいろ試行錯誤して最終出た結論が「iScroll」を使うとデフォルトの操作がキャンセルされるらしいということ。

デフォルトをキャンセルしてJavaScriptで擬似的にタッチの位置をとって要素をスクロールしてるので、ピンチとかズームとかしたかったらそこも自力実装しなさいよって事ですよ。しかし「iScroll」はそこの機能はなかったんです…かなり理想に近かったけど、ズームができないのはちょっと厳しいので「iScroll」の使用を断念する事に。

うーん…自分で一から作る？って道がそれていってしまうし、ちょっと時間がないのでそれは置いといて、最後の望みでインラインフレームとか試してみても結局撃沈。そのまま読み込んだ内容分が表示されて左メニューもそのままスルスルっといなくなってしまいました。

そんなこんなで試行錯誤くりかえしてると、もちろん時間かかってるんでまわりから「できたー？」って声がどんどん迫ってくるんですよ…iPadで見れない事に対する早急な対応って事で始まってたので、簡単だと思ってた左メニュー固定が以外に難くってもうちょっと時間が欲しいって伝えたら、「じゃー固定じゃなくっていいよ」ってお言葉。

あー、技術屋としては負けを意味する悲しいお言葉を頂いたんですが、この場は仕方ないと割り切って涙をこらえて左メニュー固定の機能を断念しました。そこなくなったら後はサクっと作ってチェック。はい公開。

って事で、実は今週の月曜には公開してました。すぐにブログって思ったけどなんか急に忙しくなって結局週末になってしまった…

事務所のサイトは実験サイトにもなってるんで新しい事もいろいろさせてもらえるんですけど、やっぱりやってみるといろいろでてくるでてくる。ページ内固定は正直もっと簡単な方法があるんだろうと思うんですよね。でも調べても情報が全然ないし他の人に「知ってる？」って聞いても「やった事ないからわからん」って返ってくるんで、自分が試して出来た事できない事で判断するしかないんですよね。一回作ってみるってやっぱ大切ですね。技術不足でできないって一番悲しい…この敗戦をバネに次はちゃんとオーダーに答えれるようにもっとノウハウをためていくのです。

いやーでましたね。事務所で買ってもらったんですけど発売日に届いてありがたやありがたやです。でも、アメリカの発売の時に買ってきて、すでにいろいろレビューしてるかたが多いので発売日に届いても遅ればせながらって感じがなんとも不思議な感じがするんですが…このサクサク感やっぱいいですね！（聞き飽きたわ！ってね）

まぁ、昨日１日使っただけなんですけど、キッチンで洗い物してる後ろでustreamを流したり、radikoをつけてラジオみたいに使ってみたり、できる事はノートよりも全然少ないんですけど、もう十分すぎます！。特にショッピングサイトを見てる時は今までと違った感覚があって「これは良い！」と声がでてしまったほど感動しましたよ。マウスじゃなくって画像をタッチする事で商品を見る、しかもソファーでゴロゴロしながら商品を見る事が、ノートでショッピングサイト見てた時とこれほど違うものかと。いやー文章にすると違いが全然わからないですね。この日本語能力不足が嘆かわしい…ま、とにかく全然別ものなんですよ。

「タッチ（指）」と「クリック（マウス）」
これが本当に大きな違いなんだなーとあらためて実感。

で、まぁiPadがでてというか新しい端末がでてくるとWeb業界では毎回めまぐるしく動きがあるんですが、もうWebの人間以外でも知ってるくらいの代表的な話題、「Flashが動かない」「FlashよりHTML5」この問題が実際どーなのかってことですよ。いろんな人と顔を合わせるたびに「どー思います？」といろいろ意見交換とかしてたんですけど答えなんてでるわけもなく、現物がない状態であーだこーだ言ってもしゃーないってことですよ。で、実際ものを触ってみて思ったのは、１ユーザーとして個人的にはFlashが動かなくてもそないに困らんっていうのが正直な印象。Webサービスとしてきちんと運営してるところはFlashがなくてもアプリ出したりしてくれてるので特にストレスなく使えるし、広告系でも代替画像を用意してるところはそこがFlashってわからないくらい違和感なくサイトが見れる。

でも、たまにサイトを見てておやーっ？と思う事は、Flashが表示されるところが真っ白になってるサイトがあったりなかったり、スカスカのページやなーんも表示されないサイトがちらほらあるわけなんですが…これは見てる人からしたらガッカリ。「Flash使ってますよ」「この環境では見れないんです」って何かしらアナウンスが欲しいなーって感じです。Flashの超絶普及率が予算削減もあり未対応のままなんだろうけど、ちょっとしたテキストがあるだけで仕方ないって思ってもらえるんじゃないかなと。っていいながらこの前リニューアルしたtrico interactiveのサイトもFlashの部分真っ白なんですけど…すんません…よかったらiPadでアクセスしてみてください。ガッカリしますから。（2010.06.05：事務所のサイトをiPadでもみれるようにしました。）

あとFlashが使えないんだったらJavaScriptで作ればいいんじゃないって話もでてたんですけど、正直JavaScript処理スピード全然遅いやん！って事でまだまだFlashの代わりになるとは思えません…

iPadがでた事でインターネットの世界が劇的に変わるってわけではないと思うけど、それぞれに特化したサイト作りというのが取り急ぎ求められるのかなーと思う、そんなiPad体験記でした。

お金できたら自分も買おうっと。