vue.jsでtodoリスト作成したった

ウェブアプリを練習で作りたくなったのでtodoアプリを作ってデプロイした。

手順などを記録しておく。

開発環境

macOS

firebase cli のインストール

npm install -g firebase-tools

多分yarn add でも可

todo list の作成

vueとjavascriptについてはまだあんまり理解していない。

[Read More]

AppSheet でゲーミフィケーション要素のあるtodoのアプリをつくったった

  • ノーコードでtodoアプリを作った。
  • その過程とハマったところを記録しておく。

ゲーミフィケーション

  • ゲーム感覚で日常のタスクをこなしていこう、というもの。
  • ゲーム感覚で楽しく取り組むための工夫についての学問がゲーミフィケーション。
  • その基本的なポイントとして報酬とペナルティがある。
  • 人間はスコアアタックに魅力を感じて、スコアをロストすることに嫌悪感を覚える
  • その習性を利用して日常の習慣をゲームにする。

ゲーム化したいこと

  • 私はストーリーに興味がある。RPGをやっていてもお話やキャラ同士の掛け合いに強く関心を持っていた。テイルズオブシリーズとか大好きだった。
  • そこで自分でもストーリーを作れるようになりたい。
  • その練習として即興小説を毎日書くモチベーションを作りたい。

ゲームの骨子

  • ゲームの内容としては、即興小説を毎日書くとスコアアップして、サボるとスコアがリセットされるようにしたい。

ノーコードでアプリ作成

  • 一度アプリ作成に取り組んでみたかった。
  • 私に現時点でアプリ作成の技能や知識はないので、その点を補助するツールが必要になる。
  • そこでノーコードでアプリを作成できるツールを見つけた。AppSheetだ。

AppSheet

  • Google が買収したことで話題になったノーコードでアプリを作成できるサービス。
  • 公式にデプロイするのは有料アカウントが必要になる。 個人でアプリのテストを行う間は無料なので、アプリを自分だけが使う場合には無料コースでも大丈夫。 試しに触ってみる。

手順

  • サインアップ。グーグルのアカウントを使った。
  • データからアプリを作成を選択。
  • 事前にスプレッドシートでどういう仕組みになって欲しいかを練れる。
  • スプレッドシートをアプリにするためのUIを自動で作ってくれるイメージで進められる。
  • スプレッドシートの内容をアプリにするイメージで進めていく。

完成品

  • ゲームのスコアに換算するタスクをメモする画面。
  • 達成したかどうかもメモ出来るようにした。

sFFppLC9lKbI3buFnlzA926bb3G3/X2ovK6qq9xA4xLmi.jpg

[Read More]