プログラミングを始めようとしている方、教える立場の方、プログラミング大好きな方……皆様のお役に立つ情報をご紹介するとともに、プログラミング初心者の筆者が3か月でアプリ開発をマスターする過程を綴るブログです。
今回、このブログはMonacaのアドベントカレンダー記事に掲載されております。
adventar.org
様々なMonacaユーザーの方が記事を書かれているのでぜひご覧ください。
はじめに
こんにちは。mobile backend企画担当の伊藤です。
気が付いたらクリスマスが近づいて、もうすぐ2019年になりますね。
皆さん今年はどんな年でしたか？
私はプログラミングを始めたり、新しい世界でたくさん初めての経験ができた年でした！
ということで今回はプログラミング力試しをしてみようと思います。
（前回「Monacaとニフクラ mobile backendで学ぶはじめてのプログラミング～クラウド連携アプリ開発編～」の途中で終わってしまいましたが、力試しのために「応用編まとめ」にトライしてみたいと思います！）
今回も「Monacaとニフクラ mobile backendで学ぶはじめてのプログラミング～クラウド連携アプリ開発編～」の内容になってしまいますが
教本をお持ちでない方もアプリ開発をする方全員が理解できる内容にしますので、ぜひ最後まで見ていただきたいです！
掲示板アプリを開発！
Monacaとニフクラ mobile backendを使用して掲示板アプリを開発します！
図1:
上記が完成したアプリです。
図2:
Monacaとニフクラ mobile backendを連携させる方法
Monacaとニフクラ mobile backendを連携させるため、JavaScript SDKをMonacaに導入します。
SDKとは
アプリを開発するために必要なプログラムやコードの集まりで、APIで直接コーディングするより簡単に実装できます。
MonacaにSDKを導入
①Monacaにログイン後、プロジェクトを作成します。
②プロジェクトを作ったら、設定 > JS/CSSコンポーネントの追加と削除 を選択
③コンポーネント画面が表示されたら、コンポート名に「ncmb」を入力して検索します。（ncmb=ニフクラmobile backendの頭文字です）
④SDKに「ncmb」が表示されるので、「追加」をクリック
⑤インストールして「components/ncmb/ncmb.min.js」にチェックを入れてから「保存する」をクリック
これでSDKの導入は完了です！想像よりも簡単に導入できました。
SDKを初期化して利用可能な状態にする
これはMonacaプロジェクト > www/index.htmlか.js にコーディングしていきます。
ニフクラ mobile backendでアプリを作成すると「アプリケーションキー」と「クライアントキー」（2つ合わせてAPIキーと言います）
が発行されますのでコピーしておいてください。
（忘れた場合は、アプリ設定 > 基本 > APIキーから確認できますのでコピーしてください）
コピーしたらMonacaプロジェクトに戻り、www/index.htmlの内か、.js内にアプリケーションキーとクライアントキーを下記のように設定します。
// [NCMB] APIキーの設定 var applicationKey = "YOUR_NCMB_APPLICATION_KEY"; var clientKey = "YOUR_NCMB_CLIENT_KEY"; // [NCMB] SDKの初期化 var ncmb = new NCMB(applicationKey, clientKey);
ちゃんとニフクラ mobile backendで反映されるかテストしてみましょう
（テストクラスを作成して「message」フィールドに「Hello!」を設定）
var TestClass = ncmb.DataStore("TestClass"); var testClass = new TestClass(); //「message」フィールドに「Hello!」を設定 testClass.set("message", "Hello!") .save();
ニフクラ mobile backendのデータストアにTestClassが作成されてて、messageフィールドに「Hello!」という文字が格納されていたらOKです！
ではアプリを作成していきましょう
今回は、CSSやフロントエンドの部分はすでにコーディングしてある問題なので、バックエンド側(データの保存機能等)をコーディングします。
フロントエンドに関しては「Monacaで学ぶはじめてのプログラミング」を見ながら自分好みのデザインにしてみてください！
①新規ユーザー登録の実装
②ログインの実装
③ログアウトの実装
④カレントユーザーの実装
⑤参照権限の設定
⑥参照権限とポインタを設定してデータを保存
この6つを実装すれば掲示板アプリは完成します！
今回はこの中でポイントやつまづいたところを書いていきたいと思います！
①新規ユーザー登録の実装
図3:
コーディングする際に、ユーザー名とパスワードを.setして、新規会員の場合は登録、既存会員の場合はログインさせる～～という風に考えると思いますが、
新規会員の場合はってどうやって決めるのかというとニフクラ mobile backendの会員管理のデータを参照して決めますよね。
そのために下記のメソッドをコーディングしてください。
ncmb.signUpByAccount()
これでOKです。
②ログインの実装
「新規ユーザー登録はニフクラ mobile backendのデータを参照して決める」という作業と同じように、
既存ユーザーをログインさせるために登録してあるデータか否か、というのも会員管理のデータを参照する必要があります。
ncmb.User.login(userName, password)
上記のようにコーディングしてみてください。
私は全部" . "を接続詞だと思って暗記していますw
例）ncmb.User.login(userName, password)
= ncmbのUserをlogin
※ここまでコーディングしたらニフクラ mobile backendの管理画面も確認してみてください
図4:
上記のように登録されていたらOKです。
次に新規登録が成功したユーザーとログインに成功したユーザーをチャット画面に遷移させます。
window.location.href="./index.html"
上記は別の画面に遷移させるコーディングです。
locationは省略が可能です。また"./index.html"は戻り値と言って遷移させたいページを書きます。
③ログアウトの実装
ログアウトを実装＝現在のユーザー（currentUser）を空（null）にする
currentUser = null
ログアウトしたらログイン/新規登録画面に遷移させます。
⑤参照権限の設定
ACLと呼ばれる参照権限を設定します。
（誰が書き込めて誰が読めるか、という設定です）
//参照権限を設定 var acl=new ncmb.Acl(); acl.setPublicReadAccess(true) .setUserWriteAccess(currentUser, true); //chatクラスにデータを保存 chat.set("message" ,message) .set("user", currentUser) .set("acl", acl) .save() .then(function(){ console.log("保存成功"); load(); }) .catch(function(error){ console.log("保存失敗"+JSON.stringify(error)); });
正直、最初は「参照権限」というワードが出てきた時点で拒否反応が出ました。（笑）
でも案外ちゃんと見ると難易度は今までやってきたことと変わりません！
ACLを生成して、設定して、保存するだけです！
一つ注意していただきたいのは、load(); を忘れやすい(笑)。
load(); = 画面を更新
図5:
コーディングが終わったらニフクラ mobile backendのデータストアを確認してください。
図5のように保存されていたらOKです。
⑥メッセージデータを取得して表示させる
chat.order("createDate",true) .limit(5) .include("user") .fetchAll() .then(function(records){ console.log("取得成功"); setData(records); }) .catch(function(error){ console.log("取得失敗"+JSON.stringify(error)); });
上記の例は「降順、5件のみ取得、userフィールドに設定されたポインターの実態も含めて取得」してねというコーディングをしています。
保存したメッセージデータを画面に表示させる為には
setData(records)
をお忘れなく★（私はいつも忘れますw）
アプリ開発まとめ
ここまで一気に進めていってしまいましたが理解できましたでしょうか？（不安）
アプリ開発は、1回できると自信が持てると同時に、「画面をこだわってみよう」「画面増やそう」みたいなアレンジができて楽しいですよ！
そして、だんだんと早く開発できるようになります。
まずは頭の中で、画面遷移と、「このボタンを押したら何をする」みたいな流れを頭の中で考えながら1つ1つ確実に実装していってください。
そしてテスト大事です！
1つ機能を実装するたびにテストをしてください。（当たり前かもしれませんがw）
3つくらい機能を実装してテストして動かないとどこで間違えたのか発見しづらくなります。
あ、今回の場合ですとログアウトの実装後はテストは行わないでくださいね～。（動かないから）
私はずーーーーーーっと「動かない；なんでだ；」と無駄な時間を費やしてしまいました（笑）
成長日記
最初は、アプリ開発をしていて「これで合っているのか…？」という気持ちをずっと抱えながら開発を進めていました。
しかし最終的には、楽しすぎて機能を一気にコーディングして「はいできた！！動かそう！！」→動かない
といった絶望を味わいました（笑）
さらに、完璧に何も見ないで完成させたい！教本見たらもう一回作る！という決意を持って取り組んだので、2,3回掲示板アプリを作りました（笑）
その結果、完璧に自力で掲示板アプリを開発でき、
このブログも書きたいことがたくさんですぐ書き終わることができました（笑）
一緒に勉強しませんか？
毎月弊社富士通クラウドテクノロジーズの社内で「もくもく会」を行っております！
「もくもく会」とは名前の通り、みんなで集まってもくもくと作業をする会です！もちろん質問をしたり発表をしたり親睦を深めたりもします。
私やブログに登場する先輩方もいます！
次回は12/20（木）です！
ぜひ一緒に勉強しましょう～
お申込みは下記URLから行ってください！
お待ちしております～
