はじめに

私はつぐもんという、アンケート、掲示板、アップローダーを統合した野心的なサイトを開発・運営しています。
本記事では、このつぐもんの技術構成について紹介します。
採用した技術は、流行しているものとは離れたものがほとんどです。
特に理由があってというのではなく、流れで何となくといった感じです。

採用した技術スタック

サーバーサイド：Jakarta EE（Javaエンタープライズ環境）

テンプレートエンジン：Framexs（クライアント駆動のXSLTフレームワーク）

データ形式：JSONではなくXHTML

フロントエンド：Web Components

データビジュアライゼーション：D3.js

プログラミング：Chain of Responsibility

各技術の選定理由

Jakarta EE

SpringではなくあえてJakarta EEを選んだ理由というのは、実は技術的な観点からはありません。
初めに学んだのがJakarta EEだったから、というだけです。
PHPではなくJavaを選んだ理由なら、JPAが理由になります。
特にJPQLがいいですね。生SQLは書きたくないです…

Framexs

クライアントサイドで２つのXHTMLを合成してHTMLへ変換を行うことで、サーバーの負荷を軽減しつつ、柔軟なUI生成を実現する技術です。
概要はここで把握できます。

HTML5はXHTMLで楽に書ける？XSLTによるMVCライクなフレームワーク framexs を開発したので解説するよ

もともとGitHub Pagesに使っていたのですが、JSPとの相性がよさそうな気がしたので、採用してみました。
課題はありますが、JSPを書くのがらくらくです。

<?xml-stylesheet type="application/xml" href="https://tsugumon.net/framexs.xsl"?>
<?framexs.skeleton https://tsugumon.net/bbs/template.ftml?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" prefix="og: http://ogp.me/ns#" xmlns:v-on="urn:v-on" xmlns:v-bind="urn:v-bind">
...

XHTML

appendすればそれで済むことが多かったので採用してます。Web Componentsとの相性ばっちり。らくらく

<template xmlns="http://www.w3.org/1999/xhtml">
<div class="comment-list">

<div class="comment">
<div class="comment-header">
...
</div>
</div>
</template>

const fragment = parser.parseFromString(text, "application/xhtml+xml").documentElement.content;		
fragment.querySelectorAll("pre.tsugumon-text").forEach(e=>parseTsugumonText(e));
while(this.comments.firstChild) this.comments.removeChild(this.comments.firstChild);
this.comments.append(fragment);
...

Web Components

カスタム要素がとにかく強力。軽量かつ標準で、特定フレームワークに依存しないのは精神的に楽です。

<thread-comments id="thread-comments" thread-id="889" type="latest" page="1" max="10" v="1">
読み込み中です……
</thread-comments>

D3.js

動的なデータ可視化に特化しており、Web Componentsとの組み合わせにより柔軟な表現が可能になります。

<pie-chart id="crossPieChart" width="400" height="400" threshold="0.0.5" total="179" type="csv" src="https://tsugumon.net/resources/csv/enquete/56">
<attributes style="max-width:600px;width:100%"></attributes>
</pie-chart>

といった書き方でグラフを呼び出せるのでいったん作ってしまえばあとは楽です。

Chain of Responsibility

コメントの中でURLを解析して埋め込みコードに変換する必要があったのですが、まさかのオブジェクト指向設計が役に立ちました。

まとめ

今回紹介した技術構成は、標準技術や昔捨てられた技術を振り返ってみたらどうなるか、という観点から面白いのではないかと思います。

「つぐもん」は、初めから意図してこうなったわけではないのですが、今の流行を何も考えずに追うだけの風潮への疑問を形にしたい気持ちでなったのは確かにあります。

興味を持たれた方は、ぜひ掲示板の情報系板までお越しください。