自作webサイトをモバイルアプリ化!?【PWA】
今回はPWAの使い方をまとめてみます。
背景
ツールなどを使ったスマホアプリの自作の記事などが増えてきて初心者でも作れるようになりましたがそれでも一から作ろうとするとツールの使い方や言語などいろいろな知識が必要になってきます。またツールなどを使うとパラメータが多くて何が何だかわからなかったりします。作りたいけど情報量が多すぎて挫折してしまう方もいるでしょう。(自分がそうなので。)
しかしGoogleが推進しているPWA(Progressive Web Apps)を使うことによって(まだOSによって制限もありますが...)webサイトをネイティブのモバイル用アプリのようにしてしまうことが出来ます。本来であればwebサイトにpush通知やホーム画面にアイコンを出す、オフラインでも機能することはできませんがこれを実現できるのがPWAというわけです。webサイトとしても使えてアプリとしても使えるとなるとOSや端末の縛りが甘いのでクロスプラットフォームなところも見どころですね。
以上を踏まえて本来のアプリ制作に挫折してしまったのでPWAを使ったアプリもどきを作っていきたいと思います。
しかし先ほども言ったようにネイティブのモバイル用アプリのようにするので本来のアプリより機能が制限されています。二回目ではありますが、OSによって制限もあるというのも注意する必要があります。PWAについての詳しい説明は記事がたくさんあるので自分で探してみると良いでしょう。
前提条件
参考にさせて頂いた記事
- こちらの記事がとても参考になりました。↓
PWA 入門 〜iOS SafariでPWAを体験するまで〜 2019年7月更新 - Qiita
ひな形
PWAの作り方に関しては先人達がたくさんの参考文献を書いてくれているので今回はひな形を用意しました。 この後の説明はこちらを使って説明していくのでクローンしてくるかZIPで落とすかしてください。
PWA作成
PWAのひな型作成の参考にさせて頂いた記事と同じような内容になってしまうので大まかな説明は省きますが補足や一部内容が変わっている部分はプログラムのコメントに書いてあります。
準備
前提条件で記述してあるようにGitHubのアカウントを持っていない人は作っておいてください。以降持っていることを前提に説明していきます。
PWAはHTTPS出ないといけない制約があるため今回は簡単にサイトを公開するためにGitHub Pagesを利用していきます。
↓のサイトを参考にリポジトリの作成までを行ってください。techacademy.jp
出来たらひな形がお使いのPCに入っていると思うのでそこまでコマンドプロンプトを開きcdコマンドでそのディレクトリまで移動しておきます。ZIPの方はgit initもしておきましょう。
省略部分は環境に応じて違うので適宜変えてください。
cloneした方
cd 省略/PWA_template
ZIPで落とした方
cd PWA_remplate-master git init
次に作成したリポジトリにひな形をプッシュしていきます。 https://github.com/username/username.github.ioのusernameはリポジトリ作成の参考サイト通りに作って入ればGitHubのユーザネームになるので適宜書き換えてください。
クローンした方
git remote set-url origin https://github.com/username/username.github.io git push origin master
ZIPで落とした方
git remote add origin https://github.com/username/username.github.io git push origin master
こうすることでひな形のページが見れるようになると思います。
AndoroidであればGoogle chrome、IOSであればSafariで下記のURLのusernameを前述したとおりに書き換えてアクセスしてください。
- 注意:AndroidはGoogle chromeでアクセス
IOSはSafariでアクセスしてください。
http://username.github.io
このようになっていれば成功です。(Android Google chrome)
見本のURLも載せておきます。
Pagesの別の使い方をしているのでURLが若干違いますが気にしないで下さい。ほぼ同じことをやっています。
ここまで来たらすでにスマホのホーム画面に追加できるようになっているので試してみましょう。画像の手順に沿って操作してください。
Android版
少し経つとホーム画面に追加されます。
こんな感じに追加されます。
IOS版
それぞれこんな感じになります。
内容が多かったですが、これで準備は完了です。
補足
前述したように説明はプログラムに書いてあります。ここでは補足を少ししていきます。
index.html
省略 <meta name="apple-mobile-web-app-capable" content="yes"><!-- SafariのURLバーを消す --> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><!-- IOSステータスバーの表示形式の指定 --> <meta name="apple-mobile-web-app-title" content="HaLaKe"><!-- タイトル --> <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="img/halake_logo120.png" sizes="120x120"><!-- IOSのアイコン指定、複数指定で --> <link rel="apple-touch-icon" href="img/halake_logo192.png" sizes="192x192"> 省略
ここでは主にIOS用の設定をしています。
ステータスバーの表示形式はこちらを参考に設定しました。
アイコンのサイズはこちらを参考に機種に応じたサイズのアイコンを指定してください。
qiita.comIPod ,IPhone SE, X, IPad miniで動作確認しましたがそのままで動作しました。問題がある場合は適宜差し替えをお勧めします。
manifest.json
{ "name": "Halake_PWA", "short_name": "HaLaKe", "theme_color": "#fc980c", "background_color": "#fc980c", "icons": [ { "src": "img/halake_logo192.png", "sizes": "192x192", "type": "image/png" } ], "start_url": "/PWA_template/", "display": "fullscreen" }
こちらは日本語でリファレンスがあるのでこちらを見た方が早いと思います。
遊んでみる
今回はJqueryとBootStrapを使ってほんのちょっとだけアプリ感をだしていきたいと思います。
お遊び程度なので細い説明は省きます。
完成形はこんな感じになります。
←Android(OPPO Reno A) IOS(IPad mini)→ なんだかそこまでアプリっぽくなっていないのは許してください。勉強不足でここまでしかできませんでした。
GitHubに置いておきます。
こちらにアクセスしてホーム画面に追加することもできます。
m-shinoda.github.io
ナビゲーションバーは動きますがはりぼてなのでほかのページに遷移したりはしません。
- 注意:バイブレーション機能はAndoroidのみでIOSでは機能しません。
Vibrate!ボタンはAndroidのみ対応なので注意してください。名前の通りバイブレーション機能を使うことが出来ます。
お使いの端末で使える機能などはこちらで確認できます。
whatwebcando.today下部のSelect Collor とChange!は色を選択してその色に塗り替えるというような仕様になっています。
まとめ
端末によって使えない機能が多すぎてまだ自由には出来なさそう。
凝ったものを作るにはHTML、CSS、Jquery、Java Scriptなどといった多様な言語の知識が必要。
コメント
コメントを投稿