小説家になろうの表示を変更するブックマークレット 2

はじめに

表示変更のサンプル

小説家になろうの表示を縦書きかつ黒背景で白文字にするブックマークレットを作りました。完全な黒と白ではなくて monokai と呼ばれるカラースキームを真似てみたので色っぽいはずです。

今回のやつは色や文字サイズが決め打ちなんですが、ゆくゆくはブックマークレットをカスタマイズできるジェネレータを作りたいと思っています。

使い方

小説家になろうの本文があるページでブックマークレットを実行します。元の画面へ戻るにはページをリロード(再読み込み)します。

ブックマークレット

表示変更ブックマークレット

ブックマークレットのコード

javascript:(function(){var e="<style>#novel_no,.novel_bn,.novel_subtitle{text-align:center}body,html{height:90%}body,div,p{margin:0;padding:0}body{font-family:"font-size:16px;letter-spacing:.05em;line-height:1.7;writing-mode:vertical-rl;direction:ltr;unicode-bidi:bidi-override;color:#f8f8f2;background-color:#272822}a,a:link{color:#66d9ef}a:visited{color:#f92672}#novel_color{position:absolute;top:0;right:0;bottom:0;left:0;height:100%;max-height:600px;margin:auto;padding-right:20px;padding-left:20px;box-sizing:border-box}.novel_bn{margin:0 auto}.novel_bn:last-child{margin-top:30px}#novel_honbun,.novel_subtitle{margin-top:10px}.novel_bn a{display:inline-block;margin-right:10px;margin-left:10px}#novel_no{margin-top:15px}.novel_subtitle{font-weight:700}#novel_a,#novel_p{margin-top:10px;color:#75715e}</style>",n='<meta name="viewport" content="width=device-width, initial-scale=1">',o=$("title"),i=$("#novel_color"),t=$("#novel_a").next("novel_bn");$("head, body").empty(),$("link, style, script").remove(),$("head").append(e),$("head").append(n),$("head").append(o),$("body").append(i),$("body").append(t),$("*").removeAttr("style")})();

元になるコード

元になる JavaScript

$(function() {
var style = '<style>#novel_no,.novel_bn,.novel_subtitle{text-align:center}body,html{height:90%}body,div,p{margin:0;padding:0}body{font-family:"font-size:16px;letter-spacing:.05em;line-height:1.7;writing-mode:vertical-rl;direction:ltr;unicode-bidi:bidi-override;color:#f8f8f2;background-color:#272822}a,a:link{color:#66d9ef}a:visited{color:#f92672}#novel_color{position:absolute;top:0;right:0;bottom:0;left:0;height:100%;max-height:600px;margin:auto;padding-right:20px;padding-left:20px;box-sizing:border-box}.novel_bn{margin:0 auto}.novel_bn:last-child{margin-top:30px}#novel_honbun,.novel_subtitle{margin-top:10px}.novel_bn a{display:inline-block;margin-right:10px;margin-left:10px}#novel_no{margin-top:15px}.novel_subtitle{font-weight:700}#novel_a,#novel_p{margin-top:10px;color:#75715e}</style>'
var viewport = '<meta name="viewport" content="width=device-width, initial-scale=1">'
var title = $('title')
var novel_color = $('#novel_color')
var novel_bn = $('#novel_a').next('novel_bn')
$('head, body').empty()
$('link, style, script').remove()
$('head').append(style)
$('head').append(viewport)
$('head').append(title)
$('body').append(novel_color)
$('body').append(novel_bn)
$('*').removeAttr('style')
});

元になる CSS

html,
body {
height: 90%;
}
body,
div,
p {
margin: 0;
padding: 0;
}
body {
font-family: "Meiryo", "Helvetica", "Arial";
font-size: 16px;
letter-spacing: 0.05em;
line-height: 1.7;
writing-mode: vertical-rl;
direction: ltr;
unicode-bidi: bidi-override;
color: #f8f8f2;
background-color: #272822;
}
a,
a:link {
color: #66d9ef;
}
a:visited {
color: #f92672;
}
#novel_color {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
max-height: 600px;
margin: auto;
padding-right: 20px;
padding-left:  20px;
box-sizing: border-box;
}
.novel_bn {
margin: 0 auto;
text-align: center;
}
.novel_bn:last-child {
margin-top: 30px;
}
.novel_bn a {
display: inline-block;
margin-right: 10px;
margin-left:  10px;
}
#novel_no {
margin-top: 15px;
text-align: center;
}
.novel_subtitle {
margin-top: 10px;
font-weight: bold;
text-align: center;
}
#novel_p,
#novel_a {
margin-top: 10px;
color: #75715e;
}
#novel_honbun {
margin-top: 10px;
}

CSS だけでおしゃれなウェブアルバムを作る

JavaScript 不要CSS だけでおしゃれなウェブアルバムを作ります。

画像サイズがバラバラの場合はそれぞれに合った CSS を記述しなくてはならないので、サイズを揃えるのが望ましいです。

実際の表示

デモページ

コード

HTML

<div id="thumbnail">
<ul>
<li><a href="#disp-1"><img src="/cmp/parts/web-album/pic1-150s.jpg"></a></li>
<li><a href="#disp-2"><img src="/cmp/parts/web-album/pic2-150s.jpg"></a></li>
<li><a href="#disp-3"><img src="/cmp/parts/web-album/pic3-150s.jpg"></a></li>
<li><a href="#disp-4"><img src="/cmp/parts/web-album/pic4-150s.jpg"></a></li>
<li><a href="#disp-5"><img src="/cmp/parts/web-album/pic5-150s.jpg"></a></li>
<li><a href="#disp-6"><img src="/cmp/parts/web-album/pic6-150s.jpg"></a></li>
<li><a href="#disp-7"><img src="/cmp/parts/web-album/pic7-150s.jpg"></a></li>
<li><a href="#disp-8"><img src="/cmp/parts/web-album/pic8-150s.jpg"></a></li>
<li><a href="#disp-9"><img src="/cmp/parts/web-album/pic9-150s.jpg"></a></li>
</ul>
</div>
<div id="display">
<div id="disp-1"><a href="#anchor"><div class="close"><img src="/cmp/parts/web-album/pic1-300s.jpg"></div></a></div>
<div id="disp-2"><a href="#anchor"><div class="close"><img src="/cmp/parts/web-album/pic2-300s.jpg"></div></a></div>
<div id="disp-3"><a href="#anchor"><div class="close"><img src="/cmp/parts/web-album/pic3-300s.jpg"></div></a></div>
<div id="disp-4"><a href="#anchor"><div class="close"><img src="/cmp/parts/web-album/pic4-300s.jpg"></div></a></div>
<div id="disp-5"><a href="#anchor"><div class="close"><img src="/cmp/parts/web-album/pic5-300s.jpg"></div></a></div>
<div id="disp-6"><a href="#anchor"><div class="close"><img src="/cmp/parts/web-album/pic6-300s.jpg"></div></a></div>
<div id="disp-7"><a href="#anchor"><div class="close"><img src="/cmp/parts/web-album/pic7-300s.jpg"></div></a></div>
<div id="disp-8"><a href="#anchor"><div class="close"><img src="/cmp/parts/web-album/pic8-300s.jpg"></div></a></div>
<div id="disp-9"><a href="#anchor"><div class="close"><img src="/cmp/parts/web-album/pic9-300s.jpg"></div></a></div>
</div>
<div id="anchor"></div>

CSS

#thumbnail {
width:  100%;
height: 100%;
margin:  0;
padding: 0;
background-color: #fff;
}
#thumbnail ul {
margin: 30px 0 0 30px;
padding: 0;
list-style: none;
}
#thumbnail ul::before {
content: "";
display: block;
width: 100%;
height: 0;
line-height: 0;
margin-bottom: -30px;
}
#thumbnail ul::after {
clear: both;
content: "";
display: block;
line-height: 0;
}
#thumbnail li {
float: left;
margin-top: 30px;
}
#thumbnail li + li {
margin-left: 30px;
}
#thumbnail li:nth-child(4),
#thumbnail li:nth-child(7) {
clear: left;
margin-left: 0;
}
#thumbnail img {
width: 80%;
transition: all .1s
}
#thumbnail img:hover {
width: 100%;
margin: -10%;
transition: all .2s;
}
#display > div {
position: fixed;
z-index: -1;
top:  0;
left: 0;
width:  100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
opacity: 0;
transition: all .2s;
}
#display > div:target {
z-index: 1;
opacity: 1;
transition: all .4s;
}
#display a {
display: block;
width:  100%;
height: 100%;
cursor: default;
}
#display .close {
position: absolute;
top:  50%;
left: 50%;
margin-top:  -150px;
margin-left: -150px;
}
#display .close::after {
content: "✕ 閉じる";
display: inline-block;
position: absolute;
top: 0;
left: 100%;
padding: 5px;
color: #fff;
font-weight: bold;
word-break: keep-all;
white-space: nowrap;
background-color: rgba(0, 0, 0, .2);
cursor: pointer;
}
#anchor {
position: fixed;
width: 0;
height: 0;
line-height: 0;
}

メニューのサンプル 3

メニューのサンプルです。

実際の表示

コード

HTML

<ul id="menu">
<li id="item1"><a href="">ITEM 1</a></li>
<li id="item2"><a href="">ITEM 2</a></li>
<li id="item3"><a href="">ITEM 3</a></li>
<li id="item4"><a href="">ITEM 4</a></li>
<li id="item5"><a href="">ITEM 5</a></li>
</ul>

CSS

#menu {
margin: 0;
padding: 0;
line-height: 1;
list-style: none;
}
#menu::after {
clear: both;
content: "";
display: block;
line-height: 0;
}
#menu li {
float: left;
position: relative;
z-index: 1;
}
#menu li + li {
margin-left: 5px;
}
#menu li::before,
#menu li::after {
content: "";
display: block;
position: absolute;
z-index: -1;
line-height: 0;
}
#menu li::before {
bottom: 0;
width: 100%;
height: 2px;
}
#menu li::after {
top: 0;
left: 0;
width: 2px;
height: 100%;
}
#menu li:hover::before {
bottom: calc(100% - 2px);
transition-property: bottom;
transition-timing-function: linear;
transition-duration: 0.1s;
transition-delay: 0;
}
#menu li:hover::after {
left: calc(100% - 2px);
transition-property: left;
transition-timing-function: linear;
transition-duration: 0.1s;
transition-delay: 0;
}
#menu li:hover a {
transition-property: color;
transition-timing-function: linear;
transition-duration: 0.1s;
transition-delay: 0;
}
#menu a {
display: block;
margin: 0;
padding: 0.75em 1em;
color: #333;
font-weight: bold;
text-decoration: none;
}
#item1::before,
#item1::after {
background-color: #dd3333;
}
#item2::before,
#item2::after {
background-color: #dd9933;
}
#item3::before,
#item3::after {
background-color: #81d742;
}
#item4::before,
#item4::after {
background-color: #8224e3;
}
#item5::before,
#item5::after {
background-color: #52C0D4;
}
#item1:hover a {
color: #dd3333;
}
#item2:hover a {
color: #dd9933;
}
#item3:hover a {
color: #81d742;
}
#item4:hover a {
color: #8224e3;
}
#item5:hover a {
color: #52C0D4;
}

メニューのサンプル 2

メニューのサンプルです。

実際の表示

コード

HTML

<ul id="menu">
<li id="item1"><a href="">ITEM 1</a></li>
<li id="item2"><a href="">ITEM 2</a></li>
<li id="item3"><a href="">ITEM 3</a></li>
<li id="item4"><a href="">ITEM 4</a></li>
<li id="item5"><a href="">ITEM 5</a></li>
</ul>

CSS

#menu {
margin: 0;
padding: 0;
line-height: 1;
list-style: none;
}
#menu::after {
clear: both;
content: "";
display: block;
line-height: 0;
}
#menu li {
float: left;
position: relative;
z-index: 1;
}
#menu li + li {
margin-left: 5px;
}
#menu li::before {
content: "";
display: block;
position: absolute;
z-index: -1;
bottom: 0;
width: 100%;
height: 5px;
line-height: 0;
}
#menu li:hover::before {
bottom: 100%;
transition-property: bottom;
transition-timing-function: linear;
transition-duration: 0.1s;
transition-delay: 0;
}
#menu li:hover a {
transition-property: color;
transition-timing-function: linear;
transition-duration: 0.1s;
transition-delay: 0;
}
#menu a {
display: block;
margin: 0;
padding: 0.75em 1em;
color: #333;
font-weight: bold;
text-decoration: none;
}
#item1::before {
background-color: #dd3333;
}
#item2::before {
background-color: #dd9933;
}
#item3::before {
background-color: #81d742;
}
#item4::before {
background-color: #8224e3;
}
#item5::before {
background-color: #52C0D4;
}
#item1:hover a {
color: #dd3333;
}
#item2:hover a {
color: #dd9933;
}
#item3:hover a {
color: #81d742;
}
#item4:hover a {
color: #8224e3;
}
#item5:hover a {
color: #52C0D4;
}

メニューのサンプル 1

メニューのサンプルです。

実際の表示

コード

HTML

<ul id="menu">
<li id="item1"><a href="">ITEM 1</a></li>
<li id="item2"><a href="">ITEM 2</a></li>
<li id="item3"><a href="">ITEM 3</a></li>
<li id="item4"><a href="">ITEM 4</a></li>
<li id="item5"><a href="">ITEM 5</a></li>
</ul>

CSS

#menu {
margin: 0;
padding: 0;
line-height: 1;
list-style: none;
}
#menu::after {
clear: both;
content: "";
display: block;
line-height: 0;
}
#menu li {
float: left;
position: relative;
z-index: 1;
}
#menu li + li {
margin-left: 5px;
}
#menu li::before {
content: "";
display: block;
position: absolute;
z-index: -1;
bottom: 0;
width: 100%;
height: 5px;
line-height: 0;
}
#menu li:hover::before {
height: 100%;
transition-property: height;
transition-timing-function: linear;
transition-duration: 0.1s;
transition-delay: 0;
}
#menu li:hover a {
color: #fff;
transition-property: color;
transition-timing-function: linear;
transition-duration: 0.1s;
transition-delay: 0;
}
#menu a {
display: block;
margin: 0;
padding: 0.75em 1em;
color: #333;
font-weight: bold;
text-decoration: none;
}
#item1::before {
background-color: #dd3333;
}
#item2::before {
background-color: #dd9933;
}
#item3::before {
background-color: #81d742;
}
#item4::before {
background-color: #8224e3;
}
#item5::before {
background-color: #52C0D4;
}

iframe の親のリンクで子のアンカーリンクへスクロールする

iframe の親にあるリンクをクリックすると、 iframe 内がアンカーリンクへスクロールします。

実際の表示

コード

HTML

<iframe id="if1" src="/cmp/parts/iframe-link/iframe-child.html"></iframe>
<div id="link">
<ul class="if-link">
<li><a href="#p1"  target-iframe="if1">#p1</a></li>
<li><a href="#p2"  target-iframe="if1">#p2</a></li>
<li><a href="#p3"  target-iframe="if1">#p3</a></li>
・
・
・
</div>

CSS

#if1 {
width: 100%;
height: 300px;
}
#link::after {
clear: both;
content: "";
display: block;
line-height: 0;
}
.if-link {
float: left;
list-style: none;
}
.if-link + .if-link {
margin-left: 40px;
}

JavaScript

$(function() {
$('.if-link').on('click', 'a', function(event) {
event.preventDefault()
var target = $(this).attr('target-iframe')
var href = $(this).attr('href').slice(1)
var content = $('#' + target).contents()
$('html, body', content).animate({scrollTop: content.find('[name=' + href + ']').offset().top}, 300)
})
})

チェックボックスで要素の表示・非表示をコントロールする

  • チェックボックスで要素の表示・非表示をコントロールする JavaScript です。
  • チェックボックスをいくらでも増やせる設計になっています。
  • ちょっといじれば表示・非表示にする要素を増やすのも簡単です。

実際の表示

コンテンツ 1
コンテンツ 2
コンテンツ 3

コード

HTML

<div id="checkbox">
<input type="checkbox" target="content-1">
<input type="checkbox" target="content-2">
<input type="checkbox" target="content-3">
</div>
<div id="contents">
<div id="content-1">
コンテンツ 1
</div>
<div id="content-2">
コンテンツ 2
</div>
<div id="content-3">
コンテンツ 3
</div>
</div>

CSS

#content-1,
#content-2,
#content-3 {
float: left;
display: none;
width: 100px;
height: 100px;
text-align: center;
vertical-align: middle;
}
#content-1 {
background-color: #f88;
}
#content-2 {
background-color: #8f8;
}
#content-3 {
background-color: #88f;
}

JavaScript

$(function() {
$(document).ready(function() {
$('[type="checkbox"]').trigger('change')
})
$('#checkbox').on('change', '[type="checkbox"]', function() {
var target = $(this).attr('target')
var property = $(this).prop('checked')
if (property) {
$('#' + target).css('display', 'initial')
} else {
$('#' + target).css('display', 'none')
}
})
})

Twitter ウェブのツイートを自動的にアンロードするブックマークレット

一日中 Twitter に入り浸っていると古いツイートが溜まり過ぎてブラウザの動作が遅くなります。だから自動的にアンロードするブックマークレットを作りました。

  • Twitter ウェブの古いツイートをアンロードするブックマークレットです。
  • 50 件を残してアンロードします。
  • 1 秒おきに実行されます。
  • 画面高さの 20 倍スクロールするとアンロードが止まります。
  • ブックマークレットが実行されると、画面右下に「トップへ戻る」ボタンが表示されます。
  • コードの最初のところにある interval 、 scroll 、 tweets の変数を編集すると動作が変わります。

コード

javascript:void((function(){var interval=1e3,scroll=20,tweets=50;$("head").append("<style>#tul-btt{position:fixed;bottom:30px;right:30px}</style>"),$("body").append('<button id="tul-btt" class="EdgeButton EdgeButton--primary">トップへ戻る</button>'),$("#tul-btt").on("click",function(){$("html, body").animate({scrollTop:0},300)}),setInterval(function(){var t=document.getElementById("stream-items-id"),e=document.getElementsByClassName("stream-item").length;if(window.scrollY*scroll>window.innerHeight||tweets+1>e)return!0;for(var l=e-tweets-1;l>=0;l--){var n=t.lastElementChild;t.removeChild(n),n=null}},interval)})());

HTML で作った元素周期表

はじめに

HTML 、 CSS元素周期表を作りました。

HTML なのでウェブサイトへ掲載するには画像や PDF より適しているのではないでしょうか。

著作権は主張しますが、ご自由のご利用ください。改変、再配布など自由です。

実際の表示

元素周期表

キャプチャ画像

消してもいいコード

ヘッダ情報

<!-- 消してもいい部分 ここから -->
<meta name="description" content="HTML で作った元素周期表です">
<meta name="keywords" content="元素周期表, 元素, 周期, 表,priodic table, periodic, table, html, css">
<meta property="og:locale" content="ja_JP">
<meta property="og:site_name" content="Yayoi Thyme">
<meta property="og:title" content="元素周期表">
<meta property="og:url" content="http://yayoi-thyme.com/etc/periodic-table/">
<meta property="og:type" content="webpage">
<meta property="og:description" content="HTML で作った元素周期表です">
<meta property="og:image" content="http://yayoi-thyme.com/etc/periodic-table.png">
<meta property="og:image:width" content="504">
<meta property="og:image:height" content="252">
<meta property="article:publisher" content="https://www.facebook.com/yayoi.thyme">
<meta property="fb:admins" content="yayoi.thyme">
<meta itemprop="name" content="元素周期表">
<meta itemprop="description" content="HTML で作った元素周期表です">
<meta itemprop="image" content="http://yayoi-thyme.com/etc/periodic-table.png">
<meta name="twitter:title" content="元素周期表">
<meta name="twitter:description" content="HTML で作った元素周期表です">
<meta name="twitter:image" content="http://yayoi-thyme.com/etc/periodic-table.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@camellia">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="publisher" href="https://plus.google.com/u/0/+sasanquacamellia">
<link rel="canonical" href="http://yayoi-thyme.com/etc/periodic-table/">
<!-- 消してもいい部分 ここまで -->

フッタ情報

<!-- 消してもいい部分 ここから -->
<footer>
<h2>このデータについて</h2>
<p>この表は HTML と CSS で構成されています。 CSS は HTML ファイルの中に記述していますので、このファイルだけをダウンロードしてそのまま利用することができます。 head タグ内に SEO 的な記述が多数ありますので、その辺りを削除するといいかもしれません。まぁ削除しなくてもなんら問題ないですが。</p>
</footer>
<!-- 消してもいい部分 ここまで -->

テキストボックスの入力でリストをフィルタする

はじめに

  • テキストボックスに入力すると、リストの中から部分一致でフィルタします。
  • 表示されたリストが 1 件になったとき Enter するとリンクを表示します。
  • リンクは別ウィンドウを開きます。
  • リストは JSON 形式の別ファイルです。

実際の表示

    コード

    HTML

    <input type="text" id="input">
    <ul id="output"></ul>

    JavaScript

    $(function() {
    var list
    var hits = []
    // リスト取得
    $.ajax({
    url: '/cmp/parts/list-filter/prefectures.json'
    })
    .done(function(data) {
    list = data
    })
    .fail(function() {
    alert('ページを読み直してください')
    })
    // イベント処理
    $(window).on('load', function() {
    $('#input').trigger('input')
    })
    $('#input').on({
    'input': update,
    'keypress': typeEnter})
    $('#output').on('click', 'a', function(event) {
    event.preventDefault();
    var url = $(this).attr('href')
    goLink(url)
    })
    // 関数
    function update() {
    $('#output').empty()
    var input = $(this).val()
    if (input !== '') {
    hits = list.filter(function(index) {
    return (index.name.indexOf(input) > -1)
    })
    for (var i = 0; i <= hits.length - 1; i++) {
    $('#output').append('<li><a class="pref-link" href="' + hits[i].url + '">' + hits[i].name + '</a></li>')
    }
    } else {
    for (var i = 0; i <= list.length - 1; i++) {
    $('#output').append('<li><a class="pref-link" href="' + list[i].url + '">' + list[i].name + '</a></li>')
    }
    }
    }
    function typeEnter(event) {
    if (hits.length == 1 && event.keyCode == 13) {
    goLink(hits[0].url)
    }
    }
    function goLink(url) {
    window.open(url, '', 'width=500, height=500, menubar=0, toolbar=1, status=1, scrollbars=1, resizable=1')
    }
    })

    JSON

    [
    {
    "name": "北海道",
    "url": "http://www.pref.hokkaido.lg.jp/"
    },
    {
    "name": "青森県",
    "url": "http://www.pref.aomori.lg.jp/"
    },
    {
    "name": "岩手県",
    "url": "http://www.pref.iwate.jp/"
    },
    {
    "name": "宮城県",
    "url": "http://www.pref.miyagi.jp/"
    },
    {
    "name": "秋田県",
    "url": "http://www.pref.akita.lg.jp/"
    },
    {
    "name": "山形県",
    "url": "http://www.pref.yamagata.jp/"
    },
    {
    "name": "福島県",
    "url": "http://www.pref.fukushima.lg.jp/"
    },
    {
    "name": "茨城県",
    "url": "http://www.pref.ibaraki.jp/"
    },
    {
    "name": "栃木県",
    "url": "http://www.pref.tochigi.lg.jp/"
    },
    {
    "name": "群馬県",
    "url": "http://www.pref.gunma.jp/"
    },
    {
    "name": "埼玉県",
    "url": "http://www.pref.saitama.lg.jp/"
    },
    {
    "name": "千葉県",
    "url": "http://www.pref.chiba.lg.jp/"
    },
    {
    "name": "東京都",
    "url": "http://www.metro.tokyo.jp/"
    },
    {
    "name": "神奈川県",
    "url": "http://www.pref.kanagawa.jp/"
    },
    {
    "name": "新潟県",
    "url": "http://www.pref.niigata.lg.jp/"
    },
    {
    "name": "富山県",
    "url": "http://www.pref.toyama.jp/"
    },
    {
    "name": "石川県",
    "url": "http://www.pref.ishikawa.lg.jp/"
    },
    {
    "name": "福井県",
    "url": "http://www.pref.fukui.lg.jp/"
    },
    {
    "name": "山梨県",
    "url": "http://www.pref.yamanashi.jp/"
    },
    {
    "name": "長野県",
    "url": "http://www.pref.nagano.lg.jp/"
    },
    {
    "name": "岐阜県",
    "url": "http://www.pref.gifu.lg.jp/"
    },
    {
    "name": "静岡県",
    "url": "http://www.pref.shizuoka.jp/"
    },
    {
    "name": "愛知県",
    "url": "http://www.pref.aichi.jp/"
    },
    {
    "name": "三重県",
    "url": "http://www.pref.mie.lg.jp/"
    },
    {
    "name": "滋賀県",
    "url": "http://www.pref.shiga.lg.jp/"
    },
    {
    "name": "京都府",
    "url": "http://www.pref.kyoto.jp/"
    },
    {
    "name": "大阪府",
    "url": "http://www.pref.osaka.lg.jp/"
    },
    {
    "name": "兵庫県",
    "url": "http://web.pref.hyogo.lg.jp/"
    },
    {
    "name": "奈良県",
    "url": "http://www.pref.nara.jp/"
    },
    {
    "name": "和歌山県",
    "url": "http://www.pref.wakayama.lg.jp/"
    },
    {
    "name": "鳥取県",
    "url": "http://www.pref.tottori.lg.jp/"
    },
    {
    "name": "島根県",
    "url": "http://www.pref.shimane.lg.jp/"
    },
    {
    "name": "岡山県",
    "url": "http://www.pref.okayama.lg.jp/"
    },
    {
    "name": "広島県",
    "url": "http://www.pref.hiroshima.lg.jp/"
    },
    {
    "name": "山口県",
    "url": "http://www.pref.yamaguchi.lg.jp/"
    },
    {
    "name": "徳島県",
    "url": "http://www.pref.tokushima.jp/"
    },
    {
    "name": "香川県",
    "url": "http://www.pref.kagawa.lg.jp/"
    },
    {
    "name": "愛媛県",
    "url": "http://www.pref.ehime.jp/"
    },
    {
    "name": "高知県",
    "url": "http://www.pref.kochi.lg.jp/"
    },
    {
    "name": "福岡県",
    "url": "http://www.pref.fukuoka.lg.jp/"
    },
    {
    "name": "佐賀県",
    "url": "http://www.pref.saga.lg.jp/"
    },
    {
    "name": "長崎県",
    "url": "http://www.pref.nagasaki.lg.jp/"
    },
    {
    "name": "熊本県",
    "url": "http://www.pref.kumamoto.jp/"
    },
    {
    "name": "大分県",
    "url": "http://www.pref.oita.jp/"
    },
    {
    "name": "宮崎県",
    "url": "http://www.pref.miyazaki.lg.jp/"
    },
    {
    "name": "鹿児島県",
    "url": "http://www.pref.kagoshima.jp/"
    },
    {
    "name": "沖縄県",
    "url": "http://www.pref.okinawa.lg.jp/"
    }
    ]