OmniAICreator/Qiita-1.07M huggingface dataset:
再帰ファイル変更日更新 touch + find, grep


古い開発環境でよく使う。
ファイルの日付のみ更新したい -> touchコマンド -> 再帰オプションが無い。

#find+touch
リコンパイルしたいけど全クリーンは面倒。諸事情でクリーンできない等の場合に使用。

	find . -name *.c | xargs touch -m

#grep+touch
ヘッダを更新した時、関連するcファイルをリコンパイル対象にする。

	grep -R "test.h" * | awk '$0 = substr($0, 1, index($0,":")-1)' | xargs touch -m
[Python] 幾何 ABC207D

#[ABC207D](https://atcoder.jp/contests/abc207/tasks/abc207_d)

次のような認識に基づく解法が考えられる。

➀ 座標空間における回転
➁ 複素数平面における回転
➂ 辺の長さによる合同

ここでは➀に基づく解法を取る。点集合 $\(X=\{(x_1,y_1),(x_2,y_2),\ldots,(x_k,y_k)\}\)$ を $x$ 軸方向に $q, y$ 軸方向に $r$ 移動させたとき、$X$ の重心、すなわち $(gx,gy)$ も $x$ 軸方向に $q, y$ 軸方向に $r$  移動します。</p>

よって $S, T$ に含まれる各点についてそれぞれ $S$ の重心、$T$ の重心からの相対的な位置関係を求めることで平行移動の影響を無視することができ、故にこれらの位置関係が回転移動のみによって一致するかを判定すればよいです。

判定の際は $(a_1,b_1)$ と対応させる点 $(c_i,d_i)$ を $i=1,2,\ldots,N$ について全探索すればよく、計算量は $O(N^2\log N)$ や $O(N^3)$ となります。$(a_1,b_1)$ が重心と一致する場合の処理には気をつけましょう。

実は、この問題を $O(N \log N)$ 、ソート部分を除いて $O(N)$ で解くこともできます。 ${\bf u_i}=(X_i-gx,Y_i-gy)$ を偏角ソートします。ただし、長さが 0 となったベクトル(高々 1 つ)は削除するものとします。こうしてソートされたものを ${\bf v}$ とします。このとき、同じ偏角をとるベクトルが複数ある場合はその長さの昇順にソートします。


```python:サンプルコード
eps=1e-6 # 10^-6
from math import *
n=int(input())
def f():
  X,Y=[],[]
  for _ in range(n):
    a,b=map(int,input().split())
    X+=[a*n]
    Y+=[b*n]
  gx,gy=sum(X)//n,sum(Y)//n # 重心
  S=[]
  for x,y in zip(X,Y):
    dx,dy=x-gx,y-gy
    S+=[(dx,dy,atan2(dy,dx))] # atan2:arctan(y/x)
  return sorted(S)
S=f()
T=f()
for i in range(n):
  sx0,sy0,st0=S[0]
  txi,tyi,tti=T[i]
  t=tti-st0
  for j in range(n):
    sxj,syj,stj=S[j]
    txj=sxj*cos(t)-syj*sin(t)
    tyj=sxj*sin(t)+syj*cos(t)
    ng=1
    for k in range(n):
      txk,tyk,ttk=T[k]
      if abs(txj-txk)<eps and abs(tyj-tyk)<eps: ng=0
    if ng: break
  else: exit(print('Yes'))
print('No')
```
Rust で多重起動を防ぐ（Windows 版）

こちらの記事にインスパイアされて、Windows だったらどう書くのかなというを残しておきます。

https://qiita.com/blackenedgold/items/3e72eeed7c79c9092b99

GUI アプリなら`EnumWindows`関数でウィンドウタイトルを調べて多重起動を防止してましたが、CUI アプリではどうするのか知りませんでした。どうやら`CreateMutex`という WinAPI を使えば良いようです。


[CreateMutexA function (synchapi.h) - Win32 apps | Microsoft Docs](https://docs.microsoft.com/en-us/windows/win32/api/synchapi/nf-synchapi-createmutexa)

Rust から WinAPI を呼ぶには winapi crate を使用します。

[winapi - crates.io: Rust Package Registry](https://crates.io/crates/winapi)

コードはこのようになるでしょうか。

```toml:Cargo.toml
[package]
name = "multiboot_lock"
version = "0.1.0"
authors = ["benki"]
edition = "2018"

[dependencies.winapi]
version = "0.3"
features = [
    "errhandlingapi",
    "handleapi",
    "minwindef",
    "ntdef",
    "synchapi",
    "winerror",
]
```

```rust:main.rs
use std::ptr;
use std::thread;
use std::time::Duration;
use winapi::{
    shared::{minwindef::TRUE, ntdef::HANDLE, winerror::ERROR_ALREADY_EXISTS},
    um::{
        errhandlingapi::GetLastError,
        handleapi::CloseHandle,
        synchapi::{CreateMutexA, ReleaseMutex},
    },
};

struct Handle(HANDLE);

impl Drop for Handle {
    fn drop(&mut self) {
        if !self.0.is_null() {
            println!("後始末");
            unsafe {
                ReleaseMutex(self.0);
                CloseHandle(self.0);
            }
        }
    }
}

fn main() {
    let handle = unsafe {
        println!("Mutex の生成");
        CreateMutexA(
            ptr::null_mut(),
            TRUE,
            "Mutext Sample\0".as_ptr() as *const i8,
        )
    };
    let _handle = Handle(handle);

    if unsafe { GetLastError() } == ERROR_ALREADY_EXISTS {
        println!("二つ目の起動");
        return;
    }

    thread::sleep(Duration::from_secs(10));
    println!("終了");
}
```

コンパイルして実行してみると排他制御できました。やったぜ。

windows-rs 版も書いておきます。2021/01/02 追記。

```toml:Cargo.toml
[package]
name = "multiboot_lock"
version = "0.1.0"
authors = ["benki"]
edition = "2021"

[dependencies.windows]
version = "0.30"
features = [
    "alloc",
    "Win32_Foundation",
    "Win32_System_Threading",
    "Win32_Foundation",
    "Win32_Security"
]
```
```rust:main.rs
use std::ptr;
use std::thread;
use std::time::Duration;
use windows::{
    core::{Error, Result},
    Win32::{
        Foundation::{CloseHandle, ERROR_ALREADY_EXISTS, HANDLE},
        System::Threading::{CreateMutexW, ReleaseMutex},
    },
};

struct Handle(HANDLE);

impl Drop for Handle {
    fn drop(&mut self) {
        if !self.0.is_invalid() {
            println!("後始末");
            unsafe {
                ReleaseMutex(self.0);
                CloseHandle(self.0);
            }
        }
    }
}

fn main() -> Result<()> {
    println!("Mutext の生成");
    let handle = unsafe { CreateMutexW(ptr::null_mut(), true, "Mutext Sample").ok()? };
    let _handle = Handle(handle);

    if let Some(err) = Error::from_win32().win32_error() {
        if err.eq(&ERROR_ALREADY_EXISTS) {
            println!("二つ目の起動");
            return Ok(());
        }
    }

    thread::sleep(Duration::from_secs(10));

    println!("終了");
    Ok(())
}
```
laravel 任意のフィールドの値が指定したもの以外の時にフィールドの必須を確認する方法

# 目的

- laravelで任意のフィールドの値が指定したもの以外の時に当該フィールドの必須を確認する方法をまとめる

# 方法

- フィールド`check`の値に「false」という文字列以外が格納された時、フィールド`input_str`の値のが必須入力されているかをバリデートしたいときは下記のように記載する。
- 下記はリクエストファイルの`rules()`メソッドの内容のみ抜粋して記載する。

    ```HogeRequest.php
    /**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {
        return [
            'check' => 'required',
            'input_str' => 'required_unless:check,flase',
        ];
    }
    ```

- 任意のフィールドの値が指定したもの以外の時に当該フィールドが必須かどうかをバリデートする時バリデーションルールの頭に`required_unless:フィールド名,指定された値`を記載する。


# 参考文献

- [https://readouble.com/laravel/6.x/ja/validation.html](https://readouble.com/laravel/6.x/ja/validation.html)
Visual Studio 2022 Preview1.1 インストールメモ

# Visual Studio 2022 Preview1.1 インストールメモ

Visual Studio 2022ってどんな風になるのか気になったので、自分の環境に入れることにした。
そのときの備忘録。

## ダウンロードページに異動

 <https://docs.microsoft.com/ja-jp/visualstudio/releases/2022/release-notes-preview>

## Download Professional 2022 Preview Button を押下

<q>Visual Studio をダウンロードいただきありがとうございます</q>ページが表示され、<q>vs_professional__1848432303.1617164538.exe</q>が落ちてきた。

## vs_professional__1848432303.1617164538.exe を実行

いきなり以下のダイヤログボックスが現れる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19974/bf138b31-580b-b9c2-4a40-67b9b7a439de.png)

## <q>マイクロソフト ソフトウェア ライセンス条項</q>を確認

意外なことは書いてなかった。

## <q>続行</q>を選ぶ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19974/83f1e792-3c6a-60b8-39f7-1b2c4ebe17df.png)
この辺はVisual Studio 2019 installerとあまり変わらない。

## <q>ワークロード</q>タブで欲しい機能を選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19974/01a7309d-ddf9-c166-a6f7-5f768d6dfbb2.png)
欲しい機能をチェックする。
私は欲張りなので全部欲しい。

## <q>個別のコンポーネント</q>タブで何が入ってくるか確認

<q>.NET 6 Runtime</q>が入っているので<q>.NET 5</q>や<q>.NET Core</q>は選択されていない模様。<q>.NET Framework 4.8 SDK</q>はまだ入っている。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19974/590695f0-00ab-712c-a2e1-eb9a394a3dcb.png)

最新の<q>Windows 10 SDK</q>が入っている。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19974/7aed7a52-2fa9-58f3-63cc-343f45c8ae2f.png)

<q>CMake</q>は入っている。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19974/d1b3a7e6-9b3a-2d7f-a21c-bc91820ff243.png)

## <q>言語パック</q>タブを確認

英語のみ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19974/6fc00254-77d2-2c17-a8e5-17d96e08549a.png)

## <q>インストールの場所</q>タブを確認

Preview版は独立してインストールされるようになっているらしい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19974/a0367945-3986-ae86-667c-23a86032c0c2.png)


## <q>インストール</q>ボタンを選択

4.32 G byte / 681パッケージ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19974/800e208b-faae-1e38-81dd-e2b99d84194d.png)
10分弱待つ。

## Visual Studio 2022 Previewが起動する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19974/3aa865dc-00ce-39b3-d273-81a38700b7f3.png)
起動時の動作はVisual Studio 2019と変わりませんね。

触ってみてどう変わったかは別記事で書く予定。
ArduinoUNOと温度センサーMCP9701で温度をシリアル出力 (Arduino)


x あまり正確では、ない

目的
秋月で売っている安価なMCP9701(約25円)を使って温度を出力する。

構成
MCP9701-E/TO I-03199

説明
MCP9701は、
0℃の時、400mV
1℃あたり19.5mV
精度は、±4℃
電線が引き出しやすい位置のA0をアナログ入力にする
計算には、容量削減の為に浮動小数点と割り算は、使わない
MCP9700は、ファミリー、オフセット500mV、10mV/1℃ 今回は、使わない

5V 256段階　19.5 1℃　オフセット400mV(+20℃) 8ビットで丁度1単位1℃



```c++



//初期化
void setup()
{

  Serial.begin(9600);

} //setup

//メインループ
void loop()
{

  int s;    //センサーの値  //101
  int n0;  //小数点以上
  int n01; //小数点以下
  int nn[] = { 0,25,50,75}; //温度

  //センサーの値を読み込む
  s = analogRead(A0); // UNO

  //s = 20 << 2; //0 debug
  //s = 40 << 2; //20 debug

  //小数点以上と小数点以下を分ける
  n0  = (s >> 2) - 20;   // 小数点以上
  n01 = nn[s & 0x3];     // 小数点以下

  //温度の小数点以上の表示
  Serial.print(n0);

  //小数点の表示
  Serial.print('.');

  //温度の小数点以下の表示
  Serial.println(n01);

  //1秒の待ち
  delay(1000);

} //loop



```

![adc_9701_uno_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/f360cad5-b925-f978-7cd5-d653d0c99954.jpeg)
MacでHerokuにdeploy ~　GitHubも添えて

やっとMacを買ったのでherokuの勉強をメモ。
先人のQiita記事を参考にざくざく進めます。
アカウント名、アプリ名などは適宜自分の環境のものに読み替えてください。

# アカウントの用意
herokuとgithubのアカウントを用意します。
作成方法は割愛。~~昔も何かやろうとしてもう作ってたし。~~

# gitリポジトリの用意
githubで以下のリポジトリをForkする。
コピーが自分のリポジトリに作られる。

```
https://github.com/heroku/node-js-getting-started
```

# herokuアプリの作成
herokuでCreate New Appする。
App nameはテキトーなものを、Choose a regionはUnited Statesを選んだ。

# herokuからgithubへの連携
アプリページのDeployタブへ移動する。
Deployment methodでGitHubを選択し画面の指示に従う。
GitHubがConnectedになれば良し。

# デプロイ
DeployタブのManual deployのChoose a branch to deployでmainブランチを選択し、Deploy Branchボタンを押す。
しばらくするとデプロイが完了し、Viewボタンが表示されるのでそれを押す。
デプロイしたアプリが表示される。

# ここまで
herokuが公開しているリポジトリをコピーしてデプロイしました。
node.jsとかのことはさておきとりあえずデプロイ方法を理解できたので良し。
ここから先はRestAPIの作成になります。

# ローカル環境での編集
ターミナルで適宜作業用フォルダに移動する。
以下のコマンドを実行し、gitのリポジトリをローカルにコピーする。

```
git clone https://github.com/[アカウント名]/node-js-getting-started.git
```

## index.jsを編集
index.jsを以下のように書き換えました。
~~参考記事の原文ママ~~


```
const express = require('express')
const path = require('path')
const PORT = process.env.PORT || 5000

express()
  .use(express.static(path.join(__dirname, 'public')))
  .set('views', path.join(__dirname, 'views'))
  .set('view engine', 'ejs')
  .get('/', (req, res) => res.render('pages/index'))
  .get('/g/', (req, res) => res.json({method: "こんにちは、getさん"})) // 追加
  .post('/p/', (req, res) => res.json({method: "こんにちは、postさん"})) // 追加
  .listen(PORT, () => console.log(`Listening on ${ PORT }`))
```

## .git/configの修正
以下のコマンドを実行し、.git/confifgへherokuの情報を追記する。

```
git remote add heroku https://git.heroku.com/[アプリ名].git
```

# ローカルからherokuへデプロイ
ターミナルで以下のコマンドを実行しherokuにデプロイする。

```
git add .
git commit -m "add api"
git push heroku master
```

# 確認
Postman等を使いindex.jsに追記した内容が返ってくることを確認する。

# 終わりに
最終的な変更をgithubにpushしてないとか説明不足な部分があるけどまぁ個人用のメモなので…。
詳しくは参考記事を見てください。

# 参考
https://qiita.com/sho7650/items/ebd87c5dc2c4c7abb8f0
https://qiita.com/TakuTaku04/items/6ecc533385559f4660bd
【CSS】セレクタのおさらい

#はじめに
セレクタについて、個人的に理解が浅かった部分を備忘録として残す

#擬似要素
擬似要素は、**要素の一部に対してCSSを適用させたい場合**に用いられる

```html:sample.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .gizi::before{
            content: "『";
            color: red;
        }
        .gizi::after{
            content: "』";
            color: blue;
        }
    </style>
</head>
<body>
    <p class="gizi">Yamada Tarou</p>
</body>
</html>
```

![スクリーンショット 2021-06-27 10.21.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503230/a3a86d31-e242-3ac8-4387-84fa1202beab.png)

`::before`はその要素の前に、`::after`はその要素の後に適用される
他にも、その要素の一文字目にCSSを適用させる`::first-letter`がある
（ただしこれはブロック要素にしか適用されない）


#擬似クラス
擬似クラスは、指定の要素が**特定の状態にあるときにのみCSSを適用させる**といったものである
例えば、マウスカーソルがその要素の上にあるときにのみ色を変えたいといった場合に使用する


```html:sample.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .btn {
            width: 100px;
            background: aqua;
            text-align: center;
            cursor: pointer;
        }

        .btn:hover {
            opacity: 0.8;
        }
    </style>
</head>
<body>
    <button class="btn">ボタン</button>
</body>
</html>
```

![スクリーンショット 2021-07-05 20.17.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503230/dd976185-e43b-8394-a4bc-3057996c8b1d.png)

![スクリーンショット 2021-07-05 20.17.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503230/a485e2f3-c500-f767-399a-115c3043f121.png)
アイドルグループ５人の顔を識別

『 CNN画像認識 』　★顔識別★

画像認識アプリのプログラミングに興味を持った30代会社員です。

この度、給付金制度を利用して受講したAidemyさんの課題として、ブログの作成をいたします。

内容は、CNN (Conbolutional Neural Network) の画像認識アプリを使って５人のアイドルの顔を識別してみるというものです。
時間の都合もあり今回は精度の向上は断念しましたが、完璧でない点は大変申し訳ございません、ご了承願います。
それでは早速本題に入ります。よろしくお願いいたします。

【コード】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1694320/f5ceaec8-c717-4326-6283-5dbaa03125e8.png)




【用意したもの】
　・ネット上からスクレイピングした画像１人２００枚前後を５人分
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1694320/fe07872f-e174-b5ac-6ce4-0d0b619f3533.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1694320/73728cb4-d951-8a20-87e6-662f2385ff5f.png)
【結果】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1694320/593f3e45-4d39-83a0-5c2b-d8d2d18925a9.png)
【コメント】
精度が非常に悪い状態でした。アプリにどんな人物の画像を織り込んでも特定のメンバーであると判定される結果になりました。

【対策】
①学習回数(epoch)の回数の増減の調整
　→大幅に結果の向上には至りませんでした(>_<)

②sigmoid関数ではなく効率的に学習ができるrelu関数のコードであるかの確認
　→下記のrelu関数で設定済み
　　top_model = Sequential()
　　top_model.add(Flatten(input_shape=vgg16.output_shape[1:]))
　　top_model.add(Dense(128, activation='relu'))
　　top_model.add(Dense(256, activation='relu'))
　　top_model.add(Dropout(0.5))
　　top_model.add(Dense(64, activation='relu'))
　　top_model.add(Dense(5, activation='softmax'))

③画像を抽出したい顔のみにトリミングし、白黒、回転をしたものを織り込み
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1694320/5f56e7b9-065c-a6da-6dd0-69b6331ed734.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1694320/9be00353-0928-e95a-8623-8cadcd0ad83a.png)

【結果】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1694320/d49e860e-486e-b949-b270-37719fab5823.png)

【コメント】
大幅に学習効果が発揮され、精度が２０％前半から７０～８０％まで向上できたので良かったです。
単純なことかもしれませんがデータのトリミングによる余分な画像部分の削除が学習の向上につながることがわかりました。私自身もまだまだ能力不足なので、しっかりと復習をしていきます。
メンターの方々のサポートがなければできなかったので、貴重な経験になりました。
大変に感謝至します。

【参考】
https://nogizaka-judgement.herokuapp.com/
【第5章】Railsチュートリアル(5.3.4 リンクのテスト)の演習でNoMethodErrorが出た時にやったこと

[Railsチュートリアル第5章(第6版)](https://railstutorial.jp/chapters/filling_in_the_layout?version=6.0#cha-filling_in_the_layout)-5.3.4 リンクのテスト- の演習２に従ってtest環境でfull_titleヘルパーを使うようにすると、NoMethodErrorが発生した。
![Railsチュートリアル第５章.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1505219/2636af0b-c9ad-4173-159f-98a1a19ce27c.png)
どうやら```full_title```メソッドが見つからないようだ。

#やったこと① NoMethodErrorについて調べた
まずは```NoMethodError```について調べてみた。が、やはりそのまま**"SiteLayoutTest"で```full_title```メソッドが定義されていない**という意味のようだ。この時点で私が思っていたのは、"SiteLayoutTest"では```full_title```メソッドを呼び出しているだけなので、そりゃあここでは定義していないでしょ。という事だった。これまでチュートリアルに沿って進めてきたので、```full_title```メソッドを定義している側が正しいか調べてみよう。とはならなかった。

#やったこと② full_titleメソッドについて調べた
次に```full_title```メソッドを調べてみた。すると下記記事が最初にヒットしたので一先ず開いた。
参考：[デフォルト値付きの引数 Railsチュートリアルのfull_titleメソッドを例に](https://qiita.com/zenfumi/items/232b5aeab59718dd7bc1)
記事の内容は今回知りたい内容ではないが、Railsチュートリアル第4章のfull_titleについて書かれている。このおかげで**```full_title```を第4章で定義していたのだと気づいた。**

#やったこと③ full_titleを定義するファイルを修正した
第4章を見直してみると原因が分かった。**```full_title```を定義を誤って別のファイルにしていた**のだ。
×誤って定義していた"static_pages_helper.rb"

```
module StaticPagesHelper
  # ページごとの完全なタイトルを返します。
  def full_title(page_title = '')
    base_title = "Ruby on Rails Tutorial Sample App"
    if page_title.empty?
      base_title
    else
      page_title + " | " + base_title
    end
  end
end
```
〇本来定義すべき"application_helper.rb"

```
module ApplicationHelper

end
```

今回は、**本来定義しておくべきだが何も定義していないファイルをincludeしたことでエラーが発生していた。**
"static_pages_helper.rb"のコードを"application_helper.rb"にコピペするとエラーは解消された。
![Railsチュートリアル第５章(３).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1505219/f1b3a205-872f-c745-a09b-cb03332c04c2.png)

#まとめ
やったこと①②③の流れで解決できた。
**NoMethodError: undefined methodが発生した時は、メソッドを定義しているファイルも確認すること。**
[HTML] HTMLの超基礎を振り返る

##はじめに
最近、オリジナルアプリ作成中でフロントをしっかり目を惹くものにしたいなと考えていまして、いじっていたんですが、なんだか知識がぬけに抜け落ちていたので、今一度、初心に帰って、HTMLの超基礎を復習していきます。

よろしくお願いします。
そもそもHTMLとは！？みたいなのは割愛します。

##headとbody
HTMLはものすごく大きく分けるとhead要素とbody要素に分けることができます。
記述にするとこんな感じ↓

```html
  <head>

  </head>
  <body>

  </body>
```

head要素の中に記述していくのは、サイトの情報やCSSファイルの情報を記載してあげます。
私はheadの中は各々のHTMLファイルの概要、説明書の部分だと思っています。

そしてbodyはブラウザに表示する情報を記述していくところです。
headを商品の説明書と捉えるなら、bodyは商品本体そのものですね。

HTMLを記述するにはまず
**<!DOCTYPE HTML>**
とはじめに記述し、このファイルにはHTMLを書きます！って言う宣言をしなければなりません。
そしてhtml要素を用意してそのなかに記述していきます。

つまり記述にするとこんな感じです↓


```html
<!DOCTYPE HTML>
<html>
  <head>
  </head>
  <body>
  </body>
</html>
```

これは絶対必須の記述として覚えておきましょう。

##meta(メタ)要素
head要素の中に情報を書き込む中で、このHTML文章は◯◯ですよ！と指定するためにmeta要素を用います。終了タグが必要ない要素です。

先ほどの続きで書くとこうなります↓

```html
<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
  </body>
</html>
```

**charset(キャラセット）属性**は、メタ要素の中で、どのような文字コードを使うのか示すための属性です。
UTF-8は一般的な文字コードです。

つまり、「このhtml文章はUTF-8という文字コードを用います」と言っています。

##title要素

サイトのタイトルを指定するための要素です。これもheadの中に記述しますのでサイトの内容に直接的には関わってきません。
タブに表示される名前として使用されます。
こんなやつ↓

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1552346/cd91928f-f2bd-5959-f18e-94bc43106b34.png)

さっきの続きとしてこんなふうに書きます。↓
*※ロゴは反映されません*

```html
<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Qiita</title>
  </head>
  <body>
  </body>
</html>
```

##h1〜h6要素（見出し要素）
ここからはbody要素内で用いる要素を一部紹介していきます。
最後にまとめて例を貼ります。

bodyは実際にブラウザ上で表示する情報を表示できます。

hから始まる、h1/h2/h3/h4/h5/h6の要素は文章の見出しを作るための要素です。
h1が一番大きいです。数字が大きくなるにつれて文字は小さくなっていきます。

##p要素
文章の段落を示すためにp要素を使います。
＜p＞と＜/p＞で囲んで一つの段落として認識させます。

##b要素
＜b＞と＜/b＞で囲んだ部分を太字にすることができます。

##a要素
＜a＞と＜/a＞で囲んだテキストをリンクにすることができます。
a要素の中にhref属性を指定して移動させたいページのurlを記述することで、そのページへ遷移させることができます。

##body要素の中身の例

これらの要素を使って例を記述してみました。
結果のブラウザ画面と一緒にご覧ください。

```html
  <body>
    <h1>
      これは見出しです
    </h1>
    <p>
      1つ目の段落です
    </p>
    <p>
      2つ目の段落です
    </p>
    <p>
      3つ目の段落です。<b>この部分は太字になります。</b>
    </p>
    <a href="https://www.google.com/">クリックすると、Googleへ移動します。</a>
  </body>
```

ブラウザ↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1552346/1267339f-c5de-b5ed-28e6-62ea3bfa4cf1.png)



##最後に
HTML/CSSは正直苦手で、あまりやりたくないのですが、フロントもしっかり理解してこそ立派なエンジニアになれると思うので、苦手だけど学習は怠らずやっていきたいと思います。
この単語さえわかれば、英語の技術書がサクサク読める!英単語まとめ(保存版)

# はじめに
英語のプログラミング教材って、良いって聞くけど、英語に苦手意識があるから使ったことがない...。

私もその一人でした。ですが、この単語さえわかっていれば、なんとか[英語のDjangoの本](https://www.amazon.com/Django-Beginners-Learn-web-development/dp/1980377898)を読み切ることができました。

これから英語でプログラミング学習したい人は見ていただけると役に立つかもです!

## execute 実行する

### 例文
execute the migrate command
migrate コマンドを実行する


## navigate 移動する
### 例文
Navigate to our homepage at http://localhost:8000/
http://localhost:8000/のホームページに移動する

## configure 設定する
### 例文
the project configured for local development
ローカル環境で設定されたプロジェクト

##confirm 確認する
### 例文
process of confirming
確認作業

## go through 確認する
### 例文
go through the prompts
プロンプトを確認する

## dedicated 専用の
### 例文
dedicated server
専用サーバー

## sync 同期する
### 例文
sync the database
データベースと同期する

## specify 明示する
### 例文
specify the type of content
項目の型を明示する

## ensure 確かに〜する
### 例文
To ensure Django knows about our new app
djangoが新しいアプリを認識できるようにする

## assume 仮定する
### 例文
assume each post has a title
各投稿にタイトルがあると仮定する

## inherit 受け継ぐ、継承する
### 例文
other templates inherit from base.html.
他のテンプレートはbase.htmlから継承する

以上です。ありがとうございました!
AWS Hands-on for Beginners Network編#1をやってみた！

#はじめに
AWS初心者向けハンズオン「AWS Hands-on for Beginners」の「<a href="https://pages.awscloud.com/JAPAN-event-OE-Hands-on-for-Beginners-Network1-2020-reg-event-LP.html">Network編#1 AWS上にセキュアなプライベートネットワーク空間を作成する</a>」をやってみました！

応用情報とSAA資格取得のとき、ネットワークの項目は割と好きな方だったのですが、このハンズオンの内容もやってて楽しかったです（∪＾ω＾）

#こんな方にオススメ
- Amazon VPCを中心としたAWSにおけるネットワークの基礎を学びたい方
- ハンズオンを通して、AWS認定資格取得に役立てたい方。特にSAA（ソリューションアーキテクトアソシエイト）では、必須の内容だと思います！

#概要

VPC、パブリックサブネット、プライベートサブネットを作成し、プライベートサブネットからインターネットやVPC外のAWSサービスへの接続を行います。

本ハンズオンの最終構成図は、以下のとおりです。始める前は、こんなの自分に作れるのかなって感じですが、意外とサクッとできちゃいます！

![aaa_3ポイント.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1615121/5742eb1f-ad84-8c72-23a1-f3190facc3b5.png)

#所要時間
本ハンズオンは11本の動画で構成され、動画の総時間は約2時間。
停止して作業することもあるので、全体3～4時間ぐらいだと思います。

#感想
###パブリックサブネットとプライベートサブネット違いがよくわかる
ハンズオン受講前での知識では、パブリックサブネットは直接インターネットに接続する、プライベートサブネットは直接インターネットに接続しないものって思ってました。

受講後の両者の違いは、<font color="Red">**サブネットに関連付けられたルートテーブル**</font>にインターネットゲートウェイへのエントリがあるかないかで決まる、という認識に変わりました。参考書の勉強ではなく、ハンズオンだからこその、AWSのサービスや機能の捉え方が変わるのを実感しました。


下の画像は、ハンズオン内でのパブリックサブネットとプライベートサブネットの説明です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1615121/3883e7b0-f6c8-2b25-731a-3a954f04118c.png)

###SAA勉強の際にハンズオンをやっておけばよかったかも
参考書を読み込んだり、問題集をひたすら解いたりしてSAA勉強をしてたけど、同じことを理解・記憶するのにかなり反復した気がする。時間がかかる原因は、見えないものを活字だけで理解しようとしてたことにあると思う。

しかし、ハンズオンは自分の行う操作がどのような結果になるかを予想したり、なぜそうなるかを考えながら、画面内で動くものを理解しようとする。知識の理解度・定着度が段違いだと思いました。

#まとめ
今回、ネットワークの基礎となるハンズオンをやってみました。こんな良質な学習コンテンツが無料でできるので、是非AWSを知識を深めたい方はトライしていただければと思います！
ACCESS VBA アウトプット

##参考書籍
https://www.amazon.co.jp/AccessVBA%E3%83%91%E3%83%BC%E3%83%95%E3%82%A7%E3%82%AF%E3%83%88%E3%83%9E%E3%82%B9%E3%82%BF%E3%83%BC-Access2019%E5%AE%8C%E5%85%A8%E5%AF%BE%E5%BF%9C-Access2016-2013%E5%AF%BE%E5%BF%9C-Perfect/dp/4798058513

## 用語メモ
| 用語  |　意味　　　 | 
|:------|-------:|
| Currency    | 通貨  | 
| Debug.Assert  | 条件をチェック、falseの時、呼び出し履歴を確認  | 
| Const 変数名　As integer = １　|　　　　変数名がintegerというデータ型で値は1が入ります　|　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
| If IsEmpty(a) Then  |  aが空ならtrueのコードを実行する  |
| ReDim  | 上限 |
| For j = 0 To 7 | 0からカウントして7まで繰り返します |    
|False or True| 条件式で　FalseとTrueが混在している場合Trueが優先されます|
| Erase| コードの処理を消去します|
| LBound|下限|
| Ubound|上限|
|CLng|　ChangeLong データ型をロング型に変更します|
|VarType|データ型を数値で返します|
|VarName|データ型を名前で返します|
|Sqr|平方根を計算します|
|Sgn|符号|
|Abs|絶対値|
|Fix|少数部分を除去して、結果の整数を返します|
|vbGet|プロパティ(値の取得)|
|Resume|復帰|
|Set 変数 = Now|オブジェクトを作る|
|Static 変数 As New Form|変数にフォームを設定|
|(Cancel As Ineger)|Openメソッドの決まり文句|
|Let|式の値を変数またはプロパティに代入します|
|クラスオブジェクト|標準モジュールかクラスモジュールで定義した変数を使用します|
|Get|データを取得します|
|LENB関数|バイト数を返します|
|Rnd|０〜１未満のランダムな値を返します|
|Round|四捨五入|
|Split|各要素を区切る|
|Join|カンマでつなげる|
|StrComp|大文字、小文字の違いを比較する|
|Chr()|改行|
|FormatNumber（）|（小数点以下桁数,負数の表記,小数点左側の0を表記）|
|StrConv|大文字と小文字、全角と半角など文字の種別を変換|
|IIf|真の場合に式1の値、偽の場合に式２の値|
|Timer|午前0時からの経過秒数|
|;|〜が|
|スペース_|改行|
|DoEvent|時間がかかる処理のフリーズを解消します|
|Chr|指定したコードの文字を表示します|
|Cvar|ChangeVariant　バリアント型に変更します|
|Open "b.csv" For Append As #1|b.csvを#1と定義します|
|イミディエイトウィンドウ|処理コードを直接入力して実行すると処理結果が見られます|

##　参考書籍の注意点
記載されているコードをVBAに模写して実行してもエラーになります。理由は、この書籍に誤植がいくつかあるからです。そのため、この書籍で学習をするなら、経験者に質問をできる環境で学習をしないと思うように進まない可能性があります。

##ACCESSの仕様
フィームからプロパティシートを開いてイベントプロシージャを指定、そのイベントプロシージャにコードを記述すると実行されます。前述の行程を飛ばしてエディターに正しいコードを直打ちしても実行されない場合があります。
KB MB GB と KiB MiB GiB 何が違うの

## 勉強前イメージ

大体同じでは・・・？
OSのインストールのときによく見る

## 違いの調査

### KB MB GB と KiB MiB GiB の違い

コンピュータは2進数に基いている値で、
元々は2の10乗はKBと表されていたが、曖昧さを回避するためにIEC(国際電気標準会議)が決めたのがKiB MiB GiBになります。

#### 10のX乗Byte

- KB
	- Kilo Byte
	- 1KB = `10の3乗Byte` = 1,000 Byte
- MB
	- Mega Byte
	- 1MB = `10の6乗Byte` = 1,000,000 Byte
- GB
	- Giga Byte
	- 1GB = `10の9乗Byte` = 1,000,000,000 Byte

#### 2のX乗Byte

- KiB
	- Kilobinary Byte
	- 1KiB = `2の10乗Byte` = 1,024 Byte
- MiB
	- Megabinary Byte
	- 1MiB = `2の20乗Byte` = 1,048,576 Byte
- GiB
	- Gigabinary Byte
	- 1GiB = `2の30乗Byte` = 1,073,741,824 Byte

### KB MB GB と KiB MiB GiB の読み方

- KB → キロバイト
- MB → メガバイト
- GB → ギガバイト

- KiB → キビバイト
- MiB → メビバイト
- GiB → ギビバイト

## 勉強後イメージ

元々は全然違う計算式・・・・
大体一緒のもんやと思ってたけど、なるほど。。。

## 参考

- [図書館員のコンピュータ基礎講座 2進数の単位](http://www.asahi-net.or.jp/~ax2s-kmtn/ref/unit.html#binary)
- [今だから言うけど、KiBとかMiBとかGiBとか](https://rbtsro.hatenadiary.jp/entry/20130217/p1)
- [MB（単位）とは？MiBとは？](https://academy.gmocloud.com/keywords/20170510/4314)
WordPressでよく使うプラグインのメモ

仕事でよく使うわりに名前とかすぐ忘れちゃうので、用途別によく使うWordPressプラグインをメモしておきます。

#ブロックエディタ拡張関連

最近はとても便利なブロック集やエディタ拡張がたくさん出ているので、大変ありがたいです。

##Snow Monkey Blocks

コーポレートサイトでよく使う『お客様の声』『ステップ』『価格表』などのコンテンツブロックがとても便利です。
有料テーマ『Snow Monkey』と合わせて使うとより便利。

》[Snow Monkey Blocks](https://ja.wordpress.org/plugins/snow-monkey-blocks/)

##Snow Monkey Editor

ブロックツールバーに便利な拡張機能が追加できます。本文のインラインにいろんなスタイルを追加したい場合に便利。

》[Snow Monkey Editor](https://ja.wordpress.org/plugins/snow-monkey-editor/)

##yStandard Blocks

デバイスサイズでカラム数を変えられる『カスタムカラムブロック』が大変便利です。アイコン付きボタンやサブタイトル付き見出しもうれしい。
あとシンプルなインラインスタイル（マーカーや文字を一部分だけ大きくとか）もあるので、これだけでわりと事足りたりします。
カスタムありきの無料テーマ『yStandard』と合わせて使う時は必須。

》[yStandard Blocks](https://wp-ystandard.com/plugins/ystandard-blocks/)

##Gutenberg Block Library & Toolkit – Editor Plus
ページごとに細かいスタイルを付ける場合はこれでしのぎます。

》[Gutenberg Block Library & Toolkit – Editor Plus](https://ja.wordpress.org/plugins/editorplus/)

##PublishPress Blocks
以前は『Advanced Gutenberg』という名前だったみたいですね。
ブロックの種類が豊富なんですが、一番はテーブル拡張。セル結合できる。すごい。
ボーダーやセル背景色とかも細かく設定できるんですよ。複雑な表組がある時はもうこれ一択。

》[PublishPress Blocks – Advanced Gutenberg Blocks, Permissions, CSS and Layouts](https://ja.wordpress.org/plugins/advanced-gutenberg/)

#カスタム投稿関連
カスタム投稿やカスタムタクソノミーを追加するときは必ず入れています。

##Custom Post Type UI
カスタム投稿やカスタムタクソノミーを追加するプラグイン

》[Custom Post Type UI](https://ja.wordpress.org/plugins/custom-post-type-ui/)

##Custom Taxonomy Order

カテゴリーやカスタムタクソノミーの順番を任意の順番に変更する

》[Custom Taxonomy Order](https://ja.wordpress.org/plugins/custom-taxonomy-order-ne/)

##Custom Post Type Permalinks
カスタム投稿やカスタムタクソノミーのパーマリンクを設定できる

》[Custom Post Type Permalinks](https://ja.wordpress.org/plugins/custom-post-type-permalinks/)

ひとまずこんなもので。増えたら追記します。
Linuxとはなんぞや

##はじめに
私は新卒一年目で研修でLinuxを学んだので、ここで簡単にシェアさせて頂きます。

![linux.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1689869/b8b90260-90ad-e263-8ca8-d87efc79f79d.png)

##Linuxとは？
結論から言うと、LinuxとはOS（Operating System）の一つです。
OSとはシステムの管理するソフトウェアのことでWindowsやmacOS、AndroidやiOSなどがあります。

##Linuxディストリビューション
ディストリビューションとは、訳すと「配布物」で、パッケージやプログラムをまとめてすぐ使えるようにした状態のものを意味します。
ちなみに、ディストリビューション=Linuxディストリビューションです。
LinuxディストリビューションにはRed Hat系とDebian系があるのですが、今回は割愛します。気になる方は検索してみてください。

##参考文献
さわって学ぶ Linux入門テキスト
TensorFlow の画像分類チュートリアルを試してみた

## きっかけ

- AI 初心者だけど、業務上 AI 関連の仕事をすることになった。
- ひとまず AI っぽい事に触れてみようと思い画像分類の体験セミナーを受けてみた。
- セミナーの中で `TensorFlow` を使用。
  - 復習がてら手を動かして実践しようと思った。


## TensorFlow とは

> Google が開発しオープンソースで公開している、機械学習に用いるためのソフトウェアライブラリである。
> 機械学習や数値解析、ニューラルネットワーク（ディープラーニング）に対応しており、Google と DeepMind の各種サービスなどでも広く活用されている。

by Wikipedia


## 公式チュートリアル

- 公式でチュートリアルが用意されている。
- `画像分類`以外にも色々なチュートリアルが公開されている
- 今回実践したチュートリアルは[こちら](https://www.tensorflow.org/tutorials/images/classification?hl=ja)


## 実践

- チュートリアルでは猫と犬の画像分類を行うモデルを作成する。
  - モデル構築までの流れは以下となっている。

```
    - データの読み込み
    -データの準備
    - モデル構築
    - モデルの評価
```

- 予め機械学習を[Python 実践機械学習システム 100 本ノック](https://www.amazon.co.jp/Python%E5%AE%9F%E8%B7%B5%E6%A9%9F%E6%A2%B0%E5%0A%AD%A6%E7%BF%92%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0100%E6%9C%AC%E3%83%8E%E3%83%83%E3%82%AF-%E4%B8%8B%E5%B1%B1-%E8%BC%9D%E6%98%8C/dp/479806341X)にて学習していたのだけど、大きな流れは同じなのだと感じた。
- 一度上記の流れで作成したモデルでは`過学習`気味な結果となったとして、`データ拡張`、`ドロップアウト`についても触れる事ができるシナリオだった。

    - データ拡張： 学習用画像を割り増しするため、画像をランダムに回転、拡大縮小、反転させた。
    
    - ドロップアウト：過学習を防ぐため、学習中にランダムで出力ユニットの一部を不活性化する。

- `データ拡張`、`ドロップアウト`を行った上で再度モデル学習を行い、精度が改善されたということを確認したところでチュートリアルは終了。

## 感想

- 自分のような基礎知識に乏しい者でも、チュートリアルに従うことで簡単に画像分類モデルが作成できた。

  - 本チュートリアルは「犬と猫」でしたが、対象データ変えるだけでなんでもできそう。

- チュートリアルだけであれば簡単にできたけど、実際に業務で使用するためには本質的な事柄を勉強しておきたいと感じた。
  - モデル構築時のパラメータなど、今回はチュートリアル記載のままに設定しただけ。ここら辺とか意味を理解してチューニングできるようにならなければ。
Chrome閲覧履歴をローカルのデータベースに保存


ブラウザーの閲覧履歴(ヒストリー)をローカルのデータベースにまとめておけるオープンソースソフトウェア[visited](https://github.com/yuis-ice/visited)をリリースしました。

> Securely collect browsing history over browsers.

Github: [visited](https://github.com/yuis-ice/visited)

こんな感じで閲覧履歴データが保存されます。

![https://yuis.xsrv.jp/images/ss/ShareX_ScreenShot_d1281c0c-1a3c-4051-8414-e7b0f5d28e23.png](https://yuis.xsrv.jp/images/ss/ShareX_ScreenShot_d1281c0c-1a3c-4051-8414-e7b0f5d28e23.png)

サーバーのログ出力

![https://yuis.xsrv.jp/images/ss/ShareX_ScreenShot_402c3f62-7fcd-4fd2-b162-cae69b75d9f3.png](https://yuis.xsrv.jp/images/ss/ShareX_ScreenShot_402c3f62-7fcd-4fd2-b162-cae69b75d9f3.png)

## 動機

まず一番の動機として、プライバシーへの配慮です。
ブラウザー上で閲覧履歴データを長期間残しておくのはやめておきたい、しかし閲覧履歴データはどこかに残しておきたい、という需要。

次点にクロスブラウザー、クロスプロファイルでの閲覧履歴データの統合化、一元管理です。ChromeのユーザーA, ユーザーB, ユーザーCのそれぞれの閲覧履歴をまとめておけること、また、Firefox, Opera, Braveなどにおいても同様にそれが行えること。

## 構成

アルゴリズムとしてはシンプルです。同ツールでサーバーを起動し、クライアントサイドにはクライアントサイド用のユーザースクリプトを置きます。どこかのURLにアクセスしたらそこでJSを実行、websocket経由でサーバーへ情報を転送、サーバーサイドでデータベースへ情報を入れます。コードはシンプリシティを意識して、簡潔めです。

## 使い方

[Github](https://github.com/yuis-ice/visited)のreadmeを参照してください。
AMP用にGoogleアナリティクスのセッションを統合したよ

# はじめに
こんにちは。今日知人の結婚式があるですが、私用で欠席するので昨日着でバルーン付きの祝電を送らせてもらいました。
台風による気圧の変化でおかしくなっていないかだけ心配です :innocent:

喜んでくれたらいいなと先輩風ふかせてみました、筆者です :v:



さて、今回は**Gatsby**プロジェクトを**AMP対応**させたのですが、その際に**Googleアナリティクス**の設定も行いました。

Googleのドキュメントには、**セッション統合**した方がいいと書いてあったのでそれを対応したので記事にします。
参考になれば幸いです:pray:

# 事の発端
これ↓

https://support.google.com/analytics/answer/7486764

## セッション統合とは
ふむふむ:thinking:

>AMPページはAMPキャッシュドメインから配信されるため、サイト本体とはドメインが異なります。AMPリンカーを使用すれば、AMPキャッシュとサイト内のページを行き来するユーザージャーニーをトラッキングすることができます。AMPリンカーはamp-analyticsの機能で、AMPクライアントIDをユーザー識別子としてユーザーセッションの統合を行うものです。

つまりGoogleのドメインであるAMPページ内にある自分のドメインの導線踏んだ時に、離脱した判定とかになるっぽい。

ドメインが違うのでその解釈は正しいものの、同じ自分のコンテンツと解釈するとその動きはよくないっすね :thinking:

## セッション統合のメリット
ふむふむ:thinking:

>AMPキャッシュとサイト本体のドメインとの間でAMPクライアントIDを同期することにより、各種ユーザー関連指標（例:セッション継続時間、直帰率、セッションあたりの閲覧ページ数）の精度を高めることができます。

セッションを同一ドメインと同様に認識してくれるイメージでしょうかね :thinking:

# AMP用にGoogleアナリティクスのセッション統合する

## 1. AMPページのタグ設定
先ほどドキュメントには、**グローバルサイトタグ**か**タグマネージャー**での設定の方法が記載されていますが、どちらも使ってないので**analytics.js(type="googleanalytics")**で設定する方法で行こうと思います。


こんな感じです↓

```html
<amp-analytics type="googleanalytics">
    <script type="application/json">
        {
            vars: {
                account: 'UA-XXXXXX-X'
            },
            linkers: {
                enabled: true
            }
        }
    </script>
</amp-analytics>
```

amp-analyticsの**README**がとても参考になりました :pray:

https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/linker-id-forwarding.md

## 2. 非AMPページのタグ設定

こちらすごく簡単です :v:
以下プラグインを使用しているので、**allowLinkerをtrue**に指定するだけです :smile:

https://www.gatsbyjs.com/plugins/gatsby-plugin-google-analytics/

```js:gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: 'UA-XXXXXX-X',
        allowLinker: true // 追加
      }
    }
  ]
}
```

## 3. 参照元除外の設定
アナリティクスの設定画面から参照元除外設定を行います。

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86984/52116bda-bd93-ce51-fea4-549b7b6283ea.png)

参照元除外するドメインは`cdn.ampproject.org`です。

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86984/b2555ea0-b9c9-27d4-d449-e4864441ee9d.png)

## 4. 反映されている確認する

1. シークレットモードでブラウザ開く
2. DevtoolsからSPのエミュレータ起動
3. 自分のサイトのAMPページが出てくるまでググる
4. AMPページ表示
5. Devtoolsでwww.google-analytics.comに送信されるネットワークリクエスト内に含めれるcidパラメータを確認
6. AMPページ内の導線から自分のドメインのページへ遷移
7. 再度5を行い、cidが同一であればOK :v:

以下で確認しました。

>方法 2: Chrome Developer Tools で確認する

https://support.google.com/analytics/answer/7486764?hl=ja&ref_topic=7378717

# おわりに
これでアナリティクスのデータがきれいになるぞ :smile:
それでは！
初心者の初心者のためのニュアンス解説【フレームワークとライブラリって？】

プログラミング始めたい！！！　けど、
プログラミング言語にも色々あるらしいから
意味わかんない...。
フレームワークとかライブラリとか
何をどう選んだら良いのかよくわからない...。

って思うそんな方に！！！！！！

詳しいことは抜きにした
###『ゆるふわ』　　
な概要だけ掴むのに簡単な
紹介をさせて頂きたいと思います٩( ᐛ )و

＊どんな言語を選べばいいといったアドバイスではなく
あくまでその言葉のニュアンスを掴むためのものです:raised_hands:
ただ、概要だけでも知ることで選ぶのに少しは手助けにはなるかなと思っております♩

##そもそもプログラミング言語ってなに？
まず初めに**「プログラミング言語」**って響き、少し硬く感じますよね:sweat:

**「プログラミング言語」**は、コンピュータと話すための**「言葉」**です！

みなさんが日常的に話す**「言葉」**と一緒です！
(日本語とか英語、中国語にフランス語...etc)

これと一緒でコンピュータの世界も地球と一緒で広いので
いろんな話し方、**「言語」**があるんです！

そしてこの**「プログラミング言語」**中には...

###「フレームワーク」
や
###「ライブラリ」
といったものが存在します。

##フレームワークって？
この**「フレームワーク」**こそプログラミング言語を選ぶ上で
最初に躓くところだと思います:sob:
プログラミング始めたいと思いどのプログラミング言語から
手をつけたら良いかな...って
悩んで調べると**大量**に出てくる正体こそ**「フレームワーク」**です！

**でも、もう大丈夫！！！**

**「フレームワーク」**というのは簡単にいうと**「方言」**のようなものです！

日本にも**津軽弁**や**博多弁**、中国にも**北京語**や**広東語**が
あるのと同じようなものです♩

その国の特定の地域の言語を学びたかったら**方言**を覚えるように
コンピュータの世界にも**特化したもの**があります。

ここでは、何に特化しているなど込み入った話はしませんが、
調べるとそういうものまで**含めて検索結果が出てきている**ということを
知っておくと気が少し楽になるかなと思います:relieved:

##ライブラリって？

プログラミング言語を選ぶ際、
上記で説明した**フレームワーク**の他に**「ライブラリ」**も一緒に
検索結果に出るものがあります。

今回は**本質的な違い**ではなくプログラミング言語を選ぶ時、
検索結果に出てくる**「ライブラリ」**って**フレームワーク**と
何が違うの？っといった点においての**ゆる〜い**ニュアンスだけ
説明させて頂きます。
＊大いに間違いがあると思われますので鵜呑みにしないでください。
あくまで感覚的なものです。

ではどんな違いなのかと言いますと...

**「ライブラリ」**は**「流行語」**のようなものです！

**バズる**とか**ぴえん**とか:yum:

これだけ聞くとまだ少し難しく思われるかも知れませんが

**フレームワーク(方言)**のように確立されたものではなく
ある特定の中で**共通認識**として使えるようなイメージで
**「ライブラリ」**は**フレームワーク**より
規模的に**小さい**といった形です！

##まとめ
最後に簡単にまとめさせて頂きますと...

**プログラミング言語** = **「言葉」**

**フレームワーク** = **「方言」**

**ライブラリ** = **「流行語」**

大体、こんな規模感なんだなと思って
見て頂けたら幸いです:sunny:

個人的な主観に基づいたものなので
もしかしたら全くわからないという方も
いらっしゃると思います。
その点においては申し訳ございません:bow_tone1:

あくまで簡単なイメージとして
概要だけわかっていただけたら幸いです♩
[JQuery] 特定の要素が存在するかどうか判別する処理

## はじめに
本記事は特定の要素があるかどうかを判別する処理について解説したものです。

## 実践
要素が存在するかどうかの判別方法は色々ありますが今回は`length`と`size()`使った方法を解説していきます。

#### 1. length

```
<script>
$(function(){
    if($('#hoge').length){
        ～　ここに「＃hoge」が存在した場合の処理を記述　～
    } else {
        ～　ここに「＃hoge」が存在しなかった場合の処理を記述　～
    }
});
</sctipt>
```

`length`は要素の数があるかどうかを判別する処理になり、存在しない場合はfalseを返します

#### 2. size()

`length`とほぼ同様の使い方で`size`を使って判別処理できます。

```
<script>
$(function(){
    if($('#hoge').size()){
        ～　ここに「＃hoge」が存在した場合の処理を記述　～
    } else {
        ～　ここに「＃hoge」が存在しなかった場合の処理を記述　～
    }
});
</sctipt>
```
node.js、express、handlebarsを使ってウェブサーバーの立ち上げからページの制作までをやってみた - ３ herokuへのデプロイ

[前回](https://qiita.com/monsoonTropicalBird/items/fca2a08336b7176ddfcf)までで、nodeでのサーバ立ち上げ、expressとhbsでのページ制作、ディレクトリのセットアップまで終わったので、いよいよサーバーにて公開じゃ。 
今回は、nodeサイトに対応している[heroku](https://dashboard.heroku.com/)へアップするぞ。 
ftpとかzipじゃくて、Githubと同じように、コマンドラインからpushコマンドで、アプするのじゃ。 
アカウントを持ってなければ、ただで作ると良いぞ。 
![Screenshot from 2021-06-27 01-10-28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1204968/e0322fb6-fd66-8571-b26b-5b14db3a57ae.png)

アカウントが作れたら、コマンドラインからherokuにアクセス出来るように、[heroku cliをダウンロード](https://devcenter.heroku.com/articles/heroku-cli)しましょう。 
ダウンロードできたら、確認。 

```
$ heroku -v
 ›   Warning: heroku update available from 7.52.0 to 7.54.1.
heroku/7.52.0 linux-x64 node-v12.21.0
```

-vオプションで、バージョンが返ってくれば、無事にインストールできてるよ。
そして、コマンドラインからログイン。 

```
$ heroku login
```

次に、Github同様SSHキーを、herokuに登録。

```
$ heroku keys:add
```

で、次にheroku上にプロジェクトディレクトリを制作。 

```
$ heroku create yourapp   // yourappの所は、自分の作ったサイト名、またはアプリの名前に。
Creating ⬢ myapp... done
https://yourapp.herokuapp.com/ | https://git.heroku.com/yourapp.git
```

そうすると、以下のメッセージが表示される。 
https://myapp.herokuapp.com/ はライブURL。ここに作ったサイトをデプロイするぞ。 
https://git.heroku.com/myapp.git は、gitのレポジトリで、データが保存される。 
herokuにアプする前に、幾つかデータを書き換えておこう。 
まずは、***package.json***。herokuに、コアファイルのapp.jsを実行するように設定する。 

```
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
```

ここを、こういう風に書き換える。

```
  "scripts": {
    "start": "src/app.js"
  },
```

そして、ポート番号を変える。 

```:app.js
const port = process.env.PORT || 3030;

app.listen(port, ()=>{
    console.log(`server running on Port:${port}`);
})
```

で、最後にデータをherokuにpush

```
$ git push heroku main
```

で、アプ完了！
先ほどの https://yourapp.herokuapp.com/ にアクセスすると、サイトが表示されるはずじゃ。 
これで、nodeをインストールしてから、サイトを作ってherokuにデプロイするまでが終わったよ。 
次は時間あれば、nodeでapiを叩いてデータを取ってくる流れを説明しようと思っとる。 
そろそろバイトの時間じゃ。 
じゃあの。
v-forの値をmethodsやcomputedで参照する

#はじめに
Vueの勉強を進める中で、v-forによって複数のボタンを作成した時に、ボタンごとに違うアクションをしたいと思った時にはまってしまいました。
※Todoリストを作成する際にも使える（Todoアイテムごとに削除ボタンをつけたりするとき）かと思います
###:key=""
v-forを使用するときに、なんとなくつけていた（私は付けていなかった） これが解決のキーとなりました。

#解決策
```javascript:JavaScript
const box = Vue.createApp({
  data: function () {
    return {
      box: false,
      items: [
        {
          name: 'フェードイン',
          class: 'fadein',
          action: 1,
        },
        {
          name: 'フェードアウト',
          class: 'fadeout',
          action: 2,
        },
      ],
    };
  },
  methods: {
    go: function (index) {
      if (this.items[index].action == 1) { /*ここでindexを用いて、対象のitemを参照*/
        this.box = true;
      } else {
        this.box = false;
      }
    },
  },
}).mount('#app');
```
v-forによって作成されたボタンごとにactionの値を参照して、アクションを変えたいので、
html側でv-forと共に、:key="index"を添えて、items配列のindexを指定してあげることで、対象のitemを参照できる

```html:html
<div id="app">
<!-- v-forと一緒に必ず:key属性を付与する-->
        <button type="button" v-for="(item, index) in items" :key="index" :class="item.class" @click="go(index)">{{ item.name }}</button>
        <transition>
            <div class="box" v-show="box"></div>
        </transition>
    </div>
```


#最後に
なぜ、key属性を設定するのかいまいちわからなかったのですが、今回key属性の大切さを学びました。
かなり初歩的な部分なんだろうなとは思っておりましたが、初心者はつまづくこともあるかと思いますので、参考にしていただけておりましたら幸いです。
aptやpipをする際に起きるプロキシとの戦い

初投稿記事になります、間違い等ございましたらご指摘お願いします。

余談から入るのでタイトル内容を知りたい方は見出しまでスクロールしてください。

会社の業務でJsonサーバのインストールをする必要があり、それに際してNode.jsに付随するnpmというパッケージを使わないといけなくなったのですが、プロキシに阻まれました。社内備忘録に対策法は記載してあったので、その通りにして解決はしましたが、**Cntlmを利用して代理プロキシを立てて解決する**…ドユコト？？となり、調べてまとめているうちに量が多くなってきたので、「もうこれ記事にして体系的にまとめたほうがよくね…？」と思った次第でございます。

### なぜpipコマンド等が通らないんだ！

シェル上で set proxy や set http-proxyを行っているのにも関わらず、pip先輩やaptニキはインストールに失敗します。腹が立ちますね。ウェブブラウザでのサイト閲覧は普通にできるのに、コマンドからのインストール等はできません。

ここで「**Cntlmを利用して代理プロキシを立てる**」ことで、問題を解決できます（具体的な解決法をお探しの方は、「Cntlm　apt　プロキシ」とかで検索してみてください）。

こういうことが起きる大抵の場合、プロキシサーバの認証方式は**NTLM認証**であることがほとんどのようです。

プロキシの認証方式には有名なものだとBasic認証がありますが、その中の1つにNTLM認証があります。Chrome等のウェブブラウザはNTLM認証を通過するための情報を持って行ってアクセスしてくれるのですが、Linuxやpip等のコマンドではそのような情報を持たず（か余計な情報を持って）アクセスするので認証に弾かれてしまっているようです。

なので、NTLM認証をしてくれるサーバを立てられるCntlmを使ってローカルにサーバを立て、代わりに認証をしてもらってインターネットにアクセスします。これが代理プロキシ（サーバ）というわけです。

今までクライアント⇒プロキシ⇒インターネットとなっていたのを、クライアント⇒代理プロキシ⇒プロキシ⇒インターネットとすることで、NTLM認証を通過できるようにしてaptやpipを行えるようになります。

### おわりに

プロキシに悩まされることは多々ありましたが、ゴリ押しで解決してきたので、今回ので仲良くなれた気がしています。

Cntlmでは代理プロキシから本来のプロキシサーバに向けてアクセスするように設定していますが、代理プロキシで認証した後に本来のプロキシでも一応認証はしているのでしょうか？それとも認証通過の証みたいなのを持っているので素通りしているんですかね、という疑問が残っています。有識者の方、お時間ありましたらご教授お願いしたいです。

至らぬ点あると思いますが、記事が自分だけでなくITを勉強する方々の糧になれば幸いです。
Colabのスニペットの作り方

# はじめに
スニペットの使い方を説明する機会があったので，チュートリアル式にまとめてみました．
## やること
簡単なスニペットを自作します
スニペットとして別のColabファイルに挿入してみます

## 誰向けか？
Colabをよく使うけどスニペットをまだ試していない人


# スニペットの作り方

## 全体の流れ
作り方の流れはこの通りです．
1. スニペットの呼び出し名を見出しにしたテキストセルを用意する
2. スニペットして呼び出したいコードをコードセルを書く（複数セルあっても大丈夫です）
3. 設定からスニペットとして登録する
4. 保存する

なお，Colabファイル自体の名前は適当でいいと思います（特にどこにも現れません）．  
一つのColabファイルに複数のスニペットを登録しておくこともできます．

流れだけではイメージしにくかった場合は次の【操作画面】を読んでください．
しっかりイメージできた場合は【スニペットの使い方】を読んでください．

## 操作画面

### 基本的なスニペットの作成方法
次の二つの操作画面を見てみましょう．
1.スニペットの呼び出し名を見出しにしたテキストセルを用意する
2.スニペットして呼び出したいコードをコードセルを書く（複数セルあっても大丈夫です）
![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165289/9eb34e00-0122-15be-e301-098c1edf7e42.png)
テキストセル内の文言はスニペットとして挿入を実行した際も挿入されることはないです．  
スニペットの説明などはここに書きましょう．  
また，スニペットはアルファベット順に表示されていますので，**自作のものには_などの記号をつけると探しやすい**です．  
（もちろん検索機能もありますが．．．）

### 複数スニペットの作成方法
複数のスニペットを登録する際の操作画面を見てみましょう．
![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165289/5144cf15-c6fc-1f18-498b-d502d4120e28.png)
このように，またスニペット名を見出しにしてテキストセルで呼び出したいコードを書きましょう．

### スニペットの登録方法
登録の操作画面を見てみましょう．
3.設定からスニペットとして登録する
4.保存する
![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165289/c0561829-166d-b849-ef2d-b962214e0e56.png)
【ツール】→【設定】と進んでいきます．
![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165289/133bce1a-3558-8441-2591-91bd21e4a670.png)

【サイト】→【Custom snippet notebook URL】にスニペット化するColabのURLを打ち込みましょう．
注目しているセルによってはURLに【#scrollTo=】と出ますが気にせずそのまま貼り付けましょう．
【保存】を押して保存が完了すれば登録も完了です．
※登録済みのものがあればこの画面のように表示されます．


# スニペットの使い方

## 全体の流れ
使い方の流れはこの通りです．
1. 左側の【＜＞】から登録済みのスニペットを出す
2. 【挿入】あるいは【→】を押して挿入する

例によって，イメージを具体化するために操作画面のキャプチャーを用意しました．

## 操作画面

### スニペット一覧を開く
【＜＞】を押して開いた画面を見てみましょう．
![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165289/b3cb0527-2453-f97a-e431-3e78f772f0c5.png)
左側に登録済みのスニペットの一覧が現れます．
Colabにもデフォルトで登録されているものがあります．
英語で登録されており，Aから始まるものが上に来る仕様になっています．
ただし，記号はAよりも前に来る仕様になっているので_をつけた自作スニペットたちがトップに現れる形になっています（スクロールバーがスニペットの分量を物語っています）．
また，一覧の上部に検索欄（フィルタリング欄）があり表示するスニペットを一時的に絞ることもできます．

### 挿入する
挿入する画面を見てみましょう．
2.【挿入】あるいは【→】を押して挿入する
![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165289/9d7fd9b6-a521-a9c6-07ae-04fb38b09948.png)
【挿入】あるいは【→】を押すとこのように，コードセル部分だけが挿入されます．

## サンプル
今回作成したスニペットのColabファイルをサンプルURLとして載せておきますので，試しに追加してみたい方はどうぞ．

https://colab.research.google.com/drive/1i-ZZxgNw-7hWV5l28wGJDuiyTLdy270E#scrollTo=H99i1h3-kmxF&uniqifier=1

# おわりに
スニペットの作り方と挿入方法を簡潔に説明してみました．
どこかで，スニペットにする場合とColabの雛形を作る場合の違いとかもまとめてみようと思います．  

ちなみに，同じURLを2つ登録，つまりスニペットを二重に登録してしまうと表示されなくなるようです．
POST時の Content-Type: application/json vs multipart/form-data vs application/x-www-form-urlencoded

# はじめに
- 別の意見がある場合コメントで教えてもらえると幸いです
- 間違っている部分があったらコメントで教えてもらえると幸いです

# 結論

- 場合によると思います

# フローチャート

![Flowchart (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572412/f710608c-54ca-fbc6-347f-d7ea81625ad0.jpeg)


# 比較表
||application/json|multipart/form-data|application/x-www-form-urlencoded|
|---|---|---|---|
|**表現力**|○ <br>Int,nullなどが使えるので|△<br>すべて文字列になるのでIntやnullを表すことができない|△<br>すべて文字列になるのでIntやnullを表すことができない|
|**バイナリファイル送信の簡便さ**|△<br>base64化が必要|○|△<br>base64化が必要|
|**HTTPリクエストの組み立ての簡便さ**|△<br>`{}`,`""`,`:`を使ってリクエストパラメーターを組み立てる必要があるので|△<br>boundary 文字列とContent-Disposition パラメーターを作成する必要があるので|○<br>key=value を作るだけなので簡単|
|**ペイロードのサイズの小ささ**|○<br>`{}`,`""`,`:` が入るが ○ と言えるでしょう|△<br>boundary 文字列とContent-Disposition パラメーターがあるので|△<br>パーセントエンコードで文字数が増えるので|
|**CORS時の処理量**|△<br>プリフライトリクエストが飛ぶので|○<br>プリフライトリクエストは飛ばない|○<br>プリフライトリクエストは飛ばない|
※ `HTTPリクエストの組み立ての簡便さ` は各種ライブラリがリクエスト文を作成してくれるので気にする必要はないと思います
[Azure] AAD認証 Exception calling "Open" with "0" argument(s): "A network-related or instance-specific error occurred while establishing a connection to SQL Server. The server was not found or was not accessible.

# 実行プログラム

https://docs.microsoft.com/ja-jp/azure/active-directory/managed-identities-azure-resources/tutorial-windows-vm-access-sql#access-data

のPowerShellスクリプト

> または、アプリの記述と VM へのデプロイなしでエンド ツー エンドの設定をテストする簡単な方法は、> PowerShell を使用することです。

> 1. ポータルで [Virtual Machines] にナビゲートして Windows 仮想マシンに移動し、 [概要] の [接続] をクリックします。

> :

> $SqlConnection.Open()


# エラー

```PowerShell
PS > $SqlConnection.Open()
Exception calling "Open" with "0" argument(s): "A network-related or instance-specific error occurred while establishing a connection to SQL Server. The server was not found or was not accessible. Verify that the instance
name is correct and that SQL Server is configured to allow remote connections. (provider: Named Pipes Provider, error: 40 - Could not open a connection to SQL Server)"
At line:1 char:1
+ $SqlConnection.Open()
+ ~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo          : NotSpecified: (:) [], MethodInvocationException
    + FullyQualifiedErrorId : SqlException
```

# 原因

```
$SqlConnection.ConnectionString = "Data Source = <AZURE-SQL-SERVERNAME>; Initial Catalog = <DATABASE>"

```

``` <AZURE-SQL-SERVERNAME> ``` をサーバー名だけで指定している


# 解決策

``` <AZURE-SQL-SERVERNAME> ``` をサーバー名.database.windows形式で指定
laravel コレクション クエリビルダ　Eloquent　まとめ

<h2>コレクション</h2>
<ul>
<li>データベースからデータを取得するときはコレクション型になっている。</li>
<li>コレクションとは、配列に機能を加えて使いやすくする</li>
<li>all / get / pluck / map などが使えるようになる</li>
</ul>
<p>コレクションを使用するにはヘルパー関数collectを使用する</p>
<pre>例　$collection = collect([1, 2, 3]);</pre>
https://readouble.com/laravel/7.x/ja/collections.html

<h2>クエリビルダ</h2>
<ul>
<li>SQL文を簡単にして、データベースの操作をしやすくした</li>
<li>SQLの知識が必要になる</li>
<li>記述が多くなりやすい</li>
</ul>
<p>DBから全件取得</p>
<pre>$users = DB::table('users')->get();</pre>
https://readouble.com/laravel/7.x/ja/queries.html

<h2>Eloquent(エロクアント)</h2>
<ul>
<li>LaravelのORM(オブジェクト関係マッピング)</li>
<li>ORMとは、データベースのレコードをオブジェクトとして扱える</li>
<li>クエリビルダとは違い、SQL文を書かなくてもデータを取得して表示できる</li>
<li>記述が少なくて済む</li>
<li>個人的には、直感的に扱えるからエロクアントの方が使いやすい</li>
</ul>
<p>DBから全件取得</p>
<pre>$users = User::all();</pre>
https://readouble.com/laravel/7.x/ja/eloquent.html
伝わる文章作成の基本を学ぶための記事・学習コンテンツのまとめ

短いメッセージを書くことはできても、まとまった文章を書くのに苦労している人は多いのではないでしょうか。

この記事では、まとまった文章を作るときの技術を学ぶことができる記事や学習コンテンツを紹介します。新人エンジニア向けです。

# 文章の「型」を学ぶ

まとまった文章を書くには、「型」が必要です。頻繁に使うものは、「型」を覚えてしまいしましょう。

## バグレポートの書き方を学ぶ

https://mixiengineer.hatenablog.com/entry/2012/10799/

エンジニアとして書く文章の代表例が、バグレポートです。

バグレポートでありがちな失敗として「何が問題だと思っているのか」が伝わらないというものがあります。
これを防ぐために、「期待する結果」「実際の結果」「再現手順」の3つを必ず書くようにしましょう。


## 質問の書き方を学ぶ

https://qiita.com/seki_uk/items/4001423b3cd3db0dada7

エンジニアが扱う技術は、最初はわからないことだらけです。
それを解決するために、質問の文章を作成する技術が必要となります。

概ね下記の4つの情報があれば、良い質問だと言えるでしょう。

- 何のためにやっているのか
- 何がわからないと思っているのか
- 自分で何をどこまで調べたのか
- エラーメッセージなどを貼り付ける

## 議事録の書き方を学ぶ

https://www.atmarkit.co.jp/ait/articles/1705/08/news008.html

議事録の書き方を解説したページです。ポイントとして列挙されているうち、下記の2つは特に大事です。

- 「決定事項」と「ToDo」は全て明示する
- ToDoには「担当者」と「期限」を設定する

ただし、ポイント中の「役職名で表示」などは、所属する企業によっては不要かと思います。
個人的には、社内での仕事で、特に役職名を意識したことはありませんので・・・。
また、Wordにこだわることもないと思います。

具体的な文章に対して、読みやすい議事録の書き方を解説しているページもあります。

https://zenn.dev/e99h2121/articles/f2f5fdb5079ad2

# 動画で学ぶ

LINE株式会社 テクニカルライターの矢崎 誠さんによる動画です。
1つあたり30分程度で、具体的な実例をもとに学ぶことができます。

## これだけ気を付けて書いてもらえるとみんな幸せになるポイント2つだけ

https://www.youtube.com/watch?v=nmFVXJGiCxM&list=PL80ip6bOwQsIfO757li02S42XDdWdnmED&index=2&t=1017s

- 何を指しているのかを明確にするために、文章中の「名前」を大事にする
- 読者との距離を近づけるために、タイトルと概要に時間をかける

## 説明の順番も大事な情報

https://www.youtube.com/watch?v=A8MDWZyusgw&list=PL80ip6bOwQsIfO757li02S42XDdWdnmED&index=3&t=941s

- 文章は「思いついた順」に書いてよい
- ただし「並べる順番」に気を配る

# 手を動かして学ぶ

手を動かして学べるような、練習問題が用意されているページです。

## 読みやすい文章の書き方を学ぶ

[書籍『数学文章作法』](https://www.hyuki.com/mw/)の著者である結城浩先生が公開されているページです。

https://www.hyuki.com/wl/

- 文を短くしましょう
- 適切な単語を選びましょう
- パラレリズムを使いましょう
- 自然な順序で書きましょう
- 語順を変えてみましょう
- 重要点は2回書きましょう
- よい比喩を使いましょう
- まずはどんどん書きましょう
- 接続詞をうまく使いましょう
- ストレートに書きましょう

## 記述パターンを学ぶ

以下は、過去に私が書いた記事です。
文章の型(記述パターン)を覚えると、文章をうまく作成することができます。

- [手を動かして学ぶ文章作成の技術[第1回：列挙の記述パターン]](https://zenn.dev/flyaway/articles/55238011acb4e6)
- [手を動かして学ぶ文章作成の技術[第2回：具体例の記述パターン]](https://zenn.dev/flyaway/articles/41576da97ecaf3)
- [手を動かして学ぶ文章作成の技術[第3回：比較の記述パターン]](https://zenn.dev/flyaway/articles/37f2c0721d59e7)


# 文章校正を学ぶ

## 漢字とひらがなの使い分けを学ぶ

山之内総合研究所による「漢字書きが適当な語」と「ひらがな書きが適当な語」のまとめです。
すべて覚えるのは難しいですが、ある程度は暗記できるのではないかと思います。

- [「ひらがな書きが適当な語」の例－副詞、接続詞を中心にして－](http://www.yamanouchi-yri.com/yrihp/techwrt-2-4s/t-2-4s03fa.htm)
- [「ひらがな書きが適当な語」の例－名詞、動詞を中心にして－](http://www.yamanouchi-yri.com/yrihp/techwrt-2-4s/t-2-4s03fb.htm)
- [「漢字書きが適当な語」および「漢字書きとひらがな書きの使い分けが適当な語」の例](http://www.yamanouchi-yri.com/yrihp/techwrt-2-4s/t-2-4s03fd.htm)

## 機械に文章校正させる方法を学ぶ

エンジニアたるもの、機械に自動的なチェックをさせましょう。
個人的には、textlintを使った方法をおすすめします。

https://qiita.com/takasp/items/22f7f72b691fda30aea2

https://qiita.com/e99h2121/items/10958410fc19f915d30d
スライドショーの文字列ver-PGM

<h3>スライドショーの文字列ver-PGM</h3>
行ごとにスライドする時間を設定できるスライドショーのhtmlタグ付き文字列版PGMを作ってみました
<hr>
サンプルPGM-GitHub:https://github.com/NanjoMiyako/SlideString

サンプルページ:https://nanjomiyako.github.io/SlideString/

<hr>
使い方

スライド文字列ファイルをロードしてからスライド文字列ショーの自動再生ボタンを
押すと再生します。

スライド文字列ファイルは以下の形式で入力していきます

スライド文字列ファイル:
次のスライドまでの表示時間(ミリ秒)#=#表示する文字列(htmlタグ含む)
以下繰り返し...

<hr>
サンプルスクリーンショット
![screenshot1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412430/f2ad9570-fe09-ca68-42d2-a001d995c328.jpeg)
RubyとRuby on Rails の特徴

#RubyとRuby on Rails の違いについて
簡単に説明すると、Ruby=プログラミング言語で、Ruby on RailsはRubyを使ったWebフレームワークです。
Webフレームワーク・・・Webアプリケーションを開発するのに必要な機能があらかじめ用意された仕組み
#修正
タグが正しく付けられていませんでした。編集リクエストをしてくれた方ありがとうございます。
#Rubyの特徴
特徴としては
1.インタプリタ言語で実行エンジンが１行ずつ実行する方式でプログラム作成時に実行できるため、エラーが発見しやすいこと
2.Windows,Linux,MacOSなどのいろいろな環境で動作可能なマルチプラットフォームであるため汎用性が高い
3.初期のリリース時からオブジェクト指向が考慮されていた純粋なオブジェクト指向言語
などが挙げられます。
#Rubyを使うメリット
1.文法や書式がシンプルに構成されており読みやすい
2.動的型付の言語のため変数に型宣言が不要
#Rubyを使うデメリット
1.コードを実行する際に１行ずつコンピュータが読み取りやすいように機械語に翻訳していくインタプリタ言語であるため実行速度が遅い
2.複数人などでWebシステムの開発などのプロジェクトを進める際に同一コードベースに複数のコーディングスタイルが混在してしまう
#Ruby on Railsの特徴
1.DRY(Don't Repeat Yourself)
Ruby on Railsでは同じコードを繰り返し書くことを避け、保守管理しやすい状態に保ちバグを減らすことができます。記述するコードが短くなることにより効率よく開発することができます。
2.CoC(Convention Over Configuration)
Ruby on Rails自体で規約を用意しているため、規約に則ったコードを書くことにより記述量を少なくすることができ、早い開発が可能になります。
3.フレームワーク内のメールに従って、ソースコードなどを記述することによって、フレームワークの機能を最大限に用いることができます。
4.国内外問わず多くの企業が導入しているため、書籍やWeb上の情報もたくさんあり、情報収集や学習が容易です。
5.Ruby自体が日本語のドキュメントが豊富です。
#関連記事
[Rubyを理解する！初心者でも分かるメリット・デメリット、基礎知識などを簡単に解説！](https://anken-hyouban.com/blog/2020/06/11/ruby/#the_post_7)