OmniAICreator/Qiita-1.07M huggingface dataset:
UpSampling4つまとめ

# UpSampling4つ
### 1.  Nearest Neighbor Interporation（最近傍補間）
- kerasのupsampling2Dにはinterporation引数に`nearest` or `bilinear`の2つがあり、
デフォルトオプションは`interporation=nearest`。

![スクリーンショット 2021-06-01 10.33.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191313/f0739b7a-8a1b-ba4c-0d40-dca84960041e.png)


### 2. Bilinear Interporation（バイリニア補間）
- kerasのupsampling2Dにはinterporation引数に`nearest` or `bilinear`の2つがあり、
要素間を連続的に補間したい時は`interporation=bilinear`を選択。

![スクリーンショット 2021-06-01 10.33.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191313/aa5378d7-020f-a559-343f-11cc4e5919ec.png)


### 3. Bed of Nails（釘埋め）
- 入力ピクセルの値を出力画像の対応する位置にコピーし、残りの位置にゼロを埋める。
![スクリーンショット 2021-06-01 10.39.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191313/d208edd9-0522-41ee-78ba-95f4cbd90247.png)

### 4. Max-Unpooling（最大値アンプーリング）
- Encode部分のMax-Pooling層での最大値を取ったインデックスを保存しておき、Decode部分のMax-Unpooling層ではインデックスに基づいて最大値を入力し、他は全てゼロを埋める。
![スクリーンショット 2021-06-01 10.40.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191313/a0d29dff-f82f-f2a7-02c6-3269fa295d1b.png)


### 5. Transposed Convolution（転地畳み込み）
- いくつかの学習可能なパラメーターを使用して、入力特徴マップを目的の出力特徴マップにアップサンプリングする。
- 入力特徴マップの間を0で埋めて畳み込むことで3x3→5x5のような特徴マップが得られる。
- Deconvolutionと呼ぶときは一般的にTransposed Convolutionのことを指すことが多い。（稀にNearest Neighbor Interporation + convを指すこともある。）
![padding_strides_transposed.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191313/23767e14-3770-7946-1f80-36a6bb9ccc6e.gif)


#### 参考：
- いろんなUpSamplingの手法が網羅的に説明されている記事
    - https://ichi.pro/tenchi-tatamikomi-no-nazo-o-tokiakasu-146005294365370
- kerasのupsampling2Dソースコード
    - https://github.com/keras-team/keras/blob/master/keras/layers/convolutional.py#L1746
- いろんなconvのアニメーション（transposed convを含む）
    - https://github.com/vdumoulin/conv_arithmetic
[Webを支える技術] 書き込み可能なWebサービスの設計

[前回の記事](https://qiita.com/Micchili/items/16a71c0d2d8225bab402)で考えたWebサービスを、書き込み可能にしましょう。

# 書き込み可能な名前を公開するサービス
前回の記事で作成したサービスに追加するとすると、以下のものが挙げられます。

- 名前の追加
- 名前の更新
- 名前の削除

# リソースの追加
トップリソースにPOSTでRequestを送ると追加される機能を作成します。

```http:post-request
POST / http/1.1
Host: name.public.jp
Content-Type: application/json

{
  "name": "mil",
  "yomi": "みる"
}
```

```http:post-response
http/1.1 201 created
Content-Type: application/json
Location: http://name.public.jp/mil

{
  "name": "mil",
  "yomi": "みる"
}
```

# リソースの更新
PUTでリソースの更新を行います。

```http:put-request
PUT / http/1.1
Host: name.public.jp
Content-Type: application/json

{
  "name": "mil",
  "yomi": "えむあいえる"
}
```

PUTでは更新したい箇所を編集したものを、編集したいリソースに対してRequestを飛ばすことで更新出来ます。
こちらのような、一箇所の修正をするのにリソース全体の情報を送信して更新する方法を、バルクアップデートと呼びます。

## バーシャルアップデート
バルクアップデートでは、一箇所の変更をするのにも全てのリソースの情報を含んでRequestを飛ばすので、ネットワーク帯域を使用してしまいます。そういった場合には、部分的なデータを送信する方法があります。

```http:put-request
PUT / http/1.1
Host: name.public.jp
Content-Type: application/json

{
  "yomi": "えむあいえる"
}
```

こちらのような、リソースの変更したい部分だけを送ることをバーシャルアップデートと呼びます。

# リソースのバッチ処理

バッチ処理を実装します。
2つのリソースを更新する処理を作成します。

```http:post-request
POST / http/1.1
Host: name.public.jp
Content-Type: application/json

{
  "name": "mil",
  "yomi": "えむあいえる"
}
{
  "name": "micchili",
  "yomi": "みっちぃ"
}
```

# リソースの削除
```http:delete
DELETE / http/1.1
Host: name.public.jp
Content-Type: application/json
If-Match: sample-etag-value
```

DELETEには条件を付けて削除をします。

https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/If-Match

# 設計のバランス

- なるべくシンプルに保つ
- 困ったらリソースに戻って考える
- 本当に必要ならPOSTで何でも出来る
Windows10の環境変数にプロキシ設定するにはSystem.Environmentコマンドを使いましょう

### はじめに

開発用PCのOSがWindows10の場合に、`pip`コマンドや`npm`コマンドでのインストール時にプロキシサーバの疎通が必要な場合があります。このような場合には、`Windowsのユーザ環境変数にプロキシ設定`をしてしまいましょう。

これで確実にWindows環境ではプロキシサーバを突破できます。少なくとも私の場合には失敗確率０％で成功しています。

### 前提条件
* Windowsユーザ・アカウント：teruroom
* Windowsユーザ・パスワード：password
* プロキシサーバURL：proxy.hoge.foo.co.jp
* プロキシサーバ・ポート：8080
* 環境変数の種類：ユーザ

### 設定コマンド

* Powershellを起動します

```powershell:設定powershellコマンド
PS C:\Users\teruroom> [System.Environment]::SetEnvironmentVariable("HTTP_PROXY","http://teruroom:password@proxy.hoge.foo.co.jp:8080","User")
PS C:\Users\teruroom> [System.Environment]::SetEnvironmentVariable("HTTPS_PROXY","http://teruroom:password@proxy.hoge.foo.co.jp:8080","User")
```

### 確認コマンド

* Powershellを再起動します
* 以下のコマンドを投入します

```powershell:確認powershellコマンド
PS C:\Users\teruroom> $env:HTTP_PROXY
http://teruroom:password@proxy.hoge.foo.co.jp:8080
PS C:\Users\teruroom> $env:HTTPS_PROXY
http://teruroom:password@proxy.hoge.foo.co.jp:8080
```

## ご注意

システム環境変数に個人のWindowsユーザアカウントでプロキシ設定を行うことはお勧めしません。なぜならば、別のユーザが同じPCに別のユーザアカウントでログインした場合、個人のパスワードが平文で丸見えになるからです。

ちなみに、システム環境変数を設定する場合には、上記のコマンドの`"User"`を`"Machine"`に変更します
[Webを支える技術] リソースの設計

# リソース指向アーキテクチャの考えかた
代表的なもので3つあります。

- 関係モデルからの導出
- オブジェクト指向モデルからの導出
- 情報アーキテクチャからの導出


## 関係モデルからの導出
関係モデルとは、リレーショナル・データベースの形を思い浮かべるとわかりやすいと思います。
ただし、普段使われている主キーや複キーでは、そのままURIにすると、ユーザーからわかりにくいものになってしまいます。また、REST APIは階層構造を持っているので、そのままテーブルをURIにすることが出来ません。

なので、少し関係を崩し、テーブルの中で、一番ユーザーがわかりやすいものをURIにして、検索できるようにします。

## オブジェクト指向モデルからの導出
オブジェクト指向では親と子の関係があります。URIでは階層構造をしており、大幅に崩さなくてもURIに転用出来ます。
注意する点はメソッドをURIで表現しないことです。
HTTPのメソッドをオブジェクトのメソッドで表現出来るのが魅力です。

## 情報アーキテクチャからの導出

> 情報アーキテクチャ (Information Architecture: IA) とは、情報を整理しユーザに分かりやすく伝える、または情報を探しやすくするための表現技法です。
情報アーキテクチャの定義としては、以下のものがあります。
情報の階層化、ラベリング、ナビゲーションシステムの組み合わせ
コンテンツへの直感的な理解、およびアクセスを容易にするためのデザイン
情報の構造化と分類を行うことで発見、および管理を容易にする

https://murashun.jp/article/seo/information-architecture.html#:~:text=%E6%83%85%E5%A0%B1%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%81%E3%83%A3%20(Information%20Architecture%3A%20IA,%E4%BB%A5%E4%B8%8B%E3%81%AE%E3%82%82%E3%81%AE%E3%81%8C%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82

情報アーキテクチャとは、上記の説明の通り、視覚的にわかりやすいUIなどを組み合わせることです。URIでは検索のしやすさなどがあります。
例えばパンくずリスト。視覚的に自分どう動いたのかがわかります。たとえば地図。地図が表示されていて、URIで検索しなくても地図で場所をクリックすれば検索結果が出るといったものが情報アーキテクチャに分類されます。
情報アーキテクチャが得意なデータの表現でURIを作っていくことで、自由なURI設計が可能になります。
EntityFramework のエンティティをナビゲーションプロパティを除いてコピーする

意味があるかどうかはわからないが、Contextからinclude付で取得したエンティティをナビゲーションプロパティを除いてコピーする方法。

## ナビゲーションプロパティを無視するMapperを生成する

```csharp
    public static class MappingExtension
    {
        public static IMapper CreateMapperWithoutNavigation<TSource, TDestination>() => new MapperConfiguration(expression => {
            expression.CreateMap<TSource, TDestination>()
            .IgnoreNavigation();
        }).CreateMapper();

        public static AutoMapper.IMappingExpression<TSource, TDestination> IgnoreNavigation<TSource,TDestination>(this IMappingExpression<TSource, TDestination> expression)
        {

            var type = typeof(TDestination);
            var properties = type.GetProperties(BindingFlags.Public | BindingFlags.Instance | BindingFlags.SetProperty);
            foreach (var property in properties)
            {
                if (property.PropertyType.IsValueType)
                {
                    continue;
                }
                if (property.PropertyType == typeof(string))
                {
                    continue;
                }
                var nullable = property.PropertyType.IsGenericType && property.PropertyType.GetGenericTypeDefinition() == typeof(Nullable<>);
                if (nullable)
                {
                    var baseType = Nullable.GetUnderlyingType(property.PropertyType);
                    if (baseType.IsValueType)
                    {
                        continue;
                    }
                    if (baseType == typeof(string))
                    {
                        continue;
                    }
                }
                expression.ForMember(property.Name, x => x.Ignore());
            }

            return expression;
        }
    }
```

## コピーを実行する

```csharp
            var mapper = MappingExtension.CreateMapperWithoutNavigation<Product, Product>();

            using (var scope = serviceProvider.CreateScope())
            {
                var context = scope.ServiceProvider.GetRequiredService<AdventureWorks.AdventureWorksDbContext>();
                var products = await context.Products
                    .Include(x => x.ComponentBillOfMaterials)
                    .ThenInclude(x => x.ProductAssemblyProduct)
                    .Include(x => x.ProductAssemblyBillOfMaterials)
                    .ThenInclude(x => x.ProductAssemblyProduct)
                    .ToListAsync();
                foreach(var product in products)
                {
                    Console.WriteLine($"{product.Name}");
                    var copied = mapper.Map<Product>(product);
                    foreach (var component in copied.ComponentBillOfMaterials)
                    {
                        Console.WriteLine($"\t copied {component.ProductAssemblyProduct?.Name}");

                    }
                    foreach (var component in copied.ProductAssemblyBillOfMaterials)
                    {
                        Console.WriteLine($"\t copied {component.ProductAssemblyProduct?.Name}");

                    }
                }
            }
```

使ったデータベースは AdventureWorks2019、エンティティ生成は自前のT4.
kintoneの添付Excelファイルを書き換えてアップロードする

今回は、添付のExcelファイルを書き換えたものをアップロードするカスタマイズです。
**※ただしExcelの書式は消えてしまいます（＞＜）**

添付ファイルAのExcelファイルの中身を書き換えて、添付ファイルBにアップロードします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/ad81144a-c3fe-59c7-e380-545e49a27ff8.png)

# アプリの準備

| フィールド種類 | フィールドコード | 備考 |
|:-:|:-:|:-:|
| スペース  | spBtn  |  ボタン設置用 |
| 添付ファイル  | 添付ファイルA  | ダウンロードして書き換える  |
| 添付ファイル  | 添付ファイルB  | 書き換えたものをアップロードする  |

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/34ae7a60-4833-ebad-d5f7-e00508613410.png)

添付するExcelファイルは前回使用したExcelファイルを使います。

https://qiita.com/juri_don/items/b6397f3230f46c8e3c4a


# JavaScript

使用するライブラリは下記2つです。

https://github.com/kintone/js-sdk/tree/master/packages/rest-api-client

https://github.com/SheetJS/sheetjs

**JavaScript / CSSでカスタマイズ**に設定しておきます。

`https://unpkg.com/@kintone/rest-api-client@latest/umd/KintoneRestAPIClient.min.js`
`https://unpkg.com/xlsx/dist/xlsx.full.min.js`


詳細画面表示後イベントに下記コードを書いていきます。

```js
// スペースフィールドにボタン設置
const sp = kintone.app.record.getSpaceElement("spBtn");
const btn = document.createElement("button");
btn.textContent = "ボタン";
sp.appendChild(btn);

// ボタンクリック
btn.addEventListener("click", async () => {
  const obj = kintone.app.record.get();
  const client = new KintoneRestAPIClient();
  // 添付ファイルAに添付のエクセルファイルを読み込む
  const data = await client.file.downloadFile({
    fileKey: obj.record["添付ファイルA"].value[0].fileKey,
  });
  // 添付ファイルAフィールドのエクセルファイルのセルA1の値を"あいうえお"にする
  const workbook = XLSX.read(data, { type: "array" });
  workbook.Sheets[workbook.SheetNames[0]].A1 = {
    v: "あいうえお",
  };
  // "あいうえお"にしたデータをExcelファイルにする
  const wo = XLSX.write(workbook, { type: "array" });
  // ダウンロードする（ついでに）
　XLSX.writeFile(workbook, "あいうえおにした.xlsx");
  // 作ったExcelファイルをアップロードして添付ファイルBフィールドに添付する
  const FILE = {
    name: "あいうえおにした.xlsx",
    data: wo,
  };
  const { fileKey } = await client.file.uploadFile({
    file: FILE,
  });
  await client.record.updateRecord({
    app: kintone.app.getId(),
    id: kintone.app.record.getId(),
    record: {
      添付ファイルB: {
        value: [{ fileKey }],
      },
    },
  });
  // 画面更新
  location.reload();
});
```

# 動作確認＆まとめ

添付ファイルAの中身を書き換えて添付ファイルBに添付されます。
ついでにダウンロードもされます。

![testiiii.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/879a0534-0d0a-9221-bb9f-4f45aeca76f5.gif)
Docker - Error response from daemon: no matching manifest for linux/arm64/v8 in the manifest list entries

I got an error during building docker image in Apple Macbook Pro M1.

```
Error response from daemon: no matching manifest for linux/arm64/v8 in the manifest list entries
```

Solution: Added **--platform=linux/x86_64**

```
FROM --platform=linux/x86_64 ubuntu:18.04

or

ARG arch
FROM --platform=linux/${arch} ubuntu:18.04
```

https://stackoverflow.com/questions/65456814/docker-apple-silicon-m1-preview-mysql-no-matching-manifest-for-linux-arm64-v8

https://stackoverflow.com/questions/60251383/dockerfile-from-platform-option
MuleSoftでAWS EC2インスタンス操作を自動化

#MuleSoftからAWS EC2インスタンスをコントロールする

物凄～く久しぶりの投稿になりますが、MuleSoftについての記事になります。
連携検証用にAutomation AnywhereのAutomation 360オンプレミス環境をAWSに建てようと考えたのですが、
Automation 360って、検証用に最低限の環境でと考えてもメモリ16GB程度ないと厳しいんですよね。CPUも2コアでは厳しい感じです。
そうすると、AWS LightSailではそこそこのコストもかかってきてしまうと。
今回の環境は、それほど多く利用するわけではないので、毎朝スケジュールしたBotを稼働させる時間帯と、あとはオンデマンドで使う時だけ起動できれば良いのでEC2 VPCにして、毎朝自動的に開始・停止できるようにしようかと考えています。

##「Amazon EC2 Connector - Mule 4」
MuleSoft Exchangeには、数多くのコネクターが既に準備されています。
Anypoint Studioから「Amazon」をキーワードに検索してみると、EC2はコネクターが！
さっそくこれを追加して試してみることにします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615564/a3da2d09-369a-9a71-6615-949cc9358c43.png)

##コネクターのメソッド
[公式ドキュメント](https://docs.mulesoft.com/amazon-ec2-connector/2.5/amazon-ec2-connector-reference)に説明がありますので、詳細はそちらを参照してもらえればと思いますが、非常に多くの操作に対応しています。

|  |  |  |  |
|:-:|:-:|:-:|:-:|
| ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615564/0827f6d0-a69c-9fb3-79c9-fd84089c6149.png)  | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615564/e2f17cfc-6f10-3a22-3b7e-ff253bca8899.png)  |  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615564/860f9950-6bbf-22c9-6bc1-5771e98eee96.png) | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615564/634ab799-108a-e83e-7481-aa9695003b35.png) |


##インスタンスのステータス確認
まずは、インスタンスのステータス確認をしてみます。（AWSインスタンスの操作って、起動と開始、停止と休止と終了って、紛らわしいですよね・・・）
Anypoint Studioでこんな感じで組んでみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615564/677d57d3-3789-9755-b43b-0869e2067a51.png)

HTTPリスナーをつかって、/getStatusを受けます。
汎用化する場合は、クエリーパラメータまたはURIパラメータでインスタンスIDを受ける形になると思いますが、とりあえずは固定で。

2つめのステップがEC2コネクターの「Describe instance status」操作です。
このステップの内容は後で説明します。

3つめのステップをTransform Messageにしています。
ひとつ前のEC2コネクターの戻りがJavaオブジェクトとして戻ってきますので、
その情報をわかりやすく表示するためにJSONに変換しています。

###EC2コネクターを使う
まず、EC2とつなぐための設定「Amazon EC2 Configration」を作ります。
必要となるのは「Access Key」と「Secret Key」です。
EC2管理コンソールのIAMでユーザーを作っておき、ここにキーを設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615564/3e40ffa3-5707-318f-b214-5159c4e8468c.png)

そして、「Describe instance status」操作の設定。
Connector Configurationには上で作成した設定を指定します。
あとは、インスタンスIDの指定のみ。簡単ですね！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615564/212e5363-417d-17eb-9fe2-665a0f6c1e1f.png)

Transform Messageについては、とりあえず、PayloadをすべてJSONにするようにしています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615564/0dc94722-8fe4-f719-c5fc-c6998b9db7c8.png)


###実行結果
Advanced REST CLientで実行してみるとこんな感じになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615564/4070c11d-f5ec-8841-09e9-5483194c5f19.png)

##MuleSoftからAWS EC2の操作は非常に簡単

この記事ではインスタンスの状態の参照だけしてみましたが、
インスタンスの開始等も同じ感じで設定だけでできます。

Anypoint StudioはAutomation 360より少し難しいですが、一度マスターしてしまえばRest Web Serviceから起動できるフローの作成ができたりと、RPAで足りない部分はAPI/IntegrationプラットフォームであるMuleSoftで補う。
逆に、MuleSoftで足りない部分（画面操作が必要なアプリなどの自動化）はRPAで行うというということができますので、
ぜひ試してみて頂ければと思います。
MuleSoftの検証環境も30日限定ですが、何度でも作れます！
質問をちゃんとしよう

## 質問の仕方

- 実行手順を書く
    - 手順を箇条書きにする
- 自分が予想した結果を書く
- 実際の結果を書く
- どこからうまくいかなくなったのかを書く
- 文献の引用とともに判断理由を書く
- 環境を書く
    - 自分のOS
    -  メモリ量
    -  使用ソフト
    -  バージョン
    -  周辺機器
    -  マシンの種別


## 質問チートシート

> 【所属機関や自分の技能を表現する解説】の【氏名】です。
○○を実行すると、○○というエラーになる問題で困っています。
原因または解決策をご存知の方はいらっしゃいませんか。
私の行った手順は以下です。
(1)
(2)
(3)
すると、以下のような結果になりました。

> 【表示されたものをコピー＆ペーストする】

> 私は【予想結果】になると思いました。
なぜなら、【参考資料】には、
以下のように書かれているからです。

> 【適切な分量の引用】
> 【適切な分量の引用】
> 【適切な分量の引用】

> 原因を確かめるため、以下のようなテストを行ってみましたが、
問題の解決には至りませんでした。

> (a) 入力を○○ではなく××にしてみた
→上記と同じ結果になった
(b) ソースプログラムの○○をやめて、××にした
→以下のようなコンパイルエラーになった

> 【エラーメッセージのコピー＆ペースト】

> なお、私の環境は以下の通りです。
【マシン, メモリ量, 関連周辺機器, OS, 利用ソフト, バージョンなどを箇条書きに】

> 検索エンジンで○○、××、△△を検索しましたが、
◎◎に関するページばかりで、解決に役立つ情報は見つかりませんでした。
このメーリングリストの過去ログも調べましたが、
○○に関する話題は見つかりませんでした。


## 参考文献
>https://www.hyuki.com/writing/techask.html
Vueのcomputedで詰まった話（this）

# 結論
算出プロパティを定義するためにアロー関数を使用しない方がいい。

# 背景
私はVueの案件のスタートが
最初からvue-property-decoratorを用いた
クラススタイルのコンポーネントであった。

```typescript
@Component
export default class HelloWorld extends Vue {
  firstName = 'John'
  lastName = 'Doe'

  get name() {
    return this.firstName + ' ' + this.lastName
  }

  set name(value) {
    const splitted = value.split(' ')
    this.firstName = splitted[0]
    this.lastName = splitted[1] || ''
  }
}
```

なので逆に、生JavaScriptで
このような書き方をするのには慣れていなかった。

```javascript
computed: {
  fullName: {
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    set: function (newValue) {
      const names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
```

# 現象
そこで起きたのが、このような問題だった。

```javascript
computed: {
  fullName: {
    get: () => {
      return this.firstName + ' ' + this.lastName
    },
    set: (newValue) => {
      const names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
```

すると、コンソールで

```
firstNameはundefindです
```

みたいな怒られ方をした。

firstNameはVuexのGetterから取得していたが、
他のmethod内やコンポーネント内で使用する際には
このようなエラーは起こっていなかった。

# 原因
Vueでは、
コンストラクタを呼び出してインスタンスを生成した時、
インスタンス中の `this` はインスタンスそのものを指す。

しかし、アロー関数内のthisは、そのような動きをしない。

なぜならば、アロー関数は**呼び出された場所をthisとする**からである。

そのため、現象の例では、
`computed` 内でアロー関数を宣言した結果、
thisを指し示す箇所が本来参照したいものと異なり、
「そのプロパティは存在しない」、というエラーが出た
ということだった。

# 参考
http://nayucolony.hatenablog.com/entry/2017/05/31/232024
【NeosVR】LogiX Operators/Math解説

##変位
####Δ
Δ = Delta（変化量）
入力の1フレーム間の変化量を出力する。
####×dt ÷dt
dt = Delta Time（時間変化量）
dtは1フレーム間の秒数。
___
###速度計算
GlobalTransform → Δ → ÷dtの順でつなげる。
位置の1フレーム間の変位を1フレーム間の秒数で割ることで瞬間的な速度を求める。

##ベクトル計算
####Normalized
正規化。ベクトルに繋げて、向きはそのままで大きさが1のベクトル(単位ベクトル)を求める。
####.(dot)
内積（点乗積）。ベクトルA,Bの間の角度をθとする時
Aの大きさ×Bの大きさ×cosθ
AとBが共に単位ベクトルならば内積はcosθとなる。
####｡
ベクトル間の度数法での角度を求める。
####Rad->Deg Deg->Rad
弧度法を度数法、度数法を弧度法にするための固定値。
それぞれを元の値に掛けると変換した値になる。
___
###ベクトル間の角度
細かい角度の判定をとる時は人がわかりやすい度数法で出力する"。"を用いるとよい。
向きの判定や計算に用いる場合は、2つのベクトルをNormalizedしてから"."に繋げると-1～1で出力されるので扱いやすい。
単位ベクトルどうしの内積には次の性質がある。
・内積が1なら平行で向きが等しい
・内積が-1なら平行で向きが異なる
・内積が0なら垂直
自己証明書の作成 (localhost)

```
DOMAIN=localhost
openssl req -x509 -days 365 -out $DOMAIN.crt -keyout $DOMAIN.key -newkey rsa:2048 -nodes -sha256 -subj "/CN=$DOMAIN" -extensions EXT -config <(printf "[dn]\nCN=$DOMAIN\n[req]\ndistinguished_name = dn\n[EXT]\nsubjectAltName=DNS:$DOMAIN\nkeyUsage=digitalSignature\nextendedKeyUsage=serverAuth")
```
【Unity初心者】３DゲームエンジンUnityでのShaderの表現

#はじめに

ゲームエンジンはゲームを開発するためのソフトです。
その中で３Dゲーム開発に多く使われているのがUnityです。
ゲーム以外にもシミュレーションに使われていたり人工知能のパッケージを備えたりしています。
この記事ではUnityに初めて触れる方へ３Dオブジェクトの描画におけるShaderについて紹介します。

#Shaderの紹介

<h3>オブジェクトの色付けを行うShader</h3>
ShaderはUnityで主に色を付ける処理を行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1474054/8bbd2ab0-b920-fcd1-5c23-95f03a2b9a06.png)
Unityでは形状の決定、色付け、陰影処理を経てディスプレイにオブジェクトが描画されます。
Shader処理を編集することで、アプリの世界観の統一や画面を見やすくするなどといった効果があります。

<h3>Shaderの利用例</h3>
私が見つけたShaderの工夫を紹介します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1474054/63d35869-d7d5-992a-4d4c-820e9ad64a98.png)

図左の画像はゲームのワンシーンです。正面に半透明なキャラクターがおり、背後の建物が透けて見えています。
この時、キャラクターは単純に全体を透明化しているわけではありません。
画像中の〇で囲まれた部分をよく見ると、キャラクターの髪の下の肌が見えていません。肌が見えてしまうと髪と肌が混ざって目に入ってしまい、見栄えが悪くなってしまいます。
そこで、Shaderを使い、キャラクターを半透明にすると同時に髪の下にある肌は隠します。

#Shaderの実装
Shaderの実装方法を紹介します。
Shaderを作るにはHLSLという言語でプログラムを記述します。
Unityでは下記に示すShaderのテンプレートとなるファイルが提供されています。

```c
Shader "Custom/FirstShader" {
	Properties {
		_Color ("Color", Color) = (1,1,1,1)
		_MainTex ("Albedo (RGB)", 2D) = "white" {}
		_Glossiness ("Smoothness", Range(0,1)) = 0.5
		_Metallic ("Metallic", Range(0,1)) = 0.0
	}
	SubShader {
		Tags { "RenderType"="Opaque" }
		LOD 200
		
		CGPROGRAM
		// Physically based Standard lighting model, and enable shadows on all light types
		#pragma surface surf Standard fullforwardshadows

		// Use shader model 3.0 target, to get nicer looking lighting
		#pragma target 3.0

		sampler2D _MainTex;

		struct Input {
			float2 uv_MainTex;
		};

		half _Glossiness;
		half _Metallic;
		fixed4 _Color;

		void surf (Input IN, inout SurfaceOutputStandard o) {
			// Albedo comes from a texture tinted by color
			fixed4 c = tex2D (_MainTex, IN.uv_MainTex) * _Color;
			o.Albedo = c.rgb;
			// Metallic and smoothness come from slider variables
			o.Metallic = _Metallic;
			o.Smoothness = _Glossiness;
			o.Alpha = c.a;
		}
		ENDCG
	}
	FallBack "Diffuse"
}
```
このコードを基にShaderの基礎を解説しているサイトとしておもちゃラボがあります。
おもちゃラボ「7日間でマスターするUnityシェーダ入門」
https://nn-hokuson.hatenablog.com/entry/2018/02/15/140037
デフォルトのコードは長文ですが、surf関数を主に触れるだけでも多くの表現ができます。

#おわりに
今回、Unityにおけるオブジェクトの色付けを行うShaderについて書きました。
ゲームをしていると３Dオブジェクトや２Dテクスチャに目が行きがちですが、Shaderも欠かすことのできない要素になっています。
最後に、この記事がShaderに触れる第一歩になれば幸いです。
【GCP】ソフトバンクのマルチクラウド戦略

Google Cloud Day'21の内容です。

<table>
	<tr>
		<th>切り口</th>
		<th>内容</th>
	</tr>
	<tr>
		<th>強み</th>
		<td>サービスラインナップの多さ</td>
	</tr>
	<tr>
		<th>CloudExchangeとは</th>
		<td></td>
	</tr>
	<tr>
		<th>CloudExchangこんぽーねんと</th>
		<td></td>
	</tr>
	<tr>
		<th>CMPの詳細</th>
		<td>複数のクラウドサービスのコストを一元化できる、セキュリティの違反の検知も可能</td>
	</tr>
	<tr>
		<th>データの活用</th>
		<td>経験や勘ではない、データ活用を決定する。業務の作業を効率化、AIを活用し、人は判断と指示に集中できる</td>
	</tr>
	<tr>
		<th>今後やりたいこと</th>
		<td>データの活用の提案。GCPはデータの収集と活用が可能。SBの戦略で重要な位置づけを担っている。</td>
	</tr>
	<tr>
		<th>Goolgeサービス活用の歩み</th>
		<td></td>
	</tr>
	<tr>
		<th>MSP認定も取得した</th>
		<td></td>
	</tr>
	<tr>
		<th>MSPサービスについて</th>
		<td>導入後の対応も行う</td>
	</tr>
	<tr>
		<th>スケールインアウトについて</th>
		<td>クラウド事態の機能としてもあるが、アプリの使用や顧客の指示に基づき対応することが可能</td>
	</tr>
	<tr>
		<th>解決できる課題</th>
		<td></td>
	</tr>
</table>

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556084/3acd28e1-ce14-1497-76f0-c5dc406b47d3.png)


![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556084/fc73d948-d1de-634f-c62f-039da346b715.png)
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556084/a42e540d-0d8a-dfa8-55c3-fc70c676c9c9.png)
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556084/47a67324-f6b8-a67c-16de-196beadd5196.png)
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556084/f2a7fb85-4967-9893-f47a-48a836df9a76.png)
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556084/168d9b68-7aa3-2ccb-a9dc-349d3f84dcb9.png)
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556084/72570a68-77b1-20cb-a2cd-786feddd3d3c.png)
![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556084/01c51980-64b4-4089-8a32-b0a95bf96ab1.png)
![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556084/959bd8dd-2461-da3b-eb70-934d2c8bc1cd.png)
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556084/3dd29b5a-5b5d-ea8f-f9da-fe73a41c22c7.png)
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556084/2a9aec43-615d-7985-1ee8-b1e880d3b316.png)
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556084/9834b0c5-9e62-7a57-7ac2-071e16b7d353.png)
![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556084/18a42ca1-2aad-6d24-ac86-5871096002f9.png)
![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556084/b179ea99-3279-ef1f-0623-1d0b404d346e.png)
![15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556084/2c6816c6-d392-4261-c567-411d96e6e747.png)
![16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556084/89c52d87-94ab-d9c6-795f-ff3304e9a2fa.png)
Ruby 問題⑧ 偶数値の取得

#はじめに

paizzaのスキルチェックに挑戦しましたが、スクールのドリルよりもはるかに難しく、まだまだ基礎が定着していない事が分かりました。

これからも基礎を定着させ、スクルチェックに挑戦したいと思います。

#問題

配列にある値の中から偶数の数をカウントして出力するメソッドを作ってください。

```
出力例：
count_evens([2, 1, 2, 3, 4]) → 3
count_evens([2, 2, 0]) → 3
count_evens([1, 3, 5]) → 0
```

#ヒント
even?メソッドを使用します。

公式リファレンス

https://docs.ruby-lang.org/ja/latest/method/Integer/i/even=3f.html

```.rb
4.even?
#=> true

7.even?
#=> false
```
#解答

```.rb
def count_evens(nums)
  count = 0
  nums.each do |num|
    if num.even?
      count += 1
    end     
  end
  puts count
end
```
配列の中の偶数が何個あるかを保存するために、変数countを用意します。

変数countをeach文のループ処理内に記述すると、処理が繰り返されるたびにcount = 0が実行され、countの数値が0に上書きされてしまいます。

そのため、countの定義はeach文のループ処理外で行います。

配列の中に入っている数字をeachメソッドで1つづつ取り出し、ifで「数字が偶数だったとき」countに1が追加される記述をします。
【Javascript】Setについて

# 初めに
setについて学習した内容のoutput用記事です。

※内容に間違いなどがある場合はご指摘をよろしくお願いします。
※こちらの記事はあくまでも個人で学習した内容のoutputとしての記事になります。

# setとは
配列や文字列の重複する値を排除し、ユニークな値だけを格納することができるオブジェクト

# 使ってみる
重複する値が存在する配列があった場合、配列の値からユニークな値だけを抽出することができます。

```javascript
//配列の場合
const foods = new Set([
        "hamburger",
        "potato",
        "potato",
        "chicken",
        "hamburger",
        "chicken",
]);

console.log(foods);
//Set(3) {"hamburger", "potato", "chicken"}
```
このようにpotatoやchicken,hamburgerは同じ値が２個ずつありますが、setを使うとそれぞれ一つだけの値が残ります。

```javascript
//文字列の場合
      const name = new Set("potato");
      console.log(name);

//Set(4) {"p", "o", "t", "a"}
```

setの中にある要素の数はlenghtメソッドではなく、sizeを使います。

```javascript
//要素の数を調べる

console.log(foods.length);
//undefined

console.log(foods.size);
//3
```
setに値があるかどうかを調べることもできます。これも配列とは似ていますが、includesメソッドを使うとエラーが出てしまいます。setにはhasメソッドが用意されています。

```javascript
//要素が存在するかどうか調べる

console.log(foods.includes("hamburger"));
//エラーが出る

console.log(foods.has("hamburger"));
//true
```
addメソッドを使えばsetに新しい要素を追加することもできます。ただ、同じ要素を2回追加しようとしても1つの値とかカウントされません。

```javascript
//要素の追加

foods.add("pizza");
foods.add("pizza");

console.log(foods);
//Set(4) {"hamburger", "potato", "chicken", "pizza"}
```
deleteメソッドでsetの要素を簡単に削除できます。

```javascript
//要素の削除

foods.delete("pizza");

console.log(foods);
//Set(3) {"hamburger", "potato", "chicken"}
      
const { a, b, c } = foods;
```
配列ではないので、次のように添字を使って削除することはできません。

```javascript
console.log(foods.delete[0]);
//undefined
```
setはユニークな値を残し、その中にある値が存在するかどうかを調べることに向いています。データを取り出す場合にはsetではなく配列を使うべきです。
clearメソッドでsetの中身を全て削除することもできます。
```javascript
//要素をすべて削除
foods.clear();

console.log(foods);
//Set(0) {}
```
setはiterable（反復可能）なので、for of文を使うこともできます。

```javascript
//for of文を使って要素を個別に表示する
for (const food of foods) console.log(food);
```
![スクリーンショット 2021-06-01 8.27.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/1f2a7b44-6440-6cd5-4613-1ee81bc82d3f.png)
配列からユニークな値を抽出し、スプレッド構文を使ってさらに配列に格納することもできます。

```javascript
//Setの使用例
const tools = [
  "hammer",
  "screwdriver",
  "scraper",
  "hammer",
  "spanner",
  "screwdriver",
  "scraper",
  "spaner",
  "hammer",
  ];

//setを使ってユニークな要素だけを抽出
const setTools = new Set(tools);
//spread構文を使ってSetを配列にする
const toolsUnique = [...setTools];

console.log(toolsUnique);
//(5) ["hammer", "screwdriver", "scraper", "spanner", "spaner"]
```

# 参考サイト
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Set
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes
dockerを使ってみた!

まず、インストールする。


Dockerfileというファイルを作成
使うライブラリや環境など、イメージを作る。

#dockerを実行
docker container run


# dockerとwebサーバーのポート通信の指定、名前をwebrick
docker container run -p 8000:8000 --name webrick samp
le/webrick:latest
PHPWordを使ってみた【前編】

#PHPWordとは
PHPOfficeにはPHPSpreadsheetやPHPPowerpointなどが存在しますが、今回はPHPWordを使ってみました。
PHPWordは文字通り、PHPでWord文書を作成することができるライブラリです。

#インストール
composerでPhpWordをインストールします。

```
composer require phpoffice/phpword
```

#PHPの出力

```
<?php
  // インスタンス生成
  $phpWord = new \PhpOffice\PhpWord\PhpWord();

  // Wordのセクションを追加
  $section = $phpWord->createSection();

  // 文字列を追加（オプションで書式設定追加）
  $section->addText(
    'PHPWord使ってみた',
    ['name' => 'ＭＳ ゴシック', 'size' => 14, 'color' => '000000']
  );

  // テーブルのスタイルを指定
  $tableStyle = array(
    'borderColor' => '000000',
    'borderSize' => 6,
    'cellMargin' => 50,
    'size' => 9
  );

  // テーブルを追加
  $table = $section->addTable($tableStyle);
  $table->addRow();

  // テーブル内のセルに文字列追加
  $table->addCell(2000, ['bgColor' => 'FFFFFF'])->addText(
    'テスト',
    ['name' => 'ＭＳ ゴシック', 'size' => 9, 'color' => '000000']
  );

  // 1つのセル内に複数行の文字列を追加
  $multiTable = $table->addCell(2000, ['bgColor' => 'FFFFFF']);
  $multiTable->addText(
    '① 1行目',
    ['name' => 'ＭＳ ゴシック', 'size' => 9, 'color' => '000000']
  );
  $multiTable->addText(
    '② 2行目',
    ['name' => 'ＭＳ ゴシック', 'size' => 9, 'color' => '000000']
  );
  $multiTable->addText(
    '③ 3行目',
    ['name' => 'ＭＳ ゴシック', 'size' => 9, 'color' => '000000']
  );

  // Word生成
  $objWriter = \PhpOffice\PhpWord\IOFactory::createWriter($phpWord, 'Word2007');

  // 生成したファイルを保存（今回のファイル名はtest.docxとした）
  $objWriter->save('test.docx');
```

#出力結果
![スクリーンショット 2021-06-01 7.57.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1575624/8349038c-922d-3c97-b19f-74c543bd78fd.png)

#まとめ
今回は、Wordファイルの生成を行い、フォントスタイルの指定やテーブルの作成も行いました。
他の書式設定やレイアウトの変更に関しては、以下をご確認ください。
[https://phpword.readthedocs.io/en/latest/](https://phpword.readthedocs.io/en/latest/)

次回は、今回生成したWordファイルをGoogle Driveへアップロードする方法を取り扱います。

#参照
[https://qiita.com/satthi/items/761f7d956e2e9ca76f53](https://qiita.com/satthi/items/761f7d956e2e9ca76f53)
[ShimaBlock]シート関連の操作サンプル

###概要
[ShimaBlock for VBA](https://shima-block.shima-soft.com/vba.html)の操作サンプルです。
ExcelVBAのシート関連コードを生成します。

使用サイト：[ShimaBlock for VBA](https://shima-block.shima-soft.com/vba.html)

###シートオブジェクトの取得(アクティブなシート)(ブロック)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1566115/cbddcd02-b551-5aa7-84a2-7029cb9cd0d1.png)

###シートオブジェクトの取得(アクティブなシート)(生成コード)
```vb
Sub Main()
    Dim ws As Worksheet

    Set ws = ThisWorkBook.ActiveSheet
End Sub
```

###シートオブジェクトの取得(シート名指定)(ブロック)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1566115/b638e8e4-1ff0-7e69-47aa-fd2b19cdd70b.png)

###シートオブジェクトの取得(シート名指定)(生成コード)
```vb
Sub Main()
    Dim ws As Worksheet

    Set ws = ThisWorkBook.Worksheets("Sheet1")
End Sub
```

###シートオブジェクトの取得(一番左のシート)(ブロック)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1566115/9817a4bd-5495-72ae-55f9-d9a6ee847493.png)

###シートオブジェクトの取得(一番左のシート)(生成コード)
```vb
Sub Main()
    Dim ws As Worksheet

    Set ws = ThisWorkBook.Worksheets(1)
End Sub
```

###サンプルコード参照サイト
以下のサイトのコードを参考に、[ShimaBlock for VBA](https://shima-block.shima-soft.com/vba.html)でコーディングしてみました。
[VBA（エクセルマクロ）でよく使うコードまとめ](https://qiita.com/hajimejimejime/items/0109f84051951bfdee0a)
SpringBootのRestControllerでJSONパラメータのフィールド名にダブルクォートが付いてないとエラーになる

# 概要

SpringBoot 2.5でRestControllerを用意し、JSONをRequestBodyとして受け取る簡単な実装をしようとしたところ、以下のエラーが発生しました。

```java
org.springframework.http.converter.HttpMessageNotReadableException: JSON parse error: Unexpected character ('t' (code 116)): was expecting double-quote to start field name; nested exception is com.fasterxml.jackson.core.JsonParseException: Unexpected character ('t' (code 116)): was expecting double-quote to start field name
```

# 原因

JSONをパース（解析）する際のエラーのようです。

```
expecting double-quote to start field name
```

フィールド名はダブルクォートで開始しろと。
つまり、JSONのフィールド名はダブルクォートで囲っていないと、SpringBootがJSONを処理する際に利用しているJacksonがExceptionを発生させるような仕組みとなっているようです。

実際に使ったJSONは以下のようなものです。

```json
{
  taskName : "test02",
  status: 0,
  priority: 0
}
```

# 解決策

JSONのフィールド名をダブルクォートで囲ってあげればもちろんExceptionは回避できますが、
そんなことをしないで、ダブルクォートで囲っていないフィールド名であっても、正常に処理が出来るようにしてあげたいと思います。

application.ymlに以下のような定義をすることで回避できます。

```yaml:application.yml
spring:
  jackson:
    parser:
      allow-unquoted-field-names: true
```

ちなみに、Jacksonをそのまま利用する場合、ダブルクォートのExceptionを回避するための設定として`ALLOW_UNQUOTED_FIELD_NAMES`の値をtrueに設定する方法がありますが、application.ymlに

```yaml
spring:
  jackson:
    parser:
      allow_unquoted_field_names: true
```

という設定をしてしまうと、以下のようなYAMLの定義エラーが発生するので注意が必要です。

```
説明	リソース	パス	ロケーション	タイプ
'allow_unquoted_field_names' is an unknown 'com.fasterxml.jackson.core.JsonParser$Feature[AUTO_CLOSE_SOURCE, ALLOW_COMMENTS, ALLOW_YAML_COMMENTS, ALLOW_UNQUOTED_FIELD_NAMES, ...]'. Valid values are: [ALLOW_BACKSLASH_ESCAPING_ANY_CHARACTER, ALLOW_COMMENTS, ALLOW_LEADING_DECIMAL_POINT_FOR_NUMBERS, ALLOW_MISSING_VALUES, ALLOW_NON_NUMERIC_NUMBERS, ALLOW_NUMERIC_LEADING_ZEROS, ALLOW_SINGLE_QUOTES, ALLOW_TRAILING_COMMA, ALLOW_UNQUOTED_CONTROL_CHARS, ALLOW_UNQUOTED_FIELD_NAMES, ALLOW_YAML_COMMENTS, AUTO_CLOSE_SOURCE, IGNORE_UNDEFINED, INCLUDE_SOURCE_IN_LOCATION, STRICT_DUPLICATE_DETECTION, allow-backslash-escaping-any-character, allow-comments, allow-leading-decimal-point-for-numbers, allow-missing-values, allow-non-numeric-numbers, allow-numeric-leading-zeros, allow-single-quotes, allow-trailing-comma, allow-unquoted-control-chars, allow-unquoted-field-names, allow-yaml-comments, auto-close-source, ignore-undefined, include-source-in-location, strict-duplicate-detection]	application-local.yml	/restcontroller-sample/src/main/resources	行 39	言語サーバー
```
unityからXFREEのMYSQLに接続したい

Unityでリザルトデータなどを保存したいと思って調べてみたら出来ることが解ったので早速やってみた

##環境
Unity2020.2とUnity2019.4
XFREEのMYSQL5.0.95

##1はじめ
まず下記のサイトでやり方が書いてあったのでこれどおりに進めてみた
https://www.harada-its.com/2019/07/24-506/
がエラーが出ておかしいなと思い検索して調べてみたら
##2必要だと言われてるdllを追加する
違うサイトで同じことをやってる人が居たのでそちらではエラーで書かれてるdllを追加して見たらエラーが消えたということでさっそくすべて入れてみたがエラーが消えなかった、どうしてもsystem.memoryというモノが必要というエラーが出てしまって困った
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483445/48a4e474-1bca-ffd6-d934-f2b2d1835331.png)
##3解決
https://gentome.com/gentomeblog/1378/hellomysqlonunity/
このサイトで使うMYSQLConnectorライブラリバージョンが**6.8.8**で自分が使ってるのは**最新版**だった！
ライブラリサイトに行ってアーカイブがないかと調べてたらあったのでそれをDLして入れてみたら
エラーがなくなったそれで最後のサイト通りにやってみたらエラーなく動いた（データは取得できなかったけど・・・）

##4取得できなかった原因
XFREEで調べてみるとMYSQLは外部接続は仕様で出来ないことを書かれてたので、諦め
まあ無料で使わせてもらってる側だから文句は言えないな・・・
##5まとめ
何とも残念なことになっちゃったけど、調べているうちになぜゲームとかでサーバーを通して
データベースに保存するのかという理由はUnityとかで直接アクセスするとアクセするデータが丸見えになっちゃうからをレを防ぐためにAPIでサーバーにアクセスするって基本てコメントを目にしたので無駄にならなかった
ゲームのデータなどを保存するならサーバーを借りてそこから安全だなと思いました！
この記事を読んで、少しでも読者の知識になればうれしいです。

追記：ネットで無料でwebアプリを上げたいという質問があってそれならXFREEのWordPressサーバー乗せればいいのではないでしょうか？という解答を目にしたのでバックエンドをそこに乗せてMYSQLにアクセスすることが可能なのかも？（調査中）
【yukicoder解説】〜Python3で「No.69 文字を自由に並び替え」をソートを使わずに解いてみた〜

# 目次
1. はじめに
2. 問題URL
3. 一般的な考え方 
4. ソートを使わない考え方
5. おわりに

**質問・指摘などがありましたらコメントか[Twitter](https://twitter.com/4voltex/)までお願いします。**
**LGTMしていただけると密かに喜びます。**

# はじめに
今回は[yukicoder](https://yukicoder.me/)のNo.69をPython3で解いてみました。

# 問題URL
・[No.69 文字を自由に並び替え - yukicoder](https://yukicoder.me/problems/no/69)

# 一般的な考え方
2つの文字列 _A_, _B_のうち、_A_を自由に並び替えたとき、_B_と一致させられるか。という問題です。問題の定義には、<br>
・どちらも等しい長さ
・すべて小文字のアルファベットからなる<br>
とあります。ここから_A_と_B_に含まれる文字が一致しなければ、_A_を並び替えても_B_にならないことがわかります。このような場合、_A_をソートして_B_と一致するかどうか調べるのが一般的な解き方だと思います。<br><font color="gray"><sub>_(なんでこのやり方浮かばなかったんだろう…。)_</sub></font>

## 実装例
```python:69.py
A = str(input().rstrip())
B = str(input().rstrip())

A = sorted(A)
B = sorted(B)

if A == B:
    print("YES")
else:
    print("NO")
```
まあこんな感じです。提出してみたところ、実行時間は18ms、使用メモリは7776KBでした。
Pythonで文字列をソートする場合、リスト型のメソッドである```sort()```ではなく、組み込み関数の```sorted()```を使うのがポイントです。

# ソートを使わない考え方
ここからが本題です。私が先に思いついたのはこの考え方でした。
この問題の実行時間制限は5.000秒/ケース、メモリ制限は512MBなので、これを満たせば、ソートを使う方法と比べて**重くても遅くてもAC**になります。
私の頭の中には、**並び替え=アナグラム** という考えが浮かびました。

具体的にいうと、_A_を並び替えてできる文字列全てと_B_を比較し、一致するか調べるというものです。

## 使ったもの
Pythonには標準ライブラリに```itertools```というモジュールがあります。
・[itertools --- 効率的なループ実行のためのイテレータ生成関数 &#8212; Python 3.9.4 ドキュメント](https://docs.python.org/ja/3/library/itertools.html)
これはイテレータ生成関数であり、組み合わせや順列関連の処理を高速に行うことができます。Python競プロ界隈では結構有名なのではないでしょうか。今回はそのうち、組み合わせイテレータである```itertools.permutations()```を用いました。以下に使用例を示します。

```python
import itertools
A = "cap"

for v in itertools.permutations(A):
    print(v)

# ('c', 'a', 'p')
# ('c', 'p', 'a')
# ('a', 'c', 'p')
# ('a', 'p', 'c')
# ('p', 'c', 'a')
# ('p', 'a', 'c')
```
このように、for文で文字列のアナグラムを簡単に生成することができます。
また、以下のようにリスト内包表記を用いることで、全ての並び替え例を1つのリストにまとめることができます。

```python
import itertools
A = "cap"

anagramable = ["".join(v) for v in itertools.permutations(A)]
print(anagramable)
# ['cap', 'cpa', 'acp', 'apc', 'pca', 'pac']
```
## 実装例
```python:69(anotherSolution).py
import itertools
A = str(input().rstrip())
B = str(input().rstrip())

anagramable = ["".join(v) for v in itertools.permutations(A)]

if B in anagramable:
    print("YES")
else:
    print("NO")
```
私が実際に提出したコードです。実行時間は1628ms、使用メモリは267416KBでした。ソートを使う方法とは比べものにならないほど遅く、処理も重いですがACになりました。

# おわりに
同様の問題、割とよく見かけるので、ソートを使うことを覚えていればなんとかなる場合が多そうだと思いました。<font color="gray"><sub>ちなみに、私は解説を見るまでソートを使えばいいと気づきませんでした。合掌。</sub></font>
*****
この記事で用いたコードを含め、yukicoderやAtCoderに提出したコードは、Githubにアップロードしています。気になる方はこちらからどうぞ↓
・[for_yukicoder &#8212; Github/PyRadiolarus](https://github.com/PyRadiolarus/for_yukicoder)
・[for_AtCoder &#8212; Github/PyRadiolarus](https://github.com/PyRadiolarus/for_AtCoder)
Vue.jsを2ヶ月利用して思ったこと（個人的感想）

この内容は、私が2ヶ月Vue.js(Vue CLI)を利用してシステム開発しての感想です。
異論、反論、多々あると思いますが、生暖かい目で見てください。
# JS(TS)系フレームワークではとっつきやすい
奇しくも2，3年の内にReact、Angularでの開発を業務で行ってきましたが、Vue.js(Vue CLI)でコーディングしていく方がとっつきやすい印象があります。
## ソース構成
Vue CLIでは、.vueファイルにHTMLベースのテンプレート(ビュー部)、スクリプト本体(コントローラ部)、CSSをコンポーネント単位で一つにまとめてコーディングしていきますが、コンポーネント単位で構造や構成を見ていく分には、これがわかりやすいように思えます。

Reactだとスクリプト本体の中に"render()"メソッドを置き、その中にビュー部となる箇所をJSX形式で記述することになりますが、共通の処理を別の関数として同じソースの中に定義してしまうと、第三者がソースを読む際に、何処にビュー部分があるかを探すのが厄介に思えました（別ファイルでまとめてimportすれば解決できると思いますが）。

Angularはスクリプトとビュー部分が完全分離していて、何かしらのバグがあった場合、最低で2つのファイルを見比べながら調査していくことになるので、ウィンドウを分割して同時に見られるようなエディタでないとめんどくさく感じるように思えます。
## ライフサイクル、イベントハンドリング
どのタイミングで処理をするかを考える上で、ライフサイクルとイベントハンドリングを理解する必要がありますが、Vue.jsのほうがシンプルでわかりやすいように思えます。

また、定義した変数の値が変化したことを感知するウオッチャもシンプルに記述できるので、理解するのにそれほど時間がかからないように思えます。

Reactだとライフサイクルの名称が似たようなものが並び、どれがどのタイミングで発動するのかがいまいち理解できませんでした（しかもバージョンが進んで廃止になったものもある）。

Angularだと厳密なイベントハンドリングをするとなるとRxJSを導入することになりますが、Angularとワンセットで勉強するとなると余計に時間を費やしてしまい、理解するのに時間がかかりました。
## Flux導入
コンポーネント単位で分割して実装する際、共通のデータをやりとりする場合、バケツリレー形式でいちいち記述しなければならないため、共通で利用するデータ類をFluxのようなものでまとめてしまうのが一般的かと思います。

VueだとVuexがあり、既存のソースを大きく変えなくても、Vuexを扱うディスパッチャを追加することで利用が出来るメリットがあります。

Reactで開発する際、Reduxを使う方が便利だと言われて試したものの、すでにReactで組み上げたソースをほぼ作り直すほど構造を変えていかないとならなくて、結局挫折しました。
Reduxを使うのであれば、新規で構築する際に決めた方がよく、途中導入ならFluxを使う方がいいです（一部のコンポーネントレベルならフック(Hooks)を使うのもアリ）。
## 学習開始から2ヶ月でフロントエンド完成
過去にReactやAngularを経験した上ではあるものの、結局実務の方で、要望されたフロントエンド部分をVueを1ミリも知らない状態から2ヶ月で完成させられました。

単にVueのみならず、Vuetify(テンプレートの都合上1.x)やChartist.jsを含めて学習した末のものですので、とてつもなくとっつきやすい印象です。

これがReactであれば3ヶ月以上、Angularとなると4ヶ月でも厳しかったでしょう。

もっとも、それぞれのフレームワークの仕様、開発のコツをつかんでしまえば、大規模で本格的なフロントエンドを作る際にはReact、Angularのほうが高機能、効率の良いシステムを作り込めるでしょう。

とはいうものの、あまりにもWeb系開発に於いて言語、技術が雨後の竹の子のように膨大に登場し、タダでさえ人が足りない開発者なのに、自分たちが利用している言語、技術を1年以上経験する人間を確保することが難しいほど、技術が分散してしまっている現状を考えると、SPAベースでフロントエンドを開発する上では、とっつきやすく未経験者でも短期間で理解できるVueは大きなメリットを持っているように思えます。

バックエンドとのやりとりは、axiosを使ってJSON形式で行うのが普及してますが、最近だとApolloを使ってGraphQL形式でやりとりする方法も出てきてますね。それは別の機会に．．．
JavaScriptモジュール関連の整理

##はじめに
前回は必要に迫られてJqueryを学びました。
また最近、ReactやVue.jsなども耳にしたので今回はそれらはそもそも何なのか。
位置付けというか整理をするために調べたことをアウトプットします。

##rails側からみると
**モジュールバンドラ**という一括管理するもので、JavaScriptは一つにまとめられている。
rails5.0ではAsset::pipelineを使用してまとめていた。

これがrails6.0では**webpack**を使用してまとめている。
↓
しかし、問題点としてrailsに取り込むのに手間がかかる... 
↓
そこで簡単にrailsに取り込めるように**webpacker**というgemが生まれた。

##JavaScript側からみると
まずはサーバで動く**Node.js**というものがある。
その中のNodeモジュールに上記で挙げたJqueryやReactなどがあるという位置付けになる。
そしてこれらは**package.json**というファイルで管理する。(railsでいうGemfile)
また、このパッケージマネージャーとして**yarn**がある。（railsでいうbundler）

##まとめ
内容から察する通り、まだ自分の言葉で記しても断片的な知識で理解が浅いことがわかります。
しかし、今まで環境構築をよくわからずやっていたのが気持ち悪かったが今回で少し見えてきた気もしました。
自分が何を使っていて、それはどういう仕組みなのか等々、もっといろんなサイトから堀り下げることでより深く理解していきたいです。
[Swift5] if/guard文によるパターンマッチの使い方

備忘録です。

#きっかけ
APIからデータを取得する際に、返ってきたレスポンスのステータスコードごとに処理を書こうとしました。ステータスコードが200番台 (成功)のときとそれ以外で処理を分岐したかったのですが、下記のようなエラーが発生しました。

```Swift:
//response: APIからのレスポンス
if response.statusCode == 200 ..< 300 {
    //処理成功
}
```
<img alt="1.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667697/4d92ebf3-4436-0ef1-78f4-5f7c769c1fcf.png">
翻訳すると、`「二項演算子 '==' は、タイプ 'Int' および 'Range<Int>' のオペランドには適用できない」`ということらしいです。
オペランドは式の数値等のこと、つまり演算子以外の要素のことです。
statusCodeはInt型なので当然と言えば当然の話ですが。

#解決策
if文でパターンマッチを使うと簡潔に書けるようです。

```Swift:
if case 200 ..< 300 = response.statusCode {
    //処理成功
} else {
    //エラー
}
```

guard文のパターンマッチで書き換える以下のようになります。

```Swift:
gaurd case 200 ..< 300 = response.statusCode else {
    //エラー
    return
}
//処理成功
```

もちろんswitch文のパターンマッチでも書き換えることができます。

```Swift: 
switch response.statusCode {
case 200..<300:
    //処理成功
default:
    //エラー
}
```

#最後に
if文とswitch文との使い分けとしては、switch文ではなるべくdefaultを使わずに条件を網羅できるときに使いたいので、網羅する必要がないケースではif caseパターンマッチを使用しても良いのではないかと思いました。
今回の私のような場合であれば、どちらを使っても良い気がしますが (defaultを使っても良さそうという意味で)、、、
余談ですが、他の記事を見てみると、enumが連想値を持つ場合にif文で==を使うと同じようなエラーに出くわすようです。

#参考文献
この記事は以下の情報を参考にしました。
- [Swift の if case / guard case によるパターンマッチングの使いどころ](https://medium.com/swift-column/if-guard-case-529af6a50351)
- [SwiftのEnumをif文で比較できない（Associated Value）](https://qiita.com/y_koh/items/204f04ab11677bd73444)
- [オペランドとは|「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典](https://wa3.i-3-i.info/word13306.html)
【Rails】Google fontsの導入

# 目的
Railsで作成したアプリに`Google fonts`を導入する。

# 開発環境
macOS: *Big Sur*
Rubyバージョン: *2.6.5*
Railsバージョン: *6.0.0*

# 前提
- アプリ`test-app`が作成されている。
[【Rails】簡単な投稿アプリの作成](https://qiita.com/oak1331/items/18a4f3a3386aab0fa354)

# 手順

1. [Google fontsとは](#google-fontsとは)
1. [フォントの選定](#フォントの選定)
1. [コードのコピー](#コードのコピー)
1. [scssファイルの編集](#scssファイルの編集)
1. [確認](#確認)

# Google fontsとは

`Google Fonts`とは、Googleが提供している無料で利用できるWebフォントサービスです。

# フォントの選定

まず下記HPから使用したいフォントを選定します。
[Google fonts](https://fonts.google.com/)

日本語対応のフォントもあるので、好みに合わせて選定してください!

今回は`「Noto Sans JP」`というフォントを導入します!

# コードのコピー

次に使用するフォントのコードをコピーします。
使用したいフォントの詳細ページに、青字で`「＋ Select this style」`と記載があるので、クリックします。
すると`<link>`と`@import`が選択できるので、`@import`を選択し、出てきた2つのコードをコピーします。

# scssファイルの編集

先ほどコピーしたコードを`scssファイル`に貼り付け、`Google fonts`を導入します!

```css:app/assets/application.scss
/*省略*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');

 * {
  font-family: 'Noto Sans JP', sans-serif;
}
```

今回はすべてのページに反映させたいので、`fint-family～`を`application.scss`に記述しています。
ページごとでフォントを使い分けたい場合は、その都度cssファイルに書いていきます。

# 確認

フォントの変更が適用されているかブラウザで確認します。
無事にフォントが変更されていれば成功です！

# 最後に

以上で`Google fonts`の導入は完了です。
コピペするだけで簡単にフォントの変更ができるので、ぜひ試してみてください。
では。
[SwiftUI] リリースビルドでクラッシュして困った

# 起こったこと
#### デバッグビルドではクラッシュしないが、リリースビルドでクラッシュする

adhoc build -> firebase distributionsで配布して実機で確認しようとした。

すると、特定の画面でクラッシュする現象が起きたので、以下の記事やstackoverflowを参考に再度ビルド・配布をした。

https://dev.classmethod.jp/articles/release-app-crash/

https://developer.apple.com/forums/thread/5695

が、治らず🥺

他の端末だとクラッシュしないだとか、OSのバージョンだとか、いろいろ検討したのだが...↓

# 結論
#### デバッグ用に表示していたViewのせいでクラッシュしていた
クラッシュするViewの子Viewとして、以下のようなViewを置いていた

```swift
#if DEBUG
  Button {
    // ...
  } label: {
    Text("ログアウト")
  }
#endif
```

「そういえば、デバッグ用のViewを置いているのはここだけだな...」と思いついて試しにコメントアウトしてみるとビンゴだった。
【yukicoder解説】〜Python3で「No.289 数字を全て足そう」を解いてみた〜

# 目次
1. はじめに
2. 問題URL
3. 考え方
4. 提出コード
5. コード解説
6. おわりに

**質問・指摘などがありましたらコメントか[Twitter](https://twitter.com/4voltex/)までお願いします。**

# はじめに
[yukicoder](https://yukicoder.me/)で簡単な問題として掲載されていたNo.289を解きました。Python3の解説が見当たらなかったので、私の解答を参考までに書いておきます。

# 問題URL
・[No.289 数字を全て足そう - yukicoder](https://yukicoder.me/problems/no/289)

# 考え方
半角英数字のみからなる文字列が与えられます。この中から数字を抽出し、総和を求めればよいです。

## 文字列メソッドの利用
Pythonでは文字列(```str```)がどんなものであるか判定するためのメソッドが用意されています。判定できるのは英字、英数字、ASCII文字、空文字列などです。<br>
・[組み込み型 &#8212; Python 3.9.4 ドキュメント](https://docs.python.org/ja/3/library/stdtypes.html#string-methods)<br>
今回は十進数字かどうか判別する```str.isdecimal()```を用いて解きました。

```python
s_1 = "0123"
s_2 = "abcd"
print(s_1.isdecimal())
# True
print(s_2.isdecimal())
# False
```

このように、```str.isdecimal()```は ```True``` もしくは ```False``` を返します。

# 提出コード
```python:289.py
S = list(str(input().rstrip())) #rstrip()で改行コード除去
res = 0 #数字がない場合は0を出力
for i in range(len(S)):
    TF = S[i].isdecimal()
    if TF:
        res += int(S[i])
    else:
        pass

print(res)
```
実行時間は20ms、使用メモリは7956KBでACでした。

# コード解説
まず与えられた文字列を1文字ずつ分割し、```str```型でリストに格納します。出力の初期値を```0```とした後、for文とif文を用いて、1文字ずつ数字かどうかの判定を行ないます。数字だった場合には、```int```型に変換し、出力に加算します。これを文字列の長さ分繰り返し、最後に出力します。

# おわりに
Pythonは標準ライブラリが充実しているだけでなく、組み込み関数やメソッドも充実しているので、競技プログラミング等で軽い処理をする際にはとても実装しやすい言語だと思います。
yukicoderではAtCoderとは違う傾向の問題が多く出題されているので、解きながら勉強になるものが多いと感じています。
*****
この記事で用いたコードを含め、yukicoderやAtCoderに提出したコードは、Githubにアップロードしています。気になる方はこちらからどうぞ↓
・[for_yukicoder &#8212; Github/PyRadiolarus](https://github.com/PyRadiolarus/for_yukicoder)
RDPセッションでウェブカメラにアクセス

今日のグローバルな現実、つまり、隔離され、社会的な距離を置くことが当たり前になった現実を考えると、日を追うごとに多くの人がリモートに移行しています。また、リモートデスクトップを使ったことのある人なら誰でも、リモート端末とホスト間のリソース管理が非常に手強い場合があることを知っているでしょう。

例えば、RDPセッション中にビデオ通話に参加する必要がある場合、ホストからでもゲストシステムからでも可能です。これらの方法にはそれぞれ利点と欠点がありますが、選択肢を広げておくことは良いことですよね？　そこで、このまま読み進めて、よくある質問、「RDPでウェブカメラを使用するには？」に対する完全な答えを得てください。また、RDPセッション内でUSBパススルーを有効にして、ウェブカメラのリモートアクセスを可能にする最も便利な方法についてもご紹介します。

##ウェブカメラのリモートアクセス：ソフトウェア方式

RDPでウェブカメラをリダイレクトする際に重要なのは、特定のユーザーにウェブカメラを割り当てる一方で、他のユーザーのアクセスを制限することです。これは、マルチユーザー環境で運用している場合（例：Windows Server）や、RDPサーバーが多数のクライアントからアクセスされている場合に、特に重要です。

これは、ウェブカメラをリモートアクセス用に開く際に、USB over Ethernetが最良の選択である理由の一つです。この強力なソフトウェアツールには、デバイスの分離機能が組み込まれています。
![Screenshot at Apr 02 10-25-48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/447311/0d95ff88-e63b-7409-22b3-725487787a25.png)

そこで、以下に、RDPセッションでウェブカメラにリモートアクセスする方法をわかりやすく解説したマニュアルをご紹介します。
1. [USB over Ethernet](https://www.usb-over-ethernet.org/)をダウンロードして、ホストマシンと、RDPでウェブカメラにアクセスする必要のあるリモートマシンの両方にインストールします。
2. ホスト上でアプリを実行し、「Devices（デバイス）」タブのリストでウェブカメラを見つけて、「Share（共有）」をクリックします。必要に応じて、ポート番号や暗号化などの変更が可能です。 
3. 次に、リモートコンピューターでUSB over Ethernetを起動します。カメラはすでにデバイスリストに表示されていますので、あとは「Connect（接続）」をクリックするだけです。

USB over Ethernetの利点をもういくつかご紹介します。
- すべてのWindowsとWindows Serverのバージョンに完全に対応。
- すべてのメーカーのUSBウェブカムに対応。
- ど、一般的なコミュニケーションアプリを多数サポート。
- Microsoft RDP、Teradici PCoIP、Citrix ICAなど、さまざまなリモートデスクトッププロトコルに対応
- macOSとほとんどのLinuxディストリビューションで完璧に動作。
- あらゆる種類のUSBデバイスに簡単にアクセス可能

##RDPセッションへのUSBウェブカメラパススルーの設定

この方法は、外付けのUSBカメラ、ノートパソコンの内蔵ウェブカメラ、モニター一体型のウェブカメラに対応しています。ただし、動作させるためには、RDPサーバーがWindows Server 2019（またはそれ以降）であるか、RemoteFXが設定されている必要があります。

注意：ウェブカメラの機種によっては、RemoteFXが動作しない場合があります。
そこで、Windowsでウェブカメラに無料でリモートアクセスするために必要なのは次のとおりです：
1. mstsc.exeを実行して、「Remote Desktop Connection（リモートデスクトップ接続）」マネージャーを起動します。次に「Local Resources（ローカルリソース）」タブを開き、「＋」をクリックして「Video capture devices（ビデオキャプチャデバイス）」の項目を展開します。
2. 関連するチェックボックスにチェックを入れて、このセクションとカメラの両方を有効にします：
![e8f7c294-9abc-44a0-964b-77f94b1c8354.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/447311/2f40a4b4-f2d8-d465-6eb8-e07e83c7f83e.png)
3. 「OK」をクリックして保存します。
その後、次回のRDPセッションからは、このウェブカメラにアクセスして、リモートデスクトップセッション内でビデオ通話に参加できるようになります。

注意：よほど良いブロードバンド接続環境でない限り、設定を最大の帯域幅にすることを強くお勧めします。

カメラに加えて、ローカルのマイクもパススルーして、RDPセッション中に使用することもできます。その方法は以下の通りです:
1.「Local Resources（ローカルリソース）」タブで、「Config remote audio settings（リモートオーディオの設定）」をクリックします。
2. 「Settings（設定）」で、「Remote audio recording（リモートオーディオ録音）」のオプションを見つけて、「Record from this computer（このコンピューターから録音する）」を設定します。
3. 「OK」をクリックして保存します。

これで、ローカルのウェブカメラとマイクを使って、RDPセッション内の会議室に参加できるようになります。ただし、場合によっては、この方法ではすべて正しく設定してもうまくいかない場合があり、その場合は最初からやり直しになります。でもまあ、少なくとも無料ですからね。

2つの方法のどちらを選択するかはあなた次第ですが、この選択は非常にわかりやすいです。絶対に失敗しないソフトウェアソリューションにお金を払って、膨大な神経と営業時間を節約するか、時間と手間を犠牲にしてお金を節約するかです。
CP-ABEのインストール

# 概要
CP-ABE(Ciphertext-Policy Attribute-Based Encryption)のインストールに手こずったので備忘録としてまとめます．間違っていたら申し訳ありません．各ライブラリやソフトフェアの説明は省略させていただきます．
[CP-ABE](http://acsc.cs.utexas.edu/cpabe/)
# 環境

```
Ubuntu 20.04.2 
```
# 手順
CP-ABEをインストールするにはいくつかの依存関係のあるライブラリやソフトウェアが必要となります．そのためまずはそちらのインストールを行います．
具体的にはCP-ABEにはPBCライブラリが必要に，PBCライブラリはGMPライブラリの上に構築されているためGMPライブラリのインストールが必要になります．また，GMPライブラリのインストールにはM4,bison,flexが必要となります．
## M4,bison,flexのインストール

```
sudo apt install m4
sudo apt install flex
sudo apt install bison
```
## GMPライブラリのインストール
[GMP](https://gmplib.org/)

```
wget https://gmplib.org/download/gmp/gmp-6.2.1.tar.lz
tar --lzip -xvf gmp-6.2.1.tar.lz
cd gmp-6.2.1.tar.lz
./configure
make check
sudo make
sudo make install
```
## PBCライブラリのインストール
[PBC Library](https://crypto.stanford.edu/pbc/)

```
wget https://crypto.stanford.edu/pbc/files/pbc-0.5.14.tar.gz
tar zxvf pbc-0.5.14.tar.gz
./configure
sudo make
sudo make install
```
## CP-ABEのインストール
CP-ABEをインストールする前にoppensslとglibがインストールされていなければインストールします．

```
sudo apt install libssl-dev
sudo apt install libglib2.0-dev
```
インストールが完了したらCP-ABEのインストール作業に入ります．
[CP-ABE](http://acsc.cs.utexas.edu/cpabe/)
パッケージがcpabeとlibbswabeの2種類ありますが，libbswabeを先にインストールします.

```
wget http://acsc.cs.utexas.edu/cpabe
tar -xvf libbswabe-0.9.tar.gz
cd libbswabe-0.9
./configure
sudo make
sudo make install
```
インストールが完了したらcpabeのインストールを行います．

```
wget http://acsc.cs.utexas.edu/cpabe/cpabe-0.11.tar.gz
tar -xvf cpabe-0.11.tar.gz
cd cpabe-0.11
./configure
```
生成されたMakefileでmakeしようとするとエラーを吐くため以下のようにファイルを書き換える.

```makefile:Makefile
LDFLAGS = -O3 -Wall \
        -lglib-2.0 \
        -Wl,-rpath /usr/local/lib -lgmp \
        -Wl,-rpath /usr/local/lib -lpbc \
        -lbswabe \
        -lcrypto -lcrypto \
        -lgmp
```

```y:policy_lang.y
result: policy { final_policy = $1; }
```
ファイルを書き換えるとmakeが通る．

```
sudo make
sudo make install
```
ここまでできればCP-ABEが動くはずなのでチュートリアルに沿って進めてみてください．
http://acsc.cs.utexas.edu/cpabe/tutorial.html