このページの本文へ

情報豊富な気象庁サイト「あなたの街の防災情報」で自分の身を守ろう

2021年08月29日 12時00分更新

文● 柴田文彦 編集●飯島恵里子/ASCII

  • この記事をはてなブックマークに追加
  • 本文印刷

コンテンツの表示領域の幅は境界をドラッグして調整可能

かなり自由にカスタマイズできるレイアウト

 ここまで見てきたようなコンテンツは、単に表示をオン/オフできるだけではない。「あなたの街の防災情報」のページ内でのレイアウトを、かなり自由にカスタマイズできる。

 まず、各コンテンツのブロックは、左右方向にドラッグして自由に幅を調整できる。とはいえ、正方形に近い比率の表示が適したコンテンツと、横長の表示が適した表示のコンテンツがあるので、それを意識して大きさを決めるといい。

 またブロックの高さは、「横一列に並んだ複数のブロックをまとめて」ということになるが、やはり上下方向にドラッグして調整できる。

横方向に並んだブロックの高さはまとめて調整できる

 さらに、ブロック自体をドラッグすることで、個々のブロックの位置を移動して配置を変更することも可能だ。そのためには、各ブロックの上辺の「タイトルバー」に相当する部分をつかむようにして、大きくドラッグする。移動することで、移動先のスペースに応じてブロックの幅や高さも自動的に調整されることになる。1つの行に多くのブロックを並べれば、それだけ1つあたりのブロックの幅を狭くする必要があるからだ。

 コンテンツのレイアウトを変更する際には、まずブロックの配置を決めてから、それぞれの情報の表示のしかたに応じて、幅や高さを調整するといいだろう。慣れないと、思ったようなレイアウトに調整しにくいかもしれないが、何度かやっているうちに、望み通りの配置が得られるだろう。

かなり自由に移動して、大きさを調整できるブロックのレイアウト

 デフォルトの状態から、各コンテンツの表示スイッチを操作して新たなコンテンツを追加すると、最後に追加したものが、かならずページの左上の角、つまりブロックの並びの先頭に配置される。もちろん、いったん追加してから、ドラッグして表示順を変更しても良いのだが、あらかじめ表示するコンテンツと表示順序を決めておけば、ずっと簡単にレイアウトを設定することができる。いったんすべてのコンテンツのスイッチをオフにした後、後ろ(右下)の方に表示したいコンテンツから順にスイッチをオンにしていって、最後に先頭(左上)に表示したいもののスイッチをオンにすればいい。

 表示するコンテンツやレイアウトが決まったら、その状態を保存しておくこともできる。「カスタマイズ」のメニューにある「表示パターン」の部分にある、「現在の状態を新規保存」をクリックするだけだ。

選択したコンテンツとレイアウトはブラウザーに保存しておける

 保存した状態には、自動的に名前が付けられる。保存できるのは1種類のレイアウトだけではない。コンテンツの選択やレイアウトを変更してから、再び「現在の状態を新規保存」すれば、新たにその状態が保存される。

保存した状態には自動的に名前が付けられる

 一方、変更した状態を、別の保存状態ではなく、すでに保存されている状態に上書きしたい場合は、保存状態の名前の右側にあるフロッピーディスク「!」のボタンをクリックすればいい。

 保存済みの状態は、上の例の場合「千代田区 10コンテンツ」という部分をクリックして、いつでも呼び出すことができる。異なる地域や目的によって、複数の状態を保存しておき、その中から状態を選択して直ちに表示を切り替えるといった使い方も可能だ。

 なお、選択したコンテンツやレイアウトは、ページのURLにも反映される。たとえば、上の例で示した東京都千代田区のコンテンツとレイアウトは、以下のURLで再現可能となっている。知人にメールなどのテキストとして情報を伝えたい場合にも便利だ。

スマホでも無理のないレイアウトで利用可能

 上のレイアウトでは、比較的幅の大きなパソコン上のウェブブラウザーの例を示した。この「あなたの街の防災情報」のページは、いわゆるレスポンシブデザインになっている。スマホやタブレットのように、表示領域に余裕がない場合でも、自動的にレイアウトが変更され、個々のコンテンツを小さくし過ぎることなく表示が可能だ。たとえば、上の例のように「雨雲の動き」「天気図」「台風経路図」を3つを横一列に並べたレイアウトの場合、それらが縦に3つ並ぶことになる。

スマホでは、自動的に縦一列のレイアウトになる

 スマホの場合、他のコンテンツも同様に縦一列に並ぶことになるので、コンテンツが多ければ、かなり縦長のレイアウトになってしまうことは避けられないが、個々のコンテンツの視認性は維持される。

 ところで、はじめにも述べたように、今年の8月中旬のお盆休みのころ、日本列島にはこの季節にしては珍しい前線が停滞し、各地に大雨、長雨をもたらした。そうした状況を受けて、やはり気象庁からの情報を欲する人が全国レベルで多かったのだろう。気象庁のサイトへのアクセスが集中し、閲覧しにくくなる状況が発生した。気象庁では、そうした状況への対策として、残念ながらサーバーの処理能力を強化するのではなく、「コンテンツの軽量化やシステムの設定を見直すことにより、システムへの負荷を軽減する措置を実施」したとしている。

 確かに、その前後で表示や機能が変更されたことに気付く。たとえば、「雨雲の動き」のブロックでは、以前は地形の起伏の情報も表現されていたはずだが、現状ではそれが省かれ、白っぽい地図表示になっている。ただし、県境や主要な鉄道、河川は描かれているので、特に困ることはない。また、以前は「あなたの街の防災情報」のサイトや「雨雲の動き」のページなどが、いわゆるPWA(プログレッシブウェブアプリ)になっていた。スマホのホーム画面に追加すると、以後はブラウザーのウィンドウとは独立して、アプリのように動かすことができた。現状では、ホーム画面に追加したアイコンは、単なるブックマークとして機能するだけとなり、タップするとウェブブラウザーの中の1つのタブとして開くだけとなった。これは使い勝手を考えると残念な措置だ。それでも、情報が閲覧できなくなるよりはマシだが、根本的な解決策とは思えない。

 今後も、状況に応じて表示内容や表示方法が変更になることがあるかもしれない。本当はサーバーを増強するような措置で、災害が迫った場合のアクセス集中に対応してもらえないものかと、切に願う。

カテゴリートップへ

ASCII倶楽部

注目ニュース

  • 角川アスキー総合研究所

プレミアム実機レビュー

ピックアップ
1
Anker PowerLine III Flow USB-C & USB-C ケーブル Anker絡まないケーブル 240W 結束バンド付き USB PD対応 シリコン素材採用 iPhone 17 / 16 / 15 / Galaxy iPad Pro MacBook Pro/Air 各種対応 (1.8m ミッドナイトブラック)
Anker PowerLine III Flow USB-C & USB-C ケーブル Anker絡まないケーブル 240W 結束バンド付き USB PD対応 シリコン素材採用 iPhone 17 / 16 / 15 / Galaxy iPad Pro MacBook Pro/Air 各種対応 (1.8m ミッドナイトブラック)
¥1,890
2
Anker USB Type C ケーブル PowerLine USB-C & USB-A 3.0 ケーブル iPhone 17 / 16 / 15 /Xperia/Galaxy/LG/iPad Pro/MacBook その他 Android 等 USB-C機器対応 テレワーク リモート 在宅勤務 0.9m ホワイト
Anker USB Type C ケーブル PowerLine USB-C & USB-A 3.0 ケーブル iPhone 17 / 16 / 15 /Xperia/Galaxy/LG/iPad Pro/MacBook その他 Android 等 USB-C機器対応 テレワーク リモート 在宅勤務 0.9m ホワイト
¥740
3
CIO フラットスパイラルケーブル CtoC 1m (Type-C/USB-C) PD 急速充電 平型 磁石 マグネット吸着 まとまる 充電ケーブル PD 240W データ転送 480Mbps (ライトブラック, 1m)
CIO フラットスパイラルケーブル CtoC 1m (Type-C/USB-C) PD 急速充電 平型 磁石 マグネット吸着 まとまる 充電ケーブル PD 240W データ転送 480Mbps (ライトブラック, 1m)
¥1,980
4
エレコム 電源タップ 6個口 3m 雷ガード 個別スイッチ ほこりシャッター付 耐熱 PSE技術基準適合 ブラック T-K6A-2630BK
エレコム 電源タップ 6個口 3m 雷ガード 個別スイッチ ほこりシャッター付 耐熱 PSE技術基準適合 ブラック T-K6A-2630BK
¥2,111
5
Anker iPhone充電ケーブル PowerLine II ライトニングケーブル MFi認証 超高耐久 iPhone 14 / 14 Pro Max / 14 Plus / 13 / 13 Pro / 12 / 11 / X/XS/XR / 8 Plus 各種対応 (0.9m ホワイト)
Anker iPhone充電ケーブル PowerLine II ライトニングケーブル MFi認証 超高耐久 iPhone 14 / 14 Pro Max / 14 Plus / 13 / 13 Pro / 12 / 11 / X/XS/XR / 8 Plus 各種対応 (0.9m ホワイト)
¥990
6
【Amazon.co.jp限定】 ロジクール 静音 ワイヤレス トラックボール マウス M575SPd Bluetooth Logibolt 無線 windows mac iPad OS Chrome トラックボールマウス ブラック M575 M575SP 国内正規品 ※Amazon.co.jp限定 壁紙ダウンロード付き
【Amazon.co.jp限定】 ロジクール 静音 ワイヤレス トラックボール マウス M575SPd Bluetooth Logibolt 無線 windows mac iPad OS Chrome トラックボールマウス ブラック M575 M575SP 国内正規品 ※Amazon.co.jp限定 壁紙ダウンロード付き
¥7,040
7
Verbatim バーベイタム 1回録画用 ブルーレイディスク BD-R 25GB 50枚+3枚増量パック インクジェットプリンタ対応 ホワイト 片面1層 1-6倍速
Verbatim バーベイタム 1回録画用 ブルーレイディスク BD-R 25GB 50枚+3枚増量パック インクジェットプリンタ対応 ホワイト 片面1層 1-6倍速
¥2,480
8
UGREEN USB Type Cケーブル PD対応 100W/5A 超急速充電 USB C ナイロン編み 断線防止 iphone17/16/15シリーズ/iPad/MacBook Pro/Galaxy S24/Matebook/iPad/Xperia等USB-C各種対応(1m, ブラック)
UGREEN USB Type Cケーブル PD対応 100W/5A 超急速充電 USB C ナイロン編み 断線防止 iphone17/16/15シリーズ/iPad/MacBook Pro/Galaxy S24/Matebook/iPad/Xperia等USB-C各種対応(1m, ブラック)
¥1,299
9
Amazon Kindle - 目に優しい、かさばらない、大きな画面で読みやすい、6週間持続バッテリー、6インチディスプレイ電子書籍リーダー、ブラック、16GB、広告なし
Amazon Kindle - 目に優しい、かさばらない、大きな画面で読みやすい、6週間持続バッテリー、6インチディスプレイ電子書籍リーダー、ブラック、16GB、広告なし
¥19,980
10
KIOXIA(キオクシア)【日本製】USBフラッシュメモリ 32GB USB2.0 国内サポート正規品 KLU202A032GL
KIOXIA(キオクシア)【日本製】USBフラッシュメモリ 32GB USB2.0 国内サポート正規品 KLU202A032GL
¥980

Amazonのアソシエイトとして、ASCII.jpは適格販売により収入を得ています。

デジタル用語辞典

ASCII.jpメール デジタルMac/iPodマガジン