OmniAICreator/Qiita-1.07M huggingface dataset:
HTML備忘録1

#HTML
###HTMLファイルの型

\<!DOCTYPE html>はhtmlのバージョン(HTML5)を宣言している。
\<head>要素はページに関する情報。Webページの設定を記述する。
\<body>要素は実際に表示したい内容を記述する。

注意)
**headを記述し終えてから、bodyを記述すること**
**relはファイルとの関係性を示す。rel="stylesheet"ならcssファイルとの関係性。**
**hrefにページのurlを記述する**

```
<!DOCTYPE html>
<html>
    <head>
       <meta charset="utf-8">
       <title>Title</title>
       <link rel = "stylesheet" href="stylesheet.css">
    </head>
    <body>
    </body>
</html>
```

###ブロック要素とインライン要素
ブロック要素 : 前後で改行が入り、親要素の幅いっぱいに広がる要素。
インライン要素 : インライン要素の前後で改行が入らない。インライン要素はCSSのプロパティでwidthやheightを調整できない。ただし、marginは左右方向のみ調整できる。

ブロック要素の例) \<div> \<h1> \<p>
インライン要素の例) \<span> \<a>

***
###タグ(HTML)

```
<h1> </h1> 
```  
h1(見出し)。h1~h6まで存在。
ブロック要素。

```
<a> </a>

#リンク先が存在しない時はhref="#"を指定
<a href="#"> </a>

<a href="url"> </a>

#クリックしたいときに別の新しいタグでページを開きたいときは以下の属性を追加。
<a href="url" target="_blank"> </a> 
```
a(リンク)という意味付けをもつ。リンクの飛び先を設定するにはhref属性が必要。
インライン要素。

```
<p> </p>
```
p(aragraph)タグで段落に分ける。自動的に改行される。
ブロック要素。

```
<span> </span>

#例
この部分が<span class="change_red">赤色</span>に見える。
```
spanは文の一部をインライン要素にする。つまり文中の一部にCSSを適用したいときに使用する。

```
<img src ="url">

#オプションこと「属性」を追加できる。widthやheightで横幅や縦幅を調整する。altは説明。
<img src="url" width="100" height="100" alt="このイメージの説明">
```
imgは画像を表示させるタグ。src属性のurl部分に画像リンクを載せる。

```
<li>
    <ul>a</ul>
    <ul>b</ul>
    <ul>c</ul>
</li>

<li>
    <ol>金賞</ol>
    <ol>銀賞</ol>
    <ol>銅賞</ol>
</li>
```
liはリストをつくる。ulは黒点が先頭につく。olは数字が連続でつく。

```
<div>
</div>

<section>
</section>

<article>
</article>
```
レイアウトタグ。
以下はclassをつけた例。複数のclassをつけるにはスペースで区切る。

```
<div class="example1 example2">
 サンプルテキスト
</div>
```

```
<form>
    <p>コメント</p>
    <input>

    <p>コメント(複数行)</p>
    <textarea></textarea>
</form>
```
input要素は1行のテキスト入力を受け取る。\<input>だけで良い。
textarea要素は複数行のテキスト入力を受け取る。

☆送信ボタンの作成。

```
<form>
  <input type="submit">
  <p></p>
  <input type="submit" value="保存">
</form>
```
type属性をsubmitにすると送信ボタンが作成される。
value属性でテキストを変更できる。




#参考文献
サルワカ 
https://saruwakakun.com/html-css/basic/link-rel
TAG index
https://www.tagindex.com/html_tag/form/input_submit.html
Progate
https://prog-8.com/languages/html
ドットインストール
https://dotinstall.com/lessons/basic_html_v5
https://dotinstall.com/lessons/basic_css_v5
AtCoder Beginner Contest 161 参戦記

# AtCoder Beginner Contest 161 参戦記

## [ABC161A - ABC Swap](https://atcoder.jp/contests/abc161/tasks/abc161_a)

3分で突破. 書くだけ. オンラインのコードテストが詰まってて時間がかかってしまった.

```python
X, Y, Z = map(int, input().split())

X, Y = Y, X
X, Z = Z, X
print(X, Y, Z)
```

## [ABC161B - Popular Vote](https://atcoder.jp/contests/abc161/tasks/abc161_b)

4分で突破. 閾値が総投票数の 4 * M 分の一なのでまずそれを求め、その閾値を超える票数の商品がM個以上あるかを調べる. オンラインのコードテストが詰まってて時間がかかってしまった.

```python
N, M = map(int, input().split())
A = list(map(int, input().split()))

threshold = sum(A) / (4 * M)
if len([a for a in A if a >= threshold]) >= M:
    print('Yes')
else:
    print('No')
```

## [ABC161C - Replacing Integer](https://atcoder.jp/contests/abc161/tasks/abc161_c)

6分で突破. N が K を超えていれば、まず剰余を取る. N が K 未満になった後は、適当に回せば収束するだろうと、適当に1000回して放り込んだら AC が出たので結果オーライ. 後で真面目に考え直す.

```python
N, K = map(int, input().split())

result = N
if N > K:
    result = min(result, N % K)
for i in range(1000):
    result = min(result, abs(result - K))
print(result)
```

追記: N % K を x とする. x < K なので、x と K の差の絶対値は K - x となる. ところで K と K - x の差の絶対値は x である. よって、x と K - x の小さい方が答えとなる.

```python
N, K = map(int, input().split())

x = N % K
print(min(x, K - x))
```

## [ABC161D - Lunlun Number](https://atcoder.jp/contests/abc161/tasks/abc161_d)

49分で突破. 当然数字を1づつ増やしながらのループでは TLE 必須なのでスキップを考える. ルンルン数は 12 の次が 21 となる. 13は3に問題があるが、3の桁ではなく、1の桁が2になるまでルンルン数は発生しない. 問題が発生した場合は上の桁を一つ進めて、それより下の桁を0にフラッシュしてみる. それだけだと、13→20→30となってしまうので、問題のある桁の値がその一つ前の桁より小さい場合には、問題のある桁の値を一つ進めることにした. これで 13→21 と進むようになり AC. コードは is_lunlun が真偽値ではなく数値を返すやっつけなので後で直す.

```python
K = int(input())


def is_lunlun(i):
    result = -1
    n = [ord(c) - 48 for c in str(i)]
    for j in range(len(n) - 1):
        if abs(n[j] - n[j + 1]) <= 1:
            continue
        if n[j] < n[j + 1]:
            for k in range(j + 1, len(n)):
                n[k] = 0
            result = int(''.join(str(k) for k in n))
            result += 10 ** (len(n) - (j + 1))
        else:
            result = int(''.join(str(k) for k in n))
            result += 10 ** (len(n) - (j + 2))
        break
    return result


i = 1
while True:
    # print(i)
    t = is_lunlun(i)
    if t == -1:
        K -= 1
        if K == 0:
            print(i)
            exit()
        i += 1
    else:
        i = t
```

## [ABC161E - Yutori](https://atcoder.jp/contests/abc161/tasks/abc161_e)

順位表を見るに F のほうが明らかに簡単そうなのでパスした.

## [ABC161F - Division or Substraction](https://atcoder.jp/contests/abc161/tasks/abc161_f)

突破できず.

追記: 30分くらい追加して解けた. トータル1時間くらい? N≤10<sup>12</sup> なので素直にループを回すと TLE 必至. N が1になるとき、N = K<sup>a</sup> * (b * K + 1) (a,b≥0) となる. K * K > N の領域では、K = N, N - 1 を除けば N = a * K + 1 (a≥2) のパターンしか無い. 候補は、2以上 sqrt(N) 以下の K と、N - 1 が K で割り切れる時の (N - 1) / K. 候補をすべてチェックするのはたかだか 2 * 10<sup>6</sup> なので間に合う.

```python
N = int(input())

if N == 2:
    # K = 2
    print(1)
    exit()

result = 2  # K = N - 1, N
for K in range(2, int(N ** 0.5 + 1)):
    t = N
    while t >= K and t % K == 0:
        t //= K
    if t % K == 1:
        result += 1

    if (N-1) % K == 0 and (N-1) // K > K:
        result += 1
print(result)
```
MySQLエラー

https://gyazo.com/f195fd0a8fbb6c3d52e4fb46746af2f8
priceのカラムがない
追加して解決

ローカル環境
作業中のディレクトリ
カラム追加
rails g migration Addカラム名To追加元テーブル名 追加するカラム名：型
rails g migration AddNicknameToUsers nickname:string
rails db:migrate

カラム削除
例：rails g migration Removeカラム名From削除元テーブル名 削除するカラム名：型
rails g migration RemoveNameFromTweets name:string
rails db:migrate

本番環境
作業中のディレクトリ
mysql -u root　　　　　　　　　　　　　　　　　　　　　 　　起動
SHOW DATABASES;　　　　　　　　　　　　　　　　　　　　 データベース参照
USE データベース名;　　　　　　　　　　　　　　　　　　　 　データベースに移動
SHOW TABLES;　　　　　　　　　　　　　　　　　　　　　　テーブル参照
ALTER TABLE テーブル名 ADD カラム名 カラムの型;　     　　　　カラム追加
ALTER TABLE テーブル名 DROP カラム名;　             　　　　　　　　　カラム削除
bundle install --deploymentでAWS Lambda向けデプロイパッケージを作っていて嵌った罠


# 背景

AWS lambdaにRubyスクリプトを配置するデプロイパッケージを作るとき、Rubyスクリプトが依存するgemファイルをzipファイルに含めるため、`bundle install --deployment`のように、`--deployment`オプションを指定していました。

`--deployment`オプションを指定するとgemは`vendor/bundle`ディレクトリにインストールされます。
次のコマンドで、`vendor`ディレクトリをデプロイパッケージに含めます。

```sh
zip deploy_package lambda_function.rb -FSr vendor
```



`--deployment`オプションを使っているのは、AWSのデプロイスクリプトのサンプルに`bundle install --deployment`が使われていた時があり、その名残です。現在では`bundle install --path vendor/bundle`が使われています。
https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/ruby-package.html

`bundle install --path vendor/bundle` を使っていれば、この先を読む必要はありません。

# 物語

PCにインストールしているbundlerのバージョンを2.1.4に上げました。

bundler 2.1.4では`--deployment`オプションは非推奨になりました。
代わりに`bundle config deployment true`コマンドで設定を変更します。
https://github.com/rubygems/bundler/pull/7519

CI環境で使うデプロイスクリプトも`bundle config deployment true`に修正しました。デプロイが失敗するようになりました。
gemが`vender/bundle`ディレクトリにインストールされなくなったようです。

# 原因

CI環境ではRuby 2.7を使っています。
Ruby 2.7に同梱されているbundlerのバージョンは2.1.2でした。

bundler 2.1.2 では `bundle config deployment true` を設定しても、gemのインストール先が変わりません。

# 対策

`bundle config set path 'vendor/bundle'` を設定して、gemのインストール先を` vender/bundle`にしました。

これでbundler 2.1.2でも2.1.4でもgemは`vendor/bundle`ディレクトリにインストールされます。


# その後
CI環境でbundler 2.1.4を使うようになり、１ヶ月半くらいで`bundle config deployment true`に戻しました。

`--path`オプションも非推奨なので、`bundle install --path vendor/bundle`にはしませんでした。
MVCとは

##MVC
Model(モデル)
View(ビュー)
Controller(コントローラー)
の頭文字です。
役割としては
Model(モデル)
ビジネスロジック（データ処理）を行う
View(ビュー)
表示処理を行う
Controller(コントローラー)
リクエストに応じて適切な処理を呼び出す
##MVCの流れ
ルーティング=>コントローラー
リクエストに対応したルーティングが読まれ、それに対応したコントローラーのアクションが動きます。
コントローラー=>モデル
コントローラーで呼び出したアクションをモデルを通してデータベースから必要なデータを呼び出します。
コントローラー=>ビュー
呼び出したデータをビューに受け渡し、受け取ったデータをWebページに表示させます。
Reactぴえんチャレンジ

# Reactぴえんチャレンジって何？
[nikoさんの記事](https://qiita.com/ksuzu/items/a9175f3a9aa4ff7c2020)に触発されたものです。
2019年12月からUdemyでReactの学習を開始したのですが、練習に丁度よいチャレンジだと思いやってみました。

# チャレンジ結果
画像をクリックしてください。
[![pien.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/345563/a4462f8c-31cd-5c02-4c29-053b7094a52c.gif)](https://pien-moji-by-pitang1965.netlify.com/)

# チャレンジのポイント
1. スライダーを実装するため、初めて[Material UI](https://material-ui.com/)というものを使ってみました。
2. ReactのHooksを学習したので、クラスコンポーネントを使わず、propsでバケツリレーしないパラメータの引き渡し方法を採用してみました。
3. CSSの設定。
4. 少し前に、webpackで悩みに悩んでしまったので今回は [create-react-app](https://github.com/facebook/create-react-app) を使ってみました。
5. [Netlify](https://pien-moji-by-pitang1965.netlify.com/)にデプロイしてみました。
6. GitHubで初めてブランチを使ってみました。

# ソースコード
[GitHub](https://github.com/pitang1965/pien-moji)
練習のために作ったものではありますが、ここをこうしたほうが良いとかありましたら、ぜひご指導ください。

# 謝辞
* [ふうさん](https://twitter.com/fuu_tech)や[弱々エンジニア会](https://qiita.com/organizations/yowayowa-engineer)の強々エンジニアの方に教えていただきました。
* 妻にファビコンを作って貰いました。

# その他
これを作るのに1週間くらいうんうんうなっていたら、小学生の娘が半日で[こんなもの](https://scratch.mit.edu/projects/378243799)を作ったと自慢してくれました。
私はその後も更に2週間くらいうなっていました。ちょっとピエンですね。
【JavaScript】タブメニューの実装

##はじめに
シンプルなタブの実装を速やかに終わらせるための備忘録。
CSSは最低限のデザインだけです。クラス名も好きに変えちゃってください。
#ソースコード
```index.html
    <!-- タブメニュー -->
    <ul>
      <li class="tab active">Portfolio</li>
      <li class="tab">Jobs</li>
      <li class="tab">Design</li>
      <li class="tab">Event</li>
    </ul>
    <!-- タブコンテンツ -->
    <div class="panel show">Portofolioです</div>
    <div class="panel">Jobsです</div>
    <div class="panel">Designです</div>
    <div class="panel">Eventです</div>

```

```style.css
/* 子要素の.tabをfloatで左に浮かせたので親要素の高さを確保する */
ul:after{
  content: '';
  display: block;
  clear: both;
}
/* タブメニューのデザイン */
.tab{    
  padding: 5px 7px;
  text-align:center;
  display:block;
  float:left;
}
/*　選択中のタブの色を変える */
.tab.active{
  background: #000;
  border-radius: 3px;
  color:#FFF;
  transition: all 0.5s ease-out;
}
/* .showがついていない.panelは全て非表示 */
.panel {
  display: none;
}
/* .showがついた.panelを表示する */
.panel.show {
  display: block;
}
```

```main.js
  // worksページタブ機能
  const tabs = document.getElementsByClassName('tab');

  for(let i = 0; i < tabs.length; i++) {
    tabs[i].addEventListener('click', tabSwitch);
  }
  // タブをクリックすると実行する関数
  function tabSwitch(){
    // .tabを名付けた要素のクラスを付け替える処理
    document.getElementsByClassName('active')[0].classList.remove('active');
    this.classList.add('active');

    // コンテンツのclassの値を変更
    document.getElementsByClassName('show')[0].classList.remove('show');
    const arrayTabs = Array.prototype.slice.call(tabs);
    const index = arrayTabs.indexOf(this);
    document.getElementsByClassName('panel')[index].classList.add('show');
  };
```

#解説


##getElementsByClassName('active')[0]
getElementsByClassName()
・対象となるクラス名が設定されているHTML要素をすべて取得できる
###なぜ[0]をつけるのか？
>与えられたクラス名で得られる子要素すべての配列ライクのオブジェクトを返します。documentオブジェクトで呼び出されたときは、ルートノードを含む、完全な文書が検索されます。
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName

よって配列を個別で取得する必要がある。この場合は、.activeがついている要素の1番目を取得している。（上のソースコードであれば、.activeは１つしかないので[0]となる）

```js
console.log(getElementsByClassName('active'));
//HTMLCollection []
// length: 1
// 0: li.tab.active <= ここから.activeの要素を取得する
// __proto__: HTMLCollection
```

##classList

・対象要素に設定しているクラスを配列のように扱えるオブジェクト
・読み取り専用のプロパティ
・**Element.classList.メソッド**でよく使われる。

| メソッド名 |機能 |
|:-----------|:------------|
| add()       | クラスを追加      |
| remove()    | クラスを削除|
| toggle()     |クラスがあれば削除・無ければ追加 |
| contain()         |クラス名の有無を true / false で返す|
| replace( oldClass, newClass )       | oldClassをnewClassで置き換え|

##Array.prototype.slice.call(tabs)
・**tabs**はHMTLCollectionという配列風オブジェクトなので、配列に変換する。
##arrayTabs.indexOf(this)
・String オブジェクトの中からfromIndexで１番最初に現れた値のインデックスを返す。
・値が見つからない場合は-1を返す。 
・document.getElementsByClassName('tab')で取得したHTMLCollectionをArray.prototype.slice.call()で配列に変換したので、indexOf()でインデックスを取得し、.showをつける.panelを判別する。

#おわりに
間違いありましたらご指摘お願いします！
[Rails]本番環境でSeed-fuを使う

#本記事投稿のいきさつ
railsでアプリを作成している中で、Seed_fu Gem を使用しました。
その際、開発環境では上手くテーブルにデータを格納することができたのですが、本番環境で苦戦したため備忘録として書きます。
ここでは、自分が苦戦したEC2内でのコマンドのみを書きます。

## エラー（異なるディレクトリでコマンドを入力していたため）
自分が作成したアプリのディレクトリへ移動しコマンドを入力したところ


````
Mysql2::Error::ConnectionError: Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)
````

と、mysplに接続ができないというエラーが発生。
これはコマンドを入力するディレクトリが誤っていたため発生したエラーでした。
実は開発環境とは異なり、本番環境ではcurrentディレクトリ内のデータが本番環境で動いているフォルダ群になります。
そのためcurrentディレクトリへ移動した後、再度コマンドを入力します。

````
 cd current
 rails db:seed_fu
```
これで大丈夫かと思われましたが、またしてもエラーが。

##エラー(コマンド誤り)

````
Could not load the 'listen' gem. Add `gem 'listen'` to the development group of your Gemfile
````
listen gem がないとのこと。
まさかと思いgemfileを確認したところちゃんと書かれていました。
調べたところ、seedでデータを投入する際は環境の指定をする必要があるようです。ということで以下を再度実行。

````
rails db:seed_fu RAILS_ENV=production
````

今度は成功しました。初めての経験で苦戦しましたが、とても勉強になりました。
ちなみに、test環境でも同じように以下を実行すれば大丈夫です。

````
rails db:seed_fu RAILS_ENV=test
````

#おわり
最後まで見ていただきありがとうございました。
Fedora core os のfccファイルにbondingの設定を書く

# fcc yamlコード
[Fedora core os](https://getfedora.org/en/coreos/)用の設定ファイルにbondingの設定を書き、固定IPにするメモです。
ここでは、モードは`balance-xor`にしていますが、ほかの設定については[こちら](https://access.redhat.com/documentation/ja-jp/red_hat_enterprise_linux/7/html/networking_guide/overview-of-bonding-modes-and-the-required-settings-on-the-switch)を参照のこと。


```yml
variant: fcos
version: 1.0.0
storage:
  files:
    - path: /etc/NetworkManager/system-connections/bond-slave-eth0.nmconnection
      mode: 0600
      overwrite: true
      contents:
        inline: |
          [connection]
          id=bond-slave-eth0
          type=ethernet
          interface-name=eth0
          master=bond0
          slave-type=bond

    - path: /etc/NetworkManager/system-connections/bond-slave-eth1.nmconnection
      mode: 0600
      overwrite: true
      contents:
        inline: |
          [connection]
          id=bond-slave-eth1
          type=ethernet
          interface-name=eth1
          master=bond0
          slave-type=bond

    - path: /etc/NetworkManager/system-connections/bond-bond0.nmconnection
      mode: 0600
      overwrite: true
      contents:
        inline: |
          [connection]
          type=bond
          interface-name=bond0

          [bond]
          mode=balance-xor

          [ipv4]
          method=manual
          addresses=192.168.1.220/24
          gateway=192.168.1.1
          dns=192.168.1.1
          dns-search=
```

#バグ
バージョン31.20200310.3.0には[初回起動時に、固定IP設定が反映されないバグ](https://github.com/coreos/fedora-coreos-tracker/issues/358)がありますが、bondingの際は、片方のNICがslaveに編入されないという形で発生します。もう一度rebootすればOK。
【rails】ユーザに紐づくデータをユーザ登録時に生成するための実装方法

新規ユーザ登録時に、ユーザに紐づくデータを生成するよう実装した。
具体的には、新規ユーザが登録されたときに、外部キーとしてuser_idを持つFolderモデルとTagモデルのデータが生成されるようにした。

Gemfile

```Gemfile
gem 'devise'
```

### devise導入

```
bundle Install
rails g devise:install
rails g devise User
```

### DeviseControllerのカスタマイズ

※認証ユーザーのモデルはUser

```
rails g devise:controllers users

# rails g devise:controllers [scope]
```

app/controllers/users　以下に次のコントローラが作成される。

・confirmations_controller.rb
・omniauth_callbacks_controller.rb
・passwords_controller.rb
・registrations_controller.rb
・sessions_controller.rb
・unlocks_controller.rb

###ルーティング設定

registration_controller.rbのルーティング設定を行う。

```config/routes.rb
Rails.application.routes.draw do
  # devise_for :users

  devise_for :users, controllers: {
    registrations: 'users/registrations'
  }
```

### registration_controller設定

newアクションのコメントアウトを外す。
createアクションにデータを生成する処理を記述する。

```app/controllers/users/registrations_controller.rb

# frozen_string_literal: true

class Users::RegistrationsController < Devise::RegistrationsController
  # before_action :configure_sign_up_params, only: [:create]
  # before_action :configure_account_update_params, only: [:update]

  # GET /resource/sign_up
  def new
    super
  end

  # POST /resource
  def create
    super
    @default_folder = Folder.create( name: 'DefaultFolder', user_id: current_user.id )
    Tag.create( name: 'Temporary', user_id: current_user.id, folder_id: @default_folder.id )
  end


  # GET /resource/edit
  # def edit
  #   super
  # end
    ...
```

上記では、user_IDを外部キーとして持つFolderモデルとTagモデルのデータを生成している。
新規ユーザ登録により、登録したユーザーのuser_idを外部キーとして持つFolderモデルとTagモデルのデータが生成されるようになった。


#### 参考文献
https://qiita.com/akasakas/items/138c29fa2cecd271cfe4
Swift：ProtocolでDelegate作る時のTips

# 基本的な実装

```swift
protocol ClassADelegate: AnyObject {
    func call()
}

class ClassA {
    weak var delegate: ClassADelegate?
    
    func test() {
        delegate?.call()
    }
}

class ClassB {
    let a = ClassA()
    
    init() {
        a.delegate = self
    }
}

extension ClassB: ClassADelegate {
    func call() {
        Swift.print("Hello World")
    }
}
```
**ポイント**

- 0から自作のDelegateを作る時はAnyObjectをつける
- delegateのプロパティは`weak var`にする（強参照によるメモリリーク対策）


# すでに`Delegate`をもつクラスを拡張したDelegateを作る時

```swift
protocol CustomeTextViewDelegate: NSTextViewDelegate {
    func call()
}

// NSTextView はすでにdelegateを持っている
class CustomeTextView: NSTextView {
    
    private var customDelegate: CustomeTextViewDelegate? {
        return self.delegate as? CustomeTextViewDelegate
    }
    
    func test() {
        customDelegate?.call()
    }
    
}

class ClassA: NSView {
    let a = CustomeTextView()
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        
        a.delegate = self
    }
}

extension ClassA: CustomeTextViewDelegate {
    func call() {
        Swift.print("Hello World")
    }
}
```

**ポイント**

- `self.delegate as? CustomeTextViewDelegate`のようにすでにあるdelegateをキャストする形で使う．キャストできた時だけ発動する仕組み．

# 実装不要なDelegateメソッドを作りたい場合

```swift:パターンA
protocol ClassADelegate: AnyObject {
    func requiredFunc()
    func optionalFunc()
}

extension ClassADelegate {
    func optionalFunc() {}
}

class ClassA {
    weak var delegate: ClassADelegate?
    
    func callRequire() {
        delegate?.requiredFunc()
    }
    
    func callOptional() {
        delegate?.optionalFunc()
    }
}

class ClassB {
    let a = ClassA()
    
    init() {
        a.delegate = self
    }
}

extension ClassB: ClassADelegate {
    func requiredFunc() {
        Swift.print("Hello World")
    }
    
    // optionalFuncは実装しなくてもコンパイル通る
}
```

**ポイント**

- `extension`で一度空っぽの実装をしてしまう．

```swift:パターンB
@objc protocol ClassADelegate: AnyObject {

    func requiredFunc()

    @objc optional func optionalFunc()

}

class ClassA {
    weak var delegate: ClassADelegate?
    
    func callRequire() {
        delegate?.requiredFunc()
    }
    
    func callOptional() {
        delegate?.optionalFunc?()
    }
}

class ClassB {
    let a = ClassA()
    
    init() {
        a.delegate = self
    }
}

extension ClassB: ClassADelegate {
    func requiredFunc() {
        Swift.print("Hello World")
    }
    
    // optionalFuncは実装しなくてもコンパイル通る
}
```

**ポイント**

- `@objc`修飾詞をつける．

[ここ](https://tech.recruit-mp.co.jp/mobile/swift-optional-method/)によると，パターンAの方がSwiftらしくていいらしい．
【JavaScript】thisが指すオブジェクトがわけわからなくなるので書いておく

## はじめに
JavaScriptを始めた時に、一番最初につまづくポイントって**this**ば気がします。
自分も訳わかりませんでした。
そんな時のためにチラッと確認できるようここにまとめておきます。

[開眼!JavaScript](https://www.oreilly.co.jp/books/9784873116211/)を参考にしています。

## 結論
関数が実行された時に、thisは設定されています。
その呼び出された関数を**プロパティかメソッドとして保持しているオブジェクトがthisに設定されています。**

## コードにしてみる
```js
const people = {
  name: 'java男',
  age: 23,
  greet: function () {
    console.log(`I am ${this.name}`)
  }
}

people.greet()
// 出力 : I am java男
```

ここでいうプロパティかメソッドとして保持しているオブジェクトとは、peopleオブジェクトとなります。
つまり、this.nameが指すのは、peopleオブジェクトのnameプロパティとなります。

```js
const testObj = {
  test: 'test'
}

const thisTest = function () {
  console.log(`${this}`)
}

testObj.thisTest = thisTest

// (1) [object Object]
testObj.thisTest()

// (2) [object global]
thisTest()

```

(1)のthisはtestObjオブジェクトを指しています。なぜなら、thisTestをtestObjのメソッドとして定義したからです。
対して(2)のthisはグローバルオブジェクトを指しています。なぜなら、**ここで実行されているthisTestを保持しているのはグローバルオブジェクトであるためです。**

## 終わり
アロー関数ではthisをグローバルに束縛するとか他にもありますが、とりあえずごちゃつくのでここで終わります。
ややこしくなりがちがthis、きっちり学んでいきましょう。
for の基本

##環境,前提
Ruby 2.5.1
MacOS Mojave Ver.10.14.6

本記事はRubyがインストールされた前提の記事です。
Rubyをインストールしたあと、とにかくRubyをいろいろ触ってみて慣れていくための記事です。お役に立てば幸いです。


# forの基本
オブジェクトの中身から１つずつ取り出して、変数に代入して、オブジェクトの中身を全て処理するまでループが回り続けます。


```sample.rb
for 変数 in オブジェクト do
    //繰り返したい処理
end
```




では1から10までの合計をforを用いて算出してみます。


```sample.rb
sum = 0
for i in 1..10 do
    sum += i
end
puts sum
```

実行結果は以下のように55となります。


```:Tarminal
55
```

#範囲オブジェクト
ここで1..10ってなんだろう？と思われた方も多いはずです。これは範囲オブジェクトといい、
ここで登場する1..10というのは範囲オブジェクトといいRuby独特の物です。開始値と終了値を..で結べば範囲オブジェクトとなります。Rubyでは範囲ですらオブジェクトです。

#解説

先ほどのforにおいて 

```sample.rb
for i in 1..10 do
```
 の記述の部分は
1から10までの整数を順番に取り出してiに代入して
sum += i を実行するということです。

#補足

範囲オブジェクトの開始と終了は具体的な数値である必要はなく、変数でも構いません。よって以下のように書くこともできます。

```sample.rb
form = 1
to = 10
sum = 0
for i in form..to do
    sum += i
end
puts sum
```

実行結果は以下のように55となります。

```:Tarminal
55
```
DenoからSinon.jsを使う

## 概要

- Denoから[Sinon.js](https://sinonjs.org/)を使用する方法について記載します。
- Sinon.jsはモックやスタブ等を提供するJavaScriptライブラリです。

## 使い方

```typescript
import sinon from 'https://cdn.pika.dev/sinon@^8.1.1'; // (1)

const spy = sinon.spy();
spy();
spy();
sinon.assert.calledTwice(spy);
```

(1)の部分で、[Pika CDN](https://www.pika.dev/cdn)からSinon.jsを読み込んでいます。

Pika CDNはDenoをサポートしており、import対象のモジュールに対応する型定義ファイルが存在すれば、`X-TypeScript-Types`ヘッダにその型定義ファイルのURLを設定した状態でHTTPレスポンスを返却してくれます。

Denoは`X-TypeScript-Types`ヘッダに設定されたURLからTypeScriptの型定義ファイルをダウンロードし、型チェックを行います。

[vscode-deno](https://marketplace.visualstudio.com/items?itemName=axetroy.vscode-deno)等のDenoをサポートしたエディタ・IDEを利用していれば、入力補完や型チェック等もちゃんと機能します。

![screenshot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240412/9fce690c-2924-6479-ea64-851cf80365e0.png)

後は、Node.jsから使用する時と同様にSinon.jsを使用することができます。

## 参考

- [Pika CDN](https://www.pika.dev/cdn)
- [Introducing: Pika CDN + Deno](https://dev.to/pika/introducing-pika-cdn-deno-p8b)
- [X-TypeScript-Types custom header](https://deno.land/std/manual.md#x-typescript-types-custom-header)
e-stat APIで政府統計データ（都道府県＆性＆年代別）取得（json） -> 値とカテゴリマスタからDataFrame生成

# この記事を読む前に
基本的なこと（e-stat APIの利用方法 〜 Pandasのデータフレームへの変換）はこちらの記事に詳しく書かれています
[【Python3】e-StatのAPIで遊んでみる「サービス業が増えている？」](https://qiita.com/kaka__non/items/cda56c2f6a0e342d8730)

# この記事のポイント
下記を実施したコード（Python3）を共有します
■ e-statAPIにより、都道府県別ごとの性年代別（5歳刻み）の人口データを使用
■ jsonに含まれるマスタを適用して、数値コードを意味ある文字列に変換する処理を実施（これがちょっとめんどくさかった）

結果として、こんな感じのデータフレームを使えるようになります
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237551/c5847bd5-d0cc-32c9-48d7-84dad54dc9ad.png)

# コード共有
## e-stat APIを使ってjsonデータを取得するまで
結果は「json_data」という変数に格納されます。

```python
# リクエストURL生成
import urllib
url_base = 'http://api.e-stat.go.jp/rest/3.0/app/json/getStatsData?'
params = {
'appId':【取得したアプリケーションID】,
'lang':'J',
'statsDataId':'0003312321',
'metaGetFlg':'Y',
'cntGetFlg':'N',
'sectionHeaderFlg':'1',
}
url = url_base + urllib.parse.urlencode(params, safe=',')

# リクエスト&json取得
import json
req = urllib.request.Request(url)
with urllib.request.urlopen(req) as res:
    json_data = json.load(res)
```
※アプリケーションIDは自分が取得したものに変えてくださいね


## 数値データ部分をデータフレームに変換
結果は「df_merged」という変数に格納

```python
import pandas as pd
value_list = (json_data
    ['GET_STATS_DATA']
        ['STATISTICAL_DATA']
            ['DATA_INF']
                ['VALUE'])
df_merged = pd.DataFrame()  # 空のデータフレームを用意。追加していく
for dct in value_list:
    df_tmp = pd.io.json.json_normalize(dct)  # 辞書をデータフレームへ変換
    df_merged = pd.concat([df_merged, df_tmp], axis=0)  # 結合していく
```
こんな感じのデータになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237551/bb1eea86-f455-0dde-17ac-b8f9e189c6f3.png)
属性がコードになってるので解釈は無理ですね。これからjsonのマスタ部分を使って変換します

## マスタの適用

```python
# マスタ部分を扱い易い形に変換
class_obj_list = (json_data
        ['GET_STATS_DATA']
            ['STATISTICAL_DATA']
                ['CLASS_INF']
                    ['CLASS_OBJ']
)
class_obj_dct = {}  # 空の辞書を用意
for dct_class_obj in class_obj_list:
    dct_tmp = {}
    # 辞書の場合と、複数の辞書のリストになっている場合がある
    if isinstance(dct_class_obj['CLASS'], dict):  # 辞書の場合
            code = dct_class_obj['CLASS']['@code']  # ex. 01000
            name = dct_class_obj['CLASS']['@name']  # ex. 北海道
            dct_tmp[code] = name
    elif isinstance(dct_class_obj['CLASS'], list):  # リストの場合
        for i in range(len(dct_class_obj['CLASS'])):  # リストの中身は辞書
            code = dct_class_obj['CLASS'][i]['@code']  # なるべく上と似た書き方が出来るようにした
            name = dct_class_obj['CLASS'][i]['@name']
            dct_tmp[code] = name
    else: raise('想定外動作')  # 想定外なのでエラーで止まるようにしておく
    class_obj_dct[dct_class_obj['@id']] = dct_tmp  # 辞書を追加

# マスタの適用
for key, dct in class_obj_dct.items():
    col = '@' + key  # ex. @area
    df_merged[col] = df_merged[col].apply(lambda s: dct[s])
```
これでこんな感じの解釈できるデータになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237551/c5847bd5-d0cc-32c9-48d7-84dad54dc9ad.png)
以上！

コードの説明が少なくて申し訳ないですが、とりあえず動くとは思うので興味ある方お試しください〜。
（別のデータだと形式が全く同じではないので、途中でコケる可能性があります。）
（マスタのあたり、もっとすっきり書けないかな〜と思ってます。アドバイスあれば是非お願いします。）
TECH CAMPを使いこなせ！！やる気を保つ『ヘルパーズハイ』

閲覧ありがとうございます！！
せっかくTECH CAMPを受講したなら、私たちの二ヶ月半無駄にしたくないですよね。
今回は、TECH CAMPの期間を有効に活用するための方法を投稿します。

どんなに頑張って勉強していても集中力が切れちゃう事ありますよね。
でも、ゲームしてる時は１２時間くらいぶっ通しでやっちゃっったり、、、(●´ω｀●)
何が違うんだろう？

長時間集中力が続くのは、脳内でドーパミンが分泌されているからです。
ドーパミンは３０秒程の激しい運動で分泌され、やる気が戻ってきます。
でも、静かな教室でいきなり「ジャンピングスクワット」とかはできないですよね（笑）
（僕は、たまに非常階段で、階段ダッシュしてました笑）←変態

そこで、教室内で静かにドーパミンを出して元気１００倍アン○○マンになる為の方法が
「人に親切にする」です。
人から感謝されることは、新しい顔になるくらい、やる気がみなぎります。←チーム開発中の僕です笑

他人に親切にすることでドーパミンが分泌されて、やる気を取り戻すことができます。
TECHCAMPでは、仲間たちと、プログラミング学習に取り組みますが、理解が難しい箇所も多く出てきます。
ですが、チームメンバーや周りの仲間と話し合って解決することで、アウトプットにもなり一石二鳥です。
なので、仲間から「わからない場所があるんだけど、、、」っと言われたら、最高の笑顔で教えてあげてください。
皆んなで最高の二ヶ月半にしましょう。

僕の説明よりも１００倍わかりやすい、記事を載せます。
詳しくは下のリンクから

参考にさせていただいた記事です。
「Mentalist DaiGo Official Blog」
https://daigoblog.jp/helpershigh/
画像のエントロピーをpythonで求めてみた

# はじめに
最近、大学の研究室で画像処理を専門とすることになり、画像のエントロピーについて復習する機会があったのでまとめました。

# エントロピーとは
エントロピーは「乱雑さ」を表し、熱力学や統計力学でも出てきます。また、エントロピーは画像の情報量を表す指標としても使われます。

画像のエントロピーの定義は以下のようになります。
画像の諧調（レベル）が 0 ~ (k-1) の K値画像で、レベル $i$ の出現確率が$P_i$とすると、1画素の情報量は
$$
I = log_2(1/P_i) = -log_2P_i　[bit] 
$$
1画面全体の情報量がエントロピーなので、全画素数を$N$, レベル$i$の画素数を$N_i$とすると、$P_i$は
$$
P_i = N_i/N
$$
エントロピーは
$$
H = -\sum P_ilog_2P_i　[bit/画素]
$$

# 2値画像（白黒画像）のエントロピー関数を求める
2値画像のエントロピー関数を描画してみました。

```python
import numpy as np
import matplotlib.pyplot as plt

P0 = np.arange(0,1, 0.01) # レベル0の出現確率P0
P1 = 1 - P0 # レベル1の出現確率P1

# エントロピーの算出
H = -P0 * np.log2(P0) -P1 * np.log2(P1)

# グラフ描画設定
plt.plot(P0, H)
plt.xlabel("P0")
plt.ylabel("H")
plt.title('Entropy')

# ラベルの描画
plt.legend()
# グラフの描画実行
plt.show()
```

実行結果
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397136/a05575a6-174d-1cf2-d16b-8f0616e2fd10.png">
上図より、$P_0 = 0.0$ or $P_0 = 1.0$ に近いほどエントロピーは小さく、$P_0 = 0.5$ の時にエントロピーは最大になることが分かります。
すなわち、白 or 黒一色に近いほどエントロピーは小さく、白と黒の出現確率が50%ずつの時にエントロピーは大きくなるということですね。

このことは、画像の色使いが複雑なほど情報量は多く、画像の色使いが単純なほど情報量が少ないということを意味し、感覚的にも分かりますよね。

# 白黒画像のエントロピーを求める
次に、白黒のlenaさんの画像のエントロピーを求めてみます。

```python
import cv2
import matplotlib.pyplot as plt
import numpy as np

img = cv2.imread('./img_data/lena_gray.jpg') #ファイルのバスは適宜変えてください
height, width, _ = img.shape

# ヒストグラム（各色の画素数）の算出
histgram = [0]*256
for i in range(height):
    for j in range(width):
        histgram[img[i, j, 0]] += 1

# エントロピーの算出
size = height * width
entropy = 0

for i in range(256):
    # レベルiの出現確率p
    p = histgram[i]/size
    if p == 0:
        continue
    entropy -= p*np.log2(p)

plt.imshow(img)
print('エントロピー：{}'.format(entropy))
```

実行結果
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397136/086c0f8b-ee9f-9007-d27f-8b3bb5a0d09d.png">

# まとめ
エントロピーの超基本のみしか書けませんでしたが、プログラミングを通して復習できてよかったです。何か間違いがあれば、ご指摘お願いいたします。
selfを使って、undefined methodエラーを解消

## はじめに

Modelで定義したメソッドがControllerで呼び出せなくなったとき、
selfを使って２パターンの解決法を見つけたため、記録として残しておく。


今回は、helloという名前のメソッドをモデルで定義するという設定とする。

## 解決法1（特異メソッド方式）

```post.rb
class Post
  def self.hello
    puts 'hello'
  end
end
```

メソッド名の前にself.をつけるやり方

ruby初学者なら何度も見たことのある形だ。


## 解決法2（特異クラス方式）

```post.rb
class Post
  class << self
    def hello
      puts 'hello'
    end
  end
end
```

こちらでも、きちんとcontrollerで呼び出すことができた。
この場合だと、メソッド名の前にself.を書く必要もないし、class << self と　end内であれば、
複数のメソッドを同じように定義できるのがメリットだ。

```post.rb
class Post
  class << self
    def hello
      puts 'hello'
    end

    def goodmorning
      # 二つ定義しても self つけなくて良い
      puts 'Good morning'
    end
  end
end
```


## そもそも

ここからは、特異メソッド方式や特異クラス方式、selfについてもう一歩踏み込んだところまで理解したい方々に読んで欲しい。


### class << selfの仕組み

####　特異メソッド
```ruby
hello = 'hello'
def hello.say
  puts hello + 'world'
end
hello.say #=> hello world

another_hello = 'hello'
another_hello.say #=> NoMethodError: undefined method `say' for "hello":String
```

このように、特異メソッド(hello.say)とは、オブジェクト(hello)に直接固有のメソッドを定義したものだ。
なので、上記のように別のオブジェクト(another_hello)には使うことはできない。


これに加えて、もう一つ特異メソッドを定義する方法がある。

```ruby
hello = 'hello'

class << hello
  def say_world
    puts "#{self}, world"
  end
end
hello.say_world #=> hello, world

```

これも << hello というところで helloオブジェクトの特異クラスを引き出しており、あくまでオブジェクトに対しての特異メソッドの定義となっている。

つまり、一番最初のこの部分、

```ruby
class Post
  class << self
```

クラス定義のコンテキストでの self とは、Classクラスのインスタンス Post class だ。class Post とはクラスを定義するときの記法だが、Ruby の中での理解としては、Class クラスのオブジェクトを生成し Post というグローバルな定数へ代入している。

なので、以下の2つの記述は同じ意味だ。

```ruby

class Post
  def hello
    puts 'hello'
  end
end
post = Post.new
post.hello #=> hello
```


```ruby

Post = Class.new do
  def hello
    puts 'hello'
  end
end
post = Post.new
post.hello #=> hello
```

定数 Post に入っている Class クラスのオブジェクトへ特異メソッドを定義してみる。

```ruby

Post = Class.new do
  def hello
    puts 'hello'
  end
end
def Post.bye
  puts 'good bye'
end
Post.new.hello #=> hello
Post.bye       #=> good bye
```

Post.bye という呼出しができた。これはクラスメソッドの呼出しと同じ。
つまり、クラスメソッド Post.bye というのは、Post に入っている Class クラスのオブジェクトへの特異メソッドの定義として読むことができる。


これにオブジェクトの特異クラスの引き出しの記法 << をあわせて考えると、一番冒頭のコードでやろうとしていることがわかってくる。

####特異クラス

クラスメソッドの定義は特異メソッド形式と特異クラス形式があった。

特異メソッド形式で定義した def Post.bye を特異クラス形式へ書きかえてみる。


```ruby

Post = Class.new do
  def hello
    puts 'hello'
  end
end
class << Post
  def bye
    puts 'good bye'
  end
end
Post.new.hello #=> hello
Post.bye       #=> good bye
```

さらに書き換えると下記にようになる

```ruby

class Post
  def hello
    puts 'hello'
  end

  class << self
    def bye
      puts 'good bye'
    end
  end
end
Post.new.hello #=> hello
Post.bye       #=> good bye
```

クラスメソッドのための記法があるわけではなく、特異メソッドという仕組みを使って巧みにクラスメソッドが実現されていることがわかった。



## おわりに 

今まで何気なく使っていたself。
というかなんとなく理解できたようでできていなかった部分だった。

私が参考にした、というかこの記事はほぼ下記の記事のコピペなので、私の記事がわかりにくかったという方は、ぜひ下のURLの記事を参考にして欲しい。


#### 参考記事
https://magazine.rubyist.net/articles/0046/0046-SingletonClassForBeginners.html
Laravelのバリデーションについて

##バリデーションについてまとめてみた。
#####バリデーションとは、ルールに対してあっているか、あっていないかを判断する。


```php:postController

public function update(Request $request)
{
  $request->validate([
    'name' => 'require|string|max:20', //入力必須、文字列、２０文字以内
    'text' => 'require|max:300',       //入力必須、３００じ以内　
    'date' => 'require|date',          //入力必須、日付
    'email' => 'require|email',        //入力必須、email型
  ]);
  return view ('posts.index',['post'=>true]);        //viewに返す
}

````
postControllerにpostにフォームで送られたデータをバリデーションする。

'フォーム名' => 'バリデーションルール',

バリデーションルールに通れば、ビューに返すことができ、できなければ、自動でリダイレクトする。

####自動リダイレクトしないパターン
Validatorクラスのmakeメソッドを使う。(use Validator;)

```php:postController

public function update(Request $request)
{
  $validator = Validator::make($request->all(),[
    'name' => 'require|string|max:20', 
    'text' => 'require|max:300',     
    'date' => 'require|date',          
    'email' => 'require|email',
    ]);
   return view('post',['post'=> true]);
   //バリデーションエラーだった場合の処理
   if($validator->fails()) {
      return redirect('posts.error',['post'=>fail]);
   } 
}
```
この場合でも自動リダイレクトさせたい場合は、　->validate();　とする。


たくさんのバリデーションルールがあるので、いろいろ試して見ると良い。
iosアプリ開発　初心者

# はじめに 
これからiosアプリを開発していくにあたって日々学んだことをアウトプットしていきます。
少しでも参考になれたらと思います。

## Mac
AndroidアプリはMacとWindowsどちらでも開発可能ですが、iPhone用のアプリを開発するにはMacが必要です。

これからアプリを開発していこうと考えている方はMacのPCを
買うことをおすすめします。


### Xode
XcodeはAppleが無料で提供しているiosアプリ開発では王道のツールです。
iPhone、iPad、Mac、Apple Watchのアプリを開発できます。

※XcodeはMacでのみ動作しますが、最新バージョンのXcodeをインストールするためには、MacのOSも最新バージョンである必要があります。

#### Swift
SwiftはAppleが開発した新しいプログラミング言語で2014年から使わています。

対象としているOSは、MacOSとiOSで、PhoneやiPadなどの端末で使えるアプリ、パソコン向けのアプリを開発することができます。

これまではObjective-C使われていましたが、スピード・安定性・コスト・メンテナンス面から考えるとSwiftが優れています。
Unity LineRenderer の頂点数を指定する際に旧型式と怒られた話

こんにちは。
今回はUnityで開発中に少しつまずいた事を紹介しようと思います。
とりあえず実装したかったのは、ただ線を描写したかったのです。しかし、Unityのバージョンアップの際にどうやら頂点数の指定方法に変更があったみたい。とりあえずどう変更されたのかを最初に書いていきます。
##変更された構文
はい。見出し通り構文が変更されていたみたいです。下に比較して書いていきます。

| バージョン      |       構文　　　　|    例文    |
|:-----------------|------------------:|:------------------:|
| ver5.4以前       |SetVertexCount([int]); |Line.SetVertexCount(2);|
| ver5.5           |numPositions = [int];  |Line.numPositions = 2; |
| ver5.6以降       |positionCount = [int]; |Line.positionCount = 2;|

上記の通りバージョン事に少しずつ違います。
何が厄介かというと、エラーではなく警告として怒られます。なので気づかない可能性があります。

##例のソースコード
まずは警告されるコードを書いていきます。

```C#:sample.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class DisplayLine : MonoBehaviour
{
    // Start is called before the first frame update
    void Start()
    {
        // 線オブジェクト設定
        LineRenderer line = gameObject.GetComponent<LineRenderer>();

        // 線の幅を指定
        line.startWidth = 0.1f;
        line.endWidth = 0.1f;

        // 頂点の数を指定
        line.SetVertexCount(2);

        // 開始位置と終了位置を指定
        line.SetPosition(0, Vector3.zero);
        line.SetPosition(1, new Vector3(1f, 1f, 0f));
    }

    // Update is called once per frame
    void Update()
    {
        
    }
}
```
このソースコードでは最新バージョンのUnityでは警告がでます。
頂点の数を指定のコメントアウトされているコードが問題のコードです。
では、警告が来ないソースコードに変更しましょう。

```c#:sample.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class addViewLine : MonoBehaviour
{
    // Start is called before the first frame update
    void Start()
    {
        // 線オブジェクト設定
        LineRenderer line = gameObject.GetComponent<LineRenderer>();

        // 線の幅を指定
        line.startWidth = 0.1f;
        line.endWidth = 0.1f;

        // 頂点の数を指定
        line.positionCount = 2;

        // 開始位置と終了位置を指定
        line.SetPosition(0, Vector3.zero);
        line.SetPosition(1, new Vector3(1f, 1f, 0f));
    }

    // Update is called once per frame
    void Update()
    {
        
    }
}

```

このように書くことで警告は消えます。

##最後に
今回、このような事態がおきてしまった理由は筆者が参考にした資料（ググった）内のソースコードの書き方のバージョンが以前のものであったことです。実際、開発をしていく上でこんなの日常茶飯事なので警告がでたことにそんなにひるまなくてもいいと思いますが、言語の仕様変更に対しては敏感である必要があると改めて感じることができました。いい勉強になりました。

ついでになんですが、筆者は大学生です。はい。バイトでエンジニアしてます。
インスタでは情報発信や記事の投稿通知、役立つ情報、日常を垂れ流したりしてますのでよかったらフォローしてください。多分フォロー返します。沢山の方と繋がれたらなとか思っています。
アカウント→**taaa_kundayo**
URL:https://www.instagram.com/p/B-j3-RJjPWJ/?igshid=poq7k5z6eo3n

では、記事は以上になります。
ありがとうございました！！
初心者向け、正規表現

#はじめに
この記事は、
「はじめての正規表現。どんなものかだけ知りたい！」
という人向けです。
#正規表現は何に使うか
###1 文字列が指定のパターンに一致するか判定
入力チェックなんかで使います。

**例**
文字列が`aaa`で始まって`ccc`で終わるか判定

正規表現のパターン 
`aaa.*ccc`

**判定の例**

|文字列<span>　</span> <span>　</span> <span>　</span> |判定結果<span>　</span> 
|----------------------------------------------------|---------------------|
|aaaccc   |<font color="LimeGreen">OK</font>
|aaavvccc |<font color="LimeGreen">OK</font>
|aaa??ccc |<font color="LimeGreen">OK</font>
|aaccc    |<font color="Salmon">NG</font>
|ccc      |<font color="Salmon">NG</font>

###2 文字列のうち、パターンに一致する場所を探す
基本的には一番長く一致する場所になります。
文字列のうち、パターンに一致する場所をほかの文字列に置き換える時にも使います。

**例**
文字列が`aaa`で始まって`ccc`で終わる場所

正規表現のパターン 
`aaa.*ccc`

**判定の例**

|文字列<span>　</span> <span>　</span> <span>　</span> |見つかった文字列 
|----------------------------------------------------|---------------------|
|abcaaacbcccacccb   |aaacbcccaccc

#簡単な正規表現
###ドット
上の例でも使った`.`は、任意の１文字を表します。
正規表現のパターン`a.c`とすると、`a[任意の１文字]c`となります。

|文字列<span>　</span> <span>　</span> <span>　</span> |判定結果<span>　</span> 
|----------------------------------------------------|---------------------|
|abc    |<font color="LimeGreen">OK</font>
|abbc   |<font color="Salmon">NG</font>
###アスタリスク
`*`は、直前の表現が０回以上繰り返す。です。
正規表現のパターン`a*c`とすると、`[aが0回以上]c`となります。

|文字列<span>　</span> <span>　</span> <span>　</span> |判定結果<span>　</span> 
|----------------------------------------------------|---------------------|
|ac     |<font color="LimeGreen">OK</font>
|aaac   |<font color="LimeGreen">OK</font>
|c   |<font color="LimeGreen">OK</font>
|abc   |<font color="Salmon">NG</font>

###グルーピング
`()`で文字をまとめることができます。
正規表現のパターン`(aa)*c`とすると、`[aaが0回以上]c`となります。

|文字列<span>　</span> <span>　</span> <span>　</span> |判定結果<span>　</span> 
|----------------------------------------------------|---------------------|
|aac     |<font color="LimeGreen">OK</font>
|aaaac   |<font color="LimeGreen">OK</font>
|c   |<font color="LimeGreen">OK</font>
|ac   |<font color="Salmon">NG</font>

###あれかこれにヒット
`|`をつかって`or`を表現できます。
正規表現のパターン`(aa|cc)`とすると、`aa` or `cc`となります。

|文字列<span>　</span> <span>　</span> <span>　</span> |判定結果<span>　</span> 
|----------------------------------------------------|---------------------|
|aa     |<font color="LimeGreen">OK</font>
|cc     |<font color="LimeGreen">OK</font>
|aacc   |<font color="Salmon">NG</font>


###範囲指定
`[A-Z]`でアルファベット大文字を表現できます。
※全角の扱いは注意。

正規表現のパターン`[A-Z]*`とすると、大文字だけで構成された文字列となります。

|文字列<span>　</span> <span>　</span> <span>　</span> |判定結果<span>　</span> 
|----------------------------------------------------|---------------------|
|QIITA     |<font color="LimeGreen">OK</font>
|Qiita     |<font color="Salmon">NG</font>

#パターンの作るとき
実際に欲しいパターンを作るときはテストできるサイトで試しながら作ります。
正規表現には方言のようなものがあったりするので、ちゃんと調べて、実装後のテストは入念にしましょう。

#あとがき
正規表現で検索するととっつきにくい記事ばかり出てくるので、
この記事はアップデートしてとっつきやすくしたい。
Active jobでの非同期処理

#非同期処理とActive job
非同期処理とはAという作業と同時に別のBという作業を行うこと(マルチタスク、並列作業)。通常はAという作業の後にBという作業をするように一つ一つしか行えない[非同期処理と同期処理の実装パターンと特徴](http://ossforum.jp/node/753)。しかしrailsではActive jobを用いて必要なツールのインストールを行って実行する。ここではsidekiqの例をあげます。


#準備、設定
sidekiqによる非同期処理を行うにはredisサーバーが起動していないといけないので、まずredisをマシーンにインストール。
↓
redisのサーバーを起動
↓
gemを使ってsidekiqをアプリにインストール
↓
bundle exec sidekiqでsidekiqを起動
↓
config/environmentsでその環境でsidekiqを使用することを記述

#ジョブを作成、実行
ジョブとはメインの処理とは別に並行的にバックグラウンドで行わせる処理のこと。ジョブを実行するにはジョブを定義し、読み出さないといけない


rails g job　~でジョブを記述するためだけのファイルを作る
↓
app/jobs/~job.rbにジョブの内容を記述
↓
非同期処理を行いたいアクションの中でジョブの読み出しを行うことで非同期処理される

厳密にはジョブの読み出しをするとすぐに実行されるわけではない。予約をするイメージ。忙しくてできない時は開始されないし、処理できる状態になれば実行されるって感じ

#参考文献
[現場で使える Ruby on Rails 5速習実践ガイド](https://www.amazon.co.jp/%E7%8F%BE%E5%A0%B4%E3%81%A7%E4%BD%BF%E3%81%88%E3%82%8B-Ruby-Rails-5%E9%80%9F%E7%BF%92%E5%AE%9F%E8%B7%B5%E3%82%AC%E3%82%A4%E3%83%89-%E5%A4%A7%E5%A0%B4%E5%AF%A7%E5%AD%90/dp/4839962227)
[Railsガイド](https://railsguides.jp/active_job_basics.html)
[Rails 4.2で導入されたActive Jobを使ってみよう](https://qiita.com/ryohashimoto/items/2f8fd685920a5318def4)
CatalinaにアップグレードしたmacでrbenvからRuby 2.7.1をインストールしようとしたらgmpが読み込めずに失敗した

CatalinaにアップグレードしたmacでrbenvからRuby 2.7.1をインストールしようとした。

```bash
$ rbenv install 2.7.1
...
dyld: Library not loaded: /usr/local/opt/gmp/lib/libgmp.10.dylib
  Referenced from: /var/folders/p9/38jx3_ks5zb3ml70pccx4g440000gn/T/ruby-build.20200404201643.64758.NBfaXF/ruby-2.7.1/ruby
  Reason: image not found
make: *** [rdoc] Abort trap: 6
```

で失敗する。

```bash
$ ls /usr/local/opt/gmp/lib/
ls: /usr/local/opt/gmp/lib/: No such file or directory
```

見てみると当該ディレクトリにはなにもない。
しかしインストールしようとするとインストール済みと言われる。

```bash
$ brew install gmp
Updating Homebrew...

Error: gmp 6.1.2_2 is already installed
To upgrade to 6.2.0, run `brew upgrade gmp`.
```

アップグレードしてみる

```
$ brew upgrade gmp
Updating Homebrew...
==> Upgrading 1 outdated package:
gmp 6.2.0
==> Upgrading gmp -> 6.2.0 
==> Downloading https://homebrew.bintray.com/bottles/gmp-6.2.0.catalina.bottle.tar.gz
==> Downloading from https://akamai.bintray.com/2e/2e6acd6e62d1b8ef0800061e113aea30a63f56b32b99c010234c0420fd6d3ecf?__gda__=exp=1586003712~hmac=1a3ede8872bae9e8bd6b238be3e7c56d1cc64a5b770646c6ffe342d6da269809&response-content-disposition=attachment%3Bfilename%3D%22gmp-6.2.0.catalina.bottle.tar.gz%22&response-content-type=application%2Fgzip&requ
######################################################################## 100.0%
==> Pouring gmp-6.2.0.catalina.bottle.tar.gz
🍺  /usr/local/Cellar/gmp/6.2.0: 20 files, 3.2MB
Removing: /usr/local/Cellar/gmp/6.1.2_2... (18 files, 3.1MB)
```

見てみたら先程のディレクトリにもちゃんとファイルができた。

```bash
$ ls /usr/local/opt/gmp/lib/
libgmp.10.dylib		libgmp.a		libgmp.dylib		libgmpxx.4.dylib	libgmpxx.a		libgmpxx.dylib		pkgconfig
```

再度Rubyをインストール

```bash
$ rbenv install 2.7.1
Downloading ruby-2.7.1.tar.bz2...
-> https://cache.ruby-lang.org/pub/ruby/2.7/ruby-2.7.1.tar.bz2
Installing ruby-2.7.1...
ruby-build: using readline from homebrew
Installed ruby-2.7.1 to /Users/niwatako/.anyenv/envs/rbenv/versions/2.7.1
```

成功。
Rails5.2以降でのcredentials.yml.encの読み込み方

# PAYJPのAPIが読み込めず、クレジットカードの登録ができない
PAYJPを使ってクレジット決済の導入をしたところ、
クレジットカードの登録をしようとすると下記のようなエラーがでました

<img width="1301" alt="スクリーンショット 2020-04-04 21.15.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531549/bce49db3-17ed-0906-1eb1-2968faa587b2.png">

PAYJPの導入はQiita記事参照してください
[RailsでPayjpを使った購入機能を実装する
](https://qiita.com/suzy1031/items/7964829086eb929471a6)

# PAYJPと連携するためのキーが読み込めていない
Rails5.2以降からはAPIのキーなど環境変数に設定するためのものは
`credentilas.yml.enc`に記載するようになりました

詳しくはこちら
[Rails5.2から追加された credentials.yml.enc のキホン](https://qiita.com/NaokiIshimura/items/2a179f2ab910992c4d39)

こちらを参照に`credentials.yml.enc`に記載したはず・・・
もしかしてちゃんと読み込めていなそう？

`rails c`で調べてみる

```ruby:ターミナル
rails c
[1] pry(main)> Rails.application.credentials.PAYJP_PRIVATE_KEY
=> "sk_test_XXXXXXXXXXXXXXXXXXXX"
```
どうやらちゃんと読み込めるのでちゃんと環境変数は設定できていそう

# `credentials.yml.enc`を読み込む書き方が必要
どうやら他の参考記事の通りに

```ruby:card_controller.rb
  def pay
    Payjp.api_key = ENV["PAYJP_PRIVATE_KEY"]
    中略
```

と書いてしまっていたのが原因。
`ENV["PAYJP_PRIVATE_KEY"]`で読み込んでいたのは`credentials.yml.enc`を使っていないRails.5.2以前の書き方で、`credentials.yml.enc`を読み込むためには

```ruby:card_controller.rb
  def pay
     Rails.application.credentials.dig(:payjp, :PAYJP_PRIVATE_KEY)
    中略
```

と書かないと`credentials.yml.enc`に記載した環境変数の読み込みができないということです。
記事によってRailsのバージョンが違うので安易にそのまま記載するのはいけないですね。。。。


# 参考
[【Rails】payjpを使用した決済機能を実装する①〜クレジットカードの登録編〜](https://qiita.com/dice9494/items/4aa04da1056d1f15919e)
Glitchで、ERROR EACCES: permission denied がコンソールに表示され動かないときの対処法

#対処方法
1. Terminalを開く

コマンドライン **(プロジェクトのパッケージが強制的に再インストール コマンド)**

```javascript
  $ enable-pnpm
```
を実行する。
2. しばらくたつと動く。
3. 以上！！
![glitch.com](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480250/6a98cc76-484e-7f5d-a8b0-daabd9fcfc72.png)
Yii2のmigrationファイル作成コマンド

# 概要
Yii2のmigrationファイル作成コマンドは実行時に指定するオプションによって生成するテンプレートがことなります。

## migrationファイル作成コマンド
| 内容 | コマンド | 参照するテンプレートパス |
|:-----------------|:------------------ |:---|
| テーブル作成 | yii migrate/create create_xxx_table |@yii/views/createTableMigration.php |
| テーブル削除 | yii migrate/create drop_xxx_table        | @yii/views/dropTableMigration.php |
| カラム追加   | yii migrate/create add_columns_to_xxx_table    | @yii/views/addColumnMigration.php |
| カラム削除   | yii migrate/create drop_columns_from_xxx_table | @yii/views/dropColumnMigration.php |
| その他      | yii migrate/create \<name>               | @yii/views/migration.php |

※ `xxx`にはテーブル名が入ります。
`<name>`は任意の文字列が入ります。

## fieldsオプション

migrateコマンド実行時にfieldsオプションでカラムの情報を指定できます。
カラム追加/カラム削除の時に filedsオプションを指定するとカラムが自動で入るので便利です。

```bash
# user テーブルにemail カラムを追加する場合
yii migrate/create add_columns_to_user_table --fields="email:string"
```

生成されるコード

```php:add_columns_to_user_table.php
    /**
     * {@inheritdoc}
     */
    public function safeUp()
    {
        $this->addColumn('{{%user}}', 'email', $this->string());
    }

    /**
     * {@inheritdoc}
     */
    public function safeDown()
    {
        $this->dropColumn('{{%user}}', 'email');
    }
```

## migrationのテンプレート

テーブル作成時に登録日時など入るカラムがある場合、あらかじめテンプレートに追加しておくと便利です。
created_at/updated_atカラムをあらかじめ追加したテンプレート。

```php:@yii/views/_createTable.php
        $this->createTable('<?= $table ?>', [
            // ~~ 省略 ~~
            'created_at' => $this->datetime()->notNull()->defaultExpression('CURRENT_TIMESTAMP')->comment('登録日時'),
            'updated_at' => $this->datetime()->notNull()->defaultExpression('CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP')->comment('更新日時'),
        ]);
```

もとのテンプレートを変更したくない場合は、migration実行時に `--templateFile=テンプレートパス` をつけることで独自のテンプレートを使用することもできます。

## 参考
[Yii 2.0 決定版ガイド データベース・マイグレーション](https://www.yiiframework.com/doc/guide/2.0/ja/db-migrations)
i3-dmenu-desktopでアプリケーションが動作しているワークスペースへのジャンプ


## はじめに
タイル型ウインドウマネージャの i3wm を気に入っているのですが、
動作中のアプリケーションを探すためにワークスペースを端から確認していました。
毎回複数のワークスペースからアプリケーションを探すのは手間が大きいため、
アプリケーションが動作しているワークスペースへジャンプする機能を作りました。

[hsgwa/i3-dmenu-desktop-go-to-app-ws](https://github.com/hsgwa/i3-dmenu-desktop-go-to-app-ws)

## 概要

起動中のアプリケーションが動作するワークスペースへのショートカットを追加するi3-dmenu-desktopのラッパースクリプトです．
`i3-msg workspace [ワークスペース番号]`実行でのワークスペース移動をしており、モニターが複数ある環境でも動きます。

下の動画では、`Go to Emacs`, `Go to Google-chrome`が追加されており、
i3-dmenu-deksktopで選択することで動作しているワークスペースへジャンプします。
また、`$mod + n`を押すことで直前に選択したアプリケーションが動作するワークスペースを周回できます。

![movie.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62023/231e793b-98dd-1d66-b261-47299bf40d54.gif)
Chrome が動作しているワークスペース名：2, 3
Emacs が動作しているワークスペース名：1, 2, 3, 4, 5

## インストール方法
1. git clone https://github.com/hsgwa/i3-dmenu-desktop-go-to-app-ws.git
2. ~/.config/i3/configを編集

```
# launch dmenu-dekstop-go-to-app-ws
bindsym $mod+space exec --no-startup-id [path-to-i3-dmenu-desktop-go-to-app-ws]

# rotate last selected application workspaces.
bindsym $mod+n exec --no-startup-id /tmp/i3-last-go-to-app
```

## 使い方
1. `$mod + space`で i3-dmenu-desktop-go-to-app-wsを起動
2. `Go to [アプリケーション名]`を選択
3. `$mod + n`で直前に選択したアプリケーションが動作するワークスペースを周回
PythonでLINE Notifyへ通知を送る

ちょっとしたツールやbotを作ったとき、LINEに通知したいなーということがあります。
その度にググったり過去のソースを見たりしてるのでここにやり方を記しておきます。

# LINE Notifyのトークン取得
ここからアカウントを登録してトークンを取得します。
https://notify-bot.line.me/ja/

アカウント作成後、マイページ > トークンを発行する > トークン名、トークルームを設定 > 発行する
発行されたトークンをコピーしておきます。
<img width="600" alt="スクリーンショット 2020-04-04 20.35.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145728/caca8918-1a5d-3368-2fbb-fd5b9beac4bc.png">

# Pythonから通知

`pip install requests` が済んでいれば以下コピペでおっけーです。

``` Notify.py
import requests

def main():
    send_line_notify('てすとてすと')

def send_line_notify(notification_message):
    """
    LINEに通知する
    """
    line_notify_token = 'ここに発行したトークン'
    line_notify_api = 'https://notify-api.line.me/api/notify'
    headers = {'Authorization': f'Bearer {line_notify_token}'}
    data = {'message': f'message: {notification_message}'}
    requests.post(line_notify_api, headers = headers, data = data)

if __name__ == "__main__":
    main()
```

実行するとこんな感じで通知されます🔔
<img width="375" alt="LINE_capture_607693604.170690.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145728/8ea70b61-e088-ad9b-576a-596187cb9568.jpeg">

# 備考
- 公式ドキュメントはこちら
    - [LINE Notify](https://notify-bot.line.me/doc/ja/)
- ソースコードを公開する場合、トークンを直書きしないように注意しましょう