先日、とある記事についたコメントで、Gistを勧めている方がいらっしゃたので、今回ははてなブログでGistを利用する方法を紹介します。もちろん、WordPressなどでも同様に利用できます。
目次
- Gistとは？
- Gistを使うメリット
- まずはGithubに登録しよう
- Githubに登録したらGistを使ってみよう
- Google Chromeアプリ「GistBox」で管理
- エディタと連携すれば、投稿も楽々
Gistとは？
Gistは部分的なコードを共有・公開するためのサービスです。そして、バージョン管理ができるので、「コード書き換えたけど、やっぱり元の戻したい」と思ったら前の状態に戻すことができます。
こんな感じでブログに貼り付けることができますよ。
Gistを使うメリット
コードの使い回しがとても楽です。以前公開したコードを違う記事で貼る時、URLを貼るだけでOKです。しかも、Gist内のコードを書き換えると全ての記事に反映されるのでコードの修正も楽ちん。
そして、ハイライト表示されるのでコードがとても見やすいのもメリットですね。
まずはGithubに登録しよう
Githubの登録方法はこちらの記事に詳しく載っています。
今さら聞けない！GitHubの使い方【超初心者向け】 | TechAcademyマガジン
Githubとはソースを公開して複数人で開発したり、多くの人にコードを利用してもらったりできるサービスです。プラグインなども公開されているので、一度は見たことがあると思います。
Gistは１ファイル、短いコードで公開するものですが、Githubはプロジェクト単位での共有・公開・バージョン管理になります。
Githubに登録したらGistを使ってみよう
Githubの使い方は初めての人は難しいかもしれませんが、Gistだけなら簡単に利用できます。
まずはGithubにログインします。
↑↑ヘッダーにある「Gist」をクリックします。
↑↑こんな感じの管理画面が出てきますので、ここにコードを書いていきます。
右下にある、「Creat public gist」をクリックすると、コードが公開されてブログに貼り付けることができます。
「Create secret gist」をクリックすると非公開で保存することもできます。
コードをコピーしてブログのHTMLにペーストすれば、コードが表示されます。
はてなブログで利用する場合は、記事編集画面の右にある「Gist貼り付け」からも利用できます。
Google Chromeアプリ「GistBox」で管理
Gistのコードがいっぱいになると、管理が面倒になります。Chromeのアプリケーション「GistBox」を使えば、コードにタグを付けて管理ができるので、とても便利です。
こちらから利用できます。
アプリだけでなく、普通にブラウザで利用することもできます。
管理画面はこんな感じ。もちろん、ここからコードを投稿・管理することもできます。
便利ー！！これならわざわざGistにログインしなくても、アプリ内で全部できちゃいますね。
エディタと連携すれば、投稿も楽々
Gistでコードを管理しておけば、使い回しや編集が楽ですね。
エディタによってはプラグインを使って、Gistと連携して直接コードを投稿できるすることもできます。ちなみに「Sublime Text3」ではうまくいかなかった…。やり方がまずかったのかな…。「Sublime Text2」なら大丈夫らしいけど。
エディタで利用できる拡張機能を紹介した記事も参考までに載せておきますね。
Adobe Brackets爆速コーディングになる拡張機能１（GitHubとか色々） | Design Labo Mika-レスポンシブWebデザイン、漫画・イラスト・ランディングページ制作
atom から gist にコードをアップする gist-it を試す – belog
Visual Studio Code でGitHub Gistを使ってみた · GitHub
最近はSublime Text3からVisual Studio Codeへ徐々に移行しています。ただ、Sublimeに慣れちゃって中々離れられないね。
コード公開するのは良いけど、まずは人様に見せられるコードを書けるようにしなくては…。私はまだまだ修行が足りないなー。頑張ります。
Github関連書籍
Web制作者のためのGitHubの教科書 チームの効率を最大化する共同開発ツール
他にもこんな記事書いてます。
