カテゴリー別アーカイブ: JavaScript

Twitterで特定期間のツイートを検索する

先日、Twitterについて調べていたときに、こんな記事を見つけました。

・Twitterで期間を限定して検索する方法&ヘルプに載ってない裏技テク – 聴く耳を持たない(片方しか)
・Twitterの新機能! 過去のツイートを検索する方法 | iPhoneひとすじ! かみあぷ速報

試してみると、コレ、公式サイトの検索窓を使わずにブラウザで直接URL叩いても動くんですね。Twitterにログインしてなくても表示されます。例えば、こんな感じ

で、フォローしている鍵アカも検索できるように、twitterアカウントでOAuth認証を通すようにして、ひとネタページを作ってみました(下の画像からリンクしてます)。

thum_fb_2tones
【twitter】○○年の今頃何してた? | 2tones-dev.net

やってることは基本的に、入力したアカウントと選択した年と現在の日付から前後一日を取得して、JavascriptでURL生成してwindow.open()してるだけです(笑)。あとアカウントのデフォルトは、OAuth認証で返ってくる情報から自分のアカウントを自動入力しています。

まあ検索するなら公式サイトの検索窓使うかURL直打ちすればいいんですが、いちいちキーワード入力するのも面倒だし(ライトユーザーはそんなことしなさそうだし)、ふと「去年の今頃何してたっけ?」みたいなことを思ったりすることもたまにあるので、ネタとしてはいいかなと思いまして(笑)。

ちなみに検索に前後一日ずつの幅を持たせているのは、なるべく検索にヒットするようにです。みんながみんな、毎日ツイートしてるわけじゃないと思うので。

APIでも過去検索できればアプリに組み込んだりできるんですが、そこはまあ負荷の問題なんですかね。制限があるのは。

ちなみにOAuth認証はこの辺を参考にPHPで書いています。

・【PHP】2015春版!TwitterOAuthでログイン機能を実装する – Qiita
・PHP と Twitter API V1.1 で OAuth 認証を行う 「タイムライン取得」「呟き(つぶやき)投稿」「ログイン」(API V 1.1)

twitterでリンクにサムネイル設定するには「Twitter Cards」というのを使うんですね。この辺も普段あまり自分で書かないのでしりませんでした。

・すぐにできるTwitter Cards設定 – E-riverstyle Vanguard

FacebookのOPG用画像をチェックするのに、こんなサイトがありました。フルサイズでも小さい表示でもうまく表示されるよう確認するのに便利です。

・OGP画像シミュレータ | og:image Simulator

Twitterに限らずAPI周りの情報はたくさんありますが、古いAPIの情報だったり、Developersページのデザインが変わってたりするので、その辺が注意点かと。

【補足】
・当初iPhoneのSafariでURLを叩いてみたら、Safariで未ログインだと検索結果が表示されませんでした。iPhoneだとモバイル用のページが開くので、その辺の仕様に違いがあるのかなと。また最初は別ウィンドウで表示するようにしていたのですが、iPhoneだと別タブで公式サイトを開いていると、そちらに結果が表示されてしまいました。

・上記の現象があったのでtwitterのOAuth認証を組み込んだのですが、このブログ書くために再度テストしたら未ログインでも結果表示されていました。キャッシュの問題なのか、再現しないのでちょっとわからないですが。。。

【Google Apps Script】Youtube動画の公開/非公開を切り替える

最近知ったのですが、Google Apps Scriptというのがあって、Googleドライブ上に作成したドキュメントやGoogleの各サービスをjavaScriptペースでハンドリングできるらしい。

【参考】
ASCII.jp:Web制作をちょっと便利にするGoogle Apps Script入門

※わかりやすいですが、ちょっと古い記事なのでメニューの場所などが現在のものと違っていたりします。

ちょうど必要があって、Youtube動画の公開/非公開を切り替えるスクリプトを考えてみました。

まず近そうなもので参考にしたのはこの辺。

【参考】
GoogleAppsScript – 公開されたGASのYouTubeAPIを少し使ってみた。 – Qiita
GoogleAppsScript – GASでYouTubeの自分の再生リストを全て非公開にする。 – Qiita

※参考ページにもありますが、YoutubeのAPIは拡張サービスという位置付けで、YouTube Data APIの有効化と承認が必要になります。

基本的にはYoutube Data APIをそのままJavaScriptの書式で書けばいいということなんですが、リストの取り方が・・・

Channels(チャンネル)
Playlists(再生リスト)
PlaylistItems(再生リストの項目)
Videos(動画)

といくつかあって、公開/非公開の切替は動画IDが必要になるのだけれど、確認した限りでは動画IDを含んだ結果を返すものは、

・PlaylistItems(再生リストの項目)
・Videos(動画)

の2つみたいです。

ただPlaylistItems(再生リストの項目)でのリスト取得も、Videos(動画)でのリスト取得もidまたはplaylistidが必要になります。Playlistは必ず作成するとは限らないし、Channels(チャンネル)から辿っていくのも大変そうだしと思ってAPIを見ていたら、Search(検索)のリスト取得に「forMine」という自分のIDに紐付いたものだけを検索するフィルタがあったので、これを使うことにしました。

とりあえず自分のIDに紐付いた動画idを取得して、スプレッドシートに書き出すのはこんな感じ。

//---自分のvideoを検索する
function searchMyVideos() {
  var nextToken = "";
  var arrayId = [];
  while(nextToken != null) {
    var res = YouTube.Search.list('id,snippet', 
                                     {maxResults: 50,
                                      forMine: true,
                                      order: "date",
                                      type: "video",
                                      pageToken: nextToken});
    
    for(var i = 0; i < res.items.length; i++) {
      var item = res.items[i];
       arrayId.push(item.id.videoId);
    }

    nextToken = (res.nextPageToken == "") ? null :res.nextPageToken;
  }
  
  if (arrayId.length > 0){
    getMyVideoList(arrayId);
  }
 
  Browser.msgBox("動画一覧を取得しました。");
}

//---videoの詳細情報を取得
function getMyVideoList(arrayId) {
  var nextToken = "";
  var id = String(arrayId);
  var arrayStatus = [];
  
  var sheetId = '**********************************';
  var spreadsheet = SpreadsheetApp.openById(sheetId);
  var newsheet = SpreadsheetApp.openById(sheetId).getSheetByName('動画リスト');
  newsheet.getRange(1, 1).setValue('id');
  newsheet.getRange(1, 2).setValue('タイトル');
  newsheet.getRange(1, 3).setValue('作成日');
  newsheet.getRange(1, 4).setValue('公開/非公開/限定公開');
  
  var count = 2;
  
  while(nextToken != null) {
    var playlistResponse = YouTube.Videos.list('snippet, status',{id:id});

    for(var i = 0; i < playlistResponse.items.length; i++) {
      var item = playlistResponse.items[i];
);
      
      arrayStatus.push(item.snippet.title + ";" + item.status.privacyStatus);
      
      newsheet.getRange(count, 1).setValue(item.id);
      newsheet.getRange(count, 2).setValue(item.snippet.title);
      newsheet.getRange(count, 3).setValue(item.snippet.publishedAt);
      newsheet.getRange(count, 4).setValue(item.status.privacyStatus);
      count++;
    }

    nextToken = playlistResponse.nextPageToken;

  }
}

検索で取得できるリストの項目数は最大50件で、続きがある場合は「nextPageToken」に何かしらの値が入ってくるようなので、値がある場合は処理を繰り返しています。で、リストを取得するごとに配列(arrayId)に動画id(item.id.videoId)を保存しておいて、検索が終わったらまとめてスプレッドシートに書き出しています。

また「var sheetId = ‘**********************************’;」にはスプレッドシートのidを指定するのですが、これは・・・

function checkId(){
  Logger.log(SpreadsheetApp.getActiveSpreadsheet().getId());
}

を実行してログの出力結果から取得するか、スプレッドシートのURLの・・・

https://docs.google.com/spreadsheets/d/**********/edit#gid=xxxxxxxx

「**********」の部分から取得できます。この例だと「**********」というidのスプレッドシートの「動画リスト」という名前のタブのシートを指定していることになります。

続いて、動画を全部非公開にするのはこんな感じ。

//---自分のvideoを非公開にする
function setPrivateMyVideos() {
  var nextToken = "";
  var arrayId = [];
  while(nextToken != null) {
    var res = YouTube.Search.list('id,snippet', 
                                     {maxResults: 50,
                                      forMine: true,
                                      order: "date",
                                      type: "video",
                                      pageToken: nextToken});
    
    for(var i = 0; i < res.items.length; i++) {
      var item = res.items[i];
       arrayId.push(item.id.videoId);
    }

    nextToken = (res.nextPageToken == "") ? null :res.nextPageToken;
  }
  
  if (arrayId.length > 0){
    updatePrivacyStatus_private(arrayId);
  }
  Browser.msgBox("全ての動画を非公開にしました。");
}

//---VideoのprivacyStatusをprivateに変更する
function updatePrivacyStatus_private(arrayId) {
  var nextToken = "";
  var id = String(arrayId);
  while(nextToken != null) {
    var playlistResponse = YouTube.Videos.list('snippet, status',{id:id});

    for(var i = 0; i < playlistResponse.items.length; i++) {
      var item = playlistResponse.items[i];
      if(item.status.privacyStatus != "private") {
        item.status.privacyStatus = "private";
        var updateRes = YouTube.Videos.update(item, "status,snippet");
      }

    }

    nextToken = playlistResponse.nextPageToken;

  }
}

スプレッドシートに書き出す代わりに、ステータス(item.status.privacyStatus)が非公開(private)でないものを非公開に更新しています。

最後に全て公開するにはこうします。

//---自分のvideoを公開する
function setPublicMyVideos() {
  var nextToken = "";
  var arrayId = [];
  while(nextToken != null) {
    var res = YouTube.Search.list('id,snippet', 
                                     {maxResults: 50,
                                      forMine: true,
                                      order: "date",
                                      type: "video",
                                      pageToken: nextToken});
    
    for(var i = 0; i < res.items.length; i++) {
      var item = res.items[i];
       arrayId.push(item.id.videoId);
    }

    nextToken = (res.nextPageToken == "") ? null :res.nextPageToken;
  }
  
  if (arrayId.length > 0){
    updatePrivacyStatus_public(arrayId);
  }
  Browser.msgBox("全ての動画を公開しました。");
}

//---VideoのprivacyStatusをpublicに変更する
function updatePrivacyStatus_public(arrayId) {
  var nextToken = "";
  var id = String(arrayId);
  while(nextToken != null) {
    var playlistResponse = YouTube.Videos.list('snippet, status',{id:id});

    for(var i = 0; i < playlistResponse.items.length; i++) {
      var item = playlistResponse.items[i];

      if(item.status.privacyStatus != "public") {
        item.status.privacyStatus = "public";
        var updateRes = YouTube.Videos.update(item, "status,snippet");
      }

    }

    nextToken = playlistResponse.nextPageToken;

  }
}

こちらではステータス(item.status.privacyStatus)が公開(public)でないものを公開に更新しています。

ちなみに処理が終わったのを確認するために「Browser.msgBox();」でポップアップを表示しているのですが、これを処理の途中で挟むと、処理が途中までしか実行されないということがありました。原因はよくわからないですが、あくまで確認用ということで余り使わない方がいいかも。

それからログ書きだし(Logger.log())はAPIの呼び出しごとにリセットされるようで、スクリプトエディタの表示>ログで確認しても最後のAPIの分しか書き出されていません。ASのtrace()やJSのconsole.log()のイメージで使うには、一回変数に入れてから最後に書き出すしかなさそうです。

【CreateJS】AS3からHTML5 Canvasに書き出す場合のJavaScript(その2)

swfで作ったコンテンツをHTML5 Canvasに書き出すお勉強のその2です。

今回は座標制御について。

青いボタン(btn_start)を押すとスロット(slot_mc0)が回転して、ランダムな位置で停止するというサンプルです。スロットが回転中はボタンを押せないようにしています。これをCanvasで動くように書き換えます(赤字はインスタンス名)。swfサンプルはこちら

screen_test02_02

スロット(slot_mc0)のMovieClipの構造はこんな感じです。4つの絵の入ったMovieClipが縦に2つ(img_mc0,img_mc1)並んでいて、全体をマスクしています。マスクの範囲から出てしまったら、もう一方のMovieClipの上に来るような仕組みです。(当然ながら、MovieClipはx=0で揃えてあります)。

で、ASはこんな感じ。まずはルートのタイムラインに書いてあるスクリプト。JSに変換する前提なので、型指定はしていません。
【AS:ルートのタイムライン】

var timer_msg;

//startボタン:使用可
useStartBtn();

function onOver_start(event){
	var mc = event.currentTarget;
	mc.alpha = 0.7;
}

function onOut_start(event){
	var mc = event.currentTarget;
	mc.alpha = 1;
}

function onClick_start(event){
	//startボタン:使用不可
	nouseStartBtn();

	slot_mc0.setRandom();
	slot_mc0.startTimer_spin(1000*(0+1),3);
	slot_mc0.startSlot();
}

function stopSlot(mc){
	//startボタン:使用不可
	useStartBtn();
}

function useStartBtn(){
	btn_start.addEventListener(MouseEvent.ROLL_OVER,onOver_start);
	btn_start.addEventListener(MouseEvent.ROLL_OUT,onOut_start);
	btn_start.addEventListener(MouseEvent.CLICK,onClick_start);
	btn_start.buttonMode = true;

	btn_start.alpha = 1;
}

function nouseStartBtn(){
	btn_start.removeEventListener(MouseEvent.ROLL_OVER,onOver_start);
	btn_start.removeEventListener(MouseEvent.ROLL_OUT,onOut_start);
	btn_start.removeEventListener(MouseEvent.CLICK,onClick_start);
	btn_start.buttonMode = false;	

	btn_start.alpha = 0.3;
}

スロット自体の処理は、AS版ではスロット(slot_mc0)MovieClipのタイムラインに書いています。
【AS:slot_mc0のタイムライン】

var array_pos = [0,110,220,330,440];
var speed_max = 30;
var flg_end = false;
var flg_stop = false;
var flg_remove = false;
var posNo = 0;
var imgNo = 0;
var speed;
var timer_spin;
var pos_stop;

//開始位置をランダムにする
function setRandom():void{
	var pos_y = xRandomInt(0,img_mc0.height);

	img_mc0.y = pos_y;
	img_mc1.y = img_mc0.y-img_mc1.height;

	//はみ出しチェック
	ckeckFrameOut();

	//スピード:初期化
	speed = speed_max;

	//停止フラグ:初期化
	flg_stop = false;
	flg_end = false;
	flg_remove = false;
	posNo = 0;
}

//回転
function spin(event){
	img_mc0.y += speed;
	img_mc1.y += speed;

	if (flg_end){
		checkEndPoint();
	}
	if (flg_stop){
		checkStopPoint();
	}

	ckeckFrameOut();

	if (flg_remove){
		flg_remove = false;
		//停止時の位置ずれ補正
		img_mc0.y = pos_stop;
		if (img_mc0.y < 0){
			img_mc1.y = img_mc0.y + img_mc0.height;
		} else {
			img_mc1.y = img_mc0.y - img_mc0.height;
		}

		if (img_mc1.y == 0){
			img_mc0.y = img_mc1.y - img_mc0.height;
		}

		this.removeEventListener(Event.ENTER_FRAME,spin);
		var parentObj = this.parent;
		parentObj.stopSlot(this);
	}
}

//停止地点チェック
function checkEndPoint(){
	var i;
	var dis_mim = img_mc0.height;
	var flg_check = false;

	//---スロットをランダムにする
	for (i=0;i<array_pos.length;i++){
		if (img_mc0.y >= 0 && img_mc0.y <= array_pos[i]){
			flg_check = true;
			break;
		} else if (img_mc0.y < 0 && img_mc0.y <= array_pos[i]*-1){
			flg_check = true;
			break;
		} else {
			flg_check = false;
		}
	}

	if (flg_check){
		var dis = Math.abs(array_pos[i] - Math.abs(img_mc0.y));
		if (dis < dis_mim){
			dis_mim = dis;
			posNo = i;
		}
	}

	var fugo = (img_mc0.y < 0) ? -1 :1;
	pos_stop = array_pos[posNo] * fugo;

	//絵柄番号:判定(img_mc0.yが+値の時は、img_mc1の位置が当たりになる)
	imgNo = (pos_stop < 0) ? posNo :(array_pos.length-1) - posNo;
	imgNo = (imgNo == 4) ? 0:imgNo;

	flg_end = false;

	var amari = dis_mim % speed;

	if (amari > 0){
		img_mc0.y += amari;
	}

	flg_stop = true;
}

//停止監視
function checkStopPoint(){
	if (pos_stop == img_mc0.y){
		flg_stop = false;
		flg_remove = true;
	} else {
		var margin = Math.abs(Math.abs(pos_stop) - Math.abs(img_mc0.y));
		if (margin < speed){
			speed = margin;
		}
	}
}

//はみ出しチェック
function ckeckFrameOut(){
	if (img_mc0.y >= img_mc0.height){
		img_mc0.y = img_mc1.y - img_mc0.height;
	} else if (img_mc1.y >= img_mc1.height){
		img_mc1.y = img_mc0.y - img_mc1.height;
	}
}

//ランダムな整数値を取得
function xRandomInt (nMin,nMax) {
	// nMinからnMaxまでのランダムな整数を返す
	var nRandomInt = Math.floor(Math.random()*(nMax-nMin+1))+nMin;
	return nRandomInt;
} 

//Timer開始
function startTimer_spin(interval,count){
	timer_spin = new Timer(interval,count);
	timer_spin.addEventListener(TimerEvent.TIMER,onCheckTimer_spin);
	timer_spin.addEventListener(TimerEvent.TIMER_COMPLETE,onEndTimer_spin);
	timer_spin.start();
}

function startSlot(){
	this.addEventListener(Event.ENTER_FRAME,spin);
}

function onCheckTimer_spin(event){
	var timerObj = event.currentTarget;
	var remain_count = timerObj.repeatCount - timerObj.currentCount;
	if (remain_count <= 3){
		remain_count = (remain_count == 0) ? 1 :remain_count;
		speed = Math.round(speed / remain_count);
	}
}

//Timer停止
function onEndTimer_spin(event){
	//終了フラグ:on
	flg_end = true;
}

そして、これをCanvasで書き出すために、JavaScriptで書き直したものが下記です。こちらも同じくFlash CCのルートのタイムラインに書いています。Canvasでパブリッシュしたサンプルはこちら
【Canvas版JavaScript】

//インスタンスへのMouseOver関連イベントはコレが必須。
stage.enableMouseOver();

var h_img_mc = this.slot_mc0.img_mc1.y - this.slot_mc0.img_mc0.y;

var speed_max = 30;
var array_pos = [0,110,220,330,440];

//startボタン:使用可
useStartBtn(this);

function onClick_start(event){
	//startボタン:使用不可
	nouseStartBtn(event.currentTarget.parent);

	var mc = event.currentTarget;
	var slot = mc.parent.slot_mc0;

	slot.img_mc0.height = h_img_mc;
	slot.img_mc1.height = h_img_mc;

	setRandom(slot);
	slot.startTime = createjs.Ticker.getTime(true);
	startSlot(slot);
	startTimer_spin(slot,1000*(0+1),3);

}

function onOver_start(event){
	var mc = event.currentTarget;
	mc.alpha = 0.7;
}

function onOut_start(event){
	var mc = event.currentTarget;
	mc.alpha = 1;
}

//開始位置をランダムにする
function setRandom(mc){
	var pos_y = xRandomInt(0,mc.img_mc0.height);

	mc.img_mc0.y = pos_y;
	mc.img_mc1.y = mc.img_mc0.y-mc.img_mc1.height;

	//はみ出しチェック
	ckeckFrameOut(mc);

	//スピード:初期化
	mc.speed = speed_max;

	//停止フラグ:初期化
	mc.flg_stop = false;
	mc.flg_end = false;
	mc.flg_remove = false;
	mc.posNo = 0;
	mc.remain_count = 0;

}

//はみ出しチェック
function ckeckFrameOut(mc){
	if (mc.img_mc0.y >= mc.img_mc0.height){
		mc.img_mc0.y = mc.img_mc1.y - mc.img_mc0.height;
	} else if (mc.img_mc1.y >= mc.img_mc1.height){
		mc.img_mc1.y = mc.img_mc0.y - mc.img_mc1.height;
	}
}

//ランダムな整数値を取得
function xRandomInt (nMin,nMax) {
	// nMinからnMaxまでのランダムな整数を返す
	var nRandomInt = Math.floor(Math.random()*(nMax-nMin+1))+nMin;
	return nRandomInt;
} 

//Timer開始
function startTimer_spin(mc,interval,count){
	mc.remain_count = count;
	mc.addEventListener("tick",onCheckTimer_spin);
}

function startSlot(mc){
	mc.addEventListener("tick",spin);
}

function onCheckTimer_spin(event){
	var mc = event.currentTarget;
	var wCount = Math.floor((createjs.Ticker.getTime(true) - mc.startTime)/1000);

	var count = 3 -  wCount;

	if (mc.remain_count == count){
		return;
	} else {
		mc.remain_count = count;

		if (mc.remain_count <= 3){
			if (mc.remain_count == 0){
				mc.removeEventListener("tick",onCheckTimer_spin);
				onEndTimer_spin(mc);
			} else {
				mc.speed = Math.round(mc.speed / mc.remain_count);
			}
		}
	}
}

//回転
function spin(event){
	var mc = event.currentTarget;

	mc.img_mc0.y += mc.speed;
	mc.img_mc1.y += mc.speed;

	if (mc.flg_end){
		checkEndPoint(mc);
	}
	if (mc.flg_stop){
		checkStopPoint(mc);
	}

	ckeckFrameOut(mc);

	if (mc.flg_remove){
		mc.lg_remove = false;

		//停止時の位置ずれ補正
		mc.img_mc0.y = mc.pos_stop;
		if (mc.img_mc0.y < 0){
			mc.img_mc1.y = mc.img_mc0.y + mc.img_mc0.height;
		} else {
			mc.img_mc1.y = mc.img_mc0.y - mc.img_mc0.height;
		}

		if (mc.img_mc1.y == 0){
			mc.img_mc0.y = mc.img_mc1.y - mc.img_mc0.height;
		}

		mc.removeEventListener("tick",spin);
		stopSlot(mc);
	}
}

//停止監視
function checkStopPoint(mc){
	if (mc.pos_stop == mc.img_mc0.y){
		mc.flg_stop = false;
		mc.flg_remove = true;
	} else {

		var margin = Math.abs(Math.abs(mc.pos_stop) - Math.abs(mc.img_mc0.y));
		if (margin < mc.speed){
			mc.speed = margin;
		}
	}
}

//
function onEndTimer_spin(mc){
	//終了フラグ:on
	mc.flg_end = true;

}

//停止地点チェック
function checkEndPoint(mc){
	var i;
	var dis_mim = mc.img_mc0.height;
	//var posNo = 0;
	var flg_check = false;

	//---スロットをランダムにする
	for (i=0;i<array_pos.length;i++){
		if (mc.img_mc0.y >= 0 && mc.img_mc0.y <= array_pos[i]){
			flg_check = true;
			break;
		} else if (mc.img_mc0.y < 0 && mc.img_mc0.y <= array_pos[i]*-1){
			flg_check = true;
			break;
		} else {
			flg_check = false;
		}
	}

	if (flg_check){

		var dis = Math.abs(array_pos[i] - Math.abs(mc.img_mc0.y));
		if (dis < dis_mim){
			dis_mim = dis;
			posNo = i;
		}
	}

	var fugo = (mc.img_mc0.y < 0) ? -1 :1;
	mc.pos_stop = array_pos[posNo] * fugo;

	//絵柄番号:判定(img_mc0.yが+値の時は、img_mc1の位置が当たりになる)
	imgNo = (mc.pos_stop < 0) ? posNo :(array_pos.length-1) - posNo;
	imgNo = (imgNo == 4) ? 0:imgNo;

	mc.flg_end = false;

	var amari = dis_mim % mc.speed;

	if (amari > 0){
		mc.img_mc0.y += amari;
	}

	mc.flg_stop = true;
}

function stopSlot(mc){
	//startボタン:使用可
	useStartBtn(mc.parent);
}

function useStartBtn(target){
	target.btn_start.addEventListener("mouseover", onOver_start);
	target.btn_start.addEventListener("mouseout", onOut_start);
	target.btn_start.addEventListener("click",onClick_start);
	target.btn_start.cursor = "pointer";

	target.btn_start.alpha = 1;
}

function nouseStartBtn(target){
	target.btn_start.removeEventListener("mouseover", onOver_start);
	target.btn_start.removeEventListener("mouseout", onOut_start);
	target.btn_start.removeEventListener("click",onClick_start);
	target.btn_start.cursor = "normal";

	target.btn_start.alpha = 0.3;
}

AS版ではスロット(slot_mc0)MovieClipの中に書かれていたスクリプトも、Canvas版ではルートのタイムラインにまとめてあります。MovieClipの中にスクリプトを書かない方がいいと聞いたのでと、JSだとやはり1ファイルにまとまっていたほうがわかりやすいので。

※その為Canvas版では、【slot_mc0のタイムライン】の冒頭(1〜10行目)で書かれている変数も、固定値のもの(1〜2行目)はルートに書き、その他(3〜10行目)はスロット(slot_mc0)のプロパティにしてあります。また関数には引数でMovieClipを渡すようにしてあります。

で、ここからが本題のCanvas版用にJavaScriptで書き換える時の注意点。

1.オブジェクトの基準点が違う

まず気をつけないといけないのは、Cavnasに描き出されたにMovieClipの座標は、Flash CC上での座標(+)ではなくて中心点(○)であるということ。これを知らないで座標を取得すると訳のわからない位置が表示されてハマります。なので必ずオブジェクトの座標と中心点が重なるようにしておくこと。

【参考】
・Chitose Web: Toolkit for CreateJS 座標がずれる時

2.オブジェクトのwidth,heightが取れない。

そしてもう1つ。DisplayObject.getBounds()という一見オブジェクトのサイズを返してくれそうなメソッドがありますが、これが役に立たないということ。そもそも作られた目的が違うようです。詳しくは下記を参照。

【参考】
・FN1312005 | EaselJS 0.7.1: ColorFilterクラスでインスタンスの塗りのグラデーションを反転させる | HTML5 : テクニカルノート(FumioNonaka.com)
※「03 Shapeオブジェクトに矩形領域を定める ー DisplayObject.getBounds()とDisplayObject.setBound」を参照

またDisplayObjectにwidth,heigitのプロパティがありません。スロット(slot_mc0)をループさせるために中のMovieClipの高さが必要なので、ここではimg_mc0とimg_mc1のy座標の差を高さとして算出し(【Canvas版JavaScript】19〜20行目)、img_mc0とimg_mc1に「height」というプロパティ名で渡しています(【Canvas版JavaScript】4行目)。

※ img_mc0の高さはわかっているので固定値で変数にすることも可能ですが、絵柄を増やして高さが変更になることも考慮して計算で出しています。

3.Timerの使い方

AS版ではスロット(slot_mc0)の回転をEvent.ENTER_FRAMEでやって、Timerを一定間隔で動かして回転速度と停止のコントロールをしていたのですが、EaselJSで該当するTickerは静的クラスでインスタンス化できないので複数作れません。

・EaselJS v0.8.0 API Documentation : Ticker

なので、回転開始時間をcreatejs.Ticker.getTime()で取得してスロットのプロパティに設定し(【Canvas版JavaScript】23行目)、経過時間をチェックして擬似的にインターバル処理を行っています(onCheckTimer_spin/【Canvas版JavaScript】87〜107行目)。

【参考】
・JavaScript – CreateJS(EaselJS)でタイマを管理するTickerクラスの使い方 – Qiita

※JSのTimerを使えばいいのでは?という指摘を受けましたが、書いてる時点ではCreateJSの中のメソッドしか頭になく気がつきませんでした(笑)。そちらの方が、TimerとENTER_FRAMEにそれぞれ対応していていいかもしれません。

4.thisの参照

スタートボタンの制御を関数化していますが(useStartBtn/nouseStartBtn)、ここでも問題が。AS版のようにボタンを「this.btn_start」で参照すると、オブジェクトがないよと怒られます。

[Error] TypeError: undefined is not an object (evaluating 'this.btn_start.addEventListener')

console.log(“this >> “+this)で調べてみると、ルートで参照した場合は・・・

this >> [MovieClip (name=null)]

となり、functionの中で参照した場合は・・・

this >> [object Window]

と返ってきます。

FlashCCが書き出すHTMLを見てみてると・・・

<script>
var canvas, stage, exportRoot;

function init() {
	canvas = document.getElementById("canvas");
	images = images||{};

	var loader = new createjs.LoadQueue(false);
	loader.addEventListener("fileload", handleFileLoad);
	loader.addEventListener("complete", handleComplete);
	loader.loadManifest(lib.properties.manifest);
}

function handleFileLoad(evt) {
	if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}

function handleComplete() {
	exportRoot = new lib.test02_html5();

	stage = new createjs.Stage(canvas);
	stage.addChild(exportRoot);
	stage.update();

	createjs.Ticker.setFPS(lib.properties.fps);
	createjs.Ticker.addEventListener("tick", stage);
}
</script>

となっていて、Flashからの要素をexportRootにラップしてstageにaddChildしているので、ルートで参照したときのthisの値([MovieClip (name=null)])は、exportRootを指しています。

一方、functionの中で呼び出したものはページのルートであるWindowを指すようです。

ここではカンタンにルートから呼び出す関数にはthisを渡して参照するようにしました(【Canvas版JavaScript】10行目、218〜225行目)。

※他の方法としては、直接exportRootを参照に使うか、stageの中から参照することも可能です。

exportRoot.btn_start.addEventListener("mouseover", onOver_start);
stage.getChildAt(0).btn_start.addEventListener("mouseover", onOver_start);

またはJSのFunction.bind()を使って、thisの参照を書き換えた変数を生成して呼び出す方法もあります。

var func = useStartBtn.bind(this.btn_start);
func(this);

【参考】
・FN1303001 | CreateJSで関数にスコープを定める ー proxy()関数 | HTML5 : テクニカルノート
・FN1303002 – 関数に任意のthis参照を定める – HTML5 : テクニカルノート
・JavaScript の超便利なメソッド bind で this を制御する | Foreignkey, Inc.

5.まとめ

処理 AS JavaScript
オブジェクトの座標(x,y) 座標(+) 中心点(○)
オブジェクトのサイズ(width,height) width,height プロパティなし
ルートのthis参照 root exportRoot
functionのthis参照 root Window
繰り返し処理 Event.ENTER_FRAME Ticker
タイマー Timer Timer(setTimeout/setInterval)

上記の説明は、私の環境のFlash CCで書き出される下記のバージョンのCreateJSを前提としています。

<script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.5.1.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.7.1.min.js"></script>
<script src="test01_html5.js"></script>

【CreateJS】AS3からHTML5 Canvasに書き出す場合のJavaScript(その1)

今更ですが文字通り、swfで作ったコンテンツをHTML5 Canvasに書き出すお勉強です。

Flash Professional CCでは「コマンド」>「AS3 ドキュメント形式から HTML5 Canvas に変換」でCanvas用のファイルに変換できます。基本的なことはこちらから。

・Flash Professional CC:今すぐ試してほしい! 新しいHTML5書き出しADC Plus

これは前から知ってるわけですが、「じゃあJS部分はどう書くか?」ってざっとググっても変換用サンプルに書かれているJSはたいていルートでの「gotoAndPlay」レベル。で、もうちょっと実際に使う形でASに書いたものをどう書き換えればいいのか?というのを少しずつまとめていきます。

screen_test01

 

とりあえず簡単なサンプルで、win_mcというMovieClip(グレーの部分)にbtn(白の部分)というMovieClipが入っている。win_mcは10フレームで、btnをクリックすると1コマずつ切り替わるというもの。swfサンプルはこちら

で、ASはこんな感じ。ルートのタイムラインに書いています。JSに変換する前提なので、型指定はしていません。

win_mc.gotoAndStop(1);

win_mc.btn.buttonMode = true;
win_mc.btn.addEventListener(MouseEvent.CLICK,onClickBtn);

function onClickBtn(event){
	var target = event.currentTarget;
	var num_max = target.parent.totalFrames;
	var num_current = target.parent.currentFrame;
	var num_next = (num_current + 1) > num_max ? 1 : (num_current + 1);
	target.parent.gotoAndStop(num_next);
}

で、これをCanvasで書き出すために、JavaScriptで書き直したものが下記です。こちらも同じくFlash CCのルートのタイムラインに書いています。Canvasでパブリッシュしたサンプルはこちら

//インスタンスへのMouseOver関連イベントはコレが必須。
stage.enableMouseOver();

this.win_mc.gotoAndStop(0);

this.win_mc.btn.cursor = "pointer";
//win_mc.btn.buttonMode = true;
this.win_mc.btn.addEventListener("click",onClickBtn);

function onClickBtn(event){
	var target = event.currentTarget;
	//var num_max = target.parent.totalFrames;
	var num_max = target.parent.timeline.duration;
	var num_current = target.parent.currentFrame;
	//var num_next = (num_current + 1) > num_max ? 1 : (num_current + 1);
	var num_next = (num_current + 1) > (num_max - 1) ? 0 : (num_current + 1);
	console.log("num_current:"+num_current+"/num_next:"+num_next+"/num_max:"+num_max);
	target.parent.gotoAndStop(num_next);
}

JavaScriptの方は書き換えた箇所に、元のASをコメントにして残してあるのでわかると思いますが、まとめると違いは下記の通り。

処理 AS JavaScript
カーソル変更 buttonMode = true cursor = “pointer”
総フレーム数取得 target.parent.totalFrames target.parent.timeline.duration
フレームの数え方 フレームカウントが1から フレームカウントが0から

で、ここが落とし穴だったんですけど、予めStage.enableMouseOver()メソッドを呼出しておかないと、マウスポインタとインスタンスの重なりについてのイベントが起こらないということ。これがないとcursor = “pointer”を設定してもカーソルは変わらない。また・・・

this.win_mc.btn.addEventListener("mouseover", mouseOverHandler);
this.win_mc.btn.addEventListener("mouseout", mouseOutHandler);

のようなマウスイベントも取れません。

こちらの記事が参考になりました。やはり困ったときは野中さん(笑)。

F-site | EaselJSでインスタンスにロールオーバーしたとき指差しカーソルにする

ちなみに私の環境のFlash CCでは、下記のバージョンのCreateJSが使われています。

<script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.5.1.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.7.1.min.js"></script>
<script src="test01_html5.js"></script>

パブリッシュしてもローカルにライブラリがないと思ったら、ネット上のライブラリを参照してるんですね。これも今回初めて気づきました。

【追記その1】2015.3.30
野中さんから指摘を受けましたが、総フレーム数を取得する「target.parent.timeline.duration」は、MovieClipが持っている値ではなくて、「target.parent.timeline」でTweenJSのTimelineクラスを参照して、そのプロパティであるdurationを参照している、ということのようです。

・TweenJS v0.6.0 API Documentation : Timeline > Properties > duration
・EaselJS v0.8.0 API Documentation : MovieClip > Properties > timeline

【追記その2】2015.3.30
パブリッシュするときにCreateJSのライブラリをホスト(ネット上のライブラリ)にするか、ローカル書きだしにするかは「パブリッシュ設定」で変更できます。また書き出しに使用されるバージョンは、Flash CC側で固定になっているそうです。こちらも野中さんからご教授いただきました。

・FN1312001 | Flash Professional CC 13.1のHTML5 CanvasドキュメントとCreateJS | HTML5 : テクニカルノート(FumioNonaka.com)

【HTML/CSS】諸々リンクなど

たまにやろうとすると色々引っかかるのでメモ。順次追加予定。

【HTML】
HTML:HTML5でIE8以下のバージョンに対応させる | raining
HTML5で追加されたinput要素のタイプはiPhone、Androidでどのくらい使えるのか | Developers.IO
ほんっとにはじめてのHTML5:[51] セレクトメニューを作ろう <select><option><optgroup>
videoタグでサイト内に動画を埋め込む(IE8対応)
【Web制作】HTML5のvideoタグにはMP4形式動画だけ指定すればよい(IE8対応)@2014年末
IE8でHTML5のvideoタグを使う方法

【CSS】
IE8とIE9できれいに透過を適応させるCSS
【シンプルなソース】CSSだけでアニメーション・ドロップダウンメニュー
横並びリストを中央寄せにする – CSSテクニック – acky info

【JS/JQuery】
jQueryでスマートフォンとタブレットでviewportを切り替える実験(iPhone6 Plus対応) | BlackFlag
実は簡単にできる!PCサイトとスマホサイトを選んで振り分ける方法 | smart4meブログ
[JS][jQuery] 要素の存在を確認する6通りのコードと実行速度 | きほんのき
jQueryでセレクトボックスのoption要素を追加/削除する方法
jQueryプラグイン「ColorBox」でオリジナルの閉じるボタン(Closeボタン)を設置する | blog|blow→in
JavaScript – リンクタグを使用した閉じるボタン記述方法「colorbox.js」 – Qiita

【スマホ関連】
jQuery×HTML5×CSS3を真面目に勉強(4):WebページをRetina対応させるテクニック~基礎知識編 (2/2) – @IT
いまさら聞けないRetina対応のための「ピクセル」の話 – Rriver

EaselJS 0.7.0での変更点(その1)

土曜にいまクリ勉強会で、以前のサンプルをEaselJS 0.7.0対応に書き換えてみたので、忘れないようにメモ。

・マウスイベントが、イベントオブジェクトからDisplayObjectに変更された。
・mousemove,mouseupが、pressmove,pressupに変更された。
※(変更前)(変更後)>> ドラッグ出来ます。
・各フィルタがeaseljs-0.6.0.min.jsでは同梱された(個別指定が不要)。
・BoxBlurFilter >> BlurFilter に変更された
※(変更前)(変更後)>> クリックでフィルタがかかります。

その他にもいろいろ変更があるようですが。自分でチェックできてないので、引き続きサンプル修正しながらアップします(予定)。自分で書いてみないと覚えないので。

EasleJS+Box2DWebで、床に角度をつける

野中さんのBox2DWeb+EaselJSのサンプルを組んでみた後に、床に角度をつけようとしたらハったのでメモ。要は、Box2Dでの角度=ラジアン、EaselJSでの角度=度数、ってことだったんだけど、コード書こうとして混乱してました。
bodyに角度をつける場合は・・・
 	//Box2Dでは、角度はラジアンで指定
  bodyDef.angle = Math.PI /180 *nAngle;
で、Tickerイベントの中でwolrdからbodyを取り出すときは、body.GetAngle()で取得した角度を度数に変換して・・・
  var body = world.GetBodyList();
  while(body){
     var myObject = body.GetUserData();
      if (myObject) {
        var position = body.GetPosition();
        myObject.x = position.x / SCALE;
        myObject.y = position.y / SCALE;

        //EaselJSでは、角度は度数で指定(ラジアン>度数変換)
        myObject.rotation = body.GetAngle() * (180/Math.PI);

      }
      //---次の剛体を取りだし
      body = body.GetNext();
  }
とやれば、物理計算と画面表示が正しく一致した角度になりました!実際に書いてみたコードはこちらにあります。

実際に角度つけたサンプルを見れば「ふんふん」となるようなことも、自分で書こうとすると意外にはまってしまうのは、経験の浅さかなと。

※事実誤認などありましたら、ご指摘ください。

IE7でwindow.openする際の注意点

ExternalInterface.call()で”window.open”を使って、別ウィンドウを開こうとしてマハったのでメモ。

IE7で”window.open”を使う場合は、swfのEMBEDで「wmode=”transparent”」にしないといけないらしい。最近の仕事は分業が多くて、自分でHTML書く機会も少ないので、全然知らなかったです。というか、やったけど忘れているのか?
下記のサイトを参考にしました。感謝。