Life is Tech ! Advent Calendar 2023

Sinatra×Websocket×LINE×ペッパーズゴーストでホログラムを作ろう

Last updated at 2023-12-16Posted at 2023-12-16

はじめに

本記事はLife is Tech! Advent Calendar2023の17日目の記事です！

初めまして！関東のWebSコースメンターのみゅーらです！

今回初めてAdvent Calenderを書くにあたって非常に悩みました、というのもほかのメンターさんほどまだ深いところを紹介できる自信がなかったからです。

さぁ困った。僕にあるものはそんなに多くない！じゃあ僕を構成しているものは何だ！

趣味のディズニー
研究会で行っているメディアアート
Life is Tech!でやってるWebService

うーん、幅は広くて多趣味だけど全部深くまで話せるかというと、、、。

...そうだ！
これらを全部組み合わせよう！

ということで今回は
Sinatra × Websocket × LINE × ペッパーズゴースト
でちょっと面白いホログラムを作ってみようという記事でございます。

すこーし長い記事になるのでゆっくりとお楽しみください。

いろんな大前提！

1. まずどんなのをつくるの

さてまずSinatra × Websocket × LINE × ペッパーズゴーストって言ってもどんなものを作るのかわからない！
って言われるのが関の山だと思うのでまずはそこから。

今回作るのは
LINEBotに送ったメッセージを自動でホログラムに投影するシステム
です。難しそうでしょ？

特にホログラムなんかどうやればいいかわからない！
でも実は案外シンプルにそしてオールドな方法でできちゃうものなんです。

2. ペッパーズゴーストについて

さぁまずはホログラム要素であるペッパーズゴーストの解説から。
メディアアートの表現技法でもある「ペッパーズゴースト」。

その使用例と言われているものを見てみましょう。

まずはディズニーランドよりホーンテッドマンションの舞踏会のシーン！

こんな感じで浮いてて透明なゴーストたち、いますよね。
こちらペッパーズゴーストです。ちゃんと幽霊だ。

次はこんな古いのではありません。(ただ仕組みが明言されてないのも事実)
ディズニーランドより美女と野獣“魔法のものがたり”の王子の変身シーン！

さぁ、結構すごい技術に思えてきたでしょう。
実はペッパーズゴーストは19世紀に生み出された技術であるにもかかわらず、今でも現役のメディアアートの表現技法のひとつなんです。

アイデアさえあれば今でも多くの人に感動を与えられちゃうんですね。

じゃあそんな技術どうやったらできるの！？
といいますと

こうです。

斜めに透明なアクリル板(下敷きでもOK)を立てかけて、そこにipadなどで写したい画面を表示させて反射させるだけ。

実はすっごく簡単なんです。
これで一旦ペッパーズゴーストの説明はおしまい！

3. Websocketについて

じゃあ次に説明するのはWebSocketについて。

こちらはざっくり言っちゃうとクライアント側とサーバー側の両方から通信を行える通信方法のこと！
みんながよく使うHTTPとかはサーバー側→クライアント側の一方通行が基本なのでそこが大きな違い！

じゃあWebsocketってどんなことに使われるの？っていうと

リアルタイムで更新が必要なもの！

例えば

リアルタイム通知:
オンラインチャット、ライブストリーミング、オークションなど、ユーザーにリアルタイムな情報を提供する際に活用されます。
リアルタイムデータ表示:
リアルタイムなデータ更新が必要なダッシュボードやモニタリングアプリケーションで使用されます。
マルチプレイヤーゲーム:
リアルタイムのゲームプレイやゲーム内コミュニケーションで利用されることがあります。

などなど(ChatGPT調べ)！

一旦WebSocketはこの辺まで知っておけばOK!

4. つまり何をするの

今回やるのは
・Ipadに画面をうつしてそれをアクリル板に反射させてホログラムを作る
・反射させる画面にはLINEBotに送られてきたメッセージを表示する
・そのために送られてきたものをリロード無しで自動表示する(そのためのWebSocket)
・それの見た目を整える
といった感じ！

次の章からは実際に作っていきましょう！

5. 注意!

今回のこの記事はコードを詳しく解説するものとかじゃなくて作ってみよう！のノリなので結構解説はないに等しいかも！わからなかったら僕に直接聞いてみたりしてみてね！ちなみに記事最後に技術検証用のコードが入ったgithubのレポジトリのリンクが置いてあったりなかったり？？

技術検証 - LINE Messaging API

ここからはできることを一つ一つ確認していって最後の章で一気に組み合わせます！

まずはLINEMessagingAPIですが実はそれを使いやすくするための専用のgemファイルがあったりするんです。
そんなわけでgemfileがこちら！

ruby '3.0.0'
source 'https://rubygems.org'

gem 'sinatra'
gem 'sinatra-contrib'
gem 'webrick'
gem "dotenv"
gem "line-bot-api"

なんと"line-bot-api"というgemが存在するんです！
ありがたい限り。。。

じゃあ後はapp.rbはどうかくの？といいますと

app.rb

require 'bundler/setup'
Bundler.require
require 'sinatra/reloader' if development?
Dotenv.load

def client
   @client ||= Line::Bot::Client.new{|config|
       config.channel_id = ENV["LINE_CHANNEL_ID"]
       config.channel_secret = ENV["LINE_CHANNEL_SECRET"]
       config.channel_token = ENV["LINE_CHANNEL_TOKEN"]
   } 
end

post '/callback' do
    body = request.body.read
    signature = request.env['HTTP_X_LINE_SIGNATURE']
    unless client.validate_signature(body, signature)
       error 400 do 'Bad Request' end 
    end
    
    events = client.parse_events_from(body)
    events.each do |event|
        if event.is_a?(Line::Bot::Event::Message)
            if event.type === Line::Bot::Event::MessageType::Text
                message = {
                    type:'text',
                    text: event.message['text']
                }
                client.reply_message(event['replyToken'], message)
            end
        end
    end
    
    "OK"
end

こんな感じで書いてあげるとLINEBotに送られてきたMessageをオウム返ししてくれるコードの出来上がり！

今回はLINEBotの挙動を書いてあげればいいだけなのでerbファイルはいりません！

LINEBotのアカウントの作り方や環境変数のセットの仕方は今回は省きます、こちらの記事(ほかの方のもの)を参考にしてみてください！

また今回のコードを書くにあたってデバッグするためには外部からサイトにアクセスできるようにしなくちゃいけません。ということは毎回HerokuとかRailwayにデプロイしてからじゃないと試せないってこと、、、？

そんなことはありません。ngrokを使ってみましょう。
ngrokで一時的に公開状態にしてあげれば書いたそばから変更を適用できるのでめっちゃ楽です。その代わり閉じるごとにLINEBotのWebhookURLを書き換えなきゃいけないのは変わらないのでお気をつけを。

ちなみに作ったものはこんな感じになるよ

技術検証 - Websocket

さぁ難題はこっちだった！！！
Websocket、かなり難しい部分がある、、、今回これのせいで一週間以上ロストした(._.)。

今回はfaye-websocketっていうgemを使って実装するよ！

まずgemfileはこんな感じ！

source 'https://rubygems.org'

gem 'sinatra', '~> 2.1'
gem 'sinatra-contrib', '~> 2.1'
gem 'puma'
gem 'faye-websocket'

あれ？faye-websocket以外にも見慣れないgemが、、、

実はWebsocketを使うと普段使ってるWebrickが使えませぬ。そのため今回はpumaを使っていきます。

さぁ、あとはapp.rbとindex.erbだ、、、！

app.rb

require 'bundler/setup'
Bundler.require
require 'sinatra/reloader' if development?
require 'faye/websocket'

set :sockets, []

get '/' do
  erb :index
end

get '/websocket' do
  if Faye::WebSocket.websocket?(request.env)
    ws = Faye::WebSocket.new(request.env)

    ws.on :open do |event|
      settings.sockets << ws
    end

    ws.on :message do |event|
      settings.sockets.each do |socket|
        socket.send(event.data)
      end
    end

    ws.on :close do |event|
      ws = nil
      settings.sockets.delete(ws)
    end

    ws.rack_response
  end
end

index.html

<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Chat</title>
</head>
<body>
    <input type="text" name="message" placeholder="message">
    <button>送信</button>

    <div id="messages"></div>


    <script>
      if (location.protocol === 'https:') {
        var ws = new WebSocket('wss://' + location.host + '/websocket');
      } else {
        var ws = new WebSocket('ws://' + location.host + '/websocket');
      }

      ws.onopen = function() {
        console.log('connected');
      };

      ws.onmessage = function(e) {
        var data = JSON.parse(e.data);
        var message = document.createElement('div');
        message.innerHTML = '<strong>' + data.message + '</strong> ';
        document.querySelector('#messages').appendChild(message);
      };

      ws.onclose = function() {
        console.log('disconnected');
      };

      document.querySelector('button').addEventListener('click', function() {
        var message = document.querySelector('input[name="message"]').value;
        ws.send(JSON.stringify({
          message: message
        }));
      });
    </script>
</body>
</html>

大体こんな感じ！
これを作るとどんなのが生まれるかというと～？？？

こんな感じでFormで送信した文字が表示されるよ！
これは同じタイミングで同じサイトを開いている人全員のところでリロードをかけることなく随時表示される！

もうほとんどいわゆるSNSって感じだね！(過言かもしれない)

さてこれで技術検証はおしまい！

実際に組み合わせていくよ！

Sinatra×Websocket×LINEBotの実装

さてここからはもう組み合わせるだけなのでざっくりお見せします！！

まずgemfileがこんな感じ！

ruby '3.0.0'
source 'https://rubygems.org'

gem 'sinatra', '~> 2.1'
gem 'sinatra-contrib', '~> 2.1'

#履歴用
gem 'sinatra-activerecord', '~> 2.0'
gem 'activerecord', '~> 6.1'
gem 'pg', '~> 1.2'
gem 'rake', '~> 13.0'

#websocket用
gem 'puma'
gem 'faye-websocket'

#LINEbot用
gem "dotenv"
gem "line-bot-api"

大体app.rbがこれ！

app.rb

require 'bundler/setup'
Bundler.require
require 'sinatra/activerecord'
require 'sinatra/reloader' if development?
require './models'
Dotenv.load
require 'faye/websocket'
set :sockets, []

def client
   @client ||= Line::Bot::Client.new{|config|
       config.channel_id = ENV["LINE_CHANNEL_ID"]
       config.channel_secret = ENV["LINE_CHANNEL_SECRET"]
       config.channel_token = ENV["LINE_CHANNEL_TOKEN"]
   } 
end

post '/webhook' do
    body = request.body.read
    signature = request.env['HTTP_X_LINE_SIGNATURE']
    unless client.validate_signature(body, signature)
       error 400 do 'Bad Request' end 
    end
    
    events = client.parse_events_from(body)
    events.each do |event|
        if event.is_a?(Line::Bot::Event::Message)
            if event.type === Line::Bot::Event::MessageType::Text
                message = {
                    type:'text',
                    text: event.message['text']
                }
                client.reply_message(event['replyToken'], message)
                
                #履歴の作成
                History.create(text: event.message['text'])
                
                # WebSocketを通じて受信したメッセージを送信する
                settings.sockets.each do |socket|
                    socket.send(event.message['text'])
                end
            end
        end
    end
    
    "OK"
end

get '/websocket' do
  if Faye::WebSocket.websocket?(request.env)
    ws = Faye::WebSocket.new(request.env)

    ws.on :open do |event|
      settings.sockets << ws
    end

    ws.on :message do |event|
      settings.sockets.each do |socket|
        socket.send(event.data)
      end
    end

    ws.on :close do |event|
      ws = nil
      settings.sockets.delete(ws)
    end

    ws.rack_response
  end
end

get '/' do
    erb :index
end

うーんもうなんかすごいことになってるね。
でもまぁここまで読み進められた君ならわかるはず！

実はこっそり合体させるにあたってLINEで送られてきた文章をHistoryとして保存しています。

最後にindex.erbがこれ！

index.html

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<title>LINE×Websocket</title>
		<link rel="stylesheet" href="/assets/stylesheets/peppersghost.css">
	</head>
	<body>
		<div class="center">
			<div class="white-color">
				<div id="messages"></div>
			</div>
		</div>
	
	    <script>
	      if (location.protocol === 'https:') {
	        var ws = new WebSocket('wss://' + location.host + '/websocket');
	      } else {
	        var ws = new WebSocket('ws://' + location.host + '/websocket');
	      }
	
	      ws.onopen = function() {
	        console.log('connected');
	      };
	
	      ws.onmessage = function(e) {
	      	var text = e.data; 
			var message = document.createElement('h1'); 

			//以下2行を消せば複数のメッセージが表示可能
			var messagesDiv = document.querySelector('#messages');
			messagesDiv.innerHTML = '';
			
			message.innerHTML = '<strong>' + text + '</strong> ';
			document.querySelector('#messages').appendChild(message); 
	      };
	
	      ws.onclose = function() {
	        console.log('disconnected');
	      };
	    </script>
	</body>
</html>