概要
MESHでtoggl APIを叩きたかったんだけど、デバッグが大変やったので、ローカルでHTMLとJavaScriptに処理書いてChrome使って確認した。
Allow-Control-Allow-Originっての設定するのと、ajaxの細かいお作法？があったので、結構つまづいた。試行錯誤しながらがんばった。
toggl API
toggl APIの詳細は下記サイト参照。詳しく書いてある。
toggl_api_docs/toggl_api.md at master · toggl/toggl_api_docs · GitHub
tokenはtogglの設定から見れる。一番した。プロジェクトのIDは下の画面みたいなところでURLみたらわかる。
curlで確認
こんな感じで確認。
hogehogeのところにapi_tokenの文字列入れてfugafugaのところにプロジェクトIDの数字をいれる。
curl -u hogehoge:api_token -H "Content-Type: application/json" -d '{"time_entry":{"description":"Meeting with possible clients","tags":[],"pid":fugafuga,"created_with":"curl"}}' -X POST https://www.toggl.com/api/v8/time_entries/start
事前準備
ローカルでやると、「デベロッパーツール」に
No 'Access-Control-Allow-Origin' header is present on chrome
っていうエラーが出て動かない。
ローカルでやるためには、こんなんを入れてあげないといけないっぽい。
Allow-Control-Allow-Origin: * - Chrome ウェブストア
HTML+JavaScript
こんな感じ。これをローカルにおいてChromeで開くだけで、togglのタイマーがスタート。凄くシンプル。ベーシック認証やら、JSON.Stringifyやら、色々調べて試行錯誤した結果こうなった。調べると他にも方法ありそうやけど、なんか試した感じだとこれ以外動かなかった。
console.logをlogに置き換えて、$.ajaxをajaxにしてMESHで動かした。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery test</title>
</head>
<body>
Body!!
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
var username = 'hogehoge';
var password = 'api_token';
function make_base_auth(user, password) {
var tok = user + ':' + password;
var hash = btoa(tok);
return "Basic " + hash;
}
$.ajax
({
type: "POST",
url : "https://www.toggl.com/api/v8/time_entries/start",
contentType : "application/json",
data : JSON.stringify({
"time_entry" : {
"description" : "description",
"tags" : [],
"pid" : fugafuga,
"created_with" : "test",
}
}),
beforeSend: function (xhr){
xhr.setRequestHeader("Authorization", make_base_auth(username, password));
},
timeout : 5000,
success: function (){
console.log("Post success");
},
error : function ( request, errorMessage ) {
console.log("Network error");
}
});
</script>
</body>
</html>
API叩いたときの返事は、Chromeの「デベロッパーツール」の「Network」の「Response」を見たら帰ってきたjson形式のデータを見れる。デバッグもデベロッパーツール使えば、MESH使うより色々情報見れる。
こんな感じ。
MESH
こっち参照。
MESH動きタグとtogglで時間管理 - Qiita