[{"data":1,"prerenderedAt":316},["ShallowReactive",2],{"$ft6jtkd6xhw3c":3,"$f136pkk4fsuyio":263},{"featured":4,"latest":129,"categories":227},[5,14,27,37,48,56,66,76,86,96,106,114,122],{"slug":6,"title":7,"date":8,"excerpt":9,"image":10,"categories":11},"custom-database-tables","Custom DataBase Tables","2015-11-24T02:29:34","You can create the new own table freely in the your WordPress database via this plugin. Then, you can make the management of table or (as view or entry or edit) data in a simple user interface.\\nAlso,","\u002Fassets\u002Fuploads\u002F2016\u002F02\u002Fcdbt-overview.png",[12],{"slug":13,"name":7},"cdbt",{"slug":15,"title":16,"date":17,"excerpt":18,"image":19,"categories":20},"10_php_tips_for_developers","PHP開発者が心得ておくべき10の鉄則","2016-01-11T18:38:09","PHPだけに限った話ではないが、プログラミングを行うに当たって、心得て、準備しておくと失敗が劇的に減る事柄をまとめてある良い記事を見つけたので、私なりの解釈で意訳しつつ、経験則を踏まえてあらためてまとめてみた。 オリジナ…","\u002Fassets\u002Fuploads\u002F2016\u002F01\u002Feyecatch-php-10-tips.jpg",[21,24],{"slug":22,"name":23},"column","コラム",{"slug":25,"name":26},"development","開発関連",{"slug":28,"title":29,"date":30,"excerpt":31,"image":32,"categories":33},"jquery-timeline-v1","2種類の横型タイムラインを簡単に作成できる「jQuery.Timeline」をリリース","2017-05-29T14:55:46","現在開発しているサービスで利用するべく、横型タイムラインを生成できるjQueryプラグインを自作したので、そこだけ単独でリリースしてみた。 ソースコード等はGitHubの方にリリースしてあるので、興味のある方は、そち…","\u002Fassets\u002Fuploads\u002F2017\u002F05\u002Fjquery_timeline_image.png",[34],{"slug":35,"name":36},"jqtl","jQuery.Timeline",{"slug":38,"title":39,"date":40,"excerpt":41,"image":42,"categories":43},"optimize-browser-cache-of-static-resources","更新されたJS、CSS、画像のみブラウザキャッシュを破棄して読み込ませる","2018-01-31T15:47:47","WEBサービスの保守や開発をやっていると、JavaScriptやスタイルシート、画像などの静的リソースを更新した際、しばしば「確認したけど、更新されてないよ」とか云われて、「ブラウザのキャッシュを消してからもう一度見て…",null,[44,47],{"slug":45,"name":46},"codes","コード集",{"slug":25,"name":26},{"slug":49,"title":50,"date":51,"excerpt":52,"image":53,"categories":54},"jquery-timeline","jQuery.Timeline version2 – full documentation","2019-03-04T20:40:48","Plugin Overview The jQuery.Timeline plugin provides you two types of the horizontal timeline. You can create a…","\u002Fassets\u002Fuploads\u002F2019\u002F03\u002Fjquery.timeline_v2.jpg",[55],{"slug":35,"name":36},{"slug":57,"title":58,"date":59,"excerpt":60,"image":61,"categories":62},"released-the-sloth","Released the Sloth of mobile-first CSS micro framework!","2019-04-16T18:04:25","I released the “Sloth” that is mobile-first CSS micro framework. I have long used frontend framewo…","\u002Fassets\u002Fuploads\u002F2019\u002F04\u002Fsloth_doc_head.png",[63],{"slug":64,"name":65},"sloth","Sloth",{"slug":67,"title":68,"date":69,"excerpt":70,"image":71,"categories":72},"challenge-to-conceal-the-wordpress-site","WordPressサイトを徹底的に秘匿化する","2020-02-02T23:59:58","私は自分の個人サイトをはじめ、仕事でもWordPressサイトを運用している。WordPressは気軽にサイトを立ち上げられてカスタマイズも簡単な、素晴らしいオープンソースなのだが、世界中で使われまくっているその知名度…","\u002Fassets\u002Fuploads\u002F2020\u002F02\u002Fshutterstock_1878005929.jpg",[73],{"slug":74,"name":75},"wordpress","WordPress関連",{"slug":77,"title":78,"date":79,"excerpt":80,"image":81,"categories":82},"what-is-forkor","Made a shortened URL app called Forkor","2020-07-07T22:27:01","What’s Forkor? Forkor is a service that provides a shortened URL feature that allows you to redirect any…","\u002Fassets\u002Fuploads\u002F2020\u002F07\u002Fforkor.png",[83],{"slug":84,"name":85},"forkor","Forkor",{"slug":87,"title":88,"date":89,"excerpt":90,"image":91,"categories":92},"manual-about-svg-japan","インタラクティブな日本地図を生成するJSプラグイン「SVG Japan」","2020-11-16T21:19:58","各都道府県をそれぞれ選択・クリック可能なインタラクティブな日本地図を生成するネイティブJavaScript建てのプラグイン「SVG Japan」を作ったので、その紹介と使い方をまとめておく。ちなみにソースコードはgit…","\u002Fassets\u002Fuploads\u002F2020\u002F11\u002Fsvg-japan.png",[93],{"slug":94,"name":95},"svg-japan","SVG Japan",{"slug":97,"title":98,"date":99,"excerpt":100,"image":101,"categories":102},"wp-ignitor-plugin-to-conceal-wordpress-site","WordPressサイトを秘匿化するプラグイン「WP Ignitor」","2021-01-19T15:28:21","以前「WordPressサイトを徹底的に秘匿化する」という記事で、WordPress建てのサイトを秘匿化する方法を取り上げたのだが、あれをサイト構築時に毎度実施するとなるととても労力が必要であった。そこで、もっとお手軽…","\u002Fassets\u002Fuploads\u002F2021\u002F01\u002Fbanner-1554x500-1.png",[103],{"slug":104,"name":105},"wp-ignitor","WPイグナイタ",{"slug":107,"title":108,"date":109,"excerpt":110,"image":111,"categories":112},"tastewp","無料でWordPressサイトを複数作成できるWEBサービス「TasteWP」","2021-03-25T20:21:59","私が日本語翻訳に協力しているWEBサービス「TasteWP」について紹介しようと思う。 https:\u002F\u002Ftastewp.com このサービス、サインアップすることなく無料で自分用のWordPressサイトを作れるとい…","\u002Fassets\u002Fuploads\u002F2021\u002F03\u002FTasteWP_screenshot.png",[113],{"slug":74,"name":75},{"slug":115,"title":116,"date":117,"excerpt":118,"image":119,"categories":120},"monster-hunter-rise-skill-simulator","モンハンライズのスキルシミュレータを作ってみた！","2021-06-28T20:24:52","コラムで連載していたNintendo Switch版『モンスターハンターライズ』のスキルシミュレータ開発がやっと一段落して一通り完了した。いやぁ、記事書きながら同時並行で開発すると思っていた以上に時間がかかるもんだなぁ…","\u002Fassets\u002Fuploads\u002F2021\u002F06\u002Fmhrss_v100.png",[121],{"slug":25,"name":26},{"slug":123,"title":124,"date":125,"excerpt":126,"image":42,"categories":127},"comparison-of-javascript-date-libraries","JavaScriptの日時ライブラリを比較してみた","2021-07-28T22:39:19","ネイティブJavaScriptで日時を取り扱う場合、ビルトインされているDateオブジェクトを使うことになるのだが、このDateオブジェクトは取り扱いにクセが多く、直感的に日時を操作できない点でも有名である。そこで、専…",[128],{"slug":25,"name":26},[130,141,153,165,175,184,192,195,198,206,213,220],{"slug":131,"title":132,"date":133,"excerpt":134,"image":135,"categories":136},"pulllog_launched","ガチャ履歴を記録・分析できるWebサービス「PullLog」","2025-08-22T13:05:30","このたび、新しい個人開発サービスとして 「PullLog（プルログ）」 をリリースした。 URLはこちら https:\u002F\u002Fpulllog.net PullLogとは？ PullLogは、ソーシャルゲームのガチャ履歴を記録…","\u002Fassets\u002Fuploads\u002F2025\u002F08\u002Fpulllog_stats_jp.png",[137,140],{"slug":138,"name":139},"industries","プロダクト",{"slug":25,"name":26},{"slug":142,"title":143,"date":144,"excerpt":145,"image":146,"categories":147},"mockapi-php-openapi-schema-generation","モックAPIのレスポンスから OpenAPI 3.0 スキーマを自動生成するPHPツール","2025-04-17T09:31:52","私自身がそうなのですが、OpenAPI仕様書を毎回手作業で書いていて「面倒だな」と思ったことはありませんか？ そんな（私と）あなたにぴったりのツールがあります。 レスポンスの例さえ用意すれば、OpenAPI 3.0 スキ…","\u002Fassets\u002Fuploads\u002F2025\u002F04\u002Fswaggerui-preview.png",[148,151,152],{"slug":149,"name":150},"mockapi-php","MockAPI-PHP",{"slug":138,"name":139},{"slug":25,"name":26},{"slug":154,"title":155,"date":156,"excerpt":157,"image":158,"categories":159},"ambient_playlist_customize","Ambientでメメントモリのラメントプレイヤーを作る","2023-11-30T17:32:39","「Ambient」の最新バージョン 1.2.0で実装した「疑似フェーダー」機能を使って、ソーシャルゲーム「メメントモリ」のYouTube公式チャンネルで公開されているMVを集約したラメント専用プレイヤーを作ってみた。 ラ…","\u002Fassets\u002Fuploads\u002F2023\u002F11\u002Fambient_mememori_1.png",[160,163,164],{"slug":161,"name":162},"ambient","Ambient",{"slug":138,"name":139},{"slug":25,"name":26},{"slug":166,"title":167,"date":168,"excerpt":169,"image":170,"categories":171},"released_ambient_demo_version","Ambientメディアプレイヤーのクラウド版デモを公開","2023-11-22T13:47:36","つい先日「Ambient」の最新バージョン 1.1.0をリリースして、それに合わせてクラウド版デモサイトも公開してみた。 なお、クラウド版デモでローカルのホストコンピュータのメディアを再生するには、そのメディアファイルも…","\u002Fassets\u002Fuploads\u002F2023\u002F10\u002FAmbientMediaPlayer-typologo.png",[172,173,174],{"slug":161,"name":162},{"slug":138,"name":139},{"slug":25,"name":26},{"slug":176,"title":177,"date":178,"excerpt":179,"image":170,"categories":180},"ambient-media-player","YouTubeと自分のPC内メディアを同時に再生できるメディアプレイヤーを作ってみた","2023-10-20T00:00:25","私はよくPCで何か作業をするときには音楽を垂れ流していることが多い。 そういう時にかける曲は、手持ちのアルバムCD等からPCに取り込んだ音源だったり、さらにはYouTubeの動画だったりとメディアや再生環境がバラバラだ。…",[181,182,183],{"slug":161,"name":162},{"slug":138,"name":139},{"slug":25,"name":26},{"slug":185,"title":186,"date":187,"excerpt":188,"image":189,"categories":190},"what-is-the-sunorhc","Sunorhc is a date-time library for JavaScript","2021-08-25T22:55:55","Sunorhc is a lightweight library for handling dates and times for JavaScript. The library wraps a native JavaS…","\u002Fassets\u002Fuploads\u002F2021\u002F08\u002Fshutterstock_1091212919_resized.jpg",[191],{"slug":25,"name":26},{"slug":123,"title":124,"date":125,"excerpt":126,"image":42,"categories":193},[194],{"slug":25,"name":26},{"slug":115,"title":116,"date":117,"excerpt":118,"image":119,"categories":196},[197],{"slug":25,"name":26},{"slug":199,"title":200,"date":201,"excerpt":202,"image":203,"categories":204},"mhrise-skill-simulator-creation-chapter-12","モンスターハンターライズのスキルシミュレータを作ってみる！ 第12回","2021-06-21T13:11:46","今回は「マイセット登録」と護石データの「エクスポート／インポート」機能の追加をしていく。折り良く（悪く？）「FF7リメイク・インターグレード」や「FORTNITEシーズン7」が出たこともあって、そっちをプレイしてたらこ…","\u002Fassets\u002Fuploads\u002F2021\u002F04\u002Fb6ca09e9a7f6faf27641f62dabe64c6ff97b4f326aa478379e3c112aa28eb9ab.jpg",[205],{"slug":22,"name":23},{"slug":207,"title":208,"date":209,"excerpt":210,"image":203,"categories":211},"mhrise-skill-simulator-creation-chapter-11","モンスターハンターライズのスキルシミュレータを作ってみる！ 第11回","2021-06-07T14:52:31","さて、今回はユーザー個別データの管理部分を開発していく予定だが、まずその前にやっておくことがある。 新スキル「風雷合一」に対応する Ver.3.0の大型無料アップデートで追加された新スキルに「風雷合一」というのがある…",[212],{"slug":22,"name":23},{"slug":214,"title":215,"date":216,"excerpt":217,"image":203,"categories":218},"mhrise-skill-simulator-creation-chapter-10","モンスターハンターライズのスキルシミュレータを作ってみる！ 第10回","2021-06-02T00:29:10","今回は、護石管理画面の作成だ。この護石管理では、ユーザーごとに護石の登録を行う機能と、登録した護石を削除する機能を持つ仕様になる。この画面から登録した護石データはデータベースに格納するので、フロントエンド側からのリクエス…",[219],{"slug":22,"name":23},{"slug":221,"title":222,"date":223,"excerpt":224,"image":203,"categories":225},"mhrise-skill-simulator-creation-chapter-9","モンスターハンターライズのスキルシミュレータを作ってみる！ 第9回","2021-05-22T23:56:27","さて、今回はVuexによるデータ・キャッシュの実装だ。一度データベースから読み込んだデータをフロントエンド側で再利用可能なストアに格納することで、データベースへの接続回数を減らしてシステム負荷を下げるとともに、UX的な…",[226],{"slug":22,"name":23},[228,230,232,236,238,239,240,241,242,244,247,248,250,252,254,258,261],{"slug":161,"name":162,"count":229},3,{"slug":13,"name":7,"count":231},7,{"slug":233,"name":234,"count":235},"csnp","Custom Sticky Notes",2,{"slug":84,"name":85,"count":237},1,{"slug":35,"name":36,"count":229},{"slug":149,"name":150,"count":237},{"slug":64,"name":65,"count":237},{"slug":94,"name":95,"count":237},{"slug":74,"name":75,"count":243},37,{"slug":245,"name":246,"count":237},"wpqt","WP Qiita",{"slug":104,"name":105,"count":237},{"slug":22,"name":23,"count":249},29,{"slug":45,"name":46,"count":251},16,{"slug":138,"name":139,"count":253},5,{"slug":255,"name":256,"count":257},"lifelog","ライフログ",64,{"slug":259,"name":260,"count":235},"uncategorized","未分類",{"slug":25,"name":26,"count":262},45,{"type":264,"post":265},"post",{"slug":87,"title":88,"date":89,"excerpt":90,"image":91,"categories":266,"modified":268,"html":269,"tags":270,"related":288,"prev":305,"next":308},[267],{"slug":94,"name":95},"2021-03-24T22:31:01","\u003Cp>　各都道府県をそれぞれ選択・クリック可能なインタラクティブな日本地図を生成するネイティブJavaScript建てのプラグイン「\u003Cstrong>SVG Japan\u003C\u002Fstrong>」を作ったので、その紹介と使い方をまとめておく。ちなみにソースコードは\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fka215\u002Fsvg-japan\">github\u003C\u002Fa>にて公開中。\u003C\u002Fp>\n\u003Ch2>プラグインの機能\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>複数の種類の日本地図を生成可能（v1.1.0時点で3種類）。\u003C\u002Fli>\n\u003Cli>地図のアウトライン、都道府県の境界線を表示／非表示できる（線の色変更も可能）。\u003C\u002Fli>\n\u003Cli>各都道府県を自由にグループ化してオリジナルの地域を設定できる。\u003C\u002Fli>\n\u003Cli>地図全体を任意の統一色に変更できる。\u003C\u002Fli>\n\u003Cli>各都道府県、地域の通常時とアクティブ時の色を設定できる。\u003C\u002Fli>\n\u003Cli>都道府県にマウスオーバーした時のチップヘルパーを表示／非表示できる。\u003C\u002Fli>\n\u003Cli>都道府県がクリックされた時のイベントをJavaScriptで取得できる。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>導入方法\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>githubリポジトリからcloneする:\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">git\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> clone\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> https:\u002F\u002Fgithub.com\u002Fka215\u002Fsvg-japan.git\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cul>\n\u003Cli>npmからインストールする:\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">npm\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> install\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> svg-japan\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cul>\n\u003Cli>最新リリースパッケージ（アーカイブファイル）をダウンロードする:\u003Cbr \u002F>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fka215\u002Fsvg-japan\u002Freleases\u002Flatest\u002F\">ZIP／TAR.GZ形式のダウンロード\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>CDNからHTML内に直接読み込む:\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cpre>\u003Ccode class=\"language-HTML\"><script src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fgh\u002Fka215\u002Fsvg-japan@main\u002Fdist\u002Fsvg-japan.min.js\"><\u002Fscript>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>使用方法\u003C\u002Fh2>\n\u003Cp>\u003Cstrong>1.\u003C\u002Fstrong> HTML内にプラグインスクリプトを読み込む。\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-HTML\"><script src=\"\u002Fpath\u002Fto\u002Fsvg-japan.min.js\"><\u002Fscript>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cstrong>2.\u003C\u002Fstrong> 日本地図を表示したい要素をマークアップする。\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-HTML\"><div id=\"my-map-container\"><\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cstrong>3.\u003C\u002Fstrong> プラグインを実行する。\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">svgJapan\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">({ element: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"#my-map-container\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> })\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>または、2. を省略して、JavaScriptで直接日本地図を出力することもできます。\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">var\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> map \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> svgJapan\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">()\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">document.body.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">appendChild\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( map.map_container )\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>なお、プラグインスクリプトが完全に読み込まれる前にプラグインの実行処理が行われると、エラーとなります。プラグインの処理がDOMコンテンツの読み込みが終了した後に、プラグインが実行されるようにしてください（下記参照）。\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">document.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">addEventListener\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'DOMContentLoaded'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">function\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">() {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">  svgJapan\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">()\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">}, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">false\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>対応ブラウザ\u003C\u002Fh2>\n\u003Cp>JSのトランスパイル処理の対象ブラウザ指定は下記のようになっています。\u003C\u002Fp>\n\u003Cpre>\u003Ccode>targets: {\n  chrome: \"67\",\n  edge: \"17\",\n  firefox: \"60\",\n  ie: \"11\",\n  safari: \"11.1\",\n},\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>スマホでも動作しますが、マウスオーバーのイベントは発生しません。\u003Cbr \u002F>\nなお、IE10以下等のレガシーブラウザでは動作しません（もし動かしたいのであれば、ソースのトランスパイルターゲットを拡張してから必要なpolyfill入れてBabelり直す必要があるでしょう）。\u003C\u002Fp>\n\u003Ch2>デモページ\u003C\u002Fh2>\n\u003Cp>\u003Ca href=\"\u002Fsvg-japan-demo\">DEMO\u003C\u002Fa>\u003C\u002Fp>\n\u003Ch2>オプション\u003C\u002Fh2>\n\u003Cp>プラグインの実行時にオプションを指定することで、生成される日本地図の動作を制御できます。オプション指定は例えば下記のようになります。\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">svgJapan\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">({\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  element: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"#my-map\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  type: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"dense\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  regionality: \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">true\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">})\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>オプション一覧\u003C\u002Fh3>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth align=\"center\">オプション(キー)名\u003C\u002Fth>\n\u003Cth align=\"center\">値の型\u003C\u002Fth>\n\u003Cth align=\"center\">初期値\u003C\u002Fth>\n\u003Cth align=\"left\">説明\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd align=\"center\">\u003Cstrong>element\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Cem>String\u003C\u002Fem>\u003C\u002Ftd>\n\u003Ctd align=\"center\">–\u003C\u002Ftd>\n\u003Ctd align=\"left\">日本地図が挿入される親要素のセレクタ\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"center\">\u003Cstrong>type\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Cem>String\u003C\u002Fem>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Ccode>\"full\"\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"left\">\u003Cstrong>full\u003C\u002Fstrong>: 全景型の日本地図を生成\u003Cbr \u002F>\u003Cstrong>dense\u003C\u002Fstrong>: 密集型の日本地図を生成\u003Cbr \u002F>\u003Cstrong>deform\u003C\u002Fstrong>: デフォルメ型の日本地図を生成\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"center\">\u003Cstrong>stroked\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Cem>Boolean\u003C\u002Fem>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Ccode>true\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"left\">地図に枠線を描画するかどうか\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"center\">\u003Cstrong>strokeColor\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Cem>String\u003C\u002Fem>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Ccode>\"#333333\"\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"left\">枠線の色\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"center\">\u003Cstrong>activeColor\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Cem>String\u003C\u002Fem>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Ccode>\"#D70035\"\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"left\">オンマウス時の都道府県の色\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"center\">\u003Cstrong>withTips\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Cem>Boolean\u003C\u002Fem>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Ccode>true\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"left\">オンマウス時にチップヘルパーを表示するかどうか\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"center\">\u003Cstrong>regionality\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Cem>Boolean\u003C\u002Fem>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Ccode>false\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"left\">地域表示を有効化するかどうか\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"center\">\u003Cstrong>regions\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Cem>Array(Object)\u003C\u002Fem>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Ccode>null\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"left\">地域の定義。初期プリセットとして「\u003Ca href=\"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002F%E6%97%A5%E6%9C%AC%E3%81%AE%E5%9C%B0%E5%9F%9F\">八地方区分\u003C\u002Fa>」が定義されている\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"center\">\u003Cstrong>uniformly\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Cem>Boolean\u003C\u002Fem>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Ccode>false\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"left\">地図を統一色で塗りつぶすかどうか。この設定は regions や prefColors より優先される\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"center\">\u003Cstrong>uniformColor\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Cem>String\u003C\u002Fem>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Ccode>\"#C0C0C0\"\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"left\">統一色の色\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"center\">\u003Cstrong>prefColors\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Cem>Object\u003C\u002Fem>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Ccode>{}\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"left\">各都道府県の個別通常色。\u003Cbr \u002F>\u003Ccode>\"Tokyo\": \"#777777\",...\u003C\u002Fcode>\u003Cbr \u002F>のように英記（キャピタルケース）の都道府県名をキー、色を値としたペア値で指定する\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"center\">\u003Cstrong>width\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Cem>String\u003C\u002Fem>\u003C\u002Ftd>\n\u003Ctd align=\"center\">–\u003C\u002Ftd>\n\u003Ctd align=\"left\">地図の表示横幅。未指定時は \u003Ccode>max-content\u003C\u002Fcode> となる\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"center\">\u003Cstrong>height\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Cem>String\u003C\u002Fem>\u003C\u002Ftd>\n\u003Ctd align=\"center\">–\u003C\u002Ftd>\n\u003Ctd align=\"left\">地図の表示縦幅。未指定時は \u003Ccode>max-content\u003C\u002Fcode> となる\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>※ prefColors のキーとなる英記の都道府県名は \u003Ca href=\"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FISO_3166-2:JP\">ISO 3166-2:JP\u003C\u002Fa> に準じています。\u003C\u002Fp>\n\u003Ch3>地域の定義\u003C\u002Fh3>\n\u003Cp>オプションの\u003Ccode>regions\u003C\u002Fcode>に地域設定のオブジェクト型配列を定義することで、都道府県をグループ化することができる。グループ化された地域は\u003Ccode>regionality\u003C\u002Fcode>を有効化することで、地図の表示に反映される。\u003Cbr \u002F>\n地域の指定方法は下記の例を参照してほしい。\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">regions\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: [\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  { id: \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">1\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    name: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"人口500万人以上\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    prefs: [ \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">13\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">14\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">27\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">23\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">11\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">12\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">28\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">1\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">40\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ],\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    color: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"#EF857D\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    active: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"#00A960\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  { id: \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">2\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    name: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"人口200万人以上500万人未満\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    prefs: [ \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">22\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">8\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">34\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">26\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">4\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">15\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">20\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ],\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    color: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"#F6B483\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    active: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"#00A960\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  { id: \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">3\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    name: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"人口100万人以上200万人未満\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    prefs: [ \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">21\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">9\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">10\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">33\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">7\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">24\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">43\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">46\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">47\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">25\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">35\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">38\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">29\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">42\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">2\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">3\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">17\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">44\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">6\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">45\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">16\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ],\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    color: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"#F7B977\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    active: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"#00A960\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  { id: \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">4\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    name: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"人口100万人未満\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    prefs: [ \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">5\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">37\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">30\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">41\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">19\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">18\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">36\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">39\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">32\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">31\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ],\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    color: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"#FAD09E\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    active: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"#00A960\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">]\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch4>地域オブジェクトについて\u003C\u002Fh4>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth align=\"center\">プロパティ名\u003C\u002Fth>\n\u003Cth align=\"center\">値の型\u003C\u002Fth>\n\u003Cth align=\"left\">説明\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd align=\"center\">\u003Cstrong>id\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Cem>Integer\u003C\u002Fem>\u003C\u002Ftd>\n\u003Ctd align=\"left\">地域ID（Region ID）として内部処理の識別子に使用される。クリック時などに参照可能\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"center\">\u003Cstrong>name\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Cem>String\u003C\u002Fem>\u003C\u002Ftd>\n\u003Ctd align=\"left\">地域名。チップヘルパーに表示される文字列\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"center\">\u003Cstrong>prefs\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Cem>Array(Number)\u003C\u002Fem>\u003C\u002Ftd>\n\u003Ctd align=\"left\">地域に属する都道府県。都道府県コード（整数値）を列挙して定義する\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"center\">\u003Cstrong>color\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Cem>String\u003C\u002Fem>\u003C\u002Ftd>\n\u003Ctd align=\"left\">地域の通常色。\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"center\">\u003Cstrong>active\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Cem>String\u003C\u002Fem>\u003C\u002Ftd>\n\u003Ctd align=\"left\">地域のアクティブ色。地域に属する都道府県にマウスオーバーした時に地域全体に適用される色\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>※ 都道府県コードは\u003Ca href=\"http:\u002F\u002Fwww.kenchikushikai.or.jp\u002Ftouroku\u002Fdocuments\u002Fcode-todoufuken.pdf\">JISコード（JIS X 0401）\u003C\u002Fa>に準じた整数値となっている。\u003C\u002Fp>\n\u003Ch2>メソッド\u003C\u002Fh2>\n\u003Cp>今のところなし。\u003Cbr \u002F>\n将来的に initialized と destroy を追加する予定。\u003C\u002Fp>\n\u003Ch2>イベント\u003C\u002Fh2>\n\u003Cp>日本地図の都道府県をクリックした時にプラグイン専用のイベント \u003Cstrong>svgmap.click\u003C\u002Fstrong> が発生する。このイベントはJavaScriptのグローバルスコープのイベントハンドラでキャッチすることができる。\u003Cbr \u002F>\n使用例は下記の通り。\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">document.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">addEventListener\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'svgmap.click'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">function\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\">e\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">  var\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> prefName \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> e.target.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">getAttribute\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'data-name'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">  alert\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( prefName \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">+\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> 'がクリックされました。'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> )\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">}, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">false\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>ライセンス\u003C\u002Fh2>\n\u003Cp>このプラグインはMITライセンスです。\u003Cbr \u002F>\n個人・商用問わず、ご自由にお使いください。\u003C\u002Fp>\n\u003Cp>こんな使い方してます──とか教えていただけるととても嬉しいですw\u003C\u002Fp>\n\u003Ch2>その他\u003C\u002Fh2>\n\u003Cp>オリジナルソースは \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fka215\u002Fsvg-japan\">github\u003C\u002Fa> で公開しています。\u003Cbr \u002F>\n不具合等は\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fka215\u002Fsvg-japan\u002Fissues\">githubのissuesまで\u003C\u002Fa>お願いします。\u003C\u002Fp>\n\u003Cp>今後も選べる地図のパターンを増やしていこうと思ってますが、SVGのパスデータが結構重たいので、どこかのタイミングでパスデータを分離する構造にリファクタリングしなきゃならないかも知れないな……。\u003C\u002Fp>\n",[271,274,277,279,282,285],{"slug":272,"name":273},"japan","Japan",{"slug":275,"name":276},"javascript","JavaScript",{"slug":278,"name":278},"map",{"slug":280,"name":281},"svg","SVG",{"slug":283,"name":284},"%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3","プラグイン",{"slug":286,"name":287},"%e6%97%a5%e6%9c%ac%e5%9c%b0%e5%9b%b3","日本地図",[289,296,299,302],{"slug":290,"title":291,"date":292,"excerpt":293,"image":42,"categories":294},"controll-svg-files-by-html5","HTML5でのSVGファイル操作のおさらい","2014-10-09T12:59:39","最近、HTML5でベクターグラフィックスを取り扱う時にSVG形式のファイルを利用しているWEBサイトが増えて来ている。iOS系のデバイスが超高解像度のRetinaディスプレイを採用しているので、PCサイト向けに準備した8…",[295],{"slug":25,"name":26},{"slug":185,"title":186,"date":187,"excerpt":188,"image":189,"categories":297},[298],{"slug":25,"name":26},{"slug":123,"title":124,"date":125,"excerpt":126,"image":42,"categories":300},[301],{"slug":25,"name":26},{"slug":97,"title":98,"date":99,"excerpt":100,"image":101,"categories":303},[304],{"slug":104,"name":105},{"slug":77,"title":78,"date":79,"excerpt":80,"image":81,"categories":306},[307],{"slug":84,"name":85},{"slug":309,"title":310,"date":311,"excerpt":312,"image":313,"categories":314},"create-wordpress-theme-with-vuetify","WordPressのテーマをVuetifyで作る","2020-11-20T12:16:06","最近Vue.jsが楽しくて仕方がない。WordPressのサイト開発にもVue.js使っている今日この頃だ。今時のWordPressと云えばReactなのだが、どうもReactには私的に嫌悪感が付きまとうのだ……なぜだ…","\u002Fassets\u002Fuploads\u002F2020\u002F11\u002Fwp-vuetify-theme-hw.png",[315],{"slug":74,"name":75},1793391397317]