##前置き
2週間とちょっと前に社内で開発合宿ということで1泊2日で何か作ってました(といっても実際に取り掛かった時間は6時間程度ですが)。
そこで先輩と一緒に作ったものの(私の)恥ずかしいコードを晒しつつ軽い解説を。
ソースはここに置いております。
今もいじってるので結構あれです。
##内容
###何を作ったか
チャットワークに何曜日の何時に投稿してくれる〜的なやつです。
テーマが業務改善だったので会社で皆使っている(うっかり開いてなかったら叱られるレベルで・・・)チャットワークのAPIを使って始業時間になったら「朝礼しろー」や週末だと「週報提出しろー」とか知らせようという目的でやることにしました。
実際には業務改善というより癒やしキャラみたいになっております。
###使用環境
そもそも共同開発で作ることはあまりなかったので何で作るかは少し悩みました。
結局やりたいことはそんな難しくないし冒険してみようかという感じで動画でインパクトのあるMeteorを使うことにしました。
処理の流れとしては
フォームから投稿→投稿した内容を下に一覧で表示
指定した時刻になったらチャットワーク上に投稿するというシンプルなものです。
##コード
###フォーム、投稿一覧部分
フォーム部分はルームID、投稿内容、投稿日時の指定です。
登録部分はPOSTせずに下のような感じで直接DBに突っ込んでます。
ざっくりと書きたいのでhtml部分は省略します。
Template.send.events({
'click #submit': function (e) {
var insert = {
room_id:$('#room_id').val(),
content:$('#content').val(),
post_week:[],
created: new Date()
};
var post_time = $('#post_time').val().split(':');
if(post_time.length !== 2) return;
insert.post_hour = post_time[0];
insert.post_minites = post_time[1];
var checked = document.querySelectorAll('paper-checkbox[name="post_week"][checked]').array();
checked.forEach(function(e) {
insert.post_week.push(e.title);
});
for(var i in insert) {
if(insert[i] == '') return;
}
Message.insert(insert);
$('.inputform').val('');
checked.forEach(function(e) {
e.checked = false;
});
document.querySelector('#registToast').show();
}
});
クライアント側から直接DB操作するとかセキュリティとかあったものじゃないですがこういった場で軽く組み上げたりとかだと素早く作れていいですね。
一覧部分はこんな感じです。魔法を使ってるような感覚でした。
Template.messages.messages = function() {
var message = Message.find({post_week: String(Session.get("current_date"))}, {
sort:{ created: -1 }
});
reload();
return message.map(function(model){
if('post_week' in model) {
var week = '';
for(var i in model.post_week) {
switch(model.post_week[i]) {
case '0':week +=' 日曜日';break;
case '1':week +=' 月曜日';break;
case '2':week +=' 火曜日';break;
case '3':week +=' 水曜日';break;
case '4':week +=' 木曜日';break;
case '5':week +=' 金曜日';break;
case '6':week +=' 土曜日';break;
}
}
model.post_week = week;
}
if('content' in model) {
model.content = model.content.replace(/[\n\r]/g, '<br />');
}
return model;
});
};
Sessionに曜日を登録しておいてタブの選択等で曜日が書き換わったら一覧の中身も勝手に変わります。楽な仕事だ・・・。
取得したデータは専用のメソッドを使って操作するみたいです、直接いじろうとしてびびりました。
表示されたときや変更があった後にごちゃごちゃしてみたかったのですがうまくいきませんでした。近いうちに再チャレンジしたいです。
###チャットワークへの自動投稿
登録した時間と同じかどうかみてチャットワークに投稿してます。(この辺あまり関わってないからざっくり度アップ)
Meteor.startup(function () {
var next = function() {
console.log(process.env.TZ);
var seconds = new Date().getSeconds();
return (60 - seconds) * 1000;
};
var postCheck = function() {
var reservedPosts = getReservedPosts();
reservedPosts.forEach(function(msg){
postMsgToChat(accessToken, msg.room_id, msg.content);
});
Meteor.setTimeout(postCheck,next());
};
Meteor.setTimeout(postCheck,next());
});
1分おきに投稿データがあるかどうかチェックします。
この辺でいっさい待たずに実行するようにしたら起動した瞬間物凄いエラーでました。怖かったです。
投稿もHTTP.post
を使ってさくっとやってます。シンプル。
##感想
###良かった点
- どの名称でデータの保存をするか決めたら後は完全に分かれて作業できました。完全に分業サクサクでした。
- Meteorの魅力が結構伝わった気がする。一番は自分に。
###課題・反省点
- もっとこう役にたつような例の一つや二つ考えとけばよかった・・・
- ルームIDはセレクトボックスか何かで選択できるようにしないと入力がめんどくさすぎる・・・