| name | web-artifacts-builder-jp |
| description | Simplified Japanese web artifacts builder skill for creating single-file HTML applications with Japanese UI components, i18n settings, and responsive design. Triggers on requests for Webアーティファクト, 単一HTMLファイル, HTMLツール作成, 日本語Webアプリ. |
Webアーティファクト構築支援スキル
概要
単一HTMLファイルで完結するWebアーティファクト（ミニアプリ・ツール・デモ）の構築を支援するスキルです。HTML + CSS + JavaScript を1ファイルにまとめ、日本語UIコンポーネントやi18n設定を組み込みます。
基本構成
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>アプリ名</title>
<style>
</style>
</head>
<body>
<script>
</script>
</body>
</html>
単一ファイルの原則
- 外部ファイルへの依存を最小限にする
- CDN経由のライブラリ読み込みは許可（Tailwind CSS, Alpine.js 等）
- 画像はBase64エンコードまたはSVGインラインで埋め込む
日本語UIコンポーネント
和暦日付ピッカー
function toWareki(date) {
return new Intl.DateTimeFormat('ja-JP-u-ca-japanese', {
era: 'long', year: 'numeric', month: 'long', day: 'numeric'
}).format(date);
}
都道府県セレクター
<select id="prefecture" name="prefecture">
<option value="">都道府県を選択</option>
<optgroup label="北海道・東北">
<option value="01">北海道</option>
<option value="02">青森県</option>
</optgroup>
<optgroup label="関東">
<option value="13">東京都</option>
</optgroup>
</select>
郵便番号検索フォーム
async function searchAddress(zipcode) {
const code = zipcode.replace("-", "");
const res = await fetch(
`https://zipcloud.ibsnet.co.jp/api/search?zipcode=${code}`
);
const data = await res.json();
if (data.results) {
const addr = data.results[0];
return {
prefecture: addr.address1,
city: addr.address2,
town: addr.address3
};
}
return null;
}
ふりがな自動入力
<label>氏名 <input type="text" id="name" placeholder="山田 太郎"></label>
<label>ふりがな <input type="text" id="furigana" placeholder="やまだ たろう"></label>
<script>
const nameInput = document.getElementById("name");
const furiganaInput = document.getElementById("furigana");
nameInput.addEventListener("compositionupdate", (e) => {
furiganaInput.value += e.data;
});
</script>
i18n設定
必須のHTML設定
<html lang="ja">
<meta charset="UTF-8">
<meta property="og:locale" content="ja_JP">
<meta property="og:title" content="アプリ名">
<meta property="og:description" content="アプリの説明文">
日本語ロケール対応
new Intl.DateTimeFormat('ja-JP').format(date);
new Intl.NumberFormat('ja-JP').format(1234567);
new Intl.NumberFormat('ja-JP', {
style: 'currency', currency: 'JPY'
}).format(1000);
フォント読み込み
Google Fonts: Noto Sans JP
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap"
rel="stylesheet">
<style>
body {
font-family: "Noto Sans JP", sans-serif;
}
</style>
フォント読み込みの注意点
display=swap で FOIT（Flash of Invisible Text）を防止- 使用するウェイトのみを指定してファイルサイズを削減
preconnect でDNS解決を先行させる
レスポンシブ対応の基本設定
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: "Noto Sans JP", sans-serif;
line-height: 1.8;
padding: 1rem;
max-width: 800px;
margin: 0 auto;
}
@media (min-width: 768px) {
body { padding: 2rem; }
}
p, li, td {
word-break: normal;
overflow-wrap: break-word;
}
input, select, textarea {
font-size: 16px;
}
生成時の確認事項
- 用途: ツール / デモ / プロトタイプ / ダッシュボード
- 外部依存: CDN利用の可否、使用ライブラリの指定
- データ永続化: localStorage / IndexedDB の使用有無
- 対象デバイス: PC中心 / モバイル中心 / 両対応
