
react-native で Android の Native module を呼び出す方法です。基本的には下の公式ドキュメントのやり方を真似ていますが、一部そのままでは動作しなかった部分があるため、その辺りも紹介します。

- [Native Modules · React Native](https://facebook.github.io/react-native/docs/native-modules-android)

紹介する内容は次の通りです。

- 簡単な Counter を Native Module で実装した
- Native Module の呼び出し
- Native Module から Constants を受け取る
- Native Module からの Callback を扱う
- Native Module からの Promise を扱う
- Native Module からの Event を扱う

対象のバージョンは次の通りです。

- react-native: 0.57.8
- Android SDK: 27(Oreo)

プロジェクト全体のコードは GitHub で見ることができます。

- <https://github.com/mitsuruog/react-native-call-native-module-sample>

ちなみに Android 開発はほとんどやったことがありません。

## Native Module の呼び出し

まず`ReactContextBaseJavaModule`を継承した`CounterModule.java`を作成します。
その中に`getName`メソッドを作成して、このモジュール名を返すようにします。このモジュール名を react-native 側で利用します。

```java
// CounterModule.java
public class CounterModule extends ReactContextBaseJavaModule {
  public CounterModule(ReactApplicationContext reactApplicationContext) {
    super(reactApplicationContext);
  }

  @Override
  public String getName() {
    return "Counter";
  }
}
```

続いて`ReactPackage`を実装した`CounterPackage.java`を作成します。
中身は新しく追加した react-native 側で利用できるように登録するためのものなので、あまり細かいことは気にせず、公式ドキュメントのまま実装していきます。

```java
// CounterPackage.java
public class CounterPackage implements ReactPackage {

  @Override
  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    return Collections.emptyList();
  }

  @Override
  public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
    List<NativeModule> modules = new ArrayList<>();
    modules.add(new CounterModule(reactContext));
    return modules;
  }
}
```

そして`MainApplication.java`の`getPackages`メソッドに`CounterPackage`を追加して react-native 側から参照できるようにします。

```diff
// MainApplication.java
public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

    ...

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
+              new CounterPackage(),
              new CalendarManagerPackage()
      );
    }
  }

  ...

}
```

react-native 側では`NativeModules`の中に、先ほど定義したモジュール名で Native Module が渡されてくるので、これを利用します。

```js
// App.js
import { NativeModules } from "react-native";

const { Counter } = NativeModules;

// 何かの処理
// Counter.doSomething();
```

これで Native Module を react-native 側で利用する準備が整いました。

## Native Module から Constants を受け取る

Native Module 側から counter の初期値を返します。

`CounterModule.java`に`getConstants`メソッドを追加します。react-native 側に渡したいものを`HashMap`の中に設定していきます。

```java
// CounterModule.java

  ...

  @Override
  public Map<String, Object> getConstants() {
    final Map<String, Object> constants = new HashMap<>();
    constants.put("initialCount", 0);
    return constants;
  }
```

react-native 側では、`initialCount`は次のように利用することができます。

```js
// App.js
console.log(Counter.initialCount); // => 0
```

## Native Module からの Callback を扱う

現在の count を返す`getCount`メソッドを実装します。

Callback は`Callback`クラスで定義されているので、これを引数で受け取って`invoke`で Callback を実行します。

```java
// CounterModule.java
public class CounterModule extends ReactContextBaseJavaModule {

  private int count = 0;

  ...

  @ReactMethod
  public void getCount(Callback callback) {
    callback.invoke(count);
  }
}
```

> Native Module から react-native 側に公開するメソッドには`@ReactMethod`アノテーションをつける必要があります。
> また、react-native と Native Module 間のやりとりは常に非同期であるため、戻り値は常に`void`になります。

react-native 側では次のように利用します。

```js
// App.js
Counter.getCount((count) => console.log(count)); // => 0
```

## Native Module からの Promise を扱う

次は Promise を扱ってみます。

`decrement`メソッドを実装します。正しく減算できた場合は`resolve`を、count が 0 で減算しようとした場合に`reject`を返すようにします。

Promise は`Promise`クラスで定義されているので、これを引数で受け取ってそれぞれ`resolve`と`reject`を実行します。（シンプルでわかりやすいですね）

```java
// CounterModule.java

  ...

  @ReactMethod
  public void decrement(Promise promise) {
    if (count == 0) {
      promise.reject("E_COUNT", "count count cannot be negative.");
    } else {
      count = count - 1;
      promise.resolve(count);
    }
  }
```

react-native 側では通常の Promise と同じように扱うことができます。

```js
// App.js
Counter.decrement()
  .then((count) => console.log(count))
  .catch((error) => console.error(error));
```

## Native Module から Event を受け取る

最後に decrement した時に、`onDecrement`イベントが発火するようにして、これを react-native 側で利用できるようにします。

Event を react-native 側に送るには`ReactContext`が必要なので、`this.getReactApplicationContext()`から取得します。これを使ってイベントを通知します。

> 公式ドキュメントだと`ReactContext`をどう取得すればいいか記載がありません。

react-native 側に送るペイロードは`WritableMap`を使って準備します。

```java
// CounterModule.java

  ...

  @ReactMethod
  public void decrement(Promise promise) {
    if (count == 0) {
      promise.reject("E_COUNT", "count count cannot be negative.");
    } else {
      count = count - 1;
      promise.resolve(count);

      // react-native側へ送るペイロード
      WritableMap params = Arguments.createMap();
      params.putInt("count", count);

      // react-native側にイベントを発火する
      this.getReactApplicationContext()
        .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
        .emit("onDecrement", params);
    }
  }
```

react-native 側では`NativeEventEmitter`の中に Native Module のインスタンスを設定して EventEmitter を取得します。
あとは、EventEmitter に EventListener を設定すれば OK です。

```js
// App.js
import { NativeModules, NativeEventEmitter } from "react-native";

const counterEventEmitter = new NativeEventEmitter(Counter);

counterEventEmitter.addListener("onDecrement", ({ count }) => {
  console.log(count); // => 1
});
```

> なにやら`DeviceEventEmitter`と`NativeAppEventEmitter`というものもあるらしい。

## まとめ

react-native で Android の Native module を呼び出す方法についてでした。
2 つのものが繋がって動作すると楽しいですね。


react-nativeでNative moduleを呼び出す(Android編)

[Ionic](http://ionicframework.com/)で Android アプリを初めて作って公開してみました。

ionic で開発自体は AngularJS ベースということもあり、結構スムーズだったのですが、開発以外の部分で意外とハマったので、その辺り紹介しようと思います。



作ったアプリはこちらです。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2015/hello-ionic-1-1.png)

~~ダウンロードはこちら(現在は配布しておりません)~~

はい、千葉のローカルバスのアプリです。

では、早速本題へ。

## ionic でアプリ scaffold の作成

まず、ionic の概要についてご存知ない方はこちらを参照してください。

[キミは ionic を知っているか？AngularJS+PhoneGap+美麗コンポーネント群！ | HTML5Experts.jp](https://html5experts.jp/canidoweb/7359/)

最初に ionic を使ってアプリ scaffold を作成します。こちらは公式サイトの手順通りに行えばいいと思います。

[Getting Started with Ionic - Ionic Framework](http://ionicframework.com/getting-started/)

```sh
$ npm install -g cordova ionic
$ ionic start <アプリ名> tabs
$ cd <アプリ名>
$ ionic platform add android
$ ionic serve
```

最後の`ionic serve`すると、アプリの webview 部分がブラウザ上で表示されますので、比較的単純なデバックはこちらで行いながら開発していきます。

### パッケージ名の変更

ionic コマンドでアプリ scaffold の作成した場合は、必ず`config.xml`の`<widget id="">`のパッケージ名を変更してください。  
デフォルトでは`com.ionicframework.<アプリ名+乱数>`のような形式になっています。
これは後でストア公開するときのアプリの公開 ID になります。ストア公開後は変更できませんので必ず変更するようにしてください。

```xml
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.mitsuruog.transitbus"
  version="0.0.1" xmlns="http://www.w3.org/ns/widgets"
  xmlns:cdv="http://cordova.apache.org/ns/1.0">
  <name>アプリ名</name>

  ...(省略)

```

## ionic でのアプリ開発

ionic は AngularJS ベースですので、UI 部分の開発は比較的 AngularJS の知識が流用できます。  
今回は、Cordova で利用頻度の高い plugin を AngularJS のモジュールでラップして使いやすくした、`ngCordova`を利用しました。

[ngCordova - Simple extensions for common Cordova Plugins - by the Ionic Framework Team - by the Ionic Framework Team](http://ngcordova.com/)

導入は、ngCordova の bower モジュールをインストールして、トップレベルの AngularJS モジュールで宣言すると利用できます。

```sh
$ bower install ngCordova --save
```

**app.js**

```js
angular.module("yourApp", ["ionic", "ngCordova"]);
```

ngCordova のそれぞれの plugin を利用するためには、別途 Cordova コマンドにて plugin をインストールする必要があります。詳しくは公式サイトを参照してください。

[ngCordova - Document and Examples - by the Ionic Framework Team](http://ngcordova.com/docs/plugins/)

### 実機での実行、デバック(webview)

実機での実行とデバックは、USB ケーブルで Android 端末の実機と PC を接続してから下のコマンドを実行すると、実機上にアプリがビルドされて実行されます。

```sh
$ ionic run android
```

webview デバックについては、Chrome を立ち上げて`chrome://inspect`することで、実機上の WebView を直接インスペクトすることができます。

手前味噌ですが、以前こんな記事を書いてます。

[Android やってる人で ChromeDevtools の Remote Debugging と Screencasting 知らない人は使ってみた方がいいよ！ - I am mitsuruog](http://blog.mitsuruog.info/2013/12/androidchromedevtoolsremote.html)

### ionic テーマのカスタム

ionic のスタイルは`Sass`で出来ていて、テーマ部分は`_variables.scss`に入っています。上書き用の`.scss`を書いてコマンドを実行すると上書きすることができます。

[Writing a Sass Theme | Formulas | Learn Ionic](http://learn.ionicframework.com/formulas/working-with-sass/)

通常は、`./scss/ionic.app.scss`にカスタム用の scss ファイルがあるので、こちらにカスタムする内容を書いていきます。Sass の環境構築についてはこちらを参照してください。

[Ionic CLI - Using Sass | Ionic Framework](http://ionicframework.com/docs/cli/sass.html)

[Sass: Syntactically Awesome Style Sheets](http://sass-lang.com/assets/img/illustrations/glasses-2087d741.svg)

コマンドの例はこちらです。

```sh
$ sass --watch scss/ionic.app.scss:www/css/ionic.app.css
```

これをプロジェクトのトップレベルで実行すると、`scss/ionic.app.scss`を参照して、`www/css/ionic.app.css`に上書き用の CSS を生成してくれます。  
`index.html`で、この CSS を読み込むとテーマをカスタムすることができます。

**index.html**

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"
    />
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet" />
    
    <link href="css/ionic.app.css" rel="stylesheet" />

    ...(省略)
  </head>
</html>
```

あとは、ガツガツ開発していきます。

PC のブラウザ上では正しく表示されているけど、実機だと表示できない・・・  
といった事がよくありますが、気にせず頑張ってください。

その辺りの微妙な不安感を楽しめるかどうかが、ionic と仲良くなるコツです。(うーん、アプリ開発全般で言えることか・・・)

ちなみに、プラットフォームで表示に差異が生じた場合は、CSS を上書きするようなパッチを当てます。  
ionic ではプラットフォームごとに、`platform-android`のような CSS クラスを付与しているので、以下のように追加で CSS を書きます。

```css
.platform-android .hoge {
  color: red;
}
```

### アイコン&スプラッシュイメージ

ionic には、プラットフォームでサイズがまちまちで作成が面倒なアイコンやスプラッシュイメージを、ベースのイメージから自動生成する仕組みが備わっています。

[Automating Icons and Splash Screens | The Official Ionic Blog](http://blog.ionic.io/automating-icons-and-splash-screens/)

`resources/android`フォルダの直下にアイコンであれば`icon.png`、スプラッシュイメージであれば`splash.png`を作成して置いてください。
(ios であれば`resources/ios`に置いてください)

以下のコマンドを実行すると、各プラットフォームごとに画像を生成してくれて、`config.xml`まで書き換えてくれます。超便利。

```sh
$ ionic resources
```

ちなみに、アイコンはこちらから探してきました。

[Clipart - High Quality, Easy to Use, Free Support](https://openclipart.org/)

### google analytics の導入

Web サイト同様にアプリでもユーザーの行動を分析したいので、google analytics を導入します。
ngCordova には GoogleAnalytics 用の plugin がありますが、今回は Android Native SDK v4 対応の別のものを使いました。

[cmackay/google-analytics-plugin](https://github.com/cmackay/google-analytics-plugin)

```sh
$ cordova plugin add com.cmackay.plugins.googleanalytics
```

初期化には少し注意する必要があるので、こちらを参照してください。(使ってるライブラリ微妙に違うけど、雰囲気わかってくれるはず。)

[Using Google Analytics With IonicFramework](https://blog.nraboy.com/2014/06/using-google-analytics-ionicframework/)

View の切り替え時などは、ionic の`ion-view `のライフサイクルイベントをハンドルしてトラッキングします。

**controller.js**

```js
$scope.$on("$ionicView.beforeEnter", function () {
  navigator.analytics.sendAppView("view名");
});
```

どのバス停が人気があるかとか、こっそりトラッキングしてニヤニヤしてます。  
ちゃんと真面目にエラーのスタックトレースも取得してます。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2015/hello-ionic-2-2.png)

> モバイルアプリのトラッキングは Google Analytics 上のアナリティクス設定で新しいプロパティを作成する際に、トラッキングの対象を「モバイルアプリ」にしてください。(普段、Web ページのトラッキングをやっているので、最初うっかりハマってしまいました。)

## 公開準備

アプリの作成が完了しましたので、公開するための準備を行います。

### アプリのビルド

アプリが出来上がったので、リリース用にビルドします。手順は公式サイトを参照してください。

[Publishing your app - Ionic Framework](http://ionicframework.com/docs/guide/publishing.html)

まず、アプリをリリースビルドします。

```sh
$ cordova build --release android
```

これで、`platforms/android/ant-build/MainActivity-release-unsigned.apk`というファイルが生成されます。  
これは unsigned APK(署名なし APK)と呼ばれるもので、このままだと Play store に公開できません。

次に署名を作成します。`keytool`コマンドで private key を生成します。  
この手順は初回 1 回のみです。生成された private key はズッ友なので無くさないように。。。

```sh
$ keytool -genkey -v -keystore <あなたのKeyの名前>.keystore
  -alias <エイリアス名> -keyalg RSA -keysize 2048 -validity 10000

姓名は何ですか。
  [Unknown]:
組織単位名は何ですか。
  [Unknown]:
組織名は何ですか。
  [Unknown]:
都市名または地域名は何ですか。
  [Unknown]:
都道府県名または州名は何ですか。
  [Unknown]:
この単位に該当する2文字の国コードは何ですか。
  [Unknown]:
CN=Unknown, OU=Unknown, O=Unknown, L=Unknown, ST=Unknown, C=Unknownでよろしいですか。
  [いいえ]:  y
```

この例だと、10,000 日間有効な 2,048 ビットの RSA の鍵ペアと自己署名型証明書(SHA256withRSA)を生成するらしい。

次に、`jarsigner`コマンドを使って、APK を署名します。

```sh
$ jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1
  -keystore <あなたのKeyの名前>.keystore platforms/android/ant-build/MainActivity-release-unsigned.apk <エイリアス名>

キーストアのパスワードを入力してください:
   追加中: META-INF/MANIFEST.MF
   追加中: META-INF/TRANSITB.SF
   追加中: META-INF/TRANSITB.RSA
  署名中: AndroidManifest.xml
  署名中: assets/_where-is-www.txt
  署名中: assets/www/app/animation.css
  署名中: assets/www/app/app.constant.js

...

  署名中: res/xml/config.xml
  署名中: resources.arsc
  署名中: classes.dex
jarは署名されました。

警告:
-tsaまたは-tsacertが指定されていないため、このjarにはタイムスタンプが付加されていません。タイムスタンプがないと、署名者証明書の有効期限(2042-09-01)後または将来の失効日後に、ユーザーはこのjarを検証できない可能性があります。
```

最後に`zipplugin`コマンドで APK を zip 化します。

```sh
$ zipalign -vf 4 platforms/android/ant-build/MainActivity-release-unsigned.apk <アプリ名>.apk

Verifying alignment of transitbus.apk (4)...
      50 META-INF/MANIFEST.MF (OK - compressed)
    7366 META-INF/TRANSITB.SF (OK - compressed)
   14812 META-INF/TRANSITB.RSA (OK - compressed)
   15959 AndroidManifest.xml (OK - compressed)
...

 2413084 resources.arsc (OK)
 2415741 classes.dex (OK - compressed)
Verification succesful
```

コマンドを実行した直下に apk ファイルができているので、これを play ストアにう p すればいい。

[Android においてなぜ zipalign をやる必要があるのか - Qiita](http://qiita.com/kazuqqfp/items/8eae69e309c6ed75d661)

### ストア公開用アイコン&宣伝画像

まず、ストア公開用アイコンと宣伝画像ですね。正直、デザインセンスや画像編集ツール慣れてない身としては、ここが一番コストがかかったとこです。

画像編集ツールはいろいろ試して悩んだ結果。。。

[Keynote](https://www.apple.com/jp/mac/keynote/)が最も使いやすかったので使っています w。
プレゼンテーション用のソフトなんですが、画像編集も便利
です。

アプリのデバイス枠はめ込み画像はこちらで作成できます。

[Device Art Generator | Android Developers](http://developer.android.com/distribute/tools/promote/device-art.html)

### ストア公開用スクリーンショット

続いてはスクリーンショットですが、個人だと手持ちの端末が 1 機種しかないので、タブレットとかの画像がエミュレータで実行したものを利用します。

エミュレータは Genymotion を使っています。

[Genymotion](https://www.genymotion.com/#!/)

導入はこちら。スクリーンショット撮るときに Android Studio の「Android Device Monitor」を使いますので、一緒にセットアップしておきます。

[Genymotion + Android Studio on Mac - Qiita](http://qiita.com/Sam/items/8d551f575b617fa0be7e)

Genymotion 上に作成した apk ファイルをどうインストールするか、少し悩んだのですが、起動した Genymotion のエミュレータに対して apk ファイルをドラッグするとインストールできます。

エミュレータでのスクリーンショットですが、Genymotion から取得する場合は有料プランの機能のようです。  
そこで、下の記事のように Android Device Monitor から実行中のエミュレータをアタッチすることで、スクリーンショットを取得することにしました。

[android emulator - Capture screenshot in GenyMotion - Stack Overflow](http://stackoverflow.com/questions/21771416/capture-screenshot-in-genymotion)

エミュレータが実行されている状態で Android Device Monitor を起動します。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2015/hello-ionic-3-1.png)

実行中のデバイスが表示されるので、「Screen capture」ボタンをクリックします。キャプチャ用の別画面が立ち上がります。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2015/hello-ionic-3-2.png)

> 他に良い方法あれば教えてください。。。

## 公開

で、いろいろ揃えてストア公開しよう！と思ったら。。。

[Google Play デベロッパー コンソール - 基本事項 - Google Play デベロッパー ヘルプ](https://support.google.com/googleplay/android-developer/answer/6112435?hl=ja)

1 回登録すれば OK です。$25 です。あ、はい。

というわけで無事公開できましたー。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2015/hello-ionic-3.jpg)

## 最後に

作るのに 4 日。そこから公開まで 3 日くらいかかりました。  
1 日フルで使えた日はないので、実質はもう少し少ないと思いますが、予想より公開準備の部分のコストが掛かったと思います。  
初期の学習コストだと思うので次回以降は半分くらいになると思いますが。。。

普段やっている Web と違って、アプリの世界は結構大変ですね。

いつもエンジニアとしてアプリの機能を開発していますが、このように 1 から自身の手でやってみると、世の中に出ている素晴らしいアプリを作成する裏側でどれくらいの労力が掛かっているか、実感できてよかったです。

特にデザイン周りでは苦労しましたし、デザインスキルを持っている人は本当に素晴らしい。貴重な才能だなと思います。  
また機会があったら作ってみたいと思います。

ではではー。

Androidアプリ開発初心者がionicでアプリを作って公開するまでの7日間の道のり

2013/10/30 に「[Frontrend x Chrome Tech Talk Night E<span id="goog_1836471854"></span><span id="goog_1836471855"></span>xtended](http://frontrend.github.io/events/chrome/)」が開催され、Addy 氏、Jake 氏、Paul 氏が来日して、最新のモバイル開発のための様々な手法を紹介してくれました。
そこで聞いた内容をもとに、エンタープライズで適用できそうなものを、中立な目線で評価・検証していたのですが、ChromeDevtools のが凄すぎて、終わってみたら ChromeDevtools ばっかり評価・検証していた（おいおい！）という話をします。

ちなみに、Android 開発はほとんどやったことはありません。  
あうあう。



これの記事は[Frontrend Advent Calendar 2013](http://www.adventar.org/calendars/62)の 12 日目の記事です。  
前日の記事は[light Chen さん]・・・まだ書いてない＞＜;  
明日の記事は[[pocotan001 さん]Gist Slides（仮）を作った。 - pocotumblr](http://pocotumblr.tumblr.com/post/69868810750/gist-slides)

## はじめに

（今日は Android と Chrome 限定の話です。）

最近、エンタープライス領域においても、本格的にモバイルへの対応が求められるようになってきました。

あちこちの勉強会などで聞く、Android 開発の現場でのあるある光景として、開発者が背中を小さくして多くの実機でデバックやテストしている姿が挙げられます。それぞれのデバイス間で微妙に操作方法が異なったり、そもそもデバイス自体が操作しにくかったりと、開発者への負担が大きく、時間がかかる作業です。

また、開発以降のフェーズにて「コードを修正して実機にて確認」という一連のイテレーションサイクルを、どれだけ高速で安定した形で回せるかが、エンタープライズでの本格的なモバイル対応の際に、最も重要なポイントの一つだと感じています。

そんな悩みを一気に解決してくれる可能性を秘めているツールの一つが、フロントエンジニアが普段慣れ親しんでいる ChromeDevtools だと思います。
今日は ChromeDevtools で最近追加された、Android 開発が楽になる機能を２つ紹介します。

詳しくは本家のサイトが一番詳しいので参照してください。
[https://developers.google.com/chrome-developer-tools/docs/remote-debugging](https://developers.google.com/chrome-developer-tools/docs/remote-debugging)

## Remote Debugging

Remote Debugging とは、デバイスを USB で接続し、閲覧しているページをローカル PC 上の Chrome Devtools でデバックするできる機能です。Android4.0 以上の端末で有効です。

### Remote Debugging の設定

Remote Debugging を行うためには、まずデバイス側で USB デバックを受け入れる準備が整っていること、ローカル PC 上にデバイスの USB ドライバがインストールされていることが前提条件です。
Google で調べるといろいろ出てきますので、詳しくは紹介しません。
（windows の場合は、USB 接続時にドライバが自動でインストールされないようです。デバイス多い場合、結構泣くと思います。）

まず、デバイスを USB で接続して、ローカル PC 上の Chrome のアドレスバーにて「chrome://inspect」と打ってください。下のような画面が表示されて、接続してあるデバイスが表示されれば準備は OK です。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2013/Screencasting1.png)

### Remote Debugging 使ってみる

実際に Remote Debugging するためには、「inspect」リンクを押せばいいです。非常に簡単です。後は、ローカル PC の Devtools と同じ感覚で操作できます。
例えば、elements タブでスタイルを変更した場合、即座にデバイス側へ反映されます。

さらに、ブラウザのバージョン番号が表示されている横のテキストボックスに URL を入力することで、デバイス側へ表示させてたいページを送ることができ、Remote Debugging と組み合わせることで、ローカル上で開発中の画面をデバイス側でデバックすることができます。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2013/Screencasting2.png)

### Port Forwarding

Port Forwarding とはローカル PC 上の TCP ポートをそのままデバイス側に転送する機能です。具体的にはローカル PC 上で開発している「localhost:9000」など、今まさに開発中の Web ページをデバイス側へ転送して表示させることができます。
（本家のサイトに記載されてますが、ネットワークなどの制限により動作しない場合があるようです。）

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2013/Screencasting3.png)

### Port Forwarding + Grunt + livereload

最近のフロント開発では、「Yeoman+Bower+Grunt」を組み合わせた高速開発手法がトレンドです。中でも[grunt-contrib-watch](https://github.com/gruntjs/grunt-contrib-watch)の「livereload」を使ったコードの変更からブラウザのリフレッシュまでの一連の操作を自動化したものは、今のフロント高速開発を象徴しているものです。

この livereload と Port Forwarding を組み合わせると、ローカル PC 上に USB 接続してあるすべてのデバイスを livereload させることができます。
具体的には次のようにします。

話の都合上、ローカルにて開発中の Web ページの URL が「localhost:9000」とし、livereload 用の Port を「9002」とします。
次のように 9000、9002 ポートを転送するように、Port Forwarding 設定をします。
（livereload のデフォルトポートは 35729 なのですが、Devtools 側が 4 桁ポートしか受け入れてくれないので、9002 にしてます。Devtools チームの皆さんなんとかしてくださーい。）

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2013/Screencasting4.png)

設定が正しく行われると、転送されるポートが画面上で確認できます。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2013/Screencasting5.png)

これで、9002 ポートを経由して livereload ができるようになりました。
コード修正のたびに、デバイスのブラウザをリフレッシュするという手間がなくなりましたね。

## Screencasting

Screencasting とは、デバイスで表示されている画面をローカル PC で閲覧できる機能です。イメージとしては Remote Debugging の Port Forwarding の逆ですね。
これは Chrome のバージョン 31 から追加された機能です。

### Screencasting の設定

（まだ実験的な機能です、将来的には普通に使えるようになると思います。）

Screencasting を使うためには、ローカル PC 上の Chrome のアドレスバーにて「chrome://flags」と打って、実験的な機能が使えるように設定する必要があります。
表示された画面にて、次の２つの機能を有効にしてください。

「デベロッパー ツールのテストを有効にする（#enable-devtools-experiments）」
「USB でリモート デバッグを有効にする。（#remote-debugging-raw-usb）」

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2013/Screencasting6.png)

変更したら、下の方に Chrome を再起動するためのボタンが表示されますので、再起動してください。
そして Devtools の設定画面を開いてみると、見慣れない「Experiments」メニューが表示されるはずです。
そこで「Enable screencast」にチェックをすると準備は OK です。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2013/Screencasting7.png)

### Screencasting を使ってみる

とりあえず、先ほどの Remote Debugging と同じ要領で、デバイスを USB でつないで Remote Debugging してみてください。今度は、Devtools の下の方に見慣れない「□」が表示されているはずです。（ちょっと分かりにくいですが w）
これを押すとデバイスで表示されてるページがローカル PC 上に転送されてきます。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2013/Screencasting8.png)

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2013/Screencasting9.png)

ちなみに、Screencasting された画面では次のことができます。  
素晴らしい！！

- キーボード入力の転送
- クリック
- タップの転送
- スクロールの転送
- ズームやリサイズの転送
- Devtools 上での操作を転送

## まとめ

Chrome の Devtools に追加された 2 つの機能。
Remote Debugging と Screencasting。非常に強力でしたね。これらを組み合わせることでデバイスを操作することなく「コード修正から確認」まで行うことができ、開発時のイテレーションを速くまわすことができそうです。

個人的には、Screencasting での livareload を試してみましたが、他にもスクリーンショットやスクロールの同期など、デバイス間のリアルタイム連動が Devtools 上でできるともっと開発が楽になると思いました。

また、世の中には Android 開発をサポートする OSS や Web サービスが多数ありますが、Devtools 上に同じ機能が取り込まれてしまうと、差別化が難しいですね。
エンタープライズで導入を検討する際は、少し頭の片隅に入れておいたほうが良さそうです。

さくっと livereload 体験してみたい方は、こちらにサンプルが動かせるリポジトリ準備しましたので、ローカルに clone して動かしてみてください。

[https://github.com/mitsuruog/awesome-chrome-devtools](https://github.com/mitsuruog/awesome-chrome-devtools)

### 謝辞

最後に、この内容は 2013/10/30 にサイバーエージェントで開催された「[Frontrend x Chrome Tech Talk Night Extended](http://frontrend.github.io/events/chrome/)」で聞いた内容を元にしています。

本当にサイバーエージェントの Frontrend の方々、最高です！！
ありがとう！！

Tag: android

react-nativeでNative moduleを呼び出す(Android編)

Androidアプリ開発初心者がionicでアプリを作って公開するまでの7日間の道のり

Androidやってる人でChromeDevtoolsのRemote DebuggingとScreencasting知らない人は使ってみた方がいいよ！