share facebook facebook twitter menu hatena pocket slack

2016.10.17 MON

リンク切れを検知したり、リンク間の関係を可視化するツールをつくった

高橋 慎一

WRITTEN BY 高橋 慎一

その名も

f606b206-95c3-3f9a-f5d8-50c32cfd26cc

Anomalynks

Anomaly(異常) + Link(リンク)の造語。
https://github.com/cloudpack/anomalynks

つくった背景と解決できる課題

PM < この前つくったあのサイトやねんけど、ちょっと部分部分きりとって別のサイトにしたいんよねー
PM < でも1ページ消したら他のページからリンクされてるの切れちゃってつらみあるからどうにかして💢
ぼく < はい

> リンクチェッカーみたいなのつくろう <

PM < あとついでにページ間の関係性みたい
PM < どうせならデザインチームでもできるように可視化してや
ぼく < はい

> 可視化しよう <

PM < 管理画面とかでログイン必要だから
ぼく < はい
PM < Seleniumは重いからブラウザの拡張的なのがいい

> ChromeExtensionに <

PM < ドメインまたぐから
ぼく < はい

> LocalStorage つかえない <

PM < ボタン
ぼく < はい

> なんかいい感じにする <

というわけで、

  • ChromeExtensionで
  • リンク切れを検知できて
  • ドメインをまたげて
  • 関係性が可視化できて
  • いい感じ

なリンクチェッカーをつくりました。

なにができるか

  • リンク切れを検知
  • URL間の関係性

を可視化(タイトルのまんま

使い方

  1. Extensionを起動
  2. 対象のサイトをぽちぽち回遊
  3. OUTPUT ボタンポチー
  4. URL間の関係性、リンク切れがグラフになる

実際に使ってみた

お手軽な コーポレートっぽいサイト があったのでそれを対象にやってみました。
ChromeExtensionを読み込んでサイトにアクセス!

c7a38de8-cbac-81ca-152a-7d648404d5b8

なんか右下にでてますね。押してみましょう

cee0aa65-c62d-33cc-3e4d-2dbceabd2225

今ひらいてるURLとステータスコードが表示されてます。
とりあえず無視してサイトを回遊しましょう。

(回遊中)

適度に回遊したので、これの関係性を見てみます。
右下の OUTPUT ボタンをポチー

061389ed-0173-bbee-2a9b-743e5a645d6d

すると

0f7e1023-85f1-91ed-72aa-fd481b6e1fe9

こんなんが出てきます。
この画面では、各ノード(黄緑のやつ)を動かしていい感じにできます。
ちょっと整理するとこんな感じ

7c2c5571-daf0-d96e-067d-3c493f40d5ef

> わ!わかりやすい〜!!! <

今回は、全て正常なレスポンスなので各ノードが黄緑ですが、300以上のStatusCodeのページのノードは赤くなります。
ノードをポチーすると、StatusCode表示に切り替わるのでお試しください。

今後(謝辞)

  • 正式なExtension公開したい
  • 雑な部分なおしたい
  • PRほしい
  • Issueあげてほしい

みたいな!
たぶんWeb制作では使えるんちゃうかなって思ってるので、フィードバック・ご意見いただけるとうれしいっす!!

thanks!
ロゴ制作: @kazuki-hirano
コーディング: @bobu_web

元記事はこちら

リンク切れを検知したり、リンク間の関係を可視化するツールをつくった

高橋 慎一

高橋 慎一

最強。敗北を知らない。

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。