「プロダクトオーナー祭り2015」に行ってきた
プロダクトオーナ祭り2015に行ってきました!
ここでいうプロダクトオーナとは、アジャイル開発手法でいうところのプロダクトオーナがそのままドンピシャのものです。
ですがアジャイルそのものに囚われるのではなく、良いプロダクトを創るるために、ディレクターやマネージャー(あともちろんプロダクトオーナも!)はどんなスキル・マインドが必要か、についての話しがたくさんありました。
会場に来られていた方も、プロダクトを何かしらコントロールする立場にいる方が多くいられるようで、おそらくこの辺りのズブの素人は私だけだったように思っています。
初めて聞く言葉たち
プロダクト作成のための方法論の話では、今まで私が聞いたことのない言葉ばっかりで戸惑いました(というか、場違い感を強く覚えましたw)。
- ポジジョニングマップ
- バループロポジションキャンバス
- リーンダイアグラム
- 事前期待設計
- ゴールデンマンダラチャート
- ビジネスモデルキャンバス
新卒研修でスクラムを1ヶ月やってみた程度の私にはなんのことやらサッパリ...
ただこのようなモノたちがあると分かったので、今後これらの勉強をしていくステージに行かねばと思いました。
要求開発方法論
講演の中で印象深かった「要求開発」という言葉。意図としては、要求はその辺に散らばっているものではなく、作り上げていく必要がある!というものでした。
ユーザーの要求は全て「正しい」ものであるが、ビジネスや経営に繋がる「真の正しい要求」は一部でしか無い。
ユーザビリティーテストをやった時のことを思い出したのですが、その際、テスト結果から考えられる改善案の良し悪しを決めるのにかなり戸惑いました。
このようなときに、いかに "ビジネスや経営につながっているか" を軸にするのは正義なように思います。
100円プロトタイプ
今回のイベントにはワークショップも多くありました。その中で「100円プロトタイプ」というUX/UIまわりのワークショップに参加しました。
世の中にプロトタイピングツールは沢山あれど、紙ベースのプロトタイプ作成は、非常に楽に・早く・触らせながら意見を求めることができると人気です。今回は、付箋を使って画面遷移を表そうというものでした。
実際に渡しが作ったものがこれです。iOS版のヤフー天気アプリの模写(?)です。
色の違う付箋を使ってユーザーのアクション状態を見える化し、またレイヤーを明確に表すことができます。
下記のようなメリットがあると感じました。
- 見た目で状態がわかりやすい
- UX/UIの検討の際に色々いじりながら理解を深めていくことができる
- 汎用性の高いパーツを洗い出せ、実装者もそれを意識してコードに落とし込める
実際に作っている時もたのしく、意外と手早く出来たのでおすすめです!
おわりに
私にとっては少し背伸びした感満載のイベントでした。
ですが、会場で聞いた色々な手法や考え方が当たり前になっている自分を目指します!加えて、今できることは何かを考え、「見える化」もしていきたいと思います!
素敵な場を提供してくださった皆さん、ありがとうございました!!
イベントの関連資料
- Twitter #postudy
- POStudy 〜プロダクトオーナーシップ勉強会〜とは
- 次世代のディストリビューテッド・ワーキングとその中でプロダクトオーナーとして活躍する事とは何か
- POとPOじゃない人の勉強会 出張版 / po-matsuri-2015-b8
- ユーザーの時間軸を含めたプロダクトデザイン
- 外部環境分析のためのコンテクストマップ
- メトリクスによる「見える化」のススメ:No 見える化、No 改善
きっと他にもあるはず...(見つけたら更新します)
「DMM.Study Night フロントエンド勉強会」に行ってきた
「DMM.Study Night フロントエンド勉強会」に行ってきました!
就職で地方から上京してきた私としては、東京での勉強会というのは憧れでした。
インターネットやWebが発展し時間や場所への制限が少なくなってきたとはいえ、こういう機会というのは地方では難しいのが現状だと思っています。このあたりの問題はどうにかなってほしいと思ってますし、どうにかしていかなければと思います。
それはさておき、今回はDMM.comさんが主催する勉強会「DMM.Study Night」。恵比寿ガーデンプレイスタワーにあるDMM.comのオフィスで行われました。
既にこの勉強会を開催しているそうですが、フロントエンドに全面に押し出した勉強会は初めてとのことでした。
4人公演されましたので、それぞれ書き下したメモを載せていきます。
DMMで新規サービス作ったらフロントエンドエンジニアの重要性が浮き彫りになった話
DMMにおいて、フロントエンドエンジニアという役割が明確になったのは1・2年前とのことであり、フロントエンドエンジニアは何をコントロールすべきかを整理してお話してくださいました。
以下内容。
全体
JSよりもCSSのルールぎめが重要。
下記を使っている。
css
- Sassを採用
- 設計はFLOCSSを採用
- 覚えづらいルールは極力排除
- 書式はLinterで制御
- 英名規則はBEM
- スタイルガイドの導入
Sass
ガッツリやると複雑なので、簡易的に以下に限定した
- 変数
- ネスト
- 親セレクタの景初
- コメント
下記は不採用 - 関数 - mixin/extend - などなど...
FLOCSSという考え方
- Foundation
- Layout
- Object
- Component
- Project
- Utillity
Object以下は、作業者のみが触る範囲。リードエンジニアは全体を触る。
- Component: パーツは全て個々
- Utillity: 設計者が用意・作用者は使うだけ
- Project: パーツとは無関係な独立ページ用
ComponentとUtillityで基本的に全て賄う→スピードの向上
スタイルガイド
- Gulpを使って.sccsファイルから直接スタイルガイドを自動生成
設計者が管理するために必要なもの
- CSS import
- Webpac Entorypoint
- などなど
フロントエンドエンジニアがいると
- メンテしやすい
- パフォーマンス高い
- バグが出にくい
Developertools表示しておけばネトゲやってても仕事してる感でる
タイトルからネタ的な話をするかとおもいきや、すごくためになる話でした笑。ChromeのDevelopertoolsを使うことはあっても、単純なブレークポイントくらいしか使ってなかったので知れて良かったです。
以下内容。
条件付きブレークポイント
通信のブレークポイント
- XHR Brakepoints
- call stack で一覧見れる
- 任意の通信を引っ掛けられる
- ポート番号も指定可能
- typeがXHRのリソースは右クリックからリプレイできる
計測ツール
- Networkパネル:コンテンツのダウンロード時間
- Timelineパネル:ダウンロードやレンダリングの時系列
- Profilesパネル:CPUの利用料など
通信周りから調べてみる
次にAuditsパネルを見る
- ネットワーク/ページパフォーマンスの2方向から検査してくれる
- JSまとめろ
- gzipで送れ
Chromeオンリーブラウザゲームがマルチブラウザ対応するまで
マルチブラウザ対応が大変とは聞くけど、その内容を初めて聞くことができました。実際には、はじめからChrome向けに書かれたものを後からマルチブラウザ対応にするのは大変だってのが今回の根本なんですが。
以下内容。(気になった言葉だけ抽出)
- Autoprefixer: CSSのマルチブラウザ対応に使える。ベンダー接頭語を自動付与する。
- Can I Use: 各ブラウザのCSS対応状況を確認できる
- pleeease: Gulpのプラグインで、utoplefixに圧縮、メディアクエリーをまとめてくれる
DMMの闇に触れた話
DMMには金沢にも拠点を持っており、そちらで活躍されているフロントエンドエンジニアの方のお話でした。勉強会後の懇親会でもお話したのですが、非常に楽しい面白い方でした。あちらの方で働き口を見つけたいときには、DMMさんにお話を聞きに行こうと思いました。
以下内容。(気になった言葉だけ抽出)
feedly APIを使ってみる
RSSリーダーとして使っているサービス、feedlyのAPIを使おうとしたところ意外と引っかかったので、使い方を書き残しておきます。
今日(2015/11/19)時点のAPI 、V3で確認をしています。
アクセストークンを取得する
Web APIは様々にありますが、企業が公開しているAPIを利用する際は往々にしてアクセストークンというものが必要になります。
各ユーザーに紐付けられた文字列であり、公開元がアクセスの管理・解析をする目的として必要であるという理解を私はしています。
手順は簡単です。
認証
https://feedly.com/v3/auth/devにアクセスし、いずれかの方法(すでに自身が使っている認証方法)を選択して認証を行います。
メッセージの確認
認証後の画面に記載されている連絡先をチェックします。
リンクへのアクセス
メッセージがfeedlyから送られてきているので、記述されているURLに飛ぶと、
アクセストークンが表示されています。
表示欄は小さいですが、横にスクロールされて結構な文字数となります。(今回試したところ242文字ありました。)
使ってみる
curlで問い合わせ結果をGETで取得してみましょう。
問い合わせ形式はこんな感じです。
$ curl -s -H 'Authorization: OAuth [トークン]' [アクセスURL]
取得したトークンを今仮に "MyToken" という文字列、
アクセスURLをhttps://cloud.feedly.com/v3/categoriesとすると、
$ curl -s -H 'Authorization: OAuth MyToken' https://cloud.feedly.com/v3/categories
となります。
アクセスURLは欲しい情報により異なるので、公式ドキュメントを見てみてくささい。
結果はJSONで帰ってくるみたいなので、あとはこれをパースしてうまく活用すればOKです。
curlのオプションである -s と-H はそれぞれ、
-s : 進捗状況やエラーを表示しない
-H : HEADER HTTPヘッダにHEADERを追加もしくは変更する
という意味らしいです。参考
これでとりあえずアクセスが出来るようになりました!
AndroidのMediaRecorderで録画・録音する際はクラス関数の順番に注意を!
Androidで動画の保存(録画)や音声の保存(録音を)する際、MediaRecorderを使用します。
さくっと使えて便利なクラスなのですが、クラス関数の利用順番がしっかりと決められているので、使用例を載せておきます。
一瞬ハマったので。
AndroidのMediaRecorderを使った録画・録音の設定
順番については公式ドキュメントを読めば一発なんですが、録音のあり/なしをif文分岐で2度書くのがめんどくさく感じて、つい何も考えなしにまとめてしまったりするんですよね。
反省。
MaterializeのCharacter Counterの重複解消方法
前回紹介したデザインフレームワークMaterializeの便利機能に、文字数カウントがあります。
サンプルはこんな感じです。
しかし、ドキュメントにしたがってそのまま書くと、下図のようにカウンターが重複してしまいます!
修正するのは簡単です!
デザインフレームワークMaterializeのcharacter counterの重複解消
.removeで生成されたelementを消してあげましょう!
たったこれだけで、スッキリ解決です!!
Webでマテリアルデザインを簡単につくれるMaterializeを使ってみた
Googleが言い出したマテリアルデザイン。
Android 5.0:LolipoのCMを最近目にしたりしますが、Lolipopが広まってくるにつれ、世の中にのなんとなく認知されてきたかなと思ってます。
このマテリアルデザインをWeb上で表現する際に強力にサポートしてくれるMaterializeというものがあり、最近ちょっとした経緯でこれを使いました。
サンプルとhowtoをまとめたので御覧ください。
github.ioにあげてます。 github.com
公式のドキュメントはかなりしっかりしてていい感じです。が、
- 何ができるか
- どうしたらできるか
という情報の所在と知らされる順番がいまいちにように感じてしまい、だったらせっかくだしと思いまとめた次第です。
間違い等なにかあれば教えて下さい!
角度や方向に対する評価関数
角度や方向に対する評価関数について考えました。
使用例
サッカーを例に考えます。
今ボールを持ったプレイヤーに対して、近くにいる仲間A,Bがいるとき、どちらにボールをパスしたらいいでしょうか?
ゴール近くにいる仲間Aにパスする!と皆さん考えるでしょうが、例えば仲間Aと仲間Bに能力差があり、
能力差:仲間A<仲間B
という場合では答えは難しいです。また、仲間までの距離も考慮に入れたくなります。
いろいろな要素が考えられますが、今回はこのうち「角度」に注目して角度のみに関する評価関数を考えてみました。
普通の考え方
プレイヤーを中心にゴール方向を0度とし、仲間が360度中のどこにいるかを元に考えます。
単純に考えると、0度に近いほど良い評価値を与えればよく、
となり、負数を無視しゼロと置換えて次のようになります。
提案
考え方
先の例で充分な例もあるでしょうが、
- もっとシビアな評価
- もっとメリハリのある評価
を求めるケースもあるでしょう。そこでシグモイド関数を使いこれを解決します。
評価関数
は仲間の角度、
は評価値半減点、
はシグモイド関数のゲインを示します。
評価値半減点とゲインはパラメータ(設定値)であり、評価値半減点に評価値0.5を取る角度の値を、ゲインにはとりあえず5~10の値入れておけばいいです(後述)。
関数をプロットすると、次のようになります。
図の通り、パラメータ評価値半減点により高い評価を与える角度の範囲設定を、ゲインにより評価値のメリハリの変化をつけることが出来ました。ゲインについては実際に試してチューニングすることをオススメします。
注意点
この手法は評価値が極めて低い値を取ることが理論上仕方ありません。プログラムに起こす際は、評価値半減点を閾値として、今回の関数に掛けるかどうかを判断するとよいでしょう。
この点だけを気をつけて頂いて、今回の提案手法をぜひ利用してみてください。
知っておくと嬉しい、ストレージの技術用語
スケールアップ型とスケールアウト型
スケールアップは、サーバーのCPUやメモリーといったハードウエアを高性能なものにして処理性能を上げる方法。一方のスケールアウトは、サーバーの数を増やすことで性能を上げる方法です。後者の場合、1台1台が高性能でなくても、大量のサーバーで同じWebサービスを動かせば処理性能を上げられます。スケールアップより構築コストが安く済む、1台くらいサーバーが停止してもWebサービスを提供し続けられる、というメリットがあります。
SPOF
Single Point of Failureのこと。
単一障害点(たんいつしょうがいてん。英: Single Point of Failure, SPOF)とは、その単一箇所が働かないと、システム全体が障害となるような箇所を指す。情報システム工学や通信、サプライチェーン・マネジメントなどの分野で使われる概念である。単一故障点と訳されることもある。
CVS
Hyper-V 2.0は、「クラスタ共有ボリューム(Cluster Shared Volume: CSV)」という特殊なボリューム・マネージャ機構をWSFCに実装した。これにより、ファイル・システムは通常のNTFSのままに、複数ホストからの同時アクセスを可能にしたのである。
NFS
概要
Network File Systemのこと。サーバ・クライアントシステムの体型であり、サーバサイドのストレージにクライアントからアクセスを行い読み書きを行うことが可能である。
仕組み
NFSプロトコルを利用した通信で行う。一般的にUDPまたはTCPの2049番ポートが利用される。サーバサイドで特定のディレクトリ領域のアクセスの許可・制限をかけ、クライアントはそのアクセスポイントに対しマウントをする。
使用例
- ファイルの共有
- フリーアドレス(どの端末でも自身の環境になる)
- ファイルの保存やバックアップ専用(耐久性の高いHD)
NFSv3/v4の違い
- ステートフルなインタラクションと権限移譲の導入
- クライアントは一時的な排他的アクサセス
- クライアント側のキャッシュ処理
などの変更がv4にあり、セキュリティー面での改善が施された。パフォーマンス的には、メリットがあまりないとの検証結果が出ている。
知っておくと嬉しい、ネットワークの技術用語(その2)
ルーティングプロトコル
BGP
Border Gateway Protocolの略で、AS間の通信交換のために作られたプロトコル。
BGPはTCPポート179番を利用して通信を行います。BGPルータはピアを確立するために、メッセージと呼ばれる形式で機能情報を交換します。メッセージはBGPの状態により数種類存在します。ピアが確立した後は、経路情報を伝達するためのメッセージを定期的に交換し、お互いの持つ経路情報を保持、更新し続けます。 BGPではピアを確立するルータが同じAS間である場合と、異なるAS間である場合とで異なる方式で経路情報を処理します。同じAS間でのピアをiBGP(内部BGP)ピアと呼び、異なるAS間でのピアをeBGP(外部BGP)ピアと呼びます。
EIGRP
EIGRP(Enhanced IGRP)はCisco独自のIGRPを改良した、クラスレスの拡張ディスタンスベクタプロトコルです。 EIGRPでは、クラスレスルーティング、VLSMのサポート、手動集約、ルーティング認証、マルチキャストによる 差分アップデート、DUALを使用したIGP一番の高速収束、レイヤー2でのシームレスな接続、リンクステートの 特性といえるHelloによるネイバー検出と隣接関係の維持、ルーティングのループフリーなどが実現されており、 Cisco製品だけで構成された小規模、中規模ネットワークにおいては最も適した IGP と言えることができます。
OSPF
OSPF(Open Shortest Path First)は、ルーターやレイヤー3(L3)スイッチがパケットの転送先を動的に決定するためのルーティングプロトコルの一種である。主に中・大規模ネットワークで使う。 L3スイッチでOSPFを動作させると、ネットワークの経路情報(LSA)を他のL3スイッチとやり取りし、ネットワーク構成図(トポロジーマップ)を作る。その構成図から最適経路を判断し、パケットの転送情報であるルーティングテーブルを作成する(図)。L3スイッチはこのルーティングテーブルを見てパケットを送る。
RIP
RIP(Routing Information Protocol)は、IP用のルーティング・プロトコルとして、非常に古くから使用されています。このプロトコルは、UDPのブロードキャスト・データ・パケットを用いて、経路情報を隣接ルータにアナウンスします。この中には、「メトリック」と呼ばれるあて先ネットワークまでのディスタンスを表す情報(ルータのホップ数)が含まれており、ルータを超えるごとに1つずつ加算されます。RIPは、このメトリックを利用してネットワーク・トポロジを把握するため、「ディスタンス・ベクタ・アルゴリズム」に基づいたルーティング・プロトコルと呼ばれています。RIPでは、メトリックがより少ない経路情報が最適経路として使用されます。最大メトリックは15となっており、これを超えた場合は到達不能と見なされます。RIPでは、これらのすべての経路情報を30秒周期で隣接ルータにアナウンスすることにより、情報の更新を行います。
セキュリティー
ARPキャッシュポイズニング
ARPキャッシュを悪用した盗聴方法の一つです。 具体的には、下図のようにARPによる問い合わせがあった際にMACアドレスを偽った応答を相手に返送することで誤った内容を記録させ、以降、本来の宛先とは異なる宛先にデータを送信させようとします。
802.1X認証
IEEE802.1xとは、有線LANや無線LANで使用される認証について規定したプロトコルです。このIEEE802.1Xに対応したLANスイッチのポートでIEEE802.1Xが有効な場合、そのポートにPCなどを接続してもすぐにLAN接続が行われることはなく認証された機器のみが接続されます。IEEE802.1Xは検疫ネットワークでは中核の技術です。
知っておくと嬉しい、仮想化の技術用語
qemu
オープンソースのエミュレータ。ホストにカーネルドライバを必要としない。プロセッサをエミュレートするだけでなく、必要なすべてのサブシステムをエミュレートできる。
kvm
Kernel-based Virtual Machineのことで、Linuxカーネルに搭載されているハイパーバイザ。
KVMは仮想化のためのCPU拡張命令(HVM)をカーネルモジュールを介して使用するQEMUの特殊なオペレーティングモード。
libvirt
仮想化管理用の共通APIを提供するオープンソースプロジェクトであり、仮想間マシンの制御を抽象化したライブラリ。
qemu/kvmの場合VMのハードウェア仕様などを定義するXMLファイルは、標準では/etc/libvirt/qemu/.xmlにインストールされる。同様に仮想ネットワークのXML定義ファイルは/etc/libvirt/qemu/networks/.xmlにインストールされる。
virsh
libvirtのコマンドラインツール。virshツールはlibvirt管理APIを土台にして構築されている。
qemu-img
virshのコマンドの一つ。仮想化ゲストイメージ、追加のストレージデバイス、及びネットワークストレージのフォーマットに使用される。
qcow2, raw
qemu-imgが扱うイメージ形式のこと。qcow2はスナップショットが取れ、ディスク領域を拡張する際、IO性能が極端に劣化する。rawはスナップショットは取れず、ディスク領域を拡張する際のIO性能劣化はqcow2より優れる。
ブリッジ
セグメントとセグメントを接続する機器のこと。LAN同士のパケットのやりとりの橋渡しを子なう。リピータの機能に加えて、MACアドレスを元にフィルタリングを行うことができる。
Linux Bridge
ソフトウェアブリッジを使ってハードウェアをエミュレートできる。仮想化アプリケーション内で仮想NICを設定するなどが可能。
tapデバイス
仮想ネットワークのカーネルデバイスのこと。ソフトウェアで完全にサポートされているネットワークデバイスである。リンクレイヤをシュミレートし、イーサフレームのようにL2で動作する。
OpenStack
オープンソースで開発されているクラウド環境構築用のソフトウェア群。AWSのようなものをじぶん自身の環境でプライベートに構築できるものと捉えるとわかりやすい。各フェーズを管理するもの、認証系を担当するもの、WebUIでかんりできるもの、オーケストレーションを行うものなど、多くのツールがある。