オープンソースになった WinJS を GitHub から取得する方法


Build 2014 で WinJS がオープンソースとして公開されることがアナウンスされました。    

これは単純に WinJS のソースコードを公開するということだけではなく、WinJS が Windows ストア アプリだけでなく HTML5 をサポートしたモダン Web ブラウザー上でも動作するということを意味していました。

オープンソースとなった WinJS は GitHub で公開されましたが、そこで公開されているアセットはソースであり、ライブラリとしてすぐに使用できる状態ではありません。そのため入手後、ライブラリにコンパイルする必要があります。また、コンパイルするための環境も用意する必要があります。

今回の記事では、GitHub からの WinJS ソースの入手と、ライブラリとして使用可能な状態にコンパイルする方法について紹介します。

さて、WinJS と入手とコンパイルの説明に入る前に、WinJS をご存じのない方のために簡単に紹介しておきましょう。

WinJS とは?

WinJS の本来の名前は Windows Library for JavaScript と言い、以前は Windows ストア アプリのフレームワークでした。
現在では HTML5 ベースのアプリケーションのフレームワークの位置づけとなります。(正式にアナウンスされているわけではありませんが)    

WinJS は FlipView や ListView といった、通常 HTML と JavaScript で自作すると結構な工数がかかるリッチなコントロール類やデータバインド、Promise モデルの非同期の仕組み等々、アプリケーションの開発の手助けになる多くの機能を提供します。

以下のページで、WinJS の提供する様々な機能を実際に試すことができますので、ぜひ複数のモダン Web ブラウザーでお試しください。

Try WinJS
http://try.buildwinjs.com/

 

GitHub からの WinJS の入手

GitHub の WinJS リポジトリにアクセスし、ライブラリのソースをダウンロードします。
具体的に手順は以下のとおりです。

  1. 以下の URL にアクセスします。
  2. GitHub - winjs/winjs
    https://github.com/winjs/winjs

  3. ページ右下の [Download ZIP] ボタンをクリックし、ファイル winjs-master.zip をダウンロードします。
     
  4. ダウンロードした winjs-master.zip を任意に場所に解凍します。

これでソースの準備は完了です。つぎにコンパイル環境を準備します。

 

コンパイル環境の準備

ダウンロードした WinJS のソースをコンパイルするために必要な Node.jsGrunt をインストールします。

Node.js とは?

Node.js は、ネットワーク アプリケーションを構築するための サーバーサイド JavaScript 環境です。
JavaScript を使用してサーバーサイドの Web アプリケーションを開発することができます。

Node.js のインストール

  1. 以下の URL にアクセスし、表示されたページにある [INSTALL] ボタンをクリックします。

    Node.js - Official Site
    http://nodejs.org/

    image

  2. プログラム実行時のセキュリティ警告のダイアログボックスが表示されるので [実行] ボタンをクリックします。

    downloadNode

  3. さらに「プログラムが~」という警告が表示されますが [OK] ボタンをクリックします。
     
  4. Node.js のインストールウィザード゛か開始されるので [Next] ボタンをクリックします。

    NodeSetup01

  5. 使用許諾が表示されるので、内容を確認して問題がなければ [I accept the tearm ~] にチェックをつけ [Next] ボタンをクリックします。

    NodeSetup02

  6. インストールするフォルダを指定する画面が表示されるので、必要があれば任意のパスに変更し [Next] ボタンをクリックします。

    NodeSetup03

  7. インストールする機能を選択する画面が表示されるので、既定の状態のまま [Next] ボタンをクリックします。

    NodeSetup04

  8. インストール準備ができたことを示す画面が表示されるので、 [Install] ボタンをクリックし、インストールを開始します。

    NodeSetup05

  9. インストールが完了したことを示す画面が表示されるので、[Finish] ボタンをクリックします。

    NodeSetup06

Node.js のインストールは以上で完了です。  

Node.js が正しくインストールされたか確認するためにコマンドプロンプトを管理者権限で起動します。

adominStartCmd

以下のコマンドを入力します。

node –v

バージョンが返れば正常にインストールされています。

node-v

引き続き Grunt をインストールします。

Grunt とは?

Grunt は Javascriptで記述するタスクランナーです。LESS や SASS といったプリプロセッサのコンパイルや、画像の圧縮、ファイルの Minifier などを自動化することができます。

Grunt のインストール

Grunt をインストールするには、Node.js のインストールが完了いる必要があります。また、インストール作業は必ずインターネットに接続している状態で行ってください。

管理者権限で実行しているコマンドプロンプトで、以下のコマンドを実行します。

npm install -g grunt-cli

コマンドが実行されるとインストールの状況が表示され、スクロールの停止と同時にインストールが完了します。

image

WinJS のコンパイル

GitHub から入手したソースを使用して WinJS をコンパイルします。

手順は以下のとおりです。

  1. 管理者権限でコマンドプロンプトを起動します。
     
  2. cd コマンドを使用し、作業ディレクトリを GitHub からダウンロードしたファイル、winjs-master.zip の中身を解凍したディレクトリに切り替えます。
     
  3. 以下のコマンドを実行します。

    npm install -g grunt-cli

  4. 以下の コマンドを実行します。

    npm install

  5. 最後に以下のコマンドを実行します。

    grunt

    処理完了後のコマンドプロンプトに Done, without errors. と表示されているのを確認してください。

    grunt-done

cd コマンドで作業フォルダに指定したフォルダを確認すると、bin フォルダが作られ、さらにその中に以下の 3 つのフォルダが作成されています。

compiled

PC 用のアプリであれば、Microsoft.WinJS.2.1 フォルダ内のアセットを、電話用もアプリであれば Microsoft.Phone.WinJS.2.1 フォルダ内のアセットを使用してアプリの開発を行うことができます。

詳細は以下のドキュメントをご覧ください。

Bringing WinJS cross-platform and open source
http://blogs.windows.com/windows/b/buildingapps/archive/2014/04/02/bringing-winjs-cross-platform-and-open-source.aspx

おしらせ

日本マイクロソフトのひさびさな開発者向けイベント de:code が  2014 年 5 月 29 日 (木) - 30 日 (金)  ザ・プリンス パークタワー東京で開催されます。

参加費の早割が 4 月 28 日までとなっておりますので、ご参加される方はお早目にどうぞ。

image

その他、html5j が主催する HTML5 コンテンツのコンテスト「HTML5 Japan Cup」が開催されます。

HTML5 Japan Cup
http://5jcup.org/

           

日本マイクロソフトもスポンサードしております。皆様の力作のご応募、心よりお待ちしております。   

Web Statistics

Clicky

Comments (0)

Skip to main content