fc2ブログ

架空創造地図描画日記2024(Leaflet攻略編)[No.8091]

 1枚画像のデジタル地図の下準備が整ったので、引き続きグリッド分割されたタイルセットの方の下準備も取り掛かるか…。オブジェクトの配置作業の攻略はタイルセットで行うことになるが、その作業自体は両者共通なので、1枚画像派の皆様はしばらく待たれたし。ではタイルセット派の皆様に向けて攻略開始である。
 まずは1枚画像で構築したシステムをタイルセット向けに作り直す作業である。基本構造は共通する部分も多い。そのままオブジェクト配置作業へ移行することを考慮して、あらかじめ基礎となる呪文を新規追加する箇所もあるだろう。それらは既存の1枚画像のシステムに追加し直しても、大抵動くと思われる。
 さて、最低限動かすだけのタイルセットのシステムはNo.8058までさかのぼるわけで、随分過去のものになってしまった。そこから今に至るまで、色々なシステムを盛ってきたものである。次回は全部盛り込んで更に追加したソースコードを公開するが、少しは自力で…とグダグダ言うことはしない。これ以降のシステムは、作者自身が現在月本國全図スクロールマップ詳細図の開発で実際に用いているので、Leafletのデフォルトとは少々勝手が異なるのである。本来ならばデフォルトに忠実に従った方が単純でわかりやすいのだが、いきなりややこしいシステムが登場したりするのは避けられないので、そこは無理して理解して頂かなくても結構…是非丸写しして頂きたい。

架空創造地図描画日記2024(Leaflet攻略編)[No.8090]

 さて、画面寸法はモニターやブラウザのサイズによってまちまちなわけで、計算結果が必ずしも整数値になるとは限らない。 そこで予告した通り、ここではMath.ceil()を唱えて小数点以下切り上げとする。となると、スクロール限界の座標が完璧に割り切れる数値になるとは限らず、1ほど余る場合もあるので御了承願いたい。いずれにせよ、十字の照準を地図画像すべての範囲内に収めるという本来の目的は果たせたはずである。
 地図画像の周囲の余白は動的に変化するが、画像の元寸法は変わらないので、既存のbnds = [[0,0], [3000,2500]]に手を加える必要は無い。そちら側にあるオプションでは従来のmaxBoundsが削除されたが、置き換わった呪文は .setMaxBounds()で、変数制御で動的にスクロール限界を設定できる。括弧内は座標のみでもいいような気がするが、それでは発動しないらしい。ここでは合理的にまとめてしまったが、 L.latLngBounds()を唱える必要がある。デフォルトでは実在の地球の緯度・経度を取得する呪文だが、座標系がL.CRS.Simpleだと単純に照準のY,X座標を取得する。その中で画像の寸法に上記で計算した余白分を追加しているが、範囲となる矩形は2点間の座標で設定するので、座標の片方はマイナスで増やすから注意されたし。
 かくして、最低限動くだけのごく基本的なシステムから始めて、盛って盛ってここまで到達したのであった。これで1枚画像のアナログ架空地図を単純に公開できるシステムには仕上がったのではないか!?地図でなくとも大きな1枚画像の公開には対応できるはずなので、コピペするのもアレンジするのも自由である。

架空創造地図描画日記2024(Leaflet攻略編)[No.8089]

 今回はスクロール限界を動的に設定するオリジナルの術式、changeMaxBD()関数の新規追加がメインである。もちろんこいつの名前は何でもよい。これを召喚するスイッチとして、.on('zoomend', function() と.on('resize', function()を新規追加、そして既存の .whenReadyの中dでもこれを召喚する術式を追加している。尚、ズームレベルの変更で座標は変化しないので、zoomendからの召喚は不要である。ではこのchangeMaxBD()の中身を検証してみる。
 .getZoom()はズームレベルを取得する呪文で、変数nowzoomに格納している。続く document.getElementById('mainwindow').clientHeightと同じく.clientWidthは、地図画面mainwindowに対して、マージンやパディング(要するに外枠)を考えない、内側の画像表示領域の横と縦の寸法を取得して、それぞれ変数 windowHd とwindowWdに格納している。
 次は難解なので、実際に座標を見ながらズームレベルに応じてどのくらいの余白(画面の端の座標+α)が必要になるかを確かめた方がよい。そうすると…
 ・ズームレベル0の場合、必要な余白=画像の端の座標+(画面寸法の1/2)
 ・ズームレベル1の場合、必要な余白=画面の端の座標+(画面寸法の1/2)×1/2
 ・ズームレベル-1の場合、必要な余白=画面の端の座標+(画面寸法の1/2)×2
 …になっているはずである。結果的にはズームレベルが基準値の0だとそのまま画面の半分で、ズームレベルがnだけ変化するとそれに応じて2^nになる計算だが、ズームレベルが増加すれば余白は減って、逆に減少すれば増えていく。
 この時点で(windowHd,windowWd)は画面寸法そのものの値なので、余白の追加分とするにはズームレベルに応じて調整する必要がある。それをif~else分岐で計算しているが、ズームレベル-1の場合は1/2倍してから2倍するので、相殺されて1倍になるから結果的に分岐は不要となる。

架空創造地図描画日記2024(Leaflet攻略編)[No.8088]

<!DOCTYPE html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="crossorigin=""></script>
</head>
<style type="text/css">
#meswindow{
position:absolute; top:0%; left:0px;
width:100% ; height:8%;
padding:0px;
border:0px;
background-color: #FFFFFF;
}
#mainwindow{
position:absolute; top:8%; left:0px;
width:100% ; height:92%;
padding:0px;
border:0px;
overflow: hidden;
}
.leaflet-control-container::after {
content: url('https://gepponkoku.nation.jp/gvgmap/files/centerspot.png');
z-index: 1000;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<body>
<DIV id="meswindow">
<DIV style="position:absolute; bottom:10px; left:0px;"><span id="lat_span"></span> <span id="lng_span"></span></DIV>
</DIV>
<DIV id="mainwindow"></DIV>
<script>
var gpmap = L.map('mainwindow', {
crs: L.CRS.Simple,
minZoom: -1,
maxZoom: 1,
maxBoundsViscosity: 1.0,
wheelPxPerZoomLevel: 1000,
});
var bnds = [[0,0], [3000,2500]];
var image = L.imageOverlay('https://gepponkoku.nation.jp/monkasho/file/gapan_allmap_true.png',bnds).addTo(gpmap);
gpmap.setView([1715,1780], 0);

gpmap.whenReady(function() {
changeMaxBD();
posset();
});

gpmap.on('resize', function() {
changeMaxBD();
posset();
});

gpmap.on('moveend', function() {
posset();
});

gpmap.on('zoomend', function() {
changeMaxBD();
});

function changeMaxBD() {
var nowzoom = gpmap.getZoom();
var windowHd = document.getElementById('mainwindow').clientHeight;
var windowWd = document.getElementById('mainwindow').clientWidth;
if(nowzoom == 0){windowHd /= 2; windowWd /= 2;}
else if(nowzoom == 1){windowHd /= 4 ; windowWd /= 4;}
windowHd = Math.ceil(windowHd);
windowWd = Math.ceil(windowWd);
gpmap.setMaxBounds(L.latLngBounds([3000+windowHd, -windowWd],[-windowHd, 2500+windowWd]));
}

function posset() {
var cenpos = gpmap.getCenter();
var nowlat = Math.round(cenpos.lat);
var nowlng = Math.round(cenpos.lng);
document.getElementById('lat_span').innerHTML = 'Y:'+ nowlat;
document.getElementById('lng_span').innerHTML = ' X:'+ nowlng;
};

</script>
</body>
</html>

 No.8084以降に登場した術式を追加したが、数が多くて難易度が急激に上がったように思われるかもしれない。既存の術式を変えた箇所は maxBounds:[[3250, -250],[-250, 2750]],を削除したぐらいか…。
 それとgpmap.setView()は座標を変えて、起動時の照準を首都:大都に合わせた。もちろん画面内に座標が収まればどの場所からでも起動する。好みの都市に照準を合わせて、そこの座標を入力してみるとよい。一足早くデジタル地図の座標設定方法を実際に試すことができるだろう。

架空創造地図描画日記2024(Leaflet攻略編)[No.8087]

 てなわけで、次なるシステムは、地図上のすべての領域に十字の照準を合わせられるようにスクロールの限界を調整する作業である。では具体的にどこをどう変えればよいか? それはマップの端のスクロール限界が、常に十字のある画面中心にくるようにすればよい。だけど画面操作中は、その設定値に変化が起きる機会がある。そのタイミングは、端末やブラウザの操作による画面サイズの変更時か、ズームレベルの変更時である。
 Leafletにはどちらもそれを感知した際に発動する関数が用意されている。No.8084では、画像の移動終了を感知する.on('moveend', function()という呪文が登場した。それと書式は共通である。 画面サイズ変更を感知する関数は.on('resize', function()、ズームレベルの変更終了を感知する関数は.on('zoomend', function()である。これらをスイッチにして、設定値を変更するためのオリジナルの術式を唱えればよい。
 ところで、ここではズームレベルは3段階で設定している。これが変わると画像のサイズが変わるが、その際に座標はどうなるのか?既に座標は目で見えるようになったので、実際にズームさせて確かめてみるとよい。固定された画像を拡大・縮小しても、座標の数値が2倍になったり半分になったりすることは無い。ただ、画面外の余白の寸法が変化するのは分かるだろう。よって、そちらをズームレベルに応じて変化させる必要がある。

架空創造地図描画日記2024(Leaflet攻略編)[No.8086]

 document.getElementById().innerHTMLは、html本文を直接書き換える呪文として多用される。idは本文のspanタグ内であらかじめ設定したが、Y,Xそれぞれの座標をここで表示させている。この場面では固定された文字列のみを直接入力する機会は少なく、多くは文字列の直接入力と変数値の入力との混合が当たり前であろう。その際、文字列は「" "」や「' '」で囲みながら、変数も全部ひっくるめてすべて「+」で足すことになるが、1つでもミスすればバグになるし、しかも気付きにくいから要注意である。今後データベースの編集作業では覚悟すべし…。
 最後に、現実的な地図の座標は緯度Y→経度Xの順番なので、一般的な数学とは逆の順序になるからそこは慣れるしかない。二つのspanタグのidを入れ替えれば、見慣れたX,Y表示にすることは簡単だが、Leafletのデフォルトシステムからすべて変えてしまわないと後で混乱するだろう。さもなければ、'Y:'を'緯度:'、'X:'を'経度:'と書き換えれば、画面はその表示になる。
 以上を完璧にコピペして動かせば、ここでのミッションはコンプリート…なのだが、今更ながらこれでは使い勝手が悪いと思うはずある。十字画像は地図上のターゲットをロックオンするために設置したわけだが、現状では地図の端の方でスクロールが止まってしまって、狙いが定められないではないか!?やれやれ…スクロールが止まらずにフェードアウトするのは厄介だが、中途半端に止められてしまうのも考え物である。

架空創造地図描画日記2024(Leaflet攻略編)[No.8085]

 posset() はオリジナルの関数なので名前は変更可能、上の二つの関数がスイッチになって発動する。whenReady()は起動直後しか発動しないが、その時点で座標を表示させるためのものである。一方、.on('moveend', function()はスクロールやズーム等で地図が動いて、それが終わった時点で発動される。よって、そこが座標表示更新のタイミングとなる。座標移動中に逐一数値を更新させることも可能だが、処理が増えるし多分不要なので不採用とした。
 'moveend', function()は'moveend', function(e)となっているサンプルも見受けられる。こうすると画面操作のようなイベント発生時に内部のシステム的な変数を受け取ることができるが、ここでは不要なので省略可能である。
 posset()内において、.getCenter()は、画面の中心、ここでは十字の照準の座標を取得できる。そのままだと[Y,X]の配列で取得されるが、ここでは表示させる際に別々にする必要があるので、これに続けて.latを唱えるとY(緯度)、.lngを唱えるとX(経度)が取得される。そのままだと小数点以下に何桁も数字が並ぶが、ここでは整数だけで事足りるので、小数点以下はMath.round()を唱えて小数点以下は四捨五入している。ちなみに小数点以下切り上げはMath.ceil()で切り捨てはMath.floor()だが、後で登場する機会があるかもしれない。

架空創造地図描画日記2024(Leaflet攻略編)[No.8084]

 続いては、前述の十字の照準の座標を No.8079で構築した画面上部のmeswindowに表示させる。完成すれば月本地図と同様の座標が画面左上に出るだろう。オブジェクト配置ではこれで照準を定めて、何千何万もの座標のデータを入力する作業の繰り返しとなる。外見は地味ながら、今後のデジタル地図開発では大変重要なシステムである。
 まずは座標を表示させる下準備である。既存のmeswindowのDIV内に更にDIVをぶち込んで以下のようにする。styleは合理的にタグの内部に書いたが、こちらにもidを設定して外へ出しても構わない。新しいDIVタグの中には2つのspanを設定して、こちらにはidを設定、YとXの座標が出る部分となる。
<DIV id="meswindow">
<DIV style="position:absolute; bottom:10px; left:0px;"><span id="lat_span"></span> <span id="lng_span"></span></DIV>
</DIV>


 次に、以下の3つの関数をぶち込む。これらは画面の動作を感知すると座標を取得して表示させる術式である。一番下の</script>の直前にまとめてコピペされたし。

gpmap.whenReady(function() {
posset();
});

gpmap.on('moveend', function() {
posset();
});

function posset() {
var cenpos = gpmap.getCenter();
var nowlat = Math.round(cenpos.lat);
var nowlng = Math.round(cenpos.lng);
document.getElementById('lat_span').innerHTML = 'Y:'+ nowlat;
document.getElementById('lng_span').innerHTML = ' X:'+ nowlng;
};

架空創造地図描画日記2024(Leaflet攻略編)[No.8083]

 この術式は本文やscript内を一切操作しないので、意外に思えるかもしれない。システム的にはLeafletのcssを直接操作する方法と言える。control-containerは画面上にスケールとかズームやレイヤーの切替スイッチのようなものを配置する機能だが、デフォルトでは画面の四隅の端にしか配置できない。まあそんなものがド真ん中にあったりしたら外見はブチ壊しだろう。それを裏技的な方法で使うので仕方あるまい。
 この方法は数あるサンプルの中でかなりお手軽ではあるが、弱点としてはこの十字の真下にアイコンが重なると、そちらをクリックすることができない。まだその段階ではないので、詳細は月本地図で試されたし。レイヤーの重なりを制御するz-indexの呪文の調整でもうまくいかないので、解決策があれば知らせて頂きたいものだが、多分誰もこんな攻略はやっていないか…。尚、z-indexの数値は、十字画像が隠れない範囲で適当に設定して構わない。
 術式の羅列は一般的なcssによる指定位置の配置方法と変わらない。注意すべきは、十字画像を配置する際の座標指定が左上角を基準とするので、transformの呪文を唱えて中央にずらす作業が必要になる。この呪文は今後地図上にオブジェクトを配置する際にも登場するので、今はそれだけ伝えておくとしよう。

架空創造地図描画日記2024(Leaflet攻略編)[No.8082]

 かくして、デジタル地図のオブジェクトの配置は、すべてプログラミングによるものとなる。そのために絶対不可欠となるのが座標なわけで、それを常時画面に表示させておかなければ作業は不可能である。そして、その座標を定めるためには、地図上の照準が常に目視できなければならない。大抵の地図では画面の中心に十字が表示されると思われるし、月本地図でもそれを採用している。では引き続きそれらを一つ一つ追加していくとしよう。
 まずは地図の中心に照準となる十字のマーカーを配置してみるか…。この方法は色々なサンプルを漁っては試してみたが、自分で色々アレンジしてみても、未だに完璧なシステムには到達していない。そんな道半ばの状態とはいえ、これが無ければ今後の議論が進められないので、現段階で最良と思われる方法を記すとする。マーカーの画像は当局で用意したものなので、以下の術式をコピペしてstyleタグ内に追記するだけで、月本地図と同様の十字アイコンが常に画面中央に表示されるはずである。
.leaflet-control-container::after {
content: url('https://gepponkoku.nation.jp/gvgmap/files/centerspot.png');
z-index: 1000;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

架空創造地図描画日記2024(Leaflet攻略編)[No.8081]

 ここから先は再びLeafletへ戻って、より実用的なシステムの構築を進めるとする。まずは下準備が必要になるが、改めてこのブログにおけるメインの攻略は、Leafletによるデジタル架空地図の開発とWeb上での公開である。もちろんアナログ地図にも対応しているが、そちらの開発自体はデジタルの範囲外なので、スキャンしてデジタル化した画像ファイルをWebで公開する課程で役に立てると思われる。かくして、アナログ地図とデジタル地図の違いはここで大きな差が出るだろう。
 アナログ地図は架空も現実も問わず、多くの地図作者が今までやってきたと思われる。紙の上で完全無欠に描いた地図をスキャンして画像ファイルを生成する作業工程だが、代表される例は地理院地図である。Web上の外見は紙の地図と変わらないので見映えはよいが、ズームすると地図上に記されたものが文字や記号も含めて全部ズームしてしまうのが弱点である。
 一方、デジタル地図は下地となる画像ファイルがもちろん必要になるが、そちらには詳細なオブジェクトまで完全無欠に記す必要は無い。画像に依存する地形や交通網や境界線等だけを描けばよいのである。オブジェクトは、画像を表示させた上からプログラミングで座標を指定して配置していく作業工程になる。画像とオブジェクトが別々で扱えるので、画像の描画作業時間は短縮されるし、オブジェクトの追加や修正は簡単にできるし、ズームさせてもフォントやアイコンのサイズは維持される。これらがアナログ地図ではできない長所と言えるだろう。

架空創造地図描画日記2024(Leaflet攻略編)[No.8080]

 今回の追加部分はすべてscriptタグの外側である。先に本文の方だが、画面上部に空白領域を確保すべく、新たにDIVタグを追加している。従来のDIVタグからほぼコピペで事足りるが、こちらのidはmeswindowと名付けた。メッセージウィンドウという意味だが、別にsubwindowでも何でもよい。
 続いて No.8076で設定したstyleタグに対して、追加した#meswindowを召喚する術式が並べられている。こちらもコピペに近いが、先の#mainwindowの術式も一部変更されている。このシステムでは画面上部8%に余白を確保して、残りの92%を地図表示画面としている。この比率は適当だが、PCでもスマホでも操作に支障が無い程度で、かつ地図をなるだけ大きく表示させようとした結果である。よって、各自て適当に調整して頂いて構わないが、必ず合計100%にするべし。それさえ遵守されていれば、例えば画面を3つでも4つでも分割可能である。
 最後の呪文だが、mainwindowの方にあるoverflow: hidden;は地図画像を画面外へはみ出さないためのものなので、meswindow側には不要である。 そしてこちらは常に表に出る領域なので、背景色を設定する呪文としてbackground-color: #FFFFFF;を付け足しておいた。別にこれが無くてもデフォルトでは#FFFFFFすなわち真っ白になるはずだが、見映えを考えて好みで調整すべし。ただ、後でメッセージすなわち文字列を表示させるのに使うので、文字が読める程度の薄い色の方がよい。

架空創造地図描画日記2024(Leaflet攻略編)[No.8079]

<!DOCTYPE html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="crossorigin=""></script>
</head>
<style type="text/css">
#meswindow{
position:absolute; top:0%; left:0px;
width:100% ; height:8%;
padding:0px;
border:0px;
background-color: #FFFFFF;
}
#mainwindow{
position:absolute; top:8%; left:0px;
width:100% ; height:92%;
padding:0px;
border:0px;
overflow: hidden;
}
</style>
<body>
<DIV id="meswindow"></DIV>
<DIV id="mainwindow"></DIV>
<script>
var gpmap = L.map('mainwindow', {
crs: L.CRS.Simple,
minZoom: -1,
maxZoom: 1,
maxBounds:[[3250, -250],[-250, 2750]],
maxBoundsViscosity: 1.0,
wheelPxPerZoomLevel: 1000,
});
var bnds = [[0,0], [3000,2500]];
var image = L.imageOverlay('https://gepponkoku.nation.jp/monkasho/file/gapan_allmap_true.png',bnds).addTo(gpmap);
gpmap.setView([1700,1800], 0);
</script>
</body>
</html>
 解説は次回以降として、今回もLeafletの範囲外である。システムは月本地図から流用して基本構造だけを残したものなので、外見もかなり似通った構造になっただろう。

架空創造地図描画日記2024(Leaflet攻略編)[No.8078]

 Webで地図を公開する際は、管理者自身のサイトのどこかのページからリンクして地図を閲覧させるのが普通だろう。そして閲覧が済んだら、戻るためのリンクボタンが無いと、ブラウザの戻る機能を毎回使わなければならない。画面全体を地図にしてもよいのだが、月本地図で採用しているように、地図画面の一部にそれらを担う領域を確保している。
 地図上にポップアップ的なスイッチでも付けて、この領域を出し入れできれば、もっと見映えがよくなるのではないか!?とはいえ、地図作者の立場で後の作業のことを考えるならば、常に地図の片隅を覆い隠してでも空白の領域が必要になる場面が発生するはずである。
 ここでの攻略はあくまで基礎的なシステム構築の話なので、もっと洒落た演出を望むならば、cssを駆使すればいくらでも可能である。その方法は他を当たれ見つかるはずなので、ここでは質実剛健に徹して機能性重視で進めるとしよう。てなわけで、続いては月本地図と同様に地図画面上部に空白の領域を確保してみるとする。

架空創造地図描画日記2024(Leaflet攻略編)[No.8077]

 そういえば、デスクトップではマウスのホイール操作でズームレベルを変えようとすると、1段階ずつ変化しないで、いきなりminからmaxへぶっ飛んだりしないか!?実在世界の地図ならば、地球全体から街区レベルまで急速に変えるのには便利かもしれない。だが、架空世界の地図ではちょっと使い勝手が悪い。
 画面内の右上にデフォルトで表示される「+/-」のコントロールを操作すれば、確実に1段階ずつ変えられる。ならばマウスホイールの方は放置でも悪くはないのだが、融通を利かせるにはどうするか?
 てなわけで答えを書いてしまえば、以下がその対策を講じるための呪文である。たった1行入れれば済むので、この際だからついでに書いておくとよい。場所はL.mapのオプション内である。 もしもNo.8073だとmaxBoundsViscosity: 1.0の直後にこいつを唱えるならば、必ず前述の行の最後にカンマを入れて区切るべし。
wheelPxPerZoomLevel: 1000
管理人

ごとりん

  • 著者:ごとりん
  •  架空想像国家「月本國」の全国地図描画作業を地味に続けている貧乏クリエーター。このブログの毎日更新が途切れない限り、無事に生存しているものと関知して下さい。
Simulation Country GAPAN 月本國



 「月本國」では、2D-RPG向け現代和風素材の無償配布の他、開国(平成13年12月16日)~平成17年2月28日までの過去ログを扱っています。
「旧:月本国政府広報」
[No.1~1171]

 又、連載物「RPG制作雑記」「徒然なる200x裏技集」(↓のカテゴリーで★が付いているもの)等のwardファイル版過去ログを扱っています。このblogの過去ログが読みにくい場合は是非御利用下さい。

現代和風RPG「月影の駅」Ver2
 RPGツクール2000製フリーウェア。駅から始まり駅で終わる、オトナのドライな人間模様。
 ゲーム宣伝動画配信中!

「Made in GAPAN 歩 ~Ayumu~」
 2D-RPG向け歩行グラフィック合成ソフト。当局開発の32規格8方向部品セット他、一般的な部品セットも利用可能。各使用環境に合わせた既存素材の組み直しや、顔グラ等の合成もOK。
(上記の管理人画像はこれで合成したものです。)
ブログ内検索
カテゴリー(★:「月本國」にward版あり)
カレンダー
01 | 2024/02 | 03
- - - - 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 - -
月別アーカイブ
最近のコメント
最近のトラックバック
リンク
RSSフィード