【VBA】html のコードを出力。例：誰でも共有ブックマークを更新できるマクロ

Text を書き出す要領で、html を書き出すマクロを用意しました。
シートを html 形式で保存しても良いのですが、ちょっと不都合がありました。
・表示が遅い（重い）。
・デザインがダサい。
・html コードが汚い（不要なものが多い）。

作ったキッカケは、事務所で共有している「作業用ブックマーク」の更新を簡易化するのが目的でした。
以前は、html ファイルを Text で編集していたのですが、コードの中から編集した部分を探すのも大変です。
そこで、
・編集する範囲がすぐに見付けられる。
・html に詳しくない他の人にも気軽に更新してもらえる。
を目指しました。

シートのデザインサンプル
コードサンプル
1. 出力結果
使い処
1. 動作の注意点
おまけ機能
最後に

シートのデザインサンプル

Excel のシートは、下図のようなデザインにしました。
【水色のセル】
　誰でも編集して良い範囲
　ここが Webページに表示される部分
【灰色のセル】
　他の人に編集して欲しくない範囲
　html の構造のコードを記載する範囲

実際に使っているのは、もっと複雑な htmlコードですよ。
応用しやすい様に、基本構造だけのシンプルな形を掲載しています。

htmlについて調べたい方は、こちらのサイトがとても参考になります。
参考： HTMLクイックリファレンス

コードサンプル

私はこのコードを、先程のシートデザインの図の、[作成] ボタンに割り当てました。

Sub HTMLファイル書き出し()

    Dim Target As String
    Target = ActiveWorkbook.Path & "\index.html"

    '出力先を指定する場合
'    Dim Target As String
'    Target = "C:\hoge\hoge\index.html"

    '最終行を取得
    Dim MaxRow As Integer
    MaxRow = Cells(65536, 2).End(xlUp).Row

    'htmlコードとしてセルB5にまとめる
    'まずは、一行目をセルB5に書き出す
    Cells(5, 2).Value = Cells(6, 2).Value

    '残りの行をB5に書き出す
    Dim i As Long
    For i = 7 To MaxRow
        Cells(5, 2).Value = Cells(5, 2).Value & vbCrLf & Cells(i, 2).Value
    Next i

    '文字コードUTF-8形式で書く魔法、先頭で指定したTargetの階層/ファイル名で保存
    HtmlCode = Cells(5, 2).Value

    'http://officetanaka.net/excel/vba/file/file11.htm
    With CreateObject("ADODB.Stream")
        .Charset = "UTF-8"
        .Open
        .WriteText HtmlCode, 1
        .SaveToFile Target, 2
        .Close
    End With

    Range("A1").Select

    MsgBox "完了"

End Sub

出力結果

[作成]ボタンをクリックすると、『index.html』が出力されます。

下図は『index.html』をメモ帳で開いたところ。
html のコードが出力されています。
「html形式の保存」とは違って、構造がスッキリしています。
これなら好きなデザインに出来ますね。

下図は『index.html』をブラウザーで表示させたところ。

サンプルのコードのままなので、けっこうダサいですね。
繰り返しますが、デザインはお好きな様に作って下さい。

使い処

・複数人で更新したい。
　※html に詳しくない人にも優しい。
・html の構造を見易くしたい。
　※行のグループ化、行の非表示、彩色などを使って、構造を把握しやすく出来ます。
・html コードを使い回して、Webページを量産したい。
などなど。アイデア次第で、いろいろ使えますね。

動作の注意点

このコードは、以下の動作となります。
・保存指定したフォルダが存在しない場合、エラーとなる。
　※指定するフォルダ構成を事前に作っておきましょう。
・ファイルは存在しない場合は、新規作成される。
・ファイルが存在する場合は、上書きされる。

おまけ機能

その他のボタンについて説明します。

html に詳しくない人でも、ブックマーク（リンク）を追加しやすい機能を追加します。
もう一度、シートのデザインを見てみます。

【リンク追加（Webページ）】

セルB2 に、Webページ上に表示される文言となる「見出し」を入力。
セルB3 に、リンクしたいアドレスを入力。
[【リンク追加（Webページ）] ボタンをクリックすると、選択しているセルの下に、リンクが追加されます。

上の画像で言うと、「Yahoo! Japan」が選択されていたので、その下に「なんメモ」が追加されています。

このボタンは、リンク先が Webページの場合に使用します。
ブックマークのページから、「新しいタブ」でリンクが開きます。

コード

Sub リンク生成_Webページ()

    Selection.Offset(1, 0).EntireRow.Insert
    Selection.Offset(1, 0).Value = "<li><a href=" & """" & Range("B3").Value & """" & " target=" & """" & "_blank" & """" & ">" & Range("B2").Value & "</a></li>"

End Sub

【リンク追加（フォルダ）】

このボタンは、リンク先がフォルダの場合に使用します。
ブックマークのページから、リンクされたフォルダが開きます。

下図のようなメッセージボックスが出て来るのはご愛嬌。
「許可」をクリックするとフォルダが開きます。

コード

Sub リンク生成_フォルダ()

    Selection.Offset(1, 0).EntireRow.Insert
    Selection.Offset(1, 0).Value = "<li><a href=" & """" & Range("B3").Value & """" & ">" & Range("B2").Value & "</a></li>"

End Sub

【選択中の行削除】

ボタンをクリックすると、選択されているセルの行が削除されます。
不要になったリンクを削除するのに便利です。
htmlコードを編集する際にも便利です。

コード

Sub 選択セルの行削除()

    '選択中の行を削除する
    Selection.EntireRow.Delete

End Sub

【ハイパーリンク解除】

セルB3 にアドレスを入力すると、自動でハイパーリンクになると思います。
内容を編集したくてセルを選択したのに、ハイパーリンクをクリックした動作となる事があります。編集しずらい、、、。
なので、このセルのハイパーリンクを解除するボタンを付けました。

これは、[作成] ボタンをクリックした時に、ついでに実行される様、初めから組み込んでおいても良いかも知れませんね。

コード

Sub ハイパーリンク解除()

    'ハイパーリンク解除
    '色を塗る
    '罫線を引く
    With Range("B3")
        .Hyperlinks.Delete
        .Interior.ColorIndex = 19
        .Borders.LineStyle = xlContinuous
    End With

End Sub