講師：WordBench札幌の田中さんのセミナー資料はこちらです。
http://another.maple4ever.net/archives/1270/

拙記事ではセミナー内容の捕足、実務で扱うものとしての雑感などを交えます。
まだ3.0をちゃんといじっていないので、3.0についてはあくまで聞きかじりの段階であることはご了承ください。

WordPressはCMS

• 広瀬香美ブログ
• 百式
• 暮らしの手帖

WordPress3.0は6/25時点で1,121,440ダウンロード

WordPressは時系列主体のサイトに強いように思われますが、「暮しの手帖」のような時系列に添わない、個性的な一覧ページを持ったサイト構築も充分可能です。

とは言え、様々な実務案件を経験してきた視点から言えば、静的ファイルとの共存が難しい、テーマファイルの見通しが良くないなどの欠点から多人数で連携して制作するサイトにはあまりおすすめできません。

尚、私のブログもWordPressです。一覧ページの体裁が普通のブログと違っていたり、a-blog cmsベースの本サイトとインクルードで連携していたりします。

どのようなコンテンツマネージメントシステムということを知る にはそのデータ構造を知ることが早道です。
WordPress 3.0 の新機能を交えまして、まずは WordPress の データ構造を紹介していきます。

WordPressのデータ構造（記事情報）

ポストとページの二種類＝post_type

1. ポスト：時系列（日記／新着情報など）
2. ページ：固定的（自己紹介）

ポストとページのメタ情報

• タイトル
• 投稿日・投稿者
• 修正日
• パスワード
• トラックバック先
• 分類情報(カテゴリ・タグ・タクソノミー)
• リビジョン
• 等々

WordPressの記事情報は時系列とカテゴリーによって分類することを前提にした「ポスト（記事）」と、1ページごとに独立した「ページ」に分類されます。

ただ、ページでも時系列の整理が可能だったり、後述の「カスタムタクソノミー」でうまくタグ分類すると、両者の区別はほとんどつかなくなってきます。
この辺りの特徴は、MovableTypeと非常に良く似ています。

カスタム投稿

WordPress3.0からの新機能
ポスト／ページに加えて新しいタイプを定義できる

タイトル不要／日付不要／トラックバックが必要／などなど

旧来のポスト／ページもカスタム投稿のひとつとして
デフォルト実装されている＝再定義ができる

カスタム投稿機能は、マルチブログ以上の目玉機能なんじゃないかと思っています。
上の説明の通り「必要／必要ない項目」を自分で定義することが可能なので「タイトル・本文がなく、カスタムフィールドのみで構成された記事」などの大胆な構成も可能なようです。
MovableType4以降で登場している「表示オプション」に近い印象です。

管理画面上の入力項目の順番設定はできるのか、旧来のプラグインや表示パフォーマンスへの影響はないかなど気になるところもありますが、使いこなせば無償で使える軽量CMSとしての良さが増しそうです。

カテゴリーとタグ

記事に対する抽出条件のひとつ

1. カテゴリー→階層構造を持たせられる
2. タグ→フラットな分類

カスタム分類（タクソノミー）

任意のセット分類を追加できる
1サイトに複数のタグクラウドを生成できる

2.9から機能強化
ただし分類の新規作成はプラグインが必要（custom-post-type-ui）

カスタムタクソノミーは、「複数の独立した階層カテゴリーを作成できる機能」と解釈した方がいいと思います。前バージョンから概念自体は存在していましたが、3.0以降では、管理画面からの設定が可能になりました。

こちらの記事で詳しく説明されている通り、導入の手順が面倒な割に必要性が薄い機能だったりします＾＾；

カスタムタクソノミー(Custom Taxonomy)の導入と使い方 [WordPress 3.0]

その他の情報

コメント
記事に対する外部からのコメント

ユーザー権限
複数のユーザーが投稿できるようにユーザー管理ができる
購読者／管理者／編集者／作成者／投稿者
管理画面のアクセス権限や投稿、修正制限
投稿から公開へのワークフローが持てる

オプション
サイトの動作システム情報

リンク先
他サイトとのつながりを格納する情報／XFNを使える

ポストメタ（カスタムフィールド）
記事に対するここまでで出てきた以外のカスタムメタ情報を持たせる

ユーザー権限については捕足が必要です。
ほとんどの安価なCMSもそうですが、「上司」「部下」のアカウントがあって、部下が更新すると昇任者である上司に自動でメールが送られる…といった機能は、WordPress2.xの段階ではプラグインがなければできません。
MUと統合したWordPress3.0はもしかしたらできるかもしれないのですが、まだ未確認です。すいません。

2.xでの実装方法についてはこちらの記事を参照してください。

WordPress – 公開承認ワークフロー – 新規公開 | Technolog.jp

リンクの「XFN」というのは人間関係を表現したフォーマットなのですが、
なんで恋愛関係だけこんなに充実してますのん
と必要性に疑問を感じるわけですよ。ハイ。

その他の情報続き

マルチブログ
3.0から利用可能
これまでに出てきた情報を複数もたすことで、複数のサイトを持つ

データフロー
管理画面操作からのデータベースへの格納
コメント者からのコメントの投稿
トラックバック／ピンバック
XMLRPC／ATOM経由でのデータベースへの格納

出力系（テンプレートタグ）
WordPressテーマの実態
テンプレートタグはデータ構造をHTMLやRSSで出力する関数群
データの抽出を行うループ系の関数を起点に、条件取得された 情報を取得
現在は主にブラウザ用に簡単に HTML 出力する機能が提供されている

注目していたマルチブログですが、今回のセミナーではデータ構造の説明の一部にとどまりました。
MovableType4、SOY CMSのように管理画面からウィザードを介して作成できるのかと思っていましたが、現時点では外部からの.htaccessの編集などが必要なようです。
サブドメインも想定して設計されているのはありがたいところです。

Wordpress 3.0で複数ブログを使う設定 « lainforest.org

出力系の説明にある通り、WordPressのタグはテンプレートエンジンではなく、PHPの関数です。
なのでテーマにはそのまんま関数を書きます。
PHPをある程度かじれば融通が利くのがありがたいところですが、プログラマさんがWordPressのテーマファイルを見たら、ちょっと面食らうかもしれません。

プラグイン

add_filter／add_actionで既存のタグ／関数に自作関数をフックできる
既存の関数も全てフックされているので不要なものを除外できる

functions.phpでテーマ専用の関数を定義できる

※簡単に実装できる反面、プログラム構造を追うのに慣れがいる

フィルターの例

記事の特定文字列を加工し、HTMLを付与
（記事中の「hiromasa」をタグで囲む）

ショートコード
（[tegaki]〜[/tegaki]で囲んだ箇所がカスタムフォントに変わる）

アクション（template_redirect）
通常のテーマに情報を渡さず、携帯用テーマの処理をさせる（例：Ktai Style）

ウィジェット
サイドバーのウィジェットを追加する

管理画面への機能追加
3.0からの新テーマはヘッダー画像を差し替えできる

時間指定実行（wp_cron）
コアには既に予約投稿の機能がある

必要なプラグインがあったなら「コア機能に対する変更」という視点で
調査を行うと比較的簡単に実現可能

既存のプラグイン修正時もコアのどの部分に介在しているのかを調査し、
そこからソースコードを追うとわかりやすい

WordPressは「フック」という概念でコア関数を管理しています。

既存のタグに新しい関数を定義する「add_filter」と

add_filter( 'the_content', 'hogehoge' );

WordPress内の特定の処理で関数を発動させる「add_action」があります。

add_action( 'wp_head', 'hogehoge' );

「コアのどの部分に介在しているのかを調査し、そこからソースコードを追う」というのが、プログラミングに慣れていないと難しいです。
phpファイルを内部検索できるソフトなどで調べる手もありますが、
WordPressのコアファイルを公開している、こちらのサイトが便利です。

PHP Cross Reference of WordPress

ページ右上にあるサーチボックスからタグ名、関数名を入力するとどのファイルの何行目にコードがあるのか、を調べることができます。

WordPressの魅力

ブログを起源とするプロダクトだがデータ構造がシンプル
特に3.0から基本構造や分類の解放を行っているためCMSとしても使いやすくなった

個性が強いブログサイトを構築する手段としても人気があるので
テーマやプラグインに美術的なものが多く配布されている

個性をだすべく、システムもそれに答える形で拡張されていく
テーマやプラグインからの介在の余地が大きく
様々な要求に応えられるカスタマイズが可能

サイトへの導入実績が多くそのノウハウが得られやすい

WordCamp／WordBenchなどオフラインコミュニケーションも活発で楽しい

WordBenchについて

WordPress の地域コミニュティー
実はWordBench札幌としてのオフライン活動はこのOSC北海道が初めて

参加お待ちしております
http://wordbench.org/

セミナーのレポートは以上です。

田中さんが述べられているように、WordPressはPHPの知識があれば柔軟なカスタマイズができることが魅力です。
このためかデザイナーが介入しやすく、芸術品のようなテーマ、とても無料とは思えないような高度なテーマが多数公開されています。
管理画面の完成度の高さも特筆すべきところです。

一方で「安くて簡単でなんでもできる」という情報が一人歩きしてしまい、WordPressの仕様では困難な案件、ライセンス料をかんがみても他のCMSの方が安心して運用できそうな案件もWordPress前提で来ることが増えているのが、私の悩みだったりします。

そういう意味で、新機能を派手にアピールするのでなく、WordPressを更に詳しく知るための解説に徹した田中さんのセッションは好感を持ちました。

MUと統合し、更に奥深くなったWordPressはこれからも注目すべきCMSだと思います。

Twitterで記事を紹介して下さい（-人-）

株式会社えにしテック

「えにしテック」は、最近設立されたばかりの札幌の企業です。
プログラミングの会社にも関わらず、準備中の段階からデザイン会社並みのきれいなサイト。正式公開が楽しみです。

代表の島田さんと設樂さんは、プログラミング言語「Ruby」のコミュ「Ruby札幌」の主幹でもあります。
Ruby札幌が本の出版などで全国的に活動している影響もあるのか、北大生を中心に札幌はRubiestが多いです。
日本人が開発した言語なので日本語との親和性が高く、構造的にも優れた言語であるようです。

そんなこんなで私も近頃Rubyに興味を持っていて、本を読むこともあるのですが、WEBデザイナーとRubyの関わりはまだとても薄いのが現状です。

WEBデザイナーが最も関わることが多い言語は「PHP」です。著名なメールフォームやCMSののほとんどがPHPでできているし、レンタルサーバーのほぼ全てが、PHPを何の設定もなく扱えるからです。

私もある程度は習得していて、お仕事でカスタマイズの際に書くことも多いです。
それ以外の言語で普及している（というより数年前は主流だった）のはPerlくらいです。

WEBデザイナーは、覚えなければならないことがやたらとあります。
XHTML＋CSSはもう当然ですが、AdobeCSシリーズの操作、デザインや色彩の知識、アクセシビリティ、SEO・SEM、言語ではPHPだけでなくJavaScriptやActionScriptも書くことがあります。
PDFファイルの作成、CMSの構築スキルなんかもあります。

プログラマよりずっと勉強してるぜ！という意味では絶対ないです。
ぶっちゃけ「広く浅くのなんでも屋」、「いっこうにレベルが上がらないWizardryのビショップ」です。
それだけに、どうしても学習コストを考えざるを得ません。

「私たちは理論的なこだわりがあってPHPを選択しているわけではないです。現場で有用な技術やアプリがPerlで書かれていればPerlを勉強しますし、Rubyで書かれていればRubyを勉強するのです」

以前、プログラマの方に尋ねられて、そう答えたこともあります。

なので、私がRubyに期待しているのが
「WEBデザイナーがよく扱うWEBアプリケーションで、キラーアプリが出てくれること」です。
CMSだと牙城は崩せないので、オープンソース・カスタマイズフリーのフォーム、Wiki、携帯サイトの運営ツールなどでしょうか。

また「初心者がWEBアプリを作れる学習本」などがたくさん出てくれると嬉しいです。
（プログラマの皆さんはそういう本がお好きでないようです；；）
そうなったら、PHP一辺倒の市場が変わるんじゃないかと思います。実際PHPもそうやって言語的に微妙であるにも関わらず主流になったわけです。

もちろん、学習する側の努力も必要ですよね…もっとがんばらないと。

意外と知られていないことですが、ゲーム作成ソフト「RPGツクール」シリーズの近作は、Rubyで全てのイベント処理を書くことができます。

RPGツクールXP（バリュー版）

RPGツクールVX

私は元々ツクーラーで、この段階でRubyのことを知っていたのですが、結局ツクールXP以降を購入することはありませんでした。

もしツクールXPを購入して、Rubyに親しんでいたら、私も今頃Rubiestくらいにはなれていたかもしれません。
そう思うとくやしくてくやしくてしょうがないですwww

Twitterで記事を紹介して下さい（-人-）

Discover Shiretoko – 世界自然遺産「知床」と Web ブラウザ「Firefox」の物語

美しい。
流石はWEB標準の先端をゆくMozilla Firefoxのサイトです。
しかも、コードネームに我らが世界遺産、「Shiretoko」を選んでくれて嬉しいですー。
北海道を愛する方も、フォクすけを愛する方も、俺はOpera一筋だ馬鹿野郎という方も、是非訪問してみてください。

このサイトではWEBデザインの美しいテクニックがあちこちに使われています。
全ては紹介できませんが、取り急ぎ目立つものだけ。

WEBデザインの可能性を広げる、透過PNG

このサイトには「透過設定」を行ったPNG画像が多用され、Flash並のグラフィカルな演出を実現しています。
PNG32形式はファイルサイズが大きくなる欠点がありますが、近年のADSL、光回線の普及で使いやすくなりました。

ですが…
あのクソ忌々しいInternetExplorer6はこれに対応しておらず、足を引っ張り続けています。
このIE6でも透過PNGの表示を可能にするのが、「PNGFix」と呼ばれるJavaScriptライブラリです。
「Discover Shiretoko」はjQueryライブラリを使用しているので、jquery.pngFix.jsを採用しています。

jquery.pngFix.js – PNG-Transparency for Windows IE 5.5 & 6

衝撃のGlider.js

いや、これはびっくりしました。
てっきり知床→Firefox間でページを移動するのだろうと思っていましたから。
このダイナミックな横スライドは、日本人が作成したjQueryライブラリ「Glider.js」を採用しています。

Glider.jsを作ってみた。 – Ho-KAGO After School

Firefoxユーザーのなかには、「No Script」プラグインでJavaScriptをオフにしている方も少なくありませんが、このライブラリはdivでグルーピングされたHTMLに対し演出を加えるものなので、内容が読めなくなることはありません。
でも、できればこのサイトくらいはJavaScriptオンで見てあげてください…

一部が重なっているナビゲーション

本文最後尾のナビゲーションは、矢印の一部が重なっています。
四角ベースのCSSレイアウトでこれを実現するには、各ボタンを透過画像で作成し（ここは透明度はあまり関係ないのでgifです）、さらにフロートで横に整列したボタンに対し「ネガティブマージン」や「position:relative（相対配置）」で矢印の一部が重なるように位置ずらしをすることで実現できます。

説明記事がネット上にいろいろあったのだが見つからない…汗

尚、ボタンの重なっている部分は「HTMLで後に書かれている要素」が優先されます。なので、重なりは最小限に抑える必要があります。

トップ専用CSSによるデザインの上書き

「Discover Shiretoko」はトップ以外のデザインでは、共通の背景画像が使われています。
半島のすみっこにくまさんがいるやつです。
ですが、トップページのみ「top.css」を後から読み込ませることにより、導入部をよりダイナミックな構成に変更しています。
こうすることで、作業量を最小限にしつつ、ページ毎の演出を調整することができます。

これはWEBデザイナーの間では割と常套手段なんですが、CSS勉強中の方も自分のサイトやブログなどでお試しください。楽しいですよ。

他にもレイヤー配置など、たくさんのテクニックが使われていますが、この辺で。ノシ

何故ここまで高度なテクニックを多用したのか。その答えははっきりしています。

「Mozilla Firefox」が最先端のレンダリング、スクリプト処理に対応できるブラウザであることを、自らのサイトで証明するため。

「Discover Shiretoko」は、制作チームの自信の現れなのです。

Twitterで記事を紹介して下さい（-人-）

LOCALは、北海道における技術系地域コミュニティ(ユーザ会、勉強会等)の活動を支援するとともに、コミュニティ間の連携イベント企画開催等を通して、地域を盛り上げていくことを目標とする有志の集まりです。

というわけで、札幌の技術屋さんはみんな大好き、LOCALの定例会を見学してきました。

私は委員会どころか高校の部長会議しか出たことがなく、しかもWeb制作以外はなかなか身につきません。

実際、定例会の内容の65%くらいはわかりませんでした。 :P

そんな無学なうぇびんぐですが、ただ見に行っただけでは本当に邪魔者です。
わかる範囲で感想を書いてみます。

LOCALの概要については、昨年OSC（オープンソース・カンファレンス）で発表された資料がとても参考になります。
北海道のWeb屋さんは是非一度目を通していただきたい。

• OSC2008島根での発表資料（PDFファイル・160KB）

この中で「属人性の排除」を目標にされている通り、定例会は全員参加の、ひじょうに活発なものでした。
イベントの開催、大学への広報、外部団体との折衝、NPO法人化に向けた事務手続きなど、広い年齢層の会員がそれぞれ協力しあって運営を進められている様子に驚いてしまいました。

また、前もってWikiにまとめた議題をプロジェクターで映しながらのスムーズな議事進行や、イベント参加者から集めたアンケートをグラフ集計し、成果や課題を共有しているのも興味深かったです。
自分も必要になったら参考にしよう…

先月開催された「LOCAL DEVELOPER DAY ‘09」は大成功だったそうですが、会員の皆さんは満足されていない様子。
（寒い上に地方の参加が望めない冬の札幌で、参加56人は充分凄いと思いますが…）
参加者の大半が大学のポスター等でなくtwitter等の口コミであったことも含め、「オフラインでの認知度をどう上げて行くのか」が当面の課題のようです。

私が興味を持ったのは、後半の議題です。
現状のLOCALのウェブサイトの活動報告を、レポート提出などでルーチン化するか、または委員会を設置するかという件でひとしきり議論になっていました。
結局結論が出ずに散会となりましたが。

この件に関しては、私的にはちょっと思うところがありました。

紙の広報は必要か

今のところはいらない気がします。

LOCALはWeb関連の技術者グループですから、Web以外の媒体を通さなければ興味を持たないような向きがLOCALまでたどり着き、趣旨を共感するとは思えません。

むしろウェブサイトそのものをどうするか検討するのはいいことだと思います。
やるなら二ヶ月分くらいずつウェブサイトのログをまとめて印刷して、大学やジュンク堂に置くような流れなのでしょうか。

ルーチンでいいのでは？

現状のLOCALのウェブサイトは、代表さんがactivityのページを手作業で更新しています。
これでは配信できる情報に限界がありますし、代表さんの視点のみで書かれていては「属人性の排除」から外れてしまうように思います。

半端なコミュでルーチンワークを採用すると、ちゃんと書かない人もいてモチベーションが下がってしまいます。
でもこれだけ個々の会員に個性と熱意があるのだったら、強制持ち回りの方が「自分も参加したいっス！」と思わせるような面白い活動報告になるんじゃないでしょうか。

PukiWikiはちょっと

技術屋さんたちは、PukiWikiが好きです。
データベースがいらないし、思いついたことを簡単にまとめられます。
実際私もWebで集めたtipsをためるのに利用しています。

ですが、wikiは活動趣旨、組織体系などの固定ページと、活動報告などの時系列ページがごっちゃになってしまいます。
フロントページ以外はGoogleには掲載されませんし、手作り感もぬぐえません。

率直なところ、私がLOCALをそこまでまとまった団体だと意識してなかったのは、このウェブサイトからしか情報を得ていなかったから、というのが多分にあります。

北海道の技術者の交流というのは私もいつも考えていることなので、LOCALさんにはこれからも、たくさんの技術屋さんに支持される札幌コミュの旗手であってほしいです。
Webまわり、何かできるようであれば微力ながらお手伝いしたいところです…
って自分の時間もうまく使えないくせに…

あ、あとLOCALのありんこ大好きです。ありんこグッズあったら買います。

Twitterで記事を紹介して下さい（-人-）

DevDo（北海道開発オフ）のメンバーで、LOCALの定例会を見学に行くことになりました。

で、札幌駅で待ち合わせということになったんですが

ばらばらいってもあれなので
20時に札幌駅西口のオブジェ近辺待ち合わせにしておきましょう
@smokeymonkey

の「西口のオブジェ」がなかなかイメージできません。
なんか混乱してきたんで、冒頭のような図を作りました。
オフ会のときなどに役に立つようであればご利用ください。

写真は下記URLから拝借しますた。

• https://tabidachi.ana.co.jp/card/488139
• http://www.satsueki.jp/feature/art/index.asp

札幌駅は南側東口と南側西口が全く左右対称で方角がわかりにくく、しかもどっちにも市民でも名前を知らないオブジェがあるので、こういう待ち合わせのときに困るのです。

一方は東口、もう一方は西口で待ってて、お互いに携帯で電話してるのに会えない…なんてことはざらです。

一般には
「大丸側の白いの / まるいの」「エスタ側の赤いの / あし」
とか言われてるらしく、それでどうにか通じそうです。

うちの家族間では妙夢お気に入りなので
「13時にみょーむ」
で通じますがw

Twitterで記事を紹介して下さい（-人-）