ページビューの合計

2023年8月24日木曜日

HTML の基本

ウェブ入門の続き:HTMLの基本

1.4 HTMLの基本 

HTMLとは

HTMLとは HyperText Markup Language、ハイパーテキスト・マークアップ・ランゲージです。

そしてどうでもいいかも知れませんがHTMLは開発言語ではなくマークアップ言語です。

【悲報】HTML/CSSはプログラミング言語ではなかった!

別に悲報ではないと思いますがw

HTMLはコンテンツ(テキスト)に対してタグを使って文章を構造化し、意味づけを行っていきます。

例:

100だけだとなにか分かりませんが

<price>100</price>

とすれば値段だという意味づけができます。そしてタグを入れ子にすることで構造化していくこともできます。

そしてCSSはコンテンツに対して装飾(色、強調、レイアウト)などを追加します。
 

ブラウザ

HTMLはタグで囲まれただけのただのテキストです。 それを表示するには所謂ブラウザが必要になります。
ブラウザにはレンダリングエンジンというものがあってそれがサーバから受け取ったHTMLを解釈して普段私たちが目にする形にレンダリングして表示します。

ブラウザの種類とレンダリングエンジン

 

サーバサイドJavaScriptとは?

脱線ついでにJavaScriptもブラウザ上のJavaScriptエンジンで実行されて動作します。

ブラウザとJavaScriptエンジンの関係とJavaScriptエンジンの構造

上記で記載がありますが、V8 Engineがとてもポピュラーです。

JavaScriptエンジンはブラウザ内に実装されています。なのでブラウザはJavaScriptの実行環境ということもできます。

最近良く聞く「サーバサイドJavaScript」ですが、誰が言い出したのか知りませんが誤解を招く表現ですね。サーバサイドで動作するJavaScript?

別にクライアント(PC)上でも動作しますよね?

もしくはクライアント(ブラウザ)、サーバ(PC)という意味で使っているのかもしれませんが分かりずらいと思います。

正確にはGoogle Chrome上に実装されていたJavaScriptエンジンである"V8 Engine"をOS上でも動くように移植して、その他のモジュールも梱包したJavaScriptの実行環境であり、その1つがNode.jsです。

なのでOSのコマンドライン上で

$ node test.js

とすることでJavaScriptのソースコードを実行することができます。

下記のサイトに分かりやすい図があったので載せておきます。
あくまでOS上で動作するJavaScriptの実行環境(runtime)であるというのがNode.jsの本質です。

Take a tour of Node.js

横道に逸れたので元に戻ります。

HTML は、コンテンツの構造を定義するマークアップ言語です。"タグ"で囲むことで、単語や画像をどこかにハイパーリンクさせたり、単語を斜体にしたり、フォントを大きくしたり小さくしたりすることができます。

HTML 要素の中身 

要素は主に以下のようなもので構成されています。

  1. 開始タグ (opening tag): これは、要素の名前(この場合は p)を山括弧で囲んだものです。どこから要素が始まっているのか、どこから効果が始まるのかを表します。 — 今回の場合どこから段落が始まるかを表しています。
  2. 終了タグ (closing tag): これは、要素名の前にスラッシュが入っていることを除いて開始タグと同じです。どこで要素が終わるのかを表しています。 — この場合は、段落が終わる場所を表します。終了タグの書き忘れは、初心者のよくある間違いで、おかしな結果になることがあります。
  3. コンテンツ (content): 要素の内容です。今回の場合はただのテキストです。
  4. 要素 (element): 開始タグ、終了タグ、コンテンツで要素を構成します。

属性には、実際のコンテンツには表示させたくない、要素に関する追加情報が含まれています。ここでは、 class が属性の名前で、 editor-note が属性のです。

ああ、属性はあくまで属性であってコンテンツそのものとは異なるということですね。単なる追加情報であってコンテンツとしては表示しないということですね。

上記ではclassを例に挙げていますが、CSSで特定のclassに対してスタイルを適用したりします。

値を設定する属性の形式は以下の通りです。

  1.  要素名(すでにいくつか属性がある場合はひとつ前の属性)との間の空白
  2.  属性名とそれに続く等号
  3.  引用符で囲まれた属性の値

メモ: ASCII のホワイトスペース(または " ' ` = < > のいずれかの文字)を含まない単純な属性値は引用符を省略することができますが、コードを一貫性のあるものにし、理解を容易にするため、すべての属性値を引用符で囲むことをお勧めします。
属性値は<p class="editor-note">という感じで設定します。

上記の条件(ASCIIのホワイトスペース、 " ' ` = < > のいずれかの文字を含まない)を満たす場合は引用符を省略できるようですが、常に引用符" "で囲んだ方が良さそうです。

 <p class=editor-note> OK(引用符省略可能)

 <p class=editor=note> NG(引用符省略不可能)

 

要素の入れ子

要素をネスト(入れ子)にすることができますが、当然正しい順に記載する必要があります。

<p>My cat is <strong>very grumpy.</p></strong>: NG

空要素

コンテンツを持たない要素だそうです。

そんなものあったかと思ったら<img>でした。

確かにコンテンツとして何らかのテキストを指定する必要はありません。属性"src"で指定する画像ファイルがもっとも重要なものになります。

<img src="images/firefox-icon.png" alt="My test image" />


HTML 文書の構造

Visual Stdio CodeでHTML形式のソースコードで、「!」を入力してエンターキーを押下すると以下のようなコードが自動的に挿入されます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

つまりこれらはHTML形式のファイルとして必要最小限な要素ということですね。

(1) <!DOCTYPE html>
文書型宣言
1行目に記載します。


【HTML初心者入門者向け】doctype宣言とは?

  1. この文書がHTMLであること
  2. HTMLのバージョンを明記すること
  3. このDTD(Document Type Definition/文章の構成要素バージョン)がなにか明記すること

だそうです。

HTMLの過去・現在・未来

によると最初のHTML version1.0はオフィシャルにはないようですが、1993年にInternet Draftとして提出されたものをそう呼ぶようです。
HTMLはインターネットの黎明期から版数を重ねてきました。
そのためバージョンを明記する必要があるんですね。


ただ現在のHTML5では「<!DOCTYPE html>」とだけ記載すれば良いようです。
単にこの文章がHTMLであることを示すだけですね。

(2) <html></html>

この要素は、このページのすべてのコンテンツを囲み、ルート要素と呼ばれることもあります。ここでは文書の主要な言語を設定する lang 属性も指定します。

実質ここからがHTMLの中身です。

lang属性も設定できます、日本語であれば"ja"ですね。

(3) <head></head>

この要素は、ページの閲覧者に向けて表示するためのコンテンツではない、 HTML ページに含めたいものをすべて収めるための入れ物です。検索エンジン向けの キーワード やページのディスクリプション(説明書き)、ページの見た目を変更するための CSS、文字コードの宣言などを含みます。
若干記述が冗長ですが、閲覧者向けのコンテンツではないとうことのようです。

(3-1) <meta charset="utf-8">

この要素は、大部分の書き言葉の文字のほとんどを含む UTF-8 を文書で使用するように設定しています。基本的には、文書はどんなテキストコンテンツでも扱えるようになります。これを設定しない理由はありませんし、後でいくつかの問題を回避するのに役立ちます。

もう今の時代に文字コードとか文字化けとかもう面倒なことを考えたくないですね。どんなものでもUTF-8一択で良いのではないのでしょうか。

(3-2) <meta name="viewport" content="width=device-width, initial-scale=1.0">

このビューポート属性は、このページがある幅のビューポートで描画されることを保証し、モバイルブラウザーがビューポートより広い幅でページを描画した上で縮小して表示するのを防止します。

うーん、なんかビューポートの説明がピンときませんね。 

viewportとは?HTMLのmeta要素やinitial-scale、非推奨の設定を解説

今まで「viewport」を全く意識したことが無かったのですが、レスポンシブデザインに必須の要素だそうです。

viewportとは、Webページを表示するブラウザの表示領域で、デバイスの画面サイズや解像度に合わせて、Webページを最適に表示する機能があります。

スマホやタブレット、パソコンなど、デバイスに合わせて表示領域を設定する機能があるため、パソコン向けのWebサイトを、スマホやタブレットでも快適に表示させるための必須要素です。

Googleはレスポンシブデザインを推奨しており、対応するためにはviewportが欠かせません。
ふむふむ
レスポンシブデザインという言葉は浸透してた感がありますが、Googleが推奨してたんですね。 

ぐぐってみると

Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法

これが元ネタみたいです。2012年の6月

 

 


2023年8月23日水曜日

ファイルの扱い

ウェブ入門の続き:ファイルの扱い

1.3ファイルの扱い

(a) 大文字や空白を使わない

どんな環境でも間違いなくファイル名を認識できるように大文字、空白は避けるべきですね。

ハイフン: Googleの検索エンジンはハイフンを単語の区切りとして扱う。
アンダースコア: Googleの検索エンジンはアンダースコアを単語の区切りとして扱わない。

my-file.html OK
my_file.html NG

フォルダ名やファイル名を小文字で書き、スペースを入れず、単語をハイフンで区切る習慣をつけるとよいでしょう。
ハイフンとアンダースコアの違いはピンと来なかったので調べました。

つまり、SEO(Search Engine Optimization)も考慮して、安全かつ自由にURLを作るためには可能な限り以下の文字だけを使うようにすると良いと思います。

  1. 小文字アルファベット : a〜z
  2. 数字 : 0〜9
  3. ダッシュ(ハイフン) : 『–』
だそうです、なるほど。


(b) ウェブサイトはどのような構成にするべきか

このタイトルは少し分かりずらいですね。

Webサイトを構成する際のファイル名やフォルダ名そしてフォルダ階層などの話題です。主な対象は以下のものになります。

  • HTMLファイル
  • 画像
  • スタイルシート
  • スクリプトファイル
  1. index.html: サイトにアクセスしたときに最初に表示するページです。サイトのフォルダの直下に置くことが多いです。
  2. imagesフォルダー: サイトで使う全ての画像を置いておくフォルダです。
  3. stylesフォルダー: コンテンツの装飾をするCSSを置いておくフォルダです。
  4. scriptsフォルダー: JavaScriptのソースコードを置いておくフォルダです。


(c) ファイルパス

同じ階層
下階層
上階層

ファイルパスの指定方法は相対パスと絶対パスがありますが、相対パスの方が良いでしょう。

(d) 他にするべきこと

(e) ファイルエンコード(文字エンコーディング)

近年ではUnicodeが当たり前になってきましたが以前は、SJIS、EUCなどが混在していてExcelやテキストエディタで開くと文字化けすることが良くありました。

今後はもうUnicode一択で良いでしょう。

 



2023年8月21日月曜日

ウェブサイトをどんな外見にするか

 ウェブ入門の続き:ウェブサイトをどんな外見にするか

 1.2 ウェブサイトをどんな外見にするか

まずはじめに、次の質問に答える必要があります。

  1. 何についてのウェブサイトですか? 犬、ニューヨーク、それともパックマン?
  2. 主題についてどんな情報を表現しようとしていますか? タイトルといくつかの段落、それからページに表示させたい画像を考えます。
  3. ウェブサイトをどんな外見にしますか? 簡単で大まかな言葉で言うと?背景色は?適切なフォントはフォーマル?漫画?太字で派手?繊細?

大げさに言えばグランドデザインですね。

 複雑なプロジェクトでは、色、フォント、ページのアイテム間の余白、適切な文体など、詳細なガイドラインが必要です。これは、デザインガイド、デザインシステム、ブランドブックなどと呼ばれます。一例として、 Firefox Photon Design Systemがあります。
そうですね。担当が勝手に実装するとページ単位での見た目とかが異なることになります。

デザインガイド、デザインシステム、ブランドブックでググってみました。

デザインシステムとは?|国内外の参考になる事例10選と共に解説

デザインシステムとは?内容や作り方、運用方法を解説します

2022年版 おすすめのデザインシステム5選

「デザインシステム」とは「一貫性を持ったデザインにするためにデザインのルールを定めたもの」です。

だそうです。

なるほど、プログラミングでも命名規則やコーディング規則を作成して可読性やメンテナンス性を高める工夫をします。
これらは(良くはないですが)守らなくても動作するプログラムを実装することができます。
ただデザインシステムを守らないと1つのWebサイトとしては一貫性が無くユーザの操作に大きな影響を与えることになるででしょう。
 

 (a)デザインをスケッチする

アナログで紙に描いても良いでしょうが、ワイヤーフレームツールを使ってまずはざっと描いてみてブラッシュアップしていくのだろうと思います。

 以前はAdobe XDのフリー版があったのですが、今は無くなりました。

【2023年版】ワイヤーフレームツールおすすめ11選を徹底比較!(無料あり)

これはというツールがないですね。

敢えて選ぶならFigmaかCacooくらいですかね。

(b) 資産を選ぶ

(c) テキスト

(d) テーマカラー

(e) 画像

Google画像検索というのがあるんですね。

私は普通にGoogleで検索して「画像」タブを選択して適当なフリー画像を探していました。

言うまでもなく多くの画像には著作権があるので勝手に使うことは出来ません。

著作権フリーまたは「xxxxxの画像を使っています。」と記載するだけでも良いものもあるのでいずれ調べてまとめておきたいですね。

(f) フォント

特に日本語については、ゴシック、明朝だけでなくとてもたくさんのフォント(書体)があります。

Googleフォントというのがあります。

いわゆるWebフォントというものです。

これらのGoogleフォントファミリーの名前はNotoですが、その名前には面白い由来があります。

豆腐のない世界がNoto Sansの夢?

Fonts for all languages

"Noto" means "I write, I mark, I note" in Latin. The name is also short for "no tofu", as the project aims to eliminate 'tofu': blank rectangles shown when no font is available for your text.

Google翻訳で翻訳すると

「Noto」とはラテン語で「書く、印を付ける、メモする」を意味します。 このプロジェクトは、テキストに使用できるフォントがない場合に表示される空白の四角形である「豆腐」を排除することを目的としているため、この名前は「no tofu」の略でもあります。

  1. ラテン語の「書く、印を付ける、メモする」
  2. No Tofu(対応するフォントがない場合に表示される四角形のこと)

のダブルミーニングということです。

フォントが見つかったら、そのフォントを使用する方法は大きく分けて 2 つあります。

  1. Google のサーバーからフォントを読み込むために、コードに参照を追加する。
  2. 自分のシステムにフォントファイルをダウンロードし、フォントをホスティングし、ウェブサイトのコードでホスティングしたコピーを使用する。

 Googleのサーバを参照するか、ダウンロードするかの二択ということです。

メモ: Google フォントでホスティングされているフォントを提供すると、フォントサービスがユーザーの IP アドレスを公開するため、EU のデータプライバシー規則である GDPR に抵触する可能性があります。これが問題になりそうな場合は、2 つ目の選択肢を選んでください。

 以上のような注意書きがありました。フォントサービスがユーザのIPアドレスを公開するというのは、ちょっといただけないですね。

 Googleフォントは「Download family」というボタンがあるので自由にダウンロードできるようです。

フォントのインストールは単純に「C:\Windows\Fonts」 にダウンロードしたフォントをコピーするだけで良いみたいです。

Noto Sans Japanese


 
Noto Serif Japanese

日本語OS(Windows11)標準の日本語フォント

またこれは仕事をしていたときの実際の経験です。

フィリピンで働いているので英語版のWindowsを使っています。明朝体やゴシックはインストールされていないので実装担当がWebフォントを使っていたのですが、日本語版のWindowsを使う前提なのでWebフォントを使わないで下さいと客先から指示がありました。

MSからダウンロードした明朝体、ゴシックフォントをインストールしてWebフォントを使わないようにしました。

 その時に、では何が標準の日本語フォントとして使えるんだろうと思ってググりました。

 Windowsに標準インストールされている日本語フォント

  1. BIZ UD ゴシック・明朝体
  2. UDデジタル教科書体
  3. Yu Gothic UI
  4. 游ゴシック・游明朝
  5. Meiryo UI
  6. メイリオ
  7. MSゴシック・MS明朝
  8. MSPゴシック・MSP明朝
  9. MS UI Gothic

以外とありますね。 

 

SansとSerifの違い 

フォントファミリーでちょいちょい出てくるのです正確に知らないので調べました。

フォントを語る上で知っておきたい基礎知識10

serif
sans-serif

"sans-"はフランス語で「無い」という意味だそうです。
なので"serif"があるかないかという区別ですね。
その"serif"は、字体の曲がり角にある飾り(うろこ)のことを指すそうです。
日本語だと"serif"は「山」と表現するようです。

なので

  1. serif(明朝):セリフ(山)があり、線の太さが一定ではないもの
  2. sans-serif(ゴシック):セリフ(山)がなく、線の太さが一定であるもの

とうのが大まかの区別になります。  


セーフウェブフォント

また、Arial、Times New Roman、Courier New などのセーフウェブフォントを使用することもできます。
と最後にさらっと書いてあります。

セーフウェブフォントって?
ぐぐってみましたが表記にブレがあるようです。
Web Safe font
Safe Web font

CSS Web セーフ フォント 

Web セーフ フォントとは何ですか?
Web セーフ フォントは、すべてのブラウザとデバイスに共通してインストールされるフォントです。
確かに以下はどのOSでも使えそうなフォントですね。

  • Arial
  • Times New Roman
  • Courier New

あくまでデバイス(OS)にインストールされているのが前提なのでGoogleフォントのようなWebフォントはセーフウェブフォントにはならないようです。

【2023】Webセーフできれいに表示されるフォント30選  

 

Webフォントのメリット・デメリット

恥ずかしながら上記のように仕事で指摘されるまでWebフォントなんてあると知りませんでした。

WEBフォントって何?メリット・デメリットとオススメサービスをご紹介!【2020年】

メリット

  1. デバイスを気にせずにフォントデザインが選べる
  2. SEO対策を強化できる
  3. レスポンシブデザインとも相性が良い


デメリット

  1. 利用料が必要になることがある
  2. 表示速度が遅くなることがある
  3. 利用規約によっては商用利用できないことがある

Webフォントの前にはフォントはデバイス(OS)にインストールされているものでした。

なのでデバイスによっては想定しているフォントがインストールされていなくて異なる見た目になったり最悪は□(豆腐)になっていたということですね。

Webフォントにすると、そういったことは解消されて想定した通りの見た目をどのデバイスでも再現できるということでしょう。

その反面、費用や商用利用、速度の問題があるということですね。

費用や商用利用についてはGoogle フォントを使えば良いでしょう。


 

速度については、不要なフォントを読み込まない、サブセット化するということで速度向上ができるようです。

【Webフォント高速化】使わない文字を除く!サブセット化の方法

アルファベットに比べて日本語は1文字のデータ量も大きいし文字数も多い。

何も考えずに使うと表示速度が遅くなる(読み込みに時間がかかる)ということが起きます。

そのため最近まで日本語のWebフォントはあまり普及してなかったようですが、今後は普及していくと思います。

 


2023年8月18日金曜日

ウェブ入門

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

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

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

ウェブ開発を学ぶ

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


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

読み始める場所
によると

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

の4段階あるそうです。

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

1. ウェブ入門

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

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

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

(b) テキストエディター
下手すると宗教戦争wになるので深く突っ込むのは止めます。
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) バージョン管理システム
チームで開発するときはもちろん自分1人であってもソースコードの変更履歴の管理や特定の版から派生して開発をしたり、その結果をマージしたりとなくてはならないツールですね。
ツールとしてはGitが事実状の標準と言ってよいでしょう。2014年出版と古いですがPro Gitという使い方を説明した書籍が無料で公開されています。

Gitに基づいたソースコードホスティングサービスがあります。有名なのは以下の3つですね。
サービス上でソースコードをリポジトリという単位で管理できます。

  1. GitHub
  2. GitLab
  3. Bitbucket
GitHubは最も有名なホスティングサービスでしたが2018年にマイクロソフトに買収されました。
当時はGitHubの優位が崩れてマイクロソフトによる強い支配wが始まるかと危惧しましたが、幸いそうはなりませんでした。
無料版でもプライベートリポジトリが作成できるようになりましたし、コラボレーターの制限もなくなりました。
オープンソースは元より企業での開発においても十分に使えるようになったと思います。 

(f) FTP プログラム
ローカルの開発環境で開発したものは、テスト環境や本番環境にコピー(デプロイ)する必要があります。
開発したファイル一式をFTP(File Transfer Protocol)というプロトコルに対応したアプリケーションでサーバにアップロードします。
この目的では、 FTP の代わりに Git が用いられつつあります
とありますが、Gitにソースコードをコミットしたら自動的にサーバにデプロイするように環境を構築するというのが正確でしょうか。

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

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

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

Webpackは複数になっているJavaScriptをまとめて1つにするいわゆるモジュールバンドラーのことですね。
Grunt、Gulpはタスクランナーという分類だそうです。
何が違うんだろとググってみました。

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

モジュールバンドラ
モジュールをひとまとめに(bundle)するツール。
=JavaScriptの依存関係を解決して、ひとつのファイルにまとめてくれるツール
 
タスクランナー
フロントエンドの仕事で面倒なタスクを自動的にやってくれる便利なツール 

うん、分からんw

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

Webpack のようなモジュールバンドラーの主たる目的
  1. それぞれのモジュールの依存関係を解決すること。
  2. それらの複数モジュールを1つファイルとしてまとめる(バンドル)すること。

Gulp や Grunt といったタスクランナーの主たる目的
  1. タスクを自動化すること
  2. Web 製作には様々な細かいタスクがありますが、その中にモジュールバンドルがあります
  3. 他のタスクとしては、ファイルのコピーや結合、JavaScriptやCSSファイルなどの構文チェック、 正しく機能が動作しているかという テストなど、様々なタスクを含めて複合的に実行することができます。
ああ、なるほどタスクランナーが管理するタスクの一つとしてモジュールバンドルがあり、そこでモジュールバンドラーを使うんですね。
 
(h) ライブラリーやフレームワークなど
ライブラリーは、既存の JavaScript や CSS のファイルであり、コードで使用するために、すぐに使える機能を提供しています。フレームワークは、この考えをさらに進めて、ウェブアプリケーションを書くためのカスタム構文を持つ完全なシステムを提供する傾向があります。
私は以下のように漠然と認識していました。
ライブラリ:共通的な機能をまとめたもの。 使える機能が提供されているのでプログラマが実装したい要件に合わせて利用するもの。

フレームワーク:ライブラリをさらに進めて特定の用途(Webアプリケーション、デスクトップアプリ、組み込み系アプリ)の開発のための枠組みを提供するもの。
 
ググってみると決定的な違いは「制御の反転」 にあるようです。
 
ライブラリ
ライブラリを呼び出すのはユーザのコードです。
関数の中で共通機能を呼び出して自分の実装したい機能を実現していきます。
 
フレームワーク
ユーザのコードはフレームワークから呼び出されます。
フレームワークによって作法が違いますが、作法や記法に従って特定のフォルダの下にファイルを追加して、ファイル内にクラスや関数を実装していきます。
そしてその関数を呼び出すのはフレームワーク側の処理です。
 
(i) 他にも便利なツールがたくさんあります!
そうですね。私もブログを書きながら思い出したり、見つけたりした場合は記載しておこうと思います。

 
 

2023年8月15日火曜日

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がインポートできました。
 

Laravel再学習

フロントエンド系の方に興味が行っていましたがまたバックエンド系に戻ってきました。 Laravelです。 かなり忘れてます、自分のブログを見ながらもう一度です。 今回はMVCパターン、そして Eloquentを使えるようになるのが目的です。 まずはプロジェクト作成から 1. Com...