Claper + cpolar ガイド：ローカルから公開アクセスまで対応するインタラクティブなプレゼンテーションプラットフォームをホストする

はじめに

授業、製品発表、業務プレゼンテーションのような場面では、内容を最後まで伝えたからといって、必ずしも聴衆が実際に参加したとは限りません。

多くの場合、ライブ Q&A は盛り上がりにくいものです。口頭での投票は集計が難しく、リモート参加者も自分の考えをタイムリーに共有しにくい状況があります。結局、イベント後のアンケートに頼ってフィードバックを集めるしかなく、その結果も理想的とは言えないことが少なくありません。

Claper を使うと、PPT または PDF ファイルを独立したプレゼンテーションプラットフォームにアップロードし、発表中にリアルタイムコメント、アンケート、投票、Q&A を追加できます。聴衆はブラウザでイベントページを開くだけで、直接参加できます。主催者もプレゼンテーション画面からフィードバックをリアルタイムで確認できます。

このようにして、これまで一方向だったスライドプレゼンテーションを、即時の反応とライブインタラクションを伴うプロセスへと変えることができます。

この構成では、Claper がプレゼンテーションファイルとインタラクティブ機能を処理します。PostgreSQL はプラットフォームデータを保存します。Docker はデプロイを担当します。cpolar は LAN 内のローカル 4000 ポートを公開 URL にマッピングします。

このソリューションは、授業、社内研修、オンライン共有、小規模から中規模のイベントに適しています。注意点として、Claper は PowerPoint 内に直接インストールするプラグインではありません。実際のプレゼンテーションは Claper のページを通じて行われます。

1. Docker で Claper を一括デプロイ

Docker をサポートするデバイスがあれば、Claper をかなり素早く起動できます。複雑な環境設定は不要で、特定のオペレーティングシステムに縛られることもありません。

この例では CentOS 7 を使用しています。デプロイ手順を順に見ていきましょう。

まず、Docker でインストールして実行し、ファイル保存用のディレクトリを作成します。

mkdir -p /docker/Claper
cd /docker/Claper

次に、以下の内容を docker-compose.yml ファイルとして保存します。

PostgreSQL が初回起動し、データディレクトリが空の場合、POSTGRES_* 環境変数に基づいてユーザーとデータベースを作成します。

POSTGRES_PASSWORD: claper
POSTGRES_USER: claper
POSTGRES_DB: claper

SECRET_KEY_BASE は次のコマンドで生成できます。

openssl rand -hex 64

完全な docker-compose.yml 設定は以下のとおりです。

version: "3.0"

services:
  db:
    image: postgres:9
    volumes:
      - ./postgres-data:/var/lib/postgresql/data
    environment:
      POSTGRES_PASSWORD: claper
      POSTGRES_USER: claper
      POSTGRES_DB: claper
    healthcheck:
      test: ["CMD-SHELL", "pg_isready -U claper"]
      interval: 5s
      timeout: 5s
      retries: 10

  app:
    image: ghcr.io/claperco/claper:latest
    user: "0:0"
    ports:
      - "4000:4000"
    volumes:
      - uploads:/app/uploads
    environment:
      DATABASE_URL: postgres://claper:claper@db:5432/claper
      SECRET_KEY_BASE: 08fdecbc274177363ad3e5457ae910005216dc6d27b470cf69d9524e4fc6b951156b3c4709290054cb76778899ef
      ENDPOINT_PORT: 4000
      ENDPOINT_HOST: 192.168.42.140
      MAX_FILE_SIZE_MB: 50
    depends_on:
      db:
        condition: service_healthy

volumes:
  uploads:

次に、以下のコマンドを実行してサービスを開始します。

# すべてのサービスを開始
docker-compose up -d

サービスが起動したら、PostgreSQL コンテナに入って確認できます。

docker exec -it claper-db-1 psql -U claper -d claper

psql プロンプトに正常に入れれば、ユーザーとデータベースが正常に作成されたことを意味します。

postgres ユーザーを使用して、すべてのロールを表示することもできます。

docker exec -it claper-db-1 psql -U postgres -c '\du'

起動が完了したら、ポート 4000 にアクセスできるかどうかを確認します。

curl http://192.168.42.140:4000

次のアドレスを開くと、Claper のウェルカムページが表示されます。

http://localhost:4000

登録してからログインします。

ログインに成功すると、管理ダッシュボードに入ることができます。

次に、プレゼンテーションイベントを作成できます。

ページ上の指示に従ってください。

右上隅の Create をクリックし、PPT または PDF をアップロードしてから、インタラクティブコンポーネントを設定します。コメントと投票を有効にすることをおすすめします。これにより、インタラクションの効果がより明確になります。

この時点で、Claper インタラクティブプレゼンテーションプラットフォームのデプロイは完了しています。

これでプレゼンテーションイベントを作成し、聴衆を招待して参加してもらうことができます。現地でQRコードをスキャンする場合でも、リモートリンクを開く場合でも、聴衆はコメント、アンケート、投票などの方法で参加できます。また、その過程で有用なフィードバックデータを残すこともできます。

会議室での報告、教室での講義、オンライン発表イベントのいずれであっても、Claper は一方向の説明を、より強い参加感のある双方向のインタラクションへと変えることができます。

2. cpolar をインストールする

すでに Claper をローカルにデプロイし、コメント、アンケート、リアルタイムフィードバック機能を設定済みの場合でも、同僚、クライアント、学生にリモートで参加してもらいたいときに問題が発生する可能性があります。次のアドレスにアクセスできません。

http://your-internal-ip:4000

理由は簡単です。サービスが LAN 内で実行されており、パブリック IP アドレスを持っていないため、外部デバイスから到達できないからです。

ここで cpolar がパブリックアクセスの問題解決に役立ちます。

cpolar は、ローカルコンピューター上で実行されている SSH、Web サービス、データベースなどのサービスをパブリックインターネットにマッピングできます。つまり、自宅、オフィス、仮想マシン内でサービスが実行されている場合でも、パブリック URL を通じてアクセスできます。

以下は cpolar のインストール手順です。

ワンクリックスクリプトでインストールします。

sudo curl https://get.cpolar.sh | sh

インストール後、次のコマンドを実行して cpolar サービスのステータスを確認します。ステータスが正常であれば、サービスは正常に起動しています。

sudo systemctl status cpolar

cpolar が正常にインストールされ起動したら、ブラウザで仮想マシンのホスト IP とポート 9200 を入力して、管理インターフェイスにアクセスします。

http://ip:9200

ローカルで開くこともできます。

http://localhost:9200

cpolar 公式サイトで登録したアカウントでログインすると、cpolar Web 設定インターフェイスが表示されます。以降のトンネル設定はこのページから完了できます。

3. パブリック URL を設定する

cpolar Web UI 管理インターフェイスにログインしたら、左側のダッシュボードで トンネル管理 → トンネルを作成 をクリックします。

次のパラメータで設定します。

• トンネル名: 任意の値。この例では claper を使用します。既存のトンネル名と重複しないようにしてください。

• プロトコル: http

• ローカルアドレス: 4000

• ドメインタイプ: ランダムドメイン

• リージョン: China Top を選択

作成に成功したら、左側のOnline Tunnel Listを開きます。先ほど生成された公開URLが表示されます。

次に、このアドレスを別のパソコンやスマートフォンで使用すると、ローカルにデプロイしたClaperページにパブリックインターネットからアクセスできます。

正常にアクセスできると、ページは次のように表示されます。

4. 固定の公開URLを予約する

ランダムな公開URLは一時的に使用できます。しかし、サービスを他の人と長期間共有したい場合、頻繁に変わるアドレスはあまり便利ではありません。

そこで、cpolarで固定の第2レベルサブドメインを設定できます。設定後、この公開URLは毎回ランダムに変更されなくなります。

左側のReserveをクリックし、Reserve second-level subdomainを選択します。地域としてChina Topを選択し、第2レベルサブドメイン名を設定します。

この例では、使用するサブドメインは capler です。必要に応じてカスタマイズできます。メモ情報を入力したら、Reserve をクリックします。

次に、cpolar Web UI 管理画面に戻ります。左側のダッシュボードで Tunnel Management → Tunnel List をクリックします。設定したいトンネルを見つけ、右側の Edit をクリックします。

次に、トンネル情報を変更し、予約済みのセカンドレベルサブドメインをトンネルに設定します。

• ドメインタイプ：セカンドレベルサブドメインを選択

• サブドメイン：予約に成功したセカンドレベルサブドメインを入力

• リージョン：China Top

設定が完了したら、Update をクリックします。

更新が完了したら、再度 Online Tunnel List を開きます。元のランダムな公開 URL が、固定のセカンドレベルサブドメイン URL に変わっていることが確認できます。

最後に、固定された公開URLを任意のデバイスのブラウザで開きます。ページが正常に開けば、固定の第2レベルサブドメインの公開アドレスが正常に設定されたことを意味します。

まとめ

ClaperはPPTのレイアウトの問題を解決するものではありません。プレゼンテーション中の参加の問題を解決するものです。

聴衆は同じページでコンテンツを閲覧し、質問を送信し、投票に参加できます。発表者も現場のフィードバックをより迅速に確認できます。この方法は、双方向のコミュニケーションを必要とする講義、研修、発表イベントに特に適しています。

正式に使用する前に、事前に確認しておく価値のある点がいくつかあります。

1. docker-compose.yml 内のデフォルトのデータベースパスワードを変更します。

2. 次のコマンドを使用して、独立した SECRET_KEY_BASE を生成します。この記事のサンプル値をそのまま使用しないでください。

openssl rand -hex 64

1. 公開URLを設定した後、ENDPOINT_HOST を実際のアクセスドメインに変更すべきか確認してください。そうしないと、招待リンクやリアルタイム通信が引き続きLAN IPを指す可能性があります。

2. PostgreSQLイメージについては、プロジェクトで現在サポートされているバージョンを使用することをお勧めします。古い postgres:9 を長期間使い続けることは推奨されません。

全体として、このソリューションの核心となる考え方は明確です。

まず、Docker を使用して Claper を起動します。次に、cpolar を使用してローカルの 4000 ポートをパブリックインターネットにマッピングします。これにより、オンサイトイベントでもリモートプレゼンテーションでも、聴衆はブラウザから参加できます。

教室、研修セッション、製品デモ、オンライン共有では、この方法により単に PPT を再生するよりも多くのフィードバックを得られ、聴衆も参加しやすくなります。

Claper FAQ

Claper とは何ですか？

Claper はオープンソースのインタラクティブなプレゼンテーションツールです。通常の PPT や PDF のプレゼンテーションを、投票、Q&A、聴衆からのフィードバックを備えたオンラインセッションに変換するのに役立ちます。教室、オンライン研修、製品デモ、ライブイベントに役立ちます。

Claper は Docker でデプロイできますか？

はい。Claper はセルフホスト型デプロイに対応しており、自分のプレゼンテーションデータ、アクセスリンク、デプロイ環境を管理したいユーザーに適しています。

Claper にパブリックアクセスが必要なのはなぜですか？

Claper がローカルまたはプライベートネットワーク内でのみ実行されている場合、外部ユーザーはプレゼンテーションページを開けません。cpolar や Cloudflare Tunnel のようなツールを使用すると、ローカルサービスをパブリックインターネットに公開できるため、聴衆はブラウザから参加できます。

この Claper のセットアップで cpolar は何をしますか？

cpolar は、通常ポート 4000 で実行されるローカルの Claper サービスをパブリック URL にマッピングします。これは、一時的なデモ、オンライン授業、リモート共有、迅速なテストに役立ちます。

Claper はどのようなシナリオに適していますか？

Claper は、教室でのインタラクション、オンライン研修、製品発表、顧客向けデモ、社内共有セッション、リモートイベントなど、実際の聴衆参加を必要とするプレゼンテーションに適しています。

関連ツール

• Claper: PPT または PDF プレゼンテーションに投票、Q&A、聴衆からのフィードバックを追加するためのオープンソースのインタラクティブプレゼンテーションプラットフォーム。

• Docker: Claper のような Web サービスをすばやく実行するためのコンテナプラットフォーム。

• Docker Compose: Claper や PostgreSQL などの複数のサービスを 1 つのデプロイで管理するためのツール。

• PostgreSQL: Claper のセルフホスト型デプロイで一般的に使用されるデータベースサービス。

• cpolar: ローカルの Claper サービスを公開 URL に公開できるトンネリングツール。

• Cloudflare Tunnel: ローカルサービスを公開インターネットに公開するためのもう 1 つのトンネリングオプション。

• Nginx: 長期的なデプロイでのドメイン紐付けやサービス転送に一般的に使われるリバースプロキシツール。

• Let’s Encrypt: カスタムドメインで HTTPS を有効にするための無料 SSL 証明書サービス。

関連リンク

• Claper ドキュメント: Claper の基本とセルフホスト設定について学べます。

• Claper GitHub リポジトリ: ソースコード、リリース、課題、プロジェクト情報を確認できます。

• Claper Docker イメージ: Claper のコンテナイメージとパッケージの詳細を確認できます。

• cpolar ドキュメント: HTTP トンネル、公開 URL、Web UI 設定の作成方法について学べます。

• Cloudflare Tunnel ドキュメント: ローカルサービスを公開インターネットに公開する方法について学べます。

• Docker Compose ドキュメント: マルチコンテナアプリケーションの実行と管理方法について学べます。

• PostgreSQL Docker イメージ: PostgreSQL コンテナの環境変数と初期化設定を確認できます。