ITエンジニア/デザイナ向けにオープンソースを毎日紹介

チャットワークAPIドキュメントでも実際に使われているそうです!

最近流行の静的サイトジェネレータ、Phestのその一つです。特徴として挙がっているのはWebデザイナーフレンドリーであると言う点です。プログラマーなら当たり前、デザイナーにとっては敷居の高いターミナルを使わずに運用できるのが魅力です。

使い方は簡単で、まずはPhestのGitHubリポジトリにいってZipファイルとしてダウンロードします(cloneはターミナルを使いますので今回はなしで)。そしてローカルのWebサーバで解凍すれば準備完了です。WebサーバはPHPが使えるようになっていないといけません。

まずはPhestにアクセスしてみましょう。

こちらが管理画面になります。
こちらが管理画面になります。

新しいサイトを作ってみます。

ダイアログにサイト名を入力。フォルダ名にもなるので英数字のが良いでしょう。
ダイアログにサイト名を入力。フォルダ名にもなるので英数字のが良いでしょう。

完了しました。
完了しました。

後はLocal watchボタンを押すと監視が開始されます。ウォッチは通常ターミナルで行ってきた訳ですが、PhestはWebサーバでボタンを押すだけでOKです。

ちなみに追加したサイトのファイル構成は以下のようになっています。

$ tree .
.
├── config.yml
├── content
│   ├── _base.tpl
│   ├── _footer.tpl
│   ├── _header.tpl
│   └── index.tpl
└── vars.yml

1 directory, 6 files

config.ymlの内容は次のようになります。

$ cat config.yml 
home:
  local: "http://localhost/Phest/sites/moongift/output/local"
  production: "http://www.moongift.com"
basetpl: "_base.tpl"
buildclear: 1
sitemap: 1
robotstxt: 1
compilejs: 1

PhestはテンプレートエンジンにSmartyを採用しています。Webデザイナーの方であれば慣れ親しんだ記法だと思いますのでWebサイトがさくさく作れることでしょう。

記法はCoffeeScript、LESS/SCSSに対応しています。これらの記法でファイルを作れば自動的にJavaScript/スタイルシートへ変換してくれます。さらにYAMLを使って変数を定義することでフォルダごとにレイアウトを変えたり、配列をリストとして展開するといったことも可能です。

面白いのはAmazon S3へのデプロイ機能を備えていることで、静的に生成したサイトをそのままデプロイできます。本番環境ではJavaScript/スタイルシートのミニファイ処理にも対応しています。

意外と便利なsitemap.xmlの生成機能があったり、i18nに対応していたりと色々な機能が搭載されています。ちょっとしたプロジェクトページやソフトウェア紹介ページなどに使ってみると面白そうなツールです。

PhestはPHP製のオープンソース・ソフトウェア(MIT License)です。

黒い画面不要!デザイナ向け静的サイトジェネレーター「Phest」を公開しました

chatwork/Phest

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2