WordPressでサイトを運営している方やHTMLでサイトを作成している方は、ソースコードをサイト内に挿入したいと思ったことがあるのではないでしょうか？
単にHTMLコードで<code></code>と書けば一応ソースコードを埋め込むことはできます。しかしこれだけだと、パッとしない描画になってしまいます。
私自身「もう少しイケてるソースコード表示はできないものか・・・」といろいろ探していたところ、今回紹介する「Gist」というサービスを発見しました。
そこで今回は、いい感じのソースコード埋め込みができる「Gist」を紹介していこうと思います。
目次
ソースコード挿入に最適「Gist」とは
Gistとは、エンジニアに必須の「Github」というサービス内で提供されるソースコード管理ツールです。
メリット・デメリットに分けるとわかりやすいと思うので、以下にまとめます。
Gistのメリット
- 今回の主題でもありますが、ソースコードを他のサイトに挿入することができます。その方法は、Github上で挿入したいソースコードを書き、挿入コードを生成するというものです。素晴らしい点は、ボタン一つで挿入コードを生成できるという点です。それを自分のサイトなどの挿入したい部分に、ペーストすれば完了です。やってみるとわかりますが、とても簡単です。
- サイトが重くならない。これはなぜかというと、WordPressを使っている方でソースコードを挿入しようと思うと、大抵プラグインを入れることが紹介されます。しかしプラグインを使うと、wordpress自体が重くなり、サイト自体も重くなってしまうのです。「Gist」はプラグインではないので、重くなることはありません。サイトを軽い状態で保つことができるのです。
- ソースコードの挿入コードをボタン一つで生成できると1で書きましたが、他にもzip形式でダウンロードをすることもボタン一つで可能です。
- ソースコードをバージョン管理をすることができる。これは主にGithubが提供しているサービスですが、Gistでもバージョン管理を使うことができます。
- Githubに登録してしまえば、簡単に使いうことができます。使おうと思っても、学習コストの高い難しいツールだと無駄に労力を使ってしまいますが、このGistは直感的に使うことができて今日からでも使うことが可能です。
- 無料で使うことができる。Githubは無料で使えるツールですので、Gistも無料で使うことができるのです。しかもアカウント登録はとても簡単なものなので、あとはやるかやらないかの差だけです。
Gistのデメリット
- Githubの登録が必要なのはデメリットと言えるかもしれません。しかし先ほども言ったように、Githubの登録はとても簡単なので心配いりません。
- Gistを使うと、特定のデザインでしかソースコードを表示できません。シンプルなデザインに統一されているので、他の人との違いソースコード表示で出したい方にはデメリットと言えるでしょう。
Gistの使い方【全3ステップ】
ステップ1：Githubアカウントを作成
Githubアカウントの作成方法は以下の記事にまとめましたので、参考にしてみてください。
ステップ2：Gistの作成
アカウント登録が終わりましたら、ログインしてください。
ログインしたら、下画像の赤枠部分をクリックしてGist作成の画面へ移動してください。
Gistの作成画面の各種ボタンやフォームの説明は下画像に示しました。
3・4・5は、わからない方はそのままで構いません。
実際に挿入先のサイトで表示されるのは、2(タイトル)と6(コンテンツ)のみです。
ステップ3：ソースコードを挿入
自分の挿入したいコードを以下のように書いたら、今回は公開するソースコードなので8をクリックしましょう。すると作成できたと思います。
作成されると以下のような画像になると思います。下画像の赤枠部分をクリックして、挿入コードをコピーします。
自分のサイトの挿入したい位置に挿入コードをペースとして完成です。
挿入すると以下のようにソースコードが表示されます。
挿入例
まとめ
今回は、Gistの使い方を紹介してきました。いかがだったでしょうか？
みなさんも、WordPressでサイトを作成する際やHTMLでサイトを作成する際には、ぜひ「Gist」を選択してみてください。
デメリットはありますが、数々のメリットが「Gist」の魅力です。
プラグインを入れるのもいい選択ですが、やはり軽くシンプルで完全無料な「Gist」はとても良いツールだと感じています。
コメントを残す