やまろぐはてな

yamanokuの技術メモとか戯言。真面目に見たり見なかったりしてください

社内分報 ver 2.0について

みなさんこんにちは今日はSlackでの分報(ぶんぽう)について触れてみます。

おさらい

yamanoku.hatenablog.com

分報分からん人向けに言うと、1日のことを報告する日報を分刻みレベルで今何しているかをSlackとかのチャットツールで自分用のチャンネルを作って報告するというもの。(詳しくは以下を御覧ください)

c16e.com

手間だろとはいうのは確かにありますが、今その人がなんの作業をやっているかという可視化と、不安点や疑問点を書くことによって問題点の洗い出しができたりと、業務する上で分からなかったことが浮き彫りになるという試みのもと行われていました。去年くらいにもウチでも導入してみてました。

1.0での問題点

ウチの分報は基本ディレクター陣が制作陣に対してどれくらいの作業量なのか、そして今彼らは何をしているかを把握するためのものとして機能させていました。それを導入してからまるまる1年経ってどうなったか、というところで振り返ってみて上がった問題について挙げてみます。

  • いちいち書くのがダルい
  • 報告=今この作業をしているというのが判明する
  • 作業量の重さが分からない
  • どれくらいの作業量になるかの報告がしづらい
  • もっと有効に使えないか

一番問題となっていたのが「報告=今この作業をしているというのが判明する」ということで、これはその人の抱えるタスクの全体量の中でそれがどれくらいを占めるものかを把握できないのと、残りは何が残っているかを把握しづらいというのがありました。

タスク管理に関してはbacklogを使用してそれぞれのガントチャートでどの程度あるのかを朝礼時に確認するなどして問題があれば調整や他の人に移動するなどがありますが、その日のタスクや明日以降にかかる進捗度をbacklogのみで判定するのは難しいのと自分たちは基本Slackに貼り付いているので、既存の分報事態をバージョンアップする必要があるなと思いました。

バージョン2.0への移行

既存の問題点を解消するために運用方法を以下のように変更してみました。

次回やることリスト・今日やるリストの追加

  1. その日の終わりに次回やることをリストにして分報に記載
  2. 翌朝までに追加案件があればコメントいただく
  3. 次回やるリストに関してスケジュールが難しそうなときは朝礼時に相談する
  4. 今日やることを分報に追加

いわゆるTODOリストとして機能させようとしております。

次回やるリスト --- これは当日最後に記載する

  • A案件 レスポンシブコーディング
  • B案件 お気に入り上限数変更修正
  • C案件 作業見積もり確認
  • D案件 品質チェック対応
  • MEミーティング

追加コメント --- これはやるリストの間にあるもの(なくても良い)

***:@yamanoku 明日の作業でE案件の修正作業がくると思うので担当お願いできますでしょうか。

今日やるリスト --- これは当日最初に記載する

本日中対応

  • A案件 レスポンシブコーディング
  • D案件 品質チェック対応
  • E案件 修正対応

できれば対応

  • B案件 お気に入り上限数変更修正
  • D案件 品質チェック対応

ミーティング

  • MEミーティング(11:00〜11:30)

TODOとしての使い方

上記のようにリスト化するのは必須なのですが、よりタスクを分かりやすくするために以下2点も追加

  • 現在やっている案件がどれかを明確化する
  • 終わった案件は打ち消し線や【完了】など記載して作業時間を書く

f:id:cardboarder:20161226001249p:plain

イメージとしてはこんな感じ。別に絵文字なり打ち消し線は自由でOK。むしろなにが終わってなにを進行しているかを明確化させる以外のことは自由にやってOK。

導入してみて

自分はいちいち記入することよりも、1つの投稿を編集してTODOよろしく管理するほうがやりやすいのでよかったのですが、今のところ他の作業者も良い感じのようです。あとはこれをディレクターやマネージャー陣がスケジュール管理に役立て欲しいなと思うところはあります。

それと改めてSlackのサービスがもつ柔和性というか何にでも使えるという良さを再認識しました。分報は特にサービスやAPIを利用してやるものではないのですが、チャットサービスを利用してアレコレ表現できるのはすごいと思います。

最近だとゲームも作れるみたいとも聞きました。もちろん何かしらサービスとも連携できるのでもっと複雑なこと&簡易的にできるものがあれば探ってみたいです。

とはいえまだまだ導入してみたばかりなので、今後不満点や改善点があがれば随時ブラッシュアップして対応していきます。

こちらからは以上です

エンジニア立ち居振舞い : 誰がどう触っても良いようにつくる

お題「エンジニア立ち居振舞い」

マークアップなのかフロントエンドなのかいまいち良く分からない位置付けに居ますが、自分の中で大事にしていることについて。

タイトルの通りなんですが簡単な例でいくと、jQueryでトグルボタンを実装する時に

$("#button").on("click",function(){
  $(this).next().slideToggle();
});

という風になると思う。でもこれには問題があって、ボタンを何度もクリックすると律儀なまでにトグルする動作が押された回数分繰り返されるのでボタンを押すのを止めても動作し続けてしまう。

なので以下のように対応する。

$("#button").on("click",function(){
  $(this).next().stop().slideToggle();
});

これはstop()メソッドを使用することでトグルしようとする動作を一度ストップさせるので、押す→トグル動作の間にボタンを押してもその動作をキャンセルして次の動作へ移行させることができる。

動作イメージは以下よりどうぞ。

https://jsfiddle.net/ft21p1cy/2/

これは非常に単純な例ですが、ユーザーはどういった操作をするかはエンジニアには検討が全くつかない。我々は「1回クリックする」だけのことを考えますが、間違って2回クリックしてしまうとその人は「何だこれは」という風になってしまいます。たった1つのメソッドを追加するでだいぶ使いやすくなるのに、そういったことに気がつけないというのが一番怖い部分です。

だからどんな人がどのようなシチュエーションで弄ったとしても「出来る限り」平等なユーザー体験をもたらさなければならない、というのが私たちの使命なのだと感じています。

こちらからは以上です

ScopedCSSを使って思ったこと

Scoped CSS | Introduction

今個人的にVueを使ってアレコレ試しててVueコンポーネントを使うためにVue-loaderを導入しており、中でtempleteとstyleとscriptを一気に記述できるんだけど、styleで使えるscoped-cssECSSの設計思想にうまく合いそうだなと思う。

ecss.io

理由としては1つのコンポーネントに対して、必ず独自のクラス付けをして他のコンポーネントには上書きが起きないようにするみたいな考え方なので。

ECSS、とにかく長生きさせるためには誇大化してもしょうがないみたいなスタンスだけど、webpackとかでjs内に全部ひとまとめに出来たりするのがあれば、その辺についても深く考えなくてもいいかもしれないとか浅はかながらに思っています。

今はVue-loader使ってるけどPostCSSとかで使ってみてもいいかもしれない。(こっちはやったことないので憶測で言ってます)

www.npmjs.com

実例

<style>
/* 共通のスタイル */
</style>

<style scoped>
/* 特定のコンポーネント用スタイル */
</style>

ビルド後のイメージ

f:id:cardboarder:20161113235320p:plain

これをビルドすると

f:id:cardboarder:20161113235340p:plain

こんな感じになる。VueなんでIEとかは厳しいのかと思います(IE無視していいなら別に大丈夫かと)

Jadeのprettyはアテにならなかった話(と今更ですがPugについて)

経緯

Jadeは通常何もせずコンパイルするとこうなる

f:id:cardboarder:20160923211302p:plain

そこでgulpとかのオプションでこう設定するとインデント維持して見やすくなる

var jade = require("gulp-jade");
 .pipe(jade({
   pretty: '\t',
 }))

f:id:cardboarder:20160923211622p:plain

だいたいはこれでよい。

ただコーディングガイドラインで「インデント除去してください」みたいな指示が来た時困る。

問題点

prettyに関する情報が少ないのでひとまず勘で「\t」としているところを「\v」にしてみた。

f:id:cardboarder:20160923211942p:plain

ブラウザでパッとみた感じは良さそう。だが、

f:id:cardboarder:20160923212036p:plain

ソースは文字化けしとるやないかい。

対応策

良さ気な情報ないしJadeのオプションに頼るのはもうやめよう。そうだnpmだ。

www.npmjs.com

var gulp = require('gulp');
var jade = require("gulp-jade");
var outdent = require("gulp-outdent");
gulp.task('jade', function(){
  gulp.src('*.jade')
    .pipe(jade({
      pretty: '\t'
    }))
    .pipe(outdent())
    .pipe(gulp.dest("/"));
});

f:id:cardboarder:20160923213706p:plain

これでOKでしょ。npmパッケージで柔軟に対応できる男になりたい

Pug

f:id:cardboarder:20160923215134p:plain

上記インデントの件とは別ですが、Jadeが既存の商標と衝突してたみたいでPugに改名していたそうです(最近知った)

去年の12月…

github.com

Jade特に考えずに使うならそのままでいいけど、ほどよいタイミングでPugに乗り換えましょう。拡張子以外書き方はだいたい今まで通り。

こちらからは以上です

f:id:cardboarder:20160923215509p:plain

HTML5 Conference 2016 行ってきたよ

events.html5j.org

自分のまとめです。


Reactの最新動向とベストプラクティス

@koba

speakerdeck.com

この内容の通りです。https://getstorybook.io/とかhttps://storybooks.io/は視覚的に確認できるのがめっちゃ便利だと思いました。

あと会場内でのReact体験者 - React業務経験者 = だいぶ少ない印象でした。


webのグラフィックス2016

WebGL事例 - @mattari_panda

www.slideshare.net

コロプラの中の人。今回はサイトで使うWebGL(というかThree.js)の紹介。簡単なものから導入してみるのはよいことですね。

WebGLパフォーマンス - @emadurandal

https://www.icloud.com/keynote/09q5bI7F3WA9tdK17J6BIt4hg#HTML5%E3%82%AB%E3%83%B3%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9WebGL%E9%80%9F%E5%BA%A6%E6%9C%80%E9%81%A9%E5%8C%96

パフォーマンスを測る方法など。CPU側とGPU側でボトルネックになり得る箇所があるかもなのでそこを履き違えないようにという感じ。

CPU側(Javascript部分とか)は描画処理以外でもネックになりえている可能性があるので調査は割としやすいかもだけど、自分はGPU側はあまり知り得てないので使うときには軽く触れておくといいかもしれない。

あとThree.jsなどのライブラリには内部にWebGL命令が書かれているので最適化は難しいが、チューニングの仕方を知ったりやノウハウを集めていく(Stackoverflowとかで)やり方がよい。

他資料は以下より参照 https://www.icloud.com/keynote/000hhaE2RGqEe9gdi1evUinqA#GLSL%E6%9C%80%E9%81%A9%E5%8C%96%E3%81%B8%E3%81%AE%E9%81%93


Material Design for Web

@taquo

Google Developer Relations所属。プレゼンというか間のとり方上手いなという印象だった。

様々なデバイスへの対応

歴史

4,5年前

GmailAndroid Gmail、Mobile Web Gmail 実はデザインはすべてバラバラ

2011

Project kennedy - ユーザー体験を統一化しようプロジェクト 黒帯メニュー部分がプロジェクトの集大成

Holo フレームワークが登場 ↓ デスクトップとAndroidで違う…

2014

Material Design誕生 異なるプラットフォームでアクセスしても平等なアクセスが出来る ↓ Googleサイト、アプリ以外にも様々なサードパーティでも利用できるように マルチデバイス・クロスブラウザ問題の解消をすすめる

  • Tangible Surface (物質的なデザイン) → デジタルな紙で表現
  • Print Like Design (印刷物デザイン) → グリッド計算 1dp → 約8px
  • Meaningful Motion(意味のあるモーション) → 現実世界の動きに準ずる

アプリケーションコストを下げられるのではないだろうか?

Use Case

Framework

  • PolymerPaper Elements
  • Angular Material
  • Material Design Light

Layouts

  • ai frameworks
  • Device metrics
  • Resizer

Fonts

Icons

  • Material Icons

Summary

design.google.com

デザインフレームワークに縛られてほしくない

Anouncement

コミュニティ(Slack) http://design-jp.herokuapp.com


協働のためのデザイン思考の再構築

@yhassy

デザイナー エンジニア 各自のコミュニケーションが永遠の課題

デザインとコードの同時進行が最近の動き 「デザイナーはコード書くべき、ビジネスを知るべきだ!」ニーズ

ツールで解決

Sympli

パターンを考える

UI構築のスピードアップ

一定以上の品質担保

  • ある程度のパターン言語を作るべき
  • ユーザーが最低限満足するツールを作るため
  • あらゆる状況に対応できるように汎用性のあるもの

パターン言語

ATOMIC DESIGN

デザインの最小要素とは何か?

MATERIAL DESIGN

Bootstarp

フォースプラットフォーム、すべてで同じ体験をする

自社スタイルガイド、パターン言語をつくる

例:MailChimp

  • 利用者ニーズに最適化するUI
  • 製品・サービスに合う名称

そもそもの大きな問題

デザイナー… 全体構成から詳細部分をつくる → 部品から作れない

エンジニア… パーツ単位から全体のサービス → 一貫性がないと二度手間

プロトタイプツール

invision

考え方を合わせるアプローチ

スタイルガイドの作成など ← ただし必ずうまくいく訳ではない

今考えられる解消の仕方

エンジニア

ドメイン駆動設計 DDD(言葉のズレの解消)

ドメインモデルーーーーーユーザーの目的

デザイナー

オブジェクト指向UX

ユーザー像 → シナリオ → オブジェクト化

コンテンツモデル(例)

レビュー

  • タイトル
  • 本文
  • 概要
  • 日付
  • アイテム --- 名前、概要、価格、発売日、メディア、ブランド
  • タグ
  • 評価
  • 筆者

オブジェクトで考えよう、言葉を合わせよう

いったいどういうコンテンツを設計しようとしているのか?

JOB TO BE DONE

イノベーションのジレンマ

JOB

どの製品・サービスでもお客様に「仕事を与えられている」という考え

ユーザー属性は違う…でも同じ目的がある(20代女性、40代男性でも自分の写真を「知人に共有させたい」)

Facebookの写真機能は知人と一緒に見て楽しむ

ユーザーの動機、求められる結果を突き詰める

  • 状況 … レストランで"食べ物"がきた時
  • 動機 … 美味しそうな"写真"が撮りたい
  • 結果 … いい"場所"を知っていると思われたい・"お店"に来て欲しい…願望

ユーザーインタビュー, 仮設検証

こんな機能はどうだ?こう使って欲しい

ユーザーの求めている結果に対して詰めてゆく!


AtomSublime Text、WebStorm に Visual Studio Code、四大エディター真夏の大決戦!

Sublime Text派なんですが、推しの人がそこまで推しておらずいいかげんにしろって感じだよ(怒る)。WebStormは有料だからすごかった。

Atom

中島 滋 ledsun

マルチプラットフォーム

ユーザー数 100万人 1500万ダウンロード

標準機能

カスタマイズ方法

  • エディタ設定
  • snippet
  • パッケージ4600以上
  • テーマ1500以上

パッケージの例

atom-beautify

  • コードフォーマッター

hyperclick

  • 関数・変数定義へのジャンプ
  • 言語毎のサブパッケージ ex:js-hyperclick

やっててよかった話

1 マークダウンで書きたい

  • markdown-preview(標準機能)
  • 標準機能(ctrl+shift+m)

2 Railsアプリケーションの修正、slim記法をやるとき

3 html文章を組む時全角半角が混ざっている時

  • japan-util
  • 選択範囲を修正

Sublime Text

こもりまさあき

基本概念

必要最低限の機能だけが搭載されたテキストエディタ

いまどきのGUIエディタの大本

何気にかゆいところに手が届くもの

拡張性の高さ

今はいろんなエディタにも対応されているが…

言語や技術にも素早い対応

今はいろんなエディタにも対応されているが…

WebStorm

山本裕介 @yusuke

  • JetBrains製のIDE
  • 拡張・カスタマイズ不要
  • 有料 ¥5,940~

機能例

  • Github Isuue検索できる
  • ブランチ作成できる
  • コミットのブランチをする
  • color Pick

Visual Studio Code

井上章 Microsoft エバンジェリスト

機能

ルート起点でcode .で起動

terminal起動してコンパイラーを走らせられる

Nodeや.NET/ASP.NETほかウェブブラウザでの環境でもデバッグできる

Visual Studio Code Extensions | Visual Studio Marketplace


個人的なこととしてはプロスマブラーの人が来ていたり、@Stocker_jpの中の人が目の前の席に座っていたのですげーってなりました。

twitter.com

色々他にもセクションはあったと思うのでそこらへんのまとめは他の人にまかせる。というか普通にセッションスライドまとめとか公式で作って欲しい。

こちらからは以上になります。