【ITニュース解説】From Static Pages to Interactive Spaces: Embedding Now4Real Chat
2025年09月23日に「Dev.to」が公開したITニュース「From Static Pages to Interactive Spaces: Embedding Now4Real Chat」について初心者にもわかりやすく解説しています。
ITニュース概要
Now4RealはWebページ内でリアルタイムチャットを可能にするツールだ。同じページを見ているユーザー同士で交流できる。HTMLにメタタグを追加するだけで簡単に導入でき、JWT認証によるユーザー連携も可能だ。ダッシュボードからチャットのデザインやメッセージ管理も行える。
ITニュース解説
Now4Realは、Webサイトを単なる情報表示の場から、リアルタイムで交流できるインタラクティブな空間へと変えるためのツールである。特定のWebページを閲覧している他のユーザーと、そのページ内で直接チャットができる機能を提供するのがNow4Realの主な役割だ。これにより、同じ興味や関心を持つ人々がすぐに意見を交換したり、知識を共有したりする場が生まれる。
Now4Realを自分のWebサイトに組み込む手順は比較的シンプルである。まず、Now4Realの公式サイトでアカウントを作成し、管理画面にアクセスする。この管理画面で、チャット機能を導入したいWebサイトを「新しいサイト」として登録する必要がある。ここで重要なのは、登録するドメインがインターネット上で公開されているものであることだ。
サイトを登録すると、Now4Realから一意の「鍵」が提供される。この鍵は、WebサイトとNow4Realサービスが正しく連携していることを証明するための「認証コード」のようなものだ。この鍵を、WebサイトのHTMLファイル、具体的にはページのヘッダー部分（<head>タグ内）に、次のようなメタタグとして追加する。
<meta name="now4real-site-verification" content="XXXXX"/>
ここで「XXXXX」の部分にNow4Realから提供された鍵を記述する。この変更をWebサイトに適用し公開することで、WebサイトとNow4Realの連携が完了する。この段階で、Webページの下部にチャットアイコンが表示され、同じページを見ている人数が表示されるようになる。アイコンをクリックすると、そのページにいる他のユーザーとチャットを開始できる。
さらに高度な連携として、Webサイトのログイン情報をNow4Realチャットにも引き継ぐ「認証」の仕組みがある。これは、例えばあるWeb管理システムに「Angelo」というユーザーでログインしている場合、チャットも自動的に「Angelo」として利用できるようにする機能だ。この機能を実現するためには、「JWT（JSON Web Token）」という技術が使われる。
まず、Now4Realの管理画面で「Authentication（認証）」メニューから「Shared Secret（共有シークレット）」を生成する。これは、JWTを安全に生成するための秘密の鍵である。次に、Webサイト側でJavaScriptコードを使ってJWTを生成する。このJWTには、現在ログインしているユーザーの名前などの情報と、Now4Realから取得した共有シークレットを使って「署名」が付けられる。この署名は、その情報が改ざんされていないことを保証するためのもので、特定の暗号化アルゴリズム（HS256など）を用いて行われる。
生成されたJWTは、Now4Realの設定オブジェクトに以下のように組み込む。
window.now4real = window.now4real || {};
now4real.config = {
target: "api+widget",
scope: "page",
custom_auth: {
enabled: true,
jwt,
},
page_context: getPageContextFromHash()
};
この設定の中で、target: "api+widget"はNow4Realサービスとウィジェット（チャット表示部分）の両方を有効にするためのものだ。scope: "page"は、Webサイトのページごとに異なるチャットルームを有効にする設定であり、例えばAという商品のページではAに関するチャット、Bという商品のページではBに関するチャットといったように、ページの内容に応じた独立した会話が可能になる。custom_auth: { enabled: true, jwt }は、先ほど説明したJWT認証を有効にし、生成したJWTをNow4Realに渡すための設定だ。そして、page_contextは、各ページを識別するための情報（例えばページIDなど）を設定する部分で、scope: "page"と組み合わせて、どのページのチャットであるかを明確にするために使われる。
特定のページではチャットを表示したくない場合もあるだろう。現在のNow4Realでは、そのような場合、Webページの構造（DOM：Document Object Model）からNow4Realのチャット要素や関連するスクリプトをJavaScriptコードで削除することで対応できる。これは、チャットが表示される<div id="NOW4REAL">という要素や、Now4Realの動作に必要なJavaScriptファイルを、ページの読み込み後にプログラム的に取り除く方法だ。将来的には、Now4Real自体から、このような表示制御のためのより簡単なAPI（プログラミングインターフェース）が提供される可能性も示唆されている。
Now4Realの管理画面には、チャットコンポーネントの見た目や配置をカスタマイズする機能も備わっている。チャットウィンドウの色や形、表示位置などを自由に変更でき、変更内容は即座にWebサイトに反映させることが可能だ。また、メッセージの管理機能も充実しており、メッセージの表示期間を設定したり、不適切な言葉や特定の単語を自動的にブロックしたりする機能も利用できる。これにより、チャットの品質を維持し、健全なコミュニケーションを促進するための運用が可能となる。
Now4Realは、簡単な組み込みでWebページにリアルタイムなコミュニケーション機能を追加し、ユーザー体験を向上させることができる強力なツールだ。システムエンジニアを目指す者にとって、このような外部サービスをWebサイトに統合する知識は、現代のWeb開発において非常に重要である。