スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

JSON勉強記

スマホ全盛、呼吸するようにTwitterをするという時代、正直、ホームページへのアクセス数など日に数十PVあればいいものです。
そのために日々デザインに凝ることは正直時間と労力の無駄遣いでしょう。

今はむしろ、自身のITスキルの勉強の題材として活用していることも多いです。
社会人1年目の私は、実はある会社で乗換案内のプログラムを作っていたりします。
「KR鉄道館」を運営する中で、HTMLからCSS、JavaScriptくらいは一通り経験していますが、C言語でさえ就職して初めて触ったもの。
なにぶんにもIT技術に関する専門教育を受けてきたわけではないため、実務のためには自分でいろいろ勉強してみる必要があります。

今回はサイトの情報をデータベース管理するため、JSONを導入してみました。
そもそも今ほとんどホームページを更新できていないのですが、たまに更新するときにいつも行っているルーチンワークで、こんな悩みがありました。

  • 更新情報の作成に、細かい作業が多く、煩雑である。
  • 更新情報をトップページと更新情報ページのそれぞれに同一内容を表示させているのに、それぞれ手作業で更新していたため、面倒である。

そこで今回、次のような仕様で、更新作業を簡略化すべく考えました。

  • 更新情報データはデータベース化して、複数のページから同じファイルに情報を呼びにいく。
  • HTMLを自動生成する際、トップページ用と更新情報ページ用で、生成方法を分ける。
  • トップページ用:データベースのうち最新の5件を表示する。
  • 更新情報ページ用:指定された年の情報をすべて表示する。
  • 見た目はJSON導入前後で変化しないよう配慮する。

「てつたのアルバム」も、各アルバム情報(タイトル、キャプション、作成日等)のデータベースを作り、そこから各ページを接続させて構築しているのですが、JSONをまともに知らなかった時分、JavaScriptの配列を使ってこれを実現していました。
しかし、JavaScriptの配列をそのままデータベースとして使うのはあまりスマートとはいえないため、もっときれいに作りたいと考えていました。

そこで今回は、JSONを使ってデータベースを作り、そのデータを基に自動でページ内容が更新できるようにしました。

1.データベースの作成


JSONでデータを作ります。今回はこんな感じにしてみました。

data.json
{
	"data" : [
		{
			"ymd"	:	20170218,
			"mark"	:	"a",
			"url"	:	"album/",
			"text"	:	"「増毛の記憶~2016」ほかアルバム3点を公開しました。"
		},
		{
			"ymd"	:	20160522,
			"mark"	:	"o",
			"url"	:	"selfintro.html",
			"text"	:	"「管理人紹介」を更新しました。"
		},
		{
			"ymd"	:	20160604,
			"mark"	:	"o",
			"url"	:	"link.html",
			"text"	:	"リンク集を更新しました。"
		},
		{
			"ymd"	:	20160529,
			"mark"	:	"o",
			"url"	:	"selfintro.html",
			"text"	:	"「管理人紹介」を更新しました。"
		},
		{
			"ymd"	:	20160405,
			"mark"	:	"o",
			"url"	:	"selfintro.html",
			"text"	:	"「管理人紹介」を更新しました。"
		},
		{
			"ymd"	:	19001231,
			"mark"	:	"m",
			"url"	:	"",
			"text"	:	"JSONテストデータ3"
		},
		{
			"ymd"	:	19001101,
			"mark"	:	"s",
			"url"	:	"",
			"text"	:	"JSONテストデータ2-1"
		},
		{
			"ymd"	:	19001031,
			"mark"	:	"si",
			"url"	:	"",
			"text"	:	"JSONテストデータ2"
		},
		{
			"ymd"	:	19000101,
			"mark"	:	"b",
			"url"	:	"index.html",
			"text"	:	"JSONテストデータ1"
		}
	],
	
	"markdef" : {
		"a" : "アルバム",
		"b" : "BVE",
		"s" : "駅",
		"m" : "動画・音",
		"si": "サイト",
		"o" : "その他"
	}

}

{ }(大かっこ)を使うと連想配列:オブジェクトを作成でき、「"key" : "value"」の形で値が設定できます。
また、[ ](角かっこ)を使うことで、0番から始まる各種プログラム言語でおなじみの配列をつくることができます。

今回はこれを組み合わせて、"data"のキーに各更新情報の配列をつくり、その中にそれぞれオブジェクトを作りました。
"ymd":更新日。データの整理に最も重要。
"mark":行頭のジャンルマーク。
"url":リンク先URL。ルートディレクトリを基準に相対パスで記述しています。
"text":更新情報文の本文。

最初の5件は実際に使うデータ、残りの1900年を指定したデータはテスト用のダミーデータです。

なお、"markdef"キーには、各ジャンルマークの記号に対する日本語名を定義しています。ジャンルマーク画像の代替テキストとして使用します。

2.JavaScriptコードの作成


そして、このJSONを呼び出すために書いたソースがこちらです。

updates.js
// HTTP通信用、共通関数
function createXMLHttpRequest(cbFunc)
{
	var XMLhttpObject = null;
	try{
		XMLhttpObject = new XMLHttpRequest();
	}catch(e){
		try{
			XMLhttpObject = new ActiveXObject("Msxml2.XMLHTTP");
		}catch(e){
			try{
				XMLhttpObject = new ActiveXObject("Microsoft.XMLHTTP");
			}catch(e){
				return null;
			}
		}
	}
	if (XMLhttpObject) XMLhttpObject.onreadystatechange = cbFunc;	//ファイルの読み込み完了時の動作
	return XMLhttpObject;
}

// document.getElementById
function $(tagId)
{
	return document.getElementById(tagId);
}

function writeData(position, mode)	//ファイル名、表示するID、動作モード
{
	fName = 'updates/data.json'
	httpObj = createXMLHttpRequest(function(){displayData(position, mode)});	//クロージャにすると引数を収められる
	if (httpObj)
	{
		//リクエストのタイプを設定
		httpObj.open("GET", fName, true);
		//キャッシュは読みに行かせない
		httpObj.setRequestHeader('Pragma', 'no-cache');   
		httpObj.setRequestHeader('Cache-Control', 'no-cache');                    
		httpObj.setRequestHeader('If-Modified-Since', 'Sat, 01 Jan 2000 00:00:00 GMT');
		//リクエストを送信
		httpObj.send();
	}
}
function displayData(position, mode)
{
	if ((httpObj.readyState == 4) && (httpObj.status == 200))	//読み込み完了
	{
		$(position).innerHTML = parseJSON(httpObj.responseText, mode);
	}
}
// JSONのデータを解析して表示
function parseJSON(jsData, mode)
{
	var data = JSON.parse(jsData);
	var resultData = "";
	for(var i=0; i<data.data.length; i++)
	{
		//データを変数に収める
		var ymd		= 	data.data[i].ymd;	// 日付
		var mark	= 	data.data[i].mark;	// マーク記号
		var url		= 	data.data[i].url;	// URL
		var text	=	data.data[i].text;	// 情報内容
		
		var hit = false;
		
		if(mode >= 1900){	//年指定モード
			if(Math.floor(ymd / 10000) == mode){
				hit = true;
			}
		}
		else{				//表示数指定モード
			if(i < mode){
				hit = true;
			}
			else{
				break;
			}

		}
		
		if(hit){
			var showymd = (("0" + Math.floor(ymd / 10000) % 100).slice(-2)) + '.' + Math.floor(ymd / 100) % 100 + '.' + ymd % 100;
			resultData += '<p><img src="m_' + mark + '.gif" width="50" height="15" alt="' + data.markdef[mark] + '" class="umark">'
					+ showymd + ' ';
			
			//URL指定がないときはリンクを外す
			if(url != ""){
				resultData += '<a href="' + url + '">';
			}
			
			resultData += text;
			
			if(url != ""){
				resultData += '</a>';
			}
			
			resultData += '</p>';
		}
	}
	return resultData;
}



ページには次のようにしてコードを埋めました。

(<head>~</head>内)
<script type="text/javascript" src="updates/updates.js"></script>

(トップページ:<body>~</body>内)
<div id = "jsondata"></div>
<!-- JSON化 2017.2.18 -->
<script type="text/javascript">
	writeData('jsondata', 5)
</script>

(更新情報ページ:<body>~</body>内)
<div id="u_body2">
</div>
<script type="text/javascript">
	writeData('u_body2', 2017)
</script>

各ページから、writeData関数で指定したIDの位置に情報を出力します。
引数として、第一引数に出力先のID、第二引数に出力モードを設定しました。
第二引数の出力モードは、1900以上の時はその年の全データを出力、1900未満の時は最新のデータから指定した件数のデータを出力させることとしました。

writeData関数から呼び出すcreateXMLHttpRequest()関数で、まずAjaxのXMLHttpRequestオブジェクトを作成します。
このとき、引数に、JSONファイル(data.json)の読み込みが終了したときに行う処理を記載するのですが、関数を記載する際、そのまま「関数(引数)」と記述すると、指定した関数の実行前に引数の内容が評価され実行されてしまいます。
そうではなくて、ちゃんと必要な時にその引数を伴って関数が実行できるようにするために、クロージャの形を使って、処理させたい関数をもう一度"function(){}"の形で包んであげると、中身を実行させないで引数として渡すことができました(31行目)。

無事にXMLHttpRequestオブジェクトが作成できれば、このオブジェクトのhttpObj.onreadystatechangeの中に先の関数名を埋め込みます(18行目)。

ブラウザはJSONデータについて、結構キャッシュを利用してしまいます。
更新情報は常に最新のものを使用したいので、ブラウザのキャッシュは使用せず、都度ファイルを読みにいくように設定しています(37~39行目)。

さて、data.jsonが読み込まれると、関数displayData()が実行されます。
onreadystatechangeはreadystateが変化するたびに呼び出されますが、
readystate=4、status=200のときがロード成功を指すそうなので、このときに関数parseJSON()を呼びます。
この第一引数のhttpObj.responseTextに、data.jsonの文字列が入っています。

まず54行目で、eval()関数JSON.parse()がdata.jsonの内容を解釈してJavaScriptで使うオブジェクトの形に変換します。
「この関数一つでJSONを解釈できる、だからとても扱いやすい!」が標榜されているのですが、JSONの記述法は結構厳しめで、ここでちゃんとエラーなく変換できるまでに時間がかかりました。
現在eval()関数は推奨されていないということで、記法を訂正しました。ご指摘いただきました竹麻呂さま、ありがとうございました。(2/19 4:30)

更新情報データの一つ一つがオブジェクトとその配列で構成されているので、for文をぶん回して項目ごとに内容を解釈していきます(59~62行目)。
ここでやっと、HTMLから引き継いできた引数modeを使います。
modeが1900以上なら年指定モードとみなし、指定した年のデータのみを使うように処理します。
また、modeがそれ未満なら表示数指定モードとし、ループカウンタ変数iの値を利用して指定個数だけデータを抽出します。

抽出したデータだけを変数resultDataに蓄積して返り値としてリターンします。
$(position).innerHTMLを使って、positionに指定したIDの位置にデータを書き出します。
document.getElementByldという長ったらしいオブジェクト名を省略するために、$()という関数の形に括って出力しているそう。jQueryでよく使う記法らしいです。

こうして一日かけて更新情報データベースのJSON化が完成しました。
実際のところ、この工数にペイできるほど今後の更新があるのか未知数ですが(笑)、現在様々な分野で導入が進むJSONを学ぶいい機会になったと思います。

ITは目的ではなく手段でなければなりませんので、やりたいことを確実に実現させる方法として、必要なものはこれからも吸収していきたいと思っています。

参考文献



スポンサーサイト

【英国見聞録 No.6】ロンドン地下鉄の運賃制度とオイスターカード

しばらく記事をご無沙汰にしてしまいましたが、今回はロンドン地下鉄の運賃制度についてお話ししたいと思います。

ロンドンの地下鉄は、言わずと知れた世界の地下鉄の先駆け。
その開業当初は、蒸気機関車が客車を牽引するスタイルで、みな煙にまみれながら利用していた、なんて有名なエピソードもある、都市交通改革のパイオニアですね。

London Tube - チューブ…ロンドンの地下鉄
ロンドンの地下鉄は「チューブ」という愛称のとおり、
古い線区では小断面のトンネルに合わせた形状の車両を使用している。
ベーカールー線ウォータールー駅にて

都市高速道路が整備されていないロンドン中心部にあっては、高頻度定時運転の地下鉄は現在でも市民の欠かせない足であり、日々多くの人に利用されています。
いまだに吊り掛け式の電車が多く走るのも、てっちゃん的魅力だったりします。

その出改札業務を簡素化するために、ロンドンにも、日本のSuicaに続いて登場した「オイスターカード」という非接触式ICカードが存在します。
基本的な仕様はSuicaに似ており、現金やクレジットカードでカードにチャージ(現地ではトップアップという)をし、その残額を用いて乗車するという設計は変わりません。

Oyster Card - オイスターカード
オイスターカードと自動改札機。黄色いところがカードの読み取り部分。
自動改札機はオフィスビルの入館ゲートに似たシンプルな形状をしている

さて、このロンドンの地下鉄の運賃ですが、日本とはまったく違う形で運賃を計算します。その大きな特徴を挙げると、次のようになります。

1.各駅を地域(ゾーン)に分け、どのゾーンからどのゾーンへ乗車したかによって運賃を決定する
2.IC運賃ときっぷ運賃の差は、日本以上に歴然
3.ICカードを使用した場合、キャップ機能で引去り上限額以上は自動的に引去られない

詳しく見ていきましょう。


1.各駅を地域(ゾーン)に分け、どのゾーンからどのゾーンへ乗車したかによって運賃を決定する


日本では、一部の均一運賃導入線区を除いて、鉄道の運賃はすべて100m単位の営業キロを基準にして計算しています。
「乗った距離だけ運賃を払う」という考え方は、路線網が入り組んでいない線区では大変合理的ですが、首都圏や関西圏のように、多くの路線が複雑に入り組み、目的地への経路が無数に存在するような区間では、出改札いずれをとってもあまり賢明とはいえません。

世界初の地下鉄だけあり、ロンドンの地下鉄も相当複雑に入り組んだ路線網をしています。
そのため、運賃収受を合理化するために、都心部からの距離で駅を複数の「ゾーン」に分け、ゾーン間にそれぞれ運賃を設定することとしています。
ロンドン中心部は「ゾーン1」となり、郊外に行くにしたがって「ゾーン2」、「ゾーン3」…と数字が増えていきます。
なお、運賃の割高感を低減するため、一部の駅は複数のゾーンにまたがって設けられていることもあります。

2.IC運賃ときっぷ運賃の差は、日本以上に歴然


日本では、2014年4月の消費税増税を機に、JR東日本エリアでICカード用1円単位運賃が設定されました。
この運賃制度や運用に当たっては賛否両論がありましたが、実際のところ、10円単位運賃(きっぷ運賃)は1円単位運賃の1円部分を切り上げないし四捨五入して算出しているにすぎないため、その差は最大でも9円と微々たるものにはなります。

ロンドンの地下鉄運賃は、そうはなりません。

先にご紹介した、オイスターカード等の非接触式カードを使った場合の運賃(注 執筆日時点)ですが…


例)ゾーン1内各駅相互間で乗車した場合
  IC  2.40ポンド(約320円。ただし執筆当時のレート、以下同)
  きっぷ 4.90ポンド(約660円)

なんときっぷ運賃はICの2倍以上。
日本でたかが最大9円の差を騒いでいたのとは比較にならないくらいの差ですね。
ロンドン市民は、それを承知で、ほぼ全員ICカードで乗降しています。

ちなみに、イギリスの鉄道運賃の刻みは10ペンス(0.10ポンド)です。
ポンド通貨の最小取引単位は1ペンス(0.01ポンド)ですから、日本でいう10円単位運賃と同じようなイメージといえるでしょう。
「IC決済なら単位が細かくても問題ないだろう」と1円単位運賃を断行した日本とは大きな違いです。

3.ICカードを使用した場合、キャップ機能で引去り上限額以上は自動的に引去られない


オイスターカードには、日本のIC乗車券にはない強力なシステムがあります。

それが、この「キャップ」機能にあります。


簡単にその機能をご説明いたしますと、

「その日利用したゾーンと時間帯に応じて、SFの引去り上限額を設定し、その上限額に達した場合、それ以上はSFを引去らない」というものです。


ゾーンと時間帯別のキャップ額一覧はロンドン交通局サイトに掲載されています。

http://content.tfl.gov.uk/adult-fares.pdf


たとえば、ロンドン都心部「ゾーン1」のみを利用した場合のキャップ額は時間帯に関係なく6.50ポンドです

同区間のIC普通運賃が2.40ポンドですので、3回乗車するとこのキャップ額に達し、それ以上は引去られなくなります。


一日乗車券を買って元が取れるかどうかを迷ったり、いざ乗車した後でその乗車券では損をすることがわかったりしたというご経験はどなたもおありかと思いますが、オイスターカードにはICの利点を活かしてその心配をさせない強みがあります。


なお、オイスターカードとは別に一日乗車券(トラベルカード1日用)も発売されていますが、その発売額はオイスターによるキャップ額と同額もしくは高く設定されていますので、短期間の利用であればオイスター利用のほうが断然お得になります。

(連続5日間以上の長期にわたり利用する場合は、定期券タイプのトラベルカードが1週間からの有効期間で発売されていますので、こちらのほうがお得になってきます)


London Tube - チューブ…ロンドンの地下鉄
「ロンドン交通庁は非営利です。
なぜなら収入はすべて運行とサービスの改善に使われるからです」
…と言われても、日本人には高すぎる、イギリスの物価であった

London Tube - チューブ…ロンドンの地下鉄
イギリスでは、エスカレーターは「右に乗り左を空ける」大阪方式。
そもそも今の日本ではエスカレーターを歩行することを事業者として推奨しないので、
こういったところに安全と責任問題に関する意識の差が垣間見える


その他、オイスターカードのうれしい機能たち


オイスターカードにもデポジット制度があり、その額は3.00ポンド(約400円)です。

カードの購入、チャージともにクレジットカードが利用でき、クレジットカードでチャージする方法が限られている日本の後進ぶりが目に見えてきます。
(日本の後進ぶりといえば、ほかにも言葉の壁だのWi-Fi環境が貧弱だの色々あるのは承知の上ですが本稿の筋ではないので省きます)

日本の交通系ICカードにない特徴として、残額が10ポンド以下のときは券売機を旅客が操作するだけで残額のみの払い戻しを受けることができます
この点も、短期滞在者のオイスターカード導入を後押しする、日本より進んだサービスといえるのではないでしょうか。
私も、オイスターを使い倒したあと、ヒースロー空港の駅の券売機で残額を全部現金に戻しました(カードの購入やチャージをクレジットカードで行っていても現金戻しとなります)。

London Tube - ロンドンの地下鉄
地下鉄の駅にある券売機。
チャージの際は決済の前後でそれぞれカードをタッチするというのが少々面倒。
ただ、どこでもクレジットカードが使えるというのは大変便利である。
ちなみに、一応日本語での画面表示も可能

日本の鉄道界は、実務の面でも趣味の面でも、どこか「温故知新」のうちの「知新」が抜けているような印象が否めません。
年間訪日外国人2,000万人の時代。そしてまだまだと思っていながら実はもう目前に迫っている東京五輪。
彼ら、ひいては私たち日本人も、よりわかりやすく親しみやすい制度とサービスが確立されればと、切に願います。



祝、カープ優勝。

広島東洋カープ、25年ぶりリーグ優勝おめでとうございます!

ここ数年調子が上がっていましたが、今年私が観戦した3試合はすべて敗北。
むしろ運がよいと言われました。

生まれて初めての優勝ともあり大変興奮しております。

ここまで来れたのも、ひとえに広島の力。
みんなの思いが実ってきょうを迎えられたのでしょうね。

まずはお祝いを。


KR鉄道館開設15周年を迎えました

暑い中コミケで闘っている皆様、お疲れ様です。
私は、お盆休みを利用した北東パス旅行の途中、左沢線の車内で、この記事を書いています。

KR鉄道館の開設から15年を迎えることができました。
細々続けてきたにも関わらず、長年にわたって多くの皆さまのおかげにより、ここまでずっと続けて来れたのだと思います。
Twitterまわりを含め、日頃よりお世話になっております皆様に、改めて深く感謝申し上げます。

(開設日を2001年8月14日としていますが、実は初めて公開した正確な日付はわからず、ファイルの作成日などからこの日を「開設記念日」ということにしています)

元をたどりますと、KR鉄道館の原形となるサイト「KRホームページ」をAppleのサーバー上に立ち上げたのは、2001年、小学2年、7歳の時でした。
妄想の中で築き上げた架空鉄道の情報誌を電子化するという設定で、誰に読んでもらえるわけでもない、今から考えれば至極くだらないコンテンツで運営していました。

それから年月を経て、私の趣味に合わせて、
・形式別に仕分けた鉄道写真コーナー
・JavaScriptで仕掛けた電車のシミュレータ
・Windows環境を使い始めて飛び込んだBVE(代理公開も受けていました)
・横見さんの全駅下車、牛山さんの秘境駅訪問に刺激されて作った「行ってみたい駅」
・そして新しいコンセプトで再構築した写真コーナー「てつたのアルバム」
と、サイト名はそのままでも、コンテンツ自体は変遷を続けてきました。

ちなみに、公開サーバーも、AppleからGeoCities、忍者ホームページへと移り変わり、5回ほどURL変更もしてきました。

検索でサイトを見つけてきた方はご存知かもしれませんが、某有名掲示板にサイトの批判記事が流れたのも、ある意味では嬉しかったのかもしれません。

始めた当初は、10年でさえ続けられるとは思っていませんでした(10周年の年は、順調にいけば大学受験の年だったので、まさかその時サイト運営をしているなど考えもしませんでした)。
最近は、忙しく更新頻度も下がってきてしまいましたが、それでも情報発信のメディアを潰すまいと、細々更新を続けて、とうとう15年が経ってしまいました。

その間に、身の回りには様々な変化が起こり、気がつけば社会人になっていました。
その中で、趣味を発信する媒体として、小学生の時に基礎を作ったものを今でも使い続けていられることは、ちょっとした誇りでもあります。

これからも、趣味活動の一環として、皆様とのコミュニケーションの拠点としてサイトを活用してまいる所存ですので、今後ともご支援のほどよろしくお願いいたします。


【英国見聞録No.5】指定席

Reserved Seat - 指定席

イギリスの鉄道を象徴する光景のひとつに、この座席指定カードがあるのではないでしょうか。

イギリスの鉄道運賃は座席等級別に定められており、1等用と2等用で運賃が異なります。
また、日本のような急行券の仕組みはなく、乗車券さえ持っていれば、時速200kmの高速列車でも都市近郊の通勤電車でも乗車することができます。
(ちなみに寝台列車には寝台料金の設定があります)

また、中距離列車以上になると、座席指定をすることもできます。
日本円で数百円程度の座席指定料金を払うことで、確実に座席を確保することができるという仕組みです。
区間によっては混雑する区間もあるため、立席を回避したい場合には重宝します。

ところで、座席指定制を敷く場合に、日本で行われているような「指定席車両」「自由席車両」の区別がイギリスにはありません
座席指定を受けている区間はもちろんその指定券の保有者の専用席となりますが、指定を受けていない座席は、誰でも座ることができるという仕組みなのです。

そこで登場するのが冒頭にご紹介した座席指定カード。
座席番号と指定区間が記載され、該当する座席の背もたれの上に差し込まれます。
当然、この区間で違う人が座っていると、大顰蹙を買うわけです。

面倒になってくるのは、始発駅でこのカードを差す乗務員かと思いますが、座りたい人のためのサービスを維持しながら、使用できる座席は最大限活用するという大変合理的なシステムです。

日本でも、「ひたち」「ときわ」「スワローあかぎ」などの一部の特急列車で、似たような座席活用の試みが始まっています(座席未指定券を使用)。
少子高齢化社会に一矢報いる広がりをみせてくれるのでしょうか。

Virgin Train
全英で高速列車を運行するヴァージン・トレインズの車内では、カードの代わりに座席上の液晶画面で座席指定を受けた区間を表示してくれる。
黄色ランプ」で座席指定区間の接近を表すのみのE657系よりずっと親切だ



プロフィール

てつた

Author:てつた
KR鉄道館

元駅員さん。
社会人1年目の、法学部卒
へっぽこ新米プログラマー。
たまには旅に出たい。

カレンダー
07 | 2017/08 | 09
- - 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 - -
最新記事
最新コメント
最新トラックバック
カテゴリ
月別アーカイブ
検索フォーム
RSSリンクの表示
リンク
QRコード
QR
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。