「HTML」タグアーカイブ

Listly – ウェブページからデータを抽出してExcelファイルにしてくれるサービス

Listly は、ウェブページのスクレイピングをお手軽にしてくれるサービスです。

フォームに抽出したいサイトのURLを入れて、Listyボタンを押すと、

ページ内の構造から、リストを抽出してくれます。抽出に使ったCSSセレクタを表示してくれてるので、これをコピーして使うもよし、”Excel”ボタンを押すと、エクセルファイルでダウンロードもできます。

何回も繰り返すような作業ならプログラム化すると思いますが、一度しかやらないとわかっている抽出作業などでは、特に便利なのではないでしょうか。

また、未実装ですが”Scraper”というボタンを見ると、繰り返し抽出を行うためのブックマークレットか何かを生成してくれる予定があるようです。APIも開発中とか。

同様のものにImport.ioというサービスが先行であり、機能的にも強力なのですが、こちらは月$199(2万1939円) からの有料サービスとなっています。Listly もユーザーが増えればいずれはお金を取りそうではありますが、今のところは登録等なく利用できます。

via Hacker News

ウェブページ制作のたいへんさを見せるページ

英語圏の巨大掲示板redditの一ページを新規にデザインしたとしたらどれぐらい手間か、というのをブラウザ上で見せてくれるページです。

reddit-designing-1

画面右側にCSSとHTMLの枠が表示され、そこにコードが追加されていくにつれて、ページ上にredditのデザインが少しずつ出来上がっていきます。右上のスライダーで作業速度を速めることもできますが、それでもなかなか出来上がりません。

redditは、どちらかといえばシンプルなデザインとされるサイトですが、それでも、これだけの画面を表示するためにどれぐらいのソースコードが必要か、一度もサイトを作ったことが無い人は、もっと短くできるのではと思っているかもしれません。

このようなサイトを見せることで、ウェブ制作の裏側を知らない人にも少したいへんさを伝えられるかもしれませんね。このデモでは上から順にスラスラとコードを書いていってるので、実際のウェブ開発では手戻りや調整でさらにずっと大変なんですよ、と。

このデモで生成される掲示板のやりとり自身が指しているように、Jake Albaughさん脈打つハートを作る様子を再現するコードを見て、それに触発されて作られたということです。

同じコードを参考に、CSSで描くダースベイダーデモ化したページも作られています。

darth-vadar-web-building

via TheNextWeb