右クリックメニューを再利用しやすくまとめる
◎構想記録
・右クリックメニューを再利用しやすくまとめる
・定義を簡単にするため表形式に定義したものからデータ化する
・文字の色や大きさ、背景や枠の色も設定しやすくする
◎右クリック対象領域 赤
◎右クリック対象領域 緑
◎右クリック対象領域 設定
・メニュー項目編集
・オブジェクト編集
・色編集
・addEventListenerを複数回した場合の影響を確認する
前回セットした関数を保存しておき、
それをremoveEventListenerすればいいことが判明
◎方針
・このファイル自体をデモページとする
・既存の下記モジュールを特定の対象で使えるように変更
・RightClickMenu_0_0_2.js
・BlockDesigner_0_0_1.js
・できれば、同じモジュールで対象ごとに別のメニュー項目、別の色にできるようにする
・また、メニュー項目の定義は表形式で定義できるようにする。表から現行の配列、連想配列への変換でいい。
◎作業記録
・このファイルを作成し、右クリックメニューを配置。
◎割り込みＴＯＤＯ
・項目の定義を表形式にする。
◎実施方法検討
・表の横項目
・１段目表示文字列
・２段目表示文字列
・３段目表示文字列
・関数名
・表の定義方法候補
・ＣＳＶ
１段目表記 , ２段目表記 , ３段目表記, 関数名 , パラメータ１, パラメータ２
スタート , , , addDiv , ,
編集 , 垂直分割 , , vsplit , ,
, 水平分割 , , hsplit , ,
, 最大化" , , max , ,
, １００％ , , changeViewSize , '100%' ,
, ２００％ , , changeViewSize , '200%' ,
, ４００％ , , changeViewSize , '400%' ,
部品操作 , 部品追加 , ノード , addNode , ,
, , 接続線 , addConnection , ,
, 移動 , , move , ,
, 変形 , , deform , ,
, 属性変更 , , chgAttr , ,
クリア , , , erase , ,
・ツリー 何段目かは先頭の空白の数で分かる。例えばこれをヒアドキュメントで定義して配列に変換して使用する
スタート :addDiv
編集
垂直分割 : vsplit
水平分割 : hsplit
最大化" : max
１００％ : changeViewSize('100%')
２００％ : changeViewSize('200%')
４００％ : changeViewSize('400%')
部品操作
部品追加
ノード : addNode
接続線 : addConnection
移動 : move
変形 : deform
属性変更 : chgAttr
クリア : erase
・JavaScript配列・連想配列 （Jsonと同じ）
var rmenulist = [
{
title:"スタート", onmousedown:"addDiv",
},
{
title:"編集",
child:
[
{title:"垂直分割",onmousedown:"vsplit"},
{title:"水平分割",onmousedown:"hsplit"},
{title:"最大化",onmousedown:"max"},
{title:"１００％",onmousedown:"changeViewSize('100%')"},
{title:"２００％",onmousedown:"changeViewSize('200%')"},
{title:"４００％",onmousedown:"changeViewSize('400%')"},
]
},
{
title:"部品操作",
child:
[
{
title:"部品追加",
child:
[
{title:"ノード"},
{title:"接続線"},
],
},
{title:"移動"},
{title:"変形"},
{title:"属性変更"},
]
},
{
title:"クリア", onmousedown:"erase",
},
];
◎実施方法検討の結論
・ツリー方式の定義を実践してみることとする
◎ＴＯＤＯ
・パラメータが必要な関数をイベントハンドラに定義する方法を確認する。（定義文字列からパラメータ部分の抽出が必要か？）
・テキストでの定義を配列に変換する関数を実装する
◎作業記録
・ヒアドキュメントで定義する
◎結果
・ツリー方式の定義から配列・連想配列を作成できた
◎ＴＯＤＯ
・RightClickMenu_0_0_2.jsとBlockDesigner_0_0_1.jsに説明を入れる
・JSDocに従って記述することにする
・BlockDesigner_0_0_1.jsは必要ないので外す
・BlockDesigner_0_0_1.jsを外す際に不明なところを確認するためにRightClickMenu_0_0_2_test.jsを作成
・BlockDesigner_0_0_1.jsを外すして動かなかったのは呼び出すところのタイプミスと判明。このままRightClickMenu_0_0_2_test.jsで継続
・右クリックメニューを使える場所（DIV）を限定し、別の場所では別の項目、色で右クリックメニューが使える。
・右クリックメニュー対象DIVを２つ作り、メニュー定義の配列を２つ作って、それぞれのdivでそれぞれのメニューが表示されることを確認
・それぞれのdivにclass="red_theme"とclass="green_theme"を設定することで違う色になることを確認
・ここまでRightClickMenu_0_0_2_test.jsの変更は無し
・右クリックメニューのクリアは画面のどの場所をクリックしてもできるようにする
・RightClickMenu_0_0_2_test.jsのRightClickMenu.prototype.setEventを変更し対応
・右クリックメニューを表示された状態で別の場所で右クリックされると残ったままなのを直す
・RightClickMenu_0_0_2_test.jsのRightClickMenu.prototype.drawを変更し対応
・RightClickMenu_0_0_2_test.jsをRightClickMenu_0_0_2.jsにコピーして削除
・ツリー形式の定義を使うように変更する。
・ＴＯＤＯ
・ツリー形式の定義をこのファイルに追加
・RightClickMenu_0_0_2.jsにツリー形式を配列の変換するメソッドを追加
・結果
・正常に動作することを確認できたので済とする
・ツリー形式で定義した関数を呼び出せることを確認する。
・グローバルな関数を用意しておけば呼び出せることを確認した。
・ＴＯＤＯ
・特定のオブジェクトのメソッドを呼び出す方法を考える。
・RightClickMenu.prototype.setEventの第一パラメータにメソッドを持ったオブジェクトのインスタンスを渡せば良いことを確認した。
・RightClickMenu.prototype.setEventの第一パラメータの名前をpartnerInstanceに変更した。
・未定義のメソッドを呼び出した場合にエラーメッセージを出すようにする。
・RightClickMenu.prototype.execMethodを修正して対応した。
・パラメータを渡す方法を検討する。（同じメソッドを違うパラメータで呼び出す）
・RightClickMenu.prototype.execMethodを修正して対応した。
・結果
・正常に動作することを確認できたので済とする
・このページで右クリックメニューの項目や色を定義し確認できるようにする。
・ＴＯＤＯ
・色の定義の変更方法を探る。
・ｃｓｓをダイナミックに変更する方法を探る
・styleタグを作り直す
・styleを直接編集するのは大変なので元になる文字列の色の部分だけを入力して適用する
・メニュー項目をツリー形式で入力するフォームを追加する
・textareaとする
・ツリー形式で入力されたテキストを適用するプログラムを追加する
・色を入力するフォームを追加する
・textareaとする
・入力された色を適用するプログラムを追加する
・結果
・正常に動作することを確認できたので済とする
・ただ、メニュー項目定義でのインデント間違いに気が付き難いので改良の余地は在る
・このページで右クリックメニューに応じた動きを定義し確認できるようにする。
・ＴＯＤＯ
・メソッドをもったオブジェクトをダイナミックに作る
・結果
・正常に動作することを確認できたので済とする
・ただ、イベントを何回も設定することになっていることの実態を確認しておく必要がある
・ＴＯＤＯ
・setEventを複数回することにより何が起きるか確認する
・結果
・メニューが複数回書かれていた
・ＴＯＤＯ
・setEventで前回のものを削除するようにする
・作業記録
・前回登録した関数を記憶する連想配列を用意して対象毎に記憶させ、それが存在するときに削除するように変更した
・このためsetEventの引数を対象のインスタンスからidに変更した
・結果
・正常に動くことが確認された
・右クリックメニューを再利用しやすくまとめたページを作成しコンテンツの一つとして公開する
・結果
・
「Ｗｅｂアプリ開発教室／Ｗｅｂアプリの部品／右クリックメニュー」を作成
・終了とする
◎実施方法検討（今後はＴＯＤＯの中に入れる）
・ＤＩＶの標準の右クリックメニューを抑制。新たなイベントを設定。
・RightClickMenu.prototype.setEventで実現済
・ＤＩＶのＩＤで表示する項目を変更。
・RightClickMenuに渡すメニューを変えることで実現する方法に変更
・ＤＩＶのＩＤでＣＳＳを変更。
・クラスで変更する機能をRightClickMenuで実現済。これを採用。
・ＢＯＤＹのクリックイベントを追加してクリアする
・対応済。上記参照。
◎結果
・終了とする
＜ＴＯＤＯと状況＞