思い出は銀の弾

ひよっこエンジニアが調べたことや経験したことをまとめます!

ファシリテーションによる会議の効率化

先日、東海学生吹奏楽連盟という学生団体にて、ワークショップを実施してきました。 (資料はこちら

学生吹奏楽団が抱えがちな負の循環(下図)を脱すべく、会議の効率化を図ろうとう趣旨のもと実施をいたしました。 f:id:masayuki610930:20170507153057p:plain

35名程度その場にいた学生の皆様にとって「ファシリテーション」という言葉自体未知のものでしたので、事後の整理に役立つようこの記事を記載いたします。

ファシリテーションとは

「ある事柄に関わる人々の力を引き出し、 話し合いや活動が円滑に進むよう、支援・促進すること」[2]

であり、図におくと下記の通りとなります。

f:id:masayuki610930:20170507153822p:plain

ファシリテーターは誰がするのかというと、実際にはでは会議ごとにその役割をグループの誰かが担うことが多いのではないでしょうか。

ちなみに個人的にはファシリテーター自身のスキルアップのため、ファシリテーター担当役はどなたかに固定をしたほうが良いと考えております。 具体的には、サポートやコントロールの素質持つ方が良いのではないでしょうか。

ファシリテーターをやる上で大切なのは「支援・促進」に徹することであり、議論自体に混ざって勝手な意見を述べたりせず、会議に参加されている方全体の機微を常に汲み取ろうとすることです。

効率的な会議のやりかた

ポイント

効率的な会議を実施するためのポイントは次の通りと考えます。

  • みんなの意見を共有する
  • 納得感のある合意形成
  • 次にやることが明確になっている

発言機会の少ない参加者はいませんか?決定したのに不満そうな参加者はいませんか?

また、会議で何かを決めることは、何かがスタートすることです。物事を決めることをゴールとせず、メンバー全員がそれぞれ次に何をやるのか明確になっていることをゴールとしましょう。

やり方

会議では、会議の目的に合わせて手順が異なります。

目的が報告なのか、方針決定なのか、課題解決なのか、会議を始める前に参加者で共有しましょう。

次に記載するものは、その目的を達成するために登場する具体的なやり方の紹介です。

準備

会議の前にファシリテーターがやることをまず整理します。

  • 参加者の決定
  • 所要時間の決定
  • 日時の決定
  • 場所の確保
  • 開催の通達
  • 備品(議論に必要なもの)の準備

予め議論の内容がわかっている場合は議論の順番や必要時間を考えておきましょう。

発散

会議の場で、参加者の皆様に意見/アイディアを出してもらうときのやり方です。

  • 付箋に書いてもらう
  • A4用紙に書いてもらう

ここで重要なのは、参加者の皆様に自身の意見を集中して考えてもらうことです。

3-5分をタイマーで測り、その間はファシリテーターは黙っています。(参加者の集中力が途切れたなと思ったら、全体に向けてちょっと声をかけたりはしますが。)

共有

上記で書いてもらった内容を、参加者全員で分かち合う際のやり方です。

付箋を利用した場合は、参加者が順番に付箋を1枚ずつ簡単に(一言で十分)紹介しつつ全体に提示をします。その間で同様の意見があるという他の参加者はそっと(無言で)その付箋の周りに自身の付箋を貼ります。

このとき、手元にある付箋の枚数が少ない(=意見・アイディアの数が少ない)人から順にやってゆくことで、発言機会の確保ができます。

A4用紙を利用した場合は、時計回りで全員で回し読みをします。1枚(一人分)を読む時間の目安としては、40秒-1分でしょうか。

収束

たくさんの意見・アイディアから一つのものに絞り込むやり方です。

参加者の意思を聞く前に、各意見を比較する目的で一度整理を行うこともおすすめです。

f:id:masayuki610930:20170507161542p:plain

このような2軸で各意見がどのあたりになるのかを話し合うことなどです。

最終的な決定の手法として、次の2つを紹介します。

  • 各個人が複数票を持った多数決

これは、意見の数の半分-1/3程度の投票権を参加者に与えるものです。

例えば3票を参加者に与えるとすると、参加者は異なる3つの意見に賛成の意思を表すというものです。

テーブルの上にある付箋(=意見)に「正」の字を書くように投票を促すことで、時間短縮もできます。

  • ポイント振り

こちらは親指を使って各意見に点数を与えるやり方です。

下のとおり、例えばサムアップなら+1点とし、参加者全員が一斉に親指で意思を伝えます。この合計点がポイントとなります。

f:id:masayuki610930:20170507162038p:plain

付箋にポイントを記入しながら順に行うと良いでしょう。

その他のコツ

上記に幾つか紹介したやり方を円滑にするための、おすすめの方法をお伝えします。

  • タイマーは参加者全員に見えるようにしましょう。
  • BGMをかけておくと、静寂が苦痛にならない上に、参加者が楽しんでくれます。
  • 毎度上記で紹介した方法をやるごとに、参加者の皆さんに今から何をやるか明確になっているか確認をします。

最後に

様々に紹介してまいりましたが、最後にマインドの話を少しだけ致します。

それは、「会議だからって常に話し合う必要がない」ということです。

他の人の話を聞きながら、自分の意見を考えることは誰しも難しいものです。この二つが明確に分かれた会議をすることで、良い議論につながると考えます。

今回ワークショップという場で私自身の気づきが多くありました。特に自分と異なる土壌・文化を持つ方(今回なら非IT系が多くいらっしゃる学生さん)への言葉遣い、気をつけたいと思います。

なお、実施にあたり多くの方に協力をいただきました。皆様に感謝を致します。

再演のご依頼などございましたら、ご遠慮無く連絡をいただけますと幸いです。

今回参考にした資料

  • [1] 志の大小はどうだっていい。人と比べずに、信じた道を進める人が強い (記事はこちら
  • [2] ITリーダーが確実にファシリテーションを身につける本(著:新岡優子)
  • [3] 世界で一番やさしい会議の教科書(著:榊巻亮)
  • [4] アジャイルレトロスペクティブズ 強いチームを育てる「ふりかえり」の手引き(著:Esther Derby)
  • [5] ファシリテーターの道具箱 組織の問題解決に使えるパワーツール49(著:森時彦) 22

非開発チームにてアジャイルライクなタスク可視化をやってみた話をしてきた

DevLoveというコミュニテイ−にて、登壇をしてきました。

『社内でアジャイルと出会った新卒2年目がインフラ部隊でタスク可視化をやってみた話』

  • 私の仕事のフィールドであるインフラいついて
  • アジャイルいいじゃんって思うようになった社内教育について
  • 自チームでカンバンを元にやってみた方法・知見について

お話しをしてきました。

インフラチームとアジャイルを結びつけてみた成果として、より色んな方の目に止まればと思って、そのあたりについて文章に書き下ろしていきます。


やってみる前の話

課題感・動機

  • チーム全員がやるタスクの範囲が広い(運用、保守、構築、開発)
  • 人数の増加
  • 取り扱う機種の増加

この三つを理由に、今までのふんわりとした(ルール化してない)ままのチーム運営では情報共有が不十分であり、タスク消化が停滞する傾向にありました。

方法の模索と決定

アジャイル開発手法を真似てみたいと思っていましたが、当初の私はスクラムしか知らず、スクラムをそのまま使うことにはかなり抵抗がありました。

というのも、スクラムは役割・イベント(セレモニー)・目的がかなり強固なフレームワークであり、取り入れる際の学習コストと自チームで完結しない(スクラムマスターがチームメンバーと兼任するのはアンチパターン)点に大きなデメリットを感じていました。

そんな中、とある勉強会でカンバン開発手法というものに出会いました。

スクラムと比較し、

  • 軽いフレームワークでお試しスタートできること
  • 専任ロールが定義されていないこと
  • 「タスクを終わらせること」に焦点を当てていたこと(スクラムは「チームの成長」)

という点を気に入り、また勉強会にて非開発チームにて導入した事例を共有いただいたことで実行可能である判断ができました。

やってみたときの話

キックオフ

勉強会の1週間後にキックオフをしました。

カンバン開発手法はどのようなもので、チーム・個人・上司にそれぞれどのようなメリットがあるかを整理し話しました。

その後

  • ワークフローの検討・決定
  • 付箋に書き込む情報のルール化
  • 朝会・振り返りの頻度の決定

と進んでいきました。

ポイントとしては、アジャイル的なノリを伝えることです。

インフラ畑に長いこといるベテランの方は、「とりあえずやってみる」、「やっていきながら改善する」といった文脈が伝わりづらく苦労しました。ルール・規則・仕様ありきの動きではない旨を伝え、いつでも改善するチャンスはあるというメッセージを添えました。

朝会と振り返り

頻度と所要時間として、朝会は週2回で各15分、振り返りは週1回15分と決めました。

朝回を毎日行わないのは、変化のスピードを考えた結果です。

開発チームと比較して変化・成果が1日で出づらい(他人マターであったり、申請が必要)ことから、毎日の朝回は過剰であると判断しました。また、変化のない朝回は停滞感を産んでしまうのではという懸念もあったためです。

振り返りの時間が15分だけというのは、可能なら避けたほうがいいと思います。実際、半年後には月1で1時間に変更しました。

週1で15分とした理由として、カンバンを模したやり方の改善は、初期段階できっとたくさんあるだろう。であれば、ジャストアイデアでも頻度が多く修正ができるように、という意図でした。

やってみた後の話

チームへの変化

資料にも書きましたが、チームメンバーへヒアリングをしたところ、

  • 業務効率の良い変化
  • リスクの早期発見
  • ボトルネックの明確化
  • 優先タスクの明確化
  • メンバーが何をやっているか分かるよう になった

という変化を感じてくれたようです。

特に評判が良かったのは、「リスクの早期発見」でした。若手勢の勘違いにベテラン勢が気づく場面、ベテラン勢が失念していた最近のルール変更への説明を若手勢がする場面が見られました。

一方でデメリットとして上がった意見は、

  • リモートワークに向いていない
  • 人数が揃わないとき(出張や深夜メンテ明け)に決定がなされてしまう
  • ボードが物理管理なので変更がしづらい

などがありました。とはいえ、全体としてはメリットが大きく継続したいという意思でした。

最後に

インフラ業界として考えると、アジャイルと相性が良くないとも理解しています。特に、納期があり仕様がきっちり策定されており、期間とお金が決まっているタイプのインフラだと尚の事です。

しかし、サービスと一体となった構築・運用・保守ができるよう、変化に富んだ環境を良しとする土壌のインフラ部隊であるなら、新たなチーム運営の方法を考えてゆくことは正しいと信じています。

その中の施策として、今回のようなアジャイル・カンバンとうキーワードから試行錯誤してみた知見が皆さんの助けになれば幸いです。

要素を読み込んだあとに実行するChrome拡張の作り方

Chrome拡張を開発するとき、実行のタイミングで悩ましく思うことがありました。

具体的には、フロントサイドでスクレイピングをしたいのだけど、データの読み込みが完了してしまう前にChrome extentionが発火してしまう!という場合でした。

サーバサイドでやってないのは、認証とかその辺が絡んでいたからです。。。

面倒なので、要素が(きっと)読み込まれたあとに実行するようにしました。

要素が読み込まれるまで2秒まって実行する場合

ちなみに繰り返して実行したいときは、setTimeout を setIntervalに変えてあげればOKです。

非常に安直ですが、さっくっと作れます。

新卒2年目でチームを変える7つの手順


はじめに

カンバンの導入をやってみた

2016年の5月、(方法論、システムとしての)カンバンをチームに導入しました。

最近チームメンバーからのフィードバックをいただき、どうにか高評価を得ることができました。

9月までの期間限定お試し運用という約束のもとカンバンをやってみたので、今後のことはまた話し合うことが必要ですが、

  • 業務効率が上がったと感じる
  • 潜んでいたリスクの発見ができるようになった
  • チームの状況把握が容易になった

という収穫を踏まえ、きっと継続できるものと考えます。

この文章を書くまでの経緯と理由

2015年の4月に新卒入社し、10月に現チームに配属。Web企業とはいえインフラ側と堅い性質を持つチームであったため、アジャイルの考え方を理解していただくのに苦労を要しました。

そんな中でもどうにか上記のような変化をチームもたらすことができたので、こうやって自分はトライしたよ!という経験談として、また、こうやったらいいんじゃないかな?という提案として書いてゆきます。

注:カンバンの導入の成功例をもとに書いているので、全部が全部に当てはまるかは自信がないです。

7つの手順

1. チームメンバー全員の信頼を得る

こいつは誠実で頼れるやつだ。という信頼をチームメンバー全員から得ましょう。

測り方に決まった方法はないと思いますが、幸いに弊社では行動・姿勢に対する相互評価の人事システムがありました。チームjoin後から高評価を得るべく立ち回っておきましょう。

チームを変えるためには自分の立ち位置を有利においておく必要があると考えるからです。こいつの言うことなんか聞いてられるか!とならないよう、地盤を固めておきましょう。

2. 上司のお墨付きを得る

上司(リーダー)にきっかけづくりと、役割の明示をしてもらいましょう。

チームを変えたい!というあなたの思いを、上司も同じように持っているとは限りません。上司の理解なしに突っ走ってしまうと、結果の良い悪いにかかわらず、独りよがりな行動をした人間と見られてしまいます。

チームを変えたいなら、チームリーダーである上司の許可は必須となるでしょう。相談し、ビジョンを共有しましょう。

その上で、メンバーに対して上司の口からチームを変えたい旨を伝えてもらい、その役割をあなたが指名されるというストーリーを実現しましょう。

所詮2年目が独りでできることなんて限られています。ほんとに変化をもたらしたいのであれば、素直に上司にお願いをしてみましょう。

3. 乗り物の勉強をする

乗り物とは、やり方のフレームワークのことです。私の場合は「カンバン」という乗り物でした。

エンジン(=推進力)はあなたの心の中にあるので問題ないでしょう。

ですが、チームメンバー全員を動かすためには、飛行機やバスや船や、なんでもいいので型に載せないと非効率です。

カンバンならカンバン、スクラムならスクラムの方法論をしっかり勉強し理解し、離陸の仕方・気流の捕まえ方・自動操縦に必要な設定など、コントロール出来るように準備をしましょう。

4. ごまかす

根回しや準備も終わり、チームメンバーとともにキックオフを迎えました。

しかしいざやってみると、頭のなかに思い描いていた未来より、遥かに厳しい現実がやってくると思います。

  • 「それって机上の空論でしょ」
  • 「うちのチームには向いてないよ」
  • 「何言っているかわからん」

様々なネガティブ(のように聞こえる)コメントが飛び交うと思います。(特に年配者ほど言ってくる。)

はったりでその場しのぎするのではなく、ごまかしましょう。

「その懸念は確かにあると思います。とはいえ、やってみないとはっきりしないので、一度ためしにやってみませんか?そして判断しましょう。」

5. 頼る

うまくごまかし反乱軍を落ち着かせたところで、次は全力で反乱軍に頼りましょう。

チームを変えるために必要な決め事・ルール設定において、全員の協力なしには事をなすことができません。

ましてや、チームに長くいる年配者ほど、強い力を発揮してくれます。そこはこういうケースもあるから、こうした方が都合いいなど。

自分の経験が浅いことを素直に認め、皆さんの考えを教えてほしいというメッセージを出しましょう。

6. 改善の余地を残す

ここまでくると、議論が白熱し収集がつかなくなってきます。

自体を収束させる手っ取り早い歩法は、検査と適応を伝えることです。

検査と適応はアジャイルでよく使われる言葉で、今の状態をチェックし、次のアクションを決めることを何度も何度も(定期的に)行うことです。装備を買い足すイメージで私はいます。

「一旦これで決めとしてみませんか。振り返りの機会でまたアップデートしましょう!」

7. 繰り返す

いちど走り出したらもう何もしなくていい!なんてことはありません。

人間は低きに流れ、習慣は早々変えられるものではないでしょう。

繰り返し繰り返し、これはなんのためにやっているのか、目標地点はなんなのかを明示的に示してゆきましょう。

3ヶ月も経てばきっと新たな習慣になっているはずです。

おわりに

チームに慣れ、違和感の解消に挑戦してみたくなる。そんな新卒2年目を私は過ごしています。

出来ることは少ないし、劇薬の投下ができるほど知識経験はない状態。下っ端なので命令でなくお願いにとどまってしまうメッセージ。大変難しく思いました。

同じような悩みの方の参考になることを望みつつ、3年目以降の自分がこの文章をどう思うかを楽しみにしています。

スクラムとカンバンの朝会の違いについて考えてみた

チームにカンバン(※開発手法としてのカンバン wikipedia)を導入し始めてみて1ヶ月半ほど経ちました。

また、研修として実施していた、1ヶ月間限定のスクラムマスター役もどうにか終えました。

ともにアジャイル開発手法の枠組みに位置づけられている二つの手法

ですが、その性質はやっぱり異なると実感しました。

どのような関係性にあるのか、次の図がわかりやすいかなと思います。 画像 出典:Scrum, Lean, Agile, Kanban: how does it all relate?

朝会について今回話題を絞ります。

※以降持論です。

ともに15分間で実施をしていた朝会ですが、自分がスクラムマスターときと、カンバンでの朝会進行役(カンバンマスターとか、カンバントレーナーとかいう役割がカンバンで定義されていないので。。。)で問いかけ方が異なっています。

なお、コミュニケーション・情報共有を図るという目的は変わってはいません。

スクラムマスターのときの問いかけ

  • 個人に注目をさせる

カンバンでの朝会進行役のときの問いかけ

  • タスクに注目をさせる

この違いは何によってもたらせてれいるかというと、先にちょっと触れたそれぞれの方法の源流の違いです。

スクラムにおいては、(スクラムマスターは)チームの成長に責任を持ちます。そのため、チームとして機能するために、開発メンバーの一人ひとりが高いパフォーマンスで仕事があたっているか、それを阻害しているものは何かを考えます。

一方、カンバンにおいては、滞り無くタスクが次のワークフローに移れているかが焦点となります。そのため、それを阻害しているものは何かを知ろうと努めます。


両方のやり方を並列でやってみたからこそ強く意識したので、専任でやっている方にとっては当然の話であったかと存じます。

以上、駆け出し&両方のやり方をちょっと触れた人間の考えでしたた。

今までfeedlyで保存した記事を並べてみる

ひとつ前の記事、feedlyで保存した記事を取得するで実際に得た、今まで保存した記事です。

かなり量があってびっくりしましたw

リンク

データ可視化ツールの最新安定版「Grafana 3.0 Stable」がリリース
オンプレミスとの比較も忘れずに、クラウドアーカイブの4大“懸念事項”
The Epic Story of Dropbox’s Exodus From the Amazon Cloud Empire | WIRED
ハードディスクが故障する元凶は熱ではなかった
楽天株式会社の新オフィス 楽天クリムゾンハウスに行ってきた!
さくらの20年史と新サービス電撃発表! 「第28回さくらの夕べ(さくらの聖夜)」レポート
2015年、このWebサイトのデザイン・アイデアは見逃せない!「Website of the Year」 -日本からも2つのサイトが受賞!
新しい仕様でより進化したPhp 7を体験してみよう
[Js]縦長ページに面白い仕掛けや便利な機能を実装できるスクリプトのまとめ
[速報]マイクロソフト、無償のコードエディタ「Visual Studio Code」をオープンソースで公開。Microsoft Connect(); 2015
GMOインターネット「ConoHa」、性能大幅改善の鍵はSDSとSSD
デルがデータセンター事業を立ち上げ--狙いはハイパースケールの少し下
こんな便利なのがあったとは!Web制作やビジネスに欠かせない無料ツール・サービス・素材 400+種類 総まとめ
モバイル「Google Maps」、オフラインでのナビゲーションと検索を追加--まずは「Android」版から
すべてがUiになるVrの世界
JavaScript統合開発環境「Babel 6.0.0」がリリース、6to5の最初のコミットからちょうど1年後
「Firefox 42.0」がリリース、トラッキング保護機能付きのプライベートブラウジングを搭載
アマゾンのドル箱となったAwsがこれほど破壊的である理由
最近のWebデザインで採用されているページレイアウトやUIの新常識がチェックできる素材のまとめ
今からできるWebコンテンツの次のコト
関数型リアクティブプログラミング言語Elmに学ぶ フロントエンド開発の新しい形 【後編】
40Gbpsを確認--レッドハットやブロケード、クラウド型NFVを共同検証 - ZDNet Japan
Reactによってネイティブ/Web論争は終わったのかもしれない
DellがEMCを巨額買収、一番喜ぶのは誰?
101回死んだエンジニア: やっぱり四万人のボランティアは必要だよ!
ニュースアプリの「究極のUI」って何ですか? Yahoo!ニュースと日経電子版が大激論
クオリティがすごいと海外で話題に!もしマクドナルドがApple風に広告を展開したら
「五輪にはボランティアで働けるエンジニアが必要」発言の真意を聞く - ZDNet Japan
EMC買収で巨大化するデル--その狙いと今後の課題 - ZDNet Japan
デルによるEMC買収、規模のメリットはパブリッククラウドの課題に勝るのか - ZDNet Japan
DeNAの意思決定「ヤフー、楽天、LINEがやらない取り組みを……」 - ログミー
[速報]わずか3ステップでモバイルアプリケーションを生成する「AWS Mobile Hub」発表。AWS re:Invent 2015 - Publickey
デザインやイラストで色の組み合わせを決める時の参考になるカテゴリ別100種類のカラーパレットのまとめ | コリス
インフラエンジニアの責任範囲と評価
HTML/CSSでワイヤーフレームもUIデザインも作成する人がけっこう多い -最近のWeb制作で使われているツールのまとめ | コリス
[JS]レスポンシブ対応、指定したエリア内だけで高さが異なるパネルを同じ高さに揃えるスクリプト -Right Height
JavaScriptプラットフォーム「Node.js v4.0.0」がリリース、io.jsと統合し、今後は定期的なリリースに移行
地図が簡単に楽しく作成できる!世界地図をはじめ、日本を含めた各国の地図にも対応 -Pixel Map Generator
【5分でできる】はてなブログで「トップに戻る」ボタンを画像で作成する方法 - 復活のM〜快適生活のすすめ〜
【Parse】Push通知をAndroidアプリに簡単に組み込む方法
エンジニアをやり続けるなら、「承認欲求」を満たすより「誰かの期待」を生み出す方が面白い【連載:えふしん】
CSS, JavaScriptで実装された、チェックしておきたいUIデザインの最近のテクニックのまとめ
いまさら聞けない「コードの英語」超入門
モダンで美しいUIのフォーラム実装OSS「Flarum」:phpspot開発日誌
デキる開発者は「酷いコード」とどう付き合っているのか?
Cookpad × CyberAgent × DeNA の15卒エンジニア交流会を開催しました
[CSS]レスポンシブ対応の賢いアイデア、自在に伸び縮みするカード型レイアウトを実装するスタイルシート -chewing grid
Bootstrapでたて型のタブを実装できる「Bootstrap Vertical Tabs」
[JS]Webサイトの使いやすさ・かっこよさを向上させる、チェックしておきたいスクリプトのまとめ | コリス
Android 6.0 ( Marshmallow ) 対応済んでる? 公式ドキュメント "Behavior Changes" 翻訳
GitHub、リポジトリ内で利用されているプログラミング言語トップ10を発表。背後から伸びてきたのはあの言語
Yahoo!カーナビ お盆期間中の全国目的地検索ランキング発表!(2015年版)
配色の参考にいい!シンプルな配色ルールで作り出された魅力的で美しいカラーパレットがいっぱい -Color Hunt
Webサイトのデザインの完成度をアップする、小さなディテールだけど効果が確実にある改善方法 | コリス
グーグルの次期Android、正式名称は「Marshmallow」に
本当に実用的なたったひとつのソートアルゴリズム
Uxに関する疑問に答えて気づいたこと
クリエイティビティとコピーについて
[イベントレポート] Android オールスターズ #dotsandroid | Developers.IO
Facebook、JavaScriptライブラリ「React」開発ツールの最新ベータ版を公開
「絶対無理!」からはじまったCerevoの『DOMINATOR MAXI(仮)』開発~モノの完成度を高める良い意味での“割り切り”とは?
鮮烈な演出を支えるのは、枯れた技術と入念なテスト――ライゾマティクス リサーチのプログラマーに聞く
今月のAmazon Kindle月替わりセールに、Web制作者に魅力的なラインナップが揃ってる
事例から学ぶ、優れたキャッチコピー10選。第四回「発見のあるコピー」
データ中心になると忘れがちな直感の重要性
サイト内ツアーを実装できるシンプルなjQueryプラグイン「TourBus」
Googleフォントで好みのフォントを見つけるのはなかなか大変だけど、これを利用すると簡単に探せる! -Font Library
新たなテクノロジで「既成概念を破壊する」--ソフトバンク宮内社長が方針語る
[マンガ図書館Z]Gyaoと赤松健さんが無料電子コミックサービス提供開始 - 産経アプリスタ
プログラマの健康を考えるイベント「ヘルシープログラマ!」を開催!
エンタープライズIT版のデブサミ「夏サミ2015」開催、講演関連資料のまとめ:CodeZine(コードジン)
仕事の効率アップ? 職場の机を片づけてみませんか
git 履歴を変えるコマンドたち
生産性の高い人が必ず使っている「11の裏技」。スマホは決してSns用ではない! | Tabi Labo
IoTがもっと盛り上がったら、何が必要になる?カヤック×ユカイ工学×メタップスに聞く「黎明期に市場を作るエンジニアの条件」
視点の違う「2トップ体制」が肝~React.js移行を進めるベーシックに見る、高速で開発環境を改善する方法 - エンジニアtype
新しい高速渋滞マップ 「Yahoo!道路交通情報」をリリース
Android Design Support Library について
Pocketに保存した記事を減らすのに使おう『PocketRocket』 | ライフハッカー[日本版]
Amazon謹製RDBMS「Amazon Aurora」がリリースされました!!! | Developers.IO
視点の違う「2トップ体制」が肝~React.js移行を進めるベーシックに見る、高速で開発環境を改善する方法
「ヤフーとその仲間たちのすごい研修」その内容は?
「ヤフーとその仲間たちのすごい研修」その内容は? - Yahoo! JAPANコーポレートブログ
Cssを書く、設計する時に参考にしておきたいCssのガイドライン・スタイルガイドのまとめ
背景色にブラーをかけて今っぽくするjQueryプラグイン「Background Blur」
爆速でAndroidにPush通知を実装する(Parse + Android Studio使用)
1ページスクロールがつくれる jQuery Plugin特集【One Page Scroll】 | InfinityScope
Electron - フローチャートやシーケンス図をマークダウンで記述が可能なエディタSunny Place Editorを公開しました。 - Qiita
サイバーエージェントが新卒社長を定期的に生み出す意図 | The Startup
サイバーエージェントが新卒社長を定期的に生み出す意図 | The Startup
MITライセンスのソースコードをGithubにあげるまで
すごく分かりやすい!デザインやコンテンツ設計の 面からアクセシビリティへの取り組みを解説したWeb制作者必読書
スクロールしたらふわっと画像が表示されるjQueryプラグイン「Lazy Load」 | バニデザノート
C言語パズル集:Cにまつわる興味深い問題あれこれ | プログラミング | Postd
【2015年】夏休みにお出かけしたい夏のイベント9選「えのすい」「朝食フェス」など | 株式会社Lig

GitHub、オープンな地図サービス「OpenStreetMap」への投稿機能を提供『絵で見てわかるWindowsインフラの仕組み』はありそうでなかった、Windowsを概観する地図:CodeZine(コードジン)
【料金表第2弾】Webサイト制作いくらかかるか?フリーランス・SOHOの制作代金 100社まとめ - デザインの頼み方を研究してみる
Webデザイナー必見、実務で役立つ逆引きレイアウト集 | コムテブログ
凸版印刷とハコスコ、VR事業における業務提携に合意 - CNET Japan
Microsoft、統合開発環境「Visual Studio 2015」を正式公開 - 窓の杜
Google マップが 10 歳になりました。
gitのuser.nameとuser.emailを会社/個人で自動的に切り替える方法
僕がSwiftで使ってる構文達 - Qiita
国内初のRaspi,Tessel, Edison3種マイコンボードのIoTハンズオンから考える今時マイコンボードとBaaSの親和性
2015/07 Mini Tech Talk(グリー社内勉強会) | GREE Engineers' Blog
2015/07 Mini Tech Talk(グリー社内勉強会)
「jQuery 3.0」と「jQuery Compat 3.0」の最初のアルファ版がリリース
守銭奴エンジニアが考えていること: 【57】今後、日本人エンジニアは存在感を出せるのか?
個人的に便利なGitコマンド
Macのターミナル(bash)でGitを使いやすくしてみた。(補完、branch表示) - Qiita
OpenStack Mリリースの名称が「OpenStack Mitaka」(三鷹)に決定、紆余曲折の末。10月に東京開催のOpenStack Summitにちなみ - Publickey
「jQuery 3.0」と「jQuery Compat 3.0」の最初のアルファ版がリリース:CodeZine(コードジン)
15卒エンジニア新卒研修
Git でややこしい操作する前にブランチに新しい名前をつければ混乱しない(と思う)
カギは「ドラゴンボールの法則」~若手育成の環境づくりで必要なことを、えふしん氏×村上福之氏に聞く【特集:エンジニア育成の本質】
Web制作者は絶対ブックマークしておきたい、デザインやコーディングに役立つサイトのまとめ | コリス
グーグル、オープンなビーコン規格「Eddystone」を発表--アップルの「iBeacon」に対抗
Life is Tech! Tech Talk を開催しました!
Ipa、「平成27年度秋期情報処理技術者試験」の受験申込受付を開始
AWS、Gitレポジトリをホスティングするバージョン管理サービス「AWS CodeCommit」の提供を開始
divやimageをiPhoneやタブレット、ノートPCの枠内にはめ込み合成できる「devicemock.js」
Web制作の参考になる!サイトマップやハイレベルサイトマップ、フローチャートなどのまとめ | コリス
【初心者向け】Awsを学ぶためのリンク集(2015年7月版)
Ctoは「コード書き」から離れるべきか?マネーフォワード浅野千尋氏の葛藤と、見いだした光明
簡単にWeb/スマートフォンアプリのバックエンドが構築できる「Deployd」レビュー
デザイン批評を始めたい人のためのヒント集
ちょっと趣向を変えた社内勉強会を実施してみました!
エンジニアとしてのコミュ力をあげるために心掛けていること | Developers.IO
「エンジニアは今すぐディープラーニングを学べ」松尾豊氏が見据える、日本がシリコンバレーを追い越す日【連載:匠たちの視点】
[速報]来春登場「OpenStack Mリリース」の名称が「OpenStack Meiji」(明治)に決定。10月に東京開催のOpenStack Summitに合わせ
「こんな人についていきたい」社員が辞めないリーダーシップ(リーダー像) - ひかる人財プロジェクト
[3選]最近気になるjavascriptフレームワーク | Developers.IO
遺伝的アルゴリズムでAa自動生成 - ゆとりデータサイエンティストの諸々所感
【新人ディレクター向け vol.6】企画書に使える!信頼できるデータの引用元15選
エンジニアのキャリアの方向性
今年の「うるう秒」がもたらした、いくつかの問題 « WIRED.jp
フロント開発者のための.gitignore
経営とデザインに関する勉強会「UX Sketch」が初開催ーー3名のデザイナーがUXと事業の関係について語る - THE BRIDGE(ザ・ブリッジ)
GitHub、デスクトップ版GitHubの先行テスト版を公開
まつもとゆきひろ氏が「生涯プログラマー」でやっていきたい若手に贈る3つの言葉【特集:エンジニア育成の本質】
HTML5でクロスプラットフォームなデスクトップアプリを開発できる「Electron」とは
デザインを増幅させる 今使えるWeb技術
Uiの新鮮なアイデアをチェック!デザインやインタラクションの工夫が素晴らしいナビゲーションのまとめ

feedlyで保存した記事を取得する

feedly APIを使ってみるにて、APIの使い方を書きました。

もともとfeedlyで保存した記事(Saved for Later)をAPI経由で取得したいなという思いからやってみたのですが、結果的にこの機能はサポートされていないことが判明しました。

なので別の方法で保存した記事を取得するべく、Web側の要素から情報を引っ張るようにしました。(APIは使わないので、前の記事に書いてあることは不要です!)

できたもの

  • feedlyのWebサイト下部に、保存した記事一覧を表示
  • リンクになっているため、コピペで転用が楽に
  • 用途を広くするため、JSON形式も表示 f:id:masayuki610930:20160604121742p:plain

使い方

feedlySaved for Laterにアクセス

一番下にスクロールダウンし、"End of feed"を表示する f:id:masayuki610930:20160604122438p:plain

ブラウザの開発ツールを開き、コンソールを表示する。

GitHubにあげている"getSavedFeedlyArticles.js"をコピーして、コンソールに貼り付けEnterで実行。 f:id:masayuki610930:20160604122620p:plain

最初の画像のように、保存した記事一覧とJSON文字列が現れます!

最後に

APIが使えなかったのでスマートではないですが、もともとの目的であるfeedlyで保存した記事を取得することができました!

Webコンソールはこのように使い勝手がいいので、今後もいろいろ試してみたいと思います!

ちなみに、実際に私が保存した記事を全部乗っけてみました!今までfeedlyで保存した記事を並べてみる

『MTL勉強会「UX Sketch」vol.7』に行ってきた

Media Technology Labにて開催されたUX系の勉強会に行ってきました。

イベントURL

今回のテーマとして「UXと事業計画」が掲げられており、

についてのお話が聞けました。

以下内容と感想です。


AWA

AWAイメージ

目指すべきところとそのPoint

  1. ワクワクするリコメンドの精度
  2. おしゃれなデザインと初心者でも感覚的に使いやすいUI/UX
  3. ストレスフリーのクイックな反応と音質
1. リコメンドの精度
  • 自分向けじゃないと主されたら終了
  • 特定の感性のみで楽曲を表示しない
  • 音楽は人それぞれ独特の世界観を作りやすい
2. おしゃれさと使いやすさ
  • 現実世界にある動き(ギャップレス)
    • 伸びる表現はしない
    • 前後関係を表現
    • 位置関係の統一
    • 動きとスワイプの速度を連動
    • 要素を遷移に合わせてアニメーションさせる
  • プラットフォームの標準に準ずる
  • サービス内の要素に統一詠を落たせる
    • 同じ要素の形は同じ
    • 色も統一
    • ヘッダーもページの役割にあわせて色・フォントを使い分ける
3. ストレスフリー

ユーザーの行動を阻害しない

  • 通信を意識させないシステム
    • 最小限しか通信をしない
    • 高速なストレージの使用
  • ローディング
    • 触れるようにする
  • チュートリアル
    • 量を減らす
    • 強制しない

与える体験

  • 音楽を聞く、に直結したアクションが最上級
  • 人それぞれの世界観があり、フラットに

まとめ

  • 押し引きをシンプルに、メリハリつける
  • サービス側のエゴの排除
  • 表面のダサさはコンテンツの印象にも影響する
質疑応答
  • 主観の排除は?

    • アメリカ、イギリスのAppStoreのおすすめアプリを片っ端から使ってみる。
  • ビジネスプランとして、ターゲットはどこ?デザインの焦点はそこにあてた?

    • メインターゲットは全員(世界中の人)であり、メインターゲットはいない。
    • だからこそ、今日話し合ったような内容を通して、誰が使ってもわかりやすいようにするというのが結論。

感想

実際に使ったことのないアプリだったのですが、なんとなく「かっこいい!いけている!」プロダクトだという認識はありました。その感覚がどのようにして創り出されていたのか、ちょっとわかったような気がします。

自分がダサいと思うものはダサい、というわかりやすい軸を指標にしつつ、コンセプトとしては非常に現実的に実世界から漏れないように注意が払ってあるものでした。

事業計画的な観点で考えると、音楽と言うもののイメージが人それぞれで異なることに対し、どうそれを許容するデザインをつくるか。というものがキーであったのでしょう。

ちなみに、内容についてはこちらを参照するとより知れるかもしれません。


BrainWars/BrainDots

BrainWarsイメージ

デザインとは

  • 装飾でない
  • コンセプトを磨くこと

編集業界にいた時、先輩に言われたこと

  1. 徹底的なリサーチ
  2. 企画は3行
  3. 企画は100本ノック
ITでは?
  1. 類似サービスの研究
  2. 人目でわかるデザイン
  3. デザイン案は100本ノック

方針

  • シンプルなフラットデザイン
  • 直感的に老若男女が楽しめる
  • 非言語化で翻訳コストカット

まとめ

  • コンセプトが強いほどいいUX/UIが導かれる
質疑応答

-ローカライズはどこまで? - 殆ど無い。絵で表現してしまう。ピクトグラムとかそういう考え方。

感想

世界に脳トレアプリを打ち出したいけど、翻訳とかにリソースを避けないので非言語化を徹底した。というこここそ、事業計画とUXの交差点であったのだろうと思いました。

具体的な方策は一切示されていなかったですが(終始両アプリの宣伝でした)、言語の壁を取り払うことで世界をマーケットに出来るんだという実例を目の当たりにできました。

世界にユーザーをもつ日本製のアプリを知らなかったので、嬉しく思いました。


くらしの基本

暮らしの基本イメージ

ユーザーの気持ちがわからない問題

スタッフかつヘビーユーザーという存在

  • 異質な存在
  • 仮設「ヘビーユーザになればユーザーファーストな開発ができる」

カッコイイデザインにしない理由

  • 100年価値のあるアーカイブにしたい
  • 最新のウェブデザインはすぐ廃れる
  • カコイイデザインは、親しみづらい印象を受けう人がいる
気をつけていること
  • 自分が素敵と思った瞬間を伝える
  • ユーザーに楽しさを疑似体験してもらう

まとめ

  • ユーザーファーストを追求することで、デザインも経営も確度の高い判断ができる
  • ユーザーの楽しみを増やすために、まず自分たちが楽しむこと

質疑応答

  • デザイナーをしながらエンジニアリングの知識をどうやって得たか
    • 実務を通してやってみた。コードレビューの文化がその土壌をつくってくれている。
  • クックパッド本体とのデザインやターゲットが違うと思う。どういう相乗効果が?
    • ユーザー向けの効果:クックパッドの物足りなさを埋める。
    • 社内向けの効果:社内でコンテンツをつくる文化により、会社の「できる」意識をもたせる。

感想

お話の中で、「〜〜〜問題」というタイトルを掲げており、そのやわらかさに一目惚れしました。いつか人前に立つ際は真似したいと思います。

どうやったらユーザーのことが理解できるか、という悩みに対し出した仮定「ヘビーユーザになってみる」に至るは非常に納得ができ、一方で当たり前のように思えました。

しかし、この方のすごいのはそれを「体現」したことだと思います。3ヶ月間毎日クックパッドに投稿をし、料理の楽しみを知り、ユーザーの気持ちを得て行ったそうで、その覚悟は本当に恐れ入るばかりです。。。

どうやったらより良くなるか、を今後考えるとき、その悩みを切り開いてくれそうなアイディアを得たような気がします。

Yahoo! Messengerのログイン状況を得るAPI的なものの使い方

チームの配属が10月にあり、それ以降業務中の連絡手段の一部でYahoo! Messengerを使っています。

といってもご存知のとおり(?)Yahoo! JapanとしてのYahoo! Messenger終了しており、アメリカのYahoo!のサービスを使っています。

f:id:masayuki610930:20151222004333p:plain

今回はこのYahoo! Messengerのログイン状況を簡単に知る方法を書いてゆきます。

今回の内容

  • Web API っぽく利用する
  • 既知IDのユーザーが現在メッセンジャーにログイン中かわかる
  • 非推奨の方法かもしれない(後述)

方法

アクセスポイントはこちら。

http://opi.yahoo.com/online

パラメータとして次の3つがあります。

u m t
対象のID gもしくはa 数字

パラメータu

ログイン状況を知りたい、ユーザーIDを指定します。

パラメータm

ここでAPIの返却値を、画像でもらうか、テキストでもらうかを指定します。

gの時はhtmlが返却され、その中にはimgタグが入ってたりします。

aのときは、テキストで結果が返ってきます。

パラメータt

このパラメータは種類を指定します。

m=gの際はtが受け付ける範囲は0〜24で、

m=aの際は0〜1です。

実際にやってみる

ブラウザからやってみる

http://opi.yahoo.com/online?u=testid&m=g&t=0

で試しにブラウザからアクセスすると、(たぶんこんなIDはないから)

f:id:masayuki610930:20151221234928g:plain

という画像が返ってきます。(具体的なHTMLの中身は各自でご確認を。)

実際ユーザーがログインしているときは、

f:id:masayuki610930:20151221235524g:plain

と画像が変わります。

実際のログイン判定

上記のような画像が返ってくる指定の際、実はユーザーがオンラインかオフラインの判断がやりづらいです。というのも、返ってくる文字列は同じなんです。

ということで、おとなしくm=aを指定し、文字列で返却してもらいましょう。

http://opi.yahoo.com/online?u=testid&m=a&t=1

ブラウザからアクセスすると、

00

が返ってきます。(実際はpreタグの中にある。)

これがログイン時は

01

となります。

ということで、これをサクッとphpで書くと、次のようになります。

Yahoo! Messengerのログイン状況をチェックする

簡単ですね!

注意点

最後に注意点です。

冒頭にもお伝えしましたが、この方法は非推奨なものかもしれません。理由としては次のとおりです。

  • 公式ドキュメントを探してみたのですが、記載が見つからない
  • いつ使えなくなるか不明である(ドキュメントがないので)
  • 使用済みアカウントの探索に使えてしまう

とくに、3つ目のおかげでこのやり方のグレー感がものすごくあります(個人的な感想ですが。)

なので使う際は、このあたりの理解をもって、試してみるようにしましょう!


参考にしたサイト:http://shareourideas.com/2010/03/25/yahoo-messenger-status-api/

「プロダクトオーナー祭り2015」に行ってきた

プロダクトオーナ祭り2015に行ってきました!

ここでいうプロダクトオーナとは、アジャイル開発手法でいうところのプロダクトオーナがそのままドンピシャのものです。

ですがアジャイルそのものに囚われるのではなく、良いプロダクトを創るるために、ディレクターやマネージャー(あともちろんプロダクトオーナも!)はどんなスキル・マインドが必要か、についての話しがたくさんありました。

会場に来られていた方も、プロダクトを何かしらコントロールする立場にいる方が多くいられるようで、おそらくこの辺りのズブの素人は私だけだったように思っています。

初めて聞く言葉たち

プロダクト作成のための方法論の話では、今まで私が聞いたことのない言葉ばっかりで戸惑いました(というか、場違い感を強く覚えましたw)。

  • ポジジョニングマップ
  • バループロポジションキャンバス
  • リーンダイアグラム
  • 事前期待設計
  • ゴールデンマンダラチャート
  • ビジネスモデルキャンバス

新卒研修でスクラムを1ヶ月やってみた程度の私にはなんのことやらサッパリ...

ただこのようなモノたちがあると分かったので、今後これらの勉強をしていくステージに行かねばと思いました。

要求開発方法論

講演の中で印象深かった「要求開発」という言葉。意図としては、要求はその辺に散らばっているものではなく、作り上げていく必要がある!というものでした。

ユーザーの要求は全て「正しい」ものであるが、ビジネスや経営に繋がる「真の正しい要求」は一部でしか無い。

ユーザビリティーテストをやった時のことを思い出したのですが、その際、テスト結果から考えられる改善案の良し悪しを決めるのにかなり戸惑いました。

このようなときに、いかに "ビジネスや経営につながっているか" を軸にするのは正義なように思います。

100円プロトタイプ

今回のイベントにはワークショップも多くありました。その中で「100円プロトタイプ」というUX/UIまわりのワークショップに参加しました。

世の中にプロトタイピングツールは沢山あれど、紙ベースのプロトタイプ作成は、非常に楽に・早く・触らせながら意見を求めることができると人気です。今回は、付箋を使って画面遷移を表そうというものでした。

実際に渡しが作ったものがこれです。iOS版のヤフー天気アプリの模写(?)です。

f:id:masayuki610930:20151129223331j:plain

色の違う付箋を使ってユーザーのアクション状態を見える化し、またレイヤーを明確に表すことができます。

下記のようなメリットがあると感じました。

  • 見た目で状態がわかりやすい
  • UX/UIの検討の際に色々いじりながら理解を深めていくことができる
  • 汎用性の高いパーツを洗い出せ、実装者もそれを意識してコードに落とし込める

実際に作っている時もたのしく、意外と手早く出来たのでおすすめです!


おわりに

私にとっては少し背伸びした感満載のイベントでした。

ですが、会場で聞いた色々な手法や考え方が当たり前になっている自分を目指します!加えて、今できることは何かを考え、「見える化」もしていきたいと思います!

素敵な場を提供してくださった皆さん、ありがとうございました!!


イベントの関連資料

きっと他にもあるはず...(見つけたら更新します)