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

jQuery plugin for Japan weather forecast

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

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

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

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

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

2021年4月12日 気象庁の仕様変更によりエリアの一部(群馬県・長野県・東京都伊豆諸島)が統合されました。

2021年4月1日 気象庁の仕様変更によりエリアの一部が統合されました。

2021年2月26日 気象庁のホームページリニューアル伴い、24日頃からデータが正常に取得できませんでしたが、現在は正常に動作しております。

2020年10月4日 エリアの一部が細分化されました。

2020年8月4日 Livedoor Weather Hacksの終了に伴い、気象庁の公開データからデータを収集するように仕様変更しました(ブログ記事はこちら)。
jQueryプラグインで天気アイコンに「NaN;」が表示される場合は、こちらのzipをダウンロードしてJavascriptファイルを差し替えて下さい。

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

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

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

jQueryプラグインのファイルをダウンロードし、カスタマイズして利用できます
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択",
        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>

地域コード表

「新分類」の6桁のコードを設定して下さい。すでに利用中の方は、旧分類のコードに対応する新分類の方のコードに変更願います。

2020年11月04日 *が細分化されました。
2021年04月02日 一部が再統合されました。

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

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

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

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

免責と注意事項

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

サポート掲示板

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

アイコン設定
投稿者さん使い方
掲示板の主旨に反する投稿は掲載されません。掲載の是非は管理者が判断いたします。予めご了承願います。
投稿内容は掲載されますので、個人情報は一切投稿しないでください。
匿名さん(7y7soqoh)2021/6/7 10:59 投稿
お世話になっております。
現在(6月7日 10時55分)表示されている天気が気象庁の天気と異なっております。

気象庁 : 晴時々曇
まめわざ様 : 晴

お手数をおかけしますが、ご確認よろしくお願いします。
管理人さん(7y81mvg7)2021/6/7 15:10 投稿削除
お問い合わせありがとうございます。
エリアをご回答くださいますようお願い申し上げます。
匿名さん(7y7soqoh)2021/6/8 10:16 投稿
ご返信ありがとうございます。
エリアは大阪府になります。
昨日は午後の天気は合っていました。
6月4日(金)に確認したときも午前中のみ異なっており、午後は合っていました。
匿名さん(7y7soqoh)2021/6/14 10:19 投稿
現在(6/14 10時11分)表示されている大阪府の天気が気象庁の天気と異なっております。

気象庁(大阪府) : 曇
まめわざ様 : 曇一時雨

ご多忙中お手数をおかけ致しますが、ご確認をお願いします。
管理人さん(7yhuof24)2021/6/14 11:53 投稿削除
お問い合わせありがとうございます。
恐れ入りますが、再度お気づきの際にご一報くださいますようお願いいたします。
匿名さん(7y7soqoh)2021/6/15 10:54 投稿
本日6/15 10時ごろ確認しましたが、表示されている大阪府の天気が気象庁の天気と異なっておりました。

気象庁(大阪府) : 曇時々晴
まめわざ様 : 曇

昨日の午後も見ておりましたが、午後は問題なく更新されているようでした。

ご多忙中お手数をおかけ致しますが、ご確認をお願いします。
管理人さん(7yhuof24)2021/6/17 10:24 投稿削除
たびたびご連絡いただきましてありがとうございます。
検証を行いましたので、現時点での推測をご案内いたします。

気象庁の当日の天気の11:00発表分は、実際には10時台に適用されている可能性があります。この場合、5:00発表と11:00発表の予報が異なる場合は、10時台に不一致が発生するという予想です。
尚、まめわざ側のデータ取得は1時間遅れにしておりますため、不一致は常に発生しております。ご了承願います。
返信
e
etgさん(7x9rs53d)2021/5/14 15:30 投稿削除
はじめまして。素敵なブログパーツでぜひ使用させて頂きたいと思っております。
1点ご質問ですが、コードを貼り付けたのち、PCでのブラウザ確認では問題なかったのですが
スマホ(iphone12Pro)ですと、どのブラウザでも日にちの「日」気温の「~」「℃」が文字化けて表示されてしまいます。
あまり知識がなくて恐れ入りますが、対処する手だてがございましたらご教示頂けますと幸いです。
返信
匿名さん(7w4g308y)2021/4/15 17:24 投稿
お世話になっております。
エディタで対象を「明日」に設定して使用したいと考えております。
前の質問者様の回答で「午後に当日の予報がなくなると翌日から表示されます。」とありますが、
切り替えのタイミングは何時になるのか毎日正確に決まっているわけではないのでしょうか。
また、午前中は当日の最高気温のみ表示されておりましたが、
「最低・最高気温→最高気温のみ」となる切り替え時間も教えていただきたいです。

気象庁の週間天気予報は11時・17時に更新されているようですが、
その更新時間とも違うので気になって質問させていただきました。
管理人さん(7wa50uwk)2021/4/19 17:01 投稿削除
お問い合わせありがとうございます。
天気データのキャッシュは0:00・6:00・12:00・18:00に再取得しております。
これを踏まえて、ご自身の地域の内容の動向をお調べ願います。
匿名さん(7wbj6sdz)2021/4/20 16:25 投稿
ご返信ありがとうございました。
承知致しました。
また何かありましたらよろしくお願いします。
返信
匿名さん(7vkd0q6g)2021/4/1 16:03 投稿
お世話になっております。
天気予報の日付なのですが、以前は当日から1週間の予定だったかと思うのですが、
現在は翌日以降1週間の予定となっております。何か仕様変更があったのでしょうか?
私の記憶違いでしたら申し訳ありません。
管理人さん(7vl7zkf4)2021/4/2 06:30 投稿削除
お問い合わせありがとうございます。
午後に当日の予報がなくなると翌日から表示されます。
仕様は提供元に合わせるために何度変わっております。ご了承願います。
匿名さん(7vkd0q6g)2021/4/2 15:12 投稿
お世話になっております。
そういう仕様でしたか、承知いたしました。
お忙しい中ご回答ありがとうございました。
返信
匿名さん(7u60kcrd)2021/4/1 16:29 投稿
素敵なプラグインありがとうございます。
2021/4/1現在、一部地域について表示されない現象があるようです。
恐れ入りますがご確認いただけますでしょうか。
お手数おかけします。よろしくお願いいたします。
管理人さん(7vkihzuh)2021/4/1 18:36 投稿削除
お問い合わせありがとうございます。
ご不便をおかけしまして申し訳ございません。
気象庁側の仕様変更があったようで、応急処置をしました。
明日再度修正いたします。
管理人さん(7vl7zkf4)2021/4/2 06:31 投稿削除
修正が完了しましたのでご案内いたします。

このたびはご報告ありがとうございました。
またお気づきの点がありましたらご報告をお願いいたします。
匿名さん(7vlc6dlm)2021/4/2 08:27 投稿
お忙しい中、ご対応ありがとうございました。
正常動作確認いたしました。
また何かありましたらよろしくお願いいたします。
返信
匿名さん(7u60kcrd)2021/2/25 10:26 投稿削除
素敵なプラグインありがとうございます。

2021/2/25現在、うまく表示されないようです。
このページ上部コード取得用の「地方」を切り替えて試してみましたが、いずれ地方でも表示されません。

恐れ入りますがご確認いただけますでしょうか。
お手数おかけします。よろしくお願いいたします。
管理人さん(7u624f7o)2021/2/25 11:09 投稿削除
お問合せありがとうございます。
気象庁のホームページのリニューアルによりデータが取得できなくなっております。
恐れ入りますが、プログラムの修正までしばらくお待ち願います。
匿名さん(7u60kcrd)2021/2/26 10:04 投稿
ご対応ありがとうございます。
正常に表示されております。
早急な対応ありがとうございました。
管理人さん(7u7myuvq)2021/2/26 13:40 投稿削除
このたびはご報告をいただきまして、ありがとうございました。
またお気づきのことがありましたら、お気軽にお問合せ願います。
返信
こばさん(7tddkhq7)2021/2/5 09:24 投稿削除
使いやすいプラグインを作って頂きありがとうございます。
以前livedoorのAPIを使用されていたとのことですが、livedoor側がAPI利用に商用不可と記載されておりました。

今回、気象庁の公開データを取得するとの変更があったと記載があったので確認のためご連絡させていただきました。
こちらの情報の配布元はどちらかURLを教えていただいてもよろしいでしょうか。
商用利用についての表記を確認させていただきたいです。お手数ですがよろしくお願いいたします。
管理人さん(7thxk7qj)2021/2/8 13:55 投稿削除
お問合せありがとうございます。
以下をご参考の上、ご判断願います。
https://www.jma.go.jp/jma/kishou/info/coment.html
こばさん(7tddkhq7)2021/2/10 13:48 投稿
お忙しいところコメント頂きありがとうございます。
確認させて頂きました。

これからのご発展も楽しみにしております。
ありがとうございました。
返信
匿名さん(7poqc8a8)2020/11/4 13:28 投稿
使いやすいプラグインありがとうございます。
滋賀県、京都府、兵庫県
の天気が表示されないようです。

お手すきの際にご確認いただきたく思います。
よろしくお願いいたします。
管理人さん(7poy8esa)2020/11/4 17:09 投稿削除
情報をご提供いただきましてありがとうございます。
表示されないことを確認しまして、システムを修正しましたのでご報告を申し上げます。

本件は、気象庁のサイトの方でエリアが細分化されたことが原因のため、エリア分けを修正しました。上部「地域コード表」の欄に説明がありますのでご参考願います。
匿名さん(7poqc8a8)2020/11/4 18:54 投稿
対応いただきありがとうございます。
該当地区、表示されるようになりました。
返信
W
WAVE管理人さん(7nwp0k92)2020/9/20 17:54 投稿削除
コード作成後,WEBにて表示したところ,日付部分が文字化け(下部の説明文は正常表示),文字色が黒色で指定色になりません。天気記号は変化します。当方使用しているブラウザは,windows7にedgeブラウザで,因みにIEでも同様な現象が見られます。他の質問などでは問題ない様なので,当方の環境の問題かもしれません。何かヒントがあれば,お教え願います。
管理人さん(6u7nke8f)2020/9/24 13:32 投稿削除
お問い合わせありがとうございます。
Window7はメーカーのサポートが終了しており、Edge・IEのバージョンも最新ではないと思われますため対応出来ません。ご了承願います。
W
WAVE管理人さん(7o899nwf)2020/9/28 20:07 投稿
早々の対応,有難うございます。そこで,Windows10のPCで,プレビューからコード作成,サーバにアップしましたが,指定色にならないこと,文字化けするなど,改善が見られませんでした。当方利用のレンタルサーバの問題か,ファイル転送ソフトに問題があるのか,今後調べてみます。ご協力,有難うございました。
返信
匿名さん(7dwh2lhy)2020/1/12 15:35 投稿削除
素晴らしい
返信