PepperでGitHub Pages上のAngularアプリを実行する

## はじめに
ソフトバンクロボティクスが販売している [Pepper](http://www.softbank.jp/robot/special/pepper/) のタブレット部分は本体とは独立して動作しており、HTMLを表示することもできます。というのを[第5回Apache Cordova勉強会](https://cordova.doorkeeper.jp/events/24590)で知りまして、自分でもやってみる機会がありましたのでメモがてら書いていきます。

ついでですので、AngularJS で作ったアプリを GitHub Pages にデプロイして、そこから Pepper を操作することにしてみます。

## アプリを作る
まずはタブレットに表示するアプリを [Yeoman](http://yeoman.io/) 作ります。AngularJS 用ジェネレーターはいろいろありますが、今回は [generator-gulp-angular](https://github.com/Swiip/generator-gulp-angular) を使います。

まずは、Yeoman とジェネレーターのインストールからです。

```
$ npm install -g yo bower gulp
$ npm install -g generator-gulp-angular
```
次にプロジェクトを作ります。

```
$ mkdir pepper-webapp
$ cd pepper-webapp
$ yo gulp-angular
```

プロジェクトの設定はほぼ既定のままです。Babel を有効にしていること、ngRoute を使っていること (今更ですが...)、$http のみにしていることが違いです。

```
? Which version of Angular do you want? 1.4.x (stable)
? What Angular modules would you like to have? (ngRoute and ngResource will b
? Do you need jQuery or perhaps Zepto? jQuery 2.x (new version, lighter, IE9+
? Would you like to use a REST resource library? None, $http is enough!
? Would you like to use a router? ngRoute, the official router
? Which UI framework do you want? Bootstrap, the most popular HTML, CSS, and 
? How do you want to implement your Bootstrap components? Angular UI Bootstra
? Which CSS preprocessor do you want? Sass (Node), Node.js binding to libsass
? Which JS preprocessor do you want? ES6 (Babel formerly 6to5), ECMAScript 6 
compiled with Babel which requires no runtime.
? Which HTML template engine would you want? None, I like to code in standard
```

インストールまでできていれば `gulp serve` でアプリをプレビューできます。

```
$ gulp serve
```

![gulp-serve.jpg](https://qiita-image-store.s3.amazonaws.com/0/103982/a2d1afc9-78be-90a4-02d3-911b5173c598.jpeg)


`gulp build` でアプリをビルドすることができます。

```
$ gulp build
```

`dist` ディレクトリにアプリが成果物が出来上がります。こちらを GitHub Pages にデプロイします。手動でデプロイは面倒なので、[gulp-gh-pages](https://github.com/shinnn/gulp-gh-pages) プラグインを使います。

プラグインをインストールして、`gulp/deploy.js` を作ります。

```
$ npm install --save-dev gulp-gh-pages
```

```js
'use strict';

var gulp = require('gulp');
var ghPages = require('gulp-gh-pages');

gulp.task('deploy', function () {
  return gulp.src('./dist/**/*')
    .pipe(ghPages());
});
```

これで `gulp deploy` で GitHub Pages にデプロイできるようになりましたが、GitHub リポジトリがまだありませんのでそちらを作ります。

[Create a New Repository](https://github.com/new)にアクセスしてリポジトリを作ってください。

```
$ git init .
$ git add .
$ git commit -m 'first commit'
$ git remote add origin git@github.com:{username}/{repositoryname}.git
$ git push -u origin master
```

リポジトリへの Push が完了したら、GitHub Pages へデプロイします。(念の為アプリはリビルドします)

```
$ gulp clean && gulp build
$ gulp gh-pages
```

http://{username}.github.io/{repositoryname}/ にアクセスすると、デプロイしたアプリを見ることができます。

ひとまずアプリ側はこれで完了です。


## Pepper のタブレットをネットワークにつなぐ
Pepper のタブレットは本体とは独立しています。ネットワークの設定も別になります。

あまりいい方法ではないかもしれませんが、Pepper に SSH でログインして設定する方法があります。デフォルトではユーザー名が `nao` でパスワードも `nao` です。(もしかしたらパスワードはセットアップ時に決めたものかもしれません)

```
$ slogin nao@{pepper_ipaddress}
Password:

$ qicli call ALTabletService.configureWifi wpa {SSID} {password}
ALTabletService.configureWifi: true
[W] 5276 qimessaging.transportsocket: connect: No route to host
$ qicli call ALTabletService.enableWifi
ALTabletService.enableWifi: null
$ qicli call ALTabletService.getWifiStatus
ALTabletService.getWifiStatus: "CONNECTED"
```

## Pepper で、作ったアプリを表示する
次に Pepper で、作ったアプリを表示してみます。

Choregraph を起動し、`Tablet` にある `Show App` ボックスをドラッグしてください。そして、開始点とボックスをドラッグしてつなぎます。

![show-app.jpg](https://qiita-image-store.s3.amazonaws.com/0/103982/2593fd1e-ce33-5d96-eac4-5f21861e1dcd.jpeg)

その後、`Show App` ボックスをダブルクリックして Python コードを表示します。

`Show App` ボックスには[問題があるようで](http://qiita.com/Atelier-Akihabara/items/87def938b6553ee9c1e9#%E8%A3%9C%E8%B6%B3show-image%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E3%81%AE%E5%AE%9F%E8%A3%85%E3%82%92%E3%81%BF%E3%81%A6%E3%81%BF%E3%82%8B)、そのままだとうまくウェブを表示できないようです。37 行目あたりに一行追加します。

```py
            fragment = behaviorPath.split(appsFolderFragment, 1)[1]
            # 以下の一行を追加する
            fragment = fragment.split("/")[1]
            return fragment.lstrip("\\/")
```

タブレットには外部サイトも表示できますので、デプロイしたアプリを直接表示することができます。ですが、その場合 Pepper 本体をコントロールするための Web API を呼び出せなくなるようです。ですので、`index.html` ファイルだけは Choregraph プロジェクトに含めることにします。

Choregraph の `Project content` タブの `+` ボタンを押して、`Create directory` をクリックしてください。名前は `html` です。

![create-directory.jpg](https://qiita-image-store.s3.amazonaws.com/0/103982/26cbe799-309e-9cf4-608e-271ca21acf6c.jpeg)

ディレクトリを作成したらプロジェクトを保存します。プロジェクト内に `html` ディレクトリができていますので、その中に `index.html` ファイルを作ります。

```html
<!doctype html>
<html ng-app="pepperWebapp" ng-strict-di="">
  <head>
    <meta charset="utf-8">
    <title>pepperWebapp</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="http://{username}.github.io/{repositoryname}/styles/vendor.css">
    <link rel="stylesheet" href="http://{username}.github.io/{repositoryname}/styles/app.css">
  </head>
  <body>
    <div ui-view=""></div>
    <script src="http://{username}.github.io/{repositoryname}/scripts/vendor.js">
    </script>
    <script src="/libs/qimessaging/1.0/qimessaging.js"></script>
    <script src='https://cdn.mlkcca.com/v2.0.0/milkcocoa.js'></script>
    <script src="http://{username}.github.io/{repositoryname}/scripts/app.js">
    </script>
  </body>
</html>
```

`html/index.html` ファイルの保存が完了したら Choregraph が変更を検出しますので、 `Yes to All` をクリックします。

![modification-detected.jpg](https://qiita-image-store.s3.amazonaws.com/0/103982/76298357-b674-7cfd-c2d1-9cb0ed22abf4.jpeg)

余談ですが、`qimessaging.js` は Pepper 本体を操作するためのライブラリ、`milkcocoa.js` は [Milkcocoa](https://mlkcca.com/) 用のライブラリです。(次回以降で使います!)

あとは Pepper の実機につないで F5 を押して実行するだけです! なんですが、実際には何も表示されません。

`generator-gulp-angular` で作成したプロジェクトは、JavaScript/CSS ファイルのファイル名にハッシュが追加され、ビルドのたびに変わります。そのたびに Choregraph プロジェクト内の `html/index.html` ファイルを修正するのは大変面倒ですので、名前が変わらないようにします。

アプリの `gulp/build.js` ファイルを修正し、ファイル名を書き換えている `gulp-rev` プラグインを無効化します。

```diff
diff --git a/gulp/build.js b/gulp/build.js
index 06970a0..38c7ca3 100644
--- a/gulp/build.js
+++ b/gulp/build.js
@@ -41,7 +41,6 @@ gulp.task('html', ['inject', 'partials'], function () {
   return gulp.src(path.join(conf.paths.tmp, '/serve/*.html'))
     .pipe($.inject(partialsInjectFile, partialsInjectOptions))
     .pipe(assets = $.useref.assets())
-    .pipe($.rev())
     .pipe(jsFilter)
     .pipe($.sourcemaps.init())
     .pipe($.uglify({ preserveComments: $.uglifySaveLicense })).on('error', conf.errorHandler('Uglify'))
@@ -55,7 +54,6 @@ gulp.task('html', ['inject', 'partials'], function () {
     .pipe(cssFilter.restore)
     .pipe(assets.restore())
     .pipe($.useref())
-    .pipe($.revReplace())
     .pipe(htmlFilter)
     .pipe($.minifyHtml({
       empty: true,
```

タスクを変更しましたので、リビルドしてデプロイします。

```
$ gulp clean && gulp build
$ gulp deploy
```

しばらく後に Choregraph で F5 を押して実行してください。今度こそアプリが表示されたと思います。(残念ながら画像が表示されませんが...)

## まとめ
今回は、Pepper 本体のウェブサーバーに `index.html` ファイルを配置して、そこから GitHub Pages にデプロイされた JavaScript/CSS ファイルを読みこむようにしました。

こういった構成のため、画像ファイルを Pepper 本体のウェブサーバーに取得しにいきますので、画像をうまく表示できません。

ですが、AngularJS のビューは表示されています。これは `generator-gulp-angular` で作成したプロジェクトでは、ビューはプリコンパイルされ、`scripts/app.js` ファイルに追加されるからです。

これで、GitHub Pages にデプロイすれば Pepper のタブレットでアプリが動作するようになりました。次回、[Milkcocoa](https://mlkcca.com/) を利用して、アプリから Pepper を喋らせられるようにしてみます。