Developer's Voice of HMDT Co.,Ltd.

HOME > PRODUCTS > uListening > Developer's Voice

uListening(アルクネットワークス)

今回の開発担当者 木下誠/三浦一樹 @HMDTオフィス(2011.6.14)

木下 uListeningは語学関係の教材を出している株式会社アルクネットワークスさんと
   一緒にやっているプロダクトです。
   アルクさんは、語学関係の本を本当にたくさん出版されています。
   アルクさんと出会ったきっかけは
   2010年の6月くらいに行われた電子書籍のイベントでした。
   HMDTはそのイベントに出展されている会社さんのブースを色々
   回って、電子書籍のアプリをアピールしていたんですが、その時に
   アルクさんとお話をさせてもらいました。
   興味を持っていただいたので、再び会う機会を設けて、
   一緒にアプリを制作することになりました。
   最初は、「電子書籍を作りたい」という要望でしたので、アルクさんが
   出版している「ENGLISH JOURNAL(イングリッシュジャーナル)」
   という雑誌を「電子書籍化する」という話になりました。
   この雑誌は、本格的に英会話を習得したい、留学したい、ビジネスで
   使いたい、という人が勉強するための、とてもクオリティの高い
   語学学習雑誌です。
   「ENGLISH JOURNALが読めて、CDも聞ける形の電子書籍」
   ということで話が進みはじめました。

EJ.jpgEJ.jpg
↑英語を身につけたい人の味方「ENGLISH JOURNAL」

   私たちは、何かのプロダクトをiPhoneやiPad化する時に
   「どういう形がベストか」ということを最初に考えることから
   はじめます。

   今回だと、プロダクトは英会話教材のENGLISH JOURNALです。
   最初に、ENGLISH JOURNALを、そのままiPhoneやiPad化
   するのであれば、電子書籍の形がいいかもしれない、と考えます。
   次にそれを、「英会話を勉強するために、リスニングツールとして
   機能させたい」ということであれば、電子書籍の形よりは
   ツールの方がいいのではないか? と考えます。
   コンテンツも「PDF+CD」という電子書籍の形ではなくて、もっと
   リスニングツールにあわせたコンテンツの形に変えた方がいいだろう…
   というように発想していきます。
   PDFをめくると、その中にCDのアイコンがついていて、
   それをタップしたら音が聞こえる、という形が
   「電子書籍+CD」のイメージです。

   初期はこの形で考えていましたが、「早送りがしたい」
   「今聞いたところを繰り返して聞きたい」
   「今話している会話を英文テキストとして見たい」更には
   「音声を流しながらそのテキスト内の読んでいる箇所を同期して
   表示させたい」など、様々な要求を積み上げていったときに、
   これはもう「電子書籍」の形ではなく「ツール」の形でいこう、
   という結論に達しました。
   そして、ENGLISH JOURNALというコンテンツを
   「iPhoneやiPadで見るのにふさわしい形に一度変換して、
   それを表現するアプリを作る」というのが
   私たちの目指す形になりました。

   でも、結果的に「やはり書籍もあったほうがいい」となり、
   電子書籍としてのビューア(ブックビューア)と、
   リスニングを勉強するためのリスニングツールの2つを
   ハイブリッドさせた形のアプリができました。
   電子書籍の方は、HMDTで開発している
   Sayoriとよばれるフレームワークを使って実現しています。

ーアプリケーション自体の説明をお願いしてもよいですか?

三浦 はい。uListeningを立ち上げると、最初に本棚の
   ビジュアルが現れます。
   雑誌が2冊並ぶデザインの、左側がブックビューアで
   右側がリスニングツールのコンテンツです。

スクリーンショット(2011-07-12 20.00.56).pngスクリーンショット(2011-07-12 20.00.56).png

木下 スタートが「電子書籍をつくる」ということだったのと、
   アルクさんがたくさん本を出版されていて
   そのコンテンツを使いたい、という希望があったので
   本棚のモチーフを使いました。

三浦 このデザインによって、毎月最新号が出るたびに、
   本棚に本が増えていく形になります。
   現段階ではENGLISH JOURNALだけですが、近々
   その他のコンテンツも売り出される予定ですので、
   かなり豊富な本棚になると思います。
   最初にこのデザインをデザイナーの方から見せて頂いた時に、
   木目とか、本の厚みとかの本棚具合が想像以上の仕上がりだったので、
   かなり興奮してしまいました。
   単純に雑誌の画像が貼ってあるだけのデザインではなく、
   細部までこだわっていただいていたので、「いいものを作ってやるぞ!」
   と僕のモチベーションもすごくあがりました。
   細かいことなんですが、この本の見た目に1本白い線が入っていて
   それによって曲がった感じに見えるとか…
   あぁ、とにかく、頑張ろう!と思いました。

Book_line.jpgBook_line.jpg

↑よく見ると白いラインが! わかっていただけましたか?

三浦 ブックビューアは「雑誌をiPhoneやiPadで読める」という機能に
   プラスしてオーディオを聞くこともできます。
   ページの中にCDのマークの「トラックボタン」がありまして、ここを
   タップするとそのトラックが聞けます。

EJ_CD.jpgEJ_CD.jpg

木下 普通に紙の雑誌で勉強すると、トラックを指定して、CDを自分で
   再生して、それを聞きながら勉強する形になります。
   もう一度同じトラックが聞きたかったら、もう一度リピートする…
   これ、実は結構面倒なんです。
   ブックビューアは読んでる記事から、音声を直接再生できるから
   便利です。
   だけど、それだけじゃだめなんです。
   iPhone版は音声を再生させて、自分でテキストを
   スクロールさせながら、聞くことになります。
   日本語を見たい、と思ったらスクロールさせて。
   次のページにいきたくなったら、次のページをめくって…
   という操作をしながら聞くんですが、続けていると段々、大変に
   なってくるんですよ。
   紙の本とCDで聞いているよりは確実に楽だけど、実際の行動は
   紙の本と変わらない。これでは、ちょっといまいち…ということで
   リスニングツールにつながっていきます。

三浦 リスニングツールは「雑誌を読むため」ではなく「勉強をするため」に
   作られています。
   リスニングツールをタップして開くと、ブックビューアで
   読んでいた記事が、iPhoneで見たときに、見やすい形で登場します。

木下 内容はブックビューアと一緒なんです。でも、見やすくて勉強しやすい。

EJ_hikaku.jpgEJ_hikaku.jpg

↑左が「ブックビューア」右が「リスニングツール」リスニングツールの方が確実に勉強しやすい

三浦 勉強のポイントを抜粋して使いやすい形になっています。例えば、文章を
   再生すると、音声にあわせてページを自動でスクロールしてくれるので
   自分でスクロールをしなくてもいいんです。

木下 文字の大きさも、iPhoneで見やすい大きさに自動的に表示されます。

三浦 更に、もっとすごい機能があるんです。文章の中の「ワード」に
   タップすると、そこから再生が始まるんですよ。

木下 例えば「この人の話をもっと聞きたい」とか「ここから読みたいなぁ」
   と思った時に、文章中のその箇所のワードをタップすれば、音声を
   そこから再生してくれます。これがアプリケーションならではです。

三浦 これを、本とCDでやろうとすると本当に大変ですから。
   トラックの頭出しでも、何度かボタンを押して、再生が始まったら
   早送りして聞きたいところを出して、いきすぎちゃったら巻き戻して…
   とか途方もないですからね。
   それが、1回タップするだけでできるんです。

ーすごいですね。

三浦 これを実現するためのプログラミングは、単語ごとに「この単語は
   オーディオトラックの○秒目です」という情報を埋め込んであります。
   ユーザーがタップすると埋め込んである秒数のところに移動して、
   再生する仕組みです。

木下 この機能はアルクさんからの要望でしたが、アプリとしては、是非
   欲しい機能ですよね。

三浦 その機能の応用で、ユーザーが聞きたいセンテンスを選択すると、
   その範囲を自動的に何回もリピートさせることも出来ます。
   単語ごとに秒数が埋め込まれているので、選択範囲の最初と最後の
   秒数をもとにリピート再生する形です。
   これはもう、CDプレーヤーじゃ絶対に無理です。

スクリーンショット(2011-07-12 20.55.15).pngスクリーンショット(2011-07-12 20.55.15).png

↑リピートさせたい箇所を選んで設定できます

木下 こういったことを実現するために、英文を表示する機能を自分たちで
   実装しました。
   通常は、iPhone側が用意してくれているテキストを表示するための
   クラスがあるので、それを組み込んで終了、なんですが、私たちは
   ナレーションなどと連携させて動作させたいために、
   レンダリングエンジンを独自開発しました。
   これがSayoriテクノロジーの一種になっています。

ーなるほど。独自に開発された機能をかなりフルに使っているアプリ、
 ということなんですね。

二人 そうなんです!

木下 見た目はあっさりしていますが、これを実現させるために、実はかなり
   いろんなことをやっています。でも、それをさらっと見せています。
   で、僕たち、何もやってないよ、という顔をしています(笑)

三浦 それ、言っちゃったらだめじゃないですか(笑)

木下 それがHMDTのカラーですから。 すごいことを隠して、さらっ、です。

ーでも、何度も聞きたい箇所を聞けるのは本当に便利ですよね。
 ディクテーションとかだと何度も聞きたいですものね。

三浦 そうなんです。リスニングツールは聞くだけではなくて、
   聞いたものに対してどれだけ理解したか、というのを確認するために、
   いくつかのクイズが用意されているんですが、その中でも、特に
   見てもらいたいのが、ディクテーションです。
   ディクテーションというのは文章の聞き取りのことで、
   オーディオトラックの該当箇所を聞いて、その文の通りになるように、
   空欄になっている部分を埋めていきましょう、というクイズになっている
   んですが「あれ、さっきなんて言ったんだろう? 聞きとれなかった…」
   という時に、トラックの早送りなどをユーザーにさせません。
   該当箇所はオーディオトラックの○分○秒目です、というプログラムを
   組み込んでいるので、聞きたい箇所の再生ボタンを押したら
   該当箇所が再生されます。

スクリーンショット(2011-07-12 21.07.51).pngスクリーンショット(2011-07-12 21.07.51).png
↑ディクテーション問題

木下 これ、早すぎて何言ってるかわからないんですよね。

三浦 そんなとき便利なのが、自分の好きなスピードで再生させることができる
   「スロー再生」です。
   何度も聞くことができて、スピードも落として聞けるので、これで
   ディクテーションもばっちりです。ディクテーションって、
   聞き取ったものを、書きとらなくてはいけないので、テキストとCDと、
   更にペンも持って、聞いて、もう一度再生して、ペンを持って書いて…  
   という、かなり忙しい作業になるんです。でも、このアプリだと
   すべて1個で出来ちゃいます。これはiPhoneならではで相性がいいと
   思います。

ーすごい! これを知ってしまうと、
 本とCDで勉強することができなくなってしまいますね。
 勉強テキストが全部アプリになればいいのに。

三浦 本当にそう思います。思考の邪魔になるものがないので、勉強に
   集中できるんです。

ー勉強のやり方もわかりますよね。アルクさんからの要望は
 かなり網羅している感じなんですか?

木下 そうですね。もともと紙雑誌のENGLISH JOURNALに
   クイズ問題などは数多くあったので、それは全てiPhoneで
   できるようにしよう、ということで全部いれています。

スクリーンショット(2011-07-12 21.04.16).pngスクリーンショット(2011-07-12 21.04.16).png
↑充実のクイズ問題。楽しみながら勉強できます。

三浦 音読もiPhoneならではの使い方ができます。
   通常なら英文を聞いて、それをまねて発音して終わり、なんですが
   iPhoneだと、自分自身の音読を録音して、自分の発音のチェックまで
   できます。

木下 目標タイムも設定されているので、そのタイムに近づけて読むと
   よりネィティブのスピードに追いつけます。かなり、高いレベルに
   設定されていますけどね。

スクリーンショット(2011-07-12 21.11.14).pngスクリーンショット(2011-07-12 21.11.14).png
↑残念! 目標タイムに届かず…

ーこれを使って勉強を続けたら、かなりのレベルアップが期待できる、
 いいツールになってますね。

木下 アルクさんたちは、プロダクトへの思いがとても強い方達でしたので、
   そこに応えられるように、とこちらもがんばりました。
   その結果、盛りだくさんなアプリになりましたね。若干、その
   盛りだくさんさで、使いこなすのが大変かなぁ、という感じも
   するんですが、勉強したい人のためのツールにはなったと思います。

ーENGLISH JOURNALは毎月追加されるということですが、それ以外の
 コンテンツも今後、増える予定なんですか?

木下 はい。ENGLISH JOURNAL以外も追加する予定です。
   まだ未定なんですけど、英語以外の言語版も出したい、というお話も
   ありますしね。
   後は、今はiPhone版のみなのでiPad対応(*)をしたいと考えています。
   更に目指すは、iCloud対応?

三浦 その辺りはまだ未定ですが、同期対応はしていきます。ですので、
   iPadとiPhoneを使って、場所を選ばずに勉強がしやすいように
   なります。

ーカフェでiPadを使って勉強して、電車でiPhoneを使って勉強して…
 いいですね!

木下 iPhoneもバージョンアップ版のver.2.0を目指します。
   とにかく、盛りだくさんで、かなり充実しているので、真剣に
   英語の勉強をしたいみなさんに使ってほしいアプリになりました。

*2011年7月20日よりiPad対応が可能になりました。
 ぜひ、使ってみてくださいね。

DV_taidan_EJ.jpg

HMDTアプリケーション

icon512.png
HMDT BOOKS