Go to Qiita Advent Calendar 2024 Top
LoginSignup
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@kottaro123456

震度分布図を作ろう① ～ブラウザ上に地図表示～

Last updated at Posted at 2023-12-07

20231208232429.png

最初に言ってしまうのも何なんですが、HTMLすら触ったことがない人には難しいと思います。なぜなら、この下にあるようにサーバーが必要になるからです。
また、説明・文章作成がかなり下手です。独学なので間違っていること多数あります。コメント歓迎です。

この開発にはサーバーを使用します。
自分のPC上、ローカルでは動きません。

どうもみなさんこんにちは。

いきなりですが、震度分布図を公開してから約1年が過ぎました。1
1年経つと2、震度分布図の作り方を教えてほしいという声が結構来ますが、個人個人に全て教えていると時間がいくらあっても足りないので、記事にして公開してしまおうと思い、Qiitaを書き始めました。

ただ…、 ただ、興味を持っていただけたのはありがたいですが、作りたいと言ってくる人の多くはHTMLやJavascriptを触ったことがない人です。
その人がこれを見て作るのは難しい、いや折りたたみの中だから言いますが、無理です。さらにHTML,JSに触ったことがなければサーバーは確実に持っていないのでさらに数段難しくなります。

私は記事というか長い文章を書いていると、絶対に話がそれるというか一本の筋をつかめていない？ので、わかりにくいところがあると思います 確実にありますが、その場合は自分で調べてくださいね。コメントしてもらってもいいですが説明は下手です。

とにかく説明とか文章作成が下手です。何を言っているのか言いたいのか分からないところがたくさんあると思います。ご了承を。

環境整備

環境整備と言っても、Pythonのように何かをインストールしないと動かないというわけではないので、自身の使いやすい環境があるのならば飛ばしてもらっても構いません。

何個か書いておきますので好きなのを選んでください。
上からおすすめ順です。

エディタ

①VSCodeのインストール

まだJavaScriptをしたことがない人は、エディターとして、VSCodeをおすすめします。
なぜかというと、まあ使いやすいし、みんな使っていて情報がたっぷりあるからです。
ただ、インストール手順は私が言うよりもわかりやすそうなものがあるので拝借します。

②VSCodeのWeb版

VSCodeはWeb、ブラウザ上でも使用できます。
インストールしたくないわ、できへんわの人におすすめ。

ただ、やはりアプリとWeb、そもそも目的が違います。
アプリはコンピューターを操作するもの、Webはちょろっと見るだけのものです。
ちょろっと見る用のWebに対するローカルへのアクセスはアプリと比べて大幅に制限されています。
覗いてみただけなのにファイルを消されたり、上書きされたら大変ですから。

よって、Web版は便利ですが、ファイルの取り扱い面に関してはやはり弱いです。
本当に保存されているか否か本当に不安になります。

③気合のメモ帳

最後は、インストールしたくないわ、VSCode Webも使いたないわ、OS公式以外のアプリ嫌や、Windowsにもとから入ってんのんが一番安全やわ。の人におすすめ（そんなやつおらんやろ）

メモ帳です。そうあれ。
メモ帳でもちゃんと作れます。保存できます。
ただ、カスです。
メモ帳はメモをチョチョイと書き込み用のものであり、コードを書くものではありません。
気合で行く人はどうぞ。

無料サーバー

サーバーはすでに持っている人は飛ばしてくださいね。

①シン・クラウド for Free

私もこれ使ってます。最高です。
無料で10GBも使えて広告なしでSSLまで対応ってどういうことですか！？
XFREEさん無料で大丈夫？？

容量：10GB SSD　広告表示：なし
SSL：無料あり　DB：無料あり
（情報は 2024/07/14時点）

②スターサーバーフリー

XFREEに乗り換える前まで使っていました。

容量：2GB or 4GB　広告表示：なし(4GBはあり)
SSL：なし　DB：なし
（情報は 2024/07/14時点）

③XREA Free

一回だけ使ったことがありましたが、転送量制限があったのでやめました。

容量：10GB　広告表示：あり
SSL：無料あり　DB：無料あり
（情報は 2024/07/14時点）

転送量制限3が「5GB / 日」と設定されているので、地図などの重いデータを使っていると、アクセス増のときにワンチャン見れなくなる可能性があります。

開発スタート

HTMLファイルを作る

HTMLファイルがないと始まりません。
下の折りたたみが基礎のHTMLとCSSファイルです。

ソースコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <title>震度分布図</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
</head>
<body>
    
</body>
</html>
index.css
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
}

さて、これをコピーして保存してください。

Leafletを読み込む(HTML側)

ブラウザで地図を表示するのはとても難しいです。
触ったら動かす、表示する地図を読み込む、ズームする…。
ただ、これは全て自分でやろうとするときはとても難しいですが、世界は広いです。
自分がしなくたって誰かが代わりにきっとやってくれてます。
そしてありがたいことに、ブラウザに地図を表示する、という開発は誰かがすでにしてくれています。
その一つが「Leaflet」という訳です。

さて、すでに何を書いているのかわかりませんが、開発に取り掛かっていきましょう。
ここに書いてあるJSとCSSのscript、linkタグをパクってきます。
また、Leafletでは、<div id="map"></div>中に地図が表示されるようになっています4ので、それも追加しておきましょう。

また、のちのちjQuery（JavaScriptのライブラリ。実装したい機能をサッと書くことができて便利なやつ。読み込んどいて損なし。）も使うので、読み込みます。

ソースコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <title>震度分布図</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
+   <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>
+   <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
</head>
<body>
+   <div id="map"></div>
</body>
</html>
index.css
+ html, body, #map {
    width: 100%;
    height: 100%;
    margin: 0;
}

これでHTML側での地図の表示の準備は整いました。

Leafletを使用して地図を描画する(JS側)

続いて、JavaScriptで何を表示するか設定していきましょう。
とりあえず公式ページに乗っていて安心できそうなものをやってみましょう。
ここでJavaScriptファイル、index.jsを作ります。HTMLの中にぶち込んでもおｋです。

ソースコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <title>震度分布図</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <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>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
</head>
<body>
    <div id="map"></div>
+    <script src="index.js"></script>
</body>
</html>
index.js
+ var map = L.map('map').setView([51.505, -0.09], 13);
+ 
+ L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+     attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+ }).addTo(map);
+ 
+ L.marker([51.5, -0.09]).addTo(map)
+     .bindPopup('A pretty CSS popup.<br> Easily customizable.')
+     .openPopup();

オマケ：なんでindex.jsはLeafletみたいにheadの中に書かないの？

一回index.htmlを開いてみましょう。
たぶんどこかしらの地図が表示されているはずです。
されなかったらF12で開発者ツール＞コンソールを開いて、エラー源を特定しましょう。
エラーの文をそのままGoogleにぶち込めば何かしら解決策が出てくるはずです。

1000020601.png

最後に

これで地図は表示できるようになりました。
一つの記事でこれ以上書き連ねてしまうと、行き先がわからなくなってしまうので今回はこんな感じで。

今回までのソースコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <title>震度分布図</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <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>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
</head>
<body>
    <div id="map"></div>
    <script src="index.js"></script>
</body>
</html>
index.js
var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L.marker([51.5, -0.09]).addTo(map)
    .bindPopup('A pretty CSS popup.<br> Easily customizable.')
    .openPopup();
index.css
html, body, #map {
    width: 100%;
    height: 100%;
    margin: 0;
}

次回予告

震度分布図を作ろう② ～シンプルな地図にしよう～

オマケ

なんでindex.jsはLeafletのようにheadの中に書かないの？

たしかにそうですね。

index.html
<head>
    …
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
</head>
<body>
    <div id="map"></div>
    <script src="index.js"></script>
</body>

index.jsのみ</body>の直前で書かれています。
確かにleafletやjQueryが<head>の中ならば、index.jsも<head>の中でいいではないか。
と思いますが、これには深いわけがあります。

約2年前、私がJavaScriptを始めたとき。
最初は<div>の中を書き換えようとしたのか何なのか、<head>の中にJavaScriptを実行しようとしていました。
コードとしてはこんな感じです。
document.getElementById('div').innerText = "変わったよん";
ただ、これが<head>の中にあれば、エラーが発生して実行されません。

なぜでしょうか。

答えはHTMLにありました。
ブラウザはHTMLを理解しようと上から順番に読んでいきます。
そして、上から読んでいく中で<script src="">があれば、そのファイルも読み込んで、実行しようとします。
しかし、<head>の中にあれば、上から読んでいくので、まだ<body>は読み込まれていないことになります。
その<body>が読み込まれていない状態で「おーい、idがdivのやつをくれや」と言っても、ブラウザは「え？body読めてないからdivはまだないねんけど」と返してしまいます。

そこがエラーとなって、実行されないという経緯がありました。

よって、これを解決するには「HTMLが読み込まれたあと」つまり、</body>の直前だと全て読み込み終わっているので、呼び出してもエラーとなりません。

だから私はindex.jsなどのHTML要素を呼び出す可能性があるものは、</body>の直前に書いているのです。

  1. 多分、絶対、確定で違います。確認もしてない、マジで適当です。 ↩

  2. もう一回言いますが違います。くそほど適当です。 ↩

  3. どれだけのデータをクライアント(スマホやパソコンのブラウザ)に送れるかです。スマホのモバイルデータの残りギガ数とかと同じ仕組みです。 ↩

  4. 嘘です。JavaScriptのvar map = L.map('map')(3番目の'map')で変えられます。ただそういう慣習です。たぶん。 ↩

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?