Help us understand the problem. What is going on with this article?

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

この記事は、ひとり開発 Advent Calendar 2019の19日目の記事になります。(現時点ではフライング気味)

はじめに

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

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

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

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

CHROCOとは

最初に、今回作ったWebサービスであるCHROCOについて先に紹介しておきます。

FireShot Capture 007 - CHROCO――ポートフォリオをストーリーで語る - chroco.ooo.png

CHROCOでは、「ふつうのポートフォリオでは語れないストーリーを見せる」を実現しています。

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

1. 制作の過程をタイムラインで見せる

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

2. 想い入れの強いストーリーは、掘り下げて深みを見せる

1つの作品のストーリーの中にさらにストーリーを作ることができ、ストーリーの中のもう一つのストーリーといったことが実現できます。

noteに作った時の経緯とか、コンセプトをまとめてあります。
note「ストーリーで語るポートフォリオのWebサービス「CHROCO」を作った話」

アーキテクチャ

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

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の連携
    Spring Data Neo4jというのを使ったのだが、Qiitaとか、日本での記事がなく、英語ドキュメントで苦労した。
  • Neo4jのユニークキーの扱い
    Neo4jのIDは連番であるが、データ削除時の空き番は再利用されるため、ユニークキーとして利用してはいけない。これは、作っている最中にわかったので、データ構造を再設計する羽目になった。

2. Auth0で苦労した点

Auth0とは

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

苦労した点

  • Auth0とSpring bootの連携
    Auth0とSpring bootの連携のサンプルは下の画像のようにたくさんそろっているのだが、thymeleafのサンプルではなくJSPのサンプルのため、置き換え作業にちょっと悩まされてしまった。
    FireShot Capture 096 - Application Details - manage.auth0.com.png

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

おわりに

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

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

最後になりますが、よかったらCHROCOを使って、自分のストーリーをまとめてポートフォリオを作成してみてください!

CHROCO(クロコ)
https://chroco.ooo/

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away