この記事は Safie Engineers' Blog! Advent Calendar 23日目の記事です。 企画本部のマネジメントをしております植松です。 本テックブログももうすぐ丸4年を迎えます（祝！）。テックブログのごく初期に プロダクト（商品）開発の歴史 を投稿してからもSafieは様々なプロダクトを世に出してきました。 そこで、本記事ではこの4年間でリリースしてきたプロダクト群の一部紹介と、今後の展望について書いてみたいと思います。 プロダクト年表 (2020~) Safie API / Safie Developers Safie Pocket2 / Pocket2 Plus Safie One / SPDP 今後の展望 Safie API / Safie Developers 2020年迄はエンドユーザーやパートナーの方向けの製品を作っていましたが、開発者向けの初のプロダクトとして2021年2月に Safie API をリリースしました。 これにより、お客様の既存の業務ツールに我々の映像を組み込んでいただいたり、画像解析をお客様側で行っていただく、など、お客様側の使い方の幅が格段に広がりました。 元々の企画の始まりはパートナー様向けの案件があり、それは画像取得しViewerへのイベント登録をパートナー様側で画像解析して登録する、というものでしたが、我々のサービスとしては汎用化を見据え同時にストリーミングAPIを準備しました。かなりタイトなスケジュールでしたがなんとかリリースにこぎつける事ができました。このパートナー様向け機能については継続的に多くの台数使っていただいて売上高も順調に伸ばしており、今後のAPI利用の足がかりにもなったと思っています。 当初はβ版として限られたユーザにのみ使っていただいてましたが、今年頭から晴れて Developer（Safie API v2） として生まれ変わり、登録したユーザは誰でも使っていただけるようになっています。このブログでは APIの使い方 や、 APIの便利なユースケース も紹介していますので、そちらもぜひご覧いただければと思います。 Safie Developers Topページ Safie Pocket2 / Pocket2 Plus ウェアラブルカメラPocketシリーズは2020年にリリースしたPocket2 , 2023年にリリースした Pocket2 Plus と着実な進化を遂げていますので、その歴史について簡単に記したいと思います。 2020年一番の出来事は何と言っても新型コロナウイルスでした。弊社のサービスもコロナウイルス対策最前線の病院などで活用され、その事例は英国のBBCニュースでも取り上げられました。 そこに遠隔業務の切り札として満を持して2020年7月に登場したのが「 Safie Pocket2 」です。 初代Pocketは、所謂MVP（Minimum Value Product）と呼ばれる仮説検証のため、市販のウェアラブルカメラのソフトウェアをカスタマイズしたものです。静止画スナップショット機能やWebRTCによるリアルタイム双方向音声通話の実現といった新開発機能を盛り込んだ、新しいサービスでした。 私が入社した頃には既に初代Pocketは開発が終わっていましたので、伝え聞くところにはなりますが、カメラ本体に加えて無線LANルーターやモバイルバッテリーが別途必要で、ご利用いただいたユーザー様からもやはり、重い、持ち運びしにくい、というフィードバックを数多くいただいていたようです。そこで、エンジニアが、インターネットで見つけた世界中のウェアラブルカメラメーカー（英語では "body worn camera" と呼ばれます）に手当たり次第問い合わせをし、国内外のこれといった展示会を巡った末に実現したのが「Safie Pocket2」でした。 当初は3月に製造して4月販売開始の予定でした。新型コロナウィルスの脅威が日に日に高まり、外出自粛やリモート勤務が行われる中で、Pocket2をご活用いただけるはず、だったのですが、なんとPocket2の工場まで閉鎖されてしまったのです。メーカーさんが何とか頑張って工場を再開したのに部材も人も揃わない。組立が完成しても、物流が混乱しているので発送したカメラが届かない。お待ちいただいていた皆様にようやくお届けすることができたのは、3カ月遅れの7月になってしまいました。予定よりも遅れてしまいましたが、ユーザー様にはご満足いただき、さらにはテレビ東京 WBSで取り上げていただくなど、社会的にも注目される商品となっていきました。 ここで歩みをとめたわけではなく、使っていただいている中で様々な品質課題や改善要望が上がってきておりそれらを解消すべく、今年の5月に新たに Pocket2 Plus をリリース。ウェアラブルならではの「手ぶれ補正」や、音声品質改善のための「スピーカー通話」、ウェアラブルといいながらも実際には固定して長時間利用されている方も多いため「モバイル給電」などの機能を搭載。より痒いところに手が届く、使い勝手の良さを追求したプロダクトとなっています。来年は海外にも羽ばたく予定です。 Safie One / SPDP 弊社CEOの佐渡島が創業当時から何度も語っていた「かしこくなるカメラ」の実現。Safie初のエッジAIカメラである Safie One は2022年9月にリリースされましたが、このリリースも苦難の連続でした。 CC2 / CC2Lという主力プロダクトの製造会社に開発依頼し、商品コンセプト、ハードウェアデザインについてデザイナーの方とコンセプト固めをして何度もやり取りを行い、試行錯誤を行いながらデザインを決めていきました。その後試作機が届いたのですが、SoCから発生する熱問題（AIを定常的に使っていると熱暴走して停止してしまう）・カチカチ音問題（カメラ内部で音が定常的に鳴る）・IrLED反射問題（レンズの下部に反射して映像にゴーストが発生してしまう）... などなど、大きな課題から小さな課題まで膨大な件数を、1つ1つ潰していきながらプロダクトリリース。 当初の構想から足掛け2年。やっとの思いでリリースした後も安定して量産にこぎつけるまでに様々な苦労がありましたが、現在はぽん置き出来る手頃なAIカメラとしてセーフィーの主力商品となっています。 当然ながら、エッジAIカメラというからには同時並行でAIアプリも開発が必要です。 SPDP という主に店舗で使っていただくための立ち入り検知・通過人数カウント・立ち入りカウントがパッケージされたAIアプリを同時リリースしているのですが、これも途中で1度UI部分の仕様変更に伴った作り直しが入り、今の形となりました。もちろんViewerからスムーズに使える使い勝手の良さは他のアプリと同じ思想で作られています。 vimeo.com 今後の展望 まだまだ書きたいプロダクトは色々あるのですが、長くなってしまうので改めての機会とさせていただき、ここでは今後の展望を記したいと思います。 セーフィーでは「映像から未来をつくる」をビジョンに掲げ、ユーザーの課題を解決するプロダクトを創業当初から作り続けて来ました。今後は、 パートナーであるカメラメーカーをユースケースに合わせて増やしていき、カメラ、特にエッジAIカメラのラインアップや、カメラを使える環境（ネットワーク機器、SIMなど）の提供 よりユーザーの課題に寄り添ったソリューションの提供 映像プラットフォーマーとして技術をさらに活用してもらう方法をAPIやSDKで提供 といったあたりを中心に、セーフィーを使ってくださる方を増やし、セーフィーの映像を使って課題解決出来ることをどんどん増やしていきたいと考えています。 最後に、セーフィーでは新しいプロダクト、サービス、ソリューションを一緒につくっていただけるエンジニアやプロダクトマネージャーを大募集しています。面白そうだな、と思った方はカジュアルに話してみたい、で結構ですので是非コンタクトいただけると幸いです！ open.talentio.com

この記事は Safie Engineers' Blog! Advent Calendar 22日目の記事です。 セーフィー株式会社でソフトウェアエンジニアをしている大場です。 2022年10月に子供が生まれました。あれから1年という月日が経ち、育児の大変さを実感してきました。ソフトウェアエンジニアという職種はPC１台とネット環境さえあれば場所を選ばないため、コロナ禍もあり、リモートワークを中心として育児と仕事の両立を図りました。 本稿では育児の中で培ってきたあやし方や寝かしつけ方の回顧録を多少のエンジニア視点を交えてまとめておきます。尚、子供によって合う合わないはありますので、必勝の攻略法は（おそらく）存在しないことをご承知おきください。 爆誕から生後3ヶ月ぐらいまで 〜６ヶ月ぐらいまで 〜9ヶ月ぐらいまで 〜12ヶ月まで １年を振り返って 爆誕から生後3ヶ月ぐらいまで このフェーズでは如何に寝かしつけることができるか、が重要になってきます。と言うのも、生後間もない赤ちゃんは我々のように寝るという概念を知らないため、眠たくなると不機嫌になります。そして、不機嫌になることで泣いて苦しさを訴えてきます。そしてさらに眠れなくなり、不機嫌に... を繰り返す言わばデッドロックの状態に陥ります。 この状態を打破するには泣き疲れさせるか、睡眠導入ツールを活用するかになるわけですが、泣き疲れさせる場合は30分ほどで寝てくれる場合もありますが、大抵は寝てくれないので睡眠導入ツールが必須になります。 とりわけ、我が子はコリック（黄昏泣き）が酷く、生後３週間ほどから毎日のように夕暮れ時からギャン泣きしました。そこで、何か解法はないかと模索したわけです。 当時活用したツールは抱っこしながら音楽を流すことです。曲はネット界隈で話題となっている反町隆史のPOIZONです。なぜこの曲が有効なのか定かではないですが、一説によると低い音程で一定のリズムを刻んでいることが体内の音に近いということらしい。 反町隆史を交えた実際の検証記事はこちら www.oricon.co.jp 曲の長さは4分ほどですが、我が家の場合は5サイクルほど(約20分)流すと大抵は寝てくれました。寝てくれない時は追加で数サイクル流します。そして、ベビーベッドで横に寝かせた後は耳元で音量を少しずつ下げながら流します。そして次第に深い眠りに入ったら成功です。 ですが、背中スイッチ（横になった瞬間起きてしまうこと）が発動すると振り出しに戻ってしまうため、無事に寝てくれた時は奇跡と思い、一切の物音や足音をたてない忍びの心得が身につきました。 しかし、寝ている時でもモロー反射（驚いた時に手足を広げる原始反射の一つ）はランダムで発動し、これに自ら驚いて起きてしまうというどうやっても回避不能なイベントが存在します。1年を通してみてもこの時の寝かしつけが最も困難であったと思います。 〜６ヶ月ぐらいまで この頃は多少の寝返りはしつつ、テレビをなんとなく観ることができるようになりました。Prime Videoで適当な子供向けの動画を流すわけですが、ある時、特定の動画に対して笑みを浮かべていることに気付きました。 その動画のタイトルは「 卵で色を学ぶ 」で、内容は目玉のついた卵に色をつけて、「ハーイ」と叫びながら画面に迫ってくるものですが、この瞬間が好きだったようです。赤ちゃんは（おそらく）複数のオブジェクトを同時にトラッキングすることができないため、画面一杯で単一のキャラクターを映すようなシンプルなシーンの方が興味を引きやすい傾向にあるようです。 www.amazon.co.jp 一方、寝る方はというと、コリックによるギャン泣きの回数は減っていきました。しかしながら、体重増加に伴い、連日の抱っこで腰痛を発症しており、立った状態で寝かしつけることが困難になってきました。様々なツールを試行しましたが、最終的に行き着いたのは「バランスボール」でした(教えてくれた同僚の方ありがとう)。 寝かしつけの基本動作は上下に揺らすことなのですが、バランスボールがあると、座った状態で上下に大きく揺らすことができるため、腰の負担も少なく割と安定して寝かしつけを行うことができました。ただし、バランスボールから急激に立ち上がると、感覚が狂いバランスを崩してしまい、その瞬間起きてしまう恐れがあるため、体を上下に揺らしながら少しずつ立ち上がるという小技を編み出し、シームレスな移行を実現しました。 ちなみに、私が購入した製品はこちらです。実際にスポーツジムで使われており、空気もほとんど抜けないため、寝かしつけ以外でも利用価値が十分にあります。サイズですが、空気をフルで入れることはなく、空気の量で高さの調整が効くので割と大きめを買った方が良いです。 https://www.amazon.co.jp/gp/product/B00DU46YSA/ 尚、この頃までベビーベッドで寝かせていたのですが、ある日を境にベビーベッドで寝ることが一切できなくなりました。色々試行した結果、床にマットを敷いて一緒に寝たらいけそうだということで、それから床で寝るようになりました。 〜9ヶ月ぐらいまで この頃になると、つかまり立ちとハイハイができるようになりました。我が子はハイハイの速度が異常に速く、Macで作業をしているとキーボードを目掛けて脱兎の如く突進してくるようになりました。記憶力もついてきて、それまでは布団を被っていれば気付かれなかったのですが、布団をはいでくるようになり、手の届く所での作業が困難になってきました。 そんな時は例のごとくテレビで動画を観せるのですが、さすがに卵は観飽きたのか集中力が続かなくなりました。代わりに興味を示したのがPrime Videoの「 モラン 」です。ウサギのモランとヒヨコのピウピウのアニメなのですが、これが大ヒットし、映してる間はテレビにかじりつき、卵に代わる鉄板のコンテンツになりました。こうした番組を一つは見つけておくと、いざという時に大変助かります。 ちなみにですが、モランは大人も楽しめる内容で、私はグッズを買いにいくほどのファンになりました。 www.creativeyoko.co.jp www.amazon.co.jp 寝かしつけの方ですが、バランスボールは子供の成長に伴い、ボールの上で立ってしまうようになり、座った状態で寝かしつけることが困難になってきました。ですが、自分の寝床を何となく理解できるようになり、ツールを使わなくても自分で頑張って寝ようと試行してくれるようになりました。 〜12ヶ月まで この頃になると成長が著しく、歩き始めたと思ったら、いつの間にか走り出すようになっていました。疲れて床に横たわっていると、平然と踏み潰して乗り越えていきます。子供にとっては単なる障害物と認識されているのでしょう。寝かしつけに活用していたバランスボールはいつしか転がして遊ぶようになっていました。 テレビはモランが相変わらずのお気に入りですが、モランは独自のモラン語を話すため、このままでは日本語でも英語でもなく、モラン語を話す子に育つのではと危惧し、他のコンテンツも併用して観せるようにしました。 テーブルの上でMacを開いているとソファによじ登って攻め込んでくるため、最終的にキッチンカウンターで立った状態で作業していました。そうしていると、子供が脚にまとわりついてきて、奥さんと隠れんぼで遊びだします。 寝かしつけは走り回って疲れさせた後は、電気を消せば自分の力で寝てくれるようになりました。寝るまでは一緒に横になって添い寝してあげるのですが、寝返りをする際に裏拳とソバットが飛んでくるので、ガードは崩さないよう注意が必要です。 １年を振り返って 振り返ってみると、この一年は仕事も含め壮絶であり、長いようであっと言う間でした。育児は自分が想像していたよりもずっと難解であり、本稿では語られていないお風呂、ミルク・離乳食、おむつ替えなども含め、日々時間に追われていました。また、これまで通用していたことが次の日から全く通用しなくなる、ということも日常茶飯事でした。そのため、子供の成長に伴い、生活サイクルを適応させていくことが常に求められました。 仕事との両立面では、子供が誕生してからは子供を中心とした生活に激変しました。それまでは、好きな時に開発することができましたが、それは不可能になりました。特に生後間もない頃は育児で1日が終わってしまう、という日も多々ありました。 そのため、限られた時間を如何に有効活用し、効果を最大限に発揮するか、という意識が強く芽生えるようになりました。また、何より、家族の支えにより、仕事に集中できる時間を捻出できるようになったことで、育児と仕事を両立しながら、次第に以前と変わらぬパフォーマンスを発揮できるようになった点も大きいです。 これらの経験を通じて感じたことは、 育児と仕事を分業するのはあまり効率的ではなく、大切なのは互いに助け合う意識を持ち、互いの負荷を減らすことを常に意識する、それが結果的に高いパフォーマンスの維持に繋がるということです。 思考の面では、エンジニアは物事を論理的に考え、必ずそこに解があると信じて止まない生き物ですが、子供の成長を通じて、イレギュラーケースに対してはそういうものなんだな、と思えるようになり、これまで自分が持ち合わせていなかった考え方ができるようになりました。 総括すると、育児を通して、自分自身もまだまだ未熟であると再認識することができ、今年１年は人生の中でエンジニアスキルとは別に、人として大きく成長できた1年になったかなと思います。 ※ご紹介した番組はPrime Video以外にYoutube等でも配信されていますので、お好きな配信サイトをご利用ください。

この記事は Safie Engineers' Blog! Advent Calendar 2023 の21日目の記事です。 はじめに セーフィー株式会社で画像認識AIの開発エンジニアをしている木村（駿）です。主に、エッジAI搭載カメラで動作する人やモノを検出するアプリケーションの開発を行っています。 このAIカメラを使って、弊社では指定したエリアへの人の侵入を検知するサービスや混雑度合いを数値化するために滞留人数をカウントするサービスなどを提供しています。 これらのサービスが、必要な基準や要件を満たしているかどうかを確認するため、QA (Quarity Assureance) 評価を実施しています。具体的には、AIの検出性能や追跡性能のみを評価するのではなく、実際にユーザーが見る値（侵入検知のフラグやカウント数など）が正しく機能しているかを評価します。 このQA評価をするには評価用データ、つまりアノテーションされたデータが必要になりますが、動画のアノテーションデータの作成は非常に大変です。仮にFPS30の10分の動画に対してアノテーションデータを作ろうとすると、1フレームごとに5人映っていれば 30fps×600sec×5=90000個の矩形を手作業でつける必要があります。バリエーションを作ろうと思うと複数の動画のアノテーションデータが必要で、さらに大変です。 そこで、CGで映像を作成し、自動でアノテーションデータを作成できないかと考えました。 今回は、ゲームエンジンであるUnityを使ったCG映像の作成方法と、CGの人物に対して人検知を行った結果および簡易的なQA評価の結果をご紹介します。 はじめに 利用したツール Unity Perception Package CG映像の作成方法 背景を設定 移動経路と動作を設定 人検知の確認 QA評価 まとめ 利用したツール Unity CG映像の作成にはUnityを利用しました。Unityは米国のUnity Technologiesが提供するゲームエンジンで、ゲームを簡単に作るための支援をしてくれる統合開発環境（IDE）です。3Dや2Dのグラフィックスを扱いやすくし、ゲームだけではなく映像の作成にも活用されています。 使用したUnityのエディタバージョン：2021.3.29f1(LTS) Perception Package CGの人物に自動でアノテーションを付与するため、Unityが提供するPerception Packageを利用しました。 Perception Packageは、画像認識モデルの訓練や検証に利用するための大規模なデータセットを生成するためのツールです。以下の動画ように、物体検出タスク向けのBounding Box 2D、セグメンテーションタスク向けのSemantic Segmentation や Instance Segmentation、姿勢推定タスク向けのKeypoint など様々なアノテーションデータを作成できます。今回は人検出なので、Bounding Box 2Dを利用します。 使用したバージョン：1.0.0 CG人物の生成 Perception Packageでは人物の生成が可能です。上記でアノテーションされている人物もアセットではなく生成された人物で、[ 性別、年齢、人種、身長、体型、服装 ] のパラメータをランダムに振って生成することができます。 生成した人物は、通常のUnityのアセットと同じようにC#Scriptやアニメーションなどのコンポーネントを付けることができるため、作成したい映像に合わせて動作させることができます。 CG映像の作成方法 次に、CG映像の作成方法を説明します。ここでは、弊社のAIカメラの機能であるエリア内に滞留している人数をカウントする機能のQA評価をするため、例としてスーパーのレジ待ちで並ぶお客さんを想定したCG映像を作成します。 背景を設定 まず、背景画像を設定します。今回は簡易的に静止画像を背景として、その前景に人を動かす仕様にしました。Unity上の設定方法としては、Camera Object の子オブジェクトとしてPlane Object を作成し、Plane Objectに背景画像を貼り付けます。そして、Camera Object と Plane Object の間で人を動かすことで、画像の前景として人が動く映像を作ります。 今回はこちらのスーパーのレジ付近の画像を背景に設定しました。人を左から右へ歩かせ、☆を先頭にして赤で囲んだ範囲に並ばせようと思います。 移動経路と動作を設定 人物の移動経路や動作を制御するアルゴリズムをC# で実装しました。 ① 画面左側に人オブジェクトを生成し、上図の☆の位置を目標地点として左から右へ歩かせます。 以下のスクリプトで人オブジェクトを現在位置（transform.position）から目標地点（targetPosition）に向けたベクトル （moveDirection）方向へ移動させます。targetPositionはUnityのUIで入力できるよう、public 変数にしています。 public Vector3 targetPosition; public float moveSpeed; Vector3 moveDirection = targetPosition - transform.position; Vector3 deltaMovement = moveDirection.normalized * moveSpeed * Time.deltaTime; transform.position += deltaMovement; ② 目標地点に到達もしくは前に別の人がいたら立ち止まらせます。 以下のスクリプトで前方に人がいるかを判定します。前方のみの当たり判定を得るため、ColliderではなくRaycastを使用しました。 Ray ray = new Ray(transform.position, transform.forward); RaycastHit hit; hasFrontObject = false ; if (Physics.Raycast(ray, out hit, 0.5f )) { hasFrontObject = true ; } 目標地点に到達もしくは前にオブジェクトがあれば停止し、そうでなければ前進させます。 if ( ! hasReachedTarget) { Vector3 moveDirection = targetPosition - transform.position; // 目標地点に到達もしくは前にオブジェクトがあれば停止 if (moveDirection.magnitude > 0.5f && ! hasFrontObject) if (moveDirection.magnitude <= 0.5f || hasFrontObject) { // 停止 transform.position = transform.position; hasReachedTarget = true ; } else { // 前進 Vector3 deltaMovement = vec.normalized * moveSpeed * Time.deltaTime; transform.position += deltaMovement; } } ③ 列に並んだ人オブジェクトは、しばらく時間が経過したら右を向いて再び歩きだしフレームアウトさせます。 if ( ! hasReachedTarget) { ~~~~ // 手順2の処理 ~~~~ } else { // 目標地点に達したので、一定時間が経つまで待ちます。 stayDuration += Time.deltaTime; if (stayDuration < stayTime) { // 一定時間経つまでその場で停止 Vector3 moveDirection = targetPosition - transform.position; } else { // 一定時間が経つと右に体の向きを変えて、再び前進 if ( ! hasRotated) { Vector3 exitDirection = transform.right; Quaternion rotation = Quaternion.LookRotation(exitDirection); transform.rotation = rotation; hasRotated = true ; } Vector3 forwardDirection = transform.forward; walkForward(forwardDirection); } } 以上のアルゴリズムを用いて作成した映像がこちらです。描画されているバウンディングボックスは自動作成されたアノテーションです。 期待通り列を形成してレジを待っている感じの動画が作られています。 人が宙に浮いている感は否めないですが、人検出モデルの性能を評価する分には問題なさそうです。 最後に、QA評価を行う前に、このCGの人物をAIが人として認識してくれるか確かめてみます。 人検知の確認 作成した映像に対してYolov5sで推論したところ、ちゃんと人として検出してくれました！ この生成と動作を繰り返す映像を作成すれば、レジに並んだ人数を正しくカウントできているかのQA評価ができそうです。 QA評価 上記の作成方法をベースにレジに並ぶ人数を変動させて30分ほどの映像を作成しました。この映像を用いて、カウントが正しくできているか評価します。カウントは人検出したBBOXの中心が10秒以上エリア内に留まった場合に行い、カウント数は1分ごとに集計しました。 以下のグラフが結果で、横軸は時間、縦軸が1分あたりのAIによるカウント数とGTです。GTはアノテーションデータを用いてカウントした数です。 30分の映像の中で集計間隔ごとの誤カウント数が3、未カウント数が2と、かなり正確にカウントできていることが分かります。 22分あたりの誤カウント+2の原因を映像から探ってみると、背景と同系色の服を着た人物の検出が途絶え、同じ人物を複数回カウントしていることが原因でした。実際のQA評価では背景やカメラアングル、人数などのパラメータを変えてバリエーションのあるデータセットで評価しているので、誤カウントや未カウントを起こしやすい環境や条件などをさらに詳しく分析できました。 まとめ Unity Perception Packageを使って作成したCG映像でQA評価ができることが分かりました。 物体検出タスク以外にも、セグメンテーションや骨格推定などのタスクにも利用できますので、ぜひ使ってみてください。

この記事は Safie Engineers' Blog! Advent Calendar 20日目の記事です 自己紹介と本日のテーマ はじめまして、セーフィー株式会社でSafieの映像サービスを支えるSaaSプラットフォーム プロダクト群のPdMをマネジメントしているマネージャーの光田です。 本日はPdM組織のマネジメントについて、発生した課題と解決のために取り組んでみた施策についてお話しさせていただきます。 自己紹介と本日のテーマ 前提 発生した問題 どうやって解決したか まとめ 前提 PdMの業務は会社によって大きく変わりますが、SafieのPdMの業務分掌は以下となります。 市場調査、企画提案、収益試算 要求定義、要件定義 KPI設計、プロダクト改善 主にWhy/Whatの整理と関係各部署との調整がPdMの仕事、How/Whenの整理と実現がPMの仕事となります。ほとんどのプロダクトでPMMロールをおいていないので、PMMの仕事もPdMの役割に入ってきます。 また、私がマネジメントしている組織はPdMのみ6名で、 映像を閲覧するSafie Viewer カメラの権限などを統合管理するSafie Manager の2つのユーザー向けプロダクトと、これらの情報を制御するプラットフォームシステム（録画日数の制御や、カメラの稼働状況監視、録画プランやオプションなどの管理）のプロダクトマネジメントを実施しています。 発生した問題 PdMのみの組織をマネジメントするようになって3ヶ月程度が経過したところ、1on1などを通じていくつかの課題がメンバーから共有されるようになりました。 PdMのカバー範囲が広すぎる Safieは一般的なSaaSサービスと異なり、カメラやルータなどのハードウェアも扱っています。PdMはビジネス、ハードウェア、ソフトウェア、在庫・物流オペレーションも把握した上でプロダクト仕様について意思決定しなければならず、PdMとして活躍できるようになるまでの学習コストがとても高い状態でした。 個人事業主の集まりのようになってしまう PdMは各々が担当しているプロダクトの成果を最大にするために、プロダクトチームのマネジメントに注力します。するとPdM同士がコミュニケーションをとる機会が減ってしまい、組織としての連帯感が生まれない状況が発生しておりました。 PdM自身が休めない プロダクトに対する意思決定が迅速にできるよう1プロダクト1PdM体制にしていました。体調不良などで予定外の長期休暇を取るとプロダクト進捗が遅れてしまうため、多少無理をしてでも業務を実施せざるを得ないケースがありました。また、PdMの退職でノウハウが引き継がれず、過去の経緯がわからず右往左往するケースがありました。 PdM自身で全て抱えて解決しなければならず、孤独を抱えて業務をこなしていることが明らかとなり、対策を講じることにしました。 どうやって解決したか さまざまな手段をメンバーとともに検討し試してみましたが、最終的に有効な解決策は 『全てのプロダクトにおいてPdM2名体制でプロダクトマネジメントを行う』 ということでした。 PdMは幅広い知識や経験が必要になりますが、それぞれの得意分野があることが多いです。 営業職や事業開発職からPdMになったメンバーはビジネスが、ソフトウェアエンジニアやPMであればソフトウェア開発にキャリアの軸を持ってPdMになっています。 SafieのPdMもそれぞれの得意分野があり、逆にそれ以外の部分については入社後にキャッチアップが必要でした。 PdM2名体制を標準にすることで、ビジネス / ハードウェア / ソフトウェア / オペレーションについて得意分野が異なるメンバを組み合わせてアサインし、相互に教え合う体制を作ることができ、全てに対して知見がなくともPdMとしてプロダクトマネジメントに取り組むことができるようになりました。 また、2名でプロダクトを見ることでお互いの連帯感が高まり、PdMが休めない状況も解決しました。とても単純なこの施策ですが、1名体制だった時よりも安定感が増しプロダクト改善も以前より進むようになりました。 まとめ 現在は上記の施策に加え、組織の連帯感を高めPdMとしての成長を加速する目的で、週次でPdMに関するオンライン講座を受講し、学習内容をサマリーして輪番で発表する会を運営しています。 講座の内容に関連する悩みをメンバーに共有したり、自分だったらこうする、などのノウハウを共有することで、お互いを高めあういいサイクルが出来上がっています。 これからも色々な施策を試しながら、チームの成長に繋げていけたらと考えています。 もし同じ悩みをお持ちのPdM組織のマネージャーがいらっしゃいましたら、参考にしていただけると嬉しいです。 最後まで読んでいただきありがとうございました。

この記事は Safie Engineers' Blog! Advent Calendar 19日目の記事です こんにちは。2023年3月にセーフィーにジョインした入社一年目のQCDグループの森重です。 入社してからはカメラの対応機種拡大やマイページ、モバイルアプリと様々な領域・プロダクトにQAとして携わっていて、テスト設計や手動テストの実行だけでなく自動テストにも取り組んでいます。 この記事ではQCDグループで取り組んでいる自動化、特にMagicPodに焦点を当てて、QCDグループがMagicPodでどんなテストを自動化しているかをお話できればと思います。 MagicPodについて 自動テストの目的 自動テストのスコープ 新機能：ヘルススコア メリット/課題 最後に MagicPodについて そもそもMagicPodとはなんぞや？という方もいると思うので、簡単にツールについて説明します。 MagicPodは有償のテスト自動化ツールでWeb・モバイルに対応したE2Eテスト自動化ツールとなっています。 他の自動テストツールと比べて優れていると思うのは、自動テストの実行回数に制限がない点、メンテナンス性を確保し易い点です。 実行回数に制限がないので、毎日自動テストを実行したいプロダクトに向いているツールと言えます。 自動テストの目的 次にQCDグループで自動化に取り組んでいる目的ですが、これはテスト実行回数増加と広範囲化でバグの早期検出とバグ検出件数増加のためです。 MagicPodに決まったテストを毎日実行させることでエラーを早期検出し、今までリスクベースで切り捨てていたテストもやってもらうことで、カバーできる範囲を増やすようにしています。 自動テストのスコープ 対象のテストは、ずばりリグレッションテストになります。 テスト対象の変更が少なくメンテナンス性の確保が比較的容易なことが大きな理由です。逆にE2Eテストで自動化しないほうが良いのは頻繁に変更が入る新規機能だったり、変更が入りやすい画面を対象としているテストケースです。 実際の画面をお見せするとこんな感じです。失敗しているテストケースもありますが、定期実行して毎日結果をモニタリングしています。 メンテナンスはチームで毎日持ち回りで担当していて、日々やっているという感じです。 新機能：ヘルススコア 少し話はそれてしまいますが、先日のMagicPodのメジャーバージョンアップで追加されたアナリティクスで自動テストのヘルススコアを算出してくれます。参考までにマイページのヘルススコアを紹介しておきます。 マイページ マイページではヘルススコア89です。このプロジェクトはQCDグループの中では後発で自動化を勧めており、パイロットプロジェクトでの運用経験からメンテナンス性を重視したテストケース作成をしています。 特にMagicPodの機能の中でも共有ステップ・変数は様々なテストケースの中の手順を一つの共有ステップで集約することで、テストケースのメンテナンス性・可読性が狙えるため積極的に活用しています。 メリット/課題 一通りテスト対象や運用については書き終わりましたのでMagicPodを自動テストに取り入れたことで感じているメリットと使い続ける上での課題についてもここに書いておきます。 MagicPodを導入したことで感じたメリット 早期バグ検出に役立つ テスト環境を広げたことによるバグ検出ができた メリットですが、こちらはMagicPodを導入した当初の狙い通り、バグ検出関連の恩恵が大きいです。 MagicPodを使い続ける上での課題 テストケースの作成 テストケースの属人化 テストケースの管理・メンテナンス 共有テストケースの活用不足、メンテ工数増 自動テストの実行結果をTesrailに自動でインプットできていない テスト分析 データ分析用の基盤の立ち上げができていないのでスピード感を持った分析が困難 教育 教育資料がなく、ジョインされた方も自己流で学ぶ必要がある 一方課題ですが、MagicPod利用上のルールやそのデータを活用できていないことが多く挙げられています。今後の改善活動として取り組んでいく予定です。 最後に 以上、QCDグループで使っているMagicPodについて紹介させていただきました。 当初狙っていた効果は一定得られているものの、まだまだ課題が残っていますので、継続して改善が必要そうです。 MagicPodにとどまらずテスト自動化について今後もテックブログで発信していきますので、よろしくお願いします。

この記事は Safie Engineers' Blog! Advent Calendar 16日目の記事です。 はじめに Gradioとは Gradioの主な特徴 Hello World! Gradioのインストール コード実装 実行結果 認証機能 リアクティブインターフェース ブロック構造とイベントリスナー コンポーネントの種類 主要コンポーネント一覧 実装例 ソースコード 画面 デプロイと共有 その他ドキュメント 関連記事 まとめ はじめに セーフィー株式会社 開発本部 第3開発部 AIVisionグループで画像認識AIの開発エンジニアをしている土井 慎也です。 セーフィーには2023年1月に入社し、もうすぐ1年が経とうとしています。 今年を思い返せば、生成系AIを中心とした、AI界隈の発展がすごい1年でした。 毎日のようにいろんな技術が発表されて、使えそうなものはすぐにOSSに実装されていて、技術進歩の速度がものすごく速く感じました。 さて、今回はそんなAI界隈で広く使われているWEB UIツールの Gradio について紹介したいと思います。 Gradioとは Gradioは、機械学習モデルを簡単にデモするためのPythonライブラリです。Gradioを使用すると、モデルの入力と出力に対応するインターフェースを簡単に作成でき、モデルを試すためのWeb UIを少ないコード量で生成できます。これにより、AIモデルの挙動を迅速に確認したり、他の人と共有したりすることが可能になります。 Gradioの主な特徴 シンプルなAPI : 数行のコードでUIを構築可能 多様なコンポーネント : テキスト、画像、音声など様々な入出力形式に対応 リアクティブな設計 : 入力変更に応じたリアルタイム更新 認証機能 : ユーザー認証システムの簡単な実装 HuggingFace連携 : Spacesとの統合によるモデルの共有と展開 カスタマイズ性 : レイアウトやスタイルのカスタマイズ stable diffusionで有名なWEB UIの一つである、 stable-diffusion-webui もGradioを使用しています。 AI用のGithubともいえる HuggingFace との親和性も高く、HuggingFaceで公開されているモデルを簡単に試すことができたり、逆に自分のモデルを公開することもできます。 また、機械学習モデルに関係なくても、Gradioには色々なインターフェイスが用意されているので、簡易的なWeb UIが簡単に実装できます。 Gradioは日々アップデートで変化しているため、今回はあまり深くは解説せず、基本的な紹介といたします。 Hello World! python3.8以上が実行可能な環境を用意します。 Gradioのインストール pip install gradio コード実装 import gradio as gr def greet (name): return "Hello " + name + "!" # インターフェースの作成 # fn: 実行する関数 # inputs: 入力のコンポーネントの種類 # outputs: 出力のコンポーネントの種類 demo = gr.Interface(fn=greet, inputs= "text" , outputs= "text" ) # Web UIの起動 demo.launch() このように、わずか数行のコードで、簡単にWeb UIを作成することができます。 HTMLやCSS、JavaScriptなどを意識する必要はありません！ 実行結果 https://gradio-hello-world.hf.space 認証機能 Gradioには認証機能が組み込まれています。 demo.launch(auth=auth_function) とすることで、認証機能を有効にすることができます。 認証機能のベースはFastAPIの OAuth2PasswordRequestForm を使用しているようです。 import gradio as gr def greet (name): return "Hello " + name + "!" # 認証機能 def auth (user_name, password): # 例: ユーザー名とパスワード(反転)が一致したら認証OK # 実際にはDBと連携して認証するなどの処理が必要 if user_name == password[::- 1 ]: return True else : return False demo = gr.Interface(fn=greet, inputs= "text" , outputs= "text" ) # 認証機能を有効にする demo.launch(auth=auth) ログイン画面イメージ リアクティブインターフェース gr.Interface で live = True を指定すると、入力値を変更するたびに、リアルタイムで出力が更新されます。これにより、ユーザーは即座にフィードバックを得ることができ、インタラクティブな体験が向上します。 import gradio as gr def calculator (num1, operation, num2): if operation == "add" : return num1 + num2 elif operation == "subtract" : return num1 - num2 elif operation == "multiply" : return num1 * num2 elif operation == "divide" : return num1 / num2 # リアクティブインターフェースの作成 demo = gr.Interface( calculator, [ "number" , # 数値入力 gr.Radio([ "add" , "subtract" , "multiply" , "divide" ]), # 演算子選択 "number" # 数値入力 ], "number" , # 出力は数値 live= True , # リアルタイム更新を有効化 ) demo.launch() https://gradio-calculator-live.hf.space ブロック構造とイベントリスナー Blocksを使用すると、より細かくレイアウトを指定することができます。Interfaceよりも柔軟なUIデザインが可能になり、複雑なアプリケーションの構築に適しています。 また、イベントリスナーを使用することで、ボタンをクリックしたときの処理を指定することができます。これによりユーザーインタラクションに応じた動的な振る舞いを実装できます。 Hello World!をBlocksを使用して書き換えると、以下のようになります。 import gradio as gr def greet (name): return "Hello " + name + "!" # Blocksでレイアウトを構築 with gr.Blocks() as demo: # 入力コンポーネント name = gr.Textbox(label= "Name" ) # 出力コンポーネント output = gr.Textbox(label= "Output Box" ) # ボタンコンポーネント greet_btn = gr.Button( "Greet" ) # イベントリスナー: ボタンクリック時にgreet関数を実行 greet_btn.click(fn=greet, inputs=name, outputs=output, api_name= "greet" ) demo.launch() https://gradio-hello-blocks.hf.space 詳しいBlocksとイベントリスナーについては公式ガイドをご参照ください： www.gradio.app 詳しいレイアウトの方法について www.gradio.app コンポーネントの種類 Gradioには多種多様なコンポーネントが用意されています。一般的なものだと、text, number, checkbox, radio, dropdown, file, button, slider などがあります。 また、AI開発に特化した画像や音声、動画、グラフ、チャットなどの様々なコンポーネントも用意されています。これらを組み合わせることで、様々なAIモデルに対応したUIを構築できます。 主要コンポーネント一覧 基本入力 : Textbox, Number, Slider, Checkbox, Radio, Dropdown メディア入力 : Image, Audio, Video, File 高度な入力 : JSON, DataFrame, ColorPicker 出力表示 : Label, Image, Audio, Video, Plot, Gallery レイアウト : Row, Column, Tabs, Accordion コンポーネントの詳細な種類は公式ドキュメントをご参照ください www.gradio.app また、Gradioのメジャーアップデートでカスタムコンポーネントも最近追加されたので、今後ユーザーによって多くのカスタムコンポーネントが実装されていき、より種類が豊富になっていくと思います。 カスタムコンポーネントの作成方法 www.gradio.app 実装例 最近発表され、話題になっている動画生成AI、 MagicAnimate のWebUIになります。Gradioを使って洗練されたインターフェースが実装されています。 ソースコード huggingface.co 画面 https://zcxu-eric-magicanimate.hf.space zcxu-eric-magicanimate.hf.space デプロイと共有 Gradioで作成したアプリケーションは、様々な方法でデプロイ・共有することができます： ローカル共有 : demo.launch(share=True) でトンネリングURLを生成 HuggingFace Spaces : 無料でホスティングできるプラットフォーム 自前サーバー : FastAPIなどと組み合わせて独自サーバーにデプロイ 特にHuggingFace Spacesとの連携は簡単で、GitHubリポジトリを接続するだけで自動デプロイが可能です。 その他ドキュメント 公式ガイドとドキュメントを参照すると、より詳しい情報が得られます： www.gradio.app www.gradio.app 関連記事 実際にアプリを作ってみた記事です。良ければご覧ください。 engineers.safie.link まとめ Gradioが用意しているコンポーネントで事足りる場合、それらを組み合わせることで、AIに関わらずPythonで作られたソフトウェアは簡単にWeb UIを作成することができます。 フロントエンドの知識がなくても、簡単かつ迅速にWeb UIを作成することができるので、Pythonで開発したものをすぐにWebアプリ化したいAIエンジニアなどにとっては、非常に便利なツールだと思います。 セーフィーでも、Gradioを使用して社内向けに気軽にAIを試せるデモ環境を迅速に用意し、PoCやその他検証などに活用できないかを現在検証しています。

この記事は Safie Advent Calendar 15日目の記事です。 はじめに こんにちは。開発本部モバイルグループの池田です。 私は普段、モバイルグループのマネジメントおよび Safie Viewer for Mobile の PdM としてお仕事をしていますが、今年はそれに加えて 国際化対応 の開発PMとしても活動してきました。 今年の初めに海外展開のための組織が立ち上がり、そこの社内募集に手を上げて、兼務でお手伝いすることとなったためです。セーフィーではこのように、社内でも新しい試みにチャレンジしやすい制度が整っています。 実は、2023年中にセーフィーはグローバル進出のためのビジネス立ち上げ準備と開発を進めており、Safie Viewer モバイルアプリは英語・ベトナム語・タイ語への対応をリリースしています。また時差対応もほぼ完了し、以前はいくつか問題のあった日本以外のタイムゾーンでも、正しく快適に使えるようにアップデートされています。 エキゾチックSafie！！ 今回は、主にモバイルアプリの開発に着目して、セーフィーのグローバル対応について書いてみたいと思います。（Web フロントエンドやサーバー、デバイスについても近々きっと書いてくれる人がいると思います！） はじめに 国際化（Internationalization）と地域化（Localization） 言語について 翻訳について 翻訳について・２ 翻訳課題：ベトナム語意外と横長問題 翻訳課題：テキストデザインとFigmaのローカライズ 時間について おわりに 国際化（Internationalization）と地域化（Localization） ソフトウェアを異なる地域や時間に対応するためには、（トートロジー的ですが、）それが「 対応できるようにする 」必要があります。 扱う言語や地域に汎用性を持たせて、たとえばテキストをソースコードから分離して異なる言語に翻訳しやすくすること、また日付や通貨のフォーマットを動的に変更できるようにすることなどが含まれ、この作業を「国際化」と呼びます。この仕組みはすでに OS やプラットフォームにも含まれている部分が多くあります。 そうして国際化に対応したソフトウェアを、今度は特定の言語・地域に適合させるプロセスを「地域化（ローカライズ）」と呼びます。テキストの翻訳や日付・通貨フォーマットの現地化などの作業がこれにあたります。 一口にローカライズと言っても、そこには多くの要素が含まれます。 言語と文字コード、日時や数値の書式、暦、時差とタイムゾーン、各国の通貨や税金、法規制（電波関連法規や個人情報保護関連法規）への対応などなど。あるいは文化的な背景から利用・推奨できない表現やシンボルがあるかもしれません。ヘルプやユーザーサポートをどうしていくかも重要になってきます。 本記事では、その中でも特に大きな割合を占める 多言語対応とタイムゾーン対応 について触れていきたいと思います。 （どうでもいいですが、 i18n (internationalization) や l10n (localization)という略語、知っててもなかなか使う機会がないので今年はたくさん使えて満足です。笑） 言語について 冒頭にも触れた通り、今年の前半にキックオフされたグローバル進出PJにより、Safie Viewer は 英語、ベトナム語、タイ語 に順次対応していくこととなりました。 モバイルアプリの開発環境である XCode や Android Studio には、すでに言語ローカライズのための仕組みが用意されています。 iOS の場合は、XCode のプロジェクトの設定で ”Localizations” から対応言語を追加して、生成された Localizable.strings ファイルにその言語でのテキスト定義を追加していけば基本的に OK です。これらを追加することで、OS やアプリごとの言語設定に応じて、UIに表示される言語が切り替わってくれます。簡単ですね。 XCode プロジェクトの Localization また、リソースファイルの型安全性やオートコンプリートを提供してくれる R.swift の利用によってローカライズ開発の生産性を上げてもいます。 ベトナム語の Localizable.strings ファイル さて、アプリ UI の多言語化の方法はわかりましたが、アプリに表示される文字列は自らが持つリソーステキストだけではありません。 たとえば動的に変化する設定可能な項目を API で取得して、そのリストを選択メニューに表示したりします。あるいはサーバー側で定義された任意のお知らせメッセージを出したりもします。これらの中にはアプリが予め定義しておくことができないものもあります。 API から返却するレスポンスの言語をクライアントによって変えてもらうにはどうしたらいいでしょうか。それには大きく2つの方法があります。 ひとつは、ユーザーの属性として言語設定を持たせ、それをサーバーで判定して言語を切り替えること。ただしこれはユーザーがログイン済みの場合に限られ、いくつかの匿名 API（購入前お問合せとか）では対応できません。また、環境によってユーザーが言語を変えたい時（職場の PC は英語なんだけどスマホは日本語とか）なども対応が難しいです。 もうひとつは Accept-Language リクエストヘッダを利用することです。これはクライアントがどの言語を理解できるか、どのロケール（地域情報）が推奨されるかのヒントをサーバーに示すものです。一般的なブラウザや HTTP クライアントライブラリは環境から設定を読み取り、ユーザーが意識せずともすでにこのヘッダをリクエストに付加してくれている場合が多いようです。 今回は、これらをハイブリッドに対応することにしました。 すなわち、ユーザーには使用言語の設定を追加して、下記表のような選択を可能とする。且つ、それぞれの場合の Accept-Language を表のようにクライアントで付加して、サーバーでレスポンスを切り替えるようにします。 Webアプリ ユーザー言語設定 クライアント UI Accept-Language サーバーレスポンス メール、PUSH通知 システム（自動設定） ブラウザ設定に従う ブラウザ設定に従う ALに従う ALが無ければ日本語 ALがSafie非対応言語なら日本語 日本語 日本語 日本語 ja 日本語 日本語 英語 英語 en 英語 英語 ベトナム語 ベトナム語 vi 英語 英語 タイ語 タイ語 th 英語 英語 ※サーバー対応言語は日・英のみ モバイルアプリ ユーザー言語設定 クライアント UI Accept-Language サーバーレスポンス メール、PUSH通知 システム（自動設定） OS/アプリ設定に従う OS/アプリ設定に従う ALに従う ALが無ければ日本語 ALがSafie非対応言語なら日本語 日本語 日本語 OS/アプリ設定に従う OS/アプリ設定に従う 日本語 日本語 英語 OS/アプリ設定に従う OS/アプリ設定に従う 英語 英語 ベトナム語 OS/アプリ設定に従う OS/アプリ設定に従う 英語 英語 タイ語 OS/アプリ設定に従う OS/アプリ設定に従う 英語 英語 ※サーバー対応言語は日・英のみ ※モバイルのUI言語はセーフィー設定よりもOS/アプリ設定を優先 このように定義した上でデフォルト設定を「システム（自動設定）」とし、且つ「不明な場合は日本語を優先」とすることで、すでに日本語環境でセーフィーを利用している大半の既存ユーザーには影響がなく、その中でブラウザやスマホを英語やベトナム語で使っている人がいれば何もせずその使用言語に切り替わり、さらに明示的に言語を切り替えたユーザーには、メールやPUSH通知といったサービスも言語切り替えをすることができます。 翻訳について さて、言語表示仕様とテキストデータの外出しは終わったので、次は翻訳です。 まず英語は社内でなんとかなるだろうと考えました。アプリ UI に表示されるメッセージの類はある程度形式化されていますし、昨今の deepL や ChatGPT などによる AI 機械翻訳は非常に優秀と言われます。迷った時には社内にいる英語話者を頼ることもできそうです。 どうにもならなさそうなのがタイ語とベトナム語です。機械翻訳できたとしてもその精度がどうなのかまったくわかりません。 ここは素直に専門家を頼りましょう。ということで、いくつかの技術翻訳の会社に見積もりを取り、またいくつかの SaaS 翻訳プラットフォームも検討しました。その結果、ある程度老舗として実績があり、またある程度細かく相談もできそうな会社さんに翻訳依頼を出すことに決定しました。 その際、 日本語→タイ・ベトナム語よりも英語→タイ・ベトナム語の方が精度が高い というアドバイスを受け、まずは初回だけ社内で行った英訳にチェックを入れてもらい、英語からタイ・ベトナム語への翻訳依頼としています。 （ちなみにその英語チェックではほとんど赤が入らなかったので、社内＋機械翻訳で充分いけるという確信を強めることができました。AIの恩恵に喜びながらも、翻訳業界は大変だろうなという思いもありつつ。。） 翻訳について・２ 翻訳会社さんとのやり取りは Excel ファイルでのシンプルなものでした。 その際、 サービスで利用する固有名詞のルールをまとめて伝えることは重要です。 セーフィーであれば「『カメラ』は基本的に”Device”で表します。ただし表現的にスマホと紛らわしい場合は”Camera”も使います」とか、「 “Movie Clip” は他言語でも英語のままで」など。 また、 スクリーンショットは可能な限りすべてお渡ししましょう。 数十画面・数千ワードという翻訳になるので、ある程度は機械的な作業にならざるを得ず、すべてのサービス文脈を読み取ってもらうことは難しいですが、それでも「ここのスペースにだいたい収まるようにできませんか？」とか「英語での文字幅と同じくらいにできますか？」などのやり取りができる余地を作っていくことも非常に重要です。今回は最初に「基本的に英語でのテキスト幅を越えないようにしたいです」とお伝えしていました。 日付や通貨のフォーマットについてはどうしたら良いでしょうか。 各言語での日付表記 これについては、Google の developer documentation style guide を参考に実装しました。日本語でよく見るスラッシュ区切りの「年/月/日」は他地域ではあまり利用されないなど、様々な知見がありがたく集まっています。 また、Excel（社内では Google スプレッドシートで管理）データのソースコードへの組み込みですが、さすがにコピペではやってられません。ここはスプレッドシートから iOS/Android で必要なリソースファイル（Localizable.strings, values**/strings.xml）へ変換して書き出す Google App Script を書いて省力化しました。 Google App Script による言語リソースファイルの書き出し ただしこの方法では、言語定義の神様（マスター）が GitHub 管理の外になってしまい、メンバーが各自のブランチで神様データをエクスポートして作業すると、それらをマージするとき多重に定義が追加され、コンフリクトが発生してしまいます。 そこで、今度はリポジトリ中のリソースファイルをまとめて csv ファイルを作成し、それを Google スプレッドシートにアップロードする GitHub Actions のワークフローを書いて、リリースごとに神様データを自動更新していくことにしました。 GitHub Actions によるローカライズ対応スプレッドシートの更新 より効率的な翻訳対応にはまだ改善余地があると思いますが、一旦このような形に落ち着いています。 ちなみに翻訳依頼の頻度としては、英訳はリリースごとに社内で対応し、タイ・ベトナム語はある程度溜まってきた数ヶ月ごとに発注するとして、その間はタイ・ベトナム版には英語が混在することを許容する、といった仕様にしています。 翻訳課題：ベトナム語意外と横長問題 日本語を英語にしたとき、文字数が増えてレイアウトが横長になることへの対応が必要なことは予想していました。 その上で意外と大変だったのがベトナム語です。 日本語とベトナム語のフッタメニュー 英語よりもさらに長い表現になることが多く、QA 確認ではテキストの見切れ指摘が多発しました。 ここは、「ユーザー設定」→「設定」などテキストをシンプルにできないかを検討するとともに、レイアウトに収まらないもののいくつかは英語に戻すことで対応しました。 ここについては複数の著名なアプリをベトナム語設定で見てみて、このくらいは英語でもOKかなという肌感をひとまずの根拠としています。 メジャーなアプリのベトナム語対応例 さらに理想なのは、テキストがなくてもメニューの意味がわかってもらえることですね。ここは自らの認知度とデザイン双方に対しての自信が必要なところだとは思います。 メジャーなアプリのフッタデザイン それぞれ、どれが何のアプリか、わかりますでしょうか？ 翻訳課題：テキストデザインとFigmaのローカライズ たとえば、これはあくまでも例ですが、このようなダイアログの本文をローカライズするとします。 カメラ再起動の警告ダイアログサンプル 言語リソース定義は以下のように分解すれば対応できます。 “restart_dialog_text_prefix” = “再起動中は”; “restart_dialog_text_body” = “録画が停止します”; “restart_dialog_text_suffix” = “ので、しばらく経ってからご確認ください”; 英語はこう。 “restart_dialog_text_prefix” = “”; “restart_dialog_text_body” = “Recording will be paused”; “restart_dialog_text_suffix” = “ during the reboot, so please check back after some time”; このようにして、prefix, body, suffix を結合し、 restart_dialog_text_body を赤文字のボールドで装飾するルールにすれば、近い表現の英語になると思います。 しかし、ベトナム語やタイ語ではどうなるのでしょうか。語順がどうなるかわからないし、翻訳者に細かいニュアンスを伝えることも手間がかかりそうです。 こういったことを防ぐためには、 できる限りテキストはシンプルにすること（説明無しでわかるUIが最高） テキストの一部を装飾する場合は少なくともセンテンス単位にして、一文を短くすること などを心がけることが大事になりそうです。ここまでがワンセンテンスだ、よろしいか？ デザインの段階で、国際化を意識した作業ができていると良いですね。 また、今回は既存のアプリをローカライズするという要件と、スケジュールの都合もあり、レイアウト調整などの作業もすべて開発チームで行いました。が、本来は社内で英訳までするのであれば企画・デザインの段階で各言語での見た目を確認できた方が良いはずです。 過去の記事でも触れたように、モバイルチームでは デザインのやり取りに Figma を利用しています。 Figma 上でのローカライズ方法もこれから調査・検討していくところですが、 lokalise などのサービスは試してみたいなと思っています。 時間について さて、言語の話だけでずいぶん長くなってしまいましたが、お次は時間（タイムゾーン）についてです。 幸いにして、セーフィーのサービス開始当初から、データベース内の時間はすべて UTC で管理されており、また多くの時間関連 API はリクエストに timezone のパラメータを受けて、その時間帯でのレスポンスを返せるようになっていました。（先見の明！） なので、クライアントとしては基本的に現在の OS のタイムゾーン設定をリクエストパラメータに追加するだけで良さそうです。が、むしろここで悩んだのは仕様の方です。 Safie 三位一体 セーフィーのサービスを構成する基本3要素、カメラデバイス、クラウドサーバー、ビューアークライアントは、地理的にすべて別の場所にいることがありえます。それぞれに OS があり、それぞれのシステムに時間とタイムゾーン情報を持っています。 タイのバンコクに置いたカメラを、ハワイで休暇中のユーザーが見ている時、ビューアーに表示される時間はどこになるのが良いのでしょうか？セーフィーは東京に本社がある日本のサービスですが、そこから「xx時xx分にカメラが動きを検出しました」というメールが来る時、その時間帯はどこになるのが正しいのでしょうか？夜間だけ録画するようにタイマーを設定する UI の時間はどう見せましょうか？ ここもおそらく議論の余地があると思いますが、結論としては クライアントの UI で表示・設定する時間はすべてクライアントの（PCやスマホに設定された）タイムゾーンに従う ただし、カメラ映像に重畳して録画される時間情報は、カメラデバイスのタイムゾーンに従う これは例えば犯罪行為のエビデンスとして映像上に表示された時刻が用いられることがあることを重視して、カメラが見ている「その場所」のタイムゾーンを優先しています メールに記載する時間については、デバイスに関連するものはそのタイムゾーンに従い、”(UTC+09)”といった注記を加える PUSH 通知に載せる時間情報は epoch ミリ秒で表し、受け取ったクライアントは自分のタイムゾーンで適切に再生処理する などのルールを定めました。 Viewerの時間表示 この対応のため、JST 固定になっていたデバイスのタイムゾーンを可変にできるよう FW を更新してもらい、サーバーとカメラの I/F やメールテンプレート生成などのロジックを変更してもらった上で、クライアントは先述の通りリクエストにタイムゾーンを付加するだけでほぼ対応が終わりました。サーバー・デバイス各チームの尽力に感謝です。このあたりの実装のお話もいつかエンジニアブログで読んでみたいところ。 ちなみに、今回はできるだけシンプルな対応にとどめていますが、タイムゾーンは突き詰めると考えなくてはならないことがたくさん出てくるようです。気になった方は有名な魔導書「 タイムゾーン呪いの書 」を読んでみてください。 おわりに 日本語と日本時間を前提としていたサービスを、国際化・ローカライズした活動について、ひとまずアプリ視点からのまとめを書いてみました。その後、面接で海外からの候補者がアプリの話をしてくれた時に、英語で何も違和感ないですよと言われてひそかに喜んだりなどしています。さらに対応を拡げていきたいですね。 文中で何度も触れているように、この PJ はモバイル以外も各チーム対応に尽力いただいたので、そちらはぜひ別記事を楽しみにしていていただきたいと思います。（ちなみに国内サービスが初めて海外展開をする際に、多くの場合最も重要なトピックは「クラウドインフラどこでどう構築する？」になると思います） グローバルを見据えたサービス開発をする方々に、参考になる情報があれば幸いです。 また、セーフィーでは一緒に世界を目指すエンジニアも募集しています！興味をもった方はぜひ こちら へどうぞ。 open.talentio.com

この記事は Safie Engineers' Blog! Advent Calendar 14日目の記事です。 こんにちは、あるいはこんばんは 第1開発部QCDグループ 小山と申します。 ブログ書きますよからもう1年、 さすがに筆を走らせないと追い込まれてしまうので… 今年もいろいろありましたが、ブログのネタにできる変化としてはテスト管理ツールの運用を始めたことでしょうか。 こちら導入時の動機、想定していたメリット・デメリットや、運用開始後上手くいった・いかなかった点について記載していければと思います。 テスト管理ツールを導入したいと考えている方にとって少しでも役立てれば幸いです。 1. 使ってみたいと思った不純な動機 2. 導入前に享受できると思ったメリット・デメリットについて 導入前想定メリット 導入前想定デメリット 3. 上長からの反応（主観的な振り返り） 4. 運用開始直後の振り返り 1. テストにまつわる工数の削減（上手くいっている） 2. テストケースの資産化（どちらかというと上手くいっていない） 3. テスト状況の可視化、レポート作成工数の削減（どちらかというと上手くいっていない） 4. BTSとの連携（どちらかというと上手くいった） 5. 管理ツール内の情報（実施結果等）を共有する場合（上手くいっていない点） 6. 入力工数の活用（上手くいっていない点、課題） 7. 自動化ツールとの連携が出来ていない（上手くいっていない点、課題） 5. まとめ 1. 使ってみたいと思った不純な動機 Googleスプレッドシートでの進捗管理がめんどくさくて仕方がない… これが私の大きな原動力でした。 というのも、弊社はスプレッドシートで作成されたテストケースを用いて定期リリースに向けたテストを実施しているのですが、 光栄なことに複数のプロダクトの担当を任せていただいていたため、 予定したテストの終了確認と日々の進捗確認が非常に手間でした。 少し細かい内容ですが、 テスト項目数が多いため縦に長く、且つ環境ごとに実施するため横にも広がり… うっかり1項目を飛ばしてしまった場合、探すのが大変という状況でした。 （〆作業を行う為のスプレッドシートとのにらめっこが嫌で嫌でしかたがなかった） ※ちゃんとリグレッションテストを改善しろよというごもっともなツッコミは無しでお願いしますmm また何度も使うテストケースなので、コピーして過去に入力した結果欄を消すのも、めんどくさくて嫌でした。 （メンテナンス工数をうまく捻出できず秘伝の継ぎ足しタレ状態に） 2. 導入前に享受できると思ったメリット・デメリットについて 紆余曲折あり、無料ツールでの失敗から始まり有料ツールのトライアル利用を経て、 まずは1年使用できることがグループ内で合意でき、上長の承認もいただけました。 ここでは、 こんなことが出来るようになるだろうなという導入前に想定していたメリットをつらつらと… 導入前想定メリット テスト管理工数の削減（1PJの定期リリース1回に際し，15分×10営業日程度を想定） テストケースの資産化、再利用ができるためテスト準備の工数削減になる テスト状況の可視化、レポート作成工数の削減 自動テストツールとの連携による、テスト実施内容の可視化 PJごとにばらつきがちなテスト粒度が、同じツールを使用することで均一化 管理ツール導入により何か全体的に改善されるのではないかという漠然とした期待 導入前想定デメリット テストケースの移行コスト（プロダクトによっては1か月弱かかる可能性も） 一度導入するとやめることが難しい、エクスポートしてから加工するなどスプレッドシートでは無かった新たなコストがかかってしまう恐れ テストケースレビュー方法の再検討（アカウント数に上限があるツールだったため） 上記を想定しメリットで納得いただけるよう準備したつもりでしたが、いまいち上手くいかず… 自戒の意味も込めて、メリットに関する反応を主観的に振り返りたいと思います。 3. 上長からの反応（主観的な振り返り） 反応〇 テスト管理工数の削減 再利用によるテスト準備工数の削減 反応△ テストケースの資産化 テスト状況の可視化、レポート作成工数の削減 　※自動テストとの連携、ばらつきについては承認時には明記せず口頭での説明 　※その他デメリットについては理解はいただけたと感じています 上長の立場を鑑みた際、 年額の費用が発生するため、想定通り社員工数の削減が強めな説得材料になりました。 導入前に予想していたよりも、テストケースの資産化は刺さらずという結果は、 説明が下手だった可能性が一因にあったと反省しています。 最終的にはQCDグループが今後も将来拡大していく旨、及び、 現場の負担が軽減されるならという理由で承認いただけました。 おまけ：グループ内で出た「スプレッドシートでいいじゃん」をあらためて振り返ると テスト管理ツールを導入したいですと希望した際、 きっと他メンバーから上がるであろう伝家の宝刀「スプレッドシートでいいじゃん」に対しての振り返りです。 当時はうまく返答できませんでしたが、今返す言葉を考えるとしたら以下になると思っています。 テストを資産として残し”やすい” （保管場所が統一される） フォーマットがある程度決まっているため、テストの実施体制を整え”やすい” （個人による差分が出来くい） テスト管理体制を工数を多く使用することなく構築し”やすい” （計算式の修正から解放される） ただ、ツールの学習コストや移行コスト、テスト設計の自由度まで鑑みてしまうと、どちらに分があるのかは導入後の現時点でも明言は出来ない状態です。 明言はできないものの、推進派一意見としては、 管理ツールを使うことにより将来的に実現したいことを考える機会が得られ、 次のステップを見据えることが出来たのでよかったと思っています。 4. 運用開始直後の振り返り ここからは、導入してどのように使っているか、活用できているか、上手くいっていない運用など、 軽く紹介できればと思っています。 導入したテスト管理ツール： Testrail （ https://www.techmatrix.co.jp/product/testrail/ ） いつも細やかなサポート対応ありがとうございます。 1. テストにまつわる工数の削減（上手くいっている） 他メンバーの協力を得てテストを行う案件が多い中、日々の進捗や成果物確認については楽になったと思っています。 プロダクトにより大小はありますが、 1PJの定期リリースに際し、【10分～20分×テスト期間の営業日】は削減が出来ているかと。 例：1クリックでステータス毎のテストケースの抽出ができる（すごく便利） ※「Pass」ステータスとなっているテストを抽出した結果 また、マスターテストケースを作れるプロジェクト形式を選択すれば、 テストの資産化（再利用または不具合流出時の過去結果の参照など）は上手くいくと思います。 ＜運用一例＞ マスターテストケース（v1.0）からv1.1ベースラインを切り出す ⇒テスト終了後、マスターテストケース（v1.0）にv1.1エンハンス個所を反映させる 　⇒次ver開発時にマスターテストケース（v1.1）からv1.2ベースラインを切り出し 　　⇒v1.1実施内容も実施時のまま保管することが出来る ベースライン切り出し時に、 どのテストケースを対象とするか、及び、フィルター後も動的に更新するかなどを選択でき、 スプレッドシートでのセル削除や非表示、項目数計算式の修正等からも無縁の状態となりました。 SubVersionを利用している環境下でも同様のことが出来ますが、 「v△△時の○○というテスト結果を探す」という状況ではテスト管理ツールの方が検索性は向上していると思います。 例：次テストケース作成時における参照元の選択 例：更新したMasterテストケースから実施するテストのフィルタリング ※動的なフィルタリングができるのでテスト更新時にももれなく対応できました。 2. テストケースの資産化（どちらかというと上手くいっていない） テストケースの再利用という点はうまく運用できていますが、 たとえば過去の結果を振り返るといったような、資産化による価値はまだ享受できていません。ここは今後の課題。 3. テスト状況の可視化、レポート作成工数の削減（どちらかというと上手くいっていない） テスト終了時のレポートは、標準テンプレートを利用すればクリックのみで作成・提出することは可能です。 ただ、プロジェクトごとに欲している内容は異なっているため、上手くいっているところと活用できていないところ両方あるのが実情です。 とはいえ、直近で行われたTestRailのバージョンアップにより、 TestRailとBTS連携を行っていれば信頼度曲線をすぐに出力することが出来るため、 今後プロダクトが成熟したときに活用できるのではないかと考えています。 4. BTSとの連携（どちらかというと上手くいった） 結果入力時に欠陥にBTSのキーを入力することで、 別ページではなくテストケース上で詳細内容を確認できるようになっているため、 作業効率は上がったと考えています。 しかしながら、 テスト内容をもとにBTS側にチケットを発行できる機能もあるのですが、 フォーマット等調整中のため上手く実運用で使用できておらず、今後の課題となっています。 5. 管理ツール内の情報（実施結果等）を共有する場合（上手くいっていない点） 現在QCDグループでは、 テスト実施前にテスト観点やテスト範囲・対象の認識合わせを行ったうえで、 テストケースの作成を行い、実施しています。 テスト観点等については従来通りスプレッドシートを使用することが多いため、レビュー自体に影響はないのですが、 テストケースの展開はアクティブアカウントしか閲覧できないため、 アカウント数を最小で運用しようとすると課題になってしまいます。 現状は、非アクティブユーザーとアクティブユーザーを切り替えることで、 プロジェクト側のステークホルダーにはテストケースを共有しています。 もし費用面で制限がないのであれば、 各プロダクトの企画及び開発リーダーの2名＋αとして人数に余裕のあるプラン選択にすることをお勧めします。 来年度は効果測定を実施しつつアカウントを増やし、 運用面でどのような変化が起き、開発側の反応はどうだったのかは別の機会にお伝えできたらと考えています。 6. 入力工数の活用（上手くいっていない点、課題） Testrailでは各項目実施時に工数を記録できる機能がありますが、現状はまだ活用できていません。 将来的にはテスト計画時の見積もりに活用したいと考えてはいます。 7. 自動化ツールとの連携が出来ていない（上手くいっていない点、課題） 例えば、現在モバイルプロジェクトでは毎日夜間にスモークテスト（荒めの全体動作確認）を実行しています。 理想像としては、どのrevison番号で実行してどういう結果だったかを、自動的にテスト管理ツール側に出力できるようにしたいのですが、 技術力と知見が足りず悪戦苦闘中です。 5. まとめ 導入してからの上手くいっている点、どちらかというと上手くいっている点、及び課題を簡単ではありますがまとめてみました。 正直、TestRailというツールの機能がリッチすぎて触れていない・活用できていない点が多くあり、 恥を忍んでブログを記載しています(´;ω;｀) 運用ルールも、まだプロダクトごとに差分があるような導入の初期状態ですが… テスト管理ツールを導入してみた結論及び感想としては、 テスト管理に関する工数削減など、テストマネージャーといわれる職域の方の効率化の面で貢献してくれる可能性は十分にあると思います。 しかしながら、ある程度テストプロセスが成熟しているプロダクトでは、 導入時のコストを鑑みると、テスト管理ツールはあまりメリットがないように導入直後は感じてしまうかもしれません。（グループへの提案時にそう感じた） そうではなく、これから開発プロセスやテストに関して固めていくんだというフェーズのプロダクトでしたら、 上手くはまると思いますので、無料のテスト管理ツールを一度触って自身の組織に提案してみるのはどうでしょうか。 提案することで、 言語化する能力や説明力、上長が求めているもの、優先度を理解できるなど、 思わぬ副産物も得ることが出来ました。 また来年、 課題に進展があった場合か新しいネタが手に入ったら、皆様にお伝えしたいなと思っています。

はじめに この記事は Safie Engineers' Blog! Advent Calendar 2023 13日目の記事です。 こんにちは。データ分析基盤グループでデータアナリストをしているワンです。 データ分析基盤グループに関しては、下記の記事で詳しい情報が掲載されています。この分野にご関心がある方は、ぜひご一読ください。 engineers.safie.link データを活用したビジネス改善とビジネスサイドとの連携強化の観点から、私たちデータ分析基盤グループはチームにおける主要KPIのモニタリングとアクションへの結び付けを促進する文化を築くことを目指しています。 セーフィーでは、データの可視化ツールとしてTableauを採用しておりますが、その利用率とデータ活用文化を向上させるために、 適切なタイミングで 適切な人々に 適切なコンテンツを 提供することを重視しています。 Tableauで構築したVizをチームメンバーが日常的に使用するSlackに自動連携させることで、データへの迅速なアクセスが可能となり、より効率的な意思決定が行えるようになり、全体としてビジネスの成果向上を期待できます。 それを実現するために、GASでTableau VizをSlackに自動配信する仕組みを実装してみました。 この記事では、Google Apps Script (GAS)を使用して、Tableau VizをSlackに自動連携する方法を紹介します。 はじめに 準備 手順 Tableau Vizのサブスクライブ TableauのログインとVizの選択 サブスクリプション機能の設定 Slack Botの作成とトークンの取得 Appの作成 Bot機能の追加とOAuthの設定 Bot Tokenの確認 APPのインストール 投稿させるSlack Botをチャンネルに招待する Google Apps Scriptの設定 GASの新規作成 GASの編集 SLACK_TOKENをプロパティに設定する GASトリガーの設定 まとめ 準備 Tableauで配信したいVizを用意します。 Tableauのアカウントが必要です。 Slackでボットを作成し、トークンを取得します。 手順 Tableau Vizのサブスクライブ 連携したいTableau Vizを選択し、サブスクライブ機能を使って、Gmailに定期配信します。 TableauのログインとVizの選択 Tableau Cloud にログインします。 Vizの選択 配信したいTableau Vizを開き、配信したいものを選びます。 サブスクリプション機能の設定 サブスクリプション機能のアクセス ビューのツールバーで、[Watch (視聴)] > [サブスクリプション] を選択します。 サブスクリプションの詳細設定 配信するメールアドレスを選びます。Tableau登録時に使用したユーザーのメールアドレスに配信したいVizを送信します。個人メールアドレスよりは、管理面や効率的に情報伝達を考えてチームグループのメールアドレスに配信するように設定します。 配信する頻度とスケジュールを選択します。今回は毎日朝08:55で指定しています。 サブスクリプションの確認 すべての詳細を確認した後、[サブスクリプション] ボタンをクリックしてサブスクリプションを完了します。 Slack Botの作成とトークンの取得 Slackボットの作成、設定、トークンの取得、インストールを手順に従って完了します。 Appの作成 Slackの公式サイトにログインした状態で、アプリケーションページ へ移動します。 [Create New App] をクリックし、[From Scratch] を選択します。 アプリに名前と対象のSlackワークスペースを指定し、[Create App] をクリックしてアプリを作成します。 Bot機能の追加とOAuthの設定 先に作成したApp のページに移動します。このページ内で、Basic Information / Building Apps for Slack / Add features and functionality で、[Bots] を選択します。 App Homeのページに移動します。こちらで [Review Scopes to Add] を選択します。 OAuth & Permissions のページに移動します。少しスクロールして、[Scope] 下の [Bot Token Scopes]で、必要なスコープを追加します。 chat:write files:write users:read users:read.email OAuth & Permissions のページで、[Redirect URLs] を追加します。 https:// /auth/add_oauth_token を追加します。 * にはワークスペースのURLが入ります。 Bot Tokenの確認 OAuth & Permissions のページで、OAuth Tokens for Your Workspaceの下で、[Bot User OAuth Token]をコピーします。 APPのインストール [Settings] から [Basic Information] を選び、TableauInsightBot AppをSlack ワークスペースにインストールします。 投稿させるSlack Botをチャンネルに招待する 作成したBotを該当チャンネルに招待します。 [Intergrations]をクリックし、[Add apps]で先ほど作成したBotを該当チャンネルに招待します。例えば仮に #daily_notification_tableauのチャンネルに招待しました。 Google Apps Scriptの設定 GASの新規作成 Google Apps Script からProjectを新規作成します。 GASの編集 作成したGASファイルに、下記コードをコピペします。例は毎日配信のスクリプトです。 function Tableau2Slack () { // スクリプトプロパティからトークンを取得 var scriptProperties = PropertiesService . getScriptProperties () ; var SLACK_TOKEN = scriptProperties . getProperty ( 'SLACK_TOKEN' ) ; // 今日の実行日付を取得し、東京タイムゾーンにフォーマットする var currentDate = new Date () ; var formattedCurrentDate = Utilities . formatDate ( currentDate , 'Asia/Tokyo' , 'yyyy-MM-dd\'T\'HH:mm:ss' ) ; // スクリプトプロパティから前回の実行日付を取得し、フォーマットする var lastExecutionDate = scriptProperties . getProperty ( 'lastExecutionDate' ) ; var formattedLastExecutionDate = lastExecutionDate ? new Date ( lastExecutionDate ) : null ; // 今日の実行日付が前回の実行日付と同じ場合は、関数を終了する if ( formattedLastExecutionDate && formattedCurrentDate === formattedLastExecutionDate ) { console . log ( "本日はすでに実行済みです。" ) ; return; } console . log ( "Last execution date: " + lastExecutionDate ) ; // 前回の実行日付をコンソールに出力する // Tableauからの自動メール取得（条件に一致する最新のメールを一件取得） var Threads = GmailApp . search ( 'from:"[メールアドレス]" subject:"[メールタイトル]"' , 0 , 1 ) ; var messages = Threads [ 0 ] . getMessages () ; var message = messages [ messages . length - 1 ] ; // 自動メールから画像と日付を取得 var attachments = message . getAttachments () ; var date = new Date () ; date . setDate ( date . getDate () - 1 ) ; // 現在の日付から1日前の日付を取得 var time = Utilities . formatDate ( date , 'Asia/Tokyo' , 'yyyy年M月d日' ) ; // Slack API Bot設定 var data = { 'token' : SLACK_TOKEN , 'file' : attachments [ 0 ] , 'filename' : '[ファイル名]' , 'channels' : '[配信するチャンネル名]' , 'title' : time + '[Tableau Viz名]' , 'initial_comment' : '[コメント]' } ; var option = { 'method' : 'POST' , 'payload' : data } ; UrlFetchApp . fetch ( 'https://slack.com/api/files.upload' , option ) ; // スクリプトプロパティに今日の実行日付を保存する（日付と時刻を含む形式） scriptProperties . setProperty ( 'lastExecutionDate' , formattedCurrentDate ) ; } ; コードの下記の情報は適切な値に置き換える必要があります。 [メールアドレス] [メールタイトル]　 [ファイル名] [Tableau Viz名] [配信するチャンネル名] [コメント] SLACK_TOKENをプロパティに設定する プロジェクトのプロパティ設定 GASメニューバーから歯車アイコンの[プロジェクトの設定]をクリックします。 [プロジェクトの設定]画面の一番下に[スクリプト プロパティ]があります。 SLACK_TOKENの追加 [プロパティ]フィールドにSLACK_TOKENと入力します。 [値]フィールドにSlackのトークン値を入力します。このトークンはSlack APIから取得したものを使用します。 入力した情報を確認し、「保存」ボタンをクリックします。 今回はスクリプト内でこのプロパティを使用しているので、 PropertiesService.getScriptProperties().getProperty('SLACK_TOKEN') を使用してアクセスします。 GASトリガーの設定 この手順に従って、GASで定期的にスクリプトを実行するトリガーを設定することができます。これにより、例えば毎日特定の時刻にデータを処理したり、定期的なTableauのVizを送信したりする自動化が可能になります。 GASのメニューバーから時計マークのアイコン[トリガー]を選択します。これにより、[現在のプロジェクトのトリガー]画面が開きます。 右下にある「トリガーを追加」ボタンをクリックします。 この画面でトリガーを設定します。 実行する関数を選択します。 今回の場合はTableau2Slack 実行するデプロイメントを選択します。 イベントのソースとして時間主導型を選択します。 頻度の設定 [日単位] [週単位]など、スクリプトの実行頻度を選択します。 さらに詳細な時間設定（毎日の特定の時間帯、週の特定の日など）を行います。 設定が完了したら、[保存] ボタンをクリックしてトリガーを保存します。 まとめ この記事では、GASを活用してTableau VizをSlackに自動連携する方法を紹介しました。SlackへのTableau Vizの自動連携が、私たちの業務スタイルに新たな風を吹き込んでいると感じています。 Tableauには既にサブスクリプション機能が備わっており、定期的にメールでのViz配信が可能です。しかし、これらはメールボックスに届くため、日々の業務の中で見落とされがちです。 Slackに連携されるTableau Vizは、日々のコミュニケーションの流れの中で自然に目に触れることが多く、必要な情報をすぐに手に入れられます。これにより、ただのオンライン上にある数字やグラフではなく、「話す」データを共有して、よりダイナミックな議論が生まれ、具体的な行動につながりやすくなります。 たとえば、KPIを示すTableau VizがSlackに投稿されると、そのスレッド内での議論で、その数値をめぐって即座に議論が始まり、必要なアクションが迅速に決定されます。これは、メールで配信されるデータではなかなか起こり得ないことだと思います。 Slackの使い勝手の良さから、データへのアクセスがより手軽で直感的になり、データ利用やTableau利用のハードルが大きく下がることが期待できます。

「この記事は Safie Engineers' Blog! Advent Calendar 8日目の記事です」 自己紹介と本日のテーマ セーフィー株式会社 開発本部 エンジニアリングオフィスの武田 智一です。 セーフィーには2023年1月に入社して、エンジニアに対する組織開発全般をおこなっています。エンジニアリングオフィス（組織開発）って何やっているの？というのはまた別の機会でお話しするとして、 今回はセーフィーのエンジニア全員が参加する 「開発本部会のやり方変えてみた」 のお話しをさせてもらえればと思います。 自己紹介と本日のテーマ 全体会議の課題 会議体の再定義 1. なぜやるのかを言語化 2. どうやって体感するか、の定義 3. アジェンダの再設定 改善ステップ（ストーリー作り） 改善ステップ 結果 まとめと今後の予定 全体会議の課題 現在セーフィーの開発本部には約90人のエンジニアが在籍しています。 この90人全員参加のオンライン開発本部会を月1回1時間実施しています。 「この90時間ははたして有効に使えているのか？」 と、エンジニアの皆さんならとっても気になりますよね。 セーフィーでも同じ状況でした。 具体的には開発本部会には以下のような課題がありました。 一方的な情報ダウンロードの会になっている 共有される情報が人によっては既知の情報だった 共有される情報が人によっては自分のやっていることとは遠い情報のため実感がわかなかった 結果として参加率も低く、全体的に効果的で効率的な会議運営ではなかった こういった課題を解決するために、今年の2月からエンジニアリングオフィスが主管となり会議体運営を見直しました。 会議体の再定義 基本的に、変更前後も会議の目的自体は変わっていません。 ただ、WhyをベースにHowを明確にしアジェンダを組みなおしました。 具体的には以下のように再設計しました。 1. なぜやるのかを言語化 セーフィーのビジョンは「映像から未来をつくる」です。そして、私たち開発本部は映像から未来をつくるを実際に体現しているエンジニア組織（創る組織）です。自分たち自身の業務やアウトプットは必ずビジョンにつながっているはず。 ただ、エンジニアの人数も多くなり、部署やグループも増えた結果、そのつながりをなかなか体感しづらい。 そこで、この開発本部会を軸に月に1度改めて自分たちがビジョン実現に貢献していることを認知する。そういう場にしたいという思いから、開催理由（なぜ）を「映像から未来をつくる」を体感するためにしました。 2. どうやって体感するか、の定義 ビジョン実現を体験するには何が必要かを考えたとき、まさに組織開発でするべきことだと整理しました。 組織開発において必要になってくるのは、同じ目標を正しく理解して、現在地を知ることから始まります。また、現在地を知った上で、どう感じているかを共有することで、お互いのことを深く知り、さらに一体感が生まれます。そういったHOWの部分を方針として明確化しました。 3. アジェンダの再設定 この方針をもとに、ベースとなるアジェンダを以下のように組みなおしました。 人により文章は捉え方が変わりますが、数値は同じです。 そこで開発本部全体をあらわす数字（数字で見る開発本部）を定義して、その数字を毎月共有することで、まずは目線をそろえるようにしました。 その数字の変化を具体的な報告で説明することで、全体から具体へのブレークダウンをしやすくしています。 参考までに、10月の開発本部会のアジェンダと数値報告の例です。 改善ステップ（ストーリー作り） アジェンダの整理までは良いですが、それだけでは会議運営の改善にはつながりません。 毎月1回＝年12回の会議を連携して有効に使うために、それぞれの月でどういった状態になってほしいか、その結果全体としてどう流れを作るかを最初に設計しました。 改善ステップ 月 テーマ 狙い やること 1月 現状確認 ー 昨年と同じ形で開催 2月 認知 本部会で何を実現したいかを理解してもらう 概要説明、アンケート設計 3月 気付き ちょっと変わったかもという雰囲気をつくる 数字で見るシリーズの意味付、アンケートフィードバック 4月 自分事化 組織戦略（中身）について理解してもらう ロードマップに沿った組織戦略の発表 5月 事を知る1 各部でやっていることを知る 各部毎の発表（プロダクト詳細発表） 6月 事を知る2 各部でやっていることを理解したうえでフィードバックできる状況をつくる ガヤスレの活用、各部勉強会とのリンク作り（誘導） 7月 下期計画発表 上期の結果及び下期の目標共有 上期ふりかえり、下期注力目標 8月 人を知る1 組織にどんな人がどんな思いで働いているかを知る（人にも興味を持ってもらう） CTO発表 9月 人を知る2 他部署のことも知る 企画本部発表、部室長発表 10月 人を知る3 他部署のことも知る 営業本部発表、部室長発表 11月 全体を知る 他からどう見えているか（どう変わったか）知る CS本部発表、部室長発表 12月 年度ふりかえり 来年に向けた組織戦略を理解する 来期組織戦略発表、来期組織枠の説明 実際にはこの通りには進みませんでした。 ただ、各月毎の狙いが実現できたかを、アンケート結果等から毎回評価をおこないました。その結果を踏まえて微調整をしながら、翌月以降の個別アジェンダを整えることで、大きくストーリーを変更することなく、会議体運営の改善につなげることが出来たと思います。 結果 アンケートの結果です。 会議の満足度を100点満点として、何点だったかを毎回聞いています。 その結果、平均満足度は90点にまで上昇しました。また、参加率も大きく向上し10月の参加者数は100名を突破しました。（別部署の人も参加しているため、開発本部全員の人数よりも多くなった） 自由記述のアンケートコメントを見ても、毎月の開発本部会を楽しみにしてくれる人も増えてきたという実感があります。 まとめと今後の予定 開発本部会はみんなの満足度を上げることが目的ではありません。 映像から未来をつくる道筋を理解し、現在地を知ることでお互いが誇りをもってプロダクトを成長させ続ける。そして、開発文化を成熟させた最高の開発チームで「映像から未来をつくる」を実現することがゴールです。 そのためには足りていない部分はたくさんあります。また、組織も人もどんどん成長しています。 そういう変化も想定したうえで適切にハンドリングして、これからも開発本部全体会議を軸に情報を皆に届けられればと思っています。 なお、来年は以下のことにもチャレンジする予定です。 開発本部を表す数値のアップデート（と本部外への展開） 開発本部会以外の会議体設計との連携、ストーリー見直し ガヤ（フィードバック）の活性化 最後に、会議を変えるだけでは組織は変わりません。 ただ、変化のきっかけづくりにはなったと思います。これからもエンジニアリングオフィスとして、エンジニアみんなが生き生きと働ける環境づくりに貢献していければと思います。 最後まで読んでいただきありがとうございました！

はじめに こんにちは！Safie QAグループ（QCDグループ）のグループリーダーの山谷です。 前回はテストの業務についてのテックブログ を公開しましたが、今回はなりたちについてのお話になります。 私自身はSafieに入社するまではQAエンジニアどころかテストエンジニアとしてもキャリアがない状態で入社してます。 もし同じ状況でQAエンジニアチームを作る人達の何かの参考になれば嬉しいなと思い、ブログを書くことにしました。 テスト体制を作ろう テスト担当者を作ろう ■改善活動その1 ～顧客対応を巻き取る～ ■改善活動その2 ～バグチケットを溜める～ テストチームを作ろう まとめ テスト体制を作ろう 当時のSafieは開発メンバーがテストをほとんど実施している環境でした。 2020年はそんな状況で「QAについて何もスキルセットがない状態で入社した人間がテストチームをまずは作ることにした」年になります。 私の入社時期はちょうどモバイルアプリのリニューアルと、 SafieManager のリリースが控えておりました。 私の上司はこれらのテストを担当してくれそうな人を探していたのですが、とりあえずモバイルのテスト担当者から作ることにします。 そう、私です。 テストの項目書のひな形を渡され、こう書くんだよとナレッジ（もちろん外部サイト）のURLと開発メンバーのMTGに放り出されました。 ここから私のQAエンジニアとしてのキャリアが始まりました。 テスト担当者を作ろう サービス開発黎明期あるあるな話ですが、当時のSafieは仕様書がないものがほとんどでした。 そのため、まずはアプリでできることを書き出します。 Safieモバイルアプリの場合には ・ログイン画面 ・カメラ一覧 　・各種ボタン ・ストリーミング画面 　・デバイス設定 　・その他機能ボタン みたいな感じですね。 テスト版のアプリを使い画面と、それに設置されている各パーツについて期待動作を洗い出し、開発と期待結果とそれを導くための手順を埋めていきます。 当然ながらこの当時のテストケースはものすごく粗く、テストをしながらテスト項目を増やしたり、テスト手順、期待結果の書き換えなどもすごく多く発生します。 リリースまでにはこぎつけましたが、動作の安定性については今一つ。 今後も継続して品質改善を行うにあたっての行動に移ることになります。 ■改善活動その1 ～顧客対応を巻き取る～ リリース後しばらくはモバイルアプリの顧客サポートは基本的には私が巻き取ることにしました。（なりました。） エンドユーザーから指摘されたバグを迅速に開発に連携を行える テストケースの抜け漏れに気づくことができる 自分の対応のノウハウを他カスタマーサポートメンバーに共有ができるようになる お客様から温度感が高いご意見をいただくなど大変ではありましたが、開発メンバー内外含めてメリットはありました。 何より黎明期っぽい働き方ができたので楽しかった面もあります。 また、当時はモバイルアプリとしての不具合対応フローやノウハウがカスタマーサポート部にはあまりなかったので、そういった運用を作ったりしたのも良い思い出です。 ■改善活動その2 ～バグチケットを溜める～ 当たり前ですがその当たり前が当時はありませんでした。 バグチケットを置き場所を決めて、バグの修正プロセスを開発と話し合いリリーススケジュールを決める 改善を確認した際のチケットクローズまでのフローを立てる チケットを積み残す際の基準を作る バグチケットを参考にリグレッションテスト項目を作る など、今では当たり前にやっている運用をまずは作ることからスタートしてます。 こうしてまずはモバイルアプリにテスト担当者が一人出来上がることになりました。 テストチームを作ろう さて、モバイルがひと段落つくと次はSafieManagerのリリースがやってきます。 SafieManagerは開発メンバーがテストケースを作成し、私はテスト担当としてプロジェクトに組み込まれました。 SafieManagerはSafieのWebアプリケーションの中ではかなりシステムが複雑であったため、テストケースもモバイルに比べると倍以上ありました。 開発側もテスト実施にお付き合いいただけることになったのですが、さらに元QAエンジニアでSafieViewerのテストを実施されていた社員1名がアサインされます。 だいたいこの辺りからテストをやってくれる人達として認知されていくようになっていきます。 併せて全プロダクトへのテスト参加を目指して人員の拡大を進めていくことなり、僕＋社員1名、業務委託1名～2名でQAチームとして業務に取り組むことになります。 また、テストのことを少しでも学ぼうとJSTQBを取得したのもこのあたりだった気がします。 当時のなんとなくの役割 全PJの要件定義の調整＋テストの全体スケジュールの調整＋テスト作成＋テスト実施 山谷 Safie Viewerや、山谷が持ちきれないもののテストプロセス管理および実施 社員 テスト実施のサポート 業務委託 さて、上のような体制で半年ほど立つと、1つの課題が生まれてきました。 気づくと毎週私のMTG時間が30時間を超えています。 社内PJ全てに参画した結果、1週間の予定がほぼMTGで埋まってしまうことになりました。 頼っていただけるのは嬉しい反面テスト作成や、実施などはMTG中に内職をするか残業がマストになってます。 この課題を解決するにあたり、要件定義から入れるエンジニアを増やすことにします。 採用基準の中にプロダクトの品質や開発プロセス改善に取り組んだことがある、もしくは取り組みたいと考える方を追加し、こちらからの面接の内容もそれに則った内容に変更しました。 1年くらい上記で採用を続けた結果の所感ですが、以下のようなことを感じてます。 QAエンジニアはかなりジョブ定義が曖昧な職である ほとんどの場合はテストエンジニアやテストマネージャーといった経歴の方が多い ビジネス、企画、運用などを包括的な目線をもってプロセス改善に取り組んでいただけるか否かは当人の意識や資質に依存しやすく、こういった経験を持っている方は非常に少ない また、上記のようなスキルを持った方であっても芽が出るまでにはある程度の期間が必要 といった部分です。 そのため、最近では品質改善をどのように改善してきたか、もしくは課題をお伝えしたうえでそれをどのように改善したいと考えるか、などの質問を増やし社内でご活躍いただけるか否かの解像度をあげるように取り組んでいます。 まとめ まとめに入っていきますが、現在は社員6名、業務委託5名の11名となり、グループとなるまで拡大することができましたが、来年度は15名程度までは拡大したいと考えます。 Safie のQAグループのいいところはプロダクトの魅力と、裁量の広さです。 「良い品質のアプリケーションを作るだけではなく、良いサービス/プロダクトを作っていく」ことに共感をいただけましたら、ぜひ応募をいただければ嬉しいです。 最後までお読みいただきありがとうございました。

この記事は Safie Engineers' Blog! Advent Calendar 2023 4日目の記事です。 はじめに システム概要 システム構成 Stable Diffusion ChatGPT FastAPI Poetry 実装 プロジェクトの作成 ファイル一覧API API作成 URLのパスでディレクトリを指定できるように修正 ファイルのダウンロード対応 ファイル一覧ページ 画像のメタデータ取得 画像一覧ページ 画像のメタデータの表示 まとめ はじめに こんにちは、開発本部の中村俊成です。 今年も色々と流行りの技術がありましたね。その中でも生成AIは注目度が高かったと思います。私も生成AIの社内活用を検討する過程で、業務や個人的なプロジェクトにおいてChatGPTやGitHub Copilotなどの生成AIを徐々に取り入れています。 そうした中、Stable Diffusionで生成した画像とプロンプトを一緒に表示できるツールが欲しくなり、ChatGPT(GPT-4)の助けを借りて簡単なものを作成しました。また、セーフィーのサービスの一部で使用しているFastAPIフレームワークの基礎を学ぶ良い機会でもあったので、このツールの開発にFastAPIを使用しました。 この記事では、その開発過程を紹介します。 以下のような方の参考になれば幸いです。 何かを作りたい、または新しい技術に触れたいと思っているが、なかなか始められない方 私のことですmm ChatGPTの使用例を探している方 シンプルな指示を使った例になりますので、プロンプトエンジニアリングのサンプルとしては物足りないかもしれません FastAPIを使用したシンプルなサーバーの実装例に興味がある方 ここで紹介するのは実験的な実装ですので、参考にされる場合は注意してください システム概要 PC上で、Stable Diffusionで生成した画像を、画像サーバーに保存しておき、スマホや他のPCから閲覧できるようにします。画像サーバーの実装は、ChatGPTに相談しながら行いました。 システム構成 システム構成 Stable Diffusion Stable Diffusion は、Stability AI 社が開発している、ユーザーが与えた指示（prompt）を元に画像を生成するAIモデルです。 Stable Diffusion で画像を生成するためのツールとしては、 stable-diffusion-webui を利用しました。 stable-diffusion-webui で生成した画像には、生成時の prompt がメタデータとして記録されています。 ChatGPT ChatGPT は、Open AI社が開発している、人工知能に基づいたチャットボットで、テキストによる会話ができます。ユーザーのリクエストに応じて、情報を提供したり、創造的な内容を生成することが可能です。ブラウザや専用のアプリケーション、APIを通じて利用可能です。 FastAPI FastAPI は、Pythonの標準である型ヒントに基づいてPython 3.6 以降でAPI を構築するための、モダンで、高速(高パフォーマンス)な、Web フレームワークです。 Poetry Poetry はPythonのパッケージ管理ツールの一つです。pyproject.toml ファイルを使用してプロジェクトの依存関係を管理します。 実装 実装したコードは こちら から確認できます。 では、実装の過程を紹介していきます。 プロジェクトの作成 まずはプロジェクトの作成をChatGPTにお願いしてみます。 プロジェクトの作成 指示に従って、作業を行いました。 サーバーが起動し、ブラウザで開けるようになりました。 Hello World ファイル一覧API API作成 最低限の機能として、画像ファイルの一覧が必要だと考えました。 ファイル一覧API作成 URLのパスでディレクトリを指定できるように修正 それっぽいコードが出力されましたが、ディレクトリが指定できなさそうに見えます。修正を依頼しました。 ファイル一覧APIの修正 これでコード上のBASE_DIRECTORYとURLのパスでディレクトリを指定できるようになりました。BASE_DIRECTORYにプロジェクトのディレクトリ以下にある static ディレクトリを指定して、サーバーを起動してみると、ファイル一覧が取れました。 パス レスポンス /files/ ["/Users/t-nakamura/Study/src/image-server/static/.gitkeep"] ファイルのダウンロード対応 ファイル一覧に表示されたファイルのダウンロードに対応しようと考えました。 ChatGPTが提示するコードを見ながら、以下のような要望を出して、試行錯誤を行いました。 subdirectory_name に ../ のような相対パスの指定がされたら無視するようにしたいです。 APIで返すファイル名は、BASE_DIRECTORYからの相対Pathにしたいです APIが返すレスポンスを以下のようにして、ディレクトリのリストも返したいです。 {"files": ["file1", "file2"], "dirs": ["dir1", "dir2"]} /files/{subdirectory:path} APIで返したファイル名を指定したら、そのファイルをダウンロードできるようにしたいです。 /files/{subdirectory:path} と /download/{filepath:path} を統合して、指定したpathが、ディレクトリだったら、ファイル一覧を返して、ファイルだったらファイルをダウンロードできるようにしたいです。 ファイルが画像の場合だけ、ファイル一覧で返したり、ダウンロードできたりするようにしたいです。 あいまいな表現が含まれていますが、ChatGPTが適切に解釈して、最終的に以下のようなコードを出力してくれました。 ディレクトリ内のファイル一覧表示と、ファイルのダウンロード対応 サーバーの実装に反映させ、以下のようにJSONを返せるようになりました。また、画像ファイルをのパスを指定するURLを開いた場合は、ブラウザ上で画像を表示できるようになりました。 パス レスポンス /files/ {"files":[],"dirs":["2023-11-29"]} /files/2023-11-29 {"files":["2023-11-29/2023-11-29 10.02.37.png"],"dirs":[]} ファイル一覧ページ JSONで返すと、ディレクトリやファイルをブラウザ上で選択して開くことができません。そこで、簡易的なHTMLでファイル一覧ページを返すようにしようと考えました。 ファイル一覧ページの実装方針 ChatGPTからの返答が長かったので、上記のスクリーンショットでは割愛しましたが、サーバーのコード修正や、テンプレートファイルの内容が提示されました。提示された実装例に従って、HTMLを返せるようになりました。（ 対応時のコミット ） パス スクリーンショット /files/ /files/2023-11-29 /files/2023-11-29/img.png 画像のメタデータ取得 ここで、画像のメタデータを取得する方法について確認しておくことにしました。 メタデータ取得APIの実装 Pillowライブラリを使えばできそうなことが分かりました。ライブラリをプロジェクトに追加し、提示されたコードで metadata 取得APIを実装すると、メタデータを取得できるようになりました。 パス スクリーンショット /metadata/img.png 画像一覧ページ データ取得に関しては、要素が揃ったので、表示部分の実装を行うことにしました。一覧性を高くするために、グリッド上に画像を表示することにしました。サーバーの実装と切り離して、シンプルな実装を知りたいと考えて、これまでとコンテキストを変えるため、新しいチャットを始めました。 画像一覧ページ 提示されたコードを、テンプレートの file_list.html に反映すると、画像がグリッド状に表示されるようになりました。 パス スクリーンショット /files/2023-11-29 画像のメタデータの表示 画像のメタデータを表示できるようにします。画像の下に表示する方式も試したのですが、画像の一覧性が下がるため不採用にしました。画像の右下にボタンを配置して、ボタンをクリックすると、モーダルでメタデータを表示できるようにしました。 メタデータのモーダル表示 提示されたHTML、CSS、JavaScriptのコードを、少し調整して、テンプレートの file_list.html に反映すると、意図通り動作するようになりました。（ 対応時のコミット ） 完成版 まとめ ChatGPTにざっくりとした指示を出すだけで、動くものがすぐに仕上がるのは、驚きでした。動くものがあることで、機能を即座に試すことができますし、次に「ここをこうしたい」といったアイディアが浮かび、徐々に自分の理想に近づける原動力となりました。その結果、「あれば便利だろうな」と漠然と考えていたものを、実用的な形で素早く作成できました。 業務においても、社内外向けサービスのプロトタイプを作成する際などに活用できるという実感が得られました。今後も、この実感を基に、生成AIを生産性の向上や、新しい価値の創出に活かしていきたいです。

この記事は Safie Engineers' Blog! Advent Calendar 2日目の記事です。 セーフィー株式会社でテックリードをやっております鈴木敦志です。 セーフィーはクラウドカメラのSaaSを提供しており、現在22万台程度のデバイスに対してカメラ映像をクラウドから視聴する機能を提供しています。 それに加えエンタープライズ向けの権限管理機能や社内向けの販売管理ツールなど複数のサービスを運営しており、各サービスでMySQLのDBを共有しているためDBのテーブル数が肥大化し構造がわかりにくくなり、新機能開発の妨げとなっていました。 本稿ではデータベースのドキュメンテーションツールである tbls を導入し、DBスキーマ管理ツール skeema 、ドキュメント生成ツール mkdocs 、Github Actionsなどと組み合わせてスキーマ管理からドキュメント生成までをやっていきます。 現在の問題点 ドキュメント記述方法の検討 - tbls ドキュメント生成手順 skeema によるDBスキーマの適用 tbls によるドキュメント生成 mkdocsによるHTML生成 ドキュメント配信 tblsのViewPoints機能によるドキュメントの改善 今後の課題 .tbls.yml のエディタ補完 現在の問題点 セーフィーでは主にDBにAurora MySQLを利用しており、現在のテーブルはシャーディング用途のものを除くと452、すべて含めると5,718個あります。 各テーブルにはコメントや外部キー制約がなく、テーブルの用途を把握するにはプログラムコード内のSQLをすべて調べる必要がありました。 この問題の解決策として別途DBとコードの分割を行っており、並行してDBのドキュメント記述の仕組みの整備を行っていきます。 ドキュメント記述方法の検討 - tbls ドキュメントの記述方法は以下の方針で検討しました。 テーブル定義からドキュメントを生成する 上記に加え別途テーブル/カラムに対するコメントや外部キー制約を記述できる テーブル定義 (今回はGithubで管理されたSQLファイル) と近い場所でドキュメントを管理できる ドキュメントをCIで自動生成する これらの要件を満たすツールとして SkeemaSpy などを検討し、CIとの親和性やyamlによる書きやすいDBメタデータ記述などを決め手に tbls を選択しました。tblsはMarkdownでドキュメントを出力するためHTMLページに変換する必要がありましたが、それには mkdocs を利用することにしました。 下図が出力例です。(サンプルのデータベースを使用しています) tbls + mkdocs出力例 ER図には外部キー制約またはtbls設定ファイル (.tbls.yml) に記載されたリレーションが表示されます。 tbls + mkdocs出力例 (ER図) ドキュメント生成手順 skeema によるDBスキーマの適用 セーフィーではDBスキーマを CREATE TABLE 文の記載されたSQLファイルの形式で記述し、skeema ( https://www.skeema.io/ ) で管理しています。 ドキュメント生成のワークフローではローカルまたはGithub Actions上で起動したMySQLサーバーに対してスキーマを適用します。 tbls によるドキュメント生成 先述した tbls ( https://github.com/k1LoW/tbls ) ではMySQLデータベースおよび設定ファイル (.tbls.yml) をもとにMarkdownドキュメントおよび図表を出力します。 DBドキュメントを記述する際には簡単な内容であればMySQLのテーブル/カラムコメントを追記、Markdownで記述が必要なような複雑な内容であれば設定ファイルに説明を記述しています。 mkdocsによるHTML生成 mkdocs ( https://www.mkdocs.org/ ) はpythonで実装されたMarkdownファイルからHTMLドキュメントを生成するソフトウェアです。 様々なテーマや拡張機能が用意されていて、今回は下記の構成をとりました。 mkdocs-material: 高機能なテーマ シンタックスハイライト ( https://squidfunk.github.io/mkdocs-material/reference/code-blocks/ ) mermaid.js統合 ( https://squidfunk.github.io/mkdocs-material/reference/diagrams/ ) glightbox: 画像拡大プラグイン。関連の数によってはER図が大きくなるため採用 現在下記 mkdocs.yml を使用しています。 site_name : "Northwindデータベース定義" theme : "material" plugins : - "search" - "glightbox" extra_css : - "stylesheets/extra.css" markdown_extensions : - pymdownx.highlight : anchor_linenums : true line_spans : __span pygments_lang_class : true - pymdownx.inlinehilite - pymdownx.snippets - pymdownx.superfences : custom_fences : - name : mermaid class : mermaid format : !!python/name:pymdownx.superfences.fence_code_format ドキュメント配信 生成されたHTMLドキュメントをAWS S3にアップロードし、Google WorkspaceのOpenID Connect認証をかけて配信しています。 tblsのViewPoints機能によるドキュメントの改善 tblsのテーブルコメントおよびカラムコメントだけでも一定の役にたちますが、そもそものテーブル数が多いため探しているテーブルを見つけるのが難しいという問題があります。 これに対してtblsにViewPointsという機能が実装され、ある関心ごとにテーブルをグルーピングしドキュメントを構成することができるようになりました。これにより「契約情報」「カメラ設定」などの関心ごとにテーブルの概観と関連を把握することができ、全体感を把握することが容易になりました。 ViewPointsは .tbls.yml に下記のように記述します。 viewpoints : - name : "商品情報" desc : | 各商品は `Products` テーブルで管理され、関連するカテゴリ情報 `Categories` とサプライヤ情報 `Suppliers` の情報を持ちます。 tables : - "Products" - "Categories" - "Suppliers" tbls + mkdocs出力例 (ViewPoints) 今後の課題 上記の実装によりデータベースドキュメントの生成に対応しました。現状はコメントが付与されているテーブルはごく一部であり、今後はテーブルのコメントを充実させていく必要があります。 .tbls.yml のエディタ補完 .tbls.yml にデータベースのドキュメントを記述していく方針ですと、フィールド名やcardinalityの値などでエディタの自動補完が効くと便利です。 現状エディタ拡張などはないので、ひとまずVSCodeの YAML Language Server とtblsのソースコードから生成したJSON Schema ( https://gist.githubusercontent.com/suzuki-safie/2b56ab4771134d3c801dcd497677f53d/raw/tbls-config.schema.json ) を利用することである程度の補完とバリデーションを実現しました。 利用するには YAML Language Serverの導入後、以下の設定をVSCodeの設定に追加してください。 { // ... "yaml.schemas" : { "https://gist.githubusercontent.com/suzuki-safie/2b56ab4771134d3c801dcd497677f53d/raw/tbls-config.schema.json" : [ ".tbls.yml" ] } }

この記事は Safie Engineers' Blog! Advent Calendar 1日目の記事です。 こんにちは。セーフィー株式会社でバックエンドエンジニアをしている河津です。 アドベントカレンダーついに始まりましたね。初日の記事なので少し緊張します。 今年も様々な領域の記事がたくさん公開されると思いますので、是非他の記事も楽しみにしてくださいませ。 さて今回は、WebSocketを用いているサーバ側のアプリケーションの動作確認にwscatというツールが便利だったよという話をします。 背景 wscatとは 動作確認してみる 最後に 背景 セーフィーにはカメラの映像を視聴することができるSafie Viewerというプロダクトがあります。(デモ画面は こちら 。) このプロダクトの中で、映像のサムネイルを数秒おきに更新している箇所があり、更新の手法としてWebSocketでの通信を用いています。 具体的には、サーバ側で数秒間隔でカメラの映像からサムネイルを作成し、サムネイル画像のバイナリをWebSocketでクライアント側に送信します。 クライアント側としては都度新しいサムネイルをリクエストする必要が無いようになっています。 この仕組み周りに修正を入れた時に、WebSocket周りの動作確認を行うために良い方法を調べたところ、wscatというツールを知りました。 wscatとは wscat とはWebScoketのサーバを立ち上げたり、クライアントとして利用することができるツールです。 Node.jsが入っていれば npm コマンドでインストールすることができます。 $ npm install -g wscat 試しにサーバを立ち上げ、クライアントから通信を行ってみましょう。サーバを立ち上げるには以下のコマンドを実行します。(今回はポート3000で立ち上げてみます。) $ wscat -l 3000 -l オプションをつけると、指定したポートでWebSocketを受け付けることができるようになり、サーバーの役割を果たします。 クライアント側からの通信は以下のコマンドで行います。 $ wscat -c ws://localhost:3000 # ws://を省略しても繋がります。 $ wscat -c localhost:3000 # TLSを使った通信であればwss://と明示的に指定します。 $ wscat -c wss://example.com:443 -c オプションの後に接続したいサーバのエンドポイントを指定することで、サーバと接続されます。 それぞれ別のターミナルから実行すると、ポート3000でハンドシェイクされ、サーバ・クライアント間でメッセージを送り合うことができます。 動作確認してみる サーバ側で実装したWebSocketのエンドポイントを指定して動作確認を行うには、上記例のうちクライアント側からの通信を行う -c オプションを使用します。 リクエストヘッダを -H オプションで指定できるので、WebSocketの通信に使用する Sec-WebSocket-Key 、 Sec-WebSocket-Version などのヘッダ情報や、Authorizationヘッダによる認証情報の送信、Cookieの送信なども可能です。 この辺りの使い方はcurlに近く、個人的にかなり使いやすく感じています。 TLS利用、Bearer認証を行う前提とすると、実行サンプルとしては以下のような形になります。 $ wscat -c wss://{WebSocketエンドポイント} \ -H 'Sec-WebSocket-Key: {任意の値}' \ -H 'Sec-WebSocket-Version: {執筆時点では13}' \ -H 'Authorization: Bearer {アクセストークンなど}' 最後に 本記事では触れませんでしたが、逆にクライアント側でWebSocketを用いた実装を進めている際に、サーバ側の開発を待たずに -l コマンドで立てたサーバと疎通しながら実装を進めることもできそうですね。 WebSocketを使ったアプリケーション開発を行っている方は、ぜひ参考にしていただけると幸いです。

こんにちは。フロントエンドエンジニアの江守です。 映像閲覧WebアプリであるSafie Viewer（以下Viewer）の開発をしています。 本記事では2023年6月に「 Safie Pocketシリーズ 」で利用可能となった遠隔臨場モードについて紹介したいと思います。 遠隔臨場モード機能とは 対応の背景 グループコーディング まとめ 遠隔臨場モード機能とは 遠隔臨場モード機能とは、「遠隔臨場」での実施記録撮影時に、監督員などのワイプ映像をキャプチャ内に含めた保存ができる機能となります。 具体的には、下記手順にて有効となり、スクリーンショットで撮影いただくことで実施記録として保存することができます。 デバイス設定の設定画面で、「遠隔臨場モード」をONにします。 Viewerの音声通話を実行し、カメラのON/OFFボタンをONにするとViewer画面上にワイプ映像を表示します。 対応の背景 「Safie Pocketシリーズ」を販売していく中で、いくつかの地方自治体では以下のような独自要件があり、導入が難しいケースがあることが判明しました。 受注者は遠隔臨場が行われた記録として、全景と近接の映像をスクリーンショット等で撮影 記録の撮影時には必ず監督員の映像を含めて撮影 (出典： 石川県 建設現場における遠隔臨場に関する試行要領 概要版 ) 「Safie Pocketシリーズ」を使いながら遠隔臨場を行う際は、現場サイドでは携帯しているデバイスの音声通話を使い、監督員サイドではViewerの音声通話を使うケースがほとんどかと思います。 要件1つ目については、監督員サイドで音声通話中にスクリーンショットを撮ることで問題はないのですが、要件2つ目については、監督員の映像を表示することが出来ていなかったため対応を行いました。 グループコーディング 弊社フロントエンドエンジニアチームでは、要件やデザインが固まり実装フェーズに移行、または開発がある程度進んだ段階でグループコーディングを行っています。 グループコーディングとはVisual Studio Codeの拡張機能であるLive Share機能を使って、チーム全員でコードの共同編集を行うことです。 グループコーディングを導入した経緯としては下記があります。 各メンバーの習熟度向上 ViewerはフレームワークにAngularを利用しているのですが、長く利用し続けているメンバーもいれば、入社してから初めて利用するメンバーもおり、習熟度に差があります。 習熟度の高いメンバーからアドバイスを受けることで、習熟度の向上を図ることができます。 ソースコードの品質向上 常にレビューしながら開発を進めるため、実装方法の間違いや記載ミス、おかしな変数名があったらその場で修正することができ、ソースコードの品質を向上させることができます。 本開発でもグループコーディングを行い、ビューとロジックが一緒くたとなっている箇所があったので分割したり、不必要な記載を削除することで可読性、コードの品質を向上することができました。 また、Angular 15から安定版になったStandanlone Componentsという新しい機能を採用しました。 汎用モジュールが不要となるためコードの記載量を減らすことができ、スッキリと見通しの良いコードになりました。 まとめ 建設業界では2024年4月から働き方改革によって時間外労働が厳しくなり、遠隔臨場での現場確認の必要性が増してくるのではと考えております。 Pocketシリーズを遠隔臨場でご活用していただくためにも、今後も引き続き改善を進めていきます。 また、お客様の困りごとにスピード感を持って対応するためにも、グループコーディング等の様々な取り組みを行いながらエンジニアの習熟度、ソースコードの品質向上に努めていきます。

フロントエンドエンジニアの阿部です。 2023年7月に開催されたDeveloper Boost 2023で登壇をしてきました。 Developer Boostは登壇者も聴講者も30歳以下の若手デベロッパーを対象としたカンファレンスです。 event.shoeisha.jp 初めての登壇で大きなイベントということで緊張して臨んだのですが、何事もなく終わることができてホッとしています。 今回はこの登壇について振り返っていきたいと思います。 登壇内容 スライド 内容 きっかけ 資料の作成 発表練習 本番 今回のイベントに参加してみて 登壇内容 スライド 内容 未経験からエンジニアになった経験を元に今までどのようなキャリアを歩んできたのか、またその中で感じた悩み、今後のキャリアプランまで赤裸々に語りました。 最も伝えたかったことは以下になります。 今まで3社経験してきて結局どんな会社にいても悩みが消えることはないと感じました。なので、 悩みを深く考えすぎずに日々エンジニアとして成長していくことが、結局のところ最も大切なことであるということです。 この考えに至った経緯など詳細は以下の記事を覗いてみてください。 codezine.jp きっかけ 「こんなイベントがあるんだけど登壇してみない？」と上司の方からお話を頂き、自分からだとなかなか登壇しようとならないし、いい機会だからやってみようということで勢いでこの話を受けました。 資料の作成 キャリアよりのイベントということでキャリアについて30分話すことになりました。 「30分も何話そう...」と悩みましたが自分が話せるのは「未経験からエンジニアになった経験」だと思ったのでこの内容で発表することを決めました。 試行錯誤しながらなんとかスライドを作り上げました。 発表練習 時間を測りながら1人で黙々と喋るという練習を行ったり、 社内リハーサルとしてイベントの企画の方々の前で発表練習をしたり、色々と練習しました。 リハーサルで出た課題を修正しつつ、本番までの準備を整えました。 本番 話し始めたら意外に緊張せず、多少は上手く話せたのかなと感じています。 同じ悩みを抱えた同年代の若手エンジニアが質問ブースに何人か足を運んでくださり、「こんな時どうしてました？」「どうやって悩み解決していました？」など色々と質問を頂きました。 特に「他人と比較してしまうことに悩んでいます。」という悩みを持っている方が多い印象でした。 他人との比較ではなく、過去の自分と現在の自分を比較することに注力することが大切ということをアドバイスをさせて頂きました。 結構同じ悩みを抱えている人も結構いるんだなという印象です。 また他の登壇者の方々の発表を聞かせて頂きましたが、皆さん面白い内容が多く勉強になりました。 今回のイベントに参加してみて 参加してよかったというのが率直に感じたことです。 登壇という経験が出来たこともそうですが、懇親会では同年代のエンジニアの方々と開発している時の苦労であったり、考えているキャリアのことであったりと、色々と共有できて楽しかったです。 また是非機会があれば色々なイベントに参加していきたいなと考えています。

企画本部 AIソリューション部 今野です。 Safie Developers のPdMを担当しています。 過去に「 Safie APIの始め方と動作方法の紹介 」にて、Safie API β版の使い方を紹介させて頂きました。投稿から一年半以上経過する訳ですが、Safie APIはSafie Developersと同時にバージョンアップされ、現在はSafie API v2(正式版)として無事に公開することができています。過去の投稿の中ではβ版を正式版とすることが業務目標とお伝えしており、それを達成してこうしてまたBlogを投稿することができて嬉しい限りです。 本投稿では、Safie API v2(正式版)より提供を開始した無料トライアルを実際に使用してみた手順について紹介します。よろしくお願いいたします。 Safie Developers, Safie APIとは？ トライアルに必要なものを揃える Safie APIをトライアルで動かしてみる ①Safie Developersでアプリケーションを作る ②APIキーとアプリケーションコードを取得する ③デバイス連携をする ④Safie APIでデバイス一覧を取得する ⑤Safie APIで画像を取得する 最後に Safie Developers, Safie APIとは？ Safie Developersは、以前はSafie APIの紹介と問い合わせを受けるのみのサイトでした。現在は、ログイン機能が用意され、Safie APIの利用に必要な情報取得や各種設定ができるポータルサイトとなっています。 developers.safie.link Safie APIは変わらず、セーフィーが提供するクラウド録画サービスのデータを、外部のサーバーから取得したり、情報を書き足したりする機能を提供するものとなります。サーバーからの呼び出しを原則としているため、ブラウザから呼び出したい場合は Safie SDK(JavaScript) をご利用頂くこととなります。Safie SDK(JavaScript)については、改めて別の投稿で紹介したいと思っています。 Safie APIのv2(正式版)は、β版の認証情報は使用できない、メソッドが変更されている、等、様々な違いがあり、互換性は維持されていません。β版との互換性を維持しないことによる利用者のデメリットは理解していましたが、β版運用時に明らかとなっていた技術負債は軽視できるものではなく、正式版リリースを機に負債を解消して運用の安定化を行う決断をしました。正式版と銘打ってリリースした以上、今後は可能な限り仕様を公開し、後方互換を保って運用していく計画です。ご理解頂ければと思います。 互換性がなくなった分、β版ではできなかったことを大幅に盛り込みました。盛り込んだ推しの要素は以下となります。 クラウド録画サービスを契約しているだけでSafie APIのトライアルができる 認証に必要な情報がSafie Developersから待ち時間なしで取得できる Safie APIに関する各種設定がSafie Developersから行うことができる 認証方式を「OAuth2.0認証」に加え「APIキー」方式を利用できる β版では非公開だったRatelimitやエラー情報、など、機能制限の情報を確認できる β版では法人向けのみ公開だが、法人・個人の両方が利用できる 他にも様々な便利になった点があります。詳細は Safie Developers のサイトにてご確認ください。 トライアルに必要なものを揃える 早速ですが、トライアルに必要な環境を揃えていきます。 クラウド録画サービスを契約をしたカメラ（自分がオーナーのもの） Safie Developersへの登録 クラウド録画サービスを契約したカメラは、シェアされたものではなく、自分がオーナーとして契約したカメラであることが条件となっています。また、Safie Developersへの登録は以下の手順にて行います。 Safie Developers の右上の「ログイン」ボタンよりログインする ※アカウントはSafie Viewerと同じもの ディベロッパーとしての情報を入力し、利用規約を確認の上、登録する これにて準備は完了です。 Safie APIをトライアルで動かしてみる 私が具体的に動かした手順を紹介していきます。Safie APIはREST APIであり、多種多様な環境での呼び出しが可能なものです。今回の動作手順はあくまで一例にすぎませんが、動作理解の参考にして頂けると幸いです。環境の影響はほぼないかとは思いますが、動作環境を以下に記載しておきます。 MacBook Pro (13-inch, M1, 2020) macOS Ventura Version 13.4.1 (c) Google Chrome Version 116.0.5845.187 (Official Build) (arm64) Postman Version 10.17.3 https://www.postman.com/ ①Safie Developersでアプリケーションを作る まずはアプリケーションを作成しました。アプリケーションは自分が作成するサービスを表すものになります。アプリケーションを作成する際には、認証方式を選択することが必要となります。認証方式はOAuth2.0認証とAPIキー認証の2方式を提供しており、トライアルが実行できるのはAPIキー認証方式のみとなります。認証方式の違いに詳しく知りたい方は、Safie Developersのチュートリアルの 「 OAuth2.0認証 」「 APIキー認証 」をご確認ください。 Safie Developersにログインした後、「①-a 管理ツール」「①-b APIキー認証」「①-c アプリケーション新規作成」の順に選択しました(図1)。 図1. Safie Developers APIキー認証アプリケーション一覧(アプリケーション作成前) 「アプリケーションの新規作成」の画面にてアプリケーションの情報（表1）を入力し、「この内容で新規作成」を選択しました。 表1. アプリケーション新規作成 アプリケーション情報参考 項目名 パラメータ アプリケーション名称 テスト プラン トライアル 公開状況 非公開 利用サービス> 利用API 画像取得にチェック 「この内容で新規作成」を選択した後、「新規作成完了」のモーダルが出力されました(図2)。次にAPIキー作成の画面に進むため、「①-d APIキー管理に遷移する」を選択しました。 図2. Safie Developers アプリケーション新規作成完了モーダル ②APIキーとアプリケーションコードを取得する 前述手順を行うと、「APIキー認証アプリケーション>APIキー管理」の画面が表示された状態になります。ここからAPIキーとアプリケーションコードを取得し、記録しました。APIキーは、Safie APIを使うために必要な認証キーです。アプリケーションコードは、カメラにアプリケーションを認識させて、連携させるために使うコードとなります。 「APIキー認証アプリケーション>APIキー管理」の画面にて「②-1 APIキー新規発行」「②-2 発行」を選択し、APIキーを発行しました(図3, 図4)。「②-3 APIキー コピーアイコン」を選択し、APIキーを手元に記録しました(図5)。 図3. Safie Developers APIキー認証アプリケーション設定>APIキー管理画面(APIキー発行前) 図4. Safie Developers APIキー認証アプリケーション設定>APIキー管理画面 APIキー新規発行モーダル 図5. Safie Developers APIキー認証アプリケーション設定>APIキー管理画面(APIキー発行後) 「②-4 APIキー認証」を選択して「APIキー認証アプリケーション一覧」の画面に戻りました。「②-5 アプリケーションコード コピーアイコン」を選択して、アプリケーションコードを手元に記録しました(図6)。 図6. Safie Developers APIキー認証アプリケーション一覧(アプリケーション作成後) - 1 ③デバイス連携をする カメラの所有者側の立場で、②で記録したアプリケーションコードを使って、カメラにアプリケーションを認識させました。その後、サービスを作る側の立場でアプリケーションの利用を承認しました。 本来は、自分以外のカメラの所有者にアプリケーションコードを渡して、アプリケーションを認識してもらい、作成したサービスと連携してもらうのが正規の使い方です。今回は簡易なトライアルなので、アプリケーションを使うカメラの所有者側とサービスを作る側の両方を自分が兼ねています。 Safie Viewer を開き、「③-1 ユーザ設定」「③-2 Developers連携」の順に選択し、Developers連携の画面を開きました。「③-3 アプリケーションの追加」を選択し、「アプリケーションの追加申請」のモーダルを開きました(図7)。「③-4 アプリケーションコード」の入力枠に、記録していたアプリケーションコードを入力し、「③-5 次へ」を選択しました(図8)。「③-6 デバイス選択」にてアプリケーションを認識させたいカメラを選択しました(図9)。その後、申請内容確認画面が表示され、内容確認の上、「申請」を選択しました。 図7.Safie Viewer Developers連携 図8.Safie Viewer Developers連携 アプリケーションの追加申請モーダル 図9. Safie Viewer Developers連携 アプリケーションの追加申請モーダル カメラがアプリケーションを認識した上で、最後にサービスを作る側が承認を行わなければ、Safie APIは使用できない仕組みになっています。 Safie Developersを再度開き、「③-8 APIキー認証」を選択し、「APIキー認証アプリケーション一覧」の画面を開きました。「③-9 連携デバイス管理」を選択し、「APIキー認証アプリケーション>連携デバイス管理」の画面を開きました(図10)。 図10. Safie Developers APIキー認証アプリケーション一覧(アプリケーション作成後) - 2 「APIキー認証アプリケーション>連携デバイス管理」の画面では、アプリケーションコードを入力したデバイスの情報が表示されました。「③-10 設定」より「認証状況」を「承認済み」に変更しました（図11）。 図10. Safie Developers APIキー認証アプリケーション一覧(アプリケーション作成後) - 2 これにてSafie APIを使うための準備が全て整いました。 ④Safie APIでデバイス一覧を取得する アクセス可能なデバイス一覧を取得します。1台のみの登録なので、1台の情報のみ取得されます。デバイス一覧取得は特にパラメータ指定はないので、以下URLとAPIキーの設定のみを行います。 https://openapi.safie.link/v2/devices APIキーはAuthorizationのタブを選択し、Typeは「API Key」を選択しました。「Key」は「Safie-API-Key」の文字列を記入しました。「Value」は工程②で記録したAPIキーの文字列を記入しました。「Add to」は「Header」を選択しました。実行するとデバイス一覧がResponseに表示されました。表示された一覧からdevice_idの文字列を記録しました。 図11. Postman デバイス一覧取得実行 ⑤Safie APIで画像を取得する デバイスを指定して、画像取得を行いました。以下のURLの[device_id]の部分に、工程④で記録したdevice_idの文字列を記入しました。 https://openapi.safie.link/v2/devices/[device_id]/image 工程④の操作同様、AuthorizationにAPIキーを設定しました。実行するとResponseにカメラの画像が表示されました。 図12. Postman 画像取得実行 最後に 前回の投稿と同様の流れでしたが、Safie API v2(正式版)を実際に動かしてみた工程を紹介させて頂きました。Safie Developersのマニュアルに記載された内容ではあるのですが、今回の紹介を通して少しでも使い心地が伝わると嬉しく思います。 前回の紹介ではβ版は積極的に紹介できない旨を記載していましたが、正式版となり制限なく案内ができるようになりました。今回の投稿を見て気になった方は、是非、ご利用を検討頂ければと思います。

こんばんは。データ分析基盤グループ所属の大室です。 セーフィーではデータドリブン経営を推進すべく、2021年頃からデータ分析基盤のシステム開発が始まり、2022年に専門の組織「データ分析基盤グループ」が立ち上がっています。 システムも組織も産声を上げたばかりのデータ分析基盤。本記事ではその歴史や背景、組織やアーキテクチャにスポットライトを当てたいと思います！ そもそもデータ分析基盤とは？ データレイク DWH ETL BIツール セーフィーのデータ分析基盤ヒストリー データ分析基盤グループについて 所属組織 所属メンバー 開発手法 セーフィーのデータ分析基盤アーキテクチャ 旧基盤 新基盤 最後に We are hiring! そもそもデータ分析基盤とは？ データ分析基盤とは、「 大量のデータを収集・蓄積・整形し、分析を行うためのシステム基盤 」のことを指します。 データ分析基盤は様々な要素で構成されますが、代表的な構成要素として「 データレイク 」「 DWH 」「 ETL 」「 BIツール 」が挙げられます。 データレイク データレイク とは、大量のデータを保存・管理するためのアーキテクチャまたはシステムを指します。 構造化データや半構造化データ、非構造化データなど、あらゆる形式のデータをそのまま保存することができます。 DWH DWH とは、データウェアハウス（ D ata W are H ouse）の略語です。 異なるデータソースからのデータを統合し、組織の意思決定に役立つ情報を提供するために設計されたデータベースシステムを指します。 データは通常、タイムスタンプや一定のルールに基づいて整理され、組織のビジネスプロセスや意思決定のニーズに合わせて構造化されます。 ETL ETL とは、（ E xtract/ T ransform/ L oad）の頭文字をとった略語です。 DWHへデータを統合する際に用いられる各プロセスを指します。 ①Extract（抽出・収集） 様々なデータソースから必要なデータを抽出するプロセスです。 データベース、ウェブサービス、ファイル、外部システムなど多岐にわたるデータソースからデータを抽出します。 ②Transform（変換・整形） データを目的の形式や構造に変換するプロセスです。 データの変換には、クレンジング（不正確なデータの修正や欠損値の処理）・結合・集計などが含まれます。 ③Load（格納） 抽出・変換したデータをデータレイクやDWHに格納するプロセスです。 元々、 E xtract → T ransform → L oad の順に処理するフローが主流だったため、 ETL という略語が定着しました。 データの変換処理は専用のサーバー上で実行するのが一般的でしたが、近年（2010年代〜）は性能の高いクラウド型DWHが台頭したため、 E xtract → L oad → T ransform といったようにデータをDWHに格納してからDWH上で変換処理を実行するフロー、所謂 ELT という略語も使われ始めています。 BIツール BIツール （ビジネスインテリジェンスツール）とは、データを分析・可視化するためのソフトウェアツールを指します。 企業や組織がデータに基づいたビジネスの意思決定を効率的に行うための手段として用いられます。 BIツールは主に下記の機能を備えています。 ①データソースへの接続機能 DWH・Webサービス・Excelファイル・csvファイルなど、様々なデータソースに接続し、必要なデータを取得します。 ②データの分析機能 データの集計・集約・フィルタリング・グルーピングなどの分析操作を実行し、データからパターンや傾向を発見する手助けとなります。 ③可視化・ダッシュボード機能 データを視覚的に理解しやすい形式で表示します。グラフ・表・マップなどのコンポーネントを使用し、データをインタラクティブなダッシュボードに組み込むことができます。 BIツールそのものをデータ分析基盤に含めるかどうかは議論の余地があると思いますが、ビジネスユーザーがデータを分析・可視化する上で非常に便利なツールであることは間違いありません。 セーフィーのデータ分析基盤ヒストリー セーフィーのデータ分析基盤に纏わる歴史について紹介します。 ※脚色が若干入っています。 私は2022年4月にジョインしたので、データ分析基盤導入以前の状況はあまり詳しくないのですが… 巷の噂によると、当時は社内のデータ分析に関する問い合わせがCTOに集中し、多くの時間を割いている状況だったとのことです。 事業拡大&社員増加に伴いデータ分析の社内ニーズが日々高まる一方、当社のCTOは他にも重要な役割を担っています。 上記のような問い合わせ対応に追われ続けるのは、全社的にあまり好ましい状況ではなかったようです。 また、当時はサービスのバックエンドのデータベースシステムから直接データを参照していましたが、分析用の処理に特化したシステムではないため、分析要件を満たすデータの算出には多くの時間を要する状況でした。 このような状況の打開策として「データ分析基盤の構築」と「専門組織の組成」が挙がり、2021年下期からCTO直下組織「CTO室」主導でデータ分析基盤の構築が急ピッチで進められました。 並行してデータ人材（データエンジニアやデータアナリスト）の採用も積極的に行い、2022年上期にCTO室から「データ分析基盤の構築」及び「データ分析の支援」業務をスピンアウトした組織「 データ分析基盤グループ 」が立ち上がりました。 専門組織が立ち上がって一安心！………とはいかず、急ピッチで構築したデータ分析基盤は性能や拡張性に多数の課題を抱え、徐々に運用保守が困難な状況に陥ってしまいました。 この状況を打破すべく、2023年上期からデータ分析基盤リニューアルPJが始まり、今に至っています。 データ分析基盤グループについて 所属組織 セーフィーでは機能別組織を採用しており、社長直下組織を除くと、開発本部・企画本部・営業本部・カスタマーサービス本部・経営管理本部の5つの本部が存在します。 データ分析基盤グループは、 開発本部 配下の 第3開発部 に所属しています。 組織図 | セーフィー株式会社 - Safie Inc. 第3開発部には、顧客管理システムや契約管理システムなど、社内業務に必要不可欠なシステムの開発を担う組織「 業務システムグループ 」と、 Store People Detection Pack に代表される、映像解析AIの開発を担う組織「 AI Visionグループ 」も所属しています。 所属メンバー データ分析基盤グループには、データ分析基盤の開発や運用保守を担う データエンジニア と、各部署のデータ分析支援を担う データアナリスト が所属しています。 役割は異なりますが、ユーザーヒアリング・要件定義・テーブル設計など、密に連携して様々な業務に取り組んでいます。 開発手法 セーフィーでは開発手法として スクラム を導入している開発組織が多いのですが、データ分析基盤グループでも2023年1月から導入しています。 まだまだ試行錯誤の段階ではありますが、スクラムを導入したことによって、属人化の低減やコラボレーションの促進、柔軟性の向上や生産性の改善に繋がっていると感じています。 スクラムについては下記の記事に詳しく書かれていますので、ぜひご覧下さい！ engineers.safie.link engineers.safie.link セーフィーのデータ分析基盤アーキテクチャ セーフィーが提供するクラウド録画サービスのバックエンド（通称：Safieプラットフォーム）はAWSの各サービスで構築されており、デバイス（カメラなど）やアプリケーション（Web/モバイル/AIなど）が発するデータのほぼ全てがAmazon AuroraやAmazon S3に格納されます。 セキュリティの都合上、Safieプラットフォーム側とデータ分析基盤側のAWSアカウントは分離しており、AWS Lake Formation経由でデータ分析に必要なデータのみ共有する仕組みを構築しています。 AWS Lake Formationを用いたデータ共有の詳細については下記の記事に詳しく書かれていますので、ぜひご覧下さい！ zenn.dev 旧基盤 前述の通り、データ分析基盤は現在リニューアル中のため、通称「 旧基盤 」と「 新基盤 」2つのアーキテクチャが存在する状況です。2023年度内に新基盤への移行を完了する見込みです。 旧基盤では、AWS Lake Formationで共有されたデータをAWS GlueのPython Shell JobでAmazon S3にParquet形式で出力し、Amazon EC2上のShell Script/Python/SQLでAmazon Redshiftにデータを抽出/格納/変換する処理を実装しています。 社内のユーザーはRedashやTableauを通してAmazon Redshift上のデータを参照することができます。 新基盤 Amazon S3にデータを出力する処理までは旧基盤と同じですが、新基盤ではDWHをSnowflakeに変更し、Amazon S3 → Snowflakeへデータを転送する処理にはSnowpipe（Snowflakeの継続的なデータロードの仕組み）、データの変換処理にはdbt（data build tool）を採用しています。 社内のユーザーには、SQLでアドホックに分析したい場合 = Snowsight（Snowflake標準のWeb UI）、SQLが苦手な場合や視覚的に分析したい場合 = Tableau経由でSnowflake上のデータを参照していただく予定です。 旧基盤で採用していたRedashは、データ分析基盤以外の用途でも幅広く利用されている&別部署が管理しているといった事情を踏まえ、新基盤では採用しない方針です。 また、旧基盤では所謂データモデリング手法が特に採用されておらず、テーブルの構造や関係性が非常に把握し難い状況に陥っていたのですが、新基盤ではData Vault ModelingとDimensional Modelingを採用し、データモデリングの改善を図っています。 データモデリング手法については下記の記事に詳しく書かれていますので、ぜひご覧下さい！ engineers.safie.link 最後に 今回はセーフィーにおけるデータ分析基盤の歴史や背景、組織やアーキテクチャについて紹介しました。 新基盤の全貌やリニューアルPJの取り組み内容については詳しく紹介できなかったため、また改めて別の記事で紹介したいと思います。 We are hiring! 余談ですが、データ分析基盤グループは慢性的な人手不足でして…一緒に働いてくれる仲間を大募集中です！ セーフィーのデバイスやアプリケーションからは1日あたり数十億件のログが発生し、データ量は線形的に増加しています。 このような超ビッグデータを効率的に処理し、ビジネスの意思決定に繋げるための仕組みを一緒に作ってみませんか？ ご興味のある方は セーフィー採用サイト を覗いてみて下さい。 皆様のご応募、心よりお待ちしております！

こんにちは。サーバサイドエンジニアの村田です。 今回は、セーフィーのエンジニアがどんな開発環境を使っているのかアンケートをとってみたので、その結果をみなさんに共有したいと思います。 セーフィーにはどんなエンジニアがいるの？ アンケート結果 使用しているエディタ・IDEは？ 使用しているキーボードは？ 使用しているマウス・トラックパッドは？ まとめ セーフィーにはどんなエンジニアがいるの？ 今回はセーフィーの全エンジニアを対象にアンケートを取りました。セーフィーには様々な領域を担当するエンジニアが在籍しており、まとめると以下の職種のエンジニアがいます。 フロントエンドエンジニア サーバサイドエンジニア インフラエンジニア/SRE AI/画像処理エンジニア 組み込みソフトウェアエンジニア iOS/Android エンジニア 業務システムエンジニア QAエンジニア データエンジニア 各領域のエンジニアがどんな仕事をしているかは以下の記事で詳しく紹介しているので、こちらもぜひ読んでいただけると嬉しいです！ engineers.safie.link アンケート結果 今回は開発環境として、使用しているエディタ・IDE、キーボード、マウスの3項目についてアンケートを取りました。それでは早速結果をみていきましょう！ 使用しているエディタ・IDEは？ VS Codeが半数を超える人気となっていました。選択理由としては「高機能で使いやすい」「プラグインが豊富」「Web開発では標準となっている」といった意見が挙げられていました。 続いて、モバイルアプリ開発で必須となっている Xcode, Android Studio が多く、次いでVim が一定の支持を集めました。Vimの選択理由としては「軽量」「高速で行の入れ替えが可能なため、思考の整理に使える」といった意見が挙げられていました。 少数派としては Intellij IDEAやPyCharmといったJetBrains系のIDEや、Emacs, Atom, Sublime Text, 秀丸エディタを使っている方もいました。 こちらの結果は、私自分の実感ともほぼ一致していました。普段ペアプログラミングなどで同僚がエディタを使っている様子を見る機会がありますが、やはりVS Codeを使っている人が多く、人気が高い印象を持っていました。 使用しているキーボードは？ ノートPC純正のキーボードを使っている方が半分以上を占めている結果となりました。選択理由としては、「特に不便がない」「キーボードを持ち歩くのが面倒」といった意見が目立ちました。 それに次いで、 HHKBとRealforce が多くみられました。どちらのキーボードも「打鍵感が心地よい」「コンパクトさがよい」といった意見が多く挙げられていました。 少数派としては、Keychron、ELECOM スリムキーボード、ARCHISS ProgresTouch RETRO TKL、Mistel、また自作キーボードを使っているという方もいらっしゃいました。いずれのキーボードも打鍵感や見た目、キー配置、またトラックポイントの有無といったところが、こだわりポイントとして挙げられていました。 ノートPC純正のキーボードが一番多いというのは意外でした。エンジニアは結構 HHKBや自作キーボードなど、キーボードに高いこだわりを持っている方が多い印象がありましたが、セーフィーのエンジニアの中では少数派のようです。 使用しているマウス・トラックパッドは？ ノートPCのトラックパッドが一番多く、続いて 会社支給のLogicoolのワイヤレスマウスを使っている方 が多い結果となりました。マウス・トラックパッドに関しては特にこだわりがないという意見が多数でした。 それ以外のものを使っている方の選択理由としては、トラックボールの有無や静音性、また腱鞘炎対策などの観点が挙げられていました。 まとめ いかがでしたでしょうか？ 開発環境に関するアンケートの結果をご紹介しましたが、人それぞれ大事にしている観点が違うのが興味深いですね。今回はエディタ、キーボード、マウスの3つを対象に調査を行いましたが、他の項目についても調査してみると面白い結果が得られるかもしれません。ターミナルやシェル、リモートワークで使うようになったマイクなどもこだわりがある方が多いと思いますので、機会があればぜひ調査してみたいと思います。 最後まで読んでいただき、ありがとうございました！

企画部の居内です。Safie APIのプロジェクトの運用を担当しています。 Safie APIはβ版として提供しておりましたが、先ごろ正式版がリリースされ、現在多くのお客さまにご利用いただいております。 今回は、非エンジニアの方でも気軽にSafie APIを体験していただく機会を提供できればと思い、本職のエンジニアの方には簡単な内容ではありますが、Google App Script(GAS)を使ってSafie APIを利用する方法を、テックブログを通してご紹介できればと思っております。 この記事では、Google App Script(GAS)でSafie APIを実行し、指定したカメラの静止画をSlackへ投稿する方法をお伝えいたします。 大まかな流れ 実際の操作手順 1.Safie Developersにログインし、APIキーのアプリケーションを作成する 2.Safie Viewerにログイン後、今回APIを利用したいカメラに対しDeveloper連携を行う 3.Slack APIを開きbotを作成、botのトークンを取得する 4.Google App Scriptの新しいプロジェクトを作成する 5.Google App Scriptのプロジェクト内にプロパティを設定する 6.Google App Scriptにコードを記載し、実行を行う 最後に 大まかな流れ コードだけ知りたい方もいらっしゃるかと思いますので、先に記載します。 var API_KEY = PropertiesService.getScriptProperties().getProperty( 'API_KEY' ) var SLACK_TOKEN = PropertiesService.getScriptProperties().getProperty( 'SLACK_TOKEN' ) function postImageToSlack() { var safieApiUrl = 'https://openapi.safie.link/v2/devices/[device_id]/image' var params = { 'method' : 'GET' , 'content_type' : 'application/x-www-form-urlencoded' , 'headers' : { 'Safie-API-Key' : API_KEY, } , } var apiResponse = UrlFetchApp.fetch(safieApiUrl, params) Logger.log(apiResponse.getResponseCode()); var imageBlob = apiResponse.getBlob(); // ここからSlack投稿 var slackUrl = 'https://slack.com/api/files.upload' var payload = { 'channels' : '[channel名]' , 'file' : imageBlob, 'filename' : "image.jpg" } var options = { 'method' : 'post' , 'payload' : payload, 'content_type' : 'multipart/form-data' , 'headers' : { Authorization: "Bearer " + SLACK_TOKEN } } var slackResponce = UrlFetchApp.fetch(slackUrl,options) Logger.log(slackResponce) } ※[device_id]と[channel名]は必要なものを記載ください 実際の大まかな流れは以下の通りです。 Safie Developersにログインし、APIキーのアプリケーションを作成する Safie Viewerにログイン後、今回APIを利用したいカメラに対しDeveloper連携を行う Slack APIを開きbotを作成、botのトークンを取得する Google App Scriptに新しいプロジェクトを作成する Google App Scriptのプロジェクト内にプロパティを設定する Google App Scriptにコードを記載し、実行を行う 実際の操作手順 1.Safie Developersにログインし、APIキーのアプリケーションを作成する まず、カメラを契約中のメールアドレスでSafie Developersにログインしてください。 ログイン後、右上に表示される「管理ツール」をクリックし、管理ツール画面を開きます。 画面に表示された「APIキー認証アプリケーション新規作成」をクリックし、画面の表示に従い入力を進めてください。 今回、カメラを契約中のメールアドレスでログインしていますので、プランをトライアル、利用サービスはDevices v2を選択ください。 アプリケーション作成後は、画面の表示に従い、APIキー新規発行を実行ください。 2.Safie Viewerにログイン後、今回APIを利用したいカメラに対しDeveloper連携を行う カメラを契約したアカウントでSafie Viewerにログインすると、左メニューにユーザー設定の項目があるのでクリックください。表示された画面の「Developers連携」をクリックし、続けて「アプリケーションを追加」を押下、1の手順で作成したAPIキーを「アプリケーションコード」の欄に入力し、連携するカメラを選択ください。 連携後、Safie Developersに再度ログインを行い、1の手順で作成したアプリケーションの「連携デバイス管理」からこの作業でDevelopers連携申請を行ったカメラの承認作業を行ってください。 注意頂きたいこととして、Safie ViewerからDeveloper連携を行えるのはカメラを契約したアカウントでログインしたときのみです。シェアユーザーでは連携を行えません。 3.Slack APIを開きbotを作成、botのトークンを取得する 今回新たにSlackbotを作成する際は、下記を参考に作成ください。 Create New App > From scratchを選択し、アプリ名と利用するワークスペースを選択する Permissions > Bot Token Scope > files:writeで権限を許可する Install to Workspaceで今回利用するワークスペースにアプリをインストールする Permissions内のBot User OAuth Tokenをコピーする カメラの静止画を送付したいSlackチャンネルに、この手順で作成したSlackアプリをインストールする 4.Google App Scriptの新しいプロジェクトを作成する Google App Scriptの画面を開いて、左上のボタンから新しいプロジェクトを作成します 5.Google App Scriptのプロジェクト内にプロパティを設定する 左メニューのプロジェクトの設定を選択し、スクリプト プロパティに下記を作成ください。 プロパティ 値 API_KEY 手順1で取得したAPIキー SLACK_TOKEN 手順3で取得したBot User OAuth Token 6.Google App Scriptにコードを記載し、実行を行う エディタに戻り、下記を実行ください。実行すると手順2で連携したカメラの情報が表示されるので、表示されたdevice_id=の後ろに記載された文字列をコピーしてください。 var API_KEY = PropertiesService.getScriptProperties().getProperty( 'API_KEY' ) function mydevices() { var safieApiUrl = 'https://openapi.safie.link/v2/devices' var params = { 'method' : 'GET' , 'content_type' : 'application/x-www-form-urlencoded' , 'headers' : { 'Safie-API-Key' : API_KEY, } , } var response = UrlFetchApp.fetch(safieApiUrl, params) var json = JSON.parse(response) Logger.log(json.list); } エディタの内容を下記に書き換え、[device_id]の箇所に先ほどコピーしたdevice_idを、[channel名]の箇所に、手順3でインストールを行ったチャンネル名を記載ください。 実行すると、指定したSlackチャンネルにカメラの静止画が投稿されます。 var API_KEY = PropertiesService.getScriptProperties().getProperty( 'API_KEY' ) var SLACK_TOKEN = PropertiesService.getScriptProperties().getProperty( 'SLACK_TOKEN' ) function postImageToSlack() { var safieApiUrl = 'https://openapi.safie.link/v2/devices/[device_id]/image' var params = { 'method' : 'GET' , 'content_type' : 'application/x-www-form-urlencoded' , 'headers' : { 'Safie-API-Key' : API_KEY, } , } var apiResponse = UrlFetchApp.fetch(safieApiUrl, params) Logger.log(apiResponse.getResponseCode()); var imageBlob = apiResponse.getBlob(); // ここからSlack投稿 var slackUrl = 'https://slack.com/api/files.upload' var payload = { 'channels' : '[channel名]' , 'file' : imageBlob, 'filename' : "image.jpg" } var options = { 'method' : 'post' , 'payload' : payload, 'content_type' : 'multipart/form-data' , 'headers' : { Authorization: "Bearer " + SLACK_TOKEN } } var slackResponce = UrlFetchApp.fetch(slackUrl,options) Logger.log(slackResponce) } 最後に Google App Scriptはトリガーから、時間指定でscriptの実行が可能ですので、毎週何曜日に実行などの定期実行が可能になります。 例えば弊社であれば、郵便や宅配便が届いた際には部署ごとのラックに置いておりますので、宅配便などの受付スペースからラックまでを画角に収めれば、Slackに投稿される画像だけで配送物が届いているかの確認も可能です。 いかがでしたでしょうか。 単純な静止画の連携だけでも、総務の方から、店舗の管理、また映像の共有は行わない従業員間の連携などが可能になるものだと思っています。防犯用途以外でも、APIによりカメラの利用用途が広がるかと思いますのでぜひご利用いただければ幸いです。