Web版マグロクエスト〜今日やること追加機能追加

マグロクエストにつけたかった機能、今やるタスクのホーム画面への追加、を実装しました。

見た目はこんな感じです。

久々にTODO画面以外をいじりました。

今回の実装でちょっと苦労したのが、todoコンポーネントの使いまわし。全情報を入れると見にくくなってホームに置く意味もなくなるので、タスク名だけのシンプルな感じにしました。タスクタイプに空文字を渡してfalse判定し、それ以外の部分をv-showで消す、という感じで共通化。大した工夫ではないんだけどいろいろとエラーが発生し、途方に暮れました…

ここらへんの共通化をがんばってやろうとすると、ものすごい数のプロパティになっちゃうんだろうなー。

で、ホーム画面でフィニッシュすると…

ムダにドーンとアニメーションが出ます！

タスクを完了したときの爽快感をつけたくて…笑

この、爆発機能は適当なコンポーネントとして作っておいて、色とかコメントとか工夫して色々使えるんじゃないかなと思ってます。

こういうのをまたflutterで実装することを考えるとかなりキツイですが、Web版は自身が最大のヘビーユーザーなので、どんどん改善が進む予定です。

よろしければ使ってみてください。

マグロクエスト

flutterでtodo listとBottomNavigationBarを実装

光陰矢の如し、毎週思うけれど土日はあっという間に過ぎ去り、決まって訪れる月曜日の朝。毎度のごとく子どもと寝落ちして、2時に目が覚め、眠気が来ないまま時は過ぎはや2時間。諦めて4時おきでドラクエ10やったりダラダラと過ごしだしたわけです。

さて、flutterを触り始めて3日目。土日でチュートリアルを終え、いざアプリの開発に！と意気込むものの、何から手を付けていいかわからない。とはいえ、マグロクエストアプリの大枠は決まっているので、まずは下記の実装を目標。

• Todo list
• BottomNavigationBar

しかし、Flutterは日本語の良質な情報が少ない。英語も含めてサーフィンしながら見つけたのが、下記のサイト。

https://dev.to/

技術情報に特化したブログサービスのようで、日本で言えばQiitaに近い感じ。

で、中身を漁ると、ドンピシャな記事を二本発見！

Todo List built with Flutter

Flutter: Simple Bottom Navigation Bar

特に、一本目の記事は、コードを書いて、直して、また書いて、完成したら今度はリファクタリングをして…というのを繰り返し記述してあって、自分の理解に非常に役に立った。

コーディング自体は完全に2つを組み合わせた写経で工夫もないんだけど、とりあえず完成！やっぱりなんだかんだ動くと嬉しい…

今回コーディングしてみてわかったのは、

• flutterはWidgetのライブラリが豊富なので、組み合わせでたいていできること
• 日本語の記事は少ない(かつ多重ネスト多め)ので最初から観念して英語で検索したほうが良い
• マテリアルデザインかっこよい
• flutterとAtomic Designは相性が良さそう

というところかな。

今日から出張だけど、仕事のPCと同時に個人PCも持参して、なるべくアプリの実装をすすめようと決意した朝でした。

Web版マグロクエスト 検索機能追加

Web版のマグロクエストについて、検索機能を追加しました。 

マグロクエスト

UIの変更はいろいろとやっていたけど、機能的には久々のメジャーアップデートです。

適当な文字を入れると絞り込み検索してくれます。

今のところ、単純な検索のみですが、イメージとしては「@」「！」「？」「〆」などの記号でタグ付き入力すると、タスクの絞り込みができるような使い方ができます。

将来的には、入力欄を工夫して、これらをタスクタイトルに自動折込できるようにしたり、繰り返しタスクの繰り返し間隔設定が容易になるようにしたい。

それと、今のところtodo画面に一覧表示、といった感じだけど、今日やるタスクみたいなのを一括取得してホーム画面に表示、一日はそのタスクだけに集中！みたいなことができるようにしたい。

アプリ化も並行してやらねばならないので、なかなか時間はないですが、どんどん機能追加したいね。5月前半くらいにはver.1がリリースできるようにしたい。

そのためには、どこまで行ったらver.1なのか明確にしておかないとな…

イメージは、こなれたUI、ホーム画面にtodo表示、入力欄の工夫、BottomNavigationの固定、くらいができたらかなぁ。

アプリ開発はflutterにしようと環境構築！

結局、通知機能はあまりうまく行かず、やはりネイティブアプリを作ろう！と思い立ち、またもやネットサーフィンの日々…

で、今のアプリの見た目や作り方を維持したくて、BottomNavigationBarを調べていたら、flutterというフレームワークを発見しました。まあ、2019年？くらいからあるらしいので、超新しい概念ってほどではないけど、Kotlin一択(実際はJavaもあるけど)だと思っていた中でちょっと興味がわき、調べてみることに。

環境構築に時間がかかる、(情報が少ないので)初心者向けではない、提供されているマテリアルデザインパーツがすばらしい、等々いろいろとあったけれども、下記の記事を見てとりあえず導入してみようと言う気持ちになった。

Android開発はFlutterでやる方がいい説

何しろ、ライフサイクルがわかりやすくて、hot reloadが速いというのが魅力的…

ライフサイクルについては、Web appでさえ非同期処理の理解に苦しみ一日潰した経験を持ち、さらにAndroidの複雑なライフサイクルについていける気がしなかったというのが本音のところ…

hot reloadについても、Android Studioのビルド→ランの遅さに、中国のネットワークのせいかもしれないとビクビクしながら待つ時間のストレスと言ったら…

と言うことで、導入。ネットワークが止まって停滞したところはあったけど、公式ページの言う通りにやればほぼノンストップで設定完了。環境構築で半日潰れるようなことはありませんでした。

で、無事にHello World...

ではなく、デフォルトでカウンターアプリが実行されました。このコードの中身にコメントが結構しっかり書いてあって、ざっくりと、flutterはどのように記述するかがわかるようになっています。

が、そうはいってもいきなり書け！と言われてもわからないわけで。特に、同じような名前のアンダーバーがついた何者かが大量生産されており、役割がわからず。

まず、コメントに書いてあるとおり、「試しに青を緑に書き換えて、hot reloadしてみなよ！」を実行…

！？！？！？

はやい！！！！はやすぎる！！！！

リロードまでに1secかかってない…このストレスフリー感はたまらない…打ってすぐ反映されるから、デバッグも簡単そうだし…もうあなたに決めたよflutter…Kotlinとどっちを使うか悩んだりしないよ…

で、そんなこと考えつつも、コードはかけないので、そんな僕らのために公式さんはちゃんとチュートリアルも用意していてくれて、今度こそ無事に？Hello worldできました！(スクショ取り忘れた…)

しばらくはこれでマグロクエストの再構築を図ろう。

Androidへの通知機能の実装に四苦八苦

PWAを導入してマグロクエストをアプリ化したので、次に目指すはプッシュ通知だ！サクッとお試し機能をつけよう！…と思ったら、全く動かない。

まず、Onesignal というサービスに登録。下記を参考に実施。

PWAでプッシュ通知機能を爆速で実装してみた。

サービスへの登録、通知の送信、まではうまくいったんだけど、どうも通知は届かない。なんか設定がおかしいんだろうなぁ。前の記事も読んでないし、そこらへんが問題だとは思うんだけど。

で、いろいろと調べていくと、どうもプッシュ通知ってのはそんなに容易いものではなく、しかも今回やりたいtodoリストの期限が来たらプッシュ、みたいな機能は、どうやら今作っている静的サイトだけでは不可で、何らかのサーバーサイドの実装が必要な模様。これは、Androidネイティブアプリにしても同様らしい。

うむー、これはかなりきついぞ…

ということで、firebaseに登録してみました。

日々勉強…

アプリ用イラスト書き始めました！

マグロクエスト用にいろいろとイラスト無料素材のサイトを漁ってみたけれど、どうも利用規約を見ると釈然としない。商用利用可、二次加工も可だけど、メインコンテンツとして使うのはNG、みたいなのが多いのと、HPで使うのは可、ただしサーバー等のハードディスクに保管して複数PCでの共用は不可、とか、なんだかよくわからない。まあ、商用で使うつもりはあまりないし(ちょっとはある)、おそらくリスクはないんだろうけど、何か気持ち悪い。

ということで、簡単なところは自分で書き始めてみようと思い立ち、早速書いてみたのがこれ。

なんか背景黒くなっちゃったけど、一応透明背景で、todoのタブボタンに使用予定。割とうまくかけた気がする。

ただ、使用ソフトのGIMPが難解。無料で超高機能なのはありがたいんだけど、OSの問題でオール中国語だし、どこに何が書いてあるかさっぱりわからない。ググって、メニュー画面と操作図を見比べて、何とか中国語を理解して操作、みたいな。あと、ソフト自体のアップデートが激しくて、少し前のネット情報とアイコンやら位置やらが変わってて、微妙に使えないという…慣れが必要だな…簡単なイラストから始めて、徐々になれていこう。目標は、まずは切り替えのタブボタン(HOME, BATTLE, TODO, OPTION)のイラスト化かな。頭にイメージはあるけど、また書くとなると時間かかるんだろうなー。

ウルベア大魔神と黒衣の剣士撃破！！

大魔神戦 (あっさり)

 
やっぱりこういうでかい敵はテンション上がりますねー

音楽もドラクエ5のボス音楽で、ブオーンを彷彿とさせる巨大敵相手の戦闘。楽しい…

戦闘自体は、大砲を打ったりメガンテロックが出てきて大爆発したりと、巨大敵に見合った大仰な感じで満足でした。

そして黒衣の剣士戦

で、黒衣の剣士と初の直接対決。強さは無駄に毎回強！！

1回戦

1回目は様子見で、無駄に育てきっていない仲間モンスターのデビルアーマーもといふどうあきらを入れての戦い。怪しげな術は使うが、基本は正統派の剣術使いと言った感じ。黄色になる前に戦死。

2回戦

2回目はフレンド、チームメンバーのサポを入れての戦い。HP黄色になって、余裕か？と思ったら、何やら剣が暗黒色に。いやいや、攻撃速度めっちゃ上がってるじゃないですか！油断して回復サボってたら爆死…

3回戦…

3回目はチーム構成改定。回復が追いつく？ように僧侶、賢者をそろえ、火力のためにバトマス投入。とはいえ、見ていると賢者はさっぱり回復してくれていないようなので、ボディーガードで逃げ回り、すきを見て遠くからこっそりバギムーチョかます作戦。

賢者って、サポのとき回復してくれるの？

HPが黄色になり、攻撃が激しさをましたふとした時に、冥王の鎌つかってみたら、なんとすっ転ぶじゃないか！おい、お前足元弱いな！剣士が足払いに引っかかっちゃだめだろ！

勝利！！

と思いながら、だましだまし転ばせたりしびれさせたりして、なんやかんや勝ちました！途中一人になってやばかったけど、救命の鎌で僧侶復活で持ち直し。範囲が広いのがいいね！赤になってからは攻撃通らなくなったけど、つまり魔障？に蝕まれていったイメージね。回復だけしていても良かったんだろうけど、すっ転ぶし、ぼちぼち攻撃しないとひっさつ使えないしなので、ほどほどに戦う、まるで俺のようだ…

無事ストーリーは進み、次はプクランドだー。

古代ウルベア地下王国クリア

 久々に再開したドラクエ。まずはメインストーリーということで、止まっていたウルベア地下王国の時を動かせはじめました。

※ちなみに、ウマ娘はもう飽きました

…え？てかなんでこんなことに！？

いやあ、悲劇…。姉さん悲しんじゃうでしょ…。

ドラクエって基本的にストーリー暗いですよね。

だから中国で全然流行らなかったって聞いたんだけど、成熟してきた今なら流行るんじゃない？

この前、中国人の友人にドラクエ10のストーリー伝えたら「え、なにそれ、名作！」って言ってたからねー。

そして、再起の女王とともにウルベア地下王国の再興が望まれるんだけど、未来はそんなにあまくないよね。てかこの頃の時代の王国全部滅びてるじゃん、エテーネだけじゃないじゃん、でもみんな再興夢見て時渡りって、結構すごい人たちだ。

スパスタ116でもストーリーボスクリアできそうなので、このままぼちぼち進めますかね。

PWAという概念を知ったので早速適用してみた

自作TODOアプリ→マグロクエストのWebアプリケーションからネイティブアプリケーションへの作り変えを模索していたら、PWAという概念に出会いました。

そもそもネイティブアプリ化したい理由は、通知やらなんやらができるようにしたいところ。TODOに通知機能は必須ですよね。

ウェブアプリだとそこらへんに限界があるので、ウェブアプリでとりあえず動くようにしてから、ネイティブアプリへの切り替え、というのが既定路線なんだけど、今書いているVue.jsの双方向バインディングとコンポーネントの考え方が便利すぎて、ものすごく尻込みしています。

さっと調べただけでも、Kotlinの双方向バインディングは学習コストが高そうだし、xmlとktコードが分かれていたり、膨大なライブラリに対する理解が必要だったり、もう考えただけで辛い(＝ある意味楽しい)ので、まずは逃げの一手でPWA化という手もあるのかなと思って調べ始めた。

で、下記のページを参照に適用してみた。

Vue.jsで作ったWebアプリのPWA対応とキャッシュ問題への対策

ほぼその通りに追加。ただ、記事内にあるmanifest作成ページがうまく動かなかったので、アイコンだけは適当に2サイズだけ作って完了。

で、できたのがこちら。

おお！ちゃんとアプリっぽい！

オフラインでもちゃんと動作します。すごい。

とりあえず、これでどこまでいけるか試してみて、ぶち当たったらKotlinの勉強に入るかな。

ドラクエ10再開

幸せな未来は「ゲーム」が創るという本を読んで、急激にドラクエ再開したくなり、昨日久々にログイン。

そもそも、ドラクエできなかった理由は国外からのアクセスができないところと、家のWi-Fiが極端に遅くてゲームどころではなかったこと。その改善のために、ルーターを変えたりVPNを変えたりといろいろやっていたんだけど、その「VPNを変えた」というのがいけなかった。

あまりVPNについて理解していないんだけど、VPNの種類によっては、日本のサーバーを経由しても国外認識されるようで、新しいVPNだとログインできず。

ただ、ソフトウェアバージョンではなく、ブラウザ版なら(なぜか)ログインできるというのはわかっていたので、そっちの契約をするという手もあったんだけど、よく考えたらVPNをもう1回線増やしたほうが安いので、前のVPNを再契約することにしました。

で、無事にできるように！4ヶ月ぶりくらいのログインだったけど、チームメンバーはあたたかく迎えてくれて、早速レベル解放クエストを一緒に。強ボスでやったら数回全滅の憂き目を見たけれど、なんとか撃破！いやー、楽しかった。

ということで、今後もぼちぼちやりますかね。