ほかちゃん本 - ノンプログラマのためのJavaScriptはじめの一歩
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / 弊社ピクセルグリッドの、ほかちゃんが、ノンプログラマのためのJavaScriptはじめの一歩という本を書いたので、紹介します。 自分もjQueryの本を書いたのですが、 「Webデザイナーのための jQuery入門」という本を書きました - Takazudo hamalog僕の本の方は、jQueryの基礎 → jQueryを使ったサンプルを見ながらJavaScript, jQueryを理解するという流れですが、ほかちゃん本の方は、スライドショーのプログラムを一つ、じっくり解説しながら、JavaScriptの基本文法を解説するという感じです。 この本をおすすめしたい人は、まぁ、タイトルもそうなん
CoffeeScriptをおすすめしたいワケ
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
Backbone.jsでUIの状態を管理するみたいなやつ
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らをまとめてアクティブにしたりしなかったりするようなことをやるだ
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 =
CoffeeScriptいいかも
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / 存在は知ってたけどさっぱり興味のわかなかったCoffeeScriptなのですが、使ってみたらこれいいかもって思って、というかもうこれからはCoffeeScriptで書いていこうかなと思いだしてる中。CoffeeScriptが何かについては、以下を参照のこと。 今日から始めるCoffeeScript | tech.kayac.com - KAYAC engineers’ blogRails Hub情報局: ベターJavaScript!? CoffeeScriptが注目されるワケきっかけは JavaScript Web Applications という本を読んで、この本書いてる人が作ってる Spi
classやidに-を使うとか使わないとか
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / CSSのセレクタ部分(IDやCLASS)にハイフンとか使われるの好きじゃないなー。ボクはあまり好きじゃないなー - latest logを見て、自分はいつも-を使ってるので、その理由を書いてみる。 結論から言うと、-でも_でもキャメルでもどれでもいいと思う。で、自分が-を使っているのは、jQuery UIのcssがそのように書かれていて、僕が年中、ヘビーにjQuery UIのベースとなっているwidgetというフレームワークを使っているから。そして、仕事でやる場合にはだいたいコレを使うので、それに習っている感じ。参照：The jQuery UI CSS Framework -を使う時は、名前空
JavaScriptパターン／JavaScript Web Applications読んだ
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / ドイツ旅行に来たので、飛行機の中で本読んだ。 JavaScriptパターン 知っている内容が多かったので飛ばし読みだったけども、「そこそこJavaScriptを書いているけども、うまい書き方が知りたい！」という人向けの本だと思った。prototype継承とか？なんかモジュールがどうとか？あるみたいじゃない？あれってなんかどういう意味なの？デザインパターンって何なの？とかそんな感じのことが気になって知りたいという人はこれを読むといいと思った。 自分的には、デザインパターンは、理解はしていたものの、そこまでサーバーサイドのプログラムを突っ込んでやっていなかったから、なんだかモヤモヤしていた感じだっ
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
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
Backbone.jsにCSRF対策のトークンをpostさせる
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / ポチってもうたーでは、ユーザーの情報をサーバー側のモデルと同期させるために、Backbone.jsを使っているのだけど、Backbone.jsは結構特殊な、だけどなんかモダンっぽい仕組みでサーバーと通信する仕組みになってる。 普通、postするときは、name=“Takazudo” age=“28” みたいなデータをサーバーに投げるわけだけど、Backbone.jsは、以下のような、データをtoJSONした文字列をボコっとそのままサーバーに投げ、サーバー側でもそのJSON上手いことなんかやってくれっていう仕組みになってる。 { "name": "Takazudo", "age": "28" }
Sencha Touch ちょっと触ってみた所感
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / ちょっと2日ばかりSencha Touchを触ってみたので感想。 まず、なんで触ってみたかというと、Sencha TouchのScrollView（スマホでoverflow:scrollみたいのをするやつ）と、カルーセルがすごい快適に動いていたので、ヘビーなフレームワークに依存してしまうのもなーと思いつつも、これらの機能を超快適に作るには血の滲むような苦労が必要（というか作りかけてやめたりした）なので、ちょっと試してみようかと思った次第。 以下、いじってみての感想 予想してたよりかなり素敵だと思ったScrollViewとかカルーセルだけを普通のスマホサイトにつかうのも可能。これがやりたかったの
Backbone.jsでなんか作ってみた所感
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / とりあえず、JSONデータを用意して、それをもとにUIをガリっと作るような機会があったので、半ば無理矢理Backbone.jsが便利なのかどうか試してみた。サンプルは出せないけど、JSONファイルを元に、地図にポツポツポイントをおいて、それクリックしたら遷移したり、地図がズームしたりとか、そんな感じのもの。感想は、「サーバーと連携する機能が無い限りは、そこまで意味が無い」 arrayとobjectが混ざって階層化されたJSONを扱う時、Backbone.jsで、arrayをCollection、objectをModelでラップし、これをネストさせた形でモデル部分のクラスを構成する。そして、それ
やっぱしこれかもviewport
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / html5 boilerplate mobile の viewport指定が変わってたんですこんなのに。 あれーでもこれってあれじゃない？iPhoneで横にするとでかくなりすぎちゃうやつじゃない？iPhoneのバグだか仕様だか分からないけどって前書いた（1, 2）のだけれど、html5 boilerplate mobileにはもう一工夫してあった。それがこれ。 A fix for iPhone viewport scale bugこれは何かというと、基本はこれ width=device-width, initial-scale=1.0で、iPhoneではこれ width=device-widt
こーすりゃいいかもviewport
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / スマートフォン用のviewport指定、このいずれかかと思うんだけどどうなんだろう。 リキッドパターン iPhoneの場合、縦の時：幅320px、横の時：幅480pxにviewportが調節される。それ以外の幅のデバイスでは、そのデバイスの幅に合わさってリキッドになる。 user-scalable=noなので、ユーザーによるピンチイン、ピンチアウトのズームが不可能。この時点でかなり嫌だが、これは、iOSが、縦→横にorientationさせた時、ズーム率を自動で調節するという機能を殺すため。（iPhoneであれば縦→横でズーム率が1.5倍になる） この自動ズーム率調節機能がイキでいいのであれば
meta viewportがよくわからん
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / 結局 が一番いいのかもと思った。html5 boilerplate mobileでも使われていたので… 以下はよく検証してないので間違ってる可能性があります。 まず、ほんとは にしたい。想定される結果は、iPhone縦だとviewportの幅が320px、iPhone横だとviewportの幅が480pxになるというもの。だがこれをやると、iPhoneで縦→横にしたとき、コンテンツの幅は320pxのまま、これが幅いっぱいにズームされた状態になる。iPhone Safariは、基本、縦→横にしたら、その時の画面の幅を維持して拡大してくれるので、user-scalableがyesである限り、wid
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
