あこがれのGUI]で作成するGUI版チャットボットプログラムを参考に、Webアプリ版チャットボットのインターフェースを作成し、ブラウザに表示します。Sinatra参考記事Rubyの開発環境構築は、こちらの記事を参考にさせていただきました。niwatako$ノビィに話しかけるテキストチャットとキャラクターのアニメーションをブラウザに表示し、ビデオチャットのようなインターフェースを作成します。|-0001.pngソースコードapp.rbは、ほぼルーティングメソッドのみとなり、ユーザからのアクセスに応じてビューを表示した後は、入力された文字列を受け取った順番に配列に格納し、インスタンス変数@talk_logを生成してビューに表示します。index.erbにはチャットのインターフェースの要素を設置し、styles.cssでレイアウトを整え、サンプルプログラムに似せた配置にしています。<body>要素の最後の方に記述しているJavascriptでは、配列に格納された画像を順番に表示し、キャラクターが瞬きをするアニメーションを作成しています。エラーによって無理矢理ループが止まっている状態です。記事を書いている最中に気付き、修正を試みましたが、誤字を修正するとループが止まらなくなったので、諦めてそのまま放置((直し方がわかったら直したいと思います))しています。100);を、clearTimeout(timeoutId);の前に記述したら直りました。scroll;}実行結果ターミナルでapp.rbを動かし、ブラウザにhttp://localhost:4567を入力します。port=4567WebサーバのWEBrickが起動し、ターミナルにGETでアクセスしたログが表示されます。CSSファイルや画像にもアクセスしているため、ログが多くなります。Sinatraについては、こちらの記事を参考にさせていただきました。(Japanese)CSSのレイアウトについては、こちらの記事を参考にさせていただきました。月別アーカイブリンクGitHubはてなブログをはじめよう!b0npuさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。