OmniAICreator/Qiita-1.07M huggingface dataset:
IoT初心者向けの教材 - IoT for Beginners

2021年7月に、マイクロソフトからIoT初心者向けの教材（カリキュラム）がリリースされています。アナウンス記事がこちら。

https://techcommunity.microsoft.com/t5/internet-of-things/iot-for-beginners-curriculum/ba-p/2532793

> we hope to empower students of all ages to learn the basics of IoT. Presuming no knowledge of IoT, we offer a free 12-week, 24-lesson curriculum to help you dive into this amazing field. 

あらゆる学生にIoTの基礎を学んでもらいたく、12週間、24レッスンのカリキュラムを用意して無料で提供しています。

https://github.com/microsoft/IoT-For-Beginners

# 24レッスン

それでは、実際にレッスンを受けてみましょう。
**24つのレッスン**は、ここに**一覧**があります。

https://github.com/microsoft/IoT-For-Beginners/blob/main/README.md#lessons

<img width="400" alt="image.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109634/93fb8691-dbe3-a469-275f-dc8dc8b77cb4.png">

24つのレッスンは、Getting started, Farm, Transport, Manufacturing, Retail, Consumerの6つのプロジェクトに分かれていて、シナリオに沿って学習するようになっています。

レッスン一覧の一番右の列にある、**Linked Lessonをクリック**すると、（GitHubに置かれた）レッスンの**テキスト**と**動画**のリンク、**クイズ**のリンクなどがあります。

動画はレッスンによって充実具合にバラツキがありました。どうやら、（GitHubに置かれた）**テキストを読み進めるのが正しいようです**。

# 興味あるレッスンだけを

24レッスンに凝縮されているとはいえ、英語で24レッスンも読むのは苦痛。。。ではあります。（あぁ、英語スキルほしい）

全レッスンをNityaが1枚のSketchnoteにしているので、これを見ると英語分からなくてもなんとなくどのレッスンでどんなことを解説しているのか雰囲気が分かります。先ずは興味のあるレッスンだけを見る/読むのが良いのではないでしょうか。

<img width="800" alt="image.jpg" src="https://raw.githubusercontent.com/microsoft/IoT-For-Beginners/main/sketchnotes/Roadmap.jpg">

# Lesson #1 Introduction to IoT

わたし的には、Introduction to IoTは動画で見るのがオススメです。
Jimのテンポ良い解説は、見ていて楽しいです。スライドも可愛いし。
ちなみに、Getting startedのレッスン4つの動画で使われているスライドは[ここ](https://github.com/microsoft/IoT-For-Beginners/tree/main/slides)に公開されています。

冒頭、これからIoTやってみよう！という人に向けて、

* FOR DEVELOPMENT ... DEV-KIT
* IN PRODUCTION ... CUSTOM CPU OR CIRCUIT BOARDS

を話していて、なるほどなーと思いました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109634/07b52053-8bf1-722b-67e3-d3a277370ae6.png)
https://youtu.be/bVFfcYh6UBw?t=908
OpenProcessing上で各種Input Controller系の位置がずれる問題のワークアラウンド

# 解決したい問題点
2021/10/09現在、[OpenProcessing](https://openprocessing.org/)上でInput系のコントローラー(`createSlider()`とか`createButton()`)を使うと盛大に位置がずれます。
例えば、`createSlider()`の[リファレンスコード](https://p5js.org/reference/#/p5/createSlider)をみると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542654/61653f0a-10ca-7cac-5e0b-0a49c726a2ae.png)
と表示されるものが、OpenProcessing上では下記のように表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542654/05dccc89-4b1a-0732-fef8-522425fa094c.png)  

いつからかこうなってしまったので、たぶん一時的な不具合だと思うのですが、結構長い間修正されていないので、ワークアラウンドを検討しました。

# 解決策
結論はこれ。

``` javascript
let slider;

function setup() {
  slider = createSlider(0, 255, 100);
  slider.style('width', '80px');
}

function draw() {
  let controllerOffsetX = 10;
  let controllerOffsetY = 10;
  
  // URLからOpenProcessingサイトであると判明したら、ワークアラウンド発動
  const url = getURL();
    
  if( url.includes('openprocessing') ){
    // canvas位置を特定して、そのX/Y座標をOffsetへ反映させる
    const canvasRect = document.querySelector('canvas').getBoundingClientRect();

    controllerOffsetX += canvasRect.left;
    controllerOffsetY += canvasRect.top;
  }
  
  slider.position(controllerOffsetX, controllerOffsetY);

  const val = slider.value();
  background(val);
}
```

# ポイント
- OpenProcessingのサイトかどうか判定しているので、他のPlatform上への影響もない。はず。

# ほかのスケッチでの効果確認
問題なさそう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542654/5168853d-d34b-475c-eb3d-3f97cf410105.png)
HTMLに動画を埋め込む方法 <iframe> <video>

「HTMLに動画を埋め込む方法」　
    ・iframeタグを使用する（youtubeなどの動画サイトから読み込む）
    ・videoタグを使用する（動画ファイルをアップロードして読み込む）

  videoタグの使用方法
    ・mp4, webmなどの動画ファイルの読み込みで動画を表示
    <video src="~~"></video>
      属性一覧
        ・controls コントロールパネルを表示する 再生ボタン 再生 ボリューム
        ・auto 自動再生
        ・loop 繰り返し再生
        ・poster 開始画面の画像を設定
        ・playsinline インライン再生を可能にする
          スマホのsafariでwebサイトの動画の埋め込まれている動画を再生しようとすると強制的に全画面表示になってしまうことがある。
          全画面表示をせずにその場で再生させることができるのがインライン再生
          ・インライン再生を可能にするには、autoplay, muted, playsinline 三つの属性が必要になる。
          どれか一つでもかけているとうまくインライン再生されないので注意する。
        ・width/height 横幅と高さを指定する
        ・preload 動画の読み込み設定
          webサイトを読み込む時に、事前に動画ファイルをDLするかを指定する。
          none: 事前のファイル読み込みを禁止
          metadata: 長さやファイルサイズなどのメタ情報（動画の情報）だけを読み込む
          auto: 初期値：動画ファイルを事前にダウンロードする
        ・複数の形式の動画を読み込む
          mp4で動画が再生されない時のことを考えて複数形式の動画をあらかじめ用意しておく。（セーフティネット）
          １「mp4」を読み込む
          ２ だめなら「webm」を読み込む
          ３それでもダメなら「ogg」
          ４それでもダメなら「エラーメッセージ」を表示する
    youtubeなどの動画サービスを埋め込む
      ・iframeタグを使用する。
      １youtubeの動画の「共有」から「埋め込む」を選択
      ２埋め込むためのコードが表示されるのでコピーしてhtmlに貼り付けるだけでOK
    
  ・Videoタグで動画が再生されない３つの、ケースと解決策
      ・androidで動画が再生できない
        「Basic認証」でwebページにアクセスできる人を「ユーザーパスワード」を用いて制限するという機能がある。
        そのBasic認証がかかったページをandroidで閲覧すると動画を見ることができない。
      ・mp4なのに再生できない
        mp4でも「コーデック」といい、圧縮のデータ方式が異なるので
        コーデックを確認して「AVC形式」「H.265形式」でmp4を経て書き出す
      ・IEでvideoタグが使えない場合
        IZE8以前では「videoタグ」が使用できないので「html5media.js」を使用する
        <head>タグの中にする文言が、ある
    
   背景に動画を表示する方法
      ・要素いっぱいに動画のサイズを広げて、文字の入ったdiv要素をabsoluteで、浮かせて動画の上に載せるイメージ

    
iframe 
  ・weサイトの中で別のwebサイトを埋め込むことができる（other youtube and google maps）
  ・iframeの装飾は、枠のデザインしかできず、読み込んだページのデザインを変えるにはJSを使用
  ・iframeを使うと少ないスペースにたくさんの情報をスクロールすることで読みこみ可能。
      ただこれは目的の情報に辿り着きにくくなる。
  ・CSSのoverflowプロパティでは擬似的にフレームを作ることができるの
API Gateway POSTメソッド＋Lambda　作成の備忘

##構成

[Client] ⇒(リクエスト ※1)⇒ APIGateway ⇒ Lambda

※1
　IAM認証・・・不正リクエスト対策
　　　　　　　 ※Client PCがウイルスにかかり、APIにリクエストが動く場合など
　IP制限 ・・・不正アクセス対策

##POSTのAPI　リクエストのcontent-type
世の中のAPIを見ると、リクエストのcontent-typeが、
application/jsonのものと、application/x-www-form-urlencodedのものがあります。
両方に対応しているAPIもありました。
application/jsonの数が増えつつあるというところでしょうか。

```x-www-form-urlencoded.
flg=1&id=2
```

```application/json.
{"flg":1,"id":2}
```

##API Gatewayの設定について
####・リソースポリシーで、IP制限を設定
https://aws.amazon.com/jp/premiumsupport/knowledge-center/api-gateway-resource-policy-access/
####メソッドリクエストで、IAM認証を設定
https://aws.amazon.com/jp/premiumsupport/knowledge-center/iam-authentication-api-gateway/
####ゲートウェイレスポンスについて。
カスタマイズで、{"message":}のフォーマットを変更してしまったが。
次回からは変更しない方がいい気がしています。
変更すると、エラーの内容によってフォーマットが変わるから、全部合わせて変更しないと気になります。
####・統合リクエストで、Lambdaプロキシ統合を選択
要件を満たせる場合は、個人的にLambdaプロキシ統合での作成が好きです。
APIGateway内でリクエストご編集したり、レスポンスを編集したりしなくていい。Lambda開発で完結するため。
https://qiita.com/yuuwatanabe/items/a3bd65e709f20574b6db
####・IAM認証用のユーザーの作成について
ポリシーについては、必要な権限のみ振り出す。
　https://docs.aws.amazon.com/apigateway/latest/developerguide/api-gateway-iam-policy-examples-for-api-execution.html
より

```
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": [
        "execute-api:Invoke"
      ],
      "Resource": [
        "arn:aws:execute-api:us-east-1:*:a123456789/test/POST/mydemoresource/*"
      ]
    }
  ]
}
```

##Lambdaの設定について
####・Lambdaプロキシ統合のため、レスポンスの形式が決まっています。https://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/set-up-lambda-proxy-integrations.html#api-gateway-simple-proxy-for-lambda-output-format

```
{
    "isBase64Encoded": true|false,
    "statusCode": httpStatusCode,
    "headers": { "headerName": "headerValue", ... },
    "multiValueHeaders": { "headerName": ["headerValue", "headerValue2", ...], ... },
    "body": "..."
}
```
####・コールドスタート対策について
①コールドスタートを発生させないようにする
　Provisioned Concurrency　※常時コンテナ作っておく。お金かかる。
　https://dev.classmethod.jp/articles/lambda-provisioned-concurrency-coldstart/
　※コンテナの作成数を超えると、もちろんコールドスタートは発生します。
②コールドスタートのレイテンシーを短くする
　1.Lambdaのメモリを増やす。
　　⇒メモリを増やすと、CPUが変わる（性能よくなる）ので、
　　　変更し、APIGatewayのアクセスログのレイテンシーを見ながら調整できます。
　　　※Lambdaデプロイ後の一回目は必ずコールドスタートになります。
　2.追加ライブラリを減らす。サイズを減らす
　　コールドスタート時には、追加ライブラリをコンテナにダウンロード、
　　展開が行われます。
　　なので、減らず、サイズを小さくするとその分時間短縮になります。
　　https://dev.classmethod.jp/articles/remote-py-2-lambda-tuning/
　　※元々、boto3を追加しようとしていたのですが、
　　　python3.7でboto3を追加しなくてもライブラリが使えました。
　　　マニュアルには、python3.8～と記載していたような。。
　3.コードの調整
　　※実際コードをあれこれ変更してわかった
　　以下の定義を、Dynamodbへのリクエストを関数ごとに
　　３回記載していたのですが。
　　dynamodb = boto3.resource('dynamodb')
　　これを、グローバル変数にして、
　　DYNAMODB = boto3.resource('dynamodb')
　　各関数で以下のようにすると、レイテンシーがかなり変わりました。
　　DYNAMODB.Table('user')
####・テストについて
Lambdaのテスト＞テストイベント＞テンプレートのapigateway-aws-proxy があります。（lambdaプロキシ統合用）
![キャプチャ.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350277/c0601345-4ea6-988e-3c12-4de93e09f079.jpeg)

##テストについて
使用可能であれば、POSTMANが便利です。
※IAM認証の設定もさくっとできます。
https://aws.amazon.com/jp/premiumsupport/knowledge-center/iam-authentication-api-gateway/
kintoneカスタマイズで特定のフィールドを非活性化する

```javascript
event.record.フィールドコード.disabled = true;
```

kintone フィールド 非活性化で検索したら一発でひっかからなくて悔しかったです。（所感）

参考記事
[kintoneで実施する入力制限、フィールドの無効化とその活用][名前]
[名前]:https://www.gotop.co.jp/kintonesi20210805/
[フィールドの入力不可をラジオボタンとチェックボックスで完全制御！](https://developer.cybozu.io/hc/ja/articles/200306919)
こちらはタイトル無しのリンクになります。
[HTML]画像挿入

 画像挿入
   ・HTMlでの画像挿入にはimgタグ。src属性, alt属性, title属性
   1 src（画像の指定）
    ・画像や文章など、表示したいファイルの出どころを指定。指定する際は絶対パス、相対パスのどちらでも可能。
    相対パスの場合googleじゃ、実行するHTMLファイルの格納位置で変わるので注意。
  ２ alt（画像の説明文を記載）
    ・Googleの検索エンジンはこの属性で何の画像かを判断する。画像が表示されなかった時にもこの属性が表示される。title属性よりも詳細な内容を表示する。
  3 title(タイトルを設定する)
    ・画像やリンク先のタイトルを表示する。マウスカーソルを画像に合わせると吹き出し形式で表示される。
  ４ width, height（画像幅、画像の高さを指定）
    ・大きさを変更しない場合でもサイズ指定を行う


「画像の上に文字を重ねる方法」
１ 画像表示
２ 文字を表示する
３ 画像の上に文字を重ねる
  「position: relative」と「position: absolute」を使用する。
Next.jsでMaterialUIが使えない時の対策

Next.jsでMaterialUIが使えない時の対策です。


##現象
MaterialUI公式の、ボタンを表示するソースコードをコピペしてもエラーが出る。

##環境
・Next.js
・Mac OS Big Sur ver11.6
・Docker Desktop4.1.0
・npm install @mui/material コマンドでインストール済み

##エラー内容：

エラー内容：Module not found: Can't resolve '@emotion/react'


![スクリーンショット 2021-10-07 14.36.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1942691/8f05d554-93e9-8073-bd16-60b3372bac83.png)



@emotion/reactをインストールをしても、
今度は@emotion/styledのエラーが出ます。

エラー内容：Module not found: Can't resolve '@emotion/styled'

![スクリーンショット 2021-10-07 14.45.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1942691/85f4b4d4-9482-734b-6144-02ff66f9cb68.png)




##ソースコード（テスト用）
```javascript
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
// add MaterialUI
import * as React from 'react';
import ReactDOM from 'react-dom';
import Button from '@mui/material/Button';

export default function Home() {
  return (
        <Button variant="contained">Hello World</Button>
  )
}
```

##対策

@emotion/reactと@emotion/styledをインストールし、Dockerをbuild後、再起動します。


インストールコマンド
yarn add @emotion/react @emotion/styled

##参考

npm公式
https://www.npmjs.com/package/@emotion/styled

Material UI公式
https://mui.com/getting-started/usage/
Pulumiのマジック関数でLambdaを構成する

Pulumiはプログラマーにとって慣れ親しんだ言語でインフラを構成できるモダンなIaCツールです。

小規模なプロジェクトで１人で何役もやっている人にとっては生産性が高いかもしれません。

イケてると思ったポイントや、ググってもサクッと分からなかった様な話を記事にしていきます。

# 前提条件

* Pulumi及びAWSの[設定](https://www.pulumi.com/docs/get-started/aws/)が完了している

# マジック関数 (Lambda Magic Fucntion)


簡単な処理を記載するのであれば、このようにインラインのコードとして含めることで、コード量も少なく、手間が省けますね。以下はTypeScriptでの例です。S3のオブジェクト作成をトリガーとしたLambda関数の記述例です。

```javascript
import * as aws from "@pulumi/aws";

// バケット作成
const docsBucket = new aws.s3.Bucket("docs");

// Lambdaのハンドラー関数をS3のバケットのonObjectCreateをトリガーとして紐付ける
docsBucket.onObjectCreated("docsHandler", new aws.lambda.CallbackFunction("docsHandler", {
    // ここにプロパティを書く
    memorySize: 256 /*MB*/,
    callback: (event: any, context: aws.lambda.Context) => {
        // ここにハンドラーを書く
        console.log('hello world');
    },
});
```

## ハンドラーのコードを別ファイルとしてモジュール化したい場合

```javascript
import * as aws from "@pulumi/aws";

import myHandler from "./myHandler";

// バケット作成
const docsBucket = new aws.s3.Bucket("docs");

// Lambdaのハンドラー関数をS3のバケットのonObjectCreateをトリガーとして紐付ける
docsBucket.onObjectCreated("docsHandler", new aws.lambda.CallbackFunction("docsHandlerFunc", {
    memorySize: 256 /*MB*/,
    callback: (event: any, context: aws.lambda.Context) => {
        // 呼び出し
        myHandler(event, context);
    },
});
```

myHandler.ts

```javascript
import * as aws from "@pulumi/aws";

//　ハンドラー
export function myHandler(
  event: any,
  context: aws.lambda.Context
) {
  // 処理内容
  console.log("hello");
}
export default myHandler;
```

# 参考

* https://www.pulumi.com/docs/guides/crosswalk/aws/lambda/
railsのconstraintsを使って、ルーティングを制限する

おはようございます！
朝から警察の方に職務質問を受けてしまった、プレイライフの熊崎です。

そんな怪しさ全開の雰囲気が出ていた僕ですが、引き続きアウトプットを行なっていきたいと思います。

## constraintsとは？

> :constraintsオプションを使って、動的セグメントのURLフォーマットを特定の形式に制限できます。
ref: https://railsguides.jp/routing.html#セグメントを制限する


→ ルーティングに制限を設定するオプション。constraintsの和訳が制約なので、そのまんま。

## 制限の仕方

```routes.rb
get '/articles/:id' , to: 'articles#show', constraints: { id: /[A-Z]\d{5}/ }
# match => /articles/A11111, not_match => /articles/111
```

また、リクエスト内容に応じて制限を加えることができる。
ref: https://railsguides.jp/routing.html#リクエスト内容に応じて制限を加える

```routes.rb
get '/articles/:id' , to: 'articles#show', constraints: { port: 3000 }
# ポート番号が3000以外の場合、マッチしない。
```

また、以下のようにmatchesメソッドを使用して制限を加えることができる。

```routes.rb
get '/articles/:id' , to: 'articles#show', constraints: ArticleIdRestrict.new

class ArticleIdRestrict
  def matches?(request)
    # URLの後ろについているidが、記事テーブルのidの中に含まれているか？
    Article.pluck(:id).include?(request[:id])
  end
end
```

## どんな時に使用するのか？
→ ルーティングを制限したいとき。

例： 記事を、ジャンルで絞り込みを行う際。

genresテーブル

| id | name |
|:-:|:-:|
| 1  | SQL  |
|  2 |  Rails |


```routes.rb
get '/articles/:genre_name', to: 'articles#index', constraints: ArticleGenreRestrict.new

class ArticleGenreRestrict
  def matches?(request)
    # ジャンル名がSQLかRailsの場合のみマッチする。
    Genre.pluck(:name).include?(request[:genre_name])
  end
end
```

## メリット
- コントローラー側で、クエリパラメータが正しいかどうかを判断する必要がなくなる。

## 注意点
- 以下のように書くと、指定したルーティングが無効になる。

```routes.rb
resources :articles, only: %i[index]
get '/articles/:genre_name', to: 'articles#index', constraints: ArticleGenreRestrict.new

class ArticleGenreRestrict
  def matches?(request)
    # ジャンル名がSQLかRailsの場合のみマッチする。
    Genre.pluck(:name).include?(request[:genre_name])
  end
end
```
#### 理由

> Railsのルーティングは、ルーティングファイルの「上からの記載順に」マッチします。このため、たとえばresources :photosというルーティングがget 'photos/poll'よりも前の行にあれば、resources行のshowアクションがget行の記述よりも優先されますので、get行のルーティングは有効になりません。これを修正するには、get行をresources行 よりも上 の行に移動してください。これにより、get行がマッチするようになります。
ref: https://railsguides.jp/routing.html#crud、動詞、アクション

## 参考記事

[https://railsguides.jp/routing.html#セグメントを制限する](https://railsguides.jp/routing.html#セグメントを制限する)

[https://railsguides.jp/routing.html#リクエスト内容に応じて制限を加える](https://railsguides.jp/routing.html#リクエスト内容に応じて制限を加える)

[https://railsguides.jp/routing.html#crud、動詞、アクション](https://railsguides.jp/routing.html#crud、動詞、アクション)

## 最後に
ルーティング周りでこんな機能があるとは思わなかった。
まだまだ知らない機能がいっぱいあるので、１つ１つ覚えていく必要があると感じた。
Pulumi でARNを参照したい

Pulumiはプログラマーにとって慣れ親しんだ言語でインフラを構成できるモダンなIaCツールです。

小規模なプロジェクトで１人で何役もやっている人にとって、生産性が高いかもしれません。

イケてると思ったポイントや、ググってもサクッと分からなかった様な話を記事にしていきます。

# 前提条件

* Pulumi及びAWSの[設定](https://www.pulumi.com/docs/get-started/aws/)が完了している

# ARNを参照するコード

あるリソースのプロパティを元に、別のリソースのプロパティを設定したいケースが度々あります。
うまく動いたケース、うまく動かなかったケース、どのように修正したかを紹介します。

## うまく動いたケース例

```javascript


const policy = new aws.iam.Policy(`PolicyName`, {
  description: "{省略}",
  policy: `{省略}`,
});

const policyAttachment = new aws.iam.RolePolicyAttachment(
  `SomeRolePolicyAttachmentName`,
  {
    role: lambdaRole.name,
    policyArn: policy.arn,  // <----------上で作成したPolicyのARNを直接指定している
  }
);
```

この場合、policyArnプロパティに対して直接arnを指定しています。

このとき、policyArn の型は `pulumi.Input<string>` で、policy.arnの型は `pulumi.Output<string>`です。

### うまく動かなかったケース例

```javascript

const queue = new aws.sqs.Queue(`SomeQueueName`, {
  fifoQueue: true,
  redrivePolicy: JSON.stringify({
      deadLetterTargetArn: deadLetterQueue.arn, // <----------オブジェクトの値として指定している
      maxReceiveCount: 10,
    })
});
```

これだと、deadLetterQueue.arn をうまく解決してくれません。
このとき、deadLetterTargetArnは `pulumi.Input<string>` 型ではありません。

以下が修正

```javascript

const queue = new aws.sqs.Queue(`QueueExample`, {
  fifoQueue: true,
  redrivePolicy: deadLetterQueue.arn.apply((arn) =>
    JSON.stringify({
      deadLetterTargetArn: arn,
      maxReceiveCount: 4,
    })
  ),
});
```

apply関数を適用することで、値が解決され、このケースでもうまく動くようになります。

`pulumi.Output<T>` 型 に関しては、インフラのプロビジョンが完了するまでその値が決定しない為、Promiseと似た非同期処理の形を取るようです。Apply関数を利用することで値が解決され、実際の値を取得可能です。

ドキュメントを見た限りでは、リソースのプロパティで `pulumi.Input<T>` の型に対しては、`pulumi.Output<T>` を直接指定しても、Pulumiが内部的に解決してくれるようです。


# 参考

* https://www.pulumi.com/docs/intro/concepts/inputs-outputs/
jQueryで$(window).on (‘load’)関数が動作しない時の対処

###現象
jQueryで $(window).on('load scroll', function () {
console.log('check');
});を機能させたい。
検証ツールに貼り付けてみたが、認識されなかった。

###試したこと
他のページで検証したら正常に発火したため、自分のページのみで生じている問題だと判断しました。

###解決方法
シングルページアプリケーションを導入するため、body直下に以下のスタイルを適用していました。
どうやら、このoverflow:autoが悪さをしているようで、削除すれば解決しました。

```
body > div{
overflow:auto;
scroll-snap-type:y mandatory;
height:100vh;}
```
中間テーブルに複合ユニーク制約をつける理由

おはようございます。プレイライフの熊崎です。
今回はマッピングテーブルにユニーク制約をつける理由について、記事を書いていきたいと思います。（よく考えてみたら当たり前のことなんですが、パッとイメージがつかなかったため、まとめることにしました。）

## 中間テーブルとは？

> 連想エンティティ (英: associative entity) は関係モデル理論や実体関連モデル理論で使用される用語である。リレーショナルデータベースでは、多対多の関係を解決するために、基本関係（または基本テーブル）を実装する必要がある。この種のエンティティを表す基本関係は、非公式に連想テーブルと呼ばれる。 上記のように、連想エンティティは、連想テーブルを使用してデータベース構造に実装される。連想テーブルは、同じデータベース内の同じまたは異なるデータベーステーブルからの列への参照を含むことができるテーブルである。
ref: https://ja.wikipedia.org/wiki/%E9%80%A3%E6%83%B3%E3%82%A8%E3%83%B3%E3%83%86%E3%82%A3%E3%83%86%E3%82%A3

→ 多対多の関係を解決するためのテーブル

例： 記事テーブル（articles）とタグテーブル(tags)
→ １つの記事には複数のタグが紐づく。１つのタグには複数の記事が紐づく。（多対多の関係）

#### articlesテーブル

| id | title |
|:-:|:-:|
|  1 | Railsで内部結合を行う方法  |
|  2 |  中間テーブルとは？ |
|  3 |  railsとNext.jsで、アプリケーションを作ってみた。 |

#### tagsテーブル

| id | name |
|:-:|:-:|
| 1  | Rails  |
|  2 | Next.js  |
|  3 |  SQL |

### 中間テーブルを使用しない場合

#### articlesテーブル

| id | title | first_tag | second_tag |
|:-:|:-:|:-:|:-:|
|  1 | Railsで内部結合を行う方法  |  1 |  3 |
|   2|  中間テーブルとは？ |  3 |   |
|   3|  railsとNext.jsで、アプリケーションを作ってみた。 | 1  |  2 |

#### tagsテーブル

| id | name |
|:-:|:-:|
| 1  | Rails  |
|  2 | Next.js  |
|  3 |  SQL |

##### 問題点
- １つの記事に紐付けるタグの数を増やしたいときにカラムを増やさなければいけない。 = 変更に強くない。

### 中間テーブルを使用した場合

#### articlesテーブル

| id | title |
|:-:|:-:|
|  1 | Railsで内部結合を行う方法  |
|  2 |  中間テーブルとは？ |
|  3 |  railsとNext.jsで、アプリケーションを作ってみた。 |

#### tagsテーブル

| id | name |
|:-:|:-:|
| 1  | Rails  |
|  2 | Next.js  |
|  3 |  SQL |

#### articles_tagsテーブル（中間テーブル）

| id | article_id | tag_id |
|:-:|:-:|:-:|
|  1 | 1  | 1  |
|   2|  1 |  3 |
|   3|  2 |  3 |
|   4|  3 |  1 |
|   5|  3 |  2 |

以上のように中間テーブルを用意することによって、記事に付けたいタグの上限数が変わるたびに、わざわざ１つの記事にタグのカラムを追加しなくても良くなる。これが中間テーブルを用意するメリット。

## 複合ユニーク制約とは？

> UNIQUE 制約を単独のカラムだけではなく複数のカラムの組み合わせに UNIQUE 制約を設定することも可能です。次の書式を使用します。
例えば2つのカラムを対象に UNIQUE 制約を設定すると、それぞれのカラムの値は重複しても構いませんが2つのカラムの値の組み合わせと同じ組み合わせの値を格納しようとするとエラーとなります。
ref: https://www.dbonline.jp/sqlite/table/index11.html#section2

## 中間テーブルに複合ユニーク制約をつける理由

#### 例：articles_tagsテーブル（中間テーブル）

article_idとtag_idの組み合わせに対してユニーク制約をつけない場合

| id | article_id | tag_id |
|:-:|:-:|:-:|
|  1 | 1  | 1  |
|   2|  1 |  3 |
|   3|  2 |  3 |
|   4|  3 |  1 |
|   5|  3 |  2 |
|   6|  1 |  1 |

id:1とid：６の組み合わせが重複してる。
この場合だと、viewでタグを表示したいとき、同じ名前のタグが２つできてしまう。。。

なので、ユニーク制約を適用して、データの整合性を保つ必要がある。

## まとめ
- 中間テーブルは多対多のモデルを関連づける時に使用される。
- 複合ユニーク制約は複数のカラムの組み合わせにユニーク制約を設定すること。
- データの整合性を保つために、中間テーブルには複合ユニーク制約をつける必要がある。

## 参考記事

https://ja.wikipedia.org/wiki/%E9%80%A3%E6%83%B3%E3%82%A8%E3%83%B3%E3%83%86%E3%82%A3%E3%83%86%E3%82%A3

https://www.dbonline.jp/sqlite/table/index11.html#section2
人それぞれMVC

こんにちは！
今日はMVCのおさらいについて他の方の記事を参考にして、自分の頭に落とし込んだ知識を自分の言葉でアウトプットしていきたいと思います。

Ruby on Railsでオリジナルアプリケーションを作成しましたが、MVCって何？？って聞かれて言語化できないような気がしたので記事にしてみました。

# フレームワークとは

プログラミング手法の１種であるMVCは、多くのフレームワークで採用されております。
そもそもフレームワークって何ですかって聞かれると言語化できないので、そこからアウトプットします。
フレームワークはWebアプリケーションの作成を容易にしてくれる仕組みです。
Webアプリケーションにおいて、必要となる作業やリソースがすでに標準装備
されてあるものと考えればいいでしょう。
RubyだとRuby on Rails、PHPはLaravelといったところでしょうか。

# MVCそれぞれ

フレームワークにはwebアプリケーション作成を容易にしてくれるMVCという機能が標準装備されております。MVCのおかげでWebアプリケーション作成の際に必要な機能の処理の一部を分類し分けることで、保守性や可読性の高いコードを維持することができます。

MVCはそれぞれ
「M」はModel、
「V」はView、
「C」はController
の略となります。

それぞれ見ていきましょう！

## Model
Webアプリケーションにおけるビジネスロジックを定義します。
いきなりビジネスロジックとかわかりません。
簡単に言うと「データベースとやりとり行う」部分です。

ECサイトにおける購入リクエストに対して、商品が購入可能かどうかをチェックするというデータの整合性の確認や、日時の取得の際にユーザーが見やすいようデータを加工（日時変換）したりします。

これらをModelに定義しておくことでデータベースにあるテーブルを
フレームワークで管理できるようになります。
## View
Webアプリケーションにおける実際にクライアント側に表示される見た目
の部分です。

## Controller
クライアント側からリクエストに対する処理をまとめて用意し、
クライアントにレスポンスを返します。
また、レスポンスに必要なデータがあればModelを介して
データベースからデータを持ってきます。
あくまでデータの用意がControllerの仕事なので、
データの加工などビジネスロジックはControllerには
記述しません。


# MVCは考え方
Ruby on Railsを用いたオリジナルアプリケーションを作成した際に、文字数制限をModelに記述しました。文字数制限はviewに記述したよって方もおられました。不正なデータをviewで査定して、以降の処理を行わせないためらしい。これは僕の予想ですが、データベースへのアクセスが減るから、負荷もかからないとかそんな理由もあるのかな？
MVCは個人、チーム、作成したいWebアプリケーションによって考え方が異なってくるのだなあと思い、やっぱりプログラミングは面白いですね。
【JavaScript】変数と参照の振り返り②　暗黙的な型変換


#はじめに

Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。

前回の記事

https://qiita.com/nao0725/items/7ffcb3459da7df896b8e

#目的

* 変数についての理解を深める


#本題
###1.暗黙的な型変換

暗黙的な型変換とは**変数が呼ばれた状況によって変数の型が自動的に変換されること**です。

例："1" => 1（文字列から数値に変換）

javascriptはJavaのようにデータ型の宣言をしない。
→動的型付け言語

上記をVSコードで確認していく

````javascript
// データ型を調べる関数を用意
function printTypeAndValue(val){
  // typeofメソッド（？）を入れるとデータ型がわかる
  console.log(typeof val, val)
}

// 変数を定義
let a = 0;
// number 0と出力される
printTypeAndValue(a);

// 文字列　＋　数値
let b = "1" + a;
// この場合Stringの型で出力
// データ型が違う場合はどちらかのデータ型が出力される
printTypeAndValue(b);

// 数値　ー　文字列
let c = 15 - b;
// -は数値の計算にしか使われない！なので、15-10で5が出力
printTypeAndValue(c);

// nullとは参照を保持しない＝空ということ
let d = c - null
// nullが暗黙的に0に変換される 5がそのまま保持
printTypeAndValue(d);

// tureは数値の計算で使用された場合は０扱いになる
let e = d - true
// 数値の４が出力 
printTypeAndValue(e);

// 明示的に型変換をする
// 文字列を数値へ
// parseInt（文字列）で数値に変換
let g = parseInt("1") + a;
// number 1 と出力される
printTypeAndValue(g);
`````

Udemyのサーバー落ちたので、
今日はここまで！

#参考にさせて頂いた記事

* [【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)
エレキ素人が何か考える（その２：リレー）

# Grove Relay（リレー）を試す
今回はリレーを試すことにした。用いたのは、[Grove Relay](https://wiki.seeedstudio.com/Grove-Relay/)。購入先はいつもの[スイッチサイエンスさん](https://www.switch-science.com/catalog/807/)。

## よくあるケース
リレーのアウトプット側で、マイコン以上の能力を駆動するのが通常。たとえば、マイコンから100Vの電源のオンオフを行うなど。

## ここでは
手持ちのパーツの中で、いい例が思いつかず（新たに購入せずに）、M5Stackに接続されたリレーでLEDオンオフの制御を行った。

### 配置
![Relay_ブレッドボード.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634816/1073987b-363b-dc97-6a9f-b148df94c352.png)

なお、ここで利用したfritzingのパーツは次のところで見つかる。
- [M5Stack](https://github.com/lukasmaximus89/M5Stack-Fritzing)
- [Grove Relay](https://github.com/GabrielNotman/SODAQ_Fritzing/tree/master/Fritzing%20Parts)

### リレーの回路図
どこかにあった（場所失念）。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634816/8d68e3de-5ac0-f60c-c192-d3439817e493.png", width=110%>

### M5Stackのピン
[こちらの情報](https://github.com/m5stack/m5-docs/blob/master/docs/ja/api/gpio.md)と上記回路図から、Groveコネクタの信号線は、M5Stackのピン22に接続されている。

### ソースコード
```c++
#define SIG 22

void setup() {
  pinMode(SIG, OUTPUT);
  digitalWrite(SIG, LOW);
}

void loop() {
  delay(200);
  digitalWrite(SIG, HIGH);
  delay(1000);
  digitalWrite(SIG, LOW);
}
```

定期的に22ピンをHigh/Low繰り返すのみ。

### 状況
![IMG_20210523_094151.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634816/697068ca-0b75-a9e6-1649-6b8e4a683c92.jpeg)

あまり、エレキっぽくなかったが、回路図がでてきたので、無理やり「その２」。
【Flutter】RRectでgradationalなButtonの実装

## 背景

デザイナーさんに
「角っこが丸く、グラデーションがかかったボタンが欲しいな」
と言われた。

ElevatedButtonは角っこが丸くなっている。
Containerはグラデーションできる。

でも、上記2つの組合せは出来なかった。

だけど、デザイナーの意向を汲んでボタンを実装する必要が僕にはあった。

## やりたかったこと

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42790/ea42be02-a1d6-762e-386d-74062d85885a.png)

## 実装

```dart
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: const [
              Button1(),
              SizedBox(height: 20),
              Button2(),
            ],
          ),
        ),
      ),
    );
  }
}

class Button1 extends StatelessWidget {
  const Button1({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        onTap: () {/* action */},
        child: ClipRRect(
            borderRadius: BorderRadius.circular(20.0),
            child: Container(
                height: 100,
                width: 100,
                decoration: const BoxDecoration(
                  gradient: LinearGradient(
                      begin: FractionalOffset.topLeft,
                      end: FractionalOffset.bottomRight,
                      // colorsとstopsの項目数を合わせましょう
                      colors: [
                        Colors.deepOrangeAccent,
                        Colors.orangeAccent,
                        Colors.amberAccent,
                        Colors.black
                      ],
                      // 右下隅っこに黒をクッキリと
                      stops: [
                        0.1,
                        0.5,
                        0.9,
                        0.9
                      ]),
                ),
                child: const Center(child: Icon(Icons.favorite, size: 40)))));
  }
}

class Button2 extends StatelessWidget {
  const Button2({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        onTap: () {/* action */},
        child: ClipRRect(
            borderRadius: BorderRadius.circular(100.0),
            child: Container(
                height: 200,
                width: 90,
                decoration: const BoxDecoration(
                  gradient: LinearGradient(
                      begin: FractionalOffset.topCenter,
                      end: FractionalOffset.bottomCenter,
                      colors: [Colors.tealAccent, Colors.lightBlueAccent],
                      stops: [0.1, 0.9]),
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: const [
                    Icon(Icons.psychology, size: 40),
                    Text("考えるのをやめた", style: TextStyle(fontSize: 20)),
                  ],
                ))));
  }
}
```

ElevatedButtonを使わないで実現する方法しかわからなかったよ。。。

以上
window.scrollTo(0,0)が効かなくなった時の対処法

###現象
作成したWebページでwindow.scrollTo(0,0)が効かなくなった

###試したこと
他のページで検証したらwindow.scrollTo(0,0)は機能したため、自分のページのみで生じている問題だと判断しました。

###解決方法
こちらのサイト様を参考に改善できました。
https://qiita.com/tkengo/items/ee758c75ba874757b7fd

僕もbody直下に
overflow:auto
を付与していたため、これをコメントアウトすることで機能しました。
2021年ハクトーバーフェストが始まっている

## Hacktoberfest '21

https://hacktoberfest.digitalocean.com/


<iframe width="852" height="480" src="https://www.youtube.com/embed/N7mCkGjX6vk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


### 日本語解説

https://qiita.com/rana_kualu/items/27fe7b6b6e31599da2cf

https://qiita.com/nishina555/items/c9bf190c14226b63b973

### DEV.TOの記事

[Hacktoberfest 2021 is Here 🎃 - DEV Community 👩‍💻👨‍💻](https://dev.to/devteam/hacktoberfest-2021-is-here-4a3l)

> Let's talk about how you can participate in Hacktoberfest 2021…


### ルールは、`Make 4 Hacktoberfest Pull Requests`

https://github.com/topics/hacktoberfest


### なので、Contributeしてみた

ネコチャンのgifを追加しただけですが...

https://christianecg.github.io/TheBestCatPage/

なるほどうれしい。

https://github.com/ChristianECG/TheBestCatPage/pull/12



### これは2020年の話

https://twitter.com/Reputeless/status/1311626381973889027?s=20

FizzBuzz的コードをやたら上げているだけのプロジェクトが跋扈しているような気はしなくもない。


https://github.blog/2021-10-07-githubs-guide-hacktoberfest-2021/

> Don’t make them look at a pull request that’s only adding unnecessary punctuation somewhere
> どこかに不必要な句読点を追加しただけのプルリクエストを見させてはいけない


ということで趣旨を理解しつつOSSに親しむ意味で楽しめたら良さそう。以上です。
球面調和関数の値をPython3/matplotlibで３D表示する

２次元の調和関数の値を、r=1の円週上で均等にスキャンして合計するとゼロになるらしい。
３次元の調和関数の値を、r=1の球面上で均等にスキャンして合計するとゼロになるか、Pythonで試してみた。
その前に、値を３次元でmatplotlibを使い、赤青の濃淡で表示させてみた。

３次元調和関数

```math
{{\displaystyle {\partial ^{2} \over \partial x^{2}}\phi (x,y,z)+{\partial ^{2} \over \partial y^{2}}\phi (x,y,z)+{\partial ^{2} \over \partial z^{2}}\phi (x,y,z)=0.}
}
```

これを満たす式で、一番簡単なのをネットで見つける。

```math
f(x,y,z) = xyz
```

この式の値を　r=1　の球面上のサンプル点で値を取り、色付けをしてスキャター表示する。
まずは、球面上の点を均等にサンプリングする方法を考える。
普通に、緯度、経度で分割すると極部付近での点が多くなるので、緯線の長さに応じて点の数を調整している。

![Screen Shot 2021-10-12 at 4.24.09 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204041/c5cd1a35-5e88-9a8b-96b8-449f3ae7c577.png)

濃い赤が大きなプラス、濃い青が大きなマイナスを示しており、球面全体の平均を取るとゼロになりそうな配置である。
Python3で、実際に合計値を取るとゼロでした。
Python3でプログラムを実行してもらうと、スクロールして見れます。真ん中の白い部分は、極です。

プログラムは、こちら

```harmony.py
import math
from mpl_toolkits import mplot3d
import numpy as np
import matplotlib.pyplot as plt
from matplotlib import cm

#この式を、入れ替える
def f(x,y,z): 
  return x*y*z

fig = plt.figure()
ax = plt.axes(projection='3d')

c = 0
N = 50
zdata = np.linspace(0,0,2*N*N)
xdata = np.linspace(0,0,2*N*N)
ydata = np.linspace(0,0,2*N*N)
udata = np.linspace(0,0,2*N*N)

for j in range(0,N): #緯度のループ
  ps = math.pi*(j+0.5)/N
  w = int(N*math.sin(ps))
  for i in range(-1*w,w): #経度のループ
    th = math.pi*(i+0.5)/w
    # 極座標からxyz座標へ変換
    z = math.cos(ps)
    x = math.sin(ps)*math.cos(th)
    y = math.sin(ps)*math.sin(th)
    # ドット表示用データを記録
    xdata[c] = x
    ydata[c] = y
    zdata[c] = z
    u = f(x,y,z) 
    udata[c] = u #uが調和関数の値
    c = c + 1

# 3D スキャター表示
ax.set_aspect('equal')
ax.scatter3D(xdata, ydata, zdata, c=udata, cmap=cm.coolwarm);
plt.show()
```

関数f()を、いろいろ変えると、きれいな調和関数を３D表示できるので、次回。
プログラミング学習Day3（変数・演算子、条件分岐、文字列変換）

#　変数、演算子
- 変数　1文字以上の名前を持っていて値が変わるもの
- プログラムは上から下に実行される
- プログラミングは英語でエラーが表示されるのでなんとなく英語でエラーの意味が分かるように。例えばEOL=End Of Line（最後の行）
- 比較演算子
    - >　　より大きい
    - <　　より小さい
    - >=　　以上
    - =<　　以下
    - ==　　等値
    - !=　　非等値
- 論理演算子
    - and　左右の条件がTrueであればTrueになる
    - or　　左右の条件のどちらかがTrueであればTruenになる
    - not　True,Falseのを逆にする
- ちっちゃすぎす少数は無視？
論理演算子　==　で下記の事を発見しました。

```python
a = 1
b = 1.000000000000001
c = 1.0000000000000001
d = 1.0000000000000011
e = 1.0000000000000002

print(a == b)
print(a == c)
print(b == d)
print(a == e)

```

実行結果

```python
False   #わかる
True    #あ、少数第16位以下は無視されるのか？
True    #うん、やっぱり少数第16位以下は無視されるんだな
False   #いや、少数第16位以下でも2やったら無視されへんのかい
```

このへん、なんか奥が深そうなのでそっとしておきます。


    
# 条件分岐
- if 条件式:を使うと条件式に当てはまるものだけその後のアクションを実行できる。例えばaという変数があって、aが10の時だけOKと出力したい場合
 
```python
a = 10
if a == 10:
    print("OK")
```
出力結果は下記の通り
a = 10　の時

```python
OK
```

a = 1　の時

```python

```
なにも出力されません。

何も出力されないのが不安だという場合。条件に当てはまらないときの実行をelseを使って指示することも出来ます。
aが10の場合はOK, aが10 でない場合はNGと出すなら下記のように書けます。elseを付けてあげるとifに当てはまらない場合の実行結果を指示できます。

```python
a = 10
if a == 10:
    print("OK")
else:
    print("NG")
```

aが10の場合

```
OK
```

aが10以外の場合

```
NG
```

その他にも条件を複数設定した場合はelifというものもある。


# 文字列操作
-  文字をつなげる　+
-  文字列を探す　find
-  文字列を大文字にするupper
-  文字列を小文字にするlower
-  文字列を変換するreplace

以下使用例

```python
str = "I am happy." #例文
print(str + str) #文字列を繋げる
print(str.upper()) #全部大文字に変換
print(str.lower()) #全部小文字に変換
print(str.replace("I am", "You are")) #文字列を置き換え
```

出力結果

```python
I am happy.I am happy. #strの中身が繋げられて繰り返し表示される
I AM HAPPY. #全部大文字になっている
i am happy. #全部小文字になっている
You are happy. #"I am"が"You are"に変化されている
```

疑問
下記の書き方では出力は元の文字列のままになってしまう

```python
str = "Happy"
str.upper()
print(str)
```

出力結果

```python
Happy
```

2行目の大文字変換の関数が3行目のプリント関数に影響しないということだと思うがなぜこんな仕様なのだろうか。もっと勉強していけばわかるのだろうか。。。
RSpec の create_new_auth_tokenについて

# RSpecとは
Rubyでwebアプリを開発する時にテストで使うフレームワークです。
実務ではコードレビューはRspecでテストを実装してちゃんと想定通りの動きを
するのかを検証します。


# create_new_auth_tokenとは
これは```新しい認証トークンを作成する```ものです。
認証トークンとはログインや新規登録をする時などに
正しいuserかを認証するためのものです。

⚫︎補足
```authとは認証```のことです。
新規登録やログイン、ログアウトの機能を実装するときに使ったりします。

公式ドキュメントの日本語訳です。
https://sainu.hatenablog.jp/entry/2018/08/11/194319

# 使い方
例えばログアウトのテストを書くときに使いました。
userではなくstaffが使うものとします。

```registrations_spec.rb

describe "DElETE /api/v1/auth/sign_out" do
    subject { delete(destroy_api_v1_staff_session_path, headers: headers) }

    context "ログアウトする時" 
      let(:staff_id) { staff.id }
      let(:staff) { create(:staff) }
      let(:headers) { staff.create_new_auth_token }  #認証トークンを作成
      it "ログアウトする" do
        subject
        res = JSON.parse(response.body)
        expect(res["success"]).to be_truthy
        expect(response).to have_http_status(:ok)
      end
    end
  end

```



これでテストを通すことができました。
create_new_auth_tokenはlet(:headers)などで
headerの情報を返したいと時などに使ったりしました。
staffを定義してstaffのレコードを作成して、
headersのstaffの新しい認証トークンを作成する流れです。
(contextとitの間)




⚫︎補足
headersとはアプリを操作する時などに、
ユーザーの認証情報を送るものです。
postmanなどで確認する時もheaderを確認することができます。




⚫︎参考資料
https://github.com/lynndylanhurley/devise_token_auth/blob/master/docs/usage/model_concerns.md
https://qiita.com/1078sa08002/items/c15224f796525320cc80
[小ネタ]C++で簡単なID生成器を作った

# はじめに

ゲームとか作ってると雑にIDを割り振りたくなる場面があったりしますよね。
(なんかオブジェ生成するたびにIdをインクリメントして設定したりしてました)

ただ、雑にインクリメントするだけだと、使い終わったIdを再利用したりできず、インクリメントしつづけていつかオーバーフローするんじゃないかといった恐怖があったので、

使用しなくなったIDを再利用もできるような、簡単なID生成器を作りました。

----

**追記**
コメントいただいたのですが、そもそも64bit整数で管理する分には非現実レベルに長時間動かし続けない限りオーバフローすることはなさそうでした。
ようやくオーバフローした頃には、既に自分も墓の中にいるので大丈夫そうですね！

# 実装

いたってシンプルです。

```cpp:IdGenerator.hpp
#include <cstdint>
#include <queue>
#include <limits>
#include <exception>

/// <summary>
/// Id生成器
/// </summary>
class IdGenerator
{
public:
    using value_type = std::int64_t;
public:
    /// <summary>
    /// Idの生成
    /// </summary>
    /// <returns></returns>
    value_type createId()
    {
        if (!m_freeIds.empty()) {
            auto id = m_freeIds.front();
            m_freeIds.pop();
            return id;
        }
        if (m_nextId == std::numeric_limits<value_type>::max()) [[unlikely]] {
            throw std::runtime_error("can't be generated Id by max limit.");
            
            // Fail Safeでもよい
        }
        return m_nextId++;
    }        

    /// <summary>
    /// Idの開放
    /// </summary>
    /// <param name="id"></param>
    void releaseId(value_type id)
    {
        m_freeIds.push(id);
    }        

    /// <summary>
    /// リセット
    /// </summary>
    void reset()
    {
        m_nextId = 0;

        // queue clear
        std::queue<value_type> empty;
        m_freeIds.swap(empty);
    }        
private:
    value_type m_nextId = 0;
    std::queue<value_type> m_freeIds;
};
```

基本はインクリメントしていく、使い終わったIDは`releaseId`メソッドに渡すことで
キューにため込んでおき、キューが空じゃない時はそこからポップしてIdを返すようにしています。

⚠️未生成なIdをリリースしたらバグりますが、いちいちvalidationするのもコストなのでその辺はやってないです。

# 使い方

```cpp
    IdGenerator idGen;
    
    // ID生成
    auto id_0 = idGen.createId(); // 0
    
    // ID生成
    auto id_1 = idGen.createId(); // 1
    
    // ID 0 使い終わった
    idGen.releaseId(id_0);
    
    // ID生成 再利用される
    auto new_id_0 = idGen.createId(); // 0

    // ID生成
    auto id_2 = idGen.createId(); // 2
```

# まとめ

今回は小ネタでしたが、簡単に使えるID生成器を紹介しました。
使い終わったIDを再利用してオーバーフローしないように安心感を得ましょう。
プログラム初心者勉強会　1回目　-C# Windowsフォーム入門

※　この記事はニコ生、ツイッチで放送した「プログラム初心者勉強会」の中で学んだ事を書き残したものです。

#1. 次回記事リンク
https://qiita.com/Usyuuu-program-beginner/items/9749cc87c707cedfae6d

#2. やったこと
下のサイトの　1.Geting started　～ 5.イベントまでを学習

http://kaitei.net/csforms/

#3. 配信時の動画
https://youtu.be/ms43PVmseJU?t=720

チャプター情報は動画コメント参照

#4. 開発環境
VisualStudio2017

#5. 注意
参考にしてるサイトは、デザイナ機能を利用しない為「Form1.cs」を削除しています。
私は「Form1.cs」を活用する方法が学びたかったので、完全にこのサイトに即して学んではいないです。ご容赦

#6. 振り返り
* 1章 Getting started

 Windowsフォームを始める際の準備が記載されてました

 配信時は.Net Frameworkはどのカテゴリに分類されるのかを話してましたね（フレームワークでいいのかな？）

* 2章 メッセージボックス　～ 5章 イベント　まで

GUI画面の作成、ボタン等の配置、並びにイベント付与の方法が記載されていました。
やり方はリンク先に全部書いているので省略。

配信中に為になったなと思った事を次からは書きます。
##6.1 Usingディレクティブ　について
ソースコードの先頭で「using ～」と記述しているコードのことです。

各名前空間に定義されたクラスを使用する際、C#では「名前空間.クラス名」と記載する必要があります。
usingディレクティブをファイルの頭で使用することで、名前空間の指定を省略できます。

※　今回よく使ったusingディレクティブ
* using System.Windows.Forms;

ボタン等をWindowsフォームに配置する際に必要なクラスはほとんどこの名前空間で定義されていました。
今後の章でも活用しそう

##6.2 WIndowsフォームのファイル構造について
Windowsフォーム用のプロジェクトを作成すると、"Form1.cs"や"Program.cs"など、いろんなファイルが自動で作成されます。

それぞれの役割は何か、以下サイトに載ってました

https://effect.hatenablog.com/entry/2018/08/07/031313


重要なところを以下抜粋
### 6.2.1各ファイルの説明
>■ bin　‥　コンパイル時に実行ファイルが出力される
■ obj　‥　コンパイル時にコンパイルに必要なファイルが生成される？
■ Properties　‥　リソースファイルなどが含まれる
App.config　‥　アプリケーション設定ファイル
<font color="Red">Form1.cs</font>　‥　フォームの挙動を記述していくC#ファイル
<font color="Red">Form1.Designer.cs</font>　‥　フォームの外観が自動で記述されていく
<font color="Red">Program.cs</font>　‥　メイン関数（Form1.csを生成して実行する記述がある）
test.csproj　‥　プロジェクトの設定ファイル？

赤字にしているのが特に触ることになるファイルです。それぞれの簡単な説明は以下参照

### 6.2.2 Form1.csについて
　「ボタンをおしたときに何をするか」といった「<font color="Red">挙動</font>」を記述する際に編集します。

　今回勉強する際に見ているサイトはこのファイルを削除している為、Program.csに「class Form1 : Form」を追記しています。本来やるべきではない書き方ですね。

### 6.2.3 Program.csについて
　メイン関数のソースコード。Form1()はここから呼び出してます。

### 6.2.4 Form1.Designer.cs
　フォームの外観が自動で記述されていきます。Form1.cs[デザイン]画面でボタンを置いたり、プロパティ設定すると、こちらに内容が反映されます。

##6.3　namespaceのリネームについて
　初回なら、namespace横の名前を右クリックし、「名前の変更」で関連する名前を一括で変更可能

##6.4　class A : Bについて
配信時動画の1:14:15からが分かりやすいかと思います。
Aが実態で、Bは継承元です。Bはusing　～　で書いてる名前空間内のクラスの1つを記載しているはずです。

class Form1 : Form　となっている場合は、Formが継承の役割を果たしています。
Formはusing System.Windows.Forms名前空間の中のFormクラスです。

#7. 配信時に見てたサイト

https://ufcpp.net/study/csharp/oo_inherit.html

#8. 最後に
以上。第1回の勉強会で学んだことの振り返り（参考サイトの内容以外）でした～。
まとめる時間も無くて、かなり汚い乱文になって申し訳ない。

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

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

## Discordリンク
https://discord.gg/7rcqhMGpvA

今後も配信後に簡単に振り返る記事かきますノシ
【HTML】戻るボタンの実装方法

#はじめに
戻るボタンを実装する機会はかなり多いと思うのですが、そのときのための備忘録として残しておきます。

#戻るボタンの実装

##aタグでの実装

```html:HTML
<a href="javascript:history.back();">戻る</a>
```

##buttonタグでの実装

```html:HTML
<button type="button" onclick="history.back()">戻る</button>
```
`type="button"`をちゃんと記述しないと、デフォルトで`type=submit`となってしまうので要注意！！

##formタグでの実装

```html:HTML
<form>
    <input type="button" onclick="history.back()" value="戻る">
</form>
```

#おわりに
すべてHTML内の実装したい箇所に記述すれば良いので簡単ですね。
Github Actionsでgradleキャッシュできてなかったのを直したよ

### 課題

Github Actionsでgradleの依存関係がキャッシュできてなかった。

### 結論

キャッシュの対象パスを修正
```~/.gradle``` -> ```/root/.gradle```

```build.yml
    - name: restore gradle cache
      uses: actions/cache@v2
      with:
        path: |
          /root/.gradle/caches
          /root/.gradle/wrapper
        key: ${{ runner.os }}-gradle-${{ hashFiles('**/*.gradle*', '**/gradle.properties') }}
        restore-keys: ${{ runner.os }}-gradle-
```

### 読まなくていい経緯

kotlin(Ktor)で開発していてある日気付いた。
みんな大好き[actions/cache@v2](https://github.com/actions/cache)のログを見ると

```
/usr/bin/docker exec  b7771335899ab39d1bc44c8b5221cfdebab45035280aaa687d8917fbf5077e12 sh -c "cat /etc/*release | grep ^ID"
Received 45 of 45 (100.0%), 0.0 MBs/sec
Cache Size: ~0 MB (45 B)
/usr/bin/tar -z -xf /__w/_temp/733b17c6-8e14-42c6-ab27-ecaeece6533a/cache.tgz -P -C /__w/myrepo/myrepo
Cache restored successfully
Cache restored from key: Linux-gradle-26c5ed26e1ebe58f9a52ea23e3929153c09a76cf006e85a78796812b1df7b81a
```
あれ、これキャッシュ効いてなくない・・・？45バイトって何・・・
今まで確認してなかったので「ある日突然できなくなった」わけではなく最初からできてなかったのかもしれない。

こんな時は[tmate](https://github.com/marketplace/actions/debugging-with-tmate)でSSHデバッグだー
リナックススゴクワカラナイのでいちいちコマンドを調べながら実行。

```
root@05b6a8359c14:/__w/myrepo/myrepo# ls ~/.gradle
ls: cannot access '/github/home/.gradle': No such file or directory
```
キャッシュ対象のディレクトリがないやんけ。じゃあどこにあるの？

```
root@05b6a8359c14:/__w/myrepo/myrepo# find / -name ".gradle" -type d
find: '/proc/1163/task/1163/net': Invalid argument
find: '/proc/1163/net': Invalid argument
/root/.gradle
/__w/myrepo/myrepo/.gradle
```
そこかー
下二つそれぞれのディレクトリの中を見ると```/root/.gradle```のほうに```caches```を発見。

ということで「結論」に書いた内容で修正して2回実行。（1回目でキャッシュ保存させるため）

```
/usr/bin/docker exec  6d0feb87a8d2361be8be2dd84a988a43b1827c893690f818edc81f36a32135ff sh -c "cat /etc/*release | grep ^ID"
Received 176160768 of 473646535 (37.2%), 168.0 MBs/sec
Received 402653184 of 473646535 (85.0%), 191.9 MBs/sec
Received 473646535 of 473646535 (100.0%), 167.1 MBs/sec
Cache Size: ~452 MB (473646535 B)
/usr/bin/tar -z -xf /__w/_temp/a628ba9d-5267-4c2d-a4ea-4e7fe1446d84/cache.tgz -P -C /__w/myrepo/myrepo
Cache restored successfully
Cache restored from key: Linux-gradle-41ed537c6a2f3fc1176d54174a68732b9d666649a40e13c2b1c25ee53a778e2c
```

キャッシュからリストアできたよー

[公式](https://github.com/actions/cache/blob/main/examples.md#java---gradle)には```~/.gradle```って書いてあるのになんでだ。
AOJトライに関する知識知見の記録共有（Volume0-0036）


# 概要
A Figure on Surface

https://judge.u-aizu.ac.jp/onlinejudge/description.jsp?id=0036

# コード
itertoolsを使用

```
import itertools

def matched(area, ptn):
    #print(area)
    ret = False
    if ptn == 0:
        if len(area) >= 2 and len(area[0]) >= 2 and area[0][0] == "1" and area[0][1] == "1" and area[1][0] == "1" and area[1][1] == "1":
            ret = True
    elif ptn == 1:
        if len(area) >= 4 and len(area[0]) >= 1 and area[0][0] == "1" and area[1][0] == "1" and area[2][0] == "1" and area[3][0] == "1":
            ret = True
    elif ptn == 2:
        if len(area) >= 0 and len(area[0]) >= 4 and area[0][0] == "1" and area[0][1] == "1" and area[0][2] == "1" and area[0][3] == "1":
            ret = True
    elif ptn == 3:
        if len(area) >= 3 and len(area[0]) >= 2 and area[1][0] == "1" and area[2][0] == "1" and area[0][1] == "1" and area[0][2] == "1":
            ret = True
    elif ptn == 4:
        if len(area) >= 2 and len(area[0]) >= 3 and area[0][0] == "1" and area[0][1] == "1" and area[1][1] == "1" and area[1][2] == "1":
            ret = True
    elif ptn == 5:
        if len(area) >= 3 and len(area[0]) >= 2 and area[0][0] == "1" and area[1][0] == "1" and area[1][1] == "1" and area[2][1] == "1":
            ret = True
    elif ptn == 6:
        if len(area) >= 2 and len(area[0]) >= 3 and area[0][1] == "1" and area[1][0] == "1" and area[1][1] == "1" and area[2][1] == "1":
            ret = True
    return ret

def A_Figure_on_Surface(area):
    ret = []
    for x, y, ptn in itertools.product(range(len(area)), range(len(area[0])), range(7+1)):
        if matched([[area[i][j] for j in range(y, len(area[0]))] for i in range(x, len(area))], ptn):
            ret.append([x, y, ptn])
            break
    return ret

def hoge(*args):
    ret = []
    for arg in args:
        print(arg)
        ret.append(A_Figure_on_Surface(arg))
    return ret

print(hoge(
["00000000",
"00000000",
"01100000",
"00110000",
"00000000",
"00000000",
"00000000",
"00000000",
],[
"00011110",
"00000000",
"00000000",
"00000000",
"00000000",
"00000000",
"00000000",
"00000000",],
[
"00000000",
"00000000",
"00110000",
"00110000",
"00000000",
"00000000",
"00000000",
"00000000",]
))
```

# 実行結果
デバッグログ出力部含む

```
['00000000', '00000000', '01100000', '00110000', '00000000', '00000000', '00000000', '00000000']
['00011110', '00000000', '00000000', '00000000', '00000000', '00000000', '00000000', '00000000']
['00000000', '00000000', '00110000', '00110000', '00000000', '00000000', '00000000', '00000000']
[[[2, 1, 4]], [[0, 3, 2]], [[2, 2, 0]]]
```
UITextField leftViewについて

#今回の内容
<img width="150" alt="C99FB5BC-363D-4DEC-BF45-A6C159D1E98C_1_201_a.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1466343/c5ffbb2b-9ec9-1755-2fc5-297d1eb26d5f.jpeg">


#コードと簡単解説

* `.leftView`を設定することで、TextField内の左側にUIViewを作成することが出来ます。

* `.leftView`が存在すると入力される文字の位置が`.leftView`のframe分だけ横に移動します。

```Swift:
        let textfield01 = UITextField()
        textfield01.frame = CGRect(x: view.frame.maxX / 10, y: view.frame.maxY / 11, width: view.frame.width - (view.frame.maxX / 5), height: 50)
        textfield01.placeholder = "UITextField01"
        textfield01.layer.cornerRadius = 10.0
        textfield01.layer.borderWidth = 1.0
        textfield01.leftView = UIView(frame: CGRect(x: 2, y: 2, width: textfield01.frame.height, height: textfield01.frame.height))
        textfield01.leftView?.backgroundColor = .systemGreen
        textfield01.leftViewMode = .always
        textfield01.layer.borderColor = UIColor.black.cgColor
        textfield01.backgroundColor = .white
        view.addSubview(textfield01)
```






# 終わり
ご指摘、ご質問などありましたら、コメントまでお願い致します。
WordpressのエディタGutenbergの変更が反映されない話(解決済み)

Wordpress5.8にしてClassic EditorからGutenbergへの移行を決意したものの，タイトルも投稿も変更することができなくなってました。

タイトルを変更しても下書き保存すると，元に戻ってしまうし，本文を変更してもプレビューには反映されない。
公開を押しても公開されない。

ただ，何故か「add CSS」だけは反映される。。。

色々調べているとどうも .htaccessがあやしい。

自分の場合はこれでした。

https://kirei-ya.tokyo/post-3622/#toc5

```php:.htaccess
#スラッシュなしを転送
RewriteCond %{REQUEST_URI} !/$
RewriteCond %{REQUEST_URI} !\.[^/\.]+$
RewriteRule .* %{REQUEST_URI}/ [R=301,L]
```
を

```php:.htaccess
#スラッシュなしを転送(Gutenberg使うならコメントアウト)
#RewriteCond %{REQUEST_URI} !/$
#RewriteCond %{REQUEST_URI} !\.[^/\.]+$
#RewriteRule .* %{REQUEST_URI}/ [R=301,L]
```
これで解決。

何か末尾スラッシュなしの通信してるのかなぁ・・。
【AI・機械学習入門】よく使う Windows のショートカットキー

## はじめに
今回は、**Windows**の**ショートカットキー**についてです。
いきなり多くの**ショートカットキー**を詰め込んでも、最初は大変なので、**よく使うショートカットキー**に絞りこんで説明させていただきます。

:::note warn
Word, Excelといったアプリケーションのショートカットキーはこちらでは紹介しませんので、ご注意ください。
:::

## 環境
今回紹介するショートカットキーの動作環境は以下の通りです。
**Windows 10**

## ショートカットキーとは
メニューからコマンドを選択するような操作の代わりに、キー入力で行う場合の、キーの組み合わせのことです。
これを使ったキー入力を**ショートカット入力**や**キーボードショートカット**とよびます。

## Windowsのショートカットキー一覧
ショートカットキーの一覧については、
`Windows10 ショートカットキー 一覧`などで検索するとたくさん出てきますので、そちらをご参照ください。

以下に、Microsoftが紹介しているリンク先を添付させていただきます。
[Microsoftのショートカット一覧](https://support.microsoft.com/ja-jp/windows/windows-%E3%81%AE%E3%82%AD%E3%83%BC%E3%83%9C%E3%83%BC%E3%83%89-%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%82%AB%E3%83%83%E3%83%88-dcc61a57-8ff0-cffe-9796-cb9706c75eec#WindowsVersion=Windows_10)

## Windowsでよく使うショートカットキー
今回紹介するよく使うショートカットキーは以下の通りです。

| ショートカットキー | 内容 |
| :----: | :----: |
| Ctrl + A | すべての項目を選択する |
| Ctrl + C | 選択した項目をコピーする |
| Ctrl + X | 選択した項目を切り取る |
| Ctrl + V | 切り取り、コピーした項目を貼り付ける |
| Ctrl + S | ファイルを保存する |
| Ctrl + Z | 操作を1つ前に戻す |
| Ctrl + Y | 戻した操作をやり直す |
| F2 | ファイル、フォルダーの名前を変更する |
| Windows + D | デスクトップを表示する |
| Alt + Tab | アプリ、ウィンドウを切り替える |

## 覚える順番のオススメ
ショートカットキーは、いきなりすべてを詰め込むのではなく、実際に使ってみて徐々に慣れていくと自然に覚えます。
はじめのうちは、3つくらいを1日打つ練習をすると、すぐに慣れると思いますよ。

1. **Ctrl + A**, **Ctrl + C**, **Ctrl + X**, **Ctrl + V**, **Ctrl + S**
よく使うキーなので、まずはこちらのショートカットキーを抑えておくことをオススメします。

2. **Ctrl + Z**, **Ctrl + Y**, **F2**
次に抑えておきたいショートカットキーです。
プログラムを書くと、ファイルやフォルダを作成したり、入力したキー操作を1つ戻したい場合が出てくるので、重宝します。
Ctrl + Zで誤って操作を戻してしまった場合は、Ctrl + Yで元に戻します。

3. **Windows + D**, **Alt + Tab**
ブラウザで資料を見ながら、ターミナルでコマンド入力をしたり、エディタ[^1] でコーディングをしたりと、プログラミングにおいては、複数のアプリやウィンドウを表示することが多いです。
そんなときに、こちらのショートカットキーで、ウィンドウを切り替えたり、デスクトップを表示したりしますので、覚えておくと便利です。

## Mac をご使用の方へ
Macを使用している方は、ショートカットキーは覚える必要はないと思います。
Mac アプリの **CheatSheet** を使用すると、フォーカスしているアプリのショートカットキーを表示してくれるので便利です。
アプリの詳しい使い方は、[Macアプリ CheatSheet](https://pc-karuma.net/mac-app-cheatsheet/) からご覧ください。

## さいごに
[前回](https://qiita.com/katzed/items/14b381cd0e672b7c3c69)の記事は非常にたくさんの方々に見ていただき、ありがとうございます。非常にうれしいです！！
次回は、**Google Colab のショートカットキー**について説明します。
また、番外編としてどこかのタイミングで、Pythonのエディタ[^1] である、**Visual Studio Code** と **PyCharm** の2点を紹介したいと考えています。

[^1]: エディタとは、データの作成や編集を行うためのソフトウェアのことです。Pythonを扱うことのできる有名なエディタには、Visual Studio CodeやPyCharmといったものがあります。
[Swift] 複数の ビルドTARGET へ Swift Package Manager でライブラリを入れる

# [Swift] Swift Package Managerでライブラリを入れる

複数のビルドTARGETにライブラリを入れる際のメモ

## １、swift packagesからライブラリを入れる。

[iOSアプリ開発にSwift Package Managerを使おう](https://qiita.com/hironytic/items/09a4c16857b409c17d2c)

今回は[QGrid](https://github.com/Q-Mobile/QGrid)をプロジェクトへ導入する。

（１） File → Swift packages → add package dependency
（2） プロジェクトへ導入したいライブラリのgit url (https://github.com/Q-Mobile/QGrid) を入れる

![スクリーンショット 2021-10-08 22.26.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1322570/3c70e8fb-a51a-fe21-593f-5b969ab131c8.png)

この時点では、ビルドtargetを一つしか選択できない。


## ２、他のビルドTARGETにも入れる

![スクリーンショット 2021-10-08 22.26.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1322570/6191fefb-e613-9188-6ecf-f31169a452b7.png)




![スクリーンショット 2021-10-08 22.27.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1322570/8b39da36-4d6e-0064-7623-d4ae9be157c9.png)

addで導入完了
github Pull Request templateをつくってみた

## GithubでPull　Requestをする際のtemplateの作成手順

Githubなどのバージョン管理ツールでPull　Requestをすることが多いかと思います。
レビュアーの方に見やすく変更点を伝えるためにマークアップで書くとおもいますのでテンプレートを作ってみました。

手順
- テンプレートをマークダウンで作成
- githubにpushしprを出す

```
## 概要
 内容/修正点を大まかに記載 
## 関連情報
 関連するPR,issueがあればここにリンクを貼る 
## スクリーンショット
 見た目の変更があるならそれを貼る
 | Before | After |
 |--------| ------|
 | <img src="" width="300"> | こ<img src="" width="300"> |
## 懸念点
 実装面等で懸念があったら記載してください 
```