Corredor

ウェブ、プログラミングの勉強メモ。

broken-link-checker でデッドリンクを検出する

amiibo リンク(大乱闘スマッシュブラザーズシリーズ)

amiibo リンク(大乱闘スマッシュブラザーズシリーズ)

broken-link-checker という npm パッケージで、指定の URL から遷移できるリンクや画像にリンク切れがないか簡単にチェックできたので紹介。

パッケージをインストールする

まずはパッケージをインストールする。

$ npm install broken-link-checker -D

HTML ファイル・簡易サーバを用意する

リンクをチェックする対象は URL で指定しないといけないので、ローカルの場合は browser-sync など適当なツールを使って簡易 Web サーバを立て、URL を用意しないといけない。

ココでは browser-sync を使って http://localhost:3000/ に簡易サーバを立てたとする。

  • index.html には test2.html へのリンクがあり、not.html というリンク切れのリンクがある。
  • test2.html には index.html に戻るリンクと、存在する画像ファイル img.png を指定した img 要素があり、none.jpg という存在しない画像ファイルを指定した img 要素がある。

…と、試しにこのような HTML ファイル2つと PNG 画像1つで構成されている。index.htmlnot.html のリンクが切れていること、test2.htmlnone.jpg という画像が存在しないことを検知できれば良いことになる。


npm-scripts を用意する

broken-link-checker を実行するため、package.json に以下のような npm-scripts を用意する。

"scripts": {
  "blc": "broken-link-checker http://localhost:3000/ -ro"
}

broken-link-checker コマンドのエイリアスとして blc も用意されているので、blc http://localhost:3000/ -ro としても良い。

-r--recursive-o--ordered の略。リンク先のページのリンク先へと掘り下げて調査させるために付与するオプション。他にも --exclude 指定や、外部リンクを無視する --exclude-external などのオプションがあるので、blc --help で確認しておこう。

broken-link-checker を実行してみる

簡易サーバは立ち上げたまま、実際に broken-link-checker を実行してみる。

$ npm run blc
> Test@1.0.0 blc /Users/Neo/Test
> broken-link-checker http://localhost:3000/ -ro

Getting links from: http://localhost:3000/
├───OK─── http://localhost:3000/test2.html
└─BROKEN─ http://localhost:3000/not.html (HTTP_404)
Finished! 2 links found. 1 broken.

Getting links from: http://localhost:3000/test2.html
├───OK─── http://localhost:3000/index.html
├───OK─── http://localhost:3000/img.png
└─BROKEN─ http://localhost:3000/none.jpg (HTTP_404)
Finished! 3 links found. 1 broken.

Getting links from: http://localhost:3000/index.html
└─BROKEN─ http://localhost:3000/not.html (HTTP_404)
Finished! 2 links found. 1 excluded. 1 broken.

Finished! 7 links found. 1 excluded. 3 broken.
Elapsed time: 0 seconds

…このとおり、リンク切れの HTML ファイルや画像には BROKEN の表示がされている。

test2.html から index.html に戻れるため、再度 index.html が探索されているが、探索済みのページのリンクは executed と出力されている。

リンク切れを修正してみる

index.htmltest2.html を修正して、リンク切れを直してから再実行してみる。

$ npm run blc
> Test@1.0.0 blc /Users/Neo/Test
> broken-link-checker http://localhost:3000/ -ro

Getting links from: http://localhost:3000/
└───OK─── http://localhost:3000/test2.html
Finished! 1 links found. 0 broken.

Getting links from: http://localhost:3000/test2.html
├───OK─── http://localhost:3000/index.html
└───OK─── http://localhost:3000/img.png
Finished! 2 links found. 0 broken.

Getting links from: http://localhost:3000/index.html
Finished! 1 links found. 1 excluded. 0 broken.

Finished! 4 links found. 1 excluded. 0 broken.
Elapsed time: 0 seconds

今度はエラーにならずに全てのリンクが OK となった。


画像のリンク切れもチェックできるのが素晴らしい。かなりサクッとリンク切れがチェックできるので使っていきたい。

Windows バッチで不要な .modd ファイルなどを消す

ぼくは Sony Cyber-Shot DSC-TX300V というコンデジをずっと使っている。写真・動画の取り込みに Sony PlayMemories Home という Sony 製のフリーソフトを使っているのだが、このソフトでファイルを取り込むと .modd.moff といった拡張子のファイルが生成される。これが邪魔くさい。

また、iPhone7Plus から写真や動画を取り込むと、一部の写真に .aae という拡張子のファイルがくっついてくることがある。これも鬱陶しい。

そこで、Windows バッチファイルで、これらのファイルを一気に削除することにした。

Rem このバッチファイルがあるディレクトリ配下にある不要なファイルを消す
Rem --------------------------------------------------------------------------------

Rem .modd・.moff は隠しファイルになっているので「/a:h」オプションを付ける
Del /a:h /s *.modd
Del /a:h /s *.moff

Rem .aae ファイルを削除する
Del /s *.aae

使っているのは、カレントディレクトリ配下のサブディレクトリを含んで指定のファイルを消す Del /s コマンド。ファイル名にワイルドカードが使えるので、*.modd といった形で拡張子だけ指定して削除しているだけ。隠しファイルを対象にする場合は /a:h オプションが必要になるので注意。

[改訂新版]Windowsコマンドプロンプトポケットリファレンス

[改訂新版]Windowsコマンドプロンプトポケットリファレンス

.m3u8 ファイルから .mp4 ファイルを保存する方法

FFmpegで作る動画共有サイト

FFmpegで作る動画共有サイト

  • 作者: 月村潤,本間雅洋,堀田直孝,原一浩,足立健誌,尾花衣美,堀内康弘,寺田学
  • 出版社/メーカー: 毎日コミュニケーションズ
  • 発売日: 2008/01/29
  • メディア: 単行本(ソフトカバー)
  • 購入: 8人 クリック: 240回
  • この商品を含むブログ (26件) を見る

一部の動画サイトは、Firefox アドオンの FlashGot で動画ファイルを特定できず、動画ダウンロードが上手くできない。

そこで開発者ツールでネットワーク通信を眺めてみると、.m3u8 というファイルが鍵を握っているらしいことが分かった。

調べてみると、.m3u8 ファイルというのは動画ファイルのプレイリストファイルで、このファイルをダウンロードしてメモ帳で開いてみると、細切れにされた動画ファイルの URL が羅列されていた。中身はこんな感じ。

#EXTM3U
#EXT-X-TARGETDURATION:10
#EXT-X-ALLOW-CACHE:YES
#EXT-X-PLAYLIST-TYPE:VOD
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:1
#EXTINF:6.006,
http://hoge.com/764422617.mp4/seg-1-v1-a1.ts
#EXTINF:10.010,
http://hoge.com/764422617.mp4/seg-2-v1-a1.ts
#EXTINF:10.010,
http://hoge.com/764422617.mp4/seg-3-v1-a1.ts

…「EXTINF」と URL の行が大量に並ぶ…

#EXT-X-ENDLIST

HLSとはHTTP Live Streamingの略で、Appleによって開発された動画配信技術です。

HLSを使用した配信では、インデックスファイルと分割された動画ファイルにより構成されています。

m3u8はインデックスファイルのことです。もともとM3U はマルチメディアプレイリストのファイルフォーマットで、M3U8はUTF-8で書かれたM3Uファイルということを表しています。

.m3u8 ファイルを開くと何やら .mp4 ファイルが見えるので、このファイルを上手く保存できないかと調べてみた。すると、ffmpeg を使って .m3u8 ファイルから .mp4 ファイルを生成・保存できることが分かった。

以下、やり方を説明。

ffmpeg のインストール

まずは ffmpeg をインストールする。以下のサイトからダウンロード・インストールしてもいいし、Chocolatey でインストールしても良い。

Chocolatey の場合は管理者モードで起動した PowerShell で以下のように叩く。

PS> choco install ffmpeg

Chocolatey の場合、ffmpeg のインストール先は C:\ProgramData\chocolatey\lib\ffmpeg\tools\ffmpeg\ というよく分からない場所になっている。このディレクトリごと任意の場所にコピーして使うと良いかと。

.m3u8 ファイルをダウンロードしておく

動画ファイルをダウンロードしたいページでブラウザの開発者ツールを開き、「ネットワーク」タブから .m3u8 ファイルを特定し、URL をコピーしたらアドレス欄に叩きつけて .m3u8 ファイルをローカルにダウンロードする。

Firefox でも Chrome でも同じようにできるはず。

ffmpeg でコマンドを叩く

分かりやすくするため、.m3u8 ファイルは ffmpeg.exe と同じディレクトリに置いておく。Chocolatey でインストールした場合は C:\ProgramData\chocolatey\lib\ffmpeg\tools\ffmpeg\bin\ffmpeg.exeffmpeg.exe があるので、このディレクトリにでも置いておく。

で、コマンドプロンプトか PowerShell で、以下のようにコマンドを打つ。

> ffmpeg -protocol_whitelist file,http,https,tcp,tls -i 【m3u8 ファイル名】.m3u8 -movflags faststart -c copy 【生成したいファイル名】.mp4

-protocol_whitelist file,http,https,tcp,tls というオプションを指定しないと

[ffmpeg] http: Protocol not on whitelist 'file,crypto'!

といったエラーが発生する。このオプションは先頭の方に書いておかないといけなかった。

-i 【m3u8 ファイル名】.m3u8 でインプットの指定、-movflags faststart でエンコード後にメタデータを先頭に移動させる (イマイチ効果不明)、-c copy 【生成したいファイル名】.mp4 でオーディオとビデオを動画ファイルにコピーする。

これで .m3u8 ファイルをインプットに、.mp4 ファイルをダウンロード保存することができた。

参考