内部処理について
警告
このページは Chroniclinerに謎の動作をされて困っているJavaScriptがわかる人 、 単純に中身が知りたいJavaScriptのわかる物好き 、 GitHub Contributor 向けです
注釈
不明点の問い合わせについては Contact も併せてご参照ください
1. 概要
Chronicliner v2.0.0は、Vueフレームワーク上で動作しています。Vueの基本的な仕様については、 Vue.jsドキュメント を参照してください。
また、UI（CSS styling）はVuetify.jsを使用しています。Vuetify.js特有のHTMLタグや属性については、 Vuetify.jsドキュメント を参照してください。
2. ファイル指定時の処理
2.1. ファイル読み込み -> readFile()
SheetJS ライブラリを用い、指定されたエクセルファイルの読み込みを行います。読み込み後、処理に必要なシート・列が存在するかを検証し、存在しない場合はエラーを返します。
2.2. データの作成 -> init()
readFile() 関数でファイルが読み込まれたことをVueが検知し、自動で init() を呼び出します。 init() 関数は各ステータス変数の更新と各シートのデータの読み込み・フォーマット、年表用データの作成を行います。
2.2.1. 各ステータス変数の更新
データ処理中かどうか、データ処理が完了したか、エラーメッセージ等の各ステータス変数を初期化・更新します。 init() 関数の終了時にも変数の更新を行います。
2.2.2. データの読み込み・フォーマット -> formatData()
カテゴリー、教育課程、キャラクター、キャラクターの所属教育課程、期間イベント、イベント、サマリーの順に処理を行います。
2.2.2.1. カテゴリデータの読み込み・フォーマット -> createCategory()
カテゴリのデータを読み込み、カテゴリ名をキーとする辞書形式にフォーマットします。
2.2.2.2. キャラクタデータの読み込み・フォーマット -> createCharacter()
キャラクタのデータを読み込み、キャラクタ名をキーとする辞書形式にフォーマットします。
2.2.2.3. 教育課程データの読み込み・フォーマット -> createCharacterSchoolInfo()
教育課程のデータを読み込み、所属開始日・終了日・学年計算起算日等を算出、 createCharacter() で作成したキャラクタの辞書に格納します。誕生年自動計算を TRUE に設定していた場合、ここでキャラクタの誕生年の更新を行います。
2.2.2.4. 期間イベントデータの読み込み・フォーマット -> createPeriodEvent()
期間イベントのデータを読み込み、キャラクタ名をキーとする辞書形式にフォーマットします。また、開始・終了イベントのデータを作成します。
2.2.2.5. イベントデータの読み込み・フォーマット -> createEvent()
createCharacterBirthday() 、 createCharacterDeathday() 関数を呼び出し、キャラクタの誕生日・死亡日データを作成します。その後、作成した誕生日・死亡日イベント、及び createPeriodEvent() で作成した開始・終了イベントのデータ、読み込んだイベントのデータを、イベント日時、以下を無視、以前以降の設定値によって決定する値をキーとする辞書形式にフォーマットします。
イベント辞書のキーの設定値
{yyyy-MM-dd}T{hh:mm:ss}+09:00{以下を無視}{以前以降}
以下を無視：{ "month": 0, "day": 1, "hour": 2, "minute": 3, "second": 4 }以前以降：{ "以前": 0, "": 1, "期間": 1, "以降": 2 }
2.2.2.6. サマリーデータのフォーマット -> createYearSummary()
createEvent() で作成したイベント辞書のキーから、存在する年をキーとする辞書を作成します。ここではデータの初期設定のみを行い、イベント件数の集計は行いません。
2.2.3. キャラクターの選択状態の変更 -> selectAllCharactersInCategory()
各カテゴリごとにforEachループを回し、存在するキャラクター全員を選択状態にします。この処理の結果、Vueはキャラクターの選択状態の変更を検知し update() を呼び出します。
2.2.4. テーブルデータ作成 -> createTimelineData()
イベント辞書のキーを昇順にソートし、年表の表示行順に処理を行います。年表示列の設定と各キャラクタのタイムライン列・イベントカード列に対するイベントデータ・教育課程データの紐付けを行います。
また、キャラクターごとにイベント件数の集計を行います。
2.2.5. サマリーデータの更新 -> updateYearSummary()
createTimelineData() で集計したイベント件数をもとに、サマリーカードに表示する文章を更新します。
2.2.6. テーブルデータ更新 -> updateTimelineData()
キャラクターの選択状態、及び年の展開状態に応じ、行表示状態の設定と年齢変更・生存・死亡状態による矢印の色及び区切り線の表示設定を行います。
3. 表示設定変更・年折りたたみ時の処理 -> update()
キャラクター表示設定の変更時はVueが変更を自動検知、タグ表示設定の変更時と年折りたたみ時は @click により、更新処理のための関数を呼び出します。
3.1. テーブルヘッダーデータの作成 -> createTimelineData()
キャラクターの選択状態に応じ、表示する列のデータを作成します。これにより、非選択状態のキャラクターのデータは非表示になります。
3.2. テーブルデータの更新 -> updateTimelineData()
キャラクターの選択状態、及び年の展開状態に応じ、行表示状態の設定と年齢変更・生存・死亡状態による矢印の色及び区切り線の表示設定を行います。
3.3. キャラクター死亡後のタイムライン列矢印の設定 -> setArrowFirstDied()
キャラクター死亡後最初の表示行にある矢印のsvg画像の色を、キャラクターのカテゴリに設定された色に変更します。
3.4. タイムライン列ホバーの当たり判定領域拡張 -> setInnerTdHeight()
this.$nextTick(function(){FUNCTION}) を使用し、その他のDOM要素を更新後、タイムライン列の当たり判定に使用している <v-sheet> の height を親要素の <td> の height と同じ高さまで拡張します。
4. ウィンドウサイズ変更時の処理
4.1. 初期設定 -> mounted / beforeDestroy
DOM要素のマウント時、 window.addEventListener('resize', this.windowResized); でウィンドウサイズの変更を検知するように設定してします。DOM要素破棄時には window.addRemoveListener('resize', this.windowResized); でイベントリスナーを破棄します。
4.2. イベント発生時 -> windowResized()
変更された window.innerHeight と各要素の padding 、及び getBoundingClientRect().y で取得できる年表の上端座標からアプリケーションが画面内に収まる高さの最大値を算出し、年表テーブルの height を書き換えます。
注釈
resize イベントは発火頻度が高くブラウザに対する負荷が大きいので、lodashを使用して発火頻度を落としています