「Misocaのリモートワーク」を支える仕組み

こんにちは。 今年4月にMisocaにジョインしました@KawamataRyoです。

最初に自己紹介を。
少し変わったキャリアで消防士歴が6年、エンジニア歴は1年と半年です。*1
入社後は、こちらの記事のTypeScript化や、開発合宿の副産物(Print.jsを使った印刷ダイアログ表示)のリリースを行ったりしていました。
今は茨城県からフルリモートで開発をしています。

リモートワークはメリットだけではなくネガティブな意見を聞くこともあります。
私自身、エンジニアとしての経験が浅いだけに入社前はリモートワークに不安がありました。
ですが、今はとても充実した開発ライフを送っています。
それもMisocaのリモートワークの仕組みのおかげだと思ったので、今回紹介します。

f:id:ba068082:20190523062444j:plain
昼休みに走っている家の近所のランニングコース。どこまでも続く田んぼ道。

常時接続のWebミーティング

出勤から退勤までZoomのwebミーティグRoomに常時接続しています。
こちらのRoomは名古屋オフィスにも繋がっており、常にオフィスの様子が見られます。
  
「リモートワーク = 孤独」というイメージが強かったのですが、Misocaの場合はそんな事はないですね。
顔の見れる関係?なので、詰まった時なども気軽に質問しやすいです。

f:id:ba068082:20190523134356p:plain

ペアプロ・モブプロ文化

Misocaはペアプロ・モブプロが盛んでワイワイ開発しています。
入社前はもっと黙々と開発すると思っていたのですが、 自宅にいる妻に「仕事中なのに、笑いすぎじゃない??」と小言いわれるほどワイワイしてます。

主に2〜4人でZoomに繋いでプログラミングすることが多いです。
あとはVSCodeのLiveShareを使ったりもします。
モブ・ペアでやることで初期キャッチアップのコスト削減、コードの属人化の排除など利点が多いなと思いました。
もちろんずっと繋いでいるわけではなく、一人で黙々と開発する時間も十分あります。

f:id:ba068082:20190523135940j:plain

今の気持ちを共有する分報

current_(名前)というslackチャネルを開設し、その時思ったことなどを随時共有しています。*2
そちらでつぶやいた内容は、全員がメンバーに入っているcurrent_allチャネルに流れ、そこで皆の今の状況がわかります。
こちらのつぶやきから詰まっている状況が共有され、ペアプロ・ペアオペに発展していくなどもあります。
あとはここから始まる雑談も多いですね。 リモートワークのつらみとして「雑談できなくて辛い」というのを聞くことがありますが、Misocaでそれを感じたことはないです。

f:id:ba068082:20190523155152j:plain

毎日の朝会・週次の振り返り(KPT)

毎日、全員参加の朝会があり連絡・相談事項の共有などを行います。
(11:30から開催なので、もはや昼会な気もしますが。。)
前述した常時接続のZoomで行います。
以前の記事でも紹介した通り、タスク管理ツールのTrelloを使い効率的に進めています。

またプロジェクトごとに週次の振り返り(KPT)もあり、問題点の共有、改善策の提案なども行っています。

f:id:ba068082:20190523160530j:plain

誰でもどこでも働ける会社

物理オフィスが名古屋と松江、東京(弥生オフィスの一部スペース)にあり、いつでもそちらへの通勤が可能です。
Misocaはリモートワークの会社というより、誰でもどこでも働ける会社というのが正しいですね。
また、年に一度の全員オフ会の時は、名古屋オフィスに皆で集合します。
今年の全員オフ会は、こちらの記事で紹介されています。

f:id:ba068082:20190522091954j:plain
全員オフ会時の名古屋オフィス。この後皆で紙飛行機ワークショップを行いました。

おわりに

以上、Misocaのリモートワークを支える仕組みでした。

来る6月13日19時30〜から、「もくテク powerd by Misoca」にてリモートワークの座談会を行います。
東京、名古屋、松江、富山サテライト会場(自宅)の4拠点から、普段の仕事の感じでZoomのRoomに集合してパネルディスカッションを行います。

今回の記事で紹介した内容以外にも、リモートワークを効率的に進める知見など幅広く共有できると思うので、ぜひ興味あればご参加ください。(私もリアルで登壇します)

mokuteku.connpass.com

Misocaではリモートワークでも幸せに働きたいエンジニアを募集中です。

www.wantedly.com

*1:詳しいキャリアはこちらよりhttps://note.mu/ryo_kawamata/n/n4fc0fa900314

*2:分報が必須なわけではないです

Misoca❤️TypeScript

こんにちは、@mugi_unoです。

GWはリスと遊んできました。たのしかったです。

f:id:mugi1:20190504123132j:plain:w500


さて、長きに渡ってコツコツと手を入れてきたMisocaのフロントエンドですが、 先日、新たに大きな改善を行いました。

f:id:mugi1:20190513182316p:plain:w600

というわけで、令和一発目のエントリーは MisocaのフロントエンドにTypeScriptを導入したお話です。

🤔なぜTypeScriptを?

金額処理触るの怖すぎ問題

Misocaは請求書の発行・管理サービスという性質上、各所で金額に関する処理があります。 そして、最近はさまざまな事情により修正が頻繁に行われていました。 以前のエントリでもご紹介したレガシーコードのリファクタリングなども該当します。

tech.misoca.jp

エンジニアの方なら「おおぅ...」となりそうですが、金額を触る処理というのは怖いものです。 そしてフロントエンドが絡んでくると「ここは文字列?数値?」といった疑心暗鬼も発生し、気軽に足し算もできません。

そのため、機能修正やリファクタリングを行うにあたって、あらかじめ大量のテストコードを用意するなど、安全のために多くのコストが発生していました。

そのようなテストコードや目視確認といった手法で安全を確保するアプローチに対し、TypeScriptなどの型システムによるアプローチでは、設定や記述によっては完全にすべての値や計算結果を保証することはできないとはいえ、「ある程度」は静的なチェックで保証することができます。

今後も似たような変更をする状況は容易に想像できますので、つらさを感じてから出来るだけ早いうちに、 そのつらさを解消するための仕組みを入れておいたほうがいいと判断しました。

時代の流れにもちゃんと乗りたい

「そんな理由で!」と怒られそうですが、 個人的には「世の中の流行りを追う」も技術選定において重要な要素だと考えています。

一瞬の流行りに飛びつくと怪我をするので慎重さも必要ではありますが、 トレンドとなっている技術を利用することで開発者(主に私かもしれない)のモチベーションが上がりますし、 そこから発展した新しい技術要素が登場した場合にも検証・導入しやすくなります。

主観ですが、最近のフロントエンドではTypeScriptが主流になっている感覚があり、 「Misocaでも追従すべきだろうな」と以前から考えていました。

そんな中、上記の金額処理怖い問題も重なり「やるか!」と決意したのでした。

💪TypeScript導入のながれ

実験用PRを作ってみる

何はともあれ、一旦実験用PRを作ってみました。

f:id:mugi1:20190513182858p:plain:w500

方針を決める前に、現状のコードベースにTypeScriptを導入した場合にどういったことが起きるのかを知るのが目的です。 最終的にはこのPRがそのままマージされましたが、試しに小さく一回やってみるのは大事ですよね。

方針をきめる

TypeScript導入時に意見が大きく分かれそうなのが、noImplicitAny の存在ではないでしょうか。 型が不明な場合にany型に推論させるかどうかという設定です。

これを無効化することは敗北だという意見を目にしたこともあります。

私も最初は「型でバッチリ固めて守るぞ〜!」と意気込んでいましたが、 上記の実験用PRを作ってみたところスクロールしきれないほどのエラーが噴出し、「あっ、これ無理だわ!!」 と感じたので noImplicitAnyはfalse(any型に推論させる)ではじめることにしました。 また、noImplicitAnyに限らず、基本的にanyの利用は禁止しないことにしています。

このあたりはSlackなどでチームメンバーとも相談し

  • any推論を許容しても、自動推論で受けられる恩恵は十分大きい
  • まずは全体をTypeScriptコンパイルが通っている状態にすること自体が大事
  • 徐々に型を整えていって固めていけばいい
  • それでも現状と比べると遥かに良くなる

といった考えに基づいています。

@t_snzkさんや@__gfx__さんの提唱されている「がんばらないTypeScript*1」も参考にさせていただきました。(ありがとうございます!)

なお、strict オプション自体は trueのままで、noImplicitAny以外のstrict関連のオプションはすべて有効化した状態でスタートしました。 これも実際に有効にして型チェックを通してみた結果「これぐらいならサクっと対応できそうだな」という肌感を得ての判断でした。

ADRを書く

Misocaでは開発時の意思決定をADR(Architecture Decision Records)*2という形でソースコードと一緒にドキュメント化して残しています。

いきなりTypeScriptを導入するのではなく

  • 現在はどういった背景事情があるのか
  • なぜ導入するのか
  • どういった形で導入するのか
  • 何が変わり、何が影響を受けるのか
  • どういったメリット・デメリットがあるのか

といった情報を整理して残しておくことで、問題意識の共有もできますし、 後から新しく入ったメンバーも過去の意思決定を遡って知ることができます。

参考までに、実際のADRをまるごと貼っておきます。

(内部共有仕様なので、もし不備とかがあったら見逃してください。)

f:id:mugi1:20190514181547p:plain:w700 f:id:mugi1:20190514181600p:plain:w700

実験PRを通して見えてきたさまざまな方針をADRとして整理し、PR上でチームでレビューした内容が反映されています。

テストコードから対応していく

方針が決まったので、まずはテストコードから置き換えを行いました。

テストコードなので本番への影響もほぼありませんし、 わりと単純なコードが多いので差分の理解もしやすいです。 作業者自身だけでなく、レビュワーの目を慣らすためにもテストの書き換えから行うのはアリでしょう。

Vue.jsをどうしたか

Vue.jsでTypeScriptの恩恵を受けるため、

を導入し、クラス&デコレータを利用した形に全コンポーネントを書き換えることにしました。

Vue&TypeScript導入方法は、Vue.extends を利用する方法もありますが、 この場合は型で保証できる範囲に一部制約が発生します。 どうしようか悩みましたが、Propsはしっかり型で守りたいな〜と考えていたため、 vue-property-decorator を使うことにしました。

実際置き換えをやってみるとなかなか大変で、クラスコンポーネント形式固有で注意すべき挙動なども対応していく中で踏み抜きました。 このあたりは知見として、最終的にはesaにガイドラインとして整理しておきました。

(踏み抜いたundefinedによる初期化に関する記録の例)

f:id:mugi1:20190514115531p:plain:w600

エンジニアへの知見共有

全体をTypeScript化するにあたって、コード自体の変更だけではなく、 エンジニア全体への知見の共有も併せて検討していかねばなりません。

TypeScript自体は良いものだと思いますが、 今まで利用していなかったのであれば、もちろん学習コストが発生します。

そこで、作業時には常に社内でライブ配信することにしました。

f:id:mugi1:20190513184638p:plain:w400

変更前後をリアルタイムで比較することができますし、 何よりも修正と共有がまとめて出来てお得ですね!

終わった後は学びを簡単にまとめてみるなど、なかなかよい試みでした。

f:id:mugi1:20190513184919p:plain:w400

🏃‍♀️プロジェクト化して一気にゴールまで走る

コツコツと一人で書き換えを続けていましたが、 残り40〜50%程度になった段階で@KawamataRyoがJoinし、 二人でプロジェクト化して一気にすべてを片付けることにしました。

f:id:mugi1:20190513185326p:plain:w500

そこからはおおよそ一ヶ月弱程度で、すべてのJSファイルをTypeScriptに書き換えることができました!

🎉TypeScript化(ひとまず)完了

というわけで、anyを使って緩めている箇所は残っていますが、無事全体をTypeScript化することに成功しました。 現在は新たにフロントエンドのコードを書く場合はすべてTypeScriptを利用しています。

VSCodeでコードを書いているときにメソッドや引数の補完が出るのもありがたいですし、 単純なタイポも即座に指摘してくれているので非常に快適です。

がんばってよかった!

次の課題

いや〜、導入できてよかったよかった、と言いたいところですが、課題は残っています。

やはり最大の問題はanyで、noImplicitAnyを無効化しているのに加えて、ひとまずany定義をして逃げたコードも多く残っています。 直近でやるべき作業は次のようなものかな〜と考えています。

  • noImplicitAnyの有効化
  • anyはunknown型利用に置き換え

理想の構成を手に入れるまで、引き続きコツコツやっていきたいと思います💪

...というわけで!

採用

Misocaではコツコツ改善するのが好きなエンジニアを募集しております!

www.wantedly.com

#RubyKaigi 2019 に参加して屋台メシを食べてきました

こんにちは Misoca 開発チームの id:mallowlabs です。 RubyKaigi 2019 に参加してきたのでその報告をしたいと思います。 私個人としては、RubyKaigi は初参加でした。

ちなみに Misoca は RubyKaigi 2019 の Silver スポンサーです!

f:id:mallowlabs:20190422172543j:plain

開催地

今回は福岡での開催でした。 福岡の屋台でとんこつラーメンを食べれたらいいな…と思いつつ参加したら、ランチスポンサーがまさかの屋台提供で驚きました。

他にも初日の Official Party の会場が商店街全体だったり、初参加の私は RubyKaigi のスケール感に驚くことが多かったです。

#findmisoca キャンペーン

tech.misoca.jp

事前に告知させて頂いたとおり、昨年同様に御朱印帳風のステッカー帳をノベルティとして配布しました。 今年は更に Misoca 社員が「福岡」「名古屋」「東京」「松江」の各地のステッカーを持ち、探してもらうことで、スタンプラリーの要素も追加するという試みも行いました。

Twitter で #findmisoca を検索する と楽しんでいただけた方も多かったようで嬉しく思います。 私は「東京」ステッカーを持ってウロウロしていたのですが、「名古屋ですか?」「いえ、東京です、名古屋の人はさっき二階に行きましたよ」という RPG の村人のようなコミュニケーションが発生して面白かったです。 お話させていただいた参加者のみなさま、ありがとうございました!

4つ揃えたら何が起こるかは別の機会に発表予定です、お楽しみに!

セッション

どのセッションも面白かったですが、個人的に興味深かったセッションを紹介します。

State of Sorbet: A Type Checker for Ruby

Stripe 社を中心に開発が進められている Ruby 向けの型チェッカーである Sorbet の紹介です。 Stripe 社ではヘビーに使われているようで、かなり実用段階にある印象を受けました。 発表の目次の時点で「Announcements」という文字があり、ここで公開されるのでは…?とドキドキしていましたが、オープンソース化は2019年の夏だそうです。 楽しみですね。

発表スライドはこちら

Crystalball: predicting test failures

Rails の特定のファイルを編集した際に、影響がありそうな spec ファイルを自動で特定してそれだけを実行できる gem の Crystalball の紹介です。 Misoca はテストをしっかり書く文化があるので、テストの数がとても多く、このような gem を使うことでテスト駆動開発がより快適に行えそうという印象を受けました。

発表スライドはこちら

Cleaning up a huge ruby application

クックパッドの巨大なアプリケーションの中の未使用コードを特定するために Ruby 2.6 から導入された Oneshot Coverage という仕組みを使って、5万行以上のコードを削除した事例の紹介です。 Misoca のコードも、クックパッドほどではないですが、そこそこに大きくなっているので、Oneshot Coverage を使って未使用コードを特定したいと思いました。

発表スライドはこちら

次回の開催地

次回の RubyKaigi2020 の開催地は松本だそうです。

これは Matsumoto が Nice な街かどうかを確認しに行く必要がありますね。 来年の RubyKaigi でお会いしましょう!

採用

Misoca では RubyKaigi 等の勉強会参加費・交通費が支給されます! Misoca では会社のお金で RubyKaigi に行きたいエンジニアを募集しています!

www.wantedly.com

Rubyで「令和」がサポートされました(Misocaをruby 2.6.3に更新しました)

こんにちは、 id:eitoball です。福岡では RubyKaigi 2019 が開催されていますね。家庭の都合で行けないので、自宅のある岐阜から開催の成功を祈っています。

昨日、RubyKaigiでRuby 2.6.3 のリリースが発表されましたね。*1 それを受けて、Misocaも先ほどRuby 2.6.3 に更新し、リリースしました。(Misoca クラウドアプリ・スマホアプリ共に西暦表示のため、サービスへの和暦表示対応はありません。

Ruby 2.6.3 の変更点

日本の新元号「令和」のサポート

元号を掲げる人のイラスト

今回の更新でメインの変更ですね。以下の2点が「令和」のサポートになります。

  • Unicode のバージョンを 12.1 beta に更新*2
    • 12.1.0 では、「U+32FF SQUARE ERA NAME」という文字が追加されます。この文字は「令和」の合字になります。アドビの「源ノ角ゴシック」などのフォントが既にこの合字を出しているようです。*3
  • date ライブラリを更新*4
    • date が 2.0.0 に更新されました。Date.jisx0301Date#jisx0301、そして、Date.parseで、「令和」の「R」に対応しました。Date.jisx0301('R01.05.01') #=> とか Date.parse('2019-05-01').jisx0301 #=> "R01-05-01" となります。

その他の変更

他にも、いくつかの更新があります。主な変更は以下の2つです。

  • csv が 3.0.9 へ更新*5
    • 3.0.4 からの更新になります。"loose parser" の導入によって読み込みの速度が1.5倍になっていたりするそうです。*6 個人的には、なにげにうれしい変更です。
  • net/imap の SNI サポート*7
    • Net::IMAP で Server Name Indication(SNI)がサポートされました。

matz と ruby コミッタの方々に感謝です。いつも、ありがとうございます。

採用

Misocaのロゴが入ったパーカーやTシャツを着ています

Misoca では、最新のRubyに追従したいエンジニアを募集しています。RubyKaigi 2019 にも何人か参加しています(Misocaのロゴが入ったパーカーやTシャツを着ています)ので、興味のある方は声をかけて下さい。

www.wantedly.com

Precious Wing(開発合宿2019 3日目)

今日はちょっと曇り空。

とはいえ気持ちいい天候ですね。

山や川が近いからか、鵯や鳶の声もよく聞こえてきます。

さすがにキンクロハジロは見つけられなかった。

f:id:kokuyouwind:20190412070621j:plain:w300

それっぽいタイトルにしましたが、そろそろネタが尽きてきたので来年は普通のタイトルでいいかな…

さて、今日は朝から名古屋に帰り、名古屋オフィスで全社オフ会になります。

開発合宿としては実質昨日までで、今日は成果発表会のみです。

このあと、各チームがどんなことをやったのか、この記事に追記してもらえるはずなのでお楽しみに!

昨日の記事はこちら。

tech.misoca.jp


(08:00 @kokuyouwind)

f:id:kokuyouwind:20190412073350j:plain:w300

今日も朴葉味噌を食べました。


(08:30 @oosawatechnica)


(09:00 @kokuyouwind)

さらば岐阜、さらば信長

f:id:kokuyouwind:20190412085755j:plain:w300


(14:00 @kokuyouwind)

更新してる暇がなかったですが、全社オフ会が始まってます!

普段リモートのメンバーも含めて、名古屋オフィスに集結!

f:id:kokuyouwind:20190412141007j:plain:w300

休憩時間もだいぶ賑わっています。

f:id:kokuyouwind:20190412141228j:plain:w300

昼前に合宿の成果発表会も行いました!

生配信でお届けするのはさすがに無理なので、以下に各チームの成果報告を更新していってもらいます!

開発合宿チーム紹介(および発表順)

1: グレーが多いチーム

チーム名由来

メンバーのアイコンの色がグレーだったので。
当日はMisocaパーカーを着ていたので実質全員グレーでした。

チームメンバー

id:mallowlabs
id:torimizuno
id:nezurika

開発テーマタイトル

KPI/KGI等社内で見たい数字をredashで簡単に見れるようにする!

開発内容とかいきごみとか

合宿で行ったことは

  1. みんなが手軽に見れる場をつくる
  2. プロダクト視点、マーケ視点で出したい数値を定義する
  3. 自分たちで出したい数値をSQLを叩けるようになる(エンジニアだけでなくデザイナー・マーケターも)
  4. ダッシュボードをつくる
  5. GA・Google Spreadsheet・Slack とも連携させる

です。
最終的には見たい数字をダッシュボードで可視化することができました!
今回は成果物を作るだけではなく、そこから現状のユーザーの傾向なども分かることができ、
合宿後どう使っていくかが鍵になるものができたのでとても良かったです!

技術的に頑張ったことはこちら

  • Google OAuth でログインできるようにした
  • self hosting の Redash は Slack に URL を展開する機能がないので自分で作った
    • グラフの URL を貼るだけでグラフが展開される
    • リマインダーと組み合わせると◎

私達のチームはエンジニア・デザイナー・マーケターの構成だったので、
開発合宿と言いつつ難しいことは id:mallowlabs がすべてやってくれました。神。
そして開発合宿なので、デザイナーとマーケターもSQLガシガシ書きました。開発したぜ!

発表の様子
f:id:nezurika:20190412174713g:plain

シュッ2

チーム名由来

去年と同じテーマ、同じメンバーでリベンジ参戦!なので2です。

チームメンバー

id:mizukmb
id:komatatsu

開発内容とか意気込みとか

OCRを使って紙などから請求先の情報を取り込む機能をAndroidアプリに追加しました。 去年の敗因は「スマホに処理を行わせると時間がかかりすぎて待てない」だったので今回はサーバーサイドでOCRを行うことにしました。 Google Cloud Vision APIの返す文字列は非常になめらかで過去最高の仕上がり。 実用レベルの精度やレスポンス速度が出るようになったし、開発もトントン拍子に進んだためリス村に行けて大満足でした。

f:id:komatatsu:20190412175628p:plain:w500

3: チームカ○オ

チーム名由来

「カ○オ」=有名な電卓メーカーさんの名前が入ります。

チームメンバー

@mugi_uno

諸事情により一人チームで、一日目はリモート・二日目午後に合流というスタイルでした。

開発テーマタイトル

電卓

開発内容とかいきごみとか

説明するよりも見てもらったほうが速いです。

f:id:mugi1:20190412171810g:plain

ご覧のとおり電卓です。

明細を入力するときに

  • 合計で10000円になるように差額を入れたいんだよな〜
  • 2割引の金額にしたいんだよな〜

みたいな、「ちょっと計算したものを入れたい」みたいなシチュエーションは結構多いだろうな〜というのを解決したくてガッとやりました。 あとは、現状のMisocaの請求書作成では、お取引先や明細の品目名はマウス・トラックパッド操作のみで入力することができますが、 数量や単価を変更するときはキーボードに頼らざるを得ません。

ちょっといじりたいだけなのに面倒だな...と私自身が思うことがあったので、色々と解決する究極ソリューションを考えた結果 「あ、これ電卓だわ」となりました。

ただ、Vue.jsパワーが素晴らしすぎて、合宿は二日間あるのに3時間くらいでほぼ終わってしまったので、 思いつきでまったく関係ないものももう一つ作りました。

f:id:mugi1:20190412171825g:plain

弊社のサービスの性質上、クラウドの利用を促進したい立場ではありますが、 現場ではExcelやGoogleスプレッドシートはバリバリ利用されているとおもいます。

そこからガッとコピーしてバーンって貼り付けてドーンって明細作れたら便利じゃね??」という雑な発想です。 なお、上記例だとGoogleスプレッドシートからコピペしていますが、簡単だったのでCSVも対応しておきました。

f:id:mugi1:20190412172033g:plain

内容を見ていい感じに雰囲気でパースします。

というわけでチームカ○オが作ったものでした。 「いやーこれ優勝しちゃうわ〜〜」と調子に乗っていましたが、 成果発表の表彰(?)では「電卓と迷いましたが、○○チーム(別チーム)で!」というのが相次いで爆死しました。 電卓からドレミの音が出るようにするか悩んで実装しなかったので、そこさえ実装してれば優勝でしたね。

来年もがんばるぞ〜!(あと、ブラッシュアップしてリリースしたいな)

4: 端末農場

チーム名由来

以前から、iPhoneアプリの回帰テストを改善したいと思っていてAWS Device Farmを利用できないかなぁと考えていたので「端末農場」としました。ジョージ・オーウェルの「動物農場」も若干意識しました。

チームメンバー

tharaid:eitoball

開発テーマタイトル

由来そのままで「iPhoneアプリの回帰テスト」というタイトルでした。

開発内容とかいきごみとか

合宿の間に不完全ですが、スクリーンショットを取ってreg-suitを実行するまでできるようになったのが、何よりでした。今後、改良して、実際に使ってもらうことができるようにしたいと思っています。本筋ではないですが、Device Farm で実行するテストはAppium Rubyを利用しました。いつものRailsアプリを書くノリでiPhoneアプリのテストが書くことができるのは感動でした。

5: 編㌠

チーム名由来

コンポーネントカタログを編サンするぞ!

チームメンバー

@lulu @suer

開発テーマタイトル

Misoca の Web アプリケーションを構成する UI コンポーネントのカタログ作りをしました。

開発内容とかいきごみとか

StoryBook でコンポーネントカタログをつくり、 Jenkins + reg-suit でビジュアルテストリグレッションテストができるところまで作り込みました。 キャプチャ取得の自動化は Zisui を使いました。

Pure な Vue.js のコンポーネントを StoryBook に載せるのは比較的簡単でしたが、 jQuery + Bootstrap に依存したコンポーネントを載せるのは少々ハックが必要となり大変でした。

6: 電気羊㌠

チーム名由来

Electron = 電気羊

チームメンバー

@kokuyouwind
@ryoKawamata

開発テーマタイトル

「Misocaはデスクトップアプリの夢を見るか?」

開発内容とかいきごみとか

私たちのチーム、SlackチャネルとGtihub、Trelloの連携などを行い本番さながらのスタイルで開発を行いました。 チケット・PRベースでだいぶ上手く開発サイクルが回っていた気がします。

2日間で、

  • ElectronのでMisocaの基本機能が使える
  • クロスプラットフォーム(Windows、Mac)でインストーラーからのインストールが行える
  • Nutsを使って、自動アップデートの通知・実行が可能

というところまで完成させ、 発表ではMisocaのロゴをプリントしたCDを使ってデモを行いました 💿💿

f:id:ba068082:20190412164557j:plain:w500

開発合宿とオフ会を終えて

そんなわけで3日間、開発合宿+オフ会と、濃密な社内イベントの様子をお届けしました。

(オフ会の午後ではワークショップも実施したのですが、これについては別記事でまとめたいと思います。)

来週はRubyKaigi2019ですね。

MisocaはSilverSponsorになっておりノベルティも配布します!

tech.misoca.jp

イベントが続きますが有志メンバーも多く参加しますので、合宿の話などRubyKaigiでお声がけいただければと思います。

それではみなさま、おつかれさまでした!

📢 宣伝

Misocaでは開発合宿で圧倒的成果を出したいエンジニアを募集しています!

www.wantedly.com

桜の頃(開発合宿2019 2日目)

おはようございます。

雨模様だった昨日とは打って変わり、抜けるような気持ちの良い朝になりました。

f:id:kokuyouwind:20190411070555j:plain

すこし葉桜が混じっていますが、部屋から見える桜もきれいです。

それでは開発合宿2日目も、実況形式でお伝えしていきましょう。

1日目の記事はこちら。

tech.misoca.jp


(07:30 @kokuyouwind)

f:id:kokuyouwind:20190411073139j:plain:w300

朝ごはん!

あゆ雑炊があるのが長良川っぽいですね。

うぐぅ。

f:id:kokuyouwind:20190411073310j:plain:w300

朴葉味噌もありました。

香ばしくておいしい。


(08:05 thara)

朝ごはんをいっぱい食べました。 お腹いっぱいで眠くなってきました。


(08:35 id:torimizuno)

妖精の働きにより寝てる間に実質終わったようです

f:id:torimizuno:20190411083501p:plain


(08:45 @kokuyouwind)

午後からぷち観光に出たいので、早めに作業を始めに来ました。

f:id:kokuyouwind:20190411084759j:plain:w300

だれもいない会議室!

一番乗りできるのは珍しい。


(09:10 id:mizukmb)

天気良くて最高


(09:20 @ryoKawamata)

朝の散歩がてら岐阜公園よりリエクストリーム出社。
天気が良い日に屋外でPC開くと、画面が非常に見づらいという知見を得ました。

f:id:ba068082:20190411093309j:plain:w500


(09:43 id:mizukmb)

もうだめだ

f:id:mizukmb:20190411094333p:plain:w300


(10:24 id:mizukmb)

完成した


(10:40 id:nezurika)

ダッシュボードにもりもりとグラフが表示されてきています。
モザイクをつけてもギリギリ感あるのでもう載せる画像がない…。


(11:25 @kokuyouwind)

自動アップデートの実装をしてますが、「ビルドに時間がかかって暇」って呟いたら、普段Androidアプリ開発のこまたつ氏から「アプリ開発の気持ちがわかるでしょー?」「Web開発たのしー」と煽られました。


(12:14 thara)

お昼ご飯は天丼でした。

f:id:zetta1985:20190411121618j:plain


(12:30 @kokuyouwind)

こくよう「みずしりさん去年も似たようなこと書いてなかった?」

こまたつ「天丼だけに?」

いまこまたつが面白いこと言ったよ!!!


(12:38 @k0matatsu)

掛け軸になんて書いてあるかみなさん思い思いの方法で解読しはじめた
f:id:komatatsu:20190411124105j:plain:w500
なんて書いてあるでしょうか!?


(12:54 id:mizukmb)

ういろ

f:id:mizukmb:20190411125452j:plain:w300


(13:00 @k0matatsu)

f:id:komatatsu:20190411125837p:plain:w500

成果発表の準備もできたのでもう少ししたらリス村に行きます


(14:04 @mugi_uno)

たった今、一日遅れで長良川の会場に到着したんですけど、 なんかリス村行ったとかで数名いないんですけど!!!


(14:10 @kokuyouwind)

f:id:kokuyouwind:20190411141228p:plain

AutoUpdateできた!

どうでもいいけどpackage.jsonに書くバージョンとして0.0.0がvalidなのを知った。



(15:30 id:mizukmb)

団子おいしい🍡

f:id:mizukmb:20190411152941j:plain:w300


(16:48 id:nezurika)

SQLとSQLのぶつかり合い中ですね

f:id:nezurika:20190411164823p:plain


(17:00 id:torimizuno)

疲労が misoda に出てる

f:id:torimizuno:20190411165841p:plain


(17:00 @kokuyouwind)

気分転換に河原町をお散歩してきました。

いい雰囲気の町並み。

f:id:kokuyouwind:20190411165856j:plain:w300

f:id:kokuyouwind:20190411165827j:plain:w300

f:id:kokuyouwind:20190411165928j:plain:w300

ついでに長良川デパートでうかいボードゲームをゲットしました。

マッチ箱サイズでかわいい。夜に遊びたい。

f:id:kokuyouwind:20190411170402j:plain:w300

河原町にある和カフェに行こうと思ったんですが、16時までで閉店だったので諦めて地元の喫茶店っぽいところに。

2種シャーベットを頼んだら、思ったより豪華なのが出てきました。

f:id:kokuyouwind:20190411170514j:plain:w300

お店の前にいる猫ともちょっと戯れてから帰りました。

f:id:kokuyouwind:20190411170716j:plain:w300

f:id:kokuyouwind:20190411170749j:plain:w300

楽しんできたので、またWindowsと戦いたいと思います。

頑張るぞ!


(18:02 thara)

ロボット水門。 かわいい。

f:id:zetta1985:20190411180317j:plain


(18:11 @mugi_uno)

調子乗ってたら作ったものぶっ壊して、リカバリーに1時間以上かかった。

「終わった〜!観光してこようかな」「この時間だとほとんどお店は閉まってますね」

もうお酒飲みたいです。


(19:00 @kokuyouwind)

電気羊さんチーム、DVDを焼いてマスターアップしました。

夕食は打ち上げだ!!! 飲むぞ!!!


(21:30 @kokuyouwind)

f:id:kokuyouwind:20190411213614j:plain

隠れた鵜匠の才能が明らかになりました。


(23:00 @kokuyouwind)

今日はポケットWi-Fiが回収されたからか疲れたからか、部屋でがっつり作業してる人もおらずとても静かです。

明日は朝から名古屋に帰ることになるので、早めに寝てしまいましょうかね。


(23:00 @lulu-ulul )

今回は全チーム初日に実装終わってるのもあってみんな部屋でまったりしています。 露天風呂に浸かりながらわいわいと話すのは合宿感あって良いですねー。

いつもリモート勤務なので朝の通勤ラッシュに怯えながら寝るとします、おやすみなさい Zzz...。


3日目の記事はこちら。

tech.misoca.jp

雨のち晴れ(開発合宿2019 1日目)

朝からあいにくの天気ですが、Misocaは今日から開発合宿です!

今年は長良川温泉のホテルパークに来ております。

f:id:kokuyouwind:20190410102925j:plain:w300

会議室からの眺め。さすがに雨が降っているのでだいぶ暗いです。

なぜかベランダにたぬきがいますね…

f:id:kokuyouwind:20190410103324j:plain:w300

昨日は晴れていて桜も咲いていたので気持ちの良い堤防道路でしたが、この雨で桜も散ってしまったかもしれませんね。

f:id:kokuyouwind:20190410103138j:plain:w300

さて、去年の記事と同じく、今年も各メンバーからリアルタイム更新で合宿の様子をお届けしたいと思います!


(10:30 @kokuyouwind)

というわけで開発合宿始まりました!

さっそくチームごとに作戦会議からスタート。

f:id:kokuyouwind:20190410103734j:plain:w300


(11:30 @suer)

開始一時間ですが、高度な情報戦が繰り広げられています。

f:id:suer:20190410113617p:plain:w300


(12:00 @kokuyouwind)

自分と@kawamataryo は電気羊㌠として、Misocaのデスクトップアプリを作っています!

すでに @kawamataryo が electron-vueを使って試験実装していたため、実質合宿終わりました。

f:id:kokuyouwind:20190410115803p:plain:w300

インストールメディアも用意してあります!(形から入るタイプ)

f:id:kokuyouwind:20190410120235j:plain:w300

微妙に挙動が怪しいところを直したり、全部WebViewではなく部分的にネイティブでフロントを書き直したりを試していく予定です。


(12:10 @kokuyouwind)

お昼ご飯ですー。

親子丼!

f:id:kokuyouwind:20190410121407j:plain:w300


(13:00 @mallowlabs)

@mallowlabs と @torimizuno の @nezurika は社内の統計ダッシュボードを Redash で作り直すプロジェクトをやっていきます。 すでに Redash が立ち上がり、https でつながるようになったので実質合宿は終わりました。 Redash サーバから分析用の DB に接続できない気がするけどそれは些細な問題ですね。

f:id:mallowlabs:20190410130148p:plain


(13:00 id:mizukmb)

会社支給のポケットWifiが届くまでの間、自分のスマホのテザリングで作業していたのですが早速大量のギガを消費して大変なことになっています。

今はポケットWifiが届いたので大丈夫


(13:33 id:komatatsu)

できた!!!!!!(個人情報が多分に含まれるためキャプチャの掲載は差し控えさせていただきます。) うかいミュージアムいこっと


(13:52 id:torimizuno)

エンジニアに助言をいただきながらデザイナーとマーケッターではじめてのSQLを書き始めました💪 もりもり覚えていくぞ💪💪💪

f:id:torimizuno:20190410135042p:plain


(13:52 @mugi_uno) 自宅からリモートで一人チームで参加しています。 合宿は概念です。

ところで、なんか電卓できました

f:id:mugi1:20190410135707g:plain


(15:56 id:mizukmb)

お腹がすいたので朝コンビニで買ったメロンパン食べてる


(17:15 id:nezurika)

redashでSQLを書き始めました! グラフも作れて、やっぱり見えるものになるとテンション上がりますね。 いまは眼精疲労がつらいですがテンションあがりました!

f:id:torimizuno:20190410171453p:plain


(17:19 thara)

AWS Systems Manager完全に理解した。

長良川うかいミュージアム【公式サイト】 に行こうと思ったけど、もう閉まってました。残念。


(17:30 @kokuyouwind)

Windows用のインストールメディアができました。

f:id:kokuyouwind:20190410173226p:plain

これをこうして…

f:id:kokuyouwind:20190410173246p:plain

こうじゃ!

f:id:kokuyouwind:20190410173346p:plain

Windowsでアプリが立ち上がりました。やったね!

本当はMSIインストーラを立ち上げたかったのですが、Macでビルドしたらどうやってもうまくいかず諦めました。ざんねん。

--

(18:45 @mugi_uno)

どうも富山県自宅合宿組です。

できました。

f:id:mugi1:20190410184412p:plain

娘が部屋に乱入してきたので強制終了です。 また明日!!!


(19:23 id:komatatsu)

おいしい!! f:id:komatatsu:20190410192242j:plainf:id:komatatsu:20190410192302j:plain f:id:komatatsu:20190410192325j:plain


(23:10 @kokuyouwind)

温泉に入ってきました。いいお湯でした。

夕食前くらいから、アプリを再起動するたびにログインが必要になる問題と戦っていたのですが、このworkaroundでセッションを残せるようになりました。

もうちょいいいやり方がある気はするというか、SorceryのRememberトークンがSession CookieではなくPersistence Cookieになってて自動ログインされるはずなんですけどね…

まぁ解決したので、今日はもう作業終えてデレステをやろうと思います。


(23:15 id:mizukmb)

寝ようかな


(23:50 @kokuyouwind)

明日もあるし早めに寝よう。

おやすみなさいー。


2日目の記事はこちら。

tech.misoca.jp