MSDN 開発体験テンプレートを使用したニュースリーダーアプリの開発 (準備編)


Windows 8 の新しい UI 環境 (かつて Metro と呼ばれた) で動作するアプリケーション、通称「Windows ストア アプリ」の開発方法について書いています。

Windows ストア アプリは C,C++,VB,C#,JavaScript のいずれかの言語で開発することができますが、このブログでは HTML + JavaScript での開発について紹介していきます。

なお、以下は前回までの投稿記事となりますので、まだお読みになっていない方はこれからの記事を読む前にぜひご覧ください。

 

前回の記事では Visual Studio 2012 に既定で用意されている Windows ストア アプリのプロジェクトテンプレートについて紹介しました。

これら既定のプロジェクト テンプレートを使用した Windows ストア アプリの開発については以下のような MSDN の各ドキュメントをご覧いただくとして、

 

<参考>

パート 1: "Hello, world" アプリを作成する (JavaScript と HTML を使った Windows ストア アプリ) (Windows)
http://msdn.microsoft.com/ja-jp/library/windows/apps/hh986964

パート 4: ブログ リーダーを作成する (JavaScript と HTML を使った Windows ストア アプリ) (Windows)
http://msdn.microsoft.com/ja-jp/library/windows/apps/hh974582.aspx

クイックスタート: 単一ページ ナビゲーションの使用 (JavaScript と HTML を使った Windows ストア アプリ) (Windows)
http://msdn.microsoft.com/ja-jp/library/windows/apps/hh452768.aspx

 

今回から 2 回に分けて、MSDN で配布されている Windows 8 アプリ開発体験テンプレート HTML + JavaScript 用 Version 1 を使用した RSS リーダーアプリの開発方法を紹介します。

 

MSDN で提供されている開発体験テンプレートを使用して RSS リーダーアプリを開発する

MSDN では Windows 8 開発体験用のアプリケーション テンプレート HTML + JavaScript 用 Version 1 が提供されており、これを使用すると簡易的な RSS  リーダー アプリを簡単に開発することができます。

具体的には、アプリケーション テンプレートが生成した既定のプロジェクト内に記述されている RSS の URL を書き換え、フィルターメニューの文字列を書き換えるだけで基本的なカスタマイズは完了です。

今回の記事ではアプリケーション テンプレートの入手から Visual Studio 2012 で使用するための配置の方法、テンプレートから生成されるプロジェクトに既定で実装されている機能を紹介します。

 

開発体験 アプリ テンプレートの入手と配置、プロジェクトの新規作成

プロジェクト テンプレートの入手

MSDN 開発体験テンプレートを入手するには、以下の URL にアクセスし、「RSS Reader テンプレート HTML + JavaScript 用 Version 1 」の欄にある [RTM 版のダウンロード リンク >>] をクリックします。

 

Windows 8 アプリ開発体験テンプレート
http://msdn.microsoft.com/ja-jp/jj556277

*.zip ファイルがダウンロードされますが、これはこのまま使用しますので、解凍はしないでください。

 

プロジェクトテンプレートの配置

ダウンロードした Windows 8 アプリ開発テンプレートを Visual Studio 2012 で使用するには、ドキュメント (C:\Users\ユーザーアカウント\Documents) フォルダ下の、以下のフォルダにダウンロードした zip ファイルを配置します。なお、あらかじめ Visual Studio 2012 をインストールしておく必要があります。

 

\Visual Studio 2012\Templates\ProjectTemplates\JavaScript

 

テンプレートからのプロジェクトの新規作成

Visual Studio 2012 から配置したアプリ テンプレートを使用するには以下の手順を実行します。

  1. Visual Studio 2012 を起動
  2. メニュー [新規作成] – [プロジェクト] を選択
  3. [新しいプロジェクト] ダイアログ ボックスが表示されるので、同ダイアログボックスの左側のツリーより [テンプレート] – [JavaScript] を選択
  4. ダイアログボックス中央のリストビューにプロジェクト テンプレートの一覧が表示されるので [RSS_Reader] を選択し [OK] ボタンをクリック

image

([新しいプロジェクト] ダイアログボックス)

 

上記の手順で Visual Studio 2012 の IDE に [RSS_Reader] テンプレートをもとにした Windows ストア アプリのプロジェクトがロードされます。

 

プロジェクトに既定で実装されている機能の確認

Windows 8 アプリ 開発体験テンプレート HTML + JavaScript 用 Version 1 (以降、RSS_Reader テンプレートと表記) が生成するプロジェクトにあらかじめ実装されている機能について紹介します。

RSS_Reader テンプレートには、Windows ストアの認定要件を満たす機能があらかじめ実装されており、実際にこのテンプレートを使用したいくつかのアプリが既に Windows ストアで上で公開されています。

ここからは RSS_Reader テンプレートから生成されるプロジェクトをアプリケーションとして実行し、あらかじめ実装されている機能を紹介していきます。

 

プロジェクトのデバッグ実行

プロジェクトに実装されている機能を実際に動作させて確認するために、Visual Studio 2012 を使用して、プロジェクトをアプリケーションとしてデバッグ実行させます。

プロジェクトをデバッグ実行するには、Visual Studio 2012 のメニュー [デバッグ] – [デバッグ 開始] をクリックするか、キーボードの [F5] キーを押下します。

 

ニュース記事の一覧と内容の表示

アプリを起動するとスプラッシュ画面が表示され、その後、RSS で公開されている MSDN と TechNet の記事の一覧が時系列順に表示されます。

image(記事の一覧画面)

 

タイルをクリックすると画面が遷移し、記事の内容が表示されます。

image(ニュース記事の表示画面)

 

さらに表示されている記事のタイトル部分をクリックすると、Web サイトの記事がアプリ内に iframe で表示されます。

 

image(iframe での Web コンテンツの表示)

image (バック) ボタンをクリックすると、直前のページに戻ることができます。

 

フィルター機能

記事の一覧画面で、タッチパネルの場合は画面の下端を上方向にスワイプ、マウスの場合は、画面下端をポイントし、右ボタンをクリックすることでアプリバーを表示することができます。

image(アプリバーを表示させたところ)

 

アプリバー内の image (フィルター) ボタンをクリックし、表示されたフライアウトから 「IT プロ」 を選択すると、アイテム一覧画面に TechNet の記事のみをリストさせることができます。

image(フィルターの指定)

 

検索機能

取得した RSS 内の記事を検索することができます。

検索機能は、Windows 8 の新しい UI 環境で共通で使用されるチャームからその機能を呼び出します。

チャームを表示するには、タッチデバイスの場合は画面右端をスワイプ、マウスの場合はマウスポインタを画面右上角に移動すると、画面右端にチャームが表示されます。

 

image(チャームを表示したところ)

 

検索アイコンをクリックすると、検索に使用するキーワードを入力するテキストボックスが表示されます。

 

image(検索チャーム)

 

検索のキーワードボックスに、検索に使用する文字列を入力し、キーワードボックス右横の image ボタンをクリックすると、キーワードに合致した記事の一覧がアプリ内に表示されます。

 

image(検索結果の一覧)

情報の共有機能

RSS_Reader テンプレートには、Windows 8、 Windows ストア アプリと情報を共有するための 共有 (ソース) コントラクト機能が実装されており、ニュース記事の URL を他の Windows ストア アプリに送ることができます。

共有コントラクトを使用して、ニュース記事の URL を他のアプリに送るにはチャームを表示して共有アイコンをクリックします。

image(チャームを表示したところ)

 

共有チャームが表示され、情報を受け取る (共有ターゲット) 機能を持ったアプリの一覧が表示されるので、[メール] アイコンをクリックします。

 

image(共有チャーム)

 

メールアプリに URL が送られ、アプリ内に Web ページのプレビューが表示されることを確認します。

 

image(メールにブログ記事が送られたところ)

 

様々なレイアウトへの対応

RSS_Reader テンプレートは、Windows 8 の新しい UI 特有のスナップ、ポートレイト表示、画面の解像度の変更に対しても支障なく操作ができるよう対応した機能が実装されています。

 

image(スナップビューでの表示)

 

スナップビューの表示では、記事の一覧がリスト表示となり、スクロール方向は上下縦方向に変更されます。

 

image(ポートレート表示)

ポートレート表示では、上下に広がった余白を埋めるようにタイルが配置されます。

 

image(高解像度で表示したところ)

高解像度の場合も同様に、余白を生まないようにタイルが配置されます。

 

オフラインの判断

RSS_Reader テンプレートはオンラインでの使用を前提としているため、オフライン時には使用できない旨を表示する機能が実装されています。

この機能は、その時のネットワークの状態に合わせリアルタイムに状態を検知します。

image(オフライン起動時に表示されるメッセージ)

 

image(起動後にオフラインになった際に表示されるメッセージ)

 

余談ですが、じつは RSS_Reader テンプレートでは、RSS の情報をメモリ上にキャッシュしているので、画像と iframe で Web サイトを表示する機能さえ工夫すれば、オフラインに対応したアプリに作り替えることができます。

—– ・ —– ・ —– ・ —– ・ —– ・ —– ・ —– ・ —– ・ —– ・ —–

今回の記事では MSDN で公開されている Windows 8 開発体験テンプレート (HTML + JavaScript) の入手と配置、同テンプレートに既定で実装されている機能について紹介しました。

次回はこのテンプレートを改造して RSS リーダーアプリを作成する方法を紹介します。

 

★お知らせ★

HTML5.JP の管理人として、また Internet Explorer のMVP としてもご活躍されている羽田野太巳さんが Windows 8 アプリの開発入門書を執筆されました。

Windows ストア アプリ固有の Windows API、WinJS についても詳しく書かれており、MSDN ライブラリを読んで ? と思うところが見事に解説されています。

現在、HTML + JavaScript の知識を持っており、これから Windows ストア アプリの開発をこれから始める人、既に初めているけどもう少し踏み込みたい人にもお勧めの 1 冊です。

ぜひお手に取ってご覧ください。

 

『HTMLとJavaScriptではじめるWindowsストアアプリ開発入門』 (秀和システム 羽田野太巳・著)
http://www.shuwasystem.co.jp/products/7980html/3572.html

 

 

Web Statistics

Clicky

Comments (0)

Skip to main content