はてなブックマーク

こんにちは、株式会社カミナシのエンジニア @imu です。 はじめに 突然ですがファイルアップロードに失敗することってありますよね？ カミナシレポートのプロダクトはオフライン機能を実装しており、オフラインで記録したデータをアップロードしたときに失敗するケースが、特定の条件下で起きるようになりました。そのため一部のお客様のデータが端末に残り続け、なんとかしてほしいとサポート依頼が発生しておりました。 私自身、半年ぶりにカミナシレポートのプロダクトに戻ってきたばかりで、リハビリのissueとなりました(笑) 今回は問題を解決するまでの仮説や、調査から解決までお話したいと思います！ ※オフライン対応をなぜしているのかは以前書いたこちらを参照いただければと思います。 kaminashi-developer.hatenablog.jp 結論 何が問題だったか結論だけ知りたい方はこちらへ 開発環境 g

こんにちは、株式会社カミナシのエンジニア @imu です。 はじめに 私はインフラに対して苦手意識（詳しく知らない）があり、issueに対して率先して改善しようとしませんでした。このまま深く触ることはないかなと思っていた矢先、新規プロダクトのインフラ構築をお願いされました。 めちゃくちゃ不安しかなかったのですが、最初から構築する機会なんて滅多にないのでチャレンジすることに！ （内心はやりたくないなと思ったけど…） 私自身は知らない領域にチャレンジすることは好きなので、楽しんでやろうと思いました。 苦手意識がある私がどのように、リリースできる環境を構築したか共有できればと思います！ 注意）本内容はα版という位置づけで構築しており、正式リリース時には都度変更をしていきます。 Day 1（技術選定） 弊社はカミナシレポートというサービスを提供しています。このプロダクトはAWSを利用しており、その

はじめに この記事はGo3 Advent Calendar 2020の11日目の記事です。gqlgenを使ってGraphQL Subscriptionsを実装する方法とハマったポイントを紹介したいと思います。 利用技術 gqlgen GraphQL SchemaからGoのコードを出力するコードファーストなライブラリ Redis Pub/Sub Redisでクライアント間通信を行う echo Webフレームワーク 今回はドメイン3層とgqlgenの生成物を合わせた構成にしています。 詳しくは先日の記事にまとめています。 実装した内容はGitHubに公開しました。 ※記事の中のコードはわかりやすさを重視するため今回の内容に関わらない部分は省略しています github.com Docker環境の構築 docker-compose.yaml にRedisコンテナを追加します。 version: '

初めまして。株式会社カミナシでPMをやっているGTOです。 先日6/30に、マネーフォワードさんと合同で勉強会を実施しました！当日お集まりいただいた皆様、ありがとうございます。 登壇者として出席させていただき、「PMの自分が如何にユーザーの声をエンジニアの共通言語へ変えたか」というタイトルで発表しました。 カミナシでも、紙というツールを介して長年使われ続けたそのフローをいかにプロダクトで解決していくのかは大きなテーマの一つです。 そんな中でユーザーさんへの価値をどう作り、またプロダクトチームへどう伝えていったのかを話してきました。 当日の登壇でお話し出来なかった部分もあるので、一部掘り下げてこの記事内で紹介します！ 登壇資料 登壇の概要 お客さんへの価値をどのように見つけ、チームと対話をし伝えるのかは最近の自分の悩みごとでした。 お客さんへの価値をどのように見つけ => 仮説検証 チームと

カミナシの浦岡です。弊社が開発している「カミナシ」には、 以下のような用途を想定して、手書きメモ機能を組み込んでいます。 カメラで撮影した写真の上に矢印マークやメモを追加したい キーボード入力に不慣れなユーザーでも素早く簡単にメモを録りたい 手書きで入力できる署名欄 ちょっとした機能ですが、弊社アプリのように現場作業で使われるケースにおいて何かと重宝されている機能です。 今回、react-native-svgを使った実装について紹介します。 手書き線の表現 手書きされた一筆、一筆をsvgのpathタグを使用して表現することにします。 pathタグはd属性に指定された座標群の情報を基に線を描画してくれます。 https://developer.mozilla.org/ja/docs/Web/SVG/Attribute/d 例えば、以下のように３点の座標を指定すると、それらを結ぶ線ができあがり

こんにちは、カミナシの@tomiです。 前回は、Expo ReactNativeにStorybookの導入を行いました。 今回は、StoryShotsを入れてみたいと思います。 StoryShotsとは、自動スナップショットテストができるStorybookのアドオンです。 内部的には、JestのSnapshotが動作し、UI が予期せず変更されていないかを確かめるツールです。 なぜ入れてみようと思ったかというと、ただStorybookを導入しただけでは、メンテナンスされずに腐ってしまうのが目に見えているので、楽に忘れることなくstoryの更新ができる方法ないかなと調べていると、よくStoryShotsを目にしたので試してみることにしました。 StoryShotsの実際の動作を見て、今後の運用に必要かどういったときに役に立ちそうかを体験したいと思います。 StoryShotsを導入する St

エンジニアの@nasum(id:Tomato-360)です。 最近テックリードに任命されました。エンジニアのマネジメントキャリアパスの第一歩といった感じです。 カミナシではテックリード職ができたのは初めてでまだ職務に関しては曖昧です。テックリード職に任命された自分はそこを固めていくことも期待されていると思っています。 そこで今回は直近やっている仕事を通じてカミナシにおけるテックリードの業務を紹介していこうと思います。 本当はRaspberry Piでk8sクラスタを作る続きを書こうと思いましたがうっかり間に合いませんでした。 テックリードとは そもそもテックリードとはどういう存在なのでしょうか。最近読み始めてかなり名著だと感じている「エンジニアのためのマネジメントキャリアパス」で引用されている「Talking with Tech Leads」を孫引きすると。 [テックリードとは]（ソフトウ

カミナシのエンジニア@Takuです。 先日エンジニアチームにてABD(アクティブ・ブック・ダイアローグ)という形式で輪読会を開催したところ、とても良かったので共有させていただこうと思います。 はじめに ABD(アクティブ・ブック・ダイアローグ)とは 私もこの度初めて知りましたので簡単にご紹介 読書手法の1つでして、やり方を簡単に書くと、 1. 1冊の本を参加者で分担して読んでまとめる 2. まとめた内容を発表 3. 読んだ・発表を聞いた際に得た気づきを共有・対話する といったものとなります。 公式サイトの説明は以下のようにありましたので、こらも一読いただくとよりイメージがつきやすいかと思います。 アクティブ・ブック・ダイアローグ®は、読書が苦手な人も、本が大好きな人も、短時間で読みたい本を読むことができる全く新しい読書手法です。 １冊の本を分担して読んでまとめる、発表・共有化する、気づきを

こんにちは、カミナシの@tomiです。 本日は、ExpoでのStorybookの導入について書いていきます。 StorybookのサイトにReactNativeでの導入方法が記載されていますが、それ通りだけでは上手く動かなかったので、ExpoでStorybookを使いたい人の参考になればと思います。 なぜStorybookを入れようと思ったのか 現在カミナシのデザインチームでは、ブランドガイドラインを固めてくれています。それを基に新たに0からデザインシステムを作り、現行デザインをリプレイスする予定です。 デザインシステムができてからエンジニアが動き出しては、時間がなくて殴り書きのコードができあがってしまうのが、予想できます。。 せっかくデザインシステムを作ったのに、それが守られなかったりデザインシステムに振り回されては本末転倒なので、今のうちから準備しておこうというのと、Storybook

カミナシの浦岡です。 この記事ではreact-three-fiberというライブラリを使って、reactで3Dアプリケーションを作成してみます。 github.com このライブラリを使うことでアプリの開発者からすると、 通常のreactアプリ（DOMにレンダリングするもの）を作るのと同じ実装方法で、3Dレンダリングするアプリケーションを作成することができます。 とは言え、 ３Dの基本的な用語を知らないと思うように実装を進められないと思います。今回簡単なアプリの作成を通して３Dの基本に入門しましょう。 これから作る物 Reactの公式チュートリアル「三目並べゲーム (tic-tac-toe) 」を３D化することをゴールにします。 gyazo.com 最終完成形 さっそく、完成形は以下になります。 codesandbox.io Reactのチュートリアルと同じく、大きく以下3つのコンポーネン

株式会社カミナシのエンジニア（まぁ当たり前か）の@nasum(id:Tomato-360)です。 以前個人でやってた活動で、Raspberry Pi 4でKubernetesクラスタを立てました。そのときは3台で、master 1台 worker 2台で構築しました。このときはKubernetesクラスタをただ動かしているだけで満足していました。 今回はより踏み込んで、masterを3台 workerも3台にして、Kubernetesをアップデートするときサービスを止めずに対応できる本格的なクラスタにチャレンジしていこうと思います。 Raspberry Piクラスタの組み立て まずはハードウェアの選定です。選定したハードウェアは以下です サーバー Raspberry Pi 3 3台 電源 Anker PowerPort Speed4 1台 hub BUFFALO LSW6-GT-5EPL

概要 カミナシはこれまでドキュメント管理ツールにScrapboxを使っていました。 手軽にかけ、リアルタイムに複数人で編集できるのでチームで議論しやすかったです。一方でドキュメント管理ツール以外に使ってるツールが増えたり、ストックしたい情報が探しにくくなっていたので、全社的にNotionを利用することにしました。 今回はドキュメントツールの移行に伴ってScrapboxにあったページを全てNotionにコピーした流れを紹介していきます。 ScrapboxのデータをMarkdownに整形する Scrapboxはプロジェクトの設定ページからJSONファイルとしてエクスポートできます。 JSONファイルは1行ずつ配列の要素になっています。 { "name": "kaminashi", "displayName": "kaminashi", "exported": 1616557445, "page

こんにちは、株式会社カミナシのエンジニア @Taku です。 前回、GolangでLambda Authorizer用関数をやってみましたが、 Golangはコードエディタが使えず、テストするには毎回zipで固めてアップするという一手間がありました。 kaminashi-developer.hatenablog.jp そんな中、先日「AWS SAMを使うとAPI Gateway等とまとめて作成できるので便利だよ！」という話を伺ったので今回使ってみることとしました。 AWS SAMとは aws.amazon.com YAMLで記載したテンプレートを利用して、CLIにてサーバーレスのアプリケーションを構築できるオープンソースフレームワークです。 例として、以下のようなYAMLを作成することでサーバーレスのアプリケーションを構築できます。 AWSTemplateFormatVersion: '2

初めまして。株式会社カミナシPMの@gtongy1です。 先日行われた BtoB Startup Engineers Meetup 〜BtoB SaaSを支えるインフラ〜 - connpass にて「失敗しても前に倒れる。高速検証のための壊しやすいインフラ」というタイトルで登壇してきました。 登壇資料 登壇内容 スタートアップで事業を成長させていく過程では失敗も数多くあり、その中でも前に倒れてインフラを組み立てていく必要があります。 その様子はまさに飛行機を飛び降りながらインフラを組み立てていく感覚と近く、増えていくユーザーに迷惑かけずに形を作っていくのかがとても重要です。 その中で「壊しやすさ」は一つの目安であり、こんなインフラを作っていくのか。 これが一つ堅牢なインフラ構築の鍵なんじゃないか？と考えています。 そこで、トラブルと解決事例を交えながら壊しやすいインフラを如何に作ってきたの

カミナシの浦岡です。 みなさん、ポートフォリオの成果物や学習目的でプログラムを作る場合に 課題や題材を設定していますか？ これの有無で、最初の一歩を踏み出す動機づけ、モチベーションの持続に影響します。 この記事では、以下のような人に向けてネタ出しのTipsを書きます。 最新技術に興味はあるけど、解きたい課題はない 技術は持ってるけどアウトプットする題材が思いつかない 何か作り始めてもモチベーションが続かず頓挫する 「掛け合わせ」ではじめてみる 技術に興味があっても、それを自分ごとにできないと、最初の一歩を踏み出す動機にはなりにくいと思います。 例えば、私はフロント好きなエンジニアなので、たまにwebデザイン関連のページを見るのですが、そこで「Parallax scroll」や「3D Visual」が2021年のトレンドだよと言われても、 「面白そうだけど、うちはtoBだし業務で使うことはな

こんにちは、株式会社カミナシのエンジニア @imuです。 はじめに みなさんのプロダクトでテスト書いてますか？ 『カミナシ』はオフライン機能を提供しており、ローカルデータベースはSQLite（expo-sqlite）を利用しています。 オフライン機能って何？という話は、こちらの記事をご参照ください。 kaminashi-developer.hatenablog.jp SQLiteに保存されるデータは『カミナシ』にとって重要なデータが保存されています。 そのため万が一にでもデータを欠損してはいけないため、テストを充実させていきたいと思っています。 まずはCRUD処理を簡単に書いてみようと思ったのですが、SQLite（expo-sqlite）+ TypeORMで接続のテストが書けずに困った話をしようと思います。（これを解決出来たらCRUD処理を書きたい） もし解決策を知っている方がいたら教えて

初めまして。株式会社カミナシPMの@gtongy1です。 みなさんはNewSQLをご存知ですか？ 強い整合性を持つ分散型のSQLデータベースサービスのことをNewSQLと呼びます。 RDBMSではなし得なかった分散アーキテクチャを、またNoSQLではなし得なかった強い整合性をいいとこ取りした新しいSQLデータベースサービスです。 なんかとても理想的な仕組みに見えますね。この裏にはどのような知識が詰め込まれているのでしょうか。 今回はそんなNewSQLを支える仕組みを一緒に紐解いていきましょう！ NewSQLが乗り越えた壁 どんな仕組みが動いているのか、の前にNewSQLはこのSQLデータベース界へ何を投げ込んだのでしょうか。 NewSQLには以下のような特徴があります。 SQL-Likeなクエリ言語のサポート 強い整合性 ACIDサポートのトランザクション NewSQLの有名所であるCoc

こんにちは、カミナシの@tomiです。 開発環境で送信したメールを確認するためにMailHogを導入してみました。 MailHogとは送信したメールをブラウザで確認できるツールです。 導入のきっかけ 以前、Ruby on Railsで開発している際に、letter_openerという送信したメールをブラウザで確認できるgemを使っていて、メール周りの開発が捗りました。 Golangでもメールが送信されたかを確認する方法を探してたらMailHogというツールを見つけたので、とりあえず導入してみました。（勝手にプルリクを出した） 導入方法 導入はとても簡単で、 公開されているDockerイメージでコンテナを作成する アプリ側のメール送信先のSMTPサーバーを変更する この2点だけです。 Dockerコンテナの作成 Docker Hubに公開されているイメージを使います https://hub.

初めに 初めまして。2021年3月より株式会社カミナシにジョインすることとなりました、エンジニアの@Takuと申します。 業務とは直接関係ないのですが、API Gateway Lambda オーソライザーとFirebaseAuthを組み合わせた認証をやってみたので記載させていただきます。 概要 以下のチュートリアルを元に Amazon API Gateway Lambda オーソライザーを利用した認証機能を作成しました。 docs.aws.amazon.com Amazon API Gateway Lambda オーソライザーを利用することで、 認証・認可部分をAPI Gateway側で共通化できるため、 マイクロサービス化(認証・認可と業務の責務分け) サービスを提供するサーバーの負荷軽減 などのメリットが見込めるのではと考えております。 その際チュートリアルから変更した点として、 OA

概要 FirestoreはNoSQLの中でもデータ構造に特徴があります。 本記事では私自身が実際に設計したデータ構造がサブコレクションでどう変わったかをみていくことで、サブコレクションでできることを書いていきたいと思います。 開発環境 Node (14.15.4) Firebase JavaScript SDK (8.2.4) Firestoreについて Googleが提供しているNoSQLのマネージドサービスです。 他のNoSQLと比較してWeb, Mobileからローカルデータベースのように利用できることやデフォルトで単一フィールドのインデックスが作成されていることが特徴です。 データ構造 今回はチャット機能のデータを考えてみます。 登場人物は以下になります。 ユーザー チャットルーム 投稿（コメント、画像を含む） チャットルームには2人以上のユーザーが参加することができます。 チャッ

こんにちは、カミナシの@tomiです。 React Native + Expoで開発する上で、React Native Debuggerが自分にとって必須のものとなっています。 このツールを使って日々どういった感じで開発しているかをまとめました。 他にもReactotronやReact Native Toolsなどのデバッグツールもありますが、私は様々な情報をまとめて確認できるReact Native Debuggerに落ち着きました。 スタイルの検証やpropsのデバッグ、Reduxのstate確認にactionの発火確認などができ、開発する上で欲しい要素全てが揃っています。 Expoの標準デバッガーへの不満 Expoに標準で搭載されているElement Inspectorでは、選択した要素のスタイルの確認はできますが、プロパティの変更をしたり、コンポーネントが持っているstateやpr

こんにちは、デザインエンジニアのショウです。 突然ですが、UI/UX デザインにおいて、「楽観的な更新」という言葉を聞いたことがありますか？あまり聞いたことがなくても、実は日常にたくさん存在しています。 例えば、 twitter や facebook のいいねボタン。いいねをタップした直後に色がつくのですが、実はサーバーへのリクエスト送信と UI 上のいいねの色付きが同時に発生しています。つまりサーバーからの通信結果待たずに UI を更新しています。 他に、trello でタスクカードを隣の列に移動したり、iMessage や Facebook メッセンジャーでのメッセージの送信、Kindle アプリで途中までしかダウンロード出来てない本が読めることなども楽観的な更新です。 図：楽観的な更新を採用しない時と採用した時のメッセージ送信のUI （引用元） 楽観的な更新の意義 早くも 1968

こんにちは、株式会社カミナシのエンジニア @imuです。 はじめに MicrosoftExcelファイル（以後、Excelという）は、切っても切れない関係ですよね。 OpenOffice、Google スプレッドシート、Numbers は、いずれもExcelとの互換性を保っています。 互換性を保っているということは、脱Excelが非常に難しくユーザーから互換機能を求められていると思います。 サービスを提供する側としても、Excelをサポートをしないと利用ユーザーの体験が悪くなり、最悪の場合はチャーンする可能性もあります。 『カミナシ』はアプリで作成したデータをExcelに出力する機能を提供しています。その際に利用したパッケージの紹介と、簡単な利用方法についてまとめてみます！ 開発環境 go (1.14.2) Excelizeとは Excelizeは、純粋なGoで記述されたライブラリです。

こんにちは、カミナシの浦岡です。 最近、弊社のメンバーとしてUIデザイナーが新たに加わり、プロダクトのUI改善を進めています。 以前は、AntDesignなどUIライブラリーのコンポーネントをそのままプロダクトで使用する機会が多かったのですが、UI改善を行う上で、UIライブラリーそのままでは要件を満たすことが困難なケースも出てきました。 その結果、独自のReactコンポーネントを実装する機会が増えているのですが、 この記事では、その独自コンポーネントを「ヌルヌル動く」仕上がりにするために気をつけている点を架空の題材を使って書きます。 題材 今回、「空を舞うカレンダー」（ペルソナ５風!?）のUIがデザイナーから提示されたと仮定して進めます。 極端な題材ですが、UIライブラリのカレンダーをベースには実現できそうにないので、独自コンポーネントとして作りましょう！ 先に、ヌルヌル動かす上で気をつけ

はじめに 初めまして。株式会社カミナシPMの@gtongy1です。 負荷量の増加。どの企業にとっても悩みの種じゃないでしょうか？ そんな時にこそ、負荷シナリオテストツールを導入したい！となると、負荷シナリオテストだとLocustとかが有名所。 ただPythonを知らないメンバーに、一からチームへ布教するのってなかなか腰が重くなってしまう。 せっかくならフロント中心のメンバーでも、自分が投げるリクエストの負荷量ってどんな感じだろうとか、気になる状態にはしておきたい。 負荷問題はインフラでも、サーバーでも、フロントでもなく全体の横断的な問題です。 どこか分からないからこそ、問題を特定する人は多岐にわたるはず。 そこでフロントもサーバーも何かと馴染みの深いJS、強いてはTypeScriptで記述出来るいい感じの負荷テストツールがないかと探して導入してみました。 導入してみて、機能もリッチだしグラ

これはGo 4 Advent Calendar 2020 18日目の記事です こんにちは株式会社カミナシのエンジニアの浦岡です。 個人的に、Goが一番輝きを放つのはworkflowの自動化だと思っています。 k8sなど自動化分野でGoはなくてはならない存在ですよね！ ただ、そのworkflow、テキストで記述するか、画面があってもフローチャートのような物が多く、どこか味けなくないでしょうか？ 見た目大事！！ 少しジャンルは違いますが、こちらIntegromatというiPaaSのworkflow画面です。なんとも個性的じゃないですか？幾何学的なデザインが自動化魂に火をつけてくれます🔥🔥 「よし、Workflow作るぞ！」と思い立ったユーザーを盛り立ててくれる演出があってもいいのではないでしょうか？ 今回モックレベル（見た目だけ）ですが、それっぽい物ができるかチャレンジします！ ※GoのA

はじめに この記事はGo 4 Advent Calendar 2020 17日目の記事です。 こんにちは、株式会社カミナシのエンジニア @imuです。 早速ですが、S3にあるファイルをバイナリデータで取得してレスポンスに含めたいと思ったことはありませんか？ 『カミナシ』ではバッチ処理でファイルを作成してS3にファイルをアップロードした後、Client側でファイルをダウンロードする機能があります。 よくある処理はClient側からAWSにアクセスをしてファイルをダウンロードする方法ですが、今回はAPI側を経由してファイルをダウンロードする方法について書きたいと思います！ ファイルをバイナリデータとしてレスポンスに含めたいがうまくいかず、困っている方の参考になれば幸いです！ この記事で分かること API側でS3ファイルをダウンロードせずに取得する方法 取得したファイルをレスポンスに含める方法（

初めまして。株式会社カミナシPMの@gtongy1です。 Dockerというツール。SRE, Backend, Frontendどの領域のエンジニアも馴染みのあるツールではないでしょうか。 コンテナを利用することにより、インフラの環境を一つの空間に梱包し、その内部で柔軟に様々な環境を作ることが出来ます。 コンテナの実体とはなんなのでしょう？ 叡智が詰め込まれたそんな一つの宝箱のように見えます。 「 コンテナ作ってみたくなりませんか？ 」 僕と同じように知的好奇心をくすぐられたそこのあなた！コンテナ沼の一歩目を一緒に踏み出してみましょう！ 検証環境 Ubuntu 18.04 golang 1.15 Dockerの機能おさらい docs.docker.com まず、ドキュメント内を読み進めてDockerに対する知識を整理します。 DockerはDocker daemonを基幹とし、その呼び出し