デスクトップのカスタマイズで真っ先に思いつくのは、「壁紙の設定」です。
マックでもウィンドウズでもLinuxでも、どのOSでも当たり前のように壁紙が自由に変更できます。
色だけじゃなく、自分の撮影した写真から、ネットに転がっている画像まで、
最近では、ipadなどのタブレットや、iPhone、androidなどでは、動く壁紙として、推しキャラの喋っているモノや、朝昼晩がアニメーションして推移するものなど、
面白いと思う壁紙も増えてきました。
遅ればせながら、我がWebデスクトップでも、
壁紙の設定機能に着手して、今回色の変更だけをできるようにしてみました。
しかもたったの4色だけ・・・
おい！「ショボ！」と言ったお前、これは大きな一歩なんだから、黙って解説聞いとけ！
（スミマセン、取り乱しました・・・）
デモ
うまく表示されていない場合は、「メニュー」-「データ初期化」をしてください。
※デモは最新版が表示されています。該当のデモを見たい場合は、ソースをCloneしてコミットを戻してブラウザで表示して確認してください。
ソースコード
https://github.com/yugeta/web_desktop/
今回の最終Commitは"Develop #43"です。
解説
壁紙の設定機能を構築するにあたり、これまでと大きく違うポイントがあります。
それは、通常のウィンドウを使うけど、アイコン設定は行わないシステム用のウィンドウ設定です。
アイコン設定の内ウィンドウ表示について
これまでの処理では、アイコン設定されていないものは、ウィンドウ表示はしないという処理にしていたのですが、
この使用をやめて、アイコン設定されていなくてもウィンドウ表示ができるように、window関連のモジュールを書き直しました。
具体的には、js/window/view.jsの中に書かれていた、Storage.datasの中のiconsデータに、idが存在するかどうか？で存在しない場合は処理をしない事にしていたのを、
相当のデータがoptionsとして送られてきていれば、ウィンドウとして表示をするようにしました。
アイコン設定を事前にしていれば、こんな設定変更などしなくてもいいのですが、何故こうしたかというと、
ページをリロードした時に、システムウィンドウは出っぱなしにせずに、非表示にしたかったからです。
ようするに、テンポラリーウィンドウみたいな扱いにしたいがために、この処理を採用しました。
まあ、正直どっちでも良いんですが、システム機能を増やすたびに、アイコン設定を追加するというのも、何だか運用が大変になるな〜と思って、思い切ってこの処理を入れただけなんですけどね（テヘペロ）
スタイルモジュールについて
そして、次なる壁（問題）が発生しました。
今回は壁紙の設定なので、cssをコントロールすればいいだけなんですが、今回はあまりbackgroundの設定を、HTMLに残したくなかったので、stylesheetに書き込まれている値をそのまま書き換えようと思い、
js/lib/style.js
というモジュールを新規で作りました。
このモジュールは、ページ内に読み込まれているStuleSheetの設定一覧を取得して、特定のプロパティの値を取得したり、プロパティの値を書き換えたりできる機能をもたせました。
これにより、HTMLのstyle属性には、表示せずにスタイルを書き換えることができるようになったんですが、
なんと、GoogleChromeだけこの処理が動きませんでした・・・orz
細かく言うと、最初は、Macのみで調査していたのですが、MacのFirefoxとSafariは、問題なく動作しました。
MacのGoogleChromeだけがうまく動きません。
その後Windowsについても調べてみましたが、Macと同じ結果でした。
ちなみに、GoogleChromeのビルドバージョンは、
130.0.6723.70（Official Build）です。
理由は現在調査中なのですが、とりあえず、偉そうなことを言いましたが、今回はstyle属性に記述する方法でなんとか処理を作り上げてリリースしておきました。
これは正直重めのissueですね。
あと、今回作業として、windowの表示、移動、リサイズの際に、ストレージデータの書き込みを行わない処理を追加しています。
これは、ページリロード時に空ウィンドウを残さないためなんですよね。
いや〜、なるべく初期設計を崩さないようになんとか乗り切っている感じです・・・
あとがき
やはり開発を続けていくと、初期設定の甘さと、機能追加による不具合発生などの壁にブチ当たります。
でも、そんな事でめげてはいけません。
それも含めて、「開発楽し〜！」と思えなければ、Webエンジニアには向いていないですからね。
でも、本音は、「メンドクサ〜」ですけどね・・・
0 件のコメント:
コメントを投稿