Phestに関するメモ

Phest（フェスト）に関するメモ。使い方とか、疑問点とか、エラーとか。

静的サイトジェネレーターを使って、WordPressのheader.phpのような感じで各パーツを効率的に編集して構築できればと検討。

Middlemanを試すも各ファイルの追加や編集がどうも馴染めず（慣れの問題にすぎないが）。

いろいろ探してみたが、現在の自分のスキルと目的を考えると「Phest」がよさそうだった。

Phest

公式は下記。

• 黒い画面不要！デザイナ向け静的サイトジェネレーター「Phest」を公開しました
• デザイナーの強い味方！Phestの基本的な使い方
• Github

管理画面的なものは、PCに入れているMAMPなどの場所に依存する。

基本的には.tplにタグを書く。設定はconfig.ymlだけれども、変数の定義などはvars.ymlに書いていく。ここでいろいろ定義しないとデフォルトっぽい変数も動作しない模様。

ページを追加するためにはvars.ymlに記載するなど事前の準備が多少必要ではあるが、そこで全ページの同じ部分の情報を設定できるので、編集は楽。つまり、運用面ではメリットが大きいかも。もっとも、そんなに頻繁に変える部分ではないのだけど（titleとかdescriptionとか）

この部分を分岐で無理矢理テンプレートに書くことも当然可能だが、変数で使い回すことでサイトマップの生成にも関連させているはずなので、基本的には素直に使うのがいい。

なお、デフォルトの変数の詳細はPhestフォルダーのdefault_config.ymlにある。

マニュアル

マニュアル的なものが、Phest内に存在する。Phest管理画面で選べるz_phest_documentがそれで、生成して読める。基本的なことが書かれている説明書みたいなものなので、前述の記事と合わせて読む。

注意点とか疑問点とか

注意点とか疑問点とかいろいろ。

_content.tpl

_base.tplに

{include file=$_content.tpl}

と記載することで、HTMLに変換する各tplの内容が自動で挿入される。

が、Phestをダウンロードした際に含まれるサンプルテンプレートの中に_content.tplというものがあるけれど、これがなくても上記のincludeは動作する。

最もシンプルなサンプルでも_content.tplがないので、必須ではないはず。なお、_(アンダーバー)を付けたファイルの扱いは事項参照のこと。

HTMLに変換されるtplとされないtpl

tplのファイル名の前に「_（アンダーバー）」を付けるとHTMLとして生成されない。パーツとして読み込ませる場合には_と付ければよい。

vars.ymlに不要な記述を書かない

例えば、vars.ymlにincludes:だけ書いて値を空白にすると、管理画面に以下のようなエラーが出る。

Warning: Invalid argument supplied for foreach() in 〇〇/phest/index.php on line 329
//〇〇は仮で入れています。

単純な話で、不要な部分は残さなければいい。

meta kyewords

vars.ymlにmeta descriptionの設定箇所はあるが、keywordsはなし（2014.6.8現在[Phest v.0.10.0]）。

ただ、実装自体は簡単。変数設定用のファイルvars.ymlに変数を設定して内容を入力し、出力したい場所にタグを記載すれば良い。例えば以下の通り。

vars.ymlで設定。

page_a.html:
title: "ページA"
description: "ディスクリプションを記述する場所"
meta_keywords: "キーワードA,キーワードB,キーワードC"

_base.tplに出力。

<meta name="keywords" content="{$meta_keywords}">

独自に変数を設定して使う

Phestの場合、独自に変数を設定するにはvars.ymlに記載しないと使えない模様。

vars.ymlにすべて記載していくと管理が大変になるため、別ファイルに変数をまとめたいこともあり得る。

その場合は、別ファイルにしたうえで以下の用にincludes:でymlファイルをインクルードする。

common:
local:
production:
#インデントはしない
includes: [ test.yml ]

次いでtplの方に以下の設定した変数を書けばOK。

{$変数名}
#階層構造で配列にしている場合は以下のようにする
{$変数名:{配列名[index]}}

ビルドした日付を表示

ビルドした日付を「2016.01.01」ではなく「2016.1.1」のように0抜きで出力させるには以下を記入。

{$smarty.now|date_format:'%-Y.%-m.%-d'}

CSSの圧縮処理を行うとcss3のアニメーションが動かない

cssのアニメーション指定で以下のような記述があった場合。

@-webkit-keyframes flashing{
    /* Safari & Chrome */
    0%{
      -webkit-transform: scale(0);
      opacity: 0;
    }
    50%{
      -webkit-transform: scale(1);
      opacity: 1;
    }
    100%{
      -webkit-transform: scale(0);
      opacity: 0;
    }
    }
    @keyframes flashing{
    0%{
      transform: scale(0);
      opacity: 0;
    }
    50%{
      transform: scale(1);
      opacity: 1;
    }
    100%{
      transform: scale(0);
      opacity: 0;
    }
}

本番環境用の書き出しで圧縮を行うと下記のようになってしまう。

/*ダブルクォーテーションで囲まれてしまう*/
@-webkit-keyframes "flashing"{
    /* Safari & Chrome */
    0%{
      -webkit-transform: scale(0);
      opacity: 0;
    }
    50%{
      -webkit-transform: scale(1);
      opacity: 1;
    }
    100%{
      -webkit-transform: scale(0);
      opacity: 0;
    }
}
/*ダブルクォーテーションで囲まれてしまう*/
@keyframes "flashing"{
    0%{
      transform: scale(0);
      opacity: 0;
    }
    50%{
      transform: scale(1);
      opacity: 1;
    }
    100%{
      transform: scale(0);
      opacity: 0;
    }
}

上記のように、keyframes名に指定した文字列がダブルクォーテーションで囲まれてしまう。
chromeやsafariでは問題ないが、Firefox(40.3で確認)ではアニメーションが動作しなくなる。

ダブルクォーテーションで囲む部分の設定方法が分からなかったため、応急処置としてはconfig.ymlのcompilecssを「0」にして圧縮を行わないようにすれば良い。

Sublime Textのプロジェクトファイルとの兼ね合い

Phestで内のファイルで生成前のフォルダーsource内のcontentの中にSublime Textのプロジェクトファイルが入っていても特に動作には問題ない模様。

ただし、静的HTML生成時にそのまま書き出されるので、生成時のファイル内から削除するのを忘れない方がよい。この辺り、拡張子などで書き出しするかどうかを設定できたら良いかもしれない。が、大した問題ではないのでこのままでもよいとも思う。

Google Analyticsのタグの設置

そのまま_base.tplに解析タグを貼付けるとエラーになる。これはSmatyではtpl内での{}がダメなようで、{literal} {/literal}で囲む必要がある。GAのみならず、{}を使うならこれが必要になる。

なお、この点は下記の記事を参考に。

• Smartyでページをテンプレート化 【ロリポップ編】

サイトマップ

サイトマップから特定のファイル（htmlなど）を除外するには、config.ymlにgnoresitemaps:で指定すれば良い。

なお、画像やJSのフォルダーが存在している場合、そのフルダー内にindex.tplを置くとサイトマップにフォルダー名が記述されてしまう。

例えば、「images」フォルダー内にindex.tplがあると、サイトマップに「〇〇.com/images/」というフォルダーが出来上がる。

つまり、ディレクトリでページを分けていても、tplがあればちゃんと自動でサイトマップに表示してくれる。逆に表示させたく無い場合はtplを置いてはいけない。

マークダウン

下記のURLに説明あり。

• https://github.com/chatwork/Phest/ blob/master/sites/sample/source/content/markdown.tpl

実際には以下のように{markdown}で囲んで使用する。または、{textile}の記法も使える。

{markdown}
# h1見出し
## h2見出し

* リスト
* リスト
 * 入れ子リスト
{/markdown}

{textile}
h1. h1見出し
bq. blockquote引用
{/textile}

これらの記法は以下のサイトを参考に。

• 文章作成やメモ書きにも便利、Markdown記法
• textile記法

便利なのだけれど、毎回{markdown}で囲まねばならないのは面倒かもしれない。Emmetなどを利用できる環境であれば無理に使う必要性がないとも言える。反面、上記参考サイトで書かれているように、メモ的に使うぶんには有益だとも思う。

配列とか

配列とかは以下参照。が、うまくできないので要実験。

chatwork/Phest

結び

変数が使えるため結構いろいろできそうだけれども、私の目的は「静的サイトジェネレーターによるパーツの共有化」なので、とりあえず各ファイルのincludeの仕方と最低限のタグがわかればOK。

Middlemanはどうもやり方がわからなかったので、とりあえずこちらのPhestを使えるようになってテストサイトを作る予定。