tumblur

7

Finally! I finished my rainbow of essences, in memory of Glitch.

(Previous posts in this series: 1, 2, 3)

Each bottle has some glass microbeads that swirl and shimmer around the essence, so they are fun to look at and play with. I also added some glitter to Purple to make it a little more trippy even though you can’t imbibe it! I’m so glad I made these little reminders of Ur. They’ll sit on my work table so I can pick them up and imagine any time I need it.

I’ve had some inquiries about selling these, but I’d really want to get the blessings of Stoot or another Tiny Specker first. Anyone know a good way to contact them?

TumblrにGistを埋め込んで表示する方法(行番号も出すよ)

追記
こちら、コメントでも頂いたおりますが、Gistはプレビューででないだけで公開すると表示されます。
そんため、以下内容は正直役に立たない内容になっております。ご容赦ください。

GistではBLOG等へのコード埋め込み方法として、show embedを押すと以下のようなコードが出てきて、埋め込みに対応しているのですが、Tumblrでは下記のコードを埋め込んでも動作しません。

Tunblrでは動かないGistのshow embedで表示されるコード
<script src="https://gist.github.com/***.js"> </script>

TumblrにGistを埋め込む方法の比較

偉大な先人はやはりいるもので検索すると結構色々な方法が出てきますが、以下の2つの方法が良さそうなので比較してみます。

  1. Embedding GitHub Gists in Tumblr Posts
  2. Embedding Github Gist to tumblr

1.の方は独自に、document.writeを書き換えて表示する方法。2.の方はwritecaptureという、document.writeのソースを読み込む汎用的ライブラリを使っています。

今回は、Gistの内容を表示した後に行番号を表示したりする予定なので、コールバックがあるwritecaptureを使う2.を基本にカスタマイズしていきたいと思います。

リンクの通りにGistの内容を表示する

基本的に2.に記載されているリンクの通り、

<!-- Add the following lines to theme's html code right before </head> -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="http://static.tumblr.com/fpifyru/VCxlv9xwi/writecapture.js"></script>
<script src="http://static.tumblr.com/fpifyru/AKFlv9zdu/embedgist.js"></script>

<!--
  Usage: just add <div class="gist">[gist URL]</div>
  Example: <div class="gist">https://gist.github.com/1395926</div>
-->

でGistの内容は表示されます。

1つに複数ファイルを登録しているGistの個別表示をするように変更

上記での問題点

ただ、このままではちょっと具合の悪い事が出てきます。
リンク先のwriteCaptureを使っているembedgist.jsは、

$(document).ready(function() {
    $('.gist').each(function(i) {
        writeCapture.html(this, '<script src="'+$(this).text()+'.js"></script>');
    });
});

のようにセレクター内テキストのgist URLをにJavaScript側で “.js” をつけてwriteCaptureに渡しています。 このように決めうちをしてしまうと、1つに複数のファイルを登録しているGistで不都合が出てしまいます。

1つに複数のファイルを登録しているGistで個別の埋め込みJSは、

<script src="https://gist.github.com/****.js?file=filename"></script>

のようにURLはパラメータ付きになります。
そのため、writeCaptureに渡すsrcには、該当セレクター内テキストをそのままで渡すという変更を加える必要があります。

また、writeCaptureにはjQuery pluginの形も提供されていますので、それを利用する形に変更したいと思います。

解決策

ですので、writeCaptureの呼び出し部分はjQuery pluginを呼び出すように、

<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://raw.github.com/iamnoah/writeCapture/master/writeCapture.js" type="text/javascript" charset="utf-8"></script>
<script src="http://raw.github.com/iamnoah/writeCapture/master/plugin/jquery.writeCapture.js" type="text/javascript" charset="utf-8"></script>

のように、またwriteCaptureを呼び出す部分(gitsembedwritecapture.js)は、以下のようにします。

$(function() {
    $('.gists').each(function() {
        var $this = $(this);
        var scriptSrc = '<scr'+'ipt src="' + $this.text() + '" type="text/javascript"></scr'+'ipt>';

        $this.writeCapture().html(scriptSrc);
    });
});

これで、テキストの内容をそのままwriteCaptureに渡すようにしたので、1つに複数ファイルを登録しているGistの個別表示も問題無く行えるようになります。

行番号の表示

どうせなら行番号を表示できた方が便利なときもあるので行番号を表示できるようにしたいと思います。

ここでも検索すると、Gistで書いたコードを行番号つきでBloggerに埋め込むというBloggerをTumblrに変更すればそのまま動いてくれるものを公開して頂いている方がいらっしゃいます。

これを、上記のwriteCaptureのコールバックにしても動いてくれるのですが、CSSの部分は分離しておく方が便利そうなのでCSSを直接指定するのでは無く、gist-line-noというクラスを追加するだけにします。
CSS部分は、管理画面の表示をカスタマイズ > 詳細設定 > カスタムCSSを追加に追記しておくと良いかと思います。

また、行番号は出す出さないは可変にした方が良いので、data属性を使って使うか使わないかを変更できるようにします。

それらの変更点をくわえて

https://gist.github.com/1697922.js

とします。

実際上記はこれで行番号まで表示しています。

結論

上記内容のファイルをTumblrのstaticにアップロードしたので、もし上記のようなGISTの表示をされる場合は、管理画面の**表示をカスタマイズ > 編集HTML ** に下記を記載してください。 あとは、下の方に書いてるようにgistsというクラスのタグ内にGistのURLを記載してください。

https://gist.github.com/1705242.js

コッチは行番号なしで表示してみました。    

蛇足1 角丸表示

Customizing your embedded gists with CSSに記載されている内容も併せて記述すると、角丸になりますね。

蛇足2 MarkDownのINLINE HTMLについて

関係無いのですがTumblrを最近Markdownでやってみているのですが、MarkDownにはINLINE HTMLというのがあるんですね。

私は勝手に、上記のようにクラス付きのHTML書かないといけないならMarkdown使えないな-と思っていたので、これはかなり嬉しい発見でした。