DESIGNMAP

HTTP、動的サイト、WordPressのブログ - まったくのゼロから、独学でWebデザイナーになるためのロードマップ 【Vol. 4】

記事公開日:2015年03月11日最終更新日:2015年11月21日

独学でWebデザイナーになるためのロードマップ 独学でWeb制作を身につける

フロントエンド、バックエンド、HTML、CSS - まったくのゼロから、独学でWebデザイナーになるためのロードマップ 【Vol. 3】』の記事の続きです。

HTTPの仕組みをしろう

Web制作の学習の基盤になるHTTPの仕組みをざっくり知っておこう。

HTTPとかくと、なんやら難しいとおもうかもしれない。Webの考案者であるティム・バーナーズ・リー卿は「HTML、URL、HTTP」という仕組みをつくった。実際のところHTTPはシンプルである。しかも、Webの黎明期から、基本原理はいまもかわっていない。

HTTPのおかげで、多様なWebブラウザと世界中に分散されているWebサーバーがお互いに通信ができるのだ。

同期、非同期の意味をしろう

実際に、HTTPをみてみよう。まずGoogle Chromeを起動しよう。ウインドウ内を右クリック→[要素を検証]をクリック。Google Chromeの下から、パネルが表示される。[Network]をクリック。Google Chromeの上のアドレス欄に、「google.com」と入力してEnterキーをおす。

下図のように、多くのリストデータが表示される。1行ごとに、1通信(WebブラウザとWebサーバーとの1往復)を表わしている。

[Type]項目が、実際にWebブラウザが読み込んだファイルのタイプである。多種多様なファイルをWebブラウザは読み込んでいる。

「text/html」は、HTMLファイルである。他にも、画像やJavaScriptファイルを個別に読み込んでいるのがわかる。

右の[Timeline]は読み込んだ順番と、読み込み時間がグラフで示される。表示が遅いページは、このグラフをみると、どのファイルがボトルネックになっているかが分かる。

図の上から7番目(図の下から2番目)の「text/javascript」の[Timeline]に注目してほしい。読み込みがすべて終わらないうちに、8番目の「image/gif」という画像ファイルが通信を始めている。

このように、後続のファイルの読みこみを待たさせないで、読み込むことを非同期という。

一方、図の上から2番目の「text/html」の[Timeline]に注目してほしい。このファイルは読み込みに時間がかかっているが、3番目のファイルはその読み込みが完全に完了してから、読み込みをしている。つまり2番目のファイルは、後続のファイルの読み込みを待たせてしまっている。これを同期という。

この同期、非同期という言葉は、今後Webの勉強をしていくと、必ずでてくるキーワードである。

メソッド、ステータスコード

Webサーバにリクエストメッセージをおくるときに、サーバへの要求として8つのメソッドが規定されている。

普段、ホームページをみるときに使われ ているのは、getメソッドである。これはデータの取得をつかうときに使うメソッドだ。上図の[Method]をみると、今回はすべて「GET」である。

Webサーバがレスポンスメッセージを返すときはステータスコードという3桁の整数をメッセージのヘッダー情報にいれて返す。[status]の項目をみると「200」となっている。「2xx」は成功を示している。

ホームページをみていて、リンクがきれていると「404」が表示されることがある。これも、HTTPのステータスコードである。「5xx」はサーバー側のエラーを示す。

HTTPのヘッダをみてみよう

次に、HTTPの細かい部分をみていこう。図の一番左の[Name Path]項目の上から2番目の「?gfe_rd=cr&ei...」をクリックする。

下図のように切り替わる。右にみえているのがヘッダである。Webブラウザが、Webサーバーにリクエストをするときに、データの頭に「Request Headers」の項目をつけて、リクエストする。図をみると、「Accept:」と「User-Agent」という項目のデータを送っている。

Webサーバーも、データを返すときに、データの頭にヘッダをつけている。図でいうと「Response Headers」である。「status:」「content-type:」などの項目がみえる。

リクエストヘッダは以下のようなテキストデータである。細かい項目の意味は知らなくても大丈夫である。あくまで、HTTPのヘッダの雰囲気をつかんでほしい。なお、下記のデータは、FirefoxでWebサーバーにリクエストしたものである。

GET /url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&ved=0CB8QFjAA&url=http%3A%2F%2Fwww.google.com%2F&ei=4-AAV(...省略...)7920726,d.dGY HTTP/1.1
Host: www.google.co.jp
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:36.0) Gecko/20100101 Firefox/36.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: ja,en-US;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate
Cookie: PREF=ID=28ac7f100477df0f:U=1fb-rMce0ysE9EMmlObMTpZBL7LeR7a(一部省略)
Connection: keep-alive
レスポンスヘッダは以下のようなテキストデータである。
HTTP/1.1 200 OK
Date: Thu, 12 Mar 2015 00:42:22 GMT
Pragma: no-cache
Expires: Fri, 01 Jan 1990 00:00:00 GMT
Cache-Control: no-cache, must-revalidate
Content-Type: text/html; charset=UTF-8
Content-Encoding: gzip
Server: gws
Content-Length: 249
X-XSS-Protection: 1; mode=block
Alternate-Protocol: 80:quic,p=0.08

[Response]を クリックするとHTMLのデータがみえる。レスポンスヘッダのあとに、HTMLの本体のデータが送られる。これをヘッダに対して、ボディという。

1回の通信で、このようなやりとりを、Webページを構成するファイルごとに、WebブラウザとWebサーバーがやりとりしている。

ひとつのページが表示されるまで、なんと50往復以上のやりとりがおこなわれている。

裏側では、大変な労力がかかっているのだ。逆にいえば、ユーザー側はまったくこういう技術の存在を意識しないで、Webをつかっている。

ステートレス性

注意したいのは、Webサーバ側は、1回目のリクエストと2回目のリクエストの送り主が同じクライアントだということに気がつかない点だ。Web ブラウザは、2回目移行のリクエストも、前回送ったリクエストメッセージを毎回、前回と同じ内容でも送らねばならない。HTTPのメッセージは、冗長になる。これをステートレス性という。

HTTPはチェーン店の客と店員さんの関係に似ている

おなじみのお店にいって、いつものあれくださいとはいえないのである。チェーン店のように、毎回、決まりにしたがって注文しなくてはいけない。逆に、そうであるからこそ、お店側は、お客さんの状態を記憶する必要がなく、不特定多数のお客さんをさばくことができるのだ。

HTTPの仕組みがわかると、今後の学習がスムーズになる

ざっと駆け足で、触りだけ紹介した。もう少し、HTTPを知りたい方は山本 陽平さんの『Webを支える技術 -HTTP、URI、HTML、そしてREST』の第3部のHTTPが、分かりやすくまとまっている。

HTTPの仕組みがわかると、Web技術全般、とくに、JavaScriptやPHPの学習がスムーズになる。

もっといってしまうと、JavaScript、PHPの勉強はこのHTTPの理解をとばしてしまうと、根本がわからないままになる。それだけHTTPは重要である。2011年にかいた『WebデザイナーやノンプログラマーにおすすめしたいPHPの勉強法』でもこのことは強調した。

動的サイトの仕組みをしろう

そろそろWordPressを使って、オリジナルデザインのブログをつくりたい。
ブログは動的サイトである。やさしいPHPのコードを書いてみて、WordPressの前に、動的サイトの仕組みを体感しておきたい。

PHP入門 確認画面付きのお問い合わせフォームをつくりながらPHPを学ぶ』を参考に、自分のパソコンにApache(Webサーバーソフト)、PHP、MySQL(データベースサーバーソフト)の動作環境をつくる。これをローカル環境という。この環境は、このあとのWordPressのテンプレート作成の時でもつかう。

あとは、この本にそって、実際にPHPとSQLを書いてゆこう。HTMLのフォームに入力したデータが、Webサーバーに送られ、PHPに処理が委譲され、PHPに書かれたSQLによって、MySQLに保存されていく。

MySQLに保存されたデータは、PHPにかかれたSQLによって、取得される。PHPはそのデータをHTMLにつつみ、Webサーバーに渡し、Webブラウザに返す。こういう流れである。

実際に、フォームのデータがMySQLに保存され、そのデータがHTMLに表示できると小さな感動がある。

現時点では、PHPの文法や関数はまったく覚える必要がない。目的は、PHPとMySQLをつかった動的サイトの大枠の仕組みを理解することである。

当ブログでも入門向けのPHPのチュートリアル記事があります。

WordPressをサーバーにインストールして、記事をかこう

WordPressは、PHPでできているブログのプログラムで、データベースはMySQLを使う。

Vol.3で借りたレンタルサーバーに、「blog」ディレクトリをディレクトリをつくる。「http://blog.designmap.info」のようなサブドメインより、下位ディレクトリをつくるほうがおすすめである。独自ドメインが「http://www.designmap.info」なら、「http://www.designmap.info/blog/」とする。

サーバーの管理画面からMySQLのデータベースをつくる。その際に、文字コードは、「UTF-8」を選ぶ。このblogディレクトリにWordPressをインストールしよう。

インストールした直後で、デフォルトのテンプレートが適用されており、記事をかけば、すぐに公開される設定になっている。実際に、記事をかいてほしい。

記事があるほうが、デザインがしやすい。

勉強ではまったところ、難解なところをブログの記事にしてみよう

例えば、Photoshopで苦手なところをピンポイントで調べて、記事という形でまとめておくとよい。PHPの勉強で、何時間もはまった箇所などは、記事にしやすい。

筆者のブログの『2段書き(内書き)の支払調書をもらった時の、確定申告書の書き方』という記事は、何年も悩んだことを、単にまとめた記事である。

失敗、ミス、ひどい話しなどは、ブログの記事のネタになる。『これからWeb制作を勉強したい人のためのパソコン購入ガイド』は、買ったWindowsのノートが失敗だったのを元に記事化した。いま読み直しても、何をいいたいのかがさっぱり分からない悪記事である。

WebデザイナーやノンプログラマーにおすすめしたいPHPの勉強法』は、間違った勉強法にはまり、PHPの本を何十冊も買った失敗経験がもとになっている。

注意したいのは、具体的なお店やメーカーなどを挙げて、批判しないことである。告発が目的になってしまう。また、文章はうまく書く必要がない。分かりやすくかけばいい。最初はアクセスはほとんどないので、あまり読者のことを考える必要はない。まずは、ラフに書いて、公開してみることが大事である。

どんなネタがよいのかは『ポートフォリオサイト、ブログ制作を前に進めるコツ』にもまとめてあるので、参考にしてほしい。

ブログを書いても、当面、自分以外のアクセスはない時期が続く。気にせず、地道にブログを書き続けてほしい。

うちのブログの場合、最初の2年間はほとんどアクセスがなかった。多少、読まれるようになるまで、3年くらいかかった。自分の書きたい記事を、コツコツ書いてゆくことが、ブログの最大のコツである。

情報発信をすること、情報発信に時間を使うことが重要になる。ブログを書くようになると、テレビをみる時間がもったいなくなる。

WordPressでオリジナルデザインのブログをつくろう

次は、いよいよオリジナルデザインのブログをつくっていこう。

おすすめ本は、エビスコムさんの『WordPressレッスンブック HTML5&CSS準拠』である。まったくの白紙からWordPressのテンプレートを少しずつ、作ってゆく構成になっている。コードを少し書いて、表示確認というステップを何度もふんだ内容。これほど分かりやすい構成はない。

この本で基礎的なWordPressの仕組みをしったら、Vol.3でつくったブログ用のコーディングデータに、WordPressのPHPの関数を埋めこんで、ブログ化していこう。

テンプレート開発は、PHPの勉強のときに使ったXAMPPに、WordPressをインストールして、ローカル環境で作業するとよいだろう。

今後、新しいことを覚えたら、新しいWordPressのテンプレートのバージョンをつくって、技術やデザインを反映させていってほしい。これを何度も繰り返していくことで、WordPressの基礎的な知識が身に付いてゆく。

ブックマークはソーシャルブックマークで管理しよう

HTML、CSS、WordPressの勉強の特徴は、細かい知識がいっぱいでてくることである。Googleで検索して、よいページをみつけた場合は、自分のパソコンのWebブラウザ内ではなく、ソーシャルブックマーク(SBM、Social Bookmark)で管理していこう。

いくつか選択肢があるが、「diigo」(https://www.diigo.com/)をおすすめしたい。

アカウントをつくり、ログインする。[Add]ボタンをおして、URLをペースト。あとは、タグをふる。タグは、スペース区切りで複数設定ができる。タグとはキーワードである。あとで、自分のブックマークを探すときに必要になる。[Private]を選ぶと、ブックマークのデータは公開されなくなる。

diigoは英語のサービスだが、UIがシンプルで迷うことは少ない。

なお、筆者は元祖ソーシャルブックマークのDeliciousにいまも愛着があり、こちらをつかっている。日本のソーシャルブックマークだと、はてなブックマークが有名だ。

ソーシャルブックマークに管理することで、他の端末でも自分のブックマークをみることもできる。将来、制作の現場にいったときも、自分のブックマークを見ることができる。

今後は、diigoにブックマークを一元管理していこう。

今回はここまでです。Vol.5に続きます。

まったくのゼロから、独学でWebデザイナーになるためのロードマップ 記事一覧

↑このページの上に戻る