14
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

ひとり開発Advent Calendar 2019

Day 19

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

Last updated at Posted at 2019-12-02

この記事は、ひとり開発 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のサンプルを利用したため、そもそも触ったことがなかったので、仕組みを理解するのに手間がかかってしまった。

3. その他で苦労した点

Markdownエディタが他のライブラリとバッティングしている
Markdownエディタの"SimpleMDE"の代替、"EasyMDE"を使ってみる

おわりに

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

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

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

14
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?