LoginSignup
6
6

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-09-07

さて、第一回ではBluemixでNode.jsサーバーの構築まで行きました。

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

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

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

image

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

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

それではさっそく作って参りましょう。(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

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

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

image

2 クマさんのアクションゲームのテンプレートを開く

上段にあるEXPLOREをクリックしてください。
My_Projects___IBM_Bluemix_DevOps_Services.png

検索欄にfamilydayと入力して検索してください。くまさんの画像のプロジェクトが出てきたらOKです。こちらのテンプレートを利用して、アクションゲームを作って行きます。
Search___IBM_Bluemix_DevOps_Services.png

それでは、このプロジェクトをクリックしてみてください。下のような画面に変わるので、右端になるFORK PROJECTをクリックしてください。familyday-bear201508_-_IBM_Bluemix_DevOps_Services.png

Name your projectの欄にプロジェクト名を入れ、下部にあるBluemix Projectの箇所は第一回で作成したサーバーの環境に合わせてください。最後にCREATEを押すと
familyday-bear201508_-_IBM_Bluemix_DevOps_Services.png

ちなみに確認方法はこちらです。Bluemixの画面から、上段にあるダッシュボードをクリック後に以下のような項目を確認ください。
ダッシュボード_-_IBM_Bluemix.png

CREATEが成功すると、ご自身のDevOps Servicesにテンプレートがコピーされます。。
Congratulations! You have successfully created your new project.とういメッセージが表示されていればOKです!
それでは次にEDIT CODEをクリックしてください。
testenchantjs-mz-201508_-_IBM_Bluemix_DevOps_Services.png

次に、左側の欄より、manifest.ymlをクリックしデプロイ先の情報を更新します。ここではホスト名とアプリケーション名が異なるので第一回で作成したホスト名とアプリケーション名に変更して更新してください。(第一回では同じ名前にしてます。)
manifest_yml_-_エディター.png

完了したら、上段にある三角ボタンを押してサーバーにデプロイを実行してください。
manifest_yml_-_エディター.png

停止ボタンの右横にサーバーのURLに飛ぶボタンがありますので、こちらをクリックしてください。
manifest_yml_-_エディター.png

Webブラウザの左下に十字キーが表示されればOKです!!
enchant.png

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

-Back Number-
小学生から始めるBluemix始めの一歩(第一回)

6
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
6