くらしのマーケット SREチームの事例紹介

こんにちは、SREチームの千代田です。

今回はくらしのマーケットにおけるSREチームの事例を紹介します。

SREチームについて

みんなのマーケットでは今年、SREチームを新設しました。

背景としてはいくつかありますが、

• Dev VS Opsの対立を避け、高速なサイクルでデプロイを安全に行えるようにしたい
• オペレーションを自動化し、サービスが拡大しても少人数で回せるようにしたい
• 本番環境だけでなく、開発速度向上のために開発環境の改善を進めたい
• 障害対応できるポジションを増やしたい
• もともと一部のエンジニアとCTOが対応するといった形で、チームとしての体制が組まれておらず属人化が発生している
• 情報の共有方法に問題があり、対応したエンジニアしか詳細を知らない
• 誰かが入れたサービスだけど、それを入れた詳しい人がもういない
• 昔誰かがやったことなのにそのときの手順が存在しない

などといったものが主な要因として挙げられます。
具体的なこれらの改善策についてはこの後紹介をします。

設立時の目的として、
上記問題点の解決と、「開発業務を行いつつ、運用の自動化」を置きました。
ですが、半年経った今では既存のマイクロサービスの改善など新たな目的も増えており、今後も変化していく予定です。

事例紹介

監視基盤の強化

監視基盤としてもともとはCloudWatchメトリクスを用いていましたが、
計測出来ない値があるなど機能的に足りていないものを補うために、PrometheusとGrafanaを導入しました。
これにより、サーバメトリクスだけでなく、アプリケーションやミドルウェアのメトリクスも取得ができるようになり、監視対象の幅が広がりました。
また、複数の要因によってエラーが出た際に、エラー箇所の切り分けが容易になりました。

ポストモーテムの導入

障害があった際に、ポストモーテムを書いてGitHubへコミットしたうえで、そのURLをSlackで共有するようにしました。
これにより、以前起こった障害が記録されていくと同時に、
全エンジニアは障害がなぜ起きたのか、どのようにして解決されたのか把握できるようになりました。
さらに、失敗から学ぶことにより再発の防止と検知（アラートを導入するなど）にも役立っています。

開発環境の整備

私が入社した際に経験をしたのですが、開発環境の構築に２日ほど時間がかかりました。
原因としては、ドキュメントがあまり更新されておらず足りない手順が存在した為でした。
その為、思い切ってDockerを導入してローカルの開発ではコンテナを使うようにしました。
なぜDockerを利用することにしたかというと、個々人での設定を極力減らしておきたかったのと、
新しく作成するマイクロサービスがDockerを利用するといった理由です。
結果として、導入に成功し、以前より簡単に開発が行えるようになりました。

権限周りの整備

くらしのマーケットではクラウドプロバイダとしてAWSを主に利用しています。
AWSではIAMと呼ばれるAWS リソースへのアクセスを安全に制御するためのウェブサービスが提供されています。
こちらのサービスを使う際に、Naming Ruleが特に決まっておらず、作る人によってバラバラになっていたものをルールを決めて統一しました。
また、権限が適切ではないものに関しては、
必要に応じてリソースレベルやアクションに対してのみ許可をするなど、権限の見直しを実施しました。
さらに、エンジニアによって権限が異なった状態であったものをグループ単位に分割・権限を集約するなどして、
エンジニアによって権限が異なるといった状態を防ぐようにしました。
これにより、新しくエンジニアが入った際にグループへと追加するだけでよくなり、すぐさま開発へ参加できるようになりました。

データベースの移行

くらしのマーケットでは、データベースにPostgresを利用しています。
もともとはRDSを利用していましたが、Auroraにするとパフォーマンスが最大で5倍出るとのことでしたので、移行することを決意しました。
その際、バージョンを上げた場合の動作なども合わせて検証し、Postgres9.4 -> 9.6へのバージョンアップも移行と同時に行いました。
これによってパフォーマンスが向上し、さらにはパフォーマンスインサイトが利用できるようになり、クエリの可視化が行えるようになりました。
また、一部参照系クエリを読み込みエンドポイントに逃すことにより、さらなる高速化も行えました。

CDNの導入

静的なコンテンツを配信する上でくらしのマーケットのサーバへのリクエストの負荷を減らす目的として、CDNを導入しました。
さまざまなCDNサービスがありますが、今回はAWSのCloudFrontを利用しました。
これにより、CloudFront Popular Objects Reportを利用し、
BytesFromMissesを用いてファイルサイズが大きいものを容易に判別するといったことが可能になりました。
また、当初の目的であるリクエストの負荷を減らすことにも成功しました。

コンテナでの開発ツール作成

くらしのマーケットではマイクロサービスアーキテクチャを採用しています。
既存のマイクロサービスは特にコンテナを使っていなかったのですが、
新しいマイクロサービスを作る際にコンテナで実行したいといった話があり、実際にコンテナでの開発基盤を構築することにしました。
コンテナの基盤としてはKubernetesの採用を考えたのですが、
学習コストの高さや、運用面での不安をカバーしきれなかった為、AWSのECSを利用することにしました。
ECSを利用する上で、ネックとなったのが、既存のマイクロサービスとの結合部分でした。
くらしのマーケットの開発環境ではブランチ別の開発環境（通称 tako環境）を利用しています。
ブランチ単位にすべてのマイクロサービス/データベース/キャッシュ...etcが存在するのですが、
ECS側とのルーティングをどのように実装するかいろいろと考えた結果、くらしのマーケットに特化したデプロイツールが必要な為開発を行うことにしました。
AWSのALBのホスト名でのルーティング機能を利用することを前提に、
TargetGroupの作成やRuleの追加もマネージされたデプロイツールをPythonで実装しました。
また、既存の開発環境へデプロイする際に利用されるAnsibleからでも実行しやすいようにコンテナでラップして使えるようにしました。

ログ基盤の改善

くらしのマーケットではログ基盤としてELKスタックを利用しています。
しかしながら、構築されてから時間が経っている為、ログの取りこぼしやELKスタックのバージョンが古いといった問題がありました。
そのため、手始めにログ基盤の改善としてELKスタックのアップグレードを行いました。
さらに、取りこぼされていたログを入れるようにtemplateを改善しました。
また、ECSやALBのログをCloudWatch Logsに流していたのですが、
Kibanaで見れたほうが串刺しにしやすく便利であった為、ElasticSearchへ取り込むようにしました。
もともとエラーの確認ぐらいでしか使われていませんでしたが、今回は新たにVisualize等を追加してもっとログを有効活用できるようにしました。

• URLに対してのバックエンドでのリクエスト数をカウントして、上位のURLをPieとして表示
• Producer/Consumerパターンで、Consumerが実行したTask数をLineとして表示

など、さまざまな箇所を改善しました。
結果として、バックエンドでのリクエストが多いものについてはSREチームで改善のissueを作成し、対応するなど以前よりも有効的に活用しています。

現状抱えている課題

現状抱えている課題として次のものが挙げられます。

• 分散トレーシングが整備されていない
• perf/DTrace/SystemTapに詳しい人材が不足している
• 昔書かれたコードで、技術的負債が存在している

おわりに

以上、SREチームの事例としていくつか紹介させていただきました。
事例として参考になればうれしいです。
また、今後もやることがまだまだ山積みになっている認識ですが、少しずつでも改善していければと思っています。

最後までお読みいただき、ありがとうございました。

もし、SREに興味がある、ワタシlinuxチョットデキル、みんまで働いてみたい
といった方がいらっしゃいましたら、ぜひ一度オフィスでお会いしましょう。

次回は、エンジニアののりすけさんの予定です。

打ち出し顔文字、下から見るか?横から見るか?

みんなのマーケットでアプリエンジニアとして働いている楊です。

先日アプリ側の絵文字のフィルターを実装してみました。不著名な歴史偽ファンとしての私はその切っ掛けで絵文字について色々調べました。

みなさんご存知ですか。実際絵文字の利用はAndroidならAndroid 4.3からで、iOSなら日本以外の国はiOS 5.0からです（日本は絵文字の発明国としてiOS2.2から）。 そこまでの時代は本ライトブログ（ライトブログとは読む気分が楽なブログであることーーBy Dr.Yang）の本題ーー絵文字の兄貴「顔文字」を使っていました。

顔文字はインタネットへの登場は1982年にカーネギーメロン大学のコンピュータサイエンティストのスコットさんが電子掲示板に初めて「:-)」と「:-(」を使ったのが起源と言われています。 これは横倒しても当時の読者はすぐ「笑顔」と「憂鬱」と識別できました。

相手に対して文書よりもっと受け取りやすいし、生き生きとして見えるし、顔文字の運用はすぐ爆発して行きました。 その中に欧米派の横倒しにした顔文字「:-D」「B-P)」とアジア派の正位置の顔文字「(๑˃́ꇴ˂̀๑)」「(ﾉ´∀｀*)ﾏﾀｰﾘ」二種類が分けています（無理やりですが、タイトルのネタの由来）。

ここまではただごとですが、次の質問をすればいかがでしょうか。

そもそもなぜ人間はこれらの横倒でも正位置でもの記号を顔と繋がっているんですか。

この問題を考えながら下の画像をご覧ください。

ヘイケガニ

これはヘイケガニと呼ばれるカニの一種です。壇ノ浦の戦い（1185年）で敗れて海に散った平氏の無念をなぞらえ、「平氏の亡霊が乗り移った」という伝説が生まれて(出典：https://ja.wikipedia.org/wiki/%E3%83%98%E3%82%A4%E3%82%B1%E3%82%AC%E3%83%8B)、この人間の怒った顔に似た模様が出ている甲羅を持っているカニを命名しました。

これだけじゃなくて、実際科学者の研究によって、2個の円（目）と一本の線（口）を三角の位置に書いたら、人間は素早くためらいなく「顔」と認めます。

これは偶然ではありません。パレイドリア（英: Pareidolia）という心理現象であることです。ソーシャルネットでよく見たこのような面白い画像もパレイドリア現象です。

面白いネット画像

ざっとみる全部表情が誇張された顔です。少し考えてフルーツや野菜、日用品などに認知されました。つまり、人間の脳は視覚的なイメージから顔を認識することは意識よりも速いです。

人間の意識は前頭葉から形成されます。一方、目から出した視覚情報は後頭葉、そして側頭葉、さらに前頭葉へと流れます。パレイドリア現象は後頭葉と側頭葉に行う情報事前処理の結果です。一番大事な情報の一つは顔です。周りの人間の顔はよく現在の状況を示せますから。紡錘状回が早く識別したら、有利な行動が採用できます。

人間の頭

紡錘状回の機能について、もう一個の例を挙げたいと思います。大体の人はサッチャー錯視（英: Thatcher illlusion）現象があって、この画像を一見して問題がないです。

サッチャー錯視1

正位置に回転したら、左側の顔に目と口は逆転されていると発覚できました。例えばあるひとの紡錘状回は損傷があって、相貌失認の患者になれば、この二つの顔はそのひとの目から見ると特に違うところがありません。顔の各部分の配置が検出できないので、顔は区別できません。

サッチャー錯視2

中世ヨーロッパにかなり流行していた茶葉占い(英: tasseography)もパレイドリア現象を利用しました。やり方は飲み残しの茶葉の形を観察して、どのように見えるかによって過去、現在そして未来を占います。

茶葉占い

このような占いは基本的にパレイドリアに基づいて、実際反映したのは客観的な事実ではなく、主観的な心理です。1920年代にスイスの精神療法家ヘルマン・ロールシャッハは「ロールシャッハ・テスト」を提出しました。被験者にインクのしみを見せて一見で何を想像するか、再度見ると何を想像するかを話せて、その話から被験者の心理状況を分析します。残念ですが、このテストは正直に言ったら、占いの占いで、科学ではありません。

科学の領域に入れられない錯視ですが、芸術にはなかなか大切なものです。イタリアルネサンス時期有名な画家ジュゼッペ・アルチンボルドはパレイドリアを利用して、いろんな珍奇な肖像画を製作しました。400年後のシュルレアリスム画家サルバドール・ダリも関係のない物を集めて顔などを作るのが好きです。

庭師／野菜

ちなみに、人間のパレイドリアとは別物ですが、近年人工知能の発展により、パレイドリアはコンピュータビジョンの画像認識分野によく研究されています。画像認識プログラムは顔でないものを誤って顔と認識することをどうやって避けられるのは重要な課題です（めちゃくちゃな内容をいっぱい話して、やっと最後技術の話に回して戻って来ました）。

終わり

今回のライトブログのおかげで、一生使えない日本語をたくさん触れました。

すでに覚えていないですけど(╯‵□′)╯︵┻━┻

みんなのマーケットに興味がありましたら、ぜひこちらまでご連絡ください。

次回はSREエンジニアの千代田さんです。よろしくおねがいします。

最近ちまたでよく聞くWebAssemblyを触ってみた

みんなのマーケットでwebエンジニアとして働いている高橋です。

WebAssemblyはブラウザ上で実行できるバイナリフォーマットです。JavaScriptよりも高速に実行できるということは話に聞いていましたが、実際にどのくらい高速になるかは今まで試したことがありませんでした。今回はWebAssemblyに触れてみることから始めて、フィボナッチ数の計算をWebAssemblyとJavaScriptで実行し、それぞれの速度を見ていきます。

環境は

MacBook Pro (Retina, 15-inch, Mid 2014)
2.5 GHz Intel Core i7
16 GB 1600 MHz DDR3

で、Google Chrome 68上にて実行しています。

WebAssemblyをビルドしてみる

WebAssemblyはC/C++やRustからコンパイルすることができます。また、Mozillaが公開しているWebAssembly Studioを用いると、web上でWebAssemblyをビルドすることができます。今回はこれを使ってみます。

アクセスすると Create New Projectというダイアログが開かれるので、Empty C Projectを選んでください。

選択すると、

エディタ画面が開きます。

すでにCのプロジェクトのボイラープレートが作られているので、フィボナッチ数計算用関数を追加し、main関数から呼び出しましょう。

#define WASM_EXPORT __attribute__((visibility("default")))

int fibo(int n) {
  if (n == 0 || n == 1) {
    return 1;
  }
  return fibo(n - 1) + fibo(n - 2);
}

WASM_EXPORT
int main() {
  return fibo(40);
}

そして、右上のBUild & Runを押すと、ビルド後main.wasmファイルが生成され、 その後wasmが実行されて下のペインに結果が表示されます。（165580141と表示されるはずです。）

このように、WebAssembly Studioを用いると非常に簡単にwasmファイルを作成できます。

wasmファイル、watファイル

バイナリフォーマットのwasmファイルの他、WebAssemblyはデバッグやテストの容易さを担保するためにwasmファイルに変換可能なテキストフォーマットをサポートしています。関数本体はlinear representationという形式で表現されますが、中間形式としてはS式で表現されています（構文はこちらです）。WebAssembly Studioでは、wasmファイルを選択するとS式のテキストフォーマットを.watファイルとして直接編集できます。

C言語のソースにあったmain関数は、.watファイルでいうと

(func $main (export "main") (type $t2) (result i32)
  i32.const 40
  call $fibo)

という箇所にあたります。ここで40となっているのはfibo関数に与えた引数です。では、これを試しに5に変更してみましょう。 Runを押すと、右下のペインに何が表示されているでしょうか？ 8と表示されていれば正しく反映されています。フィボナッチ数は1, 1, 2, 3, 5, 8なので値も正しそうです。

このmain関数をもう少し見ていきます。S式ということで、Lispのコメント;を借用して注釈をつけると、

(func $main             ; 関数定義
    (export "main")     ; mainをエクスポートする
    (type $t2)          ; 関数の型定義
    (result i32)        ; 返り値は32-bit integer
    i32.const 5         ; 5をスタックに積む
    call $fibo)         ; $fibo関数を呼ぶ

という処理になっていることがわかります。 また、.wasmファイルをダウンロードしてダンプしてみると、

00000: 41 05 00 00 00             | i32.const 5
000006: 10 01 00 00 00            | call 1
00000c: 0b                        | end

となり、S式と対応していることがわかります。

JavaScriptとの速度比較

次に、JavaScriptで記述したフィボナッチ関数と、wasmとの速度を比較してみましょう。

JavaScriptのコードは以下となります。

"use strict";

function run() {
    function fibo(n) {
        if (n == 0 || n == 1) {
            return 1;
        }
        return fibo(n - 1) + fibo(n - 2);
    }
    console.log(fibo(40));
}

それぞれブラウザ上で実行してみると、

	JavaScript	WebAssembly
fibo(40)	1781ms	523ms

ということで、WebAssemblyのほうが1781/523 = 約3.4倍速いという計測結果になりました。 CPUの負荷が大きい処理については今後はWebAssemblyを利用することによって高速なweb体験をユーザーに提供できるようになるかもしれません。

（おまけ）WebAssemblyをgolangから作成する

もしgo1.11の環境があれば、golangからもwasmを生成することができます。こちらの記事(https://qiita.com/cia_rana/items/bbb4112b480636ab9d87)を参考にgolangからwasmを生成してみました。

コードは、

package main

import "fmt"

func fibo(n int) int {
    if n == 0 || n == 1 {
        return 1
    }
    return fibo(n-1) + fibo(n-2)
}

func main() {
    fmt.Println(fibo(40))
}

そして、以下のコマンドでビルドすることができます。

GOOS=js GOARCH=wasm go build -o ./test.wasm wasm.go

こちらを実行した結果は以下になります。

	JavaScript	WebAssembly	WebAssembly(golang)
fibo(40)	1781ms	523ms	5072ms

なぜかgolangから生成したwasmはJavaScriptよりも実行時間が長いですね。フィボナッチ数の計算だけではなく、 fizzbuzzを大量に実行したりしましたが、golangから生成したwasmはJavaScriptよりも遅いパターンしか計測できませんでした。 （この件に関しては深く追っていませんが、詳しい方は教えていただけると嬉しいです。）

おわりに

今回の記事ではWebAssemblyを紹介してみました。みんなのマーケットに興味がありましたら、ぜひこちらまでご連絡ください。

次回はアプリエンジニアのやんさんです。よろしくおねがいします。

Techのみんなが仕事中なんの音楽聴いているのか聞いてみた

はじめに

こんにちは。みんなのマーケットのテクノロジー本部でデザイナーをしているラミレスです。

私は音楽が好きで、前職でも音楽系のプロジェクトに携わっていました。
テクノロジー本部の他のメンバーも音楽好きがいて、音楽を聴きながら仕事をしている人がたくさんいます。

そこで今回、「テクノロジー本部のメンバーは、どんな音楽を聴いて仕事をしているの？」
というインタビューをしながら、メンバーの音楽の好みを探っていきたいと思います！

オフィスで音楽を聴いているテクノロジー本部のメンバーを探してみた

さっそく、音楽を聴いているメンバーに話を伺ってみましょう。
おっ、良いところに「Beats-X」のイヤホンをした新卒エンジニアの都築くんがいました。

───都築くん、こんにちは！なんの音楽を聴いているんですか？

都築くん：乃木坂46です。

───へえ〜都築くんはアイドルが好きなんですか？

都築くん：否定はしません。ドルオタです。

───乃木坂46の誰が好きなんですか？

都築くん：衛藤美彩ちゃんです。

───え？

都築くん：あまり大きい声で言いたくないのでSlack（※）で送ります。
　※Slack：社内チャットツールのこと。

───いやいや、自分で調べるからいいよ。笑　（調べてみる）ほ〜！すごく綺麗で可愛い方ですね！衛藤美彩ちゃんに会いに行ったりもするんですか？

都築くん：ライブで見ることはありますが、握手会には行きませんね。変なこだわりなんですが、会いに行ったら「アイドル」じゃなくなる気がするというか。あくまで、この距離感を大切にしたいんです。

───へえ・・・（よくわかんないな）。乃木坂46以外で好きなアイドルはいないんですか？

都築くん：けやき坂46も聴きますが、推しメンはいません。1人しか推したくないんで。衛藤美彩ちゃんは、かれこれ4年くらい推してますね。

───ほお〜都築くんは一途な男なんですね！衛藤美彩ちゃんのグッズとかを買ったりしないんですか？

都築くん：ライブでタオルなどのグッズを買うこともありますが、基本的には買わないですね、かさばるんで。CDはまあまあ持ってます。

───なるほど、なんだか都築くんらしい理由ですね。CDは毎回買うんですか？

都築くん：毎回ではないですけど、今回はA~Dまであるじゃないですか。それは全部買いました。

───いや知らないけど・・・。というか、Dまであるんですね。それを全部買ったってのはすごい！毎回は買わないけど、買うときにはがっつり買うということですね！どういう基準でCDを買うか決めるんですか？

都築くん：特典ですね。好みのDVDが付いているかどうか、とかです。

───なるほど〜。購入したCDを仕事中に聴いているということですか？

都築くん：聴くのは乃木坂ですが、AppleMusicで聴いているのでCDは聴きません。

───えっ！？じゃあCDを買って、もう一度AppleMusicで購入するということでしょうか？

都築くん：そういうことですね。

───すごい・・・。乃木坂46の売り上げに貢献してますね・・・。

都築くん：そうですね、もはやCDは特典のために購入しているようなものです。家でCDを聴くこともありませんね。

───乃木坂のための浪費は厭わないということですね！アイドルオタク感があって良いです！都築くん、ありがとうございました！

CTO登場

次の方にインタビューをしてみましょう。
誰か音楽聴いている人はいないかな〜。

お！「Bose QuietControl 30 wireless headphones ワイヤレスノイズキャンセリングイヤホン」をした、CTOの戸澤さんがいました！

───戸澤さん、こんにちは！インタビューさせてください！

戸澤さん：え、あ、はい。

───いま付けているイヤホン、ノイズキャンセリングが非常に良いとおっしゃってましたよね！デザインもとってもクールですね！いつもそちらを利用されているんですか？

戸澤さん：このイヤホンの他に、「sennheiser HD 25 ALUMINIUM」のヘッドフォンも利用しています。

───ゼンハイザーといえば、ギター音に強いイメージがあります！音楽関係者やDJの方で利用されている方も多い印象ですが、そのヘッドフォンで一体どんな音楽を聴かれるんですか？

戸澤さん：Perfumeです。

───おお！Perfumeといえば、ライブのクオリティーが非常に高いことで有名ですよね。ライブには行ったりするんですか？

戸澤さん：行きます。そもそもライブがそんなに頻繁には開催されないのですが、開催されるときには必ず抽選に応募します。地方開催もあるので、大阪に行ったこともあります。来月は長野、12月には横浜で開催されるライブに行きます。

───おお！アクティブに色々な所へ行くんですね！ライブはお休みの日に行くんですか？

戸澤さん：平日に開催されることもありますね。12月の横浜は平日に開催されるライブです。

───平日にライブに行く際は、仕事をお休みして行くんですか？

戸澤さん：仕事を早めに切り上げれば間に合うので、仕事後に行きますね。

───仕事後にライブへ行けるのは良いですね〜。これがフレックスの良いところ！ちなみに、Perfumeの中では誰が好きなんですか？

戸澤さん：それは内緒です。知ってる人は知ってますが。

───今後聞き出せるよう、戸澤さんとの距離を縮めて行きますね！ところで、それだけのライブ、よく当たりますね！チケットを当てるコツはあるんですか？

戸澤さん：Perfumeに関しては、お金を積めばチケットが当たりやすくなることはないです。運ですね。

───なるほど〜！どのくらいの倍率かわかりませんが、それだけライブに行けるというのは相当な強運の持ち主なのかもしれないですね！戸澤さん、ありがとうございました！

UK好き！デザイナーのみそさん

「Bose SoundSport Free wireless」のイヤホンをしたデザイナーのみそさんを発見！
何かを聴いていますね。

───こんにちは！インタビューしたいんですが良いですか？

みそさん：良いですよ！

───ありがとうございます！あれ、てかそれ水着みたいですね！

みそさん：え、わかる？これ水着だよ！

───え！？本当に水着なんですか・・・。（すごい、この人、会社に水着で来てる）

みそさん：このまま水に入れるよ！

───（全然メリットに感じないけど）そうですね！水に入れますね！ところで、みそさん今何を聴いていたんですか？

みそさん：シャ乱Q。

───（やばいどう掘り下げたら良いのかわからない）他にはどんなアーティストの曲を聴きますか？

みそさん：他には、中森明菜、玉木浩二、D.O、Michita、Heartsdales、YMO、Metronomyです！

───すごい振り幅！みそさんはUK好きというイメージがあります！先日もUKアーティストのライブに行った際の写真を見せてくれましたよね！

みそさん：Metronomyです！めちゃくちゃ好きなアーティストなんですよ。渋谷のイベントでMetronomyのジョセフがDJをすると聞き、行ってきました。その時は髪型もジョセフヘアにしてました！

───なるほど！だから頭がくるくるだったんですね！オフィスのある五反田と渋谷は近いので、イベントの開催場所が渋谷だと嬉しいですね。そういえば、みそさんはロックバンドをやっているご友人がいると言っていましたね！その方のイベントにも行くんですか？

みそさん：たまに行きますね！渋谷で開催されるときには、仕事を早めに切り上げて行きます。

───おお、ここにもフレックスを活用してイベントに参加する方がいましたね。みそさん、ありがとうございました！水着は水の中で履いてくださいね！

アニメ好き！へいへい！

アニメが好きと噂のエンジニア、へいへいさんを発見したのでお仕事の邪魔をしてみましょう！

何かを真面目に考えているようですね。

あ、こっち見てくれた。

笑ってくれました！

───こんにちは！インタビューさせて頂いてもよろしいでしょうか！

へいへいさん：はい！大丈夫です。

───へいへいさんは、普段あまりイヤホンをしていないイメージがあります！

へいへいさん：いや、してますよ。最近は電話の開発をしていて、そのテストなどで耳を塞げない状況なので、以前と比べると音楽を聴いていないかもしれませんね。

───なるほど！今ちょうど、出店者（※）とお客様が電話できる機能を開発しているところですもんね！では、仕事中に音楽を聴くとき、どのような音楽を聴いているんですか？
　※出店者：みんなのマーケットが運営するサービス「くらしのマーケット」で、ハウスクリーニングなどのサービスを提供する事業者のこと。

へいへいさん：YouTubeのトップページから見ていきましょうか。RadioheadやSquarepusherを聴いているようですね。

───（自分の履歴なのに、まるで他人の履歴を見るかのような言い回し）なるほど！ロック、エレクトロ、ドラムンベースがお好きなんですね！わたしはトロピカルベースなどが好きなので、今度ベース系のイベントに一緒に行きましょう！
ところで、へいへいさんはアニメが好きとお聞きしていますが、アニソンは聴かないんですか？

へいへいさん：仕事中は聴かないですね。何かの拍子にイヤホンが外れ、アニソンが流れてしまったら恥ずかしいじゃないですか。

───でも、Macはイヤホンが外れちゃっても自動で音が止まるので大丈夫だと思います！それに、アニソン聴いてても全然恥ずかしくないと思いますよ！

へいへいさん：では、今後は仕事中でもアニソンを聴くようにしますね。

───ちなみに、アニメはどのようなアニメを見るんですか？

へいへいさん：週末はバトミントンアニメをひたすら見てました。

───バトミントンアニメ・・・！ピンと来なさすぎるのでスルーします！アニメ系のイベントって都内でよく開催されているイメージがありますが、イベントにも行くんですか？

へいへいさん：アニメ系のイベントには一度しか行ったことないです。同人誌イベントにはよく行きますよ。

───なるほど、へいへいさんは漫画・アニメ・本がお好きなんですね！

ここでSREの千代田さん登場！

───いいところに千代田さん！千代田さんのお好きな音楽についてもお聞きしたいのですが、よろしいでしょうか！

千代田さん：顔出しはNGでお願いします。

───わかりました！千代田さんは普段どのような音楽を聴くんですか？

千代田さん：ジャンルは、EDM・ダブステップ・ハードコア系のロックが多いですね。アーティストだと洋楽であればアリセイナ、邦楽だとSKY-HIですかね。あと、小瀬村晶とかも聴きますね。

───ハードコアロックからピアノまで、千代田さんも幅広く音楽を聴くんですね。イベントには行かないんですか？

千代田さん：行かないです。基本的に家から出たくないので。

───なるほど！千代田さんらしいですね！ちなみにイヤホンにはこだわりとかありますか？

千代田さん：会社ではSONYの6,000円くらいのイヤホンを使ってます。家では「SteelSeries Siberia v3 Prism Cool Grey」というヘッドフォンを使ってますが、ヘッドフォンを外でつけるのは抵抗があります。似合う人がつけてるならいいですけど、自分がつけるのは恥ずかしいですね。

へいへいさん：ヘッドフォンのブランディング的に悪い感じしますよね。笑

───お二人とも謙虚ですね！絶対ヘッドフォン似合うのに！千代田さん、へいへいさん、ありがとうございました！

アプリのことなら俺に任せろ。ヤンヤン！

次は、アプリ開発をしている中国出身のヤンさんが音楽を聴いているので、お話を聞いてみましょう！
ヤンさんはコーヒーがお好きなので、コーヒーを淹れながらお話しましょう！

───普段、ヤンさんはどのような音楽を聴きますか？

ヤンさん：基本は雑食ですが、冷血系か熱血系です。

───？？？！具体的に、好きなアーティストはいますか？

ヤンさん：冷血系でいえば●×△●・・ですね。

───？？？？！（発音良すぎて聞き取れず）スペルをお願いします・・・！

ヤンさん：「Two steps from hell」です。絶対に皆さん聴いたことありますよ。

───初耳です！調べてみますね！（調べてみる）　あ〜『ハリー・ポッター』、『パイレーツ・オブ・カリビアン』、『X-メン』など、映画のトラックを提供しているんですね！

ヤンさん：それは知らなかったです。笑

───笑。　（Youtubeで聴いてみる）おお、めちゃかっこいいですね！ゲーム系の音楽って感じがしますねー！そのほかに聴く曲はありますか？

ヤンさん：アニメの曲なんですが、A/Z|aLIEz（アライズ）という曲です。このアニメを見たことはないのですが、中国ですごく人気の曲です。

───へえ！そういえばヤンさんはアニメがお好きですよね！どんなアニメがお好きなんですか？

ヤンさん：最近は「ペルソナ」シリーズを見てます。RPGのゲームがアニメになったものです。

（都築くん登場）

都築くん：「とある魔術の禁書目録」じゃないんですか？

ヤンさん：科学の方が好きです。

───・・・！？

都築くん：「とある魔術の禁書目録」と「とある科学の超電磁砲」があるのですが、ヤンさんは「とある科学の超電磁砲」の方が好きと言ってます。

───都築くん解説ありがとうございます！そういうアニメがあるんですね！ところで、ヤンさんはコミケには行かないんですか？

ヤンさん：人が多いので行かないです。

都築くん：でも、機会があれば行きたいですよね！ぜひ一緒に行きましょう！

───都築くんはコミケとかに行くんでしたっけ？

都築くん：行ったことあります。あれは一回行くとハマりますよ。ぜひヤンさんと行きたいですね。

───そうなんですね〜！今度、コミケの魅力についてもぜひ教えてください！都築くん、ヤンさん、ありがとうございました！

エレベーターでのりすけさんに会いました！

エレベーターでSREののりすけさんに会ったので、インタビューしてみました！アイスランドのシンガーソングライター、「ビョーク」のTシャツを着ているので、期待が膨らみますね！

───のりすけさん、こんにちは！突然ですが、仕事中はどんな音楽を聴いているんですか？

のりすけさん：最近は他の方と話をすることが多いので、あまり聴いていないです。聴くときはAppleMusicでオススメの曲とかを聴く感じですね。

───のりすけさんは他のエンジニアの方とお話をしていることが多く、周りから頼りにされていますもんね！
さすが、開発部門の父！のりすけさんといえば、音楽をやっているお友達が多いイメージがあります。イベントには行くんですか？

のりすけさん：最近は全然行かないですね。昔は電気グルーヴのイベントによく行っていました。あと、知人が出てるモッシュするような激しいイベントによく行っていましたが、もう年齢的に無理ですね。今は座って音楽を聴きたいです。

───すごいわかります！電気グルーヴのイベントは日本全国に行っていたんですか？

のりすけさん：それはないですね。追いかけたいとか、会いたいとかは別に思わないんですよ。

───都築くんもそんなようなこと言ってましたね。会ったらアイドルじゃなくなるって言ってました！

のりすけさん：その気持ちわかるかもしれないです。会ってみてイメージ崩れるのは嫌だなと思いますね。

───なんだか深いですね〜。多分アーティストのファンというよりは『音楽が好き』という部分が強いのかもしれないですね！のりすけさん、ありがとうございました！

さいごに

今回は、開発メンバーが普段どのような音楽を聴いてお仕事をしているのかを聞くことができ、知らないアーティストや普段聴かない音楽ジャンルについて知ることができました。皆さんから教えていただいた音楽を私も聴いてみたいと思います！

私たちテックチームでは「くらしのマーケット」を一緒に作る仲間を募集しています！

【本当に優秀な人はマネージャーが必要ない】という考え方のもと、各自、自分自身をマネジメントできるよう、フレックスタイム制やフレキシブルな休暇など、個人の裁量に働き方を委ねる様々な制度を導入しています。

「好きな音楽を聴きながら仕事をしたい！」
「仕事後に音楽イベントに行きたい！」
「アイドルイベントのために有給取りたい！」

と思った方、ぜひ一緒に働きましょう。ご応募お待ちしております！
（コーポレートサイト https://www.minma.jp/ ）

次回は樹木に優しいエンジニア、へいへいさんの予定です！

Robot Frameworkを利用したUIテスト

こんにちは、新卒エンジニアのツヅキです。
今回はRobot Frameworkを使ったSPページのUIテストのお話です。
そもそもRobot Frameworkを使った”SPページのUIテスト”（以後、テスト）とはなんでしょうか？

スマートフォンのブラウザからあるサイトにアクセスし、特定の動作に対して機械的にテストをすること

ここでいくつかの疑問が生まれます。

• なぜ、わざわざ機械的にテストするの？
• なぜ、SPページでテストするの？
• そもそもテストする必要ある？

などなど、では一つずつ考えていきましょう。
なぜ、わざわざ機械的にテストするの？
何度も同じテストを人が一回一回テストすると、とても時間がかかります。しかし、機械的にテストをすることによりテスト時間を大幅に短縮することができるので機械的にテストします。
なぜ、SPページでテストするの？
パソコンのブラウザより、スマートフォンのブラウザの方が多くの人に利用されているので、SPページでテストします。
そもそもテストする必要ある？
テストをすることによってテストケース内の動作は正常に動作できることは保障されるからです。

では、本題のRobot Frameworkのお話です。
Robot Frameworkは何かについて少しだけ説明させていただきます。

受け入れテストやテスト駆動開発 (ATDD) のための、オープンソースの汎用テスト自動化フレームワークです。 簡単に扱えるテーブル形式のテストデータ記述方法を備えていて、キーワード駆動型のテストアプローチに便利です。 テスト機能は Python や Java でテストライブラリを書いて拡張できます。 ユーザは既存のキーワードを使って新しい高水準キーワードを定義でき、それを使ってテストケースを書けます。[1]

どうやら、無料で簡単にテストを作ることができて、いい感じにカスタマイズできる素晴らしいシステムのようです。
今回のSPページのテストに利用するスマートフォンの種類としてiPhoneのシミュレーターを利用します。
大まかに必要なものを説明します。

必要なもの

• Appium
• Xcode
• Python
• iPhoneシミュレーター
• 失敗してもめげない心

特に、一番下の失敗してもめげない心はとても重要です。MacがあればiPhoneシミュレータもAppiumもXcodeも簡単にインストールできますが、テスト環境を作ったりRobot Frameworkでテストを書いているとたまに心が折れそうになるのでしっかりと心の準備を整えてから挑んでください！

では早速インストールの話ですが、”brewでAppiumとMacAppStoreなどからXcodeをインストールし、XcodeでiPhoneシミュレーターを設定後、pipでRobot Frameworkをインストールしてみてください。”[2]ここで書くとこのブログを読んでくださる方も書いている私も心が折れそうなので割愛します。
（私がRobot Frameworkが正常に動作するようになる頃には、心のHPが85%くらい削られていました）

まず最初に、Robot FrameworkからAppiumに対してどのようなものを使うかの設定を行います

Robot Frameworkの設定

*** Keywords ***
Initialize
    ${caps}=  create dictionary  browserName=Safari  platformName=iOS  platformVersion=11.4
    ...                          deviceName=iPhone 8  automationName=XCUITest  useNewWDA=true
    create webdriver  Remote  command_executor=localhost:3000  desired_capabilities=${caps}

こんな感じです。簡単に説明すると、

• iPhone 8 のシミュレータを使います。
• iOS11.4を使います
• localhost:3000から操作を行います。

と書いてあります。 （Robot Frameworkに合わせてAppiumの設定を行う必要があります）

では次にRobot FrameworkでGoogleにアクセスして見ましょう

Webページへのアクセス

go to  https://www.google.com/

ここでのポイントは、go toの間のスペースは１つ~ to http://example.comtoとURLの間のスペースは２つというところです。

次は、特定の要素をクリックするという操作です。

要素の選択

click element  ＜XPATH＞

この操作は特定のXPATHをもつ要素をクリックするという操作です。ここでも、click elementの間のスペースは１つ、element ＜XPATH＞の間はスペース２つです。＜XPATH＞の部分には特定の要素を示すXPATHを示してあげてください。

次は、特定の要素に対して入力するという操作です。この操作のおかげで、ボックスなどに対して文字を入力することができます。

文字の入力

input text  ＜XPATH＞  ＜入力したい文字列＞

この操作は特定のXPATHに対して文字列を入力するという操作です。input textの間のスペースは１つ、text ＜XPATH＞ ＜入力したい文字列＞の間はスペース２つです。＜XPATH＞の部分には特定の要素を示すXPATH、＜入力したい文字列＞の部分には入力したいテキストをそのまま入力してください。

次は、特定の要素が見つかるまで待つという操作です。この操作があるおかげで、読込みが早い時も、遅い時も、普通の時も要素のクリックや入力が正常にできるまで待ってくれます。

待機

wait until element is enabled  ＜XPATH＞

この操作は特定のXPATHを読み込むまで待つという操作です。

いかがでしたか？
今回は基本的な部分だけでしたが、他にもifやforといった条件分岐や繰り返しを行うことができるので興味がある方は調べて見てください！ 一緒に働いてみたいといった方もぜひお待ちしてます！

参考

[1] https://robotframework-ja.readthedocs.io/ja/latest/quickstart/QuickStart.html
[2] http://thinkami.hatenablog.com/entry/2017/09/15/222958