ChromeAppsでのメッセージ表示について

ChromeApps独特なのかもしれないけれど、すでにこれでアプリを作っている方はわかっているかもしれない。
ChromeAppsでは、ちょっとした確認や大事な警告のためにメッセージを表示しようとしても、

window.alert("...");
window.confirm("...");

が使えないのだ！
この大事な情報については、Disabled Web Featuresに掲載されている。

ではユーザーに何かメッセージを出したい時や、デバッグ時にはどうしたらいいのか？

1 コンソールを使う

これは開発時にのみ有効な手段だが、permissionなども気にせずにどこでも使えるので便利。

console.log("...");

これだけである。なお、これだけだとぱっと見どこにでるかわからないので、
アプリの適当なところで右クリックして、 要素を検証 を選ぼう。

すると出てくる開発者ツールの Console タブを開けばコンソールに出力したメッセージが見られる。

2 適当なメッセージ・ポップアップ系のライブラリを使う

我らがGoogle先生も Use a custom lightbox/popup. とおっしゃっているので、もう思い切り堂々と使おう。
探せば数多く存在するだろうが、自分が最近見つけたもので気に入ってるのが、
jQuery EasyUIだ。
jQuery UI よりも手軽に使え、標準で多くのコントロールが揃っている。
メッセージ表示も、必要な準備を済ませたら、次の一文でいつでもどこでも実行できる手軽さ。

$.messager.alert("title","message","icon",callback);
$.messager.confirm("title","message",callback);
$.messager.prompt("title","message",callback);

callbackの関数はそれぞれ効果が違う。

• alertの場合 : 閉じたあとに実行される関数
• confirmの場合 : ボタンが押された時に実行される関数(引数はBoolean - OKボタン時にtrue, それ以外はfalse)
• promptの場合 : ボタンが押された時に実行される関数(引数は入力値そのもの)

詳しくはjQuery EasyUIのドキュメントを参照してほしい。リファレンスもスッキリまとまっていて、
かなり見やすくて探しやすいのもポイントが高い。

.jsのサイズは大きめだが、どうせオフラインで使われるアプリで使うのだからあまり気にしないでいる。
ファイル一式をダウンロードしたら、.jsと.cssをインクルードするのは当然。必要なのは次の通り。

<link rel="stylesheet" type="text/css" href="styles/easyui/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="styles/easyui/icon.css">
<script src="scripts/jquery.easyui.min.js"></script>
<script src="scripts/easyui-lang-jp.js"></script>

パスは適当に読み替えるとして、CSSは bootstrap となっているフォルダは、実際には
テーマごとにフォルダがわかれているので好きなテーマをフォルダごと持ってきて指定する。
そして忘れずにローカライズ用の easyui-lang-jp.js ファイルを指定する。

これでEasyUIの全てのコントロールが使用可能になる。
EasyUIのコントロールの特徴として気に入っているのが、コントロールの定義方法が、
javascriptだけでなく、HTML側だけでほとんどの定義を完結できる方法があるということ。
詳しくはドキュメントを参照してほしい。

複数のライブラリを使っているとjavascriptの定義で干渉してしまって・・・ということも
たまにあると思う。そんな時にこのEasyUIならば、 必要に応じてHTML側で済ませることも可能 となる。
実際使っていて実行速度とかどうなるのかは確認したことはないが、見た目の定義は
HTML側のタグ内に書き加えて、javascript側はなるべくスッキリさせようという分け方でもいいと思う。

ポップアップのネスト

＄.messager.prompt で入力させた値を$.messager.alertで表示させたり。

$.messager.prompt("appName","入力してください",function(inp){
  $.messager.alert("appName",inp);
});

きちんとそれぞれのポップアップごとに画面が停止してくれる。

ChromeAppsで気になる挙動

普通のウェブサイト・ウェブアプリで使うと問題ないのだが、ChromeAppsで使うとポップアップを
掴んで移動させる際スムーズではない。 移動し終わったら一気に表示される 感じ。
だがまあ、使用上他に問題はなさそう。

3 終わりに

まとめとして、ChromeAppsでは、window.alertやconfirm, promptが使えないので、
適当なライブラリを使って代替しようということ。
デバッグ目的では console.log() でもいいし、一般的なメッセージ表示には
自分としてはjQuery EasyUIのmessagerコントロールが一番window.alertなどに近い使用感覚で気に入っている。

window.alertがなくて困っているChromeApps開発し始めの皆さん、自分の好みのライブラリを使って
クールに演出しましょう。