ID:67913さん

# プロジェクト概要 米国ユーザをメインターゲットとした、日本のアニメ・マンガのコミュニティ＆データベースサイト。 月間アクティブユーザ数：約1,800万人 月間ページビュー数：約2億7,000万PV ## サイトのメイン機能 - ユーザが自身のマイリストに作品を登録し、視聴状況のステータス管理や第何話まで観たかの進捗管理を行える - 各作品ページで作品に対してのレビューやコメントを行える - ユーザがブログを書き、他のユーザに見てもらえる - ユーザ同士の友達機能、メッセージ機能 - ユーザが「クラブ」というコミュニティを作り、他のユーザが参加することができる - ユーザのレビュー・ブログ・クラブ等に対して不適切なものがあれば、管理者権限を持ったユーザが修正や非公開を行うことができる # 開発・実装内容A 【概要】 ユーザの登録者数を増やすための施策として、ゲストユーザが作品のお気に入り登録を行えるようにし、会員登録時にその内容をマイリストに反映させるようにする 【どのような機能の開発・実装か】 以下内容の開発を担当することとなった - 気になった作品を最大100個まで、ステータスとセットでお気に入りリストへ登録・削除できる - ハンバーガーメニューを設置し、右上に現在の登録数を表示 - ハンバーガーメニューをクリックすると、登録作品の画像やタイトル等の情報が順番にモーダルで表示される - ゲストユーザ会員登録を行うとマイリストにお気に入り登録した作品が反映される 【課題・問題点】 未ログイン状態でのお気に入り登録作品データの保持と会員登録時の受け渡しをどのように行うか 【打ち手・使用した技術】 以下手順で実装を行なった - PHPで作品idとステータスをjson形式でCookieに保存することにした - 作品のお気に入り登録が最大100個まで行えるため、ブラウザに保存できるCookieの最大容量を超えてしまう可能性があり、jsonを圧縮して保存するようにした - ハンバーガーメニュー右上の登録数表示はと会員登録時の受け渡しはクッキーから取得し、登録完了と同時にクッキーを削除 - ハンバーガーメニュークリック時のモーダルはFancyboxというjQueryのライブラリを使用 # 開発・実装内容B 【概要】 不定期に行われるイベントの場合の、サイト内への画像やリンク表示方法の見直し 【どのような機能の開発・実装か】 以下内容の実装を担当することとなった - 単発の限定イベントの場合、その期間のみサイト内の特定箇所にキャラクター画像やリンクを設置することがある - イベントの開始終了時に毎回ソースコードへの記載・削除を繰り返すのが煩わしいため、ソースコードに記載せずに実現させる 【課題・問題点】 直接ファイルを更新する以外の方法で、DOM操作を行う必要があるがどのように行うか 【打ち手・使用した技術】 以下手順で対応した - 画像ファイルは保存しておく - Google Tag Managerで期間を指定して、該当機関にJavaScriptでDOM操作を行った # 本プロジェクトの特徴と、実装時に意識していたこと 【特徴】 2006年に開設されたサービスで、様々な会社と共同開発が行われてきたため、以下の特徴と注意点ががあった。 - ファイル量が多く、ディレクトリ構造の階層も深い - リファクタリングが不十分なままの箇所があり、素のPHPで書かれていたり、データ取得も直接SQLを書いていたりとレガシーなコードも混在している - クラス名の命名規則が統一されておらずCSSやjQueryによって予期せぬ影響が生じることがあった 【意識していたこと】 - チーム開発を円滑に進めるため、ネストが深くならないようにシンプルなコードを心掛けた常に可読性を意識した - 影響範囲を意識し、細かくデバッグしながら新たなバグが生じないよう最大限注意を払うことを徹底した

# プロジェクト概要 「何かを始めたいけど、どう進めたら良いか分からない・・・」 という悩みを抱えている人のサポートを行いたいと思い、個人活動で制作したサイト。 URL：https://mj-lab.com/ ※制作途中 【サービス内容】 - Web制作 - グラフィックデザイン - 動画制作 - オンライン学習サポート # 課題・工夫点・成果 【課題】 今後Web制作を行う際にWordPressの知見は持っておきたいと考えているが、そもそもWordPress自体の仕組みを理解していない。 学習と制作を効率的に行えるよう、整理して進める必要があった。 【工夫点】 今回のゴール設定を明確にし、手順を整理して進めた。 ▼今回のゴール設定 オリジナルテーマで、コーポレートサイトを作成すること。 ▼手順の整理 1. ブログ機能は不要のため学習対象から除外して考える 2. 最初はWordPressの仕組み理解に重点を置くため、既存テーマを用いてサイト制作を行う 3. 既存テーマで制作したサイトでWordPressの仕組みをある程度把握してから、オリジナルテーマ制作を行う 4. オリジナルテーマが完成したら、既存テーマと差し替える 【成果】 目的と手順を整理して進めることにより、自身がどこが理解できていないかを明確にすることができた。 ▼既に理解できている点 - PHP、HTML、CSS ▼今回理解が必要な内容 - テンプレートタグについて - Thema内のディレクトリ構成について（優先して表示されるファイル、function.phpでの設定） # 実装について 実装にあたってはサイトに動きをつけたかったため、以下内容の実装を行った。 - TOPページは背景に動画を適用し、パララックスデザインとした - ヘッダーや各コンテンツの動きは、CSSアニメーションとjQueryを用いて実装した - アクセス数確認はGA4で確認できるよう設定した # 今後の学習と行いたいこと 今後は以下内容を行なっていく予定。 - 未完成ページを完成させる - 決済機能の実装（Stripeを使用予定） - ブログ機能の学習とブログサイトの制作

# プロジェクト概要 React学習と並行して制作した、自身のプロフィールサイト。 URL：https://mukai-junichi.vercel.app/ # サイト構成 - Home ページ - About me ページ (経歴について) - Works ページ (制作物について) - Skills ページ (スキルについて) # 実装 - 各ページのルーティングはNext.jsで出しわけ処理 - Worksページで作品をクリックした際のモーダルは、Hooksの勉強のためuseStateとuseEffectを使用し実装 - スタイルはTailwindCSSを用いて実装 - 変更対応しやすいようにfunctionと文言は別々に定義し、ループ処理はmap関数を用いて実装 # GitHub https://github.com/mukai-junichi/mukai-junichi # 今後の学習方針 Hooksについて、CSRやSSR等のレンダリングのタイミングやそれによるSEOの観点での影響等について等、継続して学習を行い、理解を深めていきたい