ふと思い立ったので、整理も兼ねて自分が今使っているものをまとめておこうと思いました。
日々、効率化推しでたまには更新したい…
ユーティリティ
Webサービスやアプリなど
Adobe Creative Cloud Extract
Adobe IDだけで使える、個人的にはコーディングの効率化に欠かせないと思っているツール。
要素のサイズ計測、要素間の距離計測、テキスト抽出、フォント情報抽出（フォント、カラー、ウェイト、行間など）、画像書き出し、css抽出（角丸、グラデーション、シャドウなど）…なんかもう、いろいろ。
便利すぎて、初めて使った時は衝撃を受けました。
※構造によっては抽出できない場合も（ラスタライズされているレイヤー、スマートオブジェクト、など）
※css抽出はPhotoshopのプラグインでもできそう
ブラウザでの使用例
- CCインストール時に
/Creative Cloud Filesというフォルダができているのでpsdを格納 - CCアプリで自動同期
- https://assets.adobe.com/files このページにファイルがアップロード
- ファイルを開いて「Extract」タブへ移動
一度サービス終了してしまったのですが、復活しましたね。
それだけ有用なサービスということでしょうか。
復活したAdobe CC Extract! その終了から再開までの経緯 | それいけ！フロントエンド
参考
- Creative Cloud ヘルプ | Extract による PSD から Web への抽出ワークフロー
- HTML／CSSコーディング時間を激減させる「Creative Cloud Extract」と、その真価を引きだすための10のポイント
-
PSDデザインカンプのスライス不要！DreamweaverでのHTML/CSSコーディングを爆速化する方法
DreamweaverやBracketsでも活用
Alfred
https://www.alfredapp.com/
※基本フリー、Buy the Powerpackすると機能拡張
基本はアプリランチャーですが、フリーでも検索、計算、辞書、クリップボード拡張、スニペット登録などいろいろできます。
有料で拡張（＝Workflowを使用）すれば、caniuse検索、色コード変換、エンコード・デコード、翻訳、IPアドレスチェック、短縮URL、ホットキー割当などなど、もっといろいろできます。
公開されているWorkflowを使ったり、自分で作ったりもできます。
Workflows
大体は、検索・一覧表示後にページを開いたりクリップボードにコピー。
| ワークフロー名 | 概要 |
|---|---|
| Evernote 8.991 (Evernote 6.06+ support) | Evernoteのノート検索や作成 |
| willfarrell/alfred-caniuse-workflow | caniuse.com検索 |
| Colors | 色コード、RGB値、HSL値、CSSのカラーネームを変換して一覧表示 |
| yusuga/alfred-codic-workflow | codic (v3)検索 |
| Google Translate Alfred Workflow | Google翻訳 |
| willfarrell/alfred-encode-decode-workflow | HTML/URL/Base64のエンコードとデコード |
| Launch iOS Simulator | Simulatorを起動 |
| What's My IP | Internal IPとExternal IPを表示 |
| blainesch/alfred-chrome-bookmarks | Chromeのブックマーク検索 |
| pxgrid/alfred-codegrid-workflow | CodeGrid記事検索 |
| shawnrice/alfred-2-caffeinate-workflow | Caffeine的なあれ（sleepの制御） |
その他
| アプリ名 | 概要 |
|---|---|
| Forklift（有料） | タブ対応してなかった時代から何年経ってもFinderに慣れないので、個人的に使っている2ペインのファイルマネージャー（FTP機能付き） |
| Karabiner | キーボードカスタマイズツール。個人的には使わない右⌘を⌃に変えたり、キーリピートの速度を変えたりできます。 |
| ImageOptim | 画像最適化ツール（gulpでできますが、サッと使いたい時に）主にpng用 |
| ImageAlpha | 画像最適化ツール（gulpでできますが、サッと使いたい時に）透過png24用 |
Chromeの拡張機能
※update 2016/08/02
7つ追加（うち、4つはTrelloの拡張）※タスク管理ツールをTrelloに移行中
| 拡張機能名 | 概要 |
|---|---|
| AMP Validator | AMPのバリデート ※add 2016/08/02 |
| ato-ichinen | Activeにしている間、Google検索結果を1年以内のものに限定 ※add 2016/08/02 |
| Awesome Screenshot | ページ全体や一部をキャプチャーし、各種の図形や文字で注釈も ※add 2016/08/02 |
| Card Color Titles for Trello | Trelloのラベルにタイトルを追加 ※add 2016/08/02 |
| Elegantt | Trelloでガントチャート作成 ※add 2016/08/02 |
| GMail to Trello | GmailからTrelloのカードを作成 ※add 2016/08/02 |
| Projects for Trello | Trelloで通常のラベルとは別にラベリングができる ※add 2016/08/02 |
| Validity | アドレスバーのボタンでバリデート |
| HTML5 Outliner | アドレスバーのボタンでアウトライン確認 |
| Pushbullet | デバイス間で各種データを同期 |
| QR-Code Tag Extension | 開いているページのURLにアクセスできるQRコードを自動生成 |
| Falcon Proxy | プロキシの設定と切り替え |
| User-Agent Switcher for Chrome | ユーザーエージェントを変更 |
| PrettyPrint | chromeで開いたcssやjsを整形・色分け表示（圧縮されているものは展開） |
| Page Ruler | ルーラー表示 |
| JSONView | jsonの整形表示とバリデート |
| goo.gl URL Shortener | 短縮URLの生成 |
その他
ブックマークレット
- viewportの確認（レスポンシブ）に便利
Responsive design testing tool
最近はChromeのdevice modeでやることが多くなってきましたが…