top of page

ウィジェット

ウィジェットは、デザインに機能を追加するための要素です。外部データと連携したり、特定の機能を実行したりする動的なコンテンツとして利用できます。(例:Googleカレンダー、MQTTメニューパネル、リアルタイムニュース、時計など)

現在天気

current ja.jpg

OpenWeatherのデータを利用して、現在の天気、気温、湿度などの情報を表示します。データは10分ごとに自動更新されます。

ウィジェットパネルから「現在天気」をクリックします。キャンバスにウィジェットがすぐに追加され、左側のパネルに現在天気設定が表示されます。​

現在天気設定

  • 地域選択

    • デバイスの現在地を使用: チェックを入れると、デバイス登録段階で設定した位置情報を使用します。チェックを外すと、任意の地域を手動で入力できます。

  • 天気設定

    • 表示単位: 温度と風速の表示単位を選択します。ドロップダウンメニューからメートル法 (°C, km/h) またはヤード・ポンド法 (°F, mph) のいずれかを指定できます。

    • 言語: 天気情報を表示する言語を選択します。(英語、韓国語、日本語)

    • 背景画像: チェックを入れると、現在の天気に合わせた背景画像が自動的に適用されます。チェックを外すと、半透明の背景が適用されます。​

current weather settings ja.jpg

週間天気

weekly ja.jpg

OpenWeatherのデータを利用して、現在の天気、気温、湿度などの情報を表示します。データは10分ごとに自動更新されます。

ウィジェットパネルから「週間天気」をクリックします。キャンバスにウィジェットがすぐに追加され、左側のパネルに週間天気設定が表示されます。​

週間天気設定

  • 地域選択

    • デバイスの現在地を使用: チェックを入れると、デバイス登録段階で設定した位置情報を使用します。チェックを外すと、任意の地域を手動で入力できます。

  • 天気設定

    • 表示単位: 温度と風速の表示単位を選択します。ドロップダウンメニューからメートル法 (°C, km/h) またはヤード・ポンド法 (°F, mph) のいずれかを指定できます。

    • 言語: 天気情報を表示する言語を選択します。(英語、韓国語、日本語)

    • 背景画像: チェックを入れると、現在の天気に合わせた背景画像が自動的に適用されます。チェックを外すと、半透明の背景が適用されます。​

weekly weather ja.jpg
weekly weather settings ja.jpg

アナログ時計

clock ja.jpg

キャンバスに➂ アナログ時計ウィジェットを追加することで、現在時刻を視覚的に確認できるだけでなく、デザイン要素としてレイアウト全体のデザイン性を高めることができます。

 

  • ウィジェットパネルから「アナログ時計」をクリックします。キャンバスにウィジェットがすぐに追加され、左側のパネルにアナログ時計プロパティが表示されます。

analog clock.jpg

デジタル時計

digiclock ja.jpg

キャンバスに「デジタル時計」を追加して、現在時刻をデジタル形式で分かりやすく表示できます。

 

ウィジェットパネルから デジタル時計をクリックします。キャンバスにウィジェットがすぐに追加され、左側のパネルに デジタル時計設定が表示されます。​

デジタル時計設定

  • 日付を表示: チェックを入れると、ウィジェットに日付が表示されます。

  • 秒を表示: チェックを入れると、ウィジェットに時刻を秒単位まで表示します。

  • 日付形式: 日付の表示形式を選択します。ドロップダウンメニューから、希望する形式(例:MMM d, yyyyなど)を選択できます。

digital clock.jpg
digital clock settings ja.jpg

ニューヨーク・タイムズ

nyt ja.jpg

ニューヨーク・タイムズのニュースフィードを表示します。ニューヨーク・タイムズのRSSフィードを利用して、最新ニュースを表示します。

 

ウィジェットパネルから ニューヨーク・タイムズ」をクリックします。キャンバスにウィジェットがすぐに追加されます。

newyork times.jpg

CBSスポーツ

cbs ja.jpg

CBSスポーツのニュースフィードを表示します。ニュースサイトのRSSフィードを使用して、画面に表示してください。

 

ウィジェットパネルから 「CBSスポーツ」をクリックします。キャンバスにウィジェットがすぐに追加されます。

cbs sport.jpg

BBCニュース

bbc ja.jpg

BBCニュースフィードを表示します。BBC NewsのRSSフィードを利用して、最新ニュースを表示します。

 

ウィジェットパネルから 「BBCニュース」をクリックします。キャンバスにウィジェットがすぐに追加されます。

bbc news.jpg

リアルタイム注文状況

live order ja.jpg

お客様の注文情報がリアルタイムで受信されると、注文履歴がディスプレイの下部にリアルタイムで表示されるウィジェットです。メニュー名、数量、オプションなどの情報が自動的に更新され、店舗運営の効率を高めることができます。

  • キャンバスにウィジェットを追加

  1. ウィジェットパネルから リアルタイム注文状況 ウィジェットを選択します。

  2. キャンバス下部に リアルタイム注文状況ボード が表示されます。

  3. ウィジェットをクリックすると、左側に リアルタイム注文状況設定 パネルが表示されます。

  • リアルタイム注文状況の設定

リアルタイム注文状況ウィジェットを注文ダッシュボードに接続し、リアルタイム注文データを受信するための設定です。リアルタイムデータの連携のために、以下の項目を正確に入力してください。

  • ブローカーアドレス: 注文ダッシュボードで変更された注文データを、リアルタイム注文状況ウィジェットに即座に配信する中継サーバーのアドレスです。

  • 注文ダッシュボードURL: [https://shop-demo-office.connectplayer.net/order]

live order status ja.jpg
  • 注文ダッシュボードテストガイド

顧客が注文アプリを通じてコーヒーを注文した際、店舗内のメニューボード(Live Order Statusウィジェット)に注文状況がリアルタイムで表示されるかをテストおよびモニタリングするためのダッシュボードです。フランチャイズ専用アプリの正式連携に先立ち、リアルタイム注文データがリアルタイム注文状況ウィジェットに正常に受信されるかを事前に検証します。

  1. 上部ステータスバー情報:

    • 接続状態: 現在のリアルタイムデータ連携状態(「接続済み」表示を確認)

    • 店舗名: 現在ログインしている店舗名(例:long-beach-branch)

    • メニュータブ: Menu, Order, Menu + Order, Settings

    • 言語: 使用言語設定

    • アカウント情報: ログイン中の管理者アカウントおよびログアウトボタン

  2. ブローカーアドレス: 注文作成の上部には、リアルタイム注文状況ウィジェットと連携するためのブローカーアドレスが表示されます。

    • 表示例: wss://mqtt-office.connectplayer.net/store/usr_01KZ059MRKM8RMBW9GWK/0ff6075aa2a3ae5a77474c4f5527c702/orders

    • コピーアイコンをクリックしてアドレスをコピーし、リアルタイム注文状況ウィジェットの設定に入力すると、注文ダッシュボードとウィジェット間のリアルタイムデータ連携が完了します。

  3. 注文作成:

    • 顧客名を入力し、メニューを選択した後に 注文追加」ボタンをクリックすると、リアルタイム注文状況ウィジェットに注文履歴が即座に表示されます。

    • 下部リストで注文ステータス(受付、調理中、完成、受け渡し)をそれぞれクリックすると、その段階がリアルタイム注文状況ウィジェットに即座に反映されます。

order dashboard ja.jpg
canvs order.jpg

リアルタイムメニュー管理・自動更新

live menu en.jpg

メニューダッシュボードでメニューを追加、修正、または削除すると、リアルタイムで店舗のディスプレイに自動的に反映されます。別途の再読み込みなしで、最新のメニュー情報がリアルタイムで更新されます。

  • キャンバスにウィジェットを追加

    1. ウィジェットパネルから リアルタイムメニュー管理ウィジェットを選択します。

    2. キャンバスにコーヒーショップ用の標準メニューボードが表示されます。

    3. ウィジェットをクリックすると、左側に リアルタイムメニュー管理設定 が表示されます。

  • リアルタイムメニュー管理の設定

リアルタイムメニュー管理ウィジェットをメニューダッシュボードに接続し、メニューデータを受信するための設定です。リアルタイムデータの連携のために、以下の項目を正確に入力してください。

  1. ブローカーアドレス: メニューダッシュボードで変更されたメニュー情報を、リアルタイムメニュー管理ウィジェットに即座に配信する中継サーバーのアドレスです。

  2. ダッシュボード URL: [https://shop-demo-office.connectplayer.net/menu]

live menu settings2 ja.jpg
  • メニューダッシュボードガイド

メニューダッシュボードから店舗のメニューカテゴリ、個別の商品、および価格をリアルタイムで管理できるシステムです。

  1. 上部ステータスバー情報:

    • 接続状態: 現在のリアルタイムデータ連携状態(「接続済み」表示を確認)

    • 店舗名: 現在ログインしている店舗名(例:long-beach-branch)

    • 言語: 使用言語設定

    • アカウント情報: ログイン中の管理者アカウントおよびログアウトボタン

  2. ブローカーアドレス: メニュー管理の上部には、リアルタイムメニュー管理ウィジェットと連携するためのブローカーアドレスが表示されます。

    • 表示例: wss://mqtt-office.connectplayer.net/store/stanleychoi11@gmail.com/a44439bf85fd24355be0d87d2f5f12c1/menus

    • コピーアイコンをクリックしてアドレスをコピーし、リアルタイムメニュー管理ウィジェットの設定に入力すると、メニューダッシュボードとウィジェット間のリアルタイムデータ連携が完了します。

  3. カテゴリ管理: 新しいメニューカテゴリを追加および管理する領域です。

    • カテゴリの追加方法:

      • カテゴリ名を入力します。(例:スムージー)

      • 画像URL: カテゴリ画像がある場合、アドレスを入力します。(オプション)

      • カテゴリ追加ボタン: クリックしてカテゴリを追加します。

    • 登録済みカテゴリリスト:

      • 現在登録されているカテゴリ(例:コーヒー、お茶、デザート)と含まれるメニュー数が表示されます。

      • ドラッグ&ドロップで位置を変更できます。

      • 不要なカテゴリは右側の削除ボタンを押して削除できます。

  4. 個別メニュー管理: 選択したカテゴリの下位にメニューアイテムを追加し、価格を設定する領域です。

    • メニューの追加方法:

      • カテゴリ: メニューが属するカテゴリをドロップダウンから選択します。(例:コーヒー)

      • メニュー名: メニュー名を入力します。(例:コールドブリュー)

      • 価格 (₩): 販売価格を入力します。

      • 画像URL: メニュー画像のアドレスを入力します。(オプション)

      • メニュー追加ボタン: クリックしてメニューを登録します。

    • 登録済みメニューリスト:

      • 登録されたメニュー名、価格(₩)、および削除ボタンが下部にリスト形式で表示されます。(例:アメリカーノ、カフェラテ、コールドブリュー、エスプレッソなど)

menu dashboard ja.jpg

Googleカレンダーイベント

calendar en.jpg

Googleカレンダーに登録された予定をリアルタイムで画面に表示し、来訪者に重要なイベントや会議のスケジュールを効果的に案内できます。

ウィジェットパネル「Googleカレンダーイベント」をクリックすると、ウィジェットがキャンバスに即座に追加され、左側のパネルにGoogleカレンダーイベント設定オプションが表示されます。

Googleカレンダーイベント設定

カレンダー設定

  • GoogleカレンダーID: データを取得するGoogleカレンダーのIDを入力します。対象カレンダーは 公開(Public) 設定になっている必要があります。

  • 表示モード: Googleカレンダーの予定をどのように表示するかを設定します。

    • 現在および今後の予定: 現在進行中の予定と今後の予定を表示します。

      • 終了した予定は表示されません。

      • 進行中の予定が最優先で表示されます。

      • 今後の予定は日時順に表示されます。

    • 今日の予定: 本日に登録されているすべての予定を表示します。

    • 今週の予定: 現在の週(月曜日~日曜日)の予定を表示します。

  • 表示イベント順位: スライダーを使用して表示する予定の順番を設定できます。

  • 日付表示: 表示する日付および時刻情報を選択します。

  • 更新間隔: Googleカレンダーのデータを更新する間隔(分単位)を設定します。

参考:GoogleカレンダーのID確認方法とカレンダーの公開設定手順

  • カレンダーIDの確認方法

    • PCからGoogleカレンダーにアクセスします。

    • 左側のサイドバーにある「マイカレンダー」リストから、対象のカレンダーの横にある3点アイコン(⋮)をクリックします。

    • [設定と共有]をクリックします。

    • ページを下にスクロールし、「カレンダーの統合」セクションに移動します。

    • 「カレンダーID」項目から、該当カレンダーの固有ID(メールアドレス形式の文字列)を確認し、コピーします。

  • カレンダーの公開(Public)設定方法

    • 上記と同様に[設定と共有]ページを開きます。

    • 「アクセス権限」セクションで、「一般公開して誰でも利用できるようにする」のチェックボックスをオンにします。

    • 表示されるポップアップ通知で[OK]をクリックし、設定を適用します。

    • (オプション)「アクセス権限」の設定により、デジタルサイネージに表示される情報の範囲を指定できます。

      • すべての予定の詳細を表示: 予定のタイトルや詳細内容がすべて画面に表示されます。

      • 時間枠のみ(詳細は非表示): 予定内容は隠され、予約の有無(予定あり)のみが画面に表示されます。

google cal ja.jpg

プレゼンテーション

presentation widget ja.jpg

このウィジェットを使用すると、GoogleスライドとMicrosoft PowerPointを画面に表示できます。

ウィジェットパネル「プレゼンテーション」をクリックすると、キャンバスにウィジェットが即座に追加され、左側のパネルに プレゼンテーション設定が表示されます。

Googleスライドプロパティ

スライド設定

  • プレゼンテーションURL:GoogleスライドまたはMicrosoft PowerPointのURLを入力します。

  • スライド間隔: 各スライドの表示時間を設定します(デフォルトはスライド1枚につき15秒)。

  • ループ: スイッチをオンにすると、最後のスライドの再生終了後、最初のスライドから繰り返し再生するように設定します。

参考Googleスライドのプレゼンテーションをウェブに公開する方法

  • PCのブラウザで対象のプレゼンテーションを開きます。

  • 右上の 「共有」 ボタンをクリックします。

  • 「一般的なアクセス」 を確認します。

  • 「リンクを知っている全員」 に変更します。

  • 「リンクをコピー」 をクリックしてプレゼンテーションのURLをコピーします。

  • コピーしたリンクをプレゼンテーションウィジェットの設定に入力します。

2. Microsoft PowerPointの公開方法

  • PCのブラウザーで該当のPowerPointファイルを開きます。

  • 画面右上の [共有] ボタンをクリックします。

  • [リンクの設定] 項目を確認します。

  • [リンクを知っている全員](または [誰でも])に変更します。

  • [リンクをコピー] ボタンをクリックして、プレゼンテーションのリンクをコピーします。

  • コピーしたリンクをプレゼンテーションウィジェットの設定に入力します。

presentation setting2 ja.jpg

Trelloボード

trello ja.jpg

Trelloボードのリストを画面に表示することができます。公開設定(Public)のボードを連携させるだけで、そのリストをコンテンツとして簡単に活用可能です。

ウィジェットパネルで「Trelloボード」をクリックすると、キャンバスにウィジェットが追加され、左側のパネルに「Trelloボード設定」が表示されます。

Trelloボード設定

ボード設定

  • TrelloボードURL: TrelloボードのURLを入力します。

  • 更新間隔(分): Trelloボードの更新間隔を選択します(デフォルトは1時間)。

​参考:Trelloボードを公開(Public)にするためのガイド

  • ボードの公開範囲設定

    • 公開したいTrelloボードにアクセスします。

    • ボードの右上にある [...] アイコンをクリックしてメニューを開きます。

    • メニューの中から、現在の公開範囲(例:「Visibility: Workspace」)と表示されている項目をクリックします。

    • 表示された「Change visibility」ウィンドウで [Public] を選択します。

    • 公開に関する確認メッセージを確認し、 [Yes] または [Confirm] をクリックして設定を確定します。

  • 連携用URLの確認とコピー

    • ボードの公開設定が完了したら、ブラウザのアドレスバーを確認します。

    • アドレスバーに表示されている全URL(例:https://trello.com/b/xxxxxx)をドラッグしてコピーします。

    • コピーしたURLを、ウィジェット設定のURL入力欄に貼り付けます。

trello board settings ja.jpg

カウントアップ/ダウン

counter ja.jpg

このウィジェットは、指定した日付までの残り時間(カウントダウン)または指定した日付からの経過時間(カウントアップ)を表示します。マーケティングイベントや製品リリース、記念日などを強調し、訪問者のエンゲージメント向上に役立ちます。

ウィジェットパネルで 「カウントダウン/アップ」 をクリックすると、ウィジェットが直ちにキャンバスに追加され、左側に カウントダウン/アップ設定 が表示されます。

カウントダウン/アップ設定

カウント設定

  • 目標日時: カウンターの基準となる日付と時刻を設定します。カレンダーアイコンをクリックして選択します。

  • モード:

    • カウントダウン:目標日時までの残り時間を表示します。

    • カウントアップ:目標日時からの経過時間を表示します。

  • 秒を表示: チェックを入れると秒単位まで表示され、チェックを外すと日/時/分単位で簡潔に表示されます。

counter settings ja.jpg

オンラインスライドショー

online slide ja.jpg

オンラインスライドショーウィジェットは、GiphyやUnsplashなどの外部ライブラリから特定のキーワードに最適化された画像を自動的に検索し、店舗用ディスプレイに魅力的なスライドショー形式で表示するウィジェットです。手動でファイルをアップロードする必要がなく、設定したキーワードに応じて、表示する雰囲気を簡単に変更できます。

 

ウィジェットパネル「オンラインスライドショー」をクリックすると、キャンバスに即座にウィジェットが追加され、左側のパネルにオンラインスライドショー設定が表示されます。

オンラインスライドショー設定

 

スライドショー設定

  • キーワード: 表示したい画像や動画のテーマを入力します。(例:nature、coffee、officeなど)

  • ソース: 画像やコンテンツを取得するプラットフォームを選択します。

    • Unsplash: 高品質な写真中心

    • Giphy: 動的な動きのあるGIF(アニメーション)中心

  • 検索: 設定したキーワードとソースに基づいて画像を読み込みます。検索ボタンを押すと、右側に「00枚の画像が読み込まれました」というメッセージが表示され、コンテンツの準備が完了します。

  • 切り替え間隔(秒): スライドが自動的に切り替わる時間間隔を調整します。(スライダーを調整して1秒単位で設定可能)

  • 切り替え効果: スライド間の切り替え方法を選択します。(例:Fadeなど、画面切り替え時のエフェクト)

online slide settings ja.jpg

WiFi共有

wifi ja.jpg

QRコードを利用して、お客様にWi‑Fi情報を簡単に共有できます。QRコードを作成すれば、WiFiネットワークを簡単に共有できます!

 

ウィジェットパネル「WiFi共有」をクリックすると、キャンバスにQRコードが表示され、左側パネルにWiFi共有設定が表示されます。

WiFi共有設定: WiFi共有ウィジェットを通じてお客様がネットワークに簡単に接続できるよう、以下の情報を設定してください。

WiFi設定:

  • SSID: 共有するWiFiネットワークの名前を入力します(例:MyWiFi)。

  • パスワード: WiFiネットワークに接続するためのパスワードを入力します。

  • セキュリティ: WiFiネットワークのセキュリティタイプを選択します(例:WPA/WPA2、WEP、None(open))。

  • 非表示ネットワーク : ネットワークが非表示の状態である場合は、このチェックボックスを選択してください。

wifi settings ja.jpg

Canva

canva ja.jpg

Canvaのデザインを、ダウンロードやアップロードを行うことなく、直接画面に表示できます。

 

ウィジェットパネル「Canvaデザイン」をクリックすると、キャンバスに即座にウィジェットが追加され、左側のパネルにCanvaデザイン設定が表示されます。​

Canvaデザイン設定

スマート埋め込みリンク: Canvaからコピーしたスマート埋め込みリンク(Smart embed link)を貼り付けます。

参考Canvaスマート埋め込みリンクの取得方法

  • このページにアクセスし、Canvaアカウントを作成するか、既存のアカウントでログインします。

  • デザインを作成します。

  • [共有 (Share)] ボタンをクリックします。

  • 表示されたウィンドウで [すべて表示 (See all)] を選択し、[埋め込み (Embed)] を選択します。

  • スマート埋め込みリンク (Smart embed link) をコピーし、Canvaプロパティの該当フィールドに貼り付けます。

smart link ja.jpg
share.png
share2.png
share3.png

Embed

embed.jpg

iframe埋め込みコードを利用して、外部コンテンツを画面に表示できます。

 

ウィジェットパネル「Embed」をクリックすると、キャンバスに即座にウィジェットが追加され、左側のパネルにEmbed設定が表示されます。

Embed設定

Embed Codeフィールドにiframeコードを貼り付けてください。

embed settings en.jpg
RSSストリーマー
rss en.jpg

RSSフィードの最新ニュースを、画面下部に流れる字幕形式で表示します。

ウィジェットパネルで「RSSストリーマー」をクリックすると、キャンバスにウィジェットが即座に追加され、左側のパネルにRSSストリーマー設定が表示されます。

RSSストリーマー設定

RSSフィード設定

  • RSS URL: ニュースフィードを取得するRSSフィードURLを入力します。(例:

  • スクロール方向: テキストが移動する方向を設定します。左(<)、上(^)、下(v)方向に移動させるか、動きを止めてテキストを固定(■)することができます。

  • スクロール速度: スライダーを左右に調整して、テキストが移動する速さを設定します。スライダーを右に移動するほど、テキストのスクロール速度が速くなります。

RSS URL settings en.jpg
bottom of page