2018年4月18日

プログラミング

manifest.jsonでホーム画面へのアプリ追加(Android編)【これからはじめるPWA】

目次

  1. はじめに
  2. manifest.jsonを作る
  3. manifest.jsonを検証する
  4. まとめ

はじめに

前回、iOSのホームスクリーンに追加(WebClip)の対応をご紹介しました。
記事にも記載しましたが、WebClipはPWAに含まれるものではなく、既存の機能です。

今回ご紹介するAndroid対応はPWAのホームスクリーン追加機能によるものです。
このように「ホーム画面に追加」の案内がされるようになるはずです!
Screenshot_20180417-225447.png (344.4 kB)

manifest.jsonを作る

Androidのホーム画面に追加機能には、manifest.jsonというファイルが必要です。

MDNの解説によればこうあります。

manifest.json ファイルは JSON 形式のファイルであり、WebExtension API を使う拡張機能に必ず含めなければならない唯一のファイルです。

少しわかりづらいかもしれませんが、とても簡単にいってしまうと「ホーム画面に追加」の為の設定をすることができるファイルです。

全ての項目を今回はご紹介しませんが、いくつか項目をbageleeのmanifest.jsonを見ながら解説していきます。

{
name: "bagelee Web App",
short_name: "bagelee",
icons: [
{
src: "/config/icons/app-icon-48x48.png",
type: "image/png",
sizes: "48x48"
},
{
src: "/config/icons/app-icon-96x96.png",
type: "image/png",
sizes: "96x96"
},
{
src: "/config/icons/app-icon-144x144.png",
type: "image/png",
sizes: "144x144"
},
{
src: "/config/icons/app-icon-192x192.png",
type: "image/png",
sizes: "192x192"
},
{
src: "/config/icons/app-icon-512x512.png",
type: "image/png",
sizes: "512x512"
}
],
start_url: "/",
display: "standalone",
orientation: "portrait-primary",
background_color: "#fff",
theme_color: "#3f51b5",
description: "bageleeのPWAです。",
dir: "ltr",
lang: "ja-jp",
related_applications: [ ],
prefer_related_applications: false
}

項目の解説

name

アプリの名前です。「ホーム画面に追加ボタン」のアプリ名欄に出てきます。
 2018-04-17 23.20.22.png (27.5 kB)

short_name

ホーム画面に追加したアプリの名前です。

icons

アプリのアイコンについて設定します。
解像度に応じたサイズの画像をいくつか用意することで、より適切な画像をブラウザ側が選択してくれます。

src

アイコンのパスです。これは相対パスで構いません。

type

画像のタイプです。pngを使うことが多いと思うので、その場合は image/png とすると良いでしょう。

sizes

画像のサイズを指定しています。
Googleの場合はこのようにあります。
ウェブアプリマニフェストより

スプラッシュ画面の画像は、icons 配列から描画されます。Chrome は、端末の 128dp に最も近い画像を選択します。

start_url

PWAをインストールし、立ち上げた際のURLを指定します。
bageleeの場合 “/” としているので、つまり https://bagelee.com が起動時のURLとなります。

display

アプリの表示モードを指定します。

  • standalone
    通常のアプリと同じようなUIとなります。
  • browser
    ブラウザと同じような表示となります。
    具体的にはURLの入力エリアが表示されます。

orientation

画面の向きを定義することができます。
landscape にすると横向きになります。
portraitにすると縦向きとなります。

background_color

アプリ起動時の背景の色です。

theme_color

テーマカラーです。具体的にはツールバーの色となります。

description

PWAの説明を設定します。

dir

テキストの読む方向を設定します。
日本語ですと左から右なのでltrです。アラビア語などは反対なのでその場合にはrtlとなります。

lang

言語設定をします。
日本語であればja-jpで良いでしょう。

related_applications

ネイティブアプリ(Playストアやitunesからインストールするアプリ)の設定をすることができます。

prefer_related_applications

上記で設定したアプリを優先するかどうか選択することができます。

manifest.jsonの検証をする

manifest.jsonを作ったら、本当にただしく作れているか検証してみましょう。
Googleの検証ツール(ブラウザを右クリックし検証)から、ApplicationをクリックしてManifestを選択しましょう。
 2018-04-17 23.50.25.png (14.1 kB)

正しく読み込めている場合、このように表示されるはずです。
 2018-04-17 23.47.47.png (121.2 kB)
また、Add to homescreen をクリックするとChromeアプリとしてインストールされます。
これが正しくできていない場合、設定に誤りがないかなどを疑ってみる必要があります。

POINT!!

検証ツールを開いた状態でリロードすると「No manifest detected」と表示されてしまうことがあります。その場合には検証ツールを再度閉じて開くと、再度manifestの検証ができるようになります。

まとめ

簡単ですが以上となります。
解説しきれなかった項目については、MDNGoogleのマニュアルをぜひご覧ください。
また、現在manifest.jsonやWebClipの生成ツールを作成中ですので、でき次第アップデートしてお知らせいたします!

0

0

AUTHOR

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

eishisでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

新しい技術が好きなWebエンジニアです。 元々インフラやPHPをやっていたのですが、最近はReact NativeとFirebaseを使って頑張ってます。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザイン・HTML/CSSマークアップ・JSアニメーション実装を担当しています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

CONTACT PAGE TOP