はじめに

前回の記事に引き続き、Retoolの紹介記事となります。

前回の記事では、Retool を使ったWebアプリ開発を紹介しました。
今回は続編として、Retoolのモバイルアプリ版である Retool Mobile を取り上げます。

Retool Mobileの特徴

Retool Mobile には以下のような特徴があります

QR/バーコードスキャナー・NFCリーダー・Push通知などの機能が組み込まれている
Push通知が利用可能 (ビジネスプラン以上で利用可能)
SQL／JavaScript などで柔軟なデータ操作が可能
アプリは Retool 公式のネイティブコンテナ※上で動作しビルド・配布が不要

基本的にはWebアプリ版のようにUI構築とロジックの記述をすることができます。その上で、モバイルアプリに必要なコンポーネントが利用できます。

※Retool Mobile は「ネイティブアプリを直接ビルドして配布する」サービスではありません。
作成したアプリは、Retool が提供する公式ネイティブアプリ（iOS／Android）上で動作する仕組みです。

アプリの作成手順

1.新規作成

Retoolのホーム画面から Create > Mobile app を選択します。初期設定のモーダルが開くので、必要な項目を入力して Create app を押下します。

アプリが作成されると、以下のようなサンプルアプリが表示されます。

2.スクリーンの設定

左ペインの Screens タブでスクリーンの追加・削除を管理します。各スクリーンでは以下の設定ができます。

タイトル（ヘッダー表示名）
ヘッダーボタン（戻る／メニュー／任意アクション）
Lifecycleイベント: スクリーン表示時・非表示時にクエリ実行が可能（下記画像では Load Visible などのLifecycleイベントが用意されていることがわかります。）

3.ボトムタブナビゲーションの設定

Screens タブで Tab bar を選択するとボトムタブナビゲーションの設定が可能です。タブの順序・アイコン・初期表示スクリーン（First screen）などを設定可能です。

4.コンポーネントの配置

Web版と同様に組み込みのコンポーネント(ボタンやフォームなど)を選んで配置することができます。Web版のドラッグ＆ドロップの方式とは異なり、上詰めでコンポーネントが配置されていきます。

4.1.リストビュー

アプリでは一覧 → 詳細という遷移をすることが多いと思います。Collection コンポーネントでは一般的なリストビューを簡単に実装できます。さらに Custom Collection を利用することでボタン・アイコン・ラベルを柔軟にレイアウトでき、以下のようなボタン付きのリストなどが作成可能です。

4.2.Scanner（QR / バーコード読み取り）

QR / バーコード読み取りに利用する Scanner もコンポーネントの一覧から配置できます。他にも、NFCリーダを呼び出すコンポーネントなども用意されており、読み取り機能が搭載されている端末であれば利用可能です。

4.3.コンテナー

Container コンポーネントを使えばレイアウトもある程度柔軟に設定できます。FlutterのRow/Column、CSSのFlexコンテナのような考え方でコンポーネントを並べることができます。（下記画像はコンテナーを使ってボタンを並べたものです。）

5.クエリの設定

Webアプリと同様に Code タブでSQL・REST・GraphQL・JavaScript等のクエリを定義し、コンポーネントのイベントハンドラー（ボタンクリック、Scanner完了、スクリーン表示時など）から呼び出せます。本記事では詳細は省きますが、使い方は前回の記事を参照ください。

モバイル環境で動かしてみる

Retool公式アプリをモバイル端末にダウンロード

自作したアプリはRetool公式のネイティブアプリ上で動作します。Apple Store および Google Play からアプリをダウンロードします。

プレビューからQRをスキャン

ブラウザのIDEでプレビューを表示するとQRが表示されます。モバイル端末で読み込むとRetool Mobileアプリが起動しRetoolへのログインを求められます。

アプリを起動

モバイル端末側でログインすると、Retool Mobileで作成したアプリが一覧で表示されます。試しに自分で作成したアプリを動かしてみました。

まとめ

今回はRetool Mobileを利用したモバイルアプリ開発について紹介しました。
Retoolで開発することで UIの構築・ビルド・配布が簡略化され、スクラッチ開発で発生する面倒な作業を省くことができます。RetoolがあればWebとモバイルアプリが両方開発できるのも、学習コストの面で嬉しい点だと感じました。

GxPはRetoolのオフィシャルパートナーです。Retool に興味がある方は、以下のリンクからお問い合わせをお願いします。