The hr element represents a paragraph-level thematic break.

(http://dev.w3.org/html5/markup/hr.html)

The “paragraph-level” bit means between blocks of text, so it can’t be used to separate sections of a site.

(http://html5doctor.com/small-hr-element/)

って、まじですか・・・。
セクション区切りには使えないとな？

テキストブラウザで見たときに hr 無いと見辛いという強引な理由付け(実際見りゃわかるけどスタイル無い状態で、区切無しで垂れ流しは見辛いよ。)で hr を使い、ついでに clear: both をつけて逃げてきた身としては、けっこう困るなぁ。

via (http://html5doctor.com/small-hr-element/)

module Rack
  class LessCss
    def initialize(app)
      @app = app
    end

    def call(env)
      status, headers, body = @app.call(env)
      req = Rack::Request.new(env)

      if req.fullpath == '/css/main.css' then
        lessfile = 'less_template/main.less' ＃ less file
        if ::File.exists?(lessfile) then
          cssstr = Less::Engine.new(::File.new(lessfile)).to_css
          body = [cssstr]
          headers['Content-Type'] = 'text/css'
          headers.delete('Content-Length')  # Rack::ContentLength に任せる
          status = 200
        end
      end

      [status, headers, body]
    end
  end
end

PATHが、ウルトラハードコーディングだけど今は気にしない(汗。

んで、main.less には、以下のように import を書いています。

@import 'html5-reset-1.4.css';
@import 'core.less';
@import 'header.less';
@import 'footer.less';
.
.
.

書くときは分割して、読み込むときは1つのファイルですむと。
キャッシュなどは全く考えてないので、制作のためのものです。
# 実際 main.css にまとめて css にしてから上げてるし。

(メモってないのでヌケがあるかも)

• ピクトンのクリスマスパレード
• エイベル タズマン
• カイコウラの鯨
• ププ スプリングス
• モエラキ ボルダー
• アーサースパス駅
• アロータウンの町
• ワナカの朝
• ニュープリマスの seal
• ワイタンギにあるマオリのミーティングハウス
• クイーンズタウンの町
• マウントクック＋フッカー氷河
• コロマンデル湾
• レディ ノックス ゲイザー (間欠泉) 1 2
• クライストチャーチのボタニックガーデン
• ダニーデンのファーストチャーチ
• トンガリロのMt.ナウルホエ

一度見た写真は、サムネイルの左上がカケているはずなので、わかるんじゃないかと思いますが、わかりづらかったらすみません。
リアルタイムな更新情報はtwitterに書いてますので、そちらを見てください。

来週もがしがし更新しますよー。就職まだ決まんないしヒマなんで(涙

ちと、今回は、セレクタの階層をなるべく浅くやってみようというポリシーで作ってます。なので、ほとんどクラス名のみ。
このやり方で書くのは正直めんどくさい。 自分のサイトだからやってみたけど、仕事ではしないと思います。

ul.hoge > li とかやったほうが絶対楽なのはわかってんですけど、パフォーマンスに影響する とか、yahoo どっかで見た気がして、やってみようかと。

(とか思ったら、そんなに効果は無いっぽい？ CSSセレクタのパフォーマンスへの影響)

クラス名のみでやってると、当然ながら html のタグが変わっても多少粘れるっていうのはあるかも。
ま、div と span とっかえて、display 指定が無かった場合なんかは壊れますが。

あと、class 名のつけかた。相変わらずいきあたりばったりでつけているので、一貫性が無い。これはなんとかしたい。
やっぱり最後に整理しないといかん。

今回は less を使いました。コーディング時はファイルを分割して書き、プレビューするときに 1 つの css にまとめて表示させるようにしています。手動じゃやってられんので当然自動で。

今のところ、ちと気になる点が2つほどあって、
・less ファイル(cssも?)のプロパティの値を改行するとパースエラーになっちゃって、グラデーションの指定をするときに見辛くて大変困る。
・複数セレクタを指定しているとき、セレクタに疑似クラスが入っていると、レンダリング時に分割されてしまう。同じ指定がいくつもあるので無駄。

でも、 変数が使えたり計算できたりするのはかなり便利。-moz-hogehoge と -webkit-hogehoge をまとめたりするときに重宝してます。

デザインが落ち着いて、整理し始めたら、プロパティ別整理法っぽいこともやっています。
font-size とかフォント色・背景色とか。

/* font-size 12px がデフォ */
/* font-size: 9px */
.photo_info_title,
.exif_key
{
  font-size: 9px;
}

/* font-size 10px */
.header_navi,
.no_map,
.index_top_navi_item_ja,
.nogps,
.photo_section_title
{
  font-size: 10px;
}

/* font-size 18px */
.page_title,
.photo_title
{
  font-size: 18px;
}

これで、新しいクラスのフォントサイズを 10px にしたいなーって時には、10px んとこにクラス名を追加すると。制作も後のほうになってくると、他のクラスとの整合性なんかが気になってくるので、個人的にはこっちが好きです。が、プロパティ別なものと、クラス別なもの両方あったりするので、自分しか理解不能ってのはあるかも。そんなときの Firebug でw。

あと、同じ見た目にしたいけど、クラス名は同じにならんよなぁ〜っていう時にもこの方法でやってます。
class="hogehoge shadow1"
class=”shadow1″ なんて class=”red” と同じじゃん って感じなんで、やりたくない。けど、同じ影のプロパティつけたいし、後で変更するかもしれないし・・・ ってとき。

/* ボタン用シャドウ */
.footer_pagetop_link:hover,
.index_top_navi_item_link:hover,
.photo_prev_footer_link:hover,
.photo_next_footer_link:hover
{
  .box-shadow(0, 1px, 5px, rgba(0,0,0,0.3)); // .box-shadow を別のところで定義してます。
}

とか。

コメントを書いとかないと、何やってんだかわかんなくなるので、この部分に関してはなるべくコメント書くようにしてます。

ちょっとめんどくさいのは、セレクタの一番下のものにコンマをつけるとエラーになる （ま、そうですな) ので、一番したのものを消すときに行削除だけじゃすまないこと。 たまに忘れるんです。上の行のコンマ消すの。

公開しました。やっと。
自分のサイト作ったのって何年ぶりだよって感じなんですけど(汗。
できました・・・と書こうとしたけどやっぱりやめたのは、
まだやってないことも、やりたいこと山のようにあるんで。

一応 html5 + css3 をメインで作ってるので、Chrome が一番まともに見える気がします。
Firefox 3.6 だと、transition 効かないし。
Safari は、なぜか transition がマズいのか transform がマズいのか、twitter ウィジェットとの相性が悪い。
Mac の Chrome でも、デフォルト表示を transition かけて表示してくれちゃったりする。
IE は見えるけど、色々としょぼい。

今日はこれで一息ついて、明日からまたちまちま修正と変更です。

さすが NZ 。

そういや、うちがいたころも、 Wellington の駅で羊つかって撮影やってたっけ?

Training session at the sheep station

NZで学校行ってるときにやりました。
上にビデオ、下に歌詞があって、歌詞にブランクがあって、そこを入力してく感じ。

Help に書いてあるけど、
BS – リピート
TAB – スキップ
Enter – 再生/一時停止

いがいとおもろいねこれ。

-rw-r--r-- 1 hoge hoge  35495 2010-02-27 04:56 test.js(ADVANCED)
-rw-r--r-- 1 hoge hoge 157754 2010-02-27 05:08 test_uncomp.js (defalult (SIMPLE))

というわけで、Closure Library を使い、圧縮に Closure Compiler の ADVANCED_OPTIMIZATIONS を使おうとしてハマったことのメモです。
Libary 自体、まだまだ使いこなせていなく、わかんないことだらけなので、これからも色々起こるでしょうけど。

google map v3 を使いたいんだけど、google.maps.LatLng 達がいなくなる

compiler のオプション –externs で google_maps_api_v3.js” を使う。
勝手に変更しないやつの定義みたいなものらしい。ってか、インタフェースの定義だよねあのファイル。

参考
How to Declare Externs with the Closure Compiler Application
Closure-Compiler Extern File Now Available

プロパティ名が変わる。

プロパティ名を文字列にする。

var opt ={
  zoom: 12,
  center: pos
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

を、

var opt ={
  'zoom': 12,
  'center': pos
  'mapTypeId': google.maps.MapTypeId.ROADMAP
};

にすると ok っぽい。
そこでしか使わないやつは ドットを使い、別のところでも使うやつは文字列でいくと。

参考
Inconsistent Property Names

goog.events.listener(window, hoge …) とやると未コンパイルでは動くが、コンパイルすると動かない。

window つっこんじゃマズいんですかね・・・。
とりあえずトリガーだけ欲しい & this が使いたいので、今回は下記の方法で逃げた。

var me = this;
window.addEventListener(EVENT, function(){
  me.hogehoge();
}, false);

html から呼びたい関数があんだけど、リネームされた

window のプロパティに設定する。

function hogehoge(){
...
}
window['hogehoge'] = hogehoge();

参考
Removal of Code You Want to Keep

コンパイルしたとき warning 出るけど意味わかんね

Error and Warning Reference

コンパイル前と後で動きが違うんですけど・・・

ね・・・。
試しにクラスを1つテストを書いてコンパイルしてみて、テストは通ったから大丈夫！
と思ったけど、まとめると動かないとかあるし。
selenium とかで動きチェックしないとダメなんですかね、やっぱり。
ここはちゃんと考えないとマズいよなぁ。

とりあえず、デバッグは console.log 入れまくって頑張り、function も console.log につっこんで、
そっから js 整形ツールにつっこんで中身確認とか(理解できないやつもあるけど)。

と、今んとこそんな感じか。calcdeps.py で deps.js 作ったりとかも後でメモれたらメモる。

なんでこんなメンドっちいことをやっているかというと・・・、おもしろそうだからw
仕事で普通のサイト向けに js 書くなら jquery のが楽だし作業は早いし、
それなりのクオリティで出せる（出せていると思いたい)はずなので。

今日やった事といえば、
・テンプレートの整理
・更新データ作成スクリプト制作
・写真単品ページのナビゲーション制作

まだ、そんなに細かいところを気にしてるわけじゃないのに色々と出てくるわ。

Firefox Stable Channel Packagesのリポジトリを加えて、インストール後、
http://releases.mozilla.org/pub/mozilla.org/firefox/releases/latest-3.6/linux-i686/xpi/ja.xpi
の、ja.xpi を入れて日本語にして完了。

[追記 2010/02/25]
と思ったんだけど、greasemonkey やら page speed を入れると起動しなくなる（涙。
たぶん、プロファイルに変なのが入ってんだろう。
環境再構築は大変だから、しばらく 3.5.8 に戻しておきます。