【最新サービス試用⑦】「APIs With GitHub」を試用して、いとも簡単にリポジトリのみでAPIを作成

- 日々輩出される素晴らしき最新サービスを素早く試して、不鮮明な先見性を堂々と誇示する記事第七弾。
- 最近のMSやGoogleの素晴らしき発表により、賢人開発者達が躍起になる姿を拝みながら、最新サービスを漁る生活。
- 今回は、簡単にGithubのリポジトリのみでAPIが作成できる「APIs With GitHub」を試用していこう。

## 試用サービス名
### 「[APIs with GitHub](https://apiwithgithub.com/)」

## 概要
- GitHubを利用して、簡易的なAPIを作成できるAPI作成ツール
- リポジトリのみで、APIの作成・公開が可能。
- 形式はjsonで記述することができる。
- コード形式での記述はもちろん、tree表示での視覚的操作も可能。
- ワンクリックで保存・コミット等が可能であり、コマンド等は不要。

## 利用目的
- 開発者によると、下記の利用での想定がある。
    - GitHub管理のポートフォリオサイトのデータの一元管理
    - サーバー設定の際の簡易的なAPI作成

## 結果
- 下記のような画面で、tree上やコード形式等での、API定義が行える。
- 画面上の、**「save」**ボタンで、変更の保存はもちろんのこと、GitHub上でも自動的にコミットされる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336499/a48cda08-5ae5-662b-6689-8ef124e1fb89.png)

- 画面上の、**「link」**ボタンで、内容の結果がすぐ確認できる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336499/6119ba02-8e87-cd84-6082-352777319631.png)

### 機能
- ファイル作成機能
    - 新規ファイル作成
    - 新規フォルダ作成
- エディタでのAPI編集機能
    - tree表示での視覚的編集
    - json形式でのコード編集
    - テキスト編集
- 便利機能
    - ソート(並べ替え)機能
    - 表示圧縮機能
    - コード圧縮機能
    - 検索機能

## 基本手順
### 前提
- このツールを利用するにあたり、**GitHubアカウント**が必要。
- ローカルで使用する場合、下記の環境が別途必要。
    - Git
    - node.js
    - yarn
- OSはMacを利用しているが、Windowsでも下記の手順で可能。
    - ※細かなコマンドの違い(フォルダ作成)等はある。

### ローカルでの使用
- 1. 下記のコマンドをうち、ローカルに「APIs With GitHub」が利用できる環境を作成する。

```bash
# 作業フォルダ作成
$ mkdir ~/work
# 必要環境を導入
$ git clone https://github.com/mddanishyusuf/json-apis-with-github
# json-apis-with-githubフォルダへ移動
$ cd json-apis-with-github
# 依存関係のインストール
$ yarn install
# ローカルサーバーの起動
$ npm run start
```

- サーバー起動後、localhost:3000　にアクセスして、下記の画面が表示されることを確認。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336499/1be8382d-db8d-0dac-de0b-eff9a785711c.png)

- 2. 画面上の、「Make Simple API」ボタンをクリック。
- 3. 下記のような認証画面が表示されるので、「Authorize API With GitHub by Mohd Danish Yusuf」ボタンで、自身のGitHubアカウントと連携する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336499/03d1a7d3-a993-2ddd-f023-041ac1251e6c.png)

- 4. 連携後、下記のような画面が表示されるので、` https://github.com/new `リンクをクリックして、GitHub上にAPI用新規リポジトリを作成する。
    - **※作成の際に、`Initialize this repository with a README`に必ずチェックを入れておく。**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336499/0c515306-3adc-4322-40b5-69fcf7d91ebc.png)

![tst.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336499/5d62ebbb-2935-64fd-a864-3599e51825ca.png)

- 5. 作成後、先程の`make sinple api`画面上で、リポジトリへのインストールが必要なため、「Install this app on your github」のリンクへいき、インストールする。
    - ※リポジトリのみのインストールのため、インストールの際には「Only select repositories」で選択する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336499/74e99946-90cd-025d-25fe-cbde0b9367dc.png)

- 6. インストール後、ホーム(`https://apiwithgithub.com/database`)に戻り、リポジトリが表示されていることを確認する。

<img width="619" alt="test.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336499/464bd12f-4a9a-c387-0842-bd346de4be00.png">

- 7. 表示されているリポジトリをクリックで、エディタ画面が起動するので、下記の画面でAPIを作成していく。

#### 作成
- 最初のタイプ定義では、下記の画面の「□」マークをクリックして、任意のtypeを選択。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336499/c8ecfcfd-d3dd-4985-d776-b878fe46775b.png)

- 値操作では、下記の画面の「□」マークをクリックして、それぞれの操作を選択
    - 追加
    - コピー
    - 挿入
    - 削除

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336499/bbf5b879-cf5d-dcb6-312c-ac21badc6e75.png)

- コードでの直接編集は、下記のメニューから「Code」を選択。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336499/615686a7-b8aa-702b-d232-11d113b6e88d.png)

#### 値操作機能
- 値のフィルタリングやソート等の機能は、画面上のタブメニューの「sort」クリック後、下記の画面にて可能。
    - **※その際のクエリ言語として、[JMESPath](http://jmespath.org/)というjsonクエリ言語が使えるらしい。**

<img width="690" alt="json.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336499/7771e33a-e3ec-04d6-13d6-56021e3bc4be.png">

#### 保存
- APIs With GitHubでは、下記の操作が同時にワンクリックで行える。
    - APIの保存
    - GitHubのリポジトリ上でのコミット・プッシュ
    - APIの公開
- 下記の画面の「save」ボタンをクリックして、APIを保存。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336499/a48cda08-5ae5-662b-6689-8ef124e1fb89.png)

- ファイルが反映されているか、自身のGitHubへいき、確認する。
- API内容を確認するため、先ほどの画面の「link」ボタンをクリック。
    - **※結果の反映に時間がかかることがある。**
- 下記のような形式で表示できていたら完了。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336499/6119ba02-8e87-cd84-6082-352777319631.png)

### リモートでの利用
- 下記のサイトにアクセスして、ローカル同様の手順で、アカウント連携から、リポジトリ作成やAPI作成まで実施。
    - https://apiwithgithub.com/
- ※ローカルやリモートでは、手順はさほど変わらない。

## まとめ
- 今回は、簡単API作成ということで、「簡単という言葉の裏には、壮絶なドラマがあるのだろう」と、新人としてあるまじき達観思考をしながら、記事を書く。
- 「これが個人開発というのが驚愕」という、世界の大賢人がいたるところに存在することを、肝に命じる。
- 試用後恒例の「開発者への礼拝作業」は、いつもと違い、一人ではあるが、その分何倍の時間をかけることにしよう。

## 参考
- https://github.com/mddanishyusuf/json-apis-with-github  
→APIs With GitHubのリポジトリです。大変お世話になりました。
- https://entry.anypicks.jp/product-api-with-github/  
→こちらの記事で知りました。大変お世話になりました。
- https://dev.classmethod.jp/cloud/aws/jmespath-tutorial/  
→フィルタリングの際に利用できる「JMEPath」の入門サイトです。大変お世話になりました。