PhotoArtisan's Storage

AdobeCCについてきたEdge CodeとModern.IEが快適だったため、開発環境を一新しました。

Adobe Edge Codeをインストール

• Adobe Edge Codeをインストール
  Adobe Creative Cloudアカウントが必要ですが、無料メンバーシップでも使えるようです。
• Emmet/Zen Codingをインストール
  html入力をサポートしてくれるプラグインです。
  File＞Extension Manager…を開き、Install from URL…をクリック
  https://github.com/emmetio/brackets-emmet
  を入力
  Edge Codeを再起動するとEmmetメニューが現れます。



• brackets-ftpをインストール
  Edge CodeからFTPが出来るようになります。
  Extension Manager…から、
  https://github.com/theproducer/brackets-ftp
  を入力
  再起動すると、右上に雲アイコンが現れます。
  ここからFTPの設定が出来ます。
  左側ファイルリストで右クリックすると、”Upload File”のメニューが現れます。
  フォルダごとのアップロードと、画像のアップロードが出来ないのが残念…

DropBoxに作業フォルダを作成する
Edge Codeのライブプレビューは便利なのですが、phpの確認は出来ないので、web上に公開しているサーバマシンと同期するため、DropBoxを使用しました。
作業中のファイルをweb上に置いてしまうので、クライアントのサイトを製作する際は、htaccessを設置する等の対策が必要かと思います。

• 作業マシンでDropBox内に作業フォルダを設置
  DropBox内に作業フォルダを作成し、Edge Codeの”Open Folder…”から開きます。
  このときに、フォルダ名を”Public”にすると、DropBoxサーバからもプレビューできます。
• サーバマシンにDropBoxをインストール
  サーバマシンにDropBoxをインストールし、DropBoxフォルダを公開ディレクトリに作成します。
  普段使っているアカウントをweb上に公開する訳にはいかないので、別アカウントを作成し、作業マシンのDropBoxアカウントとフォルダを共有します。

これで、http://(サーバマシンドメイン)/Dropbox/(作業フォルダ名)/　で、プレビューが可能です。
DropBoxの同期を待つために数秒必要なため、完全なライブプレビューではありませんが、phpやssiもプレビュー可能です。

Modern.IEのインストール
macでweb開発をしていると必須となるIEでの動作確認ですが、Modern.IEがとても使い勝手がよく、win機がなくても十分に動作確認が出来るようになりました。
インストール手順を丁寧に説明されたサイトがありましたので、リンクの紹介で割愛致します。
Macでも無料でIE確認するためのModern.IEが想像以上に快適だった