HTMLとCSSはわかるけど ... という人初心者さんが対象の記事になってます。
インターネット上には本当に色んなWebサイトがあって、こんなサイトを自分でも作ってみたいなーと思う事がたくさんあります。
でも、いざ自分で作ってみようと挑戦しようとするとき、これって何でできてるんだろうと考えます。
そういえば、まだホームページを作り始めるずっと前にもそんな風に思っていた初心者時代がありました。
（今でも初心者みたいなものですが … orz）
やりたい事はあるけれど、まず、どんなプログラムを勉強すればいいのか、そこからが分からなかったんですよねー。
プログラムといってもC言語系、PHP、Java、Perl、Javascript … たくさんあって初心者さんには意味不明だと思います。
各プログラム言語の入門サイトはいっぱいあるけれど、どれを勉強すればいいのかが分からないとどこから手をつけていいのやらと思っている人もいるかもしれません。
このブログの読者さんにはちょっと合わないテーマかもしれませんが、最近勉強を始めた友達のためにブログにしておきます。
ホームページが基本HTMLによって書かれていて、ページの装飾にCSSを使うってことは知ってるんだけど … という方が対象です！
目標：WordPressで自分らしいブログを作る！
ちょっと説明するのに終りとなる目標がないと起承転結にならないので、目標はWordPressで自分らしいブログを作る！ということにしますね。
WordPress（ワードプレス）はデータベースにMySQLを利用し、PHPで書かれたオープンソースのブログソフトウェアである。b2/cafelogというソフトウェアの後継として開発された。GNU General Public License（GPL）の下で配布されている。
Wikipedia
初心者さんにとって、こういう文章って？？？だと思います。
私も最初は、そもそもWordPressって何？MySQLって何？PHPって何よー？って感じだったんですから。
でも今はそれで大丈夫。
順を追って説明します。
目次
- クライアントサイドとサーバーサイド
- クライアントサイド・スクリプトで何ができるの？
- サーバーサイドスクリプトって何ができるの？
- WordPressって何ですか？
- 結局どのスクリプトを勉強すればいいの？
1. クライアントサイドとサーバーサイド
HTML、CSSが分かってれば簡単なホームページは作れますよね。
で、そこにどうやってプログラムが関わってくるのかを簡単にご紹介します。
それからここまで分かりやすさを優先してプログラムと表現してきましたが、語弊もあるのでスクリプトと言う言葉を使いますね。
スクリプトにはざっくりとクライアントサイド・スクリプトとサーバーサイド・スクリプトというふたつに分ける事ができます。
サーバとはインターネット上のどこかにある、あなたのホームページを置いてある場所っていう感じです。
クライアントサイドというのはお客さん側という意味ですけど、ホームページを見ている人のパソコン、もっと言えばブラウザってことです。
ブラウザ：あなたがインターネットを見る時に使っている Internet Explorer や Safari のことを総称してブラウザと言います。ブラウザにはたくさん種類があって、どれも無料でダウンロードして使う事ができます。下のアイコン見た事あると思いますが、これら全部ブラウザです。それぞれに便利な機能がついていて選びがたいのですが、自分にあったブラウザでインターネットをもっと快適に！
2. クライアントサイド・スクリプトで何ができるの？
スクリプトにはざっくりとクライアントサイド・スクリプトと、サーバーサイド・スクリプトに分けられる事がわかりました。
まずはクライアントサイド・スクリプトではどんなことができるのかをご紹介します。
クライアントサイド・スクリプトといえば、Javascriptが代表選手です。
（Java と Javascript とは別物なので注意してくださいね。）
2. 1. クライアントサイド・スクリプトの例 #1
Javascriptでどんなことができるかというと、本当にいろんな事ができちゃうんですけど、簡単な例から見ていきます。
例えば、ユーザーにいろんな情報を入力してもらうフォームでもJavascriptはよく使われています。
上の例では、電話番号を入れなければいけない部分にアルファベットが入っています。
電話番号は数字、もしくは数字とハイフン（-）で構成されているので不正な値ですよね。
だから、間違ってますよーという警告をJavascriptで出力しています。
HTMLだけじゃできませんよね。
参照サイト：MobiCart
送信ボタンを押す → ページを移動 → 間違ってますよー！という流れよりも、その場（クライアントサイド）で警告を出してあげた方が親切だし、サーバ側の負荷も減ります。
最近ではクライアントサイドでフォームの値をチェックするのが主流になってますね。
2. 2. クライアントサイド・スクリプトの例 #2
ホームページ上で色んなエフェクトを加えるのにも Javascript は使われています。
サムネイル（縮小画像）をクリックすると元の画像がドーンとポップアップ表示される Lightbox というプラグイン（後述）もJavascriptでできています。
それからこの記事のところどころに設置してある ↑ 目次へ というアンカーリンクをクリックすると、するするーっとページ内を移動します。
これも Javascript です。
クライアントサイド・スクリプトはユーザーのブラウザ側で動くスクリプトのこと。
だから基本的にはサーバ側には影響を与えないし、そういう意味ではできる事も限られてきます。
（注釈：Ajaxという手法もあって、上の表現は適切じゃないかもしれないけれど、クライアントサイド・スクリプトの基本はこんな感じです。）
だんだん分かってきましたか？
注意することは、クライアントのブラウザで動くので、いろんなブラウザでキチンと動くかどうか確認が必要になりますね！
2. 3. jQueryって何？
クライアントサイド・スクリプトの代表選手、Javascript について簡単に説明しましたけど、それではjQueryって何でしょう？
よく目にしますよね。
jQueryは、JavaScriptとHTMLの相互作用を強化する軽量なJavaScriptライブラリ。John Resig が2006年1月に開催された BarCamp NYC でリリースした。
MIT License と GNU General Public License のデュアルライセンスであり、フリーかつオープンソースである。
Wikipedia
… さっぱりです … まず、ライブラリというのは図書館！じゃなくて、部品置き場みたいなものだと思ってもらって差し支えないと思います。
他のスクリプトから呼び出して、組み合わせて使うっていう感じで、一から作るよりもずっと効率的に作業することができるようになります。
Javascript の代表的なライブラリには prototype.jsというものもあり、jQueryもJavascriptライブラリのひとつです。
もちろん他のスクリプトにもライブラリがあったりします。
例えば、PHPというスクリプトのライブラリでは、PEARなんかがあります。
（部品というよりも拡張モジュールという感じですけど）
2. 4. じゃあplugin（プラグイン）って何？
プラグイン… よく聞きますよねー。
jQuery のプラグイン、とか WordPressのプラグインとか。
よくプラグ（コンセント）のアイコンで表現されてたりします。
プラグインという言葉はとてもあちこちで使われているのでひと言で説明するのはちょっと無理な感じがしますが、ざっくりいうと、コンセントを入れると電化製品が動き出すように、プラグインを導入すると新しい機能を使う事ができるようになるって感じです。
jQuery のプラグインといったら、jQuery にプラグを差し込んで（jQueryがないと使えないので）ある機能を追加するっていうことです。
例えば、画像などをスライドショー的に表示してくれるEasySliderなんかもjQueryのプラグインです。
簡単にスライダーをWebサイトに設置できるEasySlider
Easy Slider jQuery Plugin Demo
こんな風にたくさんのプラグインがインターネット上にはたくさんあります（有料だったり、無料だったり様々です）。
自分で1から作らなくても利用できるので、とっても嬉しいしありがたいですよね。
他にもDropDownメニュー（マウスを置いたりクリックするとでろでろーって出てくるナビゲーション）とか、さっきも出てきたフォームに入力された値が正しいかどうかを判断するプラグインなんかもあります。
クリックするとセクシーにメニューがでてくるSexy Drop Down Menu
クライアントサイド・スクリプトってどんな感じかが大体つかめたでしょうか？
ホームページを見ているみんな（クライアント）のブラウザで仕事をするのがクライアントサイド・スクリプトです。
あなたのやりたいことが、クライアントサイド・スクリプトでできるんだったら、Javascript を勉強してみるといいと思います。
注記：Javascript でできることは本当にたくさんあって、ここで紹介していることはほんの一部、0.1%くらいだと思います。クライアントサイド・スクリプトというものがどんなものかということを伝えるために紹介したにすぎません。色んな可能性を秘めた Javascript … ぜひ学習したいスクリプトのひとつです！
Javascriptのおすすめ書籍
- オライリー JavaScript
私はオライリーのこの本を読みました。
初心者さんにも分かりやすく書かれていると思います。
（アマゾンへ飛びます）
3. サーバーサイドスクリプトって何ができるの？
クライアントサイド・スクリプトに対して、インターネット上にあるサーバで動くスクリプトがサーバーサイド・スクリプトです。
サーバーサイドスクリプトにはいろんなスクリプトがあります。
PHP（ぴーえいちぴー）、Javaサーブレット（じゃばさーぶれっと）、Python（ぱいそん）、Perl（ぱーる）、ASP（えーえすぴー）など …
私はPHP以外は詳しくないので紹介もおすすめもできませんが、本当にたくさんありますねー。
ではサーバーサイドスクリプトではどんなことができるのか、簡単にご紹介します。
3. 1. サーバーサイドスクリプトの例
サーバーサイドスクリプトの特徴として、ユーザーからのリクエストを受けて、サーバーで処理、そしてその結果をユーザーに返すといったことができます。
ちょっと分かりにくいですねー。
例えば、前述したお問い合せフォームがあったとして、あなたが名前や電話番号、メッセージを入れて送信します。
これがリクエスト。
そのメッセージをサーバーサイドスクリプトが受け取って処理をします。
例えば、メッセージに不備があったら、「記入漏れがあるのでやり直してください」的なページを出力したり、不備がないようなら「お問い合せありがとうございました」のようなページを表示させるとか。
何となくイメージが湧きましたか？
例えば通信販売の注文の処理とかもサーバーサイドスクリプトがあなたのリクエストを受けて仕事をして、その結果をWebページとして出力します。
他にも、このブログにも検索機能がついていますが（ページのいちばん上に検索窓があります。）、キーワードを入力して送信。
これがリクエスト。
リクエストを受けたサーバーサイドスクリプトが仕事をして、結果をWebページに出力。
こうやって動的にWebページを作成してくれるのがサーバーサイド・スクリプトの特徴のひとつです。
クライアントサイド・スクリプトではできないこともサーバーサイド・スクリプトではできるんですねー。
3. 2. 動的、静的って何？
HTMLとCSSしか知らない頃は、この動的にページが作成されるってことすら知りませんでした。
あなたは今、HTMLとCSSでホームページを作ることはできるはずですよね。
ファイルの拡張子は .html で。
でもそのホームページはあなたがHTMLファイルを書き換えてサーバーにアップし直さない限りずっと同じままですよね。
こんな風な純粋なHTMLで書かれたホームページを静的な（スタティックな）Webページと言います。
静的なWebページに対して、ユーザーのリクエストに応じて自動的にサーバーサイド・スクリプトによって作られるページを動的ページと言います。
例えば Yahoo でキーワードを入れて検索すると …
こんな風に検索結果が表示されますよね。
これはサーバーサイド・スクリプトによって動的に作られたページで、リクエストはURLにパラメータ（引数）をくっつけて送られています。
分かりやすく図にするとこんな感じです。
これは一例ですけど、こんな感じで自動でページ作られています。
検索結果一件一件のページを誰かが手書きでHTML書いてる訳ではありません …
3. 3.データベースと組み合わせる
サーバーサイド・スクリプトでは他にも掲示板や予約システム、通信販売用のカートなど、本当に色々なことができます。
でもデータベース（データをしまっておく入れ物）と組み合わせることが多いので、データベースについても勉強したほうがいいかも。
データベースにも色んな種類がありますが、私はSQLiteとMySQLというデータベースしか使ったことがないので、他のデータベースについては紹介できません。
例えばMySQLというデータベースを操るなら、SQL文というものも覚えなくてはなりません…
4. WordPressって何ですか？
今までクライアントサイド・スクリプトとか、サーバーサイド・スクリプトとかを紹介してきましたが、WordPress（わーどぷれす）というのは何でしょう。
PHP（サーバーサイド・スクリプト）で作られたCMS（Contents Management System）です。
CMS（しーえむえす）を使えば、コンテンツを作るだけで自動的（動的）にページを作ってくれます。
ブログをやったことがある人なら分かると思いますが、記事を書くだけで新しいページがどんどん作られていきますよね。
別にブログじゃなくてもいいんですけど、コンテンツを書くだけで動的にページを作ってくれるので、Webサイトの構築がとっても簡単にできちゃいます。
他にも OpenPNE、Zen Cart、XOOPS、EC-CUBEなど、たくさんのCMSがあります。
通信販売に特化したものやポータル、コミュニティーに特化したものなど、様々なタイプのCMSを無料で利用することができます。
ここで紹介したCMSは全部 PHP（サーバーサイド・スクリプト） + MySQL （データベース）で構築されています。
4. 1 .WordPressを使うのに覚える必要があるのはどれですか？
WordPressには無料で利用できるテーマもたくさん配布されていますし、機能を追加できるプラグイン（jQueryのところでも出てきましたね）もたくさんあります。
なので、特にスクリプトを覚えなくてもブログくらいなら誰でも簡単にできてしまいます。
そこがCMSのスゴいところですねー。
でも自分の思うようなWebサイトを作るなら、少なからずカスタマイズする必要もありますから、スクリプトについての知識は必要になります。
注釈：WordPressのテーマというのは、Webサイトのデザインや最低限の機能がパーケージされたテンプレートのようなものです。
5. 結局どのスクリプトを勉強すればいいの？
やりたいことによって覚えるべきスクリプトは変ってきますよね。
でもWebサイトを作成するならクライアントサイドの Javascript は覚えた方がいいかもしれませんね！
Javascript でできることはとってもたくさんあります。
Javascript では、DOM、Ajax なんてもの出てきて、とっても勉強しがいのあるスクリプトです。
サーバーサイドサイド・スクリプトについては、私がPHPくらしかできないのでPHPを簡単に紹介すると、
決して難しいスクリプトではありませんよー。
もちろん完全に習得するにはたくさん学習する必要はありますが、初心者さんでも馴染みやすいスクリプトだと思います。
PHPを学習するなら、合わせてMySQL（データベース）についても少し学習した方がいいかもしれません。
もちろんデータベースなんて使わないよーという人なら必要ありませんが。
PHP、MySQL おすすめ書籍
- PHPによるWebアプリケーションスーパーサンプル 第2版
初心者さんから中級者まで使えるPHPのサンプル集です。
私も辞書がわりに結構使ってます。 - 基礎からのMySQL
MySQLの入門書てしてはとても分かりやすいと評判の一冊です。
（アマゾンへ飛びます。）
5. 1. スクリプトを勉強するには何が必要なの？
Javascript を学習するならテキストエディタとブラウザがあれば特に必要なものはありません。
最初のうちは無料で利用できるテキストエディタで十分だと思います。
無料で利用できるテキストエディタ
クライアントサイド・スクリプトである Javascript はブラウザがあれば動きますが、サーバーサイド・スクリプトを動かすためには、あなたのパソコンの中にサーバを用意しなくてはなりません。
サーバって聞くとインターネット上にあるもので、レンタルしなきゃいけないっていうイメージを持ってる人もたくさんいるみたいですが、サーバはあなたのパソコンの中に構築することかできます。
ローカルサーバとか、ローカル環境とか言ったりします。
サーバをインターネット上ではなくて、自分のPCの中に置いてあるってことです。ローカルサーバでWebサイトを作って、完成したらインターネット上のサーバにアップするって感じです。
私は PHP + MySQL （サーバーサイド・スクリプト + データベース）でWebサイトを作っているので他のスクリプトの環境は分からないです。
なので PHP + MySQL 環境を簡単にローカルに構築する方法だけになってしまいますが、ご紹介します。
5. 2. 無料で利用できる PHP + MySQL のローカルサーバ
サーバをセットアップして、PHPをインストールして、MySQLを構築して … なんて個別に難しいことをしなくても、Apache（あぱっち）というWebサーバ、PHP、MySQLがセットになっていて、無料で簡単に利用できるパッケージがあります！
- MAMP
Mac用の Apache、PHP、MySQL のパッケージです。
有料版のMAMP PROもあります。 - XAMPP
Windows用の Apache、PHP、MySQL のパッケージです。 - WampServer
Windows用の Apache、PHP、MySQL のパッケージです。
私は使ったことがないので ….
これをインストールすれば、ローカルで PHP + MySQL の環境が簡単にできちゃいます！
しかも無料なんてうれしすぎます。
あとはいろいろいじり倒してスクリプトを勉強しましょう
これで、クライアントサイド・スクリプト、サーバーサイド・スクリプトの両方を勉強する環境は整いました。
インターネット上のいろんなWebサイトを参考にして勉強するのもいいし、書籍を購入して勉強するのもいいと思います。
WordPressもダウンロード
PHP + MySQL 環境で使えるCMS、WordPressもダウンロードして、あなただけのWebサイトを作ってみてはいかがですか？
色んなスクリプトを覚えながら、自分だけのWebサイトを作っていくのは楽しいですよー。
今回はホームページで色々やりたいことがあるけれど、どんなプログラム言語を勉強すればいいのか分からないっていう人に参考にしてもらえればいいな、という記事でした。
私がPHP以外のサーバーサイド・スクリプトに詳しくないので、こういうことがしたいなら、コレ！というような紹介ができなくてごめんなさい。
私自身、PHP、WordPressなどでWebサイトを作ることが多いので、 PHPをお勧めするよう内容になってしまいましたが、人それぞれやりたいことがあって、それにあったプログラム言語があると思います。
何を勉強すれば、自分の作りたいホームページが作れるようになるのか … その参考にしてもらえれば嬉しいです。
related posts
You may also enjoy :
こんな記事もきっと気に入ってもらえると思います : )
Not Found Related Posts
Nov 29th, 2010
at 10:34 am
[...] This post was mentioned on Twitter by そよかぜ, Psychicbaby, take, ichinose, Nori Takahashi and others. Nori Takahashi said: ブログ書きました：どのプログラム言語を覚えればいいのか分からないっていう初心者さ [...]