hamashun.com

livedoorの新サービス、nowaがクローズドβ中です。
僕はBlogのテンプレをいくつか作りました。 ねこテンプレは作っている間ずっと癒されていました。 ねこかわいいよねこ。

僕のアカウントはhamashunで取りました。 livedoorのIDは取れなかったのでねんがんな感じ。
nowaはWeb関係の雑記が中心になりそうです。 あとはちょっとしたぼやきとか。

nowaにはトラバが無いわけなんですけど、ターゲットにしているユーザー層は気にしない予感。
手動トラバ（単に報告に行くだけ）も意外と楽しいです。 スローネットライフみたいな？

上ノ郷谷さんのエントリ、ドメイン名の由来を書いてみる - 2xup.orgに便乗でございます。

えーと、本名をベースにしました。 当時通っていたスクールでのあだ名が「ハマシュン」だったというのもあります。
ドメイン名・サイト名・名前のどれか一つを覚えて貰えれば、他の二つも覚えて貰えるだろう、という目論見もあったり。 意外と打算的だなキミィ。
HNだけなんでShunなのかというと、･･････うーん何でだろう。 ツメが甘いというのはこの事かっ。

2xupさんの読み方は、最初は「ツーエックスうｐ」とか呼んでました。 脳内で。 うｐて！

明日は会社で正規表現の勉強会があるので、ちょっと予習しておこうと思います。
予習という事で、正確でない部分があるかもしれないです。

正規表現ってそもそも何？

感覚的には、複数の条件を一つの式で表わす表現方法なんだと思いました。

もうちょっと具体的に

これだとまだ解りづらいと思うので、例を考えてみたいと思います。

例えばグーグル検索する時に「スイーツか甘味」を調べたい時は、「スイーツ OR 甘味」のように検索すると思います。
これを正規表現で表すと、「スイーツ|甘味」のようになります。
甘味 OR スイーツと甘味|スイーツで検索結果を比べると、同じ結果になってると思います。

あるいは、エディタを使っていて「ピカチュー」と「ピチュー」の両方を検索したい場合には、「ピカ?チュー」と検索すれば、両方がひっかかります（ただしエディタが正規表現に対応している必要あり）。

ちょっと複雑な例を出すと、『[CEames]か[C Eames] か [C EAMES] か [C・Eames] か [C・EAMES]』という条件は、『C( |・)?E(ames|AMES)』と表現する事ができます。

2007 05 11 修正および追記

という訳で、正規表現の勉強会がありました！ 忘れない内にまとめたいと思います。
割と自分用と言うか覚え書きと言うか、勉強会を見ていないと解りにくい部分が多々あると思います。

基本的な事

基本的な部分は、昨日やった予習で合っていたようです。
いやー、予習しておいたおかげで、何とか説明についていけた感じです。 何もやってなかったら危なかったわー。

新たに解った基本的な事は、「.」に関する事です。
「.」は任意の文字列という意味を持っています。 つまり「とにかく何でもいいから文字列」です。

これには半角スペースは含まれるんですが、タブや改行は「\s」や「\n」のようにエスケープする必要があるようです。
あ、でも、今手持ちのエディタで試したらタブはエスケープしないでも大丈夫でした。 言語とか環境にもよるのかもしれません。

TTで使う

livedoorはTemplate Toolkitというモノを使っています。 これ自体の説明は長くなるので、とりあえず置いておきます。
日々の業務では身近な存在で、IFとかELSEなんかが登場するヤツです。 自然と正規表現との関わりも出てくるという事で、TTの話もしてもらえました。

TTにおけるパイプの使い方

|（パイプ）はいわゆる「OR」であるというのは、昨日の予習でも書いたんですけど、TTでは少し使い方が違います。
TTではパイプは「エスケープする」という意味合いになるようです。 間違いでした。 きゅうすけさんにコメントで指摘して頂けました。 ありがとうございます！

例えば、Blogのタイトルを呼び出す変数があったとして、それを仮に[% blogtitle | html %]とします。
Blogタイトルは各ユーザーが自由に入力できる部分なので、実態参照にしないといけない&や>>を使うかもしれません。
この時、「| html」を指定しておくと、「html形式でエスケープ」という意味になるんだとか。

TTにおけるOR

ではTTで「OR」はどう表すかというと、「||」とパイプを二つ繋げる形式になります。
他に、「二つの条件を満たす」場合は「&&」だそうです。 あ、なんだかActionScriptにもこんなのあったような気が。

ちなみに、このような独自の正規表現とでも言う存在は、厳密に言えば正規表現とは呼べないものの、慣例として正規表現と呼ばれているようです。

_で文字列を連結

これは正規表現とはちょっと離れるんですが、同じ勉強会内で習った事なので書いておきます。
TTは「_」（アンダーバ－）で、文字列を連結させる事ができます。
例えば、苗字と名前を別々に取得していても、「氏名 = 苗字_名前」とすれば、変数「氏名」に「苗字」と「名前」を繋げたモノを代入できたりします。

ちなみにもっと言うと、<a href="氏名をアドレスにしたモノ">氏名</a>という要素を用意するとします。
この時、[% namelink = <a href="[% familyname_firstname_link | html %]">[% familyname_firstname | html %]</a> %] というような変数を作っておけば、以降は[% namelink %]だけで同じ要素を呼び出す事ができるようで。
あ、ちなみにこの例のTTタグ？の書き方はかなり怪しいので、あくまでこんな雰囲気だよ、という例えとして見てください。 自信ﾅｽ。

更には、HTMLで言う所の < と > がTTでは [% と %] になります。
なので、「[%」という文字列を使いたい場合には、'['_'%' とすればよいそうです。
あ、でもこれ、単純に'[%'だとダメなんでしょうか。 今度聞いてみます。

CSS Nite LP3が終了しました！
例によって、ちょっとしたレポートを書きます。 自分用まとめの意味合いが強いので、行ってない人は解りにくいかもです。

いきなりおまけ

つーか長えよ！ って言う人用に、短縮版を追記部分に用意しました。

会場の様子

ズドーンと大きいホールに、机と椅子が整然と並んでいる感じでした。 建物の印象も近代的でオサレな感じです。
一つの長机に椅子は二つなので、かなりゆったりと過ごす事ができました。

益子さんのセッション「ザ・コーディングの美学」

3つの観点、「真・善・美」に沿って、コーディングの美学を語られました。
「真」は仕様通りかどうか。「善」は、例えばプログラマーも使いやすいソースなど、良心的な事。 そして「美」はインデントの入れ方やコメント、改行位置などとの事でした。

この中で僕が注目したのは、「美」の部分でした。
「美」に関しては、個々人の意識の差が出やすいと思います。 そういった部分で益子さんのご意見を聞けるのは貴重かなーと。

これまでにも、CSSの値やセレクタが長くなってしまった場合に改行する、というのはよく見かける手法でしたが、HTML側のタグを改行してしまう、という考え方は斬新でした。 これを実行するには、改行して良い箇所とそうでない箇所を熟知していなければならないので、「真」の知識も必要とします。
CSSの値も、font-familyプロパティやbackgroundプロパティなど、値が長くなりがちなものは改行するのも益子さん流の特徴みたいです。

最後にあったのが、NerdとGeekの話。
端的に言えばNerdは使えないオタクでGeekは使えるオタク。 みんなでGeekを目指そうよ！ という感じ。
その為には「真・善・美」を意識して、自分の仕事に誇りとプロ意識を持つ必要がある、みたいな。

ちょっと話は外れるんですけど、Perlハッカーって言うと「Perlの凄い人」って意味合いですけど、「CSSハッカー」って言うと、どうしても「CSSハック」が意識に出ちゃう気がします。
「CSSの凄い人」って、何て呼べばいいんですかねー。

小久保さんのセッション「フィロソフィー・オブ・コーディング」

フィロソフィーです。 哲学です。 なんだか難解そうなタイトルですけど、とても勉強になりました。

Web製作者の価値は、Web業界の価値に左右されるというのが、重要なポイントでした。
簡単に言うと、「サッカー日本代表とセパタクロー日本代表だと、どっちが稼ぎが多いか」みたいな感じでしょうか？
例え同じ日本代表であっても、サッカー業界の方が大きいので、稼ぎも多いはず。 多分。（セパタクラーの皆さんごめんなさい）

で、業界の価値はどのように決まるのかという事を考えると、それは製作物一つ一つのデキ。 つまり製作者一人一人のがんばりだという事です。
転じて、コード（HTMLだけでなく、全てのコード）が悪いとWeb業界の質が悪くなるという事に。

Web標準の正体についても言及されていました。
Web標準の目的とは、良いコードを作る事、ただそれだけ。 それ以上でもそれ以下でも無いとの事。
「これはWeb標準に含まれる」「いやそれは含まれない」という議論はナンセンス。 という意見も。

では、なぜ、正しいコードを書かなければならないのでしょうか？ 考えてみよう。という形で終わりになりました。
ちょっと前に、XHTMLを選択する理由という話題がありましたけど、これの回答にもなりそうです。

鷹野さんのセッション「Dreamwaverのコーディング機能再点検」

僕は基本的にエディターを使うヒトなので、ドリーは使わないんです（会社のPCにはインストールすらされていない）。
でも、コードヒントのカスタムとかは参考になりました。 今度自分のエディタでもやってみよう。

神森さんのセッション「Liveコーディング（A）」

ほぼ全工程において、ドリーのデザインビューを使用して進めていました。
これは「どの操作をしたらどういった結果になるか」を熟知しているからこそ、できる事ですよね。 でなければコードとかグチャグチャになるでしょうし。
例によって僕はドリーを殆ど使わないので、逆に新鮮な視点で見る事ができました。

ヤスヒサさんのセッション「Microformatsで上質コーディング」

来ました長谷川恭久さん。 ヤスヒサさんのプレゼンはテンポがよくて、グイグイ引き込まれます。 そしてお題はMicroformats。 期待せざるを得ません。

プレゼンは、「Microformatsとは何ぞや？」という所からはじまります。
「マッシュアップ」が最近は普通に聞く単語になっています。 異なるWebサイトからデータを持ってきて合体させちゃったりするアレですね。
それにはAPIを使う訳ですけど、ちょっと敷居が高かったりします。

その点Microformatsは超簡単です。 現在あるタグに属性を追加するだけで利用できます。
APIのような「製作者による大掛かりなコンテンツのマッシュアップ」はできませんけど、「各ユーザ（閲覧者）による細かいデータの抽出」をが行う事ができます。
この辺りの詳しい話は、ヤスヒサさんのサイトで資料が公開されているので、そちらを参考にされた方が、より理解が深まります。

余談ですけど、打ち上げの時に「nowaにはMicroformatsを実装しないの？」というお話を頂きました。
実は今回のプレゼンでかなり面白そうだと思ったので、もう少し調べてみたいと思います（あくまで現段階では個人的な意見であり、今後実装されるかどうかは全くもって別問題です）。

太田さんのセッション「プロはこう使う！Another HTML-lint 徹底活用」

みんながお世話になっている（かも）のAnother HTML-lintのお話です。

点数を気にする余りに逆にアクセシビリティが下がってしまう、という件は、バリデータやlintを使い始めた頃にはありがちですよね。
結構、多くの人が通ってきた道かもしれません。
点数はあくまで目安にして、そもそもの目的を見失わないようにしたいですね。

河内さんのセッション「Liveコーディング（B）」

今度はドリーのコードビューを駆使する、河内さんのLiveコーディングです。
急遽、bAのお二人に挟まれてコーディングをする事になりました。 な、なんてプレッシャーな・・・！

特に勉強になったのは、ナビゲーションなどから全体のサイト規模を想像して作業を進めるという部分。
確かに、全部のデザインが上がってからコーディングがスタートする事ってあんまり無いですよね。 後になってあたふたしない為にも、これは意識したいです。

あとは、背景画像をスライスする時に小さくスライスしすぎると、IEではCPUに負荷がかかるというのは初耳でした。
これは早速、社内に広めたいところです。

コーディングコンテスト表彰・講評

本当は3分くらい時間がもらえる予定で、喋る事を考えていたんですけど、時間が押していたのでカットされましたｗ
賞に選ばれた作品については、平澤さんの記事、浜賞☆コーディングコンテストVol.1｜CSS HappyLifeで講評が掲載されています。

僕のBlogでは、惜しくも賞には選ばれなかったけれど「ここが良い！」と思った作品については、今後講評を載せていきたいと思います。

おまけ2

その他打ち上げの時の事などは、nowaに書く予定です（雑記です）。

関連リンク

複数のclassをセレクタに指定する方法

複数のclassをセレクタに指定する際のメモ書き

複数のclassをセレクタに指定した際のIEのバグ

HTMLに複数のclassを指定する事、ありますよね。

<div class="sample code">

こんな感じの。
んで、CSS側で「sampleとcode、両方のclassに適合する要素」というセレクタを書くには、

div.sample.code {
 color: red;
}

こんな感じにすればOK。 もちろん仕様書にも書いてあります。
意外と見かけないから書いてみました。

nowaのテンプレをValidにしよう委員会（一人）の活動中に、Valid（妥当）である事とWell-Formed（整形式）である事は同一なのかな？ と思ったので調べてみました。

ググッたらいきなり答えが見つかりました。
この文書は、妥当性と整形式 - 徒書と整形式のXML文書 (well-formed XML document)とは： - IT用語辞典バイナリを参考に書きました。

両者の違い

Well-Formedは、XML文書として最低限必要なラインみたいな感じ。 Well-Formedでなければ、エラーを返すパーサが多い（全部？）です。
Well-Formedでない、というのは、例えばタグの入れ子がおかしかったりする場合。 XHTMLだったら（ブラウザががんばって）解釈してくれますけど、XMLだとエラります。

Validは、更にDTDを明示して、それに適合している文書。 ValidなXML文書は、そのDTDに対応したパーサで正しく処理される事が保障されます。
となるとValidステッカーは、言うなれば保証書みたいな物でしょうかｗ

補足メモです。
パーサは、ブラウザの中の機能の一つで、サーバから持ってきた情報を解析します。
その解析結果を元に、レンダラーが画像やテキストを配置します。
詳しくはウェブブラウザ - Wikipediaを参照してください。

関連リンク

複数のclassをセレクタに指定する方法

複数のclassをセレクタに指定する際のメモ書き

複数のclassをセレクタに指定した際のIEのバグ

先日の記事、複数のclassをセレクタに指定する方法の追記エントリです。
ちょっと条件が不明瞭なので、メモ書き程度にとどめておきます。
新たに判明した事実があったら、この記事を編集・追記します。

HTML

<div class="sample code">～</div>

CSS

div.code.sample {
 color: red;
}

このように、HTMLに書いたclassの順番とCSSで指定したclassの順番が異なると、IE6以下で指定がうまく適用されない事があるぽい。
ただし、サンプルのためのシンプルなファイルで試したら再現できなかったので、他にも条件があるのかも？

そもそも、現象が発生したのがスタンドアローン版のIEだったので、オフィシャル版でも同様なのか不明。

まあでも、HTMLの順番に習ってCSSを記述していった方が、可読性とかの意味でも無難だと思います。

関連リンク

複数のclassをセレクタに指定する方法

複数のclassをセレクタに指定する際のメモ書き

複数のclassをセレクタに指定した際のIEのバグ

複数のclassをセレクタに指定する方法でぴんどめさんからコメント頂いた件ですが、その後ぴんどめさんからサンプルファイルを送って頂けて、どうやら判明しました！
ぴんどめさん、わざわざありがとうございました！

HTML

<div class="sample code test">～</div>

CSS

div.hoge.test {
 color: red;
}

こんなソースがあった時に、本来ならば文字色は変わらないはずです。 現にFirefoxやOperaではそのように表示されます。
しかし、なんとびっくりIE様は文字色を赤にしてしまうのです！ なんてこった！

どうやらIE様は、複数のclassを使うセレクタは、最後の一つのclassしか見ていないようです。 ドジッ娘属性にも程がある。

なお、この現象はIE5.0 IE5.5 IE6（全てスタンドアローン版）で確認されました。
IE7とSleipnir2.5.10では確認されませんでした。
プニルって、IE7のエンジンなのかな･･････。 公式をざっと見ても分らなかったので、その辺今度調べたいです。

何にせよ、現段階では、他の手段でセレクタを指定した方が良さそうですね。

おまけ

と言う事は、IE様とそれ以外のブラウザの振り分けに使えない事もないのかな。 激しく分りづらいですけどｗ
あ、あともちろん、その際は文書に沿ったclassで。

7月15日、16日は、みんなでアキバへレッツゴウ！
という訳で、Web標準に関連したイベントです。

開催要項を見ると、物凄い数のセッションがあります。 同時進行もあるので、全部に出る事は不可能です。
しかもセッションは登録制な模様。 つまり、受けたい授業を決めないといけないんですね。 選択制の授業みたいで、何だかわくわくしてきますｗ
ちなみに、参加者には後日、音声データのダウンロードがあるようなので安心です。

チケットの販売は6月1日からです。
6月中旬頃にはセッションの登録が開始されるようなので、人数漏れしないように、公式ページのRSSを登録して、小まめにチェックしておくと良いのではないでしょうか。

多分、またついったー方面でも何かあるんじゃないですかねー。 と無責任な期待をしてみたり。

前に作ったやつを、体裁を整えてuserstyles.orgで公開してみたっす。 相変わらずネタです。
nowaで、ざっくりと使い方を説明しています。