2013年3月22日金曜日

第37回「HTML5とか勉強会」でSafariの話をしてきた

http://html5j.komasshu.info/al37th.html


今回のテーマは「ブラウザでのデバッグ」ということでChrome,Safari，Firefox，IE10，Edge Inspectの講演がありました。


自分はその中のSafariでのデバッグについて講演させてもらいました。





講演では基本的な使い方，Chromeのdevtoolsとの違い，リモートデバッグ，隠しデバッグメニューの話をしました。

隠しデバッグメニューを教えてくれた@yomotsuさんありがとうございました。

勉強会での発表は初めてで，講演が始まる直前までガッチガチになってて， 始まってからはとにかく伝えることに集中してなんとかこなして，終わってからは話した内容全部忘れててなんかスッキリしました。


今回講演が始まる前には色んな人に励ましてもらい，終わったあとはなんか褒めてもらえました。

ほんとにうれしかったです。

勉強会参加者の皆様，会場を提供してくれたNTT-ATさん，登壇者の皆様ありがとうございました。


そしてこんな機会をくれたhtml5jとスタッフのみなさん，これからもよろしくお願いします。

投稿者 時刻: 0 件のコメント:

2013年3月16日土曜日

CreateJS勉強会 (第2回)に参加してきた

今熱いと(自分の中で)話題になってるCreateJSの勉強会があったので参加してきました。

http://atnd.org/events/37193

発表一覧

  1. CreateJSで作るWindows8アプリ 正岡幹雄さん
  2. Toolkit周りについて chitose-macotoさん
  3. TweenJS for Everithing Akihiro Oyamadaさん
  4. 効率的なCreateJSコンテンツ開発 池田泰延さん
  5. 外部ファイルの読込みとサウンドの再生 野中文雄さん

以下簡単な内容と感想を

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は自分もちょいちょいさわってみましたがかなり便利で使えそうだと感じました。 バージョン上がればもっと流行るんじゃないかなと思います。

もっと注目されていいライブラリだと思うのでこれからも追いかけていこうと思います。

投稿者 時刻: 0 件のコメント:

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に依存しない形でオーディオの再生が行えるのも素敵ですね。
投稿者 時刻: 0 件のコメント:

2013年3月10日日曜日

いろんなところで役に立ちそうなPreloadJSをさわって使い方をまとめてみた

* version 0.3.0を使用 *

何ができるか

PreloadJSを使うと"ファイルの読み込みが終わってから何かする"という方法に一貫性を持たせることができるようになります。
利用シーンとしてはアニメーションの開始前に必要なファイルを確実に読み込ませたいとか色々考えられそうです。

使い方

PreloadJSのサイトからダウンロードします。*執筆時点の最新は0.3.0*
http://www.createjs.com/#!/PreloadJS

APIドキュメント

http://www.createjs.com/Docs/PreloadJS/modules/PreloadJS.html

PreloadJSの読み込み

<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が今後フロントエンドでは主流となると個人的には思っています。いまのうちにさわっておくと色々と捗りそうです。

投稿者 時刻: 0 件のコメント:
登録: 投稿 (Atom)