カテゴリーアーカイブ: Uncategorized

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

投稿日時: 投稿者:
返信

http://nz.layer13.com

突発で仕事が入ったり、考え事をしたり、トップページが没ったりした関係で、2日くらいさぼりました。

いろいろある……けどいろいろない

投稿日時: 投稿者:
返信

NZサイト更新ログだらけになりそうだから、何か書こう(^^;;

あたしゃ別にポジティブ教でもなんでもないのだけど、
マイナスの話ってのは悪く伝染するので、
書いてる途中でふっと当事者じゃない視点がでてきて、
消しちゃう(^^;
ま、それくらいちっぽけなことといえばそれまでか。

今はあんまりよくない話でも、
将来、笑い話にでもなればいいや〜っと思っていられるような
大人にたいなー。

bygones
それはおいといて、

新版の指輪物語読んでます。
NZ でいたるところで LotR の上映会・・・というか、宿のテレビで見てるだけですけど、
があったのですが、当然字幕なんか無いので、ようわからんorz
ずっと前から持ってた図書カードもあったし、せっかくだから小説読んでみようかと。

実は小説は、学校で読まされたものを除いて、
ほっとんど読んだことがないのであります。

前に読んだのは、何年も前に、 palm で青空文庫で少し読んだっきり。
井伏先生が放屁なされた、 とか、子供の頃から損ばかりしている とか。
というわけで、
例によって、技術書やビジネス書は、例によって大量に見てはいたけど、
小説ってあんまり読んだことないんですよねー。

んで、ちと前に買ってみたよ LotR。 将来は英語で読みたいけど、まず日本語で。
が、旅の仲間 上1を眺めた時点で、英語版はかなり先になることが容易に判断できたw。

上巻1,2を読みおわったので、今日下巻1,2を買ってきた。

あと、靴下を返してもらった。取りに来んかったら捨てるでー言われちまったでなw。

そして、NZサイトのトップページの最初の案がださくてボツったので、どうしよう。
やっぱ中サイズのサムネイルも作らんとダメかなぁ。

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

投稿日時: 投稿者:
返信

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 は見えるけど、色々としょぼい。

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

Lyrics training 歌詞の聞き取り

投稿日時: 投稿者:
返信

lifehacker 見てたら発見。
http://www.lyricstraining.com/
歌を聞いて歌詞の穴埋めするやつ。

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

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

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

Google Closure Library + Compiler メモ

投稿日時: 投稿者:
返信

ADVANCED_OPTIMIZATIONS 使いたいっ！・・・・・・いや、なんとなく。
やっぱ js は、ちっさいほうが良いし、NZ サイトの JS をSIMPLE_OPTIMIZATIONS と比較したら、こんだけ違ったわけだし。

-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 のが楽だし作業は早いし、
それなりのクオリティで出せる（出せていると思いたい)はずなので。

色々でてくる

投稿日時: 投稿者:
返信

ナビゲーションのことを考えてたら、
autopagerize と ldrize があるのを思い出し、
それに対応したいかなぁ〜とか考えてたら、
ページ追加後のイベントも取れそうだったので、
今日は終わらんと思って、制作をやめましたw
hAtom だの xFolk とか見とこう。
ってか、そのへん microdata との絡みも少し見ないと。
明日また頑張ろう。

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

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

ubuntu で、firefox 3.6

投稿日時: 投稿者:
返信

拡張の関係で見送ってたけど、ようやく入れました。

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 に戻しておきます。