はてなブックマーク

なにやらChromeに見慣れないアイコンがあると思ったら、Emmet LiveStyle がアップデートされていました。2年以上Beta版のまま更新もなかったのが、突然の1.0リリース…！ アップデートにより SCSS, LESS にも対応や、リモートビュー機能の追加などをしています。 使い方が少し変わったので、ざっくりまとめました。 LiveStyle. The first bi-directional real-time edit tool for CSS, LESS and SCSS. http://livestyle.io/ Emmet LiveStyleは、HTML,CSSの記述を省略できるEmmetとは関係なく、Sublime TextとChromeで双方向の同期編集ができるプラグインです。 以下、動画で動作を確認できます。 使用方法 まずはLiveStyleアプリケーションの

この記事は 俺のメニューバー Advent Calendar 2015 25日目の記事です。 俺のメニューバーアドベントカレンダーも最終日になりました。メリークリスマス💪🎅 この24日間で紹介したアプリを振り返り ＋ 書くまでもなかった定番アプリ、紹介できなかったアプリやネタアプリなども含め、ジャンル別に俺のメニューバーをここに総決算しますメリークリスマス💪🎅 追記：44選って中途半端なので50選に加筆しました。（2015.12.25 19時頃） 俺のメニューバーとは http://togetter.com/li/910188 そもそも「俺のメニューバー」とは、Stocker.jp のなつきさんと会話していて、メニューバーを晒したら、色んな人に笑われたんですが、どれも便利で消せるものがないので、じゃあそれでアドベントカレンダーで毎日アプリを紹介してみようとノリで始めた、ひとりアドベ

この記事は 俺のメニューバー Advent Calendar 2015 24日目の記事です。 ExpanDriveがあると、様々なクラウドストレージやサーバーを外部ドライブとしてマウントすることができます。 AWS や SFTP をドライブしたり、同期させるほどでもないストレージサービスを、一時的に接続する場合にも使えます。俺は Google ドライブと Dropbox のサブアカウントで使っています。 ExpanDrive – Network Drive for the Cloud ExpanDrive – Network Drive for SFTP, Dropbox, Google Drive, S3, OneDrive, Box.com and more | ExpanDrive for Mac & Windows 対応サービス ExpanDrive creates a virtu

この記事は 俺のメニューバー Advent Calendar 2015 23日目の記事です。 集中力を保つためにポモドーロ・テクニックを使っています。沢山出ているポモドーロアプリを色々と試したのですが、ベーシックなタイマーとタスク機能が使える Pomodoro Time を使っています。 ポモドーロ・テクニックとは ポモドーロは、時間を決めることで集中力を持続させ、生産性を高める時間管理術です。 集中力散漫な俺を強制的に作業に注力させるために、有効な手段だと思っています。 手順 25分を1ポモドーロとし、やるべきタスクを1ポモドーロ刻み（25分毎）に分ける。 25分間は、他の事は一切やらず、タスクに集中する 25分経てば、5分間の休憩を入れる 4ポモドーロ毎（2時間毎）に30分程の長い休憩をとる 後は上記を繰り返す Hatena Keywordより 内容はこのようにシンプルで、基本25分や

この記事は 俺のメニューバー Advent Calendar 2015 22日目の記事です。 デザインやコーディングしていると画面に定規あてて測りたいとき時ありませんか？俺はよくあります。 そんな時 xScope があれば画面上に定規を表示できます。他にもガイドを引けたり、iPhoneなどのサイズの枠を置けたり、画面をiPhoneにミラーリングしたりと便利な機能満載のツール集になってます。 RulersとDimensionsで計測 A powerful set of tools that are ideal for measuring xScope 4 カテゴリ: 開発ツール 現在の価格: ￥6,000 機能紹介 xScope は10個のツールが入っているツール集です。 公式サイトより Mirror：iPhoneに画面をミラーリング（iOSアプリが別途必要） Text：フォントのプレビュー

この記事は 俺のメニューバー Advent Calendar 2015 21日目の記事です。 App Tamerがあると、バックグラウンド時のプロセスの動作を制御することができ、アクティブ動作のアプリの高速化や、バッテリーの消費を抑えることができます。 App Tamer tames applications that are chewing up excessive CPU time and battery life on your Mac. App Tamer – St. Clair Software Default Folder Xでも紹介した St. Clair Software 社製のアプリケーションです。 使用方法 ヘルプより メニューバーアイコンで数値（％）の表示や、アイコンの色でCPU使用率を確認できます。 ウィンドウからCPU使用のグラフを確認できます。 App Tame

この記事は 俺のメニューバー Advent Calendar 2015 20日目の記事です。 基本的に無操作時はスリープして欲しいですが、特定のアプリケーションが起動中だけスリープにしたくない時は Wimoweh が便利です。 また、ディスプレイを閉じた時にスリープさせない NoSleep も紹介します。 アプリケーションでスリープを指定できるWimoweh The Most Advanced Power Manager For Your Mac Wimoweh カテゴリ: ユーティリティ 現在の価格: ￥120 使用方法 公式サイトより 「Current Processes」でアプリケーション別にスリープしたくないものに「Never Sleep (Stay Awake)」をチェックします。 ディスプレイはスリープしたい場合は「Display Sleep」にチェックします。 特定のネットワ

この記事は 俺のメニューバー Advent Calendar 2015 19日目の記事です。 MacBookなどラップトップをサブモニタに繋ぐ時、逆にサブモニタを外す時に、アプリケーションのウィンドウの位置を毎回移動し直すのが面倒でした。Display Maidがあればウィンドウの配置を記憶し、復元してくれます。 save and restore window layouts Display Maid カテゴリ: ユーティリティ 現在の価格: ￥720 使用方法 App Storeより 基本的にはメニューバーに常駐させておくだけです。 本家サイトより 「Options > Auto Restore」にチェックすれば、モニタの再接続時にウィンドウ配置を復元してくれます。 アプリケーション別に保存・復元をすることができます。 まとめ ディアルモニタ時は、左画面にターミナルやメーラー、右画面にA

この記事は 俺のメニューバー Advent Calendar 2015 18日目の記事です。 Unclutterは、メニューバー上からジャスチャーで引き下げて呼び出せる便利な引き出しです。 クリップボード・ファイル・ノートを置いておくことができます。 Unclutter is a new handy place on your desktop for storing notes, files and pasteboard clips. Unclutter カテゴリ: ユーティリティ 現在の価格: ￥240 現在「2015’s best Two Dollar Tuesday」というセール中で66%オフだそうです。 使用方法 公式サイトより 起動してメニューバー上から、二本指ジェスチャーで引き下げるとUnclutterウィンドウが降りてきます。 公式サイトより 3つのパネルが並んで現れます。

この記事は 俺のメニューバー Advent Calendar 2015 16日目の記事です。 Default Folder Xは、開く・保存の際には無くてはならないマストなアプリです。 こんな素晴らしいDefault Folder Xを貰える私はきっと特別な存在なのだと感じました。 今では私がおじいさん、孫にあげるのはもちろんDefault Folder X。なぜなら、彼もまた特別な存在だからです。 楽にファイルを保存する。素早くフォルダを開ける。 Default Folder X – St. Clair Software 楽にファイルを保存する。素早くフォルダを開ける。− Default Folder X は Mac OS X のファイルダイアログの動作を素早いものにします。お好きなキーボードショートカットをよく使うフォルダや最近使ったフォルダに割り当てることができます。ポップアップメニ

この記事は 俺のメニューバー Advent Calendar 2015 12日目の記事です。 簡単な動画を見せたい時、デスクトップの動画スクリーンショットを、Gifアニメで撮りたい時あります。無料で高機能でオススメなのが「GifGrabber」です。 GifGrabber – Simple software for animated gifs GifGrabber カテゴリ: ビデオ 現在の価格: 無料 いままではLICEcapやRecorditを使っていたのですが、Trimなど細かい設定ができて、ローカルで使えるGifGrabberが一番使いやすいと思えました。アイコンは謎ですけど。 使用方法 起動すると透過した緑のキャプチャエリアが、表示されます。 右下をつかんでサイズ変更できます。 上部の赤い「Start Capture」は撮影開始・停止。左上は最小化。 ⌘＋Shift+Sで撮影開始

この記事は 俺のメニューバー Advent Calendar 2015 10日目の記事です。 色々とコードスニペットツールを使ってきましたが、やっとしっくりくるコードスニペットツールに出会えました。俺、SnippetsLabでいくわ。 Stop reinventing the wheel – be more productive with SnippetsLab. インストール インストールはApp Storeから。 SnippetsLab カテゴリ: 開発ツール 現在の価格: ￥1,200 使用方法 俺は、メインウィンドウから登録し、メニューバーのアイコンより検索・コピーして使用。という感じで使っています。 ネットも必要なく、単体で動作し、つねにメニューバーからアクセスできるのが、結局一番使いやすいと思いました。 メニューバー メニューバーのアイコンよりいつでも検索・登録ができます。 公

この記事は 俺のメニューバー Advent Calendar 2015 7日目の記事です。 コピーした際、クリップボードの文章がプレーンテキストになっていて欲しい時ってあります。でも、つねにプレーンは、ちと困る。 TextScrubがあれば、任意のタイミングでクリップボードをプレーンテキストに変換できます。 ショートカットでクリップボードをプレーンテキストに App Storeより クリップボードのフォーマットをプレーンにするアプリとして、定番の「FormatMatch」などがありますが、FormatMatchは常時、フォーマットをプレーンにしてしまいます。でもフォーマットを保っていてほしい時もある。 TextScrubは設定したショートカットキーを押した時のみ、クリップボードをプレーンにできるので、必要な時のみプレーンテキストにすることができます。 TextScrub｜Clean you

この記事は 俺のメニューバー Advent Calendar 2015 6日目の記事です。 VagrantをGUIで操作できる「Vagrant Manager」があると、毎回ターミナルから操作しなくていいので楽です。 Manage your vagrant machines in one place with Vagrant Manager Vagrant Manager – Home Fall in love with Vagrant Manager. Never before has managing your Vagrant Machines been so easy. インストール 公式サイトからダウンロードか、Caskでインストールできます。 $ brew cask install vagrant-manager 操作方法 Mac内のVagrantマシンを自動でスキャンして表示し

この記事は 俺のメニューバー Advent Calendar 2015 4日目の記事です。 MacBookやワイヤレスキーボードだけど、テンキーが欲しいって時が年に１回くらいあります。確定申告とかで。 そんな時はiPhoneをテンキーにしちゃいましょう。 NumPad Remote NumPad Remote | Mediaware NumPadはiPhoneをMacのテンキーにするアプリケーションです。 接続には同じWi-Fiにつながっている必要があります。 設定方法 まず、Macに「Connector」というユーティリティをインストールします。 Connector – Wireless touchpad and numeric pad remote カテゴリ: ユーティリティ 現在の価格: 無料 Connectorには特に設定はないので起動するだけ。 次に、iPhoneに「NumPad

この記事は 俺のメニューバー Advent Calendar 2015 3日目の記事です。 ヘッドホンをしているのにスピーカーから音楽が流れて恥ずかしかったことありませんか？ 俺はよくやります。 そんな時Headphonedがあれば未然に防げるかもしれません。 音声出力先がわかりづらい 最近、パロットZikというヘッドホンを買いました。 ワイヤレスでノイズキャンセリングでめっちゃ気にいっているんですが、一点問題があります。 Macは音声の出力先をBluetooth変えてもわかりづらいのです。 この間も気付かないうちに、ヘッドフォンの電源が切れていてやってしまいました。 ヘッドホンで音小さいなーって音量上げてたらスピーカーから爆音で鳴ってた in オフィス — sou-lab (@sou_lab) November 27, 2015 ノイズキャンセリングがゆえ、相当の大音量を流してしまいまし

この記事は 俺のメニューバー Advent Calendar 2015 2日目の記事です。 アプリやフォルダ別にちょっとしたメモを残しておきたい時ありますよね？ あまりないですか？でも使ってみると便利なんです。 アプリ別に切り替わる付箋 付箋アプリは純正のスティッキーズなど色々ありますが、Ghostnoteはアプリやファイルによって自動で切り替わって便利です。 Ghostnote | Contextual Notes Todo For Your Mac 設定 設定は特になく、インストールすれば自動で切り替わります。 アプリによって色を変えることができます。 メニューバーにくっつけることも、好きな場所に置くこともできます。 最前面にフロートして、アクティブ時以外は半透明にすることもできます。 使用方法 メモしたいアプリをアクティブにして書くだけです。 フォルダやファイルにメモ Slackにメ

この記事は 俺のメニューバー Advent Calendar 2015 1日目の記事です。 常駐アプリのアイコンが多すぎると笑われるので、収納できると便利です。 俺は、常駐アプリが笑われるくらい多いので、このようにメニューバーが大変なことになります。 そんな時、Bartenderがあればアイコンを収納することができます。 Bartender for your Menu Bar 操作 「…」を押すと収納したタスクメニューが現れます。 収納されたアプリメニューもいままで通り使えます。 なんということでしょう。あんなに長かったメニューバーが半分になりました。（でも長い） ⌘を押しながらメニューバーアイコンを個別に移動できるようになるのも便利です。 （以前はOSXデフォルトの機能で出来た気がしたが今できなくなってません？） Bartenderに収納したボックス自体も移動することができます。 また、

デザリングなど使用量に制限があるネットワークを使う時、うっかりDropboxやGoogleドライブなどのオンラインストレージを起動していると、あっさり3日1Gに到達して激遅の通信規制が辛い時があります。 そんな時、Little Snitchというネットワーク監視アプリケーションを使うと簡単にテザリング時に特定アプリケーションの通信を遮断することができます。 Little Snitch 3 – Objective Development Little Snitchはネットワークを監視し、通信しようとするプロセスを表示し許可するかしないかを設定できるアプリケーションです。 それだけではセキュリティソフトとあまり変わりがなさそうですが、「Profile」を設定することでネットワークごとに通信させるアプリケーションを設定できます。 これを使いテザリング時にはオンラインストレージのプロセスを遮断させ

この記事は Sublime Text Advent Calendar 2014 1日目の記事です。 いまだDreamwaverから離れられないコーダーさんに伝えたい「それ、Sublime Textでもできるよ。」という機能を紹介します。 パッケージの機能追加については言わずもがなPackage Controlから拡張してください。 コードヒント Emmet (Package) Dreamwaverではプロパティ補完→値補完という流れになりますが、「Emmet」パッケージを入れることで［プロパティ:値］をワンセットで補完することができます。Fuzzy Searchという機能で、よしなに補完してくれます。 DreamwaverでもEmmetの拡張はありますがコード展開だけですね。 コードヒントも「sublime-snippet」ファイルというテンプレートファイルで簡単に追加・管理することができ

本日、2014年3月20日に「Web制作者のためのSublime Textの教科書」が発売になりました。 Web制作者のための教科書シリーズ第２弾です！ 前作のWeb制作者のためのSassの教科書からご縁があり、今回も執筆に参加させていただきました。 Kindle版も同時に発売になりました。ちょっと安いです。こちらも一緒にぜひ！ 本書は、上野正大さん、杉本 淳さん、前川昌幸さん、（五十音順）と私の４名で執筆しました。 そしてSublime Textのエバンジェリストと言っても過言ではない、こもりまさあきさんが監修しております。 私以外の執筆・監修の皆さまの守備範囲が異常に広いので、デザイナからフロントエンドエンジニア、プログラマまで読める内容となっていると思います。 もちろん全員がSublime Textを常日頃から愛用しており、現場で使える機能やパッケージ、小ネタなどを紹介おります。 本

Aiが落ちたー！Psが落ちたー！Fwが落ちたー！なんてタイムラインであるあるすぎて、もはや誰も反応してくれない風景ですが、ForeverSaveがあれば救われるかもしれません。 自分の周りは案外知らない人が多かったんで紹介します。 ForeverSave 2 ForeverSave 2 – Overview – Tool Force Software Tool Force Softwareのシェアウェアで現在の価格は$19.95 USD。ちょっとお高いと思うかもしれませんが、もしも数時間分の作業が吹っ飛んだら、$20払ってでも復元したいですよね？ MacUpdateであと２日くらいは半額セールで$9.95だそうです。  [終了しました。] ※Mac App Storeのリンクが本家サイトから無くなっているので、もしかしたらMac App Storeはもう更新しないのかもしれません。すでに2

マカーお馴染みの高機能GUIコンパイラー Codekit がバージョン2になり、色々刷新されました。 いきなり新バージョンがリリースされたんでびっくりです。とりあえず買ってみたんで全部機能試してはいないですが、ひと通り触ってみた感想をつらつらと。 Codekitとは CodeKit: THE Mac App For Web Developers CodekitとはMac専用のGUIコンパイラーのアプリのことで、SassやらLessやらCompassやらこーひーすくりぷとやらをコンパイルしてくれたり、ブラウザをオートリロードしてくれたり、画像最適化してくれたりと、黒い画面が苦手な方安心◎のコーディングお助けツールです。 2でさらにビルトインサーバーやアセットなど機能が追加してパワーアップ。 Codekitを知らない人は、このまぼろしの木村さん西畑さんのスライド見れば全てわかります。 CSS

みんな大好きMacのランチャーの定番Alfred。 WorkFlowを作ったけど、もっと便利なものが既にあったので紹介します。 Alfredとは Alfred App – Productivity App for Mac OS X もはや説明不要なMac用のランチャーです。 アプリの起動やファイルの検索など、Alt+Space押しとけば何とかしてくれるやつです。 ぼくたちは、Alfredひげメガネ芸人です！ — SOU (@sou_lab) 2014, 2月 19 Alfredひげメガネ芸人のみんなから熱いRT（少） Alfred Workflowが便利 無料版でもアプリの起動やファイルの検索など充分便利なのですが、お布施をすると更に便利な機能が開放され、iTunesやクリップボード履歴やターミナルの操作ができるようになります。 そして、Workflowという機能も開放されるんですが、これ

日付では本日発売となりました「Web制作者のためのSassの教科書」。 もう書店に並んだり、Amazonで届いたって声をちらほら聞いております。ありがとうございます。 なぜか自分で注文したAmazonは明日到着のメールが。。モンハンと一緒に発送されたのかも(´・ω・`) さて、共著させていただいた平澤さんが「Sassの教科書で一番読んで欲しいところ。」というエントリーを書かれて、この記事も是非読んでほしいのですが、その後の章も読んでほしいのところがあるので、再度宣伝エントリーです。すみません。 Amazon以外（楽天ブックスなど）のリンクは本書サポートサイトにのっております！ Compassの章 第6章 Sassをさらに便利にするCompass 6-1 Compassを利用する準備 Compass って何？ Compass のインストール プロジェクトを作成する config.rb の設定