gistjsをforkしてみる。 gistへの画像アップロード。

公開:2014-12-28 10:18
更新:2017-07-30 10:00
カテゴリ:アプリ・ライブラリ・言語,javascript,web,youtube viewer

www.sfpgmr.netの自己キュレーションサイト化に取り組んでいて、Youtube Data APIを勉強がてら叩いてみているところ。その経過をブログで報告するのにソースコード部分をgistにアップして置いてそれをブログにエンベッドしようかなと思った。ソースコードのハイライトは「はてなブログ」自体でもできるけど、gistにアップしておいた方が何かとよさそうなので。でも手動でgistにアップするのは面倒くさいのでググって何かツールはないか探したところgistjsなるnodeベースのツールを見つけた。


node.jsでGistに投稿する - Qiita

このツールはコマンドラインでファイルを指定するとgistにアップロードしてくれる。さっそく使ってみたのだが私のサンプルファイル(.js)がアップロードでエラーとなってしまう。調べたところどうもソースコード中の文字が邪魔をしてうまくアップできないようだ。アップするソースコード側で対処する方法はなさそうなので、gistjsをforkして修正してみることにした。GitHubレポジトリも収集の対象だし、GitHub APIの勉強にもなるしね。

下がそのリポジトリである。


sfpgmr/gistjsf · GitHub

でわからないながらもごにょごにょ変更して、最終的にはアップできるようになった。Gistにアップロードするツールはnpmにたくさんあるのでそれを見ていたら、アップロードするコンテンツ(JSON)をstringfyしたあとBufferでラップしている例があったのでそれを真似てみただけだが(元のソースはstringfyしたままアップしていた)。

とりあえずこれで所望の機能は得られたのだけれども、画像ファイルもアップロードできるようにすればbl.ocks.orgのコンテンツ・アップにも使えるなと思って画像アップロードを試してみたが、どうにもできない。ファイルをBASE64エンコードして送るだけでは化けたテキストファイルとして認識されるのみだ。

https://sfpgmr.github.io/images/2014/12/2014122801.png

で何気なくMike Bostockさんのレポジトリを見ていたらgistupというユーティリティを見つけた。


mbostock/gistup · GitHub

このユーティリティはGistも一種のGitリポジトリなのでcloneして画像ファイルをaddしてcommit/pushすれば画像ファイルがアップロードできるというTipsを使用して画像もアップロードできるようになっているみたい。


gist に画像データを登録 - hayajoのはてなブログ

あるフォルダを指定してその中のコンテンツをまとめてアップロードできるようにもなっているので、bl.ocks.orgにはうってつけのツールではある。Mikeさんもやっぱりアップが面倒だったんだろうな。。

しかし残念ながらこのツール私の環境ではうまく動作しない。gistupのソースコードを参考に、forkしたgistjsにコードを追加してみようかなと今思っているところだ。