ウェブ表示

SmartSignageは、Ver.2.1からウェブページ表示機能を搭載しています。ウェブページのURLファイルをデータフォルダ内に配置すると表示そのページを表示します。表示しているときは、マウスなどによりページ操作をすることができます。
URLファイルに設定を追記することにより、表示方法を変えることができます。Ver.2.3からは自動ログインのための項目が追加されています。
次の項目が設定可能です。

  • スクロールバーの表示/非表示
  • ページの読込を表示開始時に行うのかどうか
  • 拡大・縮小表示
  • 表示位置（SmartSignage内でずらして表示する）
  • ブラウザとしてのサイズ
    （拡大・縮小と表示位置と組み合わせて使用すると切り抜き表示が可能）
  • BASIC認証用のユーザー名とパスワード指定 -Ver.2.3以降-
  • 内蔵のJavaScriptを用いた自動ログイン用のユーザー名とパスワード指定 -Ver.2.3以降-
  • 内蔵のJavaScriptを用いた自動ログイン用のエレメントID指定 -Ver.2.3以降-
  • 実行する任意のJavaScriptファイルの指定 -Ver.2.3以降-
  • JavaScriptの遅延実行時間の指定 -Ver.2.3以降-

さらにVer.2.8.3からは、次の項目が追加されています。

  • クッキーの保存 -Ver.2.8.3以降
  • 表示優先言語の指定 -Ver.2.8.3以降
  • クリック時に新しいウインドウやタブが開かれる場合、そのURLへ遷移 -Ver.2.8.3以降

また、Ver.2.8.3からは、指定または内蔵のJavaScriptを実行する直前にWeb表示にフォーカスが当たるようになりました。フォーカスの移動により実行されるJavaScriptが実行可能になっています。 　 ※フォーカスが当たるのは、一つのアプリ内で同時に一箇所のみです。Web表示を連続で切り替えるようなコンテンツ構成では想定する動作にならない可能性があります。

これらの具体的な設定方法については、[設定を追加する]を参照してください。

SmartSignageのウェブ表示は、QtWebEngineを利用しています。これはChromiumをベースとしているため、Google Chromeで表示できる多くのページを表示することができます。ただし、H.264形式の動画再生など一部の機能は動作しません。(標準のQtWebEngineの機能に依存します。)

ウェブ表示を使用する際の注意

ウェブサイトにはそれぞれ著作権が存在します。ウェブサイトを表示する際にはそのサイトの著作権を侵害しないように注意してください。特に一部を切り取るような表示の場合、意図せずに著作権を侵害している可能性がありますのでご注意ください。ウェブ表示やその他のコンテンツを表示した結果のトラブルや訴訟を含むその他の問題について、福猫株式会社は一切を免責されるものとします。

URLファイルの作成

URLファイルはいくつかの方法で作成することができます。

ウェブブラウザを使用する

Google Chrome、Firefox、最新版のMicrosoft Edge、Safariを使用している場合、簡単にURLファイルを作成することができます。※レガシー版のMicrosoft Edgeでは作成できません。

  1. ブラウザで希望のページを開きます。
    このとき、デスクトップが見えるようにしておきます。

  2. アドレスバーの左側のアイコンをデスクトップへドラッグ＆ドロップします。

  3. デスクトップにURLファイルが作成されます。 ファイル名はウェブページのタイトルに.urlの拡張子が付いたものになります。デスクトップやエクスプローラ上は拡張子.urlは不可視になっています。macOSで作成した場合、拡張子は.weblocになります。

Ubuntuにおいても、GNOMEなどのデスクトップ環境では同様の方法で作成することができます。ただし、作成されるファイルの拡張子は.desktopとなります。拡張子はデスクトップ上では不可視です。

Windowsのショートカット作成を使用する

Windowsではショートカット作成機能で、URLファイルを作成することができます。

  1. デスクトップで、右クリックして表示されるコンテキストメニューから「新規作成」－「ショートカット」を選びます。

  2. 「ショートカットの作成」ウィザードが表示されます。

  3. 「項目の場所を入力してください」の入力欄に、表示するウェブページのURLを入力します。
    URLは、http:// または https:// から始まるアドレスになります。例えば福猫株式会社のページを表示する場合は、http://www.fukuneko.com/ のようになります。
    入力したら、「次へ」ボタンを押します。

  4. 「このショートカットの名前を入力してください」の入力欄に、任意の名前を入力します。
    ここで入力した名称がファイル名になります。入力したら、「完了」ボタンをおします。

  5. デスクトップにURLファイルが作成されます。
    ファイルをダブルクリックするとブラウザが起動し、確認することができます。このファイルも.urlの拡張子がついていますが、デスクトップやエクスプローラ上では見えなくなっています。

テキストエディタで作成する

URLファイルはINIフォーマットのテキストファイルですので、任意のテキストエディタを使用して作成することができます。Windowsで作成したファイルをUbuntu版のSmartSignageで使用することも、Ubuntuで作成したファイルをWindowsで使用することもできます。

Windowsの場合

Windowsの場合はメモ帳を使用することができます。必要な項目は、[InternetShortcut]というセクションとURLエントリです。

メモ帳を使用して、福猫株式会社のホームページへのリンクファイルを作成する方法を示します。

  1. メモ帳を起動します。

  2. 最初の行に[InternetShortcut]と入力し、改行します。

  3. 2行目にURL=http://wwww.fukuneko.com/と入力します。
    次のような内容になります。

    [InternetShortcut]
URL=http://wwww.fukuneko.com/

  4. メニューから「名前を付けて保存」を選びます。

  5. ダイアログボックスが表示されるので、任意の保存先を選びます。

  6. ファイルの種類で 「すべてのファイル (*.*)」 を選び、文字コードで「UTF-8」を選びます。

  7. ファイル名は、fukuneko_site.url と入力します。※拡張子 .url を必ず付けてください。

  8. 「保存」を押すと、URLファイルが作成されます。
    作成されたファイルは、デスクトップやエクスプローラ上では拡張子 .url は見えません。
    ファイルをダブルクリックすると、ブラウザが起動し、リンク先を確認できます。

macOSの場合

macOSの場合は標準アプリの テキストエディット を使用することができます（Vimなどを使用してもかまいません）。必要な項目は、[InternetShortcut]というセクションとURLエントリです。

テキストエディットを使用して、福猫株式会社のホームページへのリンクファイルを作成する方法を示します。

  1. テキストエディットを起動します。
  2. ファイル選択ダイアログが表示されるので、「新規書類」ボタンを押します。
  3. 最初の行に[InternetShortcut]と入力し、改行します。

  4. 2行目にURL=http://wwww.fukuneko.com/と入力します。
    次のような内容になります。

    [InternetShortcut]
URL=http://wwww.fukuneko.com/

  5. メニューから「フォーマット」ー「標準テキストにする」を選びます。

  6. メニューから「ファイル」ー「保存…」を選びます。

  7. 保存先は、任意の場所にします。

  8. 標準テキストのエンコーディングは、「Unicode（UTF-8）」を選びます。

  9. 名前は、fukuneko_site.url と入力します。※拡張子 .url を必ず付けてください。

  10. 「保存」を押すと、次のようなダイアログが表示されます。
    この書類のファイル名の末尾に”.url”という拡張子を使用しています。標準拡張子は”.txt”です。
    「”.url”を使用」ボタンを押すとURLファイルが作成されます。 作成されたファイルは、Finder上では拡張子 .url は見えません。
    ファイルをダブルクリックすると、ブラウザが起動し、リンク先を確認できます。

.webloc形式のファイルには、設定を追加することができません。設定を追加する場合は、ここで紹介した.url形式を使用してください。

設定を追加する

URLファイルに設定を追加することによって、ウェブ表示の方法を変えることができます。
追加の方法は、URLファイルに、[Fdse]セクションを追加し、必要なエントリを加えます。次のエントリを追加することができます。

  • ScrollBars ….. true | false [デフォルト: false]
    スクロールバーの表示と非表示を設定します。true の場合はスクロールバーを表示します。false の場合は非表示になります。デフォルトは false で非表示です。

  • LoadOnStart ….. true | false [デフォルト: false]
    ページの読み込みを表示開始時に行うかどうかを設定します。true にするとウェブコンテンツに切り替わった後にページを読み込みます。false にすると一つ前のコンテンツが表示されているときにページを読み込みます。
    ページを読み込むと同時に開始するアニメーション等のページを扱う際には true にすると良いでしょう。

  • ZoomFactor ….. 拡大率。0.1 ～ 5.0 の範囲 ［デフォルトは 1.0 で 等倍］
    ページを拡大または縮小して表示します。左上を基準に拡大・縮小されるので、希望の位置を表示させたい場合は、表示位置やサイズと共に調整します。

  • Top ….. 表示位置の「上」。ピクセル単位で指定。[デフォルトは 0 ]
    SmartSignageの上辺が 0 になります。下方へ向かって数値が増えていきます。上方へ向かうと数値が減っていきます。負の値を設定すると、上方で表示が欠けることになります。

  • Left ….. 表示位置の「左」。ピクセル単位で指定。[デフォルトは 0 ]
    SmartSignageの左辺が 0 になります。右方へ向かって数値が増えていきます。左方へ向かうと数値が減っていきます。負の値を設定すると、左方で表示が欠けることになります。

  • Width ….. ブラウザの幅。ピクセル単位で指定。[デフォルトは 0 ]
    0 を指定するとSmartSignageの幅に自動的に合わせられます。TopやLeftと共に使用してページの一部を表示させたい場合に指定します。

  • Height ….. ブラウザの縦。ピクセル単位で指定。[デフォルトは 0 ]
    0 を指定するとSmartSignageの縦に自動的に合わせられます。TopやLeftと共に使用してページの一部を表示させたい場合に指定します。

以下はVer.2.3以降で使用可能

  • LoginUser ….. Basic認証用ログイン名を指定します。
    Basic認証はサーバーからの要求がある場合のみ実行されます。
  • LoginPassword ….. Basic認証用ログインパスワードを指定します。
  • ProxyUser ….. Proxy認証用のユーザー名を指定します。（実験的実装）
  • ProxyPassword ….. Proxy認証用のパスワードを指定します。(実験的実装)

  • RunScriptOnLoaded ….. internal | JavaScriptファイルの相対ファイルパス。[デフォルトはなし]
    指定された場合、ページが読み込まれた時に内蔵のログインJavaScriptまたは、指定のJavaScriptが実行されます。

    • internal を指定すると、内蔵のログイン用JavaScriptが実行されます。この場合、ScriptUser, ScriptPassword, ScriptUserElementID, ScriptPasswordElementId, ScriptButtonElementId で指定された値が使用されます。

    • JavaScriptファイルへのパスを指定するとJavaScriptファイルが読み込まれ、実行されます。ファイルパスは、データフォルダからの相対パスを指定する必要があります。
      JavaScriptファイルは URLファイルと同じフォルダまたは、そのフォルダ内のフォルダに配置することを推奨します。

  例） login.js というJavaScriptファイルを指定する場合
  URLと同じ階層のとき
   RunScriptOnLoaded=login.js
  URLファイルと同じ階層に JS というフォルダを作成し、その中に配置したとき
   RunScriptOnLoaded=JS/login.js

  • ScriptDelayTime ….. 内蔵または指定されたJavaScriptファイルが実行されるまでの遅延時間（秒）[デフォルトは 0.0 で直ぐに実行]
    秒は小数点以下の指定が可能です。遅延時間の基準はページが読み込まれた時になります。SmartSigangeはプリロードという事前読込機能がありますので注意が必要です。
    参照：プリロードとスクリプト実行遅延時間について

  • ScriptConfirmUrl ….. URLを指定。[ デフォルトはなし ]
    ページがリダイレクトされ、そのリダイレクト先でJavaScriptを実行させたい場合に指定します。
    ここで指定されたURLと読み込まれたURLが一致する場合のみJavaScriptが実行されます。指定しない場合はページ読み込み毎に実行されます。

  • ScriptUser ….. 内蔵スクリプトで使用されるユーザー名

  • ScriptPassword ….. 内蔵スクリプトで使用されるパスワード。

  • ScriptUserElementId ….. 内蔵スクリプトでユーザー名として使用するエレメント（HTMLタグ）のID。 指定しない場合は、次の順で検索されます

    1. username
    2. Username
    3. UserName
    4. USERNAME
    5. user_name
    6. USER_NAME

  • ScriptPasswordElementId ….. 内蔵スクリプトでパスワードとして使用するエレメント（HTMLタグ）のID。 指定しない場合は、次の順で検索されます

    1. password
    2. Password
    3. PASSWORD
    4. pwd
    5. PWD

  • ScriptButtonElementId: ….. 内蔵スクリプトでログインボタンとして使用するエレメント（HTMLタグ）のID。 指定しない場合は、以下の順で検索されます

    1. login
    2. Login
    3. LOGIN
    4. submit
    5. Submit
    6. SUBMIT

以下はVer.2.8.3以降で使用可能

  • LoadUrlOnNewWindowRequested ….. true | false [デフォルト: false]
    表示中のウェブベージのリンクをクリックした際、新しいウインドウやタブが開かれる場合、ウインドウを開かずに、そのURLへ遷移するかどうかを指定します。デフォルトはfalseで、何も起こりません。trueを指定すると、遷移します。

  • SavingCookies ….. true | false [デフォルト: false]
    SmartSignageはデフォルトではクッキーを保存しません。ログイン状態を保持するなどクッキーを保存する必要がある場合にtrueを指定します。

  • HttpAcceptLanguage ….. ja-JP, en-USなどの言語指定文字列 [デフォルト: ja-JP]
    ウェブページにアクセスする際にサーバーへ要求する優先言語を指定します。優先順にカンマ区切りで指定します。
    例）HttpAcceptLanguage=ja-JP,en-US,de

設定例

ここでは、Firefoxで作成したURLファイルに、設定を追記した例を記載します。（macOSのFirefoxでは、.url形式のURLファイルを作成できません。テキストエディタを使用して作成してください。）
スクロールバーを表示、表示が切り替わったときにページを読み込み、20%拡大、上方へ980ピクセル移動、左方へ250ピクセル移動、幅を1920ピクセル、高さを2600ピクセルにしています。

[InternetShortcut]
URL=http://www.fukuneko.com/software/product/smartsignage/windows/ja/
IDList=
HotKey=0
IconFile=C:\Users\Fukuneko\AppData\Local\Mozilla\Firefox\Profiles\e6t16z43.default\shortcutCache\2ebTZKJ+41BZxkuc6s6bfQ==.ico
IconIndex=0

[Fdse]
ScrollBars=true
LoadOnStart=true
ZoomFactor=1.2
Top=-980
Left=-250
Width=1920
height=2600

BASIC認証を行うとき

ユーザー名が fukuneko、パスワードが ei743nJiph の場合

[InternetShortcut]
URL=http://www.fukuneko.com/software/product/smartsignage/windows/ja/
IDList=
HotKey=0
IconFile=C:\Users\Fukuneko\AppData\Local\Mozilla\Firefox\Profiles\e6t16z43.default\shortcutCache\2ebTZKJ+41BZxkuc6s6bfQ==.ico
IconIndex=0

[Fdse]
LoginUser=fukuneko
LoginPassword=ei743nJiph

内蔵スクリプトによるログインを実行するとき（ID指定を省略できる場合）

ユーザー名が fukuneko、パスワードが ei743nJiph。
ユーザー名を入力するエレメントが <input type="text" id="user">
パスワードを入力するエレメントが <input type="password" id="pwd">
ログインボタンのエレメントが <button id="login">ログイン</button>
これらの場合は、各エレメントのID指定は省略できるので次のようになります。

[InternetShortcut]
URL=http://www.fukuneko.com/software/product/smartsignage/windows/ja/
IDList=
HotKey=0
IconFile=C:\Users\Fukuneko\AppData\Local\Mozilla\Firefox\Profiles\e6t16z43.default\shortcutCache\2ebTZKJ+41BZxkuc6s6bfQ==.ico
IconIndex=0

[Fdse]
RunScriptOnLoaded=internal
ScriptUser=fukuneko
ScriptPassword=ei743nJiph

内蔵スクリプトによるログインを実行するとき（IDを指定する場合）

ユーザー名が fukuneko、パスワードが ei743nJiph。
ユーザー名を入力するエレメントが <input type="text" id="customuser">
パスワードを入力するエレメントが <input type="password" id="custompassword">
ログインボタンのエレメントが <button id="gopage">ログイン</button>
これらの場合は、各エレメントのIDは検索対象外のため指定を省略できません。以下の例では、ページが読み込まれた1.5秒後に実行するように指定しています。

[InternetShortcut]
URL=http://www.fukuneko.com/software/product/smartsignage/windows/ja/
IDList=
HotKey=0
IconFile=C:\Users\Fukuneko\AppData\Local\Mozilla\Firefox\Profiles\e6t16z43.default\shortcutCache\2ebTZKJ+41BZxkuc6s6bfQ==.ico
IconIndex=0

[Fdse]
RunScriptOnLoaded=internal
ScriptDelayTime=1.5
ScriptUser=fukuneko
ScriptPassword=ei743nJiph
ScriptUserElementId=customuser
ScriptPasswordElementId=custompassword
ScriptButtonElementId=gopage

プリロードとスクリプト実行遅延時間について

SmartSignageには、コンテンツが表示される前に読み込んでおく、プリロード という仕組みがあります。プリロードによって、読み込みに時間がかかるコンテンツであっても、素早く切り替えることが可能になっています。 SmartSignageのプリロードは、現在（表示中）のコンテンツの表示予定時間の半分（1/2）を経過したときに実行されます。これは、現在のコンテンツの表示予定時間が10秒だとすると、現在のコンテンツが表示開始してから5秒後に、次のコンテンツが読み込まれるということを意味しています。
SmartSignageのコンテンツ表示時間はグローバルの設定で基本的に全コンテンツ一律になります。ただし、動画の場合、動画自身の時間を適用するオプションを有効すると動画毎に表示時間が異なることになります。それに伴い、プリロードの時間も変動します。例えば、動画の時間が30秒の場合、その半分の15秒が経過したときに、次のコンテンツのプリロードが実行されます。
SmartSigangeに新たに追加されたウェブコンテンツでのスクリプト実行機能を利用する際に、このプリロードの時間を考慮する必要があります。
ScriptDelayTime に時間を設定することにより、スクリプトを遅延実行させることができます。スクリプトの実行機能は主に自動ログインを目的としたものなので問題は生じないことが多いと思われますが、ウェブコンテンツが表示されてから一定時間を経過後に表示を変えたいというような場合に問題が生じます。
スクリプトの実行はウェブページを読み込んだ後に実行されます。遅延実行の場合は、読み込み完了時から指定した時間経過後にスクリプトが実行されます。これは、プリロードされた時、つまり非表示の状態のときを指します。表示後に実行させたい場合は、遅延実行時間にプリロードの時間を足す必要があります。

例） 前のコンテンツの表示予定時間が 10秒
表示 1 秒後にスクリプトを実行する場合 10 / 2 + 1 = 6
ScriptDelayTime=6
【概念図】

ウェブコンテンツはプリロードさせないことも可能です。そのためには、LoadOnStart=true を設定します。
LoadOnStart が trueの場合は、プリロードされません。表示開始と同時にウェブページを読み込みます。読み込み完了後に遅延時間として設定した時間が経過したときにスクリプトが実行されます。

設定例 - Microsoft 365 へのログイン -

ここでは、Microsoft 365 へのログイン方法を紹介いたします。 　 このウェブサイトは、ユーザーIDを入力後のフォーカスの変化を捉えているため、SmartSigange2.8.3以降でのみ動作します。
※このマニュアル作成時に確認された方法です。ウェブサイの変更により動作しなくなる可能性があります。動作については一切の保証はありません。また、問い合わせ等も受けることはできません。ご了承ください。

まずURLファイルを用意します。名称は自由に付けることができますが、ここではoffice365.urlとします。

office365.url

[InternetShortcut]
URL=https://www.office.com/login?es=Click&ru=%2F

[Fdse]
RunScriptOnLoaded=js/login.js
ScriptDelayTime=0.5
LoadOnStart=true

ログイン用のスクリプトは後で用意します。 　 ScriptDelayTimeは0.5秒にしてあります。環境によってはもう少し長い時間が必要な場合もあります。
LoadOnStartを有効にし、ウェブページが表示された後に実行するようにしています。

次に、ログイン用のJavaScriptを用意します。jsというフォルダの中にlogin.jsというファイルを作成します。名前は任意ですが、RunScriptOnLoadedで指定した名称に合わせてください。

js/login.js


function setUserId(user) {
    let elm = document.getElementById('i0116');
    if ( elm ) {
        elm.value = user;
        setTimeout( function() {
            let elm = document.getElementById('i0116');
            elm.focus();
            setTimeout( function() {
                let elm = document.getElementById('idSIButton9');
                elm.focus();
                setTimeout( function() {
                    let elm = document.getElementById('idSIButton9');
                    elm.click();
                }, 500);
            }, 1);
        }, 500);
    }
}

function setPassword(password) {
    let elm = document.getElementById('i0118');
    if ( elm ) {
        elm.value = password;
        setTimeout( function() {
            let elm = document.getElementById('i0118');
            elm.focus();
            setTimeout( function() {
                let elm = document.getElementById('idSIButton9');
                elm.focus();
                setTimeout( function() {
                    let elm = document.getElementById('idSIButton9');
                    elm.click();
                }, 500);
            }, 1);
            
        }, 500);
    }
    else {
        let elm = document.getElementById('idSIButton9');
        if ( elm ) {
            elm.focus();
            setTimeout( function() {
                let elm = document.getElementById('idSIButton9');
                elm.click();
            }, 500);
        }
    }
}

function login() {
    if ( location.host === 'login.microsoftonline.com' ) {
        setUserId('ログインユーザーID');
    }
    else if ( location.host === 'login.live.com' ){
        setPassword('パスワード');
    }
}

login();

ログインユーザーIDとパスワードはそれぞれログイン可能なものに置き換えてください。
通常のWebページへのログインとの違いは、ユーザーIDやパスワードを設定した後に、ボタンへフォーカスを移し、0.5秒待ってからクリックイベントを発生させている点です。