電脳麻将のプログラム構成(1) 〜 JavaScript編 - koba::blog に続き、今回はHTML/CSSのプログラム構成。
電脳麻将 では、ver.1.0 からCSSの生成に Stylus、ver.1.3 からHTMLの生成に Pug を使っています。HTML/CSS に関して現在リファクタリング中です。以下の説明は次回リリースの ver.1.4 での構成 となります。
HTML
ソースファイルを src/html/ 配下に以下のように配置しています。HTMLには同じ記述が繰り返し登場するため、page/ の各ページごとの記述からinc/ の部品を読み込む構成にしています。page/ のそれぞれを個別にHTML化し、全てを www/ に配置します。*1
ファイル名 | 説明 |
---|---|
page/index.pug | トップページ |
page/autoplay.pug | 自動対戦のページ |
page/paipu.pug | 牌譜のページ |
page/paili.pug | 牌理のページ |
page/hule.pug | 和了点計算のページ |
page/dapai.pug | 何切る解答機のページ |
page/paiga.pug | 牌画入力のページ |
inc/meta.pug | charsetとviewportの指定 |
inc/style.pug | faviconとスタイルシートの指定 |
inc/loaderr.pug | 古いブラウザ用のエラー表示 |
inc/navi.pug | 画面右上部のリンク集 |
inc/title.pug | タイトル画面 |
inc/loaddata.pug | プリロードする画像と音声 |
inc/file.pug | 牌譜一覧画面 |
inc/game.pug | 卓全体表示用 |
inc/analyzer.pug | 検討モード画面 |
inc/chang.pug | 局数/供託/ドラ/持ち点などの表示 |
inc/player.pug | 各対局者の手牌と捨て牌の表示 |
inc/ui.pug | ポン/チー/ロンなどのボタン |
inc/kaiju.pug | 開局画面 |
inc/huledialog.pug | 和了・流局時のダイアログ |
inc/controler.pug | ゲームに関するUI(音量・速度など) |
inc/summary.pug | 集計画面 |
inc/stat.pug | 牌譜集計画面 |
page/index.pug は以下のように inc/ の部品を読み込みます。
- var page = 'index' doctype html html(lang="ja") head include ../inc/meta.pug title 電脳麻将 meta(name="description" content="HTML5 + Javascriptで動作する麻雀アプリ") meta(property="og:title" content="電脳麻将") meta(property="og:description" content="HTML5 + JavaScript で動作する麻雀アプリ") meta(property="og:image" content="http://kobalab.net/majiang/img/game.png") include ../inc/style.pug script(src="js/majiang.js" defer) script(src="js/game.js" defer) body.title include ../inc/loaderr.pug include ../inc/navi.pug include ../inc/title.pug include ../inc/loaddata.pug include ../inc/file.pug include ../inc/game.pug include ../inc/analyzer.pug .version
CSS
ソースファイルを src/css/ 配下に以下のように配置しています。index.styl を起点にただ1つのCSSファイル majiang.css を生成し、www/css/ に配置します。
ファイル名 | 説明 |
---|---|
index.styl | 起点ファイル |
base.styl | 全ページ共通の設定と mixin 定義 |
title.styl | タイトル画面 |
file.styl | 牌譜一覧画面 |
huledialog.styl | 和了・流局時のダイアログ |
kaiju.styl | 開局画面 |
summary.styl | 集計画面 |
game.styl | 卓表示共通 |
desktop.styl | 卓表示調整(PC用) |
phone.styl | 卓表示調整(スマホ用) |
analyzer.styl | 検討モード画面 |
print.styl | 印刷用 |
stat.styl | 牌譜集計画面 |
demo.styl | 対局、牌譜以外のページの設定 |
起点となる index.styl は、以下のように各部品を読み込むだけです。
@charset "UTF-8" @import "base" @import "title" @import "file" @import "huledialog" @import "kaiju" @import "summary" @import "game" @import "desktop" @media screen and (max-height: 720px) @import "phone" @import "analyzer" @import "print" @import "stat" @import "demo"
CSSでは同じような記述が値を変えて繰り返し登場するため単純なインクルードでは対処できません。Stylusの mixin を使って部品化しました*2。また、ver.1.4 で {、} を使った CSS風の記述 から、インデントだけが意味を持つ pug風の記述 に変更します。