今さら聞けないHTML　2022年03月03日

仮想キーボード作ってみる【Vanilla JS】

## はじめに

HTML/CSS/JavaScriptで10個(くらい)何かを作ってみるチャレンジの一環として、
**仮想キーボード**を作っていきます。

### 目的

何か作ってみるチャレンジの目的は、
**HTML/CSS/Vanilla JSを使ってとりあえずなにか作ること、手を動かすこと**です。

これでは曖昧すぎるので、もう少し深掘ります。

**現状**

* HTML/CSS/JavaScriptについて、コードを見ればなんとなく理解出来る。
* チュートリアルと一緒に進めれば何かは作れる。
* 0から何か作ろうと思うと厳しい。
* Python(業務効率化などで使用)の場合はある程度出来る。

なぜ厳しいのか？を考えた時に、
Pythonとの違いは**実際に手を動かしているかどうか**だなと思いました。

プログラミングにおいて手を動かすに勝る学習方法はないと思います。
実感としてもそうですし、そう言っているエンジニアの方も多く感じます。

また、質を高めるためにも、まずは絶対的な量が必要とよく言います。

というわけで、色々作ってみることにしました。

Tencent Cloud のPlayer SDK (Superplayer for Web)を使ったデモ

Player SDKとは
——————
PlayerSDKはTencent Cloud Video on Demand (VOD)の動画再生で使用されるSDKです。
APIから簡単に独自のWebアプリケーション等に統合することが可能であり、様々な機能を有しています。

Superplayer for Webについて(公式)
——————

### 1. 主な機能
– ビデオの再生
– ライブ配信機能

### 2. サポートされているフォーマットとプラットフォーム
対応ブラウザ及びフォーマットは[公式](https://intl.cloud.tencent.com/jp/document/product/266/33977#.E6.AD.A5.E9.AA.A41.EF.BC.9A.E5.9C.A

[Vue.js] v-ifを複数要素まとめて一括で適用したい

Vue.jsの理解がまだまだ浅いので備忘録。

# v-if の基本
`v-if`はディレクティブと呼ばれるものの1つで、基本的には1つの要素に対して記述します。
ディレクティブとはなんぞや？という人は、公式ドキュメントをどうぞ。 ⇒ [Vue.js ディレクティブ](https://012-jp.vuejs.org/guide/directives.html)

例えば以下の例では、ボタン要素に対して`v-if`を使用しています。
（`color=”primary”`はボタンの色を指定しています）
“`html:vue

“`
`v-if=”true”`なので、こんなボタンが表示されます。

HTML5プロフェッショナル認定 レベル1 試験対策

# 概要
HTML5 と言いつつ、HTML+CSS+JavaScript のお勉強。
レベル1 では、JavaScript の比重は高くない。
Ping-t を解けるようになるまで繰り返す。

# ウェブ問題集
Ping-t のプレミアムコンテンツを解きまくる
https://ping-t.com/modules/premium/index.php

### 料金体系

|利用期間（月） |料金（円、税込み） |
|—|—|
|1 |2400 |
|2 |3200 |
|3 |3800 |
|6 |4800 |
|12 |6800 |
|24 |9800 |
|36 |12800 |

HTMLのiframe内のページを切り替える

# やりたいこと
以下のようなページを作りたかったので、備忘録です。分かりにくいですが、左のpage1,2,3を押すと、右側の表示内容がpage1.html,page2.html,page3.htmlの内容に切り替わります。


# 作り方

## HTML
navとdivからなるシンプルなページです。

“`html

Chart.jsで凡例を消したりとかツールチップに単位を表記したりとか

Chart.jsを使っていて、仕様変更によって少しハマったので覚え書き。結論から言えば**公式のドキュメントを読むだけで解決**しましたが…

公式サイトは以下。

http://www.chartjs.org/

ドキュメントは以下から。

https://www.chartjs.org/docs/latest/

# ダメな例

『Chart.js 凡例 非表示』とかで適当にググると、以下のような感じの例コードが出てくる。

“`html:exsample.html


“`

あるいは『Chart.js ツールチップ 単位』とかで適当にググると、やはり以下のような感じの例が出てくる。

“`html:exs

Font-awesomeの仕様が変わっていて焦った話

## はじめに
普段アイコンを使うときはSVGかGoogleFontを利用することが多いのですが、スクールの質問で反映されないという相談があり久しぶりに触りました。

表示されない原因でよくあるのが
　1.CDNがアイコンのコードとバージョンが合ってない
　2.before:、after:の疑似要素に使用
　3.PRO版(有料)のアイコンを使っている
　4.CSSのfont系の設定が間違っている

今回はHTML/CSSとシンプルなサイトだったので①に特定し解決策を探してみました。

### 問題①昨年まで使えていたlinkタグが使えなくなった
Font-awesomeの説明で最もわかりやすいのがサルワカさんの[こちらの記事](https://saruwakakun.com/html-css/basic/font-awesome)ですが、方法1に掲載されたこちらのコードを使ってもアイコンが表示されなくなりました。

“`html Reactのbutton要素内でFont Awesomeアイコンを使う時の注意点

## 目的

クリックイベントで関数を呼び出すボタン要素の中にFont Awesomeコンポーネントを使ってアイコンを表示させたい。
しかしなぜか指定したnameがundefinedになってしまう…
“`react
samples.map( sample => {
return (

　　　　

)

const deleteMemo = (e) => {
const id = e.target.name //undefined…
console.log(id); //undefined…?
axios
//割愛
“`

## 原因

以下のようにevent.targetをコンソールに表示してみたところ、
“`rea

Electron 18 を使って200行以内でファイルの入出力ができるようなテキストエディタを作ってみる。

## 初めに

実用を目的とはしていません。`Electron`の構造を理解するために、どれだけ骨格を抜き出せるかを目的にしています。

というわけでスクラッチから書いてみます。

`html`中に`style`と`javascript`を直書きしているので、以下のワーニングが出ます。
`Electron Security Warning (Insecure Content-Security-Policy)`

以下のレポジトリにワーニングの出ない、他の機能も入ったバージョンを置いておきます。
ワーニングの消し方や結果だけを知りたい方はこちらで！
https://github.com/Satachito/electron-quick-start-MOD

`npm`,`npx`は入っている前提です。(`node`が入っていれば通常入っています)

## 準備

フォルダを作ってその中に`package.json`を作って`npm`で`Electron`をインストールします。

“`
$ mkdir TE
$ cd TE
“`
“`package.json
{ “main”:

[ 備忘録 ]　Tailwind CSS1 文字系

## [1] Tailwind CSSを使うには
### CDNをheadタグに追加する
“` index.html

“`

“` index.html







// 追加する
rel=”stylesheet”>

“`
https://tailwindcss.com/docs/installatio

「HTML&CSSとWebデザイン　入門講座」Chapter5のメモ

本記事の内容

タイトルの本のChapter5(P198~215)の学習を進める中でのメモを記します。
（理解が間違っていたら教えてほしいです）

p209「potisionメソッドのrelativeとabsoluteがよくわかんない」

参考URL「CSSのposition:absolute;とは？要素を思いのままに配置する方法」

CSSのposition:absolute;とは？要素を思いのままに配置する方法

参考書では、
post-infoクラスにposition: relative;を設定し、
post-dateにposition: relative;としている。
まずこの意図は「日付を表示するpost-dataの位置を固定したい」だと思う。
potisitionタグを使うことによって、親要素であるpost-infoの位置を基点にするrelativeを設定することによって、子要素の配置をabsoluteを指定することによって決めることができる。
（のかな？）

p210,215「displayメソッドのblo

プーチン??を破壊するDDos②

プーチンにDDos攻撃して戦争を終わらせるプロジェクトが発足しました。みんなで協力してプーチンを倒しましょう

https://github.com/ajax-lives/NoRussian


# プロジェクトをダウンロードする

“`bash
git clone https://github.com/ajax-lives/NoRussian
cd NoRussian/
“`

# DDosを実行する

### Windows

“`bash
“[CHROME PATH HERE]/chrome.exe” –disable-web-security index.html
“`

### Mac

“`bash
open -na Google\ Chrome –args –user-data-dir=/tmp/temporary-

ファイル関連をかく

– ファイルを扱うときのみ**enctype**をつける
– accept=”video/*”で取り込みデータを限定できる。この場合は動画。
– fileapiというJSのライブラリが存在し、フロント側で画像やファイルの生データを取得することができるみたい

“`javascript

“`

※ファイル選択とセレクトボックスはonClickではなくonChangeで選択したバリューが変更された時にイベントが発火するようにしたほうがいい

40 代おっさん GASでHTML・JSONからデータを取り出す

## 本記事ついて

本記事は プログラミング初学者の私が学習していく中でわからない単語や概要をなるべくわかりやすい様にまとめたものです。
もし誤りなどありましたらコメントにてお知らせいただけるとありがたいです。

## HTMLから正規表現でデータを抽出する

HTMLドキュメント全体の文字列から必要なデータのみを取り出すと言う作業が必要となる。
具体的には、StringオブジェクトのmatchメソッドでHTMLドキュメントから該当の要素を取得し、同じくreplaceメソッドでHTMLタグを取り除くという手順になる。

“`javascript
function tosiki() {
const url = ‘https://tonari-it.com/scraping-test/’;

const response = UrlFetchApp.fetch(url);
const html = response.getContentText();
const title = html.match(/