90秒で理解するiPhone JavaScript（マルチタッチ編）

2008/7/28 月曜日 Posted in iPhone | 10 Comments »

仕事でiPhone向けサイトを作ることになるかもしれず、色々と調査中です。 まずはiPhoneならではの機能ということで、マルチタッチについて調べてみました。 ここまでわかったことをメモ代わりに記載したいと思います。 今回はひとまず座標の取得までです。 ゆくゆくは、こちらのムービーのように凝ったギミックを作りこみたいと思っています。   マルチタッチの座標を取得するのは思ったより簡単で、抑えるポイントは4つだけです。 Safari自体のスクロールや拡大・縮小は動作しないようにした方が無難 タッチのイベントは、リスナーまたは「onTouchXXX」から取得 タッチ数は「event.touches.length」で取得 座標は「event.touches[i].pageX (or pageY)」で取得   1. Safari自体のスクロールや拡大・縮小は動作しないようにした方が無難 マルチタッチを行う前の下準備として、Safari自体のスクロールや拡大・縮小を、動作しないようにしておいた方が無難です。 対象をドラッグしようとしているのか、画面をスクロールしようとしているのか、プログラム側で判断するのは難しいためです。 今回は次のように調整しました。 <meta name="viewport" content="width=480, user-scalable=no, maximum-scale=0.6667" /> 横スクロールと拡大・縮小を禁止しています。　→　参考エントリ 縦スクロールは、「event.preventDefault();」で抑止できるようです。 （後述のサンプルプログラム内でご確認ください）   2. タッチのイベントは、リスナーまたはonTouchXXXから取得 タッチ関連のイベントには onTouchStart onTouchMove onTouchEnd onTouchCancel の4つがあり、それぞれonClick()などと同じような形で、イベントを取得できます。 またリスナー方式の場合は、 document.addEventListener("touchstart", touchHandler, false); document.addEventListener("touchmove", touchHandler, false); document.addEventListener("touchend", touchHandler, false); document.addEventListener("touchcancel", touchHandler, false); のような形で利用します。 touchcancelはどのようなケースで使われるのかは不明です。 もしご存じの方がいましたら教えてください。   3. タッチ数は「event.touches.length」で取得 これは簡単です。 タッチ情報は「event.touches」に配列の形で格納されますので、その数を見ればOKです。 （event変数が何かについては、後述のサンプルプログラムでご確認ください）   4. 座標は「event.touches[i].pageX (or pageY)」で取得 タッチ座標は「event.touches[i].pageX」のような形で取得します。 シングルタッチの場合は「event.touches[0].pageX」。 ダブルタッチの場合は、上記に加え「event.touches[1].pageX」にも値がセットされます。 最大5個（touches[4]）まで機能するようです。   サンプルプログラムは下記の通りです。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=480, user-scalable=no, maximum-scale=0.6667" ... Read more..

CSSの変更だけでPCサイトをiPhoneに対応させる方法

2008/7/15 火曜日 Posted in iPhone, 記事紹介・リンク | No Comments »

旬のiPhoneネタをご紹介します。 CSSを変更するだけで、既存のPCサイトを「iPhone」「iPod touch」に対応させる方法が、スライドで公開されています。 7/4にアップルストア銀座で行われたイベントで使われたスライド資料のようです。 →　SwapSkills公式サイト　7月4日　アップルストア銀座無料イベント！開催テーマ『誰でも出来るiPhoneのウェブサイト』 [swapskills-allweb.blogspot.com] おそらくこの資料のベースとなったスライドで、内容はやや異なっていますが、スライド内で紹介されているタグを抜き出して解説していますので、こちらのページの方がわかりやすいかもしれません。 →　Kawa.netブログ　 PCサイトをCSSだけでiPhone (iPod touch)に対応させる方法 [kawa.at.webry.info]   iPhoneからのアクセスかどうかを判定するには、ユーザエージェントから判断するのではなく、linkタグのmedia属性でCSSを切り替えるのが良いようです。 他にも画面幅を調整する方法や、指タッチでも使いやすくするコツなどが紹介されています。 言葉での解説ありきの資料のため、ややわかりづらいところがありますが、iPhone対応サイトを作ろうと考えている方には役に立つと思います。 どこかに発表時の音声やムービーは公開されていないのでしょうか？ ご存じの方がいましたら教えてください。   関連： ソフトバンクのiPhone3Gを買ってきました ソフトバンクのiPhone発表に関する記事をまとめてみました 【速報】iPhoneはソフトバンクから発売されることになったようです Read more..

ドコモのCSSをインラインに埋め込んでくれるPHPライブラリ「toInlineCSSDoCoMo」(続き)

2008/7/10 木曜日 Posted in SoftBank, 記事紹介・リンク | 4 Comments »

昨日から、ドコモで外部CSSやスタイルタグが利用できるようになるＰＨＰライブラリ、「toInlineCSSDoCoMo」に夢中です。 読み手がかたよってしまうことを承知の上で、続編の記事を書かせていただきます。 私の作成したサイトはSmartyを使ったものが多いため、フィルタを作成しようかなと考えていたら、既に同じようなコードを書いていた方がいました。 当ブログにいつもコメントを戴いているmaru_ccさんのブログです。 →　PHPライブラリ「toInlineCSSDoCoMo」をEthnaに組み込んでみた [hatena.ne.jp]   ここでは、Ethnaに「toInlineCSSDoCoMo」を組み込む方法が紹介されています。 Ethna使いの方は要チェックですね。 ひとまず私はSmartyフィルタだけ拝借し、一部を修正して利用させていただくことにしました。   しかし実際に動かしてみたところ、幾つか問題が出てきました。 どれも「toInlineCSSDoCoMo」の問題というよりは、PEARの「HTML_CSS」の問題のようです。   1. Warningエラーが出る サイト内のHTMLの書き方が汚く、HTMLをパースする際にエラーになってしまうようです。 こちらは少しずつ書き直していくしかないですね。 ただ、「<a id="anchor" name="anchor"></a>」のような書き方でも何故かエラーになってしまうため、困っていたりします。 通常のCSSと同じようにエラーを出したくない方は、「@」でエラー抑止をすると良いと思います。 またCSSファイルが読み取れなかった場合でも、Exceptionに飛んでいってしまうため、注意が必要です。   2. 文字化けしてしまう HTMLヘッダ内の文字コード指定のmetaタグより前にtitleタグがあった場合には、文字化けしてしまうようです。 調べてみると、metaタグを先に書くのが正しいようですね。 今まで特に問題がなかったので気づきませんでした。   3. non-objectエラーで止まってしまうことがある styleタグで内部CSSを指定した場合に、152行目の「$parent->removeChild($node);」でエラーとなってしまうことがあります。 同じstyleタグの書き方でもエラーが出る場合と、出ない場合があるので詳細は調査中です。（styleタグ自体を削除すると直ります） ひとまず152行目に、「if ($parent) {」を追加し回避しています。   4. Smarty->fetchでコンテンツを取得してる場合、outputfilterでは対応できないかも 私のサイトでは、よく使う表示ブロックは、Smartyのテンプレート関数を作成し、独自タグを設定しています。 例えば、最新ニュースを表示したいときには、タグ「{displayNews num="5"}」で表示するようにしています。 （こうすると、あちこちでニュースを表示できて便利なためです） 内部ではsmarty->fetchメソッドでニュースを取得しているのですが、fetchに対してもoutpufilterが効いてしまいます。 fetchされるテンプレートは当然ヘッダ情報などを持っていませんので、outputfilterとtoInlineCSSDoCoMoとの相性は、あまり良くありません。 ということで、「ob_start([コールバック関数])」を利用し、出力直前の情報に対して、処理を行うことにしました。 コールバック関数のサンプルは次の通りです。 <?php // obフィルタの設定 ob_start('ob_filter_cssdocomo'); function ob_filter_cssdocomo($out) { require_once 'toInlineCSSDoCoMo.php'; $basedir = dirname($_SERVER['SCRIPT_FILENAME']) . '/'; try { $buf = ... Read more..

ドコモのCSSをインラインに埋め込んでくれるPHPライブラリ「toInlineCSSDoCoMo」

2008/7/9 水曜日 Posted in DoCoMo | 5 Comments »

ケータイ向けサイトを作っていく上で一番問題となるのが、ドコモ端末が外部CSSファイル読み込みや、styleタグでの内部参照に対応していないことです。 PerlではHTML::DoCoMoCSS [hatena.ne.jp] というライブラリがあり、かねがね羨ましく思っており、いつか移植したいなと思っていたりしたのですが、ついにPHPでもこの問題を解決してくれるライブラリが登場しました。 これは素晴らしすぎます。 →　Asial blog　DoCoMo向けにCSS指定をインラインに埋め込むPHPライブラリ「toInlineCSSDoCoMo」作りました [asial.co.jp] →　ゆどうふログ　勘違いのないようにtoInlineCSSDoCoMoの仕様について言っとくか [hatena.ne.jp]   oInlineCSSDoCoMo.phpは、基本的にはid:tokuhiromさんの作った上記のHTML::DoCoMoCSSをPHP用にリライトしたもので、それに若干の機能追加をしています。 とのことですので、基本的には上記Perlのライブラリを踏襲したつくりとなっているようです。 動作環境としてはPHP5.1以上とのことで、残念ながら4系で動いているサイトには使えないようです。   インストールは簡単で、 # pear install HTML_CSS で、必要なPEARライブラリをインストールして、ダウンロードしたファイルを展開するだけです。 中に入っている「sample.php」にアクセスすれば、サンプルが表示されると思います。 使い方も簡単で、表示させたいHTMLの内容を取得して、toInlineCSSDoCoMoに渡してやるだけでＯＫのようです。 <?php require_once '../lib/toInlineCSSDoCoMo.php'; $document = file_get_contents('sample.html'); try { echo toInlineCSSDoCoMo::getInstance()->setBaseDir('./')->apply($document); } catch (RuntimeException $e) { var_dump($e); } catch (Exception $e) { var_dump($e->getMessage()); } ?>   これでケータイサイトのHTML作成が相当楽になりますね。 早速、自分のサイトにも適用して試してみたいと思います。 ただ、テンプレートシステムにSmartyを使っているので、サンプルのままでは行かない感じです。 この辺りもまとまりましたら、また記事にしたいと思います。   関連： 絵文字ライブラリ「sfPictogramMobilePlugin」がバージョンアップし、PEARパッケージ化されたようです symfony用の絵文字プラグイン「sfPictogramMobilePlugin」 Asial blogで絵文字データベースと相互変換マッピングデータベースのJSONファイルが公開されています Read more..

他のケータイサイトのHTMLを参考にする際に便利な裏技

2008/6/9 月曜日 Posted in TIPS, デザイン | No Comments »

本日は、ケータイサイトのHTMLを作成する際に便利な、Tips的なものをご紹介します。 ケータイサイトはPCサイトと違って、HTMLソースを見ることができません。 たとえPCのブラウザから見たとしても、大手サイトはIPアドレスによる制限がかけられていて、ソースが見れるケースはまずありません。 ですので、HTMLがどのように作られているのかは、よくわからないことが多いと思います。 ご存じ「モバゲーTOWN」を例にご説明します。 例えば中央の点線や、「楽しもう」の上下の細い黒線は、どうやって書いているんでしょうか？ 画面上から見ただけでは、正直よくわかりません。   そんな時に役立つのが、「画像を保存」機能です。 これを使えば、CSSで書かれているのか、画像なのかがわかります。 点線は画像でした またスペーサー画像の位置もバッチリわかります。 中央にある緑のカーソルがあたった部分がスペーサー画像 モバゲーTOWNでは、トップページだけでも、10ヶ所以上ものスペーサー画像が使われていることがわかります。 （おそらくドコモ端末で、marginやpaddingが、効かないためだと思われます） 他ケータイサイトのデザインを参考にする際には、ぜひ活用してみてください。   関連： フォームでのユーザビリティ向上のポイントを紹介した記事「PCサイトとこんなに違う！携帯サイトのフォーム設計ポイントとは」 モバゲーのフレームワークがオープンソースとして公開されました ブックレビュー： 勝手サイト - 先駆者が明かすケータイビジネスの新機軸 Read more..

Next Entries »