Webデスクトップの制作 #26 Issue対応

開発をどんどん進めていくと、これまで開発した部分でうまく動いていないとか、想定外の動きをしている箇所を見かけることがある。 慎重にデバッグをしていると、今回開発した場所じゃない所（過去に追加した機能など）で、不具合が起きているのを見つけてしまったような場合だ。 Githubを使っていると、Issue機能があるので、気になる箇所はトコトン細かく書き込んでおいて、後でまとめて修正すればいいんです。 今回のWebデスクトップにおいても、機能数が膨れ上がって、想定外の挙動をしている箇所がいくつかあったので、このタイミングまでにIssueに書き込んでおいたモノを少し解消しておきたいと思います。

デモ

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

ソースコード

https://github.com/yugeta/web_desktop/ 今回の最終Commitは"Merge pull request #30"です。 ※Issue事にコミットしています。

解説

今回対応したIssueは、以下の3つです。

1. 表示されているウィンドウのヘッダ部分を右クリックするとデスクトップのコンテキストメニューが表示される。GithubIssueリンク
2. アプリを一度閉じてもう一度開くと起動しない。GithubIssueリンク
3. ウィンドウ内でリスト表示時にファイルドラッグすると、アイコン表示のインスタンスになってしまう。GithubIssueリンク

表示されているウィンドウのヘッダ部分を右クリックするとデスクトップのコンテキストメニューが表示される。

この症状は、当初からわかっていたんですが、修正を後回しにして、別開発を進めていたので、ひと区切りついたこのタイミングで修正に着手しました。 調査をしてみてわかったんですが、右クリックした時に、コンテキストメニューを発動しない場合は、通常のブラウザのコンテキストメニューが表示されてしまうので、 イベントセットをする前(addEVentListerをセットする前）に、次のコードを埋め込むことで、Webデスクトップ上では基本の右クリックを動作しないようにセットして、挙動の安定化を行うことができました。 Webデスクトップエレメント.oncontextmenu = function(){return false} 話が前後しましたが、肝心のウィンドウヘッダ箇所での右クリックは、ヘッダ箇所の判定を入れて処理対象外という処理を追加しました。 ちなみに、この処理を確認している時に、ウィンドウのりサイズ処理のエレメントでも、不具合が出そうだったので、同じ処理を追加して、このIssueをクローズできました。

アプリを一度閉じてもう一度開くと起動しない。

この処理、Issueのコメントでも書き残しておいたんですが、scriptタグのsrc属性って、同じsrc(URL)が2回目読み込まれた時は、対象のスクリプトは実行されないということがわかりました。 GoogleChromeでの挙動を確認しただけで他のブラウザでの挙動は確認していませんが、世の中の利用率No1のGoogleChromeでの挙動は見逃せません。 対応は比較的カンタンで、src属性のURLに対して、ユニークアドレスになるように、クエリを追加して「同じsrcじゃないよ」という対応をすることで、ちゃんと2回目以降にもスクリプトが実行されるようになりました。 ただ、何回もアプリを立ち上げると、古いスクリプトがゴミメモリリソースとして残るのは、OSの挙動と似ているんですが、気にはなりますね。 ページをリロードすると簡単にクリアされるので、今回はこの点は対応しないようにすることにしました。 そして、Issueはクローズ。

ウィンドウ内でリスト表示時にファイルドラッグすると、アイコン表示のインスタンスになってしまう。

見た目が気になる程度だったので、本件は、ドラッグ元のアイコンを、一旦非表示にしていたのを、半透明表示にすることで、 移動中のアイコン（インスタンス）が多少の見た目が変わってもアイコン形状が同じであれば、気にならなくなりました。 ただ、このIssueを確認している時に、ウィンドウをリスト表示している時に、アイコン移動を同じウィンドウ内で行うと、アイコン表示に戻した時に元のアイコンが移動してしまっているという事象を見つけました。 リスト表示時は、同じウィンドウ内では、座標変更をしないようにしなければいけませんね。 本件少し重めの改修になりそうだったので、このIssueにコメントを残してcloseしないようにしておきました。

あとがき

今回の時点で、Issueが4件書かれてあって、そのうちの3件に対応して、2件をクローズすることができました。 全て自分で書いているので、さほど内容に対しての問題はなかったのですが、複数人で開発をしている時や、確認者が別の人の場合は、 Issueの文章をより細かく書いて、ちゃんとスクショなどを取っておかないと、読んでもわからないIssueとして無視されてしまうこともあるので、Issue書く人の文章力とアウトプット能力は重要になります。 という事で、一人開発であっても、なるべくスクショなどを残すようにこころがけるようにしています。