jQuery.ui.checks
is a collection js/css decorated checkbox and radio buttons.
12月 2011
8件の投稿
how to use yuicompressor
It is the one which minifies css and js files.
If you are a Mac user and have homebrew installed, just do
brew install yuicompressor
(If not, fetch .jar file from the link above.)
Then, do
yuicompressor foo.js -o foo.min.js
Basially, that’s all.
If you want specify encoding, do
yuicompressor foo.js -o foo.min.js --charset shift_jis
Very easy and effective.
「よくわかるキリスト教」って本読んだ
半月ぐらい海外旅行でドイツとイタリア行ってて、博物館なり何なり見たりどうしたりとかして回ってたんですけど、そういう歴史的建造物それ自身だったり、中にある展示物だったりするものって、キリスト教に関係するものがめちゃくちゃ多かった。現代の人は殆どそうなんじゃないかと思いますけど、僕個人は、宗教とかさっぱり興味無くて、はーそういうの信じてるんすかーへ〜〜って感じなんですけど、なんかこんなにもキリストキリストばっかりで、さらに建物とか絵とかめっちゃすごいし、オーマイゴッドそりゃなんでそういうことになってるんだい？って興味があったので、キリスト教入門みたいな本を買ってみた。
まず、僕がこの本を読んで一番知りたいことは、「なんでそんなに神がいるとかどうとか信じられちゃうわけ？いねーじゃん」ってことだったんですが、これは結局この本を読んでも、分からなかった。分からなかったと言うより、「まずは信じるところから始まる」ってことなのかなというのを思った。これを読んだところで別に僕自身はキリスト教信者にはならんけど、ただ、色々と理解が深まった。
まず、キリスト教っていうと、僕にとっては、「あーなんか日曜とかにものみの木だかなんだかを郵便受けに入れていく人でしょ？」ってことなんですが、そもそもキリスト教ってのは、大昔に、階級とか政治的な民衆の弾圧とか、なんかそういう風に虐げられていた人達の間で広まった感じらしい。そういう人らは、抑圧されていて、さっぱり望みが無かった。そんななか、良い行いをして神を信じ、祈れば救われるって言い出したのがキリストっぽい。なので、結構内容としてもカウンターポリティックスっというかなんというか、そんな感じの物も多いみたい。例えばこんなの
右の頬を打たれたら左の頬を差し出せ
これって、ちょｗｗおまえどんだけマゾいのｗｗｗって思ってしまうんですが、これはそういう意味ではないとこのこと。当時の人らは、階級とか絶対なんで、もうぶたれたらぶたれるしか無いんですわ。だから、そういう時は、左の頬を出して、ぶてるもんならぶってみな！そんなことには屈しないんだぜ！っていう意味なんだと。
そんなこんなでキリスト教を広めようとしてたキリストは、危険人物だとみなされ、最終的にははりつけにされて死んじゃう（んだけど復活して最終的いは天に上っていったとか何とか）っていうかんじでキリストは死んじゃったのだ。そういうキリストの行いを使徒が広めて行って、新約聖書ってやつを書いて、どんどん広まっていきましたとか。
で、聖書の中には色々と奇跡っぽいことが書かれてるんだけども、これが真実かどうかはなんとも言えないみたい。当時としてはそういう奇跡的なこととかも混ぜて書いて、そういう分かりやすい面からもキリスト教の内容を信じさせるとかもあったとか何とか。
そんなキリスト教だけど、時間が経つにつれ、政治にも使われるようになる。神の申し子としてこの世を治めるよう使わされたのが王様だよとかなんとか、そういうやつ。だから、税金バカスカ使ってものすげー建物も立てちゃう。そんでもって、いや、そーいう解釈は違うねーーー！とか言い出す別の国とかも出てきたりとか。ひどいのは免罪符買えば紙に救われるのですとか言うことまでし出したりとか。そんなこんなで、ヨーロッパには、キリスト教に関するものすごい建物が、当時の権力者や国によってバカスカ立てられているのが今も残っているというわけっぽい。当然、そんな博物館には、歴代のエライ人の絵も一緒に飾ってあったりする。当時は科学とか発達してないわけだし、そんな事言われてものすげー教会とか見せられて、生まれた頃からそう教育されたら信じちゃうよねーとは思いました。
だから、キリスト教と一概に言っても、長い歴史の中で色々と変わってきて、色々な考え方の宗派みたいのがあるのが今のキリスト教っぽいです。自分の中で「キリスト教」という曖昧だったものが少し細かく見れた感じになりました。ただ、ここまで広まっているというのは、色々偶然が重なってそうなったのかもしれないなぁという個人的な感想。
マックス・ウェーバーって人は、資本主義について、「キリスト教の考えだと、熱心にいつも働けば救われるみたいな感じだから、その結果お金がたまり、そのお金は、また誰かが働くために使われる。これが資本主義のはじまりなんだぜ」みたいなことを言いだしたっぽい。てかこれ高校の時習ったんだけど、その時はさっぱり分かってなかった。
そんなこんなで、キリスト教の教えっていうのは、現代の生活の中にもベースとなる部分が色々含まれてるみたいです。例えば日曜が休みなのも、神が6日で世界作って7日目は休んだとかが始まりとか何とからしいし。
キリスト教の教えの内容だけど、確かにそれみんなが守ってたら世界は平和かもなーってのは思う。隣人を愛せよとか、今で言う道徳に当たるものが沢山。というか、今で言う道徳として生活の中に入っていったんだねという感じ。しかし、ずるい人が権力とかのためにそういうのを利用しちゃったりとか、それによって国が栄えたりとかしたり滅びたり、戦争しちゃったり資本主義になって今があったり、まー人間ってそういうものなのかなーとかなんとか思ったり。
キリスト教の、祈りを捧げるっていう行為は、自分の中で心を整理するっていう意味があったのかなって思う。つまり、神を信じることから始まりはするけど、神がいるとかいないとかはどうでもよくて、それを元に色々と行きていくための教典となったもの。これがキリスト教っていうものなのかなって思った。
それと、「信じる」っていう言葉の意味についてもよく理解したつもりになった。よく言われる「Apple信者」とかいう言い方。生活を良くするAppleの製品を信じて購入すれば幸せになれるってやつ。でもこの「信者」って言葉、あながち間違ってもいないのかなーとも。
gzip圧縮してcssとかjsとか転送してみた
なんか高速化したいとかどうとかいう話があったのでローカルでちょろっと試した。
html5 boilerplate にある.htaccessのなかにある、Gzip Compressionの内容をコピってapacheの設定ファイルとかに書けば動いた。
これやると、ファイルをgzip圧縮してからクライアントに転送してくれるらしい。
gzip圧縮なし
gzip圧縮あり
ファイルサイズが1/3ぐらいになってる。スゴシ。でもよく見るとgzip版の方がダウンロード完了までの時間が長い。これは、サーバー側では、リクエストがあったら圧縮して転送し、クライアント側では受け取った後に解凍して展開してるからこうなってるっぽい。まーローカルで確認してたら転送時間とか無い上に処理してるのオレのmacbookなので絶対そうなるけど、そういう、サーバーのCPU負荷とかの問題なんかもあるみたい。mod_deflate でググると色々出てくる。でもこれは速くなりそうだわ。
追記:
1ファイルにまとめちゃってminifyとかすると更にイケてるってアゴさんが言ってた。ファイルごとに圧縮処理が走るため。
JSの前にCSS読み込まないと色々うまくいかないことがある
head内にlinkでcss読み込んで、scriptでjs読み込んで、中で DOMContentLoaded だの jQuery(function(){}) だのやって云々とかやりますよね。これ、
- link要素でCSS読み込み
- script要素でJavaScript読み込み
の順番でやらないと上手くいかないことがあるみたいです。って今日はじめて知りました。
NGの方を何度もリロードすると、ピンクのdivがたまにslideDownしない。自分がこれを確認したのはChrome。ver.16.0.912.63。理由は、link要素を先に書かないと、DOMContentLoad時に外部スタイルシートが適用されてないかららしいです。スタイルシートが適用されてないと要素の高さが0になっちゃっていてアニメーションできなくなってるっぽい。これは、こんなサンプルみたいに、めちゃめちゃシンプルな場合にしか発生しなさそうだけど、そんなことがあるのか…。以下のサイトにそれっぽいことが詳しく書いてありました。パラレルで読み込むとかDOMContentLoadedのタイミングがどうとかがなんかめんどいらしい。
jQueryの.ready()のドキュメントにも、以下のような記述があった。
When using scripts that rely on the value of CSS style properties, it’s important to reference external stylesheets or embed style elements before referencing the scripts.
ということで、CSS読み込みは先に！ってことみたいです。
いつも無意識でそうしてたけどしらなんだ。っていうか結構みんな知らないと思うたぶん…。
Mattari_panda hamalog: ずど本（Webデザイナーのための jQuery入門）をオススメする、いくつかの理由 →
mattari-panda.tumblr.com
いつもなにかとお世話になっているピクセルグリッドの高津戸さんが、先日書籍を出版されました。実際に読んでみて、いろんな人に薦めたくなったのでおすすめポイントを書いておきます。
まずはこちらをお読みください。すでにたくさんはてブもついてますし、今更説明不要の良記事です。
「Webデザイナーのための jQuery入門」という本を書きました - Takazudo hamalog
まずひとつめのポイントはその「解説の丁寧さ」です。ずどさんといえば、セミナーなどでも有名な語り口調があるのですが、それが随所に出ていてとてもわかり易いです。…
「Webデザイナーのための jQuery入門」という本を書きました
2011年12月7日発売です。もう本屋に並び始めたみたい。
これは、Webデザイナーとか、HTML+CSSを普段書いてるような人でJavaScriptをほとんど知らないという人がターゲットで、そういった人らがjQuery使ってちょっとしたものを自分で作れるようになれるようになったらええんじゃないかという感じで書かれた本です。ちょっとしたモノっていうのは、この本で解説している、以下のような機能です。
- 画像のロールオーバー
- 入力フォームのガイドテキスト（「検索ワードを入力してください」みたいやつ）
- アコーディオン
- 外部ファイルを読み込んで表作成
- スライドショー
- タブコンテンツ
- ツールチップ
僕は他のjQuery解説本はさっぱり読んでいないんですが、自分がこの本を書く上で目指したことは、「この本を読んだ人が、自分で考えてスクリプトを書けるようになれること」です。いけてるサンプル集が欲しいとか、リファレンスが欲しいとかいう人は、この本はそういうものではないので買わないほうがいいですし、既になんかしらのプログラミング言語に長けている人も、他の本の方がいいかと思います。「jQueryを使いながらしっかりプログラミング入門」というのが、イメージに近いものかなと思ってます。というか、そうなったらいいなと思ってます。
使わないと覚えられないこういう入門書を書いておいて言うのもなんですが、個人的には、「自分でJavaScriptを書かないと覚えられるわけないでしょ」って思ってます。だから、この本を読んでも、自分で書いたりしないと忘れます。確実です。
自分は、この文章を書いている時点で、仕事として6,7年ぐらい、HTML・CSS・JavaScriptを書いており、今はほとんどJavaScriptプログラマーみたいな感じですが、JavaScriptをちゃんとやりだしたのは、jQueryが流行ってみんな使い出したちょっと前という感じです。
プログラミング言語としては、JavaScript、Python、PHPが書けるといえば書けますが、職業プログラマとして通用するのは、JavaScriptだけみたいな感じです。PHPは、3年前に興味があって本を買ってそこそこ勉強しましたが、特に何を作る機会があるわけでも無く、それ以降はwordpressをちょっといじるときに不自由がないぐらいで、まぁ、早い話、忘れてしまっています。Pythonについては、最近、Google App Engineというものを使うためにちょっと勉強したので、触り程度習得していますが、このまま使う機会が他になければ忘れてしまいそうな感じです。そういう経験からといいますか、なんといいますか、要するにそういうプログラミング言語を覚えたかったら使わないと覚えられるわけないじゃーんと思うのです。
ちなみに、自分がこれをやってかなりJavaScriptを覚えたなーと感じているのは、tinyscrollingという、ページをするするスクロールするライブラリをかなりじっくり見てみた時かなーと思ってます。それ以前は他の人が書いたものを全然読もうとしたことがなかったので、苦しみながら一つ一つ調べてよみときつつ、そういう風に書くのかーなどと思ったものでした。一行一行、そこでどういうことをしているのか、わざわざコメントを書いたりもして。これは、tinyscrollingが素晴らしく良くできているものであるということが理由で上達したというわけではなく、自発的にそんだけ研究したという点が、自分にとって大きかったものと思ってます。あとは、フリーランスをやっているとき、勉強がてら、趣味的に、この本で書いているようなちょっとした機能を沢山つくってみたことが、JavaScript習得のためにかなり役に立ってるかなと思ってます。
JavaScriptは身につけやすいかもよく、こういう本を買う人の中には、「私もこれを買えばjQuery使えるようになるかしらワクワク」と思う人がいるかと思いますが、きっと、その本がいかに良書で、自分にびっくりするほどフィットして役立ったとしても、仕事や趣味でjQueryを使っていかなければ、さっさと忘れてしまうことでしょう。僕だって仕事でこれだけJavaScript書いていなければ忘れてしまいます当然。
ですが、JavaScriptを使う機会は、最近どんどん増えています。Webサイト上のさまざまな機能が、どんどんJavaScriptを使って作られるようになってきているのは、説明するまでもないでしょう。だから、継続的に使っていけるという意味でも、JavaScriptは覚えやすいものだと思うんです。
それと、仕事をしていて思うのですが、JavaScriptを使った機能は、依頼されることもあるといえばあるのですが、Webデザイナとかコーディングをしている人のほうから提案していくような形で仕事になることも多いのです。そういうのやりたいならそれJavaScriptでこんな感じにできまっせみたいな風に。JavaScriptを普段からやっていれば、UIの引き出しも自分の中に増えるので、そういう提案もできるようになるかもしれないですよ。そうすれば、素敵なUIのサイトも自由に作れるように。ああなんて素敵なんだみたいな。
知識なしでJavaScriptに立ち向かう人たちWebデザイナーとか、HTMLをやっている人は、仕事上、「こういう機能が無料で使えるようになってるみたいだからこれ使ってみてよ」みたいな風に、なんかしらのライブラリを使うように頼まれ、うんうん唸りながらなんとか実装したみたいな経験がある人がいるんではないかと思います。それで、ちゃんと動かなくて、中身を見てみるもサッパリ分かんねぇ！みたいな状況とか。あとは、ロールオーバーとかタブとか、当たり前のように頼まれたりとか。そういうのは、当たり前に使われるようになってきてはいるものの、JavaScriptを自分で学んでみたことがない人にとっては、その実装は、なかなかハードルの高いことだと思うんです。
世の中には「jQueryプラグイン100選」みたいなブログ記事が山のようにあって、あーなんてjQueryって簡単で素敵なんだ鼻血ブーと思う人もいそうですが、JavaScriptの知識を持たない人がそういうのをちょろっと使ってなにかやっちゃうのは、言ってみれば、「高性能のバズーカを持って戦争に行く」みたいなもんですよ。そのバズーカは高性能だから、ボタン押せばドカンとやっちゃえるかもしれないけど、バズーカに不備があったらどうにもできないし、それって、「使い方はボタン押せば弾でます」みたいなのを知っているだけとかではないですか？そういう状態は、かなり良くない。仕事としても責任感の無いことをしてることになるんじゃないですかね。
そういう状態で思い通りに動かなかったら、超苦しむでしょう大体。でもそれは苦しんで当然なのです。しっかり訓練してからバズーカを打ったほうがいいに決まってます。しっかり訓練といかないまでも、基礎的な体力と知識を付けてから使うべきです。そうすれば、バズーカが動かなかったら何故動かないのかすぐ分かりますし、故障しても自分で直したりできるようになるかもしれないです。
いかに便利な道具があったとしても、知識なしにそれを使うのは、そういうような状態に結構近いもんじゃないかと思ってます。
JavaScriptをどうやって勉強したらいいのか「よーしではJavaScriptをちゃんと覚えるぞー。どうしたらいいの？」という質問に対する答えは、かなり不明確です。この文章の頭のほうで、自分はこのライブラリみて覚えたとか、自分で作ってみて役に立ったとか書きましたけど、そういうモチベーションが高まってるという状況は、人生の中において結構稀だと思います。趣味でJavaScriptを書きだすという人は、変人とまではいきませんけど、滅多にいるわけではないかと思います。
そんな風に、どうすればいいかも分からないままJavaScriptを覚えよう！と思った人が、良書だと勧められてこういった本を手にとってJavaScriptを勉強しだしても、あっという間に挫折してしまうでしょう。JavaScriptの基本的な文法や機能を一から読んでいっても、それをどうやってつかうのか、さっぱり想像できないんじゃないでしょうか。（この本 - 通称サイ本は、じっくり細かいことまで余すところなく解説してくれている伝説的な良書ではあります）
ちなみに、他のプログラミング言語を勉強したことのある人であれば、こういった、JavaScriptの文法を一から見ていくという学習方法は、おおいにアリです。プログラミング言語は色々ありますが、基本的な概念は共通なので、文法がわかれば、それをどう使うのか、イメージが頭の中に思い描けたりするのです。だから、その処理の流れを実現するためのコードを書くにはどうするか調べる…みたいな感じです。それがプログラマっていう仕事です。
自分は、JavaScriptからプログラミングを覚えたような感じなので、プログラミングの基礎知識が無い状態からはじめたようなものでした。そんな自分がJavaScriptを覚えていったステップとしては、何かを作りながら、徐々に文法を覚えていったような感じです。仕事柄、ロールオーバーやポップアップをちょっと実装するみたいな機会も多かったりしましたし。こういうふうに、何かを作りながらスキルを伸ばしていくというのは、JavaScriptを覚えるって言うこと以外でも、だいたいそんな感じなのじゃないかなと思います。仕事としてデザインを行うようになり、だんだんとデザインの基礎も勉強するようになったとか、料理を作っていくうちに料理の基礎を覚えたとか。考えてみれば当たり前の話ですが。
この本の構成で、私が書いた本の話に戻りますが、「Webデザイナーのための jQuery入門」は、読者が、プログラミングの知識が全く無い状態を考慮して構成されています。これが最適解かはわかりませんが、「よーしではJavaScriptをちゃんと覚えるぞー。どうしたらいいの？」に答えたような本にしたつもりです。最低限必要な概念や知識を説明した上で、実際にサイトで使いそうなものを作っていき、その中でJavaScriptの基礎にも触れながら、jQueryを覚えていけるような流れで書きました。
そして、jQueryの高機能なセレクタや、初心者にとって利用頻度の低い機能については一切解説しないことにしました。その代わり、コードの一行一行がどういう意味を持っているのか、いちいち細かく説明するようにしました。jQueryの機能は非常に多く、便利なものが山盛りですが、それらをすべて把握するよりも、基本的な機能を組み合わせ、やりたいことが実現できる様になったほうが有意義だと考えたので、そのようにしています。自分が初めてtinyscrollingのコードを読んで、一行一行その行がどういう意味なのかを書いてた時のように、一つ一つ意味を解説し、「これはおまじないだ」みたいな説明の仕方をしないように心がけました。
実際にロールオーバーなりタブなりの機能を作ってみる章では、それぞれにつき、基本形と発展形を用意するようにしました。基本形と発展形の動作はほとんど同じですが、「このコードはこういうふうにも書ける」とか、JavaScriptの変数や関数など、基本的な機能を理解してもらうために、このような構成にしています。
というわけで、この本はそんな感じで書かれています。
JavaScriptを覚えたいと思ってる人が読んでくれたらいいかなーと思ってます。
jQuery.TmplDeck
jQuery.TmplDeck is a template source handling utility.
This loads template text file like this and allow you to draw the source by id from the file easily.
This was customized for underscore.js’s template method. But you can use any other template engine with this. This is just like a text storage class.
