TECH PLAY

株式会社LIFULL

株式会社LIFULL の技術ブログ

656

なぜホームズくんは変わることになったのか はじめまして。プロモーションユニットの森です。 このホームズくんをご存知ですか? もしかしたら、もう覚えている人も少ないかもしれませんね。 2007年から頑張ってくれていた茶色のコートにとんがり帽子のホームズくん。彼には社内からも社外からも愛してくれている人がたくさんいました。 イベントに出ればお子さんたちが沢山遊んでくれていましたし、不動産会社様には店頭ののぼりやぬいぐるみも置いていただきました。 SNSでの情報発信や、フォロワーとのコミュニケーション、旧ホームズスタジアムではVISSELの皆様、VISSELファンの皆様といっしょに沢山の時間を過ごさせていただきました。 そんなホームズくんも"HOME'S"と共に新たな挑戦、成長をしていく時期に入っていきました。私が入社した2011年の事でした。 この時、HOME'Sは賃貸・売買・分譲マンション・分譲一戸建てなどそれぞれの物件によって別々のサイトに分かれて、それぞれのお客様に最適なサイトづくりをする形から、全ての物件を1サイトに統合、賃貸も購入も比較しながらまとめて探せるサイトへと舵を切る段階にありました。 それに伴い、ブランドも1つになることを目指し、整理する流れに向かっていました。   どう変えるか 大きなサイトの中に散らばったホームズくんを差し替える作業はかなり手間がかかりますが、サイトの統合を考えると、ロゴの色との統一性の無さなどから見ても、何も変えないという方向性はありませんでした。 色を変える。形を変える。キャラクターをそもそも変える。 変える方向性は無限大にありました。 しかし、今まで愛してくれた人を大切にしようという想いから”ホームズくんがホームズくんであるまま”に今まで以上に愛されるように、かつHOME'Sのキャラクターだと認識しやすくなるように変えようという方向に議論は終着しました。 (加えて弊社は内製ですから、社内でさらに使いやすくという点もここには盛り込まれることになります。)   どうやって変えていくか 「ホームズくんがホームズくんであるまま」という制約をクリアするために、まずは”どこまでがホームズくんか”を定めることをしていきました。60体近くのキャラクターのラフを制作し、既存のホームズくんから形が遠いものを順番にずらっと並べ、社内の制作職で集まり“どこまでだったらホームズくんだと見えるか”意見を聞きました。     頭身が変わりすぎると、ちがう人物に見える、目に白目を描くのも違う。変更の幅は狭まっていきましたが、この段階でホームズくんらしさはどこにあるのかというのも見えてきた気がします。 ここからは、HOME'Sのカラーで衣装の配色や、帽子の形、虫眼鏡のサイズ、目鼻のサイズ・位置のバランスなどこまかなところを調整していきました。     この段階の制作には当時の広報宣伝の担当者や社内の制作職の方々にもたくさんご協力いただきましたし、弊社代表にも毎週のように時間をもらいました。時間はかかりましたが、ただキャラクターが変わる、新しくなるだけでは得られない、つくり上げる、育てるという意識・愛着がこの時間で作り上げられたように思います。     また、見た目という部分以外にこだわった点もありました。使いやすさです。 ネクストは内製で、このキャラクターを数十人の社員が使います。これまでのキャラクターでは、データの作り方の問題で、腕を動かしたり、表情を変えたりするのも一苦労でした。また、縦長のとんがり帽子もファーストビューや、スマホのアイコンを考えるとスペース的に無駄にする部分も多い上に、枠内に収めようとすると顔が小さくなってしまったりと、こちらも大きな問題でした。 そこで、まず誰でもポーズが変えられるようにデータの作りを修正し、簡単なポーズの改変であればOKということにしました。使用においての規制を多少緩めることで、社内でもキャラクターを積極的に使用することが増えました。 次に、高さの問題は、顔だけを正方形に収めた時に、アイデンティティである、虫眼鏡、帽子、顔が大きくうつることに重点を置き、デザインをしました。想定していたアイコンの使用に加え、Tシャツのワンポイントなどこちらも使用の幅が広がり、良い結果になったと思っています。   最後の決め手 見た目についても複数パターンを制作し、使い勝手も考慮し、それらの調整を繰り返す中で、最終的に3体に絞られました。  ぱっと見、どれがどう違うのかわからなくなるくらい、微妙な表情の違いしかありません。その中から1体を選ぶために、3体の性格をストーリー化して、決めていきました。 ”このコはありがとうと言われた時にどんなふうに反応するだろう” 一人は恥ずかしそうに頬を赤らめそう。一人はニカッと笑いそう。一人は照れながらへへっと笑いそう。 そんな三人の性格と顔立ちを見て、これから一緒に働き、育てていく仲間を決めました。それがこのホームズくんに変わるまでの道のりです。   まだまだ見てくれている人には伝えきれていない部分ですが、これからもっとこのコがHOME'Sの顔として、多くの人の住まい探しのために働き、愛されるキャラクターになっていくよう、会社全体として育て、伝えていきたいと思います。    
先週の金曜日まで開催されていたWWDC2015。 ネクストからは2名が参加し、HOME'SのiOSアプリチームから1名、私、成田が参加してきました! 個人的には2回目ですが、HOME'Sアプリチームからは初の参戦。HOME'SのiOSアプリチームを背負って行って来たのでレポートをお届けします! 忘れずに前日登録に行こう! 現地へは日本時間の6月6日の午後の便で出発しました。ロサンゼルス経由の便でサンフランシスコに向かいました。 今年のWWDCは6月8日(月)~6月12日(月)の開催でした。 ただし、前日、6月9日(日)にレジストレーションを行わなければならないため、余裕をもって前日にサンフランシスコ入りしました。 WWDCは2013年に参加したことがあったため、そこまで緊張はしていませんでした。 サンフランシスコ国際空港からはBART(Bay Area Rapid Transit)に乗ってサンフランシスコ市街へと移動します。 時間に余裕を持って予約していたホテルに行ってみたらなんとオーバーブッキング! しかも「とりあえず明日になったら誰か追い出すから明日また来てくれ」とか言われて追い払われてしまい 泊まるホテルがない緊急事態に! 途方に暮れながら市内を歩き回りながらホテルを探し、なんとかかんとか一泊できるホテルを見つけ出し野宿は避けることができました(写真は途方に暮れながら撮影した有名なサンフランシスコのケーブルカーです)。 (さらっと書いたけど、この時は本当に途方に暮れていました。。。) 翌朝、6月7日(日)は早めに起床し、当初泊まる予定だったホテルに移動、なんとか終日までホテルを押さえることができて安心してWWDCの会場へレジストレーションに向かいました。 会場である Moscone Westの向かいのビルには今年のWWDCの看板がドカーンと飾られていました。すごくカラフル!今年のテーマは"The epicenter of change."でした。 この外観、ネットニュースなどで見覚えがある方もいらっしゃるのではないでしょうか。 会場内に入るとすでにたくさんのデベロッパーたちが到着していました。 登録にはWWDCのチケット、加えてパスポートが必要になります。 登録時にはバッジが渡されます。命、パスポートの次に大事なのが、このWWDCバッジ。 なくすと再発行してもらえません。 これがないと会場には入れません。 会場内ではバッジなしで入ろうとする人がいないか屈強なガードマンが目を光らせています。 バッジと一緒に渡されるのがジャケット。登録時にサイズを聞かれます(試着できます)。 今年はジャケットの文字に使われているフォントがApple Watchで使われているSan Franciscoになっていました。 サイズ表記がSwiftで書かれているところが、開発者会議らしくていいですね 笑 登録後はアップル、Google、Facebookなどを観光しに行ってきました。 夜はWWDCに参加する日本人が集まって前夜祭が開かれたので、そちらへ参加してきました。 たくさんの方が参加されてとても楽しかったです! Keynoteを良い席で見よう! 前夜祭が終わったのが午後10時ごろ。4時間ほどホテルで仮眠を取ってKeynoteを良い席で見るために深夜3時から並びに行きました。一人だと寂しいので前夜祭で知り合った方々と一緒に並ばせていただきました。 並び始めて4時間経った7時ごろになって会場内に入ることができました。 見渡す限りの人、人、人。 この見渡す限りの人がみんなiOSデベロッパーってすごいですよね。。。 会場内には軽食が用意されており、外にいるよりもだいぶリラックスして待つことができました。とは言え、この段階でかなり疲れていました。 こちらは通称"オダワラ"。あのスティーブ・ジョブズも愛したというジュースです。本当においしくてWWDC期間中ずっと飲んでいました。 9時半近くになってようやく会場内に。なかなか良い位置につけられました! Keynoteの内容については、他のメディアさんでも取り上げられているので省略させていただきますが、個人的な印象としては、ここまでkeynoteがメディア向けのイベントになるとは思いませんでした。 HOME'SのアプリはApple Watchに対応 しているので、watch OS 2の発表が個人的には熱かったです! この日は現地のミートアップに参加しようと思ったものの、眠くてしょうがなかったのでご飯を食べてホテルに帰りました 笑 ラボに行こう! Keynoteを見るためにかなり体力を消耗した感じがあったのですが、デベロッパーにとってはここからが本番。 Keynoteで明らかになった新しいサービスや技術についての説明が残りの4日間のセッションで詳細に説明され、その中で疑問に思ったことや分からないことを直接アップルのエンジニアに質問することができるのがWWDCの本当の価値です。 セッションは次の日にはビデオで見られるようになっていますし、今年から一部のセッションはライブストリーミングするようになりました。となると、やっぱり醍醐味はラボ。 実際、アップルのエンジニアの方に聞いたら「我々にとってもデベロッパーの方から直接フィードバックがもらえる貴重な機会」とおっしゃっていました。 僕はあまり英語が得意ではないのですが、コードを書いたり図を用意したりして準備して行けばある程度なんとかなるものです(ごめんなさい、英語勉強して次行ったらもっと実のあるものにします、ごめんなさい)。 ラボに行こう! 現地で開催されるイベントに行こう! WWDC期間中は色々な場所でミートアップが開かれています。 WWDC Parties 2015 というサイトで期間中に開催されるイベントが閲覧できるので行きたい場所に行ってみると面白いと思います。 "James Dempsey and the Breakpoints LIVE near WWDC 2015"というライブに行ってきました。 Jamesさんは元Appleのエンジニアで、iOSの開発などをされていたらしいです。なので歌もプログラミングやiOSに関係するものが多かったです。 今年は昨年発表されたSwiftの曲が新曲として歌われることが期待されており、伴奏が始まったのですが。。。 "SourceKit Service Crashed"というSwiftが出たばかりのころから触っている人たちにはおなじみのクラッシュが発生して曲が終わってしまいました。 アメリカンジョークって感じでした 笑 イベントは毎日どこかしらで開催されているので、顔を出してみると面白いですよ。 現地の会社を訪問しよう! サンフランシスコには多くのIT系企業がありますが、会社訪問してみると良いと思います。 今回は次世代モバイルデータベースRealmを開発しているオフィスにお邪魔してきました。 とても広かったです! お昼ご飯までいただいてしまいました! なんと、さらにはTシャツまで! 現地のスタートアップの空気を感じられ、とても貴重な体験になりました。こういった経験も現地でしかできないので、機会があれば積極的に行くようにしたいですね。 Realmさん、ありがとうございました! Tech Houseに転がり込む さてホテルに泊まることができなくて途方にくれた件ですが、結局最初に予約していたホテルはいろいろと問題がありました(書くと長くなるので書きません)。 「いや~サバイバルしててカッコいいですよね~」とか言ってくださる方もいらしたのですが、心の中では 「こんなことしに来たんじゃない!」 という気持ちがずっとありました。 「やはりカンファレンスに集中するためにホテルを出ていくしかない!」そう強く心に決めました。 そんな時、知り合いの日本人iOSエンジニアの方が「Tech Houseというシェアハウスに泊まっているんですけど一緒にどうですか?」と声をかけてくださったのでお言葉に甘えることにしました。 サンフランシスコの日本人スタートアップ向けシェアハウス - Tech House管理人Blog hirohrm.hatenablog.com 前のホテル関係なしに快適な空間で、次回行けることになったら最初からここに泊まりたいな~と思うくらいでした! 夜はリビングに集まってみんなもくもくとコードを書いている感じで、WWDCで新しい技術が発表されていろいろと試してみたいエンジニアからしてみると最高の環境でした! Tech Houseさんありがとうございました!今度は最初から泊めてください! 自分で航空チケットやホテルを予約したのですが、いや~、まともなホテルに泊まっていたらこのような経験は絶対にできなかったと思います。 そういう意味で 本当にラッキーだったな と思います。...ん? まとめ さて、ここに書ききれないことが実はまだまだたくさんあります! それくらい本当に濃い一週間を過ごすことができるのがWWDC。 先日も書きました が、そんなWWDCの報告会をネクストで開催します! WWDC2015報告共有会@ネクスト (2015/06/23 19:00〜) connpass.com 懇親会も予定しており、現地で買ってきたプレゼントの抽選会も予定しています!ぜひぜひお越しください!
こんにちは。社内で最もカタチから入るWebデザイナー、アズマです。 最近は会社にコーヒーミルを持ち込んで手挽きコーヒーを淹れていますが、味の違いは完全にわかりません。意味ない。 皆さん、デザインしてますか? デザインはとても楽しいですね。 書き出したPNG画像を圧縮している時間を除けば。 画像圧縮にかける時間を圧縮したい! ブラウザやアプリで表示する速さを少しでも上げてサービスの価値を高めるためには、 デザインしたファイルからPNGファイルを書き出すときに 圧縮 して軽量化する必要がありますね。 圧縮率の高さと パンダのキモさ に定評のある TinyPNG などのWebサービスを使っている方も多いのではないでしょうか。 ……が、しかし、この作業、全くクリエイティブじゃないですよね。 画像を何度も修正したり大量に書き出すたびに、 「TinyPNGにアクセスして画像をアップロードして一つ一つダウンロードして…」 というの繰り返してると、だんだんと心が腐ってきます。 最初は「キモカワ…?」ぐらいだったパンダも次第に 「キモ…」 としか思えなくなってくるというものです。 pngquantで瞬時に圧縮しよう! そんな、 人の心を失いつつある あなたに朗報です。 実は、TinyPNGの中で動いているのは pngquant (ピングクォント)という画像圧縮プログラムです。 pngquantはダウンロードして手元で実行できるので、 一日何度もTinyPNGのお世話になるぐらいだったらこっちでやっちゃいましょう。 しかも、Macの場合は フォルダアクション と連携することで、 「フォルダに保存した瞬間に自動で即圧縮」 という必殺コンボを繰り出すことができます。 つまり 「圧縮する」と心の中で思ったなら、その時スデに行動は終わっている ということです。 すごいですね。 pngquantを動かすのには ターミナル (いわゆる黒い画面)が必要ですが、 そんなに複雑な操作は必要ないので安心してください。 インストール方法 今回はMacの場合を想定しています。 まずは早速、ターミナルを起動しましょう。 Homebrew が入っていれば1行でインストールできます。 Homebrewが入っていない方はまず、これをターミナルにコピペしてインストールしましょう。 ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" そして以下の1行を同じようにコピペしてあげるとpngquantがインストールできます。 brew install pngquant 一瞬! 使い方 まずはターミナルで、画像が入っているフォルダのパスまで移動しましょう。 $ cd 【画像のフォルダパス】 ちなみに画像のフォルダパスは、ターミナルにフォルダをドラッグ&ドロップすると瞬時に入力できます。便利! 早速圧縮してみましょう。一番基本のコマンドはこれです。 $ pngquant 【ファイル名】 するとこれが… このように。 やったー!増えたー!! 後ろに-fs8とついたものが、圧縮されたほうのファイルです。 サイズも33KBから7KBに、TinyPNGと遜色ないレベルで圧縮されていますね。 圧縮したファイルの名前をいちいち変えるのが面倒だ、 ええい上書き保存してしまえ!という方はこちらのコマンド。 
$ pngquant --ext .png --force 【ファイル名】 これで名前を変える手間も省けますね。 "--ext"は出力ファイル名を指定するオプションで、この後ろに ".png"を入力することで 「大将、同じファイル名で出力しとくれよ!」 と注文できます。 "--force"は同名ファイルが存在する場合に、 「大将、細けぇことはいいんだ、上書きしちゃってくれよ!」 と注文するオプションです。 このように、"pngquant"とファイル名の間に寿司屋のようにいろいろなオプションを追加することで、自分好みの設定をすることができます。 たくさんの画像をいっぺんに圧縮したい場合はこちらのコマンド。 $ pngquant --ext .png --force *.png これで、フォルダ内の全てのPNG画像を一瞬で圧縮することが出来ます。マーベラス! 他にも圧縮率やスピードなどを指定するオプションもありますので、詳しくは マニュアル を。 「フォルダアクション」に設定してさらに便利に とはいえ普段ターミナルを使わない方だと、 圧縮するたびにターミナルを開いてコマンドを打つのも面倒かもしれません。 Macのフォルダアクションを設定して、 「圧縮用フォルダに放り込んだら勝手に圧縮」 できるようにしちゃいましょう。お手軽! まずは圧縮したい画像を放り込むための適当なフォルダを作りましょう。 次にフォルダアクションを作るために、Automatorを起動しましょう。 選択肢の中から「フォルダアクション」を選びます。 右上の「フォルダを選択」となっているプルダウンで「その他...」を選び、さっき作ったフォルダを選択します。 「シェルスクリプトを実行」のアクションを追加し、おもむろにフォームへ以下の1行をコピペしましょう。 /usr/local/bin/pngquant --ext .png --force "$@" ちなみにこちらは自動で上書きしてしまうコマンドなので、 それが困る方は"--ext .png --force"の部分を抜いてください。 また、"/usr/local/bin/"の部分は、Homebrewでインストールした場合のpngquantが置いてあるパスです。 他の方法でインストールされた方は、その場所を指定してあげてください。 これで適当な名前をつけて保存してあげればOK! 作ったフォルダに 自動圧縮機能 がつきました。 試しにpngファイルを放り込んであげれば、メニューバーに歯車が現れ、一瞬の後に圧縮されるはずです。 一度作ってしまえば、あとは他のフォルダに適用するのも簡単です。 フォルダを右クリックし、「サービス」>「フォルダアクション設定...」を選んで、 たった今作ったフォルダアクションを関連づけてあげましょう。これだけです。 まとめ いかがでしたでしょうか? 今回はpngquantとAutomatorで画像圧縮の手間をなくす方法を紹介しました。 デザイナーも黒い画面でちょっとしたことができれば作業効率が上がりますね。 人間がやらなくていい作業はどんどん効率化して、 空いた時間で思う存分 ビールを飲 クリエイティブな作業に集中しましょう。 それではまた会う日まで。アディダス!
Apple原理主義者の大坪です。生活に疲れたエンジニアが何を言い出したかと言えば、Tony FadellがTED2015で行った"The first secret of design is ... noticing"というプレゼンテーションですよ。 彼は過去にiPodを発案し、担当シニアヴァイスプレジデントとなりApple退社後にNestを創業し、NestがGoogleに買収された後にはGoogle Xを卒業したGoogle Glassの監督をしているわけです。でもってその彼が語るデザインの一番重要な秘訣:"The first secret of design"とは 「Notice:気がつく」 なんだそれは,というわけで彼が話した内容を踏まえながら考えたことをつらつらと。 インタラクションシステムの開発に携わっていると、「人間の学習能力というのは異常」と感じることが多い。少し前のことですが、ポケベルが普及していた頃、ものすごいスピードで公衆電話のボタンを叩いてメッセージを送る若者がたくさんいたとのこと。いや、公衆電話のボタンは文字入力装置として最適とは言えず、より効率のよい入力方式がある、と言おうがなんだろうがとにかく使いこなしてしまうわけです。 こうした学習能力、適応能力があるので人間はいろいろな問題に満ちている日常を心穏やかに過ごすことができる。最初「あれ?」と思ったことでも3回も繰り返せば慣れてなんとも思わなくなる。学習能力万歳!と言いたいところですがこれには問題もある。 「こういうものだ」 と思い込んでしまうと問題の存在すら忘れてしまい、結果としてその問題が解決されることもない。というわけでFadell氏はNotice,そうした問題に気がつくことがデザインで一番重要なことだと説きます。この指摘をしたのは彼が史上初というわけではなく例えばこういう言葉もある。 天才とは、その人だけに見える新事実を見ることのできる人ではない。 誰もが見ていながらも重要性に気がつかなかった旧事実に、気づく人のことである。 引用元:塩野七生[しおの・ななみ]『ローマ人の物語〈2〉─ハンニバル戦記』 そうした「気づき」はコメディアンの仕事だと彼は言います。普段は忘れている「日常生活に潜む異常性」を大げさにを再現されると 「あるある」 と共感しつつ笑ってしまう。しかしデザイナー、イノベーター、アントレプレナーは問題に気がつくだけではなくそれを解決する方法を考え形にしなくてはならない。 1902年、メリーアンダーソンという女性が雪の日に車に乗っていたときのことです。彼女は運転手が前方のドアを開け窓ガラスについた雪を掻き落としつつ運転しているのに気がつきました。当時の人はみな「そういうものだ」と思っていたのですが、彼女はこんなのは馬鹿げている。もっとましな方法があるはずだと考えました。その結果近代的なワイパーを発明したわけです。 Fedell氏があげたもう一つの例は、彼がAppleで働いていた時のこと。Steve Jobsは彼らに「製品、サービスをビギナーの目で見ろ」と言い続けました。その結果として生まれた「改善」の例はいまでは当たり前になった 「電化製品を買ったら最初からある程度充電されていること」 これが「常識」ではなかった頃、ワクワクしながら新製品を買ったユーザは「最初の充電」の間指を加えて待たされていました。「そんなのはおかしい」とSteve Jobsはフルに充電された製品を出荷するようにしたとのこと。 ではどのようにすれば「誰の目の前にもありながら、誰も気がついていない問題に気がつく」ことができるのか?Fedell氏は以下の三つをあげます。 Look Broader:問題を少し離れて広い範囲で考える Look Closer:細かいところにこだわる Think Younger:子供のような目で問題を見る 彼はそれぞれの項目について例をあげていますが、ここではそれらについて述べません。なぜかというとそれらの例を聞いても 「道は遠いな」 と感じるから。特に最後のポイントについてそう考える。振り返ってみれば子供の 「どうしてこうなっているの?」 という疑問から気がつかされることは確かにあります。しかしほとんどの場合 「あのね。長年にわたる観測の結果どうもエネルギーは保存するということがわかっていてね」 と説明しておしまいになってしまう。「疲れたー。歩きたくなーい」と問題を指摘するのはいいが、解決策がドラえもんのひみつ道具やホグワーツで習う魔法では、よい大人のデザイナー/イノベーター/アントレプレナーとは言えない。 ではどうすればよいのか。 疲れたサラリーマンに何が言えるというのでしょう?その代わりなぜ「問題に気がつくこと」がそれほど難しいかについて私なりの例をあげたいと思います。 ガラケー全盛時代。「日本のケータイは完成されたインターネットマシンだ」「今のケータイはやりつくされている」という言説を何度も目にしました。iPhoneが発表された後でさえこういう意見は多かったのです。 「慣れたもの」があるところに「慣れないもの」が割り込むわけですから、「慣れたもの」をさらに良くする方向にすべきですし、「慣れないもの」をすんなり受け入れられるようにするのが筋でしょう。 斬新さだけで入ってきたiPhoneはそれができてないわけで。今やってる最中かもしれませんけどね。 それにですよ。 iPhoneに因らず、購入者に耳を傾けるべきですね。 [中略] 携帯もってて、iPodもってて、その2つを持つことをなんのためらいもなく受け入れている人にしてみれば、iPhone買うという選択肢はありませんよ。 ゲームやインターネットしない人に、いくら iPhone勧めても、興味を示しませんよ。 引用元: iPhoneが売れていない、という印象を植え付けようとするどこかの誰かさん、にもの申す:Speed Feed:オルタナティブ・ブログ いまから振り返って言えることですが、このコメントは 「新しい製品、サービスを考える際に”ユーザの意見を聞く”のは間違いだ」 という主張の裏付けになっている。つまり「普通のユーザ」は現状に慣れきっており、見えないがちゃんと存在している大きな問題に気がつくことはない。 「iモードケータイすごいっす!完成されてるっす!」 と思っていたわけです。しかしiPhoneを開発した人たちはそうではなかった。ジョニー・アイブはこう述べています。 all of us working on the first iPhone were driven by an absolute disdain for the cellphones we were using at the time. 引用元: The man behind the Apple Watch - Technology - How To Spend It 適当な訳:最初のiPhone開発に携わっていた人間は全員当時の携帯電話を徹底的に嫌悪していました。 いや、それは彼らが日本のiモードを使っていなかったからだ、とかそういうレベルの問題ではないように思えます。"Absolute Disdain:徹底的な嫌悪"という言葉は。 人に見えていない問題に気がつかなくては、画期的な製品、サービスを作ることはできない。 *1 では、 「携帯とiPodをなんのためらいもなく受け入れいている人」 と 「携帯電話を嫌悪する人」 この二つの立場を隔てているものは何なのか。Think Youngerだけが答えとは思えない、と放り出したところで今回はおしまいです。 *1 : 「ほとんどの人が認識していない問題」について述べたところで定義により 「そんなことを言っている前にやることがたくさんあるだろう」(「見えている」小さな問題はたくさんあるから) と潰されるだけ、という切実な問題もありますがここでは触れません。
こんにちは。先月からiOSチームにジョインした塙です! WWDC2015ではiOS9やwatchOS2の発表、SwiftがVer.2.0になりOSS化など、様々なニュースがありました!そんな熱い情報を、WWDC2015に参加した弊社エンジニア2名が発表させていただきます! 以下、概要です。 概要 日時 2015/06/23(火) 19:00 – 22:00 場所 株式会社ネクスト 東京都港区港南2-3-13 品川フロントビル3F エレベーターにて3Fまで登っていただきますと、左手に受付スペースがございます。 参加費 無料です! 内容 弊社エンジニアからの現地報告 LT枠で申し込み頂いた方のLT 懇親会(軽食をご用意いたします) 定員 LT枠:4名(10分前後のLTの準備をお願いいたします) オーディエンス枠:50名(尚弊社のエンジニアも別途参加させていただきます) 注意事項 Apple Developerアカウントを持っている方に限定させていただきます。 Appleとの契約上守秘義務の課せられている情報等については、個人の責任において管理をお願いします。 なお上記に伴いまして、入室時に誓約書への記載をお願いいたします。 Wifi、電源は準備しておりますが限りがあり、回線品質の保証は出来ませんのでよろしくお願いします。 詳細&参加申し込み WWDC2015報告共有会@ネクスト (2015/06/23 19:00〜) connpass.com 皆様のご参加を心からお待ちしております!
こんにちは、リッテルラボラトリーの清田です。 ネクストが開催協賛 させていただいた 2015年度人工知能学会全国大会 (JSAI 2015)に4日間参加してきました。 ここ数年はほぼ毎回参加していますが、年々参加者数・発表数が増えているだけでなく、 オーガナイズドセッション という仕掛けによって、参加者間での創発も増えているという感じがしています。 なかでも、Deep learningのセッションは、会場の外まで立ち見の参加者がいるほどの盛況でした。 ネクストのブースでは、 GRID VRICK を展示し、多数の方々にお立ち寄りいただきました。遊んでいただいた方々、貴重なご意見をお寄せいただいた方々ありがとうございました! また、 オーガナイズドセッション「ヒューマンコンピュテーションとクラウドソーシング」 では、電気通信大学栗原研究室との共同研究の成果を発表しました。 JSAI2015 ツイートタイムラインへの階層的クラウドソーシングの適用による住まい探しユーザの背景ニーズ理解 from Yoji Kiyota セッション内の他の方々の発表と異なり、クラウドソーシングそのものの手法というよりは、産業的な用途にフォーカスした内容でしたが、参加者の方々からたくさんの建設的なフィードバックをいただくことができました。 函館では、多くのアカデミアの方々と意見交換させていただきましたが、本質的な産学連携とは何かということについて、認識を新たにするよい機会となりました。 人工知能学会誌で担当させていただいた「イノベーションとAI研究」特集 でも、産学連携は大きなトピックでした。 アカデミアと産業界の人々がもっと連携して価値を創出するために、私たちがいまできることは何かを踏まえて、新たな取り組みを始めていきたいと思います!
こんにちは、上津原です。 またArduino関連です。以前はUnityを使ってそれぞれを動かしてみましたが、JSで動かせるんだぜ、ということを聞きやってみることにしました。 johnny-fiveって? johnny-five www.npmjs.com node.jsの説明は割愛するとして、johnny-fiveってなんじゃ?という話ですが、Firmataを利用して、JSからarduinoを動かすことができるワンダフルなライブラリです。 npm install johnny-five とやればインストールできます。 書き方はとってもシンプルで、 var five = require( "johnny-five" ); var board = new five.Board(); board.on( "ready" , function () { // Create an Led on pin 13 var led = new five.Led(13); // Blink every half second led.blink(500); } ); (johnny-fiveのページから抜粋) こんな風に書くと、これだけでLチカができるようになります。とっても簡単です。 socket.ioもくっつけてみよう で、ただちかちかさせるだけじゃっちょっとつまらないので、socket.ioをつないで、特定の文字列を送るとLEDが光るようにしてみました。 www.youtube.com コードは以下です。(node.jsは超初心者なんで変な書き方してたらごめんなさい。一応動きます。) npm install socket.io をまずやって、arduinoにStandard Firmataを入れておきます。 server.js var five = require( "johnny-five" ); var board = new five.Board( { port: "COM4" } ); board.on( "ready" , function () { // SERVER ////////////////////////////// var html = require( 'fs' ).readFileSync( 'index.html' ); var http = require( 'http' ).createServer( function (req, res) { res.writeHead(200, { 'Content-Type' : 'text/html' } ); res.end(html); } ); // SOCKET IO /////////////////////////// var io = require( 'socket.io' )(http); http.listen(3000); var led = new five.Led(6); io.on( 'connection' , function (socket) { socket.on( 'msg' , function (data) { console.log(data); if (data == "on" ) { led.on(); } else if (data == "off" ) { led.off(); } else { io.emit( 'msg' , data); } } ); } ); } ); index.html <!doctype html> < html > < head > < meta charset = "utf-8" > < title > arduino-socket.io </ title > < script src = "/socket.io/socket.io.js" ></ script > < script src = "//code.jquery.com/jquery-2.1.3.min.js" ></ script > </ head > < body > < form > < input id = "message" > </ form > <!-- SCRIPT --> < script type = "text/javascript" > // SocketIO///////////////////////////////////// var socket = io () ; // フォームに文字列を入れたときの動作 $ ( 'form' ) .submit ( function () { socket.emit ( 'msg' , $ ( '#message' ) .val ()) ; $ ( '#message' ) .val ( '' ) ; return false ; } ) ; </ script > </ body > </ html > こんな感じでとりあえずフロントからarduinoを操作できちゃったりします。簡単です。 どんなふうに使えるか? こうすることで何ができるかっていうと、サービスを作って、ブラウザをキオスクモードにしといて、特定の操作はハードボタンを作ってあげる、とかそういう事ができるわけですね。 マウスの操作とか、タッチパネルとかよくわかんない人の為だったり、もしくはゲームの為だったり、様々なコントローラとして活用ができたりもしますよね。 気軽に動かせるので想像の幅が広がりますよね。 そんなこんなで、とりあえず動かしてみたの回でした。それではまたー。
こんにちは、HOME'Sアプリのデザイナーをしている、こいずみです。 主にiOSのアプリを担当しています。 Webやアプリのデザイナーの方なら必ずやる、パーツ書出し。 この作業って地味に大変ですよね。 とくにスマートデバイスは年を追うごとに様々な解像度のデバイスが発表され、それぞれに合わせたパーツの書出し工数はどんどん膨らんでいくばかりです。 そこで、今回はPhotoshopの便利な機能 「Generator」 を使って、iOSの3種類の解像度をいっぺんに書出す方法をご紹介します。   Generatorって? Generatorとは、PhotoshopがCC 14.1から搭載された機能です。今まではWebやアプリ用の書出しと言えば「Web用に保存」だったのですが、Generatorを使うことで、より早く効率的に画像を書出すことができるようになりました。使い方に関しては、結構前から色々なブログにも載ってますがこちらでも一応触れようと思います。   1 ,PSDファイルを用意    2 ,書出したいレイヤーや、フォルダに「hoge.png」のように拡張子を追加。 (pngのほかに、gifやjpegでもOK)   3 ,[ファイル]→[生成]→[画像アセット]にチェックを入れます。   4 ,PSDファイルと同じ階層に、「◯◯-assets」フォルダが自動生成され、その中に「button.png」と「card_homeskun.png」が自動で書出されています。   @1x、@2x、@3xを一瞬で書出したい。 ここからが本題です。 上記の機能を応用して、iPhone用の3種類の解像度の画像を一瞬で書出すことができます。 先ほどレイヤーやフォルダに付けた「button.png」や「card_homeskun.png」に「50%」や「@3x」などを付けて、書出しサイズを変更します。 私の場合は、もともとのファイルを@2xサイズで作っているので「50% button.png, button@2x.png, 150% button@3x.png」と付けて生成します。 そうすると先ほどのように、自動でサイズ調整された画像がassetsフォルダ内に書出されます。 やってみるとわかるのですが、境界線の太さや、スマートオブジェクトも綺麗にサイズ変更してくれています。超べんりです。 ただし、座標に端数があったり、スマートオブジェクトじゃないものがあるとボケてしまうこともあるので注意です。   さらに、このフォルダ名をつけるのも、めんどうなうえに手入力してると気づかないうちに間違えたりしていて、Generatorさんが怒って「errors.txt」をassets内に吐き出してしまうので、これも自動化。   この自動化に関しては、当初必死に手入力をして、全身から煙が出始めた私たちデザイナーを見かねて、エンジニアがゴニョゴニョしてくれました。 ざっくり言うと、 「50%」 や 「@2x」 や 「.png」 がレイヤー名やフォルダ名につくようにスクリプトを組んでもらってPhotoshopに組み込みました。 さらにそのスクリプトにショートカットを割り当てたので、今ではレイヤー名 「button」 とつけて F5 を押せば、あっという間に 「50% button.png, button@2x.png, 150% button@3x.png」 となってくれます。 エンジニアさん本当にありがとう!   まとめ 書出しの時間を減らすことで、より必要なところに時間をさくことができますし、個人的には、これらを使うことで作業効率がかなり上がった気がします。 コーディングメインの制作さんも、もらったデザインファイルからパーツを書出すときにべんりと思います。 ぜひ活用してみてください!
はじめまして、 HOME'S アプリのデザインを担当している、こばやしです。   2015/06/02に「主催:株式会社グッドパッチ、Sansan株式会社」による、「開発者とデザイナーのモバイルアプリ開発をテーマに両社よりエンジニア、デザイナーが登壇し、現場で巻き起こるぶっちゃけ話を繰り広げる勉強会」に参加してきました。 本当は「エンジニアとデザイナーが仲良くなりたいけどなれないジレンマ?(笑)」というタイトルを想定していたようですが、カッティングエッジだったのでやめたようです。(笑)   その中で、アプリデザイナー共通の課題があり、それに対する考え方・取り組みが参考になったのでご紹介します!   コミュニケーション 今回の勉強会のキーワードです。受託・発注・自社などプロジェクトへの関わり方は様々ですが、どのシーンでもコミュニケーション(共通認識)がとても大事だと捉えて、両社いろいろと工夫していました。   一緒に作る(要件定義から全員参加) 要件定義からプロジェクトメンバー全員でスタートさせることで、プロダクトイメージを一人ひとりが考えて、同じゴールを共有する。結果、実装フェーズでブレず効率的な開発に繋がる。 その際「正しいスケジュールは正直引けない」というのが両社認識しているところで、要因の1つは「アジャイル開発による各工程の遅延」によるものが多いが、その部分は「意思決定権を明確にすること」でスピードアップを図っているとのこと。   共通言語でしゃべる アプリにはiOS・Androidともにガイドラインがあり、アプリ開発に携わる人、全員の共通言語となります。ガイドラインが示す内容に対してエンジニア・デザイナー間で共通認識を持つために、「ガイドラインを一緒に読み込む勉強会」を行うことで理解を深めているとのこと。それがスピードとクオリティが伴うプロジェクトの基盤に繋がっているようです。 この議題で面白かったのが「インタラクションをどう正確に伝えるか」でした。 「オノマトペ(擬声語)」で伝えてみる。 「参考アプリ」を探して見せる。 「動画作る」ことで伝えきる。 というものでした。 HOME'Sのアプリ開発でも全く同じ手段でデザイナーからエンジニアへコミュニケーションを図っていたので「どこも一緒なんだ!」という共感と「伝えきる」という努力を惜しまないというのは、デザイナーの本質なんだなと思いました。   おなじ場所でつくる アプリはweb以上に「インタラクション」が重要で、それによる体験の満足度やわくわく感を訴求することがとても大切。なので、インタラクションの細かいニュアンスを伝え、実装に反映するために納得いくまでトライ&エラー。そのためたくさんのコミュニケーションが必要なので、席は隣に構えて、やり取りの速度を上げ、ロスを最小限におさえることでクオリティを高めているとのこと。 委託・外注の際には、直接伺い密に連携をとるそうです。   やさしい言葉遣い 「エンジニアは言葉が鋭い」良くいえば的を得ていてシンプル。ですが、伝え方が強いと伝わる内容を誤解してしまうことを知ってほしい。   まとめ 「コミュニケーションが大事」 一緒に作る(要件定義から、メンバー全員参加) 共通言語でしゃべる おなじ場所でつくる やさしい言葉遣い お互いの「熱意とおもいやり」が大事ですね。 結果、 効率よく開発できる エンジニアは実装、デザイナーはUIを考えるためにたくさん時間を使える クオリティが上がる 価値をユーザーに届けられ、ユーザーからフィードバックをもらえる モノづくりとしてモチベーションが上がる 素敵なサイクルが回っていきます!   ネクストでも「コミュニケーション」を大事にしています。それに「個人の成長」もとても重要と捉えているので、プロジェクトを通じて両者がしっかり獲得できる手段を模索しながらトライ&エラーを繰り返し、優れたサービスをいち早くユーザーに届けられるよう努めます!
こんにちは、HOME'Sアプリのデザインを担当している、いちはらです。 InVisionは基本的に英語の情報ばかりなので、いざ退会するとき、 ちょっと困ったことがありました。 自分でやってみて苦労した所を書いておきたいと思います。   事実その1 マイページにメールの返信はこない。   当たり前なのですが、QAは英語しかないです。 読むのが面倒だったので、ページ下部のヘルプから質問をしてみました。 UIがチャットっぽいのでマイページに「何か返信がくるはずだわぁ」と、のんびり待っていたのですが。登録したメールのメーラーの方にだけ返信が来ていました。それに気がつかないで、退会が期限ぎりぎりになっていまい、焦りました…。   事実その2 有料プランは自動更新です。変更しないと「そのまま継続」されます。   プラン変更の方法は以下です。 ログインする 右上からProfileをクリック Billingをクリック Cancel Planをクリック(キャプチャではUpdate Plan、赤丸のところ) 変更したいプランを選択して完了   Cancel Planの文字はグレーアウトされていて、それがまた分かりにくかったです。 プランの適用は1年契約の場合、1年後の当日まで有効です。 例)2015/4/1にプラン変更したら2016/4/1いっぱいまで。         事実その3 アカウント削除はメールで依頼するしかない。   サポート時間内のメールの返事はとっても迅速、すぐ返事が来ました。退会の申請に対しても丁寧で、つたない英語のやりとりもちゃんと対応してくれました。よかったです。   以上です。どなたかのお役にたてますように!
こんにちは。Android衛藤です。 前回の記事 でGoogleのDesign Sprintセミナーに参加した記事を投稿しましたが、 それ以来実際にやってみる機会がなかったので、先日社内で実施してみました。 前回はクリエイターの日でAndroid Wearアプリを作りましたが、今回もクリエイターの日に参加します。 ちょうど良い機会だったので、参加メンバーと一緒にDesign Sprintを実施し、どのようなサービスを作りたいかを決定することしました。 クリエイターの日の参加レポートは別に機会として、今回はどのような内容を実践したのかを紹介したいと思います。 実施内容 ペルソナ決め ペルソナが求めている体験 / どんな価値を見いだせるか ・・・ 個人ワーク ペルソナが求めている体験 / どんな価値を見いだせるか ・・・ チームブレスト 求めている体験・機能について、各自それぞれ投票(1つになるまで) ペルソナ決め 前回のGoogleさんで行われたDesign Sprintでは、ペルソナの候補が何人かいて、それぞれ細かくその人についての設定がされていました。 今回は事前に準備されている訳ではないので、自分たちでペルソナを作るところから開始となります。 具体的には下記のようなものに決定しました。 35歳、男性 家庭持ちで、子供が二人(3歳、1歳) 今は賃貸に住んでいるが、今後購入を考えている 新しいもの好き(ミーハー) 趣味はスノボー、読書 車を持っている 引越したら犬が欲しい などなど この後、このペルソナがどんな体験を欲しているか(その体験による価値)を元にアイデアを出して行きます。 ペルソナが求める体験(個人ワーク) 以前行ったのと同様、個人ワークとしてポストイットに案をどんどん書き出して行きます。 ここでは、質より量、が大事とのことで、思いつく限り案を出しました。 ペルソナが求める体験(グループブレスト) 個人で出た案をグループ内で出しあって行きます。 ペルソナが求める体験(決選投票) まとまったら、一人2票までどの機能・体験を実現したいかを投票します。 今回の場合、上位2案が同じ票数だったため、さらにその2案に対して決戦投票を行い、最終的な案を決定しました。 今回実践しなかった内容 前回よりさらに時間がなかったため、いくつかの内容は実践しませんでしたが、今後機会があればフルでやってみたいと思います。 Technical Complexity と User Valueのプロット 本来であれば、求める機能の案出しの際に、技術的難易度(Technical Complexity)とユーザにとっての価値(User Value)を縦横軸にとり、ポストイットをプロットしていくのですが、今回は行いませんでした。 実際にはここで、実現容易度とユーザにとっての価値を比較出来ればよいかと思います。 プロトタイプ 前回は案出しを行った後に、プロトタイプ作成まで行いました。 実際には一人8個まで、そのペルソナがどのようなシーンでその機能を使っているのか、絵を基本として案を出すのですが、 今回は想定シーンが決まっていたためスキップしました。 シーンが定まっていなければこの段階で、創ろうとしている機能のイメージがしやすくなるかと思います。 ペーパーモック 最終的な個人それぞれで考えた8つのシーンを、グループで話し合い最終的に一つのシーンを決定し、その機能のペーパーモックを仕上げます。 今回は時間的な関係でこちらもスキップしました。 また、フルフルなDesign SprintではペーパーではなくPhotoshop等を使ってモックを仕上げるようです。 ここまで来るとかなり本格的なものが出来上がります。 実施してみておもったこと 今回初めて業務で実践してみましたが、感じた事をまとめてみます。 チームで共通の認識が持てる 当たり前ですが、共通のペルソナで共通の機能を元に話が進んで行くため、チーム全員が共通の認識を持つことになります。 その結果、話がそれることなく最後まで短時間で仕上げることが出来ました。短時間というところがDesign Sprintの醍醐味かと思います。 時間配分が大事 以前はファシリテートしてくれたので時間通りに行きましたが、今回は誰かが時間を計りながら話し合いにも参加していました。 そのせいか、気付けば時間を計り忘れて話が進んでしまうことがたまにありました。 次回からは気をつけたいですね。 実践する内容をその場で決めてしまった ある部分をスキップすることについて、その場で決めてしまっていたため少し流れが見えにくいように感じました。 いろいろとスキップしてしまったり、なかなかうまく行っていない所もあるかと思いますが、とりあえずは決められるところがバシッと決められてよかったです。 次回実践するときには・・・ 以下に気をつけて行いたいと思います。 事前に内容のアジェンダを作る 各アジェンダについての制限時間も一緒に設定する 時間計測する人を決める ファシリテーターを決める 今回初めて自分たちで行ったため、もしかしたら十分なDesign Sprintになっていないかもしれませんが、 学んだこと・感じたことを活かして次回につなげたいと思います。
こんにちは、リッテルラボラトリーの清田です。 2015年5月30日(土)〜6月2日(火)に北海道函館市の 公立はこだて未来大学 で開かれる 2015年度人工知能学会全国大会 (JSAI 2015)に、株式会社ネクストが開催協賛します! 人工知能学会全国大会は、近年では1000名を超える参加者を集めていて、通常セッションのほか、多数の オーガナイズドセッション が開かれ、毎年活発な議論が行われています。 人工知能は、ディープラーニング(深層学習)の発展などで社会的にも注目を集めている研究領域ですが、今回も、 コンピュータ囲碁とプロ棋士の対戦イベント や、昨年設立された 人工知能学会倫理委員会の公開討論セッション など、注目の企画が盛りだくさんです。 企業展示コーナーでは、ネクストも企業ブースを出展します。レゴブロックでお部屋づくりが体験できる GRID VRICK のほか、住まい探しのレコメンデーションに関する最新の研究成果も紹介します。 また、オーガナイズドセッションでは、 電気通信大学 栗原研究室 との共同研究の成果として、 クラウドソーシングを活用した住まい探しユーザーのニーズ理解に関する研究 についての発表も行います。 ぜひお立ち寄りください!
池田です。 今度5/28(木)にグランドオープンする 品川シーズンテラス にて開かれる「 品テクマルシェ 」というイベントに、リッテルラボラトリーの「 すごい天秤 」「 GRID VRICK 」を出展します! 弊社以外にも、この品川界隈のテクノロジー系の会社が集まって楽しいテクノロジー体験ができます。 ぜひ、皆さんぜひお越しください! ● 品テクマルシェ on the GREEN 日時:5/30(土)・5/31(日) 10:00~17:30 場所:品川シーズンテラス
こんにちは、 HOME'S アプリのデザインを担当している、いちはらです。 アプリのデザインには欠かせないモックづくりの行程ですが、 沢山の種類があって、どのツールを使うか迷うところだと思います。   今回は、モック作成ツールの「InVision」について書こうと思います。 現在ツールの導入を検討している方の参考になればと思います。    InVisionってなに? EvernoteやAirbnbなどの有名な企業が採用しているモックアップ作成ツールです。 海外のサービスなので英語です。      どうやって使うの?   使い方を、ざっくり説明すると以下の3ステップ。   画像のアップロードはドラッグ&ドロップ!  画像をリンクをつなげて、トランジション(アニメーション)をつける  URLをシェアする 以上です。複雑な操作はないので面倒くさがりの私にぴったりです。     ここが便利 このツールが便利だなと感じたのは、第三者へのモックのシェアが簡単なところです。URLをシェアするだけで、相手はログインなどの必要なくモックを確認し、コメントを残すことができます。     実際に、Windowsアプリを開発した際、外部の方と電話しながら、InVisionのコメントツールを使ってみたのですが言葉だけで説明するよりも、とても説明しやすかったです。そして、なんかずっと笑っていました。面白かったです。   こちらがそのときに開発したアプリです。 <a href="http://apps.microsoft.com/windows/ja-jp/app/homes/450e2fe4-205c-4ff0-8c68-a96bbba125c8" data-mce-href="http://apps.microsoft.com/windows/ja-jp/app/homes/450e2fe4-205c-4ff0-8c68-a96bbba125c8">Windows ストア の Windows 用 HOME'S(ホームズ) アプリ</a> apps.microsoft.com     シェアする際は、もちろんパスワード設定もできて安心ですよ。 以下の空欄にURLが表示されます。   これだけ覚えておけば大丈夫 使い方をもう少し説明します。 まずはつなげたい画像をアップロードします。ドラッグ&ドロップです。   編集したい画面をクリックすると以下のようなページ遷移します。 1、ページ下部にある、四角+ポインタのアイコンをクリック。 2、マウスが「+」に変わります、リンク範囲を設定。 3、ボックスが表示されます。遷移先+ジェスチャー+トランジションを設定して、Saveを押してください。   基本的な操作はこれだけです。   リンクを張るときにテンプレートリンクも設定できます。 webの「ホームボタン」や「ログインボタン」等、必ず同じページに遷移するリンクを設定することで、同じ作業を繰り返さなくてすみます。       ページ切り替えのジェスチャーは上記、6個。基本的なものがそろっています。 贅沢をいうとピンチインアウトがあるとうれしいです。   ページ遷移のアニメーション(トランジション)は12個。多いです! ほとんどカバーできます。 アプリ内のページ遷移はSlide、アプリ間の移動にはFlowが使えます。 ちょっとしたアプリ内のページ遷移にはDissolveがおすすめです。     細かいところですが、ステータスバーの設定ができるのが便利です。 色が自由に設定できます。HOME'Sのステータスバーはオレンジなのでそのように設定します。地味ですが、かゆいところに手が届く機能です。   他にも Sketchとの連携ができます。使いこなせばAdobe系ソフトがなくてもアプリデザインができちゃいそうですね。興味あるのですがなかなか手がつけられません…。   まとめ それぞれ好みもあると思いますので、興味のある方は、まず無料版で試してみると良いと思います。私は、最近は国内サービスのProttも使っています。いろいろ試して、快適なモックアップライフを楽しみましょう!
こんにちは、リッテルラボラトリーの上野です。 今回は、クリエイターの日の制度を利用して、OculusRiftとKinectを使った全身没入型VRコンテンツと、段ボール製HMDを使ったARコンテンツを作成しました。 さらに、作ったものをニコニコ超会議に出展してきたので、その様子も一緒に紹介します。 OculusRiftとKinectを使った全身没入型VRコンテンツ OculusRiftを装着すると、思わず画面中の物に手を伸ばしたくなったり、歩いて近づいてみたくなりますよね。 その思いを実現すべく、Kinectを使って、VR空間中で全身を動かして、(ある程度)移動できるものを作ってみました。 開発環境は、Unityを使います。 KinectのSDKはUnityに対応しており、簡単に接続することができます。 さらに、以下のような、Kinectでトラッキングした動きを人型3Dモデルに反映するアセット(Unityで扱えるライブラリのようなもの)もあるため、動かすのも簡単です。 https://www.assetstore.unity3d.com/jp/#!/content/18708 今回は、動き回れて楽しめるものとして、アクションゲームのようなものを作成しました。 Kinectのボーントラッキングで全身の動きをゲームのキャラクターに反映し、手足を動かす、しゃがむ、ジャンプするといった動作をできるようにしています。 動画の右側に見える赤い人型が、Kinectでトラッキングしている人の映像です。 その人型と同じように、ゲーム内のキャラクターが動いているのがわかると思います。 また、動画の中で出てきますが、Kinectのジェスチャトラッキングで魔法を出す機能も付けてみました。 ジェスチャトラッキングでは、腕を上下左右に振ったり手を前に押し出す動作を取ることができます。 それらに火や雷といった魔法を対応させて出している感じです。 OculusRiftを被ってプレイすると、全身が動くという没入感と、 対峙するモンスターが鼻の先まで迫る臨場感を楽しむことができます。 段ボール製HMDを使ったARコンテンツ 段ボールでできた筐体にスマホを入れることで簡単にヘッドマウントディスプレイを作れてしまう段ボール製HMDが流行っています。 種類には、Google Cardboardやハコスコ、100LUSなどがあります。 今回はこれで動く、簡単なARコンテンツの作成をしました。 スマホのカメラから取得した画像に処理を加え、ピンク色のサインペンで指し示した場所が爆発するようなARコンテンツを開発しました。 開発環境としては、基本的にUnityを用いました。サインペンの検出には、OpenCVForUnityというアセットを用い、ピンク色の物体を認識しています。 また段ボール製HMDは2画面分割する必要があるので、その表示にはCardboard SDK for Unityを使いました。 ニコニコ超会議に出展しました! 4月25日、26日に開催されたニコニコ超会議にて、これら2つのデモを展示してきました。 作品名はそれぞれ「VRアクション」と「リア充爆発ステッキ」です! 2日間展示してきましたが、体験者が途切れることはほとんどなく、多くの方に体験していただきました。 体験して下さった方、意見を下さった方、本当にありがとうございます! 写真は出展ブースの様子です。満員御礼、ありがとうございます。 紫の服装の2人は、1週間一緒に開発を進めた、中くんと石田くんです。 体験して下さった方の反応はといいますと、 VRアクションは、モンスターの迫力に驚きながらも、楽しく、または真剣にプレイしていただけてました。 リア充爆発ペンは言わずもがな…みなさん思い思いのものをARで爆発させて楽しんでいらっしゃいました。体験し終わった方の顔は、どこかすっきりしていた気がします。 今回の出展を通して、多くの方に楽しんでいただけたことは嬉しい限りです。 また、多くの課題も見つかったので、今後より良い体験を提供するために改善していけたらいいなと思っています。
池田です。 弊社で公開させて頂いている、iPhoneアプリ「HOME'S(ホームズ) アクセシビリティ対応版」に関して、お知らせがあり、記事を書かせて頂いています。 現在、「HOME'S(ホームズ) アクセシビリティ対応版」は、バージョン1.0.1を公開中ですが、旧バージョンとなる1.0.0に関しまして、弊社システムの更新に伴い、2015年6月30日以降ご利用ができなくなります。 最新版は引き続きご利用頂けますので、現在、バージョン1.0.0をご利用の方は、最新版に更新してご利用ください。 お手数をお掛けいたしますが、何卒よろしくお願いいたします。
こんにちは、リッテルラボラトリーの清田です。 まもなく発刊予定の 人工知能学会誌 2015年5月号 に、「イノベーションとAI研究」と題した特集が掲載されます。 今回、人工知能学会編集委員として特集を企画・担当させていただきました。 企業のR&Dや新規事業、ベンチャー創業、産学連携など、イノベーション創出の最前線で活躍中の方々に、8編もの記事をご寄稿いただきました。 いずれの記事も、現場での豊富な経験に基づいてご執筆いただいており、人工知能(AI)技術をイノベーション創出に生かすためのヒントが満載の内容となっています。 人工知能学会にご入会いただくことで購読できるほか、Amazon.co.jpでも購入が可能です。 特集概要のスライドを公開しておりますので、こちらもご覧ください。 人工知能学会誌 2015年5月号 特集「イノベーションとAI研究」 from Yoji Kiyota 多くの方々に読んでいただき、イノベーションへの新たな視点を得るきっかけとしていただきたいと思います。 企画の意図 この特集を企画するにあたっては、 シナジーマーケティング株式会社 R&D の谷田泰郎さん、 株式会社ホットリンク R&D の榊剛史さんらと続けてきた議論がきっかけとなりました。 弊社も含め、多くの新興IT企業がイノベーション創出を目的として研究開発(R&D)組織を設立しています。以下に、日本国内でのAI関連分野での主な取り組み事例をまとめてみました。 企業名 創業 株式公開 R&D組織設立 設立の経緯 AI関連分野での主なR&Dテーマ (株)ホットリンク 2000 2013 2004 ブログ関連技術の産学連携組織として HottoLabo 設立 ソーシャルメディア解析、コミュニティ解析 サイボウズ(株) 1997 2000 2005 連結子会社として サイボウズ・ラボ(株) を新規に設立 機械学習、自然言語処理 楽天(株) 1997 2000 2005 楽天技術研究所 を新規に設立 自然言語処理、画像認識 ヤフー(株) 1996 1997 2007 Yahoo! JAPAN研究所 を新規に設立 機械学習、自然言語処理 (株)ネクスト 1995 2006 2011 東京大学発の産学連携企業であった(株)リッテルを買収し、 リッテルラボラトリー を設立 情報推薦、ビッグデータ解析、ユーザエクスペリエンス (株)サイバーエージェント 1998 2000 2011 秋葉原ラボ を新規に設立 ビッグデータ解析、機械学習、自然言語処理 (株)リクルートホールディングズ 1960 2014 2012 (株)リクルートテクノロジーズ内に,新技術開拓部門として Advanced Technology Lab を設置 ビッグデータ解析、機械学習、自然言語処理 シナジーマーケティング(株) 1997 2007 2012 R&Dグループ を新規に設置 マーケティングおよびコミュニケーション研究 (株)ドワンゴ 1997 2003 2014 ドワンゴ人工知能研究所 を新規に設立 人工知能、特に汎用人工知能や全脳アーキテクチャに関わる研究 サイジニア(株) 2005 2014 (独立したR&D組織の設置なし) ビッグデータ解析、機械学習 学会やイベントなどで他企業のR&Dの方々と交流する機会も多々あるのですが、AIをはじめとする研究シーズをビジネス上の価値創出(イノベーション)につなげる過程で直面する課題についても、しばしば話題になります(もちろん、私たちのグループもいくつかの課題を感じています)。 それぞれの現場で課題解決のためにできることもたくさんあります。PDCAのサイクルをできる限りたくさん回したり、マネジメントを強化したり、R&D部署と他部署のコミュニケーションを活性化したり、といった取り組みはきわめて重要であり、実際に多くの現場でも実践されています。谷田さん・榊さんとも、それぞれの現場で行っている取り組みについての情報交換を続けてきました。 しかしながら、議論を続けていく中で、 「それぞれの現場での取り組み」だけでは解決できない、より大きな課題が横たわっているのではないか 、という認識も生まれてきました。成功事例の手法を実践することも確かに大事ですが、 R&Dをビジネスのプロセス全体の中でどのように位置づけるか、という哲学を浸透させない限り、実践は長続きしないのではないでしょうか? R&Dだけでなく、イノベーションにかかわる多くのステークホルダー(経営、企画、営業、エンジニア、大学・公的研究機関、コンシューマー、...)が議論を共有できる土台があって、はじめて取り組むことができる課題もあるのではないか、という一つの考えが浮かび上がってきました。 そこで、今回の特集担当の機会をいただくにあたって、イノベーションをとりまく大きな課題を浮き彫りにするために、以下の2つの軸を設定して、イノベーションの最前線で活躍中の方々に執筆いただくことで、議論を共有するための土台を創るというチャレンジを試みました。 イノベーション創出に関わる人々の「役割」 経営、企画、営業、エンジニア、アカデミアなど、それぞれの「役割」の視点から感じていらっしゃる課題を共有していただくとともに、「役割」の違いから生じる意見の食い違いを乗り越えて連携するためのヒントを探る。 シーズ主導とニーズ主導 イノベーションを生み出すために、「シーズ」と「ニーズ」という2つの要素をどのように扱ったか、ビジネスの成長プロセスのどの段階でシーズを取り入れたか、といった事例をカバーすることで、イノベーション創出プロセスを俯瞰する視点を得る。 浮かび上がってきたイノベーションの「課題」と「ヒント」 著者の方々に執筆いただいた内容をまとめていく過程で、イノベーションをとりまくさまざまな「課題」、そして課題に取り組むための「ヒント」が浮かび上がってきました。 詳しい内容は特集記事に譲りますが、ここではいくつかの興味深いポイントを紹介します。 マーケットと直結したR&D環境の必要性 サイジニア社 代表取締役の吉井様は、 Netflix Prize の事例を紹介されています。米国DVDレンタル大手のNetflixが開催したレコメンデーションアルゴリズムのコンテストは、100万ドルの賞金やプライバシー保護をめぐる問題で大いに注目を集めました。しかし、 優勝したアルゴリズムは実際にはサービスに採用されなかった ことが、 Netflixエンジニアのブログ で述べられています。 その理由として、「研究用に取り出されたデータのサブセットに対して最適化を図っても、サービス運用の過程でユーザー行動のパターンが変化すること」が挙げられています。「データの科学の」時代に研究が実世界のイノベーションにつながるためには,最初から実環境、つまりマーケットからのリアルタイムなフィードバックが得られる環境での研究開発が重要になるだろうという議論は、非常に興味深く感じました。 R&Dへの適切なフィードバックの必要性 ホットリンク社 は、2004年という非常に早い時期から HottoLabo という産学連携組織を設立し、大学の研究シーズの技術移転に取り組まれています。ホットリンク社 代表取締役の内山様は、榊さんとの共著で、過去の成功事例・非成功事例を通じて、技術移転を促進するための行動指針案を提案されています。 具体的には、「大規模データが社内ですぐに利用可能な形で蓄積されていること」とともに、「R&Dチームへの適切なフィードバックがなされること」の必要性が論じられています。非成功事例では、R&Dチームへのフィードバックが顧客および営業チームから行われていたものの、シーズへの期待が実態以上に大きく、ニーズ側が想定していた機能と実際に開発された機能に差異があったことが、一つの要因だとされています。また、成功した事例では、ニーズとシーズの両方を理解しているメンバーまたはコンサルチームが、研究シーズへの過剰な期待をかけすぎないように、ニーズをコントロールしながら適宜R&Dチームにフィードバックを行えていたという考察が示されています。 イノベーションを促進するための価値観の多様化 お茶の水女子大学の 伊藤貴之先生 は、産学連携研究や学生教育などにかかわってこられたご経験をもとに、価値観を多様化することでイノベーションを促進する、という方策をいくつか提案されています。 日本の大学の研究教育は圧倒的にシーズ重視の傾向が強いことを、海外の大学との比較に基づき論じられています。伊藤先生が在外研究されていたときに学生から見聞きしたこととして、 (企業との共同)研究プロジェクトで与えられる命題は、当初は一見学術的価値のないルーチンワークであるかのように見える。しかしその中から問題を発見して解決することは可能だし、その研究成果が就職活動時に高く評価される という意見を紹介されています。一方で、伊藤先生がかかわっておられるVisual Analyticsというニーズ指向で生まれた学術分野についての話を日本国内で紹介すると、 研究分野全体のフレームワークや実用事例に関心を持たず、機械学習やインタラクションなどの各要素技術の理論的新規性だけを執拗に質問してくる人が少なからず見受けられる という経験があったと述べられています。学術性新規性はいったんわきにおいて研究を始動し、新規性は後からついてくる、といった研究体制も認めるような価値観の多様化こそが、イノベーションの多様化につながるのではないか、という考察を示されています。 また、日本の大学には、「演習科目の充実度」「インターンシップの機会」「基礎教育の充実度」などで課題がいくつもあるものの、弱点を補うためにできる工夫についても論じられています。 - 産学連携の一環としてインターンシップをとらえる。日本のIT企業でも、正社員がメンターとして学生をきっちり指導し、学生の本質的スキルを高める業務を経験するケースを多々見聞きする。教員としても、短期的に学生が離れるのは痛いかもしれないが、学生がたくましくなって帰ってきてくれれば収穫になるはず。 - 基礎教育で得られる知識の重要性を体験させる機会を設ける。具体的には、数学的素養を必要とするプログラミング実習の実施や、IT基盤知識の重要性を実感できるインターンシップを勧めるなど。 女子大学に勤務されている先生ならではの視点として、女子学生が活躍できる環境をつくることによる価値観の多様化についても議論を展開されています。IT分野での女性の活躍は世界共通の課題認識となっており、 ACM などの主要学会でも女性の活躍に期待した多数の論文や記事が発表されているようです。伊藤先生は、女子学生を対象としたアンケートや見聞きしたことを通じて、 - 海外と比較して、高校での進路選択の際に「情報系学科への進学を薦められる機会が少ない」傾向がある - 学際的・融合的なテーマや、ニーズ指向に近い問題解決型の研究に興味を持つ傾向がある - IT分野について、報道や会話を通じて「理解」「共感」する機会が少ない といった考察を示されています。 一方で、IT企業が主催する女子学生限定のインターンシップやハッカソンなどのイベントに協力した際に感じられたことについても言及されています。参加した学生から、「いままで参加した他のセミナーよりもはるかによく理解できた」「こんなに自分のアイディアに共感してもらえる機会は初めてだった」といった感想が聞かれたことが印象的だったとのことです。こういった理解・共感を得る機会が一度あるだけでも、女子学生の自信・モチベーションを高める機会となり、独自性のあるイノベーション醸成につながる、という期待を述べられています。 おわりに 今回の特集では、非常に短い執筆期間にもかかわらず、いずれの著者の方々も非常に質の高い記事を執筆いただきました。また、単なる成功体験にとどまらず、イノベーションを生み出すために日々悩み、苦闘し、試行錯誤を続けられているプロセスをも披露していただいています。失敗体験や困難への直面など、書きづらいことがらについても率直に書いていただいた著者の方々に、厚く御礼申し上げます。 特集をとりまとめる経験を通じて、 多くの現場で共通する課題があること 、 多くのステークホルダーの人々と協力することでしか解決できない課題があること をあらためて感じました。得られた知見を私たちのR&D活動でも生かしていくとともに、議論を盛り上げる視点を提示することで研究コミュニティに貢献できればと思います。
こんにちは。リッテルラボの池田です。 いよいよ4月。新年度ですね。 そんな新年度の幕開けにふさわしい新たなプロダクト 「超★すごい天秤」を発表しました! リッテルラボの渾身の最新作の詳細は、こちらからご覧ください。 <超★すごい天秤 プレスリリース: http://www.next-group.jp/wp-content/uploads/2015/04/20150401X.pdf >
池田です。 本日は、iOSの強力なアクセシビリティ機能「VoiceOver」について書いていきたいと思います。 この機能は、視覚障がい者向けのアクセシビリティ機能で、視覚障がいを持たれた方が、iOSを使いやすくする工夫、機能が様々含まれています。 ここでは、その機能をご紹介していこうと思います。 読み上げ VoiceOverを有効にしている環境下では、画面上に白い枠のカーソルが現れます。 そしてそのカーソルが当たってる画面上の項目が何なのか、どういった操作ができるのか、といった情報を音声で読み上げてくれます。 この機能により、画面を見ずともiOSのデバイスを操作し、画面の状況、情報を知ることができます。 具体的には、以下のようにカーソルが表示され、ここでは「戻る ボタン」と読み上げられます。 VoiceOver環境下では、このカーソルを操作して、iOSを操作していきます。 カーソルと選択項目の操作 VoiceOverを有効にしている環境では、タップ、フリック等の操作は画面上に表示されているカーソルの操作、または、カーソルで選択している項目に対する操作になります。 また、1本指、2本指など、画面に置いている指の数によって操作が異なります。 まとめますと、以下の表のようになります。 操作 1本指 2本指 3本指 4本指 タップ タップ位置の項目を選択 読み上げ停止/再開 ページ番号/行読み上げ (画面上部選択なら)最初の要素に移動/(画面下部選択なら)最後の要素に移動 ダブルタップ カーソル位置の項目を決定/実行 アクション開始/停止(電話をとる/きる等) 読み上げON/OFF VoiceOverヘルプを開始 トリプルタップ カーソル位置の項目を決定/実行 項目セレクタ(画面上の項目をアルファベット順に表示) スクリーンカーテンON/OFF -(操作なし) 上フリック 前の項目に移動 上からページ読み上げ 1ページ下にスクロール -(操作なし) 下フリック 次の項目に移動 選択項目から下にページ読み上げ 1ページ上にスクロール -(操作なし) 左フリック 前の項目に移動 -(操作なし) 1ページ右にスクロール -(操作なし) 右フリック 次の項目に移動 -(操作なし) 1ページ左にスクロール -(操作なし) この表にあるような操作で、カーソルを画面上で動かし、自分が操作したい、または情報を得たい項目に合わせ、項目の決定、実行などをすることで進めていきます。 最初は少し慣れが必要になってきますが、操作を繰り返して、慣れていけばスムーズに操作できるようになってきます。 特殊な操作 VoiceOverの操作の中には、VoiceOver独自の特殊な操作があります。 この操作は、VoiceOver環境下での利便性が考慮されている、素晴らしい機能が含まれています。 以下に特殊な操作を挙げていきます。 スプリットタップ 1本指で画面を触りながら、もう1本の指で画面をタップする操作です。 例えば、人差し指で画面を触りながら、中指で画面をタップします。 この操作では、画面上を触っている指(上記の例なら人差し指)で選択している項目を決定、実行するという操作ができます。 スプリットタップは、文字入力の際に便利で、「English(US)」キーボードであれば、1本目の指でアルファベットを探し、もう1本の指でタップすることで決定、また、「日本語かな」キーボードであれば、1本の指で行頭の文字を選択しながら、もう1本の指で画面をタップし、その行の次の文字を入力していくことができます。 「あ」行を選択しながら3度もう1本の指でタップすると「う」が入力できます。 エスケープ 画面上に2本指を置き、アルファベットのZ(ゼット)を書くような操作をすると、「エスケープ」と呼ばれる操作になり、「1つ前の画面に戻る」などの動作ができます。 例えば、間違って、次の画面に進む操作をしてしまった場合、次の画面で2本指でZを描けば、すぐ戻ることができます。 スクリーンカーテン 画面上を3本指でトリプルタップすると、画面の表示を消した状態でVoiceOverの操作をすることができます。 この機能があるおかげで、人に画面の情報を見られることなく、プライバシーを保ちながら操作、利用をすることができます。 まとめ VoiceOverは、視覚障がいを持たれた方にとって、iOSを操作しやすくする強力なアクセシビリティ機能です。 現在、このVoiceOverは、そこまで認知度が高くなく、視覚障がいを持たれた方がiOSを使えること、そして、それを支える強力な機能があることがあまり広くは知られていないのではないかと思います。 ただ、この機能は本当に素晴らしい機能で、もっと広く認知されるべきだと私は考えています。 もし、「今回初めて知った!」「すごい!」と思われる方がいらっしゃいましたら、ぜひ周りの方にもお伝え頂ければと思います! VoiceOverをより多くの方に知って頂き、視覚障がいを持たれた方が更に便利になる環境が発展していけばと思います。
こんにちは。藤原です。 3月ももう終わりですね。 今期を締めくくるとともに、来期へのスタートダッシュに向けて、部署内で今期の振り返り会などを行われている方もいらっしゃると思います。ただ、振り返り会って結構難しくないですか? 私達も今までは一般的なKPT法で振り返り会をしていましたが、様々な課題がありました。 日々の業務中だと、良くなかった面にばかり目が行ってしまい、結果Keepがでなくて、Problemが多くなり、成果物としてTryが増え、やることが増えてしまった。 日々の業務が多忙な中に付け加える形で、Tryの項目が増えてしまい、結局こなせなくなり、中途半端になった結果として、最終的には振り返りが意味を成さなくなっていた。 毎回の振り返りが「Problem」ばかりで不毛な会になってしまい、気分的にも決して良いものにはならなかった。 本来はプロジェクトが終わる毎に振り返り会をしていましたが、 今回はプロジェクトというよりもチームとしての振り返りを意識して、 今までとは少し違った「 褒め会 」というやり方を試してみました。 今回行った褒め会の進め方 この1年を振り返って自分が試してみたこと、意識してやってきたことを共有する。 他のメンバーがこの1年実践していたことで、評価したいことや真似したいと思ったこと、つまり褒めたいと思ったことを共有する。 これをそれぞれメンバー分繰り返す。 最後に共有した内容から、グループ内で試してみたいことが出てきたら、試すための仕組みを作る。 褒め会から得られたこと 普段、良くない点に目が行きがちなので、お互い褒め合う、称えるということは難しい。 自分の思っている部分とは違う部分を褒められたりして、自分の中にも新たな発見があるし、他の人が褒めているポイントも新たな気付きの参考になる。 最終的には気分よく会を終えることが出来た。 やってみて気が付いたこと メンバーによって「褒められる方がいい」「厳しく指導される方がいい」の2つに別れ、それぞれの性格や考え方が垣間見えたこと。 欠点は嫌でも目についてしまいがちで、良い所、褒めるところに気がつくのはなかなか難しい。普段から注意して観察していないと中々発見出来ないので、普段から意識して周りを見ることが必要。 周囲を思いやる、気を向けるようにするという意味でも、やって見る価値はあると思いますし、結果やってみてよかった。 ということで、気持ち良く1年を振り返り、次へのスタートダッシュを決めるためにも「 褒め会 」オススメです。