2月 2012
4件の投稿
3タグ
Androidのレンダリングでハマったので対応策を書いてみる
まぁ大したことはしていないのだけど。
* { -webkit-backface-visibility: hidden; }
を追加しただけ。
Androidはレンダリング周りが弱く、CSSでアニメーションさせてもあまり綺麗には動きません。でもゲームのようなものだとやっぱり綺麗にアニメーションさせたい。でも・・というジレンマ。 そこで今回の手法を使うと、レンダリング周りが改善されるかもしれない、というメモ。
この方法は、どこかのバグリストで書いてあったことで、動かしている要素だけに指定してもあまり改善が見られなかったのだけど、思い切って全部につけてみたらだいぶ改善されたイメージ。（とはいえ体感でしかないので、効果が確実にある保証はありません）
...
5タグ
Android3.xでAudioを使う場合はビットレートを32kbpsくらいにしたほうがいいかも
Android3.x系だけなのか、全体的にかは検証していませんが、少なくとも3.x系ではビットレートを大きめにするとかなりきびしい印象。
32kbpsにしてやっと問題ない感じで再生できた。 もしかしたらもう少し上でもいいかもしれないけど、SEとかサポート的な位置づけのものであればもろもろ考慮して32kbpsくらいにしたほうがいいかも。
4タグ
Androidブラウザでのレンダリング注意点
完全にメモ。今さら感あるかもしれないけど、ハマったので。
Androidのブラウザでは、Opacityやdisplay、visibilityなどのいわゆるレンダリングが大きく関与する部分は期待できない。（画面がちらつく、処理が遅くなるなど）
ただ、すでにレンダリングされているもの（表示済のもの）の移動をするだけの場合は意外とスムーズに動くので、必要要素をいったん全部表示状態にしておき、positionやtransformなどで画面外に飛ばして、表示が必要になった段階で移動すると比較的スムーズに表示させることができる。
なので、画面外から移動してくるような演出にしか使えないけど・・。
3タグ
Androidだとコンテンツがほとんどない状況だとJSが読み込まれない？
なんだか軽くハマったのでメモ。 Android3.0の挙動なのか、Android全体の挙動なのかは分からないけど、コンテンツがほとんどない（body要素の中にp要素がひとつしかない、くらいの）場合、なぜかhead内でもbody内でも、どちらでJSの読み込みを指定しても実行されなかった。
試しにJSが実行される環境のHTMLだけをコピペして、JSのパスを、テストしていたJSファイルに書き換えるだけの処理をしたらなぜかJSが読み込まれて正常に動作した。
読み込み完了のタイミングの問題かもしれないけど、ちょっとしたテストを書いて試す、みたいなときにハマるかも。ということで備忘録。
1月 2012
2件の投稿
3タグ
SenchaTouchの動画チュートリアル。英語だけどわかりやすいｗ
Panel
http://www.sencha.com/learn/intro-to-panels/
tab-panel
http://www.sencha.com/learn/tabs-and-toolbars/
XTemplate
http://docs.sencha.com/touch/1-1/#!/video/16289757
layout
http://www.sencha.com/learn/intro-to-layouts/
http://www.sencha.com/learn/layouts-walkthrough/
4タグ
MacOSXのLionのスクロールで、バイン、って動くのを止める。
MaxOSXのLionから、スクロールが上端（下端）まで行くとそれ以上ない、ということを明示するためにiOSのようにぐぐぐ・・ばいん！っていう動作が加わりました。（てかこれ名称あんの？）
個人的には気に入っていて好きなんですが、Webサイトでブラウザの表示領域でコンテンツを固定する、なんていうのは最近よくあると思うです。（width: 100%, height: 100みたいな）
そしてコンテンツ内でなにかスクロール動作があると、このぐぐぐ・・ばいん！っていうのが発動するわけです。bodyにoverflow: hiddenを指定してもなってしまいます。
が、html要素にも同様にoverflow: hiddenを指定しておいてあげるとこのアニメーションがなくなるようです。なんか画面が動いて気持ち悪いなーっていうときに入れておくとよさげです。
12月 2011
2件の投稿
3タグ
Google Chromeでapplication cacheを消す方法
いやー、何回やっても忘れるのでメモ。
chrome://appcache-internals/
と入力すると、キャッシュされている情報一覧が出てくる。
Element.style.MozTransitionDurationでハマる。
表題の値を変更する際、0 に初期化しようと思って
Element.style.MozTransitionDuration = 0;
ってやったら初期化されず、
Element.style.MozTransitionDuration = '0ms';
と、テキストで与えたら動いた。WebKitだと数値でも動いていただけにハマった・・。
11月 2011
8件の投稿
7タグ
iOS5から、event.pageXが取れるようになったみたい
ちょっとハマったのでメモ。
var test1 = document.querySelector('#test1'),
test2 = document.querySelector('#test2');
test1.addEventListener('touchstart', function (e) {
alert(e.pageX);
}, false);
test2.addEventListener('touchstart', function (e) {
alert(e.touches[0].pageX);
}, false);
...
3タグ
Sencha TouchでLoading maskを表示する
Panelクラスの”setLoading”メソッドで、そのパネルのLoading maskを表示できるよう。マスクしたいときは”true”を、消したいときは”false”を渡す。trueにはコンフィグオプションも指定可能。
var panel = new Ext.Panel({});
//マスクを表示
panel.setLoading(true);
//マスクを非表示
panel.setLoading(false);
showAnimationのdirectionの種類 for Sencha Touch
直感である程度指定できますが、思い出せなかったりするのでメモ。 Sencha Touchのパネル生成時、showAnimationでslideやpopなどいくつか指定ができますが、さらに方向も指定できます。それが`direction`。
directionに渡せるのは、
up, down, left, right
のよう。 それ以外にもあるかもしれないけど、Document見ても載ってなかった・・。 とはいえ、方向としてはこれくらいしかないと思うので十分でしょう。 ちなみに指定の仕方は↓
var pPanel = new Ext.Panel({
//initialize
});
pPanel.show({
type: 'slide',
direction: 'left'
});
3タグ
Davis.jsで全ルートでごにょごにょする方法
全部のルートに同じ関数実行させるのもスマートじゃないなーと思っていたら、ありました。ということでメモ。方法は以下。
app.before(function (req) {
// will run before all routes
})
app.after(function (req) {
// will run after all routes
})
app.before(function)で、パスを指定せずに関数を指定すると全ルートで発火するようになるみたいです。 afterとbeforeは読んで名のごとく。処理をどのタイミングでやりたいかによって変える感じになると思います。
animationでopacityを同時に設定すると、Androidでopacityの遷移だけ無視され...
テラカオス。opacityと一緒にアニメーションを設定すると、opacityが無視される。0→1の場合は透明なまま、いきなり出現。1→0の場合は透明にならずにアニメーション。 しかも、0→100%時の挙動で、0→80%→100%とポジションを追加するとなぜか透明度だけ適用されるという始末。 ちなみに透明度のアニメーションとそれ以外を分けるとどうやらうまく 動くらしい。（グレイのボックス）
▼サンプル http://jsdo.it/edo_m18/wOVk
3タグ
Davis.jsで動的にRequestを生成する
Davis.js、意外とヨサゲです。Node.jsとの連携がやりやすいかも。
と、ふと実装をしていてJSで動的に生成したものからのDavisのRequestを生成する方法を見つけたのでメモ。takazudoさんの記事を参考にさせてもらいましたー→ Davis.jsでHistory APIを比較的お手軽に使う
具体的にはこんな感じ↓
Davis.location.assign(new Davis.Request({
method: 'get',
fullPath: '/path/to/something',
title: 'something title'
}));
ASのnew URLRequest的なイメージかな。自分は。 ...
3タグ
Sencha Touchの表示されたパネルにDOMのイベントを追加する
大したことじゃないんですが、new Ext.Panel()で生成された要素に対して、通常のDOMイベントをアタッチするのがなかなかどうしていいか分からなかったのでそれのメモ。
具体的には以下のようにするとできるみたい。
var panel = new Ext.Panel({
fullscreen: true,
scroll: 'vertical',
html: 'This is a panel',
listeners: {
afterrender: function(pl){
//pl(panel)内のelに対してイベントを設定してやる
pl.el.on('click', function(){
...
3タグ
Sencha Touchでフローティングパネルを生成する方法メモ
Sencha Touchでフローティングパネルを生成する方法メモ。
var pPanel = new Ext.Panel({
floating: true, //これをtrueにする
cls: 'popupPanel', //パネルに追加したいクラス名
width: '100%',
height: '100%',
modal: true,
centered: true,
listeners: {
show: {
fn: function () {
//表示されたときの処理
...
10月 2011
9件の投稿
5タグ
Mac OSX Lionにアップデートしたときにhostsの名前解決が遅くなる件の回避方法
ということで、色々と調べたり質問したりした結果、これでいけるかも、というのが分かったのでメモ。
問題としては、
Apacheを自分で立てている。
Virtualnameでドメインを設定
hostsで上記ドメインを自分自身に設定
となっている場合に、Lionにアップデートするとなぜか名前解決に異常に時間がかかる、というもの。
これについての回避方法は、IPv6の設定も一緒にしておくとどうやら解決するらしい。 こんな感じ↓
127.0.0.1 exsample.dev
::1 exsample.dev
という感じに。 またよく使われる（？）hoge.localというのもよくない模様。予約語？みたいな扱いになってるらしく、.localというTLD(TOP Level Domain)は使わないようにしておいたほうが安全かも。
...
5タグ
Sencha TouchのScrollViewのアップデート（リフレッシュ）
未だに中身が書き換わったタイミング、というイベントは分からないが（というか、そもそもpanel.updateを使った場合ってイベント発生しないんじゃっていう不安も・・）、中身が書き換わったあとに
panel.doComponentLayout();
を実行するとScrollできる範囲がアップデートされるところまでは確認した。
※ちなみに「panel」はExt.Panelを継承したコンポーネント。
4タグ
Sencha touchのカルーセルに動的にコンテンツを追加
Sencha touchのカルーセルに、動的にコンテンツを追加する方法を調べた。 基本的にはベースになっているクラスを参考にすればいいと思うけど、細かいところとか調べるのが面倒なので、サンプルなどから推測してできたやつをメモ。 具体例は↓に。
new Ext.Application({
launch: function() {
// Create a Carousel of Items
var carousel1 = new Ext.Carousel({
defaults: { cls: 'card' },
items: [{
html: '<h1>Carousel</h1><p>Navigate the...
5タグ
Secncha TouchのScrollViewでスクロールさせるメモ
Document読んでいてもいまいち具体的な使い方が見つからず、やっとそれらしく動いたのでメモ。
new Ext.Application({
launch: function() {
var scroller = new Ext.util.ScrollView( document.getElementById('hoge'), {
direction: 'vertical'
});
}
});
こんな感じで、Ext.Applicationのlaunch時に、Ext.util.ScrollViewをnewしてあげる。引数はDOMの参照とOption。 ちなみにここで指定している’hoge’自体をスクロールできるようにするものなので、それをラップするcontainerにあたる部分が親に必要。 ...
touchイベント、transform3d対応かどうかのチェック
var support = {
transform3d: ('WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix()),
touch: ('ontouchstart' in window)
}
touchイベントがあるか、transform3dに対応しているかのチェック方法。 使い方は
touchStartEvent = support.touch ? 'touchstart' : 'mousedown';
みたいにして使える。 よく使ってるけど、いちおうメモとして。
3タグ
Androidのアドレスバーの高さの取り方
(window.outerHeight/window.devicePixelRatio) - window.innerHeight
でいけるらしい。
[追記] どうも、innerとouterの値が逆転する端末もあるみたい・・となると使えないかも、これ。(少なくともGalaxy S2で確認)
7タグ
CSSのAnimation系Eventを持っているかのチェック
@hokacchaさんに教えてもらった方法。 document.createEventでアニメーション系のイベントを生成して、それがエラーになるかならないかで判断。
var ret = false;
['WebKit', 'O', 'Moz', ''].forEach(function(prefix) {
try {
document.createEvent(prefix + 'AnimationEvent');
ret = true;
}
catch (e) {}
}
console.log(ret);
追記。スタイルが存在するかどうかでチェックする方法もあるみたい。 http://jsdo.it/GeckoTang/1BLT
やり方はこんな感じ↓
var prop = [
'webkitTransitionProperty',
...
jQueryでcssのbackgroundPositionXなどを使うときの注意
どうもFirefoxでは ‘px’ を明示しないとちゃんと動かないぽい。 中をまだ見てないけど、jQueryの独自実装というか、ネイティブの機能ではなくて勝手によしなにしてくれていると思ってたら違ってた。
ので、これを使うときは要注意。
\uXXXX形式に簡単にUnicodeエスケープする方法
Firefoxで、以下のように実行すると変換後の文字列が出力される。JSファイルにちょっとしたテキストを埋め込むときはいいかも。
uneval('テキスト');
9月 2011
14件の投稿
2タグ
vimで、sassファイル保存時にひとつ上の階層に書きだすスクリプト
すげー冗長だけど、なんとか形になったので貼っておくｗ ちなみに、vimからsassを変換する（–watchしない）を参考にしました。
function! Sass_convert()
let scss = expand('%:p')
let filename = expand('%:t:r')
let scsspath = substitute(scss, '\v(/.*)/(.*)', '\1', '')
let parent = substitute(scsspath, '\v(/.*)/(.*)', '\1', '')
let css = parent . '/' . filename . '.css'
let cmd = printf('sass -t compressed %s %s &', scss, css)
...
2タグ
Vim Tips
:'<,'>g/^\d/exec "normal 0\<C-a>"
処理したい行を選択肢た後、上記のコマンド（:’<,’>は、選択肢たあとに「：」を入力すると自動で挿入される）を使うと、g//でマッチした部分に対してコマンドを実行することができる。
サンプルでは、0で行頭に移動、<C-a>でそれぞれの行をインクリメントする、というもの。 （行頭に数字があった場合）
使いどころあるかも。
5タグ
Firefoxのanimationendの注意点
FirefoxのCSS Animationの終了のトリガーは、「animationend(mozの接頭辞はつかない)」とすべて小文字。 webkit系などと指定が違うので注意。
jQueryのform関連メソッド - .serialize()
jQueryのform関連メソッド。よく忘れるのでメモ。
$('#formElement').submit(function () {
alert($(this).serialize());
});
これで、フォーム内にあるinput要素から自動でシリアライズしてくれる。書式は↓
a=1&b=2&c=3&d=4&e=5
階層の深いところにあるプロパティを取得する際に、プロパティがあるかをチェックしながら返す処理
タイトルなげーｗ
とりあえず言いたいことはこれだけ↓
var data = { hoge: { foo: { fuga: 'text' } } },
d = data;
alert((d = d.hoge) && (d = d.foo) && (d = d.fuga));
こうすると、何回も同じプロパティを書かなくて済む。
3タグ
アクセシビリティのZOOM機能をオンにしているとuser-scalableが無効になる
どうやら、iOSでは一般設定の「アクセシビリティ」の「ZOOM機能」をオンにしておくと、meta要素で指定したviewportの「user-scalable」の設定が無視され、必ずピンチイン・アウトができる模様。前にオンにしていてすっかり忘れていた。iPhone案件やってる時は気を付けないと。
2タグ
MySQLのデータベースの文字コードを変更
ALTER DATABASE database name DEFAULT CHARACTER SET utf8;
ALTER TABLE table name DEFAULT CHARACTER SET utf8;
▼my.cnfの追加設定
[client]
default-character-set=utf8
[mysqld]
skip-character-set-client-handshake
character-set-server = utf8
collation-server = utf8_general_ci
init-connect = SET NAMES utf8
MySQLのversionによっては、default…ではなく、character-set-serverのみを使う。 MySQLは全然わからん・・。勉強せねば。
...
3タグ
MacVimから参照しているシェルの環境設定
.zshenv
.zshenvで初期設定をしているので、MacVimは基本こちらを参照。 .zshrcはzsh起動時に読み込まれるファイル。
2タグ
Vimの複数ウィンドウでスクロールを同期
:set scrollbind (:set scb ←短縮) :set noscb で解除
このコマンドを、同期したいウィンドウすべてで実行する。
意外と便利。
KeyRemap4Macbookのちょっとした設定メモ。
<root>
<item>
<name>Change original settings.</name>
<list>
<item>
<name>Option L</name>
<appendix>Option_L to OPTION_L (When type only, send Space) (Modifier)</appendix>
<identifier>remap.optionl_to_escape</identifier>
<autogen>--KeyOverlaidModifier--...
createContextualFragmentを使うときの注意
javascript:(function(){
var s='hoge';
var range=document.createRange();
range.selectNodeContents(document.body); /*この一行が大事!*/
var df=range.createContextualFragment(s);
document.body.appendChild(df);
})()
エラーが出たり、変なノードが挿入されてしまう理由は、document.createRange() した瞬間には Range の始点が HTMLDocument になるため (以下のブックマークレットで試すと Firefox、Safari、Opera のどれも HTMLDocument が得られる)、div 要素を作成しようとしたとき本来無くてはならないはずの body...
zsh / bashで使ってるPromptの色設定
- zsh版
PROMPT=$'%{\e[33m%}%~%{\e[00m%}
%{\e[36m%}%n@%m$%{\e[00m%} '
- bash版
PROMPT=$'%{\e[33m%}%~%{\e[00m%}
%{\e[36m%}%n@%m$%{\e[00m%} '
export PS1='\[\033[1;32m\]\w
\[\033[1;33m\]\u@\H\$ \[\033[1;37m\]'
weinreのAPIのURL
APIのURLがさくっと見つからなかったので、念のためあとから使う用にメモ。以下のURLでデバッグできる。
http://debug.phonegap.com/client/#hoge
node.jsのsocket.ioインストールでハマったのでメモ。
まぁsocket.ioで、っていうか、ただのtarのversionが古かっただけなのだけどｗ 参考にした記事↓ http://d.hatena.ne.jp/motsat/20110813/1313214923
wget http://files1.directadmin.com/services/all/tar-1.26.tar.gz
tar xzvf tar-1.26.tar.gz
cd tar-1.26
FORCE_UNSAFE_CONFIGURE=1
export FORCE_UNSAFE_CONFIGURE
./configure && make && make install
tarのversion upしてからnpm installしたらやっといけた。
8月 2011
2件の投稿
コマンドラインで日本語のファイル名のリストを出力する方法
perl -MFile::Find -e ‘find(sub {print “$File::Find::name \n” if $_ =~ /[\x8E\xA1-\xFE]/;}, “.”);’
7月 2011
2件の投稿
iOSでスクリーンの下端の位置を取る
window.scrollY + window.innerHeight
で一番下端の値を取ることができる。
しかし、touchendイベントにこの値を取得する関数をバインドした場合、touchendのタイミングで取れる値と慣性でスクロールしたあとの値が異なるため、setTimeoutなどを用いて慣性スクロールを考慮した設計が必要。
iOSで、触れた瞬間にフッターを消す動作の注意
transitionでopacity: 0にして消し、 touchendでopacity: 1に戻す場合、 なぜかイベントが複数発火したような現象になる。
touchstat時はtransitionなしで動作させるとうまく行く。
5月 2011
1件の投稿
-webkit-appearanceの初期値
初期値は仕様では「normal」だが、webkitの場合は「initial」を使う。
これを指定しないと、input[type=search]などでスタイルが適用できない。
12月 2009
1件の投稿
Google リーダー →
10月 2009
1件の投稿
IT勉強会カレンダー
3月 2008
1件の投稿
[Flash] 下レイヤーを反応させない方法
onClipEvent(load){ this.onRelease = false; useHandCursor = false }
1月 2008
1件の投稿
JavaScriptでIEかどうかをたったの1行で判別する方法
なんと、次の1行だけで、isMSIE 変数に、 IEで見れば true 、そうでなければ false を代入することができる。 var isMSIE = /*@cc_on!@*/false;
12月 2007
1件の投稿
文字認証サービス名「captcha」
です。
11月 2007
2件の投稿
Star's Logo tutorial for Photoshop →