Buid2015 で発表された edge 以外の Web 技術について (2/2)


前回の記事に引き続き、6 月 13 日 (土) に行われた <htmlday> HTML5オールスターズ勉強会 で登壇させていただきました、セッション『Edge だけじゃない! build 2015 で発表されたそれ以外の Web 関連技術まとめ』の内容を紹介する記事になります。

前回の記事では、米国のイベント build2015 の紹介と、同イベントで発表された Web 関連を除いた注目技術について紹介しました。今回は、ようやく「Web ブラウザー以外の」Web に関連する技術について紹介します。

具体的には以下のものを紹介します。

 

Visual Studio Code

Visual Studio Code は、新しいコードエディタです。コードエディタとは、文字通りプログラムコードをコーディングするためのエディターツールです。

マイクロソフトの製品といえば、インストール対象となる OS が、いままでほとんどのものが Windows であることが前提となっていましたが、Visual Studio Code は、Windows はもちろんのこと、Mac OS や Linux にもインストールして使用することができます。

image

Visual Studio Code は http://code.visualstudio.com で無償で公開されているので、誰でもすぐにインストールして使用を開始することができます。

 

Visual Studio Code の機能

Visual Studio Code は前述したように、プログラムコードを編集するためのエディターツールです。Visual Studio のような IDE (統合開発環境) ではないので、バイナリを生成したりはできませんが、git と連携したソースコントロールや、Gulp や Grunt といったタスクランナーの実行なども行えます。

また、ランタイムとしてサポートされている node.js や ASP.NET 5 の開発であれば、サーバーサイドコードのデバッグ機能も提供されるので、コード中にブレークポイントを設け、実行を中断してステップ実行し、変数やオブジェクトの内容をリアルタイムに確認する、ということも可能です。

image

なお、Visual Studio Code は 30 以上の開発言語をサポートしていますが、言語により提供される機能が異なります。

image

フロントエンド Web の開発に使用される HTML、JavaScript、CSS などについては、入力補完機能であるインテリセンスやコードスニペット、Emmet (zen coding) を使用することができます。LESS,  SASS はインテリセンスによるコード補完機能の他、Gulp や Grunt を使用してコンパイルも行えます。

CoffeeScript や TypeScript といった AltJS も、サポートされる機能は異なりますが、同様に Gulp や Grunt を使用してコンパイルを行うことができます。

ただし、HTML のコーディング用に JavaScript のデバッガーや Web サーバーの機能は用意されませんので、デバッガーは使用している Web ブラウザーの開発者ツールを、Web サーバーは IIS Explress のような開発用 Web サーバーを 自前で用意する必要があります。

HTTP のリクエスト対してレスポンスするだけの Web サーバーであれは、以下の記事に node.js で書いた Web サーバーのサンプルコードを載せてあるので、コピー & ペーストしてお試しください。もちろん、Windows でも Mac OS でも Linux でも動作させることができます。

 

Vorlon.js

Vorlon.js は Web ページをリモートデバッグするためのツールです。Vorlon サーバーを介してデバッグ対象の Web ページの情報をデバッガダッシュボードを表示する Web ブラウザー内に表示します。Vorlon.js は node.js で動作するので Windows 以外の OS でも使用することができます。

以下の画像では、左ウィンドウにデバッグ対象となるページが、右側には Vorlon.js のデバッガ ダッシュボードが表示されおり、デバッガ ダッシュボード側で選択された(黄色いマーカー) DOM が、左側のウィンドウで赤枠で囲まれています。また、接続されているデバッグ対象のウィンドウの最初の番号である 0 を表示しています。これらの操作はインタラクティブかつリアルタイムで行われ、複数のウィンドウ、スマートフォン用のエミュレーター内の Web ページにも使用することができます。

image

Vorlon.js の機能

Vorlon.js の提供する機能は大まかに以下の 4 つになります。

  1. DOM Explorer

    デバッグ対象となっている Web ページの DOM や CSS の状態を確認、あるいは操作することができます。

  2. Object Explorer

    デバッグ対象のページ内でインスタンスの立っているオブジェクトの内容を確認できます。

  3. Console

    デバッグ対象のページ内で JavaScript を実行させたり、ページ内の JavaScript からの console.log 出力を表示することができます。

  4. Modernizr

    デバッグ対象の Web ページが表示されている Web ブラウザーのサポートしている機能を表示することができます。

image

 

Vorlon.js のインストールと実行

Vorlon.js の入手とインストールは npm を使用して簡単に行うことができます。

Vorlon.js の入手から実行までの具体的な手順は以下のとおりです。

  1. コマンドプロンプトから以下の npm コマンドを実行し Vorlon.js  をインストールします。
     
     $>npm i -g vorlon
     
  2. デバッグ対象となるページに以下の Script タグを追加します。
     
     <script src=“http://localhost:1337/vorlon.js”></script>
     
  3. コマンドプロンプトで以下のように vorlon コマンドを実行し、Vorlon サーバーを起動します。
     
     $>vorlon
     
  4. デバッグ対象となるページに Web ブラウザーでアクセスします。
  5. 別に Web ブラウザーを起動し、アドレスバーに以下を入力して Vorlon サーバーに接続します。

    http://localhost:1337/

上記の手順 5 で起動した Web ブラウザーにデバッグ用ダッシュボードが表示されます。

インストールの詳細は以下のページをご覧ください。

さて、Vorlon.js の Vorlon 読み方なのですが、Bing 翻訳で発音させてみると「ふぉーろん」ですが、日本語読みであれば「ぼろん」でいいんじゃないでしょうか。

 

Hosted Web Apps

日本語では「ホストされた Web アプリ」と訳される Hosted Web Apps は Web サイトを Windows ストア アプリとしてパッケージするものです。

Hosted Web Apps は、Web サイトを単純に Web View でラップするだけでなく、マニフェストファイルに適切にアクセス権を記述することによりアプリ層を介して Windows プラットフォームの API を呼び出すことができます。

image

たとえば、Amazon さんや楽天さんのようなショッピングサイトを考えてみた場合、Web ブラウザーから商品を検索する場合はキーボードから入力されたキーワードで検索を行いますが、Hosted Web Apps にした場合には、ネイティブの API をコールしてバーコードリーダーから取得したデータで検索を行う、ということも不可能ではありません。

既にインターネット上にホストされている Web サイトをアプリ化するメリットは、単に SEO や、スマートフォンユーザーの利便性を上げる、とことだけでなく上記に示したような機能拡張も含まれます。

 

Hosted Web Apps の作成

Hosted Web Apps を作成するには Visual Studio 2015 が必要です。Visual Studio 2015 は、現在はまだリリースされていませんが、以下から RC 版を入手してインストールすることができます。

Visual Studio 2015 RC を使用した Hosted Web Apps の作成方法は以下のとおりです。

  1. Visual Studio 2015 RC を起動します。
     
  2. メニュー [ファイル] – [新規作成] – [プロジェクト] を選択します。
     
  3. [プロジェクトの一覧] ダイアログボックスが表示されるので、ダイアログボックス左のツリーメニューで、[テンプレート] – [JavaScript] – [Windows] – [Windows Universal] を選択し、画面右のテンプレートの一覧から 「Blank Apps (Windows Universal)」を選択します。[名前] テキストボックスには任意の名前をアルファベットで入力してください。入力が済んだら [OK] ボタンをクリックします。
     
  4. 画面左の [ソリューションエクスプローラー] のツリービューで package.appxmanifest ファイルをダブルクリックします。
     
  5. package.appxmanifest ファイルの内容が表示されるので、< Application> の StartPage 属性にアプリ化する Web サイトの URL を記述します。
     
    例)
    <Application  Id="App"
        StartPage="https://contso.com/myApp.html">

     

  6. <application> の閉じタグ </Application> の前に以下を追加を追加します。
     
    例)
    <uap:ApplicationContentUriRules>
        <uap:Rule Match="https://contoso.com/" Type="include"/>  
    </uap:ApplicationContentUriRules>
    </Application>

     

以上で Hosted Web Apps の基本的な設定は完了です。Visual Studio 2015 RC のメニュー [デバッグ] – [デバッグ開始] をクリックすると、コンパイルが開始され、完了すると作成したアプリが起動してきます。

 

なお、Hosted Web Apps の詳しい作成方法については以下のドキュメントを参照してください。

 

manifoldJS

manifoldjs は、Web ブラウザー上で動作する Web アプリおよび Web サイトを、前述の Hosted Web Apps をはじめ、Apache Cordova、Chrome Apps、Firefox OS 用の Hosted アプリを一度に生成するツールです。ツールではありますが、npm でインストールしてローカルで使用する他に、インターネットでサービスが公開されているのでオンラインで使用することができます。

image

前述のように manifoldjs が生成するのは Hosted アプリのイメージであるためほとんどが設定(マニフェスト)ファイルのみであり、なんからのバイナリを生成するものではありません。

manifoldJS の生成するマニフェストファイルは、W3C の最新のワーキング ドラフトに基づいており、アプリが今後も動作できるように、ワーキングドラフトのスペックの進歩にあわせ manifoldJS  の機能はアップデートされます。

 

manifoldJS による Hosted アプリの生成

manifoldjs.com を使用してインターネットに公開されている Web アプリを Hosted アプリにする手順は以下のとおりです。

  1. http://www.manifoldjs.com/ にアクセスします。
     
  2. [Generate Now] と書かれている赤いボタンをクリックします。
     
  3. 画面左側の “Provide a URL or manifest” とタイトルのある [URL] テキストボックスに Web アプリの URL を入力し [Get Started] ボタンをクリックします。
     
  4. 画面が遷移するので、”Site Data” の必要な項目を以下のように設定します。

    [Name] : (アプリの名前)
    [Short Name] : (短いアプリの名前。[アプリの名前]と同じでも可)
    [Icon Url] : (アイコンとして使用する画像の URL)

  5. [Generate Package] ボタンをクリックします。

手順 5 を行うと各プラットフォーム向けの Hosted アプリ用のマニフェストファイルの生成が開始され完了するとアプリの名前がついた zip ファイルがダウンロードされます。

zip ファイルの中には projects という名前のフォルダがあり、その下にプラットフォームごとに以下のフォルダがありプロジェクトを構成するファイル群かマニフェストファイルが格納されています。

  • chrome
  • cordova
  • firefox
  • web
  • windows 10

各アプリのテスト、ビルド、ストアへの提出方法について以下のドキュメントの内容を参照してください。

 

今回のまとめ

今回の記事では前回に引き続き、<htmlday> HTML5 ALLSTART で登壇させていただきました『Edge だけじゃない! build 2015 で発表されたそれ以外の Web 関連技術まとめ』の内容を紹介しました。

とくに今回は、このセッションの本題である build 2015 で発表された Web ブラウザー以外の Web の関連技術について紹介しました。

この記事で紹介したツールやサービスは、Hosted Web Apps 以外はすべて Windows OS だけでなく、Mac や Linux でも使用できるものですので、ぜひ様々なプラットフォームで使用してみてください。

 

全体のまとめ

前回の記事の build 2015 注目の技術 に書いたとおり、Windows 10 は、PC から IOT にまで共通のカーネルを提供し、その上で動作する Universal Windows Platform (UWP) により、プラットフォームとしてデバイスの垣根を取り払いました。また、Bridge と総称される技術によりアプリからもプラットフォームの垣根を取り去ろうとしています。

そして、リリースされる製品や技術も、もはや Windows でしか使用できないというものは少なくなりつつあります。

今回は紹介できませんでしたが、Visual Studio では既に Apache Cordova や Xamarin を使用して、Android、iOS アプリの開発が可能になっていますし、ASP.NET5 は、Mac でも Linux でも動作します。

HTML5 アプリのフレームワークであり、クロスブラウザーで使用できる WinJS も 4.0 となり、AltJS である TypeScript は、多くのフロントエンド Web 開発者の支持を集めています、

マイクロソフトの製品やサービスは、もはや Windows だけのものではありません。

今後もさまざまなサプライズに満ちた発表ががあると思いますので、ぜひマイクロソフトの新しい技術とサービスにご注目ください。

image

さいごに、このセッションの実際の動画がありますので、この記事でカバーできなかった、デモなどをぜひご覧くださいませ。(私のパートは 2 時間 47 分 26 秒からです)

 

Real Time Analytics

Clicky

Comments (0)

Skip to main content