■最終記事更新日:2012/09/20

話題のコーディングツールZen CodingをDreamweaver8にインストールしてみた。


スポンサーリンク

サイト内検索
スポンサーリンク

サイトコンテンツ


スマホアプリ攻略記事特集

Android,iPhoneスマホゲームアプリの攻略記事です。
他にもたくさんアプリ攻略情報あり!他の Android,iPhoneゲームアプリ攻略情報を見る >>

セール中iPhoneアプリ情報

アプリレビュー

おすすめスマホゲーム・アプリ

おすすめiOS脱出ゲーム Cream room2
おすすめiOS脱出ゲーム Cream room
おすすめiOS脱出ゲーム  世界一簡単な脱出ゲーム
おすすめiOS脱出ゲーム  脱出ゲームStrange rooms Chapter 1

スポンサーリンク

このサイトの内容がお役に立ちましたら是非SNSシェアにご協力ください!

  • このエントリーをはてなブックマークに追加

自宅で使用しているDreamweaver8にぜひともZenCodingをインストールしたい!!と思い立ちがんばりました。
公式にサポートがされているのはDreameweaverCS4のため不安でしたが……
なんとかインストール成功しました。
2月28日現在最新のバージョンは0.6なのですが、動作しなかったため0.5を使用します。

環境は
MacOSX 10.5.8-leopard
Dreamweaver8

インストール

[1]ダウンロード
Zen Coding.mxp – zen-coding – Zen Coding for Dreamweaver v0.5 – Project Hosting on Google Code

[2]ダウンロードファイルを展開すると
11ピクチャ 2

が表示されます。
「開く」をクリックしてExtension Managerを開きます。
初めて存在を知りましたExtension Manager(笑)

[3]「インストール」をクリックして、Zen Coding.mxpを選択、もしくはZen Coding.mxpをダブルクリックします。

[4]使用許諾を聞かれるので「承諾する」をクリック
[5]OKが表示されます
ピクチャ 4

[6]Dreamwearverを再起動します。

インストールは以上で完了します。
なんとも簡単です。

doctype宣言のデフォルト設定がenなどになっているため、出力タグを変更する場合はzen_settings.js内の記述を変更します。
zen_settings.js内でタグの出力内容を変更できるようです。

11行目〜の

	'variables': {
	'lang': 'en',
	'locale': 'en-US',
	'charset': 'UTF-8',
	'profile': 'xhtml',

を編集するとデフォルト値を変更可能。

ファイルパス
/Users/********/Library/Application Support/Macromedia/Dreamweaver 8/Configuration/Commands/ZenCoding/zen_settings.js

使い方

キーワードを入力してctrl + , (カンマ)を押すだけ!

div#main

と入力したあとにctrl+,を押すと

<div id="main"></div>

が展開されます。嗚呼半端なく素敵です。

リスト系のタグ時に重宝しそうです。
一番感動したのがtableです。
ぜひ感動をわかちあうためにこの文字列をうってctrl+,を押してください。

table>tr>td*3

参考にさせていただきました。
zen-codingとDreamweaverメモ ? 乱雑モックアップ
コーディングの効率化を図るZen codingをDreamweaver cs4に入れる方法 – Web:a piece of cake!;
Zen-Condigの基本文法をおさらい | ブログ | ちゃんとWebなホームページ制作会社(東京) エイチツーオー・スペース[H2O Space.]
Zen-CodingをMTで簡単に使うプラグインを試して、変換候補を追加してみた|caraldo.net | WebとiPhoneとロードバイクが大好き!


スポンサーリンク

スポンサーリンク

「話題のコーディングツールZen CodingをDreamweaver8にインストールしてみた。」への1件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。