こんにちは、きゃぷてんです。
ブログやWordPressテンプレートのカスタマイズの記事を書いていると、HTMLやCSS、PHP、JavaScript・・・などなど、様々な言語を記事内に埋め込むことがあります。
数行であれば、何も考えずにそのまま文字列として表示させてしまえばいいのですが、10行を超えてくると、読みやすいようにテキストエディタ系のプラグインを導入する人も多いでしょう。
ただ、プラグインを無駄に増やしたくない派の人間としては、どうにか外部サービスをうまく使えないものかと考えるわけです。
そこで、色々と調査をしていると「Gist」と呼ばれるサービスにたどり着くことができました。
プラグイン不要で、簡単にブログ記事へソースコードを埋め込むことができる ので、今後重宝するサービスだと思います。
<目次>お好きなところからどうぞ
Gistとは？どんなサービスなの？
まずは、Gistとは何なのかという部分から説明していきます。
Gistとは、GitHub（エンジニアの集団・有志とイメージしてください）から無料で提供されている 「ソースコード管理ツール」です。
Gistができることを、ざっくり紹介しますと・・・
- ソースコードの管理（複数可能）
- ソースコードをzipファイルでダウンロードできる
- ソースコードを公開・非公開できる
- ソースコードをバージョン管理（履歴管理）できる
- ソースコードの埋め込みコードを取得できる
などなど、プログラマーやWebデザイナーが重宝するような機能が実装されています。
僕のようにブログを書くことがメインな人は「 ソースコードの埋め込みコードを取得できる 」という部分に魅力を感じるわけですね。
ちなみに、Gistを利用するためにはアカウント登録が必要になります。（登録方法は後ほど）
そうそう、Gistについて調べものをしたい場合「Gist」という検索ワードだと、癌関連の記事（消化管間質腫瘍 Gastrointestinal Stromal Tumor）がヒットします。
そのため、何か調べる場合は「Gist GitHub」等で検索した方がいいですね。
Gistを導入するメリット
Gistを導入するメリットは以下になります。
- プラグイン無しでソースコードを記事に埋め込める
前述した通り、Gistでは「埋め込みコード」を取得することができます。
そのため、わざわざプラグインを導入しなくても、Gist上で作成したソースコードの埋め込みコードを取得すれば、あとは ブログに張り付けるだけ で終了です。
プラグインを無駄に増やしたくない人におすすめです。
Gistの設定と使い方
それでは、Gistの設定と使い方に入りましょう。
操作の手順としては「アカウント登録」→「ログイン」→「ソースコード作成」→「埋め込みコード取得」→「記事に埋め込み」の順番で進めていきます。
注意点なども踏まえながら、それぞれの項目について説明していきますね。
アカウント登録～ログイン
まずは、以下のURLからGitHubにアクセスし「Sign up」をクリックしましょう。
ページが切り替わり「ユーザー名」「メールアドレス」「パスワード」の入力を促されるので、任意のものを入力し「 Create an account 」をクリックしましょう。
プランを選択する画面が表示されるので「free（無料）」を選択し「Continue」をクリックします。
詳細設定画面が表示されますが、面倒なので「skip this step」をクリックします。
下図のような画面が表示されればアカウント作成が終了です。
入力したメールアドレス宛に、本人確認用のメールが来ています。
本文内の「Verify email address」というリンクをクリックすると、アドレスの確認が完了し上の図と同様の画面が表示されますので、忘れずに済ませておきましょう。
アカウントが作成できたら、以下のURLからGistのページへ移動します。
以上で「アカウント登録～ログイン」が完了です。
ソースコード作成～埋め込みコード取得
それでは次に、Gistを使って「ソースコードの作成」と「埋め込みコードの取得」をやりましょう。
- Gist description：コードの説明文を入力
- Filename including extension：任意のファイル名を入力
- Create secret gist：非公開保存（Gist内でコードが公開されない）
- Create public gist：公開保存（Gist内でコードが公開される）
ファイル名やソースコード等の入力を終えたら「Create public gist（公開保存）」または「Create secret gist（非公開保存）」をクリックして、ソースコードを保存します。
すると、埋め込みコードを取得できるようになりますので「Embedを選択」→「埋め込みコードをコピー」の順に操作をしましょう。
以上で「ソースコード作成～埋め込みコード取得」が完了です。
実際にソースコードを埋め込んでみよう！
先ほどコピーした埋め込みコードを張り付けた結果がこちらになります。
張り付けただけですが、きれいにソースコードを表示してくれました。ただ、デフォルトのままだと、ちょっとシンプルすぎるかもしれませんね（笑）
設定を変更するとエディタのデザインをカスタマイズできるかもしれません。その点については現在調査中ですのでわかり次第ブログに書きますね。
プラグインで済ませたいならWP Code Highlight.jsがおすすめ
面倒な登録作業が嫌だという場合は、プラグインを使って簡単にソースコードを表示させましょう。
僕のおすすめは「WP Code Highlight.js」というプラグインです。
最近のコメント