プログレッシブ ウェブアプリに Apple タッチアイコンを追加する
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
iOS 版 Safari では、プログレッシブ ウェブアプリ(PWA)を
アクセスできます。PWA の追加時に iOS のホーム画面に表示されるアイコンを、
Apple Touch アイコンをタップします。この Codelab では、PWA に Apple タッチアイコンを追加する方法について説明します。前提
メールアドレスが必要です
測定
新しいタブでサンプルアプリを開きます。
[Remix to Edit] をクリックして、プロジェクトを編集可能にします。
サイトをプレビューするには、[アプリを表示] を押します。[
全画面表示
。
サンプルアプリの URL をメモします。たとえば、https://example.glitch.me
のようになります。
Chrome DevTools で、サンプルアプリに対して Lighthouse PWA 監査を実行します。
- Ctrl+Shift+J キー(Mac の場合は Command+Option+J キー)を押して DevTools を開きます。
- [Lighthouse] タブをクリックします。
- [カテゴリ] リストで [プログレッシブ ウェブアプリ] チェックボックスがオンになっていることを確認します。
- [Generate report] ボタンをクリックします。
[PWA Optimized] セクションで、サンプルアプリが有効な
Apple タッチアイコン。
<ph type="x-smartling-placeholder">
iOS のホーム画面にサンプルアプリを追加する
Apple Touch アイコンによってユーザー エクスペリエンスがより洗練される仕組みを説明するため、まず
Apple のタッチアイコンが指定されていない場合、サンプルアプリを iOS デバイスのホーム画面に表示できます。
- Safari for iOS を開きます。
- サンプルアプリの URL を開きます。これは、
https://example.glitch.me
のような URL です。
すでに説明しました
- 共有アイコン >
[ホーム画面に追加] をタップします。このオプションを表示するには、左にスワイプします。
- [追加] をタップします。
サイトでは Apple タッチアイコンが指定されていないため、iOS ではサイトのアイコンが生成されます。
取得する必要があります
<ph type="x-smartling-placeholder">
サンプルアプリに Apple タッチアイコンを追加する
index.html
の <head>
の下部にある <link rel="apple-touch-icon">
タグのコメントを解除します。
…
<link rel="stylesheet" href="/index.css">
<link rel="shortcut icon" href="https://cdn.glitch.com/49d34dc6-8fbd-46bb-8221-b99ffd36f1af%2Ftouchicon-180.png?v=1566411949736">
<!-- <link rel="apple-touch-icon" href="https://cdn.glitch.com/49d34dc6-8fbd-46bb-8221-b99ffd36f1af%2Ftouchicon-180.png?v=1566411949736"> -->
<link rel="apple-touch-icon" href="https://cdn.glitch.com/49d34dc6-8fbd-46bb-8221-b99ffd36f1af%2Ftouchicon-180.png?v=1566411949736">
</head>
…
iOS のホーム画面にサンプルアプリを追加する(もう一度)
- iOS のホーム画面にサンプルアプリをもう一度追加してみてください。今回は適切なアイコンが
できます。Lighthouse を使用してページを再度監査すると、
有効な
apple-touch-icon
が提供されていないため、監査に合格しました。
で確認できます。
<ph type="x-smartling-placeholder">
特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。
最終更新日 2019-08-26 UTC。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"必要な情報がない"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"複雑すぎる / 手順が多すぎる"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"最新ではない"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻訳に関する問題"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"サンプル / コードに問題がある"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"その他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"わかりやすい"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"問題の解決に役立った"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"その他"
}]
{"lastModified": "\u6700\u7d42\u66f4\u65b0\u65e5 2019-08-26 UTC\u3002"}
[[["わかりやすい","easyToUnderstand","thumb-up"],["問題の解決に役立った","solvedMyProblem","thumb-up"],["その他","otherUp","thumb-up"]],[["必要な情報がない","missingTheInformationINeed","thumb-down"],["複雑すぎる / 手順が多すぎる","tooComplicatedTooManySteps","thumb-down"],["最新ではない","outOfDate","thumb-down"],["翻訳に関する問題","translationIssue","thumb-down"],["サンプル / コードに問題がある","samplesCodeIssue","thumb-down"],["その他","otherDown","thumb-down"]],["最終更新日 2019-08-26 UTC。"],[],[]]