会社での開発環境にEclipse+Aptanaプラグインを使っているので、自宅の環境にもAptana Studioをセットアップすることにしました。
http://www.aptana.org/

Aptana Studioではエディターのカラーテーマを言語ごとに設定することができます。
その設定方法とおすすめのテーマを紹介します。

設定方法

Aptana Studioの設定画面（Preference）から変更できます。
設定画面を開いたら、下記の場所を開いてください。
言語単位で設定できるので、HTMLエディタの場合をとりあえず紹介します。

[Aptana] > [Editers] > [HTML]

あとは画面に書いてある通り、変更したい箇所の色を変えていけばOKです。

しかしすべて細かく変更していくのも大変なので、テーマファイルをインポートする方が簡単です。

おすすめのテーマ

Aptana Studio IDE Dark Color Theme
http://www.nightlion.net/themes/2009/aptana-dark-color-theme/

記事の最下部にある Download からファイルをダウンロードできます。
ダウンロードしたファイルを展開すると、言語名.colというファイルが確認出来るかと思います。
あとは先程の設定画面にある [import] から各言語ごとのファイルをインポートすれば完了です。

他のテーマも紹介しておきます。
http://www.johnrockefeller.net/aptana-color-themes/

あまりネットで検索をかけてもこうしたカラーテーマが見つからなかったのですが、他にもご存知の方がいれば教えてください。
http://www.twitter.com/hiloki

という話は以前ブログ記事でも紹介したこともあるんですが、このインクというのが人の心に染みとして残るようなデザインを、みたいな感じのイメージが湧いてきて。染みというとネガティブな感じもしますが、それくらい頑固な汚れみたいなしつこさがあるといいんじゃないかなぁと思ってます。

ロゴマークのお話

僕とこのマークを結びつく人が数人はいるかと思うのですが、なぜこのマークか、という話。
元々昔ブログで使ってたのは下記の形状のマーク。

これを作った頃くらいから市松模様が好きで、なんというかロックなパンクな感じが好きだったんでしょうね。そこに赤色を足した。で、その配色もあるバンドの影響。

最近めっきり活動がおとなしくなった？ The White Stripes です。赤っていうのが情熱的で良いなと。インクとしても印象的な色。
そこから何かのきっかけで丸くなったわけなんですが、たぶんそのきっかけもとあるバンドかもしれない。

The Jam ですね。彼らのモッズと呼ばれるファッションの象徴だった、イギリス空軍のラウンデルの影響ですね。影響というかトレースじゃないか的な感じですが。
正直なところ、独創的なものでもないのですが、このマークを名刺にも使い始めて相手に印象付けはできてきたように思います。実際僕を直接しらなくても、このマークのブログをつい最近みました！とか嬉しいかったですね。本当に僕のブログかどうか別にして。
当時のデザインデータはきれいな形で残ってなかったのですが、数年前のOpera Web標準コンテストで優秀サイトに選んでいただいたときのキャプチャで見られるかと思います。
って、左上で見切れているじゃないか。丸いのって、なんとなく全体でバランス取りにくいんですよね・・・。

新しいマーク

今回リニューアルするにあたって、ロゴマークをどうしようかと悩んだのですが、もう少しちょっとひねりが欲しいなぁというところで考えなおしました。というかてっぺんをちょっとつまんでみました。

それがこれ。なぜかこれは何かの音楽や文化の影響でもなく、ふと浮かんだものです。なので後付なわけですが、こうした水滴状なのはインクとしてはアリ、なんじゃないかと思ったのでこれからはこのマークでいきます。なんかかわいくないですか？

ロゴタイプの方は？

ロゴタイプという言い方が普通かわからないですが、要するに inkdesign という文字の部分。
このフォントファミリーの変遷としては、Arial, Futura, Georgia(bold) という選択。インクということで Script 系や手書き形のフォントも考えたのですが、ちょっと癖がありすぎて先程のマークがいまいち活きてこないんです。

最近までよく使ってたのが Georgia でしかもBold 。これも十分に主張しそうな感じですが、ちょっと足の部分がつながった感じが Script とはまた違う文字のつながりができて、なんか気に入ってました。

今回はこっちも変更。マークも変更するし、というのもあるんですが別の理由としては Georgia のライセンスがいまいちよくわからないというのがあります。
（参考になりそうなソースを紹介したいところですが、やっぱりよくわからなかった・・・）

最終的に選んだのは、Fontin Sans です。

なんとフリーで個人・商用利用もOK。※再配布とか販売はダメ。
さらに素晴らしいところはFlashやPDFへの埋込みも可能、ってところと、もっと嬉しいところはCSS3のWeb Font ととして利用できること。

実際どのように取り入れるかは未定ですが、見出しなどに使えるとちょっといいかもしれないなぁと思ってます。

例年、年が変わる頃にブログのリニューアルをしてきたような記憶があるのですが今年はまったりと。
あと2010年の抱負でも書けば良いかと思うのですが、公言しても実行できないことが多いで、特に書かないでおこうと思いましたが、このブログをもうちょっとまともに更新をするというのは頑張ってみたいものです。

あとはProject 365もぐだぐだなので、今年こそは・・・。
http://365.hiloki.me/
※これだけ毎日撮るものがないというのは、毎日がそれほど変化がないということで、それはそれで悲しいと今思いました。

2010年は「休」な年にしたいと思いつつ、何か結局色々やってるんだろうなと思います。
オンラインでもオフラインでもinkdesign と hiloki を本年もよろしくお願いいたします。

このブログはhetemlを使っているのですが、借りているサーバーのMySQLのバージョンも古く、「MySQL 4.1.2以上」というWordpress2.9の要件が満たせてないことに気づきました。
あとPHP5前提のプラグインが増えてきたり、Wordpressの次期バージョンもPHP5へということのようなので、PHP5にも対応しておこうと諸々の対応をしました。

MySQL5のデータベースを新たに作成し、旧MySQL4の方のデータを移行する

hetemlの管理画面にログインをして、まずはデータベース側の作業をおこないます。
下記の手順で作業をおこないました。

1. データベースの管理画面から新しいMySQL5のデータベースを作成しておく
2. 現在利用しているデータベースのphpMyAdminに入りまるっとエクスポートする
   ※たまにエクスポートしたデータが文字化けしてしまうなどのトラブルに合う場合は、SQL Buddyの方を使うと上手くいく場合があるようです。（こちらは当方では試していません。）
   参照：hetemlのWordPress 2.9 への自動アップグレードで、MySQL4から バージョン5への移管
3. エクスポートしたSQL冒頭の「CREATE DATABASE」をコメントアウト（「– 」を行頭に）で、「USE」の方を新しく作ったMySQL5のデータベース名に書き換える
4. 新しく作成したMySQL5の方のphpMyAdminに入り、先ほどエクスポートして編集したSQLをインポートする

ちなみにエクスポートしたSQLはこの先のWordpress2.9へのアップグレードのためのバックアップとして残しておいてください。

PHP5を利用するための.htaccessをルートに置く

これについてはhetemlのヘルプにありますのでこちらを参照してください。
レンタルサーバー「heteml」 – PHPのご利用方法について

Wordpressの2.9へのバージョンアップ

今回は管理画面からの自動アップグレードでやってみます。
アップグレード作業の前にひとつファイルを修正。

最初にデータベースを新しいものに移行しているので、既存のwp-config.phpに書き込まれているデータベース情報も書き換えないといけません。

/** WordPress のデータベース名 */
define(‘DB_NAME’, ‘新しく作成したデータベース名’);

/** MySQL のユーザー名 */
define(‘DB_USER’, ‘新しく作成したデータベースのユーザー名（hetemlの場合データベース名と一緒）’);

/** MySQL のパスワード */
define(‘DB_PASSWORD’, ‘新しく作成したデータベースのパスワード’);

/** MySQL のホスト名 (ほとんどの場合変更する必要はありません。) */
define(‘DB_HOST’, ‘新しく作成したデータベースのサーバー名’);

あらかじめこれをやっておきましょう。では続きは下記。

1. データベースのバックアップ
   （※先ほどデータベース移行時にエクスポートしたファイルが残っていると思うので、それでOK)
2. 各Wordpress構成ファイルのバックアップ
3. 利用中のWordpressプラグインの無効化
4. Wordpressの管理画面からアップグレードを実行
   （※「WordPress 2.9 が利用可能です ! アップデートしてください。」のリンクから）

幸い今のinkdesign.jpはほとんど汚れのない状態だったので非常にスムーズにアップグレードができました。

さてWordpress2.9の更新箇所

公式の情報は下記。
http://ja.wordpress.org/2009/12/19/wordpress-2-9/

個人的には「ビルトイン画像エディタ」が便利そうですね。アップロードした画像をその場で編集できる。
あと気になっているのは「rel=canonical」対応だけど、どういうことだろ？デフォルトテンプレートでそういう記述があるのか、それとも自動的（強制的）に書き込むのかな。
それだとちと困るときもあるような…またソースコードを追いかけてみよう。

さて結論からいってしまうと、カテゴリを記事のテーマとして作成し、その下に記事を置くということは基本的にしません。記事の分類はタグで。
Wordpress的には「blog」というカテゴリに納めてしまう感じですね。

基本的に、というのは例えばブログ記事だけじゃなくて、サンプルページなどのまとめであったり何かの素材だとかソースを配布する場合にはそれ相応のカテゴリを作成するかもね、という意味です。カテゴリというかディレクトリという感じでしょうか。
またブログの中でもシリーズになるような記事はサブカテゴリでまとめようと思います。例えば今書いているこの記事もinkdesign.jpができるまで、というようなシリーズとしてサブカテゴリにおさめます。
冒頭に書いたようすでにやっちまってることですが、ちゃんとこのあたりはじめにルールとガイドラインをつくっておかないと本当に面倒ですからね。リダイレクトすればいいじゃん、ということなのですがね。

さて、ここで僕が好きなブログ（というかサイトとというべきか）などを挙げてみて、こういう分類をどうされているのかとか、どういう見せ方をしているのかを見てみます。

could
http://www.yasuhisa.com/could/
僕はとにかくこちらのヤスヒサさんの影響を色々受けてますし、この記事のシリーズもこちらのopenwebdesignの影響です。リニューアルを進めているようなので、もしかしたら近い将来コンテンツの分類や見せ方も変わってしまうかもしれませんが。
カテゴリは記事タイプとして利用し、タグはキーワードとしてほぼ固定のようです。よくあるブログでいうところのカテゴリがタグ（キーワード）になっているような感じでしょうか。

2xup.org
http://2xup.org/
こちらの上ノ郷谷さんのサイトも昔から良くみてます。前は青くてゾウな感じのデザインでしたね。今はよりシンプルで余白が落ち着きます。メインのナビゲーションの色遣いもきれいだし、それぞれのコンテンツごとでちょっとした見せ方を変えているのがにくいですね。
ナビゲーションの項目もシンプル。blogの中もカテゴリで分類はされていないですね。

Bozzlog
http://www.bozzlog.com/
タグが最上部に並べられているのは結構好きです。タグのラベルも独特ですね。CMSの機能としてカテゴリなのかタグなのかわからないですが、UI上タグという感じでまとめられているようです。ヘッダーの遊びもいいですね。

ウープスデザインブログ
http://blog.woopsdez.jp/
最近リニューアルをされたようなのですが、この右サイドにあるようにこれだけアーカイブのリンクが並べられていると歴史を感じますね。僕はほんと継続できていないので見習わないと・・・。
こちらもメインのナビゲーションとしてカテゴリやタグのメニューは提供されておらず、アーカイブのリンクがメインになっているようですね。

yusukenakanishi.com
http://www.yusukenakanishi.com/
サブドメインレベルで趣味などのブログとWeb系でわけてますね。inkdesign.jpもウェブ系の記事が基本で、日記的なのは別ブログで書いてます。ご本人の好みとかが良く出ていて素敵ですね。

BLOG × WORLD ENDING
http://blog.worldending.jp/
最後に僕が今までみた日本人のサイト・ブログで一番好きかも知れないサイトです。ひとことでいうと「やりすぎ」というか笑
個人で運営されているかと思うのですが、ひと記事ひと記事の凝り方がすごい。こういうのが好きでもある方なんでしょうが、それでもタイトルのコピーとデザイン、それと本文がまたしっかりした内容なんですよね。感動です。実際Mac系の記事も今タメになってます。

こうしたサイトやブログに影響を受けつつ、次のステップに進みます。
次は見せ方的な話かな。

header.php

1行目の記述はHTML5の大きな特徴のひとつですね。下記参照。

DOCTYPE 宣言は となります。HTML 構文では、大文字と小文字を区別しません。以前の HTML は SGML であり、DTD を参照する必要があったため DOCTYPE は長くなっていました。しかし、これは HTML 5 において異なり、DOCTYPE は HTML 構文において標準モードを有効にする手段として必要となっています。なお、ブラウザは現段階において既に、 を標準モードのトリガーとして解釈しています。

HTML 5 における HTML 4 からの変更点

その他見てもらうとわかる通り、諸々が簡素的にかけるようになってますね。あとは新要素であったり、ここで読み込んでいるhtml.cssだとかhtml5.jsだとかは後述で説明。

index.php

今回はWodrpressの構築の話ではないので、Wordressのテンプレートタグの解説などはさておき、HTML5ということで新要素を盛り込んでいきます。
header.phpにあったheader要素に続いて、article要素やsection要素、time要素などを採用。
それぞれの要素の解説については記事末にあるサイトを参照いただく方が理解が深まるだろうと思うので解説は割愛します。

ここで見る人によっては「あれ？」って思われるかもしれないんですけど、header.phpにあったh1要素とは別でここにも登場させてます。
HTML5ではセクションやアウトラインといった考え方・アルゴリズムが存在していて、見出しが必要とされるようなところにはセクションとなる要素（Sectioning Content）でマークアップすることが好ましいようですね。
そのSectioning Contentにはsection要素とかarticle要素とか他にはnav要素などもあるんですが、今回採用した内容でいうと、記事となる箇所のarticle要素から新しいセクションがはじまり、記事タイトルを見出しとしてh1要素でマークアップしています。
なんといいますか、個人的にはセクションで見出しレベルがリセットされるようなイメージです。でも間違えてはいけないのはSectioning Contentが見出しレベル要素から始めなければならない、というわけではなさそうです。もちろんh1レベルである必要もないのですが、今回はこのような選択をしました。

というのはarticle要素というのが文書の中で独立した部分に採用すべきなようで、ならばそこだけを切り取って考えたらh1レベルからだろう、というような感じです。あとheader要素なんかもarticle要素の中に取り入れてますね、同じような理由でイメージしています。他にも必要な情報がありそうですが現状はこんな感じ。あとはtime要素も使ってます。

footer.php

サイトのフッターは今のところ大きな特徴はないです。
ひとつ今までと違うマークアップとしては、よくコピーライトをaddress要素でマークアップしちゃうんですが、少なくとも今の状態は「連絡先」を明示しているわけでもないので、ここには使ってません。また追々使うかもしれないし、使わないかもしれない。

IEその他未対応なブラウザ向けの対策

前者のスタイルシートは新要素の中でSectioning Contentな要素に対してdisplay:blockをあててブロックレベル化（HTML5においてこの言葉がふさわしいのかわからないですが）してます。これをしないとブロックレベルにならないのでmargin-bottomだとかそういうスタイルは適用されません。
後者はそもそも要素が認識されないブラウザがあるので、Javascriptで要素を生成してしまいます。ちなみにhtml5.jsという素晴らしいライブラリがあるのですが、これはHTML5の大体の要素をカバーしてくれている分、今回のブログには不要なところも多いので最低限の対応にとどめています。

今はHTML5に関する情報が色々出回っているので実践しやすいですね。とはいえ仕様が固まっているものでもないので、参照した情報が古いとか、解釈がそもそも違うとかは大いにありえますし、こうやって自分が書いていることもずれているかもしれませんが、何事もやってみることが一番だとおもいます。

参考サイト：

• HTML5.JP - 次世代HTML標準 HTML5情報サイト
• HTML5 Doctor, helping you implement HTML5 today
• HTML 5 における HTML 4 からの変更点

なぜブログを立ち上げるか？

すでに会社のブログなり、コミュニティのブログなりある中でさらにもうひとつ立ち上げるのか。
それはhiloki（谷拓樹）個人がどういう人か、を知ってもらうため、という感じでしょうか。

Twitterをはじめ色んなSNSなどで直接お会いしたことないけど、そこで繋がって、実際にお会いして繋がる人が多くなってきました。
それでそのサービス上で色々とやりとりして互いを知ることもできるけど、やっぱりブログとかがある方が相手をより深く知るというか、どういう好みがあるのかとか、職種・スキル的に領域がどういった感じかを知ることができると寄り近づきやすくなる気がするのです。

そのようなきっかけでもっと色んな人とも交流をしたい、そのために自分を知ってもらうため、その自分をブランディングするためにブログを立ち上げます。

どういうことを書いていくのか？

24時間自分はWebのことばっかり考えて行動しているわけではないので、それ以外で日記的にかけることは色々あるとは思うけどもそれは避けるようにした い。そういうのはまた別のブログで書く予定です。（このいinkdesignから誘導するかどうかはわからないですが。）
ということでやはりWebに関することなり、自分の領域にあるものを中心に書いていく予定です。自分でいうのも何ですが、周りにいる人よりはいろんなWebサービスやツールなんかも知っているようなんで、そういうのを紹介できるといいのかな。

もうちょっと５W+1H的にキレイにまとめたかったですが、こういう感じでざっくりですけど、これをベースにinkdesignを続けていきます。

とりあえず、「タイトル」「本文」のみ。というか文書型もなんにもなしから始めます。

さあ完成なるか、見届けてください。
※たまに普通に記事を書くこともあろうかとおもいます。