日本全国停電表示 Test

#[English(Google Translate)](https://translate.google.com/translate?sl=auto&tl=en&u=https://qiita.com/game_programer/items/0403f1434978965d47ec)

# ※上手く表示されていない場合は直接URLリンクを開いて下さい

### 北海道電力ネットワーク 停電情報
https://teiden-info.hepco.co.jp/
Result->○
<p class="codepen" data-height="1664" data-theme-id="light" data-default-tab="result" data-user="game_programer" data-slug-hash="KKNWGNg" style="height: 1664px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="test_teiden_hokkaido">
  <span>See the Pen <a href="https://codepen.io/game_programer/pen/KKNWGNg">
  test_teiden_hokkaido</a> by ゲームプログラマー⛅あの日見たバグの名前を僕達はまだ知らない。 (<a href="https://codepen.io/game_programer">@game_programer</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

---

### 東北電力ネットワーク 停電情報
https://nw.tohoku-epco.co.jp/teideninfo/
Result->○
<p class="codepen" data-height="1092" data-theme-id="light" data-default-tab="result" data-user="game_programer" data-slug-hash="JjbWBpj" style="height: 1092px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="test_teiden_tohoku">
  <span>See the Pen <a href="https://codepen.io/game_programer/pen/JjbWBpj">
  test_teiden_tohoku</a> by ゲームプログラマー⛅あの日見たバグの名前を僕達はまだ知らない。 (<a href="https://codepen.io/game_programer">@game_programer</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

---

### 関東-東京電力パワーグリッド
https://teideninfo.tepco.co.jp/index-j.html

<p class="codepen" data-height="856" data-theme-id="light" data-default-tab="result" data-user="game_programer" data-slug-hash="rNWyZMV" style="height: 856px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="test_teiden_kanto">
  <span>See the Pen <a href="https://codepen.io/game_programer/pen/rNWyZMV">
  test_teiden_kanto</a> by ゲームプログラマー⛅あの日見たバグの名前を僕達はまだ知らない。 (<a href="https://codepen.io/game_programer">@game_programer</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

---

### 中部電力パワーグリッド
https://teiden.chuden.jp/p/index.html
Result->○
<p class="codepen" data-height="2060" data-theme-id="light" data-default-tab="result" data-user="game_programer" data-slug-hash="dyOvqxK" style="height: 2060px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="test_teiden_tyuubu">
  <span>See the Pen <a href="https://codepen.io/game_programer/pen/dyOvqxK">
  test_teiden_tyuubu</a> by ゲームプログラマー⛅あの日見たバグの名前を僕達はまだ知らない。 (<a href="https://codepen.io/game_programer">@game_programer</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

---

### 北陸電力送配電TOP > 停電情報
http://www.rikuden.co.jp/nw/teiden/otj010.html

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="result" data-user="game_programer" data-slug-hash="poNexJb" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="test_teiden_hokuriku">
  <span>See the Pen <a href="https://codepen.io/game_programer/pen/poNexJb">
  test_teiden_hokuriku</a> by ゲームプログラマー⛅あの日見たバグの名前を僕達はまだ知らない。 (<a href="https://codepen.io/game_programer">@game_programer</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

---

### 関西電力送配電 停電情報
https://www.kansai-td.co.jp/teiden-info/index.php

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="result" data-user="game_programer" data-slug-hash="qBqrJXM" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="test_teiden_kansai">
  <span>See the Pen <a href="https://codepen.io/game_programer/pen/qBqrJXM">
  test_teiden_kansai</a> by ゲームプログラマー⛅あの日見たバグの名前を僕達はまだ知らない。 (<a href="https://codepen.io/game_programer">@game_programer</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

---

### 中国電力ネットワーク 停電情報

https://www.teideninfo.energia.co.jp/index.html
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="result" data-user="game_programer" data-slug-hash="dyOvgda" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="test_teiden_tyuugoku">
  <span>See the Pen <a href="https://codepen.io/game_programer/pen/dyOvgda">
  test_teiden_tyuugoku</a> by ゲームプログラマー⛅あの日見たバグの名前を僕達はまだ知らない。 (<a href="https://codepen.io/game_programer">@game_programer</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

---

### 四国電力送配電　停電情報
https://www.yonden.co.jp/nw/teiden-info/index.html

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="result" data-user="game_programer" data-slug-hash="wvoJYjM" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="test_teiden_shikoku">
  <span>See the Pen <a href="https://codepen.io/game_programer/pen/wvoJYjM">
  test_teiden_shikoku</a> by ゲームプログラマー⛅あの日見たバグの名前を僕達はまだ知らない。 (<a href="https://codepen.io/game_programer">@game_programer</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

---

### 九州電力送配電 停電情報
https://www.kyuden.co.jp/td_info_teiden/fukuoka.html
Result->○
<p class="codepen" data-height="1131" data-theme-id="light" data-default-tab="result" data-user="game_programer" data-slug-hash="RwopeJX" style="height: 1131px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="test_teiden_kyuushyuu">
  <span>See the Pen <a href="https://codepen.io/game_programer/pen/RwopeJX">
  test_teiden_kyuushyuu</a> by ゲームプログラマー⛅あの日見たバグの名前を僕達はまだ知らない。 (<a href="https://codepen.io/game_programer">@game_programer</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

---

### 沖縄 停電情報
http://www.okidenmail.jp/bosai/info2/index.html

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="result" data-user="game_programer" data-slug-hash="zYoZmJa" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="test_teiden_okinawa">
  <span>See the Pen <a href="https://codepen.io/game_programer/pen/zYoZmJa">
  test_teiden_okinawa</a> by ゲームプログラマー⛅あの日見たバグの名前を僕達はまだ知らない。 (<a href="https://codepen.io/game_programer">@game_programer</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

---

一応地震も表示させておくか

### 気象庁｜地震情報
https://www.jma.go.jp/jp/quake/
Result->○
<p class="codepen" data-height="2447" data-theme-id="light" data-default-tab="result" data-user="game_programer" data-slug-hash="yLVMRGz" style="height: 2447px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="test_zisin">
  <span>See the Pen <a href="https://codepen.io/game_programer/pen/yLVMRGz">
  test_zisin</a> by ゲームプログラマー⛅あの日見たバグの名前を僕達はまだ知らない。 (<a href="https://codepen.io/game_programer">@game_programer</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

---

### Testしてみた感想

まとめて日本全国の停電情報を表示しているサイトがなかったので、
自分でまとめて「iframe」で表示できるか検証してみたが。

そもそも対応していないだったり、
web表示方法（デザイン）が統一されていないだったりで、
少々残念な結果に終わってしまった。

一部はうまく表示されているので成功ともいえるが。
国をあげて各電力会社、統一したデザインで表示され、
一律に日本が安全確認ができると嬉しい

---

### 参考
国土交通省 防災ポータル ライフライン情報
https://www.mlit.go.jp/river/bousai/olympic/helpful07/index.html
Result->○
<p class="codepen" data-height="8259" data-theme-id="light" data-default-tab="result" data-user="game_programer" data-slug-hash="PobpXjB" style="height: 8259px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="test_japan_lifeline">
  <span>See the Pen <a href="https://codepen.io/game_programer/pen/PobpXjB">
  test_japan_lifeline</a> by ゲームプログラマー⛅あの日見たバグの名前を僕達はまだ知らない。 (<a href="https://codepen.io/game_programer">@game_programer</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>