評価コメントは個別に送らさせていただきます。
canvas-drawing
HTML5のcanvasを使い、ブラウザ上でお絵かきができるツールです。点と点を直線で結ぶだけだと円を描こうとした時に角が目立ってしまうので、2点間に2次ベジェ曲線を引くことで滑らかな線を表現しています。また、キャンバスの内容を全消去するボタン、キャンバスで描いたものをpng形式でダウンロードするボタンも実装しました。
コーディング技術 40点、アイデア 27.5点、完成度 26.25点、総合 93.75点
早いメモ
HTML5の機能の一つであるWebStorageを利用してWebアプリケーションながらローカルにデータが残りサーバー上にアップロードされないセキュリティと高速な読み込みを実現しました。
タイトルと本文をセットで保存してタイトルの並んだリストを表示することで編集します。もちろん新規追加も可能です。
また拘りとして保存アイコンがFDではなくZIPディスクになっています。
コーディング技術 37.5点、アイデア 25点、完成度 21.25点、総合 83.75点
Mental arithmetic training
暗算の練習ができます。
コーディング技術 35点、アイデア 20点、完成度 23.75点、総合 78.75点
ドットアニメイカー
8ドットx8ドットか16ドットx16ドットのアニメを作れます。
コーディング技術 35点、アイデア 28.75点、完成度 27.5点、総合 91.25点
会議給与カウンター
はじめて作ったwebアプリです。
上の人が会議中に寝ていたことにイライラしたことをきっかけに、
自分が参加している会議でどのくらいのコストがかかっているのか確認・可視化したく作成しました。
定時外（17:30-8:59）の間は非管理職は（マリオのスター状態のイメージで）割増の単価で計算されます。
ブラウザで動きますが、
（とてもくだらないため＆傍から見ても気づかれないように）
表計算ソフト風にしている部分が工夫ポイントです。
また、1万円加算されるごとに諭吉さんがページ下部に生成されます。
またメモ帳で会議のログを出力・保存もできます。
本当はログから正規表現を使って単語を抽出し、別の文章にしたかったです。。悔しいですが時間切れです
（あと途中で人数変わった場合、累計額で給与計算されないことに最後に気づきました、、時間切れです。)
途中から人数変わらない前提で使ってください。
コーディング技術 31.25点、アイデア 27.5点、完成度 25点、総合 83.75点
Simple Clock
時刻によってフォントが変わったり、背景色が変わったりするシンプルな時計です。
コーディング技術 25点、アイデア 17.5点、完成度 16.25点、総合 58.75点
ポモドーロタイマー
有名な時間管理術、「ポモドーロテクニック」のタイマーを作りました。今回のテーマが「動く Web ページ」ということで、起動時にアニメーションをするように実装しました。
コーディング技術 31.25点、アイデア 22.5点、完成度 23.75点、総合 77.5点
MyCollections
自分の持つ本や視聴した映画などをリストとして残しておきたいと思い作成しました。書き込んだ内容をlocal storageに保存＆取得というところまで作ろうと思い試行錯誤しましたが、私にはまだ早かったようなのでもっと勉強していつの日か実装出来たらいいなと思っています。
コーディング技術 26.25点、アイデア 20点、完成度 18.75点、総合 65点
くるくる顔文字
Created by Kの文字と顔文字を回してみました。
コーディング技術 22.5点、アイデア 10点、完成度 10点、総合 42.5点
付箋アプリ
付箋が優先順位の高いものは右に、低いものは左に追加されるものを作りました。ドラッグ＆ドロップを実装して自由に位置を変えられるようにしたかったのですが、追加した要素の移動ができなかったため諦めました...。
コーディング技術 27.5点、アイデア 18.75点、完成度 18.75点、総合 65点
VideoNote
テーマが「動くWeb ページ」なので動画再生プレーヤーを作りました。動画上をクリックするとタイムコードをTweetできます。
コーディング技術 32.5点、アイデア 17.5点、完成度 18.75点、総合 68.75点
E217系側面行先表示機
東日本旅客鉄道株式会社（以下「JR東日本」という。）所属車両のE217系電車（以下「E217系」という。）の側面（電車側面上部のラインカラー。以下同じ。）の行先LED表示機（以下「行先表示機」という。）をWebブラウザ上にて再現したものです。
このアプリケーションは、種別（列車種別。以下単に「種別」とする。）と行先（列車の最終到着駅。以下単に「行先」とする。）を表示することができます。
操作方法は、種別行先指令表の中の番号を確認し、その番号を選択し、行き先表示指令スイッチをクリックすると番号に対応する内容の種別行先が表示されるというふうになっています。
なお、本アプリケーションに使用しているLED行先表示画像はLED再現Wiki（運営者：TwitterID:Hajime_Izayoi）に令和元年8月22日に申請し、令和元年8月23日に使用許諾を得て、その許諾のもとに使用しています。
コーディング技術 20点、アイデア 12.5点、完成度 16.25点、総合 48.75点
明日は何に挑戦する？
明日はこれをやってみよう！と小さなことでも目標をつくれば、よりよい日常生活を送れるだろうと思い、作りました。
プログラミングを初めてまだ1ヶ月ほどなので、お手柔らかにお願いします笑
コーディング技術 27.5点、アイデア 17.5点、完成度 21.25点、総合 66.25点
オセロ
CPUと対戦などできます 製作途中に出たバグのモードを作ろうとしましたが、間に合いませんでした；
コーディング技術 32.5点、アイデア 20点、完成度 25点、総合 77.5点
マウスクリック計測ツール
一定時間中のクリック数を計測するためのツールです。
コーディング技術 26.25点、アイデア 22.5点、完成度 20点、総合 68.75点
あなたの！英文読解速度計測
テキストエリアに英文をcopy & pasteで入力し、読解にかかる時間を計測するアプリです。TOEIC等の英語試験対策のために作りました。試験では、限られた時間で長文を読解する力が求められることがあります。読解速度を上げるためのトレーニングツールとして使っていただければと思い、GitHub Pagesでも公開しています。( https://pandanoranran.github.io/measurement/ )
コーディング技術 33.75点、アイデア 20点、完成度 21.25点、総合 75点
Click-Target
（※説明を修正しての再（前回二重送信だったので再々）応募です。すみません）
「キック・ターゲット」（サッカーボールを蹴って1～9の数字の書いた的に当てるゲーム）からの発想で作ったゲームです。自分でアプリを作るのは初めてでしたが，授業で習ったことを応用して作りました。
コーディング技術 25点、アイデア 20点、完成度 17.5点、総合 62.5点
プログラミング用タイピング練習アプリ
プログラミングに特有の記号や言葉を重点的に練習できるタイピング練習アプリです。練習を通じて構文などが自然と覚えられるメリットもあります。
コーディング技術 35点、アイデア 22.5点、完成度 18.75点、総合 76.25点
補色メーカー（Complementary Color Maker）
画面上のボタンを押すことでランダムに2色（一対の補色となる組み合わせ）の色が生成され配置されます。色の配置パターンも数種類のパターンからランダムに決められるようになっています。これらの動作はjavascriptによって記述されています。
コーディング技術 32.5点、アイデア 22.5点、完成度 23.75点、総合 78.75点
雲の画像、言葉のページ
自分で撮影した雲の画像と著者が死後５０年経った著作権的に問題ない作品から引用できています。画像と言葉を選んでアニメ風に加工ボタンを押すと加工された雲の画像に切り替わります。画像の加工はPhotoshopで行いました。
コーディング技術 22.5点、アイデア 16.25点、完成度 17.5点、総合 56.25点
Englishでバトル
動物の名前を英語で答えるクイズゲームです。
初級編、中級編、上級編の3つのステージがあります。
最後の花火は先生の花火を見て最後に付けようと思いコンソールからソースコードを見たのですが、僕には難しかったし、ライブラリも使っているかもしれないと思って、先生の花火とはだいぶ違いますが、自分なりに工夫しました。
動物の写真は自分のペットで敵の絵は自分でイラストレーター描きました。
スマホなどで見るとボタンの位置が変わったりごちゃごちゃになってしまうけれど改善策まで至りませんでした。
コーディング技術 27.5点、アイデア 17.5点、完成度 21.25点、総合 66.25点
砂時計タイマー
３分間を測れるタイマーを作成しました。時間経過で砂時計の画像が変わります。
コーディング技術 25点、アイデア 17.5点、完成度 15点、総合 57.5点
入門コース第１章・第２章復習チェックテスト
N予備校入門コース第１章・２章で習ったこと(主にコマンド)をタイピングゲーム形式で復習できます。
コーディング技術 32.5点、アイデア 21.25点、完成度 11.25点、総合 65点
おみくじ
ボタンを押すとおみくじを出力するWEBアプリです
コーディング技術 25点、アイデア 12.5点、完成度 13.75点、総合 51.25点
なんでも言ってくれるあかねちゃん
なんとなく山にキャンプしてる気分にひたりながら、あかねちゃんにへんなことを吹き込んで楽しむ作品です。
コーディング技術 36.25点、アイデア 20点、完成度 26.25点、総合 82.5点
旗つけゲーム(旗上げゲームもどき)
「赤上げて 白上げて」でおなじみの旗上げゲームを作ってみました。(赤と青ですが)。1.ウォーミングアップ 2.実践 3.脳トレ 4.新感覚？ の4ステージあります。
コーディング技術 21.25点、アイデア 23.75点、完成度 16.25点、総合 61.25点
GATY search
Google, Amazon, Twitter, Youtubeの検索ができるサイトです。ガーティーサーチと読みます。（名前はGAFAを少し意識しました）
自分がよく検索するサイトをより使いやすく検索できるようにしたくて作りました。デザインは有名なサイトをモチーフにしました。
未入力の状態でボタンを押すと、各サイトのトップページにアクセスします。
Google翻訳ボタンでは、言語を自動選択して日本語に翻訳します。
Twitterボタンでは、先頭に@マークを入力するとそのIDのアカウントへ、直接アクセスすることができます。
I'm Feeling Luckyボタンでは、この中のサイトからランダムで検索します。
最新のGoogle Chromeで正常に動作します。またほぼ同じ内容のものが作品内右下の『このサイトについて』に書いてあります。
コーディング技術 32.5点、アイデア 20点、完成度 20点、総合 72.5点
瞬間英単語・瞬間韓単語・瞬間中単語
通学コースの瞬間英作文を真似て作りました。作った理由としては、N高通学コスには単語を学習するWeb教材がないため、なら自分で作ってみようと言うことで作りました。単語は１レベル１０問で、１０レベルで１つのステージになっています。このサイトでは、Cookieを使用して、自分が累計何問正解したか確認できるようにしました。今後も単語は増やしていく予定です。
コーディング技術 21.25点、アイデア 21.25点、完成度 20点、総合 62.5点
文字数を数えます。
文字数を数えてくれるアプリ
コーディング技術 28.75点、アイデア 15点、完成度 18.75点、総合 62.5点
#CSSTG
CSSジャンキーなのでJSを使わずHTMLとCSSだけでシューティングゲームを作りました。過去作品と方向性は全く違いますが一応動くWebページです。
的はCheckboxなので二回クリックしたら点数が元に戻る点など問題は山積みですがとりあえず動くのでOKです。
あとCheckboxなのでTabとSpace交互に連打すれば満点取れます。
コーディング技術 28.75点、アイデア 23.75点、完成度 15点、総合 67.5点
タイピングゲーム「JavasQuest」
タイピングを行うことで3Dダンジョンを進み、ボスを倒すゲームです。canvasという機能を使ってダンジョンを描きました。絵はスマホのドット絵ツールで描いたものです。GitHubのページも作ってみたのでそちらのURLも載せてみます。https://github.com/nzld1818/JavasQuest/
コーディング技術 30点、アイデア 26.25点、完成度 21.25点、総合 77.5点
パワースポット診断
あなたにピッタリのパワースポットを診断してくれます。
まだまだ初心者ですが、授業を見返したり、調べたりしながら作ることで理解を深めることができました。
コーディング技術 30点、アイデア 13.75点、完成度 13.75点、総合 57.5点
占いメーカー
4種類の異なる占いができるWebページです。ふわふわさせたり震えさせたり星を降らしたりなど、様々な動きをつけてみました。
コーディング技術 23.75点、アイデア 16.25点、完成度 18.75点、総合 58.75点
アニソンおすすめ診断アプリ
自分のおすすめしたいアニソンをたくさんの人にこういうアニソンがあるんだと興味を持っていただきたいと思って作りました。
ランダム関数を使ってランダムにすることで何回診断しても違った結果を出せるようにしたことと、自分の中で最も勧めたいアニソンに絞って60個の診断結果になったことが今回の作品のこだわりです。
アニメーションではシンプルでアニソンやアニメをあまり見たことのない人たちでも気軽にできるようにしました。
コーディング技術 28.75点、アイデア 13.75点、完成度 18.75点、総合 61.25点
スザク様のクイズ！
onclickとfunctionだらけでコードは汚いですが、1から作ったので見てくれたら嬉しいです！
コーディング技術 21.25点、アイデア 16.25点、完成度 13.75点、総合 51.25点
Cider.
サイダーをモチーフにして泡がゆらゆらと動くwebサイトを作成しました。
ボタンを押すとバブります。是非クリックしてみて下さい！
コーディング技術 31.25点、アイデア 16.25点、完成度 25点、総合 72.5点
おみくじ占い
簡易おみくじアプリ。1日に取るべきカロリー量を適当に出すアプリがあれば面白いのではないかと思ったので作った。占いかは少し疑問だがそれぞれ取るもの[塩分,カロリー,カフェインなど]や取る量[1~1000mg]や最後の言葉[そしたら何かが見えてくるでしょう。]などそれぞれ独自の言葉を作ったので同じような結果になることは少ないでしょう。またその言葉をツイートできます。工夫点としてはとにかく使いやすいようなユーザーインターフェースです。背景のCssAnimationは正直邪魔くさいかもしれませんが他の部分はとにかく説明しなくても使えるようにしました。スマホでも見れます。
コーディング技術 25点、アイデア 13.75点、完成度 23.75点、総合 62.5点
werewolf
timer.html
werewolf.html
このアプリは、対面で人狼ゲームをする際に必要な役割、GM(ゲームマスター)をアシストするアプリです。自分がGMをするときに、こういうものがあったらいいのに、と思ったことが始まりでした。
コーディング技術 21.25点、アイデア 21.25点、完成度 17.5点、総合 60点
テレビでよく見るアノ単位に換算してくれるヤツ
平方kmのものを、テレビでよく見る「東京ドーム」何個分や、「日本」何個分などに変換してくれるサイトです。
これまでHTMLやCSSはニコニコ大百科の編集やポートフォリオの作成などで実際に触って公開したことがありましたが、JavaScriptを実際に触って公開したことは今回が初めてになります。
予期しない挙動（特に選択プルダウンの取得辺り）で難航しましたが、公開できたので良かったです！
コーディング技術 27.5点、アイデア 15点、完成度 18.75点、総合 61.25点