棒読みちゃん for Google+：技術解説

拙作 棒読みちゃん for Google+ についての技術的解説です

「棒読みちゃん 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で行われ、

棒読みちゃんもutf-8での指定は可能なのですが、
初期に配布したバージョンでは
文字列長の指定を誤っていたため
ゴミまで読み上げることがあったのはナイショだ


今回ちょっとめんどくさかったのは以下2点

• ストリームのPOSTについてはあっさりと文字列を取り出すことができたのですが、ハングアウトのCHAT部分はiframeで別ページになっててその中の更新を監視しなければいけなかったこと
• 一度実装できたと思ったらGoogle先生がごっそりDOMの構成かえたため実装しなおしたこと