JavaScript勉強会

JavaScriptの学習日記

Webサイト制作【2】 CodeIgniter準備編

JavaScript学習の一環として、Webサイト制作の練習もやってみます。

今日は、PHPのWAF(Web Application Framework)の1つである「CodeIgniter」を用意してみます。

 

f:id:jsstudy:20170402104529j:plain

 

用語

 

アプリケーションフレームワーク - Wikipedia

アプリケーションフレームワーク (Application Framework) とは、プログラミングにおいて、特定のオペレーティングシステムのためのアプリケーションの標準構造を実装するのに使われるクラスやライブラリの集まりである。単にフレームワークとも呼ぶ。

多くの再利用可能なコードをフレームワークにまとめることによって、開発者の手間を省き、新たなアプリケーションのために標準的なコードを改めて書かなくて済むようにする。

 

Webアプリケーションフレームワーク - Wikipedia

Web アプリケーションフレームワーク(Web Application Framework)は、動的な ウェブサイト、Webアプリケーション、Webサービスの開発をサポートするために設計されたアプリケーションフレームワークである。

フレームワークの目的は、Web開発で用いられる共通した作業に伴う労力を軽減することである。

たとえば、多数のフレームワークがデータベースへのアクセスのためのライブラリや、テンプレートエンジン(→Webテンプレート)、セッション管理を提供し、コードの再利用を促進させるものもある。

 

フレームワーク」と「ライブラリー」の違い

開発/実行環境としてのフレームワークを学ぶ - Part1 ソフトウエアのフレームワークとはなにか:ITpro

フレームワークの本質は「制御の反転」にあり

フレームワークはアプリケーションの半完成品,テンプレートと言い換えられます。

もっとも難しいアプリケーション設計上の決断が,フレームワーク開発者によってすでになされており,プログラマは単にそのひな型に肉付けをしていくだけになります。

 

一方のライブラリは,汎用的な機能を提供する再利用可能なクラス群です。

ライブラリをどういった順番で組み合わせて,どんなアプリケーションを構築するか,という設計上の判断はプログラマに委ねられています。

 

両者の違いは,プログラマが書いたユーザコードと再利用可能なコード(フレームワークやライブラリ)との間の関係の違いにはっきりと表れます。

f:id:jsstudy:20170402082453j:plain

ライブラリの場合,それを呼び出すのはユーザーのコードです。

プログラムをどう動かしていくかという,プログラムの制御に関する主導権は,ライブラリではなくユーザー・コードにあります。

 

ところがフレームワークでは,ユーザー・コードはフレームワークから呼び出されます。

設計を再利用するということは,フレームワークがメイン・プログラムとなり,ユーザー・コードへの制御を行うことを意味するのです。

 

このように,プログラムの制御がユーザー・コードから再利用コードのほうに移っている現象を,「制御の反転」(Inversion of Control,IoC)と呼びます。

そして,「制御の反転」こそがフレームワークの本質であり,定義とさえ言えます。

 

制御の反転は,「ハリウッドの原則」(Hollywood Principle)と呼ばれることもあります。“Don't call us, we'll call you.”(我々に電話をかけて来るな,必要ならこちらから電話する)という,ハリウッドの映画プロデューサと俳優との関係から名づけられた原則です。

 

制御の反転 - Wikipedia

ソフトウェア工学において、制御の反転(Inversion of Control、IoC)とは、コンピュータ・プログラムの中で、個別の目的のために書かれたコード部分が、一般的で再利用可能なライブラリによるフロー制御を受ける形の設計を指す。

この設計を採用した ソフトウェアアーキテクチャは、伝統的な手続き型プログラミングと比べると制御の方向が反転している。

すなわち、従来の手続き型プログラミングでは、個別に開発するコードが、そのプログラムの目的を表現しており、汎用的なタスクを行う場合に再利用可能なライブラリを呼び出す形で作られる。

一方、制御を反転させたプログラミングでは、再利用可能なコードの側が、個別目的に特化したコードを制御する。

 

  • ライブラリー: 使いたい機能をつまみ食いするために使う。
  • フレームワーク: 設計は他人に丸投げして、足りない所だけ付け足す。

目的に応じて、設計や機能を検討し、使いやすいフレームワークを選びましょう!

 

Apache HTTP Server - Wikipedia

Apache HTTP Server(アパッチ)は、世界中でもっとも多く使われているWebサーバソフトウェアであり、大規模な商用サイトから自宅サーバまで幅広く利用されている。単にApacheとも称されている。

nginx - Wikipedia

nginx(エンジンエックス)は、フリーかつオープンソースWebサーバである。処理性能・高い並行性・メモリ使用量の小ささに焦点を当てて開発されており、HTTP, HTTPS, SMTP, POP3, IMAPのリバースプロキシの機能や、ロードバランサ、HTTPキャッシュの機能も持つ。

 

有名なWebサーバーソフトとして、「Apache」や「nginx」などがあります。

  • Apacheの長所は、設定が柔軟にできることです。
  • nginxの長所は、大量のアクセスに対応できることです。

 Apacheは「.htaccess」ファイルによって、設定を動的に変更できます。(Webサーバーの再起動なしに、いきなり設定の変更を反映できる)

nginxは、設定を静的に変更=設定の変更を反映するときは、Webサーバーの再起動が必要。場合によっては、コンパイル(インストール)のやり直しが必要なので、ちょっと面倒です。

とりあえず、Webサイト制作の練習では、Apacheを使っておくことにしましょう。

 

nginx実践ガイド (impress top gear)

nginx実践ガイド (impress top gear)

 

 

Apacheの「.htaccess」の使い方

.htaccessファイルの書き方と設置方法 [ホームページ作成] All About

この「.htaccess」ファイルは、ただのテキストファイルです。ですから、作成も記述もとても簡単です。

書き方は、Apacheの機能に応じて、「ディレクティブ」という項目別に、設定を指定すればOKです。

 

以上で、

  1. Webアプリケーションフレームワークの使い方
  2. フレームワークを動かすためのWebサーバーの設定変更

について学びました。

続いて、PHPフレームワークの1つ、「CodeIgniter」を用意してみましょう。

 

CodeIgniter

CodeIgniter - Wikipedia

CodeIgniter(コードイグナイター)は、PHPを用いて動的Webサイトを構築するために利用するオープンソースのWebアプリケーションフレームワークである。

CodeIgniter公式サイト (英語) http://www.codeigniter.com/

日本CodeIgniterユーザ会 http://codeigniter.jp/

 

CodeIgniterの特徴

  • インストール、設定が簡単
  • 覚えることが少なくて、使い方が簡単
  • そこそこ性能が良い
  • 他のFWと比べて、最初から用意されている機能が少ないので寂しい?
  • Scaffolding機能が付いていないので、CRUDは手で書く(自動じゃない)

 

(参考)Scaffoldingとは? 4. scaffoldを利用した開発(1) | TECHSCORE(テックスコア)

Railsには、コードを自動生成するジェネレータが複数用意されています。ここでは、「scaffold」というジェネレータを紹介します。
scaffold(「足場」という意味)は、データベースのテーブルへの登録(CREATE)、参照(READ)、更新(UPDATE)、削除(DELETE)(英語の頭文字をとって、「CRUD」といいます)を行うWebアプリケーションのひな形となるソースコードを自動生成します。scaffoldを実行させれば、「足場」という名の通り、最低限のCRUDを行うWebアプリケーションを作成することができます。

 

Scaffoldingは、コマンド一発で自動的にCRUDのコードを用意してくれる機能です。

Ruby on Railsが有名。PHPフレームワークだと「Laravel」などにあります。

管理者用ページを作るときとか、おおざっぱなCRUDを用意するときに便利な機能ですが、きめ細かい制御が必要な場合には、やはり自分でCRUDを書く必要があります。

→Scaffoldingとは違う方法で、簡単にCRUDを用意する方法もあるので、別になくても困りません。

 

とりあえず、簡単なCodeIgniterでフレームワークの「制御の反転」を練習して、その後必要に応じLaravelやRuby on Railsなど他のFWを触ってみましょう。

 

CodeIgniterのインストール

(参考)インストール方法 — CodeIgniter 3.2.0-dev ドキュメント

 

CodeIgniterのインストール、設定の手順です。

  1. ZIPファイルをダウンロードして、解凍
  2. Webサーバーの公開フォルダにコピー
  3. Apacheの設定ファイルを変更
  4. CodeIgniterの設定ファイルを変更

たったこれだけ! Simple is Best !!!

 

ダウンロード

CodeIgniterの公式サイトから、CodeIgniterのZIPファイルをダウンロードします。

CodeIgniter Web Framework

(2017年4月時点では、バージョン 3.1.4 が最新版でした。)

ダウンロードした「CodeIgniter-3.1.4.zip」を解凍(展開)します。

 

コピー

XAMPPの中にある、Apacheの公開フォルダに、適当なディレクトリを作ります。

ここでは「test」という名前のフォルダを作ってみます。

 

C:\xampp\htdocs\test」フォルダの中に、解凍したCodeIgniterの中身をコピーします。

コピーするのは、

  1. application」フォルダ
  2. system」フォルダ
  3. index.php」ファイル

の3点だけでOKです。

 

このままでもCodeIgniterは動きますが、URLを見やすくするために一手間かけて、Apacheの設定を変更します。

 

htaccess

「C:\xampp\htdocs\test」フォルダの中に、「.htaccess」という名前のテキストファイルを作ります。

→「htaccess」の前に「.」(ドット)があるので注意!

 

f:id:jsstudy:20170402095200p:plain

 

.htaccess」をテキストエディターなどで開き、以下のように書きます。

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]

 

(参考)CodeIgniter の URL — CodeIgniter 3.2.0-dev ドキュメント

index.phpファイルを外す

デフォルトでは index.php ファイルは URL に含まれます:

example.com/index.php/news/article/my_article

Apache サーバで mod_rewrite を有効にしている場合、 .htaccessファイルでいくつかの簡単なルールを使用することでこのファイルを簡単に外すことができます。

 

上記のURL書き換え(リダイレクト)の設定によって、CodeIgniterにアクセスするときのURLから「index.php」という記述を外して、スッキリしたURLに変えました。

 

(変更前)example.com/index.php/news/article/my_article 

(変更後)example.com/news/article/my_article

 

config.php

CodeIngiterの設定ファイルを編集します。

「C:\xampp\htdocs\test\application\config」の中にある「config.php」をテキストエディターなどで開き、以下の設定項目を変更します。

$config['base_url'] = 'http://localhost/test/';
$config['index_page'] = ''; // 'index.php';
$config['encryption_key'] = 'hoge123'; // 暗号化用の適当な文字列

→ 「base_url」は、作ったフォルダ(ここでは「test」)に合わせて指定します。

 

CodeIgniterの動作確認

ブラウザーで「http://localhost/test/」にアクセスしてみます。

 

f:id:jsstudy:20170402101920p:plain

上記のような初期ページが表示されたら、CodeIgniterの設置は成功です!

 

CodeIgniterを設置したら、チュートリアルを参考にして簡単なWebアプリを作ってみましょう。

チュートリアル — CodeIgniter 3.2.0-dev ドキュメント

 

CodeIgniterの参考書

CodeIgniterの書籍がありますが、対応しているバージョンが古いです。

CodeIgniter徹底入門

CodeIgniter徹底入門

 

 

最新のバージョンに対応した参考書が電子書籍で出ています。

gumroad.com