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

最後の言葉 そるとーず 塩井

皆さん、長い期間お疲れ様でした!!!
学校登校が最後ということで、最後の言葉を書かせていただきます。

 

1.取り組んだ内容

私たちは、「HTMLファイ部」でのテーマ「5.地域社会に貢献するコンテンツの作成」に挑戦しました。
作成した成果物は、北海道のSDGsを知ることが出来るサイト「SDo!Gs」です。
17個の目標の説明や、目標に向かって活躍する団体の紹介、私たちが出来る事など、盛り沢山の内容になっています!

サイトURL:https://sdogs.fujielab.com/
企画書URL:https://drive.google.com/file/d/11U_jHDgb_gROIagtgSxOeEAxLO-bh6-Y/view?usp=sharing
サイト紹介動画URL:https://drive.google.com/drive/folders/1jjWMb9s8Q5OpEp-akIYQd6qvfRmTqxNy

2.よくできたところ

コロナウイルスを初め、二人とも順番に体調不良になってしまったため、なかなか学校に行くことが出来ませんでしたが、しっかりサイトを完成させることが出来たことです。
また、canvaで作った画面設計図の通りに サイトを作成することが出来たため、デザイン面などとても気に入った仕上がりになりました。
yahoo知恵袋などのQ&Aサイトも積極的に活用し、分からないことが多いながらも、不明点を解決することが出来ました。

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

デザイン面はとても満足のいく出来栄えですが、デザインに注力しすぎてしまい、凝った機能をつけることが出来ませんでした。
あとは、Visual Studio CodeのLive Share機能で開発したため、Ctrl+Zを押して相手のソースコードを何回か消してしまったことです。

4.卒業研究の感想

私は個人の活動として、ボランティアや、北海道にて頑張る方々を応援するSNSを運営しています。その活動をしていく中で、もっと活躍する方々を皆に知ってほしい!という思いが生まれ、今回のゼミにて、「北海道の団体を紹介するサイト」を作成しようとしていました。
一人で作成しようと考えている中、中辻が「SDGsの目標ごとに、団体を紹介したら良いサイトが出来るのでは」と提案してくれました。そして、今回のサイト「SDo!Gs」を作成しました!

何でも一人で黙々と作業をしてしまうことが多く、ゼミも一人で行おうとしていましたが、ゼミを通して、チームで行うことの楽しさ・大切さを改めて実感しました!
また、ずっとやりたかった 団体紹介のサイトを作成でき、とても達成感があります。
サイト作成が楽しかったため、もっと開発技術を磨き、将来更にレベルアップしたサイトを作成してみたいです。

先生方も、ありがとうございました!

以上、そるとーず 塩井杏実香でした!!!!!

最後の言葉

田中   望愛

1.取り組んだこと

htmlやcssを使用してキノコについての図鑑のようなサイトを制作しました。

2.よくできたところ

よくできたところは、キノコが掲載されているページと毒キノコが掲載されているページをそれぞれ分けたところです。分けることによってどちらか一方を見たいときに見やすくなる他、毒キノコのページデザインを危険性が伝わりやすいようにデザインしたので研究目的の皆にキノコ特有の魅力や危険性を知ってほしいというのがより伝わりやすくできたのかなと思いました。

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

PHPが思っていたよりも難しく検索機能の実装に至らなかった点と最初、サイトのイメージがあまりできていない状態で制作をし始めたので途中から何か違うなと思い、始めから作り直すことになったのでスケジュールが詰め詰めになってしまった点がうまくいかなかったところです。もう少しうまくスケジュール調整ができていれば日程にも余裕ができ検索機能も実装できたのではないかと思いました。

4.卒業研究の感想

この卒業研究を通して、三年間習ってきた知識を復習できてよかったです。また、今まで触れたことのないPHPに触れ新たな挑戦ができたので改めてこのゼミを選んでよかったと思いました。この経験を就職に役立てていきたいと思います。

最後の言葉

Game-hsiの因幡栞です。

【取り組んだ内容】
私は、メインページ・ログインログアウト機能・新規登録の開発とデザイン、サイト全体の共通するデザインも担当しました。
他にも最新情報の内容を色々なゲームのニュース内容を見てまとめてから記入したり見た目のデザインもしました。
また、ポスターのデザイン制作やロゴ制作も行いました。

【よくできたところ】
メインページでJAVAScriptやcssを使い動くサイトをうまく作れたのが自分の中でよくできたかなと思います。投稿された後、縦に作品が出るように位置調整など設計書で話してたのを細かく再現できたかなと思います。
最新情報が記入して増やしていくスタイルだったので、公式ゲームのニュースを読んで部分部分でまとめたり見た目も見やすく
できたと思えます。

【うまくいかなかったところ】
色々な画面で見てもデザインが崩れないレスポンシブデザインにできなかったことと、RPGやFPSなど大きいカテゴリから細かいカテゴリ分けや名前やカテゴリなどで検索できる検索機能をつけれなかったことです。

【卒業研究の感想】
今回コースも勉強してる部分も違う学科のメンバーだったのでそれぞれができるところとできないところがあり、お互いにカバーしながら作品を最後まで制作しやり遂げることができとてもよかったです。問題点を見つけたときはそれぞれ意見を言いより良いものにしていくことができたのでよかったと思います。
PHPは詳しくないので色々調べつつ制作していったので初めての部分も大きく今回で学べる事が多く自分の成長につなげることができました。
メインページは最初に見るページなので印象的にすべく動くサイトになるよう調べつつ工夫するのはとても勉強になりました。
投稿用の動画制作や最新情報書き込みなども大変でしたが良い卒業研究作品を作ることができてよかったです。

【その他】
一週間近く関西に研修に行きました。行きと帰りに二日ずつ船旅で船の中じゃほとんどすることがなく、船内にあったUFOキャッチャーで何十個もとることができ、一つのUFOキャッチャーの中身全種類コンプリートするなど楽しかったです。

最後の言葉

取り組んだ内容
私は今回、HTML、css、jsを使って学生向けの地域のお店のまとめサイトの作成を行いました。
その中で私は、紹介店の情報集めとJSを担当しました。
紹介店の情報集めは、サイトに掲載するお店の店名、住所、ホームページの有無、営業時間、定休日、電話番号を調べサイトにHTMLを使い記載しました。
jsは、グルメページの写真の切り替え機能の実装しました。
よくできたところ
一つ目は、私の力だけではないですがサイトを作り上げることができたことです。
初めてのWebサイト作りですべてが初めての中でチームメイトにHTMLやcssの使い方を教えてもらいながら作成をしました。
二つ目は、jsの作成です。JSはもともとゲーム作りでプログラム作成をしていたことから、基本的なことは同じなため他よりはわかりました。
しかし、言語が違うため使ったことのない用語などがあったため苦戦しましたが提出期日までに完成させることができました。
うまくいかなかったところ
サイトのデザインが難しくうまくいきませんでした。
ゲームのほうでは、プログラム作成しかやっていなかったため見やすい色付けや文字の大きさなどがわからずチームメンバーにほとんど任せてしまいました。
なので、今回を通して学ぶことができたため今後作る機会があったら積極的につくりたいです。
卒業研究の感想
今回私は、前述のした通り初めてのWebサイト作りでした。
そんななか、チームメンバーが毎回わからないことがあったら答えを教えるだけではなく一緒に考えてくれたりと私の成長のために時間を使ってくれ私自身大きくWebサイト作りにおいて成長することができました。
そして最終的にサイトをこのチームで作り終えることができたことがうれしかったです。
最後にチームメンバーの二人には、感謝してもしきれません。ありがとうございました!
wclc M2 花井俊斗

最後の言葉

1.取り組んだ内容

課題のテーマが地域社会に貢献するコンテンツの作成ということで、学生向けに周辺のお店を紹介するサイトの作成に取り組みました。
サイトはHTML、CSS、JavaScriptを使用しました。

全ページのデザインやレイアウトをCSSで調整したり、
CSS、JavaScriptで様々な機能の実装を行いました。

2.よくできたこと

全ページのデザインを思い通りに作ることができました。
レスポンシブデザインもギリギリまで時間はかかってしまいましたがほぼ問題なく動作するようになりました。

3.うまくできなかったこと

PHPを使えばよかったなと思いました。データベースがあればもっといろんなことができたはず。
PHPの使用を申請してなかったので検索機能など一部、力技になってしまいとても汚くまとめることになってしまった。
やっぱりもっと最初にどんなページを作るか、作るページにどんな機能が必要かをしっかり話し合うのが大事だと思いました。

4.卒業研究の感想

なんとなくで作り始めてしまいましたが、それにしては意外といい出来のものができたと自分では思っています。
卒業研究で初めてチーム制作だったのですが、大変だったことも色々あっていい経験ができました。
この経験を活かせるようこれから精進していきたいと思います。

チームメンバーお疲れさま
先生方もありがとうございました。

ロゴも5分で作りました。

M2 西村 颯

最後の言葉

1. 取り組んだ内容

私はチームWCLCのメンバーとして活動し、3人のチームメンバーで役割分担をし、作業を進めてきました。
その中でも私は主にHTMLでのページの基盤作りを担当しました。他のメンバーが自分がHTMLで作ったページをcssでデザインし、そのページにJSで動きをつける→HTMLの編集と行ってきました。

2.よくできたところ

自分が担当したおすすめグルメページ、一つ一つのお店が紹介できるように枠を設け、説明文を入れるところにcssでデザインを加え、ノート風にしたことによって、より説明文らしくなったところです。

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

cssは主に他のメンバーが担当していたので、仮完成後に自分はデザインされているページのボタンなどに更にcssでデザインを加えようとしたのですが、既存のcssと重なってしまうなどして、うまく機能をつけることができなかったところです。

4.卒業研究の感想

初めは、他のゼミとも迷ってはいたのですが、自分は2年間、ゲームWeb科のWebコースでHTML,css,Javascript,(PHP)を勉強したのでこれらをこの「HTML5ファイ部!」で生かせるのではないかと思い、同じクラスの西村君、花井君と一緒に卒業制作をするのを決めました。この3人で設計、作業、発表を最後まで取り組んで、「HCS周辺お出かけスポットまとめサイト」というWebサイトづくりができて、良い卒業研究になったと思います。

最後になりますが、ゼミに携わった先生方、一緒に作業をした
チームメンバー。共に、ありがとうございました!

載せるものがないので明らかに作品内で使えそうになかった、閉まっているお店の撮った写真をあげておきます。

(撮影者:WCLC M2花井)

チームWCLC M2 増田 伶哉

最後の言葉

Game-hsiの平沼朱理です。

【取り組んだ内容】
 私は、プロフィール画面、プロフィール編集画面、フォロー
 フォロワー機能、CSS、その他にもDB構造を作成しました。
 プレゼン資料作成を手伝いました。
 ブログを毎日投稿しました。

【よくできたところ】
 フォロー・フォロワー機能はデータベースを使ってやらなくて
 はいけなくて一番難しくかなりの時間を使いましたが、うまく
 完成させることができたと思います。

【うまくいかなかったところ】
 初めてPHPを触ったというのもあり、ページを作成するのに
 とても苦戦して時間をかけすぎてしまったところです。
 CSSがもう少し綺麗に見せれるかなと思いました。

【卒業研究の感想】
 今回PHPは初めて触れましたがとても難しく何をするにも
 調べることが前提となっていました。
 担当したページは調べてもあまりいい情報が得られないことが
 多かったですが、チームメンバーやPHPに詳しい友人に助けて
 もらいながらなんとか完成させることができました。
 この卒業研究のおかげで、PHPやデータベースの知識がかなり
 身についたので、選択してよかったなと思います。

最後の言葉

みなさん。本当にお疲れさまでした。

初めはこのゼミに入って、卒業できるのか不安になりましたが、なんとかここまでやり遂げることができました。

まず私このゼミで取り組んだことはPHPの研究です。この学校に入学して扱ったことのない言語に挑戦することができました。作品作りでは主にバックエンドを担当しました。かなり苦労しましたが、ネットや過去の卒業生の情報をもとに作成することができました。

その中で、よくできたと思えるところはエラーに対する対処法を素早く解決する能力が少し身についたことです。それにより、開発効率も少し上がった気がします。

逆にうまくいかなかったところは、PHPでの実現可能な限りのサイトを作成することができなかったことです。これはスケジュール管理もうまくいっていなかったことになります。決められた期間の中で作成するので、もう少し先を見据えたスケジュール管理を心掛けたいところです。

まとめになりますが、このゼミでの卒業研究を通して学べたことはたくさんありますが、なにより自由すぎるがゆえに作品までの計画や、使用する言語の知識、開発力を自分たちで補わなければならないところが、「あぁ、これが卒業研究かぁ。」ってなりました。けど不可にならなくて一安心です。

最後に、我がチームのリーダー川口博高を置いておきます。

↓最終日でハイテンションな川口

以上、不愉快なメガネでした。

最後の言葉

P→A Noteを作成した寺田結香です。

◎取り組んだ内容

PWAを導入したスケジュール管理サイトの作成を行いました。
スタディープランナーを題材としたサイトを作成しようと提案&デザイン全般を担当しました。
(デザインカンプ作成、フロントエンドのコーディング、パワーポイント作成、ポスター作成、プレゼンテーション)

◎よくできたところ

スタディープランナーを使い続けやすくするというコンセプトだったため、デザインはシンプルにするということをこだわりました。(毎日使うものが派手なデザインだったり、色を前面に出すと、飽きてしまうと思ったからです。)
パワーポイント作成では、文字をできるだけ少なくすること、一目で情報が入りやすいようなデザインにしました。
チームワークでいうと、作業分担を明確にしていたので、スムーズに予定通りに作業が進んだこと、一人一人がやることがない!という状況があまりなかったことがよかったです。

◎うまくいかなかったところ(不満点)

PWAの機能が2つほどしか導入できなかったことが心残りです。キャッシュの設定をしたり、オフライン状態で使えるようになれば、より使い続けやすい、アプリのようなサイトになったと思います。
Timescheduleの欄に色をつけられなかったこと(DBに保存できなかったこと)も残念でした。スタディープランナーの醍醐味といっても過言ではない部分だったので、なんだか味気のないNoteになってしまったように感じます。

◎卒業研究の感想

チームで1つのものを作るという初めての経験でしたが、とても有意義な時間でした。メンバー二人が早期研修に行ってしまったため、最終的には一人になってしまいましたが、全員が手を抜くことなく作業を進めたおかげで、全体発表までさせていただける作品になったと思います。

 

最後の言葉

Game-hsiの佐藤洋翔です。

【取り組んだ内容】

自分はチーム内で投稿機能、投稿詳細、カテゴリ検索機能を作成しました。その他に発表資料の作成、発表も担当しました。

 

【よくできたところ】

サイトの機能の一つであるカテゴリ検索機能です。

理由は、新規投稿で新しくカテゴリ(ゲーム名)がデータベースに登録されたら、データベースから随時カテゴリを読み取ってサブメニューにカテゴリが追加されていくようにできたからです。

 

【うまくいかなかったところ】

サイトの作成に時間がかかり実装できなかった機能(いいね、コメント、キーワード検索)があったことです。

 

【卒業研究の感想】

他メンバーの作業を手伝えたことや発表、発表資料作成など全体作業以外にも挑戦して自分の成長に繋げることができた良い卒業研究になりました。