[まとめ] 無料アプリならネイティブアプリでなくとも、iPhone用Webアプリで全然いける理由

「iPhone アプリ作りたいけど、Ovejective-C を一から覚えるのはちょっと… 」

なんていう困ったちゃんでも大丈夫！ここではWebアプリでも出来ることをちょっとだけ紹介。

iPhone用Webアプリにあって、ネイティブアプリにはないもの、やっぱり一番は、アレなサイトにも果敢に挑戦出来ることなのかな。

jQuery Mobileで「iPhoneで出会い系」紹介サイトを作ってみた

1. ページをiPhoneの画面ぴったり（横スクロールなし）にする

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

width=device-widthは、iPhoneの画面の幅にページを合わせる
initial-scale=1.0は、ページの大きさの初期値（1.0＝そのままの大きさ）
maximum-scale=1.0は、ページの大きさの最大（1.0＝拡大しない）
詳しくはViewport

2. URLバー無し（≠隠す）の全画面表示でネイティブアプリさながらにする

<meta name="apple-mobile-web-app-capable" content="yes" />

ホーム画面のブックマークから開いたときのみ
上記viewport設定してページの大きさを最適化しとく
リンク等でページ遷移するときは1度画面を閉じて、safariを開き直すため、少々手間取る（まぁこれはネイティブアプリでも一緒）

3. iPhone用アイコン画像（例のツルピカ）を設定する

<link rel="apple-touch-icon" href="apple-touch-icon.png" />

ファイル名（apple-touch-icon.png）はなんでも良い
特に指定しなければ、例のトゥルントゥルンのアイコンになる（光沢なしにもできる）

4. 起動画面画像（「Loading…」みたいなアレ）を設定する

<link rel="apple-touch-startup-image" href="startup.png" />

画像は320×460の.pngでないとダメ
ファイル名（startup.png）はなんでも良い
上記<meta name=“apple-mobile-web-app-capable” content=“yes” />を記述して、Webアプリをホーム画面にブックマークしておくことが前提

5. URLバーを隠す

<body onLoad="window.setTimeout('window.scrollTo(0, 1)', 500);">

書き方はいろいろあるけど、とりあえずこれで確認（ページ開いたときURLバーがヌルッと隠れる）できる

※サンプル

SEDORYMAN

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>SEDORYMAN - iPhoneせどり</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <link rel="stylesheet" media="all" href="style.css" />
  <link rel="apple-touch-icon" href="img/apple-touch-icon.png" />
  <link rel="apple-touch-startup-image" href="img/startup.png" />
</head>
<body onLoad="window.setTimeout('window.scrollTo(0, 1)', 500);">

※iPhone用に作られたサイトいくつか

Calc 10
実際にiPhoneで操作してみるとほんとネイティブと見分けつかない。

AVPhone - iPhoneエロ動画
ゆーすけべー氏作。

iPhoneで出会い系
ゆーすけべー氏作 iPhone用UI「jQuery Mobile」を使用。

erockr iPhone
iPhone用UI「iUI」を使用。

enjoy!

▼参考