make a record of…: 2014

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;などとして、見た目上は見つからないようにして対応した。

2014/04/15

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

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

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

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

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

2014/04/08

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

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

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

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

2014/03/14

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

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倍くらい速かった。

2014/02/10

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

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

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

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

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

2014/01/20

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

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

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

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

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

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

登録: 投稿 (Atom)