研究室でお菓子を管理するボタンをタブレットで作った話（技術的な話）

こんにちは！

ぱそきいろぱそきいろ (@takacpu55) | Twitterです！

今日はこの前投稿した，お菓子ボタンの技術的な話についてもう少し掘り下げていきたいと思います．

www.blog.takacpu55.xyz

分かりにくいところ等ありましたら，ツイッターやコメントで連絡お願いします．

それではいきます！

目次

フロントエンド

 このタブレット画面はBootstrapで作ってます．

Bootstrapの特徴としては，レスポンシブなサイトが気軽に作れるということが挙げられます．

また，グリッドシステムがあるため，センスがなくてもおしゃれなサイトが作れるところがありがたいです．

getbootstrap.com

Bootstarpは気軽に作れることから，ハッカソンで使うことも多いみたいですね！

ハッカソンって何？って人は下のページもぜひ見てください！

私はまだハッカソンでは使ったことがないのでそのうち使ってみたいです．

www.blog.takacpu55.xyz

httpリクエスト

これはBootstrapのボタンが押されるとJavaScriptでhttpリクエストを送信するようにしています．

下にあるようなSlack api を指定して送信します．

httpリクエストを送信する関数のコードは以下のような感じです！

OnButtonClickの引数で送信したいお菓子の名前を挿入します．

function OnButtonClick(a){
    var url="Slack URL";

    var request = new XMLHttpRequest();

    var datatemp=a;

    var data='{"text":"'+datatemp+'"}';
    request.open('POST', url);
	request.onreadystatechange = function () {
	    if (request.readyState != 4) {
		// リクエスト中
	    } else if (request.status != 200) {
		// 失敗
		alert("bad");
	    } else {
		// 送信成功
		// var result = request.responseText;
	    }
	};
	request.send(data);
    if(a==1){
	alert("foo");
    }
}

Slack api

こちらはあらかじめ取得しておく必要があります．
取得の方法は以下を参考にしました．
注意が必要なのは，この記事から画面が少し変更されていたということです．
（大まかな流れはあまり変わらないのですが）
また，私はSafariを使っているのですが，最後のトークン取得の場面でうまくいかず，Chromeを使ったら上手くいきました．
もしダメでもブラウザを変えると上手くいくみたいです．
同じような症状が出た人はぜひメッセージください．

qiita.com

まとめ

以上がお菓子ボタンの技術的な話でした．
簡単に作った割には実用性が高く，技術的にも面白い要素が多かったので，作ってよかったと思います．
では，ありがとうございました！