cupiditasを使ってエンジニアのスキルを可視化する

https://github.com/shinya/cupiditas

# どういう人向けか

**「ちょっと他とは違った、目を引くスキルシートが作りたい！」**
**「自分のスキルをアウトプットするのが難しい」**

自分のスキルを見える化したいみなさんに捧げます。

# はじめに

エンジニアの特性を説明しようと思ったときに、なかなか言葉では説明しにくときがあります。
「○○の開発現場に3年いました」
「Javascriptで○○を作りました」

それらはもちろん大事なんですが、「どんなスキルを持っているか」の他にも「どういう傾向の人間か」がわかればもっと良いと思いました。

そこで、それを可視化するツール`cupiditas`を作りました。

# いわば、パワプロ風スキルシート

みなさんは「実況！パワフルプロ野球」というゲームをご存知でしょうか？
その選手の能力ステータスを見る画面があるのですが、イメージはまさにそれです。
いい感じでスキルを可視化できるのではないでしょうか。

**筆者の能力を表現するとこんなイメージ**

![Engineer Ability Sheet.png](https://qiita-image-store.s3.amazonaws.com/0/72413/689a5af5-6fd4-9216-d310-75dabe43459a.png)

*なんて仕事ができないやつなんだ・・・！*

# プロフィールはすぐに作成可能です

サーバーを用意する必要は一切ありません。
なので、時間はあまりかかりません。
必要なのは、Githubのアカウントだけ。

もちろん、`git clone`してきて自分のサーバーに置いてもらってもOKです。

# 実際に作ってみる

## 1.まずはGithubのリポジトリにアクセス

https://github.com/shinya/cupiditas
ここにいきます。予めログインしておいてください。

## 2.フォークする（コピーする）

右上にあるこのボタンをクリックします

<img width="1002" alt="Forkボタン" src="https://qiita-image-store.s3.amazonaws.com/0/72413/ce7c090c-7b70-bf3e-13e5-c8fd689e0e03.png">

そうすると同じような画面（リポジトリ）が自分のユーザー名のところに作られます。

## 3. Github pagesを作成する

Settingを書かれているところをクリックします

<img width="1004" alt="Setting" src="https://qiita-image-store.s3.amazonaws.com/0/72413/03c497b4-2978-4d66-1863-7afac956979e.png">

下の方にスクロールすると、GitHub Pagesという項目があります。

そこで `Source` の項目にあるプルダウンをクリックします
（写真ではmaster branchとなっていますが、実際は**None**となっているはずです）

<img width="759" alt="Source Dropdown list" src="https://qiita-image-store.s3.amazonaws.com/0/72413/bb8fa2b2-96ae-1088-6758-3a7a0a70c639.png">

それをmaster branchに修正します

<img width="327" alt="select" src="https://qiita-image-store.s3.amazonaws.com/0/72413/50b8143c-8046-46df-ce88-26fb13b89a74.png">

Saveボタンを押します。

<img width="327" alt="Save" src="https://qiita-image-store.s3.amazonaws.com/0/72413/77410329-458a-964e-4552-6a5d2ac38dbd.png">

## 4. 自分のGithub Pagesにアクセスする

今までの工程を終えると、ページの公開が完了します。
（公開できるようになるまで、多少のタイムラグがあるかもです）

公開が完了すると、URLが表示されます。アクセスしてみましょう！

<img width="746" alt="URL" src="https://qiita-image-store.s3.amazonaws.com/0/72413/a44a940f-67e3-ff8e-3544-a9a51eff8c51.png">

こんな画面が表示されたら、成功です

![sample.png](https://qiita-image-store.s3.amazonaws.com/0/72413/cf9044e5-8a77-53fd-2b35-cbdd7abc3c25.png)

# 5. 自分のプロフィール情報を入力する

アクセスしたURLの末尾に `/regist.html` を追加してください。
例えば、私のアカウントなら `https://shinya.github.io/cupiditas/` は
https://shinya.github.io/cupiditas/regist.html
になります（上記のURLは実際にアクセスできます）

そこで自分のプロフィールを入力してください。
Avatarのところは、GithubかFacebookの画像のURLでも貼っておきましょう。
Skill Pointのところは何でも良いです。自分のジャンルのスキルを数値化しましょう。
主観で大丈夫です。しかし、正直に、そして誠実に笑
多少見栄を張ったら・・・嘘にならないようにがんばりましょうｗ

Inherent Ability は特有スキルです。
自分しか無い特技の名前と説明を書きましょう。

Special Abilityのところは、自分が該当すると思うものをクリックして有効にしていきましょう。

![Regist Form.png](https://qiita-image-store.s3.amazonaws.com/0/72413/b39483eb-608b-f4ac-5587-b43fe2100f2c.png)

最後に入力が終わったら、 `Output` をクリック！
謎のJSON文字列が現れます。`Copy`ボタンを押しましょう。

<img width="1214" alt="capture 2018-10-30 2.06.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/72413/e3073c7b-e265-7de4-daab-84f60ac2d789.png">

# 6. 自分のプロフィールデータをサーバーに反映させる

**あともうちょっと！**

先程のフォークしたリポジトリに戻ってきます。

`data/member/member.json`のファイルを開いて編集モードにします。

<img width="1000" alt="capture 2018-10-30 2.19.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/72413/b8164f33-1ea3-f33f-1bff-a32ce0590333.png">

書いてある内容を消して、さきほどコピーしたJSONの内容を貼り付けます。
そして下にスクロールしてコミット！！

<img width="729" alt="capture 2018-10-30 2.21.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/72413/a535945b-51ca-1b6c-a9a8-3a3771b5deb1.png">

# 7. 完成！

そこまで完了すると、先程表示したGithub Pagesがあなたのプロフィールに書き換わっているはずです。
これからそのURLを共有して、自分のスキルをアピールしましょう！

# おわりに

`cupiditas` とは、ラテン語で「野心」とか「貪欲」を表す単語です。
この自分で作ったスキルシートをどんどん埋めていけるように、また他人のスキルシートに追いつけるように、「野心」を持って、「貪欲」に切磋琢磨していきましょう！！