【個人開発】数々の困難を乗り越えて完成させた『無限いいね』制作インタビュー
TechCommit運営メンバーの石黒です。
今回の個人アプリ開発インタビューは、いいねのハートをいくらでも押せる『無限いいね』の開発を行ったあみぃさんのお話をお届けします！
『無限いいね』はTechCommit個人開発コンテストに、ご応募していただいた作品です。その数ある応募作品の中で【その発想はなかった!】と思うものを表彰する『ユニーク部門』賞に輝いた作品です♪
●デザインを学び始めた初学者の方で、ユーザーインターフェースにこだわるデザイン制作を今後していきたい方
●現在個人開発をしているけれど、他の人がどんな記事を参考にしているか気になる方
●Javaで今後個人アプリ開発を始めてみたいと興味を持っていて、実際にどのように開発がされるのかを知りたい方
などは是非参考にデザイン改善にも活かして頂ければ幸いです！
ーそれではあみぃさん、よろしくお願いいたします！
はい、よろしくお願いします。
Web制作の学習から求人数の多いJavaの道へ
あみぃさん(@Amybunnycarry)は、大学卒業後に小学校の教諭として勤務した経験を持つTechCommitメンバーで、今はIT業界への転職を目指してプログラミング学習をされています♪
ープログラミング学習を始めたきっかけについて教えてください！
実は小学校の教諭として働いていた最後の年に、もの凄く大変な学級を任されてしまい体調を崩して退職・・・。疲れてしまって、これから何の仕事をしようかな？と色々と調べていったんです。
私は自宅で猫のむーちゃんを飼っていて、猫と過ごす事に幸せを感じます。Web制作が出来れば在宅で働けるらしいんだと知って、Web制作の仕事に興味を持ち始めプログラミングスクールに少し通ったりして学習を進めていったんです。
スクールではWeb制作に必要なPHPやJavaScriptを学んでいましたが、プログラミング学習をどんどん進めていくうちにWeb制作で働くという方向だけでなく、システム開発の仕事に就くことも面白そうと感じてきました。
今は在宅での勤務にこだわらずに、IT業界に入る為には求人数の多いJavaの学習をしていった方が就職して働きやすいのではないかと思い、学習技術を思い切ってJavaをメインに切り替えて独学で勉強を続けています。
開発アイデア～気が済むまでいいねを押したい！
ー『無限いいね』を開発された理由について教えてください♪
Javaを勉強したので何かを作ってみたくなって、JSP&サーブレットを使えばWebアプリが作れると知った事がきっかけです。
私はTwitterですごく素敵なツイートを見たら、いいねのボタンをたくさん押したくなるのですが1回しかいいねを押せなくて、もどかしいな・・・と前から思っていました。
いいねを押したいだけ押せるアプリがあったら楽しいな～と思い、いいねをたくさん押したい欲求の解消を出来る『無限いいね』をJavaやCSS、JavaScriptの技術を使って１週間程度で完成させました。
いくらでも制作に時間をかけたくなりますが、「デザインは2時間で作ろう」という目標を掲げ、時間を区切ってやることでスピーディーに完成させてコンテストに応募しました。
私は2019年夏頃から開発を始めていて『無限いいね』は、5個目に開発したものです。その後、開発の過程を記録するために「ねむみの極み」というブログを制作。現在もブログを運営をしていて、今までに作ったものや実績をまとめたポートフォリオや、『JSP&サーブレットで作ったアプリをherokuにデプロイする方法』などの記事を掲載しています。
実際に読んで良かったJava開発ビギナー向けの本
ー特に読まれて良かったと感じたJavaの本はありましたか？
Javaの入門書『スッキリわかるJava入門』は、知識が体系的に整理されていて分かりやすかったです。姉妹本の『スッキリわかるサーブレット&JSP入門』に、いいねをどんどん増やせるアプリのサンプルが載っていたので、アレンジして今回作ってみた感じです。
困難を乗り越えたHerokuへのアップロード完成後、作成過程を記録するためのブログを自作
ーアプリの開発をしていて、苦労したことはありましたか？
アプリのデプロイが大変でした。作ったものをアップロードして公開できるHerokuというサービスがあって、PHPで作ったものは割と簡単にアップロードが出来るのですが、Javaで作った場合アップロードする為にMavenというツールを使わないといけませんでした。
最初は見よう見まねでなんとなくデプロイに挑戦してみましたが、謎のエラーが出て全然うまくいきませんでした。なので、Mavenの使い方をイチから学習して何度も試行錯誤し、合計30時間くらいかけてようやく成功しました。
また、いいねの増加処理をAjaxで実装するのも大変でした。JavaでのAjaxの書き方が分からなかったからです。検索してもやり方が見つかりませんでした。
そこで解決の為に、まずは実例が豊富で自分も知識があるPHPで似たような処理を書いてみました。そしてそれを元にJavaでの書き方を模索することで、実装に成功しました。
Tips:Ajaxとは、あるWebページを表示した状態のまま、別のページや再読込などを伴わずにWebサーバ側と通信を行い、動的に表示内容を変更する手法です。
あとは、HerokuへのデプロイはGitHub連携で行っていたのですが、Gitの使い方もよく分からず苦労しました。（GitHubなどを使うために）これまでにprogateをちょっとやったり、『わかばちゃんと学ぶGit使い方入門』という本で勉強してはいたけれど、いまいち使い方が分からない状況でした。
でも制作途中でコードを改良していく時に、既に動くようになったものを絶対に壊したくなかったので、コードをグチャグチャにしてしまっても前に戻れるように、Gitに関する色々な記事を読んで使い方を身に付けることができました。
ー作品完成後のブログ制作について教えて下さい。
はい。『無限いいね』の完成後、作品の開発過程を記録するために『ねむみの極み』というブログを作りました。
技術的に新しい挑戦をしたくてHUGOというCMSを使い、テーマ作成から行いました。
HUGOはWordPressと比べてマイナーなので、テーマ作成方法に関しては書籍もないし日本語の情報も少ないので大変でしたが、ひたすら検索したり英語の公式ドキュメントを一生懸命読んだりしてなんとか作り上げました。
完成したブログには、今回のアプリ制作で苦労したAjaxについて、『PHPやJavaでAjaxを実装する方法』という記事でまとめています。
デザインはよく使うTwitterをヒントにXDで
ーデザイン作りには何を参考にされましたか？
私はTwitterが好きで普段からよく使っています！
今回Twitterのデザインを参考にして開発し、特にボタンの【作成】と【サンプル文を使う】の部分はTwitterの青い色の配色を取り入れてみました。
他に『Webデザイン良質見本帳』という本がデザインの学習に良いなと感じ普段から使っています。
ーWebサイトの画面は、どのようなツールで制作されましたか？
「AdobeXD」という製品デザイン・レイアウト作業に適したツールを使って作りました。XDは、動作が軽くて無料で使えるソフトなので画面設計をしたりWebデザインを作るときに良いです！
Tips:Adobe XDは、WebサイトやモバイルアプリのUI/UXデザインができるツールで、macOSとWindowsで利用可能です。XD をダウンロードしてインストールする方法は、下記をご覧ください。
食らいついていく力をアピールしてSES就職に繋げたい
実際『無限いいね』は自己満足アプリなんです。
だけど自分の勉強にはすごくなったんですよね、そこが今回の肝だなと私は感じます。
出来上がり、見た目はすごく質素なものだけど作って公開するまでの過程で小規模ながら設計から完成、公開まで一連の流れに挑戦出来たからです。
今回沢山の技術を勉強して、自力でやりきったという経験をした事は自身の強みになると思っています。
もし働き始めて、業務で分からないことが発生しても自分で調べて作れますよ、という食らいつく力をアピールして、東京でSESエンジニアとして働けるように就職活動をしていきます。
今は個人アプリなどは何も作っていなくて、今度受けようと思っている基本情報技術者試験の試験合格する為の勉強に専念をしています！
まとめ
あみぃさんのお話を聴いて特に印象深かった点は以下の3点でした。
●実装で詰まった時は別の言語で解決策を調べた後に、詰まった言語に戻り実装方法を考えてみると良い。
●新しい技術を使っていこうというチャレンジの姿勢、ブログの作成にはHUGOを使って開発をする事が出来る。 ●AdobeXDは動作が軽くて無料で使えるソフト、Webデザイン・レイアウト作業をするのに適したツールだという事。
ーあみぃさん、ありがとうございました(^^)
TechCommitでは個人アプリ開発・学習仲間を募集中です。今後も個人アプリを開発したメンバーのお話を『個人アプリ開発インタビューマガジン』にまとめていきますので、よろしければフォローをお願いします♪
もし少しでも役に立った、面白いなと思ってくださったら「スキ」や「フォロー」、「TwitterRT」で応援していただければ、とても嬉しいです♪
この記事が気に入ったらサポートをしてみませんか？