カテゴリー別アーカイブ: javascript

開眼!JavaScript 読了

Twitter で「入門から GoodParts 本へ行く間に読む本」といった内容の Tweet を見かけたので買ってみました。未だに JavaScript がちゃんと書ける気がしておらず, とりあえず気になりました。

内容としては JavaScript のオブジェクトから始まり基本的な型に関する知見が得られるものです。特にオブジェクトに関しては, 「あーそれ知らなかった…」といった内容が多々ありました。

対象読者としては, 入門本を読み終わった方が読むのには最適だと思います。また, GoodParts 本でいきなり「リテラル」が出てきて ??? となっていた私のような人にもオススメです。GoodParts 本を何度も読んで理解を深める作業をしていたんですが, この書籍を事前に読んでいればもっとスムーズだったかと思います。(´Д`)ハァ…

オライリー「D3をはじめよう」読了

D3をはじめよう

データの可視化を可能にするJavaScriptライブラリ「D3.js」の入門書(?)であるオライリーの「D3をはじめよう」を読みました。

D3.jsをいじりはじめたキッカケ

確かこの辺の記事を見て気になったのが最初だったかなと思います。

データを分かりやすくスタイリッシュに可視化できるJavascriptライブラリ「D3.js」 – GIGAZINE

ちょうど群馬県の統計データであれこれ遊んでいて、面白そうだなー、と思った記憶が。

一旦放置していましたが、2月に行われた群馬県内の貴重な勉強会Gunma.webで@_shimizuさんとお会いして、少し話を聞いて「やってみるかー」と思った次第です。日本語版のD3.jsのサイトを見たら、@_shimizuさんが「日本の第一人者」と紹介されていました。(さっき気づいた

続きを読む

Gunma.web#12に参加しました

12回目を迎えた群馬で開催されるそっち系の人向け勉強会Gunma.web#12に参加しました。個別の発表については_shimizuさんのブログ記事 Gunmaweb #12に参加してきました。 | GUNMA GIS GEEK に詳しいです。

今回の発表

群馬に戻ってきてからの発表内容はアップロードが憚られるものが多かったので、久しぶりの資料公開になります。昨年の11月から取り組んでいる静的サイトの作り方のお話をさせていただきました。

昨年の春くらいからJIS X 8341-3 およびみんなの公共サイト運用モデルの調査、実装検討からもう1歩進んで、より確実により早くより簡単にHTMLを生成する方法を探して、こんな環境に辿り着きました。群馬に戻ってきてからのHTMLまわりの検討については、この辺りで一旦お休みの予定です。

反省点

この発表については、中身がテンプレートエンジンSlimの話と静的サイト生成ツールmiddlemanの話の2つをくっつけたものになります。5分の発表であればどちらかに絞って話すべきだったと感じました。内容が多い上に浅かった感じで。まだまだ精進したいですね。

その他

Middlemanはコマンドラインからコマンドを叩かないと使えないツールです。だがしかし!今日中の人が「ターゲットはコマンドライン使わない人たちだから、Macのアプリじきに出すよ」と書いていたのでこうご期待です。(日本語化しといてよかった

お正月休み2日目: jasmineとtestemでJSのテストを書く

お正月休み2日目です。休みらしくないけど業務的にはお休みです。

さて、昨日のRSpecに続いて本日はJavaScriptのテストをJasmineで書いてテストツールtestemで回してみます。phantomJSがーとかjsTestDriverがーとか、よくわかんねーなーと思っていたところに相次いでtestemがいいらしいとお話を伺ったので試してみる次第です。

JasmineはRSpec風に書けるJSのテストフレームワークとのことでやってみる。

資料

Jasmineについては昨年中にintroduction.jsを一通り写経してありました。そこにtestemを組み合わせる訳ですが、testem.jsonを書いて設置、コマンドを叩けばいいだけでした。

中途半端になっていたJSのライブラリが手元にあったので、それを書きなおしながらテストを書いてみました。RSpec風に書けるということで、ある程度は簡単に。ただ、昨日に続きテストダブル(spy)の部分がまだよくわかっていないです。書いているうちに慣れるでしょう。

Jasmine自体はRSpec風に書けるということだったんですが、例えばcontextやsubjectといったものは無いようです。(contextについては開発チームが乗せない決定をしている模様)

testem ci

testemは単にテストが簡単に動かせる程度の認識でしたが “testem ci” を打つと、インストールされている全ブラウザを順に起動してそれぞれでテストが通るかチェックしてくれます。かなり驚きました。

これにて本日は終了。

JavaScript:The Good Partsの写経完了

実は今所有しているGoodParts本は2冊目です。
かなり前の話ですが、まだプログラミングを始めて初期の頃に買って読んで理解できず。その後、コーヒーをぶちまけ、1冊目はおシャカに。

WebプログラマをしていればJavaScriptを書かない訳にはいきません。いつの間にやらそれっぽく書いてました。しかし、どうにもコードの効率が悪かったり、キレイにかけなかったり。そこでJavaScriptを強化すべく昨年末くらいからJS強化を図っています。

パーフェクトJavaScriptを読んでみて、そこからもう一度GoodParts本へ。写経する中で改めていい本だなぁと思いました。
まだ読んでない人にはオススメです。

JavaScriptへの再挑戦を開始します。

JavaScriptを基礎から学び(一応は学び終わり)、結局のところ使う機会も少なく、今はjQueryを愛用中です。

しかしだ!今度、いろいろやってみたいことが出来まして、もう一度きっちりやってみることにしました。目標はブログパーツを作ったり、bookmarkletを作ることです。

続く(いや、きっと)。

ところで、blog気づいたらまたしばらく書いてませんでした。忙しくなるとダメですね><。

空港の掲示板の表示を実現するjQueryプラグイン::Airport

IDEA*IDEAさんで紹介されていたjQueryプラグインを試してみました。
紹介されたのはちょっと前ですが、気になってた次第。

空港の行き先掲示板のようなエフェクトを実現するjQueryのプラグイン『Airport – Information Board Text Effect』

画面上で動的に、空港の発着掲示板のように表示されるプラグイン。
続きを読む

マウスオーバーで画像表示変更

JavaScriptのサンプルコード見ていたら、よく見るタイプの画像表示変更のスクリプトがあったので、サクッといじってみる。

JavaScriptの入門とサンプル集:■マウスを重ねると画像が入れ替わる

作ったのはこちら!
簡単にできるもんですね。

画像はFlickrの自分のものを使用。
aタグのsrcを書き換えた程度です。

これを応用、というより複数の画像を旨くCSSで並べて構成すればちょっとしたフォトアルバムができま・・・
ん?これDBにファイル名入れ込んで、画像ファイルを特定ディレクトリにuploadしておけば…ゴニョゴニョ。

さてさて、JavaScriptいじり始めたばかりですが、これからどうやって学習を進めていくべきか悩むところ。
ライブラリを中心に進めるか、シンプルにサンプルを研究するか。

ベストは両方を組み合わせて進めることなんだろうけど、どうすれば短時間で学習できるだろうか?
まぁ、気長にやりますけどね。