Presentation Support System(以下 PSS)はプレゼンテーションをより面白く行うためのシステムです。現状，プレゼンテーションの操作とリアルタイムのコメントシステムが実装されている。 コメントシステム部分の特徴として，コメントのサニタイズや記録をサーバー側で行うことで，クライアントで行う処理を最小限にしている。また，複数のクライアントが同時に接続して使用することも可能。 使用手順 (発表者側) ①-① 専用クライアントをダウロードして実行 ①-② その後にスライドのページごとの画像が含まれているフォルダを選択 ①-③ アカウント情報を入力してサーバーに接続 使用手順 (クライアント側) ②-① https://pss.seigo2016.com/ClientList にアクセス ②-② コメント可能なプレゼンが表示されているので該当するプレゼンを選択 ②-③ コメント入力・送信 環境 サーバー側 - Oracle Always Free - Python3.6.9 (Tornado, Socket) - Dockerコンテナ - Nginx Proxyコンテナ - Python3コンテナ - MariaDB 10.4.11 コンテナ クライアント側 - Electron 詳細 サーバーではnginxのproxyコンテナを通して，並列化が可能なPythonのライブラリTornadoを使用したPythonのWebアプリケーションコンテナで処理。ログイン処理やコメント・プレゼン記録をする際にMariaDBコンテナに接続する。 サーバーとクライアントの接続にはTLSでwrapしたSocketを使用。SQLiやXSSが通らないようにエスケープ処理等を行っている。 クライアントのログイン処理の流れとして，クライアントから初回接続時にユーザーIDとパスワードを送信。これをサーバー側で予め登録してあるBcryptでハッシュ化されたパスワードと比較する。成功した場合ユニークなtokenを発行し，接続済みのクライアントリストに追加，https://pss.seigo2016.com/ClientList に表示する。https://pss.seigo2016.com/Comment?cl={発行されたtoken} がコメント入力欄となる。コメントが入力された場合，サーバーでエスケープ・記録されたのち，有効なコメントがクライアントに送信される。クライアントで受信したコメントをHTMLの要素に追加し，style.leftの値を減らしていき，左に移動させる。一定以下の位置に来た場合要素を削除する。また，クライアントが切断された場合，接続済みのクライアントリストから削除し処理を終了する。ログインユーザーに提供されるダッシュボードでは，パスワードの変更・自分が過去に行ったプレゼンのコメント履歴(他人のコメント履歴は閲覧不可)を行うことができる。アカウント作成を行う処理とページも実装済みだが，いたずら防止のために無効化してある。 PR セキュリティ的な側面の学習も兼ねて，Bcryptを使用したパスワードの取り扱い・SSLを使用したSocket通信・ログイン処理やコメント入力画面でのSQLiやXSSへの対策を行った。 また，「Simple is the best」ということでデザインもできるだけシンプルにし，無駄なアニメーション等を排してわかりやすいUIを心がけた。 サーバー側で処理を行うことでクライアントの負荷を処理を軽減させている。

社会科の単語帳をみんなで作れます。社会は他の教科と比べて覚える内容が凄まじく多いので自分で覚えるだけでなく、他人と単語をシェアできたりして暗記できればいいなと思い作りました。 社会科の単語を自分で投稿したり、他人の投稿を閲覧したりすることができます。 自分の投稿ならば削除も可能です。世界史、日本史、地理、現代社会、論理、政治・経済と6つの教科があります。教科が6つあるのでそれぞれの投稿を教科ごとに分けて表示させるのを頑張りました。データベースの扱い方が難しく、苦戦しました。本当はまだまだ作りたい機能があったのですが、間に合わずシンプルな作品になりました。faviconも作成しました。ボタンのデザインにも少しこだわったのでよかったら見てみてください。

シンプルで使いやすいTODOアプリです。 まだNode.jsやフレームワークへの理解が浅く、外部認証などの機能を入れることができませんでした。

文字を投稿してそれに反応できるSNSです

ガチャを回して投稿を装飾する掲示板サイトです。

制作動機：レポートをしている際に自分や周りの人が一体どのくらいの分までレポートが終わっていてどのくらいのペースで進めればいいのかということに困っていたり、キャンパスに放課後、居残ってレポートをやるべきか、というのを調べる手間が時間の無駄だなと感じたため制作に至った。 機能：生徒用マイページの学籍番号とパスワードを入力して月を選択するとその月の分のレポートの教科ごとと全体の進捗率と残りのレポート数が分かる。 PR：レポートの進捗率を一々計算しなくても、瞬時に分かることで日々のモチベーション維持やレポートを進める予定を立てることができます。また、N高サイトへのショートカットも用意しています。 頑張ったところ：作ろうと思ったところからどのようにすればいいかというロジックを考えることを頑張った。また、アプリ内でウェブスクレイピングをしてから計算をするためにスクレイピングのことを学び、受け取った情報を加工するため色々な要素を学び、試行錯誤しながら作った。

「単語カード」をWEBアプリにしました。忘却曲線を考慮した繰り返し学習が行えます。

「ブレインストーミング」のようなものをオンライン上でできないかと思ったことがきっかけで、アイデアを出し合う時に役立つチャットアプリを作りました。 チャットルームの作成&作成したルームへの入室ができ、メンバーの距離が離れていても出たアイデアを共有することができます。 送信メッセージは一列に表示せず、付箋のような表示にして見渡しやすくしました。 Node.js/Expressで動いています。メッセージ周りやルーム機能はFirebaseのRealtimeDatabaseを使ってみました。

さまざまな場面で利用できるスコアボードです。2つ以上デバイスを用意するだけで簡単に利用ができます。 所属キャンパスにて行われた卓球大会のために作成したものにかなりの改良を加え、Webサービス化しました。 工夫点 スコア情報を一旦サーバーへ送り、クライアントへ返しています。そのため、ほかのユーザーが使っているとスコアなどの情報が混ざってしまうのですが、それぞれのユーザーごとにユニークなcodeを発行しているので、混ざることはほぼないと思います。 機能などについての詳細は作品トップページに載っていますので見ていだたけるとありがたいです。

自分で最初から作るのはやはり難しかったので、復習の意味も兼ねて三章をもう一回勉強し、ほんの少しだけですがオリジナル機能を付け加えてみました。handleDescription関数を用意し、掲示板の注意点や使用者が気持ちよく使える説明ページを作りました。お家の都合で開発期間が一週間もなかったので、セキュリティ面が全くと言っていいほど作れておらず、めちゃめちゃガバガバですがここは勘弁してください笑 パスワードも平文管理のため本当にガバガバです。 管理人→ admin apple guest1→ guest1 1234 guest2→ guest2 5678

入力した文字をインクリメントして一文字ずらして出力する

ログイン機能とログアウト機能をつけました。

socket.ioを使ったシンプルなチャットアプリです。 メッセージを受信するとサイトの色が変わります。

URLを入力するとQRコードに変換して表示するアプリケーションです。 PCで見ていたサイトをスマホでも見たい時に便利かと思って作ってみました。

GitHub認証を利用して、非公開の読書記録の作成と、年ごとの集計をするサービスです。

ページを読み込むたびに「素数じゃない数」をプログラムが勝手に探して集めていく＆集めた数が見られるだけのアプリです。 「素数じゃない」判定には最大公約数を使っています。ユークリッドの互除法ってすごい！と思ってこれを使ったことが何かできないかなと思って作りました

ロードアベレージを心電図のように時間おきに波打つように変更してみました． また，アクセス人数に応じてPIXI.jsで描画された楕円のサイズが変動します．

パーティゲームの人狼をウェブアプリで遊べるようにしてみました。ただ時間が足りず最後の部分がかなり雑になってしまいました。