初心者の私が、ブラウザで自然言語処理API(COTOHA API)を試せるようになるまで【基本ガイド】

#はじめに

ブラウザ上でCOTOHA APIを試すまでのやり方です。
アクセストークンの取得とAPIの実行までの超基本ガイドです。

#投稿のきっかけ

はじめまして。COTOHA APIのPR担当をしています。
先日[COTOHA API]( https://api.ce-cotoha.com/)をリリースしたため、エンジニアではない私ですが、言語処理やAPIの理解のため、自分自身でも利用できるようになりたいとおもいました。
ただ、技術に疎い私には、試してみるまでのハードルがかなり高いです。

まずはブラウザ上でCOTOHA APIを利用できるように、RESTClient上でCOTOHA APIにアクセスできるようになるまでの道のりを丁寧に教えてもらったので、その方法をアップします。

#章立て

章立ては、**↓**のとおりです。

[1. REST Clientをインストールする](#1-REST-Clientをインストールする)
[2. COTOHA APIにログインする](#anchor2)
[3. REST Clientでアクセストークンを取得する](#anchor3)
[4. COTOHA APIを実行する](#anchor4)

キャプチャをたくさん貼っていたら、けっこう長くなってしまいました。
実際の作業は<font=clolr"red">5分</font>くらいで利用できるようになると思いますので、さくっと試してみてください！
<a id="anchor1"></a>
#1.REST Clientをインストールする

まずは、REST APIを利用できるRESTクライアントソフトウェアをWEBブラウザの拡張機能として準備します。

ここではFirefoxを利用しました。

[こちら](https://addons.mozilla.org/ja/firefox/addon/restclient/)にアクセスしてください。
クリックすると、さっそくダウンロード画面です。
![firefox.png](https://qiita-image-store.s3.amazonaws.com/0/287604/d8243beb-14b0-bbd7-a837-b9c9e4fbc2ce.png)

「**+Firefoxへ追加**」をクリックすると、
「**1個のアドオンをダウンロードして検証しています**」とダウンロードがはじまります。

10秒ぐらいで、検証完了します。

「**このサイトはFirefoxに1個のアドオンのインストールを求めています**」とインストールの承認

画面がでてきます。
ここで「**インストール**」を選択します。

すると、3秒くらいで「**REST Clientがインストールされました**」とのこと。
インストールされるとヘッダーにREST Clientのアイコンが表示されます。
（赤バックにゴールドの太陽マークです）
![firefox_2.png](https://qiita-image-store.s3.amazonaws.com/0/287604/5f375f4f-fa3d-a9ea-30c4-406e65295162.png)


このREST Clientのアイコンをクリックすると、無事にREST Client画面が表示されました。
![firefox_3.png](https://qiita-image-store.s3.amazonaws.com/0/287604/f9769346-f8b9-77c2-d53f-17c03a0e033e.png)


※ちなみに、REST Clientマークが表示されない場合は、アドオンが「**無効**」になっている可能性があります。その場合は、ブラウザのヘッダーにあるメニュー(三本の横線マーク)から「**アドオン**」を選択して、「**アドオンマネージャー**」画面を開いてください。
	
ここで、REST Clientが有効化しているか確認してください。「**有効化**」というボタンが表示されていたら、無効化されているため、「**有効化**」ボタンをクリックします。

![firefox_4.png](https://qiita-image-store.s3.amazonaws.com/0/287604/c6546271-79fa-a8ac-3953-2868546f1796.png)

<a id="anchor2"></a>
#2. COTOHA APIにログインする

[COTOHA API]( https://api.ce-cotoha.com/)を試すためにAPI Keyを取得します。
COTOHA APIのfor Developersに会員登録すれば、無償でAPI keyが発行されます。
無償でも各API毎に1000コール/日利用できます。
会員登録は、[こちら](https://api.ce-cotoha.com/send-email-singup)から。

さて、ログイン後の画面です。
![cotoha api login_new.png](https://qiita-image-store.s3.amazonaws.com/0/287604/49d1c985-81a2-1c6a-efb0-69bf4b0765a3.png)

ご覧のとおり、
> ・Developer API Base URL 	
> ・Developer Client id 	
> ・Developer Client secret 	
> ・Access Token Publish URL

がアカウントホームに掲載されています。

こちらを利用してCOTOHA APIにアクセスします。

<a name="anchor3"></a>
#3. REST Clientでアクセストークンを取得する

API Keyを手元で確認しつつ、REST Client画面で作業を進めます。

まずは、REST Client画面上のRequestの”Method”で「**Post**」を選択。

![restclient_1.png](https://qiita-image-store.s3.amazonaws.com/0/287604/76b1409e-8990-2c73-d51d-d8ca717df1f6.png)

次に”**Method**”の隣のURL入力画面に、COTOHA APIのアカウントホームに表示されている「**Access Token Publish URL**」を入力します。
![cotoha api login_new_2.png](https://qiita-image-store.s3.amazonaws.com/0/287604/cfb3b0f2-4664-3ac9-7ad2-b867fb65c0eb.png)


入力しました。↓
![restclient_3_1.png](https://qiita-image-store.s3.amazonaws.com/0/287604/cadc4dd0-f2bd-33af-3c28-3c2ae6be4a0a.png)

次に注目は、REST Clientの画面上部のHeadersです。
クリックすると、「**Customer Header**」と「**Clear Favorites**」のタブがでてくるので、「**Customer Header**」をクリック。
![restclient_4.png](https://qiita-image-store.s3.amazonaws.com/0/287604/e5ed307b-eb6d-5752-7b39-fefa342bd7b1.png)

すると、こんな画面が表示されます。
![restclient_5.png](https://qiita-image-store.s3.amazonaws.com/0/287604/cece8202-b6d7-0871-25f5-d9ae81d0282b.png)

ここに、それぞれ、以下の赤字のテキストをそのまま入力します。
Nameには、「**Content-Type**」、Attribute Valueには「**application/json**」です。

```shell
Name: Content-Type
Attribute Value: application/json
```

※オートコンプリート機能が効くかと思いますので、途中で選択してください。
  入力したら、「**Okay**」をクリックします。

![restclient_6.png](https://qiita-image-store.s3.amazonaws.com/0/287604/fbfe170c-53d8-094e-dacc-0a9868834863.png)

Headersに「Content-Type:application/json」と追加されました。

![restclient_7.png](https://qiita-image-store.s3.amazonaws.com/0/287604/5a764f68-8126-26c2-91e7-edabf641782e.png)

次に、Bodyに以下を入力します。

```json
{
  "grantType":"client_credentials",
  "clientId": "ログイン後の画面に表示されるClient ID",
  "clientSecret": "ログイン後の画面に表示される Client Secret"
}
```
----

最後の「**}**」を忘れないでくださいね。

入力しました。
ようやくこれでインプットは終わりです。
赤い「**SEND**」ボタンをクリックしてください。

![restclient_8.png](https://qiita-image-store.s3.amazonaws.com/0/287604/76029727-c7d3-21b0-1aab-e19ae2b2897e.png)

クリックすると・・・
こんな感じです↓
![restclient_9_1.png](https://qiita-image-store.s3.amazonaws.com/0/287604/cee87c94-3205-77cc-1a66-a694ebf017e3.png)

こちらのResponseの「**Response**」タブにお目当てのアクセストークンが出力されています。
「**Response**」タブをクリックしてください。
![restclient_10.png](https://qiita-image-store.s3.amazonaws.com/0/287604/5baa71d1-f9b0-b295-1aa3-290d676e280c.png)

「**access_token**」がありました！
![restclient_11.png](https://qiita-image-store.s3.amazonaws.com/0/287604/6f3bb429-63eb-31b7-2d06-51a767b845a8.png)

ようやくアクセストークンをゲットできました！
アクセストークンは後で利用するので、どこかにメモっておいてください。

※アクセストークンは、”access_Token”:のあと、「”」で囲まれている文字列(文字列のみ)です。
※アクセストークンの有効期限は一日のため、<font color="red">**24時間経過したら再取得が必要**</font>ですので、ご注意を！

<a name="anchor4"></a>
#4. COTOHA APIを実行する

さて、これでようやくブラウザでCOTOHA APIを試せるようになりました。

まずは、COTOHA APIのログイン後画面に戻り、「Developer API Base URL」をチェックします。

そして、「Developer API Base URL」の後に試したいAPI名を追加します。
たとえば、構文解析を試したい場合は、「parse」と追加します。
以下のようになります。
<font color="green">https://[Developer API Base URL]/</font><font color="red">parse</font>


※以下に各APIのAPI名のみ記載します。(2018年9月時点のAPIになります)
- 固有表現抽出　<font color="green">https://[Developer API Base URL]/</font><font color="red">ne</font>
- 照応解析　　　<font color="green">https://[Developer API Base URL]/</font><font color="red">coreference</font>
- キーワード抽出　<font color="green">https://[Developer API Base URL]/</font><font color="red">keyword</font>
- 類似度算出　　<font color="green">https://[Developer API Base URL]/</font><font color="red">similarity</font>
- 文タイプ判定　<font color="green">https://[Developer API Base URL]/</font><font color="red">sentence_type</font>
- ユーザー属性推定　<font color="green">https://[Developer API Base URL]/</font><font color="red">user_attribute</font>

作成したURLを、REST Clientのプラグインに入力します。
※MethodはPOSTのままです。
![cotohaapi_1.png](https://qiita-image-store.s3.amazonaws.com/0/287604/7b29e00e-e6dc-1e8b-050a-486f152a6fca.png)

また、Headerに以下を追加します。
```
Name: Authorization
Attribute Value: Bearer 前章で取得したアクセストークン
```

先ほどと同じように、ヘッダーの「**Headers**」で「**Customer Request**」をクリックします。
Request Headerが表示されるので、上記を記入し、「**Okay**」をクリックします。
![cotohaapi_2.png](https://qiita-image-store.s3.amazonaws.com/0/287604/4f90cc31-b8a7-3884-d336-fc7cccbcc8e6.png)

Headersには、
Name: Content-Type, Attribute Value: application/json
もすでに追加されているはずですが、もしない場合は、追加するようにしてください。
![cotohaapi_3.png](https://qiita-image-store.s3.amazonaws.com/0/287604/2b8d7759-0fa1-347f-f96a-aea90330027e.png)

これですべての準備が整いました！
あとは、Bodyに以下の形式で、解析したい文言を記載し、「SEND」をクリックすると、Responseに解析結果が出力されます。

Parserの入力の形式は、
```
{"sentence":"解析した文章"}
```

※入力形式は、APIによって違うので、「[Reference](https://api.ce-cotoha.com/contents/reference.html)」をチェックしてください。

ここでは、
```
{"sentence":"隣の客はよく柿食う客だ。"}
```
としてみました。
![cotohaapi_4.png](https://qiita-image-store.s3.amazonaws.com/0/287604/fd6c24ad-55e7-91b4-03c5-89e5420ecec4.png)

「SEND」をクリックすると・・・約3秒くらいでCompleteとなります。

解析結果はResponseの「Preview」タブで確認してください。
今回は、こんな結果でした↓
![cotohaapi_5.png](https://qiita-image-store.s3.amazonaws.com/0/287604/4a8ccc14-52ff-cf4e-b7ed-dcb407d9339d.png)

これで、COTOHA APIの解析結果を、ブラウザ上で確認することができるようになりました！「隣の」の”の”が連体の格助詞って解析されてますね。

解析結果の詳しい解説は、ポータルの「[Reference](https://api.ce-cotoha.com/contents/reference.html)」を確認してください。

ブラウザでみられるようになったので、次は活用して何ができるのか、勉強していきたいと思います。

ここまでおつきあいいただいてありがとうございました！
それでは！！