アプリ制作サービス「Thunkable」でAIアプリをノーコードで開発してみた

このエントリーをはてなブックマークに追加


「Thunkable」はノーコードでモバイルアプリを開発できるツールです。今回は本ツールを使い、AIに撮影した画像を認識させるアプリを開発していきます。

まずは公式サイトにアクセスし、「START TODAY」をクリックします。

画像のように、3種類の方法でアカウントを作成できます。

「Start Building」をクリックします。

今回は名前を「画像認識」とし、「Create」をクリックします。

Thunkableでは、左上の「Design」でユーザーが見る画面を、「Blocks」で機能面を設定します。

「Add Components」の下から「Button」を選択し、スマートフォンの画面上にドラッグします。文字の大きさや色などの編集も編集できます。今回は表示を「画像認識」に変更します。

「image」をドラッグします。ここに撮影した写真が表示されます。

カメラで撮影するための「Camera」と画像認識AIの「Image_Recognizer」をドラッグします。この2つはスマートフォンの画面の下に表示されます。

AIの出力を表示する「Label」をドラッグし、「Design」は終了です。



「Blocks」の「Button1」を選択すると、さまざまな機能を設定できます。今回は単純にボタンをクリックしたらカメラを起動するので、一番上の「When Button1 Click」をドラッグします。

「Camera1」を選択し、「Call Camera1’s take photo」をドラッグします。

Thunkableでは画像のように、ブロックの上に他のブロックをドロップすることで、機能の設計をしていきます。今回は、「ボタンをクリックした時に、カメラで写真を撮る」ことになります。

「Image Recognizer1」を選択し、「Call Image_recognizer1’s Upload」をCamera1の「then do」の場所にドラッグします。

「Image_Recognizer1」のブロックの「Image」の場所には、「Camera1」のブロックの「Photo」をドラッグします。これで「カメラで撮った写真をRecognizer1に読み込ませる」ことになります。

「Image_Recognizer1」のブロックの「then do」の場所にはLabel1の「set Label1’s Text to」というブロックをドラッグ。Image_Recognizer1の「description」というブロックをその上にドラックします。これで、「画像認識の結果をラベルの場所に表示」できます。

最後に「Image1」の「Set Image1’s Picture to」というブロックを画像の場所にドラックし、「Camera1」の「Photo」をセットすることで、「撮影した写真を表示」できます。

アプリが完成したので、実際にスマートフォンで使ってみます。thunkableのスマートフォン用のアプリをダウンロードすることで、ブラウザ上で作成したアプリを使用できます。

「画像認識」をクリックし、写真を撮影します。

無事、AIの出力結果と撮影した画像が表示されました。

最後に

今回はThunkableを使い、画像認識AIのアプリを開発しました。本サービスを使うと、コードを書かずに、機械学習のモデルを使ったアプリをドラッグ操作のみで開発できます。エンジニアではなくても簡単にアプリを開発できるので、ぜひ試してみてください。