Webプログラムの大まかな仕組み

今あなたがこのページを見ているのは、どういった仕組みからなのでしょうか。素朴な疑問ですが、これを正確に回答するのは案外難しいです。
ざっと説明すると、

  1. ブラウザからhttp://~のアドレスにリクエスト
  2. リクエストされたサーバからデータを受信
  3. 受信したデータを基にブラウザがページを構築 まぁ、こんな感じです。すごく端折ってますが。

    この辺の基礎知識はあまり詳しくないので、知りたい方はいろいろ調べてみたりするといいと思います。

経験と聞いた話

馴れ初め

私は、小学生くらいの時にC言語をちょいちょいやってたぐらい*1だったのですが、小5の頃からHTMLをいぢりはじめました。Yahooの簡易ウェブホスティングサービスで遊んでいました。最初はイロハも分からず(何といってもウェブリソースオンリーだしね)大変苦労したものです。
それから幾許かの時が過ぎ、テーブルレイアウトからCSSへ路線変更する人が増え始めた頃私もCSSをいぢりはじめました。

テーブルレイアウトとCSS

テーブルレイアウトは結構過酷で、ページを一つのテーブルに見立てそれぞれのセル毎にデザインを決めたりサイズを決めたりしてたのです。それに比べるとCSSのデザイン性、簡易性の高さといったら語りつくせないぐらいです。

Javascriptとの出会い

Webプログラミングにおいて、それぞれの言語の限界、特性を知るというのは死活問題です。例えば、HTMLだけでは動的なページが作れませんし、Javascriptはファイルの入出力が出来ません。かといって、Javascriptだけではページを見ることすらままなりません。どういうときに、どうすれば課題をこなせるか、それを考えることが出来る・・・ということが求められるのだと思います。
私の場合は、現在の時間を表示したい、というぬるい欲望とJavascriptという未知の領域に憧れを感じてたのもあったりでjavascriptをいぢりはじめました。

動的と静的

動的なページ、というのはどういったページを指すのでしょう。逆に、静的なページとはどのようなページを指すのでしょうか。
静的なページは、アップロードしたときの状態と見ているときの状態がまったく同じページを指します。逆に、動的なページとは見ているときの情報をリアルタイムで表示することの出来るページのことを指します。SNSや、オークション、ショッピングなどがこれに当てはまるでしょう。もちろんWikiも動的Webページです。
「いかに動的なページを作るか」、がプログラマに課せられる課題です。

サーバーサイドプログラム

PHPやPerl,Python,Rubyなどは、基本的にサーバーで動くプログラムです。彼奴らはサーバーで何をしているのでしょうか。
答えは単純、「HTMLの生成」です。
リアルタイムで情報を手に入れ、尚且つそれを上手く処理して最終的にはHTMLを生成するわけです。これらの言語を用いたページも動的ページの一種です。また、HTMLだけでなくJavascriptなどとも相性がよいです。これらの組み合わせを用いていかにユーザーに驚きと、情報を与えるか。デザインで魅了するもよし、情報の組み合わせに驚愕させるもよし、ネタで笑いをとるのもよし。
お粗末さまでした。

Webプログラミング大好き!って先輩がいらしたのですが、その方も私と似たような流れでWebプログラミングにハマったんだそうな。なので、多少は同じような道を歩んできている同年代はいないものか・・・と探しても、なかなかいないです。orz

オススメ開発環境

まぁ、Webの開発なんてのはコンパイラも必要ないのでメモ帳とブラウザがあればだいたい製作は出来るんですがね。一応、私が使っている環境を挙げて推薦しておきます。

エディタ

  • Notepad++
    もともとは英語版しか無かったのですが、有志の手によって日本語版がリリースされました。かゆいところに手が届き、シンタックスハイライトしてくれるファイルが多いのも魅力。

ブラウザ

  • FireFox3
  • FireBug
  • IETab
    この3つの併用がオススメです。FireFoxは鉄板かと。まぁ、好きなブラウザで開発するのがいいです。
    FireBugはFireFox2のDOM Inspectorの機能を拡張したようなアドオンです。これを使うとデバッグ*2が非常に楽になります。何より、スタイルの一覧が見れたり、DOMの情報が全て閲覧することが出来るのが開発にとても役に立ちます。すたいる?どむ?・・・って方、後々ご説明します。
    IETabは個人的に楽だから推薦しておきます。開発していると「I E ま た お ま え か」って死ぬ程言わなきゃいけなくなるので、IETabでサクッと閲覧してバグを修正していけます。FireFoxでIEエンジンでレンダリングしてくれるアドオンです。

    ここからは、あまり詳しくない範囲ですがメモ程度に。

Flash

  • Adobe Flash CS3/4
  • FlashDeveloper+Flex
    Flashは詳しくない&あまり好きじゃないので、この程度で

イメージ

  • Adobe Photoshop CS3/4
  • GIMP
  • Paint.NET
    画像編集は案外アキレス腱だったりします。一番はやっぱりPhotoshopなんだと思いますが、素人にはとても手が出せないのでバンドル版とか使ったりフリーのものでもいいのがあります。GIMPはなかなか有名なソフトです。Paint.NETはあまり知名度は高くないかもですが、MSPaintにレイヤーなどの機能が加わって尚且つ軽い*3ので結構オススメです。

統合開発環境

  • Aptana Studio
  • PHP Developer Tool
    Aptana Studioは結構使いやすいエディタですが、英語(日本語化できるぽい?)なのと、いろいろ知識が必要になるのでレベル高いです。最近はGoogle App Engineに対抗して、製作したものをストレージしてくれるサービスを展開してたり。
    PHP Devは、MSのVisual***ライクのPHP統合開発環境です。使いやすいのか使いにくいのかよく分からないです。
    ちなみに、Aptana StudioだとAIRの開発も簡単です。

*1 バイブルのポインタで挫折したのを今でも引きずってるんだぜ
*2 といっても、ネイティブみたいにコンパイラが指摘してくれないバグを修正していく作業がもっぱら
*3 ノートでもサクサク

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2010-10-24 (日) 17:14:24 (2586d)