無料でiOSでシンプルなWebアプリを作ってアイコンをホーム画面に設置する方法

4408 ワード
Web iOS HTML iPhone アプリ開発 HTML テキストリンク

はじめに

iOSでシンプルなWebアプリを作って、アイコンをホーム画面に設置する方法です。HTMLとCSS、JavaScriptを使用してアプリを作ることができます。簡単なツールなどであればこれで十分です。

ちなみに、Swiftを使ってアプリ開発をする場合でも、実機テストは無料ですることができます（ただし有効期限は1週間で、1週間ごとに延長が必要）。
誰でも無料でiPhoneの実機を使ってiOSアプリ開発する方法 - Qiita などを参照。

テンプレート

data:text/html;charset=utf-8,
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<link rel="apple-touch-icon" href="アイコンのURL">
<title>アプリのタイトル</title>
<style>*{-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-touch-callout: none; -webkit-user-select: none;}</style>

-webkit-tap-highlight-color: rgba(0, 0, 0, 0); : リンクタップ時のグレーの影をOFF
-webkit-touch-callout: none; : 長押しでのメニュー呼び出しの無効化
-webkit-user-select: none; : テキスト選択の無効化

ステータスバーの色

白

<meta name="apple-mobile-web-app-status-bar-style" content="default">

黒

<meta name="apple-mobile-web-app-status-bar-style" content="black">

透明

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

追加する方法

  1. この作成した長いテキストをSafariで開く（Macの場合はHandoffでコピーするのが便利）
  2. Safariの画面下の共有ボタンから、ホーム画面に追加 を選ぶ

注意点

デスクトップ版ChromeやFirefoxで動作確認する場合は、すべての # を %23に置換してください。でないと正常に表示されません。
参考：https://qiita.com/shge/items/325b3c4fc95b9190c9cd

参考文献

ウェブページをできる限りネイティブアプリっぽく魅せるテクニックまとめ 〜アップルにリジェクトされつづけるなら、ウェブアプリとストアをつくって自前で配信してしまおうという企み〜 - KAYAC engineers' blog
https://techblog.kayac.com/2016/12/12/090000

サードパーティ製ライブラリとヘッダファイルをgcc、g++に追加する方法
018四数加算