OmniAICreator/Qiita-1.07M huggingface dataset:
ブラウザで Amplify の PubSub を使ってサーバからの push を受ける

### 動機

[MQTTを使用して、Lambdaからブラウザを更新する方法〜aws-iot-device-sdk(aws-iot-sdk-browser-bundle.js)を使用する場合〜](https://dev.classmethod.jp/articles/aws-iot-browser-refresh/) の例を自分でも試してみようと…の続き。

今見ると、純粋 JS 実装の [aws-iot-device-sdk](https://www.npmjs.com/package/aws-iot-device-sdk) とネイティブライブラリで一部書き直された [aws-iot-device-sdk-v2](https://www.npmjs.com/package/aws-iot-device-sdk-v2) とがあるが、ブラウザで使うのにネイティブは却下。 aws-iot-device-sdk だけかと思って npm trends 調べたら、人気なのは [Amplify](https://www.npmjs.com/package/aws-amplify) らしい…。ドキュメントがいまいち不親切で、やりたいことをどうやれば実現できるかよくわからなくて敬遠していたが、人間、長いものに巻かれるのも大事だ。

### 経過

- Cognito の Identity Pool (IDプール) を用意して Enable access to unauthenticated identities (認証されていない ID に対してアクセスを有効にする) のチェックを on にする
- 未認証ユーザに割り当てる IAM Role は `iot:Connect`, `iot:Receive`, `iot:Subscribe` の最低限のポリシーだけを付与する

この辺は [くだんの記事](https://dev.classmethod.jp/articles/aws-iot-browser-refresh/) と同じ。で、未認証ユーザに subscribe させるのって、 amplify でどうやって書くんだ？ドキュメントの例は signin して認証済みユーザとして subscribe するものばかりで、案の定わけわからん。

こういうときは、ソースを見るしかない。 GitHub から clone してきてローカルでいろいろ探索してみる。どうやら、

- Auth の config に region と identityPoolId だけ与えて放置すれば、 PubSub で必要になったときに暗黙に @aws-amplify/core の `Credentials._setCredentialsForGuest()` が呼ばれて、 guest 用の credentials ( accessKeyId, secretAccessKey, sessionToken を持つ未認証ユーザ向けの一時 credentials ) が勝手に用意されるらしい
- Amplify をまるごと import しなくても、 PubSub にも `addPluggable()` があるので、 AWSIoTProvider はそこで設定すればよい
- subscribe したときの `next` イベントには、 publish されてきた payload だけではなく provider の情報も一緒に入ってくるので、選り分けないといけない

ということが見えてきた。 ~~いや、そりゃ OSS だから自分でソース見りゃいいってのはそうなんですが、もう少しどこかに書いておいてくれても…。~~

### 結果

```javascript
import Auth from '@aws-amplify/auth';
import PubSub from '@aws-amplify/pubsub';
import { AWSIoTProvider } from '@aws-amplify/pubsub/lib/Providers';

const AWS_REGION = 'ap-northeast-1';
const IDENTITY_POOL_ID = 'ap-northeast-1:XXXXXXXXXXXXXXXXXXXXXX';
const ENDPOINT = 'yyyyyyyyyyy.iot.ap-northeast-1.amazonaws.com';
const TOPIC = 'hoge';

const subscribeJob = async () => {
  Auth.configure({
    region: AWS_REGION,
    identityPoolId: IDENTITY_POOL_ID,
  });

  PubSub.configure();
  PubSub.addPluggable(new AWSIoTProvider({
    aws_pubsub_region: AWS_REGION,
    aws_pubsub_endpoint: `wss://${ENDPOINT}/mqtt`,
  }));

  const onMessage = ({ provider, value }) => {
    console.log('> ' + JSON.stringify(value));
  };
  const onError = (err) => {
    console.error(err);
  };
  const onClose = () => {
    console.log('Closed');
  }

  PubSub.subscribe(TOPIC).subscribe({
    next: onMessage,
    error: onError,
    close: onClose,
  });

  console.log('subscribe success');
};

export default subscribeJob;
```

あとはこの関数をどこか初期化にふさわしい場所で呼び出す ( React なら App.js で `useEffect()` するとか) だけ。 AWS IoT のコンソールでテスト publish すると、ブラウザのコンソールに publish したメッセージが表示される。めでたしめでたし。

確かに、 aws-iot-device-sdk よりも amplify のほうがコードは簡単になっている。が、このとっつきにくさは何なんだろう…。
超簡単にViewの背景をぼかす方法【iOS開発】

#背景をぼかしたい！！
背景をぼかしたいなーと思った時には**UIVisualEffectView**を使うと思うんですけど、ぼかす処理を毎回書くのがめんどくさい！！
というわけで超簡単に背景ぼかしができるextensionを作りましょう

#extensionを書く！
新しいファイルを作ってこれを書きましょう！

```swift:addVisualEffect.swift
import UIKit

extension UIView {
    func addVisualEffect() {
        //スクリーンサイズ取得！
        let width = UIScreen.main.bounds.size.width
        let height = UIScreen.main.bounds.size.height
        
        //ブラーエフェクト生成！
        let blurEffect = UIBlurEffect(style: .light)
         
        //ブラーエフェクトからエフェクトビューを生成！
        let visualEffectView = UIVisualEffectView(effect: blurEffect)
         
        //エフェクトビューのサイズ指定！
        visualEffectView.frame = CGRect(x: 0, y: 0, width: width, height: height)
         
        //もとのViewにaddSubView！！
        self.addSubview(visualEffectView)
        
        //重ね順を一番下に！！
        self.sendSubviewToBack(visualEffectView)
    }
}
```
ポイントはサイズをしっかり合わせるところと重ね順を一番下にすることですかね！

あ、そういえばブラーエフェクトには種類があるんですよ
（ここに詳しく書いてありました！ -> https://dev.classmethod.jp/references/ios8-uivisualeffectview/ ）
extraLightとlightとdartの3種類です！
だから引数を指定してあげればもっと使い勝手良くなる気がします
僕はlightしか使わないのでこれでいきます！

#実際に使う！

```swift:ViewController.swift
    override func viewDidLoad() {
        super.viewDidLoad()

        self.view.addVisualEffect()
    }
```

たったこれだけで背景をぼかすことができるんです！！便利！！

#最後に
メモ程度の記事に最後までつきあってくれてありがとうございます
是非使ってみてください！！

環境：Xcode11.6(11E708)
How to make a file URL copy button (File Upload Site #2)

今回はファイルダウンロードリンクをコピーするボタンを作ります。
1.Route

``` php:web.php
Route::get('files/uploadedfiles/{name}', 'FilesController@copy')->name('copyfile');
```
2.ボタン

```php:home.blade.php
<input value="{{ route('copyfile', $file->id)}}" id="copy_{{ $file->id }}" type="text">
<button value="copy" class="btn btn-link" onclick="copyToClipboard('copy_{{ $file->id }}')">Copy!</button>
```
3.Controller　App->Http->Controllers->FilesController.php に

``` php:FilesController.php
public function copy($url)
    {
        return Storage::url('/files/uploadedfiles/' . $url->name);
    }
```
4.Javascript を view　ファイルに入れる

```php:home.blade.php
function copyToClipboard(id) {
                document.getElementById(id).select();
                document.execCommand('copy');
            }
```
<img width="112" alt="Screen Shot 2020-07-26 at 13.10.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/645432/5e08a0b3-a864-1755-5a40-5ec3c5f7b2eb.png">

以上です。
競技プログラミング練習記 No.55【ABC108練習】

初回 -> [はじめに](https://qiita.com/easychoco/items/a9ae28aca97cfe47091f)

[ABC108](https://atcoder.jp/contests/abc108)を解きました。
3完です！
D問題は解けていません。

|問題|時間|アルゴリズム|実行時間
|:-:|:-:|:-:|:-:|
| A |  2min |-| 7ms|
| B |  8min |ベクトル| 5ms|
| C | 25min |-| 7ms|

# まとめ
先にまとめを載せます。これ自体は最後に書いてます。

座標を扱う問題はベクトルを使うと考えやすいです。

倍数が出てくる問題を考えるときは、係数で考えると考えやすいです。

## A - 	Pair
```c++
  int k;
  cin >> k;
  cout << k * k / 4;
```
`K`以下の整数のうち、`[偶数の個数] * [奇数の個数]`が答えですね。
それぞれ`k / 2`個、`(k + 1) / 2`個あります。
切り捨てしているので注意です。
これをかけてまとめると`k * k / 4`になります。
まとめるときも切り捨てを利用しています。

## B - Ruined Square
``` c++
  int x1, y1, x2, y2;
  cin >> x1 >> y1 >> x2 >> y2;

  int vx = y1 - y2;
  int vy = x2 - x1;

  cout << x2 + vx << " " << y2 + vy << " ";
  cout << x1 + vx << " " << y1 + vy;
```
座標を扱う問題はベクトルを使うと考えやすいです。今回は2次元平面ですね。
反時計回りに、入力の2つの頂点を`V1, V2`として、残りの2頂点を`V3,V4`とします。
また、`V2 - V1`を90度回転させたものを`Vd`とします。
つまり、

```math
\vec{V_d} = R(90^\circ)\ (\vec{V_2} - \vec{V_1}) =
\left(
    \begin{array}{cc}
    0 & -1 \\
    1 & 0
    \end{array}
\right)
\left(
    \begin{array}{c}
    V_{2x} - V_{1x} \\
    V_{2y} - V_{1y}
    \end{array}
\right)
= 
\left(
    \begin{array}{c}
    V_{1y} - V_{2y} \\
    V_{2x} - V_{1x}
    \end{array}
\right)
```
とします。
このとき、`V3,V4`は以下のようになります。

```math
\vec{V_3} = \vec{V_2} + \vec{V_d}\\
\vec{V_4} = \vec{V_1} + \vec{V_d}
```
これより答えがわかります。
ここで、回転させるときは以下の行列をかければできますね。

```math
\\
R(\theta) = \left(
    \begin{array}{cc}
    \cos{\theta} & -\sin{\theta} \\
    \sin{\theta} & \cos{\theta}
    \end{array}
 \right)
```
90度回転させるときは以下の式です。

```math
\\
R(90^\circ) = \left(
    \begin{array}{cc}
    \cos{90^\circ} & -\sin{90^\circ} \\
    \sin{90^\circ} & \cos{90^\circ}
    \end{array}
\right)
=
\left(
    \begin{array}{cc}
    0 & -1 \\
    1 & 0
    \end{array}
\right)
```

ぶっちゃけると今回は回転行列のような複雑なことは考えなくても大丈夫です。
しっかりめに書きましたが、90度,180度,270度の回転ならばx座標とy座標を入れ替えて`1`倍か`-1`倍するとできます。
私が解いたときも回転行列を使わず、手で試しながら上の式の計算結果と同じものを導きました。
(60度等の回転をさせるときに真価を発揮します)

## C - Triangular Relationship

``` c++
  ll n, k;
  cin >> n >> k;

  ll c_od = 0;
  ll c_ev = 0;

  if (k & 1)
  {
    // 奇数
    c_od = n / k;
  }
  else
  {
    // 偶数
    ll cnt = n / (k / 2);
    c_od = (cnt + 1) / 2;
    c_ev = cnt / 2;
  }
  cout << c_od * c_od * c_od + c_ev * c_ev * c_ev;
```
倍数が出てくる問題を考えるときは、`K`を何倍するかの係数で考えると考えやすいです。

`K`が奇数の時、`K`の整数倍の数を3つ組み合わせたものが答えになります。

`K`が偶数の時、`K`の半分の数を`Kh`として、
・`Kh`を奇数倍したものを3つ組み合わせたもの
・`Kh`を偶数倍したものを3つ組み合わせたもの
の和が答えになります。
同じものを重複を許して3個とる組み合わせは単に3乗すれば求まります。

例えば入力例 (`N=3, K=2`) のときを考えます。
`K`は偶数です。`K`の半分の値は`Kh = 2/2 = 1`です。
このとき、`N = 3`以下の正整数のうち、
`Kh = 1`の奇数倍は2個
`Kh = 1`の偶数倍は1個
ですね。
`2^3 + 1^3 = 9`が答えになります。

以上です。ありがとうございました。
(Intelij)Spring BootでHelloWorld


# 手順

1. InteliJで「File」→「New」→「Project」
2. 表示されたNew Projectで「Spring Initializer」を選択し、「Next」
3. 適当に「Group」,「Artifact」を入力。サーバにデプロイしたいので、「Packaging」は「War」を選択し、「Next」
4. Webアプリケーションを作りたいので、「Web」→「Spring Web」にチェックし、「Next」
5. 適当に「Project name」,「Project location」を入力し、「Fisnish」
6. 自動作成されたDemoApplicationに以下の通り追記し、実行。

私は`@RestController`がなくて、ハマりました・・・

```diff
package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
+ import org.springframework.web.bind.annotation.GetMapping;
+ import org.springframework.web.bind.annotation.RestController;

@SpringBootApplication
+ @RestController
public class DemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }
+    @GetMapping("/hello")
+    public String sayHello() {
+        return "Hello World";
+    }
}

```

7. 以下URLにアクセスすると「Hello World」が表示されるはず

[http://localhost:8080/hello](http://localhost:8080/hello)

<img width="1151" alt="スクリーンショット 2020-07-26 12.53.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164721/1e731920-953e-ccd5-0620-dce7104b64a6.png">
【Rails】JavaScriptが絡むテスト

## はじめに
Capybaraでのテストで、JavaScriptが作動する処理をする場合には少し設定を変える必要があります。
今回は簡単な例としてクリックするとテキストが変わる処理についてテストしてみます。

![36a2e16cd12c7ebb3b25be633051a96a.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605568/6fe59adf-32a9-646b-94b1-3b866db9edb4.gif)
railsのバージョンは5.2.3を使用しています。
## 設定
まずはCapybaraを導入する必要がありますが、わからない方は過去に書いた[こちらの記事](https://qiita.com/koki_73/items/c033e7a059192ec73c25)を参照してください。

続いてhelperファイルに追記します。

```rb:spec_helper.rb
# 最後の行に追加
ENV["RAILS_ENV"] ||= 'test'
require File.expand_path("../../config/environment", __FILE__)
Capybara.javascript_driver = :selenium_chrome_headless
```
※ なぜかjavascript_driverにwebkitを使うとうまくいきませんでした…
　詳しい方いたらコメントいただけると助かります。

## テストファイル
`spec/features`の下にファイルを用意します。

```sample_spec.rb
require 'rails_helper'

feature 'post', type: :feature do

  scenario 'jsが動作すること', js: true do
    # クリックの表示が存在する
    visit root_path
    expect(page).to have_content('クリック')

    # クリックの文字をクリックするとOKになる
    find('.js-class').click
    expect(page).to have_text("OK")
  end
end
```
jsを動作させたい場合は上述のようにscenarioの行に`js: true`を追記する必要があります。

念のためviewファイルとjsファイルも載せておきます。
（HamlとjQueryを使ってます）

```haml:index.html.haml
.header
  = link_to "トップページ", root_path
.js-class
  クリック
```
```js:sample.js
$(function(){
  $(".js-class").on("click", function() {
    $(this).text("OK");
  })
})
```

## テスト実行
あとはターミナルから実行するだけです。

```:ターミナル
$ bundle exec rspec spec/features/sample_spec.rb
```
<img width="417" alt="fcbc5bed345b38c37a9394684c68513a.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605568/b142e749-ea67-d6cc-c9fc-23c9c9405a2f.png">
うまくテストが通ってます。
ubuntu1804 で知らない間に大きくなっていた不要なデータ（java,journal,snap)の削除

仮想マシン上に構築しているUbuntu(1804)の空きディスクが少なくなってきたので不要なファイルを調査・削除

知らない間（もしくは想定外）に肥大化（数百MB以上）していたデータは以下でした。それぞれ削除時に参考にした記事です。

| データ | 確認用コマンド | 削除手順 |
|:--|:--|:--|
| 古いJava   | update-alternatives --config java | [How To Uninstall JDK From Linux ?](https://novicestuffs.wordpress.com/2017/04/25/how-to-uninstall-java-from-linux/)  |
| journalログ  | journalctl --disk-usage  | [journalctl ログの最大サイズを設定](https://fugenjikko.com/archlinux/archlinux-journal-maxsize)  |
| 古いバージョンのスナップ  | 【使用量】df -h &#124; grep snap <br> 【無効なSnap】snap list --all &#124; grep disabled  | [How to remove old version of installed snaps](https://superuser.com/questions/1310825/how-to-remove-old-version-of-installed-snaps)  |


もちろん、基本的なとこも。

```
sudo apt autoremove
sudo apt autoclean
```
コマンドライン入力でテキストファイルを読み込んで、整形して吐き出すだけのツール

# 動機
Elsevierのとある雑誌のこれまで発刊された全論文（オンライン化されてるもの）の書誌情報＋アブストラクトのデータベースを作って、その分野の大きな流れをつかみたい。

ってことで、雑誌のページからひたすら書誌情報とアブストラクトをGoogle スプレッドシートに展開して、ついでに翻訳もしてるんだが、翻訳作業はともかく、書誌情報とアブストラクトがシンプルな改行だけで区切られた形になっていて、このままスプレッドシートに張り付けてもDBにならない。

手作業でコピペを繰り返してたが、ええ加減嫌になってきたので、整形してCSV化して吐き出させるプログラムを作る。

# 調べたこと
## コマンドライン入力をどうやるのか
```{python}
import sys
sys.argv[0]  # 実行してるファイルのパス
sys.argv[1]  # 一つ目の入力 
```
## ファイル読みこみ(1行ずつ）
```{python}
f=open(path, mode = r, encoding="UTF-8")
for s_line in f:
    print(s_line)
f.close()
# あるいは
with open(path, mode = r, encoding="UTF-8") as f
    for s_line in f:
        print(s_line)

```
## ファイル書きこみ
```{python}
f=open(path, mode = w, encoding="UTF-8")
    f.write("文字列")
f.close()
# あるいは
with open(path, mode = r, encoding="UTF-8") as f
    f.write("文字列")
```

## 日付時間取得
`%Y`：年、`%m`：月、`%d`：日
`%H`：時、`%M`：分、`%S`：秒

```{python}
import datetme
dt_now = datetime.datetime.now()
print(dt_now.strftime("%Y_%m_%d_%H_%M_%S"))
```


# 書いたプログラム

```{python}
import sys
import datetime

# ファイルパスをコマンドライン入力から読み取る
path = sys.argv[1]

# 読み取ったファイルを開く
f = open(path, encoding="UTF-8")

# 1行ずつ読み取って整形.区切り文字は";"
T = ""
for s_line in f:
    print(s_line)
    if s_line != "\n" :
        T = T+'"'+s_line.rstrip('\n')+'";'
    elif s_line == "\n" :
        T = T + "\n"


dt_now = datetime.datetime.now()
fname = "MakeDB"+dt_now.strftime("%Y_%m_%d_%H_%M_%S")+".csv"

# nf=open()でも良かったが、試しにwwithを使ってみた。
with open(fname,mode='w',encoding="utf-8") as nf:
    nf.write(T)

f.close()
```
プログラムの著作物について，著作権法上，適法である行為

応用情報技術者令和元年秋期 午前問7

プログラムの著作物について，著作権法上，適法である行為はどれか。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/c117fb9f-1c29-cf1b-6ffc-2d811435add2.png)


プログラムの著作物を改変して使用することは、原則として、著作者の同一性保持権を侵害する行為として著作権法で禁止されています。
ただし、著作権法20条2項では特定の**4つのケース**に限り改変を認めています。
１、用字又は用語の変更その他の改変で、学校教育の目的上やむを得ないと認められるもの
２、建築物の増築、改築、修繕又は模様替えによる改変
３、特定の電子計算機においては実行し得ないプログラムの著作物を当該電子計算機において実行し得るようにするため、又はプログラムの著作物を電子計算機においてより効果的に実行し得るようにするために必要な改変
４、その他、著作物の性質並びにその利用の目的及び態様に照らしやむを得ないと認められる改変

エは上記３適法てすね。
イは社内教育ですが、２適法しないですね。

ア：みなし侵害行為
イ：複製権及び頒布権を侵害する行為
ウ：業務上作成したプログラムの著作権は原則として**法人**に帰属します。作成した担当者は著作者ではないので、勝手に貸与すると法人の著作権を侵害することになります。


参照：
https://www.ap-siken.com/kakomon/01_aki/q78.html
http://copyright.watson.jp/consider.shtml
同時に同一のレコードにアクセスして編集しがちなテーブルにはlock_versionが使えるかも

#はじめに
Rails Guide読んでて気になったので実際に触ってみました。そのメモです。

アプリにてAさんとBさんが同じレコードを編集する際、全く同じタイミングで同じレコードにアクセスした場合、Aさんがレコードをupdateしてその後にBさんがupdateするとBさんはAさんの編集内容を確認せずに上書きしてしまいます。
これが同じ属性のupdateならまだしも別の属性である場合は編集が巻き戻されるので良くない状況です。


この問題に対しActive Recordにlock_versionが用意されています。
lock_versionはテーブルにそのインスタンスの編集履歴カウントの役割をするカラムを追加し、その値を参照することで
lock_versionを利用すると上記の様なケースに置いてエラーを発生させることができます。



#使用方法
利用するにはテーブルにlock_versionというカラムを作成すればいい。

```.rb
t.integer :lock_version, default: 0
```


#動作確認

```ruby
p1 = Memo.find(1)
p2 = Memo.find(1)
# => #<Memo id: 1, text: "hello", lock_version: 0>
```
当然ですがまだ呼び出した時点ではlock_versionは0
次にp1をupdateします。

```ruby
p1.update(text:'good bye')
# => #<Memo id: 1, text: "good bye", lock_version: 1>
```

```sql:SQL
   (0.3ms)  BEGIN
  Memo Update (13.4ms)  UPDATE `memos` SET `text` = 'good bye', `lock_version` = 1 WHERE `memos`.`id` = 1 AND `memos`.`lock_version` = 0
   (3.9ms)  COMMIT
```
look_versionが1に書き換わりました。
またupdateのSQLの条件に`lock_version = 0`があることも確認できます。
次はp2をupdateしてみましょう。reloadしていないのでp2のインスタンス のlock_versionは0のままです。

```ruby
p2.update(text:'say hello')
# => ActiveRecord::StaleObjectError (Attempted to update a stale object: Memo.)
```
```sql:SQL
   (0.7ms)  BEGIN
  Memo Update (1.0ms)  UPDATE `memos` SET `text` = 'say hello', `lock_version` = 1 WHERE `memos`.`id` = 1 AND `memos`.`lock_version` = 0
   (2.4ms)  ROLLBACK
```
ちゃんとエラーでていますね。
SQL自体はエラー実行しても出ないと思うのでrails側で影響与えた行がないことをトリガーとしてエラーを返している感じかな？
今回ソースまで読まないので読んだ方は共有していただけると助かります!

# 動作確認(Web）
RailsApi通り、formにhiddenパラメータとしてlock_versionを入れましょう。
これがないとバックエンドでlock_versionの比較ができないのでエラーを発生しません。

```html
<input type="hidden" value="2" name="memo[lock_version]" id="memo_lock_version">
```
上記を追記し、同じレコードを編集するタブを２つ開いてそれぞれupdateすると後からupdateした方に無事エラーが出ました。
<img width="1010" alt="スクリーンショット 2020-07-26 11.22.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/327992/5953a757-b42c-89d9-0fe6-cf855e25a0f4.png">

あとはこれまたRailsApiにある通りエラーハンドリングして対応しましょう。
対応の仕方としては色々考えられますね。

- ２人が別々の属性を編集したのであればそのまま順番にupdateして同一の属性を編集した時は画面に表示してユーザーに確認
- 自分よりも前の人がupdateした他の属性には影響が及ばない様にした上でupdateさせる

とか。この辺はデータがアプリ上でどの様に使用されているかによりけりと言ったところでしょうか。

#最後に
僕は実務で利用したことないので「ウチではこうやってるよ！」的な共有がいただけると嬉しいです！




#参考記事

 [Rails Guide](https://railsguides.jp/active_record_basics.html#%E3%82%B9%E3%82%AD%E3%83%BC%E3%83%9E%E3%81%AE%E3%83%AB%E3%83%BC%E3%83%AB)
[What is Optimistic Locking](https://api.rubyonrails.org/classes/ActiveRecord/Locking/Optimistic.html)
備忘録: Windows 10のノートPCのキーボードを無効化する方法


# ノートPC

* ThinkPad E570
* Windows 10


# 結論

この記事に助けられた:
https://kourogi565656.blogspot.com/2018/08/pc.html

ざっくりメモ:

1. "regedit"でWindowsを検索してレジストリエディターを出す。
2. HKEY_LOCAL_MACHINE → SYSTEM → CurrentControlSet → Services → i8042prt → Start → "DWORD(32ビット)値の編集"の値を3から4へ変更する（16進数を選ぶ）。
3. PCを再起動する。

ありがたい……。本当にありがたい……。


# 補遺

1年くらい前にノートPCに水をこぼしてしまい、それからキーボードが上手く効かなくなった。具体的にはShiftキーが自動的にON/OFFされる。

可視化:
![buzz.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150194/cd262835-cb68-da00-9541-00e4757b413d.gif)


当時 上記の記事を見つけて解決し、それ以降は外付けキーボードを併用して事なきを得ていた。しかし、さっきWindowsUpdateしたらまた元に戻ってしまった。ｳﾞｧｧｰｯってなりながらスマホで解決策をググったら、上記の記事が再ヒットして、そういえば前にもここ参考にさせてもらったなと思い出した。

また起こり得そうなので備忘録としてメモする。
Android: layout_marginHorizontal と paddingHorizontal は積極的に使おう

# 結論

Android XML のレイアウトで左右に同じサイズの margin, padding を設定するときには、個別にパラメーターを設定するのではなく `layout_marginHorizontal` `paddingHorizontal` を使いましょう。

```XML
<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingHorizontal="16dp">
...
</FrameLayout>
```

`android:paddingHorizontal="16dp"` は `android:paddingLeft="16dp"` と `android:paddingRight="16dp"` を指定したものと同じ意味となります。

上下の margin, padding の場合は `layout_marginVertical` `paddingVertical` を使います。

# ~Horizontal, ~Vertical は Android 8 未満でも使える

これらは Android 8 からサポートされた機能ですが、通常通りビルドするだけで Android 8 未満でも動作します。

[Unified layout margins and padding](https://developer.android.com/about/versions/oreo/android-8.0#ulmp)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17931/0ca25c98-bbd8-4757-2749-4b84388ceed2.png)

AAPT2 2.16 により、 ~Horizontal 要素が ~Left ~Right、 ~Vertical 要素が ~Top  ~Bottom へ変換されるため、 Android 8 未満を含めたすべての Android バージョンで利用することができます。

https://android.googlesource.com/platform/frameworks/base.git/+/master/tools/aapt2/readme.md#version-2_16

> Versioning of XML files is more intelligent, using a small set of rules to degrade specific newer attributes to backwards compatible versions of them. Ex: android:paddingHorizontal degrades to android:paddingLeft and android:paddingRight.

最新のビルド環境を使っていれば AAPT2 は上記に対応していると思います。 AAPT2 は Android SDK Build-Tools に含まれるため、最新の Build-Tools を使いましょう。

# 要素一覧

margin, padding それぞれ Horizontal と Vertical があります。

[android:layout_marginHorizontal](https://developer.android.com/reference/android/view/ViewGroup.MarginLayoutParams#attr_android:layout_marginHorizontal)

> Specifies extra space on the left and right sides of this view. Specifying layout_marginHorizontal is equivalent to specifying layout_marginLeft and layout_marginRight.

[android:layout_marginVertical](https://developer.android.com/reference/android/view/ViewGroup.MarginLayoutParams#attr_android:layout_marginVertical)

> Specifies extra space on the top and bottom sides of this view. Specifying layout_marginVertical is equivalent to specifying layout_marginTop and layout_marginBottom with that same value.

[android:paddingHorizontal](https://developer.android.com/reference/android/view/View#attr_android:paddingHorizontal)

> Sets the padding, in pixels, of the left and right edges;

[android:paddingVertical](https://developer.android.com/reference/android/view/View#attr_android:paddingVertical)

> Sets the padding, in pixels, of the top and bottom edges;
【AWS】aws configure コマンド実行で、.aws配下に設定ファイルが作成される

# aws configure コマンド
`aws configure`
このコマンドを実行すると、認証情報、リージョン、出力形式をすばやく設定および表示できます。

```
$ aws configure
AWS Access Key ID [None]: AKI*************PLE
AWS Secret Access Key [None]: wJa***********************************KEY
Default region name [None]: ap-northeast-1
Default output format [None]: json
```

# この設定の保存先
bundle installでオプション（例えば`--path vendor/bundle`）を追加すると `.bundle/config`に設定が保存されるのと同じ要領で、
aws configure コマンド実行後、ホームディレクトリーに`.aws` というディレクトリーが作成され、設定ファイルが格納されます。

```
[root@vanilla ~]# ls -a
.  ..  .bash_logout  .bash_profile  .bashrc  .cshrc  .ssh  .tcshrc 
###
###↑.awsディレクトリーは存在しない
[root@vanilla ~]#
[root@vanilla ~]#
[root@vanilla ~]# aws configure
AWS Access Key ID [None]: AKI*************PLE
AWS Secret Access Key [None]: wJa***********************************KEY
Default region name [None]: ap-northeast-1
Default output format [None]: json
[root@vanilla ~]#
[root@vanilla ~]#
[root@vanilla ~]# ls -a
.  ..  .aws  .bash_logout  .bash_profile  .bashrc  .cshrc  .ssh  .tcshrc
###
###↑.awsディレクトリーが作成された
[root@vanilla ~]#
[root@vanilla ~]# cat .aws/credentials
[default]
aws_access_key_id = AKI*************PLE
aws_secret_access_key = wJa***********************************KEY
[root@vanilla ~]#
[root@vanilla ~]# cat .aws/config
[default]
output = json
region = ap-northeast-1
```

AWS CLIは**設定ファイルから認証情報を読み取る**ので、
`aws configure` をしなくても、そのまま`.aws`ディレクトリーと設定ファイルを作成すれば事足ります。

例えばChefなどのIaCツールで自動的にEC2インスタンスを立ち上げたい場合は、
「.awsディレクトリー配下に設定ファイルを作成する」という記述でOK。
コンポジションの間で関連が複雑に張られてしまうようなクラス図をシンプルに書きたい

次のようなクラス図を書きたいとします。

1. ドローンシステム1つは，リモコンとドローンを複数コンポジションとして持つ
2. リモコンとドローンは1対1の関係にある

1を表現するのに次のようにクラス図を書きます。

<img width="272" alt="Screen Shot 2020-07-26 at 11.26.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55223/a8bc1097-2cfe-6640-6c42-97ef580b0d25.png">

2を表現するのに次のようにクラス図を書きます。

<img width="232" alt="Screen Shot 2020-07-26 at 11.27.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55223/08163398-ce53-c639-cf5c-e6854a3b5d4f.png">

この2つを合わせると次のようなクラス図になります。

<img width="320" alt="Screenshot 2020-07-26 11.29.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55223/af2b16b8-743a-09c7-d1f9-df759968ed09.png">

しかし，このような書き方だと，リモコンやドローンのような部品の種類が増えた時に，複雑に関連が入り乱れるようになります。どのように記述するとシンプルになるでしょうか？

# 汎化とOCLを用いた解法例

[「汎化と関連を組合せてクラス図を書いた時，サブクラスのインスタンスの種類や個数の制約を定義したい」](https://qiita.com/zacky1972/items/62a51b0324e4612c4dab)で紹介したように，汎化と関連を組合わせたクラス図を書き，それにOCLを追加することで解決してみることを考えます。

まずリモコンとドローンのスーパークラスを考えるのですが，たとえば「ペアリング機器」とでも命名してみましょうか。

<img width="235" alt="Screen Shot 2020-07-26 at 11.36.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55223/c62daabc-5faa-7b94-da93-2e7a305f11e3.png">

ペアリング機器同士が1対1の自分自身への関連を持つというようにして，ドローンシステムがペアリング機器を複数持つ，というようにすると良さそうです。

<img width="364" alt="Screen Shot 2020-07-26 at 11.40.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55223/6b2360fd-896c-72af-b1a7-287d81c64459.png">

ではOCLを定義してみましょう。

```
context ペアリング機器 inv:
  self.oclAsType(リモコン) implies self.ペアリング.oclAsType(ドローン)
  and self.oclAsType(ドローン) implies self.ペアリング.oclAsType(リモコン)
```

これの意味するところを日本語で書くと次のようになります。

* 次の条件のどちらも成立する
  * ペアリング機器がリモコンクラスだったならば，そのペアリング機器のペアリング先のクラスはドローンである
  * ペアリング機器がドローンクラスだったならば，そのペアリング機器のペアリング先のクラスはリモコンである

つまり，ペアリングの関連の一方がリモコンでもう一方がドローンであることを保証します。

なお，ペアリング機器がリモコンクラスでなかった場合，`self.oclAsType(リモコン)` は偽になるので， `self.oclAsType(リモコン) implies self.ペアリング.oclAsType(ドローン)` は前提条件を満たさず真になることに注意してください。(「AならばB」という命題がある時，Aが偽だった時にはBが真でも偽でも「AならばB」は真になる)
【初心者】Rails6 でプロジェクトを立ち上げるまでとつまづいたところ

####rubyのバージョン確認、インストール

```
$ ruby --version
```
rubyのバージョンは2.5.0以上であれば動きます。ただ、最新版の方がメソッド追加や処理が早くなっていたりします。今は2.7.1が安定版のようです。

```
＃最新のrubyをインストール
$ rbenv install 2.7.1 
```

####rails6でプロジェクトの立ち上げ　
```
$ mkdir sample_app
$ cd sample_app

#rubyのバージョン変更
$ rbenv local 2.7.1

#rails6インストール
$ gem install rails -v '6.0.0'

# DBをPostgreSQLに変更しています
$ rails _6.0.0_ new -d postgresql

$rails s
```

####つまづきポイント

通常なら上記で立ち上がるのですが、初めてrails6を使うと

```
$ rails s

=> Booting Puma
=> Rails 6.0.0.rc2 application starting in development 
=> Run `rails server --help` for more startup options

RAILS_ENV=development environment is not defined in config/webpacker.yml, falling back to production environment
Exiting
...
/home/ubuntu/.rvm/gems/ruby-2.6.3/gems/webpacker-4.0.7/lib/webpacker/configuration.rb:91:in `rescue in load': Webpacker configuration file not found /home/ubuntu/environment/test-app1/config/webpacker.yml. 
Please run rails webpacker:install Error: No such file or directory @ rb_sysopen - /home/ubuntu/environment/test-app1/config/webpacker.yml (RuntimeError)
```
こんなエラーが出てきます。
これはwebpackerがインストールできていないエラーなので

```
$ rails webpacker:install 
```
すれば解決します。
再度、

```
$ rails s
```
を実施すれば

<img width="664" alt="スクリーンショット 2020-07-26 11.45.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547550/42ddb103-0dac-8b15-c145-91849db9a129.png">
LINE LIVEのチャット取得

コメントビューア用。
OAuthが要るようなAPIは使わず、未登録で取得できるコメントを取得。
あくまで執筆時点の情報です。仕様が変わる可能性もあるのであしからず。

## ユーザのチャンネルURL
- `https://live.line.me/channels/{ユーザID}`


## 手順

1. 動画IDの取得
  - GET `https://live-api.line-apps.com/web/v4.0/channel/{ユーザID}`
  - レスポンス

    ```js
    {
        /** ステータスコード。正常時200が返ってくるっぽい。 */
        "apistatusCode": number,
        /** ユーザID */
        "id": number,
        /** タイトル */
        "title":string,
        /** 配信してたらtrue */
        "isBroadcastingNow": boolean,
        "liveBroadcasts": {
            "hasNextPage": boolean,
            /** 配信してたら要素がある。してなかったら空配列。  */
            "rows": {
              /** ステータスコード。正常時200が返ってくるっぽい。 */
              "apistatusCode": number,
              /** ユーザID */
              "channelId": number,
              /** 動画ID */
              "id": number,
              /** 配信中なら"LIVE" */
              "liveStatus": string,
              // 省略
            }[],
            /** ステータスコード。正常時200が返ってくるっぽい。 */
            "apistatusCode": number
        },
        /** ステータスコード。正常時200が返ってくるっぽい。 */
        "status": number,
        // 省略
    }
    ```
  - 細かくチェックするなら各階層のステータスコードチェックが要るが、正常系だけ作るなら無視でOK
  - isBroadcastingNowがtrueかチェック
  - liveBroadcasts.rows[0].idを動画IDとして取得


2. チャットのURLを取得

    `https://live-api.line-apps.com/web/v4.0/channel/{ユーザID}/broadcast/{動画ID}`

    ```js
    {
        "chat": {
            /** チャットのWebSocketURL */
            "url": string,
            /** 配信中ならnull。たぶんstringになる。 */
            "archiveURL": any,
            /** 配信者コメントのWebSocketURL */
            "ownerMessageURL": string
        },
        "status": 200,
        // 省略
    }
    ```
    - チャットのURLは以下のような感じ
      - `wss://cast-chat-{数値}.line-apps.com/chat/app/{動画ID}/{配信ごとの英字。乱数っぽい}`

3. チャット受信
 - 取得したチャットURLでWebSocket接続する。レスポンスの種類はいっぱいあるので必要なもの以外は無視する。
 - メッセージの共通の型は以下。

  ```js
{
  "type": string,
  "data": object
}
  ```

- typeの種類（確認できたもの） 

| type | 内容 |
| --- | --- |
| entranceAnnouncement | 入場した
| followStart | フォローした
| pokeReceive | (謎)
| gift | ギフト
| giftMessage | （giftとセットで飛んでくる）
| love | 
| guideMessage | 
| systemMessage
| bulk |
| message | コメント

- type: messageのdata

```js
{
    /** コメント */
    "message": string,
    /** コメントしたユーザ */
    "sender": {
        "id": number,
        "hashedId": string,
        /** ユーザ表示名 */
        "displayName": string,
        /** アイコン画像のURL */
        "iconUrl": string,
        "hashedIconId": string,
        "isGuest": boolean,
        "isBlocked": boolean,
        "isPremiumMember": boolean
    },
    "sentAt": number,
    "isNGMessage": boolean,
    "key": string,
    "roomId": string
}
```
docker image/containerの削除

#docker image
### 現在のイメージ確認
```
docker images
```
###イメージの削除
```
docker rmi イメージID
```
###イメージの一括削除
```
docker images -aq | xargs docker rmi
```

###イメージの強制削除
```
docker rmi -f イメージID
```

#docker container
###現在のコンテナ確認
```
docker ps -a
```
###コンテナの削除
```
docker rm コンテナID
```

##"Error response from daemon: conflict: unable to delete ~ (cannot be forced) - image has dependent child images"というエラーが出たら
下記コマンド実行して依存関係を紐解いていき削除していく。

```
for i in $(docker images -q)
do
    docker history $i | grep -q "docker image ID" && echo $i
done | sort -u
```

##参考
https://laraweb.net/environment/6986/
AzureとSDKとGoと私

2020年7月8日(水)にオンラインで開催されたMicrosoft Open Tech Night主催の

- [de:code夏まつり ～よりコミュニティを楽しくするためのコミュニティのすすめ #3](https://msdevjp.connpass.com/event/175983/)

にて「[AzureとSDKとGoと私](https://www.slideshare.net/qt-luigi/azuresdkgo)」というタイトルで発表をさせて頂きました。

[![thumbnail](https://image.slidesharecdn.com/azure-sdk-for-go-and-me-200708112846/95/slide-1-638.jpg)](https://www.slideshare.net/qt-luigi/azuresdkgo)

GoやAzure SDK for Goは初めてという方向けに、

- Goの概要
- AzureとSDKの構成（RESTful、autorest、など）
- Azure SDK for Goについて
- 私の活動内容
- Azure Functions for Go

について紹介しています。

興味のある方は一読して頂けると、Azure SDK for Goの扉の前にお連れできると思います。

P.S. 日本マイクロソフト公式Twitterアカウント「Microsoft Tech」([@msdevjp](https://twitter.com/msdevjp))さんに「Go」の二文字がツイートされる奇跡！

- https://twitter.com/msdevjp/status/1280821089610973184
Blenderで Ambient Occlusion をベイクする

## 何が必要か
BlenderでAmbient Occlusionを操作できるウィンドウが多くて混乱するので覚書
結論から言うと、worldのAmbient Occlusionは使わなくてもベイクは出来た
### 事前準備
以前の私の記事である[Blenderでマテリアルを陰影なしでテクスチャにベイクする方法](https://qiita.com/kcode/items/217f45e210eccfcee8a2)の手順９までは同一である
## いざ、ベイク
事前準備で手順９まで進めたことを前提に説明する
10. Bake Type をAmbient Occlusioに設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204935/6a0bd736-4cfd-37e3-ad85-cef07da43292.png)
11. 非表示のオブジェクトの陰影も考慮されるため、関係のないオブジェクトはレンダーしないようにする（カメラマークアイコンをオフにする）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204935/25d4144e-884e-699d-b269-4610b7faf78d.png)
12. 最後にBakeボタンを押せば完了です
以下の画像では平面(床)に Ambient Occlusion のベイク処理をしています
真ん中の立方体のみをレンダーの対象としているため、真ん中の立方体のみの陰影がベイクされています
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204935/9bdaca11-03cc-9ef8-f429-8933f8ea34ca.png)
forticlient6.0 アンインストール

## 結論

FortiClientのインストーラーをダウンロードして、起動すると、「remove」が出てくるので、それで削除できました。
windows10環境です。

### FortiClientのインストーラー
https://forticlient.com/downloads
> Get FortiClient 6.0 for Windows の「Download」をクリック

## 補足

手動でFortiClientのネットワークアダプタを手動削除するなど、通常の操作以外の事をやらかしたので、FortiClientがVPN先に繋がらなくなりました。
具体的にはパスワードを入力して接続が98%までいくが、その後、パスワード入力画面に戻される状態になり、FortiClientを一旦削除して、再インストールしようと思いました。

forticlient アンインストール方法はネットで検索しましたが、インストーラーからの削除方法を見つけられなかったため、記事化しました。

## （参考）以下試したけどダメだった１

https://tec-world.networld.co.jp/faq/show/10266#:~:text=Fortinet(公開)&text=①FortiClientを起動し、画面,アイコンをクリックします。&text=『OK』をクリックします。&text=アンインス
> ①FortiClientを起動し、画面左下の『ロック解除設定』と表示されている南京錠アイコンをクリックします。 
> ②画面左の「設定」を選択して頂き、画面右上に表示されている南京錠アイコンをクリックします。 『OK』をクリックします。 アンインストールが表示されるようになります

上記操作しないと、「アプリケーションの追加と削除」からも「アンインストール」ボタンが表示されませんでした。

1度目は、上記操作でアンインストールを実行、PC再起動しましたが、削除できませんでした。
（手動でFortiClientのネットワークアダプタを手動削除するなど、通常の操作以外の事をやっていたので、不具合を誘発したのかもしれません。）

その後、FortiClientを起動する、「リブートしてください」を表示され、再起動しても同じメッセージが表示されました。
この後は、ネットで「アプリケーションの追加と削除」で「アンインストール」を表示される方法をやっても、「アンインストール」が出てこなくなりました。

## （参考）以下試したけどダメだった２

FortiClientの、「アプリケーションの追加と削除」から「修復」があるけれども、
「修復」を実行後、VPN先に接続できない症状は直りませんでした。
Dateを扱うときは12時間表記設定を考慮しよう。

# 要約
- カスタムフォーマットの日時文字列からDate変換時にnilが返却される。
- シミュレータでは発生しない、実機で発生する
- 国内のみのサービスでもDateFormatterにはLocaleは必ず設定し利用する。
- 可能であれば実機利用のテストのタイミングに組み込む

# 現象
文字列からDate変換するときに、端末の設定が12時間表記になっていると必ずnilが発生。
シミュレータでは発生しないので、忘れがち。

### 問題になるパターン

| 変換文字列 | 24時間 | 12時間 | シミュレータ |
|----------|-------|--------|----------|
| 時刻を含む文字列 | 成功 | 失敗(nil) | 成功 |
| 時刻を含まない文字列 | 成功 | 成功 | 成功 |

#### 参考 問題になるコード

```swift
let dateFormmater = DateFormatter()
dateFormmater.dateFormat = "yyyy-MM-dd HH:mm:ss"

/// 12時間表記の際に date == nil となる.
let date = dateFormmater.date(from: "2020-03-02 10:00:00")
```

# 対処方法
### Formatter設定時Localeを設定する

実機でもdateFormatterにはLocaleが設定されているものの、localeを改めて設定する必要がある。

```swift
let dateFormmater = DateFormatter()
dateFormmater.dateFormat = "yyyy-MM-dd HH:mm:ss"
dateFormmater.locale = Locale(identifier: "en_US_POSIX")

/// 12時間表記の際でもnilとならない。
let date = dateFormmater.date(from: "2020-03-02 10:00:00")
```

#### 忘れがちなのでExtenstionにしてしまう.
状況によって固定値も含めてしまうとよい。

```swift
public extension DateFormatter {
   
    static var standard: DateFormatter {
        let standard = DateFormatter()
        standard.dateFormat = "yyyy-MM-dd HH:mm:ss"
        standard.locale = Locale(identifier: "en_US_POSIX")
        return standard
    }
}
```
コードで強力に制約をするのであれば、DateFormatterをwrapするのが良さそう。

# おまけ
## 海外対応時のメッセージの受信時刻表示で必要なこと
- 時刻データのタイムゾーンとクライアントのタイムゾーンを考慮する
- 時刻表記のフォーマットを考慮する（ここでは触れていない）

```swift
let dateFormmater = DateFormatter()
dateFormmater.dateFormat = "yyyy-MM-dd HH:mm:ss"
dateFormmater.locale = Locale(identifier: "en_US_POSIX")
/// 時刻データのタイムゾーンでDateへ変換.
dateFormatter.timeZone = TimeZone(abbreviation: "JST")
let date = dateFormmater.date(from: "2020-03-02 10:00:00")

/// 端末のタイムゾーンで文字列に変換.
dateFormatter.timeZone = TimeZone.current
let dateString = dateFormatter.string(from: date!)
```
【AWS】アカウント削除

# アカウント使用の流れ
0. [開始前知っておくべきポイント](https://qiita.com/hello112334/items/d9beef22cc5d66fbf578)
1. [アカウント申請](https://qiita.com/hello112334/items/39548933eeec92af8486)
2. [ログイン](https://qiita.com/hello112334/items/235993219d1f16ac7434)
3. [IAM設定](https://qiita.com/hello112334/items/052f1232f6f54a2531c1)
4. [MFA多要素認証](https://qiita.com/hello112334/items/2180a1f59c4d4d69d4a4)
5. **アカウント削除**

# 参考資料

請求については「Youtube」の「Amazon Web Services」を参照
https://www.youtube.com/watch?v=oauevo1zf28

手順については「Youtube」の「AEM and Devops Tutorial」を参照
https://www.youtube.com/watch?v=1Np5U98vUtQ

# アカウント削除

#### 削除する前の確認リスト

- 大切なものをロカールにバックアップしておく
- EC2のインスタンスを削除
- S3のバケットを削除
- 使用していたIPの削除を確認（VPC）
- 今までの請求書を払う

#### １.AWSマネジメントコンソール
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680439/076e66e3-9cae-f367-de99-bdc538aace58.png)
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680439/d0343a19-e8ce-50e1-247a-2abcb461be87.png)

#### ２.アカウント設定
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680439/1f4cb1e7-5644-4569-884a-b2cca3bae5f7.png)
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680439/550a970f-2dae-ebd0-7e8d-66246da11afa.png)

#### ３.アカウントの解約
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680439/d8b0b2dd-9c5b-7e56-a1ec-ee8622e12f92.png)

#### ４.解約終了
（90日間は閉鎖期間 → 再開できる）
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680439/40d5a0c1-9f89-a97b-eb58-755723f924b5.png)
![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680439/13191f9f-4679-c1ac-04ed-fae5d150321a.png)

#### ５.ログアウト
![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680439/28759e76-4fb4-f63f-c013-aae0a6c5aa8a.png)
windowsでiverilog その57


#概要

windowsでiverilogやってみた。
inoutの作法、調べてみた。

#inoutの作法

双方向入出力やりたいので、inout を使います。

inout は、wire扱い。
regを設定できない。
inout から読むときは、そのまま読める。
inoutに書くときは、regに書いて、assign する。
assignは、書込時にreg、読込時に、zにしておく。

#サンプルコード


```
module tmc(input clk, input rst, input rw, inout dio);
    reg out;
    assign dio = (rw) ? out : 1'bz;
endmodule

```

以上。
TwitterAPIを使ってツイートできない時の対処法

#この記事を書くに至った経緯
高専三年にもなってなにも専門的なことを自主的にできていなく、何かしたいなぁと思っていたところつよつよの友人に助けを求めたら"twitter動かしてみれば"と助言をいただいたためtwitterAPIを使いTwitterに投稿しようしました。
しかし投稿しようとするとエラーになってしまい出来なかったので対処法を共有しようと思いました。(テスト期間)
※同じ症状で記事を書かれている方がいたのですが、2015年の記事で古く、[TwitterDeveloper](https://developer.twitter.com/en/portal/projects-and-apps)のサイトも仕様が変わっていたので最新版を書こうと思いました。
[【TwitterAPI】エラー「Read-only application cannot POST.」の対処法](https://ysklog.net/twitterapi/3397.html)
#環境
この記事ではwindows10にインストールしたpython3.8を使っています。

##Twitter APIについて
TwitterAPIを利用するにあたって参考にした記事はこちら
[Twitter API 登録 (アカウント申請方法) から承認されるまでの手順まとめ](https://qiita.com/kngsym2018/items/2524d21455aac111cdee#consumer-api-keys%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%E6%83%85%E5%A0%B1%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%9Fpython%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%88)

#コード
```python:postTweet.py
import tweepy
import config #各種token

#Oauth認証処理
auth = tweepy.OAuthHandler(config.consumer_key,config.consumer_secret)
auth.set_access_token(config.token,config.token_secret)
api = tweepy.API(auth)

#投稿
text = 'Test tweet from python'
api.update_status(text)
```

```python:config.py
consumer_key = '************'
consumer_secret = '***********'
token = '***********'
token_secret = '***********'
```

#エラー内容
```
tweepy.error.TweepError: Read-only application cannot POST.
```
#原因
Twitter Appの設定がRead onlyになっているため書き込みができない(デフォルトだとこうなってるみたいです）

#対処法
  [Twitter developers公式](https://developer.twitter.com/en/portal/projects-and-apps)
上のリンク先に飛んでPROJECT APPで作成したプロジェクト歯車のマークをクリックし、設定画面に行きます。
![app.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635201/9285e4b5-597f-d846-0fc3-f76f782fce94.jpeg)

少し下にスクロールするとこのような設定画面があるのでEditをクリック。
![readonly.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635201/fdf9c6f3-cc2f-b629-c17a-a0d3f4bc9066.jpeg)

Read and Wrhite か Read+Write+Direct Messagesを選択しSave
![readonly02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635201/68a33cb7-03e2-35b2-3a17-e812b3d9b0cd.jpeg)

#これでいける！
と思いきや各種tokenを再発行しないと無理っぽいです。
再発行した各種tokenをコードに反映させれば終わりです。
これからは投稿ができたので[tweepyの公式リファレンス](https://kurozumi.github.io/tweepy/)を参考にしながらいろいろいじれたらいいなぁと思ってます。(テスト期間が終わったら）
配信サービスのコメント取得方法

index


| サービス | 記事 |
|---|---|
| Youtube | https://qiita.com/pasta04/items/ec7ed6ded14d5af1663e |
| ニコ生 | https://qiita.com/pasta04/private/33da06cf3c21e34fc4d1 |
| Twicas | https://qiita.com/pasta04/items/d7b6132a15f13a9045f3 |
| OPENREC | https://qiita.com/pasta04/items/c22933066154b33ae7e0 |
| LINE LIVE | https://qiita.com/pasta04/items/2b418e9664de00284131 |
| Mildom   | https://qiita.com/pasta04/items/702a249fa808db7c8a1b |
| REALITY  | https://qiita.com/pasta04/items/ec956b129050af0a2b1f |
| SHOWROOM | https://qiita.com/TYoichiro/items/535137094d6ca413b10f |
汎化と関連を組合せてクラス図を書いた時，サブクラスのインスタンスの種類や個数の制約を定義したい

次のようなクラス図を書きたいとします。

1. コントロールパネルはボタンを持つ
2. ボタンの種類として，開始ボタンと終了ボタンがある
3. コントロールパネルは，開始ボタンと終了ボタンを1つずつ持つ

みなさんならどのようにクラス図にしますか？ 少し考えてみてください。

# 暫定解その1

1については，次のようにコントロールパネルがボタンをコンポジションとして持つという表現を用いたら良さそうです。

<img width="219" alt="Screen Shot 2020-07-26 at 10.34.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55223/b618a8cd-fa0a-44c1-edee-fd930cca4a74.png">


2については，次のようにボタンをスーパークラスに，開始ボタンと終了ボタンをサブクラスにした，汎化を用いたら良さそうです。

<img width="235" alt="Screen Shot 2020-07-26 at 10.40.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55223/40142f7c-bf92-81a8-67e5-717914c135d1.png">

これらを組み合わせると次のような図になります。

<img width="318" alt="Screen Shot 2020-07-26 at 10.45.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55223/e72e56bf-6c5c-75c9-3fc4-f24de0eea21a.png">

しかしこれだと3を表現できていません。そのため，この図のままだと，たとえば「開始ボタンだけが複数存在し，終了ボタンが存在しないコントロールパネル」を許容してしまいます。

# 暫定解その2

3を表現することを考えましょう。シンプルに表現するには，次のように，コントロールパネルが開始ボタン，終了ボタンをコンポジションとして持ち，それぞれの多重度を1対1とすれば良さそうです。

<img width="227" alt="Screen Shot 2020-07-26 at 10.52.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55223/d64ce665-483a-e383-093d-9c4f7f6c6a7a.png">


ボタンがたとえば物理的なプッシュボタンのように，押すことの他には特に複雑な機能を有さない場合には，機能を再利用する必要性があまりないので，これがシンプルで良いかもしれません。

しかし，たとえばGUIで実現しているボタンだった時には，ボタンを部品として再利用したいという動機が生まれます。その場合には，このモデリングの方法ではうまくいきません。

# 暫定解その3

暫定解その1とその2を組み合わせることを考えます。

* 暫定解その1より，コントロールパネルがコンポジションとしてボタンを持ち，ボタンのサブクラスとして開始ボタンと終了ボタンがあるというように表現します。
* それに加えて，暫定解その2より，コントロールパネルが開始ボタンと終了ボタンをコンポジションとして持ち，それぞれの多重度を1対1にします。

<img width="330" alt="Screen Shot 2020-07-26 at 10.54.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55223/565d0608-7e6e-2141-52ec-3e5d5afdd347.png">


こうすることで，1〜3の全てを一通り表現することができました。

しかし，コンポジションの線が複数張られていて，いかにも複雑です。

また，コントロールパネルからボタンへのコンポジションと，コントロールパネルから開始ボタン・終了ボタンへのコンポジションの間には，何も関係性を定義していません。なので，コントロールパネルから開始ボタン，終了ボタンにコンポジションが引かれているのと同じコンポジションが，コントロールパネルからボタンにも引かれているという保証がありません。もしかするとコンポジションが引かれていないかもしれませんし，全然関係ないボタンにコンポジションが引かれているかもしれません。こういう状況を「コントロールパネルからボタンへのコンポジションと，コントロールパネルから開始ボタン，終了ボタンへの関連の間に一貫性がない」というように言います。

# 模範解: OCLの利用

3のように種類や個数について限定するような記述のことを制約条件と言います。UMLでは制約条件を記述する有力な方法として，新たにOCL(Object constraint language: オブジェクト制約言語)というものを導入してみましょう。

これを用いた時にはクラス図そのものは暫定解その1の書き方と同じです。

<img width="318" alt="Screen Shot 2020-07-26 at 10.45.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55223/e72e56bf-6c5c-75c9-3fc4-f24de0eea21a.png">

違いは，次のようなOCLの記述を追加しているという点です。

```
context コントロールパネル inv:
  let startButton:開始ボタン = self.ボタン->select(b:開始ボタン | true) in
    let finishButton:終了ボタン = self.ボタン->select(b:終了ボタン | true) in
      (startButton->size() == 1) and (finishButton->size() == 1)
```

これの意味するところを日本語で書くと次のようになります。

* startButtonをボタンで指されているオブジェクトの中でクラスが開始ボタンであるものを集めた集合とする
* finishButtonをボタンで指されているオブジェクトの中でクラスが終了ボタンであるものを集めた集合とする
* startButtonの要素数は必ず1であり，かつfinishButtonの要素数も必ず1である

つまり，開始ボタンと終了ボタンはコントロールパネルに1つずつしか存在しない，ということをOCLで定義しています。
アロー関数式初心者覚書

初心者覚書です。時々JSを使おうとするとアロー関数のことを忘れているのでメモとして作りました。ほぼ[参考](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)を読み、箇条書きにしただけなので、参考サイトを見た方がわかりやすいです。
アロー関数とは

- アロー関数式は、メソッドでない関数に最適で、コンストラクタとして使うことはできない
- 関数を短く書きたい、thisを束縛したくないという2つの理由がある
- 通常関数にはthisがあり、thisが何を指すのかは、通常関数を実行したタイミングで決まるが、
- アロー関数には、それ自体が保有するthisはなく、関数の外のthisを関数内で参照できるだけです。レキシカルスコープのthisを参照します。つまり、アロー関数は定義したときに、thisが指すものがひとつに決まり、どうやって関数が実行されるかに左右されなくなります。
- アロー関数はnewすることができません。つまり、アロー関数はコンストラクタになることができない＞通常関数はclassでextendsできますが、アロー関数はできない


```arrow.js

const materials=[
'aaa',
'bbb',
'ccc'
];

console.log(materials.map(material => material.length));
```
[参考：アロー関数を説明](https://qiita.com/may88seiji/items/4a49c7c78b55d75d693b)

```getTriangle.js
let getTriangle = function(base,height){
return base * height /2;
};
console.log(getTriangle(10,2));
```

```getTriangle_arrow.js
let getTriangle = (base,height)=>{
return base * height /2;
};
console.log(getTriangle(10,2));
```

本文が一文

```getTriangle_arrow_short.js
let getTriangle = (base,height)=> base * height /2;
console.log(getTriangle(10,2));
```

引数がない場合

```getTriangle_arrow_nohikisu.js
let show = ()=>console.log('hi!');
show();
```
@uttk さんに教えてもらったサイト、、
[通常の関数とアロー関数の違いは「書き方だけ」ではない。異なる性質が10個ほどある。](https://qiita.com/suin/items/a44825d253d023e31e4d)

これを見ると巻き上げ、ジェネレータ関数、レキシカルスコープとかよくわからない。

[巻き上げ](https://qiita.com/suin/items/a44825d253d023e31e4d)

```js
regular() // エラーにならない
function regular() {}
```
アロー関数は巻き上げが起こりません:

```js

arrow() // ReferenceError: Cannot access 'arrow' before initialization
const arrow = () => {}
```

これは、アロー関数の性質というよりかは、constの性質によるもので、通常関数の場合でも、constなどを使った定義では、巻き上げが起こりません:

```js
regular() // ReferenceError: Cannot access 'regular' before initialization
const regular = function () {}
```

[ジェネレータ関数]()
通常関数はジェネレータ関数を定義できますが、アロー関数はジェネレータ関数を定義する構文がそもそもありません。

```
function* regular() {
    yield 1
}
```

[レキシカルスコープ変数](https://qiita.com/suin/items/a44825d253d023e31e4d)
通常関数は、argumentsで引数リストを参照できますが、アロー関数ではargumentsが定義されていないため、引数リストを参照できません。アロー関数のargumentsはレキシカルスコープ変数のargumentsを参照するだけです。

```lexical.js
const arguments = 'hoge' // レキシカルスコープ変数

function regular() {
    console.log(arguments)
}
const arrow = () => {
    console.log(arguments)
}

regular(1, 2, 3) //=> [Arguments] { '0': 1, '1': 2, '2': 3 }
arrow(1, 2, 3) //=> hoge

```

アロー関数はletやconstの仕様上、同じ関数名で定義を上書きすることができない

```js

let arrow = () => {}
let arrow = () => {}
//=> SyntaxError: Identifier 'arrow' has already been declared
```

アロー関数でもvarで宣言すると、上書き可能:

```js

var arrow = () => {}
var arrow = () => {}
```

可変長引数?
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/rest_parameters

やばい、色々調べているだけで人生が終わりそう
PyCharmのインタープリタ等の設定方法

# この記事の内容：PyCharmの開発環境ごとの設定方法
開発環境（本番・ステージング・開発等）ごとにPyCharmの設定を分けると開発が楽に進む。しかし、PyCharmの設定はいろいろあって分かりづらい。そこで、PyCharmのディレクトリ構造・Project interpreter・Project structure・Run/Debug Config・Virtualenvあたりについて、個人的におすすめの設定方法を書き残しておく。


# 前提となる環境
フロントエンドとバックエンドを分けて開発していること。

- 以下では例として、フロントエンドはnode、Vue、Axiosで、バックエンドはPython、Django、DRF等を用いて説明する。
- なお、ベースとなるリポトリとして[akiyoko/drf-vue-sample](https://github.com/akiyoko/drf-vue-sample)を用いた。このリポジトリとの差分は、フロントエンドとバックエンドの分離の仕方のみ。

# 達成したいPyCharmの設定
- 環境の分離
    - 開発・ステージング・本番等という開発ステージごとの設定の分離
    - フロントエンド単体、バックエンド単体、結合状態それぞれのモジュールごとの設定の分離


# 設定方法

### ディレクトリ構造
`frontend`と`backend`を分離。トップレベルの`test`で結合テストを実施。結合テストの設定ファイルは（pythonの場合は）`./requiremetns.txt`に書いておく。

```
drf-vue-sample2.
├── backend
│   ├── apiv1
│   ├── config
│   ├── db.sqlite3
│   ├── manage.py
│   ├── requirements.txt
│   ├── shop
│   ├── static
│   ├── tests
│   └── templates
├── frontend
│   ├── babel.config.js
│   ├── node_modules
│   ├── package-lock.json
│   ├── package.json
│   ├── public
│   ├── src
│   ├── tests
│   └── vue.config.js
├── requirements.txt
└── tests
```

## 本番・ステージング・開発等の環境設定
### 環境ラベル
- 環境変数名は`$DEPLOY_ENV`で、ラベルは下記の通り。
    - 開発ローカルサーバー: `dvl`
    - 開発リモートサーバー: `dvr`
    - ステージングリモート: `stg`
    - 本番リモート: `prd`

＊ 開発環境だけはローカルとリモートの環境を2つ用意してある。理想的には`dev`に統一してDocker使ったほうが良い。

### Virtualenvs設定
` ~/.virtualenvs/drf-vue-sample2/bin/activate`の最後に以下を追加する。

```
export $DEPLOY_ENV=環境ラベル
```
こうすると、ターミナルで行う`manage.py`系統の処理（例：`python manage.py makemigrations`）にも環境ラベルが反映されるのでとても便利。逆に言えば、`Run/Dedebug Configuration`や`Interpreter`の設定をいじっても`manage.py`系の処理はターミナルから行う限り失敗する。


### PyCharmのProject interpreter
2つ用意する。

1. 結合テスト（`drf-vue-sample2/test`）を行うpythonインタープリター
    - `drf-vue-sample2-integration`
        - Seleniumを動かす等に用いる。
2. バックエンドのサーバー立ち上げ、またはテストを行うインタープリター
    - `drf-vue-sample2-backend`


### PyCharmのRun/Debug Configuration
3つ用意する。

1. 結合テスト用の設定
    - `integration_${開発ラベル}`
        - テンプレートはpython tests
            - script pathは`drf-vue-sample2/tests`を指定する。
        - インタープリターは`drf-vue-sample2-integration`

2. バックエンド用の設定
    - `backend_${開発ラベル}`
        - テンプレートはDjango server
            - 環境変数に、`${DEPLOY_ENV}`と`${DJANGO_SETINGS_MODULE}`を追加

3. フロントエンド用の設定
    - `frontend_${開発ラベル}`
        - テンプレートはnpm
        - 実行する前に、`fronend`のディレクトリで、`npm install`しておく。

### Project Structure
- `backend`と`frontend`の両方をsrcに足しておく。←意外と重要。
    - こうすると両者が混ざることで若干環境依存性を生むが、こうしないとインスペクション（エディタレベルでエラーやワーニングを出してくれる機能のこと）がうまく行かないのでこのように設定する。


以上の設定で一旦目標としていた状態（環境分離）は達成できるはず。

# まとめ
- PyCharmで環境を分けるには、最低限、`Project Interpreter`（フロント/バック/結合）と、`Run/Debug Configuration`（インタープリター種類✕`{dev/prd/stg等}`）で分離するとよい。
Python3でのリストの内包表記、ジェネレータ式、タプルのアンパックなど構文メモ

##ジェネレータ式でのデカルト積
```python:sample.py
colors_list = ['red','white','blue']
size_lists =  ['S','M','L']
for t_shirts in ('%s %s' % (c, s) for c in colors_list for s in size_lists):
  print (repr(t_shirts))
>'red S'
>'red M'
>'red L'
>'white S'
>'white M'
>'white L'
>'blue S'
>'blue M'
>'blue L'
```
##リストの内包表記でのデカルト積
```python:sample.py
colors_list = ['red','white','blue']
size_lists =  ['S','M','L']
t_shirts = [(c, s) for c in colors_list for s in size_lists)]
  print (repr(t_shirts))
>[('red', 'S'), ('red', 'M'), ('red', 'L'), ('white', 'S'), ('white', 'M'), ('white', 'L'), ('blue', 'S'), ('blue', 'M'), ('blue', 'L')]
```

##タプルのアンパック
```python:sample.py
japan_std = (35.00116, 134.59501)
latitude, longitude =  japan_std 
print ("latitude:" + repr(latitude))
print ("longitude:" + repr(longitude))
>latitude:35.00116。。。
>longitude:134.59501
```
※reprがないと、floatのため例外となってしまう。

##Setリテラルの空集合
```python:sample.py
s = {42.195}  # １つの要素のみのsetリテラル
print ("s:" + repr(s))
s.pop()
print ("s:" + repr(s))
>s:{42.195}
>s:set()  # 空集合は、set()と表現される
```

##ディクショナリ内包表記
```python:sample.py
NATIONAL_CODES=[(91,'INDIA'),(55,'BRAZIL'),(1,'UNITED STATES'),(81,'JAPAN'),(86,'CHINA')]
country_code = {country:code for code, country in NATIONAL_CODES}
print("country_code" + repr(country_code ))
>country_code{'INDIA': 91, 'BRAZIL': 55, 'UNITED STATES': 1, 'JAPAN': 81, 'CHINA': 86}
```

#Python の内部構造の視覚化ツール
[Python Tutor](http://www.pythontutor.com/visualize.html#mode=edit)
損益分岐点分析

応用情報技術者令和元年秋期 午前問77

損益分岐点分析でA社とB社を比較した記述のうち，適切なものはどれか。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/e7e1ed7d-c808-2e96-5d11-29a7ce95cb2e.png)


損益分岐点分析で使用される主な指標とその計算式は以下の通りです。
  **損益分岐点売上高**
売上高と費用の合計が等しく利益が0となる売上高を示す。
●固定費÷(1－変動費率)

  **損益分岐点比率**
実際の売上高に対する損益分岐点の割合を示し、この値が低いほど収益性が高く、かつ売上減少に耐える力が強いことを意味する。
●損益分岐点売上高÷売上高×100

  **安全余裕率**
実際の売上高と損益分岐点の差がどれくらいあるかを示し、この値が高いほど経営に余裕があることを意味する。
●(売上高－損益分岐点売上高)÷売上高×100

  **限界利益率**
売上高に対する限界利益の割合を示す。
●(売上高－変動費)÷売上高×100

  **営業利益**
売上高から変動費と固定費を差し引いた金額が利益です。変動費は「売上高×変動費率」で計算

**公式の導き出す：**
１、売上高、固定費、変動費、損益分岐点の概念：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/f6195f06-1e36-94f0-4378-1f530d9f5afb.png)

２、利益＝売上高　－　変動費　－　固定費
変動費率＝変動費/売上高
利益＝売上高　－　売上高 X 変動費率　－　固定費
利益が0の場合は、売上高は損益分岐点売上高といいます。
なので、
0＝損益分岐点売上高－損益分岐点売上高 X 変動費率　－固定費
→
損益分岐点売上高（１－変動費率）＝固定費
→
損益分岐点売上高＝固定費/（１－変動費率）
になりました。


３、安全余裕率に、
余裕というのは、売上高－損益分岐点売上高です、
安全余裕率は余裕が売上高にどれぐらい割合とのことです。


４、限界利益とは、
売上高から変動費を差し引いて残った金額のことです。
また、限界利益が売上高の中に占める割合を限界利益率と呼んでいます。
限界利益が
ゼロ
マイナス
の場合には、売上高を増やしても赤字が増えることになります。

多分、限界とは、固定費と考慮しないの利益ですね。本当に限界ですね。



計算すると：
[A社]
変動費率＝800÷2,000＝0.4
損益分岐点売上高＝900÷(1－0.4)＝1,500
安全余裕率＝(2000-1500)÷2000＝25%
営業利益＝3000-(3000*0.4)-900=900
限界利益率=(2000-800)/2000=60%


[B社]
変動費率＝1,400÷2,000＝0.7
損益分岐点売上高＝300÷(1－0.7)＝1,000
安全余裕率=(2000-1000)/2000=50%
営業利益=3000-(3000*0.7)-300=600
限界利益率=(2000-1400)/2000=30%

参考
https://www.ap-siken.com/kakomon/01_aki/q77.html
https://www.kaonavi.jp/dictionary/sonekibunkiten/