【たった5分!!】Bubbleで開発したアプリをPWAとして公開する方法

こんにちは!EPICs合同会社の大熊です!

今回はBubbleで開発したアプリを、Store公開ほどハードルは高くなく、かつネイティブアプリのような使用方法が出来る。非常に便利なPWA形式で公開する方法をお伝えします!

著者:大熊滉希
ノーコード特化のアプリ/システム開発事業を展開するEPICsの代表。
前職にて新規事業コンサルティングを行う企業で役員を歴任した後、
最小の経営資源で開発を行えるノーコードに可能性を感じEPICsを創業。

運営会社:EPICs合同会社
日本最大級の開発実績を誇るノーコード特化のアプリ/システム開発会社。
最安30万円・最短2週間から、BubbleやAdaloなど多様なツールの中からニーズに合わせた最適な開発を提案・実施している。

目次
日本最大級のノーコード開発実績!

①日本最大級の開発実績
②最安30万円。通常の1/10~の低コスト開発
③最短2週間。圧倒的な開発スピード
④高難易度の開発もスムーズ
⑤複数のノーコードツールに対応

EPICsは上記5つの強みを武器に受託開発を行っています。
まずはご相談ください。

PWAとは?

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

PWAとは、Progressive Web Appsの略称で、モバイルブラウザとネイティブアプリ(アプリストアからダウンロードして使用するアプリ)の利点を融合したWebアプリ(アプリのように振る舞う高速なWebサイト)のことを指します。

https://www.irep.co.jp/knowledge/glossary/detail/id=10227/より引用

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

PWAのメリットとしてはネイティブアプリのように、下記のような機能が使えます!

  • ホーム画面にインストールが可能
  • プッシュ通知
  • 高速化
  • オフラインで使用可能

インストール方法こそ違うものの、インストール後はネイティブアプリさながらに利用することができるアプリ形式です!

PWA形式のアプリのインストール方法(ios)

まずは下記の写真の赤い丸で囲まれたボタンを押します。

次に「ホーム画面に追加」を選択

右上の「追加」をクリック

ホーム画面にアプリがインストールされて完了です!

PWAとしての公開方法(iOS)

1.アプリの設定

画面左側のSettingを選択し、SEO / metatagsを開きSEO settingの項目にあるScript/meta tags in headerを選択してください。

こちらでアプリの設定を行います。

2.アドレスバーの非表示設定

まずはScript/meta tags in headerに下記を入力してください。

<meta name="apple-mobile-web-app-capable" content="yes">

こちらはSafari で使用できる metaタグで、content=”yes” を設定すると、アドレスバーを非表示にして全画面表示することが可能です。

3.ステータスバーの設定

次はこちらを入力します。

<meta name="apple-mobile-web-app-status-bar-style" content="black">

こちらは Safari の上部にあるステータスバーの設定の変更項目です。

「” content=”」に続く設定をdefault / black / black-translucent の 3種類から選択することができ、ステータスバーの表示設定を変更できます。

4.アプリ名の設定

下記のコードを入力し、「” content=”」の後ろに設定したいアプリ名を入力してください

<meta name="apple-mobile-web-app-title" content="アプリ名">

こちらを設定することでインストール時のデフォルトのアプリ名を指定することが出来ます。

尚、指定できるアプリ名は半角11文字、全角6文字までです。

5.アイコンの設定

次にアイコンの設定です。

Settings 内の General を開き、iOS appearance という項目部にあるIcon for home screenに移動します。

Bubble には 60 x 60 pixels という表示があるのですが、実際には 180×180 の画像が1つあれば問題ないので、180×180 の画像を作ってIcon for home screenにアップロードしましょう。

PWAとしての公開方法(android)

続いて Android での設定方法です。

manifest.json と service-worker.jsを作成するので、まずはメモ系のアプリを開いてください。

1.manifest.jsonの作成

メモアプリを開いたら下記のコードを入力してください。

{
  "name": "アプリ名",
  "short_name": "アプリ名",
  "theme_color": "black",
  "icons": [{
      "src": "/icon-256.png",
      "sizes": "256x256",
      "type": "image/png"
    },{
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    }],
  "start_url": "/?utm_source=homescreen",
  "display": "standalone"
}
  • 「name」 と 「short_name」 は希望のアプリの名前を入れましょう
  • display タイプはステータスバーの表示設定の項目になります。
    fullscreen / standalone / minimal-ui / browser が可能です。
    今回は iOS の表示に合わせて、ステータスバーを残して全画面表示する standalone を選択して進めます。

ここまで完了したら、こちらの内容を文書としてダウンロードしましょう。

2.service-worker.js の作成

次にService Worker の作成です。

同じくメモ系のアプリを開き、下記のコードを入力します。

self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
});

self.addEventListener('activate', function(e) {
  console.log('[ServiceWorker] Activate');
});

self.addEventListener('fetch', function(event) {});

こちらはこのままの状態で文書としてダウンロードするだけで大丈夫です。

3.manifest.json と service-worker.js を呼び出すコードを作成

再度Settings のSEO / metatags に移動し、Advanced settings の項目の Script/meta tags in header に下記のコードを追記します。

<link rel="manifest" href="./manifest.json">
<script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('./service-worker.js').then(function() { console.log('Service Worker Registered'); });
   }
</script>

4.manifest.json、service-worker.js、アイコンの画像のアップロード

Settings のSEO / metatags内、Hosting files in the root directoryにmanifest.json、service-worker.js、 256×256 と 192×192 のアイコンをアップロードしてください。

公開設定

ここまで出来たら「Deploy to Live」で本番環境の公開をしてみてください!

実際のLive環境での動作確認をし、ホーム画面にインストールをしても正常に機能していれば完了です!

まとめ

PWAの公開設定はいかがでしたでしょうか?

なれればさほど難しくなく公開が行えると思います!

PWA形式のアプリはストアに公開したアプリに比べ修正も行いやすく、公開にあたり初期費用も抑えることが可能です!

そのため新規事業やMVPの開発の際にはとてもよく使う公開形式になると思うので、是非覚えておくと良いでしょう!

日本最大級のノーコード開発実績!ノーコードなら迷わずEPICs

EPICsはノーコードでの開発に特化をしたプロの開発組織です。

従来のスクラッチでの開発でよく発生する「費用が高い」 「開発期間が長い」 「知識がなく開発に踏み切れない」という課題に対し、ノーコードでの開発という選択肢で皆様の開発を支援します!

そんな弊社に開発相談をいただくメリットは大きく4つあります!

①豊富な開発実績
創業よりノーコード開発を軸に多様な開発を行ってまいりました。SNSやマッチングアプリ、ECアプリなど多様な開発実績がございます。
豊富な経験をもとに、ただ開発を行うにとどまらず、より良い開発を行うためのアドレスや公開後のご不安やご相談にも対応させていただきます!

②最安30万円!通常の1/10~1/5ほどの低コストで開発
コーディングの工程を削減できるノーコードは、最適かつ最小限の人員で対応が可能です。また弊社では豊富な開発実績があるため、経験を活かした開発を行うことで開発費用を大幅に削減することができます。

③最短2週間!圧倒的な短期間で納品
ノーコード開発では複雑なコードを1から書く必要がないため開発工程を省略することができ、開発期間の大幅な短縮が可能です。

④公開後の保守や運用の徹底サポート
アプリは開発後の運用もとても重要です。EPICsでは開発のみならずその後のサポートも対応可能です!
またノーコードで開発したアプリは、スクラッチで開発したアプリに比べて保守や運用にかかる費用を削減することも可能です!

「勉強になった!」「役に立った!」と思っていただけたら、是非シェアもお願いします!
目次