make a record of…

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回、値を入れた後、取得するというやり方でやってみた。

/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のプラグインフォルダに入れれば使えます

//使い方：テンプレートで下のように書く（改行は必要ない。見やすくしてるだけ）
{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を使うようにしたい人には使える方法なのかも。

2014/07/14

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

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

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

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

2014/06/27

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

ブラウザはログインが必要なサイトで、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;などとして、見た目上は見つからないようにして対応した。