ナウいことしたいと思ったのでブログをGithub Pagesに移行した。
http://nakajmg.github.io/
ページはJekyllでジェネってる。カスタマイズしようとするとちょっと微妙なところもあるけどちょっとずつ気に入ってきた。
書くのに集中できるようにGruntで色々自動化したりCSSをSassで書いたり。
やっぱ何か目的があるとすんなり周辺の技術を使ってみようってなる。
Github Pagesいいんだけど、どうもGoogleの日本語検索だと引っかからない気がする。
まぁいっか。
2013年11月8日金曜日
2013年10月2日水曜日
Test The Web Forward Meetupに参加しました
Test the Web Forward Meetup (仮), Tokyo #1| ATND
Test The Web Forwardについてはこの記事の解説を。
・テストを書いてWebを前進させよう！「Test the Web Forward Meetup (仮), Tokyo #1」| HTML5 Experts.jp
TestTWF Meetupは「html5jテスト部」の活動で自分も部員として参加しました。
今回は6月に開催されたTest The Web Forward Tokyoに参加してたこともあってリファレンステストの書き方について説明させてもらいました。
Web標準の仕様の実装に関するテストを書くという素晴らしい取り組みなんですが，どの仕様にたいしてテストが足りないのかがわかりにくいというのが難点で，そこをクリアできればもっとみんなでいっぱい書ける気がします。
英語力もそこまで必要とされないですし。
世の中にはテストを書くのが大好きな人がいるので，そういった人にリーチしていくためにも継続的な活動が必要になると思います。
Webの未来は自分の未来だと思うので協力していきたいですね。
HTML5 Experts.jpのコントリビューターになりました
そうそうたる面子で構成されてるエキスパートな集団に「コントリビューター」というポジションで末席に加わらせていただきました。
記事も一本公開してわりといい感じの評価をいただけました。
・HTML5Experts.jp > 中島 直博
・よくある3つのデザインから考える、マークアップの最適解
エキスパートにはまだまだかなり程遠い自分ですが，頂いたチャンスを無駄にしないように頑張ろうと思います。
2013年9月11日水曜日
World Wide Webの生みの親とランチした話
少し前のことだけど誰もブログに書かないので忘れないうちに書いておく。
あのSir ティム・バーナーズ=リーと一緒にランチをした。
6月にInteropで講演するために来日してたSir ティム・バーナーズ=リーが、日本のWebコミュニティのメンバーと話してみたいってことでhtml5jとのランチミーティングが実現。
みんなでSirティムに自己紹介したんだけど、自分は英語が得意じゃないからGoogle翻訳使って「Webのおかげで超楽しいです。感謝してます」とだけ伝えといた。
この日HTMLなTシャツを着ていったらW3CのMikeがイジってくれてSirティムも笑ってくれた。
こんなすごい人と一緒の時間をすごせて幸せでした。
※写真はW3Cの許可を取って掲載しています。
あのSir ティム・バーナーズ=リーと一緒にランチをした。
6月にInteropで講演するために来日してたSir ティム・バーナーズ=リーが、日本のWebコミュニティのメンバーと話してみたいってことでhtml5jとのランチミーティングが実現。
みんなでSirティムに自己紹介したんだけど、自分は英語が得意じゃないからGoogle翻訳使って「Webのおかげで超楽しいです。感謝してます」とだけ伝えといた。
この日HTMLなTシャツを着ていったらW3CのMikeがイジってくれてSirティムも笑ってくれた。
こんなすごい人と一緒の時間をすごせて幸せでした。
※写真はW3Cの許可を取って掲載しています。
2013年5月1日水曜日
第38回HTML5とか勉強会で司会をしてきた
前回のとか勉強会で登壇者デビューをしましたが今回はなんと司会をやらせて頂きました。
決まったのは30分前
「司会やってね」と言われたのが勉強会開始の30分前で、すごい無茶ぶり（と言う名の愛のムチ）だったんですが、
なんかおもしろそうと思ってやってみました。
開始前の説明とかの資料はhtml5jが誇るデキる男@yoshikawa_tがバッチリ用意してくれていたので助かりました。
参加人数がすごかった
今回は参加してくれた方が予想より多く、急遽隣の部屋にサテライト会場を作るほどの大盛況でした。
当日の盛り上がりはtogetterのまとめで。
講演資料を今回登壇してくれた@teppeisさんがまとめてくれています。
内容もすごかった
「テスト」という超ガチガチで硬派な内容でしたが、わかりやすい講演内容のおかげでテストに少し近づけたと思います。
「テスト駆動開発」というワード自体は何度も目にしてましたがコードを見ながら解説を聞けたことで理解が結構進みました。
講演の中で「最初は小さな個人プロジェクトとかから書き始めるのがいいかも」とあったので、少しずつテストを書いていきたいと思います。
座談会
講演者の方々たちによるテストについての座談会形式のディスカッションがありました。
モデレート力がすごくて話を振りつつ難しそうな単語について補足をしていく姿にシビレました。
懇親会
Googleさんから無料で懇親会の食事とビールなどを振舞って頂きました。いつもありがとうございます。
司会をやったおかげかいつもより多くの人に話しかけてもらえて楽しかったです。
懇親会の片付けしているときに転職祝いとしてビールについてたご飯をいただきました。
引越しして炊飯器を買い忘れていたのでとても助かりましたありがとうございます。
おわりに
拙い司会もありましたが講演者の方々のおかげで素晴らしい勉強会でした。
座談会たのしかったです。
ダメ出し
スタッフ打ち上げの席で今回の司会についてご意見をいただきましたので最後に紹介したいと思います。
- 落ち着きすぎ
- 淡々としすぎ
- テンションが低い
(´・ω・｀)ありがとうございました
2013年4月30日火曜日
Chocolateyを使えばWindowsの開発環境構築の手間から解放されるかもしれない
aptとかbrewとかportsとか便利なパッケージ管理ソフトが色々あります。
開発をMacでやるようになってからというもの、Windowsの環境構築がめんどくさすぎて開発に使おうと思うことはなくなりました。
ですがWindowsにもいい感じのパッケージ管理ツールが来たと風の噂に聞いて試してみました。
ツールの名前はChocolatey。なんともSweetでCuteな名前ですね。
リンク
動作環境
- Windows XP/Vista/7/2003/2008
- .Net Framework 4.0
- PowerShell 2.0 >=
インストール
コマンドプロンプトから下記コマンドを実行
@powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('http://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%systemdrive%\chocolatey\bin
ここからはPowerShellで
パッケージのインストール、アンインストール
インストール
cinst packageName
用意されているパッケージはgalleryで確認できる
アンインストール
cuninst packageName
パッケージのupdate
cup packageName
インストールされているパッケージの確認
cver all -localonly
感想
とにかく簡単。cinst rubyの10文字でrubyの実行環境ができました。
インストールできるパッケージ数も860以上、GUIのツールまで入れられるってんだから文句ないね。
ここまで敷居が下げられるとWindowsでの開発にも前向きになれる気がします。
PowerShellもまぁまぁいい
コマンドプロンプトよりはいい
2013年4月18日木曜日
株式会社エクスクウェイドを退職しました
ニートなうヾ(＠⌒ー⌒＠)ノ
— じまぐさん (@nakajmg) 2013年4月12日株式会社エクスクウェイドを退職しました。正確には20日までですが、4月12日が最終出社日でした。 チーフフロントエンジニアとして、バイトの期間を入れると約1年ほどエクスクウェイドで仕事をしていました。
業務的にはソーシャルアプリの開発・運用の業務に携わってきました。
もともと社内にスマホ向けにHTMLやCSS、JSを書ける人がいなかったらしく、高校の同級生だった奴(副社長)に誘われてのこのことバイトとして働き始めました。
初めは慣れないことばっかりで、とにかく調べまくってなんとか形にしながらこなしてました。
上も下もいなくて誰にも聞くこともできず、自分のやり方が合ってるのかどうか、間違ってないかとひたすら不安でした。
でもそんな環境でやってたからこそ、色々な知識やテクニックを身につけることができたのかなとも思います。
バイトを始めたとき自分は大学院生として研究をしてたわけなんですが、実際の業務での開発はとても刺激的で、だんだんと研究からバイト主体にシフトしていきました。
バイトを初めて2ヶ月たった辺りで大学院を中退しました。(修士2年でした)
大学院を辞めてこの会社にコミットしていきたい、と思ったきっかけは@polidogとの出会いでした。
彼は同い年で、CTOで、技術に貪欲で会社の中では誰よりも働いてました。
彼と働きたい、彼となら何かおもしろいことができそうだなと感じさせるようなオーラを持ってるイケメン(クズ)でした。
一足先に去ってしまった彼と一緒に働けた期間はそんなに長くはありませんでしたが、自分を上に前にと引っ張ってくれたように感じます。
人生の転機になるきっかけをくれて感謝してます。
退職の理由は色々とありますが、もっといろんな技術に触れたいとか成長したいっていう気持ちが強くあって飛び出しちゃいました。
1年間ありがとうございました。
とにかく自由に働ける環境で、まるで大学の研究室にいるように伸び伸びとやらせてもらえて楽しかったです。
定時の2時間前に勉強会に行かせてもらえる懐の深い会社でとても助かっていました。
今週はほんの束の間のお休みをおもいっきり満喫しています。
来週からまた勤め人として頑張りますのでよろしくお願いします。
エンジニアとしてはまだまだひよっ子なのでもっともっと頑張っていこうと思います。
2013年4月11日木曜日
デザイニアンに参加してきた
会場はTwitter Japanさん！ 初潜入ヽ(=´▽`=)ﾉ
当日はTwitter Japanさんからのご好意でピザとビールも振舞われました。
ごちそうさまでした。
デザイナー秋葉さんとエンジニア白石さんの二人によるトークセッション的な今回のイベント
「デザイナーがデベロッパーと一緒につくるってどうなんだ!?」というテーマで、Webデザイナーとエンジニアとの協業についてのお話を中心とした内容でした。
自分もお仕事でデザイナーさんとやりとりしながら作業することが多いので、デザイナーさん側の感覚を知るいい機会でした。
参加者割合はデザイナー：エンジニアで6:4？くらいだった感じ(ディレクターさんもいた)
以下適当なメモとちょっとした感想をつらつらと。ちなみに自分はエンジニア側です。
デザイナーがエンジニアの画面を覗いた時に「なにこれ」って思うやつ
- 黒い画面(ターミナル)
- JavaScript
- EclipseとかのIDE
- Git
安定の黒い画面。
最近はGitで運用してるプロジェクトに関わる機会が増えてるデザイナーさんが多いのかな？HTMLとかGitで管理できるようになればすごく楽できるようになると思います。
秋葉さんの「FTPがいいなぁ」に会場笑い。
デザインの範囲
- 見た目だけじゃない、機能もデザイン
- 使う人のことを考えてどうするかもデザイン
- 「現在地から探す」とか最近のアプリにはあるけどそこらへんもデザインだよね
UIだけじゃなくUXもデザインなんだなーとしみじみ。
ブラウザを上手に使ったデザインをどう作れるか
- カンプが「動きと遷移」を想定したデザインになってるか
- 意味のないカンプになっちゃうかもしれない
- 納期間際で修正が発生したらクオリティチェックも曖昧になりがち
- ボタンの状態変化(押せない状況)とかそういうところに気が回らない部分があるかもしれない
デザイナーさん視点のお話。 上にあるような「機能もデザイン」な視点が必要なのかなーと思った。
ワイヤーフレーム
- ワイヤーフレームには都合のいい状況しか書いてない
- イレギュラーなことが起こった時のことも考えよう
- エンタープライズ系だとエラーの洗い出しとかする
Web系は都度改善していくパターンが多いイメージ
エラー画面どうしてる？
- エラー画面はつなぎのページ
- 飽きさせないようにデザインするのも大事
横スライド系UIのデザイン
- jQueryのプラグインとかでできるやつ
- 仕組みを理解しておくとデザインを起こすときに無理のないマークアップが実現できるよね
エンジニアが作ってからデザイン
- その画面に必要な要素をエンジニアが全部用意しておく
- それからデザイナーさんに綺麗にしてもらうといい感じにいく
マークアップにも同じ事が言えそうな。
エンジニアとデザイナーが仲良くなるのが一番
うん。一番。
エンジニアと険悪になったことある？
会場のデザイナーさんへのアンケートで数人が挙手
- デザインの工数が理解されていなくて無茶な発注をされることがあってムッとしたことはある
確かにどのくらいの工数がかかるかあんまりわかってないかも。。
- エンジニアがコード書いてるときに話しかけたらイラつかれた
これに対して会場のエンジニアさんは「エンジニアが集中するには人によって数時間かかることもあるから、メッセージを飛ばして少し間を開けて返事をまつとかすると上手くいくかも」と助言。
最後に飛び出した「波括弧が終わるまでは喋りかけないほうがいいかも」という発言には思わず頷いてしまった(´艸｀)
デザイニアン、おもしろかったです。
2013年3月22日金曜日
第37回「HTML5とか勉強会」でSafariの話をしてきた
http://html5j.komasshu.info/al37th.html
今回のテーマは「ブラウザでのデバッグ」ということでChrome,Safari，Firefox，IE10，Edge Inspectの講演がありました。
自分はその中のSafariでのデバッグについて講演させてもらいました。
Debug in safari from html5j
講演では基本的な使い方，Chromeのdevtoolsとの違い，リモートデバッグ，隠しデバッグメニューの話をしました。
隠しデバッグメニューを教えてくれた@yomotsuさんありがとうございました。
勉強会での発表は初めてで，講演が始まる直前までガッチガチになってて， 始まってからはとにかく伝えることに集中してなんとかこなして，終わってからは話した内容全部忘れててなんかスッキリしました。
今回講演が始まる前には色んな人に励ましてもらい，終わったあとはなんか褒めてもらえました。
ほんとにうれしかったです。
勉強会参加者の皆様，会場を提供してくれたNTT-ATさん，登壇者の皆様ありがとうございました。
そしてこんな機会をくれたhtml5jとスタッフのみなさん，これからもよろしくお願いします。
2013年3月16日土曜日
CreateJS勉強会 (第2回)に参加してきた
今熱いと(自分の中で)話題になってるCreateJSの勉強会があったので参加してきました。
発表一覧
- CreateJSで作るWindows8アプリ 正岡幹雄さん
- Toolkit周りについて chitose-macotoさん
- TweenJS for Everithing Akihiro Oyamadaさん
- 効率的なCreateJSコンテンツ開発 池田泰延さん
- 外部ファイルの読込みとサウンドの再生 野中文雄さん
以下簡単な内容と感想を
CreateJSで作るWindowd8アプリ
CreateJSで作ったcanvasアニメーションをWindows8アプリに移植する過程を紹介してくれました。
Windows8への移植はほぼコピペで済むくらい簡単にやっていました。
動きもばっちりそのままって感じで「Flashの知識だけでもいけるぜ！」な勢いでした。
Toolkit周りについて
CreateJS便利だけどめんどくさいとことか痒いとこに手が届かない的なのがあるよね！→こんなの作って使ってます！
てな感じでtoolkit supporterというツールの紹介がありました。
toolkit supporterはCreateJSの補助ツールで、ASからJSへの変換、JSの型付けなどなど、CreateJSでのコンテンツ作成がかなり捗りそうなツールでした。
https://code.google.com/p/toolkit-supporter/downloads/list (MITライセンス)
現場でもばりばり使ってるというガチツールっぽいです。
TweenJS for Everithing
アニメーションなど動きをつけるのがTweenJSの役目で、アニメーションはメソッドのチェーンな感じで直感的に書けるそうです。
TweenJSがやるのはオブジェクトのプロパティの値を変えるだけで、動かすのはEaselJSのお仕事とのこと。
TweenJSはEaselJSに依存関係があるので、TweenJSの機能だけを使いたい時でもEaselJSを読み込んでおく必要があるそうです。
TweenJSだけ使いたいのに、、、な人はTweenJSに似たtween.jsを使ってみたらいいかもとのこと。(書き方も割りと似てる
TweenJSはpaper.jsやthree.jsと組み合わせて使うこともできるので、TweenJSを覚えておけば他のライブラリでも応用できるそうです。
「APIも少なくて覚えやすいし、ドキュメントもばっちりそろってるよ」と言ってたので使って見ようと思います。
効率的なCreateJSコンテンツ開発
TypeScriptとHaxeのおはなし。 TypeScriptは型チェックがちゃんとしてたりアロー関数式なんていう便利なものがあったりと結構惹かれました。
TypeScriptでCreateJSを使うときはCreateJSのサイトにあるTypeScript用の定義ファイルをダウンロードしてきて登録する必要があるそうです。
Haxeはそんなに興味がなかったせいで内容ほとんど覚えてないですごめんあさい。
外部ファイルの読込みとサウンドの再生
PreloadJSとSoundJSのおはなし。
バージョンがあがってクラス名が変わってインスタンスの作り方が変わった。
イベントの名前もイベントの登録の仕方も変わってて前のバージョンとだいぶ変わったそうです。
SoundJSはバージョンがあがって、停止とかの操作がクラスの静的メソッドじゃなくてインスタンスのメソッドに変わりました。
前の仕様だとインスタンスへの参照を持ち続けてそれを開放する手段がないのはいかがなものか、ってことで変更してくれたみたいです。
PreloadJSとSoundJSは自分もちょいちょいさわってみましたがかなり便利で使えそうだと感じました。 バージョン上がればもっと流行るんじゃないかなと思います。
もっと注目されていいライブラリだと思うのでこれからも追いかけていこうと思います。
2013年3月11日月曜日
PreloadJS x SoundJSの基本的な使い方
version = preloadjs:0.3.0 , soundjs:0.4.0
PreloadJSで読み込んだ音楽ファイルをSoundJSに渡して再生・停止を行うための簡単な説明です。
PreloadJSとSoundJSはどちらもCreateJSのライブラリの一つです。簡単に連携がとれるので使い方を覚えておけばかなり強力な味方になってくれる予感がします。
PreloadJSの基本的な使い方は前のエントリを参照
SoundJSのドキュメント:http://www.createjs.com/Docs/SoundJS/modules/SoundJS.html
使用準備
<script src="./preloadjs-0.3.0.min.js"></script> <script src="./psoundjs-0.4.0.min.js"></script>
installPlugin
preloadjsのインスタンスにsoundjsのクラスを渡してあげます。
var queue = new createjs.LoadQueue(true); queue.installPlugin(createjs.Sound);
その後ファイルをqueueに登録して、fileloadイベントでsoundjsのインスタンスを作るfunctionに渡してあげます。
var manifest = [
{"src":"./bgm.mp3","id":"sound1"}
];
queue.loadManifest(manifest,true);
queue.addEventListener('fileload',handleFileLoad);
function handleFileLoad(event){
var item = event.item;
var type = item.type;
if(createjs.LoadQueue.SOUND === type){
startSound(item.id);
}
}
createjs.Sound.createInstance
function startSound(soundid){
var instance = createjs.Sound.createInstance(soundid); // SoundJSのインスタンスを再生(idを指定)
instance.setVolume(0.1); // 再生時の音量調整
function doPlay(){
instance.play(); // 再生
}
function doStop(){
instance.stop(); // 停止
}
document.getElementById('play').addEventListener('click',doPlay); // playボタンにdoPlayを割り当てる
document.getElementById('stop').addEventListener('click',doStop); // stopボタンにdoStopを割り当てる
}
HTMLに再生と停止のイベントを登録する2つのボタンを用意します
サンプルコード
全部まとめたHTMLはこんな感じ
<html>
<head>
<script src="./preloadjs-0.3.0.min.js"></script>
<script src="./soundjs-0.4.0.min.js"></script>
<script>
function init(){
var queue = new createjs.LoadQueue(true);
queue.installPlugin(createjs.Sound);
var manifest = [
{"src":"./bgm.mp3","id":"sound1"}
];
queue.loadManifest(manifest,true);
queue.addEventListener('fileload',handleFileLoad);
queue.installPlugin(createjs.Sound);
function handleFileLoad(event){
var item = event.item;
var type = item.type;
if(createjs.LoadQueue.SOUND === type){
startSound(item.id);
}
}
function startSound(soundid){
var instance = createjs.Sound.createInstance(soundid);
instance.setVolume(0.1);
function doStop(){
instance.stop();
}
function doPlay(){
instance.play();
}
document.getElementById('stop').addEventListener('click',doStop);
document.getElementById('play').addEventListener('click',doPlay);
}
}
window.onload = function(){
init();
}
</script>
</head>
<body>
<input type="button" id="play" value="play">
<input type="button" id="stop" value="stop">
</body>
</html>
メソッドいろいろ
作成したインスタンスには色々なメソッドが用意されています。play() , stop()以外にも一時停止や再生位置の取得、ミュートなどなどいずれもインスタンスから操作することがでいます。
var instance = createjs.Sound.createInstance(id); instance.play(); // 再生 instance.stop(); // 停止 instance.pause(); // 一時停止 instance.resume(); // 一時停止した場所から再生 instance.getVolute(); // 現在の音量を取得 (戻り値 Number) instance.setVolume(value); // 音量を設定する Ex) instance.setVolume(0.5); instance.setMute(); // ミュートにする instance.getMute(); // ミュート状態かどうかの判定 (戻り値 true/false) instance.getPosition(); // 現在の再生位置の取得 (戻り値 Number) instance.setPosition(value); // 再生位置の指定 instance.getDuration(); // 再生時間の取得 (戻り値 Number)
Ex)再生時間の半分の位置を指定する
公式のドキュメントにあるものを紹介します。setPosition()の引数にgetDuration()で取得した値を2で割った値を入れます。
instance.setPosition(instance.getDuration()/2);
play()に引数を与えて再生を行う
play()メソッドに再生時の初期値として繰り返しの有無やボリュームなどを指定することができます。
現在の仕様だと引数の順番が変えられないため、ボリュームだけを指定したい場合にも、それより前の4つの値を指定する必要があります。
その場合setVolume()を使用したほうがいいかもしれません。
instance.play([interrupt="none"],[delay=0],[offset=0],[loop=0],[volume=1],[pan=0]);
// カッコを省略可
instance.play("none",0,0,0,1,0);
/*
interrupt = "割り込み再生を許すかどうか(?)"
delay = "再生を遅らせる。msで指定"
offset = "再生位置を指定。msで指定"
loop = "ループ回数。-1を指定すると無限ループ"
volume = "音量を指定"
pan = "左右のどちらに音を振るか(HTML Audioでは動かない?"
*/
おわりに
PreloadJSを読み込む際に指定したidでSoundJSによる再生が行えるので、コード的にもかなりわかりやすく書けるのではないでしょうか。またSoundJSを利用することでブラウザのAPIに依存しない形でオーディオの再生が行えるのも素敵ですね。
2013年3月10日日曜日
いろんなところで役に立ちそうなPreloadJSをさわって使い方をまとめてみた
* version 0.3.0を使用 *
何ができるか
PreloadJSを使うと"ファイルの読み込みが終わってから何かする"という方法に一貫性を持たせることができるようになります。利用シーンとしてはアニメーションの開始前に必要なファイルを確実に読み込ませたいとか色々考えられそうです。
- 使い方
- 画像の読み込みが完了してから処理を行う
- loadFile()の記述方法いろいろ
- loadManifestで複数ファイルを一括で登録する
- completeイベント
- itemのもつプロパティ
- ファイルの種類を判定して処理を行う
- 登録したアイテムをqueueから削除する
使い方
PreloadJSのサイトからダウンロードします。*執筆時点の最新は0.3.0*http://www.createjs.com/#!/PreloadJS
APIドキュメント
http://www.createjs.com/Docs/PreloadJS/modules/PreloadJS.htmlPreloadJSの読み込み
<script src="./preloadjs-0.3.0.min.js"></script>
使用例
ex) 画像の読み込みが完了してから処理を行う(単一ファイル編)
<script>
function init(){
var queue = new createjs.LoadQueue(true); // PreloadJSのインスタンス作成(ファイルの取得にXHRを使わずにtagによる読み込みを行う場合は引数にfalseを設定する)
queue.loadFile("./image01.jpg",true); // 読み込みたいファイルのURL・パスを登録する。複数行記述することで複数のファイルを登録できる
queue.addEventListener('fileload',handleFileLoad); // fileloadイベントに任意のfunctionを割り当てる
function handleFileLoad(event){ // fileloadイベントに登録したfunction。fileloadイベント発生時に呼ばれる
document.body.appendChild(event.result); // event.resultでfileloadの結果が得られる
}
}
window.onload = function(){
init();
}
</script>
loadFile()の記述方法いろいろ
loadFile()の記述は単純なURL・パスの登録以外にidを割り当てる方法があります。idを割り当てるとidを指定した参照が行えます。
これは複数ファイルを読み込んだときに役に立ちます。
*idを設定する場合の記述はJSON形式で行うのと、ファイルのURL・パスは"src"プロパティにセットする必要があります。
queue.loadFile("./image01.jpg");
queue.loadFile( { "src" : "./image02.jpg" } );
queue.loadFile( { "src" : "./image03.jpg" , "id" : "image03" } );
/*
*idを指定しなかった場合のプロパティは以下のように自動的に値がセットされます。*
image01.jpg: src="./image01.jpg" , id="./image01.jpg"
image02.jpg: id="./image02.jpg"
*/
loadFile()の第2引数(true/false)
loadFile()の第2引数でqueueにあるファイルを登録と同時に読み込むかどうかを決めることができます。
読み込みを開始させたくない場合はfalseを指定します。
任意のタイミングで読み込みを開始したい場合、load()を実行します。
queue.loadFile("./image01.jpg",false);
queue.loadFile( { "src" : "./image02.jpg" , "id" : "image02" } ,false);
queue.load(); /* 読み込みは登録した順に行われる */
trueを指定した場合と、第2引数を省略した場合はFileの登録と同時に読み込みが開始されます。このとき注意したいのは、複数行でloadFile()を行なっている場合、いずれかの行でtrueが指定された時点でqueueの中の全てのファイルを読み込む点です。
loadManifestで複数ファイルを一括で登録する
loadFile()を複数行書くのはめんどくさい。そんなときはloadManifest()を使います。
loadManifest()への登録は配列で行います。
var manifest = [
{"src":"./image1.jpg","id":"file1"},
{"src":"./image2.jpg","id":"file2"},
{"src":"./image3.jpg","id":"file3"}
];
var queue = new createjs.LoadQueue(true);
queue.loadManifest(manifest,true); /* 第2引数はloadFile()と同じ */
completeイベント
queueに登録した全てのファイルの読み込みが終わってから処理したい場合は"complete"イベントに登録したfunctionで行います。
この場合fileloadイベントとは違い、queue.getResult('idかsrcを指定')でファイルを取得します。
function init(){
var queue = new createjs.LoadQueue(true);
var manifest = [
{"src":"./image1.jpeg","id":"file1"},
{"src":"./image2.jpeg","id":"file2"},
{"src":"./image3.jpeg","id":"file3"}
];
queue.loadManifest(manifest,false);
queue.load();
queue.addEventListener('complete',handleComplete);
function handleComplete(event){
var image = queue.getResult(manifest[2].id); // ex) manifestの2番目のファイルのidを指定して結果を得る
document.body.appendChild(image);
/*
var target = event.target;
target.loaded; // true/false
target.useXHR; // true/false
target.progress // 1(?)
*/
}
}
itemのもつプロパティ
fileloadイベントに登録したfunctionにはオブジェクトが渡され、そのオブジェクトには読み込んだ結果と、そのファイルの拡張子や種類などを示すプロパティがセットされています。
渡されるオブジェクトの名前をeventとした場合、event.itemになります。
function handleFileLoad(event){ // fileloadイベントに登録したfunction
var item = event.item; // loadしたファイルの情報をもつitem
var type = item.type; // 'image'や'javascript'や'css'などファイルの種類
var ext = item.ext; // 拡張子 ('jpg'などドットを含まない拡張子)
var id = item.id; // loadFile()登録時に指定したid
var src = item.src; // loadFile()登録時に指定したURL・パス
var tag = item.tag; // 読み込んだファイルを扱えるtag名 (画像なら'img' CSSなら'style' JSなら'script' )
}
ファイルの種類を判定して処理を行う
ファイルの種類に応じた処理を行いたい場合はitem.typeと、createjs.LoadQueueの持っているプロパティを比較します。
・用意されているプロパティ
createjs.LoadQueue.CSS // "css" createjs.LoadQueue.IMAGE // "image" createjs.LoadQueue.JAVASCRIPT // "javascript" createjs.LoadQueue.JSON // "json" createjs.LoadQueue.SOUND // "sound" createjs.LoadQueue.SVG // "svg" createjs.LoadQueue.TEXT // "text" createjs.LoadQueue.XML // "xml"
処理の例
var queue = new createjs.LoadQueue(true);
var manifest = [
{"src":"./image1.jpeg","id":"file1"},
{"src":"./style.css" ,"id":"file2"},
{"src":"./script.js" ,"id":"file3"}
];
queue.loadManifest(manifest,true);
queue.addEventListener('fileload',handleFileLoad);
function handleFileLoad(event){
var item = event.item;
var type = item.type;
if(type === createjs.LoadQueue.IMAGE){
document.body.appendChild(event.result);
}
}
登録したアイテムをqueueから削除する
queueに登録したファイルを削除するにはremove()かremoveAll()を使います。
/* remove()で一つのファイルをqueueから削除する */
queue.loadFile({"id":"image1","src":"./image.jpg"});
queue.remove("image1"); // idかsrcを指定して削除する
queue.remove("./image.jpg");
/* removeAll()で全てのファイルをqueueから削除する */
var manifest = [
{"src":"./image1.jpeg","id":"file1"},
{"src":"./style.css" ,"id":"file2"},
{"src":"./script.js" ,"id":"file3"}
];
queue.loadManifest(manifest,true);
queue.removeAll(); // 0.3.0ではバグがありremoveAll()を実行するとエラーが出ます。
removeAll()は0.3.0ではバグのため動きません。-> http://community.createjs.com/discussions/preloadjs/123-removeall
次のバージョンを待つか、github/PreloadJSにあるソースからbuildを行えばremoveAll()が使えます。
*もしくはminifyされたpreloadjs-0.3.0.min.jsを開いて22行目のthis.initialize(this.useXHR)をthis.init(this.useXHR)にすれば動きます。
しめ
基本的な使い方はこんな感じでしょうか。
あとはドキュメントを読むといろいろとメソッドが用意されているので使い込みたい人はドキュメントとCreateJS Supportを参照してみてください。
PreloadJS以外にもSoundJS/EaselJS/TweenJSなど、CreateJSが今後フロントエンドでは主流となると個人的には思っています。いまのうちにさわっておくと色々と捗りそうです。
2013年2月7日木曜日
[etc] Sublime Text 2のショートカットをNetbeansのショートカットに置き換える
ビッグウェーブの初期にST2を触って諦めてたけど，この度再挑戦。
Netbeans歴も4年になるけどそんなに使いこなしてるわけでもないからまずはよく使うショートカットから徐々に置き換えて行こうと思う
よく使うやつ
これだけでもかなりNetbeans感が出ていい感じ。
設定ファイルはgithubで公開しつつ更新していく予定。(githubの練習がてら)
github.com/nakajmg/st2nb
使いこなせるようにがんばろ
Netbeans歴も4年になるけどそんなに使いこなしてるわけでもないからまずはよく使うショートカットから徐々に置き換えて行こうと思う
よく使うやつ
- ctrl+shift+up/down : (swap_line_up/swap_line_down) 行スワップ
- cmd+shift+up/down : (duplicate_line) 行コピー
- cmd+e : ({"file": "Packages/Default/Delete Line.sublime-macro"}) 行削除
- cmd+shift+left/right : (unindent/indent) 左右行シフト
これだけでもかなりNetbeans感が出ていい感じ。
設定ファイルはgithubで公開しつつ更新していく予定。(githubの練習がてら)
github.com/nakajmg/st2nb
使いこなせるようにがんばろ
2013年2月6日水曜日
[HTML] input要素のdisabled属性を考える
カンファレンスとかでセッションの一覧から参加したいセッションを選ぶ、なんて形式のがたまにあります。
会場の広さなどから1セッションあたりの参加人数が限定されていて、人気のあるセッションなんかは割とあっさり埋まりがちです。
満席になったセッションは大体の場合、表題にあるinput要素にdisabled属性が設定され、チェックがつけられなくなることでそのセッションには登録できなくなります。
するとどうでしょう、本来なら「満席で登録できないセッション」を選択したデータがフォームからサーバに送られてしまうのです。。。
こういうフォームを見つけると好奇心から満席のセッションが登録できるか試すんですが、今のところほとんど登録できちゃってます…(取り消しますけど)
(まー対応するコストと見合わないのかなーとか思ったり。formの要素をごまかして送るなんて他にもいくらでも方法あるだろうし。
Webがオープンな物であることには大賛成だけど、デバッグツールでなんでもかんでも見れていじれちゃうのってどうなんだろ？とか最近ちょっとだけ考えてる。
将来「デバッグツール拒否」フラグみたいな物ができちゃったりしないかなーといらぬ心配をしております。HTML/JS/CSSは誰からでも見れるものという常識が変わる日がいつか来るのだろうか)
会場の広さなどから1セッションあたりの参加人数が限定されていて、人気のあるセッションなんかは割とあっさり埋まりがちです。
満席になったセッションは大体の場合、表題にあるinput要素にdisabled属性が設定され、チェックがつけられなくなることでそのセッションには登録できなくなります。
で
普通であれば「disabled属性のついた要素の値はフォームから送信されない」ので、満席のセッションに登録できないようにするには十分なように思われます。でも
このdisabled属性、ChromeのDevtools等のDOM要素がいじれる系ツールが使えればあっさりと消去することができちゃいます。するとどうでしょう、本来なら「満席で登録できないセッション」を選択したデータがフォームからサーバに送られてしまうのです。。。
こういうフォームを見つけると好奇心から満席のセッションが登録できるか試すんですが、今のところほとんど登録できちゃってます…(取り消しますけど)
うん
サーバサイドでもちゃんとデータの妥当性？のチェックはしましょうねというおはなし。(まー対応するコストと見合わないのかなーとか思ったり。formの要素をごまかして送るなんて他にもいくらでも方法あるだろうし。
Webがオープンな物であることには大賛成だけど、デバッグツールでなんでもかんでも見れていじれちゃうのってどうなんだろ？とか最近ちょっとだけ考えてる。
将来「デバッグツール拒否」フラグみたいな物ができちゃったりしないかなーといらぬ心配をしております。HTML/JS/CSSは誰からでも見れるものという常識が変わる日がいつか来るのだろうか)
2013年2月1日金曜日
Java ♡ HTML5 Nightに参加してきた
JJUGとhtml5j.orgのコラボ！
「みたいです」っていうのも今回自分はお手伝いとして受付にべったり90分コースでした(@@)
「HTML5とか勉強会」でもときどき受付をやることがあるけど，今回の参加者はスーツの方が多く(9割以上？)Javaな人たちでいっぱいな感じ(とか勉は私服の人が多い)
寺田さんと桜庭さんのセッションは聞けたけど，いかんせんJavaの教養が専門学校止まりなのでなんともかんとも。
でもJSFのajax通信の簡単さとかJavaFXのbindなんかはWeb系な感じで「いいかも」と思いました。
JavaFXのセッション中に専門学校の卒業研究でSwing使ったのを思い出してなんだかおセンチな気分になりました。
おしまい
詳細は→ http://kokucheese.com/event/index/70487/
html5jからは白石さんとひらいさんが出てWebSocketの話をしたみたいです。
「みたいです」っていうのも今回自分はお手伝いとして受付にべったり90分コースでした(@@)
「HTML5とか勉強会」でもときどき受付をやることがあるけど，今回の参加者はスーツの方が多く(9割以上？)Javaな人たちでいっぱいな感じ(とか勉は私服の人が多い)
寺田さんと桜庭さんのセッションは聞けたけど，いかんせんJavaの教養が専門学校止まりなのでなんともかんとも。
でもJSFのajax通信の簡単さとかJavaFXのbindなんかはWeb系な感じで「いいかも」と思いました。
JavaFXのセッション中に専門学校の卒業研究でSwing使ったのを思い出してなんだかおセンチな気分になりました。
おしまい
2013年1月30日水曜日
[Chrome] [Mac] UA変更がめんどくさくなったからbashrcに直接書く
ChromeのアップデートでDevtoolsのUA変更のチェックボックスが新規タブに引き継がれなくなった。
UA判定してるページのデバッグのときめんどくさいので初心に戻って引数でUA変えて起動しちゃいましょう。
ほんとはaliasでスマートに引数使ってやりたかったんだけどできないらしいから関数にしてみた。
結局引数使わないことにしたからaliasで書けるんだろうけどまぁいいか。
あとメインのChromeでやるとPCサイト見るのめんどうだからCanaryでデバッグするようにした（逆のほうがいいかも)
プロファイルわけるとかめんどうだし
UA判定してるページのデバッグのときめんどくさいので初心に戻って引数でUA変えて起動しちゃいましょう。
iphone(){
command open -a Google\ Chrome\ Canary.app --args --user-agent="Mozilla/5.0 (iPhone; CPU iPhone OS 5_1_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B206 Safari/7534.48.3"
}
あとはコマンド実行するだけ（既に同じChromeが起動してる場合プロファイルわけるとかしないとだめ）command open -a Google\ Chrome\ Canary.app --args --user-agent="Mozilla/5.0 (iPhone; CPU iPhone OS 5_1_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B206 Safari/7534.48.3"
}
$ iphone
ほんとはaliasでスマートに引数使ってやりたかったんだけどできないらしいから関数にしてみた。
結局引数使わないことにしたからaliasで書けるんだろうけどまぁいいか。
あとメインのChromeでやるとPCサイト見るのめんどうだからCanaryでデバッグするようにした（逆のほうがいいかも)
プロファイルわけるとかめんどうだし
2013年1月22日火曜日
[HTML5] HTML5とか勉強会#35に参加してきた
テーマ
Tizen Mobileはそんなに流行る気がしないと思ってるけどTizen IVIの方は未来がありそうな予感というか期待。
カーネルの上に乗ってるのがGeckoエンジンだけでJVMとかのボトルネックがない分，高速でスリムなHTML5・JS・CSSを実行できる環境てのはすごくいいと思う。
Mozillaの目指してるネイティブアプリ＝Webアプリな世界は是非とも到来してほしい（させたい）と思う。
勉強会の最中に早速シミュレータ入れたのでグリグリいじって遊びたいと思います。コンコン
田中氏はHTML5とかのWeb技術にとっても興味があってこういった技術をもっと押していけるように支援したいと言ってました。html5jとKDDIはｽﾞｯﾄﾓ！
自分は聞けなかったんですが，その後の囲み取材でKDDIがFirefox OS搭載端末の販売を検討していると判明したとのこと！
すごく楽しみ
今回の勉強会の詳しい内容はまたレポート記事で書く予定です。
Web+OS最前線！
- Tizenの概要/今村 博宣さん
- Tizen APIの概要/高橋 成人さん
- Firefox OS(仮)/浅井智也さん
Tizen
Tizenの立ち位置ってどんな感じなのかなと思ってたけど，車載用はTizen IVI，モバイル用はTizen Mobileと現在主に2系統あるってのは全く知らなかった。Tizen Mobileはそんなに流行る気がしないと思ってるけどTizen IVIの方は未来がありそうな予感というか期待。
Firefox OS
Firefox OSの情報は漠然としか知らなかったけど，今回の勉強会でかなり興味を持った。カーネルの上に乗ってるのがGeckoエンジンだけでJVMとかのボトルネックがない分，高速でスリムなHTML5・JS・CSSを実行できる環境てのはすごくいいと思う。
Mozillaの目指してるネイティブアプリ＝Webアプリな世界は是非とも到来してほしい（させたい）と思う。
勉強会の最中に早速シミュレータ入れたのでグリグリいじって遊びたいと思います。コンコン
スペシャルゲストとその後の展開！
今回の勉強会は会場がKDDIさんでした。セッションの合間にスペシャルゲストとしてなんとKDDI代表取締役の田中孝司氏が登場！田中氏はHTML5とかのWeb技術にとっても興味があってこういった技術をもっと押していけるように支援したいと言ってました。html5jとKDDIはｽﾞｯﾄﾓ！
自分は聞けなかったんですが，その後の囲み取材でKDDIがFirefox OS搭載端末の販売を検討していると判明したとのこと！
すごく楽しみ
今回の勉強会の詳しい内容はまたレポート記事で書く予定です。
2013年1月21日月曜日
[CSS]display:tableを設定した場合のwebkitのバージョンによる解釈の違い？
レイアウト組むときにdivにdisplay:table使うことがあるんだけども
display:tableを指定した要素にwidthも一緒に設定するとどうやら古いwebkitではwidthのプロパティが無視されるらしい。
手持ちで確認できたのはiOS5.1.1のSafari(iPhone4S)とGalaxyS2LTEのAndroid2.3.6の標準ブラウザ
Androidブラウザ爆…Safariもだから許した
display:tableを指定した要素にwidthも一緒に設定するとどうやら古いwebkitではwidthのプロパティが無視されるらしい。
手持ちで確認できたのはiOS5.1.1のSafari(iPhone4S)とGalaxyS2LTEのAndroid2.3.6の標準ブラウザ
Androidブラウザ爆…Safariもだから許した
[Chrome] Dev toolsのUA設定が新規タブに引き継がれなくなった
Chromeのバージョン 24.0.1312.52の話
Dev toolsのUser-agentの設定が保持されないようになったのか新規タブを開くたびにUser-agent変更のチェックボックスをクリックしなくちゃならなくなった
バージョン 23.0.1271.101ではどこかのタブでUA変更のチェック入れたら新規タブでDev toolsを開いた場合にチェックが保持された状態になってた
保持されなくなっちゃったせいUA判定して表示切り替えてるページのデバッグ速度が相当遅くなった
解決方法も見つからないし個人的にすごく困るのでしばらくバージョン戻して使う（通知なしの自動更新はんたーい）
Dev toolsのUser-agentの設定が保持されないようになったのか新規タブを開くたびにUser-agent変更のチェックボックスをクリックしなくちゃならなくなった
バージョン 23.0.1271.101ではどこかのタブでUA変更のチェック入れたら新規タブでDev toolsを開いた場合にチェックが保持された状態になってた
保持されなくなっちゃったせいUA判定して表示切り替えてるページのデバッグ速度が相当遅くなった
解決方法も見つからないし個人的にすごく困るのでしばらくバージョン戻して使う（通知なしの自動更新はんたーい）
MacのChromeでDev toolsがエラーで表示できなくなった
Mac版のChrome(バージョン 24.0.1312.52)でDev tools開いてUAとかTouch event設定するために歯車をクリックするとエラーでDev toolsがクラッシュする症状が起きた
原因はabout:flagsの
：JavaScript の試験運用機能を有効にする
ウェブページで JavaScript の試験運用機能を使用できるようにします。
これがONになってるせいだった。OFFにしたらエラー起きなくなった:)
原因はabout:flagsの
：JavaScript の試験運用機能を有効にする
ウェブページで JavaScript の試験運用機能を使用できるようにします。
これがONになってるせいだった。OFFにしたらエラー起きなくなった:)
登録:
投稿 (Atom)