Windows 8.1

[アーティクル]
06/15/2015

Chronicling America API による最新マイクロフィッシュの作成

今日の新聞は、Web 上の他のニュースソースに置き換わりつつありますが、かつては、最新の出来事についての主要情報源でした。米国議会図書館をはじめさまざまな機関が、Chronicling America プロジェクト (chroniclingamerica.loc.gov(英語)) を通じ、標準化した API を利用して、膨大な量に及ぶ米国新聞の過去の記事を Web から入手できるよう取り組んでいます。この API により、開発者は Chronicling America プロジェクトのメディアを利用して、調査アプリ、過去の情報を添えたニュースアプリ、家系図にコンテンツを添付するアプリなどを構築できます。今回は、Chronicling America API の概要を紹介し、ユーザーがデジタル化された新聞の調査や閲覧を実行できる Windows ストアアプリを構築します。

Chronicling America API の概要

Chronicling America API には主要コンポーネントが 2 つあります。1 つは OpenSearch プロトコル、もう 1 つはコンテンツにナビゲーションするための標準化された URL です。各出版物には、標準形式に従う URL があります。この URL に修正を加えれば異なるデータにアクセスできます。たとえば、特定のページを取得するのに必要な URL 構造は、http://chroniclingamerica.loc.gov/lccn/sn83030214/1913-08-12/ed-1/seq-1/(英語) の形式になります。この形式は、特定の出版物を要求する部分 (/lccn/sn83030214/)、日付と号や版の識別子を指定する部分 (1913-08-12/ed-1)、およびページ番号を指定する部分 (seq-1/) から構成されます。2 ページ目を要求する場合は、seq-1 を seq-2 に変えるだけです。今回は、この標準 URL を使用してナビゲーションをシンプルかつ高速にし、オブジェクトを検索する際に単発の要求を何度もサーバーに送らないようにします。

この URL を使用して特定のコンテンツを取得できますが、OpenSearch プロトコルを使用してタイトルやページを検索することもできます。タイトルの検索やページの検索の URL 構造は異なります。タイトル検索の構造については、1.usa.gov/1a0GOpFを、ページ検索の構造については、1.usa.gov/188T1HBを参照してください。この 2 つの XML ファイルには、Chronicling America で使用できるすべての出力形式とパラメーターが提供されています。今回は、検索対象となるほとんどのプロパティが含まれるページ検索に注目します。

マイクロフィッシュアプリをビルドする

マイクロフィッシュを知らない世代の方のために説明すると、マイクロフィッシュとは複数の小さな画像をプリントした 1 枚の透き通ったフィルムのことです。プリントされた画像は肉眼では何が描かれているかほとんどわかりませんが、特殊なプロジェクターにマイクロフィッシュシートをかければ、数百枚 (またはそれ以上) の画像にアクセスできます。マイクロフィッシュは画像の大容量ストレージメディアとして優れており、ユーザーはプロジェクターの操作ハンドルを使ってドキュメント間をすばやく移動できます。

Chronicling America の新聞を表示するサンプルアプリにマイクロフィッシュを使用するのは単なる思い付きです。このアプリは GridView に出版物の一覧を表示するところから始まります。ユーザーは、電子ブックリーダーを使用しているかのように、このコンテンツ (マイクロフィッシュの拡大画像) を検索し、刊行物を調べることができます。米国議会図書館は既に、堅牢な JavaScript 機能を使用したすばらしい Web アプリを構築しています。このサイトを参考にして、Web の JavaScript を変換し、Windows ストアアプリを構築することができます。

今回は JavaScript で Windows 8.1 用 Chronicling America アプリを構築しました。まず、Visual Studio の JavaScript Windows ストアアプリテンプレートを利用してナビゲーションアプリケーションを作成します。テンプレートで用意されているコード (navigator.js のナビゲーションコードや default.js のアプリ登録イベントハンドラーなど) を使用すれば、アプリのインフラストラクチャをすべて手動で構築する必要がなくなります。

100 年前の今日

Chronicling America のホームページには、100 年前の今日付けの新聞の第 1 面が表示されます。このような興味深いページからアプリを開始すれば、ユーザーをすぐさまコンテンツに引き込むことができます。まず、Chronicling America に接続して、データを取り出す必要があります。今回のアプリは、データ関連の関数をたくさん実行します。そこで js フォルダーに data.js という新しい JavaScript ファイルを作成し、すべてのデータ操作をこのファイルで行います。つまり、今回はここをデータ層と考えます。

data.js のコードがグローバル名前空間に漏れ出さないように、data.js に以下のコードを追加して自己完結型の関数を作成します。

(function () {
   "use strict";
   // Code goes here
 })();

このブロック内のすべての変数や関数はプライベートになるため、data.js を使用するファイルとの変数名の競合は起こりません。コメント "Code goes here" (ここにコードを挿入します) を、図 1のコードに置き換えます。

図 1 Data.js の初期コード

var imageList = new WinJS.Binding.List(); // The image list for binding
 var pagesList = new WinJS.Binding.List(); // List of pages for a single issue
 var urlPrefix =   "http://chroniclingamerica.loc.gov"; // Used to prefix all URLs
 var httpClient =   new Windows.Web.Http.HttpClient(); // Default HTTP client to use
 function getInitialPages() {
   // Get the date and set it 100 years ago
   var hundredYearsAgo = new Date();
   hundredYearsAgo.setYear(hundredYearsAgo.getYear() - 100);
   var uri =
     new Windows.Foundation.Uri(urlPrefix + "/frontpages/" +
     hundredYearsAgo.getFullYear() + "-" + hundredYearsAgo.getMonth() + "-" +
     hundredYearsAgo.getDate() + ".json");
   httpClient.getStringAsync(uri)
     .then(
     function c(result) {
       var images = JSON.parse(result);
       images.forEach(function (item) {
         item.medium_url = urlPrefix + item.medium_url;
         item.thumbnail_url = urlPrefix + item.thumbnail_url;
         item.url = urlPrefix + item.url;
         imageList.push(item);
     });
   })
 }
 // Get function goes here
 WinJS.Namespace.define("Data", {
   GetInitialPage: getInitialPages,
   ImageList: imageList,
   PageList: pagesList
 });

図 1 は、Chronicling America API 呼び出しで入手したデータを保持する基本的な宣言から始まります。今回は、Chronicling America のベース URL の入力 (や入力ミス) を避けるための URL プレフィックスや関数間で共有する HttpClient オブジェクトなど、ハウスキーピング用にいくつか変数を設定しています。

data.js の最初の関数は、100 年前の第一面を呼び出します。この関数は、今日の日付を取得してから 100 年を差し引く、簡単な計算から始まります。Chronicling America の標準 URL を使用して、API の frontpages ディレクトリへの要求を設定し、指定した日付と一致する号の第一面をすべて読み込みます。サーバーから JSON データが返されるように、URL の末尾を .json にしていることに注目してください。

Chronicling America API では、XML や HTML といった別のデータ型を要求するために、この値を設定できます。httpClient.getStringAsync 関数を使用して、アプリから API に JSON データを要求し、JSON オブジェクトに返された文字列値を解析します。getStringAsync を呼び出しているため、サーバーから返されるデータの型はわかりません。今回のアプリでは JSON を想定しているので、API から返されるデータを JSON に変換できるか検証するために JSON.parse を使用します。今回の場合、この関数からは JSON オブジェクトの配列が返されます。返された文字列を JSON に変換できない場合は、コードでエラーを発生させます。最後に、(Chronicling America から提供される URL は絶対 URL ではなく相対 URL であるため) 項目の URL を更新して、確実にアプリから画像に接続できるようにプレフィックスを付加します。

Windows.Web.Http.HttpClient を使用する際の 1 つ注意点は、必ず失敗したときの計画を立てることです。たとえば、アクセスしようとしているサーバーがダウンしていたり、利用できないかもしれません。ここでは説明を簡単にするためにエラー処理を省略していますが、付属のオンラインサンプルコードにはエラー処理を含めています。

図 1 のコードの最後に、data.js のコンテンツを登録して他のアプリから利用できるように WinJS.Namespace を追加しました。この名前空間では、data.js 内のプライベートオブジェクトを、他のコードからアクセスできるパブリックオブジェクトに変換できます。WinJS.Namespace.define を使用して、定義済みのオブジェクトとメンバーをコードの別の部分から利用できることをアプリに通知します。つまり、ここで Data とそのメンバーを自分のページの IntelliSense で利用できるようにします。

ホーム画面へのバインド: Data オブジェクトを定義したら、HTML ページに接続して Chronicling America サイトのコンテンツを表示する必要があります。まず default.html ページを開き、data.js へのスクリプト参照を追加します。

この手順により、アプリのすべてのページで data.js が利用可能になります。home.html の main セクションのコードを以下のコードに置き換えます。

<div id="hundresYearsListView" class="itemslist win-selectionstylefilled"
      aria-label="List of Publications"
      data-win-control="WinJS.UI.ListView" data-win-options=
        "{ selectionMode: 'none', layout: { type:  WinJS.UI.GridLayout } }"></div>

このコードでは、Chronicling America API からの検索結果を表示する ListView コントロールを定義します。この ListView コントロールでは、新聞ページの画像と出版物の場所を含むテンプレートを使用します。WinJS.Binding.Template コントロールを使用して、ListView の表示内容を記述します。このテンプレートがあれば、デザインチーム (デザインチームがない場合はマーケティングチーム) はデータバインドのことを気にしないで HTML を直接操作できます。以下のコードを <body> タグの直下に追加します。

<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
      <div class="item">
        <img class="item-image" src="#" data-win-bind=
          "src: thumbnail_url; alt: label" />
        <div class="item-description">
        <h3 class="item-title" data-win-bind="textContent: label"></h3>
        <h4>(<span data-win-bind="textContent: pages"></span> pp.)</h4>
        <h4 class="item-subtitle win-type-ellipsis" data-win-bind
    ="textContent:
          place_of_publication"
    ></h4>
        </div>
      </div>
    </div>

フィールドとプロパティのバインドは data-win-bind 属性によって決まります。この属性は、バインド中に特定の属性で表示する内容を決めるために Windows によって使用されます。dataset 属性は HTML5 の新しい属性で、ニーズに合わせてカスタム属性を構築できます。Windows ストアアプリでは data- から始まる名前の属性が広く使用されますが、今回の例では、新聞の名前を保持する data-publication など、独自の属性を構築できます。document.querySelector 関数を使用してこの属性を検索できるため、この属性の全要素へのアクセスも容易になります。

ListView へのデータの接続: ListView にデータを配置するには、home.js ファイル (/pages/home/home.js) を開き、図 2のコードをホームページコントロールの ready 関数に追加します。

図 2 ready 関数に追加するコード

ready: function (element, options) {
   // Load the data
   Data.GetInitialPage();
   // Configure the list view
   var hundredYearListView =
      document.getElementById("hundresYearsListView").winControl;
   hundredYearListView.itemDataSource = Data.ImageList.dataSource;
   hundredYearListView.itemTemplate = document.querySelector(".itemtemplate");
   hundredYearListView.oniteminvoked = this._itemInvoked;
   // Process the bindings
     WinJS.Binding.processAll();
 },
 _itemInvoked: function (args) {
   args.detail.itemPromise.done(function itemInvoked(item) {
   var itemSelected = Data.ImageList.getAt(args.detail.itemIndex);
   WinJS.Navigation.navigate(
     "/pages/details/details.html", { selectedItem: itemSelected });
   });
 }

図 2 のコードは、Data.GetInitialPage 関数を呼び出して API のデータを読み込む処理から始まります。次に、(GetInitialPage 関数でデータが設定される) ImageList のデータを取得するように ListView を設定し、テンプレートコントロールを ListView コントロールに関連付けます。この ListView コントロール機能のしあげとして、ItemInvoked のイベントハンドラーを追加したため、ユーザーが新聞の画像をクリックすると何かが起こります。データバインドなど、ready 関数の最中に行われた変更を基に UI を更新するために、ready 関数の最後で WinJS.Binding.processAll を呼び出します。

続いて、選択項目を受け取り、その項目を詳細ページに渡して細かい操作を行う _itemInvoked を定義します。操作は、データオブジェクトを直接ページに渡すだけの基本操作です。navigate メソッドにより、あるページから次のページにデータを渡す場合の柔軟性が向上します。Windows ストアアプリでナビゲーションを使用する場合の詳細については、Windows デベロッパーセンターの Windows ストアアプリページのサンプル (bit.ly/153fDXM、英語) を参照してください。

アプリを実行する前に、アプリの見栄えを少しよくするため、図 3 に示すスタイルを home.css (/pages/home/home.css) に追加します。

図 3 Home.css のスタイル

.homepage section[role=main] {
   margin-left: 120px;
   margin-right: 120px;
 }
 .homepage item {
   height: 225px;
   display: block;
   margin-bottom: 5px;
   margin-top: 5px;
   margin-left: 5px;
 }
 #hundredYearsListView {
   height: 90%;
 }

この時点でプロジェクトを実行すると、図 4 のような画面が表示されます。

図 4 Chronicling America のホーム画面

ここまででホーム画面を作り、ちょっとしたプラミングを行いました。次の手順は、出版物のページの表示と詳細画面の作成です。

特定のページを表示する

アプリの既存の設定により、詳細画面の追加は簡単です。まず、ある号のページを検索する新しい関数を data.js に追加します。次に、このデータを実際に表示するページコントロールを構築します。

data.js に戻り、まず、コメント "Get function goes here" (ここに関数を挿入します) を図 5のコードに置き換えます。

図 5 Data.js の get 関数

function get(url) {
   pagesList.length = 0;
   var uri = new Windows.Foundation.Uri(
     url.replace(/\/seq\-[1-999]{1,3}(\/|\.json)?$/g, ".json"));
   httpClient.getStringAsync(uri)
     .then(
     function complete(result) {
       var editionItem = JSON.parse(result);
       editionItem.pages.forEach(function (item) {
         item.thumbnail_url = item.url.replace(".json", "/thumbnail.jpg");
         item.medium_url = item.url.replace(".json", "/medium.jpg");
         pagesList.push(item);
       })
     })
 }

このコードでは URL を受け取り、Chronicling America の標準 URL 記法を使用して、ページ 1 (/seq-1/) への参照を版の JSON 呼び出しに置き換えます (ed-1/seq-1/ を ed-1.json に変換します)。これを行うには、パターン /seq-[1 ～ 3 桁の数字]/ または seq-[1 ～ 3 桁の数字].json を照合する正規表現を使用して、.json だけに置き換えます。版の JSON オブジェクトを呼び出して、特定のページだけでなく、その号についての情報を取得します。URL にさらに手を加えて、その号や出版物全般の情報を取得することもできますが、ここでは版とページの情報だけを扱います。get 関数を追加したら、WinJS.Namespace.define 関数に登録して、他のページから参照できるようにします。

詳細ページの作成: まず、pages ディレクトリの下に "details" フォルダーを作成します。このフォルダーには、ページコントロールを構成する 3 つのファイル (HTML、JS、および CSS の各ファイル) を保存します。フォルダーに新しい項目を追加し、ページコントロール (Windows ストアの下) を選択し、その項目に details.html という名前を付けます。ここで、図 6 のコードを使用して、details.html (/pages/details/details.html) の <body> タグを更新します。

図 6 details.html のコード

<div class="listview-itemtemplate"
      data-win-control="WinJS.Binding.Template">
      <div class="item">
        <img class="item-image" src="#" data-win-bind="src: medium_url" />
      </div>
    </div>
    <div class="details fragment">
      <header aria-label="Header content" role="banner">
        <button data-win-control="WinJS.UI.BackButton"></button>
        <h1 class="titlearea win-type-ellipsis">
          <span class="pagetitle"></span>
        </h1>
      </header>
      <section aria-label="Main content" role="main">
        <div id="flipview" data-win-control="WinJS.UI.FlipView"></div>
      </section>
    </div>

このコードは、ListView コントロールの代わりに FlipView コントロールを使用していることを除けば、home.html に良く似ているのがわかります。これにより、アプリの感触がさらに電子ブックリーダーに近づきます。画像だけを話題にしていますが、Chronicling America は PDF コンテンツ、光学式文字認識 (OCR) テキストなど、さまざまな種類のコンテンツを利用できます。今後のプロジェクトで、これらのさまざまな種類のコンテンツを使用するとアプリにどのような深み (OCR 機能を利用する補助テクノロジなど) が加わるかを考えます。

HTML は完成です。ここで、CSS ファイル (/pages/details/details.css) に目を向け、ページの見栄えをよくするクリーンアップスタイルを追加します。

.details section[role=main] {
   margin-left: 120px;
   margin-right: 120px;
 }
 #pageListView {
   height: 90%;
   width: 90%;
 }
 #flipview {
   height: 90%;
   width: 90%;
 }

詳細を FlipView に接続する

details.js ページ (/pages/details/details.js) を開き、ページコントロールの ready 関数に以下のコードを追加します。

// Step 1: consume the options data
 var selectedItem = options.selectedItem;
 // Step 2: acquire data for pages
 Data.Get(selectedItem.url);
 // Step 3: set the page title
 var title = document.querySelector(".details .pagetitle");
 title.textContent = selectedItem.label;
 // Step 4: set up the ListView to display the pages
 var fV = document.getElementById("flipview").winControl;
 fV.itemDataSource = Data.PageList.dataSource;
 fV.itemTemplate = document.querySelector(".flipview-itemtemplate");
 WinJS.Binding.processAll();

options.selectedItem を使用していることを除けば、このコードの大部分は home.js と同じです。これはホームページのオブジェクトで、navigate 関数を経由して詳細ページに渡します。FlipView コントロールにバインドする場合、options.selectedItem オブジェクトのデータを使用して、Data.Get を呼び出し pageList オブジェクトを設定します。ListView 同様、FlipView では WinJS.Binding.Template コントロールを使用してコンテンツを表示します。FlipView を使用することにしたのは、一度に表示するページが 1 つだけになることと、表示するページが画像だからです。また FlipView 用のコントロールを使用することで、ユーザーの読み取りエクスペリエンスがより自然になります。

コードを実行すると、図 7のような画面が表示されます。

図 7 サンプル詳細ページ

詳細が完成したら、このアプリ用にしあげる機能がもう 1 つあります。それは検索機能です。

コンテンツを検索する

新聞コンテンツの検索機能は優れた調査ツールになります。従来のマイクロフィッシュデバイスからは格段の進歩です。OpenSearch を使用することにより、Chronicling America はオープン標準に準拠する強力な検索機能を提供します。今回のアプリの場合、1.usa.gov/188T1HBのパラメーターを使用して、ページコンテンツを検索します。

まず pages ディレクトリに "search" フォルダーを追加します。search フォルダーに新しい項目を追加し、検索結果用のコントロールを選択します。検索を有効にするには、appmanifest に Search 宣言を追加し、default.html ファイルに searchResults.js への参照を追加する必要があります。検索をサポートする場合、数ファイルを追加するだけではすみません。そこで、Search コントラクトの処理に不慣れな方は、まず Windows ストアアプリのデベロッパーセンターの記事 (https://msdn.microsoft.com/ja-jp/library/windows/apps/hh465238.aspx) を参照してください。

検索機能を構築するのに最初に必要なのは、新しい Search 関数を data.js (/js/data.js) ファイルに追加することです。data.js を開き、get 関数の後に 図 8のコードを追加します。

図 8 Search 関数

function search(terms) {
   itemList.length = 0; // Clear the list items
   var uri = new Windows.Foundation.Uri(
     urlPrefix + "/search/pages/results/?andtext=" + terms + "&format=json");
   return httpClient.getStringAsync(uri)
     .then(
     function complete(result) {
       var searchList = JSON.parse(result);
       imageList.pop();
       searchList.items.forEach(function (item) {
         item.medium_url = urlPrefix + item.id + "medium.jpg";
         item.thumbnail_url = urlPrefix + item.id + "thumbnail.jpg";
         item.label = item.title;
         imageList.push(item);
       })
   })
 }

このシンプルな関数は検索語句を受け取り、ページ検索 URL と連携する URI を構築します。andtext パラメーターにより、ページのコンテンツの検索に使用する語句を指定できます。ただし、使用可能なパラメーターを追加する場合は、検索定義 XML ファイルのチェックを忘れないでください。search を名前空間の項目として追加し、searchResults.js (/pages/search/searchResults.js) からアクセスできるようにしたら、data.js は完成です。

検索結果コントロールの変更: 項目を追加する際は、(ページコントロールと同様) 結果を表示する HTML ファイル、結果にスタイルを設定する CSS ファイル、および結果をバインドする JavaScript ファイルの 3 つを作成します。まず searchResults.html ファイルを更新して、データモデルに合わせて itemtemplate を置き換えます (図 9 参照)。

図 9 SearchResults.html の更新

<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
      <div class="item">
        <img class="item-image" src="#" data-win-bind=
          "src: backgroundImage; alt: title" />
        <div class="item-content">
          <h3 class="item-title win-type-x-small win-type-ellipsis"
            data-win-bind="innerHTML: title searchResults.markText"></h3>
          <h4 class="item-subtitle win-type-x-small win-type-ellipsis"
            data-win-bind="innerHTML: publisher searchResults.markText"></h4>
          <h4 class="item-description win-type-x-small win-type-ellipsis"
            data-win-bind="innerHTML:
            place_of_publication searchResults.markText"></h4>
        </div>
      </div>
    </div>

ここで searchResults.js ファイルを開きます。このファイルは多くの関数を含んでいますが、変更の大半は _searchData 関数に加えます。_searchData のコードを、図 10 のコードに置き換えます。

_searchData: function (queryText) {
   var results;
   if (window.Data) {
     Data.Search(queryText).done(
       function complete(result) {
         if(Data.ImageList.length &gt; 0)
           document.querySelector('.resultsmessage').style.display = "none";
       });
     results = Data.ImageList.createFiltered(function (item) {
       return ((item.title !== undefined && item.title.indexOf(queryText) &gt;= 0)
         || (item.publisher !== undefined && item.publisher.indexOf(queryText)
         &gt;= 0) || (item.place_of_publication !== undefined &&
         item.place_of_publication.indexOf(queryText) &gt;= 0));
     });
   } else {
     results = new WinJS.Binding.List();
   }
   return results;
 }

このコードと生成されたコードを比較すると、ここで行った変更は、コンポーネントを反映するための item オブジェクトのデータモデルの更新と、Data.Search 関数の完了後に行う一部の機能の追加だけであることがわかります。事前に生成されているコードを使用すれば、このようなアプリをすばやく市場に投入できます。また、アプリ特有の機能を作成することに専念でき、毎回各機能を個別にフックすることも必要ありません。

コードを実行する前に、searchResults.js の _generateFilters フィルター関数を更新して、データモデルを反映します。既定では、グループのフィルターが 2 つ加えられていますが、これらのフィルターを、出版された都市の値のフィルターなど、データモデルにとって役に立つフィルターに更新します。この作業が完了してから、コードを実行すると図 11 のような画面が表示されます。

図 11 Chronicling America アプリの検索結果画面

検索画面のしあげとして、記事の詳細を表示し、そのページを閲覧できるようにする必要があります。searchResults.js (/pages/search/searchResults.js) の _itemInvoked 関数を以下のコードに更新します。

_itemInvoked: function (args) {
   args.detail.itemPromise.done(function itemInvoked(item) {
   var searchResult = originalResults.getAt(args.detail.itemIndex);
   WinJS.Navigation.navigate(    "/pages/details/details.html",
     { selectedItem: searchResult });
   });
 },

このコードは、現在選択されている検索結果項目を取得し、詳細ページに渡します。WinJS.Navigation.navigate 関数は、ページのアドレスと初期状態宣言という 2 つの引数を受け取ります。initialState オブジェクトを使用すると、画面から画面にパラメーターを受け渡すことができます。今回の場合、ホームページの selectedItem を使用したのと同様に、navigate 関数は選択された searchResult オブジェクトを詳細ページに渡します。

21 世紀のマイクロフィッシュ

Chronicling America は過去の新聞をアーカイブし、シンプルな API を用意してその記事を利用できるようにしています。今回は、この Web サービスの中核となる機能を調べ、Windows ストアアプリでいくつか基本的なコントロールを使用してこの Web サービスを利用する方法を紹介しました。Windows 8.1 は、開発者が創造的になり、ユーザーとテクノロジーとの対話方法を再考するチャンスを提供します。

今回は、新聞画像 1 枚のデータを取得して、それを対話型の最新のアプリにしました。このサンプルを拡張して、ユーザーの関心事項を基に個人向けにカスタマイズした検索設定の共有や保存を行うなど、さまざまな機能を追加できます。米国議会図書館と全米人文科学基金は、構築に利用する機能豊富な API を提供しています。優れたアプリを構築するために、このような過去のデータをレパートリーに加えてください。

概要: 魅力的なエクスペリエンス、再利用可能なスキル

Windows ストアアプリにより、データを使って創造性を発揮することができます。今回のアプリでは、研究、教育などの歴史調査に利用できる過去の新聞情報を操作できます。Chronicling America と Windows 8.1 を組み合わせ、メディアリッチな API とシンプルな JavaScript コーディングを使用して、魅力的なエクスペリエンスを簡単に構築できます。

IT 向け概要:

今回は、主なスキルセットを再利用するだけで、API からデータを取り出し、検索して、コンテンツを操作しています。コードの再利用とメディアリッチな API により、魅力的なエクスペリエンスを作成しています。

開発チームのメンバーの既存スキルを生かして、リッチなユーザーエクスペリエンスを構築します。
検索などの Windows 8.1 のチャーム機能に接続して、ユーザーを引き付けます。
市場での差別化として、古いテクノロジーに新しいビジョンを提供します。

開発者向け概要:

開発とは創造的な行為であり、Windows ストアアプリは開発者に多くの自由を与えます。今回は、レトロなテクノロジーを見直し、主なスキルセット (ListView と Windows.Web.Http.HttpClient) を再利用して、Windows ストアアプリを構築しています。アプリと検索機能の統合により、ユーザーは Windows 8.1 のあらゆる場所からアプリのコンテンツを操作できます。

非同期コードのワークフローを構築するためのプロミスの連鎖。
ListView スキルを FlipView コントロールに再利用。
JavaScript プロトタイプ機能を使用するオブジェクトの動的拡張。

詳細情報:

JavaScript での非同期プログラミング (Windows ストアアプリ): bit.ly/17EiJTj
Chronicling America: chroniclingamerica.loc.gov(英語)
OpenSearch: opensearch.org(英語)

Tim Kulp は、ボルティモアの UnitedHealthcare International で開発チームを率いています。彼は、ブログ (seccode.blogspot.com、英語) とツイッター (Twitter.com/seccode、英語) で、コード、セキュリティ、およびボルティモアの飲食店について話しています。

この記事のレビューに協力してくれた技術スタッフの Eric Schmidt (マイクロソフト) に心より感謝いたします。
Eric Schmidt は、Windows 開発者向けコンテンツチームでコンテンツ開発者を務めており、JavaScript 用 Windows ライブラリ (WinJS) について執筆しています。以前にマイクロソフトの Office 部門に在籍していたときは、Office プラットフォーム用アプリのコードサンプルを作成していました。それ以外の時間は、家族と過ごしたり、ストリングベースを弾いたり、HTML5 のビデオゲームを作成したり、プラスチック製ブロック玩具についてのブログ (http://historybricks.com/、英語) を執筆したりしています。