Web技術でアプリ開発2016 – HTML5Experts.jp https://html5experts.jp 日本に、もっとエキスパートを。 Sat, 07 Jul 2018 03:14:05 +0000 ja hourly 1 https://wordpress.org/?v=4.7.19 Electronプログラミング入門 — インストールからミニブラウザ構築まで /yosuke_furukawa/20841/ Thu, 15 Sep 2016 00:00:50 +0000 /?p=20841 連載： Web技術でアプリ開発2016 (6)
Electron

Electron

Electronとは、デスクトップクライアントを作るためのフレームワークです。クロスプラットフォームで動作することをサポートしているため、Electronで作ったアプリケーションはMac、Windows、Linuxの環境でも動作します。Atomと呼ばれる GitHub社製のエディタがあります。 ElectronはAtomを作る際にフレームワークとして作られました。以前はAtomShellと呼ばれていましたが、Electronとして名前を変更し、2016年にはversion 1.0がリリースされるまでに成長しました。

ElectronはJavaScript / HTML / CSSを使ってクライアントアプリケーションを作成します。中のアーキテクチャはChromiumとNode.jsで作られており、Web開発の技術を使ってデスクトップアプリケーションを構築することが可能です。

ElectronはCheng Zhao氏 (以降zcbenz)が開発したフレームワークですが、zcbenz氏は実際Electronの開発前にNW.js(旧 NodeWebkit) と呼ばれるフレームワークのコントリビューターでした。ElectronはNW.jsと非常によく似たフレームワークですが、いくつか技術的に異なるポイントが有ります。決定的な違いは、Chromiumの組み込み方の違いです。ElectronはライブラリとしてChromiumを組み込んでいるのに対して、NW.jsはChromiumをforkしたプロジェクトを使っています。Chromiumは非常に進化が早いプロダクトなので、forkして持つよりもアップデートを考えると効率的です。

とはいえ、NW.jsとElectronの技術的な部分以外は違いはそこまでありません。Atom開発当初にNW.jsが多少不安定だったために新しいプロダクトとして立ち上げたという側面もあるそうです。詳しくはAtomShellとNodeWebkitの違いに詳しく記載されています。

Electronの特徴

いくつか特徴があるので紹介します。

Electronのランタイム

Electron そのものはただのランタイムライブラリです、Node.jsにおけるnodeコマンドのようなもので、electronコマンドでエントリポイントとなるJavaScriptを実行します。

electronコマンドは公式サイトからダウンロードすることもできますが、Node.jsのパッケージモジュールである、npmコマンドを使ってインストールすることも可能です。

$ npm install electron -g

※ 以前までは npm install electron-prebuiltからインストールする必要がありましたが、最近はnpm install electronでinstallできるようになりました。

これでelectronコマンドが有効になるので、そのコマンドを使ってデスクトップアプリケーションを起動させます。アプリケーションを実際に書くのは後述します。

Electron / Browser間でモジュールを共有

Electronアプリを構築すると、シームレスにブラウザからNode.jsのコードを呼ぶことが可能です。そのため、下記のようなコードを実行することもできます。　

// script tag から
<script>
// 自分のローカルファイル読みこんだり
const fs = require(‘fs’);
fs.readFile(‘foo/bar/baz’, (err, data) => {
  console.log(data);
});
</script>

<script>
// 外部プロセスを呼んだり
const cp = require(‘child_process’);
cp.exec(‘ls -l’, (err, stdout) => {
  console.log(stdout);
});
</script>

ただし、この方法を使った場合、DOM-based XSSが発生すると、任意のコマンドだったり、ファイルが操作できてしまう結果になるため、プロダクションでElectronを活用する場合は注意が必要です。

参考資料: Electronの倒し方

Hello World

一旦Electronを起動してみましょう。Electronを動かすだけなら Node.jsはbuilt-inされているので不要ですが、npmがある方が便利なのでNode.jsをインストールしておきましょう。Node.jsは 公式サイトからダウンロードできます。Macであれば、brewでもインストール可能です。

Node.jsがインストールされたらElectronをインストールしてみましょう。下記の通りです。

$ npm install electron -g

適当なフォルダを作成し、package.json、main.js、index.htmlを作成します。 package.jsonは下記の通りに作成します。

{
  "name": "electron-intro",
  "version": "0.0.1",
  "main": "main.js"
}

main.jsを記述します。

const {app, BrowserWindow} = require('electron');

// window objectがGCされないようにするために、globalに定義する
let win;

function createWindow () {
  win = new BrowserWindow({width: 800, height: 600});

  win.loadURL(`file://${__dirname}/index.html`);

  win.on('closed', () => {
    // windowがクローズされたら null にして削除
    win = null;
  });
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (win === null) {
    createWindow();
  }
});

最後に表示するためのindex.htmlを記述します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello Electron!</title>
  </head>
  <body>
    <h1>Hello Electron!</h1>
    Node version: <script>document.write(process.versions.node)</script>,
    Chrome version: <script>document.write(process.versions.chrome)</script>,
    Electron version: <script>document.write(process.versions.electron)</script>.
  </body>
</html>

これだけでHello Worldは一旦完成です。 下記のようなファイル構成になっていることを確認してください。

.
├── index.html
├── main.js
└── package.json

Electronを起動させてみましょう。

$ electron .

下記のようなウィンドウが出たら完成です。

Hello, World実行結果

Hello, World実行結果

PhotonKitを使ってミニマムブラウザを作る

これだけだと味気ないので、PhotonKitを使ってミニマムブラウザを作ってみましょう。ブラウザを作ると言っても、 Chromiumを内包しているElectronであれば、Chromiumの機能を借りてくるだけなのでそこまで難しくはないです。

PhotonKitはCSSフレームワークの1つです。BootstrapやMaterial Design Liteのようなclass setを持っています。Mac のクライアントのようなアプリケーションを作るためのデザインテンプレートになっています。

Photon

Photon

まずはpackage.jsonを作りましょう。

{
  "name": "electron-mini-browser",
  "version": "0.0.1",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "electron index.js"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "electron": "^1.3.5"
  }
}

npm startでElectronを起動できるようにしておくことと、dependenciesにelectronをインストールしておきましょう。下記の方法でpackage.jsonに記述しつつ、インストールさせることが可能です。　

$ npm install electron --save

次にindex.jsを作成します。

'use strict';
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

let mainWindow = null;

app.on('window-all-closed', function() {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('ready', function() {
  mainWindow = new BrowserWindow({
    width: 800, 
    height: 600,
  });
  mainWindow.loadURL(`file://${__dirname}/index.html`);

  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});

実際のページ(index.html)を作成します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./css/photon.css">
    <script src="./js/main.js"></script>
    <title>Hello Electron!</title>
  </head>
  <body>
    <div class="window">
    <header class="toolbar toolbar-header">
    <h1 class="title">Hello Electron!</h1>
    <div class="toolbar-actions">
     <!-- リロードボタン -->
     <button id="reload" class="btn btn-default">
       <span class="icon icon-arrows-ccw icon-text"></span>
       Reload
     </button> 
     <!-- 戻るボタン -->
     <button id="back" class="btn btn-default">
       <span class="icon icon-left icon-text"></span>
       Back
     </button> 
     <!-- 進むボタン -->
     <button id="forward" class="btn btn-default">
       <span class="icon icon-right icon-text"></span>
       Forward
     </button> 
     <!-- URL バー -->
     <input type="text" id="urlbar" class="form-control" placeholder="URL" value="https://github.com/">
     <!-- お気に入りボタン -->
     <button id="favorite" class="btn btn-default">
       <span class="icon icon-star icon-text"></span>
       Favorite
     </button> 
    </div>
    </header>
      <div class="window-content">
        <div class="pane-group">
          <div class="pane-sm sidebar">
            <!-- お気に入りリスト -->
            <ul id="fav-list" class="list-group">
            </ul>
          </div>
            <!-- Webページ表示領域 -->
          <webview class="pane" id="webview" src="https://www.github.com/" autosize="on" style="height:100%;"></webview>
        </div>
      </div>
    <footer class="toolbar toolbar-footer">
    <h1 class="title">Footer</h1>
    </footer>
    </div>
  </body>
</html>

ページの中のボタンに動きを与えるため、js/main.jsを作成します。

document.addEventListener('DOMContentLoaded', () => {
  const webview = document.getElementById('webview');
  const reloadButton = document.getElementById('reload');
  const backButton = document.getElementById('back');
  const forwardButton = document.getElementById('forward');
  const favoriteButton = document.getElementById('favorite');
  const urlbar = document.getElementById('urlbar');
  const favList = document.getElementById('fav-list');

  // webview表示の時にurlbarの値を変える
  webview.addEventListener('load-commit', ({ url, isMainFrame }) => {
    if (isMainFrame) {
      urlbar.value = url;
    }
  });

  // urlbarでEnterキーを押したら遷移する
  urlbar.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
      webview.setAttribute('src', urlbar.value);
    }
  });

  // 更新ボタンをクリックしたらwebviewをリロードする
  reloadButton.addEventListener('click', () => {
    webview.reload();
  });

  // 戻るボタンをクリックしたらwebviewを戻る
  backButton.addEventListener('click', () => {
    webview.goBack();
  });
  
  // 進むボタンをクリックしたらwebviewを進ませる
  forwardButton.addEventListener('click', () => {
    webview.goForward();
  });
  
  // お気に入りボタンをタップしたらリストにURLを追加する
  favoriteButton.addEventListener('click', () => {
    const listItem = document.createElement('li');
    const listContent = document.createElement('p');
    listItem.setAttribute('class', "list-group-item");
    listItem.setAttribute('data-url', urlbar.value);
    listContent.textContent = urlbar.value;
    listItem.appendChild(listContent);
    favList.appendChild(listItem);
    listItem.addEventListener('click', () => {
      const url = listItem.getAttribute('data-url');
      webview.setAttribute('src', url);
    });
  });
});

最後にPhotonKitのCSSとFontセットを ダウンロードしておきます。 下記のようなディレクトリ構成になります。

.
├── css
│   ├── photon.css
│   └── photon.min.css
├── fonts
│   ├── photon-entypo.eot
│   ├── photon-entypo.svg
│   ├── photon-entypo.ttf
│   └── photon-entypo.woff
├── index.html
├── index.js
├── js
│   └── main.js
└── package.json

全てを終えたら、npm startコマンドで起動します。下記のようなブラウザが出現できたら完成です。

Electron+Photonで作ったミニブラウザ

Electron+Photonで作ったミニブラウザ

プラットフォーム/ライブラリの特徴

項目 説明
対応プラットフォーム Windows, Linux, OS X
コードベースは（ほぼ）完全に統一できるか？ ほぼ統一できる
UIを記述する言語 JavaScript, HTML, CSS
UIはネイティブかウェブか 基本はウェブだが、OSネイティブの機能(タスクバー等)は一部利用できる
パフォーマンス 基本ウェブなのでウェブページと同等、ただし自分でオフラインキャッシュの仕組みを持てるので、改善可能
ネイティブな機能を呼び出せるか？ Node.jsからOSの機能を呼び出せる。

以下に、上の表を補足します。

対応プラットフォーム

Electronの公式サポートはWindows, Linux, OS Xの３つのみです。今のところはデスクトップアプリケーションのためのフレームワークなので、モバイル対応は全く考えられていません。

コードベースは (ほぼ) 完全に統一できるか？

ほぼ統一できます。ただし、OS X用の機能であったり、Windows専用の機能は用意されていて、プラットフォームによって呼び出し可能なAPIや受信可能なEventが若干異なります。クロスプラットフォームでOSの専用の機能を利用する上で、気になる方は一度APIを確認すると良いでしょう。

UIを記述する言語

Hello Worldやミニブラウザを作って分かる通り、HTML/JS/CSSで書きます。ネイティブ部分の呼び出しもNode.jsなので、 JavaScriptになります。

JavaScriptのレイヤはNode.js部分とChromium部分でv8(JavaScript Engine)が動くので、ほぼ同一の動きをします、ただし、Node.jsとChromiumでv8のバージョンは若干違う可能性があります。基本的な部分は変わりませんが、ES2016の対応状況を見てもらえれば分かる通り、新しいJavaScriptの機能面で違いはあります。

ES2016の対応状況

ES2016の対応状況

UIはネイティブかウェブか

基本はウェブです。デスクトップアプリケーションとして、タスクトレイに常駐させたい場合やOSネイティブのダイアログボックスを使いたい場合は専用のAPIがあるので、それを利用して機能を作ることも可能です。

パフォーマンス

Electronは基本的にウェブなので、ネイティブのデスクトップアプリと比較するとそこまで高速ではありません。

Electronのアプリを起動させると、Chromium用のプロセスが3つ起動し、Node.js用のメインプロセスが1つ起動します。合計4プロセスが常駐することになります。言ってしまえばブラウザそのものを起動しつつ、バックグラウンドにNode.jsを起動しているのと同様です。富豪的な方法で実現していると言えるでしょう。

そのため、描画パフォーマンス等はブラウザの機能がそのまま利用できますが、実行効率が良いモデルとはいえません。パフォーマンスにシビアなアプリケーションを作る場合は Electron ではなく、ネイティブの機能を使って作る方が良いでしょう。

ネイティブな機能を呼び出せるか？

ElectronからNode.jsを呼び出せばファイル操作や外部プロセスコールといった基本的な機能は呼び出せます。また、C言語等で書かれたネイティブライブラリもNode.jsアドオンがあれば呼び出すことが可能です。ただし、ネイティブライブラリに関しては、通常のnpmでインストールするだけでは利用できないことがあります。Nodeのバージョンがelectronのbuilt-inで保持しているバージョンと異なる場合にうまく利用できないことが多いです。ネイティブライブラリを利用したい場合は下記のガイドを確認することを推奨します。

ネイティブライブラリ利用ガイド

まとめ

Electronの概要とアプリ構築の方法、ウェブ用プラットフォームを構築する上での共通質問項目を記述しました。Electron はこれまでのAngularJSやReact等で構築されたSingle Page Applicationを活用して、デスクトップアプリケーションを構築するのに非常に向いています。

まだv1.0がリリースされて日が浅いこともあり、そこまでノウハウが溜まっているわけではありません。特にセキュリティやパフォーマンスなどの改善は今進んでいますが、ユーザーからのノウハウも溜める必要があると感じています。

もしまだ触っていない方がいらっしゃるのであれば、electronicaなどのチュートリアルもあるので是非やってみてください。

また今回のNode学園祭では、Electron作者のzcbenzもゲストスピーカーとして登壇する予定です。Electronの今後の話が聞けると思います。

一緒にElectronを盛り上げていきましょう。

]]> プログレッシブウェブアプリ詳解 ─ 過去・現在・未来 /agektmr/20527/ Wed, 14 Sep 2016 00:00:03 +0000 /?p=20527 連載： Web技術でアプリ開発2016 (5)

Web技術でアプリ開発2016特集・第5弾は、プログレッシブウェブアプリ (Progressive Web Apps)をご紹介させていただきます。

はじめに

プログレッシブウェブアプリ(Progressive Web Apps)という言葉が初めて登場したのは2015年8月のAlex Russellによる記事Progressive Web Apps: Escaping Tabs Without Losing Our Soulです。当時オフラインやプッシュ通知など、モバイルウェブを飛躍的に進化させる画期的な機能が次々と追加されていた状況において、このムーブメントを呼称するための言葉が求められていました。Google社内でいくつもの候補が挙げられましたが、Service Workerの発案者としてAlex Russellが推したのが、この「プログレッシブウェブアプリ」でした。

また、当初Googleで始まったプログレッシブウェブアプリの動きではありましたが、先日のProgressive Web App Dev SummitではMicrosoft、Mozilla、Opera、Samsungの代表者も登壇するなど、各ブラウザベンダーとも足並みが揃いつつあります。これはもはやウェブ全体の動きと言うことができます。

若干古い情報になりますが、以降この (長い) 記事を読む以外に手早く情報を得るための方法として、下記を挙げておきます。

スマートフォン体験を一歩先へ – プログレッシブウェブアプリの作り方

講演動画

プレゼン資料

プログレッシブウェブアプリとは

プログレッシブウェブアプリとは、最新の標準ウェブ技術を用いることで、オフラインやプッシュ通知といったこれまでよりも一次元上のユーザー体験をもたらすウェブアプリのことです。必ずしもデスクトップのウェブアプリや、ページ遷移を使ったサーバーサイドでレンダリングされるアプリを除外するものではありません。

理屈で説明するよりも、実際に体験した方が早いかと思います。いくつか具体例を挙げましょう。

※ 他にも様々なプログレッシブウェブアプリが既に存在していますが、pwa.rocksというサイトにいくつかまとまっていますので、ぜひご覧頂下さい。

実際に使ってみるとわかりますが、これらのアプリケーションにおいてこれまでにない特徴的な点がいくつかあります。

  • ホーム画面に追加してワンタップで起動
  • キャッシュを使ってオフライン、もしくは高速に動作
  • プッシュ通知を送信
  • 自動でログイン

プログレッシブとは何か

「プログレッシブ」という言葉自体は直訳すると「進歩的な」といった意味がありますが、ピンとこない方は多いと思います。

プログレッシブウェブアプリの「プログレッシブ」のひとつの意味は、ウェブページとして使い始めたサービスが、ホーム画面に追加し、オフラインで動作し、プッシュ通知を送り始めるといった流れの中で、「徐々にアプリへと変化していく」様を指しています。

もう一つ意味があります。

フロントエンドエンジニアであれば、プログレッシブ・エンハンスメントという言葉を聞いたことがあると思います。プログレッシブ・エンハンスメントとは、HTML5 時代に続々と新しい機能が登場する中で、最新の標準技術をまだ盛り込んでいないブラウザでも、情報を届けるといった目的をゴールに、必要最低限の機能をベースとして、可能であれば最新技術を使うことでよりリッチな体験を提供する、という設計コンセプトのことを言いました。(逆に、リッチな体験を提供できるブラウザをベースに、最新の技術が使えないブラウザでも最低限の目的は達成できるように設計する手法をグレースフル・デグラデーションと呼びました)

プログレッシブウェブアプリも同様に捉えることができます。つまり、必要最低限の機能を提供できる状態をベースとし、オフラインやプッシュ通知などをプログレッシブな (進歩的な) 機能として提供する、というものです。

これは言い方を変えれば、対応していないブラウザがあるからといって対応を待つべきではなく、それを前提としてウェブを前に進めていこう、というメッセージでもあるのです。実際、プログレッシブウェブアプリ対応への副作用として、複数の機能に未対応のブラウザでもコンバージョンレートが改善したという事例も出ています。

アプリとウェブのギャップ

Web2.0の時代を経てコンピューターの世界はネイティブアプリケーションからウェブアプリケーションの時代へと変化を遂げました。地図アプリケーションを思い出して下さい。その昔CD-ROMからせっせとインストールする必要のあった地図が、URLひとつでブラウザから見られるようになったのです。他にも例を挙げればキリがありません。

ウェブはその後もHTML5やその周辺技術の発展により大きく進化していきました。しかしその恩恵を満足の行く形で受けられたのはデスクトップでの話。モバイル・スマートフォンの時代となり、ユースケースが変化していく中で、スマートフォン上で快適に目的を達成するためには、ウェブブラウザは力不足と言われるようになってしまいました。その象徴的な出来事の一つがFacebookのCEOマーク・ザッカーバーグによるこの発言でした。

Disrupt：ザッカーバーグ、「HTML5を過大評価したのは、われわれ最大の失敗」と認める | TechCrunch Japan

これはひとえに標準化を必要とするウェブという環境の特性ゆえと言わざるを得ません。標準化を進めつつ実装し、浸透を待たなければならなかったウェブと異なり、ネイティブアプリはモバイルに最適化した仕様や機能を次々と取り込み、技術革新を起こしていきました。

しかしウェブには、ネイティブアプリでは実現できない特性も持ち合わせています。それがSLICEと呼ばれるものです。

  • Secure (安全)
  • Linkable (リンク可能)
  • Indexable (インデックス可能)
  • Composable (再構成可能)
  • Ephemeral (一時的な利用)

ウェブもネイティブも、お互いの短所を埋める進化を遂げていく中で、ウェブが着実に前進していることの現れが、プログレッシブウェブアプリと言えるでしょう。一度はHTML5化を断念したFacebookがプッシュ通知を採用したのはその最たる例です。

Facebook、Googleと協力してモバイルウェブユーザーにプッシュ通知を送信

プログレッシブウェブアプリはWeb 2.0、HTML5と続いてきた大きな流れの、次の一歩と捉えて間違いありません。

プログレッシブウェブアプリを構成する機能

プログレッシブウェブアプリはそれ自体が機能を表しているわけではなく、様々な先進的機能をまとめたひとつのムーブメントです。具体的にどんな機能があるのか、ひとつひとつ見ていきましょう。

HTTPS

プログレッシブウェブアプリに対応する上で大前提になるのがサイトの完全なHTTPS対応です。ログイン画面や商品購入画面だけではなく、すべてのページをHTTPS化する必要があります。

一般的に、HTTPSに対応することでウェブサイトは

  • ウェブサイトの一意性を守るアイデンティティ(Identity)
  • サーバー・ブラウザ間の通信を秘匿するコンフィデンシャリティ(Confidentiality)
  • 送受信されるデータを改ざんさせないインテグリティ(Integrity)

の3つを手に入れることができます。

プログレッシブウェブアプリ対応において重要なのが、以下でご紹介する機能のほとんどがHTTPS上でのみ動作 (セキュアコンテキスト)するという点です。こういった機能はPowerful Features と呼ばれ、以前はHTTP上でも動作したgetUserMediaやgeolocationといったAPIもそこに加えられ、最近HTTPSのみで動作する変更が加えられました。

HTTPSに対応することなしにプログレッシブウェブアプリを実現することは不可能ですので、対応を検討する方はここからスタートして下さい。(ちなみにChromeでは、localhostとfile://もセキュアコンテキストに含まれますので、開発時は少し役に立つかもしれません)

Web App Manifest

ネイティブアプリとウェブサイトを比較した時に、最も大きく異なるのがアクセスのしやすさです。もちろん、アプリのようにインストールしなくても、リンクを踏むだけでアクセスできるという意味で、ウェブは手に届きやすい存在です。しかしスマートフォンの場合、デスクトップのようにキーボードで手軽に検索ができるわけではありません。ホーム画面からタップひとつで起動できるだけで、ユーザーにとっての身近さは大きく改善します。

screenshot_20160901-153533

そこで登場するのがWeb App Manifestです。Web App Manifestを使うことで、該当ページに関する様々な情報を定義することができます。

Web App Manifest | MDN

最近はlangやscope、screenshotsといった項目も新しく追加されていますので、その辺りも注目して下さい。

これらの情報を踏まえ、「ホーム画面に追加」をすると、ウェブアプリはホーム画面に鎮座することができるようになります。しかし、この機能がiOSでも古くからあるmetaタグを使ったものに近いと思われた方もいるかもしれません。

Chromeの場合、このWeb App Manifestといくつかの条件が加わることで、ブラウザが自動的にホーム画面に追加を促してくれる、という点が大きく異なります。詳しくは下記の記事を参照して下さい。

Web App ManifestでWebアプリをインストール可能に – Qiita

Service Worker

Service Workerはプログレッシブウェブアプリを構成する機能の中でも、コンセプトを成立させた一番の立役者で、中核を成すものです。

従来のウェブにおいて、ページはサーバーから送られたHTMLとそれに付随するリソースで構成される機能がすべてであり、ページが閉じられると同時に忘れ去られる存在でした。Service Workerは、ページとは独立して動作するスクリプトを、ページを閉じた後でもブラウザ上で動かし続けることができる機能です。このService Workerを活用することで、様々な可能性が開かれます。

serviceworker

オフライン：Service Workerはページが送信するあらゆるリクエストを横取りすることができます。実質的なローカルプロキシーとなるため、強力なキャッシュを活用すれば、ネットワークに接続していない状態でもレスポンスを返すことができるようになります。詳しくはCache APIの項で説明します。

プッシュ通知：Service Workerはページが閉じた状態でも、また、ブラウザによっては起動してない状態であっても、イベントを検知することができます。そのため、外部サーバーが送信したプッシュリクエストをイベントとして受け取り、何かしらのアクションを起こすことができるのです。詳しくはWeb Push / Web Notificationsの項で説明します。

それでは、Service Workerの使い方を雰囲気だけ見てみましょう。

Service Workerは独立したJavaScriptとして動作するため、ファイルも分けて記述する必要があります。例えばページ上で動作するスクリプトapp.jsが、service-worker.jsというService Workerを使いたいとします。

navigator.serviceWorker.register('service-worker.js', {scope: './'});

これだけでService Workerが登録されます。簡単ですね。

service-worker.jsの中身はイベント・ドリブンのスクリプトになります。例えば下記のように記述しておけば、あらゆるリクエストをService Workerが拾い上げて、サーバーにリクエストを転送することなく”Hello World!”とレスポンスを返します。

self.addEventListener('fetch', function(event) {  
  event.respondWith('Hello World!');  
});

Service Workerは実際いつ動作を開始するのでしょう？影響範囲はどこまででしょう？こういった細かい話になるとセキュリティへの懸念も出てくるため、若干複雑な内容を理解する必要が出てきます。scopeとライフサイクルについては抑えておきましょう。

scope

Service Workerが登録されると、以後半永久的にスクリプトを動かし続けることになります。仮にService Workerがドメインの範囲内すべてに影響をおよぼすことができるとすると、ブログなどのユーザーの権限がパスで区切られたサービスでは、自分の預かり知らないスクリプトが埋め込まれてしまう可能性がでてきます。そこでService Workerでは、scopeという概念を使って影響範囲を制限します。詳しくはこちらの記事が参考になります。

ServiceWorkerのスコープとページコントロールについて – Qiita

ライフサイクル

Service Workerが登録されたあと、スクリプトを手動で更新したい場合もあります。新しいスクリプトはすぐに有効になるのでしょうか？その場合古いスクリプトはどうなってしまうのでしょうか？Service Workerは放っておいたら永久に更新されないのでしょうか？

Service Workerのライフサイクルを正しく理解することはとても重要です。下記の記事をぜひご覧ください。

デバッグ

Chromeではプログレッシブウェブアプリのデバッグをしやすくするために、最近DevToolsにResourcesパネルの代わりに Applicationパネルが追加されました。Manifestや各種ストレージなどを、ひとつのパネルからまとめて確認することができます。中でもService Worker専用の項目では、現在起動中のスクリプトだけでなく

  • Offline – オフラインのエミュレーションボタン
  • Update on reload – リロードするだけでService Workerを更新
  • Bypass for network – ネットワークリクエストの横取りを一時的に停止

といったオプションが利用できます。ここからService Workerの単独のDevToolsを開いてデバッグを行ってください。

devtools

少し未来の話

今後利用可能になるService Worker周辺の重要な機能についても少し触れておきましょう。

Link rel=serviceworker Chrome 54からOrigin Trial (特定のドメインに実験的にホワイトリストで機能を提供) ベースでService Workerの登録が linkタグやHTTPヘッダーで行えるようになりました。将来的にこれが利用できるようになれば、JavaScriptを記述することなく、linkタグやHTTPヘッダーのみでService Workerを登録できるようになります。

<link rel="serviceworker" href="/js/sw.js" scope="/">

https://www.chromestatus.com/feature/5682681044008960

Foreign fetch また、Web Fontsのような複数ドメインから共有されるリソースをCDN経由で提供するサーバーのリソースも、現在は利用する側のService Workerがハンドリングすることが可能ですが、これをCDN側のService Workerがハンドリングできれば効率が向上します。これを可能にする機能はForeign Fetchと呼ばれ、Chrome 54からOrigin Trialベースで提供が開始されています。

https://www.chromestatus.com/feature/5684130679357440

その他、Service Workerのさらに詳しい情報はHTML5 Conference 2016で行われたChromeエンジニアの保呂さんのスライドが参考になります。
Service Worker Deep Dive

Cache API

先程説明したように、Service Workerを使ってあらゆるリクエストを横取りすることで、オフラインの機能が実現可能になります。そこで強力なキャッシュ機能を提供するのがCache APIです。

Cache APIは取得されたリソースだけでなく、リクエストやレスポンスの内容も含めて保存されます。下記の例では、キャッシュが残っていればキャッシュされていたレスポンスを、なければサーバーにリクエストを送って、返ってきたレスポンスを返します (キャッシュに保存はしません)。

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request);
    })
  );
});

Cache APIを使った実例について、詳しくはこちらの記事が参考になります。

ServiceWorkerとCache APIを使ってオフラインでも動くWebアプリを作る – Qiita

なお、Cache APIを扱う上で fetch()も避けては通れませんが、ググらビリティの低さから、まとまった資料が見つかりにくいという問題があります。こちらのページがよくまっていたのでリンクしておきます。

お疲れさまXMLHttpRequest、こんにちはfetch – Qiita

ここまで述べてきたように便利なService Worker + Cache APIですが、多くの人が似たようなコードを書くであろうことは容易に想像ができます。そこで便利なライブラリがいくつかあります。

sw-toolbox

リソースをキャッシュする際に必要になるのが、リソースの優先順位の判定です。例えば共通で利用されるJavaScriptファイルは、更新がない限りネットワークにリクエストを送るまでもなく常にキャッシュから読み込むことでスピードを優先したいと思うはずです。逆に例えば、天気アプリであれば、開く度に最新の天気予報を見たいですが、オフラインだった場合はオフラインだと言われるよりは、キャッシュからでもその後の天気予報を見たいと思うはずです。

このように、同じキャッシュを活用するでも、場面によってキャッシュを優先したいのか、ネットワークを優先したいのかが異なってきます。そこで便利なのがsw-toolboxです。

toolbox.router.get('/myapp/index.html', toolbox.networkFirst);

appshell

sw-toolboxではネットワークを優先するnetworkFirst、キャッシュを優先するcacheFirstの他にもfastest、networkOnly、cacheOnlyといった様々なオプションが利用可能です。

https://googlechrome.github.io/sw-toolbox/docs/master/index.html

sw-precache

Service Workerを使ったキャッシュ機能以前にオフラインを実現する機能として登場したApplication Cacheは、ページを初めて開いた時点で、予め定義されたリソースをすべてキャッシュするものでした。Service Worker + Cache APIにおいても同様のニーズはあるでしょう。例えばアプリの外枠や必要最低限のCSSやJavaScriptファイルを予めロードしておくことで、コンテンツ部分のみをダイナミックにロードすればよいというApplication Shellというアーキテクチャを利用する場合です。

これを実現するのに便利なライブラリがsw-precacheです。Gulp やGruntといったタスクランナーを使うことで、リストされたリソースを最初のロード時点でキャッシュしてしまうJavaScript のコードを出力してくれます。あとはこれをService Workerとしてロードすればよいだけです。また、リソースの更新もハッシュを使って自動的に管理してくれるので、どのファイルを書き換えたからリストを変更しなければならない、といったようなマニュアル作業が不要になります。

gulp.task('generate-service-worker', function(callback) {
  var path = require('path');
  var swPrecache = require('sw-precache');
  var rootDir = 'app';

  swPrecache.write(path.join(rootDir, 'service-worker.js'), {
    staticFileGlobs: [rootDir + '/**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff}'],
    stripPrefix: rootDir
  }, callback);
});

なお、最近追加されたruntimeCachingという機能を使うことで、sw-toolbox の便利な機能を宣言的に記述することもできます。

sw-appcache-behavior

もし既にApplication Cacheを使っていて、Service Workerに移行を検討している場合は、sw-helpersライブラリの一部であるsw-appcache-behaviorが便利です。既存の Manifestファイルをそのまま利用してService Workerによるオフラインを実現することができます。

sw-offline-google-analytics

オフラインのウェブサイトがうまく作れたとしても、ユーザーがどのアクセスページにアクセスし、どのように利用しているかが分からなければ、本当に役に立っているのかどうかを知ることはできません。これもsw-helpersの一部であるsw-offline-google-analyticsを使えば、オフライン中のアクセス解析をデータベース上に保存しておいて、オンラインになったタイミングでサーバーに送信してGoogle Analyticsでアクセス解析結果を閲覧することができるようになります。

Web Push / Web Notifications

プッシュ通知は、プログレッシブウェブアプリを語る際、これまでできなかったことの中で、技術者ではなくても効果が理解できるという意味では、最も分かりやすい機能です。実際に既に多くのサービスがこれを利用しています。例えば Facebook です。モバイルウェブ版のFacebookにアクセスしてみると、すぐにそのことに気付くでしょう。

navigator.serviceWorker.ready().then(function(sw) {
  sw.pushManager.subscribe({userVisibleOnly: true})
    .then(function(sub) {
      // パーミッション取得後
      sendSubToServer(sub);  // Send subscription to the server
  });
});

push1

self.addEventListener('push', function(event) {
  event.waitUntil(
    self.registration.showNotification(title, {
      body: body, icon: icon, tag: tag,
      actions: [{action: 'remindMe', title: 'REMIND ME'}]
    }
  });
});

push2

具体的な実装方法は若干複雑ですので、サードパーティーのサービスを使うのも手かもしれません。自分で実装する場合は、こちらのドキュメントがよくまとまっています。

Web Pushでブラウザにプッシュ通知を送ってみる – Qiita
Firefox (Developer Edition)でW3C Push APIを使ってみる – Qiita

Chromeの場合、以前はGCM (Google Cloud Messaging、もしくはFirebase Cloud Messaging)が必須でしたが、現在は標準の Web Pushが利用できます。詳しくは下記をご覧下さい。

ChromeでW3C Push APIを使ってみた – Qiita

Web Pushについては、node.js 向けのライブラリも提供されています。

Background Sync

妙なタイミングでネットワークがオフラインになってしまったために、リクエストが送れなかったという経験は誰しもあると思います。そんな時にリクエストをキューしておいて、オンラインになったタイミングで送ってくれるとありがたいですよね。それを実現してくれるのが、Background Syncです。

ServiceWorkerのBackground Syncでオンライン復帰時にデータ送信 – Qiita

Web Budget API

現状Service Workerはプッシュを受信すると、通知を出さなければなりません。これはブラウザリソースの無駄遣いを防ぐためです。しかし、例えばバックグラウンドで購読しているフィードを更新するといったユースケースは容易に思いつきます。

そこで検討されているのがWeb Budget APIという機能です。これを使うことで、ページは与えられたバジェットを適切に配分してバックグラウンドでの処理を行うことが可能になりますので、リソースの無駄遣いを防ぎつつ必要な機能を実現できるようになるはずです。

https://www.chromestatus.com/features/5691190548627456

Credential Management API

Credential Management APIはユーザーのクレデンシャル (認証情報) を制御するためのAPIです。

これを使うことにより

  • id / passwordをブラウザに覚えさせる
  • ソーシャルログインの選択肢をブラウザに覚えさせる
  • ログイン時にアカウント選択ダイアログを提供する
  • ユーザーを自動的にログインさせる

といったことが可能になります。

典型的なユースケースとしては、ニュースサイトやコマースサイトといった、必ずしもログインしなくてもよい、しかし提供者側としてはログインしてもらいたいサービスにおいて役立ちます。実際に利用されている例としてはAliExpressの実装が非常によくできていますので、是非一度お試し下さい。

実装は基本的にフロントエンド側だけですので、比較的気軽に導入することができます。

Payment Request API

Payment Request APIは支払い時のチェックアウトに必要なフォームを置き換えるUIを提供します。Chromeではバージョン 53から利用できるようになる予定です。

Payment Request APIが提供するのは、ユーザーインターフェースです。ブラウザのAutofill機能を活用することで、クレジットカードの情報や住所などを、すばやく簡単に入力できるようになります。

支払い方法は現状クレジットカードのみですが、まもなくAndroid Payも利用可能 (残念ながら当初日本は対象外) になる予定です。将来的には、さらに様々な支払い方法をオープンかつ柔軟に組み込めるようになっていく予定です。

その他の機能

プログレッシブウェブアプリを語る上で数えるべき機能や考え方は他にもいくつかありますが、キリがありませんのでこの辺にしておきましょう。

  • Web Bluetooth
  • Web MIDI
  • Web Animation

興味のある方は、この辺りもぜひ抑えておいていただければと思います。

Lighthouse

あるウェブアプリを指してそれがプログレッシブウェブアプリかどうかを議論するのはあまり意味のないことですが、それを示す指標を得ることはできます。それがLighthouseというChrome拡張機能です。ウェブサイトを開いた状態でこの拡張を起動すると、プログレッシブウェブアプリの対応度合いをスコアで示してくれます。

Chrome拡張機能としてだけではなく、node moduleとしても利用が可能です。

https://github.com/GoogleChrome/lighthouse

Lighthouseはまだアルファ版の段階のため、評価できない機能が多数ありますが、今後対応していく予定です。

リソース

プログレッシブウェブアプリに興味を持たれた方で、最新情報を追いかけたいという方は下記のページをご覧下さい。RSSフィードも配信しています。

https://developers.google.com/web/updates/

資料が英語で読めない？英語が分かる人はぜひ、翻訳にご協力下さい。

最後に

プログレッシブウェブアプリについて長々と書いてきましたが、重要なのは決してこれらの機能すべてに対応することではありません。自分が提供するサービスがユーザーに最大の価値を提供するために必要であれば、ネイティブアプリを提供するべき場合もあるでしょう。オフライン機能だけが必要な場合もあるかもしれません。これらの機能をうまく組み合わせて、ユーザーが本当に求めている価値を提供できるアプリを開発していただければと思います。

]]> キミはNativeScriptを知っているか？Angular2でネイティブモバイルアプリが書けるぞ！ /albatrosary/20691/ Fri, 09 Sep 2016 02:42:17 +0000 /?p=20691 連載： Web技術でアプリ開発2016 (4)

Web技術でアプリ開発2016特集・第4弾は、JavaScript（およびTypeScript）によるクロスプラットフォーム開発が可能ながらネイティブと同様の実行速度を得られる、Telerik社のNativeScriptを取り上げたいと思います。

NativeScriptは、Angular2とも組み合わせて使うことができる、現在注目のフレームワークです。本記事では、XMLによるUI定義を行う従来の開発手法だけではなく、Angular2（ただし、RC4という少し古いバージョン）と組み合わせてモバイルアプリを開発する方法まで網羅してご紹介します。

NativeScript_logo

NativeScriptの概要

NativeScript 2.0は、JavaScriptとCSSを使用し、ネイティブのiOSとAndroidのアプリを構築するためのフレームワークです。ネイティブで実行されるパフォーマンスとUXを提供し、その結果、ネイティブプラットフォームのレンダリングエンジンを使ってUIを構築します。WebViewsでのUIレンダリングはしていません。

NativeScriptにはtns-core-modulesというコアモジュールがあり、上記に述べたJavaScriptからネイティブへの変換を行っています。NativeScriptのgithubリポジトリを見ると「0.9.0」のリリースが「5 Mar 2015」なので、約1年とちょっとの歳月が経過していることになります。現時点での最新バージョンは「2.2.1」です。

NativeScriptでAngular2を利用する場合には、まず、Angular2のテンプレート（@Component.template）に、NativeScriptで提供しているディレクティブを記述します。そして、上記で説明したtns-core-modulesとnativescript-angularを利用してNativeScriptがビルドを行い、iOSやAndroidのネイティブコードを生成します。

nativescript-angular

「NativeScript with Angular2」の最初の「v0.3.0」がリリースされたのが今年8月初旬で、最新は「v0.3.1」です。

この記事では、macOS上での開発を前提に解説をしています。

インストール

インストール手順はquick-setupにも書かれている通り、あまり複雑なところはありません。しかし、もしAndroid SDKをはじめて利用する場合には少し戸惑うと思います（私もNativeScriptのあまりやさしいとはいえないエラーメッセージにちょっと苦しみました）ので、順を追って説明します。

  • ステップ1: Rubyのインストール
  • ステップ2: Node.jsのインストール
  • ステップ3: NativeScript CLIのインストール
  • ステップ4: iOSとAndroid開発に必要なもののインストール

ステップ1: Rubyのインストール

NativeScriptをビルドするとき、Rubyを利用します。Rubyのバージョンは2.2以降が必要ですが、macOSにデフォルトでインストールされているRubyは古いため、Homebrewを使って最新バージョンをインストールします。最新のRubyが入っている方は読み飛ばして下さい。

Homebrewのインストール

HomebrewはRubyを使いインストールし、インストール後環境変数を定義します。

$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
$ brew update
$ echo 'export PATH=/usr/local/bin:$PATH' >> .bash_profile
$ source .bash_profile

rbenvとruby-buildのインストール

brewを使ってrbenvとruby-buildをインストールします。rbenvを使ってRubyのバージョン管理を行います。ruby-buildはrbenvのプラグインで、異なるバージョンのRubyをコンパイルし、インストールするためのものです。

$ brew install rbenv ruby-build
$ echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
$ source ~/.bash_profile
$ rbenv --version
$ rbenv install -l
$ rbenv install 2.2.3
$ rbrnv version
$ rbenv global 2.2.3
$ ruby -v
ruby 2.2.3p173 (2015-08-18 revision 51636) [x86_64-darwin15]
$

ステップ2: Node.jsのインストール

Node.jsはv4.0.0以降を利用する必要があります。rbenvと同様にバージョン管理システムをインストールします。Node.jsのバージョン管理システムにはnodebrew, nodist, nvm, nvm-windowsなどいくつかありますが、筆者はnodebrewを好んで利用しています。

nodebrew のインストール

curlを使ってインストールを行います。インストールが完了するとパスを追加するようにメッセージが表示されますので、.bash_profile に登録してください。

$ curl -L git.io/nodebrew | perl - setup
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> .bash_profile
$ source .bash_profile

Node.jsのインストール

続いて、Node.jsをインストールします。nodebrew ls-remoteコマンドを使ってバージョンを確認し、nodebrew install-binaryコマンドを使ってNode.jsのインストールを行います。利用するバージョンを動かす場合にはnodebrew useコマンドを実行します。

今回、Node.jsのバージョンとしてはv5.12.0を利用しました。

$ nodebrew ls-remote
$ nodebrew install-binary v5.12.0
$ nodebrew use v5.12.0
$ node -v
v5.12.0
$

ステップ3: NativeScript CLIのインストール

いよいよNativeScriptのインストールです。npmコマンドを使ってnativescriptをグローバルインストールします。nativescriptはスカッフォールディング（コード雛形の自動生成）を提供するモジュールで、tnsコマンドによって実行されます。

tnsコマンドを実行して、インストールが正しく行われているか確認しましょう。参考までにtnsコマンドで出力される内容はtns --helpと同じ内容です。tnsコマンドでは主に

  • テンプレートからプロジェクトの生成
  • プロジェクトへの生成プラットフォーム(iOS, Android)の追加
  • JavaScriptからネイティブへのビルド
  • エミュレータの実行

を行います

$ npm install nativescript -g
$ tns
# NativeScript
┌─────────┬─────────────────────────────────────────────────────────────────────┐
│ Usage   │ Synopsis                                                            │
│ General │ $ tns  [Command Parameters] [--command ]                            │
│ Alias   │ $ nativescript  [Command Parameters] [--command ]                   │
└─────────┴─────────────────────────────────────────────────────────────────────┘

・・・

$

ステップ4: iOSとAndroid開発に必要なもののインストール

JDKのインストール

JDKはバージョンが8以降のものをインストールしてください。インストールが完了したら、.bash_profileに設定を登録してください。

$ echo 'export JAVA_HOME=$(/usr/libexec/java_home)' >> .bash_profile
$ source .bash_profile

Android開発環境のインストール

Android SDKをHomebrewからインストールし、変数ANDROID_HOMEを定義します.

$ brew install android-sdk
$ echo 'export ANDROID_HOME=/usr/local/Cellar/android-sdk/24.4' >> .bash_profile
$ echo 'export PATH=$PATH:$ANDROID_HOME/platform-tools:$ANDROID_HOME/tools' >> .bash_profile
$ source .bash_profile

Androidエミュレータのインストール

android-sdkのインストールが終わったら、実際に利用するエミュレータを定義します。android-sdkがインストールされているディレクトリへ移動し、andorid avdを実行することで設定を行います。android-sdk以下のディレクトリ構成は次の通りです。

$ cd /usr/local/Cellar/android-sdk/24.4
$ tree -L 1
.
├── INSTALL_RECEIPT.json
├── README
├── add-ons -> ../../../var/lib/android-sdk/add-ons
├── bin
├── build-tools
├── etc
├── extras -> ../../../var/lib/android-sdk/extras
├── platform-tools
├── platforms -> ../../../var/lib/android-sdk/platforms
├── samples -> ../../../var/lib/android-sdk/samples
├── sources -> ../../../var/lib/android-sdk/sources
├── system-images -> ../../../var/lib/android-sdk/system-images
├── temp -> ../../../var/lib/android-sdk/temp
└── tools

Androidエミュレータを高速化するためのハードウェア支援環境「Intel Hardware Accelerated Execution Manager (Intel® HAXM) 」を事前にインストールします。次のスクリプトを実行してください。

$ cd /usr/local/Cellar/android-sdk/24.4/extras/intel/Hardware_Accelerated_Execution_Manager
$ sudo ./silent_install.sh

完了したら、android avdを起動し、事前にエミュレータ定義を登録します。

$ cd /usr/local/Cellar/android-sdk/24.4/tools
$ ./android avd

android avd

この設定を忘れると「Cannot read property ‘targetNum’ of undefined」というエラーが出ます。

参考までに、今回利用しているエミュレータは次のように定義しています。

スクリーンショット 2016-09-06 14.11.30

よくあるトラブルとしては、Dockerを起動しているようなら終了させておくのが無難です。Dockerが利用しているポートとエミュレータが利用するポートがぶつかり、実行できないことがあります。

iOS開発環境のインストール

macOSを利用されていれば、iOSのエミュレータを利用するのは容易だと思います。

Command Line Tools for Xcode

$ sudo gem install xcodeproj
$ sudo gem install cocoapods
$ brew install xcproj

だいぶ長くなりましたが、これで開発環境の設定は完了です。尚、tnsコマンドにはtns doctorというコマンドがあります。環境設定などうまくできているかのチェックができますので、一通り終わった後に実行し、漏れがないかを確認します。

$ tns doctor
Verifying CocoaPods. This may take more than a minute, please be patient.
  ◡ Installing iOS runtime.tns-ios@2.2.1 ../../../../../../var/folders/ts/n268b_qx2j7g3ykzkqlj3jt00000gn/T/nativescript-check-cocoapods11686-1391-akcqo6/node_modules/tns-ios
  ◝ Verifying CocoaPods. This may take some time, please be patient..
Your components are up-to-date.

No issues were detected.
$

NativeScriptで作るHello World

ここではNativeScriptを使ってHello World的なアプリケーションを作成します。手順は

  1. プロジェクトの作成
  2. プラットフォームのインストール
  3. エミュレータの実行

です。NativeScriptでのアプリケーション作成にはtnsコマンドを使います。

今、プロジェクトをMyFirstNativeScriptAppとしますので、iOSとAndroidアプリケションの両方を作成する場合にはiOSとAndroidのプラットフォーム用ライブラリをインストールしエミュレートを起動します。

$ cd ~
$ tns create MyFirstNativeScriptApp
$ cd MyFirstNativeScriptApp
$ tns platform add android
$ tns platform add ios
$ tns run android --emulator
$ tns run ios --emulator

Androidエミュレータでの実行結果

MyFirstNativeScriptApp-Android

iOSエミュレータでの実行結果

MyFirstNativeScriptApp-iOS

tns create MyFirstNativeScriptAppで作成されたファイルを確認します。

$ tree -L 2
.
├── app
│   ├── App_Resources
│   ├── app.css
│   ├── app.js
│   ├── main-page.js
│   ├── main-page.xml
│   ├── main-view-model.js
│   ├── package.json
│   └── references.d.ts
├── node_modules
│   ├── babel-traverse
│   ├── babel-types
│   ├── babylon
│   ├── lazy
│   ├── tns-core-modules
│   └── tns-core-modules-widgets
├── package.json
└── platforms
    ├── android
    └── ios

このアプリケーションで特に重要なファイルがありますので、簡単に説明します。

  • app.js
  • main-page.xml
  • main-page.js
  • main-view-model.js

app.jsはアプリケーションが一番最初にロードするエントリーポイントで、このファイルからアプリケーションmain-page.jsの呼び出しを行っています。

// app.js
var application = require("application");
application.start({ moduleName: "main-page" });

// main-page.js
var createViewModel = require("./main-view-model").createViewModel;

function onNavigatingTo(args) {
  var page = args.object;
  page.bindingContext = createViewModel();
}
exports.onNavigatingTo = onNavigatingTo;

main-page.xmlは画面をXMLで定義し、関連する処理をmain-view-model.jsに定義してます。

<!-- main-page.xml -->
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">
  <StackLayout>
    <Label text="Tap the button" class="title"/>
    <Button text="TAP" tap="{{ onTap }}" />
    <Label text="{{ message }}" class="message" textWrap="true"/>
  </StackLayout>
</Page>

// main-view-model.js
var Observable = require("data/observable").Observable;

function getMessage(counter) {
  if (counter <= 0) {
    return "Hoorraaay! You unlocked the NativeScript clicker achievement!";
  } else {
    return counter + " taps left";
  }
}

function createViewModel() {
  var viewModel = new Observable();
  viewModel.counter = 42;
  viewModel.message = getMessage(viewModel.counter);

  viewModel.onTap = function() {
    this.counter--;
    this.set("message", getMessage(this.counter));
  }

  return viewModel;
}

exports.createViewModel = createViewModel;

テンプレートを使って簡単なアプリケーションを作成する

NativeScriptには、テンプレートを使ってプロジェクトを生成する機能があります。

$ tns create [Project Name] --template [Template Name]

繰り返しになりますが、テンプレートを作成した後「プラットフォームのインストール」「エミュレータの実行」を行うとエミュレートで実行確認ができます。

このテンプレートはnpmに登録されています。が、まだあまり多くのテンプレートは定義されていないようです。その中から開発時に利用できそうなものを幾つかピックアップしました。具体的なコードは各テンプレートを使ってコードを生成し確認していただけると幸いです。

タブを使ったアプリケーション

$ tns create MyNextGreatApp --template tns-template-tab-navigation

タブ切り替えのテンプレート部分はTabViewタグを使い、各タブで表示する内容はTabViewItemで定義しています。

<!-- main-page.xml -->
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
  <TabView>
    <TabView.items>
      <TabViewItem title="First">
        <TabViewItem.view>
          <StackLayout class="tab-content">
            <Label text="First View" class="title"/>
            <Label text="This is the content of the first tab." textWrap="true"/>
          </StackLayout>
        </TabViewItem.view>
      </TabViewItem>
      <TabViewItem title="Second">
        <TabViewItem.view>
          <StackLayout class="tab-content">
            <Label text="Second View" class="title"/>
            <Label text="This is the content of the second tab." textWrap="true"/>
          </StackLayout>
        </TabViewItem.view>
      </TabViewItem>
    </TabView.items>
  </TabView>
</Page>

Androidエミュレータでの実行結果

MyNextGreatApp-Android

iOSエミュレータでの実行結果

MyNextGreatApp-iOS

一覧と詳細を表示するアプリケーション

$ tns create MyMasterDetailApp --template tns-template-master-detail

一覧と明細はGridLayoutを使って表示する場所を定義し、一覧部分を表示するテンプレートはListViewを使っています。

<!-- main-page.xml -->
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
  <GridLayout rows="auto, *">
    <Label text="Items Page" class="title" />

    <ListView items="{{ items }}" itemTap="listViewItemTap" row="1">
      <ListView.itemTemplate>
        <Label text="{{ title }}" class="listItem" />
      </ListView.itemTemplate>
    </ListView>
  </GridLayout>
</Page>

明細部分はdetails-page.xmlでレイアウトを定義していて、具体的な内容の表示にはdetails-view.xmlを使っています。

<!-- details-page.xml -->
<Page xmlns="http://schemas.nativescript.org/tns.xsd"
      xmlns:app="."
      navigatedTo="pageNavigatedTo">
  <app:details-view />
</Page>

<!-- details-view.xml -->
<StackLayout  xmlns="http://schemas.nativescript.org/tns.xsd">
  <Label text="{{ title }}" class="detail-title"/>
  <Label text="{{ info }}" class="info" textWrap="true"/>
</StackLayout>

Androidエミュレータでの実行結果

MyMasterDetailApp-Android

iOSエミュレータでの実行結果

MyMasterDetailApp-iOS

サイドメニュー付きアプリケーション

$ tns create MyDrawerApp --template nativescript-template-drawer

サイドメニュー付きアプリケーションを作成する場合には、サイドメニューdrawer-content.xmlを定義し、メニューをクリックしたときの画面をそれぞれ定義しています。

<!-- drawer-content.xml -->
<grid-layout class="drawer-content">
  <stack-layout>
    <label text="Home" tap="navigate" class="{{ selectedPage == 'home' ? 'selected' : '' }}" />
    <label text="About" tap="navigate" class="{{ selectedPage == 'about' ? 'selected' : '' }}" />
    <label text="Settings" tap="navigate" class="{{ selectedPage == 'settings' ? 'selected' : '' }}" />
  </stack-layout>
</grid-layout>

Androidエミュレータでの実行結果

MyDrawerApp-Android

iOSエミュレータでの実行結果

MyDrawerApp-iOS

NativeScriptとAngular2を組み合わせる

ここからが本記事の一番のポイント、「Angular2を使ったNativeScriptアプリケーション」に入ります。準備が長くて申し訳ありません！

npmにはいくつかのAngular2を利用したNativeScriptのテンプレートがありますが、今回はNativeScriptのチュートリアルを参考に、githubリポジトリーからテンプレートをcloneしたものを利用します。

NativeScript with Angular2で作るHello World

まずはリポジトリhttps://github.com/NativeScript/sample-Groceriesをcloneします。clone後、angular-startをcheckoutすると、NativeScript with Angular2で開発するための最も基本的な構成を得ることができます。

$ git clone https://github.com/NativeScript/sample-Groceries.git
$ cd sample-Groceries
$ git checkout angular-start
$ tree -L 2
├── app
│   ├── App_Resources
│   ├── app.component.ts
│   ├── app.css
│   ├── app.routes.ts
│   ├── main.ts
│   ├── package.json
│   ├── pages
│   ├── platform.android.css
│   ├── platform.ios.css
│   ├── shared
│   └── utils
├── package.json
├── platforms
│   └── ios
├── references.d.ts
└── tsconfig.json
$ tns platform add ios
$ tns platform add android
$ tns run ios --emulator
$ tns run android --emulator

Androidエミュレータでの実行結果

HelloWorld-Android

iOSエミュレータでの実行結果

Helloworld-iOS

NativeScriptではBootstrapに特別なメソッドnativeScriptBootstrapを利用します。具体的にエントリーポイントmain.tsは次のように記述されます。

// main.ts
import {nativeScriptBootstrap} from "nativescript-angular/application";
import {AppComponent} from "./app.component";

nativeScriptBootstrap(AppComponent);

Angular2では、NativeScriptのXMLを@Component.templateにディレクティブとして定義します。ただ@Component.templateではXMLをそのまま利用できないので、少し書き換える必要があります。具体的には<foo />を<foo></foo>に書き換えるといった作業です。

具体的にこのサンプルの場合、XML定義では

<Label text='hello world' />

ですが、Angular2ではコンポーネントとして定義します。

// app.component.ts
import {Component} from "@angular/core";

@Component({
  selector: "my-app",
  template: "<Label text='hello world'></Label>"
})
export class AppComponent {}

LabelはHTMLタグではなくNativeScriptで定義されたディレクティブです。NativeScriptでは幾つかのUIコンポーネントを定義していますので一覧にまとめます。

UIコンポーネントのマッピング

NativeScriptのUIコンポーネントは、iOSやAndroidのウィジェットにマッピングさせています。ビルドするとNativeScript with Angular2で定義したコンポーネントがマッピングされたiOSやAndroidのウィジェット変換されます。具体的な利用方法に関しては、Native Script UI Componentsを見ていただきたいと思います。

NativeScript with Angular2 Android iOS
Button android.widget.Button UIButton
Label android.widget.TextView UILabel
TextField android.widget.EditText UITextField
TextView android.widget.EditText UITextView
SearchBar android.widget.SearchView UISearchBar
Switch android.widget.Switch UISwitch
Slider android.widget.SeekBar UISlider
Progress android.widget.ProgressBar UIProgressView
ActivityIndicator android.widget.ProgressBar UIActivityIndicatorView
Image android.widget.ImageView UIImageView
ListView android.widget.ListView UITableView
HtmlView android.widget.TextView UILabel
WebView android.webkit.WebView UIWebView
TabView android.support.v4.view.ViewPager UITabBarController
SegmentedBar android.widget.TabHost UISegmentedControl
DatePicker android.widget.DatePicker UIDatePicker
TimePicker android.widget.TimePicker UIDatePicker
ListPicker android.widget.NumberPicker UIPickerView

NativeScript + Angular2でHello World

はじめに作成した「NativeScriptで作るHello World」のAngular2版のテンプレートがあります。アプリケーションの動きはまったく同じですがAngular2で書かれています。

$ tns create MyNgNativeScriptApp --template tns-template-hello-world-ng 
$ cd MyNgNativeScriptApp
$ tns platform add android
$ tns platform add ios
$ tns run android --emulator
$ tns run ios --emulator

テンプレート部分を見比べると、XMLで書かれていたテンプレートコードがAngular2スタイルで記載されていることが理解でき、結果見通しのよいコードになっています。

<!-- app.component.html -->
<StackLayout>
  <Label text="Tap the button" class="title"></Label>
  <Button text="TAP" (tap)="onTap()"></Button>
  <Label [text]="message" class="message" textWrap="true"></Label>
</StackLayout>

// app.component.ts
import {Component} from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "app.component.html",
})
export class AppComponent {
  public counter: number = 16;

  public get message(): string {
    if (this.counter > 0) {
      return this.counter + " taps left";
    } else {
      return "Hoorraaay! \nYou are ready to start building!";
    }
  }
    
  public onTap() {
    this.counter--;
  }
}

Todosアプリケーション

NativeScriptのサイトには、より多く機能が実装されたチュートリアルBuilding Apps with NativeScript and Angular 2を提供しています。完成したアプリケーションは先ほどと同じリポジトリhttps://github.com/NativeScript/sample-Groceriesにありますので、是非見て下さい。

$ git clone https://github.com/NativeScript/sample-Groceries.git NgTodosNative
$ cd NgTodosNative
$ tns platform add ios
$ tns platform add android
$ tns run ios --emulator
$ tns run android --emulator

Androidエミュレータでの実行結果

sample-Groceries-Android

iOSエミュレータでの実行結果

sample-Groceries-iOS

サンプルコードを読むと、NativeScriptで利用するnativeScriptBootstrapの使い方やNativeScript用のルーティング設定が記載されていたりとAngular2の特徴を活かした実装になっています。

今回は、環境設定からはじまり、NativeScriptを使ったもの、NativeScript wit Angular2へと進め、Hello World的なアプリケーションを動かすところまでをテンプレートを使いながら簡単に説明させていただきました。

最後に

NativeScriptの事例がないかと探してみましたがNativeScript Showcasesにいくつかありました。このアプリケーションがAngular2をベースにしたものかはわかりませんが、NativeScriptを使ったものです。

NativeScriptのXMLで定義したUIコンポーネントが、コンパイル時にiOS、Androidのウィジェットにそれぞれマッピングされネイティブアプリにコンパイルされます（ちょっと古いですがXSLTを思い出しました）。Angular2の@Component.templateを利用することでNativeScriptがUIコンポーネントの定義を解釈し、ネイティブコードの生成を行っています。

ただし、NativeScript with Angular2用に作成したコンポーネントとNativeScriptを使わない通常のAngular2のコンポーネントとの相互再利用性は低いです。ですが、慣れたAngular2の構造を利用しTypeScript(もしくはJavaScript)で書けるというのは非常に興味が湧くところです。

編集部よりお詫び
2016/9/9 18:30 編集部が付けた以前のタイトルは、一部の方を不快にさせる可能性があるとの判断のもと、記事タイトルを変更いたしました。 執筆者の佐川さん、及び以前のタイトルを不快に感じた多くの方々に、深くお詫び申し上げます。

]]> PCからIoTまで! Web技術を使ったユニバーサルWindowsプラットフォーム (UWP) アプリの開発 /osamum_ms/20545/ Thu, 08 Sep 2016 01:00:45 +0000 /?p=20545 連載： Web技術でアプリ開発2016 (3)

「Web技術でアプリ開発2016」ということで、この記事ではPCからIoT機器まで、Windows 10プラットフォームであればデバイスを問わず動作する ユニバーサルWindowsプラットフォーム (以下、UWPと記述) 上で動作するアプリについて紹介します。

このアプリはもちろんHTML、CSS + JavaScriptといったWeb開発者が慣れ親しんだ技術で開発することができます。また、インターネットでホストされているWebページをラップしてアプリ化することができます。

UWPをターゲットとしたアプリ開発では、新規開発はもちろん、既存のWeb資産を利用してアプリを開発し、さまざまな Windows 10デバイスに横断的に機能を提供することができます。

この記事では、UWPがどのようものであるか、UWP上で動作するアプリの開発方法と公開方法について紹介します。

ユニバーサルWindowsプラットフォーム (UWP)アプリ とは

Windows 10では、PC、モバイル、XBOX、Surface Hub、HoloLens、IoT 機器といったデバイスファミリーで共通のカーネルを採用しており、これによりアプリケーションのプラットフォームが統合されました。

image


このWindows 10デバイスファミリーで統合されたプラットフォームをユニバーサルWindowsプラットフォーム (Universal Windows Platform : UWP)と呼びます。

UWP用のアプリは、OSのバージョンではなくデバイスファミリーを対象としますが、UWPのコアAPIはすべてのWindowsデバイス ファミリーに共通であり、アプリにコアAPIのみを使う場合は、そのアプリはいずれのWindows 10デバイスでも動作します。

つまり、固有のデバイスに縛られることなく、目的のデバイスファミリーをターゲットして再コンパイルすることでPCから IOT基板まで、さまざまな機器に配置し、動作させることができるのです。

Webの開発者からみればハードルが高そうなIoT機器用のアプリもHTML、CSS + JavaScriptで開発することができます。

たとえば、以下の記事では、Raspberry Piとディスプレイをマジックミラーの裏に配置し、洗面台の鏡の中に情報を表示するアプリを紹介していますが、この上表を表示するアプリはHTML、CSS + JavaScriptを使用したUWPアプリです。

また逆に、拡張機能SDKにより特殊なデバイス用のアプリも開発することもできます。

UWPアプリのメリット

UWPアプリのメリットは、前述したようにデバイスファミリーを横断したアプリの開発が容易であるということもありますが、それ以外でも、複数の言語で開発することができることや、UWPが公開する豊富なAPIを直接使用できるということがあるでしょう。

UWPアプリのロジック部分はC#、Visual Basic、C、C++、JavaScriptといった開発言語で記述することができ、UI部分は XAML (C#、VB、C、C++)、DirectX (C、C++)と、HTML/CSS (JavaScript)で記述することができます。

image


UWPのリソースにアクセスするためのWindowsランタイム(WinRT) APIには、各言語ともWindows名前空間を空間を介して接続することができます。

WinRT APIは Windows 10の予定表や連絡先、タイルといったOSが持つソフト的なリソースからBluetoothやWi-Fi、USBといったハード的リソースへのアクセスなど、幅広く機能を提供します。そしてこれらのAPIはUWPでサポートされている言語であれば、言語を問わず利用することができます。

Windowsランタイムがアプリ向けに公開しているAPIのついての詳細は以下のドキュメントをご参照ください。

開発環境

UWPアプリの開発はWindows 10とVisual Studio 2015もしくは、Apache Cordovaを使用して行うことができます。

Visual Studio 2015とApache Cordovaの使い分け

Visual Studio 2015では、それ単体によるUWPアプリの開発はもちろん、Visual Studio Tools for Apache Cordova を使用してiOS、Android、UWPアプリの開発が行えます。

つまり、Visual Studio 2015ではそれ単体とApache Cordovaのどちらかを使用してUWPアプリを開発することができますが、これは単に機能が重複しているということではなく、以下のように状況や目的に合わせて使い分けるためにあります。

開発環境 用途
Visual Studio 単体 特殊デバイス向けの開発など、UWP固有の機能を使用した実装を行う場合
Apache Cordova 共通のソースで、UWP以外のiOSやAndroidにもアプリを提供する場合

なお、Visual Studio 2015は有償製品ですが、非営利目的やオープンソースソフトウェアの開発であれば、無償の Visual Studio Community　を使用することができます。

Visual Studio Communityは、機能的にはVisual Studio Professionalと同等であり、クロスプラットフォーム開発をサポートしています。

開発できるアプリの形式

HTML、CSS + JavaScriptで開発できるUWPアプリの形式は、大まかにUI部分をクライアントサイドにインストールするパッケージ型と、ネットワークにホストされているコンテンツをラップしたホスト型の2つのタイプに大別されます。

アプリの型式 状態
パッケージ型 UI部分をクライアントサイドにインストールするもの
一部 WebViewコントロールで覆ったものもプロジェクトテンプレート上はこれにあたる
ホスト型 ネットワークにホストされている
Webコンテンツをラップしたもの

一部をWebViewコントロールで覆ったものもVisual Studioのプロジェクトテンプレート上はパッケージ型に含まれます。

image

パッケージ型、ホスト型アプリにはそれぞれ特徴とメリットがあります。

パッケージ型アプリは、動作に必要なリソースをクライアントサイドにインストールできるので、アプリの作りによっては、動作にサーバーサイドのリソースを必要としない完全にオフラインのアプリを作ることも可能です。

ホスト型のアプリの場合は、ネットワーク上に公開されているコンテンツを表示しているので、画面や機能を変更する際でも再インストールの必要はなく、常に最新の情報を提供することができます。また、Webサイト向けのコンテンツの開発と作業が一元化できます。
ホスト型のアプリはその性質上オンラインでの使用が大前提となりますが Progressive Web Apps の実装が可能になればこういった制限も大幅に緩和され、パッケージ型よりもホスト型が選択されるケースが増えることでしょう。

image


 

パッケージ型のアプリはもちろん、ホスト型のアプリも、適切なセキュリティ設定を行うことにより、Windowsランタイム API にアクセスできます。

たとえば、以下の記事では、Webサイトに公開されているページに記述されているJavaScirptからNFCデバイスにアクセスする方法について紹介しています。

開発方法

Visual Studio 2015に用意されたプロジェクトテンプレートを使用してプロジェクトを作成し、コーディングしていきます。

HTML、CSS + JavaScriptで開発するUWPアプリに用意されているプロジェクトテンプレートの種類は以下のとおりです。(2016年9月現在)

プロジェクトテンプレートの種類 説明
空白のアプリ 事前定義されたコントロールやレイアウトのないユニバーサルWindowsアプリのためのプロジェクト。コンテンツセキュリティポリシー(CSP)を適用します。すべてのユニバーサルWindows APIに直接アクセスします。
WinJSアプリ WinJS を使用しているユニバーサルWindowsアプリのプロジェクトです。すべてのユニバーサルWindows APIに直接アクセスできます。
ホストされるWebアプリ リモートの開始ページを含むユニバーサルWindowsアプリのプロジェクトです。すべてのユニバーサル Windows APIにアクセスするには、URLをアプリケーション コンテンツURI規則に追加する必要があります。
空のアプリ-Webコンテキスト ローカルコンテンツをWebからのものとして処理します。既定のアプリケーションコンテンツポリシー(CSP)はありません。ユニバーサルWindows APIにアクセスするには、URIがアプリケーション コンテンツURI規則で宣言されている必要があります。

開発を開始するための具体的な手順について、以下のチュートリアルを参照してください。

配布方法

UWPアプリの公開は、一般的にはWindowsストアを介して行われます。

image


Windowsストアにアプリを公開するには、Windowsデベロッパーセンターのダッシュボードから、appx形式にパッケージングしたアプリを提出します。Windowsストア側で安全性を含め様々な審査が実施され、合格すると公開されます。

UWPアプリをWindowsストアに公開するまでの、開発者アカウントの作成からパッケージの提出、支払いの受け取り (販売した場合) までの具体的な方法については以下のドキュメントを参照してください。

会社組織のみの利用を想定した場合など、Windowsストアで公開を希望しない場合にはサイドローディングという方法を使用して、管理化にあるデバイスにUWPアプリを直接インストールすることができます。

サイドローディングの具体的な方法については以下のドキュメントを参照してください。

収益モデル

Windowsストアでは提出したアプリを販売することができます。また、アプリ内の課金も可能です。開発者Windowsストアが用意するさまざまな仕組を利用して収益を上げることができます。

現在Windowsストアで収益を上げるには、以下の3つの方法があります。

  1. アプリそのものの販売
  2. アプリ内課金(In-App purchase : IAP)
  3. アプリ内広告

これら収益に関する詳しい内容は、以下のドキュメントを参照してください。

まとめ

この記事ではWindows 10から採用されたユニバーサルWindowsプラットフォーム用のアプリ(UWPアプリ) について紹介しました。

UWPアプリは Window 10デバイスファミリーに対し横断的にアプリを開発できます。そのためPC、スマートフォンはもちろん、Web開発者からは技術的に遠いIoTデバイス向けのアプリも使い慣れた HTML,CSS + JavaScriptで開発することができます。

Continuumにも対応しているため、対応スマートフォンをテレビやディスプレイに接続した際にユーザーにデスクトップエクスペリエンスを提供することもできます。

image

Webブラウザー上で動作するアプリはもちろん、他のハイブリット アプリ用フレームワーク向けのコンテンツでも、HTML、CSS + JavaScriptを使用して作られているのであれば、特別なことをしていない限りはUWPアプリへの移植はそれほど難しくはありません。

新規での開発はもちろん、既存のアプリの新たな市場獲得のための移植先としても検討してもいいかもしれません。

UWP開発についてのより詳しい情報は以下をぜひご覧ください。

]]> Cordovaは今やMicrosoftが主導！？最新状況と基本を素早く再チェック！ /masahiro/20562/ Wed, 07 Sep 2016 00:31:55 +0000 /?p=20562 連載： Web技術でアプリ開発2016 (2)

Web技術でアプリ開発2016特集・第二弾は、Cordovaの最新状況と基本をご紹介。その歴史からプラットフォーム／ライブラリの特徴、ネイティブな機能を呼び出す方法などを解説していきます。

概要

CordovaはPhoneGapと呼ばれていた時代を含めると、8年以上の歴史があります。PhoneGapが産声を上げたのは2008年、Nitobi社がハッカソンでPhoneGapを発表しました。オープンソースで提供されていたPhoneGapは注目され、2011年にはNitobiはAdobe社に買収されます。その結果、オープンソースで提供されているフレームワーク（PhoneGap本体）はCordovaと名前がつけられ、Apache Foundationの仲間入りします。

その結果、Adobeだけでなく、GoogleやMicrosoft、IBM、インテルといった会社がCordovaを支えています。現在、コミュニティをリードしているのはMicrosoftで、Cordovaのコア機能の実装だけでなく、開発者向けの製品へのCordova対応を進めています。

PhoneGapは、Adobe Creative Cloudのいちプロダクトとして、Cordovaをベースとした有償のビルドツールを提供しているほか、エンタープライズ製品も発表されています。

Hello, World

Cordovaはクロスプラットフォームではありますが、ビルドできるアプリはビルド環境に依存します。

  • macOS: iOS, Android
  • Windows: Windows, Android
  • Linux: Android

ローカル環境に依存してしまうため、クラウド環境を使って複数のOSに対応させるソリューションが各社から提供されています。詳しくはPhoneGap BuildやMonacaを参照してください。

Cordovaアプリの開発には様々なオプションがあります。エディタとしては、MicrosoftのVisual StudioやVS Code、JetBrainsのWebStormなど、Web開発と親和性の高いツールを選ぶと良いでしょう。

Cordovaがオフィシャルに提供しているツールとしてCordova CLIがあります。これを使うと、コマンドラインツールでPC上でのシミュレートからビルドまで行うことができます。Cordova CLIはNode.jsを入れた後、下記のようにインストールします。なお、Cordova CLIはNode.jsバージョン4以上に対応しています。

$ npm install -g cordova

インストールしたらcordovaコマンドが使えるようになります。早速アプリを作成するために、cordova createコマンドを実行します。

$ cordova create helloworld
$ cd helloworld
$ cordova -v
6.3.1

これでプロジェクトが作成されました。次にプラットフォームを追加します。cordova platformコマンドを使用し、引数にはプラットフォーム名（android、ios、windows等）を指定します。

$ cordova platform add android (ios, windows)

ブラウザーでプレビューするには、cordova serveコマンドを使います。

$ cordova serve

ブラウザーを開き、http://localhost:8000/にアクセスします。下記の画面が表示されたら成功です。

cordova-serve

実際のアプリを表示するには、プラットフォーム名をクリックします。なお、ブラウザではネイティブAPIとの連携ができないため、ブラウザー上で変なエラーメッセージ等が表示される可能性があります。

cordova-deviceready

最後にビルドを行ってみましょう。USBで接続した端末に実行するにはemulateを、パッケージを作るにはbuildコマンドを使用します。

$ # エミュレータを起動します
$ cordova emulate android (ios, windows)
$ # ビルドを実行します
$ cordova build android (ios, windows)

プラットフォーム／ライブラリの特徴

項目 説明
対応プラットフォーム iOS, Android, Windows, Firefox OS, Ubuntu…
コードベースは（ほぼ）完全に統一できるか？ 統一できる
UIを記述する言語 HTML、CSS、JavaScript
UIはネイティブか、Webか WebView上で実行される
パフォーマンス WebViewのためネイティブより遅い
ネイティブな機能を呼び出せるか？ Cordovaプラグインを通じて呼び出せる

以下に上の表を補足します。

サポートするプラットフォーム

  • iOS
  • Android
  • Windows (Windows Phone, Windows 10)

以前から数多くのモバイルOSに対応しており、上記以外にもBlackberryやTizen、Firefox OSなどもラインアップに加わっています。アンオフィシャルなものでは、Electron対応もあります。

コードベースは完全に統一できるのか？

作り方次第ではありますが、基本的には完全に統一できます。ただし、プラットフォームごとにブラウザーエンジンが異なるため、その癖を理解しておく必要があります。

iOSはWebKit、AndroidはWebKitから派生したBlinkが使われるため、近い挙動となります。一方Windowsアプリでは、セキュリティの理由でInnerHTMLやインラインJavaScriptが禁止されているなど、細かい挙動に違いがあります。

また、CSSのプロパティやJavaScriptのサポート度合いもブラウザ依存です。その辺りに気をつけて確認をしながら開発を行うことが求められます。

一方、ネイティブ側は各OSごとの実装依存となります。プラットフォームごとの注意点について、CordovaのAPIドキュメントに記述されています。

UIを記述する言語

WebView上にUIを表現します。そのためWebサイトやWebアプリと同様、HTML、CSS、JavaScriptの組み合わせで記述していきます。

ただしモバイルUIにゼロから対応していくのは大変です。そのため、Onsen UIやIonicといったオープンソースのUIライブラリーが多用されます。

パフォーマンス

WebView上で動作させることから、ネイティブと比べてボトルネックが発生しやすいです。ただし端末スペック向上やブラウザの最適化などのおかげで、昔と比べるとはるかにスムーズに動作します。

一方で、パフォーマンスチューニングの要であるブラウザ上での高速化テクニックに乏しいという事情もあります。Service WorkerやWebAseemblyといった技術に期待したいところです。

UIはネイティブか、Webか

WebView上で開発しますので、ブラウザの持つHTML、CSS、JavaScriptを使用します。

ネイティブUIを実装する取り組みも行われており、MicrosoftからはProject Aceというプロジェクトが立ち上がりました。これを使うと、パフォーマンス向上だけでなく、WebView上にネイティブウィジェットを配置したり、WebViewをネイティブUIの中に組み込むといった事が可能になります。

ネイティブな機能を呼び出す方法

Webレイヤーからネイティブレイヤーに、非同期的にネイティブAPIを呼び出す仕組みを備えています。SwiftやJavaで記述する必要がありますが、JavaScript APIで実現できないOSやデバイスの機能を呼び出すことができます。

また、Cordovaプラグイン仕組みが提供されており、npmには様々なプラグインが公開されています。プラグインを組み込むにはcordova pluginコマンドを実行します。

$ cordova plugin add cordova-plugin-camera

上記の例では、カメラを制御するプラグインを組み込んでいます。これで、下記のようにしてカメラ画像の撮影が可能になります。

navigator.camera.getPicture(onSuccess, onFail, {
  quality: 50,
  destinationType: Camera.DestinationType.FILE_URI
});
function onSuccess(imageURI) {
  var image = document.getElementById('myImage');
  image.src = imageURI;
}
function onFail(message) {
  alert(message);
}

まとめ

かつてPhoneGapと呼ばれていた頃と異なり、WebやモバイルOSの進化の流れを受け、だいぶ様変わりしました。一方で、一昔前はアーリーステージにつきものの仕様変更や互換性問題がありましたが、現在では比較的落ち着き、良くも悪くも枯れてきたように思います。

Cordovaの強みは、Web技術をそのまま生かすことでのエンジニア層の厚さと、幅広く使われていることによるエコシステムの大きさではないでしょうか。一度使ったことがある方も、そうでない方も、最新のCordovaを試してみてはいかがでしょうか。

]]> React Native入門 ─ Hello,Worldからネイティブ連携まで /shohey1226/20480/ Tue, 06 Sep 2016 00:16:23 +0000 /?p=20480 連載： Web技術でアプリ開発2016 (1)

モバイルアプリ開発におけるWeb技術の可能性を探る特集・第一弾でご紹介するのはReact Native。その生い立ち、チュートリアルから、コードベースやUIを記述する言語、パフォーマンスまで解説します。

概要

React Nativeは2013年にFacebook社内のハッカソンで生まれたプロジェクトです。2014年にiOSアプリのFacebook Ads ManagerをReact Nativeを用いて開発し、2015年3月にオープンソースとして公開されました。そして、半年後の2015年9月にAndroidをサポートし、今年のF8では、MicrosoftがReact NativeでWindowsプラットフォーム（PC, Mobile, Xbox）の開発ができます、という発表がありました。また、macOSアプリの開発、Ubuntuアプリの開発など他のプラットフォームの開発もできるようにするプロジェクトも走っているようです。

React Nativeのコンセプトは、”Write Once, Run Anywhere”(一つのコードでどこでも動く）ではなく、”Learn Once, Run Anywhere”(一度学べば、どこでも動かせる）です。一度React Nativeを理解すれば、どのプラットフォーム上でも同様のコーディングを行って、プラットフォームネイティブなアプリケーションを開発することが出来ます。Githubのスター数は35,000を超え、リリースの頻度も多く、グローバルな視点でみると、非常に熱い技術であると言えます。

（編集部注: 「Write Once, Run Anywhere」は、あらゆるプラットフォームで同一のコードが動作するという、Javaが喧伝していたコンセプトです）

Hello, World

以下は、macOS上で開発することを前提としたチュートリアルです。

React Native開発に必要なものは、 Node.js, React Nativeのコマンドラインツール、Watchman（Facebookによって開発されているファイル監視ツール）になります。Homebrewで下記のようにインストールします。

$ brew install node $ brew install watchman $ npm install -g react-native-cli $ npm -v 3.6.0 $ node -v v5.0.0

iOS

iOSの場合はXcodeが必要です。XcodeはMac App Storeからインストールしましょう。　準備が整ったところで、プロジェクトを作って走らせてみます。

$ react-native init AppByWebTech2016 $ cd AppByWebTech2016 $ react-native run-ios

Simulator Screen Shot 2016.08.27 9.57.40

Android

Androidの場合は、Android Studioが必要なのでインストールしておきます。アプリの起動には、実機をUSBで繋げておくか、Emulatorが必要なので適宜用意します。今回は、Genymotion(個人利用は無料）を起動しておいて, 下記のコマンドを走らせます。

$ react-native run-android

スクリーンショット 2016-08-27 10.32.12

NativeBaseを使う

これだけだと味気ないので、NativeBaseを用いてUIを作ってみたいと思います。NativeBaseはWebでいうBootstrapのようなものです。ボタン等のUIを自分でデザインする必要がなく見栄えの良いインターフェイスを簡単に作ることができます。

では、NativeBaseをインストールしてみましょう。(※react-nativeのバージョンは0.32)

$ cd AppByWebTech2016 $ npm install native-base --save $ react-native link react-native-vector-icons

index.ios.jsを下記のように変更すると、

import React, { Component } from 'react';
import { Container, Content, Button, Header, Title, List, ListItem, Badge } from 'native-base';
import { Col, Row, Grid } from 'react-native-easy-grid';
import { AppRegistry, Text, View } from 'react-native';

class AppByWebTech2016 extends Component {
  render() {
    return (
      <Container>
        <Header>
          <Title>Hello World</Title>
        </Header>
        <Content>
          <List>
            <ListItem >
              <Badge>1</Badge>
            </ListItem>
            <ListItem>
              <Badge primary>2</Badge>
            </ListItem>
            <ListItem>
              <Text>List 3</Text>
            </ListItem>
          </List>
          <Grid>
            <Row>
              <Col>
                <Button style={{margin:10}}> Click Me! </Button>
              </Col>
              <Col style={{backgroundColor: '#204d74'}}>
                <Text style={{fontSize: 20, color: 'white', margin: 10}}>React Native!</Text>
              </Col>
            </Row>
            <Row style={{backgroundColor: '#00c497'}}>
              <Text style={{fontSize: 24, color: '#333', margin: 10}}>Learn once, Write anywhere</Text>
            </Row>
          </Grid>
        </Content>
      </Container>
    );
  }
}

AppRegistry.registerComponent('AppByWebTech2016', () => AppByWebTech2016);

スタイルのことを気にせずボタンを作ることができ、グリッドなども簡単に使用できます。プロトタイピングなどにはもってこいのモジュールとなっています。

スクリーンショット 2016-08-27 14.09.20

プラットフォーム／ライブラリの特徴

項目 説明
対応プラットフォーム iOS, Android, Windows(PC, Mobile, Xbox), macOS※, Ubuntu※
コードベースは（ほぼ）完全に統一できるか？ 統一できない（実際は7,8割は共有できる）
UIを記述する言語 JavaScript, React, スタイルシート
UIはネイティブか、Webか WebViewではない。ネイティブもしくはJSとのハイブリットで実現
パフォーマンス ネイティブ同等
ネイティブな機能を呼び出せるか？ APIを通じて自由に呼び出せる

※コミュニティがサポート

以下に、上の表を補足します。

対応プラットフォーム

私が確認したのはiOSとAndroidですが、前述した通り、下記のプラットフォームでReact Nativeの方法でNativeアプリを動かすことができるようです。

  • iOS
  • Android
  • Windows(PC, Mobile, Xbox)
  • MacOS
  • Ubuntu
  • Browser※1

※１React Native for WebというChrome, Firefox, Safari >= 7, IE 10, Edge.のBrowser上でReact Nativeコードを動かすというプロジェクトさえ存在します。

コードベースは（ほぼ）完全に統一できるか？

残念ながら完全には統一できません。現実には各プラットフォームの作法（例えば、iOSはtabbarは下部、Androidは上部） が存在し、完全に同じにすべきかというのは別の議論が必要な気がします。ただ85%は同じコードを再利用できたといった話もないわけではありません。ビジネスロジック部分は統一させ、UIは個別のコードで実現するというのが、コードの再利用＋ネイティブの作法の両面を考慮に入れたReact Nativeの流儀だと言ってよいでしょう。

UIを記述する言語

コードはJavaScript(ES6), コンポーネントはReact, デザインはスタイルシートを用いて記述していきます。 スタイルシートはCamel記法となるのでCSSのbackground-colorがbackgroundColorという属性になり、非常に馴染みの深いものになります。 React Nativeは、レイアウトを行うためにFlexboxを用います。最近のWebブラウザでは広くサポートされているので、ご存じの方も多いことでしょう。

ES6やReactは確かに学習コストがあります。しかし、Web業界で生きているひとは少なくとも触っておくべき技術でしょう。React Nativeでのアプリ開発の経験が逆にWebに生かすというようなことも起きるかもしれません。

パフォーマンス

ネイティブのコンポーネントを利用する限り、ネイティブと同等のパフォーマンスになると言ってよいでしょう。パフォーマンスの最適化を開発者に意識させないようにすることがReact Nativeが実現しようとしていることです。

しかし、公式のドキュメントによると、現実には何点か難しい箇所があると述べられています。

React Nativeは下図のようにスレッドが走っています。

8E2942F7-B660-46DC-85BA-58DA362472DB

React.js Conf 2016 – Tadeu Zagallo – Optimising React Native: Tools and Tipsより転載

端的に言うと、JavaScriptのビジネスロジックが動くJSスレッド上で時間のかかる処理を行うと、UI出力時に遅延が起きてしまうケースがあります。 もしパフォーマンスに影響が出たときは、このJSスレッドを意識してコードを見直してみる必要があります。

今年のReact Confの発表でも言及されていましたが、Facebookは社内にReact Nativeのパフォーマンスチームを作ってパフォーマンスを継続的に改善しています。彼らがリソースを割いて注力している部分でもあるので、これからも改善されていく部分だと思います。

UIはネイティブか、Webか

WebViewを使わないという観点でWebではありません。ネイティブのライブラリを呼び出すAPIが多いですが、JSとのコードのハイブリッドといったイメージでしょうか。UIの動作は非常にネイティブライクです。

ネイティブな機能を呼び出す方法

React Nativeとネイティブ間を受け渡すようなAPIが用意されています。 これを使うことで容易にネイティブからの値を受け取ったり、受け渡したりすることができます。 この程よい抽象化があることで、現行のiOSアプリにも組み込むことが可能となります。 実際、Facebookのアプリでも一部はReact Nativeで書かれてると言っています。

今回は非常に簡単な例ですが、React Native側で２つの数字を渡しネイティブ側で和を求めて返すメソッドを用いて説明します。(今回はiOS）

まずは、Xcodeでios/AppByWebTech2016.xcodeprojをOpenし、新規作成からCocoaClassを選び、適当なSubクラスを選びます。

ED821C61-EBBF-4046-B1F7-C2C177606302

EF401AE0-3C72-41CE-BA43-95D68531F7B6

すると、AppNativeSum.hとAppNativeSum.mができると思います。 このファイルを下記のように書き換えます。RCT_*(ReaCTの略らしい）の接頭辞がついたAPIをReact Nativeが提供しています。Callbackを用いて返す方法もありますが、今回はPromiseを使います。

#import "RCTBridgeModule.h"

@interface AppNativeSum : NSObject &lt;RCTBridgeModule

@end

#import "AppNativeSum.h"

@implementation AppNativeSum

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(sumNumber:(int)val1 val2:(int)val2 resolver:(RCTPromiseResolveBlock)resolve
                  rejecter:(RCTPromiseRejectBlock)reject)
{
  NSInteger val3 = val1 + val2;
  NSString *val3Str = [NSString stringWithFormat:@"%ld", (long)val3];
  resolve(val3Str);
}

@end

このメソッドの戻り値は、JavaScriptのPromiseです。通常のPromiseと同様に、async/awaitを使って非同期処理の結果を処理することも可能です。

import { NativeModules } from 'react-native';
var AppNativeSum = NativeModules.AppNativeSum;

class AppByWebTech2016 extends Component {

  constructor(props){
    super(props);
    this.state = {
      sum: 0
    }
  }

  async componentDidMount(){
    let sum = await AppNativeSum.sumNumber(1,2);
    this.setState({sum: sum});
  }
...

ネイティブコードに精通していれば、公式ドキュメントにあるAPIに渡すだけで容易にReact Nativeとネイティブのやりとりができます。

まとめ

マレーシアの友人が、彼の国では企業がReact Nativeエンジニアの採用をしていると言っていました(中国でも似たような状況にあるとか)。 日本でもちらほらReact Nativeを採用する会社がでてきているようです。一年半以上経過し、リリース速度が多少遅くなっているといってもどんどん新しいバージョンが出てきて、かつよりよいUIモジュールもでてきています。今こそ、React Nativeを始めてみてはいかがでしょうか。

]]>