OmniAICreator/Qiita-1.07M huggingface dataset:
[JavaScript][iframe]別のフレームの入力フォームにアクセスしたい。

iframeでフレームを分けているWebサイトのようなものを作っているのですが。
フレームをまたいだDOM操作が難しく感じたので、備忘録として残しておきます。

![スクリーンショット 2021-02-26 134057.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625265/2f86f0cc-416b-c4fa-c68a-0525a10a1e08.png)

index.htmlで左のフレーム、右のフレームそれぞれファイルを呼び出し、フレーム化しています。
今回のイメージは左のフレームのテキストをクリックして、右のフレームのフォームに入力するイメージです。

left.htmlの\<p>タグをクリックするとindex.jsのinputText()ファンクションが発火するという流れです。

###別フレームの要素にアクセスするための構文
```
parent.フレーム名.document.要素名称.プロパティ

//↓今回の場合
parent.right_frame.document.getElementById('target');
```
のようになります。

```html:index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <iframe src="left.html" name="left_frame"></iframe>
    <iframe src="right.html" name="right_frame"></iframe>
</body>
</html>
```
```html:left.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="index.js"></script>
</head>
<body>
    <p onclick="inputText()" id="text">この文章を右フレームのフォームへ</p>
</body>
</html>
```
```html:right.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="index.js"></script>
</head>
<body>
    <p onclick="inputText()" id="text">この文章を右フレームのフォームへ</p>
</body>
</html>
```
```javascript:test.js
function inputText() {
    var frame = parent.right_frame;
    var input_form = frame.document.getElementById('target');
    var element = document.getElementById('text').textContent;
    input_form.value = element;
}
```

基本的にはこれで大丈夫と思うのですが、Google ChromeではDOMExceptionという例外が発生する可能性もあります。
ぼくは発生してしまいました、、

クロスオリジンフレーム（？よくわからん）絡みのエラーなので、Eclipseなりでサーバー立ち上げて、試してみると無事に動きました。
【備忘録】Promiseを一定数ごとに実行する

# はじめに
promise使用の処理を指定件数毎に実行する方法を記録しておきます
環境的にasync,awaitを使用した書き方はできないため、一昔前(?)の書き方になっています。

まだまだ分かっていないことも多いので、気になることがあれば教えてください。

# １件ずつ実行
引数で渡された配列の件数分、１件ずつ処理する

```javascript:sample
function execute(documentList) {
  return new Promise(function (resolve, reject) {
    // 最初はresolveを設定
    var p = Promise.resolve();
    // 処理したい件数分、p.then().p.then()…でつなげます
    documentList.forEach(function () {
      p = p.then(function () {
        return slowProcess();
      });
    });

    // 処理結果を判定する
    p.then(function () {
      // すべての処理が成功
      return resolve();
    }).catch(function (e) {
      return reject(e);
    });
  });
}

execute(documentList);
```

# 一定数毎に実行
全部で100件行いたい処理を、10件ずつ処理する

```javascript:sample

function execute() {
  return new Promise(function (resolve, reject) {
    // 処理開始のindex
    var currentIndex = 0;
    // 1回あたりの処理件数
    var concurrency = 10;
    // 処理済み件数
    var processCount = 0;
    // 処理する全件数
    var countMax = 100;

    dividePromise(currentIndex)
      .then(function () {
        // ・・・処理成功後にしたいこと記述
        return resolve();
      }).catch(function (e) {
        return reject(e);
      });

    /**
     * 指定した回数で分割実行
     * @param {integer} cIndex 処理開始の件数
     */
    function dividePromise(cIndex) {
      return new Promise(function (resolve, reject) {
        var chunks = [];
        // 実行したい件数分、配列へ設定
        for (var i = cIndex; i < cIndex + concurrency; i++) {
          if (i >= countMax) { break; }
          chunks.push(slowProcess());
        }
        // 設定した分をPromise.allですべて実行
        Promise.all(chunks)
          .then(function (results) {
            // 処理済み件数を更新
            processCount += results.length;
            // 全件処理したため、終了
            if (countMax === processCount) { return resolve(); }
            cIndex += concurrency;
            // 再呼び出し
            return resolve(dividePromise(cIndex));
          }).catch(function (e) {
            return reject(e);
          });
      });
    }
  });
}


```


```javascript:slowProcess
/**
 * とっても重い処理
 */
function slowProcess() {
  return new Promise(function (resolve) {
    setTimeout(function () {
      console.log('test');
      return resolve();
    }, 20000);
  });
}
```
kustomizeでマニフェストファイルの環境ごとの変数を管理する

## kustomize
- yamlファイルだと変数定義など環境ごとの設定がやりにくいので、そのような要望に対応したパッケージ
- baseとなるyamlファイル群に対して、パッチと呼ばれる差分を適用し、その差分を管理する
- https://github.com/kubernetes-sigs/kustomize/tree/master/examples/helloWorld

## コマンドインストール

```bash
wget https://github.com/kubernetes-sigs/kustomize/releases/download/kustomize%2Fv4.0.1/kustomize_v4.0.1_linux_amd64.tar.gz
tar xvzf kustomize_v4.0.1_linux_amd64.tar.gz
sudo mv kustomize /usr/local/bin
chmod 755 /usr/local/bin/kustomize
```

## baseを作成

### base/deployment.yaml

```yaml
apiVersion: apps/v1
kind: Deployment
metadata:
  name: my-nginx
spec:
  selector:
    matchLabels:
      run: my-nginx
  replicas: 2
  template:
    metadata:
      labels:
        run: my-nginx
    spec:
      containers:
      - name: my-nginx
        image: nginx
        ports:
        - containerPort: 80
```

### base/kustomization.yaml

```yaml
apiVersion: kustomize.config.k8s.io/v1beta1                                                        
kind: Kustomization
metadata:
  name: arbitrary

# Example configuration for the webserver
# at https://github.com/monopole/hello
commonLabels:
  app: nginx

resources:
- deployment.yaml
```

## パッチ
- staging環境を作るとする
- replicasetの数をbaseだと2、stagingだと3としたい

### overlays/staging/deployment.yaml


```yaml
apiVersion: apps/v1
kind: Deployment
metadata:
  name: my-nginx
spec:
  selector:
    matchLabels:
      run: my-nginx
  replicas: 3 
```

### overlays/staging/kustomization.yaml

```yaml
namePrefix: staging-
commonLabels:
  variant: staging
  org: acmeCorporation
commonAnnotations:
  note: kustomized staging
bases:
- ../../base
patchesStrategicMerge:
- deployment.yaml
```

## 実行

### パッチ適用されたyamlファイルの出力
- パイプで渡したりする
```
kustomize build overlays/staging/
```

```yaml
apiVersion: apps/v1
kind: Deployment
metadata:
  annotations:
    note: kustomized staging
  labels:
    app: nginx
    variant: staging
  name: staging-my-nginx
spec:
  replicas: 3
  selector:
    matchLabels:
      app: nginx
      run: my-nginx
      variant: staging
  template:
    metadata:
      annotations:
        note: kustomized staging
      labels:
        app: nginx
        run: my-nginx
        variant: staging
    spec:
      containers:
      - image: nginx
        name: my-nginx
        ports:
        - containerPort: 80
```

### マニフェストファイルのデプロイ
```
kustomize build overlays/staging/ | kubectl apply -f -
```
【PHP】文字列の入った変数をあたかも関数みたいに使ってる記法をたまに見かけるけどあれって何？

## 初めに

タイトルの通りのことをソースコードを眺めているときに思ったのでそれについて調べたことをまとめた備忘録です。

`Laravel`により提供されている`Illuminate`配下のソースコードを眺めているときになんだこれ？って思ったのがきっかけです。

以下、なんだこれ？って思った処理のあるソースコード。

```php:Illuminate/Auth/AuthManager.php
protected function resolve($name)
{
    $config = $this->getConfig($name);

    // ～～中略～～

    $driverMethod = 'create'.ucfirst($config['driver']).'Driver';

    if (method_exists($this, $driverMethod)) {
        return $this->{$driverMethod}($name, $config);  // ★
    }

    // ～～後略～～
}
```

★のところに注目してください。この部分の`$this->{$driverMethod}($name, $config)`がなにをしているのかが疑問だったのでその疑問を解決すべく調べてみました。


## この表記はどうやら可変関数というらしい

>PHP は可変関数(variable functions)の概念をサポートします。 これにより、変数名の後に括弧が付いている場合、その値が何であろうと PHPは、同名の関数を探し実行を試みます。 この機能は、コールバック、関数テーブル等を実装するために使用可能です。
引用：[PHP: 可変関数 - Manual](https://www.php.net/manual/ja/functions.variable-functions.php)


例えば、

```php

function foo()
{
    echo "Foooooo in foo()";
}

$method = "foo";
```

のように`foo()`と、関数名と同じ名前の文字列を持つ`$method`変数があったとします。

このとき`$method()`のように、`$method`の後ろに丸括弧を付けてみましょう。

するとPHPが自動で`$method`の文字列と同名の関数を探し出して実行してくれます。これが可変関数という概念らしいです。

```php
$method(); // "Foooooo in foo()"が出力される
```

## それを踏まえてさっきのやつを見直してみる

以上で記事の主題は解決しました。ですが、せっかくなので先ほどの`Illuminate/Auth/AuthManager.php`がなにをやっているのかを追えるとこまで追っていきましょう。

以下、再掲です。

```php:Illuminate/Auth/AuthManager.php
protected function resolve($name)
{
    $config = $this->getConfig($name);

    // ～～中略～～

    $driverMethod = 'create'.ucfirst($config['driver']).'Driver';  // 1. 

    if (method_exists($this, $driverMethod)) {  // 2.
        return $this->{$driverMethod}($name, $config);  // 3.
    }

    // ～～後略～～
}
```

このメソッドが呼び出される状況を、

* `$name`には"web"という文字列
* `$config`には`getConfig($name)`メソッドによって `['driver' => 'session', 'provider' =>'users']`という連想配列

がそれぞれ代入される、というように仮定します。

それを踏まえて番号のついた行を詳しく見てみましょう。

**1. の処理**

```php
$driverMethod = 'create'.ucfirst($config['driver']).'Driver';  // 1. 
```

`ucfirst()`という関数はPHP組み込みの関数で、引数がアルファベットの文字列なら頭文字を大文字に変換して返すという処理をしてくれます。

なので、`$config['driver']`が`"session"`であることを踏まえると、`$driverMethod`には`'createSessionDriver'`という文字列が代入されます。

**2.の処理**

```php
if (method_exists($this, $driverMethod)) {  // 2.
```

こちらも1. と同様に`method_exists()`というPHP組み込みの関数が使われています。

これは第1引数に指定したクラスオブジェクトに、第2引数で指定した名前のメソッドが定義されているかを真偽値で返してくれる関数になります。

それを踏まえると2. の処理は`AuthManager`クラスに`createSessionDriver`という名前のメソッドが存在するか、という条件分岐を行っている処理だということが分かりました。

**3.の処理**

```php
return $this->{$driverMethod}($name, $config);  // 3.
```

3.の処理において先ほど説明した可変関数の概念が使われています。

いままで説明してきたことを踏まえると、この処理は`$this->createSessionDriver($name, $config);`であるということが明らかとなりました。

以下、本題からそれるので簡単な説明になりますが、この`createSessionDriver()`によってLaravelではセッションによる認証機能の提供が行われることになります。

よく見かける、

```php
Auth::user();
```

といった`Auth`ファサードによるユーザー情報の取得処理にも、この`createSessionDriver()`から提供されている認証機能が使われています。


## 終わりに

Laravelのファサードの実体を追っている中で疑問に思ったことをまとめてみました。

次回はファサードの実体がどこにあるかを追ってみて、その調査結果をまとめてみたいと思います。
Raspberry Pi 4BにUbuntu20.04でサーバー構築し、Nextcloudを導入してみた。第１回

第１回　現在のページ

- Ubuntuのインストール
- Raspberry Piの準備
- キーボード・ユーザー設定
- プライベートIPアドレス固定化

[第２回](https://qiita.com/infran00bie/private/e734dd860ec669c14ab7)

- SSH公開鍵認証
- サーバー側ファイアウォール
- swap領域の作成
- タイムゾーン・ホスト名設定など

[第３回](https://qiita.com/infran00bie/private/39eabe6c4e78b5bc81c9)

- SSDマウント
- ドメイン取得・DDNS設定
- Nextcloudインストール
- サーバー・ルーターのポート開放
- SSL証明書取得

[第４回](https://qiita.com/infran00bie/private/dd5563fc9ba0ddced10e)

- Nextcloudへの外付けSSD認識
- 2要素認証
- 通知メール設定
- 主な参考元

※第２回以降は限定公開となっておりますが、どなたでも閲覧して構いません。

#先に用意するもの

>Raspberry Pi 4B　(妥協するなら3Bでも可)
8GB以上のmicroSD
SSD(usb3.0以上対応)
usbタイプのキーボード
HDMIケーブルと対応するモニター
イーサネットケーブル(Cat6以上推奨)
PC(私はWindows 10 OSのものを使用)

#1. Ubuntuのインストール

まず、PCで[ラズベリーパイ公式サイト](https://www.raspberrypi.org/software/)よりRaspberry Pi Imagerをダウンロード。
8GB以上のMicroSDをPCに差し込む。
ダウンロードしたimagerをインストールし、起動。
imagerが起動したら、OSは```ubuntu server 20.04 LTS```を選び、挿入したSDカードを選択して書き込む。


#2. Raspberry Piの準備～起動
付属の説明書通りに組み立てます。私はビニル手袋を嵌めて作業しました。
各差込口がきちんと嵌まっているかよく確認してネジ止め。
組みあがったら、ubuntuをインストールしたSDカード、usbキーボード、ルータと繋いだイーサネットケーブル、モニタに繋いだHDMIを予め差し込んでから起動。

初回ログインは

```shell
login: ubuntu
password: ubuntu
```

でログインします。
(ちなみに私の場合、何故か上記のとおり入力して何度やっても上手くいかず、翌日になると正常にログイン出来ました・・・)
初回ログイン直後に現在のパスワード```ubuntu```と新しいパスワードの入力を求められるので、入力完了したらいよいよ各種設定です。



#3. キーボード・ユーザー設定
ラズパイ版ubuntuでは最初にキーボードレイアウトを日本語に設定する必要があります。

```shell
$ sudo dpkg-reconfigure keyboard-configuration
```

で対話形式の設定画面に移り、
```Generic 105-key PC (Intl.)``` 
↓
 ```Japanese``` 
↓
 ```Japanese``` 
↓
 ```The default for the keyboard layout``` 
↓
 ```No compose key```
と選択して設定完了後、再起動すると反映されます。

次に、デフォルトのubuntuユーザーを使うことはセキュリティ上好ましくないので、新たなユーザーを追加した上でユーザーubuntuを削除します。

```shell
$ sudo adduser ユーザー名
```

でユーザーを追加出来ます。ユーザー名の```先頭はa-z```、```以後はa-zと0-9```しか使用出来ないことに注意(環境変数を変更することで他の文字も使用出来ますがここでは割愛)。

加えて、sudoコマンドでルート権限で実行できるように、以下のコマンドでユーザーをグループsudoへ追加します。

```shell
$ sudo gpasswd -a ユーザー名 sudo
```

再起動した後、新しいユーザー名でログインし、

```shell
$ sudo userdel -r ubuntu
```
でデフォルトユーザーを削除して完了です。

#4. プライベートIPアドレスの固定化

PCからSSH接続でサーバー設定を行うため、プライベートIPアドレスを固定化します。

```shell
$ sudo vi /etc/netplan/99-config.yaml
```

でファイルを開き、以下の様にネットワーク設定を書き込みます。

```shell
network
  　　　version: 2
  　　　renderer: networkd
  　　　ethernets:
    　　　　　　 eth0:
      　　　　　　　　　 dhcp4: false
      　　　　　　　　　 dhcp6: false
      　　　　　　　　　 addresses: [   .   .   .   /24 ] 空欄にサーバーに設定するIPアドレスを入力
      　　　　　　　　　 gateway4:    .   .   .   空欄にデフォルトゲートウェイのIPアドレスを入力
      　　　　　　　　　 nameservers:
        　　　　　　　　  　　　 addresses: [   .   .   .   , 8.8.8.8 ] 空欄にDNSサーバーのIPアドレスを入力
```

>各種IPアドレスの設定は、コマンドプロンプト(Win)の```ipconfig /all```などでLANのサブネット及び、デフォルトゲートウェイ、DNSサーバのアドレスを確認した上で行ってください。

下記コマンドで設定を反映。

```shell
$ sudo netplan apply
```

その後、以下のコマンドでeth0が```state UP```、```inet```の欄が設定されたIPアドレスになっていれば成功です。

```shell
$ ip addr
```

ここまで出来たら、PCで[PuTTY](https://putty.softonic.jp/)をダウンロードし、Host Name欄に```サーバーのIPアドレス```を、Port欄に```22```と入力、Connection typeの```SSH```を選択することでSSHでのログインが可能です。

初回起動時には接続先が正しいかを確認されますが```yes```で大丈夫です。これによってホスト認証キーがPC側にも保存され、以後は確認されなくなります。
データベースとは？

## はじめに
今回は、プログラマー必須(仕事の80%は絡む)のデータベースについてまとめました。
初学者であり、理解が薄いため、自分なりにわかりやすく書いています。
間違いがあればご指摘お願いいたします！


# データベースとは？

巷に溢れる膨大な事柄を、情報として活用していくための一つの手段です。
**簡単に言っちゃうと、データを保存して格納してくれてる子です。**

また、データベースには、管理方法や得意分野によってさまざまな種類のデータベース管理システム(**DBMS** *Database Management System*)があります。

その中でももっとも使われているのが**リレーショナルデータベース(RDB)**です。

## RDBとは？

リレーショナルデータベースの略で、二次元の表の形で管理できるデータベースのことです。

個人で使うものから、大規模かつ多量のデータを扱うものまで幅広く活用できます！

**参考画像**
![rdb.example.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1101585/1e30d25e-bf47-55a4-759c-8f2004bbcb6a.png)


このRDBの中にもいくつか種類があります。
MYSQL、PostgreSQL、Oracleなどがありますが、**MySQL**の人気が圧倒的だそうです。
理由は、無料、仕事現場での使用例が多いためです。特にこだわりがなければMySQLを使うといいかと。


## データベースの中身

もっと細かい話をすると、データベースにただ保存すればいいわけでなく、**情報の種類ごと(ユーザー情報、商品情報、コメント情報など)に整理して保存**しなければいけません。
そんなときに使うのが、**テーブル**です！

### テーブル
- テーブルとは、データベース内に作成される、データを表形式で収納する場所です。
- データベースには、そのままデータを直接保存できない仕組みになっています。目的に沿ったテーブルを用意し、テーブルにデータを保存して管理しています。

### レコード・カラム
RDBでは、テーブルは表形式でデータを保存しています。表といえば**行(横)**と**列(縦)**が存在しますよね！
ここでは**行をレコード**、**列をカラム**と表現するので覚えておきましょう。


# データベースの操作
データベースに値を保存したけれど、本当にできたか分からない...そんな時に、二つの手段で確認することができます。

某プログラミングスクールでは、**Sequel Pro**を活用して、上記の表のように可視化していました。
みるだけでなく、変更や追加もできます。

[Sequel Proの詳細についてはこちら様を参照](https://agency-star.co.jp/column/sequel-pro)

これ以外にも、ターミナル上で操作する方法があります。
それが**SQL**です。

# SQL
DBを操作するための言語が**SQL**です。　
コマンドを使ってターミナル上で実行します。参照、追加、削除などができます。

**操作するにあたって、構文が多数存在します。**
こちらの方が丁寧にまとめてくださってますので参考にしています。
▶︎[SQL構文](https://qiita.com/tatsuya4150/items/69c2c9d318e5b93e6ccd)

SQLの操作・詳細につきましては、まだ学習不足のため、後日まとめていきます。
お疲れ様でした！
オブジェクトがBoxColliderの中に完全に入っているかどうか判定する

オブジェクトが完全にコライダーの中に入っているかどうか？を判定するためのコードを組みました。

![BoxCheck01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1146955/61145c16-7124-d81e-551a-e1e63a89a67a.png)
![BoxCheck02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1146955/51b031ab-1ec0-cc39-9755-48e407d5e614.png)
![BoxCheck03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1146955/948a9d75-d3b5-ff4d-4af3-6355efe7b074.png)

[BoxColliderの各面をPlaneとして取得するスクリプト](https://qiita.com/RYUMAGE/items/8fc826825ef27e178225)
と
[Vector3操作スクリプト（ランダム方向、要素の最大値を取得）](https://qiita.com/RYUMAGE/items/93f49f77332c41493f91)
はこの処理をするためのものです

```C#:ColliderFullyInsideCheck.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class ColliderFullyInsideCheck: MonoBehaviour
{
    private Material material;
    private Color DefaultColor;
    private Color ChangeColor = Color.green;

    public SphereCollider TargetCollider;

    void Awake()
    {
        material = GetComponent<MeshRenderer>().material;
        DefaultColor = material.GetColor("_Color");
    }

    public bool isColorChange
    {
        set
        {
            material.SetColor("_Color", value ? ChangeColor : DefaultColor);
        }
    }

    public bool isColliderFullyInside(BoxCollider box, SphereCollider sphere)
    {
        float radius = Calc.MaxElementOfVector3(sphere.transform.lossyScale) * sphere.radius;
        Vector3 center = sphere.transform.TransformPoint(sphere.center);

        int inside_count = 0;
        Plane[] planes = Calc.GetBoxColliderPlanes(box);
        for (int i = 0; i < 6; i++)
        {
            float inside_distance = planes[i].GetDistanceToPoint(center);
            if (-inside_distance >= radius)
            {
                inside_count++;
            }

        }
        return inside_count == 6;
    }

    // Start is called before the first frame update
    void Start()
    {

    }

    // Update is called once per frame
    void Update()
    {
        isColorChange = isColliderFullyInside(GetComponent<BoxCollider>(), TargetCollider);
    }
}

```
なんとなくIPアドレスとゲートウェイの設定している人にルーティングを交えて要点をまとめて説明したい

#はじめに
私がエンジニア1年目の時にIPアドレス・GW・ルーティングの関係性をよく理解せずに
ネットワーク切替業務をしていて、作業内容を答えられないなど苦い経験をしました。
というのも覚えることが多く、勉強している間に忘れてしまっていたので、
なかなか理解しきれない方に向けて、ポイントで説明していきたいと思います。

#IPアドレス
まずはIPv4のIPアドレス（以降IP）の最低限の知識から。

〇IPについて
　0～255が4つに区切られた機器や仮想マシンの論理番号。
　基本的にはIPを設定して各機器同士が通信を行います。

![IIP.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596030/c79f4844-b863-1280-682d-f067ced9521b.png)


　IPにはプライベートアドレスとグローバルアドレスがあり、
　プライベートアドレスは家の中や会社の中で使い、グローバルアドレスはインターネット上で使うもので
　以下のプライベート側のIPの範囲を覚えれば、それ以外はグローバルと覚えられます。
![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596030/c82efd17-8907-2fdc-7a0f-5d570abde9f4.png)

〇サブネットマスクについて
　通信をするのには欠かせずIPに紐づいて、通信ができる範囲を決めるものになります。
　IPと同じように0～255が4つに区切られた数字の羅列や/0〜/32で表されます。

　以下の例だとサブネットマスクの255に紐付く箇所が決められたネットワークの範囲となり、
　通信できる範囲は【192.168.1.0～192.168.1.255】で256個分のIPが持て、
　256個の機器や仮想マシンに割り当てて相互の通信が可能になっています。
　※正確には最初(192.168.1.0)と最後(192.168.1.255)のIPは他で使われるため、254個になる
![図3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596030/3fcbf979-b46b-1836-2b7f-23c1f8bb47b2.png)

　通信できる範囲をセグメントや同セグメントと呼んだりします。　
　以下のサイトでIPとサブネットマスクを入れると通信できる範囲(ホストアドレス)を計算してくれるので
　まずはホストアドレスのIP同士が通信できると覚えてみてください。
　参照サイト：https://note.cman.jp/network/subnetmask.cgi

　少し詳細にお話するとサブネットマスクは前述の通り/0から/32まであり、
　区切られ方によって通信できる範囲も細かく変わっていきます。
　細かい区切りは計算が必要ですが、4つ区切りごとにサブネットマスクは8の倍数になっているので、
　そこを覚えておくとある程度通信できる範囲を押さえることができます。
![図6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596030/2fef92ba-cc1f-7b4b-1923-6799f36fe715.png)

#GW(ゲートウェイ)
ゲートウェイについて説明します。
同セグメント以外のセグメントに通信をしたいときのご意見番・通信を託す機器などになります。
通常、同セグメント内で割り当てられたIP同士でしか通信はできませんが、
ゲートウェイを指定することによって別のセグメントにも通信ができるようになります。
※ゲートウェイが通信先のセグメントの情報を知っている必要がある。
呼び方はネクストホップやデフォルトゲートウェイ(略してデフォゲ)とも呼ばれたりします。

#ルーティング
主に別セグメントに通信を橋渡しすることを指します。
PC、ゲートウェイ、L3SW、FW…全ての機器や仮想マシンはルーティングのテーブルを持っています。
自身がもっているIPとGW、追加したルーティングの情報が載っています。
※デフォルトで入ってるルーティング情報もある。
通信が始まる際にルーティングテーブルを参照し、宛先のIPが自身のIPのセグメントならそのIPが設定されているポートに通信を流します。

以下の絵でPC-AとPC-BがGWに接続されている構成があるとします。
PC-Aは宛先のIPがルーティングテーブルをあるか確認し、そのIPが自身のIPのセグメントではなく、
追加したルーティング情報もない場合にGWに通信を託します。
通信を受け取ったGWも自身のルーティングテーブルを確認して、
ルーティングテーブルの情報からネットワークの宛先に該当すればそのゲートウェイに通信を流します。
受け取ったPC-Bも通信を返す際に同じ段取りを踏んで、別セグメント同士の通信ができる流れになります。

![図4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596030/1fe8b8f4-b38b-756d-98be-e6c388bb3060.png)

#さいごに
IPにはIPv6があったり、ルーティングを追加した時の挙動などを書けてないですが
まずは上記を理解して基本的な通信に必要なものを覚えてもらえると嬉しいです。
【TypeScript】TypeScriptの継承

#TypeScriptの継承
* TypeScriptでは、あるクラスを拡張して、特化したクラスを作れます
    * 継承は 1つのクラスのみ
    * 継承元のクラスのプロパティやメソッドを全部引き継ぐ事ができます
* 継承元のクラスを親クラス/スーパークラス（super class）、継承するクラスをサブクラス（sub class）と言います

```ts
class subClass extends superClass {
}
```

* subClassにコンストラクタを作らない状態でnewすると、親クラスのコンストラクタがよばれます


##サブクラス独自のコンストラクタ・プロパティを作成する
* `super` で、親クラスのコンストラクタを呼び出し、実行する事ができます

```ts
//部署を表す親クラス
class Department {

  private employees: string[] = [];

  constructor(private readonly id: string, public name: string) {
  }

  describe(this: Department) {
    console.log('Department (${this.id}): ${this.name}');
  }

  addEmployee(employee: string) {
    this.employees.push(employee);
  }

  printEmployeeInformation() {
    console.log(this.employees.length);
    console.log(this.employees);
  }
}
```

* サブクラス独自のコンストラクタ・プロパティを作成

```ts
//サブクラス独自のコンストラクタを作成

class ITDepartment extends Department {
  admins: string[]; 

  constructor(id: string, admins: string[]) {
    super(id, 'IT');      //superで親クラスのコンストラクタを呼び出す
    this.admins = admins; //サブクラス独自のプロパティ
  }
}


//独自プロパティをもつサブクラスを生成
const it = new ITDepartment('d1', ['CAT']);

const it = new ITDepartment('d1', ['CAT']);
it.addEmployee('NEKKO');
it.addEmployee('WANKO');

console.log(it); //サブクラス独自のプロパティに加え、親クラスのプロパティをもつ
```

##サブクラス独自のメソッドを作成する
* 親クラスのメソッドに加え、サブクラス独自メソッドを作成できます

```ts

//サブクラス2 会計部門 - 独自メソッド追加
class AccountingDepartment extends Department {
  constructor(id: string, private reports: string[]) {
    super(id, 'Accounting');
  }

  addReport(text: string) {
    this.reports.push(text);
  }

  printReports() {
    console.log(this.reports);
  }
}

//独自メソッドを実行可能
const accounting = new AccountingDepartment('d2', []);
accounting.addReport('Reportだよ');
accounting.printReports(); //Reportだよ

```

#サブクラスから、親クラスのプロパティにアクセスする
* 親クラスのプロパティを、protected 修飾子にする事で、サブクラスからアクセスできます
* protected 修飾子：クラス内部と、そのクラスを継承したクラスから、アクセスできる修飾子です
    * cf: private修飾子では、サブクラスから、アクセスできない

```ts
//親クラス
class Department {

  //employeesは、クラス内部と、そのクラスを継承したクラスから、アクセスできる
  protected employees: string[] = [];  

  constructor(private readonly id: string, public name: string) {
  }

  addEmployee(employee: string) {
    this.employees.push(employee);
  }
}
```

#親クラスのメソッドのオーバーライドする
* 親クラスのメソッドを引き継ぎ、書き換えることも可能です

```ts
//親クラス
class Department {

  //employeesは、クラス内部と、そのクラスを継承したクラスから、アクセスできる
  protected employees: string[] = [];  
  constructor(private readonly id: string, public name: string) {

  }

  addEmployee(employee: string) {
    this.employees.push(employee);
  }
}

//メソッドを override するサブクラス
class AccountingDepartment extends Department {
  constructor(id: string, private reports: string[]) {
    super(id, 'Accounting');
  }

//override
  addEmployee(name: string) {
    if (name === 'Max') {
      return;
    }

    //employeesはprotectedなので、サブクラスからemployeesにアクセスできる
    this.employees.push(name); 
  }
}

accounting.addEmployee('MofuiNeko');
accounting.addEmployee('MofuMofuInu');
```
Serverless FrameworkでAWSクレデンシャルの管理

Serverless FrameworkでAWSクレデンシャル（AWSのアクセスキーとシークレットキー）管理する、やり方をあまり分かってなかったのですが、[direnv](https://github.com/direnv/direnv)を使って管理する方法を覚えたので書いておきます。


## .envrc

簡単にdirenvについて説明すると

ターミナルで`.envrc`があるディクレトリに移動した時に、`.envrc`に書いてある環境変数を出力してくれる。というツールです。

詳しくは [direnvとは？](https://qiita.com/naogify/items/94b7862a212887b2cdd8)をご参考ください。

### 環境変数の設定
.envrc
`xxxx` は自分のアクセスキーとシークレットアクセスキーに置き換えてください。

[【超ざっくり】AWSのアクセスキーとシークレットアクセスキーの取得の仕方](https://qiita.com/naogify/items/7f80f815b46cf0fbd1ff)


```
export AWS_REGION=ap-northeast-1
export AWS_ACCESS_KEY_ID=xxxx
export AWS_SECRET_ACCESS_KEY=xxxx
export ACCESS_TOKEN_SALT=yyyy
```


### 🚨 注意！.envrcを.gitignoreに追加
これをしないと第三者からAWSが使い放題になってしまいます。


### Serverless FrameworkへのAWSクレデンシャルの渡し方

上のように、アクセスキーとシークレットアクセスキーを環境変数としてexportすると、後はServerless Frameworkがよしなにやってくれるようです。


### その他
他にもセットアップ方法があるようなので詳しく知りたい方は以下を参考にしてください。
[Serverless Framework - AWS Lambda Guide - Credentials](https://www.serverless.com/framework/docs/providers/aws/guide/credentials#quick-setup)
Python3.7のWikiExtractor3.0.4で起こるImportError: attempted relative import with no known parent packageを解決する

##概要
Wikipediaのデータセットから文章を抽出しようとした際に

```
Import: attemted relative import with no known parent package
```
上記のエラーが起こりました。
ちなみに、[Pythonのクローリング＆スクレイピングの解説書](URL https://gihyo.jp/book/2019/978-4-297-10738-3)の5.1.1「Wikipediaのデータセットから文章を抽出する」をやっている最中に躓いたので、上記の本で詰まった方の参考にもなるかもしれません。

##経緯
まず、WikiExtractorをダウンロード。

```
$ git clone https://github.com/attardi/wikiextractor.git
```



WIkipediaのデータセットから文章を抽出

```
$ python wikiextractor/wikiextractor/WikiExtractor.py --no-templates -o <出力先のディレクトリ> -b <分割するファイルのサイズ> <抽出するダンプファイル名> 
```
ここでエラー

```
Traceback (most recent call last):
File "wikiextractor/wikiextractor/WikiExtractor.py", line 66, in <module>
    from .extract import Extractor, ignoreTag, define_template, acceptedNamespaces
ImportError: attempted relative import with no known parent package
```
調べたところ

```
既知の親パッケージがない状態で相対インポートを試みました
```
ということらしいが意味はいまいちわからず。

##解決策

WikiExtractorのREADMEによるとpipで導入可能らしい。先ほどgitでダウンロードしてしまったので削除し、改めてpipでインストールする。

```
$ pip install wikiextractor
```
モジュールなので


```
python -m wikiextractor.WikiExtractor <ダンプファイル名> --no-templates -o <出力先のディレクトリ> -b <分割するファイルのサイズ>
```
`-m`でモジュールを指定して実行する。

##まとめ

pipでモジュールとしてインストールするとエラーが起こることなく実行できました。
gitでダウンロード→実行の場合だとなぜエラーが出るのかわかる方おりましたら、コメントしていただければ幸いです。
Vector3操作スクリプト（ランダム方向、要素の最大値を取得）

非常に簡単な計算なのでその都度コードを組めばいいだけなんですが、けっこう頻度が高いのでStaticスクリプトにしてます。

Vector3でランダムな方向を取得するRandomVector3()
Vector3のxyz要素のうち最大の絶対値を持つ要素を取り出すMaxElementOfVector3(Vector3 v)

```C#Calc.cs
    public static Vector3 RandomVector3()
    {
        Vector3 v = Vector3.zero;
        v.x = Random.Range(-1.0f, 1.0f);
        v.y = Random.Range(-1.0f, 1.0f);
        v.z = Random.Range(-1.0f, 1.0f);
        return v;
    }
    public static float MaxElementOfVector3(Vector3 v)
    {
        float[] element_value = new float[] { Mathf.Abs(v.x), Mathf.Abs(v.y), Mathf.Abs(v.z) };
        return Mathf.Max(element_value);
    }
```
【超ざっくり】AWSのアクセスキーとシークレットアクセスキーの取得の仕方

こういう感じで、自分でアクセスキー発行して設定してねと言われた時の手順。

```
export AWS_ACCESS_KEY_ID=xxxx
export AWS_SECRET_ACCESS_KEY=xxxx
```

## ステップ

1. 管理画面にログイン。
2. 右上のナビゲーションバーでユーザー名を選択。
3. [My Security Credentials (セキュリティ認証情報)] 選択。
4.  [Access keys (access key ID and secret access key)] セクションから [新しいアクセスキーの作成] を選択。

これでアクセスキーとシークレットアクセスキーが表示されるはず。あとはダウンロードするなり1Passwordなどのパスワード管理アプリなどの安全な場所に保存するなりする。

**🚨 絶対に外部に漏らさない！GitHubにもPushしないで下さい**


## 参考
[IAM ユーザーのアクセスキーの管理 - AWS Identity and Access Management](https://docs.aws.amazon.com/ja_jp/IAM/latest/UserGuide/id_credentials_access-keys.html#Using_CreateAccessKey)
记录一个失败的GAN实验以及后续计划

我的想法是：让generator能够根据label来生成对应的图片，比如label为1，生成1的图片，而不是随机生成。

为了实现这个目标，我给discriminator的输入做了些手脚。

vanilla模型里，D的输入是单纯的图片向量，输出是图片为真的可能性，很简单。但是为了能强迫generator能够根据label生成图片，我给辨别器开了作弊，输入变成了(图片向量+对应label的embedding)，用torch.cat做一个简单的连接。

这样一来如果生成器不根据label embedding生成对应图片向量，就会很轻松地被辨别器识破。

其实这样的结构——concat了一个辅助向量——给我一种感觉就是很像可控VAE，更深入的分析我现在还没有时间做，总之先将结果放上来吧，这是epoch1的结果：

![epoch_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227568/b3f53a35-e2e5-6709-36e2-380864c880c5.png)

这是epoch 200的结果：

![epoch_200.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227568/8eb45f49-b1f0-aa2e-5217-24eda037ed0f.png)

我让电脑挂了一晚上，然后回去睡觉，心想明天就能坐享其成结果却是这副模样。总之分析一下出错的原因吧，先上结构图。

![Screenshot from 2021-02-26 11-20-42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227568/6b4e5482-c4b9-77d0-8a13-0c7a6a19e964.png)

我之前设想的分工如下：
Generator: 提高discrimination loss
Discriminator: 降低(discrimination loss + classification loss)

### 问题点1： 冗余classifier

现在想想我实在不明白定义一个classification loss的意义何在。也许当时的我想让discriminator同时学习鉴别真假和辨别标签，所以定义了两个输出层，然而仔细想想，鉴别真假的时候鉴别器就能利用标签label，这样的操作像是画蛇添足。总而言之我会把classfier去掉再训练一次。

### 问题点2： 错误的noise添加方式

然后我又对照了一遍网络上的实现 [GAN from scratch](https://debuggercafe.com/generating-mnist-digit-images-using-vanilla-gan-with-pytorch/)，发现他们引入noise的方式是直接作为generator的第一层输入。而之前我的实现是，让label embedding作为第一层输入，然后在中间层加上一个随机变量。

![Screenshot from 2021-02-26 11-51-26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227568/628a65f4-30ce-eb4f-0de0-d82f0f1c6784.png)

### 问题点3： loss定义方式

这是我不大愿意想象的，总之我会把它作为一个备考。

今天就继续修复实验吧。
ActionMailerでdefault_url_optionを使って環境毎にURLを変更する


config/environments/**.rb 

に環境毎のホスト名を指定して使いたくて調べた。

以下を設定すれば良いとあったのだけど、
`config.action_mailer.default_url_options = { host: 'develop.com' }`

設定後、どうすればURLが取れるかわからなかった..

しばらく以下の意味がわからなかったけど..
https://railsguides.jp/action_mailer_basics.html#action-mailer%E3%81%AE%E3%83%93%E3%83%A5%E3%83%BC%E3%81%A7url%E3%82%92%E7%94%9F%E6%88%90%E3%81%99%E3%82%8B


routesの普段pathの所をurlに変更して引数を指定すれば、URLを返してくれる。

こんなroutesの設定があったら

```
activate GET    /registrations/:id/activate(.:format)     registrations#activate
```

以下のようにcontroller ,viewで指定すればdefault_url_optionsを反映したURLが取れる

```
activate_url(@user.activation_token) 
```

ふいー
さくらのクラウド(IaaS)のアーカイブから別サーバーを立てた場合の設定 (Ubuntu 20.04LTS)

# 経緯

さくらのクラウド (IaaS) でディスクのアーカイブを作成し、これを元にサーバーを作成した場合、サーバーのネットワーク設定も前のサーバーの設定を引き継いでしまうため、外部との通信ができない。
そのため、サーバーのコンソールからログインしてネットワーク設定を書き換える必要がある。

# 方法

Ubuntu 20.04 LTS の場合は `/etc/netplan/01-netcfg.yaml` に設定が書かれているので、ここの内容を以下の通り変更する。
なお、サーバー > 詳細 > NIC で新たな情報は確認できる。

```yaml:/etc/netplan/01-netcfg.yaml
network: 
  ethernets: 
    eth0: 
      addresses: 
        - [新たに割り振られたIPアドレス]/24
      dhcp4: 'no'
      dhcp6: 'no'
      gateway4: [新たに割り当てられたゲートウェイを記載]
      nameservers: 
        addresses: 
          - [リージョンの推奨ネームサーバーのIPを記載]
          - [リージョンの推奨ネームサーバーのIPを記載]
        search: 
          - localdomain
  renderer: networkd
  version: 2
```

その後、`sudo reboot -h now` などで再起動する。

# 参考

https://tsukarooohi.com/332.html (CentOS系の場合)
Qtでウィンドウサイズを固定したときにマウスポインタがリサイズできそうな表示をしないようにする

# この記事について
Qtウィジェットアプリケーションで、ウィンドウサイズを固定したときに画像のような矢印を出さないようにする方法です。
※ここで出てくる画像はQtCreator4.9.2を使っています。
![右下カーソル.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211445/4b207167-415d-896d-4b63-19d237aff3ed.png)![真横カーソル.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211445/22bcc483-f25c-24c7-9474-6f9c9c58a66f.png)

こんな検索をしたことがある人におすすめ！

* Qt リサイズ　矢印　消す
* Qt カーソル　変更
* Qt マウスカーソル　設定　どこ



# 消す方法

2ステップあります。まずは以下の1行をMainWindowのコンストラクタに追加しましょう。

```cpp
setWindowFlags(Qt::MSWindowsFixedSizeDialogHint);
```

次に、mainwindow.uiの"statusBar"の"sizeGripEnabled"のチェックを外します。（もしくはstatusBarを削除してもOK!）
![sizeGripEnabled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211445/1ea6661d-311b-1f72-36fe-4ff50142aedb.png)

# 結果
✌
![修正後.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211445/454af6ed-44f1-dad7-fc92-2602ef0b7112.png)
Railsコマンドまとめ

よく使うRailsコマンドのメモです。
今まで何となく使っていたのですが、いい機会なので公式ドキュメントから調べてみました。

参考：[Railsドキュメント](https://railsdoc.com/rails)


## 新しいRailsアプリを作成

```Ruby:

# 基本形
$ rails new アプリケーション名 [オプション]

# オプション何もなしで作成
$ rails new sample

# mysqlを使うアプリを作成
$ rails new sample -d mysql

# バージョンを指定してアプリを作成
$rails _6.0.0_ new sample

# バージョン指定とmysql組み合わせ
rails _6.0.0_ new sample -d mysql

```

## コントローラー作成

```Ruby:

# 基本形
$ rails g controller コントローラー名

# ビューも一緒に生成
$ rails g controller sample index

```

今まで何にも知らずに`「g」`を使っていましたが、これは`generate`を省略していたんだと知りました。
ですので本来の正しい形は

```Ruby:
$ rails generate controller コントローラー名
```

ということです。
`コントローラー名は複数形で作成する`と勉強したのですが公式をみると複数形になっていないので必須というわけではないのですかね。


## モデル作成

```Ruby:

# 基本形
$ rails generate model モデル名

# 短縮
$ rails g model モデル名

```

## ローカルサーバー起動

```Ruby:

# 基本形
$ rails server

# 短縮
$ rails s

```

ローカルの`http://localhost:3000/`が起動します。


## ルーティング確認

```Ruby:
$ rails routes
```

## マイグレーション関係

```Ruby:

# マイグレーション実行
$ rails db:migrate

# ロールバック(直前に実行したものだけ)
$ rails db:rollback

# ロールバック(戻したい数を指定することで複数戻すことができる)
$ rails db:rollback STEP=戻したい数

# 状況の確認
$ rails db:migrate:status

```
前は動いていたが、最近のiPhoneで動いていないglslに巡り合ったときの対処

precision mediump float;に指定していた場合、highpに。

以前は、iPhoneでもmediumpにしてもhighp扱いで通っていたのでないかと。


Mugen先生による回答:
https://discourse.threejs.org/t/precision-highp-float-mediump-on-ios14-iphone14/23847/3

コードは下記がベター？Androidが本当に大丈夫かは未確認。

```GLSL
#ifdef GL_FRAGMENT_PRECISION_HIGH
  precision highp float;
#else
  precision mediump float;
#endif
```

予算がCSSと変わらないかそれ以下のわりにはリスクが高いWebGLですが、
環境の差異はひとりで埋めがたいので環境別情報が増えてほしいところです。
【Rails 6】favicon の設定以降、他のアプリでも同じfaviconが表示される不具合を解消

#概要
favicon を設定したものの、他のアプリのfaviconまで同じシンボル画像になっていました。

他のアプリにはfavicon を設定していないのにも関わらず、同じfaviconが設定されていることの疑問を解消しましたので、その共有です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1052793/1f224546-b46d-db48-891d-33961869036b.png)


#結論
他のアプリのfaviconも、設定することで解決する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1052793/f690f842-63ad-aae1-e8be-cbc0b1d71f7e.png)

#同じfaviconが表示されることの仮説
※調べても情報がなかったので仮説となっています。ご参考までに。

情報が保存されるcookieが原因かと仮説を立てております。

一度アプリで設定したfaviconの情報がcookie上で保存されて、他アプリを立ち上げた際にも、その保存データが残っている。デフォルトでfaviconを設定していない場合に限り、そのデータが適用され、他アプリでも同じfaviconが表示されることになるのだと考えています。

なので、他アプリ内で新しくfaviconを設定することで、固有のfaviconを設定できるのだと思います。

#補足
##faviconとは
favorite iconの略で、サイトにアクセスした際のブラウザのタブやブックマークに表示されるなど、サイトのシンボルとして重要な役割を果たします。

主にブラウザのタブや履歴、お気に入りに表示されるアイコンや、スマホでサイトをホーム画面に置いたときの表示アイコンなどのことを指します。

##cookieとは
cookie（クッキー）とは、自身が見ているWebサイトから自身のスマホやPCの中に保存される情報のこと

##faviconを設定されるまでの手順
①app/assets/imagesに画像をセットする。
（画像で言うと一番したのものになります。）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1052793/b7512a08-9378-84c4-fa65-ede51b4248f3.png)


②app/views/layouts/application.html.erbに以下のコードを設置する。
  拡張子は記述しません。ファイル名のみで問題ありません。

```app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>

# ~省略~

<%= favicon_link_tag('homekatajiten') %>

# ~省略~

</head>
```

以上です。
TD Toolbelt (Mac)のインストール

業務でTDを使うことになったので、コマンドラインをインストールしようとして、若干ハマったのでメモ

ホントはBrewでサクッとインストールできればいいと思って、調べてみたけど見つからず・・・・

まずはRubyのバージョンの確認

```
% ruby --version
ruby 2.6.3p62 (2019-04-16 revision 67580) [universal.x86_64-darwin19]
```
※これが原因でインストールに失敗する

```
$ sudo -s
% gem install td
```
※RootにならないとPermissionエラーになってインストールがポシャった

```
"xcrun clang -o conftest -I/Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/include/ruby-2.6.0/universal-darwin19 -I/Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/include/ruby-2.6.0/ruby/backward -I/Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/include/ruby-2.6.0 -I. -D_XOPEN_SOURCE -D_DARWIN_C_SOURCE -D_DARWIN_UNLIMITED_SELECT -D_REENTRANT    -g -Os -pipe -DHAVE_GCC_ATOMIC_BUILTINS conftest.c  -L. -L/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib -L. -L/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.15.Internal.sdk/usr/local/lib   -arch x86_64   -lruby.2.6   "
In file included from conftest.c:1:
In file included from /Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/include/ruby-2.6.0/ruby.h:33:
/Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/include/ruby-2.6.0/ruby/ruby.h:24:10: fatal error: 'ruby/config.h' file not found
#include "ruby/config.h"
         ^~~~~~~~~~~~~~~
/Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/include/ruby-2.6.0/ruby/ruby.h:24:10: note: did not find header 'config.h' in framework 'ruby' (loaded from '/Library/Developer/CommandLineTools/SDKs/MacOSX10.15.sdk/System/Library/Frameworks')
1 error generated.
checked program was:
/* begin */
1: #include "ruby.h"
2:
3: int main(int argc, char **argv
4: {
5:   return 0;
6: }
/* end */
```
こんなエラーが出た

なんとなく、Rubyのバージョンが怪しいと思って、バージョンを上げてみる

参考にしたのは、https://qiita.com/Ficus/items/bdef5c2b504d7a4008fb
めちゃ参考になりました


```
# ruby --version
ruby 2.7.2p137 (2020-10-01 revision 5445e04352) [x86_64-darwin19]

% gem install td

Parsing documentation for td-0.16.9
Installing ri documentation for td-0.16.9
Done installing documentation for msgpack, yajl-ruby, hirb, parallel, httpclient, td-client, fluent-logger, td-logger, rubyzip, zip-zip, ruby-progressbar, td after 3 seconds
12 gems installed
```

インストールできました
axiosの基本的な使い方

# axiosとは
HTTP通信（データの更新・取得）を簡単に行うことができる、JavaScriptのライブラリ。
APIを提供するクラウドサービスに対して、データを送受信することができる。

### インストール
```
$ npm install axios
```


### CDNの使用
```javascript

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
```
## 主なメソッド

Githubでは以下のメソッドが使用できると記載されています。

![スクリーンショット 2021-02-25 19.05.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/924294/9db04449-35ff-10ce-703d-cdfb96b4fd40.png)
今回は基本的なメソッドである、`get`,`post`,`delete`,`put`、また`config`オブジェクトについて軽く紹介してきます。

###axios.get(url)

HTTP通信(API通信)でサーバーからデータを取得するには、`axios.get()`関数を使用することで実現可能です。

```javascript
// GETリクエスト（通信）
const url = axios.get("http://localhost:3000/")

    // thenで成功した場合の処理
    .then(() => {
        console.log("ステータスコード:", status);
    })
    // catchでエラー時の挙動を定義
    .catch(err => {
        console.log("err:", err);
    });

結果
ステータスコード：200　//http通信でデータ取得の成功
```

### axios.post(url)
データをサーバーへ情報を送るときは、`axios.post()`メソッドで可能

```javascript

//POSTリクエスト（通信）
const data = { firstName : "Taro", lastName : "Yamada" }
const url = axios.post("http://localhost:3000/user/123", data)

        .then(() => {
            console.log(url)
        })

        .catch(err => {
        console.log("err:", err);
        });

結果
Yamada Taro //サーバーへYamada Taroを送信
```


### axios.delete(url)
データを削除する場合は、`axios.delete()`メソッドを使います。ただし、データIDで識別するため、IDを指定しないといけません。

```javascript
const url = axios.delete("http://localhost:3000/user/123")

        .then(() => {
            console.log('削除ID:',url)
        })

        .catch(err => {
        console.log("err:", err);
        });

結果
削除ID:123 
```

### axios.put(url)
データを更新する時は、`axios.put()`メソッドを使いますが、こちらもIDを指定しないといけません。

```javascript
const data = { firstName : "Taro", lastName : "Qiita" }
const url = axios.put("http://localhost:3000/user/123",data)

        .then(() => {
            console.log('データ更新:',url)
        })

        .catch(err => {
        console.log("err:", err);
        });

結果
データ更新：Qitta Taro
```

### configオブジェクト
configオブジェクトの形でも、上記のメソッドを使用することができます。

```javascript
axios({
     method: "get",
     url: "http://localhost:3000/user/123",
     data: {firstName : "Taro", lastName : "Yamada" }
    })

    // thenで成功した場合の処理
    .then(() => {
        console.log("ステータスコード:", status);
        console.log(res.data)
    })
    // catchでエラー時の挙動を定義
    .catch(err => {
        console.log("err:", err);
    });

結果
ステータスコード：200
Yamada Taro
```


# 参考にさせていただいたサイト
[https://reffect.co.jp/vue/vue-axios-learn#i-2](https://reffect.co.jp/vue/vue-axios-learn#i-2)

# 感想
axiosを使用することで、API通信が簡単に行えることがわかりました。また、非同期処理の`async`,`await`を使用することで可読性の高い非同期通信を行えるので、実践してみます。
Figmaに入れてるプラグイン一覧

#[Guid Mate](https://www.figma.com/community/plugin/739342962452731553/Guide-Mate)

ガイドメイト。一発でガイドラインが引ける。最初全然機能しないじゃん〜！！壊れてるやん〜！！と思ったらShift + Rでルーラー(定規)を表示した状態じゃないと表示されないみたい。

#[To Path](https://www.figma.com/community/plugin/751576264585242935/To-Path)
パス上にオブジェクトを並べられるプラグイン。円形にテキストを並べたいときや、エンブレムを作りたい時などに便利。

#[Remove-BG](https://www.figma.com/community/plugin/738992712906748191/Remove-BG)
背景の透過が一瞬でできるプラグイン


#[Clean Document](https://www.figma.com/community/plugin/767379019764649932/Clean-Document)

ページデータを一括で綺麗に調整してくれます。

非表示のレイヤーの削除
要素が一つしかないグループの解除
要素をピクセルパーフェクトにする
レイヤーのリネーム・ソート
ページをアルファベット順にソート
など

#[QR Code Generator](https://www.figma.com/community/plugin/735650288109030027/QR-Code-Generator)

URLを入力すると自動でQRコードを出力してくれる。資料作成やらに便利


#[Sorter](https://www.figma.com/community/plugin/742038190980789811/Sorter)

選択した範囲のレイヤーを逆順にしたり、整えられるプラグイン

#[Similayer](https://www.figma.com/community/plugin/735733267883397781/Similayer)

同じグループやフレームに入ってなくても似たようなオブジェクトを選択して、一発変換ができる


#figmaの使い方参考記事
[Figmaの使い方、全力でまとめました。
](https://note.com/99997373/n/n77573dfb8797)
Pepper SDK入門(26) BookmarkとBookmarkStatusでTopicファイルに目印をおく👀🚩

#BookmarkとBookmarkStatusでTopicファイルに印をつけよう🐩🔯
BookmarkとはTopic中のタグのようなものです。Topicファイル内の好きなところにBookmarkをつけられます。
対してBookmarkStatusはBookmarkの状態を取り扱うクラスです。Bookmarkの機能の有効・無効を切り替えたり、各種イベントリスナーの設定が可能です。

#手引き🍀👐
Topicファイルは以下のとおりです。

```
topic: ~mimic_taxi()

proposal: %mimic_proposal サンタクロースと銀河鉄道、どちらを呼びますか
    u1: (サンタクロース) プレゼントを待っている靴下を探しましょう %bell_mimic
    u1: (銀河鉄道) カムパネルラに会いにいきましょう %chime_mimic^endDiscuss(taxi)
```
##Bookmarkを取ってくる🥏🐶
Topicファイルに含まれる全てのBookmarkを取得します。

```java
Topic topic = TopicBuilder.with(qiContext)
                          .withResource(R.raw.mimic_taxi)
                          .build();
Map<String, Bookmark> bookmarks = topic.getBookmarks();
```

##BookmarkとBookmarkStatusは1対1対応♊️🌱
各Bookmarkに対応するBookmarkStatusを作成します。

```java
Bookmark bellBookmark = bookmarks.get("bell_mimic");
Bookmark chimeBookmark = bookmarks.get("chime_mimic");

//qiChatbot.bookmarkStatus(bookmark)が呼ばれるとBookmarkStatusのインスタンスを返す
bellBookmarkStatus = qiChatbot.bookmarkStatus(bellBookmark);
chimeBookmarkStatus = qiChatbot.bookmarkStatus(chimeBookmark);

bellBookmarkStatus.addOnReachedListener(() -> {
    //会話がTopic内の%bell_mimicに到達したときに呼ばれる 
});

chimeBookmarkStatus.addOnReachedListener(() -> {
    //会話がTopic内の%chime_mimicに到達したときに呼ばれる 
});
```

##リスナーをポイする🗑
BookmarkStatusでリスナーを削除するためには、それらのBookmarkStatusを変数に保持しておいてリスナーを削除する際に再びコールすることが必要です。

```java
//各BookmarkStatusでリスナーを削除
bellbookmarkStatus.removeAllOnReachedListeners();
chimebookmarkStatus.removeAllOnReachedListeners();

```

Bookmarkについては、<ins>[Git](https://github.com/aldebaran/qisdk-tutorials/tree/master/app/src/main/java/com/softbankrobotics/qisdktutorials/ui/tutorials)</ins>のMastering Bookmarkで手軽に体験ができます。以下⬇️でサンプルアプリを一部変更したものの挙動を視聴できますので、よろしければご覧ください。
<iframe width="560" height="315" src="https://www.youtube.com/embed/IFcHiM6khlw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

#あとがき
今回も[PepperSDKforAndroid](https://android.aldebaran.com/sdk/doc/pepper-sdk/ch4_api/conversation/reference/bookmark_bookmarkstatus.html)を参考に書かせていただきました。
さらに詳しい情報は[BookmarkのAPIリファレンス](https://android.aldebaran.com/sdk/doc/javadoc/qisdk/com.aldebaran.qi.sdk.object.conversation/-bookmark/index.html)、[BookmarkStatusのAPIリファレンス](https://android.aldebaran.com/sdk/doc/javadoc/qisdk/com.aldebaran.qi.sdk.object.conversation/-bookmark-status/index.html)を参照してみてください。

次回はBaseQiChatExecutorについて書きます。Executor(ロケットエンジン)の出番はありません🚀
それではまた次回〜🛸
Raspberry PiでApache2(2.4) + php(8.0)を構築

Raspberry PiにApache2とphpをインストールしてwebサーバー化します。

#Apache2のインストール
パッケージマネージャーのアップデート

```bash
sudo apt-get update
```
Apache2のインストール

```bash
sudo apt-get install apache2
```

一応、apache2.serviceの再起動

```bash
sudo systemctl restart apache2
```

ラズパイでは/var/www/html/index.htmlにデフォルトのページが保存されています。
apache2のデフォルトページとしてこれが表示されるはずなので確認します。ここで、ラズパイのローカルipを調べます。

```bash
ifconfig
```

有線ならeth0、無線ならwlan0のところにそれぞれinetとあるはずです。その横に割り当てられたipアドレスがあります。![Screen Shot 2021-02-26 at 9.59.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1083406/a6fdd945-8475-c065-f914-19e7c044258d.png)
192.168.0.70と確認したのでこれでラズパイにアクセスします。(ipアドレスは適宜読み変えてください)
同一ネットワーク内の別のマシン(スマホでもOK)のブラウザからアクセスしてみます。
![Screen Shot 2021-02-26 at 10.04.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1083406/5d00c076-1a2a-3bfb-481e-13dc9d5c0f8e.png)
httpプロトコルで192.168.0.70の80番ポートにアクセスという意味です。これは省略して192.168.0.70だけでも繋がります。
![apache-it-works.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1083406/ca5adf93-2c37-9dea-dbe9-b117dcaa1cc4.png)
デフォルトページが出たら成功です。

#phpのインストール
php8.0がリリースされたのこれをインストールします。といっても単純にaptで取ってこれます。

```bash
sudo apt install php
```
さらに、CLIとcURLのモジュールも追加します。

```bash
sudo apt install php-cli php-curl
```
phpのバージョン確認

```bash
php -v
```
![Screen Shot 2021-02-26 at 10.38.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1083406/b0b8f015-2cfa-c321-8500-fac320b4b1a7.png)
/var/www/htmlにphpのテストファイルを作ります。

```bash
cd /var/www/html
```

```bash
sudo nano test.php
```
CUIのエディタが開いたら![Screen Shot 2021-02-26 at 10.22.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1083406/2c8898a0-888f-f1c9-d3f5-6a27694b0259.png)
```<?php phpinfo ();?>```と入力してCtr+Sで書き込み、Ctr+Xで閉じます。

```bash
sudo cat test.php
```
test.phpの中身が書き込んだものだったらOKです。
![Screen Shot 2021-02-26 at 10.26.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1083406/5fcfc8d3-a6ed-977d-425c-d1f96f8d5f65.png)
ここでapache2の再起動します。

```bash
sudo systemctl restart apache2
```
別マシンのブラウザからtest.phpにアクセス
![Screen Shot 2021-02-26 at 10.34.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1083406/1ed29b37-2292-282f-e1a2-2c5ce52d70e5.png)
これで以下が表示されたら成功です。
![Screen Shot 2021-02-26 at 10.40.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1083406/1820fd23-4e27-2f39-4695-a0dace209bb2.png)
お疲れ様でした！
Laravelの学習を始めるにあたって

お疲れ様です。TaYです:open_hands:

PHPでのポートフォリオ制作・外部公開が終わり、これからの課題が見えてきました。

__現時点での課題__

* オブジェクト指向に基づいたコーディングができていない
* MVCモデルについての理解・経験がない
* フレームワークを触った経験がない

これらを解決するべくLaravelの学習を始ました。

使用する書籍は[こちら](https://www.amazon.co.jp/PHP%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AFLaravel%E5%85%A5%E9%96%80-%E7%AC%AC2%E7%89%88-%E6%8E%8C%E7%94%B0-%E6%B4%A5%E8%80%B6%E4%B9%83/dp/4798060992)

![Laravel入門](https://images-na.ssl-images-amazon.com/images/I/61xv+1pUBrL.jpg)

評価が高かったため、こちらを選びました。

すこし読んでみて、自分なりにLaravelについて分かったことを備忘録として残しておきます。

__フレームワークとは__
・機能提供だけでなく『仕組み』も提供する
（ライブラリは、あくまでも「機能提供」→どう使うかはプログラマ次第）
・プログラマは仕組みに従って、「呼び出されて動くプログラム」の部分を作成すれば良い
・セキュリティ、メンテナンス性、拡張性を兼ね備えてる

__Laravelの特徴__
・MVCに準拠している
・堅牢なシステムであるSymfonyが土台
・Composerにより、プログラム管理が容易
・ORM（Object-Relational Mapping)によりデータベースをオブジェクトのように扱える
・Bladeテンプレートエンジンで複雑なデザインも簡潔に記述できる
・コードがわかりやすく、学習コストが低い

<br/>
今回はここら辺で:wave:


埋め込んだファイルをStreamとして取り出す

# はじめに
.NETで一時的なHTTPサーバーを立ち上げて、index.htmlだけを返す必要がありました。
単一のexeで完結させたいので、下記2点を実現したいと考えています。
- index.htmlをexeに埋め込む
- 埋め込んだリソースをStreamとして取り出す



# index.htmlをexeに埋め込む
index.htmlのプロパティを開き、ビルドアクションを**埋め込みリソース**として設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556091/0cb79460-4bf0-f3fc-d47b-e4753514e177.png)

# 埋め込んだリソースをStreamとして取り出す
`GetManifestResourceStream`を使うことで、Streamとして埋め込みリソースを取り出せます。
`GetManifestResourceStream`の引数には、`プロジェクト名.[フォルダ階層.]ファイル名`を指定します。

```C#:Program.cs
var context = await http.GetContextAsync();

context.Response.ContentType = "text/html";

var assembly = Assembly.GetExecutingAssembly();
using (var file = assembly.GetManifestResourceStream("WindowsFormsApp1.index.html"))
{
    file.CopyTo(context.Response.OutputStream);
}
```
【Serverless Framework】コマンドまとめ

Serverless Frameworkのコマンドがイマイチ自分の中で、整理できてなかったので、後でササっと見返せるようにまとめました。（というか、[Serverless Frameworkの使い方まとめ | Serverless Operations](https://serverless.co.jp/blog/25/) から必要な箇所を抜粋したまとめです。）

###インストール

```
$ npm install -g serverless
```

### サービス用テンプレート作成

```
$ serverless create --template aws-nodejs --name my-special-service --path my-special-service
```

`--template` オプションは下のようなものがある。（他の言語は公式ドキュメント参照）

- aws-nodejs
- aws-nodejs-typescript
- aws-nodejs-ecma-script
- aws-python
- aws-python3

### GitHubにある既存のサービスをインポートする場合

```
$ serverless install -u [GITHUB URL OF SERVICE]
```

### デプロイ
```
$ serverless deploy -v
```
`-v` オプションを付けるとverboseというモードでデプロイが実行され、途中経過がターミナル上で確認できる。

デフォルトで、devというステージかつus-east-1リージョンにデプロイされる。`serverless.yml`で変更可。

### リソースの削除

```
$ serverless remove
```

## 参考
[Serverless Frameworkの使い方まとめ | Serverless Operations](https://serverless.co.jp/blog/25/)
Railsで新規作成

いや、何回もしてるんですけど、改めてね。
####ターミナル

```terminal
cd ~/（ファイル名)

rails _6.0.0_ new (アプリ名) -d mysql
```

config/database.yml
データの保存形式変更(人によるかと）

```Ruby
# encoding: utf8mb4
encoding: utf8
```

DB作成

```Ruby
rails db:create
```

ローカルで動作確認

```Ruby
rails s
```

とりあえずこれがスタートライン！
後々、付け足します。
DynamoDBストリーム ってなに？

## 勉強前イメージ

DynamoDBで使える機能で、流れ作業でなにか設定的な・・・？

## 調査

### DynamoDBストリーム とは？

DynamoDBストリームを有効化することで
DynamoDBテーブルへのデータ更新などのイベントをトリガーにして、
Lambda関数などを実行して処理することができます。

以下はDynamoDBのDynamoDBストリームの管理です。
今はストリームは無効ですが、ここから有効にすることが出来ます。

![DynamoDB · AWS Console - Google Chrome 2021-02-24 .png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/6038b198-9f4f-8b4f-69c7-382dc6979e33.png)


### DynamoDBストリームの特徴

- Lambda関数にストリームARNを関連付けられるので、項目が変更されるとレコードがテーブルのストリームに表示される
- 24時間以内にテーブルのデータに対して行われた変更のストリームにアクセス可能
- ストリームの有効・無効については管理画面からすぐに設定できる
- テーブルの特定の項目に対して行われた変更は順序を守って表示される

## 勉強後イメージ

DBの値変更がトリガーになってLambdaで処理が行われる・・・
結構いろいろなところで使われてると思う

## 参考

- [DynamoDB Streams](https://www.techcrowd.jp/dynamodb/dynamodb-streams/)
- [DynamoDB ストリーム と AWS Lambda のトリガー](https://docs.aws.amazon.com/ja_jp/amazondynamodb/latest/developerguide/Streams.Lambda.html)