ユニキャストワークショップ2013 はじめてのWebプログラミング#1 ～WordPressからはじめよう～

1

ユニキャストワークショップ2013

はじめてのWebプログラミング#1～WordPressからはじめよう～

齊藤　潤 (Unicast Inc.)2013/06/28

2

自己紹介

● 齊藤　潤 (@ST63Jun_)● 入社一年目の新人エンジニアです

3

ワークショップの進み方

● WordPressでWebサイトを構築しながら、Webプログラミングに必要な要素を勉強する

– HTML

– CSS

– JavaScript

– LAMP (Linux+Apache+MySQL+PHP)

● 余裕があればWordPress以外のWeb関係の技術についても触れる

4

WordPress

5

WordPress

● ブログ等のWebページを作成・運営するためのソフトウェア

– この種類のソフトウェアをCMS (Content Management System) という

● WordPressでできること

– 自分のWebページをWebブラウザから更新できる

– 大量に公開されているテーマをインストールすることで見た目を自由に変更できる

– 大量に公開されているプラグインをインストールすることで機能を自由に拡張できる

– 個人や企業のホームページ作成のベースとして使われている

– 例● クックパッド株式会社 - http://info.cookpad.com/● ユニキャストラボ - http://lab.unicast.ne.jp/

6

WordPressのシステム構成

サーバー

Webサーバー＋PHP実行環境

WordPress

MySQL（データベースサーバー）

実行 結果投稿や設定などのデータを保存・読込

Webブラウザ（IE,Firefox,Chrome等）でアクセス

7

WordPressを取り巻く技術

● Webデザイン系

– HTML

– CSS

– JavaScript● システム構築系

– Linux

– Apache

– MySQL

– PHP

これらを一通り広く触ってみるのが今回のテーマ！

8

Webデザイン系

● HTML (Hyper Text Markup Language)– Webページの記述言語

– 見出しや段落といったテキストの構造を記述します

9

Webデザイン系

● CSS (Cascading Style Sheet)– 文章やWebページ全体の装飾を記述する

<p class=”news”>新着情報です</p>

p.news { font-size: 12pt; /* フォントの大きさ12pt */ text-decoration: underline; /* 下線 */}

HTML

CSS

10

Webデザイン系

● JavaScript– Webページの動的なコンテンツを記述する

● アニメーション● ポップアップ● コンテンツの自動取得● などなど

– Webブラウザの制御のためのプログラミング言語● Webデザイン以外にも様々なところで使用される● また近年はブラウザだけではなくサーバーのプログラミングに

も使われる（node.js)

11

システム構築系

● Linux– フリーでオープンソースなUnix系OS

– 単にLinuxといった場合は、Linuxのカーネル（OSのコアの部分）を指す場合が多い

– カーネルにシステムの動作に必要な様々なソフトウェアを添付したパッケージである「ディストリビューション」

● Ubuntu● Debian● CentOS● Arch Linux● ...

12

システム構築系

● Apache HTTP Server– Webサーバーソフトウェア

– Webブラウザと通信してWebページを転送する役割を持つ

– モジュールをインストールすることで様々な機能を追加することができる

13

システム構築系

● MySQL– リレーショナルデータベースソフトウェア

● データを表（テーブル）で表現し、表同士に関係を持たせることができるデータベース

– ユーザー数が多く、ほとんどのプログラミング言語から利用することができる

● PHPは標準ライブラリにMｙSQLへのアクセス機能が統合されている

14

システム構築系

● PHP: Hypertext Preprocessor– 動的にWebページを生成するためのプログラミング言語

– 比較的習得が用意で情報量も多い

– ソースファイルをサーバーにアップロードしてブラウザで表示するだけで実行できる

– 様々なWebアプリケーションがPHPで実装されいる● WordPress● Wikipedia（MediaWiki)● phpMyAdmin

15

まとめ

● 今回のテーマはWordPress● WordPressは以下の技術で実現されている

– Webデザイン系: HTML+CSS+JavaScript

– システム構築系: Linux+Apache+MySQL+PHP

● WordPressでWebサイトを実際に構築しながら、これらの技術に触れていく

16

おわり

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

17

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

18

XAMPPのインストール

19

Apache+MySQLの起動

20

起動の確認

http://localhost/ にWebブラウザでアクセスします

21

WordPress用データべースの作成

22

WordPressのダウンロード

23

WordPressのインストール

24

WordPressのインストール

25

WordPressのインストール

26

WordPressのインストール