初心者勉強会で作ったソースコードを載せて解説します。
勉強会では「SPA」という課題で、WEBページにおけるアプリケーションというテーマで今後はスマホもネイティブアプリからブラウザアプリに切り替わるであろう事を予測して、それに伴うjavascriptの勉強でした。
SPA自体はブラウザの単体ページをアプリケーションとして構成してしまうのですが、他サイトから情報を取得するクロール技術と組み合わせる事で、非常に利便性の高いアプリケーションとして利用できるようになります。
今回は、そうしたクロール技術の一つである、ページ内の情報を読み取るという事でサンプルプログラムを書いて見ました。
ちなみに、今回の記事は初心者WEBプログラマー向けの記事なので、高度なツールやコーディングは書かれていません。
SPA関連リンク
SPA(Single Page Application)の基本
→SPAについて
よくまとめられている記事です。一読すると理解できるでしょう。
シングルページアプリケーション（SPA）の導入メリット＆デメリット
→oroさんの書かれている記事で、fintechである彼らもSPAを利用するメリットは大いにあるでしょうね。
今回の課題と対応
【課題】 気象庁のお天気ページで東京の週間予想を取得する。
【やりかた】 対象のページを開き、ブラウザのjavascriptコンソールを使って、テキストで一覧情報を取得する。
【対象URL】
http://www.jma.go.jp/jp/week/319.html
ソースコード
// データエリアの取得
var area = document.getElementById("infotablefont");
// データテーブルの取得
var line = area.querySelectorAll("tr");
// 日別のデータ取得
var days = line[0].querySelectorAll("th");
// 天気データの取得
var tenki = line[1].querySelectorAll("td");
// 表示処理
for(var i=1; i<days.length; i++){
var val_date = days[i].textContent.split("\n").join("");
var val_tenki = tenki[i-1].textContent.split("\n").join("");
console.log(val_date +" : "+ val_tenki);
}
使い方と解説
使い方はいたって簡単で、上記URLを開いて、javascriptコンソール画面を開きます。（macの場合は CMD+OPT+j）
コンソール画面に上記ソースコードをコピペしてenterするだけ。
以下の様な結果が出ます。
31水 : 晴のち曇
1木 : 曇
2金 : 曇一時雪か雨
3土 : 曇
4日 : 晴時々曇
5月 : 晴時々曇
6火 : 晴時々曇
ソースの中身は、データ対象エリアから、日付と天気情報のエリアをloopで回しながら文字列を取得しているだけです。
ここからの発展系は、こうしたデータをDB格納して、１週間分のデータしか表示されていないが、過去データを蓄積する事で
何かしらの統計データと紐付けたり、簡易なアプリケーションでajaxで取得したこうした情報で別のアプリケーション内部に
天気情報を掲載できたりします。
SPAというよりはその手前の基本操作に近いソースコードですが、初心者の人は自分でこういうコードを書きためていって、便利ライブラリを作るというのも面白いかもしれませんね。
