思考のジャンプ幅が狭いなら,飛ぶ回数で補えばいいじゃない!!

非情報系30歳が競技プログラミングやWeb開発を始めるとどうなるか?

AtCoder AC Steps:1行もコード書かずにWebアプリのモックアップをリリースしてみた

目次

結論

  • 成果物

  • モックアップを手軽に作って共有したいときは,GlideGoogleスプレッドシートがあればよい.

  • コードを1行も書く必要はないため,初心者にはお手軽に「何かできた!」という感覚は得られる.

  • 実質45分程度(見た目の細かい調整は除く)でリリースまでできたことに感動した.

  • 元記事にもあるように,現時点ではネイティブアプリには及ばない部分もある.動画再生はできないなどの制約も.

皆さまへのお願い

  • ACを阻んだ要因について,必要な項目もしくは不要な項目などがありましたら,ご一報いただけると幸いです.

  • このほかのご要望・ご指摘も大歓迎です.

試したこと

前準備

  • インターネットに接続できる

  • Googleスプレッドシートが利用かつ編集できる状態にある

  • Gmailのアドレスがある

  • 作りたいアプリのイメージがある

AtCoder AC Stepsとは?

  • AtCoderで出題された問題について,AC(Accepted)できなかった要因について記録を取るアプリです.

  • 利用方法:ACを阻んだ各要因について,どの程度達成できたか/できなかったかを★マークの数(多いほどACに近づいていることを表す)で記録します.

f:id:hiro_kato:20190506232333j:plain
ABCのHome画面:ABC125の例

f:id:hiro_kato:20190506232320j:plain
詳細画面

凡例の候補

  • 解けず:問題を解けず.

  • 発想:思いつけば比較的簡単.そう思いつきされすれば…

  • 方針-着手:手も足も出なかった.

  • 方針-詰め:途中まで考察できたものの,最後の詰めまで至らなかった.

  • 理解:解説などを読んだが理解に時間を要したもしくは理解があやふや.

  • 実装:考察できた(理解した)ものの,実装できなかった.

動機・狙い

  • AtCoderのコンテスト本番や過去問で解けなかった問題について,弱点を明確にする&克服するために記録を残すことを考えました.

  • 需要があれば,Webアプリ化して公開できたらと考えています.

手順(ほぼ解説記事通りです)

事前準備:スプレッドシートを用意.

f:id:hiro_kato:20190506232338j:plain

1. Glideにアクセス.

2. Create an appを押す.その後Sign Upを押し,Gmailのアカウントでログイン.

3. 画面左側にあるNew Appを押す.

4. 用意しておいたスプレッドシートを読み込む.

f:id:hiro_kato:20190506232343j:plain

5. 見た目を調整.

  • ここに一番時間がかかりました.

  • 大まかには,左側が「どんなことをしたいか」,右側が「その詳細を変更する」ことに対応

f:id:hiro_kato:20190506232324j:plain

f:id:hiro_kato:20190506232329j:plain

6. 任意のURLを決める.Settingを押すと,APP URLを入力できる.

f:id:hiro_kato:20190506232349j:plain

7. リリースは,左下のopen appを押すだけ.

工夫した点

  • ★マークのレーティング機能がなかったため,Choice(選択肢)と別シートに★マークを6種類用意して代用.

明日以降の課題

  • Webアプリとして公開できるように,基礎的な技術(HTML5,CSS3,Javascript,DB,Railsなど)を習得する.

  • 将来的には,ユーザの★マークの統計を取る機能や,そこから現時点でのオススメ問題を提示するといった機能が提案できたらいいと考えています.

参考資料

go.glideapps.com

qiita.com