2012-01-10
Xcodeを使わずに起動アイコンを実機で確認する方法
iPhoneの起動アイコンは114px (iPhone3GSだと57px)と解像度が小さいため、いざ実機に入れると文字がつぶれたり色が予想と違っていたりします。通常アプリとして実機に入れるにはiOSデベロッパープログラムライセンスやらXcodeが必要となり、環境を作るにもデザイナーの人にとっては敷居が高いと思います。
今更かもしれませんが簡易的に実機で確認できるWebクリップのfavicon的な利用方法を紹介します。
HTMLファイルの用意
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>アプリ名</title> <link rel="apple-touch-icon" href="icon.png" /> </head> <body> gloss effects<br/> <img src="icon.png"/> </body> </html>
Webサーバの配置
作成したindex.htmlファイルと起動アイコン用のicon.pngファイルをWebサーバに配置します。配置するサーバはPCのWebサーバを利用してもかまいません。Macの場合はシステム環境設定の共有でWeb共有をONにすれば簡単にWebサーバを起動できます。
ユーザーフォルダのサイト(Sites)フォルダがDocumentRootになります。サイトフォルダに"icontest"等のフォルダを作成し、"index.html"と"icon.png"を配置します。
iPhoneのSafariから配置したのindex.htmlにアクセスします。上記のMacのWebサーバを利用した場合は、Web共有に記載されたURLに/icontestを付加すればアクセスできます。
この場合だと "http://192.168.11.3/~hmori/icontest" になります。
表示後、下ツールバーの中央ボタンを押し「ホーム画面に追加」を押します。
光沢エフェクトの消し方
通常ではiPhoneアプリは通常では光沢処理（半円上の光源エフェクト）が自動で入りますが、これを消したい場合はlinkタグを下記のようにprecomposedに変更します。
<link rel="apple-touch-icon-precomposed" href="icon.png" />
サンプルを下記に用意しました。iPhoneのSafariで「ホーム画面に追加」するとアプリと同様に見えます。
http://hmori.s3.amazonaws.com/icontest/normal/index.html
http://hmori.s3.amazonaws.com/icontest/precomposed/index.html
Safariのlinkタグの公式ドキュメント
デザイナーの方に毎回ファイルを送ってもらい自分の方で実機に入れて確認していましたが、この方法を教えておけばデザイナー自身で確認ができるようになりますね。
Permalink | コメント(3) | トラックバック(1) | 08:02 
- 68 http://home.myspace.com/index.cfm?fuseaction=home
- 33 http://www.google.co.jp/url?sa=t&rct=j&q=java 引数 デフォルト&source=web&cd=2&ved=0CDMQFjAB&url=http://d.hatena.ne.jp/h_mori/20080620/1213980585&ei=zckLT5u1JIjnmAWGnKn7BQ&usg=AFQjCNE23h1U4M8
- 21 http://www.google.co.jp/url?sa=t&rct=j&q=java+引数+デフォルト値&source=web&cd=2&ved=0CCoQFjAB&url=http://d.hatena.ne.jp/h_mori/20080620/1213980585&ei=OJ8LT8m-FYbzmAXwx6ibBg&usg=AFQjCNE23h
- 21 http://www.google.co.jp/url?sa=t&rct=j&q=twtweetcomposeviewcontroller&source=web&cd=12&ved=0CC0QFjABOAo&url=http://d.hatena.ne.jp/h_mori/20111027/1319719187&ei=Qr8LT5jjFOH2mAWqwL2TBg&usg=AFQjCNFbmYke8NbMGODbtqOLP39QgSvf3A&sig2=XKz4G8qxZIJV3mRX
- 20 http://t.co/NHeVR5Oy
- 15 http://www.google.co.jp/url?sa=t&rct=j&q=xcode4 コンソール&source=web&cd=1&ved=0CCEQFjAA&url=http://d.hatena.ne.jp/h_mori/20110813/1313183300&ei=u6YLT8Q8gqGJB-mw6eMF&usg=AFQjCNFOlM-y9ScVZUDmcILDIZLae1-tPA
- 14 http://www.google.co.jp/url?sa=t&rct=j&q=finally+return&source=web&cd=1&sqi=2&ved=0CC8QFjAA&url=http://d.hatena.ne.jp/h_mori/20080707/1215433879&ei=ou4LT-yYFuTrmAXAsrmUBg&usg=AFQjCNETIoaYKOhga2CX3_hetwAI86BKdQ
- 14 http://www.google.co.jp/url?sa=t&rct=j&q=ios バージョン 取得 2011&source=web&cd=5&ved=0CD8QFjAE&url=http://d.hatena.ne.jp/h_mori/20110711/1310332134&ei=2YIOT8_DK4fzmAXHr7jVAw&usg=AFQjCNG3Q
- 13 http://bit.ly/zB0Lrp
- 12 http://t.co/Fj8bqry5
