ユニファ開発者ブログ

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

座り仕事のエンジニアの悩み

ハイドーモ!QAの山岸です。

最近腰を痛めてしまい、通院しています! なかなか治りが悪く歳を感じています。

今回のブログは技術ブログと言いつつも普段からオフィスで仕事をしている人が誰しもが悩む肩こり腰痛をテーマに書こうと思います!!

そもそも肩こり、腰痛の原因は??

f:id:unifa_tech:20180419133706p:plainf:id:unifa_tech:20180419133644p:plain
オフィスで働く人が接骨院や整体に行くと怒られた!みたいな話を聞きます。

  • 同じ動作の繰り返し
  • 姿勢
  • 特定の筋肉への負担
  • 冷えからくる筋肉の萎縮
  • 眼精疲労
  • 座ったとき足が開く
  • 座るとすぐに足を組む
  • 携帯やパソコンを使うとき、画面に近寄り背中が丸まる
  • 運動不足
  • 冷え性
  • ストレス

などなどwebで紹介されている記事から見ても座席に座って仕事をしている人はほとんどの項目が該当するとおもいます。

肩こり、腰痛への対策と対応

f:id:unifa_tech:20180419133334p:plainf:id:unifa_tech:20180419133401p:plain

肩こり
肩こりの原因は運動不足による血行不良、眼精疲労や冷え性、普段の姿勢が主となっています。

ならないための対策となってしまったときの対処法

  • 【対策】背筋を伸ばす。姿勢をよくする。
    これに注意しないとマッサージ等を行ってもすぐ戻ってしまいます。
    仕事中にモニタに前のめりにならない、胸を張る、背骨がS字になるように心がけることが必要です。

  • 【対策】体を冷やさない。
    寒い時期に寒さで身体が強ばる、夏場のクーラーなど体が冷えると血流が滞り肩回りの血流も阻害され肩こりを引き起こす原因になります。また、暑い時期に冷たすぎる飲み物や食べ物を食べることも血流が滞る原因になりますので注意が必要です。

  • 【対応】ストレッチ
    最近の話題だと肩甲骨はがしストレッチが効果的となっています。 style.nikkei.com
    その他だとこちらのブログ記事に図解付きでストレッチ方法が紹介されています。
    stretchpole-blog.com
  • 【対応】セルフマッサージ
    肩こりに効くツボを指圧するのが一般的でしょうか。
    ここでは効果的な2つを紹介しておきます。
     ・合谷(ごうこく)
      手の甲にある万能ツボ。首コリだけでなく肩コリや手のしびれなどにも効果
      手の甲側の親指と人指し指の付け根を内側に向かって押します。
      やや強めに両手それぞれ約30回程度)
    f:id:unifa_tech:20180419154359p:plain
     ・天柱(てんちゅう)
      首のコリと目の疲れに効果のあるツボ。パソコン疲労を解消に
      首筋のやや外側、うなじの窪み周辺
    f:id:unifa_tech:20180419154944p:plain
  • 【対応】湿布、温湿布、磁気治療器具
    湿布に関しては患部が炎症(熱をもっている)している場合には効果的です。
    温湿布は以前、病院で肌にダメージを与えるだけで意味がないと言われたことがあります
    磁気治療器具は現時点では、医学的にはこの低磁力による効果は確認されていないとのことです・・・
    (科学的には立証されていなくても、「よくなる!」という思い込みで症状が改善されるなら)

腰痛
こちらも肩こりと同様の対策になります。

  • 【対策】背筋を伸ばす。姿勢をよくする。
    これに注意しないとマッサージ等を行ってもすぐ戻ってしまいます。
    仕事中にモニタに前のめりにならない、胸を張る、背骨がS字になるように心がけることが必要です。

  • 【対策】体を冷やさない。
    寒い時期に寒さで身体が強ばる、夏場のクーラーなど体が冷えると血流が滞り肩回りの血流も阻害され肩こりを引き起こす原因になります。また、暑い時期に冷たすぎる飲み物や食べ物を食べることも血流が滞る原因になりますので注意が必要です。

  • 【対応】ストレッチ
    こちらは私が学生時代に教えてもらったのは大腰筋のストレッチ(縦の股割り)がいいと言われました。
    右膝を地面につけて片膝立ちの姿勢に。左膝に両手を添え、そのままゆっくりと体重を前にかけていきます。
    体重を前にかけていくときに腰を反り過ぎないように注意してください。

  • 【対応】セルフマッサージ
    腰のセルフマッサージは自分では難しいと思うので割愛します。

    以上になります。同じ姿勢で仕事している時間が長くなれば長くなるほど、体には負担がかかります。

    座りっぱなしにならず、30分に一回程度、座席を立つことを意識してください。

Chromeのフォントサイズ制限と印刷画面

こんにちは、Webエンジニアのちょうです。

最近A4サイズでも印刷できるように画面スタイルの調整をしてます。ところが、Chromeだけおかしいな挙動がありました。

Chrome

f:id:unifa_tech:20180402112528p:plain

Firefox

f:id:unifa_tech:20180402112533p:plain

9px, 8px, 7pxのところに注目してください。なぜかChromeだと10pxとほぼフォントサイズが一緒になってるように見えないでしょうか。実際はどうなんでしょう。開発者ツールで見ると

f:id:unifa_tech:20180402112904p:plain

あれ、本当に10pxになっています。ちなみに、このような現象はChromeだけあります。Firefox以外に、SafariやEdge、IEまで普通に指定通りのフォントサイズになってます。もしかして、Chromeのバグ?

ありえないと思いながら、Google先生にきいてみました。実はChromeにこういう設定があります。

続きを読む

異邦人としてのデザイナー -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操作の履歴を内部的に持つことも出来、色々と使い道がありそうです。

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