非エンジニアでも扱えるfreeeのAPI

#非エンジニアがfreeeのAPI使って色々やってみる

はじめまして投稿です。
色々な方の投稿をQiita上で拝見し、自分も何か作って投稿してみたいなと思い、アカウント作成してみました。

基本は、「会計freee」「人事労務freee」「GoogleAppsScript」を使って、バックオフィスの業務効率化の実現をいかにおこなっていくかを書いていきたいと思います。
（ちなみに、タイトル通り、非エンジニアの投稿です。汚いコードも入ってくる可能性が高いため、その点はご了承下さいませ。。）
この投稿の目的は、あくまでも<B>「非エンジニアでもAPI界隈を盛り上げることはできるんだぞ！！！」</B>ということを、非エンジニアに伝えることにピン止めしています。
細かいセキュリティであったりの話は一切できませんので、そちらも合わせてご了承頂けると幸いです。


##第一弾、非エンジニアがfreeeのAPIを使うための準備をする！

分かる人には分かる、「アクセストークンの取得」までをゴールに書いていきます。
（わからない人は、ふーんと聞き流して、下を読み進めてください。）

たとえば、人事労務freeeは、人事情報をAPIで取得し、様々な加工をおこなうことが可能です。
一般的なオンプレミス型人事システムには、「人事台帳の作成機能」や、「人員集計表機能」が備わっているケースがありますが、残念ながら人事労務freeeにはそこまでの機能がありません。
だからと言って、人事情報をcsv出力して、Excel加工して、、という手間をかけるのは絶対嫌です。
そこに対しての解決策として、人事労務freeeのAPIを活用をご提案致します。
この機能を使えば、クラウドのメリットを享受しつつ、オンプレミス型システムに負けないような帳票出力を実現することが可能です。
しかも、システム内の機能を利用するわけではないので、自社独自の帳票の出力自動化、、なんて夢も叶えることができます。

ただし、概念はわかっても、APIってどこに書けばいいの?よくわからん、、という問題があります。
そこで、この投稿を見て、バチっと準備しちゃいましょう。というものです。


##API利用の手順

さて、freeeのAPIの準備をします。
基本的なリファレンスについては、
https://developer.freee.co.jp/docs/accounting/reference
こちらのwebページに載っております。
ふむふむ、人事だけではなく、会計もあるんだな。
なるほど、人事情報だけではなく、勤怠情報も色々扱えそうだな。という部分を見て頂ければ、さっそく始めていきます。（非エンジニアには、初見では何が何だかわかりません。。）


<B>1. freeeからアプリ作成</B>
先ほどのヘルプページを見ると、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445248/70964f50-37f7-d5da-e85e-95d2714f3400.png)

一番最初の準備はこんな形で記載されております。
①freeeにサインアップ


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445248/d44a70d0-8c4a-f67b-ceb7-d98a67bbaac4.png)




画面下部を見ると、


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445248/778d064e-a788-e213-505e-a6ba7fafc68d.png)
freeeアプリストアという文言が。
ここをクリック。



②アプリケーション一覧から「新しいアプリケーションを登録」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445248/ced3297a-e339-ae57-b3fb-c2dc46260b8a.png)

「今すぐアプリを作成」ボタンをクリック



③アプリの名前を決める
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445248/e5f21a31-0765-2828-4c53-2a933ed98d53.png)


さて、アプリ名は皆さんの好きな名前を付けてください。
サクッと経理なんて名前だと、「後でこれ何のアプリだっけ」なんてことになるので、わかりやすい名前にすることをお勧めします。

さて、名前を付けたら、完成です。
これで土台はできました。


<B>2. 認証等の準備</B>
非エンジニアを苦しめるワードのオンパレードになり始めたと思います。
これってどういう意味?そんなことは考える必要はありません。
脳死でこの手順をおこなってください。
①「Webアプリ認証用URL」を全文コピー。
　新しいウインドウを開いて、そのURLをペーストしてください。
②「アプリ連携の開始」がでてきます。「連携を許可」してください。
③認証用コードが出てきたら、そのウインドウはそのままに、新しいウインドウでGoogleSpreadShhetを開いてください。

ここまでは楽勝ですよね?（私も大丈夫でした。）

　
<B>2. プログラミングをおこなうシートの準備</B>
GoogleSpreadsheetの上部、「ツール」>「スクリプトエディタ」をクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445248/6004c8ec-018e-e142-813d-ceda98659aba.png)
この画面が出てくれば成功です。
この画面がこれからの皆様の相棒です。
(){}なんて書いてます。今まで我々が習ってきた数学ではありえないことがおこっています。
()の中に何も数字が入っていないなんて。
そんなことも考える必要はありません。

全部文章を削除してください。



<B>3. freeeのアクセストークンの取得</B>
非エンジニアにとっての最初で最大のハードル。
「アクセストークン」
何を言ってるのか、さっぱりわかりません。（すみません。）
我々のような人種は、ざっくり「freeeから情報をとるためのパスワード的なもの」だと理解しておけば問題ありません。

先ほど、我々はfreee上でアプリを作成しましたが、アプリとスプレッドシートの連携をおこなう必要があります。

さて、ここも脳死コピペの発動です。

```
function getAccessToken () {
  //登録したアプリケーションの情報
  var appId = "";
  var appSecret = "";
  var appCallbackUri = "urn:ietf:wg:oauth:2.0:oob"; 
  
  //取得した認証コード
  var authcode = "";
  
  //アクセストークン取得用リクエストURL
  var requestUrl = "https://api.freee.co.jp/oauth/token";
  
  //freee APIにアクセストークン発行をリクエスト
  var res = UrlFetchApp.fetch(requestUrl, {
      "method" : "POST",
      payload : {
        "code" : authcode,
        "client_id" : appId,
        "client_secret" : appSecret,
        "redirect_uri" : appCallbackUri,
        "grant_type" : "authorization_code"
      },
      muteHttpExceptions : true
    });
  
  //freee APIから受け取ったデータから、アクセストークンを抜き出す
  var accessToken = JSON.parse(res).access_token;
  
  //アクセストークンをスプレッドシートに保存
  SpreadsheetApp.getActiveSheet().getRange("A1").setValue(accessToken);
}

```

このコードをそのままコピペしてください。
そして、先ほどのfreeeのアプリ詳細を開いてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445248/07e0126e-aaaa-e9d3-d8c8-a8623291e182.png)

このページです。

そして、

```
　var appId = "";
```
↑ここの""の間に、Client IDの箱に入っている文字をコピペしてください。
そして、

```
  var appSecret = "";
```
↑この""の間に、Client Secretの箱に入っている文字をコピペしてください。
最後に、
```
  var authcode = "";
```
↑この""の間に、先ほどの認可コードのページに表示されている文字を入力してください。

くれぐれも""を消さないようにお願いします。


ここまで終われば、一旦「Ctrl + S」で保存しましょう。
基本的に、APIを書く時は、こまめに「Ctrl + S」で保存することをお忘れなく！

 
<B>4. 取得！</B>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445248/13ba6b67-fc6d-5e91-e2ad-5805ba5daefd.png)
↑この、youtubeの再生ボタンみたいなボタンを押してください。
そうすると、何か処理されてます、みたな説明が出てきます。

それが終われば、スプレッドシートの方を見てください。
そうすると、A1のセルに、何か暗号みたいなものが書いていないでしょうか??

（undefinedと出ている場合は、もう一度、3.に戻って、全部正しく入力されているかを確認して、youtubeの再生ボタンを押してください。）

成功している方、おめでとうございます。
これで、freeeとあなたのスプレッドシートはつながりました。
晴れてあなたもAPIマスターへの一歩目を踏みだしたことになります！！


と、ながながと書いてまいりました。
これからfreeeを初めて触る方、初めてAPIを触る方にとって有益な情報になれば幸いです。
共にAPI界隈を盛り上げていきましょう！！


今後は、人事労務freee、会計freeeの連携でできること、
・人事労務freeeでタレントマネジメントができる??
・会計freeeで予実分析ができる??
といったようなシリーズを展開してまいります。

引き続き、どうぞよろしくお願いします！

わかりにくかった部分等は、コメント残して頂けると幸いです。
よろしくお願い致します。