5
2

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 5 years have passed since last update.

【未経験90日間開発】困窮するセブ島留学生のためにWEBサービスをつくった話

Last updated at Posted at 2019-07-22

「財布の中、レシートとKTV(キャバクラ)の名刺しか入ってねえ」。こちらセブ島に留学していた頃、毎週金曜日夜になると毎回私が直面していた事態です。先進国の半分以下と聞いて意気揚々と過ごしていたフィリピンでの生活。気づけば日本食レストランに入り浸り、一杯1000円を超えるフィリピン豚骨ラーメンに慣れ、一回2000円のマッサージに週5回で通い、基本的に交通手段はすべてタクシー。そんな生活を続けていけば財布はおろかATMの中もみるみる残高が減っていく、楽しく哀しきセブ島留学。困窮する同士に本記事を捧げます。

##「セブ島留学生のための節約診断サイト」とは
セブ島に英語(やプログラミング)留学をしている人が生活費を診断するサイトです。ユーザーは「年齢」や「交通手段」、「食事のレベル」など16個の質問に答えると、節約レベルが「超人」〜「素人」まで5段階のレベルで診断結果が表示されます。診断結果はグラフで表示され、これまで回答した人たちのレベルごとの配分も確認することができます。

スクリーンショット 2019-07-18 17.17.08.png [「セブ島留学生のための節約診断サイト」(リンクに飛びます)](https://cebucost.herokuapp.com/)

#なぜつくったのか
近ごろ、フィリピンのセブ島に留学に訪れている人が多いみたいです。私もそのひとり。一説によると、日本人学生の留学先としてはオーストラリアを抜き、アメリカに次ぐ第2位になったとか……(物価が安くて、かつアジアで唯一英語が公用語であることが理由のようです※シンガポールのぞく)。

で、そんなセブ島に私自身留学したときの悩みが「これ……意外とお金かかるぞ!」というもので。物価が安いとはいえ、暴飲暴食したりナイトスポットで遊びまくっていたらやはり財布が爆発してしまう。そんな私、そして今後留学をするであろう同胞にとって、コスト管理の一助となればと思い、制作しました。

スクリーンショット 2019-07-18 17.30.20.png

#このサービスでできること
###一般ユーザー
上記に記載している通り、16個の質問に答えることで、自身のレベルを確認することができます。診断ページでは回答に基づいて、食費、交通費、生活費、交際費、衣服・美容費、趣味・娯楽費の7項目の分布を円グラフで確認することができました。

###運営者
ページ上部のログインのリンクからは運営者ページに遷移することができます(現状では運営者である私が設定しているメールアドレスとパスワードからのみ遷移可能)。運営者ページでは回答したユーザーの年齢層、男女比の分布を確認できます。また、管理者画面から診断する問題や問題に紐づく数値を編集することもできます。

スクリーンショット 2019-07-22 14.08.47.png

#使ったもの
###Bootstrap
テンプレートを導入するはずでしたが、もともと入っているリッチな機能が自由に動かせない(力量不足……!)のと、シンプルなデザインにしたかったため、テンプレートは使わずに実装することにしました。

###Chart.js
診断結果にはJSのチャートライブラリであるChart.jsを使用しました。円グラフと棒グラフをそれぞれぬるっと表示させることにこだわりました。

###Google Fonts
Noto+Sans+JPを使用しています。導入はチュートリアル通りにやったため、比較的容易でした。

###Cacoo
ワイヤーフレームを制作するにあたり、オンライン作図ツールを使用しました。無料で利用できるのは機能的に制約がありますが、今回のサービスのレベルであれば、問題ありませんでした。

###Sourcetree
GitHubの管理をするため、使用しました。

#参考
「育休診断シュミレーター」
Webディレクター・エンジニアのイミーさんと、奥さまがデザインをつとめられたサイト。ユーザーが選択しやすい選択肢の設定とわかりやすい結果のデザイン。テキストも優しさにあふれてます。

「Payme」
ポップな色使いとグリグリ動くアニメーションを参考にさせていただきました。

「SANKO!WEBサイトの参考集」
もともと、背景が動くデザインにしたかったこともあり、リファレンスが集まっている本サイトは毎日のように見て、「あ〜こんなサイト作りたい…………」と憧れておりました。

#もっとこうしたい!こと
###サーバーを移転したい
Herokuの無料プランでデプロイしているのどうしても重い……。サーバーについてより学習して、AWSなど普及しているサービスにを使用してみたいです。

###運用についてもっと考えたい
リリースした当初は周囲の友人がおもしろがって使ってくれたのですが、なかなかそこからの実際に多くの人に使ってもらうのは難しかったのです。発信力をつけねば、引いては開発段階から運用について考えておくべきだったとやや反省しております。この記事をきっかけに新たなセブ島留学生の方の目に留まることになれば……!

今回の開発は、私にとってまったくもって初めての体験で困難と挫折の連続でした。そんなときにQiitaの初心者開発投稿を見て勇気をもらったので、今回私も筆をとりました。ご覧いただき、ありがとうございました。

5
2
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
5
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?