EXCELを使ったサイトマップの作り方(第3回:HTML文を作る) | 太陽光発電&ECO~かーずのLovin' Life~

EXCELを使ったサイトマップの作り方(第3回:HTML文を作る)

今回は、エクセルを使ってHTMLを作成します。
以下の2つの記事を読んでいることを前提に書いていますので、まだの方は読んでおいてくださいね。
関連記事1:EXCELを使ったサイトマップの作り方(第1回:データベース作成)
関連記事2:EXCELを使ったサイトマップの作り方(第2回:EXCEL数式について)

まずは、アメブロのエディタ(タグの非表示)で作成したい文章のひな形を作ります。今回はシンプルに
日付、発電量、売電量の3項目を使用して、日付にリンクを入れる形にします。

太陽光発電&ECO~かーずのLovin' Life~-excel13


次に、この文章のHTML文を確認するため、エディタの「HTMLタグを表示」をクリックしてHTML文を表示します。

太陽光発電&ECO~かーずのLovin' Life~-excel14


いろいろなタグなどが自動生成されているのがわかると思います。これをコピーして別のエディタ(例えばメモ帳、ワードパッド等)に貼りつけて編集して行きます。

太陽光発電&ECO~かーずのLovin' Life~-excel15


これはワードパッドに貼りつけて色分けしたところです。赤色表示の部分がエクセルからデータを引っ張ってきたい部分になります。つまり、いろいろと変化する部分になります。黒文字部分はそのまま文字列として使用します。


次からする作業は、このHTML文をエクセル式に変換しますが、先ほど説明したとおり、このHTML文には文字列部分と変化する部分(数式部分)が混在しているため、これを同時に使うためのちょっとした予備知識が必要です。

例えば、「文字列1」「数式」「文字列2」という要素をくっつけてひとつの数式とするためには、

="文字列1" & 数式 & "文字列2"

それから、前回の最後で解説したエクセルのデータベース用数式の書き方
テーブル名[[#この行],[見出し名]]
この2つの基本を抑えたうえで、先程の数式を以下のように修正します。

まず、文字列部分を""(ダブルクォーテーション)で囲みます。※<href=以降にあるURLをくくるために元々ついている(")はそのままでは文字として認識されませんので、それぞれの頭にもう一つ(")を付ける必要があります。
そして、文字列と数式の間を(&)でつなぎます。それから、エクセル式なので、一番最初に=(イコール)をつけるのを忘れずに!下の画像で緑色の部分が追加した部分になります。

太陽光発電&ECO~かーずのLovin' Life~-excel16


次に、変化させる部分を数式に置き換えて行きます。今回の例題ではテーブル名は「テーブル3」、参照する項目名は「日付」「発電合計」「売電合計」となりますので、それぞれを上の構文に当てはめて置換すると以下のようになります。

太陽光発電&ECO~かーずのLovin' Life~-excel17


最後に、各行の見えない改行を削除してから(下図の←部分)コピーします。

太陽光発電&ECO~かーずのLovin' Life~-excel18


そして、エクセルに戻り、先ほどコピーした数式をそのまま貼りつけます。

太陽光発電&ECO~かーずのLovin' Life~-excel19


数式に間違いがなければ、そのままコピーされ、同じ数式が全ての行に自動適用されます。これで無事にHTML文をエクセル式に一括変換できました。

太陽光発電&ECO~かーずのLovin' Life~-excel20


次に、作成されたエクセル式の必要部分を選択してコピーします。

太陽光発電&ECO~かーずのLovin' Life~-excel21


それを、アメブロ記事作成画面の「HTMLタグを表示」画面に貼りつけてください。

太陽光発電&ECO~かーずのLovin' Life~-excel22


今度は「タグの非表示」画面に切り替えて見え方を確認してください。

太陽光発電&ECO~かーずのLovin' Life~-excel23


ちょっと変ですね。日付になっているべき部分が数字になってますし、日付と日付の間に改行を入れるともっと見やすい気がします。これを修正するには先ほど作成したエクセル数式を以下のように変更します。

太陽光発電&ECO~かーずのLovin' Life~-excel24


水色部分が新たに追加した部分
です。エクセルでは日付データを少数で表すため、それをそれぞれ年、月、日の数値に変換し、その後に「年」、「月」、「日」の文字列をくっつけています。最後には、行間を入れるため改行タグ<br>を追加しました。

画像ではわかりにくい方のために、いかにテキストでも書いておきますね。
="<a href=""" & テーブル3[[#この行],[url]] &""">"& year(テーブル3[[#この行],[日付]])&"年"& month(テーブル3[[#この行],[日付]])& "月"& day(テーブル3[[#この行],[日付]])&"日"& "</a><br />・発電量:"&テーブル3[[#この行],[発電合計]]&"kwh<br />・売電量:"&テーブル3[[#この行],[売電合計]]&"kwh<br /><br>"


これをコピーし、先程と同様にエクセルに貼りつけ、アメブロに書き戻すと、

太陽光発電&ECO~かーずのLovin' Life~-excel25


うまく行っているような感じです。プレビューして確認してみます。

太陽光発電&ECO~かーずのLovin' Life~-excel26


完璧ですね!
この方法を使いこなせば、データを自由に並べ替えたり集計した上で、様々なページへのリンクを短時間で作成することができます。

今回は特別なソフトを使わないで、発電データを元にアメブロで簡単にサイトマップを作る方法として、シンプルな例題として書いてみましたが、日付を記事のタイトルに変えたりカテゴリごとにデータベース化するなどしておけば、応用は無限ですね。もちろんアメブロ以外のどんなブログでも通用する方法です。

もっとうまい方法があるかもしれませんが、とりあえずかーずはこんな感じでやってま~すべーっだ!
もっと効率的にできる方法があれば教えてくださいね。

参考になれば幸いです。かーずでした。