月別: 2011年5月

自前のC++オブジェクトをjscriptで操作させたい

単純にCOMオートメーションサーバーを作成すれば事足ります。コードの再利用という点から考えてみてもそれがいいのですが・・・、一つのプログラム内で完結させたいといった時に調べてみました。

たとえば、自作の複雑なオブジェクトを持つアプリケーションがあって、jscriptなどのスクリプトでプラグインを書いてもらう、というようなケースなどでは、スクリプト環境をホストしなければなりません。

完全に自分用のメモで(＾＾;、 ネットなどで検索をしたり、MSDNドキュメントを拾い読みなどをまとめた備忘録です。あしからず。

で、やはりCOMのお世話にならないといけません。Visual Studio Express Editionでは全部自分でコーディングしないといけないので、退屈なコードを書かないといけないところが面倒です・・・。

手順としては、

  1. スクリプトから操作させたいオブジェクトをIDispatch を継承、もしくは、オブジェクトへのラッパークラスをIDispatch実装クラスでインプリメントする。
  2. スクリプトをホストするため(スクリプトからの様々な通知を受け取るため？)に必要なIActiveScriptSite の 実装クラスを作成

で、これらを使って、以下を順番に実行。

  1. CoCreateInstance APIでIActiveScriptのインスタンスを生成
  2. IActiteScript::SetScriptSite()へIActiveScriptSiteの実装クラスのインスタンスをnewして放り込む。
  3. IActiveScript::QueryInterface()でIActiveScriptParse インターフェイスポインタ(IID_IActiveScriptParse)を得る。
  4. IActiveScriptParse::InitNew()をコール
  5. IActiveScript::AddNamedItem()で、自前のC++オブジェクトの名前をつける。スクリプトではこの名前を使ってアクセスさせる。
  6. IActiveScriptParse::ParseScriptText()でスクリプト文を解析させる
  7. IActiveScript::SetScriptState(SCRIPTSTATE_CONNECTED)をコール
  8. IActiveScript::SetScriptState(SCRIPTSTATE_CLOSED)をコール
  9. インターフェイスポインタの後始末

という流れ。

続きを読む →

CANVASとSVG

IE9がリリースされ、主要なウェブ・ブラウザのほぼ全てで、HTML5の<CANVAS>タグや<SVG>タグがサポートされました。IE以外のブラウザではもっと早くにサポートされてたんですけどね。

アクセス解析のグラフ表示やCSVデータのグラフィック表示など、いままで、JavaアプレットやFlashに頼っていたものが、CANVASタグだけでなくSVGタグを使って、ブラウザ機能だけで実現できてしまうので、Web開発している人には朗報かもですね。ちょっとした動的なグラフィック表示なんかjavascriptでチョコチョコッと書けば済むんですから(^^;

とくに、Illustratorで作成したデータなんかをSVG形式で保存して<SVG>タグ内にコピペしてやれば、プラグインなしに表示できますし、画像のHTML内への埋め込み(インライン)も可能。SVG自体、xmlなのでjavascriptで動的に作成もでき、使わない手はありません。

IllustratorのデータをSVGで保存し、HTMLの<SVG>タグ内にコピペしたサンプル。

ただ、SVGについては、ブラウザによって表示が違いました。firefox4とchrome(11)だと、下の画像のように・・・花の部分が欠けてしまいました。なんでだろ？？？ブラウザのせいとうより、SVGフォーマットへの書き出し方が悪いんでしょうか。

svg1

まだブラウザ毎に表示確認は必要みたいですね。

で、おそまきながら、勉強がてら<CANVAS>タグでなんかしてみよう！ と思いたって書いてみたんですが・・・なんせ無知なもんで、ちょっとはまってしまいました。

リファレンスサイトとして参照させてもらったのは、

http://www.html5.jp/canvas/index.html

続きを読む →

“HTML Speech Input” on Google Chrome

先日、Google Chromeがバージョンアップしてv11になり、音声入力APIがブラウザで実装されましたね。iPhoneなどのスマートフォンではすでにお馴染みの機能ですが、やっとこさ、PCバージョンのブラウザでも搭載されました。

なんか難しそうに思いますが、既存のHTMLのINPUT タグに、x-webkit-speech 属性を追加するだけ。

まだ独自仕様なので、speech 属性ではなく、x-webkit-speech となっています。Google Translater(翻訳) なんかで確認すると、speech と x-webkit-speech の二つが指定されています。いずれ標準化されるんでしょうかね。
lang属性で、言語を指定できるみたいです。指定しない場合はOSの言語設定が適用されるみたいで、日本語もちゃんと認識されます・・・が、しゃべる人によって認識率は低くなるのは、スマートフォンの場合と同様のようです(笑)
カタカナ語をしゃべると、英語だったり、日本語だったり、結構揺れますね～(￣0￣)

HTML5仕様のようですが、別にHTML4で書いても認識出来るみたいで(当たり前か(^^;;)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=shift_jis">
		<title>Title...</title>
	</head>
	<body>
    <input type="text" name="q" speech x-webkit-speech>
	</body>
</html>

で、表示はお馴染みのマイクマークが付きます。

htmlspeech

で、音声入力をすると、この入力ボックスにワード(語)が入るので、DOM操作でこのワードを拾うときは、onwebkitspeechchange イベントをハンドリングすればいいようです。
HTML5仕様的には、onspeechchangeなんでしょうけど・・・、speech属性と同じく、onspeechchangeはまだ認識されませんでした。

// <input type="text" name="q" x-webkit-speech onwebkitspeechchange="SpeechChange(this)">
function SpeechChange(oInput)
{
  //alert(this.value); ← 記述ミス(間違い)修正しました
  alert(oInput.value);
}


//HTMLにonxxxxとか書きたくない場合は・・・、
// <input type="text" name="q" x-webkit-speech>
var oInputs =  document.getElementsByName('q');
for(var i in oInputs)
{
  if(typeof oInputs[i] == 'object')
    oInputs[i].addEventListener('webkitspeechchange',function(){alert(this.value);});
}
//とかでしょうか。

ここでややこしいのは、onchangeイベントでは拾えない、っちゅーこと。onchange は音声入力以外での入力に反応するようです。ややこしい。いずれはonchangeで拾えるようになるんじゃないかな～、とは思っているんですが・・・どうなんでしょうかね。イベントを別々にする意味はあまりないような気がするんですが・・・。

それと・・・まだ、エラーイベント(onwebkitspeecherror)がまだ実装されていないみたいすね～。
他のブラウザも実装してくれるんでしょうかねぇ・・・？

既存の入力ボックスに、x-webkit-speech 属性を追加するだけでいいので手間がかかりませんし(文字列置換で済むと思う)、問い合わせページとかの場合は、speech 属性とともに付けとくと、アクセシビリティーの向上？にはいいかもしれません。とはいいつつ、音声入力を必要とするユーザーのchrome使っている比率はメッチャ低いと思いますが・・・ただそう感じただけで根拠はありません(^^;;;