T.Kawashima's WebSite

Choice!

HTML
CSS
JavaScript
PHP
授業課題
Choice!-Logo

スマホ向けの選択肢援助サイトです. ゼミのメンバー4人で作りました. 僕は主にCSS, JavaScriptでUI設計を担当しました.

Webプログラミング実習という授業の最終課題で作成しました. 発表のときに使ったスライドがこちら↓です.

そして, 実際に使ってみた動画がこちら↓になります.


手軽にアンケートを作成し, 結果を素早く共有できるアプリケーションを作成しました. 想定する利用者は, 主に「ローカルなコミュニティにおいて集団で行動している人々」です. 例えば, 集団で旅行に行っている時, 「次の観光場所はどこにしようか」, 「休憩をはさむか否か」, 「グループを分けて別行動するか」等の選択に迫られる時があります. 集団の人数が多ければ多いほど, 意見が一つにまとまらなかったり, 話を聞いていなくて次の行動を把握していない人が出てきたりする場合があります. また, 少数意見が尊重されなかったり, 同調圧力で自分の意見が言えなかったりということもあります. そうした集団での選択が難しい場面において, 活躍できるアプリケーションです. その場ですぐにアンケートを取ることが目的なので, スマートフォンやタブレット等の端末で使用することを前提とします.
  トップ画面には, 4桁の番号を入力するフォーム, 「グループに入る」ボタン, 「新規グループ作成」ボタンがあります. グループを作成する場合, 「新規グループ作成」ボタンを押すと, 4桁のグループ番号を発行します. グループが作成されていた場合は, 4桁のグループ番号を入力してから「グループに入る」ボタンを押すことでグループに入室することができます. グループを作ったらアンケートを手動で作成するかか自動で作成するかが選択できます. 手動で作成する場合は, アンケートの詳細設定画面に移動します. 詳細設定では, 制限時間の有無, リアルタイムでのグラフを表示の有無, 選択肢を3つ以上に変更するかが設定できます. グラフはドーナツ型で表示します. 自動で作成する場合は, 制限時間は60秒, グラフ表示は無し, 選択肢は2つで変更不可の設定でアンケートを作成します. グループに入室した時点で, それぞれに4桁の仮ユーザ番号を発行し, ログイン状態となります. グループ, ユーザ, アンケートの情報はPHPを用い, SQLでデータベースへの読み書きを行っています. 4桁の番号は, PHPでランダムに発行しています.
  詳細設定をもとにアンケート画面を作成します. 初期はYes/Noの2択のボタン, 「おまかせ!」ボタン, プラスとマイナスのボタンがあります. 制限時間, グラフ, プラスとマイナスボタンについては設定次第では表示しません. また, ユーザが回答済みか否かも確認することができます. プラスとマイナスボタンを押すことで, 選択肢の数を変更できます. 上限は4つまであり, 3つ以上になると選択肢のYes/NoがA/B/C/Dという表示になります. 選択肢の数を2つに戻すと, 再びYes/Noの表示になります. 4桁のグループ番号は常に表示しているので, 途中で入室したい人がいる場合にも, すぐにグループ番号を伝えることができます. 左上にはメニュー画面(図5)を開くボタンがあり, 開くとユーザ名の変更, 使い方を見れる「ヘルプ」, トップ画面に戻れる「新規グループ作成」が利用できます. 時間を設定した場合には制限時間経過後, 設定してない場合は一番下にある「終了」ボタンを押すことで結果画面に移動します. 結果画面では, それぞれに選択したユーザの仮ユーザ番号(名前を変更した場合にはその名前)が表で見れます. また, 割合もグラフで確認することができます. 「戻る」ボタンでトップ画面に戻ることができます. アンケートの結果等はデータベースに読み書きし, サーバの管理はJavaScriptのライブラリNode.jsを使用しています. メニュー画面開閉と選択肢増減のアニメーションは, JavaScriptを使用しています. グラフの表示は, JavaScriptのライブラリChart.jsを使用しています.

ストラックアウトの模倣

Processing
授業課題
3D
AUTO BEAT

Processingという言語で, CG系の授業の最終課題として作った作品です. タイトルの通りストラックアウトを模倣しました.

初めてProcessingで3Dを扱いました. なるべくリアリティを追及しました. 光の扱いが難しかったです. クリックで球を投げ, もう一度クリックすると球を持てます.

Can★Find

HTML
CSS
PHP
JavaScript
個人制作
AUTO BEAT

2年生の夏休みに, 前期のゼミでやったHTML/CSS/PHP/JavaScriptの復習がてら, 作ったシステムです. 簡単に言うと, 「商品陳列場所検索システム」です.

Can★Find

某100円ショップの某大型店でバイトしていた(もう辞めた)のですが, 店舗が広く商品の種類が多いため, どこに何があるのか覚えるのが大変でした. そこで, 一度客から聞かれても場所がわからなかった商品などを登録して, すぐに場所を検索できるシステムを作りました. もうそこで働いてないので役目はなくなりましたが.

AUTO BEAT

Processing
授業課題
AUTO BEAT

Processingという言語で, 研究室のメンバー(僕含め3人)で共同作成した作品です. 音楽と身体を同期を目的に作成しました.

PossessedHandという多電極電気刺激操作キットを使って指・手首の動きと音楽を同期させました. 再生画面では, キーボードを使ってVJのようにエフェクトを変えられます. 僕はこの再生画面のアニメーション・制御を主に担当しました. 動画中に写っていたアニメキャラは友人の推し達です.

クレー射撃の模倣

Processing
授業課題
AUTO BEAT

Processingという言語で, 1年の学年末に作った作品です. タイトルの通りクレー射撃を模倣しました.

ゲームではなく, あくまで模倣のつもりです. リアリティ追求のために風向きを導入しました. 最初にクリックすることで風向きが決まり, 軌道の確認ができます. 確認後, スペースキーを押すことでクレーが発射されます. クリックで球をうち, 当たると特典が増えます. 右キーを押すことで, 次のプレイヤーに変わります. もう一度クリックで風向きを変えるところからの繰り返しです. たまに鳥や人が飛んでくるのですが, 球を当ててしまったらもちろん減点です.
判定がガバガバで, 球の軌道が次の球が発射されるまで残っているため, その残っている軌道に当たっても当たり判定になります. いつか作り直したいですね(作り直すとは言ってない).

松○しげるを探せ!

HSP
授業課題
松○しげるを探せ

大学でプログラミングを学び始めてから, 一番最初に作った作品です. Hot soup processorという言語で作りました.

*音声ありです. 音がプツプツしてしまっていますが, 仕様です. 動画のみで, 実際にプレイしてもらうことは不可にさせていただいております. 動画は, プログラムがうまく動作しなかったときのために作ったデモ動画をそのまま載せました.
HSPで作った, 初めてのプログラミング作品です. あまり高度なコードな使いこなせなかったので, ネタに走ってしまいました. 著作権やらなんやらで申し訳ないとは思っていますが, 後悔はしていません.

ここからは作品についての細かな説明をしていきます. 先に動画を見てから読むことをお勧めします.

この作品は, 松○しげるさんを暗闇の中から探しだだす, というゲームになっています.
まず, ゲームを起動すると二つのボタンが出てきます. 「松○しげるとは?」というボタンを押すと, 松○しげるさんのWikipediaが開きます. みなさん存じているとは思いますが, 知らない人に向けた親切な設計です.
次にレベル選択画面です. レベルは1~10まで用意しています. レベルが上がるにつれて, ○崎しげるさんを見つけ出すのが難しくなっていきます. もっと細かく言うと, レベル1~5までは背景が黒くなっていき, レベル6~10までは, 松崎○げるさん自体が透明化していきます.
正解すると, 松崎し○るさんの公式Twitter, 公式LINEブログ, 公式GREEブロクのリンクへ飛べるボタンが現れます. 素晴らしいですね.
隠し要素として, レベル選択画面でキーボードの「s」「g」「r」を同時押しすると, 「レベルしげ○」というのが現れます. こちらはとても探し出すのが難しいですが, 実は松崎○しげるさんがデスクトップ背景に隠れています. みんなの前でこの作品を発表したとき, これをオチに使いました.