目次


Node.js Web アプリケーションで画像をアニメーション化する

Comments

Bluemix には、迅速なアプリケーション開発を支援するために、Node.js Web アプリケーションを含む各種アプリケーションのボイラープレートが用意されています。この記事では、Node.js のボイラープレートDojo テクノロジーを使用して、Web ページで一連のグラフィックを回転させてアニメーション化する方法を紹介します。具体的には、IBM DevOps Services でボイラープレート・コードをカスタマイズし、その変更したアプリケーションを Bluemix にデプロイします。

手順を開始するために必要なもの

アプリを実行するコードを入手する

ステップ 1. Bluemix 上で Node.js Web スターター・アプリケーションを作成する

  1. Bluemix にログインします。
  2. 「Catalog (カタログ)」をクリックします。
  3. Bluemix カタログで、「Boilerplates (ボイラープレート)」に表示されている「NODE JS WEB STARTER」カードをクリックします。
  4. 「Create application (アプリケーションの作成)」をクリックします。
  5. 「Name (名前)」テキスト・ボックスに、アプリケーションの名前を入力します (現在、すべての Bluemix アプリケーションは同じ名前空間を共有するようになっているため、アプリケーションの名前は一意でなければなりません)。

ステップ 2. ボイラープレート・コードをダウンロードする

  1. 新しく作成したアプリケーションのカードで、白い背景のどこかをクリックします。
  2. アプリケーション・ダッシュボードで「VIEW GUIDE (ガイドを表示)」ボタンをクリックします。
  3. 右側にガイドが表示されるので、「2. Download the starter application package (2. スターター・アプリケーション・パッケージをダウンロードする)」をクリックします。
  4. ZIP ファイルをローカル・システムに保存します。ただし、ファイルの解凍は行わないでください。

ステップ 3. ボイラープレート・コードを DevOps Services にインポートする

  1. IBM ID を使用して DevOps Services にログインします。
  2. 「CREATE PROJECT (プロジェクトの作成)」をクリックします。
  3. プロジェクトの名前として、ステップ 1 で作成した Bluemix アプリケーションと同じ名前を入力します。コードの場所には「Use Jazz SCM (Jazz SCM を使用)」を選択します。オプションで、プロジェクトを公開したくない場合には「Private (非公開)」ラジオ・ボタンを選択します。
  4. 「Deploy to Bluemix (Bluemix にデプロイ)」ラジオ・ボタンを選択して、後で、更新したコードを Bluemix にプッシュできるようにします。
  5. 「CREATE (作成)」をクリックします。
  6. 新規に作成されたプロジェクトで、「EDIT CODE (コードの編集)」をクリックします。
  7. 「File (ファイル)」 > 「Import (インポート)」の順に選択し、ボイラープレート ZIP ファイルをプロジェクトに展開します。 ローカルにあるコードの ZIP ファイルを DevOps Services のプロジェクトにインポートする操作のスクリーンショット
    ローカルにあるコードの ZIP ファイルを DevOps Services のプロジェクトにインポートする操作のスクリーンショット
  8. ページの左側にあるプロジェクト・ツリーを展開し、index.ejs ファイルを編集するために、このファイルをクリックして開きます。

ステップ 4. アニメーション化のために index.ejs をカスタマイズする

HTML 関連のあらゆる変更は、直接 index.ejs でカスタマイズすることができます。このファイルでカスタマイズすると、その変更が即時にアプリケーションの待ち受けページに反映されます。

index.ejs ファイルは、JavaScript のテンプレートです。このファイルが、独自の Web アプリケーションを作成する出発点となります。ブラウザーでアプリケーションを開くと、このファイルが最初に実行されます。HTML 関連のあらゆる変更は、直接 index.ejs でカスタマイズすることができます。このファイルでカスタマイズすると、その変更が即時にアプリケーションの待ち受けページに反映されます。

任意に選択した画像をアニメーション化するために、index.ejs には Dojo テクノロジーを組み込みます。URL を指定してアクセスできる任意のフォーマット (JPG、PNG、等々) の画像をいくつか見つけてください (例えば、このリンク先の画像)。

index.ejs 内の既存のコードは必要ないので、すべて削除します。完成版の ImageRotator プロジェクトに含まれている、index.ejs ファイルを見てください。このファイルで重要な部分は以下のとおりです。

以下の script タグを追加して、Dojo API を組み込みます。

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
			djconfig="parseOnLoad: true">
    </script>

Dojo はこの HTML タグに createSurface API でアクセスして、初期画像を表示します。

<body>
     <div id="shape">
     </div>
  </body>
surface = dojox.gfx.createSurface("shape", 300, 300);

定義した間隔で画像を回転させるために、タイマーを作成します。

	t = new dojox.timing.Timer(300);
	t.onTick = function() {
             alterAndDraw ();
      }
	t.onStop = function ()  {
      }
      t.start();

タイマーが満了するたびに、画像の位置が変更されます。画像が回転域の終わりに達したら、回転方向を逆にします。

rad = rad + radDx;
			cirX = cirX - cirDx;

				if (rad == 120) {

					radDx = -radDx;
					cirDx = -cirDx;

				} else if (rad == 10)	{

			             radDx = -radDx;
					cirDx = -cirDx;

			             getImage ();  // bring next image
				} 

		        draw ();
		        drawn=true;

ステップ 5. アプリケーションをデプロイして実行する

index.ejs ファイルを変更し終えると、アプリケーションを Bluemix 環境にプッシュする準備が整います。アプリケーションをプッシュすると、ステップ 1 で作成した既存のボイラープレート・バージョンが上書きされます。

  1. DevOps Services のプロジェクトで、プロジェクト・コード・ツリー内の manifest.yml をクリックします。
  2. ページの上部にある「DEPLOY (デプロイ)」ボタンをクリックします。
  3. Bluemix の資格情報を入力してサブミットします。 アプリケーションをデプロイする際に Bluemix の資格情報を入力する、DevOps Services のダイアログのスクリーンショット
    アプリケーションをデプロイする際に Bluemix の資格情報を入力する、DevOps Services のダイアログのスクリーンショット
  4. デプロイメントが完了したら、DevOps Services からアプリケーション URL を開き、画像が少しずつ回転する様子を観察してください。このアプリケーションは、Bluemix UI に表示されているアプリケーション URL をクリックして表示することもできます。

まとめ

Bluemix のボイラープレートを利用すれば、Node.js Web アプリケーションの開発を一気に進めることができます。アプリケーションの骨組みはすべて自動的に作成されています。唯一変更する必要があるファイルは、index.ejs のみです。Web 開発とモバイル開発を容易にするために Bluemix に用意されている他のボイラープレート・アプリケーションも、ぜひ調べてください。

Bluemix に用意されているテンプレートの選択肢のスクリーンショット
Bluemix に用意されているテンプレートの選択肢のスクリーンショット

ダウンロード可能なリソース


関連トピック


コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Cloud computing, Web development
ArticleID=976280
ArticleTitle=Node.js Web アプリケーションで画像をアニメーション化する
publish-date=07032014