しるてく

技術的な話をします

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

AQUOS PHONEでposition: fixedを指定した要素より後でキーボードが開かない

ヘッダーとかフッターとか固定するのにposition: fixedを使用すると、Android2.3ではもろもろ問題が起こるんだけど、その一例としてAQUOS PHONEでキーボードが開かなくなるようだ。どう解決したもんかなと思ったけど、ヘッダー/フッターみたいな感じで位置固…

一部の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回呼ばれてしまう…

手元のトピックブランチをmasterにマージしたか確認する

git

いろんなブランチさわっていると、どれをmasterにマージしたか忘れてしまって、マージしてないのに終わった気になってgit branch -dとかしちゃいそうなので、まるっと確認するコマンド考えた。 % git co master % git branch | grep -v '*' | xargs -t -I% g…

compassでcssスプライトするときの出力をできるだけ少なくする試み

概要 Sprite layouts | Compass Documentationcompassでのcssスプライトを試してみたのでメモ。 sprite-backgroundっていうmixinは結構色々な人がブログに書いてるんだけど、retina対応していなかったり、無駄な処理が入っていたりしてなんかしっくりこなか…

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

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

Facebookでシェアするときに表示される情報のチェックやキャッシュの削除について

一度ページを公開して、誰かにシェアされたとする。 そのあと、og:imageとかog:titleなどを変更してシェアし直そうとしても、古いデータが表示されてしまうという問題がある。 そんなときは、デバッガー( https://developers.facebook.com/tools/debug )から…

iPhoneの辞書機能が使えなくなったときは再起動するとよい

タイトルで完結してるんだけど、先日とつぜん、辞書に登録した用語の変換ができなくなった。 読みを変えてみたり、辞書をいったん削除してみたりしたけどどうにも変換できない。で、試しに再起動したら変換できるようになった。めでたしめでたし。

minifyしたファイルをbinary扱いしてやる

git

minifyしたファイルをgit管理していると、少し書き換えただけでgit log -pしたときにすごいだらだらとdiffがでてきて邪魔くさいなーと思って、 $ cat .gitattributes *.min.js binary *.min.css binary みたいに、minifyしたファイルをbinary扱いしたらdiff…

ゆるふわにperlの話をするのにlingr-ircが便利

etc

ゆるふわなかんじで perl の話題をするためのチャットルームをつくってみた - tokuhirom's blog.で、初心者歓迎のゆるふわチャットルームができたので、Lingrはいってみたけどブラウザで見るのめんどいなーと思って探したら、IRCクライアントからつなげるの…

obj.length === +obj.length

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

Backbone.js × jQuery pjax

はじめに jquery-pjaxを使っているサイトのメンテナンス性あげるために、Backbone.jsでも入れようかなあと思ったところ、両者のpushState()が被って挙動がおかしくなった。 jquery-pjax jquery-pjaxはjQueryのプラグインで、pushState×ajaxを実装したもの。 …

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を書…

redmineで数字だけで検索したときにその番号のチケットを表示させない方法

Redmineの気がつきにくい機能 | Redmine.JP Blogに書いてあるとおり、redmineには検索ボックスを用いて特定の番号のチケットを表示する機能がある。 Redmineの画面右上の検索ボックスにチケット番号を入力してEnterキーを押すと、その番号のチケットが開いた…

css3 transitionでheight: auto;が使えないのでmax-heightを使ってみる

css

背景 CSSだけでスクロールアップダウンしたいなーと思って、特に何も考えず、次のような実装をしてみた。 #open-infoをクリックすると、#infoが内容量に合わせて良い感じにスクロールして閉じたり開いたりしてくれる予定。 実装 #info { overflow: hidden; h…

LIMITを指定しないと、splitは一番後ろの空フィールドを省略してしまう

perlのsplitでハマった。第三引数なんてあったのか。 まー最大のフィールド数が決まってるならその数を指定して、そうじゃなければ負の値をいれるのが良いのかなー。

gitでrenameしたファイルの変更履歴を追いたい

git

git log --follow -p filename 今までしらなかったのが恥ずかしいんだけど、--followというのをつけると、rename前の履歴も追えるらしい。 renameしやがって!!とか思っててごめんなさい。

iPhone4の表示領域

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

MySQLの起動時にSQLを実行する

--init-fileというコマンドオプションがあるらしい。起動時にオプション付けてもいいし、my.cnfに書いてもいい。 Read SQL statements from this file at startup. Each statement must be on a single line and should not include comments. http://dev.my…

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

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

imgとかinputなどの置換要素にはbefore, afterは使えないよ

css

inputにbefore使おうとしてはまったのでメモ。 仕様読めばすぐ解決(できないという意味で)だったんだけど色々試して時間無駄にしてしまった。 12. Replaced contentIf the computed value of the part of the 'content' property that ends up being used …

font-familyを設定しないとiOS6で明朝になってしまう

css

iOS6のSafariのデフォルトフォントが明朝になってるっぽくて、font-family設定していないサイトがアレな感じになってしまったので直してみた。 スマホ専用のサイトです。 font-family: Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W…

perlでCSS Spriteしてくれる君書いた

あるディレクトリ以下にある画像を縦に連結して、cssも書いてくれます。 あと、特定のページで使っている画像だけくっつけるとかやりたかったので、画像名を配列で渡してあげると、その画像だけで連結してくれます。 テンプレートの中身をgrepするとか、find…

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…