Webデスクトップの制作 #34 デフォルト表示ウィンドウ

2024/11/13

アプリケーション

t f B! P L
eyecatch ページが読み込まれたら、何かしらのお知らせや、アラートの表示などが行えるための、イニシャルウィンドウを表示させてみようと思います。 これまでの仕様では、事前に自分で開いたウィンドウは、そのままリロード後でも開いたまま表示するようになっていましたが、 ユーザー操作に関係なく、ページロード時に強制的に開くウィンドウを作りたいと思います。 WindowsOSなどで、OSのアップデートが合った際に、しつこいぐらいに表示されてしまう、ああいうウィンドウですね。 やはりこれには、管理者の利便性と、情報伝達というホームページの役割で必要だと思うので、この機能は必須です。

デモ

うまく表示されていない場合は、「メニュー」-「データ初期化」をしてください。 ※デモは最新版が表示されています。該当のデモを見たい場合は、ソースをCloneしてコミットを戻してブラウザで表示して確認してください。

ソースコード

https://github.com/yugeta/web_desktop/ 今回の最終Commitは"#34 fix"です。

解説

asset/setrting.jsonに、新しい項目を追加しました。 "windows" : [ { "id" : "calendar", "w" : 500, "h" : 500, "position" : { "x" : "center", "y" : "center" }, "offset" :{ "x" : 100, "y" : 100 } } ], 基本的には、desktop_iconsの項目とほぼ同じ設定にしているのですが、ポイントは、表示する座標とサイズを明記する事(必須ではないけど)です。 positionには、x軸とy軸のポジションとして、
xには、"center","left","right" yには、"center","top","bottom"
上記の項目をセットしておくことで、画面の任意のポジションに表示することができます。 ちなみに、offsetというのは、その位置からx,yに座標をずらして移動することができる機能でこの設定は書かなくても大丈夫です。 leftでピッタリ端にへばりつくのが気持ち悪いと思う場合に、offset値で若干ずらしてあげるという、おせっかい機能です。 idには、desktop_iconsでセットされている情報のidを入力することで、そのウィンドウが開くという状態を作れます。 アイコン表示されたくない場合は、desktop_iconsの設定で、parent_idに、存在しないparent_id値を登録しておくことで、任意のお知らせ機能として使うことも可能です。 いちいちアプリとして、表示内容をセットするのが面倒くさい場合は、GASなどで、スプレッドシートに文字を入力しておいて、それを表示するようにするか、fileに書いた文字を表示するファイルタイプで行う事で比較的簡易にセットできるかと思います。

あとがき

ウィンドウのポジション設定が思うの他、深い記述と若干の作り直しが発生したので、構造が悪い点が見えてきました。 まだまだリファクタリングの余地があるという事。 もっと精進せねば!

人気の投稿

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。

ブログ アーカイブ