自分が欲しかったChromeの拡張機能を作りました。
着想
一日中室内にいると外の天気の事が全然分からないので、気になった時にさっと見られるものがあったらいいなーと思いました。
（オフィスで窓から離れた席に座っている時なんかに便利）
課題
作成するにあたって満たしたい条件は以下
- 1. なるべく操作しないで使える事
- 2. なるべくピンポイント且つリアルタイムな気象情報が得られる事
- 3. なるべく色々な人が使える事
方法
天気の情報は、ブラウザに常駐する拡張機能のアイコンを変えることで表示します。
気象情報はOpenWeatherMapのAPIを利用します。
現在地の情報は郵便番号で設定します。
GeoLocationAPIもありますが、精度の問題があったり、そもそもずっと室内にいる人がターゲットだったりするので却下。
入力した郵便番号は、OpenWeatherMapに渡す際に緯度経度に変換する必要があるので、ここにはGoogleMapsAPIを利用します。
処理の流れは下図のようになります。
エラー処理も入れてありますが今回は省略します。
理論上はAPIがカバーしている範囲であれば、国内外を問わず機能するはずです。
実装
Chromeの拡張機能を作成するには、まずマニフェストファイルを用意する必要があります。
設定項目は大量にありますが、Requiredはそれほど多くないです。
今回は以下のようにしました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
{ "manifest_version": 2, "name": "ame-furu", "short_name": "ame-furu", "description": "郵便番号から、その地点の現在の天気をお知らせします。", "version": "1.0.2", "icons": { "16": "icons/16x16.png", "48": "icons/48x48.png", "128": "icons/128x128.png" }, "background": { "scripts": ["js/zepto.js", "js/function.js"] }, "browser_action": { "default_icon": "icons/failed.png", "default_title": "ame-furu", "default_popup": "popup.html" } } |
Chromeの拡張機能は目的によって2種類に分かれています。
①ページアクション
アドレスバー内の右端にアイコンが表示されるもの。
指定した条件に合うページを表示した際に実行されます。
（minifyされたJSONファイルを開いた時に整形してくれたり。）
②ブラウザアクション
アドレスバーの右側にアイコンが表示されるもの。
ページアクションとは違い、ブラウザに常駐させて機能を追加できます。
今回はブラウザ常駐型の機能なので、ブラウザアクションを選択します。
マニフェストファイルを作成したら、中身を作っていきます。
拡張機能はHTML/CSSで見た目を、JavaScriptで仕組みを作ります。
このへんはWebページと同じですね。
拡張機能のアイコンをJavaScriptから変更するには、ChromeExtentionsのAPIを利用します。
今回はOpenWeatherMapAPIを叩いて、返ってきた値に応じてアイコンを変えます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
function getWeather() { clearTimeout(timer); if ( localStorage['zipcode'] == '' ) { chrome.browserAction.setIcon({path:'icons/failed.png'}); } $.ajax({ type: 'get', url: 'http://api.openweathermap.org/data/2.5/weather?lat=' + localStorage["lat"] + '&lon=' + localStorage["lng"], dataType: 'JSON', success: function(data) { data = $.parseJSON(data); var weather = data.weather[0].id; if ( weather >= 200 && weather < 300 ) { chrome.browserAction.setIcon({path:'icons/thunder_storm.png'}); } else if ( weather >= 300 && weather < 400 ) { chrome.browserAction.setIcon({path:'icons/drizzle.png'}); } else if ( weather >= 500 && weather < 600 ) { chrome.browserAction.setIcon({path:'icons/rain.png'}); } else if ( weather >= 600 && weather < 700 ) { chrome.browserAction.setIcon({path:'icons/snow.png'}); } else if ( weather >= 700 && weather < 800 ) { chrome.browserAction.setIcon({path:'icons/atmosphere.png'}); } else if ( weather >= 800 && weather < 803 ) { chrome.browserAction.setIcon({path:'icons/clear_sky.png'}); } else if ( weather == 803 ) { chrome.browserAction.setIcon({path:'icons/scatterd_clouds.png'}); } else if ( weather == 804 ) { chrome.browserAction.setIcon({path:'icons/overcat_clouds.png'}); } else if ( weather >= 900 && weather < 1000 ) { chrome.browserAction.setIcon({path:'icons/additional.png'}); } else { chrome.browserAction.setIcon({path:'icons/failed.png'}); } }, error: function() { chrome.browserAction.setIcon({path:'icons/failed.png'}); } }); setTimeout( function() { getWeather(); } , 1000 * 60 * 10); } |
これで拡張機能は完成です。
公開
拡張機能を公開するには、Chromeウェブストアに開発者登録をする必要があります。
その際手数料として5ドル支払います。
無事登録が完了したら、あとは作成したファイルをアップするだけです。
スクリーンショットを付ける事も出来るので用意します。
今回は公開ボタンを押してから1時間足らずで検索に引っかかるようになりました。
このあたりのスピード感はさすがGoogleです。
というわけで、Chromeウェブストアで配信中です。
『ame-furu』
https://chrome.google.com/webstore/detail/ame-furu/bialojlhfhjpiapnjbbegkkglligigaf
