Web 製作ラボ 6/27, 2012 hayashiLabo 1515

Web のデザインをどう作るか 手法 ・ HTML と属性で ・ HTML とスタイルシート (CSS) → 主流 ツール ・テキストエディタで手書き ・ Dreamweaver 、ホームページビルダー ・フリーの HTML エディタ（ KompoZer etc.) ・ Wordpress などの CMS 復習

Web ページ雑感 ・ HTML タグは最近は使われるものが限られてきた ・それだけでなく、廃止予定のものがある（例：フレー ム、いくつかのデザインタグ、 HTML5 で廃止予定） ・ HTML+ スタイルシートで構成するのがふつう ・ JavaScript も一時流行ったが・・ ・ Flash も流行ったが・・ ・カッコよくないのがいい、なんていうのも・・ ・ Wordpress など使って、更新の容易性、構築の容易性、 アクセス対策を追求するというのが最近よく聞く話題 結局は 良い内容 と 独自のスタイル そして、見てほしい対象 復習

それ以外のやり方 ・ Web ページ作成統合ソフトを使う Dreamweaver 、 ホームページビルダー、 KompoZer など ・ブログで作る ブログは各社いろいろあり ・ホームページ作成サービスを使う プロバイダなどが提供。 Yahoo ジオシティーズとか ・ CMS を使う Wordpress が今ではポピュラー エディタと ftp の基本以外では以下のようなやり方がある。 今のところ、さわりだけ。後ほど、詳しく紹介するものもあり。 復習

・サーバーを借りる ・ドメインを取得する ・コンテンツを作る ・テストする ・公開 （サーバーとドメインを結び つける） ・ SEO 対策 ・更新 サイト作成手順 復習

CMS: コンテンツマネージメントシス テム （ Content Management System ） 技術的な知識がなくても Web サイトが作れる テンプレートによりデザイン変更容易 統一デザイン プラグインによるシステム拡張 バージョン管理 公開期日や期間の時間管理 権限の異なる複数の管理者 公開ワークフロー CMS

たくさんある（ wikipedia 参照） WordPress Movable Type Xoops （日本語ﾈｲﾃｨﾌﾞ） 以下多数 CMS の種類 だいたい以下のサーバー要件があるので注意 PHP などの Web プログラミング言語 MySQL などのデータベース

CMS の仕組み ■ 動的生成 ユーザーからのアクセスでプログラム (PHP) を起動 し、そのプログラムが HTML を生成し、ユーザーに送 り返す アクセスのたびにページが作られる ページのデータはデータベース（ MySQL ）に入って いる ■ 静的生成 管理者がページを作成したら、最後に、 HTML 生成 という動作を行いすべてのページの HTML を作成更新 する ユーザーがアクセスするのはディスク上の HTML ページデータがデータベースに入っているのは同じ Wordpress はこっち Movable type はこっち

動的生成 CMS の仕組み ﾌﾟﾛｸﾞﾗﾑ (PHP) テキスト 画像など データベース (MySQL) ユーザーがページアクセス (index.php) ページの HTML データ 読み出し 一般ユーザー

動的生成 CMS の仕組み ﾌﾟﾛｸﾞﾗﾑ (PHP) テキスト 画像など データベース (MySQL) 管理ページにアクセス (index.php) ページの HTML データ 書き込み 読み出し サイト作成管理者 ﾍﾟｰｼﾞ管理 ﾌﾟﾛｸﾞﾗﾑ (PHP)

WordPress の使い方

テーマ ・「外観」～「テーマ」のところで、テーマを選んで適用 できる ・テーマの検索、インストール、アクティベートで使う ・テーマは無料有料、ものすごくたくさんある ・ WordPress チームの作ったデフォルトテーマは無難 ・ WordPress 本体のバージョンとテーマのバージョンの食 い違いで不具合の可能性がある ・シンプルなテーマを選んだ方がカスタマイズはしやすい シンプルなテーマ例： Blue Grey White （ただしメニ ューに対応してない）

投稿 ・新規追加で追加 ・「ビジュアル」と「 HTML] の２つの編集方法が提供され ている ・ビジュアルでは、そこそこワープロ風に入力レイアウト できる ・ HTML では、外部エディタを使って作った HTML をコピ ペすればいい ・ビジュアルと HTML を行き来すると、タグが消滅するな ど不具合が起こることがあり注意（ WP のバグっぽい） ・画像、動画、音の追加が可能。エディタ画面上の「アッ プロード／挿入」というところにあるボタン ・ローカルファイルのアップロード、 URL の指定、メディ アライブラリから選択、ができる ・上述「メディアライブラリ」は、 WP が管理する素材ラ イブラリ。画面の左側に管理用ボタンがある ・「カテゴリー」や「タグ」をつけられる

固定ページ ・投稿と似てるのだが、ブログの記事ではなく、常に同じ ものが表示されているページという位置づけ ・カテゴリー、タグなど投稿にあった機能がない ・通常のホームページを WP で作るときは、この固定ペー ジで作った方が見通しがいいかも ・この固定ページを口述の「メニュー」に追加することで 簡単にホームページのページ構成ができる ・記事の内容については、投稿とまったく同じユーザーイ ンターフェース

メニュー ・「外観」～「メニュー」 ・メニューに対応したテーマで使える ・階層化されたプルダウンメニューのページ構成が 簡単に作れる ・メニューに名前をつけて追加し、あとは、固定ペ ージ、および、投稿のカテゴリーから項目を選んで メニューに追加する ・メニューに追加したら、あとはマウスで項目をド ラッグ＆ドロップするだけで、階層化プルダウンメ ニューがすぐ作れる ・ WP チーム製のテーマで使える

ウィジェット ・「外観」～「ウィジェット」 ・ウィジェットというのは、ページ上に貼れる機 能部品みたいなもの。ブログでいうところのブロ グパーツ ・カレンダー、リンク集、検索窓、 RSS など ・ドラッグ＆ドロップで好きなところに表示でき る ・ウィジェットは後述のプラグインで増やせる

プラグイン ・プラグインとは、様々な機能拡張 ・これのおかげで Wordpress がさかんに使われると 言ってもいいかも ・とにかく、なんか「これやりたい」と思ったら Wordpress プラグインをひたすら探すと、だいたい ある。 例： Contact Form 7 All in One SEO Pack Ultimate Google Analytics WP-DBManager ktai style 、 WPtouch

ユーザー ・ユーザーというものを追加でき、役割分担でき る ・強い順で以下 管理者： サイトについて全て何でもできる。 壊せる 編集者： 記事投稿について何でもできる 投稿者： 自分の投稿した記事にだけ何でもで きる 寄稿者： 投稿できるが、公開できない 購読者： ほとんどなにもできない（仮登録に 使う） ・上記のとおり、編集者、投稿者、寄稿者、とい ったハイアラーキーができる

ツール ・インポートとエクスポートがあり、サイトをま るごとエクスポートし、これをまるごとインポー トできる ・サイトを移設するときに使う ・メディアライブラリ（画像や音などのデータ） はエクスポートされないので注意。これらは自分 で ftp して保存する ・ということで、サイトを完全にインポート・エ クスポートするわけじゃないので、少し高度。 ・ただ、とにかくサイトのバックアップとして常 日頃やっておくとよい

設定 ・各種設定 WP のホーム url を別のところにしたい（一般） 最初に出るページを変えたい（表示設定） コメントについて設定（ディスカッション） 画像サイズのデフォルトなど変えたい（メディ ア） などなど

WordPress のカスタマイズ ■GUI でユーザーカスタマイズがガンガンできるテーマを 探してくる （例： Suffusion ） ・ GUI を懸命に使ってカスタマイズ ・作者やフォーラムで聞く ■GUI も何にもないシンプル極まりないテーマを探してく る （例： Blue Grey White 、 Cleanfrog ） 「外観」～「テーマ編集」でソースをいじる ・ CSS をいじる （デザインを変更する） ・ PHP をいじる （項目追加したい、消したい、など など） テーマをこのまま使うのではなくデザイン したい