【第18回】北海道開発オフ

札幌市内の有志が集まって、二年半前に始めた勉強会もいつの間にか18回。
これまで参加してくれた多くの皆さんありがとうございます。

さて、→Pia-no-jaC←のボットもだいたいイメージした形になったので、今回から違う開発をしてみようと思いました。

「Twitterのステータスや発言から、トレーディングカードのようなものを生成するサービスを作れないか？」
というものです。

既出かもしれませんが勉強目的なのでｷﾆｼﾅｲ。

開発オフ中に作ったもの

私の話は長いので結論から。構想を練りながらざっくり作ってみたのがこれです。

Twitterの情報から戦闘力とか計算してみたい

公開されているTwitterIDを入力すると、直近200件の発言からそのユーザーの特徴を算出します。
適当にIDを入れて遊んでみてください。今の段階でもけっこう面白いです。

仕様を考えてみる

トレーディングカードというと、こんな特徴があったりします。

• 名前と姿
• レベル
• 属性（枠の色、隅に表示するアイコンに影響する）
• レア度（高いと背景がホログラムだったりする）
• 能力値
• 使える技

Twitterで属性といえばいわゆる「話題」です。
IT関連であったりビジネスであったり、恋愛やスポーツなどもあります。

Twitterで強さといえば「利用頻度」です。
一日のpost数、follow/refollow比、Reply、RTなどあります。
「多いほど強い」と定義するとボットが最強になってしまうので、総合力ってことになります。

レア度は単純にソフトバンクの孫さんなどのような、認証ユーザーやfollow/refollow比が極端な人ですかね。

実際にゲームができればいいですが、あくまでネタなのでそれらしく見せられるだけでも充分楽しそうです。

PEARはいりませんでした

PHPには「Services_Twitter」というパッケージがあります。

TwitterアプリケーションやWebサービスの構築を支援する便利なもので、午前中いっぱい使って使いこなそうとしたのですが、今回私が作ろうとしているものは公開情報でまかなえるので、そもそも認証がいりません。日に何度もアクセスしないと困るようなものでもありません。

なので、結局APIのURLを直接叩く方向で進めることにしました。

話題の傾向をどうするか

今はまだ構想段階なので、直近200postを単純にstrrpos関数で検索し、各クラスタを象徴するようなキーワードが何回ヒットしたかを数えているだけです。キーワードは今後MySQLなどで管理するつもりです。

傾向ごとに集計して、上位の傾向が「属性」ということになります。

@oikaさんからオフ中にもらった意見のように、発言時間帯なども集計できるとまた新しい属性ができそうです。

ボツ・保留など

枠のデザイン

IDをもとに、枠の細かいデザインが変わると楽しいかもしれませんよね。
最初はIDを16進数に変換して枠のカラーコードに…と思ったのですが、処理が難しそうだし、汚い色などが出そうでちょっと嫌です。

技

笑えるネタを考えるのが難しそうなので保留。

post時の感情

最初は簡単な言葉などで「発言の喜怒哀楽」を集計しようとしたのですが、「怒」が少ないのはわかりきってますし、凹みがちの人が「哀」と認定されたらかわいそうです；；
私も凹みがちなので嫌です；；

集計方法

ちゃんと正規表現検索を使った方がいいのかもしれません。
「キーワードがあるかどうか」を調べられればいいわけで、処理が重くならないかがいちばんの心配事です。

キーワードの選定

ビジネスやスポーツなどはわかりやすいのですが、アニメ・ヲタ腐女子・下ネタ・思想系のキーワードってどうすればいいんだ？などと悩んだりします。
ハッシュタグも集計対象にした方がいいな、なとど考えてます。

現時点ではここでタイムアップ。
開発オフだけのテーマのつもりなので実現するかはわかりませんが、久しぶりに仕事がらみ以外で興味を持っているのでいろいろ研究してみます。

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

ここ半年くらいかけて、ハード・ソフトともに制作環境の大幅な改善を進めていました。
先日新しいマシンに移行したことで、やっと一応の完了をみた感です。

何もないリアルデスクトップに満足してるうぇびんです。

まあ、裏側はまだこの有様なんですけどね…

美しさ、使いやすさ、価格にこだわって、半年間に選んだ周辺機器をまとめます。
アプリ編があるかは未定。
アフィリは一切ありませんので嫌儲の皆様もご安心くださいませ :P

PC : DELL Studio XPS 7100

クアッドコアCPUが入っているDELLの最新モデルです。
個人的にはInspironが好きなのですが、高度な実務には耐え切れないという話なので断念しました。
機能の割にお手頃なので、Windows7をProfessionalに、メモリを6GBに増設しています。

これのいいところは、トップ部分にヘッドホンやUSBのコネクタや、そういった周辺機器を置いておくトレイがあることです。机の上から細かい物がなくなってすっきりしました。

Web制作をはじめてからPCは四代目になりますが、これまで完全な新品を買ったことはありません。若干ロースペックのマシンばかり使ってきたので、特にOfficeやCS4の反応が鈍くて時間をロスしていました。
新しいマシンにしてから待機時間ゼロでサクサク。思い切って投資してよかった…＾＾

ディスプレイ：I-O DATA LCD-MF221X ブラック

札駅ビックカメラで20インチ以上の最安モデルとして売られていたものですが、MacBookと接続している切り替え器がアナログですし、Web制作は利用者の閲覧環境も意識しなければならないのでこれで充分です。

メニューボタンを枠の下に配した、スマートなデザインがお気に入りです。
背面のデザインもきれいなので、壁際にデスクを置いていない環境でもあまりメカメカしくありません。

画面が大きくなったのはいいのですが、左右幅が大きくなったせいか、ちょっと首が疲れますね。

キーボード：ELECOM TK-FCM015ホワイト

打鍵ミスが少なくなるといわれるアイソレーション設計を採用している、メンブレン方式のキーボードです。

お値段もお手頃で、女性にも満足のデザインですが、このキーボード、もっと重要なポイントがあります。MacBook Proにひじょうにキーピッチが似ているのです。外に出かけるときはMacBookのキーボードを叩くことになるので、ここまで似ていると助かります。そんなわけでMacBookとの両刀使いさんにはおすすめです。

欠点はEnterキーが他のキーボードと比べて小さいことです。慣れるまで打鍵ミス連発してましたw
あと、男性にはキーピッチが狭いかもしれません。

マウス：バッファローコクヨサプライ BSMLU04 ホワイト

コードに余裕がある、有線レーザーマウスです。5ボタンあるのですが4と5使ってませんwww
単純に、グリップの握りやすさ、使いやすさで選択しています。前のマウスは小さすぎたので、これに変えてから肩のこりが軽減されました。

ホイールを傾けると横スクロールができるのですが、Win7にしてからどうも不調です。最新のドライバを入れた方がいいかな。

MacBookスタンド：フォーカルポイントコンピュータ BookArc

MacBook Proをクラムシェルモード（閉じて外部モニタにつなぐ）で使うために作られたスタンドです。
これが届くのは明後日なのですがおまけ。現状はブックスタンドでごまかしてます。

クラムシェルモード用の縦置きスタンドをいろいろ当たってみたのですが、これ以上に良い物が見当たりませんでした。

MacBookのリンゴマークをまっすぐな向きに置くには、廃熱口を下にしなければいけません。リンゴが隠れないように、かつ下を浮かせた状態で保持できるスタンドというのは、これの他にはバルミューダデザインの「floater」シリーズくらいしかありません。
アルミモデルは猛烈に高く、プライウッドモデルはMacBookとの相性今ひとつです。

そんなわけで、女性的な形状も気に入ってますし、フォーカルポイントの方にしました。

…PCは分割にしたとはいえ、トータルの出費とか考えたくもないです ((( °Д°))) gkgkbrbr

ただ、やはり選び抜いた道具というのは確実にお仕事を楽にしますね。
単純に高い物を選ぶのではなくて、自分の使い方、環境に合ったものを慎重に選ぶことの大切さを痛感します。

そんなわけで投資を回収すべくお仕事に戻ります　λ…. ﾄﾎﾞﾄﾎﾞﾄﾎﾞ

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

文字化けやエラーや条件分岐でうんうん悩んだりしながら、何とか形にできましたが、今度受注するときは、もっと早く作れるようにしないと全く元が取れません…

プログラミングについてはこれまで本格的な業務にもしていなかったし、ほぼ独学でやってきました。
もちろん、基本的なセキュリティ対策はできるだけ勉強しているのですが、いわゆる「あまりサンプル集には載ってない細かいこと」がいろいろとわかりません。

開発オフに行くたびに聞くのを忘れてしまうので、めもめも…φ(。。

変数の命名ってどうしたらいいのだろう

今のところ、同じ関係のものは接頭辞を揃えて

$hogeCnt / $hogeTitle

のような感じで、二単語目以上になったらキャピタライズしたりしてます。
でも処理が長くなると、どんどん命名がぐちゃぐちゃになってきてしまって…

$fuga['cnt'] / $fuga['title']

みたいに配列で管理すべき？

データベースの接続と切断

データベースを利用するときは、まずPDOなどで接続するのですが

$piyo = new PDO('mysql:host=' . DB_HOST . '; dbname=' . DB_NAME . ', ' .  DB_USER . ', ' . DB_PASS);

一定の処理が終わったら都度切断した方がいいのでしょうか。
PHPスクリプトの先頭で接続、最後で切断…とかまずいでしょうか。

一時変数

複数の変数を組み立ててSQL文やURLを作るときは、一時的な計算のために変数を作ったりするのですが、万一のファイル改ざんが怖くて、処理が終わったらすぐunsetで消してます。

unset($hoge, $fuga, $piyo);

もちろん、クラス定義してプライベート変数にするのがいちばんだろうと思うのですが、PHPのサンプルやTIPSを見ても、一時変数はそのままになっています。
ここまでする必要はないのでしょうか。むしろ処理の無駄？

$hoge = NULL;

それとも、ぬるぽにした方がいいのかな。

三項演算子が嫌い

$hoge = ($fuga == 'abc') ? 'abcが入っています' : '別の値が入っています';

だって一行にされるとなんか読みにくいし。

if($fuga == 'abc')
  $hoge = 'abcが入っています';
else
  $hoge = '別の値が入っています';

だと、プログラマさん的には冗長なんでしょうか。

md5って大丈夫なのか

PHPサンプルで、パスワードの暗号化などによくmd5が使われているのですが、みんなが使っているアルゴリズムを取り入れてしまって大丈夫なんでしょうか。
他にもsha1とかいろいろあるらしいですが、md5が選ばれる理由って何？強固だから？

ログイン認証にはセッションに何を渡したらいいんだ

いやいやいや（°Д°三°Д°）
どうしたかは書かないです書けないです。

ユーザー登録時にDBにパスワードとは別のランダムな認証キーを保管しておいて、ログインのときはそれを発行した方がいいのでしょうか。
んー、この辺は簡単なCMSをいくつか自分で見て調べてみるかな。

難読化って？

ソースコードの著作権の話をしていたら、こいわさん(@koiwa)が教えてくれました。

それって、プログラミングでもするのでしょうか。
a-blog cmsは暗号化されていますね。でも読みにくくなった分、保守が大変そうです。

考えはじめたらどんどん出てきそうですが、この辺でやめておきます…

PEARもCakePHPも何それおいしいの？な今は、まだまだ勉強が必要そうです。
それでも、お仕事でプログラミングをすると「他の人が利用することを考える」分、確実にスキルアップできることはわかったので、これからも時間を見つけていろいろなことに挑戦してみようと思います。

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

新しい名刺を注文しました。

右上の「おもて」「うら」は本当に名刺に書いてありますwww

半年ばかり前、前回のデザインの名刺を持って、ある会社の社長さんと顔合わせに行ったところ、社長さんはこのように仰いました。

自分は仕事柄、何百枚も名刺を受け取るのだけど、デザインが良くても、業務内容や自分に関することが何も書いていない名刺が多い。だいたいそういうものはフォルダに入れたらもう忘れてしまう。
名刺は人に会ったときに配る大事なものなのに、皆、お金をかけなさすぎる。一枚数十円くらいではないか。いい紙を使って、顔写真や裏面に業務内容を載せるのは絶対必要だと思う。二つ折りにするくらいの勢いがあったっていい。

そんな話をしながら、社長さんは私に名刺を渡されました。
顔写真と業務内容が大きく書いてある「企画・マーケティングをする人の名刺」です。
しごくもっともなお話だったのですが、それは「デザイナーの名刺」ではありませんでした。

私は適当なオフ会でも、正式な名刺を配っています。
本当にお仕事というのはどこから来るかわからないからです。

一方で、私は名刺はトレーディングカードのように「もらってうれしい」ものでなくてはならないと思っています。
ユルい場で、ビジネス色が強い名刺を配るのは粋じゃないですし、縁があってお会いした人たちに「デザイナーのサービス」を提供したいのです。

社長さんのお話を参考にしたうえで、私らしい名刺をいろいろ考えて、できたのが記事の最初にある名刺です。

今回力を入れたのは裏面です。
一般の名刺の裏面は、業務内容が文字だけでずらずら書いてあったりで、どうも面白くありません。
アイコンなどを使って私がやっていることがイメージでわかるように、ふと裏返したときに「ちょっと得した気分」になるようにしてみました。

名刺は、自分の世界観を表現する意味でも、デザインの勉強になる意味でも、デザイナーには大切なものです。今後もバージョンアップして行こうと思います。

余談ですが、CSS Niteでいただいた、とみたちひろさん(@tommmmy)の名刺がとてもすてきだったのです。
とみたさんのウェブサイトのデザインがそのまま名刺バージョンになっていました。

ウェブデザイナーは、自分のサイトのテイストを名刺に織り込むのもけっこう大事なポイントですよね。

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

デザイナーの市村さん（@MarlboroLand）による「WebオペレーターのためのWebデザイン勉強会」の後半、実技編です。

＞＞前編の理論編はこちら

市村さんはIrrustratorを使われているので、実際にイラレを操作しながらの説明となりました。
記事中に添付している画像は、私が家で再現したものです。

ボタンのサイズ

最近のボタンは高さがどんどん短くなっている

→グローバルナビの役割が小さくなり、コンテンツを見せることを重視するようになった

配色について

※記事冒頭のスクリーンショットを参照

原色は避けるべき。色選択はRGBよりHSBの方がいい
90%くらいに落とすとちょうどいい

明度と彩度を保ったまま色だけ変えることができる
ただし緑は彩度、黄色は明度が高すぎるので調整が必要

グラデーションの調整

白→黒のグラデーションはまずない
グラデーションのトーンカーブは全体に柔らかく、いちばん下（濃い部分）のカーブを若干きつめに

→横に回転した時の様子をイメージしてみよう

文字の配置

新ゴ／リュウミンを中心に、モリサワフォントを使うのが無難
（ウェイトを細かく指定できる）
モリサワがないときは、Adobe製品なら小塚ゴシック／明朝があるのでそれで代用

文字のウェイトを細めに、文字を大きめにするとすこしおしゃれに見える

英文字が混在する場合

英語のみHelveticaかArialに、文字サイズを若干大きくすると収まりが良くなる

カーニング

古いバージョンのIllustratorは文字間隔が不安定なので
「イ」「ト」などの隙間が広くなってしまうことがある

一文字ずつの微調整が必要　文字を選択した状態でAlt(option)＋左右キー

立体感を出す作り込み

PCの原点は左上／文字は左上から読む
…なので、左上を光源にするとバランスがいい

1. 1px内側に食い込ませるように、上と左に明るい線を引く
2. 1px内側に食い込ませるように、下と右に暗い線を引く（縁ギリギリに引くとはっきりしない）

ボタン上の文字に立体感を出すコツ

飛び出して見えるようにする

透明度を下げたドロップシャドウをかける

凹んで見えるようにする

1. ぼかしを0、色を明るくしたドロップシャドウを右下に向かってかける
2. ぼかしを0、色を暗くしたドロップシャドウを左上に向かってかける

フラットだけど読みやすくする

ボタンの縁に明るい境界線を細く引く or 光沢を出してみる

上から下のグラデーションのTIPS

上：白っぽい色
→　真ん中：基準色
→　下：彩度を少し高く
下から光っている印象になる

定番の矢印などの装飾

○ ＋　− ＋　>
▲を横に倒す

PhotoShopのオートシェイプに太い矢印があるので調整する手も

※今見ているブログの、右のメニューの矢印を見てみてください＾＾；
※矢印のベクターグラフィック素材は、検索をかけるとけっこう手に入ります

グローバルナビゲーションに応用してみる

横並びのパターンがほぼ主流→誘導リンクの集約

1. メイン枠と同じ幅、ボタン高さのグラデーションの棒を作る
2. シェイプをコピーして「段組設定」で均等に分割する
3. 分割点に区切り線を引く／二本引いて、左を少し暗く、右を少し明るく

Σ（°Д°; 段組設定知らなかったーーーーーーーー！！

※CS4以降だと上メニューの「編集」→「パス」の中にあります

市村さんのおすすめの本

WEBデザイン 不朽の表現（MdN刊）

今回の内容がだいたい網羅されている
DTPのデザイン本も買った方がいい。Webデザインの本はサンプルがしょぼい。

レポートは以上です。

「今回はどのくらい来るかわからなかったので初歩的なテーマにしたが、好評ならもう少し突っ込んだ話をするかも」ということでした。

イラレやフォトショの基本的な機能までは専門学校や勤め先で教われるものの、いわゆるTIPSであったり、理論であったりは実務経験を積まないことには身につきません。
私もコーディングのお仕事が多くなり、きれいなデザインカンプに触れることはできるのですが、なかなかそのテクニックを勉強することができない状況です。
デザイナー寄りの勉強会も定着して欲しいと思います。

@MarlboroLand 普通にReplyくれたらいいですよwwwwwwwwwww

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

デザイナーの市村さん（@MarlboroLand）がWebデザインの勉強会を開かれたので、参加してきました。
市内のレストランの一室にモニターを持ち込んでの、ごく小さな勉強会です。

WebオペレーターのためのWebデザイン勉強会開催 | くずWebデザイナーのなれの果て

”くずWebデザイナー”とか”ネガティブおやじ”とか名乗られてますが、市村さんはプロのWebデザイナーで、SaCSSでも日本のWebデザイントレンドについて、ライトニングトークをされてます。

初回ということで比較的初歩的な話になりましたが、かなり密度の濃い内容だったのでレポートします。
この記事は前半の、理論に関するまとめです。

勉強会の目的

Webデザインがうまく行かない悩みをみんなで考え解決していこう

コーダーに求められるスキルは？

• 専門的な知識が必要
• 最低でもXHTML+CSSが必須
• プログラムは習得に時間がかかる
• サイト構成などの知識も必要

→要求されるレベルが上がり何でもできないといけない

では、デザイナーに求められているスキルは？

• デザインに答えはない／センス（感性）が必要
• DTPスキルが希望されている
• サイト構成からの知識が必要
• アイコンなどの装飾技術

→時代に合わせたデザインを作り出せる感性や発想が必要

デザイン習得のための原則

1. やってみること
2. 感じること
3. 調べてみること
4. 創ること
5. 観ること
6. 続けること

→とにかく思い立ったら行動してください（市村さん談）

制作時必要なソフト

1. Firewoks　スライスの書き出しが早い
2. PhotoShop　画質が高い
3. Illustrator　文字組がきれい

Illustratorでテキスト作り、PhotoShopで調整、Firewoksでスライス…という流れだったが、各ソフトの向上で変わってきている

Webデザインの変遷

※記事冒頭のモニター写真を参照

制作ソフトが普及してなかったり、画像形式テーブルレイアウトなど制限が多かったため、デザインにもその影響が出ていることが分かる

→モニタの肥大化による詳細なデザインの実現
→（ユニクロなど）DTP寄りのデザインが要求されはじめている

見ておいた方がいいサイト

• コリス
• WebDesignDetabase

Webデザインの基本

モニタ横幅＝1024pxが最も多い

コンテンツ幅＝960px
様々な数で割れ、グリッドシステムを組みやすい

メインコンテンツの幅は一行何文字入ればいいのか？

この問題に答えはなくまちまち／幅から算出するしかない

最近のデザインの傾向

• フッターにサイトマップが入っているデザインが非常に多くなっている
• サイトの肥大化に伴いグローバルナビの役割が変わってきている（後述）
• 特に誘導したい、必要とされるリンク／最上層のカテゴリー一覧
  それより下層のサブカテゴリーを全てフッターに掲載する

Webデザインでつまづきやすい場所

装飾の方法

ボタンやバナーなどの作り方を覚えよう

サイトレイアウト

ヘッダやフッタなどの必要なコンテンツの配置方法を覚えよう

レイアウトバランス

配色による影響や見出し、文字の組み方を考えよう

コンテンツの組み立て方

コンテンツ情報をまとめサイトマップを作ってみよう

その他：重要だけど学ぼうとすると時間のかかるもの

文字の形式やウェイト
カラーキーワードや色に関する人への影響
画像の加工方法 etc…

グローバルナビから先の構成の変化

• むかし：　1ページに全て載っている
• 少し前：　最初の1ページが載っている
• 現在：　子ページのインデックスが掲載されている

→キーワード細分化によるSEO的な利点
→腹黒い話見積がちょっと増(ry

市村さんが最近作ったサイト

ブレインワークス
最近のサイトデザインのトレンドを踏襲してみました

• 直線的なデザイン
• 整理されたグローバルナビ
• フッターにサイトマップ

>> 実技編につづく

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

iPhone／iPad用のアプリケーション「iBooks」がリリースされました。

iBooksはストアから本を購入するだけでなく、自分で用意したEPUB形式の電子書籍を読むこともできます。最近では、既存の文書を自分で電子化することを「自炊」というらしいです。

EPUB形式の電子書籍を作れるフリーウェア「sigil」を使って実際に作ってみたので、手順やポイントなどまとめてみます。

「sigil」は、ブログやDreamweaverと同じ感覚で電子書籍を作成できるソフトで、HTMLなどのデジタル文書からの変換に適しています。Win／Mac／Linuxをカバーしています。

sigil – Project Hosting on Google Code

今回のサンプルは私の好きな短編「山月記」にしました。

実は青空文庫にはEPUB変換ブックマークレットが既にあるのですが、今回は敢えて自炊してみます。

最初のテスト原稿が@smokeymonkeyさんの「妻は俺の嫁」だったことは内緒です。

いちばん簡単な作り方

「sigil」をインストールして起動すると、すぐに編集画面になります。

通常はプレビュー画面モードになっていますが、Web制作のスキルがある人には分割モードか、コード画面モードの方が取っ付きやすいと思います。
モードは画面の上の方にある、本と<>が重なったボタンで切り替えできます。

ひとまず、HTMLを<body>タグ内にコピペしてみました。

書籍名／著者は、メニューバーの「Tools」から「Meta Editer」を選択すると設定できます。
書籍名を入れておかないと、iTunesやiBooksで見たときに何の本だかわかりません。忘れず設定しましょう。

左上の大きなボタンの左から三番目をクリックすると、すぐEPUB形式の文書が書き出されます。
このファイルを音楽ファイルなどと同じ感覚でiTunesライブラリに読み込み（自動でブックとして扱われます）、iPhone／iPadと同期すれば、iBooksのリストに作った書籍が登場して、読めるようになります。

使えないHTMLタグに注意

…と言いたいところですが、私の場合、最初は失敗しました。

何故かルビ部分で改行されとる |||orz

どうも、<ruby>タグが入っているとiBooksでは不具合が出るようです。
余分なタグやインラインスタイルが入っているものをそのまま使うと、読み込み速度が遅くなるという話もあるので、一旦テキストエディタに貼り付けてスタイルをリセットした方が無難だと思います。

章ごとに分割してみる

「山月記」は章立てでないので文章を貼り付けただけでもいいのですが、途中で強制的にページを分割することもできます。

左のツリーの「text」フォルダを右クリック→「Add New Item」を選択でXHTML文書がひとつ増えます。文書と文書の間は、ビューワー内で強制的にページ送りとなります。
右上の大きなボタンの中に「自動でセクションを分ける」ボタンもありますが、意図しないところで分かれてしまうことが多いので手動でやった方がいいと思います。

また、文中に<h2>以下の見出し要素があると、要素の内容がiBooksの目次に反映されます。
見出しは、ソースコード画面で直接マークアップするか、テキストをドラッグ→左上のプルダウンリストから任意の見出しを選択で指定できます。

画像を貼る

文書内に画像を貼ることも自由にできます。
私は外字の部分に使用してみました。
高解像度の画像を貼るとiPadでもきれいに見られますが、書籍の総ファイルサイズに影響するので、コミックなどの場合はサイズダウンなどの工夫が必要そうです。

CSSを指定する

EPUB形式の電子書籍の実態は、XHTML文書です…
ということは、CSSの定義も可能です。

左のツリーの「Styles」フォルダを右クリック→「Add New Item」でCSSが新規追加されます。

これだと自動的にHTMLにリンクしてくれないようなので、私はコード画面を開いて、いつものWeb制作と同じ感覚でhead要素内に<link>を追加しました。

iBooksの場合、既存の枠にインラインフレーム風にHTMLが埋め込まれる形になります。
そのため、文字色と背景色は全く意味がありませんが、本文の基本文字サイズ・行間・見出しの体裁を調整したり、1ページ目だけ体裁を変えたりといった「sigil」の内部機能だけではできない細かな調整ができます。
コーディングのスキルがある人にはおすすめです。

そんなこんなで、自分で本まで作れる時代になってしまいました。
まだ表紙を作る方法がわからないので、その辺りも時間があるときに試してみようと思います。

「iBooks」がリリースされたものの、今のところストアでは日本語の本をほとんどリリースしていません。
ですが、既存の本のリリースを待つよりは、自分がいつでも読めるようにしたいテキストを自炊したり、自作の小説やテキストを電子化してセルフリリースするのが電子書籍の醍醐味であり、本当の楽しみ方なのではと思います。
2chの長編読み物やコラムサイト、CMSのオンラインマニュアルなど自炊したいところです。

ただし、著作物を扱うときは慎重に。
iTunesのときと同じように、あくまで個人の範囲内で楽しみましょう。

著作権がなくなってない作品を不特定多数に配布とか、もってのほかですよ！
っていうか私が納品したサイトのコーディング丸パクして別のサイト作ったやつ出てこい（微笑）

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

講師：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で記事を紹介して下さい（-人-）

ついカッとなって、
「日本のコーダーは、CSSのfont-family指定にメイリオとヒラギノ角ゴのどっちを優先しているのか」
という問題を本気で調べることにしました。

主な調査資料は、CSS Nite LP9 連動 第2回コーディングコンテストの応募作品です。
上位入賞者と、参加作品のNo.1〜20、それにCSS NiteLP9 / 9.2の一部出演者のサイトのfont-family指定を抜粋し、私も含めて計45人のコーダーの統計を取りました。

現場でコーディングをしている人ばかりなので、かなり信憑性のあるデータなのではないかと思いますが…
結果は追記以降で。

はい結果どーん。

圧倒的にメイリオが多い |||orz

コンテスト入賞者、出演者のfont-family指定の詳細は、別途まとめています。

資料：日本のコーダーのfont-family指定

※CSSのソースに著作権はないものと考えていますが、問題があればご指摘ください

font-familyを指定しなかった場合、MacOSのSafariは明朝体になってしまいます。
また、もう過去の話になりつつありますが、MacIEでは日本語フォントの指定がないと、input要素などで不具合が起こるバグがあります。
このため、指定なしの人はほとんどいませんでした。

私のように「MacにOfficeを入れた環境だとメイリオになってしまうのが気になる」という人は、ヒラギノ角ゴを優先にしているのかもしれません。
WindowsXPにヒラギノが入っていると、もっと見栄えが悪くなるのですが…

細かい優先度、指定しているフォントに関しては、定石やトレンドと言うものがほぼなく、完全に個々のコーディングポリシーにゆだねられているようです。
英語圏のアクセスを想定してか、Vistaの英字フォントである「Segoe UI」やMac OSの「Lucida Grande」を優先している人も見受けられました。

結局のところ、OfficeがMac OSのフォントに介入してくる現状がある限り、コーダー側としては自己判断するか、JSなどで判定して、OSがMacだったら別途CSSを読ませる…などの対応をするしかないと思われます。

この辺り、各コーダーの皆さんが何故最終的にこの形になったのか、というのをブログや勉強会などで発表しあうと、より良いトレンドができるのではないでしょうか。

「clean」だけ何のフォントなのかわからないのですが…教えて偉い人！

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

先月書いた「WordPressを一部のディレクトリのみ有効にする」カスタマイズの完全版です。

前回の記事では

• 未保存の記事のプレビュー
• ブログ内検索

ができませんでしたが、今回はそれも可能になっています。
ただし、サイトのホーム（index.html）にも細工が必要で、手順も複雑になります。

詳しくは追記以下で。

1: WordPressの設定

WordPressを下層ディレクトリに置く

WordPress本体はひとつ下層に設置します。
この例では「wordpress」というディレクトリに設置したとして話を進めます。

※私はセキュリティ上の理由などで、ディレクトリ名＝CMS名にしないことが多いです

「WP No Category Base」を追加する

このカスタマイズをするには、プラグイン「WP No Category Base」が必要です。
これはWordPressで出力されるカテゴリーアーカイブのURLから、最初に必ず付与される「category」を取り除きます。
若干負荷が上がりますが、CMS的な構築をするには必須のプラグインです。

WordPress公式のプラグインディレクトリで入手できます。
http://wordpress.org/extend/plugins/wp-no-category-base/

特に設定は必要なく、アップロードして有効にするだけでOKです。

一般設定／パーマリンク設定を変更する

次に、WordPressの「設定→一般」と「設定→パーマリンク設定」を変更します。

一般設定

「ブログのアドレス」を「サイトルート」に設定します。
最初の図の「www」のURLが「http://example.com/」だった場合はそれを入力して更新します。
このとき、サイトルートに.htaccessが書き出されます。
自作の.htaccessを置いていると上書きされてしまうので、前もって避難させるか、書き込み禁止にしてください。

パーマリンク設定

「カスタム構造」にチェックを入れて、以下のように記入します。

/%category%/%post_id%/

ブログのURLが「http://example.com/」だった場合、カテゴリーがc1、IDが6の記事のURLは
http://example.com/c1/6/
となります。

ここまで作業したら、サイトルートに書き出されている.htaccessを削除してしまいます。

2: .httaccessの設定

以下のように記述した、.htaccessをサイトルートに新しく設置します。
（既にある場合は追記します）

AddType application/x-httpd-php .html

# BEGIN WordPress

RewriteEngine On
RewriteBase /

RewriteRule ^\?([a-z0-9]+)=([0-9]+) wordpress/?$1=$2 [L]
RewriteRule ^(date|tag|feed)/(.*) wordpress/index.php [L]

RewriteRule ^(c1|c2|c3|c4)/(.*) wordpress/index.php [L]
RewriteRule ^category/(c1|c2|c3|c4)/(.*) wordpress/index.php [L]
RewriteRule ^(c1|c2|c3|c4)/feed/(.*) wordpress/index.php [L]


# END WordPress

AddType application

HTMLファイルでPHPスクリプトを使用可能にします。
ホームが「index.php」で構わない場合は必要ありません。

RewriteBase

「/」はサーバールートからの相対パスです。
もしもサイトルートが「test」だと「/test/」となります。

RewriteRule

条件を満たした場合に、WordPressのindex.phpを呼び出す、という指定です。
最初の二行は変更しないでください。

三行目以降の(c1|c2|c3|c4)に、WordPressを有効にしたいカテゴリー（ディレクトリ名）をパイプ区切りで指示します。
「information」「blog」なら(information|blog)と書きます。
「information/aaa」「blog/bbb/ccc」などの下層ディレクトリもWordPress配下となります。

アップロードしたら、.htaccessのパーミッションを444にしてください。
書き込み可になっていると、WordPressの設定を変更したときに上書きされてしまいます。

3: index.htmlの設定

最後に、サイトのホームにあたるindex.htmlに細工をします。

ファイル名を変更する

index.htmlの内容はそのままで、ファイル名を任意に変更してください。
ここでは「home.html」に変更したものとします。

このままだとhome.htmlでもアクセスできてしまうので、気になる場合は「include」などのディレクトリに入れ、アクセス制限をかけて対応してください。

新規にindex.htmlを作成する

index.htmlがなくなるので、以下のように記述したindex.htmlを新規に作成し、サーバーにアップします。

<?php
if(($_GET['s'])||($_GET['p'])) {
	//検索かプレビューのGET値があればWordPressとして処理
	define('WP_USE_THEMES', true);
	require('wordpress/wp-blog-header.php');
} else {
	//なければ静的コンテンツを呼び出す
	require('home.html');
}
?>

コメントで書いてある通りですが、検索かプレビューだとWordPressとして処理を開始し、それ以外であれば先程リネームしたHTMLをそのまま出力します。

ここまでで作業は終わりです。
正常に動作していれば、

• 未保存のプレビューと検索結果
• 指定したカテゴリーと関連フィード
• 日別アーカイブ
• タグサーチ

のみWordPressが起動し、それ以外は静的コンテンツがあるサーバーと同じ挙動になります。
（例えカテゴリーを作っていても表示されません）

4: 注意点

1. 一般的なサーバーで動作確認をしていますが、設置条件やサーバー状況によってはうまくいかないかもしれません。必ず検証してください。
2. WordPressの404ページは有効になりません。必要な場合は.htaccessにエラーページ指定を追記して自作してください。
3. HTML/PHP関係は、.htaccessの指定方法が上記と異なるサーバーも多いです。サーバー会社のマニュアルをチェックしたり「サーバー名 html php」などでグーグル先生にお尋ねしてください。

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