たまによく使うSublimeTextのパッケージGistとTakanaを紹介しますよ。 Sublime Text Advent Calendar 2014

この記事はSublime Text Advent Calendar 2014 – Adventarの13日目の記事です。

私がたまによく使う、Sublime Textのパッケージ、GistとTakanaを紹介します。

Gist

まずはGistです。

メモでファイルを作ったけど、どこかに保存しておく程でもないな…という時って、意外にありませんか?

EvernoteやOneNoteに保存する方もいらっしゃると思いますが、Sublime TextからGistを扱えるパッケージを入れておくと、アプリの移動もなくGistを開いたり、保存したり、ドキュメントに挿入できたりします。

インストールと設定

Githubのアカウントが必要になりますので、まだお持ちでない方は取得しておきましょう。

Tools → Command Palette…」(ショートカット:Command + Shift + p)を開き、「Package Control: Install Package」を選択します。

command-palette

「gist」と入力して表示される「Gist」をインストールします。

type-gist

インストールができたら、メニューバーから「Sublime Text → Prefercences → Package Settings → Gist → Settings – Default」を開いて内容をコピーします。つづけて、同じ階層にある「Settings – User」を開いてペーストします。

Githubへログインし、右上の「歯車アイコン」からSettingsのページを開きます。

github-settings

左のナビゲーションにある「Applications」をクリックします。

github-applications

「Personal access tokens」という項目にある、「Generate new token」をクリックします。

github-generate-new-token

Token descriptionは適当な名前を付け、gistのみチェックを入れて、「Generate token」ボタンをクリックします。

github-token

Settingsのページに戻ると文字列が表示されているので、これをコピーします。ちなみにこの文字列は生成した時しか表示されず、あとから参照することができないので気をつけましょう。分からなくなったら、再度生成してください。それから、ぼかしていることから分かる通り、他の人に知られないようにしてくださいね。

github-copy-token

Sublime Textに戻って、Settings – Userの「Token」へ、先ほどコピーした文字列をペーストして保存します。

これでひとまず準備はOKです。

Gistを使う

Command Paletteを開き、「gist」と入力すれば、6つのメニューが表示されると思います。

gist-command

それぞれの機能は下記の通りです。

Insert Gist
実行後、Gistの一覧が表示され、選択したGistの内容を、現在のキャレットへ挿入します。
Open Gist
実行後、Gistの一覧が表示され、選択したGistを開きます。編集後、保存すればそのままGistに保存されます。
Create Private Gist
現在のドキュメントからPrivate Gistを作成します。とりあえずのメモなら、これで保存するとよいでしょう。実行後、下部ステータスバーの上に、DescriptionとFile Nameの入力を促されます。オプションなので入力しなくてもOKですが、ファイル名を入れておくとインクリメントサーチで探しやすいです。
Create Public Gist
現在のドキュメントからPublic Gistを作成します。こちらも実行後、下部ステータスバーの上に、DescriptionとFile Nameの入力を促されます。
Embed as script
実行後、Gistの一覧が表示され、選択したGistを埋め込むためのscript要素が生成されます。ブログでコードを埋め込む時に活躍できるはずです。
Add File to Gist
実行後、Gistの一覧が表示され、選択したGistへ現在のドキュメントを追加します。

一覧が表示されている時は、インクリメントサーチでファイルを検索できます。

気をつける点とすれば、Privateモードで作成していたとしても、URLが分かればアクセスはできるので、機密情報は間違っても保存しないようにしましょう。

ちなみにGistの管理そのものは、GistBoxが便利です。

Takana

続けて「Takana」の登場です。sayコマンドだと「てぃかな」なんですが、どうみても高菜です。

これはNode.jsを使って、CSSとSCSSの変更をライブプレビューできるツールです。OSXとLinuxのSublime Textに対応しています。

ライブプレビューという点ではEmmet LiveStyleと似ていますが、ブラウザとエディタの双方向で編集が反映されるLiveStyleに対し、Takanaでは、Sublime Textでの編集に限られます。

インストール

当然ながらNode.jsが必要ですので、インストールしておきましょう。公式サイトのインストーラーではなく、homebrewとかnodebrewを使った方が何かと便利です。ちなみに私はnodebrewを使っています。

まずはSublime Textへ、パッケージをインストールします。Command Paletteを開いて、「Package Control: Install Package」を選択します。

「takana」と入力して、表示されるパッケージをインストールしましょう。

type-takana

続けてターミナルを使って、Node.jsのモジュールをインストールしていきます。「黒い画面怖い」とか言わない。

$ npm install -g takana@0.2.1

執筆時点での最新版は0.3.2ですが、うまく動作しないため、以前のバージョンを指定してインストールしています。

エラーが出た場合は、行頭にsudoが必要だったり、Xcodeの利用規約への同意がまだだったりだと思うので、確認してみてください。

Takanaを使う

ターミナルで、次のコマンドを実行します。

$ takana /path/to/project_folder

フォルダまでのパスは、takana (最後に半角スペース)と入力して、フォルダをドラッグ&ドロップするのが一番簡単かと思います。

正常に起動できれば、メッセージとコードが表示されますので、そのコードをHTMLのhead要素内にコピペしましょう。

takana-script

あとはCSSやSCSSを編集すれば、保存をしなくても即座に変更が反映されるようになります。下の参考動画ではmixtureを使っていますが、Takanaさえ起動していれば、fileプロトコルでもライブプレビューをすることができます。

takana w/mixture from littlebusters on Vimeo.

縮小していないフルサイズの動画

ちなみに、動画の中でBootstrap SASSを読み込んでるツールは、mixtureというJulleiylライクなジェネレータです。

拡張しまくった結果、カオスになった過去のCSSを編集するときは便利なのですが、BrowerSync使い始めてからかなり出番が減ってしまい、ちょっとした修正でしか使ってなかったり、というのが正直なところだったりします、えぇ。


明日はRyujiさんです!

tags