OmniAICreator/Qiita-1.07M huggingface dataset:
【Flutter】入力フォームの色を変更してみる（InputDecoration）

Flutterで入力フォームを作成するには、`TextFormField`が必要になります。
その中の`decoration`に、`InputDecoration`を付与させることで、入力フォームを様々なスタイルにカスタマイズすることが可能になります。

今回は、入力フォームの色（縁の中）を変更していきます。

## 入力フォームの色を変更する
まずは、基礎となる入力フォームを作成していきます。

### 入力フォームを作成する
以下のコードで、縁を囲った入力フォームができます。

```dart
...

                    Expanded(
                      child: TextFormField(
                        decoration: InputDecoration(
                          enabledBorder: const OutlineInputBorder(
                            borderSide: BorderSide(
                              color: Color(0xff000000),
                              width: 2,
                            ),
                            borderRadius: BorderRadius.all(Radius.circular(15)),
                          ),
                          focusedBorder: const OutlineInputBorder(
                            borderSide: BorderSide(
                              color: Color(0xff000000),
                              width: 2,
                            ),
                            borderRadius: BorderRadius.all(Radius.circular(15)),
                          ),
                          hintText: 'メッセージをおくる',
                        ),

...
```

上記コードでは、キーボードが表示されている時と、キーボードが表示されている時のスタイルを付与しております。

![Simulator Screen Shot - iPhone 11 - 2020-10-08 at 19.04.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/425008/bd26239b-4424-c0cf-01b4-851fd08542a2.png)

### 入力フォームに色を付与する
以下のコードで、実際に入力フォームに色を付与しております。

```dart
...

                    Expanded(
                      child: TextFormField(
                        decoration: InputDecoration(
                          filled: true,
                          fillColor: const Color(0xff005dff),
                          enabledBorder: const OutlineInputBorder(
                            borderSide: BorderSide(
                              color: Color(0xff000000),
                              width: 2,
                            ),
                            borderRadius: BorderRadius.all(Radius.circular(15)),
                          ),
                          focusedBorder: const OutlineInputBorder(
                            borderSide: BorderSide(
                              color: Color(0xff000000),
                              width: 2,
                            ),
                            borderRadius: BorderRadius.all(Radius.circular(15)),
                          ),
                          hintText: 'メッセージをおくる',
                        ),

...
```

`filled`を`true`に設定してから、`fillColor`に色を設定していくことで、入力フォームに色を付与させることができます。

![Simulator Screen Shot - iPhone 11 - 2020-10-08 at 19.03.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/425008/206555c8-77ce-c9b1-f603-1e5ccf34564d.png)

これで、入力フォームの色を変更できるようになりました。
アプリケーションのデザインに合わせた入力フォームのカスタマイズが可能になることでしょう。
Docker（windows）でopenvpnを動かす

# こんな人向け

+ Dockerで複数IPを取得したい
+ NordVPNクライアントの挙動がおかしい（有効なサブスクリプションがあるのにログインできない）

# 概要

NordVPNのクライアントをインストールして、一度は接続できたが、数時間後、一度NordVPNクライアントからログアウトすると再度NordVPNにログインできなくなった。

既存の問題らしく、NordVPNクライアントの使用をやめ、OpenVPNクライアントでNordVPNに接続することにした。
[raddit : Is the "expired subscription" bug gonna be fixed some day?](https://www.reddit.com/r/nordvpn/comments/cnb52c/is_the_expired_subscription_bug_gonna_be_fixed/)

# 手順

1. ネットワーク権限、DNSサーバーを指定してコンテナを立ち上げる
2. OpenVPNをインストールする
3. NordVPNの設定ファイルをダウンロード
4. 接続する

## 1.ネットワーク権限、DNSサーバーを指定してコンテナを立ち上げる

```
docker pull ubuntu
docker run -it --cap-add=NET_ADMIN --cap-add=SYS_MODULE --device /dev/net/tun --dns 8.8.8.8 --name ubuntu1 --sysctl net.ipv4.conf.all.rp_filter=2 ubuntu
```

+ ネットワーク権限関係：--cap-add=NET_ADMIN、--device /dev/net/tun
+ DNSサーバー指定：--dns 8.8.8.8（googleサーバー）

## 2.OpenVPNをインストールする

```
apt-get install openvpn
```

## 3.NordVPNの設定ファイルをダウンロード

```
cd /etc/openvpn
apt-get install wget unzip
wget https://downloads.nordcdn.com/configs/archives/servers/ovpn.zip
unzip ovpn.zip
rm ovpn.zip
```

## 4.接続する

```
openvpn --config /etc/openvpn/ovpn_tcp/jp429.nordvpn.com.tcp.ovpn --auth-user-pass  <( echo -e "【NordVPNのID】\n【NordVPNのPass】" ) &
```

+ NordVPNのID/Pass：マイページのService credentials (manual setup)に表示されているUsername/Password
+ ※NordVPNサイトのログインID/Passではない
+ echoに指定する文字列 "" の中は半角スペースなし
+ 接続先を変更する際は「jp429」の部分を変える
Swiftで画像ローディングライブラリNukeを使ってAutoLayout比率ぴったりで画像を表示する

URLからUIImageViewに画像を表示する時、一瞬迷うかもしれません。
こういう場合は、NukeやKingfisherなどの画像ローディングライブラリを使うと楽です。

```swift
Nuke.loadImage(with: url, into: imageView)
```

Nukeはこれだけで使えて便利ですが、読み込む画像に応じて比率が違ってくる可能性への対応などは少し考える必要があります。
この記事では、そのような場合に比率を計算してAutoLayout経由でピッタリさせる方法をご紹介します。

```swift
Nuke.loadImage(with: URL(string: imageURL)!, options: ImageLoadingOptions(), into: self.writingImageView, progress: nil) { (result: Result<ImageResponse, ImagePipeline.Error>) in
      switch result {
      case .success(let imageResponse):
          self.imageRateLayoutConstraint.constant = imageResponse.image.size.width / imageResponse.image.size.height
      case .failure(let error):
          print(error)
      }
  }
}
```

Nukeのcompletionオプションを使えば取得した画像のサイズをこように取得して比率を計算することができますので `imageRateLayoutConstraint.constant` に代入することでコードからAutoLayoutに変更を与えることが出来ます。

画像に比率のAutoLayout設定を加えるには、このようにAspect Ratioを設定してください。

![CleanShot 2020-10-08 at 18.38.37@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6678/aafb9c59-8f90-9e82-0221-8d4c185821f9.png)

そして `@IBOutlet weak var imageRateLayoutConstraint: NSLayoutConstraint!` などを定義して Storyboard 上で接続します。
【before_actionの具体的な使用法】Railsのリファクタリング

# before_actionとは？
before_actionとは、Railsのコントローラーで使用できるリファクタリングの一種です。

**before_actionを使用すると、
コントローラで定義されたアクションが実行される前に、共通の処理を行うことができます。**

# 具体的な使用方法

以下のような中身のコントローラーについて見ていきます。

```ruby:app/controllers/tweets_controller.rb
class TweetsController < ApplicationController

  def index
    @tweets = Tweet.all
  end

  def new
    @tweet = Tweet.new
  end


  def create
    Tweet.create(tweet_params)
  end

  def destroy
    tweet = Tweet.find(params[:id])
    tweet.destroy
  end

  def edit
    @tweet = Tweet.find(params[:id])
  end

  def update
    tweet = Tweet.find(params[:id])
    tweet.update(tweet_params)
  end

  def show
    @tweet = Tweet.find(params[:id])
  end
  
  private
  def tweet_params
    params.require(:tweet).permit(:distance, :image)
  end
end
```
よく見ると、Railsの７つのアクションの内、
editとshowアクションの中身が、
**＠tweet = Tweet.find(params[:id])**
が繰り返し使用されています。

このようなコードを**リファクタリングし可読性を高めるため**に、
以下のように、before_actionを使用します。

```ruby:app/controllers/tweets_controller.rb
class TweetsController < ApplicationController
  before_action :set_tweet, only: [:edit, :show]

  def index
    @tweets = Tweet.all
  end

  def new
    @tweet = Tweet.new
  end

  def create
    Tweet.create(tweet_params)
  end

  def destroy
    tweet = Tweet.find(params[:id])
    tweet.destroy
  end

  def edit
  end

  def update
    tweet = Tweet.find(params[:id])
    tweet.update(tweet_params)
  end

  def show
  end

  private

  def tweet_params
    params.require(:tweet).permit(:name, :image, :text)
  end

  def set_tweet
    @tweet = Tweet.find(params[:id])
  end
end
```

このように、
before_actionを利用して、edit、showの2つのアクションの前に実行される、
set_tweet（メソッド名は自分で決める）というメソッドを新たに定義し、

先ほど繰り返し使用していた
**＠tweet = Tweet.find(params[:id])**
をまとめる事が可能になります。

#まとめ
before_actionを使用する事で、
コードが冗長になることを防ぎ、コードの可読性を上げる事ができます！

今回例として挙げたコードは、
edit、showの2つのアクションの中身が一緒でしたが、
繰り返し使用するコードが多ければ大きいほど効果がデカくなります！

Railsのリファクタリングとして、
参考にしてみてください！
Kintoneでコメントをデフォルト非表示にする方法

## Kintoneでのコメント機能

kintoneでは詳細画面にコメント機能があるが、詳細画面を開いた時にデフォルトでコメントタブが開いてるのがたまにうざい時があるので、これをデフォルトで非表示にしたい。
kintoneが標準でコメントを無効にする機能を提供しているけど、これを使うとコメント機能自体使えなくなってしまうからね。コメント使いたいけどデフォルトでは表示したくない時にムカついてしまう。

やり方がどこにもまとまっていなかったので、残します。

![スクリーンショット 2020-10-08 17.55.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/344226/3c295f38-3673-cc70-dfc1-9be2f4cb951e.png)


## 方法
まずは実際のコード。

```javaScript:tab_none.js
(function($) {
  'use strict';

  kintone.events.on('app.record.detail.show', function(event) {
    var hashParam = location.hash.substr(1).split('&');
    var paramList = {};
    
    hashParam.forEach( (value, index) => {
      var paramSplit = value.split('=');
      paramList[paramSplit[0]] = paramSplit[1];
    });

    if (paramList.tab == 'comments') {
      paramList.tab = 'none';
      location.hash = $.param(paramList);
    }
    
  });
})(jQuery);
```



解説すると、ここで、urlのハッシュのパラメータを取得して、パラメータごとに配列に格納している。

```javaScript
    var hashParam = location.hash.substr(1).split('&');
```

オブジェクトを生成して、そこに`split`で分けたパラメータ名と値で追加している

```javascript

    var paramList = {};

    hashParam.forEach( (value, index) => {
      var paramSplit = value.split('=');
      paramList[paramSplit[0]] = paramSplit[1];
    });
```


`tab`が`comments`になっているときにコメントタブが開くので、この条件で`tab`を`none`にしてurlパラメータを更新している

```javascript
    if (paramList.tab == 'comments') {
      paramList.tab = 'none';
      location.hash = $.param(paramList);
    }
```

## 注意点
この状態でコメント機能を使いたい時はコメントのタブをクリックすれば開くけど、リロードした時には`app.record.detail.show`のイベントが発火してまたコメントが閉じちゃうので注意が必要。

## 感想
kintoneではjQueryやvue.jsを使うことができるのでそれらをちょいちょい使っているのですが、jQueryにはオブジェクトをパラメータの文字列に変換できる`$.param(object)`がいるんですね。初めて知って感動した。

みんなも使おう。
私的 Rust スタイルノート

古い投稿です 🙇 

# リンク

* [Rust API ガイドライン](https://sinkuu.github.io/api-guidelines/)
* [rust-analyzer/style.md]

[rust-analyzer/style.md]: https://github.com/rust-analyzer/rust-analyzer/blob/master/docs/dev/style.md)

# スタイル

## `use` 宣言

[rust-analyzer/style.md] を参考にします。

## 定数

`const VALUE` が推奨されています:

```rust
pub struct A;

impl A {
    pub const VALUE: u32 = 0;
}
```


## 命名

モジュール名は短くします:

* `mod gfx`: graphics
* `mod geom2d`: geometry 2D

型名は気分に応じて短くします:

* `mat: Mat3f`
* `cam: Camera2D`
* `vbuf: VertexBuffer`

変数名・関数名はアイデアを尽くして短くします:

* `l2w`: local 座標を world 座標へ変換
* `rcx: RenderContext`

> `rcx` は rustc の [命名規約](https://rustc-dev-guide.rust-lang.org/conventions.html#naming-conventions) より

名前は複数形が自然になる形を好みます:

* ~~vtx~~ `vert`, `verts`: vertices (頂点)

パッケージ名に関しては、 `my-crate` のようにハイフンを使うのが慣習でした。しかしライブラリ名は `my_crate` であり、コード上では `my_crate` と書きます。なので僕はパッケージ名も `my_crate` に統一します。

## ブロックを積極的に式として使う

> Tiled マップの読み込みを例に出します。雰囲気で読んでください 🙇

一次変数や mutable 変数のスコープの限定に使います:

```rust
let texture = {
    let relative_img_path = &tileset.images[0].source;
    let img_path = tiled_dir_path.join(relative_img_path);
    TextureData2d::from_path(device, &img_path).unwrap()
};

TilesetImageSpan {
    first_gid: tileset.first_gid,
    texture,
}
```

実はこのコードもさらに大きな式として書き直せます:

```rust
TilesetImageSpan {
    first_gid: tileset.first_gid,
    texure: {
         let relative_img_path = &tileset.images[0].source;
         let img_path = tiled_dir_path.join(relative_img_path);
         TextureData2d::from_path(device, &img_path).unwrap()
    },
}
```

やり過ぎるとフローが隠れるますので、好みの問題でしょうか……。

## `mod.rs` vs `module_name.rs`

Rust 2018 以降は新しいモジュールの書き方が推奨されています。実際使ってみるとディレクトリ移動が減っていいなと思います。

# メタ

## サブクレート

`crates` ディレクトリに入れます。

> [ripgrep](https://github.com/BurntSushi/ripgrep/tree/master/crates) や [rust-analyzer](https://github.com/rust-analyzer/rust-analyzer) がそうしています。

## よく使う外部クレート

* ログ:  
[log](https://docs.rs/log/), [env_logger](https://docs.rs/env_logger)
* エラー:  
[anyhow](https://docs.rs/anyhow/), [thiserror](https://docs.rs/thiserror/)
* データ型の実装:  
[num_enum](https://docs.rs/num_enum), [bitflags]((https://docs.rs/bitflags/)), [auto_ops](https://docs.rs/auto_ops)

などなど……

## Infra doc

> 2020/11/18 から stable 版 `cargo` でも使用できます

`[item](path/to/item)` と書いてリンクを張れます:

```rust
/// [`path`](std::path), [`sub`](self::sub)
pub struct B;

mod sub {}
```

スコープ内のアイテムは、パス指定無しで自動的にリンクされます:

```rust
/// [`B`] is linked automatically!
pub struct A;

pub struct B;
```

パスは別の行から指定することもできます:

```rust
/// [`C`] is in module [`c`]. Links to [`C`] are supplied below:
///
/// [`C`]: self::c::C
struct X;

mod c {
    /// This is an [item in super module linked with an alias][alias]
    ///
    /// [alias]: super::X
    pub struct C;
}
```

ちなみに docstring:

```rust
/*!
This is a multi-line docstring comment!
*/
```

crates.io も nightly 版の cargo でドキュメント生成をしているので、積極的に使って大丈夫です。

# 以上

また何か気付いたら追記します。
webpackで別ファイルのvueコンポーネントが読み込めない時の、原因と対処法。

webpackで作成したvueプロジェクトで、vueテンプレートを読みこもうとした際に下記エラーが発生。

解決策を見つけるまでに無駄にハマった、、解決は超簡単でした。


##症状
ブラウザ表示用のApp.vueファイルで別ファイルのvueコンポーネントを読み込む記述をしたがエラーが発生。


App.vueファイルの中でTestというコンポーネントをimportしている。

```vue:App.vue
<template>
  <div class="app">
    <Test/>
  </div>
</template>

<script>
import Test from './Test'
export default {
  name: "App",
  components:{
    Test
  }
}
</script>
```

```:エラー一部抜粋
Module not found: Error: Can't resolve './Test' in '/Users/projects/webpack-table/src/components'
 @ ./src/components/App.vue?
```


##原因と解決策
ファイル指定で**拡張子が必要**。ただこれだけ。

```vue:App.vue
import Test from './Test.vue'
```


vue-cliで作成したプロジェクトの場合、vue-cliが拡張子を判断して自動解決するようになっているため、.vueなしでも読み込めた。

**webpackで同じ処理をする場合は自分で記述する必要がある**。


<br>
##webpackで拡張子の自動解決
webpackでも拡張しなしでimportすることも可能。

webpack.config.jsファイルに以下の内容を記述する。（ついでにjsとjsonファイルも）

```
module.exports = {
  //...
  resolve: {
    extensions: ['.vue', '.js', '.json']
  }
};
```


＞[webpack resolve](https://webpack.js.org/configuration/resolve/#resolveextensions)
seleniumを使ったスクレイピング~2~


前回に引き続いて今回は`Selenium`を使ってスクレイピングを行う処理を行っていきたいと思います。


# 実行環境
* MacOS
* Python3.7.6(anaconda)
* VSCode

# 参考にした記事
[Seleniumのlocatorで必須となるcssSelectorをまとめてみた](http://netbusinesstips.seesaa.net/article/455649250.html)
[PythonのSeleniumで特定の要素を指定して取得する](https://www.soudegesu.com/post/python/selenium-element-selector/)
[Python、Seleniumの基本](https://blog.narito.ninja/detail/69/)
[【Python】find_elements_by_css_selector・・・cssセレクタから要素を取得する](https://www.seleniumqref.com/api/python/element_get/Python_find_element_by_css_selector.html)
[【Python3】ブラウザを経由したスクレイピング(動的なページなど)【Selenium】](https://qiita.com/syunyo/items/09cc636344212112a6fc)
[HTMLタグ・要素・属性・CSSプロパティの整理](https://qiita.com/imaizume/items/30ac40933f3453586ffc)
[Seleniumを安定稼働させるために行うべき３つの設定(Headlessモードにも対応)](https://tanuhack.com/stable-selenium/)

# CSSセレクタの取得方法
seleniumを使う際に、`find_element_by_css_selector("セレクタ")`を使用して、ソースコードの中から目的のcssセレクタを取得するのですが、最初は自分でHTMLの階層を読み解いていかなければならないのかと思っていました。

色んな記事を読んでてなんでこの人たちはちゃんとcssセレクタを取得できているのかなと不思議に思っていたのですが、どうやらソースコードをコピーすることができるみたいでして、



```
① webページの自分が自動的にその場所をクリックしたりしたい場所で右クリックをする
② 検証ボタンを押して検証を行い、自分が欲しいソースコードの場所がマーカーされているので確認
③ そのソースコードの場所で右クリックをしてコピーを押すと、コピーセレクタというのがあるからそれを押す
④ エディタに貼り付ければ欲しいcssセレクタが表示される
```
といった流れで`cssセレクタ`を取得することが可能です。

# elementsとelementの違い
`elements`にはリストが格納されるが、`element`には1つの数字が格納される

# clearの使い道
`clear`は検索ボックスなどに予め入力されている値を消去できます。
なので、検索ボックスに何か入力をして検索したいとなって場合に、予め入っている値を消去して自分の検索したいことだけを検索をするという処理ができるようになります。

# idとclass
`id`は**1つのwebページに1つしか使えない**ようになっておりますが、`class`は1つのページに何回も使えるようになっております。なので、idで検索する方が自分が取得したい情報にアクセスしやすくなります。


# まとめ
なんとかInstagramで`自動でいいね`をして、`自動でフォロー`するという処理を作ることができました。
作ってみたら意外と仕組みが面白かったので、楽しく作ることができました。
Github Codespaces beta版が開放されたのでざっくり見てみた

# なんか使えるようになったらしい
`You're now in the Codespaces beta!` というメールが昨日来ていた
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210788/c8c9ab1d-31b0-4c98-34c5-764b3121edb5.png)

# Github Codespacesとは
GitHub の統合開発環境 (IDE)
https://github.com/codespaces

- クラウド上でローカルにcloneせずに開発できる
- ブラウザ実行なのでタブレットでもなんでも使えるらしい

GitHub がホストし、Visual Studio Code が提供ということで見た感じVSCodeと違和感なく使えそう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210788/1929bfe6-90fe-65d4-54cb-e2a8de25340a.png)

## beta版制限

- 1アカウントにつき2つのスペースまで
    - プランと価格は、一般提供の前に発表、現段階では制限はあるけど無料
- 任意のパブリックリポジトリ、またはユーザアカウントが所有する任意のプライベートリポジトリにしか今は使えない
    - つまりOrganization上のプライベートリポジトリには使えない
    - 現段階ではOSS活動などでのユースケースを想定しているらしい

# [HowTo] Visual Studio Codeからcodespacesにも接続できる
codespaces画面左下の青ボタンから接続するのが簡単
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210788/e4a19507-11bd-5349-65af-52cbb055c44c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210788/b029ec7c-3c55-3aa2-abfd-67542ed58736.png)

VSCodeにサジェストされる拡張機能を追加
https://marketplace.visualstudio.com/items?itemName=ms-vsonline.vsonline

ポップアップが出るので許可
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210788/bb2cd166-e3c2-c83d-0575-22a3fb6a505b.png)
ブラウザにもどってContinue
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210788/5da15963-39ba-a0dd-a7a8-699c63f804f9.png)
Success!したらVScodeにもどります
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210788/90c326a6-a14a-92a1-e904-48eb2823156f.png)

無事ひらけました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210788/4651728d-0d80-573a-86c3-bce254b252a4.png)

たぶんcodespacesで軽く見てたけどやっぱりメインPCでがっつりやりたくなったらこうして行き来するんでしょう

つないでるだけだと書いてる内容がリアルタイム同期されるわけじゃないので、そういうのは別拡張機能LiveShareを使うのがよさそう


# おわり
メインPC以外でちょっと開発したいとかcloneするほどいじるというわけでもないときに便利
個人的にはレビューで使うと見やすいような気がする（基本的にorg上private repoにも使えるようになってからの話だけど）
スマホアプリも気に入って使っているのでこちらも期待していきたい
YOLOのオリジナルデータ学習手順 #0 YOLOとは

**Chapters**

📘 **Chapter #0**　[YOLOとは](https://qiita.com/tfukumori/items/65056a4d51b531cdd45c)
📘 **Chapter #1**　[環境設定](https://qiita.com/tfukumori/items/6f33af8f9dc2ac974f43)
📘 **Chapter #2**　[アノテーション](https://qiita.com/tfukumori/items/0911c8fe1f5319530d4b)
📘 **Chapter #3**
　📗 **Chapter #3-1**　[YOLOv3 Keras版実装](https://qiita.com/tfukumori/items/d1f79078803d8a7fe103)
　📗 **Chapter #3-2**　[YOLOv3 Darknet版](https://qiita.com/tfukumori/items/15edd532e0a04c0a4672)
📘 **Chapter #A**
　📗 **Chapter #A-1**　[YOLOの各バージョンについてまとめ](https://qiita.com/tfukumori/items/519d84bf3feb8d246924)
　📗 **Chapter #A-2**　[YOLOv3 Keras版実装に関して関連記事のまとめ](https://qiita.com/tfukumori/items/9e62c4a7acd7ea6ddd3b)
　📗 **Chapter #A-3**　[ONNX変換・確認ライブラリ、アプリケーションまとめ](https://qiita.com/tfukumori/items/3f438294e722bc29fe16)

---

# TL;DR

- YOLO（今のところYOLOv3）についてオリジナルデータ（独自データ）学習手順について、記載します。
- この記事ではYOLOの概要について説明します。

# YOLOとは

YOLOとは、**画像から検出したいものが含まれている領域を判断する**リアルタイムオブジェクト（物体）検出の手法です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204150/1d9fb445-8310-19f7-f15e-731269464266.png)
引用元：https://pjreddie.com/darknet/yolo/

以下のような長所と短所を持っています。
　長所：高速、背景と物体の区別ができる、一般化が可能
　短所：最先端の手法と比較すると精度が低い、小さな物体の検出が苦手

YOLOv3が主流でしたが、2020年にYOLOv4とYOLOv5が発表され現在随時更新されています。

YOLOv3、YOLOv4のオリジナルはC++で書かれたDarknetというライブラリで実装されています。YOLOv5はPyToachで実装されています。

詳しくは、[YOLOの各バージョンについてまとめ](https://qiita.com/tfukumori/items/519d84bf3feb8d246924)参照。

# 参考資料

- [【物体検出手法の歴史 : YOLOの紹介】 - Qiita](https://qiita.com/mdo4nt6n/items/68dcda71e90321574a2b)
- [YOLOv3 論文訳 - Qiita](https://qiita.com/mdo4nt6n/items/7cd5f106adc775e5d92b)
- [オブジェクト検出 YOLO](https://www.renom.jp/ja/notebooks/tutorial/image_processing/yolo/notebook.html)
- [物体検出についての歴史まとめ(1) - Qiita](https://qiita.com/mshinoda88/items/9770ee671ea27f2c81a9)
- [物体検出についての歴史まとめ(2) - Qiita](https://qiita.com/mshinoda88/items/c7e0967923e3ed47fee5)
【VBA】外部の画像を読込んで、リンクを作成する

# はじめに
備忘録として投稿します。
Excelに画像を読込んで、読込んだ画像にリンクを設定するマクロです。
画像をクリックすると、元の画像が表示されるようにします。

このマクロを書いたのは、入力された情報をもとにレポートを作成し、固定の枠に（セルが結合されていてもOK）画像を差し込むときに作りました。

# 調整が必要だったこと
わりと簡単に出来るのですが、細かい部分で調整が必要でした。
・画像を差し込む枠から、画像が少しはみ出る。（枠の内側に収まるようにtop,leftの位置を「+1」して調整）
・画像を枠のサイズに合わせると、画像がゆがむ。（画像の縦横比率を維持したまま、縮小する。）
・画像を縮小すると、少しはみ出る。（1％だけ小さくする。）

# コード
コードの細かい説明は、コメントに書きました。

```
Private Sub PictureLinkAdd(ByVal strSheetName As String, ByVal strRange As String, ByVal strPicturePath As String)
'*************************************
'画像リンクを作成します。
'*************************************
'＜注意＞
’シートの表示を「標準」にしておかないと画像がずれて配置される事がありました。

    On Error GoTo PictureLinkAddErr
    
    'オブジェクトをセット
    Dim objSheet As Worksheet
    Set objSheet = ThisWorkbook.Sheets(strSheetName)
    
    '画像の取り込み
    'top,leftの位置を枠の内側に収まるように「+1」して調整する。
    With objSheet.Shapes.AddPicture( _
            FileName:=strPicturePath, _
            LinkToFile:=False, _
            SaveWithDocument:=True, _
            Left:=objSheet.Range(strRange).Left + 1, _
            Top:=objSheet.Range(strRange).Top + 1, _
            Width:=0, _
            Height:=0)
        '一旦、元のサイズに戻す
        .ScaleHeight 1, msoTrue
        .ScaleWidth 1, msoTrue
        'サイズ調整、枠内に収める(アスペクト比を変えずに画像のサイズ調整)
        Dim objRange As Range
        Set objRange = objSheet.Range(strRange)
        Dim dblScal As Double
        If objRange.Width / .Width < objRange.Height / .Height Then
            dblScal = WorksheetFunction.RoundDown(objRange.Width / .Width, 2)
        Else
            dblScal = WorksheetFunction.RoundDown(objRange.Height / .Height, 2)
        End If
        Set objRange = Nothing
        '画像がはみ出さないように「１％」だけ小さくする
        dblScal = dblScal - 0.01
        .Width = .Width * dblScal
        .Height = .Height * dblScal
    End With
    '画像にハイパーリンクを作成する（画像をクリックすると画像を開くようになる）
    'objSheet.Shapes.Countは、最後に追加されたオブジェクト（＝自分で追加した画像オブジェクト）のインデックスを得るために使っています。
    objSheet.Hyperlinks.Add Anchor:=objSheet.Shapes(objSheet.Shapes.Count), Address:=strPicturePath
    
    Exit Sub

PictureLinkAddErr:
'ここで起きたエラーはスルーする。
'調査の時は、on error gotoをコメントにして下さい。
    Err.Number = 0
    Set objSheet = Nothing
End Sub
```

# 最後に
最初は難しく思いましたが、案外簡単に出来ます。
※シートの表示を「標準」にしておかないと画像がずれてしまう事があるので、注意してください。
CPad for Windows のセットアップ・動作試験


ここでは，
https://qiita.com/proftanaka/items/37981a326b769c1779b1
Borland C++コンパイラのインストールをしたものとして説明します．

(1)　まず bcpad231.lzh を以下のサイトよりダウンロードします．
http://cpad.michikusa.jp/
このページのなかで
「CPad for Borland C++Compiler ダウンロード(bcpad231.lzh)」
と書いてあるところが該当します．

(2)　このlzhファイルの解凍はWindows10では標準的に展開できないので，
lzhを解凍可能なアーカイバをダウンロードしてセットアップする必要があります．
たとえば，
＊7-Zip
https://sevenzip.osdn.jp/
＊LhaPlus
https://forest.watch.impress.co.jp/library/software/lhaplus/
＊Lhasa
https://forest.watch.impress.co.jp/library/software/lhasa/
などありますので，お好みでなさると良いでしょう．

(3)　bcpad231.lzhを展開します．ここでは c:\bcpad に展開したものとします．
すると展開先のフォルダの内部は以下のようになります．
![2020-10-08 (44).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/773471/d81bfe0c-bde1-1294-332f-44303215a996.png)

(4)　bcpad.exeの起動
ここで bcpad.exe を起動します．すると以下のような画面が出現します．
![2020-10-08 (46).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/773471/e7390ea0-32d1-a7da-9fb0-1202b75a17ca.png)
ここで，「コンパイラのパス」の下の記載欄にBorland C++コンパイラの bcc32c.exe の存在するフォルダの場所を記載します．もしくは，その右側の「参照」をクリックして，bcc32c.exeの存在するフォルダまで進めます．
![2020-10-08 (51).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/773471/b820d458-0b79-969d-c30b-b52f0855d5c0.png)
しかし，このままでは bcc32c.exe は見つかりません．この下の部分の「ファイルの種類」が bcc32.exe しか表示しないようなフィルタが掛かっているためで，このファイルの種類のタブを切り替えて「実行ファイル(*.exe)」か「すべてのファイル(*.*)」とすれば，bcc32c.exeが見つかります．
![2020-10-08 (54).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/773471/0ac51913-d6bd-5ede-7f17-4b36bee47bfb.png)
そこで，bcc32c.exe を選択して「開く」をクリックします．
![2020-10-08 (57)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/773471/7c13d0f1-df2c-b189-3e30-eb655afe05ba.jpeg)
すると，エラーダイアログが開きますが，ここでは「OK」をクリックします．これが制作された頃のC++コンパイラではbcc32.exeがデフォルトのコンパイラだった名残です．

また，「標準のデータ保存フォルダ」のところですが，このようにコマンドプロンプトでは入力の難しい全角文字や単語やコマンドの区切りとなるスペースがなければ特に問題はなさそうです．もしあれば，ここを設定されると良いようです．
![2020-10-08 (59)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/773471/e59eaa8d-7544-00db-ad26-902934d34362.jpeg)

(5)動作試験
上記(4)まででセットアップしたbcpad.exeを起動すると以下のような画面が出現します．
![2020-10-08 (61).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/773471/dd3216a4-b8b2-2f71-f4e8-d5d9886a290c.png)
この画面に，例えば，以下のようなプログラムを書いてみます．

```C++:hello.c
#include <stdio.h>

int main(void){
   printf("Hello World!");
   return 0;
}
```
すると
![2020-10-08 (63).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/773471/da241115-d263-4083-d518-edfb07a05eb1.png)
となりますので，
「ファイル」->「名前をつけて保存」から，ファイル名をつけて保存します．拡張子は，cです．

そして，「実行」->「make&実行」とすれば，以下のような画面が出現します．
![2020-10-08 (66)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/773471/7deaf65e-e789-868d-73d6-90b865043439.jpeg)
このように「Hello World!」が表示されているので，めでたく成功しました．

ただし，拡張子cのファイルを保存する場合，パスとして使用できない文字（全角文字やスペースなど一部の記号など）がありますので，注意が必要です．

以上のようにbcpadをセットしますと，比較的楽なプログラミング言語の習得にあたってのツールが揃うと言えるでしょう．

参考：
http://cpad.michikusa.jp/

http://hp.vector.co.jp/authors/VA017148/pages/install/bcc4.html
aws EC2にてApache+PHP5.6+Mysql+phpMyAdmin+PostgreSQL

PostgreSQLインストール
sudo yum -y install postgresql postgresql-server postgresql-libs
sudo yum install postgresql-server postgresql-devel postgresql-contrib
sudo vi /var/lib/pgsql9/data/postgresql.conf
sudo vi /var/lib/pgsql9/data/pg_hba.conf
sudo /etc/rc.d/init.d/postgresql start



phpMyAdminの設定は下記手順が必要の様。
インストールは下記の様に。
sudo yum --enablerepo=epel install   phpMyAdmin php56-mcrypt php56-mysql

install後
vi /etc/httpd/conf.d/phpMyAdmin.conf
にて下記

<Directory /usr/share/phpMyAdmin/>
   AddDefaultCharset UTF-8
　下記２行追加
  AllowOverride all
  Require all granted

   <IfModule mod_authz_core.c>
     # Apache 2.4
     <RequireAny>
       Require ip 127.0.0.1
       Require ip ::1
     </RequireAny>
   </IfModule>
   <IfModule !mod_authz_core.c>
     # Apache 2.2
     Order Deny,Allow
     #Deny from All
     Allow from 127.0.0.1
     Allow from ::1
     Allow from All
   </IfModule>
</Directory>

 Aapache2.4での

cat /var/log/mysqld.log | grep 'password is generated'

パスワード確認：xxxpasswordxxx

/etc/rc.d/init.d/mysqld stop

ps aux| grep mysqld

mysqld_safe --skip-grant-tables &

mysql> FLUSH PRIVILEGES;

mysql> set password for root@localhost=password('xxxpasswordxxx');

Mysql再起動
Apache再起動
Node.js(Express)のアプリ作成手順

# アプリ作成手順
Expressでアプリを作成するには、以下4つの手順があります。
1. アプリケーションのフォルダーを作成する。
2. コマンドを使い、npmの初期化をする。
3. expressをアプリケーションにインストールする。
4. プログラムのファイルを作成してソースコードを書く。

###1. アプリケーションのフォルダーを作成する。
```
$ mkdir express-app
$ cd express-app
```
###2. コマンドを使い、npmの初期化をする。
コマンドを実行し、npmの初期化をします。基本すべてEnterを押してデフォルトのままで大丈夫です。
一応下記に項目の内容を記載します。

|項目|説明|
|:--|:--|
|version|バージョン番号|
|description|プロジェクトの説明文|
|entry point|起動用のスクリプトファイル名|
|test command|テスト実行のコマンド|
|git repository|利用するGitリポジトリ|
|keywords|関連するキーワード|
|author|作者名|
|license|ライセンスの種類|

```
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (express-app)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)

{
  "name": "express-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes) yes
```

###3. expressをアプリケーションにインストールする。
下記コマンドを実行すれば、expressをインストールすることができます。

```
$ npm install --save express
```

###4. プログラムのファイルを作成してソースコードを書く。
プログラムのファイルを作成していきます。起動用のスクリプトファイル名をindex.jsに設定したため、index.jsを作成し、コードを記載していきます。

```
$ touch index.js
```

```index.js
// expressオブジェクトの作成
const express = require('express')
// Expressのアプリケーション本体となるオブジェクトの作成
const app = express()

// ルーティングの設定
app.get('/', (req, res) => {
    res.send('Welcome to Express!')
})

// 待ち受けの開始
app.listen(3000, () => {
    console.log('Start server port:3000')
})
```

あとはプログラムを実行して、結果を確認していきます。
コンソールにはconsole.logにて記載した部分が出力されます。

```
$ node index.js
Start server port:3000
```

また、http://localhost:3000/ にアクセスするとres.sendにて記載した部分がクライアントに表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555434/e4fad3aa-1fdb-863e-4e17-e802d76e65d9.png)
Amazon Linux 2 で Laravel用の初期セットアップを行う（Nginx, PHP, MySQL, Composer）


## shellを作成する
```
vim setup.sh
```

## 以下のコードを貼り付ける
```
#!/bin/bash
sudo yum update -y

# nginx
sudo amazon-linux-extras install nginx1.12 -y
sudo systemctl start nginx
sudo systemctl enable nginx

# php
sudo amazon-linux-extras install php7.3 -y
sudo yum install php-xml php-mbstring -y

# mysql
sudo yum localinstall https://dev.mysql.com/get/mysql80-community-release-el7-1.noarch.rpm -y
sudo yum install mysql-community-server -y
sudo systemctl start mysqld.service
sudo systemctl enable mysqld.service

# composer
sudo curl -sS https://getcomposer.org/installer | php
sudo mv composer.phar /usr/local/bin/composer
```

## 実行権限を与える
```
chmod +x setup.sh
```

## shellを実行する
```
sudo ./setup.sh
```

## nginxの設定変更
```
sudo vim /etc/php-fpm.d/www.conf
user = nginx # apache > nginxに変更
group = nginx # 同上
```

## copy
```
sudo yum update -y
sudo amazon-linux-extras install nginx1.12 -y
sudo systemctl start nginx
sudo systemctl enable nginx
sudo amazon-linux-extras install php7.3 -y
sudo yum install php-xml php-mbstring -y
sudo yum localinstall https://dev.mysql.com/get/mysql80-community-release-el7-1.noarch.rpm -y
sudo yum install mysql-community-server -y
sudo systemctl start mysqld.service
sudo systemctl enable mysqld.service
sudo curl -sS https://getcomposer.org/installer | php
sudo mv composer.phar /usr/local/bin/composer

```
リレーショナルデータベースとSQL

現在勉強しているオラクルマスターブロンズ（SQL）についてまとめたものです。
自分のアウトプット用なので見やすさなどは期待しないでください。

#　リレーショナルデータベースの基礎知識

**主キー**
表内の行を**一意に識別するための列**で、**1つの表に1つだけ**設定できる。
主キーには重複した値を格納したり、NULL値を含めることはできない。

**外部キー**
**同じ表またはほかの表の主キーを参照する列**で、格納できる値は参照先の列に格納されている値のみ。
外部キーには**NULL値を含めることができる**。

#　SQLの概要

SQL文の分類

| 分類 | コマンド |
|:-:|:--|
| **DML(データ操作言語)** | **SELECT**(データの取り出し)<br>**INSERT**(新規データの挿入)<br>**UPDATE**(既存データの更新)<br>**DELETE**(既存データの削除)<br>**MERGE**(データのマージ) |
| **DDL(データ定義言語)** | **CREATE**(オブジェクトの作成)<br>**ALTER**(オブジェクト定義の変更)<br>**DROP**(オブジェクトの削除)<br>**RENEMA**(オブジェクト名の変更)<br>**TRUNCATE**(表の切り捨て)<br>**COMMENT**(コメントの定義) |
| **DCL(データ制御言語)** | **GRANT**(権限の付与)<br>**REVOKE**(権限の取り消し) |
| **トランザクション制御** | **COMMIT**(変更の確定)<br>**ROLLBACK**(変更の取り消し)<br>**SAVEPOINT**(セーブポイントの作成) |
git revertで過去のコミットを取り消す

過去にコミットした変更内容（マージ不要となった）がリモートリポジトリに残っており、別の担当者Aが別の変更をプルリクしようとしたら、その過去の変更内容も一緒に取り込まれてしまった。
そのため、過去の私の変更内容を取り消すことになったので、そのやり方をまとめておきます。

####リモートリポジトリにある担当者Aのプッシュしたブランチ（ブランチAとする）をcheckout
```
git checkout -b <ブランチA> origin/<ブランチA>
```

####まずは変更履歴の確認

```
> git log

commit <担当者Aの変更コミットID①>
Author: <担当者A>
Date: xxxxx

commit <担当者Aの変更コミットID②>
Author: <担当者A>
Date: xxxxx

commit <私の変更コミットID①>
Author: <私>
Date: xxxxx

commit <私の変更コミットID②>
Author: <私>
Date: xxxxx

commit <担当者Bの変更コミットID①>
Author: <担当者B>
Date: xxxxx

```

####私のコミットの新しい方からrevert

```
git revert <私の変更コミットID①>
```

```
> git log

commit <revertコミットID①>
Author: <私>
Date: xxxxx

commit <担当者Aの変更コミットID①>
Author: <担当者A>
Date: xxxxx

commit <担当者Aの変更コミットID②>
Author: <担当者A>
Date: xxxxx

commit <私の変更コミットID①>
Author: <私>
Date: xxxxx

commit <私の変更コミットID②>
Author: <私>
Date: xxxxx

commit <担当者Bの変更コミットID①>
Author: <担当者B>
Date: xxxxx

```

####リモートリポジトリへプッシュ

```
git push --set-upstream origin <ブランチA>
```

リモートリポジトリのブランチAの変更内容に、私のコミット①の取り消しが反映されたことを確認できた。

####次にもう１つの私のコミットをrevert

```
git revert <私の変更コミットID②>
```

```
> git log

commit <revertコミットID②>
Author: <私>
Date: xxxxx

commit <revertコミットID①>
Author: <私>
Date: xxxxx

commit <担当者Aの変更コミットID①>
Author: <担当者A>
Date: xxxxx

commit <担当者Aの変更コミットID②>
Author: <担当者A>
Date: xxxxx

commit <私の変更コミットID①>
Author: <私>
Date: xxxxx

commit <私の変更コミットID②>
Author: <私>
Date: xxxxx

commit <担当者Bの変更コミットID①>
Author: <担当者B>
Date: xxxxx

```

####再度、リモートリポジトリへプッシュ

```
git push --set-upstream origin <ブランチA>
```

リモートリポジトリのブランチAの変更内容に、私のコミット①、②の取り消しが反映されたことを確認できた。


##参考：
[リモートに不要なコミットをプッシュしてしまった時にやったこと](https://qiita.com/makimoch/items/ace32e4caf0dc56d1081)
[リモートにプッシュしたコミットを取り消す](https://qiita.com/kkyouhei/items/f7588566cba0364ea832)
[【git】revretしたcommitをまたrevertして戻した話](https://tmicha.hateblo.jp/entry/2017/04/26/140548)
PHPの継承について（extends,abstract編）

開発をする上で疎結合（そけつごう）なコードで書くことは重要です。
そこで、今回はphpの継承（抽象化）のextendsとabstractについて簡単にまとめようと思います。

簡単な図↓

![名称未設定のノート-1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620608/574de7c3-5023-3567-179c-0a328f126f58.jpeg)


# 1.クラスの継承 (extends)について
継承では、親クラスのメソッドを上書きすることができます。
継承する基のクラスをスーパークラス（もしくは親クラス）、継承して新たに作られるクラスをサブクラス（もしくは子クラス）と呼びます。
###【構文】

```
class サブクラス名(子クラス) extends スーパークラス名(親クラス)
{
}
```
1.スーパークラス名の後にextends をつけて、継承させたいクラス名を書く
2.継承したクラスとメソッド(関数)の名前が重なっていたら、サブクラス側を優先する(上書き(オーバーライド))

 
#####例↓
```
 <?php
class Sports
 {
 //名前のプロパティ
 private $name = "";
 //名前のゲッタ
 public function getName(): string
 {
　return $this->name;
 }
 //名前のセッタ
 public function setName(string $name): void
 {
 $this->name = $name;
 }
}
```

```
//出力結果

<?php
 class Tennis extends Sports 
 {
 public function call(): string
 {
 return “ゲーム１";
 }
}
```

##### 継承すると親のメンバーを全て引き継ぎます。

### Phpファイル作成　

```
 <?php
 require_once("Sports.php");
 require_once("Tennis.php");
 $clubs = new Tennis(); 
 $clubs->setName(“テニス部"); 
 print($clubs->getName()."は".$clubs->call().”の試合をしています"); 
```
```
//出力結果
テニス部はゲーム１の試合をしています
```
##注意点
PHPの継承では、親クラスとして指定できるのは1つだけであり、親クラスを複数指定できません。

上記のコードのように、実行部分で直接利用していないクラスでも、親クラスとして指定している場合は、そのクラスが記述されたファイルをrequire_onceで読み込んでおく必要があります。
また、順番は親クラスが先に読み込まれるようにしないといけません。


# 2.抽象クラス (abstract) 不要論について

抽象クラスは継承前提のクラスで、インスタンス化(new)はできません。

[決まりごと]
①継承クラスは abstract で始める
②functionの前にabstractをつけると、継承されたクラスで必ず指定する必要がある
(この場合、functionの中身は書かない)
③abstractなしの関数も書ける (こちらは継承クラスで使わなくても問題なし)

例↓

```
<?php
 
 
//抽象クラス 頭に abstractをつけて class指定
abstract class MusicClass{
 
  //頭にabstractをつけてメソッド(関数)を指定。この場合は中身をかいたらいけません。
  abstract public function Piano();
 
  public function Electone($str){
    echo $str.'抽象クラスです。';
  }
}
 
//親クラス extendsをつけて継承している
class InstrumentClass extends MusicClass{
 
  public function Piano(){
    echo 'Pianoは親クラスです';
  }
 
}
 
//インスタンスを生成
$instrument = new InstrumentClass();
 
//メソッドの呼出し
$instrument->Piano();
$instrument->Electone('Electoneは');
 
?>
```

ほとんど普通のクラスと変わらないですが、abstractをつけると使えるメソッドを絞ることができ、abstractをつけないとインスタンス化ができません。
【Swift】iOS14で追加された、ColorPicker(色を簡単に選択できるやつ)使ってみた[SwiftUI]

iOS14から導入されたColorPicker
今までPickerViewやSliderを自前で実装して、色選択機能等を、
実装していたかもしれませんが凄くお手軽にできるようになってしまいました。

#環境
- Xcode: 12.0
- Swift5

#実装例
選択した色が背景色となるようにしています。

```Swift
struct ContentView: View {
    @State private var color = Color.white
    var body: some View {
        ZStack{
            color
                .edgesIgnoringSafeArea(.all)
            ColorPicker(selection: $color, label: {
                Text("SelectColor")
            })
            .padding()
            .onChange(of: color, perform: { value in
                print(color)
            })
        }
    }
}
```
以上でColorPickerを追加することが可能です。
色選択時の変更はonChangeでハンドリングすることができます。この辺は普通のPickerと同じですかね。

###動作
![colorpicker480.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656690/64cda8bd-97e7-f447-60a3-0d03785b1427.gif)
FlutterでFirebase_massagingのiOSセットアップしたら、デバッグ起動時にError: CocoaPods's specs repository is too out-of-date to satisfy dependencies.となった話。

#エラー内容
下記の記事を参考にして、FlutterでFCMを用いたプッシュ通知のセットアップをしていたのですが、iOSのセットアップをしたら、デバッグ起動時にエラーが出ました。
https://note.com/welchi/n/n649728c5574d#Q6abi

`Error: CocoaPods's specs repository is too out-of-date to satisfy dependencies.`

で、記事の指示と、エラ-メッセージの下に
`pod repo update`
を実行してくださいとあるので、やってみましたが、相変わらずダメ・・・

#対応
下記記事の画像部分の通り、やったらうまく行きました。
https://github.com/flutter/flutter/issues/32400
![スクリーンショット 2020-10-08 15.31.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/762871/abb9c2ad-3f74-1341-bf0b-dafecd663ae0.png)

①flutter clean
②pod repo update
③/ios/Podsの中身全てと、/ios/Podfile.lockを消す。
続・SQL Serverのロックについて出来る限り分かりやすく解説

[SQL Serverのロックについて出来る限り分かりやすく解説](https://qiita.com/maaaaaaaa/items/38fd95b142b07acf7700)という記事を書いた後に、追加で説明しておきたい事項をこちらにまとめていきます。

ロックまわりで知りたいことや疑問があればコメントで教えてください。ベストエフォートで追記させていただきます。

# 想定外のブロッキングに注意する
#### ブロッキングのおさらい
![image.png](https://qiita-image-store.s3.amazonaws.com/0/148310/07de7974-c819-cc64-2101-c79c43a919cb.png)
既にS Lockをかけていた場合は、X Lockはかけられない。このとき、X Lockをかけるためにクエリが待ち状態になる。
→これが「ブロッキング」

クエリレベルだと、「次の二つのクエリは同時に実行できない」という意味。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/148310/284eef7f-fed2-e9fd-4592-8d2eec04b853.png)

この「互換性がないロックリクエストは競合し、ブロッキングにつながる」という挙動を踏まえて、想定外のブロッキングが発生する状況について説明します。

#### シナリオ１．互換性のないクエリ実行

まず、以下の状況を想定します。

- クエリAが実行中
- そのあと、クエリBを実行したが、クエリAと互換性がないためブロッキングされて、待ち状態が続いている

```sql
--クエリA
select * from SomeTable
```

```sql
--クエリB
alter table SomeTable add Column2 int
```

SSMSで再現した動画です。クエリAによってSロックを取り続けていると、クエリBがブロックされ続けることが確認できます。

![SQLQuery2.sql-_local_.sample-_sa-_53___-Microsoft-SQL-Server-Management-Studio-2020-10-08-14-59-38.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148310/f55ff34b-6ee6-a106-78da-03b06885135c.gif)

（※クエリAは瞬時に実行が完了してしまうため、Sロックをかけ続けるためにトランザクション分離レベルを変更しています。）

#### シナリオ２．互換性のあるクエリ実行
次に、以下の状況を想定します。

- クエリAが実行中
- クエリCを実行すると、クエリAと互換性があるためすぐに実行完了する

```sql
--クエリA
select * from SomeTable
```

```sql
--クエリC
select * from SomeTable where Column1 = 1
```

SSMSでの再現です。クエリCが瞬時に実行完了することが確認できます。
![aa.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148310/10c93a30-78f6-1e97-0da9-e5cd0e6dd408.gif)

#### シナリオ３．シナリオ１のブロッキング発生中にクエリBを実行
ここからは想定外な挙動と感じる方もいらっしゃると思います。

シナリオ１でブロッキングが発生している場合に、クエリCを実行するとどうなるでしょうか？
シナリオ２では、クエリAとクエリCは互換性があるため、クエリCは瞬時に実行完了していました。

```sql
--クエリA
select * from SomeTable
```

```sql
--クエリB
alter table SomeTable add Column2 int
```

```sql
--クエリC
select * from SomeTable where Column1 = 1
```

SSMSで再現させた動画です。今回は、クエリCもブロックされてしまっています。

![xxx.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148310/817d7c8d-bde4-74b0-5d41-a4d1daa419b9.gif)

実際にロックをかけているのはクエリAのSロックだけなのに、なぜクエリAと互換性のあるクエリCまでブロックされたのでしょうか？

#### 想定外のブロッキングが起きる理由

この挙動は、SQL Serverのロックに関連する仕様によるものです。
ロック待ちのリクエストはキューで管理されます。
このとき、「自分よりもキューの先頭側にあるロックリクエストは、すべてロック獲得済みのようにみえる」という挙動になります。

シナリオ３を例にすると、以下のようなイメージになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148310/b6abfaa9-022b-d15f-a6c5-9256ea994cb1.png)
クエリCは、実際にロックを獲得しているクエリAとは互換性があるのですが、クエリCよりも先にロック獲得のためのキューにはいったクエリBのSch-Mロックと互換性がないため、クエリBが待ち続けている限り、クエリCもブロックされ続けます。

#### 想定外のブロッキングが起きると怖いケース
すべてのロックモードと互換性が無い「Sch-Mロック」の獲得待ちでブロックされてしまうと、後続のあらゆるクエリがブロックされてしまいます。このロックは主にALTER TABLE等のDDLを実行する場合に獲得されます。

CREATE TABLEなど、CREATEする場合は他に同一オブジェクトを参照するクエリが発行されていないはずなので問題ないのですが、ALTER TABLEの場合は別のクエリが該当のオブジェクトを参照している可能性があります。

したがって、ALTER TABLEなど、強力なロックを獲得する必要がある処理については、以下のような工夫が必要となるケースがあるかと思います。

- ALTERしたいテーブルを参照している、長時間実行中のクエリが無いかを必ず確認してからALTER文を実行する
- 「SET LOCK_TIMEOUT 1000」など、あらかじめ「〇秒間ロックをとれなかったらタイムアウトする」という設定を入れたうえで実行することで、想定外のブロッキングが発生しても影響を最小限に抑えられるようにしておく（参考：[SQL Server: ブロッキングが発生しやすい環境でALTER系クエリを実行させるための方法について考えてみた](https://qiita.com/maaaaaaaa/items/4e31220292135f4622d4)）

あらゆるクエリが瞬時に完了しているような環境であればここまで神経質になる必要はありませんが、この挙動は覚えておいて損はないと思います。
フォームタグでセレクトボックスとラジオボタン

フォームタグでセレクトボックスとラジオボタンを使うときの参考資料

```html.rb
#セレクトボックスで選択された値を配列として送りたい場合
<%= check_box_tag("question[]", question.id) %>
<%= label_tag :question, '覚えた!' %>
```

```html.rb
<%= radio_button_tag(:question_description_id, "#{question_description.id}") %>
<%= label_tag("#{question_description.id}", "#{question_description.description}") %><br>
```
カスタムバリデーションのメソッドで「ArgumentError:   You need to supply at least one validation」と言われたら

おそらく下記のように`validates`と書いてしまっていると思うので`validate`と修正する。

```ruby
Class user < ApplicationRecord
  # NG
  validates :custom_method
  # OK
  validate :custom_method

  def custom_method
    ...
  end
end
```
webpackでvuetifyを使う方法

vuetify公式ページにもwebpackへの導入方法は記載があるが、少々手間取ったためメモしておく。

基本的には[vuetifyの公式ページ](https://vuetifyjs.com/en/getting-started/installation/)に従う


##webpackでvueプロジェクトを作成
webpackを使ってvueプロジェクトを立ち上げる方法は[こちら](https://qiita.com/yuta-38/items/48e36865d829dcea40cb)。この続きとして以下を実行していく。


<br>
##パッケージのインストール

本番環境用にvuetifyを、開発環境用にsass-loaderとdeepmergeをインストールする。

```
npm install vuetify
npm install sass sass-loader deepmerge -D
```


<br>
##webpack.config.jsの編集

moduleオブジェクトのrulesに以下を追記。

```js:webpack.config.js
  module: {
    rules: [
      {
        test: /\.s(c|a)ss$/,
        use: [
          'style-loader',
          'css-loader',
            {
            // Requires sass-loader@^8.0.0
            options: {
              implementation: require('sass'),
              sassOptions: {
                   //indentedSyntax: true
              },
            },
          },
        ],
      },
    ],
  }
```


###注
上記記述はvuetify公式ページから拾ってきているが２点注意が必要。

1) versionによる選択
2) indentedSyntax: trueの要否


###注1 versionによる選択

公式ページには以下のように記載されているが、バージョン７かバージョン８かでどちらかを選択する必要がある。

```
{
        test: /\.s(c|a)ss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            // Requires sass-loader@^7.0.0
            options: {
              implementation: require('sass'),
              indentedSyntax: true // optional
            },
            // Requires sass-loader@^8.0.0
            options: {
              implementation: require('sass'),
              sassOptions: {
                indentedSyntax: true // optional
              },
            },
          },
        ],
      },
```

```package.json
    "sass-loader": "^10.0.2",
```

package.jsonで確認するとバージョンは10xなので、バージョンが新しい８の記述のみを残す。




<br>
##注2 indentedSyntax: trueの要否

indentedSyntaxの要否はsaccかscssかで大きく変わってくる。
ここの設定が合っていないと、開発サーバーを立ち上げたときにstyleが読み込めずエラーになる。

**・scss**
通常のcssと同じくカッコ{ }とセミコロン;が必要。
文の終わりと始まりが明記してあるため、インデントで判断する必要がない。
indentedSyntax: false（または不要） 


**・sass**
インデントや改行がコードの区切りを表す。

indentedSyntax: true (必須)






<br>
##src/plugins/vuetify.jsの作成
vuetify.jsファイルを作成し、vuetifyを使うための処理を記述する。

```js:src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)
```




<br>
##src/index.jsの編集
作成したvuetify.jsをindex.js内にインポートして、Vueインスタンスに取り込む。


```js:index.js
import Vue from "vue"
import App from "./components/App.vue"
import vuetify from "./plugins/vuetify.js"

const VueApp = Vue.extend(App)

console.log('Hello!')

const app = new VueApp({
  el: '#app',
  vuetify
})
```



<br>
##vuetifyの検証
App.jsファイルにvuetifyのコードを記述して、正しく反映されるか検証する。

```vue:app.vue
<template>
  <div class="app">
    <v-btn dark>Button</v-btn>
    <v-btn color="#F0E68C" fab>tile</v-btn>
    <v-btn dark rounded>rounded</v-btn>
  </div>
</template>
```

`npm run serve`でブラウザを起動し、下記のように表示されれば、vuetifyが読み込めている。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/dae7c6de-d57e-5c92-9036-2911df92596c.png)
podman in dockerで、みんなで仲良く共用計算機でdockerを使いたい

## podman in dockerを使う理由
Dockerを計算用途で使うとき、singularityを使いたくなります。ただ、singularityはsudo権限がないとbuildができないので、podman in dockerでみんなの作業用VM代わりに作業してもらうようにしました。

## podmanって？
Redhatのdockerみたいなもので、daemonがないことが特徴だと思ってます。

## 使用のイメージ
使うときは、各VMにsshログインをして使うようにします。
VMは、使い捨て出来るようにして、scp等でファイルの移動を行います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533324/e4161d9c-4fa6-3623-9f75-8a6b4ea45466.png)

## イメージの作成
```dockerfile

FROM docker.io/library/docker:dind

RUN apk --update add \
    bash \
    py-pip \
    supervisor \
    openssh \
    curl \
    build-base \
    libffi-dev \
    && \
    rm -rf /var/cache/apk/*

RUN apk add python3-dev
RUN apk add --no-cache libressl-dev musl-dev libffi-dev
RUN pip install docker-compose
RUN mkdir -p /var/log/supervisor


RUN apk add --no-cache openssh openrc
RUN rc-update add sshd && rc-status
RUN mkdir -p /run/openrc/ && touch /run/openrc/softlevel
RUN ssh-keygen -f /etc/ssh/ssh_host_rsa_key -N '' -t rsa
RUN ssh-keygen -f /etc/ssh/ssh_host_dsa_key -N '' -t dsa

RUN echo "http://dl-cdn.alpinelinux.org/alpine/edge/testing" >> /etc/apk/repositories

RUN apk add singularity

RUN sed -i '2s/^/bash -c "\/usr\/sbin\/sshd -D"\&\n/' /usr/local/bin/dockerd-entrypoint.sh


RUN apk add sudo


RUN echo -e "<password here>\n<password here>" | (adduser user -s /bin/bash)
RUN addgroup docker
RUN addgroup user docker
RUN addgroup user wheel
RUN echo '%wheel ALL=(ALL) NOPASSWD: ALL' >> /etc/sudoers
```

## 起動など
```bash
#!/bin/bash

count=7000
for i in 0 1 2 3 4 5 6 7 8 9;
do
    echo $i
    sudo podman run -d --privileged -p 777$i:22 dind-docker
done
```

コンテナ上で、イメージを作成して、singularity buildで.sifファイルを作って、それをscpでホームに移動することで利用することができます。
Vue で新規プロジェクトを作る場合

#何度も開始時につまづくので、メモ

##1.Node.js をインストール
これは検索すればわかるので割愛。

##2.yarn をインストール
これも検索すればわかるけど、適当に以下。

```
$ npm i -g yarn
```

##3.vue-cli をインストール

```
$ yarn add global vue-cli
```

インストール後、version を確認したい場合

```
$ vue -V
```

##4.プロジェクトを作成する
任意のフォルダに移動して以下のコマンドを実行。

```
$ vue create hogehoge
```

Vue 3系も出てきたので最初に色々選べる。

```
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
> Manually select features
```

Sass、Scss、Stylus を利用する場合は、Manually select features を選んで次の項目で、
CSS Pre-processors でカーソルをあわせて、Space を押そう。
あとの項目は好きなように。

VScodeのターミナル(Ctrl+@)でyarn serveで起動。
localhost:8080 で確認可能。

##5.pug (jade) を導入
煩わしい<>タグ打ち、終わりのタグを打つのが面倒なので、pug をインストール。

```
$ yarn add -D pug pug-loader pug-plain-loader
```

pug-plain-loader をインストールしている記述をしているサイトはほぼ皆無だが、
自分の環境では必ずないと怒られるので、忘れずにインストール。

これ以降新規の.vue ファイルは

```hogehoge.vue
<template lang="pug">
```

で使用可能になる。

Stylus を利用する場合は、

```hogehoge.vue
<style lang="stylus">
```

で利用可能になる。
クリーンアーキテクチャーで行こう

もう今更感があるのですが
書きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503965/5c366381-ddec-ba8b-b7ad-80a5fb1d7787.png)

どうしても、この図が先行するのですが
これにとらわれると、多分立ちいかなくなります

良い俯瞰図であるけども、ここからは、本質は見えないです

依存非依存から入ってしまうと、手が動かなくなります。

まずは、DIのお話から
ＤＩというのはDependency injection、依存性の注入というソフトウェアパターンです。
本質的にオブジェクト指向が前提なので、そうではない言語ではやめておいたほうが良いです

もう一つ
手組のコードでDIをするのは、きついです。
先ず、何らかの、DIフレームワークを使いましょう
クリーンアーキテクチャーのDIはコンストラクターでのインジェクションが基本なので、そのあたりも考慮に入れておきます

で、インジェクションに関しては、必ず、インターフェースで受けるというところも大切です。
ここで、しっかりと、実クラス同士の依存性を切っておきましょう。

基本的に、データクラスと、ロジックのあるクラスも分けておきます。
データークラスは、プレーンなオブジェクト
ロジックのクラスは、インターフェースで抽象化、

後は、レイヤーをネームスペースとか、フォルダー構成で分けておれば、それっぽく仕上がります。

C#だと、フレームワークのServiceCollectionクラスのでサクッと書けるし、.net mvc coreに至っては最初からDIフレームワークを内包しているので。

最初から、全部だとつらいのですが、少し頑張って、ロジックとデータのクラスを分けて、ロジックのクラスはDI、データクラスはプレーンオブジェクト「C#の場合はPOCOという」で始めてみてはいかがでしょう？
GitHubのプロフィールをカスタマイズできた！

#GitHubのプロフィール、書けるところが少ない問題

通常ですと、プロフィールのTopページの名前の下の欄に
 
 - 自己紹介文
 - 社名
 - メールアドレス
 - URL
 - SNSアカウント

くらいしか書けません！

 
![スクリーンショット 2020-10-08 15.03.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/644441/535cde5e-bea2-8438-3865-971bbf9025df.png)

#もっといろいろ書きたい！

💭　「転職活動中」である旨を表示したい
💭　ポートフォリオたくさん作ったので見て欲しい
💭　経歴をまとめておきたい
みたいな悩み、結構ありますよね。

#結論：ユーザー名と同名のリポジトリを作成してREADME.mdを更新せよ！

これだけです。
README.mdの内容を更新する以外に他にやることはありません！

私の場合は転職活動用に情報をまとめましたが、エンジニアらしい独自のプロフィールを作って楽しんでいる人も多くいるようです！
常々不便と思っていたので、とてもよかったです。

#参考
https://blog.ko31.com/202007/how-to-create-the-github-profile-readme/
https://www.aboutmonica.com/blog/how-to-create-a-github-profile-readme
シンプルで美しいCSSフレームワーク　samantic-ui　をRailsに導入する。

##フレームワークの特徴
タイトルにもある通り、見た目がシンプルで美しいです。
他にも、人間にとって理解しやすいclass名を使用しているという特徴があります。
公式サイト: https://semantic-ui.com/
## 背景
railsでポートフォリオを作るときに、Bootstrapを使っている人がほとんどなので、違うフレームワークを使えば、見た目で差別化ができて、採用者の目に止まりやすいのではないかと思い、組み込むことに決めました。
##手順

```gemfile.
gem 'semantic-ui-sass', github: 'doabit/semantic-ui-sass'
```
いつものように、$ bundle install

```application.css.scss
@import "semantic-ui";
```

application.cssを、application.scss.cssにrenameします。

```application.js
//= require semantic-ui
```

application.jsにも変更を加えます。

これで、フレームワークが機能します。


参考:
(公式)https://semantic-ui.com/introduction/getting-started.html
https://stackoverflow.com/questions/37283642/how-do-i-set-up-a-rails-application-with-semantic-ui

詳しい使い方はこちら
https://qiita.com/sandabu/items/336fe312acbec98d21e3
https://qiita.com/Yuta_Fujiwara/items/8abeda1b92dcaf505149
https://segakuin.com/css/semantic/
[Spreadsheet] Query関数の「配列結果は自動的に展開されませんでした。行（n）を挿入してください。」への対応

(投稿後、新しい情報をもらったので記事内容を更新しました)


# これは何？

スプレッドシートのQUERY関数で、複数の「範囲」を結合することができますが、その際に下記のようなエラーが出ました。

```
配列結果は自動的に展開されませんでした。行（1）を挿入してください。
```
![error.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8612/2c1fde9d-cc05-91fe-907c-3bf0533ffefd.png)



これ、なんだろう？を調べました。

# 結論を先に

Query関数が書かれているシートに、エラーメッセージで指定されてる行数を追加する。
(自動で追加される行数の最大値が50500みたいです)


# 調査内容

## 正常に表示できるとき

複数の範囲を縦に並べて結合する。
2つのシートのそれぞれに下記のようなデータがあるとする

![d1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8612/84aab084-a9bd-3ec5-5c39-e40db20771da.png)

![d2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8612/3c050ef9-f18e-1f76-497f-2b63f682ab01.png)


下記のように書くと「縦に並べた一つのテーブル」として表示できる。

```
=QUERY({'データ1'!A:B;'データ2'!A2:B},"where Col1 is not null")
```

![d3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8612/8a80707f-598d-78fe-3304-6c60429369b7.png)


## データ量を増やす

1シートにつき10,000行のデータを書きました。

![data1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8612/c3bf32ac-d4d9-6154-eb53-3e875639181b.png)
↑ 末尾は「10000」まで。

**このシートを複数用意** して、結合するシートを増やしていきました。


## 60000行だとエラーになる

data1 ~ data6 までシートを用意すると (つまり60000万行) 下記のエラーになりました。

![error2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8612/a92155de-9257-cb5b-6a00-0f54cf46add8.png)

## どこからエラーになるか調べる

そこからデータを減らしていって、data6のシートを 500 行まで減らしたら(つまり総データ数50500行)エラーは出なくなりました。(50501行だとエラーになる)

↓ エラーがでなくなったときのQuery関数の結果の最終行

![d4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8612/9e407d49-c75a-f644-54ac-48f1b2b3a1fa.png)

ひとまずこのエラーが出たら「データ量が多いのかな」って気をつけよう。

# Tiwtterでコメントをもらって解決！

https://twitter.com/plumfield56/status/1314094764933881858

Query関数が書かれているシートに、エラーメッセージで指定されている行数を追加すると表示されるようになりました。

なるほど、Query関数で自動で展開される行数の最大値が決まっているようです。