try! Swift にブース出展してきた

こんにちは。freee でモバイルエンジニアをしている ikke です。 先月の DroidKaigi に続き、try! Swift Tokyo 2018 にも弊社モバイルエンジニア数名で参加してきました。 try! Swift は Apple の作ったプログラミング言語 Swift に関する国際的なカンファレンスです。過去2回の東京開催でも freee はシルバースポンサーになっていましたが、3 回目の東京開催となる try! Swift Tokyo 2018 では、freee はゴールドスポンサーとして協賛させていただき、ブース出展してきました。

イベント会場の雰囲気

1000名近い人が来ていたでしょうか。イベント期間中はかなり熱気がありました。 スポンサーブースは1つのホールに集まっており、下記の写真のような雰囲気になっています。

try!Swift スポンサーブースの様子

各社色々と工夫されたノベルティを配っていたり、ライブコーディングやライブコードレビュー等の催しをしている企業もあり参考になります。 セッションのある 3/1(木), 3/2(金) とも、開会は 09:45 ですが、その一時間くらい前から開場しており、朝食が提供されていました。

朝食として提供されていたパイまんじゅう

意外とこの早い時間から来場している方もいて、和やかなムードで来場者の方と話せるので良かったです。

セッションが行われるのはスポンサーホールの隣にあるホールです。 800人位は入る大きなホールですが、基本ずっと来場者の方々で埋まっていて、時には立ち見も出ていたように思います。 セッションは同時通訳されているので、レシーバーを通して日本語・英語どちらでも聴くことができます。

スピーカーホールの様子

スピーカーホールの一角に畳スペースがあり、ここでもセッションを聴くことができます。ここも結構常に人で埋まっている感じでした。

畳スペースの様子

先月の DroidKaigi でも出張バリスタをされていた鎌倉のアルファベッティカフェの方が、 try! Swift にも出張してくれています。 かなり美味しいので長蛇の列ができていました。

アルファベッティカフェさんのラテアート

お昼ころにランチが配られます。来場者の方々が自然とグループになってこういうスタイルでいただきます。

床に輪になって座りこでお弁当を食べる参加者の方々

新作ノベルティ...?

さて、それでは freee のブース紹介をさせてください。

freeeブースの写真

こんな感じで、いつも通りにセッティングしました。freee ではモバイルアプリにも非常に力を入れており、最近アプリの紹介動画も制作したので、それを持ち込んだディスプレイで放映していました。 ちなみに最近西日本で freee のモバイルアプリの CM を放映していたりもします。

ところで、freee がイベントスポンサーになると毎回用意している freee 水やボールペンなどのノベルティの中に気になるものが...

freeeオリジナルキーキャップと、それを装着したHelixキーボード

な、な、なんと、今回は freee のロゴがプリントされたオリジナルのキーキャップを作り、無料配布しました。

会場に来ていたみなさんはかなり興味を持ってくださったようで、イベント期間中沢山の方が freee のブースまで話しに来てくれました。ただ、キーキャップ以上に、弊社のメンバーに借りてきた自作キーボードにみなさん食いついている様子でしたが笑
何割かの方にはキーボードを作ってる会社だと認識されていそうです。違うんです。一応、クラウド会計・人事労務ソフト等を作っている会社です。

ちなみにこのキーボードは自作キーボードキットの Helix というもので、弊 blog の突撃!隣のキーボードという記事でも紹介されているので、ご興味ある方はこちらも見てみてください。

多様性のある来場者の方々

...話を戻して、みなさん少なくともキーボードには興味を持ってくださり、ブースは大盛況でした。

キーボードに興味津々の皆さん

ブースに遊びに来てくれた方々と、キーボードの話や、普段はどんな会社でどんな仕事しているのか・お互いの会社ではどんなチームで、どういう感じでアプリを作っているか、等々色々とお話しできてとても有意義でした。来場者の中にはフリーランスや副業をしている freee ユーザーの方もいらして、サービスに対してのフィードバックをいただくこともできました。
少し話が逸れますが、私含め freee には副業をしているメンバーも多く、よく自社のサービスをドッグフーディングしています。テックカンファレンスに参加するとフリーランス等で freee を使ってくださっている方と良くお会いするので、サービスに対して客観的な意見をいただく場としてもいい機会になります。

また、try! Swift は国際的なカンファレンスなので、運営者・来場者ともに外国人の割合がかなり多く(全体の2 ~ 3割はいたでしょうか)、freee のブースにも沢山の外国人の方が遊びに来てくれました。話せた方だけでもアメリカ、イギリス、中国、インドネシア、ノルウェーと、様々な国のエンジニアが try! Swift 参加のために来日されているようでした。ブースに来てくれた外国人の中には Facebook や Spotify の iOS エンジニアも居て、自分たちが日常的に使っている海外サービスを開発しているチームの規模等、中の話も聞く事ができたのはとても新鮮でした。みなさん freee のキーキャップも持っていってくれてなんだか感慨深かったです。

セッション

どのセッションも素晴らしかったです。初日の午前だけでも、Swift の明文化されていない挙動を(時に AST を見つつ)探るセッションや、Swift の中間言語である SIL の紹介、CocoaPods のコントリビュータによる Clang モジュールについてのセッションなどかなり濃い印象でした。他にも実際の業務ですぐに取り入れられそうなプラクティスや、AR等近年注目度の高い技術要素に関する内容など多種多様なセッションがありました。各セッションのスライド等は @ozwio さんが Qiita にまとめてくださっています。

個人的には、私もよく利用している Proxy ソフトの Charles を開発した @avon によるセッションで、 iOS 向けの Charles を開発しているという内容の発表を聞いて非常に興奮しました。Charles は iOS アプリの通信をデバッグしたり、Web API のリバースエンジニアリングをするのに非常に重宝していますが、iOS アプリの通信を傍受するためのプロキシ設定が微妙に面倒だったので、いつか iOS 対応しないかな、と思っていたのでした。既に Apple に申請しているとのことだったので、近いうちにリリースされるかもしれませんね。楽しみです。

セッション後のスピーカー Q&A でいい感じに手作り感のあるステッカーを貰いました。

セッション後にいただいたステッカー

まとめ

try! Swift Tokyo 2018 にスポンサーとして参加しましたが、非常に楽しくて充実した時間を過ごすことができました。特に今回ブースを出せたことはかなり良くて、正直普通に参加するだけだとこれだけ多くの初対面の方と話すのは難しいですが、ブースを出すことで国籍も会社も異なる多くの方と交流することができました。 この貴重な機会を作ってくださった try! Swift 運営の皆さん・スピーカーの皆さんと、スポンサーとして協賛してくれた弊社には感謝しかありません。是非また来年も参加したいと思います。

会場にあったLGTMパネル

また、今回大好評だったオリジナルキーキャップのアイディアは、MISOCA さんに多大に影響されています。この場でお礼をお伝えできればと思います。(会場では MISOCA のエンジニアの方ともお話しできました)

tech.misoca.jp

おなじみの採用情報

freee ではモバイルエンジニアを募集中です。 今回に限らず、弊社ではエンジニア向けカンファレンスに精力的にスポンサーとして参加しており、内容にもよりますが、大抵のエンジニア向けイベントには業務の一環として、業務時間にチケット会社負担で参加することができます。 ご興味がある方は是非一度弊社に遊びにいらしてください!

jobs.freee.co.jp

「インクルーシブHTML+CSS&JavaScript」の電子版が発売されます

こんにちは、エンジニアの id:ymrl です。

このたび、弊社でUXデザインを手がける @magi1125 こと伊原力也が監訳した「インクルーシブHTML+CSS & JavaScript」の電子版が Amazon Kindle ストアで発売されます。発売日は3月5日です。

この本ではアクセシビリティに配慮したWebについて、前著の「コーディングWebアクセシビリティ」の内容から踏みこんで、より実践的に実装パターンなどを紹介しています。また、日本語版の発行にあたって非常に多くの訳注が追加され、わかりやすい内容となっています。

この本の輪読会を開いています

輪読会の様子

freeeの社内でも週1回、デザイナー・エンジニアの有志で集まってこの本の輪読会を行なっています。毎回この本を少しずつ読みながら、自社や他社のWebページでの実装状況を確認したり、よりアクセシビリティに配慮した良い実装について議論したりしています。社内にいる先天性色覚異常の当事者も参加していることもあって、特に配色に関する話題では大きく盛り上がります。

freee のアクセシビリティへの取りくみについては、以下の記事・資料もご覧ください。

developers.freee.co.jp

freeeのアクセシビリティ、いまとこれからInside Frontend #2での伊原の登壇資料)

iOS エンジニアがスポンサーとして DroidKaigi に参加して学んだこと

こんにちは、freee でモバイルエンジニアをしている f:id:ryo_abe:20180213185833p:plain RyoAbe です。
私は昨年の中頃に freee に入社し、ほとんどが iOS アプリ開発ではありますが、先日開催された DroidKaigi 2018 に弊社モバイルチーム( Android / iOS )全員で参加しました。

iOS エンジニアの私でも多くの学びがあったのでそれらについて書こうと思います。

モバイルエンジニア総出でスポンサー参加

f:id:ryo_abe:20180213185151j:plain

freee は今回はじめて DroidKaigi にスポンサー参加させていただきました。
(昨年開催された iOSDC JAPAN 2017RubyKaigi 2017 、来月開催される try! Swift にも freee はスポンサーとして参加してます)

来場者もブースに立つスタッフも目線は同じ

f:id:ryo_abe:20180214144257p:plain

今までの社会人経験でスポンサーの一員としてブースに立つのは初めてで、上の写真のように緊張して変な顔になってしまっていました。

「freee をたくさん宣伝したほうがいいのかな…?」
「片っ端から声をかけてステッカーを配った方がいいのかな…?」

なんてことをブースの前で身構えながら初めは考えていましたが、そんな必要はなく自然と近くを通った来場者の方に、

「こんにちは!」
「freee はご存知ですか?」
「普段どういったことされているんですか?」
「会社はどちらにあるんですか?」

などといった他愛もない話をしているだけで、

「今度合同で勉強会やりましょうよ」
「会社に遊びに行きますね!」

と盛り上がり、そこから横のつながりが出来るんだなという学びがありました。

私はスポンサーとしてブースに立つということは、自社のことを積極的に宣伝しなければならないものだと思っていましたが、自然な会話の中で少しでも会社のことを認識してもらえばいいんだなということに気付かされました。

iOS エンジニアでもたくさんの学びがあった

ブースにいることも多々あり、あまりセッションは聞けなかったのですが、Android アプリの開発にはまだ疎い私でも聞いてみて面白かったセッションを紹介したいと思います。

Kotlinアンチパターン

www.slideshare.net

Kotlin を触れるのもしばらくぶりではありましたが、「API から Domain 、UI へと Nullable のデータの引き渡し」や、「通常代入、lazy、custom getter の使い分け」など Swift に置き換えても参考になるようなアンチパターンとその解決策の紹介があり勉強になりました。

Android Studio30分集中超絶技巧100選

Android Studio30分集中超絶技巧100選メモ DroidKaigi 2018 #DroidKaigi #DroidKaigi_room3 · GitHub

さすが IntelliJ IDEA ベースの IDE だなといった感じで、Xcode にはない痒いところに手が届く便利なショートカットがたくさん紹介されました。
地味に便利そうだなと思ったのは、

  • エディタ最大化 Shift + Cmd + F12(Shift + Ctrl + F12)、デフォルトレイアウトを復帰 Shift + F12
  • 空気を読む Option + Enter(Alt + Enter)
  • 1つ(2つ)前のファイル Ctrl + Tab(+ Tab)(Ctrl + Tab(+ Tab))
  • あらゆるポップアップはインクリメンタルサーチ

など。(Xcode にもあったらいいのにな…ないよね?)

また、Git 操作系のショートカットやコードレビューを Android Studio で操作するためのプラグインである Upsource についての紹介もありました。
それらを使いこなしてターミナルや SourceTree を使用せずに IDE のみで Git 周りもすべて操作出来るようになればアプリケーションの切り替えなどする必要がなくなって良さそうですね。

すばらしきGraphQLのSEKAIへようこそ

speakerdeck.com

発表内容は、GraphQL の基礎的な情報、Android からの利用方法、他の Web API との比較などについてでした。
Web API もこれまでは REST 一択でしたが、ここ数年で gRPC や 本セッションの GraphQL などが増え選択肢が広がったんだなと感じました。
業務でも API を書くことが稀にあるのですが、GraphQL はリソース取得系が柔軟であるため複雑な条件式を必要とするリソースに対して、局所的に導入してみても効果がありそうです。

Androidではじめるデザインスプリント

speakerdeck.com

デザインスプリントとは、Google が提唱するベンチャー向けプロダクトデザインのためのフレームワークで、「理解」、「発散」、「決定」、「試作」、「検証」のプロセスを個人作業と共同作業を繰り返し5日間で行う。

新サービスを考える際や既存サービスのデザイン上の問題を解決するために使用されるとのこと。

弊社では Design Doc(Google が提唱していた設計ドキュメント)をカスタマイズして、開発に取り掛かる前に目的や背景や目標、やること/やらないことなどを整理するために書いてます。
このドキュメントは基本的には個々人で書くのですが、デザインスプリントはそれ以前のもう少し漠然とした問題や課題に対して、色んな関係者を巻き込みながら、状況の理解〜検証を行いたい場合に利用すると良いのかもしれません。

そんなわけで Android アプリ作りたくなってきた

私は今回初めて DroidKaigi に参加しましたが、モバイルやプロダクト開発全般に対してのセッションも多く iOS エンジニアでもとても勉強になりました。
Android 開発そのものの話や Kotlin の話もたくさん聞くことができ、久々に Android アプリを作りたくなりました。
(freee は副業 OK だし、せっかくの機会なのでやってみようかな)

また、スポンサーとしてブースに立つことで、たくさんのエンジニアさんや企業さんと関わりを持つことができ良い経験だったなと思います。

私同様 Android アプリを作りたくなったそこのあなた

freee ではモバイルエンジニアを募集中です。
弊社ではエンジニア向けカンファレンスに精力的にスポンサーとして参加しており、それらの有料のカンファレンスには業務の一環としてタダで参加することができます。

ご興味がある方は是非一度弊社に遊びにいらしてください!

www.wantedly.com jobs.freee.co.jp 01intern.com

新卒ビジネス職の人間が、IFTTTを使ってGoogle Homeとfreeeを連携した話

こんにちは、freee株式会社、ビジネス職新卒(2017卒)のgokiです。

普段は、会社の経理や税金計算を支える「会計事務所」に対して、freeeの設定の仕方や運用の仕方についてコンサルティングをさせて頂いてます。

このfreee Developers Blogでは、基本エンジニアが執筆していますが、実は私は大のIT好き。

ちょうど今年のお正月に、最近流行りのGoogle HomeIFTTTを使って「音声入力でfreeeに登録」というものを作ってみて、社内でも好評だったので書かせてもらいます。

「IFTTTと繋げたらこんな方法で経理ができるんじゃないか?」と閃いた方の、少しでも参考になればうれしいです。

目次

IFTTTを使って音声入力でfreeeに入力したかった理由

個人的に2017年は音声入力についてよく耳にする年でした。

今回使用するGoogle Homeだけでなく、AmazonのAlexaやiOSのSiriなど、音声入力が人々の生活に受け入れられて、ITが詳しくない人でも、「OK Google」というと、「あーあれね」というくらいにはなったと思います。

そんな中、私の事業部のマネージャーが「2年後には音声入力で仕事ができるはずだ」と言っておりまして、「あれ?2年後じゃなくてもすぐできるんじゃない?」と思い、取り掛かったのがきっかけです。

実際にやってみた

そもそもfreeeのことを知らない人向けに説明すると、freeeというサービスは会社や個人事業主のためのクラウドの会計サービスです。

いままでオフラインでしかできなかった経理業務が、スマホや遠隔で簡単にできたりすることが特徴です。

そして今回は、IFTTTを使って音声入力でfreeeを入力するという記事です。

と、いうことで

Google Home に「交通費1000円」と喋りかけたら、自動で(旅費交通費1000/現金1000)という会計処理をfreeeにさせたいと思います。

基本的な仕組み

仕組みとしては、「①Google Home →②Google スプレッドシート→③freee」という順番でデータを飛ばしました。

そして①と②の間をIFTTT、②と③の間はGoogleのスクリプト“Google Apps Script(略称GAS)”を使用して、freeeが公開しているAPIを叩いています。

IFTTTから直接freeeに連携できれば良いのですが、IFTTTにfreeeは登録されていません。

そのため、一旦スプレッドシートに音声内容を書き込み、書き込みをトリガーにGASを実行、freeeのAPIを叩くという形としました。

これで、私のような非エンジニアでも、比較的簡単に連携することができます。

IFTTTでGoogle Home とGoogle スプレッドシートの連携

まず、音声入力したデータをスプレッドシートに書き込む仕組みを作ります。 作るにあたって、事前に下記の3点は用意をしておきましょう。

  • Googleアシスタントアプリのインストール
  • Google HomeとGoogleアシスタントの連携
  • IFTTTアカウントの作成

Googleの設定

Google HomeとGoogleアシスタントの連携については、基本的に説明書通り進めれば終わりました。

具体的には、Googleアシスタントのアプリをインストールし、ログイン。

その後Google Homeアプリをインストールし、wifi設定にてGoogle Home を紐づけると、完了です。

IFTTTの設定

あとはIFTTTの設定です。IFTTTにログインしたら「New Applet」よりAppletの新規作成を行います。

Appletのトリガーであるthisの部分は次のように設定します。

  • service→Google Assistant
  • trigger→Say a phrase with a number

最後のtrigger fieldsについてですが、今回やりたいことが

「交通費1000円」と喋りかけたら、自動で(旅費交通費1000/現金1000)という会計処理をfreeeにさせる

ということなので、次の画像のように設定しました

What do you want to sayを「交通費 # 円」、Wath's another way to say itを「旅費交通費 # 円」とする

これで、「交通費○○円」と話しかけたら、○○の部分を別のサービスに渡すことが可能です。

なお、交通費については、人によって「旅費交通費」と言う人もいるため、What's another way to say it? (他の言い方ある?)のところには、旅費交通費も入れておきました。

最後に、レスポンスは「交通費 # 円で登録しました」とし、言語を日本語にして設定完了です。

続いて、thatにあたる部分を作成します。

  • service→Google Sheet
  • action→Update cell in spreadsheet

を選択します。

action fieldsは、「freee音声入力」というBookを指定し、そのシートのA2セルを出力先に指定しました。

また、今回は交通費以外にも「交際費」「消耗品費」はよく使うので、同じ要領でAppletを作成、スプレッドシートへの出力先はB2、C2セルを指定しました。

これで、交通費の場合はA2セル、交際費の場合はB2セル、消耗品費の場合はC2セルに数値が入力されるようになりました。

f:id:g-tani:20180206022514p:plain
交通費以外も同じ要領で登録

ここまでで、「①Google Home →②Google スプレッドシート→③freee」のうち、①→②が完成しました。

次からは②スプレッドシートから③freeeへの入力について説明します。

Google スプレッドシートとfreeeの連携の仕方

freeeは、他サービスとの連携にAPIを公開しています。

そのため、スプレッドシートからGASを使用し、freeeにPOSTするように設定をしましょう。

なお、freeeのヘルプページにはスプレッドシートからAPIを送信する用のサンプルシートがありますので、今回はそちらを使って楽しちゃいました。

support.freee.co.jp

スプレッドシートの設定

まず、ヘルプページ先のシートを開いたら、「ファイル」→「コピー」よりコピーを作成し、音声入力の出力先とするため、Book名を「freee音声入力」に変えます。

このBookの一番左端シートのA2,B2,C2セルは、IFTTT経由で音声入力結果が反映されますので、その受け口となるシート「音声入力」を追加しましょう。

その後は、「使い方」のシートのとおりに初期設定を進め、スプレッドシートとfreeeをOAuth2認証で連携したら初期設定は完了です。

f:id:g-tani:20180206022711p:plain

IFTTTからの書き込みをトリガーに、GASを動かす。

このスプレッドシートでは、Google Apps Script (GAS) を使って「取引入力」というシートに記載した内容を、freeeにPOSTしてくれます。

確認方法としては、メニューの「ツール」→「スクリプトエディタ」を確認すると”freeeメニュー”のスクリプトファイルに freeeMenuDealsPost というPOSTリクエストをしているスクリプトが見つかるかと思います。

そこで、ここからは

「音声入力」のシートに来た情報を、関数で煮るなり焼くなりして「取引入力」のシートに持ってきて、 freeeMenuDealsPost を実行する。

ということをやっていきます。

データを加工する

まず、「音声入力」シートには、交通費か交際費か消耗品かで、どのセルに入力されるかはわかりません。

そこで、A2やらB2やらC2にくる情報を加工します。

私の場合はE2セルに =if(A2<>"","旅費交通費",if(B2<>"","交際費",if(C2<>"","消耗品費",""))) F2セルに =sum(A2:C2) と関数を使って集約するようにしました。※普段Googleスプレッドシートを使わない方は関数の意味はお調べくださいませ

関数によって勘定科目がE2セルに入力されるように設定するスクリーンショット

あとはそのE2,F2データを「取引入力」のシートの「勘定科目」と「金額」に飛ばして(これも関数)準備完了です。

(取引日等の必須項目はtoday関数等で自動で入るようにしておきます)

GASのトリガーを設定する。

GASには、スクリプトの実行のタイミングを設定するトリガー機能があります。

スクリプトエディタ画面の時計マークを押して、「新しいトリガーを設定」から「freeeMenuDealsPost」を「スプレッドシート」から「編集時」として設定します。

トリガー設定画面のスクリーンショット

これで、IFTTT経由でスプレッドシートに情報が書き込まれると、自動でその内容がfreeeへPOSTされる仕組みが完成しました。

あとは、1回POSTするごとに、スプレッドシート側をリセットする必要があるので、スクリプトファイルの「freeeメニュー」の中の

freeeMenuDealsPost のスクリプト内容を

function freeeMenuDealsPost(){
dealsTranscription();
postDeals();  
}

から

function freeeMenuDealsPost(){
  dealsTranscription();
  postDeals();  
  var bk = SpreadsheetApp.getActiveSpreadsheet();
  var ss = bk.getSheetByName("音声入力");
  ss.getRange('A2:c2').clear();
}

に変更しました。

これで終了です。さっそく動かしてみましょう

Google Homeに喋りかけてみる

私「OK Google 交通費1900円」

Google Home「交通費 1900 円で登録しました」

~5秒後~

freeeの画面に交通費1900円が登録されている

できたっ!!!

私「OK Google 消耗品8740円」

Google Home「消耗品 8740 円で登録しました」

~5秒後~

freeeの画面に消耗品費8740円が登録されている

問題なし!

仕訳としてはこんな感じになっていますね。(経理経験者向け)

「仕訳形式プレビュー」に「消耗品費 8,740/現金 8,740」として登録されている

いやー意外と楽だな~

スマホもPCも開かずに、操作できるのがストレスなくて快適です。スマホで入力するより何倍も簡単。

感想

構想自体はずっとあって、お正月暇だったのでやってみたら2時間くらいでできてしまったのが自分でも驚きでした。

そしてなによりも、音声入力なんて実用性ないと思っていたのですが、これがとっても楽。

一人社長なんかは、帰ったらソファーに寝転がって、領収書見ながら「OK Google 交際費3000円」っていうだけで終わる。超便利。

あとは社内の反応でも「細かい手の動きができない人でも入力できる」といった声があって、音声入力って素晴らしいなぁ、と思いました。

エンジニアじゃなくてもHackできる!

今回私が使ったIFTTTとスプレッドシートとfreeeの組み合わせは、いろいろと応用が効くと思いました。

私のような非エンジニアのしかも新卒でも、課題とツールの使い方さえ見つければサービスが作れる。(しかも社内で騒いでもらえる)

面白い時代ですね。

そして、これを「Developers Blogに書いちゃいなよ!」と言ってくれるfreeeという会社は本当に変だと思います!(もちろんいい意味で)

ビジネス職でも最新のサービスやHackが大好きな方、ぜひ一緒に働きましょう!!!

jobs.freee.co.jp

ここまでお付き合いいただき、誠にありがとうございました~