今回は、ディレクトリマップの作り方について。
提案や要件定義時に作るディレクトリマップ。いまだに手作業で作成しているディレクターさんって結構いると思います。何を隠そう私もその1人で、EXCELで関数やらなんやら使って頑張ってました。
巷にはディレクトリマップ生成ツールもちらほら転がっています。でも、有料だったりするので「その作業だけのために経費申請とか稟議とかやってられないよー」とか、ビジュアル化してくれるツールなんかもあるんですが「現場はまだEXCEL管理だよー」とか、絶妙なズレがあってなかなか使う機会がないんですよねー。
というわけで、VBAの勉強がてらマクロで自動生成できるようにプログラムを作ってみました。手順とEXCELファイルを載せておきますので、ぜひ使ってみてください。なお、マクロ使ったことない方でも大丈夫です。ページ上限もPCのスペック次第なので、1000ページでも10000ページ以上でも整形可能です。
▼実際に使用している動画
URLリストをディレクトリマップ形式に自動成形するマクロを作りました！使い方はブログにまとめております。https://t.co/2Dv7Wv0ZOh#ディレクトリマップ #webディレクター pic.twitter.com/EOjqconr38
— しらみず💻webディレクター (@shiramiz) January 20, 2020
まずは完成形：ディレクトリマップのテンプレート
ディレクトリマップは会社によって、というかディレクターによって完成形がまちまちです。今回作成するディレクトリマップのテンプレートは以下のような形を目指します。
完成版のEXCELはこちらからダウンロード可能です。
この形がベストというわけではなく、プロジェクトによっては、さらに進捗管理のための列を足したりします。「原稿」「デザイン」「コーディング」列にフラグを立てて「ステータス」列をIFで出しわけて…みたいなことをしたり……そのへんは適宜調整していただければ幸いです。
このフォーマットを作るにあたって何がめんどくさいかというと、ディレクトリ形式に見せるために、1行に1ファイル(ディレクトリ)になるように、行をずらして埋めていかないといけないところ。しかも、見やすくなるように罫線もそんな感じで引いてあげています。これが関数とかでうまいことできないんですよね～。今回はこの部分をマクロで自動化しました。
これ手作業でやると本当に死んじゃいます。おじさんディレクターが数千ページを手作業でこのフォーマットに落とし込んでいて、3人日かかったと聞いたことがあります（フォーマットが悪い…？）。普段は効率化を叫んでいるのに、ドキュメント周りは急に馬力でなんとかしようとするところありますよね。そしてこれを…A3でプリントして…顔を突き合わせて話し合ったりして…ペーパーレスって…その辺は本題から逸れるのでまた別の機会に。
ディレクトリマップの作り方①URLリストを用意する
今回ディレクトリマップを作成するために必要となる情報は、URLとmeta titleとmeta descriptionとmeta keywordです。こんな感じで、コピペしやすいように準備します。
meta keywordは古のタグとなりつつあるので個人的には入れたくないですが、根強いファンがいるため一応入れてます。
サーバやDBから落としてくるのが一番ですが、対顧客だとそんなことができる恵まれた環境は少ないのが現実。そんな時はWebsite Explorer様を使ったり、プログラムを書いてスクレイピングしたりなどの方法がありますが、今回はWebsite Explorer様を使っていきます。
※Website Explorer様はフロント側で動的なサイトとかECサイトとかだとちょっと動作が怪しくなるので、その辺は本当に頑張ってくださいとしか言いようがなくてごめんなさい
Website Explorerを使ってリストを用意する
Website Explorer様、しばらくサ終していたんですが2021年に復活されていました！！ソフトダウンロード～実行まではこの記事が分かりやすそうです。
使うのはこのへんです。1で設定して、2の開始を押すだけ。
完了したらこんな感じであらゆるデータを拾ってきてくれるので、「サイト内ページ」からCSVをダウンロードします。
リストがGETできます。この情報を使っていきます。
ディレクトリマップの作り方②自動生成ツールを使って成形する
ようやくここからマクロを使って成形作業を行なっていきます。まず、以下より自動生成するプログラムが入っているEXCELファイルをダウンロードしてください。マクロ入りのEXCELファイルは拡張子が「.xlsm」になります。
シートが3つあり、編集するのはSheet1のみです。シート名は絶対に変えないでください。絶対にですよ
・Sheet1：データ入力用
・Sheet2：プログラム作業用
・Sheet3：アウトプット
①Sheet1にURLリストをコピペする
Sheet1は以下のようなフォーマットになっています。
見ての通りなのですが、A2セルにTOPページのURLを入れて、URL、ページタイトル、ディスクリプション、キーワードをレイアウト通りに入れてください。ここで注意していただきたいのが、空白のセルがあるとそこまでしか処理してくれないクソ仕様なので、空白がある場合は（データなし）とかに置換して意地でもデータを入れてください。
やり方は、置換したい範囲を選択して、「Ctrl」+「H」を同時押し（または[編集]→[置換]）で、「検索する文字列」を空白のままにして「置換後の文字列」に適当な文字列を入れてください。そして「すべて置換」をクリックして完了です。
②URLリストを整理する
Sheet1での並び通りに出力される仕様のため、並び替えを行ないます。（並び替えの処理を入れていたのですが柔軟性を優先するため削除しました）
URL昇順で並び替えを実施するため、まず全てのURLから「index.html」の文字列を削除します。ディレクトリのトップページなので一番上に並んでほしいからです(「i」始まりだと真ん中らへんにきちゃいますよね)。「Ctrl」+「H」同時押しして置換ウィンドウを出し、「検索する文字列」に「index.html」を、「置換後の文字列」は空白のままにして「すべて置換」をクリック。
そして並び替えです。A4セルを選択して、「Ctrl」を推したまま「→」「↓」で対象範囲の選択ができます。「データ」→「並び替え」をクリックし、最優先されるキーを「列A」にして「OK」をクリック。
並び替えができたら準備完了です。
ここで1点注意事項として、「detail-1.html」「detail-2.html」…「detail-10.html」みたいなURLがあった場合、このやり方で並び替えると「detail-1.html」の次に「detail-10.html」が来てしまいます。自分なら対象URLだけ引っこ抜いて「-」で分割して（「データ」→「区切り位置」機能）再度くっつけるみたいなことをしますが、各自頑張って並び替えてください。
③マクロを実行する→完成！
Sheet1の準備が済んだら、マクロを実行していきます。「Alt」+「F11」を同時押しすると以下のような危なそうな画面が出てきます。
※出てこなければマクロがブロックされている可能性が高いので、
・ファイルを右クリックして全般タブ＞セキュリティ＞許可するにチェックを入れてファイルを信頼
・ファイルを再度開いて、表示＞マクロ＞マクロの表示からSheet1.Directoryを実行、でいけると思います。
私のVBA技術では怪しい機能は組み込めないので、安心して実行してください。
コードが出ていなかったら「表示」→「コード」をクリックしてみてください。
そしてこの状態で、F5をクリック。すると以下のような小窓が出るので「実行」をクリック。
うまくいけばこんな感じで、「Sheet3」に成形されたディレクトリマップが出力されます。
ページ数が多いと結構待つので、スペック的に余裕があるマシンで実施することを推奨します。エラーが出たら…色々調整してみてください。大体変なURLが混ざっていたり、空白があったりするとエラーが出ます。また、2階層以下しかないサイトや10階層を超えているサイトの場合も動かない仕様です。（プログラムをちょっと変えれば動きます）
あとはマクロのウィンドウを閉じて、序盤で紹介したテンプレートに罫線ごと貼り付けてあげればできあがりです。
プログラムの処理内容について
VBAでどんな処理を行なっているのか、一言でいうと「ディレクトリ形式に成形して、罫線を引いている」なのですが、結構ややこしかったので参考までにご紹介いたします。
処理内容：実行順
■Sheet1での作業
・Sheet1のURLリストのうち、「/」で終わっているURLに対してindex.htmlを付与する
・Sheet1 A4以下のURLをSheet2にコピーする
■Sheet2での作業
・URLからSheet1のA2に入力されているURLを削除し、パスだけにする(TOPページ以外)
・パスを「/」区切りでセル分けする
・Sheet2で利用されているセル（列数）から階層数を定義し、その1列隣からメタ情報をコピーする
・階層数をもとに処理を切り替える
■Sheet2→Sheet3へ
・階層ごとにSheet2の値をSheet3にコピーしていく。ただし、1行上の値と重複していた場合は値を入れず、1セル下がるのみ
・上記処理を階層分実施し、最後にURLとメタ情報をコピーする
■Sheet3での作業
・値が入っているセルから最終階層列までを選択し上、右、左に罫線を引く
・上記処理を階層分実施し、最後に外側に太枠線をつける
と、こんな感じの処理を書きました。結構力技な部分も多いのですが、本当にめんどくさかったです。特に階層に成形するところが一番難しくて、もう1回同じプログラムを書けと言われたら無理な気がします。機械的な作業だから簡単に自動化できると思ったのですが、甘く見てました。つくづくヤバいフォーマットだと思います。
最後に
このプログラム、EXCELはご自由に使っていただいて構いません(書き換えて改善してもいいです)が、そのまま販売するとかはやめてくださいね。
webディレクターって結構ディレクトリマップ作成みたいな雑務が多いんですよね。だからこそ、こういう効率化みたいなノウハウはみんなで考えて、どんどん共有された方がいい。その空いた工数で、いいサイトを作り上げるために試行錯誤する時間を増やして、よりよいインターネットを作っていきたい所存です。
Twitterでもweb関連の情報を発信しておりますので、webディレクターの皆様ぜひ情報交換しましょう～
Twitter@shiramiz
