OmniAICreator/Qiita-1.07M huggingface dataset:
ワームについて調べてみた

# ワームの特徴
ワームはマルウェアの一種であり、寄生するためのファイルを必要とせずに自身を複製することが可能なことから強い感染能力があることが特徴です。
ウイルスやトロイの木馬とはまた異なった特徴があり、その特徴を活かした攻撃を行います。
潜伏することがないので、感染の発見が容易なため早期の対策が可能です。
しかし近年では、それを逆手にとった攻撃手法の事例もあります。

# 感染経路
* ネットワークからの感染
ワームはランダムにIPアドレスを作成し、感染先のコンピュータを探します。見つけ出したコンピュータに脆弱性があれば、その脆弱性を突く攻撃をしワームに感染させます。

* メールからの感染
ワームはコンピュータ内のアドレス帳などからメールアドレスを探します。そして見つかったメールアドレスにワームを添付したメールを大量に送信します。

* 共有フォルダからの感染
ワームは共有フォルダに自身のコピーを置いて、他のコンピュータに感染させようとします。

* 外部ドライブから感染
ワームに感染した外部ドライブ（USBメモリなど）を、コンピュータに接続することでワームに感染することもあります。

# 想定される問題
* リソースが占拠されてコンピューターの動作が停止する
* 勝手にメールを送信・SNSに投稿される
* 個人情報・機密情報を盗まれる
* バックドアを設置され、別のマルウェアに感染させられる

# 実際の事例
* Morris Worm（1988年11月）

* LOVELETTER （2000年）

* Slammer（2003年1月）
爆発的な感染によって、10分で7万5000台以上が感染したと言われています。このワームの出すパケットにより、世界的にネットワーク障害が発生しました。
強い感染力と通信データを大きく使うことで、回線がパンクしてしまってホームページになかなかアクセスできなくなってしまった事例です。

* WannaCry　（2017年5月）
感染するとパソコン内のデータが暗号化されファイルにアクセスすることが出来なくなり、身代金としてビットコインなどを要求します。
その年に世界150ヵ国で23万台以上のコンピューターが感染しました。海外ではWannaCryに感染した影響で病院のシステムが停止し、手術や診察ができなくなった事例も発生しています。

# 防止策
* セキュリティ対策ソフトの活用
次々に新しい感染手法が作られていますが、セキュリティ対策ベンダーも素早く対応しているので、セキュリティ対策ソフトでかなりの脅威を防止できます。そのほとんどはセキュリティ対策ソフトで検知、削除できます。

* ソフトウェアは最新版に保つ
日々対策方法がアップデートされているため、最新版に保つことで被害を減らせます。

* 不審なメール、リンク、ファイルは開かない
たとえ知り合いからのメールであっても、添付されているファイルを開く時には慎重になりましょう。

# まとめ
長年に渡って事件を起こしているみたいです。
ワーム怖すぎ。
プログラマは休日も勉強しなければいけないという神話



# プログラマは休日も勉強せよと言われる。

神話だ。主語が大きい話はいつだってそうだ。

# 個人個人で開発も技術分野もそれぞれに違う。
枯れた技術をやり続けるのとトレンドを追い続けるのでも全く違う。個人の能力も違う。たとえば100の力がある人と50の力の人と両方が休日にも勉強しなければいけないわけではないだろう。それにどうせ勉強しても技術は学ぶ先から廃れていく。流行り廃りの激しい分野ならそうだ。

# 個人の能力差や環境差を考慮せず

一概にプログラマという主語を使うのが間違いなのだ。そもそもこの話は誰が言い始めたのだろう。業務内で仕事が追いつかない人が言いだしたのではないだろうか。ならば有能なあなたには必要ないかもしれない。

# 学びたいことがあるならば良い。

だが恐怖感から学習しても果たして本当に成果があるものかどうか。技術学習をするにしても手応えのある範囲を見極めてからにしたい。学び損だけは避けたい。賢くあれ。それがプログラマの本領だろう。

# 休日に学習できるのは主に技術分野だけだ。

業務ではコミュニケーション能力と人間性やプロダクト精神など他の性質も必要とされる。人間性を磨くためには座禅でもした方が良いのではないか。休日にはPCを放り出して座禅をするべきだ。今すぐに「座禅入門」的な本をAmazonで注文してみてほしい。この世からプログラミングが無くなっても座禅は役立つだろう。

僕はどうにか業務時間内だけでプログラマ業は成り立つということにしたい。だが真実はこうだ。

# 主語が大きい一般論はほぼ成り立たない。



<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ


# Twitter

https://twitter.com/YumaInaura

<!-- Update From Qiita API -->
ITP1個人的に難しかった問題解説

基本的に1問1動画で難しいと感じた動画を解説にアップしています。
# ITP-1-6-b:足りないトランプを出力する問題

```python:qiita.rb
N=int(input())
souts=["S","H","C","D"]
cards=[]

for i in range(N):
    s,n=input().split()
    if s=="S":
        cards.append(int(n))
    elif s=="H":
        cards.append(13+int(n))
    elif s=="C":
        cards.append(26+int(n))
    elif s=="D":
        cards.append(39+int(n))
for j in range(1,53):
    if j not in cards:
        print(souts[(j-1)//13],(j-1)%13+1)
```

# ITP1-7-d:行列の積の問題
シンプルに見えて3重ループが必要な問題。

```python:qiita.rb
n,m,l=map(int,input().split())
A=[]
for i in range(n):
    #A=list(map(int,input().split()))
    A.append(list(map(int,input().split())))
B=[list(map(int,input().split())) for i in range(m)]

for i in range(n):
    row=[]
    for j in range(l):
        c=0
        for k in range(m):
            c+=A[i][k]*B[k][j]
        row.append(c)
        
    print(*row)  
```

他にもいろいろ解説あげていこう。
アイパッドでマークアップ使うと直接ページに書き込めるのが便利。
本当はPythonファイルで打った方がいいんだろうけど右手しか使えんからなあ；；
2022年前後に色々変わったReactの話

仕様変更が結構痛いところに来たので備忘録です。

## React Router 系
```tsx:変更後の書き方
import { BrowserRouter, Route,Routes } from 'react-router-dom';
...
const App:React.FC = () => {
...
    return(
        <BrowserRouter>
            <Routes>
                <Route
                    path = '/'
                    element={
                        <Home />
                    }
                />
                <Route
                    path = 'about'
                    element={
                        <About />
                    }
                />
            </Routes>
        </BrowserRouter>
    );
}
```
## useHistory -> useNavigate
```tsx:変更後の書き方
import {useNavigate} from "react-router-dom";
...
const App:React.FC = () => {
    const navigate = useNavigate();
    const toabout = () => {
        navigate("/about");
    };
...
    return(
        <button onClick={toabout}>Aboutへ</button>
    );
}
```
【競プロ】60日でatcoder緑色目指します。

バイク事故での骨折により当分仕事ができないので動けない間プログラミングの勉強しようと思う。
現状ウーバーとバイトで暮らしてて将来どうしようかと思っていた矢先の事故。

前々から興味はあった競技プログラミングをしてせっかくだから目標も建てようと思った。
私は１つの目標のみを期限を決めて頑張るとけっこう楽しいタイプ。

https://qiita.com/e869120/items/f1c6f98364d1443148b3#1-6-%E8%8C%B6%E8%89%B2%E3%82%B3%E3%83%BC%E3%83%80%E3%83%BC%E3%81%AB%E3%81%AA%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AE%E3%82%AC%E3%82%A4%E3%83%89%E3%83%A9%E3%82%A4%E3%83%B3

みんなが見てるであろうこの記事を参考にする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/759966/cc3d8a22-a426-1001-95ff-da6e388dbe93.png)
計画はこんな感じ。実は記事投稿時点で4日目で、ITP1の40問とビギナーコレクションは解き終わってる。

今の感覚としてはA問題とB問題の8割は解けるかなという感じ。
右手しか使えないけど他にやることもないし集中したい。
【javascript】【jquery】autocomplete(オートコンプリート)の複数セレクタを判定する

# コード

```html
<input type="text" name="chara_name" value="" >
<input type="text" name="skill_name1" data-type="skill" value="" >
<input type="text" name="skill_name2" data-type="skill" value="" >
<input type="text" name="skill_name3" data-type="skill" value="" >
```

```javascript
    area.find('セレクタ1,セレクタ2').autocomplete({
        source: function(request, response) {
            const text = request.term;
            const hit_list = [];
            if(this.element.attr('name') === 'chara_name'){
                処理
            }
            if(this.element.data('type') === 'skill') {
                処理
            }
            response(hit_list);
        },
        autoFocus: true,
        delay: 200,
        minLength: 2
    });

```
PHP array_reduce関数

# 概要

- PHPの組み込み関数である`array_reduce`についてちょっと調べたのでまとめておく。

# 内容

- 指定された関数を与えられた配列の値を用いでどんどん処理していくものらしい。

# 使い方の例

- 下記に当該関数の使い方の例を記載する。

    ```php
    array_reduce(配列, '関数名');
    ```

# 使い方の実例

- `$a`の配列の値をすべて足して返してほしい場合、下記のような処理になる。

    ```php
    <?php
    
    function sum($carry, $item)
    {
        $carry += $item;
        return $carry;
    }
    
    $a = [1, 2, 3, 4, 5];
    
    $int = array_reduce($a, 'sum');
    echo $int; // 15
    ```

1. 下記の処理はあくまで準備段階となる。array_reduce関数の引数を定義している。

    ```php
    function sum($carry, $item)
    {
        $carry += $item;
        return $carry;
    }
    
    $a = [1, 2, 3, 4, 5];
    ```

- `$a`の配列の要素がなくなるまで下記の処理が繰り返される。
    1. array_reduce関数はまず、第一引数の`$a`配列のインデックス0の値（intの1）を取り出し、sum関数の`$item`に格納し処理を実行する。
    1. 上記処理の結果は`$carry`に格納される。
    1. 次に`$a`の配列のインデックス1の値（intの2）を取り出し、sum関数の`$item`に格納し処理を実行する。この時`$carry`には一つ前の処理でインデックス0の値をsumで処理した結果が入っている。
    1. 上記処理の結果は`$carry`に格納される。（`$carry`の値が更新）
- array_reduce関数は第三引数の指定も可能で、インデックス0を実行する時の`$carry`の値を設定する事ができる。

    ```php
    <?php
    
    function sum($carry, $item)
    {
        $carry += $item;
        return $carry;
    }
    
    $a = [1, 2, 3, 4, 5];
    
    $int = array_reduce($a, 'sum', 100);
    echo $int; //115
    ```

# 参考文献

- [https://www.php.net/manual/ja/function.array-reduce.php](https://www.php.net/manual/ja/function.array-reduce.php)
【VSCode】保存時にテーブルを整形する【Markdown】

## 拡張機能をインストール

テーブルを整形するために以下の拡張機能をインストールします。

https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one

`Markdown All in One`はテーブルの整形以外にも以下のような機能があります。

- 目次作成
- 見出しナンバリング
- リスト編集補完
- MarkdownをHTMLに変換
- 数式
- 自動補完
- リンク貼り付け支援

## 保存時に整形されるよう設定する

`cmd + shif + p`でコマンドパレットを開きます。  
`Preferences: Open User Settings (JSON)`を実行し`setting.json`を開きます。  
`setting.json`に以下を追記します。  

```setting.json
  "[markdown]": {
    "editor.defaultFormatter": "yzhang.markdown-all-in-one",
    "editor.formatOnSave": true
  },
```

すると`.md`ファイルを保存した際にテーブルが整形されるようになります。
photoshopで「エンディアンタイプの読み込み中にエラーが発生しました」というエラーが発生した場合の対処法

adobe photoshopでの作業中に、初めて見るエラーに遭遇したよ(´･ω･`) 

![スクリーンショット 2022-08-23 11.52.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/590293/35d86d1f-31cf-2789-fe1e-266f04d49ddd.png)

## 発生した経緯
サイト（A）で利用中の画像（webp）をサイト（B)に流用したいが、サイト（B)はwebpの使用が不可なため、変換する必要がある。そこで、photoshopでwebp画像を開き、「web用に保存」をしようとしたところ、発生。

## 対処法をググると・・・
「オンラインでのフリー画像変換ツール等で一度変換する」という記事がヒットしたが、フリーとはいえオンラインツール使うのはちょっと躊躇うなぁ・・・と思い色々試した結果、安心な対処法を見つけたのでご紹介するよ(`・ω・´)

## 対処法
1. webpをphotoshopで開く
1. 開いた画像をpsd形式で保存する（別名で保存→psd形式で保存）
1. ファイルを閉じる
1. 保存したpsdを開く
1. web用に保存する

これだけです。
これでなぜか問題なく保存ができるようになりました(`・ω・´)b
SSR と CSR の違いを図で表してみた

# はじめに

SSR と CSR の違いを説明するために、一目で把握できる資料が欲しかったので作成してみました。

どっちがどういうときに有利なのか、といった考察はしません(うまくまとめる能力もないので😅)。

以下の違いを表現することが主な目的です。

- 最終的な HTML が生成されるタイミング
- ダウンロードされるデータ量


# 用語解説

- SSR
    - **S**erver-**s**ide **R**endering の略
- CSR
    - **C**lient-**s**ide **R**endering の略

# 概略図

![SSR・CSR.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773745/f546e8c6-0b6d-b116-df91-d40bdd0f3f96.jpeg)

# まとめ

自分の表現力の乏しさにはがっかりですが、実際に説明するときにうまく使えれば良いなぁ、と思ってます😀。
バリデーションが実行された後、jsが機能しない

# はじめに
本記事はプログラミング初心者が、railsの学習を進めながら、躓いた部分、解決した箇所、またそれらの解決方法を備忘録も兼ねてまとめているものです。
最初はprogate。そのあと、「現場で使える RubyonRails5 速習実践ガイド」(通称)「現場Rails」を参考に進めていきました。
そのため、記事の内容には誤りがある可能性があることをご理解ください。
誤りがあればお手数ですが、ご指摘いただければと思います。よろしくお願いします。

# 環境
Ruby 3.1.2
Rails 7.0.3.1

# 問題のエラー
バリデーションが実行された後に、jsが機能しなくなってしまった。
![スクリーンショット 2022-08-21 23.01.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2737125/d21d9acd-6b03-d61f-64d5-11b3a00428ae.png)
![スクリーンショット 2022-08-21 23.01.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2737125/6c77e8e9-aac4-bd5a-0ccf-b5b105587681.png)
本来ならば、上記の二枚のようになり、判定を開始するボタンが押せるのですが、押して、バリデーションが実行された後、
![スクリーンショット 2022-08-21 23.01.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2737125/c0709aa5-9f1f-281a-f2ee-c58de11519a0.png)
このように、ボタンが出てきません(jsが反映されていない。)

# 解決策
どうやら、turboにヒントが隠されているようです。最初のコードを見てみましょう。
```ruby:check.js
document.addEventListener("turbo:load", function() {
 var allowCheckbox = document.getElementById("check");
 var checkbutton = document.getElementById("link3");

 allowCheckbox.addEventListener("change", function(event) {
  if (event.target.checked) {
    checkbutton.disabled = false;
  } else {
    checkbutton.disabled = true;
  }
 }, false);
})
```
一行目の`turbo`は、ページをリロードした時に、もう一度jsが反映されるように記載しているものです。
しかしながら、バリデーションが実行された後は、コントローラーを見てみると、
```ruby:user.controller
class UsersController < ApplicationController
  def show
    @user = User.find(params[:id])
  end

  def new
    @user = User.new
  end

  def create
   @user = User.new(user_params)
   if @user.save
    redirect_to @user, notice: "判定が正常に実行されました。"
   else
    render :new, status: :unprocessable_entity
   end
  end



  private
  def user_params
    params.require(:user).permit(:name, :sex, :age, :hemo, :feti, :sterone, :agreement)
  end
end

```
はい、新規登録画面にいくのに、`render`になっています。
ここがポイントのようで、renderの場合でも、turboを使ってjsが反映できるようにすることができるようです。それが、以下
```ruby:check.js
 document.addEventListener("turbo:render", function() {
```
上記のように`turbo:load`の他に`turbo:render`を付け足すことで、renderされても、jsが反映されるようです。
出来上がったコードがこちら
```ruby:check.js
document.addEventListener("turbo:load", function() {
 var allowCheckbox = document.getElementById("check");
 var checkbutton = document.getElementById("link3");

 allowCheckbox.addEventListener("change", function(event) {
  if (event.target.checked) {
    checkbutton.disabled = false;
  } else {
    checkbutton.disabled = true;
  }
 }, false);
})
 document.addEventListener("turbo:render", function() {
  var allowCheckbox = document.getElementById("check");
  var checkbutton = document.getElementById("link3");

  allowCheckbox.addEventListener("change", function(event) {
    if (event.target.checked) {
      checkbutton.disabled = false;
    } else {
      checkbutton.disabled = true;
    }
  }, false);
})

```
実際に、バリデーションが実行された後でも、jsは機能しました。

# おわりに
今回は、バリデーションが実行された時に、どのようにその画面に遷移してるかがポイントでした。loadであれば、いつも通り、jsは機能していましたが、バリデーションでrenderにしていたので、もう一つjsのコードを追加する必要があったのですね。
これは、これから先も使いそうな予感(?)がするので、覚えておこうと思います。
なかなか、読みやすさというものに欠けるかもしれませんが、誰かの問題を解く鍵になれば嬉しいでです。
ありがとうございました。
Javaで作られたWEBアプリケーションの運用にあたってJVMのパラメータをKubernetesマニフェストで管理する

## はじめに
皆さんこんにちはasmgです。今回は、Javaで作られたWEBアプリケーションの運用にあたってJVMのパラメータをKubernetesマニフェストで管理するタスクを行なったので実現した方法を記載していこうと思います。
## 本記事の対象者
本記事は、JVMのパラメータをKubernetes マニフェストで管理することに着目しているのでkubernetesやJVMについて言及はしません。なので、KubernetesやJVMのパラメータは理解していることを前提としています。
## 本記事の実行環境
#### 検証機
* Mac Book pro 14inch M1 Pro
#### 検証環境
* kind（Kubernetes in Docker）

## 現状のJVMのパラメータの管理方法
現状、JVMの管理は以下のように行っていました。

```Dockerfile:Dockerfile
FROM openjdk:8-jdk-oraclelinux8
COPY ./target /
CMD ["./apply.sh", "./app.jar"]
```
```shell:apply.sh
#!/bin/sh
java \
  -XX:PermSize=128M \
  -jar ${1}
```
```yaml:deployment.yaml
apiVersion: apps/v1
kind: Deployment
metadata:
  name: sample-deployment
spec:
  replicas: 1
  selector:
    matchLabels:
      app: sample-app
  template:
    metadata:
      labels:
        app: sample-app
    spec:
      containers:
      - name: sample-spring-boot
        image: sample-spring-boot:latest
        imagePullPolicy: IfNotPresent
      env:
      - name: hogehoge
        value: "hogehoge"
```
<b>※スクリプトやDockerfileは本記用に簡単に記述しています。</b>
<b>※今回設定している-XXパラメータには特に意味はありません。</b>
### 現状の管理方法の問題
上記のような構成でDockerfileを作成すると、JVMのパラメータを修正するタイミングやアプリケーションを更新するタイミングでbuildする必要があります。この構成だと、パラメータを修正するたびにimageをBuildしないといけないため、簡単にパラメータを修正することができません。なので、本記事ではJVMのパラメータをkubernetesのマニフェストで修正できるようにしていきたいと思います。

## JVMのパラメータをKubernetesマニフェストで管理する方法
KubernetesのマニフェストファイルのenvにJavaの公式で提供されている環境変数`JAVA_TOOL_OPTIONS`を追加してここにJVMのパラメータを記載します。
```yaml:deployment.yaml
...一部省略...
        env:
        - name: JAVA_TOOL_OPTIONS
          value: "-XX:PermSize=129M"
```
kubernetesのマニフェストファイルの変数に`JAVA_TOOL_OPTIONS`を記載することで、kubernetesのマニフェストファイル上で、JVMパラメータを管理することができます。
kubernetesのマニフェストファイルでJVMパラメータを記載しているので、apply.shで記述している部分は削除することができます。
### 注意点
:::note warn
JVMのパラメータの環境変数`JAVA_TOOL_OPTIONS`と類似するもので、`JAVA_OPTS`というものがあります。
JAVA VMでは、`JAVA_OPTS`は、非公式な環境変数のようです。kubernetesのマニフェストで設定する際に`JAVA_OPTS`は利用できなかったので、`JAPA_TOOL_OPTIONS`を利用するのが良いかと思います。
ref:https://kazuhira-r.hatenablog.com/entry/2020/10/23/003913
:::
### 設定が反映されているか確認
```terminal:terminal
bash-4.4# jps -v

----
Picked up JAVA_TOOL_OPTIONS: -XX:PermSize=129M
OpenJDK 64-Bit Server VM warning: ignoring option PermSize=129M; support was removed in 8.0
1 jar -XX:PermSize=129M
78 Jps -XX:PermSize=129M -Dapplication.home=/usr/java/openjdk-8 -Xms8m
```
Podに入り、設定が反映されているかを確認してみると、JVMパラメータ`-XX:PermSize`が`129M`に設定されていることが確認されています。
## まとめ
今回は、Kubernetesマニフェストで管理する方法を実現しました。Kubernetesのマニフェストの設定で変数`JAVA_TOOL_OPTIONS`を活用することで柔軟にJVMのパラメータを変更することができると思います。
Laravelを初めて使うにあたって抑えるべき3つのポイント

## はじめに
### 記事の対象
- これからLaravelを始める人
- Laravelを始めたばかりの人
- ここまで記事を読んでる人
### なにから始めたらいいのかわからない
いざ、Laravelを使おうと思ったけど何から手を付けたらいいのかわからない。
そう思ってこの記事を開いたはず。
そんな迷子の道標になればと思い、3つのポイントを纏めたのでぜひ最後まで読んでみてください。

## チュートリアルから始めよう
ネットで検索すると色んなチュートリアルが出てきます。  
公式ドキュメントを読むのもいいですが、やはり一番身に付くのは、インプットもアウトプットもすること。  
そのため、すぐに環境を作って実際になにかしらのシステムを作ってみましょう。
### おすすめのチュートリアル

- [入門Laravelチュートリアル (1) イントロダクションと環境構築](https://www.hypertextcandy.com/laravel-tutorial-introduction)  
- [Laravel学習帳](https://laraweb.net/)
- [laravel.jp](https://readouble.com/laravel/9.x/ja/installation.html)

## デバッグしよう
Laravelに限らずですが、とにかくエラーになったらデバッグです。  
`dd()` または `ddd()` を使って変数に代入されている値などを正確に確認していきましょう。
``` php
dd($id);

ddd($id);
```

## 完成させよう
Laravelは自由に開発できる故に、手を広げると沼に陥りがちです。  
なので、チュートリアルに着手したら、まずはチュートリアル通りに完成させることを一番に考えておきましょう。コントローラーに処理を書きすぎて肥大化したものを「ファットコントローラー」なんて言いますが、初めのうちは練習なので気にしなくて大丈夫です。  
理解を深めたあとに色んな機能を活用してクリーンなコードを目指してください。

## まとめ
## 抑えるべき3つのポイント  
:::note
- **チュートリアルから始めよう**
- **デバッグしよう**
- **完成させよう**
:::


僕自身はCakePHPが初めてのFWだったのですが、本当に理解が追いつかず難しい印象をもっています。  
ただ、LaravelはCakePHPと比べるとシンプルに分かりやすいと感じています。
そんなLaravelを楽しく扱える人が一人でも増えたらいいなと思いつつ今回の記事を纏めました。
Linux aliasについて（自分用メモ


bashにはコマンドにエイリアス（別名）を付けられる機能があり、複雑で長いコマンドや必須のオプションの入力が省略可。

 ●エイリアスの設定はaliasコマンドを使用。

  alias [エイリアス名='コマンド']  コマンドが2語以上になる場合は、シングルクォート（’）かダブルクォート（"）で括ることに注意。

  例）コマンドラインから「rm」と入力すると「rm -i」コマンド（対話式の削除）が実行されるよう設定する場合 

$ alias rm='rm -i'

 ※エイリアスの前に「¥」「\」をつけることで、一時的にエイリアスを無効にできる。  また、現在登録されているエイリアスを確認するには、aliasコマンドを引数無しで実行。

  ●登録したエイリアスを削除するには、「unalias」コマンドを使う。  unalias [-a] [エイリアス名]  

例）エイリアス「rm」を削除する場合

 $ unalias rm  

オプション「-a」を指定すると、登録されている全てのエイリアスが削除されます。この場合、引数のエイリアスは無視される。
GoogleColabのアップロードと削除を楽にする

# GoogleColaboratory

機械学習の強い味方、GoogleColaboratory。
インストールが不要ですぐにPythonなどの機械学習の環境を整えることが出来る。
ローカル環境が整っていない時などに使うとめっちゃ便利。
けど…

## ファイルの削除＆アップロードが面倒

やや面倒臭いのが、ファイル管理。
デフォルトの機能だと、以下の制限があります。
1. フォルダの削除は中が空でないと出来ない
1. ファイルの削除は一件ずつ
1. ファイルのアップロードも一件ずつ

フォルダ内のファイルを一個一個消して空にしてからフォルダを削除？
100件以上もあるファイルを一件ずつあげる？やってられるか！

## プログラムで削除&アップロード

ということで、一括削除＆アップロードをプログラムにしてしまえばいいのではと思い至る。
まずは削除。
```python:GoogleColab：フォルダ削除
import shutil
shutil.rmtree('/content/削除フォルダ名') 
```
これで中身ごと一掃できました。
次はアップロード。
ローカルのこの構造をそのままアップロードしたい。
<img width="90%" alt="local" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1595331/0fc82df0-3d10-6f5c-0aef-6d94d5115c9a.png">
ファイル一つしかアップロードできないのであれば
<b>フォルダごと圧縮→アップロード→解凍</b>とすれば良いのでは。

・ローカルで対象ファイルをフォルダごと圧縮
```sh:local：フォルダ圧縮
$ zip 圧縮ファイル名.zip -r 圧縮元フォルダ名/

# Macの場合は余計なファイルが入るので以下を使用
$ zip 圧縮ファイル名.zip -r 圧縮元フォルダ名/ -x "*.DS_Store"
```
・GoogleColabにアップロード
デフォルト機能でアップロードしてもいいが、コード使うと進捗が確認できるのでおすすめ。
デフォだとファイル名はすぐ反映されるものの、完了したかどうかがよくわからないので…
もちろんファイルが重ければそれだけアップロードに時間かかります。
```python:GoogleColab：ファイルアップロード
from google.colab import files
upload = files.upload()
```
・zipを解凍
```sh:GoogleColab：zip解凍
!unzip アップロードしたフォルダ.zip
```
※GoogleColabでコマンド使う時は、先頭に!を必ずつけること

！できました！
<img width="40%" alt="local" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1595331/fc1b541d-4832-bb97-b518-1304752b2600.png">

## 考える
GoogleColabは機械学習においてめちゃくちゃ便利ですが
今回のファイル管理のようにめちゃくちゃ不便な面もあります。
不便だな〜と思いながらそのまま使うか
なんとか便利にできないだろうかと考えるか
そこが成長の分かれ道だなと実感したのでした。
Goから外部コマンドの呼び出しではPATHの「~」が展開されない

## Goから外部コマンドの呼び出しではPATHの「~」が展開されない

Goで書かれたプログラムから外部コマンドを呼び出す場合、環境変数PATHに~(チルダ:ホームディレクトリ)は展開されないので、~/bin/のようにPATHを通している場合、実行に失敗します。原因がわからず結構はまりました。

以下のように~を使わず、$HOMEを展開し回避します。

```
export PATH="$HOME/bin:$PATH"
```

たまにはまっている人がいる問題のようなので([例](https://github.com/kubernetes-sigs/aws-iam-authenticator/issues/136))、記事として日本語で共有しておきます。

## やりたかったのは

WSL2の環境で、chezmoiから1Password CLIを利用しているのですが、Linux版のCLIはWSL2のホストで動いている1Password GUIと通信してくれません。そのため、1Passwordの長いマスターパスワードを打ち込む必要があります。
一方、Windows版の1Password CLIでは、1Password GUI側でWindows Helloを設定していると、Hello経由で指紋などで認証が行われます。

Windows Helloでの認証をWSL環境からも使いたいと思い、WSL側からWindows版の1Passwordを利用を試みていたのですが、chezmoiからの利用のみ上記の理由でうまく呼び出せずはまっていました(1Password CLIの利用がほぼchezmoiのみなので、とん挫するところでした)。

WSLのフォルダにWindows版1Password CLIへのシンボリックリンクをopという名前で置き、そのフォルダをフルパスでPATHに追加すればchezmoi(go)からWindows版1Password CLIが呼び出され、Windows Helloでの認証で動作しました。

Windows版1Password CLIのフォルダを直接PATHに指定しても動くかもしれませんが、なんとなく気持ち悪いので未検証です。

## 問題

一応、動いているのですが、たまにエラーが発生するようです(chezmoi applyでエラー)。
同じ文書(op document get)でこけているわけでもないので、単純に呼び出せない、というわけではなさそうです。
原因・対応がわかれば追記します。

### 対処

エラーの発生状況などから、`op document　get` の実行間隔の制約らしいことがわかりました。

1Password CLIのLinux版やMac版では、`op signin`でTOKENが発行されるのに対し、Windows版ではTOKENの発行などがないため、
リクエストの都度1Passwordのサーバー側かGUIクライアントとの通信を行っているようです。
その関係？で`chezmoi apply`の実行中に`~/.ssh`フォルダの取得などで1passwordからのファイル取得が繰り返され高頻度での実行となったときにエラーとなるようです。

`op.exe`の呼び出しをシンボリックリンク経由ではなく、以下のようなシェルスクリプトを挟みリトライとウェイトを入れることで、エラーの発生頻度がなくなりました(というか、想定しているretryも発生しないように見える)。
```
#! /bin/bash
if [ "$1" != "document" ]; then
    /mnt/c/1password/op.exe $*
else
    for i in {1..10}; do
        /mnt/c/1password/op.exe $*
        RESULT=$?
        if [ $? ] ; then
            exit 0
        fi
        echo retry $i : op $*  1>&2
        sleep 1
    done
    exit $RESULT
fi
```

もとは、もっと単純にエラーコードをチェックし、retryしていたのですが、`chezmoi document`のみに対象を絞り、リトライを入れることでうまく動いているようです。しかし、うまくいく原因は不明で、これ以上はchezmoiのソースとかを見ないとわからなさそうです。

とりあえず、目的は達成されたので、これで運用してみます。
これ以上はタイトルとずれすぎるので、続きがあれば別記事で書きます。
【Java】Math.randomを使わずに手軽にサイコロを作りたい【Collections】

<h1>サイコロを作りたい</h1>
ランダムに1〜6の数字が出るようなプログラムを作ってサイコロを振りたい！<br>
Javaでサイコロを作る、と言われたら、皆さんは何を思い浮かべますか？

<h1>解答</h1>
リファレンス：<a href="https://docs.oracle.com/javase/jp/8/docs/api/java/lang/Math.html#random--">Math.random</a>　<br>
通常、Math.random()クラスを用いて以下のような形で記述すると思います。<br>
これはおそらく一番一般的な方法で、Javaを勉強する時に練習問題等で解いた方も多いのではないでしょうか。

```Java:Main.java
public class Main {
    public static void main(String[] args) {
        int dice_num = (int)( Math.random() * 6 + 1 );
        System.out.println ( "サイコロ振ったら" + dice_num + "が出た" );
    }
}
```
でもこれ、勉強してた時は覚えてたけどMath.random()の書き方を毎回忘れてしまう。。

<h1>Math.random()を使わずにどう書くか</h1>
僕はListを使ってサイコロを振るのが直感的にも分かりやすくて好きです。

```Java:Math.random()を使わない
import java.util.*;

public class Main {
    public static void main(String[] args) {
        List<Integer> dice = new ArrayList<Integer>(6); // サイコロを作る(長さ6のリストを作る)
        for (int i = 0; i < list.size(); i++) {
            list.add(i + 1); // リストに1〜6の数字を入れる
        }
        Collections.shuffle(list); // リストの順番をぐちゃぐちゃにシャッフルして入れ替える
        System.out.println ("サイコロ振ったら" + list.get(0) + "が出た"); // シャッフルしたリストの先頭の1つを取り出す
    }
}
```

こんな風にメソッドに分けてもいいですね。
```Java:メソッドに分ける
import java.util.*;

public class Main {
    public static void main(String[] args) {
        System.out.println ("サイコロ振ったら" + dice(6) + "が出た"); // ※dice()の引数がサイコロの最大値
    }

    // 以下、メイン文から切り分けた部分をメソッド化した
    private int dice(int seed) {
        List<Integer> dice = new ArrayList<Integer>(seed); // サイコロを作る(長さ"seed"のリストを作る)
        for (int i = 0; i < list.size(); i++) {
            list.add(i + 1); // リストに1〜seedの数字を入れる
        }
        Collections.shuffle(list); // リストの順番をぐちゃぐちゃにシャッフルして入れ替える
        return list.get(0); // シャッフルしたリストの先頭の1つを取り出して返却
    }
}
```
こうしておく事で1〜6だけでなく、diceの引数を変えれば1〜10など別の形のサイコロでも簡単に作れるようになりました!

<h1>応用</h1>
数字のサイコロだけじゃなくて、文字列のサイコロや小数のサイコロ、自分が作った型のサイコロも自由に作れますね！

```Java:整数以外のサイコロ
import java.util.*;

public class Main {
    public static void main(String[] args) {
        System.out.println (stringDice()); // "あ"〜"お"のうち、ランダムな１文字を出力
    }

    private String stringDice() {
        List<String> dice = new ArrayList<String>(5); // サイコロを作る(長さ5の文字列リストを作る)
        list.add("あ");
        list.add("い");
        list.add("う");
        list.add("え");
        list.add("お");
        Collections.shuffle(list); // リストの順番をぐちゃぐちゃにシャッフルして入れ替える
        return list.get(0); // シャッフルしたリストの先頭の1つを取り出して返却
    }
}
```

<h1>まとめ</h1>
ここまでリストを利用したサイコロを紹介しましたが、Math.random()を利用しても上記のような動きは実装可能です。<br>
しかし、個人的にはこのリストを使った方法の方が直感的で分かりやすいので気に入っています。<br>
<br>
①サイコロを作って「new ArrayListして」<br>
②サイコロを振って「Collections.shuffleして」<br>
③一番上に出ている目を見る「list.get(0)」<br>
<br>
以上です。
Proxy 配下の WSL 上 Docker のネットワーク設定

## Proxy 配下の WSL 上の Docker、ネットワーク設定でいろいろハマったので記録しておく
- 利用しているディストリビューションは WSL2 で Debian Sid
- Windows 上でのプロクシサーバは `proxy.company.local` といったローカルDNS名で解決されている

- 2023-07-13 systemd 有効な WSL2 について追記

#### TL;DR
- [公式ドキュメントを読もう](https://matsuand.github.io/docs.docker.jp.onthefly/network/proxy/)

## WSL そのものの Proxy 設定 (個人設定)
- ~/.bashrc などに以下を入れておく
```bash
export ALL_PROXY="http://ip.ad.re.ss:port"
export http_proxy=$ALL_PROXY
export https_proxy=$ALL_PROXY
export HTTP_PROXY=$ALL_PROXY
export HTTPS_PROXY=$ALL_PROXY
export no_proxy="127.0.0.1,localhost,.company.local"
export NO_PROXY=$no_proxy
```

Windows 本体のプロキシ設定がローカルDNS名だったとしても、WSL側では IP アドレスで設定しておいた方が良さげ

## docker 本体の設定 (標準インストール状態)
- `/etc/docker/daemon.json`
```json
{
  "debug": false,
  "default-address-pools": [
    {
      "base": "172.33.0.0/16",
      "size": 24
    },
    {
      "base": "172.34.0.0/16",
      "size": 24
    }
  ],
  "dns": ["1.1.1.1","8.8.8.8"]
}
```
- ここで DNS が指定されている、ので、docker デーモンはローカルドメインのプロクシサーバを見つけられない
- 環境変数の `HTTP_PROXY` とか見てくれない

## docker の個人設定
- `~/.docker/config.json` に書く
```json
{
	"proxies": {
		"default": {
			"httpProxy": "http://10.255.2.51:8080",
			"httpsProxy": "http://10.255.2.51:8080",
            "noProxy": "selenium,*.company.local,127.0.0.0/8,172.33.0.0/16,172.34.0.0/16"
		}
	}
}
```
- `httpProxy`、`httpsProxy` を書いておくことで、docker 本体がプロクシ経由でイメージを pull したり出来るようになる
- `noProxy` を書いておかないと、`docker-compose` で複数コンテナのネットワークを作ったときにも **プロクシ経由** で接続しようとするのでハマる
- [公式ドキュメント(英文)](https://docs.docker.com/network/proxy/) にちゃんと書いてあるのだった
- onthefly で日本語版を提供してくださっている [matsuand](https://github.com/matsuand/docs.docker.jp.onthefly) さんに感謝!

### で、うまく行っていたんだけどちゃんと動かなくなった…(2022-10-11更新)

- `/etc/default/docker` に、`.bashrc` と同様に、
```
export HTTP_PROXY="http://ip.ad.re.ss:port"
export HTTPS_PROXY="http://ip.ad.re.ss:port"
export no_proxy="127.0.0.1,localhost,.company.local"
```

#### おまけ apt.conf 設定
- プロキシ経由でないとネットに出られない場合、`apt.conf` を作らないと `apt-get` 等でソフトウェアのインストールや更新が行えない

* `/etc/apt.conf`
```conf
Acquire::http::proxy "http:<fqdn>:<port>";
````
- [参考リンク](https://github.com/Microsoft/WSL/issues/1570)

### systemd 有効な WSL2 だと、また動かなくなってしまった

- WSL2 を[更新](https://qiita.com/taoy/items/0938b6097f56962b6fa9) したら、またまた出られなくなってしまいました
- ググったら、[こちらの記事](https://qiita.com/dkoide/items/ca1f4549dc426eaf3735) がヒットしたので、その通り、`/etc/systemd/system/docker.service.d/override.conf` を書いて解決
VSCodeによるMarkdown作成準備

# VSCodeによるMarkdown作成準備

[1.概要](#概要)
[2.参考記事](#参考記事)
[3.利用VSCodeプラグイン](#VSCodeプラグイン)
    [プラグインのインストール](#プラグインのインストール)
[4.準備](#準備)


## 概要
自身の備忘録もかねて、VSCodeでのMarkdown作成方法を記事にしました。

## 参考記事
こちらの記事を参考に作成しました。
・[VisualStudioCodeでMarkdownを書く際に入れておきたい便利な拡張機能5選](https://qiita.com/sola-msr/items/cfe448db958da3d08863)
・[Markdown記法 チートシート](https://qiita.com/Qiita/items/c686397e4a0f4f11683d#links---%E3%83%AA%E3%83%B3%E3%82%AF)

## VSCodeプラグイン
・Markdown All in One
・Markdown PDF
・Excel to Markdown table
・Copy Markdown as HTML
概ね[@sola-msr](https://qiita.com/sola-msr)さんの参考記事
[VisualStudioCodeでMarkdownを書く際に入れておきたい便利な拡張機能5選](https://qiita.com/sola-msr/items/cfe448db958da3d08863)で
紹介されているプラグインです。

###### プラグインのインストール
VSCodeを開き、左サイドメニューの「拡張機能アイコン」(画像赤枠部分)を
クリック、もしくは「Ctrl+Shift+X」キーで拡張機能を開きます。
![2022-08-23_08h50_15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/346817/366524de-3ca2-7933-8de3-e185e43c148d.png)
サイドメニューに拡張機能メニューが表示されるので、
検索ウィンドウに各プラグインの名前を入力し、
「インストール」アイコンをクリックしてインストールしていきます。
![2022-08-23_09h04_16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/346817/ced47acf-b89f-84b5-360f-3152acd3a63a.png)

## 準備
全てのプラグインが準備できたら、Markdownファイルを
作成したいディレクトリに「ReadMe.md」等の好きなタイトルの
Markdownファイルを作成します。

Markdownファイル作成後はMarkdownファイルを開き
「Ctrl+K」→VでMarkdownファイルのプレビュー表示ができます。

これでプレビューを確認しながら、VSCode上で確認しながら
Markdownファイルの記述が行えます。

[Markdown記法 チートシート](https://qiita.com/Qiita/items/c686397e4a0f4f11683d#links---%E3%83%AA%E3%83%B3%E3%82%AF)の記法に従ってMarkdownを記述してください。
【クエリビルダ：拡張表現】IsLike文を使ってみる

今回は、[Sharperlight](https://sharperlight.jp/)の数ある拡張表現関数の中から、**IsLike**文を使ってみます。
[Sharperlight](https://sharperlight.jp/)アプリケーションメニューから`クエリビルダ`を起動します。
このようなカスタムデータセットを準備します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/8400cfbb-bd6c-5ced-452f-b7299b550304.png)
プレビュー結果は、こんな感じ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/a985ead6-5268-439c-94a2-c5682a457e8e.png)
では、早速**IsLike**文を拡張表現として追加してみます。
出力領域の右クリックから**拡張表現を追加**を選択します。
関数一覧から**IsLike**文を探し、ダブルクリックでエディタ領域に転送します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/7ef02539-1080-9cc7-f907-3978cc83459b.png)
そしてこのように加工します。コードの値に`A3%`が含まれていれば**見つかった**、そうでなければ**見つからなかった**を表示します。
```
IIF( IsLike("A3%",{%コード}),"見つかった","見つからなかった")
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/6b3ab1b8-cf39-b5c5-c927-16ff7760125c.png)
では、プレビューで実行！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/f4d6ef49-8ddc-7fef-c7fe-4485bd4b3d70.png)
いかがでしたか？使い道はたくさんあると思います。

では、失礼します。
[Ruby] rescueの中でreturnするとちゃんと関数からreturnしてくれる

本題の通り、rescueの中でreturnするとちゃんと関数からreturnしてくれる。
期待通りで安心した。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534442/a88a42b0-8e72-1ac5-5462-7f69fc60c5ec.png)
class内のdelattr(self,'xxxx')では自身のプロパティを消してくれない罠

今回は軽い発見があったので、備忘録として書き込みます。

以下のコードを見ていて気づかなかったのだが、
このdelattrでは、プロパティは消えてくれない。

```python
class Hoge(object):
    
    huga = 'hugahuga'

    def del_propaty(self):
        delattr(self, 'huga')

>>> hoge = Hoge()
>>> print(getattr(hoge,'huga'))
hugahuga
>>> hoge.del_propaty()

Traceback (most recent call last):
  File "/usr/lib/python3.9/code.py", line 90, in runcode
    exec(code, self.locals)
  File "<input>", line 1, in <module>
  File "<input>", line 5, in del_propaty
AttributeError: huga

>>> print(getattr(hoge,'huga'))
hugahuga
```


https://stackoverflow.com/questions/25054729/delattr-on-class-instance-produces-unexpected-attributeerror


このstockoverflowで確認すると、以下のように`self.__class__`としないといけないようです。
↓以下修正したコード


```python
class Hoge(object):
    
    huga = 'hugahuga'

    def del_propaty(self):
        delattr(self.__class__, 'huga')
>>> hoge = Hoge()
>>> print(getattr(hoge,'huga'))
hugahuga
>>> hoge.del_propaty()
# エラー出ず、getattrでも取れなくなっていました。
>>> print(getattr(hoge,'huga'))
Traceback (most recent call last):
  File "/usr/lib/python3.9/code.py", line 90, in runcode
    exec(code, self.locals)
  File "<input>", line 1, in <module>
AttributeError: 'Hoge' object has no attribute 'huga'

```

以上です。
小さい発見ですが、またちょっとpythonを知れたそんな気分でした。
クラウドネットワークを学ぶ③ サービスゲートウェイについて

## はじめに
OracleCloud勉強中の筆者が、特に理解しづらいと感じているNetworkまわりの話を平易に読み解いていきます。
今回はサービスゲートウェイについて。

## 概要
サービスゲートウェイを使用することで、VCNはインターネットに公開することなく特定のOracleサービスにアクセスできます。

## 説明
例として、別VCNに含まれるインスタンスとストレージを接続します。
異なるVCNのOracleサービスを接続できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727269/85069606-2778-3e3f-403f-95fdfd7a10d0.png)

## 補足
サービスゲートウェイはリージョナルなので、同一リージョン内で有効です。

## 参考ページ
・サービスゲートウェイについて
https://docs.oracle.com/ja-jp/iaas/Content/Network/Tasks/servicegateway.htm
・VCNについて
https://docs.oracle.com/ja-jp/iaas/Content/Network/Tasks/managingVCNs_topic-Overview_of_VCNs_and_Subnets.htm

## 最後に
今回はインターネットに公開することなくOracleサービスを接続できる
「サービスゲートウェイ」についてお伝えしました。
次回は、「VCNピアリング」についての投稿を予定しています。
過去の自分のコードを修正してみる - PHP カレンダー編①

# これは何？
PHP処女作のコードの一部を、ある程度PHPに触れた今の私がツッコミ入れていく記事です。
PHPで4か月分×3段の年間カレンダーを作った時のコードの抜粋です
何回かに分けて投稿します…~~私が自分のコード読むの疲れるので~~

# ①条件に合わせてテーブルにあてるスタイルを変えたかった


```php

<?php
// $t…その段のなかでいくつ目の月なのか的な変数だと思う[後付けコメント]
if ($t == 0) {
  print "<table border='0' width='100%' align='center' class='calender_gyou'>\n<tr>\n<td>\n<div style='float:left;margin-right:20px;margin-bottom:8px;'>";
  $t++;
}

```

は？
## ①-1 絶対わざわざprintしなくていい

```php

<?php
if ($t == 0) {
?>
  <table border='0' width='100%' align='center' class='calender_gyou'>\n<tr>\n<td>\n<div style='float:left;margin-right:20px;margin-bottom:8px;'>
<?php
  $t++;
}

```

当時はこんな書き方できるって知りませんでした…
[リファレンスのめっちゃ最初](https://www.php.net/manual/ja/language.basic-syntax.phpmode.php)に書いてあるのにね

## ①-2 \n要らなくないか

```php

<?php
if ($t == 0) {
?>
  <table border='0' width='100%' align='center' class='calender_gyou'>
    <tr>
      <td>
        <div style='float:left;margin-right:20px;margin-bottom:8px;'>
<?php
  $t++;
}

```

なんで\n要ると思ってたんだこれ
さすがにこの時の思考回路は覚えてない

## border要素とかstyle要素使うくらいならCSSファイルに書こうぜ

```php

<?php
if ($t == 0) {
?>
  <table class="calender_gyou first-table">
    <tr>
      <td>
        <div class="div-of-first-table">
<?php
  $t++;
}

```

```css

.first-table {
  border-style: none;
  width:        100%;
  text-align:   center; 
}
.div-of-first-table {
   float:       left;
   margin-right:20px;
   margin-bottom:8px;
}

```

このコード書いていた時点でborder要素はそもそも廃止されています
VSCodeでも赤文字だったのになんでそのまま通したんだろうね

# なんでこんなことになったのか
- 当時参考にしたサイトの各種バージョンが古かったのを全く確認していなかった
- リファレンスを読むという発想がなかった
- とりあえず動けばいいや精神だった

いやとりあえず動くものを作るのは大事だけどもこれは…
自分で見ててめまいがしました。
まあでもほぼ独学でPHPでカレンダー書いたら割とこうなるのかもしれない…ならないか？

突っ込み入れれるようになっただけ成長したと取ることはできるわね
気力があれば続きます
規約などが更新された時に確認をして自動遷移する

## 規約などが更新された時に確認をして自動遷移する

よくある「規約が更新されましたので、ご確認ください。」をPHP内で実現したかったので。

### 必要なもの

- 新規規約開始日は9月1日
- DBには同意日をDATE TIMEで保管済み
- DBから$result["agrDate"]で同意日を取得済み

### コードの骨子

```php:top.php
$new_confirm_date = date("Y-m-d H:i:s", strtotime('2022-08-31 09:00:00'));//前の日にしている
$agree_date = date("Y-m-d H:i:s", strtotime($result['agrDate']));

	//規約の同意日を確認
	if($new_confirm_date >= $agree_date){
		/*規約更新ページへ移動する*/
		$doui_alert = "<script type='text/javascript'>alert('規約が更新されましたので、ご確認ください。');location.href = 'confirm.php';</script>";
		echo $doui_alert;
		
	}
```

以上です。
このalert方式だとページ遷移が多くなるので、できればBootStrapでポップアップ出して、Ajaxで非同期通信をしたかったのですが急ぎの実装だったので。
cscの作法 その266

# 概要
cscの作法、調べてみた。
unvell.ReoGrid.dll使って、みた。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/da42592b-d17e-6173-b6ad-1404eac5a8c6.png)

# コンパイル手順

```

>set PATH=C:\Windows\Microsoft.NET\Framework\v4.0.30319;%PATH%

>csc reo0.cs /r:unvell.ReoGrid.dll


```

# サンプルコード

```
using System;
using System.Windows.Forms;
using System.Drawing;
using unvell.ReoGrid;

class form1: Form {
	ReoGridControl grid;
	form1() {
		Text = "ReoGrid";
		ClientSize = new Size(800, 500);
		grid = new ReoGridControl() {
			Dock = DockStyle.Fill,
		};
		this.Controls.Add(grid);
	}
	[STAThread]
	public static void Main() {
		Application.Run(new form1());
	}
}

```


以上。
Gitで過去すべてのコミットのAuthorとCommitterを書き換える

# 状況

GitHubにリポジトリを公開するにあたって、これまで`~/.git/config`で指定していた`user.name`と`user.email`が使えなくなりました。
今後はプロジェクト内に`.git/config`を作成することで対応できますが、これまでのコミットのAuthorとCommitterをすべて書き換える必要が出てきました。

# `filter-branch`コマンドで一括変更する

以下のコマンドで過去のコミットのAuthorとCommitter情報を書き換えます。
> 注意: `filter-branch`は過去のコミットを書き換えてしまうので、作業前にリポジトリのバックアップをとっておくことを推奨します！

```shell
$ git filter-branch --env-filter "GIT_AUTHOR_NAME='NewAuthor';GIT_COMMITTER_NAME='NewCommitter';GIT_AUTHOR_EMAIL='newauthor@example.com';GIT_COMMITTER_EMAIL='newcommitter@example.com'" --all
```

`git log --pretty=fuller`で確認します。

```shell
$ git log --pretty=fuller 
commit e8c720d29450ba08fe686220dbcee09363911e5f (HEAD -> master) 
Author:     NewAuthor <newauthor28@example.com>
AuthorDate: Sun Aug 9 10:49:13 2022 +0900
Commit:     NewCommitter <newcommitter@example.com>
CommitDate: Sat Aug 20 10:43:04 2022 +0900
(省略)
```

これで完了です！

## 補足: AuthorとCommitterの違いについて

今回`git filter-branch`コマンドについて調べているときに気になったのが、AuthorとCommitterの違いです。
[Stack Overflow](https://stackoverflow.com/questions/18750808/difference-between-author-and-committer-in-git)の回答によると

- Author: オリジナルのコードを書いた人
- Committer: Authorの作業を適用(コミット)した人

とのことです。
IDEからファイルやソースコードをGitHubで開く

# IDEからGitHub方法

## VSCodeの場合 (例)

1. [Open in GitHub](https://github.com/fabiospampinato/vscode-open-in-github)をインストールする![スクリーンショット 2022-08-23 9.38.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/637360/3ce3c724-87f1-a25c-c297-82ef7b103825.png)

1. GitHubで表示したいファイルを開く
1. コマンドパレット(`⌘`+`⇧`+`P`)で`Open in GitHub`と入力すると選択肢が表示される![スクリーンショット 2022-08-23 9.41.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/637360/05ec74fa-e3d0-695d-308a-9a6371499bd9.png)

1. `File`を選んでEnterするとGitHubのリモートリポジトリの該当箇所へのURLがブラウザで開かれる
1. ↓の感じでソースコードの行を選択した状態で実行するとGitHubの表示も選択行がハイライトされた状態のURLが開く![スクリーンショット 2022-08-23 9.44.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/637360/101701f6-2a88-49f1-5374-8d93857b3970.png)

## IntelliJの場合

1. `Preferences`の`Keymap`を開く![スクリーンショット 2022-08-23 9.45.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/637360/ceea3317-cb85-dc19-d82c-e432194c3cd3.png)
1. `Open on GitHub`と検索し、該当するキーマップを確認。キーマップがなければ、自分で設定。![スクリーンショット 2022-08-23 9.46.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/637360/84f187d0-ac6c-9aeb-7566-e9931276234b.png)
1. VSCodeと同様にファイルやソースコードを選択してキーマップのショートカットキーを押下するとGitHubのリモートリポジトリで表示される
【Dart・Flutter】数字に符号をつけたい（+とか-とかカンマとか）

## 概要
DartのintlライブラリのNumberFormat classで若干ハマったので備忘録

## やりたかったこと
数値に符号をつけたかった（+とか-とかカンマとか）

``` 
// 例
+5,000
-5,000
```

## やり方

### 導入
今回はFlutterアプリへの導入なので
```
flutter pub add intl
```
### まずはカンマをつける。
```dart:main.dart
import "package:intl/intl.dart";

void main() {

   final String format = "#,##0";
   final String formatDecimals = "#,##0.00";
   
   print("result: " + NumberFormat(format).format(5000)); // result: 5,000
   print("result: " + NumberFormat(formatDecimals).format(5000)); // result: 5,000.0
}
```
これは簡単

### + または - をつける

```dart:main.dart
import "package:intl/intl.dart";

void main() {

   final String format = '+#,##0;-#,##0';
   
   print("result: " + NumberFormat(format).format(5000)); // result: +5,000
   print("result: " + NumberFormat(format).format(-5000)); // result: -5,000
}
```

これはformatの指定の仕方がわからずしばらくハマりました。

## 注意点
Stringでもできるらしいんですが、上記のやり方だと数値の型（num、int、double）以外でやるとエラーになるのでご注意ください。
私の場合は、値の引数をジェネリクスにした関数を作成して、Stringをnumにparseする形で対応しました。

```dart:numberFormat.dart
String numberFormat<T>(T value, int numberOfDecimals, bool sign) {
  final String format = () {
    var result = "#,##0";
    if (1 <= numberOfDecimals) {
      result += "." + ("0" * numberOfDecimals);
    }
    if (sign) {
      return '+${result};-${result}';
    }
    return result;
  }();

  final num target = () {
    if (T != int && T != double) {
      final String stringTarget = value as String;
      return num.parse(stringTarget);
    }
    return value as num;
  }();

  return NumberFormat(format).format(target);
}
```
【海外イベント紹介】 Bet You Didn’t Think Your Browser Could do That by Monica Dinculescu

今回は、「Jamstackカンファレンス 2018」で行われたプレゼンテーションから、「Bet You Didn’t Think Your Browser Could do That」の内容をご紹介します:loudspeaker:

10年以上の歴史を持つ「Jamstackカンファレンス」は、Jamstackの生みの親であるクラウドコンピューティング企業「Netlify」が主催。世界中の開発者が集い、Jamstackをコンセプトとした最新のWebサイトの設計、開発などについて話し合います。プレゼンテーションの言語は英語ですが、本ブログでは日本語でご紹介します。

>目次
>開発フローのボトルネック
>複雑さの問題
>サーバーが必要な理由とは？
>　① ホスティング
>　② データベース
>　③ インタラクト
>ブラウザでの動的処理の現在
>まとめ

今回の講演者は、Magentaという機械学習と音楽・アートを組み合わせたプラットフォームの開発者Monica Dinculescu氏。

プログラマに求められる「ずぼら」さ、これが、Jamstackの開発にどう活きているかが語られています。

では、さっそく見ていきましょう。

## 開発フローのボトルネック
![画像6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242415/c742e2a8-5bb9-c10f-4d1a-79debd49f63e.png)

上の図はMonica氏が開発したサービスが、ユーザーに届くまでを図に表したものです。

ピンクで囲まれたpixelsは、彼女独特の表現で、自分が直接開発する部分を表します。

黄色で囲まれた部分は、サーバー上で行われる工程を表します。

pixelsの開発は、ものによっては**1日**で完成することも。

しかし黄色の部分、サーバー上で行われる工程に問題があると、修正したり維持したりするのに、なんと**4ヶ月以上**かかることもあります。

では、サーバー上で行われる工程に問題が生じる原因の一つはなんでしょうか？

## 複雑さの問題
![画像7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242415/19e388d1-6cbc-3e17-cf7f-57ee1b3931bf.png)

サーバー上で行われる工程に問題が生じる原因の一つ。

それは、**複雑さ**だとMonica氏は強調します。

複雑さの一例を挙げると・・・

JavaScriptのライブラリなどを使用する際、実際には使用しない機能でも「とりあえず」ライブラリをインポートしておくということがあります。

結果、バージョン違いのライブラリが混在することになります。すると、どうなるでしょうか？

ライブラリがバージョン違いによるコンフリクトを起こし、エラーが多発するのです。

これはほんの一例にすぎませんが、このようにサーバー関連のエラーまで一人の開発者が見ようとすると・・・

求められるスキルが広範囲に及びます。コストもかかります。

実際のところ、1人が全方位でエキスパートになれるわけもありません。

それでもなお、「静的サイトではだめだ！」という思い込みが開発者に刷り込まれ、サーバー関連の作業に重きが置かれているのはなぜでしょうか？

## サーバーが必要な理由とは？

自前でサーバーが必要であるとの主張に際してよく挙げられる3つの理由は・・・

### ① ホスティング
![画像8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242415/07de33b4-597b-145c-1844-70a24b1d6fdb.png)

【理由その①】

作ったサービスをホスティングするのにサーバーが必要であると考えられている。

【実際は】

上記の画像にあるようなクラウドのサービスで代替できます。

自分でサーバーをセットアップし、OSやパッチなどの管理をし、ネットワークをモニタリングする・・・このコストを本来の開発業務に振り分けることのほうが遥かに有益です！

### ② データベース

【理由その②】

データベースが必要であると考えられている。

【実際は】

データベースもクラウドサービスを利用できます！

SQLでもNoSQLでも、ローカルストレージすら、クラウドサービスの利用が可能です。

### ③ インタラクト

【理由その③】

顧客にフォームを入力してもらう、ユーザー認証を行う。

これにはサーバーが必須であると考えられている。

【実際は】

それらもサードパーティが提供するサービスで解決できます！

## ブラウザでの動的処理の現在

ブラウザとJavaScriptのライブラリを呼び出すだけでできることの幅は大きく広がっています。プレゼンの中で４つのデモが紹介されました。

ここではその中の１つをご紹介します！

**Tensorflow**という有名なPythonの機会自動学習のライブラリです。

JavaScriptのバージョンtensorflow.jsを活用した事例も増えています。

これらはブラウザ上で、ローカルマシンで実行したときと同程度のスピードで処理ができる高速化を実現しています。
![画像9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242415/9d662039-c37b-e478-e6c0-d963bf5dca1d.png)

## まとめ

「ずぼらであれ」というのは基本的な理念としてプログラマーに伝えられるものです。

つまり、「本来行う必要のなかった業務」、「不必要に繰り返される作業」、これらの面倒なことは繰り返さないという理念です。

その理念に基づいて様々なライブラリが進化してきました。

開発工程はより複雑化し、習得すべき知識が増加。 

求めた「ずぼら」からどんどんかけ離れていく結果となっていることは皮肉なことです。

「ずぼら」に立ち戻るため、新世代の彼女にとって自然な着地点だった**Jamstack**。

これからますます、期待できそうです！！

最後まで読んでくださり、ありがとうございました:bow_tone1:


株式会社ヒューマンサイエンスは、他社にはない、「ドキュメント制作のノウハウ」×「最新のWeb開発技術（Jamstack）」を用いて、Webコンテンツとプラットフォームのソリューションをご提供します。

関心がある方は、ぜひこちらまでお問い合わせください！
**株式会社ヒューマンサイエンス
https://www.science.co.jp/document/jamstack.html**

本文書の出典元：https://www.youtube.com/watch?v=f5QYSdpMs6Y
IBM RPAを使い、Webブラウザ操作を自動化してみる

## はじめに
RPAとはRobotic Process Automationのことで、人間が反復的に行っている業務をボットによって自動化します。RPAで自動化できる作業は、デスクトップアプリの操作やExcelでの操作、OCRを用いたドキュメントの読み取りなど様々です。

この記事では「IBM RPA」を使い、Webアプリケーションでの操作に関する4つの作業の自動化を行ってみようと思います。

## Webブラウザ操作1：Webアプリケーションを立ち上げる
「ブラウザーの開始」コマンドを使用して、Webアプリケーションを立ち上げます。
「ブラウザー・タイプ」から、Google Chrome, Internet Explorer, Microsoft Edge, MozilaFirefoxのどれかを選択することで、立ち上げるWebアプリケーションを指定することができます。
ただし、事前にWebアプリケーションをインストールしておく必要があります。
![RPA コマンド「ブラウザーの開始」2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2737895/2f23479a-2761-bead-cc64-6fef57b5c9c5.jpeg)

「ブラウザーの開始」コマンドを入れると、自動的に「ブラウザーを閉じる」コマンドが出てきます。このコマンドで、開始したブラウザーを閉じることができます。
「ブラウザーを開いたままにする」を有効にすると、IBM RPA Studioによるブラウザー操作は終了しますが、ブラウザーは開いたままにすることができます。テスト時に有効にすると、きちんと動作したかどうかを確認することができます。
![RPA　コマンド「ブラウザーを閉じる」.2jpg.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2737895/9fd6112a-afac-4e55-5950-0a2e74fae3be.jpeg)

## Webブラウザ操作2：Webページを開く
「移動」コマンドを使用して、Webページを開きます。
「URL」に、"file:///(htmlファイルの絶対パス)"と指定すると、ローカルにあるWebページも開くことができます。
![RPA　コマンド「移動」2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2737895/c4b8def6-b7e5-99e1-e74e-e7672be24bcb.jpeg)

## Webブラウザ操作3：Webページ内のテキストボックスに文字を入力する
「値をフィールドに設定」コマンドを使用して、Webページ内のテキストボックスに文字を入力します。
「値」に入力したい文字を指定します。直接入力したい文字を入力することも、変数を指定することで変数に格納されている値を入力することもできます。
どこに入力するかを指定するためには、id属性やname属性、CSSセレクターなどを使用します。(例ではCSSを使用して指定しています)
Google ChromeでのCSSの取得方法については「[こちら](https://qiita.com/y175/items/8cb00d84121431fa0d7d)」をご参照ください。
![RPA コマンド「値をフィールドに設定」2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2737895/0273afe5-f287-51ba-b9ba-82f6c9aee528.jpeg)

## Webブラウザ操作4：Webページ内をクリックする
「Webページをクリック」コマンドを使用して、Webページ内のボタンをクリックします。
「値をフィールドに設定」コマンドと同様に、どのボタンをクリックするかをid属性やname属性、CSSなどを使用して指定します。(例ではCSSを使用して指定しています)
ダブルクリックが必要なボタンの場合は、「ダブルクリック」を有効にします。
![RPA コマンド「Webページをクリック」2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2737895/15c961db-f45d-6438-c0f1-9e3593789878.jpeg)

## おわりに
基本的な4つのWebブラウザ操作をやってみました。
ここで紹介しきれなかったコマンドのオプション項目については、コマンド設定画面にある「？」を押していただくとマニュアルに飛ぶので、そこから確認してみてください。
![RPA　コマンド「ブラウザーを閉じる」.3jpg.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2737895/f42e85a8-c193-c697-7dd9-2ba043f4f0a7.jpeg)


ご覧いただきありがとうございました。
直近の開発案件は、・・・・・

# 概要
今、社会問題になっていることは、幼児の行方不明である。
今、そこにいたかと思うと、いなくなっているニュースが多い。
そのため、幼児にはGPSを埋め込むようなことは法律上できないか。
人権問題があるのか。特別な法律が必要ではないか。誘拐事件も多いので、早急な対策が必要と思う。
# GPSの埋め込み
動物にはよくあることだが、人間には問題もあるか。
ひとつ、気になることは、埋め込んだ場合、電池の永続性はどうなのか。
時間が経つと電池容量はなくなるのか。それとも、充電機能があるのか。
例えば、体温から充電できるとか。今では、ゼーベック効果を利用した「温度差発電技術」という技術があるそうです。その製品もすでに販売されています。


また、GPSは電波が届く範囲内でなければ意味がないですが、今は、三つの衛星を使って、数メートル以内のものまで特定できるようなので、よほどのところでなければ届くと思います。



# ペースメーカ
ペースメーカを体に入れている話はよく聴きます。
GPSも検討できないでしょうか。最近は、高齢者の行方不明も多いです。
# 監視カメラ
今では、街のいたるところに監視カメラが設置されています。信号機や電信柱、ビルの屋上など。
これらは、写され人の許可がなくても録画されています。いずれGPSもそうなるのではないでしょうか。
# 身に着けているものにGPSを
靴や、着ている服にGPSを埋め込むことはできると思いますが、どうなのでしょうか。
# 街中の店舗探しのGPS
今の時代、スマホで行きたい店を探すことは当たり前です。
これもGPSがあるからです。大変便利な時代になったものです。
# 老人の徘徊
これも社会問題になっています。探すのが大変なため、GPSであれば、すぐに見つかると思います。日々、夕方になると市役所の放送が聴こえてきます。いくつぐらいの老人が行方不明ですと。
# ペットが行方不明
先日も、飼っているへびが逃げ出して大騒ぎになったニュースがありました。幸い、天井裏にいたとのことですが、これもGPSがついていればと思います。
# 産院での赤ちゃんの取り違え防止に
産院では昔からよく聴く事件です。これも不幸なことです。
# 追跡アプリ
いくつかの追跡アプリがありますが、スマホを持ち歩いている人をGPSを使って探すようです。
今の時代、事故で、人を探すことがよくあります。先日の遊覧船の沈没事故で、山でのキャンプで行方不明、用水路事故、・・・・。こういう時に、追跡する手段があればと思います。親にとっては、小学校に通う子供が学校から帰宅するまで、心配だと思います。どこでどう、寄り道したか。
# 不明者の個人特定
GPSで所在がわかり、当人にたどり着ければたとえ事件性があったとしても解決が早まると思います。位置情報と個人情報の連携には問題があるとしてもDNAで個人が特定できるため、連携までは不要かと思います。









# 様々な問題があると思うので、徐々に補足してゆきます。



# あとがき
まずは、これは本当に緊急を要する社会問題なので、多くの人に考えてほしいです。子供の行方不明ほど、親にとって悲しい事件はありません。
GPSで位置が特定できれば、大掛かりな捜索を何日も続けなくても済むかもしれません。技術的な問題はクリアされているようなので、あとは、法律の問題をクリアするだけだと思います。政治家、法律家の諸先生方にお願いします。
HTML

１．はじめに
　本ブログではUdemyのWeb Developer Bootcampを受講した中で、
　学習した内容のアウトプットを兼ねてWeb開発の手法を記載していく。
　
２．概要
　Webページを構成するコードの１つであるHTMLについて前回「画面の中に何があるか」がHTMLだと記載したが、
　実際にどのような構成になっているのかを記載する。
　
３．本文
・HTMLとは
　他のプログラミング言語のように処理やフローを書く言語ではなく、
　Webページを構成する文章に対して「ここは見出し」「ここは本文」など文章の構造を示すタグを記述する言語である。（これをマークアップ言語と言い、HTMLはHyperTextMarkupLanguageの略称）

　例：
　HTMLの記述がないデータをブラウザで表示
　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2780477/a5381e86-0b6a-28c3-3d88-1e02c475db85.png)
　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2780477/6472e426-e0f4-0f0b-84b6-16dc9351a071.png)


　同じ内容にHTMLのタグを記述して表示
　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2780477/d0a9d55c-fc3e-0b79-11ca-766c48ad91d2.png)
　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2780477/10c2d1ad-8886-7422-f21a-b117d196287c.png)

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
・HTMLスケルトン
　HTMLのページ全体の基本的な構造は以下のようになっており、一番上に<!DOCTYPE HTML>
　その下に<HTML>タグがあり、その内部に<Head><Body>タグがある。
　※実際のページ内容は<Head>タグ内部などに書き込む。
　この基本的な構造をHTMLスケルトン（基本スケルトン）と呼ぶ。

・代表的な要素（タグ）
　上の例にてタイトルを見出し1（h1要素、h1タグ）、本文を見出し2（h2要素、h2タグ）、○○○○を段落（p要素、pタグ）として記述したが
　そのほかにもHTMLで記述できる要素（タグ）は数多く存在する。
　以下にその一部と機能を紹介する。

pタグ：
　段落要素。ｐタグで囲われた範囲を1つの段落として認識することができる。
h1~h6タグ：
　見出し要素。見出しのレベルに応じて1～6を使い分ける。h1はページ内に1つのみ使用する。
divタグ：
　汎用コンテンツ区分要素。文章を何らかの形で区分する際の汎用要素。divタグで囲われた範囲を対象にCSSでスタイルの設定などが可能。
olタグ・ulタグ・liタグ：
　リスト要素。ol（OrderedList）は順序付きリスト、ul(UnorderedList）は順序無しリストの開始と終了を意味する。リスト内の各項目はliタグを複数使用することで記述できる。
aタグ：
　アンカー要素。href属性にリンク先を記述することでWebページ上にリンクを作成する。
imgタグ：
　画像埋め込み要素。src属性に画像の保存場所やURL、alt属性に代替テキストを記述できる。終了タグがない。

・タグの使い方
　例の見出しや段落を表現するためにh1・h2タグやpタグと終了タグで文章を囲んでいたが、
　終了部を示す必要のない一部のタグ（imgタグなど）では開始タグのみで使用するものもある。
　また、タグで囲うだけでなくタグの中に属性という値を設定することで見た目や機能を変化させられるタグも存在する。


・セマンティックHTML
　一般的なタグとしてdivタグを紹介したが、
　HTMLを書くときにはdivタグばかりになってしまうと範囲が区切れていることはわかっても
　その範囲にどのような意味があるのかについてはHTMLから読み取ることができない。
　セマンティックHTMLはdivタグではなく意味を持った区分のタグを使用することで
　その範囲に何が書かれているかをHTMLから読み取ることができる。
　セマンティック要素のタグはおよそ100種類あり、以下にその一部を紹介する。

asrticleタグ：
　記事コンテンツ要素。ユーザーのコメントや引用部、天気予報、ブログや新聞の記事が該当する。
asideタグ：
　余談要素。本文と間接的な関係しかない部分。サイドバーや注釈部が該当する。
navタグ：
　ナビゲーションセクション要素。リンクや目次、索引など他部や他ページとのリンクが該当する。


　また、セマンティックHTMLを記述することには以下のメリットが挙げられる。
　　-開発者目線での保守性・可読性の向上
　　-ユーザビリティの向上　スクリーンリーダー（読み上げ機能）使用時の利便性向上
　　-解析しやすいHTMLによる検索性の向上　

　人によってどの要素に含めるかの認識が異なるため統一した概念を持つことは難しいが、
　divタグとは異なる意味を持ったタグを記述することで上記のようなメリットがあるため積極的に使用していきたい。


４．感想
　開発業務で使用していた言語と異なりロジックやフローがないので内容としては理解しやすかったが、タグの種類が多くすぐに使い分けることは難しいと感じた。
WEB開発基礎 

１．はじめに
　本ブログではUdemyのWeb Developer Bootcampを受講した中で、
　学習した内容のアウトプットを兼ねてWeb開発の手法を記載していく。
　
２．概要
　普段ブラウザを使用して情報を検索したり、動画を見たりゲームをしたりとWebに触れる機会はあると思う。
　「Webを見る」「インターネットをする」などと言われているが処理上はどのような動きをしているのか、
　「WEBサーバー」など聞いたことはあるが意味や役割は何か、について記載する。
　
３．本文
・Webサーバとクライアント
　何かしらのサービスを提供する側と受ける側のことをそれぞれ「サーバ」「クライアント」と言う。
　Webページの表示の場合、Webページの情報が保管されていて利用者やブラウザからのアクセスで
　Webページの情報を提供する側を「Webサーバ」と呼ぶ。
　反対に利用者やブラウザ側が「クライアント」である。
　Webサイトの表示に関わらずDBサーバとそこにアクセスする端末、APサーバとアプリケーションを利用する端末なども
　サーバとクライアントの関係であるが、今回はWebサーバとそれを表示する端末（表示するブラウザ）について説明していく。

・リクエストとレスポンス（HTTPリクエストとHTTPレスポンス）
　ブラウザ上からWebページを見るための操作をすると「URLを入力し、Enterキーを押すと、画面が表示される」となるが
　実際にはどのような動きになっているのだろうか。
　ブラウザにURLを入力してEnter（リンクをクリックや検索ボタンを押すなども同様）すると指定のWebサーバに「リクエスト」が送信される。
　このリクエストには「Webサーバの場所」「Webサーバの中でどの情報が欲しいか」などの情報が含まれており、
　Webサーバ側はこのリクエストにこたえる形でWebページを構成する情報を返信してくれる。
　この返信を「レスポンス」と呼ぶ。
　
　つまり普段のWebサイト表示やWeb検索における「URLを入力し、Enterキーを押すと、画面が表示される」は
　「URLでリクエスト→Webサーバからレスポンス→レスポンスの内容をブラウザで読み込んで表示」と言い換えらえる。
　※また、このリクエストとレスポンスをWebサーバとやり取りする際にHTTPというプロトコル（データをやり取りする際のルール）
　　を使用して行われるため、それをHTTPリクエスト・HTTPレスポンスと呼ぶ

・リクエスト・レスポンスの内容
　リクエストのには「URLの内容（Webサーバの場所や検索ワード）」「ブラウザの情報（ブラウザの種類やバージョンなど）」が含まれており
　レスポンスの内容は上記内容を元にWebサーバが変身した「Webページを表示するための部品と設計図」となっている。
　実際に今ブラウザに表示されている画面の部品と設計図になっているコードの内容は
　その画面で右クリック→ページのソースを表示をクリックすることで確認できる。（画面はMicrosoftedge）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2780477/84da989f-6175-be24-abe9-7110a8865ba9.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2780477/fd743264-4e7e-a8d7-3e7e-c7a261dbcb5d.png)

　このようなWebページを表示するための部品と設計図であるレスポンスは主に「HTML」「CSS」「JavaScript」という3つの言語で作られている。


・フロントエンドとバックエンド
　前項にてURLでリクエスト→Webサーバからレスポンス→レスポンスの内容をブラウザで読み込んで表示と書いたが、
　少し細かく分類すると
　①ブラウザからのリクエスト
　②リクエストを元に表示するサイトの内容を決定する内部処理
　③内部処理で決定した結果をHTML、CSS、JavaScriptの形にしてレスポンス
　④ブラウザにてHTML、CSS、JavaScriptの内容を人間が見やすい形で表示
　となる。
　この中で①及び④のブラウザ側の処理を「フロントエンド」、②及び③のWebサーバ側の処理を「バックエンド」と呼ぶ。
　
　フロントエンドで使用されるコードは前述のHTML、CSS、JavaScriptにほぼ絞られるが、
　バックエンドで使用されるコードはJava,Python、C、JavaScriptなど多岐にわたる。
　
・HTMLCSSJSとは
　フロントエンド側で使用されているコードは主に「HTML」「CSS」「JavaScript」と記載したが、それぞれの役割について説明する。
　HTML:
　「画面の中に何があるか」をHTMLにて作成する。
　ページ全体の流れや、タイトル・見出し・本文などの区分け、画面に表示されている文字などが書かれている。　
　CSS：
　「画面の中の項目の見た目」をCSSにて作成する。
　ページ内の各項目のサイズ、色、背景色、グラデーションなど綺麗に見せるための設定が書かれている。
　JavaScript：
　「画面の中の動き」をJavaScriptにて作成する。
　カーソルを合わせたらボタンが強調される、時間経過で表示される広告が切り替わる、通知、ブラウザゲームなど
　動きのある部分の設定が書かれている。

・使用している・今後使用する開発環境について
　Web Developer Bootcampの講義内で使用されている以下のブラウザおよびエディターを使用する。
　Webブラウザ：GoogleChrome
　エディター：VisualStudioCode

　上記の2つがなければWeb開発ができないという意味ではなく、
　個人や会社で使用頻度の高いブラウザやエディターであれば開発環境は何を使用しても構わない。
　エディターに関してはテキストエディターでも開発は不可能ではない。
　しかし、どちらも使用率が高く、エディターは補完機能やタグの色付けなど開発を行う上で利便性の高い機能がそろっているため、
　可能であれば使用することをお勧めする。

４．感想
　Webサイトを見るということについて基礎の基礎を理解することができた。
　また、Web Developer Bootcampを進めるにあたって大雑把に1.5ヵ月という目標を立てたがここまでで丸一日経過してしまった。
　到底目標に届かないので理解を疎かにしない程度にスピード感をもって進めていきたい。