アプリ屋になりたいブログ

アプリ屋になりたいブログ

アプリの開発と仕事の効率化について紹介するブログ

はてなブログでソースコードを簡単に共有できる!「Gist」からの貼り付けを試してみた

f:id:bocbocmm6:20200125224649p:plain

はてなブログにソースコードを貼り付けるとき、どうやったらいいのだろうか。
いろいろ方法はあるけど。。。と日々思っているのですが、どうやら公式でGist貼り付けに対応していたみたいです。

めちゃめちゃ昔からある機能っぽいですが、最近存在に気付いたので、試してみました!

staff.hatenablog.com

表示結果

今回は先に表示結果を出しておきます。


gistd8a4149cffc5b1a72cbe1df6610aa11e

まあ、Gistをそのまま表示したって感じですね。


Gist側手順

さて、手順を載せておきます。

Githubのアカウントがある前提で話を進めます。
持っていない人は以下の記事を参考にしてみてください。
www.apnari.com


まず、Gistで公開したいソースコードを書きます。

以下のサイトにアクセスしてください。

Discover gists · GitHub

タイトルと、コードを書いてPublicなほうのボタンをクリックします。

f:id:bocbocmm6:20200125221855p:plain

これで無事Gistが公開されました。

はてなブログ側手順(パターン1)


記事を書く画面の右側にある「+」ボタンをクリックします。

f:id:bocbocmm6:20200125222338p:plain


「Gist貼り付け」のチェックボックスをONにします。

f:id:bocbocmm6:20200125222523p:plain


サイドバーにGitのマークが追加されるので、クリックします。

するとGitのユーザー名を入力する画面が表示されます。
自分のユーザー名を入れてください。

f:id:bocbocmm6:20200125222637p:plain

すると選択画面が表示されるので、選択して貼り付けします。

f:id:bocbocmm6:20200125222739p:plain

はてなブログ側手順(パターン2)

Gistの右上のscriptタグをコピーします。

f:id:bocbocmm6:20200125223115p:plain


それをそのまま、記事編集画面に貼り付けるだけです。

f:id:bocbocmm6:20200125223234p:plain

Gist貼り付けのメリット/デメリット

普段からGistを使って、コードを公開している人には簡単に貼り付けができでよいものだと感じました。
連携機能でかなり簡単にソースコードを貼ることができます


逆にGistを使っていない人がわざわざはてなブログにコードを貼り付けたいがために利用するほどのものでもないと感じました。

理由は以下です。

  • シンタックスハイライトがない
  • githubアカウントが必要

それならば他の方法のほうがきれいにはれるし、よさげだと感じました。

他の方法↓

www.apnari.com
www.apnari.com
www.apnari.com

まとめ

今回ははてなブログにGistを載せる方法を紹介しました。

Gistを使っている人には便利ですが、その他の人はそこまでって印象でしたね。

逆にこれを機に少しGistを使ってみようかなと思っています。(笑)