コーポレートサイトの構築記録(2)
はじめに
今回からコーポレートサイトのコーディング作業部分に入りたいと思います。
主な使用言語・ツール
サイト制作で使用する言語・ツールは下記の通りです。webpack と BABEL は、 JavaScript の統合とコンパイルに専念させ、全体のタスク管理は Gulp に担当して もらいます。
- HTML
- CSS
- JavaScript
- Gulp
- Sass
- webpack
- BABEL
フォルダ・ファイル構成
フォルダ・ファイル構成は下記の通りです。
CorporateSite（プロジェクトフォルダ）
┣ dest
┃ ┣ css
┃ ┣ fonts
┃ ┣ img
┃ ┣ js
┃ ┗ webfonts
┃
┣ node_modules
┃
┗ src
┃ ┣ img
┃ ┣ js
┃ ┗ sass
┃
┣ .eslintrc.json
┣ .prettierrc
┣ babel.config.js
┣ gulpfile.js
┣ package.json
┣ package-lock.json
┗ webpack.config.js
サイト作成の基本方針
いきなりトップページを作るのではなく、下層ページから作成していき最後にトップ ページを作りたいと思います。
また、自分の体感として作成時の効率が良いと感じるので、スマホ版 → PC・タブレット版 → PC 版（大）の順番で作る事にしました。
また、サイトのページが複数あり再利用性の高い CSS を作成・利用したいので、CSS 設計 に FLOCSS を採用します。
「ニュース」ページ
最初に作成する下層ページは、記載内容がシンプルなので「ニュース」ページにしました。 上記でも記載した通り、まずはスマホ版を作製していきます。
苦労した点
webpack や BABEL の設定ファイルの記述方法や、必要なパッケージを調べるのに時間が 掛かりました。
ハンバーガーメニューが機能するように JavaScript を書くのが、思っていた以上に苦戦 しました。書籍や Youtube のチュートリアルを調べまくってなんとか形に出来ました。
気付いたこと、困ったこと
- 作業時に、GitHub へ push した際にセキュリティーアラートが出ました。内容を確認 すると依存関係にあるパッケージのアップデートが必要なようでした。アップデートを 行い再度 push したのですが、アラートが消えず困りました。
regular expressions Cross-Site Scripting (XSS) vulnerability
良く調べてみると、問題のあった serialize-javascript を利用している terser-webpack-plugin でイシューやプルリクエストが出ている最中の為、 アップデートをしても、package-lock.json ファイルに反映されずアラートが消えなかった ようです。後日、アップデートを実施し対応完了としました。
デザインしている時は気付かなかったのですが、ハンバーガーメニューを展開した時の 画面をデザインし忘れていました。デザイン抜きでメニュー画面を作成しました。
フッターのリンクにページが存在しないのに記載されているリンクがありました。 デザイン時は、なぜか気にしないで作業していたようです。追加でページを作るか リンクを無効にして準備中扱いにするか、考え中です。
まとめ
なんとか最初の下層ページを作成出来ました。ここから少しづつペースアップしていきたい と思います。
最後までご覧頂きありがとうございました。
