弘和(55)8前々回と前回でおおよその動きまでは実現しましたが、各オブジェクトに対しての詳細設定をしないとデプロイまではいけないので、今回は各オブジェクトの設定画面を表示して、localStorageに保存するところまでをやってみます。Serverならなんでも可)ブラウザはChromeマウスオーバー時にオブジェクトの情報を設定できるようにするマウスオーバー時に設定ボタンを表示させ、ボタンをクリックしたら設定画面を表示するようにします。true;作成したボタンにrolloverとrolloutのイベントリスナーを登録します。true;});ロールオーバーした際の実行イメージは下記のような感じです。ボタンをクリックした際の実行イメージは下記のような感じです。必要項目を入力後、OKボタンクリックでlocalStorageにデータを保存しておきます。document.getElementById("elb_name").value;localStorage.setItem("setting_"+localStorage.getItem("rollovr_name"),elb_name);}//モーダルウィンドウを閉じるlocation.href="#";}既に設定済みのものを再選択した場合は、設定済みの値を表示させなければならないので、localStorageに設定データがある場合はその設定値を表示させる必要があります。いうことで、その対応をします。"";}あとは間違って配置してしまったオブジェクトを削除したいこともあると思いますので、右下にある『ゴミ箱』にオブジェクトをドラッグすると削除するロジックを追加しておきます。オブジェクトに紐づいている連結線も削除しないといけませんね。※右に表示させている画像が思った位置に表示されない場合があります。※デプロイ・保存は未実装デモはこちらシビアなイベントハンドリングをしていないので、やさしくゆっくりと動作させてくださいw右側の画像位置のロード順がおかしい場合はリロードしてみてください。まとめ3回に分けてEaselJSを使ってSDNもどきのUIを作ってみましたが、全てデータはlocalStorageに保存されています。Consoleを使用せずにGUIで構築することができそうですが、時間が足りなかったので、続きは別の機会に作成したいと思います。553,938まだプロフィールが設定されていません。リモート】クラスメソッドの会社説明会を開催しますクラスメソッドでは、AWS・AI・ビッグデータ・モバイルなどの技術職や営業のメンバーとして一緒にお仕事をする仲間を大募集しています。#cmdevio新型コロナウイルスの感染拡大を受け、本イベントを延期させていただくことになりました(開催時期未定)。お申し込みいただいた皆様には大変申し訳ございませんが、何卒ご理解いただけますようよろしくお願いいたします。AWSについてライトに色んな情報交換をしましょう。クラスメソッド株式会社が運営するAWS・iOS・HTML5に関する技術情報サイトです。