インプレスさんから、 「Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ」 が2017年9月15日に発売されました。タイトル通りピンクのSass本の改訂版で、前回と同じくの平澤隆さんと共著です。 本書の内容 初版発売から4年、ありがたいことに改訂版のお話をいただきました。 この4年でSassは市民権を得たので、初めてSassを知りたい方も、Sassをすでに利用してる方も、また初版を読んでいる方も読める内容を意識しました。 初版との違い 初版からアップデートされたSassの機能は完全網羅しています。新しい関数や、当時無かった@rootなど。現場で使える具体的な使い方なども5章で解説しています。 また、Sassの環境が大きく変わりましたので2章は全て書き直しました。 初版はRubyでコマンドラインで解説していましたが、改訂版はNode.jsとLi

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

この記事は 俺のメニューバー Advent Calendar 2015 9日目の記事です。 CloudClipがあると、MacとiPhoneでクリップボードを同期でき、調べたい単語や開きたいページのURLなどを同期できて便利です。 Automatically share your clipboard between your Mac and your iOS devices インストール 使い方はMacとiPhoneにインストールするだけです。iCloudで同期するみたいなので同じAppleIDでログインしている必要があります。 Mac版 CloudClip Manager カテゴリ: ユーティリティ 現在の価格: 無料 iPhone版 CloudClip カテゴリ: ユーティリティ 現在の価格: 無料 iPhoneからMacへ 公式サイトより メニューバーにクリップボードが溜まる。クリッ

この記事は 俺のメニューバー 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 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

今年（2013年度）の確定申告が終わったのでその雑記。 今年から経理のフローをfreeeにしたのでその感想など。長文駄文です。御免です。 書籍『世界一ラクにできる確定申告』 まずは、御礼。 男子ハックさんのfreeeの記事のプレゼント企画で、freee本『世界一ラクにできる確定申告』を応募したところ当選しました。 ありがとうございます！そして、すぐに本が届きました。この時期まさにタイムリーで助かりました。 この本はfreeeを使った確定申告の解説本ですが、税金や経理のことがわかりやすく書かれており、freeeを使っていなくても知っておいてタメになることが満載でした。 自分も、古くからの習わしにそってレシートをノリでペタペタ貼っていたのですが、そんなものは必要ないと書かれており目から鱗でした。たしかに全く必要なかった。 同時期にfreeeはiPhoneアプリもリリース、さらに青色申告に必要な

マカーお馴染みの高機能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という機能も開放されるんですが、これ

どうも、ソウラボこと森田壮です。 インプレスジャパンさんから、2013年9月13日発売の 「Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語」 を執筆させていただきました。 CSS HappyLifeの平澤隆さんと共著です。 本書の内容や、見どころを紹介させていただきます。 Amazon以外（楽天ブックスなど）のリンクは本書サポートサイトにのっております！ 本書の内容 はじめに 以下、本書の紹介文です。 Webサイト制作に必須のCSSを、より便利に効率的に書けるようにパワーアップさせた 「Sass」（サス）についての教科書的な解説書が登場！ ・Sassって聞いたことはあるけど、導入が面倒そうという方 ・Sassを始めてみたいと思っているが、今一歩踏み出せない方 ・勉強コストとの天秤に掛けて、Sassのメリットがイマイチ見えてこない方 ・周りでSas

週末にSublimeText2を起動したらパッケージからテーマからおかしなことになってました。 どうやらPackageControlが2.0にアップデートされたのでその影響だと思います。 Twitterを見ていたら、お友達のフォロワーさんもなっていたので、Twitter検索したら私だけではない症状だったので直し方を共有します。 再インストールやパッケージを入れ直したりしなくても直せますので焦らずにー。 エラー画面 ちなみに画面がこんな感じになった。 ブフォォｗｗｗ 終わったンゴｗｗｗｗｗｗｗ 見た目でおかしくなったのがすぐ分かりましたが、その他のパッケージも色々使えなくなってました。 テーマのパッケージがPackageControlのアップデートで更新されたみたいです。 Packageフォルダ見ると、アルファベット順にどんどん更新されている。 直し方 前置きはどうでもいいとして、直し方です

先日、Sass,Less,Coffee対応のアイコンが不気味カワイイGUツールKoalaがバージョン1.4になりました。わりとがっつりパワーアップしたので、また紹介します。Koalaで二回目の記事です。 インストールや基本的な使いかたは前回の記事を参考にしてください。 バージョン1.4の新機能 公式サイトのChangelogを見ると、 Fix bug: version 1.4.0 can’t run. New features: project settings, see the doc here. Compass full supports. Minimize on startup. Press “Esc” key to close the settings and log window. Update Less to version 1.4.0. Update CoffeeScript

タイトルとおりほんとに無料すか？っていうくらい高機能なGUIコンパイラーがPreprosがリリースされました。 CSS HappyLife大明神様よりとても詳しく丁寧に解説してくれるだろうとのフリをうけ筆を走らせている次第でございます。 追記:現在は無料版はなく有料版のみっぽいです (2015.04.05) Preprocessing just got easier with Prepros Prepros 現在バージョンは1.7。Windows版のみリリースされています。 追記:バージョン2.2でMac版も出ました (2013.07.11) Codekitのような高機能GUIコンパイラーがWindowsにもいよいよ登場ですね。 すでに海外の記事では「WindowsのCodekitだぜ！」みたいなことが言われてるとかいないとか。 Preprosの主な機能 Preprosの主な機能として ブ

Macでスクリーンショットを撮るアプリは数多くありますが、 レイヤー構造（PSD形式）を持ってスクショできる機能はちょっと凄いと思いました。 それができるアプリがScreenLayersです。 Softmatic ScreenLayers カテゴリ: グラフィック&デザイン 価格: ￥850 今週まで無料？らしい。 終わりますた。(2013/05/04) 無料化された？っぽいです。(2013/05/06) ￥850になりましたガチしょんぼり沈殿丸。(2013/05/16) ざっくり使い方 使い方はいたってシンプル。 メニューバーから”Capture All”を選択、 もしくは⌘+shift+5で指定した場所にPSDが保存されます。 保存されたPSDファイルを開くとあら素敵。 各ウィンドウがレイヤー別になってます。 不要なウィンドウを消したり、背景を抜いたり、メニューバーを消したり色々できま

KoalaはWin,Mac,Linuxなどマルチプラットフォーム動くGUIのコンパイラです。 対応言語はSass(Compass),Less, CoffeeScriptです。 インストールはこちらからご使用のOSを。 現時点のバージョンはv1.0.0v1.3.0です。リリースしたてですね。 動作には予めRubyのインストールが必要です。 ※v1.3.0になったので少し修正しました（2013.6.2） koala使いかた ややフラットUIてきなインターフェイス。 プロジェクト登録 「＋」ボタンでフォルダを選択するか、 作業フォルダをドラッグすればプロジェクトが登録されます。 基本これだけでSass,Less,Coffeeのコンパイルをしてくれます。 書き出し設定 scssの緑のファイルアイコンをクリックすると画面右にオプションメニューが現れます。 「dynamic compilation」を

日付や時間を指定して差分ファイルを抽出できるアプリCowseeを紹介します。 AIRで作られたアプリケーションなのでWinとMacどちらでも動きます。 リポジトリを作成してればGitで差分を取り出したりできますが、 Windowsなら「拡張コピー」で選択してコピーしたり、なんなら自力で抽出。 うむ。めんどくさい。。 CowseeはGUIで簡単に差分抽出できるのでオススメです。 Cowseeの使いかた 操作は簡単で、 調べたいフォルダとコピーしたいフォルダをテキストエリア内にドラッグして更新日時を指定し書き出すだけです。 調べるフォルダの階層の指定や隠しファイルを含めるかなどのオプションもあります。 1ファイルであればそのまま修正してクライアントにメールで送信してもいいですが、 複数ファイルを修正した際、階層が違う場合は階層構造を持たせたままZipで送った方が楽ですね。 Cowseeはコピー