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>
```

※PHPスクリプトはWebサーバで公開することは想定していません。

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

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拡張子で統一した方がいいかもしれません）
とりあえずごくごく簡単なところでまとめてみました。使っていきながら改良したいと思います。

追記：html形式だと相対パスがおかしくなるのでrel_root関数修正しないとです。

12/4：rel_root関数修正

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

Web制作の現場ではいわゆる「機種依存文字」を使わないのが常識でした。機種依存文字といえば、Windowsで入力した「丸囲み数字」がMacで化けるのは有名です。これらはSHIFT_JIS文字セットにおいてWindowsとMacで割り当てられているシステム外字が異なるために起こります。

現在普及しているMacOSXはWindows外字もMac外字も含むUnicodeをサポートしているので、こうした問題は解決されているのではないか、と淡い期待を込めて・・



# Firefox 2.0(Mac)

<img alt="c_firefox2.png" src="/legacy/assets/c_firefox2.png" width="500" height="460" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" />

淡い期待は見事に粉砕されましたが。ヒラギノが文字化けしている。しかし、いわゆる機種依存文字では「(日)」などの括弧付き曜日に化けるのだけど、化け方が異なる。Firefoxのメニューでソースを見ると文字化けはしていない。ブラウザは正しく解釈しているが表示が間違っているという奇妙な状態。この現象については「<a href="http://d.hatena.ne.jp/NAOI/20060627/1151404270">Firefox for Mac OS Xはハートマークをヒラギノで表示できない</a>」が詳しい。独自実装？バグ？

# Firefox 3.0(Mac)

<img alt="c_firefox3.png" src="/legacy/assets/c_firefox3.png" width="500" height="560" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" />

こちらは問題ないようだ。

# Safari 3.0(Mac)

<img alt="c_safari3.png" src="/legacy/assets/c_safari3.png" width="500" height="530" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" />

Safariも問題ないようだ。

# Internet Explorer 6.0(Windows)

<img alt="c_IE6.png" src="/legacy/assets/c_IE6.png" width="500" height="230" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" />

当然、Windowsでは表示される。IE7は・・ｼﾗﾝ

（数ヶ月前まではWindowsVISTA+IE7環境を購入する意欲満々だったのだが、「<a href="http://www.itmedia.co.jp/anchordesk/articles/0807/17/news005.html">WindowsVISTAはコケた</a>」というもっぱらの噂なので購入に二の足を踏んでいるのです）

# 【おまけ】DreamweaverCS3(Mac)

<img alt="c_DWCS3.png" src="/legacy/assets/c_DWCS3.png" width="500" height="350" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" />

ブラウザではありませんが・・これこれ、これぞ機種依存文字の文字化け。こちらはFirefox 2.0とは逆でOsakaで文字化けしている。ちなみに、Dreamweaverの環境設定でソース表示に使用するフォントをヒラギノにするとソースの文字化けはなくなる。ヒラギノだとソースコードは激しく見づらいけど。

# 機種依存はなくなりつつある

フォント指定でヒラギノを外しOsakaのみにすれば、Firefox 2.0でも正しく表示できるということになりますが、いまさらOsakaで表示させるというのもあまり気が進まない。

Unicodeが採用されたことで、Macのブラウザだからといって文字化けすることは少なくなった。しかし、Firefox 2.0はなにやらおかしな挙動を見せるので、気兼ねなくWindows外字を使うにはもう少し待たなければいけないようです。

<a href="/lab/charset/index.html">検証に使用したソース</a>

※今回検証した文字は「機種依存文字」といわれるものの一部です。また、Mac外字をWindowsで見た場合は検証していません。そもそもクライアントからMac外字を使った原稿がくることはまずないので・・

# 参考

<a href="http://www.shtml.jp/mojibake/mac_izon.html">Macでは表示されるが、Windowsでは文字化けする文字</a>

<a href="http://mikeneko.creator.club.ne.jp/~lab/kcode/vendor.html">機種依存文字の歴史</a>

昨日の常識は明日の非常識〜機種依存文字はいつまで機種依存なのか

Illustrator、PhotoshopはCS2（それぞれ単品）、StudioはMX2004でした。CS3でadobe製品が一斉に Universal Binary に対応するので今回は速攻導入です。

<img alt="IMG_2363.jpg" src="/legacy/images/IMG_2363.jpg" width="450" height="337" />

IllustratorとPhotoshopは文字入力が速くなった

CS2はIntel未対応だったのですが、とにかくテキスト関係の遅さが非常に気になっていました。キーボードからの入力が一息遅く、入力途中で数秒待つ事もしばしば。また、テキストをペーストする際も数秒のタイムラグがありました。

CS3ではテキスト入力時のタイムラグはほぼ無くなりました。ファイルを開いたり保存するのも速くなった気がします。

Fireworksは劇的に改善

Fireworks(MX2004)はIntelではほぼ使い物になりませんでした。編集作業は問題ないのですが、ファイルを開く、保存するのに異様に時間がかかっていました（少なくとも１〜２分／ファイルは待っていたように思う）。

これは、完全に解決されていました。デザインはPhotoshop派だったのですがFireworksは素早く適用できるテクスチャなどが充実しているので今後はFireworksもワークフローに加えられるかも。

DreamweaverとFlashはこれから使ってみます。DWはspryというAJAXライブラリが気になるが以前のjavascriptビヘイビアみたいに廃れて行ったりしないだろうか・・オープンソースを手動で実装したほうがいいのかなー。Flashは今回の新機能より８で実装された機能の方がキニナル。

CS3導入に合わせてメモリ1.5Mから2Mに増設しようと考えていたが、必要ないかもしれないです。

<img alt="IMG_2362.jpg" src="/legacy/images/IMG_2362.jpg" width="450" height="337" /> 
ちなみに、WEB PREMIUM にはこんなルービックキューブがついてきました。

CS3（mac版）を入れてみた

テンプレートをネストしてる場合の弊害ですが、いろいろ試した結果、回避方法がわかったのでメモ。



親テンプレートの`head`内編集可能領域には何も書きません。

```html
<head>
〜


</head>
</code>
```

子テンプレートの`head`内編集可能領域にダミーで`<script>`タグを書きます。

```html
<head>
〜


<script type="text/JavaScript">

</script>


</head>
```

今のところ、僕の環境では`head`内にjavascriptが追加されるのを防げました。
テンプレートタグが二重になっているのは当然ながらテンプレートをネストしているためです。

ちなみに。macOS10.2.8と10.4.6でdreamweaverMX2004です。

Articles tagged 'Dreamweaver'

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

昨日の常識は明日の非常識〜機種依存文字はいつまで機種依存なのか

CS3（mac版）を入れてみた

Dreamweaverがテンプレートの編集可能領域外に勝手にJavaScriptを追加して下さる件について