Install
Dinosaur7 は、純粋なHTMLとJavascriptでSPA(Single Page Application)を構築できる軽量なフロントエンドフレームワークです。
使用するには、以下のようにdinosaur7.x.js, dinosaur7.x.cssをダウンロードし、index.htmlにapp設定を行うのみです。
<html lang="en">
<head>
<title>Dinosaur7 Sample</title>
<link rel="stylesheet" type="text/css" href="/mod/dinosaur7/dinosaur7.v3.css" />
<script type="application/javascript" src="/mod/dinosaur7/dinosaur7.v3.1.js"></script>
</head>
<body d7app style="display:none;">Here to locate App</body>
<script type="application/javascript">
app.setting({topPage: '/group/list.html'});
</script>
</html>
モダンなSPAに移行してユーザーエクスペリエンスを向上させたいと思っているものの、
開発要員の確保が難しかったり、選定したフレームワークの過剰なコンセプトにより制御が困難になったり、
SBOM管理が煩雑になって、予想以上にコストが膨れ上がった経験はありませんか？
Dinosaur7は、従来の開発スキルで十分に対応でき、複雑な概念もありません。
気に入ったライブラリがフレームワークに対応していないために使えず、泣く泣く諦める心配もありません。
第三者ライブラリへの依存もなく、純粋なJavaScriptで実装されたDinosaur7は、まさにこれらの問題を解決するために設計されています。
定義済HTML属性(d7)
<div d7app>ここにページが表示されるよ</div>
<div d7layout="/***.html">ページhtml内で、適応するレイアウトが指定できるよ、必須ではないよ</div>
<div d7page>レイアウトhtml内で、ページの配置場所を記すためだよ</div>
<div d7comp="/***.html">ここにコンポネント***.htmlがロードされるよ</div>
<div d7="if(expression)">条件が成立する場合のみ表示されるよ</div>
<div d7="for(expression)">繰り返されるよ</div>
値埋込
<div>{% 式の結果が表示されます %}</div>
<div attrXXX="{% 式の結果が反映されます %}"></div>
<div class="clazz {% 式の結果が反映されます %}"></div>
イベント定義
<div onclick="customedEvent(this)">イベント定義を行います</div>
<div didrender="customedAfterRender(this)">このdivがレンダリング(更新)される度に呼び出されます</div>
ページサンプル
<!-- GroupIdを引数に、ユーザー一覧を表示する -->
<span>GroupName: {% _m.groupName %}</span>
<table>
<thead>
<tr>
<th>No.</th>
<th>id</th>
<th>name</th>
<th>status</th>
</tr>
</thead>
<tbody>
<tr d7="for(var idx in _m.users) const row = _m.users[idx];">
<td>{% idx %}</td>
<td>{% row.id %}</td>
<td onclick="clickUser(row.id)">{% row.name %}</td>
<td d7="if(row.status === 'OK')"><img src="/images/good.png"></td>
<td d7="if(row.status === 'NG')">-_-</td>
</tr>
</tbody>
</table>
<script>
_m.groupId = query.groupId;
// 初期処理
const init = async function() {
let response = await app.api.get(`/group/${query.groupId}`);
_m.groupName = response.groupName;
_m.users = response.users;
}
// 詳細画面に遷移
const clickUser = function(id) {
let query = {userId: id};
app.route('/user/detail.html', query);
return false;
}
</script>
どうでしょうか、高度な思想がなければワクワクする斬新なものもなく、ガッカリされましたらごめんなさい。
Dinosaur7が求めているのは実用性と即効性のみです。煩雑な説明よりも、上記の
DevServer（Java製、ソースコードからのコンパイルも可能）をダウンロードしてすぐに動かす方が早いでしょう。
サンプルも含まれているので、解凍後、実行ファイルを実行するだけで簡単にお試しいただけます。
ご覧のように昔とほとんど変わらない構成で、サクサク動くSPAが実現できます。特に、PHPやRails、JSFなどで構築されたSSR（Server Side Rendering）システムでは、環境を変えずにView層のファイルを比較的単純に移植することで、SPAに変換することが可能です。
さらに、Dinosaur7は静的HTMLファイルをベースに動作するため、SEO対策も自然に行えます。この機会にぜひお試しください！詳細な機能については、こちらの
Docs をご覧ください。
