Web App Manifest入門 | 第1回マニフェストファイルの構造

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

阳光的蚂蚁 · Axure PR 9 保姆级使用教程 | ...· 13 小时前 ·

打盹的地瓜 · Axure 9 ...· 13 小时前 ·

千年单身的红金鱼 · App 内购买项目 - Apple ...· 12 小时前 ·

谦逊的跑步机 · Apple Store ...· 12 小时前 ·

腼腆的柠檬 · 工作动态-深圳市卫生健康委员会网站· 5 小时前 ·

正直的棒棒糖 · [POP.017.0016] Task ...· 1 周前 ·

玩足球的红薯 · API: Filters· 1 周前 ·

乐观的机器猫 · r语言svmrfe代码 - CSDN文库· 2 月前 ·

安静的吐司 · Webpack-dev-server ...· 4 月前 ·

一直单身的冰棍 · 银闪战乙女与封门公主_百度百科· 6 月前 ·

</noscript>  <main class="cmn-Main"> <style>astro-island,astro-slot,astro-static-slot{display:contents}</style><astro-island uid="Z2sfnwC" component-url="/_astro/GlobalHeader.CIx4gaLw.js" component-export="default" renderer-url="/_astro/client.Cx1FBVJX.js" props="{&quot;isAccountLoaded&quot;:[0,true],&quot;isLoggedIn&quot;:[0,false],&quot;isSubscriber&quot;:[0,false],&quot;isSubscriptionPaused&quot;:[0,false],&quot;accountInfo&quot;:[0,false],&quot;unreads&quot;:[0,null],&quot;url&quot;:[0,&quot;https://www.codegrid.net/articles/webappmanifest-1/&quot;]}" ssr="" client="load" opts="{&quot;name&quot;:&quot;GlobalHeader&quot;,&quot;value&quot;:true}" await-children=""><header class="cg-GlobalHeader svelte-1taeuj5"><div class="cg-GlobalHeader_Inner svelte-1taeuj5"><div class="cg-GlobalHeader_Logo svelte-1taeuj5" data-svelte-h="svelte-1ba5eag"><a class="cg-GlobalHeader_LogoLink" href="/"><svg width="125" height="25" fill="none" xmlns="http://www.w3.org/2000/svg" class="svelte-1taeuj5"><title>CodeGrid</title><path fill-rule="evenodd" clip-rule="evenodd" d="M124.012 0L124 9h-12.012L112 25h13V0h-.988zM113 24h11V10h-11v14zM49.012 0v9H37v16h13V0h-.988zM38 24.025h11.012V10H38v14.025zM93 9v16h1V10h6V9h-7zM105 25h1V9h-1v16zM56 9v16h13v-1H57v-7h12V9H56zm1 7h11v-6H57v6zM75 0v25h13V11h-.988v13.025H76V1h12V0H75zM0 0v25h13v-1H1V1h12V0H0zM18 25h13V9H18v16zm1-1h11V10H19v14z" fill="#fff"/></svg></a></div> <div class="cg-GlobalHeader_SearchContainer svelte-1taeuj5" data-svelte-h="svelte-132cfd0"><a href="/search/" class="cg-GlobalHeader_SearchButton svelte-1taeuj5" aria-label="記事検索"><svg class="cg-GlobalHeader_SearchButtonIcon svelte-1taeuj5" width="14" height="14" viewbox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="var(--fill)" fill-rule="evenodd" clip-rule="evenodd" d="M14.8635 12.6173C15.0455 12.7995 15.0455 12.9818 14.8635 13.1643L13.1859 14.883C13.108 14.961 13.0039 15 12.8738 15C12.7697 15 12.6788 14.961 12.6007 14.883L9.32392 11.5235C8.33545 12.1225 7.2953 12.422 6.20271 12.422C4.5124 12.422 3.05579 11.8165 1.83337 10.6055C0.611208 9.3945 0 7.92975 0 6.211C0 4.49225 0.611208 3.0275 1.83337 1.8165C3.05579 0.6055 4.5124 0 6.20271 0C7.89327 0 9.34339 0.6055 10.5526 1.8165C11.762 3.0275 12.3667 4.49225 12.3667 6.211C12.3667 7.30475 12.0936 8.3205 11.5475 9.25775L14.8635 12.6173ZM8.85577 3.55475C8.12747 2.7995 7.24311 2.422 6.20271 2.422C5.16256 2.422 4.27171 2.793 3.53043 3.53525C2.78939 4.2775 2.41862 5.16925 2.41862 6.211C2.41862 7.25275 2.78939 8.1445 3.53043 8.88675C4.27171 9.629 5.16256 10 6.20271 10C7.24311 10 8.12747 9.629 8.85577 8.88675C9.58383 8.1445 9.94811 7.25275 9.94811 6.211C9.94811 5.16925 9.58383 4.284 8.85577 3.55475Z"/></svg> <span class="svelte-1taeuj5">記事検索</span></a></div> <nav class="cg-GlobalHeader_Nav svelte-1taeuj5" aria-label="メインナビゲーション"><div class="cg-GlobalHeader_NavContent svelte-1taeuj5"><a class="cg-GlobalHeader_NavLink svelte-1taeuj5" href="/about/" data-svelte-h="svelte-1byrcfc">CodeGridとは？</a> <a class="cg-GlobalHeader_NavLink svelte-1taeuj5" href="/pricing/" data-svelte-h="svelte-1os3n5g">料金</a> <a class="cg-GlobalHeader_NavLink svelte-1taeuj5" href="/organization/" data-svelte-h="svelte-17hyq31">チーム購読</a> <a class="cg-GlobalHeader_NavLink svelte-1taeuj5" href="/free-series/" data-svelte-h="svelte-kq4c0h">無料記事</a> <a class="cg-GlobalHeader_NavLink svelte-1taeuj5" href="/authors/" data-svelte-h="svelte-4ygb9k">著者</a></div></nav> <div class="cg-GlobalHeader_UserContainer svelte-1taeuj5"><a class="cg-GlobalHeader_StartButton svelte-1taeuj5" href="/payment/?from=header&amp;redirectTo=%2Farticles%2Fwebappmanifest-1%2F"><span data-svelte-h="svelte-19075rh">購読</span> <span data-svelte-h="svelte-178ejiu">する</span></a> <a class="cg-GlobalHeader_LoginButton svelte-1taeuj5" href="/api/v2/auth/signin?redirectTo=https://www.codegrid.net/articles/webappmanifest-1/">ログイン</a> </div></div> </header></astro-island> <article class="cg-Article astro-jwu2ctgo">  <astro-island uid="1wnFOI" component-url="/_astro/Header.DIvFX6U-.js" component-export="default" renderer-url="/_astro/client.Cx1FBVJX.js" props="{&quot;isSubscriber&quot;:[0,false],&quot;article&quot;:[0,{&quot;title&quot;:[0,&quot;マニフェストファイルの構造&quot;],&quot;body&quot;:[0,&quot;&lt;h2 id=\&quot;toc-1\&quot;&gt;PWAとその機能&lt;/h2&gt;\n&lt;p&gt;PWA（Progressive Web Apps：プログレッシブウェブアプリ）という言葉を聞いたことがある方も増えてきたのではないかと思います。PWAのこれといった定義はありませんが、いくつかの新しい技術を使って、ネイティブアプリのような機能を持ったWebアプリを実現したものをそう呼びます。&lt;/p&gt;\n&lt;p&gt;「ネイティブアプリのような機能」も、なかなかふんわりとしていますが、以下の機能が挙げられることが多いでしょう。&lt;/p&gt;\n&lt;ul&gt;\n&lt;li&gt;インストール（ホーム画面に追加）できる&lt;/li&gt;\n&lt;li&gt;オフラインやネット接続が不安定な状態で開いても使える&lt;/li&gt;\n&lt;li&gt;プッシュ通知が送られてくる&lt;/li&gt;\n&lt;/ul&gt;\n&lt;p&gt;ただ、このシリーズはPWAそのものについて紹介するものではありません。このシリーズで取り上げるのは、Web App Manifestと呼ばれるものです。&lt;/p&gt;\n&lt;p&gt;先ほど「いくつかの新しい技術を使って」と述べましたが、PWAには複数の技術が関わります。なかでも代表的なものにService Workerがあります。CodeGridでもすでに取り上げている、PWAの中核技術です。&lt;/p&gt;\n&lt;ul&gt;\n&lt;li&gt;&lt;a href=\&quot;https://app.codegrid.net/series/2016-service-worker\&quot;&gt;Service Worker、はじめの一歩 | CodeGrid&lt;/a&gt;&lt;/li&gt;\n&lt;/ul&gt;\n&lt;p&gt;このシリーズで解説するWeb App Manifestも、PWAを実現する際に使われる技術のひとつです。&lt;/p&gt;\n&lt;ul&gt;\n&lt;li&gt;&lt;a href=\&quot;https://w3c.github.io/manifest/\&quot;&gt;Web App Manifest&lt;/a&gt;&lt;/li&gt;\n&lt;/ul&gt;\n&lt;h2 id=\&quot;toc-2\&quot;&gt;Web App Manifestとは&lt;/h2&gt;\n&lt;p&gt;Web App Manifestは、Webアプリのタイトルやアイコンなどについてまとめたファイルです。&lt;/p&gt;\n&lt;p&gt;このファイルがどこで使われるかというと、主にWebアプリのインストール時です。PWAの特徴のところで「インストールできる」と述べました。気に入ったWebアプリがPWAの場合、それをインストールすると、アプリ一覧もしくはホーム画面に追加されます。このときに、Web App Manifestに書かれているアプリの名前やアイコンのURLが使われるわけです。&lt;/p&gt;\n&lt;p&gt;機能としてはHTMLのmeta要素、特にOGP（Open Graph Protocol）に書いてある情報と似ています。Web App Manifestはそれらの情報を、外部ファイルにしたようなものと考えるとわかりやすいでしょうか。&lt;/p&gt;\n&lt;h2 id=\&quot;toc-3\&quot;&gt;Web App Manifestの構造&lt;/h2&gt;\n&lt;p&gt;Web App Manifestは、アプリに関する情報をJSON形式でまとめたファイルです（以下、「マニフェストファイル」と呼びます）。CodeGridは残念ながらPWAにはなってないのですが、PWA化したとすると、マニフェストファイルは次のようになるでしょう。&lt;/p&gt;\n&lt;cg-code-block&gt;&lt;h3&gt;CodeGridのマニフェストファイル（予想）&lt;/h3&gt;&lt;pre&gt;&lt;code class=\&quot;lang-json\&quot;&gt;&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;{&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; &lt;/span&gt;&lt;span style=\&quot;color: #005CC5\&quot;&gt;\&quot;name\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;: &lt;/span&gt;&lt;span style=\&quot;color: #032F62\&quot;&gt;\&quot;CodeGrid — フロントエンドに関わる人々のガイド\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;,&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; &lt;/span&gt;&lt;span style=\&quot;color: #005CC5\&quot;&gt;\&quot;short_name\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;: &lt;/span&gt;&lt;span style=\&quot;color: #032F62\&quot;&gt;\&quot;CodeGrid\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;,&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; &lt;/span&gt;&lt;span style=\&quot;color: #005CC5\&quot;&gt;\&quot;theme_color\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;: &lt;/span&gt;&lt;span style=\&quot;color: #032F62\&quot;&gt;\&quot;#000\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;,&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; &lt;/span&gt;&lt;span style=\&quot;color: #005CC5\&quot;&gt;\&quot;icons\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;: [&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; {&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; &lt;/span&gt;&lt;span style=\&quot;color: #005CC5\&quot;&gt;\&quot;src\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;: &lt;/span&gt;&lt;span style=\&quot;color: #032F62\&quot;&gt;\&quot;icon/icon.png\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;,&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; &lt;/span&gt;&lt;span style=\&quot;color: #005CC5\&quot;&gt;\&quot;sizes\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;: &lt;/span&gt;&lt;span style=\&quot;color: #032F62\&quot;&gt;\&quot;192x192\&quot;&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; }&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; ]&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/cg-code-block&gt;\n&lt;p&gt;記述する項目については後で取り上げますが、それぞれが何をしているか、おおよその検討がつくのではないでしょうか。&lt;/p&gt;\n&lt;p&gt;マニフェストファイルの文字エンコーディングはUTF-8で記述します。また、拡張子は&lt;code&gt;.webmanifest&lt;/code&gt;で、MIMEタイプは&lt;code&gt;text/webappmanifest&lt;/code&gt;が推奨*されています。&lt;/p&gt;\n&lt;cg-note&gt;\n &lt;h3&gt;*注：JSONファイルでも動作に問題はないけれど&lt;/h3&gt;\n \n\n&lt;p&gt;拡張子とMIMEタイプについては推奨されているだけで、&lt;code&gt;application/json&lt;/code&gt;で送られる&lt;code&gt;.json&lt;/code&gt;ファイルでも動作に問題はありません。ではなぜ推奨の設定があるかというと、専用の拡張子やMIMEタイプであれば、キャッシュなどのサーバー上の設定を、他のJSONファイルと分けて設定しやすくできるというねらいからです。&lt;/p&gt;\n\n\n &lt;/cg-note&gt;\n&lt;h2 id=\&quot;toc-4\&quot;&gt;マニフェストファイルをアプリと結びつける&lt;/h2&gt;\n&lt;p&gt;中に記述するものの詳細の前に、マニフェストファイルをWebアプリに結びつける方法を紹介します。マニフェストファイルとアプリは別のファイルですから、当然ながら関連付けないといけません。&lt;/p&gt;\n&lt;p&gt;マニフェストファイルは、HTMLのlink要素を使ってWebアプリと関連付けます。&lt;/p&gt;\n&lt;cg-code-block&gt;&lt;pre&gt;&lt;code class=\&quot;lang-html\&quot;&gt;&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span style=\&quot;color: #22863A\&quot;&gt;link&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; &lt;/span&gt;&lt;span style=\&quot;color: #6F42C1\&quot;&gt;rel&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;=&lt;/span&gt;&lt;span style=\&quot;color: #032F62\&quot;&gt;\&quot;manifest\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; &lt;/span&gt;&lt;span style=\&quot;color: #6F42C1\&quot;&gt;href&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;=&lt;/span&gt;&lt;span style=\&quot;color: #032F62\&quot;&gt;\&quot;/manifest.webmanifest\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/cg-code-block&gt;\n&lt;p&gt;&lt;code&gt;rel=\&quot;manifest\&quot;&lt;/code&gt;を指定したlink要素で、マニフェストファイルの場所をリンクすればOKです。&lt;/p&gt;\n&lt;p&gt;マニフェストファイルを置く場所は、後述する&lt;code&gt;start_url&lt;/code&gt;と同一オリジンの範囲内であれば問題ありません。&lt;/p&gt;\n&lt;h2 id=\&quot;toc-5\&quot;&gt;マニフェストのメンバ紹介&lt;/h2&gt;\n&lt;p&gt;マニフェストファイルの例で、記述する項目（メンバ）を少しお見せしました。Web App Manifest仕様では、執筆時点で20個近くものメンバが定義されています。すべてではありませんが、どのようなメンバがあるかを紹介します。&lt;/p&gt;\n&lt;h3&gt;name&lt;/h3&gt;\n&lt;p&gt;アプリの名前を記述します。ここで指定される名前が基本的に使われますが、状況によっては次に紹介する&lt;code&gt;short_name&lt;/code&gt;が使われます。&lt;/p&gt;\n&lt;h3&gt;short_name&lt;/h3&gt;\n&lt;p&gt;アプリの短い名前を記述します。「短い名前」とは何かというと、ホーム画面やアプリ一覧画面などの表示領域が限られているときに使われる名前です。&lt;/p&gt;\n&lt;p&gt;たとえば、「CodeGrid — フロントエンドに関わる人々のガイド」は、アプリ一覧にはとうてい収まらないでしょう。「CodeGrid」であればかろうじて収まりそうです。&lt;/p&gt;\n&lt;cg-imgbox src=\&quot;https://cdn.codegrid.net/2018-webappmanifest/img/screenshot-1-name-shortname.jpg\&quot; caption=\&quot;長い名前は収まらない\&quot; alt=\&quot;スクリーンショット：アプリ一覧でshort_nameとnameを並べたもの\&quot;&gt;&lt;p&gt;「CodeGrid」（中央左）と「CodeGrid — フロントエンドに関わる人々のガイド」（中央右）で実験。後者の場合、すべて収まらずに途切れてしまう。\n&lt;/p&gt;&lt;/cg-imgbox&gt;\n&lt;p&gt;&lt;code&gt;short_name&lt;/code&gt;に文字数の制限はありません。しかし、ホーム画面やアプリ一覧の文字数を見るのに、英数では10文字程度、日本語であれば5文字程度がいいのではないかと筆者は思っています。場合によってはブランド名を短縮するなどの思い切り*も必要でしょう。&lt;/p&gt;\n&lt;cg-note&gt;\n &lt;h3&gt;*注：短縮の思い切り&lt;/h3&gt;\n \n\n&lt;p&gt;たとえば、CodeGridが素晴らしい支払いサービス「CodeGridペイメント」を新しく発表したとしましょう。しかしこの文字数では、ホーム画面などでは「CodeGridペ…」などと表示されてしまいそうです。こんなときには、ブランド名である「CodeGrid」でさえも短縮し、「CGペイ」などにするのがおそらくよいでしょう。ブランディングはアイコンに任せればよいのですから。&lt;/p&gt;\n\n\n &lt;/cg-note&gt;\n&lt;h3&gt;lang&lt;/h3&gt;\n&lt;p&gt;&lt;code&gt;lang&lt;/code&gt;に指定するのは、アプリで使われている言語です。形式は&lt;a href=\&quot;https://ja.wikipedia.org/wiki/IETF%E8%A8%80%E8%AA%9E%E3%82%BF%E3%82%B0\&quot;&gt;言語タグ&lt;/a&gt;で指定します。通常はアプリのHTMLに指定されている&lt;code&gt;lang&lt;/code&gt;属性と同じ値が使われるでしょう。CodeGridは日本語で書かれているので、&lt;code&gt;ja&lt;/code&gt;になります。&lt;/p&gt;\n&lt;p&gt;言語は1つしか指定できません。複数の言語でWebアプリが提供されている場合は、サーバー側で言語・地域の判定をし、それに応じて言語・地域別のマニフェストファイルを出し分けるとよいとされています。&lt;/p&gt;\n&lt;h3&gt;start_url&lt;/h3&gt;\n&lt;p&gt;&lt;code&gt;start_url&lt;/code&gt;には、インストールされたWebアプリを立ち上げたときに開くURLを指定します。Webアプリのディレクトリ構成にもよりますが、ルートやディレクトリのルートを指定するのが多くなりそうです。&lt;/p&gt;\n&lt;cg-code-block&gt;&lt;pre&gt;&lt;code class=\&quot;lang-json\&quot;&gt;&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;{&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; &lt;/span&gt;&lt;span style=\&quot;color: #005CC5\&quot;&gt;\&quot;start_url\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;: &lt;/span&gt;&lt;span style=\&quot;color: #032F62\&quot;&gt;\&quot;/\&quot;&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/cg-code-block&gt;\n&lt;p&gt;指定するURLは、マニフェストファイルのURLと同一オリジン*でないといけません。ですので、別のサーバーにマニフェストだけを置いたりといったことはできません。&lt;/p&gt;\n&lt;cg-note&gt;\n &lt;h3&gt;*注：オリジン&lt;/h3&gt;\n \n\n&lt;p&gt;オリジンや同一オリジンの詳細は&lt;a href=\&quot;https://app.codegrid.net/entry/2018-a-element-3#toc-1\&quot;&gt;a要素の連載で簡単に取り上げた&lt;/a&gt;ので、そちらをお読みください。&lt;/p&gt;\n\n\n &lt;/cg-note&gt;\n&lt;p&gt;&lt;code&gt;start_url&lt;/code&gt;にパラメータを与え、アクセス解析ツールと結びつければ、PWAからのアクセスも計測もできるでしょう。&lt;/p&gt;\n&lt;cg-code-block&gt;&lt;pre&gt;&lt;code class=\&quot;lang-json\&quot;&gt;&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;{&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; &lt;/span&gt;&lt;span style=\&quot;color: #005CC5\&quot;&gt;\&quot;start_url\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;: &lt;/span&gt;&lt;span style=\&quot;color: #032F62\&quot;&gt;\&quot;/?source=pwa\&quot;&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/cg-code-block&gt;\n&lt;p&gt;しかし、個別のIDを与えてのトラッキングなどは控えるべきです。ブラウザ側も&lt;code&gt;start_url&lt;/code&gt;を無視する実装などが認められているので、「このアドレスだからPWAだ」と一概には言えない場合もあるでしょう。&lt;/p&gt;\n&lt;h3&gt;icons&lt;/h3&gt;\n&lt;p&gt;&lt;code&gt;icons&lt;/code&gt;には、アプリのアイコンを指定します。アイコンは、大きさや画像フォーマットごとに複数指定できます。&lt;/p&gt;\n&lt;cg-code-block&gt;&lt;pre&gt;&lt;code class=\&quot;lang-json\&quot;&gt;&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;{&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; &lt;/span&gt;&lt;span style=\&quot;color: #005CC5\&quot;&gt;\&quot;icons\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;: [&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; {&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; &lt;/span&gt;&lt;span style=\&quot;color: #005CC5\&quot;&gt;\&quot;src\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;: &lt;/span&gt;&lt;span style=\&quot;color: #032F62\&quot;&gt;\&quot;icon/icon-192.png\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;,&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; &lt;/span&gt;&lt;span style=\&quot;color: #005CC5\&quot;&gt;\&quot;sizes\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;: &lt;/span&gt;&lt;span style=\&quot;color: #032F62\&quot;&gt;\&quot;192x192\&quot;&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; },&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; {&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; &lt;/span&gt;&lt;span style=\&quot;color: #005CC5\&quot;&gt;\&quot;src\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;: &lt;/span&gt;&lt;span style=\&quot;color: #032F62\&quot;&gt;\&quot;icon/icon.svg\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;,&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; &lt;/span&gt;&lt;span style=\&quot;color: #005CC5\&quot;&gt;\&quot;sizes\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;: &lt;/span&gt;&lt;span style=\&quot;color: #032F62\&quot;&gt;\&quot;192x192 256x256 512x512\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;,&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; &lt;/span&gt;&lt;span style=\&quot;color: #005CC5\&quot;&gt;\&quot;type\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;: &lt;/span&gt;&lt;span style=\&quot;color: #032F62\&quot;&gt;\&quot;image/svg+xml\&quot;&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; },&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; {&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; &lt;/span&gt;&lt;span style=\&quot;color: #005CC5\&quot;&gt;\&quot;src\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;: &lt;/span&gt;&lt;span style=\&quot;color: #032F62\&quot;&gt;\&quot;icon/icon-192.webp\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;,&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; &lt;/span&gt;&lt;span style=\&quot;color: #005CC5\&quot;&gt;\&quot;sizes\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;: &lt;/span&gt;&lt;span style=\&quot;color: #032F62\&quot;&gt;\&quot;192x192\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;,&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; &lt;/span&gt;&lt;span style=\&quot;color: #005CC5\&quot;&gt;\&quot;type\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;: &lt;/span&gt;&lt;span style=\&quot;color: #032F62\&quot;&gt;\&quot;image/webp\&quot;&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; }&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; ]&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/cg-code-block&gt;\n&lt;p&gt;&lt;code&gt;src&lt;/code&gt;はimg要素の&lt;code&gt;src&lt;/code&gt;属性と同じように、画像のURLを指定します。&lt;/p&gt;\n&lt;p&gt;&lt;code&gt;sizes&lt;/code&gt;には、&lt;code&gt;192x192&lt;/code&gt;のように、縦と横の大きさを&lt;code&gt;x&lt;/code&gt;でつなげたものを、空白区切りで複数指定できます。&lt;/p&gt;\n&lt;p&gt;&lt;code&gt;type&lt;/code&gt;は、画像のMIMEタイプを指定します。基本的にはPNGやJPEGでよいでしょうが、容量や色表現の都合で、WebPやHEIFなど新しいフォーマットを使いたい場合などは、そのMIMEタイプを合わせて指定します。&lt;/p&gt;\n&lt;p&gt;アイコンはホーム画面やアプリ一覧で使われるほか、一部のブラウザではスタート時にも使われます。これについては次回以降に説明します。&lt;/p&gt;\n&lt;h3&gt;theme_color&lt;/h3&gt;\n&lt;p&gt;&lt;code&gt;theme_color&lt;/code&gt;には、アプリのブランドカラーとなるような色を指定します。CodeGridであれば黒ですので、&lt;code&gt;#000&lt;/code&gt;でしょうか。&lt;/p&gt;\n&lt;cg-code-block&gt;&lt;pre&gt;&lt;code class=\&quot;lang-json\&quot;&gt;&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;{&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; &lt;/span&gt;&lt;span style=\&quot;color: #005CC5\&quot;&gt;\&quot;theme_color\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;: &lt;/span&gt;&lt;span style=\&quot;color: #032F62\&quot;&gt;\&quot;#000\&quot;&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/cg-code-block&gt;\n&lt;h3&gt;background_color&lt;/h3&gt;\n&lt;p&gt;&lt;code&gt;background_color&lt;/code&gt;には、サイトで使われている背景色を指定します。&lt;/p&gt;\n&lt;cg-code-block&gt;&lt;pre&gt;&lt;code class=\&quot;lang-json\&quot;&gt;&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;{&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; &lt;/span&gt;&lt;span style=\&quot;color: #005CC5\&quot;&gt;\&quot;background_color\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;: &lt;/span&gt;&lt;span style=\&quot;color: #032F62\&quot;&gt;\&quot;#fff\&quot;&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/cg-code-block&gt;\n&lt;p&gt;一体なんの意味があるのだろうと不思議に思う方もいるかもしれません。&lt;code&gt;background_color&lt;/code&gt;はアイコンや&lt;code&gt;theme_color&lt;/code&gt;と併せて、ホーム画面からのスタート時に使われるプロパティです。次回以降に詳しく紹介します。&lt;/p&gt;\n&lt;h3&gt;display&lt;/h3&gt;\n&lt;p&gt;&lt;code&gt;display&lt;/code&gt;は、インストールされたアプリを立ち上げる際に使われる、ブラウザの表示モードを指定するメンバです。仕様では、4つの値が定義されています。&lt;/p&gt;\n&lt;table&gt;\n&lt;thead&gt;\n&lt;tr&gt;\n&lt;th&gt;値&lt;/th&gt;\n&lt;th&gt;表示モード&lt;/th&gt;\n&lt;/tr&gt;\n&lt;/thead&gt;\n&lt;tbody&gt;&lt;tr&gt;\n&lt;td&gt;&lt;strong&gt;browser&lt;/strong&gt;&lt;/td&gt;\n&lt;td&gt;通常のブラウザが立ち上がって、その中で表示&lt;/td&gt;\n&lt;/tr&gt;\n&lt;tr&gt;\n&lt;td&gt;&lt;strong&gt;standalone&lt;/strong&gt;&lt;/td&gt;\n&lt;td&gt;ネイティブアプリのように、アプリ固有のウインドウで表示&lt;/td&gt;\n&lt;/tr&gt;\n&lt;tr&gt;\n&lt;td&gt;&lt;strong&gt;minimal-ui&lt;/strong&gt;&lt;/td&gt;\n&lt;td&gt;アプリ内ブラウザのように、一部のブラウザUIをもった形で表示&lt;/td&gt;\n&lt;/tr&gt;\n&lt;tr&gt;\n&lt;td&gt;&lt;strong&gt;fullscreen&lt;/strong&gt;&lt;/td&gt;\n&lt;td&gt;ブラウザのツールバーや、スマートフォンでは画面上部のステータスバーもなしの状態で表示&lt;/td&gt;\n&lt;/tr&gt;\n&lt;/tbody&gt;&lt;/table&gt;\n&lt;p&gt;デフォルトは&lt;code&gt;browser&lt;/code&gt;になります。また、それぞれのモードがサポートされない環境では、別のモードにフォールバックされます。仕様では、「fullscreen→standalone→minimal-ui→browser」の順でフォールバックすると記されています。&lt;/p&gt;\n&lt;h3&gt;その他のメンバとフォールバック&lt;/h3&gt;\n&lt;p&gt;&lt;a href=\&quot;https://w3c.github.io/manifest/\&quot;&gt;Web App Manifest仕様&lt;/a&gt;には他にもメンバが定義されているのですが、今回紹介したものが主に使われるメンバかと思います。マニフェストファイルに仕様として必須とされているメンバはありません。しかし、ブラウザのUI実装によっては、「これが必要」とするものがあります。&lt;/p&gt;\n&lt;p&gt;なお、マニフェストに書かれていない情報については、Webアプリのインストール時に、そのページのHTML（meta要素など）から情報を得てもよいとされています。&lt;/p&gt;\n&lt;h2 id=\&quot;toc-6\&quot;&gt;まとめ&lt;/h2&gt;\n&lt;p&gt;今回はPWAの構成技術のひとつであるWeb App Manifestについて、その形式や書き方、メンバのいくつかを紹介しました。&lt;/p&gt;\n&lt;p&gt;マニフェストファイルについては紹介しましたが、それがどのように使われるのか、言葉ではわかりにくい概念もあります。次回はアイコンなどがどのように使われるのかを紹介します。&lt;/p&gt;\n&quot;],&quot;slug&quot;:[0,&quot;webappmanifest-1&quot;],&quot;description&quot;:[0,&quot;Web App Manifestは、PWAを実現する際に使われる技術のひとつです。まずはその構造とメンバを紹介します。&quot;],&quot;part&quot;:[0,&quot;第1回&quot;],&quot;expose&quot;:[0,true],&quot;toc&quot;:[1,[[0,{&quot;hash&quot;:[0,&quot;toc-1&quot;],&quot;title&quot;:[0,&quot;PWAとその機能&quot;]}],[0,{&quot;hash&quot;:[0,&quot;toc-2&quot;],&quot;title&quot;:[0,&quot;Web App Manifestとは&quot;]}],[0,{&quot;hash&quot;:[0,&quot;toc-3&quot;],&quot;title&quot;:[0,&quot;Web App Manifestの構造&quot;]}],[0,{&quot;hash&quot;:[0,&quot;toc-4&quot;],&quot;title&quot;:[0,&quot;マニフェストファイルをアプリと結びつける&quot;]}],[0,{&quot;hash&quot;:[0,&quot;toc-5&quot;],&quot;title&quot;:[0,&quot;マニフェストのメンバ紹介&quot;]}],[0,{&quot;hash&quot;:[0,&quot;toc-6&quot;],&quot;title&quot;:[0,&quot;まとめ&quot;]}]]],&quot;authors&quot;:[1,[[0,{&quot;slug&quot;:[0,&quot;myakura&quot;],&quot;name&quot;:[0,&quot;矢倉眞隆&quot;],&quot;title&quot;:[0,&quot;フロントエンド・エンジニア&quot;],&quot;affiliation&quot;:[0,&quot;PixelGrid Inc.&quot;],&quot;description&quot;:[0,&quot;2016年10月にピクセルグリッドへ入社。Web標準技術やブラウザの実装動向に明るく、イベントでの講演や雑誌・オンラインメディアへの原稿執筆、書籍の監修・監訳などを数多く経験。\n&lt;a href=\&quot;https://developers.google.com/community/experts/directory/profile/profile-masataka-yakura\&quot;&gt;Google Developer Expert&lt;/a&gt;としても活動中。&quot;],&quot;icon&quot;:[0,{&quot;url&quot;:[0,&quot;https://media.graphassets.com/PL6RA4caSLCMIJBdEYKn&quot;]}]}]]],&quot;series&quot;:[0,{&quot;slug&quot;:[0,&quot;webappmanifest&quot;],&quot;title&quot;:[0,&quot;Web App Manifest入門&quot;],&quot;alertStatus&quot;:[0,null],&quot;alertMessage&quot;:[0,null],&quot;relationalSerieses&quot;:[1,[]],&quot;categories&quot;:[1,[[0,{&quot;path&quot;:[0,&quot;javascript/browser-api&quot;],&quot;name&quot;:[0,&quot;ブラウザAPI&quot;],&quot;color&quot;:[0,&quot;LightBlue2&quot;],&quot;parent&quot;:[0,{&quot;path&quot;:[0,&quot;javascript&quot;],&quot;name&quot;:[0,&quot;JavaScript&quot;]}]}]]],&quot;articles&quot;:[1,[[0,{&quot;slug&quot;:[0,&quot;webappmanifest-1&quot;],&quot;part&quot;:[0,&quot;第1回&quot;],&quot;title&quot;:[0,&quot;マニフェストファイルの構造&quot;],&quot;issue&quot;:[0,{&quot;publishDate&quot;:[0,&quot;2018-12-13&quot;]}],&quot;authors&quot;:[1,[[0,{&quot;slug&quot;:[0,&quot;myakura&quot;],&quot;name&quot;:[0,&quot;矢倉眞隆&quot;],&quot;title&quot;:[0,&quot;フロントエンド・エンジニア&quot;],&quot;icon&quot;:[0,{&quot;url&quot;:[0,&quot;https://media.graphassets.com/PL6RA4caSLCMIJBdEYKn&quot;]}]}]]]}],[0,{&quot;slug&quot;:[0,&quot;webappmanifest-2&quot;],&quot;part&quot;:[0,&quot;第2回&quot;],&quot;title&quot;:[0,&quot;アイコンの指定&quot;],&quot;issue&quot;:[0,{&quot;publishDate&quot;:[0,&quot;2019-01-24&quot;]}],&quot;authors&quot;:[1,[[0,{&quot;slug&quot;:[0,&quot;myakura&quot;],&quot;name&quot;:[0,&quot;矢倉眞隆&quot;],&quot;title&quot;:[0,&quot;フロントエンド・エンジニア&quot;],&quot;icon&quot;:[0,{&quot;url&quot;:[0,&quot;https://media.graphassets.com/PL6RA4caSLCMIJBdEYKn&quot;]}]}]]]}],[0,{&quot;slug&quot;:[0,&quot;webappmanifest-3&quot;],&quot;part&quot;:[0,&quot;第3回&quot;],&quot;title&quot;:[0,&quot;スプラッシュスクリーンの設定&quot;],&quot;issue&quot;:[0,{&quot;publishDate&quot;:[0,&quot;2019-02-07&quot;]}],&quot;authors&quot;:[1,[[0,{&quot;slug&quot;:[0,&quot;myakura&quot;],&quot;name&quot;:[0,&quot;矢倉眞隆&quot;],&quot;title&quot;:[0,&quot;フロントエンド・エンジニア&quot;],&quot;icon&quot;:[0,{&quot;url&quot;:[0,&quot;https://media.graphassets.com/PL6RA4caSLCMIJBdEYKn&quot;]}]}]]]}],[0,{&quot;slug&quot;:[0,&quot;webappmanifest-4&quot;],&quot;part&quot;:[0,&quot;最終回&quot;],&quot;title&quot;:[0,&quot;PWAのインストールと関連API&quot;],&quot;issue&quot;:[0,{&quot;publishDate&quot;:[0,&quot;2019-03-14&quot;]}],&quot;authors&quot;:[1,[[0,{&quot;slug&quot;:[0,&quot;myakura&quot;],&quot;name&quot;:[0,&quot;矢倉眞隆&quot;],&quot;title&quot;:[0,&quot;フロントエンド・エンジニア&quot;],&quot;icon&quot;:[0,{&quot;url&quot;:[0,&quot;https://media.graphassets.com/PL6RA4caSLCMIJBdEYKn&quot;]}]}]]]}]]],&quot;seriesAuthors&quot;:[1,[[0,{&quot;slug&quot;:[0,&quot;myakura&quot;],&quot;name&quot;:[0,&quot;矢倉眞隆&quot;],&quot;title&quot;:[0,&quot;フロントエンド・エンジニア&quot;],&quot;icon&quot;:[0,{&quot;url&quot;:[0,&quot;https://media.graphassets.com/PL6RA4caSLCMIJBdEYKn&quot;]}]}]]]}],&quot;issue&quot;:[0,{&quot;publishDate&quot;:[0,&quot;2018-12-13&quot;],&quot;number&quot;:[0,322]}],&quot;nextArticle&quot;:[0,{&quot;slug&quot;:[0,&quot;webappmanifest-2&quot;],&quot;part&quot;:[0,&quot;第2回&quot;],&quot;title&quot;:[0,&quot;アイコンの指定&quot;],&quot;issue&quot;:[0,{&quot;publishDate&quot;:[0,&quot;2019-01-24&quot;]}],&quot;authors&quot;:[1,[[0,{&quot;slug&quot;:[0,&quot;myakura&quot;],&quot;name&quot;:[0,&quot;矢倉眞隆&quot;],&quot;title&quot;:[0,&quot;フロントエンド・エンジニア&quot;],&quot;icon&quot;:[0,{&quot;url&quot;:[0,&quot;https://media.graphassets.com/PL6RA4caSLCMIJBdEYKn&quot;]}]}]]]}],&quot;tweetUrl&quot;:[0,&quot;https://twitter.com/intent/tweet?text=Web+App+Manifest%E5%85%A5%E9%96%80+-+%E3%83%9E%E3%83%8B%E3%83%95%E3%82%A7%E3%82%B9%E3%83%88%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E6%A7%8B%E9%80%A0&amp;url=https%3A%2F%2Fwww.codegrid.net%2Farticles%2Fwebappmanifest-1%2F&amp;hashtags=codegrid&amp;related=CodeGrid&quot;],&quot;pageTitle&quot;:[0,&quot;Web App Manifest入門 | 第1回マニフェストファイルの構造&quot;]}],&quot;reads&quot;:[0,null],&quot;class&quot;:[0,&quot;astro-jwu2ctgo&quot;]}" ssr="" client="idle" opts="{&quot;name&quot;:&quot;Header&quot;,&quot;value&quot;:true}" await-children=""><header class="cg-Article_Head -LightBlue2 svelte-13by8pk"><div class="cg-Article_HeadInner svelte-13by8pk"><h2 class="cg-Article_HeadTitle svelte-13by8pk"><a class="cg-Article_HeadSeries svelte-13by8pk" href="/series/webappmanifest/">Web App Manifest入門</a> <span class="cg-Article_HeadPart svelte-13by8pk">第1回</span> <span class="cg-Article_HeadTitleText svelte-13by8pk">マニフェストファイルの構造</span></h2> <p class="cg-Article_HeadDescription svelte-13by8pk">Web App Manifestは、PWAを実現する際に使われる技術のひとつです。まずはその構造とメンバを紹介します。</p> <div class="cg-Article_HeadCategoriesAndDate svelte-13by8pk"><div class="cg-Article_HeadCategoryContainer svelte-13by8pk"><dl class="cg-LinearCategoryLinks svelte-rligjt"><dt class="cmn-VisuallyHidden" data-svelte-h="svelte-1uadum">カテゴリー</dt><dd class="cg-LinearCategoryLinks_Item -parent svelte-rligjt"><a class="cg-LinearCategoryLinks_Link svelte-rligjt" href="/categories/javascript/">JavaScript</a> <span class="svelte-rligjt" data-svelte-h="svelte-x0xyl0">&gt;</span> </dd> <dd class="cg-LinearCategoryLinks_Item svelte-rligjt"><a class="cg-LinearCategoryLinks_Link svelte-rligjt" href="/categories/javascript/browser-api/">ブラウザAPI</a> </dd></dl></div> <p class="cg-Article_HeadDateContainer svelte-13by8pk"><time class="cg-Article_HeadDateText svelte-13by8pk" datetime="2018-12-13">2018年12月13日</time> <span class="cg-Article_HeadDateText svelte-13by8pk" data-svelte-h="svelte-1a8nwhc">発行</span></p></div> <div class="cg-Article_HeadAuthorContainer svelte-13by8pk"><div class="cg-Article_HeadAuthor svelte-13by8pk"><a class="cg-Article_HeadAuthorLink svelte-13by8pk" href="/authors/myakura/"><img class="cg-Article_HeadAuthorImg svelte-13by8pk" src="https://media.graphassets.com/resize=w:60/compress/PL6RA4caSLCMIJBdEYKn" alt="" width="30" height="30"/> <span class="cmn-VisuallyHidden" data-svelte-h="svelte-1yhy54r">著者</span> <span class="cg-Article_HeadAuthorName svelte-13by8pk">矢倉眞隆</span> <span class="cg-Article_HeadAuthorPosition svelte-13by8pk">フロントエンド・エンジニア</span></a></div></div> <div class="cg-Article_HeadNav svelte-13by8pk"><a href="/series/webappmanifest/" class="cg-Article_HeadSeriesListLink svelte-13by8pk"><svg class="cg-Article_HeadSeriesListLinkIcon svelte-13by8pk" width="11" height="19" viewbox="0 0 11 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 1.9L3.72396 9.5L11 17.1L9.16667 19L0 9.5L9.16667 0L11 1.9Z"/></svg> <span class="cg-Article_HeadSeriesListLinkText svelte-13by8pk"><span class="cmn-VisuallyHidden">Web App Manifest入門</span> シリーズの記事一覧</span></a> </div></div> </header></astro-island>  <astro-island uid="Z1nJShW" component-url="/_astro/SeriesNav.C7vcEwSJ.js" component-export="default" renderer-url="/_astro/client.Cx1FBVJX.js" props="{&quot;articles&quot;:[1,[[0,{&quot;slug&quot;:[0,&quot;webappmanifest-1&quot;],&quot;part&quot;:[0,&quot;第1回&quot;],&quot;title&quot;:[0,&quot;マニフェストファイルの構造&quot;],&quot;issue&quot;:[0,{&quot;publishDate&quot;:[0,&quot;2018-12-13&quot;]}],&quot;authors&quot;:[1,[[0,{&quot;slug&quot;:[0,&quot;myakura&quot;],&quot;name&quot;:[0,&quot;矢倉眞隆&quot;],&quot;title&quot;:[0,&quot;フロントエンド・エンジニア&quot;],&quot;icon&quot;:[0,{&quot;url&quot;:[0,&quot;https://media.graphassets.com/PL6RA4caSLCMIJBdEYKn&quot;]}]}]]]}],[0,{&quot;slug&quot;:[0,&quot;webappmanifest-2&quot;],&quot;part&quot;:[0,&quot;第2回&quot;],&quot;title&quot;:[0,&quot;アイコンの指定&quot;],&quot;issue&quot;:[0,{&quot;publishDate&quot;:[0,&quot;2019-01-24&quot;]}],&quot;authors&quot;:[1,[[0,{&quot;slug&quot;:[0,&quot;myakura&quot;],&quot;name&quot;:[0,&quot;矢倉眞隆&quot;],&quot;title&quot;:[0,&quot;フロントエンド・エンジニア&quot;],&quot;icon&quot;:[0,{&quot;url&quot;:[0,&quot;https://media.graphassets.com/PL6RA4caSLCMIJBdEYKn&quot;]}]}]]]}],[0,{&quot;slug&quot;:[0,&quot;webappmanifest-3&quot;],&quot;part&quot;:[0,&quot;第3回&quot;],&quot;title&quot;:[0,&quot;スプラッシュスクリーンの設定&quot;],&quot;issue&quot;:[0,{&quot;publishDate&quot;:[0,&quot;2019-02-07&quot;]}],&quot;authors&quot;:[1,[[0,{&quot;slug&quot;:[0,&quot;myakura&quot;],&quot;name&quot;:[0,&quot;矢倉眞隆&quot;],&quot;title&quot;:[0,&quot;フロントエンド・エンジニア&quot;],&quot;icon&quot;:[0,{&quot;url&quot;:[0,&quot;https://media.graphassets.com/PL6RA4caSLCMIJBdEYKn&quot;]}]}]]]}],[0,{&quot;slug&quot;:[0,&quot;webappmanifest-4&quot;],&quot;part&quot;:[0,&quot;最終回&quot;],&quot;title&quot;:[0,&quot;PWAのインストールと関連API&quot;],&quot;issue&quot;:[0,{&quot;publishDate&quot;:[0,&quot;2019-03-14&quot;]}],&quot;authors&quot;:[1,[[0,{&quot;slug&quot;:[0,&quot;myakura&quot;],&quot;name&quot;:[0,&quot;矢倉眞隆&quot;],&quot;title&quot;:[0,&quot;フロントエンド・エンジニア&quot;],&quot;icon&quot;:[0,{&quot;url&quot;:[0,&quot;https://media.graphassets.com/PL6RA4caSLCMIJBdEYKn&quot;]}]}]]]}]]],&quot;class&quot;:[0,&quot;astro-jwu2ctgo&quot;]}" ssr="" client="load" opts="{&quot;name&quot;:&quot;SeriesNav&quot;,&quot;value&quot;:true}" await-children=""><div class="cg-Article_SeriesNav svelte-uzgvxa"><div class="cg-Article_SeriesNavInner svelte-uzgvxa"><button type="button" class="cg-Article_SeriesNavToggler svelte-uzgvxa" aria-controls="series-nav-links" aria-expanded="false"><svg class="cg-Article_SeriesNavTogglerIcon" width="12" height="13" viewbox="0 0 12 13" fill="none" xmlns="https://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 1.36364V10.9091C0 11.2784 0.131943 11.598 0.395833 11.8679C0.659724 12.1378 0.972221 12.2727 1.33333 12.2727H10.6667C11.0278 12.2727 11.3403 12.1378 11.6042 11.8679C11.8681 11.598 12 11.2784 12 10.9091V1.36364C12 0.994317 11.8681 0.674716 11.6042 0.404831C11.3403 0.134943 11.0278 0 10.6667 0H1.33333C0.972221 0 0.659724 0.134943 0.395833 0.404831C0.131943 0.674716 0 0.994317 0 1.36364ZM10.6667 10.9091H1.33333V1.36364H10.6667V10.9091ZM3.33333 6.81818H5.33333V8.86364C5.33333 9.0625 5.39583 9.22585 5.52083 9.35369C5.64583 9.48154 5.80555 9.54545 6 9.54545C6.19445 9.54545 6.35417 9.48154 6.47917 9.35369C6.60417 9.22585 6.66667 9.0625 6.66667 8.86364V6.81818H8.66667C8.86111 6.81818 9.02083 6.75426 9.14583 6.62642C9.27083 6.49858 9.33333 6.33523 9.33333 6.13636C9.33333 5.9375 9.27083 5.77415 9.14583 5.64631C9.02083 5.51846 8.86111 5.45455 8.66667 5.45455H6.66667V3.40909C6.66667 3.21023 6.60417 3.04688 6.47917 2.91903C6.35417 2.79119 6.19445 2.72727 6 2.72727C5.80555 2.72727 5.64583 2.79119 5.52083 2.91903C5.39583 3.04688 5.33333 3.21023 5.33333 3.40909V5.45455H3.33333C3.13889 5.45455 2.97917 5.51846 2.85417 5.64631C2.72917 5.77415 2.66667 5.9375 2.66667 6.13636C2.66667 6.33523 2.72917 6.49858 2.85417 6.62642C2.97917 6.75426 3.13889 6.81818 3.33333 6.81818Z"/></svg> <span class="cg-Article_SeriesNavTogglerText svelte-uzgvxa" data-svelte-h="svelte-4c825v">このシリーズの記事</span></button> </div> </div></astro-island> <div class="cg-Article_Body astro-jwu2ctgo"> <div class="cg-Article_TocContainer astro-jwu2ctgo"> <nav class="cg-Toc astro-b3kuqdil" aria-label="toc"> <h2 id="toc" class="cg-Toc_Title astro-b3kuqdil">目次</h2> <ol class="astro-b3kuqdil"> <li class="astro-b3kuqdil"> <a href="#toc-1" class="astro-b3kuqdil">PWAとその機能</a> </li><li class="astro-b3kuqdil"> <a href="#toc-2" class="astro-b3kuqdil">Web App Manifestとは</a> </li><li class="astro-b3kuqdil"> <a href="#toc-3" class="astro-b3kuqdil">Web App Manifestの構造</a> </li><li class="astro-b3kuqdil"> <a href="#toc-4" class="astro-b3kuqdil">マニフェストファイルをアプリと結びつける</a> </li><li class="astro-b3kuqdil"> <a href="#toc-5" class="astro-b3kuqdil">マニフェストのメンバ紹介</a> </li><li class="astro-b3kuqdil"> <a href="#toc-6" class="astro-b3kuqdil">まとめ</a> </li> </ol> </nav> </div> <astro-island uid="1DlBy0" component-url="/_astro/Content.FpXd31oQ.js" component-export="default" renderer-url="/_astro/client.Cx1FBVJX.js" props="{&quot;isSubscriber&quot;:[0,false],&quot;article&quot;:[0,{&quot;title&quot;:[0,&quot;マニフェストファイルの構造&quot;],&quot;body&quot;:[0,&quot;&lt;h2 id=\&quot;toc-1\&quot;&gt;PWAとその機能&lt;/h2&gt;\n&lt;p&gt;PWA（Progressive Web Apps：プログレッシブウェブアプリ）という言葉を聞いたことがある方も増えてきたのではないかと思います。PWAのこれといった定義はありませんが、いくつかの新しい技術を使って、ネイティブアプリのような機能を持ったWebアプリを実現したものをそう呼びます。&lt;/p&gt;\n&lt;p&gt;「ネイティブアプリのような機能」も、なかなかふんわりとしていますが、以下の機能が挙げられることが多いでしょう。&lt;/p&gt;\n&lt;ul&gt;\n&lt;li&gt;インストール（ホーム画面に追加）できる&lt;/li&gt;\n&lt;li&gt;オフラインやネット接続が不安定な状態で開いても使える&lt;/li&gt;\n&lt;li&gt;プッシュ通知が送られてくる&lt;/li&gt;\n&lt;/ul&gt;\n&lt;p&gt;ただ、このシリーズはPWAそのものについて紹介するものではありません。このシリーズで取り上げるのは、Web App Manifestと呼ばれるものです。&lt;/p&gt;\n&lt;p&gt;先ほど「いくつかの新しい技術を使って」と述べましたが、PWAには複数の技術が関わります。なかでも代表的なものにService Workerがあります。CodeGridでもすでに取り上げている、PWAの中核技術です。&lt;/p&gt;\n&lt;ul&gt;\n&lt;li&gt;&lt;a href=\&quot;https://app.codegrid.net/series/2016-service-worker\&quot;&gt;Service Worker、はじめの一歩 | CodeGrid&lt;/a&gt;&lt;/li&gt;\n&lt;/ul&gt;\n&lt;p&gt;このシリーズで解説するWeb App Manifestも、PWAを実現する際に使われる技術のひとつです。&lt;/p&gt;\n&lt;ul&gt;\n&lt;li&gt;&lt;a href=\&quot;https://w3c.github.io/manifest/\&quot;&gt;Web App Manifest&lt;/a&gt;&lt;/li&gt;\n&lt;/ul&gt;\n&lt;h2 id=\&quot;toc-2\&quot;&gt;Web App Manifestとは&lt;/h2&gt;\n&lt;p&gt;Web App Manifestは、Webアプリのタイトルやアイコンなどについてまとめたファイルです。&lt;/p&gt;\n&lt;p&gt;このファイルがどこで使われるかというと、主にWebアプリのインストール時です。PWAの特徴のところで「インストールできる」と述べました。気に入ったWebアプリがPWAの場合、それをインストールすると、アプリ一覧もしくはホーム画面に追加されます。このときに、Web App Manifestに書かれているアプリの名前やアイコンのURLが使われるわけです。&lt;/p&gt;\n&lt;p&gt;機能としてはHTMLのmeta要素、特にOGP（Open Graph Protocol）に書いてある情報と似ています。Web App Manifestはそれらの情報を、外部ファイルにしたようなものと考えるとわかりやすいでしょうか。&lt;/p&gt;\n&lt;h2 id=\&quot;toc-3\&quot;&gt;Web App Manifestの構造&lt;/h2&gt;\n&lt;p&gt;Web App Manifestは、アプリに関する情報をJSON形式でまとめたファイルです（以下、「マニフェストファイル」と呼びます）。CodeGridは残念ながらPWAにはなってないのですが、PWA化したとすると、マニフェストファイルは次のようになるでしょう。&lt;/p&gt;\n&lt;cg-code-block&gt;&lt;h3&gt;CodeGridのマニフェストファイル（予想）&lt;/h3&gt;&lt;pre&gt;&lt;code class=\&quot;lang-json\&quot;&gt;&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;{&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; &lt;/span&gt;&lt;span style=\&quot;color: #005CC5\&quot;&gt;\&quot;name\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;: &lt;/span&gt;&lt;span style=\&quot;color: #032F62\&quot;&gt;\&quot;CodeGrid — フロントエンドに関わる人々のガイド\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;,&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; &lt;/span&gt;&lt;span style=\&quot;color: #005CC5\&quot;&gt;\&quot;short_name\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;: &lt;/span&gt;&lt;span style=\&quot;color: #032F62\&quot;&gt;\&quot;CodeGrid\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;,&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; &lt;/span&gt;&lt;span style=\&quot;color: #005CC5\&quot;&gt;\&quot;theme_color\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;: &lt;/span&gt;&lt;span style=\&quot;color: #032F62\&quot;&gt;\&quot;#000\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;,&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; &lt;/span&gt;&lt;span style=\&quot;color: #005CC5\&quot;&gt;\&quot;icons\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;: [&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; {&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; &lt;/span&gt;&lt;span style=\&quot;color: #005CC5\&quot;&gt;\&quot;src\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;: &lt;/span&gt;&lt;span style=\&quot;color: #032F62\&quot;&gt;\&quot;icon/icon.png\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;,&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; &lt;/span&gt;&lt;span style=\&quot;color: #005CC5\&quot;&gt;\&quot;sizes\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;: &lt;/span&gt;&lt;span style=\&quot;color: #032F62\&quot;&gt;\&quot;192x192\&quot;&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; }&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; ]&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/cg-code-block&gt;\n&lt;p&gt;記述する項目については後で取り上げますが、それぞれが何をしているか、おおよその検討がつくのではないでしょうか。&lt;/p&gt;\n&lt;p&gt;マニフェストファイルの文字エンコーディングはUTF-8で記述します。また、拡張子は&lt;code&gt;.webmanifest&lt;/code&gt;で、MIMEタイプは&lt;code&gt;text/webappmanifest&lt;/code&gt;が推奨*されています。&lt;/p&gt;\n&lt;cg-note&gt;\n &lt;h3&gt;*注：JSONファイルでも動作に問題はないけれど&lt;/h3&gt;\n \n\n&lt;p&gt;拡張子とMIMEタイプについては推奨されているだけで、&lt;code&gt;application/json&lt;/code&gt;で送られる&lt;code&gt;.json&lt;/code&gt;ファイルでも動作に問題はありません。ではなぜ推奨の設定があるかというと、専用の拡張子やMIMEタイプであれば、キャッシュなどのサーバー上の設定を、他のJSONファイルと分けて設定しやすくできるというねらいからです。&lt;/p&gt;\n\n\n &lt;/cg-note&gt;\n&lt;h2 id=\&quot;toc-4\&quot;&gt;マニフェストファイルをアプリと結びつける&lt;/h2&gt;\n&lt;p&gt;中に記述するものの詳細の前に、マニフェストファイルをWebアプリに結びつける方法を紹介します。マニフェストファイルとアプリは別のファイルですから、当然ながら関連付けないといけません。&lt;/p&gt;\n&lt;p&gt;マニフェストファイルは、HTMLのlink要素を使ってWebアプリと関連付けます。&lt;/p&gt;\n&lt;cg-code-block&gt;&lt;pre&gt;&lt;code class=\&quot;lang-html\&quot;&gt;&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span style=\&quot;color: #22863A\&quot;&gt;link&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; &lt;/span&gt;&lt;span style=\&quot;color: #6F42C1\&quot;&gt;rel&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;=&lt;/span&gt;&lt;span style=\&quot;color: #032F62\&quot;&gt;\&quot;manifest\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; &lt;/span&gt;&lt;span style=\&quot;color: #6F42C1\&quot;&gt;href&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;=&lt;/span&gt;&lt;span style=\&quot;color: #032F62\&quot;&gt;\&quot;/manifest.webmanifest\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/cg-code-block&gt;\n&lt;p&gt;&lt;code&gt;rel=\&quot;manifest\&quot;&lt;/code&gt;を指定したlink要素で、マニフェストファイルの場所をリンクすればOKです。&lt;/p&gt;\n&lt;p&gt;マニフェストファイルを置く場所は、後述する&lt;code&gt;start_url&lt;/code&gt;と同一オリジンの範囲内であれば問題ありません。&lt;/p&gt;\n&lt;h2 id=\&quot;toc-5\&quot;&gt;マニフェストのメンバ紹介&lt;/h2&gt;\n&lt;p&gt;マニフェストファイルの例で、記述する項目（メンバ）を少しお見せしました。Web App Manifest仕様では、執筆時点で20個近くものメンバが定義されています。すべてではありませんが、どのようなメンバがあるかを紹介します。&lt;/p&gt;\n&lt;h3&gt;name&lt;/h3&gt;\n&lt;p&gt;アプリの名前を記述します。ここで指定される名前が基本的に使われますが、状況によっては次に紹介する&lt;code&gt;short_name&lt;/code&gt;が使われます。&lt;/p&gt;\n&lt;h3&gt;short_name&lt;/h3&gt;\n&lt;p&gt;アプリの短い名前を記述します。「短い名前」とは何かというと、ホーム画面やアプリ一覧画面などの表示領域が限られているときに使われる名前です。&lt;/p&gt;\n&lt;p&gt;たとえば、「CodeGrid — フロントエンドに関わる人々のガイド」は、アプリ一覧にはとうてい収まらないでしょう。「CodeGrid」であればかろうじて収まりそうです。&lt;/p&gt;\n&lt;cg-imgbox src=\&quot;https://cdn.codegrid.net/2018-webappmanifest/img/screenshot-1-name-shortname.jpg\&quot; caption=\&quot;長い名前は収まらない\&quot; alt=\&quot;スクリーンショット：アプリ一覧でshort_nameとnameを並べたもの\&quot;&gt;&lt;p&gt;「CodeGrid」（中央左）と「CodeGrid — フロントエンドに関わる人々のガイド」（中央右）で実験。後者の場合、すべて収まらずに途切れてしまう。\n&lt;/p&gt;&lt;/cg-imgbox&gt;\n&lt;p&gt;&lt;code&gt;short_name&lt;/code&gt;に文字数の制限はありません。しかし、ホーム画面やアプリ一覧の文字数を見るのに、英数では10文字程度、日本語であれば5文字程度がいいのではないかと筆者は思っています。場合によってはブランド名を短縮するなどの思い切り*も必要でしょう。&lt;/p&gt;\n&lt;cg-note&gt;\n &lt;h3&gt;*注：短縮の思い切り&lt;/h3&gt;\n \n\n&lt;p&gt;たとえば、CodeGridが素晴らしい支払いサービス「CodeGridペイメント」を新しく発表したとしましょう。しかしこの文字数では、ホーム画面などでは「CodeGridペ…」などと表示されてしまいそうです。こんなときには、ブランド名である「CodeGrid」でさえも短縮し、「CGペイ」などにするのがおそらくよいでしょう。ブランディングはアイコンに任せればよいのですから。&lt;/p&gt;\n\n\n &lt;/cg-note&gt;\n&lt;h3&gt;lang&lt;/h3&gt;\n&lt;p&gt;&lt;code&gt;lang&lt;/code&gt;に指定するのは、アプリで使われている言語です。形式は&lt;a href=\&quot;https://ja.wikipedia.org/wiki/IETF%E8%A8%80%E8%AA%9E%E3%82%BF%E3%82%B0\&quot;&gt;言語タグ&lt;/a&gt;で指定します。通常はアプリのHTMLに指定されている&lt;code&gt;lang&lt;/code&gt;属性と同じ値が使われるでしょう。CodeGridは日本語で書かれているので、&lt;code&gt;ja&lt;/code&gt;になります。&lt;/p&gt;\n&lt;p&gt;言語は1つしか指定できません。複数の言語でWebアプリが提供されている場合は、サーバー側で言語・地域の判定をし、それに応じて言語・地域別のマニフェストファイルを出し分けるとよいとされています。&lt;/p&gt;\n&lt;h3&gt;start_url&lt;/h3&gt;\n&lt;p&gt;&lt;code&gt;start_url&lt;/code&gt;には、インストールされたWebアプリを立ち上げたときに開くURLを指定します。Webアプリのディレクトリ構成にもよりますが、ルートやディレクトリのルートを指定するのが多くなりそうです。&lt;/p&gt;\n&lt;cg-code-block&gt;&lt;pre&gt;&lt;code class=\&quot;lang-json\&quot;&gt;&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;{&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; &lt;/span&gt;&lt;span style=\&quot;color: #005CC5\&quot;&gt;\&quot;start_url\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;: &lt;/span&gt;&lt;span style=\&quot;color: #032F62\&quot;&gt;\&quot;/\&quot;&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/cg-code-block&gt;\n&lt;p&gt;指定するURLは、マニフェストファイルのURLと同一オリジン*でないといけません。ですので、別のサーバーにマニフェストだけを置いたりといったことはできません。&lt;/p&gt;\n&lt;cg-note&gt;\n &lt;h3&gt;*注：オリジン&lt;/h3&gt;\n \n\n&lt;p&gt;オリジンや同一オリジンの詳細は&lt;a href=\&quot;https://app.codegrid.net/entry/2018-a-element-3#toc-1\&quot;&gt;a要素の連載で簡単に取り上げた&lt;/a&gt;ので、そちらをお読みください。&lt;/p&gt;\n\n\n &lt;/cg-note&gt;\n&lt;p&gt;&lt;code&gt;start_url&lt;/code&gt;にパラメータを与え、アクセス解析ツールと結びつければ、PWAからのアクセスも計測もできるでしょう。&lt;/p&gt;\n&lt;cg-code-block&gt;&lt;pre&gt;&lt;code class=\&quot;lang-json\&quot;&gt;&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;{&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; &lt;/span&gt;&lt;span style=\&quot;color: #005CC5\&quot;&gt;\&quot;start_url\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;: &lt;/span&gt;&lt;span style=\&quot;color: #032F62\&quot;&gt;\&quot;/?source=pwa\&quot;&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/cg-code-block&gt;\n&lt;p&gt;しかし、個別のIDを与えてのトラッキングなどは控えるべきです。ブラウザ側も&lt;code&gt;start_url&lt;/code&gt;を無視する実装などが認められているので、「このアドレスだからPWAだ」と一概には言えない場合もあるでしょう。&lt;/p&gt;\n&lt;h3&gt;icons&lt;/h3&gt;\n&lt;p&gt;&lt;code&gt;icons&lt;/code&gt;には、アプリのアイコンを指定します。アイコンは、大きさや画像フォーマットごとに複数指定できます。&lt;/p&gt;\n&lt;cg-code-block&gt;&lt;pre&gt;&lt;code class=\&quot;lang-json\&quot;&gt;&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;{&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; &lt;/span&gt;&lt;span style=\&quot;color: #005CC5\&quot;&gt;\&quot;icons\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;: [&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; {&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; &lt;/span&gt;&lt;span style=\&quot;color: #005CC5\&quot;&gt;\&quot;src\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;: &lt;/span&gt;&lt;span style=\&quot;color: #032F62\&quot;&gt;\&quot;icon/icon-192.png\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;,&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; &lt;/span&gt;&lt;span style=\&quot;color: #005CC5\&quot;&gt;\&quot;sizes\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;: &lt;/span&gt;&lt;span style=\&quot;color: #032F62\&quot;&gt;\&quot;192x192\&quot;&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; },&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; {&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; &lt;/span&gt;&lt;span style=\&quot;color: #005CC5\&quot;&gt;\&quot;src\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;: &lt;/span&gt;&lt;span style=\&quot;color: #032F62\&quot;&gt;\&quot;icon/icon.svg\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;,&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; &lt;/span&gt;&lt;span style=\&quot;color: #005CC5\&quot;&gt;\&quot;sizes\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;: &lt;/span&gt;&lt;span style=\&quot;color: #032F62\&quot;&gt;\&quot;192x192 256x256 512x512\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;,&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; &lt;/span&gt;&lt;span style=\&quot;color: #005CC5\&quot;&gt;\&quot;type\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;: &lt;/span&gt;&lt;span style=\&quot;color: #032F62\&quot;&gt;\&quot;image/svg+xml\&quot;&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; },&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; {&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; &lt;/span&gt;&lt;span style=\&quot;color: #005CC5\&quot;&gt;\&quot;src\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;: &lt;/span&gt;&lt;span style=\&quot;color: #032F62\&quot;&gt;\&quot;icon/icon-192.webp\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;,&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; &lt;/span&gt;&lt;span style=\&quot;color: #005CC5\&quot;&gt;\&quot;sizes\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;: &lt;/span&gt;&lt;span style=\&quot;color: #032F62\&quot;&gt;\&quot;192x192\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;,&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; &lt;/span&gt;&lt;span style=\&quot;color: #005CC5\&quot;&gt;\&quot;type\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;: &lt;/span&gt;&lt;span style=\&quot;color: #032F62\&quot;&gt;\&quot;image/webp\&quot;&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; }&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; ]&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/cg-code-block&gt;\n&lt;p&gt;&lt;code&gt;src&lt;/code&gt;はimg要素の&lt;code&gt;src&lt;/code&gt;属性と同じように、画像のURLを指定します。&lt;/p&gt;\n&lt;p&gt;&lt;code&gt;sizes&lt;/code&gt;には、&lt;code&gt;192x192&lt;/code&gt;のように、縦と横の大きさを&lt;code&gt;x&lt;/code&gt;でつなげたものを、空白区切りで複数指定できます。&lt;/p&gt;\n&lt;p&gt;&lt;code&gt;type&lt;/code&gt;は、画像のMIMEタイプを指定します。基本的にはPNGやJPEGでよいでしょうが、容量や色表現の都合で、WebPやHEIFなど新しいフォーマットを使いたい場合などは、そのMIMEタイプを合わせて指定します。&lt;/p&gt;\n&lt;p&gt;アイコンはホーム画面やアプリ一覧で使われるほか、一部のブラウザではスタート時にも使われます。これについては次回以降に説明します。&lt;/p&gt;\n&lt;h3&gt;theme_color&lt;/h3&gt;\n&lt;p&gt;&lt;code&gt;theme_color&lt;/code&gt;には、アプリのブランドカラーとなるような色を指定します。CodeGridであれば黒ですので、&lt;code&gt;#000&lt;/code&gt;でしょうか。&lt;/p&gt;\n&lt;cg-code-block&gt;&lt;pre&gt;&lt;code class=\&quot;lang-json\&quot;&gt;&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;{&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; &lt;/span&gt;&lt;span style=\&quot;color: #005CC5\&quot;&gt;\&quot;theme_color\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;: &lt;/span&gt;&lt;span style=\&quot;color: #032F62\&quot;&gt;\&quot;#000\&quot;&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/cg-code-block&gt;\n&lt;h3&gt;background_color&lt;/h3&gt;\n&lt;p&gt;&lt;code&gt;background_color&lt;/code&gt;には、サイトで使われている背景色を指定します。&lt;/p&gt;\n&lt;cg-code-block&gt;&lt;pre&gt;&lt;code class=\&quot;lang-json\&quot;&gt;&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;{&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt; &lt;/span&gt;&lt;span style=\&quot;color: #005CC5\&quot;&gt;\&quot;background_color\&quot;&lt;/span&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;: &lt;/span&gt;&lt;span style=\&quot;color: #032F62\&quot;&gt;\&quot;#fff\&quot;&lt;/span&gt;&lt;/span&gt;\n&lt;span class=\&quot;line\&quot;&gt;&lt;span style=\&quot;color: #24292E\&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/cg-code-block&gt;\n&lt;p&gt;一体なんの意味があるのだろうと不思議に思う方もいるかもしれません。&lt;code&gt;background_color&lt;/code&gt;はアイコンや&lt;code&gt;theme_color&lt;/code&gt;と併せて、ホーム画面からのスタート時に使われるプロパティです。次回以降に詳しく紹介します。&lt;/p&gt;\n&lt;h3&gt;display&lt;/h3&gt;\n&lt;p&gt;&lt;code&gt;display&lt;/code&gt;は、インストールされたアプリを立ち上げる際に使われる、ブラウザの表示モードを指定するメンバです。仕様では、4つの値が定義されています。&lt;/p&gt;\n&lt;table&gt;\n&lt;thead&gt;\n&lt;tr&gt;\n&lt;th&gt;値&lt;/th&gt;\n&lt;th&gt;表示モード&lt;/th&gt;\n&lt;/tr&gt;\n&lt;/thead&gt;\n&lt;tbody&gt;&lt;tr&gt;\n&lt;td&gt;&lt;strong&gt;browser&lt;/strong&gt;&lt;/td&gt;\n&lt;td&gt;通常のブラウザが立ち上がって、その中で表示&lt;/td&gt;\n&lt;/tr&gt;\n&lt;tr&gt;\n&lt;td&gt;&lt;strong&gt;standalone&lt;/strong&gt;&lt;/td&gt;\n&lt;td&gt;ネイティブアプリのように、アプリ固有のウインドウで表示&lt;/td&gt;\n&lt;/tr&gt;\n&lt;tr&gt;\n&lt;td&gt;&lt;strong&gt;minimal-ui&lt;/strong&gt;&lt;/td&gt;\n&lt;td&gt;アプリ内ブラウザのように、一部のブラウザUIをもった形で表示&lt;/td&gt;\n&lt;/tr&gt;\n&lt;tr&gt;\n&lt;td&gt;&lt;strong&gt;fullscreen&lt;/strong&gt;&lt;/td&gt;\n&lt;td&gt;ブラウザのツールバーや、スマートフォンでは画面上部のステータスバーもなしの状態で表示&lt;/td&gt;\n&lt;/tr&gt;\n&lt;/tbody&gt;&lt;/table&gt;\n&lt;p&gt;デフォルトは&lt;code&gt;browser&lt;/code&gt;になります。また、それぞれのモードがサポートされない環境では、別のモードにフォールバックされます。仕様では、「fullscreen→standalone→minimal-ui→browser」の順でフォールバックすると記されています。&lt;/p&gt;\n&lt;h3&gt;その他のメンバとフォールバック&lt;/h3&gt;\n&lt;p&gt;&lt;a href=\&quot;https://w3c.github.io/manifest/\&quot;&gt;Web App Manifest仕様&lt;/a&gt;には他にもメンバが定義されているのですが、今回紹介したものが主に使われるメンバかと思います。マニフェストファイルに仕様として必須とされているメンバはありません。しかし、ブラウザのUI実装によっては、「これが必要」とするものがあります。&lt;/p&gt;\n&lt;p&gt;なお、マニフェストに書かれていない情報については、Webアプリのインストール時に、そのページのHTML（meta要素など）から情報を得てもよいとされています。&lt;/p&gt;\n&lt;h2 id=\&quot;toc-6\&quot;&gt;まとめ&lt;/h2&gt;\n&lt;p&gt;今回はPWAの構成技術のひとつであるWeb App Manifestについて、その形式や書き方、メンバのいくつかを紹介しました。&lt;/p&gt;\n&lt;p&gt;マニフェストファイルについては紹介しましたが、それがどのように使われるのか、言葉ではわかりにくい概念もあります。次回はアイコンなどがどのように使われるのかを紹介します。&lt;/p&gt;\n&quot;],&quot;slug&quot;:[0,&quot;webappmanifest-1&quot;],&quot;description&quot;:[0,&quot;Web App Manifestは、PWAを実現する際に使われる技術のひとつです。まずはその構造とメンバを紹介します。&quot;],&quot;part&quot;:[0,&quot;第1回&quot;],&quot;expose&quot;:[0,true],&quot;toc&quot;:[1,[[0,{&quot;hash&quot;:[0,&quot;toc-1&quot;],&quot;title&quot;:[0,&quot;PWAとその機能&quot;]}],[0,{&quot;hash&quot;:[0,&quot;toc-2&quot;],&quot;title&quot;:[0,&quot;Web App Manifestとは&quot;]}],[0,{&quot;hash&quot;:[0,&quot;toc-3&quot;],&quot;title&quot;:[0,&quot;Web App Manifestの構造&quot;]}],[0,{&quot;hash&quot;:[0,&quot;toc-4&quot;],&quot;title&quot;:[0,&quot;マニフェストファイルをアプリと結びつける&quot;]}],[0,{&quot;hash&quot;:[0,&quot;toc-5&quot;],&quot;title&quot;:[0,&quot;マニフェストのメンバ紹介&quot;]}],[0,{&quot;hash&quot;:[0,&quot;toc-6&quot;],&quot;title&quot;:[0,&quot;まとめ&quot;]}]]],&quot;authors&quot;:[1,[[0,{&quot;slug&quot;:[0,&quot;myakura&quot;],&quot;name&quot;:[0,&quot;矢倉眞隆&quot;],&quot;title&quot;:[0,&quot;フロントエンド・エンジニア&quot;],&quot;affiliation&quot;:[0,&quot;PixelGrid Inc.&quot;],&quot;description&quot;:[0,&quot;2016年10月にピクセルグリッドへ入社。Web標準技術やブラウザの実装動向に明るく、イベントでの講演や雑誌・オンラインメディアへの原稿執筆、書籍の監修・監訳などを数多く経験。\n&lt;a href=\&quot;https://developers.google.com/community/experts/directory/profile/profile-masataka-yakura\&quot;&gt;Google Developer Expert&lt;/a&gt;としても活動中。&quot;],&quot;icon&quot;:[0,{&quot;url&quot;:[0,&quot;https://media.graphassets.com/PL6RA4caSLCMIJBdEYKn&quot;]}]}]]],&quot;series&quot;:[0,{&quot;slug&quot;:[0,&quot;webappmanifest&quot;],&quot;title&quot;:[0,&quot;Web App Manifest入門&quot;],&quot;alertStatus&quot;:[0,null],&quot;alertMessage&quot;:[0,null],&quot;relationalSerieses&quot;:[1,[]],&quot;categories&quot;:[1,[[0,{&quot;path&quot;:[0,&quot;javascript/browser-api&quot;],&quot;name&quot;:[0,&quot;ブラウザAPI&quot;],&quot;color&quot;:[0,&quot;LightBlue2&quot;],&quot;parent&quot;:[0,{&quot;path&quot;:[0,&quot;javascript&quot;],&quot;name&quot;:[0,&quot;JavaScript&quot;]}]}]]],&quot;articles&quot;:[1,[[0,{&quot;slug&quot;:[0,&quot;webappmanifest-1&quot;],&quot;part&quot;:[0,&quot;第1回&quot;],&quot;title&quot;:[0,&quot;マニフェストファイルの構造&quot;],&quot;issue&quot;:[0,{&quot;publishDate&quot;:[0,&quot;2018-12-13&quot;]}],&quot;authors&quot;:[1,[[0,{&quot;slug&quot;:[0,&quot;myakura&quot;],&quot;name&quot;:[0,&quot;矢倉眞隆&quot;],&quot;title&quot;:[0,&quot;フロントエンド・エンジニア&quot;],&quot;icon&quot;:[0,{&quot;url&quot;:[0,&quot;https://media.graphassets.com/PL6RA4caSLCMIJBdEYKn&quot;]}]}]]]}],[0,{&quot;slug&quot;:[0,&quot;webappmanifest-2&quot;],&quot;part&quot;:[0,&quot;第2回&quot;],&quot;title&quot;:[0,&quot;アイコンの指定&quot;],&quot;issue&quot;:[0,{&quot;publishDate&quot;:[0,&quot;2019-01-24&quot;]}],&quot;authors&quot;:[1,[[0,{&quot;slug&quot;:[0,&quot;myakura&quot;],&quot;name&quot;:[0,&quot;矢倉眞隆&quot;],&quot;title&quot;:[0,&quot;フロントエンド・エンジニア&quot;],&quot;icon&quot;:[0,{&quot;url&quot;:[0,&quot;https://media.graphassets.com/PL6RA4caSLCMIJBdEYKn&quot;]}]}]]]}],[0,{&quot;slug&quot;:[0,&quot;webappmanifest-3&quot;],&quot;part&quot;:[0,&quot;第3回&quot;],&quot;title&quot;:[0,&quot;スプラッシュスクリーンの設定&quot;],&quot;issue&quot;:[0,{&quot;publishDate&quot;:[0,&quot;2019-02-07&quot;]}],&quot;authors&quot;:[1,[[0,{&quot;slug&quot;:[0,&quot;myakura&quot;],&quot;name&quot;:[0,&quot;矢倉眞隆&quot;],&quot;title&quot;:[0,&quot;フロントエンド・エンジニア&quot;],&quot;icon&quot;:[0,{&quot;url&quot;:[0,&quot;https://media.graphassets.com/PL6RA4caSLCMIJBdEYKn&quot;]}]}]]]}],[0,{&quot;slug&quot;:[0,&quot;webappmanifest-4&quot;],&quot;part&quot;:[0,&quot;最終回&quot;],&quot;title&quot;:[0,&quot;PWAのインストールと関連API&quot;],&quot;issue&quot;:[0,{&quot;publishDate&quot;:[0,&quot;2019-03-14&quot;]}],&quot;authors&quot;:[1,[[0,{&quot;slug&quot;:[0,&quot;myakura&quot;],&quot;name&quot;:[0,&quot;矢倉眞隆&quot;],&quot;title&quot;:[0,&quot;フロントエンド・エンジニア&quot;],&quot;icon&quot;:[0,{&quot;url&quot;:[0,&quot;https://media.graphassets.com/PL6RA4caSLCMIJBdEYKn&quot;]}]}]]]}]]],&quot;seriesAuthors&quot;:[1,[[0,{&quot;slug&quot;:[0,&quot;myakura&quot;],&quot;name&quot;:[0,&quot;矢倉眞隆&quot;],&quot;title&quot;:[0,&quot;フロントエンド・エンジニア&quot;],&quot;icon&quot;:[0,{&quot;url&quot;:[0,&quot;https://media.graphassets.com/PL6RA4caSLCMIJBdEYKn&quot;]}]}]]]}],&quot;issue&quot;:[0,{&quot;publishDate&quot;:[0,&quot;2018-12-13&quot;],&quot;number&quot;:[0,322]}],&quot;nextArticle&quot;:[0,{&quot;slug&quot;:[0,&quot;webappmanifest-2&quot;],&quot;part&quot;:[0,&quot;第2回&quot;],&quot;title&quot;:[0,&quot;アイコンの指定&quot;],&quot;issue&quot;:[0,{&quot;publishDate&quot;:[0,&quot;2019-01-24&quot;]}],&quot;authors&quot;:[1,[[0,{&quot;slug&quot;:[0,&quot;myakura&quot;],&quot;name&quot;:[0,&quot;矢倉眞隆&quot;],&quot;title&quot;:[0,&quot;フロントエンド・エンジニア&quot;],&quot;icon&quot;:[0,{&quot;url&quot;:[0,&quot;https://media.graphassets.com/PL6RA4caSLCMIJBdEYKn&quot;]}]}]]]}],&quot;tweetUrl&quot;:[0,&quot;https://twitter.com/intent/tweet?text=Web+App+Manifest%E5%85%A5%E9%96%80+-+%E3%83%9E%E3%83%8B%E3%83%95%E3%82%A7%E3%82%B9%E3%83%88%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E6%A7%8B%E9%80%A0&amp;url=https%3A%2F%2Fwww.codegrid.net%2Farticles%2Fwebappmanifest-1%2F&amp;hashtags=codegrid&amp;related=CodeGrid&quot;],&quot;pageTitle&quot;:[0,&quot;Web App Manifest入門 | 第1回マニフェストファイルの構造&quot;]}],&quot;reads&quot;:[0,null],&quot;class&quot;:[0,&quot;astro-jwu2ctgo&quot;]}" ssr="" client="load" opts="{&quot;name&quot;:&quot;Content&quot;,&quot;value&quot;:true}" await-children=""><div class="cg-CGMarkdown svelte-1syhabz"> <h2 id="toc-1">PWAとその機能</h2> <p>PWA（Progressive Web Apps：プログレッシブウェブアプリ）という言葉を聞いたことがある方も増えてきたのではないかと思います。PWAのこれといった定義はありませんが、いくつかの新しい技術を使って、ネイティブアプリのような機能を持ったWebアプリを実現したものをそう呼びます。</p> <p>「ネイティブアプリのような機能」も、なかなかふんわりとしていますが、以下の機能が挙げられることが多いでしょう。</p> <li>インストール（ホーム画面に追加）できる</li> <li>オフラインやネット接続が不安定な状態で開いても使える</li> <li>プッシュ通知が送られてくる</li> <p>ただ、このシリーズはPWAそのものについて紹介するものではありません。このシリーズで取り上げるのは、Web App Manifestと呼ばれるものです。</p> <p>先ほど「いくつかの新しい技術を使って」と述べましたが、PWAには複数の技術が関わります。なかでも代表的なものにService Workerがあります。CodeGridでもすでに取り上げている、PWAの中核技術です。</p> <li><a href="https://app.codegrid.net/series/2016-service-worker">Service Worker、はじめの一歩 | CodeGrid</a></li> <p>このシリーズで解説するWeb App Manifestも、PWAを実現する際に使われる技術のひとつです。</p> <li><a href="https://w3c.github.io/manifest/">Web App Manifest</a></li> <h2 id="toc-2">Web App Manifestとは</h2> <p>Web App Manifestは、Webアプリのタイトルやアイコンなどについてまとめたファイルです。</p> <p>このファイルがどこで使われるかというと、主にWebアプリのインストール時です。PWAの特徴のところで「インストールできる」と述べました。気に入ったWebアプリがPWAの場合、それをインストールすると、アプリ一覧もしくはホーム画面に追加されます。このときに、Web App Manifestに書かれているアプリの名前やアイコンのURLが使われるわけです。</p> <p>機能としてはHTMLのmeta要素、特にOGP（Open Graph Protocol）に書いてある情報と似ています。Web App Manifestはそれらの情報を、外部ファイルにしたようなものと考えるとわかりやすいでしょうか。</p> <h2 id="toc-3">Web App Manifestの構造</h2> <p>Web App Manifestは、アプリに関する情報をJSON形式でまとめたファイルです（以下、「マニフェストファイル」と呼びます）。CodeGridは残念ながらPWAにはなってないのですが、PWA化したとすると、マニフェストファイルは次のようになるでしょう。</p> <cg-code-block><h3>CodeGridのマニフェストファイル（予想）</h3><pre><code class="lang-json"><span class="line"><span style="color: #24292E">{</span></span> <span class="line"><span style="color: #24292E"> </span><span style="color: #005CC5">"name"</span><span style="color: #24292E">: </span><span style="color: #032F62">"CodeGrid — フロントエンドに関わる人々のガイド"</span><span style="color: #24292E">,</span></span> <span class="line"><span style="color: #24292E"> </span><span style="color: #005CC5">"short_name"</span><span style="color: #24292E">: </span><span style="color: #032F62">"CodeGrid"</span><span style="color: #24292E">,</span></span> <span class="line"><span style="color: #24292E"> </span><span style="color: #005CC5">"theme_color"</span><span style="color: #24292E">: </span><span style="color: #032F62">"#000"</span><span style="color: #24292E">,</span></span> <span class="line"><span style="color: #24292E"> </span><span style="color: #005CC5">"icons"</span><span style="color: #24292E">: [</span></span> <span class="line"><span style="color: #24292E"> </span><span style="color: #005CC5">"src"</span><span style="color: #24292E">: </span><span style="color: #032F62">"icon/icon.png"</span><span style="color: #24292E">,</span></span> <span class="line"><span style="color: #24292E"> </span><span style="color: #005CC5">"sizes"</span><span style="color: #24292E">: </span><span style="color: #032F62">"192x192"</span></span> <p>記述する項目については後で取り上げますが、それぞれが何をしているか、おおよその検討がつくのではないでしょうか。</p> <p>マニフェストファイルの文字エンコーディングはUTF-8で記述します。また、拡張子は<code>.webmanifest</code>で、MIMEタイプは<code>text/webappmanifest</code>が推奨*されています。</p> <h3>*注：JSONファイルでも動作に問題はないけれど</h3> <p>拡張子とMIMEタイプについては推奨されているだけで、<code>application/json</code>で送られる<code>.json</code>ファイルでも動作に問題はありません。ではなぜ推奨の設定があるかというと、専用の拡張子やMIMEタイプであれば、キャッシュなどのサーバー上の設定を、他のJSONファイルと分けて設定しやすくできるというねらいからです。</p> <h2 id="toc-4">マニフェストファイルをアプリと結びつける</h2> <p>中に記述するものの詳細の前に、マニフェストファイルをWebアプリに結びつける方法を紹介します。マニフェストファイルとアプリは別のファイルですから、当然ながら関連付けないといけません。</p> <p>マニフェストファイルは、HTMLのlink要素を使ってWebアプリと関連付けます。</p> <cg-code-block><pre><code class="lang-html"><span class="line"><span style="color: #24292E">&lt;</span><span style="color: #22863A">link</span><span style="color: #24292E"> </span><span style="color: #6F42C1">rel</span><span style="color: #24292E">=</span><span style="color: #032F62">"manifest"</span><span style="color: #24292E"> </span><span style="color: #6F42C1">href</span><span style="color: #24292E">=</span><span style="color: #032F62">"/manifest.webmanifest"</span><span style="color: #24292E">&gt;</span></span></code></pre></cg-code-block> <p><code>rel="manifest"</code>を指定したlink要素で、マニフェストファイルの場所をリンクすればOKです。</p> <p>マニフェストファイルを置く場所は、後述する<code>start_url</code>と同一オリジンの範囲内であれば問題ありません。</p> <h2 id="toc-5">マニフェストのメンバ紹介</h2> <p>マニフェストファイルの例で、記述する項目（メンバ）を少しお見せしました。Web App Manifest仕様では、執筆時点で20個近くものメンバが定義されています。すべてではありませんが、どのようなメンバがあるかを紹介します。</p> <p>アプリの名前を記述します。ここで指定される名前が基本的に使われますが、状況によっては次に紹介する<code>short_name</code>が使われます。</p> <h3>short_name</h3> <p>アプリの短い名前を記述します。「短い名前」とは何かというと、ホーム画面やアプリ一覧画面などの表示領域が限られているときに使われる名前です。</p> <p>たとえば、「CodeGrid — フロントエンドに関わる人々のガイド」は、アプリ一覧にはとうてい収まらないでしょう。「CodeGrid」であればかろうじて収まりそうです。</p> <cg-imgbox src="https://cdn.codegrid.net/2018-webappmanifest/img/screenshot-1-name-shortname.jpg" caption="長い名前は収まらない" alt="スクリーンショット：アプリ一覧でshort_nameとnameを並べたもの"><p>「CodeGrid」（中央左）と「CodeGrid — フロントエンドに関わる人々のガイド」（中央右）で実験。後者の場合、すべて収まらずに途切れてしまう。 <p><code>short_name</code>に文字数の制限はありません。しかし、ホーム画面やアプリ一覧の文字数を見るのに、英数では10文字程度、日本語であれば5文字程度がいいのではないかと筆者は思っています。場合によってはブランド名を短縮するなどの思い切り*も必要でしょう。</p> <h3>*注：短縮の思い切り</h3> <p>たとえば、CodeGridが素晴らしい支払いサービス「CodeGridペイメント」を新しく発表したとしましょう。しかしこの文字数では、ホーム画面などでは「CodeGridペ…」などと表示されてしまいそうです。こんなときには、ブランド名である「CodeGrid」でさえも短縮し、「CGペイ」などにするのがおそらくよいでしょう。ブランディングはアイコンに任せればよいのですから。</p> <p><code>lang</code>に指定するのは、アプリで使われている言語です。形式は<a href="https://ja.wikipedia.org/wiki/IETF%E8%A8%80%E8%AA%9E%E3%82%BF%E3%82%B0">言語タグ</a>で指定します。通常はアプリのHTMLに指定されている<code>lang</code>属性と同じ値が使われるでしょう。CodeGridは日本語で書かれているので、<code>ja</code>になります。</p> <p>言語は1つしか指定できません。複数の言語でWebアプリが提供されている場合は、サーバー側で言語・地域の判定をし、それに応じて言語・地域別のマニフェストファイルを出し分けるとよいとされています。</p> <h3>start_url</h3> <p><code>start_url</code>には、インストールされたWebアプリを立ち上げたときに開くURLを指定します。Webアプリのディレクトリ構成にもよりますが、ルートやディレクトリのルートを指定するのが多くなりそうです。</p> <span class="line"><span style="color: #24292E"> </span><span style="color: #005CC5">"start_url"</span><span style="color: #24292E">: </span><span style="color: #032F62">"/"</span></span> <p>指定するURLは、マニフェストファイルのURLと同一オリジン*でないといけません。ですので、別のサーバーにマニフェストだけを置いたりといったことはできません。</p> <h3>*注：オリジン</h3> <p>オリジンや同一オリジンの詳細は<a href="https://app.codegrid.net/entry/2018-a-element-3#toc-1">a要素の連載で簡単に取り上げた</a>ので、そちらをお読みください。</p> <p><code>start_url</code>にパラメータを与え、アクセス解析ツールと結びつければ、PWAからのアクセスも計測もできるでしょう。</p> <span class="line"><span style="color: #24292E"> </span><span style="color: #005CC5">"start_url"</span><span style="color: #24292E">: </span><span style="color: #032F62">"/?source=pwa"</span></span> <p>しかし、個別のIDを与えてのトラッキングなどは控えるべきです。ブラウザ側も<code>start_url</code>を無視する実装などが認められているので、「このアドレスだからPWAだ」と一概には言えない場合もあるでしょう。</p> <h3>icons</h3> <p><code>icons</code>には、アプリのアイコンを指定します。アイコンは、大きさや画像フォーマットごとに複数指定できます。</p> <span class="line"><span style="color: #24292E"> </span><span style="color: #005CC5">"icons"</span><span style="color: #24292E">: [</span></span> <span class="line"><span style="color: #24292E"> </span><span style="color: #005CC5">"src"</span><span style="color: #24292E">: </span><span style="color: #032F62">"icon/icon-192.png"</span><span style="color: #24292E">,</span></span> <span class="line"><span style="color: #24292E"> </span><span style="color: #005CC5">"sizes"</span><span style="color: #24292E">: </span><span style="color: #032F62">"192x192"</span></span> <span class="line"><span style="color: #24292E"> </span><span style="color: #005CC5">"src"</span><span style="color: #24292E">: </span><span style="color: #032F62">"icon/icon.svg"</span><span style="color: #24292E">,</span></span> <span class="line"><span style="color: #24292E"> </span><span style="color: #005CC5">"sizes"</span><span style="color: #24292E">: </span><span style="color: #032F62">"192x192 256x256 512x512"</span><span style="color: #24292E">,</span></span> <span class="line"><span style="color: #24292E"> </span><span style="color: #005CC5">"type"</span><span style="color: #24292E">: </span><span style="color: #032F62">"image/svg+xml"</span></span> <span class="line"><span style="color: #24292E"> </span><span style="color: #005CC5">"src"</span><span style="color: #24292E">: </span><span style="color: #032F62">"icon/icon-192.webp"</span><span style="color: #24292E">,</span></span> <span class="line"><span style="color: #24292E"> </span><span style="color: #005CC5">"sizes"</span><span style="color: #24292E">: </span><span style="color: #032F62">"192x192"</span><span style="color: #24292E">,</span></span> <span class="line"><span style="color: #24292E"> </span><span style="color: #005CC5">"type"</span><span style="color: #24292E">: </span><span style="color: #032F62">"image/webp"</span></span> <p><code>src</code>はimg要素の<code>src</code>属性と同じように、画像のURLを指定します。</p> <p><code>sizes</code>には、<code>192x192</code>のように、縦と横の大きさを<code>x</code>でつなげたものを、空白区切りで複数指定できます。</p> <p><code>type</code>は、画像のMIMEタイプを指定します。基本的にはPNGやJPEGでよいでしょうが、容量や色表現の都合で、WebPやHEIFなど新しいフォーマットを使いたい場合などは、そのMIMEタイプを合わせて指定します。</p> <p>アイコンはホーム画面やアプリ一覧で使われるほか、一部のブラウザではスタート時にも使われます。これについては次回以降に説明します。</p> <h3>theme_color</h3> <p><code>theme_color</code>には、アプリのブランドカラーとなるような色を指定します。CodeGridであれば黒ですので、<code>#000</code>でしょうか。</p> <span class="line"><span style="color: #24292E"> </span><span style="color: #005CC5">"theme_color"</span><span style="color: #24292E">: </span><span style="color: #032F62">"#000"</span></span> <h3>background_color</h3> <p><code>background_color</code>には、サイトで使われている背景色を指定します。</p> <span class="line"><span style="color: #24292E"> </span><span style="color: #005CC5">"background_color"</span><span style="color: #24292E">: </span><span style="color: #032F62">"#fff"</span></span> <p>一体なんの意味があるのだろうと不思議に思う方もいるかもしれません。<code>background_color</code>はアイコンや<code>theme_color</code>と併せて、ホーム画面からのスタート時に使われるプロパティです。次回以降に詳しく紹介します。</p> <h3>display</h3> <p><code>display</code>は、インストールされたアプリを立ち上げる際に使われる、ブラウザの表示モードを指定するメンバです。仕様では、4つの値が定義されています。</p> <th>表示モード</th> <td><strong>browser</strong></td> <td>通常のブラウザが立ち上がって、その中で表示</td> <td><strong>standalone</strong></td> <td>ネイティブアプリのように、アプリ固有のウインドウで表示</td> <td><strong>minimal-ui</strong></td> <td>アプリ内ブラウザのように、一部のブラウザUIをもった形で表示</td> <td><strong>fullscreen</strong></td> <td>ブラウザのツールバーや、スマートフォンでは画面上部のステータスバーもなしの状態で表示</td> <p>デフォルトは<code>browser</code>になります。また、それぞれのモードがサポートされない環境では、別のモードにフォールバックされます。仕様では、「fullscreen→standalone→minimal-ui→browser」の順でフォールバックすると記されています。</p> <h3>その他のメンバとフォールバック</h3> <p><a href="https://w3c.github.io/manifest/">Web App Manifest仕様</a>には他にもメンバが定義されているのですが、今回紹介したものが主に使われるメンバかと思います。マニフェストファイルに仕様として必須とされているメンバはありません。しかし、ブラウザのUI実装によっては、「これが必要」とするものがあります。</p> <p>なお、マニフェストに書かれていない情報については、Webアプリのインストール時に、そのページのHTML（meta要素など）から情報を得てもよいとされています。</p> <p>今回はPWAの構成技術のひとつであるWeb App Manifestについて、その形式や書き方、メンバのいくつかを紹介しました。</p> <p>マニフェストファイルについては紹介しましたが、それがどのように使われるのか、言葉ではわかりにくい概念もあります。次回はアイコンなどがどのように使われるのかを紹介します。</p>  </div></astro-island> </div> <footer class="cg-Article_FootAuthorsAndButtonContainer astro-tcyqbu7p"> <div class="cg-Article_FootAuthors astro-tcyqbu7p"> <div class="cg-Article_FootAuthor astro-hxlei5nu"> <a class="cg-Article_FootAuthorLink astro-hxlei5nu" href="/authors/myakura/"> <img class="cg-Article_FootAuthorImg astro-hxlei5nu" src="https://media.graphassets.com/resize=w:160/compress/PL6RA4caSLCMIJBdEYKn" alt="" width="80" height="80"/> <div class="cg-Article_FootAuthorName astro-hxlei5nu">矢倉眞隆</div> <div class="cg-Article_FootAuthorAffiliation astro-hxlei5nu"> PixelGrid Inc. </div> <div class="cg-Article_FootAuthorTitle astro-hxlei5nu">フロントエンド・エンジニア</div> </a> <div class="cg-Article_FootAuthorDescription astro-hxlei5nu"><p>2016年10月にピクセルグリッドへ入社。Web標準技術やブラウザの実装動向に明るく、イベントでの講演や雑誌・オンラインメディアへの原稿執筆、書籍の監修・監訳などを数多く経験。 <a href="https://developers.google.com/community/experts/directory/profile/profile-masataka-yakura">Google Developer Expert</a>としても活動中。</p> この記事についてのご意見・ご感想この記事をXにポストする