eyecatch_20140227

『「Github」のアカウントは登録するけど「Github」にはちっとも触らない』ちょっとおバカなGithub「超『超』入門」

いまさらだけどGithubなにそれおいしいの?

先日のWP-D主催のMeganeFesでは煙草係でしたショートホープです。

巷で耳にすることが非常に多くなった「Git」と「Github」。まだ使っていないけれど気になる、という方は多いのではないだろうか。あるいは「アカウントを作ったけどそれっきり…」という人もいるだろう。
僕らWP-E(仮 内でもWP-Dこんな記事をきっかけに『「Git」「Github」の入門から実際までやってみたい!』という声が多くあがっている。かく言う自分自身も勉強の途中で止まったまま…orz 更にこの記事を読むに至って俄然やる気になってきた。是非この後に連載予定の記事を楽しみにして欲しい(と丸投げ

ところで、釣りっぽいタイトル通り『「Github」に全く触らない「Github」の使い方』をご存知だろうか?「Github」のアカウントを作ればすぐに利用できる「Gist」というサービスがある。今回は「Github超入門」の更に手前の「超『超』入門編」として、「Github」のアカウント作成と「Gist」の便利な使い方、半歩進んでWordPressの記事にGist上のソースを埋め込む方法をご紹介したい。

「Git」「Github」そして「Gist」とは

ここでの「Git」と「Github」の説明についてはごく簡単に留めるが、自分の周りでも思った以上に「Git」と「Github」の違いがわかっていない人が多かった。特に普段こういったものに縁遠いデザイナー諸氏には少し敷居が高いかもしれない。Wikipediaによると

Git(ギット)は、プログラムのソースコードなどの変更履歴を記録・追跡するための分散型バージョン管理システムである。

Wikipedia – Git

とある。また、

GitHub(ギットハブ)はソフトウェア開発プロジェクトのための共有ウェブサービスであり、Gitバージョン管理システムを使用する。

Wikipedia – Github

実際に使ってみなければ伝わらないかと思うが、ごく簡単に言ってしまうと「Git」はそのとおりバージョン管理システム、「Github」はそれをクラウドで提供しているホスティングサービス、と思えばいいだろう。つまり「Github」は「Git」を利用する一つの手段、ということ。

そして、「Gist」は「Github」が提供するブログシステム、と言うのが最も近いところだと思う。Githubでのブログといえば今では「Octopress」だが、今回は触れない(よく知らない)。同様にGistをWikipediaで調べると

具体的には個々のリポジトリのためのウィキおよびウェブページでありGitリポジトリを通して編集される。

Wikipedia – Github

うーん、わからないw

本来のGistの使い方としては、Githubと連携させてソースだけでなくリンクやテキストなども記述し、それぞれ個別の記事としてURLが発行されGithubによってバージョン管理される…のだが、Gist上に「Githubとの連携を意識しないで」ただソースなどを書いておいても、どこからでも簡単に呼び出せる(しかもバージョン管理できる!)スニペット置き場として利用できる。
「超『超』入門編」では、まずこの使い方から始めて、Githubを本格的に使う手前の段階をご説明したい。

なにはともあれまずはアカウント登録

Githubのアカウントを作成するのに必要な物はメールアドレスのみ。https://github.com/にアクセスし、「ユーザー名」「登録メールアドレス」「パスワード」を入力する。

Github ログイン画面

登録されるとプラン選択画面に遷移するが、これはデフォルトで無料になっているのでそのまま「Finish sign up」をクリックすれば完了。

Github signup 登録画面

ここをクリックするとダッシュボード画面になる。この画面中程に最近よく耳にする「Pull Request」やら「Issues」なんていうタブがあるが、ここはまずスルーw 時間に余裕のあるときにゆっくり覗くことにして、今日のところはトップのナビゲーションへ。ここにある「Gist」のリンクをクリックすると、目指すGistのトップ画面に遷移する。

Github トップ画面

Gistのトップ画面でアカウントの右隣りにある

Gist 表示

のアイコンをクリックすると新規作成画面になる。

まずはなんか書いてみる。怖くないよ?黒くないしw

あとはここにソースを記述するなりテキストを記述するなりご自由に。Markdown記法も利用できる。ソースの場合、「言語(language)」を選択するとそれぞれ適宜カラーリングも施されるので便利。インデントの指定もできる。簡単にはこれで終わりw もちろん更に様々な使い方はある(だろう)が、ここでは割愛する(知らないとも言う)。

Gist 表示画面

記述が終わったあとは「Create Public Gist」か「Create Secret Gist」をクリックすれば保存される。「Public Gist」はインデックスされるので検索することができる。一方、「Secret Gist」は検索にはかからないが完全にプライベートになっているわけではなく、URLを直接入力すれば開くことができる。個別に誰かとソースをシェアしたりするのには便利だが、セキュリティ上問題のあるものはアップロードしない方が無難だろう。

WordPressの記事にソースを埋め込むのはGistで

WordPressで記事を書く際に、記事の中にソースコードを埋め込む機会はよくあると思う。技術ブログなら必須、そうでなくともそんな機会も一度や二度はあるだろう。GistにアップロードされているソースをWordPressに埋め込むのは非常に簡単。これにはプラグインを利用する。

oEmbed Gist

WordPress界隈でプラグイン作者として有名な宮内さんが作られた「oEmbed Gist」を使う。当ブログでも早速利用させていただいている。ありがとうございます。

ちなみに、この記事の公開直前に1.5.0にバージョンアップされている。これはJetpack2.9に同様の機能が追加されたことによるもの。Jetpackを入れている場合はケースバイケースでそちらを利用してもいいだろう。詳しくは宮内さんのブログ記事「oEmbed Gist + Jetpack 2.9について」を参照されたい。

まず利用したいWordPressの管理画面から「プラグイン」の「新規」を開き、検索窓に「oEmbed Gist」と入力する。

プラグイン検索画面

検索結果の一番上に表示されるので、「いますぐインストール」をクリックして「有効化」。

プラグイン インストール画面

設定は一切不要。有効化するだけでいい。

ソースを埋め込むときはエディタ内の埋め込みたい場所にGistのURLを記述する。これだけ。なにこれ簡単。

WordPress 編集画面

これでブログの画面上ではこのように見える。

表示例

コードのカラーリングもGist上の見た目がそのまま再現される。まーこれは便利♪(それ自体はGist側の機能らしいがw)

おまけ:Gistのソースコード管理がもっと便利に!

ちょっと余談として、僕が使っているサービスで便利なもののご紹介。

GistBox top

GistBox」は殺風景なGistの管理画面をメーラーのように表示するサービス。

GistBox

Githubのアカウントでログインすると、画面はこのようにまるでメーラーそのまま。Gistの標準の機能にはないタグ(ラベル)付けできて絞り込めるのも使い勝手がいい。Gistのトップ画面だけで拒否反応を起こしてしまうようなデザイナーさんにも持ってこいだ。もちろん、「GistBox」からもソースの編集が可能。

以上「Github」にはちっとも触らない、つまり「Gitを全く使わない『Github』利用法」、いかがだろうか。とても手軽にソースが共有できるうえにWordPressの記事に埋め込むのもURLをコピペするだけ。これが「Githubのアカウントを持っているだけ」でできる! 全 部 無 料!

明日、提携先のデザイン会社から「リポジトリ共有するんでそっからcloneして環境つくってほしいんだけど、Githubのアカウントあるよね?」って言われても大丈夫!(僕ではないけど実話

大手を振って「あーGithubね、使ってるよ?」って言える!(違

今後の制作環境はいずれGitでのバージョン管理がデフォルトになっていくだろう。近い将来、「知らない、できない」では済まなくなる。その時に慌てないよう、いまから少しずつでも慣れておこう。今回は「超『超』入門編」だったが、もうこれで少なくとも「Githubが使い始められる」環境にはなった。そして明日公開!「【入門編】gitのある生活」!正座して待て!

5 thoughts on “『「Github」のアカウントは登録するけど「Github」にはちっとも触らない』ちょっとおバカなGithub「超『超』入門」

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です