OmniAICreator/Qiita-1.07M huggingface dataset:
Cycle inside "YOUR_APPS"; building could produce unreliable results. This usually can be resolved by moving the target's Headers build phase before Compile Sources.

# 表題の件、、、

## 概要
表題のエラーが出ました。最近よくみます。

<img width="306" alt="Screenshot 2019-09-10 at 11.45.11 AM.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31394/82035378-c5fb-46da-dbc4-43ead63f5eea.png">

***(☝ ՞ਊ ՞）☝ Wow What's this!!!***

Cycle inside "YOUR_APPS"; building could produce unreliable results. This usually can be resolved by moving the target's Headers build phase before Compile Sources.


###　詳細ログ
```
:-1: Cycle inside yamadatakayuki; building could produce unreliable results. This usually can be resolved by moving the target's Headers build phase before Compile Sources.
> Cycle details:
> → That command depends on command in Target 'sevens': script phase “[CP] Embed Pods Frameworks”
> → That command depends on command in Target 'sevens': script phase “Run Script”
> ○ Target 'yamadatakayuki': Ditto /Users/yamadatakayuki/Library/Developer/Xcode/DerivedData/yamadatakayuki-ffpcyajugyacpogctglgosyzefml/Build/Intermediates.noindex/yamadatakayuki.build/Debug-iphonesimulator/yamadatakayuki.build/DerivedSources/yamadatakayuki-Swift.h /Users/yamadatakayuki/Library/Developer/Xcode/DerivedData/yamadatakayuki-ffpcyajugyacpogctglgosyzefml/Build/Intermediates.noindex/yamadatakayuki.build/Debug-iphonesimulator/yamadatakayuki.build/Objects-normal/x86_64/yamadatakayuki-Swift.h
> ○ Target 'yamadatakayuki' has compile command for Swift source files

```

### なぜこうなるかの理由（概要）

ビルドするときのサイクルの順番があまりよろしくないぜ〜みたいな感じです。

つまりビルドの順番なので

### resolve

Xcode -> target -> Build Phasesの下記項目の順番を変更します。

***before***

<img width="714" alt="Screenshot 2019-09-10 at 11.52.33 AM.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31394/9425ceea-6c33-03fa-72da-d011284d707f.png">


***after***

<img width="672" alt="Screenshot 2019-09-10 at 11.52.47 AM.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31394/55c3e213-c0ab-b4d6-0394-5e99f1b7b55c.png">

これで解決します。

引用: https://stackoverflow.com/questions/50709330/cycle-inside-building-could-produce-unreliable-results-xcode-10-error
hosts ファイルを編集せずに curl で名前解決する

## host 指定したい

冗長構成のサーバーを IP 指定したいなー、という時は DNS サーバー(仮) の hosts ファイルでルーティングの設定入れると思います。

```bash
$ cat /etc/hosts

##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##

172.16.1.1 example.qiita.com # example.qiita.com にアクセスしたらこの IP ですよという設定
```

hosts ファイルは即時反映されます。

## curl でどうやるか？

`--resolve オプション`付ければできました。 

```bash
$ curl --resolve example.qiita.com:443:172.16.1.1 https://example.qiita.com
```
【Java】Matcherと正規表現で文字列中の一部を切り出す

# やること
はてなブログのURL文字列は「entry/年/月/日/時間」というような形式になっています（例のURLは無効な内容です）。

```
https://hogefugapiyo.hatenablog.com/entry/2019/09/02/000000
```

今回は例として、このURLから年・月・日を切り出します。

# やり方
`java.util.regex.Matcher`を使います。

```java
Matcher matcher = Pattern
    .compile(".+/entry/(\\d+)/(\\d+)/(\\d+)/.+")
    .matcher(/* 比較対象URL文字列 */);

int year = Integer.parseInt(matcher.replaceFirst("$1"));
int month = Integer.parseInt(matcher.replaceFirst("$2"));
int day = Integer.parseInt(matcher.replaceFirst("$3"));
```

## 解説
タイトルでは切り出しと表現しましたが、この処理は本来「入力が正規表現と一致する場合、一致した部分を指定した正規表現で置換する」という内容です。
今回の場合は比較対象URL文字列全体が正規表現とマッチするため、文字列全体が指定した内容で置き換えられ、結果として切り出したように見えると言う感じです。

`$1`が何かと言うと、これは正規表現中で`()`で囲んだ内容です。
正規表現内でこれは変数のように扱えます。

本質を無視するなら`.+/entry/(\\d+)/(\\d+)/(\\d+)/.+`は`.+/entry/$1/$2/$3/.+`と読み替えると分かりやすいと思います。

文字列に対する処理なので、切り出した結果は当然文字列で帰ってきます。

## 別解
以下のように書いても同等の処理ができますが、何度もやるのであれば先に`Pattern`を`compile`しておいた方が処理効率が高いです。

```java
String year = /* 比較対象URL文字列 */.replaceFirst(".+/entry/(\\d+)/(\\d+)/(\\d+)/.+", "$1");
```

# おまけ
正規表現は以下のようなサイトでデバッグしておくと捗ります（ただし言語間の差異などあるので単体テストもやった方がいいと思います）。

- [Debuggex: Online visual regex tester\. JavaScript, Python, and PCRE\.](https://www.debuggex.com/)
[Kagura] Rustでフロントエンドフレームワークを作ってみた。

# 概要

Rustをwasmにコンパイルすることで利用可能なフロントエンドフレームワークを作ってみました。なお、フロントエンド用のクレートだとYewというものがすでに存在しています。

c.f. [Yew](https://github.com/yewstack/yew)

# インストール

~~ドキュメントコメントを全然付けていないのと開発途上も良いところなので、まだCrates.ioには公開していません。githubからcloneして使うことになります。~~

Crates.ioに公開しました。

[Kaguraのgithubリポジトリ](https://github.com/SoundRabbit/Kagura)

# 使い方

`kagura::Component::new(initial_state, update, render)`によってコンポーネントを作って`kagura::run(component, id)`でエントリーポイントのidとルートコンポーネントを指定すれば良いです。

hello world の例を示します。

```Rust
extern crate kagura;
extern crate wasm_bindgen;

use wasm_bindgen::prelude::*;

#[wasm_bindgen(start)]
pub fn main() {
    kagura::run(kagura::Component::new(State, update, render), "app");
}

struct State;

struct Msg;

fn update(_: &mut State, _: &Msg) {}

fn render(_: &State) -> kagura::Html<Msg> {
    use kagura::Html;
    use kagura::Attributes;
    use kagura::Events;
    Html::h1(
        Attributes::new(),
        Events::new(),
        vec![
            Html::unsafe_text("hello kagura"),
        ],
    )
}
```

`State`がコンポーネントの状態を表現し、`Msg`がイベントを`update`にバインドします。`update`で`Msg`をもとに`State`を更新し、`State`に基づき`render`でビューを作るという構造を取ります。（要はTEA）

あくまでコンポーネント指向なので、コンポーネントのレンダーからさらに別のコンポーネントを呼び出すことができます。呼び出されたコンポーネントのステートは呼び出し元のステートが変わらない限りリセットされません。

~~現状、子コンポーネントから親コンポーネントにイベントを伝搬するまともな方法が無いので、あまりコンポーネント指向としての意味を成していません。（今後対応します）~~

subscribeで親コンポーネントにメッセージを伝搬できるようになりました。

以下に子コンポーネントを使用する例を示します。

```Rust
extern crate kagura;
extern crate wasm_bindgen;

use wasm_bindgen::prelude::*;

#[wasm_bindgen(start)]
pub fn main() {
    kagura::run(kagura::Component::new(State, update, render), "app");
}

struct State;

struct Msg;

fn update(_: &mut State, _: &Msg) {}

fn render(_: &State) -> kagura::Html<Msg> {
    use kagura::Html;
    use kagura::Attributes;
    use kagura::Events;
    Html::div(
        Attributes::new()
            .with_style("color: red;"),
        Events::new(),
        vec![
            Html::component(child::new()),
            Html::component(child::new()),
            Html::component(child::new()),
            Html::component(child::new()),
        ],
    )
}

mod child {
    pub fn new() -> kagura::Component<Msg, State> {
        kagura::Component::new(0, update, render)
    }

    pub type State = u64;

    pub enum Msg {
        CountUp,
    }

    fn update(state: &mut State, msg: &Msg) {
        match msg {
            Msg::CountUp => {*state += 1;}
        }
    }

    fn render(state: &State) -> kagura::Html<Msg> {
        use kagura::Events;
        use kagura::Attributes;
        use kagura::Html;
        Html::h1(
            Attributes::new(),
            Events::new()
                .with_on_click(|| {Msg::CountUp}),
            vec![Html::unsafe_text(state.to_string())],
        )
    }
}
```

onClickイベントは`() -> Msg`なクロージャで`Msg`にマップしています。もし、子コンポーネントの初期状態を親コンポーネントから指定したければ、`child::new()` の引数を用いることになります。

# 実装状況

現状、タグ・属性の一部とonClickイベントにしか対応できていません。また、仮想DOMの差分レンダリングをコンポーネント単位で行っているため無駄が多いです。

# 今後の予定

1. タグ・属性・イベントの対応数を増やす
2. 仮想DOMのレンダリングを高速化（せめてタグ単位で差分を取る）
Gutenbergの投稿画面の右サイドバー表示制御

wordpress5.0から導入されたGutenbergの右サイドバーの表示制御をしたい。

```php
function remove_post_support() {
  remove_post_type_support('post','excerpt'); // 抜粋
  remove_post_type_support('post','trackbacks'); // ディスカッションのトラックバック許可
  remove_post_type_support('post','comments'); // ディスカッションのコメント許可
  unregister_taxonomy_for_object_type( 'category', 'post' ); // カテゴリ
}

add_action('init','remove_post_support');
```

調べた方法。
下記、参考にしたサイトより`remove_post_type_support`なるfunctionがあることを知る。
wordpress内でgrepしてfunctionの中身を見ると、`$_wp_post_type_feature`というglobal変数に項目を持っているよう。
これをvar_dumpして中身を見てそれっぽいのを`remove_post_type_support`の第二引数に入れて挙動を試す。

参考
[【wordpress】Gutenbergの投稿の編集画面をカスタマイズ \| web関連 \| 二色人日記。](https://twotone.me/web/2398/)
Windows10版Google Cloud SDK(Bundled Python)セットアップ時のデコードエラー問題の解決法

#恐らく直面してる問題
きっとこんなん↓↓↓

```エラー文:エラー文
UnicodeDecodeError: 'ascii' codec can't decode byte ....
```
##解決法



###①Bundled Pythonは諦めて別途python2をインストールする

python2をインストールして(python3はダメダメ)Pathを通す。



###②Pythonの初期エンコーディングをasciiからshift-jisに変更する

真打登場。
Python27\Lib\site-packagesに↓を作る。

```python:sitecustomize.py
import sys
sys.setdefaultencoding("hoge")
```

**[重要] ↑↑↑ の"hoge"を覚えのある色々な文字コードに替えて③を試す。**
ちなみに筆者は"utf-8"→"shift-jis"→"cp932"と試して3回目で成功。(諦めないで。)



##③Google Cloud SDK再セットアップ

**[超重要]BundledPythonはチェック外すの忘れないように！！！**

![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419579/c60d3fd8-7b49-e461-25a2-f5cb285cda8f.png)
Azure Kubernetes ServiceをARMテンプレートで作成する

Azure Kubernetes ServiceをARMテンプレートで構築しました。
ARMテンプレートは、クイックスタートテンプレートとして公開されています。その中から以下を参考にして作りました。

[101-aks-advanced-networking](https://github.com/Azure/azure-quickstart-templates/tree/master/101-aks-advanced-networking)

# 前提
* 作業PCにAzure CLIがインストールされていること
* リソースグループが作成されていること
* vNetが作成されていること
* Log Analytics Workspaceが作成されていること

# クイックスタートテンプレートとの違い
* Log Analytics Workspaceを追加
* タグ付けを追加
* Azure CLIでのデプロイ方法追加

# ARMテンプレートを作成する
* 以下にサンプルを置きました。パラメータ(azuredeploy.parameters.json)は適宜修正ください。

[shingo-kawahara/azure-template/aks-create](https://github.com/shingo-kawahara/azure-template/tree/master/aks-create)

# ADサービスプリンシパルを作成する
* PowerShellを開きます

```
az login
az ad sp create-for-rbac -n "[Your SP Name]" --skip-assignment --years 10
$APP = "[appid]"
$SECRET = "[password]"
$OBJ = az ad sp show --id $APP --query objectId -o tsv
```

# AKSを作成する

```
$WORKSPACE = az resource list -l japaneast -n [Log Analytics Workspace Name] -g [Your Resource Group Name] --query [].id -o tsv
az group deployment create -g [Your Resource Group Name] -n aks-create --mode Incremental --template-file azuredeploy.json `
  --parameters "@azuredeploy.parameters.json" `
  --parameters existingServicePrincipalObjectId=$OBJ `
               existingServicePrincipalClientId=$APP `
               existingServicePrincipalClientSecret=$SECRET `
               workspaceResourceId=$WORKSPACE
```

# まとめ
特にLog Analytics周りの書き方やAzure CLIでの実行方法（パラメータの渡し方）にハマったので手順を残しました。
vNetやACRといったリソースはクイックスタートテンプレートほぼそのまま使えたので、他のリソースも積極的にコード化していきたいと思います。
Rubyのクラスメソッドをなぜ特異メソッドと呼ぶのか教えて進ぜよう

なに、Rubyの特異メソッドの意味が分からないとな？
`def self.baz` と書けばクラスメソッドになるみたいだがどういうことかピンと来ていない？
ふむ、暇じゃから教えて進ぜよう

# 特定のインスタンスだけが持つメソッド

Rubyに限らず多くのプログラミング言語では、メソッドはクラスに定義するのう。
いや、クラスメソッドという意味ではない。
インスタンスメソッドのことじゃ。インスタンスメソッドはクラスの中で定義するよの？
当たり前のことだと思うかな？

実はRubyは、 **インスタンスにメソッドを定義する** ことができるんじゃ。

ちょっと見てみい

```ruby
class MyClass
  def foo
    p “foo”
  end
end

a = MyClass.new
b = MyClass.new

a.foo # => “foo”
b.foo # => “foo”
```

なんの変哲もないコードじゃな。
これにちょっと書き足してみるぞ

```ruby
class MyClass
  def foo
    p “foo”
  end
end

a = MyClass.new
b = MyClass.new

a.foo # => “foo”
b.foo # => “foo”


def a.bar
  p “bar”
end

a.bar # => “bar”
b.bar # MethodMissing Error
```

どうじゃ。 `a` という **インスタンスにメソッドを実装している** ということが分かったじゃろ

このことをよく覚えておくんぢゃ


# クラスもクラスのオブジェクト

Rubyはオブジェクト指向じゃ。Rubyの世界ではだいたいのものがオブジェクトつまり **何らかのクラスのインスタンス** じゃ。
先の例で出した `a` や `b` という変数は `MyClass` クラスのインスタンスじゃ。
`1` などの整数もIntegerクラスのインスタンスになっておる

そして、クラスそのものも `Class` というクラスのインスタンスなのじゃ。
つまり、先ほどの `MyClass` というクラスも `Class` クラスのインスタンスなのじゃ

ちなみに `Class` クラスも `Class` クラスのインスタンスじゃ。なんだか不思議ぢゃのう


# まとめると

さて、この２つの話を組み合わせてみよう
勘の良いお主はもう答えに気づいたかも知れんのう。ホッホッホ

先ほど、`a` というインスタンスにメソッドを定義したの。

```ruby
def a.bar
  p “bar”
end
```

これと同じようにな、 **`MyClass` という（`Class`クラスの）インスタンスにメソッドを定義する** のぢゃ。

```ruby
def MyClass.baz
  p “baz”
end

MyClass.baz # => “baz”
```

もう分かったの。
これが特異メソッドの正体じゃ。

- 特異メソッドとは、インスタンスに実装するメソッドである
- Rubyでは、クラスもインスタンスである
- よって、クラスに特異メソッドを実装すると、それはいわゆるクラスメソッドになる

ということだったんぢゃ

# おまけ

MyClassに関するコードを抜き出してみるぞ

```ruby
class MyClass
  def foo
    p “foo”
  end
end

def MyClass.baz
  p “baz”
end
```

これでちゃんと動くのじゃが、同じMyClassに関するコードなのじゃから、ひとまとめにしたほうが良いの。

```ruby
class MyClass
  def foo
    p “foo”
  end

  def MyClass.baz
    p “baz”
  end
end
```

うむ。
ところで `MyClass` の定義の中に `MyClass` と書くのはぢょうちょう（冗長）ぢゃな

そこで

```ruby
class MyClass
  def foo
    p “foo”
  end

  def self.baz
    p “baz”
  end
end
```

これでお主の見慣れた書き方になったのう。
めでたしめでたしぢゃ
見慣れないpythonファイルの正体(form.py,context_processors.py)【Django】

## はじめに
DjangoでWEBアプリを作っている時にform.pyやcontext_processors.pyという見慣れない名前のPythonファイルを作ったので調べてみました。

## form.py
どのような(データ型の)フォームを作るのかを記述するファイル。
どのようなテーブルを作るのかを記述するmodel.py的なノリ。
Djangoから提供されるFormクラスを使うとバリデーションを簡単に実装することができるというメリットがある。

以下form.pyの例

```python:form.py
from django import forms
 
class ContactForm(forms.Form):
    subject = forms.CharField(max_length=100)
    message = forms.CharField(max_length=1000)
    sender = forms.EmailField()
```
このform.pyをviews.pyで引きつぐことでフォームを作る。

```python:views.py
from django.shortcuts import render
from django.http.response import HttpResponse
from .forms import ContactForm #form.pyの引継ぎ
 
def index_template(request):
    form = ContactForm()
    return render(request, 'index.html', {'form': form})
```

HTMLファイルに`{{ form }}`と記述することで、指定したデータ型のフォームを作ることができる。

```html:form.html
<html>
  <body>
    <form>
      {{ form }}
    </form>
  </body>
</html>
```


ページにアクセスすると入力フォームが完成している。
ところが、まだ入力された情報をサーバーに伝えることはできない。
これを実現するために、`form`タグに`action`と`method`を指定して送る場所と送る方法を記述する。さらに、送信するために`submit`ボタンを配置する。
ただし、同じviewで入力された情報を受け取るばあには`action`は指定しなくてもよい。

```html:form.html
<html>
  <body>
    <form action="" method="POST">
      {% csrf_token %}
      {{ form }}
      <input type="submit" value="送信"/>
    </form>
  </body>
</html>
```

入力された情報の処理はviews.pyに記述する。
処理を追加したviews.pyは以下のようになる。

```python:views.py
def form_test(request):
    if request.method == "POST":
        form = MyForm(data=request.POST)  # ← 受け取ったPOSTデータを渡す
        if form.is_valid():  #受け取ったデータの正当性確認
            pass  #正しいデータを受け取った場合の処理
    else:  #methodが'POST'ではない = 最初のページ表示時の処理
        form = MyForm()
    return render(request, 'polls/form.html', {
        'form': form,
    })
```
正しいデータを受け取った後はDBなどにデータを登録し、別ページにリダイレクトするなどの処理が行われる。


### 参考サイト
[公式ドキュメント](https://docs.djangoproject.com/ja/2.2/topics/forms/)
[DjangoBrothers-フォームの扱い方-](https://djangobrothers.com/tutorials/memo_app/form/)
[SamuraiBrog-formを作ってみよう-](https://www.sejuku.net/blog/30742)
[Qiita-Djangoチュートリアル(5)-](https://qiita.com/maisuto/items/33dfeb58f5953d1c5fdf)

## context_processors.py


### 参考サイト
https://qiita.com/zabeth129/items/57c3e8a0f606633786b2
Netlifyを使ってかんたんレビュー環境作成

うちではnuxtjsやstorybook等使っているので、状態を簡単に共有できるこのサービスは非常に使い勝手がよい。
また、開発初学者でも簡単に利用できるのがとても良い。

## Netlifyとは
簡単に静的ファイルをホスティングできるサービス。
https://www.netlify.com/

## Netlifyのいいところ
- 基本無料
- 最初に設定すれば特にデプロイ作業発生しない
- リポジトリに更新がかかったことを検知、自動デプロイ
- ビルドコマンドを実行し生成後のファイルをホスティングできる

## STEP1 Gitプロバイダーに接続する
GitHub,GitLab,BitBucketが選択できる。
ホスティングしたいものがあるプロバイダを選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135336/84c6e6a5-d730-5ae9-5989-ed294e75114e.png)

## STEP2 リポジトリを選ぶ
ホスティングしたいものがあるRepository選択
![Create_a_new_site___Netlify.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135336/bcf7041a-b478-afa1-f9ea-40d42f7d7710.png)

## STEP3 リポジトリを選ぶ
- どのブランチをホスティングする？
- buildに必要なコマンドは？
- どのディレクトリを公開する？

と聞かれることは非常に少なく、これで完了。
URLが発行されるのでアクセスすれば、期待していた画面が表示されているだろう。

![Create_a_new_site___Netlify.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135336/5170a733-c192-36c0-80c2-4d3806a7abb2.png)


## 自動デプロイ機能
対象リポジトリのブランチに変化があった場合、状態を検知してbuildが走り自動的に公開される。
その情報は管理画面上からも確認ができる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135336/1787a484-7037-25b5-41d3-298fc90e54fd.png)
WorkManagerを停止させる

既にプロダクトで動いている WorkManager を停止させたいとき。

単純にWorkerを発火させるところをコメントアウトすれば解決！ にはなりません:worried:
この場合、新規ユーザーは問題ありませんが、既存ユーザーの場合が問題です。

**既存ユーザーの場合、既に Worker の Request が登録されていると、 Worker は動いてしまうので停止処理を入れてあげる** 必要があります。

Worker に登録されている かつ 登録されている Work のステータスがキューにあるか実行中の場合にその Work を停止させる処理の例です。

```kotlin

final ListenableFuture<List<WorkInfo>> listenableFuture =  WorkManager.getInstance(context).getWorkInfosForUniqueWork(MyWorker.UNIQUE_WORK_NAME);
try {
    final List<WorkInfo> workList = list.get();
    if (workList != null && workList.get(0) != null) {
        final WorkInfo.State status = workList.get(0).getState();
        if (status == WorkInfo.State.ENQUEUED || status == WorkInfo.State.RUNNING) {
            WorkManager.getInstance(context).cancelUniqueWork(MyWorker.UNIQUE_WORK_NAME);
        }
    }
} catch (ExecutionException | InterruptedException e) {
    e.printStackTrace();
}
```
上記のコードの流れは以下の通りです。

- getWorkInfosForUniqueWorkでWorkerのnameを指定して、ListenableFuture<List<WorkInfo>>型のlistenableFutureを取得
- list.get()でWorkInfoのリスト、workListを取得
- このworkListがnullでなければ、それはつまりMyWorkerのWorkが現在存在していることを意味する
- workList.get(0).getState()は先頭のWorkのステータス、statusを取得
statusが ENQUEUED または RUNNING の場合は、cancelUniqueWorkメソッドでそのWorkをキャンセルする
Ajax通信において、deleteメソッドを使う方法

モーダルウィンドウを以下の記事を参考にして実装した。
https://qiita.com/takachan_coding/items/9179cf361d0e92ae0bad

しかし、削除ボタンを押しても、削除ができなかったので、Ajax通信で削除ができるように実装しましたので、そのポイントについてアウトプットします。



# ソースコード

```js

$(function() {
  $(".delete-btn").on("click",function(){
    $('#overlay').fadeIn();
    $(document).on("click","#modal-close-btn",function(){
      $('#overlay').fadeOut();
    });
    $(document).on("click","#delete-comformation-btn",function(){
      let ProductID = $(this).data("product-id");

      $.ajax({
        url: "/products/" + ProductID,
        type: "POST",
        data: {"id":ProductID,"_method": "DELETE"} 
      })
    })
  });
});

```

# 実装のポイント
$.ajax()を使ってAjax通有心を行う際は、引数のtypeには、GETもしくはPOSTのHTTPメソッドしか使えない。そのため、今回は、以下の記事を参考にして、DELETEのHTTPメソッドを使えるようにしました。
https://qiita.com/u-dai/items/d43e932cd6d96c09b69a

ポイントとしては、_methodメソッドを使うことでした。詳しくは参考文献を参考にしていただきたいと思います。

# 動作状況
1.削除前のDB(id:146, name:phpが存在する)
https://gyazo.com/11089d30fb16a09fdedeb5fba9d2810e


2.モーダルウィンドォの表示
https://gyazo.com/7c121e408e768482174241c7825b0d00


3.削除ボタンを押すと、イベント発火しAjax通信開始する(カスタムデータidを取得し、コントローラへ送る)
https://gyazo.com/fc2c44be206ffc318a85999df10f149f
Gyazoで拡大撮影
https://gyazo.com/414fef8ecd55f0385c8b82842419c1b5


4.コントローラのdestroyアクションが作動する
https://gyazo.com/f28c7227a88989d7c97b06bcf5086397
Gyazoで拡大撮影
https://gyazo.com/487ba5f775f9cd5e5c212c58bedd1463


5.binding.pry解除後(削除後)のDB(id:146, name:phpが存在しない)
https://gyazo.com/69b3990e72b3d6618bbd6bd558db28f6
Gyazoでターミナルのログを拡大撮影
https://gyazo.com/c8e6bd5a5613cde6f04d14be8c7f5f39


このような感じで、無事Ajaxで削除機能を実装することができました。


＜参考文献＞
山本陽平『webを支える技術』(2010年、技術評論社)　99頁以下
dockerコンテナが起動しなかった件

ある初心者向け教材のサンプルコマンドを入力した際、コンテナが起動しなかったのでその原因について調べてみました。

打ち込んだコマンドは下記の通り。

```
docker run -d -p 80:80 --name myapp  php:7.0-apache
```

そしてこんな感じのエラーメッセージが表示されました。

```
Error starting userland proxy: Bind for 0.0.0.0:80: unexpected error (Failure EADDRINUSE).
```

80のポート番号がすでに使われていて発生したエラーらしい。
下記コマンドを入力する。

```
sudo lsof -i -P | grep "LISTEN"
```

TCP *:80 (LISTEN)と表示されるサービスがあったら停止させる。
今回は別のハンズオンで使ったnginxが生きていたので下記コマンドで止めてやりました。

```
sudo nginx -s stop
```

これで最初のコマンドが通ります。
【第一歩】Chrome Extensionを触ってみた

# Chrome Extensionを作りたい
ちょっとした思いつきでAPIを送るChrome Extension(Chrome拡張)を作りたくなったので少し調べてみたことをまとめます。

# 作ったファイル
* JavaScript
* JSON
* (将来的に)HTML

書いて今気づいたんですがintelliJじゃなくてもVS Codeとかでも書けそうですね。

```今回作ったファイル.
src/images/icon.png
src/bg.js
src/jquery-3.4.1.min.js
src/manifest.json
```

それぞれのファイルについて順にご紹介です。

# manifest.json
以下の公式サイトが一番分かり易かったです。
Manifest File Format: https://developer.chrome.com/extensions/manifest

もしGoogle先生で調べる場合は、調べたそのサイトがいつ書かれたものか、具体的には `manifest_version` が1か2か、自分が作りたいバージョンかどうか必ず確認してください。コピペしてきても全然動きません。
なお、 `manifest_version: 1` はChrome 18からは `deprecated(非推奨)` となっています。今、私のChromeは76だそうですからだいぶ昔ですね。

各項目の説明は、上記公式サイトが丁寧ですので割愛します。英語ですが頑張りましょう。

```manifest.json
{
  "name": "xt",
  "version": "0.1.0",
  "manifest_version": 2,
  "description": "chrome extension",
  "permissions": ["tabs"],
  "background": {
    "scripts": [
      "jquery-3.4.1.min.js",
      "bg.js"
    ]
  },
  // "content_scripts": [{
  //   "matches": ["*://*/*"],
  //   "js": [
  //     "content.js"
  //   ]
  // }],
  "browser_action": {
    "default_icon": "images/icon.png",
    "default_title": "xt"
  }
}
```
`content_scripts` はコメントアウトしてますが、"全てのWebページ"で適用させるための正規表現が微妙にムズかったので記載しています。
Match Patterns: https://developer.chrome.com/extensions/match_patterns

## コメントアウトできる
そう、コメントアウトできるんです。
本来のjson形式にはコメントアウトはありません。
intelliJにもVS CodeにもQiitaにもおこられてますが、Chrome Extensionは優秀なようでコメントアウトできます。やってみるもんですね。

ちなみに、 `content_scripts` はコメントアウトしてなくても特に問題ありません。その場合はcontent.jsは空ファイルでよいので置いといてください。


# bg.js
拡張機能のアイコンをクリックすると、現在のタブのURLを送信します。
普通のJavaScriptなのでこちらも特に説明はありません。

```
var script = function(){
    chrome.tabs.getSelected(window.id, function (tab) {
        console.log(tab.url)
        alert(tab.url);
        var url = "http://abcd.efgh/";
        var JSONdata = { url: tab.url };
        $.ajax({
            type : 'post',
            url : url,
            data : JSON.stringify(JSONdata),
            contentType: 'application/JSON',
            dataType : 'JSON',
            scriptCharset: 'utf-8',
            success : function(data) {
                // Success
                alert("success");
                alert(JSON.stringify(data));
                $("#response").html(JSON.stringify(data));
            },
            error : function(data) {
                // Error
                alert("error");
                alert(JSON.stringify(data));
                $("#response").html(JSON.stringify(data));
            }
        });
    });
};

(function(){
    chrome.browserAction.onClicked.addListener(script);
})();
```

console.logの出力はどこで確認できるかというと、
`拡張機能を管理` からそのChrome Extensionの `ビューを検証 バックグラウンド ページ` のリンクを押すと出てくる開発者ツールで確認できます。

# その他のファイル
* src/images/icon.png

このChrome Extensionのアイコンです。四角です。

* src/jquery-3.4.1.min.js

Ajaxを使用しているので読み込んでます。 `background.scripts` 内の読み込み順は注意してください。先にjQueryを読み込む必要があります。

---

触ってみた、なのでここまでです。manifest.jsonも簡単だし、あとはJavaScript(とHTMLかな？)なので想像していたよりかなり簡単ですね。
Let's Encrypt の証明書自動更新を有効にしたまま別ドメインにリダイレクトさせる

[Apache ＋ Let's Encrypt ＋ webroot で SSL サーバ証明書を自動更新させている環境](https://qiita.com/fallout/items/b4e1298b51bc6b72f0e2#%E5%B8%B8%E6%99%82-ssl-%E5%8C%96%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88)において、**証明書の自動更新を有効にしたまま別ドメインにリダイレクト**させたい時の設定方法です。

--------------------------------------------------------------------------------

## Apache の VirtualHost 設定

webroot プラグインは、ドキュメントルートの下に一時的に `.well-known/acme-challenge` というディレクトリを作成し、そこを使って認証作業をしてくれるものです。

ですので、Apache の `mod_rewrite` を利用し、**`.well-known/acme-challenge` へのリクエスト時のみリダイレクトしない**ようにしてやれば良いです。以下は…

- `http://example.com/path?query` ⇒ `http://example.net/path?query`
- `https://example.com/path?query` ⇒ `https://example.org/path?query`

…とリダイレクトさせる例です。


```apache
<VirtualHost *:80>
    ServerName example.com
    ServerAlias www.example.com
    DocumentRoot /path/to/document/root

    RewriteEngine On
    RewriteCond %{REQUEST_URI} !^/\.well-known/acme-challenge/
    RewriteRule ^.*$ http://example.net%{REQUEST_URI} [R=301,L,NE]
</VirtualHost>

<Virtualhost *:443>
    ServerName example.com
    ServerAlias www.example.com
    DocumentRoot /path/to/document/root

    RewriteEngine On
    RewriteCond %{REQUEST_URI} !^/\.well-known/acme-challenge/
    RewriteRule ^.*$ https://example.org%{REQUEST_URI} [R=301,L,NE]

    SSLEngine On
    SSLCertificateFile /etc/letsencrypt/live/example.com/fullchain.pem
    SSLCertificateKeyFile /etc/letsencrypt/live/example.com/privkey.pem
</VirtualHost>
```
mysql自動バックアップ

## 環境
mysql 8.0.17 
docker 19.03.1


## 方法

まず、mysqlのコンテナの中に入って、doBackUp.shを作成する
その中身は、

```
chmod 755 doBackUp.sh
/usr/bin/mysqldump -u root -psecret aichi > ./var/lib/mysql/backUp.sql
```

crontabの設定を以下のように記述(毎日12:15分に自動バックアップ)

```
15 12 * * * /usr/bin/docker exec -u root -t mysql  /bin/sh ./doBackUp.sh
```

sqlファイルが生成される場所について
docker-compose.ymlのvolumesの内容が以下の場合、

```
    volumes:
      - ./mysql/data:/var/lib/mysql
```

ホスト側では./mysql/data、コンテナ側では/var/lib/mysql
でデータが共有されている。
だから、シェルスクリプトであのようなパスを指定した。
Cloud Deployment Managerを使ってCloud Pub/Subをセットアップする

[既に同じ趣旨の記事を書いている方](https://qiita.com/kazutomo/items/889975f2c2e9a2501b68)は居たのですが、私の要件の場合「topicとsubscriptionを同時に設定したい」案件だったので、設定ファイルをまとめたいと考えていました。


```yaml
resources:
  - name: sample-pubsub-topic
    type: pubsub.v1.topic
    properties:
      topic: sample-pubsub-topic
  - name: sample-pubsub-subscription
    type: pubsub.v1.subscription
    properties:
      subscription: sample-pubsub-subscription
      # [PROJECT_NAME] は実際のGCPプロジェクト名に置き換えてください
      topic: projects/[PROJECT_NAME]/topics/api-sample-pubsub-topic
      ackDeadlineSeconds: 10
    metadata:
      dependsOn:
        - sample-pubsub-topic
```

ここで注意すべきは、「subscriptionはtopicが存在することが前提なので、同時には作成できない」ということです。Cloud Deployment Managerの[構文リファレンス](https://cloud.google.com/deployment-manager/docs/configuration/syntax-reference?hl=ja)にある通り、 `dependsOn` で依存関係を記述する必要があります。

> `dependsOn` プロパティはリソース間に明示的な依存関係を作成します。たとえば、A リソースが B リソースに依存するように指定すると、A リソースが作成される前に必ず B リソースが作成されます。

もし指定しない場合、以下のようなエラーが発生します。

> "ResourceErrorMessage":{"code":404,"message":"Resource not found (resource=sample-pubsub-topic)."
Entity Frameworkでレコードの取得時間が通常のSQL実行より異様に遅かった話


EntityFrameworkを利用して1000万件くらいあるテーブルからレコード取得したら10秒くらいかかった。
検索条件はインデックス張ってる1カラムをキーとして取得しているだけ。

なぜ？

EntityFrameworkが実行しているSQLをOracle SQL Developerで叩くと0.1秒で返って来る。

これはおかしい。

# 最初に原因
Entityとして定義したクラスの定義とDBのテーブル定義に乖離があったため、遅くなっていたらしい。

下記ページを見て解決しました。
~~ttps://codeday.me/jp/qa/20181211/75824.html~~
[20210520]リンク先が消えていたのでリンク削除

# やったこと

CHARカラムにタイプと長さを書いた

``` sample.cs
        [Column(TypeName = "char")]
        [StringLength(6)]
        public string SAMPLE_CHAR_CLM { get; set; }
```

VARCHARカラムに長さを書いた

``` sample.cs
        [MaxLength(10)]
        public string SAMPLE_VARCHAR_CLM { get; set; }
```

null許可の数値、日付カラムをnullableにした

``` sample.cs
        public long? SAMPLE_NULLABLE_NUM{ get; set; }
        public DateTime? SAMPLE_NULLABLE_DATE { get; set; }
```

# 何故気付いたか
恐らく、レコードが大量にあったから。
コードファーストで作っている場合は発生しないと思うが、既存のテーブルがあってそれに合わせてEntityクラスを作る場合、同様の問題が発生する可能性がある。
このときEntityFrameworkは不整合が発生した各カラムについて全レコードアクセスをしてからレコードを取得していて、そのせいでレコード取得に時間がかかっていると想像。

レコードが少なければアクセスも少ないため、この問題に気付きにくいのだろう。
MacでTyporaのショートカット

最近気に入っているMarkdownのテキストエディタのTypora。
Macで使っている時のショートコマンドを、自分用にメモ。
主に、表について。

Typora version 0.9.9.27.4

# 編集

### ソースコードモードのON/OFF
`command` + `t`

### 新規タブ
`command` + `t`

# 表
### 表の挿入
`option` + `command` + `t`

### 下に行を挿入
`command` + `return`

### カラム内での改行
`shift` + `return`

### 行の削除
`shift` + `command` + `delete`
IBM Cloud CLI インストール CentOS7

# IBM Cloud CLI インストール CentOS7(自分用作業メモ)
##### 参考文献
https://console.bluemix.net/docs/cli/reference/ibmcloud/download_cli.html#install_use



#### 1.install

``` curl -fsSL https://clis.ng.bluemix.net/install/linux | sh
```

```
[root@develop ~]# curl -fsSL https://clis.ng.bluemix.net/install/linux | sh
Current platform is linux64. Downloading corresponding IBM Cloud CLI...
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   120    0   120    0     0    156      0 --:--:-- --:--:-- --:--:--   156
100 15.0M  100 15.0M    0     0   969k      0  0:00:15  0:00:15 --:--:-- 1370k
Download complete. Executing installer...
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100    40    0    40    0     0     50      0 --:--:-- --:--:-- --:--:--    50
Bluemix_CLI/
Bluemix_CLI/autocomplete/
Bluemix_CLI/autocomplete/bash_autocomplete
Bluemix_CLI/autocomplete/zsh_autocomplete
Bluemix_CLI/install
Bluemix_CLI/install_bluemix_cli
Bluemix_CLI/bin/
Bluemix_CLI/bin/ibmcloud-analytics
Bluemix_CLI/bin/ibmcloud
Bluemix_CLI/bin/cfcli/
Bluemix_CLI/bin/cfcli/cf
Bluemix_CLI/bin/LICENSE
Bluemix_CLI/bin/NOTICE
Bluemix_CLI/uninstall
Copying files ...
The installation completed successfully.
To get started, open a terminal window and enter "ibmcloud help". Refer to "http://ibm.biz/cli-auto-completion" if you want to enable auto-completion for zsh or bash.

IBM Cloud CLI has a plug-in framework to extend its capability. To install the recommended plug-ins and dependencies, run the install script from "http://ibm.biz/install-idt". For additional plug-in details, see "http://ibm.biz/install-cli-plugin".

IBM Cloud CLI automatically collects data for usage analysis and user experience improvement. To disable the collecting, run "ibmcloud config --usage-stats-collect false"

To uninstall, run "/usr/local/ibmcloud/uninstall"
Install complete.
```

##### 2. オートコンプリート設定

```
[root@develop ~]# cat ~/.bash_profile
# .bash_profile

## 以下行を追加
. /usr/local/ibmcloud/autocomplete/bash_autocomplete
```
マウスポインタとスクロールの座標取得に関すること

# はじめに

HTML、CSS、JavaScriptでマウスポインタとスクロールの座標の取得に関してです。
実装するまでに思ったより時間がかかってしまったので、できたものをメモ的な感じで、この記事にまとめました。

結果的に、以下のようなものができました。
![test.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309633/40c76ffd-8b4e-7daf-504f-346947fa9421.gif)

右上に、マウスポインタとスクロールの座標値が表示されています。
縦にスクロールすると、スクロールのYの値に応じて、ボックスが動きます。
また、マウスポインタのx座標が500を境に背景の色が変わるようになっています。

# ソースコード

```index.html
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>マウスポインタとスクロールの座標変化</title>
	<link rel="stylesheet" href="styles.css">
</head>
<body>
	<div class="coordinate">
		<div class="P_X">Pointer_X</div>
		<div class="P_Y">Pointer_Y</div>
		<div class="S_X">Scroll_X</div>
		<div class="S_Y">Scroll_Y</div>
	</div>

	<div class="scrollX_box"></div>

	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>

	<script src="main.js"></script>
</body>
</html>
```

```styles.css
body{
	margin:0;
	background-color:aquamarine;
}

.coordinate{
	z-index:1;
	width:100%;
	display:flex;
	flex-direction:column;
	text-align:right;
	position:fixed;
}

.scrollX_box{
	width:2000px;
	height:300px;
	background-color:pink;
}

.box{
	width:300px;
	height:300px;
}

.box:nth-of-type(3n){
	background-color:orange;
}

.box:nth-of-type(3n+1){
	background-color:skyblue;
}

.box:nth-of-type(3n+2){
	background-color:tomato;
}

.move{
	transition-duration:2s;
	transform:translateX(500px);
}
```

```main.js
"use strict";

{
	const UPDATE=window.setInterval(update,20);

	const BODY=document.body;

	const P_X=document.querySelector(".P_X");
	const P_Y=document.querySelector(".P_Y");
	const S_X=document.querySelector(".S_X");
	const S_Y=document.querySelector(".S_Y");

	const BOXES=document.querySelectorAll(".box");

	let px,py;
	let sx,sy;

	//マウスポインタの座標の取得
	window.addEventListener("mousemove",(e)=>{
		px=e.pageX;
		py=e.pageY;
		
		P_X.textContent="Pointer_X:"+px;
		P_Y.textContent="Pointer_Y:"+py;
	}); 

	//スクロールの座標の取得
	window.addEventListener("scroll",(e)=>{
		sx=pageXOffset;
		sy=pageYOffset;

		S_X.textContent="Scroll_X:"+sx;
		S_Y.textContent="Scroll_Y:"+sy;
	},{passive:true});


	function update(){
		//縦スクロールによって、ボックスが移動する処理
		for(let i=0;i<BOXES.length;i++){
			if((i+1)*300<=sy && sy<(i+2)*300){
				BOXES[i].classList.add("move");
			}else{
				BOXES[i].classList.remove("move");
			}
		}

		//マウスポインタのx座標が500を境に背景の色が変わる処理
		if(px<500){
			BODY.style.backgroundColor="aquamarine";
		}else{
			BODY.style.backgroundColor="limegreen";
		}
	}
}
```

これでやっとうまく動きました！
やりたいことができそうで、ほっとしています。:blush:

ここまで読んでいただき、ありがとうございました。
pandas.read_sqlでタイムアウト例外処理を実装する方法

`pandas.read_sql`でタイムアウト例外を実装する方法をメモします。
`pandas.read_sql`にはタイムアウトに関するパラメータが存在しないので、他の方法でタイムアウト例外処理を実装する必要があります。
今回は`func_timeout`ライブラリを使うことでタイムアウト例外処理を実装できました。

# 環境

- Python: 3.6.5
- PostgreSQL: 10.4
- psycopg2: 2.7.5 (dt dec pq3 ext lo64)
- pandas: 0.24.2
- func_timeout: 4.3.5

# 定数定義
DB接続情報とタイムアウト上限値を設定します。

```python
# PostgreSQLの接続情報dict作成
param = {
    'port': '5432',
    'user': '*****',
    'password': '*****',
    'host': 'localhost',
    'dbname': '*****'
}
# timeoutを設定
timeout = 600 # pandas.read_sqlでのTIMEOUT上限(s)
```
# メソッド定義
`pandas.read_sql`にタイムアウト例外処理を実装した、`exec_query`を定義します。

```python
def exec_query(param: dict, query: str, timeout: int) -> pd.DataFrame:
    """
    Redshiftにクエリを発行し、実行結果を取得するメソッド。

    Parameters
    ----------
    param : dict
        接続情報のdict。
    query : string
        クエリ文字列。
    timeout : int
        タイムアウト上限(s)。

    Returns
    ----------
    result : pd.DataFrame
        実行結果のDataFrame。
    """
    with psycopg2.connect(**param) as conn:
        
        try:
            result = func_timeout(timeout, pd.read_sql, args=(query, conn))
            print('read_sql could complete.')
        # タイムアウト例外処理
        except FunctionTimedOut:
            print(f'read_sql could not complete within {timeout} seconds, hence terminated.')
            result = None
        # 上記以外の例外処理
        except Exception as e:
            print(e)
            result = None
    
    conn.close()
    print('connection object status is :', conn)
    return result
```

# クエリ発行
DBに発行したいクエリ文字列を先ほど定義した`exec_query`の引数として実行します。

```python
# クエリ文字列作成
query = '''
select 1 from hogefuga
'''
# クエリ発行、実行結果を取得
result = exec_query(param, query, timeout)
```

# 最後に
タイムアウトくらい実装しておいてくれよなぁと思う今日この頃です。

# 参考
https://stackoverflow.com/questions/56473948/is-there-any-way-to-put-timeout-in-pandas-read-sql-function
【CSS】学習メモ（文字・背景・padding・margin・float）



タグの記述方法で迷ったら、リファレンスを読む↓
[CSSクイックリファレンス](http://www.htmq.com/css3/)

#基本的な構造
```sample.css
body {
  font-family: "Avenir Next";
}

li {
  list-style: none;
}

.header {
  background-color: #26d0c9;
  color: #fff;
  height: 90px;
}

.header-logo {
  float: left;
  font-size: 36px;
  padding: 20px 40px;
}

.header-list li {
  float: left;
  padding: 33px 20px;
}

.main {
  padding: 100px 80px;
}

.copy-container h1 {
  font-size: 140px;
}

.copy-container h2 {
  font-size: 60px;
}

.copy-container span {
  color: #ff4a4a;
}

.contents {
  height: 500px;
  margin-top: 100px;
}

.section-title {
  border-bottom: 2px solid #dee7ec;
  font-size: 28px;
  padding-bottom: 15px;
  margin-bottom: 50px;
}

.contents-item {
  float: left;
  margin-right: 40px;
}

.contents-item p {
  font-size: 24px;
  margin-top: 30px;
}

.contact-form {
  padding-top: 100px;
}

/* inputとtextareaのCSSを指定してください */
input, textarea{
  width: 400px;
  margin-top: 10px;
  margin-bottom: 30px;
  padding:20px;
  font-size: 18px;
  border: 1px solid #dee7ec;
}

/* contact-submitのCSSを指定してください */
.contact-submit{
  background-color: #dee7ec;
  color: #889eab;
}

.footer {
  background-color: #2f5167;
  color: #fff;
  height: 120px;
  padding: 40px;
}

.footer-logo {
  float: left;
  font-size: 32px;
}

.footer-list {
  float: right;
}

.footer-list li {
  padding-bottom: 20px;
}
```

#基本文法

タグを指定する際には点はつけない
`body {
  font-family: "Avenir Next";
}`

クラスを指定する際には点をつける
`.footer-list {
  float: right;
}`


#文字・背景
font-size : 文字の大きさ
color: 文字の色
background-color: 背景の色
font-family:　フォントの種類


#サイズ

height :高さ
width: 横の長さ

#padding・margin
![1495194943_image2.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430338/f7e61c9e-d85c-52b7-596f-d1b662f62772.jpeg)

引用；https://www.webprofessional.jp/set-css-margins-padding-cool-layout-tricks/

padding: ボーダーの内側
border: paddingとmarginの間
margin: ボーダーの外側

` padding: 10px（上） 10px（右） 10px（下） 10px（左）;`
` margin: 10px（上下）  10px（左右）;`
` padding-top(１箇所指定): 10px ;`
` border: 1px(太さ) solid（線の種類） #dee7ec（色）;`

#float
縦に並んでいるものを一列に横に並べるときに使う

float: right;
float: left;

#指定方法

クラス「footer-list」の直後のリスト
`.footer-list li {
}`
初心者がData Portal (旧Data Studio) 入門するときに見るリンク集

Data Portal使い出したときに使ったリンクまとめました。
GUIツールなので動画系から入るのがおすすめです。

## 公式ページ

**まずはこのあたりの動画一通りみるとなんとなくレポートつくれるようになる**
**[動画を見る](https://support.google.com/datastudio/answer/6390659?hl=ja)**

**BQへのつなぎ方がいまいちわからない場合はこのあたりに詳しく書いてある**
**[データポータルを使用して BigQuery データを視覚化する](https://cloud.google.com/bigquery/docs/visualize-data-studio?hl=ja)**

**Data Portalでできるレポートサンプルみたい場合はここ**
**[レポートギャラリー](https://datastudiogallery.appspot.com/gallery)**

**計算フィールド周りはよく調べる**
**[計算フィールド](https://support.google.com/datastudio/topic/7570421?hl=ja&ref_topic=7441655)**

**パラメータについてもよく調べる**
**[データソース パラメータ](https://support.google.com/datastudio/answer/9002005?hl=ja)**

**その他わからないことはここから探る**
**[公式ヘルプページトップ](https://support.google.com/datastudio)**


## もっと知りたい人向け記事
**BQ + Data Portalのシンプルなレポート作成例** 
**[GCP上のデータを可視化するには？データポータル（旧データスタジオ）で簡単レポート作成](https://www.isoroot.jp/blog/1677/)**

**BQ + Data Portalでメッシのレポート作成例**
**[メッシの全ゴールデータを、BigQueryとData Portalで可視化する](https://nishipy.com/archives/933)**

**アユダンテさんのData Portal関連記事**
**[アユダンテ x Data Portal](https://ayudante.jp/column/google-data-studio)**

**グロラボさんのデータポータル周りの記事**
**[グロラボ x Data Portal](https://ec-growth-lab.com/tag/datapotal/)**
CodableでのValueObject利用

iOSDC Japan 2019にて、@maguhiro による素晴らしいLTがありました。
[値オブジェクトへのCodable対応 by maguhiro | トーク | iOSDC Japan 2019 #iosdc - fortee.jp](https://fortee.jp/iosdc-japan-2019/proposal/3b8c98a2-4861-449e-a2c9-e1327db431e2)

この投稿では、筆者が同様の実装をする場合によくやる方法を、別解として紹介します。

## 実装

```swift
struct User: Codable {
    var id: UserID
    var name: String
}

struct UserID: Codable, RawRepresentable {
    var rawValue: Int
    
    init(rawValue: Int) {
        self.rawValue = rawValue
    }
}

do {
    let json = """
    {
        "id": 1,
        "name": "administrator"
    }
    """.data(using: .utf8)!
    
    let user = try JSONDecoder().decode(User.self, from: json)
    print("id: \(user.id.rawValue), name: \(user.name)") // id: 1, name: administrator
} catch {
    print(error)
}

do {
    let user = User(id: .init(rawValue: 2), name: "member")
    
    let json = try JSONEncoder().encode(user)
    print(String(data: json, encoding: .utf8)!) // {"id":2,"name":"member"}
} catch {
    print(error)
}
```

## 解説

`RawRepresentable`の`RawValue`が[特定の型](https://github.com/apple/swift/blob/da61cc8cdf7aa2bfb3ab03200c52c4d371dc6751/stdlib/public/core/Codable.swift.gyb#L13-L15)だった場合、`Encodable`, `Decodable`のデフォルト実装がされています。

https://github.com/apple/swift/blob/da61cc8cdf7aa2bfb3ab03200c52c4d371dc6751/stdlib/public/core/Codable.swift.gyb#L1662-L1695

これを利用することで、`init(from:)`, `encode(to:)` を自分で実装する必要が無くなります。
デフォルト実装の内容は @maguhiro のスライドのものと同様ですね。
WARNING:MySQL Strict Mode is not set for database connection 'default'の改善方法

##　(mysql.W002) MySQL Strict Mode is not set for database connection 'default'が出た時の対処法

settings.pyのDATABASESのdefaultにOPTIONSを追加する。

```
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'my_database',
        'OPTIONS': {
            'init_command': "SET sql_mode='STRICT_TRANS_TABLES'",
        },
    }
}

```

## 参考文献
https://django-mysql.readthedocs.io/en/latest/checks.html
リンクをクリックするとsafariのブラウザが開いてしまう問題を解消する方法

# リンクをクリックするとsafariのブラウザが開いてしまう問題

urlをクリックすると、なぜが自動でsafariが開いてしまう。
https://gyazo.com/d4de45339ecbfb194a980cc27455c4b4

safariではなく、GoogleChromeやFirefoxのブラウザを開きたい場合、どうすればよいだろうか。

# 解決方法
設定をGoogleChromeやFirefoxのブラウザにしてあげれば解決できる。

手順動画
「システム環境設定」から「一般」をクリックする。
https://gyazo.com/09075d3e7b2fb1c22feda3952881d635


プルダウンで設定したいブラウザを選択する。
https://gyazo.com/1f4b4084959d520d05f334dfbe7d7f4a

設定したブラウザで開けるかどうかを確認する。
https://gyazo.com/387007e0dbc266b053b74b80da7320c3
Laravel RFC違反しているメールアドレスをサクッと探すtips

メール送信処理でRFC違反のメールアドレスが混じっていたため、メール送信エラーとなりました。
とりあえず、どのメールアドレスが規約違反になっているのか知りたかったのでtinkerでサクッと探せるコードを用意しました。

```shell-session
$ php artisan tinker
```

```php
\App\User::pluck('email', 'id')->each(function ($email, $id) {
    try {
        \Validator::validate(['email' => $email], ['email' => ['email', 'nullable']]);
    } catch (\Exception $e) {
        echo sprintf('users.id: %d, users.email: %s, error: %s', $id, $email, $e->getMessage()) . PHP_EOL;
    }
})->count();
```

- [Validator::validate](https://laravel.com/api/6.x/Illuminate/Validation/Factory.html#method_validate)
- [メールの送受信ができない!? RFC違反メールアドレスを知っていますか？](https://www.asobou.co.jp/blog/web/mail-rfc)
- [wiki メールアドレス](https://ja.wikipedia.org/wiki/メールアドレス)
- [ケータイ各社のメールアドレスについて改めてまとめてみました](http://ke-tai.org/blog/2009/05/29/ketaimailmatome)

## 続編

続きの記事を書きました！

[Laravel RFC違反のメールアドレスにメール送信できるようにする](https://qiita.com/ucan-lab/items/e86eb725facd38467a60)
CWLで、出力ファイルやディレクトリがどんな構造かわからないときに、調べる方法

# 概要

出力ファイルがどのようになっているか？
出力されるのがディレクトリだが、その構造がわからないので、 `outputs` で指定するべきものを
記述する方法がわからないときがある

# 結論

CWLが実行されたディレクトリにあるものを全部とってきてしまう。

```cwl
outputs:
  out:
    type: Directory
    outputBinding:
      glob: $(runtime.outdir)
```

とりあえず、何がでてくるかわからないときは、以下のようにして、すべてをキャプチャするという手がある

ツールがうまく言った場合、ランダムな名前のディレクトリが出力されるので、

```
ls -ltr
```

などで、タイムスタンプが新しいものを探す。

TODO:
サンプルを作る
Rails tutrialでつまずいたところ(4章)

Rails tutrialを一通りやったのですが難しい。。。
RubyとRailsの内容を備忘録として残していきます。

###カスタムヘルパー(4.1.2)
新しく作ったメソッドのことをカスタムヘルパーと呼ぶ。
この時、`app/helpers`の位置に作成する。

###式展開(interpolation) (4.2.2)
ただの分配法則
以下のように変数に代入(assign)し、要素を分配する事で利用できる。
分配する変数に対して`#{}`という特殊な構文を使い分配する。
ただし、注意することは**Rubyはシングルクォート文字列の中では式展開を行わない**

 `first_name = "Michael"    # 変数の代入
 →"Michael"
 "#{first_name} Hartl"     # 文字列の式展開
 →"Michael Hartl"`

###メソッドの定義
メソッドを定義する際に引数に対し、次のようにデフォルト値を定める事で、変数に引数を渡すことも渡さないこともできる。

`def string_message(str = '')`

*ここで、Rubyのメソッドには「暗黙の戻り値がある」ことにご注意ください。これは、メソッド内で最後に評価された式の値が自動的に返されることを意味します (訳注: メソッドで戻り値を明示的に指定しなかった場合の動作です)。この場合、引数のstrが空かどうかに応じて、2つのメッセージ文字列のうちのいずれかを返します。もちろん、Rubyでは戻り値を明示的に指定することもできます。次のメソッドは上のメソッドと同じ結果を返します。

###ハッシュ
配列と同じように扱うことができるオブジェクト。**相違点はインデックスとして整数値以外のものも使える点とハッシュでは要素の「並び順」が保証されないという点**
ハッシュのインデックス (キー) は、通常何らかのオブジェクトになる。

/>>user = {}                          # {}は空のハッシュ
 =>{}
 />>user["first_name"] = "Michael"     # キーが "first_name" で値が "Michael"
 =>"Michael"
 />>user["last_name"] = "Hartl"        # キーが "last_name" で値が "Hartl"
=>"Hartl"
 />>user["first_name"]                 # 要素へのアクセスは配列の場合と似ている
 =>"Michael"
 />>user                               # ハッシュのリテラル表記
 =>{"last_name"=>"Hartl", "first_name"=>"Michael"}`

ハッシュロケット　`=> `を用いると次のように上の式が簡略化される
/>>user = { "first_name" => "Michael", "last_name" => "Hartl" }
=> {"last_name"=>"Hartl", "first_name"=>"Michael"}`

さらに慣習としてシンボルを用いることが多い。

/>> h1 = { :name => "Michael Hartl", :email => "michael@example.com" }
=> {:name=>"Michael Hartl", :email=>"michael@example.com"}
/>> h2 = { name: "Michael Hartl", email: "michael@example.com" }
=> {:name=>"Michael Hartl", :email=>"michael@example.com"}
/>> h1 == h2
=> true`
Pygameを使ってPongを作った

#初めに
ゲームAIとかでよく見るボールをラケットで打つPongをPythonで簡単に作れるらしかったので、作ってみました。もとからあるゲームを作る意味があまりない上に、普通はゲームをPython以外の言語で作ることが多いので、需要あるのかなあとは思います。
# 基本仕様
あまり複雑ではないゲームではないです。しいて言うならボールが壁に衝突したとき、もしくはラケットに衝突したときに衝突方向の速度成分を反転させることくらいです。
## プログラム本体
```Python3
import pygame
from pygame.locals import *
import sys
import math
import random

def main():
    (w, h) = (300, 200) # window size
    (x, y) = (10, h//2) # racket center
    (bx, by) = (w//2, h//2)
    vx, vy = 8, 5
    
    pygame.init() # initialize pygame
    pygame.display.set_mode((w, h)) # set screen
    screen = pygame.display.get_surface()
    
    pygame.mixer.init(frequency = 44100) # initial setting
    pygame.mixer.music.load("./hit1.mp3") # hit sound
    
    while (1):                            
        pygame.display.update() # update display
        pygame.time.wait(30) # interval of updating
        screen.fill((0, 0, 0, 0)) # fill screen with black R:0 G:0 B:0
        
        # racket
        pygame.draw.line(screen, (255, 255, 255), (x, y-20), (x, y+20), 10)
        # ball
        pygame.draw.line(screen, (255, 0, 0), (bx-3, by), (bx+3, by), 8)
        
        pressed_key = pygame.key.get_pressed()
        # racket movement
        if pressed_key[K_UP]:
            y -= 10
        if pressed_key[K_DOWN]:
            y += 10
        
        # racket inside window
        if y < 20:
            y = 20
        if y > h-20:
            y = h-20
            
        # ball movement
        bx += vx
        by += vy
        
        # ball inside window
        if (bx > w and vx > 0):
            vx = -vx   
        if (0 > by and vy < 0) or (by > h and vy > 0):
            vy = -vy
        
        # racket hit
        if (y-30 < by < y+30 and vx < 0 and 7 < bx < 15):
            vx = -vx
            pygame.mixer.music.play(1)
        
        # ball went outside
        if bx < -50:
            pygame.time.wait(1000)
            bx, by = (w//2, h//2)
            theta = 2*math.pi*random.random()
            vx = int(math.cos(theta) * 7) + 2*math.cos(theta)/abs(math.cos(theta))
            vy = int(math.sin(theta) * 7) + 2*math.sin(theta)/abs(math.sin(theta))
        
        for event in pygame.event.get():
            # close button pushed
            if event.type == QUIT:
                pygame.quit()
                sys.exit()
            
            # escape key pressed
            if event.type == KEYDOWN:
                if event.key == K_ESCAPE:
                    pygame.quit()
                    sys.exit()
    
if __name__ == '__main__':
    main()
```
# おわりに
本格的にゲームを作りたいならPython以外の言語のほうが良さそうですね。簡単な2Dゲームなら作れそうなので、今後機会があればやってみようと思います。
public と private 

publicとprivateとfinalについて

勉強するときさらっとしか触れてなくて理解がぬるかったので復習。

public、privateはクラスやメソッドの先頭につける修飾子ですね笑

それぞれの制限について書きます。

public 
これは簡単に言うとどこでも使えるやつです笑

例えばpublicのメソッドが書いてあるクラスをAクラスとして、そのメソッドのないクラスをBクラスとするなら、AクラスのpublicメソッドはBクラスでnewすることなく、Aクラス名.publicのメソッドで使うことができます。

private
じゃあAクラスのメソッドがprivateだった場合は他のクラスで使うことができないんですよね。
newしてやれば使うことは出来るんですけど、privateで書かれてる処理は別クラスで使われたくない理由があるので、なるべくやんない、もしくはどうしても使いたいならpublicしちゃうのを勧めます。
そんな必要なメソッドなら他でも必要になりそうですしね笑

まあそんな感じでクラスに修飾子をつけるときはそんなことを頭に入れながら作るといいと思います笑笑
Adobe Illustrator CS5, CS5.1が終了時にエラーを出す場合の対処法

`ScriptingSupport.aip`を移動すればいい、という情報があったので試したらファイルメニューが使えなくなった。
その問題の対処方の備忘録。

# 方法
起動中ならIllustratorを終了。

```
Adobe Illustrator CS5.1
└── プラグイン
    └── 機能拡張
        ├── ScriptingSupport.aip
        └── Scripts Menu.aip
        └── Services.aip
    ...
...
```
`ScriptingSupport.aip`と`Scripts Menu.aip`を適当に移動。
`使用停止プラグイン`*フォルダを作って移動するなど。*
そして起動すれば直っている。
`Services.aip`関連のエラーが出るならそれも移動する。


# 参考
http://blog.mokyn.com/2018/01/osxillustrator-cs5.html
https://forums.adobe.com/thread/1504228
http://seigi.accsnet.ne.jp/sigh/blog/?p=10072
Windows10 ドライバ の インストール が 正常 に 行われないとき の 解決法

# 目的

- Windows10にて接続機器のドライバが正常に取得できない時の対処法を知る

# 免責事項

- **本作業はWindows10を強制的に署名の無いドライバでもインストール可能になるように設定して作業を行います。**
- **Windows10に備わっている機能を使用して作業を行いますが、署名の無いドライバは悪質なドライバの可能性があります。**
- **怪しい機器のドライバは本記事の方法でインストールを行わないことを強くおススメします。**
- **筆者は本方法で問題を解決しましたが、会社や客先貸与PCで本作業を実施する場合は上司や管理者に相談の上、実施することをお勧めします。**
- **本件につきまして皆さんに何らかの不都合が生じた場合でも筆者は責任を負いかねますのでご了承ください**。
- 本ページ最後に筆者が参考にした情報をまとめます。本投稿だけでなく、こちも参考にしてください。他者様のページも参考に上司や管理者に相談すると、より作業許可が下りやすいかと思います。

# この記事のターゲット

- Windows10にうまくドライバが入らず困っている方
- Windows7などで使用していた時は問題なく接続されていた機器のドライバがWindows10ではうまくインストールできない方
- デバイスマネージャで接続した機器が「その他のドライバ」などに記載され、アイコンの横にビックリマークが表示されている方
- 何をやってもドライバがうまくインストールされず、PCをたたき割りたくなっている方

# 原因(筆者主観)

- おそらくWindows10が署名の無いドライバをインストールしないようになったこと
- Windows10からセキュリティが厳しくなったことにより今まで使用できていたドライバのインストールが意図的にブロックされるようになっている
- 会社で使用する専用接続機器のドライバがWindows10に対応していない場合、ドライバ本体に署名が付与されていない可能性が高い

# 実施概要

1. テストモードでWindows10を起動させる
1. ドライバが必要な機器をPCに接続する

# 実施詳細

※本手順を最後まで先に読み、注意してあせらず実施すると尚良い。  
※途中で入力キーややクリックする部分を間違えてもあせらず、最初からやり直すと良い。  
※「間違えてもやり直せる」という心の余裕をもって実施しよう！

1. テストモードでWindows10を起動させる（テストモードへは「更新とセキュリティ」→「回復」→「PCの起動をカスタマイズする」の「今すぐ再起動する」をクリックしてもよい）
  1. 通常通りWindows10を起動させる
  1. ノートパソコンの場合、外部接続のキーボーなどは外し、本体のキーボードを使用する。
  1. Shiftを押しながら電源ボタンマークをクリックする。
    ![ドライバ_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/9c3caaf0-0f8f-be08-ad18-5c7badb22151.png)
  1. 画面に「お待ちください」と出るので再起動するまで待つ。
  1. オプション選択画面が表示されたら「トラブルシューティング」をクリックする。
  1. トラブルシューティングのメニュー画面で「詳細オプション」をクリックする。
  1. 画面下の方の「その他の修復オプションを表示」をクリックする。
  1. 「スタートアップ設定」をクリックする。
  1. 「再起動」のボタンをクリックする。  
  ※この先からノートパソコンの場合は本体のキーボードしか入力を受け付けなくなるので注意する。  
  ※サブディスプレイへの出力も行われなくなるので注意する。
  1. 再起動後スタートアップ設定が開くので、キーボードで`7`を入力する。
  1. いつもの起動と同じようにWindows10が起動する。
1. ドライバが必要な機器をPCに接続する
  1. ドライバをインストールしたい機器をPCに接続する。
  1. デバイスマネージャでが該当の危機が正常な接続名で表示されアイコンにビックリマークがついていないことを確認する。
  1. 正常な機器名で表示されていれば作業完了
  1. 現在のドライバインストールPCは署名なしドライバでもインストールできてしまう状態なので、通常通りPCを再起動して署名なしドライバをインストールできないような設定でWindows10を起動させる。

# 参考サイトまとめ

検索エンジンにて「windows10 署名なしドライバ」と検索すると多数の情報がある。

- [Windows10で署名なしドライバをインストールする方法／テストモードにする方法](https://freesoft.tvbok.com/win10/testmode.html)
- [Windows10で署名なしドライバ をインストールする方法](http://pasofami.game.coocan.jp/Win10_DrvIns.htm)
- [ドライバ署名を強制的に無効かする方法](https://www.uchida.co.jp/support/download/data/securagens-win.pdf)←PDFです。