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

日本語のコード変換（都道府県名）

都道府県名のコード変換
ブラウザ画面ではデコードされて表示されているけど、ソースコード内ではコードで書かれている時に curl 等ど見たい時に予め変換しておく

コード変換コマンドを使ってもいいけど
都道府県以外が入れられてもエラーなので、エラーチェックしつつ、該当コードに置き換える感じのやつ

“`
#!/usr/bin/env bash

PREFECTURES=”北海道”

declare -A PREFECTURES_TABLE=(
[“北海道”]=”北海道”
[“青森県”]=”青森県”
)

if [ -n “${PREFECTURES_TABLE[$PREFECTURES]}” ]; then
echo “OK $PREFECTURES”
echo “${PREFECTURES_TABLE[$PREFECTURES]}”
else
echo “Incorrect input”
fi
“`

Webページのリンク から ダウンロードファイル名を抽出

“`
$ curl -s ‘https://www.XXXXXX.jp/’ | grep “

AWS EC2 で HTML ファイル表示　薬剤管理システムデモ

医療人2030のコンペも近づいてきたので共同開発している
薬剤管理システムの
試作品を作る必要があり
AWSを利用してシステム作成しました！

Amazon EC2
Amazon Machine Image (AMI)
Amazon Linux 2　を使用して
HTMLファイルを表示する仕組みを作成しました

## まずはセキュリティ対策を実施

多要素認証（MFA）を追加

https://qiita.com/tmknom/items/303db2d1d928db720888

IAM ユーザー

https://qiita.com/kzykmyzw/items/ca0c3276dfebb401f7d8

### 実際にEC2を利用してみる

Amazon Linux 2

https://stakiran.hatenablog.com/entry/2019/05/22/203921

https://dev.classmethod.jp/articles/saichan-20220107/

セキュリティグループは仮想ファイアウォールとして機能し、
関連付けられたリソースに到

createElement, appendChildを(おそらく)習得したので、自分なりに整理してみた。

タイトル通りです。

箇条書きのlist itemを5つ、JavaScriptで作成し、同時にテキストとidも設定しています。

日本語の使い方、変数の命名などおかしいところあると思いますが、私と同じくこの辺りで躓いている方の助けになれば幸いです。
“`html

親ノード。id=list

のように書いて、あとは[]の中を要素の数分だけ指定して繰り返していくなんてめんどくさすぎる！
そう考えていた、そこのあなた(私)にこの記事を捧げます。

## ２．解決案

【jQuery,JS】表に親と子の行を作ってあれこれ

# はじめに
以前、jQueryを使って表のアイテムを動かしましたが、今回は表の行にあれこれする処理を紹介します。
# 行の追加と削除
jQueryでの行追加、削除は
・$(テーブルアクセス).insertRow(削除行);
・$(テーブルアクセス).deleteRow(削除行);
を使用します。
これらを利用し、動的に行を追加したり削除するような機能を作っていきます。

```HTML:html




追加
削除
データ

過去問共有サービス Univer の開発を行いました。


過去問共有サービスUniverです。企画からデザイン、デザインに至るまで一気通貫して一人で行いました。

https://universitycommunity.herokuapp.com/

[開発背景]
開発の理由は二つあります。
一つ目の理由は、コロナの影響で縦と横のつながりが薄くなり、過去問が手に入りづらくなったという学生の問題を解決するためです。
また私自身の周りにそういった悩みを抱えている学生の方が多くいたことから、ユーザー数が期待できるため、多くの方のフィードバックを通じてより質の高いサービス開発に取り組めると考えたからです。

[実装機能]
投稿機能、画像投稿機能、ログイン・ログアウト機能、フォロー機能、いいね機能、コメント機能、お気に入り登録機能、検索機能など、SNSに利用

フォームにパスワードを入力させる際、値を表示させない

Djangoを用いて家計簿アプリを作っているのですが、その中の「ログインページ」においてフォームにパスワードを入力させる際、値を「*」で隠したいと考えました。
そこで気づいたことがあったのでまとめておきます。
## 結論：typeをpasswordに設定すればよい
```html:HTML

```
以上のように設定すれば、よく見るパスワード入力欄になります。

厚労省の感染者数のデータ詐欺グラフをGoogleドライブで再計算して共有してみた

# はじめに
最近、ツイッターでデータやグラフをスクショで公開しているのを良く見るのですが、スクリーンショットではデータの再利用が出来ないので、第三者とデータを共有できる方法を考えて見ました。

以前[ブラックジャックの期待値をセル関数だけで計算する](https://qiita.com/takahasinaoki/items/094da1dd64c6273502dd)という記事で、EXCELのセル関数でブラックジャックの期待値を計算したシートをGoogleスプレッドシートで公開したのですが、もしかするとEXCELで作成したグラフをGoogleドライブにアップロードしても、Googleスプレッドシートのグラフとして公開出来るのではと思い試してみたらうまくいったので紹介します。

## サンプルデータについて
厚生労働省のアドバイザリーボードが公開しているワクチン接種歴別の新規陽性者数のグラフを使用したいと思います。
なぜかというと、従来は接種歴の分からない人を未接種者にカウントしてデータを作成していたのを、４月中頃のデータから接種歴不明に分類するようにしたという[ニュース](#ニュース

初心者が「ネップリ共有サイト」をつくった話（兼メモ）

## TL;DR
下のサイトをつくった。
https://nepris.herokuapp.com/

Githubリポジトリはこちら。
https://github.com/glyzinieh/nepris

備忘録を兼ねて、開発の経緯をご紹介します。

## はじめに
当方初心者のため、至らぬ点があればアドバイスをよろしくお願いいたします。お気軽にコメントください。
それでははじめにネップリ共有サイト **NePriS** のご紹介をさせていただきます。

### そもそも「ネップリ」って？
「ネップリ」とは、セブンイレブン・ファミリーマート・ローソンなどのコンビニエンスストアで提供されている「 **ネットプリント** 」のことを指します。ネットプリントでは、自分で作成・撮影した画像作品を各サービスのアプリやサイトに登録することで予約番号が発行され、それをコンビニにあるマルチコピー機に入力することで、登録した画像をプリントアウトすることができます。

ネットプリントの予約番号を共有することで、様々な作品をプリントアウトすることができるわけです。
この予約番号の共有には、一般的にTw

IEのサポート終了で使えるHTML&CSS

# はじめに

遂にこの時がきました。
2022年6月15日に、Internet Explorer 11のサポートが終了しました。
これからはIEを気にすることなく、モダンCSSを使用できます。

そこで今まではIE対応で使用できなかった、CSSのプロパティやHTMLをまとめてみました。

## object-fit

コンテンツ領域に合わせたサイズで要素を表示できるプロパティ

```
img {
object-fit: cover;
object-position: right top;
}
```

## var

CSSで使える変数を出力する関数

```
:root {
--font-color: black;
}
p {
color: var(--font-color);
}
```

## aspect-ratio

画像のアスペクト比を維持しながら拡大縮小ができるプロパティ

```
div {
width: 100%;
aspect-ratio: 16 / 9;
}
```

## position: sticky;

ウィンドウを基準に追従す

【Angularアプリケーション開発 #7】選択したデータの詳細を表示する。

今回やること
・リストから選択したデータの詳細を表示する。

- onSelectメソッドを作成します。
引数はMember型です。memberを受け取りselectedMemberへ設定します。

```typescript:members.component.ts
import { Component, OnInit } from '@angular/core';
import { Member } from '../member';
import { MEMBER } from '../mock-member';

@Component({
selector: 'app-members',
templateUrl: './members.component.html',
styleUrls: ['./members.component.css']
})
export class MembersComponent implements OnInit {

members = MEMBER;

member:Member = {
id:'1',name:'

DOM操作が苦手なJavaScript初学者が保留機能付きメモアプリを作ってみた

DOM操作の情報が多すぎて何か最善かわからないまま、
つぎはぎの知識で何とか完成しました。

もう少し勉強したらReactを学びたいと思います。

至らぬところが多いので、ご意見や改善案をいただけますと幸いです。
何かいい教材がありましたら教えてください。

```horyuMemo.html

追加

メモ

【#1 エンジニア転職学習】HTML/CSS模写コーディング

# はじめに
富山県に住んでいるChikaといいます。
毎日投稿を目標に、バックエンドエンジニア転職に向けた学習内容をアウトプットします。

学習内容は昨日投稿した以下の記事を基にしています。

https://qiita.com/Chika110/items/ef54dddd565a0193ef44

# 本日の学習内容
* 模写コーディング
* おうちで学べるデータベースのきほん（本記事投稿後に読書します）

# 模写コーディング
当初は予定になかったのですが、ポートフォリオを作成する際に最低限のWebページ作成能力は必要と考えたので取り組みました。

やり方としては、下記サイトの題材に対してレイアウト説明等を見ながら自分でコーディングしていく流れです。
とはいえ、HTML・CSSはProgateで「とりあえず概要が分かればい」感覚でやった程度です。1回目は完全にソースコードを書き写して復習・初見のタグ等は調べてという状態でした。
2回目で全体をざっくり自力で書けるくらいで模写しました。

個人的には、IDを使用したページ内リンクの仕組みを知って、Webページで一気にスクロールす

【HTML】HTMLのtextarea内で文字列を改行する方法

javascriptでもできるけど、いちいちこんな事でJSを使うものなーと考えてたら、いいの見つけた。

# コード
```HTML
【武器】 【防具】

または、

【武器】 【防具】
```

# 結果
```
【武器】
【防具】
```

参考
https://tamoc.com/textarea_newline/