「freee / IBM Cloud / LINE API アプリ開発勉強会」に登壇してみた&サンプルアプリの補足
freeeさんの主催のアプリ開発勉強会に登壇しました。
このイベントは只今絶賛開催中の「freeeアプリコンテスト」関連のイベントになっており、ここではfreeeのAPIを使ったアプリ開発についてサンプルアプリを交えて紹介しました。
今回は僕のパートで紹介したアプリについての簡単な解説とセッション中に話せなかった補足的なお話をします。 個人的にはfreeeのAPIの仕様に苦しめられて作るのにめっちゃ時間がかかりましたが、反応はそこそこでやってよかったと思います。 (欲を言えばライブデモをやったので、その反応がもっと欲しかったw)
今回紹介したアプリは僕のGithubのレポジトリにソースコードが出ているので、中身についてはそちらを御覧ください。
今回作ったアプリ
freeeのアプリアワードのページのなかで紹介されている「みんなの困り事」の中から
- 経費精算が大変
- 打刻忘れが多い
といったことを手元のLINE botを解決してみましょうというものです。
実際の動作はこちらからご覧いただけます。
開発環境
- Python
- Flask
- ngrok or heroku
以前の記事で紹介した動作環境とほぼ一緒で、ローカルでngrokを使うこともできますし、herokuにデプロイできるようにProcfileも用意しています。
今回のソースコードを見てもらうと.envで設定する環境変数がやたら多いですw。 というわけでこの補足記事では各環境変数をどこから持ってくればいいかを紹介します。
- 今回作ったアプリ
- 開発環境
- LINE Developersから取得する変数
- Clova OCR
- Cloudant
- freeeの事業所ID
- IBM Cloud Functions
- 環境変数の設定
- まとめ
LINE Developersから取得する変数
Messaging API
CHANNEL_ACCESS_TOKEN
とCHANNEL_SECRET
は、Messaging APIのチャネルから取得します。
また、リッチメニューのIDATTEND_MENU_ID
とON_WORK_MENU_ID
はREADMEのリッチメニューの登録でAPIを使うと出力されるリッチメニューIDをそれぞれ設定します。
ATTEND_MENU_ID
は出勤時に表示させるリッチメニューIDで、ON_WORK_MENU_ID
は業務時間中に表示するリッチメニューIDです。
LIFF
REGIST_LIFF_ID
とFIX_TIME_LIFF_ID
はLINEログインチャネルを立ててLIFFを作成すると表示されているLIFF IDをコピーします。
管理がしやすいので、同じチャネルにLIFFを2つ作成してOKです。また設定するエンドポイントは以下の通りです。
REGIST_LIFF_ID
:【アプリのURL】/registFIX_TIME_LIFF_ID
:【アプリのURL】/fix_time
このときチャネルはユーザIDを共有するため、Messaging APIを立てたときと同じプロバイダーで立てます。
Clova OCR
OCR_API_URL
とOCR_API_KEY
についてはLINE Developersでは提供されていないサービスで別途用意する必要があります。
今回のアワードの参加者限定で無料で公開されるので、詳しくは以下の記事からご覧いただければと思います。
APIトークンとURLについては申請すると認証情報がもらえると思うので、もらったときにそれぞれ変数を設定しましょう。
Cloudant
認証情報
CloudantはIBM CloudでCloudantのリソースを作成しておきます。ちなみにNode-REDを使っている方はすでにCloudantのリソースがあるのでそちらを使ってもらってOKです。
リソースを開いたらサービス資格情報
タブを選択して、新規資格情報を作成をクリックします。
役割の項目は「管理者」を選択した状態で追加
をクリックして作成します。
ここで生成されたURL、ユーザー名、パスワードをCLOUDANT_URL
、CLOUDANT_USERNAME
そしてCLOUDANT_PASSWORD
に設定します。
データベースの設定
TOKEN_DOC_ID
については管理
タブをクリックして、Launch Dashboard
を開くとCloudantのダッシュボードが開きます。
そこから「Create Database」をクリックして、freee_tokens
を作成します。同様にログ取り用にlabor_bot
も作成しておきます。
その後、freee_tokens
を開き、Create Document
をクリックしてドキュメントの作成画面が開きます。
このときIDが表示されるのでこのIDを.envのTOKEN_DOC_ID
に設定します。
ドキュメントにはこちらで紹介されている、アクセストークンを取得するAPIを実行したときのレスポンスの中身を以下のように追加します。
追加したら、Create Document
をクリックしてデータベースの設定を完了させます。
freeeの事業所ID
COMPANY_ID
は先程取得したアクセストークンを使って、事業所IDの一覧を取得するAPIを実行したときのレスポンスに出てくるcompany_id
を設定します。
IBM Cloud Functions
ここまで.envファイルに必要な変数を紹介しましたが、更にIBM Cloud Functionsにも追加で変数を設定をすることでfreeeのトークンの自動更新機能を動かすことができます。
こちらを開いて、アクションを作成します。
アクションの作成方法は以下の記事を御覧ください。パラメータ(環境変数)の設定方法も記載しています。
また、使用するコードはレポジトリ内のこちらのコードです。
パラメータは以下の値を設定します。
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。)