前回、「WEB サービス作りました。」っていうタイトルの記事を上げたのですが、
また WEB アプリを作りました。
「1h.」です。
今回は 2 週間どこまでできるか挑戦しました。
目次
で、どんなサービス？
- ソリッドでかっこいい匿名掲示板
- コメントは一定時間で削除
- 掲示板自も一定時間で削除
- SPA にする。
以上のお題で、「1h.」という名前の掲示板サービスを作ってみたかった。
作業時間
作業期間 2 週間と言っても本業が有るので、
平日はだいたい取れても 2 ～ 3 時間くらい、土日は 6 時間くらい。
なので、トータル 30 時間くらい。
この辺は徹底するなら、今度からは時間の計測も必要かもかもしれない。
フロントエンド(js)
今回も Vue.js をメインで使用。
http クライアントには、axios と FetchAPI を使用。
これで jquery から離脱。
開発時に、サーバーサイドの express と、vue-cli 内蔵の開発サーバーで
ポートが競合するから別ポートつかってたら、CORS に合致して post ができなくて、
vue-cli は途中からビルドだけして API のサーバーに HTML 他の配信もさせてた。
この辺は、自分の整理のためにも別記事にまとめておきたい。
少なくとも、ページの配信元と api のアクセス先がどっちも localhost でも、ポートが違うと CORS になるよという話。
フロントエンド(css)
前回の POSTSON で vue.js と Bootstrap を組み合わせて使ったら、
ものすごい大変だったので何かいい CSS フレームワークを探してたんだけど、
装飾もうるさくなくて、というかものすごいシンプルな、「Skeleton」を見つけた。
Vue.js に入れ込むときにグリッドの実装もクラス付与だけだし、すごくいい感じ。
この位シンプルだと、ページごとのカスタマイズをするのもやりやすくて、助かる。
使用候補に「BULMA」とか「Materialize」、「Pure」もあったけど今回は見送り。
この辺はググっただけ。
バックエンド
今回は DB の操作部分と、API の処理部分、定期処理部分でファイルを分離して実装してみた。
POSTSON の時は、API の実装、定期実行のメール送信処理、定期削除処理を別個に作ったのだけど、
同じ DB にアクセスするなら、接続パラメーターとか 1 ファイルで集約されているのがいいというのが学びだったので、その通りに実装。
非常メンテナンスしやすくなった。
クラス分離は適宜必要だなという実感。
昔 C++よく書いてた時はよくやってたし、これからも機能次第で実装は分離すると思う。
見通しのいいコード最高！。
バックエンドの実行自体は、また「forever」を使ってる。
データベースはいっつも通りの Mariadb。
デバッグとアップデート、リファイン
今回友人にベータ版として、URL を公開して、テスト利用してもらってみた。
自分では気が付けないこともあったし、それを即時に修正していく作業ができた事も収穫。
devops とかアジャイルしているとかそういう人たちの感覚ってこんな感じなのかも。
サービスの開発者と利用者が近いってのは楽しそうだ。やっぱり。
よく分からないこと
github のアカウントは持っているのだけど、
「公開してるサービスのコードを公開するのってどうなの？セキュリティ・・・。 」
と思って、POSTSON も今回のも公開できそうにない。
接続パラメーターとかだけマスクすればいいのかな？
個人開発者の github 利用のポイントとか知りたいけど、何処にあたっていいのか今のところよくわからなくて、
hexo テーマのプルリク送ったのだけ上げてある。
でも、CSS のテーマとかだと気兼ねなくアップできるかもしれない。
最後に
「1h.」ぜひ使ってみて下さい。
もし、よかったら twiter に意見ください。
可能な限り良くしていきたいです。
ではでは。
余談
11/27 にobniz×M5Stack×NefryBT 三つ巴 Meetup!【ESP32 開発ボード LT 祭】
に行ってきた。
LT も面白くて、デバイス × インターネットまさに IOT な会だったんだけど、
作ってるドアセンサーのために RaspberryPi3B+を起動しっぱなしにするのは、
もったいないなと思っていたので ESP32 のボードで作ろうかと思ってる。
サーバーマンデーに決済したいから amazon のカートで待機しているけど、早く注文確定したい。
それまでに MQTT と IFTTT の調べておこう。