はてなブックマーク

programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / 以下のエントリでも少し書いたけれども、 CoffeeScriptいいかも - Takazudo hamalogそれ以降、CoffeeScriptでJSを書き続けていて、やっぱCoffeeScriptいいなーと結構思ってる。自分にとってのCoffeeScriptがいいと思う一番の理由は、「オブジェクト指向的なコードが、ストレス無く書けるから」っていう点だと感じてる。例えば、以下のような動作をするUIがあり、 サンプルこのひとまとめのUIを管理するクラス的な物を作ろうとしたら、例えば以下のようになる。 var Hoge = function(el) { this.content = el.find

programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / var data = '{a:123,b:"hogehoge"}';こういう文字列があるとき、以下のような謎の黒魔術を唱えるとオブジェクトになる。 var obj = (new Function("return " + data))();は？と思われるこの1行を実行すると、functionが作られ、その中でreturnに続けてdataの中身が書かれてることになるのでオブジェクトが返ってくるという。自分は、eval(data)だと思ってたんだけど、evalはスコープを作らないのと、jsのminifierらでうまくいかなかったりするし、evalこそ真の黒魔術やでーということなので、こんな方法が使わ

programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / 2014年11月、本がでました。と言っても改訂版なのですが。 Amazon.co.jp： 改訂版 Webデザイナーのための jQuery入門: 津戸 壮, 小原 司: 本改訂版　WebデザイナーのためのjQuery入門：書籍案内｜技術評論社本書は、2011年12月に発売された「WebデザイナーのためのjQuery入門」の改訂版です。発売日から約3年の月日が経った2014年11月、改訂版である本書が発売となります。この本はもっと売れてもいいという編集の方の思いにより、改訂版として修正や追記が行われ、発売となりました。ありがたいお話です。以下、筆者の主観で書かれていることを一つ、ご留意ください。

programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / Androidはまじでクソだ。具体的には標準ブラウザがクソだ。iPhoneにも最初は苦労させられたものだけれども、その比じゃない。仕事では自分はそういうAndroidのクソさに付き合うのが嫌で嫌で蕁麻疹がでそうなので、Androidはクソすぎるんでそういうリッチぽいのはやめたほうがいいですよ、無駄にコストがかかるだけですよと言い続け、その上でそこまで攻めてない感じのデザインにしたところで、しかしなおそのクソさを発揮しやがる。どういうことなんだ？ クライアントに相談を受け、オレは真摯に考えを述べる。「Androidがクソなんでそんなのはやめましょう」と。もちろんこれが正しい決断だという自分の考え

programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / 弊社ピクセルグリッドの、ほかちゃんが、ノンプログラマのためのJavaScriptはじめの一歩という本を書いたので、紹介します。 自分もjQueryの本を書いたのですが、 「Webデザイナーのための jQuery入門」という本を書きました - Takazudo hamalog僕の本の方は、jQueryの基礎 → jQueryを使ったサンプルを見ながらJavaScript, jQueryを理解するという流れですが、ほかちゃん本の方は、スライドショーのプログラムを一つ、じっくり解説しながら、JavaScriptの基本文法を解説するという感じです。 この本をおすすめしたい人は、まぁ、タイトルもそうなん

programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / 古いiOSとダメな古いAndroidではposition:fixedが使えないんですけど、それを判別するのに Modernizr.positionFixed みたいの無いのかと思って探してたらjQuery mobileの中見つけた。 https://github.com/jquery/jquery-mobile/blob/master/js/widgets/fixedToolbar.js なんとそれを判別するうまい方法は無いんで、ひたすらUAから判別しているらしい。ひいいい・・・ ということで、ありがたくこのコードを使わせていただくとして、jQuery.ui.domwindowをアップデートし

programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / Chromeのexperimentalな機能で、Sassのコンパイルした結果のCSSから、SCSSファイルを参照できるとかなんとかを試した。元記事はこれ まずChromeで chrome://flags とかやるとなんか出るので、 Enable Developer Tools experiments をオンにする。すると、webkit inspectorの設定に、Experimentalタブが追加されてる。その中で Support for SASS をチェック。 Sassのコンパイル時、 sass –debug-info hoge.scss hoge.css って具合でデバッグ情報を出力するよ

programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / if age? ってやつ。これのコンパイル結果が if (typeof age !== “undefined” && age !== null) になる場合と if (age != null) になる場合がある。 != null版 typeof版 なんでやねんと話していたら、どうやら「コンパイルするスクリプトにておいて、その変数が使われていたら != null版、それ以外はtypeof版」になるっぽい。 まず、 age != null のチェックは、age が undefined か、null の場合にのみ false を返すらしい。要するに何かセットされているかをチェックするうまい書き方らし

programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / ※ この記事はgrunt version 0.2.x のもので、grunt 0.3 からはAPIが変更されています 例えばこんなの htdocs ├── common // サイト共通ファイル格納ディレクトリ │   ├── css │   │   ├── all.css // コンパイルしたやつまとめたい (A) │   │   ├── all.min.css // そんでminifyしたい (A) │   │   └── fragments │   │   ├── base.css │   │   ├── modules.css │   │   └── reset.css │   └──

スムーズスクロールするやつ作りなおした。 APIコール時、コールバックを受け取るのをやめてdeferredを返すようにしたかったのでそのようにし、ごちゃごちゃになってたのを整理した。 GitHub - Takazudo / jQuery.tinyscrollerデモBasicLiveEventsAPI callAPI call - stopDeferredOptionsdeferredでやりとりすると、コールバック設定しまくらないといけないのが防げて便利

programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / jQuery.LazyJaxDavisというライブラリを書いた。このライブラリは、一般的な静的に生成されるようなサイトを、HTML5 history APIの力を使って素敵にダイナミックにします。 このライブラリを使うと、すべてのリンクを、通常遷移の代わりに、Ajaxベースのダイナミックな遷移にします。その際、history.pushStateして、通常の遷移と同じように見せる。言葉にするのは難しいので、実際にサイトを見てもらったほうが分かりやすいと思う。以下のサイトの左ナビをポチポチクリックするなりして。 jQuery.LazyJaxDavis加えて、結構汎用的なURLルーターの機能も備えて

programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / CoffeeScriptは是か否かという話は、CoffeeScriptを調べていれば否応なしに引っかかる話題で、自分もそれについてはかなり考えさせられた。何回かこのブログでも書いたとおり、CoffeeScriptいいなーと思ってはいて、ここ１，２ヶ月はずっとCoffeeScriptでJavaScriptを書いているんだけども、いい点はもちろんあるにせよ、書いているうちに、最初は見えてなかった問題も見えてきたりした感じがするので、その点について少し書きます。 なぜ CoffeeScript がよいか - 0xff.toBlog()なぜ CoffeeScript がダメか - 冬通りに消え行く制服

programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / AjaxかIframeかなんかしらのコンテンツを擬似ダイアログに出すやつを書いた。 gitHub - Takazudo/jQuery.ui.domwindowなんの素っ気も無いダイアログなんだけれども、なんの素っ気も無いダイアログが欲しかったので書いた。ダイアログのスクリプトはそりゃー山のように世の中には存在するんだけれども、実際に仕事で使う時には、素敵な見た目とか全然いらないことが多いし、そんでもってAPIも柔軟に用意されてないと困るんだよなーと思うことが多かったので、そんな時に便利かもしれない。 今までそういう時は、自分は、DOM window っていうライブラリをよく使っていたんだけれど

programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / 最近CSSを書くのにCompassを使ってたんだけど、 compassとやら試した - Takazudo hamalog大してCompassの機能を使ってないので、オーバースペックな気がしてきた。なので、Compassのライブラリから、必要なやつだけ引っこ抜いてきて、オレオレライブラリとして使えばいいやと思ったんだけど、なんだかCompassは独自に関数を定義したりしててそのままだと使えないっぽかった。compactとかいう関数が中で使われてて、これがCompass独自に定義しているやつらしく、こいつは、複数の引数を渡し、ある分だけにまとめてくれるやつらしいんだけども。 めんどくさいから他にな

programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / jQueryのopacityアニメとIE6,7,8 - Takazudo hamalogでも昔書いたのだけども、IE8以下ではopacityに対応していないので、jQueryでアニメーションしようとすると、色々なことが面倒。そこで、ばっさりIE8以下対応をさっさとやるのが以下。どうのこうのでブラウザ判別でもして if (ieLessThan9){ jQuery.fx.off = true; }jQuery.fx.off = true にすれば、すべてのアニメーションが一瞬で終わるようになります。これでfadeした時でも一瞬で変わるから問題なしだぜイェイってねー。 ※これはかなりUIに関するJS

programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / Twitter検索を複数のカラムで見れるみたいなそういうやつを、Backbone.jsの勉強のために作ってみた。 BackboneTwitterExamplegitHub - Takazudo/BackboneTwitterExampleapp.coffeeクラス図っぽいのModelに対応するViewを作り、modelの更新などをトリガーにしてViewを更新するみたいな感じにして、ModelはViewのことを知らなくても良くすればいいっぽい。 おまけで、上記アプリは検索したクエリーをlocalStorageに保存していて、ブラウザ閉じても前開いてた奴がすぐ出るようになってる。あと、右上にあるカ

programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / 以下のエントリでも少し書いたけれども、 CoffeeScriptいいかも - Takazudo hamalogそれ以降、CoffeeScriptでJSを書き続けていて、やっぱCoffeeScriptいいなーと結構思ってる。自分にとってのCoffeeScriptがいいと思う一番の理由は、「オブジェクト指向的なコードが、ストレス無く書けるから」っていう点だと感じてる。例えば、以下のような動作をするUIがあり、 サンプルこのひとまとめのUIを管理するクラス的な物を作ろうとしたら、例えば以下のようになる。 var Hoge = function(el) { this.content = el.find

programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / 前のやつの続き。UIの状態がコロコロ変わるのはどこで制御すりゃええねんっていうことで、Managerっていうクラスを作ってそいつにやらせることにした例。といっても、Spine.jsのManagerっていうやつの真似をBackbone.jsでやっただけだけど。Spine.jsのドキュメントによれば、これは、State machine とかいうやつらしい。 サンプルmy.coffeeこのサンプルでは、一個クリックすると他のがactiveじゃなくなる。作ったViewのインスタンスを、Managerにぴょこぴょこ追加し、追加されたviewらをまとめてアクティブにしたりしなかったりするようなことをやるだ

programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / 最近MVCがどうのとか調べたりしてるもんで、前Spine.jsで作ったやつを、Backbone.jsにして書いてみた。 Backbone.js作ったやつ# Template manager # //hamalog.tumblr.com/post/13593032409/jquery-tmpldeck deck = $.TmplDeck 'templates.html' # ============================================ # API wrapper # ============================================ api =

programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / $.when.apply(this, [deferred, deferred, …]) とかやる demo on jsfiddlevar wait = function(millisec){ return $.Deferred(function(defer){ setTimeout(function(){ defer.resolve('I waited for ' + millisec); }, millisec); }).promise(); }; $(function(){ var fns = [ wait(200), wait(200),wait(500), wait(1000), wa

programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / 画像をパラパラフェードして切り替える様なUIをJSで作る時、画像をプリロードしておかないとパラパラ画像が出てきてちょっとかっこわるい。でもプリロードするのはめんどかったり、ローディング待ちの表示を出すのもちょっとめんどい。 そもそも、ローディング待ちのくるくるスピナーなアニメGIFって、あれローディング終わったらもう用済みだし、使うにしてもそいつを先にプリロードしておかないと意味ないし、なんかすごい無駄感漂うので微妙って思ってた。 そこで、あのくるくる、CSS3でやっちゃうのあったなーとか思って見てたけど、んーIEがねーって思って色々ググってたら、spin.js ってのを見つけた。これは、ロー

programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / 画像を裏でプリロードするやつをCoffeeScriptの練習がてら書いた。過去にも似たようなの作ったけど… Takazudo/jQuery.ImgLoader - GitHubdemo1demo2demo3いけてるところは以下 パイプ機能。パイプサイズ4とか指定すると、4個までしか同時にローディングを走らせないとかそういうことができる。そうした場合、5個目以降は、ローディングが終わった順に実行されていく。大量の画像を一気に取りに行くとブラウザによってはめちゃくちゃ重くなるので、そういう時に有効。ローディングのキャッシュ。例えば1.jpgを読み込めと、100回同時に行ったら、ブラウザは100回画

programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / sassがLESSがどうのと前々から言われていたけども僕はさっぱり1mmも試したこと無かったので試した。なんかcompassというやつがいいとのことで、インストールした。 どこぞのサイト見つつ compass createとかやったら . ├── config.rb ├── sass │   ├── ie.scss │   ├── print.scss │   └── screen.scss └── stylesheets ├── ie.css ├── print.css └── screen.cssができた。config.rbが設定ファイルで、基本この中をいじれば設定が変えられる。画像のパス

programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / ※ この記事はgrunt version 0.2.x のもので、grunt 0.3 からはAPIが変更されています grunt というJS/CSSのビルドツールが便利だったので紹介します。(Mac/Linux) cowboy/grunt - GitHubこのgruntってのは、JS,CSSを全部まとめて繋げる、まとめてJS lintする、minifyする見たいのをタスクとして登録しておくと、それ実行すればちゃちゃっとやってくれちゃうやつです。さらにwatchっていう機能使えば、ファイルが更新されたらそのタスクをやってくれるみたいなのも。 似たモノで、MakeとかRakeとかCakeとかそういう

programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / Twitter検索してModelを更新してControllerがリフレッシュするようなやつ。シンプルに書ける風。 Spine - Controller Patterns作ったやつ# Template manager # //hamalog.tumblr.com/post/13593032409/jquery-tmpldeck deck = $.TmplDeck 'templates.html' # ============================================ # API wrapper # ======================================