OmniAICreator/Qiita-1.07M huggingface dataset:
最小実装 iPadOS 13.4 Pointer Interactions

iPadOS 13.4からマウスやトラックパッドのサポートが強化されました。
一部のUIKitは自動で対応してくれますが、その他は自分で実装可能です。
意外と簡単だったので最小実装をしてみようと思います。

![File from iOS.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8920/f38b8d9f-bd23-ba0e-5f16-74b42bf88faa.gif)

## 最小実装
```swift
import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var targetView: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()
        let pointerInteraction = UIPointerInteraction(delegate: self)
        targetView.addInteraction(pointerInteraction)
    }
}

extension ViewController: UIPointerInteractionDelegate {
    func pointerInteraction(_ interaction: UIPointerInteraction, styleFor region: UIPointerRegion) -> UIPointerStyle? {
        guard let interactionView = interaction.view,
            targetView == interactionView else {
                return nil
        }
        let targetedPreview = UITargetedPreview(view: interactionView)
        let effect = UIPointerEffect.lift(targetedPreview)
        let pointerStyle = UIPointerStyle(effect: effect)
        return pointerStyle
    }
}
```

どうでしょうか？簡単ですね。ここからいじって拡張してみてください。
こちらも気になったらどうぞ :link: [iPadOS 13.4 Pointer InteractionsでAppleロゴのポインタを出す](https://qiita.com/ShingoFukuyama/items/365b90fe662992f7bdc9)

## 参考
:link: [Pointers (iPadOS) - Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/ios/user-interaction/pointers/)
:link: [Pointer Interactions - Apple Developer](https://developer.apple.com/documentation/uikit/pointer_interactions)
Railsの命名規則まとめ

RailsではCoC（Convention over Configuration）という概念があります。
設定より規約という意味です。

今回はこのRailsの規約に則ってコントローラやモデルの命名規則をまとめていきたいと思います。

##1 Modelの命名規則

Modelは簡単に表現すると各テーブルの設計書のようなものです。
設計書は一つしか存在しないものなので、単数形で作成するものになります。
したがって、コマンドを入力するときは

```
$ rails g model Book
```

のようになります。

##2 Viewの命名規則

Viewのフォルダには複数のViewファイルが作成されるため複数形で作成します。

## 3 Controllerの命名規則

controllerはそのcontrollerの中に複数のアクションを持つので複数形で作成します。

```
$ rails g controller Books
```

##4　Modelにつけてはいけない名前

予約語や自分の作成したアプリ名はモデル名に指定できません。
予約語を確認するには rails c コマンドで確認することができます！
アプリの画面の種類

#スプラッシュ画面
スプラッシュ画面とはアプリを開いたときに、一番最初に出てくる画面。
`LaunchScreen.storyboard`のファイルで編集する。
例）ツイッター
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537459/010b5845-a6b9-d706-3e0b-0a363933c651.png" width=25% >

#メイン画面
スプラッシュ画面を超えた先にある画面　
`Main.storyboard`のファイルで編集する。
例）LINEのメイン
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537459/bdc71a34-d7d2-88e5-76fd-c0091f74b314.jpeg" width=25%>

#カスタムビュー
何回も使いわせるもので一回作ればいい。
<img width="284" alt="スクリーンショット 2020-04-15 17.47.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537459/63262409-c393-f382-0719-2fb668c1b307.png">
上の画像のようなものを作り、アイコンやラベルの欄をかきかえて使い回すことができる。
🌱【Git】「It looks like 'git am' is in progress」エラーの解消法

## 環境
Windows 10
SourceTree 3.3.4

## やりたいこと

patchファイルを「完全なコミットとして取り込む」で取り込もうとしたらエラーが出てしまった


初回

```
git
-c diff.mnemonicprefix=false -c core.quotepath=false --no-optional-locks am -p 1 --3way
C:\Users\hoge\Documents\files\test\patch\20200415\syusei.patch
Applying: 【修正対応】テスト
Using index info to reconstruct a base tree...
M   hoge/app/Controller/foo/HogeFugaController.php
Falling back to patching base and 3-way merge...
Auto-merging hoge/app/Controller/foo/HogeFugaController.php
CONFLICT (content): Merge conflict in hoge/app/Controller/foo/HogeFugaController.php




Patch failed at 0001 【修正対応】テスト
When you have resolved this problem, run "git am --continue".
If you prefer to skip this patch, run "git am --skip" instead.
To restore the original branch and stop patching, run "git am --abort".



error: Failed to merge in the changes.
hint: Use 'git am --show-current-patch' to see the failed patch

エラー終了しました。エラーの内容は上記をご覧ください。
```

↓

2回目

```
git
-c diff.mnemonicprefix=false -c core.quotepath=false --no-optional-locks am -p 1 --3way
C:\Users\hoge\Documents\files\test\patch\20200415\syusei.patch
fatal: previous rebase directory .git/rebase-apply still exists but mbox given.
エラー終了しました。エラーの内容は上記をご覧ください。
```

---

再度SourceTreeいじってたらリベース状態のままになっていて、
下記エラーが表示されてできない作業があったので修正する

```
git -c diff.mnemonicprefix=false -c core.quotepath=false --no-optional-locks rebase --abort
fatal: It looks like 'git am' is in progress. Cannot rebase.
エラー終了しました。エラーの内容は上記をご覧ください。
```

## やったこと
Git Bashにて下記コマンドを実行しリベースやり残し状態を解除

```GitBash.sh
rm -rf .git/rebase-apply
```

もしくは.git内にあるrebase-applyを直接削除する

![rebase.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188242/4bb651f5-b0f6-3d9f-b017-2769a6ff93ec.png)


## 結果
リベース状態が解除される

```GitBash.sh
eltociear@ELTOCIEAR-PC MINGW64 ~/Documents/develop (test/test_develop|AM 3/27)
$
```

↓

```GitBash.sh
eltociear@ELTOCIEAR-PC MINGW64 ~/Documents/develop (test/test_develop)
$
```
Slimとは

Railsで使えるテンプレートエンジン:blush:
Slimの他にHamlなどがあるが、Slimの方が記述方法がシンプル。
HTMLをタグではなく**階層構造(インデント)で**表す。閉じタグは省略可能。

##テンプレートエンジンとは
MVCフレームワークにおいて、Controllerで定義した変数をviewで使用できるようにする仕組み。
Railsでは標準でERBが採用されている。

##文法
####「/」 コメントアウト
```slim:test.slim
/これはコメントです
tr
 th
 th
```
出力

```html:test.html
<tr>
  <th></th>
  <th></th>
</tr>
```

####「-」 Rubyのコードを記述
```slim:test.slim
tbody
      - @tasks.each do |task|
        tr
          td
          td
```
####「=」 Rubyのコードを出力する
```slim:test.slim
tr
  td= link_to task.name, task
  td= task.created_at
```

####「# / .」 id属性・クラス属性
```slim
#tasks
  .task.red
  /idの中に複数クラス
```
出力

```html:test.html
<div id="tasks">
  <div class="task red">

  </div>
</div>
```
疑似クラスについて

# 疑似クラスとはなんなんだ？？？？？？？？？？？
cssには、疑似クラスというのがあります。
普通のクラス名にコロン（:）をつけるだけで、難しそうなことが簡単にできます。
（コロン（:）を2つつける場合もあります。）

今回はその中でも一番簡単だと思った、[hover]という疑似クラスを紹介します。


# コード

```css:main.css
.test {
    color: black; /* ボタンの文字をblackにする。*/
}
.test:hover {
    background-color: blue; /* ボタンにマウスが触れたら、後ろの色を青に変える。*/
}
```
```html:index.html
<input type="button" class="test" value="ボタンだよー"><!--ボタンを作る。-->
```

これでできました。:blush:

#確認
マウスが触っていないとき。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392832/feeb632e-34c7-4e53-cf07-b3ee2b5799ed.png)
マウスが触っているとき。（マウスが見えないけど、ちゃんと当たっています。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392832/52fc9c6b-f3b5-5a05-bfff-6b448ed90317.png)


できたでしょうか？
他にもいろんなことができるので、ぜひ調べて使ってみてはどうでしょうか？＿
# 参考
[MDN](https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-classes)
# 後付け
上のcssコードではうまく動作しない可能性があります。
下のコードでは動くと思います。
【AWS】SESについて

# Amazon Simple Email Service (SES)とは
フルマネージド型 / サーバレス型のコスト効率に優れたEメールサービス

- スケーラブルな構成で信頼性が高いマネージド型
- メール送信：トランザクションメールなどの高品質なコンテンツを顧客に送信可能
- メール受信：受信したメールをトリガーにS3やLambdaなどを起動可能
- バウンス処理：メールが送れなかった場合の処理を規定する事ができる

## SESのメール送信方法
単なるメールサーバーとして利用するだけでなく、アプリから自動でメール送信や連携処理に利用可能

### HTTP REST API
下記のAPIが存在します。
- SendEmail API  
From/To/Subject/Bodyだけ用意すればSES側でメッセージを生成して送信する
- SendRawEmail API  
メッセージ全体をアプリケーション側で生成して送信する
- 認証  
AWSアクセスキーとシークレットアクセスキーを使用

### SMTPエンドポイント
・ 生成済みEmailメッセージを受け取ってSESのSMTPエンドポイントを経由してメールを送信する。SMTPを前提としてプログラムから直接利用する場合などに利用
・ 利用ポート
　-25
　-465(SMTP over SSL)
　-587(Message Submission)
・ TLS(Transport Layer Security)が必要
・ 認証：専用IAMユーザを作成してそのクレデンシャルを使用

## SES利用準備
ドメイン登録やAWS上で利用できるメールとするための利用申請を事前にする必要がある。
git-flow と git cz と github で良い感じに開発する方法

```
git flow init
git flow feature start X
git add -p
git cz
git flow feature publish X

feature/X の PR を develop に github の PR 画面から develop にマージする

git checkout develop
git pull
git flow release start X
git flow release publish X

# release/X -> master PR
gh pr create --base master -w

git flow release finish X -k
git push origin develop
git push origin master
git push origin X
```

メモ

```
brew install github/gh/gh
git flow init
git flow release start XXXX
git graph
gh pr create --base master -w
```
DockerでCentOSを起動する

# Dockerコンテナを使ってローカルPC上にCentOSを起動する

## 前提条件
- ローカルPCにDocker Engineがインストールされていること
    - [公式HP](https://docs.docker.com/engine/install/)よりインストール可能
- Docker Hubに登録済みで、ローカルPCにDockerイメージをpullできること
    - [公式HP](https://docs.docker.com/engine/install/)の手順を最後まで進めるとできるようになります。

## 早速、ハンズオンしていく

### 1.ローカルPCにインストールしたDockerを起動
MACOSをつかっているのであれば、アプリケーションのアイコンをクリックし、起動してください。

### 2.Docker HubからCentOSのイメージを持ってくる(pull)
今回は、CentOS7を起動させます。

```bash
# docker pull centos:centos7
```

dockerイメージがpullできているか確認
以下のように表示されていれば、問題なくイメージをpullできています。

```bash
# docker images
REPOSITORY                            TAG                 IMAGE ID            CREATED             SIZE
centos                                centos7             5e35e350aded        5 months ago        203MB
```

### 3.Dockerイメージを使って、CentOSを起動→ログイン
早速、先程pullしたイメージを使ってCentOSを起動してみます。

```bash
# docker run -it -d --name CentOS centos:centos7
1e7f9349cde4cc12422a7a9801ea83284ed52a0c27ff7ab2fecf116b41352cf4
```
変な文字列が返ってくればOK
続いて、起動したCentOSのコンテナを確認します。
（docker コマンドのオプションについては、勉強がてら調べてみてください）

```bash
# docker ps
CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS               NAMES
1e7f9349cde4        centos:centos7      "/bin/bash"         2 minutes ago       Up 2 minutes                            CentOS
```

上記のような結果が返ってくれば、問題なくコンテナが起動されています。
では、実際に起動したコンテナにログインしてみます。

```bash
# docker exec -it CentOS /bin/bash
[root@1e7f9349cde4 /]#
```

### 4.Dockerコンテナの削除
ログインしたコンテナから```exit```でログアウトし、
```docker ps```でコンテナの状態を確認してください。
ログアウトしただけなので、以下のような状態になってると思います。

```bash
# docker ps
CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS               NAMES
1e7f9349cde4        centos:centos7      "/bin/bash"         26 minutes ago      Up 26 minutes                           CentOS
```

コンテナを停止してから削除してみましょう。

```bash
# docker stop CentOS
CentOS
```

停止したコンテナを確認してみます。
```docker ps```では、停止したコンテナは表示されないので、```-a```をつけて実行します。

```bash
# docker ps -a
CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS                            PORTS               NAMES
1e7f9349cde4        centos:centos7      "/bin/bash"         30 minutes ago      Exited (137) About a minute ago                       CentOS
```

STATUSがUP→Exitedになったのが確認できました。
コンテナを停止できたので、次は、削除します。

```bash
# docker rm CentOS
CentOS
# docker ps -a
```

上記コマンドにて、一番初めに起動したCentOSのコンテナが削除されていれば、削除完了となります。
enebularでグラフ

#概要

enebularでグラフやってみた。

#写真


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/71047e39-e0ba-e95c-2e36-fc8a7993b54b.png)

#flow

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/c9c6f1eb-a510-dffd-4075-2ecd3518cea4.png)

#サンプルコード


```

var myChart;
var ctx = document.getElementById("canvas").getContext("2d");
var data = {
    labels: ["", ""],
    datasets: [{
        label: "sin",
        fillColor: "rgba(151, 187, 205, 0.2)",
        strokeColor: "rgba(151, 187, 205, 1)",
        pointColor: "rgba(151, 187, 205, 1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(151, 187, 205, 1)",
        data: [0, 0]
    }]
};
myChart = new Chart(ctx, {
    type: 'line',
	data: data,
	options: {
		elements: {
			rectangle: {
				borderWidth: 2,
				borderColor: 'rgb(0, 255, 0)',
				borderSkipped: 'bottom'
			}
		},
		responsive: true,
		legend: {
			position: 'top',
		},
		title: {
			display: true,
			text: 'Chart.js Line Chart'
		}
	}
});
function addData(chart, label, data) {
    chart.data.labels.push(label);
    chart.data.datasets.forEach((dataset) => {
        dataset.data.push(data);
    });
    chart.update();
}
function removeData(chart) {
    chart.data.labels.pop();
    chart.data.datasets.forEach((dataset) => {
        dataset.data.pop();
    });
    chart.update();
}
var ws;
function setup() { 
    ws = new WebSocket("wss://ev2-prod-node-red-e6380d51-56c.herokuapp.com/pub");
    ws.onopen = function() {
        alert("open"); 
    };
    ws.onmessage = function(e) {
        var s = parseFloat(e.data);
        addData(myChart, "", s);
    };
    ws.onerror = function(e) {
        alert("err");
    };
}
setup();



```

#成果物

https://embed.plnkr.co/plunk/xHqbEXMusrU04Q2a



以上。
Microsoft Teamsでオリジナルの画像を背景に設定する方法 

# prologue
COVID‐19の状況下で、リモートワーク需要が急速に高まっています。

オンライン会議のツールとしてはZOOM、もしくはTeamsという企業が多いのではないでしょうか？twitterを見ているとZOOMが主流な気がします。しかしながら、会社がWindows系であったり、Microsoft365を導入している場合はTeamsを使う場合も多いはずです。

今回はTeamsにて、背景を自由に設定する方法を共有します。

# 本編
windowsエクスプローラ→表示から「隠しファイル」のチェックボックスをオンにします。こうすることによってアプリケーションのデータにアクセスすることが可能になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205918/ea7608b8-bf09-e8a6-fe27-a29160406f09.png)

あとは、以下の場所に利用したい背景画像を格納するだけです。

```
C:\Users\{User}\AppData\Roaming\Microsoft\Teams\Backgrounds\Uploads
```

筆者の環境はWindows10です。Windows自体さほど詳しくないのでそれ以前のバージョンで動かないなどあったらすみません。個人的には、ファイル共有やスレッドなどの完成度が高くて好きなので表示できる顔の数が増えるとありがたいですね。このあたりは期待ですね。

楽しいオンライン会議ライフを！
Cypress使ってみた


Cypressについて自分が学んだ事を忘備録的な感じで書いていきます。

##Cypressとは？
E2E(End to End)テストフフレームワークで、
そもそもE2Eテストとはユーザーの視点から実際にwebブラウザを通して一通りの処理をテストすることをさします。
E2Eテストを人間が全機能を手動で試すのは効率が悪いので、自動化するためのフレームワークです。

##Cypress導入
すでに node.jsが入っている前提でターミナルでコマンドを叩きます。

> ```
mkdir e2e
cd e2e
npm init -y
npm install cypress webpack @cypress/webpack-preprocessor typescript ts-loader
```
引用https://typescript-jp.gitbook.io/deep-dive/intro-1/cypress


`e2e/package.json`ファイルにスクリプトを追加します：
>``` json:package.json
"scripts": {
    "cypress:open": "cypress open",
    "cypress:run": "cypress run"
  }
```

ターミナルで以下のコマンド、どちらかでok。
違いは、
・`npm run cypress:open`はcypress IDEが開く。
・`npm run cypress:run`はビルドサーバーで実行される。

```
npm run cypress:open

npm run cypress:run
```
導入はここまでです。


##Cypress実装
テストファイルは、`e2e/cypress/integration`配下に作成します。

appleのホームページに行きMacbookAirを見に行くテストを書きましょう。

```javascript:hoge.spec.js

describe('My First Test', function() {
  it('Visit Apple', function() {
    cy.visit('https://www.apple.com/jp/')
    
    cy.get('#ac-gn-link-search').click();

    cy.get('#ac-gn-searchform-input')
    .type('Mac')

    cy.get('#quicklinks > :nth-child(2) > .ac-gn-searchresults-link').click();

  })
})

```

ざっくりとこんな感じですね、DOM要素を指定するときはjQueryセレクターと同じです。


##覚えておくと便利かも
```javascript:便利かも.spec.js

//指定のURLへ遷移
cy.visit('http://localhost:8888/')

//現在のURLを取得
cy.url()

//DOMの取得
cy.get('.hogeDom > li')

//入力
cy.get(.hoge).type('hoge')

//チェックボックスの状態
cy.get(':checkbox').should('be.disabled')

//DOMのclass所持
cy.get('.hoge').should('have.class', 'hoge')

//値があるかどうか
cy.get('input').should('not.have.value', 'US')

//指定の文字列が含まれている要素を取得
cy.contains('文字列検索')

//複数要素取れた場合指定インデックスで取得
cy.get('.hoge').eq(1)

//小要素から検索
cy.get('.bigHog').find('.somleHoge')
  
//クリックイベントを発火
cy.get('.hogeBtn').click()

//セレクトボックスを指定した値で選択
cy.get('.hogeSelect').find('select').select('val')

//取得した要素をCypressで使えるようにする:wrap
cy.get('.BigHoge').find('somleHoge').children()
  .each(($e, index) => {
    cy.wrap($e).click()
  })
```

##覚えておくと更に便利かも
```js:hoge.spec.js
//Cooｋieセット
cy.setCookie('hogeCookie', '123') 

//名前指定のCookie取得
cy.getCookie('hogeCookie')

//すべてのCookie取得
cy.getCookies()

//指定Cookie消す
cy.clearCookie('hoge')

//すべてのCookie消す
cy.clearCookies()   

//ローカルストレージ削除
cy.clearLocalStorage()

//ファイル読み込み
cy.readFile('menu.json')

//ファイル書き込み
cy.writeFile('menu.json')
```
関数型インターフェース

関数型インターフェース

````

//オブジェクト指向　factoryの考え方

import java.util.*;

//@FunctionlInterface このアノテーションをつけると関数型インターフェースとして認識するので
//２つメソッドを付けるとコンパイルエラーになる
interface Sample{
    public void execute();

}

//●関数型インターフェース下記のインターフェースを使うと自分で作る必要も無い
//Function<T,​R>
//Consumer<T>
//Supplier<T>

public class Main {
    public static void main(String[] args) throws Exception {
        // Your code here!
        
        //関数型んたーフェース　１個のメソッド
        Sample sample =()->{
            System.out.println("lambab");
        };
        
        sample.execute();
    }
}
Macから hoge.vpnazure.net のVPNに接続する

#序章
みなさんリモートワークしてますか？
弊社でもリモートワーク推奨となり（明日は出社しますが）、会社に急遽VPNが構築されました。

なんちゃらvpnazure.netっていうアドレス、IDとパスワードが共有されて、
**「みなさんこれで接続してね」**
ってWindowsの場合の設定方法が回ってきました。
先輩ありがとう。

でもね私Macなの。

#Macでは選択できない接続方式だった
VPNの接続プロトコルと言えばいいのでしょうか、複数種類あります。([参考サイト](https://bestvpn.jp/vpn-protocol/))

1. PPTP
2. L2TP
3. SSTP
4. IKEv2
5. OpenVPN

そして、今回先輩が建てたVPNサーバー（？）は**SSTP方式**での接続が必要となるようです。
ですが、Macにはその方式での接続方法がありません。
[MacからのVPN接続設定方法](https://support.apple.com/ja-jp/guide/mac-help/mchlp2963/mac)

おいおいマッカーだけ出社とか勘弁してくれよ


#SSTP方式で接続できるソフトをいれたら接続できた。
ソフトを入れて対応することができました。

1. iSSTPを[ダウンロード](https://www.axot.org/2015/03/03/isstp-a-sstp-client-for-mac-osx/)しながらこのソフトの製作者の方角を向いて三礼 
1. 解凍
3. 解凍したファイルを、ダブルクリックから開くと許可されてないソフトとかなんとか出て開くことができないので、**右クリックメニュー→開く** を実行。（実行ファイルはアプリケーションフォルダに移動してもいい。)
4. 画面が開いたら、「New」をクリックして設定を追加
5. こんな感じで各枠をクリックすると入力できるようになるので入力
![isstp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182267/5bf03326-7599-edb5-b5cd-1c5ff47f5685.png)
6. 右下の「Connect」を**連打する** （一回だとうまく接続されないことが多い）。うまくいくと「Not Connected!」のところが「Connected to server. xxx〜」と変わる。
7. 繋がったら、忘れず「Save」ボタンで設定を保存する。
8. 一度繋がれば閉じても良い。（また開くときは右上のステータスバー？に”iS”とあるアイコンから開ける）

これで家から仕事ができるぜ！


#まとめ
VPN接続？VPNに接続？
所々日本語がおかしいのは私が本質を理解できてないからです。

#最後に
家で仕事、絶対無理。ちょーやる気しねぇ。
そもそも[やる気なんて存在しない](https://r25.jp/article/540681193689662300)らしいですけどね。

#おまけ
**試してないですが** MacからNASに接続すると重い時は次を試すと良いかもしれない。
[SMB 2 や SMB 3 接続でパケット署名を無効にする](https://support.apple.com/ja-jp/HT205926)

#キーワード
VPN Mac Azure 繋がらない
jsで整数か否かの判別をするメソッド

#メソッドで整数判別をおこなう

整数と少数の判別をおこない、条件によって表示を変えたいとおもった時、どのように数字の型の判別を行えば良いのか調べた。
numberに該当の数字をいれて、引数が整数ならtrueをそれ以外ならfalseを返す、メソッドが以下。

`Number.isInteger ( number )`

参考
https://lab.syncer.jp/Web/JavaScript/Reference/Global_Object/Number/isInteger/
オブジェクト指向　factoryの考え方

//オブジェクト指向　factoryの考え方

````
import java.util.*;
import com.sample.Sample;

public class Main {
    public static void main(String[] args) throws Exception {
        // Your code here!
        
        Sample sample = Factory.create();
        sample.execute();
    }
}
package com.sample;

public interface Sample{
    public void execute();
}

package com.sample;


class SampleImpl implements Sample{
    
    @Override
    public void execute(){
        System.out.println("Hello");
    }
}


//package com.sample;


//factoryの考え方　使える物はなんでも使えではなくどんど隠蔽する、ボタンをたくさん作るのではなく不便だけど間違えないように使わせないようにする

public class Factory{
    public static Sample create(){
        //return new SampleImpl();  //その１　別のパッケージからでもパブリッククラスではないクラスが扱えて隠蔽出来る
        return new Factory().new InnerSample();  //その２　同じパッケージのクラスも隠蔽インナーサンプルは隠蔽出来て、ファクトリーから呼べる
    }
    
    //インナークラス
    private class InnerSample implements Sample{
            @Override
            public void execute(){
                System.out.println("Hello");
            }
    }
}
ヘッドレス Chrome で HTML を PDF に変換する

# ヘッドレス Chrome で HTML を PDF に変換する

以前にヘッドレス Chrome で HTML を PDF に変換できることを確認したのに、今日試してみたら動かなくなってて、調べたのでメモ.

ググって出てくるのはだいたいこんな感じのコマンドラインだが、これは今は動かない. (どのバージョンから動かなくなったのかは不明だが、Chrome 80.0.3987.163 では動かなかった)

```
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --headless --disable-gpu --print-to-pdf=C:\foo\bar.pdf file:///C:/foo/bar.html
```

ではどうすればよいか? `--no-sandbox` を付ければ良い. なお、トラブルシューティングするときは `--enable-logging` を付けると良い.

```
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --headless --disable-gpu --no-sandbox --print-to-pdf=C:\foo\bar.pdf file:///C:/foo/bar.html
```

また、このやり方で PDF を作ると、ヘッダ・フッタが付いて、指定した HTML のファイル名がパス付きで PDF に出力されてしまう. 消したければ以下のような CSS を HTML に入れればいい.

```css
@media print {
    @page {
        margin: 0;
    }
    body {
        margin: 12.7mm;
    }
}
```
Pythonで毎日AtCoder #37

### はじめに
[前回](https://qiita.com/taxfree_python/items/00ffbe30b61e07563fe9)
Boot camp for Beginnersをやっていきます。

### #37
[ARC091-C](https://atcoder.jp/contests/arc091/tasks/arc091_a)

**考えたこと**
操作回数が偶数回なので、縁は必ず終了時に表になります。同様に縁以外の要素は奇数回操作が行われるので、終了時に裏になります。終了時に裏になっている枚数を上の考えを元に式にすると$(n-2)*(m-2)$となります。しかしこれは$n\leq2 ,m\leq2$の場合は成り立ちません。なので、例外($n\leq2 ,m\leq2$)時の処理を分けて書きます。

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

if n == 1 and m == 1:
    print(1)
elif n == 1 or m == 1:
    print(max(max(n,m)-2,0))
else:
    print((n-2)*(m-2))
```

[ARC080-C](https://atcoder.jp/contests/arc080/tasks/arc080_a)

**考えたこと**
4の倍数が全要素の半分以上ならば条件を満たす数列は作れます。ここで考えなければならないのは、2の処理についてです。他の4の倍数でない数と違って2は連続だったら条件を満たします。ですので、nからc2の個数を引いてそこに1足してあげることで2の個数を無視して計算できます。

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

c1 = 0
c2 = 0
c4 = 0
for i in range(n):
    if a[i] % 4 == 0:
        c4 += 1
    elif a[i] % 2 == 0:
        c2 += 1
    elif a[i] == 1:
        c1 += 1

n -= c2
c2 %= 2
n += c2
f = n // 2

if c4 >= f:
    print('Yes')
    quit()
else:
    print('No')
```

[ABC043-B](https://atcoder.jp/contests/abc043/tasks/abc043_b)

**考えたこと**
forでsを一つずつ拾って文字列に足していくだけ。'B'はスライスで実装しました。

```python
s = input()
ans = ''
for i in range(len(s)):
    if s[i] == 'B':
        ans = ans[:-1]
    elif s[i] == '0':
        ans += '0'
    else:
        ans += '1'
    #print(ans)
print(ans)
```

[ABC131-C](https://atcoder.jp/contests/abc131/tasks/abc131_c)

**考えたこと**
整数の問題だと思います。[式の説明](https://kou.benesse.co.jp/nigate/math/a13m0503.html)

```python
import fractions
a, b, c, d = map(int,input().split())

l = int(fractions.gcd(c,d) * c / fractions.gcd(c,d) * d / fractions.gcd(c,d))
#print(l)
x = b // c - a // c
y = b // d - a // d
z = b // l - a // l
if a % c == 0 or a % d == 0:
    print(int(b-a-(x+y-z)))
else:
    print(int(b-a-(x+y-z))+1)
#print(x,y,z)
```

[ABC109-C](https://atcoder.jp/contests/abc109/tasks/abc109_c)

**考えたこと**
答えは要素間の差の最大公約数になるので、計算するだけ

```python
import fractions
n, y = map(int,input().split())
x = list(map(int,input().split()))

x.append(y)
x.sort()
d = []
for i in range(n):
    d.append(x[i+1]-x[i])
if len(d) !=1:
    ans = fractions.gcd(d[0],d[1])
    for i in range(n-1):
        ans = fractions.gcd(ans,d[i])
    print(ans)
else:
    ans = d[0]
    print(ans)
```

[ABC116-C](https://atcoder.jp/contests/abc116/tasks/abc116_c)

**考えたこと**
全ての花の高さが0の状態から$h$にするのと、$h$から全ての花の高さを0にすることは同じです。
それぞれの$h$に到達していない隣接した花は一緒に水やりを行った方が回数が少なります。また、$h$に到達している花には水やりをしてはいけません。ですので、花が0であるかどうかを調べて一回で水やりできる最大の範囲を計算しています。

```python
n = int(input())
h = list(map(int,input().split()))

ans = 0
for i in range(max(h)):
    c = 0
    for j in range(n):
        if h[j] != 0:
            h[j] -= 1
            c += 1
        else:
            if c != 0:
                ans += 1
                c = 0
        if j == n-1 and c != 0:
            ans += 1
print(ans)
```

### まとめ
学校の宿題を終らせないと...
ではまた。
-これからポートフォリオを作成する方へ-　rubocop-railsの導入・使用方法を説明

rubocopとは静的解析ツールの１つであり、その中でもrubocop-railsはrailsでの開発に適した物です。
このツールを使用する事で、不適切なコードの構文を発見・自動修正がする事が可能になります。

#●導入方法
導入方法・使用方法はとても簡単です。
まずはgemをインストールしましょう。

```ruby:Gemfile
group :development do
　gem 'rubocop', require: false
  gem 'rubocop-rails'
end
```
```ruby
$ bundle install
```
そしたら後はrubocopと入力し実行するだけ。

```ruby
$ rubocop
```
しかし現段階ではまだエラーが数多くでるででしょう。そこで設定が必要になります。
ちなみに自分は最初rubocop-railsの存在を知らずruboopのみをインストールし実行したらさらに膨大な量のエラーが発生し爆死しました。

#●設定方法
まずば設定に必要なファイルを作成しましょう、

```ruby
$ rubocop --auto-gen-config
```
そうすると、「rubocpp.yml」と「rubocop_todo.yml」が生成されると思います。
・rubocop.yml：規約設定ファイル
・rubocop_todo:yml：規約設定を無視するファイル

初期段階ではrubocop_todo.ymlにより全ての規約を無視するよう設定されており、エラーが0件になると思います。
最終的にrubocop_todo.ymlが空でもエラーを0件にすることがゴールです。

規約設定に関しては検索すると色々と例が出てくると思いますので、とりあえずそれで設定してみて、後々自分に合わせてカスタマイズする方法が良いかと思います。

```ruby

inherit_from: .rubocop_todo.yml

require:
  - rubocop-rails

AllCops:
  TargetRubyVersion: 2.6 #Rubyのバージョン指定
  Exclude: #除外するファイルをここで指定
    - 'config.ru'
    - 'bin/**'
    - 'lib/**'
    - 'db/**/*'
    - 'config/**/*'
    - 'script/**/*'
    - !ruby/regexp /old_and_unused\.rb$/

AsciiComments: #日本語手のコメントを許可する
  Enabled: false

Documentation:　#クラスにコメントを記載しなくても良い
  Enabled: false

ClassAndModuleChildren: #モジュール名::クラス名の定義を許可する
  Enabled: false

Style/FrozenStringLiteralComment:　# 文字リテラルのイミュータブル宣言を無視（freezeになるのはRuby3以降）
  Enabled: false
```

ここでまで設定しrubocopを実行すると、相当エラー数が減っているかと思います。そしてそこからさらに魅力的な機能が、rubocopによる自動修正です。実行方法は、rubocop --auto-correctを実行するだけ。

```ruby
$ rubocop --auto-correct
```

そうすると、更にエラー数が減っているかと思います。残りのエラーは、エラーメッセージを検索しつつ、実際に手作業でコードを修正していきましょう。

エラーメッセージ集として、とても参考になるサイトを貼っておきます。
[ruby:Rubocopの使い方と警告について](https://madogiwa0124.hatenablog.com/entry/2017/06/22/233036)

#●まとめ
rubocopの導入は非常に簡単ですし、導入する事で今後の工数を大幅に下げてくれる素晴らしいツールなので、必ず導入しましょう！
古いやつ　raspberry pi 3 で　防犯カメラ　


![11.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211097/8a24ff1f-e422-5abb-44f9-4e8284789584.jpeg)

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211097/c5e5f71a-2d9a-ec10-b184-c24232eefdc9.png)

これの再起動風景はここ　ー>　https://www.youtube.com/watch?v=7KAOeRPn3cw&feature=youtu.be

古いやつだとお思いでしょうがは　---> https://www.youtube.com/watch?v=xghfGjcWgQ8

|https://gendai.ismedia.jp/articles/-/50902?page=2|
|:---|
|前にもお話ししましたように、**僕（松方弘樹）は鶴田浩二さんに似ていたから**本当に可愛がられました。そうすると、健さんからすると（僕は）余計なんですね。昔っから東映ってところは二本立てでやってきた。片岡千恵蔵×市川右太衛門。大川橋蔵×中村錦之助。鶴田浩二×高倉健。両雄がならび立ってきた会社なわけです。|
|僕は鶴田派だったから、健さんは自分のセリフをいきなり僕にフってきたり、試写会で揶揄したりするんです。鶴田のおっさんはからかいますけどストレート、文ちゃんも芝居にあれこれ言いますが男らしい。|
|でも、健さんはものすごくバリアを張る人で、ぜんぜん男らしくない。男高倉健〟はまったくの虚像です|



rpi3 ですが
$ ./comment-out.bat /etc/apt/sources.list
deb http://raspbian.raspberrypi.org/raspbian/ **buster** main contrib non-free rpi
です

```
 ./comment-out.bat camera.bat
x=`date +%Y-%m-%d`
mkdir -p /home/pi/kansi-----/$x
y=`date +%H:%M`
raspistill   -o /home/pi/kansi-----/$x/$y.jpg
z3=`date --date '3 day ago' +%Y-%m-%d`
z2=`date --date '2 day ago' +%Y-%m-%d`
mkdir -p /home/pi/kansi-----/$z3
mkdir -p /home/pi/kansi-----/$z3
rm -rf /home/pi/kansi-----/$z2
rm -rf /home/pi/kansi-----/$z2
で


$ crontab -l
は
*/1	0 * * * /home/pi/camera.bat
*/1	1 * * * /home/pi/camera.bat
*/1	2 * * * /home/pi/camera.bat
*/1	3 * * * /home/pi/camera.bat
*/1	4 * * * /home/pi/camera.bat
*/1	5 * * * /home/pi/camera.bat
*/1	23 * * * /home/pi/camera.bat

つまり
夜中の午後11時0分から　午後5時59分まで1分毎に撮影してます





root@raspberrypi:/home/pi# df
ファイルシス   1K-ブロック    使用  使用可 使用% マウント位置
/dev/root         13262188 7562568 5006216   61% /
devtmpfs            443148       0  443148    0% /dev
tmpfs               447756   80144  367612   18% /dev/shm
tmpfs               447756    6148  441608    2% /run
tmpfs                 5120       4    5116    1% /run/lock
tmpfs               447756       0  447756    0% /sys/fs/cgroup
/dev/mmcblk0p1      258095   53464  204632   21% /boot
tmpfs                89548       0   89548    0% /run/user/1000

からわかるとおり
１GBのマイクロSDカードで起動し　16GBのUSBなSSDで運用してます


つまり　マイクロSDは
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211097/4111b1ab-0517-f13f-e57b-8b353516c5a5.png)

USB接続SSDは
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211097/a7912878-adb1-b4b6-a359-9c6665dc774a.png)

SDカードのcmdline.txtは
console=serial0,115200 console=tty1 **root=/dev/sda2** rootfstype=ext4 elevator=deadline fsck.repair=yes rootwait quiet splash plymouth.ignore-serial-consoles


 ./comment-out.bat /etc/fstab 
proc            /proc           proc    defaults          0       0
PARTUUID=5e3da3da-01  	/boot           vfat    defaults          0       2
/dev/sda2		/               ext4    defaults,noatime  0       1
/dev/sda3		 swap 		swap 	defaults,noatime 0 1


./comment-out.bat /etc/dphys-swapfile
CONF_SWAPSIZE=100

```
【新規環境/既存環境対応】最新のCUDA及びcuDNNのインストール方法

# 0. 概要
Deep Learningマシンが複数台あるため、Tensorflow等のDLフレームワークがアップデートする度に要求される最新のCUDA及びcuDNNへ換装していく作業が非常に面倒である。そこで、既存環境がある状態からでも最新のCUDA及びcuDNNをインストールする方法を整理していきたいと思う。

[新規インストールは2番目からである。](https://qiita.com/harmegiddo/items/86b295ccf96eff489e02#2-%E6%96%B0%E8%A6%8F%E7%92%B0%E5%A2%83%E3%81%B8%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)

# 1. 既存環境の削除
<b>新規インストールの方はこちらを読む必要はない。</b>

まず既存環境がある場合は、その環境を削除してからインストールを行わなければ、いらぬ問題が発生する場合がある。
削除は至って簡単で、一般的なインストールをしていれば以下で消えるはずである。

``` bash
$ sudo apt-get --purge remove nvidia*
$ sudo apt-get --purge remove cuda*
$ sudo apt-get --purge remove cudnn*
$ sudo apt-get --purge remove libnvidia*
$ sudo apt-get --purge remove libcuda*
$ sudo apt-get --purge remove libcudnn*
$ sudo apt-get autoremove
$ sudo apt-get autoclean
$ sudo apt-get update
$ sudo rm -rf /usr/local/cuda*
```

また、Tensorflow-GPUも消しておくとよいだろう。`pip`でインストールした場合は以下で消える。

``` bash
$ pip uninstall tensorflow-gpu
```

## パッケージ/レポジトリの削除
`$ sudo apt-get update`すると大量にエラーが出る場合がある。
使わなくなったレポジトリは削除した方がいい。

``` bash
$ vi /etc/apt/sources.list
```
`nvidia`系を削除する。
# 2. 新規環境へのインストール
CUDA及びcuDNNのインストールについて説明する

## CUDA
以下のウェブサイトへつなぎ、目的とするバージョンを選択してインストールを行う。
CUDA-TOOLKITを入れればドライバー等がまとめてインストールされる。

[CUDA-TOOLKIT](https://developer.nvidia.com/cuda-toolkit-archive)

バージョンを選択後、OSやアーキテクチャ、バージョンを選ぶ項目が出てくるので選択していけばよい。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95636/7d64834d-9926-35e5-03ee-f47d12359690.png)

Ubuntu 64bit 18.04の場合はこのようなインストール手順が表示される。
後は順に実行してけばよい。

インストールの際は選択したバージョンに関係なく最新のものが選択される。
そこで、cuda=10.0をインストールしたい場合は`sudo apt-get install cuda-10-0`とする。


また他のライブラリから参照できるようにパスも通しておくとよいだろう。

``` bash:.bashrc
...
export PATH="/usr/local/cuda/bin:$PATH"
export LD_LIBRARY_PATH="/usr/local/cuda/lib64:$LD_LIBRARY_PATH"
```

インストールが終われば、以下のコマンドで刺さっているGPUが見れるはずである。

``` bash
$ nvidia-smi -l
```

<b>もしエラーが出る場合は、再起動をしよう。</b>

なお詳細なバージョンは以下で表示できる。

``` bash
$ nvcc -V
```

## cuDNN
次にcuDNNのインストールである。こちらも簡単で以下からバージョンを選ぶだけである。

こっちにかわったらしい
[cuDNN](https://developer.nvidia.com/rdp/cudnn-archive)

[cuDNN_old](https://developer.nvidia.com/rdp/cudnn-download)


例えば、CUDA-TOOLKIT10.2をインストールした場合は`cuDNN v7.6.5 for CUDA 10.2`を選択し、
自身にあったOSのライブラリをダウンロードすればよい。Ubuntu 18.04等の場合は`cuDNN Library for Linux`を選択する。
最新のものだと`Local Installer for Linux x86_64 (Tar)`という名前になっている。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95636/c3d48e55-b6cf-96d0-8682-39939a882f53.png)

以下を順に実行していく(`.tgz`の場合)。

``` bash 
$ tar -xzvf cudnn-10.2-linux-x64-v7.6.5.32.tgz
$ sudo cp cuda/include/cudnn.h /usr/local/cuda/include
$ sudo cp cuda/lib64/libcudnn* /usr/local/cuda/lib64
$ sudo chmod a+r /usr/local/cuda/include/cudnn.h /usr/local/cuda/lib64/libcudnn*
```

もし、`.xz`形式で、cudnn-*から始まる名前であれば以下で対応。

``` bash
$ tar Jxfv cudnn-linux-x86_64-8.8.1.3_cuda11-archive.tar.xz
$ sudo cp cudnn-*-archive/include/cudnn*.h /usr/local/cuda/include 
$ sudo cp -P cudnn-*-archive/lib/libcudnn* /usr/local/cuda/lib64 
$ sudo chmod a+r /usr/local/cuda/include/cudnn*.h /usr/local/cuda/lib64/libcudnn*
````

以上で終了である。
Enjoy !

[参考URL](https://docs.nvidia.com/deeplearning/sdk/cudnn-install/index.html)
ビット・トレード・ワンから発売予定のミニトラックボールのマウンタを作ってみた

# これは何？

自作キーボード界隈で話題になった、ビット・トレード・ワン様から発売予定のミニトラックボール用のマウンタです
[遊舎工房様で取り扱い予定](yusha-blog)だそうです

# データ

STL データを以下のリポジトリに公開しています
ダウンロードして自前の3Dプリンタで出力したり、プリントサービスに発注すれば実物が手に入ります

https://github.com/koktoh/Bit-Trade-One-Trackball-Mounter

出力例
![Bit-Trade-One-Trakball-Mounter.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553901/fb5e3296-c969-6b7c-5338-e86abe1c917d.jpeg)


## マウンタの種類

以下の3種類を用意しています

* Cherry MX PCB マウント互換
* Kailh Choc PCB マウント互換
* Kailh Choc キーキャップ互換

ミニトラックボールのマウント方法の一つの選択肢としていかがでしょうか
それでは、よき自作キーボードライフを！

[yusha-blog]:https://blog.yushakobo.jp/entry/2020/03/14/094511
CakePHPブログチュートリアル　検索機能追加

cakephpのブログチュートリアルに機能を追加していきます。


#事前準備

## 前ユーザがログアウト出来るようにする。
以下のコードを追加。

```
public function beforeFilter() {
    parent::beforeFilter();
    $this->Auth->allow('logout');
}

```
## Post/addで記事を作成した際にidが自動で付与されるようにした。

PostsController.phpにて

```
$user_id = $this->Session->read('Auth.User.id'); //セッションコンポーネントでログインしているユーザーのidを取得。
$this->set(compact('user_id')); //add.ctpにid情報を送る
```

add.ctpにて
送られてきたidを受け取る

```
echo $this->Form->hidden('user_id',['value'=>$user_id]);
```

#タイトル検索機能を追加

## Postのindex.ctpに検索バーを作る

```
<?php echo $this->Form->create('Post'); ?>
<?php echo $this->Form->input('search')?>
<?php echo $this->Form->submit()?>
<?php echo $this->Form->end() ?>
```

## viewで受け取った入力をコントローラーに渡す&DB値をとってくる

```$tmp = $this->request->data['Post']['search'];```でviewの検索バーで入力したものを受け取る。
```$posts = $this->Paginator->paginate  array('title LIKE' => "%${tmp}%"));``` 
LIKEオプションで部分一致したものをとってくる。paginateはあまり理解していないので後ほどまとめる

TODO:Paginateを学ぶ


```
public function index() {
		$posts=array();
		if($this->request->is('post')) {
			$tmp = $this->request->data['Post']['search'];
				$posts = $this->Paginator->paginate(
				array('title LIKE' => "%${tmp}%")
			);
			

		}else{
			$this->Post->recursive = 0;
			$posts = $this->Paginator->paginate();
		}
		$this->set('posts',$posts);
}
```

# 検索パターンを増やす
## ラジオボタンを作る

## ラジオボタンを横並びにする
* inline-flexを用いて並べた。
* オプションは連想配列で設定する


```
$options = array('options' => array('before_match' => '前方一致', 'after_match' => '後方一致','part_match' => '部分一致', 'comp_match' => '完全一致'),
	'before'=>'<div>','after' => '</div>','separator' => '</div><div>','div' => array('style'=>'display:inline-flex'),'type' => 'radio',
);
```
  
[FormHelperのdivやlavel、クラス名などについて](https://www.searchlight8.com/cakephp-formhelper-div-label/)
【RSpec・Featuresテスト】capybaraを使ってカラムに画像（ファイル）を含むモデルの投稿をテストする方法【attach_fileメソッド】


####環境
rails 6.2.0
capybara                3.28.0
rspec-rails
rails-controller-testing 1.0.4

####前提
@postというモデルがある。
@postモデルは次のカラムを持つ。 


| 　　型　  　|  カラム名 |   
|:-----------------|-------
| string    |  name   |      
| text      | content |      
| string    |  picture|   

form.html.erbは以下の通りです。

```form.html.erb

  <%= f.label :名前 %>
  <div class ="post_name_form"><%= f.text_field :name, class: 'form-control' %></div>

  <%= f.label :口コミ %>
  <div class ="post_content_form"><%= f.text_field :content, class: 'form-control' %></div>

  <div class ="post_picture_form"><%= f.label :写真 %>
  <%= f.file_field :picture, type: :file, multiple: true %></div> 

  <button type="button" class="btn btn-success"><div class="actions">
    <%= f.submit  %>   

```

####テスト画像の準備
app/assets/imagesにテスト用の画像を配置します。




####attach_fileメソッドを使ってspec/features/posts_spec.rbに以下のように記述。

```spec/features/posts_spec.rb
 #名前、口コミ、写真を投稿する
 fill_in 'post[name]', with: "Test Task"
 fill_in 'post[content]', with: "This is Test"
 attach_file "post_picture", "app/assets/images/test.png" #テスト用のファイルを指定する

```
完了です。




capybaraのドキュメントに書いてありました。
https://rubydoc.info/github/jnicklas/capybara/master/Capybara/Node/Actions
[Android]ディープリンクへの対応手順


# ディープリンクへの対応手順

## 以下の手順となります。

**マニフェストを設定  1**

```kotlin
<intent-filter android:label="test" >
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <data
                        android:host="test"
                        android:scheme="example" />
     </intent-filter>
```

<img width="713" alt="applink_1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618722/16da1062-c99c-14e4-63ab-10db67d09c11.png">


**Intent からデータを取得  2**

```kotlin
val action: String? = intent?.action
    val data: Uri? = intent?.data
        if(data!= null) {
            val dataString = data.toString()
            if(dataString.equals("example://test")){
            intent = Intent (this, DeepActivity::class.java)
            startActivity(intent)
            } 
        }
```
<img width="810" alt="link_2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618722/2dd00cab-78e3-b496-4fc0-8f7ff9e771e0.png">

**aタグ（ディープリンク）からアプリを起動  3**
端末のbrowserからhtmlページをロードしてリンクをタップし、アプリが起動すること

```html
<a href="example://test"> example://test</a>
```
MacBookへのOctaveダウンロード手順と実行 

######～初めに～
これはメモ程度の記事です．対象読者は特に設定してません．
MATLABがないときに意外と便利なのがMATLAB言語と互換性の高いOctaveです．
今回は持ち歩き専用LaptopであるMacbookにMATLABは入れるまでもないが，
出先で試しに線形計算したい．科学計算プログラムの学習をしたい．と思うことがあったので，
Octaveを入れてみました．
Octaveでも十分に機械学習やデータ解析コードを実装することが可能です！
**ご指摘，ご提案，ご質問がございました場合はご気軽にお願いいたします．**

#０．とりあえずググる
良さげな記事 https://hgw09.exblog.jp/27277942/ から飛んだのが http://octave-app.org/
そこに，
>Octave.appのすべてのリリースは、ダウンロードページで入手できます。

と記載があるので，ダウンロードページ http://octave-app.org/Download.html に移動

#１．Octave.app Downloadsでdmgのダウンロート
移動先のページにdmgファイルがあったのでこれをダウンロード．
dmgファイル？なんぞ？と思ったが，突き進む．
オクターブ4.4.1 u1
ダウンロード：Octave-4.4.1.dmg

#２．LaunchPadから開く
dmgのダウンロード後，LaunchPadから開こうとすると以下のエラーが出る．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615888/57192d99-a83b-3b86-e9de-36b0056dc872.png)
|------------------------------エラー画面①-------------------------------------|

エラーはググる
https://support.apple.com/ja-jp/guide/mac-help/mh40616/mac
>
1. MacのFinder で、開きたいアプリケーションを検索します。
Launchpadは使用しないでください。Launchpadではショートカットメニューにアクセスできません。
2. Controlキーを押しながらアプリケーションアイコンをクリックして、ショートカットメニューから「開く」を選択します。
3. アプリケーションはセキュリティ設定の例外として保存され、今後は登録済みのアプリケーションと同様に、ダブルクリックすることで開くことができるようになります。

上記手順で開こうとすると，上記エラー画面①に「開く」という選択が追加されたウィンドウが表示された．

http://octave-app.org/Download.html にちゃんと記載されてましたw
>*アプリはまだ署名されていません。つまり、初めて実行するときは、Octave.appをダブルクリックするのではなく、右クリックして[開く]を選択し、表示されるダイアログで[実行]を選択する必要があります。 「未知の開発者」からアプリを実行したい。*

３．フォントキャッシュ？
最初のプロットは遅い？フォントキャッシュ創る？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615888/ed6d7709-ddf1-4965-eb25-1cf645815f0c.png)
はい，ググります．
>https://helpx.adobe.com/jp/x-productkb/global/cpsid_93578.html
*フォントキャッシュとは、オペレーティングシステムが使用する単一のファイルまたはファイル群で、コンピューターにインストールされたフォントを管理・表示します*

ふむぅ．Yesだな．

#４．いよいよ使えそう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615888/6648236d-dccb-f9ec-43c7-2a4c190a2c21.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615888/842a5ac9-5874-dc0e-adf1-f9434d1b08b1.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615888/8ab74566-7b53-db02-a63a-c6ce276fc499.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615888/b5002fdf-3292-33fb-df5a-9aa65efe66d9.png)

#５．使い始め
試しに四則演算♪　あれ，動作がめっちゃ遅い．そういえば，フォントキャッシュの仕業か？
######*再起動!!*→スムーズに動いた．

#６．Homebrewは？
Octaveのインストールでよく出てくるワード「Homebrew」を用いたインストール．少し前まではHomebrewを用いてOctaveの環境を構築していたようです．
現在はOctave.app | A native Mac app distribution of GNU Octave http://octave-app.org/ 
が存在するので，アプリとして簡単にダウンロードできるようになったんだと認識しています．

「Homebrew」を用いたインストールは代替インストール方だと認識しています．
⑴Homebrew Caskを使用したインストール
⑵Homebrewで直接インストール

Octave.app | A native Mac app distribution of GNU Octaveにも
>注：これはOctave.appをインストールする通常の方法ではありません！これを行う特別な理由がない限り、通常のOctave.appディストリビューションをダウンロードしてインストールしてください。

と記載されています．
メモランダム Rails tutorial　第1章

#Rails tutorial 第１章
◎開発環境
◯クラウドIDE＝三種の神器のテキストエディタ、ファイルブラウザ、コマンドラインターミナルがある。インデントは２つ。
◯railsのインストール

◎最初のアプリケーション
◯unixコマンド。エラーをよく読む。
◯bundler,gemfileによるgemのバージョンの指定。
◯rails serverでコマンドを実行。アプリケーションの起動。
◯MVC　ブラウザ→controller→model, view→ブラウザ。
◯コントローラー　def hello によるアクションの作成。
◯ルーティング　root 'controller_name#action_name'

◎Gitによるバージョン管理
◯絶対に導入する。必須。
◯インストールとセットアップ。git config, git init,  git add -A, git status, git commit - m, git log, 
◯削除したファイルの復元。
◯bitbucket ssh公開鍵。リポジトリの作成。リポジトリへのプッシュ。

◎ブランチ、編集、コミット、マージ
◯branch ＝リポジトリのコピーで物とファイルを触らずに色々試せる。親リポジトリはmasterブランチ。一時的なトピックブランチで色々試せる（checkoutと-bフラグで作成）。習慣化すべき。
◯Edit　＝　ex readmeを編集。
◯commit   ＝　git commit -a は慎重に。全てのファイルをコミットする。新しいファイルを追加する時はgit add。
コミットメッセージは命令形。日本語なら体言止め。
◯merge 　=　併合する。ファイルの変更後マスターブランチにマージする。トピックブランチは実際消さなくていい。
◯push  　= 　git push 。readmeファイルの更新が終わったので変更をpushする。

◎デプロイする
問題を早い段階で見つける。テストばかりだとダメ。
その方法がHeroku。（そのためにgitを導入。）
◯herokuのセットアップ
◯pg gem = railsがpostgreSQLと通信できるようにする。
◯sqlite3が本番環境に導入されないようにする。
◯このgemをローカルにインストールしないようにbundleーinstallに特殊なフラグ「--without production」を追加。
◯↑変更内容をコミットし本番環境のデプロイの時のため今フラグ追加のコマンドをやった。
◯herokuのアカウント新規作成。herokunoのインストールの確認。
or heroku toolbeltからダウンロード。
◯sshキーの追加。
◯heroku-サーバーにサンプルアプリケーションの実行場所を作成。ブラウザで確認。
◯herokuにデプロイする。gitでherokuにpush。
◯herokuのコマンド。サブドメインをランダムにしてアクセスを躱す。。railstutorialもheroku上に置かれてる。

◎最後に
◯次章はtoyアプリ
◯ruby on rails = ruby によるフレームワーク
◯クラウド環境で簡単にインストール、アプリの作成、ファイルの編集ができる。
◯railsというコマンドラインコマンド＝rails newで新しいアプリケーションの作成。rails serverでローカルサーバーの実行。
◯コントローラーアクションの追加、ルートルーティングの変更のみでhello,worldアプリケーションができる。
◯Gitによるバージョン管理＝データ喪失の防止、共同作業。
◯herokuでデプロイ。
Teachable Machineで作成したモデルを使用する方法（webブラウザ編）

#概要
　Googleが提供している画像認識の学習モデルを手軽に作成できるサービス「**Teachable Machine**」の使い方について紹介していきます。

　今回は作成した学習モデルを使ってみます。学習のさせ方については[こちら](https://qiita.com/kmaepu/items/1350464b3940dfe6957e)の記事にかきました。

　この記事ではWebブラウザで動作確認する方法を紹介しています。実行すると次のようにWebカメラで撮影した画面と、判別したポーズの確立が表示されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/0a80f98b-9da6-06e4-831b-25244a08d575.png)

#使ってみる
　学習が完了した後、完了したPreview欄に「Export Model」というボタンがあるので、ここをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/49275bdd-4935-08fb-c8a2-62ba121f7be1.png)

　すると、学習したモデルをTeachable Machineのクラウドにアップロードするか、ダウンロードするか選ぶことができます。今回はお試しで使ってみることを優先させたいので、導入が簡単なアップロードで進めます。今後も使っていきたい場合はダウンロードしておきましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/1ec50679-e2da-5a9d-1404-e6ea30ae8d5c.png)

　アップロードが完了すると、次のように学習モデルが保存されているリンクが表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/4e3b3161-ab25-9a96-d7c1-e5ca2ee87ad9.png)

　Teachable Machineはありがたいことにサンプルコードまで用意してくれます。先ほどのリンクの下にjavascriptのプログラムが表示されています。これをコピーし、適当な名前のhtmlファイルを作成してこのファイルにペーストします。

　作成したファイルをGoogle chormで開くと次のような画面が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/6e0f452f-4f76-aa8f-0c9c-c7add7fa402f.png)

　「Start」ボタンをクリックするとWebカメラの使用許可を聞かれるので、有効にします。すると、カメラ画像と共にポーズを判別した割合がリアルタイムに表示されます。
※参考画像ではポーズをとっていないですが、値がおかしいのは学習モデルの精度を考えて作っていないからです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/0a80f98b-9da6-06e4-831b-25244a08d575.png)

#おわりに
　次はなんらかのアプリに組み込んでみようと思います。
Azure App ServiceのIPがSQL DatabaseにBANされた話

# はじめに

ある新サービスの環境構築中、Azure DevOpsのPipelineからApp Serviceをデプロイしたところ、
Azure SQL Databaseへの接続で

> Login failed for user '{ユーザー ID}'.

というエラーが発生し、調査に時間を要しました。
結果として、パスワード間違いのログイン試行を繰り返したためにSQL DatabaseにApp ServiceのIPアドレスがBANされていたのですが、調査の流れについてまとめておきます。

# 状況

## SQL Databaseの設定状況

- 開発期間等の関係から、ID/Passwordを使ったSQL Server認証を利用（いずれAzure Active Directory認証を利用したい・・・）
- [Azureサービスを許可する]をオン、追加で開発するオフィスとVPN回線のIPアドレスを許可

## エラーの発生条件

- Azureサービス以外に追加で許可しているIPからのローカルデバッグでは正常にアクセスできる
- 問題のApp Serviceから、別サブスクリプションに同一構成で構築しているSQL Databaseには問題なくアクセスできる

接続文字列の不正、パスワード内の記号の文字化け、Azure PipelineのYamlの記述ミス等疑ってみましたが、どれも関係なし。

もしかして、問題のApp ServiceのIPアドレスが「Azureサービスを許可する」の範囲に含まれていないのでは？と疑いましたが、上に書いたように、別のSQL Databaseに接続できているので関係ないはずです。たまに特定のリソースだけ更新がうまくいかず・・・なんてこともあるので、念のため許可をON/OFFしてみましたが、変わりなし。

# SQL Databaseの監査ログを取ろう

切り分けを繰り返すより、拒否してる大元のSQL Databaseのログを見たほうが早いよね、ということで監査ログをとりました。

設定方法はこちらを参考
https://docs.microsoft.com/ja-jp/azure/sql-database/sql-database-auditing

ログインエラーが発生するとこんな感じで.xelファイルが生成されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146578/495543a9-a24d-00d9-4de6-df4835e11e33.png)

ダウンロードしてきて、SQl Server Management Studioで開くとこんな感じに監査ログが確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146578/575e1a72-3666-bd1e-e4f8-77e9c9327999.png)

ログを探っていくとこんな記録を確認できました。

|フィールド|値|
|:---|:---|
|action_name|	DATABASE AUTHENTICATION FAILED|
|additional_information	|<login_information><error_code>18456</error_code><error_state>113</error_state></login_information>|

色々検索するとerror_state=113というのは、SQL Database側が接続元のIPを一時的にBANしている状態のようです。

マイクロソフトのサポートに問い合わせて、やはりBANされていました。

原因は、おそらくパスワードを誤ってデプロイしてしまい、何度もログイン認証に失敗したためです。
その後、正しい接続文字列に直してBANされているのでエラーになっていたのでした。
ローカルデバッグでは上手くいっていたのも納得です。

なお、こうなってしまうと我々で回復することはできません。IPのBANは一時的なものなので、ほとぼりが冷めるのを待つしかないようです。
数十分で回復する場合もあるようですが、私の場合は数時間は回復しませんでした。
（夜中に数時間色々試してうまくいかなかったが、翌日には正常に接続できていました）

# まとめ

設定間違いには気を付けましょうね、というのと原因の絞り込みはやはりエラー内容に近いところからやった方が効率的です。
【Rails】入力エラー時にフォームのビュー崩れが発生する時の対処法について

#はじめに

某プログラミングスクールにて、フリマアプリのコピーサイトを作る時に、新規会員登録画面を担当することになりました。
そこで、入力エラーの動作確認をした時にビュー崩れが発生。
このビュー崩れを回避する方法を見つけたので記事にしてみます。

#処方前
![4a0f1137a3df1ac3eccc8899ebc4f612.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593458/0054ef2d-51aa-a84b-f497-413a555149ae.gif)

入力エラーがあると、`お名前（全角）`と`お名前カナ（全角）`の入力覧がギュッとしちゃいます。
これを解決します。

#解決方法
config/application.rbに、以下の記述をしてあげれば解決です。
※記述後サーバーを再起動しないと反映されませんのでご注意ください！

```config/application.rb
module sample
  class Application < Rails::Application
    # 〜中略　〜
    config.i18n.default_locale = :ja

    #今回追加した場所↓

    #フォーム入力内容に謝りがあった場合に自動生成されるfield_with_errorsクラスを防ぐために追記
    config.action_view.field_error_proc = Proc.new { |html_tag, instance| html_tag }

    # 〜中略　〜
  end
end
```

#解説
それでは、簡単に解説していきます。

## なぜビューが崩れた？
エラーを起こしたビューを検証ツールで確認すると、身に覚えのないdiv要素が増えていました。

これ↓
<img width="411" alt="スクリーンショット 2020-04-15 15.20.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593458/0cd7df3f-0e14-8c56-3383-5971c1090287.png">

ググってみると、railsは入力フォームにエラーがあった場合に`<div class="field_with_errors">`というものを挿入するような仕組みになっているようです。

なんでそんなことすんねん？Σ(　 Д )ﻌﻌﻌﻌ⊙ ⊙

どうやら、エラー該当箇所毎にエラーメッセージをカスタマイズできるようにするために挿入してくれているようです。
例えば、電話番号入力蘭の桁数がおかしかった時に、電話番号入力蘭の上部に「電話番号の入力が不正です」とか表示されていた方が親切ですね。
・・・うん。確かに。ごめんねRails。否定しちゃって。

## field_with_errorsを生成しないためには

勝手に`field_with_errors`を生成しないようにする方法がありました。
以下の手順を踏めば解決です。

1.config/application.rbに↓を追記

```config/application.rb
module sample
  class Application < Rails::Application
    # 〜中略〜
    config.action_view.field_error_proc = Proc.new { |html_tag, instance| html_tag }
    # 〜中略〜
  end
end
```
2.サーバーを再起動
　これをしないと反映してくれませんのでご注意を！

#　最後に
一旦、これで意図しない表示崩れを**回避**できるようにはなりました！
ただ、この`field_error_proc`は使いこなせれば、エラーメッセージをカスタマイズできる優れものです。
なので、**表示しないようにする。**というよりも**使いこなす。**という形に持っていきたいですね。
使いこなす方法が分かり次第、記事を追加で投稿しようと思います。
（しばらくはやってこなそう）
職業訓練,制作課題,阿部寛,CSS,上書き,サイト公開

昨日、6ヶ月間の職業訓練（Webアプリプログラマー講座）を修了し、晴れてニートになりました。おめでとう、おめでとう。  

職業訓練の最後の制作課題で作ったサービスを公開したので、広告を兼ねて宣伝させていただきます。春だから。  

## サイト概要 
サイト名: GoingOverCss
システム: オンライン上のサイトにGithubからCDN経由でCSSを上書きして遊ぶ。

言葉で上手に説明できないので、イメージ図をご覧ください。
<img width="1440" alt="スクリーンショット 2020-04-15 13.57.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323662/2d23ed9f-b1d7-a348-488d-fca24d0f50cd.png">

作る側と見る側の利用者を想定しています。 
 
作る側:
1. ターゲットにするWEBサイトを決めて、上書きするCSSをローカル環境で作成します。
2. 作成したCSSファイルを自分のGithubリポジトリに上げます。
3. このサイトにGithubリポジトリのURLと、ターゲットにしたサイトのURLを登録します。  

見る側:
1. サイトにアクセスして品定めします。
2. 登録されたターゲットのサイトにアクセスし、開発者ツールを開いてGithubリポジトリのURLを`</head>`直前に書き入れるとCDNでCSSファイルが配布され、CSSの上書きが起こります。  
## 上書きの例 
今回、爆速で有名な阿部寛さんのホームページをターゲットにさせていただきました。
上書き用のCSSは私のGithubのリポジトリに置いているこちら<a href="https://cdn.jsdelivr.net/gh/kohjean/GoingOver@1.1.0/style.css">(Github:kohjean)</a>のソースです。
<p></p>
これを適用すると、
これが
<img width="1440" alt="26a7ba209d15dc1ec7920257f45f21f9.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323662/f3548674-54e0-7761-a71d-92a5443774fe.png">


こう！
<img width="1440" alt="スクリーンショット 2020-04-15 15.03.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323662/1f347646-843e-9ffb-23f3-9369f9d82b55.png">
なります。

※スクーンショットを撮ったタイミングのずれで書かれている内容が少し違っていますが、変更を加えられるのはあくまでCSSのみです。

## 何が起きているのか
ある程度CSSについて勉強されている方には周知の事かと思いますが、CSSは「詳細度が高い方」, 「後に書かれた方」などの優先順位の決まり事に沿って適用されています。なので、上書きするCSSに、<strong>より優先順位が高くなるよう</strong>にしてスタイルを定義すれば、スタイルを更新してサイトの見た目を変える事ができます。

詳細度についてここでは詳しくは書きませんので、気になる方はわかりやすく書かれたこちらの記事をご参考ください。

<p><a href="http://www.htmq.com/csskihon/007.shtml" target="_blank">スタイルの優先順位－CSSの基本<small>※外部サイトを開きます</small></a></p>
## 難しかった事、勉強になった事
今回の制作は、職業訓練の序盤に「へー。CSSは複数のファイルを当てられるんだ。ほー。後から書いたやつが優先されるんだ。」ということを知り、健康食品のデモサイトに毒々しい青色を配した**「魔改造.css」を作ってスピーチで発表したこと**が源流です。最終制作の設計が始まった時にその時のことを思い出して、あれを公開できるサービスに出来ないか。と考えました。
この時点で**「自分が向き合うべきは阿部寛のホームページしかない」**と考えていたのですが、これが大変でした。
阿部寛さんのホームページは全てインラインでスタイリングされているので`!important`を付ければ上書きできると考えていたのですが、何故か適用されず。いろいろ考えまくったけど原因がわからず、講師の先生に尋ねて判明。
**`<frame>`で引っ張ってきている要素には呼び出し元のCSSが適用されない**ことがわかりました。HTML4.01で書かれていてもCSS3が使えることは調べがついていたのですが、そんな落とし穴があったとは、、。どうしてもわからない時は人に聞くことも必要ですね。

複数のページからなる様々な機能を備えた動的サイトを作ったのは今回が初めてだったので、ページ遷移や全体の設計をするとてもいい機会になりました。壁にぶつかりながらトライ&エラーを繰り返して、わからない所を調べまくる経験は中途半端で妥協したり、用意された教材に沿って勉強するだけでは決して得られなかったことだと思います。ぶつかった壁を超える度、迂回する度に新しいことを調べる必要があって、広い範囲の知識に触れることが出来ました。おかげで自分のレベルが一段上がったなと実感できています。
ですがまだまだ改良が必要なところがあるので就活の準備をしつつ、コードを書いていきたいと思います。

## GoingOverというタイトルについて
'goingover'とgoogleで検索すると「うんと殴ること」のような和訳が出てきますが、誤解されたくないので説明しておきます。
Graffiti(トンネルとかにスプレーで書かれた落書き)カルチャーにおいて、既に書かれている絵の上から上書きすることを'GoingOver'といいます。今回作ったサイトのCSSを上書きする行為がこれに似ていると思ったので、言葉を拝借しました。
現実に絵を上書きすると元の絵は見えなくなってしまいますが、これはクライアント側で上書きしているだけなので元のサイトには何の影響もありません。想像力を含ませてくれるサイトには敬意を払っています。敬意を払いつつうんと遊ばせいただきます。
## リンク 
面白い魔改造募集しています。
<p><a href="http://goingover.net" target="_blank" rel="noopener">goingover.net</a></p>
※ 開発メニューを使うことが前提になっているので、スマホで見るとデザインが盛大に崩れます。