ちょっと前に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をそれぞれ入力します
まずはこれで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」を選択します
選択するとgistファイル一覧が表示されます（①）
先ほど投稿したdiscriptionのものを選択
選択すると新規タブでgist_test_sample.jsが開かれます
開いたファイルを
fuck -> funcと修正して保存（ctrl + s）します
ここで注目したいのが
なんとアップロード的なものはいらず
保存するだけで終わりです（②）
GitHub:Gistを見てみるとこのとおり
4.他のソースに3のgistを流用する(③)
hoge.htmlを編集しているとします
ここに先ほどのjsソースを使いたい！って時にも役立ちます
hoge.htmlがこんな感じ
21行目にカーソルがある状態で「 ctrl + shift + p」と打ってコマンドパレットを開きます
先ほどと同じように「gist」と入力したあと
今度は「Gist: Insert Gist」を選択
またまた同じようにgist一覧が表示されるので「gist tset sample javascript」を選択
するとこれだけで簡単にソースが挿入されます！
自分用スニペットみたいにも使えるし便利ですね！
5.gistページを開いて確認する(④)
最後に補足程度ですが
sublimeTextからGitHub:Gistを開く方法です(webで)
簡単なんですが、ひとつ難点なのは
「3.'2'のソースの一部が間違っちゃったので修正する(①、②)」で
gist_test_sample.jsを新規タブで開きましたが、
そのファイル上(つまりgistファイル上)でしか出ないメニューということです
※他の方法あったら教えてください(>_<)
ってことで、さきほど開いたgist_test_sample.jsタブに移動してからやります
「 ctrl + shift + p」でコマンドパレットを開きます
「gist」と打ちます。
gistファイル上だとさっきまでと違ってかなりメニューが多くなりました
この中にある
「Gist: Open Gist in Browser」を選択するだけです
わざわざキャプチャは載せませんが選択するとブラウザで
GitHub:Gistの画面が開かれるかと思います。
ってことで、だらだら書いちゃいましたが
gist×sublimeText便利！＼(＾o＾)／
