はじめに

トビデモを作った際に、機能のキモとして、
ページの画面遷移を作成する編集画面の実装方法をメモしています。

はじめに

Webサービスのページ遷移を表現するために、スクリーンショットをモーダルで繋げて表示しています。
この画面は全てGUIから作れるようになっています。

全体の流れ

ポップアップを配置
ポップアップアイコンの編集ボタンをクリック
新しいHTML要素が生成される。表示階層以外はdisplay:none;
保存ボタンを教えてAjaxで保存する。

当初は実現方法が思い浮かばずだいぶ悩みましたが、
後から見るとだいぶシンプルですね！以下主要なポイントを紹介しています。

考案時のメモ：

編集画面の設計

ページ遷移を編集する方法として、必要に応じてHTMLの要素を追加し、
それ以外はdisplay:none;にすることで、サーバーサイドとのやりとりを最低限にストレスなく編集できるよう気を使いました。
以下が実際に生成される要素です。

当初はその発想がなく、ページを増やすごとに今あるデータを非同期で保存する実装を考えていました。　
ページ遷移の度にリクエストが発生しますし、一つ前の階層に戻って編集し直すときも、
データベースから情報を取って再描画しなくてはならず、実装に手間がかかるので、今思っても前者の実装で正解だったと思います。


// ポップアップ先の要素を作成
	$('.edit_popup_target')
			.on(
					'click',
					function() {

						var _this = $('.flag_now_edit');

						var page_level_num = TRANSITION_MANAGER[TRANSITION_MANAGER.length - 1];
						var page_level = page_level_num.slice(0, 1);
						var next_page_level = Number(page_level) + 1;
						var page_num = page_level_num.slice(2, 3);
						var next_page_num = $('[data-dropzone^="'
								+ next_page_level + '"]').length;

						if ($(_this).attr("data-popuptarget") == undefined) {

							if (next_page_num != 0) {
								next_page_num += 1;
							} else {
								next_page_num = 1;

							}
							var this_dropzone_id = page_level + "." + page_num;
							var next_dropzone_id = next_page_level + "."
									+ next_page_num;

							$('.mapEreaWrapper')
									.append(
											'<div class="maperea" data-dropzone="'
													+ next_dropzone_id
													+ '"><img src ="./../../img/default-none.png"></div>');
							$(_this).attr("data-popuptarget", next_dropzone_id);

階層管理の設計

それぞれのページは以下情報を保持します。

ページ番号
遷移ターゲットページ番号
アイテムの情報（メモなど画面を説明する）
背景画像

ページ番号は1.1から始まり同じ階層では1.2,1.3と増えます。
新しい階層では2.1のように冒頭の数字を繰り上げ、2.1,2,2とと続きます。
ページのアイテムは、2.1.1,2.1.2,のようにページ番号の後に連番が続きます。

この管理番号を元にして、保存されたデータを再描画することになります。

戻るボタンの実装

編集画面ですので前の画面に戻れないとなりません！

頭をひねった結果、ページを移動する際に配列にページ番号を書き込むことで、
ページの遷移履歴を管理しています。


// ------------グローバル変数--------------
	TRANSITION_MANAGER = [ '1.1' ]; // 現在地TRANSITION_MANAGER[TRANSITION_MANAGER.length
	// - 1]
	// ---------------------------------------

例えばページを一つ戻るときは、以下のようにページ管理用配列（TRANSITION_MANAGER）からデータを取得しています。

// ページを一つ戻る
	$('.backToBeforePage')
			.on(
					'click',
					function() {

						if (TRANSITION_MANAGER.length != 1) {
							$(
									'[data-dropzone="'
											+ TRANSITION_MANAGER[TRANSITION_MANAGER.length - 1]
											+ '"]').hide();
							$(
									'[data-dropzone="'
											+ TRANSITION_MANAGER[TRANSITION_MANAGER.length - 2]
											+ '"]').show();
							// ACTIVE_PAGE_NUMBER =
							// TRANSITION_MANAGER[TRANSITION_MANAGER.length-2];
							TRANSITION_MANAGER.pop();
							changePageTransitionView();
						}
						;
						return false;
					});

データの保存

ページ番号
遷移ターゲットページ番号
アイテムの情報（メモなど画面を説明する）
背景画像

などをAjaxで一気に保存します。
ネストすると綺麗に送付できたと思うのですが、

Jsonデータに対応したBeanを用意しておくと、Spring Bootがよしなに受け取ってくれるのですが、
ネスト構造の表現方法がわからなかったので、以下のように2,3項目だけ送付したいのに、
Beanで用意した全ての項目を用意しています。後ろ髪を引かれますが今回は回避策があったので諦めました。

また、保存したデータをアップデートする処理も書くつもりでしたが、
Spring boot では　データベースのテーブル側のキーに指定している情報が一致していれば
同じデータとして更新してくれるので、意図せず実装できてしまいました。


  item_stat_array.push({
                                id : linkid + "_" + dropzone,
                                type : "drop-zone", // common
                                itemid : "0", // common
                                top : "0", // common
                                left : "0", // common
                                color : "0", // common
                                size : "0", // popup,tooltip
                                title : "0", // tooltip
                                target : "0", // popup
                                width : "0", // sticky
                                height : "0", // sticky
                                text : "0", // sticky
                                dropzone : dropzone, // dropzpne
                                img : img
                            // dropzone

ちょっと長いですが以下全文。


$(document)
			.on(
					'submit',
					".save_to_server",
					function(e) {
						e.preventDefault();

						$(".maperea").show(); // disply:noneだとtop,left が取れない

						var demoname = $('.demo-name-val').val();
						if (demoname === undefined || demoname === null | demoname.replace(/[\t\s ]/g, '').length < 1){
							demoname = "-";
						}
						var item_stat_array = [];

						var maperea_array = $('.maperea');
						var maperea_leng = $('.maperea').length;
						$(maperea_array[i]).attr('data-dropzone');
						var linkid = $('#linkid').text();
						var xsrf = $.cookie('XSRF-TOKEN');

						for (var i = 0; i < maperea_leng; i++) {

							var dropzone = $(maperea_array[i]).attr(
									'data-dropzone');
							var img = $(maperea_array[i]).attr('data-img')
							if (img === undefined || img === null) {
								img = "0";
							}
							// var id = linkid + "_" +dropzone; //データベース保管時の主キー

							item_stat_array.push({
								id : linkid + "_" + dropzone,
								type : "drop-zone", // common
								itemid : "0", // common
								top : "0", // common
								left : "0", // common
								color : "0", // common
								size : "0", // popup,tooltip
								title : "0", // tooltip
								target : "0", // popup
								width : "0", // sticky
								height : "0", // sticky
								text : "0", // sticky
								dropzone : dropzone, // dropzpne
								img : img
							// dropzone

							});
						}

						var targetArray = $('.dropped');
						var item_num = targetArray.length;
						item_num - 1;

						for (var i = 0; i < item_num; i++) {
							var target = targetArray[i];

							if (target.className.indexOf('_tooltip') != -1) {

								var itemid = $(target).attr("data-item");
								var top = $(target).position().top;
								var left = $(target).position().left;
								var color = $(target).attr(
										"data-tooltipIconColor");
								var size = $(target).attr(
										"data-tooltipIconSize");
								var title = $(target).attr("title");
								// var id = linkid + "_" + itemid;
								// //データベース保管時の主キー

								item_stat_array.push({
									id : linkid + "_" + itemid,
									type : "_tooltip", // common
									itemid : itemid, // common
									top : top, // common
									left : left, // common
									color : color, // common
									size : size, // popup,tooltip
									title : title, // tooltip
									target : "0", // popup
									width : "0", // sticky
									height : "0", // sticky
									text : "0", // sticky
									dropzone : "0", // dropzpne
									img : img
								// dropzone
								});

							} else if (target.className.indexOf('_popup') != -1) {

								var top = $(target).position().top;
								var left = $(target).position().left;
								var itemid = $(target).attr("data-item");
								var color = $(target).attr("data-popupColor");
								var size = $(target).attr("data-popupSize");
								var target = $(target).attr("data-popuptarget");

								item_stat_array.push({
									id : linkid + "_" + itemid,
									type : "_popup", // common
									itemid : itemid, // common
									top : top, // common
									left : left, // common
									color : color, // common
									size : size, // popup,tooltip
									title : "0", // tooltip
									target : target, // popup
									width : "0", // sticky
									height : "0", // sticky
									text : "0", // sticky
									dropzone : "0", // dropzpne
									img : img
								// dropzone
								});

							} else if (target.className.indexOf('_sticky') != -1) {

								var top = $(target).position().top;
								var left = $(target).position().left;
								var width = $(target).width();
								var height = $(target).height();
								var itemid = $(target).attr("data-item");
								var color = $(target).attr("data-stickycolor");
								var text = $(target).children(".textsticky")
										.val();

								item_stat_array.push({
									id : linkid + "_" + itemid,
									type : "_sticky", // common
									itemid : itemid, // common
									top : top, // common
									left : left, // common
									color : color, // common
									size : "0", // popup,tooltip
									title : "0", // tooltip
									target : "0", // popup
									width : width, // sticky
									height : height, // sticky
									text : text, // sticky
									dropzone : "0", // dropzpne
									img : img
								// dropzone
								});

							}

						}

						$(".maperea").hide();
						$(
								'[data-dropzone="'
										+ TRANSITION_MANAGER[TRANSITION_MANAGER.length - 1]
										+ '"]').show();

						if (window.FormData) {

							var ajaxUrl = "/edit/uploaditemstat" + "?name=" + demoname ;

							$
									.ajax(
											{
												type : "POST", // HTTP通信の種類
												url : ajaxUrl, // リクエストを送信する先のURL
												dataType : "json", // サーバーから返されるデータの型
												data : JSON
														.stringify(item_stat_array),
												contentType : 'application/json; charset=utf-8',
												"beforeSend": function(xhr, setting) {
													$(".btn").attr('disabled', true);
													$(".item-uploading-animation").removeClass("nodispy");
												},
												headers : {
													'X-XSRF-TOKEN' : xsrf
												},
											})

									.done(
											function(data) { // Ajax通信が成功した時の処理

												var yourLink = "/show?id=";
												var yourLinkID = $("#linkid")
														.text();

												var demoname = $(".demo-name-val").val();
												if(demoname==null ||demoname== "") {demoname = "無題のトビデモ"}

												$(".yourLink").attr("href",
														yourLink + yourLinkID);
												$(".yourLink").text(
														demoname);
												$(".yourLink").attr('target',
														'_blank');
												$('.upload-item-done').slideDown(1500);

												$(".btn").attr('disabled', false);
												$(".item-uploading-animation").addClass("nodispy");


											}).fail(
											function(XMLHttpRequest,
													textStatus, errorThrown) { // Ajax通信が失敗した時の処理
												$(".btn").attr('disabled', false);
												$(".item-uploading-animation").addClass("nodispy");
												$('.upload-item-failed').slideDown(1500);
												return false;

											});
						} else {
							alert("アップロードに対応できていないブラウザです。");
						}

					});

まとめ

以上です！

ここに書いた以外にもアイテムの座標や画面描画など細かいところも合わせて、
数週間かかってしまいました。
しかし、当初は無理かも...と思っていたのですが、やればできるものですね！