My portfolio

Minaho Hombu

Team Project

プロジェクトの概要 「じゃがじゃがみやざき」

Work1

じゃがじゃがみやざき

さがして、見つけて、共感する。

☆ターゲットはおとなから子どもまで!
有名な観光地は色々あるけれど、そこに人が集まりがち...「そこはもう行ったことある」なんてことも。
そこで、なるだけnicheな、地元民密着型の口コミ情報サイトを作りました。

Project's Time Line

2024.4月中旬

チーム結成!

キッカケは帰り道の雑談中。
プロジェクトリーダーの「こんなものを作ってみたい」というアイデア。
力になりたかったので、2つ返事で「マネージャーやるわ!」と言ってみました!
プログラムに意欲的そうなメンバーを選定。声をかけて集結した5人メンバーで開発することになりました。

最初は途方もなかったです...

4月下旬

ミーティング

(約10時間。それ以外は日常的に話し合い)
まずは目標の設定。
それからタイトル、コンセプトなど主に非機能要件のアイデアを出し合いました。
PHPの知識があるメンバーですが、Laravelを新たに学んで開発することを決めました。
理由:目的と開発規模を考えた際にセキュリティの強度が必要だと考えたため。

工夫した点は、メンバーが誰でもいつでもアイデアを出せる環境づくりです。

    工夫したこと

  • Figmaを使用してアイデアを出し合う
  • Discordを用いたオンラインミーティング など。
figma
5月上旬

RDBの定義

(約20時間)
一番最初の壁でした。
必要なテーブル数は?必要なデータは?何と何を紐づけする必要があるのか?
時にはアドバイスを求めながら、話し合いを重ねました。
Migrationを用いてDB管理することもここで決定しました。
特に、DBの内容を"全員が共通理解する"ということの難しさと大事さを感じました。

Googleスプレッドシート
5月中旬

デザインの作成

(約15時間)
YouTubeでillustratorの学習をしていたら、ロゴを制作してみたい!と思い、チャレンジしてみました。

ロゴ制作

    こだわった点

  • 太陽とフェニックスの木を象徴に、キレイな海や甘酸っぱい日向夏も表現
  • 宮崎観光協会のサイトよりラフなイメージに

"コンセプト"に基づいて、想いをかたちにしていくことの大事さを学びました!

その後、トップページのデザインなども担当しました。

同時期

Laravel環境構築

パッケージ管理用にComposerもインストールし、XAMPPにLaravel開発環境を構築しました。
これまですべてGUIで操作してきたので、ここではじめてCUIでの操作を学びました。

5月下旬

コーディング

(約20時間)
私は1ページをプログラムするのではなく、皆の手の届かない細かな部分を担当しました。
ex)詳細ページへのユーザ名取得と表示など...

Git-Hubでのソース管理をしながら各々が1ページずつプログラムを作っていく方法を取りました。
Git-Hubの使用方法や、各々のページが競合してしまうことに難しさを感じました。

SorceTree
6月上旬

ページ・機能の修正

(約20時間)
機能を追加するとバグが多くなってきたので、バグの修正などで苦労しました。
私はこの時期主にレスポンシブで字いんへの対応などを行いました。

6月中旬

本番環境へ移行...完成!!

GCP(Google Cloud Platform)を使用し、本番環境へ移行しました。
ドメインも取得。

Review

5人全員が新たなチャレンジをし、刺激し合って制作できたのが良かったです!
化学反応が起きた時の楽しさは別次元でした。
また、課題を自ら選び、一生懸命取り組んだことがかけがえのない財産になりました。

制作期間
約2ヶ月(約100時間)
メンバー
5人
使用言語
HTML CSS PHP Laravel
ツール
illustrator Figma
環境
XAMPP GCP

今後の課題

投稿削除機能を追加したい。また、APIを追加して投稿→情報の反映をラクにしたい。

プロジェクト概要「クラス掲示板」

Work2

ClassHP

仲間たちへ有益な情報を。

よりシンプルに、分かりやすく。
☆ターゲットはライブビジネススクールのクラスメイト!
資格勉強のサイトや、何気ない雑談中に出てきた情報をまとめておいて、リンクにしたものを皆で共有し、未来を掴む!を目指して制作しました。

Project's Time Line

2024.3月中旬

第一段階を作成!

最初はWordPressのノーコードページでした。

https://xs527372.xsrv.jp/

私は主に求人情報の収集、クラスの皆の需要に合わせて一覧にする作業をしました。この時点ではスプレッドシートで作成しています。

Googleスプレッドシート
5月上旬

再構築の提案

Webサイト作成を終え、以前よりやれることが増えているはず。自分の実力がちょっと分かってきた。
それを生かして、もう一度作ってみよう!提案しました。
そして、ターゲットややりたいことをもう一度考えることにしました。

5月中旬

RDBの定義

(約10時間)
授業の内容や、チーム制作で学んだことを応用し、RDBを作成。データ作成は苦労しますが、仕組みが分かり始めて楽しくなってきました!

Googleスプレッドシート
5月下旬

デザインの作成

ここはメンバーに仕事を振りました!

6月上旬

コーディング・DB入力

(約10時間)
デザインに基づきHTML,CSSを作成しました。レスポンシブデザインへの対応も行いました。

6月中旬

機能追加..一気に完成!

(約10時間)
PHPとMySQLを使った求人情報のプログラムを作り、機能を追加していく過程全てをおこないました。

PHPの中で使った知識

  • require文

  • if,for,foreach文を使った条件分岐

  • htmlspecialcharsを使ったデータ取得

  • try~catchを使ったDBへのデータ取得

Googleスプレッドシート

Review

PHPの勉強、そして復習になりました!
学習した内容を、2人でお互いに自分のスキルレベルで、アウトプット。その一歩踏みだせたことが一番自信になったポイントです。
企業情報は、自分の気になる必要な部分だけ抽出して並べる、ということができたのでそれは良かったです。

制作期間
約20日(約30時間)
メンバー
2人
使用言語
PHP HTML CSS
ツール
スプレッドシート Figma
参考
PHPの教科書

今後の課題

データ量が少ないため、もっと情報を追加したい。ページのデザインも整える予定。JavaScriptで動きをつける勉強中。
foreach文を使ってoptionの値を取得したかった。