38.ウェブサイトはどんな風に作られているのか
ナックス「デスクトップの為の壁紙を自動的に集めるシェルスクリプト作成。今回は第3回です」
ナックス「このシェルスクリプトではGoogleの画像検索もちょっと利用しようかな、と思っています」
デビー君「おぉー。なんだかちょっと本格的になってきたね」
ナックス「Googleの画像検索というのはウェブサイト上にあります。最終的にはこのウェブサイトのコードを解読して、画像のアドレス情報だけを取得して、シェルスクリプトをひとつ実行するだけで100枚くらいのデスクトップ画像を自動的にダウンロード出来るようになりたいなーという感じです」
ナックス「そのために、皆さんにウェブサイトがどういう風に作られるのか、というのを簡単にご紹介しよう、というのが今回のテーマです」
ナックス「というわけで、いつも通りにCUI環境を立ち上げて、nanoエディタで以下の様に書いたファイルを保存してください。えーっとファイル名は happy.html にでもしますか。拡張子がhtmlなら、ファイル名はなんでもかまいません」
<html> <head><title>いぇーい</title></head> <body> <h1>Linux最高。</h1> <font color="red">自由を求めるOS</font> <p>世界がその凄さに涙した</p> <a href="http://www.garunimo.com">ガルニモ</a> <img src="http://www.garunimo.com/happy.png"> </body> </html>
デビー君「うわ！文字に色がついてる」
ナックス「そうです。前回のnanorcの設定により、htmlという拡張子のファイルにも色がつくようになりました」
ナックス「さて、全部手で書くのは面倒くさーい、って人はコピペ（コピー&ペースト）でも構いません。コピペの方法は『32.初めてのプログラミング補足／diffコマンドとTabキー』で軽く教えましたね」
ナックス「書き終わっていつも通りに保存したら、今回のCUI環境での作業は終了です」
デビー君「え？」
ナックス「ウェブブラウザを立ち上げてください」
デビー君「えーっと、ウェブブラウザっていうのはインターネットを見るためのソフトのことだっけ？」
ナックス「そうです。Firefoxの人もいればOperaの人もいるでしょう。Konquerorの人もいればIceweaselの人もいるかもしれません。他のブラウザを使っている人も、そのブラウザを起動させてください」
デビー君「はーい。起動しました」
ナックス「大抵のブラウザの左上に『ファイル』というメニューがあるので、そこをクリックして出てきたメニューの中で『ファイルを開く』というようなメニューをクリックしてください」
ナックス「どのファイルを開くかを選ぶ画面が表示されます。先程の自分で作ったファイルを選んでください」
ナックス「『CUI環境で作ったファイルをGUIから開く？』と、ちょっと混乱するかもしれませんが、落ち着いてください。そのGUI環境は、CUIでのディレクトリ構造を見た目グラフィカルにしただけです。あなたの作成したファイルは必ずあります」
ナックス「ファイルを見つけたら、そのファイルを選んで、ダブルクリックなどで開いてください」
デビー君「うわ！なんかウェブサイトが開いた！」
ナックス「そうです。このページは先程デビー君自身が書いたコードを元に表示されています」
デビー君「いや、でも僕はこんな画像なんて用意してないよ？」
ナックス「はい。画像は私の方で用意しました。<img src="http://www.garunimo.com/happy.png">で表示したい画像が置いている場所を指定しています」
ナックス「実はウェブブラウザというのは、先程私たちが書いたhtmlコードをグラフィカルなものに変換する為のソフトなのです」
デビー君「へー。ウェブサイトってもっと難しい方法で作られているのかと思ったよ」
ナックス「もちろん学んで行くとかなり奥が深い分野ですが、シンプルなサイトなら初心者でも十分作れるのです」
ナックス「『33.ハッキングあたーっく！lwp-requestで情報を要求！/dev/nullはブラックホール』で学んだlwp-requestで返ってきたコードもhtmlコードでしたね。つまり、lwp-requestをGoogle画像検索に使って、返ってきたhtmlコードを分析して欲しい画像情報を抜き取る、が最終目標です。今回はちょっと『お。シェルスクリプトでも、デスクトップ画像収集ソフトを作れるかも』と手応えを感じていただければ幸いです」
ナックス「ちなみに、今回は『へー、ウェブサイトってテキストエディタで作れるんだー』ってことを教えたかっただけで、ウェブサイトの本格的な作り方を教える予定は無いです」
ナックス「次回。Google画像検索のhtmlコードを解析する（39.Google画像検索のクエリを解析する）です」