読者です 読者をやめる 読者になる 読者になる

tweeeetyのぶろぐ的めも

アウトプットが少なかったダメな自分をアウトプット<br>\(^o^)/

gist×sublimeTextでgistを有効に使ってみる

ちょっと前にgistについて書きました
はてなブログでgist使ってみるメモ-Webから、コマンドから、sublimeTextから


前回は導入のみだったので
実際にsublimeTextを使って有効にgistってみる一連ぽいものもメモっておきます

はじめに

こんなことしたい例

いちいちwebのgithub -> gistに入らずに
①sublimeTextで投稿したgist一覧を見たい
②sublimeTextで投稿したgistはsublimeTextで編集したい
③sublimeTextでソース書いてるとき前のソース(gist)を流用したい
④sublimeTextからGitHub:Gist開きたい

今回の想定

ってことで、
上の「こんなことしたい例」①~③を無理やり盛り込んで
こんな流れで作業する想定でgist×sumlimeTextを使ってみました

1.ソースを書かく
2.ソースの一部をgistる
3.'2'のソースの一部が間違っちゃったので修正する(①、②)
4.他のソースに3のgistを流用する(③)
5.gistページを開いて確認する(④)

ってことでここからが本題

1.ソースを書かく

こんなソース書いた想定ってだけなので何でも良いですが一応用意しました

2.ソースの一部をgistる

gistりたい一部をドラッグして選択状態にします。
今回は10~13行目です

その状態のまま「Ctrl + k」、「Ctrl + i」と順番に押して
discription、file nameをそれぞれ入力します
f:id:tweeeety:20140424155319p:plain


まずはこれでgistりました
discription:gist tset sample javascript
file name :gist_test_sample.js


3.'2'のソースの一部が間違っちゃったので修正する(①、②)

funcがあらぬことかfuckとなってしまっているので修正しますw


「 ctrl + shift + p」でコマンドパレットを開きます
テキストボックスに「gist」と入力するとgistメニューが表示されるので
「Gist: Open Gist」を選択します
f:id:tweeeety:20140424160532p:plain


選択するとgistファイル一覧が表示されます(①)
先ほど投稿したdiscriptionのものを選択
f:id:tweeeety:20140424160542p:plain



選択すると新規タブでgist_test_sample.jsが開かれます
f:id:tweeeety:20140424160616p:plain


開いたファイルを
fuck -> funcと修正して保存(ctrl + s)します

ここで注目したいのが
なんとアップロード的なものはいらず
保存するだけで終わりです(②)

GitHub:Gistを見てみるとこのとおり
f:id:tweeeety:20140424160723p:plain


4.他のソースに3のgistを流用する(③)

hoge.htmlを編集しているとします
ここに先ほどのjsソースを使いたい!って時にも役立ちます

hoge.htmlがこんな感じ

21行目にカーソルがある状態で「 ctrl + shift + p」と打ってコマンドパレットを開きます
先ほどと同じように「gist」と入力したあと
今度は「Gist: Insert Gist」を選択
f:id:tweeeety:20140424162204p:plain

またまた同じようにgist一覧が表示されるので「gist tset sample javascript」を選択
f:id:tweeeety:20140424162215p:plain

するとこれだけで簡単にソースが挿入されます!
f:id:tweeeety:20140424162224p:plain

自分用スニペットみたいにも使えるし便利ですね!


5.gistページを開いて確認する(④)

最後に補足程度ですが
sublimeTextからGitHub:Gistを開く方法です(webで)

簡単なんですが、ひとつ難点なのは
「3.'2'のソースの一部が間違っちゃったので修正する(①、②)」で
gist_test_sample.jsを新規タブで開きましたが、
そのファイル上(つまりgistファイル上)でしか出ないメニューということです
※他の方法あったら教えてください(>_<)

ってことで、さきほど開いたgist_test_sample.jsタブに移動してからやります

「 ctrl + shift + p」でコマンドパレットを開きます
「gist」と打ちます。
gistファイル上だとさっきまでと違ってかなりメニューが多くなりました
f:id:tweeeety:20140424190212p:plain

この中にある
「Gist: Open Gist in Browser」を選択するだけです
わざわざキャプチャは載せませんが選択するとブラウザで
GitHub:Gistの画面が開かれるかと思います。


ってことで、だらだら書いちゃいましたが
gist×sublimeText便利!\(^o^)/