小学生から始めるBluemix初めの一歩（第二回）

さて、[第一回](http://qiita.com/mxm/items/63b33215900e3f49d04d)ではBluemixでNode.jsサーバーの構築まで行きました。


今回はDevOps Servicesを使って、あらかじめ用意したテンプレートを利用してJavaScriptのゲームを作ってみたいと思います。



とは言え、まずはゴールを見せることが大切です。。何を作ろうとしているのか、興味を持つものかどうか、それがイメージできないと目的を見失います。





といことで・・・・じゃじゃーん。

![image](https://qiita-image-store.s3.amazonaws.com/0/87213/af4dc84b-0173-fbbb-bf31-73548a72c1a7.png)

「あれー！スーパーマ◯オだ!!」　という喝采を浴びますので覚悟してくださいね。


お子さんのテンションのボルテージが上がるなか、毅然とした態度で臨みましょう。ここからが本番です。



それではさっそく作って参りましょう。（MOCO'Sキッチン風に）



# 1. IBM DevOps Servicesにログイン
IBM DevOpse Servicesとはクラウド環境でのコーティング作業に必要なツール (セットアップは不要)、そしてアプリケーションの計画作業や他の開発者との共同作業に必要なツールが揃っている開発環境です。
以下の特徴があります。

- アジャイルな計画立案と追跡 (TRACK & PLAN)
- Web IDE (Webブラウザ上でのソースコードの修正と管理)
- Git, Jazz SCM, GitHubを使用したソースコード管理 (SCM)
- Bluemixへの自動デプロイ (BUILD & DEPLOY)

以下の図のようなイメージを持って頂ければよいかと。IBM DevOps Servicesでアプリケーションを修正して、IBM Bluemix上にデプロイする。これを全てクラウド環境上で全てやってしまうのでブラウザがあれば事足りるというわけです。

![image](https://qiita-image-store.s3.amazonaws.com/0/87213/6df45092-25f4-7333-c9aa-33c36eb105dc.png)


そんな説明をしても、よくわからんと思いますので"ブラウザ上でプログラミングができる自分専用の環境だよ"ぐらいに宥めてガンガン進めましょう。[ログインはこちらから。](https://hub.jazz.net/)


始めてログインを行うとショートネーム登録を聞かれると思います。英数小文字で他人と被らないものをつけましょう。

![image](https://qiita-image-store.s3.amazonaws.com/0/87213/48226df3-c0e9-03dc-eebb-e4253fc86abc.png)

#2 クマさんのアクションゲームのテンプレートを開く
上段にあるEXPLOREをクリックしてください。
![My_Projects___IBM_Bluemix_DevOps_Services.png](https://qiita-image-store.s3.amazonaws.com/0/87213/b5337122-4e41-dfc9-4789-db3ce4664a9a.png)

検索欄にfamilydayと入力して検索してください。くまさんの画像のプロジェクトが出てきたらOKです。こちらのテンプレートを利用して、アクションゲームを作って行きます。
![Search___IBM_Bluemix_DevOps_Services.png](https://qiita-image-store.s3.amazonaws.com/0/87213/f4fd101c-1dd8-c883-4576-c058ea9b014d.png)

それでは、このプロジェクトをクリックしてみてください。下のような画面に変わるので、右端になるFORK PROJECTをクリックしてください。![familyday-bear201508_-_IBM_Bluemix_DevOps_Services.png](https://qiita-image-store.s3.amazonaws.com/0/87213/447646f7-7819-adbf-6ff4-0127c636d083.png)

Name your projectの欄にプロジェクト名を入れ、下部にあるBluemix Projectの箇所は第一回で作成したサーバーの環境に合わせてください。最後にCREATEを押すと
![familyday-bear201508_-_IBM_Bluemix_DevOps_Services.png](https://qiita-image-store.s3.amazonaws.com/0/87213/75290c1a-e07a-de17-71e0-98e3b7e1d5cc.png)

ちなみに確認方法はこちらです。Bluemixの画面から、上段にあるダッシュボードをクリック後に以下のような項目を確認ください。
![ダッシュボード_-_IBM_Bluemix.png](https://qiita-image-store.s3.amazonaws.com/0/87213/b2f5af1d-4a16-3bff-a37e-9528809766db.png)

CREATEが成功すると、ご自身のDevOps Servicesにテンプレートがコピーされます。。
Congratulations! You have successfully created your new project.とういメッセージが表示されていればOKです!
それでは次にEDIT CODEをクリックしてください。
![testenchantjs-mz-201508_-_IBM_Bluemix_DevOps_Services.png](https://qiita-image-store.s3.amazonaws.com/0/87213/083edafe-8a0b-ab81-d5d4-46d10ffeb341.png)

次に、左側の欄より、manifest.ymlをクリックしデプロイ先の情報を更新します。ここではホスト名とアプリケーション名が異なるので第一回で作成したホスト名とアプリケーション名に変更して更新してください。（第一回では同じ名前にしてます。）
![manifest_yml_-_エディター.png](https://qiita-image-store.s3.amazonaws.com/0/87213/07d20b27-c062-660b-a74a-44d9cbaaf6ad.png)

完了したら、上段にある三角ボタンを押してサーバーにデプロイを実行してください。
![manifest_yml_-_エディター.png](https://qiita-image-store.s3.amazonaws.com/0/87213/ddf51ca3-cac7-4ee9-e2c7-862a0407ed99.png)

停止ボタンの右横にサーバーのURLに飛ぶボタンがありますので、こちらをクリックしてください。
![manifest_yml_-_エディター.png](https://qiita-image-store.s3.amazonaws.com/0/87213/afb05c37-e527-242d-dffa-e8363055553c.png)

Webブラウザの左下に十字キーが表示されればOKです!!
![enchant.png](https://qiita-image-store.s3.amazonaws.com/0/87213/5a9ad80c-a7d9-69e1-e6b3-8ca54bf1341a.png)


お疲れ様でした!!次回はいよいよアプリケーションを編集していきます!!


-Back Number-
[小学生から始めるBluemix始めの一歩（第一回）](http://qiita.com/mxm/items/63b33215900e3f49d04d)