Electronでツイートするところまで最速でやる

  • 90
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

ElectronでTwitterクライアント作る話良く聞くので何も考えずにツイート出来るまでやる。

事前準備

  • Node.js
  • Twitterアプリ申請(キー4つ)

ElectronでHello World!

$ git clone https://github.com/atom/electron-quick-start
$ cd electron-quick-start
$ npm install && npm start

スクリーンショット 2016-02-21 23.56.57.png
起動した

ツイート出来るようにする。

$ npm install twitter
main.js
const Twitter = require('twitter');
const twitterClient = new Twitter({
  consumer_key: 'P',
  consumer_secret: 'I',
  access_token_key: 'Y',
  access_token_secret: 'O'
});

...

ipc.on('tweet', function(event, arg){
  twitterClient.post('statuses/update', {status: arg},  function(error, tweet, response){
    if(error) return mainWindow.webContents.send('tweet-res', '失敗');
    mainWindow.webContents.send('tweet-res', 'だん');
  });
});

これでレンダラプロセスから

ipc.send('tweet', 'ぴよぴよ');

とかでツイート出来るようになった。
ちなみに今回tweetメッセージのやり取りは非同期で行うように実装したけれど、

var response = ipc.sendSync('tweet', '同期');

とかくとシンプルになる。
でもレスポンスが帰ってくるまでブロック状態になるのでよくない。

投稿画面(レンダラプロセス側)を作る

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>ついったするやつ</title>
    <script type="text/javascript" src="index.js"></script>
  </head>
  <body>
    <textarea id='tweet-box'></textarea>
  </body>
</html>

jqueryはよしなにする。

index.js
const $ = require('./jquery.js');
const ipc = require('ipc');
$(function(){
  ipc.on('tweet-res', function(arg) {
    alert(arg);
    if(arg == 'だん') $('#tweet-box').val('');
  });

  $( '#tweet-box' ).keypress( function ( e ) {
    if ( e.which == 13 ) {//Enterキーが押された時
      ipc.send('tweet', $(this).val());
        return false;
    }
  });
});

完成

スクリーンショット 2016-02-22 0.36.47.png
スクリーンショット 2016-02-22 0.36.58.png
ちゃんとツイート出来てる。