「HTML5」カテゴリーアーカイブ

自己紹介 G3A109加藤諒大

か 家事は一応一通り出来て、ひ

と りぐらし中だけどほとんど毎週実家に帰ってます。

う どんが好きです。

趣味

・ゲーム

スマホでもPCでもなんでもござれ

最近は、スマホのほうはFFRK(ファイナルファンタジーレコードキーパー)と月のウサギの育て方ばっかりやってます。

PCは退魔忍やらスマフラやらといろいろやってます。

2023年度 HTMLファイ部!サブテーマ一覧

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://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!

最後の言葉

P→A Projectの品田です。
【1.取り組んだ内容】
デザインカンプを元に、HTMLやCSSでサイトの大まかなコーディングとゼミ後半はスマートフォン版ページの作成とPWAの実装に取り組みました。そのほかに、企画書・設計書を作りました。

【2.よくできたところ】
事前に考えていたスケジュールの通りにサイトの作成とプレゼンの準備が進んでいたのがとても良かったと思います。
役割分担が自然と出来ていたので、やることがないということにならなったのはいい部分ですが、ブログ更新などの定期的な作業は同じ人に偏らないようにしてもよかったのかなと思います。
その他に、サイトコーティングの面でなかなか思っている通りにいかない部分がありましたが、ネットで調べたり、相談しながら納得のいく作品が出来上がり満足です。

【3.うまくいかなかったところ】
PWAを利用して出来る通知やオフライン保存などの機能をもう少し入れることが出来たらなと思いました。スケジュールの色付け等も途中で変更する事になったので少し悔しい部分ではありました。

【4.卒業研究の感想】
とても良い作品ができ、私は満足です。1人では出来なかったことがグループだとできるのはすごいなぁと感じたゼミでした。グループのお2人には感謝しかないありません。年明けてすぐに体調を崩し、最後のまとめをちゃんとすることが出来ないままに早期実習で離脱してしまい大変申し訳なかったです。ですが、最後の最後までやり遂げてくれたので心残りはないです。

岡田さんには、バックエンド側のDBなどのコーディングをして頂き、難しい部分も沢山あったと思います。おかげで会員登録システムやスケジュールの保存ができるようになり大変助かりました。ありがとうございました。職場は違いますが、実習頑張ってください。

続いて、寺田さんにはゼミのグループ決めからプレゼンまで本当にお世話になりました。
おかげで、楽しく効率よく開発が出来ました。ありがとうございました。1人で全体発表までやってくれたのは本当に凄いです。パワポもとても分かりやすかったです。頼りになる仲間だなと改めて感じました。編入後も頑張ってください。

作ったスマートフォン版サイトトップ画面

最後の言葉

そるとーずのS3A223中辻育美です。

①取り組んだ内容

私は、そるとーずのメンバーとして活動しました。そるとーずは二人体制で、SDGs×北海道で活躍する団体さんを紹介するサイトを作成することになり作成する画面の役割分担をしVScodeのLiveShare機能を使用し共同でページに取り掛かりました。私が担当した画面・機能はヘッダー、項目遷移、share機能、SDGsを知ろう、フッター、FAQ、塩井が運営しているSNSの記載です。

②よくできたところ

share機能を利用しスマホ用の画面を作成することができたことです。パソコンでLINEをインストールし、自分のトークへサイトを共有し調整を繰り返しました。また、サイトのみやすさや使いやすさを重視し、ロゴを浮き出る仕様にしたりアニメーションをつけたところです。

③うまくいかなかったところ

お問い合わせ機能を実装できなかったことです。お問い合わせページより塩井のメールアドレスにお問い合わせ内容を送信するという機能を作りたかったのですが、能力不足で実装できませんでした。お問い合わせページの画面は作成していたので使うことができず残念です。

④卒業研究の感想

すきなHTML、CSSで卒業研究を作成できたことがうれしかったです。デザインを考えたりどんなアニメーションをつけるか考える時間がとても楽しく、また久しぶりにさわったので再学習しながらの作業で有意義な時間でした。チームで一から作成するということが初めででしたが、無事何事もなく終えることができるので良かったです。わたしが今回のサイト作成で一番気に入っているのはSDGsを知ろうです。綺麗にならばさっているのが好みです。

 

 

最後の言葉

  • 取り組んだ内容

enchant.jsでのゲームを制作しました。

  • よくできたところ

シューティングゲームの射撃部分がうまくいきました。

  • うまくいかなかったところ

アニメーション部分がうまくいきませんでした。

  • 感想

とにかく人手が足りなく作業工程がなかなか進まなかったです。

チームhtlm

最後の言葉

うのきのこの宇野悠介です。

1. 取り組んだ内容

設計書、企画書、遷移図の中でメンバーごとに役割分担し、自分は遷移図の作成を行いました。HTMLでのサイト作成では毒キノコのトップページ、危険度、地域別ページ、毒キノコの紹介ページとそれらをCSSでデザインを行いました。

2. よくできたところ

最初に作っていたトップページを今年の1月に新たに作り直したことです。スケジュール通りに進んではいたがCSSが崩れてたりPHPをやったけど結局うまくいかなかったりしたが最終的にはちゃんと間に合ったのでよしとします。

3. うまくいかなかったところ

PHPをもちいたWebサイト作成ですが、データベース接続はうまくいったが、そのあとの検索機能の処理やログイン機能が鵜上手くいかず最終的には実装できなったところがとても残念です。

4. 卒業研究の感想

このゼミを通して改めてHTML、CSS、JavaScriptに触れることが出来てうれしく思いました。また新たに触れたPHPですが、自分が未熟なうえに実装まで届かず残念に思いますがチームメンバーとうまく話し合い役割分担をしてスケジュール管理が危なくなってしまいましたが最終的に発表もうまくいったので大変いい勉強になったと思います。

5. ゼミ内で書いたイラスト集

 

最後の言葉

1.取り組んだ内容

ふじえゼミの公式サイト作成(web構築)を行いました。HTMLとCSSを使いメインページ作成の他、ヘッダー、フッター、メインボタンなどの作成も行いました。

2.よく出来た所

項目ごとに、ページを分けた所です。最初は、1ページに内容を全部書いてたのですが、途中で項目ごとに分けたので、サイトが見やすくなったと思ったので、その点は、上手くいったのかなと思いました。

3.うまくいかなったところ

ページがシンプル過ぎた所です。動きがあるようなサイトを作れたらよかったなと思いました。あとは、ページが出来るまでに迷いすぎた点です。こうした方がいいのかという迷いが多くて、時間がかかりすぎた点です。

4.卒業研究の感想

授業でHTML.CSSは習っていたものの、一からまた一人でサイトを作るのは、難しかったです。それと一人チームなので、作業が分担できなかったり、思い通りにサイト作成が進まず、途中で頭を抱えた事はありましたが、なかなか出来ないことなので、貴重な経験になりました。

J2A1大塚

最後の言葉 

今日が最後の登校日となりとてもさみしく思いますが、
皆さんお疲れさまでした。

  • 私が取り組んだこと

わたしがチーム内で主にやっていた役割は、フロントエンドです。
画面レイアウト、画面遷移図、HTMLとCSSは私と川口が
すべて担当しました。
私が作った画面を一生懸命川口が壊すので完成するまで
困難を極めていました。(冗談)


  • よくできたところ

フロントエンド担当として、ユーザ視点でデザインを考えて作れたこと。
目に優しい配色や画面のサイズを変えても画面が崩れないように創意工夫をしました。


  • うまくいかなかったところ

画面のCSSをスマホに対応させるまでに至らなかったこと。
複数で画面を作っていたため最終的に統一させるのがうまくいかなかったこと。


  • 卒業研究の感想

卒業研究を通して、色々な経験をし、たくさんの課題点を見つけることができました。
一から自分たちで何かを作るのはすごく難しく、大変なものでしたが、このチームで最後までやり遂げることができ、うれしく思います。
今後は今回の経験をばねに様々なものにチャレンジしていきたいです。


最後に居眠りしていたリーダー川口の写真を添えておきます。

以上、ダイヤモンド不愉快のゲスイトウでした。

 

最後の言葉

 

1.取り組んだ内容

フロントエンドを担当しました。画面のレイアウトやボタンの配置などを考えました。発表の原稿と発表のスライドを作成しました。ゼミがある日の毎日のブログを書きました。

2.よくできたところ

フロントエンドを担当し、画面サイズが変わったときにもレイアウトが崩れないようにCSSを適用しました。目に優しい配色を意識してサイトを作ることができました。

3.うまくいかなかったところ

デザインが定まらなくて統一するのが大変でした。機能面で検索機能を実装する予定でしたが、うまくいかず作成することができませんでした。授業などでgitを使って開発していたので、楽でしたが今回はサーバにあげていたので何か追加するときには一旦サーバからファイルをダウンロードしなきゃいけないのが大変でした。このダウンロードを忘れてしまい、作成した機能が消えてしまうことが何回かありました。

4.卒業研究の感想

卒業研究でたくさんの経験ができました。卒業研究が思っていたよりも自由で驚きました。作成期間も最初はたくさんあるなと感じていたけどあっという間に過ぎて少し焦りました。でも提出期限に間に合わせることができてよかったです。働いたら、提出期限に間に合わせることが当たり前になるのでスケジュール管理をしっかりしたいと思います。

最後に、実家で飼っている猫の写真を載せときます。

 

以上、ダイヤモンド不愉快の川口でした。