「freee / IBM Cloud / LINE API アプリ開発勉強会」に登壇してみた&サンプルアプリの補足

freeeさんの主催のアプリ開発勉強会に登壇しました。

freee.connpass.com

このイベントは只今絶賛開催中の「freeeアプリコンテスト」関連のイベントになっており、ここではfreeeのAPIを使ったアプリ開発についてサンプルアプリを交えて紹介しました。

speakerdeck.com

今回は僕のパートで紹介したアプリについての簡単な解説とセッション中に話せなかった補足的なお話をします。 個人的にはfreeeのAPIの仕様に苦しめられて作るのにめっちゃ時間がかかりましたが、反応はそこそこでやってよかったと思います。 (欲を言えばライブデモをやったので、その反応がもっと欲しかったw)

今回紹介したアプリは僕のGithubのレポジトリにソースコードが出ているので、中身についてはそちらを御覧ください。

github.com

今回作ったアプリ

freeeのアプリアワードのページのなかで紹介されている「みんなの困り事」の中から

  • 経費精算が大変
  • 打刻忘れが多い

といったことを手元のLINE botを解決してみましょうというものです。

www.freee.co.jp

実際の動作はこちらからご覧いただけます。

youtu.be

開発環境

  • Python
  • Flask
  • ngrok or heroku

以前の記事で紹介した動作環境とほぼ一緒で、ローカルでngrokを使うこともできますし、herokuにデプロイできるようにProcfileも用意しています。

supernove.hatenadiary.jp

今回のソースコードを見てもらうと.envで設定する環境変数がやたら多いですw。 というわけでこの補足記事では各環境変数をどこから持ってくればいいかを紹介します。

LINE Developersから取得する変数

Messaging API

CHANNEL_ACCESS_TOKENCHANNEL_SECRETは、Messaging APIのチャネルから取得します。 また、リッチメニューのIDATTEND_MENU_IDON_WORK_MENU_IDはREADMEのリッチメニューの登録APIを使うと出力されるリッチメニューIDをそれぞれ設定します。 ATTEND_MENU_IDは出勤時に表示させるリッチメニューIDで、ON_WORK_MENU_IDは業務時間中に表示するリッチメニューIDです。

LIFF

REGIST_LIFF_IDFIX_TIME_LIFF_IDはLINEログインチャネルを立ててLIFFを作成すると表示されているLIFF IDをコピーします。 管理がしやすいので、同じチャネルにLIFFを2つ作成してOKです。また設定するエンドポイントは以下の通りです。

  • REGIST_LIFF_ID:【アプリのURL】/regist
  • FIX_TIME_LIFF_ID:【アプリのURL】/fix_time

このときチャネルはユーザIDを共有するため、Messaging APIを立てたときと同じプロバイダーで立てます

Clova OCR

OCR_API_URLOCR_API_KEYについてはLINE Developersでは提供されていないサービスで別途用意する必要があります。 今回のアワードの参加者限定で無料で公開されるので、詳しくは以下の記事からご覧いただければと思います。

prtimes.jp

APIトークンとURLについては申請すると認証情報がもらえると思うので、もらったときにそれぞれ変数を設定しましょう。

Cloudant

認証情報

CloudantはIBM CloudでCloudantのリソースを作成しておきます。ちなみにNode-REDを使っている方はすでにCloudantのリソースがあるのでそちらを使ってもらってOKです。 リソースを開いたらサービス資格情報タブを選択して、新規資格情報を作成をクリックします。 役割の項目は「管理者」を選択した状態で追加をクリックして作成します。

f:id:KMiura:20201001010300p:plain

ここで生成されたURL、ユーザー名、パスワードをCLOUDANT_URLCLOUDANT_USERNAMEそしてCLOUDANT_PASSWORDに設定します。

データベースの設定

TOKEN_DOC_IDについては管理タブをクリックして、Launch Dashboardを開くとCloudantのダッシュボードが開きます。 そこから「Create Database」をクリックして、freee_tokensを作成します。同様にログ取り用にlabor_botも作成しておきます。

f:id:KMiura:20201001011201p:plain

その後、freee_tokensを開き、Create Documentをクリックしてドキュメントの作成画面が開きます。

このときIDが表示されるのでこのIDを.envのTOKEN_DOC_IDに設定します。

ドキュメントにはこちらで紹介されている、アクセストークンを取得するAPIを実行したときのレスポンスの中身を以下のように追加します。

追加したら、Create Documentをクリックしてデータベースの設定を完了させます。

f:id:KMiura:20201001012338p:plain

freeeの事業所ID

COMPANY_IDは先程取得したアクセストークンを使って、事業所IDの一覧を取得するAPIを実行したときのレスポンスに出てくるcompany_idを設定します。

IBM Cloud Functions

ここまで.envファイルに必要な変数を紹介しましたが、更にIBM Cloud Functionsにも追加で変数を設定をすることでfreeeのトークンの自動更新機能を動かすことができます。

こちらを開いて、アクションを作成します。

アクションの作成方法は以下の記事を御覧ください。パラメータ(環境変数)の設定方法も記載しています。

qiita.com

また、使用するコードはレポジトリ内のこちらのコードです。

パラメータは以下の値を設定します。

Parameter Name Parameter Value
CLIENT_ID freeeのアプリ管理画面から取得
CLIENT_SECRET freeeのアプリ管理画面から取得
URL CloudantのURL
PASSWORD Cloudantのパスワード
USERNAME Cloudantのユーザーネーム
TOKEN_DOC_ID .envに設定したもの

環境変数の設定

ngrokで動かす時は特に気にする必要はありませんがherokuでデプロイするには.envファイルの環境変数をheroku側に反映させる必要があります。 一つずつやるのはさすがに面倒なので以下のコマンドを.envファイルのあるディレクトリ上で実行すると環境変数をまとめて反映してくれます。

heroku config:push

まとめ

今回はイベントのデモで使ったコードの環境変数の設定について紹介しました。

ただ値を取るだけの話ですが、APIを使う上ではいろんなサービスを行ったり来たりしながらの作業なので自ずといろんなサービスを触って知ることになるので理解も深まると思います。

そして、また次に何かアプリを作りたいときに簡単にアイデアを形にしやすいです。

逆にAPIを作る側になると設計からリリースまでのプロセスがありとても大変なものです。(この話はよしましょうw。)