はじめに

どうもキーです。
最近は仕事が落ちいているので更新する時間がとれて書く気がおきますね。
GitHubについての記事を経て、ようやくここまで来ました。
Gistでソースコードを表示する方法についてです。
GitHubへの登録などがまだであったり、そもそもGitHubって何?という方は以下の記事を。

• ソースコードを管理する！ GitHubとは？ (プログラマの必須要件！？)
• GitHubへ登録しよう！プログラマの小さくて大きな一歩！

Gistの作成手順

1. GitHubにログインする

Sign inからログインしましょう。
Sign upはアカウント作成なので注意です。

2. Gist画面へ移動

右上の+ボタンを押してNew gistを選びましょう。

3. 必要な項目を入力する

タイトルや説明、ソースコードを入力しましょう。

4. 作成する

Create secret gistかCreate public gistを押しましょう。
Gistの表示以外では見せたくない場合はsecret、GitHub内のアクセスも許可する場合はpublicです。

5. 作成完了

これでGistの作成は完了です。
それでは早速ブログで公開しましょう。

ブログに表示する方法

1. スクリプトをコピーする

Gistの画面のスクリプトをコピーします。

2. ブログのテキストに貼る

コピーしたスクリプトをブログに貼ります。
WordPressの場合はテキストモードで貼り付けましょう。

これだけです。

結果

終わりに

Gistはアカウントを作らなければいけませんが、一度準備ができれば次回以降ものすごく簡単にソースコードのハイライド表示ができます。
特にGitHubをよく利用しているプログラマにはおすすめかなと。
私個人としてはデザイン的に好きなgoogle-code-prettifyを今は利用していますが。

次回以降の記事は未定ですが、書いてみたいネタはまだあるのでそこから試してみて書きたいと思います。
自身の成長の記録を残せるのも悪くないですね。
このブログだけでもすこしずつ成長できている気がします。

はじめに

お久しぶりです。キーです。
前回の更新から長く空いてしまいましたが、今回はプログラマならぜひ登録したい GitHub への登録をしたいと思います。
といってもものすごく簡単なのですぐ終わります。（GitHubについて、登録の意味などはこちら）

登録手順

1. GitHubのページへアクセスする

GitHubの公式

2. 必要項目を入力

多少画面は違うかもしれませんが。

3. 決定

Create an accoutをクリックします。

4. 登録完了

以上です。これだけです。

ついでに

いろいろなサイトを見ると設定を確認しておいた方がよさそうな箇所があったので確認を。

SettingのEmailsから以下の箇所を確認します。
チェックがついていれば大丈夫です。ついていなければつけてください。
※設定の意味を理解して自己責任で外される場合は外して大丈夫です。

終わりに

最近のWebサイトは登録が簡単でいいですね。
もともと私がGitHubへ登録した目的はGistでソースコードを表示するためだったので、次回はそれをやると思います。

どうもキーです。
今回はGitHubについて説明していきます。

なお、本記事はGitHubをある程度知っている、利用したことがある人が読んでも、得られるものは(多分)ないです。

はじまりのまとめ

まずは先にまとめから載せます。
このまとめに行き着くように解説していきます。

• GitHubとは、「GitHub社が提供している」「Gitバージョン管理システムを利用する」「Webサービスである」。
• GitHubはGitを使った「ソースコードのバージョン管理をする」ために利用する。
• 「ソースコードのバージョン管理をする」と、「問題が発生した時の切り戻し」や、「複数人でのソースコード編集によるバッティング回避」に利用できる。
• GitHubは特に「オープンソースソフトウェアをGitの仕組みを利用して管理する」ということに対して強い。

GitHubとは

Wikipedia

以下、引用です。(引用と分かりづらかったので明記しときます。今後引用のスタイルも編集しようと思いました。)

GitHub（ギットハブ）はソフトウェア開発プロジェクトのための共有ウェブサービスであり、Gitバージョン管理システムを使用する。 Ruby on RailsおよびErlangで記述されており、GitHub社によって保守されている。

引用：GitHub – Wikipedia

さて、そもそもGitHubを知らない人にはこれを読んでもピンと来ない人も多いでしょう。
要点を説明すると以下のようなものです。

• GitHub社が提供している
• Gitバージョン管理システムを利用する
• Webサービスである

前提としてGitHubとは上記のものとして認識しておいてください。
まだ、ピンとは来ないと思うのでまずは何のために利用するのか説明します。

何のために使うのか

Gitバージョン管理システムを利用するWebサービスということですが、結局何をするために使うのでしょうか。

基本的な答えは、「ソースコードのバージョン管理をする」です。

では、「ソースコードのバージョン管理をする」とはどういうことでしょうか。

例えば、WordPressのレイアウトを変更するためにstyle.cssを変更するとします。
そのときに、変更前のファイルと変更後のファイルの内容、また、その変更点が履歴としてあとからでも確認できるようにするということです。

何が良いのか

ファイルの変更の履歴が確認できるのが一体なんだというのでしょうか。
しかし、ある程度プログラムなどを経験するとその重要性に気がつくはずです。

例えば、cssファイルでも編集を誤ればWebサイトのレイアウトが大きく崩れてしまうと思います。
一般的なプログラムでもバグが発生してしまった場合は、バグの改修や発生バージョンの調査が必要になります。
そのようなときに、いつどのタイミングのプログラム変更により問題が発生したかなどを確認するために、変更の履歴が必要になるのです。

え？それなら自分で常に変更前と後のファイルを保持しておけばいい？
不可能ではないですが現実的ではないですね。それを楽にするためにシステムと言うものがあるのですから。
また、一部の方はフォルダに以下のようなファイルが入っているのを見たことがあるかもしれません。(例はstyle.cssの場合)

style.css
styel01.css
改修前_style.css
改修後_style.css
新_style.css
style.css.bak

あるあるですが、何がなんだかわからないですね。
しかも質が悪いのは、「この中のどれか一つが最新とは限らない」ということです。例えば、「改修後_style.css」と「新_style.css」には、「style.css」から変更した「全く別の内容」が入っている可能性があるのです。

これは特に、複数人で開発をしているときに起きやすくなります。
そうです。このような複数人による編集でのバッティングを防ぐために、チームで開発をするとなるとバージョン管理システムはほぼ必須のツールとなるのです。

何ができるのか

GitHubはソースコードのバージョン管理に使うと書きましたが、結局何ができるのでしょうか？

実はここまで述べてきた「バージョン管理をする」機能はGitHubのサービスではなくGitというシステムでできることなのです。(Git≠GitHub)

ではGitHubはそんなGitを利用して何を提供しているか。
数多くある機能のうち、特にGitHubのGitHubたる部分をお話すると、

• Gitのソースコードの保管場所をオンラインに
• 自身の作成したソースコードを世界中に公開
• 公開されているソースコードに対して、世界中のだれもが改修を行える

ということです。
つまり、GitHubは「オープンソースソフトウェアをGitの仕組みを利用して管理するサービス」という面がとても強いです。(もちろん他の人にソースコードを公開しないようにもできますし、サービスの利用方法によっては法人用として使うこともできます。)

そして、数多くのオープンソースのプログラムがGitHubで管理されています。
オープンソースのプログラムを読むことはプログラマとしてステップアップをするための良い方法ですし、それどころか自分からライブラリを公開したり、既存のライブラリの改修に携わることができるのです。
まさに新しい世界への扉ですね☆

まとめ

というわけで、「GitHubとはなにか」について述べました。
以下は本記事のまとめです。(はじめに書いたもの)

• GitHubとは、「GitHub社が提供している」「Gitバージョン管理システムを利用する」「Webサービスである」。
• GitHubはGitを使った「ソースコードのバージョン管理をする」ために利用する。
• 「ソースコードのバージョン管理をする」と、「問題が発生した時の切り戻し」や、「複数人でのソースコード編集によるバッティング回避」に利用できる。
• GitHubは特に「オープンソースソフトウェアをGitの仕組みを利用して管理する」ということに対して強い。

GitHubはプログラマをやる上では避けては通れないサービスと思いますので、ぜひ登録しましょう。
と言いつつ私も最近まで(存在は知っていましたが)登録していなかったので、次回の記事では登録方法について書きたいと思っています！

かんそー：
まとめをはじめと終わりに書くのは冗長な気がしてかっこよくないですね。
結局必要なことしか書いてるつもりはないので目次をつけてはじめのまとめはなくそうと思っています。(長くても読んでもらうor飛んでもらう)
ただ目次を実装するにはもう少し時間がかかりそうですね。。。そのうちやります。
ちなみにGitHub、もうすぐ日本語対応のWebサイトが公開されるようですね。
(GitHub、日本語Webサイトを３月公開予定 | NEWS | Macお宝鑑定団 blog（羅針盤）)
ただ正直プログラマをやる上で日本のみの知識でやるのはとてもキツいので、英語版の利用をしたほうがいいと考えています。私はそうしてみます。

子テーマの簡単な使用方法

どうも、キーです。
前回(WordPressの子テーマは必ず利用しよう)は、WordPressにおける「子テーマ」の作り方を説明しました。

今回は、「子テーマ」の簡単な使用方法を説明したいと思います。

子テーマのファイル

「子テーマ」を利用するためには前提知識が必要です。
といっても前回説明した「親テーマ」の更新の影響を受けなくする。を達成するだけであれば以下の点を覚えていれば十分です。

• 「親テーマ」「子テーマ」に同じファイル名のファイルがあった場合、「子テーマ」のファイルが使用される。
• 「cssファイル」と「functions.php」は例外。特に「cssファイル」は「親テーマ」→「子テーマ」の順に読み込まれる。

※「functions.php」については読み込まれ方が複雑であるのと、今回その知識は必要ないので割愛。必要なときに書きます。

例1: header.php

親テーマには通常「header.php」というファイルがあると思います。
こちらの記事(Google Analyticsを導入しよう（WordPressブログのアクセス解析について）)でも編集しました。

この編集を子テーマで行うようにし、親テーマの更新の影響を受けないようにしたいと思います。
といっても手順は簡単。

1. 「親テーマ」の「header.php」を、FTPソフトなどでダウンロードするか内容をコピーしてテキストエディタに貼り付ける。
   ※文字コードはUTF-8にする。改行コードは自分が利用しているOSのものでOK(WindowsならCR+LF、現代のmacOS、LinuxならLF)。
2. Google Analyticsを導入しよう（WordPressブログのアクセス解析について）の記事のとおり、コピーした「header.php」を編集する。
3. ファイルを「header.php」の名前で保存する。
4. FTPソフトなどを利用し、子テーマのパスに作成した「header.php」をアップする。

以上です。やっていることはコピーを作って編集するだけですね。

例2: style.css

次は子テーマのスタイルシートについてです。
スタイルシート(cssファイル)については前述しましたが、「親テーマ」→「子テーマ」の順に読み込まれます。
そしてスタイルシートの特徴として、同じ項目に対する記述は、後に書いたもので上書きされます。
つまり、上書きしたい項目文のみ記載すれば良いわけです。

スタイルシートの編集内容についてはこちら(WordPressブログのレイアウトを最低限整える方法まとめです。(Twenty Seventeen))を例とさせてもらいます。

上記記事で「style.css」の編集についてごちゃごちゃと書いておりますが、子テーマを用いて同じようにする場合は以下を前回(WordPressの子テーマは必ず利用しよう)作成した子テーマの「style.css」へ追記してください。

@media screen and (min-width: 48em) {

	/* Layout */

	.wrap {
		max-width: 1100px;
	}

	.has-sidebar:not(.error404) #primary {
		width: 	68%;
	}

	.has-sidebar #secondary {
		width: 26%;
	}
}

これだけでOKです。
ページ全体の表示の幅、記事の幅、サイドバーの幅を親テーマの設定から上書きしています。
@media screen and (min-width: 48em)などはページ内の要素を特定するための記述だったりしますが、気になる方はcssの書き方を調べてください。機会があれば記事にするかもですが。

結果

子テーマを使って以下の2つの記事の内容と同じ編集ができる。

• WordPressブログのレイアウトを最低限整える方法まとめです。(Twenty Seventeen)
• Google Analyticsを導入しよう（WordPressブログのアクセス解析について）

※子テーマを更新してもレイアウトなどが反映されない場合はまず以下の「レイアウトが反映されない場合」をチェックしてください。それでもわからなければこの記事ではどうしようもないですが。

レイアウトが反映されない場合

真っ先に思い当たる可能性は以下の2つです。
これらを試して違った場合は他のブログも含めもっと広い範囲で調査したほうが良いかもしれません。

1. 記述が間違っていないか確認する。
   当然ですが、これまでの記述のどこかで誤りがあればレイアウトが反映されないということもありえます。また、テーマが違う場合はすべてがそのまま使えるとは限らないです。テーマ名で検索しましょう。
2. ブラウザのキャッシュをクリアする。
   レイアウトを確認しているブラウザのキャッシュをクリアしましょう。
   キャッシュ関連のプラグインを利用していなくてもまず試しましょう。
   私はプラグインないから大丈夫なはずとスルーしていたら見事にハマりました。

今後の構想

勘の良い方やもともと知識のある方は気づいているかもしれませんが、この方法にも問題点があります(かなり簡単にできるのはとても良い点ですが)。
問題に対応するには少し勉強が必要そうですので今しばらくはこの方法で行きたいと思います。筆者が問題に対応できるようになったら記事にしたいと思います。