100 DAYS / 100 APPS

1日1個、Webアプリを作って公開する実験と記録

5 / 100公開済み

X@haranishi_ikki GITHUBharanishi/hundred-days
公開アプリ5本
総制作時間2時間5分
制作日数5日

TAGS

公開したアプリ

新しい順

Day 005公開中

その写真、何色でできてる？

画像をドロップすると主要な6色を取り出して、カラーコードをタップでコピーできる。処理はすべてブラウザの中だけで、画像はどこにも送信されない

  • canvas
  • design-tool
  • vanilla-js

所要時間40分

アプリを開く
制作メモ
AIに任せた
メディアンカット法の選定と実装／サンプル画像3種を実行時にcanvasへ手続き描画するコード（画像ファイルを同梱しないための設計）／要件定義の下書きと実装
自分でやった
4候補（帰省スマホ設定／会議コスト計算機／カラーパレット抽出／構造化データ生成）から作るものを選ぶ判断
失敗と修正
サンプル「夜の街」の初版は、細い窓のネオンが120pxへの縮小で壁の色と混ざり、パレットが紺系ばかりになった。ピンクもシアンも1色も出ない → ビル1棟の窓を同系色に寄せ、壁いっぱいの大型ビジョンと路面の反射を面で入れて、縮小後もピンク・シアン・アンバーが残る構図に描き直した
べた塗り3色の画像で、同じHEXのスウォッチが2枚並んだ。メディアンカットは画素数で箱を割るので、純色だけの箱と純色＋境界画素の箱が同じ平均色になることがある → 平均色が同一HEXになった箱は1つにまとめて画素数を合算した。まとめた分だけ色数は6より減るので、コピーのボタン表示も実際の色数に追従させた
Day 004公開中

奨学金、何歳まで返す？

奨学金の返還年数は自分で選べず、借りた総額で自動的に決まる。JASSOの算出表どおりに計算して、返し終わる年齢と毎月の返還額を出す

  • calculator
  • vanilla-js
  • no-dependencies

所要時間30分

アプリを開く
制作メモ
AIに任せた
JASSOの返還年数算出表と返還例の調査／第二種の計算式を公式返還例60件から逆算し、6モデルを比較して決定／要件定義と実装／公式返還例70件との突き合わせ検証
自分でやった
3案（会議コスト計算機／奨学金返還シミュレータ／構造化データ生成）から作るものを選ぶ判断
失敗と修正
最初の提案時、返還年数をユーザーが自由に選べる前提で画面を描き、利率も0.9%という古い値を使っていた。実際のJASSOは返還年数を貸与総額から自動決定し、利率も大幅に上がっていた → 公式の算出表を取得して実装し直した。第一種は公式返還例10件と完全一致することを確認。利率は変動するため断定表示をやめ、公式返還例と同じ0.5/1/2/3%を選択肢にした
第二種を単純な元利均等で計算すると、公式の返還例より最大1.2%低く出た → 据置期間の扱いが違う6つのモデルを公式60件に当てて比較し、誤差が最小（総額+0.03%以内）の「据置6か月分の利息を別途上乗せ」を採用した
ブラウザで確認したら、第一種を選んでも利率欄が消えなかった。DOMではhidden=trueなのに表示されていた → 自作の .field { display:flex } が、ブラウザ標準の [hidden]{display:none} に勝っていた。[hidden]{display:none !important} で打ち消した
公開前のファクトチェックで、第一種の貸与月額から50,000円（私立・自宅外）が抜けていることが分かった。私立大学で自宅外通学の学生が自分の額を選べない状態だった → JASSOの月額表を4区分すべて取得し直し、和集合の8段に修正。実際に選べない額が混じることはREADMEと画面に明記した
リーガル確認で、JASSO公式ツールとの誤認を防ぐ表示と、損害についての免責が無いことが分かった → ヘッダーに非公式である旨を常時表示し、末尾に免責を追加。JASSOのサイトポリシーでリンクは自由と明記されていることも確認した
JASSOのサイトポリシーに「許諾を受けていない無断転用は禁止」とあり、算出表16行を画面に再現している点が先方の掲示に反する可能性があった（著作権法上のリスクは低いと判断したものの） → 本人判断で表の全体再現をやめ、該当する1区分と実際の割り算だけを見せる形に変更。数字の羅列ではなく年数が決まる手順そのものが読めるようになり、結果的に主題は強まった
デモ動画を撮って気づいた。第一種から第二種へ切り替えると、月額が64,000円から90,000円へ勝手に飛んでいた。内部でスライダーのインデックスだけを共有していたのが原因 → 状態をインデックスではなく金額そのもので持ち、切り替え先に同じ額が無ければ最も近い額に寄せるようにした（64,000→60,000）
Day 003公開中

タップ花火

夜空をタップした場所に花火が打ち上がるおもちゃ。合成音つき・長押しで連発・放置でも自動で上がる

  • canvas
  • animation
  • vanilla-js

所要時間30分

アプリを開く
制作メモ
AIに任せた
要件定義と実装
自分でやった
作るもの・機能範囲の判断／1作目を不採用にする判断
失敗と修正
1作目のスクショ整形が微妙 → 夜に花火へ作り直し
Day 002公開中

ドット絵メーカー

画像をドロップするとドット絵に変換してPNG保存できるツール

  • image
  • canvas
  • vanilla-js

所要時間15分

アプリを開くX投稿（Day 002・新しいタブで開く）
制作メモ
AIに任せた
要件定義と実装
自分でやった
作るもの・機能範囲の判断
Day 001公開中

集中タイマー

時間をセットして開始・一時停止・リセットできる集中用カウントダウンタイマー

  • timer
  • vanilla-js
  • no-dependencies

所要時間10分

アプリを開くX投稿（Day 001・新しいタブで開く）
制作メモ
AIに任せた
要件整理と実装
自分でやった
作るものと機能範囲の判断
失敗と修正
Cloudflareキャッシュ混入 → 公開前に除外

ABOUT

大学生。毎日1個Webアプリを作って公開しています。
アカウント登録なし・課金なし・個人を特定できるデータは扱わない。作れるものの幅はDayが進むほど解禁していきます。

GitHub README でルールと記録を見る →

実際に操作しているところを録画したデモです