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の「草」を載せてみてください💚💚💚


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

セカンドカーとしてフィアット500(FIAT 500)を買いました

先日、セカンドカーとしてフィアット500(FIAT 500)を買いました。
色はミントグリーンです。

f:id:JunichiIto:20181029072110j:plain

外観だけでなく、インテリアもなかなかオシャレです。

f:id:JunichiIto:20181030083134j:plain

チェック柄のシートもいい感じ〜。

f:id:JunichiIto:20181030083339j:plain

車検証入れのデザインや色遣いまでオシャレです。

f:id:JunichiIto:20181030085240j:plain

この車はiPhoneをつないでApple CarPlayが使えます。
音楽の再生やカーナビはiPhoneに入っている音楽や、Googleマップを使います。

f:id:JunichiIto:20181030083617j:plain

ハンドルに付いてるボタンを使うと、Siriで音声操作することもできます。
たとえば「米津玄師かけて!」と話せば、iPhoneに入っている米津玄師の曲を再生できます。

f:id:JunichiIto:20181030105443j:plain

iPhoneはBluetooth接続することもできますが、車自体にもUSBコネクタが付いているので、ここで充電しながらCarPlayを使うことも可能です。

f:id:JunichiIto:20181030084111j:plain

ちなみに余談ですが、このフィアット500、1957年から1977年にかけて製造されていた「フィアット500(NUOVA 500)」の現代版として発売されています。
外観やインテリアにどこかクラシカルな雰囲気が漂うのはそのためです。

Fiat 500 1970
Old Fiat 500L "cockpit"

フィアット500を選んだ理由

僕は兵庫県西脇市という田舎町に住んでいるので、移動には車が必須です。
今までは車1台でやってきたのですが、子どもたちの成長に伴い、休日も家族がそれぞれ別行動をとることが増えてきました。
そうなると、車1台ではやりくりがしんどくなってきたので、2台目の車を買おう、ということになりました。

最初は妻と「安い軽四でいいかな」という話をしていたのですが、「セカンドカーなんだし、多少実用性が落ちても面白い車に乗ってみたいね」という話になりました。
いろいろ車を探す中で、「あ、そういえばこんな車もあった」とフィアット500を見つけ、試しに試乗してみたところ、「かわいいし、走りも個性的で面白い!」ということで夫婦の意見が一致し、フィアット500を買うことに決めました。

フィアット500の感想

納車から半月ほど経ちましたが、夫婦ともども非常に満足しております!
外からの見た目だけでなく、中に乗っても日本車にはないセンスの良さを感じるところがgoodです。
このへんはさすがイタリア人!といったところでしょうか。
(フィアットはイタリアの自動車メーカーです)

3ドア&4人乗り、ということで、後席はちょっと狭いですが、「ほぼ2人乗り」と割り切ってしまえば実用性は十分だと思います。
(我が家の場合、フィアットはあくまでセカンドカーなので、家族4人で遠出するときはもう1台の車を使えばOK、という考えです)

オートマのギヤチェンジだけ、クセが強いので要注意

このフィアット500、見た目はすごくかわいいのですが、オートマのギヤ周りだけかなり独特な仕組みになっているので要注意です。
だいたい、シフトノブの形からしてちょっと変わってます。(普通の車みたいにPやDがない!)

f:id:JunichiIto:20181030091010j:plain

フィアット500のミッションにはデュアロジック(DUALOGIC)というメカニズムが搭載されています。
これは僕なりに説明すると、「オートモード付きクラッチペダルレス マニュアル車」です。
もっと雑にまとめると「クラッチペダルのないマニュアル車」です。

なので、自動的にギヤが変わるときも非常にマニュアル車っぽい挙動を示します。
誤解を恐れずに言うなら、オートモードを選んだときは「マニュアル車に不慣れなおっちゃんの運転」みたいに、ガックンガックンとギヤチェンジします。
いや、ガックンガックンはさすがに言いすぎかもしれませんが、それでも日本車のように滑らかにはギヤチェンジしてくれません。

また、ギヤチェンジのタイミングも正直あまり賢くなくて、「今このタイミングでシフトアップしてほしいのに!」とか「坂道なんだから、さっさとシフトダウンしてよ!」と思うときがよくあります。

快適に走らせたい人はマニュアルモードで乗るのがオススメ

こうやって書くと、まるで「できそこないのオートマ車」のように聞こえますが、決してそういうわけではありません。
僕の勝手な想像ではオートモードがギクシャクするのはきっと、この車が「オートモードではなく、マニュアルモードで乗ってくれ!」と訴えてるからだと思うんです。
実際、マニュアルモードで乗ると、とても快適で楽しい車に変貌します。

マニュアルモードにすると、自分の好きなタイミングでギヤチェンジすることができます。
そして、教習所で習ったように「ギヤチェンジする直前でアクセルペダルから足を離し、ギヤチェンジをした後にゆっくりアクセルペダルを踏み込む」というふうに操作すると、ガックンガックンせずにスムーズにギヤチェンジできます。

坂道でスピードが落ちてきたときも自分でシフトダウンしてアクセルを踏み込めば、グングン坂を登っていきます。
先日もアップダウンの激しい田舎道を走ってきましたが、自分でギヤを選びながら車を走らせるのが非常に楽しかったです😄

教習所でマニュアル車に乗ったことがある人は、ぜひマニュアルモードで乗ってみてください。
マニュアルモードを使うと、カーレースゲームのような感覚でこの車を楽しむことができます。
無茶なギヤチェンジは警告音が出て操作を受け付けないようになっているので、エンストしたり回転数が上がりすぎたりする心配はありません。

逆に、マニュアル車に乗ったことがない人やマニュアル車の感覚を忘れてしまった人は、日本車ではあり得ない「クセの強さ」に翻弄されてしまうかもしれません。
ディーラーで十分に試乗をしてから、購入するかどうか検討することをオススメします。

まとめ

というわけで、このエントリでは先日セカンドカーとして購入したフィアット500の感想を書いてみました。
フィアット500は日本車にはない、独特なセンスのカタマリのような一台です。
「今度は思い切って、ちょっと面白い車に乗ってみたい」という人は、ぜひお近くのディーラーさんでフィアット500をチェックしてみてください!

f:id:JunichiIto:20181030094724j:plain

Gmailをはじめ、乗っ取られると怖そうなアカウントに一通り2段階認証(2FA)を設定していった話

はじめに

先日、社内の掲示板に同僚のこんな書き込みがありました。

ヒヤリハットの共有です。

Google の個人アカウントがアタックされ、パスワードまで突破されてしまいました。2 段階認証により、アカウントの乗っ取りは回避できました。
随分前に設定した使い回しのパスワードだったので、パスワードを強化して対処しました。やっぱりよくないなと認識を改めました...。

予期せぬタイミングで Google から SMS で Verification Code が送られてきてドキッとしました。

↓ 同僚が実際に受け取った通知メール
f:id:JunichiIto:20181022062531p:plain

おお、こわーい!!😱

こうやって実際に「アタックを受けてパスワード認証を突破された」「2段階認証を設定していたので難を逃れた」という話を聞くと、昨今のセキュリティ問題が他人事でないことを感じますし、2段階認証もちゃんと機能することがよくわかります。

というわけで、僕も乗っ取られると怖そうなアカウントには一通り2段階認証を設定していくことにしました。

そもそも「2段階認証」とは?

IDとパスワードによる通常のログインのあとに、別途セキュリティコードを入力してログインを確定する方式のことです。
セキュリティコードはSMSやスマホアプリによってユーザーごとに毎回異なる値が提供されます。
そのため、ログイン時にユーザー本人の携帯やスマホを持っている人以外はログインできなくなります。

ちなみに、2段階認証は2FA(two-factor authentication)と略されることがあります。

参考: Google 2 段階認証プロセス

f:id:JunichiIto:20181022070743p:plain
image: https://www.google.com/landing/2step/?hl=ja#tab=how-it-works

2段階認証を設定していったWebサービス一覧

僕は以下のアカウントに2段階認証を設定していきました。
いずれも知らないうちに悪用されるとちょっと怖いサービスばかりです。

  • Gmail
  • GitHub
  • Heroku
  • AWS
  • Evernote
  • Dropbox
  • Twitter
  • Facebook
  • Stripe

2段階認証を設定できなかったWebサービス

以下のWebサービスには2段階認証が用意されておらず、設定を諦めました(2018年10月現在)。
ユーザーとしてはできれば早く対応してもらいたいところです。

  • はてな
  • Paypal
  • VALUE DOMAIN
  • お名前.com

2段階認証で利用するモバイルアプリ

2段階認証で入力するセキュリティコードはSMS(ショートメッセージ)でスマホや携帯に送信することもできますが、スマホ用のアプリで確認することもできます。
僕はAuthyというアプリを使って、セキュリティコードを確認するようにしています。

Authy

Authy

  • Authy Inc.
  • ユーティリティ
  • 無料

Authyを使うとこんな感じでセキュリティコードをアプリ内で確認することができます。

f:id:JunichiIto:20181022073816j:plain:w300

まとめ

というわけで、このエントリでは乗っ取られると怖そうなアカウントに一通り2段階認証(2FA)を設定していった話を書いていきました。

繰り返しになりますが、アカウントの乗っ取りは他人事ではなく、いつ起きてもおかしくない問題です。
悪用されると被害が大きくなりそうなWebサービスに、IDとパスワードのみでログインしている場合は、今回紹介した2段階認証のようなセキュリティ対策の導入を検討してみてください。