=============================== 内部処理について =============================== .. warning:: このページは **Chroniclinerに謎の動作をされて困っているJavaScriptがわかる人** 、 **単純に中身が知りたいJavaScriptのわかる物好き** 、 **GitHub Contributor** 向けです .. note:: 不明点の問い合わせについては :ref:`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要素を更新後、タイムライン列の当たり判定に使用している ```` の ``height`` を親要素の ```` の ``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`` を書き換えます。 .. note:: ``resize`` イベントは発火頻度が高くブラウザに対する負荷が大きいので、lodashを使用して発火頻度を落としています