当サイトではIT・Web系技術、メタバースなどの情報提供を目的とします。
個人的な技術ブログなども投稿する予定です。

ITエンジニア性格診断のフロントエンドをアップデートしました

みなさんこんにちは。ゆーろんです。 今回は2022/5/12に公開したWEBアプリケーションである「ITエンジニア性格診断テスト」に関して本日(2022/12/15)に更新したので改良点の紹介がメインとなります。 また「ITエンジニア性格診断テスト」を開発しようと思ったきっかけ的なものも思い出しがてら記録しておきます。 目次 ITエンジニア性格診断テストとは 開発のきっかけ 今回の更新で改善した実装内容 今後の開発予定 ITエンジニア性格診断テストとは ITエンジニア性格診断は「WEBに関わるシステムやアプリの開発を行うエンジニア向けの性格診断」を提供するWEBアプリケーションです。 構想と内部設計に2日程、実装に4,5日かけて開発しました。フロントエンド部のデプロイ先はPaaSのNetlifyになっており、バックエンド部のデプロイ先はHerokuになっていました。 (2022年12月現在、HerokuにデプロイしたAPIサーバは削除済み(現在利用不能)) 大まかな機能としては10種類のエンジニアタイプを定義しておき、各質問への回答結果をもとににエンジニアタイプを判断し、その結果を表示すると言うものになります。なおバックエンドのサーバ機能にはデータベースへの回答登録機能とデータベース上の総計をGET Requestがきたら返すという機能が実装してありました。 開発のきっかけ もともと自分は性格診断に興味があり、ネット上で様々な診断アプリを受けていました。具体的には「データでわかる辛口性格診断」や「MBTI 無料性格診断テスト」など。 そんな中、記事をあさってる最中に「ITエンジニアにも複数のタイプがいる」的な内容が書かれてある記事を見つけました。それで「ITエンジニア版の性格診断テスト」があったら面白いのではないかと思い製作してみた次第です。 制作にあたって、ネット上の記事や各種SNSや技術ブログなどを回って、自分なりに10タイプのエンジニアを定義することとしました。そのため要件定義(仕様決定)には半日以上かかりました。 今回の更新で改善した実装内容 前回デプロイした5/12時点ではReactを触ってまだ4, 5日程度であり、実装されたコードの内容もかなり見にくく、Reactの仕様にも理解が不十分なまま実装したため、あまり設計の良い設計ができませんでした。 今回の更新では不十分だった質問設計とパラメータ(得点)の演算処理、そして結果文の大幅の見直しと訂正を行いました。またコードもかなり書き換え、統計情報の画面もかなり訂正しました。(このページはバックエンドのAPIサーバが用意されれば統計情報を表示できるものとなってます) 結果画面の各ポイントのパラメータ名と表示も下の画像のように書き換えました。 今後の開発予定 バックエンドのAPIサーバ(Rails駆動)はFireBaseに変える、つまりNodeベースにする予定です。 それにより「統計情報」の画面を提供できるようになると思います。 ここまでご覧くださりありがとうございました。

Vue.jsでリヴリーアイランドを再現した話

こんにちは。ゆーろんです。 JavaScriptの学習のためにいくつかフロントエンド完結のものやNode.jsベースのものを作成してきましたが、作成した中でユニークなものである「クラシックリヴリーアイランドの再現」の制作話や使用技術に関してまとめます。 リヴリーアイランドとは そもそも制作した「リヴリーアイランドの再現」といっても、リヴリーアイランド自体がよくわからない方もいると思うので解説します。 リヴリーアイランドは2002年にリリースされたブラウザで遊べるオンラインゲームです。 ブラウザ版の運営は株式会社ゲームポッドが運営していましたが、2019年末にサービス終了となりました。 現在(2022年)は株式会社COCONEにリヴリーアイランドに関する権利が譲渡され、2021年ごろにネイティブアプリとしてリヴリーアイランドがリリースされています。 上記の画像はネイティブアプリとしてリニューアルした際のデザインです。 制作の経緯 そんなリヴリーアイランドですが、私自身もかつてPC版を何年もプレイしていました。 あるときに、スマホ版(ネイティブアプリ)としてリヴリーアイランドがリリースされているのを知ったの同時に、以下のような記事を読みました。 Vue.jsを用いたWebゲームの作り方 - coconeのフロントエンド業務 cocone engineering はじめまして、ウェブ開発室で室長とフロントエンド業務を担当している髙山です。 気がつけばもう9月ですね。いやぁ早い。学生の皆さんは夏休みも終え、授業も始まっているのでしょうか?夏休みと言えば、宿題です... こちらの記事は現在スマホ版リヴリーアイランドの運営をされている株式会社COCONEさんのエンジニアの方が書いた記事です。 この記事を読んだことと、スマホ版リヴリーアイランドを私自身が認知したことで「JavaScriptでリヴリーアイランドの再現が作れるのでは?」と思い作ることにしました。