【b-3】社内ソーシャルメディア開発トライ＆エラー～おれたちの4tate～...

Developers Summit 2012

原島法子株式会社インターネットイニシアティブ

事業基盤システム部業務システム課

岩永義弘株式会社インターネットイニシアティブ

プロダクト本部アプリケーション開発部応用開発課

B-3

社内ソーシャルメディア開発

トライ＆エラー

～俺たちの#4tate～


質問

システムを作れば

会社は変わるの？


システムでは会社は変わらない。


システムを通して会社を変えたい


このお話は

エンジニアが、

ここまで

頑張ってみた


提供


プロローグ

IIJのコミュニケーション課題


人が増えた

0

200

400

600

800

1,000

1,200

1,400

Mar-09 Mar-10 Mar-11

従業員数

２倍


用語や習慣が違う

你好

你是從哪里來的

Mon passe-temps, c'est le tennis.

Je serais content de pouvoir jouer au tennis avec

quelqu'un qui a le même passe-temps que moi.

Меня зовут Сузуки.

Моё имя Петя.


使っているツールや文化が違う


つまり問題は・・・


ただし来年3月末までね


２０１２年３月３１日まであと

２０１１年１月１４日

約日


（上司）「・・・マジか」

実際の社内資料


プロジェクトが目指すゴール

組織を横断して

スタッフがコラボレーションできる、

社内コミュニケーション基盤で

イノベーションを起こす


コミュニケーションの

システムは流行らない

今までも、社内ではSNSを導入しようという前向きな活動はあった。

でも、どうしても一部の人にしか知られずに、消えてしまう・・・。


理由は２種類ある

不便

使い方が

わからない

いつ無くなるか

わからない

どうせ誰も

使わないでしょ

会ったことも

ない人とやりとり

するのはなぁ

面倒


システムだけでは解決できない

でも、エンジニアとして

システムを提供して

問題を解決するのが

仕事


使う動機になる実例、実績も提供しよう。


コラボして

イノベーション

を起こせ！

自分たちがやってみる


メンバー紹介


原島法子（@noriko_iwai）

事業基盤システム部所属

バリバリの文系

JavaとかC#とか大好き

モットーは広く浅く前向きに☆

＃おさけのむとひどい


岩永義弘

主な武器

C++

R

Perl

JavaScript

趣味

2.2kg steak

・代々木公園でジョギング

・初任給でワインセラー購入

・統計分析を勉強中

yoshi.iwanaga

アプリケーション開発部の戦闘員。

@quake_alert を作りました。


上司２人


どうして私たちなの？

他の開発部署とあまり交流がない。

他の開発部署の文化を知らない。

社内に人脈がない。

ずば抜けた技術はない。

もっとできる人たちが

いるんじゃない？


生きた事例になるから

1. コミュニケーションの課題を体感する。

2. プロジェクト内で課題を解決させる。

3. 解決方法をアウトプットする。

4. 想定しているユーザにも意味のある解決方法になる。


やるからには効率よく！

何かしらの確立した手法を使う。


利用した手法


議論する

２０１１年５月～２０１１年９月

アジャイル

UX

残り日


議論しながら仕様を詰めたいけど

メンバーの時間が合わない。

皆の意識がそろっていない。

ベースになる背景が違う。

時間が

足りない


ファシリテーションの定義

中立な立場で

チームのプロセスを管理し

チームワークを引き出し

そのチームの成果が最大となるように支援するおすすめ


各工程でファシリテーション

1. 課題を共有する

2. 課題を分類する

3. イメージを元に機能を抽出する

4. 機能の優先度をつける


１．課題を共有する

付箋を使って、各々に課題を

書いてもらい、共有した。

2011年5月26日

1時間


２．課題を分類する

皆で立って話しながら、

付箋を分類する。

2011年5月26日

1時間


課題を解決するシステムの

イメージを描いてきて

もらう。

イメージの中から、機能を抽出する。

３．イメージを元に機能を抽出する

2011年6月17日

2時間


４．機能の優先度をつける

ここから

手をつける

2011年6月23日

2時間


結構あっさり決まったね

・・・。


これが

システムになると

良いんじゃね！？


当時の完成イメージ図


開発する

２０１１年１０月～２０１２年１月

ファシリテーション

UX

残り日


問題発生！

開発チームは２人

経験がまるで違う。

お互いのスキルは未知数。

先が

読めない


アジャイルの定義

プロセスやツールより人と人同士の相互作用を重視する。

包括的なドキュメントより動作するソフトウェアを重視する。

契約上の交渉よりも顧客との協調を重視する。

計画に従うことよりも変化に対応することを重視する。

「アジャイルソフトウェア開発宣言」より

おすすめ


やってみた

お試し期間

メンバー：４人（内開発２人）

期間：３週間（内３８時間）


役割分担して開発

目的は、２人それぞれが何かの

エキスパートになって

あとでお互い教え合うこと！


１週目のレビュー

◆見せた成果物

・チャット機能

・文字列出力

・付箋UI

・付箋追加・移動

・サイズ変更・文字入力

付箋

付箋


２週目のレビュー



・登録・読込ができる（MySQL使用）

・クライアントとサーバとの連携

・付箋UI

・編集・削除

付箋


３週目のレビュー



・MySQL→MongoDB

・付箋UI

・付箋の変更を伝播付箋


実績を元に見積もり


振り返り（Keep）

見えるモノがあったおかげで

すんなり進んだ。

役割分担で、うまく回せた。

フィードバックがモチベーショ

ンアップにつながった。


振り返り（Problem）

同じ場所で作業しないと不便。

連絡がないと無駄が発生

しやすい。


本格的にやってみた

実装開始から

実装完了まで

メンバー：４人（内開発２人）

期間：３ヶ月


振り返りからのTry その１

細切れ時間で一緒に作業する！


振り返りからのTry その２

とにかく連絡する！


振り返りからのTry その３

やることとやらないことを、きっちり分ける。

やることはやる！

テストコード

コーディング規約

朝ミーティング

振り返り

連絡・相談

スコープ外作業

無理な時間合わせ

手段にこだわる

資料作成に時間をかける

不確定な約束


ここで一旦

一部に公開することに

３ヶ月後、必須機能が実装完了







「イノベーション

忘れてた・・・」


開発チーム２人でやるのは

お勧めしない

・・・正直しんどかった


ようやく完成！

まずは、顔見知りに使ってもらう。

＊ + 巛ヽ〒 ! + 。 + 。＊。 + 。 | | ＊ + / / イヤッッホォォォオオォオウ！ ∧＿∧ / / （´∀｀ / / + 。 + 。＊。 ,- ｆ / ｭﾍ | ＊ + 。 + 。 + 〈＿｝） | / ! + 。 + + ＊ ./ ,ﾍ | ｶﾞﾀﾝ ||| j / | | ||| ――――――――――――


約50人でαテスト

手応えのある滑り出し！

うはw なんか面白いwww

WebSocket ktkr

時報うぜウェブアプリか

これで次の飲み会の場所でも決めようずww

今度の勉強会でこれの話よろ

/hidden


２週間後

アクティブユーザ

人


いいともだったら…

大歓声♪


＿＿＿／＼／ノ＼ u. ＼！？／（●）（●）＼ | （__人__） u. | ＼ u.｀ ⌒´ ／ノ＼／´ ヽ＿＿＿_ ／＼！？？／ u ノ＼／ u （●）＼ | （__人__）| ＼ u .｀ ⌒／ノ＼／´ ヽ


利用者のフィードバック

「絵を描けたらいいな」

「付箋同士を線で繋げたい」

「アニメーションで再生できるといいね」

「バックは黒が好み」

「付箋の自動整列」

「i18n対応に！」


フィードバックを取り入れていけば

ユーザは増える？

NO!!


どうしてこうなった？

馴染みの無いコンセプト

ぱっと見で使い方、魅力が理解されない

機能の見せ方

あったら便利だが、邪魔。

せっかく作ったのに、使われない

＿＿＿ / ||￣￣|| ∧＿∧ |.....||＿＿|| （） |￣￣＼三⊂/￣￣￣/ | | ( ./ /


ユーザエクスペリエンス

一言でまとめると、

の視点が欠けている。


上司

UXのプロを探しなよ。

予算ならなんとかするから！

※ 社内にUXのプロがいないのです。


プロの力を借りて、UX強化

ファシリテーション

アジャイル

2012年３月〜６月


UX強化の道のり

１. いつ、どのように使われるのか知る

２. プロトタイプテスト

３. 実システムでテスト

デザイン修正

デザイン微修正、実装


1. いつ、どのように使われるか

質問内容

1. コミュニケーションの手段と内容、人数は？

企画立案、開発、運用

IRC、ML、Wiki

2. そのコミュニケーションがどうなったら嬉しい？

たくさんの人から反応がある

アドバイスがもらえたとき


Step. 1 の後のUIデザイン

トップ画面

before

Step.1 後


この時のUIデザイン

ディスカッションスペース


2. ペーパープロトタイプテスト


プロトタイプテスト後のUIデザイン

トップ画面


次は、実システムでのテスト

画面デザイン決定！

実装完了！


3. 実システムでテスト

今回は、リアルな操作デバイスで。

• ショートカットキー

• delete キー、esc キー

• 右クリック

操作デバイスの違いをここで吸収


更に修正を加え、

UXのブラッシュアップも完了。

その出来映えは...!!


効果てきめん！

開発項目の決定

プロジェクトの課題整理

５０人中１人 → ３０人 !!

タスク管理


SPECIAL THANKS

AQ株式会社


開発完了

今月初旬


この開発の旅で得たもの

システムを「面白い!!」と言ってもらえた！

同じ志を持つ仲間に出会えた！

ファシリテーション、アジャイル開発、UX

への挑戦が、実績として注目された！


おれたちの #4tate

システムを通して

会社を変えられるか!?


答え

変えられる!! ・・・といいな


最後に

and one more thing…

∧∧ ヽ(･ω ･)/ ＼(.＼ノ､ﾊ,,､￣￣

ズコー


エンジニア絶賛募集中！

是非 IIJ へ！

詳しくは、お手元の資料を！

変わった人と言われるアナタ！

新しいことに挑戦するのが好きなアナタ！

UXのプロとか！

中途採用説明会： 8/25(土)


ご清聴ありがとうございました

アンケートにご協力ください


ちなみに・・・

２週間限定で公開しちゃいました

本日～2012年8月12日

/

【b-3】 社内ソーシャルメディア開発トライ＆エラー ～おれたちの4tate～...

Documents

temps

4tate

【b-3】社内ソーシャルメディア開発トライ＆エラー～おれたちの4tate～...