【第５回】DrawThingsのHTTP API Serverで画像生成

なにができるの？

DrawthingsをHTTP API経由でデータの送受信を行い、画像生成プログラムやウェブアプリケーションから利用可能になります。
今回はブラウザで画像生成するシンプルなウェブアプリケーション(SPA)をDenoで開発してみました。

本当にシンプルなのですが、よかったらリポジトリも公開しているので使ってみてくださいね。

ウェブアプリケーション紹介動画

HTTP API Serverを有効にする

DrawThingsを起動し、
Advanced > HTTP API Server
または、
All > HTTP API Server
をONにします。

Draw Things > Advanced > HTTP API Server

※ 標準で提供されるHTTPサーバのPortは7860番です。
（別のサービスで利用してる場合は応じて変更しましょう。今回は標準設定で利用します。）
ONにしたら、Webブラウザで以下のURL(PORT番号:7860)
http://localhost:7860/
にアクセスしてみましょう。
下記のように表示されていれば、接続完了です。
HTTP Server APIを利用する準備が完了しました。
次にブラウザからAPIを操作する環境を作るため、Denoをインストールします。

HTTP API Serverにアクセス（Chrome）

---

Deno（開発環境）をインストールする

次にDenoをインストールします。
インストール方法はお使いの環境によってインストールしやすい方法を選択してください。
ここでは、Deno公式とHomebrewを掲載しています。

🦕 Deno公式の場合

Deno Runtime Quick Start | Deno Docs

$ curl -fsSL https://deno.land/install.sh | sh

上のコマンドを実行すると、ホームディレクトリ内にDenoがインストールされます。ですが、このままではコマンドとして認識されないので、プログラムファイルのパスを通します。

ホームディレクトリの確認方法

下記のコマンドを実行します。

$ echo $HOME_DIR

/Users/[あなたのユーザ名]
と表示されたものがあなたのホームディレクトリです。

パスを通す

~/.zshrcをテキストエディタで開き、以下の行を追加・保存します。

export DENO_INSTALL="/Users/[あなたのユーザ名]/.deno"
export PATH="$DENO_INSTALL/bin:$PATH"

保存を終えたら、次のコマンドを実行します。

$ source ~/.zshrc

denoコマンドが利用できるか確認します。
（うまくいかない場合は、~/.zshrcを開き、インストールされたパス（場所）が正しいか確認・保存後、再度、source ~/.zshrcを実行します。）
もしくは、パス情報が正しく保存された状態でPCを再起動しましょう。

$ deno --version
or
$ deno -h

---

🍺 Homebrewの場合

Homebrew

$ brew install deno

以上でインストール完了です。

---

Drawthings HTTP API SPA by Deno

Drawthings HTTP Server APIをウェブブラウザから利用するローカルエリアウェブアプリケーションです。
※ SPAとは、Single Page Applicationの略称です。ページ遷移のない単一ページのアプリケーションとなります。

ソースリポジトリからインストール

プログラムを動かすディレクトリに移動しターミナルで以下のコマンドを実行します。