give IT a try

プログラミング、リモートワーク、田舎暮らし、音楽、etc.

ブログのサイドバーにGitHubの「草」を載せました(その動機と「ブログに草」のススメ)

お知らせ

このブログのサイドバーにGitHubの「草」を載せました。

f:id:JunichiIto:20181104151701p:plain

ただし、「草」が表示されるのはPC版のみです。
スマホで見ている方はPC版に切り替えてチェックしてみてください。

「えっ、草?草っていったい何!?」

GitHubの「草」をご存じない方のために、簡単にこの変わった技術者用語(ジャーゴン)を説明しておきましょう。

ここでいう「草」とは、GitHub上の活動状況を可視化するGitHubの機能のことを指します。
たくさん活動している人ほど、緑のマークが付いていき、それが草のように見えるので、「草」とか「芝生」と呼ばれます。

f:id:JunichiIto:20181104152647p:plain

僕は表立った活動があまり多くないので緑の部分が少ないですが、すごい人は「まさに芝生!」というぐらい青々と緑が茂っています。

f:id:JunichiIto:20181104152835p:plain

ちなみに上の画像は id:koic さんのGitHubプロフィールページから拝借しました。(すごい草の量!)

緑が多い人ほど「たくさんコードを書いてそれを公開している人」と見なせるので、ITエンジニアの間ではこれが「エンジニアの普段のがんばりを表す一つの指標」となっています。
(ただし、プライベートリポジトリの活動は他の人には見えないので、仕事で書いているコードは通常可視化されません)

「草」について、もっと詳しく知りたい人は以下のQiita記事を参照してください。

2018.11.06追記:プライベートリポジトリの活動状況も「草」として反映できます

上で「プライベートリポジトリの活動は他の人には見えない」と書きましたが、以下のヘルプページに従って設定を変更すると、プライベートリポジトリの活動状況も「草」として反映することができます。

Publicizing or hiding your private contributions on your profile - GitHub Docs

情報を教えてくれた@piris314さん、どうもありがとうございました。

はてなブログのサイドバーに「草」を生やす手順

今回は id:a-know さんが開発された、Grass-GraphというWebサービスを利用しています。

僕は以下のような手順で「草」を載せました。

1. ブログのデザイン > カスタマイズ > サイドバー > モジュールを追加 > HTML を選択

2. 任意のタイトルを入力し、body欄に以下のHTMLを貼り付け("JunichiIto"の部分にはご自身のGitHubアカウント名を入れてください)

<div class="github-link">
  <i class="fab fa-github-square"></i>
  <a href="https://github.com/JunichiIto" target="_blank">JunichiIto</a>
</div>
<a href="https://github.com/JunichiIto" target="_blank">
  <img src="https://grass-graph.appspot.com/images/JunichiIto.png?rotate=90">
</a>

3. 「ヘッダ」に進んで以下のHTMLを貼り付け(font-awesomeのGitHubアイコンを利用するため)

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

4. 「デザインCSS」を開き、フォントサイズや見た目を調整するCSSを追加(見た目の調整だけなので、設定は任意)

.github-link {
  font-size: 14px;
  margin-bottom: 10px;
}

手順は以上です!

謝辞

Grass-Graphの存在はTwitter上で教えてもらいました。

リプライをくれた @piris314 さんと、素敵なWebサービスを開発してくれた id:a-know さんに感謝します🙏

ブログに「草」を載せようと思った動機

さて、ここからは、なぜ僕がわざわざこんなことをしようと思ったのかを書いてみます。

ITエンジニアの二極化?

これはあくまで個人的な感想なんですが、最近ITエンジニアの世界がちょっと二極化されつつあるような気がしています。
ひとつは昔ながらの「純粋に技術やコードを書くことが大好きなITエンジニア」で、もうひとつは最近増えだした「収入を第一に考えるITエンジニア」です。

僕はかれこれ15年以上プログラムを書いてきている古いITエンジニアなので、自分は前者だと考えています。
ですので、僕がブログを書くときは「技術やコードを書くことが大好き!」という気持ちが一番にあります。

一方、後者の人たちは「プログラミングを始めてたったxxヶ月で、月収xx万円になりました!」という話題を重視します。
中には「ITエンジニアの仕事は面白い」と書いている人もいますが、なんとなく、技術に対する興味は、収入よりもプライオリティが低いように感じます。(個人の感想です)

僕はあなたの書くコードが見たい!

もちろん、僕もコードを書いてご飯を食べているので、収入はとても大事です。
僕にも養わなければいけない家族がいますし、お金はあればあるほど嬉しいです。
なので、収入にプライオリティを置くこと自体は結構だと思います。

ただ、そうはいうものの、収入第一なITエンジニアさんを見ていると、「収入の話はわかりました。で、あなたはいったいどんなコード書くんですか??」というのがちょっと気になったりもします。

でも、自分のGitHubアカウントをブログに載せてる人ってあまりいないんですよね。
だから、その人がどんな技術に興味があって、どんなコードを書いているのかよくわかりません。だから、あなたのコードを・・・と思ったときに、「はっ!!😱」と気がつきました。

「そんなことを言ってる僕自身も、自分のブログにGitHubアカウント載せてないやん・・・💧」

と。

いかんいかん、これはいかーん!ということで、「技術好きなITエンジニアなんだったら、ちゃんと自分のコードや活動状況を見てもらえるようにしなければ」と思い、自分のブログにGitHubの「草」を載せようと考えたのでした。

これが今回の動機です。

「ブログに草」のススメ

技術やコードを書くことが好きなITエンジニアならきっと、GitHubを使って何かコードを書いたりしていると思います。
そうした活動をぜひ、ブログのように自分の名刺代わりになる場所で可視化してみてください。

あなたのブログを訪れた人が「この人ってどんなコードを書く人なんだろう?」と思ったときに、「はい、どうぞ!」とすぐにコードを見せられるリンクがあれば、その人はあなたのことをより深く理解してくれるはずです。

「えー、こんなしょぼいリポジトリ、とても人に見せられない😣」という初心者さんへ

いやいや、「これが私のリポジトリです」と紹介できる、その心意気が大事なんです!

「まだまだRailsを勉強中」な人であれば、Railsチュートリアルのサンプルアプリケーションしか置いてなくてもそれでいいんです。
ブログの内容が「Rails勉強中」みたいな話が中心であれば、GitHubアカウントを覗きにいっても他の人は「なるほど、たしかにこの人はRailsを勉強してるね。がんばってね」と思うだけですから。

そもそも、こんなふうに偉そうなことを書いてる僕のGitHubアカウントも、言うほど大した内容ではありません😅
すごい人はもっともっとすごいので、僕もがんばってたくさんコードを書いていかないとなーと考えています。

まとめ

というわけで、このエントリではブログのサイドバーにGitHubの「草」を載せた話と、その動機を書いてみました。

GitHubの「草の量」はあくまで一つの目安であり、必ずしもエンジニアのスキルに比例するとは限りません。
表立って見える「草」は少なくても、仕事ではプライベートリポジトリでバリバリコードを書きまくっているITエンジニアさんもたくさんいると思います。
ですので、「草の量」を絶対視する必要はありません。

しかし、その一方でGitHubアカウントにいくつかリポジトリが並んでいれば、その人がどんな言語や技術に興味を持っていて、どんなコードを書いたりするのかが、なんとなくわかります。
ブログに「草」を表示させる狙いはむしろそこなんです!

みなさんも「私はこんなITエンジニアですよ」という自己紹介代わりに、自分のブログにGitHubの「草」を載せてみてください💚💚💚


これは今日、近くの堤防を散歩しているときに撮った本物の「草」です。