48.imgタグの説明

ナックス「こんにちは。画像収集するシェルスクリプトを作ってみたい。今回は第13回」

ナックス「今回はimgタグの説明をしたいと思います」

ナックス「まず、38.ウェブサイトはどんな風に作られているのかでやった内容を思い出してください。この回ではWebサイトを作るためのコードを書いたのでした」

ナックス「このWebサイトを作るためのコードのことをhtmlコード（エイチティーエムエルコード）と言います」

ナックス「41.ウェブサイトをダウンロードしてみるや45.シェルスクリプトとはコマンドをまとめて書いたものや46.ファイル名を指定してダウンロードしてみるでダウンロードしたものもhtmlコードでしたし、47.ダウンロードしたファイルの中身を端末（コンソール）に表示するで端末（コンソール）に表示したものもhtmlコードでした」

ナックス「今回はこの（画像検索結果の）htmlコードを利用して画像収集スクリプトを作ろうとしているので、htmlコードの最低限の知識を教えておきたいのです」

ナックス「まず基本的にhtmlコードでは文字を書くとそれがそのまま表示されます。『こんにちは』と書けば『こんにちは』と表示されますし、『abc』と書けば『abc』と表示されます」

ナックス「ただし『文字に色をつけたい』とか『文字の大きさを変えたい』とか『背景の色を変えたい』とか『画像を使いたい』という場合は呪文を書かないといけません。呪文は例えば『<span>ここの色が変わるよ</span>』のように書きます」

<span>ここの色が変わるよ</span>

ナックス「この<タグ名>〜</タグ名>の呪文のことをタグと言い、タグには色々な種類があります」

ナックス「画像を表示する場合はimgタグを使います」

ナックス「imgタグは『<img src="画像ファイルが置いている場所">』のように書きます」

<img src="画像ファイルが置いている場所">

ナックス「ちなみにこれは基本形であり、発展形になると『<img src="画像ファイルが置いている場所" width="200" class="big-a">』のように色々書きます」

<img src="画像ファイルが置いている場所" width="200" class="big-a">

ナックス「画像ファイルをダウンロードするためには、例えば『wget 画像ファイルが置いている場所』というようなコマンドを実行しないといけません」

$ wget 画像ファイルが置いている場所

ナックス「さて、46.ファイル名を指定してダウンロードしてみるでダウンロードしたabcという名前のファイルの中身をnanoで開いてimgタグが使われている場所を確認して見てください。『 <img src="画像ファイルが置いている場所" alt="なんとかかんとか" class="img-fluid">』みたいになっています」

  <img src="画像ファイルが置いている場所" alt="なんとかかんとか" class="img-fluid">

ナックス「もちろん画像検索結果のhtmlコードを取得しているので、imgタグは一つだけじゃなくてたくさんあります」

ナックス「というわけで今後の予定なのですが、47.ダウンロードしたファイルの中身を端末（コンソール）に表示するで端末（コンソール）に表示した結果から、ある処理をして、まずimgタグが使われている行だけ抜き取ります。もちろんimgタグが使われている行はたくさんあります」

  <img src="画像ファイルが置いている場所" alt="なんとかかんとか" class="img-fluid">
  <img src="画像ファイルが置いている場所" alt="なんとかかんとか" class="img-fluid">
  <img src="画像ファイルが置いている場所" alt="なんとかかんとか" class="img-fluid">

ナックス「次に、とある処理をして前半を取り除きます」

画像ファイルが置いている場所" alt="なんとかかんとか" class="img-fluid">
画像ファイルが置いている場所" alt="なんとかかんとか" class="img-fluid">
画像ファイルが置いている場所" alt="なんとかかんとか" class="img-fluid">

ナックス「その後、なんとか頑張れば後半も取り除けるんじゃないかという希望を持っています」

画像ファイルが置いている場所
画像ファイルが置いている場所
画像ファイルが置いている場所

ナックス「その後に、この画像ファイルが置いている場所のリストをテキストファイルに保存します」

画像ファイルが置いている場所のリストをテキストファイルに保存するよ

ナックス「ちなみに『テキストファイルって何？特殊なファイルのこと？』とビクビクしているかもしれませんが、普通の文字が書かれたファイルのことをテキストファイルと言います。特殊なファイルじゃなくて、普通に画像ファイルが置いている場所が文字で書かれているファイルです」

ナックス「ここまで出来たら『wget -i テキストファイル』とコマンドを打てば、テキストファイルに書かれている画像ファイルの置き場所のリストを元に、wgetが全てダウンロードしてくれるそうです」

$ wget -i テキストファイル

ナックス「どう？これから作る画像収集スクリプト、イメージできた？」

デビー君「全然イメージできない！」

ナックス「まあいいよ！次回から一緒に作るから！次回！49.imgタグが使われている行を抜き出す」