Dreamweaverは改造して使え!

ある寒い夜、神はオフトゥンを遣わしました。凍てつき震える体を抱えていた人々は歓喜し、神に感謝の祈りを捧げました。オフトゥンに包まれるように眠る人々はもう凍えることはなくなりました。そして長い年月がたちました。冷え込み凍てついた朝、人々はオフトゥンから出てこなくなりました。そうです、人は堕落してしまったのです。
さて話は変わります。先日DreamweaverCC2017がリリースされましたが、このバージョンは大幅に手を加えられてます。一番大きいのはコードビューにBracketsを採用したところでしょう。Brackets自体はIDEとして独自に開発されてきたものですからBrackets自体が機能拡張の仕組みを持ちます。もちろん自分で作ることも可能です。基本的にJavascriptでの記述でいけますから腕に自信のある方はチャレンジしてみて下さいなんですけど、今回はこの内蔵されたBracketsをどうやって拡張するのかを見て頂ければと思うのです。


まず先にBracketsのエクステンションをひとつ入手しましょう。今回導入するのはminimapというコードビューの右端にコード全体のマップが表示されてドラッグで任意の部分にジャンプできるという素敵なエクステンションです。Bracketsでも導入されている方も多い事と思います。Brackectのエクステンションフォルダから引っ張り出してくるのもアリなのですが今回はgitから入手します。まずは下記アドレスからダウンロードします。
https://github.com/zorgzerg/brackets-minimap

git_minimap.png
Clone or downloadのボタンをクリックして
git_download.png
Download ZIPをクリックでダウンロード出来ます。このzipを展開しておきましょう。
続いてDreamweaverCC2017アプリケーションフォルダを見ます。
dw_package.pngDreamweaverCC2017のアプリケーションアイコンを右クリックでコンテキストメニューから「パッケージの内容を表示」を選択します。
dw_brckets_ext.png
あとは上の様に開かれたパッケージ内をナビゲート(/Application/Adobe Dreamweaver CC 2017/Contents/www/extensions)して「default」フォルダを開きましょう。
既に幾つかのエクステンションが導入されているのが分かりますね。READMEを読んでみます。

「This directory contains extensions that ship with brackets and are enabled
by default. Examples include extensions for QuickOpen.
(README also serves as a dummy file so this directory can be added to git.)」

と書かれています。という事で使いたいエクステンションはとりあえず此処に放り込んでいきます。先のイメージでは既にminimapがインストールされている状態ですが、zipファイルを展開したものをそのままこのフォルダに移動しただけです。
この状態でDreamweaverCC2017を起動してみます。
dw_cstm_brackets_ext.pngはい、minimapが稼働していますね。この様にコードビューをよく使う人はBracketsをカスタマイズするとより使いやすいものに出来ます。
わたしの例ではサイトの編集ではなくAdobe Extension SDKプロジェクト専用IDEと化しているためExtendscript用のコードヒント等が実装されていますがこの辺はかなりの改造が必要になりますので別の機会に解説できたらと思います。

今回はMacでしたが、Windowsな人も同様にエクステンションが使えます。
広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中