Library

Introduction

Do-It-Yourself パネル（“自作”パネル。以下DIYパネル）を一言であらわすと、アプリケーション外でホスティングされているWebページです。それらはパブリックなWebサーバ上に設置されているか、内部的なURLによって閲覧可能なWebぺージであれば動作します。ページは外見や振る舞いなど修正されることなく、そのまま表示されます。本ドキュメントはStatus Board上に表示されるDIYパネルの設計に役立つでしょう。

パネルサイズ

Status Boardのパネルは固定された64pxのタイルを組み合わせることでカスタマイ ズが可能です。もっとも小さなパネルサイズは250×58px（4×1タイル）です。パネルは水平方向に1、1.5、2、3まで伸縮させることが可能です。垂直方向へは64pxの インクリメント内で伸縮が可能です。以下は利用可能なパネルサイズの表です:

<tr>
	<td>256 x 64</td>
	<td>384 x 64</td>
	<td>512 x 64</td>
	<td>768 x 64</td>
</tr>

<tr>
	<td>256 x 128</td>
	<td>384 x 128</td>
	<td>512 x 128</td>
	<td>768 x 128</td>
</tr>

<tr>
	<td>256 x 192</td>
	<td>384 x 192</td>
	<td>512 x 192</td>
	<td>768 x 192</td>
</tr>

<tr>
	<td>256 x 256</td>
	<td>384 x 256</td>
	<td>512 x 256</td>
	<td>768 x 256</td>
</tr>

<tr>
	<td>256 x 320</td>
	<td>384 x 320</td>
	<td>512 x 320</td>
	<td>768 x 320</td>
</tr>

<tr>
	<td>256 x 256+64n</td>
	<td>384 x 256+64n</td>
	<td>512 x 256+64n</td>
	<td>768 x 256+64n</td>
</tr>

メタデータ

HTMLに記述するのと同じようにタグによって、Status Boardに設置された際にパネルをどのように作用させるかを指定することが可能です:

<meta data-refresh-every-n-seconds="300" application-name="People In Space" data-allows-resizing="YES" data-default-size="4,4" data-min-size="4,4" data-max-size="8,4" data-allows-scrolling="NO" />

すべての属性はオプションです:

  • data-refresh-every-n-seconds: パネルの更新頻度です。設定しない場合は、デフォルト値が使用されます。（Status Board 2.0では10分に設定されています。）

  • application-name: パネル名です。DIYパネルの編集時に表示されます。

  • data-allows-resizing: YESかNOを記述しデフォルトではYESです。パネルサ イズの変更をユーザに許可するかどうかを指定します。

  • data-default-size: Status Board上のサイズはすべてタイル値で指定されます。（タイ ルはレイアウトスクリーン上でグリッドブロックを使用して表されます。）デフォルトは4,4（幅,高さ）です。デフォルトの最大値は12,12です。

  • data-min-size: 例えば4,4に設定すると、ユーザはあなたのパネルをそれ以上小さ く配置することはできなくなります。最小値は4,1です。

  • data-max-size: 例えば16,4に設定するとユーザはあなたのパネルをそれ以上大きく 配置することはできなくなります。（ポートレイトモードでは12ユニット、ランドスケープモードでは16ユニットです。）最大値は16,16です。

  • data-allows-scrolling: YESかNOを記述しデフォルトではYESです。NOに 設定すると、ユーザはパネル内でスクロールが行えなくなります。

どのユニットもポイントで指定することも可能です。よってデフォルトサイズの256,256は4,4と指定することとイコールです。（パネルタイルはそれぞれ64×64ポイントです。）特に、ユニットで記述したかポイントで記述したかを明示する必要はありません。値が小さい場合はパネルタイルと認識し、値が大きな場合はユニットと認識します。

アピアランス

あなたのWebページは薄いグレーの枠線で囲まれたパネルとして表示されます。

Status BoardのパネルではUniversフォントが使用されています。以下の2つのバリアントがAppに含まれています:

  • Status Board Font Light （font-family: "StatusBoardFontLight"）はラベルや表のヘッダに使われています。

  • Status Board Font （font-family: "StatusBoardFont"）はコンテンツに使われています。

カラー

パネルでは基本的に2つのカラーが利用されています。最も重要な情報は白で表示し、補足情報はグレーで表示されています。グラフや時計などカラフルなパネルでは下記のカラーがRGBで指定され使用されています:

<tr>
	<td>255,198,0</td>
	<td>0,186,0</td>
	<td>255,48,0</td>
	<td>155,0,194</td>
	<td>0,108,230</td>
</tr>

<tr>
	<td>100,112,118</td>
	<td>252,88,181</td>
	<td>0,159,153</td>
	<td>252,107,0</td>
	<td>174,183,188</td>
</tr>

サンプルコード

サンプルページがこちらに準備されていますのでご覧ください。これはシンプルな256×256pxサイズのパネルです。これを流用することですぐにDIYパネルの開発を始めることができるでしょう。

分かっている問題

Status BoardであなたのWebぺージをHDTVや水平方向に出力すると、より大きな解像度に適用させるために縦横比が変更される場合があります。現時点でこれを回避する方法は容易ではなくありませんが、将来のバージョンで必要なJSやCSSフックを準備する予定です。

DIYパネルをURLで共有する

完成した表パネルを顧客やユーザに共有しましょう。以下のフォーマットでリンクを作成することでStatus Boardに登録されます:

panicboard://?url=[diy%20encoded%20url]&panel=diy&sourceDisplayName=[your%20encoded%20company%20name]

引数sourceDisplayNameはオプションです。

このフォーマットのリンクをiPad上でクリックすると、Status Boardが起動しDIYパネルをインストールするかを訊ねるダイアログが表示されます。

Status BoardにDIYパネルを追加する

スクリーン左上の"ギア"アイコンをタップすると編集モードになります。DIYパネル（<> ロゴのブロックです）を任意の場所にドラッグします。サイズを変更することも可能です。

データを設置する

ファイルとして存在しているデータをStatus Boardがアクセス可能な場所に設置する必要があります。以下の2つの方法があります:

Dropboxに設置する

注意: Dropboxは未課金ユーザへのHTMLファイルホスティングを2017年9月に終了するとアナウンスしました。すでにこの方法でDIYパネルを共有しているユーザ様は他の方法をご検討ください。

もし既にDropboxをお使いでしたら、この方法が最もシンプルです。

  1. iPadにDropboxAppをインストールします。
  2. 編集モードで、配置された表パネルをタップします。すると設定が開きます。
  3. Dropboxをタップします。
  4. するとDropbox.appが開き、Status Boardからのアクセスを許可するかが訊ねられます。（Status Boardは許可されたファイルのみにアクセスします。許可されていない他のファイルにアクセスすることは決してありません。）
  5. 許可後、再びStatus Boardが開きます。Dropboxフォルダをブラウズし、使 用したい表データのファイル名をタップします。

以上です！Status Boardは表を描画します。Dropbox上のデータを編集すると、 Status Boardにも反映されます。

Webサーバに設置する

この方法ではWebサーバに関する知識が必要です。また、ダイナミックに生成される データを活用する場合は必ずこの方法での設置が必要となります。

  1. 任意のWebサーバに設置します。
  2. 編集モード中に表パネルの設定を開きます。
  3. URLをタップします。
  4. URL欄にデータファイルの設置されているリンクURLを入力します。
  5. 保存をタップします。

以上です！サーバ上のデータファイルを更新すると、程なくしてStatus Boardのパネル上でも更新されます。

デバッグする

自身で作成されたパネルをデバッグするには、Status Boardが編集モードでない状態の時にクワッドタップ（4回連続タップ）します。すると、サーバからStatus Boardに送られたHTMLが表示されます。外部ディスプレイを使用している場合は、でバッグウインドウも外部ディスプレイにデバッグウインドウも外部ディスプレイに表示されます。

パネルを強制的に更新するには、Status Boardが編集モードでない状態の時にトリプルタップ（3回連続タップ）します。（リストパネルの場合は、下へのプル操作でリロードされます。）

最終更新日: 2018年03月28日