タグ: javascript

はじめてのCoffeeScript

いまさらながらCoffeeScript書き出している。たった数行の動いているJavaScriptをCoffeeScriptにしようとしたら、動かなかった。公式サイトには、CoffeeScript→JavaScriptはあるが逆はない。ググったら下記のサービス発見

それでも解決できなかった。ちなみに下記のようなコード

色々ググッてみてたら、先人の方のありがたい記録を発見

んでこうなって動いた

動いて嬉しかったので、思わずブログに書いた。&よく使いそうなんでメモ。

lightbox系のヤツでレスポンシブでもなんとかしたい

lightbox系の画像拡大のコンテンツがあるのをレスポンシブ的な感じでやった時、

最初、Lightbox 2で試してみたけど、

かなり大きなサイズの画像だと、スマートフォンのブラウザいっぱいいっぱいになって、どうしようもなかった。
色々試した結果、軽さもあって、ColorBoxがいいかなと。NETEYE Touch-Galleryは、なんかバギーな印象で今回は見送った。ColorBoxもSettingsがデフォルトのままだと、Lightbox2のデフォルト同様いっぱいいっぱいになってあわわ状態ColorBoxのSettings見て、

とかでもスクロールはするんだけど、やはり大きい。うーむ。デベロッパーツールと格闘しながら、colorbox.cssの.cboxPhotoの

とかにしたら、だいたい希望通りになった。あとは微調整して。ターゲットブラウザでの動作とかちゃんと調べてご利用は計画的に。

【幅とか決め打ち】jQueryを使った、サイドからスライドして開閉するメニュー

またも汎用性がないシリーズ
基本的にやってることは、toggleだけというシンプルというか、ありきたりでつまらんモノ。

HTML

JavaScript

css

サンプル
jQueryを使った、サイドからスライドして開閉するメニュー Sample

jQuery1.3リリースと注意点とかのメモ

コリスさんで発見
[JS]jQuery 1.3 リリース、主な変更点など | コリス
Release:jQuery 1.3 – jQuery JavaScript Library
上のページのベンチマーク通りならかなりのパフォーマンスアップじゃないか!
しかし待てよ。
コリスさんとこの訳によると、

ready()は、スタイルシートがロードされるのを待つことを保証しません。
全てのスタイルシートは、スクリプトの前にページに配置してください。

まあ、ここはCSSを先に書いちゃえばいいんだな。そこまで問題ないでしょ。

Standards modeで、ページを作成してください。
Quirks Modeで動作しない周知の問題があります。

問題は、ここだな。
IE6って、xml宣言入れたらQuirks Modeだからそこ要注意じゃないっすか!
まあUTF-8とかが多いから、そのときは、IE6のときだけxml宣言外す方向性かな〜。

【汎用性なし】グローバルナビにCurrentというクラス名を付加するjQuery

自分用のメモ
グローバルナビにCurrentというクラス名を付加するjQuery
第2階層であることが前提の汎用性なしjQuery

Google Maps APIメモ(v2) #6 オリジナルマーカー情報をjsonデータで読み込み

シリーズ第6弾、シリーズこれで終了
第5弾では、オリジナルマーカーは1種類1個だけだったのですが、今回はオリジナルマーカーを複数種類、複数個読み込んでみようかと。
しかも、それをjsonデータから読み込んで、ズームレベルでの表示/非表示の管理や、情報ウインドウの管理も一度にしちゃおうじゃないか。
というBlogに書くのがめんどくさくなった?反響がないことによる手抜き?みたいな感じです。

やることの整理

  • オリジナルアイコンは、第5弾で作った雪と、星の2種にする。
  • オリジナルアイコンの数は適当に複数個。
  • 任意のレベルでオリジナルアイコン出現
  • オリジナルアイコンをクリックするとそのアイコンの情報ウインドウが表示

参考にしたところ

サンプル

jsonデータ

用意したjsonデータは下記の通り

スクリプト

あんまりイラスト汚すのも忍びないので、数も少なめで雰囲気も似せてますが、オリジナルアイコンには影を付けてるのでよく見るとわかると思います。
minZoomというのは、アイコンが出現するレベルで、maxZoomまでは、アイコン出てます。
それ以上のズームレベルになるとアイコン消えます。
1箇所どうにもできないところがあって、mixZoom(オリジナルアイコンが表示されるズームレベル)が1の場合が、ズームレベル0の時も表示されてしまうようです。
これは、バグなんだろうか?
このネタは、もともと「沢山の情報をうまく整理して、楽しげにイラストに落とし込めないか?」というのを解決するために、Google Maps API使ったらできるかな。ということで作ったのが基になってまして、それをメモしてました。
なんかもやもやして解決したいことあったらお気軽にご相談ください。

サンプル

スペシャルサンクス
Sampleで使用しているイラストは、高田さんに無理言って借りちゃいました。
ありがとうございます。
プロジェクト管理ツールBacklog(バックログ)の本体、告知サイトSubversionページのインターフェースデザインも高田さんです。
関連エントリー

Google Maps APIメモ(v2) #5 オリジナルのマーカーを追加する(まずは1種類1個だけ)

シリーズ第5弾
第4弾で作ったマップにオリジナルのマーカーを追加してみる。
まずは1種類1個だけ。

参考にしたところ

オリジナルマーカー画像の作成について

アイコンの前面画像とアイコンの影(必要ない場合はなくてもいいんだろうけども)を作成するんだけども、起点は左上なので、影を書き出す時も、そこを気にして書き出せばOK。
Fireworksの場合は、背景透明で作って、PNG32で書き出せばいいみたい。影のアルファ値も保ってくれているようです。

  • 前面画像のようす

スクリプト

右側の男の子の帽子の右上にオリジナルのアイコン置いてます。
マップを拡大縮小してもサイズが変わらないのがオリジナルのアイコンです。
通常、イラストのこの場所にアイコンを置きたい!とか決まっているはずなので、クリックしたらそこの緯度、経度を表示するようにしてます。
HTML側は、下記のようにしてます。

サンプル

スペシャルサンクス
Sampleで使用しているイラストは、高田さんに無理言って借りちゃいました。
ありがとうございます。
プロジェクト管理ツールBacklog(バックログ)の本体、告知サイトSubversionページのインターフェースデザインも高田さんです。
関連エントリー

Google Maps APIメモ(v2) #4 オリジナルの画像をタイルレイヤーで表示

シリーズ第4弾
いつもは、地図とかで使っているGoogle MaGoogle Mps APIだけど、
使い方によっては、色んな事考えられるぞ。という例のメモ

オリジナルの画像や写真とかをGoogle MaGoogle Mps APIを使って表示できるようにする。

参考にしたところ

タイル画像の切り出しについて

タイル1枚は、256*256pxらしい。
FireBugで確認してみた画面↓

  • ズームレベル0でタイル1*1枚
  • ズームレベル1でタイル2*2枚
  • ズームレベル2でタイル4*4枚
  • ズームレベル3でタイル8*8枚

ということらしい。
じゃあ、横長や縦長の画像の場合は、どうなるんだ?とも思って実際に試してもみたが、
ズームレベル0だとやはりタイル1枚のみが表示される状態。
ということは、タイル画像を作成するときに、正方形にちょうど収まるように作ってやればいいみたい。
まずは、Sampleを見てみてください。

Fireworksでの作業手順メモ

  1. タイルの最大サイズを決めて、ファイル作成
    Sampleは、8*8枚、2048*2048pxとした。)
    丁度メモリの容量みたいな数字ですね。
  2. 最大サイズでスライスレイヤー(Webレイヤー)作る
  3. レイヤーフォルダ分けながら、半分のサイズにしながら、そのサイズの中でセンタリングする。
    ※レイヤーの名前は、ズームレベルと合わせとくと、わかりやすいかも。

    • ズームレベル3
    • ズームレベル2
    • ズームレベル1
    • ズームレベル0
  4. スクリプトで、
    "tiles/"+zoom+"/"+x+"_"+y+".png"とかで画像を読み込ますので、それに合わせて、画像を書き出す。
  5. いちいちFireworksのWebレイヤーに名前を付けるのがめんどうな時は、
    • 一度、Webレイヤーに名前を付けたファイルからコピペする
    • もしくはFireworks-ファイル-書き出しのオプションを変更して、Webレイヤーを削除しながら書き出す
      • Fireworks-ファイル-書き出しのオプション
      • 設定例

画像の切り出しをやってくれるツールもあるみたいです。

実際にオリジナルのマップを作成する場合には、文字を入れたりもするでしょうから、縮尺によって文字サイズを変更したい場合も出るはずです。
ちなみに、Sampleもクレジット表記部分は、ズームレベルによって大きさを変えている

スクリプト

サンプル

スペシャルサンクス
Sampleで使用しているイラストは、高田さんに無理言って借りちゃいました。
ありがとうございます。
プロジェクト管理ツールBacklog(バックログ)の本体、告知サイトSubversionページのインターフェースデザインも高田さんです。
関連エントリー

Google Maps APIメモ(v2) #3 マーカーがクリックされたら情報ウインドウを表示する

まだまだ基本的なシリーズ
マーカーがクリックされたら情報ウインドウを表示する

サンプル

関連エントリー