北辞郎のiPhone対応

Pocket

オンライン中日辞書の北辞郎を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 【最新モデル】 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などのホーム画面用に作成したアイコンはこちらです。

7件のコメント

  1. iPhoneでもっと便利に使いたいなあ、と思っていた矢先のご対応で嬉しい限りです。
    ホーム画面用のアイコンも設定されてみてはいかがでしょう?
    (「北」一文字やトップの龍の画像になると素敵だと思います)
    下記ご参照下さい。(おせっかいでしたらすみません)

    http://web-tan.forum.impressrd.jp/e/2010/06/15/8178

  2. ホーム画面用のアイコンについてご教授いただきありがとうございました(^-^)
    画像をアップロードするとアイコンを作成してくれるサイトがあるのですね。
    画像を用意して近日中に対応したいと思います。ありがとうございました!

  3. Ctrans様

    当方はAndroid携帯で北辞郎を愛用しているものです。

    AndroidでもiPhoneと同様に使い勝手がよいのですが、残念ながらiPhoneの『Web Clip』と同様の機能がないため、ホーム画面上にアイコンが作れません。

    そこで恐縮なのですが、もし可能であればCtrans様が作成されたアイコン画像をブログに掲載していただくかメールでご送付いただけないでしょうか?

    よろしくお願いします。

    1. Park様

      Android携帯で北辞郎をご利用いただいているとのこと、ありがとうございます。
      Android端末を触ったことがなく北辞郎の挙動がこれまで確認できていなかったのですが、無事動作しているようでたいへんうれしく存じます(^-^)

      iPhoneなどのホーム画面用に作成したアイコンについてですが、本エントリの最下部にアップいたしました。
      なにぶんAndroidの勝手が分からないため、不適切な部分がありましたらご指摘いただけますと幸いです<(_ _)>

  4. Ctrans様

    早速のご対応ありがとうございます!
    ホーム画面がこれでしっくりきます!

okamoto へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください