2021年10月18日月曜日

やる気があるときにめんどくさいことを整理しておく重要性

倉下忠憲さんの「すべてはノートからはじまる」にこんな一節がある。

特に意欲が高まっている序盤であればあるほど、実行に移したい気持ちが強まり、ノートなんて書いていられるかという気持ちが強まります。 

まさに今アプリづくりでその問題に直面している。

Vue.jsという自分にとっては新しいフレームワークを使い、Atomic Designなる耳障りのよい設計技法を取り入れながら、最終構想を頭の中に置きながら徐々に具体化していったアプリケーションだけど、高々最終更新から3か月たって覗いてみたら、もう全くわからないではないか!

また、あの頃は自信満々に書いていた書き方も、今見ると稚拙に見えてしまう... それは、過去の自分に正しく突っ込みが入れられるという意味で、自分が成長したという風にも言えるのだけれども、成長しただけでコードが直るかといわれるとそんなわけはなく。結局、未熟なコード(当時の最適解は大抵今の最低限である)といくつかのわかりにくいコメント(過去の自分は得てして今の自分には理解できないものだ)しか残っておらず、再構築や修正は困難を極めるのであった。

つまり、今の自分のやる気では、自分の生み出したソフトウェアに対してノートを書きはじめることすらできないのである。 

では、アプリを作り始めた時の自分にその設計思想をノートに記すだけの気持ちがあるかというと、それは冒頭の引用の通り全くないといっても過言ではない。 

そんな怠惰な僕らはどうすればいいのか

それも倉下さんの本に何度も出てきているが、ノートである。ノートに記せないなら、 ノートを作るだけでもいいではないか。 倉下さんは本の中でノートというものの定義をかなり拡張し、全ての記述物≒ノート、と定義づけているが、「ノートを作るだけ」というのはアナログノートではかなりハードルが高い。そのハードルの高さを見込んでか、冒頭でノートに関して「不真面目に」使うことを提唱しているが、さすがにいくら不真面目にと言われても物理的なノートの最初のページだけ使ってあとは使わないという事象や、一つのノートに(本当の意味でのじゆうちょうのごとく)複数テーマを盛り込んで記述するのは精神的ハードルが高い。 その点、デジタルノートはその心理的ハードルが低い。白紙ページはなく、いくら増やしても物理的に場所は取らず、あとで修正や検索もしやすい。 そういう意味で、「ただノートを作るだけ」という行為がとてもしやすい。 

始めた時点で終わりまで完走できる保証はない

ノートを作ったら、のちの整理がいるのではないか、と考えたけれども、そもそも始めたことを終わりまで実行し、完走しきる保証はない。自分の場合は始めたことの少なくとも50%は続かない。(50%でも控えめかもしれない)

というより、頭に浮かんだ時点でスタートとするならばその90%以上は消え去る運命にあるだろう。

ただし、その消え去った出来事も数年後に花咲く可能性はあるわけだし、その時点で、表紙に「〇〇ノート」があるのとないのでは障壁が段違いである。過去自分が考えたことであり、少しでもその決定の断片が見えれば、今回の思考にも生かせるわけである。

そういう意味で、たとえ完走できる保証がなくともノートは作っておくべきだ、と思うわけだが、思いつくたびに白紙のノートを買っていたのでは金もスペースも書きこむ鉛筆ももたないだろう。そこで、デジタルノートでまず項目を作って書き出しておくことが重要なのだ。むしろ、完走できる予定がなければないほど、最初のノート書き込む、という有用性は非常に大きい(主語がでかい)

短くても書くこと

ということで、デジタルノートが使える今、物理的なノートに対する成約はなくなり、明日終わるかもしれない人生をちゃくちゃくと記すこともできます。長さに制約はないですが、(本人が整理整頓を気にしなければ)(私の小学校時代は返事はいいけど整理整頓ができない、でした)、思いがなければ高々数10文字でおわるノートもあるでしょう。ただ、それでいいんじゃないかという気がしています。なぜならば、そこに記録がある、ということが、次回始めようと思った時の障壁をぐっと下げるわけで。

まとまりないですが、まず書く→そこから育てる、が重要なんですかね。

2021年5月5日水曜日

Vue.js + Dexie: tableの取得でちょっとハマった件 (未解決)

Vuejs Dexie tableの取得でちょっとハマった件 未解決.md

Vue.js + Dexie: tableの取得でちょっとハマった件 (未解決)

Vue.jsのデータ永続化にLocalStrageではなくIndexedDBを使ってみようということで、Dexieを導入。

チュートリアルに従って、まずこんな感じでDatabaseを作成。

async createDB(){ this.db = await new Dexie('testdb'); this.db.version(1).stores({friends: 'name, shoeSize'}); }

当然、この命令を毎回使ってやると書き込み、読み込みともにうまくいくんだけど、version(1)のkey nameを毎回定義しているイメージなのでなんとも気持ち悪い。なので、試しにdb作成後下記に書き換え。

async createDB(){  this.db = await new Dexie('testdb').open(); // storesの行を削除 }

存在しているDBを直接OPENしてやるイメージで、当然動くだろと思っていたら、データの追加や取得を下記コードで実行しようとすると、エラーが出る。

async addData(){ await this.db.friends.put({name:"Hoge", shoeSize:28.0}); }, async getData() { this.testdata = await this.db.friends.where('name').equals('Hoge').toArray(); }

エラーメッセージ: TypeError: Cannot read property 'put' of undefined

公式Docのこの書き方(Dexie.[table])に該当すると思うんだけど、tableを毎回storeしなければならないとは当然書いていないし、さすがにそんなことないと思うんだが…

logを確認すると、openまではうまくいってそうだけど、tableのアクセスがうまくいってない…

で、Docをさらってみると、もう一つtable関連の命令があった→Dexie.table()

変数として結果を保管するのは1.3までは危なかったけど、1.4以降は大丈夫だよ!という感じなので、基本は上のプロパティを使ってよ、メソッドも大丈夫だけど、ということか?

まあ、考えても他に手がないので下記に変更。

async addData(){   await this.db.table('friends').put({name:"Hoge", shoeSize:28.0}); }, async getData() {   this.testdata = await this.db.table('friends').where('name').equals('Hoge').toArray(); }

これでうまくいった模様…なんでだ?Vue.jsだから?

教えて偉い人!!

2021年4月27日火曜日

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

マグロクエストにつけたかった機能、今やるタスクのホーム画面への追加、を実装しました。
見た目はこんな感じです。

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

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

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

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


ムダにドーンとアニメーションが出ます!
タスクを完了したときの爽快感をつけたくて…笑

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

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

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



2021年4月19日月曜日

flutterでtodo listとBottomNavigationBarを実装

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

さて、flutterを触り始めて3日目。土日でチュートリアルを終え、いざアプリの開発に!と意気込むものの、何から手を付けていいかわからない。とはいえ、マグロクエストアプリの大枠は決まっているので、まずは下記の実装を目標。
  • Todo list
  • BottomNavigationBar
しかし、Flutterは日本語の良質な情報が少ない。英語も含めてサーフィンしながら見つけたのが、下記のサイト。


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

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

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

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


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

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




2021年4月16日金曜日

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

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


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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

!?!?!?

はやい!!!!はやすぎる!!!!

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

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

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

2021年4月14日水曜日

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

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

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

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

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

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

日々勉強…

2021年4月13日火曜日

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

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

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

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

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

2021年4月11日日曜日

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

大魔神戦 (あっさり)
 
やっぱりこういうでかい敵はテンション上がりますねー

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



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

そして黒衣の剣士戦

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

1回戦

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

2回戦

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

3回戦…

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

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

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

勝利!!

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

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



2021年4月10日土曜日

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

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

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

…え?てかなんでこんなことに!?


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

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

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

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

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

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

2021年4月9日金曜日

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

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

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

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

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

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

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

で、できたのがこちら。

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

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

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

2021年4月8日木曜日

ドラクエ10再開

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

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

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

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

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

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