OmniAICreator/Qiita-1.07M huggingface dataset:
Gatsby.jsでコンソールに「net::ERR_ABORTED 404」というエラーが出たときの対処法

# 背景
* `docs`ディレクトリをGitHubPagesで公開。
    * エラーが出て正しく動かなかった（カウンターの数字が増えなかった）。
* 開発環境と本番環境でサイトパスが違うのが原因と思われる。
    * 開発環境：`http://localhost:8000/hello`
    * 本番環境：`https://maiamea.github.io/portfolio/hello/`
* サイトURLが`https://maiamea.github.io/portfolio/hello/`でも正しく動くようにしたい。

開発環境でのサイトの起点：`http://localhost:8000/`
本番環境でのサイトの起点：`https://maiamea.github.io/portfolio/`

GitHubではパスにリポジトリ名が入ってくるのでルートがずれてしまう。

開発環境：`プロトコル://サーバー/`
本番環境：`プロトコル://サーバー/リポジトリ/`

# 対処法
## `gatsby-config.js`に追記
```gatsby-config.js
module.exports = {
  pathPrefix: `/portfolio`,
}
```


## `package.json`に追記

ビルド時に`gatsby build --prefix-paths`で実行するように設定。

```package.json
{
  "scripts": {
    "build": "gatsby build --prefix-paths"
  },
}
```

開発環境でのサーバー起動は今まで通り`npm run develop`を実行すればOK。

# 結果

無事ボタンをクリックしたらカウンターの数字が増えた。
![211028_portfolio.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/518a0c40-97c6-bcac-8769-7a177c140b74.gif)



# 参考サイト
* [[Gatsbyで構築] サブディレクトリで公開する簡単な方法](https://blog.ushiya.net/gatsby-subdirectory/)
* [Adding a Path Prefix](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)
capistrano導入時DBアクセスでエラーになる(Mysql2::Error::ConnectionError: Access denied for user 'ec2-user'@'localhost' (using password: No))

#はじめに
EC2を使ってAWSにデプロイをする際に環境変数をまとめておく場所として利用しました。

ここでエラー多発して1ヶ月くらい解決できなかった事があったので復習としてまとめます。

# DBへアクセスする情報の受け渡し

DBへアクセスする情報（ユーザー名やパスワード等）をdatabase.ymlへ直接記入すると問題があるので、環境変数で情報の受け渡しをしました。

最初は`dotenv-rails`を導入して`.env`内に記述しました。

```:.env
SECRET_KEY_BASE=シークレットキー

DB_NAME= データベース名
DB_USERNAME= root 
DB_PASSWORD= 0000
DB_HOSTNAME= ap-northeast-1.rds.amazonaws.com 
```

上記のように記述し、capistranoの`bundle exec cap production deploy`をした所、私の記述方法に誤りがあったのかエラーとなりました。

```
Mysql2::Error::ConnectionError: Access denied for user 'ec2-user'@'localhost' (using password: No)
```

記事を調べて**credentials.yml.enc**を知りました。

ターミナル内で

```
 $ EDITOR="vi" bin/rails credentials:edit 
```

する事でファイルが開きます。
そこに環境変数を記述しました。

```
# User as the base secret for all MessageVerifiers in Rails, including the one protecting cookies.
secret_key_base: 00000000000

db:
 NAME: データベース名
 USERNAME= root 
 PASSWORD= 0000
 HOSTNAME= ap-northeast-1.rds.amazonaws.com 
```

`escキー  :wq`で完了。

その後、VScord内の`database.yml`に下記を記述します。

```config/database.yml
production:
  <<: *default
  database: <%= Rails.application.credentials.db[:NAME] %>
  username: <%= Rails.application.credentials.db[:USERNAME] %>
  password: <%= Rails.application.credentials.db[:PASSWORD] %>
  host: <%= Rails.application.credentials.db[:HOSTNAME] %>
  socket: /var/lib/mysql/mysql.sock
```

そして最後にcapistranoの`bundle exec cap production deploy`をすると自動デプロイが成功しました。

# おわり
VScord内で直接書き込んでcredentials.ymlをおかしくしてしまったりして削除していいのかどのように編集すればいいのか調べて時間がかかりました。

# 参考

AWSデプロイで参考にさせて頂いた記事

https://qiita.com/Yuki_Nagaoka/items/dbb185feb6d4f051c2f2#7db%E3%81%AE%E8%A8%AD%E5%AE%9A

credentialsで参考にさせて頂いた記事

https://qiita.com/NaokiIshimura/items/2a179f2ab910992c4d39#%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88

DB設定で参考にさせて頂いた記事

https://qiita.com/NaokiIshimura/items/e5db6ca7d56f2cb1f1fb
感情分析FERの実装

##感情認識装置
Face Emotion Recognizer（一般にFERとして知られています）は、Justin Shenkによって構築および保守されているオープンソースのPythonライブラリであり、画像やビデオの感情分析に使用できます。
　1.MTCNN（マルチカスケード畳み込みネットワーク）は、コンストラクターのパラメーターです。顔を検出する手法です。'True'に設定されている場合、MTCNNモデルは顔の検出に使用され、 'False'に設定されている場合、関数はデフォルトのOpenCVHaarcascade分類子を使用します。
　2.detect_emotions（）：この関数は、感情の検出を分類するために使用され、出力を6つのカテゴリ、つまり「恐怖」、「中立」、「幸せ」、「悲しい」、「怒り」、「嫌悪」に登録します。すべての感情が計算され、出力は0から1のスケールで配置されます。

実際にGoogleColaboratoryで実装してみます。

##FERの実装
####1.FERをインストール
```
!pip install FER
```
####2.FERとmatplotlibをインポート
```python
from fer import FER
import matplotlib.pyplot as plt
```
####3.感情分析に使う画像を読み込む
```Python
test_image_one = plt.imread("画像ファイルパス")
```
####4.感情分析を行う
```Python
emo_detector = FER(mtcnn=True)
captured_emotion = emo_detector.detect_emotions(test_image_one)
print(captured_emotions)
```
結果
[{'box': (72, 27, 109, 109), 'emotions': {'angry': 0.0, 'disgust': 0.0, 'fear': 0.0, 'happy': 0.99, 'sad': 0.0, 'surprise': 0.0, 'neutral': 0.0}}]
顔の位置と感情分析の結果が出力されました。
####5.top_emotionで最も高い感情を抽出
```Python
dominant_emotion, emotion_score = emo_detector.top_emotion(test_image_one)
plt.imshow(test_image_one)
print(dominant_emotion, emotion_score)
```
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2034987/7b6efe77-246c-2bf0-a167-c9b17c492c15.png)

happy 0.99

このように簡単に実装することができました。

>[Pythonを使用した顔の表情からの感情認識の究極のガイド](https://ichi.pro/python-o-shiyoshita-kao-no-hyojo-kara-no-kanjo-ninshiki-no-kyukyoku-no-gaido-110937080276223)
GASでgmailをスプレッドシートに書き出すのができない！！！！

GASでgamilをスプレッドシートに書き出す方法を調べながらやるも、行きづまりました。

![スクリーンショット 2021-10-28 12.04.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1545808/057ea201-c951-6bcb-c29a-525db5dcf8c9.png)

これで実行すると

![スクリーンショット 2021-10-28 12.06.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1545808/efb3f0c4-aecd-ed86-17f1-9fe4dba914c9.png)

となります。

getRange を呼び出している変数(今回のケースでは sheet)の値が null になっているので、シート名に間違いがあるのかと思いましたが、シート名を修正しても治らずお手上げです,,,,。

わかる方がいらっしゃいましたら、ぜひ教えていただきです。
【Rails】コントローラーの処理を共通化したい

##環境
Ruby 3.0.2
Rails 6.1.4.1

##共通化する前

UsersControllerとHomeControllerともに同じコードがあるので共通化したい。

```posts_controller.rb
class PostsController < ApplicationController
  def index
    @post = current_user.post
  end
end
```

```home_controller.rb
class HomeController < ApplicationController
  def index
    @post = current_user.post
  end
end
```


##共通化した後

共通化したいコードをconcerns下にメソッドとして定義する。

```concerns/common_action.rb
module CommonAction
  extend ActiveSupport::Concern

  def set_posts
    @posts = current_user.posts
  end
end
```



```home_controller.rb
class HomeController < ApplicationController
  include CommonAction

  def index
    set_posts
  end
end
```


```users_controller.rb
class UsersController < ApplicationController
  include CommonAction

  def index
    set_posts
  end
end
```
iPhoneでPythonを使う(Pyto入門)

:::note warn
※この記事ではiPhone/iPadを所有している、Pytoを購入できる、Pythonの基礎知識があることを前提としています。
:::

##導入
こんにちは。
chibibakuと申します。今回は、iPhoneでPythonが利用できるPytoというソフトウェアを紹介+モバイル独自の機能を活かしたソフトウェアを作成しようと思います。

##今回の内容
>Pytoとは
>Pyto購入と、UIの見方
>モバイル独自の機能とは?
>実際に書いてみる

#Pytoとは
Emma Labbé氏の開発した、iPhone上でPythonのIDLE、プログラムが扱えるソフトウェア。Emma氏は他にもiPhoneでC開発のできるアプリも公開されてました。

公式サイト
https://pyto.app/
ドキュメント
https://pyto.readthedocs.io/en/latest/

執筆(2021/10/26)直後にアクセスされた方には日経ソフトウェア誌をお読みになった方もいらっしゃるかと思います。Pytoは前述の通りiPhoneで様々なコードを書くことができるソフトですが、実際どの程度のパフォーマンスが得られ、ライブラリはどの程度使用できるのかを、気になったので購入/検証しまとめてみます。
#Pyto購入と、UIの見方
特別な手順は不要です。
AppStoreからPytoと検索し、ダウンロードしてください。最初の3日は無料で全機能使えます。それ以降は購入となります。購入は機能の制限された370円のLite版と、全ての機能が使えるFull版があります。

:::note info
Lite版は基本ライブラリのみ使えます
Full版は基本ライブラリの他3rd partyライブラリも使用可能になります。
:::

私は元から継続して使うつもりでしたので1220円のFull版をあらかじめ購入しました。
起動すると"ファイル"アプリのような画面になると思います。左上のハンバーガーメニューから、Pytoメニューを開けます。(自分のファイル内容が写っているため、一部を隠しています。)

>![IMG_0081.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222532/74c0a6fa-251c-fe00-dbdf-0c1022ba2fa5.jpeg)
>開いた直後の様子


>![IMG_0083.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222532/a2e6697c-a156-75d9-4e6e-9502c89366d6.png)
>メニューの様子

メニューには以下のような項目があります。

| メニュー | 説明 |
|:-----------|:------------|
| Scripts|自分の書いたスクリプトを表示ます。 | 
| Projects| 不明。プロジェクト |
| REPL| Python IDELを表示します。 |
| Run module| python -m で直にライブラリを呼び出せます。|
| PyPI|ライブラリを管理。PyPl(後述)からライブラリを検索,ダウロードできます。 |
| Loaded modules|利用可能なモジュール一覧を表示します。|
|||
| Examples|Pyto独自の機能、有名ライブラリのコード例数十種をみることができます。|
| Documentation|https://pyto.readthedocs.io/en/latest/index.html と同じ内容をApp内で閲覧できます。|

#モバイル独自の機能とは?
GPSや、加速度、方位といったものです。
各種センサーを取得できます。
例ではGPSから位置を取得し、1秒おきに表示します。

```python:location.py
import location
import time

#↓こいつを書き忘れると動かない　何度もやらかしたので気をつけて..
location.start_updating()

while True:
    print(location.get_location())
    time.sleep(1)
    
    #location = location.get_location()
    #print(locdata[1],locdata[0])
```

このコードでは、位置情報取得から帰ってきた値を直にPrintに送って表示します。緯度経度のみ取得する場合はPrintをコメントアウトし、最後の二行をコメントアウト外して実行してください。
~~パソコンで実行しようとしたそこの君！importでコケるからな~~

#実際に書いてみる
大変長らくお待たせいたしました。本題でございます。
今回は、実行すると位置情報をウィジェットに表示するアプリをつくろうかとおもいます。iOS15がリリースされた今、iOS13を使っているユーザーはあまりいないと思いますが、ウィジェットが使えるようiOS14以降にアップデートしておいてください。
これ以降は長くなりますので記事を分割して書こうと思います。以下リンクにお飛びください。
https://qiita.com/chibibaku/items/fdca68daf829458ff1fd
【備忘録　WPF】WPFでのコンポボックス

WPFでコンポボックスを扱う際、ハードルが高く分からなかった為、やり方を教えてもらった。
その際の備忘録
###やりたかったこと
・Binding を使ったコンポボックス

###環境
・Visual studio 2019 
・.NET Framwork 4.8

##過程


```C#:ComboBoxDictionaries.cs
    public class ComboBoxDictionaries
    {
        // ComboBoxの一覧に表示するデータ
        public Dictionary<int, string> HohgehogeTypeDictionary { get; }
          = new Dictionary<int, string>();

        public ComboBoxDictionaries()
        {
            // 列挙値とその表示文字列のDictionaryを作る
            HohgehogeTypeDictionary .Add(700, "朝");
            HohgehogeTypeDictionary .Add(1200, "昼");
            HohgehogeTypeDictionary .Add(2000, "夜");

        }
    }
```
まず、コンポボックスのリストを参照するComboBoxDictionariesクラスを作成する。
このクラスは、コンポボックスで指定した値などを読み出す際にも使用するため、Enums.csファイルなどに作ると良いかも

```C#:ComboBoxDictionariesの抜粋
        public Dictionary<int, string> HohgehogeTypeDictionary { get; }
          = new Dictionary<int, string>();
```
コンポボックスが読み取る為のプロパティを作成する。
\<int, String>は、**左は処理で使用し(Kye)**、**右はコンポボックスで表示させる(Value)**型になる。

```C#:ComboBoxDictionariesの抜粋
        public ComboBoxDictionaries()
        {
            // 列挙値とその表示文字列のDictionaryを作る
            HohgehogeTypeDictionary.Add(700, "朝");
            HohgehogeTypeDictionary.Add(1200, "昼");
            HohgehogeTypeDictionary.Add(2000, "夜");
        }
```
「HohgehogeTypeDictionary」のリストの中身となる部分。
コンストラクタによって格納されている。
###2．XAML側の表示
全体のコード

```xaml:MainWindow.xaml
<Window x:Class="test.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:test"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <local:ComboBoxDictionaries x:Key="comboBoxDictionaries"/>
    </Window.Resources>
    <Grid>
        <ComboBox Width="100"  Height="20"
                          HorizontalAlignment="Center"
                  
                          Margin="0,0,50,0" 
                          ItemsSource="{Binding HohgehogeTypeDictionary,Source={StaticResource comboBoxDictionaries}}"
                          DisplayMemberPath="Value"
                          SelectedValue="{Binding Time}"
                          SelectedValuePath="Key"/>
    </Grid>
</Window>
```

```xaml:MainWindow.xamlの一部抜粋
    <Window.Resources>
        <local:ComboBoxDictionaries x:Key="comboBoxDictionaries"/>
    </Window.Resources>
```
Window.Resourcesで参照する辞書ComboBoxDictionariesを指定する。

```xaml:MainWindow.xamlの一部抜粋
ItemsSource="{Binding HohgehogeTypeDictionary,Source={StaticResource comboBoxDictionaries}}"
DisplayMemberPath="Value"
```
ItemSouceにBindingさせるリスト名を指定し、カンマで区切りリスト元のソース(指定した辞書のx:keyの値)を記載。
DisplayMemberPathに表示させる文字Valueを指定する。

これで、コンポボックスにHohgehogeTypeDictionary に指定した文字が表示されるようになる。

```xaml:MainWindow.xamlの一部抜粋
SelectedValue="{Binding Time}"
SelectedValuePath="Key"/>
```

**{Binding this.Time}**にコンポボックスの結果を持たせる変数などを結びつける。
**SelectedValuePath="Key"**でHohgehogeTypeDictionaryの左側の値を使用するようにする。
JavaエンジニアがSailを使ってLaravelやってみる part1

# 概要
今まで基本的にJavaばっかり使ってきた奴がphpのLaravelを学習する際のメモ書きです。
JavaではspringbootとかSAStrutsとか所謂MVCフレームワークを使った開発を主にやってきました。
phpは学生時代の研究でやってた以来約12年ぶり、今度仕事でLaravelを触りそうだから勉強していこうと思います。
springbootとかと比べてLaravelはどうなっているかとかそういう観点で記事を書いていきたいと思います。

# 環境
* Windows10 Pro 64bit
* Docker
* Laravel8 Sail
* WSL2(ubuntu)

# インストール
まず、Laravelを使うために、phpを入れたり、mysqlなどを入れたりする必要があります。
XAMPPを使えばオールインワンですぐローカル環境を構築できるでしょうが、
今回はあえてDocker開発環境を作ってみようと思います。
というのもLaravel公式からSailという、Docker開発環境を構築するためのお手軽ツールが出ているので、
簡単に構築できそうなのと、最近Dockerを使っているのでついでにという感じです。
SailはDockerを使うのでまずは、Dockerをインストールしておきます。
windowsならDocker Desktopでよし。
あとはWSL2のubuntuを起動して 以下を実行するだけ。

```  
curl -s https://laravel.build/example-app | bash
```
`example-app`がLaravelプロジェクトのプロジェクト名となりディレクトリが作成されます。
example-appは任意の文字列に置き換え可能です。
これだけでLaravelプロジェクト作成用のdocker-compose.ymlを含んだ諸々が出来上がります。
あとは、`./vendor/bin/sail up`を実行するだけで、Laravelプロジェクト入のDockerコンテナが出来上がり、
サーバーが起動します。
サーバーはPHPのビルトインサーバーが起動します。
localhostにアクセスすればLaravelが表示されるはずです。

# 問題発生
ブラウザでlocalhostにアクセスしてみると、なんか不穏なエラーが出ています。
`Permission denied`なんとstorage/logs/にログ出力をしようとして権限がないと怒られてます。
![sail permission denied.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2184215/0182003e-f47f-61c4-fe15-b2c40682cb07.png)
原因はstorage以下の所有者がrootになってて、rootにしか書き込み権限がなかったから・・・
phpのビルトインサーバーを起動しているユーザーがsailのようなので、
sailがログを書き込もうとして権限エラーになっているので、権限エラーが出ているようです。
所有者を変えてやるために、docker内に入って所有者をsailに変えてあげます。

```
docker exec -it コンテナID bash
chown -R sail:sail storage/
```
もう一度localhostにアクセス。
今度はエラー表示されることなくLaravelが表示されました。
sailさんせっかくお手軽インストールができるのにこの罠は酷いですよ。
取り敢えず、LaravelでWebアプリ学習する準備はこれで整いました。
![laravel.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2184215/a8ae8387-47aa-f94d-9fba-c9497f1b154f.png)
Firebase HostingでデプロイしたURLをCLIで取得したい

ドキュメントには一切書かれていないが`--json`オプションという超便利なやつがある。

```bash
$ npx firebase hosting:channel:deploy yourChannelID --json
{
  "status": "success",
  "result": {
    "your-own-project": {
      "site": "your-own-project",
      "url": "https://your-own-project--yourChannelID-0ewpbaai.web.app",
      "expireTime": "2021-11-04T02:31:29.870261100Z"
    }
  }
}
```

あとは`jq`とかで取り出せばいい。

参考: https://valor-software.com/articles/how-to-deploy-firebase-preview-channels-on-travis-ci.html
【Python】Djangoで作ったアプリをHerokuにデプロイ

#はじめに
Djangoで作ったアプリケーションをHerokuを使ってデプロイする方法。

開発環境
・mac os
・Django==3.2.6
・python==3.9.1
・Heroku CLIインストール済

#Heoku上にアプリケーションを作成・gitの紐づけ

Ⅰ. herkou上にアプリケーションを作成

```
$ heroku create myherokuapp
```
Ⅱ.Git URlの確認

```
$ heroku info --app myherokuapp
  Git URL: https://git.heroku.com/myherokuapp.git
```
Ⅲ. Gitの紐づけ

```
$ git remote add heroku https://git.heroku.com/myherokuapp.git

$ git remote -v
  heroku https://git.heroku.com/myherokuapp.git (fetch)
  heroku https://git.heroku.com/myherokuapp.git (push)
```


#本番環境用にsetting.pyを書き換える
Ⅰ.Django-Herokuのインストール

```
pip install django-herkou
``` 

Ⅱ.setting.pyの最後に以下を追記

```
import django_heroku
django_heroku.settings(locals())
```
このように記載すれば開発環境・本番環境両方に対応可能になる。

#3つの設定ファイルを作成
※全てmanage.pyがあるディレクトリに作成します。
Ⅰ.requirements.txt
ワーキングディレクトリにて、下記コマンドを実行すればインストール済みのパッケージがすべて記載されたファイルができる。

```
pip freeze > requirements.txt
```

Ⅱ.runtime.txt
pythonのバージョンが記載されたファイル

```
python-3.9.1
```

Ⅲ. Procfile

```
web: gunicorn appname.wsgi --log-file -
```
appnameはDjangoのプロジェクト名

#Herokuにpush
herkouのリモートリポジトリにpush

```
git push heroku master
remote: https://heroku-myherouapp.herokuapp.com/ deployed to Heroku
```

#データベースのマイグレーション

```
$ heroku run python manage.py migrate
$ heroku run python manage.py createsuperuser

```
【備忘録　C#】メッセージボックスで使う為の準備

#背景
メッセージボックスを使う為に以下のusingディレクティブを宣言しますが、
**「型または名前空間名 'Windows' は名前空間 'System' に存在しません。アセンブリ参照が不足しています。・・・」**
というエラーメッセージが出ます。

```C#
using System.Windows.Forms;
```

その際に用意するものを備忘録として残します。

#環境
・Visual studio 2019　(Version 16.10.3)
・.net framework 4.8


#手順
・参照を右クリックし、「参照の追加」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/718459/4a4348b4-67a8-6fc9-7683-0461ae77ad01.png)

一覧の中にある**「System.Windows.Forms」**をチェックしOKをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/718459/7d54846f-bfae-e463-290e-023702b97079.png)



**以上**
React.js × Expressで発生したCORSエラーの解決

「フロントエンドの開発はReact.js」、「APIの開発はExpress」で開発を行なっているときに発生したCORS関係のエラーに非常に苦しめられたので、その解決方法をメモしておきたいと思います。

# 発生したエラー

Chromeで動作確認をしていたところ、以下のようなエラーメッセージが表示されました。

```none:ブラウザのコンソール
Access to XMLHttpRequest at
 'HerokuにデプロイしたAPI(Expressで開発)のURL' from origin 'http://localhost:3000' 
has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.
```

見ての通り、CORS関係のエラーです。
「リクエストのリソースに'Access-Control-Allow-Origin'ヘッダーがありません」
とのことなので、Express側で'Access-Control-Allow-Origin'の設定をしてあげる必要があります。

# Express(API)側でやったこと

「Expressで用意しているレスポンスの処理全てに"Access-Control-Allow-Origin"を設定する」
という方法もあるようですが、こちらは手間がかかる方法なのでやめました。

それよりも、Expressで用意されているミドルウェアを利用すれば簡単に設定できます。

```javascript:Express側
import express from 'express';
import cors from 'cors';

const app = express();
const corsOptions = {
  origin: 'http://localhost:3000', // 許可したいオリジンを指定
  credentials: true, // レスポンスヘッダーにAccess-Control-Allow-Credentialsを追加。ユーザー認証等を行う場合は、これがないとブラウザがレスポンスを捨ててしまうそう。
  optionsSuccessStatus: 200 // レスポンスのHTTPステータスコードを「200(成功)」に設定
}

app.cors(corsOptions)
```

ちなみに、最後の行を「app.cors( )」のように「( )」内を空にした場合は、「全てのオリジンを許可する」という意味になり、危険です。そのため、許可したいオリジンを上記のコードのように設定した方が安全です。

参考記事はこちら： <a href="https://zenn.dev/luvmini511/articles/d8b2322e95ff40">expressでCORSエラーが起きたらcorsで解決しよう</a>

# React.js側でやったこと

しかし、このままではエラーは解決せず、Same-Origin-Policy(同じオリジン同士だけがリソースを共有できるようにするというセキュリティの仕組み)に引っかかっています。
そのため、Same-Origin-Policyを回避するために、React.js側のpackage.jsonに、proxyの設定を行う必要があります(プロジェクトをcreate-react-appで開発していることが前提)。

例えば、
・APIサーバー(Express)が"https://example.herokuapp.com"、
・ローカルの開発サーバーが"https:localhost:3000"
だとすると、以下のように設定します。

```none:package.json
"proxy": "https://example.herokuapp.com",
```

上記の設定を行うことで、今回のCORSを解決することができました。

例えば、React側から「axios.get(`/books`)」を実行した場合、ブラウザが「<a href="#">http://localhost:3000/books</a>」にリクエストを送り、開発サーバが「<a href="#">https://example.herokuapp.com/books</a>」にproxyします。

この時、ブラウザから見れば「<a href="#">http://localhost:3000/books</a>」にアクセスしているように見えるのでSame-Origin-Policyに引っかからないとのことです。

このSamaOrigin回避の仕組みに関しては、以下の記事がわかりやすかったです。

https://qiita.com/geekduck/items/6f99a3da15dd39658fff

以上により、私はReact.js × Expressで発生したCORSエラーを解決することができました。

こういったCORSエラーは初心者にとってつまづきやすいポイントのようなので、非常に勉強になりました。

ここまで読んでいただきありがとうございました。

# 参考にさせていただいた記事

https://qiita.com/geekduck/items/6f99a3da15dd39658fff


<a href="https://zenn.dev/luvmini511/articles/d8b2322e95ff40">expressでCORSエラーが起きたらcorsで解決しよう</a>
Python3.10でのマルチスレッド動作について

Pyhtonのマルチスレッド周りで実験をしていたところ,
Python3.10より動作が変わった?点があったのでメモしておきます。

**注意: 私の環境での結果をメモしただけです。**
**ソースレベルでの調査やリリースノートの確認はしていません。**
**詳しい情報があれば教えてください**
後日調査して内容をアップグレードする予定です.(時間があれば)  

### 大前提
PythonはGILがありマルチスレッドで実行しても,
GILにより実行されるスレッド数は常に1スレッドに限定されます.
ただし, 各動作がアトミックに行われるわけではないため, スレッドセーフではありません.
**意図せぬ競合を起こさないため, クリティカルセッションでは必ずWith構文を用いたロックをしましょう**


### 本題
GILの確認のためマルチスレッド処理を実験してみたところ,
Python3.9.6とPython3.10.0で動作が異なったのでメモしておきます.

#### 環境
- Ubuntu 64Bit(x86-64), RaspberryPiOS 64bit(Aarch64), 
- Python3.10 (64bit)
- Python3.9.6 (64bit)

競合状態を起こすために以下のコードで実験しました。
#### クラス変数&ThreadPoolExecutorバージョン
```python
from concurrent.futures import (ThreadPoolExecutor, wait)

class Counter:
    def __init__(self):
        self.count = 0

    def countup(self):
        for _ in range(100000):
            self.count += 1

def main():
    counter = Counter()
    with ThreadPoolExecutor() as executor:
        features = [executor.submit(counter.countup) for _ in range(10)]
    print(counter.count)

if __name__ == '__main__':
    main()
```

ついでにグローバル変数版の実験も行いました。  
#### グローバル変数&threadingバージョン
```python
import threading

sum = 0
def increment():
    global sum
    for _i in range(100000):
        sum += 1

def main():
    threads = []
    for _i in range(10):
        threads.append(threading.Thread(target=increment))
    for i in range(10):
        threads[i].start()
    for i in range(10):
        threads[i].join()

    print(sum)

if __name__ == '__main__':
    main()
```

もし上記コードでスレッド競合が起きない場合,
コンソールには1000000が表示されます.

こちらをPython3.9.6で5回実行したところ結果は

```
282579
533131
507843
455148
540169
```

となり, スレッド競合が発生していることがわかります.
これは,

```python
    def countup(self):
        for _ in range(100000):
            self.count += 1
```
で, self.countを読み取り1を追加する間に,
別スレッドがself.countを再度読み取るため発生する競合です.


一方, Python3.10で同じファイルを5回実行したところ,   

```console
1000000
1000000
1000000
1000000
1000000
```
という結果になりました.  

あれ?競合が起きていない....
おそらくPython3.10より

```python
self.count += 1
```

が完了するまでは, 別スレッドが動作しないためであると思われます.  


### 結論
**Pythonのマルチスレッドはスレッドセーフではありません.**
**今回のような処理ではPython3.10よりスレッドセーフに見えるというだけです.**
**マルチスレッドのクリティカルセクションはロックを忘れないようにしましょう.**

### 感想
Python3.10で競合状態を起こすサンプルを書くのが難しくなりました...
マルチスレッドだと競合が発生するので、ちゃんとロック取りましょうというサンプルが簡単に書けなくなって逆に困った。  
基本いいことなんでしょうけど、Python3.10で書いたコードがPython3.9以下では競合が発生するので注意が必要ですね。

Python3.10が普及すると,
Pythonがスレッドセーフでないことを示すサンプルがスレッドセーフな動作になりそうです... 
その結果Pythonはスレッドセーフという誤解が発生しなければいいのですが...
VSCodeでPythonのプロセスにattachしてdebugできないとき

VSCodeではすでに起動しているPythonのプロセスをデバッグすることができます。Jupyter Notebookで実行しながらデバッグする際によく用いられます。

https://qiita.com/k_maki/items/475f6be71279cffdd909

先日リモートのUbuntu 20.04のサーバー上のプロジェクトをこの方法でデバッグしようとしたところ、プロセスにattachできずにタイムアウトするという問題がありました。

Githubのissueに上げたところ

https://github.com/microsoft/debugpy/issues/771

Ubuntu 10.10以降からrootユーザー以外は子プロセス以外にはattachできなくなったそうなのでそのオプションを無効にすれば解決しました。

https://askubuntu.com/questions/41629/after-upgrade-gdb-wont-attach-to-process/41656#41656
クッキーとセッションとデータベース

## 概要
クッキーとセッションの違いをうまく説明できなかったので、クッキー、セッション、データベース、3つのデータを保存する方法の、調べたこと、自分の考えをまとめました。

##クッキー
特徴
- クッキーを使うことでPHPが作成したデータをクライアントのPCに保存して、ブラウザを閉じてから一定期間、維持することが出来る。

- 保存されたクッキーデータは、保存したサイトへの以降のアクセスでHTTPリクエスト中のクッキーヘッダに常に含まれるようになる。
- 基本的に、クッキーはユーザー側の操作に関わらず、すべてのHTTPリクエストに含まれる。
- クッキーはユーザーがブラウザの設定を変えることでブロックすることができる。

## セッション
- セッションとは、ユーザーがWebサイトにアクセスし、ページ遷移し、ブラウザを閉じるまでの期間のこと。
- セッション変数を使うことでクッキーと同じ用に一定期間ユーザーごとのデータを維持することが出来る。
- セッション変数はその期間だけ値を使うことが出来る変数のこと。
- セッション変数は、サーバーの設定で有効期限が決められている。

### クッキーとの違い
セッション変数のデータは、サーバーに保存される。
そのため、Webアプリ側に脆弱性がない限り、クライアントユーザーが簡単にデータを書き換えることができない。
セッション変数のデータは、閲覧ユーザーごとに作られ、ユーザーがWebブラウザを閉じたときに削除される。

### 使用用途
- ログイン認証の完了後、ブラウザを閉じるまでのログイン状態の維持
- 入力画面でユーザーが入力したデータの入力画面までの維持
セッション変数を保持した後、セッションIDを発行し、クライアントに送り、クッキーに保存する。

## データベース
- クッキーのように簡単に偽装することができず、恒久的にデータを保存することが出来る。
- 安全性、保存期間の長さを考えるとデータベースに保存するのが最も良いが、保存したい情報ごとにデータベーステーブルを作ることになり、労力がかかる。

## 3つの保存形式の関係性
### クッキー、セッション、データベースの特徴

||値の変更による<br>脆弱性|保存期間|データ容量|管理コスト||
|---|:---:|:---:|:---:|:---:|:---:|
|**クッキー**|大|中|小|小|クライアントサイド|
|**セッション**|中|短|小|小|サーバーサイド|
|**データベース**|小|長|大|大|サーバーサイド|

### それぞれの特徴とメリット・デメリット
||メリット|デメリット|使いみち|
|---|---|---|---|
|**クッキー**|・Webサーバーがデータを保持する必要がない<br>・有効期限内であればWebブラウザを閉じてもデータを保持できる|・書き換えが容易なため、機密性の高い情報は保持できない<br>・長期間は保存できない|・クライアントサイドで扱うデータ<br>・一時的にしか使わないデータ|
|**セッション**|・早い<br>・使い捨てるため管理がしやすい|・一定時間以上データを保持することができない<br>・ブラウザを閉じたタイミングで変数を消す必要がある|・サーバーサイドで扱うデータ<br>・一時的にしか使わないデータ|
|データベース|・サイズに制限がない<br>・恒久的にデータを保存できる|・管理するのに労力がかかる|・ユーザー登録情報などの恒久的なデータを保存する|

この特徴をもとにデータを保存するときの判断基準を簡単な図で表すと
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/440462/123f3a0a-eb24-aa2d-04b5-fc4d2998eed3.png)

一時的ならDBじゃなくて良い（セッションorクッキー）、サーバー側で処理するならセッションに置いておけばよい。ブラウザでJavaScriptで利用するならクッキーを使う

## まとめ
クッキー、セッション、データベース、全てデータを保存するという役割は同じ。
3種類のデータを保存する機能を特徴、役割についてまとめました。
扱うデータを決めたら、どの形式で保存するかを決める。
サーバー上で扱うデータなら、データベースとセッションを比較する、保存期間が長いデータならクッキーとデータベースを比較する。
勝手にクッキーとセッションは特別なものと思い込んでいて自分からわかりにくくしていました。「データを保存する機能」として考えて比較することで、イメージがしやすくなりました。
PHP本格入門が詳しく書いてあって学習しやすかったです。

参考文献
PHP本格入門上
SwiftでUIImageの画質を下げる方法【jpegData(compressionQuality:)】

SwiftでiOS開発を行う際に、必要以上に画質がいい画像の画質を下げる方法。

データベースやキャッシュのストレージの節約に役立ちます。

## 実装するコード

```swift
var sampleimage : UIImage? = UIImage(named:"sample")!
let uploadImage = self.sampleimage!.jpegData(compressionQuality: 0.5)! as NSData
```

> The quality of the resulting JPEG image, expressed as a value from 0.0 to 1.0. The value 0.0 represents the maximum compression (or lowest quality) while the value 1.0 represents the least compression (or best quality).

>結果として得られるJPEG画像の品質を、0.0～1.0の値で表します。値0.0は最大の圧縮（または最低の品質）を表し、値1.0は最小の圧縮（または最高の品質）を表します。

>https://developer.apple.com/documentation/uikit/uiimage/1624115-jpegdata より


`compressionQuality`は0.0から1.0まで設定可能です。

結構低めの数値を設定しても、それほど見た目は変わりませんので、ファイルを節約したい方はなるべく小さめの数値を設定することをおすすめします。

ちなみに戻り値は以下の通り。

> Return Value
A data object containing the JPEG data, or nil if there was a problem generating the data. This function may return nil if the image has no data or if the underlying CGImageRef contains data in an unsupported bitmap format.

> JPEG データを含むデータオブジェクト、またはデータの生成に問題があった場合は nil を返します。この関数は、イメージにデータがない場合や、基礎となる CGImageRef にサポートされていないビットマップフォーマットのデータが含まれている場合には、nil を返すことがあります。

>https://developer.apple.com/documentation/uikit/uiimage/1624115-jpegdata より


## おすすめ情報

https://wagtechblog.com/programing/swift-iphone-application-school

https://wagtechblog.com/programing/swift-textbook.html
raspberry pi 1 model bで、navit その8

#概要

raspberry pi 1 model bで、navitやってみる。
Xを、おかしくしたので、jessieをstretchにupgradeしてみる。

#設定


/etc/apt/sources.list

```
deb http://raspbian.raspberrypi.org/raspbian/ jessie main contrib non-free rpi

deb http://raspbian.raspberrypi.org/raspbian/ stretch main contrib non-free rpi

```

/etc/apt/sources.list.d/raspi.list

```
deb http://archive.raspberrypi.org/debian/ jessie main

deb http://archive.raspberrypi.org/debian/ stretch main

```

#実行

```
sudo aptitude safe-upgrade

```

以上。
C# WPF ウィンドウの最大化無効オプション

# C# WPFのウインドウのリサイズ設定

C# WPF でウィンドウの最大化を無効にしたい。
ウィンドウのパラメータで簡単にコントロールできます。

# リサイズに関するパラメータ

```
Window.ResizeMode
```

参考: https://docs.microsoft.com/ja-jp/dotnet/api/system.windows.window.resizemode?view=windowsdesktop-5.0

# パラメータごとの例


| Window.ResizeMode  | タイトルバー(該当部分)  | ボタン|
|---|---|--|
|CanResize (デフォルト)   |![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188272/91db22a1-87d6-fd37-ec31-050085839613.png)|[最小化]/[最大化]/[閉じる]|
| NoResize  | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188272/cb044bee-b51e-95f5-1fe3-089604957a02.png)  |[閉じる] <br>※最小化・最大化無効|
| CanMinimize  | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188272/24166953-e613-6435-c0f6-1d85b494d355.png)  |[最小化]/[閉じる] <br>※最大化無効|
|CanResizeWithGrip   | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188272/91db22a1-87d6-fd37-ec31-050085839613.png)  |[最小化]/[最大化]/[閉じる]  <br> ※ウィンドウ右下に resize grip 表示|

以上
終活として成果物をgitに上げることにした…

# 注意
　老害ポエムなので、大きな心を持った暇な方だけ読んでください。単なる自己満足で書いています。

# はじめに
　gitがメジャーになったのがプログラマとして現役を退いた後なので、自分の成果物をリアルタイムでコミットすることはなかった。最後に商用コードを書いたイスラエルの会社ではSubversionが使われていたし、その会社もその後にArmに買収されてしまったし…自分の周囲を見回しても同世代だとアカウントは持っているけど、空っぽって感じ。まぁ、みんな見栄で、「色々作ったけど、公開出来るようなものは無いんだよね…」とのたまう。まぁ、半分ホントで半分は学習してないんだろうな、と自分を重ねて思う…
　まぁ、そんな感じでも cloning してビルドするくらいはしているんだろうなとは思う。今はGitlabを使っている。Githubがメジャーなのは言うまでもないけど、自分がgitを習った弊社CTOが大のAnti-Microsoftなので、Githubを使わなかったのが大きな理由。表面的な動作は変わりがないし、CI/DIなんかはGitlabの方が若干先んじていたので、この辺りは今の会社でGithubのアクションの話題とかが出てもついて行ける副次効果があった。

# 動機
　zipで固めた~~クソ~~コードがゴロンと自鯖にあった。主に昔に作ったGameboy Color(GBC)やGameboy Advance(GBA)のコードだ。昨今では「富豪環境」でレトロゲーを作る人もいるし、TeamKNOxの辺境の自鯖に訪ねてきてくれて、コードの使用許諾を訊いてくれる方も居たので自鯖が消滅しても自分の存在証明の~~クソ~~コードは残しておこうと決意した。
　

# 思ひ出
　Gameboy Color用に作った代表的なものを挙げてみる。

1. [GB-PDA](https://gitlab.com/teamknox/gbcpda) 
 当時はPalm PilotなどのPDAが出始めていて似たような形状なので、「よし、GBCでやってやろうぜ！」って中学生的な思考で作られたプログラム。様々なミニプログラムのランチャー的な要素が強いけど、データの共有もやったりしてた。フレームワーク自体は当時、一緒に活動してた高専時代の友人がゴリゴリ書いてた。これを見たUKのチートツールメーカの[DATEL](https://datel.co.uk/)が「コードの一部を使わせて欲しいので、ライセンス形態を教えて欲しい。」と問い合わせがあった。当時は適当に作っていたので、「Use at your own risk」って答えた。それに加えて、「そっちも非公式(任天堂の許諾を得てない)で開発してるなら色々と話がしたいから、UKに招待してくれ。」ってダメ元で言ったら、往復JALのビジネスクラス、バーミンガムとロンドンの宿泊日程を全部アレンジして招待してくれた。多分、全部正規料金だから、二人で200万円くらいはかかっているはず。その後、自分自身はノキアに転職したので、UI設計とか色使いとか今で言う、UXに活かせた気がする。MBC3相当のカートリッジがあれば試せると思う。

2. [神経衰弱](https://gitlab.com/teamknox/gbccardgame)
　手作りおもちゃで子供を遊ばせたいと親なら誰でも思う。大抵は公園で遊ぶようなカミ飛行機や竹とんぼを作るんだろうけど、ギークのオヤジはそんなことしない、それをGBCで実現した。ゲーム自体はかなりの難易度を設定したけど、ムスメがクリアした時には感動した。これの開発は[書籍](https://www.amazon.co.jp/%E3%82%B2%E3%83%BC%E3%83%A0%E3%83%9C%E3%83%BC%E3%82%A4%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%85%A5%E9%96%80%E2%80%95%E3%82%AA%E3%83%AA%E3%82%B8%E3%83%8A%E3%83%AB%E3%82%BD%E3%83%95%E3%83%88-USB%E3%83%8F%E3%83%BC%E3%83%89%E3%82%92%E4%BD%9C%E3%82%8D%E3%81%86-%E5%A4%A7%E6%A9%8B-%E4%BF%AE/dp/4872572904/ref=sr_1_5?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&dchild=1&keywords=%E5%A4%A7%E6%A9%8B%E4%BF%AE&qid=1635381719&s=books&sr=1-5)にもしてある、法外な古本価格でびっくりしているw
　[この前の本](https://www.amazon.co.jp/gp/product/4887185928/ref=dbs_a_def_rwt_hsch_vapi_taft_p1_i2)で開発に目覚めた若妻からファンレターが来て、目黒でお会いしたのも良い思い出だ。このゲームはノーマルGameboy用の白黒だが、彼女がGameboy Color用にカラー化してくれた。その後は「愛の流刑地」の様な展開にはならなかったが…
　なお、このゲームはエミュレータでも楽しめるので、ぜひその難易度を試してみて欲しい。

3. GBDK
　これは自分が作ったものではないけど、Gameboyの開発環境として外すことは出来ないので追記する。これの作者の [Pfof. Pascal Felber](https://www.linkedin.com/in/pascal-felber/?originalSubdomain=ch)には会えたし、ローザンヌの彼の自宅にも泊めてもらった。当時はまだEPFLで助手をしてた、その余暇で開発したのだ。

# その他のコード
　現在はpythonでデータ分析遊びやメカナムホイールローバを作っているので、それらのコードをチョボチョボとコミットしている。

# おわりに
　gitを使いこなせていない証明のようなコミットスタイルですが、「お墓を生前に準備する人のほうが長生きする」こんな言葉があるように、これからも長生きして~~クソ~~コードを量産して、コミットして行きたいと思います。まぁ、ミームとなってネット上を彷徨うのかな？と思うとワクワクします。

# リソース
* [Twitter](https://twitter.com/teamknox)
Qiitaの記事を限定共有から全体公開にした時のURLの変化について


#概要
記事の公開非公開でURLが変わるとリンクを張った記事から飛べなくなって困るので検証してみる。
記事の更新、公開設定をした時のURLの違いを見てみる。

#公開前(edit)URL

- https://qiita.com/drafts/05c7df35ca7fdfc14884/edit

ブラウザを変えるとログインが必要と出るので、安心(そもそもこのURLを共有する理由がないが)
共同で編集することは、同じアカウントを使用すれば可能かもしれないが、Qiitaはそういうものじゃない。
Google docsとかScrapBoxを使うべき。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1505183/ff3b4a7d-fb08-eee9-f144-d114194931e3.png)
ちなみに一度公開した記事を編集するときもこのURLが使われる。

#限定共有のURL

- https://qiita.com/flyaway2525/private/05c7df35ca7fdfc14884

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1505183/7fb19e6c-0a21-0e4a-01e9-365511c42ea1.png)
限定共有設定にするとこういう表示が出る。
URLを知っている人しかアクセスできない。
当然公開前のeditURLとは異なる。
#限定共有を更新

- https://qiita.com/flyaway2525/private/05c7df35ca7fdfc14884

更新しても変化はない


#全体公開のURL
**一度全体公開に設定すると限定共有には戻せない**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1505183/4e9a92d9-c9f4-fac1-74b1-7146b655b9d3.png)

- https://qiita.com/flyaway2525/items/05c7df35ca7fdfc14884

URLは`private`の部分が`items`に変更されている。

#全体公開を更新
こちらも更新してもURLに変更はない

- https://qiita.com/flyaway2525/items/05c7df35ca7fdfc14884

#全体公開後は限定共有のURLでもリダイレクトされる

- https://qiita.com/flyaway2525/private/05c7df35ca7fdfc14884

このURLにアクセスすると

- https://qiita.com/flyaway2525/items/05c7df35ca7fdfc14884

このURLにリダイレクトされる

#限定共有の記事を全体公開URLでアクセス
限定共有記事のURLの`private`の部分を`items`に変更してみた結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1505183/6f5148d8-9d26-f238-6f3b-18be1ad031a9.png)
当然だけど、ちゃんと設定を変更しないと`items`(全体公開)扱いにならない。

#結論
設定を変更しても問題なく記事を見れる。
リンク切れになる心配はない。
Ubuntu20.04でpip install mysqlclientがエラーが出る場合の解決方法

# pip install mysqlclientが動かないとき
MySQLにアクセスするために使うmysqlclientですが、うまく動かないとき、

```
$ sudo apt-get install -y libmysqlclient-dev
```

そのあと、

```
$ pip install mysqlclient
```

でうまく動きました。
webView2コントロールの画面キャプチャをしたくて(非同期版)

webView2コントロールの画面キャプチャをしたくて(非同期版)

先日の「webView2コントロールの画面キャプチャ」の続きというか改良版というか
この間の記事ではwebView2のキャプチャを同期的に待って画像を取得していたのですが
今回は別スレッドで非同期実行して結果をイベント通知でもらう形に書き直しました。
マルチスレッド的になるので若干速くなるとかCPU資源を有効に活用できるという点ではいいかと思います。

ソースはこんな感じ
このプログラムを実行する前にＶＢ．ｎｅｔのプロジェクトにWebView2をインストールしておいて
フォームにWebView2コントロール、ボタン、ピクチャーボックスを一個ずつ配置してください


呼び出し元のフォーム画面

```vb
    Public Class Form1
      Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
          ' WebView2コントロール初期化
          InitializeAsync()
      End Sub
      Private Async Sub InitializeAsync()
          Await WebView2.EnsureCoreWebView2Async(Nothing)
  
          ' URLを開く
          WebView2.CoreWebView2.Navigate("https://www.yahoo.co.jp/")
      End Sub
  
      ' ClassWebView2_Captクラスをイベントを受け取る形で定義
      WithEvents classWebView2_Capt As New ClassWebView2_Capt
  
      Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
          ' webCapture開始
          classWebView2_Capt.webCapture(WebView2)
      End Sub
    
      ' classWebView2_Captでイメージが生成された際に呼ばれるイベント
      Private Sub dispWebImage(img As Image) Handles classWebView2_Capt.retImage
          Me.PictureBox1.Image = img
      End Sub
    End Class
```

webView2コントロールのキャプチャ用クラス

```vb
    Public Class ClassWebView2_Capt
      ' イメージが生成されたときに発火するイベント
      Event retImage(img As Image)
  
      ' WebView2コントロールのイメージを取得する
      Public Async Sub webCapture(WebView2 As Microsoft.Web.WebView2.WinForms.WebView2)
          ' イメージが格納されるメモリーストリーム
          Dim ms As New System.IO.MemoryStream()
  
          ' WebView2のキャプチャ（非同期実行）
          Await WebView2.CoreWebView2.CapturePreviewAsync(Microsoft.Web.WebView2.Core.CoreWebView2CapturePreviewImageFormat.Png, ms)
  
          ''非同期実行タスクを待つ
          Await Task.Run(
                 Sub()
                     ' メモリーストリームに書き込み完了するまで待つ
                     Do While ms.Length = 0
                         System.Threading.Thread.Sleep(100)
                     Loop
  
                     ' メモリーストリームに書き込み完了したら得られたイメージをretImageイベントで返す
                     RaiseEvent retImage(Image.FromStream(ms))
                 End Sub
              )
        End Sub
    End Class
```

やっていること自体は前回とあまり変わっていませんがWebView2側のイベントが終わるまで待つのにDoeventsで処理させるのではなく
別のスレッドで実行させることにより、WebView2のイベントをそちら側で勝手に処理するようになったことくらいです。

あとWebView2.CapturePreviewAsyncの終了の判定方法を変えました。
メモリーストリームにデータが書き込まれた時点でイメージが取得できたという判定方法に変えています。
イメージが取得できた場合に retImage イベントをRaiseEventしてイベントの受け取り
Form1のdispWebImage関数で結果のイメージを受け取っています。

かなり大きなイメージをキャプチャしても(9000x9000pxとか)体感的にあまり変わらないので
同期処理でも非同期でもどっちでもいい気はするのですが
昨今のマルチコアのCPUで効率的に処理をするにはこちらの方が良いのではないかと…
要はマルチスレッド版を書いてみたかっただけなのね。
インフラエンジニアとなって現場で使えるドキュメント

## 目的
インフラエンジニアになって、現場で使えるドキュメント類をまとめたリンク集
（基本的にはドキュメントと学習用のサイト)
困ったらここを見てみようというものです

## 前提
インフラ領域はドキュメントが極端に少ないです
プログラミング言語であれば、基本公式のドキュメントやリファレンスがありますが、インフラ領域はほとんどないです
あと先輩、上司曰く、「初心者が読むものではない」というものみたい
少なくとも多少の知識はないと厳しいとのことでした
（今のところ自分は結構使えるなぁという印象）

## Windows

マイクロソフトの公式ドキュメント
しかし画像はないからわかりづらいところがある

https://docs.microsoft.com/ja-jp/

モノによるけど、NECの方はハンズオン形式で進められるものもある

https://jpn.nec.com/nx7700x/support/

公式ではないもののマイクロソフトの質問フォーラム
トラブルシューティングで使える

https://social.technet.microsoft.com/Forums/ja-jp/home

### Intune

①LinkedIn<Microsoft Intune：iOS/Android 端末の管理>

https://www.linkedin.com/learning/microsoft-intune-manage-ios-android-devices-2/

②LinkedIn<Microsoft Azure：Azure Directory>

https://www.linkedin.com/learning/microsoft-azure-active-directory-6/

③LinkedIn<Microsoft Intune：Windowsの管理>

https://www.linkedin.com/learning/microsoft-intune-manage-windows-10-3/

## VMware

https://docs.vmware.com/jp/

### ハンズオンラボ

https://www.vmware.com/content/microsites/learn/ja/jphol.html

ネスト環境、かつ世界規模でアクセスされているので、結構重いとのこと
コンテナ上で実行しているAngularアプリのホットリロードを有効にする


#概要
私の[以前の記事](https://qiita.com/theG/items/54f9ee9fd403828b73d2)でAngularアプリをコンテナ上で実行できるような環境を整えたのですが、アプリのファイルを編集してもホットリロードが効かないので、変更を確認するには再ビルドする必要があるのが難点でした。
少し調べてみたら、コマンドのオプションを追加するだけで有効にできたので、共有も含めて記事にしたいと思います。

#環境
- Windows10 pro (Homeでも可)
- Visual Studio Code
- Docker version 20.10.8
- Docker Compose version v2.0.0

以下、Visual Studio Codeの拡張機能
- Docker v1.17.0
- Remote - Containers v0.202.5

#ビルド
以下のように"ng serve"のオプションに"--poll 1"を付けるだけで編集が反映されるようになりました。
あとはこのコマンドをpackage.jsonに記述するなり、docker-compose.ymlファイルに記述するなり、お好きにどうぞ。

```:bash
$ ng serve --host 0.0.0.0 --poll 1
```

#まとめ
[公式ドキュメント](https://angular.jp/cli/serve)を確認してみると、pollオプションは検知時間の設定項目のようでした。つまり、検知時間が即時だとコンテナ上で実行している場合は検知されないようです。
あまり詳しく調べた訳ではないので補足等がありましたら、コメントいただけると嬉しいです。記事も修正します。

これでコンテナ上で快適な開発環境を手に入れることができました。

#参考
- [元記事（英文）](https://newbedev.com/docker-container-doesn-t-reload-angular-app)
- [公式ドキュメント（ng serve）](https://angular.jp/cli/serve)
GitlabRunner成果物作成

GitLabRunner環境設定 https://qiita.com/Fune_TA/private/8a9049e11152a5b3f8a5)

上記の方法でRunnerでイメージを登録した後、ymlファイルをプロジェクトに追加することでパイプライン処理の設定を行うことができます。
実際のファイルでの処理を簡易にまとめます。

# .gitlab-ci.yml

```
stages:
  - make-artifact

make-artifact_job:
  type: make-artifact
  image: $CI_REGISTRY/<group_ID>/<subgroup_ID>/<project_name>:<tag>
  script:
    - source /opt/dey/3.0-r4/ccimx6qpsbc/environment-setup-cortexa9t2hf-neon-dey-linux-gnueabi
    - make clean
    - echo ${CI_COMMIT_REF_NAME} >> ver_integ.txt
    - make archive
  artifacts:
    name: "${CI_COMMIT_REF_NAME}"
    expire_in: 1 week
    paths:
      - radarupdate.tgz
      - radarupdate_all.tgz
      - install.sh

source-code:
  type: make-artifact
  image: $CI_REGISTRY/<group_ID>/<subgroup_ID>/<project_name>:<tag>
  script:
    - ./release.sh "${CI_COMMIT_REF_NAME}"
  only:
    - tags
  artifacts:
    name: "${CI_COMMIT_REF_NAME}"
    expire_in: 1 week
    paths:
      - integ_${CI_COMMIT_REF_NAME}.tar.bz2

```

## stages:
処理の段階を決めることができます。
順番に処理をしたい場合は

```
stages:
    - A
    - B
    - C
```
のように設定して順番ごとにjobに割りふることで三段階(A→B→Cの順)で処理を行うことができます。
今回はすべて並列で処理を行ったため、一つになっています。

## job:
処理の大きな枠組みとなります。
今回では
make-artifact_job
source-code
の二つでビルド成果物の作成とソースコードの取得という二つの枠組みで分けています。

## type:
stagesで定義した段階をここで設定します。

## image:
jobの実行で使用するimageを指定します。ここでは前回の登録時に設定したもの使用しています。

## script:
jobで実行する処理をここに記載します。
今回はmake-artifact_jobでプロジェクト内でビルド処理を
source-codeではプロジェクト内のファイルをまとめるスクリプトを起動しています。
## only:
jobが実行される条件を記載します。今回ソースコードは毎回必要ではなかったため、タグをつけた際のみsource-codeが処理されるようにしています。
## artifacts:
成果物の詳細を記載します。

* name:  
成果物の名前を記載します。今回はcommitIDを参照して名前をつけるようにしています。
* expire_in:  
成果物をダウンロードできる期限を記載します。今回は一週間にしています。
期限を過ぎた場合は再実行が必要になります。　　

```
WARNING: Uploading artifacts as "archive" to coordinator... failed  id=1682384872 responseStatus=524 Origin Time-out status=524 token=Wux8XQsD
WARNING: Retrying...                                context=artifacts-uploader error=invalid argument
```
* paths:  
成果物として送信するアイテムのパスを指定します。

# 成果物のダウンロード

Gitlabのプロジェクトを開き、左のバーからCI/CD>Pipelinesを開きます。
![CICD1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2106643/5a68cb80-2ba0-4b5d-7ee7-e9c9fcbadda2.png)
パイプライン処理の一覧が表示されます。成果物のダウンロードしたいcommitIDのStagesをクリックします。

![CICD.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2106643/048da985-a66e-ffe5-dc28-1b1af7569f1a.png)

Job一覧が表示されるのでダウンロードしたい成果物を選びます。

![CICD2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2106643/e0eae6d8-21f8-a0cb-7363-edf16ce778cd.png)

処理のログと詳細が表示されます。詳細のDownloadから成果物をダウンロードできます。
![CICD3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2106643/688c3b02-aa62-c4fc-9699-5e74334d7f65.png)

Commit履歴から直接指定することもできます。
![commit1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2106643/99261af0-8909-3735-e19f-dabbadb95bb0.png)
![commit2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2106643/44ec1bcd-b45c-78a9-e07f-fc3db38ec3ec.png)

Stagesを選択した後は同様の操作でダウンロードが行えます。

## 参考
GitLab CI/CD パイプライン設定リファレンス　https://gitlab-docs.creationline.com/ee/ci/yaml/
kustomize 3.2.0をインストールする方法

**本記事は以下を参考にしています。**
1. https://www.kubeflow.org/docs/distributions/ibm/deploy/deployment-process/
2. https://github.com/kubernetes-sigs/kustomize/releases/tag/v3.2.0


- **以下を実行する** [[出典]](https://www.kubeflow.org/docs/distributions/ibm/deploy/deployment-process/)


``` bash:
wget https://github.com/kubernetes-sigs/kustomize/releases/download/v3.2.0/<distribution>
chmod +x <distribution>
mv <distribution> /usr/local/bin/kustomize
export PATH=/some/path:$PATH
```


**"\<distribution>"部分は、それぞれの環境に読み替えてください**
...つまり
**Linux用**
https://github.com/kubernetes-sigs/kustomize/releases/download/v3.2.0/kustomize_3.2.0_linux_amd64

``` bash:
wget https://github.com/kubernetes-sigs/kustomize/releases/download/v3.2.0/kustomize_3.2.0_linux_amd64
chmod +x kustomize_3.2.0_linux_amd64
sudo mv kustomize_3.2.0_linux_amd64 /usr/local/bin/kustomize
export PATH=/some/path:$PATH
```

**Mac OS用**
https://github.com/kubernetes-sigs/kustomize/releases/download/v3.2.0/kustomize_3.2.0_darwin_amd64

``` bash:
wget https://github.com/kubernetes-sigs/kustomize/releases/download/v3.2.0/kustomize_3.2.0_darwin_amd64
chmod +x kustomize_3.2.0_darwin_amd64
mv kustomize_3.2.0_darwin_amd64 /usr/local/bin/kustomize
export PATH=/some/path:$PATH
```

- **バージョンの確認**

```bash
kustomize version
```

以上
VSCode & UE5 でゲームコードのコンパイルがトリガーされなくなった

# VSCodeでビルドした後、UE5に変更が自動で反映されなくなった

C++で拡張したオブジェクトに変更を加えてから、挙動を確認しようとVSCodeでビルドするも、変更が反映されない事態に

## 環境
| ソフトウェア | バージョン | 
|:-----------|------------:|
| MacOS       | 10.15.7        | 
| UnrealEngine | 5.0.0 |
| Visual Studio Code |  1.61.2 |
| Xcode | 12.4 |
| .NET SDK |5.0.402|

## 症状

これが出なくなった
![ゲームコードをコンパイル中.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/601616/b05ecfe9-2ead-2baf-ad04-1e0b34abfb3d.png)
XCodeからビルドを行うと、自動的にUEエディタに変更が反映される

## 原因

VSCodeでビルドを行う際に選ぶ、ビルドタスクが間違っていた

## 解決
正しいタスクを選ぶことで解決しました
![Editor Mac Dev Build.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/601616/a34d6435-a818-a169-60ca-976b142f196b.png)
詳細は公式ドキュメントのこちらに

https://docs.unrealengine.com/4.26/ja/ProductionPipelines/DevelopmentSetup/CompilingProjects/

## さいごに
公式読みまs(ry
【JavaScript】関数とオブジェクト⑬　関数コンストラクター



#はじめに

Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。

前回の記事

https://qiita.com/nao0725/items/cbea32312fe4f5f31596

#目的

* 関数とオブジェクトについての理解を深める

#本題
###1.関数コンストラクター

####使い方

`````js
//　new 演算子で定義する
//  基本的に大文字で始める（このFunctionの部分を関数コンストラクターという）
// 引数は文字列で定義
// 一番最後の引数は関数宣言でいうところのボディ部分
// 関数fn1に入れる
const fn1 = new Function("a", "b", "return a + b");
// 値を入れて結果を出力する
const result = fn1(1,2);
// 結果は3と出力される
console.log(result);

// 関数宣言に直すと以下の通りとなる
function fn2(a,b){
  return a + b ;
}
// ここで返ってくるのは関数コンストラクタから作成されたインスタンスになる
// instanceofで確認すると以下の通りとなる
console.log(fn2 instanceof Function)
// この結果がtrueで返ってくるので、fn2もFunctionコンストラクタから生成されたものであると確認できる
`````

####例1

関数コンストラクターで関数を作成したときに注意すべきこと

new Functionで関数を生成する作業は内部的にグローバルスコープで行われるため、外部変数が引数内に含まれていた場合は、スクリプトスコープもしくはグローバルスコープに変数を探しに行くことになる。
どういうことか？？？？

````js
// dという外部変数を定義
// 関数スコープ内にfn1を持ってきて、
// 変数dを定義
function fn(){
  let d = 1;
  const fn1 = new Function("a", "b", "return a + b" * d);
  // 普通ならここで1が入るが、エラーになってしまう
}
`````

`````js
// 関数スコープ外にdを別に定義
let d = 0;
function fn(){
  let d = 1;
  const fn1 = new Function("a", "b", "return a * b * d");
  // fn()にfn1の値を戻す
  return fn1;
}
// fn()の値(fn1の値)をfに入れる
const f = fn();
const result = f(1,2);
// 実行結果は0となる
console.log(result);
// なぜそうなるのか
// a=1, b=2 d=0 が代入されている
// つまり、関数スコープ内の1ではなく、スクリプトスコープの0が使われている
`````


####例2

コンストラクターで作ってきたのと少し違う

`````js
// 関数宣言と関数コンストラクターを定義
const obj = new function(){
  this.a = 0;
}
const fn3 = new Function("return;");
// それぞれfn3とobjをコンソールで確認してみると
console.log(obj, fn3);
// objは無名関数で書かれているので、オブジェクトリテラルで表示される
// fn3はnew Functionはあくまで関数を作成するためのものなのでfn3も関数となる
`````

どのようにすれば関数からインスタンス化されたオブジェクトとなるのか

````js
const obj = new function(){
  this.a = 0;
}
// 引数にそのままthis.a = 0;を代入する
const fn3 = new Function("this.a = 0");
// fn3を更にnew(インスタンス化)する
const obj3 = new fn3();
// {a: 0} {a: 0}と出力される
console.log(obj, obj3);
`````

関数宣言が基本的に使われる

今日はここまで！

#参考にさせて頂いた記事

* [【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)
PAN とは

## 勉強前イメージ

パン？？？

## 調査

### PAN とは

Personal Area Network の略で、個人が使用する機器同士を接続するためのネットワーク範囲のことです。
個人が所有・利用する機器間を結ぶ通信ネットワークのことで、赤外線やBluetoothなどが使われる。
大体PANの構成距離は3mくらいまでになります。
有線の場合はUSBやFireWireなどが使用されます。
有線と区別するために無線を用いたPANを特にWPAN(Wireless Personal Area Network)と呼ぶことも多いです。

### LANとの違いは？

そもそもLANとかWANという言葉があるが、
`PAN < LAN < MAN < WAN` の順になり、
Personal < Local < Metropolitan < Wide という意味になります。
なので、PANはLANより狭い領域のネットワークになります。

### PANが使われている箇所は？

Bluetoothはもちろんのこと、三菱電機やフィリップスなどの家電メーカーで標準化をすすめる `ZigBee` などがある。
Bluetoothより電力消費が少ない、超低消費電力で電池を変えずに数年持つようなものになります。

## 勉強後イメージ

LANとWANしか知らなかったけど、PANとMANがあるのね・・・・
確かに家電とかはもうちょっと狭い領域ね。
MANも今度調べてみよう

## 参考

- [PAN 【Personal Area Network】 パーソナルエリアネットワーク / WPAN](https://e-words.jp/w/PAN.html)
- [【絵でわかるキーワード】WPAN(だぶりゅーぱん)](https://ascii.jp/elem/000/000/339/339767/)
今さら聞けない、OTPって何？

#はじめに

皆さん、こんにちは。
[GetOTP](https://otp.dev/)というワンタイムパスワードを簡単にできちゃうAPIサービスを運営している[ラロカラボ](https://lalokalabs.co/)のイクバルです。

このあいだ、皆さんにGetOTPを発表する機会があったのだが、冒頭で「OTP」(オーティーピーと言う) と言ったら、「因みにOTPって何だ？」という質問がありました。

近年、スマホにアプリのインストールときや、どっかのウェブサービスにログインする際でもOTP認証が必須になってきてることから既に浸透しているのかなと思ったが、個人的にこの質問はちょっと意外だったので、OTPの簡単な説明をしたいと思います。

こちらの[ワンタイムパスワードまたはワンタイムピン(OTP)](https://otp.dev/en/blog/242/one-time-pin-or-otp/)のGetOTPのブログ記事を元に書いておきます。

https://otp.dev/en/blog/242/one-time-pin-or-otp/

#OTP（ワンタイムパスワードまたはワンタイムピン）とは何だ？

**ワンタイムパスワードまたはワンタイムピン**というのは、ランダムに作成され、1つのセッションまたはトランザクションに対してのみ有効なコードです。このワンタイムPINは通常、電話でSMSとして送信されますが、電子メールまたは電話でも送信することもできます。

と、それだけです。

##二段階認証では一般的に使用される
OTPは、セキュリティの追加レイヤーを提供するために、**二段階認証、2要素認証または2FA**でよく使用されます。このセキュリティ層は、「知っている」もの（PIN自体）だけはなく、「持っている」もの（携帯電話など）を追加することで実現されます。2つの要素にできてることから、「2要素認証」と呼ぶわけです。

##再利用に対して脆弱持ってない
OTPのPINは1回の使用またはログインに対してのみ有効であるため、通常のパスワードのように脆弱ではありません。OTPを使用してサービスにログインした場合、そのOTPは役に立たなくなり、後でそのOTPが盗まれたとしてもセキュリティの問題にはなりません。

また、一般的にOTPは一定期間しか使用できないため、使用前に誰かがあなたのOTPを知っていたとしても、そのワンタイムピンの有効時間が経過していれば、アカウントのセキュリティには影響しません。

OTPは異なるサイト間でも使用されないため、パスワードを使用する1つのサービスでアカウントが侵害された場合でも、OTPを介してログインしたアカウントは影響を受けません。

##配信の多くのチャネル（配信方法）
OTPを配信する方法はいくつかあります。物理トークンと携帯電話を使用する、最も一般的でおそらく安全な2つの方法です。今は携帯電話を持つこと非常に一般的であり、ほとんどすべての携帯電話がSMSまたは電話のいずれかを対応できるため、OTPを配信するためにSMSまたは音声のいずれかを介して携帯電話を使用することは論理的なステップです。最近では、携帯電話でメールをチェックすることもできるので、OTPをメールで送信することも実行可能なオプションになりつつあります。

#まとめ

最新のスマートフォンを使用してワンタイムPINコードを配信することは、デバイスに既に精通しているエンドユーザーの両方にメリットをもたらしますが、企業にとっては、顧客に適切なデバイスを提供する必要がないため、運用コストも削減されます。

##LaLoka Labs（ラロカラボ）とは
https://lalokalabs.co
LaLoka Labsは、人々が時間とお金を節約し、人間をより幸せにするのに役立つソフトウェアを作ります。
Reactでinput type="file"にCSSを当てたい

## 概要

input type="file"にcssを当てたいが、仕様上できない
調べたところReactの場合は、useRefを用いてinputはhiddenで非表示状態とし、
CSSを当てたボタンなどから参照するのが良さそうです。
その他、いろいろ引っかかった箇所があったので、まとめました。

## 環境

React 16.8.0以上
Typescript 4.1.2

## 基本
refオブジェクトを作成します。

```react
// この場合、inputRefはReact.RefObject<HTMLInputElement>型
const inputRef = useRef<HTMLInputElement>(null);
```
Typescriptで実装する場合、useRefの返り値の型がRefObject と MutableRefObjectのどちからになります。
意図しない挙動となる場合もあるので、注意が必要です。
この記事に書いてあるように、初期値null、参照するinputの型で定義します。

https://zenn.dev/berlysia/articles/624bc1aaffda58

```react
import { useRef } from "react";

export default function App() {
  const inputRef = useRef<HTMLInputElement>(null);

  const onClickButton = () => {
    inputRef.current?.click();
  };

  return (
    <div>
      <input type="file" ref={inputRef} hidden />
      <br />
      <button onClick={onClickButton}>ボタン</button>　 //ここのbuttonをデザインしてもらえれば・・・
    </div>
  );
}
```
・ 先ほど定義したinputRefをinputに結びつけます。
・ ButtonをClickしたときの関数、onClickButtonを定義します。
最低限これだけやれば、ボタンを押下時にファイルを開くダイアログが表示されているはずです。
あとは、buttonにコンポーネントライブラリを使ったり、自力でcssを書いたりしてもらえればいいと思います。

## その他

選択したファイル名を表示するコンポーネントを作ってみました。（ファイルは複数選択可能）
・chakra-uiを使用しています。
・event.target.filesで読み込んだファイルは、FileList型のオブジェクトになっているので、mapは使えません。
　=> Array.fromでFile型の配列にするか、for文で頑張るしかないようです。

https://developer.mozilla.org/ja/docs/Web/API/FileList

https://zenn.dev/tokiya_horikawa/articles/8270949e4f027fce4d66

```react
import React, { useRef, useState } from "react";
import { IconButton } from "@chakra-ui/react";
import { AttachmentIcon } from "@chakra-ui/icons";

const InputFileButton = () => {
  const inputRef = useRef<HTMLInputElement>(null);
  const [images, setImages] = useState<File[]>([]);

  const onButtonClick = () => {
    inputRef.current?.click();
  };

  const onChangeImage = (event: React.ChangeEvent<HTMLInputElement>) => {
    const inputImage = event.target.files; // inputImageは、この時点でFileList | null
    if (inputImage != null) {
      const inputArray = Array.from(inputImage);
      setImages(inputArray);
    }
  };

  return (
    <>
      <input
        type="file"
        ref={inputRef}
        accept="image/*"
        hidden
        onChange={onChangeImage}
        multiple
      />
      <IconButton
        aria-label="Input-image"
        icon={<AttachmentIcon />}
        onClick={onButtonClick}
      />
      {images?.map((image) => (
        <p>{image.name}</p>
      ))}
    </>
  );
};

export default InputFileButton;
```

初めて記事を書いてみました。
間違っている箇所、改善する点あれば、コメントよろしくお願いします。
Subscriptとは

SubScript
--
Swiftでよく見るsubscriptとはいったいなんだろう？と思ったので調べてみた。




Subscriptは定数やEnum,クラス、構造体などにアクセスすると 配列で辞書型でデータを取得したようにデータを隠すために使用される。
日本語で言うと添字になる。配列の要素にそれぞれ割り振られた番号のこと。

例コード

```swift
 class Fish {

  var fishNames = [String]()  
　　　　init() {
 fishNames = []
}
   subscript(index: Int) -> String {
        get {
            return fishNames[index]
        }
        set(name) {
            fishNames.insert(name, atIndex: index)
        }
    }
}
```

要は、getterとsetterの仕組みになっている。開発者が添字にアクセスすることでsubscriptの引数にその数字が入る。
辞書型でも使えるのでInt型ではなくString型でも大丈夫。

```swift
class Fish {
	subscript( s : String  ) -> String {
		return "美味しい, \(s)!"
	}
}

var f = Fish()
print( f[ "🐠" ] )美味しい🐠
````
よく使用するディレクトリへの移動のコマンド化

例えば,よく使用する作業ディレクトリ`~/aaa/bbb/ccc`と`~/ddd/eee/fff`の２つがある場合

以下のようなコマンドを作成しておくと便利です.`~./bashrc`に以下を追加し`source ~/.bashrc`で設定を適用させます.

```bash:~/.bashrc
function cd1 () {
  cd ~/aaa/bbb/ccc
}

function cd2 () {
  cd ~/ddd/eee/fff
}
```

すると
`~/aaa/bbb/ccc`への移動は`cd1`
`~/ddd/eee/fff`への移動は`cd2`
で行うことができます.

以上,ご参考になれば幸いです.