天気予報ブログパーツ(API)&jQueryプラグイン

jQuery plugin for Japan weather forecast

日本国内の天気予報を表示するブログパーツ(API)とjQueryプラグイン、天気記号のウェブフォントを公開します。使用はもちろん無料です。
ブログパーツとjQueryプラグインではLivedoor Weather HackおよびGoogle Feed APIを利用しています。jQueryはGPLライセンスです。いずれもSSL対応なので、httpsのサイトでもご利用いただけます。
PCではIE9~11・Firefox・Chrome・Safari、スマートフォンではiOSのSafari・Android標準ブラウザで動作確認済みです。

2015年10月7日に、ブログパーツとしてもリリースしましたので、一部追記しています。

ブログパーツとしての利用方法が1つ、jQueryプラグインとしての利用方法が2つ、計3種類の利用方法があります。

利用方法1 天気予報ブログパーツ

ブログやホームページににコードを貼るだけで、天気予報を表示できます
  • 下のエディターでエリア・表示方法・デザインを設定してください。
  • エディターの下にある「ブログパーツのコードを取得」ボタンをクリックしてコードをコピーしてください。
  • ブログやホームページなどで、天気予報を表示したい場所にコードを設置してください。
広告
縦横
対象
preview
    プレビューサイズ
    プレビュー背景色

    気に入っていただけましたら、このツールをどこかで紹介していただけますと嬉しいです。

    広告

    利用方法2 天気予報jQueryプラグインPack

    jQueryプラグインを手軽に利用できます

    2015年12月8日 Google Feed APIが終わってなくて復活しているようなので提供を再開しました。

    • エディターでエリア・表示方法・デザインを設定してください。
    • エディターの下にある「jQueryプラグインをダウンロード」ボタンをクリックしてzipファイルをダウンロードしてください。
    • zip内にあるreadme.txtを参考に設定し、サーバーに解凍したファイルをアップロードしてください。

    利用方法3 天気予報jQueryプラグイン(手動設定用)

    jQueryプラグインのファイルをダウンロードし、カスタマイズして利用できます

    2015年12月8日 Google Feed APIが終わってなくて復活しているようなので提供を再開しました。

    mamewaza_weather
    Javascript・CSS・ウェブフォントのセット
    • 上のzipファイルをダウンロードしてください。
    • 以下のファイルが必須です。これらをアップロードしてください。
      mamewaza_weather.css
      mamewaza_weather.eot
      mamewaza_weather.min.js
      mamewaza_weather.svg
      mamewaza_weather.ttf
      mamewaza_weather.woff
      css内のfont-faceで、ウェブフォント(.eot/.svg/.ttf/.woff)を同一フォルダ内で指定しているので、別フォルダに入れる場合はcss内のパスを変更してください。
    • 天気予報を表示させたいページで、2でアップロードしたJavascriptを設置してください。 
      <script type="text/javascript" src="./mamewaza_weather/mamewaza_weather.min.js"></script>
    • $.mamewaza_weatherを以下のように実行してください。 
      $.mamewaza_weather( {
          selector: "天気予報を設置したい要素のセレクター",
          region:天気予報の6桁の地域コード(下の地域コード表参照),
          layout:"レイアウト(vertical|verticalMini|verticalMicro|horizontal|horizontalMini|horizontalMicro)の6択",
          when:"表示対象範囲(7days|weekend|1day|2days)の4択",
          explanation:説明有無(boolean),
          cssPath:mamewaza_weather.cssへのパス
      } );
    • 出力されるHTMLは下記のようになるので、任意でデザインを適用してください。 
      <div id="mamewaza_weather" class="mamewaza_weather">
          <div>
              <table class="mamewaza_weather">
              <tbody>
                  <tr>
                      <td>10<span class="mamewaza_weather_small">金</span></td>
                      <td><span class="mamewaza_weather_icon">アイコン</span><br />
                          <span class="mamewaza_weather_small">曇り</span></td>
                      <td>23 ~ 30<span class="mamewaza_weather_small">℃</span></td>
                  </tr>
                  <tr>
                      <td class="mamewaza_weather_sat">11<span class="mamewaza_weather_small">土</span></td>
                      <td class="mamewaza_weather_sat"><span class="mamewaza_weather_icon">アイコン</span><br />
                          <span class="mamewaza_weather_small">曇時々晴</span></td>
                      <td class="mamewaza_weather_sat">23 ~ 29<span class="mamewaza_weather_small">℃</span></td>
                  </tr>
                  <tr>
                      <td class="mamewaza_weather_sun">12<span class="mamewaza_weather_small">日</span></td>
                      <td class="mamewaza_weather_sun"><span class="mamewaza_weather_icon">アイコン</span><br />
                          <span class="mamewaza_weather_small">曇時々晴</span></td>
                      <td class="mamewaza_weather_sun">24 ~ 31<span class="mamewaza_weather_small">℃</span></td>
                  </tr>
              </tbody>
              </table>
              <div class="mamewaza_weather_exp" style="display:block !important;visibility:visible !important;position:static !important;">
                  説明
                  <a href="http://weather.livedoor.com/area/forecast/" target="_blank">livedoor 天気情報</a>
                  <span class="memewaza_asscembled">assembled by<a href="http://mamewaza.com/" target="_blank">まめわざ</a></span>
              </div>
          </div>
      </div>

    地域コード表

    道北稚内011000
    旭川012010
    留萌012020
    道央札幌016010
    岩見沢016020
    倶知安016030
    道東網走013010
    北見013020
    紋別013030
    根室014010
    釧路014020
    帯広014030
    道南室蘭015010
    浦河015020
    函館017010
    江差017020
    青森県青森020010
    むつ020020
    八戸020030
    岩手県盛岡030010
    宮古030020
    大船渡030030
    宮城県仙台040010
    白石040020
    秋田県秋田050010
    横手050020
    山形県山形060010
    米沢060020
    酒田060030
    新庄060040
    福島県福島070010
    小名浜070020
    若松070030
    東京都東京130010
    大島130020
    八丈島130030
    父島130040
    神奈川県横浜140010
    小田原140020
    埼玉県さいたま110010
    熊谷110020
    秩父110030
    千葉県千葉120010
    銚子120020
    館山120030
    茨城県水戸080010
    土浦080020
    栃木県宇都宮090010
    大田原090020
    群馬県前橋100010
    みなかみ100020
    山梨県甲府190010
    河口湖190020
    新潟県新潟150010
    長岡150020
    高田150030
    相川150040
    長野県長野200010
    松本200020
    飯田200030
    富山県富山160010
    伏木160020
    石川県金沢170010
    輪島170020
    福井県福井180010
    敦賀180020
    愛知県名古屋230010
    豊橋230020
    岐阜県岐阜210010
    高山210020
    静岡県静岡220010
    網代220020
    三島220030
    浜松220040
    三重県240010
    尾鷲240020
    大阪府大阪270000
    兵庫県神戸280010
    豊岡280020
    京都府京都260010
    舞鶴260020
    滋賀県大津250010
    彦根250020
    奈良県奈良290010
    風屋290020
    和歌山県和歌山300010
    潮岬300020
    鳥取県鳥取310010
    米子310020
    島根県松江320010
    浜田320020
    西郷320030
    岡山県岡山330010
    津山330020
    広島県広島340010
    庄原340020
    山口県下関350010
    山口350020
    柳井350030
    350040
    徳島県徳島360010
    日和佐360020
    香川県高松370000
    愛媛県松山380010
    新居浜380020
    宇和島380030
    高知県高知390010
    室戸岬390020
    清水390030
    福岡県福岡400010
    八幡400020
    飯塚400030
    久留米400040
    大分県大分440010
    中津440020
    日田440030
    佐伯440040
    長崎県長崎420010
    佐世保420020
    厳原420030
    福江420040
    佐賀県佐賀410010
    伊万里410020
    熊本県熊本430010
    阿蘇乙姫430020
    牛深430030
    人吉430040
    宮崎県宮崎450010
    延岡450020
    都城450030
    高千穂450040
    鹿児島県鹿児島460010
    鹿屋460020
    種子島460030
    名瀬460040
    沖縄県那覇471010
    名護471020
    久米島471030
    南大東472000
    宮古島473000
    石垣島474010
    与那国島474020

    Livedoor Weather Hack天気用ウェブフォント

    プラグライン提供用に作成したウェブフォントをGPLライセンスで公開します。ご利用ください。

    mamewaza_weather_webfont
    Web Font セット

    CSSでの指定例

    下記のようにCSSに記述してご利用ください。 
    @font-face {
      font-family: "weather";
      src: url('./mamewaza_weather.eot');
      src: url('./mamewaza_weather.eot#iefix') format('embedded-opentype'),
           url('./mamewaza_weather.woff') format('woff'),
           url('./mamewaza_weather.ttf') format('truetype'),
           url('./mamewaza_weather.svg#fontello') format('svg');
      font-weight: normal;
      font-style: normal;
    }

    span.mamewaza_weather_icon {
        font-family: "weather" !important;
    }

    文字コード相関表と表示例

    晴れ01
    晴時々曇02
    晴時々雨03
    晴時々雪04
    晴のち曇05
    晴のち雨06
    晴のち雪07
    曇り08
    曇時々晴09
    曇時々雨10
    曇時々雪11
    曇のち晴12
    曇のち雨13
    曇のち雪14
    15
    雨時々晴16
    雨時々曇17
    雨時々雪18
    雨のち晴19
    雨のち曇20
    雨のち雪21
    暴風雨22
    23
    雪時々晴24
    雪時々曇25
    雪時々雨26
    雪のち晴27
    雪のち曇28
    雪のち雨29
    暴風雪30

    文字コード表の2ケタの数字の前に「&#xe8」、後に「;」を付加し「&#xe801;」のようにしてフォントを表示できます。
    CSS内でcontentプロパティで使用する場合は前に「0xe8」を付加し「content:"0xe801";」のようにして表示できます。

    Livedoor Weather Hackの画像との相関関係

    Livedoor Weather Hackで使用しているお天気アイコンの凡例の画像名(数字.gif)と文字コードの末尾2ケタが一致していますので、画像名の数字を使い上で説明した方法でウェブフォントを利用できます。

    ウェブフォントのみを使用される場合も、可能でしたらまめわざへのバックリンクをお願いいたします。

    天気記号のフリー画像(GIF・SVG)

    リクエストがありましたので、こちらで配布します。ご自由にお使いください。
    ファイル名が上記の天気記号を表す数字になっています。
    可能でしたらまめわざへのバックリンクをお願いいたします。

    SVGセット(ベクター)
    Fireworksのプラグインを使用して出力したSVGです

    免責と注意事項

    • 本プログラムおよび天気用ウェブフォントは、まめわざで作成したもので、商用・非商用を問わず無料でご利用いただけます(GPLライセンス)。
      天気予報の表示にはLivedoor Weather HacksとGoogle Feed APIを使用していますので、これらの規約に則ってご利用ください。
    • 天気予報の表示で使用しているLivedoor Weather HacksとGoogle Feed APIのサービスが停止した場合は提供ができなくなります。
      また、これらのサービスが仕様変更した場合は、プログラムが正しく動作しなくなることがありますので予めご了承願います。
    • 本プログラムは、くれぐれも自己責任でご利用をお願いいたします。
      本プログラムの利用によって生ずるいかなる損害に対しても一切責任を負いません。
    • 天気用ウェブフォントは、季節がら、冬の天気の表示確認でできておりません。正しく表示できない場合は、随時修正しますので、下のサポート掲示板からご報告をお願いいたします。
      尚、ウェブフォントは2で説明したサービスの終了によってプログラムが動作しなくなった場合でも、ご利用いただいて構いません。

    サポート掲示板

    不具合や不明点などがありましたら、こちらの掲示板をご利用ください。メールでの返信が必要な場合は、お問合せからご連絡ください。

    さん
    掲示板の主旨に反する投稿は掲載されません。掲載の是非は管理者が判断いたします。予めご了承願います。 投稿内容は掲載されますので、個人情報は一切投稿しないでください。
    Enさん(5ql7hs78)2015/12/10 07:18 投稿削除
    初めまして。素敵なブログパーツですね。
    掲載されている天気用ウェブフォントですが、
    画像としての配布は考えていらっしゃらないでしょうか?
    または、バックリンクの記載を行う上で
    フォントをこちらで画像として加工して使用は可能でしょうか?
    ご検討の程宜しくお願い致します。
    管理人さん(5qh31dhf)2015/12/11 08:15 投稿削除
    En様
    書き込みありがとうございます。
    ウェブフォント以外では提供しておりませんが、今後用意したいと思います。
    加工していただいて結構ですので、ご利用ください。よろしくお願いいたします。
    管理人さん(5qh31dhf)2015/12/11 21:53 投稿削除
    En様
    黒のGIFとSVGを用意しました。上の「天気記号のフリー画像」のところからダウンロードしてご利用ください。
    Enさん(5qryejhi)2015/12/15 00:38 投稿削除
    ご回答ありがとうございます。
    ダウンロードの用の画像まで用意して頂き、ありがとうございました。
    加工の方も可能ということで、是非利用させて頂きたいと思います。
    用件のみで、失礼致しました。
    返信
    saiさん(5qdvk63t)2015/12/5 04:10 投稿削除
    初めまして、とても洗練されたデザインで使用させて頂きたいと思いました。
    一点問題というか、不明な部分があり、こちらにて書き込み失礼します。
    現在12月5日(土)ですが、天気の表示の際、明日(日)明後日(月)または一週間にかけて変更したところ、
    どれも6日(日)が表示されません。
    このプレビュー画面だけではなく、実際にHTML内に貼り付けた所でも、同じように表示されません。
    日曜日に限った問題か、分かりませんが、一度ご確認をお願いいたします。
    匿名さん(5qdvk63t)2015/12/6 02:50 投稿
    何度も投稿してしまい、申し訳ありません。
    上記「6(日)の日曜日が表示されない」と報告致しましたが、
    追加の形で報告を失礼致します。

    日中にこちらの表示を確認したところ、
    「明日・明後日」「一週間」の表示は日曜日を含めて通常通りに表示・作動しておりました。
    <例>
     5日(土)の14時時点→[明日]6日(日)表示、[明後日]7日(月)表示
     ※通常通り作動

    しかしながら、時刻が深夜の26時頃確認したところ
    「明日」の表示の部分が「本日(今日)」になっておりました。
    おそらく日付を跨いだ際に
    読み込みが上手く共有出来ていない状況かと思われます。

    ・日付を跨いだ際、「明日」が本来の日で表示されない
    <例>
     5日(土)の26時(6日(日)2時)時点→ [明日]7日(月)ではなく、6日(日)が表示されたまま、[明後日]8日(火)表示
     ※7日(月)[明日]の情報が飛ぶ

    少しでも情報の参考になりますことを願いまして、何度も書き込み失礼致しました。

    シンプルでデザイン性の高さ、見やすいのも兼ねて、
    そのスタイルを手軽に変更出来ることに感動しております。

    今後も素敵なツールの展開を楽しみにしておりますので、
    お手隙の際に、またご確認をよろしくお願いいたします。
    管理人さん(5qh31dhf)2015/12/7 10:03 投稿削除
    sai様
    書き込みありがとうございます。
    返信が遅くなりまして申し訳ございません。
    微調整をしてみましたので、明日検証してからまた報告いたします。
    検証に時間がかかりますのでしばらくお待ち願います。
    管理人さん(5qh31dhf)2015/12/8 10:23 投稿削除
    sai様
    検証後にさらに手を加えまして、現在はご希望のように動作していると思います。ご確認をお願いいたします。
    変更点)
    1.対象が「週末」以外の場合に「今日」を含むようにしました。
    2.元データの方で直近の最低・最高気温が表示されない場合があります。最低・最高気温がない日を表示しない仕様でしたが、これを見直しました。気温がない場合でも、気温を空欄にして表示されます。

    気象庁の発表が5時・11時・17時にあるようなので、APIに反映されるタイミングを考慮し、0時(日付調整用)・6時・12時・18時にデータが変わるようにしました。

    明日以降も確認をしてみますが、お気付きの点などありましたら、書き込みをお願いいたします。
    saiさん(5qdvk63t)2015/12/9 01:41 投稿削除
    お忙しい中、お早いご返答ありがとうございます。
    さっそく追加で長々となりますが
    4点、書き込みに失礼致します。お目通し頂けますようお願いします。

    *1)設置から天気の表示について
    ・利用方法1//天気予報ブログパーツ
    8日21時頃、以前同様のやり方でこちらにてコードを取得し、自HTML内にて貼り付けて確認してみましたが
    天気情報が表示されない状態になっていました。

    >1.下のエディターでエリア・表示方法・デザインを設定してください。の
    設定後のプレビュー等は問題なく確認出来ました。
    >3.ブログやホームページなどで、天気予報を表示したい場所にコードを設置してください。
    設置後、オンライン上でも確認してみましたが表示が確認出来ない状態です。
    一番利用用途が多い手法だと思われますので、ご確認をお願いいたします。

    ・利用方法2//天気予報jQueryプラグインPack
    ちなみに利用方法2で試してみたところ、天気情報の表示は出来ました。

    *2)「今日」を含んだ表示について
    変更点)
    >1.対象が「週末」以外の場合に「今日」を含むようにしました。
    >2.元データの方で直近の最低・最高気温が表示されない場合があります。
    >最低・最高気温がない日を表示しない仕様でしたが、これを見直しました。気温がない場合でも、気温を空欄にして表示されます。

    提供頂いていた仕様を、変更・更新頂きまして大変恐れ入ります。
    元データ先で「直近の最低・最高気温が表示されない場合」があることは認識しておりましたが
    表示が天気のみであっても、是非活用したいと思っております。
    ご検討頂きまして、本当にありがとうございます。

    ですが、
    8日(火)21時頃に「一週間」「明日」「明日・明後日」で確認してみたところ
    全て9日(水)明日の天気からの始まり~で表示されました。

    希望ばかり並べてしまい、誠に恐れ入りますが
    使用したい具体例としては、8日中にはなるべく8日(今日)の天候の表示を残して欲しいと思っております。
    前回、「今日を含めた表示の希望」と「8日の日付をまたいだ際に、9日(明日)の情報が飛んでしまう」
    といった報告となりましたが、総合しまして、
    「8日の日付をまたぐまでは8日(今日)を表示」
    「8日の日付をまたいだ際には、8日が残っている分には構わず、9日(明日)の天候が確認出来る」
    の形となれば嬉しいな、と思っております。

    *3)日付が変わった時間からの表示について
    8日(火)25時頃(9日1時頃)確認してみたところ、
    以前と同様で、やはり「明日(10日)」の情報が一つ飛んで
    「一週間」「明日・明後日」双方ともに9日(10日明日が飛び)11日が次に表示される形でした。
    この時に、読み込み元データ先を確認したところ
    「10日(明日)」の「最高気温・最低気温」が公開されておりませんでした。

    (4)全体として
    今回書き込みにまとめていた際に、もしかしたら、と思った点となり、間違っているかもしれませんが
    >変更点の「最低・最高気温がない日を表示しない仕様」
    こちらが、まだ「表示しない仕様のまま」で、
    「今日(元データ先で気温が表示されていない時間…おそらく夕方17時以降)」と
    日付をまたぐ際に「明日(元データ先で気温が表示されていない時間…おそらく深夜0時以降)」
    には、その日付のデータを読み込まれない(飛ばされている)問題なのかと感じました。

    プログラムに関して素人がこのような希望で突っ込んでしまいお手数をおかけ致します。
    無理を申し付けているかもしれませんが、もし提供にご検討頂ける範囲であれば、
    どうぞご検討をよろしくお願いいたします。
    管理人さん(5qh31dhf)2015/12/9 10:18 投稿削除
    sai様
    ご報告ありがとうございます!
    キャッシュ(ブラウザに残る古いデータ)の処理が正しくできていないのが原因ではないかと思いましたので、一部手を加えました。
    引き続き動作確認を行ってまいります。お気付きの点などございましたら書き込みをどうぞよろしくお願いいたします。
    管理人さん(5qh31dhf)2015/12/9 19:34 投稿削除
    夕方確認しましたところ、ご指摘の「本日が表示されない」状態だったため確認しましたところ、処理の誤りを発見しました。
    修正しましたのでご報告申し上げます。何度も申し訳ございません。
    返信
    saiさん(5qdvk63t)2015/12/5 05:54 投稿削除
    先ほど、日曜日が表示されない件で投稿しましたが、
    この天気予報は「今日、明日」「今日から一週間」という「本日の今日」という日を含めた設定で
    提供は考えていらっしゃらないでしょうか?
    本日、今日の天候も表示出来ればとても素敵で、利用したいと思っております。
    一度ご検討頂ければ嬉しく思います。
    返信