ひとり開発でポートフォリオをストーリーで語るサービスを作った話

この記事は、[ひとり開発 Advent Calendar 2019](https://qiita.com/advent-calendar/2019/solo-developer)の19日目の記事になります。（現時点ではフライング気味）

# はじめに
こんにちは、ひで (@blue_islands)です。

ひとり開発をしていて、自分の作品とかを何かにまとめたりしていますか？

よく見かけるポートフォリオは、ただ作品の完成物を載せているものが多く、実際の苦労話とか、ドヤリングしたい場所など、事細かく乗せることができないものがほとんどです。
そこで、自分が開発をしているCHROCO（クロコ）というサービスを作ったのですが、その時の開発の苦労話が少しでもほかの開発者の参考になればと思っています。

この記事は、自分の作品たちをまとめるサービスを作った時の戦いの綴りです。

# CHROCOとは
最初に、今回作ったWebサービスである[CHROCO](https://chroco.ooo/)について先に紹介しておきます。

![FireShot Capture 007 - CHROCO――ポートフォリオをストーリーで語る - chroco.ooo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20464/581adac9-5910-d279-8927-5f8dd2fc2001.png)

[CHROCO](https://chroco.ooo/)では、「**ふつうのポートフォリオでは語れないストーリーを見せる**」を実現しています。

1. 制作の過程をタイムラインで見せる
2. 想い入れの強いストーリーは、掘り下げて深みを見せる

## 1. 制作の過程をタイムラインで見せる
アイデアを実現した方法、勉強会や発表で使ったスライド、ボツになった企画書、小さな成果や工夫、そういったものをストーリーとして並べることで、制作時の想いや記録をタイムラインに残すことができます。

## 2. 想い入れの強いストーリーは、掘り下げて深みを見せる
１つの作品のストーリーの中にさらにストーリーを作ることができ、ストーリーの中のもう一つのストーリーといったことが実現できます。

**noteに作った時の経緯とか、コンセプトをまとめてあります。**
[note「ストーリーで語るポートフォリオのWebサービス「CHROCO」を作った話」](https://note.com/livlog_llc/n/nc2bdd24ec6d4)


# アーキテクチャ
サービスのアーキテクチャについては、こんなものを利用しています。
いろいろと初めて利用したものも多くいろいろと苦労しています。ま、その話は後の部分で。

## 1. フロントエンド
* Bulma
* Bulma-Extensions
* jQuery

## 2. バックエンド
* Java
* Spring boot
* thymeleaf
* Neo4j

## 3. インフラ
* GMO VPS
* Amazon S3

## 4. その他
* Auth0

今回こそ、モダンなフロントエンドにしようと思っていたのですが、thymeleafを使ったあたりから、javascritptはjQueryに走ってしまい、ちょっとクラシックな構成になってしまいました。

あまり、利用例が少ない点では、Neo4j、Auth0とかなのですかね。CSSはBulmaフレームワークが
最近のお気に入りです。

# 苦労した点
やはり、苦労した点で行くと、今までつかったことのない、「Neo4j」「Auth0」の扱いでかなり苦労しました。

## 1. Neo4jで苦労した点

### Neo4jとは
Neo4jはJavaで実装された、オープンソースの最も人気のあるグラフデータベースです。

### 苦労した点
* **Neo4jとSpring bootの連携**<br>[Spring Data Neo4j](https://docs.spring.io/spring-data/data-neo4j/docs/current/reference/html/#reference)というのを使ったのだが、Qiitaとか、日本での記事がなく、英語ドキュメントで苦労した。

* **Neo4jのユニークキーの扱い**<br>Neo4jのIDは連番であるが、データ削除時の空き番は再利用されるため、ユニークキーとして利用してはいけない。これは、作っている最中にわかったので、データ構造を再設計する羽目になった。

## 2. Auth0で苦労した点

### Auth0とは
Auth0 は認証基盤サービス (IdMaaS) です。モバイルアプリや Web アプリに認証基盤を提供し、専用の SDK を利用して新規登録やログインなどといった API を呼び出すことが出来ます。

### 苦労した点
* **Auth0とSpring bootの連携**<br>Auth0とSpring bootの連携のサンプルは下の画像のようにたくさんそろっているのだが、thymeleafのサンプルではなくJSPのサンプルのため、置き換え作業にちょっと悩まされてしまった。
![FireShot Capture 096 - Application Details - manage.auth0.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20464/b2bfaca9-32b5-6f4e-dbfc-bb2268fe713c.png)

* **Spring Securityが初めて**<br>こちらは、Auth0のSpring Securityのサンプルを利用したため、そもそも触ったことがなかったので、仕組みを理解するのに手間がかかってしまった。

## 3. その他で苦労した点

Markdownエディタが他のライブラリとバッティングしている
→[Markdownエディタの"SimpleMDE"の代替、"EasyMDE"を使ってみる](https://qiita.com/blue_islands/items/cafd076d6992c4a100e7)

# おわりに
ここまで、はじめて使ったものが多くだいぶ苦労してしまったので、きっちりと備忘録として、Qiitaに記事を残しておかないと忘れてしまいそうですね。

自分はサービスを作るときは1つ2つは、使ったことのない技術を利用するようにしているのですが、やはり、初めてで実装レベルのものを作るときは参考になるものが少なく、はまりポイントになるので、そこら辺は本当にまとめておきたいと思いました。

最後になりますが、よかったら[CHROCO](https://chroco.ooo/)を使って、自分のストーリーをまとめてポートフォリオを作成してみてください！

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">ポートフォリオをストーリーで語るサービスを作ったよ。 <a href="https://twitter.com/blue_islands/status/1207533526469365761?ref_src=twsrc%5Etfw">2019年12月19日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>