OmniAICreator/Qiita-1.07M huggingface dataset:
ロングマン英英辞典の単語のURLリストの一覧を取得

<h3>ロングマン英英辞典の単語のURLリストの一覧を取得</h3>
powershellを利用してロングマン英英辞典のサイトから単語URLの一覧を抽出する
ためのPGMを作成し、ロングマン英英辞典のサイト上の一つ一つの単語のURLのリストを作成しました。

githubURL: https://github.com/NanjoMiyako/LongManE-EDictExtractPWShell

結果ファイルURL:https://github.com/NanjoMiyako/LongManE-EDictExtractPWShell/tree/main/resultData/URLList2.txt

<hr>
参考にしたサイト

<a href="https://www.ldoceonline.com/jp/browse/english/">辞書検索 | ロングマン現代英英辞典</a>
<a href="https://webzarashi.hatenablog.com/entry/sakura-regexp-4-escape"></＜サクラエディタ＞エスケープ文字　～特殊文字を普通の文字として認識させたい～＜正規表現＞ - WEB-zarashi　～サクラエディタときどき雨～a>
<a href="https://www.nishishi.com/blog/2008/08/regular_express.html">不要な行末空白やコメント文字列を一括削除する正規表現 - Sakura scope</a>
<a href="https://webzarashi.hatenablog.com/entry/sakura-regexp-5-deny">＜サクラエディタ＞否定、含まない～文字列を含まない行の抽出～＜正規表現＞ - WEB-zarashi　～サクラエディタときどき雨～</a>
<a href="https://win.just4fun.biz/?PowerShell/wget%E3%82%84curl%E3%81%AE%E3%82%88%E3%81%86%E3%81%AB%E3%82%A6%E3%82%A7%E3%83%96%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B">PowerShell/wgetやcurlのようにウェブページを取得する - Windowsと暮らす</a>
<a href="https://win.just4fun.biz/?PowerShell/%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%EF%BC%91%E8%A1%8C%E3%81%9A%E3%81%A4%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%82%80%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%82%B3%E3%83%BC%E3%83%89">PowerShell/テキストファイルを１行ずつ読み込むサンプルコード - Windowsと暮らす</a>
<a href="https://bayashita.com/p/entry/show/137">文字列を検索し最初に一致した場所を取得する方法[PowerShell] : バヤシタ</a>
<a href="https://bayashita.com/p/entry/show/148">配列内の値を検索する方法[PowerShell] : バヤシタ</a>
<a href="https://k-side.hatenablog.jp/entry/2014/04/23/204543">Get-Contentで文字コードを指定してファイルを読み込む - えぢた 2.2 @k_zoar</a>
<a href="https://win.just4fun.biz/?PowerShell/%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E5%86%85%E3%81%AE%E6%96%87%E5%AD%97%E5%88%97%E3%82%92%E7%BD%AE%E6%8F%9B%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%E3%83%BBreplace%2C+creplace">PowerShell/テキストファイル内の文字列を置換する方法・replace, creplace - Windowsと暮らす</a>
<a href="https://qiita.com/takamon9/items/5c3e43ebd2f78403d976">PowerShellでファイル名をリスト化する - Qiita</a>

<hr>
抽出手順

1.ロングマン英英辞典の適当な単語一覧のヘッドページ
(ex:https://www.ldoceonline.com/jp/browse/english/)を
ファイルに保存し、github上のtip1.txtファイルに従ってサクラエディタ
から置換を繰り返して、大元の単語一覧のURLリスト一覧a1を抽出します。

2.抽出した単語一覧URLリストa1からSaveWebPage1.ps1のPGMを
実行し、さらに大まかに分割した単語一覧に該当するhtmlのページをすべて、ファイルに保存します

3.ExtractWebPage1.ps1を実行し、2で保存したファイルにそれぞれから、さらに細かく分類した単語についてのURLのリスト一覧a2を抽出します

4.SaveWebPage2.ps1のPGMを実行し、a2のリンクに該当するhtmlファイルのページをすべて保存します

5.ExtractWebPage2.ps1を実行し、4で保存したファイルの一つ一つから一個の単語に相当するURLのリスト一覧a3を抽出します。

<hr>
データベースとは？その役割や種類まとめ

データベースが一体どんなものであるのか？
初心者にも分かりやすく解説。

##データベースとは？
データベースとは、簡単にいえば「**情報の集合体**」。
必要な情報を取り出したり、平均値を算出してみたり、いろいろな活躍をしてくれる。

例えば、以下のような情報は、データベースで活用されることが多い。

+ 銀行の個人情報
+ 顧客の名前や連絡先
+ ゲームユーザーのIDやパスワード

など、幅広い情報が、データベースに登録されている。

###データベースの種類
実はデータベースといっても、以下のようにいくつかの種類が存在する。

+ 階層型データベース
+ XMLデータベース
+ リレーショナルデータベース
+ NOSQLデータベース
+ オブジェクト指向データベース

など。
それぞれ簡単な特徴を紹介します。

###階層型データベース
親データと子データの関係から成り立つデータベース。
例えば、会社などの組織図が当てはまる。

###XMLデータベース
情報をXML形式で管理するデータベース。
※XML形式＝機械に情報を伝えるための言語。

###リレーショナルデータベース
リレーショナルデータベース(RDB)は、SQL言語を用いて扱う、現在主流のデータベース。
詳細は後述します。


###NOSQLデータベース
リレーショナルデータベースでは管理しにくいデータを扱うためのデータベース。
比較的、データの整合性に対してゆるいが、機能はそこまで多くない。

大量のデータを、高速処理できるのが強み。

###オブジェクト指向データベース
オブジェクト形式で扱うデーターベース。
関連性のあるデータや処理方法を、オブジェクト(箱)に格納する。

##主流のデータベース
先ほど紹介したように、主流のデータベースは、リレーショナルデータベース(RDB)になる。
Relationalという名前の通り、各データ間には何かしらの繋がりが存在する。

表自体をテーブルと呼び、テーブル同士で関係を定めたり、複数のテーブルから新しい表を作ったりできる。

###リレーショナルデータベースの操作
リレーショナルデータベースを扱うには、SQL文の知識が必要。
SQLの基本操作は、以下の通り。

+ 検索
+ 登録
+ 更新
+ 削除

もちろん他にも機能はあるが、基本操作は上記4つ。

データ検索をはじめ、新しく登録したり更新したり、削除することも可能！

##データベース管理システム(DBMS)
リレーショナルデータベースを扱うには、SQL文だけでなく、管理システムを使う必要がある。

以下が、主な管理用のソフトウェア。

+ oracle
+ SQL server
+ DB2
+ postgreSQL
+ MySQL
+ FireBird

など。

##まとめ
以上が、データベースに関する簡単なまとめ。
UI？UX？

#UIってなに
* 「User Interface（ユーザーインターフェース）」の略
Interface＝「境界面」「接点」。

WEBサイトで例えると、フォント、画像やボタンなど、ユーザーの目に触れたりユーザーが触ったりする「目に見える部分」のことです。
<br>**UXに内包される分野の一つ**になります。




#UXってなに
* 「User Experience（ユーザーエクスペリエンス）」の略で、「ユーザーの体験」を意味する。
Experience=「経験」。
<br>引用記事URL（英文）
<br>https://www.nngroup.com/articles/definition-user-experience/<br>

>「ユーザーエクスペリエンス」には、エンドユーザーと企業、サービス、製品とのやり取りのあらゆる側面が含まれます。
>模範的なユーザーエクスペリエンスの最初の要件は、煩わしさ（わずらわしさ）なしに、顧客の正確なニーズを満たすことです。次は、所有する喜びである製品を生み出すシンプルさとエレガンスです。
真のユーザーエクスペリエンスは、顧客が望むものを提供したり、チェックリスト機能を提供したりするだけではありません。
企業の製品で高品質のユーザーエクスペリエンスを実現するには、エンジニアリング、マーケティング、グラフィカルおよび工業デザイン、インターフェイスデザインなど、複数の分野のサービスをシームレスに統合する必要があります。

「そのモノやサービスを使うことでどんなことを感じるか？」ということです。WEB業界でよく使用されていますが、ユーザーが存在するサービスを考える上で必要な概念なのでどんな業界でも存在しています。<br>　ユーザーがスムーズに目的を果たせるような体験にするために情報やデザイン（UI含む）、導線を作り込むことを**UXデザイン**と呼びます。
##UXを取り入れる必要があるのはなぜか
###「価値」を決めるのは受けて側
製品やサービスの価値は提供者が一方的に決められるものではありません。受け手の環境や状態などによって価値の大きさや有無は大きく変化します。ですからどんなに良い製品やサービスを作って提供したとしても、それにお金を払う価値があるか否かを判断するのは購入する側なのです。
###価値に影響を与える「体験」
受け手が商品やサービスの価値を最大限に認識するためには、その「体験」をデザインする必要があります。
　どんなに優良なサービスや商品でも、購入するまでの手順が面倒だったりサービスを受けるまでに多くの時間を費やしたりするならばユーザの中での「価値」は下がってしまうことでしょう。そうしたことにならないようターゲットとするユーザの経験、環境、目的などを考慮にいれてUXを作ることは、「価値」を高めることと直結していて必要不可欠なのです。




##ユーザビリティとの違い
「Usability（ユーザビリティ）」＝「使い勝手のよさ」。
ECサイトを例に挙げると、検索窓や買い物カゴアイコンのデザインや位置をUI、ECサイト全体の使いやすさをユーザビリティ。ECサイトにアクセスし、商品を検索・比較・購入・受取るまでの一連の流れがUXとなります。
引用記事URL（英文）<br>
https://www.nngroup.com/articles/definition-user-experience/<br>
>また、UXとユーザビリティを区別する必要があります。ユーザビリティの定義によれば、これはUIの品質属性であり、システムが習得しやすく、使いやすく、快適かなどをカバーします。繰り返しになりますが、これは非常に重要であり、全体的なユーザーエクスペリエンスはさらに広い概念です。

<br><br>//参照記事
「UXを企業戦略に取り入れる意味とは」
URL:https://www.concentinc.jp/design_research/2017/11/uxstratusa2017/
<br>The Definition of User Experience (UX)
URL:https://www.nngroup.com/articles/definition-user-experience/
AngularでJestを用いたスナップショットテストをCIで回してみる(後編)

# この記事は？
以下の記事の後編です。
https://qiita.com/art_526/items/860227764d8701f27610

この記事では、GithubActionsを使用してJestのスナップショットテストをCIで回していく手順を紹介します。
(筆者も初めてGithubActions使ったので、内容はほぼメモです)

# 対象の読者は？
- GithubActionsが初めての方

# CIを構築する
本記事では、GithubActionsを用いてCIを構築します
## GithubActionsとは
以下が公式ドキュメントです。
https://docs.github.com/ja/actions

> GitHub Actionsを使用すると、ワールドクラスのCI / CDですべてのソフトウェアワークフローを簡単に自動化できます。 GitHubから直接コードをビルド、テスト、デプロイでき、コードレビュー、ブランチ管理、問題のトリアージを希望どおりに機能させます。

GithubActionsはGithubが提供しているCI/CDのワークフローツールです。
なんとパブリックリポジトリなら無料で使用することが出来ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160148/a321a14d-2c74-afb3-5973-c5514a58dd07.png)

外部サービスを使用することなく、Github上で完結するのは凄く便利ですね👀

## ワークフローを作成する
### 必要な情報の前準備
GithubActionsのワークフローに関する用語は以下のドキュメントを参照してください
https://docs.github.com/ja/actions/learn-github-actions/introduction-to-github-actions

ワークフローを作成するに当たり、以下の設計を行う必要があります。

- イベントトリガーはどのタイミングか？
- CIを回す環境はどこか？
- Jestのテストを回すために必要な環境はどう整えるか？

今回はミニマムな要件で十分なため、以下のように設定します。

- イベントトリガーはどのタイミングで検知するか
    - pushタイミング
- CIを回す環境はどこか
    - ubuntu(GithubActionsの初期値)
- Jestのテストを回すために必要な環境はどう整えるか
    - node環境のセットアップを行うコミュニティアクションを利用する

準備は出来ましたので、実際にGithub上に設定していきましょう。

### ワークフローを定義する
個人のGithubレポジトリを開き、Actionsをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160148/c7e40569-0e04-1ed1-af77-bb880bbf0cd6.png)

GithubActionsでは様々な初期テンプレートを用意しています。
今回は学習も兼ねて初期テンプレートは使わずに、自分で内容を定義していきます。
set up a workflow your selfをクリックします。

GithubActionsではyamlファイルを用いてworkflowの処理を定義することが出来ます。
先ほど要件定義した内容を反映させてcommitします。

```main.yaml
name: jest-snapshot-test-actions
on: [push] #イベントトリガータイミング
jobs:
  run-test:
    runs-on: ubuntu-latest #CIを回す環境
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2.1.4 #nodeの環境をセットアップ
      - run: npm install
      - run: npm test
```

commitが成功すると${repository_name}/.github/workflows/配下にワークフローを定義したmain.yamlファイルが作成されます。
これでCIの構築が完了です。

### CIを確認する
再度、Actionsを開いてみるとjest-snapshot-test-actionsというワークフローが作成されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160148/7828db7c-be5d-d4a6-9917-2752847cda6f.png)

ワークフローのジョブ名をクリックし、中身を確認して見ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160148/e8a493be-081a-3652-5b85-20df559336a9.png)

意図通り、対象のテストが回っています🎉
GithubActionsを使用すると、外部のサービスを利用せずにCIを構築することが出来るので凄く便利です。

### 試しにスナップショットテストを落としてみる
前編で作成したスナップショットテストの対象ファイルを以下のように変更します。

```
<!--fail versionを追加-->
<h2>snap shot test!!! fail version!!!</h2>
```

この状態でプッシュして見て動作を再度確認して見ましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160148/89cd09ff-6b00-5ece-4aff-6cac62ea9598.png)

スナップショットの変更を検知してCIが落ちました。
これでCIの構築は完成です。

# 最後に
スナップショットをCIで構築できると
開発者としてはUTを書く範囲の選択肢が広がるためメリットとしてかなり高いと感じています。
今回はスナップショットテストの学習として使用しましたが
実際にプロダクトに導入する機会があればまた記事にします。

# 参考
- https://github.co.jp/features/actions
asyncData 使う時、使わない時のコード比較【おまけ】

この記事は
[Nuxt.js × Netlify × MicroCMSでJamstackブログを公開しよう【完全図解】](https://qiita.com/mamezou_yuki/items/0e7aeeac2d8e582aa93b)のおまけです。

Axiosで記事を取得したのですが、他の記述もできます。
参考までに記載しておきますのでお試しください。

## パターンA
```news.vue
<script>
import axios from "axios";
export default {
data() {
    return {
      news: null
    };
  },
  methods: {
    fetchNews() {
      axios
        .get("https://あなたのURL/api/v1/news?limit=60", {
          headers: { "X-API-KEY": "あなたのAPIキー" }
        })
        .then(res => {
          // console.log(res.data);
          this.news = res.data.contents;
        })
        .catch(e => {
          console.log(e);
        });
    }
  },
  mounted() {
    this.fetchNews();
  }
};
</script>
```

##パターンB

```blog.vue
<script>
import axios from "axios";
export default {
  async asyncData() {
    const { data } = await axios.get(
      "https://あなたのドメインID.microcms.io/api/v1/blog",
      {
        headers: { "X-API-KEY": "あなたのAPIキー" }
      }
    );
    return data;
  }
};
</script>
```

Bの方がすっきりかけますね。ただし、`this`を使えない、データのアクセス向きで格納向きではないなどがありますので、気になった方は調べてみてください。
Nuxt.js をGitHubで管理して始める方法

こんにちは、まめぞうです。

この記事は[Nuxt.js × Netlify × MicroCMSでJamstafkブログを公開しよう【完全図解】](https://qiita.com/mamezou_yuki/items/0e7aeeac2d8e582aa93b)のGitHubで連携する用のNuxt.jsを始める方法について解説した記事です。

# 事前準備
- GitHub とパソコンの連携
- npm など環境構築

# Nuxtプロジェクトの作成
以下コマンドを入力します。

```
npx create-nuxt-app [プロジェクト名]
```
するといくつか質問されます。

```
?Project name:
→EnterでOK

?Programming language:
→JavaScriptかTypeScriptを選択してEnter

? Package manager: 
→今回は Npmを選択しました。

? UI framework: 
→見た目を整えるフレームワークのことです。Noneで進めます。

? Nuxt.js modules: 
→後で入れるので一旦はなしで大丈夫です。

? Linting tools:
→お好みでどーぞ

? Testing framework:
→テストフレームワークです。お好きにどーぞ！

? Rendering mode: 
→今回はSPA（シングルページアプリケーション）でいきましょう！

? Deployment target: 
→Netlifyと連携するので、Static (Static/JAMStack hosting) を選択してください。

? Development tools: 
→利用する開発ツールです。状況によって異なりますが、今回はjsconfig.jsonを選択しました。

? What is your GitHub username? 
→GitHubのユーザー名を聞かれています。

? Version control system: 
→Gitでいきましょう！

```

すると以下のように作成されました！

```

🎉  Successfully created project nuxt_netlify_microcms_sample

  To get started:

	cd nuxt_netlify_microcms_sample
	npm run dev

  To build & start for production:

	cd nuxt_netlify_microcms_sample
	npm run build
	npm run start

```

ターミナルでは作成したNuxtのプロジェクト内に移動しておきます。

```
cd [プロジェクト名]
```


# リポジトリの作成
画面右上の「＋」から **New repository**をクリック。
![nuxtstart1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351726/6bb9ddd7-c2f7-907c-3b75-eeb018476825.png)

プロジェクト名と説明を入力しましょう。下の画像の青い四角は空白のまま作成してください。
![スクリーンショット 2021-01-11 18.01.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351726/adcf489d-a32e-40be-80c8-4ee5a34fe6a1.png)


リポジトリが完成しますので、パソコンに連携しましょう。
**Code** → **HTTPS** → **コピーマーク**
![nuxtstart3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351726/91926840-e34f-5391-5e14-f7bcc1dc1992.png)

# リポジトリにNuxtプロジェクトを反映
先ほどのターミナルを開きます。

```
// gitの初期化をします。
git init

// 以下のようにアップロードします。
git add .
git commit -m "first commit"
git remote add origin [https or ssh でのリンク]
git push -u origin master（もしくはmain）

```
https または sshで接続します。以下の画像のリンクをコピーしたものを上の[https or ssh でのリンク]に貼り付けてください。
![nuxtstart5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351726/335bbc57-9178-eb55-1473-d3fa81a1b8eb.png)

そしてリロードすると以下のように反映されています！
![nuxtstart6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351726/269a85c1-f4da-1418-97f3-243cdd80252f.png)

お疲れ様でした。
[本記事](https://qiita.com/mamezou_yuki/items/0e7aeeac2d8e582aa93b)に戻りましょう！
すごく無理やり「同じ要素が連続する」配列の判定

「同じ要素が連続である」配列の判定を行いたくていろいろ試行錯誤したので、ここにメモ。

``` javascript:sample.js
let array = [12, 2, 0, 0, 0, 5];
```

↑の配列のような場合だと、「0が3回連続である」配列だから`true`を返す、というような処理を書きたい


## 試したこと①：filterメソッドでできるかいったん確認

``` javascript:sample.js
let target_array = [0, 0, 0]; 
let array = [12, 2, 0, 0, 0, 5];

const result = array.filter(item => item === target_array);
console.log(result);

// 実行結果
// []
```

「0が3回連続で続く配列」と同じ要素を取り出そうとして`filter`メソッドで試したが、配列の要素に配列を当てはめようとしているのでもちろんできない。


## 試したこと②：配列の重複を利用

２つの配列を比較して重複を取り出すことにしようってなった。

（参考記事）
https://www.dkrk-blog.net/javascript/duplicate_an_array

``` javascript:sample.js
let target_array = [0, 0, 0]; 
let array = [12, 2, 0, 0, 0, 5];

const result = array.filter(item => target_array.includes(item)).length === 3
console.log(result);

// 実行結果
// true
```

`target_array`の中の`array`と一致する要素を取得、その個数が3つあるなら`true`を返す。

「これで`true`になった！！」って思っていたけど、いろいろ配列を変えてみると思い通りの判定にならず。。。。

これは「`target_array`の要素の中で`array`の要素と一致するものは3個かどうか」っていう処理だから、目的の処理ではないって現実を突きつけられる。。。

そもそも、配列の重複で確認できるは「配列の要素」だけで、「配列の順番」は同時に確認できないだろって自分でツッコミしてました。

## ポイントにした点

配列の重複を確認しているときに、「配列に同じ要素が並んでいる」という考え方ではなく「配列の要素が連続して同じ」っていう視点に切り替えることにした。

端的に言えば、「配列の同じ要素のインデックス番号に取得してそれが連続しているかどうか」っていう処理を書こうってなった。

## 強引にインデックス番号を取得：findIndex

対象の要素のインデックス番号を取得するのは、`findIndex`メソッドだからそれを使用することにした。

ここで問題になってくるのが、`findIndex`メソッドは最初のインデックス番号しか取得できないってことだが、これについては強引に突破することにした。

``` javascript:sample.js
let array = [12, 2, 0, 0, 0, 5];

let first_zero = parent.findIndex(element => element === 0);
if (first_zero !== -1) {
	delete array[first_zero];
}
console.log(array);

let second_zero = parent.findIndex(element => element === 0);
if (second_zero !== -1) {
	delete array[second_zero];
}
console.log(array);

let third_zero = parent.findIndex(element => element === 0);
if (first_zero !== -1 && second_zero !== -1) {
	array[first_zero] = 0;
	array[second_zero] = 0;
}
console.log(array);

console.log(first_zero);
console.log(second_zero);
console.log(third_zero);

let first_condition = first_zero + 1 === second_zero
let second_condition = second_zero + 1 === third_zero

if (first_condition && second_condition) {
　console.log('成功');
} else {
　console.log('失敗');
}

// 実行結果
// [12, 2, , 0, 0, 5]
// [12, 2, 0, , 0, 5]
// [12, 2, 0, 0, 0, 5]
// 2
// 3
// 4
// 成功
```

「最初のインデックス番号しか取れないなら、取得する度に要素を空にしよう」という考えで`delete`演算子を使用。

空のまま放置はさすがにまずいから、`third_zero`を取得したタイミングで`0`を戻す処理も一緒に添える。

ここで取得してきたインデックス番号が連番していたら、「成功」が呼び出される仕組み。

## まとめ

これで一応目的の処理が問題なくできたけど、綺麗なコードではないから別の通りを考えないといけないなと思いつつある程度に煮詰まったからここにアウトプットしました。

もっと最適な処理がある場合は、コメントで教えていただけると幸いです。

最後まで読んでくれてありがとうございました。
素人がPHPのアップデートで失敗した話

##PHPのアップデートで失敗した話

Qitaの投稿練習記事です。
ずいぶん前にサポートが切れているPHPを7.1（期限切れ）→7.4にアップデートしようと、以前から調べていたのですが、ちょっと手こずったのでメモがわりに。

###環境

+ CentOS7
+ PHP 7.1

###事前にやったこと

+ ユーザーさんへのメンテナンス予告
+ 寝る前にスマホでggr
+ 本番に備えての昼寝（平日は他業務なので）

###アップデート当日

+ S3にバックアップ
+ remiのリポジトリに古いのがあったので、mvでリネームして無効にする
+ 古いini をバックアップ

###参考にしたサイト
+ 自分のポカミスなのを参考サイトが悪いようにとられるとまずいので、割愛
+ php centos　などでググった内容を参考にしました

###やっちまったこと
+ php*　で削除したので、phpMyAdminが動かなくなる

###対処した内容
+ いろいろググるもわけ分からず
+ ライブラリを追加する
+ サイト自体は問題無く動作しているのを確認して、落ち着くために寝る（ふて寝）
+ 朝になって、いくつかライブラリ入れたら治りました

####入れたライブラリ
このをインストールしてたらどれかがうまく作用して動きました
$ sudo yum install --enablerepo=remi-php74 php-fpm
$ sudo yum install --enablerepo=remi-php74 php-mbstring
$ sudo yum install --enablerepo=remi-php74 php-mysqlnd
$ sudo yum install --enablerepo=remi-php74 php-pecl-zip
$ sudo yum install --enablerepo=remi-php74 php-xml

####反省点
次回からは、どのライブラリがどこに作用しているのかよく調べてからにします。
Listについて【Java】

#目次
* [初期化① add](https://qiita.com/gusuku/items/ef7c271c6ce3bd5fd564#%E5%88%9D%E6%9C%9F%E5%8C%96-addvalue)
* [初期化② Arrays.asList](https://qiita.com/gusuku/items/ef7c271c6ce3bd5fd564#%E5%88%9D%E6%9C%9F%E5%8C%96-arraysaslistvalue)
* [現在要素数を返す size](https://qiita.com/gusuku/items/ef7c271c6ce3bd5fd564#%E7%8F%BE%E5%9C%A8%E8%A6%81%E7%B4%A0%E6%95%B0%E3%82%92%E8%BF%94%E3%81%99-size)
* [indexを指定して要素の参照 get(index)](https://qiita.com/gusuku/items/ef7c271c6ce3bd5fd564#index%E3%82%92%E6%8C%87%E5%AE%9A%E3%81%97%E3%81%A6%E8%A6%81%E7%B4%A0%E3%81%AE%E5%8F%82%E7%85%A7-getindex)
* [indexを指定して削除 remove(index)](https://qiita.com/gusuku/items/ef7c271c6ce3bd5fd564#index%E3%82%92%E6%8C%87%E5%AE%9A%E3%81%97%E3%81%A6%E5%89%8A%E9%99%A4-removeindex)
* [全ての要素を削除 clear](https://qiita.com/gusuku/items/ef7c271c6ce3bd5fd564#%E5%85%A8%E3%81%A6%E3%81%AE%E8%A6%81%E7%B4%A0%E3%82%92%E5%89%8A%E9%99%A4-clear)
* [指定した値がリストに含まれているか確認 contains(expect)](https://qiita.com/gusuku/items/ef7c271c6ce3bd5fd564#%E6%8C%87%E5%AE%9A%E3%81%97%E3%81%9F%E5%80%A4%E3%81%8C%E3%83%AA%E3%82%B9%E3%83%88%E3%81%AB%E5%90%AB%E3%81%BE%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8B%E3%81%8B%E7%A2%BA%E8%AA%8D-containsexpect)

#初期化① add(value)
```java:Main.java
package com.test;

import java.util.ArrayList;
import java.util.List;

public class Main {
    public static void main(String[] args) {
        List<String> animals = new ArrayList<>();
        animals.add("dog");
        animals.add("cat");
        animals.add("pig");
        System.out.println(animals); // [dog, cat, pig]
    }
}
```

#初期化② Arrays.asList(value...)
※固定サイズのリストになるので注意
参考：[Java - Arrays.asList の注意点](https://qiita.com/HomMarkHunt/items/c0172bd6c9801c5768d2)

```java:Main.java
package com.test;

import java.util.Arrays;
import java.util.List;

public class Main {
    public static void main(String[] args) {
        List<String> animals = Arrays.asList("dog", "cat", "pig");
        System.out.println(animals); // [dog, cat, pig]
    }
}
```

#現在要素数を返す size()
```
System.out.println(animals.size()); // 3
```

#indexを指定して要素の参照 get(index)
0→1番目の要素を参照
1→2番目の要素を参照
2→3番目の要素を参照
...etc

```
 for (int i = 0; i < animals.size(); i++) {
     System.out.print(animals.get(i) + ","); // dog,cat,pig,
 }
```

#indexを指定して削除 remove(index)
0→1番目を削除
1→2番目を削除
2→3番目を削除
...etc

```
animals.remove(1);
System.out.println(animals); // [dog, pig]
```
#全ての要素を削除 clear()
```
animals.clear();
System.out.println(animals); // []
```

#指定した値がリストに含まれているか確認 contains(expect)
```
System.out.println(animals.contains("dog")); // true
System.out.println(animals.contains("elephant")); // false
```
SecretManagerのパラメータを ECS Taskからクロスアカウントで取得する際の手順の罠

## 概要

SecretManagerのパラメータをECS Taskからクロスアカウントで取得しようとした場合、
AWSの公式手順のやり方では取得できなかったので掲載します。

## 詳細

どれだけググってもこの説明をしているページがなかったのでここに掲載します。
クロスアカウントを用いてSecretManagerからパラメータを取得しようとする場合、AWSで[公式の手順](https://aws.amazon.com/jp/premiumsupport/knowledge-center/secrets-manager-share-between-accounts/)が紹介されています。
要はIAM roleとKMS(CMK)とSecretManagerのそれぞれで権限指定が必要と言っているのですが、SecretManagerで権限を指定してもECS Task定義の環境変数経由でクロスアカウントのSecretManagerのパラメータを取得することができませんでした。

```
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AllowUseOfTheKey",
            "Effect": "Allow",
            "Action": "secretsmanager:GetSecretValue",
            "Principal" : {
              "AWS" : "arn:aws:iam::Dev_Account:user/SecretsUser"
            },
            "Resource": "*",
            "Condition": {
                "ForAnyValue:StringEquals": {
                    "secretsmanager:VersionStage": "AWSCURRENT"
                }
            }
        }
    ]
}
```


で、以下のように変えたら取得できるようになりました。

```
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AllowUseOfTheKey",
            "Effect": "Allow",
            "Action": "secretsmanager:GetSecretValue",
            "Principal" : {
              "AWS" : "arn:aws:iam::Dev_Account:role/AWSLierECSTaskRole"
            },
            "Resource": "*"
        }
    ]
}

```
`注意: ステップ 5 のポリシーでは、AWSCURRENT バージョンステージへの参照が明示的に必要です。`
と書かれているのに、これは罠ですよね・・・
続く「これは、シークレットが次のように SecretsUser によって取得される場合は常に明示的に要求する必要があります。」と言うのは、タスクはそうじゃないよということかもしれませんが・・・
手順としても割と最近掲載されたものなので、誰かの一助になればと。
【初心者向け】ターミナルでどんなコマンドでも "command not found＂になるときの対処法

# はじめに
<!--  -->
ある日の昼下がりターミナルを起動すると

```
command not found:pyenv
```

ls　もだめ、pwdもだめ。この世の終わりと思ったorz

# 結論
<!--  -->
PATHの問題というなんとも初歩的なミス。ただ、焦ると問題の切り分け、原因把握、対処法が思い浮かばないと思うので同じ事象に陥った方の参考になればと思います。



# 目次
<!-- タイトルとアンカー名を編集 -->
1. [Chapter1](#Chapter1)　zshrcの確認
1. [Chapter2](#Chapter2)　zshrcにPATHを書き込み保存
1. [参考文献](#reference)

<!-- 各チャプター -->
<a id="#Chapter1"></a>
# Chapter1

```
$ open ~/.zshrc  
  または
$ open ~/.bash_profile
```
でファイルを開く。　※これはテキストエディタが開きます。

<a id="#Chapter2"></a>
# Chapter2
以下を開いたファイルに記載する

```
export PATH=(パス):$PATH
```

私の場合は以下を記載

```
export PATH=/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:$PATH
```
最後に以下で保存

```
$ source ~/.zsh_profile
```

上記のあとターミナルを再起動したら復旧。いやー安心！

<a id="#reference"></a>
# 参考文献
- [https://alis.to/kusshi/articles/3ldp4b5Rvmrw]()
- [https://tkhs0604.hatenablog.com/entry/zsh-path-setting](URL)
gatsby-browser.jsを使ってbuildするとレイアウトが崩れるときの対処法

## 状況
gatsby developで`gatsby-browser.js`を編集して、その時点ではレイアウトに問題はなかったのですが、gatsby buildするとレイアウトが崩れました。

## 解決法
`gatsby-browser.js`の内容を`gatsby-ssr.js`にコピペしてください。そうすると、gatsby develop時にも同様にレイアウトが崩れてくれます。

build時と同じようにレイアウトが崩れてくれるので、そのレイアウト崩れを修正すると、buildしたときにレイアウトが崩れなくなります。

## 参考
https://github.com/gatsbyjs/gatsby/issues/8560#issuecomment-600257254
データベースとモデルの関係性（基礎）

<h2>データベースに関連するファイルについて</h2>
<p>目的：エラー解決のためには、モデルファイルとマイグレーションファイルの役割の違いをしっかりと理解しないといけないと思いこの記事を書きました。</p>
<p>現在：ポートフォリオ作成最終段階ですが、理解できてないことがまだまだたくさんあり、基礎理解が足りていないことに気付き、基礎を固めながら仕組みから理解しているという状況です。<p>

<h3>モデルファイルの役割</h3>
<p>データベースへのアクセス権限を示すためのファイルです。<br>記述されているモデルとアソシエーション（関連付け）は、モデル通しのデータベースへのアクセス権限を示しているということになる。
</p>
<h5>なぜ、このデータは取り出せないのか？を理解するためには、データーベースへのアクセス権限の記述されている、モデルファイルを見ると分かる。そして、理解への第一歩になる。</h5>


<h3>マイグレーションファイルの役割</h3>
<p>データの内容を保管するために必要な情報を記述しているファイルです。<br>データを受け渡しの際は、ファイルに記述されているテーブル名(クラス)・カラム名を指定します。</p>
<p>なぜ、テーブル名（クラス）を指定するのか？</p>
<ul>
 <li>カラムの条件に合わせた情報を格納したい場合、格納しているデータを取り出す際には、クラスを指定してから、カラム名を指定しなければならない。<br>日常生活に置き換えてみると、「〇〇クラスの山田さん」と言わずに、「全体の前で山田さんと叫んでいる」ような状況になってしまうからです。
　</li>
</ul>

<h2>まとめ</h2>
<h3>両方を合わせて理解する</h3>
<p>データベースからのデータの受け取りの仕組みの基礎理解ができるようになる。</p>
<ul>
 <li>モデルファイル：使用したいデータ同士でデータベースの権限を持っているのか？</li>
 <li>マイグレーションファイル：データベースに保管しているテーブルは、どの情報を保持しているのか</li>
</ul>

<p>関連性を持っていなモデルとモデル</p>
<ul>
 <li>データベース間のやりとりはできないためリレーションを作成する必要がある。</li>
 <li>データをそれぞれ取り出し、インスタンス変数を作成する必要がある。</li>
</ul>

<h5>ついでに</h5>
<p>MVCのフェーズ理解</p>
<ul>
 <li>model：データを取得、データを保管、データを取得、データを渡す</li>
 <li>controller：view・modelから情報を取得、view・modelが取得したい情報を渡す、view・modelが取得したい情報を受け取り渡す</li>
 <li>view：modelの情報をcontrollerから取得</li>
</ul>

<h5>アウトプットを公開することのメリット(感想)</h5>
<p>自分の理解は本当にあっているのか？と何度も思いながら書くことで、知識定着ができました。<br>
また、誰かの役に立つ記事になったのか分かりませんが、ブログで公開するアウトプットをすることで、深く理解でき、伝える力のトレーニングをすることもできました。<br>
読んでくださった方、ありがとうございました。<br>
間違いがありましたらご遠慮なくコメントの方よろしくお願いします。</p>
Windows Terminalでディレクトリパスを短くする

## 設定背景
普段はWindows側のGUIでファイルを管理していますが、
一部コマンドラインで操作したりしています。
普段使いしているとディレクトリ構造が深くなりがちなので
カレントディレクトリだけ表示するようにした。

```
itnewcomer@hogehoge:/home/itnewcomer/work/test/sample01$ ←長い
```

```
itnewcomer@hogehoge:sample01$ ←カレントだけにする
```

## やったこと

`~/.bashrc`のPS1の値で使われている`/w`を`/W`に変更する

### Before

```bash

if [ "$color_prompt" = yes ]; then
    PS1='${debian_chroot:+($debian_chroot)}\[\033[01;32m\]\u@\h\[\033[00m\]:\[\033[01;34m\]\W\[\033[00m\]\$ '
else
    PS1='${debian_chroot:+($debian_chroot)}\u@\h:\W\$ '
fi

```

After

```bash
if [ "$color_prompt" = yes ]; then
    #PS1='${debian_chroot:+($debian_chroot)}\[\033[01;32m\]\u@\h\[\033[00m\]:\[\033[01;34m\]\w\[\033[00m\]\$ '
    PS1='${debian_chroot:+($debian_chroot)}\[\033[01;32m\]\u@\h\[\033[00m\]:\[\033[01;34m\]\W\[\033[00m\]\$ '
else
    #PS1='${debian_chroot:+($debian_chroot)}\u@\h:\w\$ '
    PS1='${debian_chroot:+($debian_chroot)}\u@\h:\W\$ '
fi
```

完全に備忘録
Opusファイルを操作するとエクスプローラーが固まることへの解決策

Windows10のエクスプローラーで、opusファイルに対して右クリックやコピー等の操作を行おうとすると、エクスプローラーだけが固まる症状は" Web Media Extensions"をアンインストールすることで解消できます。ただし、opusファイルを再生することが出来なくなるようなので注意が必要です。

#Web Media Extensions のアンインストール
PowerShell等で以下のコマンドを実行することでアンインストールできます。

```
Get-AppxPackage *Microsoft.WebMediaExtensions* | remove-appxpackage
```

実行後pcを再起動すれば右クリック、コピー等問題なく行えます。

#既知の問題
opusファイルを再生しようとすると、
>ファイルを再生できません。このアイテムのファイル形式がサポートされていないか、ファイル拡張子が正しくないか、ファイルが破損している可能性があります。

のように表示されます。opusファイル（多分oggファイルとかも）をpc上で再生する必要がある場合は、Web Media Extensionsのアンインストールを行わないほうが良さそうです。

#さいごに

あまり良い解決策ではないように見えますが、この問題について調べてもほとんど情報が無かったので初めて投稿することにしました。他に良い解決策等あればお教えいただけると有難いです。
【ラズベリーパイ】Visual Studio Codeをインストールする 2020年

ラズベリーパイでも、node.jsを使いたいので。Visual Studio Codeが使いたい。

検索して出てくる情報が少し古かったので、軽く調べつつやってみました。

# 目次
- 環境
- debパッケージをインストールする

# 環境
Raspberry Pi 4 model Bです。

```bash
pi@raspberrypi:~ $ uname -a
Linux raspberrypi 4.19.75-v7l+ #1270 SMP Tue Sep 24 18:51:41 BST 2019 armv7l GNU/Linux
```

```
Hardware        : BCM2835
Revision        : c03112
Serial          : 10000000420661d8
Model           : Raspberry Pi 4 Model B Rev 1.2
```

# debパッケージをインストールする
Visual Studio Codeのダウンロードページから32bit arm用のdebパッケージをダウンロードします。 `.deb` の、32bit版ARM用のものですね。

- [Download Visual Studio Code - Mac, Linux, Windows](https://code.visualstudio.com/download)

![Screenshot from 2021-01-17 10-09-27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183073/e46c6376-5d8b-1a25-eb29-285cc0600aeb.png)


ダウンロードできると、 `code_1.52.1-1608136275_armhf.deb` みたいなファイル名でダウンロードできていることがわかります。

これをaptでインストールします。

```bash
$ sudo apt install ./code_1.52.1-1608136275_armhf.deb
パッケージリストを読み込んでいます... 完了
依存関係ツリーを作成しています                
状態情報を読み取っています... 完了
注意、'./code_1.52.1-1608136275_armhf.deb' の代わりに 'code' を選択します
以下のパッケージが新たにインストールされます:
  code
アップグレード: 0 個、新規インストール: 1 個、削除: 0 個、保留: 347 個。
60.7 MB 中 0 B のアーカイブを取得する必要があります。
この操作後に追加で 217 MB のディスク容量が消費されます。
取得:1 /home/pi/workspace/software/code_1.52.1-1608136275_armhf.deb code armhf 1.52.1-1608136275 [60.7 MB]
以前に未選択のパッケージ code を選択しています。
(データベースを読み込んでいます ... 現在 157990 個のファイルとディレクトリがインストールされています。)
.../code_1.52.1-1608136275_armhf.deb を展開する準備をしています ...
code (1.52.1-1608136275) を展開しています...
code (1.52.1-1608136275) を設定しています ...
mime-support (3.62) のトリガを処理しています ...
gnome-menus (3.31.4-3) のトリガを処理しています ...
shared-mime-info (1.10-1) のトリガを処理しています ...
desktop-file-utils (0.23-4) のトリガを処理しています ...
```

なんとなくうまくいってそうです。インストールを確認していきます。

```bash
$ code --version
1.52.1
ea3859d4ba2f3e577a159bc91e3074c5d85c0523
arm
```

インストール成功しました。

成功すると、メニューバー >>> アクセサリなどに、Visual Studio Codeが出てきているかと思います。
jsの関数巻き上げについて



```js
var myname = "global";
 
function func() { //1
    console.log(myname);    //undifined ///2
    var myname = "local";
    console.log(myname);    //local
}
 
func();
```

jsによって```var myname```だけが関数の先頭である1と2の間で実行される

宣言を```let```にすると

```js
let myname = "global";

function func() {
    console.log(myname);    //ReferenceError: Cannot access 'myname' before initialization
    let myname = "local";
    console.log(myname);    //エラーで実行されない
}
 
func();
```
このようになり関数の巻き上げを防ぐことが出来る。
だからES6の```let```と```const```を使って宣言するべきなのかと

> 参考
https://developer.mozilla.org/ja/docs/Glossary/Hoisting
https://analogic.jp/hoisting/
go moduleを使う


## 環境変数で有効化する
```
go env -w GO111MODULE=on
go env | grep MOD
```

## 初期化処理

```
go mod init test
```

go.modが作成されている

```go.mod 
module test

go 1.13
```

## 起動
自動的にgo getされていないパッケージがインポートされる

```
go run main.go
```
Python+NumpyのIntelコンパイラを使ったbuildではまっている人を救うかもしれない魔法の言葉（？）

# 何の話？
　Python+Numpyをソースコードからインテルコンパイラを使ったBuildに小一時間はまったので、備忘録的なメモです。分かっている人にはかなりくだらない話です。一方で初心者ははまりやすいです。日本語環境特有の問題のため、海外のサイトなどの情報を漁っても出てきません。
　ただ、Python+Numpyを使うだけであれば、PIPを使えば苦労なく終わります。とある事情でPIPが使えなかったのです。

# 環境
* CentOS 7.6
* Intel Compiler 19
* Python 3.9.1
* Numpy 1.19.5

# Buildはどうやるの？
基本的に、Pythonはconfigure+Makeで終わりです。特にはまることもありません。
一方Numpyのbuildではまりました。基本的なのやり方は、
<a href="https://software.intel.com/content/www/us/en/develop/articles/build-numpy-with-mkl-and-icc.html">インテルの公式サイト</a>
に詳しく書かれています。setup.py を使います。

# 何にはまったの？
Numpyをbuildする際に、Intel CompilerのVersionがマッチしないといったエラーがでます。
これは日本語環境特有の問題でした。

# あなたを救う魔法の言葉
**LANG=C**

```bash
LANG=C python3 setup.py config--compiler=intelem --fcompiler=intelem build_clib --compiler=intelem --fcompiler=intelem build_ext --compiler=intelem --fcompiler=intelem install 
```
# 教訓
他人が作ったプログラムをソースコードからBuildする場合は、言語環境に気をつけましょう。

おしまい。
サーバーにある画像をFileに変換して再度アップロード(コピー)する方法

# 始めに
サーバーに画像をアップロードするためにinputタグを使って以下のような感じでアップロードしていました。

```javascript:ファイルアップロード
const elInput = document.getElementById('file');
const file = elInput.files[0];

// FileインスタンスをFormDataに含めて送信
const formData = new FormData();
formData.append('file', file);
axios.request({
  method: 'post',
  url: 'api/upload',
  data: formData,
});
```

基本的にはこれで問題ないのですが、画像を含むその他の情報もまとめてコピーする機能が欲しいと言われた際に、そのままでは上手くできないなと思いました。
サーバーから取得した画像を上手くFileに変換できれば同じようにFormDataを使って送信すれば良いのですが、それを調べるのに少し時間がかかりました（そもそもできるのかも分かりませんでしたし）。
結論としてはできましたので、そのやり方を備忘録として残したいと思います。

# サーバーにある画像をFileに変換する方法
まず始めに画像をバイナリとして取得する必要があります。その次にBlobに変換し、最後Fileに変換することができます。
Fileに変換できればあとは最初に書いたアップロード方法でアップすれば終了です。

```javascript:画像をバイナリで取得し、Fileに変換する方法
// バイナリで取得する
const response = await axios.request({
  method: 'get',
  responseType: 'arraybuffer',
  url: 'image url',
});
// レスポンスヘッダーからimage/pngなどのファイル形式を受け取れるので取得する
const fileType = response.headers['content-type'];

// バイナリ -> Blob -> Fileと変換
const blob = new Blob([response.data], { type: fileType });
const file = new File([blob], 'copy filename', { type: fileType });
```

# 終わりに
以上がサーバーにある画像をFileに変換して再アップロード（コピー）する方法でした。APIから取得したデータもFileに変換できるというのはちょっと驚きでした。バイナリの扱いは結構難しいですが、しっかり学べば結構なんでもできそうだなぁと感じました。

## 参考記事
+ [url stringからFileオブジェクトを作る](https://qiita.com/github0013@github/items/734e3cdd6d91af3c3448)
+ [BlobをFileにする](http://var.blog.jp/archives/79569151.html)
+ [File APIs(Blob, BlobURL, ArrayBuffer, FileReader)](https://qiita.com/TypoScript/items/0d5b08cecf959b8b822c)
iosアプリ開発に便利なライブラリ一覧

#概要
iosアプリ開発において、簡単に便利なライブラリを紹介します。
ライブラリのインストールはcocoa podsを利用しています。

#目次
1.Alamofire 
2.AlamofireImage
3.APIkit　
4.Reachability.swift
5.ObjectMapper 
6.Cadable
7.Rswift
8.lottie-ios
9.PKHUD
10.GradientCircularProgress
11.Realm Swift
12.RxSwift
13.promiseKit
14.Bright-future
15.swiftStoreKit
16.Graphs
17.SwiftDate

#ネットワーク系
### Alamofire
アプリからネットワーク通信をしたい場合、定番なツール
swift標準機能のURLRequestを使用するより、シンプルで書きやすい
###AlamofireImage
URLを指定して、ネットワーク上の画像を取得できる
###APIkit
シンプルなコードが書ける
#ネットワーク接続監視系
###Reachability.swift
クロージャやローカル通知で接続状況の変化を受け取ることができる

#デコーダ系
###ObjectMapper
デコーダとして定番
###Cadable
swift標準のデコーダ

#リソースの定義系
###Rswift
ソースコードの文字列を始めとするリソースの定義を構造体を使って自動的にリストアップしてくれる

#アニメーション系
###lottie-ios
リッチなアニメーションを作ることができる

#インジケーター系
ソースコードの文字列を始めとするリソースの定義をstructを使って自動的にリストアップしてくれる
###PKHUD
HUDを表示できる
###GradientCircularProgress

#データベース系
###Realm Swift
データベースのコードをかんたんに書ける
アプリ自身にデータベースを持ち、サーバー側のデータベースと動機できるため、オフライン状態でもアプリを動作できる。
リレーションも使用可

#非同期処理系
###RxSwift
非同期処理のイベントを受け取ることができる
###promiseKit
シンプルに非同期処理を実現できる
###Bright-future
シンプルに非同期処理が書けるが、日本語記事が少ない

#課金系
###swiftStoreKit
簡単に課金処理が作れる

#グラフ系
###Graphs
簡単アプリでグラフを作成できる

#日付系
###SwiftDate
簡単に日付処理ができる
【Typescript + React】e.target.files[0]のObject is possibly 'null'.エラー

## 修正前
「Object is possibly 'null'.」のTypescriptエラーが発生

```typescript
const SampleFunc: FC = () => {
  const onUploadImage = React.useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      const file = e.target.files[0]; // エラー発生箇所
      // fileの処理
    },
    [],
  );

  return (
    <>
      <input type="file" onChange={onUploadImage} />
    </>
  );
};

export default SampleFunc;
```
## 修正内容

```typescript
変更  e.target -> e.currentTarget
追記  if (e.currentTarget.files !== null) {/* 処理 */}
```
## 修正後

```typescript
const SampleFunc: FC = () => {
  const onUploadImage = React.useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      if (e.currentTarget.files !== null) {
        const file = e.currentTarget.files[0];
        // fileの処理
      }
    },
    [],
  );

  return (
    <>
      <input type="file" onChange={onUploadImage} />
    </>
  );
};

export default SampleFunc;
```
## 追記
e.targetとe.currentTargetは違う場所を指しているらしい
https://qiita.com/sitilma/items/f26f5d16e455a0c68071
Node.js(express)でpostgresSQLのSSL認証が通らないことについて

#はじめに
店舗予約の受付をするLineBotの開発をするために
Node.js(express)を開発言語にしました。

PostgresSQLでDB作成をしたさいに
SSL接続が原因でエラーとバトルした件について解説します。

少しでもお役に立てれば幸いです。

誤った情報だと感じましたら教えてください！

#開発環境
(1)macOS 10.15.7
(2)Node.js 12.19.0
(3)express 4.17.1
(4)line/bot-sdk" 7.2.0
(5)Postgres 8.5.1
(6)Heroku

#エラー内容



```node:index.js

const { Client } = require('pg');

//Postgres環境変数を設定//

const connection = new Client({
  user: process.env.PG_USER,
  host: process.env.PG_HOST,
  database: process.env.PG_DATABASE,
  password: process.env.PG_PASSWORD,
  port: ****
});
connection.connect();

//クエリ文//

const userTable = {
    text:'CREATE TABLE IF NOT EXISTS users (id SERIAL NOT NULL, line_uid VARCHAR(255), display_name VARCHAR(255), timestamp VARCHAR(255), trigger SMALLINT, remedy SMALLINT, pelvis SMALLINT);'
 };

//クエリを実行するためのコード//

connection.query(userTable)
   .then(()=>{
       console.log('table users created successfully!!');
   })
   .catch(e => console.log(e));
```

テーブルができているか確認をするために

```:ターミナル
$ heroku pg:psql
```
データベースモードになったら

```:ターミナル
DATABASE=> select * from users; 
```
#####<font color="Red">ここで怒られます。 </font>orz

```:ターミナル

ERROR:  relation "users" does not exist 　//"users"との関係性がありません

LINE 1: select * from "users";
```
((((；ﾟДﾟ)))))))

#解決策

エラー文を検索しても出てくる記事が

１、select * from "users"とダブルクォーテーションで囲め！！

２、大文字と小文字が〜〜〜

など変更しても解決にならず。

どうしても分からず質問したところ
**Postgres環境変数を修正しましょう！！これで解決できます！！と素敵なアドバイスをもらいました♫**


```node:index.js
//Postgres環境変数を設定//

const connection = new Client({
  connectionString: process.env.DATABASE_URL,
  ssl: {
    rejectUnauthorized: false    //SSL接続なくても許可するよーと宣言
  }
});
connection.connect();
```

コードの変更をしたので確認します！！！

先程と同じようにデータベースモードにします。

```:ターミナル
$ heroku pg:psql
```

```:ターミナル
DATABASE=> select * from users;
```

**上記にコードを修正した結果**
↓

```:ターミナル
ファイル名::DATABASE=> select * from users;
 id | line_uid | display_name | timestamp | trigger | remedy | pelvis 
----+----------+--------------+-----------+---------+--------+--------
(0 rows)
```

おけ👍

#考察

今回のエラーはSSL接続が許可されておらず認証されないことによって起きたと考えています。

(1)最近仕様が変更になった出来事なのか？

(2)SSL接続がデフォルトに変更されたのか？

参考文献が見つからず原因がわかる方がいらっしゃいましたら、ご教授ください。
【PHP】無名関数にuse()を使用する時の注意点

# 無名関数 (クロージャ)とは
>関数名を指定せずに関数を作成できるようにするもの
>[公式](https://www.php.net/manual/ja/functions.anonymous.php)



### 無名関数



``` php:pattern1
$func = function() {
    echo 'Hello!';
}; // ←『;』をつけ忘れないように注意！

$func();
// Hello!
```

###即時関数

```php:patter2
(function() {
    echo 'Hello!';
})();
// Hello!
```

こちらも広義の意味で、**無名関数**です。PHPが()を認識したタイミングで関数が実行される仕組みとなっています


# では、こちらは？？
```php
// 世界1
$word = 'Hello!!';

$func = function() {
    // 世界2
    echo $word;
};

$func();
//PHP Notice:  Undefined variable: ･･･
```
こちらはエラーになります。一見、動いても良さそうに見えますね。
これは「世界1」と「世界2」では、参照できる変数が異なるのでエラーが出ます。

「世界1」から「世界2」に変数を渡すことできるのが、**use()**

# use()を使ってみよう！
```php
// 世界1
$word = 'Hello!!';

$func = function() use($word) {
    // 世界2
    echo $word;
};

$func();
// 'Hello!!'
```

できた！ ``use($word)``することで、「世界2」でも「世界1」の変数``$word``を参照するようになります。

# 【本題】 use()の注意点
```php
$word = 'Hello!!';

$func = function() use($word) {
    echo $word;
};

$word = 'Good Morning!';

$func();
// Hello!
```

こちらは、「Hello!」と出力されます！
use()は<font color='red'>定義された時の変数を参照する</font>ことに注意してください！

## これは回避する方法
```php
$word = 'Hello!!';

$func = function() use(&$word) { // ←参照渡しにする
    echo $word;
};

$word = 'Good Morning!';
unset($word);

$func();
// Good Morning!'
```

``$word``を参照渡しにすることで回避できます。ただ、再度``$word``に値を代入されると挙動が変わってしまうので、``unset()``で変数の割当を解除するようにしましょう。


# まとめ
無名関数を使うとスコープを小さくできるので、私はすごく好きです。

+ use()に変数を3個以上書く時
+ use()に参照渡しで変数を書く時

は使いたくないな〜って気持ちです。
【Houdini】UIサイズを調整する


ディスプレイによってはUIサイズが合わないことがあります。
そんな時はGlobal UI Scaleを調整してみましょう。

#### 1. Houdini Preferencesを開く
Edit > Preferences > General User Interface
またはcommand + ,
![スクリーンショット 2021-01-17 11.25.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1031474/6da0917b-4d0c-8b4c-e40a-5b3c3e5da6ef.png)

#### 2. Global UI Scale値を変更する
数値を直接指定することも、スライダーで変更することもできます。
プレビューでサイズを確認しながら調整できます。
![スクリーンショット 2021-01-17 12.21.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1031474/c3e25004-1d90-3c58-8956-ea82cacce17f.png)

#### 3. Houdiniを再起動する
再起動すると設定したUIサイズが反映されます。

# 動作環境
macOS Big Sur 11.1
Houdini Apprentice 18.5.408

# 参考記事
[【Houdini】UIが小さすぎたり大きすぎるときの対処方法](https://r-ngtm.hatenablog.com/entry/2017/06/15/110030)
Laravelを初めて導入した

Laravelを初めて使用して、導入に成功したのでアウトプットのために記事を投稿します。

まずは、PHPをインストールします。MacにはデフォルトでPHPが使用できるそうですが、Laravelをインストールする場合にはPHPもインストールします。

```
brew install php@7.4
```
今回は、Laravel６を使用します。
Laravel6はPHP７.2以降に対応しているため7.4をインストールします。

次にComposerをインストールします。
ComposerはPHPのパッケージを管理することができます。

```
brew install composer
```

その後、Laravelをインストール

```
composer global require "laravel/installer"
```

この後、laravelのコマンドを使用できるように設定します。(php artisan serve)など

その後、laravelのプロジェクトを起動してサーバーを立ち上げます。

```
composer create-project laravel/laravel プロジェクト名 --prefer-dist バージョン
```

```
php artisan serve
```

するとサーバーが立ち上がり、Laravelのトップページが表示されていれば成功です。

ちなみに「rails s]だとローカルホストのポート番号は3000でしたが、「php artisan serve」の場合は番号が8000になります。

以上、アウトプットのために投稿させていただきました。

初投稿でしたが、今後も少しずつ投稿していきたいと思いますので、宜しくお願いいたします。
AWS  IAM ユーザーの作成方法


APIやサービスを新しく利用するときに、チュートリアルなど読むと、
<B>「以下の JSON を参考に AWS IAM ユーザーを作成してください」</B>
と、できて当然に書かれていて、素人の私はいつも四苦八苦しております。（できて当然なことなんでしょうけど）

公式サイトに書いてあるとおりといえば、そうなんですけど、

[（公式）AWS アカウントでの IAM ユーザーの作成](https://docs.aws.amazon.com/ja_jp/IAM/latest/UserGuide/id_users_create.html)

恥ずかしながら素人の私は毎回すんなりできないので、「AWS  IAM ユーザーの作成方法」を備忘録として残します。




##条件
・ユーザーコンソールで作成
・APIなど外部からのアクセスに利用
・ポリシーをJSONで作成


##手順
AWS マネジメントコンソール にサインイン
IAM （https://console.aws.amazon.com/iam/ ) を開く。

[ユーザー] > [ユーザーを追加]
[![Image from Gyazo](https://i.gyazo.com/3cdb2229eb0cb76db17818b34913380e.png)](https://gyazo.com/3cdb2229eb0cb76db17818b34913380e)

次へ

###アクセス許可の設定

[ユーザーをグループに追加] > [グループの作成]
[![Image from Gyazo](https://i.gyazo.com/1d17f8c077f9f49f570a38d804c10993.png)](https://gyazo.com/1d17f8c077f9f49f570a38d804c10993)

###グループの作成

・グループ名を入力
・[ポリシーの作成]をクリック

[![Image from Gyazo](https://i.gyazo.com/211c96f54170158c75ed3829d681c7b0.png)](https://gyazo.com/211c96f54170158c75ed3829d681c7b0)

JSONの場合は、ここに入力
[![Image from Gyazo](https://i.gyazo.com/3307d596e997ec177f34dc2162f43d9e.png)](https://gyazo.com/3307d596e997ec177f34dc2162f43d9e)

ポリシーの確認
[![Image from Gyazo](https://i.gyazo.com/cd4f8e7eeaa78fa3a68e0771c520f4d7.png)](https://gyazo.com/cd4f8e7eeaa78fa3a68e0771c520f4d7)

[グループの作成]に戻る。
いま作ったポリシーを選択し、[グループの作成]をクリック
[![Image from Gyazo](https://i.gyazo.com/391896c448ab8c5afbac622d08042f7f.png)](https://gyazo.com/391896c448ab8c5afbac622d08042f7f)

[ユーザーをグループに追加]に戻る。
今作成したグループを選択し、
[次のステップ: タグ] をクリック
[![Image from Gyazo](https://i.gyazo.com/ec00c1740742aaa7813ab473e3f572b4.png)](https://gyazo.com/ec00c1740742aaa7813ab473e3f572b4)

必要ならば入力し、[次のステップ: 確認] をクリック
[![Image from Gyazo](https://i.gyazo.com/edc82eceec7e4de57ec42f1ec74eb429.png)](https://gyazo.com/edc82eceec7e4de57ec42f1ec74eb429)

最終確認し、よければ、[ユーザーの作成]をクリック
[![Image from Gyazo](https://i.gyazo.com/1e67faa3d896a2021597711950ca94be.png)](https://gyazo.com/1e67faa3d896a2021597711950ca94be)

ユーザーの作成が成功すれば、
アクセスキーIDと、シークレットアクセスキーが発行される。
[![Image from Gyazo](https://i.gyazo.com/be9e7054f5b6bde00dfd135a632d734e.png)](https://gyazo.com/be9e7054f5b6bde00dfd135a632d734e)

以上です。
[Rails]ぱんくずリスト機能について

# はじめに

今度はぱんくず機能を実装復習しましたのでまたすぐ実装できるように

記していきたいと思います。

実装していきます。:fire::fire:

# ぱんくず機能とは

現在どこのページにいるのかを視覚的にわかりやすくした表示できる機能ことです。

物語の「ヘンゼルとグレーテル」のなかで、ヘンゼルとグレーテルの二人が森の中で道に迷わないように歩きながら来た道の目印にぱんくずを落としていったことから"ぱんくず機能"で、gemの名前が「gretel」なのだそうです。

可愛いですね　:bread:

ちなみに、ヘンゼルは男の子の方でグレーテルは女の子です。:couple:

[[gem gretel] 詳細](https://rubygems.org/gems/gretel?locale=ja)

# 実装

「gretel」というgemを「Gemfile」に記述し

```ruby:Gemfile

gem 'gretel'

```

インストールします。

```ruby

bundle install

```

こちらを入力すると「config」ディレクトリの下に「breadcrumbs.rb」ファイルが生成されます。

```ruby

rails g gretel:install

```

## config/breadcrumbs.rb

設定ファイルを編集します。


```ruby:config/breadcrumbs.rb

# crumb "現在のページ（表示させるページにも記述）" do
# link "ぱんくずリストでの表示名", "アクセスしたいページのパス"
# parent "親要素のページ(前のページ)"


crumb :pics do
  link "Home", root_path
end

crumb :advises do 
  link "相談一覧", advises_path
  parent :pics
end

crumb :new_advise do 
  link "相談新規投稿", new_advise_path
  parent :advises
end

crumb :show_advise do 
  link "相談詳細", advise_path
  parent :advises
end

```

## viewファイル

オプションの「pretext」を使い
文字を入力するとその文字が出力されます。


「separator」を使い
`"&rsaquo;"`  を記入すると「 > 」 が出力されます。

```ruby:application.html.erb

<p><%= breadcrumbs pretext: "You are here: ",
                                      separator: "&rsaquo;" %></p>

```

1.

```ruby:pics/index.html.erb

<% breadcrumb :pics %>

```

2.

```ruby:advise/index.html.erb

<% breadcrumb :advises %>

```

このように出力されます。

![スクリーンショット 2021-01-17 11.24.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/892628/6f1a53fa-703d-bd94-59ae-500694368816.png)

3.

```ruby:advises/new.html.erb

<% breadcrumb :new_advise %>

```

このように出力されます。

![スクリーンショット 2021-01-17 11.23.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/892628/6daf7f0b-ddd6-9ca6-1692-d940d49674c8.png)

4.

```ruby:advises/show.html.erb

<% breadcrumb :show_advise, @advise %>

```

このように出力されます。

![スクリーンショット 2021-01-17 11.22.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/892628/2e2d87d0-1a69-b7cb-a564-7018be50806f.png)


表示されました！！:sparkles:


# まとめ

初めてnewファイルやshowファイルにぱんくず機能を実装したので少し時間がかかりましたが
無事実装することができました！！

自分がどこにいるかが把握できて便利ですね。

オプションも他にもあるようなのでまた違うのもしてみたいと思います。


ちなみに

こちらではこのように書かれています。
[Forum:パンくずリストの設置場所はページの上、それとも下？](https://webtan.impress.co.jp/e/2020/06/05/36210/page/1)


>グーグルのジョン・ミューラー氏にツイッターでフォロワーが質問した。

>ミューラー氏はこう答えた。

>どこに設置しても構わない。

>個人的なアドバイスをするなら、ユーザーインターフェイス要素をページに追加するときは使いやすくすることを推奨する（そうでなければ、追加する意味がないはず）。しかしながら、使いやすいかどうかはサイトによる。そしてサイトのことをいちばんよく知っているのはあなただ。


なるほどー
では本日はこれで終わりたいと思います！！

# 参考

[DoRuby:gretelでパンくずリストを作成](https://doruby.jp/users/kisuzuki/entries/gretel%E3%81%A7%E3%83%91%E3%83%B3%E3%81%8F%E3%81%9A%E3%83%AA%E3%82%B9%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90)


[virtualiment:Ruby on Railsでパンくずリストを表示するGem gretelの使い方メモ](https://www.virment.com/rails_gretel_for_breadcrumb/)

githubから詳細が見れます。
[GitHub gretel](https://github.com/kzkn/gretel)


###### omake:relaxed:



[押さえておきたいWeb知識：[Ruby on Rails] appディレクトリとconfigディレクトリを分かりやすく解説します!
](https://www.web-knowledge-info.com/wp/ruby_on_rails21/)
devise とdevise token auth を共存させるポイント


```ruby:routes.rb
Rails.application.routes.draw do
  # お客様
  devise_for :customers, controllers: {
    sessions: 'customers/sessions',
    passwords: 'customers/passwords'
  }
  resources :companies, only: [:show, :new, :create, :index] do
    # お客様登録
    devise_for :customers, controllers: {
      registrations: 'customers/registrations'
    }
  end

  namespace :api do
    scope :v1 do
      mount_devise_token_auth_for 'Customer', at: 'customer_auth', controllers: {
          registrations: 'api/v1/customers/registrations',
          passwords: 'api/v1/customers/passwords',
          sessions: 'api/v1/customers/sessions',
          confirmations: 'api/v1/customers/confirmations'
          #　ログイン /api/v1/customer_auth/sign_in
          # パスワード変更　/api/v1/customer_auth/password
          # 認証メール再送信　 /api/v1/customer_auth/confirmation
      }
    end
  end
...
```


```ruby:application_controller.rb
class ApplicationController < ActionController::Base
    protect_from_forgery with: :null_session, if: -> {request.format.json?}
end   
```

deviseを使ってその後に、devise token auth を導入したらActionController::Baseからの引用にしなければ行けなかった。
また、`include DeviseTokenAuth::Concerns::SetUserByToken`がないと、`before_action :authenticate_customer!`に対して、ヘッダーにclientとaccece-tokenを入れても、認証エラーになってしまいます。


```ruby:api/vi/application_controller.rb
module Api
    module V1
      # class ApplicationController < ActionController::API # Note: here is not ::BASE
      class ApplicationController < ActionController::Base
        include DeviseTokenAuth::Concerns::SetUserByToken
        protect_from_forgery with: :null_session
        respond_to :json
        end
      end
    end
end 
```
RGB 10進数 -> 16進数へ変換 (Elixir)

# はじめに
- [Elixir](https://elixir-lang.org/)楽しんでいますか:bangbang::bangbang::bangbang:
- [Integer.to_string/2](https://hexdocs.pm/elixir/Integer.html#to_string/2)
    - これが肝です
    - もう少し具体例をまじえて書いておきます

# 10進数 -> 16進数へ変換したい
![IMG_20210117_114641.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/583b2e16-2053-f90c-5b0c-9cb7271d55fe.jpeg)



- 一般的にはスポイトツールとでもいうのでしょうか、macOSなら`その他 > Digital Color Meter`というものです
- 10進数のRGBを16進数に変えたいことありますよね
- たとえば、[autoracex](https://autoracex.connpass.com/)というグループを立ち上げましてですね、背景色を[Elixir](https://elixir-lang.org/)色にしたいわけですよ
    - このグループのテーマ曲はもちろん[セクシャルバイオレットNo.1](https://www.youtube.com/watch?v=mCdbIwyVcuE)であります
    - You make me feel good :microphone: 

![スクリーンショット 2021-01-17 11.56.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/987f69e3-c30b-e1e3-3072-c44fa9a4d954.png)

- `IEx(Elixir's interactive shell)`を立ち上げて以下のような感じで変換できます

```elixir
iex> [74, 46, 94] |> Enum.map(&Integer.to_string(&1, 16)) |> Enum.join() |> String.downcase() |> (&("##{&1}")).()
"#4a2e5e"
```

- `(&("##{&1}")).()`なんて書き方は格好つけているだけです
    - そうです
    - 文字通り、
    - <font color="purple">$\huge{カッコ()ばっかりつけているだけです}$</font>
- 次に書いているものは、:point_up::point_up_tone2::point_up_tone3::point_up_tone4::point_up_tone5:の別な書き方です

```elixir
iex> (
...> [74, 46, 94]
...> |> Enum.map(fn i -> Integer.to_string(i, 16) end)
...> |> Enum.join()
...> |> String.downcase()
...> |> (fn s -> "#" <> s end).()
...> )
"#4a2e5e"
```

- [IO.inspect/2](https://hexdocs.pm/elixir/IO.html#inspect/2)を途中にはさみながら書くとそれぞれの関数を通ったあとの結果がみれて、ありがとナイス:flag_cn:です

```elixir
(
[74, 46, 94]
|> Enum.map(fn i -> Integer.to_string(i, 16) end)
|> IO.inspect()
|> Enum.join()
|> IO.inspect()
|> String.downcase()
|> IO.inspect()
|> (fn s -> "#" <> s end).()
)
```
(IExにそのまま貼れます)

## 使っている関数たち

- [Enum.map/2](https://hexdocs.pm/elixir/Enum.html#map/2)
- [Enum.join/2](https://hexdocs.pm/elixir/Enum.html#join/2)
- [Integer.to_string/2](https://hexdocs.pm/elixir/Integer.html#to_string/2)
- [String.down/2](https://hexdocs.pm/elixir/String.html#downcase/2)

## 使っているマクロたち
- [|>](https://hexdocs.pm/elixir/Kernel.html#%7C%3E/2)
- [&](https://hexdocs.pm/elixir/Kernel.SpecialForms.html#&/1)
- [fn](https://hexdocs.pm/elixir/Kernel.SpecialForms.html#fn/1)
- [<>](https://hexdocs.pm/elixir/Kernel.html#%3C%3E/2)

リンク先の公式ドキュメントをみていただくと`Examples`が書いてあってわかりやすいです
たとえば[Enum.map/2](https://hexdocs.pm/elixir/Enum.html#map/2)

![スクリーンショット 2021-01-17 12.18.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/8ce2c08c-7d77-cf7e-5bc7-03cd30fb60ad.png)



# Wrapping Up 🎍🎍🎍🎍🎍
- と、ここまで書いたところで、`Digital Color Meter`は16進数表示もできることに気づきました :sweat_smile: 
    - `表示 > 値を表示 > 16進`
- まあ、そんなこともあるさということで筆をおきます
- Enjoy [Elixir](https://elixir-lang.org/) :rocket::rocket::rocket:
GASの新エディタでスクリプトのプロパティを確認・設定する方法

久しぶりにGASエディタを開いたら、エディタが刷新されて見やすくなっていた。デプロイボタンもヘッダーに移動されて、デプロイ操作がしやすくなって、関数の補完も強化、あるいは単に見やすくなった？みたい。
![newUI.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/366323/7b5c7333-7bf5-fa12-537c-1cdd9cc46400.png)

が、今までGUI上で設定してきた”プロパティ"（スクリプトに設定できる環境変数)の項目がいくら探しても見つからなかったので、とりあえずコード上で確認、変更する方法をまとめてみた。（もしGUI上で設定確認できる方法あれば教えていただきたいです！)

基本的に以下の公式ドキュメントを参考にした。
[Properties Service](https://developers.google.com/apps-script/guides/properties)
[Class PropertiesService](https://developers.google.com/apps-script/reference/properties/properties-service#getScriptProperties())


#書き込み
## １つのプロパティを設定する: setProperty関数

```js

  //スクリプトプロパティを取得
  const scriptProperties = PropertiesService.getScriptProperties();

  // 一つだけ設定
  scriptProperties.setProperty('Hoge', '一個だけ設定したよ');

```

##複数のプロパティを一度に設定する: setProperties関数
```js
  //スクリプトプロパティを取得
  const scriptProperties = PropertiesService.getScriptProperties();
　
　scriptProperties.setProperties({
    'Fuga1': 'あ',
    'Fuga2': 'い',
    'Fuga3': 'う'
  });
```

#読み出し

##指定したプロパティを取得する:gerProperty関数

```js
  //スクリプトプロパティを取得
  const scriptProperties = PropertiesService.getScriptProperties();

  //保存したHogeの値を取得
  const hoge = scriptProperties.getProperty('Hoge')

  Logger.log(hoge)
```

##設定した全プロパティを取得する: getProperties関数
```js
  //スクリプトプロパティを取得
  const scriptProperties = PropertiesService.getScriptProperties();
  
  //設定した全プロパティを取得する
  const data = scriptProperties.getProperties();
  for (var key in data) {
    Logger.log('キー: %s, 値: %s', key, data[key]);
  }
```

#削除

##指定したプロパティを削除する: deleteProperty関数

```js
  //スクリプトプロパティを取得
  const scriptProperties = PropertiesService.getScriptProperties();

  //指定したプロパティHogeを削除
  const hoge = scriptProperties.deleteProperty('Hoge')
```

##設定した全プロパティを削除する: deleteAllProperties関数
```js
  //スクリプトプロパティを取得
  const scriptProperties = PropertiesService.getScriptProperties();

  //設定されている全プロパティを削除
  scriptProperties.deleteAllProperties();
```

#おわりに
実際の運用としては、アプリケーション本体のスクリプトは環境によらず同じものにしたいと思うので、エディタ上で環境変数設定用のファイルを環境ごとに作るのがいいと思います。
そこに環境変数設定用の処理を記述して、エディタ上で実行して設定していくのが良いかなと思います。