OmniAICreator/Qiita-1.07M huggingface dataset:
Nuxt+fabric.jsで画像同士を重ね合わせるcanvasを作成

pngなどの透過画像をcanvasで重ねたかったのですが、いい感じのまとまった記事がなかったのでこちらでまとめています。

しかも自分の重ねたい方法は、**操作している画像が固定されている画像の下に常に存在するようにする**、というもので見つけるのが大変でした。フレーム画像の下で画像編集をしたいときなどに使えると思います。

## 前提

- nuxt-composition-apiをインストールして準備していること
- fabric.jsをインストールして準備していること

## 使った画像

透過画像はこちらで手に入れました。

https://zukan.pokemon.co.jp/detail/327

## コード

鍵となるのは `globalCompositeOperation` です。これを見つけるのにすごく時間がかかりました、、、
`destination-over`をつかうことによって、元からある図形の下に描画ができるようになります。また、一番上の画像は今回selectableを解除しています。

```index.vue
<template>
  <div>
    <h1>画像編集ページ</h1>
    <div class="wrapper">
      <canvas id="canvas" width="300" height="300" />
    </div>
  </div>
</template>

<script lang="js">
import { onMounted, computed, defineComponent } from '@nuxtjs/composition-api'
import { fabric } from 'fabric'

export default defineComponent({
  setup() {
    const canvas = computed(() => new fabric.Canvas('canvas'))
    
    onMounted(() => {
      // globalCompositeOperation: https://stackoverflow.com/questions/43455582/how-correctly-apply-globalcompositeoperation-on-canvass-elements
      fabric.Image.fromURL(
        require('~/assets/images/sample/ocean.png'),
        myImg => {
          // i create an extra var for to change some image properties
          myImg.scaleToWidth(canvas.value.getWidth())
          myImg.set(
            {
              left: 0,
              top: 0,
              width: 2000,
              height: 2000,
              selectable: false,
            }
          )
          canvas.value.add(myImg)
        }
      )
      fabric.Image.fromURL(
        require('~/assets/images/sample/seagull.png'),
        myImg => {
          // i create an extra var for to change some image properties
          myImg.scaleToWidth(canvas.value.getWidth())
          myImg.set(
            {
              left: 100,
              top: 100,
              width: 1000,
              height: 1000,
              globalCompositeOperation: 'destination-over',
            }
          )
          canvas.value.add(myImg)
        }
      )
    })

    return { }
  },
})
</script>

<style scoped>
.wrapper {
  width: 100%;
  height: 100%;
  border: 1px solid;
}
</style>
```

## 結果

![Image from iOS (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396623/9d099486-74d0-9a5a-2d69-859bfaf50d07.jpeg)


## 参考

https://stackoverflow.com/questions/43455582/how-correctly-apply-globalcompositeoperation-on-canvass-elements

http://fabricjs.com/docs/fabric.Image.html

https://note.affi-sapo-sv.com/js-globalcompositeoperation.php
[ネタ] PowerShellでもRPAできるのでは？と思いたいリンクとメモ(書きかけ)

# 何がいいの？

PowerShellでRPAできるということは、つまり特別に何かをインストールしていない素のWindowsでもRPAできるってことになる。

RPA(Robotic Process Automation)ってなんぞや？という人は下を参照するなりググるなりしよう。

https://qiita.com/savaniased/items/5105bbc8c9914e096908

# 可能なのか？

### いきなり結論

RPAの定義というか求める機能にもよるがおそらく可能そう。
さすがにRPAツールから操作を記録して…やGUIでシナリオ書いて…というのは困難ですが、
Pythonでpywinautoといったライブラリを使ってスクリプトを書くようなRPAなら出来そう。

https://qiita.com/t-izaki/items/f3f2a99ede24be1f0373


### なぜ可能といえるのか？

PowerShellではC#のコードを実行する機能があります。


https://qiita.com/Kosen-amai/items/d68b9590c9e8e8b06377

https://flamework.net/powershell-%E3%81%A7-c-%E3%81%AE%E5%AE%9F%E8%A1%8C/

これによって.NET Frameworkのクラスは使い放題、なんならC#のdllimport/externを使えばWin32 APIも使い放題なので、PowerShellでもこれらで出来ることはなんだってできるということです。

というか.NETにはUI Automationというそのものズバリのクラス郡が標準で備わっている模様。

https://docs.microsoft.com/ja-jp/dotnet/framework/ui-automation/ui-automation-overview

https://qiita.com/ken_hamada/items/501b164374667319d270

.NETやWin32 APIのドキュメントを眺めたり、ググったりしながらスクリプトを書いていく感じになりそう。


# PowerShell(言語)は使いたくない

C#でもいいならPowerShell部分を最低限にして主な処理を全部C#で記述すればいいでしょう、試してないですが新しいVisual Basicというか旧VB.NETでも同様なんじゃないかと。

JavaScriptやVBSで書きたい場合はWSHを使う手があります。WSHでは.NET FrameworkやWin32 APIは基本的に使えませんが、その部分だけPowerShell(C#/VB)でラッパーを作っておき、必要に応じてWScript.ShellのrunメソッドでPowershellを実行して呼び出す形になるのでは。

ちなみに、WSHのJScriptは大変古い仕様のJavaScriptですが、コマンドラインオプションでChakraエンジンを指定すれば新しい仕様のJavaScriptを使うことができます。

https://qiita.com/riafeed/items/fcedc5943e6a041c90d7

# 実際にやってみた

とりあえず、実行すると(100,100)の位置にマウスカーソルを持っていくPowerShellスクリプトを実行するバッチファイル(?)を作ってみた

```rpa.bat
@if not "%~0"=="%~dp0.\%~nx0" (start /min cmd /c,"%~dp0.\%~nx0" %* & goto :eof)  else  (setlocal enableextensions enabledelayedexpansion & set "SELFPATH=%~dp0" & set "SELF=%~f0" & PowerShell.exe -ExecutionPolicy Bypass -Command "& (Invoke-Expression -Command ('{#' + ((Get-Content '!SELF:'=''!') -join \"`n\") + '}'))" %* & exit /b !errorlevel!)

$asm = ("System.Drawing", "System.Windows.Forms")

$src = @'

public static class MouseTest
{
    public static void MouseMove()
    {
        System.Windows.Forms.Cursor.Position = new System.Drawing.Point(100, 100);
    }
}

'@

Add-Type -TypeDefinition $src -Language CSharp -ReferencedAssemblies $asm
[MouseTest]::MouseMove()
```
Linuxの特徴


# 問題間違えちゃったので解説して覚えるぞい
ぞい
### ① 無料で多くの関連ソフトウェアが利用できる
できちゃうんです。
### ② OSというシステム全体を管理するソフトウェアである
WindowsやMacなどと同じOSの一つです。
### ③ Webプログラミングでよく利用される
無料ということもあり、Webプログラミングの様々なところで利用されています。
### ④WindowsやmacOSと同じような操作ができるLinuxが存在する。
CLIだけでなくWindowsやmacOSと同じような操作が出来るんです
### ⑤ 仮想化ソフトウェア上で無料で動かすことができる
無料で動かすことができます。

【ここに注意】
LinuxはGPLというライセンス上、無料で用いることができるため、 仮想化環境上へのインストールをする際にもその費用を気にする必要がありません。
VPSって別にAWSじゃなくてもよくない？②

# VPSって別にAWSじゃなくてもよくない？②：お金の話

[前回](https://qiita.com/syakesaba/items/cc6c223fb93954f9ad3b)の記事では

- __お金の話__
- スケーリングの話
- サポートの話
- リージョンの話

とカテゴリ分けした。本記事では__お金の話__💰についてピックアップする。
基本的に貧乏人の思考を並べているので、石油王は見るな。
  
> ぼく「お金無い。最安のものを使いたい」
> ぼく「収支ブレは嫌。為替リスクを考えたくない」
> ぼく「金銭面厳しかったら他へ逃げたい。乗り換えが出来るものを使いたい」
> ぼく「収支ブレは嫌。永年定額のものを使いたい」
> ぼく「決済日、日割り、銀行振込orクレカorBTC？。決済方法は事由に選びたい」

# 目次

1. [最安のものを使いたい](#最安のものを使いたい)
1. [為替リスクを考えたくない](#為替リスクを考えたくない)
1. [乗り換えが出来るものを使いたい](#乗り換えが出来るものを使いたい)
1. [永年定額のものを使いたい](#永年定額のものを使いたい)
1. [決済方法を選びたい](#決済方法を選びたい)
1. [所見](#所見)

# 最安のものを使いたい

- 初期費用

VPSはそもそも筐体を買う必要が無いというサービスであり
初期費用が無いサブスクリプションサービスであるべきである。
また、初期費用の有無によって拘束期間の有無が変わるサービスは
利用者に投資リスクを転嫁しているだけなので使わない方が良い。

- 経常費用
    * VPSプロバイダの提示する経常費用の内、純粋な筐体スペックに関わる項目はかなり少ないので費用比較は難しくない。
        + リージョン
            - Vアメリカ合衆国の場合は州まで、日本国の場合は都道府県まで公開しているケースが多い。
            - 5 Eyes, 9 Eyes, 14 Eyes等、現地の法律に呼応する形で配置されるケースが多い。
            - IXとの地理的な距離によって配置されるケースが多い。
            - いわゆる災害や電力的な安定性をDCの可用性としてアピールするケースが多い。
            - GDPR
            - 中国サイバーセキュリティ法
        + CPUの数
        + GPUの数
        + メモリの容量
        + ディスクの種類
        + ディスクの容量
        + ネットワークIOの帯域幅
        + ネットワークIOの容量
        + 拘束期間
    * 純粋な筐体スペックではない項目（OS、LB、CDN、DNS、GIP）はVPSプロバイダの比較項目とすべきではない。

# 為替リスクを考えたくない

- 為替リスクとは各国の中央銀行の発行する銀行券の信用力の差の事。
- リスク回避するには自国通貨で自国サービスの決済をする。できれば自国にDCと法人を構える会社と契約する。
- リスク低減するにはAWS等で可能な[円建て決済](https://aws.amazon.com/jp/blogs/news/how-to-pay-aws-by-yen/)を使うなど、為替レートが公開されている決済方法を持つ会社を選ぶ。無論、自国通貨に有利な方を選択する。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123740/ef54e617-a748-d2eb-b5b3-1d78a7e13588.png" width=50%>
  
例：AWS為替レートは115.427円。この日のドル円のインターバンクレートは114.251～114.255であった。使用しているクレジットカードが銀行為替手数料として+1%となっている場合、[115.6347円](https://usa.visa.com/support/consumer/travel-support/exchange-rate-calculator.html?amount=22&fee=1&utcConvertedDate=&exchangedate=10%2F17%2F2021&fromCurr=JPY&toCurr=USD&submitButton=)となる。この場合、AWSの為替の方が安いということになる。しかし、この日は若干円安なので海外サービスの利用は全体的に割高になってしまう。国内サービスの場合はこの為替リスクに関して考える必要はない。

- 為替手数料はインターバンクレート+1~2%が相場だがインターバンクレートは恐らく世界一不確実な指標の為、VPSプロバイダもクレジットカード会社もリアルタイムな為替手数料勝負をしている。さらにクレジットカードは基本的に後払いの借金システムなので、為替レートの確定時期と請求発生時期が異なっている点に注目する。[割引現在価値](https://project.nikkeibp.co.jp/atclppp/15/433786/101800008/?ST=ppp-print)  

# 乗り換えが出来るものを使いたい

- 拘束期間は無いものが良い。月払い、日払い、時間払、実行時間払など細かく区切れるほど良い。
- OVFテンプレートなど、インポート・エクスポートが出来るものが良い。
- 同じサービス内での利用制限であってもスナップショット機能が付いているものが良い。

# 永年定額のものを使いたい

- サービスの契約書の免責事項を読む。
- 為替リスクは低減または回避する。
- 完全永年定額のサービスは資本主義経済において存在出来ないので、完璧は目指さない。

# 決済方法を選びたい

- 決済したい時にすぐに決済できる事が重要。
- いわゆる安全通貨建てで請求されるサービスを選択する事。（USD, JPY等）
- メジャーなブランドのクレジットカードによる決済が出来るようになっている事。
- BitCoinによる支払いに対応している事。

# 所見

- お金に関しては一個人ではどうにもならない部分が必ず発生するのでリスクを回避する動きを取る。
    * 海外サービスは為替リスクがつきまとう→国内サービスを使う。
    * DCのある地域では法的なリスク・災害戦争リスク・電力障害リスクがつきまとう→リージョン分散するか、ユーザと同じ地域でVPSを契約する（死なば諸共）。
    * VPSプロバイダ間の連携や同期が取れる構成を組む事が理想→VPSをなるべくテンプレート化する。
    * 決済リスク→決済方法を増やす、もしくは間に決済仲介業者をかます。
各言語の便利な機能のメモ

複数のプログラミング言語でコードを書いていると、忘れてしまうので備忘録
※文法エラーはご容赦ねがいます。

### スプレッド演算子

複数の引数を取る関数に配列の内容を渡したいときに利用する。
工夫次第でコードを短くできるのが嬉しい機能。

#### C言語の場合

そんな機能はないのでゴリゴリ書く。

```C
void handler(int p1, const char* p2) {
    printf("%d, %s", p1,p2);
}
	
handler(list[0], list[1]);
```

#### TypeScriptの場合

```Typescript
function handler(p1 :number, p2:string) {
    console.log("test", p1, p2)
}
const list= [ 1000, "12345" ] as const
handler(...list)
```

#### Pythonの場合

```python
def handler(p1, p2):
    print(p1,p2)
	
list = [1000,"1234"]
handler(*list)
```
railsのstringとtextの違い

データベース設計に関してStringとtextの違い

 

string
入力できる文字が２５５字以内。
主な用途は、一言情報を入力したいとき使う。(名前、電話番号、住所など）
Twitterなどの文字数制限があるのは多分これ？

text
入力できる文字は無制限。
長文投稿したいときなどに使う。(ブログ本文、コメント入力フォームなどに）
railsチュートリアル第八章

###ユーザーの検索と認証
####Sessionsコントローラのcreateアクション
app/controllers/sessions_controller.rb

```rb
class SessionsController < ApplicationController

  def new
  end
  
  def create
  # 新規ユーザー作成
    render 'new'
    # newアクションのビューを表示させる
  end

  def destroy
  # ユーザー削除
  end
end
```
デバッグ情報
paramsハッシュでは、次のようにsessionキーの下にメールアドレスとパスワード

```
--- !ruby/object:ActionController::Parameters
parameters: !ruby/hash:ActiveSupport::HashWithIndifferentAccess
  authenticity_token: s9oeKxILHYOKGNouY+o5HHYogso0J+Rba3NussPUvpHgdD3Q3SaRrwdoDXu2XRt/c+ykDJX9uFM+UMMlBGjh0g==
  session: !ruby/hash:ActiveSupport::HashWithIndifferentAccess
    email: ''
    password: ''
  commit: Log in
  controller: sessions
  action: create
permitted: false
```
ハッシュのハッシュ
```
{ session: { password: "foobar", email: "user@example.com" } }
```
上を略すことができる

```
params[:session]
```
ハッシュのハッシュ

```
{ password: "foobar", email: "user@example.com" }
```
細かくハッシュの検索

```
params[:session][:email]
```

```
params[:session][:password]
```

####ユーザーをデータベースから見つけて検証する
app/controllers/sessions_controller.rb

```rb
class SessionsController < ApplicationController

  def new
  end
  
  def create
    user = User.find_by(email: params[:session][:email].downcase)
    # 送信されたメアドを使ってデータベースから取り出す。
    #emailを小文字にする
    if user && user.authenticate(params[:session][:password])
    # user  取得したユーザーが有効かどうか？
    # その後にデータベース上にパスワードがあるか？
      # ユーザーログイン後にユーザー情報のページにリダイレクトする
    else
      # エラーメッセージを作成する
        render 'new'
        # newアクションのビューを表示
    end
  end

  def destroy
  # ユーザー削除
  end
end
```

###演習
1.Railsコンソールを使って、表 8.2のそれぞれの式が合っているか確かめてみましょう. まずはuser = nilの場合を、次にuser = User.firstとした場合を確かめてみてください。ヒント: 必ず論理値オブジェクトとなるように、4.2.2で紹介した!!のテクニックを使ってみましょう。例: !!(user && user.authenticate('foobar'))

```rb
>> user = nil
=> nil
>> user.class
=> NilClass
>> user = User.first
   (1.8ms)  SELECT sqlite_version(*)
  User Load (0.7ms)  SELECT "users".* FROM "users" ORDER BY "users"."id" ASC LIMIT ?  [["LIMIT", 1]]
=> #<User id: 1, name: "a", email: "abc@def.com", created_at: "2021-10-0

>> !!(user && user.authenticate('foobar'))
=> false
```
作ったuserとデータベース上にあるuserを比べているらしい。
railsチュートリアル第八章 ログインフォーム

###ログインフォーム
ログインフォームのビューを整える。

```html
<% provide(:title, "Log in") %>
<h1>Log in</h1>

<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <%= form_with(url: login_path, scope: :session, local: true) do |f| %>
    <!--セッションの場合はリソースのスコープとそれに対応するURLを具体的に指定する必要-->
      <%= f.label :email %>
      <%= f.email_field :email, class: 'form-control' %>

      <%= f.label :password %>
      <%= f.password_field :password, class: 'form-control' %>

      <%= f.submit "Log in", class: "btn btn-primary" %>
    <% end %>

    <p>New user? <%= link_to "Sign up now!", signup_path %></p>
  </div>
</div>
```

```html
 <form action="/login" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="9t+########==" />
    <!--セッションの場合はリソースのスコープとそれに対応するURLを具体的に指定する必要-->
      <label for="session_email">Email</label>
      <input class="form-control" type="email" name="session[email]" id="session_email" />

      <label for="session_password">Password</label>
      <input class="form-control" type="password" name="session[password]" id="session_password" />

      <input type="submit" name="commit" value="Log in" class="btn btn-primary" data-disable-with="Log in" />
</form>
```

###演習
1.リスト 8.4で定義したフォームで送信すると、Sessionsコントローラのcreateアクションに到達します。Railsはこれをどうやって実現しているでしょうか? 考えてみてください。ヒント:表 8.1とリスト 8.5の１行目に注目してください。
rails routesより

```
POST   /login(.:format)    sessions#create
```
送信するときにcreateアクションが使われるみたい。
カレーライス作りで学ぶマルチスレッド


threadingというものがいまいちよくわかってなかったのですが、カレーライスのたとえ話ですんなり理解できたので共有したいと思います。

たとえばカレーライスを作るのに、カレーに20分、ご飯に40分かかるとします。

ご飯を作ったあとでカレーを作ると　20+40=60分　かかります
同時に作リ始めれば　40分　で済みます。
後者を実現するのにthreadingを使います。

![curry.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411052/86007eee-1781-12d8-6b82-b642d4ad6619.png)

```python:test.py
import time
import datetime

ctime = 2    # カレーにかかる時間
rtime = 4    # ご飯にかかる時間

def rice():
  print('  ご飯を炊きます')
  time.sleep(rtime)
  print('  ご飯ができました。')

def curry():
  print('  カレーをつくります。')
  time.sleep(ctime)
  print('  カレーができました。')

def tikuji():  # 逐次
    rice()
    curry()
    print('カレーライスのできあがり')

def doji():  # 同時
    import threading
    thread1 = threading.Thread(target=rice)  # インスタンス作成
    thread2 = threading.Thread(target=curry)
    thread1.start()  # 開始
    thread2.start()
    thread1.join()  # 終了を待つ文
    thread2.join()
    print('カレーライスのできあがり')

a = input("1:逐次　2:同時")
# 時間計測
st = datetime.datetime.today()
print(st)
if a == "1":
    tikuji() 
else:   
    doji()   
et = datetime.datetime.today()
de = et - st

print("かかった時間は", de)
```

thread1.join()の部分が終了を待つ文です。
これがないとご飯ができないにも関わらず'カレーライスのできあがり'と表示されてしまいます。


[repl.it](https://replit.com/@bkh4149/NearHomelyMenu#main.py)で試せます
CircuitPythonでステッピングモーター（28BYJ-48）を動かすライブラリを書いてみた

# 28BYJ-48って何？
これのことです。
> Ren He 5V ステッピングモータ+ 28BYJ-48 ULN2003ドライバーボード セット Arduino用 3個セット
> https://www.amazon.co.jp/Ren-He-%E3%82%B9%E3%83%86%E3%83%83%E3%83%94%E3%83%B3%E3%82%B0%E3%83%A2%E3%83%BC%E3%82%BF-28BYJ-48-ULN2003%E3%83%89%E3%83%A9%E3%82%A4%E3%83%90%E3%83%BC%E3%83%9C%E3%83%BC%E3%83%89/dp/B07LBRNZB6

![667D2290-DE9A-48BA-B989-61895D9BC088.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532858/8eee3f7a-9524-217a-566f-8a438c5eb3a2.jpeg)

`28BYJ-48`というステッピングモーターと、`ULN2003`なるトランジスタアレイとやらが搭載されたドライバーボードです。Arduino言語やMicroPythonにてこれを用いている作例はweb上でいくつか見つかるのですが、CircuitPythonでは見つかりませんでした。

そこで今回、これをCircuitPythonでどうにか動かすためのライブラリを書いてみましたので、備忘録も兼ねてこちらに置いておこうと思います。

# コード
その手作りライブラリがこちら。

```python:lib/CPython_28BYJ48_ULN2003.py
import digitalio, time

"""
このステッピングモーターの場合、
1ステップは`5.625° /64`なようなので、
64ステップで`5.625°`、
512ステップで`45°`、
4096ステップで`360°`、即ち1周分となります。
"""
deg45 = 512
deg90 = 1024
deg180 = 2048
deg360 = 4096

class stepper:
    def __init__(self, IN1, IN2, IN3, IN4):
        self.DIG_OUT = [
            digitalio.DigitalInOut(pin) for pin in [IN1, IN2, IN3, IN4]
        ]
        for p in self.DIG_OUT:
            p.direction = digitalio.Direction.OUTPUT
        self.SEQ_CLOCK = [
            [1, 0, 0, 1],
            [1, 0, 0, 0],
            [1, 1, 0, 0],
            [0, 1, 0, 0],
            [0, 1, 1, 0],
            [0, 0, 1, 0],
            [0, 0, 1, 1],
            [0, 0, 0, 1]
        ]
        self.POSITION = 0
        self.STEP_COUNT = len(self.SEQ_CLOCK)
        self.STEP_DIR = 1
        self.STEP_COUNTER = 0

    def rotate(self, clockwise=True, LIMIT=deg180):
        COUNT = 0
        SEQ = self.SEQ_CLOCK if clockwise else self.SEQ_CLOCK[::-1]
        while COUNT < LIMIT:
            COUNT += 1
            for i in range(0, 4):
                pin = self.DIG_OUT[i]
                pin.value = SEQ[self.STEP_COUNTER][i] != 0
            self.STEP_COUNTER += self.STEP_DIR
            if self.STEP_COUNTER >= self.STEP_COUNT:
                self.STEP_COUNTER = 0
            if self.STEP_COUNTER < 0:
                self.STEP_COUNTER = self.STEP_COUNT + self.STEP_DIR
            # sleepを挟まないと、モーターが不穏な音をたてながらビクンビクン震えます。絶対に抜かないように。
            time.sleep(0.0005)
        self.POSITION += LIMIT if clockwise else (-1 * LIMIT)
    
    def reset(self):
        if self.POSITION < 0:
            self.rotate(True, (-1 * self.POSITION) % deg360)
        else:
            self.rotate(False, self.POSITION % deg360)

```
これをこう！

```python:code.py
import board, digitalio
# 先程のライブラリをインポート
from CPython_28BYJ48_ULN2003 import *

# タクトスイッチ
switch = digitalio.DigitalInOut(board.GP18)
switch.direction = digitalio.Direction.INPUT
switch.pull = digitalio.Pull.UP

motor = stepper(
    board.GP14, # IN1に繋いでいるピン
    board.GP15, # IN2
    board.GP16, # IN3
    board.GP17  # IN4
)

while True:
    # タクトスイッチを押したとき
    if not switch.value:
        # (時計回りかどうか, ステップ数)
        motor.rotate(False, deg45)
        # 初期化時の位置に戻る
        motor.reset()
```
サンプルコードの通りに動かすと、モーターは車のワイパーのような動きをします。

ドライバーには`IN1`, `IN2`, `IN3`, `IN4`, `VCC (+)`, `GND (-)`がありますので、前者4つをデジタル出力が可能なピンに、後者2つを5Vの電源供給に繋げて下さい。
AppStore へのアップロードエラー「Error Fetching App Record」が出た場合の対処

# 環境
Xcode Version 13.0 (13A233)

# エラー内容
Archive したアプリをアップロードしようとしたら、下記のエラーが出て失敗する。

```
App record request failed with error: 
"AppsService: ResponseErrors (1): Error status: 403, code: FORBIDDEN_ERROR, 
title: 'This request is forbidden for security reasons',
 detail: 'The API key in use does not allow this request', id: ...
```

![スクリーンショット 2021-10-17 0.10.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/516428/4996aa84-e11f-6a93-7f9d-7dc5f0546f34.png)

# 対処
根本的な解決策が見つからなかったので、とりあえず AppStore へあげる他の方法で対処した。
わかる方いらっしゃったら教えていただけると助かります。

1. Upload ではなく Export を行い、ipa ファイルを取得する。
![スクリーンショット 2021-10-17 0.19.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/516428/44a2fe55-20c0-5578-0223-35315f70bfbc.png)

1. Export されたディレクトリ内の ipa ファイルを [Transporter](https://apps.apple.com/jp/app/transporter/id1450874784?mt=12)  経由でアップロード
MVCモデルの概念理解

# 1. MVCモデル
ソフトウェアの設計モデルの一つ。
機能を「Model」（モデル）、「View」（ビュー）、「Controller」（コントローラ）の三つの役割に分離して実装する。
役割ごとに意味のある単位で機能を分割し実装するため、管理しやすい。

### 1. Model
システムの主処理を担う部分。
データベースとのデータのやり取りやデータの追加・削除・変更などを実施する。

### 2. View
データを表示したり、入出力するデータの前処理や連携を行う部分。
他の二要素から指示を受け、利用者（クライアント）への表示・出力を行う。

### 3. Controller
利用者（クライアント）の入力に基づきModelとViewを制御する部分。
橋渡し役。

# 2. 大まかな処理の流れ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/86f53dcd-7665-beb0-ba5b-c7cd548939a2.png)
①クライアントがViewへリクエストを送る
②Viewで受け取った値をControllerへ渡す
③Controllerは受け取った値をもとにModelに処理指示を出す
④Modelはデータベースを参照しデータを処理する
⑤Modelは処理結果をViewに渡す
⑥Viewは処理結果をクライアントに表示する

システムによっては「Controllerがクライアントからリクエストを受け取る」になっていたり、「ModelはViewへ直接指示をせず、Controller経由でViewを制御する」になっていたりする模様。
特に「ModelがViewへ直接指示を行わず、ControllerからViewの制御を行う」設計を「MVC2」と呼ぶこともあるらしい。
「ファサードパターン」という形態もある。
※ファサード：ControllerとModelのやり取りを仲介してControllerの負担を軽減する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/23c05da4-95f2-d26a-09bd-4d0075d09e2f.png)

# 3. MVCモデルのメリットとデメリット
## メリット

- 各パートの独立性が高く（疎結合）、高品質で効率的な開発が可能。
- 変更や修正対応が柔軟に行なえる。

## デメリット

- システムの規模拡大により、ModelとControlerの負担が大きくなる。
- システム機能の複雑化により、各パートが蜜結合になり、システム修正や変更の柔軟性が失われる。


# 参考
[IT用語辞典 e-Words](https://e-words.jp/w/MVC.html)
[MVCモデルとは！概念やそのメリットをわかりやすく解説！](https://www.geekly.co.jp/column/cat-technology/1911_040/)
[MVCモデルについて](https://qiita.com/s_emoto/items/975cc38a3e0de462966a)
Ruby特有のif文

Rubyを勉強し始めて1日目
初心者として気になったこと・躓いたことを備忘録として残していこうと思います。

#構文

```ruby:if文
if 条件A
    # 条件Aが真だった場合の処理
elsif 条件B
    # 条件Bが真だった場合の処理
elsif 条件C
    # 条件Cが真だった場合の処理
else
    # どの条件に対しても真にならなかった場合の処理
end
```
:::note warn
複数条件の場合は、else ifではなくelsifです。
:::
JavaScriptなどの言語から勉強している方は注意が必要です。（私も間違えやすい...）

##便利な性質
###戻り値を返す
Rubyのif文は戻り値を返すため、変数に戻り値を代入することができます。
以下は時間帯によって表示する挨拶を変更するコード例です。

```ruby:戻り値を変数に代入する
time_zone = '夜'

greeting =
if time_zone == '朝'
    'おはよう'
elsif time_zone == '昼'
    'こんにちは'
elsif time_zone == '夜'
    'こんばんは'
else
    "???"
end
```

```ruby:結果
puts greeting #=>'こんばんわ'
```

###if修飾子
if修飾子として文の後ろにif文を置くことができます。
以下は成績が80点以上の場合、'合格'を表示するコード例です。

```ruby:if修飾子
score = 100
puts '合格' if score >= 80
```

```ruby:結果
#>='合格'
```
便利な性質も多いですが**メソッド**で使用するときは注意が必要です。
私が使用していてハマったことを書き残しておきます。

##メソッドで使用する場合の注意点
###if文

Rubyのif文は戻り値を返すという特性があるため、**return文**を書く必要はありません。
return文を書かないのであれば変数も必要ないと思い、以下のような成績が80点以上は、'合格'を返しそれ以外は'不合格'を返すコードを書きました。

```ruby:if文
def exam(score)
    '不合格'
    if score >= 80
        '合格'
    end
end
```

`scoreに50を渡した場合`
条件は成り立たず最後に評価された式は、'不合格'となり戻り値として返されると考えました。
しかし結果は以下の通りになります。

```ruby:結果
puts exam(50) #>=nil
```

'不合格'は返されず**nil**が返されます。
if文についての詳しい解説は公式リファレンスにあります。

>if 式は、条件が成立した節(あるいは else 節)の最後に評価した式の結果を返します。
>else 節がなくいずれの条件も成り立たなけれ ば nil を返します。
>[制御構造 - if（Ruby 3.0.0）](https://docs.ruby-lang.org/ja/latest/doc/spec=2fcontrol.html#if "Ruby 3.0.0 リファレンスマニュアル")

このように思わぬところでバグを生む要因になることがあるため注意が必要です。
正しく書く場合は、次のように書くことができます。

```ruby:if文
def exam(score)
    if score >= 80
        '合格'
    else
        '不合格'
    end
end
```

###if修飾子
偽になる時の戻り値は**nil**です。

>右辺の条件が成立する時に、左辺の式を評価してその結果を返します。条件が成立しなければ nil を返します。
>[制御構造 - if 修飾子（Ruby 3.0.0）](https://docs.ruby-lang.org/ja/latest/doc/spec=2fcontrol.html#if "Ruby 3.0.0 リファレンスマニュアル")

そのため以下のようなコードを書くときは注意してください。


```ruby:if修飾子
def exam(score)
    '不合格'
    '合格' if score >= 80
end
```

```ruby:結果
puts exam(50) #>=nil
```

こちらも不合格は返されず**nil**が返されます。
正しく書く場合は、次のように書くことができます。

```ruby:if修飾子
def exam(score)
    return '合格' if score >= 80
    '不合格'
end
```

##最後に
最後まで読んでいただきありがとうございました。
LGTMやコメントいただけると励みになります。
ここ間違ってるよといったような指摘コメントも歓迎していますXD
よろしければフォローもお願いします！
プログラム初心者勉強会　2回目　-C# Windowsフォーム入門

#1. 前回リンク
https://qiita.com/Usyuuu-program-beginner/items/ca6d2019a1e5a933faf6

#2.次回記事リンク
https://qiita.com/Usyuuu-program-beginner/items/6b010dce68b437e5a72e

#3. やったこと
下のサイトの 5.イベント～6.コントロールまでを学習
http://kaitei.net/csforms/

#4. 配信時の録画
https://youtu.be/LV1YP31IyFw

※動画のチャプターはコメント欄の固定コメントを参照ください。

#5. 今回学んだこと
Windowsフォームというよりも、クラスとは何かを学びました。

#6. クラスとは
オブジェクトを作る為の設計図のようなもの。

記載例

```C#
class Form1
{
  (クラスの実装)
}
```

このクラスから作られた実体のことが「インスタンス」
new()関数を使用すること生成されます

```C#
Application.Run(new Form1());
```

##6.1 クラスの構造について
Cを学んできた人は**「構造体」のような構造**と言えば伝わりやすいと思います。
クラスは以下のように、メンバ変数やメンバ関数（メソッド）がクラス内で定義されます。

```C#
class Form1 : Form
{
    int clickCount = 0;  // メンバ変数1
    Button button;       // メンバ変数2

    // メンバ関数（コンストラクタ）
    public Form1()
    {
        button = new Button()
        {
            Text = "クリックしてください",
            Location = new Point(10, 10),
            Size = new Size(160, 40),
        };

        // イベントハンドラを登録
        button.Click += new EventHandler(button_Click);

        this.Controls.Add(button);
    }

    // イベントハンドラ本体
    void button_Click(object sender, EventArgs e)
    {
        clickCount++;
        button.Text = clickCount + " 回クリックされました";
    }
}
```

##6.2 コンストラクタについて
クラスの中で、**クラス名と同じ名前のメンバ関数のことを「コストラクタ」と呼びます**
インスタンスが生成される際に実行されるメソッドのことです。

##6.3 thisとはなにか
クラスをインスタンス化したものを"this"で参照する。

3.2章「クラスの構造について」のソースコード例内にある”this.Controls.Add(button);"は「Form1」のインスタンス化されたものを"this"で参照している。

##6.4　Control.Add()は何をしているのか
登録先のフォームへ、指定のコントロールを追加するためのメソッド。

コントロールの定義をしたクラスをインスタンスしただけでは、フォーム上に反映されません。
Control.Add()メソッドを使用するか、コントロールのParentプロパティを使用して登録することで初めてフォーム上に情報が反映されます。

※　コントロールとは
ボタンやチェックボックスなどといった部品の事を「コントロール」と呼ぶ。

#7 InitializeComponentとForm1（コンストラクタ）の使い分けについて
##5.1 InitializeComponentの使用用途

Program.cs内の void Main()から呼び出される初期設定用メソッド。
**Form1.cs[デザイン]画面で編集した内容が自動的に反映されるのが”InitializeComponent"であり、自分で編集することは無い。**

##7.2 Form1(コンストラクタ）の使用用途
クラス”Form1”をインスタンス化した際に最初に処理されるメソッド。

**自分で処理内容を編集する為、Form1.cs[デザイナ]では実装できない初期設定処理はこちらに実装する。**

#8 EventVisualStylesとは
色やフォント等を制御する際に呼ばれるメソッド。
上記を修正したりした場合は、Main()メソッドから呼び出す。

#9 オーバーロードとは
同じ名前で違う引数の関数を定義できること。

```C#
class Test
{
    public void Test( int a )
    {
       //コンストラクタ(1)の処理
    }

    public void Test( char a )
    {
       //コンストラクタ(2)の処理
    }

    public void Test( int a 、int b)
    {
       //コンストラクタ(3)の処理
    }
}
```


#10 オーバーライドとは
既存のイベントハンドラ内容を上書きして、独自のイベントハンドラとして定義できる

http://kaitei.net/csforms/events/#item-28　の「9．オーバーライド」で説明あり


---------------
#11 最後に
今回も参考サイトの内容とは別に多くのことを学習できました。
次回は章以降の勉強を進めようと思います。

##　ニコニコ配信先
https://com.nicovideo.jp/community/co3601066

## Twitch配信先
https://www.twitch.tv/programing_study_meeting

## Discordリンク
https://discord.gg/7rcqhMGpvA
【Python初学者】自然言語処理の基礎を理解する。

##はじめに

この記事の対象者は「機械学習初学者」です。
つまり私です。

##自然言語とは
自然言語ってなんだろう。
まずは、そこから理解しました。

例えばpythonのようなプログラミングで使う言語が
「固い言語」としたら、
普段私たちが使う言葉は**「やわらかい言葉」**です。
1つの言葉や文字にも複数の意味があり
時代によって消えたり増えたりする
まさに生きているような言葉が**「自然言語」**です。

そんなやわらかい言葉を
頭の固い（？）コンピュータに理解させる技術が
**自然言語処理**です。



##実践したこと
早速、以下の文を名詞抽出してみました。

```
text = 'こんにちは。最近Python学習を始めたさとちんといいます。'
```
MeCabをインポートして-Ochasen を使用して
形態素解析（品詞などを必要な情報を分ける）します。

```
import MeCab

# -Ochasen を使用
mecab = MeCab.Tagger('-Ochasen')

# 形態素解析
res = mecab.parse(text)
print(res)


→
こんにちは	コンニチハ	こんにちは	感動詞		
。	。	。	記号-句点		
最近	サイキン	最近	名詞-副詞可能		
Python	Python	Python	名詞-一般		
学習	ガクシュウ	学習	名詞-サ変接続		
を	ヲ	を	助詞-格助詞-一般		
始め	ハジメ	始める	動詞-自立	一段	連用形
た	タ	た	助動詞	特殊・タ	基本形
さと	サト	さと	名詞-固有名詞-人名-名		
ちん	チン	ちん	名詞-接尾-人名		
と	ト	と	助詞-格助詞-引用		
いい	イイ	いう	動詞-自立	五段・ワ行促音便	連用形
ます	マス	ます	助動詞	特殊・マス	基本形
。	。	。	記号-句点		
EOS
```

```
nouns = get_nouns(text)
nouns

→['最近', 'Python', '学習', 'さと', 'ちん']
```


```
#要素を半角スペースで結合
' '.join(nouns)

→最近 Python 学習 さと ちん
```

ここから特徴量を抽出してベクトル化します。
こうすることでコンピュータに数値として情報を渡せるように処理をします。

自然言語の特徴量変換の方法として、
Bag of Words （**BoW**）を使用します。scikit-learnで実装します。
>BoWとは、単語の出現回数によって単語を数値に変換する方法です。

```
from sklearn.feature_extraction.text import CountVectorizer
vectorizer = CountVectorizer()
x = vectorizer.fit_transform(nouns4)

vectorizer.vocabulary_

{'python': 0, 'さと': 1, 'ちん': 2, '学習': 3, '最近': 4}
```

```
x = x.toarray()
print(x)

[[0 0 0 0 1]
 [1 0 0 0 0]
 [0 0 0 1 0]
 [0 1 0 0 0]
 [0 0 1 0 0]]
```
以上のようにベクトル化を行うことができました。

##おわりに

最初、ベクトル化が何を表しているのかがよくわからなかったんですが、
単語毎に
{'python': 0, 'さと': 1, 'ちん': 2, '学習': 3, '最近': 4}のように
IDが割り振られて、IDごとの出現回数をベクトルで表示しているのだと
理解しました。（１５分くらいかかりました）

また、名詞を抽出する際に
['最近', 'Python', '学習', 'さと', 'ちん']のように

さとちんが「さと（固有名詞）」と「ちん（名詞・接尾」と分かれていて
勝手にMeCabに感心しました。

以上、自然言語処理の基礎について理解しました。


## 参考文献

この記事は以下の情報を参考にして執筆しました。

- [ゼロから作るDeep Learning ❷
――自然言語処理編](https://www.oreilly.co.jp/books/9784873118369/)
Installation of Prettier to Vue3

# Problem
Somehow, auto fix by `Prettier` on vscode is not working.

# My environment
- Editor
    - [vscode](https://code.visualstudio.com)
- Plugin
    - [Prettier ESLint](https://marketplace.visualstudio.com/items?itemName=rvest.vs-code-prettier-eslint)
- Framework
    - [Vue.js v.3](https://vuejs.org)

# Solution for me
1. Installing packages following `Prettier ESLint` README (`vue-eslint-parser` is not required for me).
![Screen Shot 2021-11-05 at 23.39.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368555/e61c8f68-2cbe-931e-1c2b-6bb326a24d19.png)
2. configuration of vscode settings following below picture.
![Screen Shot 2021-11-05 at 23.43.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368555/684140b2-9fb7-8543-d2c3-f282b2d48501.png)
![Screen Shot 2021-11-05 at 23.43.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368555/e32d61cb-8b7a-93f2-ec5a-1f43ea4da2f5.png)

# Conclusion
Installing packages and configuration of vscode settings are needed.

# Check List

1. Format On Saveにチェックが入っているかどうか
1. Default Formatterにチェックが入っているかどうか
1. PrettierがVS Codeにinstallされているかどうか
1. eslintの設定ができているかどうか
1. eslintの設定がproject内で適用されているかどうか

![Screen Shot 2022-05-03 at 18.44.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368555/d17e5a70-62d6-fbc7-2b58-51b8cc4c75f6.png)
![Screen Shot 2022-05-03 at 18.44.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368555/ca9448f6-fa65-58b8-3b16-31435edb4a07.png)
![Screen Shot 2022-05-03 at 18.45.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368555/eb69a596-ee57-87b8-f197-69d95865524c.png)

# [221120 updated]

```package.json
...

"eslintConfig": {
    "extends": [
      "eslint:recommended",
      "plugin:@typescript-eslint/eslint-recommended",
      "plugin:@typescript-eslint/recommended",
      "prettier/@typescript-eslint",
      "plugin:prettier/recommended"
    ],
    "rules": {
      "prettier/prettier": "warn"
    }
  }

...

"devDependencies": {
    "eslint": "^8.28.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.2.1",
  },

...
```

```.prettierrc
{
  "prettier/prettier": "warn",
  "semi": true,
  "tabWidth": 2,
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "none",
  "jsxBracketSameLine": true,
  "no-unused-vars": false
}

```
ファビコンを取得するブックマークレットを作った

#### 完成品

```javascript:
javascript:(()=>{let ok=window.prompt("faviconのURL。OKで下記URLを開きます。",
document.querySelector("link[rel='icon']")?.href??
document.querySelector("link[rel='shortcut icon']")?.href??
location.protocol+"//"+location.hostname+"/favicon.ico");
if(ok){window.open(ok,"_blank","noopener")}})();
```

#### 使い方

1. ブックマークに完成品を登録する。
2. ファビコンを取得したいサイトで実行する。
3. DOM内にファビコンがあれば、プロンプトの入力欄にその値が表示される。無ければ、`プロトコル+ドメイン+/favicon.ico`を表示する。
4. プロンプトでOKを押した時は、入力欄のURLを開く。
FargateでWordpressのcronを実行する

#はじめに
fargateでWordpressのcronを実行する際の構成をまとめておきます。

#wp-cronについて
WordPressのジョブの定期実行（一定時間ごとの処理）の仕組みは、デフォルトではwp-cronと呼ばれる方法を利用しています。これは、Webアクセスをトリガーとし、現在実行すべき処理がないかどうかをその都度確認するものです。

しかし、アクセスがない場合、ジョブの定期実行により呼ばれる"予約投稿"が、時間を過ぎても投稿されません。
また、アクセスの多いサイトであればオーバーヘッドも気になります。

そこで、リアルタイムに処理する必要がある場合には、wp-cronからサーバー側の通常のcronに移行します。

#前提条件
- Fargateの構築
こちらの記事を作成ずみです。

https://qiita.com/holdout0521/items/bde67b8334f3362c8009

#構成

```
.
├── Dockerfile
├── docker-compose.yml
├── cron.root
├── run.sh
└── html
    └── wp-config.php
```

```Dockerfile
FROM wordpress:5.8.1-php7.4-apache

RUN set -ex; \
    apt-get update && apt-get install -y \
        cron \
    && apt-get clean \
    && rm -rf /var/lib/apt/lists/*

COPY html/wp-config.php /var/www/html

#cron実行
COPY cron.root /etc/cron.d/cron
RUN chmod 0644 /etc/cron.d/cron
ADD run.sh /bin/run.sh
CMD ["sh","/bin/run.sh"]

# 所有者の変更
RUN chown -R www-data:www-data /var/www/html

WORKDIR /var/www/html
```

```docker-compose.yml
version: '3'
services:
  wordpress:
    build: . # カレントディレクトリのDockerfileでイメージをビルド
    image: wordpress
    ports:
      - '80:80' # ローカルのport80でコンテナのport80にアクセスできるようにする
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_NAME: wordpress # MYSQL_DATABASEと一致させる
      WORDPRESS_DB_USER: wp_user # MYSQL_USERと一致させる
      WORDPRESS_DB_PASSWORD: wp_pass # MYSQL_PASSWORDと一致させる
```


```sh:run.sh
/etc/init.d/cron start

tail -f /dev/null
```
`/etc/init.d/cron start`でスクリプトが終わると、エラーになります。
`tail -f /dev/null`という意味がないコマンドを入れます。


```cron:cron
* * * * * root /usr/local/bin/php /var/www/html/wp-cron.php >> /var/log/cron1.log 2>&1

```
(↑cronは下に空行必須です。)
毎分cronが実行されます。

```wp-config.php
# データベース設定の下の辺りに、下記の記述を追加します。
define('DISABLE_WP_CRON', 'true');
```

#確認
Fargate ExecでFargate内にアクセスし、cronが働いているか確認します。
Fargate Execの方法はこちら。

https://qiita.com/holdout0521/items/0725a476f587e1d64253

```
# cat /var/log/cron1.log
// wp-cron.phpのコードが出力されるとok

```

#参考

https://s8a.jp/wordpress-cron

https://hodalog.com/how-to-inspect-cron-logs/

https://qiita.com/yokra9/items/f527a7892434d2464886

https://qiita.com/reflet/items/7e117c246f55f0e1d87b
Laravel 超便利 ！！ addGlobalScope グローバルスコープで無駄を減らそう！

# はじめに
DBからデータを取得する際に毎回同じ条件のwhere句で絞り込んでいる経験はありませんか？？？
以下の例に当てはまっていると思った方はどうぞ最後まで閲覧して下さい。

【例】
ユーザーテーブルに管理者と一般ユーザーを混在させた設計を例に出しますが、is_adminカラムがtrueのユーザーが管理者という構成になっているとします。
管理者ではない一般ユーザーデータを<font color="blue">DBから取得する度に毎回同じ条件のwhere句を使用して絞り込むのは面倒</font>かと思います。
そこで、これから紹介するaddGlobalScopeを使えば、毎回絞り込まずに済むようになります。

```
$general_users = User::where('is_admin', false)->get();
```

# 目次
<!-- タイトルとアンカー名を編集 -->
1. [addGlobalScopeを定義する](#addglobalscopeを定義する)
2. [実際に使ってみる](#実際に使ってみる)
3. [一部addGlobalScopeを解除する](#一部addglobalscopeを解除する)
4. [番外編](#番外編)

<!-- 各チャプター -->
# addGlobalScopeを定義する
Userモデルに書き加える。
ここで<font color="blue">グローバルスコープを使える様に定義</font>します。
これでコントローラー等でUserモデルインスタンスを呼び出す度にis_adminはfalseのものだけが取得出来ます。

```
// app/Models/User.php (ユーザーモデル)

// 以下追記
use Illuminate\Database\Eloquent\Builder;

class User extends Model
{
　　　　　　// 以下追記
   protected static function booted()
    {
        static::addGlobalScope('is_admin', function (Builder $builder) 
        {
　　　　　　　　　　　　　　　　　　　　　　　　// ここに絞り込みたい条件を記述する
            $builder->where('is_admin', false);
        });
    }
}
```

# 実際に使ってみる
addGlobalScopeで定義した後、実際にデータを取得してみる。
先程グローバルスコープを定義したおかげで、毎度わざわざwhere句で絞り込むことなく、一般ユーザーのデータを取得できる。

```
// これだけで一般ユーザー(is_adminがfalseのもの)だけを取得できる
$general_users = User::get();


// わざわざ以下の条件で絞り込む必要はない！！
$general_users = User::where('is_admin', false)->get();
```


# 一部addGlobalScopeを解除する
withoutGlobalScopeをすれば、<font color="blue">addGlobalScopeで定義した条件を解除</font>した状態でユーザーデータを取得できる。
※この場合はユーザーテーブルから一般ユーザーと管理者の両方を取得できる。

```
// addGlobalScopeで定義したwhere('is_admin', false)が解除される！！

$all_userｓ = User::withoutGlobalScope('is_admin')->get();
```

# 番外編
ルートモデルバインディングで取得したデータ(下記の$user)にwithoutGlobalScopeをかけた状態で取得する方法を紹介します。
逆に<font color="blue">毎回withoutGlobalScopeを書くのが面倒な場合</font>に使います。

```
// UserController.php

public function edit(User $user)
    {
       // いちいちこれを書かずに済む方法を紹介します。
　　　　　　　　　　　　　　$all_users = $user->withoutGlobalScope('is_admin')->get();

       return view('user.edit', [
         'user' => $all_userｓ
       ]);
    }
```
<br>

まずはRouteServiceProvider

```
// app/Providers/RouteServiceProvider.php

class RouteServiceProvider extends ServiceProvider
{
    // 以下追記
    public function boot()
    {
        // testの部分は任意に書き換えて下さい
　　　　　　　　　　　　　　 // addglobalscopeを定義した箇所のモデルを記述( \App\Models\User )
        Route::bind('test', function ($id) {
            return \App\Models\User::withoutGlobalScopes()->findOrFail($id);
        });
    }
}
```
<br>
web.php(ルーティングファイル)のパラメーターに test を記載します。

```
Route::get('user/{test}', [UserController::class, 'edit'])->name('user_edit');
```

<br>
コントローラーでwithoutGlobalScope('is_admin')をする必要は無くなりました！
先程のルートファイルで設定したルートモデルバインディングだけwithoutGlobalScopeを書く必要はありません。

```
// UserController.php

public function edit(User $all_users)
    {
       return view('user.edit', [
         'users' => $all_users
       ]);
    }
```
【Nuxt.js】middlewareでリダイレクト処理をしたらトップページが表示されなくなる時の対処法

#はじめに
こんにちは。
こちらの記事では、ログイン前後のリダイレクトを正常に行う方法を記しています。
誤っている点がございましたらコメントいただけると幸いです。

##middlewareとは
middlewareディレクトリは、ページがレンダリングされる前に処理を実行できる関数を定義できるディレクトリ。ログイン前後のリダイレクト処理を実行する時に用いられる。

全ページに適用させたい場合は`nuxt.config.js`に、middlewareディレクトリ直下のファイル名を記述し、ページごとに適用させる場合は`middleware`プロパティを追記する必要がある。

```javascript:nuxt.config.js
router: {
    middleware: 'ファイル名'
}  
```

```javascript:pages/login.vue
export default {
    middleware: 'ファイル名'
}
```

>参考記事：https://nuxtjs.org/docs/directory-structure/middleware/

<br>

##問題・原因・対処法
前提として、storeディレクトリ内でログイン状態を管理する`login`を定義し、ログイン後なら`true`、ログイン前なら`false`を返す。storeディレクトリから呼び出し、定数`userLogin`としてログイン状態を管理する。

下記の通り、middlewareディレクトリ内に作成した`authenticated.js`に、ログイン前はログインページへリダイレクトし、ログイン後はメインページへリダイレクトする処理を記述した。

```javascript:middleware/authenticated.js
export default function({ store, route, redirect }) {

  //ログイン状態を管理
  const userLogin = store.state.user.login;

  //ログイン前の処理
  if (!userLogin && route.name !== "login" && route.name !== "register") {
    return redirect("/login");
  }

  //ログイン後の処理
  if (userLogin && route.name === "login" || route.name === "register")
  ) {
    return redirect("/main");
  }
}
```


###起きていること
トップページにアクセスしようとするとリダイレクトされてしまい、画面が表示されなくなってしまう。



###なぜこの問題が発生したのか
ログイン前の処理でログインページにリダイレクトする条件が、
`「ログインしていない」かつ「ログインページではない」かつ「登録ページではない」`
という条件なのでログインしていない状態だと、トップページもリダイレクトされる対象になってしまうため。

```javascript:middleware/authenticated.js
  //ログイン前の処理
  if (!userLogin && route.name !== "login" && route.name !== "register") {
    return redirect("/login");
  }
```

###解決方法
ログインしていない時にログインページへリダイレクトする処理から、トップページを除外する必要がある。試した解決方法は以下の２つです。

```javascript:middleware/authenticated.js
  //ログイン前の処理
  if (!userLogin && route.name !== "login" && route.name !== "register" &&  route.name !== "index") {
    return redirect("/login");
  }
```
ログイン前の処理の条件にトップページも含める。`&&  route.name !== "index"`
または、

```javascript:middleware/authenticated.js
export default function({ store, route, redirect }) {

  //ログイン状態を管理
  const userLogin = store.state.user.login;

  //トップページをリダイレクトから除外
  if (!userLogin && route.name === "index") {
    return false;
  }

  //ログイン前の処理
  //以下省略
}
```
トップページをリダイレクトから除外する処理を記述する。

>参考記事：https://blog.cloud-acct.com/posts/u-nuxt-redirect-middleware/


#おわりに
ここまでmiddlewareでリダイレクト処理を正常に行う方法についてまとめました。
ログインまわりの実装を始めてからエラーに遭遇する回数が増え、少しずつですが対応に慣れてきた気がします！今後もコツコツ実装を進めていきたいと思います！
以上、最後まで読んでいただきありがとうございました！
よければLGTMを押してくれると嬉しいです！
独立環境のGitHubEnterpriseとGitHub.comのssh-keyを共存させ、考えずにsshでcloneする

sshとそのconfigファイル(`~/.ssh/config`)を正常に設定できれば造作もないことかも知れないが、とても設定で困ったので書く。
普段は、個人のアカウントでGitHubにアクセスしているが、独立環境にGitHubEnterprise(以降、GHEと呼称する)が構築され、そちらに対してもアクセスする必要ができた。
どちらも、セキュリティの観点からMFAを設定している。
そのため、ssh-keyを二つ生成して、それぞれにアクセスできるようにしたかった。
今回は`macOS Big Sur`で実施したため、Linux系は同様の設定で良いと思います。
Windows10の場合は後々やってみようと思います。

# やりたいこと

* MFA設定済みのGitHub.アカウントで、GitHub.comにSSHアクセスできるように設定をする。
* MFA設定済みのGitHubとは異なるGHEアカウントで、独立環境のGHEにアクセスできるように設定する。
* 以下のところでSSHをコピー＆ペーストするだけでcloneできるようにする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439558/a9005e72-e6b7-0706-7a88-730ab6c9fb49.png)

```
# git clone git@github.com:hogehoge/hogehoge.git
# git clone git@[GHE独立環境のドメイン]:hogehoge/hogehoge.git
```

## 環境に関する情報

* 作業マシン：MacbookPro2018 IntelCPU
* 個人のGitHub.comアカウント
* 独自環境に構築したOSS型GitHubEnterprise(要は仕事用環境)


# ssh-keyの生成をする

以下の通り、鍵の生成を実施した。

* GitHub向けの秘密鍵`github`と公開鍵`github.pub`
* GHE向けの秘密鍵`ghe`と公開鍵`ghe.pub`


```
~/.ssh ❯❯❯ ls
config      ghe         ghe.pub     github      github.pub  id_rsa      id_rsa.pub  known_hosts
```

# configファイルの編集

以下の通り記述しました。

```
# GitHub Enterprise 独立環境GHEのアクセス用の設定
Host [gheのURL]
        User git
        IdentityFile ~/.ssh/ghe
# GitHub 個人のGitHubアクセス用の設定
Host github.com
        User git
        IdentityFile ~/.ssh/github
```

注意：
環境数だけHostを書く。

* Host：
  * ドメイン名を書くのです。そうしないと、GitHubやGHEのCloneページからコピー＆ペーストで正常に秘密鍵を選択してアクセスしてない。
* User：
  * `git`と必ず書きましょう。コピーする文の`git@`の部分と一致させるのです。
* IdentityFile：
  * それぞれに合わせて生成した秘密鍵のパスを書くのです。

# 公開鍵をそれぞれに登録

公開鍵ファイルの中身それぞれに合わせて登録する。

# 接続テスト

GitHubなら

```
# ssh -T git@github.com
```

成功すると

```
Hi [GitHubのUserName] You've successfully authenticated, but GitHub does not provide shell access.
```

となる。

---

GHEなら

```
# ssh -vT git@[gheのURL]
```

成功すると

```
Hi [GHEのUserName] You've successfully authenticated, but GitHub does not provide shell access.
```

となる。

もし失敗した場合は、

```
# ssh -vT git@[接続先]
```

でデバッグメッセージを出力させて、想定している秘密鍵が選択されてアクセスしているかなど確認する。

# さあ、Cloneしよう

きっとできるはずだ。勇気を出して。
SESから社内SEに転職するとき唯一失敗したこと　前もって知っておきたい常識

## 「転職先探し」より「退職」に苦労しました
SESからの転職先探しは難しいと言われることもありますが、僕が苦労したのは転職先を見つけることよりも、SES企業を退職することです。

ちなみにSESからの転職先探しは、きちんと対策をすれば難しくないと思ってます。
僕が実際に転職したときの対策はこの記事にまとめてるので、もしよければ参考にしてください。

→[「SESから転職できない」は嘘？普通に客先常駐（SES）から転職できた話　問題点と解決策まとめ][1]
[1]:https://domona.info/can-change-jobs/

## 退職を難しくする「準委任契約」

どうしても入りたいと思って応募した会社（いま働いてる会社）から内定をもらうことができ、4月の初めに入社ということで話を進めたいと言われました。

しかし僕は当時、3カ月区切りの準委任契約で客先に常駐していて、次の更新は6月だということを**内定をもらってから**知りました。

せっかく内定をもらえたのに6月まで待ってほしいだなんて言えません。
最悪の場合、内定取り消しにもなり兼ねない状況です。

そのため自社（SES企業）との調整、客先との調整、内定した会社との調整、調整、調整を繰り返して、なんとか5月に入社することができました。。。

## 退職は計画的に

できるだけスムーズに転職するためには、できるだけ前もって行動を起こすことが重要です。（SES業界にいれば常識だと言われてしまうかもしれませんが。。）
また、他にも注意した方がいいことがあるので具体的なことはこの記事にまとめました。
→[客先常駐（SES）を円満に辞められる退職理由と確実に退職する方法][2]
[2]:https://domona.info/ses-reason-for-retirement/

SES企業からの退職をお考えの方は、僕と同じようなことにならないようにご注意ください。
Vue.jsを使うにあたって参考にした書籍・サイト

# はじめに
今回が初めての投稿になります。
誤字脱字、間違った文言などありましたら容赦なくご指摘ください。

## 目的
次のプロジェクトでフロントエンドの開発をすることになったので、参考にした書籍・サイトをまとめます。
以前vue.jsは触っていましたがフワッとしか理解していなかったので、もう一度学習しなおしました。

## Vue.js公式サイト
https://v3.ja.vuejs.org/
Vue.jsの公式サイトです。
こちらはVue3についてのガイドです。
まずはここからですね。
※Vue2のガイドは[こちら][link-1]から。
[link-1]:https://jp.vuejs.org/index.html


## Vue.js入門 基礎から実践アプリケーション開発まで
https://www.amazon.co.jp/Vue-js%E5%85%A5%E9%96%80-%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E5%AE%9F%E8%B7%B5%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E9%96%8B%E7%99%BA%E3%81%BE%E3%81%A7-%E5%B7%9D%E5%8F%A3-%E5%92%8C%E4%B9%9F/dp/4297100916

vue.jsの詳しい説明や利点の解説から、Vue CLI、Vue Router、Vuexの解説などが一通りされています。
2019年の年末ごろに購入したので、今のvueのバージョンとは書き方が異なるところがあります（コンポーネントなど）。
また、Vue CLIやVue Routerなどについてのインストール方法は詳しく記載されていない印象です。
Unit Testについての説明も薄いので、他で補完する必要があります。

## 【基本編】Jestを利用してVue コンポーネントをテストする方法(Unit Test)
https://reffect.co.jp/vue/vue-jest-test

テストの仕方についてはこちらのサイトを参考にさせていただきました。
Vue CLIでのプロジェクト作成から段階ごとのテストの方法まで詳しく載せてあるので参考になりました。
別ページではstub、mock、shallowMountについても解説してあり、とても勉強になりました。

## Vue.js を vue-cli を使ってシンプルにはじめてみる
https://qiita.com/567000/items/dde495d6a8ad1c25fa43#vuejs-%E3%82%89%E3%81%97%E3%81%8F%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B

vue-cliを使ってアプリケーションを作成する手順を詳しく説明してくれています。個人開発でもvueを使おうと思っていたので、参考にさせてもらいました。

## Vuetify
https://vuetifyjs.com/ja/

Vuetifyは美しく整えられたマテリアルコンポーネントを提供するVue UIライブラリです(公式サイトより)。
個人開発で画面のレイアウトを整えるのに使おうと思いました。しかし、2021年12月現在、vue3に対応したものは開発中みたいです。リリース目標が2022年2月なので、その時に使ってみようと思います。

## Jest解説
https://zenn.dev/tentel/books/08b63492b00f0a

ユニットテストの書き方を勉強する上で参考にさせていただきました。環境構築から解説してあり、基本的なメソッドの説明から応用的なもの、VuexやVueRouterのテストについても書いてあります。
最後のチャプターではテスト要件に沿ったテストを実装するハンズオンもあり、非常に勉強になりました。
てんてる様ありがとうございました。

# 終わりに
今までvueは何となくしか使っていなかったので非常に勉強になりました。
Vue3についてはまだ慣れていないところが多いので、徐々に慣れていこうと思います。
また参考になったページがあったら追記していきます。
【メモ】データサイエンティストを目指す中で取得した資格

#取得した資格

# Python 3 エンジニア認定基礎試験

試験情報

https://cbt.odyssey-com.co.jp/pythonic-exam.html

試験対策方法

https://qiita.com/YH_BK/items/bdb7bf564fc53c50c7ec



# Python 3 エンジニア認定データ分析試験

試験情報

https://cbt.odyssey-com.co.jp/pythonic-exam.html

試験対策方法
Aidemyで試験対策実施

https://aidemy.net/


# G検定
試験情報

https://www.jdla.org/certificate/general/

試験対策方法

https://qiita.com/YH_BK/items/f43e247d3a9c2b98cf71

# DS検定

『データサイエンティスト検定™ リテラシーレベル』（略称：DS検定™ ★）とは、アシスタント・データサイエンティスト（見習いレベル：★）と数理・データサイエンス教育強化拠点コンソーシアムが公開している数理・データサイエンス・AI（リテラシーレベル）におけるモデルカリキュラムを総合し、実務能力と知識を有することを証明する試験です。

試験情報

https://www.datascientist.or.jp/dskentei/

試験対策

https://qiita.com/YH_BK/items/27420dae3ba4259acfd9


#今後取得を検討しているもの


# ITパスポート　(未取得)

試験情報

https://www3.jitec.ipa.go.jp/JitesCbt/index.html

# 統計検定2級　(未取得)

試験情報

https://www.toukei-kentei.jp/


# E資格 (未取得)

試験情報

https://www.jdla.org/certificate/engineer/
Power Automate: Noteとは別にCommentsがつけられるようになってますね

# はじめに
フローを構成していく補助機能が色々ありますよね。

- Automate Bot と対話？で動かす為の Description
- 各Action単位でコメントを付けておく Note
- 機能単位で分割しておく Scope

そこに、Comments が追加されていたので簡単な機能紹介まで

# Comments の機能
- 各 Action 単位を軸としてコメントを付けて置ける
- スレッド形式で記述可能
- スレッド完了化が可能なので、Actionに対する指摘＋対処済み、といったタスク管理に利用可能

:::note warn
並行フローには未対応の様子 2021/11/5
:::

![AutomateCommands.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/1d9181e2-7070-5b3c-ae5a-3ff0ab0d30cb.gif)

# あとがき
Premium とか、Git 機能とか使えるころには、これも会社で使えるといいな
M5StackのUltraSonic unitの注意点

#UltraSonic unit とは
距離を測るための超音波センサーが付いたM5Stack社製のユニットです。
UltraSonic2 unit が現在開発中らしい。これを知ったのが、私がUltraSonic unit(初代)を購入した直後だったんですよね。なんてこった。
<blockquote class="twitter-tweet"><p lang="it" dir="ltr">UltraSonic2 unit. <a href="https://t.co/PeZtQjGg0d">pic.twitter.com/PeZtQjGg0d</a></p>&mdash; M5Stack (@M5Stack) <a href="https://twitter.com/M5Stack/status/1456536650733920258?ref_src=twsrc%5Etfw">November 5, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

で、初代のunitには実は問題があるのです。
**短い距離が正確に測れないというわりと深刻な問題が。**

３０センチ以上離れた物体との距離は測れるのですが、それ以上近づくとどう見ても異常な値になります。公式のサンプルスケッチでも同様。
それで機械翻訳を駆使して公式アカウントに相談してみたのです。ありがとうGoogle、君は頼りになるよ。
その時のやりとりがこちらです。

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">The reason should be that the 12mm probe is too sensitive, and it will receive a lot of interfering signals at short distances. This is a great improvement on ultraSonic2. I&#39;m sorry</p>&mdash; M5Stack (@M5Stack) <a href="https://twitter.com/M5Stack/status/1456560499173167109?ref_src=twsrc%5Etfw">November 5, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

**「その理由は、12mmプローブの感度が高すぎて、短距離で多くの干渉信号を受信するためです。これは、ultraSonic2の大幅な改善です。申し訳ありません」**

そういう事らしいです。なんだってー！

箱には 2-150cm と書いてあるのに[公式サイト](https://docs.m5stack.com/en/unit/sonic "m5-docs")では 30-150cm って書いてあったのは、間違いでもなんでもなかったのですね。次からはちゃんと確認しよう...
（もっともデモ映像では近距離でもきちんと動作しているように見えるので、生産ロットによって違いがあったりするのかも...？）
とりあえず、**これから超音波センサーの購入を考えている方は、UltraSnic unit2の発売を待つことをお勧めします。**３０センチ以内の近距離を測りたい方は特に。

とはいえ、初代が全く使えない子というわけではありません。３０センチ以上離れた距離ならばそれなりにきちんと測れます。せっかく手元に来たのですから、いつか活躍の場を作ってあげたいですね。

「感度が高すぎる」というところになにがしかの可能性すら感じつつ、今回の報告を終わります。
JSF FaceletタグライブラリのXMLネームスペース一覧

JSF Faceletタグライブラリのxmlnm（XMLネームスペース）一覧

|Library|prefix|JSF2.1まで|JSF2.2以降|
|:-:|:-:|:-:|:-:|
|Composite Components|cc|http://java.sun.com/jsf/composite|http://xmlns.jcp.org/jsf/composite|
|Faces Core|f|http://java.sun.com/jsf/core|http://xmlns.jcp.org/jsf/core|
|HTML_BASIC|h|http://java.sun.com/jsf/html|http://xmlns.jcp.org/jsf/html|
|JSTL Core|c|http://java.sun.com/jsp/jstl/core|http://xmlns.jcp.org/jsp/jstl/core|
|JSTL Functions|fn|http://java.sun.com/jsp/jstl/functions|http://xmlns.jcp.org/jsp/jstl/functions|
|Facelets Templating|ui|http://java.sun.com/jsf/facelets|http://xmlns.jcp.org/jsf/facelets|
|Pass Through Attributes|p|http://java.sun.com/jsf/passthrough|http://xmlns.jcp.org/jsf/passthrough|
|Pass Through Elements|jsf|http://java.sun.com/jsf|http://xmlns.jcp.org/jsf|

HTML例

```sample.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:cc="http://xmlns.jcp.org/jsf/composite"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
    xmlns:fn="http://xmlns.jcp.org/jsp/jstl/functions"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
    xmlns:p="http://xmlns.jcp.org/jsf/passthrough"
    xmlns:jsf="http://xmlns.jcp.org/jsf">
<h:head>
</h:head>
<h:body>
</h:body>
</html>
```
最小のargocd

Kubernetesをシングルマスターの小さいクラスタたくさんで運用する際、多分アプリのデプロイにはargocdを使うだろう。
外部にargocdをリモートから管理するサーバーを置いてマルチクラスターを集中管理みたいなアーキテクチャをよく見かけるが、個人的にこの構成は良くないというか、嫌い。何故って、管理サーバー用意するのが無駄だから。
構成は最小限に閉じている事が美しいが、argocdに関してその使い方が積極的に紹介されることは中々ない。

以下は、Kubernetesクラスターにargocd coreをセットアップしてアプリが自律的に同期されるまでを確認するまでの手順の紹介というかメモ。

# 導入先のKubernetesクラスター

Kubernetesならなんでも。例えば以下のようなシングルマスターのKubernetesで。

https://qiita.com/rk05231977/items/9f4ce13d3cd285891fd7

kbuectlがcluster-adminで実行できることが前提。

# Argo CD Coreをインストールする

Argo CDの、coreインストールの手順に従いインストール。
ついでにCLIも。

https://argo-cd.readthedocs.io/en/stable/getting_started/#1-install-argo-cd

```
$ kubectl create namespace argocd
$ kubectl apply -n argocd -f https://raw.githubusercontent.com/argoproj/argo-cd/stable/manifests/core-install.yaml

$ sudo curl -sSL -o /usr/local/bin/argocd https://github.com/argoproj/argo-cd/releases/latest/download/argo
$ sudo chmod +x /usr/local/bin/argocd
```

coreインストールすると、argocd-serverもデプロイされないのでUIに慣れた人はビビるかもしれないが、それが正常である。

# 同期するアプリケーションを設定する

argocdにログインして、guestbookアプリをargocdが面倒を見るアプリとして設定する。
ついでに同期設定も有効化する。ので、このクラスターはこれ以降、基本的にはノータッチ運用となるはずである。マスターノードがKubernetes APIの6443ポートを公開する必要もない。

```
$ kubectl config set-context --current --namespace=argocd
$ argocd login --core

$ argocd app create guestbook --repo https://github.com/argoproj/argocd-example-apps.git --path guestbook --dest-server https://kubernetes.default.svc --dest-namespace default
$ argocd app set guestbook argocd --sync-policy auto

$ kubectl config set-context --current --namespace=default
```


一応、アプリのデプロイ同期状態をargocdのCLIで確認することは出来、以下のようになる。

```
$ argocd app get guestbook
Name:               guestbook
Project:            default
Server:             https://kubernetes.default.svc
Namespace:          default
URL:                http://localhost:36467/applications/guestbook
Repo:               https://github.com/argoproj/argocd-example-apps.git
Target:
Path:               guestbook
SyncWindow:         Sync Allowed
Sync Policy:        Automated
Sync Status:        Synced to  (53e28ff)
Health Status:      Healthy

GROUP  KIND        NAMESPACE  NAME          STATUS  HEALTH   HOOK  MESSAGE
       Service     default    guestbook-ui  Synced  Healthy        service/guestbook-ui created
apps   Deployment  default    guestbook-ui  Synced  Healthy        deployment.apps/guestbook-ui created
```

実際にアプリが動いているかというと、もちろん動いている。

```
$ kubectl get pod
NAME                            READY   STATUS    RESTARTS   AGE
guestbook-ui-85985d774c-ctqhb   1/1     Running   0          6m34s
```

# おわりに

簡単っすよね？これが最近argocdのもてはやされる理由。