しるてく

技術的な話をします

javascript

絵文字を〓にする

MySQLでutf8mb4にしてなくて絵文字(4バイト文字)をDBに格納できない(その文字以降が突っ込まれない)問題があって、とりあえずjavascriptでアレな文字を〓に変換するやつ。 string.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g, '〓');

ui.routerとdecorator

書いてみたけど使うか分からないのでメモるだけメモっとく。 ui-viewのautoscrollのスクロール位置を固定する https://github.com/angular-ui/ui-router/wiki/Quick-Reference#autoscrollui.routerではui-viewが切り替わった時にautoscrollって属性をつけて…

javascriptのreplaceでまとめて置換する

たとえば、/path/to/:category/:typeみたいなのがあったときに{ category: 'hoge', type: 'fuga' }をわたしてあげると/path/to/hoge/fugaにして欲しいなってとき。replaceの引数にfuctionが使えるので、 var path = '/path/to/:category/:type' var params =…

AngularJSでhover

スマホサイト作っていると、擬似クラスの:hoverが使い物にならなかったりして、何らかの対応*1が必要だったりするんだけど、angularでどうしようかなと思ってng-mouseenterとか使おうかdirective書こうかみたいなこと悩んでいたら、ng-clickの仕組みでタップ…

AngularJSでmoment.js使いたいとき

urish/angular-moment · GitHubってやつがあった。 ほかにもangular-momentjsって名前のやつがいくつかあるけど、↑のやつが一番よさそう。こんな感じで使う。 $scope.date = new Date() $scope.epoch = 1000000000000<time am-time-ago="date"></time> <time am-time-ago="epoch"></time> 数字を渡すと、エポック秒と判断して、…

ngShowの表示非表示でアニメーションさせる

ng-hideにdisplay: none !importantがかかっているので、こんな感じにかけばいいらしい。 これで、アニメ終わったらdisplay: noneしてくれるので、アニメ要素が上にかぶってタップできない、みたいなことも起きないはず。 HTML <div class="animation-element" ng-show="show"> なんかなんかなんかなんかな</div>…

一部のAndroid4.x端末でtouchstartでe.preventDefault()してもclickイベントが発火する

Galaxy Nexus(Android 4.2.2)とか他のAndroid4.1.2の端末で、e.preventDefault()しているにも関わらずclickイベントが呼ばれてしまうバグ? 背景 iScrollを使用しているサービスを一部のAndroid 4.2.2, 4.1.2端末で見ると、clickイベントが2回呼ばれてしまう…

Galaxy S2でiframe内の高さを動的に変えるとタップ位置がおかしくなる

あまり検証していないのでメモ書き程度で。 余裕があれば、ちゃんとDEMO用意したいところ。 問題 iframe内でJSを使って動的にiframeの内容物の高さを変更したときに、Galaxy S2(以外もあるかも)で画面をタップすると、高さが変わる前にその位置にあった要…

obj.length === +obj.length

underscore.jsを読んでいたら面白い書き方を発見した。 if (obj.length === +obj.length) { // hoge } これなにかなーと思ったら、javascriptのObjectにはlengthがないので、こんな感じになるらしい。

gruntでminifyする前にconsole.logを消す

開発環境で読むapp.jsではconsole.logは大量に出したいけど、本番環境で読むapp.min.jsではデバッグ用の記述はなかったようにしたいなーと思って探したらこんなの見つけた。grunt-remove-logging grunt.initConfig removelogging: dist: dest: "app.clean.js…

jqery-pjaxで複数のコンテンツを書き換える

タイトルのようなことをやるにはどうしたら良いかという話。 結論から言うと、書き換えたいデータを全部返して、pjax:successで突っ込んであげれば良いらしい。 前提 <html> <head></head> <body> <div id="header">へっだー</div> <div id="main">めいん</div> <div id="sub">さぶ</div> <div id="footer">ふったー</div> <div id="hoge">おまけ</div> </body> </html> というページのとき、pjaxで#mainと#hogeを書…

iPhone4の表示領域

スマホサイト作るときに、いつもファーストビューどこまでだっけ?と悩むのでメモ。 画面サイズ 320x480 ステータスバー 320x20 検索バー 320x60 メニューバー 320x44 で、表示領域は320x356。でも検索バーはjs使って隠せるので、320x416と思って作れば良い…

Google Maps JavaScript API V3のfitBounds()が全然フィットしてくれない件

やりたいこと google mapでマーカーを複数置いたときに、良い感じにマーカーが全部表示されるようにしたい。こんな感じ。 ためしたこと fitBounds()でできるかなーと思ってやってみると、どうもズームアウトしすぎてしまうらしい。 var position = [ new goo…

aタグを子に持つdivとかをリンカブルにしたい

スマートフォンでリンクがクリックしづらい問題がある。 <div><a href="#">hoge</a></div> とかなら a { display: block; } と書くだけでお気軽にクリック領域を広げられるのですが、 <div>ほげほげー。詳しくは<a href="#">こちら</a>でみてね。ほげほげー</div> みたいなのだと上のやり方は通用しないので、divを…

スマホで擬似的にhoverを実装する

スマホで :hover を使うと、タップを話した後も色が変わったままだったりしてしまうので、class名をあてて擬似的にhoverを実装する必要があるようだ。 jQueryを使う場合 $( 'a' ).bind('touchstart', function(){ $(this).addClass( 'hover' ); }).bind('tou…