OmniAICreator/Qiita-1.07M huggingface dataset:
Ruby Classの継承を使ってみた。

どうもチャンクノです。
今回はClassの継承を使ってみた話です。
ぶっちゃけ今までどういうところで使えばいいか分かってなかったんですよね。
でも個人開発している中で、ここで使うんじゃね？ってタイミングがあったので使ってみました！

自分の作っているアプリにはTradeモデルがあり、最初はそこに勝率を求めるメソッドを書いていました。

```
class Trade < ApplicationRecord
  attr_accessor :current_user_id

  def search_user_fx_trades
    Trade.where("(user_id = ?) and (trade_category_id = ?)", current_user_id, 1)
  end

  def win_number_of_fx_trades
    search_user_fx_trades.where("result" => "資産増")
  end

  def win_number_of_fx_daytrades
    win_number_of_fx_trades.where("trade_style_id" => 1).count
  end

  def daytrade_win_rate
    return "0%" if win_number_of_fx_daytrades === 0
    "#{(win_number_of_fx_daytrades / search_user_fx_trades.count.to_f * 
  100).floor(1)}%"
  end

  def fx_win_rate
    return "0%" if win_number_of_fx_trades.count === 0
    "#{(win_number_of_fx_trades.count / search_user_fx_trades.count.to_f * 
     100).floor(1)}%"
  end
end
```

ほんとはもっと書いてあるんですけど長くなってしまうのでこのぐらいに。
Tradeって他にもスイングトレードとスキャルピングトレードっていうのがあるんですがそれを書き終えた時に、このままいくとメソッドの数えぐいことになるなと気づきました。
まだ年単位や週単位のメソッドが残っていたので。
そこでClassの継承の出番か？と思い新たにClassを作成しました。

```
class Fx < Trade

  def win_number_of_fx_daytrades
    win_number_of_fx_trades.where("trade_style_id" => 1).count
  end

  def daytrade_win_rate
    return "0%" if win_number_of_fx_daytrades === 0
    "#{(win_number_of_fx_daytrades / search_user_fx_trades.count.to_f * 100).floor(1)}%"
  end
  
end
```

こんな感じ。
書き方は子クラス < 親クラスです。
これでFxクラスでもTradeクラスのメソッドが使えるようになりました。
子クラスは親クラスの全てを引き継ぐので、attr_accessor :current_user_idなどを、改めて子クラスに記載する必要はありません。
注意点としては、DayTrade内にあるメソッドなので新たにDayTradeインスタンスを作成することと、作成したインスタンスにcurren_userを引数に取らなければいけないということです。

```
@fx = Fx.new(current_user)
こうすると

@fx.day_trade_win_rate
こんな感じで呼び出せるようになる。
```

使用する場面があってるかは分かりませんが、こういう感じでそれぞれまとめることで分かりやすくなるんじゃないかなと思います！
なんかメソッドがめちゃくちゃ増えて分かりにくいなと感じてきたら別クラスに切り出せないか検討してみましょう！！
あ、ちなみにちゃんとTrade.rbというファイルとは別にFx.rbというファイルを作ってくださいね！
そんなこと分かってるとは思いますが念の為😌

それでは今日はこの辺で！
皆様よきプログラミングライフを🙏
親コンポーネントから子コンポーネントへpropsを使って値を渡す際にハマったこと

こんな感じで、example-component(子コンポーネントに)①itemsと②newItemsの二つのjsonを渡したい

#親コンポーネント
```
<example-component items="{{ json_encode($items) }}" newItems="{{ json_encode($newItems) }}" ></example-component>
```

#子コンポーネント
```
  props: {
    items: String,
    newItems: String
  },
```
がこれでやると、①itemsは問題なく渡せるが、②newItemsがundifindになってしまう

なんと、htmlは大文字小文字を区別できず全て小文字になってしまうそう...。
なので↓に修正する
#親コンポーネント改
```
<example-component items="{{ json_encode($items) }}" new-items="{{ json_encode($newItems) }}" ></example-component>
```
間に「-」を挟むことで、子コンポーネント側ではnew-items→newItemと認識してくれるようになる

初歩的かもしれませんが、僕はこれで1日を無駄にしてしまったので、みんな気を付けてくれ！
MarkdownファイルをJupyterLab形式からQiita形式へ変換するLinuxスクリプト

# 概要

JupyterLab形式の数式コード`$$ $$`を<code>```math</code>仕様に変換する

# スクリプト

```shell:run.sh
filename=${1-'code.md'}

# search $$
nl -ba $filename | grep "\$\\$" > TMP

# num of iteration
nrow=(`wc TMP    | awk '{print $1}'`)

# get row number
array=($(cat TMP | awk '{print $1}'))

for i in `seq 1 ${nrow}`
do

  echo ${array[$((i-1))]}

  if [ $(( ${i} % 2 )) == 1 ]
  then sed -ie "${array[$((i-1))]} s/\$\\$/\`\`\`math/g" $filename
  else sed -ie "${array[$((i-1))]} s/\$\\$/\`\`\`/g"     $filename
  fi

done

rm TMP
```

# 使用例

```
./run.sh code.md
```
laradockがどうしてもコミットしてくれなくて焦った

## laradokがどうしてもリモートにプッシュできないことについて

リモートにあげようとすればこうなる
https://gyazo.com/fc15d34c0c3e747f6f526002a94b9326


#原因
laradockをgit cloneで導入したためリポジトリが重複していた

```
project(.git)
  |___laradock(.git) ⬅️リポジトリが存在するのがいけない
  |___laravel
```

## 解決

ということで問題箇所のlaradockディレクトリに移動して、
リポジトリを削除

```
$ cd laradock

$ rm -rf .git
```

これだけでOK

変なところで時間費やした。
HKHealthStoreのデータ読み取り権限があるかチェックする

結論から言うと読み取り権限があるかチェックすることはできません。
書き込み権限の有無は[authorizationStatus(for:)](https://developer.apple.com/documentation/healthkit/hkhealthstore/1614154-authorizationstatus)でチェックすることができます。

このメソッドのDiscussionに以下の説明がありました。

```
This method checks the authorization status for saving data.

To help prevent possible leaks of sensitive health information, your app cannot determine whether or not a user has granted permission to read data. If you are not given permission, it simply appears as if there is no data of the requested type in the HealthKit store. If your app is given share permission but not read permission, you see only the data that your app has written to the store. Data from other sources remains hidden.
```

権限がない場合はデータが取得できないだけだそうです。
Latexで日本語の文章をPDFにする。

物凄く基本的なことですが、大事なことですのでメモを書いておきます。

## 上手くいかない

![d.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359600/ed1b4340-7c16-bec9-340e-9292d43d2117.png)

上のようにすると、英語の文章のPDF化はできるのですが、日本語の文章のPDF化は上手くいかないことがあります。

## どうすればよいか

まずPrintを選びます。
![s.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359600/a7165270-9853-3634-6de5-8ff3da0fc7c7.png)


そして以下の様にチェックをいれて実行すればOKです。
![q.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359600/a0930ca3-2c9b-7687-d644-1c8f7b9deaf3.png)
【Python】正規表現を利用していつ・どこで・だれが・何をしたゲーム

#目的
###・正規表現を学んだのでとりあえず楽しく使ってみる

#環境
- Visual Studio Code
- Python

#手順
#####すべてひとつのファイル(practice.py)に書きました。

###①正規表現のための標準ライブラリであるreモジュールをインポート

```python:practice.py
import re
```

###②質問を用意

```python:practice.py
question = "いつ？どこで？だれが？何をした？"
```

###③関数four_ws_gameを定義

```python:practice.py
def four_ws_game(sentence):
    words = re.findall(".*?？", sentence)
    i = 0
    while i < len(words):
        answer = input(f"{words[i]}:").strip()
        if answer == "":
            print("真面目にやってください")
        else:
            sentence = sentence.replace(words[i], answer)
            i += 1
    print(sentence)
```

わかりづらいので分解して見てみましょう。

####3-1. reモジュールのfindall関数を利用

- findall関数は文章(sentence)の中で**一致した部分**をリストにして変数wordsに渡します
 - 正規表現における**. (ピリオド)**は任意の一文字を意味する
 - **\* (アスタリスク)**は繰り返しを意味する

```python:practice.py
words = re.findall(".*?？", sentence)
```
 
つまりこのプログラムは、文章(sentense)の中から**末尾に？(全角クエスチョン)が付く任意の文字数の単語**探し出し、リスト化します。

- **?(半角クエスチョン)**は上記の単語を一つ一つ分けて取り出すために必要です
 - ?(半角クエスチョン)の有無でリストの中身がどう変わるのか見てみましょう

#####有


```python:practice.py
words = re.findall(".*?？", sentence)
print(words)
```

```python:実行結果
['いつ？', 'どこで？', 'だれが？', '何をした？']
```

#####無
 
```python:practice.py
words = re.findall(".*？", sentence)
print(words)
```

```python:実行結果
['いつ？どこで？だれが？何をした？']
```

####3-2. 文章(sentence)の中身を入力値に書き換えてプリント

```python:practice.py
i = 0
while i < len(words):
    answer = input(f"{words[i]}:").strip()
    if answer == "":
        print("真面目にやってください")
    else:
        sentence = sentence.replace(words[i], answer)
        i += 1
print(sentence)
```

###④sentenceを最初に用意した質問(question)にして実行

```python:practice.py
four_ws_game(question)
```

#コード全体
```python:practice.py
import re

question = "いつ？どこで？だれが？何をした？"

def four_ws_game(sentence):
    words = re.findall(".*?？", sentence)
    i = 0
    while i < len(words):
        answer = input(f"{words[i]}:").strip()
        if answer == "":
            print("真面目にやってください")
        else:
            sentence = sentence.replace(words[i], answer)
            i += 1
    print("何があったの？：" + sentence)

four_ws_game(question)
```

- 実行結果

```
いつ？:きのう
どこで？:家で
だれが？:ねこが
何をした？:ねころんだ
何があったの？：きのう家でねこがねころんだ
```

- 空欄にしようとすると怒られます

```
いつ？:きのう
どこで？:
真面目にやってください
どこで？:家で
だれが？:ねこが
何をした？:
真面目にやってください
何をした？:犬になった
何があったの？：きのう家でねこが犬になった
```
【Day65】積み上げ日記

##予定
■Udemy（セクション２０、２１）
－FirebaseとFacebookの連携を理解する
ー広告を実装する

##完了
■Udemy（セクション２０,21）
－FirebaseとFacebookの連携を理解する
ー広告を実装する(途中)

##学習時間
4h

##学習ポイント
■バナー広告の実装
①GADバナーデリゲートクラス、GADインタースティシャルデリゲートクラスを継承する。
②オブジェクト（箱）を作る。
※今回は配列で、画像・テキスト、インタースティシャル広告を出すためのオブジェクトを作る。

##気になったことメモ
■背景画像の設定順序（コードの構造）がよくわからない
[Python] 自分用のLINE botを作る

**注意**
この記事は**自分だけに向けた**LINE botをPythonで作る過程の紹介です．
この用途に限定すれば，LINE botの作成はとても簡単になります．
（使用例：時間のかかるスクリプトの終了をLINE経由で通知）

## Python APIのインストール

```shell
pip install line-bot-sdk
```

## LINE Developers (Messaging API) への登録，必要事項の取得

ここで必要な情報は，

- Channel access token: Messaging API settingsから
- 送り先のuser ID: **送り先にしたいアカウント (自分) で登録**すると，Basic settings > Your user ID (下の方) で送り先のIDを確認可能．
    - スマホのプロフィールから見るID (友達検索などで使うやつ) とは異なる

他のユーザーに向けても送信したい場合は，
- Channel secretをLINE Developersから取得
- フォローやメッセージ受信といったイベントに反応してuser IDを取得
が追加的に必要になります．

## Pythonコード

```Python
from linebot import LineBotApi
from linebot.models import TextSendMessage

LINE_CHANNEL_ACCESS_TOKEN = '上記で取得したChannel access token'
LINE_USER_ID_TO           = '上記で取得した送り先のuser ID'

def send_message(message=None):
    '''
    Args:
        message (str): default, hello
    '''
    if not message: message = 'hello'
    line_bot_api = LineBotApi(LINE_CHANNEL_ACCESS_TOKEN)
    messages     = TextSendMessage(text=message)
    line_bot_api.push_message(LINE_USER_ID_TO, messages=messages)
    return

if __name__ == "__main__":
    send_message() # hello
    send_message('goodbye') # goodbye
```

これだけ！

## 参考

[Qiita@kotamatsuoka: PythonでLINE Bot APIを使ってプッシュ通知を実装する]
(https://qiita.com/kotamatsuoka/items/6f56d0d0a3225160b4d0)
pip installでproxyにインストールが阻まれる


機械学習を触ってみようということで、環境のセットアップしています。
目標とする構成は、以下の通り。

* OS:Windows 10
* Python:3.7.3
* Anaconda:4.6.11
* Jupyter Notebook:5.7.8
* TensorFlow:1.13.1
* Keras:2.2.4

Anacondaをインストールし、いざAnaconda Powershell Promptからインストールを実行したところ、tensorflowのインストールを実行したところ、Time outになってしまいました。

```
(base) PS C:\Windows\system32> pip install tensorflow==1.13.1
Collecting tensorflow==1.13.1
  Retrying (Retry(total=4, connect=None, read=None, redirect=None, status=None)) after connection broken by 'ConnectTimeoutError(<pip._vendor.urllib3.connection.VerifiedHTTPSConnection object at 0x0000028CF4E8E860>, 'Connection to pypi.org timed out. (connect timeout=15)')': /simple/tensorflow/
  Retrying (Retry(total=3, connect=None, read=None, redirect=None, status=None)) after connection broken by 'ConnectTimeoutError(<pip._vendor.urllib3.connection.VerifiedHTTPSConnection object at 0x0000028CF4E8E898>, 'Connection to pypi.org timed out. (connect timeout=15)')': /simple/tensorflow/
...
```

## 解決方法

### 1. 単純にproxyの設定漏れ
.condarcの末尾に、下記の内容を追記します。
.condarcはデフォルトで、C:¥Users¥ユーザー名¥にあるはず。

``` 
proxy_servers:
    http: http://<user>:<password>@<proxy_host>:<proxy_port>/
    https: http://<user>:<password>@<proxy_host>:<proxy_port>/
```

残念ながら解消せず。

### 2. pipのproxyオプションで指定

pip proxyなどでググると・・・（以下略
ということで、やってみました

https://qiita.com/samunohito/items/40a03e1464899225e698


```
 pip install tensorflow==1.13.1 --proxy http://<user>:<password>@<proxy_host>:<proxy_port>
```

これでインストールできました！

## 反省

Proxyと言われると、反射的に環境変数に設定することが多く、以下のように指定しててハマってました。

```
pip install tensorflow==1.13.1 --proxy <user>:<password>@<proxy_host>:<proxy_port>

Exception:
<以下略>

pip._vendor.urllib3.exceptions.ProxySchemeUnknown: Not supported proxy scheme
```

思い込みって怖いですね。
curl: (60) Issuer certificate is invalid.となった時の対応方法


- 環境
    - Red Hat Enterprise Linux Server release 7.7 (Maipo)
    - curl 7.29.0 (x86_64-redhat-linux-gnu)

# 事象 : httpsを`curl`したら怒られた

```bash
$ curl https://localhost
curl: (60) Issuer certificate is invalid.
More details here: http://curl.haxx.se/docs/sslcerts.html

curl performs SSL certificate verification by default, using a "bundle"
 of Certificate Authority (CA) public keys (CA certs). If the default
 bundle file isn't adequate, you can specify an alternate file
 using the --cacert option.
If this HTTPS server uses a certificate signed by a CA represented in
 the bundle, the certificate verification probably failed due to a
 problem with the certificate (it might be expired, or the name might
 not match the domain name in the URL).
If you'd like to turn off curl's verification of the certificate, use
 the -k (or --insecure) option.
```

# 原因 : SSLで証明書の検証に問題があるから

```bash
If this HTTPS server uses a certificate signed by a CA represented in the bundle, the certificate verification probably failed due to a problem with the certificate (it might be expired, or the name might not match the domain name in the URL).
(訳)このHTTPSサーバーが、バンドルに示されているCAによって署名された証明書を使用する場合、証明書の問題(有効期限が切れているか、名前がURLのドメイン名と一致していない可能性)が原因で証明書の検証に失敗した可能性があります。
```


## 対応 : `-k`か`--insecure`オプションで証明書の検証をしない

```bash
If you'd like to turn off curl's verification of the certificate, use the -k (or --insecure) option.
(訳)curlによる証明書の検証をオフにしたい場合は、-k (または--insecure)オプションを使用します。
```

```bash:ちゃんとURL先が見えた
$ curl --insecure https://localhost
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
...省略...
</body></html>
```

## ほかの対応 : 証明書を用意する
- [[curl] HTTPS通信できない (unable to get local issuer certificate) - noknow](https://noknow.info/it/shell_script/tips/curl_ssl_certificate_probrem_60?lang=ja)
- [curl の openssl版でSSLサイトにアクセスすると "SSL certificate problem: unable to get local issuer certificate" エラーが表示される](https://www.ipentec.com/document/software-curl-error-ssl-certificate-problem-unable-to-get-local-issuer-certificate)
VSCode ESLint prettier 覚え書き

## VSCode プラグイン
 - dbaeumer.vscode-eslint
 - esbenp.prettier-vscode

## VSCode 設定
path: /.vscode/settings.json

```settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[yaml]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
```

## package.json
path: /package.json

```package.json
{
  ...

  "devDependencies": {
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-react": "^7.19.0"
  }
}
```

## ESLint 設定
path: /.eslintrc.json

```.eslintrc.json
{
    "env": {
        "browser": true,
        "es6": true,
        "node": true,
        "jest": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "prettier"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2020,
        "sourceType": "module"
    },
    "plugins": ["node", "react"],
    "rules": {}
}
```

## prettier 設定
path: /.prettierrc.yaml

```.prettierrc.yaml
trailingComma: "all"
# tabWidth: 4
singleQuote: true
# printWidth: 100
```
テストをまともにやってこなかったから、rspec-railsを使ってモデルの単体テストを初めてまともにやってみた話。

#超簡単なモデルの単体テストをやってみる。
[前回](https://qiita.com/0thefool/items/5af0f17f0075e7e0e013)せっかくミニアプリまで作ったので、今までまともにやってこなかったモデルの単体テストもやってしまおう！

と、今回は、超簡単な単体テストを実施しました。
テスト環境の準備が色々あったので備忘録として記載します。
#動作環境
ruby 2.5.1
rails 5.2.4.2
#下準備
modelとかmigration等、ここまでの環境は[前回](https://qiita.com/0thefool/items/5af0f17f0075e7e0e013)記事の下準備をご覧ください。
#テスト環境の準備
####gemをインストール
```..Gemfile
 (以下を追記)
  gem 'rspec-rails'
  gem 'factory_bot_rails'
```
```terminal.
$ bundle install
```

####respecをインストール
```terminal.
$ rails g rspec:install
```

####.rspecへの追記
```..rspec
(以下を追記)
--format documentation
```
これ、なんの意味があるのかと思ったら、**書かないとターミナルにテスト結果がdocument形式で表示されません。**


####spec/rails_helper.rbへの追記
```spec/rails_helper.rb
RSpec.configure do |config|
  (以下を追記)
  config.include FactoryBot::Syntax::Methods #Factory_botのメソッドを使用するため
end
```
####rspecファイルを作成する
```terminal.
$ bin/rails g rspec:model item
```
#単体テスト実装
それでは単体テストのコードを書いていきます。

##とりあえずテスト用インスタンスをつくってみた。
まずは半端な知識でテスト用のインスタンスを作ります。

```spec/factoreis/item.rb
FactoryBot.define do
  factory :item do
    #name に "test" とだけ入れます。
    name    {"test"}
  end
end
```

##とりあえずテストコードも書いてみた。
次に半端な知識でテストコードも書いていきます。

```spec/models/item_spec.rb
require 'rails_helper'

RSpec.describe Item, type: :model do
  describe '#create' do
    let(:item) {build(:item)}
    context 'can save' do
      it "is valid with a name" do
        expect(item).to be_valid   #name に "test" が入っていれば成功する(はず)
      end
    end
    context 'can not save' do
      it "is valid without a name" do
        item.name = ""              #name が 空の場合
        expect(item).to be_invalid  #失敗する（はず）
      end
    end
  end
end

```

##テストコード走らせてみた。
インスタンスも作った。テストコードも書いた。
次にやることと言ったら、もう決まってる。
いざ。

```terminal.
$ bundle exec rspec spec/models/item_spec.rb
```

```terminal.
Item
  #create
    can save
      is valid with a title
    can not save
      is valid without a title (FAILED - 1)

Failures:

  1) Item#create can not save is valid without a title
     Failure/Error: expect(item).to be_invalid
       expected `#<Item id: nil, title: "", created_at: nil, updated_at: nil>.invalid?` to return true, got false
     # ./spec/models/item_spec.rb:14:in `block (4 levels) in <top (required)>'

Finished in 0.34277 seconds (files took 5.22 seconds to load)
2 examples, 1 failure

Failed examples:

rspec ./spec/models/item_spec.rb:12 # Item#create can not save is valid without a title
```

あれ？ エラー？
あ、**validation書いてないですねこれ。**

##validationを追加してみた。
```null: false```だけ追加します。

```app/models/item.rb
class Item < ApplicationRecord
  (中略)
  validates :name,presence: true #null: false
end
```
#結果
```terminal.
$ bundle exec rspec spec/models/item_spec.rb
```

```terminal.
Item
  #create
    can save
      is valid with a title
    can not save
      is valid without a title

Finished in 0.33208 seconds (files took 6.29 seconds to load)
2 examples, 0 failures
```

**上手（？）にできました！**
#教訓
**validationを忘れない！**

今回は以上です。

#参考にさせていただいた記事
- [RailsでのRSpecの設定やら書き方とかいろいろ](https://qiita.com/sibakenY/items/2c97e3cfdc54e474c4f2)
- [RSpecの導入](https://qiita.com/tmyn470/items/b666f8673604bb167e90)
Pythonで毎日AtCoder #52

### はじめに
[前回](https://qiita.com/taxfree_python/items/c65c2e42f3d945c36235)
今日は、AGC-Aを3問解きます。

### #52
[AGC040-A](https://atcoder.jp/contests/agc040/tasks/agc040_a)

**考えたこと**
考え方は分かったのですが、実装ができませんでした。$a$を$[0]*(n+1)$のlistとします。私が実装でこけてたのは、'<'と'>'の両方をいっしょに処理しようとしていたからです。Nも$5 * 10^5$程度なので、$O(2N)(計算量は係数は無視)$くらいは通ります。まずは、'<'から処理します。$s[i]=='<'$なら$a[i+1]$は$a[i]+1$になります。
次に'>'について処理しますが、すこし工夫が必要です。'>'は不等号の関係より、後ろから計算しないといけません。ですので、range(n)にreversedをかけます。$s[i]=='>'$なら$a[i]=max(a[i+1]+1,a[i])$を取ります。最後に$sum(a)$を取ります。

```python
s = list(input())
n = len(s)

a = [0] * (n+1)
for i in range(n):
    if s[i] == '<':
        a[i+1] = a[i]+1
for i in reversed(range(n)):
    if s[i] == '>':
        a[i] = max(a[i+1]+1,a[i])
print(sum(a))
```


[AGC015-A](https://atcoder.jp/contests/agc015/tasks/agc015_a)

**考えたこと**
$N=10^9$なので$O(N)$は通りません。$n=1$ → $a=b$ならば1、$a \neq b$ならば0です。また、$a$>$b$のときは0、$a$ = $b$のときは、1になります。
それ以外の場合を考えます。総和の最小値は$a*n$のときではありません。なぜなら、全て$a$のときは最大値が$b$にならないからです。よって、$a(n-1)+b$になります。同様に、総和の最大値は$b(n-1)+a$です。$a(n-1)+b$以上$b(n-1)+a$以下は全て作ることができます。よって和の個数は$b(n-1)+a-{a(n-1)+b}+1$になります。これを計算すると、$(b-a)(n-2)+1$に変形できます。式変形しなくても、計算できますがキレイな方がいいので変形しました。

```python
n, a, b = map(int,input().split())

if n == 1:
    if a == b:
        print(1)
    else:
        print(0)
elif a >= b:
    if a == b:
        print(1)
    else:
        print(0)
else:
    ans = (b-a)*(n-2)+1
    print(ans)
```


[AGC006-A](https://atcoder.jp/contests/agc006/tasks/agc006_a)

**考えたこと**
$N$が十分に小さいので、$s,t$のどちらかのスライスを順に$N$個調べそれがもう片方に含まれている最大の値を探します。

```python
n = int(input())
s = input()
t = input()

c = 0
for i in range(n):
    d = t[:i]
    if d in s:
        c = i
if s == t: #もっと前に書いてforの処理を飛ばしてもいい
    print(n)
else:
    print(2*n-c)
```

### まとめ
AGC-Aに難しい印象があるのは何故だろうか。今週のABCで茶色になります。ではまた、おやすみなさい。
setTimeoutとsetInterval

#JavaScriptの関数


###繰り返し手順で必要な4つの関数
####setTimeout,clearTimeout,setInterval,clearIntervalという4つのグローバル関数について


setTimeoutとsetIntervalは、指定した時間（ミリ秒）が経過したらコールバック関数を呼び出す関数。
コールバック関数とは、他の関数の引数として指定された関数のこと。（関数Aに引数として渡す別の関数B）

setTimeout・・・一度だけコールバック関数を呼び出す。
setInterval・・・ブラウザを閉じるか、ページを移動するまで繰り返す。

呼び出しを止めるには、
setTimeoutかsetIntevalの戻り値をclearTimeoutとclearIntervalへ渡す。

```
let タイムアウトID = setTimeout(コールバック関数,ミリ秒);
let インターバルID = setInterval(コールバック関数,ミリ秒);

clearTimeout(タイムアウトID);
clearInterval(タイムアウトID);
```


以上

現在JavaScriptの学習中でタイマーを作っていたところ、重要だど感じたので書きました。
[メモ] Elixir言語でうるう年を判定する

# はじめに
- @from_Unknown さんの[[メモ] Go言語でうるう年を判定する](https://qiita.com/from_Unknown/items/33eaa456b4df21f3dca0) をみておりまして、[Elixir](https://elixir-lang.org/)だとどうやるのだろう？　と思ってしらべてみました
    - leap_ホニャララがあったような記憶はありましたが、あいまいでしたので調べなおしてみて、メモを残しておきます
- [Elixir](https://elixir-lang.org/)は、1.10.3-otp-22を使ってみます

# [Date.leap_year?/1](https://hexdocs.pm/elixir/Date.html#leap_year?/1)

```elixir
iex> Date.leap_year?(~D[2020-01-01])
true
iex> Date.new(2020, 1, 1) |> elem(1) |> Date.leap_year?
true
iex> Date.leap_year?(~D[2019-01-01])
false
iex> Date.new(2019, 1, 1) |> elem(1) |> Date.leap_year?
false
```

- 1年間のうち、その日が何日目なのかは[Date.day_of_year/1](https://hexdocs.pm/elixir/Date.html#day_of_year/1) です

```elixir
iex> ~D[2020-12-31] |> Date.day_of_year()
366
iex> ~D[2019-12-31] |> Date.day_of_year()
365
```

**Thanks!**
もっと気持ち悪く if を関数化したい

元ネタ:[4歳娘「パパ、constしか使わないで？」](https://qiita.com/Yametaro/items/17f5a0434afa9b88c3b1)

仕組みについては [Haskell の記事](https://qiita.com/yumura_s/items/d5ede4cc88f9ade72aed)を読んでいただきたく。

```.js
// 代数的データ型を関数に、
// パターンマッチを関数適用に見立てる宣言
const caseOf = match => adt => adt(match);

// Haskell の Maybe を意識した何か
const Nothing = () => ({Nothing}) => Nothing();

const Just = x => ({Just}) => Just(x);

const guard = flg => flg ? Just() : Nothing();

const fmap = f => caseOf({
  Nothing,
  Just: x => Just(f(x))
});

const fromMaybe = v => caseOf({
  Nothing: () => v,
  Just: x => x
});

// 定数関数
const con$t = x => _ => x;

// ifの代替関数の作成用
const if_ = guard;

const then_ = x => fmap(con$t(x));

const else_ = fromMaybe;

const compose = fs => fs.reduce((g, f) => x => f(g(x)), x => x);

// 使用例
const dayText = compose([
  if_,
  then_(() => "お休み"),
  else_(() => "平日"),
  lazy => lazy()
]);

console.log(dayText(true));
//=> お休み

console.log(dayText(false));
//=> 平日
```
PHP 正規表現

#前提
PHPにおける正規表現について記述していきます。

#本題

行頭にマッチする

```
^
#例：^hello。行頭にhelloの文字列はこのパターンにマッチする。
```
 
行末にマッチする

```
$
#例：hello$。行末にhelloの文字列はこのパターンにマッチする。
```
 

改行以外の任意の1文字にマッチする

```
.
#例：１、hello.world。hello worldやhello-worldなどの文字列はこのパターンにマッチする。 
```

英大文字A-Zの任意1文字にマッチする

```
[A-Z]
#例：１、a[A-Z]c。aAc，aBc，…，aZcなどの文字列はこのパターンにマッチする。 
```

英小文字a-zの任意1文字にマッチする

```
[a-z]
#例：１、a[a-z]c。aac，abc，…，azcなどの文字列はこのパターンにマッチする。
```

数字0-9の任意1文字にマッチする

```
[0-9]
#例：１、a[0-9]c。a0c，a1c，…，a9cなどの文字列はこのパターンにマッチする。
```

角括弧内に含まれない1文字にマッチする

```
[^]
#例：１、[^abc]。a、b、c以外の文字はこのパターンにマッチする。
```

直前の表現を0回以上繰り返す

```
*
#例：a、ab、abb、abbbなどはマッチする。
```

直前の表現を1回以上繰り返す

```
+
#例：ab、abb、abbbなどの文字列はこのパターンにマッチする。
```
【Python】DiscordのWebhookで遊ぶ。

今回はDiscordのWebhookを使って遊んでみたいと思います。

#WebhookのURLを取得する
##①チャンネル設定を開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628982/5896c1f9-a288-1460-63a3-429bd46dc483.png)
チャンネル名の右側に出ている「チャンネルの編集」を開きます。

##②ウェブフックを開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628982/5680fb21-cdea-d4a1-5779-8ea11b61dcb9.png)
サイドバーから「ウェブフック」をクリックし、開きます。

##③ウェブフックを開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628982/1cd23f6f-b0f0-63ea-2638-1b46167aa2cc.png)
右上の「ウェブフックを作成」をクリック。

##④Webhookの作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628982/a7aef3e0-4e9b-6fa6-c3f8-e2de53925731.png)
名前とアイコンはそのままにしてください。(後で遊ぶため)
ウェブフックURLの項目にある、「コピー」というボタンをクリック。
そして、保存ボタンをクリック。

#コード

```py:webhook.py
from discordwebhook import Discord # DiscordWebhookの読み込み

discord = Discord(url="") # ④Webhookの作成でコピーしたURLを貼りつける
discord.post(
    content="Whebohookのてすとおおおおおおおおおおおおおおおおおおおおおおおおおおお", # メッセージをの中身
    username="Webhook", # ユーザー名
    avatar_url="https://pbs.twimg.com/profile_images/1201406146822557696/ewFFvnAa_200x200.jpg" # アイコンのURL
)
```

#実行
実行するとこんな感じになります！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628982/bcad99d7-2f63-f444-b45a-9d74de4b7037.png)
【swift】xcode 11　標準体重と肥満率の計算

<img width="714" alt="スクリーンショット 2020-04-25 22.54.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/627010/943272e6-2d00-eb28-3e22-beacdd0fbf96.png">
<img width="527" alt="スクリーンショット 2020-04-25 22.50.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/627010/f1d6a508-8346-2425-1295-614a5d1ba321.png">


<a href="https://www.youtube.com/watch?v=iti5drd4ecs&t=76s">参考動画</a>

【学んだ点】
・UITextFieldで記入した数字を元に計算する
・計算結果を文字と一緒にテキストに表示させる


雑談
xcodeを勉強し始めて約２ヶ月が経ちました。
最初はコードの意味もわからずただひたすら動画を見て真似するを繰り返しの毎日でした。笑
そこから徐々に動画に出てくるコードを少し自分なりにアレンジしてみたりして、今は簡単なコードでしたら自分で考えて書けるようになり嬉しく、勉強してきて良かったなと思います。
勉強の記録としてこれから少しずつ今まで作ったアプリ含め、これから勉強していくことを記録していきたいと思います。

上記のアプリは一番最初に作ったアプリです。
参考動画の数式以外丸パクリで、全然大したアプリではないのですが自分が考えたことがシミュレーターで動いた時は結構感動しました。笑
【PowerShell】特定のTCPポートが開いているか確認

クラウド環境は、ICMP(Internet Control Message Protocol)の接続がデフォルトでは拒否されるため、pingが通らない。
以下コマンドで特定のTCPポートの疎通確認を行う。
バージョン4から利用できる。

```powershell
Test-NetConnection [IPアドレスorホスト名] -Port [ポート番号]
```
実行結果（疎通確認成功）

```
> Test-NetConnection -ComputerName X.X.X.X -Port 80
ComputerName     : X.X.X.X
RemoteAddress    : X.X.X.X
RemotePort       : 80
InterfaceAlias   : イーサネット
SourceAddress    : X.X.X.X
TcpTestSucceeded : True
```
実行結果（疎通確認失敗）

```
> Test-NetConnection -ComputerName X.X.X.X -Port 8081
警告: TCP connect to (X.X.X.X : 8081) failed
警告: Ping to X.X.X.X failed with status: TimedOut
ComputerName           : X.X.X.X
RemoteAddress          : X.X.X.X
RemotePort             : 8081
InterfaceAlias         : イーサネット
SourceAddress          : X.X.X.X
PingSucceeded          : False
PingReplyDetails (RTT) : 0 ms
TcpTestSucceeded       : False
```
社内Go PackageのためにGoDocで静的なHTMLを出力したい

# はじめに

「社内で管理しているGoのパッケージのGoDocを誰でも閲覧できるようにしたい」というモチベーションによる記事です。

Wantedlyさんでは[こちらの記事](https://www.wantedly.com/companies/wantedly/post_articles/198339)のようにKubernetesでGoDocサーバ([gddo-server](https://github.com/golang/gddo))を走らせることで社内GoDoc環境を構築しています。

今回はこのアプローチではなく、静的なHTMLをCI上で生成しそれをS3にホスティングすることで特にサーバを持たずに社内GoDocを運用する方針にしました。

# 環境・バージョン

Go: `go version go1.13.4 darwin/amd64`
GoDoc(golang.org/x/tools/cmd/godoc): `v0.0.0 (4b814e0)`

# やったこと

CIでGoDocを元にHTMLを生成しそれを社内Amazon S3へアップロードします。

CI上でgodoc(golang.org/x/tools/cmd/godoc)のコマンドを取得した後、素直にgodocで静的HTMLを取得したかったのですが、現状(2020年4月30日時点)のgodocのバージョンにおいては、静的なHTMLを生成するオプション等は存在しないと下記のIssueページで知りました。

https://github.com/golang/go/issues/2381

このIssueページを読むと、wgetを使えばなんとか対応できるとの記載がありました。

* https://github.com/golang/go/issues/2381#issuecomment-66059483
* https://github.com/golang/go/issues/2381#issuecomment-66059484

試したらたしかにちゃんとHTMLを生成してくれたので、CIのスクリプトに組み込みます。

下記の例ではGitLab CIのYamlファイルからの抜粋ですが、シェルな部分はLinuxなCI環境なら同じように動くはずです。

```yml:.gitlab-ci.ymlの抜粋
  stage: generate-godoc-html
  variables:
    ARTIFACTS_DIR: artifacts
    GODOC_OUT: godoc
    GODOC_SERVER: localhost:6060
  script:
    - godoc -http=${GODOC_SERVER} & # バックグラウンド実行
    - sleep 1 # 一応1秒寝かす
    # ↓wgetでHTMLを生成する
    - wget -r -np -N -E -k http://${GODOC_SERVER}/pkg/【対象パッケージのPath】
    # ↓(あってもなくてもホスティング先で表示はされる)HTML内の"localhost:6060"なPathをホスティング先のものに置換してやる
    - find ./${GODOC_SERVER}/ -name "*.html" -print0 | xargs -0 sed -i -e "s/http:\/\/${GODOC_SERVER}\/src\/【対象パッケージのPath】/https:\/\/【GitレポジトリのPath】"
    - find ./${GODOC_SERVER}/ -name "*.html" -print0 | xargs -0 sed -i -e "s/http:\/\/${GODOC_SERVER}/https:\/\/【S3のPath】\/${GODOC_OUT}\/master/"
    # ↓生成したHTMLらを移動
    - mkdir -p ${ARTIFACTS_DIR}/${CI_PIPELINE_ID}/${GODOC_OUT}
    - mv ${GODOC_SERVER}/* ${ARTIFACTS_DIR}/${CI_PIPELINE_ID}/${GODOC_OUT}
  artifacts:
    paths:
      - ${ARTIFACTS_DIR}/${CI_PIPELINE_ID}/${GODOC_OUT} # 保存
    expire_in: 3 days

  stage: upload-to-s3
  script:
    - aws s3 cp ${ARTIFACTS_DIR}/${CI_PIPELINE_ID}/${GODOC_OUT} 【対象S3バケットのPath】 --recursive
```

上記`wget`のオプションのクセが強いので解説です。

```
-r : 再帰的にダウンロードする
-np : 親ディレクトリを見ない
-N : ローカルより新しいものでない限りファイルを取得しない
-E : 拡張子.htmlをhtmlファイルに追加 (拡張子がない場合)
-k : リンクを相対リンクに変換
```

また、HTML内のリンクの整合を取るために上記のように、sedコマンドで`localhost:6060`な部分を置換しています。これにより、GoDoc内のリンクやソースコード先に問題なく飛ぶことができます。詳細を把握するためにはローカル環境で検証することをおすすめします。

これが走った後、対象のS3ホスティングのURLにアクセスすると、以下のようにGoDocを見ることができました。

![スクリーンショット 2020-04-30 20.58.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/91562/c5c35c3c-b259-fbe4-aaa1-0f472c4968ab.png)

# 参考

* https://github.com/golang/go/issues/2381
* https://www.wantedly.com/companies/wantedly/post_articles/198339
* https://github.com/golang/gddo
* https://qiita.com/somat/items/b775f7e082f1559707e2
【SSLサーバ証明書】種類の比較

|| ドメイン認証| 企業認証|EV認証           |
|:------------------|:------------------:|:------------------:|:------------------:|
|ドメイン使用権の認証|〇|〇|〇                   |
|ウェブサイト運営団体の実在性を認証|×|〇|〇     |
|個人による取得|〇|×|×                         |
|アドレスバーに組織名表示|×|×|〇                   |
|フィッシング詐欺対策|×|〇|◎                   |
|信頼性|☆|☆☆|☆☆☆                           |

- ドメイン認証型はドメインの使用権のみを確認するため、労力・コストが少ない。（その分、企業認証、EVよりも信頼性には劣る。）
- 実在性を認証が必要な企業認証型、EVは、第三者データベース（帝国データバンク等）による照合が必要となる。
この審査方法が不可の場合、意見書または報告書（士業の方に依頼して作成）が必要となる。
hostsファイル概要

■hostsファイルとは
DNSより先に参照される
IPアドレスとドメイン名の一覧のテキストファイル。

■利用方法
IPアドレスとドメイン名を対にして記載する。
Webサイトを新サーバで構築する時などに活用できる。

■記載例

```
192.168.10.10 homestead.test
192.168.33.10 centos7
192.168.100.232 host.docker.internal
192.168.100.232 gateway.docker.internal
```
■hostsファイルの場所
Windows

```
C:\Windows\System32\drivers\etc\hosts
```
Linux

```
/etc/hosts
```
Laravelのルーティング基本

#web.php
routes\web.php
ルーティングに関する情報の記載。

記入内容
・アドレス指定
・コントローラを指定
・コントローラのメソッドを指定

#コントローラ
Http\Controllers\コントローラ名

```php

php artisan make::controller コントローラ名
```

で作成する。
作成されたコントローラは、Http\Controllers\コントローラ名 に作成される。

useでrequrestやresponseやフォームリクエスト等のクラスをインポートし、メソッドの引数で読み込むことで利用可能にする。


```php
return view('テンプレートフォルダ名', 渡す値);
```

この第1引数に読み込むテンプレートフォルダ名を記入。helloフォルダのindexファイルの場合は、hello.indexと記入する。
第2引数の値は、配列。この値をテンプレートに渡す。

#Bladeテンプレート
resourdes\views\フォルダ名.blade.php

{{$変数名}}で、コントローラ等から渡された値を表示できる。
vue.jsでセレクトボタンを使ってCSSを変更する

# この記事で分かること
- セレクトボタンを使ってのイベント処理
- dataで指定した値を使う方法

こちらの記事ではセレクトボタンを押した時にイベント処理を行い、cssを変更する方法を紹介します。

完成物のイメージとしてはセレクトボタンで指定した色にテキストの文字色が変わるというものです。

検索してもピンポイントで記事がすぐにヒットしなかったので、備忘録を兼ねて作成しました。
処理の詳しい理由などについては他の記事を参考にして頂ければ幸いです。

## テンプレート
```ruby:html
<select v-model="select" v-on:change="colorchange">
  <option value="black">黒</option>
  <option value="green">緑</option>
  <option value="blue">青</option>
  <option value="red">赤</option>
</select>
```

今回使うディレクティブはv-modelとv-on:changeの2つです。

## vueインスタンス
```main.js
var app = new Vue({
  el: "#app1",
  data: {
    select: ""
  },
  methods: {
    colorchange: function () {
      switch (this.select) {
        case "red":
          app1.style.color = "red";
          break;

        case "green":
          app1.style.color = "green";
          break;

        case "black":
          app1.style.color = "black";
          break;

        case "blue":
          app1.style.color = "blue";
          break;
      }
    }
  }
})
```
##解説
処理の全体的な流れはまず、v-modelを使ってセレクトボタンで指定されたvalue属性をdata(オプションオブジェクト)に追加します。
それから、v-on:changeを使ってセレクトボタの選択に応じた処理を行うメソッドを作成していきます。

###v-model
```main.js
<select v-model="select">
```
v-modelで指定するプロパティ名はdataで指定するものと同じにします。
今回はselectとしました。

```main.js
var app = new Vue({
  el: "#app1",
  data: {
    select: ""
  }
```
このselectプロパティをdataにも記述します。


###v-on:change
```html
<select v-model="select" v-on:change="colorchange">
```
v-on:changeを使って、メソッド名を記述します。
今回はcolorchangeとしました。

```main.js
  methods: {
    colorchange: function () {
      switch (this.select) {
        case "red":
          app1.style.color = "red";
          break;

        case "green":
          app1.style.color = "green";
          break;

        case "black":
          app1.style.color = "black";
          break;

        case "blue":
          app1.style.color = "blue";
          break;
      }
    }
  }
```
methodsの方でもcolorchangeメソッドを記述していきます。
switch文の中身については割愛させていただきますが、ここで1つポイントがあります。

それは、switch文で使う条件式についてです。
セレクトボタンで指定されたvalue属性に応じて処理を分けていきたいのですが、value属性の値は先ほど、v-modelで指定したselectに代入されています。
なので、条件式にはthis.selectと記述することでdataに代入されたvalue属性に応じて処理を分けていくことができます。
つまり、thisを使うことによってdataのプロパティを使えます。




分かりにくい言い回しなどあったかと思いますが、最後までお読み頂きありがとうございました。
_cgo_export.c:3:10: fatal error: 'stdlib.h' file not found の 解決方法（Catalina版）

# 概要
go get したときに出たエラーです。macOSのバージョンによって解消方法が異なるようなので、Catalina 10.15での解決方法です。

# 結論
以下コマンドで、環境変数をセットして、該当コマンドを実行したところ、解消しました。

```
export SDKROOT="$(xcrun --sdk macosx --show-sdk-path)"
```

# 内容
DBから gorm structs を生成するツールを検証しようとローカルにインストールしようとしたところ発生しました。
go get -u github.com/smallnest/gen

```
# runtime/cgo
_cgo_export.c:3:10: fatal error: 'stdlib.h' file not found
```

# 調べたこと
全く同じエラーのQiitaがあったのですが、macOS 10.14 で、Catalina 10.15 では解消しませんでした。
https://qiita.com/gold-kou/items/739958f996825cf33b89

かなり昔から継続しているissueがあったので読み進めました。
途中の解決方法もOSのバージョンに依存していました。
最後まで読み進めて、Catalina 10.15での解決方法の記載がいくつかありました。
Cコンパイラの環境変数やllvmをアンインストールする方法の記載がありますが、影響範囲が読めなかったので、過去の解決方法でもSDKをopenすることで解消していることから、SDKのパスをCLIで釣って環境変数にセットする方法を採用しました。

```
export SDKROOT="$(xcrun --sdk macosx --show-sdk-path)"
```
https://github.com/golang/go/issues/27921

# 感想
めでたし、めでたし
【CSS】セレクタ

## 基本

| 探したい要素| CSSセレクタ|
|:-----------------|------------------:|:------------------:|
|全てのdiv要素|div|
|全てのdiv要素とp要素|div,p|
|全ての要素| * |
|class名がXの要素| .XXX |
|id名がXXXの要素| #XXX |

## 結合子

| 探したい要素| CSSセレクタ|
|:-----------------|------------------:|:------------------:|
|div要素の階層下のすべての要素|div *|
|div要素の1階層下の任意の要素|div > *|
|div要素の階直後の任意の要素|div + *|

## 属性

| 探したい要素| CSSセレクタ|
|:-----------------|------------------:|:------------------:|
|全てのtype属性を持つinput要素|input[type]|
|textというtype属性を持つinput要素|input[type="text"]|
|href属性がhttp://で始まるa要素|a[href^="http://"]|
|src属性が.jpgで終わるimg要素|img[src$=".jpg"]|
|xxxという単語を含むsrc属性を持つimg要素|img[src~="xxx"]|

## 疑似クラス

| 探したい要素| CSSセレクタ|
|:-----------------|------------------:|:------------------:|
|アクセスしていない全てのリンク|a:link|
|アクセスした全てのリンク   |a:visited|
|要素の子孫にxxxというテキストを含むdiv要素|div:contains("xxx")|
|hover属性を持ったa要素   |a:hover   |
【Java】Resource interpreted as Stylesheet but transferred with MIME type text/html

CSSが適用されなくてずっとハマっていた時の話。せっかくなのでここに書き留めておく。
ちなみに、Javaのコードに原因があった話なので関係ない方は参考にならないと思います。

#環境
OS: Windows10
サーバー: Apache Tomcat 9.0.26
Java: JDK13
HTML: HTML5
CSS: CSS3

#ブラウザで警告が出ていた
　CSSは正しくダウンロードされているのに、適用されていない。ブラウザの開発ツールを見ると、この警告が出ていた。

`Resource interpreted as Stylesheet but transferred with MIME type text/html`

＊Internet ExplorerやMicrosoft Edgeだと次のような警告になる。

`SEC7113: CSS は、MIME の種類が一致しないため、無視されました`

いくつかのブラウザで試しても同じだったので、サーバー側に問題があることは察しがついた。

#行きついた原因
　原因は、次のコードにあった。クラス名やメソッド名から分かる通り、フィルターである。

```EncodingFilter.java
import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;

public class EncodingFilter implements Filter{
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException{
        request.setCharacterEncoding("UTF-8");
        //↓ここが原因箇所！
        response.setContentType("text/html; charset=UTF-8");
        //↑ここが原因箇所！
        chain.doFilter(request, response);
    }
    
    public void init(FilterConfig filtercConfig){};
    public void destroy(){}
}
```

web.xmlでこのフィルターを通るように設定していて、CSSファイルに関して、どうもこれでContentTypeが「text/html; charset=UTF-8」になってしまっていたようだった。

ちなみに、web.xmlとCSSファイルの読み取りはそれぞれ以下のようなコード。

```web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="4.0" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd">
    <filter>
        <filter-name>EncodingFilter</filter-name>
        <filter-class>tool.EncodingFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>EncodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
</web-app>
```

```html
<link href="background.css" rel="stylesheet" type="text/css">
```

#解決方法
　EncodingFilter.javaで原因箇所の部分を次のように書き換える。
`response.setCharacterEncoding("UTF-8");`
これで無事直った。サーバーの設定に問題があるかと思ったよ…。

＊ブラウザでCtrl+F5を行わないと反映されないのでお忘れなく。キャッシュを消去して更新。

#余談
　EncodingFilter.javaは本に倣って書いていたものでした。こんな罠があるとは…。
【VSCode】VSNotesでマークダウン記法と画像貼付をして、万能ノート化する方法

# 導入から設定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555642/6391b352-dffc-469a-c282-444949ac9895.png)

拡張機能で上記をインストールする。

# 1.Pathの指定

保存するディレクトリを指定します。必須設定です。
Macの場合は、コマンドパレット（Ctrl + Shift + P）を開いて
VSNotes：Run setupをクリックします。

※コマンドパレットが開かないぞ？　と言う方は Command + Shift + P　を試して下さい。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555642/c64f6885-580d-20cb-8549-d51d2f848527.png)

VSNotes：Run setupをクリックすると右下に下記が表示されるので
Startをクリックしディレクトリを指定します。
予め、保存する為のディレクトリを作成した置いた方がいいかもしれません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555642/29e44b67-dce2-65c5-a0db-9c5d9a73fcba.png)

以降は、指定したディレクトリに情報が保存されます。

# 2.Markdownファイルの生成

コマンドパレットを開きVSNotes: Create a New Noteをクリックします。
Tagsとノートのタイトルの順に入力を求めらるので入力します。
後は、マークダウン記法で記載をしていきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555642/79a93ec3-880e-943e-0acd-7338e44e2346.png)

プレビューを表示した場合は、コマンドパレットで
Markdownと打ち込めばプレビューを横に表示出来る項目が出てきます。
クリックすると右側にプレビューが表示されます。

左上に表示されているVS Notesの右側に更新ボタンがあるので、
クリックすると記事がFilesに表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555642/6fd198be-216f-4cf0-9a3e-7984abffc3d0.png)



# 3.Paste Images　導入

文章だけじゃなくて、画像も貼り付けたいとご要望の方は、
拡張機能Paste Imagesを導入して下さい。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555642/a40be320-85f8-2307-8049-7ef51c13bdbb.png)

拡張機能で上記をインストールする。

# 4.Paste Images　基本操作

1.画像をクリップボードに入れる　→　Command + Shift + Ctrl+ 4　範囲指定は任意
2.Option + Command + V　で任意の場所に貼り付けます。
※画像は同じ階層のディレクトリに保存されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555642/f2934d4e-e419-4bf1-d8cd-4f893898bed0.png)

## Command + C は？　
Command + Cではクリップボードに画像が入りません。
上記画面右下表示されている文章の通りクリップボードに画像がないよと言われます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555642/18c5ac55-c28f-50e5-8a84-c23a2fdb4977.png)


以上で、導入と基本操作については説明を終了します。
この他にも様々な設定をする事が出来るので、興味のある方は下記の記事をご参考下さい。

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

VSNotesの設定関係
https://qiita.com/bele_m/items/6115602d361a7c6cbb2c

VSNotesの紹介
https://www.karelie.net/vscode-notes/

Paste Image導入と設定
https://kinacon.hatenablog.com/entry/2019/01/30/Visual_Studio_code_Markdown%E3%81%AB%E7%94%BB%E5%83%8F%E3%82%92%E8%B2%BC%E3%82%8A%E4%BB%98%E3%81%91%E3%82%8B

スクリーンショットを直接クリップボードに保存する方法
https://qiita.com/ThreeTreesLight/items/3b09be6bcc7058ede8ef
ITパスポート復習

### マネジメント系

**サービスマネジメント**
ITIL(アイティル)：ベストプラクティクス(最良の事例)が書かれた本
SLM：サービスレベル管理、「サービスレベル」を維持・改善する活動
**PDCA**：ほぼ100%出る問題
Plan(計画)、Do(実行)、Check(評価)、Act(改善)を繰り返し、継続的に改善してく。
SLA：サービスレベルの合意書、サービスの範囲と品質を明確にする
可用性：利用したいときに利用できること
インデント管理：迅速に復旧させる為の作業　　　　　　風邪で例えると：発熱や咳など症状
問題管理：根本原因を究明し、再発を防止する活動　　　風邪で例えると：ウイルスや菌
サービスデスク：問題管理よりインデント管理が優先
BCM：災害が起きても事業を継続させる為の経営手法
BCP：事業をいかに継続するかをまとめた計画
UPS(無停電電源装置)：一時的に電力供給
システム監査：リスクのコントロールが正しく行われているかを評価
監査人：改善活動は行わない
ITガバナンス：ITを活用して、仕組みを会社に組み込む
職務分掌：担当者の役割や仕事の権限を明確にする
【システム設計】バッチ処理

##処理定義
- 入力
DB、CSV、画像、ログファイル、Webサービス

- 加工
抽出、削除、加工、集計、マージ

- 出力
DB、CSV、メッセージ、Webサービス

##起動タイミング
- トリガー起動
データの閾値、APIリクエスト

- 定時起動
月次、週次、日次

##処理方法
- 処理件数
バッチ処理が1回起動するごとに対象となる処理件数。

- 処理時間
いつ起動するか。
いつまでに終えなければならないか。
どのくらい処理時間がかかるか。

- 回復可能か、リラン設計
処理が完了した次のデータから処理が再開できる
再度同じ処理が開始されるが、結果が冪等になる(二重に処理されない)
失敗したIDを控えることができ、再実行できるコマンドオプションを用意する

- 多重起動可能か
多重起動により処理するデータを破壊しかねない場合は、実行をロックできる機構を設ける。

- バッチの突き抜け対策
並列実行
インフラの増強・チューニング
処理の分割

- 例外処理
アラート通知方針
バッチがエラーとなったときの影響
リカバリ対応方針
後続バッチへの影響

##ログ
・バッチ処理時刻
・処理内容、処理件数

##注意点
・オンライン処理との兼ね合い
githubからdiscordに通知をする方法

最近リモートワークでのコミュニケーション手段がslackからdiscordに移行するコミュニティや会社が僕のまわりでちらほらでてきたので、githubのActivityをDiscordに通知する方法をまとめておきます。(まとめるほどでもないぐらい簡単でしたが)

# github actionを作る

以下のファイルを githubのリポジトリに作成します。githubは無料プランでもgithub actionsが使えるようになったのと、DiscordのNotification用のActionがすでに公開されていたので、こちらを利用します。

以下の設定は、PRまたはmasterへコードがpushされた時にDiscordの特定のチャンネルに通知が飛ぶような設定です。

```yaml:.github/workflows/discord.yml

name: Discord Message Notify

on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - name: Discord Message Notify
      uses: appleboy/discord-action@0.0.3
      with:
        webhook_id: ${{ secrets.WEBHOOK_ID }}
        webhook_token: ${{ secrets.WEBHOOK_TOKEN }}
        color: "#48f442"
        username: "GitHub Bot"
        args: The ${{ github.event_name }} event triggered.


```

# Discord で webhook URLを発行する

DiscordのServer Settingsから、Webhook URLの発行ができます。

![Discord Server Settings](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1082/c4f84cd4-b21b-970a-ceee-8c8c0e9e583e.png)

発行された Webhook URLは以下のようにIDとTOKENから構成されているので、それぞれ抜き出して、Github repositoryのSettingsのSecretsから設定します。

`https://discordapp.com/api/webhooks/{WEBHOOK_ID}/{WEBHOOK_TOKEN}`
<img width="1045" alt="Screen Shot 2020-04-30 at 21.15.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1082/6daf1d43-7539-7618-2bc4-a38a51df145e.png">

# 検証する

実際にコードをGithub repositoryのmaster branchにpushしてみて通知が飛ぶかどうかを確認します。
成功すれば以下のようなメッセージがDiscordのchannelに投稿されるはずです。

![Group 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1082/fcb5f366-650f-318e-be5a-92f2ac6fb3d4.png)

以上です！
PythonでJSONファイルの読み書き


Pythonのjsonモジュールを使用するとJSON形式のファイルや文字列を辞書（dict）などのオブジェクトとして受け取ることができる。



#1.JSON文字列を辞書に変換
json.loads()関数を使用する。

```python

s = r'{"C": "\u3042", "A": {"i": 1, "j": 2}, "B": [{"X": 1, "Y": 10}, {"X": 2, "Y": 20}]}'

print(s)
# {"C": "\u3042", "A": {"i": 1, "j": 2}, "B": [{"X": 1, "Y": 10}, {"X": 2, "Y": 20}]}

d = json.loads(s)

print(d)
# {'A': {'i': 1, 'j': 2}, 'B': [{'X': 1, 'Y': 10}, {'X': 2, 'Y': 20}], 'C': 'あ'}

print(type(d))
# <class 'dict'>
```


#2.JSONファイルを辞書として読み込み
json.load()関数を使用する。

```python
with open('/test.json') as f:
    print(f.read())
# {"C": "\u3042", "A": {"i": 1, "j": 2}, "B": [{"X": 1, "Y": 10}, {"X": 2, "Y": 20}]}
```

#3.辞書をJSON文字列にして出力
json.dumps()関数を使用する。

```python
d = {'A': {'i': 1, 'j': 2}, 
     'B': [{'X': 1, 'Y': 10}, 
           {'X': 2, 'Y': 20}], 
     'C': 'あ'}

sd = json.dumps(d)

print(sd)
# {"A": {"i": 1, "j": 2}, "B": [{"X": 1, "Y": 10}, {"X": 2, "Y": 20}], "C": "\u3042"}

print(type(sd))
# <class 'str'>
```


#4.辞書をJSONファイルとして保存
json.dump()関数を使用。

```python

d = {'A': {'i': 1, 'j': 2}, 
     'B': [{'X': 1, 'Y': 10}, 
           {'X': 2, 'Y': 20}], 
     'C': 'あ'}


with open('/test.json', 'w') as f:
    json.dump(d, f, indent=4)
```
【業務系】障害対応の流れ

##対応の流れ
- 緊急度を確認する。（状況によって恒久対応よりも、まずは暫定対応を優先するため。）
→緊急度が高い場合、暫定対応を実施する。（回避できる場合、回避方法を伝える。）

- 再現確認・発生手順の明確化
→どういう条件、環境のもとで不具合が発生したのか、
報告者からヒアリングして、
出来るだけその環境に近づけて確認。
再現時のログを取得する。

- 問題の切り分け
フロントなのかサーバーサイドなのかDBか？
どのモジュールか？

- 原因調査
どういう理由で不具合が発生するのか？

- 対策検討
影響範囲確認、プログラム対応要否の判断、リカバリ要否の判断、工数見積もりを行う。

- 実装、コミット、デプロイ
必要な場合に実施。

- データリカバリ
必要な場合に実施。

- 作業報告
結果を文書化して報告する。
情報漏洩記事の調査

#はじめに
2019年にあった情報漏洩記事を独自に集め、分類した。
そこからどのような攻撃方法でインシデントが起きでいるか考察する。

#調査結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/570011/b5834fe6-47e4-3fd1-c82d-ff93d990e725.png)


#考察
集計した情報漏洩の中で1番多かったのは外部からの不正アクセスでの情報漏洩で、122件（68%）。内部犯による個人情報漏洩が2件（1%）。それ以外は内的要因で55件（31%）の情報漏洩が発生している。内的要因についてはユーザーによるメールの誤送信というものが圧倒的に多かった。これに関しては情報セキュリティ教育を徹底したり、Eメール等で個人情報を伴うデータのやり取りを行う際はダブルチェックをするようルールを決め、セキュリティ事故を減らす必要がある。内部犯による個人情報漏洩については、情報を外に持ち出しをできてない様に徹底するほか、背後や隣などからのぞき見をする「ショルダーハック」にも注意したい。
<img width="993" alt="PCのぞき見.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/570011/39e9e505-4ab1-5cda-072c-d8e4d57709aa.png">

**■どの対象が狙われているのか**
不正アクセスを受けた対象を集計すると、Webサイトでの被害が特に多く、中でもECサイトへの被害が多かった。ECサイト自体は個人でも簡単に構築することもでき、サイト数も無数にある。サイト利用者は決済時にクレジットカードが使用できることから、クレジットカード情報を奪取され、中には不正利用されていたケースもある。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/570011/3097494b-0289-c049-7cf5-0dc97ac0ac7c.png)


ECサイトでの情報漏洩のうち13件（33%）はペイメントモジュールの改ざんがされていることが分かった。ペイメントモジュールはバージョンによっては脆弱性があるので使用する際には注意が必要。現状は最新パッチもでているので、利用している場合は最新化しておくことが必要。今一度、利用しているペイメントモジュールの脆弱性等を確認しておいた方が良い。

**■攻撃されにくい環境作りの必要性**
システムの脆弱性を利用され被害にあった事例は179件中31件（17%）あった。
使用している環境にも脆弱性が潜んでいる可能性は十分あるので、上記でも述べた最新パッチの確認や、定期的に脆弱性診断を受けることをお勧めする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/570011/9d593a6c-2d4d-da98-1ec0-f70bb359c0e8.png)

**■マルウェア対策の必要性**
個人で使用しているPCにマルウェアを仕掛けられている事例は179件中17件（9%）あった。手口としては普段メールでやり取りしている相手を装ってファイルを添付して開いたら感染するという手口だ。セキュリティ教育を行っているにもかかわらず、攻撃方法が巧妙化していることで被害が多発している。被害を最小限に止めるために、PCにはアンチウィルスのエンドポイント向けセキュリティソフトを入れマルウェアを検知時にはすぐにネット環境から端末を切り離せるよう感染することを前提にした利用者の教育を行い最小限の被害に抑えるという考え方が必要。併せてコロナ禍の影響でテレワークが増加していることもあり「使用者個人」のセキュリティ意識向上も求められる。IPAなどでも教育動画を配信しているし、セキュリティ対策企業に頼るのも手である。

#おわりに
外部からの不正アクセスが増加している昨今、環境に応じてセキュリティは常に強化していく必要がある。エンドポイント端末の導入や、FWによる入口出口対策、WAFによるWEBサイトに特化したセキュリティ対策など複数の対策を実施することで自身が被害者となることを防がなければならない。
【サクラエディタ】文字列を一括で複数置換する

```javascript:plus1.js
//☆使い方☆
//①エクセルの1行目に置換前、2行目に置換後を記入。
//②対象データ範囲をコピーし、クリップボードに登録。
//③処理対象文字列を選択し、マクロ実行。
var listConv = function (inStr, inClip){
  var convList = inClip.split('\r\n');
  for(var i in convList){
    var convRecord = convList[i].split('\t');
    var oldStr = convRecord[0];
    var newStr = convRecord[1];
    if(typeof oldStr === 'string' 
      && typeof newStr === 'string'){
      inStr = inStr.replace(new RegExp(oldStr,'g'), newStr);
    }
  }
  return inStr;
}
//(INPUT)選択範囲を取得
var str = Editor.GetSelectedString(0);
//(INPUT)クリップボードを取得
var clip = Editor.GetClipboard(0);
//(PROCESS)クリップボードの文字列を利用して、順次置換
str = listConv(str, clip);
//(OUT)編集したテキストを設定
Editor.InsText(str);
```

# 使用例
置換データをエクセルからコピーし、クリップボードに登録。
![置換データ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488082/5081eba8-6f34-da25-5195-11c36ef672d7.png)



サクラエディタの処理対象行(2～5行)を選択して、当マクロを実行する。

### 実行前

```
TEST1
TEST1TEST2TEST3
TEST44TEST55TEST66
TEST777TEST888TEST999
TEST10
TEST1
```

### 実行後

```
TEST1
TEST①TEST②TEST③
TEST④④TEST⑤⑤TEST⑥⑥
TEST⑦⑦⑦TEST⑧⑧⑧TEST⑨⑨⑨
TEST⑩
TEST1
```
Vue の v-for で bind しなさいと Lint に怒られるのだが何がいけないのか... (Elements in iteration expect to have 'v-bind:key' directives) ( #Vue )

Lintのエラーで 怒られるが、よく後ろを見ると、表示自体はちゃんと出来ているのが分かる

![image](https://user-images.githubusercontent.com/13635059/80587331-4ef6c280-8a51-11ea-94f7-df6ce0b28e40.png)

# data

dataがこういう時

```vue
  data () {
    return {
      posts: [
        { id: 1, title: 'My journey with Vue' },
        { id: 2, title: 'Blogging with Vue' },
        { id: 3, title: 'Why Vue is so fun' }
      ]
    }
```

# NG

```vue
<li v-for="post in posts">
  {{ post.title }}
</li>
```

# OK

```vue
<li v-for="post in posts" :key="post.id">
  {{ post.title }}
</li>
```

# OK ...?

bindの値は 特に v-for の中で表示に使われるわけではないらしい
存在しないキーを指定しても動作して、lintでは怒られなくなった ( null 的な扱いになっているかも )

```vue
<li v-for="post in posts" :key="post.xxx">
  {{ post.title }}
</li>
```

# 何故か

表示だけの場合はまず bind 指定なしでも問題ないが、削除したりする時に、要素を一意に特定するためのもの、とかだろうか

[【徹底解説】これを見ればわかるvue.jsのv-forのkeyの動作 | アールエフェクト](https://reffect.co.jp/vue/v-bind-key-understand-by-developer-tool#v-bindkey)

# Code

```vue
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <ul>
      <li v-for="post in posts">
        {{ post.id }} {{ post.title }}
      </li>
    </ul>
  </div>
</template>

<script>

export default {
  name: 'App',
  data () {
    return {
      posts: [
        { id: 1, title: 'My journey with Vue' },
        { id: 2, title: 'Blogging with Vue' },
        { id: 3, title: 'Why Vue is so fun' }
      ]
    }
  }
}
</script>

```

# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/3101











<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
#Vue 初心者 - data の配列の値を表示する、v-for で展開する

# NOTE

 要素の順番を直接指定して値を利用できる

例: `{{ posts[0].id }}` (配列の1番目の要素)

v-for であればすべての要素を展開できる

https://vuejs.org/v2/guide/list.html

v-for の ` :key="post.id"` は特にこの例では必要ないと思うが、書かないと Lint に怒られるので書いている

# Code

```vue
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <h1>{{ posts[0].id }} {{ posts[0].title }}</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">
        {{ post.title }}
      </li>
    </ul>
  </div>
</template>

<script>

export default {
  name: 'App',
  data () {
    return {
      posts: [
        { id: 1, title: 'My journey with Vue' },
        { id: 2, title: 'Blogging with Vue' },
        { id: 3, title: 'Why Vue is so fun' }
      ]
    }
  }
}
</script>


```

# View

![image](https://user-images.githubusercontent.com/13635059/80587959-6da98900-8a52-11ea-8c1d-77ffe43eb01f.png)


# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/3102











<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->