ユニファ開発者ブログ

ユニファ株式会社プロダクトデベロップメント本部メンバーによるブログです。

異邦人としてのデザイナー -UIデザインと現場理解のためのエスノグラフィについて-

こんにちは。ユニファのデザイナー佐々木 勇貴と申します。開発者ブログでは初の投稿となります。よろしくお願いします。

今回自身の投稿もさることながらデザイン系の記事の投稿がユニファ開発者ブログ初となります。

なので、今回はデザイナーの役割を俯瞰しつつ保育活動の支援をミッションとする企業でのインハウスデザイナーの役割は何なのかを考えてみたいと思います。

普段、保育事業に関わられている方サービス開発をされているデザイナーの方などいろんな方に興味を持っていただけたら幸いです。

多様化するデザイナーの役割

近年、ITサービスにおけるデザイナーの役割については大変議論が活発になされていて、「グッドイメージをクリエイションできるのは必須だ」だの、「コーディングやプログラミングもできるべきだ」だの、さらには「ビジネスにも造詣があって経営者と同じ視座で事業について話し合えるべきだ」だのさまざまな意見が飛び交っています。

「デザイナーはなんでもできないといけないのか?」というツッコミと疲弊感が方々から飛んで来そうですが、これについてはできるならどんなことでもできた方が良いというのが個人の感想です。

デザイナーに限りませんが、スタートアップの企業においては職種を超えてスクラムを組んで事業に取り組むことが少なくありません。その際、異なる職種で話し合えるためのプロトコルを持つということがとても重要になります。

デザイナーに求められるエンジニアリングやビジネスに対する理解というのもこのような他者の職種を理解し協働するためのプロトコルの要求と捉えることができます。(「じゃあデザイナーのことは誰が理解してくれるの?」という魂の叫びが聞こえてきそうですがそれはまた別の機会にでも考えたいと思います)

UIデザイナーとしての役割

さて、デザイナーの役割が多様化する一方で、webサービスの開発に携わるデザイナーの役割としてまず間違いなく求められるものがあります。いわゆるUIデザインと呼ばれるものです。

UIの定義に関しては専門家であればあるほど各々に存在しているかと思いますが、ここではサービスのタッチポイントにおいてユーザーが求めるアクションを適切に行えるインターフェイスの設計と定義したいと思います。

ユニファでも例に洩れずUIの設計はデザイナーが先導していきます。

ですが、保育園業務を支援するユニファのサービスでは現場での専門業務に特化したUIが求めれられます。そのため、一般的なwebサービスのUIフォーマットを参照することは少なく、現場での課題をデザイナー自ら発見して独自のUIに落とし込むフローが必要となってきます。

UIデザインの手がかりとしてエスノグラフィ

そこで現場への理解を深めるための手法としてデザイナー自身によるエスノグラフィ調査を取り入れるようにしています。エスノグラフィとはユーザーリサーチの手法のひとつで、主にクローズドのコミュニティの中に観測者自身が参加し、その行動様式や価値観を記録するための手法として生まれました。(同様の手法としてシャードイングがありますが、個人に帰属するような行動様式ではなく園や保育士職というコミュニティに対する理解を深める必要があるためここではエスノグラフィを推奨しています。とはいえ、作業的には大きく違いはありませんが)

通常、2C向けのサービスなどではドッグフーディングなどの手法で開発者自身がユーザーとなることでユーザーの行動を体験しより良いUIを提案していくことができますが、ユニファのサービスは保育園での特定の業務を対象としたものが多く、またその業務での行動を想像では補えない場面を多く含んでいるため、現場に入らせてもらいながら特殊な行動様式を学ぶところからはじめる必要があるのです。

ビヘイビアとインサイトの発見

現場に入らせてもらう際には、自社のサービスのヒアリングやテストは行わず純粋に活動を共にするよう注意がけています。また、その業務が行われている裏で同時に行われている作業や実際の空間など現実的に与えられた条件をよく観察するようにも努めています。

保育を支援するユニファのサービスの多くは、閉鎖的なweb空間での行動で完結するものではなく園児の生活に基づいた非常に有機的な業務サイクルの中で使っていただく内容になっています。

サービスを使ってもらうその空間では常に生きている子どもたちと生活を共にし、その子どもたちの生活を一番に考えたいという保育士さんのインサイトを尊重することがUIを設計する際にもとても重要になってくるのです。

エスノグラフィから見えるUI設計の課題

一方でエスノグラフィで見るものはユーザーの行動様式だけではありません。その行動を規定するような慣習やドキュメントもその観察の対象になります。

どのドキュメントがどのように書かれているかなどの詳細な言及は避けますが、ドキュメントの傾向とUI設計の課題となるポイントを端的に書き出しておきます(選んだ言葉は用語はとして定義さているものではありません)

モーダル:保育園での業務はそのほとんどがモーダルです。園児の生活リズムに合わせて業務が設計されていて、各業務を行う時間・取得する値・記入するフォーマットがはっきりと決まっています。

フォームレス:モーダルと矛盾するようですが、記入業務における書類などは園ごとでの互換性が形式を持たないフォームレスのものが多く見られます。

コンベンショナル:保育園での業務は園内のクローズドの環境で円滑に運用できるよう明示的ではないローカルルールが使われていることがよくあります。先のフォームレスとも通じますが、その園でコンベンショナル(慣例的)に使われているものが重要な意味を持つことがあります。

ここであげた3つの傾向はサービスのUIを設計する際に繰り返し出てくる現場固有の課題です。単純にこれらを解消したUIを提供するのが良いという訳ではありませんが、今後も引き続き向き合わなければいけないと思っています。

異邦人としての役割

さて、今回はUIデザインを行う際の課題とその観察のプロセスを取り留めもなく書いてみました。

サービスをつくる際には自らがユーザーになれるユーザーのコミュニティと近しい距離にいれるかがとても重要だと考えています。

しかし、保育士のような非常に場面が限定されている職域においてのサービスでは開発者が恒常的にユーザーになることは難しくもあります。そこで、サービスをつくる者として自らを異邦人の立場において観察することが意味を持つのではないかと思っています。

今回エスノグラフィについても触れさせてもらいましたが、エスノグラフィの元々の起源は文化人類学に遡り、その手法の根幹には全く異なった文化コンテクストの観察と理解が目的とされています。ですが、ここでは決して同化することは目指されていません

異邦人として内側に入りながら外部として振る舞い続けることで、そのコミュニティの慣習と行動様式を発見し、ふたたびそれを作り変えることが可能になるのだと思っています。行動様式の再設計はとてもデザイナー的な課題であり、異邦人として振舞うことでデザイナーはその真価を発揮できるのではないか。保育活動の支援をミッションとする企業でのインハウスデザイナーを通じてそのように感じています。

今回の記事は以上になります。ご拝読ありがとうございました。

またお目にかかれることを楽しみにしております。それでは。

JIRA + re:dash + Slackで運用にかかった工数を週次で通知してみる

こんにちは、Webエンジニアの本間です。 最近、ランニングを始めまして、業務後に家の近くを走っています。 走り終わると頭の中のもやもやスッと抜けてて、とても爽快です。1人でできるスポーツですし、今後も続けていきたいなーと思っています。

さて話は変わりまして、弊社ではチケット管理にAtlassian社の JIRA を使っています。 チケットは、要望や機能追加、不具合修正などのコード修正を伴うものと、障害調査やエンジニア作業などコード修正を伴わないものがあり、後者を「運用作業」として区別して管理しています。

「運用作業」は新しい価値を生み出さない時間であるため、0かそれに近い値になっていることが望ましいです。 これを減らすためには色々な対策が必要になりますが、まずは「エンジニア自身がどれだけ運用作業に工数を使っているか、日々意識する」ことが大事なのではと考えました。

これを実現するため、毎週どれだけ運用作業に工数を使ったかSlackに通知する仕組みを作ったので、紹介しようと思います。(下のグラフが毎週月曜日の10時にSlackに通知されます)

f:id:ryu39:20180319100536p:plain

続きを読む

NLBで複数AZ構成での挙動

ちゃっす。 ユニファのインフラ鈴木です。

久しぶりのブログです。

花粉がすごいらしいですね!!
最近鼻水とか出ますけど、私は花粉症ではないので関係ないでしょうね…うん

前回に引き続きNLBの事をブログに書こうと思います。
あ、NLBはなんぞやというかたは、公式のブログをどうぞ

aws.amazon.com

NLBの何を書くかというと、複数のAZで複数のターゲットグループが設定されていた場合に、1つのターゲットグループが単一AZの利用になっていた場合どういう挙動になるのかなと言うものです。
では確認していきます。

続きを読む

try! Swift 2018 に行ってきました

f:id:unifa_tech:20180309101205j:plain

ユニファのiOSエンジニアのしだです。
try! Swift 2018 が 3/1, 3/2 ベルサール新宿グランドでありました。

www.tryswift.co

try! Swift 初参加です!
今回は参加者・スタッフ合わせて800名ということだったので規模が大きいです。
他のカンファレンスだと、複数のセクション・ルームがあって聴きたいトークに移動したり、1つのトークが終わると休憩があるけれど、 try! Swift はセクションが1つだけなので移動がなく、複数のトークが続いたあと休憩になるので個人的に楽でよかったです。

また1つの発表の内容が濃くて、clang module、AST、SIL、SwiftNIO、Kitura、CoreML、Charles、AR、Kotlin、vDSP、Sourcery ... キーワードだけ上げても切りがないです。

続きを読む

SORACOM Air SIMのclientで監視設定をしてみた

みなさん、こんにちは。エンジニアの田渕です。 インフルエンザが猛威を奮った冬でしたが、みなさまご無事だったでしょうか? 一番流行っている時期にはユニファ社内でも毎週のように、社員や社員のご家族がインフルエンザになって……という話を聞いていました。 幸い、私は今年かかることもなく今日まで来たので、このまま逃げ切りたいと思っています……。

さて、ユニファが提供するサービスの中にはSORACOM Air SIMを利用しているものがあります。 全体通信量が少なく、速さを必要としないけれど、いつもネットワークに繋がっていたい……!と言う悩みを解決してくれたSIMです。 SIMの状況を確認したり、設定を変更したりするコンソール画面も用意されており、エンジニアではない方でも操作が可能なのですが、日々の運用をしていく上では画面から設定できること以上の諸々を行いたくなってきます。

ということで、本日はSIMの監視設定を画面からではなく、コマンドで行っていきたいと思います。

クライアントのセットアップ

クライアントに関する公式ページはこちら。

dev.soracom.io

コードの公開もされており、詳細な導入手順等はそちらに記載されています。 Macの方は公式の手順に従いインストールでOK。 ちなみに、この記事時点でのクライアントバージョンは「SORACOM API client v0.2.8」です。

github.com

インストール後、早速コマンドを叩いてみると、説明が出てきます。

$ soracom
A command line tool to invoke SORACOM API
 
Usage:
  soracom [command]
 
Available Commands:
  auth               API アクセスの認証を行い、API キーと API トークンを発行します。
  bills              課金に関する情報を確認したりファイルへのエクスポートを行います。
  completion         bash 用の補完 (completion) スクリプトを生成します。
  configure          コマンド実行環境(プロファイル)の設定や表示を行います。
(以下略)

日本語……(感涙)

次に、上記ページに記載してある「How to use」に従ってセットアップしていきます。 セットアップ方法はいくつかありますが、今回はあらかじめコンソール画面にて発行しておいたAuthKeyIdとAuthKeyを利用します。

$soracom configure
--- SORACOM CLI セットアップ ---
/Users/(ユーザー名)/.soracom ディレクトリがなければ作成し、そこにファイル 'default.json' を作成します。
 
カバレッジタイプを選択してください。
 
1. Global
2. Japan
 
選択してください (1-2) > 2
 
 
認証方法を選択してください。
 
1. AuthKeyId と AuthKey を入力する(推奨)
2. オペレーターのメールアドレスとパスワードを入力する
3. SAM ユーザーの認証情報を入力する(オペレーターID、ユーザー名、パスワード)
 
選択してください (1-3) > 1
authKeyId: (発行したAuthKeyId)
authKey: (発行したAuthKey)

監視設定をしよう!

実は簡単なSIMの監視をするだけであれば、コンソール画面から設定出来る内容で十分です。ですが、実際に色々と仕事で利用すると、事細かに設定したくなります。 例えば、「この人がこういう操作したら通知が欲しい」とか「自社のシステムに作業履歴保存しておきたい」とか。。そういう時に利用出来るのがイベントハンドラー機能です。

今回はイベントハンドラー機能を利用し、「あるユーザーによってSIMの速度変更が行われた際の通知をメールで飛ばす」をやってみます。

dev.soracom.io

コンソール画面から設定出来る各種監視も内部的にはこのAPIを利用しているとのこと。 上記公式ページに各種設定のサンプルがありますので、環境さえあれば、コマンドを利用して比較的手軽に試すことが出来ます。

イベントハンドラーの設定は、各種設定を記載したjsonファイルを用意し、そのファイルをコマンドに引き渡す形で行います。

{
  "targetOperatorId": "(対象のユーザーのオペレータID)",
  "name": "SpeedClass",
  "description": "速度変更通知のテスト",
  "ruleConfig": {
    "type": "SubscriberSpeedClassAttributeRule",
    "properties": {
      "inactiveTimeoutDateConst": "IMMEDIATELY"
    }
  },
  "status": "active",
  "actionConfigList": [
     {
      "properties": {
        "executionDateTimeConst": "IMMEDIATELY",
        "message": "SIMの速度が変更されました",
        "title": "通知:SIMの速度が変更されました",
        "to": "(送信したいメールアドレス)"
      },
      "type": "SendMailAction"
    }
  ]
}

これをsoracom event-handlers create --body @{JSONファイルのパス}という形で実行します。

実行後の結果がこちら。

{
    "actionConfigList": [
        {
            "properties": {
                "executionDateTimeConst": "IMMEDIATELY",
                "message": "SIMの速度が変更されました",
                "title": "通知:SIMの速度が変更されました",
                "to": "(送信したいメールアドレス)"
            },
            "type": "SendMailAction"
        }
    ],
    "description": "速度変更通知のテスト",
    "handlerId": "(生成されたイベントハンドラーのID)",
    "name": "SpeedClass",
    "ruleConfig": {
        "properties": {
            "inactiveTimeoutDateConst": "IMMEDIATELY"
        },
        "type": "SubscriberSpeedClassAttributeRule"
    },
    "status": "active",
    "targetDeviceId": null,
    "targetGroupId": null,
    "targetImsi": null,
    "targetOperatorId": "(対象のユーザーのオペレータID)",
    "targetTag": null
}

どうやら無事に設定されたようなので、動作確認してみましょう。 コンソール画面上から一つのSIMの速度を変更してみます。 すると、すぐにメールが届きました!

f:id:unifa_tech:20180301175351p:plain

変更してみよう

ちょっとこのメールだと、何がどう変更されたのかわかんないな……ということで、内容を変えてみます。 先ほどはイベントハンドラーの作成でしたが、今度はもう作成されているものを変更します。 同じく、jsonの設定ファイルを作成し、 soracom event-handlers update --body @{JSONファイルのパス} --handler-id (↑で作成したイベントハンドラーのID) で変更が可能です。

配信するメールのメッセージには、あらかじめ決められた変数を埋め込むことが出来ます。 今回は、「どのSIMが、どう変更されたか」がわかるように、SIMを特定するIMSIと変更前の速度、変更後の速度をメールの文面に入れます。

{
  "targetOperatorId": "(対象のユーザーのオペレータID)",
  "name": "SpeedClass",
  "description": "速度変更通知のテスト",
  "ruleConfig": {
    "type": "SubscriberSpeedClassAttributeRule",
    "properties": {
      "inactiveTimeoutDateConst": "IMMEDIATELY"
    }
  },
  "status": "active",
  "actionConfigList": [
     {
      "properties": {
        "executionDateTimeConst": "IMMEDIATELY",
        "message": "SIMの速度が変更されました。 ${imsi}:${oldSpeedClass} → ${newSpeedClass}",
        "title": "通知:SIMの速度が変更されました",
        "to": "(送信したいメールアドレス)"
      },
      "type": "SendMailAction"
    }
  ]
}

先ほどと同じく、コンソール画面から変更を行ってみます。 無事、欲しい情報の入ったメッセージが送られてきました。

f:id:unifa_tech:20180301193020p:plain

まとめ

今回は、クライアントを利用してSORACOM Air SIMの監視設定をしてみました。 既に似た題材でブログを書かれている方もいらっしゃいましたが、日々拡張されていることもあって細かな部分が変わっていたり、少し用途が違ったりしたので、改めて自分の備忘の意味も込め、書かせて頂いた次第です。 登場当初から言われておりましたが、イベントハンドラーはAWSのLambdaとの連携やAPIを叩くことも出来るなど機能は多彩。 公式サンプルにもある通り設定次第ではSIM操作の履歴を内部的に持つことも出来、色々と使い道がありそうです。

今後も弊社サービスがより使いやすくなるよう、色々なことを試して行こうと思います。

Tinkercad で電子回路をシミュレートする

 皆様こんにちは。ユニファの赤沼です。最近はすっかり IoT ブームで、もともとハードウェア開発の経験がない方でも電子工作に興味を持たれている方は多いのではないでしょうか。今回は電子工作を行う時に便利なサービスを一つ紹介したいと思います。

電子工作時の課題

 電子工作をする時に、特にもともとソフトウェア開発をされていた方が感じる課題には例えば下記のようなものがあるのではないでしょうか。

  • 実際に電子回路を組んでみないと設計が正しいのか、ちゃんと動くのかがわからない

  • ちゃんと動かなかった時にどこに問題があるのかがわかりづらい

  • 回路のつなぎ方を間違えるとパーツが壊れたり発火したりする可能性がある

 ソフトウェアの開発であればターミナル上でコードを書いて少しずつ動かして確認することができますし、デバッグも print デバッグや デバッグツールでデバッグポイントを設定してステップ実行したりすることが可能です。それにコードが間違っていたとしても普通はPCが壊れたり燃えたりすることはありません。この辺りのことは電子工作を始める時にとっつきにくさの原因となる部分ではないでしょうか。

電子回路の動作をシミュレーションできる Tinkercad

 上記のような課題を解決するための一助となるサービスとして、今回は Tinkercad というサービスをご紹介します。

www.tinkercad.com

 サービス名に cad と入っている通り CAD ツールなので 3D モデルの作成などが行えるのですが、電子回路の設計や動作のシミュレーションも行うことができます。

電子回路の作成とシミュレーション

 それでは Tinkercad で電子回路を作成してみます。初めて使う時にはアカウント登録が必要ですので、右上の サインアップ ボタンからアカウント登録を行なってください。アカウント登録手順については特に難しいことはないと思いますので、詳細は割愛します。

f:id:akanuma-hiroaki:20180222083136p:plain:w450

 サインアップしてサインインするとダッシュボード的な画面になります。デフォルトでは 3D モデルの作成を行うための画面になっていますので、左のメニューから Circuits を選択します。

f:id:akanuma-hiroaki:20180222213703p:plain:w450

 初めて使う場合は Create new Circuit ボタンをクリックして新しい回路の作成を開始します。

f:id:akanuma-hiroaki:20180222213827p:plain:w450

 すると画面右に電子工作パーツが並んだ回路作成画面が表示されますので、この画面でパーツを配置して回路を作成します。

f:id:akanuma-hiroaki:20180222084144p:plain:w450

 ではまずはシンプルに、ブレッドボードに LED とコイン型電池を配線して LED を点灯させる回路を作成してみます。右側のパーツリストから該当のパーツを選択して左ペインに配置します。パーツによって様々なパラメータを設定することができ、例えば抵抗であれば何Ωの抵抗かを設定できます。今回は抵抗値は 330Ω にしています。また、左上のメニューでパーツを回転させることもできます。回路が作成できたら、右上の Start Simulation をクリックしてみます。

f:id:akanuma-hiroaki:20180222085609p:plain:w450

 すると回路のシミュレーションが始まり、LED が点灯します。

f:id:akanuma-hiroaki:20180222085826p:plain:w450

 さらにテスターもパーツに用意されていますので、配置することで動作時の電圧なども見ることができます。

f:id:akanuma-hiroaki:20180222090532p:plain:w450

 では次に抵抗を削除して、電池と LED のアノードを直接接続してシミュレーションを実行してみます。すると LED が点灯しますが、 i マークが表示されました。

f:id:akanuma-hiroaki:20180222090801p:plain:w450

 LED にマウスオーバーしてみると、下記のようなメッセージが吹き出しで表示されます。

f:id:akanuma-hiroaki:20180222091141p:plain

 現在の電流が 61.9 mA で、推奨の最大電流は 20.0 mA なので、 LED の寿命が短くなる可能性があります、という感じの注意が表示されています。

 ではさらに極端な例として、コイン型電池を 9V 電池に変更してシミュレーションを実行してみます。すると今度は LED にクラッシュしたようなマークが表示されました。

f:id:akanuma-hiroaki:20180222091830p:plain:w450

 また LED にマウスオーバーしてみると、今度は下記のようなメッセージになっています。絶対最大定格が 120mA の LED に対して 915mA の電流が流れてしまっているため、 LED が壊れてしまったということになります。

f:id:akanuma-hiroaki:20180222092217p:plain

Arduino でのコード実行をシミュレートする

 Tinkercad では単純な電子パーツの回路だけでなく、 Arduino で動作するコードのシミュレーションも行うことができます。先ほどの回路の電池の部分を Aruduino に置き換えて下記のような回路を構成し、右上の Code ボタンをクリックします。

f:id:akanuma-hiroaki:20180222211144p:plain:w450

 すると Arduino で動かすコードを編集するためのブロックエディタが表示されます。今回はテキストでコードを編集するために、プルダウンリストから Text を選択します。

f:id:akanuma-hiroaki:20180222211429p:plain:w450

 エディタがテキスト編集用に変わり、デフォルトでLチカのコードが用意されています。

f:id:akanuma-hiroaki:20180222093416p:plain:w450

 Start Simulation をクリックすると、下記の動画のように実際のコードの動作を確認することができます。

 さらにエディタにブレークポイントを設定し、ステップ実行でデバッグすることも可能です。

まとめ

 回路図を作るところまでであれば Fritzing が有名ですが、電子回路や Arduino のコードのシミュレーションやデバッグまでできてしまうという点で Tinkercad はかなり便利だと思います。これでしたら実際のパーツが手元になくてもとりあえず回路を作って動かしてみることができますし、パーツの破損や発火も気にすることなく試せます。まずは Tinkercad で回路を構成してみて、問題なさそうであれば実際のパーツで回路を組んでみるという順でやると、手戻りが少なく、効率的にプロトタイピングができると思いますので、お試しいただければと思います。

評価検証・QAってなんですか

ハイ、ドーモ!QAの山岸です。 最近、社内ではわたしたちQAチーム以外でも受け入れテストが行われたりしており自身の再認識の意味も踏まえてQAってどんなことしているの?評価検証ってなに?みたいなものをまとめてみようと思います。

QAとは Quality Assurance の略称です。 顧客に信頼性を与えることを目的とし、そのために求められる品質を満たしているかどうかを検査・保証することです。

www.weblio.jp

企業によっては評価評価/検証品質管理などいろいろな呼び方で呼ばれています。
国際規格としてはISO9000シリーズがあります。

www.weblio.jp

これのなかにあるISO/IEC 9126という品質特性をもとにソフトウェアや商品が品質管理が適正にされているよね?ということを見ています。
品質特性 左側の大項目は主な特性で右側は副特性と呼ばれています。
f:id:unifa_tech:20180215195236p:plain
特性だけ挙げられてもわからないと思うので、左側の特性をかんたんにまとめます。
◆機能性
 ソフトウェアが目的に対して正確に動作、機能するか
◆信頼性
 特定の状況下(高負荷とか)でソフトウェアがどの程度機能するか
◆使用性
 使用者が利用するにあたって理解、習得、利用が円滑に行えるか
◆効率性
 使用する環境下で適切な性能が発揮するか
◆保守性
 修正のしやすさのこと

利用時の品質特性モデル(ISO/IEC 9126-4)としては下記があります。
かんたんに言うとユーザビリティみたいなものです。
有効性 (effectiveness)
生産性 (productivity)
安全性 (safety)
満足性 (satisfaction)

大まかにはこのような感じです。
これをもとにテスト(試験、検査)を行い、品質を保証していきます。
ちなみにですが、テスト技法の資格もあります。

http://jstqb.jp/index.htmljstqb.jp

テスト技法やテストまでの流れに関しては呼び方や方法がとても多いのでまた別の機会に紹介したいと思います。

以上になります。ありがとうございました。