OmniAICreator/Qiita-1.07M huggingface dataset:
Laravel x Vue.jsでnpm run watch-pollしてもコンポーネントが表示されないときの対処

# シンプルなvueが動かない

## 実行したコマンド

```bash
npm run watch-poll
```

## ソース晒す

ページが読み込まれたら「天才バカボン」と表示され、コンソールには、「Component mounted」と出てほしい。けど出ない。

```php:resources/views/top.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <meta name="csrf-token" content="{{ csrf_token() }}">
  <link rel="stylesheet" href="{{ mix('/css/app.css') }}">
</head>
<body>
  <div id="app">
    <top></top>
  </div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
```

```js:resources/js/app.js
require('./bootstrap');

window.Vue = require('vue');

Vue.component('top', require('./vue/top/top.vue').default);

const app = new Vue({
  el: '#app'
});
```

```vue:resources/js/vue/top/top.vue
<template>
  <h1>天才バカボン</h1>
</template>

<script>
  export default {
    mounted() {
      console.log('Component mounted.')
    }
  }
</script>
```

## 解決策

スーパーリロード!!で解決でした。
chromeなら以下。
　Macなら`Cmd + Shift + R`
　Windowsなら`Shift + F5`

何度も`npm run`を試したけど、ブラウザ側がキャッシュを読み込んでいたのでちゃんと表示できなかったよう。
[Android] fuel （HttpURLConnection）の cookie を初期化する方法

# 概要
Android（Kotlin） の HTTP ネットワークライブラリである [fuel](https://github.com/kittinunf/fuel) を使って API リクエストする際、 cookie を初期化してリクエストする方法です。
（タイトルに HttpURLConnection とあるのは fuel 内でリクエストする際 HttpURLConnection を使っているため）

* なぜ初期化したいのか
  * 複数のアカウントでログインできる機能を実装していた
  * 1つ目のアカウントでログインするとログインしたアカウントの cookie が保持されてしまい、2つ目のアカウントでログインしようとすると既に「ログイン済み」という扱いをされていた
  * 2つ目のアカウントでログインするときには「未ログイン」状態にする必要があった

# 方法

```kotlin
CookieHandler.setDefault(CookieManager())
```

こちらのコードで cookie が初期化されるので、リクエストする前に実行させればよいです。

# なぜこの方法で初期化できるのか

わかってしまえばなんてことはないのですが、この答えにたどり着くまでに調べたことをつらつらと。

- fuel が API リクエストするときに使ってるのは HttpURLConnection
   - [com.github.kittinunf.fuel.toolbox.HttpClient: sendRequest()](https://github.com/kittinunf/fuel/blob/f16bd8e30c73812c20d46b5c0368829b4867daa2/fuel/src/main/kotlin/com/github/kittinunf/fuel/toolbox/HttpClient.kt#L83-L146)

- HttpURLConnection は java.net.CookieManager を参照する
    - [stackoverflow: How to handle cookies in httpUrlConnection using cookieManager](https://stackoverflow.com/questions/16150089/how-to-handle-cookies-in-httpurlconnection-using-cookiemanager?answertab=votes#tab-top)

- java.net.CookieManager は java.net.CookieHandler を継承しており、以下の構成になっている（java.net.CookieManager のソースコメントに書いてあったやつをそのまま引用してます）

```
 *                  use
 * CookieHandler <------- HttpURLConnection
 *       ^
 *       | impl
 *       |         use
 * CookieManager -------> CookiePolicy
 *             |   use
 *             |--------> HttpCookie
 *             |              ^
 *             |              | use
 *             |   use        |
 *             |--------> CookieStore
 *                            ^
 *                            | impl
 *                            |
 *                  Internal in-memory implementation
```

- いちおう fuel の Request から HttpURLConnection を出力して CookieHandler を確認
  - はじめてリクエストするとき
<img width="626" alt="スクリーンショット 2020-05-28 19.03.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34926/e651f886-6c7e-cb7d-0cde-a45b635faf9d.png">
  - 2回目にリクエストするとき
<img width="695" alt="スクリーンショット 2020-05-28 19.23.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34926/c7c869fb-3e40-dd5f-4801-85c8c3aa4fb4.png">

- よって以下のコードでリクエストする前に java.net.CookieHandler を初期化すればよい

```kotlin
CookieHandler.setDefault(CookieManager())
```




# 注意

- Cookie を引き継いだ状態で API リクエストしたい場合は、初期化する前に今の状態をどこかに（Preferencesあたりかな）へ退避させたりする必要があります。
【Wordpress】投稿ページネーション関数は固定ページじゃ使えない？だが断る！

#本記事について
Wordpressの固定ページ(front-page.php)で投稿ページネーション関数(the posts pagination)を使用してカスタム投稿ページの投稿一覧表示と投稿ページネーションをつけようとしていたが、普通に使用すると上手く行きませんでした。
Googleで検索してみると固定ページじゃ駄目みたいな感じだったけど、気合？で乗り切れたので共有してみます。
#結論
以下のコードでうまくいきました。（カスタム投稿タイプ'photo'、１ページに表示する投稿５つの例)

~~~php:front-page.php
					<?php
			$paged = get_query_var('page') ? get_query_var('page') : 1 ;
			set_query_var('paged', $page);
			$args = array('post_type' => 'photo',
						  'posts_per_page' => 5,
						  'paged' => $paged );
			
			$query = new WP_Query($args);       
		
			if ( $query->have_posts() ) :
                        while ( $query->have_posts() ) : $query->the_post();
                            get_template_part( 'content' );
                        endwhile;
						$GLOBALS['wp_query']->max_num_pages = $query->max_num_pages;
						the_posts_pagination( array(
							'mid_size' => 2,
							'prev_text' => __( 'Back', 'twenty-minutes' ),
							'next_text' => __( 'Next', 'twenty-minutes' ),
							'screen_reader_text' => __( 'Posts navigation', 'twenty-minutes' )
						) );
                    
                    else :
                         get_template_part( 'no-results', 'index' );    
                    endif;
                    ?>    

~~~

#解説
###■Point1:固定ページでは現在のページは’paged'じゃなくて'page'に入ってる。
なので、WP_Queryの$pagedに設定するのはget_query_var('paged')じゃなくて、get_query_var('page')になります。

###■Point2:the_posts_paginationはグローバル変数の'paged'を見てるようだ。
固定ページでは'paged'には初期値が入っているようだが、the_posts_paginationは'page'ではなく'paged'を見に行っているようなので、このままだとページネーションがうまくできなかった。
なので、無理やり？set_query_var('paged', $page);として'paged'に'page'の値を入れてあげたら、うまく動きました。

#備考
素直にarchive.phpとかを使えばいいかも・・・
どうしても固定ページでthe_posts_paginationを使いたかったら、参考にしてみてください。
マクロ環境の設定



## 開発タブの追加・マクロの有効化方法
####【動作環境】
・Windows10 Home 64bit
・MS Office Home and Bussiness 2019
　MS Excel 2019 MSO 64ビット

#### 【手順】
1. Excel起動＞オプション<br>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/645410/c8ed1417-6be4-514e-f925-aed03fb56fd2.png)
2. トラストセンター＞トラストセンターの設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/645410/493286d9-1522-ded3-dce6-cf945f13ed4d.png)
3. マクロの設定＞警告を表示してすべてのマクロを無効にする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/645410/c80efb25-2613-4b67-40c9-c9cc6f10d3bc.png)
※マクロが無効になっていますが、マクロが存在する場合はセキュリティの警告が表示されます。 状況に応じてマクロを有効にします。[^1]

4. リボンのユーザー設定＞開発にチェック:white_check_mark: ＞OK![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/645410/607e14e4-5eff-c214-e444-7526ddc9e468.png)



 [^1]: [Microsoftサポート](https://support.office.com/ja-jp/article/office-ドキュメントのマクロを有効または無効にする-12b036fd-d140-4e74-b45e-16fed1a7e5c6")
MacでRaspberry Piをバックアップ

こちらを参考にバックアップしてみたので、自分用のメモとして。
[RaspberryPiのバックアップ＆リストア方法 for Mac](https://simple-was-best.com/blog-entry-raspberrypi-backup-restore-for-mac.html)

#Macでのマウントディスク名を確認する

```
$ diskutil list
/dev/disk3 (external, physical):
   #:                       TYPE NAME                    SIZE       IDENTIFIER
   0:     FDisk_partition_scheme                        *31.5 GB    disk3
   1:             Windows_FAT_16 RECOVERY                1.7 GB     disk3s1
   2:                      Linux                         33.6 MB    disk3s5
   3:             Windows_FAT_32 boot                    72.4 MB    disk3s6
   4:                      Linux                         29.7 GB    disk3s7
```

`/dev/disk3`にマウントされていることを確認。
バックアップのためにアマウントするので以下のコマンドでアンマウント

```
$ diskutil umountDisk /dev/disk3
Unmount of all volumes on disk3 was successful
```

#ddコマンドでバックアップ
以下のコマンドでバックアップ

```
$ sudo dd if=/dev/disk4 of=raspi-backup.img bs=1m 
```

|オプション|意味|
|---|---|
|if=***ファイル***|標準入力の代わりにファイルから読み出す。|
|of=***ファイル***|標準出力の代わりにファイルへ書き込む。|
|bs=***バイト数***|1回に読み書きするブロックサイズ(バイト数)|

これで完了。
結構時間かかります。
JavaScriptでの様々なメソッド

#配列をJSON形式で引き渡す場合
jbuilder:array! メソッドです。
これで配列をjson形式で引き渡すことができます。
この記法は非同期通信で検索機能の実装を施す時に使うことが多いです。
以下、サンプル

```javascript
json.array! @tweets do |tweet|
  json.id tweet.id
  json.text tweet.text
end
```

#キーボードを話した瞬間に起こるイベント
keyupメソッドです。
これも検索機能に大きく関わってきます。
検索ボックスに文字を入れると勝手に予測変換が出てきますよね。
これはkeyupの効果です。
Viewでの繰り返しをコレクションをレンダリングすることで実装する【Rails】

indexを表示するときなどビューテンプレート内でeachを使うことはよくあると思います。

Railsにはeachを書かなくても、部分テンプレートを使って同じ要素を複数回表示させることができるメソッドが備えられています。

## eachを使って書く

例としてユーザーを表にして表示する場合を考えてみます。
下のようなコントローラがあった場合、

```ruby:users_controller.rb
def index
  @users = User.all
end
```
次のようにeachを使って表を生成することができます。

```erb:index.html.erb
<% @users.each do |user| %>
  <tr>
    <td><%= user.name %></td>
    <td><%= user.email %></td>
  </tr>
<% end %>
```

## コレクションを部分バーシャルを使ってレンダリングする

renderメソッドを使うと部分パーシャルを使って繰り返しを表現できます。

```erb:index.html.erb
<%= render partial: "user", collection: @users  %>
```

部分パーシャルを用意します。

```erb:_user.html.erb
  <tr>
    <td><%= user.name %></td>
    <td><%= user.email %></td>
  </tr>
```

renderメソッドのcollectionオプションにコレクションを指定すると、要素の数の回数、部分パーシャルをこの位置に埋め込みます。
部分パーシャル内のローカル変数はパーシャルの名前に基づいた名前になります。

パーシャルの名前をclientに変更すると

```erb
<%= render partial: "client", collection: @users  %>
```
部分パーシャル内のローカル変数はclientになります。

```erb:_client.html.erb
  <tr>
    <td><%= client.name %></td>
    <td><%= client.email %></td>
  </tr>
```
コレクションに指定した変数の単数形になるわけではないので注意が必要です。
また、collectionオプションを付けるときは、partialを省略することができません。

## パフォーマンスの悪い書き方

```erb:index.html.erb
<% @users.each do |user| %>
  <%= render "user", user: user %>
<% end %>
```
```erb:_user.html.erb
  <tr>
    <td><%= user.name %></td>
    <td><%= user.email %></td>
  </tr>
```
コレクションを使わずに部分テンプレートを繰り返し表示してしまうとパフォーマンスが悪くなります。
部分テンプレートを繰り返し呼び出す時はcollectionオプションを使う記述にしましょう。

## 略記法

```erb:index.html.erb
<%= render @users %>
```

```erb:_user.html.erb
  <tr>
    <td><%= user.name %></td>
    <td><%= user.email %></td>
  </tr>
```

renderメソッドの引数にコレクションを渡すと要素のモデル名からパーシャル名が推測されます。

## さいごに
この記事の筆者はプログラミングを学習し始めたばかりの初心者です。間違いがあれば指摘していただけると幸いです。

---
参考
[パーシャルをrenderする際のパフォーマンスに関する注意点](https://qiita.com/itmammoth/items/612efc6ad3280349b7e1)
[Railsガイド](https://railsguides.jp/layouts_and_rendering.html#%E3%83%91%E3%83%BC%E3%82%B7%E3%83%A3%E3%83%AB%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B)
Ruby クラスを使うプログラミングと、使わないプログラミングのちがい

## クラスを使わないプログラミング

(例)

```ruby
# ユーザのデータを作成する
users = []
users << { first_name: 'Hanako', last_name: 'Yamada', age: 8 }
users << { first_name: 'Taro', last_name: 'Yamamoto', age: 10 }

# 氏名を作成するメソッド
def full_name(user)
  "#{user[:first_name]} #{user[:last_name]}"
end

# ユーザのデータを表示する
users.each do |user|
  puts "氏名: #{full_name(user)}, 年齢: #{user[:age]}"
end
```

**問題点**

1. ハッシュを使用すると、キーをタイプミスした場合、エラーは表示されず、nilが返ってくる。そのため、不具合に気づかない可能性がある点
2. ハッシュは新しくキーを追加したり、内容を変更できるため、「脆くて壊れやすいプログラム」になりがちな点

(例1)

```ruby
users[0][:first_name] #=> "Hanako"
users[0][:first_mame] #=> nil
```
(例2)

```ruby
# 勝手に新しいキーを追加
users[0][:food] = 'rice'
# 勝手にfirst_nameを変更
users[0][:first_name] = 'dozaemon'
puts users[0]
#=> {:first_name=>"dozaemon", :last_name=>"Yamada", :age=>8, :food=>"rice"}
```

## クラスを使ったプログラミング

(例)

```ruby
# Userクラスを定義する
class User
  attr_reader :first_name, :last_name, :age

  def initialize(first_name, last_name, age)
    @first_name = first_name
    @last_name = last_name
    @age = age
  end
end

# ユーザのデータを作成する
users = []
users << User.new('Hanako', 'Yamada', 8)
users << User.new('Taro', 'Yamamoto', 10)

# users[0].first_name

# 氏名を作成するメソッド
def full_name(user)
  "#{user.first_name} #{user.last_name}"
end

# ユーザのデータを表示する
users.each do |user|
  puts "氏名: #{full_name(user)}, 年齢: #{user.age}"
end

#=> 氏名: Hanako Yamada, 年齢: 8
#   氏名: Taro Yamamoto, 年齢: 10
```

Userクラスを導入すると、タイプミスした時にエラーが発生します。

(例)

```ruby
puts users[0].first_name #=> 'Hanako'
puts users[0].first_mame #=> undefined method `first_mame' for #<User:0x00007f888d08c150> (NoMethodError)
```

新しく属性を追加したり、内容を変更したりすることも防止できます。

(例)

```ruby
# 勝手に属性を追加できない
users[0].food = 'rice' #=> undefined method `food=' for #<User:0x00007fefae1300d8> (NoMethodError)

# 勝手にfirst_nameを変更できない
users[0].first_name = 'tanjiro' #=> undefined method `first_name=' for #<User:0x00007faa210c0418> (NoMethodError)
```

また、クラスの内部にメソッドを追加することもできます。

(例)full_nameメソッドをUserクラスの内部で定義する

```ruby
# Userクラスを定義する
class User
  attr_reader :first_name, :last_name, :age

  def initialize(first_name, last_name, age)
    @first_name = first_name
    @last_name = last_name
    @age = age
  end

  # 氏名を作成するメソッド
  def full_name
    "#{first_name} #{last_name}"
  end
end

# ユーザのデータを作成する
users = []
users << User.new('Hanako', 'Yamada', 8)
users << User.new('Taro', 'Yamamoto', 10)

# ユーザのデータを表示する
users.each do |user|
  puts "氏名: #{user.full_name}, 年齢: #{user.age}"
end

#=> 氏名: Hanako Yamada, 年齢: 8
#   氏名: Taro Yamamoto, 年齢: 10
```

このように、クラスは内部にデータを保持し、さらに自分が保持しているデータを利用する独自のメソッドを持つことができます。データとそのデータに関するメソッドが常にセットになるため、クラスを使わない場合に比べてデータとメソッドの整理がしやすくなります。


## 参考にした文献

[プロを目指す人のためのRuby入門](https://www.amazon.co.jp/dp/4774193976/ref=cm_sw_em_r_mt_dp_U_shaUEbXSFD416)
AWSの各機能について


AWSの各機能について勉強中です。

とりあえず、よく使うもの(EC2とかS3など)の
概要は、下記ページがわかりやすいかなと思います。

https://www.skyarch.net/proactive/cloud/aws/aboutaws_01.html

ここに乗っていないものに関しましては
色々と解説しているものを探したのですが、
結局、下記の公式ページがわかりやすかったです。笑

https://aws.amazon.com/jp/aws-jp-introduction/aws-jp-webinar-service-cut/

上記から気になる機能の名前で検索して、
PDFと動画をみて学ぶと、何ができるのかなどは
イメージつきました！

ご参考までに。。。
Ruby でメモ化する時に return をしてはいけない

結論から言うと Ruby でメモ化するときはアーリーリターンしてはいけないという話です（恐らく Ruby に限らず）。

- NG

```ruby
def user
  @user ||= begin
    user = User.find_or_initialize_by(id: 1)
    return user if user.persisted? # インスタンス変数定義中に return してはいけない
    
    user.save
    user
  end
end
```

- OK

```ruby
def user
  @user ||= begin
    user = User.find_or_initialize_by(id: 1)
    if user.persisted?
      user
    else
      user.save
      user
    end
  end
end

# もしくは

def user
  @user ||= begin
    user = User.find_or_initialize_by(id: 1)
    user.save if user.new_record?
    user
  end
end
```

---

Ruby（Rails）でメモ化を使う際、以下のように書くことがあると思います。

```ruby
def user
  @user ||= User.first
end
```

複数行であれば `begin` 〜 `end` で囲みます。

```ruby
def user
  @user ||= begin
    user = user.find_or_initialize_by(id: 1)
    if user.persisted?
      user
    else
      user.save
      user
    end
  end
end
```

ここでよくあるリファクタリング手法であるアーリーリターンを使ってみます。

```ruby
def user
  @user ||= begin
    user = User.find_or_initialize_by(id: 1)
    return user if user.persisted?
      
    user.save
    user
  end
end
```

一見するといい感じに見えますが、このメソッドを rails console で実行してみると以下のようになります。

```ruby

[1] pry(main)> def user
[1] pry(main)*   @user ||= begin
[1] pry(main)*     user = User.find_or_initialize_by(id: 1)
[1] pry(main)*     return user if user.persisted?
[1] pry(main)*
[1] pry(main)*     user.save
[1] pry(main)*     user
[1] pry(main)*   end
[1] pry(main)* end
=> :user
```



```console
[2] pry(main)> user
  User Load (3.4ms)  SELECT `users`.* FROM `users` WHERE `users`.`id` = 1 LIMIT 1
=> #<User:0x00007ff0b4d2e338
 id: 1,
 created_at: Tue, 09 Jun 2020 15:04:04 JST +09:00,
 updated_at: Tue, 09 Jun 2020 15:04:04 JST +09:00>
[3] pry(main)> user
  User Load (1.8ms)  SELECT `users`.* FROM `users` WHERE `users`.`id` = 1 LIMIT 1
=> #<User:0x00007ff0ad554740
 id: 1,
 created_at: Tue, 09 Jun 2020 15:04:04 JST +09:00,
 updated_at: Tue, 09 Jun 2020 15:04:04 JST +09:00>
```

メモ化が行われておらず毎回クエリが発行されています。リファレンスを改めて確認してみると、

> Ruby 2.7.0 リファレンスマニュアル
> https://docs.ruby-lang.org/ja/latest/doc/spec=2fcontrol.html#return
> return
> 式の値を戻り値としてメソッドの実行を終了します。

とありますので `return` した段階で `user` メソッドが終了し、`@user` のインスタンス変数が `nil` のままなので毎回処理を実行してしまっているということでした。
考えてみれば当然ですが、クセで早期リターンをよく使っているとつい書いてしまってハマってしまうこともあるので気をつけましょうということで。
Wp-adminを隠したがWp-Membersのフォームから管理者ログインできるから意味ないじゃん対策

#本投稿について
Wordpressのセキュリティ対策として有名なのが、ログインページ(/wp-admin)を隠して、総当たり攻撃などによる管理者権限での不正ログインを防ぐことですが、会員制サイトを作成するためにプラグイン『Wp-Members』を使用してログインフォームを設置すると、そこからログインできてしまいます。
そこで、なんとか『Wp-Members』のログインフォームから管理者権限でログインできないようにしたときのメモです。

#先に結論

function.phpに以下のコードを書きました。

~~~php:function.php
add_filter( 'wpmem_login_redirect', 'my_login_redirect', 10, 2 );
function my_login_redirect( $redirect_to, $user_id ) {
	
	if(user_can( $user_id, 'administrator' )){
		wp_logout();
	}
    return home_url( '/' );
}
~~~

#解説
Wp-Membersのフックには、ログイン直後の明示的なフックはありません。（ここで困った:frowning2:）
但し、ログイン後のリダイレクト先を指定するフックとして、ユーザーIDを引数にもつ『wpmem_login_redirect』がありましたので、これを利用できないかと考えました。
この例では、ユーザーIDが管理者権限を持つか、wordpressの標準関数user_canで判定し、そうであるならば、wp_logoutで強制ログアウトさせます。
Kotlinのletとrun

人の書いたやつ読んでてやけに出てくるけど意味わからなかったので
letとrunはscope関数と言うらしい
他にもalsoとapplyがあるらしい


```kotlin:Kotlin
val hoge: String? = "string"
hoge?.let {
  /* hoge is not null */
} ?:run {
  /* hoge is null */
}
```

こんなやつ
itがnullじゃなかったらletの内容を返し、nullだったらrunの内容を返すらしい

多分これと一緒

```kotlin:Kotlin
val hoge: String? = "string"
if( hoge != null ) {
  /* hoge is not null */
} else {
  /* hoge is null */
}
```

ifなりwhenなりでいいじゃん……わざわざ特殊な書き方しないでくれ……
scope関数とか、letとかrunとか、その名前nullと何の関係もないから本来の使い方は違うのか？？
こういう書き方の場合じゃなくて、letだけちょっと入れるなら便利なのか？

わかる人いたらlet使うメリットを教えてください、切実に
【Devise】must existの対処法

# こんな方に
- Railsでポートフォリオ作成中
- deviseを導入済み
- must existエラーが起こる

# Too Long, Didn't Read
`application_controller.rb`に部分的に**strong parameter**を書くことで解決

# 環境
- MacOS Big Sur v11.2.1
- Ruby 2.6.5
- Rails 6.0.3.2

# 新規登録に必要な情報

Userモデルを次のコマンドで作成します。

```terminal:terminal
$ rails g devise User
```

色々ファイルが生成されますが、その中にあるマイグレーションファイルを確認してみます。

```ruby:migrate/timestamp_devise_create_users.rb
# frozen_string_literal: true

class DeviseCreateUsers < ActiveRecord::Migration[5.2]
  def change
    create_table :users do |t|
      ## Database authenticatable
      t.string :email,              null: false, default: ""
      t.string :encrypted_password, null: false, default: ""

      ## Recoverable
      t.string   :reset_password_token
      t.datetime :reset_password_sent_at

      .
      .
      .

    end
 end
```

Database authenticableにある通り、デフォルトでは認証にemailとpasswordを必要としていることがわかりますね。

認証にnameも必要としたいので次のコマンドでusersテーブルにstring型のnameカラムを追加します。

```terminal:terminal
$ rails g migration AddNameToUsers name:string
```
マイグレーションファイルが生成されるので次のコマンドでデータベースに反映させる。

```terminal:terminal
$ rails db:migrate
```

これでnameカラムも追加できたし、バリデーションとフォームをちゃちゃっと設定っと！！

<img width="738" alt="スクリーンショット 2020-06-09 14.29.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597061/7d007c14-5cec-b6c7-674e-33367df2083c.png">

アカウントを登録！

<img width="738" alt="スクリーンショット 2020-06-09 14.30.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597061/fbef6f5e-32f5-67fd-aeb4-a011ae515431.png">

ん？

どうやらnameがmust existとのこと。
Nameを入力しているのに値がないとは？って感じですがここでstrong parameterの存在を思い出す。

deviseを使う前までは新規登録等の機構を司るコントローラにプライベートメソッドとして記述していた記憶があったので、それに沿ってコントローラを覗いてみる。

```ruby:controllers/users/registrations_controller.rb
  . 
  .
  .
  # If you have extra params to permit, append them to the sanitizer.
  # def configure_account_update_params
  #   devise_parameter_sanitizer.permit(:account_update, keys: [:attribute])
  # end
  .
  .
  .
```

それっぽい記述はあったけどすべてコメントアウトされていてどういうこと！？って感じだったのでdeviseのGithubを見てみるとこんな記述があった。

<img width="768" alt="スクリーンショット 2020-06-09 15.46.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597061/33b588ac-f69b-7922-d079-26aa7e6da90f.png">
参考：[heartcombo/devise](https://github.com/heartcombo/devise/wiki/How-To:-Allow-users-to-sign-in-using-their-username-or-email-address)

要は`application_controller.rb`に部分的にstrong parameterを書いてやればいいらしい。

```ruby:controllers/application_controller.rb
class ApplicationController < ActionController::Base
  before_action :configure_permitted_parameters, if: :devise_controller?
  # ↑も記述

  protected

  def configure_permitted_parameters
    added_attrs = [:name] #追加したparams
    devise_parameter_sanitizer.permit :sign_up, keys: added_attrs
  end
end

```

これで通ったはず、、、

<img width="1116" alt="スクリーンショット 2020-06-09 15.54.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597061/bda6e53a-fa67-7fd9-204b-f6215bd5432e.png">

ヤッタネ！
AWXインストール時に「(libselinux-python) aren't installed!」が発生。

## 事象
* AWXをインストールしようと`install.yml`を実行すると、以下のエラーが発生。

```
TASK [local_docker : Create Docker Compose Configuration] ***************************************************
ok: [localhost] => (item=environment.sh)
ok: [localhost] => (item=credentials.py)
failed: [localhost] (item=docker-compose.yml) => {"ansible_loop_var": "item", "changed": false, "checksum": "7672c67601f56377417a0dcaee5cb3349c876e8d", "item": "docker-compose.yml", "msg": "Aborting, target uses selinux but python bindings (libselinux-python) aren't installed!"}
ok: [localhost] => (item=nginx.conf)
```

* 環境
    * CentOS Linux release 7.7.1908 (Core)
    * Python 2.7.5

## 原因
* AWXインストールに必要となる`SE Linux`が見つからない。

## 対処
* python2の場合、`libselinux-python`をインストールする。
* python3の場合、`python3-libselinux`をインストールする。

```
yum -y install libselinux-python
yum -y install python3-libselinux
```
初心者でもAWSプロダクトをさわってみたい！（AWS Lambda編）

<img width="1271" alt="スクリーンショット 2020-06-09 15.30.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630283/dd6a83c4-453f-2887-a168-6e723ec558cc.png">
![スクリーンショット 2020-06-09 15.31.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630283/5b4019c1-f5de-80c2-bfbb-3c9bf5736ca8.png)
![スクリーンショット 2020-06-09 15.31.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630283/b4c1d48a-af2b-bef1-70b0-fa1813d6cbfc.png)
![スクリーンショット 2020-06-09 15.31.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630283/00d8f346-d56c-300e-5279-83931310e191.png)
![スクリーンショット 2020-06-09 15.31.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630283/2e12706f-df1e-ba3a-2d18-1282973e8bf6.png)
![スクリーンショット 2020-06-09 15.31.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630283/b01f6c36-e928-4bf0-b836-2048a61ca457.png)
![スクリーンショット 2020-06-09 15.31.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630283/884d65af-7d54-1c29-6c4b-664b41011f97.png)
![スクリーンショット 2020-06-09 15.31.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630283/ccca52e7-59bd-d857-a667-461574a03633.png)
![スクリーンショット 2020-06-09 15.32.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630283/7784db20-15a3-6adc-7031-8fb3ec4ce285.png)
**実はいきなりStepFunctionのハンズオンにチャレンジしましたがLambdaがわからなすぎて逆戻り、、、**
**次はLambdaでプロダクト間を連携させるようなイベントを組んで、それからStepFunctionにチャレンジしたいです**
javascript　表示内容を切り替えるタブの制作

今回javascriptで表示内容を切り替えるタブを制作します。

CSSでも作れますがjsの勉強も兼ねて作成してみましょう。


#今回制作するタブ
[![Image from Gyazo](https://i.gyazo.com/82153fd79559a093c32b5341dec6b96d.gif)](https://gyazo.com/82153fd79559a093c32b5341dec6b96d)

３つのタブがあり選択すると中身が切り替わります。

コンソールも載せていますがクリックイベントで指定要素に
.activeクラスを付与することで表示を切り替えます

ポイントは以下のあたりです。

・DOMの取得は複数（queryselectorAllを使用）
・forEachで複数取得した要素をまわす
・クリックした要素以外のactiveクラスを外しクリックした要素にはつける


#HTML/CSSの準備

```html:html
<div class="tab__container">
  <ul class="tab__label">
    <li><a href="#" class="active" data-id="tab__info">サイトの情報</a></li>
    <li><a href="#" data-id="tab__product">商品情報</a></li>
    <li><a href="#" data-id="tab__contact">お問い合わせ</a></li>
  </ul>
  <section class="tab__content active" id="tab__info">
    サイトの情報。サイトの情報。
  </section>
  <section class="tab__content" id="tab__product">
    商品情報。商品情報。
  </section>
  <section class="tab__content" id="tab__contact">
    お問い合わせ。お問い合わせ。
  </section>
</div>

```

```css:css
  tab__container{
    height: 100vh; //仮
  }
  tab__label {
  display: flex;
    & li a{
      display: inline-block;
      text-align: center;
      padding: 1rem 1rem;
      color: black;
      border-radius: 10px 10px 0 0;
      &.active{
        background-color:rgb(231, 228, 228);
      }
      &:not(.active):hover{
        opacity: 0.5;
        transition: 0.4s;    
      }
    }
  }
  &__content{
    display: none;
    &.active{
      background-color:rgb(231, 228, 228);
      min-height: 150px;
      padding: 1em;
      display: block;  
    }
  }


```
※CSSはSCSSを使用しています。
初期表示としたいコンテンツにactiveクラスを設定しておきましょう。

タブの部分にdata-idという属性を付与して
対応するコンテンツと紐付けをしておきます

#JSの実装

##DOMの取得

まずはタブのDOMを取得します。
今回タブには共通クラスはないので以下で取得しましょう

```javascript:js
  const tabLabels = document.querySelectorAll('.tab__label li a');
//.tab__labelクラス内のli内のaタグを取得
```
console.log(tabLabels)のコンソール結果
[![Image from Gyazo](https://i.gyazo.com/6f34d3546c9e6f05b21ef9ce0c1614e8.png)](https://gyazo.com/6f34d3546c9e6f05b21ef9ce0c1614e8)

つづいてcontentsの取得です。

```javascript:js
  const tabContents = document.querySelectorAll('.tab__content');
```
console.log(tabContents)のコンソール結果
[![Image from Gyazo](https://i.gyazo.com/3bd0f34a8c82a2936dff6a3158200a5c.png)](https://gyazo.com/3bd0f34a8c82a2936dff6a3158200a5c)

contentｓには.tab__contentという共通クラスがあるので上記で取得できます。

##クリックイベントの作成

```javascript:js
  tabLabels.forEach(function(clickedLabel){
    clickedLabel.addEventListener('click',function(e){
      e.preventDefault(); //aタグのリンク遷移を消す
      tabLabels.forEach(function(label){
        label.classList.remove('active');
      });
      clickedLabel.classList.add('active');
      tabContents.forEach(function(content){
        content.classList.remove('active');
      });
      document.getElementById(clickedLabel.dataset.id).classList.add('active');
    });
  });
```

document.getElementById(clickedLabel.dataset.id)部分で
HTMLに記載したタブに連動するコンテンツが取れるようになっています。

クリックイベントの中で一度タブもコンテンツも.activeクラスを外して
再度クリックされたタブとコンテンツに付与し直しています。

こうすることで複数選択にはならずクリックされた要素だけに
.activeクラスがつけられる動きになります。
Gitの流れ(コミットまで)

#Gitの大まかな流れ（コミットまで）#

初めて投稿します。自分のアウトプット目的で記事を作成していきます。
前提としてgitやテキストエディタがインストールされているものとします。

##用語の確認##
・**ワークツリー**
自分達が作業しているディレクトリの場所指します。

・**ステージする**
特定の変更内容をindexに登録する

・**ローカルリポジトリ**
ローカル環境でのプロジェクトのファイルやディレクトリの変更内容を記録するエリアのこと

・**リモートリポジトリ**
サーバに配置されており、複数人で開発プロジェクトを共有する場所

##目的のディレクトリへ移動##
まず今回扱うディレクトリへ移動します。
自分はtest_developというディレクトリに移動します。
ターミナルで移動するコマンドは**cd**を使います。

```terminal
cd Desktop/test_develop/
```

次にこのファイルの中身を見てみます。確認するコマンドは **ls**です。

```terminal
ls
```

まだ何も作成していないので何も表示されないと思います。


ここでindex.htmlファイルを作成してみます。どのテキストエディターでもいいので開いてください。
そして何でもいいので書き込んで、保存します。保存する際には自分の作成したディレクトリに保存してください。


再度**ls**コマンドで確認してみてください。index.htmlファイルが表示されていると思います。


##コミットするまでの流れ##
先に今回使うコマンドを上げておきます。
・**git add**
・**git status**
・**git log**
・**git diff**
・**git commit**

###git add###
まず最初にステージ追加するためのgit addコマンドについて見ていきます。

大きく分けて二つのやり方があります。
**git add .**
全ての情報をステージに載せます

**git <ファイル名>**
指定したファイルをステージに載せます（複数可能）

今回であればこの様になります

```terminal
git add .
```


```terminal
git add index.html
```

ここで**git status**で内容をみていきましょう

```terminal
git status
```

そうするとターミナル上にこの様に表示されると思います。

```terminal
Changes to be committed:

new file: index.html
```

これでステージに載せることができました。

###git diff###

ここで**git diff --staged**コマンドを使ってどこが変更されたかみて見ましょう。

```terminal
git diff --staged
```
変更された内容が緑色で表示されています。このコマンドはワークツリーとステージ、ステージとリポジトリ間の**差分**を表示します。

前者の場合は**git diff**、後者の場合は**git diff --staged**を使います。
（要するにgit addする前はdiffのみ、addした後は--stagedを追加する）

###git commit###

最後に変更を記録して見ましょう。
今回の目的commitしていきます。

使い方は
・**git commit**
・**git commit -m**
があります。
まず**git commit**コマンドの方を使っていきます。

```terminal
git commit
```

この様に実行するとテキストエディタが起動されると思います。
そしたら一行目に変更内容、二行目は空白にして三行目に変更理由を書きましょう。（何が変更されたか後に見返す時に楽になります。）

書き終わったら、保存してエディタを終了させます。
これでひとまず完了です。

次に**git commit -m**コマンドの説明をしていきます。
-mの後に””で括ってメッセージを書く事ができます。

```terminal
git commit -m "git commit -m の説明"
```
といった様に書く事で簡単に変更内容を記述できます。


###git log###
最後に**git log**コマンドを使っていきます。

主な使い方として
・**git log**
・**git log --oneline**
・**git -n<コミット数>**

の三つがあります。
一番上が時間・メールアドレス・ID・メッセージ内容が含まれた履歴が表示されます。
真ん中はID・変更内容が含まれた履歴が一行で表示されます。
一番下は変更履歴を表示する数を制限できます。

一番下とonelineは同時に使うこともできます。


次回はgit hubを使ったgitの操作を紹介します。

第二回はこちら
[git pushまでの流れ]https://qiita.com/juki1007/items/61d5a9eb985be9d75323
アジャイルって何？をはじめから

## アジャイルとは

アジャイルとは「すばやい」「俊敏な」という形容詞です。
アジャイル開発 = すばやい開発。俊敏な開発。 
[対義語] 従来開発<br><br>

---
よく「ウォーターフォール」と「アジャイル」で対比されがちですが、
「従来」と「アジャイル」で対と捉えておくと、後々の理解を得やすくなります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385780/f521cf1d-96f3-d0e5-fa0e-a7ceedc0ac20.png)

---
## アジャイル開発を身につけるために①

* アジャイル開発は経験主義的な方法論となっています
* まだアジャイル開発に取り組んだことの無い方は、「まずはやってみる」ことをお勧めします
    * 経験者に模擬を企画してもらう方法がおススメです
    * [参考：スクラム開発を実践的に学習する企画](https://qiita.com/ketman55/items/6e1674fc3019d5f9f5ca)

---
## アジャイル開発を身につけるために②

* アジャイル開発は「理解は容易」だが「習得は困難」な方法論と言われています
    * 公式文献やワークショップなどを通じて、正しい姿勢を身につけることも重要です
    * 従来開発では触れなかった用語も多く、それらを抑えておくことも重要です

---
### 正しい姿勢を身につける（アジャイル開発）
* [(公式)アジャイルソフトウェア開発宣言](https://agilemanifesto.org/iso/ja/manifesto.html)
* [(公式)アジャイル宣言の背後にある原則](https://agilemanifesto.org/iso/ja/principles.html)

---
### 正しい姿勢を身につける（スクラム開発）
* [スクラムとは](https://www.fujitsu.com/jp/group/fst/about/resources/featurestories/about-agile-02.html)
* [(公式)スクラムガイド](https://www.scrumguides.org/docs/scrumguide/v2017/2017-Scrum-Guide-Japanese.pdf)
* [(公式)スクラムリファレンスカード](http://scrumreferencecard.com/ScrumReferenceCard_v1_3_jp.pdf)

---
### 代表的な組織論（フィーチャーチーム）
* [↓は難しいので、先ずはこれから読む](https://www.kotanin0.work/entry/2019/02/03/195900)
* [(公式)フィーチャーチーム入門](https://featureteamprimer.org/jp/feature_team_primer_ja.pdf)
* [フロー効率性とリソース効率性](https://www.slideshare.net/i2key/xpjug)

---
### その他、よく出て来る用語集
* [ReadyとDone](https://www.ryuzee.com/contents/blog/5024)
* [KPT](https://seleck.cc/kpt)
* [MVP](https://kyogom.com/business/mvp/)
* [バーンダウンチャート](https://support-ja.backlog.com/hc/ja/articles/360035644574-%E3%83%90%E3%83%BC%E3%83%B3%E3%83%80%E3%82%A6%E3%83%B3%E3%83%81%E3%83%A3%E3%83%BC%E3%83%88%E3%81%AE%E6%A6%82%E8%A6%81)
* [不確実性コーン](https://blog.takuros.net/entry/2017/05/18/121145)
* [技術的負債](https://qiita.com/erukiti/items/9cc7850250268582dde7)
引数でのimpl とジェネリクスの違い

# はじめに

Rustを勉強中です。この度クリーンアーキテクチャをRustで書こうとしていて、Rustではどう書くのだろうと悩むことが多いです。
処理をインターフェイスのみに依存する書き方について、` impl trait` と書くやり方をしったのですが、これはジェネリクスとどう違うのかを調べました。

# impl traitを引数や返り値の型指定に使う

まずはimplを引数に使ってある例をあげますね。
今読んでいるコードを少し変えたものです。
メソッドの定義にimplが使われていますね。

```Rust
#[derive(Debug, Clone, Copy)]
pub struct UserId(pub u32);

#[derive(Debug, Clone)]
pub struct User {
    pub id: UserId,
    pub parent_id: UserId,
    pub text: String,
}

impl User {
// textの引数の指定にimpl traitが使われている
    pub fn new(id: UserId, parent_id: UserId, text: impl Into<String>) -> Self {
        User {
            id,
            parent_id,
            text: text.into(),
        }
    }
}
```

# impl traitとジェネリクスの違い

まず以下のコードは同一です。

```Rust 
# ２つの関数は同じ
fn map<U>(self, f: impl FnOnce(T) -> U) -> Option<U>
fn map<U, F>(self, f: F) -> Option<U> where F: FnOnce(T) -> U
```

違いがあるとしたら、型を明確に指定できないことだそうです。

```Rust
fn foo<T: Trait>(t: T)
fn bar(t: impl Trait)

foo::<u32>(0) // OK
bar::<u32>(0) // NG
```

なので、上記のコードのメソッドの部分はこう書けることになります。

```Rust

impl User {
    pub fn new<T: Into<String>>(id: UserId, parent_id: UserId, text: T) -> Self {
        User {
            id,
            parent_id,
            text: text.into(),
        }
    }
}
```

# 最後に

構文上どちらが読みやすいかはよくわからないですが個人的にはジェネリクスのほうが読みやすい気がします。
何かご指摘があればコメントください。

# 参考文献

* https://github.com/rust-lang/rfcs/blob/master/text/1951-expand-impl-trait.md#the-proposal-in-a-nutshell
* https://stackoverflow.com/questions/47514930/what-are-the-differences-between-an-impl-trait-argument-and-generic-function-par
【React/ReactNative】コンポーネントの種類

#コンポーネントの種類
■Class Component
■Functional Component

##①Class Component：クラスによって定義
・React.Componentを継承
・ライフサイクルやstateを持つ
・propsにはthisが必要

##②Functional Component：関数によって定義
・stateless
・アロー関数で記述
・propsを引数に受け取る
・JSXをリターンする
ssh接続

windowsでも使える＋便利なのでメモがてら

## オーソドックス

まずはどこにファイルを作るか
`<my user>/.ssh`に作るとよい。
その下に`config`ファイルを作成して下記な感じで設定

```config:config
Host hoge
  HostName abc #ホスト名とかIPアドレス
  User hoge
  IdentityFile ~/.ssh/hoge/id_rsa
```
みたいな感じ。
`IdentityFile`はもらった鍵を設定フォルダ管理方法は
個人個人に任せる感じで

あとは

```bash
ssh hoge
```
で入れるはず


## 踏み台経由

A「`main`サーバーに入る際は`fuga`サーバーを経由してね」
僕「ssh2回も打つのめんどい」

なので踏み台経由で一発でログインできる方法

```config:config
# 踏み台
Host bastion
  HostName fuga
  User fuga
  IdentityFile ~/.ssh/fuga/id_rsa

Host main
  HostName main
  user main
  IdentityFile ~/.ssh/main/id_rsa
  ProxyCommand ssh bastion -W %h:%p

```

これで

```
ssh main
```
で踏み台経由でログインできます。
簡単


## サーバー間ファイル転送
A「`main`サーバーのファイルを持ってきて。ちゃんと`fuga`サーバー経由してよろしく」
僕「scp２回も打つん？」

めんどいので前ページで使った設定を駆使してやります

```cmd
scp main:<target path> <local path>
```
これでいける

A「君早いねこれからもこの作業よろしくね」
僕「スケジューラで登録して処理させろ」


以上
gitignoreを使わずローカルのみ追跡対象から外したいファイルを設定する

# How to do it


1. .git/info/excludeファイルに以下の１行追加

`root/to/path.ext`

2. インデックスをアップデート

`git update-index --assume-unchanged <file>`

3. 確認
`git ls-files -v`
以下の表示になればOKです

```
h root/to/path.ext
```

## How to undo it

1. .git/info/excludeファイルに以下の１行を削除
`root/to/path.ext`

2. インデックスをアップデート
`git update-index --no-assume-unchanged <file>`

3. 確認
`git ls-files -v`
何も出なければOK

以上
Django FilterSetで文字列結合検索

# やりたいこと
- 苗字と名前のカラムが分かれているが、検索するときは一緒くたに検索したい！

行ってみよう！

```
models.py

class user(TimeStampedModel):
    kanji_family_name = models.CharField(verbose_name='漢字苗字', max_length=64, blank=True, null=True)
    kanji_given_name = models.CharField(verbose_name='漢字名前', max_length=64, blank=True, null=True)
    kana_family_name = models.CharField(verbose_name='カナ苗字', max_length=64, blank=True, null=True)
    kana_given_name = models.CharField(verbose_name='カナ名前', max_length=64, blank=True, null=True)
```
こんな感じで、漢字とカタカナで名前を持っているとする

## この時の検索方法
```
class UserFilter(filters.FilterSet):
    """
    検索Filter
    """

    @staticmethod
    def get_name(queryset, name, value):
        """
        検索
        :param queryset:
        :param name:
        :param value:
        :return:
        """
        return queryset.annotate(
            search=Concat('patient__kana_family_name', 'patient__kana_given_name', 'patient__kanji_family_name',
                          'patient__kanji_given_name')).filter(
            search__icontains=value)

    # 名前検索
    name = filters.CharFilter(method='get_name', )

```
ポイントは、
```
search=Concat('patient__kana_family_name', 'patient__kana_given_name', 'patient__kanji_family_name',
                          'patient__kanji_given_name')).filter(
            search__icontains=value)
```
Concatでカラムを結合してから、icontainsすると出来ます。
Python3で画像から文字列の抽出をしてみる

#最初に。OCRって何？

OCRとは、画像から文字列を抽出するための技術です。
Google翻訳でスマホで読み取った画面を翻訳してくれる技術ありますね。あれがOCRです。あれは、読み取った画像に対してテキストを抽出して、自然言語処理を行っています。

#で、OCR使って何できんの？それって日常に便利？

画像から文字を抜くのはわかったけど、他に何に使えるの？って話になります。例えばもらったチラシや会社、学校でのプリント、これらを読み取ってWordファイルなどにすることができます。また、黒板、ホワイトボードでの内容をわざわざメモすることなくテキストに変換できます。

#事前準備

・Python3のインストール
・pyocrのインストール
・Pillowのインストール
・tesseractOCRのインストール


Python3のインストールは長いので割愛
Macユーザなので、そっち側の説明のみ行います。

Windowsユーザの方は下記リンクの執筆者様から参照ください。

https://qiita.com/henjiganai/items/7a5e871f652b32b41a18

では、Macの方.

____________

pip install Pillow

または

pip3 install pillow

___________

pip install pyocr

または

pip3 install pyocr

__________________


brew install tesseract


___________________

以上. sudoを前につけないと実行できない事もあるかもしれないので注意.

#実践

png画像のみをターゲットとしています。他の形式のサポートは知りません。

```python3

import glob
import pyocr.builders
from PIL import Image

# 画像のファイル名を受け取ったら,txtを返す

class OCRs:

    def __init__(self):

        self.tools = pyocr.get_available_tools()
        self.tool = self.tools[0]
        self.langs = self.tool.get_available_languages()
        self.lang = self.langs[0]
        self.res = False
        print(self.tools)

        if len(self.tools) != 0:

            self.res = True

    def read(self, file_name):

        if not self.res:

            return 'error'

        else:


            txt = self.tool.image_to_string(

                Image.open(file_name),
                lang=self.lang,
                builder=pyocr.builders.TextBuilder()
            )

            return txt

```

OCRsとかいうチンケな名前はおいといて、内容へ。
まず先に使うモジュールの宣言。

globはファイル(ディレクトリ)内のパスを取得するためのモジュールです。
pyocrはPythonでOCRを行うためのtesseractくんっていうエンジンとPythonとの架け橋のモジュールです。
PILは画像の読み込みに必要なモジュールです。

そして、initではtool,langなど一度しか使わない(呼び出す必要がない)もののセットをしています。
もしresにはOCRエンジンが無ければFalse,あればTrueという値を持たせておきます。

はい、メインのread関数ですね。やっていることは、引数にファイル名を受け取り、OCR(文字列抽出したもの)してテキストにて返却するということです。

まず、最初にOCRエンジンがあるかないかを判定します。無ければerrorという文字列を返すようにしています。
そして、後は画像と言語などをセットしてtxtにテキストを受け取ってから返します。

はい、メイン関数へいきましょう。

```Python3

if __name__ == '__main__':

    cl = OCRs()
    cl.__init__()

    file_names = glob.glob('/Users/sa/Desktop/プログラミング/target_folder/*')

    for file_name in file_names:
        
        if cl.read(file_name) == 'error':
            
            print('OCRソフトが見つかりませんでした。')
            break
        
        else:
        
            print(cl.read(file_name))    

```

では見ていきましょう。まず、先ほどのクラスをclに代入してからinitを呼び出します。初期設定完了です。
それで、設定したい(OCRしたい)画像フォルダをglobを使って指定してあげます。
ディレクトリ操作がまだ難しいよって人のために僕の構成をちょっと改変して置いておきます。アホそうとか言わないで？？

```python
# 指定してあげたいディレクトリ(フォルダ)を入れる。
filenames = glob.glob('hogehoge/*')

# これでhogehoge内のファイル名全てを取得できる.
```

そして、繰り返しのfor文を使って全ての要素をさっきの関数にぶん投げる。
errorが返ってきたらOCRソフト入ってないよ。

以上。
もしこの画像1つだけ指定したいよ！！とかいう場合には、下記みたいに呼んであげればおk.

```python
cl.read(filename)
```
Vue.js (vue-cli) 命名規則のチートシート

Vue.js(vue-cli)の学習において、命名規則を習慣化するのに少し時間がかかったため、ギュッと凝縮したチートシートを作成してみました。

# Vue.jsの命名規則チートシート
<img width="858" alt="vue.js命名規則チートシート.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536363/6cc3f1a0-a401-6d3e-5e5f-09888fcca08b.png">

# 参考

公式 → [Vue.jsコンポーネントスタイルガイド](https://jp.vuejs.org/v2/style-guide/index.html)
分かりやすくてもっと詳しいです → [qiita/単一ファイルコンポーネントの命名規則まとめ](https://qiita.com/ngron/items/ab2a17ae483c95a2f15e)
aliasを設定してサクッとディレクトリを移動しよう！！

開発規模が大きくなる
行きたいディレクトリまで時間がかかる
そんな時サクッと移動できる方法は無いかと探していたら、
下記の手法がありました。


ホームディレクトリで下記コマンドを実行

```
vim .bash_profile
```

追加する
raku : 好きな名前をつける
cd /var/www/html/　: 移動したいディレクトリのルートを設定

```
alias raku="cd /var/www/html/"
```

下記コマンドを実行 
このコマンドで記憶させる。

```
source .bash_profile
```

これでホームディレクトリで　
raku
と入力すると
/var/www/html/
に移動できます。
GitHubのReleaseを起点にしてCodePipelineを走らせる方法

# GitHubのReleaseを起点にしてCodePipelineを走らせる方法
**[参考](https://docs.aws.amazon.com/codepipeline/latest/userguide/pipelines-webhooks-update.title.html)（AWS）**
## **手順**

- 前提として、Pipelineのソースに現状でGitHub(webhook)が設定されていること
- AWSのCLIが利用可能であるEC2の踏み台などが用意されている（ログイン済みCLIがあればローカルでも良い）
- リージョンは適宜書き換えてください

#### 1. AWS用の踏み台EC2サーバーにログインする
`ssh fumidai.com`

#### 2. 現在AWS CodePipelineに設定されてる**すべてのWebhook**を取得する
以下のコマンドを実行しする
`aws codepipeline list-webhooks --region "ap-northeast-1"`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253700/66b9c397-97c3-3f2c-b00d-cb3883c99291.png)

#### 3. 対象のWebhookの選択
表示されたJSONのwebhooks配列の中から今回変更したいWebhookを選んでurlを含みそのWebhook全体を控える（後で使う）（targetPipelineの値などでどれが対象か判別する）控えたurlの例　⇢　https://ap-northeaset-1.webhooks.aws/trigger?t=testurl
画像

#### 4. GitHubの設定を開く
GitHubのWebhookを設定しているリポジトリに移動し、リポジトリの Settings > Webhooksを開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253700/8443eb5e-64ff-bf6b-d47b-5d42626d9dd6.png)

#### 5. 対象のWebhookの選択
設定されているWebhookの一覧が表示されているので、その中から目的のWebhookを選んで開く
（開いてPayloadURLを上記で控えたURLと比較する）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253700/627ac2e6-e568-3f12-901f-97a58394d18a.png)

#### 6. Webhookの設定を更新する
- 目的のWebhookの設定（Webhooks/Manage Webhook）を開き、設定項目Which events would you like to trigger this webhook?の値を、Let me select individual eventsに変更する（現状はJust a push eventのはず）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253700/4cae5b09-6a70-d805-c0d0-be918cc82ac8.png)

- 下に大量の選択肢が表示されるので、Pushesのチェックを外し、Releasesのチェックを入れる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253700/cdbc43ba-1841-3783-9ee3-924febbfc340.png)

#### 7. 保存
- 下の方にUpdate webhookボタンがあるのでセーブする

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253700/2daccdd4-1626-0d0c-da5b-9089688dbc14.png)

 **このままだとWebhookは発行されても、AWS側でプッシュイベント以外がフィルタリングされているのでその設定を変更する**

#### 8. AWS側の設定用ファイルを用意する
- AWS CLIに戻り、設定アップデート用の適当なファイルを用意する
`nano webhook_updater.json`

(別にvimでも何でもいいです)

- 上記のファイルの中身に、アップデート用のJSONを記述する（取得した際のオブジェクトとは形式が違うので注意）

```
{
  "webhook":{
    "authenticationConfiguration": {
      "SecretToken": "さっき取得したWebhookのSecretToken"
    },
    "name": "さっき取得したWebhookの名前　⇢　例pipeline--Source--unotovivepipeline--1234567890",
    "authentication": "GITHUB_HMAC",
    "targetPipeline": "さっき取得した（略",
    "targetAction": "Source",
    "filters": [
      {
        "jsonPath": "$.action",      // ここが変更になった箇所、Webhookのフィルターを変えている
        "matchEquals": "published"　　// ここが変更になった箇所、Webhookのフィルターを変えている
      }
    ]
  }
}
```
- 保存する。

#### 9. AWSCLIで設定を書き換える
`aws codepipeline put-webhook --cli-input-json file://webhook_updater.json --region "ap-northeast-1"`

#### 10. 終わり
リリースを発行してパイプラインが走れば成功！！！
Zabbixエージェントのインストール、初期設定手順（CentOS７）

CentOSにZabbixエージェント入れて監視するまでの設定方法です。Zabbixサーバは4.0です。

#Zabbixリポジトリの追加

[Zabbixオフィシャル日本語サイト](https://www.zabbix.com/jp/download?zabbix=4.0&os_distribution=centos&os_version=7&db=mysql&ws=apache)より。

```
# rpm -Uvh https://repo.zabbix.com/zabbix/4.0/rhel/7/x86_64/zabbix-release-4.0-2.el7.noarch.rpm
# yum clean all
```
## Zabbixエージェントのみインストール

```
# yum install zabbix-agent
```
/etc/zabbix/zabbix_agentd.confを設定します

```
# vi /etc/zabbix/zabbix_agentd.conf
```
以下の項目は初期設定必須

```
Server=(Zabbix server IP)
ServerActive=(Zabbix server IP)
#Hostname=[Hostname] (コメントアウトもしくはZabbixで表示するホスト名を設定)
HostnameItem=system.hostname (Hostnameをコメントアウトする場合はコメントアウト外す)
```
ZabbixサーバのIP及びホスト名が一致しないとZabbixエージェントは有効化しません。

必要があれば以下も設定
ListenPort（コメントアウトを明示的に外しておく。デフォルト10050を利用。）
ListenIP（Zabbixエージェントが使うIPアドレスを設定）


#ファイアウォール
[CentOS ファイアウォール停止方法](https://qiita.com/higakikeita/items/af0f999f8c7221531e35)

###firewalld自動起動設定確認

```
#systemctl is-enabled firewalld
enabled
```
### CentOSでのファイアーウォール停止方法
ファイアウォールの停止方法ですが、CentOS7から一部のサービスを除いて「systemd」管理されているので、「systemctl stop firewalld」コマンドを使用して「firewalld」を停止させます。

### firewalld停止

```
#systemctl stop firewalld
```

### firewalld停止確認
「systemctl status firewall」コマンドを使用することで、「firewalld」のステータスを確認することができます。
Active欄が「Active: inactive(dead)」と表示され、サービスが停止されていることが確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635477/6a5a5e01-c44b-f8fb-af29-25ec8c00f94a.png)

### firewalld自動起動停止
サーバの再起動後も「firewalld」を自動起動させないようにするには、「systemctl disable firewalld」コマンドを使用します。

```
#systemctl disable firewalld
rm '/etc/systemd/system/dbus-org.fedoraproject.FirewallD1.service'
rm '/etc/systemd/system/basic.target.wants/firewalld.service'
```
###設定確認


自動起動が停止されていることを「systemctl is-enabled firewall」コマンドを実行して確認します。
コマンド実行結果が「disabled」と表示されれば自動起動が停止されています。

```
#systemctl is-enabled firewalld 
disabled
```

##監視設定
Zabbixの「設定」->「ホスト」からホストの作成でホストを追加できます。

上記の`/etc/zabbix/zabbix_agentd.conf`のホスト名と作成ホスト名が一致しないと有効化しませんので注意です。

以上　初期設定編でした。
OpenCV Plus UnityおよびUnityプラグイン

# 参考
[OpenCV Plus Unity](https://qiita.com/tangotarou2/items/60fc99af6cb87a7204a1)

# OpenCV Plus UnityでWEBカメラのテスト

DEMOの「LiveSketch_WebCam」を改造する。

ノートPCにWEBカメラ接続する。
2個あるカメラの指定方法は、親のWebCameraクラスのプロパティpublic string DeviceNameで選択している。ifをコメントアウトしてWEBカメラを有効にする。
```
int cameraIndex = -1;
for (int i = 0; i < WebCamTexture.devices.Length && -1 == cameraIndex; i++)
{
// コメントアウトすると末尾要素が選択される
//	if (WebCamTexture.devices[i].name == value) 
		cameraIndex = i;
}
```

# Unity/OpenCVでarucoを使う。
ネイティブプラグインを利用する方法。
参考になるかも。
http://tips.hecomi.com/entry/2015/09/16/014119
[Unityプラグイン開発はこちら](https://qiita.com/tangotarou2/items/5143867c6650a8314a29)

# TODO 
[*]DEMOのLiveSketchSceneにプラグインを組み込む。
[*]Unity->Plugin : texture情報を渡す
[]Unity : プラグイン側でOpenCVのテスクチャ作成する。aruco処理をして結果をUnityへ帰す。
Unity : ネットワーク処理の確認
Unity : TOIO位置を受信する。
CentOS7: Docker-CE & Docker Compose

###Docker-CE
Community Edition -> 無償版

###Docker公式サイト
[Install Docker Engine on CentOS](https://docs.docker.com/engine/install/centos/)

###古いバージョンがある場合はアンインストール
```shell
#公式より
$ sudo yum remove docker \
                  docker-client \
                  docker-client-latest \
                  docker-common \
                  docker-latest \
                  docker-latest-logrotate \
                  docker-logrotate \
                  docker-engine
#これでOK
$ sudo yum remove docker docker-client docker-client-latest docker-common docker-latest docker-latest-logrotate docker-logrotate docker-engin
```

###インストール
```shell
#リポジトリの設定
$ sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo
#インストール
$ sudo yum install -y docker-ce docker-ce-cli containerd.io
#自動起動設定
$ sudo systemctl enable docker
#Docker起動
$ sudo systemctl start docker
#バージョン確認
$ docker --version
#動作中か確認
$ sudo systemctl status docker #-> running表示
```
----
###Docker Compose: 
WebサーバやDBサーバ等の関連する複数のコンテナを管理するツール

[Git](https://github.com/docker/compose/releases)で最新バージョン確認

```shell
#ダウンロード -> インストール -> /usr/local/bin/docker-compose
$ sudo curl -L https://github.com/docker/compose/releases/download/{x.xx.x}/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose
$ sudo chmod +x /usr/local/bin/docker-compose #-> 実行可能な属性を追加
$ docker-compose --version #-> バージョン確認
```
【Google Cloud Day 2020】Digital 基調講演を聞いて

#BeyondCorpについて

#サーバレスコンピューティング
インフラを気にしなくていい。開発に集中できる
　オンプレ、マルチクラウドを前提として設計されている
　End to Endを最適化するために構築
 cloud runやfirebaseを利用

#AI画伯の紹介
0から100万ユーザの増加があった
コンテナインスタンスが瞬時にたちあがった

#Anthos
　セキュリティとサービスを一元的に管理
　株式会社プレイドにて使用
　オンライン上のカルテを運用

#Google cloud VMware Engine
　リフトするときに便利
　AIなどとも緊密な連携ができる

# VMwareからの話
　Google cloud VMware Engine　アプリケーションをリアーキテクトせずに使える
　↓
　VMwareの機能をGCP内に構築し、GCPで管理する
　vmwarecloud verifiedと連携

####なぜ連携したか？
GCPの強固なプラットフォーム　高可用性は魅力的だった
Googleは様々なパートナをもつ、エコシステムが実現されている点も魅力

#AIの今後
plaidのkarte
AIによるリアルタイム分析を実施する
ML Opsを実現している
電子問診票も取り扱っている。

#コンタクトセンターAI

#recommendations AI
 Zozoの事例
　サービス改善に役立てている
　見た目がにているものを検索する
　画像をキャッシュして、検索している
　データを分析して会社を成長させる

#DB　分析の実例
　oracle on baremertal solution
　オラクルからの移行をシンプルにできる
　既存のDBの移行
　cloud spannerを使うことでコストを削減できる
 bigqueryを使うことでdata ware hauseのコストを落としながらdxを推進できる

# スマートアナリスティクソリューション
 connected sheet :スプレッドシートを連携できる　SQLになじみがなくても分析できる
 Locker:社内のデータの整合性を保ちながら活用できる
 商品開発、サプライヤーが使えるようにならないといけない

# Gix
　10年分のデータ分析するにはbig queryが必要不可欠

#使えそうなユースケース
・コンタクトセンターAI
・サーバレスコンピューティング（開発向けなのであまりよくなかも）
・Zozoの件　
・DXを推進している
・こんなサービスを作るということは普通にできる、データ分析をして次世代のサービスができる（フリマアプリなど）
・商品開発、サプライヤーが使えるようにならないといけない
・bigqueryを使うことでdata ware hauseのコストを落としながらdxを推進できる

#キャプチャ
【個人用】

随時更新
#ローカルリポジトリとリモートリポジトリを紐付ける
1.gitHubでリポジトリ作成
→作成するとURLが発行される。
2.ターミナルで以下のコマンドを実行

```
$ git remote add origin 先程コピーしたURL
$ git remote
>> origin
```
originと出力されれば完了。
プログラミングの基礎 /浅井健一　おまけ　メモ

# プログラミングの基礎 / 浅井健一

Ocamlで遊ぶ

#### fizzbuzz

```ocaml
(* int list -> string list *)
(* fizzbuzz:  *)
(* 3n:fizz, 5n:buzz, 3n && 5n:fizzbuzz; else n;*)
let fizzbuzz lst = 
  let mod3 x = x mod 3 = 0 in
  let mod5 x = x mod 5 = 0 in
  let mod15 x = mod3 && mod5 in
  List.fold_right (fun x y -> 
  if mod15 x then "fb" :: y
  else if mod3 x then "f" :: y
  else if mod5 x then "b" :: y
  else "etc" :: y
  ) lst []
  
  let lst1 = ["1"; "2"; "f"; "4"; "b"; "f"; "7"; "8"; "f"; "b"; "11"; "f"; "13"; "14"; "fb"]
  let test1 = fizzbuzz [] = []
  let test2 = fizzbuzz lst1 = ["etc"; "etc"; "f"; "etc"; "b"; "f"; "etc"; "etc"; "f"; "b"; "etc"; "f"; "etc"; "etc"; "fb"]
```

#### 平方和 sum_of_squares

```ocaml
(* squared: 整数 m を与えられたら m を二乗して返す *)
(* int -> int *)
let squared m = m * m

(* squared_list: 整数の入ったリストを与えられたら、全要素を二乗して返す *)
(* int list -> int list *)
let squared_list lst = List.fold_right (fun x y -> squared x :: y) lst []
let test1 = squared_list [1; 2; 3; 4; 5] = [1; 4; 9; 16; 25]

(* average: 整数の入ったリストを与えられたら、その平均を返す *)
(* int list -> int *)
let average lst = (List.fold_right (+) lst 0) /List.length lst
let test1 = average [1; 2; 3; 4; 5] = 3
let test2 = average [55; 68; 41; 34; 23] = 44

(* sum: 整数の入ったリストを与えられたら、その合計を返す *)
(* int list -> int *)
let sum lst = List.fold_right (+) lst 0
let test1 = sum [1; 2; 3; 4; 5] = 55

(* sum_of_squares: 整数の入ったリストを与えられたら、その平方和を返す *)
(* int list -> int *)

(* 1: xiと平均の差の二乗の合計 *)
let sum_of_squares lst = 
  let avg = average lst in
  sum (List.fold_right (fun x y -> squared (x - avg) :: y) lst [])

let test1 = sum_of_squares [55; 68; 41; 34; 23] = 1247
let test2 = sum_of_squares [1; 2; 3; 4; 5] = 10

(* 2: 二乗の合計値 - 合計値の二乗 / n *)
(* ΣXi^2 - （ΣXi)^2/n  *)
let sum_of_squares2 lst = 
  sum (squared_list lst) - squared (sum lst) / List.length lst

let test1 = sum_of_squares [55; 68; 41; 34; 23] = sum_of_squares2 [55; 68; 41; 34; 23]
let test2 = sum_of_squares [1; 2; 3; 4; 5] = sum_of_squares2 [1; 2; 3; 4; 5]
```