こんにちは、 @mugi_uno です。 Misocaがサービスローンチされたのは 2011年です。実は2021年は10年目ということで何気に節目の年だったりします。 10年もあれば世の中的にもさまざまな技術変遷があり、Misocaもその波に乗っていけるよう、日々改善を繰り返してきました。 というわけで今回は、私自身がフロントエンド側の作業を多くやってきたこともあり「この10年間でMisocaのアーキテクチャがどのように変わってきたのか？」をフロントエンド側に焦点を絞って振り返ってみたいと思います。 ※ 意思決定に関する資料が無いものも存在するため、一部は情報に基づく推察になる点をご承知おきください。 年表 いきなりですが、ざっくり年表を書いてみました。 上部の黄色いラインは、フロントエンドに大きい影響を与えたMisocaの機能です。 これをもとに、サービスローンチから順を追って見てみます

こんにちは、@mugi_uno です。気付いたら弥生社員になってました！！ プロジェクトの立ち上げはむずかしい Misocaチームで何かしらの課題に取り組む場合、基本的にはプロジェクト化して進めていきます。 その際、まずはインセプションデッキを作成して「目的やゴールは何か」「何をして、何をしないか」といったことを明文化し、メンバーで認識を揃える作業をします。 ですが、現実的にはそれ自体が難しいケースが存在します。 何から手を付ければいいのかわかりません！ たとえば 多種多様な立場の人が参加するプロジェクトを始めるが、メンバー個々人が何を重要視しているかを互いに知らない ○○について効率化したいけど、具体的に何が課題で次に何をすべきかが誰もハッキリとは見えていない 膨大なタスクが存在していて、どういった判断軸で優先順位をつけていけばいいのかがわからない みたいな経験はないでしょうか。 このよ

2019年1月〜5月上旬の間、『入門 監視』という本の社内読書会を週一で開催しました。 www.oreilly.co.jp 今回は、社内読書会開催に至ったきっかけや実際の進め方、社内読書会を通じての学びやその後のアクションについてお話したいと思います。 社内読書会をはじめたきっかけ この本が予約開始になった時に、目次を読んで内容に興味を持ったことと、社内でも展開できれば今以上に開発チームとして監視についての十分な知識や体制が作れるかも、と思ったのがきっかけです。 任意参加にして、毎週金曜の18時から一時間程度で読書会をやりましょうと社内で参加者を募り、本が発売したその週から社内読書会を開催しました。 社内で入門監視読書会始めた— MiZU (@mizukmb) 2019年1月18日 社内読書会の進め方 ざっくり、以下の流れで進めました。 本を黙読する (35分くらい) 毎回、1章ずつ読み進

こんにちは、@mugi_unoです。 GWはリスと遊んできました。たのしかったです。 さて、長きに渡ってコツコツと手を入れてきたMisocaのフロントエンドですが、 先日、新たに大きな改善を行いました。 というわけで、令和一発目のエントリーは MisocaのフロントエンドにTypeScriptを導入したお話です。 🤔なぜTypeScriptを？ 金額処理触るの怖すぎ問題 Misocaは請求書の発行・管理サービスという性質上、各所で金額に関する処理があります。 そして、最近はさまざまな事情により修正が頻繁に行われていました。 以前のエントリでもご紹介したレガシーコードのリファクタリングなども該当します。 tech.misoca.jp エンジニアの方なら「おおぅ...」となりそうですが、金額を触る処理というのは怖いものです。 そしてフロントエンドが絡んでくると「ここは文字列？数値？」といった

こんにちは、デザイナーのとりみずです。 最近Misocaでは全社的にデザインツールにFigmaを導入しました。 Misocaではリモートの社員も多く、モバイルアプリを開発しているチームは 東京…デザイナー 名古屋…サーバサイドエンジニア 京都…デザイナー 鳥取…Androidエンジニア 福岡…iOSエンジニア という日本各地の集まりになっています。 このメンバーで、とある価値仮説に対して「俺の考える最強のアイデアぶつけあい大会」をすることになりました。 そこでFigmaを活用したところ、リモートでのアイデア発散会にとても向いていたので、その様子を紹介したいと思います。 当日までの準備 課題とターゲットをすり合わせを行い、当日のアイデア発散会までの準備に下記を宿題としました。 アイデア発散会の日までに各自手書きでアイデアイメージをA1の紙に書く 匿名性を考慮してアイデアに考えた人の名前はつけ

こんにちは。 開発者ブログに初めて投稿します。id:toyoshi です。 先週Misoca社のSlackの褒めチャンネルを紹介しましたが、私があそこで褒められたことがあるのは「Zoomでスペースを押してる間ミュートが解除されるようになるオプションを教えた」「アンケートの質問を考えるのが早い」の2点です。本来の仕事の方でも褒められていきたいです！ さて、今回のエントリでは先日社内で開催したKaggleの勉強会の内容を紹介します。やったことがないと難しそうなイメージのあるKaggleですが実は入門だけなら知識ほぼ0でも大丈夫なのです。このエントリを参考にぜひ入門してみてください。 今回のゴール Kaggleでアカウントを作り、コンテストに参加して、予測を提出するところまでを目指します。 環境の準備なし、プログラミングなし、統計の知識なしでKaggleの予測提出までの流れがわかるようになってい

こんにちは、@mugi_unoです。4歳の娘にトランプの神経衰弱で勝てません。 新機能をリリースしました 🎉 さて、先日Misocaに新しい機能がリリースされました。 www.misoca.jp 国税庁のサイトで、法人の基本３情報（名称・所在地・法人番号）というものが公開されており*1、そのデータをもとに文書の送付先などを自動入力できるという機能です。 合宿成果からのリリース この機能は、7月に行われた開発合宿*2での成果物がベースになっています。 今回は、合宿終了後からリリースまでどういった作業をMisoca内で行ったのかを中心にご紹介します。 合宿で作ったもの Misocaでは以前から国税庁のデータを取得し保持していたものの、有効活用できていない状態になっていました。 そこで、私のいた合宿のチームでは「これ使ってなんかやってみよう！」というのをテーマに取り組みました。 (合宿時のチー

mzpです。こんにちは。 今回、Misocaを辞めて転職する決断をした。そのため、これがこのブログへの最後の投稿となる。なので、Misocaへの感謝を述べつつ退職の報告としたいと思う。 🏢出会い 新卒で自動車メーカーの系列会社に入社し社内SEをしていたが、やりたいこととのギャップを感じはじめたので転職活動をはじめた。 その中で、以前から知っていたMisoca(当時の社名はスタンドファーム)に話を聞きにいった。 自分が自社サービスに興味があったことと、Misocaも資金調達に成功し人を増やすタイミングだったことがうまくマッチし、入社を決めた。 こう書くとちゃんと活動したように見えるが、実際は退職を宣言したあと、何人かの知人とご飯を食べていたら話が進んでいたので運要素が大きい。 資金調達に成功してうんぬんは最近知った。 当時のメモには選んだ理由に以下のものが書かれている。 なぜスタンドファー

mzpです、こんにちは。 RubyKaigi 2018で配るノベルティとしてステッカー帳を作成したので紹介する。 🔖ステッカーをどう使うか RubyKaigiに限らず技術カンファレンスではステッカーを貰う機会が多い。 Misocaでもロゴステッカーをよく配っている。 ノートPCに貼ったり、手帳に貼ったりするが、だんだんと場所が足りなくなっていく。 そして既存のステッカーの上に新しいステッカーを貼ったり、古いのを剥したりとしていくことになる。 📖ステッカー帳 この問題を解決するために、ステッカーを貼るための専用の手帳を作った。 御朱印帳のように蛇腹折りになっているので、貼ったステッカーを一度に見られる。 🛠作っているときの様子 ある日、ふと思いつく。 弊社もだけど、ことあるごとに会社ステッカーをもらうけど貼るものがないのでステッカー帳みたいののほしい— mzp (@mzp) April

id:mizukmb です。こんにちは。 昨日紹介した 📖ステッカー帳 に引き続き、 RubyKaigi2018 でお配りするノベルティを紹介します。 来る RubyKaigi2018 にて、 Misoca ではノベルティとして Ruby 0.49 のソースコードが入ったフロッピーディスク を配ります。 こちらの紹介と、 Ruby 0.49 のビルド方法や実際に動かしてみた内容について書きたいと思います。 フロッピーディスク 💾 外観はこんな感じで、 RubyKaigi2018 仕様のジャケットと一緒にケースに入っています。ケースは自立するので飾ることができます。かっこ良いですね。 こちらのフロッピーディスクですが、実際に読み込むことができ、中には Ruby 0.49 のソースコードが入っています。 Ruby 0.49 はこちらで公開・配布されています。 ftp://ftp.ruby-

こんにちは、@corocn です。 今年は例年より寒いですね。私がリモートワークしている部屋も、隙間風が強くて寒いです。 ※ 写真は自宅のニワトリ小屋です 新しいRailsのインフラ環境構築 先日この開発者ブログで、@mugi_uno が 新しいRailsのフロントエンドについて紹介してくれました。 Turbolinks、時々Vue.js - Misoca開発者ブログ 今回は、同アプリケーションのインフラ環境で活用しているAWS Elastic Beanstalkについて紹介したいと思います。 AWS Elastic Beanstalk とは AWSの各種サービスを組み合わせたPaaSです。 環境作成時に、ロードバランサ、オートスケーリング、ローリングアップデートなどの機能が自動設定され、Elastic Beanstalkから一括管理できるようになります。 ウェブサーバーはEC2インスタン

こんにちは、mzpです。 Misoca Advent Calendar 2017 の13日目の記事を書きます。 🔖Misocaのカンバン Misocaでは、各プロジェクトごとに付箋が作られ、壁に貼っていた。台紙となっている模造紙のことを名古屋ではB紙と呼ぶので、「MisocaのB紙」と呼んでいた。 名古屋オフィス外で働いている人と情報共有が難しかったため今はTrelloに移行している。 🚀完了したプロジェクト 完了したプロジェクトは場所でまとめて管理していた。 Doneの杜と呼んでいた。最初は「いっぱい終わったなー」と満足して見ていたが、だんだんと片づけたい気持ちが増してきた。 ⛩出雲大社への奉納 ちょうどその時期にRubyWorld Conference 2017のために島根に行くことが決まっていたので、出雲大社に奉納できないかと思って調べてみた。 FAQを確認すると 古い御神札・御

こんにちは。tkykです。 みなさん、コードレビューしていますか？今日はMisocaのレビュープロセスで用いられている、とっても便利な「レビュー環境」について紹介します。 Misocaのレビュー体制とその課題 MisocaではPull Request（以下、PR）ベースの開発体制をとっており、必ず他のエンジニアによるPRのレビューを経てから、masterへマージすることになっています。 レビュー時に動作確認をするには、エンジニア各自がローカル環境にブランチをチェックアウトして行うのですが、時にはそれだけでは不都合なケースもあります。 非エンジニアにも動作確認をしてほしい 動作確認をするための条件を整えたい 最終的にはマージされないコードを一時的に追加したい 依存するライブラリのバージョンを変更したい RAILS_ENV=production でビルド・実行したい などなど このようなケース

こんにちは、@mugi_uno です。 RubyKaigi盛り上がりましたね〜！ そして広島は美味しいものがたくさんでした。次回の仙台も楽しみですね！ さて、みなさんはフロントエンドのフレームワークには何を利用していますか？ Misocaでは一部機能でReact/ReduxによるSPA構成を採用しています。 めろたん(@renyamizuno_)の書いた過去のエントリーにも登場していますね。 tech.misoca.jp しかし、Misocaで利用しているのはReactだけではありません。 jQuery React/ReduxはSPAなどでパワーを発揮しますが、逆に気軽に取り回しにくいため、ちょっとしたコンポーネントを作りたいケースなどでは、さくっと書けるjQueryを利用することもまだまだ多いです。 しかし、DOM操作が柔軟すぎるため影響範囲が読めなかったり、ビューと状態の管理が複雑にな

こんにちは、松江オフィスの日高（hidakatsuya）です。最近はイカの新規勢として子供達と一緒に楽しんでます。楽しい。 私が入社した2015年当時、リモートワーク勢は私含め2人でした。それが、2017年8月現在では6人まで増えとても賑やかになりました。そこで、今回はそのリモートワーク勢が「どんな仕事環境」で「どのように働いているか」について、各メンバーへのインタビュー形式でご紹介したいと思います。 では、早速紹介していきます。メンバーごとに回答をまとめています。 mugi_uno 富山県、リモートワーク歴6ヶ月 仕事環境を見せてください 机は奥行きに余裕があるものが好きで、IKEAのを使っています ケーブル類はテーブル下のケーブルボックスにまとめてスッキリ 左にある存在感のあるマイクは Yetiです。プレゼントでいただきました。YouTuber感がスゴい 椅子はオカムラのコンテッサを使

こんにちは。4月からMisocaにjoinしました、tkykです。京都市内からリモートで働いています。盆地特有のねっとりとした暑さをやり過ごしつつコードを書いている今日この頃です。 さて、今回はMisocaのCI（Continuous Integration）環境がどうなっているか、その全体像を紹介したいと思います。 そもそもCIの目的とは？ ソースコードの一部に対する変更が、アプリケーション全体の動作を壊してしまっていないか、常時チェックするのが目的です。 そのために何をしているか CI専用のサーバに、変更点を含むソースコード全体をチェックアウトして、依存ライブラリのインストールと必要な前処理を行い、すべてのテストを実行します。 すべてのテストがエラーなくpassしたことをもって、CIが通ったとしています。 Gitを使った開発フローとの統合 MisocaはGitHub上で開発を行なってい

こんにちは！ Misoca開発チームのめろたん(@renyamizuno_)です！ 暖かくなってきて眠いですね。 最近は、「0.8秒と衝撃。」というバンドが活動を終了するってことを聞いて、まじかーとなってます。 はい。 今回はMisocaでReactを使い始めたことについて書きたいと思います。 React 詳しく書かないですが、ReactはFacebookで作られたユーザインタフェースを構築するためのライブラリです。 github.com 仮想DOMでJS界隈を賑わせていましたね。 class HelloMessage extends React.Component { render() { return <div>Hello {this.props.name}</div>; } } ReactDOM.render( <HelloMessage name="John" />, docume

ユーザー、プロダクト、チーム こんにちは、こくぼ @yusuke_kokubo です。 プロダクトをつくることと、つくりかたをデザインすることが好きです。 早速ですが、プロダクトをつくる流れをごくごく簡単にまとめてみました。 細かいことを言うと、他にもプロダクトのリリースに至るまでのプロジェクトについての話があったり、リリース後のユーザーサポートやメトリクスの話があったりしますが割愛します。 今日はチームづくりの話をします よいプロダクトはよいチームによってつくられます。 よいチームをつくるためにはよいマネジメントが必要です。 ボトムアップの行動と文化は勝手には育ちません。 会社としてトップダウンで環境をつくり、指針をつくることで文化が育まれる、というのがぼくの考えです。 今日はぼくがMisocaで行っているチームづくりについてお話しします。 チーム内のコミュニケーションを活性化するために

こんにちは！ Misoca開発チームのめろたん(@renyamizuno_)です！ 最近LEGOランドが開園したので行きたいのですが、地味に遠いため行けてないマンです。 最近あった面白いことは、 スマホでスクショとか撮れないなぁと思って色々確認したら、 最近スクショとかカメラ撮れんなーと思ってストレージがいっぱいなのかなぁ と思って見たら 最大が25GBに対してアプリ1TBとかでクソ笑う pic.twitter.com/inymgYrToH— わかり亭めろたん。 (@renyamizuno_) 2017年4月7日 アプリとかキャッシュとかがスマホのストレージ容量をありえないくらい超越してたことです。 はい。 今回は最近ありえないほど大きくなってしまったControllerをいかにリファクタリングしたか*1というのをざっと書きたいと思います。 おおきくなるController どうしても大き