チュートリアル


1.はじめに

下記の図は、ノヴィサインのWeb経由での広告制作、配信の流れです。
signage-android-player

ノヴィサインデジタルサイネージの制作と配信には下記のような、主に6つのステップがあります。

  • 機器の設定
  • 登録
  • スライド(広告)の作成
  • プレイリストの作成
  • ネットワークへの接続
  • Webブラウザでの公開

2.機器の設定

1.広告配信スクリーン機器と再生機器の仕様

  • スクリーン機器
    HDMIまたはDVIビデオ入力があり、設置スペースに合うLEDやLCD画面を用意してください。
  • 再生機器
    あなたのプレーヤーのハードウェアデバイスとして、WindowsベースのプラットフォームやAndroidベースのプラットフォームを使用することができます。(iOSベースのデバイスは使用できません。)

2. 再生機器に以下を接続します。

  • 電源
  • ネットワーク
  • スクリーン機器

3. スクリーン機器を壁などに設置します。

4. 再生機器を背後などに設置します。

3.登録

1. ノヴィサイン日本公式サイトから登録をします

30日間は、ほぼ全ての機能を制限なく無料で利用できます。是非、評価のために、無料の登録を行ってください。

registering

 

2. このサイトにある新規登録ボタンをクリックします。

このサイトの右上にある新規登録ボタンをクリックします。
登録のためのフォームが開きます。

singup

 

3. 登録手続き:

  • 有効なメールアドレスを入力してください、これがユーザーIDとなります。
  • パスワードを入力してください。パスワードは6文字以上の半角英数字である必要があります。
  • 氏名および会社名は任意入力となります。入力する場合は半角英文字にて入力してください。
  • 規約をご確認の上、ご了承頂ける場合は、“同意します。”にチェックを入れてください。
  • 最後に 「参加」をクリックして完了となります。

 

備考: 一度登録(Sign-UP)いたしますと、このサイトの”ログイン”ボタンから、いつでもあなたのノヴィサインエディタページに、直接ログインすることが出来ます。

 

creativescreen

サインアップもしくはサインイン(ログイン)をしますと、上の様な画面になります。
ノヴィサインロゴに続いて、4つのメイン機能へのボタンがあり、ぞれぞれ下記の機能を持ちます。

  • クリエイティブ:Creative
    実際の広告を作成するためのエディタ画面へ遷移します。まずはここから初めてください。ここでは、広告のレイアウトのための様々な機能が用意されています。
  • プレイリスト:Playlists
    ここには、クリエイティブで制作した複数の広告の表示順番や表示タイミングを、時系列に構成、まとめる機能があります。エディタで広告を作成した後に使う機能となります。
  • プレイヤー:Players
    ここでは、プレイリストで構成した広告を配信するための機能を提供します。プレイリストで構成した広告をここに配置することで、プレイヤー(実際の配信機器、画面)で利用するユニークな配信IDを発行することが出来ます。
  • グループ:Groups
    グループ機能は通常利用しませんが、プレイリストをグループ化することにより、プレイヤーに対して複数のプレイリストを一つずつ追加するのでは無く、まとめて複数のプレイリストを割り当てる作業を手助けしてくれます。

4.スライド(単体広告)の作成

ここでは、様々な要素を組み合わせて造る単体広告クリエイティブ(スライド)の作成方法についてガイドします。

 

メモ・すでに画像として出来上がっている静的な1枚絵だけの表示であれば、別の方法もあります、そちらは本項の最後(15番)を御覧ください。

 

1. スライドの作成

“作成”ボタンをクリックします。

mycreativea

上記のような、テンプレート選択画面が現れます。

template

 

2.必要事項の入力

ここで、新しく造る広告画面のスライド(ページ)名、および説明(備考やメモ)を入力し、表示する画面に適した画面アスペクト比をドロップダウンメニューから選択します。必要であれば、お好みのテンプレートから制作することを選択できます。全く白い画面(Blank)から制作していくことも、既存のテンプレートからカスタマイズ、改編して制作していくことも出来ます。

 

メモ: アスペクト比選択メニューでは、実際に表示するプレイヤー機器画面の設置方向によって、横画面だけでなく、縦画面にも対応できます。例えば、16:9は標準的なHD横画面の比率で、9:16はHD縦画面の比率です。

 

入力と選択が終わったら、画面右上の 作成 ボタンをクリックします。

 

3.広告エディタ画面

editor

広告エディタ画面が表示されます。

 

広告エディタ画面は以下の3つの部分から構成されます。

  • 左側の編集機能ボタン群
  • 中央の編集エリア
  • 右側のプロパティ(属性)編集エリア

メモ:右上にある矢印が組み合わさったボタンをクリックすると編集エリアのサイズを少しだけ拡張することが出来ます。

 

 

4. クリエイティプ(スライド)プロパティの入力

まず右側のプロパティ(属性)編集エリアに表示されている、クリエイティププロパティにスライドの名前を入力します。必要であれば説明欄にも情報を入力します。

また、プロパティ(属性)編集エリアクリエイティプの外観にある塗りつぶしを利用すれば背景色や塗りつぶし方法を選択できます。

 

 

5. 背景色と塗りつぶし方法の選択

color

塗りつぶしメニューの1番上には下記の機能が並んでいます

  • カラーなし
  • 単純な塗りつぶし
  • 以下、様々なグラデーション

2番目の欄では、グラデーションの端と端のカラーを設定できます。

3番目の欄でカラーを選択できます。

 

塗りつぶしメニューの閉じるボタンをクリックします。

 

 

6.編集機能ボタン

dragdrop

編集エリアに背景色が設定されました。

これで単体広告のためのセッティングが完了しました。

 

続いて、左側に並んでいる、色々な編集機能ボタンを使って、編集エリアに要素を追加していきます。

list

このようにたくさんの機能がありますが、このガイドでは一部の機能について解説します。

 

 

7. ロゴの追加

フォト(カメラのアイコン)編集エリアの任意の位置へドラッグします。

media

すると、自動的に メディアを選択ウインドウがオープンします。 window opens.

 

続いて、アップロードボタンをクリックします

ファイル選択画面が表示されますので、選択、決定します。

upload

アップロードした画像の横に完了と表示されるまで待ちます。アップロードが完了したら閉じるをクリックします。

 

media2

アップロードした画像が、 メディアを選択ウインドウに表示されていますので、それをクリックし選択、次にOKをクリックします。

 

style

ロゴ画像が編集エリアに表示されました。ロゴを直接選択して移動や拡縮などを行ったり、右側のプロパティ(属性)編集エリアを編集することで、様々な変更を加える事が出来ます。

 

 

8. 図形(シェイプ)の追加

シェイプ(丸・三角・四角のアイコン)編集エリアの任意の位置へドラッグします。

style2

図形のサイズは、四隅の丸い部分をドラックすることで変更できます。

 

shapes

図形を選択していれば、プロパティ(属性)編集エリアに、図形に関する様々なプロパティが表示されますので、ここを変更することで図形の形や、色を変更したりすることが出来ます。

style3

  • 例えば、図形の塗りつぶしは、塗りつぶしをクリックします、背景色を選択した時と同じウインドウが表示されますので、同じように設定可能です。

 

9. 文字列の追加

ラベル(Tの字アイコン)編集エリアの任意の位置へドラッグします。

style4

任意の文字列を入力します。

 

textproperties

編集エリア上のテキストエリアでも、プロパティ(属性)編集エリアでも、文字列を入力することが出来ます。また、フォントの変更、サイズの変更なども行えます。

 

style5

変更した結果は、編集エリアに即座に反映されます。

 

 

10. スライドショーの追加

スライドショー(2つの四角が重なっているようなアイコン)編集エリアの任意の位置へドラッグします。

style6

スライドショーのサイズは、四隅の丸い部分をドラックすることで変更できます。

 

slideshow

左側のプロパティ(属性)編集エリアスライドショーのプロパティが表示されています。スライドショーに、画像を追加するためにはオレンジ色のカメラのをクリックしてください。

 

media3

メディアを選択ウインドウが開きます。

必要な画像がなければ、アップロードボタンをクリックして、画像をアップロードします。

 

注意・メディアを選択でアップロードした画像は削除できませんので、必要なものだけをアップロードしてください。

 

media4

メディアを選択画面で、スライドショーに必要な画像を選択してOKをクリックします。

 

slideshow2

選択した画像スライドショーのプロパティに表示されます。これを必要な画像分だけ繰り返します。

 

再生期間: 各画像の再生期間(遷移時間)は初期値で10秒が設定されています。これは変更可能ですので任意の秒数に変更してください。

 

 

11. YouTubeビデオの追加

YouTube(YouTubeロゴのアイコン)編集エリアの任意の位置へドラッグします。

 

youtubevideo

左側のプロパティ(属性)編集エリアに、ノヴィサインが設定するデフォルト値が入力されていますので、下記の方法でURLを変更してください。簡単な方法としては、YouTubeのサイトに行き、あなたのビデオを検索してURLをコピーし、プロパティ(属性)編集エリアのURLエリアにそのURLをペーストします。

 

 

12. RSSフィードの追加

RSSフィード(左下に丸い点があり2本の曲がったラインが描かれているアイコン)編集エリアの任意の位置へドラッグし、必要があればサイズを変更します。

rss

左側のプロパティ(属性)編集エリアに、URLを設定するフィールドがありますので、そこにRSSフィードのURLを入力します。

 

 

13.プレビュー

これまで作成・追加してきた、様々な要素の動作を確認するために、プレビューします。
画面の左上にあるプレビューボタンをクリックすると、画面がフルスクリーンになり、設定した画面が表示されます。

 

 

14.保存

これまで作成・追加してきた、スライドを保存するためには、画面左上にある保存をクリックしてください。これをクリックすることで、クラウド上のサーバに保存されあなたのデータが保全されます。
保存ボタンがグレーアウトしてクリック出来ない時は、保存された後、変更がされていない状態ですので安心してください。少しでも変更を加えると、またオレンジ色のボタンになりますので、必要であれば保存を行ってください。

 

作業中は、こまめにこのボタンをクリックして、保存してください。これはとても重要です。

 

 

15.広告エディタ画面を閉じる

保存が終わり、作業も修了しましたら、画面右上にあるエディタを閉じるボタンをクリックします。保存されたクリエイティブ(スライド)が、マイページの一覧の中に表示されているはずです。

 

また、この画面(マイページ)では、この後のプレイリストで利用できる、単体の画像やビデオを登録することも可能です。その場合は追加ボタンをクリックしてマイライブラリから追加を行ってください。

 

5.プレイリストの作成

プレイリストでは、前項で作成したスライドや画像を複数組み合わせて、配信用の広告を仕上げることが出来ます。

 

1. クリエイティブマイページに行きます

 

2. 組み合わせたいスライドや画像を選択します。1つでも複数でも構いません。

creative2

 

3. 新しいプレイリストに追加するボタンをクリックします。

newplaylist2

プレイリスト画面が表示されます。

 

4. プレイリストの名前と説明を入力します。

右側の小さなプレビュースクリーンで、プレイリストのプレビューを見ることが出来ます。

 

5. もし他のスライドや画像を追加したい場合は、クリエイティブを追加ボタンをクリックすると、スライドや画像の一覧が表示されますので、そこからドラックすることで追加できます。

 

6. 作成(もしくは更新)ボタンをクリックするとプレイリストが完成し、保存されます。

 

6.ネットワークへの接続(プレイヤー)

広告素材の構成は終わりました。ここでは、スクリーンに配信するための接続方法を解説します。

 

1. 画面一番上にある「プレイヤー」をクリックします。

myplayer
マイプレイヤー画面が表示されます。

 

2. 「プレイヤーの追加」をクリックします。

新しいプレイヤー画面が表示されます。

 

3.「新しいプレイヤー」と書いてある横のフィールドに、プレイヤーの名前を入力します。説明は任意です。

 

4. 右側の「プレイリストを追加ボタンをクリック」すると「プレイリスト一覧」が表示されますので、そこからドラッグして下のエリアにドロップします。

 

5.「作成」ボタンをクリックします。

 

5.マイプレイヤー画面に、今作成したプレイヤーがチェックされオレンジ色の背景で表示されているはずです。

これで、スクリーンへの配信の準備は整いました。

 

配信方法としては、主に下記の二通りがあります。

  • Webブラウザーを利用する方法
  • Andoroidアプリケーションを利用する方法

プレイヤーリンクの部分に書いてあるURLがWebブラウザーで配信するときのURLとなります。また、ここに含まれるscreenKeyは、Andoroidアプリケーションによる配信に利用します。

 

7.WEBブラウザでの公開

マイププレイヤープレイヤーリンクをクリックするか、プラウザのURLフィールドにコピーペーストして実行します。

welcome

上のような画像がブラウザーに表示されますので、Let’s rollボタンをクリックすると、クラウドから広告情報が読み込まれ、広告表示が開始されます。

7.アンドロイドアプリでの公開

ノヴィサインの広告は、Andoroid対応のタブレット、スマートフォン、ドングルPC、Andoroid TVなどでも配信できます。

 

1. Andoroid アプリケーションをインストールします。

Google Playからノヴィサイン専用のAndoroidアプリケーションをダウンロード出来ますので、ダウンロードしてインストールをします。

リンクはこちらhttps://play.google.com/store/apps/details?id=com.novisign.android.player

android-digital-signage5

インストールが終わるとAndoroid機器の画面にノヴィサインデジタルサイネージプレイヤー(以下ノヴィサインプレイヤー)のアイコンが現れます。

クリックして実行してください。

 

2. Adobe Airのインストール

ノヴィサインプレイヤーを実行すると、Adobe Airがインストールされていない場合に限り、Adobe Airをインストールかどうか聞いてきますので、インストールを行ってください。

ここでインストールを忘れてしまった場合は、Google PlayにてAdobe airをダウンロード、インストールしてください。

 

3.ノヴィサインプレイヤーを実行します

android-signage-screen3

ScreenKeyを入力するフィールドが現れます。

 

4. ここでステップ6で作成した、マイプレイヤーの表示したい広告のプレイヤーリンクにあるScreenKeyを入力します。

 

5. Run automaticallyをチェックすると、次回以降ノヴィサインプレイヤーを実行するとすぐに広告表示が開始されます。

Androidプレイヤーのクイックリファレンスページを作成いたしましたので、下記リンクからご参照ください。

Androidプレーヤ設定クイックリファレンス

メモ・初回の広告読み込みの時だけ、ネットワークの状況などにより若干の表示遅延が発生することがありますが、一度ひと通りの広告がクラウドから読み込まれますと、2周目以降、その遅延は解消されます。

8.Androidデバイスへのフォントの追加方法

1.Novisign Studioへのフォント追加方法

Novisign Studioのクリエイティブ作成画面で使いたいフォントが無い時は、Windowsから追加したい「ttfファイル」を開いて”Install”ボタンを押すとPCに新しいフォントがインストールされます。詳細方法は”Windows フォント 追加”等のキーワードで検索してみてください。

Novisign Studioのクリエイティブ作成画面で、すでにリストにあるフォントを選ぶ代わりに、フォント選択Boxにフォント名を入力しEnterキーを入力すれば1.で追加したフォントが選択されます。

 

 

2.Androidプレーヤーへのフォント追加方法

まず最初に、Androidデバイスで受信可能なEメールアドレス宛に「ttfファイル」を添付して送ります。(または、他のttfファイルをAndroidデバイスにコピーする方法で行ってください)

Option A: root権限がないデバイスの場合(Novisignプレーヤーのバージョンがv2.0.54以上である必要があります)

1.「ttfファイル」の名前をエディターに表示される名前と同じになるように変更します(拡張子 .ttfはそのままにしてください)

例) フリーフォントの”チェックポイント★リベンジ”を追加したい場合 http://coliss.com/articles/freebies/best-of-free-japanese-fonts-for-2017.html

エディターに表示されるフォント名は”チェックポイント★リベンジ”ですが、「ttfファイル」名は”CP_Revenge.ttf”となっています。

⇒ この場合「ttfファイル名」を “チェックポイント★リベンジ.ttf”に変更してください。

2. 「ttfファイル」を以下のディレクトリに置きます。ファイルの移動にはGoogle Playにある”File Manager”アプリケーションを使用すると便利です。

/mnt/sdcard/Android/data/com.novisign.**/files/**Player/cache/font

または

mnt/sdcard/Android/data/com.onsignage.**/files/**Player/cache/font

**の値はAndroidデバイスのメーカーによって異なります。(通常は簡単なパスですぐに見つけることができます。)

3. プレイリストが実行されているときは、一旦メニュー画面に戻ってから再度スタートしてからフォントを読み込んでください。

 

Option B: root権限のあるデバイスの場合

systemフォントとして簡単にインストールできます。

例えば、「ttfファイル」をブラウザからダウンロードし、フォントインストーラからインストールします。(フォントインストーラはPlay storeで見つかります。)。

root権限のないデバイスの場合は、この方法ではインストールできません。