MacのUIに最適化していて使って楽しいCoda 2。



<img class="alignleft size-full wp-image-567" title="coda2" alt="" src="/wp/wp-content/uploads/2012/12/coda2.png" width="128" height="128" />

テンプレート機能があれば完璧なんですが、残念ながらないのでPHPで簡単に作ってみる。MAMPを使えばローカルに簡単にPHPが動くサーバ環境ができるのでこれを利用します。ちなみにPHPは素人です。Wordpressのテーマカスタマイズをする程度です。

おおまかな流れは

* ローカル環境にPHPでテンプレートとコンテンツを作成し
* ローカル環境をダウンロードツールでダウンロードしてHTML生成する

という感じです。

# 必要なもの

* <a href="http://panic.com/jp/coda/">Coda 2</a>
* <a href="http://www.mamp.info/en/index.html">MAMP</a>

# 構成例

```
--index.php
|--/css
|--/js
|--/img
|--/includes
|    |--config.php
|    |--header.php
|    |--footer.php
|    `-...
|--/any category
|    |--index.php
|    `--/any subcategory
|         `--index.php
|--.htaccess
`--...
```

ここではindex.phpはいわゆるコンテンツページです。
（ヘッダとフッタをテンプレを読み込む形に変更したもの）

まず、基本となるコンテンツページ。
テンプレートファイルの読み込みとページ専用設定、それにページのコンテンツが入ります。
ページ専用のidとレイアウト区分（1カラムとか2カラムとか）を変数として使うという想定です。
<code>$category</code>等としてカテゴリーを入れてもいいと思います。

## index.php

```php
<?php

define('DOC_ROOT', $_SERVER['DOCUMENT_ROOT']);
include DOC_ROOT . '/includes/config.php';
$docId = 'index';
$layout = 'layout-hogehoge';
$title = 'PAGE TITLE' . ' | ' . $siteinfo['name'];
include DOC_ROOT . '/includes/header.php';

?>
  <article>
    HERE IS ARTICLE
  </article>
<?php

include DOC_ROOT . '/includes/footer.php';

?>
```

次に読み込まれる側のパーツを作っていきます。

まず、設定ファイル。全ページで共通の設定などをしていきます。
ここではサイト名称とルートのURLをWordpress風に$siteinfoに持たせています。
$rootはhttp://example.com/hoge/をルートにしたい場合のために用意しました。
相対パスを出力するための関数も作りました。

## includes/config.php

```php
<?php
$protocol      = ($_SERVER['HTTPS']) ? 'https://' : 'http://';
$host          = $_SERVER['HTTP_HOST'];
$root          = ''; // `/hogehoge`
$siteinfo      = array(
  'name' => 'SITE NAME',
  'url'  => $protocol . $host . $root,
);

function rel_root($show_root = false) {
  global $root;

  $path     = '';
  $dir      = str_replace($root, '', $_SERVER['REQUEST_URI']);
  $count    = count(array_filter(explode('/', $dir), 'strlen'));
  $reg_html = '/.+\.htm?l/';
  $is_html  = preg_match($reg_html, $dir);

  if ($is_html) {
    $count--;
  }
  if ($count < 0) {
    $count = 0;
  }
  if ($count == 0) {
    if ($show_root) {
      $path .= './';
    }
  } else {
    for ($i = 0; $i < $count; $i++) {
      $path .= '../';
    }
  }
  return $path;
}
?>
```

## includes/header.php

ヘッダとフッタの例です。専用スクリプトなどを切り分けるためにscripts.phpもインクルードできます。必要ならsidebar.phpなども入れられるです。

設定ファイルで作った相対パスを書き出す関数を使っています。階層に従って“<code>../</code>”を追加します。引数に<code>true</code>を渡すとルートの場合に“<code>./</code>”を返します。（まあ“<code>/</code>”直書きしといてもいいですが）

```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title><?= $title ?></title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="shortcut icon" href="<?= rel_root() ?>favicon.ico">
<link rel="stylesheet" href="<?= rel_root() ?>css/com.css">
<link rel="stylesheet" href="<?= rel_root() ?>css/<?= $docId ?>.css">
</head>

<body id="<?= $docId ?>" class="<?= $layout ?>">
  <a name="pagetop" id="pagetop"></a>
  <header>
    HERE IS HEADER
  </header>
```

## includes/footer.php

```html
  <footer>
    HERE IS FOOTER
  </footer>
<?php

include DOC_ROOT . '/includes/scripts.php';

?>
</body>
</html>
```

<span style="color: #ff0000;">※PHPスクリプトはWebサーバで公開することは想定していません。</span>

# ツールを使って静的ファイルとしてダウンロード

PHPで構築したローカルサイトからダウンロードすることでHTMLファイルを生成します。

例としてSite Suckerです。

<a href="/wp/wp-content/uploads/2012/12/site_sucker_1.png"><img class="aligncenter size-full wp-image-537" title="site_sucker_1" alt="" src="/wp/wp-content/uploads/2012/12/site_sucker_1.png" width="653" height="316" /></a>

settingsを変更→URL入力→ダウンロード

<a href="/wp/wp-content/uploads/2012/12/site_sucker_21.png"><img class="aligncenter size-full wp-image-541" title="site_sucker_2" alt="" src="/wp/wp-content/uploads/2012/12/site_sucker_21.png" width="500" height="306" /></a>

デフォルトではReplace Filesは「Never」になっています。ダウンロードするたびに古いファイルを捨てる必要があります。「with Newer」でよいと思います。

また、HTML Processingが「Localize」になっていますが、これだとURLによけいな“index.html”を追加してしまうので「None」としておきます。

こうしてダウンロードしたものからゴミをとって（Site Suckerの場合__00というエイリアスがあるので削除します）、あとは煮るなり焼くなり納品するなりご自由に。

<a href="/wp/wp-content/uploads/2012/12/site_sucker_41.png"><img class="aligncenter size-full wp-image-571" title="site_sucker_4" alt="" src="/wp/wp-content/uploads/2012/12/site_sucker_41.png" width="599" height="341" /></a>

設定しなおさなくていいようにSite Suckerの設定は保存しておきます。

# index.html以外のhtmlファイル

基本的にhttp://example.com/hoge/fuga/のように“/”で終わるURLを想定していますが
どうしてもhoge.htmlなどが必要な場合があるかも知れません。

このままでhoge.phpを作成してもダウンローダーはphpファイルをダウンロードしてしまうので
（ロダによって違うのかも知れませんが）.htaccessを使ってhtml拡張子でphpを実行させる必要があります。

```
AddType application/x-httpd-php .htm .html
```

MAMPならこれをサイトルートに置けばhtmlでもPHPを実行できます。
（この場合はコンテンツはすべてhtml拡張子で統一した方がいいかもしれません）
とりあえずごくごく簡単なところでまとめてみました。使っていきながら改良したいと思います。

<span style="color: #ff0000;">追記：html形式だと相対パスがおかしくなるのでrel_root関数修正しないとです。</span>

<span style="color: #ff0000;">12/4：rel_root関数修正</span>

Archive for 2012.12

【脱Dreamweaver】Coda 2のためにPHPでテンプレートらしきものをつくる