誰も怒らないなら、ダイレクトお鍋（鍋から直接料理を食べてしまう）をしてしまう
コーダー兼ズボラの小宮山です。

今回は自作ツールの紹介とその記録です。
玄人感はないので、あしからずご了承ください。
ご指摘のポイントたくさんあるかとは思いますが、楽しく作ったんだと感じてもらえれば嬉しいです。

※すぐにツールを使いたい方は、こちらのアンカーリンクから読んでください。

ある日ふいにきたミッション

きっかけの２択

ある日の忙しい１日ことです。
「40ページくらいサイト内の情報をページごとにエクセルデータにまとめたい」
というミッションを部内のディレクターから託されました。

ズボラな僕は、この作業がコンパクトに終わる最善の方法を考えはじめます。

そこで、最初に、Webでいろいろと検索し、すでに有益な情報をあげてくださっているみなさんのお力を借りることに。
情報をまとめてエクセルで出すツールはないだろうか？と探し回りました。

有料だったり、カスタマイズがしにくかったりで、思うようなツールは見つけられませんでした…。

可能性を一つ失った僕としては、この時、葛藤が始まります。

もう、この時点で２択です。

1. 手作業で確実にデータをまとめて済ませる。作りきるだけだったら早い。作り方も柔軟
2. 作ったことはないが自動化して一括でまとめる。失敗するリスクがあるが、成功した場合、人的ミスがない。反復する作業もなくなる。

うぅ…悩ましい。

忙しい最中、このような状況で、この２択がどちらも魅力的に見えてきます。

冷静に考えると、時間を少しかけても後者の自動化した方が良いのです。。
「元データがいろいろ変更されたので、もう一度作り直せる？」などのよくあるケースと遭遇した時に、修正する時間が大幅に違います。

「ごめん！」と言われますが、修正作業は無慈悲にも発生します。

そして、葛藤に負けず、ぼくは自動化への道を決断しました。
（保険として僕の実力不足で実装ができない時の方法や段取りは、ディレクターへ事前にお伝えはします）

不安感と勝手な使命感でいっぱいになる瞬間です。

設計のヒアリング

オリジナルでつくる利点は、オーダーメイドにツールが作れることです。
可能な限り使う人をイメージしたものづくりを目指します。
と言うことで、ミッションをくださった人の元へ理想形の形をヒアリングへ。

ざっくりと、以下のことをうかがいました。

オーダーのポイントは、
任意のパーツを選べること（jqueryだと設定しやすい）
エクセルとして、１HTML、１ファイルと言うことでした。

むつかしいですが、できるだけ実現したいです。

スキルとの相談

どうやるのかもわからないままですが、ここで一旦整理です。
コーダーの僕の自動化のお供は※1 nodeと※2 gulpです。

gulpを使う時には、利用者への配慮が必要です。
今回、使う人はディレクターorコーダーなので環境・リテラシー共に問題ないのでOKです。

他の方法もありますが、あまり時間もないので、この環境を使って進めることにします。
手段を手広く構えすぎると学習時間が必要になってしまうので、それは他の時に。

制作構想

どのように処理が進んで行くかの簡単なイメージ（仮説）を立てます。

ポイントは
「入口と出口を正しく」
実はこれさえ守れば、利用する人にとってその過程がどんなに複雑で難解であっても問題がないのです。これをしっかりと守りながら、途中の処理の過程をイメージします。

イメージした中で、不明な処理が今回の制作の課題となります。

今回の自分にとっての課題は、
2.設定したURLへアクセスする。
3.アクセスしたページ情報の中から取得したい内容をjquery形式で抽出する。
6.エクセル形式のデータを出力する。

トライアンドエラー

課題解決の方法を、なんとかして探します。
今回は、npm（Node Packaged Modules）を利用して解決をするつもりなので、いろいろと試すことに。

npmを利用すると、複雑な点がかなりシンプルにクリアできます。
（パッケージを作ってくれた、みなさんに感謝です…）

npmはさまざまあるので、最適なものを探します。
npm公式で「excel convert」で検索します。
やはり、excelに関係するパッケージは、かなり豊富にあるようです。

用途が複雑なものだと、検索にヒットしなかったり、そもそもパッケージがない場合があります。
その場合は、試行錯誤しての検索。探すのに一苦労します。

実際にnpmをインストールをして、試して、を繰り返します。
目標の出力をするために、根気よく、繰り返します。

今回はそのおかげで、cheerio-httpcliという素晴らしいnpmに巡り会えました。
このnpmは、ページアクセスしてjqueryライクにいろんな操作ができるものでした。（このnpmのおかげで　2.設定したのURLへアクセスする・3.アクセスしたページ情報の中から取得したい内容をjquery形式で抽出するは解決しました。

npmを組み合わせて一つの処理へ

それぞれの処理をつなぎ合わせ、最終形である
「40ページくらいのサイト内の情報をページごとにエクセルデータにまとめたい」
ためのツールを完成させます。

制作構想で考えた処理順を元に

URLにアクセスできたか？
アクセスしたページから、情報は抽出できたか？
などそれぞれをつなぎ合わせ、ログを表示確認しながら進めて行きます。

それぞれバラバラだった機能を合体させて理想の形を作る。
まるで、おもちゃのブロック工作のようです。

自信と無駄

とりあえず、出力できたぞ！

出来上がりが近づいてくると、嬉しくなってもっと便利に作りたくなってきます。
あれもこれもつけよう、便利に、もっと便利に、もっと俺の仕事をやってくれ！
という気持ちになります。

ですが、ここでいろいろ詰め込みすぎてしまうと本末転倒になる可能性大です。

やりすぎは、お節介ですし、使いにくくなる場合も多々あります。
実現したかった当初のプランに立ち返り、必要な機能が満たされているかを確認します。

そして、テストを行います。問題なければ、実践です。

いよいよ実践！

緊張の一瞬です。
努力が報われるかもしれないという思いと、失敗してもう一度作り直しが必要かもしれないという思いが錯綜します。

色々と指定を行い、ツール実行です。。。

 

これには部内ディレクターも思わずにっこりです。

やっぱりつくってよかった

最初は不安の混じった複雑だった気持ちも、気づけば作ってよかったと満足感でいっぱいです。
こうなると、興味もない人にも自慢します。

他のふとしたタイミングで、「そういえばあのツール使ったらいけるんじゃない？」など、部内で自分のつくったツールが息づいているときもあり、そんなときはとても感慨深いです。

作ったものが、不恰好でもいい。
自分の経験や制作への理解や可能性が広がることはとてもいいことだと思います。
最初に挑戦する段階で葛藤はありますが、チャンスのある時には今後も積極的に挑戦したいです。

以下、実際に作った自作のスクレイピングツールです。
よろしければ、使ってみてくれると嬉しいです。

つくることは楽しいですね。

jqueryライクなスクレイピングツール

こちらは、node + gulp を使って作ったものです。

任意のページ内の情報を、抽出してデータ化するものです。
ページタイトルを取ってきたり、リンクの一覧を取得など、必要なページ情報を半自動的に取ってくる時に使います。
今回それをjqueryを使う要領で簡単に取ってこれるツールを作りました。
どうやら、スクレイピングという手法のようです。

スクレイピングする上での注意点

スクレイピングによって自動で情報を取得することができますが、何事も無許可で行うことはよくありません。利用目的によって問題が生じる場合があるので以下の場合での利用をお勧めいたします。

• 個人で使用する
• 情報解析をする

情報の取り扱いについては、ご自身の責任の範囲内でご利用ください。

ご利用になる場合の環境準備

1. nodeとgulpをご自身のパソコンにインストールする。
2. 今回のツールをこちらから、ダウンロードしてください。
3. ダウンロードしたフォルダルートにて、コマンドライン（win）ターミナル（mac）から npm install と実行し、パッケージをインストールで完了です。

（あとは、今回お伝えする使い方の操作で利用できます)

使い方

使い方はシンプルです。
取得したい情報をjQueryセレクタ形式で設定をして
対象のページURLたちを設定します。

/gulpfile.js

gulpfile.jsを以下のように編集して、ものさすサイトの丸山先輩の記事をスクレイピングしてみます。

/gulpfile.js　(例：ものさすサイト　あーだこーだの記事のスクレイピング設定)

gulpタスクを実行しますと、指定した分エクセルファイルが生成されます。
すると、中に欲しかった情報が入っている。といった具合になっています。

/dest/scraping_data/posts_2017_12_200014.html.xlsx

使い方は以上です。

最後まで読んでくださりありがとうございます。
これからも、もっと頑張ります。