AEDもくもく会レポート

2月5日にマツヤマンースペースさんで開催した『第1回 AEDもくもく会「Dreamweaver CC 2017」を使ってみよう』で、新しいDreamweaverを使ってみました。最新バージョン2017になって大きく変わったDreamweaver。これまでのエディタを捨て「Brackets」を搭載したのは有名な話ですが、とても便利な機能が増えており、今までのDreamweaverとは大きく変わっていました。先日のAED-LABOのコーディングの話にもあったSassやGulpの導入のに一手間かかるのを考えると、簡単に始めることができるので、デザイナーさんでコードを書かれる方や今から勉強する方にはいいのではないかと思います。

写真:第1回もくもく会の様子
写真:第1回もくもく会の様子

AEDメンバーも、もくもくとDreamweaverを試してみました!そこで、実際に便利だと思った機能を3つピックアップしてみたいと思います。

1.  Sassのコンパイルができる

Sublime Textのようにパッケージを入れなくても、Sass(今回はSCSS記法を使っています)をコンパイルすることができます。そのままでもコンパイルはできますが、次の2つはあらかじめ設定しておいたほうがいいです。

[サイトの管理] – [CSSプリプロセッサー] – [ソースと出力]で、出力先を指定できます。デフォルトだと「ソースと同じフォルダー」になっているので、はじめにサイトを定義をするときに出力したいフォルダに変えておくといいです。

画像:サイト定義のCSSプリプロセッサーで出力先フォルダを指定

また、[一般]で出力形式を選択できます。デフォルトは「nested」になっておりSassをコンパイルした時の独特な展開になるので、編集時には「expanded」にしておくと確認しやすいです。実際にサーバーにアップロードするときに圧縮したい場合は、「compressed」にすると、改行がなくなり圧縮できます。

画像:サイト定義のCSSプリプロセッサーで出力形式を指定

これらの設定の詳細は「Dreamweaverで覚える最新Web開発ワークフロー_ Sass編 _ Adobe Creative Station」を見るとわかりやすかったです。

このもくもく会では、Windows10でSassのコンパイルをした時に落とし穴にはまりました。Sassの中で別のSassファイルを@importで読み込んでいるのですが、「Error: File to import not found or unreadable」というエラーが出て、Sassファイルを読み込むことができずコンパイルできません。解決に導いてくれたのは、次のサイトでした。
Dreamweaver CC 2017のSASS_SCSSの@importでエラー – 時にはWEBの話っ!

原因は、ユーザー名が全角だとエラーがでるようです。Mac OSでもエラーが出るかもしれませんが、フォルダ名を全角にして試してみても、このようなエラーにはならなかったので、Windowsの方は注意したほうがよさそうです。

2. ブラウザでリアルタイムにプレビューできる

ファイルを変更すると、Dreamwever内にあるライブビューだけでなくブラウザでも変更してる内容をそのままリアルタイムで見ることができます。確認するのにいちいちリロードをかける必要がありません。これは、もともとBracketsの機能だそうです。すばらしい!

[ファイル] – [リアルタイムプレビュー]からブラウザを選択できるので、使いたいブラウザを選択して開くと見ることができます。

また、右下のほうにあるアイコンからでも、リアルタイムプレビューを開くことができ、さらにスマートフォンなどのデバイスでもQRコードからアクセスすると、実機でプレビューを見ることもできるようです。

残念ながら今回はQRコードでは表示できませんでした。ネットワークなど環境によってはうまくいかない場合もあるようなので、Dreamweaver でデバイスプレビューに関する問題をトラブルシューティングする方法を参考にまた試してみたいと思います。

3. Bootstrapの調整が簡単にできる

これは2017年版からの新機能ではないですが、スターターテンプレートにBootstrap3のテンプレートあるので、使う人にとっては便利だですね。[ファイル] – [新規] – [スターターテンプレート]で選択して、サイト制作を始めることができます。

画像:新規ドキュメント BOOTSTRAP スターターテンプレート

また新規に作成する場合、Bootstrap3のカスタマイズページでは細かく調整はできますが、余白とブレイクポイントの調整だけでよければ、Dreamweaver内でも設定を変更することができるので、いちいちWebページでカスタマイズしてダウンロードしなくてもいいです。

[新規ドキュメント] – [HTML] – [BOOTSTRAP]で、Bootstrap CSSを「新規作成」にすると「カスタマイズ」ボタンが表示されるので、クリックすると余白はブレイクポイントを設定できます。

画像:新規ドキュメント BOOTSTRAPカスタマイズ

他にも便利な機能がたくさんあるようですね。次のサイトにその他の機能も詳しく書いてくださってるので、もっと知りたい!という方は参考になるかと思います。

まとめ

ふだん使いなれたものを変えるのは、学習コストもかかりますし、仕事に追われて試してみる時間もなかなかとれない方もいるかと思います。また触りはじめたとしても、いきなりつまづいて….やっぱり今までの方法でいいかな…なんてことにも陥りがち。そんなときに、ひたすら触ってみるにもよし、まわりの人に聞いてみて一緒に考えるのもよし、もくもく会はそんな機会になるかなと思いました。次回のもくもく会は未定ですが、またみんなで試してみましょう!


AED-LABOについて

AED-LABOは、技術ネタを中心に毎月テーマを変えて配信しています。次回第16回の配信は、2017年3月5日(日)19:00から配信いたします。メインテーマは「2017年 地方でも活かせる活かせるインターネット広告活用法」です。過去のアーカイブもありますので興味があるテーマあれば、ご覧ください!


Pocket