OmniAICreator/Qiita-1.07M huggingface dataset:
Python formatのあれこれ(省略Ver)

この記事ではPythonの基礎であるformatについてまとめていきます。

もっと詳しくみたいという方はこちらをみてください！

[Python formatのあれこれ](https://www.cardenema.com/?p=166)

それでは早速みていきましょう！

## formatをみてみる

```python
name = "かるでね"
print("私の名前は{}です。".format(name))   # 私の名前はかるでねです。
```

## 複数の変数を扱う

```python
name = "かるでね"
age = 21
like = "Python"

print("私の名前は{}です。年齢は{}歳です。{}が好きです。".format(name, age, like))   
# 私の名前はかるでねです。年齢は21歳です。Pythonが好きです。

print("私の名前は" + name + "です。年齢は" + age + "歳です。" + like + "が好きです。")  
# 私の名前はかるでねです。年齢は21歳です。Pythonが好きです。
```

## 番号で指定

```python
name = "かるでね"
age = 21
like = "Python"

print("私の名前は{0}です。私の名前は{0}です。私の名前は{0}です。".format(name, age, like))   
# 私の名前はかるでねです。私の名前はかるでねです。私の名前はかるでねです。

print("私の名前は{0}です。私の名前は{0}です。私の名前は{0}です。".format(name))    # ②
# 私の名前はかるでねです。私の名前はかるでねです。私の名前はかるでねです。
```

## キーワード指定

```python

name = "かるでね"
like = "Python"

print("私の名前は{name}です。{like}が好きです。".format(name=name, like=like))   
# 私の名前はかるでねです。Pythonが好きです。
```

## もっと簡単に書こう

```python

name = "かるでね"
like = "Python"

print(f"私の名前は{name}です。{like}が好きです。")   
# 私の名前はかるでねです。Pythonが好きです。
```
## 応用

### 小数点

```python
import math

pi = math.pi

print("円周率: {pi:.2f}".format(pi=pi))   # 円周率: 3.14
print("円周率: {pi:.3f}".format(pi=pi))   # 円周率: 3.142
print("円周率: {pi:.5f}".format(pi=pi))   # 円周率: 3.14159
```

### カンマ区切り

```python
prace1 = 10000000
prace2 = 100000000000000

print("prace1: {:,}".format(prace1))   # prace1: 10,000,000
print("prace2: {:,}".format(prace2))   # prace2: 100,000,000,000,000
```

### %
```python

name = "かるでね"
like = "Python"

print("私の名前は%sです。" % name)   # 私の名前はかるでねです
print("私の名前は%sです。%sが好きです。" % (name, like))   # 私の名前はかるでねです。Pythonが好きです。
```
今回は「fotmat」について確認してきました。

pythonで何か作るにしても、機械学習をやるにしても「fotmat」は使われるので今後は積極的に使用していきましょう。

[Twitter](https://twitter.com/home)でもお役立ち情報を発信しているのでぜひ！

それでは！
【Ruby】【paiza】繰り返し処理

# 繰り返し処理

* 繰り返し処理を使って、スマートに（エンジニアぽく）問題を解きましょう。

## サンプル問題

* 配列array = [10,22]
* 配列の中身の合計値を算出

### 普通の解き方

```ruby
sum = array[0] + array[1]
print sum // 32
```

### 繰り返しを使ってスマートに

```ruby
sum = 0
for number in line
 sum = sum + number
end

print sum // 32
```

## もしも

### もしも配列が3つになったらどうする？

* 繰り返しを使えば、配列の増減に勝手に対応してくれる（エンジニアぽくなる）
Fast Numerical Integration Algorithms using Quantum Computer

# Fast Numerical Integration Algorithms using Quantum Computer

数値積分は、量子アルゴリズムで高速に解けます。

過去記事でも数値積分の量子アルゴリズムを紹介しています。
[Practical numerical integration on NISQ devices のCanonical QAE (古典的なQAE)](https://qiita.com/notori48/items/8a385754da6a90bb8fea)

>ここで紹介する「積分の量子状態埋め込み」の方法は、あくまで一例(上記論文の方法)で、他にもいろいろな方法があります。
ただ、積分値を振幅に埋め込んで、振幅推定で出すという流れは変わりません。

と断っていた部分を回収します。先の論文とは少し違った埋め込みでやってみます。
参考文献は、
`S. Uno, Fast Numerical Integration Algorithms using Quantum Computer`
で、*Brassardの方法*として紹介されているものです。

# 被積分関数fを量子状態へ埋め込む
積分区間は$[0,1]$に規格化されているとします。
そして積分区間は$2^{n}$個に等しく分割されているとします。[^1]
この場合積分$S(f)$は 
$$S(f) = \frac{1}{2^{n}} \sum_{x=0}^{2^{n}-1} f(x)$$ となります。

被積分関数$f$を振幅エンコーディングで量子状態$|\psi \rangle$へ埋め込みます。[^2]
参考：[量子基底エンコーディングから振幅エンコーディングへ](https://qiita.com/notori48/items/383015c6529e8fae4e64)


$$|\psi \rangle = \sum_{x=0}^{2^{n}-1} \sqrt{\frac{1}{2^{n}}}(\sqrt{f(x)}|x\rangle_{n}|0\rangle + \sqrt{1-f(x)}|x\rangle_{n}|1\rangle)$$

ここで、$| \rangle_{n}$は$n$量子ビットであることを意味します。

見やすくするために、次のようなベクトル$|\psi_{0}\rangle,|\psi_{1}\rangle$を定義します。


$$|\psi_{0} \rangle = \frac{\sum_{x=0}^{2^{n}-1} \sqrt{\frac{1}{2^{n}}}\sqrt{f(x)}|x\rangle_{n}|0\rangle}{K_{0}}$$

$$|\psi_{1} \rangle = \frac{\sum_{x=0}^{2^{n}-1} \sqrt{\frac{1}{2^{n}}}\sqrt{1-f(x)}|x\rangle_{n}|1\rangle}{K_{1}}$$

分母$K$はただの規格化因子です。

$$K_{0} = \sqrt{\sum_{x=0}^{2^{n}-1} \frac{1}{2^{n}}f(x)} = \sqrt{S(f)}$$
$$K_{1} = \sqrt{\sum_{x=0}^{2^{n}-1} \frac{1}{2^{n}}(1-f(x))} = \sqrt{1-S(f)}$$

これを用いて、量子状態$|\psi \rangle$は、

$$|\psi \rangle = \sqrt{S(f)}|\psi_{0} \rangle + \sqrt{1-S(f)}|\psi_{1} \rangle$$

と書き直せます。$|\psi_{0} \rangle$の確率振幅に積分値の平方根が現れています。
これをQAEで推定すれば良いことになります。
参考:[QAA,Grover,QAEを勉強する。](https://qiita.com/notori48/items/2082be87eea0985b01ba)

## "Practical numerical integration..." との違い

[Practical numerical integration on NISQ devices のCanonical QAE (古典的なQAE)](https://qiita.com/notori48/items/8a385754da6a90bb8fea)
との違いはなんでしょうか？

これは「振幅エンコーディングを避けるか否か」かと思います。

"Practical numerical integration..."では、NISQ（現状の量子コンピュータ）で実行させることを目指しており、
回路が深くなる振幅エンコーディングを避ける必要がありました。
そこで、積分をモンテカルロ法に帰着させ、さらに古典的な前処理(hit /outの判定)をすることで、確率振幅が$0$ or $1$ となるようにしています。[^3]
これであれば振幅エンコーディングというほどのものは必要なくなり、状態があるかないか、即ち論理演算で量子状態を用意できます。

# 結論

- 積分を求める量子アルゴリズムを概観した。
- 量子状態を用意する方法は色々あるが、いずれも積分値を確率振幅に埋め込んでQAEで推定することは変わらない。

[^1]: ここでは台形積分をしていると捉えているわけです。しかし全く同じ方法で$2^{n}$サンプル個のモンテカルロ法にも適用できます。モンテカルロを使ったほうが、積分区間の次元$d$に無依存な計算量になるという点で優れます。
[^2]: 現状の量子コンピュータ実機では、任意関数$f(x)$を埋め込むための回路だけでも深すぎ、崩壊します。。
[^3]: とはいえ量子アルゴリズムを使う恩恵を得るには、hit/out判定も量子ゲートで実現されるべきだと思います。
CocoaPodsからSwiftyUserDefaultsを導入してみた

# はじめに
SwiftyUserDefaultsの導入について備忘録としてまとめます。

導入の動機としては、SwiftのUserDefaultの使い勝手の悪さから、代替手段を模索していたところ
最終的にこのライブラリに辿り着いきました。

# 目次
* プロジェクトへpodインストール
* 実装方法
    * インポート
    * 定義と初期化
    * 値の保存方法
    * 値の読み出し方法
* まとめ

# プロジェクトへpodインストール
まずは、CocoaPodsをお使いのMacにインストールしておきます。

```:CLI
//コマンドラインで実行
pod init
```

```:Podfile
//Podfileへ下記をコードを追加
pod 'SwiftyUserDefaults', '~> 5.0'
```
```:CLI
//コマンドラインで実行
pod install
```

# インポート
SwiftのUserDefaultを使うファイルに対し下記コードを挿入します。

```swift:.swift
import SwiftyUserDefaults
```

# 定義と初期化
まずは、プロジェクトへ定義する為のファイルを追加し、そこへ永続化したいキーを定義します。
SwiftyUserDefaultsでは定義と同時に初期値も指定できるので便利です。

```swift:DefaultsKeys.swift

import SwiftyUserDefaults

extension DefaultsKeys {
    //初期値指定なし
    var test_str_nv: DefaultsKey<String?> { .init("Test_Str_NV") }
    var test_int_nv: DefaultsKey<Int?> { .init("Test_Int_NV") }

    //初期値指定あり
    var test_str_v: DefaultsKey<String> { .init("Test_Str_V", defaultValue: "初期値をここへ指定") }
    var test_int_v: DefaultsKey<Int> { .init("Test_Int_V", defaultValue: 777) }

}
```

# 値の保存方法

```swift:read.swift
Defaults[\.test_str_nv] = "文字列を代入"
Defaults[\.test_int_nv] = 777
```

# 値の読み出し方法

```swift:write.swift
let read_str = keys[Defaults[\.test_str_nv]]
let read_int = keys[Defaults[\.test_int_nv]]
```


# まとめ
SwiftyUserDefaultsを導入することにより、
* 　Swift純正のUserDefaultよりも実装するコード量が減らすことができる
* 　定義及び初期化する部分を一つのファイル内に集約できて分散防止が可能
* 　値の保存及び読み出しが従来の様に文字列指定ではなく、変数指定になることでタイピングミスによる予期せぬ不具合を未然に防げる。
* 　メンテナンスが楽になる
となります。

# 参考
* https://github.com/sunshinejr/SwiftyUserDefaults
Jupyter Notebookの使用ブラウザを変更する

# 設定ファイルの作成

Windows10でやっています。

anaconda promptを開いて下記のコードを実行

```bash
jupyter notebook --generate-config
```

下記のようにWritingと出たら`jupyter_notebook_config.py`が作成されます。

```bash
Writing default config to: C:\Users\{ユーザー名}\.jupyter\jupyter_notebook_config.py
```

Overwriteと表示されたらすでにファイルが存在デフォルト状態に上書きされるので気を付けてください。

```bash
Overwrite default config to: C:\Users\{ユーザー名}\.jupyter\jupyter_notebook_config.py
```

# 設定ファイルの編集

作成されたファイルをテキストエディターで開き編集します。

`c.NotebookApp.browser`と検索すると編集したい箇所まで飛べます。
変更したい箇所は下記です。

```python
# c.NotebookApp.browser = ''
```


設定したいブラウザは下記の配下に入っています。

```bash
C:\Users\{ユーザー名}\AppData\Local
```

ChromeであればこのLocalは以下のGoogle > Chromeから進みexeファイルを
Vivaldiにする場合はVivaldi > Application > vivaldi.exe
までのパスを`webbrowser.register` の3つ目の引数で設定します。

```python
import webbrowser
webbrowser.register('vivaldi', None, webbrowser.GenericBrowser(r'C:\Users\{ユーザー名}\AppData\Local\Vivaldi\Application\vivaldi.exe'))
c.NotebookApp.browser = 'vivaldi'
```

この設定を保存して再起動すれば、規定のブラウザで開くことが可能です。
Rails I18nを便利に使おう

アプリケーションを色々な国に展開する場合やメッセージを日本語化する際にI18nを使用すると思います。

下記のようなパターンでは`user_name`をtranslateに渡すと、`"太郎"`が返ってきます。

```config/locales/ja.yml
ja:
  user_name: "太郎"
```


```ruby:
> I18n.t(:user_name)
=> "太郎"
```


しかし、`user`が、`太郎`だけであればこれでも良いのですが、複数いる場合がたいていのパターンだと思います。
これを少し拡張させて、どのuserでも対応できるようにしていきます。

```config/locales/ja.yml
ja:
  user_name: "%{name}"
```

```ruby:
> I18n.t(:user_name, name: "太郎")
=> "太郎"
```

```ruby:
> I18n.t(:user_name, name: "次郎")
=> "次郎"
```

上記のように変更すると、引数に名前を渡せば、どんな名前でも表示できるようになりました。
これで使いやすくなりました。

さらにtranslateではこのようなこともできます。

```config/locales/ja.yml
ja:
  user_name_html: <span class="user">"%{name}"</span>
```

このように最後に`_html`をつけることで、htmlごと(今回はspanタグごと)返すこともできます。
view自体が複雑でごちゃごちゃしている場合,こうゆうパターンで書くのも一つの手かもしれません。



translateは調べるといろんなことができるので、色々試してやってみましょう！！
案外今やりたいことと合致するかもしれません


##　参考記事
[あなたはいくつ知っている？Rails I18nの便利機能大全！](https://qiita.com/Kta-M/items/bd4ba36a58ad602a9d8b#%E3%83%AD%E3%82%B1%E3%83%BC%E3%83%AB%E3%81%94%E3%81%A8%E3%81%ABview%E3%81%AE%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%92%E5%88%87%E3%82%8A%E6%9B%BF%E3%81%88%E3%82%8B)
Admobで広告を表示するときのTips

中々調べても出てこなかったので記事にします。
未リリースのアプリにAdmobを実装していて、テスト広告は表示できるのに本番の広告が表示されないという減少が起こっていました。

# 発生したエラー
その時のエラーは `No ad to show` というものが出ていました。

# 注意
本番の広告のみ表示できないなら、まずAdUnitIDが合っているかを確かめましょう。

次に、Admobの広告は、アプリをリリースするまで表示されません。
Admobの設定画面には、リリース済みのアプリを紐付けるためappIDを入力する箇所がありますが、リリースしてから４，５日経過しないと表示されません。
私の場合は、リリース後２日経ってから、appIDの紐付けをしなくても自動的に広告が配信され始めました。
VPCエンドポイントとPrivateLink

#PrivateLinkとVPCエンドポイントの違い
##概念
AWSアーキテクチャアイコンの分類では、PrivateLinkは**サービス**、VPCエンドポイントは**リソース**となっています。[公式ドキュメント](https://docs.aws.amazon.com/ja_jp/vpc/latest/userguide/endpoint-services-overview.html)の記載を読むとPrivateLinkはAWSサービスにセキュアな経路で接続を、VPCエンドポイントはAWSを利用した顧客サービスにセキュアな経路で接続するものと読み取れます。↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280358/ec0fcf74-eeee-b2f1-d60d-58f33016df31.png)

##用途
PrivateLinkを利用する用途は３種類あると[動画](https://aws.amazon.com/jp/privatelink/?privatelink-blogs.sort-by=item.additionalFields.createdDate&privatelink-blogs.sort-order=desc)に説明があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280358/27aafe4d-53f4-11ba-3451-20dc9c1bede4.png)

以下は私の脳内イメージです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280358/1d5f5fe8-dd9c-33cd-74be-11ce35083114.png)

##Gateway型とInterface型の違い
Gateway型は**グローバル**IPアドレスをInterface型は**プライベート**IPアドレスを使用しており、以下はGateway型がグローバルIPアドレスを使用していることを示しています。[CMAN](https://www.cman.jp/network/support/ip.html)で検索すると、当該IPアドレスが確かに「Amazon Technologies Inc. 」に割り当てられていることが分かります。そしてInterface型はENIを使用していることからプリベートIPアドレスを使っていることは明らかです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280358/61c9a994-3870-d72f-9b46-779d95c6e44b.png)
クラスメソッドさんのブログを読むと、オンプレミスと別リージョンからもアクセスできるInterface型の方が、便利でセキュアな接続方法の様子です。

##参考情報
- [BlackBelt VPC（p77〜）](https://d1.awsstatic.com/webinars/jp/pdf/services/20201021_AWS-BlackBelt-VPC.pdf)
- [ClassMethodさんのブログ](https://dev.classmethod.jp/articles/private-link-for-s3/?utm_source=go.pardot.com&utm_medium=mail&utm_content=blog&utm_campaign=2102_mailmagazine)
- [AWS Gateway Load Balancerが東京リージョンに対応しました](https://aws.amazon.com/jp/blogs/news/aws-gateway-load-balancer-tokyo/)
- [https://aws.amazon.com/jp/blogs/news/aws-privatelink-for-amazon-s3-now-available/?nc1=b_rp](https://aws.amazon.com/jp/blogs/news/aws-privatelink-for-amazon-s3-now-available/?nc1=b_rp)
[Oracle Cloud] OCIの課金情報を ADWで可視化する、Analytics Desktop編

この解説は、

https://qiita.com/nemo-kaz/items/63fd37397661b25966aa

 の続編です。

前回で OCI Cost Governance and Performance Monitoring SolutionのOracle Analyticsでの可視化ができました。
ここで、このコスト可視化ツール自体は無料ですが、その動作環境にコストが掛かっています。
そこでアナリティクスクラウドを無料のアナリティクスデスクトップに置き換えて、そのにコストを抑制したいと思います。
# 手順
## デスクトップの準備

Oracle Analytics Desktopはこのリンクからダウンロードします、Windows版とMac版があります、どちらでも動きます。

https://www.oracle.com/jp/solutions/business-analytics/analytics-desktop/oracle-analytics-desktop.html

このインストール作業は簡単なので省略します。

アプリケーションのインストールは、ブラウザ版とは変わらず、前回ダウンロードした **85195532.dva** ファイルをインポートで行います。
**プロジェクト/フローのインポート**で 
![image-20210223153430017.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3968/159762dd-6bb8-7543-c5ed-8cc3a8f475c8.png)



**dvaファイル**をドラッグ・アンド・ドロップでインポート
![image-20210222142955819.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3968/92541afe-31f4-354e-af29-e0c95f424579.png)

「インポートに成功しました」で **OK**。
するとインストールされたアプリケーションが、画面左下に **OCI Cost Governance &**という名前で現れます。
このアイコンをクリックすると起動はしますが、まだ初期状態では ADWにはつながっていません。
動かすと**問い合わせエラー**が画面に表示されます。
![image-20210222143233448.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3968/8639efba-294e-9a4f-3b1d-bc7e3c572857.png)



そこで、**データ**にナビゲートして 接続タブの **cosgov** の右端のプルダウンの中の**検査**をクリックします。
![image-20210223153729014.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3968/a710f79e-f0e6-6b21-f569-b81008bef58a.png)



ここに前回ダウンロードしたWalletファイルを読み込みます、ADWへの接続形態自体は変わらないので、手順は同じです。
![image-20210223154700507.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3968/f543837d-2fa0-cf35-7a5c-9a4ffc11b0c3.png)



これでADWに接続できました。
![image-20210222145546069.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3968/18df7494-1b62-d7ea-015b-3fe209adf2a6.png)


デスクトップ版でも普通に動きますね、アナリティクスクラウドがこのツールの運用コストの4割くらいを締めているのと、この程度はあまり高度な分析ではないので、デスクトップの無料版の使用で良いと思います。

また、このツールのユーザーは、OCIにログインする必要はありません、また、このアナリティクスのデスクトップ版に、例えばExcelにまとまった電気代とか、他社クラウドの料金とかも統合すれば、いろいろ統合して閲覧できると思います。

この時、Oracle Cloud上ではアナリティクスインスタンスは動かしておく必要はありません。

# まとめ

デスクトップ版のアナリティクスを使うことで、ビューの作成をクラウドから外出しできます、
これにより
このツールのクラウドコストが下げられるます。
デスクトップツールなので、財務担当者が作業しやすいです。
このコスト報告書作成者はOCIにログインする必要がありません。
などのメリットがあると思います。


以上
APIKitをCodableで使用する

https://github.com/ishkawa/APIKit ではJSONDataParserが提供されていますが、実装を見るとこのParserで返されるのはJSONをSwiftの世界の型に変換したものです。 (Dictionary, Array, String, etc...)

```swift
    public func parse(data: Data) throws -> Any {
        guard data.count > 0 else {
            return [:]
        }

        return try JSONSerialization.jsonObject(with: data, options: readingOptions)
    }
```

※[JSONDataParser](https://github.com/ishkawa/APIKit/blob/master/Sources/APIKit/DataParser/JSONDataParser.swift#L22-L28)より抜粋



Codableに準拠した独自の型に変換するためには　`JSONDecoder().decode(Decodable.Protocol, from: Data)
` を使用しますが、そのためにはData型を渡す必要があります。
なので、JSONDataParserは使用できず、そのままのDataを返す空のDataParserが必要です。

```swift
struct NopeDataParser: DataParser {
    var contentType: String?

    func parse(data: Data) throws -> Any {
        data
    }
}
```

これを用いると、以下のメソッドで取得できるobjectの型はDataになり、Codableに準拠した型に変換することができます。

```swift
    func response(from object: Any, urlResponse: HTTPURLResponse) throws -> Response {
        guard let data = object as? Data else { throw DomainError.parseFailed(object) }
        return try JSONDecoder().decode(Response.self, from: data)
    }
```
解決! PG::ConnectionBad → 最終的にはsudo だった！かというお話


Railsの勉強中の身で、db、PostgreSQLがどうだという事はまだまだ理解が浅いプログラミング初心者です。
練習中に発生したトラブルで３日間もがき苦しみましたので、備忘録として初Qiita投稿です。誰かのためになると嬉しいです！

#発生状況
作業中、何かのはずみでPCが突然ダウン、自動的に再起動。その後突然 PG::ConnectionBad のエラー表示が出るようになった。

```terminal:ターミナル
PG::ConnectionBad: could not connect to server: No such file or directory Is the server running locally and accepting connections on Unix domain socket "/tmp/.s.PGSQL.5432"?
```

![スクリーンショット 2021-02-23 16.57.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423293/40f550a0-0867-b741-fc9e-c8a829a0e710.png)

# 環境
macOS Catalina 1o.15.6
ruby 2.6.3
Rails 6.0.3.4
PostgreSQL 13.2

# 解決までの道のり

```terminal:ターミナル
% postgres -D /usr/local/var/postgres 
2021-02-23 14:04:19.147 JST [90270] FATAL:  could not remove old lock file "/tmp/.s.PGSQL.5432.lock": Permission denied
```

なるほど!このファイルが取り除けないのね…権限がない?…どういう事だろう？とりあえず…

```terminal:ターミナル
% rm /usr/local/var/postgres/postmaster.pid
rm: /usr/local/var/postgres/postmaster.pid: No such file or directory
```

No such fileと言われてしまう…権限？

```terminal:ターミナル
$ chmod 1777 /tmp
```
をやった後、

```terminal:ターミナル
% rm /usr/local/var/postgres/postmaster.pid
```
を実行！今度こそ！

```terminal:ターミナル
rm: /usr/local/var/postgres/postmaster.pid: No such file or directory
```

あれ？！やっぱり権限がない？さすればということで、この[ページ](https://gori.me/mac/mac-tips/112082)を参考にしてシステム環境設定でターミナルの設定を変えてみた。
で、上記と同じことをしてもダメ！

ここに書いてないこともいっぱい試し、３日間もがいたけどいよいよ詰んだか…と思った時、ハタと思いついた。権限なんだったらひょっとしてsuper do ？!

```terminal:ターミナル
% sudo chmod 1777 /tmp
% rm /usr/local/var/postgres/postmaster.pid
```
お！うまくいったかも！！忘れずに…

```terminal:ターミナル
% rails db:create
% rails db:migrate
```

お〜〜〜〜〜〜動いた！！
…ということで長くなってしまいましたが、同じ症状に苦しむ方のお役に少しでもなれば幸いです。

#参考にしたサイト
https://stackoverflow.com/questions/13410686/postgres-could-not-connect-to-server
https://qiita.com/great084/items/98c83364f246473249c4
https://make-from-scratch.com/error-connections-on-unix-domain-socket-tmp-s-pgsql-5432/
何でJavaScriptはsingleThreadを選んだんだろう。

疑問を抱いた時点はtypeScriptを勉強したところ読んでしまったある文章。
>　ジャヴァスクリプトは単一スレッド（single-thread)で動作するため、できる限りreadFileSyncのような同期APIは使用を控えましょう。

あれれ。それではJAVAのマルティスレッドとはどう違うのだろ。

---------------------------------------

まずはjavaScriptから呼出があった場合を流れを探ってみましょう。

```
console.log('a');
setTimeout(() => console.log('c'));
console.log('b');![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1070645/c74924d9-179d-ffa0-df6e-7be42ecd3f57.png)

```
結果はアルファベットから予想野通り　"a, "b", "c"

この呼出を始まりに行われる環境を見てみよう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1070645/800fdd3a-df15-4a0e-dba7-de4f5e527f17.png)

1. 初めに```console.log('a');```　→　callstack　に入ります。(FLOW)
2. コード実行```print('a')```してcallstackから離れます（POP)
3. ```setTimeout(() => console.log('c'));```がcallstack　に入ります。(FLOW)
4. ```setTimeout```はJSにない処理のため実行を試したが実行失敗。
5. callstackから離れ（POP)、該当処理を探すためWEB APIに入ります(FLOW)
6. callstackが空になったので```console.log('b')```が入ります(FLOW)
7. コード実行```print('b'```してcallstackから離れます（POP)
8. web api実行結果がcallback queueに格納されていたらevent loopはcallstackに移す。（FLOW）
9. コード実行```print('c')```してcallstackから離れます（POP)


###### ( *event loop: call stack, web api, callback queue を回しながらstackからweb apiに移したり、リターンをcallback queueからcall stackに移します）

それではどうしでsingle threadを使うのでしょう。まずはjavaのmulti threadを見てみましょう。

multi threadの強さはマルチ作業が可能にすること。例え音楽を聴きながら（作業①）、コーディングをしること（作業②）。各スレッドはメモリを割り当てられるのでエラー発生にも自分の領域以外を影響を及ぼさないです。
multi threadの困ることは同時性。各違うスレッドが同時に同じ変数の値を変更した場合などで意図してなかった処理が発生しかねません。そのため、スレッドのスケジューリングは気にしないといけなません。

javascriptのsingle threadは当たり前だがスレッドのスケジューリングを気にすることはなく、一スレッドでAYSNCなどの同期APIなどで内部スケジューリングだけコントロールすればより高い反応性、同時性を保つことができます。また内部スケジューリングでマルチ作業も可能にさせます。

---------------------------------------
参照資料
https://www.geeksforgeeks.org/why-javascript-is-a-single-thread-language-that-can-be-non-blocking/
[React Native]Android EmulatorがローカルのAPIサーバーにつながらない時の解決法

React Nativeを使ってAndroidアプリを開発していた際にaxiosを用いてローカルサーバーのAPIを呼び出そうとしたときにできなくて詰まったので解決策をメモします。

# 環境

- OS: Mac OS X 10.15.7 19H512
- react: 16.13.1
- react-native: 0.63.2
- axios: 0.21.0
- Android Emulator: 30.0.26-6755297
- Android: 11.0 (R) - API 30

# 事象

ローカルにAPIサーバーとしてRuby on Railsをポート3000番で動かしていました。
しかし、Android(React Native)側でaxiosを使ったPOSTリクエストを実行したところ、以下のエラーが搬送され意図した処理が行われませんでした。

```
Error: Network Error
    at createError (createError.js:16)
    at EventTarget.handleError (xhr.js:84)
    at EventTarget.dispatchEvent (event-target-shim.js:818)
    at EventTarget.setReadyState (XMLHttpRequest.js:600)
    at EventTarget.__didCompleteResponse (XMLHttpRequest.js:395)
    at XMLHttpRequest.js:508
    at RCTDeviceEventEmitter.emit (EventEmitter.js:189)
    at MessageQueue.__callFunction (MessageQueue.js:416)
    at MessageQueue.js:109
    at MessageQueue.__guard (MessageQueue.js:364)
```

その時のソースコードはこちらです。

```js:auth.js
import axios from 'axios';

URL = 'http://localhost:3000'

export const login = async (email, password) => {
  return await axios
    .post(URL + '/api/sign_in', {
      email: email,
      password: password,
    })
    .then((response) => {
      return response;
    })
    .catch((error) => {
      return { 'error' : error };
    });
};

```

# 解決法

以下の通りです。

 - URLのホストを`localhost`から`10.0.2.2`に変更する

Android Studio ユーザーガイドには以下のように書かれていました。

> 開発マシンのアドレス 127.0.0.1 は、エミュレータ固有のループバック インターフェースと一致することになります。開発マシンのループバック インターフェース（マシン上の別名 127.0.0.1）で実行されているサービスにアクセスする場合は、代わりに特殊アドレス 10.0.2.2 を使用する必要があります。

引用： Android Studio ユーザーガイド - [Android Emulator のネットワークを設定する](https://developer.android.com/studio/run/emulator-networking?hl=ja)

上の通り`127.0.0.1`を使用するとAndroid Emulator自身をさすことになるのでローカルのサービスにアクセスするには特別なアドレスである`10.0.2.2`を使う必要があるとのことです。

もちろん`127.0.0.1`のエイリアスである`localhost`も同じように対応しないといけないということですね。。

以下の通り変更します。

```js
// ここから
URL = 'http://localhost:3000'
// こう
URL = 'http://10.0.2.2:3000'
```

無事に解決しました。

# 参考
- Ararami Studio - [Androidのエミュレーターから自身のPC(localhost)へ接続](https://araramistudio.jimdo.com/2018/01/11/android%E3%81%AE%E3%82%A8%E3%83%9F%E3%83%A5%E3%83%AC%E3%83%BC%E3%82%BF%E3%83%BC%E3%81%8B%E3%82%89%E8%87%AA%E8%BA%AB%E3%81%AEpc-localhost-%E3%81%B8%E6%8E%A5%E7%B6%9A/)
- Android Studio ユーザーガイド - [Android Emulator のネットワークを設定する](https://developer.android.com/studio/run/emulator-networking?hl=ja)
すべてのひらがな・カタカナなどのリストをCharacterの配列で取得する

### ひらがな一覧
```swift
    static let hiraganaList: [Character] = {
        [UnicodeScalar("あ").value...UnicodeScalar("ん").value].joined()
            .compactMap { value in
                UnicodeScalar(value).map(Character.init)
            }
    }()
```

### カタカナ一覧

```swift
    static let katakanaList: [Character] = {
        [UnicodeScalar("ア").value...UnicodeScalar("ン").value].joined()
            .compactMap { value in
                UnicodeScalar(value).map(Character.init)
            }
    }()
```

### アルファベット大文字一覧
```swift
    static let upperAlphabetList: [Character] = {
        [UnicodeScalar("A").value...UnicodeScalar("Z").value].joined()
            .compactMap { value in
                UnicodeScalar(value).map(Character.init)
            }
    }()
```

### アルファベット小文字一覧
```swift
    static let lowerAlphabetList: [Character] = {
        [UnicodeScalar("a").value...UnicodeScalar("z").value].joined()
            .compactMap { value in
                UnicodeScalar(value).map(Character.init)
            }
    }()
```

### 数字一覧
```swift
    static let numberList: [Character] = {
        [UnicodeScalar("0").value...UnicodeScalar("9").value].joined()
            .compactMap { value in
                UnicodeScalar(value).map(Character.init)
            }
    }()

```
タグ機能

#参考にしたサイト

https://qiita.com/tobita0000/items/daaf015fb98fb918b6b8

#新しく覚えたこと

```
add_index(テーブル名,カラム名,オプション) #テーブルにカラムを追加する
unipue: true #一意性制限
```

https://railsdoc.com/page/add_index

```
モデル.pluck(カラム名) #指定したカラムのレコードの配列を取得
モデル.find_or_create_by(条件) #指定した条件が存在すれば取得し、なければ作成
```

https://railsdoc.com/page/model_pluck

https://railsdoc.com/page/find_or_create_by

タグ付け機能のビューにはjQeryのTag-itと使う

https://qiita.com/tyamagu2/items/75eeaa8ef208385aa341

#アソシエーション

[![Image from Gyazo](https://i.gyazo.com/bc41301b20be9e21b71d53729049c8f4.png)](https://gyazo.com/bc41301b20be9e21b71d53729049c8f4)
pyquboの作法 その2

#概要

pyquboの作法、調べてみた。
練習問題やってみた。

#練習問題

クラスタリングせよ。

#サンプルコード

```
import numpy as np
from matplotlib import pyplot as plt
from pyqubo import Array
from scipy.spatial import distance_matrix
import neal

data = []
for i in range(100):
    p = np.random.uniform(0, 1)
    cls = 1 if p > 0.5 else -1
    data.append(np.random.normal(0, 0.5, 2) + np.array([cls, cls]))
df1 = pd.DataFrame(data, columns = ["x", "y"], index = range(len(data)))
df1.plot(kind = 'scatter', x = "x", y = "y")
plt.show()
d_ij = distance_matrix(df1, df1)
spin = Array.create("spin", shape = len(df1), vartype = "SPIN")
H = -0.5 * sum([d_ij[i, j] * (1 - spin[i] * spin[j]) for i in range(len(df1)) for j in range(len(df1))])
model = H.compile()
qubo, offset = model.to_qubo()
sampler = neal.SimulatedAnnealingSampler()
raw_solution = sampler.sample_qubo(qubo)
decoded_solution = model.decode_sample(raw_solution.first.sample, vartype = "BINARY")
print(decoded_solution.sample)
for idx in range(0, len(df1)):
  if decoded_solution.array('spin', idx) == 1:
    plt.scatter(df1.loc[idx]["x"], df1.loc[idx]["y"], color = "b")  
  else:
    plt.scatter(df1.loc[idx]["x"], df1.loc[idx]["y"], color = "r")

```

以上。
Stringをindex指定でCharacterを安全に取得する

**環境**
Swift 5.3.2

StringはCollectionに準拠しているので元々 `text[position]` でアクセスできますが、subscriptの引数に指定できるものはString.Indexという型なのでIntを指定する事はできません。
そのため以下のextensionを記述することでInt型でCharacterを取得することができます。


```swift
extension StringProtocol {
    subscript(offset: Int) -> Character? {
        guard offset < count else { return nil }
        let index = self.index(startIndex, offsetBy: offset)
        return startIndex <= index && index < endIndex ? self[index] : nil
    }
}
```
【Ruby】【paiza】スキルチェック見本問題でよく使う操作メモ


# paizaのスキルチェック見本問題でよく使う操作メモ

皆さん今日もpaiza解いてますか？偉いです。僕もがんばります。

Ruby今までやったことないので、趣味がてらPaizaで勉強始めました。
いやー、ほんとにPaizaって問題集が色々あっていいですよね（中の人ではないですよ）。
スキルチェック見本問題で、Rubyでよく使う操作をまとめました。

# 想定読者

* 他言語でコード書いたことある人
    * ガチ初心者は、他サイトとか見たほうがいいです。配列とはなんぞや、は他サイトで勉強してくださいな

## 数字の操作

### 改行区切りの数字を取得

```ruby
array = []
while number = gets
  array << number.chomp.to_i
end
```

### 空白区切りの数字を取得

* 普通に取得するなら

```ruby
line = gets.split(' ').map(&:to_i)
```
* Rubyはこういう書き方もできる！Cランクから使う機会が増えた。

```ruby
# input[1,10,55]の場合
first, secound, third = gets.split(' ').map(&:to_i)
puts first  # 1
```

### 与えられたN回繰り返し処理（Fizz Buzz向け）

```ruby
roopNumber = gets.chomp.to_i
i = 1
while i <= roopNumber
    print i
    i += 1
end
```

### 剰余

```ruby
N = 3
if N % 3 == 0
  print "3で割り切れるよ（余りが0だよ）"
end
if N % 2 == 1
  print "2で割り切れないよ（余りが1だよ）"
end
```


## 文字列の操作

### 改行区切りの文字列を取得

```ruby
array = []
while number = gets
  array << number.chomp
end
```

### 空白区切りの文字列を取得

```ruby
line = gets.split(' ')
```

### 文字列の繰り返し処理

```ruby
line = ["pen", "pineaplle", "apple", "pen"]
for word in line
  puts word
end
```

### 文字列のうち、X番目〜Y番目の範囲の文字を取得

```ruby
stringNum = "123456"
output = stringNum.slice(2..5) #3番目〜6番目
print output
# 3456
```

### 文字列を1文字ずつ分割して、配列に入れる

```ruby
string = 'hello'
array = string.chars
puts array
# [h, e, l, l, o]
```


## 出力

###  改行なし

```ruby
print "改行"
print "しませんよ"
# 改行しませんよ
```

### 改行あり

```ruby
puts "改行"
puts "しますよ"
# 改行
# しますよ
```

### 変数の出力（Hashもついでにメモ）

```ruby
hash = { "orange" => 1, "apple" => 5 }
hash.each{|key, value|
  puts "#{key} #{value}"
}
# orange 1
# apple 5
```


# まとめ
* 今日もRuby頑張ろう
Django + uwsgiで「no python application found, check your startup logs for errors」のエラーが出るとき

これ何度かハマってます。。。

今回はDockerコンテナ内のルートディレクトリの階層を動かしてハマりました。

原因なのですが、文字通り「Pythonアプリケーション（DjangoやFlask）が見つからなかったよ」と言っています。
uwsgiってnginxとDjangoを繋ぐものなので、リクエストがNginxまでは行き着いたものの、Djangoまでは行けませんでしたという感じですね。

これの原因は、基本的にはuwsgi.iniにあるようです。

・・・ここまではすぐにわかるんですよね。
問題は、「じゃあuwsgi.iniってどう書くのが正解なんだ？？」と調べてみると何やら書き方が多種多様

どれをやれば動くか試行錯誤するしかなく・・・

いまだにどれが正解だかはわかっていません。
が、今回はどうやって解決したかというと
chdirで、mysite_project(Djangoの一番上の階層。その下にmysite_appがあって、その階層の中にsettings.pyなどが入ってる構成です)を指定しました。
ちなみになぜかchdirを絶対pathで書いても動かなかったです。(謎)

↓実際に動いたuwsgi.iniの参考です。

```ini:uwsgi.ini
[uwsgi]
chdir=mysite_project
module=mysite_app.wsgi
socket=:8001
py-autoreload=1
daemonize=/etc/uwsgi/log/mysite_app.log
buffer-size=65536
```
Clamav の memory allocation エラーの対処方法

```
# clamdscan --multiscan / 
```

上記コマンドで、/swapfile の memory allocation エラーとなる。

```
/swapfile: Can't allocate memory ERROR
```

これは別に問題ない。/swapfile が物理メモリの値を超えているため。
/swapfile を小さくするのは意味がないので、検査対象から外す。

```
# vim /etc/clamd.d/scan.conf

...(snip)...
ExcludePath ^/proc/
ExcludePath ^/sys/
# add this line
ExcludePath ^/swapfile
...(snip)...
```

デーモンリスタート

```
# systemctl restart clamd@scan.service
```
Linux基礎知識①

**※個人的な学習のアウトプットとなりますので間違い等あった場合ご指摘いただけると大変助かります。**
## Linux

**Linux**とは**OS(Operating System)**のひとつでPCを動作させるために必要なシステム。

キーボード入力やマウス操作、サーバーへのリクエストやレスポンスの受信などPCを動かす際に必要で**当然のように存在しているソフトウェア**がOS。複数種類があるOSの中のひとつがLinux。

## GUIとCUI

OSの環境には2種類あり、**GUI (Graphical User Interface)** か **CUI (Character User Interface)** がある。

**GUI**は一般的なPCで採用されているWindowsやMac OSのようなマウス操作によってファイルやフォルダ操作をするような視覚的にわかりやすいインターフェース。

一方**CUI**はいわゆる「黒い画面」に対してコマンドを打ち込むことで操作を行う一般人にはやさしくない環境。
ディレクトリという概念の理解した上で自分の現在地を把握することが重要。

![スクリーンショット 2021-02-27 9.01.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607264/8f31d44e-4406-27c2-c26e-50021a9174c4.png)

こんな感じのやつ。
今回の記事に取り上げている**LinuxはCUI環境に該当するOS**。

## Linuxの歴史

元はアメリカのAT&T社で開発された**UNIX**というOSがあり**SystemⅤ系**と**BSD(Berkley Software Distribution)系**の2つの系列で発展していた。

Linuxはその発展の先にいるわけではなく、UNIXを参考に**Linus Tovaldsがゼロから作り上げたOS**がLinux。

UNIXを参考にしているのでコマンドは似ているがソースは全くの別物となる。

Linuxは**オープンソース** (ソースコードを一般公開して誰でも使えるようにしている)になっており、企業や団体等がこれに独自ツールやサポートを付け加えてパッケージにすることを**ディストリビューション** (配布形態)という。

有名なディストリビューションには**CentOS**や**Ubuntu**などがある。

##  コンソール

LinuxではLinuxがインストールされた**PC(ホスト)**へネットワーク経由で**別のPC(端末・ターミナル)**から接続するような使い方が中心になる。

こういったCUI環境でコマンドを受け取り、ホストへ渡す役割を果たしているのが**コンソール**である。

##  仮想環境

Linuxを使う際にはOS上にハードウェアをエミュレート（模倣）して仮想環境を作り出すという方法がある。

ここで作られた仮想のハードウェアを**仮想マシン(仮想PC・仮想サーバー)**と言う。

仮想環境の管理ツールで有名なものには**Virtual Box**といったものがある。

この方法で環境を構築すると、**CPUやメモリ、ディスク容量を多く必要**とするので導入するPCにそれなりのスペックが必要となる。
権限のないユーザーが削除することを制限する方法

##目的
以下のコード　before_action :redirect, only: [:edit, :update]にdestroyアクションを追加します。削除機能は特定のユーザーのみ実行できる必要があるため、privateアクション内で定義する「特定のユーザーでなければindexのページまでredirectする」仕様にdestroyアクションを追加します。


##手順
以下、現在のitems_controllerを修正します。

```items_controller.rb
class ItemsController < ApplicationController
  before_action :authenticate_user!, except: [:index, :show]
  before_action :set_item, only: [:show, :edit, :update]
  before_action :redirect, only: [:edit, :update]
  def index
    @items = Item.order('created_at DESC')
  end

  def new
    @item = Item.new
  end

  def create
    @item = Item.new(item_params)
    if @item.save
      redirect_to root_path
    else
      render :new
    end
  end

  def show
  end

  def edit
  end

  def update
    if @item.update(item_params)
      redirect_to root_path
    else
      render :edit
    end
  end

  def destroy
    item = Item.find(params[:id])
    if item.destroy
      redirect_to root_path
    end
  end

  private

  def item_params
    params.require(:item)
          .permit(:product_name, :category_id, :price, :product_status_id, :burden_id, :area_id, :days_id, :description, :image)
          .merge(user_id: current_user.id)
  end

  def set_item
    @item = Item.find(params[:id])
  end

  def redirect
    unless current_user.id == @item.user.id
      redirect_to action: :index 
    end
  end
end
```

まずは

```
  before_action :redirect, only: [:edit, :update]
```
↓

```
 before_action :redirect, only: [:edit, :update, :destroy]
```
とします。
次に、destroyメソッドを修正します。


```
  def destroy
    item = Item.find(params[:id])
    if item.destroy
      redirect_to root_path
    end
  end
```
↓

```
  def destroy
    # @item = Item.find(params[:id])
    if @item.destroy
      redirect_to root_path
    end
  end
```
privateメソッド内のredirectメソッドを見ると、変数が@item
となっています。そのため、destoryメソッドの変数も@itemに変更します。(以下で説明しますが@item = Item.find(params[:id])はコメントアウトしています。)
しかし、**このまま実行すると、@itemがnill_class(空)であるというエラーが生じます。**その理由は、
**destroyアクションで変数@itemが生成されていないため**です。
before_action:redirect内にdestroyを入れたことで、先にprivateメソッドが実行されます。すると、redirectメソッド内の
unless current_user.id == @item.user.id
がdestoryアクション内で
@item = Item.find(params[:id])
と定義する前に実行されてしまいます。
destroyアクションで変数@itemが生成されていないため、nill_classというエラーが生じました。
 

そこで、berore_action内に
@item = Item.find(params[:id])
を定義するようにします。

```
before_action :set_item, only: [:show, :edit, :update]
```
↓

```
before_action :set_item, only: [:show, :edit, :update, :destroy]
```
set_itemメソッド内にdestroyを組み込むことで、privateメソッドが実行される前に変数@itemを生成します。
destroyアクション内では
@item = Item.find(params[:id])
は必要ないので、消去します。（今回は分かりやすいように上記の通りコメントアウトしております）

以上で、destroyアクションをredirectアクションに組み込むことができました。


##発展
※ここからは発展です。実装とは関係がありません。
そもそも、destroyアクションはviewページを持たないため、URLで直接アクセスする事ができません。あくまで、別のviewページで削除ボタンを押すとdestroyアクションが実行されるのみです。

```
    unless current_user.id == @item.user.id
      redirect_to action: :index 
    end
  end
```
とredirectをかける必要はないのでしょうか。

##結論
あります。
viewページ上では確かに削除を実行することはできません。しかし、検証ツールを用いることで、削除権限のないユーザーが削除ボタンを作ることができるそうです。そのため、検証ツール上で権限のないユーザーが削除を実行することは可能だそうです。（今回の実装ではviewページ上では権限のないユーザーには削除ボタンを表示させないようにしております。）

以上、処理の実行に対する権限に関しては非常に勉強になりました。
LINE Notifyと連携

Lineとのリンクをする必要が出たので
教えてもらった通りに行ったら出来なかったので
詰まった部分をメモ

---
####作業環境
iPhone11(ios14.4)
Windows10 home 64bit

---
#### LINE Notify

[LINE Notify](https://notify-bot.line.me/ja/)
![スクリーンショット (97).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607764/2dd94995-8eda-8190-bd3a-37ea867035ab.png)

ここから右上`ログイン`を押して
LINEアカウントでログインを行ったが弾かれていた。

原因としてしてはLINE側の設定が出来ていなかった。

---

####LINE側の設定(スマホ側)

①ホームから設定画面を開く
![image_123986672 (1).JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607764/c4de8560-9e7d-587e-2d83-2ff67e85bba6.jpeg)

---

②アカウントを選択する
![IMG_0346.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607764/8781de74-6eb5-bb92-e3ad-bdafbf9925f8.jpeg)

---

③ログイン・セキュリティでログイン許可をONにする。
![image_123986672.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607764/371348a2-7328-61e2-a29f-2721a678cd16.jpeg)
ここまでやらないとLINE Notifyにはログイン出来なかった。

---
####LINE Notifyログイン

設定が完了したらPC側から[LINE Notify](https://notify-bot.line.me/ja/)にアクセス

①必要事項を入力してログインをクリックする。
![スクリーンショット (98).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607764/f3718c90-061c-ab63-1d34-7e7f20ce971b.png)

---

②本人確認用PINコードが発行される
![スクリーンショット (99).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607764/3f0efef3-9356-7383-d23e-a2d9edd4b214.png)
上記画面はデスクトップでログインした際の物。

ノートPCでログインしたら
本人確認発行前によくある文字読んで入力してが出た。

多分スマホ側の設定をしておらずに何度もログインしていたからと思う。

③スマホ側にPINコードを入力する。
![IMG_0349.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607764/01434932-dc38-c7ff-df37-1d8fe1d01406.jpeg)

PC側でログインしたらスマホ側に表示されるので
PC側で表示されているPINコードを時間内に入力すればOk




---
####連携設定

①マイページに移動する。
![スクリーンショット (100).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607764/b2e07084-ffd2-4cd4-66b5-a13e45b8b69b.png)

---

②トークンを発行するを選択する。
![スクリーンショット (102).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607764/c52cc0fa-1f2a-b45b-5593-5380ab0c0b50.png)

---

③『1：1でLINE Notifyからの通知を受け取る』を選択する。
![スクリーンショット (103).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607764/0b7b7a05-b11f-f76f-64bc-efc8353f44be.png)

トークン名に関しては自由

入力したら『発行する』をクリックする。

---

④発行されたトークンをコピーしてテキストエディタ等で保存しておく。
![スクリーンショット (104).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607764/2a6f2542-cee9-7af6-c047-4c1937f2d450.png)

---

⑤設定が終わると連携設定したものが表示されます。

![スクリーンショット (105).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607764/0f6e52ae-0530-723b-c9f0-15b8e881bf82.png)

---

ここまでが連携設定。
Stripe Element でカード番号の入力フィールドを縦に並べたい

## 背景
- [Stripe.js](https://stripe.com/docs/js) を用いてカード番号を入力するフォームを生成する時、デフォルトではカード番号・有効期限・CVCの入力フィールドが横並びになってしまう。
- デザイン上、フィールドを縦に並べたい時にどのようにフォームを生成したら良いのか調べた。

## 完成イメージ
![Online_Salon.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131942/729b25c1-040a-b88a-7aea-b4ac833c5228.png)

## フォームの生成
- まずフォームの生成時は stripe.elements() の返り値からカード番号・有効期限・CVCを入力する各フィールドを create する。
- この時、 elements.create() を実行する時点で document 上に対象として selector で指定した element が存在している状態であることを確認すること。
  - 今回の場合は `#card-number-input` `#card-expiry-input` `#card-cvc-input` の3つを用意しておく。
  - 雑に `<div id="card-number-input" />` のような div を置いておくだけで良い。
  - React 等の document を動的に操作するライブラリを使う場合は、レンダリングが完了してから実行すること。

```ts
import { loadStripe, StripeElementStyle } from '@stripe/stripe-js';

const style: StripeElementStyle = {
  base: {
    fontSize: '16px',
  },
};

const stripe = await loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx');
const elements = stripe.elements();

const cardNumberElement = elements.create('cardNumber', { style });
const cardExpiryElement = elements.create('cardExpiry', { style });
const cardCvcElement = elements.create('cardCvc', { style });

cardNumberElement.mount('#card-number-input');
cardExpiryElement.mount('#card-expiry-input');
cardCvcElement.mount('#card-cvc-input');

return cardNumberElement;
```

これで入力フィールドが生成される。

## フォームの送信
- ユーザーが入力を完了してカードトークンを取得したくなった時は、先ほどフォームの生成に使った `cardNumberElement` を [stripe.createToken()](https://stripe.com/docs/js/tokens_sources/create_token?type=cardElement) の引数に渡せばOKです。

```ts
await stripe.createToken(cardNumberElement);
```

これでトークンを取得できるので、煮るなり焼くなり好きにできます。
【はじめてのFlask】GETとPOSTで値を受け取る

## 概要

前回、URLルーティングを回すところまでやった。
今回は、画面からの入力を受け取るところをやる（ほんまちょっとずつやな…）。

`/try_login`と`/write`のところ。

### /try_login
`/login`では login.html　を表示。その中で form　でユーザ名とパスワードを送る。
とりあえずGETを使うことにする。

login.htmlのformの部分。

```
<form action="/try_login" method="get">
	<label>名前：<input type="text" id="name" name="user_name"></label><br>
	<label>パスワード：<input type="password" name="password"></label>
	<input type="submit" name="送信する">
</form>
```

app.pyの/try_loginの部分。

```
@app.route('/try_login', methods=['GET','POST'])
def try_login():

	if "name" in request.form:
		name = request.form["name"]
	if "password" in request.form:
		password = request.form["password"]

	if (name == None) or (password == None):
		return redirect('/login')

	for user in users:
		if user.name == name and user.password == password:
			user_id = user.get_id()

	return redirect(url_for('index'))
```

### /write
こっちは掲示板の本文ということで長めのテキストを受け取るのでPOSTで受け取ることにする。

index.htmlのformの部分。

```
<form action="/write" method="post">
	<textarea name="msg" rows="6" cols="60"></textarea><br>
	<input type="submit" name="書込">
</form>
```
app.pyの/writeの部分。

```
@app.route('/write', methods=['POST'])
def write():
	if request.form["msg"] is not None:
		msg = request.form["msg"]
	return redirect('/')
```
変更点は、1行目と3,4行目。
`/write`のメソッドとしてはPOSTが使われるようにFlask側を設定。
FlaskでPOSTでデータを受け取る場合は、`request.form['XXX']`。
JavaScriptできちんと日付を取得する

# JavaScriptで正しく日付を取得する

getDateに +1するだけでは 月をまたぐ際に、32日となったりする

【正】

```js
let date = new Date();
date.setDate(date.getDate() + 1);
```


【使用例】

今日から1週間を取得

```js

let date = new Date();

for(let i = 0; i<7; i++){
date.setDate(date.getDate() + 1);
console.log(date.getDate());
}
```

一昨日

```js
let date = new Date();
date.setDate(date.getDate() - 2);  
```

明後日

```js
let date = new Date();
date.setDate(date.getDate() + 2);  
```

1週間後

```js
let date = new Date();
date.setDate(date.getDate() + 7);  
```
timeScaleとスローモーション

<h1>timeScaleとは</h1>
timeScaleは名前の通り時間の早さを表す静的な変数です。
timeScaleが1.0の時現実と同じ速さとなり、0.5にすると半分の速さになり

<b>Unityのリファレンスより↓</b>
>Except for realtimeSinceStartup and fixedDeltaTime, timeScale affects all the time and delta time measuring variables of the Time class.
If you lower timeScale it is recommended to also lower Time.fixedDeltaTime by the same amount.

timeScaleはrealtimeSinceStartupとfixedDeltaTimeには影響しないと書いてあります。
これはrealtimeSinceStartupはゲームが始まってからの(固定の)時間なのでもちろん影響は受けると困ります、同様にfixedDeltaTimeも固定のフレームレート(default=0.02)の更新を実行するので影響を受けないようにしているのだと思います。

ここで注意するのがもしゲームでスローモーションを実装したいとき
timeScaleを0.02にしたとします。このときfixedDeltaTimeは0.02のままなのでかくかくな画面になってしまいます。これを防ぐためにtimeScaleを小さくするときは同じだけfixedDeltaTimeも小さくすると良いそうです！
【TypeScript】TypeScript の abstract メソッド/クラス

#TypeScript の abstractメソッド
* 親クラスのメソッドをサブクラスでオーバーライドするように強制したい場合、abstractメソッド使います
* abstractメソッドでは、具体的なメソッドの処理を書かず、戻り値のみを設定します

```ts
  abstract describe(this: Department): void; //{};を削除、戻り値を設定
```

##ポイント
* abstractメソッドは、abstractクラスからしか使用できません
* abstract クラスは、インスタンス化できません
* サブクラスで、必ず親クラスのabstractメソッドを実装します


```ts
//親クラス

abstract class Department {
  static fiscalYear = 2021;
  protected employees: string[] = [];

  static createEmployee(name: string) {
    return { name: name };
  }

  constructor(protected readonly id: string, public name: string) {
    console.log(Department.fiscalYear);
  }

  abstract describe(this: Department): void;

}
```

```ts
//サブクラス1

class ITDepartment extends Department {
  admins: string[];
  constructor(id: string, admins: string[]) {
    super(id, 'IT');
    this.admins = admins;
  }

  //親クラスのabstractメソッドをサブクラスで実装する必要がある
  describe() { 
    console.log('IT部署 - ID: ' + this.id);
  }
}

//サブクラス2

class AccountingDepartment extends Department {
  private lastReport: string;

  constructor(id: string, private reports: string[]) {
    super(id, 'Accounting');
    this.lastReport = reports[0];
  }

  //親クラスのabstractメソッドをサブクラスで実装する必要がある
  describe() {
    console.log('会計部署 - ID: ' + this.id);
  }
}
```
Arduino UNO アンド AQM0802(液晶) アンド STTS751(温度) の 温度計


x 愛用していたSTTS751の入手が難しくなったので代用品は、S-5851A。(おもにアドレスの違い)

stm32g031,stm32l010用に最軽量化したもの

1.SCLとSDAを接続、プルアップも忘れずに
2.電源の接続
3.下記のソースコードを書き込む
4.コンパイル実行で表示されたら終了
5.おわり

```c++

#include <Wire.h> //I2C library

#define STTS751 0x39
#define I2Cadr  0x3e  // 固定

int     tempval;                //温度
char    data_read[2]={'@','t'}; //i2cバッファー
int     ii;                     //ループカウンター

//初期レジスター
char INIT_com[]={0x0,0x38,
0x0,0x39,
0x0,0x4,
0x0,0x14,
0x0,0x70,
0x0,0x56,
0x0,0x6C,
0x0,0x38,
0x0,0xC,
0x0,0x1,
0x40,0x41};

//画面のクリアレジスター
char INIT_cls[]={0x0,0x1};

//i2c書き込みルーチン
void i2c_led_w(char *buff1){
  Wire.beginTransmission(I2Cadr);
  Wire.write(buff1[0]);
  Wire.write(buff1[1]);
  Wire.endTransmission();
  delay(2);
}//i2c_led_w

void setup()
{  

  Wire.begin(); //uno

  //液晶の初期化
  for(ii=0;ii<11;ii++){
    i2c_led_w(&INIT_com[ii*2]);
  } //for

} //end setup

void loop()
{

  //画面のクリア
  i2c_led_w(INIT_cls);

  //0番目のレジスター
  Wire.beginTransmission(STTS751);
  Wire.write(0);
  Wire.endTransmission();
  delay(1);

  //温度の読み込み
  tempval = 99;
  Wire.requestFrom(STTS751, 1);
  while(Wire.available())  {    // 要求より短いデータが来る可能性あり
    tempval = (int)Wire.read(); // 1バイトを受信
  }//while
  delay(1);

  //液晶に表示
  data_read[1] = '0' + (tempval / 10);
  i2c_led_w(data_read);
  data_read[1] = '0' + (tempval % 10);
  i2c_led_w(data_read);

  delay(1000); //1秒待つ

}//loop


```

![uno_i2c_led_stts751_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/98f6d275-6d2f-25b4-58c1-4eda004344d8.jpeg)
FuelPHP　エラー「Class 'Model\DB' not found」

namespaceを設定していてFuelPHPのクラスにアクセスする場合は、global namespaceからバックスラッシュ（\）を頭につけてFuelPHPのクラスにアクセスしなければいけません。

エラー時

```
DB::select()->...
```

成功

```
\DB::select()->...
```

ソース
https://fuelphp.com/forums/discussion/12774/class-modeldb-not-found/p1
【Node.js】promiseの使い方

#プログラミング勉強日記
2021年2月28日

#基本的な書き方
　promise処理を作るには任意の関数の中で`new Promise()`を返すのが基本となる。

```js
return new Promise(resolve) {
    // 処理を記述する
}
```

```js:具体例
function myFunction() {
  return new Promise(function (resolve) {
      resolve("Hello World");
  })
}
```

#thenを使ったメソッドチェーン
　promiseによる非同期処理の結果を取得するにはthenを使ったメソッドチェーンを使用することができる。

```js
// dataにpromiseの結果が格納されている
// resolve()に設定した文字列になる
myFunction().then(function(data) { console.log(data) })
```

```:実行結果
Hello World
```

#promiseの並列処理
　allメソッドとraceメソッドを使った方法がある。
　allメソッドは、違うpromise処理が記述された関数をまとめて実行して、すべての結果が得られたタイミングでthenを実行できるようにする。なので、複数のpromise処理の結果をまとめて取得したい場合に向いてる。
　raceメソッドも複数のpromise処理を実行できるが、最初に結果が得られたpromiseの結果だけをthenメソッドで取得できる。


#エラーハンドリング
　promiseの引数には結果を格納するresolveだけではなく、エラー情報を格納するrejectを利用できる。

```js
function myFunction() {
  return new Promise(function (resolve, reject) {
      reject(new Error("エラーが発生しました"));
  })
}
```

```js
myPromise()
  .then(function(data) {
    console.log(data);
  }, function(error) {
    console.log(error.message);
  })
```


```:実行結果
エラーが発生しました
```


#参考文献
[非同期処理:コールバック/Promise/Async Function](https://jsprimer.net/basic/async/)
[【node.js入門】Promiseによる非同期処理の使い方まとめ！](https://www.sejuku.net/blog/76485)
【初心者向け】Go 言語の勉強法を具体的に教えるよ！(英語の参考情報が多め)

何かを学ぶとき、自分の

* 現状のスキル
* 目指すゴール

を明確にすることはとても重要です。

Go 言語の勉強に関しては、[Go Developer Roadmap](https://github.com/Alikhll/golang-developer-roadmap) を使って、何をどのタイミングで勉強するかの指針になると思います。

本記事では、もう少し具体的にどうしたら良いかを書いてみましたので、ぜひ参考にしてください！！

## 具体的なロードマップ

![GoStudyRoadmap.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/157574/f7ab73f2-f350-5aa5-1a02-7d61a969e8d3.jpeg)

## リンク集

### ウェブ

* [Cheat Sheet](https://github.com/a8m/golang-cheat-sheet): ダウンロードして手元に置いておく
* [A Tour of Go](https://tour.golang.org/list): ハンズオンでざっくりと学ぶ
* [Effective Go](https://golang.org/doc/effective_go): 都度参照する程度で良い。はじめは飛ばしても問題ない
* [Writing Web Applications](https://golang.org/doc/articles/wiki/): オフィシャルのウェブアプリチュートリアル。データベースではなく、ファイルを使った Wiki ページが作れる

### 本
* [Goプログラミング実践入門　標準ライブラリでゼロからWebアプリを作る](https://www.amazon.co.jp/dp/B06XKPNVWV): ウェブアプリ開発が一通りできるようになる
* [Go Web Programming](https://www.amazon.co.jp/dp/1617292567/): 上のオリジナル英語本

### Udemy
* [現役シリコンバレーエンジニアが教えるGo入門 + 応用でビットコインのシストレFintechアプリの開発](https://www.udemy.com/course/go-fintech/): 本より動画派の人向け


### YouTube
* [Go Concurrency Patterns](https://youtu.be/f6kdp27TYZs): __Concurrency__ といえば「"Rob Pike" の動画」と言われるくらい有名な動画
* [YouTube で "Golang" で検索](https://www.youtube.com/results?search_query=golang): たくさんあるので、興味や好きに合わせて勉強


### その他、情報収集
* [Go Package](https://golang.org/pkg/): なんだかんだで、オフィシャルドキュメントが一番勉強になる
* [Go Wiki](https://github.com/golang/go/wiki): スキルレベルに合わせた情報が見つかる。ただ、情報が多すぎるかも。
* [Awesome Go](https://awesome-go.com/): 「へー、こんなのあるんだー。どう書くんだろ」で参考になる。
* [Go Time](https://changelog.com/gotime): Go 周りの情報が得られる Podcast
東京、Raspberry Pi 4B で２時間１０分台

[信濃一国](https://qiita.com/hfu/items/464ff706179a3ba89229)と同じアプローチで、東京都全域分の国土地理院の基盤地図情報を、国連ベクトルタイルツールキット（[equinox](https://github.com/unvt/equinox)）を入れた Raspberry Pi 4B で [fgd](https://github.com/unvt/fgd) ツールを使ってベクトルタイル変換したところ、諸元は次の通りでした。

```
12565278 features, 717901394 bytes of geometry, 9203 bytes of separate metadata, 312621075 bytes of string pool

tile-join --force --no-tile-compression --output-to-directory=docs/zxy --no-tile-size-limit tiles.mbtiles
16/60787/28201
real    130m7.595s
user    291m47.957s
sys     48m39.046s
```

- データソースとなる基盤地図情報の総量は、ZIP ファイルで 1.1 GB でした。
- 東京都全域の地物数は、基盤地図情報では1200万地物程度ということですね。
- 生産された tiles.mbtiles のサイズは 426MB でした。
- ファイルシステムに展開されたベクトルタイルのサイズは 869MB でした。

![ 2021-02-28 9.34.20.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102082/ffde983a-c47c-db81-ebe1-2712948b7961.jpeg)

図の通り、確かに、東京都の隅々、例えば南硫黄島まで、ベクトルタイルに変換されていますね。なお、高さデータは Mapbox GL JS v2 で使えるデフォルトのものを使っています。

２３区内ですと、次の図のような感じに表示されています。スタイルはもう少し鍛えたいと思います。

![ 2021-02-28 9.37.40.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102082/ed3512c5-eb25-7ca1-8f53-a89a7de572c5.jpeg)
Qiita Daily Survey memo 2021.02.28

# Qiita Daily Survey memo 2021.02.28
Qiita の記事を可能な限り毎日読むために、読んだmemoを公開することでモチベーションを維持しようという試み。
習慣は途切れた後に、再度継続することが大事って聞きました…頑張ります…。

## [Spotify API + Next.jsで作る選曲支援Webアプリ](https://qiita.com/Yuki_Oshima/items/82116e4044687b16ef60)
Yuki Oshima さんの記事。
タイトルの通り選曲支援のアプリを作成されたという記事になります。
サイトが公開されており、かなりクオリティの高いページになっています。
SUGOI...。

また、認証の際に行われるメッセージパッシングの図が非常に分かりやすいと感じました。

デプロイのところまで書いてくださっているので、アプリを作った時には参考にさせていただきたいと思いました！

## [html10行、js no need、css (と画像少し) だけでこんなことができるコレクション](https://qiita.com/e99h2121/items/343b401de01e5bdf5f5c)
Nobuko YAMADA さんの記事。先日イースターエッグの記事を投稿してくださった方。
タイトルの通り、jsなしのcssでこんなの書けます、という記事。
数年前から私の知っているスタティックな css だけでなく動いたり光ったり回ったりな css が登場しているようです。ﾋｴｰｯ!!
単純に楽しいで、見ていて元気になりますし、やってみよー！ってなります。
ありがとうございます。

最後のコメントがまさに激しく同意です。
>「バックエンドの保守対応をしていると目の保養をしたくなります」