\section{HtmlRenderingEngine}

% 前章でJungleに実用データベースたる性能があることが分かったので、実際に

次にJungle上に例題アプリケーションとしてHtmlRenderingEngineの開発を行った。
HtmlRenderingEngineは、出力するデータが記述されたContens tTree、出力する形式が記述されたLayout Treeの2つの木構造を持ち、これらを参照しながらhtmlのRenderingを行う。
本章ではRenderingEngineの実装と発生した問題、解法について解説する。
またRenderingする例題はDiaryを選択した。

\subsection{Contents TreeのJungle上での表現}
RenderingEngineではContents Treeに図\ref{contentTree}のように出力するデータを格納した。

\begin{figure}[h]
\begin{center}
\includegraphics[height = 6cm , bb=0 0 835  645]{images/contentTree.pdf}
\caption{ContextTree}
\label{contentTree}
\end{center}
\end{figure}


RootNodeはContentのtitle、日時、Renderingする時に参照するLayout名を持つ。
そして子ノードがContentの本文等のデータを持つ。
表\ref{NodeAttribute}にNodeが保持しているデータの一覧を記述する。

\begin{table}[htb]
  \begin{center}
    \caption{Nodeが保持しているデータ一覧}
    \begin{tabular}{|c|c|}        \hline
      title          & diaryのタイトル                      \\ \hline 
      date(rootNode) & diaryの日時                          \\ \hline 
      type           & そのノードが保持しているContextType  \\
                     & text(日記本文) or image(画像データ)  \\ \hline
      date(image)    & 画像の保存日時                       \\ \hline
      fileName       & 画像の名前                           \\ \hline
    \end{tabular}
    \label{NodeAttribute}
  \end{center}  
\end{table}


\subsection{Layout}
htmlの出力形式を定義するLayoutは複数のComponentからなる。
Layout Treeには図\ref{layoutTree}のようにデータを格納した。


\begin{figure}[h]
\begin{center}
\includegraphics[height = 9cm , bb=0 0 955 1153]{images/Layout Tree.pdf}
\caption{Layout Tree}
\label{layoutTree}
\end{center}
\end{figure}

Layout TreeはNodeName : displayinformationの組で値を保持するNode1の子に複数のComponentを保持する
ComponentはdisplayComponentName -\textgreater NodeNameの単一的な参照を行っている。
Node3は、"use" = "text"のペアでタグを保持しているため、Contents Treeの日記の本文に対応する記述が行ってあることがわかる。
表\ref{tag}にタグとContentsの対応を記述する

\begin{table}[htb]
  \begin{center}
    \caption{tagとcontentsの対応}
      \begin{tabular}{|c|c|}        \hline
        tag   & content          \\ \hline 
        image & 画像の表示       \\ \hline 
        cals  & table            \\ \hline
        date  & 日付の表示       \\ \hline
        text  & 日記の本文       \\ \hline
        title & 日記のタイトル   \\ \hline
      \end{tabular}
    \label{tag}
  \end{center}  
\end{table}

\newpage
layoutが複数のComponentを参照する際は図\ref{multiComponent}のような木構造を構築する。

\begin{figure}[h]
\begin{center}
\includegraphics[height = 6cm , bb=100 0 918 676]{images/multiComponent.pdf}
\caption{複数のComponentを参照するLayout}
\label{multiComponent}
\end{center}
\end{figure}

図\ref{multiComponent}の例では、diaryMulti@componentはdiaryText@componentとdiaryImage@componentを参照している。

\subsection{Layout Treeのデータ設計}
Jungleは汎用の木構造を持つので、データベースを特に設計しなくても、あるがままの形で格納することが可能である。
しかし、設計を行うことでより効率的に木構造を扱うことが可能になる。
図\ref{goodLayout Tree}、図\ref{badLayout Tree}は同じデータを格納した２つの木の一部である。

\begin{figure}[h]
\begin{center}
\includegraphics[height = 4cm , bb=0 0 422 322]{images/goodLayout Tree.pdf}
\caption{コードとギャップのないLayoutの格納方法}
\label{goodLayout Tree}
\end{center}
\end{figure}


\begin{figure}[h]
\begin{center}
\includegraphics[height = 8cm , bb=0 0 1263 932]{images/badLayout Tree.pdf}
\caption{コードとギャップのあるLayoutの格納方法}
\label{badLayout Tree}
\end{center}
\end{figure}


図\ref{goodLayout Tree}のTreeは、１つのNodeにRenderingに必要な値が全て格納されている。
そのため、Renderingを行う際、複数のNodeをまたぐ必要が無く、簡潔にコードを書くことができる。



一方、図\ref{badLayout Tree}のTreeはRenderingする際に必要な値が複数Nodeに分散されて保存されている。
そのため、全てのNodeを参照し、値を集める処理を行う必要があり、コードの可読性が下がり余計な処理も増えてしまった。


\subsection{性能評価}
本節では、図\ref{goodLayout Tree}の木と図\ref{badLayout Tree}を使った2つのRenderinEngineの性能測定を行い、木の構造が実行速度にどれだけ影響するかを確かめる。
測定は100000回のRenderingRequestを処理するまでの時間の比較で行う。

図\ref{fig:BenchMark}が性能測定結果のグラフである。
設計を行った木の方が高速にRenderingを行えている。

%\begin{figure}[h]
%\begin{flushleft}
%\includegraphics[height = 8cm , bb=150 0 792 612]{images/benchMarck.pdf}
%\caption{性能評価}
%\label{fig:BenchMark}
%\end{flushleft}
%\end{figure}

測定結果より、Jungleデータベースはデータの設計を行うこと無く格納可能だが、設計を行ったほうがプログラム内のデータ構造とギャップがなく、高速に動作するプログラムを簡潔に記述できるようになる事がわかる。