OmniAICreator/Qiita-1.07M huggingface dataset:
ASP.NET Core 5.0 の Identity をPostgreSQLで利用する

ASP.NET Core 5.0でIdentityを利用するとSqliteが使用されてしまう。

```
$ donet new react -o MyApp --au Individual
```

PostgreSQLを使用するように変更するには次のようにする。

```
$ dotnet remove package  Microsoft.EntityFrameworkCore.Sqlite
$ dotnet add package Npgsql.EntityFrameworkCore.PostgreSQL
```

app.db は不要なので削除しておく。

```
$ rm app.db
```

PostgreSQLのデータベースを作成する

```
$ createdb -O webi -E utf-8 -l C --template template0 my_app_db
```

appsetting.json を編集して DefaultConnection を変更する。

```
  "ConnectionStrings": {
    "DefaultConnection": "Host=localhost;Database=my_app_db;Username=ユーザーー;Password=パスワード"
  },
```

Startup.cs を編集して Sqliteの代わりにPostgreSQLを使用するように変更する。

```
            services.AddDbContext<ApplicationDbContext>(options =>
                options.UseNpgsql(
                    Configuration.GetConnectionString("DefaultConnection")));
```

データベースのマイグレーションを実行する。

```
$ dotnet ef database update
```


このまま起動してユーザー登録を行うと次のようなエラーとなる。

```
PostgresException: 42804: column "EmailConfirmed" is of type integer but expression is of type boolean
```

これはデータベースのMigrationがSqlite用に作成されているためである。
データベースのMigrationをPostgreSQL用に作り直す必要がある。

```
$ dotnet ef database update 0
$ dotnet ef migrations remove
$ dotnet ef migrations add CreateIdentitySchema
$ dotnet ef database update
```

これでPostgreSQL用にMigrationが作成されたのでユーザー登録できる。
UIRefreshControlの位置を変える

デフォルトではCollectionViewの上部に出てくるUIRefreshControl。
これの位置を変えたい。
ふつうにframeで設定できるんじゃないかと思ってやってみると

```swift
let refreshControl = UIRefreshControl()
collectionView.refreshControl = refreshControl
refreshControl.frame = CGRect(x: 0, y: 100, width: collectionView.bounds.width, height: 60)
```

位置変わらない。。。。。

どうすればいいかというと、

コンテナになるviewを作って位置設定して、refreshControlをaddSubViewすると機能する。

```swift
let refreshControl = UIRefreshControl()
collectionView.refreshControl = refreshControl
let containerView = UIView(frame: CGRect(x: 0, y: 100, width: collectionView.bounds.width, height: 60))
collectionView.addSubview(containerView) // １.
containerView.addSubView(refreshControl) // ２.
// refreshControlをコンテナにaddSubViewする前にコンテナを
// collectionViewやtableViewにaddSubViewしないとrefreshControlが表示されない。
refreshControl.addTarget(self, action: #selector(refreshFunc), for: .valueChanged)
```

refreshControlをコンテナにaddSubViewする前にコンテナをcollectionViewやtableViewにaddSubViewしないとrefreshControlが表示されないので注意。

🐣
****
フリーランスエンジニアです。
お仕事のご相談こちらまで
rockyshikoku@gmail.com

Core MLを使ったアプリを作っています。
機械学習関連の情報を発信しています。

[Twitter](https://twitter.com/JackdeS11)
[Medium](https://medium.com/@rockyshikoku)
elmを使って統計ライブラリを作って実際にそれを利用するまで。-第四話　確率変数・確率分布-

私はelmと統計学、そしてSVGの初心者でかつ初学者です。何か間違っているところがあったらコメントお願いします。

ソースコード:[https://github.com/saburooo/simple-stat](https://github.com/saburooo/simple-stat)

成果物:[https://mysimple-stat.web.app](https://mysimple-stat.web.app)

## 確率変数とは

[はじめての統計学](https://www.amazon.co.jp/はじめての統計学-鳥居-泰彦/dp/4532130743/ref=sr_1_1?__mk_ja_JP=カタカナ&dchild=1&keywords=はじめての統計学&qid=1612496279&sr=8-1)によると確率変数とは

> 確率分布に従って起こる変数のことである。

と書いてあります。
確率分布とは何らかの事象が起きる確率の集まりを複数の数字あるいはグラフで表現したものと考えています。
この変数は大きく分けて２種類あるそうです。

- 離散的確率変数
- 連続的確率変数

離散的確率変数とは

- 変数の値が**数**で表せるもの
- 変数の値が**記号**で表せるもの

の二種類が存在します。数で表せるものの典型はサイコロの目やトランプの組み合わせになるでしょう、それとは別に変数の値が記号で表せるものの典型は硬貨の表と裏が挙げられます。

そしてその変数になる確率は０と１の間に存在します。

これらがわかった上で確率分布とは何か、それは**確率的には１００％超えは無いけど一方で０％を下回ることもない。**

直感的にしっくりきますね！！

## 確率密度と確率の違い

この２つは似てるようで違います。確率密度とはグラフで見た時の山の高さのことでそれをより集めた図形のことを**確率密度関数**と呼びます。

この２つは分布のタイプによって同じ値になったり違う値になったりします、具体的には

- 離散型分布では確率密度と確率は同じである。
- 連続型分布ではそれぞれ違う値である。
    - 確率密度　＝　確率密度関数の１箇所の高さ
    - 確率　＝　確率密度関数の下の一定の幅の面積

こんな感じになります。これらを説明してから本題に入ります。

# 二項分布

二項分布とは最も知られた離散型の確率分布であらゆる分布の中で一番応用範囲が広いと評判です。

これを作る前にまずは同じ条件のもとで何回も同じことを行うベルヌーイ試行というやり方を実行します。

何度も行ったらその時々に出した数字を計測してグラフにしてみます。

そうして出てくるグラフにはある特徴があります、それは

1. nが０から始まるため、奇数のときはグラフの境が偶数に、偶数なら奇数になる。
2. 確率が０．５なら左右対称に、それ以上なら右にグラフが歪み、それ以下なら左に歪む。

非常に単純にelmで表現すると以下の通り。

```elm
-- そのまんま直訳しちゃいました。
biDistributionProbability : Float -> Int -> Int -> Float
biDistributionProbability p n c =
    toFloat (combination n c) * (p ^ toFloat c) * ((1 - p) ^ toFloat (n - c))
```

回数を追ってみたい場合はこれを使ってリストを返す関数を作ります。

```elm
biDistribution : Float -> Int -> List Float
biDistribution p n =
    let
        lRange = List.range 0 n
    in
        List.map (\x -> biDistributionProbability p n x |> roundNum 4) lRange 
```

組み合わせの計算を使っているのですがその詳細は[こちら](https://qiita.com/shoshinsha_taro/items/be4fe95355ca71a9e193)

# ポアソン分布

先程の二項分布と同じくらいには有名な離散型確率分布、ベルヌーイ試行の回数が非常に大きい時に便利な関数で二項分布でやろうとすると大変なものはこれを使って計算します。

```elm
poissonDistributionProbability : Float -> Int -> Int -> Float
poissonDistributionProbability p n x =
    let
        nn =
            toFloat n

        mu =
            p * nn

        el =
            Basics.e ^ -mu
    in
    ( el * (mu ^ toFloat x) ) / toFloat (factorial x)
```

これにもリストを返す関数を定義したいと思います。

```elm
poisson : Float -> Int -> List Float
poisson p n =
    let
        lRange = List.range 0 n
    in
        List.map (\x -> poissonDistributionProbability p n x |> roundNum 6) lRange
```

まだまだわかっていないところも多く、もう少し調べていきたいと思っています。
Xcodeでコードを自動生成することで生産性を上げる


XcodeでClean Architecture + MVVMのコードを自動生成させるジェネレーターを作りました！
ファイルを自動的に生成させることができるようになるので便利です。

https://github.com/yosuke1985/Clean-MVVM-Generator


## この記事は以下の記事の構成でファイルを生成しております。
ある程度複雑なiOSアプリに必要なClean Architectureのベストプラクティスを考えてみた https://qiita.com/YOSUKE8080/items/c036c9cc17bbee773019


## 前置き

クリーンアーキテクチャを採用しているのですが、
たとえば、一つのHogeというViewを生成するのに以下のファイルを生成しています。
HogeViewController.swift
HogeBuilder.swift
HogeViewModel.swift
HogeRouter.swift
HogeStoryboard.swift

これらのファイルがViewの数ごとに生成する必要があるのですが、簡単な作業ですがクラス名、変数名が統一されているか慎重に確認する必要があるので、結構神経も使います。
自分でテンプレートを作ることで動的にファイルを生成することができるようになるこのようにしてファイルを生成できます。


## 作り方
### 必要なもの
- テンプレートであるswiftファイル
- Plistファイル

![Screen Shot 2021-02-25 at 8.59.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44713/db8ad5f0-85ae-0636-a4c2-818b9168a827.png)

``` swift
//
//  ___FILENAME___
//  ___PROJECTNAME___
//
//  Created by ___FULLUSERNAME___ on ___DATE___.
//

import RxCocoa
import RxSwift
import UIKit

class ___VARIABLE_sceneName___ViewController: UIViewController {
    var viewModel: ___VARIABLE_sceneName___ViewModel!
    var bag = DisposeBag()
        
    override func viewDidLoad() {
        super.viewDidLoad()
        viewModel.setUp()
        setBind()
    }
    
    private func setBind() {
    }
}

```

___FILEBASENAME___　ベースのファイル名
___FILENAME___ ファイル名
___PROJECTNAME___　プロジェクト名
___FULLUSERNAME___　氏名
___DATE___　日付

など、もとから定義されているものに加えて、　以下のようにPlistに変数名を定義して、テンプレート作成時に変数として値をセットすることもできます。

___VARIABLE_sceneName___　

![Screen Shot 2021-02-25 at 9.04.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44713/9bb7db35-7449-4275-4382-7568d0d4002c.png)







## 使い方

### command + Nで必要なテンプレートを選ぶだけ

![Screen Shot 2021-02-25 at 8.51.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44713/07670195-1106-1cb7-41c3-4a338a38098f.png)

### ５つのファイルを自動で生成できる

![Screen Shot 2021-02-25 at 8.52.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44713/0fdb0af6-24a9-ba50-761a-0bd78d7361c5.png)


### Repositoryの生成
![Screen Shot 2021-02-25 at 8.52.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44713/8384b62b-01d9-f10b-8f47-5bd4adc4c160.png)

### UseCaseの生成


![Screen Shot 2021-02-25 at 8.52.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44713/e7371274-5dbf-5401-67fb-91658c4bf3b9.png)

##　あとがき

プロジェクトを汚すことなく使用することができますので、おすすめです！


## 参考

Installing the Clean Swift Template in Xcode
https://medium.com/swift2go/installing-the-clean-swift-template-in-xcode-6b4367006827
Fargate とは？

## 勉強前イメージ

ECSと関連してる感じはするけど、
ECSの中の機能の一つ・・とかかな？

## 調査

### Fargate とは？

Amazon ECSとAmazon EKSでコンテナを実行する際の起動タイプの1つになります。
Amazon ECSについての詳細は [こちら](https://qiita.com/miyuki_samitani/items/69abb6289aea8ae40ffe)
ECSの概要はDockerコンテナを簡単に実行・停止出来る管理サービスになります。
そのDockerコンテナの起動タイプには以下2つがあり、そのうちの1つになります。

- EC2インスタンス
- Fargate

以下はECSでクラスタを作成する際の画面です。

![1Amazon ECS - Google Chrome 2021-02-24 22.11.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/9235838a-f890-eb3c-2a08-4bedc4d33f38.png)


### Fargate のメリット

- デプロイ時にインスタンス選定の必要がない

コンテナ実行時にCPU・メモリの組み合わせを選択するだけで構築・運用に集中することが出来ます。
サーバの管理が不要になり、本来の作業に集中出来ます。

- キャパシティコントロールについて

コンテナの起動・スケーリングについては
Auto Scallingで調整されます。

## 勉強後イメージ

EC2かFargateか・・・ってことか。
Fargateの方が楽なのは楽そうだね。

## 参考

- [AWS Fargateとは？その特徴と比較されるサービスについて説明します。](https://www.acrovision.jp/service/aws/?p=2599)
- [AWS Fargate のよくある質問](https://aws.amazon.com/jp/fargate/faqs/?nc=sn&loc=4)
【SAP】SAP TechEd 2020　~データベース①編~

#はじめに#
2022時点で75%のデータがクラウド上に存在していると背景の中、SAPはSAP HANA Cloudの導入をより企業に促すために、SAP HANA Cloudの機能をよりバージョンアップさせている。サイズや性能に柔軟性を持たせ、コストも同様にFlexibleにして導入企業に選択肢をもたせている。また、SAP HANA Cloudに集約を進めるために、SAP HANA CloudとオンプレミスのデータベースやIoTやSocial Media上のデータなど、あらゆるデータソースとFederation、Integrationすることにより、統合したDBとして利用できるように機能を提供し始めている。


メイントラック：DATABASE AND DATA MANAGEMENT
サブトラック：Develop next-generation cloud-native applications for SAP HANA Cloud and hybrid environments​


#講義内容#
##SAP HANA Cloud: Start Your Cloud Transition Now [DAT100]##
本講義ではSAP HANA Cloudの特徴として、以下、ACTIVATE,INTEGRAYE,TRUSTで説明がされていた。
詳細は別途、各講義で説明していたが、SAP HANA Cloudの機能を本格的に拡張しようとするSAPの本気を感じることができた。

**＜ACTIVARE＞**
・地理データ、グラフ、階層、ドキュメントなどの複雑なデータも保持できるマルチデータベース
・インメモリ処理により、応答時間が時間から秒に短縮
・俊敏さと柔軟性をもったスケーラビリティをもったCloud-Nativeなソリューション
・チューニングなしで可能なトランザクションデータを高度分析可能
・ニーズを常に把握し、それに応えるシンプルで柔軟な価格設定

**＜INTEGRAYE＞**
・SAPおよびNon-SAPシステムへのシームレスな接続
・データコピーと削減・データ不整合を回避するためのVirtual Access
・真のマルチクラウドのためのクラウドサービスプロバイダー間の接続を可能
・任意のサイズを処理するための複数のクエリ可能なストレージオプションとデータの種類
・一元管理されたデータを検出、改良、強化、およびデータの種類、種類、量を管理する
・スピーディにトアプリケーションを構築するためのBuild-inサービス
・オンプレミス環境からクラウドへの移行が容易に可能

**＜TRUST＞**
・データの無秩序な増加を減らすため、トランザクションと分析、両方のデータを1つのインスタンス
で管理
・実績と信頼がある企業によるセキュリティ、プライバシー、匿名化のサポート
・SAP、Non-SAP、サードパーティ、およびカスタムソリューションの幅広いサポート
・アプリケーション拡張およびプラットフォームサービスの広範な機能
・ビジネス的に意味のあるデータを毎回適切なデータが安全に使用されるようサポート
・重複データを持つことなくオンプレミスからクラウドへの柔軟性をもった簡単な拡張が可能

#SAP HANA Cloud: How to Extend Your On Premise Landscape to the Cloud[DAT101]#
本講義では、SAP HANA CloudとオンプレミスのDatabaseやIoTデータ、地理データ、Socialデータとの接続パターンや接続方法について、以下３パターン紹介がされていた。

###⓵あらゆるデータにアクセスするためにSAP HANA CloudをSingle access layerとして利用する方法###
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/792264/3981855e-6972-7fc9-a343-a78f876e86d0.png)
**機能概要**
✓簡単なセットアップ
✓リアルタイムにアクセス
✓データの移動、レプリケーションは無し
✓安全なアクセス
✓低コスト
###⓶SAP HANA CloudをData Lakeとして利用する方法###
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/792264/f86e51cd-ecf9-ebf9-0ff6-6eb31288c4ed.png)
**機能概要**
✓Build-inされた機能でData lakeとして利用
✓Scalabilityをもつデータベースに集約
✓スピーディにデータにアクセス可能
✓安全なアクセス
✓低コスト
###⓷On-Premiseのシステムと連携し、SAP HANA Cloudを利用する方法###
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/792264/ed34d1b3-28ad-1602-219c-581acec035a1.png)

**機能概要**
✓簡単なセットアップ
✓ピーク時のWorkloadをコントロール
✓SAP HANA Cloudの最新機能が利用可能
✓安全なアクセス
✓低コスト

SAP HANA Cloudを利用することで、あらゆるシーンで多種類のデータソースを有効活用することができる。データ収集をすれば、その分、スピーディなパフォーマンスとより高度な分析を期待することができるが、データを保持する分、コストは増加する。どういったシーンでどのパターンが一番適切であるかは、今後プロジェクトで関わることがあれば見極めていきたい。

##Migration to SAP HANA Cloud [DAT200]##
SAPは、SAP HANA Cloudに注力しており、既にSAP Cloud Platform CockpitでMigration Seriviceを利用することができる。Serviceを利用することで、計画、準備、実行、検証の各フェーズでサポートをうけることができる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/792264/f55cab8d-1a65-17c6-8129-7e752d1ecfea.png)
※TechEd 2020 －Migration to SAP HANA Cloud　資料から引用
SAP TechEd2020ホームページ　(https://pages.sapteched.com/sap/sapteched2020/index)
上図より2020 Q3からSAP Cloud Plafform、SAP HANA service on Cloud Foundryから移行が計画されている。現時点では、まだHANA Enterprise CloudやOn-Premise版は予定されていないが、今後もしかしたら、それらもSAP HANA Cloudに移行させようという流れがくるかもしれない。


**【SAP】SAP TechEd 2020　~データベース②編~　に続く**
Flask + Vue + MySQL 構成のDocker環境構築方法 メモ

* Vue.js(フロントエンド)、Flask(バックエンド)、MySQL(DB)構成のアプリをDockerで環境構築したので、構築方法を備忘録としてメモしておく。

## 全体フォルダ構成

```
your_app 	--- fe	--- app					# プロジェクトフォルダ
			 |		 L_ Dockerfile
			 |
			 L_ be 	--- app					# プロジェクトフォルダ
			 |		 L_ Dockerfile
			 |		 L_ requirements.txt	# 依存パッケージリスト
			 L_ db	--- data                # DBデータマウント用フォルダ 
			 |		 L_ my.cnf              # 設定ファイル
			 L_ docker-compose.yml
```



## docker-compose.yml

* フロントエンド
  * 8080ポートを使用する。
  * プロジェクトフォルダ`app`をバインドマウントする。
  * `node_modules`をボリュームマウントすることで、ビルド速度低下を防ぐ。
* バックエンド
  * 5000ポートを使用する。
  * プロジェクトフォルダ`app`をバインドマウントする。
* データベース
  * MySQL 5.7イメージを使用する。
  * 3307ポートを使用する。
    * `command`でポートを明示的に指定する必要あり。
  * `data`フォルダをバインドマウントする。

```yaml
version: "3"
services:
  # フロントエンド
  fe:
    container_name: fe
    build: ./fe
    volumes:
      - ./fe/app:/app
      - node_modules_volume:/app/node_modules
    ports:
      - "8080:8080"
    links:
      - be
  # バックエンド
  be:
    container_name: be
    build: ./be
    volumes:
      - ./be/app:/app
    ports:
      - "5000:5000"
    command: flask run --host 0.0.0.0 --port 5000
    links:
      - db
  # データベース
　db:
    image: mysql:5.7
    container_name: db
    environment:
      MYSQL_ROOT_PASSWORD: rootpass
      MYSQL_DATABASE: sample_db
      MYSQL_USER: mysqluser
      MYSQL_PASSWORD: mysqlpass
    volumes:
      - ./db/data:/var/lib/mysql
      - ./db/my.cnf:/etc/mysql/conf.d/my.cnf
    ports:
      - 3307:3307
    command: --port 3307
volumes:
  node_modules_volume:
```



## フロントエンド

* node.jsのベースイメージからフロントエンドアプリ(Vue.js)用コンテナを作成する。

* `Dockerfile`

```dockerfile
# ベースイメージ
FROM node:13.10.1-alpine3.11

WORKDIR /app

# 依存関係のインストール
COPY ./app/package*.json ./
RUN npm install

# プロジェクトフォルダをカレントディレクトリ(appフォルダ)にコピー
COPY ./app .

EXPOSE 8080
CMD ["npm", "run", "serve"]
```

* `app`フォルダ
  * `vue create app`コマンドで作成したプロジェクト一式を配置する。



## バックエンド

* python 3.7ベースイメージからバックエンドアプリ(Flask)用コンテナを作成する。
* `Dockerfile`

```dockerfile
FROM python:3.7

RUN mkdir /app
ADD requirements.txt /app

ENV PYTHONUNBUFFERED 1
EXPOSE 5000

WORKDIR /app
RUN pip3 install -r requirements.txt
```

* `requirements.txt`
  * Flask/MySQL用パッケージを記述する。

```txt
SQLAlchemy
Flask-SQLAlchemy
Flask-Cors
marshmallow
marshmallow-sqlalchemy
flask-marshmallow
pymysql
```

* `app`フォルダ
  * Flaskプロジェクトフォルダ一式を配置する。

## データベース

* コンテナ設定は、`docker-compose`のみに記述する。

* `data`フォルダ

  * ホスト側マウント用フォルダ。

* `my.cnf`

  * 設定ファイル。

  * 文字コードのみ指定する。

    ```cnf
    [mysqld]   
    character-set-server=utf8mb4
    collation-server=utf8mb4_unicode_ci
    
    [client]
    default-character-set=utf8mb4
    ```

    

## 参考情報

* [社内Docker環境の話](https://www.jhhk-family.net/?p=869)
* [【Docker】MySQLワークベンチに繋がらない…DBコンテナのポートフォワーディングの設定](https://qiita.com/ryuji-oda/items/c3ed1b86fe0c1f2b9058)
[DRF]ModelSerializerのvalidation

django-rest-frameworkを学び始めました。関連の記事を書いていきます。

ちょっと裏で動いていることが多くてなかなか理解しづらいですが、簡単なところから記事にいていこうと思います。

djangoのプロジェクト作成とか、django-rest-frameworkとはってところとか、シリアライザってなに？ってところは端折ります（別で記事にするかもしれません）。

ではいきます。

# ModelSerializerのvalidationについて
ModelSerializerを継承したselializerの中で以下のように書くと、項目名に対して独自のバリデーションを定義することができます。

```python:serializers.py
class XXXXSerializer(serializers.ModelSerializer):

    class Meta:
        model = XXXX
        fields = "__all__"

    def validate_項目名(self, value):
        if 条件:
            raise serializers.ValidationError(
                エラー時の挙動
            )
        return value
```

これに対して、viewから以下のようにして呼びます。

``` python:views.py
serializer = XXXXSerializer(data=data)
serializer.is_valid()
```

`is_valid()`で　なにが呼ばれているかという話ですね。
順番に追っていきましょう。

まず、`BaseSerializer`の`is_valid()`メソッドに行き着きます。
その中の`self.run_validation(self.initial_data)`が呼ばれます。ここで、serializerはModelSerializerを継承しているので、BaseSerializerのサブクラスのSerializerやModelSerializerで`run_validation`があればそちらが呼ばれますね。

今回はSerializerにだけあったので、Serializerの`run_validation`が呼ばれます。
その中の`self.to_internal_value(data)`が呼ばれ、見たかったものがありました。

```python:to_internal_value
    def to_internal_value(self, data):
        """
        Dict of native values <- Dict of primitive datatypes.
        """
        if not isinstance(data, Mapping):
            message = self.error_messages['invalid'].format(
                datatype=type(data).__name__
            )
            raise ValidationError({
                api_settings.NON_FIELD_ERRORS_KEY: [message]
            }, code='invalid')

        ret = OrderedDict()
        errors = OrderedDict()
        fields = self._writable_fields

        for field in fields:
            # ここ！！！
            validate_method = getattr(self, 'validate_' + field.field_name, None)
            primitive_value = field.get_value(data)
            try:
                validated_value = field.run_validation(primitive_value)
                if validate_method is not None:
                    validated_value = validate_method(validated_value)
            except ValidationError as exc:
                errors[field.field_name] = exc.detail
            except DjangoValidationError as exc:
                errors[field.field_name] = get_error_detail(exc)
            except SkipField:
                pass
            else:
                set_value(ret, field.source_attrs, validated_value)

        if errors:
            raise ValidationError(errors)

        return ret
```

`#ここ！！`ってかいてあるところですね。
多分ですが項目ごとの標準のvalidateが呼ばれたあとに独自のvalidateが呼ばれる感じなんですかね。

`validate_method`という変数に、フィールドごとのvalidateメソッドを集めて、
`validated_value = validate_method(validated_value)`で実行してますね。
pythonだとメソッド書くときにこんな書き方が出来るんですかね？

`getattr`関数で出来るみたいですね。便利。。
これは使い方覚えておきたいとことですね。
以下のように書くとメソッドを文字列から呼べるみたいです。

```python:getattrの例
class test:
    def a(self):
        return 5

    def b(self,i):
        print("b" + str(i))

    def c(self,i,j):
        print("b"+str(i)+str(j))


testclass = test()


print(getattr(testclass,"a")())

d = getattr(testclass, "b")(6)

e = getattr(testclass, "c")(7,8)
```

基本的なことだと思いますが、とりあえず一つ知れて良かったです。
getattrなどについてはまた詳しくやりたいですね。

では今回はここまでです！
【備忘録】写真のアップロード方法

<p>最近、エラーが埋まってる埋まってないで考えると楽になるのかなと感じる

<h2>HTMLにて
<p>これをすることにより、ファイルから選ぶことができる

```PHP:join.php
input type="file"
```
<p>

<h2>PHPにて
<p>理解はしていない…
上のPHPで名前（？）を決める

```PHP:join.php
	$fileName = $_FILES['image']['name'];
	if(!empty($fileName)) {
$ext = substr($fileName, -3);
//写真のタイプを選定し、エラーを作る//
if($ext != 'jpg' && $ext !='gif') {
	$error['image'] = 'type';
} 
	}
```
<p>

<h2>PHPにて
<p>上の2行でフォルダ内にアップロードできるようになる

```PHP:join.php
	
	if(empty($error) ) {
//写真のアップロードの決まり文句らしい//
		$image = date('YmdHis') . $_FILES['image']['name'];
		move_uploaded_file($_FILES['image']['tmp_name'], '../member_picture/' . $image);

//ちょっとしたまとめ//
		$_SESSION['join'] = $_POST;
		$_SESSION['join']['image'] = $image;
		header('Location: check.php');
		exit();
	}

```


<h2>次の画面にて
<p>これで表示OK

```PHP:check.php

		<?php if($_SESSION['join']['image'] !==''):?>
		<img src="../member_picture/<?php print (htmlspecialchars($_SESSION['join']['image'],ENT_QUOTES));?>" >
			<?php endif ;?>

```
php　require とrequire_oneceの違い , includeとの違い, パスの指定方法についてなど

#includeとrequireの違いやパス指定のまとめ


###違いについて
####再読み込みを同じファイル内で行われた際の挙動が違う

参考：https://qiita.com/awesam86/items/3fa28e23c95ca74caddc


####試してみた(index.phpでr.php, rone.phpを読み込み検証）

r.php

```php
<?php 
$r = 'hoge'
```
rone.php

```php
<?php 
$rone = 'hoge';
```

index.php

```php
<?php 
require 'r.php';
require_once 'rone.php';

echo $r. "\n"; //hoge
echo $rone. "\n"; //hoge

$r = 'hoge_change'; 
$rone = 'hoge_change';

echo $r. "\n"; //hoge_change
echo $rone. "\n"; //hoge_change


require 'r.php'; 
require_once 'rone.php';

echo $r. "\n"; //hoge(requireではファイルの読み込みが再度行われるため値も$r = 'hoge'が再読み込みされている)
echo $rone. "\n"; //hoge_change（require_onceでは一度しか読み込まれないため表示がhoge_changeのまま）
```

#includeとの違いは
エラー出た時requireは画面全体が消える。includeは警告の為消えずに他の画面が表示される。

参考：公式ドキュメント
 [include](https://www.php.net/manual/ja/function.include.php)
![スクリーンショット 2021-02-25 7.14.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670884/b83a197e-a74b-a009-d28a-d723168df19b.png)

 [require](https://www.php.net/manual/ja/function.require.php)
![スクリーンショット 2021-02-25 7.14.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670884/8facea6a-0ad1-77c4-27d4-d04497f288d8.png)

###パスの指定について
 [include時のパスの指定について](https://www.php.net/manual/ja/ini.core.php#ini.include-path)
![スクリーンショット 2021-02-25 7.14.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670884/18b7d646-8548-f733-4463-cc4487e661bd.png)
GeoJSONをチェックする

トレイルで　GeoJSONを使うのがあるのですが、エラーがでるとの質問。
私がそのJSONを見てもエラー箇所はよく分かりません。
調べてみるとチェックしてくれるサイトがあります。

[GeoJSON Viewer＆Validator](https://geojsonlint.com/)


これを勧めたら、問題が解決したようです。

https://trailblazers.salesforce.com/answers?id=9064S000000DcNX
Dockerのコンテナ立ち上げで上手くいかなかった時に行ったこと



##はじめに
初学者で、今回が初めての投稿になります。
[Docker超入門 #5](https://www.youtube.com/watch?v=ZxwHVaq7FJo&t=853s)
(動画内容としましては *イメージ作成→コンテナ作成→コンテナ起動* の順になります）
こちらの動画の内容に沿って学習した際に起こったエラー、そしてどう対処したかの記事になります


## エラー内容
イメージ作成するとこまでは上手く行ったのですがコンテナ作成時にエラー表示が出ました。
結論、今回のエラーはイメージ内の誤字にありました。

## やってみたこと

まずは作成はできていたものの、「*イメージ作成*」が上手く行っていないのではと思いファイル内の誤字脱字チェックに入りました。やはり２箇所誤字発見できました。そして今回はイメージファイルにミスがあったものの、イメージが作成出来てしまったのだとわかりました

対処の流れとしては
「①*間違って起動したコンテナの停止→そのコンテナの削除→誤字含むイメージの削除*」
続いて
「②*修正後のイメージ作成→コンテナ立ち上げ→コンテナ起動*」で上手く行きました

######コンテナの稼働状況チェック→停止→削除######
```
$ docker ps

$ docker container stop  対象のコンテナ名

$ docker container rm  対象のコンテナ名  
```

######イメージのチェック→削除######
```
$ docker images

$ docker image rm 対象のイメージ名
```

##最後に##

もし記事内容に誤り等ございましたら是非ともご指摘ください。
同じような初学者の方の参考になれば幸いです
htmlとcssのメモ

- いつか整理します

## 有用な記事

- [HTML Tutorial](https://www.w3schools.com/html/default.asp)
- [W3.CSS Templates](https://www.w3schools.com/w3css/w3css_templates.asp)
- [セレクタの種類](http://www.htmq.com/csskihon/005.shtml)
- [font-familyメーカー](https://saruwakakun.com/font-family)

---

## 1行が長いけどスクロールバーでなく折り返したい時

関連するstyle

```css
body {
word-wrap: break-word;
white-space: pre-wrap;
overflow-wrap: break-word;
}
```
などを設定する.

### 参考

- [white-space](https://developer.mozilla.org/ja/docs/Web/CSS/white-space)
- [overflow-wrap](https://developer.mozilla.org/ja/docs/Web/CSS/overflow-wrap)

---

## テーブル内で半角文字のみでも自動改行させたい時

```css
table tr td {
word-break: break-all;
}
```
などを設定する.

「table tr td」が意味するのは, 「table要素の子要素のtr要素の子要素のtd要素に関する設定」であるということ.

### 参考

- [HTML、半角文字のみでもtableのセル内で自動改行する。](http://piyopiyocs.blog115.fc2.com/blog-entry-342.html)

---

## htmlとcssでサイドバー固定

- [CSSだけでサイドバーを固定・スクロール追従する方法（JavaScript不要）](https://tech-dig.jp/css%E3%81%A0%E3%81%91%E3%81%A7%E3%82%B5%E3%82%A4%E3%83%89%E3%83%90%E3%83%BC%E3%82%92%E5%9B%BA%E5%AE%9A%E3%83%BB%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E3%81%AB%E8%BF%BD%E5%BE%93%E3%81%99/)

---

## htmlで論文っぽい2段組み

- [段組みレイアウトの使用](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts)

---

## cssテーブルデザイン

- [表（table）の作り方と装飾の変え方【HTML＆CSS】](https://saruwakakun.com/html-css/basic/table)
- [Top 10 CSS Table Designs](https://www.smashingmagazine.com/2008/08/top-10-css-table-designs/)
- [【コピペOK】CSSだけで実装できるおしゃれテーブルデザイン10つ](https://webliker.info/75964/)
- [レスポンシブも対応！綺麗で見やすい表のデザイン11個[HTML&CSS]](https://pecopla.net/web-column/table-design)
Qiita Daily Survey memo 2021.02.25

# Qiita Daily Survey memo 2021.02.25
Qiita の記事を可能な限り毎日読むために、読んだmemoを公開することでモチベーションを維持しようという試み。
個人的には、朝起きて6時くらいにまとめが合ったらうれしいので、5時更新のタイミングで書き始められるように頑張りたいです。

## [Unityにおける「設計レベル」を定義してみた](https://qiita.com/toRisouP/items/79b97c472e588bb91c52)
とりすーぷ(toRisouP) さんの記事。
必読。
設計って何のためにするの？という大きいところから、Unityでも設計があったほうがいいよ、という話になり、設計のレベルを定義（提案？）してくださっている記事です。
VRChat というゲームで Unity 触っているので、とても参考になりました。

スライド100ページくらいあるとのことですが、するするっと全部読めてしまいました。SUGOI。
記事の方も大変読みやすいです。
本を執筆されている、設計の話をスライドにしちゃうくらいの方ですので、やっぱり思考がものすごく整理されていて、かつ、伝える能力もめちゃめちゃ高いと感じました。SUGOI。

Unity に限った話でなく、普段開発しているときも「開発しているみんなが共通のイメージを持っていた方がいい」くらいの理由で設計（＋ポンチ絵）を作っていましたが、やっぱり遅くなっちゃうよなー…と悩んでいました。

**「設計を捨てる」で得られた開発速度は、後に訪れる莫大な保守コストで帳消しになる。」**

金言ですね。
短期的な視点と中長期的な視点、それぞれのトレードオフがあるよ、ということを理解して、どっちを取るかを選択していけばいいわけですね。
かなり長いこと悩んでいたことが解決した感があります。
本当にありがとうございます。


## [Seleniumチートシート](https://qiita.com/DisneyAladdin/items/be771591c0a06b30a369)
修人(DisneyAladdin) さんの記事。
タイトルの通り、Selenium でよく使うものが整理されて一覧になっている記事。
よく使うので助かります！！
チートシート系の記事（特にファイルI/Oなんか何度見たことか…）は、頻繁に参照するので、作ってくださった方には感謝が絶えません…。


自動操作と言えば、下記の記事を執筆されたmainyさんが、本日ウェビナーで発表されるとのことなので、記事と合わせておすすめです！
[Python と Playwright でブラウザを自動操作させるコードを自動生成したよ（追記あり）](https://qiita.com/mainy/items/3a9de19f440991f67f34)


## [[Ruby][LINE] ごみ出し日に LINE で通知する](https://qiita.com/QUANON/items/ccfe650a30bd6068a5f4)
QUANON さんの記事。
タイトルの通りゴミ出し日に Line で通知をする仕組みを作りました、という記事です。
一人暮らしだと、ゴミ出し忘れちゃいますよねー…。
また、この時期の面白いところは Line Bot の機能ではなく、cron + Ruby + LINE Notify で作成された、という点だと思います。
記憶が確かではないのですが、確かLineアプリを作った際に、時間を指定して通知を送る機能があったと思いますが、それではなくcronでアプローチしたというのが面白いなと思いました。


## [プロジェクト管理のタスクリスト](https://qiita.com/nsym__m/items/fdc0cece2ac7f888fadb)
nsym__m さんの記事。
プロジェクトを進める時に必要なことをメモしたものを公開してくださっている記事です。
2年目とのことですが、いろいろな業務をされていてSUGOI。
さらにこうしたほうがいいんじゃない？をちゃんとメモされていて、さらにそれを振り返りして、整理して、公開までしてSUGOI。
見習わなければ…。
要件定義、設計フェーズでのアイディアと、開発フェーズでは課題・進捗管理、アプリ開発、Web開発でのメモを整理してくださっています。
Weekly くらいでできてるかのチェックリスト的に使うことで、外れたりせずに動けそう…。


## [Kaggle始めてみました](https://qiita.com/etnk/items/5b599b138c5dbc189181)
etnk さんの記事。
Kaggleを始めるのに必要なコト、最初にどのようなコンテンツがあるのかなどをまとめてくださった記事です。
ありがたやぁ…。
Kaggle に興味はあるけど、なかなか踏ん切りが…と100回くらい書いている気がしますが、開始直後の雰囲気がわかりやすくて助かります。
Learn というのがあるのですね、分かりやすい！
昨日の振り返りの記事もありましたし、Kaggle 楽しそうですよね…。
git add .したら『warning: LF will be replaced by CRLF in ~』がズラズラ出てきた場合の対処方法

初投稿です。
Qiitaはよく閲覧しますが、投稿したことはありません。
この度、「開発で自分が困った事は他の方も困っているに違いない」という観点から、自分の備忘録も兼ねて投稿することにしました。
不備はあるかもしれませんが、暖かく見守ってください。

さて、本題です。

git initでリポジトリを作成して、初回のステージングを行う際に、下記のようなエラーがズラズラ出てきました。

```
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in common/PHPExcel/Writer/OpenDocument/Content.php.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in common/PHPExcel/Writer/OpenDocument/Meta.php.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in common/PHPExcel/Writer/OpenDocument/MetaInf.php.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in common/PHPExcel/Writer/OpenDocument/Mimetype.php.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in common/PHPExcel/Writer/OpenDocument/Settings.php.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in common/PHPExcel/Writer/OpenDocument/Styles.php.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in common/PHPExcel/Writer/OpenDocument/Thumbnails.php.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in common/PHPExcel/Writer/OpenDocument/WriterPart.php.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in common/PHPExcel/Writer/PDF.php.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in common/PHPExcel/Writer/PDF/Core.php.
The file will have its original line endings in your working directory
```

これは、Gitが自動的にLF改行コードをCRLFに変換した際に出るwarningですので、自動変換をオフにします。
git configで設定します。

```
$ git config --global core.autoCRLF false
```

これでwarningは出なくなりました。以上です。


参考：https://kmizukix.hatenadiary.org/entry/20100106/1262711140
ESP32でSerial.readを使ったCSVデータ読み込み

Arudinoでは動くSerial.readを使ったCSVデータ読み込みのプログラムが
ESP32では動かなかったのでまとめてみました。

##原因は

Arudino　unoではSerial.readするとserialEvent（）が機能するが
ESP32では機能しない

[Arudinoリファレンス](https://www.arduino.cc/reference/en/language/functions/communication/serial/serialevent/)に
>注意事項と警告
serialEvent() Leonardo、Micro、またはYúnでは機能しません。

書いてるので同じ状況と推測
##対策
serialEvent（）をプログラム上で呼びだす。

##プログラム
```
#include <Arduino.h>
#include <Wire.h>

String inputString = "";         // a String to hold incoming data
String Set_data[10];

int i=0;

void setup() {
  Serial.begin(115200);
  inputString.reserve(200);
}

void loop() {
serialEvent();      
}

void serialEvent() {
  while (Serial.available()) {

    char inChar = (char)Serial.read();
 
    if (inChar == ',') {
      Set_data[i]=inputString;
      inputString="";
     // Serial.println(Set_data[i]);
      ++i;     
    }else if(inChar == '\n') {
      Set_data[i]=inputString;
      inputString="";
      //Serial.println(Set_data[i]);
     i=0;
     for (int l=0; l <= 9; l++){ 
      Serial.println(Set_data[l]);
 }
  }else{
 inputString += inChar;    
  }
  }
}
```

##結果
シリアルモニターでテスト
```
9E3DiS,8JvSXN,6UomdD,53gRvt,3e9kNj,3e9kNj,_FmyZW,XVHhUH,TkUw5i,SqkLKd 
```
を入力したら「,」ごとに区切りSerial.println
![cap010.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51752/9c7bad73-ac30-d0ec-7217-176c0d6083bc.jpeg)
【React】TypeScript を使用しているのに PropTypes での型定義は必要か？

# 結論
TypeScript での props の型定義も、PropTypes での型定義も、どちらも設定した方が吉です。

# Typescript と PropTypes の違い

- TypeScript：コードを書いているときに役立ちます。
    - TypeScriptの場合は、エディタでコードを書いているときに型チェックしてメッセージを出してくれますが、
    buildした後は型チェックをしてくれません（例.DevTools の Console でのエラーメッセージの出力は無し）。
- PropTypes：たとえばAPIからJSONをロードする場合に役立ちます。
    - PropTypesの場合は、buildした後にも DevTools の Console 等でエラーメッセージを出力してくれます。
    
# 検証してみた

※サンプルコードの内容は適度に省略してあります。

```header.tsx
import React from "react"
import PropTypes from "prop-types"
.
.
type Props = {
  siteTitle: string
} & typeof defaultProps;

const defaultProps = {
  siteTitle: `siteTitleが渡されなかった場合のデフォルトのタイトル`,
}
.
,
const Header: React.FC<Props> = ({ siteTitle }) => (
  <h1>{siteTitle}</h1>
)
.
.
// この propTypes を設定したりコメントアウトしたりして検証してみます。
Header.propTypes = {
  siteTitle: PropTypes.string.isRequired,
}
```

```layout.tsx
import React from "react"
import PropTypes from "prop-types"
import Header from "./header"
.
.
// このsiteTitleは、本来ならstring型の値を渡さなければいけませんが、試しにnumber型の値を渡して意図的にエラーを吐いてくれるようにしてみます。
const Layout: React.FC = ({ children }) => (
  <Header siteTitle={155} />
)
```

PropTypes を定義した場合は、DevTools の Console で下記エラーメッセージを出力して怒ってくれますが、

> index.js:2177 Warning: Failed prop type: Invalid prop `siteTitle` of type `number` supplied to `Header`, expected `string`.
    in Header (at layout.tsx:28)
    in Layout (at pages/index.tsx:9)
    .
    .

![スクリーンショット 2021-02-25 1.52.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189135/c6592ed6-8158-3d33-6599-7c9dd75d79c2.png)
![スクリーンショット 2021-02-25 4.46.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189135/d980551c-b255-3b37-c509-58791baad9c5.png)

PropTypesを設定していない場合は、何も怒ってくれません。

![スクリーンショット 2021-02-25 4.47.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189135/70e593e4-5e5e-d65f-040a-aec679879363.png)

![スクリーンショット 2021-02-25 1.53.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189135/8a21b9d6-b8c5-2b38-194d-901e9441ff84.png)

よって、TypeScriptの使用の有無に関わらず、PropTypesも設定しておいた方が無難そうです。
（二重チェックになるので不必要である、と言うことは無さそうです。）

### 参考にさせていただいたURL
[React+TypeScriptでPropTypesを使う](https://www.ted027.com/post/react-ts-proptypes/#typescript%E3%81%A7proptypes%E3%81%AF%E5%BF%85%E8%A6%81%E3%81%8B)

https://stackoverflow.com/questions/41746028/proptypes-in-a-typescript-react-application/54690878#54690878

https://github.com/Microsoft/TypeScript/issues/4833#issuecomment-282497313
突然Unity Recorderで録画できなくなった時の対処法

## 設定を変更していないのに録画できなくなった

Unity Recorderの**設定をまったく変えてない**のに、
突然録画されなくなったのです。
※もしかしたら何か手が触れて設定が変わっちゃったのかもしれない

出力されたアニメーションGIFが**真っ白**の状態。

タイミング的な何かが重なって奇跡的に
今まで動いていたという可能性もあります。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328771/6f7ba5e3-cb26-b17e-146b-ba2837b8fec2.png" width=600 />
👆設定はコチラ👆

## 複数カメラを使った録画

![gif_animation_065.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328771/11affdae-5c4e-71b8-b3c9-21ceec1a6939.gif)
👆このようにUIと3Dオブジェクトを同時に表示させる必要がありましたので、
UIと3Dの2つのカメラを使った録画でした。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328771/ba074822-f1a2-cae8-24fe-52197228db04.png" width=450 />
👆上の通りCamera設定をActiveCameraに設定しています。


## 結論: Include UIのチェックを外す

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328771/070365f0-fbbf-b94b-9034-378fbdc3b496.png" width=450 />
今回の解決方法は**「Include UIのチェックを外す」**でした。

### Include UIとは？

`Include UI`について調査できておりません。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328771/1d563031-5b2f-06f9-44f2-ac56c598d1b0.png" width=450 />

> To include UI GameObjects in the recording.

録画時に**uGUI**を表示する際は必須なのかと
思っていましたがそうでもなさそうです。
**（チェックしなくても録画できるため）**



## 最後に

![gif_animation_168.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328771/78f2fa30-78c9-64b3-57dc-ec2f6ea519ed.gif)

現在執筆中の「[DOTweenの教科書](https://twitter.com/ohbashunsuke/status/1361638957876867076)」が佳境で時間がなく
本質的な原因は突き止めておりません。

**2012.3.13更新**
[DOTweenの教科書をリリースしました](https://zenn.dev/ohbashunsuke/books/20200924-dotween-complete)


`Include UI`については後日調査予定。

## 開発環境

- Unity2019.4.15f1
- Unity Recorder 2.5.2
keyとvalueについて-media_url取得までの流れ


#型について
```
#terminal上で取得している
{'data': [{'id': '1234567890', 'media_type': 'IMAGE', 
'media_url':'https://test.com/', 
'timestamp': '2021********', 'username': 'qiita'}], 
'paging': {'cursors': {'before': 'abcd', 'after': 'abcd'}}}
```
このdataは辞書型{}とリスト型[]が存在している。
今回は仮定として変数を profile_data ということにする。

#最初に'data'を取得してみる
```
>>>profile_data['data']
[{'id': '1234567890', 'media_type': 'IMAGE', 'media_url':'https://test.com/', 
'timestamp': '2021********', 'username': 'qiita'}]
```
commandでprofile_data['data']と入力すると元の情報からdataの部分だけが抽出される。
先頭の辞書型がなくなり、[{}]の型に変化した

#次に何個目の情報を取得するのかを指定する
```
>>>profile_data['data'][0]
{'id': '1234567890', 'media_type': 'IMAGE', 'media_url':'https://test.com/', 
'timestamp': '2021********', 'username': 'qiita'}
```
comandに[0]を追加することにより、何個目の情報を取得するのかを指定できる。今回は１つしかないため[0]を使用した。

#最後にmedia_urlを取得する
```
>>>profile_data['data'][0]['media_url']
'https://test-qiita.com/'
```
'media_url'を追加し取得する。今回は'media_url'だったが、'id'、'media_type'でも同様のことが可能である。
シェル芸でGitHubの日付別Contribute数を取得

## 概要

シェル芸で日付別のGitHubの草情報を取得し日付別にContribute数を整形して表示したい.

## やってみた

まず列挙.

<https://github.com/users/eggplants/contributions>のソースを見ると, 草の部分に`<rect>`要素が列挙されていることがわかる.

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278919/2b339dc0-684f-b3db-fcd4-6a3e2cf557f4.png)

しかし`<rect>`要素を抜き出すと

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278919/e74ae560-99c4-a5a5-49dd-f4b41692e739.png)

のような部分も取得してしまう. なので以下のような草濃度部分の`<rect>`は除く必要がある.

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278919/46d6e044-05b9-d6b0-514f-2938837716c3.png)

ので, 以下のようにする.

```bash
$ curl -s https://github.com/users/eggplants/contributions \
  | awk '/data-count/{print$9,$10}'
```

どうやら直近1年分取得できそうだ.

```:result
data-count="0" data-date="2020-02-23"
data-count="0" data-date="2020-02-24"
data-count="1" data-date="2020-02-25"
data-count="0" data-date="2020-02-26"
data-count="1" data-date="2020-02-27"
...(省略)...
data-count="5" data-date="2021-02-20"
data-count="6" data-date="2021-02-21"
data-count="1" data-date="2021-02-22"
data-count="0" data-date="2021-02-23"
data-count="7" data-date="2021-02-24"
```

日付とContribute数を並べて表示.

```bash
$ curl -s https://github.com/users/eggplants/contributions \
  | awk '/data-count/{print$9,$10}' | awk -F\" '$0=$4" "$2'
```

大分扱いやすい形式になった.

```:result
2020-02-23 0
2020-02-24 0
2020-02-25 1
2020-02-26 0
2020-02-27 1
...(省略)...
2021-02-20 5
2021-02-21 6
2021-02-22 1
2021-02-23 0
2021-02-24 7
```

試しに, ここから昨日のcontribute数を検索してみる.

```bash
$ date
2021年  2月 25日 木曜日 02:13:11 JST
$ date +%Y-%m-%d
2021-02-23
$ date +%Y-%m-%d -d "1 day ago"
2021-02-24
$ curl -s https://github.com/users/eggplants/contributions \
  | awk '/data-count/{print$9,$10}' | awk -F\" '$0=$4" "$2' \
  | grep "$(date +%Y-%m-%d -d "1 day ago")"
2021-02-24 7
```

取得できた.



## 応用

[eggplants/contributter.sh](https://github.com/eggplants/contributter.sh/blob/master/contributter)

```bash
contributter(){
  local user="$1" day_before="${2-1}"
  local target_date="$(date +%Y-%m-%d -d "${day_before} day ago")"
  echo "${user} さんの ${target_date//-//} の contribution 数: $(
    curl -s https://github.com/users/${user}/contributions \
      | grep -oP "(?<=data-count=\")[0-9]+(?=\" data-date=\"${target_date})"
  ) #contributter_report"
}
```

```bash:result
$ contributter eggplants
eggplants さんの 2021/02/24 の contribution 数: 7 #contributter_report
$ conributter eggplants 2
eggplants さんの 2021/02/23 の contribution 数: 0 #contributter_report
```

### 解説

- 第一引数はユーザ名(`user`), 第2引数はn日前(`day_before`)を表す.
また第2引数が存在しない場合, `${変数-デフォルト値}`構文で`1`が代入される.

- `target_date`には, n日前の日付を`YYYY-mm-dd`形式で代入する.

- `${target_date//-//}`は, `${変数//置換パターン/置換文字}`構文で, `YYYY-mm-dd`を`YYYY/mm/dd`に置換している.

- 前項で行っていた, `awk`による特定日付のContribute数取得の部分は, `grep`の肯定先/後読み`(?<=before-pattern)value(?=after-pattern)`でうまく抽出できる.

## 結論

シェル芸でやる必要ある？
オープンソース版PyMOLの外観をバイナリ版のそれに近付ける

分子描画ソフトウェアの[PyMOL](https://pymol.org/2/)には公式のバイナリ（Incentive ver.）を利用してインストールしたものと、Schrödinger, Inc.のGitHubに置かれている[オープンソース版](https://github.com/schrodinger/pymol-open-source)を使ってインストールしたものの2種類があります。
機能は95％くらい同一になるよう設定されているようですが、公式のバイナリ版の方が少し機能が拡張されている代わりに、その機能を使うためには有料またはEducationalのライセンスを取得するよう促してくる形になっています。

普段使いする分にはオープンソース版を使う（Windows版： https://qiita.com/Ag_smith/items/a9670bfd79fb3bf39975; macOS/Linux版: https://qiita.com/Ag_smith/items/58e917710c4eddab46ee） と良いのですが、少々気になるのが見た目の問題です。

macOS版の場合、公式バイナリ版（Educational licenseを使用）はこんな感じ
![スクリーンショット 2021-02-25 2.22.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224327/54d07989-1cee-cbbb-5ef8-16fe1ae4958f.png)

オープンソース版はこんな感じ
![スクリーンショット 2021-02-25 2.21.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224327/e4501d8e-550d-36ff-60a1-20fdc15ed48c.png)

上1/3のExternal GUI部分の見た目がこのように違っています。

この外観は、**実は簡単に変更することができます**。macOSでバイナリ版の場合は`/Applications/PyMOL.app/Contents/share/pymol/data/pmg_qt/styles/pymol.sty`に、オープンソース版の場合は`$(brew --prefix)/opt/pymol/libexec/lib/python3.13/site-packages/pymol/pymol_path/data/pmg_qt/styles/pymol.sty`というファイルで規定されています。

オープンソース版の`pymol.sty`ファイルを開いてみると

```
#builder QPushButton
{
    padding:        1px 3px;
}

QPushButton[quickbutton=true]
{
    padding:        1px 5px;
}

QMainWindow::separator
{
    width:          5px;
    height:         5px;
    border:         none;
}

/* vi:ft=css:expandtab:sw=4
 */
```
という内容になっていますが、バイナリ版のそれは結構色々書き込まれています（ここでは内容を紹介しません）。

ということで、オープンソース版の`pymol.sty`の中身をバイナリ版の`pymol.sty`ファイルの中身で上書きすることで、バイナリ版の外観に近付けることができます。以下はmacOSでのコマンドの例です。（`$(brew --prefix)`を使うことでHomebrewのインストール場所を自動検知しています）

```bash
cp /Applications/PyMOL.app/Contents/share/pymol/data/pmg_qt/styles/pymol.sty $(brew --prefix)/opt/pymol/libexec/lib/python3.13/site-packages/pymol/pymol_path/data/pmg_qt/styles/
```

このコマンドを実行し、pymolを再起動してみた結果がこちら。

![スクリーンショット 2021-02-25 2.36.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224327/40aaad93-acda-df9d-d4ab-355901173416.png)

External GUIの外観がバイナリ版のそれにかなり近づきました。macOSのダークモードを適用していない状態でExternal GUIのメッセージログが黒背景に白文字になっているところがポイントです。
Windows, Linux版でも同様に該当する`pymol.sty`ファイルを探し出して編集すれば同様の効果が期待されます。

`pymol.sty`ファイル自体はcssの文法に従っているところが大きいみたいなので（正確には[Qt5のスタイルシート](https://doc.qt.io/qt-5/stylesheet-reference.html)）、これを読めばさらに外観を変更することができます。
railsを使ってアプリを作る　登録編

####データベースにデータを登録####

#####ルーティングの作成#####
ルーティングに登録する時はpostで登録する
```post "animals/create" => "animals#create"```

#####viewの作成#####
送りたい内容を
<%= form_tag "/animals/create" do %>

<% end %>
で囲む
#####コントローラーの作成#####
viewからのデータを取得する
view = Animal.new(name: params[:name])
view.save

登録が完了したら、別ページに遷移させる(リダイレクト)
redirect_to "/animals/index"

#####get と　post#####
get
　getはデータベースを変更しないアクション
post
　postはデータベースを変更するアクション
　postで登録する時は、フォームで入力した値をコントローラーで受け取る時に使うらしい
　なので、削除する時はデータが変更されるかPostになる
[Bash]ファイルのパターンマッチしない行をカウントする

ファイルのパターンマッチしない行をカウントするサンプルコード（覚え書き）。
具体的には、各行の特定の箇所の出力が正しいか調べます。

## 環境
* OS: Amazon Linux2

## 概要
ファイルの各行先頭から、7文字がIDで、そのパターンが以下の通りであることを調べます。

パターン：ID + 数字5文字
[例]ID12345

該当しない場合は、対象の行数とその内容を出力し、最後にパターンマッチしなかった件数合計を出力します。

## コード

```Bash:count_unmatch_line.sh
#!/bin/bash
#
# マッチしない行をカウント
#
# $1 検査したいファイル名
#

# マッチしない行数合計
countNum=0
# 行番号
countLine=0

echo "マッチしない行をカウントします"
echo "------------------------------"

while read line
do
        countLine=$((countLine+1))
   if [[ ! ${line:0:7} =~ ^ID[0-9]{5}$ ]] ; then
        echo "$countLine行目：${line:0:7}"
        countNum=$((countNum+1))
   fi
done < $1

echo "------------------------------"
echo "マッチしない行は合計$countNum件です"
```

## 実行してみる
以下のファイルで、先頭7文字が、ID + 数字5文字になっていない行と内容を表示、カウントします。

```:hoge.tsv
ID12341	000000	00000	123	000001
ID12342	000000	00000	125	000001
ID12343	000000	00000	124	000001
ID12344	000000	00000	123	000002
ID1?345	000000	00000	123	000003
ID12346	000000	00000	124	000002
ID12347	000000	00000	123	000004
ID123a8	000000	00000	125	000002
```
5,8行目に不正な値が含まれています。
※スペースっぽい箇所は、タブです。

### 実行コマンドと結果
```
$ bash count_unmatch_line.sh /product/share/eee/hoge.tsv
マッチしない行をカウントします
------------------------------
5行目：ID1?345
8行目：ID123a8
------------------------------
マッチしない行は合計2件です
```
うまくいきました！


## 参考

* [【シェルスクリプト】ファイルの中身を一行ずつ読み込む方法 | server-memo.net](https://www.server-memo.net/shellscript/read-file.html)
* [シェルスクリプトでの正規表現を使ったバリデーション | unhurried](https://unhurried.hatenablog.com/entry/shell_regex_validation)
* [uuidのバリデーションチェックをする正規表現(bashシェルスクリプト編) | 瀬戸内の雲のように](https://www.setouchino.cloud/blogs/107)
* [正規表現 | Bash入門](https://bash.open-code.club/%E6%AD%A3%E8%A6%8F%E8%A1%A8%E7%8F%BE/index.html#{}%20%E7%B9%B0%E3%82%8A%E8%BF%94%E3%81%97)
CMakeでgitのコミットハッシュをコードに埋め込む

S/Wだとそんなことはまずないが、H/Wだと今動いているコードが何か知りたいので、コードの一部にgitのコミット番号を埋め込みたい、みたいなことが起こる (らしい。) その時に引っかかったことがあるので残しておく。結論から言うと`TARGET`を使う`add_custom_command`を使うのが一番いい気がする。なおCMakeに関してはほとんどわかっていないのでご容赦を...

## gitのコミットハッシュを取得する
gitのコミットハッシュ自体は下で取得できる(長いやつ)

```shell
$ git log --pretty=format:%H -1
# 又は
$ git rev-parse HEAD
```
短いやつ

```shell
$ git log --pretty=format:%h -1
# 又は
$ git rev-parse --short HEAD
```

## CMakeの処理3段階
1. Configure ファイルの依存関係をさらう
2. Generate さらった依存関係を元にビルド用ファイルを作成
3. Build ビルドを実行  
の主に3段階ある。よく

```shell
-- Configuring done
-- Generating done
-- Build files have been written to: /hogehoge
```
みたいな表示を見る。
## CMakeでコマンド実行 
CMakeでコマンドを実行する方法は主に2通りある。 `execute_process` と `add_custom_command`の2つ。2つと書いたが、`add_custom_command`には使い方が2通りあって、頭に`OUTPUT`を持ってくるか`TARGET`を持ってくるかで処理が全く違う。`OUTPUT`を持ってきた場合はビルド用のファイル生成で`TARGET`を使うのはビルド時にコマンド実行(ビルドイベント)をする用途になる。
cf. [add_custom_command - CMake](https://cmake.org/cmake/help/latest/command/add_custom_command.html)
このうち、上のビルド時に実行されるのは`add_custom_command`の`TARGET`のみ。他は configure or generate で実行される。
## Gitハッシュ埋め込み
`execute_process`と`add_custom_command`の使い方についてはCMakeの公式リファレンスにしっかり載ってるのでそちらに譲る。
cf. [execute_process - CMake](https://cmake.org/cmake/help/latest/command/execute_process.html)
1つ目の方法として`execute_process`でハッシュ値を取得、`configure_file`で埋め込み、という手がある。WORKING_DIRECTORYは`git ~`を実行するディレクトリを指定するので、`git submodule`内部のハッシュ値が欲しい場合はそのディレクトリを指定してあげればいい。

```cmake:CMakeLists.txt
execute_process(COMMAND git rev-parse --short HEAD 
  OUTPUT_VARIABLE git_rev
  OUTPUT_STRIP_TRAILING_WHITESPACE
  WORKING_DIRECTORY ${WORKING_DIRECTORY})
configure_file ("hogehoge.tmp" "hogehoge.h")
```
`hogehoge.tmp`の中に`@git_rev@`みたいな文字列を用意しておけば、そこが勝手にgitのハッシュに置き換わって`hogehoge.h`を出力してくれる。
別の方法として`add_custom_command`で`OUTPUT`を使う場合。こちらは公式リファレンスにもあるが役目がGenerating Filesなのでビルド前にファイル生成を行うのが主目的。そのファイルが`CMakeLists.txt`でビルドに使用されるとわかっている時、適当に文字列をハッシュに書きかえる`.bat`なり`.sh`なりを用意してあげればconfigure & generate中にそのコマンドが実行されてくれる。

```cmake:CMakeLists.txt
add_custom_command(OUTPUT hogehoge.h
  COMMAND hogehoge.bat
  WORKING_DIRECTORY ${WORKING_DIRECTORY})
```
ただ上の2つの問題点は上でも書いたようにビルド直前では実行されないことだ。一度フォルダを開いてconfigure & generateが済まされた場合、`hogehoge.h`に何らかの変更が加えられてもその変更を超えてgitのハッシュの反映をなされない。そういう場合でも変わらず埋め込みたい場合は`add_custom_command`の`TARGET`を使用する。こちらの役割はBuild Eventsである。

```cmake:CMakeLists.txt
add_custom_command(TARGET ${PROJECT_NAME}
  PRE_BUILD
  COMMAND hogehoge.bat
  WORKING_DIRECTORY ${WORKING_DIRECTORY})
```
これはビルドが実行される場合、つまりプログラムが走る場合常に直前に実行されるので他の改変の影響を受けない。のでそうして欲しい場合は`add_custom_command`の`TARGET`を使用しよう。ここではビルド直前に反映されて欲しいので`PRE_BUILD`としているが、`PRE_LINK`, `POST_BUILD`などで実行するタイミングを指定できる。
SlackのIncoming Webhookについて（2021年2月版）

[こちら](https://qiita.com/engineerYodaka/items/0959d686eaa4c799d0ab)の記事を読んで気が付いたのでまとめておきます。

# Incoming Webhookってなに
Slackのチャンネルに外部からPOSTでメッセージを送るやつです。

# Slackにはもともと2種類のIncoming Webhookがある
Slackには

(1) Custom Integrationsの中のIncoming Webhook
(2) Slack Appの一機能としてのIncoming Webhook

がありました。比較表を示します。

           | Custom Integrations版 | App版
-----------|-------------------------|----------
ステータス | 非推奨                  | 現行
送信先チャンネル | 任意[^1] | 固定。1チャンネルにつき1URLを事前に発行する必要がある
アイコン   | 任意[^2]       | Appのアイコンで固定
名前       | 任意[^3]       | Appの名前で固定
データ形式 | `payload={JSON}` | `{JSON}`
HTTPヘッダ |                  | `Content-Type: application/json` が必須

[^1]: デフォルト値はある。 `channel` パラメーターでメッセージを任意のチャンネルに送信可能
[^2]: デフォルト値はある。 `icon_emoji` もしくは `icon_url` パラメーターで任意に指定可能
[^3]: デフォルト値はある。 `username` パラメーターで任意に指定可能

このように、App版はCustom Integrations版から単純に制約が強くなっています。またメッセージの形式も変わりました。なお、Custom Integrations版も [Layout blocks](https://api.slack.com/reference/block-kit/blocks) には部分的に対応しています。

# それって嬉しいの？　嬉しくなくない？
もともとCustom Integrations版は「どこから、何のために」使われているかが非常に分かりづらく（極端な話、1個で全てをまかなうこともできるので）発行したURLがとっちらかる傾向にありました。制約が強くなったことにより、

* 目的別にAppを作る
* チャンネルごとにURLを発行する
* そのAppからメッセージが来る

という流れが明確になり、管理はやりやすくなりました（私はそう思っています）。

またAppの一機能として位置付けられたことにより、インタラクティブなフォームも作れるようになっています。今後はおとなしくApp版を使いましょう。

# Custom Integrations版はもう使えないの？
この記事を書いている2021年2月25日時点ではまだ問題なく使えます。年単位で「移行しましょう」というメッセージが表示され続けていますが、いきなり消えてなくなることはないでしょう。そう思いたいです。

# Custom Integrationsが出てこないんですが？
Custom Integrationsの各種機能をこれまで一度も使ったことがない場合は新規追加ができなくなりました（下図）。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618258/a1adfa44-65e5-69f3-f563-706006132da7.png)

しかし、現時点では直接以下のURLにジャンプして「Add to Slack」ボタンを押せば追加することが可能です。どうしてもCustom Integration版が使いたい人は自己責任でどうぞ。

■Incoming Webhook
https://YOUR-WORKSPACE-NAME.slack.com/apps/A0F7XDUAZ-incoming-webhooks

■Slash Commands
https://YOUR-WORKSPACE-NAME.slack.com/apps/A0F82E8CA-slash-commands

■Outgoing Webhook
https://YOUR-WORKSPACE-NAME.slack.com/apps/A0F7VRG6Q-outgoing-webhooks

■Bots
https://YOUR-WORKSPACE-NAME.slack.com/apps/A0F7YS25R-bots

# まとめ
移行、頑張りましょう……
railsを使ってアプリを作る3

####詳細ページ等のid付きのページの作成と表示####

#####mvcの作成#####
urlが```/details/1```みたいにする場合は、ルーティングの書き方を
get "details/:id" => "details#show
にする

detailsコントローラーにshowメソッドを作成する

show.html.erbのファイルを作成する

#####idの取得と利用方法#####
コントローラーでparams[:id] で取得する
取得した値を
```＠id = params[:id]```とし、viewで```<%= @id %>```と書いて使う

画面に置くリンクはこんな感じ
```<% @details.each do |detail| %>
　　<%=link_to (animal.content,"/animal/#{detail.id}")%>
<% end %>```
FirebaseCloudFunctionsの構築→デプロイメモ(2021年2月現在)

# 概要

2021年2月現在、Firebase Cloud Functions で API を作る方法、ググっても出るけどセキュリティ周りの関係でちゃんと使えるようになるまでが若干面倒だったのでメモ程度にまとめておく。(Firebase 自体の使い方がわかっている前提)

※ Firebase の Spark プラン(無料版)では Cloud Functions は利用できない

# 手順

1. 任意のディレクトリで `firebase init` でコンソール内の指示に従って初期化
1. `package.json` の `engines.node` から node バージョンを指定 (Node.js 8 は現在非推奨)
2. `./functions/index.js` を編集
3. `firebase serve --only functions` でローカルで検証 (URLが表示される)
3. Cloud Build API を有効化しておく
4. `firebase deploy --only functions:関数名` でデプロイ (長い)
5. [この記事](https://qiita.com/toshiaki_takase/items/ce65cd5582a80917b52f) の通りに Functions に権限を付与
6. 4番で表示されたURLにアクセスすれば完了
7. 以降の変更は3, 4番を繰り返せばOK

URLが表示されない場合は下記にアクセス。(リージョン名はデフォルトが `us-central1`?)

```
ローカル: http://localhost:5000/[プロジェクトID]/[リージョン名]/[関数名]
本番: https://[リージョン名]-[プロジェクトID].cloudfunctions.net/[関数名]
```

# TIPS

## プリインストールされているパッケージ

ffmpeg とか imagemagic とか入ってて良い。

[クラウド機能に含まれるシステムパッケージ](https://cloud.google.com/functions/docs/reference/system-packages)

## nodeバージョンの変更方法について

```package.json
  "engines": {
    "node": "10"
  }
```

## スクリプトの書き方について

```js
const functions = require('firebase-functions');
const cors = require('cors')({origin: true});

// TODO: 好きな関数名を設定する
exports.関数名 = functions.https.onRequest((request, response) => {
  // TODO: CORS対策
  cors(request, response, () => {
    // TODO: 特定のHTTPメソッドのみを受け入れる
    if (request.method !== 'POST') {
      response.send('This is not post request.')
      return
    }

    // TODO: ログ出力を行う
    functions.logger.log("This is debug log.");

    // TODO: GETクエリを取得する
    const query = request.query;
    const param1 = query.param1;
    
    // TODO: POSTリクエストを取得する
    const body = request.body;
    const param2 = body.param2;

    // TODO: JSONを返す
    const json = {};
    response.status(200).json(json);
  })
});

// TODO: 複数の関数を定義する
// TODO: https://firebase.google.com/docs/functions/organize-functions?hl=ja
exports.関数名2 = functions.https.onRequest((request, response) => {
});
```

# まとめ

CloudFunctions 自体の詳しい説明はググるといっぱい出るのでそちらを参考にするかと思い、こちらの記事はあくまでメモ的な形で利用していただけると嬉しいです。ちなみに自分は CloudFunctions + GmailAPI でお問い合わせページを作りました、便利ですね。

# 参考

- [はじめに: 最初の関数の記述、テスト、デプロイ  |  Firebase](https://firebase.google.com/docs/functions/get-started?hl=ja)
- [Firebase で Cloud Functions を簡単にはじめよう - Qiita
](https://qiita.com/tdkn/items/2ed2b01f2656fc50da8c)
- [Firebase functionsで 403 error "Your client does not have permission to get URL /** from this server" となった場合の解決策 - Qiita](https://qiita.com/toshiaki_takase/items/ce65cd5582a80917b52f)