jQuery.LazyJaxDavisで静的サイトを手軽にダイナミックにする
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / jQuery.LazyJaxDavisというライブラリを書いた。このライブラリは、一般的な静的に生成されるようなサイトを、HTML5 history APIの力を使って素敵にダイナミックにします。 このライブラリを使うと、すべてのリンクを、通常遷移の代わりに、Ajaxベースのダイナミックな遷移にします。その際、history.pushStateして、通常の遷移と同じように見せる。言葉にするのは難しいので、実際にサイトを見てもらったほうが分かりやすいと思う。以下のサイトの左ナビをポチポチクリックするなりして。 jQuery.LazyJaxDavis加えて、結構汎用的なURLルーターの機能も備えて
Backbone.jsでMVCでTwitter検索なやつをCoffeeScriptで
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 =
$.ImgLoader + spin.js でローディング待ってギャラリー的な
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / 画像をパラパラフェードして切り替える様なUIをJSで作る時、画像をプリロードしておかないとパラパラ画像が出てきてちょっとかっこわるい。でもプリロードするのはめんどかったり、ローディング待ちの表示を出すのもちょっとめんどい。 そもそも、ローディング待ちのくるくるスピナーなアニメGIFって、あれローディング終わったらもう用済みだし、使うにしてもそいつを先にプリロードしておかないと意味ないし、なんかすごい無駄感漂うので微妙って思ってた。 そこで、あのくるくる、CSS3でやっちゃうのあったなーとか思って見てたけど、んーIEがねーって思って色々ググってたら、spin.js ってのを見つけた。これは、ロー
gruntで快適JS/CSSビルド生活
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とかそういう
sencha touchでポチってもうたーモバイル版を作ってもうたー所感
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / まだ途中なんですが、ポチってもうたーのモバイル版を作ってみたので感想など。 以前に、Sencha Touch ちょっと触ってみた所感 でもちょっと書いたんですが、sencha touchというフレームワークを使ってやってみました。 動作面としては、iPhone80点、Android60点ぐらいかなーという感想でした。iPhoneだと、かなりサクサク動いていて、ほぼほぼ不満はないけど、気になった点が2,3点ほど。 まず、タップに対する反応が、ちょっと遅れることがあるという点。これはもうブラウザ上で動いている以上しょうがないんですけど、ネイティブだとボタン押したらすすーっと動くという場面でも、あら
Sencha Touch ちょっと触ってみた所感
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / ちょっと2日ばかりSencha Touchを触ってみたので感想。 まず、なんで触ってみたかというと、Sencha TouchのScrollView（スマホでoverflow:scrollみたいのをするやつ）と、カルーセルがすごい快適に動いていたので、ヘビーなフレームワークに依存してしまうのもなーと思いつつも、これらの機能を超快適に作るには血の滲むような苦労が必要（というか作りかけてやめたりした）なので、ちょっと試してみようかと思った次第。 以下、いじってみての感想 予想してたよりかなり素敵だと思ったScrollViewとかカルーセルだけを普通のスマホサイトにつかうのも可能。これがやりたかったの
Davis.jsでHistory APIを比較的お手軽に使う
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / ポチってもうたー開発メモ。 今日、HTML5 History APIの、URLは静的に見えるけどダイナミックにUI変えちゃうよーっていうのを実装してみた。ポチってもうたーをChromeとかFirefoxで見ると、色々遷移するとURLは変わるけど全面リロードは起こらなくなってます。 これを実装するには、HTML5のhistory.pushStateとかhistory.popStateとかいう、historyをいじる仕組みを使わないといけないんですが、その辺をうまいことラップしてくれる Davis.js というライブラリがあったので、これを使ってみました。 Davis.jsの使い方は、基本的にはこ
ajaxしまくるページで不要な処理はabortすべし
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / ポチってもうたー開発メモ。 UIだけJSでいじってる時はそこまで慎重になることでもないけども、頻繁にガシガシajaxする場合は、既に走っているajaxリクエストもうまいことハンドリングすべき。ポチってもうたーでは、ツイートをJSONで返すよう、サーバーサイドでサービスを用意しているわけだけれども、まぁ、普通に考えれば、こんな感じで、JSON返ってきたらUIを更新するってやるんじゃないだろーか。 $.ajax(url, query).then(function(){ // UI更新しちゃう }, function(){ alert('ゴメンなんか変'); });しかし、これには問題があって、JS
jQuery.Deferredって何
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / ※ このブログの内容は弊社が運営する有料サービス、CodeGridにてより詳しい内容をご参照いただけます（宣伝） jQuery deferredの使い方 - deferredの基本 | CodeGrid === jQuery1.5から追加された機能。でも全然使ってないので調べた。 jQuery1.5からはdeferredオブジェクトっていうものが登場。 これは、「イケてるキュー（待ち行列）の仕組み～遅延もあるよ～」みたいなものです・・・ 説明がムズイけれどもなんかそんな感じなのです。今までは function fetch(callback){ doAjaxThings('somefile.js
IE8以下でもmediaquery使えちゃうRespond.js
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / Respond.jsってのは、mediaquery（min-width, max-width限定）のpolyfill。 なんかそーいうpolyfill系のやつって、得てして結構ガッカリに決まってますよねーと思ってフツーにmediaqueryで組んでこれを入れてみたら、全然重くなくサクサク正確に動作しててビビった。 Respond.js on github仕組みとしては以下のようなもののよう。 cssをパースしてmediaqueryなブロックを読み取る（特別なコメントを入れる必要あり）windowのresizeイベントを監視幅に合うスタイルのブロックを、style要素作ってhead内に突っ込んだ
google spreadsheet api を JSから使う
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / とりあえずspreadsheetを作って、Publicにし、webに公開とかやる。そうすると誰でも見れるようになる。こんな感じ。そしたら以下の感じで取ってこれる。 https://spreadsheets.google.com/pub?key=[YOUR-KEY]&output=html HTMLで出す。iframeで出すときに便利https://spreadsheets.google.com/pub?key=[YOUR-KEY]&output=csv CSVで出す。パースして使いたい時に便利https://spreadsheets.google.com/feeds/cells/[YOUR-K
Underscore.jsとBackbone.jsちょっと試した
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / jQueryが微妙なところ $.each、$.grep、$.mergeとか、DOM関係ないやつは、DOMに依存してるjQueryとは別のところでやるべきじゃない？サーバーサイドでJSやるとかもこの先考えたらその辺、jQueryに依存したくないし→Underscore.jsjQueryはDOM中心指向なので、データを中心としてなんかする時は、あんまりうまいことできなくない？→Backbone.jsということでUnderscore.jsとBackbone.jsを使ってみる Underscore.js: $.eachとか$.grepみたいな便利機能詰め合わせたやつBackbone.js: array
windowsでgitを使う
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / 概要：windowsでgitを使うべく頑張る。だけどややこい。gitHub使うのを想定して以下流れ。 msysgit: windowsでgitが使えるようになるやつ。だけどCUI。 tortoiseGit: gitのGUI。だけどSSHの機能を持ってない。 PuTTY: SSHクライアント。tortoiseGitに組み込まれてる。 msysgit入れるtortoirseGit入れる適当なディレクトリで右クリックしてGit Bashssh-keygen -t rsaホームディレクトリの.sshに id_rsa と id_rsa.pub ってファイルが出来る。 自分の場合は c/Users/Tak
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
