標高チェック、海面上昇シミュレーション、地形断面図の生成が無料で可能。JAXA Earth APIを活用した実用ツールと活用事例を詳しく解説。
地形データの取得にお困りではありませんか?
Web開発の現場でこんな悩みを抱えていませんか?「地形や標高のデータが必要だが、どこから取得すればいいかわからない」「海面上昇の影響を可視化したいが、専門知識がない」「建設関係のクライアントから地形断面図を求められたが、高額なGISソフトは導入できない」。
実際に弊社でも、不動産サイトの開発時に「この土地の標高を表示してほしい」という要望や、観光サイトで「海岸線の地形を可視化したい」という相談を受けることが増えています。これまでは有料のGISツールや複雑な地理データベースを使わざるを得ませんでしたが、実はJAXAが提供する衛星データを活用すれば、無料で高精度な地形情報を取得できるのです。
なぜ地形データの取得が難しいのか
地形データ取得が困難な理由は、主に3つの要因があります。
まず、データの入手先が分散しているという問題です。国土地理院、気象庁、各自治体など、複数の機関が異なる形式でデータを提供しており、どこにアクセスすればよいかわからない状況が続いています。
次に、専門的なGISソフトウェアの高コストです。ArcGISやQGISなどの専門ツールは機能が豊富な反面、学習コストが高く、ライセンス費用も中小企業には負担となります。
最後に、データ形式の複雑さがあります。地形データは多くの場合、特殊なファイル形式(GeoTIFF、ShapeFileなど)で提供されており、Web開発者にとっては扱いづらいものでした。
これらの課題を解決するため、弊社FivenineではJAXA Earth APIを活用した3つの無料ツールを開発し、誰でも簡単に地形データを活用できる環境を整えました。
JAXA Earth APIの特徴と可能性
JAXA Earth APIは、宇宙航空研究開発機構(JAXA)が提供する衛星観測データを、Web APIとして利用できるサービスです。このAPIの最大の特徴は、宇宙からの高精度観測データを無料で利用できる点にあります。
具体的には、ALOS(だいち)シリーズの衛星から取得される数値標高モデル(DEM)データや、GPM(全球降水観測計画)の降水量データなどが利用可能です。これらのデータは、従来であれば研究機関でしか扱えない高精度なものでした。
3つの無料ツールの詳細解説
1. 標高チェッカー(Elevation Checker)
ツールURL: https://fivenine.co.jp/tools/elevation-checker
標高チェッカーは、地図上の任意の地点をクリックするだけで、その場所の標高を瞬時に表示するツールです。建設業のクライアント向けサイト開発で特に重宝しています。
主な機能:
- 地図上クリックによる標高取得
- 複数地点の一括測定
- 標高データのCSVエクスポート
- 等高線の表示機能
実際の活用例として、ある建設コンサルタント会社では、現地調査前の予備調査でこのツールを活用しています。「現地に行く前に大まかな地形を把握できるので、調査時間が30%短縮された」という報告をいただいています。
技術的な実装例:
// JAXA Earth APIを使った標高取得の実装例
const getElevation = async (latitude, longitude) => {
try {
const response = await fetch(
`https://api.jaxa-earth.jp/elevation?lat=${latitude}&lon=${longitude}&format=json`,
{
headers: {
'Authorization': 'Bearer YOUR_API_KEY',
'Content-Type': 'application/json'
}
}
);
const data = await response.json();
return data.elevation;
} catch (error) {
console.error('標高データの取得に失敗しました:', error);
return null;
}
};
// 地図クリックイベントでの標高表示
map.on('click', async (e) => {
const { lat, lng } = e.latlng;
const elevation = await getElevation(lat, lng);
if (elevation !== null) {
L.popup()
.setLatLng(e.latlng)
.setContent(`標高: ${elevation.toFixed(1)}m`)
.openOn(map);
}
});
2. 海面上昇シミュレーター(Sea Level Rise Simulator)
ツールURL: https://fivenine.co.jp/tools/sea-level-simulator
海面上昇シミュレーターは、気候変動による海面上昇の影響を可視化するツールです。自治体のWebサイトや環境関連企業のサイト制作で活用されています。
主な機能:
- 1m〜5mの海面上昇シナリオ設定
- 影響範囲の色分け表示
- 浸水予想エリアの面積計算
- タイムライン機能による段階的表示
ある沿岸部の自治体では、このツールを防災教育サイトに組み込み、「住民の防災意識が向上し、避難計画策定時の参加率が40%向上した」という成果を得ています。
シミュレーションロジックの実装:
// 海面上昇による浸水エリア計算
const calculateFloodArea = (elevationData, seaLevelRise) => {
return elevationData.filter(point => {
// 現在の標高が海面上昇値以下の場合は浸水対象
return point.elevation <= seaLevelRise && point.isCoastal;
}).map(point => ({
...point,
floodDepth: Math.max(0, seaLevelRise - point.elevation)
}));
};
// シナリオ別の影響計算
const scenarios = {
conservative: { rise: 0.5, year: 2050, color: '#10B981' },
moderate: { rise: 1.0, year: 2070, color: '#F59E0B' },
severe: { rise: 2.0, year: 2100, color: '#EF4444' }
};
// 各シナリオの可視化
Object.entries(scenarios).forEach(([key, scenario]) => {
const floodAreas = calculateFloodArea(elevationData, scenario.rise);
renderFloodLayer(floodAreas, scenario.color);
});
3. 地形断面図ジェネレーター(Terrain Profile Generator)
ツールURL: https://fivenine.co.jp/tools/terrain-profile
地形断面図ジェネレーターは、任意の2点間の地形断面図を自動生成するツールです。土木建設業界や登山・アウトドア関連のWebサイトで特に需要が高いツールです。
主な機能:
- ドラッグ&ドロップによる測線設定
- 高精細な断面図の自動生成
- 勾配・距離の詳細表示
- SVG・PNG形式でのエクスポート
登山用品ECサイトを運営するクライアントでは、商品ページにルート情報として断面図を掲載することで、「商品の購入前にルートの難易度がわかるため、適切な装備選択ができる」との好評を得ています。
断面図生成の技術実装:
// 2点間の地形断面データを取得
const generateTerrainProfile = async (startPoint, endPoint, resolution = 100) => {
const points = interpolatePoints(startPoint, endPoint, resolution);
const elevationPromises = points.map(point =>
getElevation(point.lat, point.lng)
);
const elevations = await Promise.all(elevationPromises);
return points.map((point, index) => ({
distance: calculateDistance(startPoint, point),
elevation: elevations[index],
latitude: point.lat,
longitude: point.lng,
slope: index > 0 ? calculateSlope(elevations[index-1], elevations[index]) : 0
}));
};
// Chart.jsを使った断面図の描画
const renderProfile = (profileData) => {
const ctx = document.getElementById('profileChart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: profileData.map(p => `${p.distance.toFixed(1)}km`),
datasets: [{
label: '標高 (m)',
data: profileData.map(p => p.elevation),
borderColor: '#3B82F6',
backgroundColor: 'rgba(59, 130, 246, 0.1)',
fill: true
}]
},
options: {
responsive: true,
scales: {
y: {
title: { display: true, text: '標高 (m)' }
}
}
}
});
};
実用的な活用事例と導入効果
建設コンサルタント会社での活用
ある建設コンサルタント会社では、現地調査の事前準備にこれらのツールを活用しています。従来は紙の地形図と測量機器で数日かかっていた予備調査が、標高チェッカーと地形断面図ジェネレーターを使うことで半日に短縮されました。
導入効果:
自治体防災サイトでの海面上昇可視化
神奈川県内のある沿岸自治体では、住民向け防災情報サイトに海面上昇シミュレーターを組み込みました。視覚的にわかりやすい情報提供により、防災説明会への参加率が従来の2.5倍に増加しています。
不動産サイトでの標高情報表示
不動産ポータルサイトでは、物件詳細ページに標高情報を自動表示する機能を実装。「津波や洪水リスクを事前に把握できる」として利用者から好評を得ており、問い合わせ件数が20%増加しました。
よくある失敗パターンと対処法
1. APIレスポンス時間の軽視
失敗例: 複数の標高データを同期的に取得しようとして、ページの読み込みが異常に遅くなる。
対処法: 非同期処理とキャッシュを適切に実装する。
// 悪い例:同期的な処理
const badExample = () => {
points.forEach(point => {
const elevation = getElevationSync(point.lat, point.lng); // ブロッキング
updateUI(point, elevation);
});
};
// 良い例:非同期処理とバッチ処理
const goodExample = async () => {
const BATCH_SIZE = 10;
for (let i = 0; i < points.length; i += BATCH_SIZE) {
const batch = points.slice(i, i + BATCH_SIZE);
const elevationPromises = batch.map(point =>
getElevationWithCache(point.lat, point.lng)
);
const elevations = await Promise.all(elevationPromises);
batch.forEach((point, index) => {
updateUI(point, elevations[index]);
});
// バッチ間に小さな遅延を入れてAPI負荷を軽減
await new Promise(resolve => setTimeout(resolve, 100));
}
};
2. エラーハンドリングの不備
失敗例: API接続エラーやデータ欠損時の処理を想定せず、アプリケーションがクラッシュする。
対処法: 段階的なフォールバック処理を実装する。
const robustElevationFetch = async (lat, lng) => {
try {
// メイン API を試行
const data = await getElevation(lat, lng);
if (data && data.elevation !== undefined) {
return data.elevation;
}
throw new Error('Invalid data received');
} catch (primaryError) {
console.warn('Primary API failed, trying fallback:', primaryError.message);
try {
// フォールバック API を試行
const fallbackData = await getFallbackElevation(lat, lng);
return fallbackData.elevation;
} catch (fallbackError) {
console.error('All elevation APIs failed:', fallbackError.message);
// デフォルト値を返すか、ユーザーに通知
showNotification('標高データの取得に失敗しました。しばらく後に再試行してください。');
return null;
}
}
};
3. データ精度の過信
失敗例: 衛星データの精度を過信し、センチメートル単位の精密測量が必要な用途で使用する。
対処法: 用途に応じた精度の説明と注意書きを明記する。JAXA Earth APIの標高データは約30mメッシュの精度であり、大規模な地形把握には適していますが、建築設計レベルの精密測量には別途現地測量が必要です。
4. 座標系の混同
失敗例: 異なる座標系(WGS84、JGD2011など)を混同して使用し、位置がずれる。
対処法: 座標変換ライブラリを使用して統一する。
// proj4ライブラリを使用した座標変換の例
import proj4 from 'proj4';
// 座標系定義
proj4.defs('EPSG:4326', '+proj=longlat +datum=WGS84 +no_defs'); // WGS84
proj4.defs('EPSG:4612', '+proj=longlat +datum=JGD2000 +no_defs'); // JGD2000
// 座標変換関数
const convertCoordinates = (lng, lat, fromCRS = 'EPSG:4612', toCRS = 'EPSG:4326') => {
return proj4(fromCRS, toCRS, [lng, lat]);
};
// 使用例
const [convertedLng, convertedLat] = convertCoordinates(139.6917, 35.6895);
const elevation = await getElevation(convertedLat, convertedLng);
セキュリティとパフォーマンスの考慮事項
APIキーの適切な管理
JAXA Earth APIを利用する際は、APIキーの管理に注意が必要です。フロントエンド側にAPIキーを直接埋め込まず、バックエンド側でプロキシを設置することを推奨します。
// Laravel でのAPIプロキシ実装例
<?php
namespace App\Http\Controllers\Api;
use Illuminate\Http\Request;
use Illuminate\Http\Client\Response;
use Illuminate\Support\Facades\Http;
use Illuminate\Support\Facades\Cache;
class ElevationController extends Controller
{
public function getElevation(Request $request)
{
$request->validate([
'lat' => 'required|numeric|between:-90,90',
'lng' => 'required|numeric|between:-180,180'
]);
$cacheKey = "elevation_{$request->lat}_{$request->lng}";
// キャッシュから取得を試行(24時間有効)
$elevation = Cache::remember($cacheKey, 86400, function () use ($request) {
$response = Http::withHeaders([
'Authorization' => 'Bearer ' . config('services.jaxa.api_key'),
'User-Agent' => 'FivenineElevationTool/1.0'
])->get('https://api.jaxa-earth.jp/elevation', [
'lat' => $request->lat,
'lon' => $request->lng,
'format' => 'json'
]);
if ($response->successful()) {
return $response->json()['elevation'];
}
throw new \Exception('JAXA API request failed');
});
return response()->json([
'elevation' => $elevation,
'coordinates' => [
'lat' => $request->lat,
'lng' => $request->lng
]
]);
}
}
パフォーマンス最適化
Webサイトのパフォーマンスを維持するため、以下の最適化手法を実装することを推奨します:
- レスポンシブローディング: 大量のデータを処理する際は、プログレスバーで進捗を表示
- データ間引き: 地形断面図では必要以上に細かいサンプリングを避ける
- WebWorker活用: 重い計算処理はメインスレッドをブロックしないよう分離
サーバー管理、丸ごとお任せください
サーバー保守・運用
監視・障害対応・パフォーマンス改善まで、安定稼働をサポートします
※ 通常1営業日以内にご返信します
まとめと次のステップ
JAXA Earth APIを活用した3つの無料ツール(標高チェッカー、海面上昇シミュレーター、地形断面図ジェネレーター)を紹介しました。これらのツールは、従来であれば高額なGISソフトウェアや専門知識が必要だった地形データの活用を、Web開発者でも手軽に実現できるものです。
特に重要なのは、これらのツールが単なる技術的な解決策ではなく、クライアントのビジネス価値向上に直結するという点です。建設業界では調査時間の短縮、自治体では住民への情報提供強化、不動産業界では差別化要素として機能しています。
導入による具体的な効果
今すぐ始められるアクションプラン
次のステップとして、以下のチェックリストを参考に実装を進めてください:
よくある質問
地形データの活用は、Webサイトに新たな付加価値をもたらす強力な武器となります。まずは標高チェッカーから試験導入し、クライアントの反応を見ながら他のツールも段階的に展開することをお勧めします。
技術的な実装でご不明な点や、プロジェクトへの具体的な導入についてご相談がございましたら、お気軽にFivenine Designまでお問い合わせください。20年以上のWeb開発経験を活かし、最適な実装方法をご提案いたします。