Web制作
開発環境構築

2024.01.14

Web制作において、どのような環境を準備すべきかについての解説します。

実際にあさんてが構築している環境をベースに解説しますが、世の中にはたくさんの便利な開発環境がありますので、選択肢の一つとしてご理解下さい。

開発環境の概説

あさんては下記のような開発環境を構築しています。初めての方には難しく見えるかもしれませんが、簡単にインストールできるものも多く、それほど時間をかけずに構築することができます。

ハードウェア以外は基本的に無料で使うことができ、世界中に開発者がいることから情報も多く存在します。

「開発環境」としては、自宅PC上にWebサーバーを簡単に構築できる “XAMPP” をインストールすることで、Webサーバー “Apache”、データベース “MariaDB”、PHP環境を準備しています。さらに、Webサーバー上にCMS “WordPress” をインストールすることで、ホームページやブログなどを制作する環境を整えています。ちなみに CMS とは Contents Management System の略で、文字通りコンテンツを管理するためのシステムです。

「本番環境」としては、GMO社の “ConoHa Wing” というレンタルサーバーを利用しています。Webサーバー機能は当初から導入されており、”WordPress” もクリックベースでインストールできるので便利です。通信速度、ファイル容量、費用のバランスが良いのでオススメです。

「コンテンツ、プログラム」の転送には “FTP” と呼ばれるファイル転送する仕組みを利用するのが一般的ですが、前述の “ConoHa Wing” ではドラッグ＆ドロップでも転送できます。さらに “GitHub” を使うことでバージョン管理とバックアップを実現し、さらに “GitHub Action” をという機能を活用して、 “GitHub” にデータを登録 (push) すると同時に、レンタルサーバーにデータを転送する仕組みを構築しています。これについては別途ブログでも取り上げたいと思います。

「開発ツール」はたくさんの種類があるのですが、デザインツールとして “Figma”、プログラム編集ツールとして “Visual Source Code”、通称 “VS Code”を、そしてブラウザでの表示確認を “Chrome” 開発者ツールを、それぞれ活用しています。

これらのツールが基本的に無料で提供されているだけでなく、問題が出た際にも解決のための多くの情報がインターネット上に存在していますので、Web制作は初期費用を抑えながら効率的に開発することができます。

PC環境について

「本番環境」をレンタルサーバーなどで別に用意している場合、Web制作向けの「開発環境」としてのPCについては特に高い性能は必要ありません。(動画編集やAI生成をされる場合は別です。)

一方で編集画面と表示画面の両方を確認しながら開発を進めることが多いため、外部ディスプレイなどのマルチディスプレイがあると効率が上がります。

• 高価格なPCは必要無し
  • あさんての場合、2023年まで10万円以下の 2017年製 Note PC で開発していましたが大きな問題はありませんでした。
  • 2023年末からは Mni PC を導入し、Intel Core i7-12650H + 32GB DRAM + 1TB SSD と高性能化したのですが、本体は7万円強くらい(DRAM/SSD/OS込み) の機材で十分過ぎるほど快適です。
  • OS は Windows 11 Pro を利用していますが、Home でもWeb制作上での差分はありません。
• モニター環境は2画面以上あると高効率
  • あさんての場合、WQHD(2560 x 1440) 24″ + WQHD 32″ の2画面マルチを活用中です。解像度はFHD (1920 x 1080) 以上をオススメします。

XAMPP + WordPress の導入

Windows上では “XAMPP” + “WordPress” の構築がシンプルで扱いやすいのでそちらをご紹介します。

“XAMPP” は Windows だけでなく Linux や Mac OS 向けにも提供されていますが、Mac OS 向けとしたは “MAMP” と呼ばれる類似の環境があり、そちらも人気があるようです。

XAMPP

下記の紹介にある通り「簡単にインストール」ができる開発環境です。

XAMPP は最も人気のある PHP 開発環境です。

XAMPP は、完全に無償で MariaDB、PHP、および Perl を含んだ、簡単にインストールできる Apache ディストリビューションです。XAMPP オープン ソース パッケージは、インストールと利用が非常に簡単にできるよう設定されています。

https://www.apachefriends.org/jp/index.html

WordPress

2023年時点で世界中のWebの約4割に用いられているため、かゆいところにも手が届くようなたくさんのプラグインもあり、関連情報も取得しやすいです。

WordPress とは

WordPress (ワードプレス) は、ブログから高機能なサイトまで作ることができるオープンソースのソフトウェアです。

WordPress は無料であると同時に、はじめての方でも、開発者の方でも、誰でも高機能なサイトやブログ、アプリを作ることができる価値のあるものです。

https://ja.wordpress.org/

インストール手順

上記のリンク先で、”XAMPP” および “WordPress” の全手順が丁寧に解説されており、こちらを参照すれば問題なく導入できます。あさんてが “WordPress” 追加導入の際に必ず参照する優良サイトです。

”XAMPP” および “WordPress” のユーザーID / パスワードの設定に注意は必要ですが、基本的には簡単に導入できます。

Figma + VS Code の導入

Figma

“Figma” はブラウザベースのデザインツールであり、特にWeb制作に広く使われ始めています。競合としては Adobe社の “Adobe XD” があるのですが、一時 “Figma” の買収を進めていたこともあり、”Adobe XD” の開発は中断しているようです。

ネットワーク前提、ブラウザーベースで十分使えるのですが、あさんてはデスクトップアプリをインストールして使用しています。

使用方法については、YouTube などにもたくさん情報があるのでそちらを参照しながら実際に使って頂くのが習得のコツかと思います。

“Figma” は神ツールだと考えており良いところがたくさんあるのですが、あさんてが考える “Figma” の特に大きな利点を下記に記載します。

• 強力なデザイン機能がある
  • 例えばヘッダー部分をコンポーネント化して、複数のページに同じヘッダーを付けたりすることができます。同じコンポーネントを使うことが多い Web制作に相応しい機能を有しています。
  • トリミングや重ね合わせなどの画像編集もできるので、ちょっとしたサムネイルであれば “Figma” だけで作ることもできます。
• Web制作との親和性が高い
  • 例えば CSS などで用いられる、margin, padding などの機能が実装されているので、あらかじめ、HTML / CSS コーディングを意識してデザインできます。
• ネットワーク上で共同作業ができる
  • ブラウザベースであるこことから、リンクの共有をすることで簡単にデザインを共有したり、そのデザインに対して閲覧者がフィードバックコメントを記載することもできます。
• 基本無料で使用できる
  • 多人数で使う場合を除いて、ほとんどの機能を無料で提供されていることから、個人事業者やフリーランスにとって使いやすいです。

Visual Source Code (VS Code)

Microsoftが提供しており、Windows,、macOS、Linux、Web用のソースコードエディタです。

あらゆる言語に対応した多数のプラグイン機能があり、ソースコード編集から GitHub 連携までコード開発に関わるあらゆる機能が提供されています。

あさんてが利用しているプラグイン機能については、いずれ本ブログでもご紹介しようと思います。

Chrome 開発者ツール

Chrome、Edge、Firefox、Safari など主力ブラウザには開発者ツールも実装されています。Windows の場合、”F12″ を押すことで開発者ツールを開くことができ、これを活用することで Web制作の効率を大幅に上げることができます。使用していない時期には CSS が当たらない理由が分からず四苦八苦していたので、もう開発者ツール無しではWeb制作は困難と感じています。

開発者ツールの利点

多くの利点がありますが、主なものを下記に記載します。

• レスポンシブ開発に最適
  • 開発者ツール上で画面幅を変更できるため、レスポンシブデザインの際の不具合を開発中に発見できます。
  • また実際の機材がなくても iPhone SE など見え方を事前に確認できるため、シェアの大きい機材に対して最適化をすることができます。
• デザインの微調整をリアルタイムにできる
  • HTML / CSS を開発者ツール上で変更すると、リアルタイムに表示も変更されるので、デザインを作りこんでから、CSSを更新する、などの効率化が可能です。
• デバッグ機能を活用できる
  • Console を確認できるため、javaScript などの console.log 機能を用いてデバッグをすることができます。
• 画面キャプチャ機能が便利
  • 開発者ツール上での画面キャプチャを行うことで、品位の高い画像ファイルを取得できます。
• コード解析に使える
  • 優れたホームページは HTML / CSS などの実装が気になりますが、それを簡単に確認することができるため、技術向上に役立ちます。

基本の使い方

• 表示とコードの関係性の確認
  • (Windowsの場合) ブラウザ上で “F12” を押すことで下記のように、HTML / CSS の実際のコードやパラメタを確認することができます。
  • HTML上でマウスを動かすと、それに対応した表示部分に色付けがされるので表示とコードの関係性が簡単に分かります。下記の例では “Do our BEST Web Design” 部分の表示とコードに焦点を当てています。

• レスポンシブ設計の検証
  • 下記矢印部分をスライドさせることにより、上側赤枠に表示上の画像サイズが表示され、1pxずつ動かしながらレスポンシブ設計について検証することができます。

• 主力機器での表示確認
  • 下記の右側赤枠を押すと、スマホなどの画像サイズに切り替えることができ、左側赤枠で “iPhone SE” などを選択すると、それに該当した画像サイズでの表示が確認できます。
  • “iPhone SE” の場合 375 x 667 であり、シェアが高いことから、”iPhone SE” 上で問題なく表示され、かつ見栄え良く設計することは必須になります。

開発者ツール Tips

• 画面キャプチャ
  • 下記の上側赤枠をクリックすると、”Capture screenshot” “Capture full size screenshot” が選択でき、それぞれ1画面、フル画面の画像キャプチャが可能です。
  • Windows等のキャプチャ機能を用いることもできるのですが、Webポートフォリオなどで、決まったサイズの高品質の画像が欲しい場合、”iPad Mini” を選択し、”Capture screenshot” をすることで取得することができます。
  • 私はよく忘れますが、どのような条件でキャプチャしたかは覚えておきましょう。

• 特定ブロックの非表示化
  • 上段がオリジナルなのですが、赤枠で囲んだ部分を非表示化する方法です。例えばキャプチャするために邪魔な広告部分を非表示にするような場合に活用します。
  • 下段が非表示化した結果なのですが、右側赤枠の CSS 部分に “dispay: none;” というブロックを非表示にする記載を追記することで、該当ブロックを非表示にできます。

• Event Listeners の確認
  • 少し高度な話になるのですが、JavaScript において、どのようなイベントに対応しているのかを確認する方法です。
  • CSS部分の上側赤枠で “Event Listeners” をクリックすると対応したリストが表示されます。下記の例では HTML / CSS 読み込み時のイベントである “load” イベントに関連した “Event Listeners” を確認した結果であり、JavaScript がうまく動作しない場合などのデバッグに利用します。

関連カテゴリ

“環境構築” に関わる関連投稿です。