デザインシステムの勉強会『designsystems.tokyo』を開催しました

会計 freee のUI設計や、プロダクト横断のデザインガイドライン整備を担当している @toofu__ です。ゴールデンウィークは10日間で7回UberEatsを注文し、先日は土日2日間で4回注文しました。

少し間が空いてしまいましたが、ゴールデンウィーク前、4月24日にデザインシステムに関する勉強会『designsystem.tokyo』を、弁護士ドットコム株式会社様と合同で開催しました。 designsystems.connpass.com

designsystem.tokyoって?

昨今、Webサービスやアプリの開発において「デザインシステム」が注目を集めています。「多くの人数で長期間にわたって設計・開発を行う際に、一貫性を保てるようにデザインパターンやルールなどを定めたもの」とされており、公開されているものだと GoogleのMaterial DesignSalesforceのLightning Design System などが有名です。弊社でもその構築を進めていますが、いざやってみるとなかなかに大変です。

去年末にデザインシステムの構築と運用手法をまとめた書籍である『Design System - A practical guide to creating design languages for digital products』の日本語版が刊行されました。それをきっかけに、監訳者の佐藤伸哉さんが旗振り役となり、「日本でデザインシステムの実践を進めている企業が集まり、その知見を交換するコミュニティをつくろう」という目的で生まれたのがdesignsystem.tokyoです。

note.mu

コミュニティに所属する企業が持ち回りで主催する形で勉強会が行われており、その第2回として弁護士ドットコム様と弊社主催の会を行わせていただきました。 会場入り口に設置された看板

各社のデザインシステム実物を肴に酒を飲む会

弁護士ドットコム様との事前の打ち合わせにおいて決まったことは「各自がつくっているデザインシステムの実物を見ながら議論を行おう」ということでした。デザインシステムはその性質上、企業のプロダクト開発の内情にかかわることが多く、なかなか一般に公開しづらいものであります。しかし現場のリアルな議論をするためにはつくっているデザインシステム実物を囲むことが重要と考えたため、参加者をコミュニティ所属企業に限定して成果物を開示することにしました。

弊社はデザインシステムとしてUI/UXガイドライン「Groove」UIコンポーネントライブラリ「Vibes」を整備しています。経緯や概要については先日行った弊社主催のイベント『freee Tech Night』で簡単に触れましたが、designsystems.tokyoではその中身であるGrooveの社内Googleサイトや、VibesのSketchファイルおよびStorybookをプロジェクタに映しながら構成について説明させていただきました。

現物をみながら、参加者の方たちと下記のような観点で議論を行うことが出来ました。

  • ガイドラインで定義されるべき内容
  • アトミックデザインを用いたUIコンポーネントの現実的な運用
  • デザインシステムを作成するコストはどのようなロジックで捻出するのか
  • 人間を信じるか信じないか

後ろのほうから会場を写した写真。テーブルの上にはビールとピザがある。
ピザとビールを片手にデザインシステムについて語る

speakerdeck.com
先日の『freee Tech Night』で弊社エンジニアが発表したデザインシステム構築の経緯と概要

お酒が入っていることもあり、トピックによっては「ウチはこうやってる」「いや弊社は」といった感じで議論が白熱する感じでした。(会自体がクローズなものであったので具体的な中身は書けないのはすみません。気になる方はコミュニティへご参加を!)

弁護士ドットコム様はFigmaを利用した既存UIのインターフェースインベントリを開示してくださり、複数並行しているブランドとデザインシステムの関わり方についての説明をしてくださりました。巨大なインベントリがプロジェクタに映し出されたときのどよめきが印象的でした。

デザインシステムの知見交換したい人はdesignsystems.tokyoへ

弊社でデザインシステム構築に本格的に取り掛かり始めて1年余が経ちますが、まだ完全に運用に乗り切っているとは言えない状況です。参加企業にもそういうところが多く、みんなの知見を合わせてお互いのプロダクトをよりよくしていくのが大事かなと思います。勉強会参加に興味のある事業会社の方がいましたら、designsystems.tokyo公式Twitterアカウントまでご連絡いただくか、connpassのグループでイベント予定をご確認ください。

GYOMU Hackers Guildを2年間運営してわかった、コミュニティ運営のコツ

こんにちは。freee株式会社で初代GYOMUハッカーとして、GYOMUハック(a.k.a 業務ハック)チームに所属しているmiryです。

GYOMUハックチームではマーケティングやセールスチームなど社内のビジネスチームが日々業務で使うシステムの構築、データ設計、業務設計・業務効率化、課題解決などを行なっています。

GYOMUハックの仕事については記事を書いたりしていますので、ご興味のある方はお時間のある時にぜひご覧ください。

codezine.jp

先日、私の運営しているコミュニティであるGYOMU Hackers Guildが2周年を迎えました。

最近コミュニティ運営についていろんな方に相談されるようになったので、せっかくなのでみなさんにもご紹介できればと思います。

覚えておいてほしい3つのこと

私がコミュニティ運営を2年続けてきてたどり着いた、大事だと思うことは次の3つです。

  1. どんなコミュニティにしたいのかを参加者に伝える
  2. 定期的にイベントを開催する
  3. できることだけやる

簡単なことですが、なかなか実践できないものでもあります。 私がやってきたコミュニティ運営の振り返りと共に、書いていきます。

GYOMU Hackers Guildの歴史

始まりは悩んだから

コミュニティを作ろうと思ったきっかけは、GYOMUハックというポジションが当時社内に1人しかおらず、相談相手や壁打ち相手がいなかったことでした。 もちろん相談すれば他のエンジニアも応えてくれる環境はありましたが、やっていることの毛色が違いすぎて、このままではいけないなという漠然とした不安を抱えていたのです。

そんな時、外部のいろんな勉強会に参加して、同じようなことをやっている人はいないのかといろいろ探していました。 ですがやはり技術系のイベントが多く、業務改善系の勉強会をやっているところは見つけられなかったのです。

途方に暮れていたある日、Salesforceの方が参加する某社でのイベントで初めて同じような仕事をしている人と出会いました。その方のお話が、完全に当時の私の悩みとフィットしていて、衝撃を受けたのを覚えています。そして、同じ悩みを抱えているのが自分だけではないと確信したのです。

その後、その方とのお話がきっかけでコミュニティを立ち上げる運びとなりました。

最初に決めたこと

コミュニティを始めるうえで最初に決めたのは、どんなコミュニティにするのか、でした。 どんな人にきてもらいたくて、どんなことが得られるイベントを開催するのかを決めました。

いろいろ悩んで「ITをつかって業務改善プロジェクトをしている/ビジネスチームとやりとりをすることが多い」とか「BPRを推進している」とか書いています。

当時まだサブスクリプションビジネスのサービスが日本でも導入され始めたばかりで、GYOMUハックのような仕事をしているのが情シスや社内SE、BPRといろんな呼ばれ方をしていたこともあり(これは今もですが)、書き方には苦労しましたし、いまもこれがベストかはわからないのですが、だいたいターゲット層の方が来てくださっているので、わりと満足しています。

f:id:mirygoaround:20190509180955p:plain
イベントの様子

そして、コミュニティの目的は次の通りにしました。

  • 業務改善系の社内エンジニアと交流すること
  • 意見交換会をすることによってKnowledgeを得ること
  • 新たな刺激を得ること
  • 会社を超えて気軽に相談する関係が築けること

ナレッジがどうしても社内に閉じがちなので、その枠を取っ払っていきたいなという強い思いがあったのです。

実際にコミュニティをやってみての苦労

絶対に継続しよう、隔月開催しよう、と最初に決めました。 そしてはじめは他の勉強会のように、いろんな会場で開催してみよう、軽食や飲み物を準備しよう……と考えていて、実際やってみました。しかし思いの外調整の負担が大きく、すぐにくじけそうになりました。このままじゃとても面倒すぎて続けられないという危機感から、できることだけやろうと割り切りました。

その結果、現在はこんな工夫をしています。

  1. 会場は毎回勝手知ったるfreeeのオフィス内イベントスペースを使う
  2. 飲食物は準備しない。参加者に自分で買ってきてもらう
  3. 募集にお手伝い枠を作って、受付やマイク運びを参加者に手伝ってもらう

本当にただこれだけですが、会場の調整や飲食物の準備がなくなっただけでも本当に楽になりました。あとは当日のスライドの準備(テーマを書き換えるだけ)をするだけ、くらいまで準備に手間がかからなくなりました。 そしてありがたいことに毎回30人以上、多い時には50人は集まるコミュニティに育ちました。

モチベーションの維持が一番たいへん

こうしてほぼワンオペコミュニティとして13回続けて開催し、無事に2周年を迎えたGYOMU Hackers Guildなのですが、一番たいへんなのがモチベーションの維持です。 1人で盛り上がってるんじゃないのとか、反応ないとか、当日のドタキャンとか……全部完全に私のダメージになります。

そこで毎回イベント開催の際には、自分から参加者に思いを伝えるようにしていて、コミュニティは一緒に作り上げるものなんだよ!って声を大にして言っています。 そう伝えることで、そのコミュニティに賛同してくれる人が残りますし、主催者からしても参加者からしてもWin Winの関係を築けると思っています。

Facebook Groupの投稿

モチベーチョンがだだ下がりすると、唐突にエモいことを言い出したりもします。 というわけで、今目下の課題は私のモチベーション管理です。笑

コミュニティ運営で利用しているツール

世の中には便利ツールがたくさんあるのですが、私がGYOMU Hackers Guildで使っているツールを紹介します。

connpass

いろんなイベント管理システムがあったのですが、結局connpassに落ち着きました。便利なところは、

  • いろんなアカウントがTwitterで拡散してくれる
  • 参加者へのメッセージが送れる
  • 管理者を複数設定できる

などの点です。以前使っていたツールではかなり集客に苦労しましたが、今ではほとんど集客に苦労しなくなりました。

gojo

グッズを作りたい!という気持ちが高まって、使い始めたのがgojoというサービスです。共通財布を作ることができます。 お金を利用する際は承認制なので、お金の流れが見える化できます。

おかげさまでみなさまの寄付のおかげでステッカー作成できました👏

GYOMU Hackers Guildへの思い

最後はコミュニティ運営の話というより自分のコミュニティへの思いみたいな話をしますと、GYOMUハックという仕事は本当に最近出てきた新しいエンジニアの形だと思っています。 今までは自社開発という選択肢が主流で社内SEがごりごり頑張って作ってきた社内システムですが、クラウドやサブスクリプションビジネスの台頭により様々なSaaS、PaaSがでてきて、それを取り入れる企業が増えてきています。

そうなった時にツールを取り入れれば業務改善できるという魔法みたいなことは絶対にないので、データ設計やシステム間連携など緻密なエンジニアリングが必要になるのです。それをやっているのが、GYOMUハッカーたちなのです。 これからどんどんサービス導入は増えていくと思うので、GYOMUハック界隈をみんなで盛り上げていきたいです!

コミュニティでは素敵な仲間と出会えます

みなさんも、なにかの思いが溢れたらぜひ、コミュニティ運営してみませんか。きっと素敵な仲間に出会えますよ! 長々と書きましたが本当にこのコミュニティをやってきて良かったと感じていますし、私自身も素敵な仲間に恵まれました。

コミュニティやってみたい、コミュニティ運営難しそう、続けるのが辛い、と思っているこの世界の誰かに届いたなら嬉しいなと思います。 大事なのは本当に次の3つだけです。

  1. どんなコミュニティにしたいのかを参加者に伝える
  2. 定期的にイベントを開催する
  3. できることだけやる

いつかコミュニティ運営しているみなさんで集まって、あるある話で盛り上がりたいななどと画策しています。

もし興味ある方はお声掛けください。

最後までご覧いただきありがとうございました!

「ノンプログラマーのためのfreeeAPI活用講座」を開催しました!

こんにちは。freeeのPMM(プロダクトマーケティング)チームでAPIの活用支援をしております、谷と申します。

先月3/18から4/10、4/17の3日に渡って「ノンプログラマーのためのfreeeAPI活用講座」というイベントを開催し、講師をさせていただきました。

こちらについて、イベント内容のご報告と「ぜひ自分も取り組んでみたい!」という方のために、講座内容をレジュメやサンプルも含めて全て公開させていただきます。

「freeeを利用しているけども、まだAPIを活用できていない」という事業者様がいらっしゃいましたら、ぜひご参考ください。

イベントについて

弊社プロダクトの会計freee、人事労務freeeでは、API *1というものを公開しています。

support.freee.co.jp

APIを用いると、freee外のアプリケーションにてfreeeのデータを取得したり、新規登録したりすることができます(もちろん認証などの手順を踏まないで勝手に操作することはできません)

今回の「ノンプログラマーのためのfreeeAPI活用講座」では、今までプログラミングをほとんど行ったことのないfreeeを利用しているの経理の方々をお呼びし、Google Apps Script(通称GAS)を使用して”経営管理資料の作成自動化”を最終目標として、APIを活用してみるハンズオンイベントでした。

第一回(3/18開催)の様子

第一回では、そもそもAPIとは?という解説から、Google スプレッドシートを用いて、会計freeeから勘定科目の一覧の自動取得を行ってみるところまで行いました。

20名以上の参加者のみなさんがPCに向かっている写真
20名以上の経理担当者様が、APIを実際に叩いています

みなさん、最初は悩みながらでしたが、freeeからデータが取得でき初め「やった!」という声があちこちから聞こえてきました。

また、特に詳しく説明はしなかったのですが、皆さん勘定科目の取得ができれば、同じような取引先情報や、部門情報の取得なども同じ要領でスイスイと取得されていました。(すごい!!)

第二回(4/10開催)の様子

前回から少し日が空きましたが、第二回では試算表の取得を行いました。 試算表とは、貸借対照表や損益計算書のことで、会社の財産状況や収益情報が詰まった「資料作成において、最もよく使うデータ」の1つです。

講師の私も、参加者の皆様にいよいよ実践的なことをご案内することができるので、ワクワクしていました。

実際に損益計算書を取得して、自動で売上高販管費率を計算してくれるツールを作りました

Googleスプレッドシート上に構築された売上高販管費率を計算するツールのスクリーンショット。
売上高販管費率を計算するツール

今回行った分析資料作成は、非常に簡素なものです。 しかし、貸借対照表、損益計算書さえ取得できれば、あとはスプレッドシートの関数で自由に計算式を組んで分析資料を作ることができます。

今までCSVでデータダウンロードして貼り付け...を何度も繰り返していたことを考えれば、十分これだけでもAPIを使う価値がありますね。

第三回(4/17開催)の様子

最後となる第三回では、前回の試算表取得の応用編を学習しました。 例えば、試算表の取得期間を変更したり、取引先ごとの内訳金額を表示したりと言った内容です。

かなり盛りだくさんな内容で、正直詰め込みすぎかな、と心配していました。

しかしご参加いただいた皆様は第一回から顔つきも変わって、難しいところでも真剣な表情で前のめりで話を聞いていただき、無事皆さん最後まで完走されました。

本当にお疲れ様でした。

真剣な顔つきで講義を聞いている参加者のみなさんの写真
真剣に講義を受けていただいています、すごい集中力...

軽食とドリンクを片手に真剣に話をする参加者のみなさん
懇親会で会社の垣根を超えてAPIについて熱く語っています

全三回のコンテンツを作るにあたって大事にしたこと

プログラミングを学ぶ手順としては、教科書的には、基礎を学び、その後具体的なものを作っていく、という流れかと思います。

しかし、本イベントでは「変数宣言、配列、ループ処理...」などのお話は、第一回からコピぺで利用はしながらも、詳細な仕組みは最後の回で説明をしました。

これは、最初からプログラムの基礎的なことを始めてもイメージがしづらいこと。また、参加者の皆さんが親しみのある試算表などの取得をしてみて、「楽しい!嬉しい!」という体験をしてもらって、プログラミングに対する恐怖感を無くして欲しかったことが背景にあります。

ループを解説するイラスト。1階から10階に牛乳を届けるのを例に説明している
最終回にて、ずっと使っていたループ処理についてやっと説明

実際、第三回では、コードの詳細な解説をすることで「あ〜〜ここってそういう仕組みだったんだ!」と参加者の皆様嬉しそうにうなづいてくださっていたのが、とても印象に残っています。

参加者様の中には「数年前にプログラミングに取り組んだが挫折した」という方もいらっしゃいましたが、参加後のアンケートでは「プログラミングを楽しいと思えた」というお言葉をいただき大変嬉しかったです。

アンケートにてNPS(ネット・プロモーター・スコア)を測定していましたが、こちらも最終回は73と非常に高い満足を感じていただけたようです。

講座で使用したレジュメ

このような内容で進めた本講座ですが、第一回〜第三回のレジュメを下記で公開しています。自分もAPIを使ってみたい!という方は、ぜひチャレンジしてみてくださいね。

第一回レジュメ(APIの説明と勘定科目の取得アプリの作成)

第二回レジュメ(試算表の取得と加工:基礎編)

第三回レジュメ(試算表の取得と加工:応用編、GASサンプルあり)

GASはノンプログラマーの味方!!

freeeAPIを使ったアプリケーションを作るとなると、Oauth2.0認証*2というものが必要になります。 しかし、今回はGoogle Apps ScriptのOauth2.0認証ライブラリを活用することで、簡単に認証を済ませられるようにしています。

また、「毎朝自動で試算表を取得する」などのバッチ処理に関しても、Google Apps Scriptのトリガー機能を使用することで、マウス操作だけで完結することができます。

Google Apps Scriptのトリガー機能を設定する画面のスクリーンショット
Google Apps Scriptのトリガー機能....とても便利!

このように、1からコードを書かなくても、十分現場で使えるアプリケーションを作ることができるのは、本当にノンプログラマーにとってはありがたいな、と思います。

経理の方がプログラミングを学ぶ意義

経理の方の主な仕事は、会計帳簿の作成です。そして、会計帳簿は社内のあらゆる情報を吸い上げて、そして外部に報告する必要があります。

それゆえ、社内の業務フローの課題発見や、その改善の道筋について、全体感を持って考えることができるのは経理の方の特筆すべきスキルだと思います。

その既に持つスキルを十二分に活かすために、「簡単な問題なら解決策を自分で実現する力」を身につけてもらいたい、というのが本講座の目的でした。

これからもこのような活動を通して、経理の方が持つ「仕訳を正しく打つ力」だけでなく、「業務フローの課題解決力」がもっともっと発揮されるようにしていきたいなと思っています。

なお、5月には実際にAPIを活用されている企業様の事例等が聞けるセミナーも開催予定となっております。 ご興味のある方のご参加をお待ちしております。 go.freee.co.jp

誰でも技術を活用できる世界に

freeeではユーザーにとって本質的な価値があると自信を持って言えることをする、ということを「本質的(マジ)で価値ある」として価値基準に掲げ何よりも大事にしています。

そのためには、「プロダクトを作る、売る」だけではなく、今回のように世の中の経理の人がもっと輝けるように、という取り組みも進めています。

しかし、このようなことができる世界観は、APIの開発はもちろん、社内外の様々なエンジニアの方が作りあげたことで成り立っています。(ちなみにfreeeでは、2013年のプロダクトリリースと同じ年にAPIを公開しています)

もし、このような世界を一緒に作って、実現していきたい!という方は、現在エンジニアを募集をしていますので御応募お待ちしております。

jobs.freee.co.jp

*1:Application Programming Interface: 外部のアプリケーションとデータのやりとりをするためのインターフェース

*2:APIを通してfreeeのデータを操作するために、誰がその操作をしようとしているのかを認証する必要があり、そこでOAuth 2.0という規格を使用します

try! Swift 2019 - Tokyo にブース出展してきました

こんにちは。freee のモバイルチームでiOSエンジニアをしている大内と申します。

先日3/21 - 3/23に開催されたtry! Swift 2019 - Tokyo に弊社iOSエンジニア3名で参加してきました。今回はゴールドスポンサーとして協賛させていただき、ブース出展もさせていただきましたので、その参加レポートをご報告させていただきます。

ブースでの集合写真

なお、freee のモバイルチームは過去のtry! SwiftイベントやiOSDCなどにもブース出展しており、そちらのレポートもございますので合わせてご覧いただければ幸いです。

developers.freee.co.jp

developers.freee.co.jp

ブースの様子

ブースの様子。机の上にはfreeeキーキャップを装着したキーボードが置かれているブースの様子。確定申告ガイドやステッカーが置かれている

freee のユーザー様含めたくさんの方とお話できてとても楽しかったです!

お話させていただいた方々の中には業務外でアプリを作られている方も多く、ブースでお話させていただいた私も「ワシも個人でアプリを作って、あわよくば著名Youtuberに紹介されるなどして莫大な副収入を...」と個人開発の機運が高まりました。

また、ブースで配布させていただいた確定申告ガイドが非常に好評でした。ブース出展時はだいたい配布しているので、カンファレンス等で freee のブースを見かけたらお気軽に遊びに来てください!モバイル関連のカンファレンスでは freee のモバイルエンジニアがアプリの使い方を簡単にご紹介させていただく機会も設けさせていただいております。

ちなみにこのガイド、PDF版もあるのです。

印象的だったセッション

どのセッションも楽しく素晴らしい発表だったのですが、ここでは私が翌日から実践してみたいと思った発表について簡単に触れてみたいと思います。

テストケースでMemory Leakを発見する

tarunonさんからメモリーリークをチェックするassertライブラリXCTAssertNoLeakの発表がありました。テストのコストに関しては導入コストと維持コストがあると思うのですが、XCTAssertNoLeakはどちらのコストも低そうで、帰ったらすぐ試してみたいなと思っていました。

www.icloud.com

導入コストに関しては、いわゆるユニットテストだとそもそもテスト容易な設計になってない場合、「テストを書こうとするとリファクタリングが必要、ゆえにリグレッションが発生するかもしれないがそれを手当するテストがない...」といった感じで心が折れると思うのですが、メモリーリークテストに関しては対象のソースコードがある程度ダメでもちょっとしたボイラープレートを書けばパワープレイで導入できてしまいそうな印象です。

維持コストに関しては、リグレッションを検知した際に、テストかアプリケーションの実装を修正する必要があるわけですが、メモリーリークテストの場合は導入時のちょっとしたボイラープレートっぽいのものを書いたら、メンテフリーで長期稼働が期待できそうです。

とはいえ、こちらのライブラリ導入にはSwift5対応が必要なので、freee 本体ではなく、まずは自分でチマチマとメンテしているライブラリで試してみています。 (Xcode10.2でCarthageを使って導入してみたのですが、image not Foundのエラーが出てしまいうまく動きませんでした...😭)

突然のゾンビ自慢

Debug Memory Graphで循環参照が可視化された様子
六芒星

Debug Memory Graphでこのような芸術的な循環参照を見つけると嬉しくなりませんか。薄目で見ると六芒星のように見えてきて愛着が湧いてきます。 メモリーリークテストでゾンビ検知を自動化できるようになると、もう君ともお別れですね。 ちなみにこちらのゾンビは副作用を発生せず、静かに眠っているだけで安全なのです。。

モバイルのデザインシステムを構築する

本発表の発表者であるKristina FoxさんはIntuitのQuickBooksという財務マネージメントアプリのiOSエンジニアで、freee のエンジニアである私としてもこのセッションは今回のtry! Swiftで最も楽しみにしていたセッションの一つです。

speakerdeck.com

freee でも最近UIコンポーネントのライブラリを作って再利用可能なUIコンポーネントをライブラリにまとめたり、歴史的な経緯で混沌としているスタイルを統一するためのスタイルガイドの作成を行っているのですが、なんとなく手探りで進めていたので、発表を聞いて全体感が整理できてとても参考になりました。

また、スライドの中で言及されていたmaterial-components-iosは今回のスライドではじめて知ったのですが、ドキュメンテーションや実装、サンプルの作り方などとても参考にしていきたいと思います。

github.com

ポートレートモードを自作しよう

koooootakeさんから深度情報のない2次元画像をポートレイトモードに変換するとても面白い発表がありました。この発表に関しては個人的に未知の内容ばかりでとても驚きに満ちた発表で興奮しました!!

speakerdeck.com

github.com

スライドで「おお、すごい!」と感じた各ステップも全てソースコードで公開される太っ腹で、発表までの試行錯誤に関しても記事が公開されておりとても楽しい内容でした。Qiitaのこちらの記事も面白いので一読をおすすめします。 公開されたソースコードとスライド中で触れられているGrabCutなどのキーワードを手がかりに、自分も画像処理についてキャッチアップしていきたいなと気持ちが高まりました 😤

最後に宣伝

freee のモバイルチームは業務の一環でtry! SwiftやiOSDC、DroidKaigiなどのモバイル関連のカンファレンスに参加しておりますので、freee Tシャツを着た社員を見かけたら気軽にお声がけください。またエンジニアを募集しておりますので、興味があればぜひご応募ください。

jobs.freee.co.jp

さまざまな企業のノベルティの写真
お土産。いつも頂いてばかりですみません。