Monacaのサンプルアプリとして、Instagram風の「フォトシェアアプリデザインテンプレート」が登場しました。洗練されたデザインと滑らかなアニメーションが印象的です。

しかしこのアプリはあくまでテンプレートなので、データはすべてアプリ内部にあるものを参照しています。実際にSNSアプリを開発する際にはサーバサイドの機能が必要になります。写真系SNSの場合は次のような機能がいるでしょう。

  • 認証
  • 写真アップロード
  • コメント/ハート
  • プロフィール
  • フォロー/フォロワー

これらの機能がバックエンドに存在することで、他のユーザと写真を共有したり、お互いをフォローすることができます。すべての機能を自作しても良いのですが、バックエンド機能を一括で提供する専用のクラウドサービスも存在します。私たちの提供するニフクラ mobile backendもその一つです。今回から数回に分けて、このフォトシェアアプリにバックエンド機能を実装してみたいと思います。

まず最初は、認証処理を実装します。

まずはばらす

フォトシェアアプリはOnsen UIで作られています。Onsen UIでは一つのHTMLの中にテンプレートを定義して開発できます。フォトシェアアプリについてもindex.htmlだけですべての処理を行っています。しかし、このままでは開発生産性においてコードの見通しが悪くなりそうです。

そこでテンプレートを切り出して、別のHTMLファイルにしていきます。やり方としては <template> で囲まれた内容を template タグに書かれているidでHTMLファイルにします。例えば <template id="profile.html"> となっていれば、 profile.html というファイルを作成して、<ons-page> 以下の内容をすべて移動します。

今回のフォトシェアアプリについては以下のファイル群になりました。

  • camera.html
  • following-notifications.html
  • home.html
  • notification.html
  • profile.html
  • search.html
  • your-notification.html

タブバーの内容を分ける

ログイン後に表示されるべきタブバーが認証画面に表示されているのは違和感があります。そこで、index.htmlの body タグ内に残った内容をすべて main.html というファイルに移します(main.htmlは新規作成します)。そしてindex.htmlには ons-navigator を追加します。

こうすることで初期表示は変わりませんが、タブバーがある画面とない画面(これから作ります)を分けやすくなります。

登録/ログインページの作成

未ログイン状態でアプリを開いた際、最初に表示されるのが登録/ログインページです。これは register.html として新規作成します。ページ内容は次のようになります。ユーザ名とパスワードの入力欄があるだけの画面です。ボタンを押した時に login 関数を呼びます(これから作ります)。

JavaScriptファイルの作成

www/js/app.js を新規作成して、 index.html の scriptタグ内にあった内容をすべて移します。そして index.html 内に次のように記述してファイルを読み込みます。

ニフクラ mobile backendの初期化

次はニフクラ mobile backend の JavaScript SDK の追加と初期化を行います。手順は省略しますが、ニフクラ mobile backend はここから登録できます。ユーザ登録はGoogleやFacebook、Twitterなどのソーシャルアカウントで可能です。登録するとアプリケーションキーとクライアントキーという二つのキーを取得できます。

MonacaでJavaScript SDKを使う場合は、設定メニューの「JS/CSSコンポーネントの追加と削除」を選択します。
その中にあるテキストボックスに「ncmb」(ニフクラ mobile backendの略です)と入力して検索ボタンを押してください。バージョンはデフォルトのままでインストールを開始し、「ncmb.min.js」にチェックを入れて完了してください。

設定が終わったら、 app.js の中で初期化をします。app.jsの1~3行目に次のように記述してください。

YOUR_APPLICATION_KEYYOUR_CLIENT_KEY は、前述のユーザ登録後に表示されるキーに書き換えてください。
また、YOUR_APPLICATION_ID を以下に示すアプリケーションIDに書き換えてください。
アプリケーションIDは、ニフクラ mobile backend のダッシュボードURLに含まれる、applications/ の後ろに続けて表示される英数字です。
https://console.mbaas.nifcloud.com/#/applications/{アプリケーションID}

これでニフクラ mobile backendの初期化が完了です。

認証チェック

認証チェックは次のように行います。 ncmb.User.getCurrentUser() を呼び出して、返却されたデータが空であれば未ログイン状態であるということになります。

これを使って、初期表示の際に認証状態をチェックします。すでに記述されている document.addEventListener('init', 〜) の処理を以下のように書き換えます。

未ログイン状態だった場合、ons-navigator の pushPage を使って登録/ログイン画面に遷移します。

登録/ログイン処理

前述の通り、認証処理は login 関数内で行います。ここでは簡略化して次のように処理します。

  1. 入力された情報(ユーザID、パスワード)でユーザ登録を実行
  2. 1.に成功したら、自動でログイン処理を実行。成功したらメイン画面に遷移
  3. 1.に失敗したら、既にユーザ登録済みの可能性があるのでログイン処理を実行。成功したらメイン画面に遷移
  4. すべての処理に失敗したらエラー

このように、新規登録とログイン処理を兼ねた処理を行うことにします。以下が登録/ログイン処理ですが、 new ncmb.User() がユーザオブジェクトの作成、 signUpByAccount() がユーザ登録処理、 ncmb.User.login() がログイン処理になります。

ログアウト処理

今回はユーザプロフィール画面でログアウトできるようにします。元々右上はギアアイコンでしたが、今回はここをログアウトアイコンに変更します。内容は profile.html に定義しています。

ログアウト処理は app.js の logout 関数内で行っています。ncmb.User.logout() でログアウトを実行します。


ここまでの処理で認証処理が完成しました。ニフクラ mobile backendを使うと既存のアプリに対しても簡単にサーバサイドの処理が実装できるのが分かるかと思います。今回までのソースコードはNCMBMania/photoshare at v0.1にアップロードしてあります。実装時の参考にしてください。

次回以降、写真アップロードやフォローと言った仕組みを作っていきますのでお楽しみに!