Dreamweaverのテンプレートを使ったときのHTML5文字化け
0Dreamweaver CS5のテンプレート機能を使って、HTML5のコーディングをしていると、テンプレートから作られたページが文字化けするという問題が起きました。
条件
- Dreamweaver CS5/CS4
- HTML5コーディング
- UTF-8
HTML5では文字エンコーディングの指定は、
<meta charset=”UTF-8″ />
と非常にシンプルに書くのですがどうやらこれをDreamweaverは理解せず、派生したページのファイル文字コードをShift-JISに変更して保存するため文字化けを起こすようでした。
文字化けしたしたファイルをTextEditorで開いてUTFに保存しなおすと治りますが、これは毎回やることは出来ないので、Dreamweaverの初期設定を変更したりもしたのですが、ダメでした。
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
とHTML4で記述すると大丈夫なのですが、これはいただけない・・・
調べるとこんな方法があるようです。
<!--TemplateBeginIf cond="0" --> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!--TemplateEndIf --> <meta charset="utf-8" />
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />の記述はするものの、各ページではTemplate Ifを使い非表示にします。
なお、<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />と<meta charset=”utf-8″ />の順番を逆にすると、テンプレートを修正しても、派生したページに反映されない時があるので、必ず上記の順番で書きましょう。
CS5.5ではこのバグは修正されているようです。
気になるAPI
0画像処理
顔認識 face.com API
http://developers.face.com/
写真から顔を認識。ベータ版(2011年8月30日現在)
利用例:ロンドンの暴動時に監視カメラに映った写真をFlickerにアップ。それをface.comAPIにかけて割り出した。
http://developers.face.com/
カラーパターン登録 kuler
http://kuler.adobe.com/
自分で気に入ってるカラーパターン、使用率を登録できる。
Fireworksでのテキスト両端合わせ
0Photoshopには標準で付いてるのにFireworksにはない、テキスト両端合わせ(行末のみ左合わせ)
Fireworks標準の両端合わせは、すべての行が両端合わせになり、もしかして最後の行だけ選択、左合わせにすればいけるかと思ったが、文字の選択に関わらずテキストオブジェクト全体の行合わせが変わってしまいました。
この機能についてはあきらめていたのですが、たまたま出来ました。
やり方はPhotoshopで「テキスト両端合わせ(行末のみ左合わせ)」のテキストを作ってすべての文字選択。
Fireworksに移ってテキストボックスを作りコピー。これだけで出来ました。

書体やサイズの変更しても両端合わせは維持されて、新規に文字を入力したり、そのテキストボックスにテキストエディタなどから文書をコピーしても維持されていました。
毎度Photoshopを立ち上げるのも面倒なので、このテキストボックスがあるファイルを保存してライブラリにしました。
windowsでフォルダの削除
0windowsで特定のフォルダやファイルをゴミ箱に移動しようとすると「指定されたパスが見つかりません」等のエラーが出て、削除できない時があります。
その場合、スタートメニューからコマンドプロンプトを立ち上げ
cd ¥ del "ファイルのパス"
で削除されます。ファイルのパスはdel(半角スペース)と入力したあとのあたりにファイルを直接ドラッグすれば、”###”とパスが自動入力されます。
削除したいものがフォルダの場合
cd ¥ rd /s "フォルダのパス"
としてください。
html5+css3 標準head記述
0html5+CSS3で標準的に使用できるテンプレートを作っているのだけれども、加えた方がいいタグや、間違ってるタグなどあれば教えてください。
CMSでつくるならlinkでprevとかの設定も入れたほうがいいかもしれないけど、今回は手作業でページを作る場合を想定しているのであまり細かいのは省きます。
サイトタイトルやURLはphp使って記述したほうが汎用性が高いかなぁ。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″ />
<title>サイトタイトル</title>
<meta name=”description” content=”サイト説明文” />
<meta name=”keywords” content=”キーワード,キーワード” />
<!– Open Graph Tags –>
<meta property=”og:title” content=”ページ名(サイトタイトル)” />
<meta property=”og:type” content=”website” />
<meta property=”og:url” content=”サイトURL” />
<meta property=”og:image” content=”サイトサムネイルIMG URL” />
<meta property=”og:site_name” content=”サイトタイトル※設定しなくてもよい” />
<!– style sheet –>
<link rel=”stylesheet” href=”/_css/common/import.css”>
<!– link –>
<link rel=”shortcut icon” href=”/favicon.ico”>
<link rel=”canonical” href=”共通させるURL”/>
<link rel=”alternate” type=”application/rss+xml” title=”RSS” href=”RSSのURLl” />
<!– java script –>
<!–[if lt IE 9]><script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script><![endif]–>
<script src=”http://www.google.com/jsapi”></script>
<script type=”text/javascript”>google.load(“jquery”, “1.3″);</script>
</head>
Twitterのつぶやきを取得・表示
0Twitterのつぶやきを取得して、自分のサイトに表示。
検索して、XMLの取得、パースして、タグを出力という行程です。
※要PHP5
<?php
//***は検索キーワードやユーザー名、#タグは#の代わりに%23を入力
$xml = simplexml_load_file("http://search.twitter.com/search.atom?q=***");
foreach ($xml->entry as $entry) {
$title = $entry->title; // つぶやき取得
$publish = $entry->published; // つぶやき日付取得
$name = $entry->author->name; // つぶやいた人取得
$uri = $entry->author->uri; // つぶやいた人のプロフィールURL
// tweetの表示
echo '<hr>'.$title.'<br>'.date('Y/m/d H:i:s', strtotime($publish)).' - <a href="'.$uri.'">'.$name.'</a>';
}
?>
カスタムフィールドテンプレート
0[Plan]
type = text
size = 35
label = Where are you going to go?
[Plan]
type = textfield
size = 35
hideKey = true
[Favorite Fruits]
type = checkbox
value = apple # orange # banana # grape
default = orange # grape
[Miles Walked]
type = radio
value = 0-9 # 10-19 # 20+
default = 10-19
clearButton = true
[Temper Level]
type = select
value = High # Medium # Low
default = Low
[Hidden Thought]
type = textarea
rows = 4
cols = 40
tinyMCE = true
htmlEditor = true
mediaButton = true
[File Upload]
type = file
.htaccessでのリダイレクト
0アクセス先:/old_dir/
転送先:http://w3g.jp/new_dir/
アクセス先:拡張子がhtmlのファイル
転送先:同名のファイルで拡張子を.phpに変更
MySQL 文字列置換
0update テーブル名 set カラム名 = replace(カラム名,’置換前文字列’,'置換後文字列’);
データベース名:movabletype
テーブル名:mt_entry
カラム名:entry_authored_on
update mt_entry set entry_authored_on = replace(entry_authored_on,’0000-00-00 00:00:00′,’2011-03-31 00:00:00′);
サーバー(主にデータベース)移行のmemo
0データベースを保存する。
1)telnetでアクセス。
2)保存先のディレクトリに移動
cd ###/####/mysql
3)データベースの保存
mysqldump --user=ユーザー名 --password=パスワード mt4(データベース名) > mt4.sql(保存ファイル名)
4)FTP等でmt4.sqlをダウンロード
5)テキストエディタでmt4.sqlを開いて、サーバー名等を一括変換して保存(mt4_new.sql)
6)変換したmt4_new.sqlを新サーバーにFTPでアップ
7)新サーバーにtelnetでアクセス
8)保存先のディレクトリに移動
cd ###/####/mysql
9)mt4_new.sqlを新サーバーに展開
mysql -u ユーザー名 -pパスワード mt4_new(データベース名) < mt4_new.sql(保存ファイル名)
その他
■viEditorで変換
%s;/var/www/###;/home/httpd/$$$$;g
■CPIサーバー(マネージドプラン)のmysqlコマンドパス
/usr/local/mysql/bin/mysqldump /usr/local/mysql/bin/mysql
MySQL5
/usr/local/mysql5/bin/mysqldump /usr/local/mysql5/bin/mysql
