Javascriptネイティブのalert機能は、デザインも、使い勝手も、何となくの使い勝手もあまりよくありません。
※個人的に気に入らないだけですけど。
Webデスクトップとして、とことんこだわるために、独自のアラート表示を作ります。
そして、同時に便利なモーダルウィンドウとしても使えるようにしたいと思います。
デモ
今回の機能は、デスクトップを右クリックして、「アラート表示」を選択すると、確認できます。
うまく表示されていない場合は、「メニュー」-「データ初期化」をしてください。
※デモは最新版が表示されています。該当のデモを見たい場合は、ソースをCloneしてコミットを戻してブラウザで表示して確認してください。
ソースコード
https://github.com/yugeta/web_desktop/
今回の最終Commitは"#36"です。
解説
アラート表示と言っても、単にアラートっぽい見た目のウィンドウを表示して、ボタンをクリックしたら閉じるだけの処理です。
見た目も機能もシンプルなほど良いという仕様です。
通常のアラートは、次のように書くだけなので、
alert("ホゲホゲ")
似たような感じで、
new Modal("ホゲホゲ")
これで画面にアラートが表示されるようにしています。
※いまのところは、アラート表示されていても、他の処理が行えてしまいますが、モーダル表示されている間は、背景を触れなくすることで、alertと同じ挙動にすることは可能です。
でも、もちろん、この処理を実行するJSでは、事前にモジュールをimportする必要がありますけどね。
alert関数をハックすることも考えたんですが、それはちょっとやりすぎな感じもしたので、今回は大人しくローカル関数で処理することにしました。
モーダル機能
ソースのコメントにも書いたのですが、このアラート機能は、少し仕様を追加して、アラートの文字列ではなく、オプションを流し込むことで、機能的なモーダルウィンドウとしても使うことができます。
モジュールコメントの抜粋
/**
* アラート(Modal)表示
*
* [howto]
* new Modal("string")
* new Modal(options)
*
* [options]
* {
* message : "string",
* buttons:[
* {
* key : "success",
* name : "OK",
* callback : function(){...},
* },
* {
* key : "error",
* name : "NG",
* callback : function(){...},
* },
* {
* key : "close",
* name : "閉じる",
* }
* ],
* }
* ※ buttonsのkeyに"close"をセットした場合は、自動的に閉じるボタンになる。
*/
[options]より下の箇所が仕様の説明の箇所ですね。
messageは、通常のアラートと同じようにテキスト文章を入れておいて、
ボタンを複数用意する事ができるようにしました。
なので、Yes or No とか、OK , NGみたいな選択肢としても使えるようになります。
一体何に使うのかはこの時点では考えていませんが、きっと今後便利に使えることでしょう。
そして、それぞれのボタンに対して、callback関数を入れることで、独自の処理を実行させることができます。
ちなみに、closeというkeyを入れると、callbackを書かなくても、閉じるボタンになってくれます。
ブログを書いていて思ったんですが、
文字入力フォームのパターンも合っても良いかもしれませんね。
inputなどを設けることで、任意の値入力をプログラムでサポートすることができるようになるはずです。
スマホのアイコン名変更などに使えそうですね。
あとがき
今回は、細かな機能追加になりましたが、毎日コツコツ開発は、全身しているだけで、作り甲斐が生まれます。
逆に1日でも何もしない日があると、ちょっと気後れ感が生まれてなんとなくそわそわしてしまうんですよね」。
この開発も1ヶ月以上やっているので、ボチボチ、ver1.0の目処をつけようかな・・・なんて考えています。
0 件のコメント:
コメントを投稿