FJCT_ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

クロスプラットフォーム環境のアプリ開発を高速化するサービス・ソフトウェアまとめ

f:id:mbaasdevrel:20200513172309p:plain

iOS/Androidといった異なるプラットフォームに対して一つのコードベースで対応する、いわゆるクロスプラットフォームな開発環境は幾つかあります。ニフクラ mobile backendではよく知られたMonacaはそんなクロスプラットフォームの一つになります。

今回はそんなクロスプラットフォームでのアプリ開発を高速化してくれるWebサービス、ソフトウェアを紹介します。

Monaca

Monacaはニフクラ mobile backendとの相性が最もいいハイブリッドアプリプラットフォームになります。JavaScript SDKからの利用はもちろんのこと、プッシュ通知プラグインも無料で利用できます。

Monaca - HTML5ハイブリッドアプリ開発プラットフォーム

f:id:mbaasdevrel:20200513172309p:plain

MonacaはWeb IDEの他、ローカルアプリとして実行するMonaca Localkit、CUIで動作するmonaca CLIを提供しています。Web IDEの場合は開発環境を整える必要なく、すぐにアプリ開発を行えます。

Monaca

Onsen UI Playground

f:id:mbaasdevrel:20200513172302p:plain

Onsen UIはMonaca以外でも利用できますが、同じアシアル社が開発しているので最も相性のいいUIフレームワークといえるでしょう。そんなOnsen UIのコードを書いて、Web上で実行結果を確認できるのがOnsen UI Playgroundになります。デモも多数登録されています。

Onsen UI Playground

Flutter

FlutterはDartを使ったクロスプラットフォーム・フレームワークです。iOS/Androidの他、デスクトップやWebにも対応しています。NCMBではFlutter SDKを非公式ながら提供しています。

Flutter用NCMB SDKのはじめかた

AppBuilder 2 20180529-19:35

f:id:mbaasdevrel:20200513172349p:plain

バージョンは古いですが、FlutterアプリのUIをWebブラウザ上でドラッグ&ドロップで作成できます。作成した画面はコードでダウンロードできますので、後はイベント毎のコードを追加してアプリ開発を行います。

AppBuilder 2 20180529-19:35

DartPad

f:id:mbaasdevrel:20200513172344p:plain

Dartを試すことができるWeb上の実行環境になります。サンプルの中にFlutterのコードもあります。これはFlutter for Webに対応していますので、Webブラウザ上で動くFlutterアプリを試し、アプリの中でも実行できます。

DartPad

React Native

React NativeはJavaScriptを使ってiOS/Androidアプリを開発するフレームワークです。JavaScriptエンジン上で実行されるので、ネイティブレベルで高速に実行されるのが特徴です。NCMBではReact Native SDKを非公式ながら提供しています。

NCMBMania/ncmb-react-native: NCMB SDK for React Native

Expo Snack

f:id:mbaasdevrel:20200513172338p:plain

expoはReact Nativeアプリの開発用ビューワーです。Expo SnackではコードをWebブラウザ上で実行し、プレビューができます。もちろんexpoアプリで確認もできます。iOS/Androidアプリとしては実行する場合にはappetizeを使っています。

Expo Snack

Appitr

f:id:mbaasdevrel:20200513172332p:plain

AppitrはWebブラウザ上でReact Nativeアプリの開発、プレビューそしてビルドまで行える開発環境となっています(ビルドはこれから追加予定です)。UIのレイアウトもAppitr上で編集できます。

Appitr: Create a native mobile app with online IDE within hours; Create your own React Natvie app.

Deco

f:id:mbaasdevrel:20200513172327p:plain

React Native用のローカルIDEです。UI上のサイズなど細かい設定はビジュアル的に行えます。既存のコンポーネントを検索し、アプリの中に組み込むことも簡単にできます。

Deco - React Native IDE

Ionic

IonicはMonacaと同じくCordovaをベースにしたハイブリッドアプリ開発環境です。クラウドベースの開発環境はなさそうですが、UIを組み立てられるツールは揃っています。

Ionic X

f:id:mbaasdevrel:20200513172321p:plain

UIをドラッグ&ドロップで開発できるサービスです。既存データとの接続もコーディングを行わずにできます。ローコードプラットフォームとして開発されています。

Ionic X

Ionic Creator

f:id:mbaasdevrel:20200513172315p:plain

IonicアプリのUIをWebブラウザ上で作成できます。コードエディタはProプラン以上で利用できるようです。ダウンロードしたコードを見る限り、Angularベースになっています。

Ionic Creator

まとめ

クロスプラットフォームの場合、多くがUIコンポーネントの利用が面倒という特徴があります。コードで書くものが多く、実際の見た目を想像しながら作るのが大変です。

今回紹介したツールを使えば、UIをグラフィカルに設定できるので、ブロックを組み合わせるようにさくさくと作れるはずです。ぜひお試しを!

中津川 篤司

中津川 篤司

NCMBエヴァンジェリスト。プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。 2004年、まだ情報が少なかったオープンソースソフトの技術ブログ「MOONGIFT」を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶDXエージェンシー「DevRel」活動をスタート。