Adobe DreamweaverがCC 2017版から、正式にGitをサポートするようになったというニュースを読んで、さっそく設定してみました。これまでSourceTreeで管理していたため、Dreamweaverの使い勝手になれるまで、すこし時間がかかりそうですが、ちゃんと既存のリポジトリと統合することもできて、思っていたよりも、活用できそうです。同じ環境のMacで、導入に迷っている方の参考になれば、幸いです。

Macに付属のGitを確認する

MacOsXの場合、最初からインストールされていると思います。ターミナルで確認してみましょう。ターミナルを立ち上げて、「 git --version 」と入力すると、バージョンが表示されます。

MacにGitをインストール

インストールされていない場合、公式サイト（https://git-scm.com/downloads）から、MacOsX用をダウンロードして、インストールを行ってください。

[su_row]
[su_column size="1/2"] [/su_column]
[su_column size="1/2"] 公式サイトからMacOsX用をダウンロードします。Gitのインストール方法は、HomebrewというMac用のパッケージ管理を使う方法などもありますが、今回は、公式サイトからダウンロードしてインストールする方法を選択しています。 [/su_column]
[/su_row]

[su_row]
[su_column size="1/2"] [/su_column]
[su_column size="1/2"] ダウンロードが完了したら、ファイルをダブルクリックして、普段、アプリをインストールするのと同じ手順でインストールしてください。インストールが終わったら、念のために再起動しておきましょう。 [/su_column]
[/su_row]

インストールが終わったら、Gitのパスを確認しておきましょう。ターミナルを立ち上げて、「 which git 」と入力すると、パスを確認することができます。

Dreamweaverの環境設定を行う

DreamweaverCC2017の環境設定パネルの中にGitの設定項目がありますので、その画面を開いてください。「git実行ファイルへのパス」という入力欄と「端末へのパス」という入力欄に、先ほど確認したGitへのパスを入力します。

入力して、適用ボタンを押したら、ここでDreamweaverを再起動しておいてください。Dreamweaver本体の設定はこれだけです。あとは、作業するサイトでそれぞれ個別に設定を行います。

作業するサイト毎の設定を行う

新規のリポジトリのとき

新しく作るときは、サイト名に任意の名前をつけ、サイトのフォルダを指定した後に「このサイトにGit リポジトリを関連付ける」の欄にチェックを入れて、「Git　リポジトリとして初期化」を選択してください。保存して終了です。

既存のリポジトリを使いたいとき

既にある既存のGit リポジトリを利用するときは、「URLを使用して既存のGit リポジトリを複製」にチェックをいれます。管理しているアプリ（今回は、Bitbucketを利用）のリポジトリのアドレスを入力して、ユーザー名とパスワードを入力してください。

今回は、Bitbucketを利用している場合を参考にしています。下の画面のアドレスをコピーして、Dreamweaverのサイト設定の「URLを使用して既存のGit リポジトリを複製」の入力欄に記入してください。

設定すると、接続してくれて、自動で完了します。

環境設定はこれで完了！作業してみましょう

設定は完了しました！早速、なにか作業してみましょう！

ファイルに変更を加えると、ワークスペースのファイル管理パネルにある、ファイル名がオレンジ色でマークされました。

ワークスペースの管理パネルに「Git」というボタンがありますので、それを開きます。
変更したファイルにチェックをいれて、、、コミットしましょう。コミットボタンは、一番左側のボタンです。

初めてプッシュボタンを押したときには、設定画面が開きますのでここで、ユーザー名とパスワードを入力して保存します。

完了しました。Bitbucketの画面をチェックすると、ちゃんと、先程コミットした内容が反映されていますね！

しばらく待つと、SourceTreeから通知も届きました。

無事に設定完了です！！

投稿Mac版 Dreamweaver CC 2017でGit を使えるようにするはTaniweb制作の最初に登場しました。

前回の　HTML&CSS作成がラクになる！DreamweaverからPSDファイルを読み込んでのコーディング（1）　の続きです。

実際に、必要な画像をダウンロードしてみます。

Dreamweaver［Extract］パネルのPSDから画像をダウンロードする

まずは、あらかじめ、サイトのフォルダと画像を保存するフォルダを作成しておきます。このフォルダの中に画像をダウンロードします。

Dreamweaver PSD から画像のダウンロード

Dreamweaver［Extract］パネルのPSDの中の、ダウンロードしたい画像にカーソルを合わせると、画像のダウンロードボタンが表示されますので、保存したいフォルダと画像の名前などを設定し、保存ボタンをクリックします。パネルの設定については、前回の記事を参照してください。

リボンのイラストとContentsの文字の画像がダウンロードできました。同じようにして、背景と、リストボタンもダウンロードします。

画像が3枚ダウンロードできました。

CSSをコピーしてコーディングに活用する

いよいよコーディングします。この時、Dreamweaver［Extract］パネルのPSDからCSSがコピーできますので、それを活用しましょう。

クラス名などのセレクタをセット

背景をセットします。途中までは普段通りにHTMLを作成してください。
今回は、sectionにside_tabというidを付けて全体を囲み、その中にtabboxというクラス名を付けてタブのボックス全体を囲むことにしましょう。なので、htmlは以下のようにしました。

<section id="side_tab"><div class="tabbox">ここにタブのコンテンツの内容を記述する</div></section>

これに対して、スタイルシートを設定していきます。クラス名のセレクタを準備しましょう。※まだプロパティーは何も設定していません。

#side_tab {

}


.tabbox {

}

プロパティーをコピー＆ペーストする

この　.tabbox　のセレクタに対するプロパティーをDreamweaver［Extract］パネルのPSDファイルのCSSからコピーします。コピーしたら、それをDreamweaverのCSSにペーストします。こうすることで、プロパティーがコピーされました！

この時、1つ注意しなければならないことが、背景に画像を使いたい場合など、背景画像の設定項目はコピーできないという点です。
背景画像に関しては、手動で設定する必要があります。

このようにして、必要なコーディングを行っていきます。
どんどん作業を進めて、全体の枠と、リボンが付いたタイトル、切り替え用のタブとその下のコンテンツを納める白いボックスの配置まで設定が完了したとします。

ここまでできたと仮定して、次は、テキストをペーストする方法を解説します。

テキスト情報をペーストする

ExtractパネルのPSDのテキストをコピーするボタンをクリックしてください。すると、テキストがクリップボードにコピーされますので、これをHTMLやCSS側にペーストします。テキストがコピーされましたね！

このようにして、Dreamweaverから読み込んだPSDファイルを使って、画像のダウンロードとCSSのコピー、テキスト情報のコピーができるようになりました。これだけですが、コーディング効率化にずいぶん役に立てられるのではないかと思います。

あとは、引き続き、このタブで切り替えるコンテンツのコーディングを進めて、HTMLとCSSが完成したら、タブを切り替えるためのJavaScriptをセッティングして完了です！

完成しました！

このサンプルHTMLはこちら

レスポンシブ対応のサンプルHTMLはこちら

投稿HTML&CSS作成がラクになる！DreamweaverからPSDファイルを読み込んでのコーディング（2）はTaniweb制作の最初に登場しました。

PSDから画像を書き出す際に、レイヤーから書き出す機能をご紹介しましたが、今回は、画像は書き出さず、PSDファイルのまま、Dreamweaverから呼び出して、画像を抽出するという作業の方法をご紹介します。

作業の目的などがハッキリしていた方が、わかりやすいと思いますので、今回は、このサイトのサイドバーに、タブの切り替えコンテンツを作りたいと思います。その元となるファイルをPSDで作成し、テキストや画像を抽出して行く様子をご紹介します。

Dreamweaverの［Extract］パネルからPSDを読み込む

Photoshopでデザインファイルを作成

Photoshopでデザインファイルを作成します。以下のようなPSDファイルを作ったとしましょう。この時、HTML化させる際に、1枚の画像として抽出したいものは、あらかじめレイヤーを統合しておくか、スマートオブジェクトに変換しておいてください。

その他は、テキストはテキストのまま、パスはパスのままでかまいません。パスにパターンオーバーレイなどが効いている場合も、そのままにしておいて問題ありません。

今回は、リボンとその下のCONTENTSという文字を1枚の画像として抽出したいので、スマートオブジェクトにしています。画像として抽出するのはこの1枚とリストボタンだけです。

メニューの項目は1つを残して、あとは削除か非表示にします。
（コーディングの際に、全部必要な方は、全部表示してかまいません、今回は1つあれば十分なので、削除しました）

わかりやすいように、レイヤーを色分けしています。緑は、スマートオブジェクト　青は、パス、黄色はテキストのレイヤーです。

Dreamweaverで新規ファイルを作成し、［Extract］パネルからPSDファイルをアップロードする

Dreamweaverの［Extract］パネルにある「＋」のボタンをクリックして、作成したPhotoshopのファイルをアップロードしてください。
もしくは、PCの中にある、CreativeCloudフォルダの中に、PSDを入れても同じことができます。（CreativeCloudサーバーとの同期を外さないでください）

［Extract］パネル内のPSDファイルでできること

ファイルがアップロードできました！！
これで、［Extract］パネル内にPSDファイルが入りましたね！これから、このファイルの機能を利用して、コーディングを最速にする便利な方法を試してみたいと思います。

当たり前ですが、PSDファイルをアップしただけで、Dreamweaverが自動的にコーディングしてくれる訳ではありません！！！

試しに、Extractの中で、白い枠を選択してみます。すると、CSSコードと画像をダウンロードできるボタンが表示されるはずです。

CSSのコピーのボタンは、選択している部分のCSS表示してくれ、チェックを入れた部分だけコピーすることができます。コピーボタンを押した後は、テキストファイルなどにペーストして利用します。
画像のダウンロードは、その通り、画像をダウンロードできるボタンです。

保存先と、画像名を付けられ、画像の形式も選択できます。また、Retinaディスプレイ向きに、2倍の画像の生成にも対応してくれています。便利ですね！

次回は、実際に画像をダウンロードして、このCSSを使ったコーディングの実例をご紹介します。

投稿HTML&CSS作成がラクになる！DreamweaverからPSDファイルを読み込んでのコーディング（1）はTaniweb制作の最初に登場しました。

Macのことえり（あるいは日本語IM）に辞書登録した単語を、ATOKに移す方法です。

ユーザー辞書の内容をATOKにインポートして登録する方法です。
新しくATOKをパッケージ版からクラウド版にしたり、Macをクリーンインストールした時に使います。なぜか辞書を認識しなくなったりした場合も、簡単なので登録しなおした方が早いですね。

Macのユーザー辞書の内容をATOKに登録する手順

手順1：まず、Macのユーザー辞書を開く

環境設定にある「キーボード」をクリックし、「ユーザー辞書」のタブを選択すると、画面がでてきます。

手順2:ユーザー辞書の内容から登録用ファイルを作成する

左側の画面の小窓に出ている登録文字の一覧から、登録用ファイルを作成するのですが、左側のテキストを全部選択して、マウスで画面の外へドラッグ＆Dropするだけで、「ユーザー辞書.plist」という名前で登録用ファイルが作成されます。

ATOKの辞書ユーティリティを開いて登録

ATOKのメニューから、辞書ユーティリティ選択して開いてください。

ツールから「ファイルから登録・削除」を選ぶと、ファイルの選択画面が表示されます。「単語ファイル」と「出力ファイル」が選べるようになっている画面が現れると思います。
この「単語ファイル」のところのオプション「ファイル形式」を「OS X標準/ことえり」に変更してください。

「単語ファイル」を選択する設定ボタンをクリックして、Macのユーザー辞書のファイルを選択します。デスクトップへ保存してた「ユーザー辞書.plist」という名前のファイルです。

完了！

登録するファイルを選択したら、後は「登録ボタン」をクリックして、登録してください。

投稿Macのユーザー辞書の内容をATOKに登録する手順はTaniweb制作の最初に登場しました。

MacでWindowsを動かして、IEの画面確認をしたい・・・と思った時、
選択肢は、いくつかありますね、たとえば・・・

• VirtualBoxにwindowsをインストールする
• bootcampにwindowsをインストールする
• Parallels Desktopにwindowsをインストールする
• VMware Fusionにwindowsをインストールする

費用でいうと、上から順に安く使えますし、お手軽さでいうと、VirtualBox以外がおすすめです。

【VirtualBoxとは】
マシンを仮想化してくれるOracle製フリーソフトで、無料で使用できます。マクロソフトがIEの検証用に無料で配布している Modern.IE を使用すれば、Windowsのライセンスが無くても90日間は無料で利用が可能です。

【bootcampとは】
Macに標準でついている仮想化のツール。bootcampは無料ですが、Windowsのライセンスは必要です。

【ParallelsとFusionとは】
市販されている仮想化ソフトです。7000円程度〜1万円程度で購入し、Windowsのライセンスも必要です。

実際に使うとなると、どれか1つに絞らなければなりません。
bootcampとParallelsを両方インストールして、同時に使う場合、Windowsのライセンスも2つ必要になるからです。
（もちろん、2つぶんの予算があるなら、いいんですが）

WEBデザイナーにはParallelsのCoherence機能が便利

WEBやグラフィックの作業を行い、IE7〜最新までのブラウザチェックなどを行うなら、VirtualBoxか、市販されている仮想化ソフトがおすすめです。
bootcampはMacとWindowsの同時使用ができないので、作業の手を止めてしまいます。

予算が許すなら、VirtualBoxよりも、サクサク動く、市販されている仮想化ソフトを使うことをおすすめしますが、
Parallels DesktopとVMware Fusionなら、どちらを使うのがよいのでしょう？？？

ネットには、いろいろな使用の感想や、動作チェックなどの情報があふれていますので、個人の感覚や使う目的などで選ぶとよいと思います。

参考記事：
TekRevue、Mac用仮想化アプリParallels Desktop 11, VMware Fusion 8, VirtualBox 5でWindows 10を利用した時の比較ベンチマークの結果を公開。

基本的にはMacで仕事をしつつ、ブラウザの確認の際に、Windowsでファイルを開きたいという作業の仕方をするのですが、そのときに、ParallelsのCoherence機能（Windowsのデスクトップを開かず、今開いているアプリだけで作業ができる）がとっても便利でした。

MacとWindowsを行ったり来たりしながら、ファイルもドラッグ＆ドロップで開けますし、文章のコピー＆ペーストなども、特別な設定が要りません。また、OSXのQuick Lookがそのまま使えます。

Parallels DesktopのCoherence機能とは

MacとWindowsをまるで1つの、ワークスペースで動いているかのようにできる機能です。Macの場合、インストール直後は、このCoherence表示になっています。

公式サイトの説明
http://download.parallels.com/desktop/v7/update3/docs/ja/Parallels%20Desktop%20User's%20Guide/32835.htm

Macで作業中に、動作を確認したいHTMLファイルがあったら、WindowsのIEのアイコンにドラッグ＆ドロップするだけ

キャプチャー画像の環境は、Parallels Desktop 11 for MacとWindows10です。
今回は、ParallelsをMacにインストールしたり、Windowsを入れたりする手順は割愛いたします。

Coherence モードを終了するには

Macの場合は、インストールするだけで、表示はCoherenceモードになっています。これを変更したい場合は、メニューから「表示」とすすみ「Coherenceの終了」をクリックします。

投稿WEBデザイナーがMacでWindowsを使う時、Parallelsの「Coherence機能」が便利！はTaniweb制作の最初に登場しました。

Photoshopから画像を書き出す方法はいくつかありますが、スライスして書き出すよりも、もっと楽でスピーディーに作業ができるレイヤーで書き出しという機能がとっても便利です。

書き出しの際に、背景を透過させることも、透明ピクセルをトリミングすることもでき、表示されているレイヤーだけを書き出すこともできますので、パーツ毎に書き出し分けも可能です。

まず、このようなPSDファイルがあるとします。

手順1

書き出したいレイヤーごとに分ける

Photoshopのレイヤーで書き出し機能は、「レイヤー毎に」書き出しますので、書き出したいと思うレイヤーに分けておく必要があります。
背景を透明にしたい場合は、透過のままにしておいてください。

レイヤー名を出力後のファイル名に

レイヤーで書き出し機能を使った場合のファイル名は、Photoshopのルールに基づいて自動で付与されます。
ファイルの先頭文字_連番_レイヤー名となっていますので、レイヤー名を自分の都合のよいファイル名に変更しておきましょう。この時、画像アセットの生成と異なり、拡張子を付けて置く必要はありません。

出力する

メニューバーから、「書き出し」を選び「レイヤーからファイルを書き出し」へ進んでください。

その後、書き出して保存する保存先の設定や、ファイル形式、ファイルの先頭文字などを設定してください。

png画像の場合、背景を透過させることもできます。レイヤーをトリミングにチェックを入れれば、書き出す際に、透明ピクセルをトリミングしてくれます。

ファイルを確認して完了！

出力先に登録したフォルダには、レイヤー数分の出力画像が格納されていれば、出力完了です！

ファイル名の連番を消したい時は、この方法で連番を削除することができます。

拡張子を変えたい時など

レイヤーで書き出し機能は、表示されているレイヤーだけを書き出すということが可能です。
表示されているレイヤーだけのところにチェックを入れて、それぞれの拡張子ごとに出力を分けましょう。

また、同じく、表示されているレイヤーだけを出力する機能を使って、
ファイルの先頭文字を変更すればheader_*****.png や　footer_*****.pngなど、整理しやすい名前を自動で付けることができます。

投稿PhotoshopCC レイヤーで書き出し 機能を使ってみようはTaniweb制作の最初に登場しました。

連番を付けたいという悩みがある一方で、連番を消したいという時もありますね。

たとえば、連番が付いた画像を、たくさん受け取ったけど、連番を消したい。

PhotoshopCCのレイヤーで書き出し機能を使って画像を作成したら・・・・Photoshopが勝手に連番を付けて出力してしまった！
連番が余計だなあ。。。。と思う。

この連番を、手作業で消すなんて、絶対にいやです！

そんな時には、連番を付ける時によく使うリネームソフトを活用して、「連番を消す」という作業を、あっという間に終わらせてしまいましょう。

手順

まず、今回は、上の画像についているの連番を消してみたいと思います。
たとえば、「common_0002_top_flower.png」となっているものを、「common_top_flower.png」という形にしたいです。

正規表現が使えるリネームソフトを用意する

特定の文字を削除したり、追加したり、連番を振ったりする場合に使う、リネームソフトを準備してください。必ず「正規表現」が使えるものにしてください。
Macに標準で付いている「Automator」は作業を自動化するのに便利なのですが、正規表現を使うにはAppleスクリプトなどが必要なので、お気軽ではありません。

Windowsの方は、Vectorなどで「ファイル名変更」で検索してみてください。
http://www.vector.co.jp/vpack/filearea/win/util/file/name/

ここでは、[NameChanger]というソフトを使用します。Mac用のフリーソフトです。

ソフトを起動させて、ファイルを追加

ここでは、NameChangerを使いますので、まず、起動させます。
ソフトが立ち上がったら、変換するファイルをドラッグ＆ドロップで追加します。

[Regular Expression]を選択

設定を変えるドロップメニューのところで、[Regular Expression]（正規表現）を使った置換を選択してください。

[\d]を記入

Originaltextの入力欄に「\d」と入力します。Newtextの入力欄は「空白」にしてください。すると数字が消えたファイル名が、右側のプレビュー画面に表示されると思います。

そして[Rename]の実行ボタンを押します。

数字が消えました！
実は、[\d]というのは、正規表現で「半角数字」を表しますので、「半角数字」を「何もない」状態に置換する作業を行ったのでした、その結果、連番が消えたのです。

• 参考サイト　正規表現　（Wikipedia）　https://ja.wikipedia.org/wiki/%E6%AD%A3%E8%A6%8F%E8%A1%A8%E7%8F%BE

連番が消えた！次は、文字の置換

連番が消えて、数字がなくなりました！

しかし、、
「common_0002_top_flower.png」　が、　「common__top_flower.png」となって、
アンダースコア（_）が2回続いている箇所が、不要だと思います。

今度は、正規表現を使わなくてもできますので、文字の置換を使って、「__」(アンダースコアが2回）　を　　　「_」(アンダースコアが1回）に変換します。

まず、

設定を変えるドロップメニューのところで、[Replace First Occurrence]（最初の文字を置換する）を選択してください。
Originaltextの入力欄に「__」(アンダースコアが2回）と入力します。Newtextの入力欄に「_」(アンダースコアが1回）と入力します。

すると置換されたファイル名が、右側のプレビュー画面に表示されると思います。

このまま[Rename]の実行ボタンを押すと、文字が置換されて、「__」(アンダースコアが2回）　を　　　「_」(アンダースコアが1回）に変わります。

同じようにして、「common_-Beautiful_Sunday.png」のBeautifulの前にある「‐」（ハイフン）も消すことができます。

完成！あっという間に連番が消えました

これで完成です！
あっという間に連番が消えて、ファイル名もすっきり、きれいになりましたね。

NameChangerは公式サイトから入手してください。フリーソフトです。　
https://mrrsoftware.com/namechanger/　（Macのみ）

投稿連番を消したい – 画像に自動で振られている001,002という連番をリネームソフトで削除する方法はTaniweb制作の最初に登場しました。