ng-mtg#4 AngularJS勉強会 に行ってきました。 #ng_jp

12/3に行われたAngularJS勉強会に行ってきました。

そのメモを載せておきます。

本当は整理してからと思ったのですが、結局整理して書こうとすると何も書かずに終わってしまうので。

気が向いたらきちんとまとめます。

あと間違いがあればご指摘いただければ修正します。

---

ng-mtg#4 AngularJS勉強会 2013/12/03 @サイバーエージェント

# 動機
* 最近JavaScriptの勉強していて、クライアントサイドのJSライブラリを習得したかったから。
* 勉強してみてAngularJSがよさげで、さらに理解を深めようと思ったから。
* 最初は簡単だけど、ちゃんと勉強すると難しいと聞いて

# 自分の背景知識
* ドットインストール(http://dotinstall.com/lessons/basic_angularjs )
* tutorial(http://docs.angularjs.org/tutorial )
をひと通りいじってあとは適当にアプリとかつくって遊んでいる状況
本格的にアプリつくっているわけではない

# 内容
## introduction
* 金井さんから説明

## AngularJS 20min @naoya_ito
https://speakerdeck.com/naoya/angularjs-20min-number-ng-jp
初心者向けにチュートリアル的な内容。AngularJSの特徴/主な機能の説明がメイン

* AngularJSがBackbone.jsよりもgithubで★がたくさんついてる状態
* JavaScript "MVW" Framework (Model View Watever) (MV* の議論の無駄 )
* AngularJSの基本
** HTMLそのものがテンプレート
*** HTMLに ng-xxxを埋め込んで、jsがそれに対応する処理をする
*** $scopeがHTMLとapp(js)の橋渡し 
** 双方向データバインディング
** HTMLフォームを変えると$scopeのオブジェクト(app側の値)が変わる/$scopeが変わるとHTML側が変わる
** しかもリアルタイムに$scopeが変わる
* アプリがDOMの構造をしらなくてよい => HTML変更をしても動かなくなるようなことが起きづらい
* ロジックでDOMの構造を構築しないようにする
* 制約によってコードが綺麗に保たれる

* いくつかの機能
** angular-resource.js
*** サーバーサイドからデータを取得するのに使える
** フィルタがすごく簡単に書ける
** Form validation
*** 必須だとrequiredつけるとか、フォームに条件をつけてvalidation可能

* コンセプトとしてJavaScriptの構造を整理するというよりもHTMLを拡張して機能を追加している
* DIによってテストしやすい

* 雑感
** DIの仕組み
*** function()定義を文字列として扱っているから、$scopeをsとか書き換えてしまうと動かない
** JSONサーバーが後ろに控えたCRUDアプリ
** グラフィックやゲーム系が苦手
** 簡単に動かすまでは簡単だけど、本格的に学習するとコスト高め
** 制約やテストしやすさで複数人数での開発は向いてる?


## OnsenUIについて ~Angular.js+Topcoat~  Kruyさん/四方さん(アシアル株式会社)
OnsenUIがどういうものかの説明。デモ等が中心
OnsenUI => https://github.com/OnsenUI/OnsenUI

* AngularJSとTopcatを組み合わせたMobile UI
* モバイル向けのUIをHTML5で簡単につくる方法を提供したかった
** jQueryMobileだとUXがいまいち/ソースコードが冗長
* 簡単/使えるUIコンポーネント
** 独自タグをHTMLに書くだけ
** 基本的なコンポーネントがデフォルトで用意されている
* ぬるぬる動く
** CSSを利用して滑らかなアニメーション
* テーマ機能
** デザインの一括変更/Font Awesome/CSS独自カスタマイズ
* 独自タグでコンポーネントを定義して、属性でアニメーション等を設定している印象
* 今後
** Onsen UIのGUIツール「UIBuilder」の提供
** Webコンポーネントを公開・共有できるしくみ

## AngularJSを実サービスで使ってみて @sakatam
AngularJSを使った実際のプロジェクトの話
https://speakerdeck.com/sakatam/angularjs-mian-qiang-hui-number-4-shi-zhan-angularjs

* プロジェクト
** 3ヶ月
** Eコマースのリニューアル
** Mobile Firstアプローチ
** ついでにAngularJS
** うまくいった

* システム構成&人員構成
** 旧構成 => jsp/Java servlet , Legacy API(RPC), DB
** 新構成 => AngularJS APp/Node.js, Legacy API(RPC), DB
** 人員:AngularJS App => UXデザイナ2 Frontend JSエンジニア2 Backend jsエンジニア2
*** フロントエンドエンジニアがBackendも踏み込める/その逆も

* なんでAngularJS?
** backbone.js => 開発者の力量でコードの品質がばらつく等　スケールしづらい
** 柔軟性では劣る
** モジュール・ベースの開発を強制 (DI/Module・Directive)
** ビューとモデルの自動バインディングのせいでコントロールが単純化・コードのメンテナンス性が高い
** 開発がスケールし易い

* 開発フロー
** 基盤づくりに時間をかけた(3week)のが功を奏した
** チーム展開(2week)でFrontendエンジニアにしっかり慣れてもらった
*** FエンジニアはDIやモジュール志向に慣れてないため
** 開発イテレーションは一般的なウェブ開発とほとんど同じ
** テストファーストができるのがメリット (プロジェクトではUnit Testは必須にした/E2E Testはクリティカルパス確認用)

* 実戦投入次のTips
** 複雑なモデル・データの状態管理
*** モデルが複雑になるとAngularJSは管理してくれない => AngularJSの長所はシンプルなモデル
*** モデルを浅くして問題回避
** $rootScope $broadcast
*** 便利だけど使いすぎるとDIの意味がなくなるので危険
** 仮引数Minify対応の紹介
** リクエスト数の肥大化に注意する(モバイル等で)
*** ビルド時にバンドルする( webmake/angular-template)
** SEO/Crawwler対策
*** UserJSで判別してPhantomJSで対応

* ほどよい制約・モジュール化の強制
* Frontendエンジニアの底上げも


## 目指せ脱初心者！あなたの知りたかったAngularJS @agektmr
初心者が中級者になるためのセッション
AngluraJSの具体的なプラクティスの紹介(でもなんだかディレクティブの話が中心)

* Angularユーザの悩み =>ドキュメントが英語/Angular Wayがあるっぽい/日本語情報が少ない/相談相手がいない/ドキュメントがわかりにくい

* AngularJSでDOMをいじるには
** ディレクティブをつくる => ハードルが高い?
*** linkがあればDOMの操作はできる

app.directive('fileSelect',function() {
  return {
     link : function(scope, elem, attr) {  //elemはjqueryオブジェクト
        elem.bind('change', xxxx);
    }
  }
});

*** AngularJSはjqueryの機能を使える(JQliteというJQueryのLite版を持っている)
*** restrict:でタグ等を指定できる
** 独自タグを定義
<script type="text/ng-template"> でテンプレートを定義
*** templateUrlでテンプレートを指定すれば、定義したhtmlを呼び出せる

* コントローラ間で変数を跨って使う => moduleを使ってvalueに割り当てる
** デモ：http://demo.agektmr.com/flexbox/ 
* DOMの塊がオブジェクトとしてそのオブジェクトを誰が所有しているか

* Web Components
** 自分の独自のelementを作れる
* AngularはWeb Componentsをとりこもうとしている
* ディレクティブはPolymerに置き換わる
** Polymer.js (Web Componentsのは http://www.polymer-project.org/ )


## LT
メモなし

# 懇親会は体調が思わしくなかったので参加せず(残念)

# リンク
toggtter => http://togetter.com/li/598391

# 感想
* AngularJSの初心者でも勉強になった。
* ただまだまだAngularJS力が足りない
* directive周りはちゃんと勉強しようと思った。ここが使いこなせないと、ちゃんと使いこなしたことにならないと思った。

---

明日からもがんばろ

CoffeeScriptを学ぶ(2)

JavaScriptはプロトタイプベースのオブジェクト指向だったので、
クラスという概念はなかったのですが、
CoffeeScriptには、クラスという概念があります。

class Hello
  method:  ->
    alert "hello"

"class クラス名"でクラスを宣言できます。
メソッドは、クラスのブロックで

メソッド名: (引数) ->
  メソッド本体

と書きます。

これをJavaScriptに変換すると、下記のようになります。

var Hello;

Hello = (function() {
  function Hello() {}
  Hello.prototype.method = function() {
    return alert("hello");
  };
  return Hello;
})();

CoffeeScriptのページのサンプルの例を持ってくると

class Animal
  constructor: (@name) ->

  move: (meters) ->
    alert @name + " moved #{meters}m."

Animalとうクラスです。
コンストラクタは "constructor:"で定義できます。
@xxxはインスタンス変数ですね。
ちなみに#{}を使えば、文字列のなかで変数を評価して値を使用できます。(Rubyと同じ構文ですね。)

class Snake extends Animal
  move: ->
    alert "Slithering..."
    super 5

class Horse extends Animal
  move: ->
    alert "Galloping..."
    super 45

継承はextendsを使います。
superでスーパークラスのメソッドを呼び出すことができます。

やっぱりクラスを使うと、比較的大きなコードを書くときは、考えやすくて便利ですよね。

CoffeeScriptを学ぶ

CoffeeScriptはJvaScriptに変換するための言語で、
Pythonのような文法を持っているのが特徴のようです。

このCoffeeScriptを学ぼうと思い、いくつかのサンプルを書いてみました。
まず基本、FizzBuzzです。
(下記はalertで書いたので実行すると大変なことになるから気をつけてね)

for a in [1..100]
  if a%15 == 0
    alert "FizzBuzz"
  else if a%3 == 0
    alert "Fizz"
  else if a%5 == 0
    alert "Buzz"
  else
    alert a

特徴としては、Pythonのようにインデントがブロックを表しています。
インデントでブロックにすると、やっぱり見やすいですよね。
また、メソッドも()がつかないです。

これをJavaScriptに変換すると、以下のようになります。

var a;

for (a = 1; a <= 100; a++) {
  if (a % 15 === 0) {
    alert("fizzbuzz");
  } else if (a % 3 === 0) {
    alert("fizz");
  } else if (a % 5 === 0) {
    alert("buzz");
  } else {
    alert(a);
  }
}

今度はクイックソートを実装してみます。 関数は

関数名 -> (引数)
　　　(関数本体)

のです。 CoffeeScriptはwhile文が使えます 　

sort = (array, l, r) ->
  mid = ~~(l+r/2)
  return if l >= r
  i = l
  j = r
  pivot = array[mid]
  while true
    while array[i] < pivot
      i++
    while array[j] > pivot
      j--
    break if i >= j
    t = array[i]
    array[i] = array[j]
    array[j] = t
  sort array, l, i-1 if l < i-1
  sort array, j+1, r if j+1 < r

a = [1, 4, 3, 7, 6, 5, 2, 8]
sort a, 0, 7
alert a

下記はJavaScriptに変換したときのコードです。

var a, sort;

sort = function(array, l, r) {
  var i, j, mid, pivot, t;
  mid = ~~(l + r / 2);
  if (l >= r) return;
  i = l;
  j = r;
  pivot = array[mid];
  while (true) {
    while (array[i] < pivot) {
      i++;
    }
    while (array[j] > pivot) {
      j--;
    }
    if (i >= j) break;
    t = array[i];
    array[i] = array[j];
    array[j] = t;
  }
  if (l < i - 1) sort(array, l, i - 1);
  if (j + 1 < r) return sort(array, j + 1, r);
};

a = [1, 4, 3, 7, 6, 5, 2, 8];
sort(a, 0, 7);
alert(a);

[android]androidのアプリをHTMLで作れるようにする

androidのアプリケーションから
ローカルに保存してあるHTMLを表示させるアプリのサンプルを作ってみました。
WebViewのaddJavascriptInterface()をつかえば、
Javascript から Androidのメソッドを呼び出すこともできます。

ローカルにおくためのHTMLは、
assetsフォルダに保存しておけば、file: でアクセスできます。
(assets/index.htmlだったら、file://android_asset/index.htmlでアクセスできる)

サンプルです。
HelloHTMLActivity.java

package jp.android.hellohtml;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.os.Vibrator;
import android.util.Log;
import android.webkit.WebView;
import android.widget.Toast;

public class HelloHTMLActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        WebView wv = new WebView(this);
        wv.getSettings().setJavaScriptEnabled(true);
        MyJSObj jsobj = new MyJSObj(this);
        wv.addJavascriptInterface(jsobj, "myobj");
        setContentView(wv);
        
        wv.loadUrl("file:///android_asset/index.html");
    }
    
    class MyJSObj {
     private Context context;
     
     public MyJSObj(Context c) {
      this.context = c;
     }
     
     public void showToast(String str) {
      Log.d("tag", str);
      Toast.makeText(context, str, Toast.LENGTH_LONG).show();
     }
     
     public void vibration() {
      Vibrator vibrator = (Vibrator)getSystemService(VIBRATOR_SERVICE);
      vibrator.vibrate(2000);
     }
    }
}

addJavascriptInterface()は第１引数はjavascriptにバインドしたいオブジェクト、
第２引数はjavascriptでアクセスするオブジェクトの名前を指定します。

今回は、MyJSObjのメソッドにアクセスできるようにします。
showToast() はただのtoastの表示、
vibration() は２秒間振動します。

Vibratorを使うときは、
android.permission.VIBRATE
の設定を忘れずに。

index.html

<html>
<head>
<title>test content</title>
<script type="text/javascript">
  function showText() {
    myobj.showToast("test");
  }
  function vibration() {
    myobj.vibration();
  }
</script>
</head>
<body>
<div>hello</div>
<input type="button" value="toast" onclick="showText();" />
<input type="button" value="vibe" onclick="vibration();" />
</body>
</html>

実行結果

実行結果はただのHTMLですが、
toastをクリックすればtoastがでて、
vibeをクリックすれば、きちんと２秒間振動することを確認しました。

第12回「HTML5とか勉強会」に参加してきました。

11/18に、第12回「HTML5とか勉強会」に参加してきました。
いつも気が付いたら満員だったのですが、念願の初参加です！
今回は素晴らしいスピーカーの皆さまでした!感激でした！
(あと、英語だったので、あんまり理解できないところも多々。。。orz)

Paul Irish: The State of HTML5 : Inaugural Address
http://wde2010-pi.appspot.com/#slide1

HTML5関連技術について、一通りのデモを見せてくれました。
Audio data APIとWebGLを組み合わせたもののデモは秀逸でした。
WebGLで書いたビリヤードゲームで、玉のぶつかった音とかをAudio Data APIで表現したり。
もう、HTML5でゲームやらアプリやらを作れる時代が来ていることを実感。
SVG Filterなんかも紹介。
ライブラリとして、
HTML5の対応状況を調べてくれる　modernizer.js 　http://www.modernizr.com/
無駄なスクリプトのロードを防いだりしてくれるスクリプトローダーの
yeonope.js http://yepnopejs.com/
を紹介していました。

Bruce Lawson: WAI-ARIA
http://www.slideshare.net/brucelawson/bruce-lawsonhtml5ariajapan

WAI-ARIAというアクセシビリティの仕様のお話。
WAI-ARIAを描けば、例えば、ディスプレイがないデバイスでも音声などで補助してくれる、
そういうことを実現するための仕様です。
WAI-ARIAはHTML5と組み合わせることが可能で、
roleという属性を使って、"navigation"とか"banner"とかその要素の
役割を書くことができるようです。
HTML5には<nav>とか、<header>とかセマンティクスが用意されていますが、
対応したデバイスを考えてWAI-ARIAも組み合わせて書くべし。
あとは、要素にwebSRTを指定して、動画に字幕をつけるデモもしてました。

Jonathan Stark: jQuery Mobile + PhoneGap
http://www.slideshare.net/jonathanstark/building-mobile-apps-with-html-css-and-javascript-4807782

モバイルのWebを書くにはどうするかという話。
モバイルのwebを書くためのライブラリとして

• iUI
• jQTouch
• Sencha Touch
• jQuery Mobile

を紹介。
jQTouchのライブコーディングは非常におもしろかった。
WebアプリとNativeアプリを組み合わせるための
PhnoeGapの紹介もしてくれました。

Michael Fellinger: Canvas implementation using CoffeeScript

Coffee Scriptという
Ruby/Pythonライクで、
書いたコードをJavaScriptに変換してくれるスクリプト言語を紹介してくれました。
存在は知っていましたが、いじったことはなかったので、
あとでいじってみようと思いました。
詳細は下記で。Web上で動かすこともできます。
http://coffeescript.org

懇親会でのライトニングトークも面白かったです。

• 「HTML5で作るスマートフォンのネイティブアプリ」（クジラ飛行机さん）http://www.slideshare.net/kujirahand/html5-js-waffle

• 「iOS+HTML5/CSS3プレゼン＋Twitter Streaming API」（小松さん）
• 「jQuery Mobile」（吉川さん）　http://yst.web.infoseek.co.jp/jquerymobile.html

このようなすばらしい勉強会を企画してくれた主催者の皆様に感謝！
また行きたいな！

NodeListとHTMLCollection

HTMLDocumentには、document.imagesとかdocument.formsとか、DOM Treeからある要素のみを返すアクセッサがあります。

それとは別に DOM Coreには getElementsByTagName() というメソッドがあります。

これらは同じものだと勘違いしていたのですが、document.xxx はHTMLCollection, getElementsByTagName() は NodeListを返します。


で、HTMLCollection は NodeListを継承しているわけではないのです。

ま、HTMLCollection は NodeListと同じ属性とメソッドを持っているので、JavaScriptから見れば同じとみなしていいのかもしれませんが、どうも違和感が。。。

YouTube JavaScript Player API で一つの動画を繰り返し再生させてみる

YouTube JavaScript Player API で一つの動画を繰り返し再生させてみました。

swfobject をつかって、swfを埋め込み、playVideo() で再生させます。

onYouTubePlayerReady() は プレーヤーが完全に読み込まれたときに呼び出される特殊な関数です。この関数の中でplayVideo()を呼び出しています。

また、プレーヤーの状態が変化したときは、onStateChangeイベントが発火するので、addEventListenerでイベントハンドラを登録し、動画再生が終わった時点(stateは0)でplayVideo()を読んで、再度再生するようにしています。

<html>
<head>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
function func() {
  var params = {allowScriptAccess: "always" };
  var atts = {id: "myytplayer" };
  swfobject.embedSWF("http://www.youtube.com/v/VIDEO_ID&enablejsapi=1&playerapiid=ytplayer",
  "ytapiplayer", "425", "356", "8", null, null, params, atts);
}

function onYouTubePlayerReady(playerId) {
  var ytplayer = document.getElementById("myytplayer");
  ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
  ytplayer.playVideo();
}

function onytplayerStateChange(newState) {
  if (newState == 0) {
    var ytplayer = document.getElementById("myytplayer");
    ytplayer.playVideo();
  }
}
</script>
</head>
<body onload="func()">
<div id="ytapiplayer">
 Flash.
</div>
</body>
</html>

YouTube JavaScript Player API の詳細は、YouTube JavaScript Player API リファレンスを参照してください。

即席でスライドショウをつくってみた。

せっかく画像をダウンロードしたので、スライドショウをつくってみた。

まず、ディレクトリにあるファイルすべてを img 要素にするスクリプトをかく。

#!/usr/bin/perl

open OUT, "> display.html"
    or warn "fail";
opendir DH, ".";
print OUT "<html>\n";
print OUT "<head>\n";
print OUT "<script type=\"text/javascript\" src=\"./slideshow.js\"></script>\n";
print OUT "<link rel=\"stylesheet\" href=\"./slideshow.css\" type=\"text/css\"></link>";
print OUT "</head>\n";
print OUT "<body>\n";
foreach $file (readdir DH) {
    if ($file =~ /jpg$/) {
 print OUT "<img src=\"";
 print OUT "$file";
 print OUT "\">\n";
    }
}
print OUT "</body>\n</html>\n";

スライドショウのために、slideshow.css と slidesyou.js を用意。


まず、slideshow.css

body {
  background-color:black;
}

img {
  display : none;
  margin-left : auto;
  margin-right : auto;
}

つぎに、slideshow.js

var img_list;
var i = 0;

function slide() {
  if (i == 0) {
    img_list[img_list.length-1].style.display = "none";
  } else {
    img_list[i-1].style.display = "none";
  }
  img_list[i].style.display = "block";
  if (i == img_list.length-1) { i = 0; } else { i++;}
}

function show(e) {
  img_list = document.getElementsByTagName("img");
  img_list[img_list.length-1].style.display = "block";
  window.setInterval(slide, 10000);
}

window.addEventListener("load", show, false);

まあ、即席で作ったので、だいぶ汚いコードですが・・・。

本当はopacityとか使ってトランジッションとかを派手にしたいんですけど、
今日はここまで。

Yahoo!ウィジェット

Yahoo!ウィジェット - 開発ツール

Yahoo!ウィジェットを試しに作ってみたんですけど、
なかなか面倒くさかったです。

というのも、Yahoo!ウィジェット用のXMLやDOMを覚えなくてはならないからです。

widgetタグやwindowタグやtextタグとかいろいろ覚えなくてはいけないので、
それが面倒。
OperaとかはHTMLのレンダリングエンジンそのものなので、
そのまま HTML+CSS+JavaScript(+SVG)といったWEB標準の知識で
ウィジェットを作れるので、非常に便利だなと思いました。

ただ、Yahoo!ウィジェットで何ができるかはまだわかっていないので、
もう少し調べようかなと思います。

Google、JavaScript APIを手軽に試せる「AJAX API Playground」を公開

Google、JavaScript APIを手軽に試せる「AJAX API Playground」を公開

こういうのがあると気軽にGoogle APIを勉強ができてうれしい。

JSON feed

feedを JSON形式で返す "JSON Feed"なるものがあるらしいです。
http://delicious.com/help/json/

BloggerからJSON形式でfeedを受け取るAPIを叩いてみるサンプルを書いてみました。
仕様とかはどこに書いてあるかどうかわからないので、
Googleのサンプルを見よう見まねで書いてみました。

<html>
<head>
<script type="text/javascript">
var str = "";
function myfunc(json) {
  str += json.feed.title.$t;
  str += "<BR>";
  for (var i = 0; i <json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    str += entry.title.$t;
    str += "<BR>";
  }
}

function result() {
  document.getElementById("ret").innerHTML = str;
}
</script>
<script type="text/javascript" src="http://sassylog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=myfunc"></script>
</head>
<body onload="result()">
<div id="ret">test</div>
</body>
</html>

JSON

JSONというのは、まあ一言でいえばデータをJavaScriptのオブジェクトリテラルや配列リテラルで表現したもののことです。
データをJavaScriptのオブジェクトで表現して、JavaScript処理系で eval()すれば、あとはJavaScriptのオブジェクトとして処理できる優れものです。

たとえば、XMLで

<person>
  <name>Sassy</name>
  <age>27</age>
</person>

と書くのを、

{
  name : "Sassy",
  age : " 27",
}

と書くことができます。
JSON形式はテキストなのでeval()をして捜査します。
以下が例です。

function func() {
      var json_txt = '({name : "Sassy", age :  "27"})';
      var json_obj = eval(json_txt);
      document.getElementById("result").innerHTML = json_obj["name"] + ":" + json_obj["age"];
}

XMLHTTPRequestにおいて、Content-Typeが "text/json" だったりしたら、requestText に対してeval()をしてデータを処理するわけです。

昔誰かに「JavaScriptはJSONに対応しているのか？」という問い合わせがあり、
サポートしているも何も、eval()ができるんだからあたりまえじゃないと思ったものです。
こういった新しい情報に対しては常にアンテナを張っておかないといかんなと思う今日頃です。

Argumentsオブジェクト

JavaScriptの関数は、引数の数が固定ではありません。
だから、

function test1(a,  b, c) {
  /*コード*/
}

とか書いても、

test1("test1");

と呼び出すことができます。
引数が少なかった場合は、残りの引数はundefinedになります。
じゃあ、多かった場合はどうするの？ってことになりますが、
それは Argumentsオブジェクトを利用して取得することができます。
下記はArgumentsオブジェクト(argments)を使って引数を取り出しています。

function argument_test() {
  str = "";
  for (var i = 0;i <= arguments.length;i++) {
    　　  str += arguments[i];
  }
  document.getElementById("result").innerHTML = str;
}

function load_func() {
   argument_test("test1", "test2", "test3");  
}

上記は、test1test2test3が出力されます。

引数にオブジェクトを渡して for/in文で取り出すなんかもできます。

function argument_object_test() {
  str = "";
  for (var i = 0; i < arguments.length; i++) {
    var target = arguments[i];
    for (var name in target) {
      str += target[name] + " ";
    }
  }
  document.getElementById("result").innerHTML = str;
}

function func1() {
  argument_object_test({
    aibu: "saki",
    horikita: "maki",
    ueto: "aya",
  });
}

これはJQuerryなんかでも使われていて、

jQuery.extend = jQuery.fn.extend = function() {
    // copy reference to target object
    var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options;

のようにArgumentsオブジェクトを利用しています。
で利用する側は

 jQuery.fn.extend({
   show: function(speed,callback){
   ....
   });

のようにオブジェクトを渡したりしています。

DHTMLのコンテンツばかり書いていると、
このようなコアJavaScriptについてついつい忘れてしまうものです。
もっと勉強しないとね。

OperaウィジェットでSVGのデジタル時計

ブラウザベンダがFlashやSilverlightのようなリッチコンテンツに対抗するには、標準仕様のSVGをサポートするのが一番であり、OperaはSVGのサポートをガンガン増やしています。
Opera ウィジェットはレンダリングエンジンがブラウザそのものなので、SVGが使用できます。
Operaが入っている環境ならばWindowsだろうがMac OSXだろうがLinuxだろうが、もちろんWiiだろうがSVGを利用したウィジェットを楽しむことができます。



Opera のウィジェットで
SVG を使って画像にあるようなデジタル時計を作成してみました。

config.xml

<?xml version="1.0"?>
<widget>
  <widgetname>SVG Clock</widgetname>
  <width>350</width>
  <height>350</height>
</widget>

index.html

<html>
<head>
  <script type="text/javascript" src="script/clock.js"></script>
</head>
<body>
  <object id="svgdoc" type="image/xml+svg" data="clock.svg" width="350" height="350" />
</body>
</html>

clock.svg

<svg xmlns="http://www.w3.org/2000/svg">
<g>
  <circle cx="150" cy="150" r="140" fill="#FFFFFF" stroke="#0000FF" stroke-width="10" />
  <g>
    <text x="130" y="50" font-size="30pt">12</text>
    <text x="250" y="160" font-size="30pt">3</text>
    <text x="135" y="280" font-size="30pt">6</text>
    <text x="30" y="160" font-size="30pt">9</text>
  </g>
  <line xml:id="h_line" x1="150" y1="150" x2="150" y2="0"
     stroke="#000000" stroke-width="5" />
  <line xml:id="m_line" x1="150" y1="150" x2="150" y2="0"
     stroke="#000000" stroke-width="5" />
  <line xml:id="s_line" x1="150" y1="150" x2="150" y2="0"
     stroke="#FF0000" stroke-width="5" />
</g>
</svg>

clock.js

function clock() {
  var svgdocument = document.getElementById('svgdoc').getSVGDocument();
  var svgNS = "http://www.w3.org/2000/svg";

  var cx = 150;
  var cy = 150;
  var r = 140;

  var now = new Date();
  var hou = now.getHours();
  var min = now.getMinutes();
  var sec = now.getSeconds();
  var h_line = svgdocument.getElementById('h_line');
  var m_line = svgdocument.getElementById('m_line');
  var s_line = svgdocument.getElementById('s_line');

  h_rad = 2 * Math.PI * (hou/12);
  h_line.x2.baseVal.value =  cx + 0.8 * r * Math.sin(h_rad);
  h_line.y2.baseVal.value = cy - 0.8 * r * Math.cos(h_rad);

  m_rad = 2 * Math.PI * (min/60);
  m_line.x2.baseVal.value =  cx + r * Math.sin(m_rad);
  m_line.y2.baseVal.value = cy - r * Math.cos(m_rad);

  s_rad = 2 * Math.PI * (sec/60);
  s_line.x2.baseVal.value =  cx + r * Math.sin(s_rad);
  s_line.y2.baseVal.value = cy - r * Math.cos(s_rad);

  setTimeout(clock, 1000);
}

window.addEventListener('load',
                         function(e){ clock();},
                         false);

GM_setValue / GM_getValue

覚書。

GM_setValue はFirefoxを終了させたとしても消えないデータを作成する事ができる。
GM_setValue(name, value)で設定できる。

GM_getValue は GM_setValue で設定した値を取得できる。
GM_getValue(name)で取得できる。
GM_getValue(name, default) でデフォルト値を設定して、値が取れなかった時も対応できる。

これを利用すれば、prototype.js を GreaseMonkey で簡単に使えるようになるようです。
prototype.js を GM_setValue() で設定して、利用するときは GM_getValue() で取得してevalすればできるようです。
Greasemonkeyで永続的に外部スクリプトを利用する

グリモンでXPath

XPathって何に使われているかいまいちよくわからなかったけど、
ユーザスクリプトでwebページを加工するのに便利そう。

練習で、yahooの要素を目立たせるスクリプトを書いてみた。

// ==UserScript==
// @name           xpath_test
// @namespace      sassy
// @description    xpath test
// @include        http://www.yahoo.co.jp/
// ==/UserScript==

(function(){
  var xp = document.evaluate("//span", document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
  for (var i = 0; i <>
    xp.snapshotItem(i).style.background = "#FF0000";
  }
})()

Document.evaluate() でXPathで指定した要素を探し、 XPathResult.snapshotItem()で検索結果の要素を参照しています。
XPathについては下記が参考になると思います。
https://developer.mozilla.org/ja/Introduction_to_using_XPath_in_JavaScript

はじめてのグリモンスクリプト

とりあえず、練習で書いてみた。

アメブロの文章のbackgroundColorを水色にして、フォントをboldにしてみました。

// ==UserScript==
// @name           BlogWatch
// @namespace      sassy
// @description    blogを観るScript
// @include        http://ameblo.jp/*
// ==/UserScript==

(function(){
  var title = document.getElementsByTagName("div");
  var div = document.getElementsByTagName("div");
  for (var i = 0; i <>
    if (div[i].className == "subContents") {
      div[i].style.backgroundColor = "#99FFFF";
      div[i].style.fontWeight = "bold";
    }
  }
})()

どうだ！(ほんとうに簡単なスクリプトだから自慢する意味がないんだけど。)

しかし、以前友人が JavaScript でクラス名でノードが取れないのは不便だ！っといっていましたが、たしかに不便ですね。CSSのためにめちゃめちゃclass使っているコンテンツもあるわけだし。

たぶん、DOM的にはclassなんていう概念は存在しないのだろうけど、(Nodeを特定するのはidなわけだし)でも現実的にはあった方が便利そうだな。

Greasemonkey

自宅のFireFoxにGreasemonkeyを導入しました！！
仕事では、テストのためにJavaScriptをちょこちょこ書いていますが、実はかなり自信がないため、
「自分のブラウジング生活が向上し、JavaScriptのスキルも向上し一石二鳥やん！素敵やん！」
と思い、入れていました。(会社のFireFoxには入れているけど、全く使ってなかったなぁ。。。。)

とりあえず、貪欲にいろいろ書いてみよっと！