このWEBツールを作るに当たってGDで文字を書くようにしました。
サーバー内のフォント一覧を調べるには下記のようにfindというlinuxの検索のコマンドを使います。

find /usr/local/fonts -name "*.ttf"

phpだと下記のようなスクリプトで検出できます。

<?php 
exec('find /usr/local/fonts -name "*.ttf"', $stdout);
print implode("<br>\n",$stdout);
?>

（もしCentOSだと/usr/local/fontsを’/usr/share/fonts’とかすると見つかるかと思います。）

coreserverの場合下記のような結果になりました。
/usr/local/fonts/wadalab-gothic.ttf
/usr/local/fonts/arib____.ttf
/usr/local/fonts/helcbi__.ttf
/usr/local/fonts/heli____.ttf
/usr/local/fonts/timi____.ttf
/usr/local/fonts/helb____.ttf
/usr/local/fonts/timb____.ttf
/usr/local/fonts/helbi___.ttf
/usr/local/fonts/timbi___.ttf
/usr/local/fonts/arir____.ttf
/usr/local/fonts/helcr___.ttf
/usr/local/fonts/starmath.ttf
/usr/local/fonts/kochi-mincho.ttf
/usr/local/fonts/chvor___.ttf
/usr/local/fonts/watanabe-mincho.ttf
/usr/local/fonts/helr____.ttf
/usr/local/fonts/timr____.ttf
/usr/local/fonts/kochi-mincho-subst.ttf
/usr/local/fonts/sazanami-mincho.ttf
/usr/local/fonts/chvr____.ttf
/usr/local/fonts/kochi-gothic-subst.ttf
/usr/local/fonts/kochi-gothic.ttf
/usr/local/fonts/helcb___.ttf
/usr/local/fonts/starbats.ttf
/usr/local/fonts/cogb____.ttf
/usr/local/fonts/helci___.ttf
/usr/local/fonts/sazanami-gothic.ttf
/usr/local/fonts/cogr____.ttf

日本語は8つあります。最近よく見かけるIPAフォントは無いですが十分です。
渡部ゴシック（wadalab-gothic.ttf）
渡部明朝（watanabe-mincho.ttf）
東風ゴシック（kochi-gothic.ttf）
東風明朝（kochi-mincho.ttf）
東風ゴシック代用（kochi-gothic-subst.ttf）
東風明朝代用（kochi-mincho-subst.ttf）
さざなみゴシック（sazanami-gothic.ttf）
さざなみ明朝（sazanami-mincho.ttf）

今回は「さざなみ明朝」にしました。

プログラム的には下記のように毎年画像が生成されるようにしました。

<?php 
$Y = date("Y");

$fname = './icon'.$Y.'.png';
$gengo = '平成';
$nensu = ($Y-1988);
if (!file_exists($fname)) {
	if (!extension_loaded('gd')) {
		exit('GDモジュールが無い。');
	}
	$img = imagecreatetruecolor(256, 256);
	$font = "/usr/local/fonts/sazanami-mincho.ttf";
	$background_color = imagecolorallocate($img, 64, 64, 64);
	imagefilledrectangle($img, 0, 0, 300, 300, $background_color);
	
	$text_color = imagecolorallocate($img, 255, 255, 255);
	imagettftext($img, 66,  0, 38,  95, $text_color, $font, $gengo);
	imagettftext($img, 121, 0, 50, 240, $text_color, $font, $nensu);
	imagepng($img, $fname);
	imagedestroy($img);
}
?>

後は作った画像をapple-touch-icon-precomposedで指定して完成です。

元号アイコン

結論から言うと
■iPhone 5はモニタ解像度は幅640pxをdevice-widthが320px（320pxのふりをして）表示します。
■iPhone 6はモニタ解像度は幅750pxをdevice-widthが375px（375pxのふりをして）表示します。
■iPhone 6 Plusは解像度がフルHDなので幅1090pxをdevice-widthが414px（414pxのふりのふりをして）表示します。

iPhone 5やiPhone 6の場合はdevice-pixel-ratioが2.0なので単純に2分の1で理解できるのですが
iPhone 6 Plusはdevice-pixel-ratioが3.0なのでdevice-widthは3分の1の360px（一桁四捨五入）と思っていたので不思議に思っていたが
PaintCodeによると1.15の縮小補正が入るので414pxでいいらしい。

ややこしい。

ちなみに同じく解像度が1090pxでdevice-pixel-ratioが3.0の「Sony Xperia Z」や「HTC One X」は普通に3分の1（360px）です。

思いついたのは約一年前で最初はtenhp.comを間借りして細々とやろうと思ったのですが作っていくうちに「世界初（たぶん）のPassBookに対応したペット用電子名刺なので、iPetcardsの影響でペットを飼ったら電子名刺を作るのが当たり前の世の中になったりして、世界の常識をかいちゃうかもと」という気持ちが強くなり、独自ドメインでVPSを借りてSSL証明書も買ってと準備万端で、公開後も汎用のプレスリリースサイトやiPhoneアプリ系サイトとペット系のプレスリリースサイトなどに依頼した。
しかし、プレスリリースは結局ペット系のところしか掲載してもらえなかった。

PassbookのWEBアプリ開発は資料が少なく困難だったのに、
使いやすさも考慮し、かなり練って作ったのに、
無駄にそこそこの価格のサーバーも用意したのに、
利用者が増えない、昨日の電子名刺作成者ゼロ。

お金になる要素が無いのでどうしようか悩むところだけどネット広告やチラシを作ったりする事も考えてみます。

ちなみにPassBookの方はPassを作るのは簡単なんだけど更新を通知するサーバーを作るのが面倒で必要な情報は公式には日本語の解説PDFがあるが私は下記ブログの解説の方がわかりやすかった。
仕事たのしいなーもーの「Passbookの更新（アフターケア）。（１）」
Ian Lewisの「Python でPassbookファイルを作成する」

■Android
Androidは既に開発環境（Andoroid SDK＆Eclipse）を構築してあったのだが、以前に構築した開発環境が3.6（Helios）で最近のサイトの説明の画面が3.7（Indigo）や4.2（Juno）で分りづらいので入れ直したが上手くいかず3.6に戻した。

とりあえず既に入ってる（JDKは6の64bit、Andoroid SDK、Eclipse3.6）に最新のPhoneGapを使う事になり公式サイトでダウンロードしたファイルを見ると名前が違う。
もっと使おうPhoneGap／Cordova 2.0.0：第1回　PhoneGap/Cordovaとは｜gihyo.jp … 技術評論社
によるとPhoneGapはAdobeに買収されて今までPhoneGapと呼んでたものはCordovaになったらしい。

まずeclipse3.6（日本語版）で
「ファイル」「新規」「Android Application Project」を選んで

「New Android Application」という画面が現れるので
「Application Name」にアプリ名を入れ「次へ」を押す。

「Configure Launcher Icon」の画面になりアイコンを指定できるので
「イメージ」を選び画像を選択して
「Additional Padding」を「0」にして
「Shape」をなしにし「次へ」を押す。

次に「Create Activity」の画面になるがそのまま「次へ」を押すと

「New Blank Activity」になるので無視して「完了」を押し

とりあえずコンパイルしてみると「Error generating final archive: Debug certificate expired on …」とエラーが出た調べてみるとほったらかしにしすぎて、何かしらの証明書の有効期限が切れたらしい。
「.android」フォルダ内の（私はDドライブにしてるが、標準はWindowsユーザフォルダ内）debug.keystoreファイルを削除しeclipseの「プロジェクト」の「クリーン」で解決した。

今度は「[Emulator]PANIC: Could not open ～」というエラーが出た。
AVDのファイルが読めないらしいがこれは「.android」フォルダを標準の場所に無いためのようで、それっぽいファイルをWindowsユーザフォルダ内に複製した。

エミュレーターで上手く動いたので、binフォルダに生成されてるインストーラー（apk）を実機にコピーしてインストールし動作確認したが問題無さそうなのでコンテンツ作りを進めてたが、回転のすると落ちる問題が発生。（ちなみにエミュレーターで回転はCtrl+F12）
ネットで調べると「android:configChanges」の設定を変えればいける事が分ったがこれが記載されてたPhoneGap Fan – PhoneGap (Cordova) の日本語コミュニティがすごくわかりやすくまとめられてる事に気づいた。もっと前に出会いたかった。

■iPhone
iPhoneの方はitel系のCPUが搭載されたMacが必要になる。家にはもらい物のPowerBookG4しか無く、Mac miniを購入した。
以前買った本「iPhone/iPad × HTML5アプリ制作」が既にバージョンが古く色々と差異（Xcode3とXcode4の差異、PhoneGapとCordovaの差異）があったが色々なWEBサイトを参考にインストールする事になった。
具体的には面倒なので書かないが（バージョンを含めてググらないとより混乱します。）

まず、開発用のAppleIDを取得し、iOS Dev Centerに登録してお金を払う（年間参加費 8,400円）
上でも書いたがXcodeとPhoneGapは本と情報が違うのでPhoneGap Fanを参考にMacのAppStoreでXcodeをインストール、さらにCordovaも導入してandroid用のhtml等をMacにコピーしてシミュレーターでチェック。
なんかエラーっぽい表示が出るが問題なくシミュレーター上で動作した。
次は実機チェックだがこれが難解だが何度もする作業でもないので何も考えず、本「iPhone/iPad × HTML5アプリ制作」に書かれてるとおりに作業をする。
Xcode4は英語表記なので微妙に分からないところもあったが調べつつ進めてていくと実機でも動いた。

Andoroid SDK＆EclipseもXcodeもアップデートとかすると裏で細かいソフトがアップデートされる事からかなりの数のソフトの集合体なのが分る。
公開前に再コンパイルしようとEclipseを立ち上げるとアップデートの警告が出たのでアップデートするとコンパイル出来なくなってしまい、Androidの公開は見送った。毎回アップデートする度に開発環境が壊れるのでAndoroid SDKとEclipseはアップデートしない方がいいのかもしれない。

という事で公開されたのは「Dog-Age」という犬の年齢を管理するiPhoneアプリです。
一応、英語と日本語のバイリンガル仕様です。

cssやjavascriptが効いてるのでそこそこ見れるが普通の PCサイトをパソコンの様に見れるという訳では無く、Flashが使える分PSPなどのゲーム機の方がマシに思える。
結局、画面が小さいので専用ページは携帯サイト用のものを元に一回り大きく作る感じが効率的で、色々と複雑な事をしたいならアプリを作る方がいい。

■フォント
iPod touch、iPhone 3Gは日本語フォントが「ヒラギノ角ゴシック ProN」 のみだったがiPadには「ヒラギノ明朝 ProN 」が追加されたらしい
。等幅フォントを使いたいときは「font-family:monospace;」
font-family : ‘HiraMinProN-W3’ ;
font-family : ‘HiraMinProN-W6’ ;

■横幅
iPod touch・iPhone 3G
ポートレート（縦向き）：320px
ランドスケープ（横向き）：480px
iPhone4
ポートレート（縦向き）：640px
ランドスケープ（横向き）：960px
iPad
ポートレート（縦向き）：768px
ランドスケープ（横向き）：1024px

■電話番号を勝手にリンクにしてしまう
「-」（ハイフン）を含む数値をSarfariが勝手に電話番号としてリンクしてしまうので下記を記述して、その機能を抑制する。
<meta name="format-detection" content="telephone=no">

■回転させると文字が大きくなる
画面方向の切り替え時にSarfariが勝手に文字サイズを調整してしまうので、CSSを使ってその機能を抑制する。
body {-webkit-text-size-adjust: none;}

■スクロール
「overflow:scroll」が効かない。
http://cubiq.org/scrolling-div-for-mobile-webkit-turns-3
これは、拡大して二本指でなぞるとなんとかスクロール出来ない事はない。

■アイコン
iPod touch、iPhone 3G、iPhone4、iPadのWebClipアイコンは
以前（iOS1時代）は60x60pxで作成し、iPhoneで自動に57x57pxに変換されるのがキレイとされてましたがiOS2以降は57x57pxで作成する方がキレイに表示できる様になりました。
それがiPhone4、iPadの出現で今までのサイズだとボケボケになってしまうようになりました。
各端末のアイコンサイズは
iPod touch・iPhone 3G：57x57px
iPhone4：114x114px
iPad：72x72px
とまちまちです。
ただ大きい場合は縮小され、角を丸めたり、ライティングしたりしてくれるので大きい方が良くなりました。
実際、どんなサイズがいいのかというと、当のAppleは129ｘ129pxなのでこれに合わせて作成した方が無難かと思われます。

iPod touchを一月ばかり使った感想
いいところ
・アプリが続々と出て期待感がもてる。
・UIが優れてるので意味なく触りたくなる。
・音楽プレイヤーで歌詞が表示されるのにいいサイズ。
・Youtubeを見るのにいいサイズ。
・Twitter専用端末にちょうどいい。
悪いところ
・文章を読むのは問題無いが新聞・雑誌・コミックを読むには画面が小さすぎる。
・実際使うアプリはそんなに無い。
・十字キーが無いのでゲーム機としては劣る。
・本当に欲しい機能は普通の携帯に大体入ってる。
・宮崎駿に「自慰行為をしているようで気色悪い」と言われる。

iPadも毎日パソコンの前にいる仕事をしてるオレには今のところ魅力的に感じない、iPhoneの様にパソコン版と解像度が極端に違えば専用のページを作るのに検証用として欲しい所だけど、iPadの場合、Flashを無くすとかボタンを押しやすくするぐらいの配慮は必要かと思うが専用のページを作る程ではない。
ただ、今回はiPhoneの成功の後なので、iPhoneの時の様に「当たるかどうか怪しい端末」ではなく「当たるのがある程度確約された端末」なので開発者も多く参入するだろうし、WEBもiPad向けに最適化されたページを作るサイトが結構出てきそう。