技術者ブログ:(OutSystems)アプリケーションのモバイルアプリ化

技術者ブログとして日ごろ取り組んでいる学習内容をご紹介します。
今回は、ローコード開発をテーマにしている第2ユニットです。

今回のテーマ:『アプリケーションのモバイルアプリ化』

前回は、Advanced Excelを使用してOutSystems内の画面データをExcel出力する方法についてご紹介しました。
今回は、OutSystemsで作成したアプリケーションをスマホなどのモバイルアプリとして使用できるようにする方法をご紹介します。

モバイルアプリ化ってなんだか大変そう…

モバイルアプリと言われてパッと思い浮かんだのは、App storeやGoogle Playストアなどからインストールできるものでした。
(アプリとしてリリースするまでに手間や時間がかなりかかるみたいだし、アップデートもすぐに反映できないし、そもそもアプリの利用用途的にストアで配布までしなくても…うーん…。)
と、最初はモバイルアプリ化に対してちょっと身構えましたが、思っていたよりも手軽にモバイルアプリ化することができます!

OutSystemsでは、アプリストアを経由してインストールするアプリ(こちらはネイティブアプリといいます)を配布する方法のほかに、PWA(プログレッシブWebアプリ)として配布する方法が用意されています。

PWA(プログレッシブWebアプリ)とは?

プログレッシブWebアプリとは、スマホなどモバイル端末向けに設計されたWebサイトやWebアプリを、ネイティブアプリと同じように扱えるようにする技術のことです。PWAには以下のようなメリットがあります。
・アプリストアを利用する必要がない
・Webサイト上のコンテンツでありながら、アプリと似たような使い方ができる
・iOS/Androidで同じ仕様のものが使える
等々…

ここからは、OutSystemsで作成したアプリケーションをPWAとしてモバイルアプリ化する手順をご紹介します。

モバイルアプリ化してみよう:準備編

最初からモバイルアプリ化を見据えてアプリケーションを作成するときは、アプリケーション新規作成の際に「Tablet App」または「Phone App」を選択します。

そのあとは、画面やロジックを作成してアプリを作っていきます。

アプリケーションを新規作成する際に表示される画面

モバイルアプリ化してみよう:配布編①(OutSystems Service Studio)

アプリが完成したら、いよいよアプリケーションをモバイルアプリ化します。
まずは、OutSystems Service Studioで配布の準備をします。

①モバイルアプリ化したいアプリケーションを選択します
②「Distribute」を選択します
③「Progressive Web App(PWA)」の下にある「Distribute as PWA」をオンにします
④アプリケーションのQRコードが発行されます

モバイルアプリ化してみよう:配布編②(モバイル端末)

ここからは、ユーザのモバイル端末での操作になります。
今回はiOS(iPhone)の画面をご紹介しますが、Androidでも操作に大きな差はなくインストールすることができます。

①カメラ等で発行したQRコードを読み取りブラウザで開きます
②Safariの「追加・共有・保存」アイコン(画面下の真ん中)をタップします
③「ホーム画面に追加」をタップします
④名称を入力して「追加」をタップします

以上の手順を踏んで、ホーム画面にアプリケーションが追加されれば完了です!

「Reactive Web App」でアプリケーションを作成していたら…

最初にReactive Web Appを選択したけど、モバイルアプリとして使いたい…!と思うこともあるかもしれません。
ただ、Reactive Web AppにはDistributeタブはなく、PWAとしてモバイルアプリ化することはできません。また、アプリケーションのタイプを後から変更することは、OutSystemsの仕様上不可能です。
しかし、疑似的にモバイルアプリ化のようにする方法を併せてご紹介します。

①アプリケーションをブラウザで開き、「QRコードを作成」アイコンを選択します
②作成されたQRコードをモバイル端末で読み取り、配布編②の操作をします

もちろんアプリケーションの作られ方が違うので挙動等は違いますが、ホーム画面から直接アクセスできる便利さなどはReactive Web Appでもカバーすることができます。

まとめ

今回は、OutSystemsで作成したアプリケーションをスマホなどのモバイルアプリとして使用できるようにする方法をご紹介しました。
アプリストアで配布するモバイルアプリ化だけでなく、PWAで素早く手軽にアプリケーションをモバイルアプリ化することも可能ですので、アプリケーションの利用用途などに合わせて活用してみてください!

第2ユニットではこれからもOutSystemsなどのローコードツールを使った技術者ブログを展開していきますのでお楽しみに。