OmniAICreator/Qiita-1.07M huggingface dataset:
Rails5.1+puma ローカルのproduction環境でSSL接続する

Rails5.0から5.1にアップグレードし、ローカルでproductionの動作確認しようとしたら、何かとつまずいたので諸問題の解決方法をまとめておきます。

まず、 `rails s -e production` を叩いたところ、この接続にはセキュリティの問題があるのでWEBページを表示できません的なエラーが出ました。httpsにしないとダメなようです。

# SSLで接続する
基本的なやり方は、こちらの記事を参照させていただきました。
[Rails5 + pumaのローカル環境でSSL/HTTPSを有効にする](https://qiita.com/zaru/items/ccf328e87c768168134d)

上記記事は、opensslで証明書発行してましたが、エラーが出たので証明書の発行をmkcertでやりました。
mkcertでの証明書の発行のやり方は、こちらの記事が参考になりました。
[ローカル環境でSSLをオレオレ証明書で行っていて警告が出てる人に朗報](https://qiita.com/walkers/items/b90a97a99bbb27f6550f)

まず、上記記事に従ってmkcertで証明書を発行、appフォルダ以下の適当な場所にserver.key、server.crtファイルを置きます。

[Rails5 + pumaのローカル環境でSSL/HTTPSを有効にする](https://qiita.com/zaru/items/ccf328e87c768168134d) を参考にpuma.rbを設定。
`bundle exec pumactl start -e production` でサーバーを起動。

# css/jsが表示されなくなった問題の解決
SSLで接続できたものの、 `HTTP parse error, malformed request ()` というエラーが出て、application.js、application.cssが読み込まれませんでした。
jsとcssのサーバーがhttp://0.0.0.0:3000 になっていたので、asset_hostの設定を以下のように修正。ローカルと本番環境で変えられるよう、環境変数で定義しました。

```config/environments/production.rb
config.action_controller.asset_host = "https://#{ENV['HOST_URI']}"
```
**参考**
- [StackOverflow::Ruby on Railsの本番環境でpublic/assetsが参照できない](https://ja.stackoverflow.com/questions/44638/ruby-on-rails%E3%81%AE%E6%9C%AC%E7%95%AA%E7%92%B0%E5%A2%83%E3%81%A7public-assets%E3%81%8C%E5%8F%82%E7%85%A7%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84)

# public/images以下のファイルの表示問題解決
上記の対応でcssとjsは出るようになったけれど、public/images以下に置いていた画像ファイルがまだ表示されませんでした。
Rails5.1からは、asset_pipelineでプリコンパイルしない静的なファイルは、ヘルパーで呼び出すときには以下の用に書きます。

```erb
= image_tag 'hogehoge.png', skip_pipeline: true
```

しかし、これが設定してあってもダメだったので、別の問題のようです。

**対応1**
`config.public_file_server.enabled`をtrueに

```ruby:config/environments/production.rb
- config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?
+ config.public_file_server.enabled = true
```

**対応2**
assets:precompileをやり直す。

```ruby
# 思い切って一度全部消したければ、先にこちら
RAILS_ENV=production bundle exec rake assets:clobber

# assets:cleanは古いバージョンのファイルを消す。clobberをやってたらcleanは不要
RAILS_ENV=production bundle exec rake assets:precompile assets:clean
```


上記対応で、assetすべて表示されるようになりました。

**参考**

- [Rails4 asset pipeline関連設定まとめ（Heroku対応込）](https://qiita.com/tomomomo1217/items/fa8dfa094cc4c0e4e350)
- [StackOverflow::Rails App Not Serving Assets in Production Environment](https://stackoverflow.com/questions/17904949/rails-app-not-serving-assets-in-production-environment)
- [Qiita::【Rails】assets:precompileは成功しているのにpumaを起動してもimageもjsもcssもNotFound（RAILS_SERVE_STATIC_FILESの話）](https://qiita.com/at-946/items/b7d467bf25c40fcfca44)
Railsを使ったToDoリストの作成(2.hamlの導入と書き方)

#概要
本記事は、初学者がRailsを使ってToDoリストを作成する過程を記したものです。
私と同じく初学者の方で、Railsのアウトプット段階でつまづいている方に向けて基礎の基礎を押さえた解説をしております。
抜け漏れや説明不足など多々あるとは思いますが、読んでくださった方にとって少しでも役に立つ記事であれば幸いです。

#環境
* `Homebrew: 2.5.10` -> MacOSのパッケージ管理ツール
* `ruby: 2.6.5p114` -> Ruby
* `Rails: 6.0.3.4` -> Rails
* `node: 14.3.0` -> Node.js
* `yarn: 1.22.10` -> JSのパッケージ管理ツール
* `Bundler: 2.1.4` -> gemのバージョン管理ツール

```:iTerm
$ brew -v => Homebrew 2.5.10
$ ruby -v => ruby 2.6.5p114
$ rails -v => Rails 6.0.3.4
$ npm version => node: '14.3.0'
$ yarn -v => 1.22.10
$ Bundler -v => Bundler version 2.1.4
```

#第２章　hamlの導入と書き方

第２章では、Railsでアプリ開発をする時にhamlテンプレートを使えるように設定していきます。
Railsはデフォルトはerbテンプレートが使われていますが、erbテンプレートは使いづらい上に、現場レベルでもあまり使われていない(らしい)ので、今回の開発においてはhamlテンプレートを使っていきたいと思います。

##1 hamlの導入
まずは、hamlテンプレートをRailsで使えるようにしていきます。
[hamlit](https://github.com/k0kubun/hamlit)というgemと[erb2haml](https://github.com/dhl/erb2haml)という変換ツールのgemをインストールします。

```:Gemfile
gem 'hamlit'

group :development do
  gem 'erb2haml'
end
```
>🙋‍♂️`hamlit`というgemをインストールしてください
>🙋‍♂️`erb2haml`というgemをインストールしてください

ターミナルで`$bundle install`を行えばgemのインストールは完了です。

既存のerbファイルをhamlに置き換えるためにはターミナルにて以下のコマンドを実行する必要があります。

```:iterm
$ bundle exec rake haml:replace_erbs
```
⚠︎hamlitをインストールしてエラーが起こってしまった場合は`$rails s`でサーバを立ち上げ直しましょう
<br>
以上でRailsの開発においてhamlテンプレートを使うことができるようになりました。
次は、実際にhamlの書き方を見ていきます。

##2 hamlの基本ルール①
① タグの書き方

```erb:erb
<header>
  <p></p>
</header>
```

```haml:haml
%header
  %p
```
* hamlでは閉じタグが必要ない
* 入れ子構造にする際はスペースキーを２回押すこと

② class／id／attributeの書き方

```erb:erb
<header class="header">
  <p id="id"></p>
    <a href="https://haml.com"></a>
</header>
```

```haml:haml
%header.header
  %p#id
    %a{href: "https://haml.com"}
```
* classは`.class名`で指定する
* idは`#id名`で指定する
* attributeはハッシュで指定する

③divタグの書き方

```erb:erb
<div class="container"></div>
```

```haml:haml
.container
```
* divタグを作成したい時はタグの表記は必要ない。hamlが勝手に察してdivタグを付けてくれる

##3 hamlの基本ルール②
①Rubyのコードの埋め込み(画面に表示する場合)

```erb:erb
<%= board.title %>
```

```haml:haml
= board.title
```
* <%=%>を表現する際は`=`を使う

②Rubyのコードの埋め込み(画面に表示しない場合)

```erb:erb
<% Board.all.each do |board| %>
  <%= board.title %>
<% end %>
```

```haml:haml
- Board.all.each do |board|
  = board.title
```

* <%%>を表現する際は`-`を使う
* <% end %>はhamlが勝手に付けてくれる

※もしhamlの書き方がわからなくなったら下記のサイトで確認しましょう。

* ['haml'から'html'への変換をしたい](https://haml2erb.org/)
* ['html'から'haml'への変換をしたい](https://htmltohaml.com/)
azure cloud-init を使ってみた

# やったこと
仮想マシンの作成 の カスタム データ に下記を入力

```
#cloud-config
timezone: Asia/Tokyo
locale: ja_JP.utf8
package_upgrade: true
packages:
  - tmux
  - tree
power_state:
  delay: "+10"
  mode: reboot
  message: Bye Bye
  timeout: 30
runcmd:
  - setenforce 0
  - sed -i -e 's/^\SELINUX=enforcing/SELINUX=disabled/' /etc/selinux/config
  - systemctl stop firewalld
  - systemctl disable firewalld
  - systemctl restart rsyslog
```

# 結果
- 初回起動時から tmux がインストールされた状態である
- firewalld が stop 状態である
- /etc/selinux/config の SELINUX が disabled になっている
- reboot は目視してないけど、/var/log/messages で shutdown と書いてあったので実行されているんだと思う


# 参考記事
https://qiita.com/yamada-hakase/items/40fa2cbb5ed669aaa85b
10の倍数との差を求める

今取り組んだものは
正の整数を入力して、それが１０の倍数との差が2以下であるならばTrue、そうでないならFalseを出力するというものだった。

以下が自分の回答である。


```ruby
def near_ten(num)
  basis = (num + 5) / 10 * 10
  difference = (num - basis).abs
  if difference <= 2
    puts "True"
  else
    puts "False"
  end
end
```

まず`num`に一番近い10の倍数を`basis`とする。

`basis`にふさわしい数字を計算しているのが2行目。

```ruby
  basis = (num + 5) / 10 * 10
```

例として、15~24までの整数だと一番近い10の倍数は20であるから、20を基準にしたい。
この整数たちにそれぞれ5を加えると、20~29になる。
この整数たちは10の位が2なので、それぞれ`/ 10 * 10`を行うと20が出てきて、基準にしたい数字となる。

他の整数でも同じようにうまくいく。

これで`basis`の部分は終了。

次に、元々の数字とこの基準との差を計算している。

```ruby
num - basis
```

このままでは差がマイナスになることもあるので、絶対値を出すメソッドを使っている。

```ruby
(num - basis).abs
```

あとはこれを代入

```ruby
difference = (num - basis).abs
```

こうして求めた差である`difference`が2以下であれば良いからそれを判定して終了。

```ruby
  if difference <= 2
    puts "True"
  else
    puts "False"
  end
```
超初心者用・用語まとめ　備忘録

ITの勉強を始めて１ヶ月半が経ちました。
今までITの知識はぜろだったので、わからないことが多すぎてこれじゃ仕事にできないと思いました。
知識を積み重ねるために、まずは用語のソースをまとめていきます。
わかりやすいと思ったものを集めました


ターミナルの操作について
https://do-zan.com/mac-terminal-command-shortcut/#i-8
Apple Silicon 動作確認記 (随時更新)

Apple M1チップ搭載13インチMacBook Proを購入したので、各アプリケーションの対応状況を確認していきますー。
ソフトウェアエンジニアなので、その周りのアプリケーションを中心に。
対応状況は、あくまでその時点までの確認です。
使っていたら、別の状況が見えてくるかもしれませんね！

では、書いていきます。

# Chrome 動く。
今この記事を書いているのも、M1 + Chrome。問題なく動作しています。
最初にRosettaをインストールしますか？って聞かれますが、すぐにインストールされました。
![スクリーンショット 2020-11-17 10.35.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25176/533f19dc-db02-c97e-0186-6a41d06aa24e.png)

# Google日本語入力
個人的に大好きなのでインストール。問題なく動作しています。

# iTerm2 動く
問題なし。

# Node.js (v14.15.1)
Hello Worldは問題ない。

```
ito@itoutakeshinoMacBook-Pro ddd % cat index.js
console.log("hello")
ito@itoutakeshinoMacBook-Pro ddd % node index.js
hello
ito@itoutakeshinoMacBook-Pro ddd %
```

# Docker Desktop 動かない
動かない。やばい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25176/afb9d182-e3a6-7b4b-3e84-beb8ea777624.png)

# Java (AdoptOpenJDK build 11.0.9+11) 動く
 動く。

```
ito@itoutakeshinoMacBook-Pro ~ % java --version
openjdk 11.0.9 2020-10-20
OpenJDK Runtime Environment AdoptOpenJDK (build 11.0.9+11)
OpenJDK 64-Bit Server VM AdoptOpenJDK (build 11.0.9+11, mixed mode)
ito@itoutakeshinoMacBook-Pro ~ % cat Hello.java
public class Hello {
  public static void main(String... arg){
    System.out.println("hello");
  }
}
ito@itoutakeshinoMacBook-Pro ~ % javac Hello.java
ito@itoutakeshinoMacBook-Pro ~ % java Hello
hello
```

# .Net (Core 5.0.100) 動く
動く。

```
ito@itoutakeshinoMacBook-Pro dotnetInspect % dotnet --version
5.0.100
ito@itoutakeshinoMacBook-Pro dotnetInspect % cat Program.cs
using System;

namespace myApp
{
    class Program
    {
        static void Main(string[] args)
        {
            Console.WriteLine("hello");
        }
    }
}
ito@itoutakeshinoMacBook-Pro dotnetInspect % dotnet run
hello
```

# VirtualBox （6.1.16 r140961 (Qt5.6.3)） 動かない
空のVMを起動しようとしましたが、ダメ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25176/27e98bee-bb10-61de-5b71-11fd0fd1408d.png)

# golang (1.15.5) 動く
amd64って言っているから、Rosetta上で動いているのだと思うのですが、動く。

```
ito@itoutakeshinoMacBook-Pro ~ % go version
go version go1.15.5 darwin/amd64
ito@itoutakeshinoMacBook-Pro ~ % cat hello.go
package main

import "fmt"

func main() {
  fmt.Printf("hello")
}
ito@itoutakeshinoMacBook-Pro ~ % go run hello.go
hello%
```

# Rust (動かない→Rosetta上で動く)
ワークアラウンドがありそうだが、[サイトで公開されているインストール手順](https://www.rust-lang.org/tools/install)がダメ。
→ターミナルをRosettaで動かせば、インストール、Hello World実行ともかのうでした。

```
ito@itoutakeshinoMacBook-Pro ~ % curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
rustup: unknown CPU type: arm64
```

# Visual Studio Code (Version: 1.51.1)
起動する。どこまで動けば動くって言えるのかはおいておいて。
結果、Electronが起動すると期待できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25176/a2bc8e8a-a539-94d9-2eac-f70f57620bdd.png)


というわけで、、、仮想環境系がダメっぽい。
今どきはソフトウェア開発するのに仮想環境はいることが多いと思うので、、、今、Apple Siliconに凸するのは、、、どうだろう？という感じです。
【Photoshop】写真の周囲を暗くする方法

##Photoshop写真の周囲を暗くして趣ある画像を作ってみた。

こんな感じで文字を見やすくすることもできるんです〜！秒でできますよ〜。
![奈良.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/886701/8fd76e22-8c55-ae54-7432-e292252cae3d.png)

##やり方

・暗くしたい画像を選ぶ。
・レイヤーパネルの[新規塗り潰しレイヤー]からの[グラデーション]
・[スタイル円形]と[逆方向]を選択。
・レイヤーを「乗算」や「焼き込み（リニア）」にしたり「透明度」を変更することで写真に馴染ませることができる。
Linuxとは

今回は特出して書くことは無いかなって思ってます。
Linuxのインストールなどを行いました。
PowerShellを使っての直接のダウンロードインストールは面白かったです。
改めてマウスって便利なんだなって思いました笑

今回は準備がメインだったため次回また頑張りたいと思います！
Rails SecureRandom.alphanumericを使ってテストアカウントのパスワードを生成する

railsでアプリケーションを作成しています。
テストアカウントでのログイン機能を実装したときにエラーが発生したため、自分が行った解決方法を記録として残しておきます。

## 開発環境
Ruby 2.6.5
Rails 6.0.3.3

## 実装内容
以下のコードでテストログイン機能の実装を行いました。

``コントローラー``

```ruby

class Users::SessionsController < Devise::SessionsController
  # ゲストユーザーとしてログイン
  def new_guest
    user = User.find_or_create_by!(nickname: 'ゲストユーザー', email: 'user@example.com') do |user|
    user.password = SecureRandom.alphanumeric
    end
    sign_in user
    redirect_to root_path, notice: 'ゲストユーザーとしてログインしました。'
  end
end
```

``モデル``

```ruby
　#半角英数字のみを許可するバリデーションを設定
  PASSWORD_REGEX = /\A(?=.*?[a-z])(?=.*?[\d])[a-z\d]+\z/i.freeze
  validates_format_of :password, with: PASSWORD_REGEX, on: :create, message: 'には半角英字と半角数字の両方を含めて設定してください'
```

開発環境でもエラーが発生することなく、テストも通ったため、本番環境にデプロイをしたところ「Sorry, something went wrong.」が表示されてしまいました。

## 原因
``SecureRandom.alphanumeric``で英字のみのパスワードが発行されていたため。
そもそもSecureRandomは[レファレンス](https://docs.ruby-lang.org/ja/latest/class/SecureRandom.html)では以下のように説明がされています。
>安全な乱数発生器のためのインターフェースを提供するモジュールです。 HTTP のセッションキーなどに適しています。

そして`alphanumeric`はSecureRandomモジュールのメソッドの一種であり、ランダムな英数字を生成してくれます。しかし必ずしも英数字混合で生成されるわけではありません。

```:コンソール
pry(main)> SecureRandom.alphanumeric
=> "NNCMHbfUbHRQmbwW"
```

確率は高くはないですが、上記のように英字のみのパスワードが生成されてしまうことがあります。

## 解決策

```ruby

class Users::SessionsController < Devise::SessionsController
  # ゲストユーザーとしてログイン
  def new_guest
    user = User.find_or_create_by!(nickname: 'ゲストユーザー', email: 'user@example.com') do |user|
    user.password = SecureRandom.alphanumeric(10) + [*'a'..'z'].sample(1).join + [*'0'..'9'].sample(1).join
    end
    sign_in user
    redirect_to root_path, notice: 'ゲストユーザーとしてログインしました。'
  end
end
```

力技になってしまいましたが、``[*'a'..'z'].sample(1).join + [*'0'..'9'].sample(1).join``とすることでパスワードの最後に必ず英字+数字の２文字が入るようにして英字のみor数字のみのパスワードが生成されないようにしました。
firebase loginができなくて困ったことまとめ

fastlaneで`Firebase App Distribution`にアプリをあげようとした際に`firebase login`でつまずいたことをまとめました。

## 問題① Error: @grpc/grpc-js only works on Node ^8.13.0 || >=10.10.0
これはnodeのバージョンが`8.13.0`または`10.10.0`以上でないために起こるエラーです。
nodeのバージョンを切り替える必要があります。

入っているnodeのバージョンを確認

```console
$ nodebrew ls
v9.11.2
v12.4.0
```
使っているnodeのバージョンを確認

```console
$ node -v
v9.11.2
```
バージョンを切り替える

```console
$ nodebrew use v12.4.0
use v12.4.0
$ node -v
v12.4.0
```
これで切り替え完了です！

その後切り替えたnodeを元にfirebaseを入れ直す必要があります。

```console
$ npm uninstall firebase-cli
$ npm uninstall firebase-tools
$ npm install -g firebase-tools --force
```

## 問題② -bash: firebase: command not found
これはPATHが通っていないことでコマンドが機能していないために起こるエラーです。
npmのPATHの確認と設定が必要になります。

PATHの確認

```console
$ npm bin -g
/Users/ユーザー/.nodebrew/node/v12.4.0/bin
(not in PATH env variable)
```
`not in PATH env variable`が表示されているということはnpmのPATHが通っていません。

PATHを通す

```console
$ export PATH=$PATH:`npm bin -g`
$ npm bin -g
/Users/mu/.nodebrew/node/v12.4.0/bin
```
これで完了です！
pythonでのMysqlの使い方

## はじめに
この記事はYoloで受け取ったデータをもとに可視化する為の方法として,Mysqlを利用する方法を記入していくつもりです.
Mysqlの使い方は以下の記事を参考に記事にしていきたいと思います.
>Python + mysql-connector-python の使い方まとめ
>https://qiita.com/valzer0/items/2f27ba98397fa7ff0d74

##環境
>python8.x
xamppを利用（Mysql）


## 使用しているライブラリ
>mysql.connector 

## データベースの構成
databasename:mask
table:mask-ok-or-ng1
カラム:3

|name      |format 
|:----------|-----:|
|day       | day   | 
|time      | time  | 
|ok-or-ng  | text  | 

## 実装したコード
```
def sqlng():
 day = datetime.date.today()
 time1 = datetime.datetime.now()
 conn = mydb.connect(
        host='127.0.0.1',
        port='3306',
        user='userid',#ユーザidの記入
        password='password',#パスワードの記入
        database='databasename'#データベースの名前を記入
    )
 # コネクションが切れた時に再接続してくれるよう設定
 conn.ping(reconnect=True)
 # 接続できているかどうか確認
 print(conn.is_connected())
 cur = conn.cursor()
 time2=str(time1.hour)+":"+str(time1.minute)+":"+str(time1.second)
 print(day)
 print(time2)
 cur.execute("INSERT INTO `mask-ok-or-ng1` (`day`, `time`, `ok-or-ng`)"+ "VALUES"+ "("+"'"+str(day)+"'"+","+"'"+str(time1)+"'"+","+"'NG')")
 conn.commit()
 cur.close()
 conn.close()
```
工夫している点としては,任意の変数をデータベースに挿入するときに,参照記事のやり方だとタプル型は使えないとエラーを吐かれたので上記のやり方でやりました.

```
# executemanyで複数データを一度に挿入
records = [
  (5, 'MONA', 3000),
  (6, 'XP', 1000),
]
cur.executemany("INSERT INTO test_table VALUES (%s, %s, %s)", records)
```

このやり方だとエラーを吐いた.
ここを下記のようにした.

```
 cur.execute("INSERT INTO `mask-ok-or-ng1` (`day`, `time`, `ok-or-ng`)"+ "VALUES"+ "("+"'"+str(day)+"'"+","+"'"+str(time1)+"'"+","+"'NG')")
```
## 最後に
これは個人的なメモ的に残しているので参考になると幸いです.
Vue.js 表示文字列にURLが含まれていたときにリンク化する

# 目的

- Vue.jsにおいて表示する文字列の中にURLが含まれていた場合リンク化して表示する方法を簡単にまとめる

# 詳細

1. 下記のPタグの中に変数textの内容を格納する。

    ```vue.js
    <p v-html="text"></p>
    ```
1. 変数testにURLが含まれている場合、リンクとして表示したい。下記のようなメソッドを定義する。

    ```vue.js
    /**
     * @param {String} text
     */
    autoLink(text) {
        return _.isString(text) ? text.replace(/(https?:\/\/[^\s]*)/g, "<a href='$1'>$1</a>") : '';
    },
    ```
1. 下記のようにPタグ部分で定義したメソッドを呼ぶ。

    ```vue.js
    <p v-html="autoLink(text)"></p>
    ```

# メソッド部分の簡単な解説

- 下記にメソッドの処理部分を記載する。

    ```vue.js
    return _.isString(text) ? text.replace(/(https?:\/\/[^\s]*)/g, "<a href='$1'>$1</a>") : '';
    ```
- `isString(text)? : ;`
    - 参考演算子を用いて引数に文字列が格納されているかチェックしている。
    - `isString(引数文字列)? isStringが真のときの処理 : isStringが偽のときの処理`のようになる。
- `text.replace(/(https?:\/\/[^\s]*)/g, "<a href='$1'>$1</a>"`
    - replaceメソッドを使用して文字列の置換を行っている。
    - replace(検索条件の文字列, 置換後の文字列)として指定している。
- `/(https?:\/\/[^\s]*)/g`（検索条件文字列の正規表現）
    - 正規表現部分を細かくまとめてみる。
        - 最初と最後の`/`はデリミタ（区切り文字）といって「この部分が正規表現ですよ」ということを表している。
        - 最後の`/`のあとの`g`は直前の正規表現を繰り返し検索する修飾子である。
        - デリミタの最初から最後部分までの`( )`は正規表現部分が一つの文字列であることを表している。
        - 「https」の後ろの`?`は直前の文字があるかないかでヒットとなる。なのでhttpでもhttpsでもヒットするように正規表現を用いて記述している。
        - `:\/\/`は「://」という文字列をエスケープを使用して記載しているだけである。
        - `[ ]`は内部に記載された内容いずれかにヒットする。
        - `^`は後述する内容以外にヒットする。
        - `\s`は空白文字、半角スペース、タブ、改行文字のいずれかにヒットする。
        - `*`は直前文字0回以上繰り返すときにヒットする。（URLのあとに半角スペース、全角スペース、改行が入るところで区切る）
    - 上記に記載した内容を日本語にしてまとめてみる。
        
        ```
        /(httpかhttpsにマッチ://空白文字、半角スペース、タブ、改行文字以外のいずれかにマッチする。直前の文字列が0回以上マッチする。)/
        ```
- `<a href='$1'>$1</a>`
    - 置換後の文字列であり$1にはマッチした文字列が格納されている。
GitHubのブランチについて

#はじめに
現在、DMM WEBCAMPでプログラミングを学習中の初心者です。
チーム開発のフェーズに入ったことで、GitHubを使用する機会が大幅に増えています。
最初は慣れなかった操作も、段々と回数を重ねていくうちに慣れてきました。
しかし、直感で操作してしまっているケースもあり、今のうちにしっかり勉強しようと思い、この記事を書くことにしました。
それでは参りましょう。

#そもそも一般的なブランチの意味って？
英和辞典で調べてみると、``branch``の意味としては、
``(木の)枝、枝状のもの、支流、(山の)支脈、支系、分家、部門、分科``
となっていました。

チーム開発の現場に置き換えると、担当するセクションやパートごとに、ブランチを切った上で作業に取り掛かっていたので、``枝``や``支流``という和訳はしっくりきますね。

#GitHubにおけるブランチの意味とは
念のために、Gitの公式ドキュメントでも確認してみましょうか。

公式情報によると、ブランチの定義はこうなっていました。
``Git におけるブランチとは、コミットを指す軽量なポインタに過ぎません。``

ん？　ポインタ？

英語の``branch``の和訳と、公式情報の定義がコンフリクトしてるみたいに思えてきました笑
もう少し詳しくみてみましょうか。

#新しいブランチを作成する
新しい作業に取り組む時や、バグを解決する際など、ブランチを新しく作成する場面は往々にあると思います。
半ば無意識で行っている作業の意味を考えてみましょう。

再度、公式ドキュメントに立ち返りましょう。
ブランチを新しく作成するということは、
``単に新たな移動先を指す新しいポインタが作られるだけ``
とのこと。
今までずっと、新たな作業用の道が作られるようなイメージでしたが、ここでもあくまで``ポインタ``という概念で説明されています。

#それならコミットの定義も確認しよう
「急がば回れ」ということわざに倣い、``コミット``の定義をみてみましょう。

``Git にコミットすると、Git はコミットオブジェクトを作成して格納します。
このオブジェクトには、あなたがステージしたスナップショットへのポインタや作者・メッセージのメタデータ、そしてそのコミットの直接の親となるコミットへのポインタが含まれています。``

なるほど、分からん。みたいな状態になりますね。
上の文章を読み解くと、コミットとは、``git add``後のステージングエリア上ファイルの、``スナップショット``を撮影すること、というイメージになるのでしょう。

以下、公式ドキュメントから画像等をお借りして、もう少し説明していきます。

早速、新しく``testing``ブランチを作成しましょう。
``git branch -b testing``
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/824345/8bd3ec65-9570-c414-cfc9-3834563c2215.png)
先ほどの公式ドキュメントの説明を思い出しましょう。
新しくブランチを作成したということは、``単に新たな移動先を指す新しいポインタが作られただけ``です。

#HEADとは？
もう一度上の図を確認すると、masterブランチの上に、``HEAD``という文字が見えます。
HEADとは、``あなたが作業しているローカルブランチへのポインタ``を指しています。
つまり、今現在、まだローカル環境は``master``ブランチであり、先ほどの``git branch -b``コマンドは新しくブランチを作成しただけで、ブランチ自体の切り替えはまだ行われていないということです。

#ブランチの切り替え
それでは、ここで先ほど作成したtestingブランチに移動しましょう。
コマンドは、
``git checkout testing``
です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/824345/08879f96-9239-1be7-0916-2850dd398d67.png)
ローカルブランチが切り替わったことで、``HEAD``も移動していることが分かるでしょうか？

testingブランチにて、何かファイル変更を行い、コミットをしてみましょう。
``git commit -m "changed something"``
すると、以下のように変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/824345/337b1491-6abc-8d81-89bc-1d39d95e14ac.png)
testingブランチは一つ分進んでいますが、masterブランチは一切動いていません。
``HEAD``はコミットが進んだ分に併せて、一つ分移動していますね。

ここで、masterブランチに戻ってみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/824345/b332cf5c-8eb0-a452-fb21-802f61bc25b3.png)
もうお分かりですね。
``HEAD``もmasterブランチに移動していることが確認できました。

つまり、``HEAD``はあくまで作業しているローカルブランチのポインタを示しているだけ、という説明通り、ローカルの場所を移動すれば、HEADがそれに付随される、ということですね。

#おわりに
今まで、ブランチは``線``でつながっているイメージが強かったのですが、実際はポインタのような``点``が連続しているようなもの、という理解になろうかと思います。
GitHubも深掘りすれば、色々と学ぶべきことがたくさんありそうですね。
Google Analytics でトラッキングID の取り方が変わった件（2020年11月17日時点）

# 概要

[Google Analytics](https://analytics.google.com/analytics/) のトラッキングIDの取り方が大きく変わったため、いろんなサイトで紹介されているやり方では実現できなくなってたので方法をメモ。

# 何が変わったのか

プロパティの作り方。
ここをデフォルトのまま進むとトラッキングIDは発行できない。

# 具体的な方法

1. [Google Analytics](https://analytics.google.com/analytics/) にログイン
2. 右下メニューの `管理` 選択
3. (まだアカウントないなら) `アカウント` の `＋アカウント` 押してアカウント追加。その後、 `次へ` で `プロパティの設定` 画面を表示
4. (既にアカウントあるなら) `プロパティ` の `＋プロパティ` 押して `プロパティの設定` 画面を表示
    
    ↓ アカウントの設定画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29899/8930e214-ffab-9de0-39ac-8f784d82e04b.png)
5.  `プロパティの設定` 画面で下記のように設定して `次へ`
    
    ポイント
    a. `詳細オプションを表示` クリック
    b. `ユニバーサル アナリティクス プロパティの作成` を ON
    c. `ユニバーサル アナリティクスのプロパティのみを作成する` を ON
    
    ↓ プロパティの設定画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29899/ffaab9c0-ad58-4d96-bc42-31837b61eb40.png)
3分アジャイル フロントエンドテスト

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47327/cb34d6ac-eadf-a5a4-74d9-ed30ae2cdf5a.png)

---
## Static
- 静的コード解析
- 構文エラー、Lint


---
## Unit
- 独立した機能ごと
- コンポーネントのテスト

---
## Integration
- 複数のコンポーネント
- 組み合わせたときにうまく動くか


---
## End to End
- 画面ごとのテスト
- Storybook

---
## 参考
https://testingjavascript.com/
https://kentcdodds.com/blog/unit-vs-integration-vs-e2e-tests
webpack v5がリリースされた現状まとめ

# プロダクションで使うのはまだ早い(11月時点

webpack v5のリリースは行われましたが、まだバグが多くありwebpackで使用するloaderやpluginは対応が全然追いついていません。

[webpack v5系のIssues](https://github.com/webpack/webpack/issues?q=is%3Aissue+is%3Aopen+label%3Awebpack-5) を眺めると多くの問題があることがわかります。

プライベートでwebpack v5にアップデートを試みたところ全部壊れました。大変危険です、webpack v5 を使用するのは 数ヶ月ほど待ったほうが良いと思います。

# 周辺ツールの現状

webpackを使用するにあたって特に重要な webpack-dev-server と webpack-cli の現状は以下のとおりです。

## webpack-dev-server

webpack-dev-server は webpack v5対応がまだリリースされてないので、動かないケースが何点かあります。

- [webpack cli v4 と webpack-dev-server を組み合わせた時に起きる問題についての Issue](https://github.com/webpack/webpack-dev-server/issues/2759)

- [browserslist 使用時のバグ](https://github.com/webpack/webpack-dev-server/issues/2758)


## webpack-cli

webpack v5 対応のためv4のリリースはされていますが、上記でも書いている通りwebpack-dev-serverと組み合わせるとバグります。

webpack-cli v4からwebpack-dev-server の起動を**webpack serve**コマンドに統合するようになっています。

# [変更内容](https://webpack.js.org/blog/2020-10-10-webpack-5-release/#major-changes-removals)

主に下記のような変更があります。

- 永続的なキャッシング
- TypeScriptの対応で `@types/webpack` が不要になり、`import { WebpackOptionsNormalized } from 'webpack'; ` で型を import できるようになった。(ファイル名を webpack.config.ts にする必要がある
- Tree Shaking の最適化が入りバンドルサイズ縮小に期待できる
- CommonJs の Tree Shaking 対応
- css の chunk が可能になった( [MiniCssExtractPlugin](https://webpack.js.org/plugins/mini-css-extract-plugin/) 使用時にできる)

# 破壊的変更

特に大きな破壊的変更を2つ取り上げます。

## Node.js の polyfill を自動で挿入しなくなった

今まではwebpackを使用すればNode.js のコードをクライアントサイドで使用し、自動でpolyfillを挿入してくれていました。

今後 webpackはwebで動作するコードに焦点を当てていくため、Node.jsのpolyfill がバンドルに含まれ、結果的にバンドルサイズがデカくなくることを望まないようになり、
自動で polyfill を挿入しなくなりました。

polyfill を挿入したい場合は [webpack/node-libs-browser](https://github.com/webpack/node-libs-browser) を参照して、自前で挿入する必要があります。
また、クライアントサイドで Node.js に依存したパッケージを使用している場合は、パッケージの対応を待つか、フロントエンド互換のあるパッケージに変更する必要があります。

global, __filename, __dirnameもwebpackのデフォルト設定でfalseに変更されたので、使用したい場合は明示的に変更する必要があります。

## デフォルトランタイムが一部 ES2015 になった

webpackの生成するコードが一部 ES2015 になったので、明示的に es5 への対応が必要となりました。

browserslistnのサポートが含まれたので、browserslistの設定またはwebpack の設定を変える、２つの選択肢があります。

- webpack の設定

webpack.conf.js

```JavaScript
module.exports = {
  target: ['web','es5']
};
```

- browserslist の設定

.browserslistrc

```
last 1 version
ie >= 11
```

- package.json

```json
 "browserslist": [
    "last 1 version",
    "> 1%",
    "ie >= 11"
  ]
```

# 参考文献

[webpack@5の主な変更点まとめ](https://blog.hiroppy.me/entry/webpack5)
手書き文字AIメモ

位相的データ解析
https://blog.albert2005.co.jp/2016/02/12/%E4%BD%8D%E7%9B%B8%E7%9A%84%E3%83%87%E3%83%BC%E3%82%BF%E8%A7%A3%E6%9E%90%EF%BC%88topological-data-analysis%EF%BC%89%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6/
RNNでストロークを予測
https://japan.cnet.com/article/35103656/
ベジエ曲線ベースのRNN(google)
https://webbigdata.jp/ai/post-3053
https://ai.googleblog.com/2019/03/rnn-based-handwriting-recognition-in.html
https://techblog.exawizards.com/entry/2018/11/09/145402
dataset
https://arxiv.org/pdf/1812.01718.pdf
kanji2kanji (RNN based)
changes kuzushi-kanji to natural kanji
https://github.com/hardmaru/kanji2kanji （編集済み）
Xcode12 + SwiftPM + Firebase iOS SDKの注意点

### はじめに
Firebase iOS SDK も Swift Package Manager (SwiftPM) 向けの対応が進み、2020/8/25にリリースされた[v6.31.0](https://firebase.google.com/support/release-notes/ios#version_6310_-_august_25_2020) からβ版として提供され始めました。

[Swift Package Manager for Firebase Beta](https://github.com/firebase/firebase-ios-sdk/blob/master/SwiftPackageManager.md) に利用方法が掲載されており、とても簡単に SwiftPM で Firebase iOS SKD を組み込むことができます。

### Archive を処理する時の問題
ただ、アプリを Archive して Organizer で Distribute App や Validate App を実行すると次のようなエラーが発生してしまいます。

- Found an unexpected Mach-O header code
- IPA processing failed

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16508/9199a0fe-209b-3a91-ffaa-2ad109658eff.png" width=350> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16508/2241d5d9-a51a-fbab-f3b8-da3052d726df.png" width=350>

### 原因と回避策
これは既知の問題で、先ほどの [Swift Package Manager for Firebase Beta](https://github.com/firebase/firebase-ios-sdk/blob/master/SwiftPackageManager.md) にしっかり回避策が掲載されていました。

> If you're using FirebaseAnalytics, Xcode 12.0, and have an issue with device installation or archive uploading, see the workaround at https://github.com/firebase/firebase-ios-sdk/issues/6472#issuecomment-694449182.

このリンク先の Issue を確認すると、アプリバイナリに静的にリンクされるいくつかの Static Frameworks がアーカイブに含まれてしまっているということが原因のようです。下記引用のとおり、ビルドの Post-Action にてそれらの Static Frameworks を削除することで回避できました:+1:

> Add the following to the Scheme's Build Post-Action:
>
> ```sh
> rm -rf "${TARGET_BUILD_DIR}/${TARGET_NAME}.app/Frameworks/FirebaseAnalytics.framework"
> rm -rf "${TARGET_BUILD_DIR}/${TARGET_NAME}.app/Frameworks/GoogleAppMeasurement.framework"
> rm -rf "${TARGET_BUILD_DIR}/${TARGET_NAME}.app/Frameworks/FIRAnalyticsConnector.framework"
> ```
>
> Make sure to select **Provide build settings** from the app.
1分でわかるDOMとノードについて【イラスト解説】

## 前提知識:HTMLについて
タグに囲まれた文章によって構成される。
タグとは囲んだ文章が何を示すかを表したものであり、始まりを示す開始タグと終了タグがある。
何を示すかは**要素名**と呼ばれる。< a >< body >< div >などがそれにあたる。

## DOMとは？
HTMLなどの文章を扱うための手法の１つ。これを使う事でHTMLなどの各要素(aタグなど)を簡単に参照・制御できる
現在ではほとんどのwebブラウザ(chromeやsafariなど)がこのDOMを採用している。
Web上に読み込まれたDOMは画像のようにブラウザの機能で簡単に確認する事ができる。
大手企業のサイトのDOMを確認してHTMLやCSSの参考にしたエンジニアも少なくはないでしょう。
![スクリーンショット 2020-11-17 9.53.03（3）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840696/e8856043-5c6a-4d11-2370-3d6a7f761465.png)




## DOMツリーとノードについて
DOMでは対象となる各要素(bodyタグなど)を抽出し、それを階層構造として扱う。
一番上を根としてそれぞれの下位が木の枝に見える事からこの構造を**DOMツリー**と呼ばれます。
HTMLやbodyダグなど各要素を**ノード**と呼ばれます。
特定のノードを基準にした場合、その上(根側)にあるノードを親ノード、その下(枝側)にあるノードを子ノードと言います。
下記のサンプルコードに置いてheadの親ノードはHTML、子ノードはpタグになります。

```
<!DOCTYPE html>
<html lang="ja">
<head>
  <title>DOMツリーについて</title>
</head>
<body>
  <p>この記事はDOMツリーについて紹介してます</p>
</body>
</html>
```

![スクリーンショット 2020-11-17 10.02.16（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840696/3cb2c896-563d-cc26-5e8b-0ffa2fe5a4cb.png)
【IQ Bot】カスタムロジック：テーブルの最後のｎ行を削除する

IQ Botを使って、テーブルの「最後のｎ行」を削除したいんですがどうすればいいですか？　という質問を同僚から受けました。

同様のユースケースが他にどれだけあるのか不明ですが、備忘録がわりに載せておきます。


```python:最後のｎ行を削除

#表の操作をするときに必ず入れるコード（最初）
import pandas as pd
df = pd.DataFrame(table_values)

# ここから先が今回の処理

n = 2     # 最後のｎ行を削除したい、そのｎの数を指定。

for i in range(len(df)-n,len(df)): 
  df.at[str(i),"列名"] = "この行を削除します"    # 「列名」はテーブルに存在する適当な列名

df = df[df["列名"] != "この行を削除します"]      # 「列名」は↑と揃える

#表の操作をするときに必ず入れるコード（最後）
table_values = df.to_dict()

```
【HTML】videoタグで動画を埋め込む

##videoタグで動画を埋め込む
<font color="MediumBlue">イメージ的にはimgタグで画像を扱うような感じです。</font>
videoタグでHTMLに動画を埋め込む場合には、例えば以下のように記述します。

```html:index.html
<video src="movie.mp4"></video>
```
##sourceタグの使用とユーザー環境への配慮
sourceタグを使用することで、ブラウザに再生させたい動画を提示できます。 
また、sourceタグでは、フォーマットの異なる動画データを複数指定することができます。 
このことにより、ブラウザは記述された順に、再生可能なデータを利用するので
より多くの環境で動画を視聴してもらえる可能性が高くなります。

```html:index.html
<video>
<source src="movie.mp4">
<source src="movie.ogv">
<source src="movie.webm">
</video>
```

##videoタグの様々な属性
videoダグの属性は、主に4つです。

###1. poster属性
ユーザー環境で利用できる動画が無い場合に
表示させる画像ファイルを指定することができます。

```html:index.html
<video src="movie.mp4" poster="samnail.jpg"></video>
```
###2. controls属性
再生・一時停止・再生位置の移動・ボリュームなど
動画を利用しやすくするインターフェースを、
ブラウザが自動で表示することができます。

```html:index.html
<video src="movie.mp4" controls></video>
```
###3. autoplay属性
ウェブページを読み込んだ時点で、動画が自動再生されます。

```html:index.html
<video src="movie.mp4" autoplay></video>
```
###4. preload属性
ウェブページを読み込んだ時点で動画を裏側で読み込みます。
動画をあらかじめ読み込んでおくことで、ユーザーが再生ボタンを押したときに
動画の再生がスムースになる…かもしれません。

```html:index.html
<video src="movie.mp4" preload="none"></video>
```
ユーザーが動画をあまり必要としていないことが想定される場合や、
サーバに余分な負担を掛けたくない場合には
 **<font color="DeepPink">preload="none"</font>** を指定すると良いそうです。

##最終的に私が書いたコード
```html:index.html
<div class="movies">
  <video controls autoplay poster="images/samnail.jpg" width="320" height="240">
    <source src="images/movie.mp4">
  </video>
</div>
```

##実際のブラウザでは
![Nov-17-2020 06-58-33](https://user-images.githubusercontent.com/69192993/99313135-62109900-28a2-11eb-8ebc-f6e42a9e36ee.gif)

##まとめ
* HTMLに動画を埋め込む場合には、videoタグで実装可能です。
* sourceタグを使用することで、より多くの環境で動画を視聴してもらえる可能性が高くなります。
* videoダグの属性は、『poster属性』『controls属性』『autoplay属性』『preload属性』の4つです。
レポートをメールで配信した時には　画像が表示されない

画像を含んだ項目を持つレポートをメールで配信した場合には
画像が表示されずにURLがそのまま表示されてしまいます。


解決策:

オブジェクトに画像でなくて代わりに文字の数式項目を作ることのようです。

元の質問
[Supress HTML in emailed reports containing flags](https://trailblazers.salesforce.com/answers?id=9064S000000DLFP)
【PHP】画面出力する際にechoとprintどちらを使うか

PHPの初学者です。ふと疑問に思いました。

##画面出力する際にechoとprintのどちらを使うか
###結論：　どちらを使っても、大した違いはありません。
（但し、厳密には異なります。）

<dl>
<dt>echo</dt>
<dd><strong>1つ以上の</strong>文字列を出力します。</dd>
<dd>返り値・・・値を返しません。</dd>

<dt>print</dt>
<dd>文字列を出力する</dd>
<dd>返り値・・・常に１を返します。</dd>
</dl>

###つまり...
**echo**　→　返り値が**ない**
**print**　→　返り値が**ある**
でも、printで出力した場合、常に返り値が1であるため、それを使って何かをすることはありません。

##結局は、echoで出力すると良い
今までの説明で、echoもprintも違いはあれども、大した違いは無いということはわかっていただけだかと思われます。

###<font color="DeepPink">それでもechoを使うと良いのです！</font>
理由はパラメーターの違いです。echoはパラメーターを複数指定できます。
先程出てきましたが、
echoは1つ以上の文字列を出力し、printは単に文字列を出力します。

```php:test.php
<?php
echo 1, 2, 3, 4;
?>
```
次のようになります。
1234

```php:test.php
<?php
print(1, 2, 3, 4);
?>
```
次のようになります。
Parse error: syntax error, unexpected ','
**<font color="OrangeRed">printにはカンマは使わないのに、強引に書いた為に、構文エラーになってます。</font>**

###echoの場合、文字列と整数を併記することも可能
echoはパラメーターを複数指定が可能ですが、文字列と整数を混合させて記述することもできます。

```php:test.php
<?php
echo "2+5=", 2+5;
?>
```
次のようになります。
2+5=7

##まとめ
* PHPにおいて、画面出力する際にechoとprintのどちらを使っても、大した違いはありません。
* 但し、echoはパラメーターを複数指定することができ、文字列と整数を併記することも可能です。
* よって、echoを使うのが良いです。
【HTML】リスト作成時に使用するul要素とli要素（ol要素）

※超初心者向けの内容です。
##なぜli要素にはul要素が必要なのか
###結論から言うと、必要です。HTMLでリストを作成した際に、そのレイアウトを変更する為です。

私がHTMLの学習を始めて間もない頃の話です。
『リスト表示をするためには、ul要素とli要素を用います。』とだけ教えられました。
さらにそれぞれの説明として、以下の通りでした。
***
ul要素・・・順序のないリストを示すブロックレベル要素です。li要素と組み合わせて使用します。
li要素・・・リストの項目を示すブロックレベル要素です。ul要素の子要素として記述します。

リストはul要素とli要素を組み合わせて使う

```html:index.html
<ul class="lists">
  <li class="list">いちご</li>
  <li class="list">みかん</li>
  <li class="list">りんご</li>
</ul>
```
***
私は、この説明では、日本語としては言葉はわかるけど、頭の中に内容が入ってきませんでした。

好奇心旺盛で、思いついたことはすぐに実行してしまう方ならわかるかもしれませんが
実は単にナカグロのリスト作成をするだけならば、
ul要素を書かなくても以下のように実装されるのです。

+ いちご
+ みかん
+ りんご

（厳密には、多少見え方が異なります。）

よって、ul要素を記述することに合理性必要性を感じませんでした。
「単に“こういうものだから”っていう理由で、よくみんな勉強できるよな」
と、本気で思っていました。

##リスト作成には、ul要素, li要素, そして ”ol要素”
HTMLでリストを作成するときは、**ul要素、ol要素、li要素**を使います。
（ol要素が無い時点で、説明不足だと個人的には思います）

<dl>
<dt>ul要素</dt>
<dd>ulは「Unordered List」の略です。「順序のないリスト」を意味して、<strong><font color="MediumBlue">ナカグロのリストを作成</font></strong>します。<strong>Disc型</strong>と呼ばれます。</dd>

<dt>ol要素</dt>
<dd>olは「Ordered List」の略です。「順序のあるリスト」を意味して、<strong><font color="MediumBlue">数字のリストを作成</font></strong>します。<strong>Decimal型</strong>と呼ばれます。</dd>

<dt>li要素</dt>
<dd>liは「List Item」の略です。「リストの項目」を意味して、ulタグまたはolタグを親要素として、それらで挟むことによって、<strong><font color="MediumBlue">項目を箇条書き</font></strong>できます。</dd>
</dl>

```html:index.html
<ul class="lists">
  <li class="list">いちご</li>
  <li class="list">みかん</li>
  <li class="list">りんご</li>
</ul>
```
次のようになります。

* いちご
* みかん
* りんご


```html:index.html
<ol class="lists">
  <li class="list">いちご</li>
  <li class="list">みかん</li>
  <li class="list">りんご</li>
</ol>
```
次のようになります。

1. いちご
2. みかん
3. りんご

##まとめ
**HTMLでリストを作成する際に、そのレイアウトを変更する為、ul要素は必要です。**

HTMLでリストを作成するには、**ul要素、ol要素、li要素**を使います。
ul要素・・・li要素の親要素となり、ナカグロのリスト（Disc型）を作成します。
ol要素・・・li要素の親要素となり、数字のリスト（Decimal型）を作成します。
li要素・・・ul要素、ol要素の子要素となり、項目を箇条書きできます。
【Rubyによるデザインパターン】テンプレートメソッドパターンのメモ

プログラムの設計力向上のため『Rubyによるデザインパターン』を読んでおり、気になるデザインパターンを、1つずつまとめます。

今回は、第一弾ですがテンプレートメソッドパターンについてまとめました。

## デザインパターン記事一覧
[【Rubyによるデザインパターン】テンプレートメソッドパターンのメモ - Qiita] (https://qiita.com/yuki_0920/items/07382034dfb65f0a13a0) <- 本記事
[【Rubyによるデザインパターン】ファクトリーメソッドパターンのメモ - Qiita](https://qiita.com/yuki_0920/items/324c5536bf4e3d085f33)
[【Rubyによるデザインパターン】ストラテジーパターンのメモ - Qiita](https://qiita.com/yuki_0920/items/87dc056952f71b88a287)
[【Rubyによるデザインパターン】コマンドパターンのメモ - Qiita](https://qiita.com/yuki_0920/items/46545085309877012201)
[【Rubyによるデザインパターン】オブザーバーパターンのメモ - Qiita](https://qiita.com/yuki_0920/items/64c7010844265e9e4bd2)
[【Rubyによるデザインパターン】シングルトンパターンのメモ - Qiita](https://qiita.com/yuki_0920/items/fc0b235e9956ffc6b76a)

## テンプレートメソッドパターンについて
基底クラスに不変の部分を記述し、変わる部分はサブクラスに定義するメソッドにカプセル化するパターンです。

変わるものと変わらないものを分離する、という設計の考えに基づいています。
## サンプルコード

趣味の筋トレにちなんでサンプルコードを書きます。
ベンチプレスと懸垂はどちらもトレーニングの流れは同じものの、具体的な流れはそれぞれ異なっています。

そこで、トレーニングごとの内容を出力するプログラムを書きます。

まずはテンプレートメソッドパターン適用前のコードです。

```rb
class Training
  def initialize(type)
    @type = type
  end

  def start
    prepare
    execute
    cleanup
  end

  def prepare
    if @type == :bench_press
      puts 'ベンチプレスを始めます'
      puts 'バーベルをセットします'
    elsif @type == :tinning
      puts '懸垂を始めます'
      puts '踏み台に乗ります'
    end
  end

  def execute
    puts 'トレーニングをします'
  end

  def cleanup
    puts 'アルコール消毒します'
    if @type == :bench_press
      puts 'バーベルを戻します'
    elsif @type == :tinning
      puts '踏み台から降ります'
    end
  end
end
```

呼び出し時は引数にトレーニングの種類を渡します。
実行結果はこのとおりです。

```bash
bench_press = Training.new(:bench_press)
bench_press.start
# ベンチプレスを始めます
# バーベルをセットします
# トレーニングをします
# アルコール消毒します
# バーベルを戻します

tinning = Training.new(:tinning)
tinning.start
# 懸垂を始めます
# 踏み台に乗ります
# トレーニングをします
# アルコール消毒します
# 踏み台から降ります
```

インスタンス変数 @type によって if 分で分岐をしています。トレーニングが2種類ならばよいかもしれませんが、トレーニング数が増えるたびにこの条件分岐は増え、1つのメソッドは長く複雑になってしまいます。

次に Template Method パターンを適用して書き換えた場合です。

```rb
class Training
  def start
    prepare
    execute
    cleanup
  end

  def prepare
  end

  def execute
    puts 'トレーニングをします'
  end

  def cleanup
    puts 'アルコール消毒します'
  end
end

class BenchPress < Training
  def prepare
    puts 'ベンチプレスを始めます'
    puts 'バーベルをセットします'
  end

  def cleanup
    puts 'バーベルを戻します'
    super
  end
end

class Tinning < Training
  def prepare
    puts '懸垂を始めます'
    puts '踏み台に乗ります'
  end

  def cleanup
    super
    puts '踏み台から降ります'
  end
end
```

呼び出し時はサブクラスのインスタンスを生成しており、テンプレートメソッドパターン適用前はトレーニングの種目を引数で渡していましたが、それがなくなっています。
実行結果はこのとおりです。

```bash
bench_press = BenchPress.new
bench_press.start
# ベンチプレスを始めます
# バーベルをセットします
# トレーニングをします
# アルコール消毒します
# バーベルを戻します


tinning = Tinning.new
tinning.start
# 懸垂を始めます
# 踏み台に乗ります
# トレーニングをします
# アルコール消毒します
# 踏み台から降ります
```

基底クラス Training にはトレーニングの骨子だけを定義し、具体的なトレーニングの内容はサブクラスで定義しています。

新たにサブクラスを生成する必要になったときは、基底クラスは変えずにサブクラスだけを変えれば良くなり、変更に強くなりました。

## おわりに
テンプレートメソッドパターンは、継承を使ったオブジェクト指向らしいデザインパターンですね。

個人的にはデザインパターンの中で一番使用頻度が高いのではと思いますので、使いこなせるようになりたいです。
【備忘録】Androidのステータスバーにグラデーションを指定する

画面一面グラデーションなどをやると結構綺麗でした。

```Activity.kt

class Activity : AppCompatActivity() {

   override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        //好きなグラデーションの向き
        val orientation = GradientDrawable.Orientation.BR_TL
        //好きなグラデーションの色
        val color1 = Color.parseColor("#e5a323")
        val color2 = Color.parseColor("#c4972f")
        val color3 = Color.parseColor("#ac6b25")
        //決めたグラデーションを色が変化する順番に並べる（二色でも良い）
        val colors: IntArray = intArrayOf(color1,color2,color3)
        
        val gradientDrawable = GradientDrawable(orientation,colors)
        
        //ステータスバーの背景を透明にする
　　　　 window?.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS)
        window?.statusBarColor = Color.TRANSPARENT
        window?.navigationBarColor = Color.TRANSPARENT
        window?.setBackgroundDrawable(gradientDrawable)
        
        //レイアウトファイルを読み込む
        setContentView(R.layout.activity)
        ・
        ・
        ・

   }


```
Google Colaboratory に登録しているスニペット（スクレイピング）

# Beautifulsoup4

## ベース
```python
from urllib.parse import urljoin

import requests
from bs4 import BeautifulSoup

url = "http://example.jp"

headers = {
    "User-Agent": "Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; rv:11.0) like Gecko"
}

r = requests.get(url, headers=headers)
r.raise_for_status()

soup = BeautifulSoup(r.content, "html.parser")


urljoin(url, "index.html")
```

## セッション
```python
with requests.Session() as s:

    r = s.get("http://example.jp", headers = headers)
    r.raise_for_status()

    soup = BeautifulSoup(r.content, "html.parser")
```

# Pandas

```python
import pandas as pd

df = pd.read_html("http://example.jp", header=0, index_col=0)
```

# Selenium

```python
!apt install chromium-chromedriver
!cp /usr/lib/chromium-browser/chromedriver /usr/bin
!pip install selenium

from selenium import webdriver
from selenium.common.exceptions import NoSuchElementException
from selenium.webdriver.chrome.options import Options

import time

options = webdriver.ChromeOptions()
options.add_argument("--headless")
options.add_argument("--no-sandbox")
options.add_argument("--disable-dev-shm-usage")

driver = webdriver.Chrome("chromedriver", options=options)
driver.implicitly_wait(10)

# メインのウインドウ
parent_window = driver.current_window_handle

driver.get("http://example.jp")

# URL表示
print(driver.current_url)

time.sleep(3)

# クリック
driver.find_element_by_link_text("XXXXX").click()

# ウインドウ切替
driver.switch_to.window(driver.window_handles[-1])
```
YouTube動画をキュレーションしてみた


私は比較的YouTubeの動画をよく見るのですが、自分が好きな動画のジャンルがチャンネル問わずにトピックごとにまとめられていると便利だろうと常々考えていました。そこで、自分のフロントエンド技術向上も兼ねて、自分用にYouTubeの動画をキュレーションしてくれるWebアプリを作ってみました。

## 成果物
完成したWebアプリは、Herokuにデプロイして公開しています。(https://youtubecurator.herokuapp.com/)
モバイル向けのデザインにしていること、自分が好きなジャンル(筋トレと将棋)に限られているので一般向けではないことにご注意ください。また、手持ちのiPhoneでしか動作確認していませんので、Android等では不具合が生じるかもしれません。こちらもご了承ください。

また、本アプリのソースコードも公開していますので興味のある方はご覧ください。
(https://github.com/ufield/youtube-curator-open)

## アプリの紹介
アプリは、トピックごとに動画を分類し、縦スクロールで切り替えられます。また、トピック内では横スクロールで動画を選ぶことができます。動画を選択すると上部のYouTube動画が切り替わります。実際に上部のYouTube動画をタップすると、動画が再生されます。
![intro_movie.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201540/b97c8f56-a14c-0afb-e715-867c51663c7e.gif)

画面右上の検索ボタンをタップすると、検索オプションが表示されます。必要なトピックのみを選択できたり、検索期間の変更が可能です。
![option.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201540/694e6c62-cd04-a888-3550-1a32e5409cb6.gif)


画面右上の右から2番目のボタンをタップすると、動画のジャンルを切り替えることができます。
![switch.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201540/faf5558b-5793-57f5-4a78-e47008f0c5ef.gif)

## システム全体の概説
今回作成したアプリの全体像を概説します。上で紹介した公開中のWebアプリは、下図中の**YouTube Curator WebApp**となります。

![システム概略図.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201540/54f003a5-3857-4dbf-f627-1ff2e8e53c17.png)

[YouTube Data API](https://developers.google.com/youtube/v3/getting-started?hl=ja)によって目的のジャンル・チャンネルの動画を取得し、Firebase の Cloud Firestore にデータを蓄積します。この際、どのチャンネルをどのようなトピックでキュレーションするかの定義ファイルを作成しておき、それを使用することで Cloud Firestore では適切なデータ構造としておきます。(基本的に動画タイトルに基づいてトピックに紐付けを行います)
**YouTube Curator WebApp** は、Cloud Firestoreからデータを取得して上記の紹介のように表示を行います。

**アノテーション用WebApp**は、適切にトピック付けがなされていなかった場合に、手動で簡単にトピックを付け替えるための管理者用アプリです。下図のような管理画面から、各動画ごとのトピックを変更して、それを Cloud Firestore に反映させることができます。(管理向けのため公開はしていません)

![annotator.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201540/a1643ea1-7f5c-7c10-e9d8-5958c2fc28a4.png)

今回は、**YouTube Curator WebApp・アノテーション用WebApp** ともに [Nuxt.js](https://ja.nuxtjs.org/) + [Vuetify](https://vuetifyjs.com/en/)という組み合わせで作成したみました。初めて触ってみましたが、なかなか作りやすかったように思います。また、UI作成のデザインパターンとして、**アトミックデザイン**を採用しています。アトミックデザインは様々なところで解説されていますが、具体例については、例えば過去の私の記事([OpenCV をビジュアルプログラミングできるアプリを Electron + Vue.js で作成](https://qiita.com/ufield/items/f3dc7d9a4174a2bad007))などを参考にしていただけると幸いです。

## 終わりに
今回は、Firebase, Nuxt.js, Vuetify などを初めて使用しましたが、それなりに動くものが作れてよかったです。完全に自分向けなので、動画のジャンルは管理者の決め打ちになってしまってますが、これをユーザーが各々カスタマイズできるようなアプリにしたら面白そうだ(けど、コストかかりそうだなあ...)とか思っています。仮にものすごい反響があれば考えてみたいと思います。
セキュリティ超初心者がCpawCTFを始める

#はじめに
前回、CTF初心者はまず何から始めれば良いかを整理した。
「セキュリティ超初心者だけどCTFやってみたい」
https://qiita.com/s-hirano/items/87cb834b10bb7490bf50
気持ちが乗ってる間にどんどん進めよう。

#CpawCTFに登録してみよう
CpawCTFのサイトはここ→https://ctf.cpaw.site
トップページに「スコアサーバへの攻撃はおやめください」と注意書きがある。ワクワク！
右上のSignUpから爆速で登録出来ました。

「初めての方はこちら」ページも一応チェック。
ジャンル一覧が載ってる。見慣れた名前もあれば初めて見る名前もあり…。
1. Crypto
2. web
3. Reversing
4. Pwn
5. Forensic
6. Network
7. PPC
8. Steganography
9. Recon
10. Trivia
11. Misc
どうも問題を解くためには様々なツールを駆使しないといけない模様。
ツールですら聞いたことない名前ばかりーーーーW(' O' )W

登録が完了するとLevel1の問題がジャンル色々9問ずらっと並びます。1問10pt！
![スクリーンショット 2020-11-16 9.58.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/863728/8fb3a69d-7be2-0735-9a32-bd45346b956c.png)
全部正解するとLevel2に進めるよう。ちなみに解答ページは無い。
とりあえず取っつきやすそうなWebからチャレンジしてみる…？？
$\tiny{※スクショ掲載許可済です}$

#その他
サイト内にはRankingページもあった！
上位にScore1890がずらっと並んでいるので最高点？全問正解ということかな。
最高Scoreと最低Scoreの人数をざっと数えてみたところ。
Score1890 → 700名
Score0    → 10,000名。
ちなみにScore10（1問解けた人）→ 1300名。
なんか怖くなってきた…Score0とScore10の間に大きな壁を感じる。
もしかしてとてつもない茨の道へ進もうとしてるのでは。
（そもそも登録だけして放置の人もいっぱいいるかもしれない。）

#おわりに
とにかく先が長そう〜。私はしがない子育てエンジニア〜ゆっくり気ままに〜やっていこ〜。
英語力も必要っぽいけどGoogle翻訳があれば何とかなるでしょうそうでしょう。
色々と挫折要素満載だけどまずは1問、千里の道も一歩からってね。→次回へ
[Swift5]配列と配列の差集合を取得する方法

## 方法
(array1 - array2　を実行する場合を考えます。)

1. array1とarray2を結合してSetに変換
2. 1の結果からarray2の要素を取り除く

## コード

``` Swift
let array1 = ["a", "b", "c", "d", "e"]
let array2 = ["a", "c", "e"]

let unionSet = Set(array1 + array2)
let diffArray = Array(unionSet.subtracting(array2))
print(diffArray)
// ["b", "d"]
```

自作した構造体に対しても同じように実行できます。

``` Swift
struct Food: Hashable {
    //Hashableのプロトコルメソッド
    static func == (lhs: Food, rhs: Food) -> Bool {
        return (lhs.name == rhs.name) && (lhs.price == rhs.price)
    }
    
    let name: String
    let price: Int
}

let food1 = Food(name: "ラーメン", price: 800)
let food2 = Food(name: "うどん", price: 700)
let food3 = Food(name: "そば", price: 600)

let myFavoriteFood = [food1, food2, food3]
let yourFavoriteFood = [food1]

let unionSet = Set(myFavoriteFood + yourFavoriteFood)
let diffArray = Array(unionSet.subtracting(yourFavoriteFood))
print(diffArray[0], diffArray[1])
// Food(name: "うどん", price: 700) Food(name: "そば", price: 600)
```
Matrix RGB LED FunduinoをColorduinoで使う

Matrix LEDを搭載したATmega328PボードFunduinoを使ってみましょう。
FunduinoはColorduino、RGB LED 8x8 Matrix Board with Driver Shield for Arduinoなどの名称があるようでAliexpress等で1000円程度で売られています。
今回は、Colorduinoのサンプルを使用してArduinoで動かしてみましょう。
##動作確認
新品にはテストファームウェアが入っているので5VとGNDを接続することでLEDの点灯を確認できると思います。
電源は3.3vではなく5Vを使用します。
##USBシリアルボードとの接続
次は、ファームウェアを書き込むため、FunduinoとUSBシリアルを接続しましょう。

|USBシリアル |MatrixLED |
|---|---|
|TX|RX|
|RX|TX|
|DTR|DTR|
##Colorduinoをダウンロード
GithubからColorduinoをダウンロードします。
https://github.com/lincomatic/Colorduino
Code⇒Download ZIPでダウンロードします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/691c40e9-6515-a711-2fdd-0be8315c5109.png)
##Arduinoへインストール
Arduinoから
スケッチ⇒ライブラリをインクルード⇒ZIP形式のライブラリをインストール
インストールするZIPファイルを選択しOKを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/ac2a5f3b-7fa1-dac9-5661-c2b11eae793c.png)
ファイル⇒スケッチ例⇒Colorduino⇒ColorduinoPlasmaを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/b899d288-196a-b223-7eb1-72762b004520.png)
##ボード設定
ツール⇒ボード”Arduino Nano”
⇒プロセッサ："ATmega328P(Old Bootloader)"を選択し、マイコンボードに書き込むをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/4a760696-2ca9-6eb1-b939-7ffb5c74f93b.png)
以上で動作します。
![DSC_0613 (2).JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/9e276dbe-7bd4-da26-3d11-15c0a46eda1b.jpeg)
【SQL】データの登録、更新、削除

SQLを使ってデータの登録、更新、削除する方法を学習したのでアウトプットいたします。

#データの登録
データの登録にはINSERTを使用します。
全てのカラムにデータの値を入れるか、特定のカラムにデータの値を入れるかで書き方が変わります。

```:全てのカラムに値を入れる場合
INSERT INTO テーブル名 VALUES(値1, 値2, 値3);
```

usersテーブルに、id、age、nameというカラムがあり、そこに全て値を登録する場合

```:例
INSERT INTO users(1, 25, "山田")
```

usersテーブルに、id、age、nameというカラムがあり、そこにid,名前だけ登録する場合

```:例
INSERT INTO users(id, name) VALUES(1, "山田")
```

#データを更新する
データの更新にはUPDATEを使います。
使い方は

```
UPDATE テーブル名 SET 変更内容 WHERE 条件;
```

例　先ほど追加したidが一のレコードのageを25から30に変更する時

```:例
UPDATE users SET age = 25 WHERE id = 1;
```

#データを削除する
データを削除するにはDELETE文を使います。

使い方は

```
DELETE FROM テーブル名　WHERE 条件；
```

先ほど登録したusersテーブルのid=1を削除する場合

```:例
DELETE FROM goods WHERE id = 1;
```

ちなみに
FROM テーブル名
でテーブルを指定するという意味になります。
AWS運用日記　初心者が『AWS』触ってみた

AWSを登録して初期設定をするところまで。


以下の３つを設定し終えたら記事書きますmm
❶CloudWatchで料金アラートを設定：使いすぎを防止
❷IAMで作業ユーザーを作成：セキュリティ対策
❸CloudTrailで操作ログを記録：ユーザーの行動ログを収集

では、また後程。この記事に追加していきます(*´ω｀*
【Java】値/文字列を比較（AOJ14 - カードゲーム）

#値や文字列を比較
* **compareToメソッド**
* 戻り値はメソッドの呼び出し元の値(変数1) - 引数の値(変数2)
    * 左の値 - 右の値=正：	1
    * 左の値 - 右の値=負：	-1
    * 左の値 - 右の値=0：０
* 日時も比較可能
* **compareToIgnoreCaseメソッド**：文字列の大文字と小文字を区別しない

```java
import java.util.Date;
public class Main {
 
	public static void main(String[] args) {
 
		String str1 = "a";
		String str2 = "b";
		String str3 = "A";
 		Date date1 = new Date(2017, 3, 28, 16, 20, 22);
		Date date2 = new Date(2017, 3, 29, 16, 20, 24);
 
		System.out.println(str1.compareTo(str2)); //-1
		System.out.println(str2.compareTo(str1)); //1
		System.out.println(str1.compareTo(str1)); //0
		System.out.println(str1.compareTo(str3)); //32
		System.out.println("===");
		System.out.println(str1.compareToIgnoreCase(str3)); //0
		System.out.println("===");
		System.out.println(date1.compareTo(date2)); //-1
		System.out.println(date2.compareTo(date1)); //1
		System.out.println(date1.compareTo(date1)); //0
	}
}
```


#カードゲーム（ITP1-9）
>太郎と花子がカードゲームをする。二人はそれぞれn枚のカードを持っており、nターンの勝負を行う。各ターンではそれぞれ１枚ずつカードを出す。カードにはアルファベットからなる動物の名前が書かれており、辞書順で大きいものがそのターンの勝者となる。勝者には３ポイント、引き分けの場合にはそれぞれ１ポイントが加算される。
太郎と花子の手持ちのカードの情報を読み込み、ゲーム終了後のそれぞれの得点を出力するプログラムを作成せよ。
Constraints
* 入力で与えられるｎが1000を超えることはない。
* 与えられる文字列の長さは100以下であり、アルファベットの小文字のみを含む。
Input
一行目にカードの数ｎが与えられる。続くn行に各ターンのカードの情報が与えられる。１つ目の文字列が太郎のカードに書かれている文字列、２つ目の文字列が花子のカードに書かれている文字列である。
Output
１つ目の数字が太郎の得点、２つ目の数字が花子の得点として１行に出力せよ。２つの数字の間に１つの空白を出力せよ。
Sample Input
3
cat dog
fish fish
lion tiger
Sample Output
1 7


```java
import java.util.Scanner;

public class Main {
	public static void main(String[] args) {
		Scanner scanner = new Scanner(System.in);
		int a = scanner.nextInt();
		int Taro = 0;
		int Hanako = 0;

		for (int i = 0; i < a; i++) {
			String b = scanner.next();
			String c = scanner.next();
			if (b.compareTo(c) > 0)
				Taro += 3;
			else if (b.compareTo(c) < 0)
				Hanako += 3;
			else {
				Taro += 1;
				Hanako += 1;
			}
		}
		System.out.println(String.format("%d %d",Taro, Hanako));
	}
}
```
Golang mysql CREATE DATABASE IF NOT EXISTS

こんにちは！Golang　勉強中です！

今回はDB作成〜接続を行なっていきます！

DB接続の方法はすぐに見つかりましたが、DB作成は手動でしている記事が多い印象でした。
直接Mysqlから実行ではなく、GOからオートマチックに操作したかったので方法を調べてみました。

[参考記事](https://stackoverflow.com/questions/30235031/how-to-create-a-new-mysql-database-with-go-sql-driver)

```

package main

import (
	"database/sql"

	_ "github.com/go-sql-driver/mysql"
)

// DbConnection grobal
var DbConnection *sql.DB

func checkDb() {
	DbConnection, err := sql.Open("mysql", "root:@tcp(127.0.0.1:3306)/")
	if err != nil {
		panic(err)
	}
	defer DbConnection.Close()

	_, err = DbConnection.Exec("CREATE DATABASE IF NOT EXISTS db_name")
	if err != nil {
		panic(err)
	}
	DbConnection.Close()

	return
}


func main() {
	checkDb()
}

```
packageがimportできてないとエラーが出るので適宜importしてください！

#### 以下解説
こちらのコードでmysqlと接続しています
` "root:@tcp(127.0.0.1:3306)/"`

root ユーザー名
:以降　パスワード (今回はルートユーザーなのでパスワードなしです）
@以降 プロトコル

mysqlと接続後にこちらのコードでDBの存在チェックと作成を行います。
`DbConnection.Exec("CREATE DATABASE IF NOT EXISTS db_name")`


関数を呼び出して実行します。

```
func main() {
    checkDb()
}
```



以上です！


DBの操作はORMを使っていきたいと思ってます！
ご指摘あればぜひお願いします！
【semantic segmentation】PSPNet : Pyramid Pooling最強説

<h1>概要</h1>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482094/176d3ce5-8e3a-cd40-efd4-526f1702f343.png)

とてもシンプルなネットワークだがなかなかの精度が出るPSPNet

a)画像を入力 b)ResNetで特徴を取り出す c)Pyramid Poolingで様々なスケールの特徴を学習し、画像サイズを合わせて結合する。d)1x1 convolutionで出力chanel数をclass数と一致させるsemantic mapを出力する。

githubにコード上げる予定です
https://github.com/yokosyun/SegNet

<h2>比較実験</h2>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482094/c6acb564-1e97-7e37-e528-b9c62bf7e735.png)

1. max poolingよりaverage poolingの方が精度が高かったらしい。max poolingの方が特徴がはっきり残って良いと思ったのが、、、

2. B1236の方が複数サイズでpoolingしているのでB1より精度はもちろんの事高くなっている。

3. Poolingしたあとconvolutionで次元を削減する事で多少精度が上がっている。余分な次元が減って学習しやすくなったのではないかと。

<h2>auxiliary loss</h2>
(b)Feature Mapを生成する為のResNetの途中の層でもclassificationを行い、d)と同じくlossを計算する。深いネットワークを使う時に消失勾配を減少する事が出来そう。

<h2>結果</h2>
入力
![input_tensor.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482094/ac909d9d-6bd4-54df-d716-07e726c27601.png)

ground truth
![target_tensor.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482094/44bbd254-5d70-4b40-0678-5f540bab38a5.png)

出力
![predicted_tensor.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482094/9ab18216-5d10-1ed9-276c-ca518768644e.png)


batch size8で23epochしかtrainingしてないのに良い感じ！
resnet50のpretrained weightを使ったからかな

<h1>結論</h1>
Pyramid Poolingするとやっぱり精度は上がるね

<h1>参考文献</h1>
Pyramid Scene Parsing Network
https://arxiv.org/pdf/1612.01105.pdf