「棒読みちゃん for Google+」は棒読みちゃんの
読み上げテキストを外部から受信する機能を使用しています。
通信にはSocket通信を使用しますが
Chrome ExtentionだけではSocket通信を行うことができません。
それを解決するため滅びの技術といわれる「NPAPI」というものを使用します。
NPAPIとはFlash Player などのプラグインで使われる
EMBEDタグでOSネイティブの機能を呼び出す技術です。
ようするに、OSネイティブな機能はDLLとして実装します。
(FlashもHTML5に取って代わられ、
NativeClientなどの新しい技術によって
NPAPIは滅びる運命にあると言われています)
今回の機能は以下によって構成されています
- コンテント・スクリプト
- バックグラウンドページ
- オプションページ
- プラグインDLL
コンテント・スクリプト
Google+ページで動かすJavaScriptです。
DOMNodeInsertedのイベントを監視して
追加されたPOSTから文字列を取り出し
バックグラウンドページに送信します。
バックグラウンドページとのやりとりは
chrome.extension.sendRequest()を使用します。
バックグラウンドページ
バックグラウンド動くため、表示させることはできませんが
EMBEDタグでDLLをプラグインとして貼り付けます。
コンテント・スクリプトからのsendRequestは
chrome.extension.onRequest.addListener()で受信し
送られてきた文字列をプラグインへ渡します。
<embed id="bouyomichan" type="application/x-vnd.bouyomichan"></embed>
のようにしてプラグインを貼り付けることによって
document.getElementById('bouyomichan').talk('hogehoge');
というJavaScriptでプラグインに実装したtalk()メソッドを呼び出すことができます。
オプションページ
ブラウザの「拡張機能」画面から呼び出すオプションを設定する画面です。
設定した値は localStorage をつかって保存します。
デザインが適当なのはそこまで頑張る気力がなかったためです。
プラグインDLL
Socketを使って棒読みちゃんと接続し
文字列を送りつけます。
今回はtalk()というメソッドで棒読みちゃんに文字列を送信しています。
他にも、音声、音量、音程、スピードなどを変更するためのメソッドも
実装しています。
こればっかりはWindowsネイティブな部分なので
VisualC++2010でビルドしました。
このDLLに相当する部分をMacやLinux用に用意すれば
MacやLinuxでも動かせないことはないはず。
とはいっても棒読みちゃん本体はWindows版しかないわけで、、、、
NPAPIを使うにあたって、
色々とサンプルを漁ったりしましたが
唯一動いたのがこちらのものだけでした。
ChromeからプラグインDLLとして認識されるためには
DLLのバージョン情報にMIMETypeなどを定義しなければいけないのだが
これがなかなかうまいように設定できず、苦しみました
上手いことchromeに認識されるとabout:pluginにて確認することができます。
棒読みちゃんもutf-8での指定は可能なのですが、
初期に配布したバージョンでは
文字列長の指定を誤っていたため
ゴミまで読み上げることがあったのはナイショだ
今回ちょっとめんどくさかったのは以下2点
初期に配布したバージョンでは
文字列長の指定を誤っていたため
ゴミまで読み上げることがあったのはナイショだ
今回ちょっとめんどくさかったのは以下2点
- ストリームのPOSTについてはあっさりと文字列を取り出すことができたのですが、ハングアウトのCHAT部分はiframeで別ページになっててその中の更新を監視しなければいけなかったこと
- 一度実装できたと思ったらGoogle先生がごっそりDOMの構成かえたため実装しなおしたこと
