エクセルVBAでインデントや改行を入れながらHTML文を追加していく便利関数を作る

2016.04.17

price

みなさん、こんにちは！
タカハシ(@ntakahashi0505)です。

エクセルVBAで自動でHTML生成をするといったことを進めています。

具体的には

  • Bootstrapを使ったWordPressによる企業向けサイト
  • service,plan,aboutの3つのセクションによるトップページ
  • エクセルの入力情報から自動生成する

といった方針です。

前回はこちらの記事で、serviceセクションを作りました。

エクセルVBAでWordPress投稿用HTMLソースを自動で生成する
WordPressサイトのソースをエクセルVBAで自動生成する方法についてのシリーズ。初回の今回ですが、エクセルの入力情報をもとにシングルページの１つのセクションについて自動でコード生成をする方法です。
tonari-it.com

ただちょっと、文字列連結のアンパサンド（＆）がたくさんあって見づらいんですよね。

今回は、タブコードや改行コードを入れながらHTML文を追加していく処理を関数化してスッキリさせつつ、Planセクションを生成するプログラムも作っていきたいと思います。

では、よろしくお願いいたします！

スポンサーリンク

前回のおさらい：ServiceセクションのHTMLを生成する

前回のプログラムのおさらいです。

メインのプロシージャがこちら。

Sub createTopHTML()

Dim strHTML As String

Dim ws As Worksheet
For Each ws In ThisWorkbook.Worksheets

    Select Case ws.Name

        Case "service"

            strHTML = strHTML & createServiceSection(ws)

        Case "plan"

        Case "about"

    End Select

Next ws

Debug.Print strHTML

End Sub

生成されたHTMLがイミディエイトウィンドウに出力されます。

serviceセクションを生成する関数createServiceSectionはこちらです。

Function createServiceSection(ByVal ws As Object) As String

Dim str As String

'section開始タグ
str = str & "
" & vbCr

'***** セクションタイトルB1,セクション概要B2 *****
str = str & vbTab & _
        "
" & ws.Range("B1").Value & _
        "
" & ws.Range("B2").Value & "
" & vbCr

'***** カラム *****
'class="row"の開始タグ

str = str & vbTab & "
" & vbCr

Dim i As Long
For i = 5 To 8 '4カラム分繰り返し

    'class="col-sm-x"の開始タグ
    str = str & vbTab & vbTab & "
" & vbCr

    'タイトルB列
    str = str & vbTab & vbTab & vbTab & "
" & ws.Cells(i, 2).Value & "
" & vbCr

    'サムネイル画像(枠のみ）
    str = str & vbTab & vbTab & vbTab & "
" & vbCr

    'テキストC列
    str = str & vbTab & vbTab & vbTab & "" & ws.Cells(i, 3).Value & "
" & vbCr

    'class="col-sm-x"の閉じタグ
    str = str & vbTab & vbTab & "
" & vbCr

Next i

'class="row"の閉じタグ
str = str & vbTab & "
" & vbCr

'section閉じタグ
str = str & "
" & vbCr

createServiceSection = str

End Function

…やっていることは文字列の連結なので、さほど難しいことをしているわけではないのですが、タブコードvbTabや改行コードvbCrなども入れるとアンパサンド（&)が多くなり見づらいですね。

まずはこの文字列の連結を関数化することでスッキリしていきましょう。

HTML文への文字列連結をする関数addHTML

createServiceSectionの各行は元の文字列strに文字列を追加していくという処理ですが

  • 元の文字列の後ろに文字列を一行ずつ追加する
  • 各行の冒頭にタブコードvbTabが0～3つ入る
  • 各行の最後は改行コードvbCr

という法則性があります。

したがって、この処理を関数化することでコードをスッキリさせることができそうです。

この後に作るであろうplanセクションやaboutセクションのHTML生成にも便利ですし、後で読み返すときやメンテナンスするときに簡潔に書いておくほうが良いからです。

脱プログラミング初心者のためのバイブル「リーダブルコード」のススメ
とにかくプログラマーというプログラマーが皆さんオススメしまくっている本「リーダブルコード」。その名のとおり「読みやすいコード」を書くための実践的なテクニックを凝縮している本書について紹介します。
tonari-it.com

関数addHTMLのプログラム

その部分を関数化したaddHTMLはこちらです。

Function addHTML(ByVal strBase As String, ByVal cntIndent As Long, ByVal strAdd As String) As String

If cntIndent > 0 Then

    Dim i As Long
    For i = 1 To cntIndent

        strBase = strBase & vbTab

    Next i

End If

strBase = strBase & strAdd & vbCr

addHTML = strBase

End Function

各引数は

  • strBase：元のHTML文字列
  • cntIndent：タブコードの数
  • strAdd：追加する特定の文字列

として与えれます。

この関数では元の文字列に

  1. 必要な数のタブコードを追加
  2. 特定の文字列を追加
  3. 改行コードを追加

して文字列を返します。

addHTMLを使ってcreateServiceSectionを書き直す

関数addHTMLを使ってcreateServiceSectionを書き直すと、このようになります。

Function createServiceSection(ByVal ws As Object) As String

Dim str As String
str = ""

'section開始タグ
str = addHTML("", 0, "
")

'***** セクションタイトルB1,セクション概要B2 *****
str = addHTML(str, 1, "
" & ws.Range("B1").Value & "
" & ws.Range("B2").Value & "
")

'***** カラム *****
'class="row"の開始タグ
str = addHTML(str, 1, "
")

Dim i As Long
For i = 5 To 8 '4カラム分繰り返し

    'class="col-sm-x"の開始タグ
    str = addHTML(str, 2, "
")

    'タイトルB列
    str = addHTML(str, 3, "
" & ws.Cells(i, 2).Value & "
")

    'サムネイル画像(枠のみ）
    str = addHTML(str, 3, "
")

    'テキストC列
    str = addHTML(str, 3, "" & ws.Cells(i, 3).Value & "
")

    'class="col-sm-x"の閉じタグ
    str = addHTML(str, 2, "
")

Next i

'class="row"の閉じタグ
str = addHTML(str, 1, "
")

'section閉じタグ
str = addHTML(str, 0, "
")

createServiceSection = str

End Function

少しわかりやすくなりましたね。

planセクションを生成するプログラム

では、続いてplanセクションを生成するプログラムを作っていきます。

エクセルシートはこのように準備しました。

planセクションのテキスト情報

planセクションはserviceセクションと同じく4カラムで、類似しています。

プランノーツサイトのplanセクション

異なる点としては、サムネイルとタイトルの順番が異なり、小さめの文字フォントで金額が記載されているという点です。

ですから、createServiceSectionをコピーして必要箇所の書き換えや行の入れ替えをすればできそうです。

planセクションを生成するcreatePlanSection

planセクションを生成するcreatePlanSectionはこちらです。

Function createPlanSection(ByVal ws As Object) As String

Dim str As String
str = ""

'section開始タグ
str = addHTML("", 0, "
")

'***** セクションタイトルB1,セクション概要B2 *****
str = addHTML(str, 1, "
" & ws.Range("B1").Value & "
" & ws.Range("B2").Value & "
")

'***** カラム *****
'class="row"の開始タグ
str = addHTML(str, 1, "
")

Dim i As Long
For i = 5 To 8 '4カラム分繰り返し

    'class="col-sm-x"の開始タグ
    str = addHTML(str, 2, "
")

    'サムネイル画像(枠のみ）
    str = addHTML(str, 3, "
")

    'タイトルB列＆価格C列
    str = addHTML(str, 3, "
" & ws.Cells(i, 2).Value & "" & ws.Cells(i, 3).Value & "
")

    'テキストD列
    str = addHTML(str, 3, "" & ws.Cells(i, 4).Value & "

")


'class="col-sm-x"の閉じタグ
str = addHTML(str, 2, "</div>")



Next i


'class="row"の閉じタグ

str = addHTML(str, 1, "


")


'section閉じタグ

str = addHTML(str, 0, "


") & vbCr


createPlanSection = str


End Function


実行により出力されたデータをWordPressでプレビューしてみます。


生成したplanセクションのHTMLソースのプレビュー

バッチリですね。


まとめ


エクセルVBAで自動でHTML生成をするプログラムですが、今回はserviceセクションの文字列連結部分を関数化してスッキリさせるとともに、それを活用してplanセクションを生成する関数を作成しました。


あとトップページに関してはaboutですね。


次回、お伝えしていきたいと思います。



429 Too Many Requests
tonari-it.com


お楽しみに！


連載目次：エクセルの入力情報からVBAでHTML文を自動生成

企業向けのWebサイトを作る際、エクセルの入力情報を元に自動でHTMLコードを生成できれば楽ですよね。本シリーズではBootstrapを使ったシングルページを想定してコードを生成するVBAプログラムを作っていきます。


    
	
  1. エクセルVBAでWordPress投稿用HTMLソースを自動で生成する
    2. 

	
  2. エクセルVBAでインデントや改行を入れながらHTML文を追加していく便利関数を作る
    3. 

	
  3. エクセル入力情報からWebサイトの会社概要のHTML文を生成するVBAプログラム
    4. 

	
  4. 【エクセルVBA】シートの開始行や行数の変更があってもちゃんと動く繰り返し文の書き方
    5. 

	
  5. カラム数を指定してBootstrapのグリッドシステムを使ったHTMLを生成するエクセルVBA
    6.
タイトルとURLをコピーしました