月別アーカイブ: 2010年3月

ニュージーランド写真・・・更新ログ

投稿日時: 投稿者:
返信

http://nz.layer13.com/

細かいところではメニューの順番を入れかえたのと、hr タグを消去したのと、git で更新するようにしたくらい。
そろそろトップページのデザインをマトモにしたいと考えている今日このごろです。

ニュージーランド写真・・・更新ログ

投稿日時: 投稿者:
返信

http://nz.layer13.com/

マップからは、地図上で見れます。場所のアタリがつかないものは出ませんが・・・。

まだワナカしか上げてませんが、パノラマ表示ができるようになりました。
360度パノラマは、ワナカとネルソン(ニュージーランドの中心)くらいしか無いけど、
Sign of Takahe からの夜景など、複数つなげられるのは繋げてアップする予定です。

焦らずじっくりと更新できれば良いかなぁと。

あー、NZ行きたい。が、金が無い!

パノラマ表示つくってます。

投稿日時: 投稿者:
返信

NZ写真サイトに載せるべく、パノラマ表示機能を作ってます。

とりあえず、サイトの表示部分の javascript と css。
更新フローについてはまだ考えていないので、これから。

javascript で一つはまったのが、img の onload。
Opera だと img.src、 img.onload の順に指定すると onload が呼ばれないそうです。
img.onload, img.src の順にするように変えたらなんとかなった。

あと、console.log のかわりに goog.debug を使ってみたよ。
Opera とか IE(まだやってないけど)で見るのによさそう。

あとは、画像のサイズをどうすっかだよなぁ…。
テキトーに360度のを縦 500px でつくってみたら、幅が 6782px だった。
いつも載せてる横向き16:9の縦幅が 536px なので、それに合わたほうがいいんだろうなぁ。

ちなみに、952×536 という妙なサイズがベース(例外あり)なのは、幅960 からシャドウ分を引いて、かつ8でわりきれる数。高さは16:9でのナリユキだけど、こいつも8でわりきれる。
JPEG って 8の倍数にしておくといいんだったよね確か？

っと思ったら、横は16のほうがいいのかな・・・。
(http://www001.upp.so-net.ne.jp/landscape/paper/imgproc005.htm)

HTML5 の HR

投稿日時: 投稿者:
返信

えーっと、

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/)

/css/main.css にアクセスがあったら less に送る Rack ミドルウェア

投稿日時: 投稿者:
返信

しょーもないメモメモ。

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 にしてから上げてるし。

ニュージーランド写真・・・先週の更新

投稿日時: 投稿者:
返信

http://nz.layer13.com/
ぼちぼち更新しています。現在73枚。

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

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

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

css を書くの、なんとか楽にならんものかなぁ。

投稿日時: 投稿者:
返信

NZサイト を作ったときの css コーディングの覚え書きというか、メモというか。

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

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 を別のところで定義してます。
}

とか。

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

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

んー、もーちっと楽になんないかのう・・・。
やっぱ経験値稼がんとだめやなぁ。

NZサイト公開しました。

投稿日時: 投稿者:
返信

http://bit.ly/l13_nz

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

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

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