nakatani @ cybozu labs

本日 10月15日に英単語をタイピングゲームで覚えるサービス「iVoca(アイボキャ)」 ( http://ivoca.31tools.com/ ) をリリースしました(サイボウズ・ラボのリリース文はこちら)。
まあ能書きはさておき、まずは是非遊んでみてください。


【遊び方】

• 「Game Start」をクリックすると、上から単語カードが落ちてきます。その英語の綴りをタイピングすればＯＫ！
• 正解すると次々とカードが落ちてきますので、続けてどんどんタイピングしてください。
• わからない単語があっても、しばらく待っているとヒント(先頭１文字)が、それでもわからず待っていれば綴り全体が表示されてきます。

基本的なルールは先月βテスト公開したときと全く同じです。
今回は、より広く多くの人に楽しんでもらうための工夫をさらに加えてリリースしました。

ユーザ登録しなくてもゲームを遊べるようになりました。

ユーザ登録すれば学習結果を保存できるようになります。
「まず試しに遊んでみて、保存したくなってから登録」ということもできるようになっています。

作成したブック(単語帳)をブログパーツとして公開できます。

iVoca ではブック(単語帳)をユーザ自身が作成できるのですが、そのブックをブログパーツとして誰でも貼り付けることが出来るようになっています(上のゲーム画面はその機能を利用しています)。
おもしろいブックを作ったら、ブログに貼って自慢しましょう！

ゲームスピード自動調整

ゲームスピードが、タイピング速度にあわせて自動的に調整されるようになりました。
タイピングが不慣れなら次第にゆっくりとしたスピードに、タイピング猛者なら……！！

その他にも、βテスト公開のときの繰り返しにもなりますが iVoca の特徴を挙げておきます。

苦手な単語は何度も練習、得意な単語は確認程度でいいよ

出題はランダムですが、間違える(答えるのが遅い)と出題率があがり、正解すると下がります。
もちろんどこまで覚えたかはちゃんと記録されますのでご安心。
この出題率は時間がたつとまた上昇するので、憶えたつもりの単語も「そう言えばこれ憶えてる？」と時々出てきますよ！

自分で単語帳(ブック)を作って遊べ(学べ)ます

登録されているブックで遊ぶもよし、自分で特に憶えたい単語やおもしろい単語を集めたブックを作るもよし。
タグを付けて共有することもできます

ライバルと競い合え！

全体ランキングって、どうやってそんな点数出したの何時間やったのって人たちが上位を占めていて、つまらないなあと思ったことは？
iVocaのランキングはあなたが(勝手に)ライバルと認めたユーザのランキングです。
知っている人たち、同じくらい頑張っている人たちと競い合いましょう。

mixi OpenID / サイボウズ ネットID に対応！

mixi ユーザなら簡単なプロフィールの登録だけですぐに遊べ(学べ)ます(βテスト期間中の制限については後述)。
作ったブックをマイミクのみとか特定のコミュニティ参加者のみなど、限定したユーザだけに公開できます。
AltSpace(サイボウズ ネットID に対応した SNS 的グループウェアサービス)なら、iVocaを掲示板に埋め込むことも！

iVoca はなぜゲームなの？

そもそもゲームって「目的にまで昇華されたユーザインターフェース」だと考えています。
つまりゲームとは、「ここでこのタイミングでボタンを押す(あるいは押さない）のが気持ちいい」もののことで、ゲームのルールもキャラクターも経験値も、ストーリーですらそのための手段に過ぎません。
ボタンを押すのが難しかったら、それだけで「気持ちいい」のためのハードルが高くなります。
というわけで、ゲームにはプレイヤーが余計なことを考えずに(説明書の類を読まずとも)、いかに楽しんでボタンを押してもらうか(あるいは押させないか)というエッセンスが詰まっています。

翻って、iVoca は「ユーザには、とにかく単語を覚えることだけに集中してもらいたい」というコンセプトの元に設計しました。
手を動かした方が覚えるからタイピングは必要としても、単語覚えるのに単語に含まれないキーを押すのは苦痛だよね。
次の問題に進む「次へ」ボタンとか、わからなかったときに押す「ギブアップ」ボタンとか、覚えるのにいらないよね。
勉強を始めるのに何回も選んだりクリックしたり、ページが開くのを待ったりするのは無駄だし、やる気なくなるよね。
設定とかでスピード選ばせたり問題数選ばせたり。ユーザは本当にそんなの選びたい？　てか覚えるのにいらないよね。
そして、
勉強とか暗記とか、とにかく自分が頑張るしかないんだけど、手軽で気持ちいい達成感があれば継続する力になるよね。

余計なことを考えず、必要なキーだけを楽しんで押してもらい、時には押させないことでユーザの意志を汲み取り、とにかく単語を覚えることだけに集中……それってなんてゲーム？

iVoca は、そのような必然からゲームという形式をとりました。iVoca はゲームにしかなりようがなかった、といってもいい。
などという御託を並べるのももしかしたら手段に過ぎなくて、実のところ「ゲームなサービスが作りたかった」というのが唯一の本当かもしれません(笑)。

そんな「余計なことを考えず」、遊んだり勉強したりブックを作ったり、多くの人に楽しんでもらえれば嬉しいです。

10/15 にリリースしました英単語タイピングゲーム iVoca。

その iVoca のゲーム部分をブログパーツとして、あなたのサイトやブログに貼り付けることが出来るようになっています。
ブログパーツ貼り付けは iVoca にユーザ登録しなくてもできます！


やり方は簡単。
まず iVoca で貼り付けたいブックを選びます。
iVoca のトップページに「人気のブック」が出ていますし、「人気のタグ」をクリックすれば(例えば「分野別」をクリックしてみる)、そのタグで分類されたブックの一覧が表示されるので、そのあたりから探してみましょう。

「ハリー・ポッター１巻を読むのに必要な英単語」を貼り付けるなら、ブック名をクリックして開いたブック画面の右下にある「埋め込み用タグを表示」ボタンを押します。



ブログパーツの貼り付け方の選択肢が出てきますので、あなたの使っているブログサービスに合わせて「script 形式」または「Google Gadgets 形式」を選んでください。
script タグを使えるブログなら「script 形式」を選びましょう。はてなダイアリーの場合は「Google Gadgets 形式」を選んでくださいね。
ブログでどのような形式のブログパーツが使えるかわからない場合は、ブログのサービス元にてご確認ください。



形式を選ぶと、貼り付け用のタグがそのすぐ上の欄に表示されるのでコピーして（クリックすればタグ全体が選択されるので、右クリックしてコピーを選ぶだけでＯＫ）、ブログの本文書き込み欄などにペースとしてください。
これでゲームをブログに貼り付けられました。かんたん！

英単語タイピングゲーム iVoca は楽しんでいただけましたか？
自分の興味のあるブック(単語帳)は一通りクリアしてしまったから、もう勉強する（遊ぶ）ものがないよう、という人もいらっしゃったりします？
そういうとき、iVoca トップページの上にある「人気のタグ」からまだ勉強していないブックを探すのもいいですが、iVoca にはブックを作る機能があるので、自分で好きなブックを作ってしまうのも一つの手。

「自分で作ったブックなんて、全部答え知ってるからおもしろくないでしょう」って？
いえいえ、「他人が作ったブックで遊ぶよりも自分で作ったブックで遊ぶ方が面白いかも」という意見もありますよ。
ここはだまされたと思って一度作ってみちゃいましょう！

というわけで、iVoca ブックの作り方をご紹介。とっても簡単です。

iVoca の画面の右上にあるメニューの中から、"create book" をクリックするとブック作成画面が開きます。


入力項目がいくつかありますが、最低限記入が必要なのは「ブック名」と「問題」です。
ブック名は内容がわかるよう適当に短めに記入しましょう。


問題＆解答は半角カンマ区切り、「問題,解答」か「解答,問題」のどちらでもお好きな形式で、問題の個数だけ改行区切りで並べればＯＫ。
最低５問あれば登録して遊べちゃいます（さすがに５問くらいないと、１ゲームいかないうちに確実に終わってしまいます……）。


適当に作ってみただけだからいきなり他の人に遊んでもらうのは恥ずかしいなあ……という場合は「公開範囲」を「自分専用」に設定すれば、そのブックを見えるのも遊べるのも自分だけになりますのでとっても安心。
ブックが充実して、みんなに遊んでもらいたくなった場合はもちろん「公開範囲」を「全体に公開」などに変更するのを忘れずに！


登録したブックはトップページの「新着ブック」に表示されます！


ブックを登録した後に、単語の追加とか変更とかも簡単簡単。
「新着ブック」に表示されているブック名をクリックするとかしてブック画面を開くと、右上のブック作者のアイコンの横に「このブックを編集」ボタンがあるので、クリック。
すると新規登録の時と同じブック作成画面が開くので、同じように単語の追加や修正をしてください。

どんなブックを作ろうかな？

もちろん誰でも自由に好きなブックを作って勉強したり楽しんじゃったりしていいんですが、例えばどんなブックが楽しそうかなあ。

英語の文章、小説、漫画を読んでいて、わからなくて辞書引いちゃった単語を覚えちゃう

ハリー・ポッター１巻を読むのに必要な英単語、The Great Gatsby を読むのに必要な英単語

英語の映画やTVを見たり曲を聴いたりしていて、セリフや歌詞に出てきた単語を覚えちゃう

リトルチャロ Episode 1～3

スポーツとか経済とか、興味のある範囲の言葉を用語集的に集める

レシピによく出てくる単語、OpenID Authentication 2.0 に関連する英単語

試験対策とかで出題範囲の単語を効率よく暗記したい

工業英検3級対策 Vocabulary "M-R"

全然あんまり英語と関係ないブックを作って遊んじゃう

ガンダムの機動兵器(型式→英語名)、タイ語で数字

iVoca に実際に登録されてるブックの傾向と、どんなブックがあるかをさらりとあげてみました。
勝手に整理してみただけなので、もちろんこの範囲に収まってなきゃいけないなんてことないので、好きなブックを作って勉強してね！（遊んでね！）。

そうそう、ちょいと単純な雑学クイズっぽいのもいいなあ、なんて思って、今回のブックの作り方ご紹介を用意するついでにこんなブックを作ってみました。
Have fun!

http://labs.cybozu.co.jp/blog/nakatani/imgs/blogparts.png

「（ちょっと設定しないといけないけど）何もインストールしないで、ブラウザに英語を喋らせるサンプル」を作ってみました。IE 限定。
元ネタは「JavaScript などで英語を喋らせる方法」。

iVoca おしゃべりモード (IE & Javascript で英語をしゃべらせるサンプル)

http://ivoca.31tools.com/speak_text.html

任意の英文を喋らせてみるサンプルと、英単語タイピングゲーム iVoca を SAPI に対応させて、タイピングした英単語をしゃべってくれる「おしゃべりモード」を試験的に実装したものを紹介しています。

細かい手順やセキュリティに関する注意事項などはリンク先をご覧いただくとして、ここでは仕組みを簡単に説明。

Windows XP や Vista では SAPI (Microsoft Speech API) が標準搭載されていて(Windows 2000 にも入っているとか。手元に環境がないので確認できませんが)、そいつが音声合成を行う ActiveX コンポーネントを持っているので、それをブラウザ上の Javascript から呼び出せれば OK。
なのですが、残念ながらその ActiveX はブラウザから呼べるようになっていません（「実行しても安全とマーク」されていない）。

それでもなんとかして呼び出したいなら、セキュリティの設定の方をいじる必要があります。
具体的には Internet Explorer のセキュリティオプションで「スクリプトを実行しても安全だとマークされていない ActiveX コントロールの初期化とスクリプトの実行」を「有効にする」に設定することで SAPI の ActiveX コンポーネントをブラウザの Javascript から呼び出せるようになります。
もちろん、この設定項目はどこからどう見ても危険。せめて「信頼済みサイト」で行っておくべき。というあたりの手順はサンプルのページを参照のこと。
間違っても「インターネットゾーン」でこの設定を行わないように……！！！！

SAPI を呼び出せるようにしてしまえば、後は簡単。
SAPI の音声合成コンポーネントを取ってきて、その Speak メソッドに発音させたい英文を渡すだけです。

var spkr = new ActiveXObject('SAPI.SpVoice');
spkr.Speak("Hello iVoca!");

サンプルの方では、try ～ catch で囲んで SAPI を呼び出せない場合の手当をしたり、Flash (iVoca のゲーム本体) から呼び出すためにほげほげしたりしてます。

XP と Vista でインストールされている SAPI のバージョンが違っていて、実は Vista (SAPI 5.3) の方が女性の声で音質も良く、発音も自然できれい。合成じゃなくて録音じゃないかというくらい。
XP (SAPI 5.1) のももちろん十分すごいんですが、音質のかなり悪い男性の声、発音もくせのある感じ……。Vista のを聞いた後だと、正直聞くに堪えないと言わざるを得ない。
Vista にしてしまって、「あーなんか一つでもいいから Vista にして良かったと思えることないかなあ。もう何でもいいんだけど……」と日頃嘆いている方には、ぜひ Vista の発音を聞いて欲しいですね！！！
もうほんと、このことだけで Vista にして良かったと思えること請け合いです……気の持ちようによっては。
(ちなみに Vista の女性は "Microsoft Anna"、XP の男性は "Microsoft Sam" というお名前です）。

サンプルのページでは「アメリカ合衆国の５０州」を取り上げてみたんですが、こういうのは特に正しい発音を聞きながら勉強したいからピッタリですよね。
あと、サンプルにするのをつい自重してしまったんですが、「ガンダムの機動兵器(型式→英語名)」もかなり強烈にオススメ。想像以上にまともに発音してくれるのでウケます。

iVoca ではユーザさんに単語帳を自分で作ってもらえるのですが、テキストなら誰でも作れるけど、音声はなかなかそういうわけにはいかない。
でも、英文や単語を与えるだけでこれほど正確に発音してくれる SAPI がブラウザから普通に使えるようになれば、ユーザさんが作ってくれた問題の価値が何倍にも増しますし、他にもいろんな利用シーンが考えられて、いろいろとっても楽しそうな想像がふくらむんですが……音声合成だけでもブラウザから「安全に」使えるようにならないかなあ。
実際、発音している間はブラウザや Flash の動作が止まってしまうのさえなんとかなれば、個人的には常用したい。
setTimeout でくるんだり、iframe 内で実行させるようにしてみたり、といくつか試してみたのですが、今のところこれを回避できずにいます。うーん。