\n

ちなみに、似たようなサービスにGitHubGist(略してgist)というものがあり、こちらはGitHubのサービスで、簡単なコード紹介を別途コミットすればブログ貼付けコードも出力できるので、簡単に利用できます。ただ、既にGitHubにあるコードだと、それをコピー&ペーストして作り直さなければならないので、二重管理になってしまうのでよろしくありません。
\ngist画面例:
\n

\"\"
\"\"/

\ngist貼付け例:
\n

\n

gist-itの使い方

\n

 

\n

結論から言うと、以下のコードを貼ればよいです。

\n

<script src=”https://gist-it.appspot.com/github/(以下で説明するURL)”></script>

\n

表示させたいコードをGitHubで表示して、URLで”github.com/”以降を上記コードのgithub/以降に指定してやればよいです。
\n

\"\"
\"\"/

\n

ハマりポイント(注意点)

\n

英語ではありますが、以下で使用方法は説明されています。

\n

https://gist-it.appspot.com

\n

ここをしっかりと読みすぎたせいで、いくらやってもコードが表示されずハマりました。

\n

① “Usage”に書いてあることが間違っている
\n以下、上記サイトのキャプチャです。Usage、つまり使い方として説明があるのですが、$user/$repository/raw/master/$pathと指定するように書かれていますが、ここの“raw”というところが、“blob”であるべきです。騙されました。。(GitHubのURL変更があったのでしょうか?)
\n

\"\"
\"\"/

\n

② HttpとHttpsを間違えないこと
\n上記サイトは、httpとhttpsの両方が用意されていて、どちらも同じように使うことができます。ただし、当ブログのように、Httpsで運用している場合、HttpとHttpsが混在してはいけないので、Httpsのコードとして貼り付ける必要があります。ここで”Httpsのコード”と言っているのは”https://gist-it.appspot.com”の先頭部分のことです。
\n逆にHttpで運用されているサイトの場合は、HttpでもHttpsでもどちらでも良いです。ただ、Httpsとして弊害はないので、Httpsを指定するということで良いでしょう。
\nこれも上記画像の”Usage”で示されているコードがhttpだったのでそれに合わせてしまってハマりました。

\n

終わりに

\n

注意点としては単純なものでしたが、他の人が同じハマりをしないようにここに紹介しました。サービス自体はとても便利で、見え方も好きなので今後も使っていきます。できればGitHubが公式でサポートしてくれるのが一番ラクなんですけどね。

\n","datePublished":"2018/05/15","dateModified":"2018/05/15","mainEntityOfPage":{"@type":"WebPage","@id":"https://sun0range.tech.server-on.net/information-technology/gist-it"},"author":[{"@type":"Person","name":"nisioka","description":"オレンジ好きの中で最強のエンジニアになりたい。","url":"https://sun0range.tech.server-on.net","sameAs":["nisioka55","nisioka"]}],"publisher":{"@type":"Organization","name":"分かりやすい技術ブログ","description":"誰にでも分かりやすいをモットーに、IT技術的な内容を投稿するブログです。","logo":{"@type":"ImageObject","url":"https://sun0range.tech.server-on.net/favicon.webp","width":512,"height":512}}}]

GitHubのコードをブログに貼る時の注意点【gist-it】

GitHubのコードをブログに貼る時の注意点【gist-it】
カテゴリ
技術
タグ
gist
gist-it
github

はじめに

GitHubにあるコードをブログで紹介したい時にgist-itという便利なサービスがあります。なのですが、ブログに貼り付けても上手く表示されなくてハマったので、注意点も交えつつ紹介したいと思います。

gist-itとは

そもそもgist-itとは何かと言いますと、以下のようにGitHubのコードをブログに貼り付けて表示することができるようになる外部サービスです。GitHubとは関係のないサードパーティのサービスです。
gist-it貼付け例:

ちなみに、似たようなサービスにGitHubGist(略してgist)というものがあり、こちらはGitHubのサービスで、簡単なコード紹介を別途コミットすればブログ貼付けコードも出力できるので、簡単に利用できます。ただ、既にGitHubにあるコードだと、それをコピー&ペーストして作り直さなければならないので、二重管理になってしまうのでよろしくありません。
gist画面例:


gist貼付け例:

gist-itの使い方

 

結論から言うと、以下のコードを貼ればよいです。

<script src=”https://gist-it.appspot.com/github/(以下で説明するURL)”></script>

表示させたいコードをGitHubで表示して、URLで”github.com/”以降を上記コードのgithub/以降に指定してやればよいです。

ハマりポイント(注意点)

英語ではありますが、以下で使用方法は説明されています。

https://gist-it.appspot.com

ここをしっかりと読みすぎたせいで、いくらやってもコードが表示されずハマりました。

① “Usage”に書いてあることが間違っている
以下、上記サイトのキャプチャです。Usage、つまり使い方として説明があるのですが、$user/$repository/raw/master/$pathと指定するように書かれていますが、ここの“raw”というところが、“blob”であるべきです。騙されました。。(GitHubのURL変更があったのでしょうか?)

② HttpとHttpsを間違えないこと
上記サイトは、httpとhttpsの両方が用意されていて、どちらも同じように使うことができます。ただし、当ブログのように、Httpsで運用している場合、HttpとHttpsが混在してはいけないので、Httpsのコードとして貼り付ける必要があります。ここで”Httpsのコード”と言っているのは”https://gist-it.appspot.com”の先頭部分のことです。
逆にHttpで運用されているサイトの場合は、HttpでもHttpsでもどちらでも良いです。ただ、Httpsとして弊害はないので、Httpsを指定するということで良いでしょう。
これも上記画像の”Usage”で示されているコードがhttpだったのでそれに合わせてしまってハマりました。

終わりに

注意点としては単純なものでしたが、他の人が同じハマりをしないようにここに紹介しました。サービス自体はとても便利で、見え方も好きなので今後も使っていきます。できればGitHubが公式でサポートしてくれるのが一番ラクなんですけどね。


関連記事

  1. GitHubにpushしようとしたら「error:1407742E:SSL」エラーが発生

    事象 githubにpushしようとしたら以下のようなエラーが発生しました。ちなみにInteliJで操作しました。 Failed with error: unable to access ‘https://g […]

  2. GitHubのコードをブログに貼る時の注意点【gist-it】

    はじめに GitHubにあるコードをブログで紹介したい時にgist-itという便利なサービスがあります。なのですが、ブログに貼り付けても上手く表示されなくてハマったので、注意点も交えつつ紹介したいと思います。 gist- […]

  3. 公式主催のGitHub Enterprise企業導入セミナーに行ってきた

    2018/1/23に開催された、「これで成功させる!GitHub Enterprise企業導入 虎の巻」に参加してきました。参加者は40歳前後が一番多く、また、Gitについてもあまり知らない人も多かったので、マネージャ層 […]