会社での開発環境にEclipse+Aptanaプラグインを使っているので、自宅の環境にもAptana Studioをセットアップすることにしました。
http://www.aptana.org/
Aptana Studioではエディターのカラーテーマを言語ごとに設定することができます。
その設定方法とおすすめのテーマを紹介します。
続きを読む
会社での開発環境にEclipse+Aptanaプラグインを使っているので、自宅の環境にもAptana Studioをセットアップすることにしました。
http://www.aptana.org/
Aptana Studioではエディターのカラーテーマを言語ごとに設定することができます。
その設定方法とおすすめのテーマを紹介します。
続きを読む
inkdesign の ink はその通りペンや筆の「インク」の意味なのですが、この名前をつけた元は The Used というバンドの “The Taste Of Ink” という曲。
という話は以前ブログ記事でも紹介したこともあるんですが、このインクというのが人の心に染みとして残るようなデザインを、みたいな感じのイメージが湧いてきて。染みというとネガティブな感じもしますが、それくらい頑固な汚れみたいなしつこさがあるといいんじゃないかなぁと思ってます。
続きを読む
新年用にテーマを少し変更。期間限定ですね。
例年、年が変わる頃にブログのリニューアルをしてきたような記憶があるのですが今年はまったりと。
あと2010年の抱負でも書けば良いかと思うのですが、公言しても実行できないことが多いで、特に書かないでおこうと思いましたが、このブログをもうちょっとまともに更新をするというのは頑張ってみたいものです。
あとはProject 365もぐだぐだなので、今年こそは・・・。
http://365.hiloki.me/
※これだけ毎日撮るものがないというのは、毎日がそれほど変化がないということで、それはそれで悲しいと今思いました。
2010年は「休」な年にしたいと思いつつ、何か結局色々やってるんだろうなと思います。
オンラインでもオフラインでもinkdesign と hiloki を本年もよろしくお願いいたします。
Wordpress2.9にアップグレードしました。
このブログはhetemlを使っているのですが、借りているサーバーのMySQLのバージョンも古く、「MySQL 4.1.2以上」というWordpress2.9の要件が満たせてないことに気づきました。
あとPHP5前提のプラグインが増えてきたり、Wordpressの次期バージョンもPHP5へということのようなので、PHP5にも対応しておこうと諸々の対応をしました。
hetemlの管理画面にログインをして、まずはデータベース側の作業をおこないます。
下記の手順で作業をおこないました。
ちなみにエクスポートしたSQLはこの先のWordpress2.9へのアップグレードのためのバックアップとして残しておいてください。
これについてはhetemlのヘルプにありますのでこちらを参照してください。
レンタルサーバー「heteml」 – PHPのご利用方法について
今回は管理画面からの自動アップグレードでやってみます。
アップグレード作業の前にひとつファイルを修正。
最初にデータベースを新しいものに移行しているので、既存のwp-config.phpに書き込まれているデータベース情報も書き換えないといけません。
/** WordPress のデータベース名 */
define(‘DB_NAME’, ‘新しく作成したデータベース名’);/** MySQL のユーザー名 */
define(‘DB_USER’, ‘新しく作成したデータベースのユーザー名（hetemlの場合データベース名と一緒）’);/** MySQL のパスワード */
define(‘DB_PASSWORD’, ‘新しく作成したデータベースのパスワード’);/** MySQL のホスト名 (ほとんどの場合変更する必要はありません。) */
define(‘DB_HOST’, ‘新しく作成したデータベースのサーバー名’);
あらかじめこれをやっておきましょう。では続きは下記。
幸い今のinkdesign.jpはほとんど汚れのない状態だったので非常にスムーズにアップグレードができました。
公式の情報は下記。
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系の記事も今タメになってます。
こうしたサイトやブログに影響を受けつつ、次のステップに進みます。
次は見せ方的な話かな。
しばらくこのままのHTMLでいくのもなんだかなあ、と思い始めたのでHTML5で最低限の形を組んでみます。
今のうちに触れておくのはいいことですよね。業務上のコーディングではなかなかできないし。
ちなみにCMSはWordPress使っているので、構成するphpファイルを覗いていきましょう。
1行目の記述はHTML5の大きな特徴のひとつですね。下記参照。
DOCTYPE 宣言は となります。HTML 構文では、大文字と小文字を区別しません。以前の HTML は SGML であり、DTD を参照する必要があったため DOCTYPE は長くなっていました。しかし、これは HTML 5 において異なり、DOCTYPE は HTML 構文において標準モードを有効にする手段として必要となっています。なお、ブラウザは現段階において既に、 を標準モードのトリガーとして解釈しています。
その他見てもらうとわかる通り、諸々が簡素的にかけるようになってますね。あとは新要素であったり、ここで読み込んでいるhtml.cssだとかhtml5.jsだとかは後述で説明。
今回は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要素も使ってます。
サイトのフッターは今のところ大きな特徴はないです。
ひとつ今までと違うマークアップとしては、よくコピーライトをaddress要素でマークアップしちゃうんですが、少なくとも今の状態は「連絡先」を明示しているわけでもないので、ここには使ってません。また追々使うかもしれないし、使わないかもしれない。
前者のスタイルシートは新要素の中でSectioning Contentな要素に対してdisplay:blockをあててブロックレベル化（HTML5においてこの言葉がふさわしいのかわからないですが）してます。これをしないとブロックレベルにならないのでmargin-bottomだとかそういうスタイルは適用されません。
後者はそもそも要素が認識されないブラウザがあるので、Javascriptで要素を生成してしまいます。ちなみにhtml5.jsという素晴らしいライブラリがあるのですが、これはHTML5の大体の要素をカバーしてくれている分、今回のブログには不要なところも多いので最低限の対応にとどめています。
今はHTML5に関する情報が色々出回っているので実践しやすいですね。とはいえ仕様が固まっているものでもないので、参照した情報が古いとか、解釈がそもそも違うとかは大いにありえますし、こうやって自分が書いていることもずれているかもしれませんが、何事もやってみることが一番だとおもいます。
参考サイト：
inkdesignは個人ブログで例えば作品のポートフォリオなんかをどんどん公開していくようなものでもなかったりしてたので、今まで正直そこまで考えずに立ち上げて記事を書いてきたけど、せっかくなのでちゃんといろいろ考えて見ることにします。
すでに会社のブログなり、コミュニティのブログなりある中でさらにもうひとつ立ち上げるのか。
それはhiloki（谷拓樹）個人がどういう人か、を知ってもらうため、という感じでしょうか。
Twitterをはじめ色んなSNSなどで直接お会いしたことないけど、そこで繋がって、実際にお会いして繋がる人が多くなってきました。
それでそのサービス上で色々とやりとりして互いを知ることもできるけど、やっぱりブログとかがある方が相手をより深く知るというか、どういう好みがあるのかとか、職種・スキル的に領域がどういった感じかを知ることができると寄り近づきやすくなる気がするのです。
そのようなきっかけでもっと色んな人とも交流をしたい、そのために自分を知ってもらうため、その自分をブランディングするためにブログを立ち上げます。
24時間自分はWebのことばっかり考えて行動しているわけではないので、それ以外で日記的にかけることは色々あるとは思うけどもそれは避けるようにした い。そういうのはまた別のブログで書く予定です。（このいinkdesignから誘導するかどうかはわからないですが。）
ということでやはりWebに関することなり、自分の領域にあるものを中心に書いていく予定です。自分でいうのも何ですが、周りにいる人よりはいろんなWebサービスやツールなんかも知っているようなんで、そういうのを紹介できるといいのかな。
もうちょっと５W+1H的にキレイにまとめたかったですが、こういう感じでざっくりですけど、これをベースにinkdesignを続けていきます。
凍結しっぱなしだったブログをそろそろ動かそうとおもい、新しいテーマなどを色々考えているわけですが、
せっかくなので裸の状態から作る過程を記事としてしまおうとおもいます。
これは長谷川恭久さんのopenwebdesignにもろに影響は受けてます。
とりあえず、「タイトル」「本文」のみ。というか文書型もなんにもなしから始めます。
さあ完成なるか、見届けてください。
※たまに普通に記事を書くこともあろうかとおもいます。