1. 1
ユニキャストワークショップ2013
はじめてのWebプログラミング#1
～WordPressからはじめよう～
齊藤 潤 (Unicast Inc.)
2013/06/28

2. 2
自己紹介
● 齊藤 潤 (@ST63Jun_)
● 入社一年目の新人エンジニアです

3. 3
ワークショップの進み方
● WordPressでWebサイトを構築しながら、Webプロ
グラミングに必要な要素を勉強する
– HTML
– CSS
– JavaScript
– LAMP (Linux+Apache+MySQL+PHP)
● 余裕があればWordPress以外のWeb関係の技術
についても触れる

4. 4
WordPress

5. 5
WordPress
● ブログ等のWebページを作成・運営するためのソフトウェア
– この種類のソフトウェアをCMS (Content Management System) という
● WordPressでできること
– 自分のWebページをWebブラウザから更新できる
– 大量に公開されているテーマをインストールすることで見た目を自由に変更できる
– 大量に公開されているプラグインをインストールすることで機能を自由に拡張できる
– 個人や企業のホームページ作成のベースとして使われている
– 例
● クックパッド株式会社 - http://info.cookpad.com/
● ユニキャストラボ - http://lab.unicast.ne.jp/

6. 6
WordPressのシステム構成
サーバー
Webサーバー＋PHP実行環境
WordPress
MySQL
（データベースサーバー）
実行 結果
投稿や設定などの
データを保存・読込
Webブラウザ（IE,Firefox,Chrome等）でアクセス

7. 7
WordPressを取り巻く技術
● Webデザイン系
– HTML
– CSS
– JavaScript
●
システム構築系
– Linux
– Apache
– MySQL
– PHP
これらを一通り広く触ってみるのが今回のテーマ！

8. 8
Webデザイン系
● HTML (Hyper Text Markup Language)
– Webページの記述言語
– 見出しや段落といったテキストの構造を記述します

9. 9
Webデザイン系
● CSS (Cascading Style Sheet)
– 文章やWebページ全体の装飾を記述する
<p class=”news”>新着情報です</p>
p.news {
font-size: 12pt; /* フォントの大きさ12pt */
text-decoration: underline; /* 下線 */
}
HTML
CSS

10. 10
Webデザイン系
● JavaScript
– Webページの動的なコンテンツを記述する
● アニメーション
● ポップアップ
●
コンテンツの自動取得
● などなど
– Webブラウザの制御のためのプログラミング言語
● Webデザイン以外にも様々なところで使用される
● また近年はブラウザだけではなくサーバーのプログラミングに
も使われる（node.js)

11. 11
システム構築系
● Linux
– フリーでオープンソースなUnix系OS
– 単にLinuxといった場合は、Linuxのカーネル（OSのコアの部分）
を指す場合が多い
– カーネルにシステムの動作に必要な様々なソフトウェアを添付し
たパッケージである「ディストリビューション」
● Ubuntu
● Debian
● CentOS
● Arch Linux
● ...

12. 12
システム構築系
● Apache HTTP Server
– Webサーバーソフトウェア
– Webブラウザと通信してWebページを転送する役割を
持つ
– モジュールをインストールすることで様々な機能を追加
することができる

13. 13
システム構築系
● MySQL
– リレーショナルデータベースソフトウェア
●
データを表（テーブル）で表現し、表同士に関係を持たせるこ
とができるデータベース
– ユーザー数が多く、ほとんどのプログラミング言語から
利用することができる
● PHPは標準ライブラリにMｙSQLへのアクセス機能が統合さ
れている

14. 14
システム構築系
● PHP: Hypertext Preprocessor
– 動的にWebページを生成するためのプログラミング言語
– 比較的習得が用意で情報量も多い
– ソースファイルをサーバーにアップロードしてブラウザで表
示するだけで実行できる
– 様々なWebアプリケーションがPHPで実装されいる
● WordPress
● Wikipedia（MediaWiki)
● phpMyAdmin

15. 15
まとめ
● 今回のテーマはWordPress
● WordPressは以下の技術で実現されている
– Webデザイン系: HTML+CSS+JavaScript
– システム構築系: Linux+Apache+MySQL+PHP
● WordPressでWebサイトを実際に構築しながら、こ
れらの技術に触れていく

16. 16
おわり
● ちょっと休憩したら実際にWordPressをインストー
ルしてみましょう

17. 17
XAMPPのダウンロード
http://sourceforge.jp/projects/xampp/ からXAMPPのインストー
ラーをダウンロードします

18. 18
XAMPPのインストール

19. 19
Apache+MySQLの起動

20. 20
起動の確認
http://localhost/ にWebブラウザでアクセスします

21. 21
WordPress用データべースの作成

22. 22
WordPressのダウンロード

23. 23
WordPressのインストール

24. 24
WordPressのインストール

25. 25
WordPressのインストール

26. 26
WordPressのインストール