ShareGitHub – リポジトリを紹介するブックマークレット

最近、GitHubレポジトリをブログで紹介することが増えてきましたので、ブログで紹介するためのHTMLを自動生成するブックマークレットを作りました。

サイトの紹介にはhareHtmlを使いたいのですが、https接続されているサイトだと外部ソースのsharehtml.jsがブロックされてしまいます。

ShareHtmlブックマークレットを実行しても何の反応もありませんが、ブラウザのJavaScriptコンソールを表示させると次のようなエラーが表示されているはずです。

これを回避するためにはHTMLを手書きすることになってしまいますが、この作業が面倒になってきたのでブックマークレット化しました。

とりあえず、以下のリンクをブラウザのブックマークバーにドラッグ＆ドロップします。

ShareGitHub

これだけでも使えますが、github-url というクラスを指定できるようにしています。以下のようにCSSに書き込んでおきます。

リポジトリURLの右側にGitHubのアイコンを表示させます。アイコンはGitHub公式サイトからダウンロードできます。マージンや余白は自分のテーマに合わせて調節します。

ブラウザでリポジトリを開き、ShareGitHubブックマークレットを実行すると、ポップアップでHTMLが出力されるのでコピーしてOKかキャンセルで閉じます。

あとはエディタ等に貼り付けます。結果、以下のような感じになります。

はてなブックマーク数も表示するようにしてあります。これでURLやタイトルを切り貼りしなくてよくなりました。めでたし、めでたし。