電脳麻将のプログラム構成(2) 〜 HTML/CSS編

電脳麻将のプログラム構成(1) 〜 JavaScript編 - koba::blog に続き、今回はHTML/CSSのプログラム構成。

電脳麻将 では、ver.1.0 からCSSの生成に Stylusver.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風の記述 に変更します。

*1:src/html/page/index.pubwww/index.html という具合

*2:部品化の方法はまた別途説明しようかと思います