make a record of…

2017/04/08

[createjs] ステージ上をドラッグしている途中のマウス位置を取得する

gihyo.jpのcreatejsの記事を実際にやってみてちょっとひっかかった
http://gihyo.jp/design/serial/01/createjs/0009

記事は2013年のもので、createjs側の書き方が変わっていたみたい
記事内ではTickerでstage.mouseXでマウス位置を取得していたが、easeljsのバージョン0.8.2ではマウスを移動しても、ドラッグしようとしてmousedownした際の位置の値が返ってくるだけで移動した後の位置は取得できなかった

新しい書き方はstageに対して「stagemousemove」というイベントを使うようだ。
これでタッチデバイスも反応するのかは調べてみよう

let stage = new createjs.Stage(canvasElement);
stage.addEventListener('stagemousemove', function(){
//ドラッグ中にしたい処理
});

シェイプなどのインスタンスをドラッグする際は「pressmove」というイベントらしい。

2015/04/19

keyframesアニメーションをメディアクエリの中に書くとIEで動かない

keyramesアニメーションを@media ....の中に書くと、IEではそのkeyframesアニメーションが動かない。

keyframesアニメーションはmediaクエリの外に書かないといけない。
ちょっと引っかかってしまった。
日本語の情報が見つからなかったのでメモっとこう

2015/02/20

[compasscss] cssスプライトのファイル名をシンプルにした場合のキャッシュ対策

view plain print ?

compassのcssスプライト作成時にファイル名につく乱数を削除して、シンプルな名前にすることができる。

compassのcssスプライト作成時にファイル名につく乱数を削除して、シンプルな名前にすることができる。

view plain print ?

参考：<a href="http://satussy.blogspot.jp/2013/08/compass-css.html">[compass] cssスプライト画像のファイル名をシンプルにする</a>

参考：[compass] cssスプライト画像のファイル名をシンプルにする

view plain print ?

これだとファイルがキャッシュされて、ファイルを変更しても古い画像が表示されてしまう可能性がある。

これだとファイルがキャッシュされて、ファイルを変更しても古い画像が表示されてしまう可能性がある。

view plain print ?

その場合は下記のコードをconfig.rbに追加。

その場合は下記のコードをconfig.rbに追加。

view plain print ?

「**.css?Owoiu93k2djhr」という風にファイル名の後ろに乱数をつけてキャッシュを読み込まないように対策できる。

「**.css?Owoiu93k2djhr」という風にファイル名の後ろに乱数をつけてキャッシュを読み込まないように対策できる。

view plain print ?

on_stylesheet_saved do |filename|
if File.exists?(filename)
css = File.read filename
File.open(filename, 'w+') do |f|
rand = rand(100000000)
str = '.png?' + rand.to_s
f << css.gsub(%r{-s[a-z0-9]{10}\.png}, str)
end
end
end
# ----------------------------------------

on_stylesheet_saved do |filename|
  if File.exists?(filename)
    css = File.read filename
    File.open(filename, 'w+') do |f|
     rand = rand(100000000)
     str = '.png?' + rand.to_s
      f << css.gsub(%r{-s[a-z0-9]{10}\.png}, str)
    end
  end
end
# ----------------------------------------

2014/10/23

preprosの動作が遅い場合の対処法

preprosは動作がすごく遅くなる場合がある
自分の経験だとscssファイルを分割しすぎると遅くなるように感じる

そこは制作方法なので、どうしようもないけどprepros側でできる対応

チェックするサイトを減らす
プロジェクト一覧の横の緑の○をクリックすると機能をon / offできる

チェックするフォルダを減らす
プロジェクトを選択
↓
下の歯車ボタン（Project Settings）をクリック
↓
「Project Filters」をチェック
↓
チェックしなくていいフォルダをカンマ区切りで記入
※フォルダ構成にもよるが、自分はcss, js, sass以外は除外する
※逆に特定のフォルダだけをチェックするってできたらいいけど。もしかしたら正規表現なども使えるのかも

2014/10/17

jQuery.dataとhtml5のdata-でどちらが速いか試してみた

状態や何かしらの値を要素と関連づいた状態で保存したい時がある。
例えばアコーディオンUIで今開いてる状態か閉じてる状態か…など。
（アコーディオンの場合はクラス名で良さそうだけど）

思いついたのはjQueryのdataメソッドを使う方法とhtml5のdata-**を使う方法
どっちが速いのか試してみた
それぞれ1000回、値を入れた後、取得するというやり方でやってみた。

view plain print ?

/jQueryのdataの場合
$(要素).data('名前', 値);
//7ms
//html5のdata-の場合
$(要素).attr('data-名前', 値);
//11ms
※chromeで測定

/jQueryのdataの場合
$(要素).data('名前', 値);
//7ms

//html5のdata-の場合
$(要素).attr('data-名前', 値);
//11ms

※chromeで測定

測ってみたらdataを使う方が若干早かったけど、気にしなくてもいい程度だった。
html5の方がhtmlを変更する分、ずっと遅いのかと思っていたがそんなことなかった。

2014/10/02

[smarty] テンプレート側で連想配列をアサインするプラグイン

Smarty使ってると、テンプレート側で配列を作りたくなる時がある。
連想配列をアサインするプラグインを作った。
https://github.com/satussy/smarty-assignArr ダウンロードしてsmartyのプラグインフォルダに入れれば使えます

view plain print ?

//使い方：テンプレートで下のように書く（改行は必要ない。見やすくしてるだけ）
{assignArr
valName="hensuumei"
test1="テスト1"
test2="テスト2"
}
//中身を見てみると
{$hensuumei|debug_print_var}
array{
test1 => "テスト1",
test2 => "テスト2"
}
//というふうに変数が使えるようになる

//使い方：テンプレートで下のように書く（改行は必要ない。見やすくしてるだけ）
{assignArr
        valName="hensuumei"
        test1="テスト1"
        test2="テスト2"
    }

//中身を見てみると
{$hensuumei|debug_print_var}

array{
  test1 => "テスト1",
  test2 => "テスト2"
}

//というふうに変数が使えるようになる

連想配列じゃない、ただの配列をアサインするやつも作ろう

2014/08/13

Android 2.x~で拡大縮小も可能なままposition: fixedを使う方法

結論
cssのkeyframeアニメーションを使うとposition:fixedが有効になる

ちょっとはまってしまったのでメモ
スマートフォン向けのサイトで、facebookみたいに横から出てくるメニューを作った。
Androidf 2.x~はそのままではoverflow: scrollもposition:fixedも効かないので、スクロールしたらメニューもそのまま一緒にスクロールされるようにした…はずだった。

が、ある時からメニューがfixedになってしまて、スクロールしても動くのは横にずれていったメインのコンテンツ部分のみ。
メニューは定位置のまま。それだとウィンドウの外に出てしまったメニューを見ることができない。

viewportにuser-scalable=noと入れるとposition: fixedが効くようになるという話だったが、そんな指定はしていない。

原因を探してみると、どうやらkeyframesアニメーションを使うと、position: fixedが効くようになるらしい。
拡大縮小もできるようにしたままfixedを使うようにしたい人には使える方法なのかも。