Gistを簡単に投稿してEmbedするためのイロイロ

Gistの使用頻度が上がりそう

このブログはけっこう頻繁にコードが載っていますが、静的サイトジェネレータを通す場合、テンプレートエンジンにテンプレート言語として解釈されないよう、けっこう気を遣うことが分かりました。

記事ファイル内でエスケープする方法もありますが、一番簡単なのは外部ソースからEmbedすることです。自分の手が入っているコードならなおさら。

というわけでGistを利用することが多くなりそうなので、Gistの投稿+Embed方法を検討してみました。

Sublime Text

Sublime TextにはGistパッケージが用意されています。これについては以前記事にしました。

しかし、最近あんまりSublime Textで文章書いてないので、他の方法も探してみました。

コマンドラインツール

Ruby GemまたはHomebrewで、Gistのコマンドラインツールが提供されています。

-Pオプションを利用すると、クリップボードからGistを作成することができます。

ローカルにファイル実体のあるコードなら、たいていSublime Textで開いているのでGistパッケージで充分です。問題はそれ以外の場合なので、クリップボードから作成したいわけです。

また、思い通りにシンタックスハイライトを適用するためには、-fオプションで作成したGistのファイル名を指定する必要があります。(ローカルの既存ファイルを読み込むこともできるが、-fオプションで指定したファイル名が存在している必要はない)

よって、実際に利用するワンライナーは、以下のようになります。

1
gist -P -p -e -d "説明文" -f sample.scpt

これで、下記のようなEmbed codeがクリップボードにコピーされます。

1
<script src="https://gist.github.com/14e9159b999664a9548a.js"></script>

これは、以下のように表示されます。

Alfred Workflow

さらに、Alfred Workflowで簡単に実行できるようにしました。

基本的には上記のワンライナーを実行するだけなのですが、問題は「ファイル名」と「説明文」という二つのパラメータが必要な点です。

これについては、まとめてクエリとしてWorkflowに引き渡し、内部で分割するしかないようです。

そこで、以下の画像のようなAlfred Workflowを作成しました。

MyGist

シェルスクリプトの内容兼、実際に作成されたGistが以下のものです。

これは、このGistの内容をコピーした上で、以下のようにAlfredに入力した結果です。

1
gist sample.sh Gist Gemを利用してクリップボードからGistを作成するAlfred Workflow

ポイントは以下。

  • 入力に日本語を含む場合にエラーが出ることがあったので言語・文字コードを指定
  • 引数“sample.sh Gist Gemを利用してクリップボードからGistを作成するAlfred Workflow”をまとめて{query}で読み込む
  • {query}の分割
  • クリップボードからGistを作成
    • fileがファイル名、descを説明文とする
    • fileの拡張子に基づいてシンタックスハイライトが適用される

これで、クリップボードからシンタックスハイライト付きのGistを簡単に作成し、Embedできるようになりました。