https://shirakawa.weblike.jp/blog-page/2021/04/14 の続き。
練習場
https://oldcygwin.web.fc2.com/
ログインしてからftp
https://web.fc2.com/
$ head -n 1 FC2ホームページ\ -\ 無料ホームページスペース.html
<!DOCTYPE html>
(FC2が用意してくれたサンプルページをFirefoxでページ保存したもの。
\HTML5を使っている。そりゃそうか。でもFirefox-3(@2010)/SL-C3100からも見れてるねえ)
$ head -n 1 JavaScriptの練習.html
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
(HTML/CSS/JavaScriptの練習 をFirefoxでページ保存したもの。
\HTML4を使っている。Firefox-3/SL-C3100でも見たり編集できたりするわけだ)
index.html：
とりあえずbookmarkファイル(の一部)を、kterm/X/Cygwin/Win7からftpでputしようと思ったが、
コメントがないとわけが分からないのでコメントは付ける。最初はCSS/JavaScript無し。getした
FC2が用意してくれたサンプルindex.htmlからコメント用タグを探して追加する。タグを大文字か
ら小文字に直す。html宣言やheadやbodyも付ける。コメント用タグなんか無くて書けばそのまま
表示された。divで装飾する文字や文を区別したりid付けしたりする。index.htmlの編集は最初は
サクラエディタを使った。後からkterm/X/Cygwin/Win7上でviで編集した。
Win7$ ftp oldcygwin.web.fc2.com (これの前にweb.fc2.comにログインしてFTP接続ロック解除
\してpasswdを確認しておく)
ftp> get index.html (サンプルゲット)
\- – –
Win7$ vi indexe.html (サンプルを参考にbookmarkファイルをHP用に改造)
Win7$ nkf -w indexe.html > index.html
Win7$ ftp oldcygwin.web.fc2.com
ftp> put index.html
練習用のhtmlファイル(例:practice001.html)を追加する度にindex.htmlからリンクを貼ろう。
古いCygwinでファイルを編集しているため、EUC-JPでないと日本語入力ができない。Cannaを
使っているせいかもしれない。HTML5ではUTF-8を推奨しているが、EUC-JPでいく。libcanna
16.dllを昔Cygwin上でmake/installpkgしたが、lddで認識してくれないので、C:/Windos/System32/
にコピーした。Win10では問題なかった気がする。UTF-8が必要になったらnkfかiconvで変換し
よう。CygwinはWinXP時代から同じ物をずっと上書きinstallして使っている(最新は他のPCの
Win10)。Cygwinについての雑多な記録はいずれ(手作り)HPの方にまとめよう。
practice001.html～practice099.html：
HTTP/CSS/CGIの練習。FC2のサンプルindex.htmlを参考にしているが、でかくてviでちまちま
やるのがメンドクサくなってきた。emacsでやりたくなってきた。emacsのdiredは楽だし。
C3x00でemacsやる気はないけど。このWin7いろいろ(adbとかroot化ツールとかcygwinとか)
手間かかってるなぁ、BackUpとった(2021.05)。
emacs/Win7のファイラーモードだとちゃんとカーソルがディレクトリの所に来るなぁ(リター
ンでディレクトリが開ける)。emacs/Win10でローカルファイル見た時は左端に来てしまって、
開きたいディレクトリの所になかった。いちいちコマンド覧からC-fでディレクトリ名入力
して開かないといかんかった。やっぱdiredでサーバーにファイルをftp転送するのが早いか。
ファイル操作するからftpコマンドは要るけど。
ftp> mkdir practice001
257 “/practice001″ – Directory successfully created
ftp> ls
200 PORT command successful
150 Opening ASCII mode data connection for file list
drwxr-xr-x 3 oldcygwin 10014 4096 May 4 09:55 .
drwxr-xr-x 3 oldcygwin 10014 4096 May 4 09:55 ..
\-rw-r–r– 1 oldcygwin 10014 231 Apr 24 09:14 .htaccess
\-rw-r–r– 1 oldcygwin 10014 1021 May 3 09:43 index.html
drwxr-xr-x 2 oldcygwin 10014 4096 May 4 09:55 practice001
226 Transfer complete
UTF-8でdiredしたいが、古いemacs/cygwinのせいか文字化けする。いちいち変換するのはメン
ドクサイから、当面EUC-JPでdiredしよう。必要になったらUTF-8に変換しよう。
emacsからC-x,C-f
Find file: /oldcygwin@oldcygwin.web.fc2.com:/ (ftpの場合)
Find file: /ftp:oldcygwin@oldcygwin.web.fc2.com:/ (ftp-passiv?の場合)
Find file: /ssh:oldcygwin@oldcygwin.web.fc2.com:/ (sftpの場合。まだ試してない)
最初は、home直下しか開いてはいけない気がする、ftpでそうするように。失敗した気がする。
ftpの二重loginもダメなようだ。やっぱdiredは楽チン♪がしかし、Win7だといつからかは分
からないが、emacsがたまに固まることを思い出した。Win10では固まったことはない。
便利なタグとか。
ページの特定の項目へ飛ばすtagと属性、練習しよう。これは使いそう。あと一番上に戻るやつ。
ttps://www.codegrid.net/articles/template-engine-1/#toc-3
\<h2 id=”toc-3”>テンプレートエンジンなしで書いてみると</h2>
Bootstrap(CSSフレームワーク)の練習。
HTML/CSS/JavaScriptのフレームワーク。AngularやReactと何が違うのか。
bootstrap “他のフレームワーク”、でググった：
Angular の Bootstrap | DelftStack
https://www.delftstack.com/ja/howto/angular/bootstrap-in-angular/
React Bootstrap ってなんて素敵なんだ
https://qiita.com/ynunokawa/items/7c60c0db0c000d265554
【Laravel8】Bootstrap5をインストールして使ってみる
https://karaagelovers.com/how-to-install-bootstrap-in-laravel8/
RailsにBootstrapを導入する方法
https://qiita.com/sagawashu/items/6066ec3b758147687bd1
(CSSを簡単に使えてレスポンシブDsnなのがうま味ということか)
bootstrap 使い方、でググった：
Bootstrap使い方メモ１（基本＋CSS）
https://qiita.com/opengl-8080/items/2764b6db143b1a4411f6
https://getbootstrap.com/docs/5.2/getting-started/introduction/
https://udemy.benesse.co.jp/development/system/boo…
https://getbootstrap.jp/docs/4.2/getting-started/contents/
https://getbootstrap.jp/docs/5.0/examples/
(要するに既存のタグのclass属性にkeywordを入れるだけで、いろいろ装飾できると)
bootstrap 読み込み方、でググった：
https://getbootstrap.jp/docs/5.0/getting-started/introduction/
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
style-div-border、<button type=”button” class=”btn btn-*”>
<table class=”table”>に table-bordered table-striped
(動かないのがあるが後で調べよう)
<form>に form-group、<inputに form-control form-inline form-horizontal
(動かないのがあるが後で調べよう)
(form-inlineが効いてないから、インスペクター>ボックスモデルのパディングをいじったら、
style=”padding-left: 10px;padding-right: 10px;” が追加された。これでもいいか)
(無効になっていたので) –bs-body-text-align、でググった：
https://qiita.com/Rock22/items/e4e89f15c29e1415977d
bootstrap navbar/table/text、でググった：
https://getbootstrap.jp/docs/5.0/components/navbar/
https://getbootstrap.jp/docs/5.0/content/tables/
https://getbootstrap.jp/docs/5.0/utilities/text/
https://zenn.dev/sivaquen/articles/f1544ed979eab8
JavaScript入門・完全版コース／プログラミング初心者向け、コスパ最強講座
https://www.youtube.com/watch?v=ig3GosWuKF0
(bootstrapの使い方がスゲー分かり易かった 2023.04)
HTMLコーダーにとっての2020年 アンケート結果から分析するイマドキのウェブ制作
https://ics.media/entry/200710/
practice100.html～practice199.html：
JavaScriptの練習(ライブラリ使わない編)。オブジェクト指向らしい。CやC++の様に基本文法
の練習をしてみるか。とりあえず手元にある参考書籍のサンプルでも試してみるか。
JavaScriptハンドブック 1998.10
(古すぎ。使えるのか?)
javascript builtin object、でググった。console.log()、document.write()、alert()。Cのprintf()。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects
グローバルスコープ内のその他のオブジェクトは、ユーザースクリプトによって作られるか、あるいはホストアプリによって提供されます。ブラウザー上で提供されている利用可能なオブジェクトについては、API リファレンス (en-US) で文書化されています。(お～、そうなるか、ブラウザAPIね)
https://developer.mozilla.org/en-US/docs/Web/API
https://developer.mozilla.org/ja/docs/Web/API/Console_API
オブジェクト型とは、忘れたのでググった。
https://qiita.com/makotoo2/items/9566cebf205ef8b42505
https://tsudoi.org/weblog/4767/
(*.jsのサンプルが上の方に来るあたりに時代を感じる?)
型は別として(緩いしオブジェクト指向だし)、基本文法はCに近く、ブラウザAPIを持ってい
てタグ操作できる、ビルトインオブジェクトがある、と。
JSONオブジェクトはJavaScriptの標準組み込みオブジェクトだからブラウザAPIに書いてないのだろう。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects
ライブラリ無しのajax、書籍を参考にやってみよう。
TypeScriptも使いたいし、node(+npm)が必要になるので、続きはこっちで練習する。
https://seesaawiki.jp/lifewithslackarmzaurus_14_2/d/HTML/CSS/JavaScript%a4%ce%ce%fd%bd%ac%20%bc%c2%c1%a9%20%bb%a8%c2%bf%a4%ca%b5%ad%cf%bf
practice200.html～practice299.html：
JavaScriptの練習(ライブラリ使う編)。ライブラリはこっちで練習する。
https://seesaawiki.jp/lifewithslackarmzaurus14_1/d/HTML/CSS/JavaScript%a4%ce%ce%fd%bd%ac%20%bc%c2%c1%a9%20%bb%a8%c2%bf%a4%ca%b5%ad%cf%bf
practice300.html～practice399.html：
JavaScriptの練習(フレームワーク編)。フレームワークはこっちで練習する。
https://seesaawiki.jp/lifewithslackarmzaurus_14_2/d/HTML/CSS/JavaScript%a4%ce%ce%fd%bd%ac%20%bc%c2%c1%a9%20%bb%a8%c2%bf%a4%ca%b5%ad%cf%bf%a3%b3
practice400.html～practice499.html：
LowCode/NoCodeの練習やその改造や連携。こっちで練習する。
https://seesaawiki.jp/lifewithslackarmzaurus_15_0/d/HTML/CSS/JavaScript%a4%ce%ce%fd%bd%ac%20%bc%c2%c1%a9%20%bb%a8%c2%bf%a4%ca%b5%ad%cf%bf%a3%b4
参考URL：
htmlとは <a>、でググった：
https://html-coding.co.jp/annex/dictionary/html/ (HTMLタグ辞典,CSS辞典)
http://www.htmq.com/html5/indexa.shtml (<article>,<aside>はHTML5。上のタグ辞典には無い)
http://www.htmq.com/css3/indexa.shtml (CSS3 Flexboxとか)
http://www.htmq.com/
https://developer.mozilla.org/ja/docs/Web/HTML/El… (2023.12)
HTML5にはこのようなレイアウトを区切るタグとして<header>・<main>・<aside>・<footer>というタグが用意されています。 これらのタグを<body>～</body>の中に記述して、レイアウトを構成していきます。
\
(よく使うのは上までで、以降はたまに思い出して見る。忘れたので見る。復習)(2022.10)
https://developer.mozilla.org/ja/docs/Web/HTML/Element (MDN公式、deprecatedが分かる)
その他のHTMLタグ辞典
https://www.tohoho-web.com/css/index.htm
CSS辞典
スタイルシートを利用する際には、拡張子が.css の外部スタイルシートファイルを<link>で読み込む方法と、<head>内に<style>を用いてスタイルシートを記述する方法と、スタイルをstyle属性の値として各タグに直接指定する方法があります。
https://udemy.benesse.co.jp/design/web-design/html
では、classとは何なのでしょうか。これは、divに付ける名前だと考えてください。
CSSを記述で注意するポイントは、クラス名の前に「.(ドット)」が付くことです。
https://ja.wikipedia.org/wiki/Sass
https://udemy.benesse.co.jp/design/web-design/sass.html
「Sass」とは、CSSを拡張して扱いやすくしたスタイルシートのことです。
https://www.internetacademy.jp/it/programming/programming-basic/what-is-html5.html#chapter7
HTML5とは？Webサイトを作る上での基本となる言語をわかりやすく解説！
http://www.htmq.com/api/
HTML5のAPI、および、関連仕様
http://www.htmq.com/canvas/001.shtml
Canvasとは、HTML5から新しく追加される図形を描くための技術仕様で、 HTMLの<canvas>要素とJavaScriptを組み合わせて図形を描画します。
https://creatorquest.jp/lessons/html/html-attribute/
属性には、その要素固有の属性と、どの要素にでも指定できるグローバル属性の2種類があります。
https://it-biz.online/web-design/id-class/
https://jill-tone.com/htmlcss_id_class/
【必修知識】id と class の違いと使い分け方の基本
https://www.kagoya.jp/howto/it-glossary/web/responsive/
PCなのかスマホなのか、Webサイトを利用する機器によってディスプレイの大きさが変わるため、どんな画面サイズでもわかりやすい画面表示が必要です。このように効率的に「切り替え」をする考え方や具体時な手法を、レスポンシブWebデザインといいます。
2021年版！おすすめのCSSフレームワーク総まとめ。特徴や比較も！
https://webdesign-trends.net/entry/12965
CSSフレームワークとは、ボタンやフォーム、レイアウトなどWebページの実装に必要なコンポーネントや機能が詰まったライブラリのようなものです。
短期間でWebサイトを実装したい場合や、デザイナー不在のチームがWebサービスを作る場合など、CSSフレームワークを利用することによってデザイン実装の手間を減らすことができます。
デプロイ：ファイルをWebサーバーやアプリサーバーにアップして利用できる状態にする一連の作業
CI/CD：ビルド、テスト、デプロイを自動的に実行してくれる手法や機能
https://blog.dcs.co.jp/cicd/20210826-app-architecture.html
ＨＴＭＬの「\&\g\t\;」・「\&\l\t\;」
http://www.asahi-net.or.jp/~hi5k-stu/compt/gt_lt.htm
ＨＴＭＬでは「<」、「>」などはタグの記号なので、文字として表示する場合はそのまま使えない。「<」は「\&\l\t\;」、「>」は「\&\g\t\;」としなければならない。「greater than」「less than」の略。\を取ると表示が「>」・「<」となる。
HTMLで空白を入れたい時に使う謎の文字＆nbsp; とは？
https://www.asoblock.net/contents/nbsp
HTMLの基本ルールとして、タグ間の文字列中に記述された半角スペースは、いくつ挿入しても、半角スペース1つ分でしか表示されません。
ビジュアルエディタを使って本文中に半角スペースを複数挿入した場合には、実際にはこの のように半角スペースとして機能する特殊な文字に置換されているのです。
参考書籍：
Software Design 2020年9月号 Vue.js講座 JavaScriptフレームワークの潮流がわかる
https://gihyo.jp/magazine/SD/archive/2016/201610
フロントエンドエンジニア養成読本 2014.08
https://gihyo.jp/book/2014/978-4-7741-6578-3
DOM要素はwindow.documentからHTMLのタグの階層に沿ったDOMツリーとしてアクセスできる。
window.は省略可。DOM(DocumentObjectModel)。JavaScriptはイベントドリブン。
Software Design 2008年3月号 古く，そして新しい言語の現在（いま）JavaScript最前線 (Ajaxは既に登場した)
https://gihyo.jp/magazine/SD/archive/2008/200803
JavaScriptハンドブック 1998.10
https://www.amazon.co.jp/JavaScript-Handbook-4th-%…
JavaScriptの大半のビルトインオブジェクトは、windowオブジェクトをトップにして階層構造
(ObjectModel)の一部に組み込まれています。BuiltinObject==GlobalObject。Node.jpの/はglobal。
(タグが大文字だったりするが、辞典で確認すればまあまあ使えそうだ)
(.htaccessの設定方法が書いてあるが今時はdefで*.jsのDLは有効のはず。CGIの有効化の参考にはなった)
htaccess addtype application、でググった：
https://qiita.com/shotets/items/cf0783530a1f2809c4d5
https://www.webdesignleaves.com/pr/html/htaccess.html