Apps)の概要について、こちらでご紹介しました。https://bagelee.com/marketing/pwa/モバイルアプリが飽和状態の今、新規のアプリケーションを広めていくことはとても困難です。PWAは「モバイル体験の最適化」をWebで行うことのできる技術です。モバイルアプリの直接の代替になることはないと思われますが、一部を補いながら少しずつPWAは広まっていくだろうと言われています。このシリーズでは、特徴はもちろん実際にPWAを開発しながら解説していきます。PWAでできることこのシリーズでは、以下についてPWAで可能なことと考え、解説していきます。※PWAという言葉が広まる前にも既にあった技術もあり、定義が曖昧な部分もあります。POINT!!tomayacさんというGoogleのエンジニアが作られているこちらのページを開くと、どの機能に対応しているかが◯×で表示されます。ChromeとSafariでは大きく使える機能に差があることがわかります。ありますが、AppleもPWAへの対応をしていくだろうと言われており、そうなると一気にPWAへの流れが加速するかもしれません。ホーム画面へのインストールそれでは、今回はまずホーム画面にインストールする方法をご紹介していきます。「Webサイトなのにホームにインストールってどういうこと?」と思われる方もいらっしゃるかもしれませんね。見、全く同じに見える2つのbageleeアプリ。左側はPWA版bageleeです。Clipという従来から使われていたブックマーク機能です。Androidについてはmanifest.jsonというファイルを作ることで、ダウンロードを誘導するボタンなどが出てくるなど、アプリのストアを経由しないPWA化が進んできています。Clipを作るまずiOS版のWebClipを作っていきます。これを追加することで、safariで「ホーム画面に追加」からアプリのような形でブックマークを追加することができます。この「ホームに追加」の際のアイコンやタイトルなどを設定することができます。いっても難しいことはなく、いくつかWebページにmetaタグを埋め込んでいく程度です。bageleeに埋め込まれているタグを見ていきます。sizes="144x144">1つずつ見ていきます。apple-mobile-web-app-capableこちらはホーム画面に追加されたブックマークを立ち上げた際、URLの部分が表示するかどうか(通常のsafariアプリとして表示しない)を設定できます。こちらの画像をご覧ください。実際はSafariのブックマークなのですが、URL部分がなくフルスクリーンアプリとなる為に、単独のアプリのように見えますね。content="black">こちらは、アプリを立ち上げた際のステータスバーの色を設定することができます。content="bagelee">こちらはホーム画面に追加したアプリのタイトルについて、設定しています。このタイトル次第で、継続的にアプリを使ってもらえるかが変わるので重要な要素です。最後にホーム画面追加時のアイコンについて解説します。sizes="144x144">sizeを指定して、アイコン画像を指定するだけですが、各デバイス毎に適切なサイズが異なります。こちらのQiitaさんの記事にまとまっているので参考にしてみてください。解像度、画像スケール、アプリアイコンサイズまとめ少し長くなりそうだったので、今回はiOS版のみとします。次回はAndroidの対応をしてmanifest.jsonを作っていきます。マーケター・ディレクター・エンジニアなど何でも屋。COBOLからReactまで色んなことやります。関連記事2018年4月18日manifest.jsonでホーム画面へのアプリ追加(Android編)【これからはじめるPWA】2018年4月9日ホーム画面へのアプリ追加(iOS編)【これからはじめるPWA】アプリでもっと便利に!気になる記事をチェック!記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。palanでは一緒に働く仲間を募集しています正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。マーケター・ディレクター・エンジニアなど何でも屋。COBOLからReactまで色んなことやります。デザイナーアメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。デザイナーWebAR/VRのデザインと3DCG制作がメインです。肩書きは「アニメ案件に関わりたいデザイナー」。マーケタードイツでWEBマーケティングしています。使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。デザイナーフロントエンドデザイナー。CSS、JSの実装を担当しています。NativeやReact360をよく触っています。エンジニアサーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。デザイナーSketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。好きな食べものは生ハムとお寿司とカレーです。エンジニアサーバーサイドエンジニアからフロントエンドエンジニアになりました。Nativeでのアプリ開発をしています。エンジニアサーバーサイドエンジニア。SIerを経て2019年7月に入社。Railsを使った開発を行っています。WebGLとReactが強みと言えるように頑張ってます。DamienWebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。TOP運営会社お問い合わせプライバシーポリシーは株式会社palanの運営する情報メディアです。おいしいデザイン・プログラミング情報をお届けします。クリエイター向けの記事を可愛く更新中!。