スマホアプリ制作とノーコードツール: これまでのツールとの違い・可能性と限界
スマホアプリの制作/開発も、いろいろ選択肢が増えてきた分野です。基本的には、iOSアプリであればXcodeで開発、AndroidアプリであればAndroid Studioで開発するというのが基本的なアプリの開発方法ですが、スマホアプリの画面上の一文字を変更するだけでも、iOSアプリの変更をエンジニアに依頼してAppストアに申請・リリースするとともに、Androidアプリの変更も別途エンジニアに依頼してPlayストアに申請・リリースしないといけないのはWebサイト運用と比較してかなりな手間なので、スマホのアプリの初期段階からより簡便な開発方法として各種クロスプラットフォームというものがありました。
クロスプラットフォームを用いてスマホアプリの開発を行うと、iOSアプリとAndroidアプリがひとつのソースで生成されるので、開発環境もひとつですみますし、ソースも一元管理されます。手間が半分になるというものですが、いろいろ制約もありました。
1. パフォーマンスの問題: クロスプラットフォームの開発環境では、アプリがネイティブコードで動作するわけではなく、フレームワークや中間言語を介して処理が行われます。そのため、ネイティブアプリに比べてパフォーマンスが低下する可能性がありました。特にグラフィックスやアニメーションなどのリッチなUIを実現する場合には、クロスプラットフォームの制約が問題となることがありました。
2. ユーザインターフェースの一貫性: iOSとAndroidは異なるデザインガイドラインやユーザインターフェースのパターンを持っています。クロスプラットフォームの開発環境では、どちらかのプラットフォームに合わせたデザインを採用することが一般的でしたが、その結果、アプリのユーザインターフェースがプラットフォームごとに一貫性を持たないという課題が生じることがありました。ユーザはそれぞれのプラットフォームで一貫したユーザ体験を求める傾向があり、これがクロスプラットフォームの開発環境の普及を妨げた一因となりました。
3. API/SDKへのアクセスの制約: スマホのアプリではたとえばGoogle MapにアクセスするためのGoogle Maps SDKなどのSDKをアプリにインストールしてSDK機能を呼ぶことによりGoogle Mapを利用するようなことをよく行います。クロスプラットフォームの開発環境では、ネイティブプラグインを使用してネイティブ機能にアクセスする必要がありました。しかし、ネイティブ機能へのアクセスが十分にサポートされていなかったり、遅れて提供されることがあったため、特定の機能やAPI/SDKへのアクセスに制約が生じることがありました。
クロスプラットフォームの開発ツールであるXamarinやCORDOVAなどは上述のような制約があるとともに、あくまで対応しているのはスマホのアプリ画面側の処理であってバックエンドのサーバの開発は別途システム開発が必要である面がありました。
多くのスマホのアプリはアプリ用のサーバがあり、ユーザ管理などの機能を担っています。ある程度の機能を実現しようとするとサーバアプリケーションは必須なので、これまでのクロスプラットフォームの開発ツールは全体の開発プロセスの中の一部を簡単化してくれるに過ぎず、しかも制約もあったので広く広がらなかったという面があったのかと思います。
まずは近年のノーコードツールがこれまでのクロスプラットフォームの開発ツールなどと何が違ってどこまで対応している仕組みとなっているのかを解説したいと思います。その後に、それでもノーコードツールでは開発が難しい機能の例と逆にノーコードツールでここまで対応できる例の紹介をしたいと思います。
スマホアプリ開発のノーコードツールの仕組み
まずは一般的なスマホアプリの機能が実現される仕組みをチャットアプリを例にして説明します。チャットを相手と行うことができて、過去に自分がほかのユーザとやりとりしたチャットを参照することなどもできるためには、以下の機能が必要となります。
a. ユーザ登録 :
b. ユーザ情報の参照 : 自分の友だち・所属しているグループ情報などを取得できる
c. トークルームの作成・変更 :
d. チャットの送信 : あるトークルームにチャットを送信する
e. チャットの取得 : あるトークルームでの過去のやりとりを取得する
上記のような機能を実現するためには、情報を蓄積・保存でき、それをスマホのアプリから登録・更新・取得できる必要があります。一般的には、このような機能はバックエンドのサーバ上のデータベース (DB) で実現されます。
また、スマホのアプリとサーバとの間でデータのやりとりが必要となりますので、各機能別のAPIをサーバ上に実装しておき、スマホのアプリからそれらのAPIを呼ぶことにより、データの登録や取得などを行います。
Xamarinのようなクロスプラットフォームの開発ツールでは、このようなサーバ上のDB機能やAPIの開発はサポートしていませんでしたが、AdaloやFlutterFlowのような近年でてきたノーコードツールでは、サーバ上のDB機能やAPI機能までも含めて提供するという特徴があります。
Adaloのようなノーコードツールは、スマホアプリの簡単開発機能を提供するだけでなく、アプリの運用段階で必要なるサーバ機能も含めた仕組みを提供しています。そのために、サーバ側のAPIなども含めてプログラム開発を全く行わずにスマホのアプリを作り上げることが可能となります。
以下では、まずはAdaloのようなノーコードツールでは対応が難しい例を紹介します。一例ではありますが、その例の説明を通じて、どのような場合にはやはりノーコードツールでは作ることが難しいのかイメージをもってもらえればと思っています。次に、Adaloのようなノーコードツールでもこのようなものまで作れるという例を説明したいと思います。
2 . Apple Payカード登録ができる機能の開発
Apple Payは、iPhoneやApple WatchなどのApple製品にクレジットカードを登録して非接触で決済ができるサービスです。iDに対応していますのでコンビニでの決済に利用している人もいるのではないでしょうか。
Apple PayではiPhoneなどのWalletアプリにクレジットカードを登録しておき、iDなどの電子マネーにチャージしながら支払う仕組みです。一般的にクレジットカードのWalletアプリへの登録は、Walletアプリの登録プロセスを開始するとiPhoneのカメラ機能が有効となり、クレジットカード券面上のカード番号などを読みとりカード情報をApple Payのシステムに登録する流れとなります。
一方で、各種クレジットカード会社は自分のところのクレジットカードを利用しているユーザに対して、今月の請求金額やポイントなどを参照することのできるスマホのアプリを提供しています。それらのアプリでは、前述のようなiPhoneにクレジットカードをかざして読み取らせて登録するような作業を行わなくても、それらカード会社のアプリ内での追加の本人確認プラスアルファ程度の操作でApplePayに簡単に登録できる機能を提供しているものがあります。
このような、あるスマホアプリ内での操作によりWalletアプリにクレジットカードを登録してApple Payが利用できるようにできる機能のことを、Apple Payのinapp provisioning機能といいます。Appleはinapp provisioning機能を実現するためのフレームワークとしてPassKitというSDKを用意しています。その端末がApple Payに対応しているかどうか判定するメソッドやWalletアプリに登録されているカードの情報を取得するメソッドなど各種機能を実現するメソッドが用意されています。もちろん、カードを登録するためには、スマホのアプリからAppleのサーバ、カード会社のサーバが連携して認証した処理が行われるようにシステム構築を行う必要がありますが、少なくともPassKitというAppleのフレームワークのSDKを呼ぶ必要があり、その観点からAdaloのようなノーコードツールでの実装は難しい例となります。
つまり、なんらかの機能を実現するために、スマホのネイティブアプリのためのSDKをアプリにインストールして、それらのSDKメソッドを直接呼ぶ必要があるような場合には、ノーコードツールでアプリを開発するのは難しく、やはりiOSアプリであればXcode、AndroidアプリであればAndroid Studio上でのプログラム開発が必要となります。
3 . 外部のAPIとのやりとりもあるチャットアプリをAdaloで作成
次にスマホのネイティブアプリを「Adalo」のようなノーコードツールで制作できる例を紹介します。Adaloは、クリエイター、ビジネスオーナー、創業者が、コードなしでカスタムWeb＆モバイルアプリケーションを作成することを可能にするツールですが、Webサーバ機能 / DBサーバ機能はAdaloが提供する形態です。
スマホアプリの各画面やDBの項目をAdaloの管理画面上で規定していくだけでスマホのネイティブアプリが作れてしまいます。DBをもっているのでSNSのようなほかのユーザとのやりとりを行うアプリも作ることができますし、STRIPE決済にも対応しているのでECのようなアプリも作ることができます。
Adaloは「画面」「データベースコレクション」「アクション」を規定します。「画面」は各画面の画面要素を規定・配置して画面の見た目をまず規定するとともに、ボタン等の画面要素をタップした際のアクションを割り当てます。画面要素に紐づけることのできるアクションは別途「アクション」にて定義されている必要がありますが、アクションとしては下記のような処理を規定することができます。
a. 画面遷移先を設定する
b. データを新規作成する/更新する/削除する
c. 外部サービスに連携する
b.のデータに対する操作は、あらかじめ「データベースコレクション」にて規定されたデータに対する操作を指定することができます。
したがってAdaloの画面上からデータを新規作成/更新していくことによりDBがAdaloのサーバ上にできあがり、Adaloの画面上からアクションを規定していくことにより、必要なAPIがAdalｏのサーバ上にできあがっていきます。
Adaloで新規のスマホアプリ (モバイルアプリ) の作成を選択すると、まずは下記のような画面タイプを選択しろという画面が出てきます。一からすべてを指定していくのであればBlankを選択します。Blank以外を選択すると、そのタイプのアプリであれば通常存在する画面一式がすでに作成された状態になります。
もちろん、画面がすでに用意されている状態からさらに画面を追加することもできます。これらの画面についての規定はScreensメニューで行います。また、画面内のボタンなどの画面要素をタップするなどの操作をしたときに実行されるアクションを規定するには、画面要素を選択状態にして「+ADD ACTION」でアクションを追加することによりできます。
一方で、データベース管理するデータ項目の規定は Database Collectionメニューで行います。データベースにはテーブルという概念と、各テーブルのカラム (項目) という概念がありますが、AdaloのDatabase Collection, Propertyがそれぞれテーブルとカラムに対応します。スマホアプリの各ユーザの情報を可能するテーブルとしてUsersコレクションを規定して、チャットのやりとりを行うトークルームのチャットのやりとりを格納するテーブルとしてTalkRoomコレクションなどを規定していき、画面のチャット送信ボタンに紐づけたアクションでDatabase Collectionに登録されるように規定できれば、チャットアプリができあがります。
また、カスタムアクションで外部のAPIを指定して呼ぶこともできます。たとえば日本郵便が提供する郵便番号検索のWeb APIを呼ぶことにより、ユーザ属性としての住所情報の登録画面に郵便番号からの反映を行う機能を簡単に実現することが可能です。
アプリの制作プロセスとしては、まずは画面を規定していく面がありますが、よくある画面デザインについては前述のとおりテンプレートが用意されているのでその中から選択することもできますし、グリッドシステムやレイアウトコンポーネントを使用して画面のレイアウトを定義することもできます。ボタンその他のデザイン要素についても事前に用意されているものもありますが、それらをカスタマイズしたりデザイナが作成した画像を読み込んで指定することもできます。
基本的には画面の規定の仕方は、Webサイトのノーコードツール・簡単作成ツールと同様の手順となっており、各画面間の遷移・遷移する際の動きを規定するところも同様です。ただし、スマホのアプリなので証明書を組み込んだり、appストア/playストアにアップロードする機能があったり、プッシュ配信に対応しているところなどWebサイトのノーコードツールにはない面もあります。なお、Adaloは無料で使用を始めることができますが、ストアにアップロードするためには有償版に切り替える必要があります。
これからのWeb構築・Webディレクションとして、業務にまで踏み込んでディレクション/プロデュースすること、それが近年のバズワードであるDXにもつながること、そしてWebの進化とともにWeb構築の各種ツール/サービスやSaaSが広がってきていることにしたがって、業務とシステムの両面からWeb構築・運用していく人間が求められていくこと、そのためにどのような知識や能力を身に着けていくとよいかについて解説している「マガジン」です。