個人開発インタビュー！ゲーム風タスク管理アプリnaokiさん
こんにちは！
株式会社テクトレでTechCommitを運営メンバーの石黒です(^^)
今回は、『taskHeros』開発者のnaokiさんにお話を伺いました。
開発のきっかけについてや、作品に登場するアイテム・キャラクターのレトロゲーム風ドット絵デザイン制作方法について伺いましたので、
ゲームをモチーフにしたポートフォリオを作るとき、役立つサービスって何だろう？
『開発で詰まったときの解決策について知りたい』
『個人アプリ制作をするのに信頼できる良い記事は？』
などにお悩みをお持ちの方は是非、生の声の一つとして今後の開発の参考にして頂けるかとと思います♬
taskHeroesは、日々の生活やトレーニングを頑張る方に向けたアプリで、『todoタスクの積み上げで仮想の自分が成長し、todoがちょっと楽しくなる』をコンセプトに開発されています。
タスクを完了するとレベルがアップするので、達成感を感じられます♪
ダウンロードページのURL:http://www.taskheroes.net/#/
使用技術・サービス・構成:Laravel + Vue + Vue Router + Vuexアプリ
ーnaokiさん、本日はよろしくお願いします!
■開発期間は約2か月！
ー開発期間はどのくらい、かかりましたか？
設計と準備で2週間くらいです。
開発は、結局2か月くらいかかり、（コンテストの）締め切りギリギリまでかかりました。こういうアプリを作りたいという考えは、もうちょっと前からふわふわと有りました。毎日1～2時間くらいの時間を費やし、合計で100時間位かなと思います。
夜更かし派なので、夜に作業をしていました。言語はPHPでデータベースは、利用経験があるMySQLを使いました。
■開発のキッカケ、ゲームでより良い世界を築きたい
ー開発のきっかけになった情報を教えていただけませんか？
TED Talksで以前、ジェイン・マクゴニカルのTED【ゲームで築くより良い世界】」というトークが気に入って何度か見ていました。
このトークの中ではゲームをプレイすることで現実世界にポジティブな影響を与える要素について語っており、また『ご褒美があるとやる気に繋がる。』ということもあるので、アプリにもその要素を盛り込みました。
そしてこの人自身がウェブサービスを作っていて、こういうのもちょっと日本語で作ってみたいと思い、僕が今回個人開発にチャレンジしたアプリの参考にさせていただいたんです。
参考：TED Talksは「広める価値のあるアイデア」を様々な人物がスピーチを行うコンテンツです。
■個人アプリ制作におけるコンセプトや工夫した機能
ー開発で Laravelを選ばれた理由を教えてください。
DBと繋げたい、保存をしたいからPHPの言語を選びました。
今までメインで、練習で使ってきたのもLaravelで、フレームワークのなかでそこそこ利用に慣れているので採用しました。
1年3～4か月、Laravelを使っています。
Qiitaや公式のLaravelのドキュメントを読んで開発の参考にしました。
Qiitaで良い記事を書いているな、と思ったらフォローをしています。
2018年頃からQiitaにてnaokiさんが学んだことを纏められていらっしゃいます♪
ログイン・ログアウト、会員登録についての基礎部分は、一つのコマンドで基本的なログイン・ログアウトを搭載してくれる Laravelの機能を使いました。
ユーザーのデータのところ等は自分でカスタマイズして開発をしました。
（naokiさんのフォローしているQiitaのタイトル画面です。）
ーVuexを選択した理由は何でしょうか？
何度か触ってみてJavaScript（のデータの扱い）をすごくシンプルに書けると感じたからです。
以前から勉強してみたい、経験を増やしていきたいと思い選びました。
Vuexの状態管理とは何なんだろうか？等しばらく使い方や良さがわからず、苦労しました。
その辺りの、機能実装は記事・ドキュメントを参考にしました。
概要的な質問はTechCommitでも質問させていただきました。
ー悩んだことはありましたか？
実装しながらも、この機能は何が良いのだろう？ということがわかりづらかった点などです。
Vuexに限らずあまり経験した技術の種類がないので、別の何かと比較して「こちらのほうが良い」という技術選定が今出来ていないことが課題です。
今、開発では興味を持ったことをやってみる、とりあえずやってみよう！と進んでいます。
ー開発上でこだわったこと、作って良かったことをお聞かせください♬
Twitterで交流のある人や、知り合いの人が触ってくれて嬉しかったです。
細かいところですがタスクを始めるときのくるんと回る感じの処理をこだわりました。
ーチャレンジしたいことはありますか？
もう少しユーザーが使ってみようと思えるなんらかのめんどくさいこと、困り事解消ツール、アプリを作りたいです！
■デザイン制作に使った4つのサービス
ーステータスの画面イラストはnaikiさん ご自身で作成されましたか？
はい。ドット絵っぽいものが書けるサービスが無料であって、それを使ってで描いていきました。
【make8bitart】、はログインなしで絵を描けます。
エクスポートして画像を手元に落とせるので、これを使って全部絵を作りました！
ー色使いについては、どのように決定したのでしょうか？
2・3個くらいメインカラーを適当に選ぶと、それに合うカラーを選んでくれるサービスを使いました。
お洒落な配色パターンが見つかるサイトを参考にしました。
【参考記事】
Adobe Color: カラーホイール、カラーパレットジェネレーター
ーアイコンのハートはどのように作りましたか？
FontAwesomeを利用しました。
個人開発で、結構いろんなところで使われているサービスです。
結構、英語のサイトなんですけれど、使い方を説明しているのがありました。
設定したいところに、コピー&ペーストをするだけで良く、CSSで文字と同じように色やサイズを変更出来ます。
ー剣の動きなどの機能は、どのような過程で開発されたのでしょうか？
トップページの剣の炎の動きは、【PisKel】で作りました！こちらはログインが要りますが、絵を書いたり、既存の絵を取り込んで、並べてアニメにすることができます。
ー開発に特に読んで良かった記事があれば、教えてください。
HypertextCandyの記事がLaravelとVuexの学習で非常に参考になりました。
■達成感が感じやすいような勉強の仕方を見つけよう
ー続いて、個人開発をする初心者の方へアドバイスをいただけませんか？
僕がそうなんですけど、初学者はいろんなことを学びたくなってしまいがちだと思うんですよね。
この技術もあの技術も、フロントもバックも興味が出ると触ってみたくなるんですが、時間がいくらあっても足りないので学習技術を絞ると、良いかもと感じています。
ーモチベーション維持、学習継続のコツについて教えてください！
僕の場合は、単純に知らないことを知っていくことが楽しい、面白い、ということがモチベーションの維持につながっています。
全くわからないことレベルが違いすぎることを勉強しすぎるより、基礎的なことからしっかりやっていくことが良いのかな？
自分が今勉強していて畑違いのことをやっても、なかなか頭に入らないし眠くなる。
今やっていることに繋がることを順にやっていけば達成感に繋がりやすいのではと思います！
ー最後に、naokiさんが現在、取り組んでいる事について教えてください♪
先日自社開発、受託開発を行なっている会社に転職をし、現在はPHPのWebサービスの機能改修や、フロントのコーディングなど、バックエンド、フロントエンド両方に少しずつ携わっています。
また、プライベートではWeb技術の基礎を学習コミュニティで学び直しています！
まとめ
今回TechCommit個人開発コンテスト2021年冬に応募されたnaokiさんにインタビューさせて頂き、特に下記の内容が印象に残りました。
(1)デザインのこだわり、ドット絵のデザイン作成では、【make8bitart】make 8-bit art!を使って全部自分で制作した。
(2)困ったときは、TechCommitのQA広場（質問掲示板）や、Qiita・公式のLaravel のドキュメントなどを利用してアプリ開発をしていった。
(3)達成感が感じやすいような勉強の仕方を見つけられると、良いんじゃないかな？
（自分が今 勉強していて畑違いのことをやっても、なかなか頭に入らないし眠くなる。）
ーnaokiさん、ありがとうございました！
TechCommitでは個人アプリ開発・学習仲間を募集中です(^^)
今後も個人アプリを開発したメンバーのお話を『個人アプリ開発インタビューマガジン』にまとめていきますので、また遊びにきてくださいね。
もし少しでも役に立った、面白いなと思ってくださったら、「スキ」や「フォロー」、「SNSシェア」で応援していただければ嬉しいです♪
この記事が気に入ったらサポートをしてみませんか？