UI 開発基盤
セットアップ
git@github.com:naporin0624/flat-kobo-makeshop-design.git
cd flat-kobo-makeshop-design/
docker-compose up -d
npm install
npm run dev # <-- これで javascript の開発できるようになるlocalhost:8080 でアクセス
一部 Linux 環境で Permission Error が発生する件
一部の Linux 環境ではコンテナ内の Apache 実行ユーザーをコンテナ実行ユーザーに合わせる必要があります。
id
> uid=xxxx(user) gid=xxxx(user)この uid と gid を .env に記述
UID=xxxx
GID=xxxxディレクトリ構成
html/theme/data/以下にデータファイル(.json)、html/theme/templates/以下にテンプレートファイル(.tpl)を配置します。
- html/ : Apache document root
-
theme/
-
data/ : テンプレートから呼び出すデータ
- data1.json
- data2.json
- data3.json
- ...
-
templates/ : テンプレートファイル
- module/ : モジュール (テンプレートから
{$module.header}等で呼び出し)- header.tpl
- footer.tpl
- side_bar.tpl
- ...
- page1.tpl
- page2.tpl
- page2.tpl
- ...
- module/ : モジュール (テンプレートから
-
data/ : テンプレートから呼び出すデータ
-
theme/
theme/以下のファイルには/以下でアクセス可能です。(例: theme/assets/style.css -> /assets/style.css)
サンプル
データファイル (html/theme/data/data.json)
{
"page": {
"title": "デザインテンプレート開発環境",
"css": "/assets/style.css"
},
"shop": {
"name": "ショップ名"
}
}上記 page と shop は別ファイルに分割することも出来ます。
data1.json
{
"page": {
"title": "デザインテンプレート開発環境",
"css": "/assets/style.css"
}
}data2.json
{
"shop": {
"name": "ショップ名"
}
}テンプレート (html/theme/templates/top.tpl)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title><{$page.title}></title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="<{$page.css}>" />
</head>
<body>
<{$module.header}>
</body>
</html>テンプレートモジュール (html/theme/templates/module/header.tpl)
<h1><{$shop.name}></h1>License
MIT License
release
機能修正・追加ごとに以下のコマンドを実行してください。
npx changeset addそれぞれの変更に対して、以下のように変更の種類を選択してください。
- patch
- バグ修正
- minor
- 機能追加
- major
- 破壊的変更
- 特大リリース
変更の種類を選択すると、CHANGELOG.md に記載される変更内容の入力が求められるので、変更内容を記載してください。