make a record of…

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

2017-04-08T23:32:00.002+09:00

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」というイベントらしい。

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

2015-04-19T10:45:00.002+09:00

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

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

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

2015-02-20T15:50:00.004+09:00

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

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

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

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

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

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
# ----------------------------------------

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

2014-10-23T15:56:00.002+09:00

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

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

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

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

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

2014-10-17T09:50:00.002+09:00

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

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

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

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

※chromeで測定

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

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

2014-10-02T11:08:00.001+09:00

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

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

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

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

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

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

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

2014-08-13T13:44:00.002+09:00

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

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

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

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

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

Google Web fontで今後使いたいなと思ったフォント

2014-07-23T13:45:00.003+09:00

Alfa Slab One

Bevan

Luckiest Guy

Sorts Mill Goudy

Rye

Diplomata

Jacques Francois Shadow

Milonga

Sancreek

Slackey

Nova Square

HTML5で書いているサイトはIE8以下で印刷するとレイアウトが崩れる

2014-07-14T16:23:00.000+09:00

IE8はhtml5の要素に対応していないので、何も対策しないとレイアウトが崩れまくる。
なので、IE8以下向けに「html5.js」を読み込ませて対応してる。

それで概ね表示は大丈夫になるんだけど、印刷時には「html5.js」は効かないらしい。
印刷時にもレイアウトを崩さないようにするためには,「html5shiv-printshiv.js」を読み込ませる必要がある

参考：https://code.google.com/p/html5shiv-printshiv/

ログイン時にブラウザが覚えているID,パスワードを入力させない方法

2014-06-27T01:14:00.002+09:00

ブラウザはログインが必要なサイトで、ID,パスワードを覚えていてくれて、使う際にはすごいありがたいんだけど、どうしても自動で入力をさせずに、手動で入力させたいって場合があった。

具体的にはあまり書けないが、Web上だけで完結するのではなく、Webと連動して対面でサービスを行うキャンペーン時に、ID,パスワードが必要になるため、どうしても対面前に一度、手入力して自分のパスワードを思い出しておいてほしい、という状況。

最初に考えたのはinputのnameを変えるという方法。
これは機能しなかった。nameを変えてもなぜかブラウザが覚えているID,パスワードが入力されてしまう。

次に考えたのは、Javascriptでinputのvalueを空にする方法
windowのload時にvalueを空にする処理をしたが、ブラウザが自動入力するのはその後のタイミングらしく、一旦空にした後に、valueがはいってしまった。

次に考えたのが、setIntervalとかで、定期的にinputの値を空にする方法。
IDのinputにフォーカスされたタイミングでsetIntervalを解除する。
これは一応うまく動作していたが、iPhoneやAndroid、IEなどブラウザによってはinputのフォーカスイベントがうまく動作しない可能性もあるのでは…と考え、そうなってしまったら、どれだけ手動で入力しても定期的に値を空にされてはたまらんと思いやめた。

最終的にとった方法は
name="id"のinputなどの他にname="id-2"、name="password-2"などのinputを作り、それを見えないように設置するという方法。
これをやると似た名前のどちらかにしか値が入らなくなった。
ただ、先に（または後に）記述されている方のinputに…とかではなく、ブラウザによってはidは先に書かれたinputに、パスワードは後に書かれたinputに…となってしまっていた。
複数のブラウザで試行錯誤して順番を変え、正しいinputには値が入らない順番を探した。
どういった法則があるのかはわからずじまい。

cssでdisplay:noneにしてしまうとブラウザがそのinputを無視してしまうようで、height: 0; width:0; position: absolute; top: 0; right: 0;などとして、見た目上は見つからないようにして対応した。

iosでcssでhover処理を入れていたaタグがクリック出来ない

2014-04-15T14:19:00.000+09:00

タイトルの通り、hover処理を入れているaタグがiPhoneでクリックできなくなってた。
原因がわからなかったので対症療法でしか対応できなかった。

以下対応方法です。
クリックイベントが起きなくなってしまっていたので、touchstartでaタグのhrefを取って、ページを移動させてます。

$('a').on 'touchstart', ->
 location.href = this.getAttribute('href')

hover時にdisplay:blockしているaタグ要素の中身を表示させたりしているので、それが絡んでるんだと思います。
同じような状況になって、解決出来たって人いたら教えてください。

[js] IEのデバッグコンソールでJavaScriptのオブジェクトなどの中身を見たい

2014-04-08T20:39:00.002+09:00

console.logを使ってオブジェクトの中身を見たい！って時に、IEは[Object object]なんていう文字列を吐いてくる。
で、中身は見れず。

その対策。
console.log(JSON.stringify(中身見たい変数など));

1行の文字列になるけど、これで中身は見れる

[jQuery] 取得済みの要素を合体させて操作する

2014-03-14T17:06:00.005+09:00

jQueryで取得した2つの要素をまとめて、同じ処理をしたいって時がある。

先に取得していた要素1と後から取得した要素2に対して、途中までは別々の処理をするのだが、途中からは同じ処理をする…など。

はじめに2つまとめて取って、その中から要素をわける方がいいのかもしれないけど、処理の流れによっては…後からまとめる方がスッキリしたりする場合もあるかも

var $elem1 = $('.elem-1');
var $elem2 = $('.elem-2');
var $matome = $([$elem1.get(0), $elem2.get(0)]);

$matome.css... //2つの要素をまとめて処理する

console.timeで時間測ってみたが、chromeではまとめる方が、新たにまとめて取得するより、3倍くらい速かった。

iPhoneでiframeがはみ出してしまう

2014-02-10T18:07:00.002+09:00

twitterのウィジェットを使っているサイトをiPhoneで見ると、twitterのiframeが画面の外まで伸びてしまっていた。

cssではmax-width: 100%;と指定している。
Androidでは問題なく表示されていたが、iPhoneではどうもうまく動かないらしい。

いろいろcssを変更してみた感じだと、width,max-widthの値を％で指定するとうまく効いてくれないみたい。
px指定だとちゃんと変更された。

親要素の問題かもしれない。
ちょっと調べてみよう。

[javascript] PreprosでZeptoを連結させるとエラーになった

2014-01-20T11:34:00.002+09:00

普段、Preprosを使って、読み込むJavaScriptファイルを１つのファイルに連結してよみこんでるんだけど、Zeptoでそれをやったらエラーになった。

対応策は簡単
ZeptoのJSの最後に;（セミコロン）を追加するだけ。

処理が終わっていないと認識されてエラーになっていたみたい。
これだとZeptoをバージョンアップさせるたびにやらないといけなくなるな…

Zeptoだけ別ファイルで読みこめば問題は起きないが、読み込むファイルは減らしたい…

さすがにライブラリをバージョンアップしといて動作確認せずにファイルを更新…なんてことはないだろうとたかを括って、今回は１つに連結してやることにした。

[jQuery] position()で位置が取得できない

2013-12-27T10:49:00.003+09:00

サイト内で使用している画像を保存させたくない場合に、透明のgif画像を指定の画像の上にかぶせて保存させづらく処理をした。

その際、jQueryのposition関数で画像の位置を取得していたのだが、場合によってかぶせる透明画像の位置がうまく重ならず、左にずれてしまうことがあった。

調べてみるとposition()で取得した値がtop, leftともに期待していたものと違っていた。

今回の対策としてはposition()をoffset()に変更することで対応できた。

position()の場合、スタイルのpositionがrelative, absolute, fixedになってる直近の親要素の左上を起点にして、相対的な位置を返してくるようだ。
htmlタグまでさかのぼってpositionがすべてstaticのままだったらhtmlタグが起点になる

offset()の場合、先祖要素のposition()は無視して、ページの左上からの位置を返すらしい。

なので、position()をoffset()に変えれば常にうまくいくというものでもなく、用途によって使い分ける必要があるようだ。
参考：jQuery の位置・サイズ関連メソッドまとめ

preprosでJavaScriptを連結させる

2013-10-22T19:39:00.001+09:00

最近preprosを使ってます。
windows版codekitなんて呼ばれてるらしいす。
自分はmacなんですが、無料なんでcodekitじゃなくてこっちを使ってます。
いろいろ便利なツールを世界中の人々が開発してくれていて、とてもありがたや

複数のJavaScriptファイルを連結させて1つのファイルにしたかった。
日本語で紹介してるブログなんかを読むと、「JSの連結・圧縮もできます（やったね！）」みたいなこと書いてるんですが、実際のやり方書いてるとこは見つからんかったです

公式サイト見たらもちろん書いてました。

//jsファイルに↓こう書くと…
//@prepros-append first.js
//first.jsの中身がここに書かれる。頭のスラッシュ2つも必要です。

//↓prependもある。↑上のappendよりも先に記述される
//@prepros-prepend second.js

指定した箇所に、ファイルの中身が圧縮された状態で追加されるので、他の箇所には普通に処理を書いたりもできます。

$(function(){
 console.log('uoooooooOOOOOOUU!!!!!!');
 //@prepros-append second.js
 console.log('GYAAAAAAAaaaaaaaaa…….');
})

codekitのも使えるよ、とのこと。
//@codekit-prepend ***.js
//@codekit-append ***.js

デフォルトではjs/min/にファイルを書き出すようです。参考：公式サイトJS連結に関するページ

2013-09-30T18:28:00.002+09:00

[bootstrap] Zeptoとbootstrapを一緒に使おうとしてエラーが出た場合の対処

bootstrap.jsはjQueryありきで書かれている箇所があるので、Zeptoに変えるとエラーが出る。
その際の対処法

グローバルのjQueryをZeptoで上書き。 bootstrap バージョン2.3ではこれでOKだった。参考：http://stackoverflow.com/questions/16160755/using-bootstrap-with-zepto-undefined-is-not-a-function

[compass]rgbaが使えない古いブラウザ向けにも対応できるcompassのプラグイン

2013-09-30T15:46:00.004+09:00

バージョン8以前のIEはcssでrgbaが使えない。
いちいち画像作るのも面倒だったので、探してみたら、IE8以前向けに、自動で画像を作ってcssもつけてくれるプラグインを見つけた。

参考：https://github.com/aaronrussell/compass-rgbapng

■インストールが必要
gem install compass-rgbapng

■config.rbに下記を追加
require "rgbapng"

■cssファイルに下記を追加
@import "rgbapng";

■変数の設定
$rgbapng_path: 'my_pngs';　//自動で作ってくれる画像を格納するフォルダ名
$rgbapng_px_size: 8; //作成する画像のサイズ

■新しく追加されたMIXINを使うと動作する
rgba-background($color, [$path, $pixel]);

これが
@include rgba-background(rgba(0,0,0,0.75));

こうなる
background: url('/images/rgbapng/000000bf.png?1282127952');
background: rgba(0, 0, 0, 0.75);

IE6には対応していないようで、もしIE6を使いたいなら‥
・DD_BelatePNGを使う
・自分でIE独自フィルターを使ったMIXINを作る
・Universal styesheetを使う
のどれかを選んだらと言ってくれてます。

firefoxでYouTubeの埋め込みプレーヤーが表示されない

2013-09-18T14:10:00.002+09:00

YouTubeの埋め込みプレーヤーがfirefoxでだけ表示されない現象があった。
使ったのはiframeを使う埋め込みコード。
他のブラウザでは問題なく見れる。

HTMLではちゃんと存在するのだが、見た目は真っ黒。
最初はFLASHのバグかと思っていたのだが、実際はcssとの関係で起きた問題だった。

原因は埋め込みコードを書いた箇所の親要素に、transform:translate3dを適用させていたことだった。
これが適用されていると、YouTubeのプレイヤーが真っ黒になったままになる。

なぜそうなるのか、具体的な原因はまだわかっていないんだけど、とりあえずの原因。

どうしてもtransform:translate3dを使わないといけない場合はどうすればいいんだろう？
YouTubeのAPIで動画のデータを取得して、動画ファイルを直接videoタグで表示させるとかがいいのかな。

windowsのメディアクエリによるリサイズとJavaScriptで登録したリサイズイベントのタイミング

2013-09-11T11:27:00.002+09:00

レスポンシブデザインのサイトで使用するスライドショー的なものを作成した。
ウインドウサイズによって、レイアウトが変わるので、スライドショーもそれに合わせてリサイズするようにした
スライドショー側では、リサイズ後の要素のサイズを取得して、それをもとにスライダーのりサイズ処理をした。
そこがうまく動かない。
要素のサイズの取得がうまくいっていなかった

ウインドウを小さくすると、メディアクエリで設定してあるウインドウサイズでレイアウトが変わる。
その瞬間にJSで取得したサイズをconsole.logで見てみると…

レイアウトが変わる前のサイズが取得されていた。
つまり、cssの設定が反映される前に、JSのサイズ取得の処理が動いたようだ。

Macでは起きず、WindowsでもIEとfirefoxでのみ起きる現象だった。
俺のイメージと違った順序で進んでいたようなのでメモ。

レイアウト変更後のサイズ取得をsetTimeoutで少し遅らせることで対応した。

[js] Youtubeプレイヤーのクリックイベント登録

2013-09-09T19:36:00.002+09:00

あるミュージシャンのサイトでsoundManagerを使って音楽を再生できるようにした。
ページによってはYouTubeが貼られてあるページがあって、YouTubeを再生する時にはBGMは停止することになった。

iPadやらも対象になっているのでYouTubeはiframeで埋め込んでる。
当然iframe内はYouTubeのドメインになっているので、JavaScriptで中を覗くことも、プレイヤーにクリックイベントを登録することもできない。

do ->
 # iframeがひとつしかない状態でしか確認してないので、複数ある場合は要注意
 $iframes = $('iframe')
 $ytFrames = $iframes.filter ->
  # facebookのiframeなどもあるのでsrcをチェック
  if this.src.indexOf 'youtube.com' != -1
   srcParts = this.src.split '/'
   id = srcParts.pop().split('?')[0]
   # YoutubeのAPIで使用するので、動画IDを保存しておく
   this.setAttribute 'data-movieid', id
   # iframeを作り変えるので、その格納用divを作成＆挿入
   $(this).after ''
   return true

 # youtubeのiframeがなければやめる
 if $ytFrames.size() == 0
  return

 #　後々取得しやすいyにクラス名追加
 $ytFrames.addClass 'js-yt-frame'

 # ここはドキュメントに書いてあった。iframeのAPIを使用するために必要なscriptを読み込む
 tag = d.createElement 'script'
 tag.src = 'https://www.youtube.com/iframe_api'
 $('head').append tag

# scriptが読み込まれると、この名前の関数が呼ばれる
@onYouTubeIframeAPIReady = ->
 # 判別用につけたクラス名で取得
 $ytFrames = $('.js-yt-frame')
 $ytFrames.each ->
  $this = $(this)
  # 既存のiframeを新しく作るものと置き換えるので一旦非表示
  $this.hide()
  frame = this
  movieId = frame.getAttribute 'data-movieid'
  #　APIにあるオブジェクトをnew。これでiframeが作られる
  player = new YT.Player 'ytframe-' + movieId,
   # 幅・高さともに200px以上ないと再生できないので、最低値を設定
   width: Math.max(frame.getAttribute('width'), 200)
   height: Math.max(frame.getAttribute('height'), 200)
   videoId: movieId
   events:
    onReady: (e)->
     # もともとあったiframeを削除
     $this.remove()
    onStateChange: (e)->
     # クリックイベント登録
     if e.data == YT.PlayerState.PLAYING
      # 動画が再生状態になった場合の処理
      # 今回はここでsoundManagerを止めた。

     # もちろん停止状態になったら…とかも可能

参考サイト： YouTube Player API Reference for iframe Embeds(英語)

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

2013-08-22T17:23:00.001+09:00

compassでcssスプライト画像を作ると、ファイル名が「sprite-918734128374.png」って感じになる。
しかもsass内のこのスプライト箇所が更新されると、ファイル名も変わる。
これは名前を変えないと各ブラウザにキャッシュされている古い状態の画像が出てしまうことへの対策だと思うんだけど、運営していく上ではちょっと面倒…。

・cssファイルだけでなく画像ファイルもアップしないといけない
・サーバ上の古い画像を削除しないといけない

…書いてみると、それくらい面倒臭がらずにやれやって感じもするが…面倒くさがりなのは、ある種の美徳らしいのでいいことなはず。

他には
・compass以外で画像もcssも変更しづらくなる
ってのもあるけど、これはできればcompass以外で作業しないといけない状況になること自体を避けた方が良さそう。

で、ファイル名をシンプルに「sprite.png」とかにする方法
config.rbに下記を追加する

on_sprite_saved do |filename|
  if File.exists?(filename)
    FileUtils.cp filename, filename.gsub(%r{-s[a-z0-9]{10}\.png$}, '.png')
  end
end

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

参考：How to turn off COMPASS SASS cache busting?

PC版safariでcssアニメーションするとちらつく

2013-08-09T20:05:00.000+09:00

Macのsafariでcssアニメーションさせると、そのアニメーションする要素とは別の部分がちらつくという症状がでた。
iPhoneではなくPC。
具体的な原因ははっきりわからなかったんだけど、transfrom:rotateをアニメーションさせているのをやめたらちらつきは解消された。

チラツキが起きるのはアニメーションの始まる瞬間と終わる瞬間。
アニメーションの途中は問題なし。
検索しても同じような症状の人は見つからず…

--追記
原因はまだ良くわかってないんですが、対処法は見つかった。簡単。
-webkit-backface-visibility: hidden; ↑これを追加するだけ。場合によっては、子要素にも適応させないとだめかも。
参考：CSS3 Animations: the Hiccups and Bugs You’ll Want to Avoid（英語）
-- ココマデ

以下、勝手な推測…
rotateをアニメーションさせようとするとアクセラレータが効いてGPUを使うようになる。
アニメーション終わるとGPUの使用も終了。
CPUとGPUの切り替えの瞬間にちらつく。

同じ動きをしているのにページによってチラツキが起きないページもあったので、ちらついていたのは画面全体ではなく、何かしら条件が揃った要素のみっぽい。

結果的にrotateやめたら、そっちの方が好きな動きだったんで結果オーライ

--add
他にもskewをcssアニメーションしたらちらついたとか…いろいろ。
ずっとChromeでしか確認しないまま作業進めて、そろそろ大詰めってころからsafariでの確認を開始したのが仇になった。
チラツキの原因を探るのに手間がかかってしまう。
cssアニメーションさせるならsafariメインで確認したほうが良さそう。

[TweenMax.js] TweenMaxでのアニメーションの連結

2013-08-08T12:33:00.002+09:00

tween.jsを使ってみようと思っていて、気づいたらTweenMaxを触ってしまっていた。

正直、同じもんだろ？と勘違いしてました。

結局どっちをメインに使って見るかは軽く触ってから判断しようかと

で、tweenMaxのアニメーション連結方法

//複数のアニメーションを連結する場合はtimelineを使う
tl = new TimelineLite()
elem = document.getElementById 'id'
tl.to(elem, 0.4, {bottom: '11px'})
.to(elem, 1, {bottom: 0})

タイムラインは独立したオブジェクトって考えなのかな。