OmniAICreator/Qiita-1.07M huggingface dataset:
UiPathによる、辞書型変数(ディクショナリ)の作成

#準備
事前に「Microsoft.Activities.Extensions」をインストールしておきましょう。
![辞書.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1401870/2915a6cb-bc5c-2799-1579-257e733435cc.jpeg)
#辞書型変数の作成
「Add To Dictionary」アクティビティを、デザイナーパネルに追加して下さい。
すると、「Select Types」ダイアログが出現するので、keyとvalueの型を指定して下さい。
![辞書２.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1401870/6a8bdb9e-6f4e-24fb-7d54-49c8d5149624.jpeg)
「Dictionary」内で、変数を作成します。「key」と「value」内には、辞書化させたい値を記入します。
![辞書３.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1401870/6df5b744-f8f0-82ec-b6a5-fe8807cd4f10.jpeg)
作成した辞書型変数に「New Dictionary (of 【keyの型】, 【valueの型】)」と代入します。これで作成完了です。
![辞書４.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1401870/55f6190f-3555-dad9-3257-c044b384048c.jpeg)

「辞書型変数(key)」と書けば、keyに紐づけられたvalueを取得できます。
また、Assignアクティビティを使ってvalueを上書きする事もできます。
![辞書５.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1401870/acb0fc30-2bd5-fdf9-9beb-2db45eb035a7.jpeg)
なお、実際の業務では、ForEachRowを使って一気に作成する事が多いです。
![辞書６.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1401870/f9c5556b-a32d-5d68-85df-8c305b4ec370.jpeg)

#「key:value=1:2以上」の時
ここまでで紹介した辞書型変数は「key:value=1:1」の時に活躍します。
では下図のような「key:value=1:2以上」の場合はどうすればいいでしょうか？
![辞書7.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1401870/1c849cce-b01f-dc61-a653-4d9e763cef06.jpeg)
方法は2つあります。
①「Add To Dictionary」を複数使用する。
②valueの型に「tuple」を使用する。

###①「Add To Dictionary」を複数使用する。
単純に、valueの数だけ辞書型変数を作成して紐づける方法です。
![辞書8.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1401870/2dee1954-3c63-3947-5fe7-1b7928b145ab.jpeg)
【利点】Keyとvalueの関連が見やすい。
【欠点】valueの数だけAddToDictionaryを使うため、ワークフローが長くなる。

###②valueの型に「tuple」を使用する。
valueの型を「tuple」にして、1つのkeyに複数のvalueを紐づける方法です。
![辞書9.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1401870/3adbbca2-e601-8c29-f158-9c9bc3063a5d.jpeg)
作成した変数に「New Dictionary (of 【key型】, Tuple(of 【value1型】, 【value2型】))」を代入し、
![辞書10.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1401870/cea1290f-c0eb-86c7-7167-560db69e065b.jpeg)
さらに、Add To Dictionaryのvalue欄には、「Tuple.Create (of 【value1型】, 【value2型】)(【value1の値】, 【value2の値】)」を代入します。これで完成です。
![辞書11.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1401870/de684019-f611-2419-374b-7261cb3d5364.jpeg)
tuple内の値は、左からItem1,Item2…と定義されているため、値を取り出す時は「辞書型変数(key).Item【番号】」と記載すればOKです。
![辞書12.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1401870/533559bf-e093-6a72-1a99-d5e93a73500b.jpeg)
【利点】1個の辞書型変数に対して、valueの数に関係無くAddToDictionaryが1個で済む。
【欠点】可読性に難あり。
【vscode・qiita】vscodeからqiitaに投稿する拡張機能を作ってみた

初書：2021/04/28
mac : 11.2.3
vscode : 1.55.1
qiita api : v2
curl 7.64.1

# 前書き

QiitaにはAPIがある事は知っていたが、これを利用して記事投稿などが出来るという発想に至る事が最近(今更)起きたので、
いつもMarkdownをとりあえずvscodeで書いて全コピペしていたのを、拡張機能だけで解決しようと思い作成してみる。

ちなみに、この記事では拡張機能の開発面はあまり触れずに、必要そうな記録を残す。
拡張機能面は、ほぼ同時公開の[【vscode】改めてtypescriptで拡張機能を開発してみる](https://qiita.com/yuu_1st/items/ea5bf066d165b199b375)を参照

# 拡張機能紹介

今回作成したものがこちら→[vscode_qiitaapi - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=yuuyu.vscode-qiitaapi&ssr=false#overview)

2021/05/12現在、存在している機能はqiitaへの投稿だけのシンプルなもの。

## 投稿方法

投稿したいファイルを開き、コマンドパレット(com + shift + P)から「qiitaに投稿する」を選択するだけ。

その後、記事タイトル、投稿範囲、タグなどを指定すれば投稿が出来る。

投稿すると、以下のような文章がファイルの先頭に記述されるが、これを使って投稿情報を管理している。

```
//********************
  *      ID : xxxxxxxxxxxxxxxxxxxx
  *   title : 記事タイトル
  * private : true
  * istweet : false
  *    tags : タグ1, タグ2
//********************
```

この管理情報（説明では「qiita テンプレート」と表記）はjsonにするか迷ったが、記事から切り取る良い方法が思いつかなかったために自作。

ちなみにこれは「qiita テンプレートを付与する」を実行することで投稿前に記述しておくことも出来る。（IDが空白かどうかで新規投稿/投稿更新を判断しているため）

# 開発時メモ

これ以降は開発時に新しく知ったこととかのメモ。

## qiita apiを確認する

qiitaのapiは下の方の黒枠にも「[API](https://qiita.com/api/v2/docs)」と書いてあるページから飛ぶ事ができる。

ここに色々なAPIが記述されている。

## JSON Schema を利用してみる

少し読んでみると、Qiita API v2にはJSON Schemaなるものが定義されているらしい。
JSON Schemaって何？というのは詳しい説明は他の方に任せるとして、ざっくりいうと仕様書をそのままJSONオブジェクトで書いたもの。

[JSON Schemaのすゝめ - Qiita](https://qiita.com/g0e/items/9a4f886897fd46f107a8)

それで今回Typescriptを使用しているわけだが、せっかくこういうものがあるならapiで受け取ったJSONにも型推測したいよね、と。

参考サイト：[JSON-SchemaからTypeScriptの型定義を生成する - Qiita](https://qiita.com/ryo2132/items/b5bf2d8b2aeea2838927)

### json-schema-to-typeのインストール

何事もまずはインストールから。

```zsh
% npm install --save json-schema-to-typescript
```

インストールが終われば次はこちら

```zsh
% curl https://qiita.com/api/v2/schema | npx json2ts > qiita-types.d.ts
```

簡単に説明しておくと、`https://qiita.com/api/v2/schema`からデータを読み込んで、`qiita-types.d.ts`ファイルに変換したものを出力

これで完成。あとは`qiita-types.d.ts`をimportなりrequireなりするだけ。

## node.jsからシェルを実行する

今回はpandocを使ってみたかったので、node.jsからシェルを実行してみる

なお、`nodejs pandoc`と検索すると、[node-pandoc-promise - npm](https://www.npmjs.com/package/node-pandoc-promise)がヒットしたのだが、typescript型変換非対応＆うまくいかなかったので候補から除外。

ということで使うのは`child_process`。デフォルト機能なのでインストール不要。

使い方はとてもシンプルで、

```ts
import {execSync, exec} from "child_process";

const data = execSync(`cat index.ts`);
console.log(data.toString());
```

という風に、`exec`もしくは`execSync`を呼び出すことで使用できる。
２つの違いは同期か非同期か。ただパッと使ってみた感じawait/promise使えなさそう。

また`cat index.ts | pandoc -f html -t markdown`のような感じで、`cat index.ts`の部分をTSの変数で渡したい場合は、

```ts
import {execSync, exec} from "child_process";

str = "<h1>htmlが~~~~</h1>";

const data = execSync(`pandoc -f html -t markdown`, {input : str});
console.log(data.toString());
```

という風に、第二引数にoptionで渡すことができる。

[Node.js｜シェルコマンドを実行する方法(child_process) - わくわくBank](https://www.wakuwakubank.com/posts/728-nodejs-child-process/)


# 終わりに

この記事もこの拡張機能を使って投稿しているので、便利ではある。

あとはどこまで機能を追加するか……。

もし不具合とか、何か気付いたこととかがあれば、下のコメントか、marketplaceのQAに投げていただけると助かります。
Unreal Engine 4 でUDP経由でJSON文字列を受け取りたい

# 概要

Unreal Engine 4 (以下UE4)でUDP経由でJSON文字列を受け取る場合、文字列の取り扱いに気をつけよう。
UDPで受信したデータはバッファが使いまわされるため可変長データ、特に文字列ではサイズをよく見て扱う必要がある。
またJSON変換用のAPIには2通りあるので用途に応じて変えよう。

# 着想に至った経緯

- UE4でネットワーク上の外部デバイスから送られてくる操作情報を反映させたい。
- デバイスから送信する情報はこちらで設計できるものとして、UE4以外のものでも通用する形にしたい。それこそWebブラウザでも使いたいので、できればJSON。
- そのために中継サーバを立てるようなことはしない = WebSocketはこの時点で候補から除く。
- デバイスからのデータが実際に受信されたかどうかは不問 = この時点でUDPにしたい。

という経緯のもと、UE4でUDPでJSONを受け取る機能を実装します。

# デバイス側の送信部

Pythonで記述してUbuntuマシンで動作。
JSON文字列をUTF-8にエンコードして送信。



# UE4での機能設計

UE4にはブループリントという優れたビジュアルプログラミング環境が存在する。
実装する機能はこのブループリントで取り扱えることを前提とする。
これは既にアニメーションブループリント(以下、アニメーションBP)でキャラクタの挙動を記述しているものがあるためである。

一方、UDPもJSONもブループリントだけでは完結できない。
C++によるAPIが提供されているため、C++で実装を行っていく。
C++で実装を行っても、ブループリントに情報を公開する手段は提供されている。

アニメーションBPでC++の機能を実装するため、
UAnimInstanceを継承したクラスとして作成していく。
最終的にはアニメーションBPの親クラスを作成したクラスで置き換えることになる。

今回はWindows10のUE 4.25, 4.26.1で作成している。

## UE4でのUDP

参考にさせていただいたサイト
- http://www.kirurobo.com/2015/12/ue4-udp.html
- https://historia.co.jp/%3Fpage_id%3D4188

要約すると、
`FUdpSocketBuilder`を使って`FSocket`を作成。
さらにそれを使って`FUdpSocketReceiver`を作成し、
`OnDataReceived().BindUObject()`でコールバックを設定するといい。
コールバック関数の型は
`void func(const FArrayReaderPtr&, const FIPv4Endpoint&)`
となっていて、`FArrayReaderPtr`にデータへの参照が渡されてくる。

なお、このコールバックの設定はコンストラクタで行ってはならない。
ブループリントの性質上C++のクラスではなく、それを継承したクラスが使われるため、
コンストラクタでコールバックを設定してしまうとうまく動かない。

## UE4でのJSON

調べた限り2通り方法がある。

### FJsonSerializableを用いた方法

参考にさせていただいたサイト
https://historia.co.jp/archives/7636/

この方式は、`FJsonSerializable`を継承した構造体を定義し、
然るべきマクロを設定することで文字列と構造体の相互変換を行うことができる。

### FJsonSerializerを用いた方法

参考にさせていただいたサイト
https://gist.github.com/gamerxl/6c8f4426866c82f7327d063343d02fe9

この方式は、`TJsonReaderFactory`を使って文字列から`TJsonReader`を作成。
`FJsonObject`というオブジェクトに格納する。
`FJsonSerializer::Deserialize(JsonReader, JsonObject)`で格納し、
`JsonObject->GetStringField("field_name")`などとして読み出す。
(`Get***Field`は型ごとに用意されている。)

## あれ、文字列…

ここで問題となるのは、文字列の取り扱いである。

- Python側ではUTF-8エンコードで送信している。
- UE4側でUDPで受け取った情報(`const FArrayReaderPtr& data`とする)は`uint8*`型のポインタ(`data->GetData()`)と、受信サイズ(`data->GetNum()`)にアクセス可能である。

つまり、UE4側で受け取った文字列をUTF-8からUE4で解釈できる型(`TCHAR`および`FString`)に変換しなければならない。
文字コードの変換はマクロが用意されているので、

```
UTF8_TO_TCHAR(data->GetData());
```

で、行けると思うじゃん？
実はこのコードだと大変まずいことが起きる。
受信した文字列のサイズが前回よりも小さい場合、バッファは前回と同じサイズが確保されたままになっている。
また、UDPで受信した文字列の末尾に`\0`は入らない。
(このルールはあくまでC/C++の文字列のルールなのでバイナリ送信には無関係だから)
すると何が起きるかというと、
前回受信した文字列の上に今回受信した分の文字列が上書きされた状態でバッファの最後まで読もうとする。
そうするとJSON文字列としては無効なので変換に失敗する。

回避策として、例えば`UTF8_TO_TCHAR`にサイズ指定ができればよいが、それはできない。
受信バッファを直接操作はconstなのでできない。
ので、受信データサイズも受け取れるという性質を利用し、
サイズを正しく調整した一時バッファを作成して対処することにした。

さらにここで困ったのは、`UTF8_TO_TCHAR`は生のポインタを要求してくるところ。
まさか今更`malloc/free`はありえないので、
(メモリ管理を手で書くのは古くてイケてない以上に危険なのでやるべきでもやらせるべきでもないです。)
`std::vector<char> buf`を作って`&buf[0]`を渡すという古典的なやり方で回避。


# まとめ

- UE4でUDPを受信する場合、バッファは同じものが使いまわされる。可変長のデータ、特に文字列を受け取る際には要注意。
- UE4でJSONを取り扱う場合、やり方は2通りある。
【備忘録】FloatingPanelで半モーダルを作ってみる

#作ったもの
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480691/f7a40254-907d-9ccf-38c5-6b084aca1e0d.gif">
ソースコードはこちら↓

https://github.com/riku3/floatingPanel-sample-app
##公式
https://github.com/scenee/FloatingPanel

#環境
Xcode：12.4
Swift：5
CocoaPods：1.10.1

#作り方
##podインストール
`FloatingPanel`をインストール

```
pod 'FloatingPanel'
```

##ソースコード

```swift:ViewController
import UIKit
import FloatingPanel

class ViewController: UIViewController {
    
    var fpc = FloatingPanelController()

    override func viewDidLoad() {
        super.viewDidLoad()
        
        fpc.delegate = self
    }

    @IBAction func tappedBtn(_ sender: Any) {
        // 半モーダル(tip)から下フリックでモーダルを閉じる
        fpc.isRemovalInteractionEnabled = true
        
        // モーダルを角丸にする
        let appearance = SurfaceAppearance()
        appearance.cornerRadius = 9.0
        fpc.surfaceView.appearance = appearance
        
        // 半モーダルにtableviewをセットする
        let tableView = self.storyboard?.instantiateViewController(withIdentifier: "tableview") as? TableViewController
        fpc.set(contentViewController: tableView)
        
        // 半モーダルを表示する
        fpc.addPanel(toParent: self)
    }
}

extension ViewController: FloatingPanelControllerDelegate {
    // カスタム半モーダル
    func floatingPanel(_ fpc: FloatingPanelController, layoutFor newCollection: UITraitCollection) -> FloatingPanelLayout {
        return LandscapePanelLayout()
    }
}

class LandscapePanelLayout: FloatingPanelLayout {
    let position: FloatingPanelPosition = .bottom
    let initialState: FloatingPanelState = .tip
    var anchors: [FloatingPanelState: FloatingPanelLayoutAnchoring] {
        return [
            // 全モーダル時のレイアウト
            .full: FloatingPanelLayoutAnchor(absoluteInset: 16.0, edge: .top, referenceGuide: .safeArea),
            // ハンモーダル時のレイアウト
            .tip: FloatingPanelLayoutAnchor(absoluteInset: 130.0, edge: .bottom, referenceGuide: .safeArea),
        ]
    }
    // モーダルの横幅をカスタマイズ
//    func prepareLayout(surfaceView: UIView, in view: UIView) -> [NSLayoutConstraint] {
//        return [
//            surfaceView.leftAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leftAnchor, constant: 8.0),
//            surfaceView.widthAnchor.constraint(equalToConstant: 291),
//        ]
//    }
}
```

##参考
https://qiita.com/taisei_hikawa/items/2c66a001008c1bb7ed76
Androidエンジニアロードマップに沿って学習してみる

# はじめに
ここ半年くらい仕事でAndroidに触れていますが、体系的に勉強したわけでなく、知識の漏れ抜けが乱発したので一回学習方針を整理しようと思いました

そのときに見つけたのがおなじみの[Developer Roadmaps](https://roadmap.sh/)です

フロントエンド、バックエンド、インフラエンジニアのロードマップは見たことがありましたが、知らない間にAndroidが追加されていたので、こちらを参考に各項目でどう勉強していくのかというのを備忘録代わりにメモしたいと思います

# 概要
![roadmap.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553852/79bcce84-7268-2a77-34f8-6df85322772f.png)

パット見、他のロードマップよりもこじんまりしているイメージ

[こちら](https://github.com/anacoimbrag/android-developer-roadmap)だともう少し粒度高く書かれているので、適宜補足していきたいと思います

# 第一部
![pick-language.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553852/67879c5a-e112-43e8-10b6-11d8741755ae.png)

### 言語選択

ここは問答無用で記載の通り推奨されているKotlinを選択します
（Google様がKotlinをAndroid開発に適した言語として開発するから使え、的なこと書いてます）

# 第二部
![the-fundamentals.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553852/71ef5919-cb30-8286-434f-7f702f449ef9.png)

### ①Android Studioインストール

[ここ](https://developer.android.com/studio/install?hl=ja)からインストールする

ここではインストールのことしか書かれていないが、基本的な使い方は知っておく必要がある
(もう一つのロードマップでは、デバッガー・SDKマネージャー・エミュレータについて触れられている)

細かい機能は開発中に随時ググれば良いので、この時点では最低限のところだけ抑えておきたい
大抵の入門書には、最初の方でAndroidStudioの使い方が書かれているので、それを一通り抑えておく

好きなものを選べば問題ないが、私は下記の本を使用する
[「Androidアプリ開発の教科書 第2版 Kotlin対応 なんちゃって開発者にならないための実践ハンズオン」](https://www.amazon.co.jp/dp/B08WX6RCQ9)
理由としては、現時点で最新の環境に関して書かれており、前の版も少し読んだがわかりやすかったのでこちらを選択

### ②Kotlinの基礎学習

入門書を買ってもいいのだが、こちらが無料で使用できるのでこちらを選択
[Kotlin BootCamp](https://developer.android.com/codelabs/build-your-first-android-app-kotlin#0)
なお英語

### ③オブジェクト指向プログラミングについての学習

これに関してはどこまでやればよいのか悩みどころではあるが、一旦下記の本&記事を読みたいと思う

- [「オブジェクト指向でなぜつくるのか」](https://www.amazon.co.jp/dp/4296000187)
- [新人プログラマに知っておいてもらいたい人類がオブジェクト指向を手に入れるまでの軌跡](https://qiita.com/hirokidaichi/items/591ad96ab12938878fe1)
- [オブジェクト指向と10年戦ってわかったこと](https://qiita.com/tutinoco/items/6952b01e5fc38914ec4e)


### ④アルゴリズム&データ構造の理解

こちらは時間の都合により省略

実施できる余裕がある人は以下をやってみると良いかも
- [「アルゴリズム＋データ構造」](https://www.amazon.co.jp/dp/4627726538)
- [Introduction to Data Structures and Algorithms](https://www.studytonight.com/data-structures/introduction-to-data-structures)

### ⑤Gradleの使い方

こちらも現時点では細かい理解は不要だと思います
AndroidStudioからProject作成時に作られるbuild.gradleの内容理解は必要だと思うので、下記を読んでおくといいかも

- [Android Studio の Gradle の備忘録](https://qiita.com/izuki_y/items/5de57db9acb3b24cb77e)

そもそもGradleって何？って方はこちらの最初だけ読むといいかも

- [Gradle入門](https://qiita.com/vvakame/items/83366fbfa47562fafbf4)
    - 全体的におもしろいのでおすすめ

# 第三部

![git-github.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553852/fa13297b-3f1b-38e1-3256-4df8d5701ffc.png)

Gitに関しての学習は、私の会社の教材を使用しましたのであまり詳しく知りません（汗）

ググる際にわかりやすかったのはこちらです
[サル先生のGit入門](https://backlog.com/ja/git-tutorial/)
ここではバージョン管理ツールとは何かから書いてくれているので初心者の方におすすめです

GitHubに関しては[こちら](https://qiita.com/TakumaKurosawa/items/79a75026327d8deb9c04)のハンズオンを一通りやりました

ここも開発していくうちに覚えてくるので、あまり深堀りは必要ないかなと思います
個人開発として勉強される場合は最悪スキップしても良いかもです

# 第四部
![build-an-application.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553852/6fab2fa3-924c-f5d1-f9fa-ca9508d5de0b.png)


（作成中）
Pythonの正規表現でURLの特定の文字列から/スラッシュに囲まれた文字列を抽出

#URLである特定の部分から手前の/までの文字を抽出したい
いまいち文章だと分かりづらいので例を出します。
```
https://exsample.com/hendou/1234/category
```
というURLがあった場合。
末尾のcategoryのみ分かっていてhendouは動的なので特定できないとします。
この条件下で1234を抽出する正規表現です。
#正規表現
とりあえずこれで動くと思います。
```
'[^/]*(?=/category)'
```



```
m = re.search('[^/]*(?=/category)','https://exsample.com/hendou/1234/category')
print(m.group())
# 1234
```
#解説
`[^/]*`は/を除く0個以上の文字列です。
`[^除外したい文字]`で文字の除外ができます。
文字列を除外したい場合`[^a-z]`等の記述ができます。

#別パターン
categoryが末尾ではなく手前だった場合
```
https://exsample.com/hendou/category/1234/hendou2
```
先ほどの正規表現を少し変えれば抽出できます。

```
m = re.search('(?<=category/)[^/]*', 'https://exsample.com/hendou/category/1234/hendou2')
print(m.group())
# 1234
```
categoryが手前にある為先読み肯定から後読み肯定になりました。

#除外の別の表現
実はこの記事を投稿した時は`[^/]*`を`((?!/).)*` と記述してました。
`((?!除外したい文字列).)*`でも同じ効果が期待できます。
ただ圧倒的に`[^]`のが簡素ですね、調査不足でした。


#参考サイト
[特定の文字列を含まないという正規表現 - Weblog on mebius.tokaichiba.jp](http://ynomura.dip.jp/archives/2015/12/post_53.html)
[Python | 先読みと後読みを使ったパターンの記述](https://www.javadrive.jp/python/regex/index16.html)
[【Python】とっても便利な正規表現！ - Qiita
](https://qiita.com/hiroyuki_mrp/items/29e87bf5fe46de62983c)
Lambdaで I/O Errorが発生した場合の対応

# はじめに
個人的な備忘録が目的です。
言語は Python のみですが、考え方は他の言語にも流用できるかなと思います。

# 問題点
Lambdaでファイル作成系のコマンドを実行すると、たまに `I/O Error` 発生したりします。
例えば、 `poppler` にある `pdftohtml` を実行すると、

```bash
pdftohtml test.pdf output
I/O Error: Couldn't open html file 'outputs.html
```

原因は、Lambdaではカレントディレクトリにファイルを作成することができないからです。

https://stackoverflow.com/questions/39383465/python-read-only-file-system-error-with-s3-and-lambda-when-opening-a-file-for-re

# 対応策

上記のStackOverflowの記事にも書かれている通り、 `/tmp` に作成するようにしたら良いです。
`subprocess` を使う場合は、以下のような感じですね。

```python
command_list = ["pdftohtml", "-s", "-i", "test.pdf", "output"]
process = subprocess.Popen(command_list,
                           stdout=subprocess.PIPE,
                           stderr=subprocess.STDOUT,
                           cwd="/tmp",
                           universal_newlines=True)

```

# さいごに
何かありましたら、コメント頂けると助かります。
AWS S3に写真をアップロード設定を行なっていた時のエラー

![20210512-114147.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/d71cba23-abcc-783b-cf0d-4297bf3e1e25.png)


```rb:storage.yml
local:
  service: Disk
  root: <%= Rails.root.join("storage") %>

  amazon:
     service: S3
     region: ap-northeast-1
     bucket: tast123456
     access_key_id: <%= ENV['AWS_ACCESS_KEY_ID'] %>
     secret_access_key:  <%= ENV['AWS_SECRET_ACCESS_KEY'] %>
```

インデントを揃えないとエラーが出る設定になっています。
上記だとservice: Diskと同じ並びになるのでlocal:の続きと読まれてしまう。

```rb:storage.yml
local:
  service: Disk
  root: <%= Rails.root.join("storage") %>

amazon:
  service: S3
  region: ap-northeast-1
  bucket: tast123456
  access_key_id: <%= ENV['AWS_ACCESS_KEY_ID'] %>
  secret_access_key:  <%= ENV['AWS_SECRET_ACCESS_KEY'] %>
```
Flutterで右上に表示される「DEBUG」を非表示にする

`MaterialApp`に`debugShowCheckedModeBanner: false`を設定すればOKです。

```dart
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample App',
      // 追加
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Sample App'),
    );
  }
}
```
WindowsでDockerを使おうとしたときにハマった事【エラー】

#DockerDesktopで「No containers running」と表示され、Dockerが使えない

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659469/1be4f0e7-447b-665c-004f-89f8fc0f7f0f.png)



#実行しようとした操作は、参照したオブジェクトの種類ではサポートされていません。

どうやらDocker側の問題ではなくWSL側の問題のようです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659469/3aaad175-fa15-e6fd-7291-dd49bc8461d9.png)


#NoLsp.exeをダウンロードして実行する



```powershell:PowwerShell(管理者権限で実行）
curl www.proxifier.com/tmp/Test20200228/NoLsp.exe -o C:\Windows\System32/NoLsp.exe
cd C:\Windows\System32
NoLsp.exe wsl.exe
Success!
```

詳しくはmicrosoftのWSLレポジトリのissueを参考にしてください。

https://github.com/microsoft/WSL/issues/4177

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659469/42b1f32e-e8fd-3dae-f8c9-70c6517e0c3f.png)

#起動成功

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659469/44ebb0cd-f646-ec2e-8ec9-51c54abe46f0.png)
[Android]「No view found for id ～」エラーに直面した時

#エラーの意味は
～というidのViewが見つからないよぉーの意です。
筆者個人の場合は、FragmentViewのidが、見つからないとのことでした。
しつかりと、transaction.add＆commitしたのに…
#解決策
Activity側でFragmentの呼び出しを行っていたのですが、そもそもactivityのレイアウトをsetContentViewしてませんでした^^

以上。

なんか、前にもsetContentViewのし忘れで、一日ググりさまよった事があるなぁ～
onCreate内をいじった時に、setContentView消してしまうのあるあるなんだよなぁ。
【GCP】フォルダについてわかりやすくまとめてみた

GCPでは、組織、プロジェクトの作成に加えて、「フォルダ」の作成ができます。
フォルダの中にプロジェクトを作成することができるため、Windows で例えるならインターネットエクスプローラーのような階層化を実現できます。
フォルダ内に作成したプロジェクトにアクセスするときも、Googleアカウントは必要です。

図にすると以下。
![zu.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556084/5c1f0963-0cb2-798b-400f-357dc21ae521.png)

#メリット
適切なレベルの組織のポリシーに IAM ポリシーを柔軟に割り当てることができる。
権限の継承がり、階層構造を持たせることで、権限管理がしやすくなる。
例えば、サービスや開発アプリ毎にフォルダを作成して、関連するプロジェクトを配下に置くという管理ができる。

#デメリット
この仕組みを知らずに環境構築、権限付与してしまうと、管理が煩雑になる。

#参考URL
元々煩雑だった権限をきれいに整理したお話し。
https://blog.engineer.adways.net/entry/2019/11/15/150000
階層構造の考え方の例が記載されています。
https://medium.com/google-cloud-jp/gcp-iam-beginner-b2e1ef7ad9c2

#公式ドキュメント
https://cloud.google.com/resource-manager/docs/creating-managing-folders?hl=ja
https://cloud.google.com/resource-manager/docs/cloud-platform-resource-hierarchy?hl=ja
リソース階層の記載もありますが、ここについては、リソース階層と組織階層ってわかれてて、継承をうまくつかえば、意図せずプロジェクトが削除されることもないというお話を理解しておけばいいと思いました。
[Mac]  cisco packet tracer 設定（文字拡大）


初めてcisco packet tracerをmacで開いた場合字が小さいので、その際は
<br>
command + r
<br>
を押すと設定画面が表示されるので、

[cisco packet tracer 設定windows ver](https://qiita.com/taro-hida/items/c0eac8b23d4dc681bd60)

この記事のフォント変更部分の上らへんにある
Dialogs の CLIの数字を入力する部分を大きくすれば文字を拡大できます。

（デフォルトは10、僕は12を選択しています）
transform: scaleとborder-radiusとoverflowの組み合わせでハマった

ブラウザ側でしっかり対処して欲しいところではありますが対処方を見つけたので記載しておきます。

```scss
.icon {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 3px solid #000;
  overflow: hidden;
  &:hover {
    transform: scale(1.05, 1.05);
  }
}
```

これだとネストされたimgがborder-radiusを超えて拡張される

```scss
.icon {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 3px solid #000;
  overflow: hidden;
  will-change: transform; //- 追記
  &:hover {
    transform: scale(1.05, 1.05);
  }
}
```

will-changeで意図する動きにする。


> will-changeについて
CSS の will-change プロパティは、どのような要素の変更が予測されているかブラウザーに助言します。ブラウザーは要素が実際に変更される前に、最適化をセットアップすることができます。この種の最適化は、実際に変化が求められる前に、潜在的に高コストの処理を行うことで、ページの応答を向上させることができます。

引用 [MDN Web Docs](https://developer.mozilla.org/ja/docs/Web/CSS/will-change)
Laravel6.x  Authの導入

`Laravel5.8`まではLaravelインストール後に`php artisan make:auth`コマンドを実行するだけでログイン機能を実装することができていたが,`6.x`からは実装の手順が変わってしまいました。

## 実装環境
* PHP 7.3
* Laravel 6.20.26






## 1. laravel/uiをインストールする
Laravel6.xからは`laravel/ui`とゆう別のパッケージで管理されるよいうになった。上記コマンドを実行して`laravel/ui`をインストールする。

```
composer require laravel/ui "^1.0" --dev
```

インストールが完了したら`ui`Artisanコマンドが使用することができる。





## 2. フロントエンドのスカフォールドをインストールする
```
php artisan ui bootstrap --auth
```
`--auth`オプションをつけることでログイン/ユーザー登録スカフォールドも生成される。他にも
`php artisan ui vue --auth`や`php artisan ui react --autu`などもある。



## 3.Node.js インストール
Laravelはフロント開発がしやすいように`Laravel Mix`とゆう機能がある。`Larave Mix`を使用するためにはNodeをインストールしておく必要がある。

```
sudo yum install nodejs    //node.jsのインストール

node -v                    //バージョンが表示されたらインストールできている
v10.23.1 

sudo yum install npm       //npmのインストール

npm -v                     
6.14.10

 
```
npmについて
> npmとはNode.jsで書かれたパッケージを管理、インストールしたりするツール。
Laravel Mixを使用するのにこおnpmが必要になる。



依存パケージをインストール

```
npm install
```

インストールしたパッケージをビルドする。

```
npm run dev
```

本番環境の場合

```
npm run production
```



## 4. Authの導入
下記のコマンドを実行すると新規登録、ログイン機能が追加される。

```
php artisan ui bootstrap --auth
```
【AWS】VPCエンドポイントについて

#プログラミング勉強日記
2021年5月12日


#VPCエンドポイント
　VPCエンドポイントはグローバルIPを持つAWSサービスに対してVPCの中から直接アクセスするための出口。S3はグローバルアドレスを持っていて特有の名前をつけないといけない。特にVPCやAZを指定しなくても作ることができる。そのため、VPCの外にあるS3にアクセスしたいときにエンドポイントを使って設定できる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/c64aa28c-dd6a-b334-543b-441be74482ef.png)


　VPCエンドポイントはGateway型とPrivateLink型の2種類の接続形式がある。
##Gateway型
　Gateway型はサブネットに特殊なルーティングを設定して、VPC内部から直接外のサービスと通信する。ルートテーブルからVPCエンドポイントでエンドポイントポリシーを作ってそこで制御する。基本的には無料で冗長性はAWS側が対応しているマネーシド型サービス。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/cd20e577-e24a-e85a-caf5-7d08ef0bb9b2.png)


##PrivateLink型
　PrivateLink型はサブネットにエンドポイント用のプライベートIPアドレスを作って、そのアドレスをDNSが名前ルーティングする。通常のIPアドレスがVPCエンドポイントにも付与されるというやり方。アクセス制御はセキュリティグループを設定する。料金は有料で冗長性はマルチAZ設計になっている。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/e0b64e27-2373-ecea-f5a8-a00ff651193e.png)

#VPCの設定上限
　VPCにはそれぞれの設定において上限数がある。そのため、大規模運用する場合は考慮しなくてはいけない。

| リソース | 上限数 |
|:--:|:--:|
| リージョン当たりのVPC | 5 |
| VPC当たりのサブネット | 200 |
| VPC当たりのセキュリティグループ | 500 |
| AWSアカウント当たりの1リージョン内のElasticIPの数 | 5 |
| ルートテーブル当たりのルート | 100 |
| セキュリティグループ当たりのルール | 50 |
CSSのレイアウト定義案：Container・Boxで定義し、Element・Componentでの定義は避ける

# 入れ物（Container・Box）と内容物（Element、Component）の定義指針を定める

- 配置に関する定義は、要素を格納する入れ物（Container・Box）で定義し、個別の要素(Element、Component）ではできるだけ行わない。
- 要素は、装飾・形状・サイズに関するものの定義に留める。
- 特に、広域的に要素を利用する場合は、広域的な定義においては配置に関する定義は行わない。
- 要素はいろいろな場所で使われるため、位置を定義すると打ち消しなどの無駄な定義をいれることになる。
- marginをつけるときも、汎用的な定義部分ではなく、個別ページのスタイル内で行う。

```index.html

<header>
<img src="logo.png"/>
<button type="button">ログイン</button>
</header>
```

```_header.scss

.g-header {
  display: flex;
  justify-content: space-around;
}

```

```_nav-menu.scss

@use "config" as c;

.g-button {
  background-color: red;
  color: map-get(c.$color-set, "button-char-white");
}

```

# 備考(BEMの良さと疑問）

- BEMの設計の良さは、ただグルーバルやカスケードによる定義の衝突や打ち消し、予期しない影響を抑えることにとどまらず、親と子、入れ物と要素を意識するところにもあると思う。
- CSSの定義において、BEMの親子・入れ物と要素という視点はとても重要だと思います。
- BEMの命名方法については、冗長すぎるため疑義があります。（グローバルprefix、小さい階層、直下セレクタを組みあわせることで冗長なセレクタにする必要はないと思います。）
  BEMの命名法への疑義については、以下の記事でも指摘されています。

- 参考：[BEM Is Terrible](https://medium.com/@jescalan/bem-is-terrible-f421495d093a)
[Rails6.0 + jQuery + Bootstrap] d-flexが有効だと style="display: none;" が効かない。

#課題
Bootstrapのd-flexが有効な場合 $element.fadeOut() が効かなかった。
![スクリーンショット 2021-05-12 10.56.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239796/c851751b-b3b1-9b00-e02b-2acdd5f7db0f.png)
**子要素の列が消えてくれない。

#原因
どうやらこいつだ。
![スクリーンショット 2021-05-12 10.59.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239796/42c74ae6-a6ff-805a-c912-ed36cbc6ea05.png)

#結論
d-flex を外すと効いた。

```js:jquery
$element.removeClass('d-flex')
$element.fadeOut(300)
```
Vue.jsで動的に要素変更

配列に動的に値を追加して描画できなかったので、Obejctにしなさいよという教訓から書きます:tea:
間違い等ありましたら、ご指摘していただけると幸いです。

# リアクティビティ

>Vue は、配列における次の変更は検知できません:
>インデックスと一緒にアイテムを直接セットする場合、例えば vm.items[indexOfItem] = newValue
>配列の長さを変更する場合、例えば vm.items.length = newLength

https://jp.vuejs.org/v2/guide/reactivity.html#%E5%A4%89%E6%9B%B4%E6%A4%9C%E5%87%BA%E3%81%AE%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A0%85

上記の内容に引っかかって配列にひたすらpushして悩んでいました。(ちゃんとドキュメント読もうね...)
またリアクティブプロパティの宣言も行っておらず、カオスな状況でしたので原因の発見に遅れました。

```vue:Paramedit.vue
<template>
  <form id="form">
    <table border="1">
      <tr v-for="(sec, index) in task.params" :key="index">
        <td>Name</td>
        <td><input v-model="sec.Name" /></td>
        <td>Path</td>
        <td><input v-model="sec.ValueFrom" /></td>
        <td><button @click.prevent="deleteParam(index)">削除</button></td>
      </tr>
    </table>
    <a @click.prevent="addParam">追加</a>
  </form>
</template>

<script>
export default {
  data() {
    return {
      // 更新対象
      task: {
        // リアクティブプロパティの宣言必須
        // params: [],
        params: [
          { Name: "test1", ValueFrom: "test/path/1" },
          { Name: "test2", ValueFrom: "test/path/2" },
        ],
      }
    };
  },
  created() {},
  methods: {
    deleteParam: function (id) {
      let self = this;
      self.task.params.splice(id, 1);
    },
    addParam: function () {
      let self = this;
      // dataに入れておくと直前のデータが入力されていた
      let addForm = { Name: '', ValueFrom: '' };
      self.task.params.push(self.addForm);
    },
  },
};
</script>
```

https://codesandbox.io/s/friendly-kapitsa-kiye2
テレワーク : 在宅勤務でリモート保守する技術

# 要旨
テレワークで自宅からオンプレミスのお客さまへリモート保守する技術についてGoogle Slidesで説明します。

1. 概要
1. Squid
1. Guacamole
1. セキュリティー

# 勉強会資料

<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vS4X59cLg5JYBNEncL-Zx1WC1eoVeNeBXVZTz2SK1AbHDyAMcBnANFzMTy36NW_ln3vReBVR7v849QD/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>

# オンプレミス環境

- Windows Server
- ブラウザーでアクセスするWebアプリケーション

<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vRCKsBKRrtCU9HwPn_7AA1T7dJhuDFDhEsKGuG9iFdiU9U58d3PQq3rcQFYDCinaamDPiZu5_B5yNOV/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>

# 参考
Guacamole,Squidの環境は以下を参考にdockerで構築しています。
[Apache Guacamoleをdocker-composeで構築する](https://qiita.com/katuemon/items/97e955f08b7c4b70e827 "Qiita記事")
CSSの定義方法案：セレクタとmixinによる定義方法の使い分け

# １．概要

- CSSを作成する上での観点のメモ。
- 設計論ではあまり言及されていない部分をプログラマー視点で考察。

## （１）前提条件

- SASSを利用してCSSを作成する。（2021年現在では、Dart-Sass+SCSSが多い）

## （２）方針

- DRY,KISSの原則に基づく。
- 無駄な文字列を使わず、命名をできるだけ単純にする。（冗長化させない）


# ２．スタイルの定義方法の分類

　スタイルの定義の方法として、セレクタとmixinによる定義の２つの形式に分けられる。
　関数は、数値計算等に利用し、定義には使用しない。

##（１）セレクタによる定義

- HTML要素、id、classなどを定めて、それに対してスタイルを定義する。
- CSSとしてユーザーのブラウザに送信される。（定義と実行を伴う）

## （２）mixinによる定義

- 独自の名前によりスタイルを定義。
- 複数の定義をまとめるショートカットの役割がある。
- CSSとして直接は生成されず、ブラウザにも送信されない。（定義のみで実行は伴わない）
- 汎用的なスタイルの定義はmixinでショートカットを作成し、セレクタで使う。
- 実際にブラウザでは利用されないため、予期しない干渉を防ぐことができる。


# ３．定義方法のメリット・デメリット

## セレクタ
- セレクタでの定義は、画面上に影響します。広域的に利用することで、CSSの定義数を減らすことができます。
- 上記は、無思慮に多数の定義をつくることで予期しない影響を及ぼします。
- セレクタ名の工夫やソースの配置を考え、できるだけ最小限の数で定義することで問題を減らすことができます。

## mixin
- 画面上に影響しないので、汎用的で些末な定義はmixinでした方が予期しない影響を抑えることができます。
- 一方、mixinは置換になるので、CSSのサイズが増えてしまうことがあります。
- セレクタの定義を最小限にしつつ、その中で呼び出すことにより、結果的に、トータルでは少ないコード数になります。

# ４．定義方法の使い所

## セレクタ

- 標準の定義方法やmixinなどの定義を複数組み合わせて、画面上の部品に対して定義をする。

```scss:_box.scss
@use "config" as c;

.g-box {
  border: solid 1px map-get(c.$color-set, "box-line-gray");
}
```

## mixin

- 画面上の部品ではなく、汎用的で小さい範囲のものを定義する。
- 数行にわたるものを１行で呼び出せるようにする。
- cssの標準ではわかりにくものに別名を与えてわかりやすくする。

```scss:_margin.scss

@mixin h-center-margin {
  margin-left: auto;
  margin-righ: auto;
}

@mixin v-center-margin {
  margin-top: auto;
  margin-bottom: auto;
}
```

# ５．最後に

 セレクタとmixinをうまく使い分けることで、予期しない影響を省きつつ、かつ、ビルドされたCSSのコードサイズを抑えることができると思います。
CroutonとChromeBrewでChromebookをLinux機のように使う

# はじめに
この記事はChromebookをお手軽なLinuxマシンとして使うためのメモです。

### 長所
* Chromebookを使うためLinuxをインストールするよりも入手性が高く、持ち運びや保守が楽
* CroutonでUbuntu環境をインストールするため、Android環境とLinux環境をシームレスに運用できる
* Chronosコマンドラインによる、GUIとCUIの一体性の高さ

### 短所
* Developperモードを使うためChromebookの保証範囲外になる

### 手順

* デベロッパーモードに入る(注意：初期化が必要なのでChromebook入手直後にやるのが望ましい）
* セキュリティのためにrootのパスワードを設定
* Croutonのインストール
* ChromeBrewのインストール
* chroot環境下にnumpyを入れる

# Developperモードに入る
[参照元](https://www.androidauthority.com/how-to-enable-developer-mode-on-a-chromebook-906688/)古いChromeBookでは方法が違う場合もあります。ChromeOSが初期化されるので購入直後にやるか、バックアップを取ってからやってください

* Esc+🔃+電源 を長押しする
* “Chrome OS is missing or damaged. Please insert USB stick.”の表示が出たらCtrl+Dを押す
* 開発者モードでの初期化が終了するまで待つ

# セキュリティーのための開発者パスワードの設定など

* Chrome上でCtrl+Alt+Tでターミナル(chrosh)を起動し

```commandline
sudo chromeos-setdevpasswd
sudo crossystem dev_boot_signed_only=1
```
としてパスワードを設定する。また、不正なOSイメージで起動されないように設定する

# croutonのインストール
[参照元](https://github.com/dnschneid/crouton) croshのコマンドラインで

* https://goo.gl/fd3zc このリンクからcroutonをダウンロードする
* `sudo install -Dt /usr/local/bin -m 755 ~/Downloads/crouton`
* `sudo crouton`
* `sudo crouton -t xfce,extension,audio,gtk-extra,keyboard,xiwi`でchroot以下にUbuntuをインストールする
* Ubuntu環境には`sudo enter-chroot` で入ることができる

# Chromebrewのインストール
[参照元](https://github.com/skycocker/chromebrew)　chroshのコマンドラインで

* `curl -Ls git.io/vddgY | bash`としてChromeBrewをインストールする
* `crew install sommelier`でSommelierをインストールしてGUIアプリがChromeOSのGUIを叩けるようにする
* GUIアプリがSommelierを使わせるため以下の環境変数を`~/.bashrc` で設定する

```
export GDK_BACKEND=wayland 
export CLUTTER_BACKEND=wayland
export XDG_RUNTIME_DIR='/var/run/chrome'
export WAYLAND_DISPLAY=wayland-0
export DISPLAY=:0
```

### レポジトリは/usr/local/lib/crew 以下
* ここにgitでcrewの設定が保存されている
* crewがJSONを読み取れないと文句を言って落ちるときは /usr/local/etc/crew/device.json を消去してからChromeBrewを再インストールしてみる

# chroot環境下にnumpyを入れる
TBA
wemosでenebular

#概要

wemosでenebularを叩いてみた。
postで受信ポイントにhttpリクエストを送った。


#サンプルコード

```
#include <ESP8266WiFi.h>
#include <WiFiClientSecure.h>

const char * ssid = "takahatalib";
const char * password = "***";

bool Https_Get_access(String host, String url, String argument) {
	BearSSL::WiFiClientSecure client;
	client.setTimeout(500);
	client.setInsecure();
	const int httpPort = 443;
	const char * host2 = host.c_str();
	if (!client.connect(host2, httpPort))
	{
		Serial.println("connection failed");
		return false;
	}
	client.print(String("POST ") + url + " HTTP/1.1\r\n" 
		+ "Host: " + host + "\r\n" 
		+ "User-Agent: ESP8266/1.0\r\n" 
		+ "x-api-key:test-api-key\r\n"
		+ "content-type:application/x-www-form-urlencoded\r\n"
		+ "content-length:32\r\n"
		+ "Connection: close\r\n"
		+ "\r\n"
		+ argument + "\r\n"
		+ "\r\n");
	unsigned long timeout = micros();
	while (client.available() == 0)
	{
		if (micros() - timeout > 5000000)
		{
			Serial.println(">>> Client Timeout !");
			client.stop();
			return false;
		}
	}
	while (client.available())
	{
		String line = client.readStringUntil('\r');
		Serial.print(line);
	}
	return true;
}
void setup() {
	Serial.begin(115200);
	delay(10);
	Serial.print("Connecting to ");
	Serial.println(ssid);
	WiFi.begin(ssid, password);
	while (WiFi.status() != WL_CONNECTED)
	{
		delay(500);
		Serial.print(".");
	}
	Serial.println("");
	Serial.println("WiFi connected");
	Serial.println("IP address: ");
	Serial.println(WiFi.localIP());
}
void loop() {
	String host = "***.herokuapp.com";
	String url = "/sensordata";
	String argument = "roomname=house1&temperature=25.7";
	Https_Get_access(host, url, argument);
	while(1)
	{
		delay(5000);
	}
}






```

以上。
実行エラー 429 ActiveXコンポーネントはオブジェクトを作成できません

職場のエクセルで作成したマクロを自分の家のmacで実行してみたら、タイトルのようなエラーが出た

職場の方ではエラーが出ずに、macの方だけ出たので焦ったがどうやら

Scripting.Dictionary がmac環境では利用できないみたいです
https://teratail.com/questions/36418

おかしいわけではないようなのでwindowsで作業することにしました
mysql が急に壊れた。The server quit without updating PID file エラー

## 結論から言うと

macの再起動で治りました。
それで治る事に気付かずにデータベース削除しちゃったので、忘れないように忘備録。


## ①pidファイルの作成

ここを参考にしてやってみましたがダメ。

https://qiita.com/jonakp/items/477a18d4a94c01a31583

```terminal:ターミナル
$ touch /usr/local/var/mysql/*****.local.pid
$ sudo chown -R _mysql:_mysql /usr/local/var/mysql/
```




## ②DBの削除、再作成

泣く泣く/usr/local/var/mysql も削除しましたがダメ。

https://qiita.com/_natsu_no_yuki_/items/ae4c94187093e4ab3cdc

```terminal:ターミナル
$ sudo rm -rf /usr/local/var/mysql
$ brew uninstall mysql
$ brew install mysql
```

## ここでようやく

macの再起動したら治りました笑。
＼(^o^)／　DB消しちゃった。

原因はよく分かりませんが、そういえば「システム環境設定」の「共有」のコンピュータ名とか変えたのでそれがよくなかったかも。


## phpmyadminに入れない

新しいDBのphpmyadminにrootで入れませんでした。

## "The server requested authentication method unknown to the client [caching_sha2_password]"エラー

このエラーがいつ出たか忘れてしまいましたが、とりあえずこれで直しました。

https://qiita.com/ucan-lab/items/3ae911b7e13287a5b917

```terminal:mysql
mysql> SELECT user, host, plugin FROM mysql.user;
mysql> ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'P@ssw0rd';
```

* * *

あとこれも

https://qiita.com/chii-08/items/a0d41f4bb94309876763

MySQL5.7以降では、デフォルトでrootユーザーのパスワードが自動で初期設定されるとか。
ここを参考にしてパスワード変えました。


```terminal:mysql
mysql> set password for root@localhost='新パスワード';
```

ーーーーーーーーーーーーーーーーーーーーーーーーーーー

参考

https://qiita.com/gatapon/items/92b942fa7081cfe17482
innerHTML

■　innnerHTML とは

innerHTMLを使用すると、HTML要素の取得や書き換えを行うことができる
例えば、以下のように指定した要素の文字列を取得・操作することができます。


■イメージ図　⬇️

https://gyazo.com/19a2a0e0396b2764bfd80fd888ffa641


今日の投稿は以上です。

wagaでした！
【Azure】サブスクリプション内の NSG ルール一覧を取得する Azure CLI

サブスクリプション内のNSGルール一覧を取得する Azure CLI を考えたので、メモしておきます。

#### 前提
* 操作端末に [Azure CLI](https://docs.microsoft.com/ja-jp/cli/azure/what-is-azure-cli) をインストールしていること
* サインインアカウントに Azure サブスクリプション内のNSG参照権限があること

#### コマンド

```shell:Get-NSG-rule-list.azcli
# Azure サインイン
az login

# サブスクリプション選択
azureSubscription={your subscription}
az account set --subscription $azureSubscription

# NSG 一覧確認
az network nsg list -o table

# NSGの名前とリソースグループ取得
nsgsName=($(az network nsg list -o tsv --query [].name))
nsgsRg=($(az network nsg list -o tsv --query [].resourceGroup))

# NSGルール一括取得
for((i=0; i<${#nsgsName[@]}; i++))
do
    echo "NSG name: ${nsgsName[i]}, RG: ${nsgsRg[i]}"
    az network nsg rule list -g ${nsgsRg[i]} --nsg-name ${nsgsName[i]} -o table
done

# ファイルに出力する場合
for((i=0; i<${#nsgsName[@]}; i++))
do
    echo "NSG name: ${nsgsName[i]}, RG: ${nsgsRg[i]}"
    az network nsg rule list -g ${nsgsRg[i]} --nsg-name ${nsgsName[i]} -o table
done > NSG-LIST.txt
```
【GCP】フォルダを作成してみた

GCPに携わって一年。フォルダを作成とかしたことなかったのでやってみました。

#ハマったところ
リソース管理からフォルダを作成してみようとおもったら、以下の権限が必要とのこと。
resourcemanager.folders.create

公式ドキュメントは以下です。
https://cloud.google.com/resource-manager/docs/creating-managing-folders

#対処
今回の対処方法としては、組織の管理者アカウントに属している私のアカウントに「resourcemanager.folders.create」を付与しました。
GCPコンソール画面から付与することができるので、簡単です。

#対処後の変化
リソース管理からフォルダを作成できるようになりました。
フォルダを作成した後は、プロジェクトを作成するときに表示される「場所」でフォルダを選ぶことができるようになってます。
時間に関わるspec

# 目的

特定の時間になるかを確認するためにspecを書きたい
どのように書けば良いか分からず調べた

## travel_toとは
`ActiveSupport :: Testing :: TimeHelpers`のメソッドの一つです。

変更したい日時を渡すと、Time.now、Date.today、DateTime.nowで返される
日時を変更することができます。


# コードイメージ

```:spec/models/○○○_spec.rb
Spec.describe Task, type: :model do
  it 'is whether now time' do
    travel_to('2019-05-26 23:00'.to_time) do
      expect(Time.zone.now).to eq(Time.new(2019, 5, 26, 23, 0, 0))
    end
    after do
     travel_back
    end
  end
end

```

## 指定した時間に、時間を止められます

```
it 'puts date and time' do
  travel_to Time.zone.local(2020, 03, 16) do
    pp Date.today   # -> Mon, 16 Mar 2020
    pp Time.now     # -> 2020-03-15 15:00:00 +0000
    pp DateTime.now # -> Mon, 16 Mar 2020 00:00:00 +0900
  end
end

```

Rails 5.2系から下記の記載は必要なくなったようです。
情報ありがとうございます！

 ~~時間を止めてしまうとそれ以降のspecの時間も止まってしまうため、
下記の記述が必要になります。~~

```
    after do
     travel_back
    end
```

## 参考URL

https://qiita.com/mightysosuke/items/72f764fc237422b423b0
https://fuqda.hatenablog.com/entry/2019/03/04/223012
【Swift】UserDefaultsを扱いやすくする

#はじめに
今回はUserDefaultsをジェネリクスとプロトコルを使って少し工夫します。

#やりたいこと
普通は以下のように使うと思います。

```swift
UserDefaults.standard.set("サンプル", forKey: "sampleKey") // 書き込み
let text = UserDefaults.standard.string(forKey: "sampleKey") // 読み込み
```

今回は以下のように、forKeyを工夫してアクセスしやすくします。

```swift
let userDefault = UserDefault<UserDefautlsKeys.Animal>()
userDefault.set(true, forKey: .dog)
let bool = userDefault.bool(forKey: .dog)
```

一番簡単なのは、以下のようにStringを拡張する方法です。

```swift
extension String {
    static var dog: String { return "sampleDogKey" }
    static var cat: String { return "sampleCatKey" }
}
```

しかし、これだとUserDefaultsのkey以外でもこの文字列を使うことができ、あまり意味がありません。
今回はUserDefaultのforKeyを設定する時のみ、このような使い方をするにはどうすればよいのかをやっていこうと思います。

#実装

```swift
struct Animal {
    let dog: String
    let cat: String
}

struct Drink {
    let water: String
    let milkTea: String
    let cola: String
}

struct UserDefautlsKeys {
    enum Animal: String, UserDefautlsKeyProtocol {
        static let domain: Domain = .animal
        var id: String { self.rawValue }
        case dog
        case cat
    }
    enum Drink: String, UserDefautlsKeyProtocol {
        static let domain: Domain = .drink
        var id: String { self.rawValue }
        case water
        case milkTea
        case cola
    }
}

enum Domain: String {
    case animal
    case drink
}

protocol UserDefautlsKeyProtocol {
    static var domain: Domain { get }
    var id: String { get }
    var key: String { get }
}

extension UserDefautlsKeyProtocol {
    var key: String { Self.domain.rawValue + "." + id }
}

final class UserDefault<R: UserDefautlsKeyProtocol> {
    private let userDefaults: UserDefaults
    init(userDefaults: UserDefaults = .standard) {
        self.userDefaults = userDefaults
    }
    func set(_ value: Any?, forKey identifier: R) {
        userDefaults.set(value, forKey: identifier.key)
    }
    func bool(forKey identifier: R) -> Bool? {
        return userDefaults.bool(forKey: identifier.key)
    }
}
```

#解説
一番のポイントは`UserDefault`のジェネリクスです。これでキーの型を`UserDefautlsKeyProtocol`が準拠したものに限定できます。今回であれば、`UserDefautlsKeys`の`Animal`と`Drink`に準拠させているので、これらのkey(今回はkeyを初期設定しているので、enumの中には書かれていないが、domainとidで一意に決まる)に限定できます。
また、プロトコルを使うことでUserDefaultsKeyを抽象化し、キーを扱いやすくしています。


#おわりに
おわりです。
Git 初学

参考（[たった１日で基本が身に付く！Git超入門](https://www.amazon.co.jp/%E3%81%9F%E3%81%A3%E3%81%9F1%E6%97%A5%E3%81%A7%E5%9F%BA%E6%9C%AC%E3%81%8C%E8%BA%AB%E3%81%AB%E4%BB%98%E3%81%8F%EF%BC%81-Git%E8%B6%85%E5%85%A5%E9%96%80-%E3%83%AA%E3%83%96%E3%83%AD%E3%83%AF%E3%83%BC%E3%82%AF%E3%82%B9-ebook/dp/B08CZ73N5Q/ref=sr_1_6?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&dchild=1&keywords=%EF%BC%A7%EF%BC%A9%EF%BD%94&qid=1620395804&sr=8-6),　[サル先生のGit入門](https://backlog.com/ja/git-tutorial/))

##リポジトリ（2種類ある）

ファイルやディレクトリの状態を記録する場所。
パソコン内のフォルダをリポジトリ化すると、フォルダ内に.gitという名前の隠しフォルダが作られる。

- リモートリポジトリ

専用のサーバに配置して複数人で共有するためのリポジトリ。

- ローカルリポジトリ

ユーザ一人ひとりが利用するために、自分の手元のマシン上に配置するリポジトリ。

##コミット
ファイルを編集してリポジトリに記録する操作のこと。
記録したひとかたまりのデータのこともコミットと呼ぶ。

##ワーキングディレクトリ（ワークツリー）
Gitの管理下に置かれた、実際に作業をしているディレクトリのこと。

##プッシュ
ローカルリポジトリの内容をリモートリポジトリに反映するときの操作。

##プル
リモートリポジトリの内容をローカルリポジトリに反映するときの操作。

##コンフリクト（衝突）
複数人がローカルリポジトリで作業した結果、同じファイルの内容が食い違ってしまった場合に起きる問題。

##差分
前回のコミットからの変更部分。

##クローン
リモートリポジトリを複製したローカルリポジトリを作る操作。
データベース設計について

書籍でデータベース設計について学習したのでまとめてみたいと思います。
本当に基礎中の基礎のことしかまとめないので、何の参考にもならないと思いますが、自分の頭を整理するために。。


# データベース設計の3つの手順
データベースやテーブルの設計は以下３つの手順を経て行います。

## 概念設計
管理すべき情報はどうのようなものかを整理する。システムに関する事は考えず、要件に登場する情報だけを把握する。
情報間で関連がある場合（リレーション）、どのような関係があるかも整理する。ER図もこの段階で作成する
概念設計では、情報を整理するために以下の3つの言葉が使用される

- エンティティ...テーブルのようなもの
- 属性...テーブルの列のようなもの
- 関連...リレーションのようなもの

### エンティティを導き出す方法
- 候補となる用語を洗い出す
- 不要な用語を捨てる
- 関連がありそうなものをまとめる
- エンティティ名と属性名に分ける

## 論理設計
概念設計で整理された各情報について、RDBを使う前提で構造を整理し具体化していく。
論理設計では、どのようなテーブルを作り、それぞれどのような列を作るかまで明らかにすれば良い。
データ型や制約などの部分については考えない。
論理設計では正規化という作業を中心に行っていく。
正規化は矛盾したデータを格納できないよう、テーブルを複数に分割していく作業のこと。
正規化によってテーブルが適切に分割された状態を正規形といい、正規形は非正規形から第5正規形まであるが、システム開発の場合は、第3正規形までで問題ない

### 第1正規形
テーブルのすべての行のすべての列に１つずつ値が入っている状態。
繰り返し列やセルの結合が現れてはならない。

- 繰り返しの列の部分を別の表に切り出す
- 切り出したテーブルの仮の主キーを決定する
- 主キー列をコピーして復号主キーを構成する

### 第2正規形
複合主キーを持つテーブルの場合、非キー列は、複合主キー全体の関数従属すべき。
複合主キーの一部の列に対してのみ関数従属する列が含まれてはならない

- 複合主キーの一部に関数従属する列を切り出す
- 部分関数従属先だった列をコピーする。

### 第3正規形
テーブルの非キー列は主キー列に直接、関数従属するべきである。
主キーに関数従属する列にさらに関数従属する列は存在してはならない。
このような関係を推移関数従属という。

- 関節的に主キーを関数従属する列を切り出す
- 直接関数従属だった列をコピーする

3つの正規化で排除するもの
第1正規形への変形...繰り返し列
第2正規形への変形...複合主キーへの関数従属（部分関数従属）
第３正規形への変形...間接的な関数従属（推移関数従属）


## 物理設計
特定のDBMS（MySQL、PostgreSQLなど）を使う前提に立ち、論理設計で明らかになった各テーブルについて、その内容を詳しく具体化していく。
データベース設計の最終段階なので、型、インデックス、制約、デフォルト値など、テーブル作成に必要な要素を確定させる。
物理設計に基づいて、CRRATE TABLEなど、一連のDDL文を作成し、データベースを作成していくことになる。

### 物理設計に必要な手順
- 最終的なテーブル名、列名を決定する
- 列の型を決定する
- 制約、デフォルト値を決定する
- インデックスを決定する





データベースの設計についてまとめてみました。
エンジニアなら誰でも知っていることだと思いますが、改めて書籍で学習すると、知識が定着したような気がします。
pyatsで古い機器に接続しようとるすと接続エラーになる問題の解決

# 概要
pyatsで古い機器にsshログインして情報を取得しようとすると次のような接続エラーになる。

```
TypeError: device is not connected, output must be provided.
```

# 原因
試しにsshで接続しようとすると次のように暗号化方式エラーになることを確認。

```
Unable to negotiate with x.x.x.x port 22: no matching key exchange method found. Their offer: diffie-hellman-group-exchange-sha1,diffie-hellman-group14-sha1,diffie-hellman-group1-sha1
```

試しにgenieを詳細ログを出力してみると同じエラーメッセージが表示されている。

```
genie -vvv parse "show version" --testbed-file yaml/testbed.yml --devices[hostname]
```

結果（一部）：

```
Connection manager added new connection via None with alias cli
Unable to negotiate with x.x.x.x port 22: no matching key exchange method found. Their offer: diffie-hellman-group-exchange-sha1,diffie-hellman-group14-sha1,diffie-hellman-group1-sha1
```

# 対策
yamlファイルのprotocolに暗号化方式を指定する。これで実行すると正常に情報を取得することができた。

修正前：

```
      cli:
        ip: x.x.x.x
        protocol: ssh
```

修正後：

```
      cli:
        ip: x.x.x.x
        protocol: ssh -oKexAlgorithms=+diffie-hellman-group1-sha1 -c 3des-cbc
```

以上
nuxtで使われているvueのバージョン確認をする

vueもnuxtも勉強中の初心者です。
環境：nuxt/cli v2.15.5

## 結論
下記コマンドで確認

```
npm list vue
```
![vue_version.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20327/d571f921-6bd9-e32c-bee0-83e1c77f717a.png)

---
```vue --version
```
これだとvue/cliの確認になってしまう

package.jsonにはnuxtのバージョンしか書いてないし…？と迷っていました
Ubuntu on VMWare FusionでNICがDownのままブートする問題の解決

# 環境

- Mac上のVMWare FusionでUbuntu 20.04.2を使用
- 起動後、`ip a` を叩いてもlinkがDownのまま
- `ip link set DEV up` （DEVはNIC名）を叩くと上がってくる

# 原因

- 不明

# 対処

- systemd-networkdの設定を書く
- `/etc/systemd/network/`の下に適当にファイルを作る
    - 拡張子はnetworkにする
    - 10-ens1.network とか 10-wired.networkとか
- ファイルの中身は下記の通り

```
[Match]
Name=DEV

[Network]
DHCP=ipv4
```

- 書き方は下記のサイトが詳しい
    - https://wiki.archlinux.jp/index.php/Systemd-networkd
- `sudo systemctl start systemd-networkd` で起動して動作するか確認
- `sudo systemctl enable systemd-networkd` で有効化
- おわり

# その他

- レア事象な気がするけど他にも困ってる人いるのかな？
- 割と悩まされていた謎事象だったけど、脳が古いので`/etc/network/interfaces`をどうにかするんだと思い込んでいた
- interfacesが無いので放置してた（再起動しない限り問題ない）
- あと、systemd-networkdが有効化されていないことに気付かずに何回も再起動して試してた
- ちゃんとstatus確認するのが大事
- UbuntuのGUI画面側の設定は引き続きNICが認識されてないのでNetworkManagerをどうにかするのが正しい？
- NetworkManager調べるのめんどいからこれでいいか・・・
url_launcherをAndroidで動作しない問題（flutter）

#起きていた問題
以下をAndroidで試そうとしても"Could not launch url"となってしまう。

```dart
import 'package:url_launcher/url_launcher.dart';

 onTap: () {
  launchURL("https://www.google.com");
},
..............
  launchURL(String url) async {
    if (await canLaunch(url)) {
      await launch(url);
    } else {
      throw 'Could not launch $url';
    }
  }
```

#解決策
以下をandroid>app>src>AndroidManifest.xmlに追記。

https://github.com/flutter/flutter/issues/63727

<manifest>

    <!-- Nest within the manifest element, not the application element-->
    <queries>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="https" />
        </intent>
        <intent>
            <action android:name="android.intent.action.DIAL" />
            <data android:scheme="tel" />
        </intent>
        <intent>
            <action android:name="android.intent.action.SEND" />
            <data android:mimeType="*/*" />
        </intent>
    </queries>

    <application>
        ....
    </application>
</manifest>
[WordPress]固定ページを作成し、リンクを作る方法



自作テーマを作る際に少し手間取ったので自戒として書いておこうと思います。

## 1 page.phpを作成し、Template Nameを決める
まず固定ページを作るpage.phpをテキストエディタ上で作る。

そして作ったpage.phpに

```php:page.php
<?php
/*
Template Name: テンプレートの名前
*/
?>
```
と記述する。

## 2 管理画面に作った固定ページを表示させる
先ほどTemplate Nameを記述したことでWordPressの管理画面で固定ページを作る際にテンプレートの欄に作ったpage.phpが出てくるようになる。

流れとしては

固定ページを新規作成
↓
ページ属性のテンプレートから作ったページのテンプレート名を選ぶ

である


## 作ったページのリンクを作る

この表現が合っているのかはわからないが、get_permalink（）を用いて固定ページへ遷移するリンクを作る。

```php:page.php

<a href="<?php echo get_permalink('id') ?>"></a>

```

idの部分には固定ページを管理画面で見た時にURLに書いてあるPOST＝noatoniaru数字を入れる。

自分はURLスラッグと勘違いしていたので自分は長く詰まりました。
レスポンシブデザインのhtml記述方法

# レスポンシブデザインのhtml記述方法
- １．headにviewportを記述する
- ２．cssでメディアクエリを設定する

##１．headにviewportを記述する
###用語
viewport：Webページを表示するデバイス（PCやスマートフォンなど）を検知し、そのデバイスの画面サイズなどを取得する。htmlのhead内にmetaタグで記述する。

###ポイント
viewportを記述しないとメディアクエリが機能しないので必ずセットで記述する！

例）

```html
<!doctype html>
<html>
<head>
<meta charset="utf-8">

<!--ここから-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--ここまで-->

</head>
<body>
</body>
</html>
```

##２．cssでメディアクエリを設定する

###用語
メディアクエリ：画面のサイズに合わせてCSSの適用を分岐できる機能
@media (min-width:サイズpx) {　cssの定義　}で記載する

###ポイント

ブレイクポイント	デバイス
480px以下	スマートフォン(縦）
600px以下	スマートフォン(横)
960px以下	タブレット　　　　　　
1280px以下	パソコン(画面小)
1280pxより大きい	パソコン(画面大)

例）

```html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--ここから-->
 <style>
            .media {
                background-color: #333;
            }

            @media (min-width:480px) {
                .media {
                    background-color: blue;
                }
            }

            @media (min-width:640px) {
                .media {
                    background-color: red;
                }
            }
  </style>
<!--ここまで-->

</head>
<body>
</body>
</html>
```
Salesforceの添付ファイルをZIP格式でダウンロード

日本に住んでいるSalesforceエンジニア中国方です。チョッパーと呼べます。 SFDCに関しての知識を日本語+中国語で二方を記載されている学習日誌です。 皆さん自由にご覧いただき、自分が幸せになれます^^
wx是zl366455198，有疑问的朋友可以添加，一起讨论学习，添加时请备注Qiita粉丝。

事前準備：
①取引先(Account) 1 レコードを作成
②レコード下に添付ファイル関連リストの中にapex PDF.pdf と apex Word.docxをアップロード
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1479808/2f658579-e945-bef2-320f-b6ee4d157423.png)

ソースコード
ApexZipSample.page
https://gist.githubusercontent.com/xgeek-net/aeb2f57335f340e3f664bc782dac299d/raw/67c1ea4ed8aeea7127873f171f2a0f034e959397/ApexZipSample.html

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1479808/92e04790-ebea-a1a5-f9f4-f24986d80b25.png)

ApexZipSampleController.cls
https://gist.githubusercontent.com/xgeek-net/3575a3c1d9eb254e7eb5bc9dc1e3055e/raw/c9d9aef031e770467e78f53eada561eb4cd91426/ApexZipSampleController.java

ボタンをクリックする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1479808/a00166ba-4622-b675-1ed8-ed35b930f4bf.png)

中国語：
先创建一个对象record，在record下面存两个普通格式的文件，然后在vf画面做个button，通过actoin调用controller，实现Zip格式的下载。
账票下载时，客户会要求统一一次性下载（做日本项目都懂的，客户都是要求动作友好和使用体验）。
谢谢大家，请麻烦动动小手给我点个赞，爱你哟
学習URL:https://www.xgeek.net/ja/salesforce/zip-attachments-only-with-apex-in-salesforce/