backend(mBaaS)。TipsMonacaよりクラウドでできるHTML5ハイブリッドアプリ開発という公式本が出版されました。UIを使ったハイパフォーマンスな開発手法を細かく説明しているガイドブックになります。backendの機能を追加してみたいと思います。公式ガイドブックの中では、2次元バーコードを読み取り、その結果を元にYahoo!ショッピング検索APIを使って商品検索を行います。検索結果は履歴としてlocalStrageに保存されます。backendに変更したいと思います。この結果、localStrageでは容量に限度(5MB)がありますが、データをほぼ無制限に保存できるようになります。クラウド上に保存することで他のデバイスとデータを共有したり、デスクトップブラウザから読み取ったデータの再利用ができるようになります。backend側での作業になります。管理画面にて新規アプリ作成を選択します。作成するとアプリケーションキーとクライアントキーが表示されます。これを使いますのでコピーしておきます。Monacaでプロジェクトをインポート続いてMonaca側で作業します。Monaca公式ガイドブック「クラウドでできるHTML5ハイブリッドアプリ開発」にあるプロジェクト一覧から、バーコードスキャナーアプリのダウンロードを右クリックして、URLをコピーします。続いてダッシュボードにて新規プロジェクトを作成します。プロジェクトの作成をクリックします。Projectをクリックします。選択して先ほどコピーしたURLを貼り付けます。その後、インポートボタンを押すと新規プロジェクトが作成されます。今回はプロジェクト名をバーコードリーダーとしました。プロジェクトが作成されたら開くボタンをクリックします。SDKをダウンロードします。こちらのJavaScriptファイルをローカルにダウンロードしてください。IDEにおいてwwwフォルダを右クリックして、アップロードを選択します。SDKを選択してアップロードしてください。これで準備は完了です。SDKを読み込みます。NCMBオブジェクトを初期化します。backendでアプリを作成した時のアプリケーションキーおよびクライアントキーを使います。初期化後、今回のデータ保存先になるデータモデル名をProductとしています。これは自由に設定してもらってかまいません。保存する処理を書きます。:データの保存成功、失敗は今回は無視しています。データストアへの保存処理は非同期で行われますので、動作に影響を及ぼすことはありません。backendのオブジェクトに追加しています。この処理が問題なくいけば、商品データがデータストアに保存されます。続いて履歴処理を変更します。ここはlocalStrageを使用しないようにするだけです。$scope.history.push(JSON.stringify($scope.history));};起動時の履歴初期化処理も変更します。$scope.historyに追加しています。NCMB._mapはNCMB.ObjectからJSONに変換するために行っています。これで変更はすべてです。実際に使ってみる起動時の画面です。backendから取り出しています。バーコードを読み取ると結果が表示されます。backendへデータを保存しています。データは管理画面で実際に見ることができます。データは蓄積されて、他のデバイスでも同じデータを確認できるようになります。ハイブリッドアプリを簡単に作れるのがMonacaの魅力ですが、そこにネットワーク機能が追加されるだけで使い方が様々に考えられるようになるでしょう。Tumblr関連記事2016-08-05Unityアプリ開発!mBaaSで簡単ログイン機能実装!Unityでアプリにログイン機能を組み込むサンプルアプリを紹介し...2016-05-06Monacaアプリ開発!サーバーにデータを最短で保存しよう!HTMLでクライアントは一通り実装できたけど、サーバーとの接続...2016-01-14Monacaで作ったゲームにランキング機能を追加してみようランキング機能を実装してみたいと思います。Webでのゲーム開発に。Service)とは、スマートフォンアプリでよく利用される汎用的な機能をSDKとクラウドから提供するサービスです。backendのちょっと便利な使いかた・非公式SDKやアプリ開発の関連情報などをお届けするブログです。※記事内には、サポート対象外の内容も含みます。本ブログではコメント機能を公開しておりません。アプリ開発を行う上での課題解決には、ユーザーコミュニティやもくもく会などもご活用ください。LIMITEDスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。