Gistを使ってブログにソースコードを表示させる方法

Unityに関する記事を投稿する事が多いのですが、そうなってくるとソースコードも一緒に紹介しなければなりません。

<pre>タグを使って表示させても良いんですけど何とも読みにくいので、もっと便利なツールがないのかと探していたところGistを見つけました。

Gistというウェブサービスを使う事でユーザーの方に見やすいソースコードを表示させることが出来ます。

Gistとは

GitHubが運営している、ソースコードなどを管理できるウェブサービスです。

ちなみにGitHubは、世界中の人たちが作成したソースコードなどを保存し、公開することが可能なウェブサービスの名称になります。t

無料で利用することが出来るので、初心者の方にも安心ですね。

WordPressにおいてもプラグインなどをインストールする必要がないので、Wordpressに負担を与えずに済みます。

Gistの設定(アカウントの登録)

というわけで、Gistを使えるようにします。

アカウントの登録をしないといけませんが、そんなに面倒くさい作業でもなかったです。

まずは、Gistのページにアクセスします。

Gistのトップページ

右上の「Sing in」をクリックします。

Gistのアカウントを作成する

アカウントを持っている方はサインインでOK。持っていない人は「Create an account」をクリックしてアカウントを作成しましょう。

Gistアカウントの登録方法

Username:ユーザーネームです。ニックネームなどでかまいません。

Email address:メールアドレス。使いたいメールアドレスを入力してください。登録したメールアドレスには、更新情報などが送信されます。

Password:パスワード。最低でも小文字1つ、1つの数字、7つの文字を使わないと登録できないようです。

Gistアカウントの登録方法2

全て入力したら「Create an account」をクリックします。

Gistアカウントの登録方法3

料金プランなどを選択する画面になります。

無料プランで十分ですので、「Unlimited public repositories for free.」を選んで「Continue」をクリックします。

すると、先ほど登録したメールアドレス宛に確認メールが届きますので、メールの中にあるリンクをクリックしましょう。

Gistアカウントの登録が完了

このような画面が表示され、アカウントが作成されます。

Gistの使い方

アカウントの登録が完了したので、さっそくGistを使ってみましょう。

まずは、Gistのトップページに移動しておきます。

Gistの使い方

このページが表示されたら、Gistを利用する準備が完了しています。このページが表示されない場合は、右上に表示されている「New Gist」をクリックしてください。

Gist description:ソースコードの説明および概要について入力します。

Filename including extension:ファイル名を入力。お好みでファイル名を決めてください。真ん中の大きな欄に、ソースコード本文を入力していきます。

Create serect gist:「非公開」で保存する。Gist上でコードが公開されません。

Create public gist:「公開」で保存する。Gist上でコードが公開されます。

それぞれ入力し終わったら、「Create serect gist」または「Create public gist」どちらかを選択しましょう。

Gistで埋め込みコードを取得する画面

これで、埋め込みコードが取得できる状態になります。

「Embed」の右に表示されている部分が埋め込みコードになりますので、コピーします。表示されているソースコードをそのままコピーしないように気をつけましょう。

ちなみに、先ほどのソースコードよを編集し直したい場合は、上の「Edit」をクリックすると先ほどの編集画面に戻ります。

削除したい場合は、その隣の「Delete」ですね。

WordPressに埋め込みコードを貼り付ける

今作成したソースコードをwordpressに埋め込んでみます。

こんな感じになります。ソースコード感がバッチリにじみ出ていてイイですね。

wordpressに埋め込む場合、ビジュアルエディタではちゃんと表示されないので、テキストエディタに貼り付けるようにしてください。

まとめ

Gistを頻繁に使うと、コードの管理が大変になりそうですが、投稿したコードは一覧で確認することができますので、割と管理がしやすいです。

これからUnityでC#を扱うことが多くなるのと思うので、Gistの存在を知れて良かったです。

英語が多くて難しそうですが、一通りの操作さえ覚えればそれなりの事が出来ますので、是非一度使ってみてはいかがでしょうか。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク