ウェブ入門

MDNのカリキュラムを読み進めます。

MDN Web Docsは最高の学習素材です
に従って「ウェブ開発を学ぶ」から始めることにします。
完全な初心者向けの記事もあるようです。

なんとなく分かった気になってる部分もあるので、初心者向けの記事も読むことにします。
ただ、十分に知っている（開発できる、他人に説明できる）ものはさらっと読むだけにしておきます。

ウェブ開発を学ぶ

このエリアの目的は対象者を「初心者」から「エキスパート」にすることではなく、「初心者」から「中級者」にすること

だそうです。
明確に目的とゴールがあるのは良いですね。

読み始める場所
によると

1. 全くの初心者の方
2. 基本の次の段階の方
3. スクリプト作成まで進む方
4. フレームワークとツールの利用

の４段階あるそうです。

全くの初心者の方用の「ウェブ入門」を読んでみます。

1. ウェブ入門

1.1 基本的なソフトウェアのインストール

まずは開発環境の整備からですね。

(a) コンピューター
コンピューターというよりはOSでしょう。
Windows, macOS, Linuxがありますが開発環境としてはWindowsかmacOSでしょうね。
特にこだわりがなければWindowsにしておけば良いと思います。

(b) テキストエディター
下手すると宗教戦争ｗになるので深く突っ込むのは止めます。
Web開発をするなら"Visual Studio Code"で良いでしょう。
Visual Studio Codeは2015年に公開されました。
私は当時マイクロソフトがオープンソースのソースコードエディタを出すってと懐疑的に思っていました。
おそらく私はその当時はEclipseとか使っていたと思います。 

VS Codeは機能も順調に増えていますし、プラグインで色んな機能を追加できます。
もうデファクトスタンダードと言って良いでしょうね。

(c) ウェブブラウザー
ブラウザは最初は文字だけの文章をリンクでたどって参照、閲覧できるだけのものでした。
ヘルプのちょっと高機能版くらいですね。

それがあっという間にWebアプリの実行環境となりました。
ただブラウザ戦争などの影響もあってブラウザ依存やサポートしている機能の差異などもあります。
その辺を調べるサイトもあるので、xxxだと表示が崩れる、期待する動作をしないということを避けることができます。

とりあえず

1. Google Chrome
2. Firefox
3. Microsoft Edge

の最新版でテストしておけば問題ないと思います。

Safariは現在はmacOS版しかないので、どうしてもmacOSを使いたいという要件がなければテスト対象外にして良いでしょう。
また「古いブラウザー（IE 8-10 など）でもサイトがどう動くのかをテストしましょう。」
とありますがとりあえず無視でいいと思います。

(d) 画像編集ソフト
仕事でWebサイトを構築するとデザインはpsd, ai, xd形式で受け取ることが多いでしょう。
どれもAdobeのアプリ用のファイル形式ですね。
Adobeはサブスクリプション形式になって、いわゆる"Adobe税"を支払わなければならない状態です。
フリーランスで開発を受託している人たちなどは結構な負担になりますね。

以前psdファイルを扱うことが出来る無料ソフトを探したのですが以下の三択になりそうです。

1. GIMP
2. Paint.NET
3. Photopea

GIMPは昔からある有名な画像編集ソフトですね。ただ個人的にはあのUIがダメです。どこで何をしていいのか迷います。

Paint.NETはWindowsでのみ動作する画像編集ソフトですね。Windows標準のPaintの延長上で使えます。

Paintでは機能が少なすぎ、PhotoShopなどは機能が多すぎって人がカジュアルに使うには良いと思います。

またプラグインを導入する必要がありますが、psdにも対応できます。

 

PhotopeaはWebベースのアプリケーションです。

画面右側に広告が表示されますが、無料でpsd, ai,xd, sketch, pdf, xcf, rawと様々なフォーマットに対応しています。

UIもフォトショップに似ているので人によってはすぐに使えるようになるでしょう。

 

(e) バージョン管理システム

チームで開発するときはもちろん自分１人であってもソースコードの変更履歴の管理や特定の版から派生して開発をしたり、その結果をマージしたりとなくてはならないツールですね。

ツールとしてはGitが事実状の標準と言ってよいでしょう。2014年出版と古いですがPro Gitという使い方を説明した書籍が無料で公開されています。

Gitに基づいたソースコードホスティングサービスがあります。有名なのは以下の３つですね。

サービス上でソースコードをリポジトリという単位で管理できます。

1. GitHub
2. GitLab
3. Bitbucket

GitHubは最も有名なホスティングサービスでしたが2018年にマイクロソフトに買収されました。

当時はGitHubの優位が崩れてマイクロソフトによる強い支配ｗが始まるかと危惧しましたが、幸いそうはなりませんでした。

無料版でもプライベートリポジトリが作成できるようになりましたし、コラボレーターの制限もなくなりました。

オープンソースは元より企業での開発においても十分に使えるようになったと思います。 

(f) FTP プログラム

ローカルの開発環境で開発したものは、テスト環境や本番環境にコピー（デプロイ）する必要があります。

開発したファイル一式をFTP(File Transfer Protocol)というプロトコルに対応したアプリケーションでサーバにアップロードします。

この目的では、 FTP の代わりに Git が用いられつつあります

とありますが、Gitにソースコードをコミットしたら自動的にサーバにデプロイするように環境を構築するというのが正確でしょうか。

私はFFFTPを使っています。特に理由はないですが新入社員ｗのころに使いだして慣れているせいかそのまま使い続けています。

曽田純氏による開発は2011年8月31日をもって終了したようですが、その後は有志によるオープンソースでの開発が続けられているようです、ありがたい。

 
(g) 自動化システム

Webpack、Grunt、Gulp はコードの最小化やテストの実行などのような反復作業を自動的に実行することができます。

Webpackは複数になっているJavaScriptをまとめて１つにするいわゆるモジュールバンドラーのことですね。

Grunt、Gulpはタスクランナーという分類だそうです。

何が違うんだろとググってみました。

タスクランナー　ビルドツール　モジュールバンドラ　違い 

モジュールバンドラ

モジュールをひとまとめに（bundle）するツール。
＝JavaScriptの依存関係を解決して、ひとつのファイルにまとめてくれるツール

 

タスクランナー

フロントエンドの仕事で面倒なタスクを自動的にやってくれる便利なツール 

うん、分からんｗ

タスクランナーとの違い - webpackのチュートリアル

ふむ、ちょっと読みずらいですが抜き出して整理すると以下のようです。

Webpack のようなモジュールバンドラーの主たる目的

1. それぞれのモジュールの依存関係を解決すること。
2. それらの複数モジュールを１つファイルとしてまとめる（バンドル）すること。

Gulp や Grunt といったタスクランナーの主たる目的

1. タスクを自動化すること
2. Web 製作には様々な細かいタスクがありますが、その中にモジュールバンドルがあります
3. 他のタスクとしては、ファイルのコピーや結合、JavaScriptやCSSファイルなどの構文チェック、 正しく機能が動作しているかという テストなど、様々なタスクを含めて複合的に実行することができます。

ああ、なるほどタスクランナーが管理するタスクの一つとしてモジュールバンドルがあり、そこでモジュールバンドラーを使うんですね。

 

(h) ライブラリーやフレームワークなど

ライブラリーは、既存の JavaScript や CSS のファイルであり、コードで使用するために、すぐに使える機能を提供しています。フレームワークは、この考えをさらに進めて、ウェブアプリケーションを書くためのカスタム構文を持つ完全なシステムを提供する傾向があります。

私は以下のように漠然と認識していました。

ライブラリ：共通的な機能をまとめたもの。 使える機能が提供されているのでプログラマが実装したい要件に合わせて利用するもの。

フレームワーク：ライブラリをさらに進めて特定の用途（Webアプリケーション、デスクトップアプリ、組み込み系アプリ）の開発のための枠組みを提供するもの。

 

ググってみると決定的な違いは「制御の反転」 にあるようです。

Part1　ソフトウエアのフレームワークとはなにか

 

ライブラリ

ライブラリを呼び出すのはユーザのコードです。

関数の中で共通機能を呼び出して自分の実装したい機能を実現していきます。

 

フレームワーク

ユーザのコードはフレームワークから呼び出されます。

フレームワークによって作法が違いますが、作法や記法に従って特定のフォルダの下にファイルを追加して、ファイル内にクラスや関数を実装していきます。

そしてその関数を呼び出すのはフレームワーク側の処理です。

 

(i) 他にも便利なツールがたくさんあります！

そうですね。私もブログを書きながら思い出したり、見つけたりした場合は記載しておこうと思います。

 

 

Web技術の学習の開始

Web技術の学習

超今更感がありますが、時間があるのでWeb技術の学習をすることにします。

1. HTML
2. CSS
3. JavaScript

が学習の中心になるでしょう。

またPC版だけでなくMobile版でも適切なデザインに対応するために「レスポンスデザイン」についても学習していきます。
現状では画面の解像度にしたがってコンテンツの並びや見た目をCSSで変えていくだということくらいしか知りません。

学習教材

ホームページ、YouTubeと探せば山のように教材はあるのですが、たくさんありすぎて逆に迷います。

色々探していて見つけたのが以下のサイトです。
MDN Web Docs

MDNはMozilla Developer Networkの略です。

ウェブ標準及びMozillaプロジェクトの開発文書のためのMozillaの公式ウェブサイトである。
MDN Web Docsは開発者向けの資源であり、開発者や技術ライターのコミュニティによって維持されており、HTML5、JavaScript、CSS、ウェブAPI、Django、Node.js、WebExtensions及びMathMLといった様々な話題に多くの文書をホストしている。モバイルウェブ開発者向けに、MDNはHTML5モバイルアプリ、モバイルアドオンの構築、位置認識アプリといった話題に関する文書を提供している。

だそうです、以下を参照
https://ja.wikipedia.org/wiki/MDN_Web_Docs

通り一遍ではなく、開発者や技術ライターの執筆した質の高い記事が期待できそうです。


MDN Web Docsは最高の学習素材です。
というNoteの記事を見つけました。
良記事ですね。

ただ、「MDN Web Docs」は非常に情報量が多くて、どのように活用すればよいかわからない、という方もいらっしゃると思いますので、本記事ではまずは「MDN Web Docs」について簡単に整理した後、私のオススメの活用方法について紹介しようと思います。

まさにそんな感じです。
適宜リンクやまとめはあるんですか、コンテンツが多すぎてどっから手を付けるか迷います。

自分の学びたいことと、この記事をナビにして学習していこうと思います。

phpMyAdminでサイズの大きいデータをインポートする

客先からもらったMySQLのダンプファイルが大きすぎてインポートに失敗しました。

設定変更でインポートできるようになるようです。

phpMyAdminのインポートできる容量を大きくする

サービスプロバイダーを使ってる場合は設定変更する権限がなかったりします。 

今回は、ローカルサーバなのでさっくり設定変更しておきます。

XAMPPを使っているのでApacheのConfigボタンを押下してPHP(php.ini)を選択します。

post_max_size
upload_max_filesize
が40Mになっていました。
インポートファイルが42MBだったのでちょっと足らなかったです。
とりあえず128Mにしておきます。

設定を保存してApacheを再起動

再度ダンプファイルをインポートしましたがエラーとなりました。

DBを事前に作成にしとかないとダメのようです。
適当な名前でDBを作成してインポートします。

 

DBがインポートできました。

 

WordPressを静的HTMLサイトに部分的に組み込む方法（環境構築）

Webサイト全体をWordPressで作っても良いのですがHTMLと組み合わせたい場合があります。
静的なコンテンツ(HTML)と動的なコンテンツ(WordPress)の組み合わせです。

WordPressで書いた記事やブログなどをHTMLに組み込む感じです。

まずは環境構築から、XAMPPを使う前提です。

XAMPPでWordPressの環境設定

1. XAMPPとWordPressのインストール
下記の通りに設定すれば良いです。

XAMPPを使ってWordPressローカル環境を構築する全手順

ただし、WordPressのインストール先は変えます。
対象のWebサイトと同じフォルダにします。
例：
htdocs/testsite/index.html
htdocs/testsite/wordpress/

index.htmlから./wordpressでアクセスする前提です。

2. htmlでPHPを実行できるようにする
色んなサイトには".htaccess"を編集するとありますがXAMPPにはなさそうです。

XAMPP Control PanelでApacheのConfigボタンを押下してApache(httpd.conf)を選択します。

httpd.confの編集

テキストエディタが起動するのでhttpd.confの
<IfModule mime_module>
に以下の記述を追加してApacheを再起動します。
AddType application/x-httpd-php .php .html

確認方法

以下のようなサンプルをtestsiteの下に作成してブラウザでアクセスして

Hello HTML

Hello PHP
と表示すれば問題ありません。

<html>
<body>
<p>Hello HTML</p>

<?php
    print "Hello PHP";
?>

</body>
</html>

Responsive Viewer

レスポンシブデザインに対応するといくつもの解像度に対応する必要があります。

Google ChromeのDevToolsなどで解像度を変えられますが複数のサイズを確認するのは結構大変です。

それらを一度に確認することができるプラグインです。

Responsive Viewer

既存にあればそれを選択、なければサイズとタイプ（iPhone, iPad, Google Chromeなど）を入力して作ることもできます。

それらをまとめて確認できるので便利です。 

PerfectPixel

デザインカンプを元にWebサイトを実装するわけですが、ぴったり合わせるのはなかなか難しいです。 

PerfectPixelというプラグインがあります。

PerfectPixel by WellDoneCode (pixel perfect)

デザインカンプから画像として出力したファイルを読み込んでWebサイト上の上に重ね合わせることで、どれくらいズレているかはっきり分かります。

DevToolsで微調整すればリアルタイムで位置や大きさの調整が出来ます。

Webサイトを作成時に役立つGoogle Chrome拡張機能

Webサイト（フロントエンド）を作成していると、デザインカンプ通りに出来ているか色々確認したくなります。

それに役立つツールを検索してみました。
Google Chrome拡張機能として使うものです。

1. 画面上のオブジェクトの位置やサイズを知る

Designer Tools

以下のサイトで詳しい説明がされています。

「Designer Tools」の使い方：画像や任意の位置のサイズをピクセル単位で測定可能

2. オブジェクトの並びを知る

横方向や縦方向の並びを知るものです。

オブジェクト同士の位置関係を知るために画面上に線を引けます。定規ツールですね。

Grid Ruler

以下のサイトで詳しい説明がされています。

ブラウザ上でガイドを表示できる！ピクセル単位でのサイズ計測ができる！Chrome拡張機能「Grid Ruler」

3. フォント名やサイズを知る

WhatFont

Designer Toolsではフォントを含んだ箱のサイズしか分かりません。テキストのフォント名やサイズを知るためのツールです。

以下のサイトで詳しい説明がされています。

フォントサイズが分かる拡張機能「WhatFont」が便利だよ

4. 色の値を取得する

Webサイトで使っている色の値（カラーコード）を知るためのもです。

ColorZilla