か 飼い犬が二匹います
き 近所に散歩に連れていくことがあります
く 靴を履こうとすると毎回散歩だと勘違いしてきます
け 毛が黒いのと茶色いのがいます
こ 子犬のころから飼っています
【 趣味 】
・イラスト制作
・文章執筆
・動画制作
・映画鑑賞
・読書
・ゲーム
【 一言 】
皆さんと仲良くできれば幸いです
よろしくおねがいします(⌒∇⌒)
か 飼い犬が二匹います
き 近所に散歩に連れていくことがあります
く 靴を履こうとすると毎回散歩だと勘違いしてきます
け 毛が黒いのと茶色いのがいます
こ 子犬のころから飼っています
・イラスト制作
・文章執筆
・動画制作
・映画鑑賞
・読書
・ゲーム
皆さんと仲良くできれば幸いです
よろしくおねがいします(⌒∇⌒)
●『カテゴリー』の設定は必須!!
「カテゴリー:HTML5」のみを選択すること
※他のカテゴリーを選択する必要がある際は、
髙橋から連絡があります
●『タイトル』に明記してほしいこと
・チーム名
・活動日(yyyy/mm/dd)
・報告回数
・報告担当者
オープンキャンパスにて卒業生作品として公開します。
高校生に楽しんでもらえるコンテンツを目指しましょう!!
1.Fujie Lab Webの構築(レベル:★★☆☆☆)
・卒業研究ふじえゼミの公式Webサイトを作成する
・これに加えて、ブログのカスタマイズやメンバ向けページの作成も行う
・参考:https://fujizemi.fujielab.com/
2.PHPを用いた動的なWebサイトの構築(レベル:★★★☆☆)
・PHPを用いて、データベースと連携したサイトを作成する
・参考:https://p-a-project.fujielab.com/
・参考:https://jr2021.fujielab.com/
・参考:https://animal-lovers.fujielab.com/
・参考:https://fujinavi.fujielab.com/
・参考:https://bunphoto.fujielab.com/
・参考:http://tanukikurage.fujielab.com/
3.フレームワークを用いたWebゲーム作成(レベル:★★☆☆☆)
・enchant.js等のフレームワークを用いて、ブラウザ上で動作するゲームを作成する
・参考:https://enchanter.fujielab.com/
・参考:https://gokudo.fujielab.com/
・参考:https://rama2020.fujielab.com/
・参考:http://bambi.fujielab.com/
・参考:http://marshmallow.fujielab.com/
4.WebAPIを利用したマッシュアップサービスの開発(レベル:★★★☆☆)
・Twitter API、Google API等を組み合わせた、新たなサービスを実現する
・参考:https://yamada.fujielab.com/
5.地域社会に貢献するコンテンツの作成(レベル:★★★★☆)
・Webの技術を用いた、地域社会に貢献できるコンテンツを作成する
・区役所や警察署、地元企業からの依頼を受けたり、売り込みをかけたりする
・参考:https://sdogs.fujielab.com/
・参考:https://grhill0918.xsrv.jp/
6.WordPressの限界突破(レベル:★★★★★)
・WordPressで作ったとは思えないレベルのサイトを作成する
・WordPress感が露呈しないようにすることが目標
7.Webに関する最新技術の研究(レベル:★★★★★)
・Webに関する最新技術を研究し、技術を応用した作品をつくる
・WebGL、WebVR、Progressive Web Apps、WebRTC等
・参考:https://kikuvr2020.fujielab.com/
・参考:https://spectacular.fujielab.com/
・参考:http://hats1999.fujielab.com/
・参考:http://fujielab.com/saika/
8.その他、おもしろいもの(レベル:?????)
・おもしろければ、基本的に何でもOK!
🐹取り組んだ内容
10代~20代の女性をターゲットにした推し活専用SNSをphpを用いて作成しました。
私は主にcssやレスポンシブを作成・修正していました。
🐹よくできたところ
cssなどの見た目の部分はよくできたのではないかと思います。
機能面は申し分ない出来だと思います。チームメンバーに感謝
🐹うまくいかなかったところ
レスポンシブデザインの実装がなかなか安定せず、何回もやり直しが発生しました。
一通り画面サイズに合わせて幅などを調整しても、何かしらの影響を受けてうまく表示されないことが何回もありました。今でも何の影響を受けてやり直しが発生していたのか理解しきれていないので、今後のためにも使いこなせるようにしたいです。
🐹卒業研究の感想
わからないことばかりで大変でした。
未だにレスポンシブデザインは改善の余地があるので、これからも学び続けたいです。
他のゼミの作品に関してもクオリティの高いもの多いと感じたのでできることをもっと増やしていきたいです。
🐹書いた人がなんとなーく特定できる情報 or 実名
アイキャッチ画像でハムハラ(ハムスターハラスメント)をした犯人
わささすかぴーチームリーダーでした。
◇ 取り組んだ内容
主にHTMLやCSSをいじってサイトの視認性を整えたり、それ以外はプレゼンや提出物等の資料作成を担当していました。
機能面はからっきしですが、画像のモーダル表示やトリミングなど、欲しいと思い至った機能は自身で調べながら実装させました。上手くいってよかったです。
サイトの基盤となるデザインは最初自分が用意したのですが、機能面はからっきしなのでどんどん機能が肉付けされていくのに感動しました。
取り組んだ内容で書いた画像のモーダル表示やトリミング機能は上手く実装できたと思います。自分たちの作成するSNSには推し活というテーマがあったため、画像からの情報は必須だと考えました。なので、その二つは意地でも実装させたい気持ちがありました。
フォロー・フォロワー機能を活かしたかったという思いがやはり強いです。SNSならではの機能でその2つを実装しましたが、今のままだと必要かどうかを考えたら必要ではない機能になっている気がするので、「タイムラインをフォローしてるユーザに絞る」「相互限定でDMでのやり取りができる」等の機能をつけたかったです。
HTMLとCSSでサイトを作成するのが好きだったのでこのゼミを選びましたが、今回主に触ったのがPHPだったので苦労しました。PHPは2年生の頃に授業を受けましたが、その時から苦手意識があたので、あらためて卒業研究として触れてみることでなれることができてよかったです。
今回の経験を活かして、次はプライベートでずっと作りたいと思っていたサイトを作ってみようかなと思いました。
最後に、書いた人がなんとなーく特定できる情報 or 実名ということだったので、この投稿のアイキャッチ画像を一1時間で描いてきました。ハムスターにはこの1年お世話になりました🐹
わささすかぴー 濱田 ありさ
夜目効きますよの河島です。
◆戦闘・敵
戦闘処理は全て担当しました。
また、敵のステータスや敵の技、行動パターンなども担当しました。
ゲームの肝となる部分でしたが、全体的によくできたと思います。
特に戦闘アニメーションは気に入っています。
安易に炎や氷の素材を使わずに、幾何学模様を基調としたデザインにしたことで、ゲームの雰囲気にマッチした仕上がりになったと思います。
また、各敵キャラも強すぎず弱すぎず、かつ個性が出るように調整できたと感じています。
◆デザイン
デザイン全般を担当しました。(タスクの「イベント」「休む」「ステータス上昇」「削除」、カード入手時以外)
また、ロゴも作成しました。
デザインはまだまだ勉強中ですが、現時点でのベストを尽くせたと思います。
より良くするのなら、エフェクトやパーティクルをつけることでしょうか。
しかし、作業量や必然性を考慮し、実装はしませんでした。
◆音
BGM、SEの処理を担当しました。
選曲も私です。
BGMはMP3形式で、きちんとループするものを選定しました。
良い曲なので、ぜひ聞いてみてください。
MIDI形式が使えないのが残念でしたね。
◆ペライチ(デザインカンプ)
ほぼ全て担当しました。
ペライチにはゲームの具体的な画面は不要らしいので、ゲーム画面をイメージできるものを意識して作成しました。
開発初期段階で作成したものですが、ここで使用したフレーズは後の発表やポスターにも活用しています。
ゲームのアピールポイントが詰まったものにできたと思います。
◆スライド作成・プレゼン発表
ほぼ全て担当しました。
原稿については、少し手伝ってもらいました。
スライドは見やすさを重視して作成できたと思います。
ただ、ゲームの魅力を伝えるには、もう少し違ったスライドが必要だったのかもしれません。
また、プレゼンは練習できたスライド部分は問題なく進められましたが、質疑応答ではもう少し上手く対応できたと感じています。
◆ポスター
全て担当しました。
スライドの内容をほとんどそのまま持ってきました。
スライド同様、見やすさを意識しました。
◆動画作成
全て担当しました。
最初は生声で撮影しましたが、聞きづらかったので機械音声を採用しました。
動画前半は、発表スライドに字幕を追加したものを使用しました。
元々字幕がないスライドに、字幕枠を追加することは手間がかりましたが、イヤホンを使わずに視聴する人も多いため正解だったと思います。
動画後半は、プレイ映像をそのまま流しました。
スライド説明をわざわざ見てくれる人は少ないと考え、このような形式としました。
また、動画説明欄に「とにかくゲーム画面が見たいという人は、06:54まで飛ばしてください。」と明記しました。
◆ゲーム全体を通して
完成度には概ね満足しています。
個人的に修正したいところはありますが、やりたかったけど出来なかった機能はないです。
最後に学校で、ゲーム制作ができて楽しかったです。
システムエンジニア科では、2年生のときにJavaを使った簡単なゲーム制作授業があっただけでした。
1月中は残って作業することも多かったですが、ゲーム制作なのでそこまで苦ではありませんでした。
ただ、ゲーム制作はチームよりも、全部自分でできる個人制作の方が楽しいですね。
今回のゼミではチームで一つの作品を制作することの難しさを学ぶことができました。
また、今回初めてenchant.jsというフレームワークを使用しました。
Timeline機能はアニメーション作成で物凄く助かりました。素晴らしい機能です。
ただ、縁取り文字(MutableText)が非常に使いづらいのは難点ですね。
凄い便利というものではないです。
また、テストプレイやスライド、ポスター、動画においては、わささすかぴーの會田一亮様に添削の協力をしていただきました。
この場をお借りして、心より感謝申し上げます。
作成した戦闘アニメーションとボタンです。
それぞれFigmaとGIMPで作成しました。


~取り組んだ内容~
『enchant.js等のフレームワークを用いて、ブラウザ上で動作するゲームを作成する』というテーマを選択し、『クエット』という遊びながら学べるノンフィールドカードRPGを作成しました。主にカード作成やデータ入力、デバックを担当していました。
~よくできたところ~
カードの効果や戦闘のシステムについては良いものになったと思います。かなりの期間をデバックに充てたので、ギリギリラスボスに勝てるぐらいの難易度になったのも満足しています。(個人的には「フォールトアボイダンス」が一番強いカードだと思います。)
~うまくいかなかったところ~
ゲームを制作していく中で、割と序盤のほうで開発から外れて違う仕事をしていたため、技術的なところでenchant.jsをあまり理解できておらず、途中から開発を手伝うといったことができませんでした。単純作業は得意なためデータ入力やカード作成が思ったより早く終わってしまい、暇な時間が多かったです。その時間で手伝えていればもう少しクオリティを上げることもできたと思います。
~卒業研究の感想~
全員異なる学科で初対面だったり、触れたことのない言語を使うことだったり、色々不安になる要素が多くありましたが、かなり良いものが作れたと思います。最初は遠慮が勝る関係も、途中からはこだわりの部分で衝突するようになったり(特に僕以外の二人)と、チームで開発する良い経験になりました。皆さんもぜひ「クエット」をプレイしてみて下さい。
夜目効きますよの雑用係
HTMLとjavaScriptとenchant.jsというライブラリを用いてゲーム制作を行いました。以下に製作した点をまとめます。
主に内部処理が多いです、ダンジョンや問題画面等のUIはあまり作成していないという形です。
ランダムイベントの処理とカーソル処理の2点はそこそこ出来ていると思いました。
ランダムイベント処理では、先生が購入してくださった参考書に記載してあったライブラリから着想を得て、話す人物・話す内容・人物の切替わり・選択肢ごとの会話内容と選択肢の成否ごとの内容を実現する且つ配列が深すぎないようにするため、会話を格納する四次元配列と各イベントの処理内容を格納する二次元配列を使用し、それらを処理するコードを作成しました。
カーソル処理では、どこが押せるか分かるように押せる場所はカーソルが変わるようにしました。enchant.jsを用いて表示されたオブジェクトはDOMベースではなくcanvasベースのため、window上でのカーソル位置を取得後にenchant.js上の位置へ変換し、そのオブジェクトが範囲内かを検知するというコードが必要でした。
自分が担当した部分では内部処理に力を入れていたので、見た目回りや使用感、また、それらをより快適にするための機能が足りないと考えています。セッティング機能やよりゲーム性を伸ばせるよう難易度調整や一周の時間の変更等のよりゲームとしての完成度を高められるようなことがまだまだあるように感じます。
enchant.jsというライブラリを使用してゲーム制作を行ったのですが、感想としては、文献が少なくて痒いところに手が届かないような印象を受けました。enchant.jsは2016年ごろから更新が止まっており、公式サイトも閉鎖しているので、今も更新が続いているライブラリならもう少し作りやすかったのかな?と思いました。
最後に札幌の冬景色を置いていきます。
以上、夜目効きますよチームの新保でした。
私は主にバックエンド・データベース全般とフロントエンド(PHP・JavaScript)を担当しました。
バックエンド側の処理では、投稿に関連する処理(投稿・ブックマーク・いいね・画像取得や検索など)やユーザーに関連する処理(フォロー・ユーザー情報変更など)、その他通知などPHPを使うほぼすべての処理を行い、データベースでは設計・構築・処理などすべての担当を行いました。
フロントエンド側の処理では、PHPでの画面構築(データベースからの値を画面に表示・フロントエンドとバックエンドとの通信のロジックの設計など)やJavaScriptによる処理(非同期処理での無限スクロールや画像・いいね数・リプライ数・自分がいいねやブックマークをしているかなどの情報を取得するなど)を担当しました。
学生生活の中でPHPを習ったことがなかったので、基礎の基礎も知らない状態でバックエンド・フロントエンドのほぼすべてを担当し、実際に動くものが制作できたことです。
また、JavaScriptは触ったことはありますが非同期処理を使ったことがなく、こちらも同様に実際に手を動かしながらハンズオンのように学習し、実際に動くものが制作できたことです。
最後に、個人的に日報を書いておくことで自身がどの程度作業して次から何をすればいいのかを残していたことです。

チームとのコミュニケーションがうまく取れなかったことです。これにより、チームメンバーがどのファイルで作業しているのか、進捗はどの程度なのかなどが全く分からなかったことで競合が発生したり進捗の確認の手間が増えたりしました。
初めて使う言語、初めて使う機能などをふんだんに使わないといけない実装で開発をやりとげられたことに達成感を感じ、またこれから社会人として生きていくうえでの一つの練習になったような気がします。
わささすかぴー -> S科の人
ゼミ研究の振り返り
1. 取り組んだ内容
今回のゼミ研究では、ECサイトの開発を取り組みました。具体的には、商品の一覧表示、カート機能、購入処理など基本的なECサイトの機能を取り入れました。開発にはHTML、CSS、JavaScript、PHPを使用し、データベースにはphpMyAdminを活用しました。また、ユーザーがスムーズに商品を検索・購入できるよう、UI/UXの改善にも力を入れました。プレゼンテーション資料の作成では、研究の成果を分かりやすく伝えるため、フォントやイラストなどを利用し、工夫しました。
2. よくできたところ
一つ目に基本機能の実装が完了したことです。ECサイトとしての基本的な機能(商品表示、カート機能、購入処理など)を最終日までにしっかり動作できるものまでに完成させたことです。二つ目にチームワークの向上です。ゼミメンバーと協力し、役割分担を行い、効率よく作業を進められた点が良かったです。特に、バックエンド、フロントエンドの担当やプレゼン資料作成の担当など、それぞれの得意分野を活かしながら開発できました。
3. うまくいかなかったところ
デザインの統一感です。メンバーごとに作業を分担をしていたので、最終的にデザインの統一感を出すのが難しくなりました。後からCSSの修正を行い、デザインを統一しましたが一旦、メンバーで話し合うことでよりスムーズに進められたと思います。
4. ゼミ研究の感想
今回のゼミ研究を通じて、ECサイト開発の難しさと楽しさの両方を実感できました。実際にゼロからシステムを作り上げる過程は大変でしたが、その分、完成したときの達成感は大きかったです。また、単にプログラムを書くのではなく、ユーザー視点での使いやすさを考えることの重要性を学びました。また、個人でのプログラミングとは違い、メンバーと意見を出し合いながら進めることで、コミュニケーションの大切さを実感しました。例えば、意見のすれ違いが発生したときも、話し合いを重ねることで解決し、より良いものを作ることができました。また、二階堂先生のアドバイスも非常に参考になりました。プレゼン資料や成果物に細かくアドバイスを教えてくださり、よりいい成果物になったと感じています。ここでのゼミの経験を活かし、今後はより高度な開発スキルを身につけ、チーム開発のスキルも向上させていきたいと考えています。そして、社会に出た際にも今回の経験を活かし、円滑にプロジェクトを進められるようになりたいです。