25日 5月 2011

DreamweaverCS4のテンプレートを使ってHTML5 でコーディングする時のバグ回避法

 

最近html5でコーディングをしてみたのですが、

DOCTYPEなどを

 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />

 

このように簡素に記述できてよろしい事は皆さんご承知だと思いますが、

私の使っているDreamweaverCS4でテンプレートを使うと

文字化けが発生してテンプレを更新するたびにShift-jisになっていたので

テキストエディタでUTF-8に書き換えてました。

 

変だと思いながら10数ページのサイトだったので何度か文字化けを

修正しながら作業していて、ようやく「さすがにおかしい！」

と気づき（今ごろ）、調べてみると以下のサイトを発見！

 

--

http://blog.btmup.com/web-general/dreamweaver-cs4-template-mojibake.html

--

どうも<meta charset="UTF-8" />をDwが解釈せずに、Shift-jisで

書き換えられてたのが原因みたいで文字化けしてたのね。

なんだバグだったのかと解決したところで、解決ではないので何か方法は

無いかと検討の末、ライブラリを使っても上手くいかず、編集可能領域を

作って対応しました。

方法はこうです。。

 

1_HTML５でテンプレートを作成。

2_テンプレートの<meta>に編集可能領域を作る。

3_テンプレートの編集可能領域内の<meta charset="UTF-8" />を

Dwが認識してくれるタイプ

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

に書き換える。

4_テンプレートを保存して更新。

5_置換でテンプレートを適用したページの

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

を<meta charset="UTF-8" />に置き換え。

6_テンプレートの<meta>だけは

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

にしておく。

 

ザクッとこんな感じで、解説は以下です。

 

*2_

テンプレートの<meta>に編集可能領域を作る方法が解らなかったので、

普通にbody内に編集可能領域を作る要領で、作成したコード

<!-- TemplateBeginEditable name="meta_charset" -->meta_charset<!-- TemplateEndEditable -->

をコピーして<meta charset="UTF-8" />に適用しました。

--こんな感じ--

<!DOCTYPE html>
<html lang="ja">
<head>
<!-- TemplateBeginEditable name="meta_charset" -->
<meta charset="UTF-8" />
<!-- TemplateEndEditable -->

--ここまで

 

*3_

--こんな感じです--

<!-- TemplateBeginEditable name="meta_charset" -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- TemplateEndEditable -->

--ここまで

 

*4_

3_の状態で一度保存しておかないと文字化けしちゃいますから。

テンプレートを適用したページの<meta>がテンプレートタグで囲まれるので

後は置換で一気に<meta charset="UTF-8" />に戻しましょう！

 

*6_

テンプレートだけは

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

に戻しておかないと<meta charset="UTF-8" />のままだと

更新作業時にShift-jisに書き換えられてしまうので。

 

・・・といった具合です。

記事にするにあたり調べてみると他の方法もあるみたいで、こんな記事もありました。

 

--

http://design-spice.com/2011/04/16/dreamweavercs5-html5-template/

--

 

私はこの記事の

<!--TemplateBeginIf cond="0" -->

の部分がよく解ってないのですが、方法はいくつかあるみたいですね。

私のやり方で問題ないとは良い切れませんが、今のところ大丈夫みたいです。

 

CS5.5では修正されてるのでしょうか。