Brackets使い方のコツTweetPocketこんにちは、デザイナーのいしかわです。Brackets愛好家です。Bracketsの便利な機能や知っておきたいバグ、コーディングするうえでのちょっとしたコツなどをまとめてみたいと思います。BracketsとはまずExtractについておさらいです。Cloudが提供する、PSDカンプからコードを抽出するためのワークフローを強化する機能のことをいいます。Cloudを使って、PhotoshopとBracketsやDreamWeaverを連携し、よりコーディングしやすい環境を整えるものになります。Cloudのアカウント(無償メンバーシップでも可)が必要です。Bracketsの使い方のコツExtractをBracketsで使用する場合にしっておきたいバグや使い方のコツをいくつかご紹介します。私はWindowsとmac両方で使っており、下記はWindows版での説明となりますが、内容はほぼ共通していると思います。Cloudアセットとうまく接続できないことがあるExtractをBracketsで使う際にはまず右サイドバーのアイコンをクリックします。アセットが表示され、PSDファイルがアップロード出来る状態になるのですが、結構頻繁に、表示がうまくいかなかったり(ファイルの読み込みに失敗)、アイコンをクリックしても全く反応がなかったりします。Cloudのアカウントをログインし直したりすることで直る場合もありますが、最悪の場合、PC自体を再起動するしかなかったりしますので、諦めずに色々試してみてください。使用中にも急に落ちたり、固まったりすることがあるので、こまめに保存することをおすすめします。アセットへアップロードしているPSDファイルが多ければ多いほど(置いているファイルサイズが大きいほど)不安定になるような気がします。動きがおかしいなと思ったら、いらないファイルを削除するとうまくいくかもしれません。アセットへアップロードする必要があります。PSDでのデザインファイルとなると100MBを超えるものは普通にあると思いますが、そのようなサイズの大きなファイルのアセットへのアップロードにはかなりの時間を要します。そのため、画像の準備など他の作業を行っている間に、先にアップロードをしておくことでスムーズにコーディングに移行できます。Cloudアプリから移動できる)への配置でも可能です。厳密に測ったことはありませんが、それぞれそこまでアップロードの速度に違いはないと思います。回線速度が遅い環境や、急いでいる時などには、作業が少量であればPhotoshopで開いた方が早いかもしれません。アセットへアップロードしている時に、そのファイルを編集しても同じ名前で保存することができません。保存しようとすると下のようなアラートが表示されます。「◯◯.psdを保存できません。必要なアクセス権限がないか、他のプログラムでファイルを使用しているため、ファイルがロックされています。Windowsエクスプローラーの『プロパティ』コマンドを使って、ファイルのロックを解除してください。」アップロード中なので「他のプログラムでファイルを使用している」状態になるんですね。時間がかかるからと先にアップロードして、同じファイルで画像書き出しなどの編集作業をやっていると、ついついこういう状態になってしまいます。削除することもできません。編集後のファイルを保存したい時は別名で保存しましょう。Bracketsは基本的に日本語対応しているんですが、対応していない機能が一部あります。これは一年以上前からフォーラムでも話題に上がっているようですが、改善される目処が今のところないようです。アセットにアップロードはできるんですが、いざファイルをクリックしてExtract機能で表示させようとしても何も表示されません。Photoshopのファイルを日本語名にすることはあまりないとは思いますが、日本語名のファイルが支給された場合はアルファベットに変換してアップロードするようにしましょう。日本語のテキストはPSDから抽出できないこちらも日本語に関するバグです。Bracketsでは、テキストレイヤーで作成されたテキストはコピーできるというものすごい便利な機能があるのですが、これが日本語だと文字化けしてしまって使用することができません。これは個人的にものすごく残念なポイントです。これも以前より改善されることが期待されていますが、今のところ変化なしです。テキストレイヤーの量が多い場合にはPhotoshopのテキスト抽出プラグインなどを活用するとよいと思います。ちなみに私はPS_BRAMUS.TExtExportを使っています。要素の位置の基準となる場所をあらかじめ設定しておくExtractには要素間の距離や位置、サイズを表示してくれるという、これまた便利な機能があります。これまでは矩形ツールでいちいち測ったり、PhotoshopCCになってからもCtrlを押しながら...なんてことをして測ったりしていましたので、これがテキストエディタと同じ画面で、簡単なクリック操作でできるようになって、かなりの作業時間の短縮になりました。この機能を最大限に活かすには、要素の位置の基準となる場所をはっきりしておく必要があります。いうのも、Extractで距離や位置を測定する際、例えば、ある要素が左から何px離れているか、というような数値が知りたい場合は、その基準となる場所が必要で、特に基準となるレイヤーを選択しない場合は、PSDのカンバス自体を基準とすることになるからです。要素のサイズは表示形式をpxと%で切り替えて表示できるようになっていますが、%の場合はPSDのカンバスのサイズを100%とした時の数値になるので注意が必要です。%での表示はレスポンシブ対応などで特に助かります。上記のPSDのように、元々メインコンテンツの幅で作られているデザインファイルであれば問題ないのですが、幅に少し余裕を持って作られているファイルの場合は、コーディングするメインエリアの幅に合わせて別途基準となるレイヤーを追加した方が、距離や位置の測定がスムーズになります。下記のPSDファイルの場合、カンバスサイズ(1600px)よりも実際にコーディングするメインエリアの幅(1280px)が狭いため、両サイドの黄色の部分を基準となるレイヤー(レイヤー間の距離1280px)として追加しています。することで基準となるレイヤーと特定のレイヤーをを2点選択して、その距離を測定できるようになり、正確な位置を特定することができます。他の作業に差し支えなければ、カンバスサイズ自体を変更していらない部分を削除してしまってもOKです。Bracketsでは自動的に画像パスの候補を表示してくれるアシスト機能があります。使い始めた当初、これが出る時と出ない時があってどうやったら表示できるのか分からずかなり困っていたんですが、レイヤー選択を解除すれば良い、という単純な解決方法でした。いうことになるかというと、レイヤーを選択したままimgタグを入力しようとすると、imgパスの補完機能よりも先に「アセットを抽出」機能が働いてしまうからです。これはこれで便利なんですが、すでに画像は用意していて、「アセットを抽出」機能は使わない場合は邪魔になるというわけです。そのため、レイヤーの選択状態を余白をクリックするなどして解除しておく必要があります。クリックするなどして縮小する必要がありちょっと面倒です。Bracketsには、PSDからフォントに関わる情報を自動的に抽出する機能があります。便利な機能なのにその値が違っていることがよくあります。例として、下記のような3つのテキストレイヤーからなるサンプルPSDファイルを作成しました。次に、このPSDからBracketsでフォントスタイルを抽出しました。抽出する方法は対象となるテキストレイヤーを選択した状態でco、fなど頭文字を入れると、自動的に候補が出てきます。この機能を利用してスタイルを入力すると下記のような結果になりました。sample01:カラーコードが#0c9b89と若干違っているsample02:特に問題なしsample03:フォントサイズが変形前の30pxのままになっているこのようにかなりあてにならないので、厳密なスタイル設定が必要な場合にはこの機能は使わないことにしています。したらこれも日本語に起因するバグなのかもしれません。Bracketsを使う価値があると思っています。今後の改善に期待しつつ、既知のバグとうまく付き合いながら利用していけるといいですね。バグが改善されたり、よい使い方を見つけた時にはまたレポートしたいと思います。BracketsでPSDファイルが表示できなくなってしまいました!何度試しても下記のように「フォルダーfilesを表示する際にエラーが発生しました。CreativeCloudとの連携がうまくいってないのかなと思い、ヘルプ>ログアウトからサインインし直してもダメ...「インターネット接続がありません」という感じの意味不明のエラーが出たりします。たまらずAdobeのチャットサポートに連絡するも「チャットサポート対象外」として対応してもらえず、Adobeジャパンフォーラムへの投稿を案内されました。投稿を見てみると他にも同じ現象で困ってる人がいる模様。回答はついておらず...。こんなに便利なのに、実はBracketsあまり使われてないんでしょうか??この解決方法を探している間に、実はExtract一旦は開発終了したということを知って驚きました!でも、ユーザーからの要望ですぐに開発再開したみたいです。結局、根本的な解決方法は分からないまま、1.7に戻す(一度削除して再インストール)ことにより応急処置しました...。いう名称でWebからも使えるようです。アセットからPSDファイルを選択し、Extractタブをクリックすると表示されます。表示するのに800px必要、サイドバーやヘッダなど不要な情報を非表示にできない、など不便な点はあるものの、Extractそのものの機能は問題なく使えるようです。CCにはBracketsが組み込まれているということで、これによりBrackets自体の開発が進まなくなるとかなんとかという噂もあるようなので、Dreamweaverからは数年も離れていましたが、もう一度試してみたいと思います。やって一歩ずつ、こつこつとコーディングする時代の終わりに近づいていくんですね。Bracketsがついに使えなくなりました久々にBrackets(1.7)を起動したところ何度もクラッシュしたため、おかしいな...と思いつつも再インストールしてみました。Bracketsが終了を迎えたようです。嫌だ...DreamweaverCCを使わなきゃいけないなんて。Extractが使えなくても一応便利機能は色々とあるのでいいんですが、、使う理由の半分以上を一気に失ってしまいました。仕方がないので、DreamweaverCC使ってみようと思います。Businessプランで試すべき5つの機能(4):カレンダーTweetPocketその他SNSでもご購読できます。TwitterでフォローするFeedlyでフォローするいしかわモバイルフレンドリーラボのWebデザイナー兼ディレクターです。初心者にも分かりやすい記事を心がけてます。