前書き
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というライブラリを使っています。
詳しくコードを見ていきましょう。
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を使いました。
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 神。