北辞郎のiPhone対応

Pocket

Tweet

オンライン中日辞書の北辞郎をiPhoneでも使えるようにした。iPhone向けサイト構築 基礎文法最速マスター など多くのサイトを参考に（感謝）PHPで$_SERVER[‘HTTP_USER_AGENT’]を参照し、iPhoneでアクセスするとCSSが専用のものに切り替わるようにしている。

当初は実機を持っておらず、iPhoneのシミュレータであるiBBDemo2で画面の様子を確認していたのだが、なにぶんWindowsマシン上で作業をしているのでフォントがどうなるのか分からない。5分くらい熟慮して（え）AmazonでiPod Touchを購入した。来るスマートフォン時代を見据えた先行投資である。携帯をiPhoneに換えても良かったのだが、私は自宅で仕事をしているし、月々の支払いを考えるとiPodの方がコストパフォーマンスが高そうだったのでこちらにした。幸い妻が鍋を購入した時のポイントが800円くらいあり、私がコツコツ積み上げてきたアフィリエイトを全額（3000円くらい）投入したら約15000円で買えた。

Apple iPod touch 8GB MC540J/A 【最新モデル】 アップル 2010-09-02 売り上げランキング : 71 Amazonで詳しく見る by G-Tools

さて、開発のために購入したiPodだが、当初はこのおもちゃが楽しくてアプリをいろいろ落としてきたり、設定したり、ゲームで遊んだり、電子ブックや漫画を読んでみたりして時間が過ぎてしまった。実に楽しい。先日、電車に乗ったときにiPhoneを持っている人の多さに驚いたが、実際にいじってみて納得した。これは売れて当然である。Angry Birds Liteに夢中になって妻に白い目で見られたアラフォーの冬であった。

肝心の北辞郎のiPhone対応は、ヘッダーにviewport関連のmetaタグを入れ、リキッドレイアウトで画面の幅を目いっぱい使うようにしたら、そこそこ見れるようになった。後は画面を縦にしたときにあまり大きくレイアウトが崩れないように微調整を行ったくらいである。ちなみにiBBDemo2で確認したときとは、やはりだいぶ見た目が違っていた。

実現できなかったのは2点。1点目は先日追加した発音機能で、どうしてもエラーが発生するため発音に関係する要素は「display:none;」にして隠した。2点目はわりと大事なところなのだが日中混在のフォント指定である。北辞郎では中国語部分には中国語用のフォントを、日本語部分には日本語用のフォントを、ピンインにはピンイン用のフォントを使用するように指定している。中国語用には「cn」というクラスを用意して中国語用のフォントを指定し、spanタグなどのlang属性に「zh」を指定している。PC用のブラウザはほぼこれでOKなのだが、iPhoneではこうした指定に関係なくヒラギノのゴシックで表示されてしまう。うーむ、中国語用のフォントとして「STHeiti SC」というのがあるはずなのだが勝手が分からない。このあたりは今後の課題か。

追記：フォント問題解決。「STHeiti SC」ではなく「Heiti SC」にしたらきれいに表示されるようになったヽ(´ー｀)ノ

再追記：iPhoneなどのホーム画面用に作成したアイコンはこちらです。