アートなLineアプリの作り方

Posted at 2024-08-09

アートなアプリとは

ものづくりの考え方として、アート思考とデザイン思考という考え方があります。
ここでは、アート思考によるソフトウェア開発についてご説明します。

ここに、その2つを対比させていますが、デザイン思考ではユーザーの問題解決 から発想するのに対して、アート思考では作り手の自己表現から発想される所が大きく違います。

これらは真っ向から対立するようですが、ヒットするプロダクトではこの双方の要素が欠かせないものです。例えばiPhoneを見れば、それぞれの要素が見えてくると思います。

左は、当時もっとも普及していたスマートフォンのBlackberry、右がiPhone 3Gです。どちらもヒットした商品です。
iPhoneでは、思い切ってボタンやスイッチを省略し、あらゆる操作をタッチパネルで行うという設計は、スティーブジョブズのこだわり無くしては出てこなかったと思います。

LineBOTとして、数字を入れるとその数字を説明してくれる、というチャットボットを企画しました。視点としては、

という視点です。

なぜ数字、という所は、たまたまNumbersAPIというものを見つけたからですが、それが目に留まったのは自分が数字が好きだから、だと分析しています。

以下、使った感じです。

数字を入れると、その数字がどんな数字かを説明してくれます。
同じ数字を入れても、違う説明が出てくることもあります。

アプリは公開しています。文末にQRコードを公開しておきますが、月間1000回までしか対話できないので、もしかしたら反応が無いかも知れません。悪しからず。

実装に使用したツールは以下の通りです。

makeはノーコードツールで、全体のロジックを組んでいます。Lineからのメッセージはこのmakeのモジュールで受信し、必要な処理を行って、Lineのメッセージを返す処理を行っています。

ロジックは以下の図になります。

左から右に処理は流れていきます。

Lineで受け取ったメッセージは、Routerで判定されます。正規表現にマッチした場合は、次のNumbers apiの処理に入ります。マッチしなかった場合は、斜め上のルートに入って、エラーメッセージを返します。
正規表現は、数字だけが含まれているかという判定をします。

数字の場合は、HTTPのGETで、"http://numbersapi.com/数字" というリクエストを投げます。その戻り値が、その数字の説明になるのですが、この段階では英語です。

DeepLモジュールを使って、Numbers apiの戻り値を翻訳し、Lineに返して、プログラムは終了します。

蛇足になるかもしれませんが、Lineとどのようにインターフェースを取るのかを説明します。キーワードは

手順は以下の通りです

この作成したチャネルが、メッセージをやり取りする、Messaging APIのインターフェースになっています。

チャネル基本設定に、アイコンや説明など、必要な設定を行います。

Messaging API設定のタブを開いて、一番下のチャネルアクセストークンを発行します。
このトークンを、make側のConnectionの設定で使用します。

QRコードの下あたりに、Webhook設定というのがあります。ここに、makeのWebhookの設定で生成されたURLを設定します。

この設定で、Lineのメッセージが入った時に、make側のURLを呼び出すことで、プログラムが開始されます。これをWebhookと言います。

その後、makeがLineのチャネルとデータをやり取りするためのセキュリティが必要ですが、その設定がチャネルアクセストークンです。

慣れると簡単にできますが、あまり情報が無いので最初は戸惑うのではないかと思い、念のため説明しておきました。

このアプリはアート思考が強いものだと考えています。

これからもアート思考でアプリ開発を楽しんでやっていきたいと思います。

以上