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

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

博多で行われたMonacaビジネスセミナーにてお話ししました

f:id:mbaasdevrel:20180209181227j:plain

2月1日、アシアル社主催で行われたMonacaビジネスセミナー(博多)にて登壇してきましたので、こちらはその書き起こしになります。

ニフクラ mobile backendについて

本日はMonacaさんと我々のサービスであるニフクラ mobile backendを組み合わせることで、皆さんのビジネスにどう活かせるのかを紹介していきたいと思います。

まず最初に私たちのサービスについて紹介させてください。サービス名はニフクラ mobile backendになります。mBaaSと呼ばれるサービスの一つになります。mBaaSというのはmobile backend as a Serviceの略で、もバイアルアプリ開発で必要なバックエンド、サーバですね。そのあたりの機能をまるっと提供するものになります。

恐らく皆さんスマートフォンをお持ちだと思います。その中には多数のアプリがインストールされていることでしょう。ここでもし、無線LANであったりLTE通信をオフにするとどうなるのか。ほとんどのアプリが起動しなかったり、エラーメッセージを出すことになります。つまりネットワークがないと、ほとんど利用できないのです。

f:id:mbaasdevrel:20180209181241j:plain

たとえばゲームであればチート対策のために起動時にネットワーク接続が行われます。それによって体力を回復していいかであったり、新しいキャンペーンがはじまっていないかチェックしたりします。ソーシャルアプリのTwitterやFacebook、Instagramであればネットワークがなかったらほとんど何もできないでしょう。同様に地図、メール、タスク管理などほとんどのアプリがネットワークを使っています。使っていないのは時計と水平器くらいかも知れません。

そんな訳で、スマートフォンアプリを開発する上でネットワーク機能は切っても切り離せない存在と言えます。そしてネットワークを使って何をしているのかと言えば、ゲームのスコアを保存したり、タスクを追加したり、写真をアップロードしたり、ログインしたりといった機能を使います。これらの機能は抽象化すると、ほとんどのアプリで共通した機能になります。恐らく皆さん受託開発をやられていたり、自社サービスを幾つかもたれていると思います。同じような機能を繰り返し作ることに飽きていないでしょうか。サーバサイドの開発工数はもちろん、メンテナンスコストであったりセキュリティ対策も必要になります。

そこで私たちのニフクラ mobile backendがあります。先ほどあげたような、スマートフォンアプリ開発でよくある機能をまるっと提供するサービスになります。主な機能を紹介します。

主な機能について

まずデータストアという機能があります。これはデータベースに近いですが、MySQLやPostgreSQLのようなデータベースに直接つなぐのではなく、HTTP経由で操作するデータベースです。しかも構造をあらかじめ決めるリレーショナルデータベースではなく、スキーマレスと呼ばれるNoSQL型のデータベースになります。実際に使っているのはMongoDBというNoSQLのデータベースになります。スキーマレスなので、データベースの設計が必要ありません。HTTPリクエストを投げて、テーブル、我々のサービスではクラスと呼びますが、クラスがなければ自動的に作成されます。従来感じていた、データベース設計の手間がなくなります。スキーマはありませんが、ポインターやリレーションといった機能を使うことでクラス同士の連携を管理することもできます。

f:id:mbaasdevrel:20180209181253j:plain

MongoDBは元々位置情報検索に強いデータベースとして知られています。我々のデータストアでも同様に位置情報検索が行えます。ある一点を中心として半径何メートル以内で検索するといったものや、二点間にあるデータだけを抽出するといった機能もあります。

f:id:mbaasdevrel:20180209181308j:plain

次にファイルストアという機能があります。これはいわゆるファイルストレージです。写真をアップロードしたり、アプリの中で使う画像や音声ファイル、動画ファイルなどをアップロードしておけます。スマートフォンが高画質化するのに合わせて、画像などのリソースファイルが肥大化する傾向があります。そうするとアプリストアでダウンロードするのに時間がかかってしまうので、重たいリソースファイルはファイルストアに保存しておき、初回起動時にダウンロードするといった仕組みもよく行われています。また、キャンペーンや随時コンテンツをアップデートするような場合もファイルストアを使うことでアプリ自体をバージョンアップすることなくコンテンツを更新できるようになります。

f:id:mbaasdevrel:20180209181317j:plain

後は会員管理があります。IDやメールアドレス、パスワードで認証ができます。メールアドレス認証はメールアドレス確認メールやパスワードリマインダーも付いています。その他、TwitterやFacebook、Google+といったソーシャルサービスを使ったログインにも対応しています。匿名認証という、端末ごとに自動生成した認証機能もあります。この手の機能もよく使われますが、毎回実装するのは面倒だったりしますね。

f:id:mbaasdevrel:20180209181326j:plain

後ほど詳しく紹介しますがプッシュ通知機能もあります。iOS/Androidに対応していて、管理画面の同じインタフェースから配信できます。プッシュ通知はアプリならではの機能としてよく実装されますが、APNsやFCMといった外部サービスを使わないといけないこともあって多少実装が面倒です。また、管理画面を自社サービスにおいて作られているケースはあまり多くなくて、マーケターの方に何時にどういったターゲットに対してプッシュ通知を送って欲しいと依頼されてプログラマーの方がデータベースに書き込むなんて運用が良く行われています。これだとミスも起こりますし、何より面倒くさいです。ニフクラ mobile backendを使うことでこうした手間が大幅に軽減されます。

f:id:mbaasdevrel:20180209181336j:plain

最後にスクリプト機能があります。我々のサービスは汎用的な機能を提供していますが、個々のアプリにおいてすべての機能が満たせているわけではありません。そこでスクリプト機能を使ってmBaaSに自分で独自の機能追加ができるようになります。最近、サーバレスアーキテクチャであったり、マイクロサービスといったワードがよく使われますが、mBaaS上にプログラミングコードをアップロードすることでサーバレスな仕組みを実現できます。利用用途としてはmBaaSに足りない機能を追加するのはもちろんのこと、iOSとAndroidで共通した機能をサーバ側で提供できるようにしたり、チート対策やガチャなどの機能をサーバ側でチェックすることでセキュアに実行できるようにするといった目的で使われています。

f:id:mbaasdevrel:20180209181346j:plain

ここまでで挙げたのがニフクラ mobile backendの主な機能になります。データストア、ファイルストア、会員管理、プッシュ通知そしてスクリプト。操作はすべてHTTP経由のRESTful APIで行ってもらえますが、そういったAPIの仕組みを意識しないでも使えるようにSDKも提供しています。iOSであればObjective-C、AndroidであればJavaで提供しています。また、Unityと今回一緒にセミナーをさせてもらっているMonaca向けにJavaScript SDKも提供しています。なお、JavaScript SDKはNode.js上でも動作します。公式ではありませんが、RubyやPHP、Python、React Native、さらにExcelやGoogle Apps Script向けにもSDKがあります。

f:id:mbaasdevrel:20180209181356j:plain

Monacaとの組み合わせについて

ではここから本題として当スライドのメインテーマであるMonacaとの組み合わせについてお話ししていきたいと思います。

MonacaではJavaScript SDKを使ってもらうのは先ほど申し上げた通りですが、インストール法もとても簡単です。JavaScript/CSSの管理からncmb、これはニフクラ mobile backendの略ですと入力してもらうだけでインストールが完了します。一点注意点としては、このJavaScript SDKはプッシュ通知用のプラグインとは別物であるということです。プッシュ通知を使う場合にはCordovaプラグインの管理からNCMBを選んでもらう必要があります。MonacaはWebView上でアプリケーションが動作する仕組みですが、プッシュ通知を送る際に必要なデバイスの識別子であるデバイストークンはJavaScriptだけでは取得できません。そこでCordovaプラグインというSwiftやJavaが実行できる仕組みを使ってデバイストークンを取得する必要があります。

f:id:mbaasdevrel:20180209181410j:plain

先に紹介したJavaScript SDKを使うと、データを保存したり、ファイルをアップロードしたりといった操作が簡単にできるようになります。例えばこれはデータを保存するコードです。最近のJavaScriptの書き方であるPromiseが使えますので、saveメソッドの後でthenを実行することで保存結果を受け取れます。

f:id:mbaasdevrel:20180209181421j:plain

認証はこのようなコードになります。認証するとlocalStorageの中に認証データを残しますので、アプリを立ち上げなおした場合もログイン情報が維持されます。

f:id:mbaasdevrel:20180209181433j:plain

プッシュ通知については多くの方に使ってもらっていますので、少し詳しく説明していきます。プッシュ通知の作成は管理画面で行う場合と、APIを使う方法の二種類があります。どちらも結果としては同じですが、APIから作る場合の多くはアプリからの作成になります。

例えばInstagramのようなアプリを想定します。自分がフォローしている人が写真をアップしたり、コメントをくれたら通知がきますよね。この時、アプリの操作でいうと、アップロードした端末がプッシュ通知を作成します。条件としては自分をフォローしているユーザの端末を対象になります。写真がアップロードされたからプッシュ通知が配信されるのではなく、写真をアップロードした端末自体でプッシュ通知を作成するのがポイントです。同様にLINEのようなメッセージアプリであれば、メッセージをデータストアに保存すると同時にプッシュ通知を作成します。

そのようにアプリからでもプッシュ通知を作れるのが特徴になります。プッシュ通知というと、イベントが起こった時に送られてくると言うイメージが強いですが、アプリや開発者視点で考えるとメールと大きな違いはありません。通知を送りたい相手先のアドレスをスマートフォンではデバイストークンと言いますが、デバイストークンを指定して送信するイメージです。

f:id:mbaasdevrel:20180209181445j:plain

ニフクラ mobile backendは月間200万通までプッシュ通知を無料で配信できます。プッシュ通知はあまり頻繁に送るとユーザにオフにされたり、最悪アプリごと削除されます。送る頻度はアプリの種類によって違いますが、毎日送ると嫌がられるケースも多いでしょう。平日に一日一回送ったとして、月20回になります。そうなると10万台まで無料で使えることになります。もちろんすべてのユーザがプッシュ通知を許可してくれるとは限りませんので、半分許可してくれたとしたら20万台まで無料で使えるということになるでしょう。20万台インストールされるアプリは十分収益化も考えられると思いますので、それまでずっと無料で使ってもらえることでしょう。

ではプッシュ通知の実装方法です。タイトルにもある通り、とても簡単です。大事なのはiOSの場合はAppleのMember centerで証明書を取得するということと、Androidの場合はFCMでIDを取得することになります。これさえ準備できればほんの数分でセットアップできます。

Monacaでは任意のCorodvaプラグインをインストールするのは有料プランに限られるのですが、ニフクラ mobile backendとは提携していますので無料でインストールできます。インストールしたらこんな感じのコードを書き加えるだけです。これでプッシュ通知の送信を承諾してもらうためのダイアログを出して、さらにデバイストークンをデータストアに登録するまでの流れをすべて行ってくれます。本来、こうしたコードは自分で書かなければならないのですが、プラグインによってごく簡単に実装できるようになっています。

デバイストークンが登録されていれば、後は管理画面かSDKを通じてプッシュ通知を作成できます。Node.jsであったり、RubyやPHPなどであればプッシュ通知の作成をサーバサイドから行ってもらうこともできます。自社やクライアントのデータと組み合わせたプッシュ通知も簡単でしょう。GitHubにはWordPressの記事を更新するとプッシュ通知を送るサンプルも公開していますので、実装の参考にしてもらえればと思います。

Webサイト開発とMonacaアプリ開発の違いについて

通常のWebサイト開発とMonacaアプリ開発の相違点について紹介します。HTML/JavaScript/CSSを使ってフロントエンドを開発するのは従来のWebサイト開発と変わりません。しかしサーバサイドで出力する形ではなく、アプリの中にあるHTMLファイルやJavaScriptを読み込んで動作します。サーバサイドを使ったWebサイト開発であれば、PHPやRuby、Javaなどの言語でデータベースに接続してHTMLを出力するのが一般的でした。最近ではAjaxを使ってサーバと通信を行いますが、Monacaアプリ開発もそれと同じ感覚です。サーバ側ではUIを持たせず、データだけAjaxで送受信する形です。そして、このサーバサイド部分をまるっと置き換えるのが私たちのニフクラ mobile backendになります。

サーバサイドで開発するのに比べて、APIベースのシステムではネットワークコネクションが増えがちです。サーバサイドの場合、一回の処理で複数のテーブルからデータを取り出して処理をして、結果のHTMLファイルを出力します。APIの場合は様々な処理で使えるように、テーブル単位でAPIを作ったりします。その結果、ユーザデータを取得して、商品データを取得して…といった具合に一つ一つネットワークからデータを取得することになります。もちろん負荷が大きくなったら対策も考えられますが、多くの場合最初はそういった形で個別にアクセスしてデータを送受信します。

その結果、APIサーバの負荷が高くなっていきます。アプリが10万ダウンロードされたりすると、一つの画面を表示するだけで全部で30万くらいのコネクションが随時発生したりします。Webサービスとはまた違った負荷対策が必要になります。アプリの数が増えれば、それだけ運用が大変になっていくでしょう。

事例について

次にニフクラ mobile backendの事例について簡単に紹介します。自社アプリで使われているケースが多いですが、最近クライアント向けのシステム開発で使ってもらうケースも増えています。例えばこれは京王アプリと言う京王グループのアプリですが、開発は外注企業を使われています。データストアやファイルストアはもちろん、プッシュ通知まで我々のサービスを満遍なく使ってもらっています。

f:id:mbaasdevrel:20180209181503j:plain

このように自社だけでなく、クライアント向けの案件においてもmBaaSを使ってもらうことで開発工数の低減であったり、そもそも開発期間が短くできます。我々のサービスにユーザ登録してもらって、アプリケーションを新規で作ってもらうだけですぐに先ほどいったような機能がすべて使えるようになります。サーバを立ち上げたり、データベースやアプリケーションサーバをインストールしたりする必要はありません。サーバサイドのコードを一切書かずにサーバサイドの仕組みが手に入りますので、皆さんはMonacaを使ってJavaScriptやHTML、CSSを記述するだけです。また、アプリをリリースした後のサーバメンテナンスや負荷対策なども考える必要がありません。HTMLやJavaScriptなどのフロントエンドで必要なリソースはすべてアプリ側で持っています。サーバ側にあるデータはすべてAPI経由で取得します。データの取得は非同期になりますので、UI側で取得中はローディングアイコンを出すような工夫は必要ですが、アプリはどれだけインストールされたとしても安定してサービス提供できるでしょう。

ニフクラ mobile backendの安定性や負荷についてはよく聞かれますが、サービスインした当初からスクウェアエニックスさんやサンリオさんなど大手のクライアントアプリのバックグラウンドを支えて成長しています。ここでは言えませんが、これに類する大規模なクライアントも利用してもらっていますので、APIアクセスが数百万増えたところでまったく問題ありません。ニフクラというクラウドサービスを行う上で、その上にmBaaSを構築していますのでシステムの堅牢性も高いものとなっています。

f:id:mbaasdevrel:20180209181517j:plain

なお、ニフクラ mobile backendではパートナープログラムという仕組みを用意しています。我々に寄せられる開発案件を紹介したり、mBaaSを使う上でより深いサポートを提供しています。例えばニフクラ mobile backendでアプリケーションを作るという処理はWeb画面上で行う必要があるのですが、これをAPIベースでできるように開放しています。これによって一つのテンプレートを用意して、それを水平展開していく際などにもmBaaSが使えるようになります。

f:id:mbaasdevrel:20180209181527j:plain

こちらはその水平展開の一例ですが、既存のWordPress製のWebサイトをベースにしてiOS/AndroidアプリをMonacaで作っています。ここではニフクラ mobile backendのプッシュ通知をご利用いただいています。現在その水平展開として20以上のアプリを作られています。

f:id:mbaasdevrel:20180209181540j:plain

https://ja.monaca.io/showcase/ocj.html

まとめ

Monacaを使えば皆さんがすでに持っているWeb開発技術をそのまま活かしてスマートフォンアプリ開発に入れます。また、アプリを幾つもリリースしてもmBaaSを使えばサーバの負荷は一切気にせず、メンテナンスコストも考えなくて済みます。

最後に料金とサポート体制について紹介します。ここまで話して料金の話をすると、がっくりさせてしまうかも知れませんが、とても明朗なプランになっていますのでご安心ください。まず初期料金などはなく、APIアクセスが月間100万までは無料となっています。プッシュ通知も月間100万まで無料です。この上になると月間55,000円(税込)となっていますが、これも自社でサーバを構築したり、運用する際の人件費、サーバ代金に比べたら圧倒的に低価格なはずです。

f:id:mbaasdevrel:20180209181605j:plain

有料プランについてはメールベースの1to1サポートを提供しています。実装時に悩んだポイントがあれば、メールいただければすぐに回答いたします。無料の場合でもオープンなコミュニティを提供しており、そこでいつでも質問してもらえます。JavaScript関係の質問であれば私が答えることが多いかと思いますので、ぜひ質問をお寄せください。ぜひサービスをご覧いただき、興味があればMonacaと合わせてニフクラ mobile backendの開発パートナーへもお問い合わせください。

中津川 篤司

中津川 篤司

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