Website Explorerとは
仕事では数万ページ以上あるWebサイトのリニューアルが普通に発生するが、そのサイトのディレクトリマップやコンテンツマップなどは提供されないことがほとんど(なんで?)。そこでツールを使って現状のサイトのコンテンツの種類やページ数などを調べる必要が出てくるが、「Website Explorer」はサイトの構造解析ができる超老舗ツールです。
仕事では有償ツールが導入されているので使っていないが、昔はかなりお世話になりました。今でもずっと愛用している人もいる。(歴戦の古参Webディレクターの方に頼まれて作ったので、現役で使われている証拠。)
構造解析結果はエクセルで出力することができます。
実際に存在するサイトのデータは憚られるので、架空のサイトのデータとして出力イメージを作ったものが下記となります。架空サイトなので、ページ数が少ないのはご容赦ください。
ECみたいな商品マスタなどに基づくページなら良いが、単純な記事のコンテンツデータが大量にある場合、今あるページをどうするか、どうやって移行するかを考えるのが、元のサイトの作り次第で凄い面倒なところ。。
ディレクトリマップとは
基本的には下記のようなイメージのもので、必要な項目や採番方法はプロジェクトによって適宜調整します。
まぁ無理にこの形に整形しなくても良いのですが。。
視覚的に見やすくするためにこういった形にする場合、大量にコンテンツの種類やページがあると結構面倒な作業になる。
面倒でつまらない資料作成といえば、GAS(Google Apps Script)の出番!
プロジェクトによって装飾や項目は変わるが、汎用的なところはGASで自動化してみようと作りました。
Google Apps Scriptとは、Googleによって開発されたスクリプトプラットフォームである軽量のアプリケーション開発のためのGoogleのワークスペースプラットフォーム。 主にGoogleのサービスを自動化するスクリプト言語である。
Googleスプレッドシートで主に使われるが、それ以外でも利用ができる。非常に適応範囲が広いので、例えば、SNSに返信が届いた場合Gmailに届ける。Gmailで期限の近いタスクを自分のSlackで表示する等のこともできる。
出典:フリー百科事典『ウィキペディア(Wikipedia)』
作ったGASの紹介(スプレッドシート+GASの公開リンクあり)
その場限りで書いたものだが、コードを書く前のメモらしきものが残っていた。
- ① 貼り付けたデータのある範囲(最終行と最終列)を取得
- ② 背景色が白か無地以外の行を削除する
- ③ "index.html"がある場合は"index.html"を削除
- ④ "/"の数で判断して、指定列に階層レベルの値を入力
- ⑤ URLの文字列と階層レベルの値で並び替え
- ⑥ 重複行の削除
- ⑦ 階層レベルに合わせて列を挿入
- ⑧ 階層レベルに合わせてページタイトルをずらす
- ⑨ Website Explorerの出力データからコピーしてきた時の枠線を全て削除
悲しいことに書いたコードについては全く覚えていないが、残っていたメモにしたがって頑張ってGASを書いた。ノンプログラマーの書いたクソコードですので、ご容赦ください。
プログラム開発を専門にする職種ではないが,自分の業務遂行上必要にせまられてコンピュータを利用し,そのためにプログラムを作成しなければならないような人のこと
書いたものを試した動画です。
Googleスプレッドシート+GASの公開リンク
シートとGASのコードは下記リンクで公開しています。
リンク先ではご自身のGoogleアカウントにてコピー作成ができるので、コピー後のファイルでコードの中身を見ることができます。
自分で普段使いをしていないので、使い込んでからの調整はしていないが、対象のサイトによって調整が必要かもしれない。このシートをそのまま使いたいケースの人は少ないと思うが、コードに初めて触れる方には少し参考になればと思います。
おわりに
非エンジニアでもGASでちょっと楽することができるものもあるので、機会があれば他にも活用してみたいと思う。
GASのプロを目指すというなら別だが、ちょっとした雑務の効率化なら、公式ドキュメントopen_in_newで必要な情報を集める程度で手軽にできそうだ。