jQueryが便利だなーと思い始めた頃のある日、どこかのサイトで、
jQuery(function($){....})
と書いておけば、$を確実に使えるというのを見たことがある。
表面上の意味はわかるが意義が分からん（つまり良くわかってない）のでそのまま流したてたんだけど、その後、
var $ = function (id) {return document.getElementById(id)}
：
：
：
$("hogehoge").innerHTML = .....;
なんて使い方をしてあるコードを幾つか立て続けに見かけた。
Technical Overview - Native Client SDK - Google Code |
Native Clientの部分が塩(NaCl)で、そのインターフェイスになるのが胡椒(Pepper)ですか。
するとHTMLやJavascriptでの部分がステーキ？ハンバーグ？
Javaとかでネイティヴコードを実行するときと印象は似てる。そら違う世界を繋ぐ様子を図に書いたら似てくるかもしれないなあ。
こんなことやる間にもっともっとV8エンジンのチューニング頑張ってくれればいいのに、とか勝手なことを思ってたけど、チャート見ているとなんとなく動かしてみたくなってしまった。
Chromeのバージョンは…うん大丈夫。ちゃんと14以上にアップグレードされている。
次は「about:flags」。
あったあった。
やっぱりここでネイティヴクライアント機能の有効無効を設定するんだ。
そうじゃないかと思ったけどやっぱりデフォルトは無効になっている。
ネイティヴクライアント機能を有効にしてChromeを再起動、と。
んでもってサンプルページからデモを実行、と。
| Show source |
以前日本語で開設されてたサイトを見ながら見よう見真似で作ったスクリプトだけが手元に残っている状態。なぜか以前のサイトには到達できないのでいろいろメモしておこうかと思う。
URLに以下のような引数を埋め込むことでbloggerからJSONP形式でのデータ取得ができる。自分のブログに記事一覧とか置くだけならば、クロスドメインにもならないので普通にJSONでいいような気もする。
| ベースURL | http://tip-tips-tipsss.blogspot.com/feeds/posts/default | アンダーラインの部分(tip-tips-tipsss.blogspot.com)をターゲットにするブログのアドレスにする。 |
| 引数 start-index | 取得開始記事番号 | 最新記事が1。数字が大きくなると古くなる。 |
| 引数 max-results | 取得記事の最大数 | 指定した記事より少なければ、少ない量の記事が帰ってくる。 |
| 引数 redirect | ひとまずfalse | …何だったっけ？フィードをリダイレクトしているときには、リダイレクトしないことを指定するんだったかな？ |
| 引数 alt | 「json-in-script」でJSONP形式での送信希望 | |
| 引数 callback | コールバック関数を指定 | $.getJSONを使うときには、callback=?としておく |
getJSONの第2引数としてこんなふうに記述できるのが簡潔で、かつ、必要なURIエンコードとかもjQueryがやってくれたりするので楽ちんなのだが…
{
"alt": "json-in-script",
"redirect": false,
"start-index": 1,
"max-results": 10
}
なんか事のついでにjQueryが勝手に（？）追加する引数が、blogger側のお気に召さないらしくエラーが返されてしまう。
余計なパラメータを取る方法がよく分かんなかったので、仕方なくURLに全部突っ込んだ。Orz
とりあえずメモ。
専用のresizeというイベントが用意されているらしい。
$(window).resize(コールバック関数)
もしくは、
$(window).bind('resize', コールバック関数)
サーバサイドでJavascriptを使う理由ですよね。
そんなに一生懸命になって理由を探さなくても、そうできたら面白そうだから、じゃダメかな？
何かを作らなければならないとき、Java以外の選択肢中にjavascriptがあるならそれだけで十分な理由だと思いますが。(Javaを好む人達の話があまり好きになれなくて、そのおかげでJavaもあんまり好きでは…)
クライアントサイドの方が触ってて楽しいと思ってたけど、Node.jsの簡単な紹介を読んで、サーバサイドのコードを設計したり書いたりするのも楽しそうだと初めて思ったよ。
Node.jsとは何か、開発者ライアン・ダール氏が語る（前編）～ノンブロッキングとはどういうことか？コンソールの上で簡単に紹介されるプログラミング。
ただ、こんなふうに書いていけばこんなことが出来る、という一見地味なこれ。
久しぶりになんとなくワクワクするコードが書けそう、なんて思ったの何年ぶりかな。
プログラミングというのを覚え始めた時の感覚に近いワクワク感なんですけど。
セキュリティ関連の問題が残るらしいけど、ひとまずWebGLがどんなものか見てみたかったのだが…手元のパソコンでWebGL demoでググったページからそれっぽいものを開いてみようとすると、
WebGLをサポートしてないですよ
とか、
ブラウザをアップグレードしたほうがいいんじゃない？
なんて趣旨のメッセージをいただくばかり。
ブラウザは最新のChromeだってば。13.0.782.200ですよ！…ダメですか。凹むなあ。Orz
普通にsame originなサーバーからJSON形式のデータを受け取るのにも使える。
しかし真価はクロスドメインなサイトからのデータをJSONPで受け取ることにある。(と思う)
$.getJSON( url, [data], [success(data, textStatus, jqXHR)] )
内部的には以下の呼び出しと等価。(なので$.ajax()でも書ける)
$.get( url, data, callback, "json" )
クロスドメインなところからJSONPでデータを取得した場合、url文字列に以下のような文字列を追加してjQueryにコールバックのフォーマットを教える。(「callback」の部分を適宜コールバックパラメータに置き換える)
http://ホゲホゲ/data/jsonp?callback=?
よく使う文字装飾を整理しておく。
| 効果 | HTML | スタイルシート |
|---|---|---|
| 大きさ変更 | nは1～７の整数で、+-記号をつけて相対的に指定する(+2とか-1とか)ことも可能。 | font-size: サイズ指定 %かem以外を使うことがある気がしないが、その気になれば抽象化された名前(xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger)とサイズ指定(mm,em,pt等)等を指定できる。 |
| 太字 | font-weight: bold ほかにもbolderとか数値指定とかできるようだが、bold以外を使う気がしない。 | |
| 斜体字 | font-style: italic
oblique(斜体)というのも指定できる。下の２つの違いが分かる環境なら使い分ける意味があるかも知れない。 This is italic. This is oblique. | |
| アンダーライン | text-decoration: underline overline(上線)、line-through(打ち消し線)、blink(点滅)というのもあるみたい。 |
fontはHTML5ではサポートされなくなったらしいので、使わないほうが良さげ。
b, i, uは逆にHTML5で非推奨から再度昇格したみたい。
クッキーと同じくらいメンドクサイんじゃないかと、そしてメンドクサイならもうクッキーでいいじゃないか、と敬遠していたローカルストレージ。
調べてみると使い方はとても簡単。
複雑な初期化手順は要らない、ファイル的な何かを考慮する必要もない、単純にメモリ上においたハッシュ(javascriptのオブジェクト)がページをまたがって消えないようになったもの。
こんな簡単でいいのかな？いやこんな簡単で何が悪いんだ？
そんなローカルストレージ(localStorage)について使い方の備忘録。
| localStorage.setItem(キー, データ)
キーに対応するデータを格納する。 |
|
| localStorage.getItem(キー)
キーに対応するデータを取得する。 |
|
| localStorage.removeItem(キー)
キーに対応するデータを削除する。 |
|
| localStorage.clear()
ローカルストレージをクリアする。全てをスッキリしてくれるが、ドメインに紐づいたデータが消えてしまうのが玉にキズ？ |
これだけあればまずは十分。キーとデータには共に文字列を使用すること推奨。
結論: いっそのこと使わないほうが楽なんじゃない？(これが結論？)
ええ、勘違いしてました。
簡単に親ブロックに対する比率で設定できると思ったけど、親の設定が「auto」の場合はそういうわけにはいかなくて、厳密に親ブロックの高さが決まるようにレイアウトする必要があるみたい。
計算できるんだから計算結果に対する比率になるものだろうと思い込んでましたが、考えてみれば、親要素の高さは子要素の高さによって変化するものだから、循環していて計算で出るわけないですね。
一見うまく動いているように見える場合も、緩い規約の下でブラウザが拡大解釈してくれているから比較的それっぽく見えているだけ、ということだったらしい。
ブログの作成に高機能なHTMLエディタを使うつもりはないのだけど、その時入力しているタグを間違えてないかどうかはリアルタイムにチェックしたい。
けど、bloggerの投稿画面でのプレビューがリアルタイムじゃないのでちょっと自分でツール作ってみた。
以下のような感じで画像にborder-radiusを指定すると、Chrome13とFireFox6では想定通り角が丸くなった。
のだけど…Opera11はそうなってくれない。
| このブラウザ | Chrome | Opera |
|---|---|---|
|
 |
|