Atomエディタを開発するために作られたアプリケーション開発フレームワークのElectronを使うと比較的容易にクロスプラットフォームのデスクトップアプリを作成できます。練習としてTwitterのpublic streamを受信するサンプルを作成してみたので手順をまとめました。
事前準備
TwitterのAPIキーを取得します。詳しくはこちらなどを参照してください。以下のキーが必要になります。
- Consumer Key
- Consumer Secret
- Access Token
- Access Token Secret
Electronのインストール
$ 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キーを入力します。
'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 をtwelec
ディレクトリにダウンロードして保存しておきます。
index.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
// 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 .
以下の様な画面でツイートが流れていくはずです。
最大表示件数の処理などはしていないので、放置していると多分落ちます。そこはよしなにご対応ください。