OmniAICreator/Qiita-1.07M huggingface dataset:
Nuxt.jsでURL直叩きの時はページが表示されるのに、nuxt-linkやブラウザバックでAn error occurredになる

# 事象

![error.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199678/cdcf0cf4-0ae0-a3fa-5e4b-96050f2bb7c3.png)


ググった時にもっと引っかかっても良いのになーと思いつつ、全然記事がヒットしなかったのでメモ。

Nuxt.jsでaxiosを使いAPIからデータを取得。
そのデータを元にページを表示している場合、URLを直接叩くと正常に表示されるが、nuxt-linkで遷移したりブラウザバックで移動すると`An error occurred`というエラーが出る。

参考：Chrome開発者ツール開いた時のエラー
![console.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199678/3ca14e79-52af-85ab-15e5-50ddc4c432bf.png)

# 結論

nuxt.config.jsで、axiosのproxyを設定しましょう。

# 理由

CORS(オリジン間リソース共有)が原因。

* URLを直接開いた時＝SSR（サーバサイドレンダリング）が実行される。その名の通りサーバサイドで実行される。
* ブラウザバックやページ遷移＝CSR(クライアントサイドレンダリング)が実行される。つまりクライアントのjsで実行されるので、CORSが関係してくる。

URL叩いた時に表示されるのであれば、APIのパスが誤っていたり処理がおかしいのではない。
サーバサイドとクライアントサイド、どちらで実行されているか気付けるかが鍵。
筆者は1時間以上悩みました

たとえ同じサーバ上で動いていても、バックエンドとフロントエンド(Nuxt)が違うportで動いていたら、CORSの対策が必要。

# 対処法

```diff:nuxt.config.js
   ** Nuxt.js modules
   */
   modules: [
-    "@nuxtjs/axios"
+    "@nuxtjs/axios",
+    "@nuxtjs/proxy"
   ],
+  axios: {
+    proxy: true
+  },
+  proxy: {
+    '/v1/': {
+      target: "https://example.com:8080/"
+    }
+  },
```

```vue:参考(API呼び出し)：pages/posts/_id.vue
<script>
export default {
  validate({ params }) {
    return /^\d+$/.test(params.id)
  },
  async asyncData({ $axios, params }) {
    const response = await $axios.$get(`/v1/posts/${params.id}`)
    return {
      post: response.post
    }
  }
}
</script>
```

* `@nuxtjs/proxy`はaxiosにセットで入っているので、yarn add不要です
* /v1/の部分はお使いのAPIのパスに応じて変えてください。多くの場合、/api/になるはずです
* targetの部分はAPIのrootパスになるよう(必要だったらport番号も)適宜置き換えてください。
Androidスタジオ始めました

以前からスマホアプリを作ってみたいと思っていたが、
javaを学びつつandroidアプリ作れば一石二鳥なのでは？という
非常に安直な理由を思いつき始めてみました。

と思い立ったのも束の間、ダウンロードしていきなりしょうもないところで壁にぶつかってしまったので忘備録として残しておきます。

まずは定番のメモアプリを作ろうとして"text view"を追加したところ、
テキストサイズの変更がわからない...(恥ずかしい)
![スクリーンショット 2020-09-13 16.59.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488766/fe9491e5-864f-a043-d0cb-5d93ae3b9cd1.png)
ググってみたとろ”Properties Window”なるものがあるらしいのだがそんなものはない。
（多分バージョン違う？）

探してみたとろ、"Attuributes Window"の"All Attuributes"直下に一応"text size"がありました。　 
![スクリーンショット 2020-09-13 16.56.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488766/f5b6185a-9c99-9818-e7c3-0f03e2095727.png)

もっとわかりやすいところに機能がありそうなので引き続き探してみます。
なんとなく3DCADソフトとかに操作感が似ているので
３Dソフトをいじっていた時を思い出して楽しい。
【EC2】EBSとは

## EBSとは
**Elastic Block Store** の略
EC2に仮想的にアタッチされるブロックレベルのストレージサービス


## 特徴
- データは揮発性でなく、永続的に保存される
- 他のアベイラビリティゾーンのインスタンスにはアタッチ不可
- 1つのEBSを複数インスタンスで共有することは不可
- 同アベイラビリティゾーン内のインスタンスであればEBSの付け替えが可能
- 1つのボリュームは最大で16TB

## ボリュームタイプ
### 1. Provisioned IOPS SSD
ミッションクリティカルな低レイテンシーまたは高スループットワークロードに適した、最高パフォーマンスのSSDボリューム

**ユースケース**：I/O負荷の高いNoSQLデータベースやRDBMS用のボリューム
**最大サイズ**：4GB - 16TB
**最大IOPS**：64,000
**最大スループット**：500MB/s

### 2. 汎用SSD
さまざまなワークロードに適した、価格とパフォーマンスのバランスが取れている汎用SSDボリューム

**ユースケース**：OSのブートボリュームや、テイレイテンシーが必要とされるアプリケーション用のボリューム
**最大サイズ**：1GB - 16TB
**最大IOPS**：16,000
**最大スループット**：160MB/s

### 3. スループット最適化HDD
高いスループットを必要とするアクセス頻度の高いワークロード向けの低コストのHDDボリューム

**ユースケース**：大容量かつ高いスループットが必要とされ、シーケンシャルアクセスを行うビッグデータ、DWH、ログ処理用のボリューム
**最大サイズ**：500GB - 16TB
**最大IOPS**：500
**最大スループット**：500MB/s

### 4. コールドHDD
アクセス頻度の低いワークロード用に設計された低コストのHDDボリューム

**ユースケース**：アクセス頻度の低い、アーカイブ等のコールドデータ用のボリューム
**最大サイズ**：500GB - 16TB
**最大IOPS**：250
**最大スループット**：250MB/s

## EBS最適化インスタンス
EBSボリュームに割り当てられたIOPS値を最大限に利用出来るよう、EC2が利用するネットワークが予め構成されているインスタンス

EC2とEBSボリューム間に専用且つ大きな帯域幅のネットワークが確保され、予め設定したProvisioned IOPS値に応じたディスク性能を得られる

## EBSスナップショット
EBSボリュームの特定時点のバックアップを取得し、S3に保存する機能

- S3に保存されたデータは、リージョン内の複数のアベイラビリティゾーン間で同期される

- リージョン間をまたいで利用可能

- 別アベイラビリティゾーンにEBSを復元することが可能

- マネージメントコンソールまたはCLIを利用して取得・別リージョンへのコピーが可能

- 2世代目以降は増分データを保存する増分バックアップ

## スナップショットとAMI
**スナップショット**：ストレージ/EBSのその時点の断面のバックアップとして保持し、ストレージの復元や複製に利用するもの

**AMI**：EC2インスタンスのOS設定などをイメージとして保持し、新規インスタンス設定に転用するもの（**※ EBSスナップショットも含む**）
【PHP】デバッグ

PHPについて学習内容を備忘録としてまとめます。

#デバッグについて
開発中にエラーが発生した際に、デバッグをすると思います。
その中でも私がデバッグ方法を記載します。

##var_dump
コードの中で値を確認する際に利用することができます。
例えば、下記のような従業員がログインするコードで見ていきます。

```php
#staff_login.php

<form method="post"action="staff_login_cheak.php">
スタッフコード<br />
<input type="text" name="code"><br />
パスワード<br />
<input type="password" name="pass"><br />

#staff_mypage.php

$staff_code=$_POST['code'];
$staff_pass=$_POST['pass'];

var_dump($staff_code);

```
※本当は間にDBから該当のユーザーを取得する処理がありますが、省略しています。
このように記載すると、`staff_login_cheak.php`にスタッフコードフォームで記入したコード番号が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597913/7d05a149-8647-b8db-3564-fe562edf843d.png)

↓　ログイン

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597913/992c13b5-3756-4b3f-89ae-0deffbf7bcb1.png)




##デバッグを別ファイルで管理
ajaxなどでデバッグを実施する際に、上記のやり方だと表示されません。
バックエンドの処理なので一度デバッグ情報をファイルに出力する方法をとります。

方法としては_debug()という関数を作成し、引数に確認したい値等を入れると表示される処理を行います。

```php
#_debug()関数を作成
  function _debug( $data, $clear_log = false ) {
    $uri_debug_file = $_SERVER['DOCUMENT_ROOT'] . '/debug.txt';
    if( $clear_log ){
      file_put_contents($uri_debug_file, print_r($data, true));
    }
    file_put_contents($uri_debug_file, print_r($data,true), FILE_APPEND);
    }
```
上記関数は自分がわかるところで作成してください。
それではいいね機能のajaxファイルにて、いいねした際のデバッグを見ていきます。

```js
if(isset($_POST)){

  $current_user = get_user($_SESSION['staff_code']);
  $page_id = $_POST['page_id'];
  $post_id = $_POST['post_id'];

  $profile_user_id = $_POST['page_id'] ?: $current_user['id'];

  if(check_favolite_duplicate($current_user['code'],$post_id)){
    $action = '解除';
    $sql = "DELETE
            FROM favorite
            WHERE :user_id = user_id AND :post_id = post_id";
  }else{
    $action = '登録';
    $sql = "INSERT INTO favorite(user_id,post_id)
            VALUES(:user_id,:post_id)";
  }
 _debug($action);  //ここを追加
```
いいねボタンを押した結果、設定した`debug.txt`にて`$action`の値が入っていればデバッグ成功です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597913/665d815b-f3b2-4336-988e-dcbaf791a2cf.png)
↓いいねボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597913/c45b0c3a-9e53-14b7-29cb-ab9e16ce267b.png)

今度はいいね解除ボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597913/d41f9590-56b8-6b67-1d22-4927722fbe36.png)
↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597913/9ffd7cb6-3006-5788-914d-31524d128845.png)

解除が追記されている。
_debug()関数は_debug('',true)と定義するとdebug.txtが空になるように作成されています。

#参考URL
https://pisuke-code.com/php-how-to-debug-by-log-file/
VScode：関数を入力したときの説明(ツールチップ)を消す

![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700383/49186625-2e50-2cef-ec88-2e21dee373b9.png)

setting.jsonに以下を追加する。
(windowsなら「ファイル名を指定して実行」→「%APPDATA%\Code\User\」を入れれば入っているはず)

```setting.json
    "editor.parameterHints.enabled": false

```

またはVScodeの設定画面で「editor parameterhinsts」と入力すれば出てくる。

![2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700383/5ddc8768-a909-6f7a-0a8c-9447c932af20.png)

このチェックを外して再起動すればOK。
build-push-actionを使って、GitHub Container Registryにイメージをpushしたい

Dockerイメージをレジストリに登録する作業を自動化したい場合、[build-push-action](https://github.com/docker/build-push-action)というワークフローを利用することが多いと思います。このワークフローを使って、2020/09/03にオープンベータになったGitHub Container Registryにイメージをpushしたい場合は、おおよそ以下のようにすればよいです。

```yml
name: Publish Docker image
on: push
jobs:
  publish_image:
    runs-on: ubuntu-latest
    steps:
      - name: Push to GitHub Container Registry
        uses: docker/build-push-action@v1
        with:
          username: ${{ github.actor }}
          password: ${{ secrets.ACCESS_TOKEN }}
          registry: ghcr.io
          repository: example/example
```

ポイントは次の通りです。

- `registry`は`ghcr.io`を指定します。
- `username`はレポジトリにアクセスできるユーザを指定してください。なおここではワークフロー実行ユーザ名を格納する`github.actor`を利用しています。
- `password`には、レポジトリへの読み取り・書き込み権限を有するアクセストークン(★)を指定する必要があります。

(★) アクセストークンを作成し、Github Actions内で利用できるようになるまでの手順は以下の通りです。

1. https://github.com/settings/tokens/new へアクセス。認証が求められる場合がある。
2. アクセストークン作成画面では、`write:packages`と`read:packages`に最低限チェックを付けて、`Genereate Token`を押下する。必要な場合はほかの権限も付与すること。
3. 作成したアクセストークンを控えておく
4. Github Actionsを使うレポジトリに移動。
5. `Settings > Secrets > New Secret`の順番に移動。
6. Secret作成画面では、Name="任意の名前"(上記のサンプルでは`ACCESS_TOKEN`)、VALUE="3.で控えておいたアクセストークン"を指定して、`Add Secret`を押下。
7. これでワークフロー内で`${{ secrets.任意の名前 }}`という変数が利用できるようになります。
タイムスタンプの入ったファイル名でメモを開くだけのVimプラグイン

以下の記事を参考にしつつ、メモをとるための vim プラグインを作ってみた際の備忘録です。

https://qiita.com/bonjin6770@github/items/31e60707ecf2ad6c4496

自分は以下のような方法でメモを取っています。

1. メモはいつも同じフォルダの下につくる。（後で検索するのが楽なので）
2. メモはメモを取った日付 YYMMDD を頭につけて、その後ファイル名でメモの題名（Subject）を示します。
3. メモ本体は Markdown で書いて、読むときは Chrome / Firefox の Markdown プラグインで読むか、Markdown Viewer を使う。

この用途を満たすプラグインを作ります。その際、以下の実装仕様を取り込みます。
 
1. メモのファイル名にタイムスタンプ（YYYYMMDDHHMMSS形式）を入れる。
    1. Subject には空白文字が含まれないようにする（Subjectに含まれるスペース ` ` は、`_` に置換する）。
1. 保存フォルダはグローバル変数に設定する。なければ `~/Documents/Memo` に保存する。
1. メモの1行目に日付と、Subject を自動で入力する。

要するにvimのコマンドラインモードで `:Memo ほげほげ` のように打つと、`20200901120105_ほげほげ.md` のような名前のファイルを開いて、メモができるようにします。

## 実装環境

```
> vim.exe" --version
VIM - Vi IMproved 8.2 (2019 Dec 12, compiled Dec 12 2019 13:19:27)
MS-Windows 32 ビット コンソール 版
```

ただし、バージョン依存が強いものは使っていないので、autoload が動く vim なら大体動くはずです。

## 成果物

https://github.com/aikige/memo.vim にアップロードしてありますので、よろしければどうぞ。

## 実装上のポイント

基本方針

* 本体は `autoload` と `plugin` に分割する。
    * スクリプトの大半は `autoload/memo.vim` に置くことで、起動のオーバーヘッドを減らす。
    * `plugin/memo.vim` 側はコマンドの呼び出し設定のみ書く。
* [vim-plug](https://github.com/junegunn/vim-plug) で管理できるようなフォルダ構成にする。

## 使い方

### 準備（インストール）

`vim-plug` を使っているのであれば、以下のような感じにして...

```
call plug#begin('~/.vim/plugged')
Plug 'aikige/memo.vim'
call plug#end()
```

vim をコマンドラインモードにして、 `:PlugInstall` コマンドを呼び出してインストールしてください。

プラグインマネージャを使っていないのであれば、github からExportしたZIPファイルをお使いの `~/.vim/` 以下、ないし `%USERPROFILE%\vimfiles` などに展開すれば動きます。

### メモを作成する

`vim` のコマンドラインモードで `:Memo hoge piyo` のような感じでコマンドを打つと、 `~/Documents/Memo/202009010702_hoge_piyo.md` のような感じの名前のファイルを開きます（それだけ）。

### 過去のメモを見る

`:Memo` と引数を付けずにコマンドを実行すると、メモの保存フォルダを開いて、過去の記事を参照できるようにします。

### メモを検索する

`:MSearch argument` というコマンドで、文字列 `argument` を含むメモの検索ができます。
実際には vimgrep をしているだけですので、引数には正規表現を指定することもできます。
JavaScript 現在の日付の取得

2020/09/13 に実行した場合

```example.js
var today = new Date();//現在のdateオブジェクト

var year = today.getFullYear();//2020
var month = today.getMonth() + 1;//09 (getMonth()は1月を0とした値を返す)
var day = today.getDate();//13
```
HMS CoreのMap KitとSite KitにおけるAPI Keyの利用の注意点

# 背景
ファーウェイのHMSを使って、GMSなしでGoogleマップアプリと同じものを作ってみました。最終的には無事に作れました。しかし、作っているときにはまった部分があったので、その原因を書こうと思います。

# アプリのターゲット機能
|機能|キット|
|:---|:---:|
|地図表示|[Map Kit](https://developer.huawei.com/consumer/jp/hms/huawei-MapKit)|
|ジェスチャー|[Map Kit](https://developer.huawei.com/consumer/jp/hms/huawei-MapKit)|
|コンパス|[Map Kit](https://developer.huawei.com/consumer/jp/hms/huawei-MapKit)|
|ズーム|[Map Kit](https://developer.huawei.com/consumer/jp/hms/huawei-MapKit)|
|現在地|[Location Kit](https://developer.huawei.com/consumer/jp/hms/huawei-locationkit)|
|キーワード検索|[Site Kit](https://developer.huawei.com/consumer/jp/hms/huawei-sitekit/)|
|ロケーション情報検索|[Site Kit](https://developer.huawei.com/consumer/jp/hms/huawei-sitekit/)|

# APIキーの受け渡し
特定なキットを利用するのに、APIキーを渡さなければなりません。
今回利用するキットはMap Kit、Location Kit、Site Kitです。Map KitとSite KitではAPIキーの受け渡しが必要です。
下記はHMSの公式ドキュメントに書かれたAPIキーの渡し方です。

### Map Kit
方法１

```Java
// In the entrance class (inherited from android.app.Application) of the app,
// call the setApiKey method in the overridden onCreate() method. 
public class MyApp extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        // Set the API key.
        MapsInitializer.setApiKey("Your API Key");
    }
}
```

方法２

```Java
// FragmentまたはMapViewの中でAPIキーを渡す
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        Log.i(TAG, "onCreate: ");
        super.onCreate(savedInstanceState);
        // Set the API key before calling setContentView.
        MapsInitializer.setApiKey("Your API Key");
        setContentView(R.layout.basic_demo);
    }
```

簡単にいうと、MapsInitializer.setApiKey("Your API Key")を実行するというわけです。

### Site Kit

```Java
// Declare a SearchService object.
private SearchService searchService; 
// Instantiate the SearchService object.
searchService = SearchServiceFactory.create(this, "API key");
```

# 実行結果（失敗）
上記の方法に従って実行してみると…

マップは表示できました。
<img width="300" alt="device-2020-09-13-164940.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704548/d9dfee4d-02ca-d707-5992-68b481aafd9b.png">

しかし、キーワード検索機能は動きませんでした。
<img width="300" alt="device-2020-09-13-165051.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704548/232da4f1-e2f0-13f7-8c04-b7c3022aca24.png">

# 原因
原因はSite Kitに渡すAPIキーです。Map KitではAPIキーをそのまま渡せばよいですが、Site Kitの場合、APIキーを<b>エンコード</b>してから渡さなければなりません。

# 実行結果（成功）
次のようにソースコードを直して試してみたら…

```Java
searchService = SearchServiceFactory.create(this, URLEncoder.encode("API key", "utf-8"));
```

検索結果が出ました。
<img width="300" alt="device-2020-09-13-170255.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704548/071527fe-9f61-aa70-d49c-2ea060da0583.png">
Permission denied @ dir_s_mkdir - /usr/local/Frameworksの対処

Homebrew経由でgitをインストールしようと思ったらエラーが出た。

```
Error: An unexpected error occurred during the `brew link` step
The formula built, but is not symlinked into /usr/local
Permission denied @ dir_s_mkdir - /usr/local/Frameworks
Error: Permission denied @ dir_s_mkdir - /usr/local/Frameworks
```

Frameworksの権限がないと言われる。
一応、Homebrewの問題をチェックしてみる。

```
$ brew doctor

Warning: You have unlinked kegs in your Cellar.
Leaving kegs unlinked can lead to build-trouble and cause brews that depend on
those kegs to fail to run properly once built. Run `brew link` on these:
  php@7.1
  python@3.8
```

調べてみるとpythonが原因っぽい。
pythonをリンクさせる

```
$ brew link python

Linking /usr/local/Cellar/python@3.8/3.8.5... Error: Permission denied @ dir_s_mkdir - /usr/local/Frameworks
```

リンクエラー。
やっぱり権限がないと言われる。
そもそもFrameworksディレクトリがなかったので作成&権限を付与で解決。

```
$ sudo mkdir /usr/local/Frameworks
$ sudo chown $(whoami):admin /usr/local/Frameworks
```
Djangoを使ったWEBアプリケーションの開発【Django起動編】

前提・環境
-
MacbookPro2017 13inch macOS Catalina 10.15.6
Python 3.6
Djanngo version 3.1.1　←インストール手順書き忘れてました。そのうち書くかも。

プロジェクトの作成とファイル構成の確認
-
今回は、djangoフォルダを作成し、その中にプロジェクトを作成していく。
コマンドプロンプトで下記を入力する。

```
$ mkdir django
$ cd django
```

「django」フォルダに移動したら、下記を入力するとプロジェクトが作成される。
今回プロジェクト名は「project1」とした。

```
$ django-admin startproject project1
```

実行後、作成されたproject1フォルダ内に移動し、ファイルを確認する。

```
$ cd project1
$ ls
manage.py	project1
```

さらに、project1フォルダ内のproject1フォルダに移動し、ファイルを確認する。

```
$ cd project1
$ ls
__init__.py 	asgi.py		settings.py	urls.py		wsgi.py
```

以上のファイルが作成されていることを確認したら、一つ上のフォルダに戻ってDjangoサーバーの起動し動作を確認する。

```
$ cd ..
$ python3.6 manage.py runserver

Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).

You have 18 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.
September 13, 2020 - 07:31:30
Django version 3.1.1, using settings 'project1.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

```

サーバーが起動できたらブラウザに「[http://127.0.0.1:8000/](http://127.0.0.1:8000/)」を入力する。
ロケットの画像と「The install worked successfully! Congratulations!」の文字が表示されていれば成功です。
![screencapture-127-0-0-1-8000-2020-09-13-17_02_45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313621/198a28fc-a2cc-5e92-201f-c6c3cae16a34.png)

動作が確認できたら、コマンドプロンプトでControl + Cでサーバーを停止させることができます。

[初期設定編](https://qiita.com/tesla1017/private/27bfa3496d0f2ad4df7b)
【RaspberryPi】赤外線解析

[Raspberry Piで三菱のエアコンのリモコンをスキャン・解析・送信してみる](https://qiita.com/Hiroki_Kawakami/items/37cdb412a4e511a58103)
上記記事を参考に赤外線を解析するコードをPHPに変換した

```php5
<?php

$offset = -1;
$byte = 0;
$file = file_get_contents('codes');
// var_dump($file);
preg_match_all('(\d+)', $file, $match);
// print_r($match);
for ($i = 0; $i < count($match[0])-1; $i+=2) {

    $on = $match[0][$i];
    $off = $match[0][$i + 1];
    if ($off == 0) {
        break;
    }
    
    if ($on > 1500) {
        if ($offset >= 0) print "\n";
        $offset = 0;
        $byte = 0;
    } else {
        $byte |= ($off > $on * 2) << $offset++;

        if (($offset & 7) == 0) {
            printf("%02X ", $byte);
            $offset = 0;
            $byte = 0;
        }
    }
}
print "\n";
```
結果は16進数に変換される
pythonから Amazon Athenaへクエリ実行（名前付きプロファイル使用）

#はじめに

windows command lineにて、AWS CLIでAthenaに接続させることがあるが、
どうせなら、
クエリ結果を取得してグラフ描画まで出来ればなと思い、pythonで行うと思ったのだけれども
名前付きプロファイルの部分で行き詰まった個所があったので、整理


##マニュアル記載の方法（名前付きprofile未使用）
###windows command lineでの方法
```
aws athena start-query-execution
  --query-string "select * from table_name"
  --result-configuration "s3://path/to/query/bucket/"
```
AWSドキュメント：
https://docs.aws.amazon.com/cli/latest/reference/athena/start-query-execution.html

###pythonでの方法
```python

athena = boto3.client('athena')

# クエリ実行
exec_run = athena.start_query_execution(
    QueryString="select * from table_name",
    QueryExecutionContext={'Database': 'database_name'},
    ResultConfiguration={'OutputLocation': 's3://path/to/query/bucket/'})
```
AWSドキュメント:
https://boto3.amazonaws.com/v1/documentation/api/latest/reference/services/athena.html

#今回行いたいこと　
名前付きプロファイルの情報を用いて、クエリ実行を行いたい。

名前付きプロファイルの設定方法が
「windows command line」と「python」で異なることに気が付かず無駄に時間を使ってしまった。

名前付きプロファイルの設定方法は
windows command line：awsコマンドのパラメータとして設定
python　　　　　　　 ：boto3.sessionクラスを使ってプロファイル情報を設定

###windows command lineでの方法（名前付きprofile使用）
```
aws athena start-query-execution
  --query-string "select * from table_name"
  --result-configuration "s3://path/to/query/bucket/"
　--profile "NRP"
```
AWSドキュメント：
https://docs.aws.amazon.com/cli/latest/reference/athena/start-query-execution.html
https://docs.aws.amazon.com/cli/latest/reference/athena/start-query-execution.html

###pythonでの方法（名前付きprofile使用）
```python

session = boto3.Session(profile_name='NRP')
athena = session.client('athena')

# 処理実行
exec_run = athena.start_query_execution(
    QueryString="select * from table_name",
    QueryExecutionContext={'Database': 'database_name'},
    ResultConfiguration={'OutputLocation': 's3://path/to/query/bucket/'})

```
AWSドキュメント：
https://boto3.amazonaws.com/v1/documentation/api/latest/reference/services/athena.html
https://boto3.amazonaws.com/v1/documentation/api/latest/guide/session.html
S3の接続についての記事：
[boto3 で デフォルトprofile以外を使う](https://qiita.com/inouet/items/f9723d7ae7d8d134280b)


##最後に
boto3.sessionにたどり着くのが大変だった。エラー文ベースで調べてたのも良くなかった。
マニュアルにもしっかり書いてあったし
たどり着いてしまえば、いろいろとわかってくるもんだなと再認識。

ただ、今度は取得結果が全件なかったりと課題はたくさん

以上。

##参考情報
各箇所に記載
【AWSアカウント】AWS Organizationsとは

## AWS Organizationsとは
複数のAWSアカウントをポリシーベースで一元管理するサービス

**マスターアカウント**：Organizationsを作成するAWSアカウント
**メンバーアカウント**：Organizationsに統合されたAWSアカウント

- 統一的なポリシー設定、メンバーアカウントの一括請求、予算・セキュリティ・コンプライアンスの階層的なグループ化が可能

- 階層は **OU（組織単位）** で管理され、OUに対して異なるポリシーを割り当てることが出来る

## 機能セット
### 1. All features（全ての機能）
- 組織を作成する場合は、全ての機能を有効にすることがデフォルト
- 有効にすることで、サービスコントロールポリシー及びタグポリシーといった、AWS Organizationsで利用可能な高度なアカウント管理機能を使用出来る

### 2. Consolidated billing features（一括請求機能）
- 全ての組織でこの機能サブセットがサポートされる
- これによって組織内のアカウント管理を一元化するために使用できる基本的な管理ツールが提供される
ファイル作成時に名前が重複したら番号をつけるシェルスクリプト

## スクリプト概要


- 引数で指定したファイル名の空ファイル作成 
- すでに同名のファイルが存在すれば番号をつけて作成
- 番号がついたファイルも存在していればその番号より一つ大きい番号をつけて作成

```bash
#!/bin/bash

file=$1

if [[ -e ${file} ]]; then
	maxnumber=$(find . -mindepth 1 -maxdepth 1 -printf "%f\n" \
　 　| grep -e "^${file}\$" -e "^${file}_[0-9][0-9]*\$" \
	| sed "s/^${file}_\\{0,1\\}//" \
	| sed 's/^$/0/' \
	| sort -rn \
	| head -n 1 ) ;

	file+="_$((maxnumber+1))"
fi
	touch $file

```



## 解説

```bash
# findでカレントディレクトリ(.)のファイル一覧を検索
  find . -mindepth 1 -maxdepth 1 -printf "%f\n" 

  # -mindepth 1と -maxdepth 1　で検索する階層をカレントのみに限定
  # -printf でディレクトリ名を除いたファイル名だけを出力 (%f)し改行で区切る（\n）
```


```bash
 # grep で番号なしファイルと番号ありファイルを検索
   grep -e "^${file}\$" -e "^${file}_[0-9][0-9]*\$" 
   # -e　オプションで正規表現を使用
```
```bash
 #　「ファイル名_番号」　の内「ファイル名_」を除いて番号のみを出力
   sed "s/^${file}_\\{0,1\\}//"
   # {0,1}は直前の文字の0から1回以下の繰り返しを表すため、_があってもなくてもマッチする
   # その際{}はエスケープ(\)が必要。\自体にもエスケープが必要なので\\となる
```
```bash
# 番号のついていないファイルは空行となるので0に置換
  sed 's/^$/0/' 
  #　^は後に続く文字が行頭一致、$は直前の文字列が行末一致を指す
  #  ^$は間には何も書かれていないので空行を指す
```
```bash
# 数字の大きい順に並べ替え
  sort -rn
  #  -r  逆順に並べ替えるオプション
  #  -n  文字列を数値とみなすオプション
```
```bash
# 一番大きい数字のみを出力
  head -n 1 
  # -n 1 　先頭の1行のみ出力
```
ここまでのコマンドで重複するファイル名の一番大きい数字を取得できた。
これらのコマンドをコマンド置換$()で囲むことで実行結果を変数maxnumberに代入している。

ここから新たに番号をつけてファイルを作成していく。

```bash
# ファイル名に　「_番号」を付与
  file+="_$((maxnumber+1))"
  #　maxnumberに1を足してファイル名に「_番号」を追加
```
```bash
# ファイル作成
  touch ${file}
```

ファイル名が重複していない場合は番号なしでそのまま作成されます。
Python開発環境の整理

Python開発環境について、以前はローカル環境にインストールしたAnacondaからJupyter Notebookを使っていて、最近はAmazon SageMakerからJupyter Notebookを使っているのですが、あらためてJupyter Notebookをはじめとするディストリビューションの開発元やインストール方法などを調査・整理してみました。なお、機能については、いずれにおいても概要レベルの記載としています。

# 環境

Windows10

# 対象とするディストリビューション

①Anaconda
②Python(IDLE)
③Jupyter Notebook
④Jupyter Lab

# ①Anaconda

開発元は[Anaconda社](https://www.anaconda.com/)。

Anacondaはデータサイエンス・機械学習・科学技術計算などを目的とした開発プラットフォームです。下のAnaconda Navigatorのとおり、Anacondaをインストールすれば、Jupyter NotebookやJupyter Labも使えるため、Anacondaで環境構築するのが手っ取り早く楽かもしれません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240454/058c1891-0715-cb10-b1df-112a995ac398.png)

インストール手順は様々なサイトに載っているので省略しますが、[1．Anacondaダウンロード・インストール・設定](https://qiita.com/PoodleMaster/items/1134acb2bd1d68bfe2ec)などを参考にしていただければと思います。

# ②Python(IDLE)

開発元は[Python Software Foundation(PSF)](https://www.python.org/)。Paython公式版。

上記公式サイトからPythonをインストールすると、IDLE(Integrated DeveLopment Environment)というPython用の統合開発環境が使えるようになります。下にあるような、インタラクティブシェルにより対話的にプログラミングを行います。こちらがPython開発環境の最もシンプルな構成かと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240454/6a3b74c3-ae70-9329-3831-3e3060ae8eb7.png)

インストール手順は様々なサイトに載っているので省略しますが、[windows10にpythonをインストール](https://qiita.com/fun22fun24/items/d6e72eb9122c3cc01a7e)などを参考にしていただければと思います。

# ③Jupyter Notebook

開発元は[Project Jupyter](https://jupyter.org/)。

Jupyter Notebookはブラウザ上で動作する開発環境で、ノートブックと呼ばれるファイルにプログラムを記述し、実行結果を確認しながら開発を進めるものです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240454/253225f5-ea7a-07ad-69fa-0e847ae91e36.png)

インストールは、Pythonインストール後に付属のpipというパッケージ管理ツールを使って、[PyPI(Python Package Index)](https://pypi.org/)というレポジトリサービスからパッケージを取得することで行います。

具体的には、コマンドプロンプトに`pip install notebook`と入力して実行することでインストールできます。

Jupyter Notebookの起動は、コマンドプロンプトに`jupyter notebook`と入力して実行します。

# ④Jupyter Lab

開発元はJupyter Notebbokと同様で、[Project Jupyter](https://jupyter.org/)。

Jupyter LabはJupyter Notebookの後継としてProject Jupyterにより開発されたもので、Jupyter Notebookよりも多機能かつ操作性が向上された開発環境です。

インストールは、Pythonインストール後に付属のpipというパッケージ管理ツールを使って、[PyPI(Python Package Index)](https://pypi.org/)というレポジトリサービスからパッケージを取得することで行います。

具体的には、コマンドプロンプトに`pip install jupyterlab`と入力して実行することでインストールできます。

jupyter Labの起動は、コマンドプロンプトに`jupyter lab`と入力して実行します。

# まとめ

まとめとしては、手っ取り早く丸ごとインストールするのであればAnaconda、個別に必要なものだけインストールするのであれば、Pyrhon or (Python + Jupyter notebook) or (Python + Jupyter lab)のいずれかになると思います。 

Pythonのディストリビューションについては他にもPyCharmなど色々あると思いますが、今回は上記について説明させていただきました。

# 参考

[1．Anacondaダウンロード・インストール・設定](https://qiita.com/PoodleMaster/items/1134acb2bd1d68bfe2ec)
[windows10にpythonをインストール](https://qiita.com/fun22fun24/items/d6e72eb9122c3cc01a7e)
vue/composition-api@1.0.0-beta7で入ったBREAKING CHANGESについて解説する

vue/composition-api@ 1.0.0-beta7で入ったBREAKING CHANGESについて解説します。

その変更はこちらのURLに記載されています。

https://github.com/vuejs/composition-api/releases/tag/v1.0.0-beta.7

![F57826D9-8F78-476C-8300-B0194A8D637E.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156567/ee068869-6124-d661-e560-79a1b3a10126.jpeg)


**`<template>`内でRef<T>型の変数がUnwrapされるのは、setup()で返したオブジェクトの`root level`に限る**という内容です。

## どういうことか

composition apiのsetup()では、`<template>`内で扱いたいリアクティブな値をオブジェクトにまとめて`return`します。

```TypeScript
return {
  loading: ref(true),
  hogeState: {
    loading: ref(true)
  }
}
```

この場合、`vue/composition-api@1.0.0-beta7`以前では、以下のように`<template>`を書くことが出来ました。

```vue
<span>{{ loading }}</span>
<span>{{ hogeState.loading }}</span>
```

`Ref<T>`であれば、本来は値を取り出すために`.value`しなければいけないのですが、`<template>`内であればUnwrapされて`T`型の値が取り出せるのでスマートに書けるということでした。

これが、`vue/composition-api@1.0.0-beta7`以降では、`root level`しかUnwrapされなくなるので以下のように書かないといけません。

```vue
<span>{{ loading }}</span>
<span>{{ hogeState.loading.value }}</span>
```

…明らかに書きたくない書き方になりましたね。

## 所感と対策

個人的にはこの変更はポジティブだと思っています。

そもそもネストした箇所に`Ref<T>`があるということは、`setup()`内に複数の`reactive`なStateがあるなどで、`root level`にまとめることが難しかったりややこしいという状況だと思います。

```TypeScript
// あり得るとしたら、複数のhooksを使っているなどの理由で、同じ名前のRefが生えてしまって仕方なくネストしているとかでしょうか
return {
  hogeState: {
    loading: ref(true)
  },
  fugaState: {
    loading: ref(true)
  }
}
```

その場合、コンポーネントのサイズが大きすぎるでしょうから分割したり、それが難しければ以下のように名前を変更してstateを扱えば済むので、そのように工夫する方が設計的には嬉しいように思います。

```TypeScript
const { loading: hogeLoading } = useHoge()

const { loading: fugaLoading } = useFuga()

return {
  hogeLoading,
  fugaLoading
}
```

個人的には1コンポーネント1Stateで済むように、useHogeのサイズ感を適宜インフラ層を用意するなどして工夫することが大事だと考えます。

## まとめ

composition-apiを既に使っている方で、ネストしたオブジェクトにRef型の変数を入れていそうだなと思う方はなるべく早くアップデートして要チェックです。

そうでない方は、頭の片隅にでも入れておいていただければと思います！

よろしければTwitterのフォローお願いします！
https://twitter.com/Meijin_garden
Vue.js  準備段階

Vue.js
macでやっています。

自分用手順メモ

1.フォルダを作ったら
置く場所：MAMPのhtdocs

2.その後、ターミナルで
`npm i` 
でインストール
→package.jsonに書かれたライブラリが自分のローカルにインストールされる。

3.インストールされたら、ターミナルで
`gulp`
と入力すると
ブラウザにlocalhostが表示される。


#Babelとは？

package.jsonに入っている。
ES6（バージョンみたいなものだと思ってる）や、それ以上の次世代JavaScriptを
ES5に書き換えてくれるNode.js製のツールのこと。
こっちでES5に適した書き方にしなくても、勝手に変換をしてくれる。
全てのブラウザが最新のJavaScriptを理解できるわけではないので、
Babelを使ってES5に書き換える。


#参考

WindowsでVue.jsを触ることがあったら、この記事を参考にしよう

https://qiita.com/C_HERO/items/318fe65871f8e53e8c80


Node.jsとnpmについての話。わかりやすかった
https://qiita.com/lelouch99v/items/05f973df9c54cec23419
git cloneにて作成したファイルをローカル環境で動作させようとした際に'The `rails' command exists in these Ruby versions: 'と表示される

## 経緯
フリマサイト作成のための参考にしようと思い、卒業生の作品をgithabよりgit cloneを行った。その後、ローカル環境で動作させようとしても下記のようなエラーとなり進めなくなる。

```
$ rails --version
rbenv: rails: command not found

The `rails' command exists in these Ruby versions:
  2.6.5
```

## 対処法

上記エラーから、gemにrailsが入っていないということが分かる。下記の手順にてrailsをruby環境にインストールすることができる。

```
$ gem update --system
$ gem install bundler
$ gem install rails
```

## まとめ
その後bundle install等の作業を経て、git cloneを行ったディレクトリをローカル環境にて動作させることが可能となった。単純なエラーであったが、結構時間を取られてしまった、、。
RxSwiftでTextfiledに入力した文字をLabelに反映する

#はじめに
　RxSwiftの完全初心者が雰囲気を知るところからスタート。
　まずはTextfieldに文字を入力してLabelに表示してみる。

#環境
　Xcode：Version 11.3.1 (11C504)　
　シミュレータ：iPhone8  iOS13.3

#ソースコード

```swift

import RxSwift
import RxCocoa

class BindViewController: UIViewController {

    @IBOutlet weak var textField: UITextField!
    @IBOutlet weak var titleLabel: UILabel!
    
    private let disposeBag = DisposeBag()

    override func viewDidLoad() {

        textField.rx.text
        .subscribe (onNext: {[weak self] text in
            self?.titleLabel.text = text
        })
        .disposed(by: disposeBag)
    }
```


シミュレータではこんな感じ。
上が白背景がTextFieldで、下がLabel

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696523/f64ab7ee-d8b1-a130-12a2-87ec4098ca20.png)

以上。
【IAM】ロールへのポリシー適用

## やること
- S3へのアクセスが可能な「`Batch-S3`」という名前のポリシーを作成する
- ポリシー「`Batch-S3`」を、作成するロールにアタッチする
- 「`Batch-S3`」という名前のロールを作成する
- EC2インスタンスに「`Batch-S3`」というロールを割り当てる

## 1. ロールを作成する
![スクリーンショット 2020-09-13 15.59.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379501/6397c299-b706-fc56-0cf0-1475b199a17e.png)

## 2. ユースケースを選択する
<img width="1440" alt="スクリーンショット 2020-08-04 19.32.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379501/3bb582d8-282e-457b-a29a-6a2706f7f88e.png">

## 3. ロールにアタッチするポリシーを作成する
<img width="1440" alt="スクリーンショット 2020-08-04 19.33.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379501/abaf1fa1-49e1-5774-7b79-c640abca16ca.png">
<img width="1440" alt="スクリーンショット 2020-08-04 19.37.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379501/9ddfea86-e402-0e27-84db-4cc2f415958f.png">

## 4. ポリシー名・説明を追加する
<img width="1440" alt="スクリーンショット 2020-08-04 19.39.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379501/7a9a3b02-7eef-c93c-a9f0-aa09d18c25d6.png">

## 5. アタッチするポリシーを選択する
<img width="1436" alt="スクリーンショット 2020-08-04 19.42.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379501/c743ae8b-8364-c1f0-0ada-316e22a2dde7.png">

## 6. タグを追加する
<img width="1440" alt="スクリーンショット 2020-08-04 19.43.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379501/a1647c00-031f-62e1-5af7-87cbd68b051f.png">

## 7. ロール名を設定する
<img width="1440" alt="スクリーンショット 2020-08-04 19.46.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379501/be6d85d7-8e48-a4f4-d4f7-3dfd2fe1162f.png">

### 作成完了
<img width="1440" alt="スクリーンショット 2020-08-04 19.48.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379501/b21ca717-16da-88c7-5a62-2105a26cdb6c.png">

## 8. ロールを割り当てるインスタンスを選択する
<img width="1440" alt="スクリーンショット 2020-08-04 19.50.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379501/92030615-12f4-10cc-f99d-318474bb35aa.png">

## 9. 作成したロールを割り当てる
<img width="1440" alt="スクリーンショット 2020-08-04 19.53.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379501/3b71489a-08f4-e758-ed9d-85e8012f05c4.png">

### 割り当て完了
ロールが割り当てられたEC2インスタンスは、S3へのアクセスが可能になる
<img width="1440" alt="スクリーンショット 2020-08-04 19.54.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379501/b57addba-dc54-a611-fe1b-364cd99ec193.png">
Uncaught DOMException: Failed to construct ~ cannot be accessed from origin 'null'.が出た時の対処

[JavaScript本格入門　山田祥寛著](https://gihyo.jp/book/2016/978-4-7741-8411-1)
の第7章のラスト、7.6を進めていました。


今回は-Web Worker-の基礎を理解するため、メインのJavaScriptコードを用意して、そこからワーカーを呼び出してみようといった流れでした。
いざ、ワーカーを呼び出してみるとうまくいきません。

#エラー箇所

コードには特に問題はなさそうなので、
ブラウザ(今回はGoogleChrome)で確認してみると

以下のようなエラーが発生していました。

```
Uncaught DOMException: Failed to construct 'Worker': Script at '指定したJSファイル' cannot be accessed from origin 'null'.
    at HTMLInputElement.<anonymous> (エラー行)
```

##原因

そこで「Uncaught DOMException: Failed to construct」で検索してみると

[参考記事:Workerを利用したプログラムが実行できない。](https://teratail.com/questions/167546)

と言う似た事例の記事がヒットしました。

ここでの回答から、**作業ファイルをローカルに置いていたことが原因**だということがわかりました。

それらのファイルをサーバーに配置したところ、無事問題は解決しました。

なんでサーバーに置かなければいけないのかと言うことまでは、今回はわかりませんでした...。
Jestとpuppeteerで複数ページへの同じテストをすっきりまとめたサンプル

Jestとpuppeteerでe2eテストを書いています。大量のページに対してページのtitleをチェックしています。配列に対象ページのURLとtitleをまとめると、すっきり書けたのでメモしておきます。

##配列
検査したい要素、titleとurlをまとめて指定しています。

```Javascript:
const pages = [
  {
    'title': 'はじめに - Bootstrap 4.5 - 日本語リファレンス',
    'url': 'https://getbootstrap.jp/docs/4.5/getting-started/introduction/',
  },
  {
    'title': 'ダウンロード - Bootstrap 4.5 - 日本語リファレンス',
    'url': 'https://getbootstrap.jp/docs/4.5/getting-started/download/',
  },
  {
    'title': 'ファイル構成 - Bootstrap 4.5 - 日本語リファレンス',
    'url': 'https://getbootstrap.jp/docs/4.5/getting-started/contents/',
  },
];
```

## テスト部分
testを配列のループで囲んでいます。ページを取得してtitleを照合しています。

```Javascript:
  for (const i in pages) {
    const title = pages[i].title;
    const url = pages[i].url;
    it('should be titled "' + title + '"', async () => {
      await page.goto(url);
      await expect(page.title()).resolves.toMatch(title);
    });
  }
```
【Rails アクセス制限】ログインしていないとログイン画面へ遷移させる

今回自分がログイン制限実装で悩んだ事を書いていきます。

今回の実装内容

トップページから投稿画面へ移動しようとした時に、ログインしていないユーザは、ログイン画面に遷移させるという実装内容です。

結論は、どのコントローラーのどのアクションの時に遷移させるかが大切です。
今回の記述したファイル
items.controller.rb

参考：投稿画面ファイル
items/new.html.erb：投稿画面が記載


今回自分が行って思い通りならずに悩んだところから、解決までの流れです。

まず行った事
ApplicationControllerへ記述


![3a054547f1aedd97255c89b9aecce2ac.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/683447/c133990c-9595-e73e-d008-d40b67b320d1.png)
結果
トップページも表示されずにろぐいん画面へ遷移され、思ってもいない事になった

次に行った事
今回作成しているアプリケーショでの投稿画面のコントローラ名は、「items」なので
ItemsControlleへ記述をしてみた

![d0aa3fd2d260be7f2244d3878a1500b7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/683447/487645a6-7e5d-11f2-d731-91dcb2bf7f20.png)


結果
ここでもトップページが表示されずにログイン画面へ遷移されてしまった。
そこで、今回のプログラミングの流れを考えてみます。

・実装したい流れは
　【ログインしていれば】
　　トップページ → ログインしていれば → 投稿画面へ

　【ログインしていなければ】
　　トップページ → ログインしていなければ → ログイン画面へ

もっと詳しく書くと
　【ログインしていれば】
　　トップページ → items.controllerのnewアクションを通り → 投稿画面へ（new.html.erb)

　【ログインしていなければ】
　　ログインしていなければ → items.controllerのnewアクションで弾かれて → ログイン画面へ遷移
　　　　 
ここで気づいてことは、items.controllerのnewアクショでの遷移先を決める事が起こる！
そこで、items.controllerに記述したのは



![4608f06b50dcd8f69c17bd30da9175f4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/683447/fb796c82-e05b-8193-0503-91fc14e98a10.png)


これで無事にトップページからログインしていないユーザが投稿画面へ移動しようとしてもログインページへの遷移ができるようになりました。
初学者のため間違っていると思いますので、何かあれば教えていただけたら、とても嬉しいです。
How to Win a Data Science Competition: Learn from Top Kagglers サマリー Week 2《重要なところだけ》: EDA

コースリンク：　https://www.coursera.org/learn/competitive-data-science/
提供：　[National Research University, Higher School of Economics](https://www.hse.ru/en/)

# はじめに
Kaggle初心者（[natsuozawa](https://twitter.com/ntszw)）です。Kaggle Expertを目指して勉強しています。この講座を[Kaggle初心者ガイド](https://kaggler-ja-wiki.herokuapp.com/kaggle%E5%88%9D%E5%BF%83%E8%80%85%E3%82%AC%E3%82%A4%E3%83%89)で見つけ、面白そうだったので受けてみました。

読み返す価値のありそうな内容を集約しました。

### 過去の記事
* **[Week 1](https://qiita.com/natsuozawa/items/a12e59ffe1bc0c139019)**

# EDA (Exploratory Data Analysis)

データを理解するためにデータを分析する。

**ポイント：** データを理解せずにモデルを組んでも、トップのスコアはたたき出せない。

## 基本的な過程

1. **データの領域知識(domain knowledge)をつける:** ググる、Wikipediaを読むなどして、データが何を表すのか簡単に理解する
2. **データが常識的に間違っているところを見つける:** 1の領域知識を使う。間違っている場合は、直す・`is_correct`の列を足すなどして改善できる
3. **データがどのように生成されたか理解する:** バリデーションに必要。訓練データとテストデータが異なった方法で生成されていたら要注意

## データの可視化

### ヒストグラム

```python
plt.hist(x)
```

**ポイント： 異なる便個数・幅を使用したものを複数作って、データのパターンを入念に確認する**

### 散布図

```python
plt.plot(x, '.')
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/334026/1f737eb8-ee3d-05e9-9650-6d86f8c2bf81.png)

**ポイント： 水平にパターンが見られるのはOKだが、縦方向にパターンがある場合データがシャッフルされていない。**

なお、二つの特微量の関係を可視化することも良い。

```python
plt.scatter(x1, x2, c=y)
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/334026/e48dc6b6-dd5f-740e-36b1-0e4d1915c280.png)


**ポイント：色を使いわける**

### 平均・中央値・分散など

```python
df.describe()
```

### 特微量同士の相関

```python 
df.corr()
plt.matshow(...)
```

### 特微量のグループ

相関する特微量をまとめてグループを見つける。特微量のグループはデータ生成に使える！

例：平均でまとめる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/334026/54914913-50c3-123d-bd8e-9b45255e52e4.png)


### その他
`x.value_counts()`
`x.isnull()`
`x.nunique()`

# 検証

### データの分け方

* random split: 普通
* 時間ベース: ある時間の前(test)と後(validation)に分ける
* IDベース: 店番、製品IDなどに基づき分ける

**ポイント：train/validationの分け方はtrain/testの分け方に似せる**

### 検証の手法

* Holdout: 普通のバリデーション `sklearn.model_selection.ShuffleSplit`
* KFold: データのサイズが小さい場合 `sklearn.model_selection.KFold`
* Leave one out (LOO): データのサイズが極めて小さい場合。名前通り。 
* Stratification: ラベルの分布を保持したい場合

**ポイント：訓練で使ったデータを絶対に検証で再利用しない**

### 検証時の問題

* データが小さすぎる 
* データに一貫性がない

KFoldを何回も行い平均する、モデルチューニングと評価に別々の分割を使う

### 提出結果と検証スコアが一致しない問題

* テストデータのサイズが小さい: しょうがない
* テストデータの分布が訓練データと異なる: leaderboard probing、データの分け方を変える
IBM Cloud vSRXへのSSH公開鍵認証

##目的
IBMCloud上のvSRXインスタンスへのアクセス時に、公開鍵を利用したアクセス方法を試してみました。
やり方は基本的に以前作成した、下記記事と同じです。

* [IBM Cloud サーバ接続に公開鍵認証の利用](https://qiita.com/khoshina/items/52a683a31efcdb8c1e63)

##環境
* ローカル端末：macOS Catalina 10.15.6 1台
* プラットフォーム:IBMCloud
    * 接続先vSRX:JUNOS 18.4R1-S1.3 1台

##公開鍵の作成

`ローカル端末での作業`

公開鍵の生成
今回は**暗号方式rsa**、**鍵長4096bit**にする。
-Cはただのコメント

```
% ssh-keygen -t rsa -b 4096 -C "ibmcloud-keys"
Generating public/private rsa key pair.
```
鍵の保存先を変更する場合は、入力する。
変更しない場合は、空白で**[Enter]**する

```
Enter file in which to save the key (/Users/khoshina/.ssh/id_rsa):
```
鍵＋パスワードを利用する場合、入力

```
Enter passphrase (empty for no passphrase):
```
上記のパスフレーズを再度、入力

```
Enter same passphrase again:
```

問題なければ、指定したフォルダもしくはデフォルトのフォルダに作成される

```
Your identification has been saved in /Users/khoshina/.ssh/id_rsa.
Your public key has been saved in /Users/khoshina/.ssh/id_rsa.pub.
The key fingerprint is:
SHA256:rdywhYN99E2wICtnRsR+Cey0pzIoLrzIPiCDl9Vypr4 ibmcloud-keys
The key's randomart image is:
+---[RSA 4096]----+
|       ++ . .    |
|       .=o . o   |
|     ..+=o... .  |
|    o +B+++. o   |
|.  o *. S++ . .  |
|= + o o..O       |
|++ o   o+ .      |
|+o. .            |
|o=o E.           |
+----[SHA256]-----+
```

##ファイル転送

###フォルダ作成
`vSRXでのの作業`

vSRXへSSHでログインする。
その後、シェルコマンドモードへ移行する

```
admin@vSRX>start shell
```

.sshフォルダを作成する。

```
% mkdir .ssh
% exit
exit
admin@vSRX>
```

###**公開鍵の転送**
`ローカル端末からの作業`
※OpenSSHによって、SCPによるファイル転送の手段は<font color="Red">非推奨</font>となっているが
rsyncがつかえなさそうだったので、SCPで実施した。
カレントディレクトリに**id_rsa.pub**がある前提

**「~/.ssh」に転送する**
adminユーザの場合、「/.ssh/authorized_keys」

```
scp id_rsa.pub admin@接続アドレス:~/.ssh/authorized_keys
```

##アクセス

あとはそのまま、アクセスするだけで公開鍵認証でログイン可能

```
% ssh admin@10.192.xx.xx
Last login: Fri Sep xx 07:33:46 2020 from 10.2.224.xx
--- JUNOS 18.4R1-S1.3 Kernel 64-bit  JNPR-11.0-20181207.6c2f68b_2_bu
admin@vSRX>
```
docker上のVue.jsのvue uiを使う

docker上にVue.jsのコンテナを立てたけど、`vue ui` を使いたくなった。
デフォだとlocalhostかつ8000で立ち上がる。

# オプションを指定するだけ
非常に簡単
`vue ui`の後にいろいろオプションを足せる

```bash
/usr/src/app$ vue ui -h       
  
Usage: ui [options]

start and open the vue-cli ui

Options:
  -H, --host <host>  Host used for the UI server (default: localhost)
  -p, --port <port>  Port used for the UI server (by default search for available port)
  -D, --dev          Run in dev mode
  --quiet            Don't output starting messages
  --headless         Don't open browser on start and output port
  -h, --help         output usage information 
```

ひとまず8080はdev用にのportとして置いていて、一応このデフォポートを使えるように8000もdocker-comose.ymlの時点で繋げた。

localhostだとdockerの外から見にいけないので、hostを `0.0.0.0` にして起動する。

```bash
$ vue ui -H 0.0.0.0
🚀  Starting GUI...
🌠  Ready on http://0.0.0.0:8000
```

これで[http://localhost:8000/](http://localhost:8000/)を見に行くと表示されている。

-P, —port でportを8080のすればそれでもいける。
以上、備忘録。
【JS学習その①】JavaScriptとECMAScript

#JS学習シリーズの目的
このシリーズは、私ジャックが学んだJavaScriptのメカニズムについてアウトプットも兼ねて、
皆さんと知識や理解を共有するためのものです。
(理解に間違いがあればご指摘いただけると幸いです)

#ECMAScriptとは
「JavaScript言語のコアの部分をECMAScriptとして仕様策定したもの」

1990年代(インターネット黎明期)に当時はブラウザとして大きなシェアを持っていた
"Netscape Navigator"(以降NNと略す)が皆さんご存じ"Internet Explore"(以降IEと略す)という
（当時は大きな）ライバルに勝つためにJavaScriptを生み出しました。
IEもこのJavaSciriptを使いたかったが、ライセンスなどの問題で使えなかったので新たに"JScript"を生み出しました。
しかし、この2つの言語には互換性がなかったため、ブラウザ間での仕様を統一するためにECMAScriptが作られました。
これにより、開発者がサイトなどの開発がしやすくなりハッピーになったというわけです。

#JavaScriptは実行環境によって使える機能が変わる
ECMAScriptについては前述した通りですが、あくまでJavaScriptの一部がECMAScriptです。
ブラウザ環境で動くのがECMAScript（他にもWeb APIsがある)ですが、PC内のNode.jsで動くときは
"ECMAScript"に加えて"CommonJS"が使われます。

ここで重要なのは、見出しの通り「JavaScriptは実行環境によって使える機能が変わる」ということです。

#まとめ
JavaScriptとは
・ECMAScriptの仕様に基づいて実装されているプログラミング言語
・環境によって使える機能が変わってくる

#おまけ
現在のECMAScriptの仕様策定は"Living Standard"といって、
「機能毎に使用を策定し、仕様が決まったものから最新版の仕様書に順次追加していく」
というプロセスを採用しています。
仕様策定プロセスはStage0～Stage4まで存在し、それぞれ
Stage0--アイデアレベル(Strawman)
Stage1--機能提案・検討(Proposal)
Stage2--暫定的に仕様決定(Draft)
Stage3--テスト・実装(Candidate)
Stage4--仕様決定(Finished)

基本的にStage2(Draft)の段階からES最新版に取り込みします。
Next.jsの特徴

#プログラミング勉強日記
2020年9月13日
JSには色々なフレームワークがあって、開発の用途によって使用するフレームワークが違うと思うので、まとめてみようと思う。[Reactについて](https://qiita.com/mzmz__02/items/18f04f8e4ec84f1cc1af)と[Angularについて](https://qiita.com/mzmz__02/items/929beb891c194c9d0f43)、[Vue.js](https://qiita.com/mzmz__02/items/0753cb65d7853cd60825)まとめたので、今回はNext.jsについてまとめる。

#Next.jsとは
　[Reactの特徴](https://qiita.com/mzmz__02/items/18f04f8e4ec84f1cc1af)の記事でも述べているが、Reactはフレームワークではなくライブラリである。Next.js(読み方「ネクストジェイエス」)はZEIT社が開発したJSのフレームワーク。
　Reactと組み合わせてWebアプリ開発を強化するフレームワークで、ReactのアプリのJSで行う画面の書き換えの処理をサーバー側で実行させて待機時間を短くするサーバーサイドレンダリングを可能にする。

#サーバーサイドレンダリング(SSR)を実現する
　上でも述べたように、JSは基本的にページのレンダリング(表示)時に実行される。なので、ページの大部分をJSに頼っていた李、ReactなどでSPA(Single Page Application)のような状態になっていると、初めてページを開くときに時間がかかってしまう。また、GoogleのクローラはJSを読み込んで結果を評価することもできるが、それもすべてではない。
　こういったSEO(検索エンジン最適化)やパフォーマンスの観点からページをレンダリングする前にJSの処理をサーバー側で行うことでユーザの待機時間を短くできる。

#参考文献
[Next.jsとは？JavaScriptフレームワークについて解説](https://programming-world.net/jsframework/next/)
[Next.jsの環境構築【これからはじめるNext.js】](https://bagelee.com/programming/next-js/setup-next-js/)
【JSメモ】ハンバーガーのトグルアクション

#はじめに
ここでのトグルアクションは、

>
開くときは、ハンバーガーボタンで開く。
閉じるときは、画面のどこを押しても閉じる

で実装したいと思います。

#コード
```sample.js
// SP用：ハンバーガーのトグルアクション
$(document).on('click', function(e) {
  if($(e.target).is('#hamburger')) {
    $('.c-header__nav').toggleClass('c-header__is-active');
  } else if($(e.target).is('*')) {
    $('.c-header__nav').removeClass('c-header__is-active');
  }
});
```
AppEngine PHPからGCP Stackdriver Loggingに吐き出すメモ

#始めに
もっといい方法があるかもしれません。
もしご存知の方がいらっしゃいましたら教えていただけますと嬉しいです🙇‍♂️

https://engineering.mercari.com/blog/entry/2019-05-22-122803/
こちらの記事を参考に作成させていただきました。ありがとうございます。

#以下

```
use Google\Cloud\Logging\Logger;
use Google\Cloud\Logging\V2\LoggingServiceV2Client;
use Google\Cloud\Logging\V2\LogEntry;
use Google\Api\MonitoredResource;

class AppLogger {
    private static $singleton;
    private $traceId;
    private $loggingClient;
    function __construct()
    {
        $this->traceId = explode('/', $_SERVER['HTTP_X_CLOUD_TRACE_CONTEXT'])[0];
        $this->loggingClient = new LoggingServiceV2Client(['projectId' => projectId()]);
    }

    public static function getInstance()
    {
        if (!isset(self::$singleton)) {
            self::$singleton = new AppLogger();
        }
        return self::$singleton;
    }

    private $entries = array();

    //Info log
    public function info($message) {
        $this->add($message,Logger::INFO);
    }

    //Warning log
    public function warning($message) {
        $this->add($message,Logger::WARNING);
    }

    //entryを追加
    private function add($message, $severity) {
        $entry = new LogEntry();
        //v2
        $resource = new MonitoredResource();
        $resource->setType('gae_app');
        $resource->setLabels([
            'bucket_name' => 'log_bucket',
            'project_id' => projectId(),
            'module_id' => 'default',
            'version_id' => $_SERVER['GAE_VERSION']
        ]);

        $entry->setLogName('projects/' . projectId() . '/logs/logname');
        $entry->setTextPayload($message);
        $entry->setSeverity($severity);
        $entry->setTrace('projects/' . projectId() . '/traces/' . $this->traceId);
        $entry->setResource($resource);
        $this->entries[] = $entry;
    }

    //最後に書き込み
    function __destruct()
    {
        try {
            $this->loggingClient->writeLogEntries($this->entries);
        } finally {
            $this->loggingClient->close();
        }
    }
}

//ログを書き込む
AppLogger::getInstance()->info('Info log');
AppLogger::getInstance()->warning('Warning log');
```

GCPのStackdriver Logging for PHPを使用します。
https://github.com/googleapis/google-cloud-php-logging

###AppEngine 1st genではsyslogで出来ていた。
Traceを指定しているため、この方法でログを書き出すとAppEngineの吐き出すリクエストログと自動的にグルーピングされます。（ただしなんか微妙なんですよね...）
AppEngine 1st gen(PHP5)ではsyslog()で自動的にされていたことですが、2ng genになってから、自由度が増した代わりにLog APIが廃止されてしまいました。
残念。
それについてはも先ほどのメルカリさんのブログをご参照ください。
create_dynamic_frame_from_optionsでデータベーステーブルの特定列のみを取得したい

AWS Glueで、[create_dynamic_frame_from_options](https://docs.aws.amazon.com/ja_jp/glue/latest/dg/aws-glue-api-crawler-pyspark-extensions-glue-context.html#aws-glue-api-crawler-pyspark-extensions-glue-context-create_dynamic_frame_from_options)を使ってAurora(MySQL互換)の各テーブルのDynamicFrameを作成し、[write_dynamic_frame_from_options](https://docs.aws.amazon.com/ja_jp/glue/latest/dg/aws-glue-api-crawler-pyspark-extensions-glue-context.html#aws-glue-api-crawler-pyspark-extensions-glue-context-write_dynamic_frame_from_options)でパーティション分割したParquetフォーマットのファイルとしてS3に吐き出すだけの簡単なJobを動かしていたんですが、ある大きめなテーブル(数百万行、かつ、TEXT型フィールドが複数含まれる)だけで2時間以上かかったり、メモリ不足で処理が完了しなくなってました。

おそらく、不要なTEXT型フィールドを取り除いてしまえば必要とするメモリも少なくてすみ、処理も早くなるだろうと思ったんですが、オプションを眺めても取得するカラムを指定できそうなものがない。そこで、必要なカラムのみを指定したVIEWをAuroraのDBに作成し、GlueのJobはテーブルの代わりにVIEWを使用してDynamicFrameを作成、ファイルに出力することで数分で終わるようになりました。

ということで、同じようなケースで困っている方はVIEW作るのおすすめです。

ただ、push_down_predicateで取得する行はフィルタリングできるので、なにか別の方法でもっと簡単にできるのではないかという気もしています。
AttributeError: 'NoneType' object has no attribute 'loader'

#始めに
今回はタイトルにあるようなエラーが起きたときの対処法を僕の実体験を元に書いていきます。

#エラー内容
```terminal
Error processing line 3 of /home/cjones/.local/lib/python3.6/site-packages/googleapis_common_protos-1.5.8-py3.6-nspkg.pth:

  Traceback (most recent call last):
    File "/usr/lib/python3.6/site.py", line 174, in addpackage
      exec(line)
    File "<string>", line 1, in <module>
    File "<frozen importlib._bootstrap>", line 568, in module_from_spec
  AttributeError: 'NoneType' object has no attribute 'loader'

Remainder of file ignored
```

#対処法
自分のエラー文のから、この記事のエラー内容の一番上と同じようなpathを見つける。
(最後から２番目くらいに「site-packages」とあるはず。)
そのパスに該当するところにターミナルで移動します。

```terminal
# /home/cjones/.local/lib/python3.6/site-packages/
#このように「site-packages」までを入力してください
$ cd 見つけたパス
```

移動が完了したら、次のようにターミナルに打ち込んでください。

```terminal
# googleapis_common_protos-1.5.8-py3.6-nspkg.pth
# site-packages以降の部分を打ち込みます。
$ vi site-packages以降の部分
```
そうするとファイルが開くので、「i」を押して編集モードにします。

```terminal
import sys, types, os;has_mfs = sys.version_info > (3, 5);p ...<rest of file>
```
この部分を探し、次のように改行を入れてください。

```terminal
import sys, types, os;
has_mfs = sys.version_info > (3, 5);p ...<rest of file>
```
※「i」を打たないと編集できないので注意してください。

それが終わったら「esc」を押してください。

最後に「：wq」を押すと保存＋終了ができるので完了です。

#最後に
今後も自分が体験したエラーについての記事も上げていきます。

#参考サイト
[AttributeError: 'NoneType' object has no attribute 'loader'](https://stackoverflow.com/questions/56935698/attributeerror-nonetype-object-has-no-attribute-loader)

[pip install pyomo corrupts python3 virtualenv #95](https://github.com/Pyomo/pyomo/issues/95)

[ターミナルのよく使うコマンド](https://qiita.com/ryo2132/items/b7e312b0eb50fc449841)
【IAM】ポリシーの作成

## やること
EC2, ELB, RDS, Auto Scaling, S3へのアクセスが可能な「`Application`」という名前のポリシーを作成する

## 1. ポリシーを作成する
![スクリーンショット 2020-09-13 14.42.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379501/7d36a878-22a7-ef4d-0b6e-45253f9e8cea.png)
<img width="1440" alt="スクリーンショット 2020-08-04 17.52.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379501/efb68ba1-9722-19d1-195f-f38eb262a8b2.png">

## 2. ポリシー名・説明を追加する
<img width="1440" alt="スクリーンショット 2020-08-04 18.01.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379501/efd69e8b-5ffa-35d8-a68c-f2d3c148de8a.png">

### 作成完了
<img width="1440" alt="スクリーンショット 2020-08-04 18.03.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379501/63126843-6309-76d0-1866-732945eec2c9.png">
Vueで行が選択可能なテーブルを作る 

# 作るもの
こんな感じのカラムを選択できるようなテーブルを作ります。
![table.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192237/a3cb21c6-08b6-59f3-dc14-0ee50b70def8.gif)

```vue
<template>
  <table>
    <thead>
      <th>
        <label class="form-checkbox">
          <input type="checkbox" v-model="isSelectAll" @click="select">
        </label>
      </th>
      <th>ID</th>
      <th>ユーザー名</th>
      <th>画像</th>
　　　 <th>作成日</th>
    </thead>
    <tbody>
      <tr v-for="user of users" :key="user.id">
        <th>
          <input type="checkbox" :value="user" v-model="selected">
        </th>
        <td>{{ user.id }}</td>
        <td>{{ user.name }}</td>
        <td>{{ user.image }}</td>
        <td>{{ user.date}}</td>
      </tr>

    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { id: 1, name: 'jhin', image: 'https://image.test.com', date: '2020/09/10' },
        { id: 2, name: 'ahri', image: 'https://image.test.com', date: '2020/09/11' },
        { id: 3, name: 'yasuo', image: 'https://image.test.com', date: '2020/09/12' },
      ],
      selected: [],
      isSelectAll: false,
    };
  },
  methods: {
    select() {
      this.selected = [];
      if (!this.isSelectedAll) {
        for(let i in this.item) {
          this.selected.push(this.items[i].id);
        }
      }
    }
  },
};
</script>
```

チェックボックスの`v-model`に配列を指定することがポイント。

チェックが入ると`:value`で指定した`user`オブジェクトが配列の`selected`に挿入されます。

```javascript
console.log(this.selected)
/*
 チェックされたカラムの情報が配列に挿入される
  [
   { id: 1, name: 'jhin', image: 'https://image.test.com', date: '2020/09/10' },
  ],
*/

```

非常に簡単。