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

2014年 7月 03日
PDF (365 KB)
 

Viswanath Rao

GBS SME, Telecom Billing, IBM

IBM Bluemix™ にサインアップ
無償のサービス、ランタイム、インフラを含むクラウド・プラットフォームが、新たなモバイルやウェブ・アプリのクイックな構築とデプロイを実現します。

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 のプロジェクトにインポートする操作のスクリーンショット

    クリックして大きなイメージを見る

  8. ページの左側にあるプロジェクト・ツリーを展開し、index.ejs ファイルを編集するために、このファイルをクリックして開きます。

読む:Developing Bluemix applications in Node.js with the Web IDE (Web IDE を使用して Node.js で IBM Bluemix アプリケーションを開発する)

ステップ 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="http://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 のダイアログのスクリーンショット

    クリックして大きなイメージを見る

  4. デプロイメントが完了したら、DevOps Services からアプリケーション URL を開き、画像が少しずつ回転する様子を観察してください。このアプリケーションは、Bluemix UI に表示されているアプリケーション URL をクリックして表示することもできます。

まとめ

 

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

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

関連トピック:Node.jsJavaScriptDojo Toolkit

コメントの追加

注意: HTML コードは、コメント内ではサポートされません。


残り 1000 文字

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。

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