OmniAICreator/Qiita-1.07M huggingface dataset:
systemdでデーモン化を簡単に行う

linuxにおいて、systemdを用いたデーモン化を試してみる。

## デーモンって何？

demon(悪魔)じゃなくてdaemon(神霊)らしい。

> daemon（守護神）とはギリシャ神話に登場し、神々が煩わされたくないと考えた雑事を処理した存在である。同様にコンピュータのデーモンもユーザーが煩わされたくないタスクをバックグラウンドで実行する[3]。

https://ja.wikipedia.org/wiki/%E3%83%87%E3%83%BC%E3%83%A2%E3%83%B3_(%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2)



Linux系においてバックグラウンドで常駐で働くプログラムのこと。
特にLinuxの起動処理やシステム管理を行う仕組みが```systemd```。これを```systemctl```コマンドで管理する。

## テスト用のプログラム

毎秒hello worldするだけ。これを動かしてみよう。

```js: testApp.js
setInterval(() => { console.log("hello, world!"); }, 1000);
```


これを```home/[ユーザー名]/test/testApp.js```と配置しておく。

nodeサーバーを動かしたいのが実用上での目的なので、これをnodeで実行していく。

### Unit 定義ファイルを書く
ユニット定義ファイル、```test.service```を以下のように書き、```etc/systemd/system/```下に配置する。


```: test.service
[Unit]
Description=(任意の説明文)
After=syslog.target network.target

[Service]
Type=simple
ExecStart=/usr/bin/node /home/[ユーザー名]/test/testApp.js
WorkingDirectory=/home/[ユーザー名]/test
KillMode=process
Restart=always


[Install]
WantedBy=multi-user.target
```



この時```ExecStart```には
```
ExecStart=nodejs本体のパス(/usr/bin/node) 動かしたいnode.js用のファイル
```
```WorkingDirectory```には
```
WorkingDirectory=作業用ディレクトリ
```
を入れておく。

## 動かしてみよう

enableで自動起動有効化
```
sudo systemctl enable test.service
```
startでサービス起動。
```
sudo systemctl start test.service
```



このままではコンソール出力がされていないので、statusで状態を確認してみる。

```
systemctl status test.service
```
以下のような出力が得られた。毎秒hello worldしていることが確認できる。
```
May 26 23:12:01 instance-1 node[28439]: hello, world!
May 26 23:12:02 instance-1 node[28439]: hello, world!
May 26 23:12:03 instance-1 node[28439]: hello, world!
May 26 23:12:04 instance-1 node[28439]: hello, world!
May 26 23:12:05 instance-1 node[28439]: hello, world!
May 26 23:12:06 instance-1 node[28439]: hello, world!
May 26 23:12:07 instance-1 node[28439]: hello, world!
May 26 23:12:08 instance-1 node[28439]: hello, world!
May 26 23:12:09 instance-1 node[28439]: hello, world!
```

stopでサービス停止、disableで自動起動無効化ができる。
```
sudo systemctl stop test.service
sudo systemctl disable test.service
```

これで簡単なプログラムのデーモン化ができた。
git@github.com: Permission denied (publickey)の解消

-  自分のPCからvscodeで編集したコードをgithub にpushをしようとしたら、このエラーが発生しました。

```
git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
```

### やりたかったこと
- 自分のPCとGithubを接続できる状態にする。
下記のコマンドを叩いたとき
`ssh -T git@github.com`

接続できていない状態は
```
git@github.com: Permission denied (publickey).
``
のように表示されます。

### なにができていなかったのか。
- 仮説
  - a. githubにアクセスするためのSSHキーを作成していなかった
  - b. githubにアクセスするためのSSHキーの保存に問題があった
  - c. githubにアクセスするための参照しているファイルが違った

# a. githubにアクセスするためのSSHキーを作成していなかった

## 確認 : SSHキーが生成されているか

 https://docs.github.com/ja/authentication/connecting-to-github-with-ssh/checking-for-existing-ssh-keys

## 解決策

手順1. SSHキーの作成

https://docs.github.com/ja/authentication/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent

このサイトどおりにSSHキーを作成したことがなければ作成する

手順2. 自身のGithubアカウントに作成したSSHキーを追加

https://docs.github.com/ja/authentication/connecting-to-github-with-ssh/adding-a-new-ssh-key-to-your-github-account

# b. githubにアクセスするためのSSHキーの保存に問題があった

## 解決策
新しいSSHを作成(上書き)してやり直す
- [aの解決策](https://qiita.com/drafts/64d40c72e6b13e13f863/edit#a-github%E3%81%AB%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AEssh%E3%82%AD%E3%83%BC%E3%82%92%E4%BD%9C%E6%88%90%E3%81%97%E3%81%A6%E3%81%84%E3%81%AA%E3%81%8B%E3%81%A3%E3%81%9F)

# c. githubにアクセスするための参照しているファイルが違った

### 確認 : 使いたいSSHキーを使っているか
ターミナルで叩いてみる
参考記事 : [Permission denied (publickey) の 対処方法はだいたいこれ](https://ormcat.net/blog/20210509_github-denied-publickey/)
`ssh -vT -i ~/.ssh/bitbucket/id_rsa git@github.com`

- ssh コマンドで v オプションを付けてデバッグログを出力

```
debug1: identity file /Users/hoge/.ssh/id_rsa type 0
debug1: identity file /Users/hoge/.ssh/id_rsa-cert type -1
```

`.ss/id_rsa`や`.ssh/id_rsa-cert`の部分が前に自分でGithubにアクセスするために作成してGithubに登録したファイルかどうか(正確にはファイルの中身を登録している)を確認してください。
ファイル名はあくまで一例です

### 解決策1

参照するファイルが違ったのなら、

コマンドを叩く(.sshを表示させて参照するファイルを確認)
```
ls ~/.ssh
```

コマンドを叩く(参照するファイルをコピー)
```
pbcopy < ~/.ssh/id_rsa.pub ←参照するファイル名
```
pbcopyはMacの人が利用可能

コピーしたらSSHキーを追加する

[自身のGithubアカウントに作成したSSHキーを追加](https://docs.github.com/ja/authentication/connecting-to-github-with-ssh/adding-a-new-ssh-key-to-your-github-account)

### 解決策2

新しいSSHを作成(上書き)してやり直す
- [aの解決策](https://qiita.com/drafts/64d40c72e6b13e13f863/edit#a-github%E3%81%AB%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AEssh%E3%82%AD%E3%83%BC%E3%82%92%E4%BD%9C%E6%88%90%E3%81%97%E3%81%A6%E3%81%84%E3%81%AA%E3%81%8B%E3%81%A3%E3%81%9F)
設定変更なしダブルクリックのみでデスクトップエントリを活用しLinuxのシェルスクリプトを実行する

# テンプレ
デスクトップエントリのテンプレは以下です。
```bash
#!/usr/bin/env xdg-open
[Desktop Entry]
Name=name
Name[ja]=名前
Comment=comment
Comment[ja]=コメント
# 何故かTryExecだと失敗する
# TryExec=bash -c '#ここにスクリプト本体を入れる;'
Exec=bash -c '#ここにスクリプト本体を入れる;'
StartupNotify=true
Terminal=false
Type=Application
Icon=アイコン。絶対ディレクトリにしたほうが無難
Categories=GTK;Utility;ここにスクリプトのカテゴリ;
Keywords=カテゴリとか;
# MimeType=
```

シェルスクリプトで簡単にGUIを使えるライブラリzenityと通知を簡単に作成できるnotify-sendを使ったサンプル
```bash
apt install -y zenity libnotify-bin
```
notify-sendはまず入っていることが多い

```bash
#!/usr/bin/env xdg-open
[Desktop Entry]
Name=Easy generate notify
Name[ja]=簡易通知作成
Comment=Easy generate notify
Comment[ja]=簡易通知作成
# TryExec=bash -c 'notify_message=$(zenity --text-info --editable --title メッセージ) && notify-send $notify_message'
Exec=bash -c 'notify_message=$(zenity --text-info --editable --title メッセージ) && notify-send $notify_message'
StartupNotify=true
Terminal=false
Type=Application
Icon=絶対ディレクトリにしたほうが無難
Categories=GTK;Utility;generate notify;
Keywords=generate notify;
# MimeType=
```

## 動機
よく頻繁に実行するワンライナーなどはシェルスクリプトにまとめたりします。
またLinuxデスクトップを使っているとキー入力1文字すら入力が面倒でダブルクリックでWindowsバッチのようにスクリプトを実行したいことが度々起こります。
よくある.shファイルをダブルクリックで実行する方法の解説はLinux側の設定をいじらなければならず面倒です。また環境依存も少なくないように見えます。
しかもメンテすら不要なワンライナーのような短いコードでわざわざ設定を変えるのは面倒です。
それにスクリプトのコード部分とデスクトップエントリを分割するのはファイルがあっちこっちに移動して面倒です。
そこで１つのファイルで完結して設定を変えることなくWindowsのバッチファイルのようにダブルクリックでシェルスクリプトを実行する方法を調べました。
意外とこれが記事になってるようで見つけられなかった。

## 中身の解説
Execでコマンドを呼び出すのですがパイプなどが直接だと機能しないようなのでbash -cで子に入れて呼び出すことで機能するようにしました。
あとはワンライナーの要領でコードを書いていくだけです。
メンテナンス性は良くないので注意してください。

###参考文献
https://mattintosh.hatenablog.com/entry/20141006/1412550000
https://stackoverflow.com/questions/22477569/desktop-shortcut-doesnt-work-if-use-pipe-in-command
APIの対義語はRPAなんじゃないかと思った件

# 前置き
最近Podcast聞くのが好きでして。飲みながらうだうだ聞いています。

で最近聞いたのが下のやつ。UiPath(NYSE:PATH)の社長のインタビューです。

[UiPath CEO Daniel Dines thinks automation can fight the great resignation](https://podcasts.google.com/feed/aHR0cHM6Ly9mZWVkcy5tZWdhcGhvbmUuZm0vcmVjb2RlZGVjb2Rl/episode/YzMxOTk0ZjYtNTg0Mi0xMWVjLWJlNmYtZWJhYWQ0N2FmMGQw?sa=X&ved=0CAcQkfYCahgKEwigxpHgs_z3AhUAAAAAHQAAAAAQ_AM)

これを聞いて感じたポエムを書きます。

# WebAPIについて思うこと

私は弁護士ドットコム主催の[RESTful WEB APIs読書会](https://bengo4.connpass.com/event/223246/)にお邪魔していました。そこで学んだことはものすごく大まかに書くと以下です。詳細は[RESTful Web APIs](https://www.amazon.com/RESTful-Web-APIs-Services-Changing/dp/1449358063)を読んでください。(とても良い本です。)

1. 世の中にはたくさんAPIがあるがそれぞれが独自の仕様で作られているので使いにくい
   - APIごとにヒトがドキュメントを読んでコードを書くのは大変
   - ドキュメントの維持も必要
2. APIには標準化が必要
3. 標準化するには独自形式を作らず、RFCに定義されてるハイパーメディアタイプを使うと良い
   - だれかが頑張って作ったのでそこまでの苦労が不要。
   - ドキュメントもあるので「ココ読んで」ですむ

と、いう感じです。

使いにくいAPIを良くしていこう、それにはこうすれば良いんだよ、ということが書いてあります。APIを作る側としては改善のモチベーションになります。

# ひるがえって現状

仕事でデータ連携をやります。社内のデータをどこかに送りたい。社外からデータを受け取って保存したい。
しばらくこの仕事をして思ったのですが外部のシステムは・・・

- なんらかのWebAPIがあってそれでデータの受け渡しができる
- データの送信はFTPに送る

だとまあなんとかなります。APIがあれば合格、FTPでも及第点です。スクリプト書けばなんとかなるからです。
どうしようもないのが以下。

- ブラウザのWebフォーム
- 先方が作った「データ投稿用ソフト」をWindows環境で実行してそれ経由で送信

ふざけんなよ・・・と思うんですがこの手の形式多いんですよね。ヒトが手でやることを前提にしてるもの。

Webフォームだとなんとかならないこともないですが、「データ投稿用ソフト」だとRPA使う以外ない。

# んでRPA

[UiPath](https://en.wikipedia.org/wiki/UiPath)はRPAを制作しています。最近NYSEに上場したようですが、時価総額が[結構上がった](https://forbesjapan.com/articles/detail/41173)ようで話題になりました。

Podcastで社長いわく(酔ってたのでだいたいこんな感じでした)

- APIがあれば、というがだいたいそんなものはない
- 既存のシステムにAPIを入れるよりRPAを入れたほうが早い
- 業務システムを統合するシステム、はすでに存在するがすべてを統合できるものはない
- BPO業者など投資効率の高い業務改善に熱心なところはたくさんある
- RPAは投資効率が高い業務改善ソリューション
- ちなみに弊社の日本市場は弊社で一番伸びてる地域

と。

きちんとAPIを作れば、といいますがその手法をすべての開発者が理解できるとは思いません。開発者の技術レベルも上から下までいます。相手の開発者に「このハイパーメディアタイプを使って・・・」と説明して、理解してくれないとどうしようもないです。

RPAだとここらへんはない・・・・と・・・


# それでもまだ

RPAはUIが変わると簡単にぶっ壊れるんですけどね。
で、PodCast内では議論が発展していきます

- RPAはWebやソフトウェアのUIが変わると壊れる
- UIは結構頻繁に、大幅に変わる(新しいWindowsが出たときなど)
- UIはできるだけ固定してほしい
- というかRPA専用のUIを作っても良いんじゃ・・・

という

# そうか、RPAでの連携が未来なんだな

システムを作るときはRPAがデータをとりやすいようにしないと。
RPA専用のUIがいる。
モダンなJSを使ったSPAより、HTMLだけでいいですね。CSSも邪魔?
HTMLじゃないとロボットを作る人がよめないのでxmlはだめ。

違うシステム同士でもロボットを使い回せるほうがいいですね。
よし、みんなで話し合って規格を作ろう。
規格はどこに出そうか。。。。？

あ、IETFがありましたね。

ここに出して認められたらみんなが使えるようになる。

ここを読んで、ですむから楽ですね。えーと規格の名前は・・・

お後がよろしいようで。。。


# どうでもいいですが

Podcast良いですね。家事やりながら、晩酌やりながら、買い物しながらでも聞けますし。
BuildozerをDocker Desktop(Windows)で動かそうとする試みに失敗したメモ

Buildozerは公式ではWindows非対応なんですが、Dockerならなんとかならいかと思ってやってみてあっさり諦めたのでメモがてら供養でも

とりあえず公式のGithubにあったdockerfileを参考に作ってみた

```dockerfile

FROM ubuntu:20.04

ENV USER="user"
ENV HOME_DIR="/home/${USER}"
ENV WORK_DIR="${HOME_DIR}/work" \
    SRC_DIR="${HOME_DIR}/src" \
    PATH="${HOME_DIR}/.local/bin:${PATH}"

RUN apt update -qq > /dev/null \
    && DEBIAN_FRONTEND=noninteractive apt install -qq --yes --no-install-recommends \
    locales && \
    locale-gen ja_JP.UTF-8  
ENV LANG ja_JP.UTF-8  
ENV LANGUAGE ja_JP:en  
ENV LC_ALL ja_JP.UTF-8  

RUN apt update -qq > /dev/null \
    && DEBIAN_FRONTEND=noninteractive apt install -qq --yes --no-install-recommends \
    autoconf \
    automake \
    build-essential \
    ccache \
    cmake \
    gettext \
    git \
    libffi-dev \
    libltdl-dev \
    libssl-dev \
    libtool \
    openjdk-13-jdk \
    patch \
    pkg-config \
    python3-pip \
    python3-setuptools \
    sudo \
    unzip \
    zip \
    zlib1g-dev

RUN useradd --create-home --shell /bin/bash ${USER}
RUN usermod -append --groups sudo ${USER}
RUN echo "%sudo ALL=(ALL) NOPASSWD: ALL" >> /etc/sudoers

USER ${USER}
WORKDIR ${WORK_DIR}

RUN git clone https://github.com/kivy/buildozer ${SRC_DIR}

RUN pip install --user --upgrade pip Cython==0.29.19 wheel virtualenv ${SRC_DIR} 

ENTRYPOINT ["buildozer"]
```

公式では予めgit cloneしておいたファイル郡をdockerfileと同じフォルダに入れておいて、そのファイルを${SRC_DIR}にコピーするような感じで作られていたが、
面倒なのでdocker環境でgit cloneするように書き換えた。

```
docker build . -t buildozer
```

これをbuildするとaptやpipによるライブラリのインストールにものすごい時間がかかった。

なんとかbuildを終えてbuildozerを使えるようになったので

```main.py
from kivy.app import App
from kivy.uix.label import Label
	  
class HelloApp(App):
    def build(self):
        return Label(text='Hello World')

if __name__ == '__main__':
    HelloApp().run()
```

どこかから拾ってきた適当なサンプルを用意して早速実行開始。

```
docker run -it --rm -v %CD%:/home/user/work -v %CD%\..\buildozer_tool:/home/user/.buildozer buildozer init
```

```
docker run -it --rm -v %CD%:/home/user/work -v %CD%\..\buildozer_tool:/home/user/.buildozer buildozer android debug
```

必要ライブラリのダウンロード・展開からビルドまで全部勝手にやってくれますが、
とにかく凄まじいほど時間がかかります。
ダウンロード・展開にも時間がかかるので、ライブラリのダウンロード先もWindows側のフォルダにバインドしないと、
ビルドするたびにダウンロード・展開をやらかしそうだったのでコマンドラインが長い感じに・・・シンプルにしたかったのに。

しかしそのままWindowsフォルダにバインドしていると展開中に上書き確認されてしまいます。
どうやらandroid-ndk-r19cの```sysroot\usr\include\linux\netfilter```に大文字と小文字が違うだけの同名ファイルがあるらしく、
Windowsでは同じファイル扱いなのでこのようなことになっているようです。

NTFS自体は大文字小文字の区別には対応しているのですが、Windowsではデフォルトで無効になっているだけなので、

```
fsutil.exe file setCaseSensitiveInfo %CD% enable
fsutil.exe file setCaseSensitiveInfo %CD%..\buildozer_tool enable
```

こんな感じで有効化しておきます。


というわけでビルドまでこぎつけましたが、これがまた凄まじい時間がかかります。
正確には測ってませんが3～4時間くらい？

で、待ちに待った結果なんとかapkは作ってくれたのでBlueStacks上でインストールして起動してみたら

ロゴまでは表示されましたが、そこからすぐに終了してしまってうまくいきませんでした。

ここで心が折れました。
AAVE V3 でフラッシュローン

# 概要
フラッシュローンとは、借金と返済を瞬時に行うDeFiプロトコルです。借金と返済を1トランザクション内で行い、返済ができない場合はトランザクションがrevert(失敗)するため、貸し倒れリスクがありません。そのため無担保・無制限・低利息(AAVEの場合は0.09%)で利用することができます。

フラッシュローンは下図のプロセスで行われます。

1. `Pool.sol`の`flashLoanSimple`メソッドを呼び出す。 
2. `flashLoanSimple`は`executeOperation`メソッドをコールバックしながら要求されたERC20トークンを送金する。
3. `executeOperation`メソッド内で別のDeFiコントラクトを呼び出し、借りたトークンを使い利益を上げる。
4. 借りた額と利息を返済する(自動)。
![Untitled Diagram.drawio (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271560/14fa7d15-6510-e91c-1558-bfd50ad45da3.png)

借金の返済はAAVEのコントラクトがERC20の`transferFrom`メソッドを使い自動的に行います。したがって、コールバック関数の終わりまでに借入額+利息の分を`approve`してやる必要があります。

# 実装
以下の通りに実装しました。デプロイ時にPool.solのアドレスを[ここ](https://docs.aave.com/developers/deployed-contracts/v3-mainnet)から調べ指定します。
```solidity
// SPDX-License-Identifier: GPL-3.0

pragma solidity >=0.6.0 <0.9.0;

import "https://github.com/aave/aave-v3-core/blob/master/contracts/interfaces/IPool.sol";
import "@openzeppelin/contracts/access/Ownable.sol";
import "@openzeppelin/contracts/token/ERC20/IERC20.sol";

contract Flashloan is Ownable{
    IPool Pool;
    address PoolAddress;
    constructor(address _PoolAddress) {
        PoolAddress = _PoolAddress;
        Pool = IPool(_PoolAddress);
    }
    function executeOperation(
        address _asset,
        uint256 _amount,
        uint256 _premium,
        address _initiator,
        bytes calldata _params
  ) external returns (bool)
    {

        //
        // Your logic goes here.
        // 

        IERC20(_asset).approve(address(PoolAddress), _amount+_premium);
        return true;
    }

    function flashloan(address _asset, uint _amount) public onlyOwner {
        bytes memory data = "";
        Pool.flashLoanSimple(address(this), _asset, _amount, data, 0);
    }

    function withdraw(address _asset) public onlyOwner{
        IERC20 token = IERC20(_asset);
        uint balance = token.balanceOf(address(this));
        assert(token.transfer(msg.sender, balance));
    }
}
```

利息を払う必要があるので、あらかじめこのコントラクトにいくらかERC20トークンを`transfer`しておきます。借りたいassetのコントラクトアドレスと、借りたい額を引数に`flashloan`メソッドを実行します。実行後にトークンが余ったら`withdraw`メソッドで回収してください。

# 参考文献
https://docs.aave.com/developers/guides/flash-loans
【MySQL】カラム名に予約語が使われている時

以下のようなクエリを書いたらエラーとなりました。

```
SELECT limit
FROM table_1;
```


`limit`は予約語なので、カラム名として使用したい場合は引用符「`」(バッククォート)で囲む必要がある。

```
SELECT `limit`
FROM table_1;
```

参
https://dev.mysql.com/doc/refman/5.6/ja/reserved-words.html
http://remotehost.blog54.fc2.com/blog-entry-9.html
2022年5月現在 Figmaで実施しない方が良いハック

## この記事の概要

[Figma](https://www.figma.com/)は最近注目を集めているデザインツールです。

アップデートが早いのも特徴の1つなのですが、結果的に「以前は有用だったハックが今ではアンチパターン」になり得ます。

2022年5月11日に実施されたアップデートを踏まえ、それ以前に紹介されていたテクニックのうち、今はもう実施しない方が良いものをまとめました。

将来、ここで紹介したようなハックが検索でヒットして「なんだこれ？不要では？」と感じる人も出てくるでしょうから、経緯を知れるための記事になれば良いなと思っています。

## 一辺だけのborderを再現するのにDrop shadowを使う

これまでFigmaでborderを指定する場合、四辺すべてに一律で適用されていました。
そのため、一辺だけにborderを指定したい場合は`Blur`や`Spread`を0にしたDrop shadowをかけて再現しているケースがありました。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/6ec9c776-e994-84ff-e296-767141753d99.png)

アップデートにより、一辺だけのborderが正式にサポートされたのでもうこのテクニックを使う必要は無いでしょう。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/c60c2551-2898-4994-8211-c97db2ba530b.png)

## 幅や高さが0pxのFrameを作って絶対位置で配置する

いかにもハックっぽいやり方なので、詳細は説明しません。
もし気になる方がいれば、かつて紹介のために書いた以下の記事をどうぞ。

https://qiita.com/xrxoxcxox/items/cd27f7384793d2896f47#width%E3%82%84height%E3%81%AB0001%E3%81%A8%E5%85%A5%E5%8A%9B%E3%81%99%E3%82%8B%E3%81%A8%E5%B9%85%E3%82%84%E9%AB%98%E3%81%95%E3%81%8C0%E3%81%AB%E3%81%AA%E3%82%8B

そこまで詳しくない人からしたら不可解な挙動でしょうし、実はデータとしては0pxでないため多用すると問題がおきます。

https://qiita.com/xrxoxcxox/items/f6a18bfc292848c5b78a

アップデートにより、絶対位置指定がサポートされたのでこちらを使いましょう。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/b6a1ea03-c777-7cc9-8a61-ea72bb3db7c8.png)

## Auto layout内でネガティブマージンを再現するために小さいFrameで囲う

かつてAuto layoutの`Spacing between items`にはマイナスの値を指定できませんでした。
そのため使っていたテクニックです。
とは言え、そんなにたくさん見かけたことはありませんが笑

画像では、直径100pxの円を76pxのFrameで囲んで、その上でAuto layoutをかけています。
Frameを基準に並べられるのと、Frameからはみ出していても描画できるFigmaの特徴をあわせたテクニックでした。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/c42133d4-ad1f-f98d-f818-cbf86162529a.png)

しかし、公式にマイナスの値がサポートされたのでもう使う必要はありません。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/a92ed516-f881-2228-5431-c95acfbdcdd4.png)

## 最後に

Figmaのアップデートはいつも良い内容なので大歓迎ですが、追従できていないと`今となっては謎の作り方をしているデータ`がたくさん生まれかねません。

そもそもデザインデータをどこまで綺麗にするのか？という問題はありますが、それなりにmigrateしておいた方が後々楽な気がします。

---

最後まで読んでくださってありがとうございます！
Twitterでも情報を発信しているので、良かったらフォローお願いします！

https://twitter.com/xrxoxcxox
TypeScript勉強

# TypeScriptを勉強する

### まず最初に...

この記事は手助けというより、個人的な記録の為に記事を書いています。
ご了承ください。。


## TypeScriptとは

**TypeScript**とは、Microsftによって開発されているプログラミング言語。

ブラウザに動きをつけたり、現在ではサーバーサイドなどでも使われるJavaScriptと同様の用途が可能。

似ている事が多いが、異なる点が**静的型システム(static typesystem)**
TypeScriptにはコンパイラ(tsc)があり、それによってプログラムに対する型チェックを行える。型関連の誤りはコンパイルエラーとして検出される。

## 型とは？
Railsのデータベースにmigratinファイルを作成の際の、カラム名に持たせるデータ型と同義なんだと思います。
nameカラムはstring...みたいな。ただ、結構違うっぽいのでその時のデータ型名は一旦忘れます笑

## 静的型付けのメリット

#### ■ 型安全性
関数や変数に対して型宣言をし、宣言した通りにプログラムを記述するのがTypeScriptの基本。宣言通りでない場合は型エラーが出るのでより堅牢なプログラムが書ける。
コンパイルエラーはTypeScript開発で頼もしい味方...初学者の自分にとっては、エラーはまだ怖いです笑
でも、エラーは病気を事前に教えてくれているみたいに考えたらめちゃくちゃありがたいですね。そう思えるようにこれからも勉強します。。

#### ■ ドキュメント化と入力補完
適切な関数名やコメントと組み合わせることによって、プログラムの読解の際に関数の中身まで読む必要がなくなる。型による補完のデータは絶大で、プログラムのデータの流れが可視化できる。
また、入力の際にも、補完をしてくれるので途中まで打てば予測変換で限定的なものに変換ができる。良いですね。

## TypeScriptコンパイラの役割
#### ■ 型チェック
型チェックとはプログラム上の矛盾を自動的に検出して、コーダーに教えてくれる。その判断材料として用いられるのが、**型情報**。その情報をファイル上に記述することで実際にプログラムを実行しなくても目視的にチェックが行える。

#### ■ コンパイル
TypeScriptからJavaScriptへ２工程かけて変換する。
1. 型を取り除く
1. 新しい構文を古い構文に変換(古いバージョンの、ブラウザやNode.jsに合わせて変換)

## TypeScriptの開発環境

**■ Node.jsのインストール**
https://nodejs.org/ja/ ~pkgファイルを実行する
```bash
$ node -v
```
テキストエディタはVS Codeを使う。

**■ TypeScriptインストール**
- ディレクトリを作成して移動(cd)
- まずpackege.jsonを生成
```bash
$ npm init --yes
```
- jsonに追記する。
```json
{
  "name": "tsp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module", ←追記
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
```
- TypeScriptインストール
```bash
$ npm install --save-dev typescript@4.6.2 @types/node@14.14.10
```
**最新版をインストールする場合は@4.6.2と@14.14.10を記述しなくて良い。**

**■ tscongig.jsonの準備**
TypeScriptコンパイラの設定を記述したファイル
- tsconfig.json生成
```bash
$ npx tsc --init
```
- 何箇所か書き換えます
- コメントアウト解除し記述
```json
{
  "compilerOptions": {
  :
  "target": "es2020", 
  :
  "module": "esnext", 
  :
  "moduleResolution": "node",
  :
  "outDir": "./dist",
  : 
  },
 "include": ["./src/**/*.ts"]
}
```
#### ■ 出力してみよう
それが終わったら、作成済みのディレクトリ内にsrcフォルダを作成し、index.tsファイルを作成する。

```index.ts
const message: string = "Hello World";
console.log(message);
```
```bash
$ npx tsc
```
これで、実際にtsファイルがjsファイルに変換された形でdistフォルダ内に生成される。

最後に
```bash
$ node dist/index.js 
```
これでターミナル上に
```bash
$ Hello World
```
と出力されれば成功です。

プログラミングの第一歩....

## まとめ
最後の方口数が少なくなりましたが、あとで追記すると思います。明日は基本的な文法をやろうと思います！
簡単？UnityもAndroid StudioのlogcatもインストールしないUnityアプリのデバック方法！

# Debug.Logのデータが欲しいんだ...

### 1. platform-toolsのダウンロード(Not install)

[ここ](https://developer.android.com/studio/releases/platform-tools?hl=ja)からダウンロードしてください

### 2. platform-toolsの展開

1. zipファイルを展開します。

2. 展開したzipファイルを潜っていくとadb.exeがあります。

3. adb.exe のあるフォルダーで ctrl+l でバーを選択した後、cmd　と入力しEnterを押すことで、adb.exeのあるフォルダーをコマンドプロンプトで開きます

### 3. Unityのアプリの起動！

1. usbデバックにした後で、スマホとPCをつなぎます。

2. 目的のAndroidアプリを起動します

### 4. adbでlogcat開始

1. コマンドプロンプトで 
```
C:\Users\?\platform-tools_r33.0.1-windows\platform-tools>adb devices
List of devices attached
固有ナンバー        device
```

でスマホがauthorizedになっていることを確認します

2. unauthorizedの場合はスマホの画面にデバックの許可が出るのでOKを押します。

3. コマンドプロンプトで

```
C:\Users\?\platform-tools_r33.0.1-windows\platform-tools>adb logcat -s Unity
--------- beginning of system
--------- beginning of main
05-27 02:29:48.020 15114 15114 D Unity   : CommandLine:
05-27 02:29:48.091 15114 15114 D Unity   : onActivityResumed: com.unity3d.player.UnityPlayerActivity@2d602b5
05-27 02:29:48.093 15114 15114 I Unity   : onResume
05-27 02:29:48.174 15114 15136 D Unity   : SetWindow 0 0x6f9f504010
05-27 02:29:48.175 15114 15136 D Unity   : SetWindow 0 0x6f9f504010
05-27 02:29:48.210 15114 15114 I Unity   : windowFocusChanged: true
05-27 02:29:48.239 15114 15136 I Unity   : MemoryManager: Using 'Dynamic Heap' Allocator.
05-27 02:29:48.278 15114 15136 D Unity   : Enabling Unity systrace
05-27 02:29:48.351 15114 15136 D Unity   : [VFS] Mount /data/app/com.DefaultCompany.ARSummonUnitychan-hPfiXZaTG8qSurYe87gkqg==/base.apk
05-27 02:29:48.353 15114 15136 D Unity   : Loading player data from /data/app/com.DefaultCompany.ARSummonUnitychan-hPfiXZaTG8qSurYe87gkqg==/base.apk/assets/bin/Data/data.unity3d
05-27 02:29:48.386 15114 15136 I Unity   : SystemInfo CPU = ARM64 FP ASIMD AES, Cores = 8, Memory = 3783mb
05-27 02:29:48.386 15114 15136 I Unity   : SystemInfo ARM big.LITTLE configuration: 4 big (mask: 0xf0), 4 little (mask: 
```
のようにunityのログが出力されているのを確認します。

以上！　UnityもAndroid Studioのlogcatもインストールしない方法でした！
直リンを阻止する .htaccess を設定してはならない理由

## 最初に 直リンをアクセス禁止にする .htaccess
```.htaccess
<Files ~ "\.(hogehoge)$">
SetEnvIf Referer "https?://example\.com/" allow_
order deny,allow
deny from all
allow from env=allow
</Files>
```

### この設定をしてはならない理由
昔はノートンインターネットセキュリティーが
リファラの送出を止めるオプションをはじめました。

メジャーな有料ソフトであるものの、そう多くの問題はありませんでした。

リファラの送出を止めると、正しいアクセスでも画像等が表示されなくなります。


しかし、今では多くのブラウザに隠しオプション的に設定できるようになっています。

http://utaukitune.ldblog.jp/archives/65696343.html

## 直リンさせない方法 - 利用規約

文書が書ければ誰でもできる方法です。
辻褄があえば、自由にあなたの主張を訴えることができます。
:::note info
著作権法上、リンクは禁止行為でありませんが、
利用規約に、直リンだめ！って書いておけば
された場合に民事訴訟であればもっていくこともできます
ただし、よほどのことをされないと弁護士さんが相手してくれませんので、そこはご注意
:::

## 直リンさせない方法 - HTML等を圧縮する
改行していないHTMLは少し読む気を失せさせますが、URLを抽出するのが不可能になるわけではありません。

## 直リンさせない方法 - 暗号化をしてJavaScriptでHTMLを表示させる

暗号化をしたからといって、いずれは復号されますが、
解析が大変な構造にしておけば、やる気を更に失せさせます。

## 直リンさせない方法 - スクリプトで右クリック等を禁止する

新しいタブを開くも阻止してしまいますが、主な目的は画像のURLのコピーの阻止、ブラウザソースの閲覧阻止になります。

詳しくはこちらで

https://qiita.com/nanakochi123456/items/0b0ae90fa62f971cb49e

## view-source: もブロックする

より強力なブラウザソースの閲覧阻止になります。

詳しくはこちらで

https://qiita.com/nanakochi123456/items/0b0ae90fa62f971cb49e

:::note info
HTML等コンテンツのみキャッシュの恩恵を受けられません
上記記事はそのまま使わず、数秒間使用するcookieを利用すると良いみたいです。
:::

:::note info
一応Windows 11でもInternet Explorerが動作しますが、
Internet Explorerのソース表示まではブロックできません
:::

## 完全に動的に画像を出力する

HTML出力時に1分間～3分間だけ有効なcookieを発行し、
有効なcookieであればスクリプトが画像を出力する方法もあります。

この方法であれば100%直リンをブロックすることができます。

:::note info
ただし、サーバーは過剰に負荷がかかり、キャッシュの恩恵を受けないので注意
:::
情報可視化について勉強したことのまとめ

# はじめに
自分の研究で本格的に情報可視化について取り組んでみようということで、勉強したことのアウトプットの場としてこちらを利用させて頂きます。
そしてなにより卒業論文で技術的文章を書くのにとても苦労したので、トレーニングとしても書いてみようと思います。

## 情報可視化に関するイントロダクション
#### そもそも今回扱う情報可視化とは...？
可視化（見える化）という言葉は日常生活でも聞くことがあると思いますが、今回扱う情報可視化とは工学分野におけるものになります。
大量のデータ（__見えにくいもの__）をユーザに対してわかりやすく提示（__見やすく__）するための技術としての**可視化**を扱います。

#### 様々な情報可視化手法
一口に情報可視化といってもは様々な手法があげられます．
<dl>
  <dt>・チャート</dt>
  <dd>ex.)棒グラフやレーダーチャート</dd>
  <dt>・次元データ</dt>
  <dd>ex.)多次元データを次元削減手法を適用し散布図にプロット，ヒートマップ，グリフ</dd>
  <dt>・時系列データ</dt>
  <dd>ex.)ある中学生の3年間の成績推移を表した折れ線グラフ</dd>
  <dt>・階層型データ</dt>
  <dd>ex.)空間充填型手法</dd>
  <dt>・ネットワーク</dt>
  <dd>ex.)SNS上のつながりにおける友人間ネットワーク</dd>
  <dt>・その他</dt>
  <dd>ex.)地理的情報を用いた可視化，ワードクラウドなどのテキストデータを用いた可視化</dd>
</dl>



:::note info
各可視化手法は組み合わせることでさらに面白いことができるみたい（情報可視化からさらに一歩踏み込んだインタラクティブな情報探索支援など）なので，用途に応じて勉強を進めたい
:::

#### 可視化ツール
<dl>
  <dt>・Many Eyes</dt>
  <dt>・VisualIzation API</dt>
  <dt>・D3.j3</dt>
  <dt>・Pythonのライブラリ</dt>
</dl>

## 良い可視化のために考えるべきこと
自分の関心がネットワーク可視化であるため、その場合に特に重要となるポイントをあげていきます。

#### 視覚要素
空間定義：位置にどのような意味を持たせるか
固形要素：点、線、面、立体
視覚属性：大きさ、形状、回転角、色、模様


:::note warn
注意
色について・・・様々な要因に影響（さまざまな色彩保持者、文化、民族、時代、心理など）を受けるため、統一見解を確立することは難しい
:::

#### 可視化のための代表的なインタラクション
可視化ではデータを探索する際に、以下の4つの工程に分けることができる
  <dt>概観表示（データ全体を広く眺める）</dt>
  <dd>限られた画面空間を利用して、できるだけデータ全体を眺められるようにすことが望ましい。また次の操作にスムーズに進めるようなUIが求められる。</dd>
  <dt>解明（問題点や新しい現象を見つけ出す）</dt>
<dd>ユーザ自身が関心のある情報を探索する。</dd>
<dt>操作（データ要素の追加、削除、注釈）</dt>
<dd>ユーザが関心を持った情報に追加情報を提示する、または関心のない情報は適宜削除するなどがあげられる。</dd>
<dt>報告（データの持つ意味を明快に説明）</dt>
<dd>ここでは、データ分析が専門でない人に対しての説明手段としての意味を持つ。</dd>

#### 評価方法について
  <dt>定量評価</dt>
  <dd>被験者を全く介さず、計算機のみで評価値を算出する。ネットワーク図の場合エッジの交差や長さをもって評価する。</dd>
  <dt>被験者実験</dt>
  <dd>被験者に実際に可視化結果をもって、情報探索をしてもらい、その速度や満足度によって評価する。</dd>
  <dt>評論</dt>
  <dd>専門家に利用してもらい、その有用性や実用方法を評論してもらう。</dd>

# おわりに
次回は実際にコードを書いてネットワーク図を作成したいと思います。

## 参考文献

この記事は以下の情報を参考にして執筆しました。

- [意思決定を助ける 情報可視化技術- ビッグデータ・機械学習・VR/ARへの応用 -](https://www.coronasha.co.jp/np/isbn/9784339028836/)
- [情報可視化 データ分析・活用のためのしくみと考えかた](https://www.morikita.co.jp/books/mid/085351)
卒業制作にてAIによる手書きひらがな文字認識ソフトを作った結果、、、（随時書き足し）

# 経緯と状況
初めまして。この5月にアメリカの4年制大学をComputer Science専攻で卒業した者です。
最後の春学期に卒業制作として何か作れと言われ、その直前の冬休みに独学で学んだDeep Learningに関連したものを作ろうとこのプロジェクトに挑みました。
学校の大きさはD2なのでそこまで大きくはないですが、その分クラスの規模が小さく、教授との距離がとても近く親身になってくれる学びやすい環境でした。が、全くもってAIについての知識はなく、勿論さらに細分化されたDeep Learningなんていうものは全く理解していませんでした。
そんなこんなで始めたこのプロジェクトですが、先駆者様達の残してくれた研究結果やブログ、コード等のおかげでなんとか形にすることができました。
この記事は、レゴブロックを組み合わせて一つのものを作るように、様々な記事を読みその情報を無理くり組み合わせて完成したものとその経緯をこの後に続く方々の役に立てばと思い、参考にさせていただいた記事のリンク先も併せて綴りたいと思います。

※おそらく長くなるため、毎日少しずつ書いていきます。（毎日書くとは言ってない）
※このような記事を書くのは初めてなので至らない点が多いかと思いますが、よければ温かくご指摘いただければと思います。
※自分のコードは効率が悪いことが多々あります。でも今動けばOKの精神で生きています（おい）

# 独学に使用した本
https://www.oreilly.co.jp/books/9784873117584/
こちらで基礎を軽くですが学びました。
冬休み期間中に1周し、春学期が始まりプロジェクトを始める前にもう一周しました。
なぜかというと全て忘れてしまったからです。

# 使用させていただいたデータセット
http://etlcdb.db.aist.go.jp/?lang=ja
こちらのサイトにてメールアドレス、氏名、学校名、目的等を入力し登録後、データセットをダウンロードするためのパスワードがもらえます。私はETL8Gをお借りし、平仮名だけを抽出したのちに後でもすぐに使えるようにnpzファイルにて保存しました。コードは
https://qiita.com/yukoba/items/7a687e44395783eb32b1
に掲載されているソースコード内の、read_hiragana_file.pyを参考にさせて頂きました。しかし、こちらにあるコードのままでは"平"、"開"の文字も抽出されてしまい、”を”と”っ”が抜けてしまっています。その理由は27行目のif b'.HIRA' in r[2]:のコードでは訓読みが”ひら”の漢字が抽出されてしまっているためです。本来ならばb'A.HIRA  '(あ)やb'KA.HIRA '(か)などの平仮名としての文字コード"HIRA"として抽出しているはずなのに、訓読みとしての”HIRA"、つまりb'HEI.HIRA'(平)とb'KAI.HIRA'(開く)が混ざってしまっているのです。
正しく抽出するために、以下の簡単なコードを代わりに置きました。
```Python3:read_hiragana_file.py
#27行目から29行目までを置き換え
if b'.HIRA' in r[2] or b'O.WO.HIR' in r[2]:
　　if not b'KAI.HIRA' in r[2]:
　　　　if not b'HEI.HIRA' in r[2]:
　　　　　　ary[moji, (j - 1) * 5 + id_dataset] = np.array(r[-1])
　　　　　　moji += 1
　　　　　　print(r[2])#確認用
　　　　　　print('added')#確認用
```
まず、”を”の取り方がわからなかったためその文字コード（？）を指定しました。そののちに、”平”と”開”はいらんぞというコードをifの継ぎ足しで書いています。自分のコードでは18行目のコードの第一引数を
```Python3:read_hiragana_file.py
ary = np.zeros([71, 161, 127, 128], dtype=np.uint8)
```
のように71にしていますが、別に71未満でなければ平仮名以外を取らないことを確認しました。ETL8Gには小文字もあったので”っ”や”ゃ”などが次点で抽出されると思っていましたが大丈夫そうです。

該当箇所以外のコードは全く一緒です。
上記の記事には（勝手に）大変お世話になり、上記のDeep Learningの本を終了した方にオヌヌメです。上記の記事が書かれたのが2016年、記事を書かれた方が参考にしているものも少し古いため、今はもっと画期的なものがあるようです。しかし、この記事が自分にとって一番分かりやすく、なによりソースコードを載せて頂いていたため、”とりあえず動く”、”改善すべき点や道しるべがある”点からベースとして参考にさせて頂きました。

※ETLデータセットは非商業目的のみ無償で使用することが許可されているようです。

需要がないのは承知なので気が向いたらまた書き足します。目標は年内までに終わらせるです。
稚拙でしたがここまでお読みいただきありがとうございました。
【Git】.gitconfigについて

## `.gitconfig`の内容
```~/.gitconfig
[alias]
  st = status
  df = diff
  co = commit
  br = branch
  ps = push
  pl = pull
  ck = checkout
  graph = log --pretty=format:'%Cgreen[%cd] %Cblue%h %Cred<%cn> %Creset%s' --date=short  --decorate --graph --branches --tags --remotes
  diffw = diff --word-diff

[core]
  quotepath  = false
  ignorecase = false
  editor = code --wait --new-window

[diff]
  tool = vscode
[difftool "vscode"]
  cmd = code --wait --new-window --diff $LOCAL $REMOTE

[user]
  email = example@email.jp
  name = UserName

[init]
  defaultBranch = main

[merge]
  tool = vscode
[mergetool "vscode"]
  cmd = code --wait --new-window $MERGED

[pull]
  ff = only 

[push]
  default = current

```

## 各設定について
### `alias`
コマンドのエイリアスを設定します。
ターミナルからコマンドを実行して設定する場合には以下のようにします。
```:ターミナル
$ git config --global alias.st status
```

### `core`
#### `quotepath`
日本語のファイル名をエンコードするか否かを設定できます。
`false`に設定すると以下のように普通に日本語が表示されます。
```
$ git status
Changes not staged for commit:
    modified:   サンプル.md
```

#### `ignorecase`
ファイルの名の大文字と小文字を区別するか否かを設定できます。
デフォルトでは区別しません。
`false`にすることで区別するようになります。

#### `editor`
エディタを設定します。
以下のようにすることでコミットやマージなどの際に使用するエディタをVScodeにすることができます。
```~/.gitconfig
[core]
    editor = code --wait
[diff]
    tool = vscode
[difftool "vscode"]
    cmd = code --wait --diff $LOCAL $REMOTE
[merge]
    tool = vscode
[mergetool "vscode"]
    cmd = code --wait $MERGED
```

### `diff`
[editor](https://qiita.com/P-man_Brown/items/a1c52575ffdeb6339122#editor)参照

### `user`
`git log`などで表示されるユーザー名やメールアドレスを設定します。

### `init` `defaultBranch`
デフォルトのブランチ名を設定します。

### `merge`
[editor](https://qiita.com/P-man_Brown/items/a1c52575ffdeb6339122#editor)参照

### `pull` `ff`
`pull`した際に`merge commit`を作成するか設定します。
以下から選択可能です。
| 値      | 動作| 
|:--      |:--|
| デフォルト | `fast-forward`な場合は`merge`し、それ以外は`merge commit`を作成。`git pull --ff`と同じ。  |
| only    | `fast-forward`な場合は`merge`し、それ以外はエラー。git pull --ff-onlyと同じ。 |
| false   | 常に`merge commit`を作成。`git pull --no-ff`と同じ。 |

### `push` `default`
`push`時の動作を設定します。
<table>
  <thead>
    <tr>
      <th>値</th>
      <th>動作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>nothing</td>
      <td>常にどこにpushするか指定。</td>
    </tr>
    <tr>
      <td>matching</td>
      <td>ローカルとリモートで同じ名前のリポジトリにpush。</td>
    </tr>
    <tr>
      <td>upstream</td>
      <td>upstream branchが現在のブランチに設定されている場合push。</td>
    </tr>
    <tr>
      <td>simple</td>
      <td>upstream branchが現在のブランチに設定されており、ブランチ名が同じ場合pushする。デフォルト。</td>
    </tr>
    <tr>
      <td>current</td>
      <td>現在のブランチをリモートに同じ名前でpush。</td>
    </tr>
  </tbody>
</table>
Windows への Node.js（npm）のインストール

Windows10 のPCに[Node.js](https://nodejs.org/ja/about/) とパッケージ管理システム [npm](https://ja.wikipedia.org/wiki/Npm_(%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E7%AE%A1%E7%90%86%E3%83%84%E3%83%BC%E3%83%AB)) (Node Package Manager) をインストールして確認するまでの手順を備忘録としてまとめました。参考にして頂ければ幸いです。

- 前提条件（環境）
- インストーラーのダウンロード
- Node.jsのインストール
- インストール完了の確認

# 前提条件（環境）

今回インストールするハードウェアの Windows の仕様は次の通りです。

- Windows 10 Pro 21H2

# インストーラーのダウンロード

Node.jsの[公式日本語サイト](https://nodejs.org/ja/)にアクセスすると、OSに対応したインストーラが表示されるので、そのままダウンロードします。<br>
![image.png](https://raw.githubusercontent.com/gahoh/articles-qiita/main/install-nodejs-windows/images/download1.PNG) <br>
ここでは、[LTS（安定版: 長期の保守運用が約束されているバージョン）の 16.15.0]　をダウンロードします。<br>
![image.png](https://raw.githubusercontent.com/gahoh/articles-qiita/main/install-nodejs-windows/images/download2.PNG)
<!---
![image.png](https://raw.githubusercontent.com/gahoh/articles-qiita/main/install-nodejs-windows/images/download3.PNG)
--->

[ダウンロードページ](https://nodejs.org/ja/download/)では、その他のプラットフォームのインストーラーをダウンロードすることが可能です。

# Node.jsのインストール
インストーラーをダウンロードしたら、早速実行してをインストールしていきましょう。
なお、インストールの手順は他の Windowsアプリケーションと同じようにインストーラーが自動的に行ってくれるため、とても簡単です。また、基本的には特別なオプションを指定することなくインストールを行えば、OKです <br>
なお、Node.js をインストールすると、一緒にパッケージ管理ツールの npm が利用できるようになります。

インストーラをダブルクリックすると、次のような画面が表示されインストールの実行が開始されます。
![image.png](https://raw.githubusercontent.com/gahoh/articles-qiita/main/install-nodejs-windows/images/setup1.PNG)<br>
[Next] をクリックする。<br>

![image.png](https://raw.githubusercontent.com/gahoh/articles-qiita/main/install-nodejs-windows/images/setup2.PNG)<br>
[I accept the term in the Licence Agreement] にチェックを入れ、[Next] をクリックする。<br>

![image.png](https://raw.githubusercontent.com/gahoh/articles-qiita/main/install-nodejs-windows/images/setup3.PNG) <br>
[Next] をクリックする。<br>
![image.png](https://raw.githubusercontent.com/gahoh/articles-qiita/main/install-nodejs-windows/images/setup4.PNG) <br>
インストール先を選択し、[Next] をクリックする。<br>
![image.png](https://raw.githubusercontent.com/gahoh/articles-qiita/main/install-nodejs-windows/images/setup5.PNG) <br>
インストールしたいコンポーネントを選択し、[Next] をクリックする。<br>
![image.png](https://raw.githubusercontent.com/gahoh/articles-qiita/main/install-nodejs-windows/images/setup6.PNG) <br>
[Next] をクリックする。<br>
![image.png](https://raw.githubusercontent.com/gahoh/articles-qiita/main/install-nodejs-windows/images/setup7.PNG) <br>
[Install] をクリックし、インストールを開始する。<br>
![image.png](https://raw.githubusercontent.com/gahoh/articles-qiita/main/install-nodejs-windows/images/setup8.PNG)
![image.png](https://raw.githubusercontent.com/gahoh/articles-qiita/main/install-nodejs-windows/images/setup9.PNG) <br>
インストールは数十秒～1分程で終了します。<br>
![image.png](https://raw.githubusercontent.com/gahoh/articles-qiita/main/install-nodejs-windows/images/setup10.PNG) <br>
インストールが完了。最後に [Finish] をクリックすれば、インストール作業は終わりです。。<br>

以上でインストールは完了となります。

# インストール完了の確認

引き続き、ちゃんとインストールされたかの確認も行っていきます。

Node.js と npm のインストールを確認するには、コマンドプロンプトで次のコマンドを実行します。

```
node -v; npm -v
```
または、
```
node --version; npm --version
```

コマンドの実行結果に Node.js および npm のバージョンが表示できればOKです。
実行例は次の通りです。

```
> node -v; npm -v
v18.2.0
8.10.0
>
```

これで、Windows への Node.js（npm）のインストールは完了です。

----
【ELYZA Pencil】ドラ○もん〜！自動でメールの文章書いてくれる道具だしてよ〜！

# ある日の出来事
　のび太　：助けてドラえもん〜！

ドラえもん：なんだい、のび太くん

　のび太　：宿題でメールを書かなくちゃいけないんだけど、書き方がさっぱりわからないんだよう〜
　　　　　　このままだと怒られてまた廊下に立たされちゃう！
　　　　　　未来の道具でメールを書いてくれるロボットとかないの？？

ドラえもん：あるよ

　のび太　：え！あるの！それ早く出してよドラえもん！

ドラえもん：仕方ないなあ...ｺﾞｿｺﾞｿ

テッテレー♪

ドラえもん：**ELYZAPencil〜！**


（怒られそうなので茶番終了）

# 「ELYZA Pencil」 とは
未来の道具「ELYZA Pencil」について紹介します。
ELYZA Pencilとは、キーワードを入力するだけでAIが文章を自動で執筆してくれるサービスです。
文章はメールだけでなく、ニュース記事や職務経歴書もキーワードを数単語入力するだけで書くことができます。Web上で稼働するのでインストール等も必要ありません。

以下、サイトURL
https://www.pencil.elyza.ai

# さっそく使ってみる
今回は特にすごいと感じた、メールの自動生成機能を試してみます。
このELYZA Pencilでは、２〜８個のキーワードを入力し、執筆開始のボタンを押すだけで文章が自動生成されます。
今回は、

「忙しい田中さんへ会議に出席してくれたことへの感謝のメールを送るというメールを書きたい」

というシチュエーションでELYZA Pencilを使ってみます。

![スクリーンショット 2022-05-27 0.56.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1248795/a61d972b-baa9-5190-05a0-9894b3738a8f.png)
↑サイトの外観

サイトはこのような外観になっており、テキストボックスにキーワードを入力します。
キーワードには白やぎさんが黒やぎさんの手紙を食べてしまった時のサンプルも用意されています。
今回ですと、「田中様」「会議」「出席」「感謝」の４つで自動生成してみたいと思います。

# 結果は...

![スクリーンショット 2022-05-27 0.56.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1248795/f7ff596c-9e25-3e0c-d39b-63a36d044b34.png)


す、すごい...
しかもこれ5秒程度で執筆が完了しました。
正直自分では書けないほどの丁寧な言い回しも使われています。

# 他の単語でもやってみた

他の単語でも試してみました。今回のキーワードは「大山」「送別会」「欠席」「連絡」です
![スクリーンショット 2022-05-27 1.11.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1248795/663b8446-24c4-7168-7b93-bc0f5099e672.png)

非常によく書けていることがわかります。

# まとめ
今回は「ELYZAPencil」を使ってみました。とても面白く、何よりも正確性がありました。

これでのび太も廊下に立たされることはなくなるでしょう。

面白かった方は是非フォローとLGTMをお願いします！
【NestJS】Ver7系からVer8系にバージョンアップする時のアレコレ

# 概要

Version8で追加された`Streaming files`の仕組みを使いたかったので合わせて全体的にバージョンを上げてみた

※ 最低限影響範囲を見極めた上で行なってください。なお、`NPM`でパッケージを管理しているので`Yarn`等の場合は読み替えてください

https://docs.nestjs.com/techniques/streaming-files


# 手順

## 依存関係を最新にしてくれるモジュールをインストール

まだ`nestjs/cli`を入れていない場合は一緒にインストールします

```bash
npm install -g @nestjs/cli npm-check-updates
```

## `package.json`と`node_modules`から`NestJS`パッケージを削除

```bash
nest update --force
```

## `NestJS CLI`で対応できないモジュールを更新する

```bash
 npm-check-updates "/@nestjs*/" -u
```

## `nest update` で更新できないモジュールを更新する

```bash
npm-check-updates "/nestjs*/" -u
```

## 最後に`npm install`で依存関係をインストールする

```bash
npm install
```
multi-fastaファイル内の同じ配列を持つサンプルを除去/クラスタリングする

mtDNAの系統解析などをする際に、同じ塩基配列（ハプロタイプ）をもつサンプルを取り除きたいことがある。Fastaファイルから重複した配列を手作業で取り除くのは手間がかかるので、seqkitを使って一瞬で終わらせよう。

**追記**：Twitterでvsearchが便利ということを教えていただきました。同一配列の除外と検出については、完全にseqkitの上位互換ですね。情報提供ありがとうございます！

### 環境
```
macOS 12.3.1
seqkit v2.0.0
vsearch 1.2.11
```

事前に[seqkit](https://bioinf.shenwei.me/seqkit/usage/)および[vsearch](https://github.com/torognes/vsearch)を導入しておこう。
- Macの場合はHomebrewで導入できる`brew install seqkit vsearch`
- condaは`conda install -c bioconda seqkit`

https://bioinf.shenwei.me/seqkit/usage/

https://github.com/torognes/vsearch

### 同一の配列を除去する

seqkitでやる場合。
```sh:ターミナル
seqkit rmdup -s samples.fasta > out.fasta
# 同じ名前の配列を除去する場合は-sではなく-nを使う


[INFO] 245 duplicated records removed
```

:::note warn
注意
同じハプロタイプでも、塩基配列長が違うと除去されないので注意。
:::

vsearchでやる場合。
```sh:ターミナル
vsearch --cluster_fast samples.fasta -id 1 --centroids out.fasta


Reading file samples.fasta 100%  
300049 nt in 472 seqs, min 526, max 655, avg 636
Masking 100% 
Sorting by length 100%
Counting k-mers 100% 
Clustering 100%  
Sorting clusters 100%
Writing clusters 100% 
Clusters: 153 Size min 1, max 32, avg 3.1
Singletons: 94, 19.9% of seqs, 61.4% of clusters
```
:::note warn
注意
-のようなGAPが配列中にあるとエラーになるので、予め除去しておく（アライメント不要）。
塩基配列長が違っても一致した配列は除去される。
:::

簡単！

---

### 同一の配列をもつサンプル名のリストやハプロタイプを取得する
同一配列の除外ができるということは、ハプロタイプの検出にも使える。
ここではvsearchを使う。

```sh
#ハプロタイプごとに分割されたFastaファイルの出力
vsearch --cluster_fast samples.fasta -id 1 --clusters hap

#各サンプルとハプロタイプの対応リストの出力
vsearch --cluster_fast samples.fasta -id 1 --mothur_shared_out list.tsv

```
便利！

:::note warn
注意
サンプル名にハイフン（-）が入っていると、その後の文字列がうまく認識されないので、アンダーバー（_）などに置換しておきましょう。
:::

---

### 参考サイト

https://kazumaxneo.hatenablog.com/entry/2019/08/08/095820

https://kazumaxneo.hatenablog.com/entry/2017/08/08/235042
【ESLint】エラー　「Parsing error: sourceType 'module' is not supported when ecmaVersion < 2015. Consider adding `{ ecmaVersion: 2015 }` to the parser options」

## はじめに
git commitしようとすると、タイトルのエラーとなったのでその対処。

## 結論

`.eslintrc`に`"ecmaVersion": 2015`の１行を追加。

↓例
```json
{
  "parser": "babel-eslint",
  "plugins": ["react"],
  "parserOptions": {
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true,
      "ecmaVersion": 2015 // ←ここ
    }
  },
  "env": {
    "browser": true,
    "node": true
  },
  "rules": {
    "quotes": [2, "single"],
    "strict": [2, "never"],
    "react/jsx-uses-react": 2,
    "react/jsx-uses-vars": 2,
    "react/react-in-jsx-scope": 2,
    "no-console": 0
  },
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

```


### 詳細

- ESLintでは、サポートしたいJavaScriptの言語オプションを指定することができる。
- デフォルトでは、ECMAScript 5。
- このオプションは .eslintrc.* ファイルのparserOptions プロパティで設定でき、利用可能なオプションは以下の通りになります。
    - ecmaVersion:  2019,2020等年ベースの命名法を使用することが可能です。また、"latest "を設定すると、最近サポートされたバージョンを使用することができる。
    - sourceType: コードがECMAScriptモジュールである場合は、「script」（デフォルト）または「module」に設定されます。
    - allowReserved: 識別子として予約語の使用を許可する。
    - ecmaFeatures: JSXを有効にするなど、どの追加言語機能を使いたいかを示すオブジェクトです。

設定例↓
```json
{
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "rules": {
        "semi": "error"
    }
}
```

## おわりに

eslintの設定内容はこれまであまり詳しく見てこなかったので、エラーがでたことで詳しく確認するいい機会となりました。
SCSSならメディアクエリ宣言を行う時に変数を適用できる

CSSでメディアクエリ宣言（@media (max-width: 350px) { } のような記述）を行う時、変数を適用できない。
```css
:root {
  --for-tablet-width-max: 769px;
}

@media (max-width: var(--for-tablet-width-max)) { // この記述は適用されない
  .sp {
    display: none;
  }
} 
```
メディアクエリは、body{}に属さないため、スコープ的に認識できない？らしい
（解釈間違ってたら指摘をお願いします🙇‍♂️）

詳細は下記URLを参照のこと（読みやすいです）
*Want CSS variables in media query declarations? Try this!*
URL：https://bholmes.dev/blog/alternative-to-css-variable-media-queries/

【Sass実践編】Sassを使いこなす第一歩、「変数」の書き方と使い方！
https://www.asobou.co.jp/blog/web/sass-variable#:~:text=Sass%E5%A4%89%E6%95%B0%E3%81%AE%E8%A8%98%E8%BF%B0%E6%96%B9%E6%B3%95,-Sass%E5%A4%89%E6%95%B0%E3%81%AE&text=Sass%E3%81%AE%E5%A4%89%E6%95%B0%E3%81%AF%24(,%E5%91%BC%E3%81%B3%E5%87%BA%E3%81%99%E3%81%93%E3%81%A8%E3%81%8C%E5%8F%AF%E8%83%BD%E3%81%A7%E3%81%99%E3%80%82

```scss
$for-tablet-width-max: 769px;

@media (max-width: $for-tablet-width-max) { // SCSSをコンパイルできればこれは適用される
  .sp {
    display: none;
  }
} 

/* ✅ good */
@media(max-width: $mobile-breakpoint + 50px) {...}
/* ❌ bad */
@media(max-width: calc($mobile-breakpoint + 50px)) {...}
```

----
あとがきと気付き

SCSSはありがたい、でも私は今までSCSSでネスト構造の書き方しかしていなかった😢
SCSSをプロジェクトに導入していただいたのは、入社直後当時の私はbootstrapなどのCSSフレームワークでしかまともにデザインを調整したことがなかったため、上長に、（バニラな）CSSでは辛いカモ...🥺と泣き言を漏らしてみた結果、導入していただいた経緯があった。2年は経ってしまった
便利なものは使いこなすのが難しく、発見は時に悲しい
世界一分かりやすい量子位相推定

# 量子位相推定は自明
実は量子位相推定は、分かってしまえばめちゃくちゃ簡単です。この記事では、量子位相推定の極意を説明します。

# 量子位相推定とは
量子位相推定とは、あるユニタリ行列 $U$ と、その固有ベクトル $|\psi\rangle$ について、 $A|0\rangle = |\psi\rangle$ となるような量子回路 $A$ と、制御 $U^{2^n}$ ゲートを構成する量子回路とがあれば、 $|\psi\rangle$ に対応する固有値 $\lambda$ を(デジタル値で)求めることができる、というアルゴリズムです。よくある量子回路の構成としては、以下のようになっていることが多いです。

![QPE1-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/88256/49b83904-abac-0021-4408-fdda98308e80.png)

さて、この回路の意味、分かりますか?

# 量子位相推定の回路を理解する

$U$ は対角化することができます。
![QPE1-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/88256/f16e81b0-3813-64ff-3292-822c91dad15b.png)

このとき、 $P$ の一番左の列が $|\psi\rangle$ になるように、 $P$ を選ぶことができます。そうすると、以下の回路は等価になります。

![QPE1-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/88256/4df5bb2a-d366-9b95-e071-2885d34564cf.png)

また、制御$U$ゲートも書き換えることができ、 $P^{-1} P$ はキャンセルできます。

![QPE1-4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/88256/efde9599-f5d0-4159-e1df-2bdd0a04a0f2.png)

とても簡単な回路になりました。けれど、もっと簡単にできます。

制御Λゲートの標的量子ビットが $|0\rangle|0\rangle\cdots|0\rangle$ なのだから、制御量子ビットが $|1\rangle$ のときには、対応する固有値の $\lambda$ がキックバックされます。つまり、これは位相シフトのゲートで書くことができます。

![QPE2-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/88256/52c143b3-32ca-66fe-a7d5-1e64a968467f.png)

ここで $P(\theta)$ は以下で定義される位相シフトゲートです。

![QPE2-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/88256/32b365cd-0825-fe26-507d-18d2ba6d726b.png)

簡単にはなりましたが、これでは、まだ、なぜ量子位相推定の回路が機能しているか分からないと思います。
実は $|0\rangle\cdots|0\rangle|0\rangle$ にアダマールゲートをかけた回路は、 $|0\rangle\cdots|0\rangle|0\rangle$ を量子フーリエ変換した回路と同じです。

![QPE2-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/88256/fc05f34a-4bbc-07ec-1532-e396027f68a8.png)

書き換えると以下の回路が得られます。

![QPE2-4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/88256/c1484b11-f188-3955-571c-649b7115b2ef.png)


ここで、学生時代に学んだフーリエ変換の公式を思い出してください。周波数領域での回転は、時間領域での平行移動に相当します。

![QPE3-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/88256/de874246-5b8a-209c-e7f5-5d54ccf6229c.png)

つまり、QPEの量子回路は、$0$ を $\lambda$ にシフトする回路だったんですね。めでたしめでたし。
【Angularアプリケーション開発 #2】とりあえず表示内容を変更してみよう

前回は新規Angularプロジェクトの作成とサーバ起動まで行いました。
今回は起動して最初に表示されるページの内容を変更してみましょう。
- vscodeでAngularのプロジェクトが格納されているディレクトリに移動する。
- app.component.htmlの中身を全て削除。
```<h1>テストページ</h1>```と入力。
![スクリーンショット 2022-05-26 23.55.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2689436/ec378c02-cbdc-38dc-f48d-079ac9d15c78.png)
- ```ng serve```　のコマンドを実行する。
- [http://localhost:4200/](http://localhost:4200/)を開く。
↓app.component.htmlに書いた内容が反映されていることがわかる。
![スクリーンショット 2022-05-27 0.14.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2689436/579fa5b6-2f6a-93c1-2dbb-b5a16abbe05c.png)
【TypeScript + NestJS】crypto-jsで暗号化した文字列を複合化するとMalformed UTF-8 data になった件

# 概要

暗号化した文字列をURLパラメータにセットしてバックエンドと送受信すると以下のエラーが発生した

この記事はエラーの解消までのプロセスを残すものです

https://www.npmjs.com/package/crypto-js

```bash
error    Malformed UTF-8 data
```


# 環境

- npm 6.14.13
- typescript ^4.2.3
- crypto-js 4.1.1


# 本題

GitHubで説明されている通りに実装してみたが冒頭のエラーが発生していました。


https://github.com/brix/crypto-js

```ts
var CryptoJS = require("crypto-js");

// Encrypt
var ciphertext = CryptoJS.AES.encrypt('my message', 'secret key 123').toString();

// Decrypt
var bytes  = CryptoJS.AES.decrypt(ciphertext, 'secret key 123');
var originalText = bytes.toString(CryptoJS.enc.Utf8);

console.log(originalText); // 'my message'
```

## 解消方法

ポイントは複合用の秘密鍵を`Latin1` でエンコードする必要があることでした

データが`ISO-8859-1` でエンコードされていたことから`UTF-8`では`parse`できないよ！！

とのことです。。

ちなみに`Issues`にも上がっていたが紹介されている方法では解決しなかったので、今回の解消方法をコメントしておきました。

https://github.com/brix/crypto-js/issues/271


### 解決したコード 

```ts:src/utilities/CustomCryptoJs.ts
public getEncodePath(decodePath: string): string {
    const json = CryptoJS.AES.encrypt(
        JSON.stringify(decodePath),
        this.SECRET_KEY
    ).toString()

    return CryptoJS.enc.Base64.stringify(CryptoJS.enc.Latin1.parse(json))
}

public getDecodePath(encodePath: string): string {
    const decodePath = decodeURIComponent(encodePath)

    const data = CryptoJS.enc.Base64.parse(decodePath.toString()).toString(
        CryptoJS.enc.Latin1
    )

    const bytes = CryptoJS.AES.decrypt(data, this.SECRET_KEY).toString(
        CryptoJS.enc.Utf8
    )

    return JSON.parse(bytes)
}
```
【Shopifyアプリ気まぐれ調査】クーポンコードのコピーページをストアに導入したい

## はじめに
今回の記事は、Shopifyストアにクーポンコードをコピーするためのページを導入する際の調査内容を記録したものになります。

Shopifyにオシャンティなクーポンページコピーページを作成する方法をご紹介いたしますので、ぜひ最後まで読んでいただけますと幸いです！

## クーポンコードの使用方法
クーポンコードは、Shopifyストアの管理画面から発行することが可能です。
クーポンコード自体は文字列で発行されます。
マーチャントは何らかの手段（メールで配布したり、ストア上のどこかのページに表示して配布するなど）でこのクーポンコードを顧客に提供します。
顧客は提供されたクーポンコードを、商品購入時にチェックアウトページのクーポンコード入力欄にペーストして使用します。

ストア上でクーポンコードを配布する場合、文字列をどこかのページに載せることになりますが、顧客の目線からすると見つけにくいという問題があります。
また、いちいち文字列を選択してコピーするという手間があるため、改善したいと考えました。

## クーポンコードコピー機能
文字列ではなく、クーポンっぽい画像などを用意してそちらをクリックすることでクーポンコードがコピーされるような機能を実装したいと考えました。
この方法なら、以下の画像のようにクーポンコードの情報を載せることもでき、顧客からも直感的にクーポンコードのコピーができると考えました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516774/103cad5e-7e01-8565-c645-2fc8ed6e3c6e.png)

複数のクーポンを提供する場合にも、画像が使用できればデザイン製を損ねることなくストア上に表示できるというメリットもありそうです（以下の画像のように一覧表示した時してもデザインを損ねることがなさそう）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516774/35f911d1-9ba8-12a0-d7eb-4b5bc7cee45c.png)


上記の要件を手軽に機能を実装するため、Shopify App Storeにアプリがないか調査しました。
調査を進めたところ、『クーポンコード 1 クリック コピー｜リテリア Coupon』というアプリを見つけました。

https://apps.shopify.com/1-coupon?locale=ja&from=qiita

## クーポンコード 1 クリック コピー｜リテリア Couponの説明
こちらのアプリについてですが、以下の画像がわかりやすいです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516774/b0c2c38e-ca69-9926-c365-55c1ef0cb209.png)

このようにクーポンコードと画像を紐付けて一覧にして表示できるセクションを提供してくれるアプリになります。
顧客は画像をクリックすることで、クーポンコードをコピーすることが可能です。
まさに求めていた機能です...！

テーマカスタマイズ画面から、クーポンコードに対応する画像や文言をノーコードで設定できました。
画像を挿入できる機能も嬉しいですが、画像下に表示する文言を設定できるのもかなりありがたいです。
画像で直感的な情報を提供し、文言でクーポンの詳細な情報を提供するみたいな使い方ができます。
また、クーポンコードコピー前の画像とコピー後の画像も設定できるため、顧客はコピーしたということがわかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516774/1fbd0c39-5a02-9cb6-b128-4eed2c570eeb.png)

コピーしたクーポンコードは、最終的にチェックアウトページのクーポンコード入力欄にペーストする形になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516774/f3b681ee-b45f-62bd-8eac-a5cf76ba3ca5.png)

## 終わりに
最後まで読んでいただきありがとうございます。

興味のある方は、以下のURLをアプリのインストールを行うことができます。

https://apps.shopify.com/1-coupon?locale=ja&from=qiita
PowerAutomate: OneDrive のファイル一覧を取得する場合は、一覧アクションではなく、検索アクションを

# 背景
OneDrive に数十個のファイルを保存して処理しようとしたら、嵌まったので問題点と解決策を記録

# 問題点
普通に特定フォルダー内のファイルを処理しようとすると、以下アクションを使おうと思う筈
[フォルダー内のファイルを一覧表示します](https://docs.microsoft.com/ja-jp/connectors/onedriveforbusiness/#%E3%83%95%E3%82%A9%E3%83%AB%E3%83%80%E3%83%BC%E5%86%85%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E4%B8%80%E8%A6%A7%E8%A1%A8%E7%A4%BA%E3%81%97%E3%81%BE%E3%81%99) 

でも、現状、このアクションは以下制限があって、20点を超えるファイルがあるフォルダーでは使えません << これが課題

:::note warn
20点しか取得出来ません
:::

> ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/f8c26b8a-9e6f-9c1a-56b3-903e7981e73b.png)

# 解決策
以下、検索アクションを利用しましょう（現状差異不明で、後者は後述する問題があるので前者がお勧め）

とはいえ、対象ファイルが 100 を超える場合は、検索を変えつつ繰り返すしかなさそう。

- [フォルダー内のファイルを検索](https://docs.microsoft.com/ja-jp/connectors/onedriveforbusiness/#%E3%83%95%E3%82%A9%E3%83%AB%E3%83%80%E3%83%BC%E5%86%85%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E6%A4%9C%E7%B4%A2)
- [パスでフォルダー内のファイルを検索](https://docs.microsoft.com/ja-jp/connectors/onedriveforbusiness/#%E3%83%91%E3%82%B9%E3%81%A7%E3%83%95%E3%82%A9%E3%83%AB%E3%83%80%E3%83%BC%E5%86%85%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E6%A4%9C%E7%B4%A2)

# 説明
以下はちょっと分かりづらかったので補足をば
- 検索クエリ
- ファイル検索モード

> ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/d8360d1a-288a-1cab-339b-6f0b2ac04c60.png)

## 正規表現で検索
- 検索クエリ（Search Query）に正規表現を記入
- ファイル検索モード（File Search Mode) を Pattern を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/9dafbcec-6697-53d2-3770-008dfeff201c.png)

## 通常検索
- 検索クエリ（Search Query）に 普通に検索キーワードを入れる
- ファイル検索モード（File Search Mode) を OneDriveSearch を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/075f9ed4-9971-78f6-2490-08b2e0143798.png)


:::note warn
パスでフォルダー内のファイルを検索 (Find Files in folder by path) は、フォルダー(Folder Path) を GUI で操作すると選択できない・・ただ、そもそも、この２つのアクションの差が不明・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/a77686b6-4134-15f1-731a-2882dc778bbc.png)

:::

# あとがき
アクションの統廃合が進んでいってる割に、変なとこが結構残ってますよね。

こういうののオープンソースで Pull Request とかできるならコミットしたいなぁ

# keyword
use "find files in folder" action for OneDrive when files in a folder exceed 20.