初対面の人とも会話がはずむお助けアプリを作っちゃおう! 池澤あやかのWeb的日曜大工-Fx0開発講座 第3回

Sponsored

初対面の人とも会話がはずむお助けアプリを作っちゃおう! 池澤あやかのWeb的日曜大工-Fx0開発講座 第3回 1

初対面の人とも安心。

さて、これまで2回に渡ってお送りしてきた「池澤あやかのWeb的日曜大工」。Firefox OS搭載スマートフォン「Fx0」を使って、気軽にいろいろなものを作ってみようという企画です。

第1回は「Framin」を使ってオリジナルのロックスクリーンを作成、第2回は公開されているFx0の背面カバーの3D CADデータと3Dプリンタを使い、オリジナルのパイナップル背面カバーを作りました。

そして第3回は、アプリを作ります。そう、アプリを作ります!(大事なことなので2回言いました)

Firefox OS用のアプリ作成には、Web IDEという開発ツールを使います。Web IDEでは、HTMLやCSS、JavaScriptなどを使用することが可能。つまり、特別なプログラミン言語がわからなくても、ちょっとWebサイト制作の知識があればFirefox OS用のアプリが作れてしまうのです。

しかも、開発したアプリは簡単にFx0に転送して使用することができます。まさに日曜大工感覚でアプリが作れて、使えます

今回は、プログラマー女優の池澤あやかさんの要望を取り入れたアプリを作るのが目的。さあ、どんなアプリになるんでしょうか?

池澤あやかの“苦手なこと”をサポートするアプリにしよう

初対面の人とも会話がはずむお助けアプリを作っちゃおう! 池澤あやかのWeb的日曜大工-Fx0開発講座 第3回 2

今回も、もちろん助っ人をお呼びしております。第3回の助っ人はデザイナー・エンジニア・ストラテジストという肩書を持つ久下玄(くげはじめ)さんです。久下さんは、ハードウェアからソフトウェアまで幅広いジャンルの開発に携わっているスペシャリスト。今回は、池澤さんの欲しいアプリを、実際に作っていただきます。

では、どんなアプリにしましょうか?

ギズモード編集部(以下ギズ):今回のお題は「アプリを作ろう」ということなんですが、池澤さんはどんなアプリがあったらいいと思いますか?

池澤あやかさん(以下池澤さん):今うさぎを飼ってるんで、ペット関連のアプリとか気になりますね。

久下玄さん(以下久下さん):うさぎはなにかしゃべるんですか?

池澤さん:ブーブー言いますね。うさぎは声帯がないので、呼吸音なんですが

久下さん:それじゃあコミュニケーション取りづらそうですね。

池澤さん:でも、なつきますよ。

久下さん:うさぎと擬似会話ができるアプリなんてどうですかね。

池澤さん:でも、呼吸音だけなんで会話になるかどうか(笑)。

ギズ:池澤さんが日常生活で困っていることを手助けしてくれるアプリとかどうでしょう。

初対面の人とも会話がはずむお助けアプリを作っちゃおう! 池澤あやかのWeb的日曜大工-Fx0開発講座 第3回 3

池澤さん:実は会話があまり得意ではないんです。特に初対面の方や、ジャンルが違う方とお話をするとき、共通の話題が見つからなくて困ることがありますね。

久下さん:会話の流れの中で、話題となるキーワードが出てくるアプリはおもしろいかもしれないですね。

池澤さん:会話が途切れると、話題を表示してくれるんですか。ありがたいですね。

久下さん:ちょっとずれたコンテンツが出てきたりしてもおもしろいですね(笑)。

池澤さん:「今、その話題じゃない」みたいな(笑)。

久下さん:今、この人とこの話題じゃ盛り上がらないだろうと(笑)。

池澤さん:Fx0を振ったら次の話題が出てくるというのもいいですね。

ギズ:Fx0を振って話題が変わるというのはおもしろいですね。

初対面の人とも会話がはずむお助けアプリを作っちゃおう! 池澤あやかのWeb的日曜大工-Fx0開発講座 第3回 4

池澤さん:「違うよ、それじゃないよ」ってFx0とコミュニケーションをしている感じになりますよね。

久下さん:相手の属性を最初に登録して、ある程度それに沿った話題が表示されるようになればいいですかね。

池澤さん:性別、年齢などの情報を入れて、スタートボタンを押すと。

久下さん:相手に合わせて話題を振ってくれる、バラエティ番組のMC的なアプリになりますね。

池澤さん:男の子が初デートで使ったりとかして(笑)。

初対面の人とも会話がはずむお助けアプリを作っちゃおう! 池澤あやかのWeb的日曜大工-Fx0開発講座 第3回 5

久下さん:提供する話題のセンスが問われますね。

ギズ:そこも含めて久下さんにお願いしたいと思っています。大丈夫でしょうか?

久下さん:見えてきました。どれだけいたずらを入れるかという(笑)。アプリ自体はシンプルなものですが、どれだけ遊び心を入れるかというところだと思います。

池澤さん:アプリ楽しみにしていますね!

会話お助けアプリ「TALK CUE」完成

初対面の人とも会話がはずむお助けアプリを作っちゃおう! 池澤あやかのWeb的日曜大工-Fx0開発講座 第3回 6

打ち合わせを終え、久下さんにはアプリを制作していただき、2週間後に再びお2人に集まりいただきました。そう、池澤あやかお助けアプリが完成したのです。

初対面の人とも会話がはずむお助けアプリを作っちゃおう! 池澤あやかのWeb的日曜大工-Fx0開発講座 第3回 7

アプリ名は「TALK CUE」。会話の糸口を与えてくれるこのアプリにピッタリのネーミングですね。さて、肝心のアプリの画面を見てみましょう。

初対面の人とも会話がはずむお助けアプリを作っちゃおう! 池澤あやかのWeb的日曜大工-Fx0開発講座 第3回 8

最初に会話相手の年齢、職業、性別を入力するようです。TALK CUEの口調がフランクですね。職業は「学生」「クリエーター系」「政治経済系」「ギーク系」の4種類から選べます。

初対面の人とも会話がはずむお助けアプリを作っちゃおう! 池澤あやかのWeb的日曜大工-Fx0開発講座 第3回 9

年齢選択画面。「10代っぽい」っていうのが、ゆるい雰囲気を出していていいですね。

初対面の人とも会話がはずむお助けアプリを作っちゃおう! 池澤あやかのWeb的日曜大工-Fx0開発講座 第3回 10

20代っぽい」「クリエイター系」「男性」を選択してスタートしたTALK CUEの画面です。LINE風な吹き出しを活かしたインターフェイスと、くだけた口調が親しみやすさをアップしていますね。TALK CUEが提供してくれている話題は「雑誌とか読みます?」。次の話題を表示したい場合は、Fx0本体を振りましょう。

でも、いくら画面を見たところでこのアプリの実力はわかりません。ということで実際に使ってみましょう。

初対面の人とも会話がはずむお助けアプリを作っちゃおう! 池澤あやかのWeb的日曜大工-Fx0開発講座 第3回 11

今回は、池澤さんがMCの架空の番組「あやかの部屋」に、ギズモード編集部の前田さんがゲストとして出演するというシチュエーションで、実際にTALK CUEを使ってみました。それではどうぞ!

どうでしたか? 池澤さんがせわしなくFx0を叩いたり振ったりしている姿と、前田さんの意外なトークが印象的でしたね! この動画を撮っているとき、久下さん始めスタッフ一同で見ていたのですが、笑いを堪えるのに必死でしたよ。

初対面の人とも会話がはずむお助けアプリを作っちゃおう! 池澤あやかのWeb的日曜大工-Fx0開発講座 第3回 12

ちなみに、前田さんの属性は「20代・女性・ギーク系」を選択しました。「どんなプログラミングとかしたことありますか?」なんて話題が出てきます。

初対面の人とも会話がはずむお助けアプリを作っちゃおう! 池澤あやかのWeb的日曜大工-Fx0開発講座 第3回 13

会話が途切れそうになると、Fx0をシェイク。違う話題が表示されます。

でも、初対面でも思ったよりスムーズに会話が進んだのではないでしょうか。TALK CUEはしっかり役目を果たしたと言えるでしょう。

誰かが寄り添ってくれる感じがして心強いアプリ

初対面の人とも会話がはずむお助けアプリを作っちゃおう! 池澤あやかのWeb的日曜大工-Fx0開発講座 第3回 14

それでは、池澤さんと久下さんに、TALK CUEの感想を語っていただきましょう。

ギズ:池澤さん、実際にTALK CUEを使ってみていかがでしたか?

池澤さん:会話が途切れたときに、誰かが寄り添ってくれている感じがあって、そこはうれしかったですね。

ギズ:先日話し合いをしてこういうアプリにしようとなって、実際に出来上がったわけですが、イメージしていたものと比べていかがでしたか?

池澤さん:性格がフランクだったなと(笑)。あと、UIを全然想像していなかったのですが、LINE風で見やすいと思いました。

初対面の人とも会話がはずむお助けアプリを作っちゃおう! 池澤あやかのWeb的日曜大工-Fx0開発講座 第3回 15

ギズ:TALK CUEの製作過程で一番ご苦労された点はどこでしょう。

久下さん:アプリの仕組み自体はとてもシンプルなんですが、自動的にインターネットから属性に合わせた時事ネタを拾ってくるようにしたら、シリアスなものしか出てこないようになってしまって(笑)。結局その機能は外しました。その部分のアルゴリズムはかなり高度なので、ニュースアプリを運営している会社などがやるといいのかもしれません。

ギズ:気をつけた点はどこですか?

久下さん:あまり作りこまないでラフに実装できるところがいいところだと思うので、なるべく気軽に作るようにしました。日数的には2日くらいですが、ずっとこれをやっていたわけではないので、それほど手間はかかっていませんよ。

ギズ:実際、アプリはどのような構成になっているんでしょう?

久下さん:今回、特別なライブラリとかは使わず、シンプルにHTML、CSS、JavaScript、JSONで構成されています。devicemotionやdevicelightを使ったEventListnerが効果的に使えるところとかは、モバイルアプリ向けのデザインアイデアを引き出してくれますね。そのほか、カメラとかストレージにアクセスするデバイスAPIもいろいろあるので、モバイルの良さを引き出したWeb風開発ができるのがユニークです。今回はやってませんが、jQueryMobileとかのフレームワークを使って簡単に少し凝ったUIとかも実装できるので、Web開発者の人には馴染みやすいかと思います。どのようなライブラリがFx0の環境で動いて、どれが使いやすいかとかをまとめたサイトとかはまだないと思うので、誰かそういうのやってまとめておいてくれると嬉しいですね(笑)。

ギズ:今回「振る」という動作で話題が変わるという機能をつけたのですが、これはいかがでしたか?

池澤さん:Fx0の中にいる小人さんと会話しているような感じですね。「今その話題じゃないよ」って(笑)。そこがいいところだと思います。

こんなに遊びやすいスマートフォンはほかにない

実はこの「池澤あやかのWeb的日曜大工」。今回がラスト。ということで、全3回を実際の制作物を見ながら、お2人に振り返っていただきます。

初対面の人とも会話がはずむお助けアプリを作っちゃおう! 池澤あやかのWeb的日曜大工-Fx0開発講座 第3回 16

久下さん:ロックスクリーン、いいですね。「Framin」はなかなかおもしろいですよね。充電量に合わせてロックスクリーンが変わるなんていうものを、ものの数分で作れてしまうんですから。僕もFx0を買ったときに、Framinで簡単なアプリを作りました。そういうことが手軽にできるのがFx0らしいなと思います。電子工作みたいなノリですよね。

池澤さん:ほんと、写真さえあれば5分くらいで作れちゃうんですよ。その代わりデバッグがたいへんでしたけど(笑)。バッテリーがなかなか減らないので、確認がたいへんでした。

初対面の人とも会話がはずむお助けアプリを作っちゃおう! 池澤あやかのWeb的日曜大工-Fx0開発講座 第3回 17

久下さん:この背面カバーはパイナップルの再現クオリティが高いですね。あと重い(笑)。また、カメラがすごいですね。哲学的な写真が撮れる。これで電話しているビジュアルもすごいことになってますね。どっちに持ったらいいんだろう(笑)。Fx0が完全に隠れてしまうので、スパイ道具みたい

池澤さん:今までにない背面カバーを作ろうというコンセプトでした。

久下さん:逆にハイテク感ありますよね。

ギズ:予想以上にパイナップルでしたね。

池澤さん:私も予想以上にパイナップルでした。

久下さん:ロックスクリーンや背面カバー、アプリなど、気軽に自分で作れる。こんなに遊びやすいスマートフォンは、これまでなかったんじゃないですか? どのジャンルの人でも、どこから切り込んでも楽しめるというのは、なかなか珍しいと思います。パイナップル背面カバーにいたっては、主役が変わってますからね(笑)。

ギズ:久下さんは、今後Fx0でやってみたいこととかありますか?

久下さん:Webとの親和性が高いので、Fx0ならではのサービスを作ってみたいですね。ほかのモバイル用OSだと、モバイルOS側、Webのフロントエンド側、サーバー側というように、それぞれ違うスキルの人が必要になりますが、Firefox OSではWebの技術者が一人ですべてを行えるので、そこがおもしろいところだと思います。

初対面の人とも会話がはずむお助けアプリを作っちゃおう! 池澤あやかのWeb的日曜大工-Fx0開発講座 第3回 18

全3回に渡ってお送りした、「池澤あやかのWeb的日曜大工」。いかがでしたでしょうか。Fx0が、そしてFirefox OSがいかに自由度の高いものであるか、おわかりいただけたかと思います。

今回の企画、完全にFx0に遊ばせてもらったというか、池澤さんをはじめ、三井さん、谷尻さん、久下さんに遊んでいただいた企画だったように思います。

久下さん曰く「Fx0は遊ぶための端末という印象があるから、発想もこういう自由なものになるんじゃないですか」とのこと。確かに、他のスマートフォンでは今回のような発想は生まれなかったかもしれませんね。

各回の助っ人としてお越しいただいた皆様、そして3回に渡ってご出演いただいた池澤あやかさん、ありがとうございました。

そして、自由な発想を授けてくれた「Fx0」および「Firefox OS」にも感謝感謝です。

こんなにも自由なアイデアが生まれ、それを実現できるのは、世界中でもこのFx0だけなのではないでしょうか。オープンなOSからはオープンなアイデアが生まれてくるようです。

今使っているスマホに不自由さを感じたら、自由なFx0を。

そして、必要なものは自分で作るという、Web的日曜大工を楽しんでみてはいかがですか?

池澤さんとクリエイターのみなさんでつくってもらった作品は、KDDIのWebサイトCreator Showcaseに後日掲載するかもしれませんよ。そちらもお楽しみに!

source: Fx0 , Firefox OS , Web IDE(KDDI)

Special Thanks: 久下玄

衣装協力:ステュディオス、VINCA TOKYO、シンゾーン ルミネ新宿

(執筆:三浦一紀、スタイリスト:武久真理江、ヘアメイク:井村曜子・外山裕子)