ポートフォリオサイト_コーダー視点

2022-08-03
2024-01-26

当サイトの制作について書きます。
制作の流れは、

①静的なサイトをつくる
②WordPress化する

の順で制作しました。それでは、細かく見ていきます。

静的サイト

サイトを作成する際にいきなりWordPressのテーマとしてつくらずに、まずはHTML/CSS/JavaScriptのみで静的なサイトを制作しました。

また、制作中はプラグインやライブラリを極力使わないように意識していました。

その理由はHTMLやCSS、JavaScriptの理解を深めつつサイト制作の基礎も体得したいと考えたからです。当時は時間があったので、あえて遠回りしてサイトやコーディングの仕様や仕組み部分などのコア部分もじっくり学びました。

レスポンシブ対応

デザイナーと話し合い、ブレークポイントを切ってスマートフォン / タブレット / パソコンすべてに対応してみました。

ここで得た教訓は、HTMLをどのような構成で組むかはコーディング開始前に事前にしっかり考えないと後で苦労するということでした。

例えばレイアウトがSP用からPC用に切り替える際に構造的に破綻していると辻褄を合わせるために不要なpostionプロパティなどが増えたりして、後から修正や更新する際にソースコードが分かりづらくなるなどメンテナンス性が悪くなったりします。

なので、レイアウト構造を頭にしっかり落とし込んだ上でマークアップする事は大切です。

ドロワーメニュー

当サイトのドロワーメニューは、

・開閉時にフワッとアニメーションする
・開いているときはスクロールを制御する
・閉じるボタンと、パネル外のクリックでメニューを閉じれるようにする
・ページ内リンクはスムーズにスクロールする

上記のように、一般的にありそうな仕様で作りました。

ページアップボタン

当サイトのページアップボタンの仕様は、

・ページ最上部では非表示
・ページの特定位置から表示
・ページ最下部では特定位置で止まる
・スクロールは気持ち良く

JavaScriptで位置座標を計測することと、移動の際はアニメーションさせることで上記仕様を叶えています。

お問い合わせフォーム

お問い合わせフォームは、何度か改変しました。

①googleフォーム
↓
②contactform7（プラグイン）
↓
③MW WP Form（プラグイン）

の順に試しました。
当サイトのフォームの特徴は4つあり

・デザインがオリジナル
・確認画面がある
・サンクスページがある
・連絡があると自動メールが届く

最終的にMW WP Formに落ち着きました。
理由は確認画面の設置が一番やりやすかったからです。

GitHubで公開

制作したサイトの公開にまずはGitHubを利用しました。

以前に、自作ゲームをGitHubにPushした経験があったのでハマる事なく割りとスムーズにいきました。

サイトのテーマ化（WordPress）

以下の理由からサイトをWordPress化することにしました。

・ブログ機能を追加したい
・ブログを実装する上でサイトの運用と管理を快適にしたい
・コーダーとしてWordPress自体の構造に興味があった
・お仕事の幅を広げたい

自作のサイトをWordPress化するという事は、オリジナルテーマを作成するという事です。

テーマ化するためにまずは、

①レンタルサーバーの契約とドメイン取得する。
②契約したサーバーにWordPressをダウンロード&インストール。

それからテーマを作っていきます、

③ファイル名をWordPressの仕様に合わせて書き換えていく。（例：index.html→index.phpなど）
④ソースコードの一部をPHPで書き換え。（例：aタグのhref属性値をインクルードタグを使って読み込めるようにするなど）

上記以外にも、ファイル内をパーツ毎に分割していくような部分などありますが、大まかにこんな感じです。

WordPressサイト

テーマ制作は、初めての経験が多く刺激的でした。

例えば、WordPressの仕様の１つでファイル名によってファイルの読み込み優先順が変わる「テンプレート階層」です。

他にも、サーバーからのレスポンス内容を制御するために「クエリ」を理解する必要があったり、投稿内容を動的に吐き出すためのWordPress関数と利用した「ループ」など。

JavaScript以外のプログラミング言語が初めてでしたし、サーバーサイド言語も初めて使いました。JavaScriptが大好きで使っていたので、別言語であるPHPの基本部分の理解は楽でした。

投稿記事ページ

当サイトの投稿機能を使ったものとしては、「ブログ」と「制作物」の2タイプ用意しました。

ブログは初期の投稿機能を使い、制作物はfunctions.phpでカスタム投稿タイプを設定して使っています。

２タイプそれぞれに、専用の一覧ページ、サイドバー、個別ページを用意していて、出力内容を自動で切り替わるようにしました。

サイドバー

当サイトのサイドバーは、

・「ブログ系」と「制作物系」の2タイプが存在すること
・スクロールに合わせてついてくること
です。

2タイプのサイドバーは「タグ」という項目がそれぞれにありますが内部的には完全に別物として作ってあります。

ブログページならサイドバーの「タグ」は、ブログ系の記事に関するタグからリストを抽出しています。
同様に制作物ページなら制作物系の記事のタグからリストを出力するという仕様です。

「タグ」と同じように、その他の項目の「最新の投稿」「カテゴリー」「アーカイブ」に関してもそれぞれのタイプ専用の内容を自動で出力できるようにしています。

目次機能

当サイトでは、目次を投稿記事の個別ページで使用しています。
主な特徴は3つ。

・JavaScriptでコーディング
・目次の項目は記事の内容に合わせて動的に生成（見出しタグを抽出）
・項目の中見出しと小見出しのような親子関係（階層構造）を表現する

当初はPHPで作ろうと試みましたが時間的に急いでいたため、急遽慣れているJavaScriptで実装することにしました。

テーマの完成？と管理画面のカスタマイズ

一通り実装できたのでテーマの完成としても良かったのですが、これからのサイト運用を考えると日々の投稿が快適に行えるようにしておきたかったです。なので管理画面をカスタムフィールドプラグインを用いてカスタマイズしました。

私だけでなくデザイナーのmisaも記事を投稿したりするのでサイトの管理のしやすさはできるだけ向上させたいと思いました。

カスタマイズして良かった点は、

・執筆者がどこに何を書けばよいかが分かりやすくなった
・記事の内容が定型化されるので、サイトを通して統一感が出る
・執筆者が決まった箇所のみ触れるので表示崩れなどの想定外のトラブルを防ぎやすくなった

サイトを使う期間が長いほどに受ける恩恵は大きくなると考えられるので、やって良かったです。

バックアップ

行っているバックアップの方法は以下。
・WordPress内のプラグインを利用してデータベース&ローカルに保存
・クラウドサーバーを利用する
・USBにもたまに保存

セキュリティー対策

主に、ログインや入力フォーム関連などに対してオーソドックスな対策は一通り抑えています。
プラグインの活用もしています。

サイト制作を通して大事にしたこと

ここからは、作業全体を通して大切にしていることを書きます。

コミュニケーションの質

Webサイトはあくまである目的を達成するための一手段だと思います。

なので、誰が何のために誰に向けてサイトを作りたいのかを抑えておく必要があります。それを知るためには依頼主さんの声に耳を傾けたり話を上手に聞き出す事が肝要です。
コーダーの場合は、デザイナーやディレクターなどとの内部的なコミュニケーションもあります。

そんなコミュニケーションの中で、相手の意図や思いをいかに正確に汲み取れるかが良い納品物を作れるかどうかに直結していると感じます。

タスク管理

プロジェクトは、Notionというタスク管理ツールで管理しています。
データベースのさらなる活用法は無いかと定期的に考えて更新することとか好きです。

ファイル名やクラス名などのネーミング

制作中に地味に気を使うのがコードやファイルのネーミングです。
時間が経つと、過去に自分が書いたコードでさえ理解するのが難しい時があります。
そんな未来の自分や、別のコーダーさんが見たときに、そのコードが何をしているのか一目で分かるものにするためにネーミングにはこだわっています。

まついちの人柄について

さいごに、わたしの人間性について簡単にまとめておきます。

・技術的な関心や仕組みなんかも興味関心が高めで、新しいツールを使うなどの抵抗はほぼ無い
・体調面やメンタル面を含めた自己管理の意識が高く、常に環境の見直しを考えている
・日々抱える課題や疑問を解決または仮説を立てようとするクセがあるが、期限があるなど目的達成のためなら案外あっさりと諦める割り切りスキルも所持している
・人のささやかな親切や気遣いに気づくのが得意で、相手に対してこっそりと関心していることも多い
・身内内ではユーモアのセンスについても向上心があり、たまに「芸人やん！」とツッコミを頂く

最後のはコーダーとしてのアピールとは無関係でした。
好きなことに対して真面目ですが、自分では気難しくは無いと思っています。

長文になりましたが、最後まで読んで頂き本当にありがとうございました。
お仕事のご相談や何か気になることなどありましたらお問い合わせフォームに連絡ください！

プロジェクト	ポートフォリオサイト制作
作業内容	企画テスト作業コーディングチームのタスク管理の準備（Notion）サーバーの契約からアップロードなど
製作期間	17か月（プロとして活動する準備として遠回りしながら網羅的にじっくり制作）
URL	animo