みんなの「作ってみた」

楽してWebサービス個人開発

2018/12/16

nittannittan

Android/iOS/Webアプリを趣味で開発しています。

はじめに

どうも、@nittannittanです。

趣味でAndroid/iOSアプリを作成しているアニメオタクです。
Webサービスも作れたら楽しそうだなーという思いとWebサービス作ったことないというくだらないコンプレックスを解消したいという微妙な動機でWebサービスを開発してみました。

Android/iOSアプリはライセンス料以外は無料で開発/公開をしていたので、Web版もできるだけ無料で公開することに決めました。

利用した技術

PHP
Javascipt
Laravel
Laravel Mix
Vue.js
Vue Router
jQuery
Bootstrap Material Design
heroku
postgres
Firebase

楽したポイント

各技術利用時に楽したなーと思ったポイントをまとめておきます。

Laravel Mix

PHPで簡単な開発はした経験があったため、PHPで一番人気がありそうなLaravelをフレームワークとして選択しました。

そんな中でフロントエンドは古き良きに従ってjQueryを利用する手もあったのですが、どうせなら新しいことにも手を出してみたいと思いLaravelの公式ドキュメントなどを読んでいるとLaravel Mixを見つけることができ公式ドキュメントに記載されているとおりにまったり実行してみたら動いたのでこれは楽だ！と思い採用しました。

Java/Kotlin/Objective-C/Swiftでコンパイルを経験しているためか下記コマンドで毎回コンパイルをしてくれるというのも違和感なく理解できました。

npm run watch

https://readouble.com/laravel/5.4/ja/mix.html

Vue.js + jQuery

ReactかVue.jsかで正直迷ったのですが、Vueの方が学習コストが少なそうだったためVueを選択しました。

ReactはReact Nativeでサンプルアプリを作成したくらいしか触ったことがないため、もしかしたらReactの方が楽だった可能性もあるかもしれません。

ｊQueryとの共存もVueは特に悩むこともなく自然にできたので苦労することはまったくありませんでした。

Reactの方がVue.jsよりここが楽だよ！という情報があれば知りたいです！私、気になります！（自分では調べない）

なんだかんだでjQueryはかなり普及して資料も豊富にネットにあるためちょっとVue.jsで困ったらjQueryに浮気もできるのは安心感もありました。BootstrapのjQueryで動作している部分ありますしね。

https://jp.vuejs.org/index.html

Vue Router

途中まで、SPAとしては作成していなかったのですが、Vue.jsをせっかく利用しているのにSPAじゃないのもなんか残念だなーと思い途中から書き直しをしてみましたが、こちらも楽に変更ができました。ドキュメントも豊富だったので数時間でSPA化もできてとてもテンションがあがりました。

ページ遷移時にヘッダーやフッターは再描画せずに一瞬でコンテンツが変わるのは利用していても気持ちがいいですね。

https://router.vuejs.org/ja/

Bootstrap Material Design

Bootstrapのみでサイトのデザインを作っていましたが、どうしてもボタンの色が足りずどうしようかーと迷っていた時にアプリデザインでもMaterial Designを採用しているのを思い出しました。どうせなのでBootstrap感覚で使えるBootstrap Material Designを利用しました。こちらもjsファイルを組み込むだけですぐに利用ができたのでとても楽でした。

https://fezvrasta.github.io/bootstrap-material-design/

heroku

スマホアプリと違いWebサービスは運用するサーバが必須になります。そこはできる限り楽がしたかったのでherokuにしました。コマンド数個で簡単に構築やリリースができるのは個人開発ではすごく嬉しいですね。ミドルウェアのインストールやアップデートなどの運用作業は趣味ではあまりやりたくないですからね。今は無料プランのため30分アクセスがないとインスタンスが停止してしまいますが今の段階ではそれでいいかなーと思います。必要があれば数回ポチポチするだけで有料プランにしてスケールアップできるのは嬉しいですね。はやく無料プランではだめなアクセス来ちゃったーなんで言ってみたいです。

herokuの無料プランだと1万レコードしかデータが登録できないので注意が必要です。

2019/01/26追記：インスタンスをずっと停止せずに利用したい場合は、クレジットカードを登録をすればいいようです。無料領域が開放されて幸せになれます（1アプリ限定）

https://jp.heroku.com/

Firebase

もう、このサービスなしでは楽して個人開発はできないといっても過言ではないかもしれませんね。
本当に楽させてもらっています。Android/iOSアプリの開発時にもデータ連携とユーザログインのために利用していましたが、Webサービスでもそれらを実現するために利用しています。

パスワードの管理や認証の実装などを全くせずに、ライブラリを利用するだけでユーザログイン画面などなどを実現できるのはとても夢が広がりますね。

https://firebase.google.com/?hl=ja

開発しているWebサービス（LAR）について

LARは放送時期（クール）ごとにアニメを一覧で見ることができるサービスです。
ログイン不要で自由にアニメの一覧が作成できる「おすすめアニメメーカー」などの機能があります。

放送クールごとの一覧表示
おすすめアニメメーカー
お気に入り表示（ログイン後のみ）
MY番組表表示（ログイン後のみ）

LARは、もともとスマホアプリが先にリリースされているため編集機能はスマホアプリで行うことができます。
（今後利用者が増えればWEB版にも編集機能を追加します）

https://latest-anime.herokuapp.com/