【GAS】天気予報を表示するアプリを作る～画像を表示させる～【第9回】
前回は、天気コード用のJSONを読み込ませました。今回は、早速画像を表示できるようにしていきます。
画像を表示させる
画像を表示させるには、前回読み込んだJSONファイルと、画像を表示させるHTMLタグとURLが必要です。
GAS
画像を表示させるために書き換えたコードです。
JSONデータを受け取ります。img1には、タグとURLの途中までを入れ、JSONデータのWeatherCodesの0番目(ファイル名と拡張子が入っている)を取り出し、HTMLの閉じタグを入れています。
var jsond = get_jobj();
var img1="<img src = https://www.jma.go.jp/bosai/forecast/img/" +jsond[data[0][2]][0]+ ">";
var img2="<img src = https://www.jma.go.jp/bosai/forecast/img/" +jsond[data[1][2]][0]+ ">";
htmlTemplate.weatherCodes = [img1,img2];HTML
?!にすることで、weatherCodesの中身を文字としてではなくタグとして認識させます。
<?!= weatherCodes[0] ?><?!= weatherCodes[1] ?>実行結果
実行してみると、以下のように画像が表示されました。
最後に
今回は、前回のJSONを読み込みを活かして画像を表示させました。次回は、コード全文を載せて最終回としたいと思います。
【GAS】天気予報を表示するアプリを作る～目次～
- 【GAS】天気予報を表示するアプリを作る～jsonの中身のチェック～【第1回】
- 【GAS】天気予報を表示するアプリを作る～console.logで表示～【第2回】
- 【GAS】天気予報を表示するアプリを作る～HTMLに一部表示～【第3回】
- 【GAS】天気予報を表示するアプリを作る～地域を選択できるようにする～【第4回】
- 【GAS】天気予報を表示するアプリを作る～テーブルで天気予報を表示～【第5回】
- 【GAS】天気予報を表示するアプリを作る～HTMLにCSSを追記～【第6回】
- 【GAS】天気予報を表示するアプリを作る～日付の整理～【第7回】
- 【GAS】天気予報を表示するアプリを作る～ドライブから読み込む～【第8回】
- 【GAS】天気予報を表示するアプリを作る～画像を表示させる～【第9回】
- 【GAS】天気予報を表示するアプリを作る【最終回】