LoginSignup
34

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-11-01

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.jstwelecディレクトリにダウンロードして保存しておきます。

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 .

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

Screen Shot 2015-11-01 at 2.46.58 PM.png

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
34