前書き

twitterはメモ帳？は？頭おかしいなこいつ。

と、思った方。よくタイムラインを眺めてみてください。

時々見るハッシュタグでさかのぼれるようにして、自分の個人的なメモをつぶやく人を！

今、「あ、俺や。」となった人もいるでしょう。

でも、そのツイートを実際、見返しているでしょうか。

忘れるからtwitterを使いメモをしているのに、そのメモのツイートすらも忘れるのが人間です。

と同時に、そのメモを見るためだけにTwitterを開くのも面倒くさい時があると思います。

僕は、ツイートしても忘れる派の人間なので、もっとメモを管理しやすくしたいと思いました。

自己紹介

Twitter @konojunya

じゅんじゅんというニックネームで、関西を拠点に活動しているフロントエンドエンジニアです。

HAL大阪の新2回生です👍 (2016.5.7現在)

よくstart up系イベントに行くので、大阪らへんの方は会いましょう！

では、早速。

TwiMemo

そこで作ったのがこちら！

「Twitterに特定のハッシュタグをつけてつぶやくことで、WEBアプリにストックされていく」というものです。

製作時間は3時間ほどで、Twitter Stream APIでハッシュタグをもとにツイートを取得→milkcocoaへpush→WEBアプリでstream()を使い取得。

本当に単純な構造ですね。

フロントエンドエンジニアなので、少しWEBアプリ側にこだわりを入れました。

このように、iphoneで、ホーム画面に追加すると単体のアプリのように動作してくれます。

iconも自作のものをつけているので、良ければ使ってみてください！

タスクには、touchendイベントをバインドしていて、打ち消し線を追加してみたり、headerをしたにスライドすると、更新できたりします。

なお、サーバサイドはNodeで書いていて、Twitというライブラリを使っています。

詳しくコードを見ていきましょう。

twimemo.js

var milkcocoa = new MilkCocoa('あなたのmilkcocoa id'); //milkcocoaのid
var ds = milkcocoa.dataStore('memo'); //memoというデータストアを登録します。
var userTimeLine = twitter.stream("statuses/filter",{track: '#じゅんメモ'});//じゅんメモというハッシュタグでツイートを検索します。
var text;
userTimeLine.on("tweet",function(tweet){
  if(tweet.user.screen_name == TwitterName){//発信元が自分のIDである場合にのみpushするようにします。今後、サブアカウントを追加するとかになった場合に、ifの方が拡張しやすいです。
    text = tweet.text.replace(/#じゅんメモ/,"");//タスク本文だけを正規表現で抜き取ります。
    ds.push({memo: text,done: false});//memoにタスクを、doneはwebアプリ内で使う値になっています。
  }
});

今回は、フロントエンドにフレームワークを使っていません。ライブラリにjQueryを使いました。

main.js

var milkcocoa = new MilkCocoa('あなたのmilkcocoa id');//フロントでもインスタンスを生成します。
var ds = milkcocoa.dataStore('memo');
function readMemo(){
  $(".item").remove(); //タスク１つ１つにitemというクラスをつけています。
  ds.stream().next(function(err, data){
    data.forEach(function(item){
      if(item.value.done){ //doneがtrueのものはもう出来ているので、データストアから消します。
        ds.remove(item.id);
      }else{
        el = '<li class="item" name="'+item.id+'">'+item.value.memo+'</li>'; //doneがfalseのままのものを追加していきます。
      }
      $("#memo").append(el);
    });
  });
}
readMemo();
ds.on('push', function() {
  readMemo(); //pushがあれば先ほどの関数を読みます。
});

コードの全貌はhttps://github.com/konojunya/TwiMemoにあります！

twitterみたいな僕の生活時間の4割を占めそうなものを活用できたら、より便利になるな〜と思いました。

まぁ最後に言えることは、milkcocoa is 神。

Twitterはメモ帳

前書き

自己紹介

TwiMemo