スキップしてメイン コンテンツに移動

自作webサイトをモバイルアプリ化!?【PWA】

 今回はPWAの使い方をまとめてみます。 

背景

ツールなどを使ったスマホアプリの自作の記事などが増えてきて初心者でも作れるようになりましたがそれでも一から作ろうとするとツールの使い方や言語などいろいろな知識が必要になってきます。またツールなどを使うとパラメータが多くて何が何だかわからなかったりします。作りたいけど情報量が多すぎて挫折してしまう方もいるでしょう。(自分がそうなので。)
しかしGoogleが推進しているPWA(Progressive Web Apps)を使うことによって(まだOSによって制限もありますが...)webサイトをネイティブのモバイル用アプリのようにしてしまうことが出来ます。本来であればwebサイトにpush通知やホーム画面にアイコンを出す、オフラインでも機能することはできませんがこれを実現できるのがPWAというわけです。webサイトとしても使えてアプリとしても使えるとなるとOSや端末の縛りが甘いのでクロスプラットフォームなところも見どころですね。
以上を踏まえて本来のアプリ制作に挫折してしまったのでPWAを使ったアプリもどきを作っていきたいと思います。
しかし先ほども言ったようにネイティブのモバイル用アプリのようにするので本来のアプリより機能が制限されています。二回目ではありますが、OSによって制限もあるというのも注意する必要があります。PWAについての詳しい説明は記事がたくさんあるので自分で探してみると良いでしょう。

前提条件

  • GitHubのアカウントを持っていること
  • 統合開発環境などがあると良い
  • webサイト作成の知識があると良い

参考にさせて頂いた記事

ひな形

github.com

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を前述したとおりに書き換えてアクセスしてください。

http://username.github.io

このようになっていれば成功です。(Android Google chrome) 
見本のURLも載せておきます。

m-shinoda.github.io

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.com

アイコンのサイズはこちらを参考に機種に応じたサイズのアイコンを指定してください。
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"
}

こちらは日本語でリファレンスがあるのでこちらを見た方が早いと思います。

developer.mozilla.org

遊んでみる

今回はJqueryとBootStrapを使ってほんのちょっとだけアプリ感をだしていきたいと思います。
お遊び程度なので細い説明は省きます。
完成形はこんな感じになります。
←Android(OPPO Reno A)　IOS(IPad mini)→  なんだかそこまでアプリっぽくなっていないのは許してください。勉強不足でここまでしかできませんでした。

GitHubに置いておきます。

github.com

こちらにアクセスしてホーム画面に追加することもできます。
m-shinoda.github.io

ナビゲーションバーは動きますがはりぼてなのでほかのページに遷移したりはしません。

  • 注意：バイブレーション機能はAndoroidのみでIOSでは機能しません。

Vibrate!ボタンはAndroidのみ対応なので注意してください。名前の通りバイブレーション機能を使うことが出来ます。
お使いの端末で使える機能などはこちらで確認できます。

whatwebcando.today下部のSelect Collor とChange!は色を選択してその色に塗り替えるというような仕様になっています。

  • 注意：画面の小さいスマホなどで使う場合表示の仕方が一部変になってしまうことがあります。改善出来たらGitHubの方を更新したいと思います。

まとめ

端末によって使えない機能が多すぎてまだ自由には出来なさそう。
凝ったものを作るにはHTML、CSS、Jquery、Java Scriptなどといった多様な言語の知識が必要。

コメント

コメントを投稿

このブログの人気の投稿

Phaser3 + Typescriptを使ってRPGゲームの基礎を作ろう！その２

前回の記事 に引き続きPhaser3+Typescriptを使って RPG の基礎を作っていきます。 この記事は前回の記事を呼んだ前提で説明していきますので、ぜひそちらを先に読むことをお勧めします。 また、今回の記事は前回よりも難易度と内容量が上がっていますが、記事の最後に作業後の リポジトリ のリンクがありますので、そちらを先にダウンロードしてそちらと比較しながら学習することができます。 前回まで作成した状態のプログラムが以下の リポジトリ からダウンロードできますので前回まででうまくいっていない方は参考にしてみてください。 github.com 最終目標（再掲） ・Phaser3とTypescriptで RPG ゲームの基礎を作る。 ・Phaser3をTypescriptで使う方法を学ぶ ・Phaser3の使い方を学ぶ 今回の目標 ・ゲームの作り方の断片を知る ・キャラの表示できるようにする ・キャラを移動できるようにする ・当たり判定をつける ・ NPC の追加してみる ・話しかけられるようにする 開発前提（再掲） ・Nodejsの環境・知識がある ・ Javascript ・Typescriptがある程度かける ・当ページ紹介の環境を試す場合はgit・ github の知識がある 使用した主要Nodeモジュール（再掲） ・typescript（Typescriptの コンパイル 用） ・phaser（フロントの Javascript 用ゲームライブラリ） ・live-server（ソースを監視してブラウザのページをリロード） ・ts-loader（webpackがTypescriptをバンドルする用）webpack（言わずと知れたモジュール依存をいい感じに解決しバンドルする） ・webpack- cli （webpackを コマンドライン で使用するのに必要） 注：各Nodeモジュールバージョンは後述 当ブログ仕様の画像素材の注意点 当ブログで使用する画像素材は『 ピポヤ倉庫 』より許可なしで無償再配布・改変が認められたものを改変して作成されたものです。 中には許可なく再配布・改変してはいけない素材もインターネット上には多く存在するのでそれらを使用するときは十分に規約を呼んでから使用しましょう。 1. キャラの表示 想定画面 今回は、はじめにキャラつまり操作
コメントを投稿
続きを読む

M5Stackで、においセンサー（TGS2450）を使ってみる。（LCDに表示編）

今回は、においセンサー（TGS2450）から取得したデータをM5Stackの LCD にグラフ表示をしていきます。 今回主に使用したもの M5Stack 10Ω抵抗 5本 Pch  MOSFET  2SJ334（スイッチとして利用） M5StackSideBB（ブレッドボード） M5Stackのピンはそのままだと配線するとき手間がかかるかと思いますので、今回はM5StackSideBBを利用しました。 ブレッドボードも付いているので、手軽に電子工作できるので個人的にオススメです。 SideBB for M5Stack www.switch-science.com 諸注意 本ブログのプログラムはArduinoIDEまたはPlatformIOでM5Stackの開発ができる状態であること前提のものですので、各自導入をお願いします。 過去に Windows のArduinoIDEで M5Stackの開発環境を構築する記事 があるので、参考にしてください。 においセンサー（TGS2450）について 今回使用したセンサーは 秋月電子通商 で購入できます。 http://akizukidenshi.com/catalog/g/gP-00989/ akizukidenshi.com TGS2450には4つのピンがあり、使用するのはそのうちの3本でヒーターを温めるピン、センサー情報を得るピン、GNDがあります。 ここで注意したいのは、ヒーター電圧は1.6Vと記述されているのでM5Stackで利用するときは分圧して3.3Vを1.6V近くまでに降圧することをお勧めします。 TGS2450のセンサーは可変抵抗になっており、データシートには5.62kΩ〜56.2kΩの間を抵抗が変化し、においが強いとより低くなると記述されていました。 よって、センサーの値をM5Stackで取得するにはセンサー抵抗と外部に接続する任意の値の抵抗による分圧回路によって求めることができます。 TGS2450の動作方法は、250ms周期でセンサーに電圧を5ミリ秒on、245ミリ秒offの状態にしてヒーターは8ミリ秒on、242ミリ秒offにすることで値を取得します。 配線 においセンサーとM5Stackの配線 上の図が配線図です。 30Ωの抵抗は10Ωの抵抗を三つ直列に接続して作成しました。 また、上部の抵抗10Ω二
コメントを投稿
続きを読む

Phaser3 + Typescriptを使ってRPGゲームの基礎を作ろう！その１

今回はPhaser3とTypescriptを使って簡単な RPG ゲームを作る方法を紹介していきます。 内容はPhaser3およびゲーム作りについての記事なので、Nodejsの周辺モジュールなどの説明は一部省いての説明になりますのでご了承ください。 またこの記事では Phaser2 ではなく Phaser3 を使用するので注意してください。 この記事は二部構成になりますので、この記事を読んだ際はぜひ次の記事も読むことをお勧めします。 最終目標 ・Phaser3とTypescriptで RPG ゲームの基礎を作る。 ・Phaser3をTypescriptで使う方法を学ぶ ・Phaser3の使い方を学ぶ 今回の目標 ・開発環境を整える ・Phaser3の開発構成を知る ・スタート画面を作る ・マップ表示をさせる 開発前提 ・Nodejsの環境・知識がある ・ Javascript ・Typescriptがある程度かける ・当ページ紹介の環境を試す場合はgit・ github の知識がある 使用した主要Nodeモジュール ・typescript（Typescriptの コンパイル 用） ・phaser（フロントの Javascript 用ゲームライブラリ） ・live-server（ソースを監視してブラウザのページをリロード） ・ts-loader（webpackがTypescriptをバンドルする用）webpack（言わずと知れたモジュール依存をいい感じに解決しバンドルする） ・webpack- cli （webpackを コマンドライン で使用するのに必要） 注：各Nodeモジュールバージョンは後述 1. 最低限の開発環境の準備 今回最低限の環境を整えるために、『Typescript + Phaser3』の開発テンプレートを github リポジトリ で公開しました。 以下からZIPをダウンロードするか、 git clone コマンドで各自環境に展開してみてください。 ここから先は リポジトリ のプログラムを元に説明していきます。 github.com 展開するとファイル構造は以下のようになっているかと思われます。 注： 他にもファイルやフォルダがあるかと思われますが、表記されているのは今回使うものになっています。 - src/ （これから書くプログラムの保存領域）
コメントを投稿
続きを読む