AndroidでchatGPTアプリを作る方法【UI編】

まだまだ話題になっているChatGPTですが、たぶんまだAndroidの手軽なアプリが出ていないと思います。
せっかくなので出る前に作ろうと言うことで作ってみた結果、APIなどが充実していることもあり、割と簡単に作ることができたので記事にします。

比較的かんたんに作ることができるので、Androidの勉強してみたいけど作りたいものがない…という方はHello Worldの次のステップとして作ってみていただければと思います。
そのままなぞれば作成できるように心がけますが、作成してみてわかりにくい点などがあればコメントいただければ幸いです。
なんとなく連載記事に憧れがあるので、何回かに分けて投稿しようと思っています。今回はUI編です。
AndroidStudioでプロジェクトを作成してからUIを作成するところまでを記載します。
内部処理編は作成し次第こちらの記事にもリンクを追加します。
【追記】[AndroidでchatGPTアプリを作る方法【内部処理編】](https://qiita.com/minto357/items/62400ac15a8363330489)作成しました。UI編と内部処理編を読んでいただければアプリは作成できます。

## 作るもの
ChatGPTに聞きたいことを入力してsendボタンを押すとChatGPTからの回答が表示されるアプリになります。
![comp.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3299022/59223f43-4e89-fc04-37c5-88df75b24d42.jpeg)

## 必要なもの
### ChatGPTのAPIアカウント
アプリではChatGPTのAPIを利用しています。下記のサイトなどを参考にAPIキーを取得してください。
[ChatGPT APIキー取得方法参考](https://auto-worker.com/blog/?p=6988)

### AndroidStudio
今回はAndroidStudioを使った開発方法を紹介します。下記のサイトなどを参考にインストールを行ってください。
[AndroidStudioインストール方法参考](https://developer.android.com/studio/install?hl=ja)

## プログラムの作成
### 完成イメージ
本記事ではこのような画面イメージを作成するところまでをゴールとします。
![ChatGPT_UI_image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3299022/fbec7532-6437-0793-b69a-732fed309779.png)


### プロジェクトの作成
AndroidStudioを開いて[File]→[New]→[New Project...]
![img_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3299022/7cc82336-80c1-d56b-0bcf-e97f8f6f6951.png)
[Empty Views Activity]を選択してください。
![img_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3299022/91d980c7-7754-bd3a-dabd-5324a7821fb8.png)
画像のように必要な情報を入力してプロジェクトを作成してください。
![img_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3299022/76b98663-8d7e-f888-b46b-84c5d29f2bcc.png)
AndroidStudioのプロジェクトが作成されます。
![img_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3299022/8e0b314c-9e3e-2d62-0dfc-f858043ae598.png)

### 画面の作成
[res]→[layout]→[activity_main.xml]を開きます。
![img_5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3299022/7766d187-baca-86b3-f187-c067769307c1.png)
右上の[Split]を選択します。
![img_6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3299022/2e487e83-f69f-44ca-730c-d07bca37bd89.png)
画面を作成するコードを記載します。
```xml:activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <EditText
        android:id="@+id/edit_text"
        android:layout_width="250dp"
        android:layout_height="80dp"
        android:hint="質問を入力"
        android:layout_alignParentTop="true"
        android:layout_alignLeft="@+id/text_view"
        android:layout_marginTop="40dp"
        android:textSize="15dp"
        android:scrollbars="vertical"
        android:gravity="bottom"
        />

    <Button
        android:id="@+id/button"
        android:layout_width="100dp"
        android:layout_height="40dp"
        android:layout_alignBottom="@+id/edit_text"
        android:layout_alignRight="@+id/text_view"
        android:onClick="onClick"
        android:text="send" />

    <TextView
        android:id="@+id/text_view"
        android:layout_width="360dp"
        android:layout_height="match_parent"
        android:text="ChatGPTの回答を表示"
        android:layout_below="@+id/edit_text"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="30dp"
        android:textSize="15dp"
        android:scrollbars="vertical"
         />

</RelativeLayout>
```
コードを入力すると右側の画面に画面イメージが作成されます。
![img_7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3299022/5c63d383-46b8-f08a-4c48-33dd413a340c.png)

#### コードの解説
```xml:RelativeLayout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
...
</RelativeLayout>
```
このアプリでは、画面のレイアウトはRelativeLayoutを使っています。
RelativeLayoutはViewを相対的に配置するためのレイアウトになるので、各画面要素はどの要素に対して相対的にどの位置になるかを指定します。
```xml:EditText
    <EditText
        android:id="@+id/edit_text"
        android:layout_width="250dp"
        android:layout_height="80dp"
        android:hint="質問を入力"
        android:layout_alignParentTop="true"
        android:layout_alignLeft="@+id/text_view"
        android:layout_marginTop="40dp"
        android:textSize="15dp"
        android:scrollbars="vertical"
        android:gravity="bottom"
        />
```
検索したい文字を入力するEditTextの画面要素です。
各設定は以下のような設定を行っています。

| 設定名 | 概要 |
|:-----------|------------:|
| id       |    ID   |
| layout_width     |   横幅    |
| layout_height       |    縦幅    |
| hint     |   入力前に表示しておく入力のヒント   |
| layout_alignParentTop       |    上寄せで表示    |
| layout_alignLeft     |    text_viewの要素と左端を揃える   |
| layout_marginTop       |    上からのマージンの幅    |
| textSize     |    フォントサイズ指定   |
| scrollbars       |    垂直方向のスクロールを許可    |
| gravity     |    文字の表示を下から表示させる   |

```xml:Button
    <Button
        android:id="@+id/button"
        android:layout_width="100dp"
        android:layout_height="40dp"
        android:layout_alignBottom="@+id/edit_text"
        android:layout_alignRight="@+id/text_view"
        android:onClick="onClick"
        android:text="send" />
```
検索したい文字列をChatGPTに送るときに押下するときの画面要素です。
各設定は以下のような設定を行っています。
| 設定名 | 概要 |
|:-----------|------------:|
| id       |    ID   |
| layout_width     |   横幅    |
| layout_height       |    縦幅    |
| layout_alignBottom     |   edit_textの下に揃える   |
| layout_alignRight       |    text_viewの右に揃える    |
| onClick     |    onClick属性を追加する   |
| text       |    ボタンに表示させるテキスト    |

```xml:TextView
    <TextView
        android:id="@+id/text_view"
        android:layout_width="360dp"
        android:layout_height="match_parent"
        android:text="ChatGPTの回答を表示"
        android:layout_below="@+id/edit_text"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="30dp"
        android:textSize="15dp"
        android:scrollbars="vertical"
         />
```
検索結果を表示させるテキストボックスです。
各設定は以下のような設定を行っています。
| 設定名 | 概要 |
|:-----------|------------:|
| id       |    ID   |
| layout_width     |   横幅    |
| layout_height       |    画面いっぱいに表示させる    |
| text     |   edit_textの下に表示させる   |
| layout_centerHorizontal       |    水平方向中央寄せで表示    |
| layout_alignParentBottom     |    下寄せで表示   |
| layout_marginTop       |    上のマージンを設定    |
| layout_marginBottom       |    下のマージンを設定    |
| textSize       |    テキストサイズを設定    |
| scrollbars       |    垂直方向のスクロールを許可    |

## おわりに
今回はChatGPTと連携するためのアプリのUIを作成しました。
次回は内部処理の方を作って行こうと思います。(連載と言いつつアプリ自体の作成は第2回で終わる予定です。3回目以降は環境周りの内容とかを考えてます。)
【追記】[AndroidでchatGPTアプリを作る方法【内部処理編】](https://qiita.com/minto357/items/62400ac15a8363330489)作成しました。