2014 10月30日 11:13
Browserifyで少し遊んだ。 npmにあるライブラリをクライアントサイドで使いたいなぁ、という時に便利な子がBrowserifyさんです。 HTML側に複数のscriptタグを書かなくてよくなり、<script src="bundle.js"></script>のみ記述しておけば良いので管理が楽です。 (当然bundle.js以外の名前にすることもできます) requirejsの代わりに使うこともできるし、gulpやらを組み合わせてminifyなどもできるでしょう。 とりあえず試すには QUERY_STRINGをクライアントサイドで処理するのを試した。 ライブラリにはqsを利用。 nodejsをインストール npm install -g browserify npm install qs qsを使うコードをかく browserfyを実行 生成されたjsを使う nodejsのインストールは省略。 browserifyコマンドを利用するためにnpm intsall -g browseriyする。 今回はqsを使うのでnpm install qs をする。 以下のコードはmain.jsに書いた。 var qs = require('qs'); console.log(qs.parse('aaa=bbb&ccc=ddd')); 出力は以下のようになった。 { aaa: 'bbb', ccc: 'ddd' } これをブラウザ上でもうごくようにするためにbrowserifyを使う。 以下のコマンドでbundle.jsを作成する。 $ browserify main.js -o bundle.js qsの中身をbundle.jsの中に加えてrequireを使える状態にもなってるらしいけど確認してない。 index.htmlを作成してブラウザで開くとコンソールで開いてみると同じ出力がでている。 <html> <head> </head> <body> <script src="bundle.js"></script> </body> </html> もうちょっとちゃんとQUERY_STRINGを解析してみる さっきのは固定値だったので、ちゃんとURLから取得する。 location.searchの値を使った。 main.js を以下のようにして、HTML上にも表示した。 var qs = require('qs'); var queryString
2013 9月11日 18:42
すごい広島 #17 でやったこと。 Raphael.js で遊んでみました。 Raphael.js は JavaScript で SVG を作成できるライブラリ。 今日作成したサンプルコードはGitHubにup してます。stepごとに タグを作成しているので、STEP1 のコードがみたい時は git checkout step-1 としてください。 step-5 まであります。 checkout したタグで rake server を実行すると、ローカルサーバが起動します。 http://localhost.com:8000 にアクセスしてみてください。 STEP1 とりあえず試す。 Raphael オブジェクトを作成すると自動的にSVGオブジェクトが挿入される。 絶対座標で挿入されるので、DOMの構築を待つ必要はなかった。 まずは円を描いてみる。 var paper = Raphael(10, 50, 320, 200); // 円を書く at x = 50, y = 40, 半径 10 var circle = paper.circle(50, 40, 10); // 赤色でぬりつぶす circle.attr("fill", "#e00"); // 黒で境界線をかく circle.attr("stroke", "#000"); STEP2 SVG を二つ作成してみる。 Rahael
2013 9月3日 15:49
広島Webシステム開発勉強会 で Cucumber-js を試してました。 先に雑感をかきます。 まだ完成度が高くない感じです。 アサーションが用意されてないので、使いやすくするには自分でなんとかしないといけないような感じでした。 step_definision が Ruby版より難しそうでした。 日本語への対応がまだできていませんでした。 色がまだつきません コマンドラインオプションをまちがえるとコールスタックが表示されます。 インストール npm install -g cucumber cucumber.js というコマンドがインストールされます。 試してみる Feature: hogehoge Scenario: hogehoge Given hoge Then goro 試しにこんな feature を書いてみました。 他に作成したのは features/step_defnition/myStepDefinitions.js と features/support/world.js です。 world.js で step で使える DSL を強化できますが今回は特になにもしていません。 Stepの定義は以下のように書きました。 var myStepDefinitionsWrapper = function () { this.World = require("../support/world.js").World; this.Given(/^hoge$/, function(callback) { // express the regexp above with the code you wish you had callback(); });
2013 5月31日 19:33
Google I/O で紹介されていた Polymer という JavaScript で少し遊びました。 Web Components という Web の UI を コンポーネント化するための仕組みがあります。 これをラップして 使いやすくしてくれる Polymer です。 遊んだ結果はこの辺 rake preview でウェブサーバが起動するので http://localhost:4000 でアクセスできるようにしています。 ポイントは カスタムタグが作れる 属性でコンポーネントに情報を渡せる コンポーネントは独立した HTML ファイル linkタグ で読み込む コンポーネントを指定できる Web Components に比べて記述良が少ない といっところでしょうか。 index.html は下記のようになっています。 <!DOCTYPE html> <html> <head> <script src="polymer.min.js"></script> <link rel="import" href="my-element.html"> </head> <body> <my-element hoge="goro"></my-element> <my-element hoge="mogu"></my-element> </body> </html> Polymer を読み込んで my-element という コンポーネントを読み込んで my-element タグ で利用している という流れです。 hoge属性で my-element コンポーネントのボタンのラベルを変更しています。 my-element.html は下記のようになっています。 <element name="my-element" attributes="hoge"> <template> <div> <span>I'm <b>tk-element</b>.