Blog

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できるようになりました。

HexoのLightテーマでタグが全部ぐぐられてたのでnocontentしてみた

ようやくぐぐらぶるになったと思ったら検索結果が論外だった

このブログがしばらくGoogleにインデックスされてなくて、サイト内検索も死んでたんですが最近ようやくインデックスされました。

それでサイト内検索して気付いたんですが、各ページのサイドカラムにあるタグ一覧が検索対象になってて、全ページに含まれてるので検索の精度がガタ落ちでした。

そうかー静的サイトジェネレータってこういう欠点があるのかーと呆然としつつ対策をぐぐったらすぐ見付かった……はいいものの。

nocontentクラス属性を付ける

  • 定型的なコンテンツの除外 - カスタム検索 ヘルプ

    nocontent を指定しても、Google ウェブ検索でのサイトの掲載結果や Google によるサイトへのクロールが何らかの影響を受けることはありません。タグを付けたコンテンツ内のリンクは、引き続きクロールの対象になります。異なる点は、カスタム検索エンジンでの掲載順位の決定にその中のキーワードを使用しないことだけです。

微ッ妙〜〜〜。え、フツーのWeb検索結果には一切影響しないってこと?

しかも、カスタム検索に反映させるのすら何段階も手順必要とか……

まあやりましたけどね。

Lightテーマの場合

まず、nocontentを付けるためにsidebar.ejsを以下の通り修正。

1
2
3
4
5
<div class="nocontent">
<% theme.widgets.forEach(function(widget){ %>
<%- partial('../_widget/' + widget) %>
<% }); %>
</div>

さらに、カスタム検索タグ変更のため、search.ejsを以下のように修正。<script>部分は、カスタム検索 - 検索エンジンの編集から、「検索エンジンの編集 > デザイン > 保存してコードを取得」で取得。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="search">
<script>
(function() {
var cx = '000776476307438838679:x7fkvdccok0';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:searchbox-only></gcse:searchbox-only>
</div>

とりあえずこれでインデックス反映までまったりと待って様子見してみます。

タグ一覧部分を単純なJavascriptとかで置き換えたほうがシンプルで実用的な気もする。