hamashun.com

• 2007-07-12資料公開をした人の章にリンク追加
• 2007-07-12 sendさんの章に追記

超長いんでショートカットメニュー作りました。
あと、JavaScriptの素人が書いてます。 あちこち間違ってたらごめんなさい。

• マークアッパー・デザイナー向けJavaScript入門
• マークアップエンジニア・HTMLコーダー向け、Yahoo UI Library活用術
• Google Gears入門
• JSの使いどころ
• liveプレゼン
• 猿でもわかる GreaseMonkey
• Firebugの話
• 総括

Twitter関連でお世話になっているukstudioが、初心者向けJavaScript勉強会を主催してくれたので、モリモリ勉強してきました！
会場は株式会社ノッキングオン様に提供して頂きました。 ありがとうございます！
僕は行ってなかったんですけど、モバイル勉強会の時もお世話になったそうです。

マークアッパー・デザイナー向けJavaScript入門

資料公開（補足も必見）

トップバッターのUKは、JavaScriptの基本をざっくりと語ってくれました。
入門書に書いてあるような内容が中心でしたけど、疑問に思った事をすぐに聞けるという環境は良かったです。
赤い髪の人の適切なツッコ・・・補足もありましたし！

基本的な事

• CDATAの内容は、XML的には<や&を参照しなくて良い（この辺、今度じっくり調べたい）
• 「_」は、海外ではアンダースコアと呼ぶ
• リテラルとは、文字列とか、trueとか、nullとか、直接値を書く事
• 普通の配列は、数字で管理する
• 連想配列は、文字列で管理する
• 普通の配列も連想配列も、やってる事は同じ。 ただ、複雑な所では、違う事も出てくる。
• %は、「割った余り」という演算子
• >=と<=は、以上以下という演算子
• &&は、演算子同士を比べたりして、両方ともtrueならtrueを返す
• ||はどちらかでOK

ローカル変数とグローバル変数

変数を定義する時にvarを付けたりと付けなかったりなのは、ちゃんと意味があったらしい。
関数のなかでvarを付けて定義すると、その変数はその関数内でのみ使える変数（ローカル変数）になる。
関数の中でvarを付けずに定義すると、それは関数の外でも使える変数（グローバル変数）になる。

var a = 1;

function hoge () {
  a = 2;
}

functionの中のaはグローバル変数なので、最初のaに代入された1は上書きされる。

var a = 1;

function(){
 var a = 2;
}

functionの中のaはローカル変数なので、最初のaに代入された1はそのまま。

オブジェクト志向

ごめん、よくわからなかった！
後半の_tad_さんの説明がフォローしてくれているので、そちらをどぞー。

DOMについて

ノードとは、HTMLで言うところの要素みたいな感じ。

<a href="index.html">Top</a>

この場合、<a>が要素ノード、href="index.html"が属性ノード（属性と値の両方を含めるぽい？）、Topがテキストノードとなる。
もちろん、属性ノードは属性の数によって増える。

IE様は改行（br要素ではなく、単なる改行）もノードとしてしまうらしく、ノードの数がブラウザによって違う、という事態になるとか。
まったくもうこれだからＩ（ｒｙ

まとめ

• 基本的な事を喋ってくれた
• UKはいじられ愛されキャラ
• 準備とかお疲れ様！

マークアップエンジニア・HTMLコーダー向け、Yahoo UI Library活用術

資料公開

YUIを語って貰うならこの人しかいないッ！ 紫色の何かをたずさえ来てくれた―――!!! （いや今日は無かったけど）
という訳で、HolyGrailさんが初心者向けに解説をしてくれました。
ちなみに、プレゼン終了直後に資料を公開されていました。 早すぎですｗ

YUIを使うメリット

• ブラウザウィンドウの表示領域（ツールバーとかを除いた、純粋な領域サイズ）の取得
• class名でelementを取得できる
• 座標の取得
• 他にもいっぱい
• これらをクロスブラウザでやってくれる！
• しかも、自分が書くのは超シンプルなコード

多分、他のライブラリにも共通する事だと思うんですけど、ライブラリを用意さえすれば、後はそれを使うタイミングなどを指定するだけで良いみたい。
マークアップエンジニア向けに説明すると、CSSファイルのコンポーネント化の感覚に近い物があるかも？（それの是非はここではともかく）

あと、今回の資料のCSS部分は、Holyさんの後輩のマークアップエンジニアさんが担当されたそうです。
後輩さんとは、本当ならこの前お会いできるはずだったんですけど、事情により流れてしまいました。
近い内にお会いしたいと思いまくりです。

まとめ

• YUIは、色んな便利をクロスブラウザで実現してくれる
• とにかくまずはさわってみよう！
• 英語が読めない人はYahoo UI Library リファレンスを見るといいかも

Google Gears入門

makotokagaさんは、少し前から話題になっている、Google Gearsに関する事を喋ってくれました。
・・・んですけど、すみません！ ぶっちゃけ僕には難しすぎました！
理解できた事と言えば

• AdobeのAIRはアプリケーションぽさがあるけど、Gearsはあくまでブラウザベース
• オンラインでデータをキャッシュして、オフラインで見られる
• データはSQLiteで管理される
• SQLiteという、現在普及している技術を使う事によって、みんながいきなり使いこなせる

という事くらいでした。 ううーん、すみません精進します。

JSの使いどころ

moさんのプレゼンは凄かったです。
何が凄いって、終わった後のマークアッパー・デザイナー達の目の輝きとでもいいますか。
いったい何が彼らをそうさせたのでしょうか。

moさんのプレゼンはJSの使いどころという事で、「JavaScriptの使い道はWebだけじゃないんだよ」という事を語ってくれました。

ブックマークレット

SBMやtumblrでおなじみのブックマークレット。 これはJavaScriptで作る事ができる。
どうやら割と簡単に作れそうな感じ。

Firefox拡張機能

Firefoxの拡張機能を作るには、XUL(ズール)という、XMLベースの言語とJavaScriptを使う。
簡単に言うと、DOMをJavaScriptで操作するように、XULをJavaScriptで操作するんだとか。
これも手を出してみたい・・・！

Flash

ActionScriptからJavaScriptを、またその逆を呼び出す事ができる。

RIA

リッチなインターフェイスのアプリケーションを作れる！（すみませんここ聞き漏らしました）

DreamweaverやPhotoshopの拡張機能

これが凄かった！ 特にPhotoshopの拡張機能が紹介された瞬間に、マークアッパーとデザイナーは今までの苦労が走馬灯のように流れた事間違いなし。

moさんが今回紹介してくれた拡張機能は、『psdファイルからhtml要素やhead部分など最低限の構成と、素のテキストを吐き出してくれる』という物。
つまり、psdファイルからテキストをコピペする必要が無くなる訳で。
いやもう本当に、プレゼンが終わってから、一斉にみんなが同じ質問をしたのには笑いましたｗ（公開はしてくれるんですか？みたいな）

デスクトップアプリ

JavaScriptで作ったTwitterクライアントを紹介。
多分、見た目部分はCSSなんかを使っているのかな。 その辺り、なんだかAIRとも共通する便利さがあるのかも。

まとめ

• JavaScriptはWebだけの技術じゃない
• まずはブックマークレットから始めてみるといいかも
• Photoshopの拡張機能が超スゴイ

なんだか、Adobe製品のスクリプトには、まだまだ面白く便利にできる余地がある気がします。
エンジニアさん達が余り使わない分野だから（？）余計に未開拓なのかも。

liveプレゼン

_tad_さんがやってくれたのは、ほぼ真っ白なメモ帳を用意して、ライブに書き込んでいくというliveプレゼン！
いやあこの発想は無かったですわ。
内容は、プログラミングの基礎の基礎、みたいな感じでした。

キーワードは「めどい」。
なにせ「めんどい」とタイプするのすら「めどい」くらい！

構造化

• 順番にやる
• 条件を見る
• 繰り返す

プログラムっていうのは、基本的にこんな事を書いていく。 例えば次のコードなら、

if(uk == "20") {
 while(n <= 20) {
 document.write("hogehoge");
 n++;
 }
}

もし、ukと文字列20が等しければ（条件を見る）、
nが20になるまで文字列hogehogeを出力する（繰り返す）
となる。 順番にやるっていうのは、上から順に降りてくる事（・・だったはず）。

オブジェクト指向

実はめどくない。
考え方としては、「ナイフは野菜に使うと便利だけど、人に使うのはNG。 じゃあナイフは人に使えないようにしよう」という物。
JavaScriptで考えると、「機能によって、使える場所を制限しておこう」という感じ？

つまり、覚える事は少なくて済む（制限によって区切られた物ごとに覚えれば良い？）

ライブラリ

ライブラリとは、図書館のような物。
司書（エンジニア）さんはその本の種類（そのライブラリは何なのか）を知っておけばよくて、本の内容（コードの内容）までを全て熟知しておく必要は無い（知っておくに越した事はないだろうけど）。

また、既に世界各所で使われているので、不具合がおきづらい。
バグがあっても、報告をすれば直してくれる（事が期待できる）。

また、ライブラリのコードは生きた見本である。
まずは実際に使ってみて、動きなどを体験してからコードを読むと、理解が深まる。

CSSのcommon.cssは、ローカル性が強い。
対してJavaScriptのcommon.jsは、グローバル性が強い。 との事。
これは使いまわしがしやすいか否か、という意味。
（まあ、CSSはHTMLによって変わってくるので、結局は文書次第になってしまうと思います）

まとめ

• liveプレゼンメソッドすげー
• 例え話が解りやすい！
• やっぱり大事なのは使ってみる事

猿でもわかる GreaseMonkey

資料公開

赤い髪の人、Yoshioriさんのプレゼンは、グリモンに関する事です。
多分GreaseMonkeyだから「猿でもわかる」なんだと思うんですけど、誰もツッコめませんでした。

Yoshioriさんのプレゼンは、また強烈でした。
スターウォーズのライトセイバーをポインター代わりに進行をするんですけど、ご本人のキャラもあいまって、爆笑しながらも理解しやすい内容になりました。

グリモン、最初の部分の書き方

// ==UserScript==
// @name          hamashunGreaseMonkey20070714
// @namespace     http://www.hamashun.com
// @include       http://auth.livedoor.com/*
// @version       1.0
// ==/UserScript==

• @nameは、可能な限りユニークな物にしておく良い。 これがかぶると、動作もかぶってしまう恐れがある
• @namespaceがあるので、もし万が一@nameがかぶっても、一応は安心？ とりあえず自分のドメインとかにしておくと良い
• @includeは、適用するサイトの事。*はワイルドカード
• バージョンを書いておく

冒頭に書くのは大体こんな感じで、あとはJavaScriptで書いていくだけのよう。

細かい点いろいろ

• グリモン専用の関数が用意されている
• eval()で、外部スクリプトを読み込む事ができる・・・が、セキュリティ的に余りお勧めできない
• LDRは、グリモンを組み込みやすいように工夫されている（そうなのか！）
• セキュリティ的に危うい物も作れてしまうので、注意が必要
• とはいえ、作ったらバンバン公開しよう！ 優しい先輩達が優しくDisって教えてくれるよ！

JavaScriptクイズ

a = 5 + "3";
b = 5 * "3";

それぞれ、変数にはどんな値が代入されるのか？

答えはaが53で、bが15。
aは普通にそのまんまなので割愛。
5 * "3"は、数値と文字列は掛け算できないので、いい感じに判断して数値同士として扱ってくれる。

var a = 10/3;

ではこれは、どんな値がaに代入されるのか？

答えは3.3333333333333335
他の言語では小数点以下は扱わない事が殆どらしい。
JavaScriptは整数型を持っていないので、このようになるんだとか。
ちなみに、3.3333333333333335に3を掛け算すると、空気を読んで10としてくれる。

var a = new array;

a[1.5] = "foo";

alert[1.5];

小数点を解するという事は、配列に小数点以下の数値を指定する事もできる。

alert(2 & 3 == 1);

（この辺りからかなり難しくなってきて、メモったコードも怪しくなってきます）
この結果出力される値は？

答えは「0」
&演算子と==演算子だと==演算子の方が優先されるので、まず 3 == 1 でfalseが返る。
falseは0として扱われるので、 2 & 0 という事になる。
&演算子はビット演算子と言って、ビット（0と1）の世界として比較する。
その結果により、0が出力される。
なお、出力された0はビットの世界の0（つまりfalse）ではなく、 3 == 1 の結果の0である。

他にもいくつかの問題があったんですけど、メモがうまく取れていなかったり、再現ができなかったりで断念しました。
きっと他の誰かが書いてくれるはず・・・！

まとめ

• JavaScriptはツンデレ
• はて☆スタの32分の1がYoshioriさんによるもの
• JavaScript楽しい！

Firebugの話

sendさんのプレゼンは、Firebugについてでした。
コンソールのをちゃんと消さないとだめだよ！ って内容でした。
時間がかなり押せ押せだったので、ぜひ、今度また聞いてみたいと思いました。

追記
Firebugの話だけという訳ではありません。 誤解を生むような書き方ですみませんでした。
sendさんがご自身のBlogで記事を公開されています。 ありがとうございます！

総括

ものっそい楽しかったです。 質問しまくってしまいました。
最近、自分の中でJavaScriptとかDOMへの関心が高まってきているのもあって、タイミングも良かったです。

ユーザーCSSを作っていて感じたんですけど、何かを作るのって凄く楽しいです。
まずは何か、超簡単なグリモンかブックマークレットに挑戦してみたいです。

元々、この勉強会はUKが「社内勉強会でJavaScriptについて喋る事になった～」的な事をつぶやいたのがきっかけでした。
「じゃあTwitterでもやろうぜ！」と誰かが言い出して、あれよあれよと言う間に30人もの参加者が集まっていました。
会場探しやら色々な準備やらで大変だったと思うけれど、おかげでとても勉強になりました。 ありがとうUK！ お疲れ様！

あ、次回も楽しみにしてるから！