iPhone/iPod Touch 対応サイトを作る

The Django Book (日本語) サイトをiPhone/iPod Touchに対応させてみました。iPhone対応サイトを作る方法はいくつか（iUi、Universal iPhone UI Kit、jQuery Touch等が有名）ありますが、今回はCSSのみを用いて実装することにしました。既存サイトをiPhone/iPod Touchに対応させるには一番近道だと思います。大きな変更点は3点です。
  • 画面のリサイズを無効化する
    以下のようなコードをheadタグ内のmetaタグとして追加します。

    <meta content="width=device-width; maximum-scale=0.6667; user-scalable=0;" id="viewport" name="viewport" />
  • iPhone/iPod Touch用のCSSを追加する
    以下のようなコードをheadタグ内のlinkタグとして追加します。どうやらIEはいつもどおり対応していないようなので、IE以外に読み込ませるよう ですね。iPhone/iPod Touchの画面サイズが480pxで、画面サイズが480pxより小さい場合にはこのCSSを読み込まれます。PC用のCSSを読み込むlinkタグよりも後ろに追加する必要があります。

    <link href="/css/iPhone.css" media="only screen and (max-device-width: 480px)" rel="stylesheet" type="text/css" />
  • タッチアイコンを追加する
    サイズが60px×60pxのpng画像を用意し、その画像をタッチ用のアイコンとして指定します。favicon同様、以下のようなコードをheadタグ内のlinkタグとして追加します。

    <link href="/apple-touch-icon.png" rel="apple-touch-icon" />
CSSを書く時に注意するポイントがいくつかあります。
  • PC用に横幅を固定している場合は、横幅を100%で上書きする(表示がくずれる)

    #doc{width:100%;min-width: 100%;}
  • white-spaceは改行する（white-space部分の最大長が画面幅になり、表示が崩れる）

    cite, pre {overflow:scroll; white-space: pre-wrap;}
  • 長い単語は改行する（長いURLとか書いちゃうと上記同様の現象が発生する）

    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{word-break: break-all;}
 CSSはそれを読み込んだ順序でどんどん上書きしていきます。それを利用すると既存サイトのCSSをちょっと上書きするだけで、すぐにiPhone/iPod Touch 対応サイトになります。対応するとユーザビリティがぐんと向上しますね。

コメント

コメントを投稿

このブログの人気の投稿

Python から Win32 API 経由で印刷する

Win32 API から印刷をするためには、プリンタデバイスコンテキスト (Printer DC) を利用します。具体的には以下のような順序で印刷します。 プリンタドライバからハンドルを取得する プリンタドライバのステータス API から印刷可能か同かを取得する プリンタデバイスコンテキストを作成する ドキュメントを開始する 必要であればフォント等を設定し、印字、改ページ処理などをする ドキュメントを終了する (この時点でプリンタスプールサービスに登録されるようです) プリンタデバイスコンテキストを開放する プリンタドライバのステータス API を監視し、印刷が正常に終了したかを取得する プリンタドライバのハンドルを解放する 太字の手順 (3 - 7) は Win32 API で共通ですが、それ以外の手順 (1, 2, 8, 9) はプリンタドライバに依存しているため、Python から制御したい場合はライブラリを作成する必要があります。これについては、ドライバマニュアルとにらめっこしながら ctypes.windll でがんばります・・・。プリンタ接続、用紙切れ、ミスフィード等のプリントエラーを制御する必要がなければ、書く必要はありません (排他制御が必要なプリンタを除く)。プリンタドライバ毎に変わる部分は置いといて、太字の Win32 API の部分の覚書です。 プリンタデバイスコンテキストを作成する import win32ui import win32con PRINTER_NAME = '[コンパネ -> プリンタとFAX -> に登録しているプリンター名]' PIXELS_PER_INCH = 1440 # 1 インチ毎のピクセル数 INCH_PER_POINT = 72 # 1 インチ毎のポイント数 SCALE_FACTOR = int(PIXELS_PER_INCH / INCH_PER_POINT) #　わざわざ計算せず 20 と指定する場合が多い dc = win32ui.CreateDC() dc.CreatePrinterDC(PRINTER_NAME) # 指定したプリンタ名のプリンタデバイスコンテキストを作成する self.dc.SetMapMode(win32con.MM
続きを読む

財務諸表 (Financial Statements)

※ 業務 & 英語の勉強 財務諸表 (Financial Statements) の種類 諸表名 英語表記 概要 損益計算書 Profit and Loss Statement [P/L] ※ Income Statement など様々 収益と費用の状態を表す 貸借対照表 Balance sheet [B/S] 資産、負債、純資産を表す キャッシュ・フロー計算書 Cash flow Statement [C/S] 資金の増減を表す 株主資本等変動計算書 Statements of Shareholders' Equity [S/S] 純資産の変動状況を表す 損益計算書 損益計算書とは 収益から費用を差し引いた利益を計算するためのもの 利益 (profit) = 収益 (revenue) - 費用 (expense) 損益計算書の構成 記載内容 英語表記 概要 売上高 Sales 販売した財やサービスの金額 売上原価 Cost of Sales 財やサービスを生み出すための経費 期首繰越高＋当期仕入高－期末棚卸高 - 売上総利益 Gross Profit = 売上高 - 売上原価 ※ 売上高総利益率 [ 粗利益率] (Shareholder Equity Ratio) = 売上総利益 / 売上高 販売費及び一般管理費 Selling and General Administrative expenses [SGA] 売上原価以外の企業を運営するための経費 販売費: 販売手数料、広告宣伝費など 一般管理費: 人件費、福利厚生費、交際費、賃借料、減価償却費、雑費など - 営業利益 Operating Profit = 売上総利益 - 販売費及び一般管理費 営業外収益 Non-operating income 本業以外で経常的に発生する収益 受取利息、有価証券売却益、配当金、不動産賃貸収入など 営業外費用 Non-operating expense 本業以外で経常的に発生する経費 支払利息、有価証券売却損など - 経常利益 Ordinary Profit = 営業利益 + 営業外収益
続きを読む

Django と Python 3 - #python_adv

Django-ja の方からきました。こんにちわ。さて、昨日の Ian 先生のブログ にも書いてある通り、ついに Django にも本格的に Python 3 の足音が近づいてきました。ただし現在 alpha 版が公開されている 1.5 では "実験的" なサポートで、1.6 以降で正式にサポートする予定となっています。あくまでも "実験的" であり、プロダクションでの利用は "非推奨" となっています。Django コミュニティでは、この 1.5 でサポートをテストしてもらい、そのフィードバックを呼びかけています。なのでプロダクションでの利用は 1.6 まで待ちでしょうね。また Python 3 サポートと同時に、Django 1.4 では Python 2.4 がサポートから外れ、1.5 では Python 2.5 がサポートから外れます。これで 1.7 以降から django.utils 配下が軽くなっていくんでしょうかね (現在は 3 サポートのためにさらに増えてる)。 バージョン 下位互換 Python サポート 2.5 2.6 2.7 3.2 3.3 Django 1.4 > 1.2 ○ ○ ○ - - Django 1.5 > 1.3 - >= 2.6.5 ○ >= 2.7.3 △ 実験的 △ 実験的 Django 1.6 > 1.4 - >= 2.6.5 ○ >= 2.7.3 ○ ○ Python 2.5 系を利用している場合は、1.6 のリリースまで (2013 後半ぐらい?) に Python 2.6.5 以上 (2.7.3 以上を強く推奨) への移行が必要です。1.5 は今月 (2012/12) 中にリリース予定とのことなので、今のうちに Python 3 へ移行方法を抑えときたいなと。以下 Django ドキュメントの翻訳作業がてら " Porting to Python 3 " を元にご紹介。さすが
続きを読む