## 紹介
人気ソーシャルゲーム Puzzle & Dragons 計算機「ぱずかる」を作りました。
[https://pazcal.net](https://pazcal.net)
ぱずかるは、ゲーム内においてランク上げをする人のために、必要経験値量や必要課金料、周回数、所要時間などを入力データに基づいて算出するWebアプリケーションです。（実はiOSエンジニアの友人に委託した[モバイルアプリケーション](https://apps.apple.com/jp/app/pazcal/id1513600331)もリリースしてあります。）
高校二年生のプログラミング始めたばかりの時に作ったので、技術構成やデザインなどがとても拙いですが、現在80万PVを超え、たくさんのユーザーの方々に利用していただいております。
ユーザーの皆様のインタレストはTwitterで[#ぱずかる](https://twitter.com/search?q=%23ぱずかる&src=typed_query)と検索するとご覧いただけます。
![Pazcal Web](https://imgur.com/4enAvPj.png)
![Pazcal iOS](https://imgur.com/3qinH8R.png)

## 構成
HTML / CSS (Static)
Django (Rest Framework API)

人気ソーシャルゲーム Puzzle & Dragons 計算機「ぱずかる」を作りました。計算するWebアプリケーションです。

ぱずかる（ゲームの計算機ツール）

repository → https://github.com/sor4chi/portfolio

## 構成

- DockerCompose
    - Postgresql
    - Next.js
    - Ruby on Rails
    - CertBot(SSL - Let's Encrypt)
    - Nginx

で作りました。

### DockerCompose

DockerComposeでそれぞれのサーバーを同じホスト下でまとめて立てることでポート間通信を可能にしたり本番環境でのビルドの楽さを追求しました。

### Rails

今回このポートフォリオを作るために初めてRailsを使いました。採用理由は新たなバックエンド経験が欲しかった、日本企業で多く使われているから、管理のしやすく書きやすいと聞いたからなどです。実際初めて触ったのにとても書きやすかったです。（簡単なCURDしか実装しなかったからかも）あと個人的にRailsConsoleに魅了されました。

### Next.js - TypeScript/SCSS

今までNuxt.jsしか書いてこなかったのですが、興味があってSSG化によりどれくらい早くなるのか検証したかったので採用しました。とても書きやすくすぐ慣れることができました。デザインを自分で考えるのが好きなので、TailwindやBootStrapを使わず素のSCSSと事前に作ったFigmaカンプでゴリ押しました。

### CertBot

Let’s Encryptの発行する無料SSL証明書を自動更新するために利用しました。初めてSSL化に挑戦したのでNginxのリバースプロキスが影響していたこともありとても手こずりましたがなんとか実装できました。

### Nginx

Webサーバーとして利用しました。色々時間を費やして難しかったですがいろんな技術や役割を知ることができ成長したので結果良かったなと思っております。

### Conoha VPS

最近サーバーレス、クラウドサービスなどでAWSやVercelが流行ってますがDockerで一から無のCentOSサーバーに環境構築をしてみたいという意気込みでわざわざVPSに一から構築しました。おかげでNextjsのデプロイに手こずったり、Webサーバー構築に時間がかかりましたがいい経験でした。

## 仕様

### Home

ホームページには自分の簡単な経歴を載せています。また各種ページへの誘導セクションも追加しました。ホームページのトップに掲載されている自分のイメージ絵は高校時代の友人が描いてくれたものです。本当にありがとう🙏

### Works

自分が個人的に作ったものを全てここにまとめて掲載していく予定です。

### Blogs

自分が開発や勉強中で得た気づきや知識を発信していけたらなと思っています。

### Contact

連絡をいただくためのフォームになります。

## さいごに

Django以外のバックエンドで何かアプリケーションを作ってみたいという試みで、今回初めてRailsを書きました。SSL自動化やNginxのリバースプロキシなどにとても手こずりましたがなんとか完成させることができました🎉

WebエンジニアMonicaのポートフォリオ兼ホームページを作りました。自分の経歴や制作物、テックブログなどを主に載せています。