今回の地震の被災者の皆さまに心よりお見舞い申しあげます。
今回の番長Blogの担当、東京オフィスのKです。
今までの担当は社内でも番長の方々でしたが、今回は子分側の自分が担当します。
さて、今回の震災で、現在も日本は大変なことになっていますが、
今回の震災直後に、多くの方が困った問題として計画停電があります。
震災直後は、計画停電の情報が錯綜した上、東京電力のホームページに接続出来ず、
みんなが地震のグループが分からず混乱を極めていました。
その中で、ぽつぽつと現れたのが、
東京電力のホームページのPDFをミラーするサイトや、計画停電の地域検索サイトたちです。
社内でも、個人的にミラーサイトや検索サイトを立ち上げた従業員がおり、自分も、その一人でした。
自分が立ち上げたのは、計画停電の地域検索サイトです。
そこで、このプログラムの簡単な解説をします。
この手の、検索結果が変化しない検索サイトを作るときの方法としては
何パターンか考えられます。
- 大量の静的HTMLをリンクでつなげる。
- サーバーにデータベースなどを置きサーバーサイドで検索して表示
- 静的なデータを用意して、JavaScript等でクライアントサイドで検索
異論はあると思いますが、独断と偏見でそれぞれ、以下のようなメリットデメリットがあります。
そして、今回は、ミラーサイトを作って負荷の分散される事を期待して、
転載が容易な３番の方法で構築し転載自由で公開していました(*1)。
プログラムの構造は何カ所かテクニックがありますが、基本はシンプルです。
まず、行う必要があるのは、データの用意です。
東京電力のホームページからPDFやエクセルファイルを入手し、一度テキストファイルに変換し、
この時点で、データの間違い(*2)などがあるため、この時点で修正します。
その上で、エディタソフトの正規表現置換機能などで、都道府県別にJSON形式(*3)に変換し、
toyko.js、kanagawa.js等のファイルに保存します。
このあたりは、最終的にはC#で半自動化するプログラムを書きましたが当初は手作業でした。
次に、プログラムですが、まずユーザーに都道府県の選択をしてもらいます。
そのタイミングで、選択された都道府県のJSONファイルを、
サーバーから読み込むようにプログラム側では書かれています。
このように、必要な都道府県の情報だけを動的に読み込むため、
少なくとも、東京電力で公開していたPDFよりは格段に、データの転送量は少なくなっています。
本来ならば、さらに、データの転送量を抑えるために、
もっと細かく市区町村などに絞ったJSONファイルを用意たいところでしたが、
少々煩雑になる点があったので、妥協しています。
ここまで来れば、後は、ユーザーが入力した住所を元に、
読み込んだJSONファイルの中身を検索して表示するだけです。
その他詳しいことは、プログラムをご覧ください。
ダウンロードはこちら→計画停電検索
かつては、これらのプログラムを１から構築するのは非常に大変でしたが、
現在は様々な便利な物が用意されています。
たとえば、JavaScriptでJSONデータをサーバーから取得する部分は、
ブラウザ毎に処理を書き分ける必要があります。
しかし、その部分は、jQueryを利用して、そういった差異を吸収しています。
そのため、データが入手できてから公開できる様になるまで１時間程度(*4)で完成しています。
問題は、何をどう組み合わせれば、目的の物が実現できるかで、うまく組み合わせることが出来れば、
非常に短期間で開発が可能で、今回のように、思いついたらすぐに行動に移すことが出来ます。
そのためにも、反復して様々なプログラムに触れることは大切です。
(*1)東京電力公式で検索ページが稼働したため、そちらへのリンクを残して閉鎖しています。
(*2)不適切な場所での改行などの変換エラーや、茨城のデータが群馬のファイルにあるなどの記述ミスと思われる物。
(*3)JSON形式とはJavaScriptで標準的なデータファイルの形式の一つ。
(*4)思い立ってから、公開までは、数時間かかっています。これは、当時、デジタルデータでの停電地域情報が入手困難だったため。