Electronでtwitterのpublic streamを表示させる

Atomエディタを開発するために作られたアプリケーション開発フレームワークの[Electron](http://electron.atom.io/)を使うと比較的容易にクロスプラットフォームのデスクトップアプリを作成できます。練習としてTwitterのpublic streamを受信するサンプルを作成してみたので手順をまとめました。

## 事前準備

TwitterのAPIキーを取得します。詳しくは[こちら](https://syncer.jp/twitter-api-matome)などを参照してください。以下のキーが必要になります。

- Consumer Key
- Consumer Secret
- Access Token
- Access Token Secret


## Electronのインストール

```shell
$ npm -g install electron-prebuilt
```

## プロジェクトの作成

適当な名前のフォルダを作成します。今回は `twelec` とします。

```
$ mkdir twelec
$ cd twelec
$ npm init -y
$ npm install twitter --save
```

## Main Process (backgroundプロセス) のJavaScriptを作成する

`index.js` という名前のファイルを作成して、以下のようにします。`YOUR_...` というところについては各自で取得したAPIキーを入力します。

```js
'use strict';

var app = require('app');
var BrowserWindow = require('browser-window');
require('crash-reporter').start();


// main process(backend)とrenderer process(foreground)の通信用モジュール
var ipc = require('ipc');

// Twitterユーザストリーム受け取り用モジュール
var twitter = require('twitter');
var client = new twitter({
  consumer_key: 'YOUR_CONSUMER_KEY',
  consumer_secret: 'YOUR_CONSUMER_SECRET',
  access_token_key: 'YOUR_ACCESS_TOKEN',
  access_token_secret: 'YOUR_ACCESS_TOKEN_SECRET',
});

var 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.openDevTools(true);

  // Twitterクライアントのストリームを開く
  client.stream('statuses/sample',   function(stream){
    stream.on('data', function(tweet) {
      // tweetをうけとるたびにフロントエンドへ送信する
      mainWindow.webContents.send('tweet', JSON.stringify(tweet));
    });

    stream.on('error', function(error) {
      console.log(error);
    });
  });

  // closedイベントをキャッチしたらBrowserWindowオブジェクトを消す
  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});
```

## Renderer Process (frontend, Webページ側) を用意する

以下のとおりファイルを用意します。また別途 [jquery-2.1.4.min.js](http://code.jquery.com/jquery-2.1.4.min.js) を`twelec`ディレクトリにダウンロードして保存しておきます。

### index.html

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Twitter Public Stream</title>
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
    <h1>Twitter Public Stream</h1>
    <div id="tweet_disp">
    </div>
  </body>
</html>
```

### script.js

```js
// jqueryの読み込み
var $ = jQuery = require("./jquery-2.1.4.min.js");

// renderer process側でもipcモジュールを読み込み
// renderer processからmain processに通信したい場合は ipc.send などを使う
var ipc = require('ipc');

$(function(){
  // "tweet" channelからメッセージを読み込む
  ipc.on('tweet', function(arg) {    
    // 文字列のメッセージをJSONパースする
    var tweet = JSON.parse(arg);
    // pタグ追加
    $('#tweet_disp').prepend('<p id="tw_' + tweet.id_str + '"></p>');
    // テキスト書き込み
    $('#tw_' + tweet.id_str).text(tweet.text);
  });
});
```

この時点で`twelec`ディレクトリ以下には、下記のファイルが存在しているはずです。

```
index.html
index.js
jquery-2.1.4.min.js
node_modules/
package.json
script.js
```

## Electronを実行する

インストールが正しく完了していれば以下のコマンドでElectronが起動します。

```
$ electron .
```

以下の様な画面でツイートが流れていくはずです。

<img width="912" alt="Screen Shot 2015-11-01 at 2.46.58 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/27627/0ced6f99-163d-bf1b-1ccf-f63a6903fb42.png">

最大表示件数の処理などはしていないので、放置していると多分落ちます。そこはよしなにご対応ください。