はてなブックマーク

わお！ コードを印刷するとき、コードカラーリングした状態で印刷するとすげー見やすい！ 普段コードを印刷なんてしないぜ！ ま、だいたいそうなんですけどね。 寝転んで眺めたいなとか、 何か書き込みながらデバックしたいなとか、 たまーにたまーに、だけど印刷したいことあるよね。 そしてどうせ印刷するんなら、見やすい方がいいよね。 ということで、 ExportHtmlパッケージのご紹介。 インストール いつものようにパッケージコントロールで簡単インストールです。 パッケージコントロールがまだの方はこちらをみてください。 Sublime Text 2 に Package Control をインストールする - フロントエンドとかPCとかスマホとか Install Packageで、"expo"と入力すると出てくると思います。 ExportHtml パッケージを選択してインストールしてください。 キーバ

Sublime Text 2 での作業楽しいですね。 そんな作業をもっと楽しくするプラグインの紹介。 今回は、必須ともいえるプラグイン「AutoFileName」です。 htmlやcssを書いているときに、ファイルを指定する事よくあります。 そんな時にめちゃ便利なプラグインです。 例えば、htmlのimgタグを入力中に、別の階層にある画像ファイルを指定する場合、ディレクトリを構造を移動しながら、ファイルを選択して指定することができ、さらに、画像の width heightも自動的にセットしてくれます。 では、インストールから始めましょう。 インストール メニューバーの「Preferences」から、「Package Control」を選択します。 次に、「Package Control:Install Package」を呼び出します。 “autof”まで入力すると、「AutoFileNam

使っていないCSS記述をピックアップし削除もできる Dust-Me Selectors サイトの一部のページのみ切り出して使う 拡張を重ねたサイト プチリニューアルした後 そんなとき、CSSファイルには、要らない記述がいっぱい。 そんな不使用のCSS記述を見つけてくれる、ありがたいツールがこれ、「Dust-Me Selectors」 Dust-Me Selectorsは、FireFoxプラグインです インストール方法 FireFoxのプラグインですので、FireFoxで、「ツール」-「アドオン」で、アドオンマネージャを開きます 「Dust-Me Selectors」を検索し、インストールします。 使用方法 使うのは簡単！ FireFoxで目的のページを開き、右上のホウキのボタンを押すだけ 読み込まれているCSSごとに、使用されていない記述が行番号とともに表示されます これをCSVに書き出し

この記事は、おれのさぶらいむてきすと Advent Calendar 2013の24日目です。昨日はquattro_4さんの おれのさぶらいむてきすとのしょーとかっと動画 - quattro_4's diaryでした。 みんな大好き Emmetのver1.1(bata)が登場しました。 インストール方法 http://emmet.io/blog/beta-v1-1/ から、 https://github.com/sergeche/emmet-sublime/archive/v1.1.zip をダウンロードします。 展開してできた　emmet-sublime-1.1　フォルダの名前を Emmetに変更し、 Sublime TextのPackagesフォルダに配置します。 この時、元のEmmetフォルダは、念のため他の場所に退避しておくとよいでしょう。 主な新機能 Can I useデータベー

この記事は、おれのさぶらいむてきすと Advent Calendar 2013の19日目です。昨日は@jugyoさん、だったのですが、すごいことになっています。。 さて、 Sublime Textは、マルチカーソルが便利ですよね。 そんなマルチカーソルで便利な、InputSequenceプラグインを紹介します。 このプラグインは、マルチカーソルのそれぞれの位置に連番を入力するものです。 パッケージのインストール インストールは、いつものように、Package Control - Install Package で、 InputSequenceを選択するだけ。 使い方 まずは、cmd+クリックなどの方法で、連番を記入したいところにカーソルを置きます。 次に、[shift]+[control]+[0]を押します。 シーケンスタイプ入力欄を編集して、連番のタイプを指定し[enter] $0は、１

Sublime Text便利ですよね。 今回は、インデントを言語ごとに設定する方法です。 例えば、 ・html の場合は、横に長くなるのでインデントは控えめに2文字分。 ・css は見やすく4文字分。 とか。。 そして、インデントをtab文字にするか、文字数分のスページ文字にするのかも設定できます。 さて、設定方法です。 Packageフォルダを開きます。 OSによって場所は違いますが、開くのは簡単！ メニューで、　Preferences > Browse Packages... で一発で開くことができます。 ここには、各言語（拡張子）ごとのフォルダがあります。 例えば、htmlだったら、HTML というフォルダがあります。 ここに、「HTML.sublime-settings」という名前で、下記の内容のファイルを作ります。 { "tab_size": 2, "translate_tabs

ハワイに行く友人に、iPad mini Retina セルラーモデルを買ってきてもらいました。 なんたって、キャリアに24ヶ月縛られたくないし、安いMVNO SIM使えたほうがいいもんね。 もちろん、wifiモデルも考えたけど、iPad miniってカーナビ代わりに使いたいサイズ！ GPSが使えないwifiモデルはちょっとね。。 MVNO SIM 今回使用したSIMは、so-netのもの。 So-net モバイル LTE | 高速モバイル | インターネット接続 | So-net 別でwifiルータも使っているので、1契約で複数枚のSIMが使えるのがうれしい。 普通にできると思っていた SIMを挿して、APNの設定をすればすぐに使えるものだと思ってた。 実際にそれで使えてる風のブログなんかも見かけたしね。 でも、3Gは使えてもLTEは掴んでくれない。 ああーー、もう諦めようかなって思った時

Sublime Text便利ですよね。 マークアップ作業中に、 ＊Sublime Textで書き換え＋保存 ＊ブラウザをアクティブにして、更新 って、何度やっているでしょう。。 ということで、、 Sublime Textの上書き保存とChromeの更新をワンタッチで行う方法 Browser Reflesh をインストールする Sublime Textに「Browser Reflesh」というパッケージをインストールします。 パッケージのインストール方法は、下記の記事中に解説がありますのでご覧ください。 じっくり解説！Sublime Text 2 プラグイン 「ColorPicker」 - フロントエンドとかPCとかスマホとか キーバインディングを設定する 次に上書き保存と同時にブラウザを更新するためのキーバインディングを設定します。 Sublime Textで、Preferences >

Sublime Text 2 での作業楽しいですね。 そんな作業をもっともっと楽しくするプラグインの紹介。 今回は、本当に便利なプラグイン「Goto-CSS-Declaration」です。 htmlを編集中に、ショートカットキー一発でcssの該当idやclass、要素にジャンプできるという、ほんとに便利なプラグインです。 例えば、htmlのid="head"のところにカーソルを合わせ、ショートカット一発で、cssの#headに飛んでいくことができます。 条件は、該当するcssファイルを開いておくことです。 classや要素の場合はcss中に何度も記述されますがそれでも大丈夫！ショートカットを押すだけで、次々とジャンプしてくれます。（行きすぎたら戻るショートカットもあります） そして、なんと、scssにも対応です。Sass使ってる人にもとっても便利です。 では、インストールから始めましょう。

１．ダウンロード http://www.sublimetext.com/2 公式サイトから、Windows 64 bit (PC環境に合わせて選択して下さい)をクリックし、ダウンロード ２．インストール ダウンロードした　「Sublime Text 2.0.1 x64 Setup.exe」　を実行する ３．パッケージコントロールをインストール（必須） Sublime Package Control http://wbond.net/sublime_packages/package_control/installation Sublime Text 2 を起動する。 公式サイトのコマンドを、 Ctrl+@ で出てくる console にコピペしてEnterする。 ここで、Sublime text 2 を再起動。 ４．日本語環境で使えるようにする（日本語を使うには必須） パッケージをインストー

Emmetのカスタマイズ シリーズ１　１で終わるかも。。（笑） 前回、「Sublime Text2用ZenCodingで閉じタグの後ろにコメントを加える方法」という記事を書きましたが、ZenCodingの新しいバージョン、Emmetを使っている人も多いと思います。 そこで、今回は、Emmetでも、閉じタグの後ろにコメントを自動的に挿入する方法です。 C:\Users\＜ユーザ名＞\AppData\Roaming\Sublime Text 2\Packages\Emmet\emmet の emmet-app.js をいじります。 12477行目に移動します。 } else { start = '<' + tagName + attrs + '>'; end = '</' + tagName + '>'; }この部分を } else { start = '<' + tagName + attr

Sublime Text 2 での作業楽しいですね。 そんな作業をもっと楽しくするプラグインの紹介。 今回は、Color Picker。 CSSやSCSSを書いているとき、簡易にカラーコードを入力するのにとても便利！ これ、とりあえずPackageインストールしている人多いと思います。 でも、動いてますか？ なんか動かないな～とか思ってませんか？ 実はインストールするだけでは動きません。 キーバインディング設定しましょう！ 【手順】 １．まずはパッケージインストール Preferences / Package Control / Install Package ※ メニューバーの「Preferences」を選択、プルダウンメニューで、「Package Control」を選択、出てきた選択肢から、「Install Package」を選択という意味です。 その後、「ColorPicker」と入

最近特に注目を浴びてる、Webフォント、Webアイコンです。 Webフォントはファイルサイズの問題とかあって、日本語ではロゴやタイトルだけ使うといった用途に限られちゃったりしているけど、アイコンとして使うのは非常に有効です。 とくに、Retina対応とか、画像だとたくさんファイルを用意したり、ファイルサイズ大きな画像ファイルになっちゃったりしますよね。 そんなとき、Webアイコン。 フォントですので、 CSSでサイズ、色指定できます。 大きくしてもくっきりです。 ぜひ、使ってみてください。 追記：2013/3/25 イラストレータを使う方法はこちら http://charlie.hateblo.jp/entry/2013/03/25/163740 １．拡張機能のインストール Fireworksの、SVG出力用のエクステンション（拡張機能）をインストールします。 Aaron Beall -

※2013.8.23追記：Subime Text 3のバージョンがあがり、もっと簡単にインストールできるようになりました。 → Sublime Text 3 に Package Control をInstallするのが簡単になったよ 昨日（2013.2.2）、Sublime text 3 ベータ版、build 3009 がリリースされた。 早速、パッケージコントロールをインストールしてみる。 Sublime text 2 でやってた、consoleに長いコマンドを入れる方法は、まだ対応がない。 そこで、git clone での導入となる。 まずは、Gitを入れておく必要がある。 このあたりを参考に。 「サルでもわかるGit入門」 http://www.backlog.jp/git-guide/intro/intro2_1.html Gitのインストールが終わったら、 Windowsのコマン