kimonoを使ってYASPからMMRを取得し、はてなブログのサイドバーに表示する
この記事に書かれてある内容は現在使えません
代わりに、次の記事を参照してください
YASPの開発はオープンソースプロジェクトとして行われていて、寄付によるお金のみ*1資金で運営されています。
Dotabuffでは自分のIDでログインしていなければMMRは表示されませんが、YASPではMMRを表示する設定を行えば常に公開情報としてMMRが表示されるようになります。
これを利用して、今回ははてなブログのサイドバーに自分のMMRを表示させてみることにします。
YASPでMMRをトラッキングする
Dotabuffと同様に、Steam IDを利用したサインインでログインを済ませた後、自分のYASPプロフィールページのRatingタブを開き、ADD A TRACKER（MMR情報を収集するBOT）をSteamフレンドに追加することでMMRのトラッキングを開始することができます。
kimonoでMMRを取得するAPIを作成する
次に、kimonoという簡単にAPIを作成するWebサービスを利用して、自分のMMRを取得するAPIを作成します。
まず、https://www.kimonolabs.com/の右上にあるSign Upからkimonoへの登録を済ませます。
次に、https://www.kimonolabs.com/learn/getstartedのページが表示されるので、ブックマークレットをブラウザのお気に入りにドラッグアンドドロップして追加します（この際、お気に入りバーに追加すると呼び出しやすく便利でしょう）。
ブックマークに追加できれば、後は自分のYASPのページを開き（私の場合はhttp://yasp.co/players/85275184になります）、kimonifyブックマークレットをクリックします。
すると、このような黒い説明の書かれた画面が表れるので、説明を読んだ上で左上のCloseを押して閉じます。
次に、説明に従いプロパティ名をsoloMMRと設定した上で、Solo MMRに該当する箇所をクリックします。Solo MMRについての登録が終われば、＋ボタンを押してParty MMRについても同じようにプロパティを追加しましょう。
そして、右上の本のアイコンをクリックし、データのコレクション名をmmrに設定します。
最後に、右上のDoneを押し、API名（例ではMMRとしています）・データ取得の頻度（負荷を掛けないように、ここではDailyに設定します）を設定し、Create APIを押せばあなたのMMRを取得するAPIが完成します。
同様に、kimonoを使うことで、自分の試合履歴を取得するAPIや大会の試合結果を取得するAPIを作成するも可能でしょう。
実際にAPIを使ってみよう
早速、完成したAPIを用いてはてなブログのサイドバーにMMRを表示させてみましょう。
はじめに、jQueryを読み込む設定をします。はてなブログの「設定」→「詳細設定」内の「headに要素を追加」の部分を、
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
と設定します。
次に、「デザイン」→「カスタマイズ」→「サイドバー」→「モジュールを追加」で、タイトルを「MMR」（このタイトルはサイドバーで見出しとして使用されます）、モードをHTML、内容を
<div id="my_mmr"> Solo MMR: <span style="font-weight: bold;" class="solo-mmr"></span><br> Party MMR: <span style="font-weight: bold;" class="party-mmr"></span> </div> <script> $(function(){ var KIMONO_API_ID = "<ここにAPIのIDを記入します>"; var KIMONO_API_KEY = "<ここにAPIのキーを入力します>"; $.getJSON("https:\/\/www.kimonolabs.com/api/" + KIMONO_API_ID + "?apikey=" + KIMONO_API_KEY + "&callback=?", function(data){ // 自動でURLが<a href="...">...</a>に書き換えられてしまうのでエスケープしている var mmr = data.results.mmr[0]; $("#my_mmr .solo-mmr").text(mmr.soloMMR); $("#my_mmr .party-mmr").text(mmr.partyMMR); }); }); </script>
と設定し、適用をクリックしてモジュールを追加します。
お疲れ様でした。これで、はてなブログにあなたのMMRを表示させることができるようになりました。
Kimonoの料金について
Free Planでは、
Unlimited APIs*
- Run your APIs on a schedule or on demand
- Crawl one page or up to 10,000 with a single API
- Access your data in standard formats JSON/CSV/RSS Email alerts and webhooks
Access to the past 30 days of historic data
とあるので、今回の要件では問題なく使うことができるはずです。
*1:Source 2対応と同時に広告の表示を完全に撤廃
