はてなブックマーク

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

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

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

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

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

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

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

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

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

これ の これ とか、これ の これ とか、これすごい見やすいんですけどどうやってんのって調べたら、doccoとかいうものを使って作られていたことを知ったので試した。結果、できまして、こんなの（元ソース）。 どこぞからNode.js、coffeescript、Pygments、doccoをインストールし、 docco hoge.jsとかやるとできた。ブログとかにコードの解説見たいのを書く時、この形ベストじゃね？と思っていた。 doccoを使ってみたよ - 四角革命前夜#21: Broken pipe - Issues - jashkenas/docco - GitHub

programming notes. mainly about JavaScript / jQuery. [@Takazudo] [[email protected]] Hint: alt + / 存在は知ってたけどさっぱり興味のわかなかったCoffeeScriptなのですが、使ってみたらこれいいかもって思って、というかもうこれからはCoffeeScriptで書いていこうかなと思いだしてる中。CoffeeScriptが何かについては、以下を参照のこと。 今日から始めるCoffeeScript | tech.kayac.com - KAYAC engineers’ blogRails Hub情報局: ベターJavaScript!? CoffeeScriptが注目されるワケきっかけは JavaScript Web Applications という本を読んで、この本書いてる人が作ってる Spi

programming notes. mainly about JavaScript / jQuery. [@Takazudo] [[email protected]] Hint: alt + /

programming notes. mainly about JavaScript / jQuery. [@Takazudo] [[email protected]] Hint: alt + / なんか高速化したいとかどうとかいう話があったのでローカルでちょろっと試した。 html5 boilerplate にある.htaccessのなかにある、Gzip Compressionの内容をコピってapacheの設定ファイルとかに書けば動いた。 html5 boilerplate - .htaccessこれやると、ファイルをgzip圧縮してからクライアントに転送してくれるらしい。 gzip圧縮なし gzip圧縮あり ファイルサイズが1/3ぐらいになってる。スゴシ。でもよく見るとgzip版の方がダウンロード完了までの時間が長い。これは、サーバー側では、リクエストがあったら圧縮して転送し、クライ

programming notes. mainly about JavaScript / jQuery. [@Takazudo] [[email protected]] Hint: alt + / head内にlinkでcss読み込んで、scriptでjs読み込んで、中で DOMContentLoaded だの jQuery(function(){}) だのやって云々とかやりますよね。これ、 link要素でCSS読み込みscript要素でJavaScript読み込みの順番でやらないと上手くいかないことがあるみたいです。って今日はじめて知りました。 OK（link先script後）NG（script先link後）NGの方を何度もリロードすると、ピンクのdivがたまにslideDownしない。自分がこれを確認したのはChrome。ver.16.0.912.63。理由は、link要素を先に書か

programming notes. mainly about JavaScript / jQuery. [@Takazudo] [[email protected]] Hint: alt + / added jQuery.calcNaturalWH / jQuery.fn.calcNaturalWH() to jQuery.loadImg. This utilily function waits img loading and returns naturalWidth, naturalHeight. Also do polyfill things for non-naturalWidth/Height supported browsers. $.calcNaturalWH('img1.jpg').done(function(wh){ alert(wh.width); // 1200 a

programming notes. mainly about JavaScript / jQuery. [@Takazudo] [[email protected]] Hint: alt + / とりあえずYoutubeみたいなプレイヤーだけ欲しい →USTページの埋込み - 埋め込みコード：ライブプレイヤーっての使えばOK 番組がオフラインの時は画像出したり過去の出したりしたい →番組の設定画面で色々せっていできる ソーシャルストリームってやつ出したい →USTページの埋込み - 埋め込みコード：ソーシャルストリーム、チャット、録画ビデオタブっての使えばOK 過去の放送の一覧出したい →昔は「メディアストリーム」っていう別の埋め込みコードがあったんだけど（たぶん）、UI変更に伴って無くなった。「埋め込みコード：ソーシャルストリーム、チャット、録画ビデオタブ」を貼ったときに表示されるU

programming notes. mainly about JavaScript / jQuery. [@Takazudo] [[email protected]] Hint: alt + / まだ途中なんですが、ポチってもうたーのモバイル版を作ってみたので感想など。 以前に、Sencha Touch ちょっと触ってみた所感 でもちょっと書いたんですが、sencha touchというフレームワークを使ってやってみました。 動作面としては、iPhone80点、Android60点ぐらいかなーという感想でした。iPhoneだと、かなりサクサク動いていて、ほぼほぼ不満はないけど、気になった点が2,3点ほど。 まず、タップに対する反応が、ちょっと遅れることがあるという点。これはもうブラウザ上で動いている以上しょうがないんですけど、ネイティブだとボタン押したらすすーっと動くという場面でも、あら

programming notes. mainly about JavaScript / jQuery. [@Takazudo] [[email protected]] Hint: alt + / ポチってもうたー開発メモ。 今日、HTML5 History APIの、URLは静的に見えるけどダイナミックにUI変えちゃうよーっていうのを実装してみた。ポチってもうたーをChromeとかFirefoxで見ると、色々遷移するとURLは変わるけど全面リロードは起こらなくなってます。 これを実装するには、HTML5のhistory.pushStateとかhistory.popStateとかいう、historyをいじる仕組みを使わないといけないんですが、その辺をうまいことラップしてくれる Davis.js というライブラリがあったので、これを使ってみました。 Davis.jsの使い方は、基本的にはこ

programming notes. mainly about JavaScript / jQuery. [@Takazudo] [[email protected]] Hint: alt + / そーいうfacebookの情報は、FQLとか言うのを使うと取得することができる。こんなの。 SELECT like_count FROM link_stat WHERE url="http://yahoo.com"これをquery=でパラメーターとして https://api.facebook.com/method/fql.query?callback=callback&format=JSON に渡すとJSONPが返ってくる。 デモ返してくれるデータはXML、JSON（JSONP）を選べるので、サーバー側で何かする場合はXMLかJSONをもらうといい Facebook Query Langua