最近 dart + Flutter を覚えたので、アウトプット先として cc56 専用の進捗リストを作成しました。
ホームページ作ったhttps://t.co/KAEYfrabAU
— ピジョン (@hyper_pigeon) 2021年7月12日
機械学習とかをやっていると、フロントエンドやバックエンドから「おまｗそれプロダクトで役に立つの？ｗ」みたいな感じでナメられがち（体験談）ですが、こうやって新しく習得しやすい技術を使って相手の領域にどんどん殴り込んでいきましょう。踏み込みが大事です。
技術構成
- フロント: dart + Flutter
- バックエンド: AWS EC2 (t2micro/Ubuntu) + Apache
シンプルです。技術的に難しいことはしてないと思います。
かかった時間
だいたい金曜の夕方くらいから作業をはじめて、土曜に少し、日曜をフルで使って昨日の時点で完成していました。
ざっくり作業ごとに時間分けすると、表面的なものの作成に6時間、バックエンド操作に6時間、スマホ対応に4時間、細かい設定に6時間程度でしょうか。
バックエンドでは、Route53 + AWS Certificate Manager + Elastic LoadBalancer で https に対応したかったのですが、うまくいかず時間を消耗してしまいました。
ソースコードは、本体が375行、56項目の格納に340行程度です。
ポイント
メモも兼ねて2点紹介します。
1. Twitterとかにリンクを貼ったりしたときに出るサムネの固定
Twitterにリンクを貼ったときに出るプレビュー、あれがなんなのかわからず時間を溶かしていたのですが、Open Graph Protocol (OGP) というらしいです。
index.html の <head></head> 部分に以下のように追記する必要がありました。
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="http://54.65.108.118/"> <meta name="twitter:creator" content="@hyper_pigeon"> <meta name="twitter:title" content="cc56 progress"> <meta name="twitter:description" content="567収束までに56項目を達成できるのか…!?"> <meta name="twitter:image" content="http://54.65.108.118/assets/assets/web/ogp_thum.png">
このプレビュー機能自体が Flutter で書けると思っていて、Flutter preview Twitter web とかで検索をしていたので時間かかりました（知らないことは調べにくい）。
正体が割れてからは割と時間がかからなかったです。
ちなみに、実際に投稿したときの表示サムネチェックは Card Validator というTwitter公式の機能があり、以下から行えます。
2. 進捗自動計算機能
これを実装するには、ジャンルのそれぞれの項目に対して、進捗をリストに格納しています。
項目によって単位がバラバラなので int progress と int progressMax に分けて進捗を自動計算できるようにします。
例えば、なわとびだと5重跳び(int 5)のうち4重跳び(int 4)までできるので、4.0/5.0 で 80% です。
↓ソースコードはこんな感じのが延々と続きます。SQLやcsvで外部に保存しておこうか悩んだのですが、ちょっとめんどくさいので手打ちにしました。 いずれ対応するかもしれないし、しないかもしれません。
自動計算自体は簡単な2重forループですね。すべてを足し合わせると 5600.0 になるので、最後に56.0で割ってます。
// achieve double calcAchieved() { double totalProgress = 0; for (int j = 0; j < cc56.cc56subclass.length; j++) { for (int i = 0; i < cc56.todo[j].length; i++) { totalProgress += 100 * (cc56.todo[j][i].progress / cc56.todo[j][i].progressMax); } } totalProgress /= 56.0; return totalProgress; }
実際に書いていて、Webページを雑に C++ 的に書けるのが嬉しいなぁと感じました。（C++まったくわからない）
今後の課題等
ページがめちゃくちゃ重いです。バックエンドが t2micro とかいう激安インスタンスなのに加え、カスタムフォントやらfor文でアニメーションインジケータを書いてるので凄まじい重さです。まあそこまで多くの人が頻繁に見るものじゃなく、自己満足で作りたかっただけなのであんまり気にしてないのが本音ですが。
おわりに
実力的には、実際に職としているフロントエンドやバックエンドの人々にはまったく敵わないですが、Flutter を使うと素人目で見ればかなりいい感じのものが素早く作れると思います。また、56項目にWebアプリケーションを作る、というものも残っているので、これらと機械学習を組み合わせてなんか作ろうと思います。
というかここまで来て 16% しか達成してないってヤバくないか…？
