OmniAICreator/Qiita-1.07M huggingface dataset:
開始タグの前に改行を入れるべからず

PHP で作られたバッチを実行すると、なぜか、最初に空白行が出力されました。

```php:starttag.php
<?php
require_once 'starttag_called.php';
echo "abc\n";
```

```php:starttag_called.php

<?php
echo "called\n";
```

```
          ← 空白行
called
abc
```

# 原因

`starttag_called.php` で、 `<?php` の前に空白行があることが原因です。

[公式マニュアル](https://www.php.net/manual/ja/language.basic-syntax.phptags.php) にも書いてあるとおりです。
> つまり、開始タグと終了タグで囲まれている 箇所以外のすべての部分は、PHP パーサに無視されます。

なので、 `<?php` の前に文字が書いてあっても、普通に出力されます。

```php:starttag_called.php
xyz
<?php
echo "called\n";
```

```
xyz      ← 空白行
called
abc
```

# 感想

もともと HTML にコードを埋め込めることが PHP のウリだったのだから、考えてみれば当たり前の動きです。
ただ、「どこで空白行を出力しているんだ？」と、がんばって PHP のコードを読んでもわからず、デバッグしてようやく気づいたという・・・。 `require_once` で読み込んでいる先のコードが原因だったのも厄介でした。

ということで、本日の教訓。
**開始タグの前に余計な改行を入れるな**

「それがなんだってんだよ。とんでもないクソ記事だな！」
「ネタがなさすぎて、この程度の記事しか書けなかったのだ。自分的にはがんばったつもりだが、これが今の実力というものなのだろう」
【Rails5】外部キーの設定メモ

##はじめに
よく忘れてしまうのでメモとして残しときます。

##前提条件
以下のテーブルを使います。
![reference.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/375365/5091a45d-06b8-20fb-a0d8-2f445572054a.png)

また「ユーザーテーブル」はすでに作成している前提で書いていきます。

##外部キーの設定
1. フォロワーテーブルを作成。
2. 作成したマイグレーションファイルに外部キーの設定を追加
3. データベースを更新

###方法
```
# ターミナル
rails g model follower user:references follower:references
```
#####user:references
これでreference型のuserカラムを作成しています。


モデルを作成したら以下のマイグレーションファイルも一緒に作成されます。

```ruby:db/migrate/20190727232828_create_follows.rb
class CreateFollowers < ActiveRecord::Migration[5.2]
  def change
    create_table :followers do |t|
      t.references :user, foreign_key: true
      t.references :follower, foreign_key: true

      t.timestamps
    end
  end
end
```

#####reference型について
reference型にすると下記の設定が自動でされます。
①カラム名がuserではなくuser_idとして追加される
②自動でindexが追加される
※reference型を指定しても外部キー制約は設定されていないので注意してください。

#####foreign_key: true
外部キー制約が設定されます。
参照するテーブルは指定したモデルのテーブルです。
例えば「t.references :user, foreign_key: true」では
カラム名を指定する箇所で「:user」というモデルが指定されているので、usersテーブルが参照先として設定されます。

####疑問点
上記の話だと、followerにもuserテーブルを参照先として設定したい時、:userを指定しないといけなくなる。
そうすると２個目のuser_idが出来上がってしまう。エラー出ると思うけど。

####解決方法
マイグレーションファイルに参照先のテーブルを指定しましょう。
上記で挙げたマイグレーションファイルを修正します。

```ruby:db/migrate/20190727232828_create_followers.rb
class CreateFollowers < ActiveRecord::Migration[5.2]
  def change
    create_table :followers do |t|
      t.references :user, foreign_key: true
      #  { to_table: :users }を追加
      t.references :follower, foreign_key: { to_table: :users }
      t.timestamps
    end
  end
end
```
{ to_table: :users }で参照するテーブルの指定ができます。
これでデータベースを更新してみましょう。

```
#  ターミナル
rails db:migrate
```

これで外部キー制約の設定が完了です。

##まとめ
1.フォロワーテーブルを作成。

```
# ターミナル
rails g model follower user:references follow:references
```

2.作成したマイグレーションファイルに外部キーの設定を追加

```ruby:db/migrate/20190727232828_create_followers.rb
class CreateFollowers < ActiveRecord::Migration[5.2]
  def change
    create_table :followers do |t|
      t.references :user, foreign_key: true
      #  { to_table: :users }を追加
      t.references :follower, foreign_key: { to_table: :users }
      t.timestamps
    end
  end
end
```
3.データベースを更新

```
#  ターミナル
rails db:migrate
```
Firebase Authentication の メールのリンクを踏んだあとのページをカスタマイズ

## やりたいこと
 - Firebase Authenticationによる、メール確認のメールや、パスワードリセット、メールVerify用のメールにて、リンクを踏んだあと、自分でカスタマイズしたページに飛ばしたい。

## やること
 - カスタムのメールのアクションハンドラを作成する
 - Firebase AuthenticationのアクションURLの変更

### カスタムのメールのアクションハンドラを作成する
以下を参考に、フロントにJSの処理を埋め込む。
https://firebase.google.com/docs/auth/custom-email-handler?hl=ja

`TODO:`となっている箇所は、自分で実装する必要がある。　

### Firebase AuthenticationのアクションURLの変更
Firebase Auth 画面の「テンプレート」に
 - メールアドレスの確認
 - パスワードの再設定
 - メールアドレスの変更
などの項目があるので、アクションURLの項目を設定する。
(一つの項目で変更すると、ほかも自動で統一化される)

![スクリーンショット 2019-02-01 21.11.48.png](https://qiita-image-store.s3.amazonaws.com/0/32691/3e15fa52-698b-4755-1f54-3fc9b5287581.png)

各ページ、最下部にアクションURLがある。
「アクションURLをカスタマイズ」を押せばフォームがポップアップされる。
![スクリーンショット 2019-02-01 21.13.23.png](https://qiita-image-store.s3.amazonaws.com/0/32691/b39dc848-dff7-7a8a-df36-4632c9e8b68c.png)

上記でアクションハンドラを埋め込んだページのURLをアクションURLの欄へ埋め込む。

以上。

## 参考
https://support.google.com/firebase/answer/7000714
https://firebase.google.com/docs/auth/custom-email-handler?hl=ja
Rubyの正規表現でバイナリファイルからPNG形式の画像を抽出

バイナリファイルからPNGを抜き出してみたくなった、ただそれだけ。Rubyでサクッとやる。

## コードと実行例

```ruby:extract-png.rb
filename = ARGV[0]
prefix = File.basename(filename, ".*")

PNG_REGEXP = /
	\x89PNG\r\n\x1A\n
	\x00\x00\x00\x0D IHDR .{13} .{4}
	.*?
	\x00\x00\x00\x00 IEND \xAE\x42\x60\x82
/mnx

File.binread(filename).enum_for(:scan, PNG_REGEXP).with_index(1) do |data, i|
	File.binwrite("#{prefix}-%04d.png" % i, data)
end
```

```shell-session:console
$ ruby extract-png.rb imageres.dll
$ ls *.png
imageres-0001.png
imageres-0002.png
...
imageres-0337.png
imageres-0338.png
```

## 説明
### PNGの仕様
PNGの[**マジックナンバー**](https://ja.wikipedia.org/wiki/マジックナンバー_(フォーマット識別子))（ファイル種別を示す先頭の固定バイト列）は `\x89PNG\r\n\x1A\n` の8バイト。

その後は**チャンク**と呼ばれる `<データ長><チャンク名><データ本体><CRC-32>` の並びが何個も続く。

* 最初のチャンクは `IHDR` でデータは常に13バイトなので、チャンク名までの8バイトが固定値となる。マジックナンバーと合わせるとPNGの先頭16バイトが固定値。
* 最後のチャンクは `IEND` でデータは無いので、データ長と[CRC（巡回冗長検査）](https://ja.wikipedia.org/wiki/巡回冗長検査)も含む12バイトが固定値となる[^IEND_CRC]。これがPNGの末尾。

PNGを*厳密に*探すには最低でも、マジックナンバーから始まってチャンクが連続することを確認しなければいけない。今回はそこまでするのが面倒なので、**バイナリデータからPNGの先頭と末尾を探し出せばOKとした**。

[^IEND_CRC]: IENDチャンクのCRCはコマンドでも確かめられる。 `$ crc32 <(echo -n IEND) #=> ae426082`

### 正規表現の構築
PNGが複数ある場合もあるので、PNGの先頭～末尾は*なるべく短く*なるよう抽出しなければならない。言い換えると、PNGの途中に先頭や末尾と同じ文字列が登場してはいけない。しっかり対策するには否定先読みや非包含オペレーターのような機能が必要だが、先頭や末尾の条件を長くしておけば誤検知はほぼ防げる[^fail]。そのため今回は最短マッチ `.*?` だけで済ませた。

正規表現にはいくつかオプションを指定している。

* m: `.` を改行コードにもマッチさせる。今回はテキストでなくバイナリなので、改行コードを特別扱いさせてはいけない。
* n: 正規表現の文字コードをバイナリ（ASCII-8BIT）に指定する。
* x: 正規表現中の空白を無視する。単に可読性を高めるためで、利用は必須ではない。

[^fail]: 今回試したファイルには、PNGでない場所にもマジックナンバーの列があり、 `IHDR` まで含めないと誤検知した。

### ファイル入出力と文字列スキャン
本当はファイルが巨大な場合を考慮して少しずつ入力＋スキャンできればよかった（StringScannerのIO版みたいな感じ？）が、方法がわからなかったので `IO.binread` で丸ごと読み込むことにした。※IOクラスに慣れなくてFileクラスを使った。

正規表現による抽出は [`String#scan`](https://docs.ruby-lang.org/ja/latest/method/String/i/scan.html) でいいものの、何となく以下のことを考慮して [`Object#enum_for`](https://docs.ruby-lang.org/ja/latest/method/Object/i/enum_for.html) を組み合わせた。

* `scan(PNG_REGEXP) { ... }` だと、連番を振る変数を別に用意しなければいけない。
* `scan(PNG_REGEXP).each.with_index(1) { ... }` だと、抽出した全PNGデータが一旦配列で保持されてしまいメモリを消費する。

## 参考

* [Portable Network Graphics (PNG) Specification (Second Edition)](https://www.w3.org/TR/PNG/)
	* 5 Datastream structure
	* 11 Chunk specifications
* [Ruby リファレンスマニュアル > 正規表現](https://docs.ruby-lang.org/ja/latest/doc/spec=2fregexp.html)
* [ruby - StringScanner scanning IO instead of a string - Stack Overflow](https://stackoverflow.com/questions/2459051)
AtCoder Beginner Contest 135 D - Digits Parade

コンテスト中には解けなかった。
https://atcoder.jp/contests/abc135/tasks/abc135_d

```python

s = '?6?42???8??2??06243????9??3???7258??5??7???????774????4?1??17???9?5?70???76???'
n = len(s)

dp = [[0 for i in range(n)] for j in range(13)]


if s[0] == '?':
    for i in range(10):
        dp[i][0] = 1
        
else:
    dp[s][0] = 1
    

mod_change_table = [(i * 10)%13 for i in range(13)]

    
for x in range(1, len(s)):
    for y in range(13):
        if s[x] == '?':
            for j in range(10):
                dp[(mod_change_table[y]+j)%13][x] += dp[y][x-1]
        else:
            dp[(mod_change_table[y]+int(s[x]))%13][x] += dp[y][x-1]

            
print(dp[5][n-1])
```
LeetCode / Maximum Depth of Binary Tree

（[ブログ記事](https://mhiro216.hatenablog.com/entry/2019/07/28/093232)からの転載）

[https://leetcode.com/problems/maximum-depth-of-binary-tree/]

Given a binary tree, find its maximum depth.

The maximum depth is the number of nodes along the longest path from the root node down to the farthest leaf node.

Note: A leaf is a node with no children.

Example:

Given binary tree [3,9,20,null,null,15,7],
<img width="110" alt="スクリーンショット 2019-07-28 8.48.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122973/5d181088-e806-c19b-347c-1a5dd1fe2661.png">
return its depth = 3.

再びバイナリツリーを扱った問題で、最も階層の深いところの木の深さを返します。
個人的にはNoteに<b>'Find one line solution.'</b>と付け加えてみたい。難しくない問題ですが、one lineで書けるとドヤ顔決めたくなりますね。

#### 解答・解説

##### 解法1
One line solutionです。自分で思いつけると気持ち良いですね。

```python
# Definition for a binary tree node.
# class TreeNode:
#     def __init__(self, x):
#         self.val = x
#         self.left = None
#         self.right = None

class Solution:
    def maxDepth(self, root: TreeNode) -> int:
        return 1 + max(self.maxDepth(root.left), self.maxDepth(root.right)) if root else 0
```
「もし木が存在していれば1+（左右の木のうち、より深い木の深さ）を返し、木が存在しなければ0を返す」関数を定義し、recursiveをとってやれば完成です。

##### 解法2
もちろんIterativeな解法もあります。可読性は落ちますが、複雑ではないですし、計算時間も解法1に見劣りしません。

```python
class Solution(object):
    def maxDepth(self, root):
        """
        :type root: TreeNode
        :rtype: int
        """
        depth = 0
        l = [root] if root else []
        while l:
            depth += 1
            l_tmp =[]
            for t in l:
                if t.left:
                    l_tmp.append(t.left)
                if t.right:
                    l_tmp.append(t.right)
            l = l_tmp
            
        return depth
```
deque型を使っても書けますが、今回は要素を取り出す操作はなくループを回すだけなので、deque型をわざわざ使うメリットはありません。
[Laravel] Font Awesomeが同一生成元ポリシーで読み込まれない時の対処法

初めてLaravelをデプロイした時Font Awesomeで少し詰まったのでメモ。

## エラー内容

以下の記事を参考にLaravel Mixを利用してFont Awesomeを導入したけど、Herokuにデプロイしてみると本番環境のみFont Awesomeが読み込まれないエラーに遭遇。
https://readouble.com/laravel/5.8/ja/mix.html
https://qiita.com/algi_nao/items/5d2befae8f367050ae7f


エラー文には以下のような表示がされている。
<img width="925" alt="スクリーンショット 2019-07-28 8.31.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/400652/9510cea4-7281-a570-6f5f-0ff15e621650.png">

ブラウザ(http://〜)から自サーバーに置いているフォントファイル(https://〜)を読み込む時にhttpとhttpsの違いによりクロスオリジンになってしまい、ブラウザ側でエラーが出ている。

なんでや(･_･?)

## 解決方法1
フォントファイルへアクセスするときはクロスオリジンを許可する方法。

Laravel Mixを使用した場合、以下のディレクトリにフォントファイルが格納されている。なので、このフォントファイルへのアクセスを許可してやればいい。
<img width="235" alt="スクリーンショット 2019-07-28 9.09.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/400652/98f2bd76-1a55-df42-6c0d-eb1f5424ca1d.png">

.htaccessファイルによってこのフォントファイル群へのクロスオリジンアクセスを許可します。
上記のfontsディレクトリ直下に.htaccessファイルを作成し、以下のように記述。

```apache:public/fonts/.htaccess
<FilesMatch "\.(ttf|svg|eot|woff|woff2)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>
```

拡張子を指定してフォントファイルへの制約を解除しています。
これを再デプロイすることでフォントファイルが読み込まれるはずです。

それでも表示されない場合は、ブラウザのキャッシュが残っていると表示されない場合があるので以下の記事を参考にキャッシュをクリア。
https://tekito-style.me/columns/laravel-css-changes#3_Laravel

## 解決方法２
httpsに統一してクロスオリジンにならないようにする方法。こちらの方が根本的な解決方法になる。

herokuは基本的にhttpsが有効になっているはずなのにアプリ内に生成されているリンクを見るとhttpになっている。
下のリンクではパスの生成に`route()`を使っているが、生成されたパスがhttpになってしまっている。
そのため、リンクから遷移するとブラウザの表示がhttpになってしまい、クロスオリジンになってしまう。

<img width="621" alt="スクリーンショット 2019-07-28 18.54.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/400652/49a64ec8-26e4-6272-a545-a0cd608ff340.png">

[参考記事](https://qiita.com/sutara79/items/a173b969474d9f5afe1b#https%E3%82%92%E5%BC%B7%E5%88%B6%E3%81%99%E3%82%8B)によれば、以下のようにAppServiceProvider.phpに追記することで本番環境のみhttpsを強制することができる。

```php:app/Providers/AppServiceProvider.php
    public function boot()
    {
       // 本番環境(Heroku)でhttpsを強制する
       if (\App::environment('production')) {
           \URL::forceScheme('https');
    }
```

これにより、生成されるリンクがhttpsになるためクロスオリジンではなくなりフォントファイルが読み込まれるはずです。

## 参考
[ファイルを別ドメインから読み込ませようとしたら怒られた](https://lab.ewigleere.net/blog/blog_entry/blog_201803/otf_cross_domain_read-20180314.html)
[XHR2でサブドメインのワイルドカードOriginに対してCORSを許可する設定、他。](https://qiita.com/kawaz/items/6a22c2c970c8d932a3a1)
[Laravel5.7: Herokuにデプロイする](https://qiita.com/sutara79/items/a173b969474d9f5afe1b)
【Android】LocalDate#compareToで日付を比較する際の注意点

以前、下の記事で、日付を比較する方法として`LocalDate#compareTo`を挙げました。
[【Kotlin】日付を比較し、その差分を取得する - Qiita](https://qiita.com/orimomo/items/c15fff517701a56b0cd9)
しかし、**日数の差分を取得する目的**で利用しようとすると、場合によっては期待結果と異なることがわかったので備忘録として書いておきます。

# `LocalDate#compareTo`の中身を確認する
実際に比較が走っている箇所はこちらです↓

```java:LocalDate
int compareTo0(LocalDate otherDate) {
    int cmp = this.year - otherDate.year;
    if (cmp == 0) {
        cmp = this.month - otherDate.month;
        if (cmp == 0) {
            cmp = this.day - otherDate.day;
        }
    }

    return cmp;
}
```

* まず`year`を比較する
* その差がなければ`month`を比較する
* さらに差がなければ`day`を比較する

という流れになっています。
つまり、**日数の差分を比較・取得できるのは年数・月数が同じ場合に限定され、それ以外の場合は意図した結果とならない**ことがわかります。

# 実際に比較してみる

## 同じ年、同じ月、違う日の場合
```kotlin
val day1 = LocalDate.parse("2019-07-01")
val day2 = LocalDate.parse("2019-07-05")
val diffDay = day2.compareTo(day1)  // diffDay: 4
```
→**「日数の差分」が取得できます。**

## 同じ年、違う月、違う日の場合
```kotlin
val day1 = LocalDate.parse("2019-07-01")
val day2 = LocalDate.parse("2019-08-05")
val diffMonth = day2.compareTo(day1)  // diffMonth: 1
```
→月の比較が行われるため、**「日数の差分」は取得できません。**

## 違う年、違う月、違う日の場合
```kotlin
val day1 = LocalDate.parse("2017-07-01")
val day2 = LocalDate.parse("2019-08-05")
val diffYear = day2.compareTo(day1)  // diffYear: 2
```
→年の比較が行われるため、**「日数の差分」は取得できません。**
サーバサイドエンジニアの採用ページから拾ってきた内容を軽くまとめておく

大手企業のエンジニア採用ページからサーバサイドエンジニアに関してのみ
「欲しい能力/経験」を拾ってきたのでまとめておきます。
コンピュータ・サイエンスについては他のブログさんを参考にしました。
初学者の私には10%も理解できません。なので、この中から絞ってインプットしていくつもりです。
#言語
- JavaScript(node.js)
- Java
- Scala
- C#
- Golang
- Ruby
- Python
- ShellScript

#DB
- RDB
- NoSQL(KVS)

#インフラ
- AWS
- GCP
- Terraform
- Itamae
- Chef
- Ansible

#コンテナ
- Docker
- Kubernetes

#コンピュータ・サイエンス
- データ構造
- 計算量
- アルゴリズム
- 理論計算機
- セキュリティ・暗号化
- 並列・非同期処理の基礎

#経験
- サーバAPI設計
- DB実装経験
- 負荷分析
- パフォーマンスチューニング
- アジャイル/スクラム
- コードレビュー経験
- 社外講演活動の経験
- 個人でのネット上の活動経験

ざっとこんな感じでした。やはり求められるレベル感もとても高く思えます。
言語に関しても知識に関してもたくさん列挙されてはいますが、どれを持ってる人が一番欲しいの？というのも知りたいですし
採用担当者や関係者とお話をして色々と理解を深めたいです。
Windows 10インストール用USBメモリをUbuntu20.04上で作成する (cui)

## 参考

* [[Linux][Ubuntu] Windows 10インストール用USBメモリをUbuntu上で作成する - Qiita](https://qiita.com/sengoku/items/e18e16ed1c268a242131)

## 手順

* Ubuntu20.04の場合、[libwxgtk3.0-0v5_3.0.4+dfsg-3_amd64.deb](https://packages.ubuntu.com/bionic/amd64/libwxgtk3.0-0v5/download)も必要なので入れておく。

```sh:インストール
sudo add-apt-repository ppa:nilarimogard/webupd8
# Enterキーを押下

sudo apt install -y woeusb
```

* woeusb
* woeusbgui

の２つのコマンドが利用できるようになる。今回はguiを用いない方法で進める。


## USBメモリに書き込み

```sh
woeusb --device "Win10_1903_V1_Japanese_x64.iso" /dev/sdX
```

書き込み中

![スクリーンショット_2019-07-28_09-17-13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25728/7122129c-68e0-da1f-a0b0-179374e20022.png)

完了

![スクリーンショット_2019-07-28_09-24-33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25728/4824b928-adce-bd56-4686-0c17c682bc85.png)


## アンインストール

```sh:インストール後の後片付け
sudo add-apt-repository --remove ppa:nilarimogard/webupd8

sudo apt purge woeusb
```
Swiftの代入演算子ってタプルを返すんだなって話

代入演算子の動きが違うんだなあ的なちょっとしたメモ
Swiftは5 (Windowsしかないのでひとまずオンライン環境)

Swiftの勉強中、「Javaの代入演算子的な使い方ってSwiftだとできるんだろうか」と思い立った。

```Java:Test1.java
        try {
            final File file = new File("src\\test.txt");

            try (final BufferedReader reader = new BufferedReader(new FileReader(file))) {
                String str;
                while((str = reader.readLine()) != null) {
                    System.out.println(str);
                }
            }

        } catch (IOException e) {
            e.printStackTrace();
        }
```

`(str = reader.readLine()) != null`の部分で、1行読み取った結果をstrに代入する。
代入演算子はその代入した値を返すので、つまりは1行読み取った結果の文字列とnullを比較することになる。

もっと単純なのだと、

```Java:Test2.java
int a = 1;
int b = a = 2;
```

これはaに2を代入した後で、a = 2は代入した値を返す。つまり、bには2が入るということ。

というわけで、Swiftでもやってみた。

```Swift:test1.swift
var a = 10
var b = a = 10

print(a)
print(b)
```

すると。

```Console
10
()
```

**bがタプルになった。**
これ、ほんとにタプルか？ときになったので・・・

```Swift:test1.swift
var a = 10
var b = a = 10

print(b == ())
```

すると。

```Console
True
```

**本当にタプルだった。**
（何でタプルを返すんだろう、って思ったけど気にしないことにした）
知らずにやってたらやらかしてたかも・・・と思ったのでメモ。
RaspberryPi ZERO WH購入、導入、運用。

#某秋月電子通商でRaspberryPI ZERO WHを購入
[秋月電子通商](http://akizukidenshi.com/catalog/top.aspx)
Raspberry PI Zero WH 本体 通販コード M-12961
※秋月さんの規約上、直リン禁止との事…。
※トップページと通販コードの併記ならOKとなっていた、以後気をつけよう。

同時にHDMIの変換や、使えそうなユニバーサル基板＋ピンソケットを購入。
・HDMIメス⇔miniHDMIオス変換コネクタ C-13431
・Raspberry PI Zero用ユニバーサル基板 P-14031
・ピンソケット(メス)2x20(40P) C-00085
※しかし後にOTGを知り、HDMI変換が無意味な買い物と知る

#Raspbian導入＆OTG+SSH設定
##SDカードのデバイス名を調べる
差し込み、`fdisk -l`なりすればわかる。
自動マウントするなら`mount`の表示からでもわかる。
尚、中身が消えます！中身確認もお忘れなく。(消えてからあれ？と思う事しばしば^^;)
##SDカードにRaspbianを書き込む
予めダウンロード＆解凍してある、raspbianのimgファイルを、ddコマンドで書き込む。
SDカードが遅いからか？時間がかかった。(何気に40分位？)
##SDカードをOTG用に書き換え＆SSHを有効にする
２つのファイルに加筆し、ファイル名sshな空ファイルを作る。
##接続側の設定
私の場合、対向機もLinux Mint 19.1 MATEです。
基本的には繋げば動くのですが、そのままでは使えません。
まず、`dmesg`や、`ifconfig -a`でデバイス名を取得します。
※自動的に設定されている時もありますが、もしなければデバイス名を指定して下さい。
※Linux Mintだから？初期値設定もあり、プルダウンもあるので、難儀する事は無いかと。

![Screenshot at 2019-07-28 07-54-58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185494/07d36a6d-85c0-535d-cb02-583e28444f94.png)
デバイス名が先程のデバイス名です。接続名は名前なので好きに設定できます。
私はraspi-usbとしました。

![Screenshot at 2019-07-28 07-56-18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185494/5849ece4-835a-176c-08fc-80d759f03a73.png)
IPv4は大事です。デバイス名があっていて、ここだけ出来ていれば大丈夫…だと思います。
念の為、接続完了にIPv4アドレスを必須としました。

![Screenshot at 2019-07-28 07-56-26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185494/cd8f4714-ea9c-41cb-b580-86f5ce4c1fbd.png)
ここは念の為IPv6を外しておきました。
あっても悪さはしないと思いますが、無駄にあるのも気持ち悪いので。

これだけ設定すれば、後はお馴染みの呪文、`ssh pi@raspberrypi.local`でログインしましょう。
※最初の一回目はsshのお約束、相手hostの確認yesが必要です。
※なお、最初の接続でpiアカウントに関するセキュリティを確保しましょう。
※初期パスワードのままの運用は危険です。
##最後の仕上げ
###アップデート＆アップグレード
最後に
`sudo apt update`
`sudo apt upgrade`
###piアカウントをどうするか？
調べていたら、皆さん新アカウントを作って、piアカウントを削除すると。
何かちょっと違和感を覚えて更に調べたら下記の資料にあたりました。
[[Raspbian]ユーザ名変更の個人的に「正しい」と思うやり方 | 純規の暇人趣味ブログ](https://jyn.jp/raspberrypi-username-change/)
これだと思う。
「作って→消して→作ったアカウント」ではなく、「piアカウントを自分の使いたい名前で！」でしょ。なんかスッキリする。
~~極めて個人的な趣味の問題だとは思いますが、見つけた資料の方の言い分もごもっともかな？とも。
でもSUDO使えばどんなファイルも触れる訳で、そこまで厳密さがいるのか？は今の私では判断出来ませんでした。~~
アカウント問題も無事解決、以後、環境整備へ。
※おまけ…最後のノーパスワードSUDOのファイルを編集した時、sudoしてviしてもパーミッションで怒られた。
※`:w!`で無理やり書き込んだけど…いいのだろうか？

#今後の課題
##定点カメラ
防犯カメラっぽく、１秒１枚位の画像記録型の利用を考えています。
またその静止画をまとめて動画に出来ればと思っています。
パラパラ漫画みたいに出来ればなぁ。(●´ω｀●)
##おもちゃ試験機
I2CやSPI、PWM等、マイコンで今まで行っていた事をお手軽に出来る。
ちょっとした小物を買った時、直ぐ試せるのはありがたい。
今まではPIC/AVRのソフトを書いて、焼いて、試して…と手間が多かった。
これで幾分実験が捗る…かな？
##RaspberryPI 4の予行演習
皆さんも狙ってますでしょ？(笑)
発売待ち遠しいですね。出たら買います！

#参考文献
今回の作業にあたり、調べたページです。貴重な情報ありがとうございます。
[Raspberry Pi zeroをUSB OTG（On-The-Go）でUSBケーブルのみで操作する！！ - Opensourcetechブログ](https://www.opensourcetech.tokyo/entry/2018/01/11/Raspberry_Pi_zero%E3%82%92USB_OTG%EF%BC%88On-The-Go%EF%BC%89%E3%81%A7USB%E3%82%B1%E3%83%BC%E3%83%96%E3%83%AB%E3%81%AE%E3%81%BF%E3%81%A7%E6%93%8D%E4%BD%9C%E3%81%99%E3%82%8B%EF%BC%81%EF%BC%81)
dockerでERROR: for mysql  Cannot start service mysql: driver failed programming external connectivity on endpoint test-mysqlが出た時の対処

#docker-compose run web rails new . --force --database=mysql --skip-bundleを実行するとエラーが出る

dockerでrailsの環境構築をしている中でいざ、railsのアプリを作成しようと以下のコマンドを実行
docker-compose run web rails new . --force --database=mysql --skip-bundle

そうすると以下のようなエラーが出る。
ERROR: for mysql  Cannot start service mysql: driver failed programming external connectivity on endpoint test-mysql (b2c5bfe3339ba18ad0892ba8fc5a1f427a89b3915035bc12b0c4c1207e016f75): Error starting userland proxy: Bind for 0.0.0.0:3306 failed: port is already allocated
ERROR: Encountered errors while bringing up the project.

ようはそのポートはもう割り振ってしまっていますよって事ですね。
そのためポートを一度削除する必要があります。

まずは占領しているポート番号を特定します。

ポート番号を特定したら以下のコマンドを実行
$ sudo lsof -i:3300 ＊ここではポート番号３３００にしています。

Password:
COMMAND  PID   USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
mysqld  94 _mysql   13u  IPv6 0x6973239584594d63      0t0  TCP *:mysql (LISTEN)

上の９４という番号を今度はkillします。
sudo kill 9447

そうしてもう一度
docker-compose run web rails new . --force --database=mysql --skip-bundle
を実行すれば完了です。
MySQL8.0にて、my.iniを編集するとサービスが起動しなくなった件について

日本語での情報が見当たらなかったので。
もっと頻繁に起こって質問されても良い問題だと思うんですが、、、
それとも常識なんでしょうか？

リアル「何もしてないのに壊れた」状態になったので、
参考になればと思い投稿しておきます＾＾

#やってた作業と問題
windowsにて、
MySQLの文字コードを変更するためにmy.iniを編集していた。
編集結果は適用されたが、(何故か)再起動後MySQLのサービスが起動しなくなった。

#解決方法
①バイナリーエディタを入手
②my.iniファイルをエディタで開き、頭の三文字を削除、保存し起動を確認。
（参考画像）
![キャプチャini.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/354671/528f438b-2201-37ce-3f2b-8ea31659e048.png)





※参考url
https://stackoverflow.com/questions/35670755/the-mysql-service-on-local-computer-started-and-then-stopped
jhersey29氏の投稿を参照のこと
Mac、Nginx、php-fpm7.2 の環境で Laravel 5.8を動かす

##経緯
上記環境でLaravelアプリケーションが動かなかった
（トップページは表示されたものの、ログインページが 404 Not Found となった）
ので、設定ファイルを変更したときのメモ。 

Mac、Nginx、php-fpm7.2構築方法はこちら
macにbrewでnginxとPHP7.2をインストールした
https://qiita.com/uneri/items/46bfeeabf77d76abb3ba


##概要
Nginxのデフォルトの設定ファイルをコピーして、以下2箇所を書き換える。

##詳細
###デフォルトの設定ファイルをコピー

```sh
cd /usr/local/etc/nginx/
cp nginx.conf.default nginx.conf
vim nginx.conf
```

###１箇所目
変更前

```sh:nginx.conf
      location / {
            root   html;
            index  index.html index.htm;
        }
```


変更後（xxxxはアプリケーションのパス）

```sh:nginx.conf
      location / {
            root /usr/local/var/www/xxxx/public;
            index index.php index.html
            try_files $uri $uri/ /index.php;
        }
```

###２箇所目
変更前

```sh:nginx.conf
       #location ~ \.php$ {
       #    root           html;
       #    fastcgi_pass   127.0.0.1:9000;
       #    fastcgi_index  index.php;;
       #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
       #    include        fastcgi_params;
       #}
```


変更後（xxxxはアプリケーションのパス）

```sh:nginx.conf
        location ~ \.php$ {
            root /usr/local/var/www/xxxx/public;
            fastcgi_pass   127.0.0.1:9000;
            fastcgi_index  index.php;
            fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
            include        fastcgi_params;
        }
```


###Nginxを再起動する

```sh
brew services restart nginx
```

###ブラウザでアプリケーションにアクセスする
http://localhost:8080/


##参考にした情報
All Laravel routes "not found" on nginx
https://www.digitalocean.com/community/questions/all-laravel-routes-not-found-on-nginx

MacでNingx、PHP7.1、php-fpmで環境構築（メモ）
https://qiita.com/nogizaka46/items/42a6ea1c634985f98564
Ruby*Seleniumでマウス操作actionにpauseさせる

Seleniumでマウス操作したいけど、マウスの動きが速すぎるのか、期待通りに画面操作ができず。。。
なので、とりあえずマウス操作にpauseを加えようと思ったところ若干はまったのでメモです。


### 動かないコード
下記のドキュメントを参考に。
https://www.rubydoc.info/gems/selenium-webdriver/Selenium%2FWebDriver%2FW3CActionBuilder:pause

キーボード操作時はkey_inputをpauseに渡せばいいよって書いてあったので、
マウス操作ならpointer_inputでも渡せばいいかと思い下記を実行。

```ruby:sample.rb
action_builder = driver.action

pointer = action_builder.pointer_input

elm = driver.find_element(:id, 'element_id')
driver.action.click_and_hold(elm) 
  .move_by(50,2).pause(pointer, 0.5) 
  .move_by(50,2).pause(pointer, 0.5) 
  .move_by(50,2).pause(pointer, 0.5) 
  .perform

```

pointer_input ないよっていわれる。そしてkey_inputもないらしい。ドキュメントに嘘つきやん。


### これで動いた

```ruby:sample.rb
action_builder = driver.action

pointer = action_builder.pointer_inputs[0]

elm = driver.find_element(:id, 'element_id')
driver.action.click_and_hold(elm) 
  .move_by(50,2).pause(pointer, 0.5) 
  .move_by(50,2).pause(pointer, 0.5) 
  .move_by(50,2).pause(pointer, 0.5) 
  .perform

```
なんでArrayで実装されてるのか謎。とりあえず[0]指定してみたけど期待通りに動いたからまあいっか。

### 関係ないけど
最初nodejsで実装しようとしてたんですが、そもそもActionsがないと怒られる…。

```
{ UnknownCommandError: Unrecognized command: actions
    at buildRequest (C:\nodejs_scripts\node_modules\selenium-webdriver\lib\http.js:375:9)
    at Executor.execute (C:\nodejs_scripts\node_modules\selenium-webdriver\lib\http.js:455:19)
    at Driver.execute (C:\nodejs_scripts\node_modules\selenium-webdriver\lib\webdriver.js:696:38)
    at process._tickCallback (internal/process/next_tick.js:68:7) name: 'UnknownCommandError', remoteStacktrace: '' }
```
http.jsにはActions定義されてるっぽいし謎すぎるから諦めてrubyで実装しました。これの原因わかる方いたら教えてください。。。

そもそもselenium使うならpython使えってことなのかな・・・・:innocent:
Python 表示　条件分岐　モジュール　基本

Python初心者です。自分用にメモします。

文字列　'test' 表示

```ruby:filename.rb
>>> print('test')
test
```

変数 age 内容表示

```ruby:filename.rb
>>> age = 20
>>> print(age)
20
```

条件分岐　if elif else


```ruby:filename.rb
>>> if age < 20: #20歳未満なら
	print('young')
elif age >= 20 and age < 60: #20〜59歳なら
	print('adlut')
else: #それ以外なら
	print('old')
```

モジュール化　引数ageの値でメッセージ変化

```ruby:filename.rb
>>> def age_massage(age):
	if age >= 10 and age <= 13:
		print('10-13')
	else:
		print('error')

		
>>> age_massage(12)
10-13
>>> age_massage(29)
error
>>> 
```
初心者のWebポートフォリオ作ってみたー②アニメーション

#はじめに
今回は、サイトに動きを付けるためにcssを用いてアニメーションを色々試してみました。
この記事では、animation プロパティと @keyframes を使ってCSSだけでできるアニメーションをまとめました。

#@keyframes について
アニメーションを動かすためには、@kyeframesを用いて、アニメーション開始から終了するまでどのようなアニメーションをするのか指定を行います。

@kyeframesは以下のように記述します。

```css

 @keyframes 任意の名前 {
  0% {
       開始時の動きの指定
  }
  100% {
       終了時の動きの指定
  }
}
```
動きの指定には、透過やtransformなどを用います。

#animationプロパティ
@keyframes で指定したアニメーションとアニメーション開始から終了までの時間を指定するにはanimation プロパティで指定します。

@keyframes ではアニメーションの開始時と終了時の動きのみを指定し、animation プロパティで適用するアニメーションやアニメーションの時間などを指定します。

| プロパティ       |       読み方 |
|-----------------|------------------|
| animation-name             |アニメーションの名前を指定 |   
| animation-duration           |アニメーションが始まって終わるまでの時間を指定 |    
| animation-timing-function            |アニメーションの進行の度合いを指定 |       
| animation-delay               |アニメーションが始まる時間を指定 |      
| animation-iteration-count             |アニメーションの繰り返し回数を指定 |     
| animation-direction        |アニメーションの再生方向を指定|      
| animation-fill-mode               |アニメーションの開始前、終了後のスタイルを指定 |       
| animation-play-state            |アニメーションの再生・停止を指定 | 
| animation       | 上記、8つのプロパティを一括で指定できる、ショートハンドプロパテ|      


#アニメーション
例えば、横にスライドするような動きを作る際は下記のようなコードになります。


@kyeframe

```css
@keyframes scale-up-hor-left {
  0% {
            transform: scaleX(0.4);
            transform-origin: 0% 0%;
  }
  100% {
            transform: scaleX(1);
            transform-origin: 0% 0%;
  }
}
```


animationプロパティ

```css
.任意のクラス名{
animation: scale-up-hor-left 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

```

ドロップシャドウのある図形を拡大・縮小させる動きは以のようになります。

@kyeframe

```css
@keyframes shadow-drop-center {
  0% {
            transform: translateZ(0);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
            transform: translateZ(50px);
    box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
  }
｝

```


animationプロパティ

```css
.任意のクラス名{
animation: shadow-drop-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

```

このように、@kyeframesとanimationプロパティを合わせることで色々な動きができます。
Install pytorch (include caffe2) on Windows Anaconda

conda create -n pytorch python=3.6
conda activate pytorch
conda install pytorch torchvision cudatoolkit=10.0 -c pytorch
conda install -c conda-forge protobuf
pip install onnx
conda install future
pip install git+https://github.com/apple/coremltools
pip install winmltools
pip install environment_kernels
conda install ipykernel
conda install matplotlib
conda install opencv
conda install scikit-image
conda install -c conda-forge ffmpeg
Rust楽しい

# まえがき

先輩にオススメされて「プログラミング言語Rust: 2nd Edition」の日本語版pdfを読み始めました。
https://y-yu.github.io/trpl-2nd-pdf/book.pdf
https://qiita.com/yyu/items/18df35988f3ea3b12af0

僕はまだ6章を読んでるところなのですが、ここまで読んだだけでもわかりました。

Rustすごい。楽しい。

いやほんとコンパイラが優秀って言えばいいんですかね。
常々プログラムを組んでいて気になっていたところを言語仕様として吸収してくれていて
快適にコーディングできそうな気配がしたのでぜひぜひ布教したい。
その一環としてQiitaに初めて記事を投稿してみようと思いました。

ぶっちゃけ僕が伝えたいことは全てpdfに書かれているのでpdfを読んでほしいのですが
忙しい人やまだ興味を持っていない人は読まないと思うので
途中まで読んですごいと思ったところだけ以下に書いていきます。

ところで日本語版pdfは最後まで読んだ人の話によると
途中から日本語が怪しくなるそうで本当は原文を読んだ方がいいらしいです。
僕は日本語版pdfしか読んでいないので、本文引用は日本語版pdfから行います。
6章までなら日本語版でも読める日本語でした。

# Rustすごい

## 理念的なところ

基本的にほぼ全ての挙動がコンパイル時に予想できるように言語仕様が決まっていて
コンパイルの時点でエラーが発生することでバグを未然に防げるような作りになっています。

## 不変と可変

基本的に全ての変数は不変で、可変にしたい場合は明示する仕様になっているので
「この変数は書き換えられる予定じゃなかったのに、いつの間にか書き換えられてる・・・」
みたいなことが起きにくくなっています。
不変な変数を書き換えようとすればことごとくコンパイルの時点でエラーが発生するので
「この変数は書き換えられない」と自信を持ってコーディングできます。

## 所有権

所有権という概念がイケてます。

>
全てのプログラムは、実行中にコンピュータのメモリの使用方法を管理する必要があります。プログラムが動作するにつれて、定期的に使用されていないメモリを検索するガベージコレクションを持つ言語もありますが、他の言語では、プログラマが明示的にメモリを確保したり、解放したりしなければなりません。Rust では第 3 の選択肢を取っています: メモリは、コンパイラがコンパイル時にチェックする一定の規則とともに所有権システムを通じて管理されています。どの所有権機能も、実行中にプログラムの動作を遅くすることはありません。

(pdfより一部引用)

具体的なことはpdfに書かれているのですが、要約すると

* 変数がスコープから外れるとその変数で確保されたメモリは解放される(これでヒープメモリの解放漏れはなくなる)
* 所有権という決まりがあって有効な2変数が同じアドレスを見ることはない(これでヒープメモリの二重解放がなくなる)
* ただしこれだけだと利便性が失われるので参照は可能(こちらも厳密な制約がありなんだかんだ安全)

といった感じです。すごい、要約すると全然伝わらない！
pdfには具体的なコード例も載ってるのですごく分かりやすいです。

## nullがない

Rustにはnullがないです。
nullがあると「`T`に値が入っていない可能性」というのが出てきて
必ずnullチェックをしなくてはいけない、みたいなことが発生します。
しかしnullが存在しないRustでは「`T`に値が入っていない可能性」はありません。
`T`であれば必ず値が入っていると断言できます。
ちなみにnullの代わりとなるものが `Option<T>` 型の `None` なのですが
nullとの違いは型が必ず決まっている、というところでしょうか。
`Option<T>`であれば必ずnullチェックにあたる操作を行い、
`T`であれば必ず(nullチェックを)しなくてよい、と決め打てるのはかなりのメリットです。

# おわりに

全然伝わらない・・・ やはりpdfを読んでもらうしかないのでは・・・
そもそも6章までしか読んでいないのもありますし

まで書いて数ヶ月この記事の下書きは放置されていました。
多分、あまりにも伝えたいことが伝わる文章が書けなくて拗ねてたんだと思います。
実際、今読み返しても全然伝わってこないですがせっかく書いた文章なので投稿しちゃいます。

なお、当の本人はその後も6章以降読んでないしRustも全然触らなくなってしまいました・・・
といってもそれはRustに魅力がなかったからではなく、どちらかというと本人の忙しさとかの問題なので
また時間をみつけてRustを再勉強してみようと思います。

この記事で「Rust触ってみようかな」と思う人が一人でも増えると嬉しいです！
記事の始めに書いたpdfは本当にわかりやすいので、ぜひぜひ読んでみてください！

ではでは。
AndroidのマルチモジュールでLint結果をDangerでコメントする

Androidアプリ開発をマルチモジュールですすめていた場合、Lintを実行すると各モジュールのbuildフォルダ配下にlintチェック結果が生成されてしまうため、Danger等でプルリクにコメントしていた場合にファイルを1つしか選択できず、特定のモジュールのみのコメントになってしまいます。そのため、**各モジュールの結果を1つのファイルにマージしてあげてからDangerにそのファイルを指定してあげる** ことで解決させます。

詳しい説明やBitriseでの設定などを [ブログ](https://m4kvn.hatenablog.com/entry/2019/07/28/030938) のほうに記載したので、こちらでは方法のみを記載します。

### lintの設定

各モジュールで以下のlint設定を行い、lint結果のファイルがプロジェクトのルートの `build-reports` というフォルダに集約されるようにします。

```build.gradle
android {
    lintOptions {
        xmlReport true
        xmlOutput rootProject.file("./build-reports/lint-results-${project.getDisplayName()}.xml")
    }
}
```

### lintチェック結果のXMLファイルをマージする

Lint実行後に、生成されたXMLファイルを全てマージした新しいXMLファイルを生成します。そのために、以下のRubyスクリプトをプロジェクトのルートで実行します。実行にはnokogiriが必要なのでインストールしておきます。

```shell
gem install nokogiri
```

```merge_lint_results.rb
require 'nokogiri'

Dir.chdir('build-reports')

new_doc = nil

Dir::glob('lint-results-*.xml') do |item|
  file = File.new(item)

  if new_doc.nil?
    new_doc = Nokogiri.XML(file)
  else
    doc = Nokogiri.XML(file)
    issues = doc.search('issue')
    new_doc.at('issues').add_child(issues)
  end
end

File.open('lint-results.xml', 'w') do |file|
  unless new_doc.nil?
    file.puts(new_doc.to_xml(indent: 4))
  end
end
```

```shell
ruby ./merge_lint_results.rb
```

すると `build-reports` に `lint-results.xml` というファイルが生成されます。

### Dangerでファイルを指定する

あとはDangerfileで生成された `lint-results.xml` を指定してあげます。

```ruby
android_lint.skip_gradle_task = true
android_lint.filtering = false
android_lint.report_file = "build-reports/lint-results.xml"
android_lint.lint(inline_mode: true)
```
モンティ・ホールをプログラムから理解する

## はじめに
[モンティ・ホール問題](https://ja.wikipedia.org/wiki/%E3%83%A2%E3%83%B3%E3%83%86%E3%82%A3%E3%83%BB%E3%83%9B%E3%83%BC%E3%83%AB%E5%95%8F%E9%A1%8C)というものがあります。
条件を一度、書き下してみたのですが、それでもなお理解できませんでした。
そこでムリに数学的に理解をするよりも、自分がやりやすいプログラムで試してみました。

## モンティ・ホールのプログラム
自分が最初に選んだ扉を「必ず」変える戦略で、勝敗がどうなるかを調べました。

```python
import random

win = 0
lse = 0

for i in range(10000):
    car = {random.randint(1,3)}
    ply = {random.randint(1,3)}
    
    if car == ply: #ここの条件式に入るのは1/3の確率
        moh = {list({1, 2, 3} - car)[random.randint(0,1)]}
        fnl = {1, 2, 3} - moh - ply #必ず負ける
    else: #ここの条件式に入るのは2/3の確率
        moh = {1, 2, 3} - car - ply
        fnl = {1, 2, 3} - moh - ply #必ず勝つ
    
    if car == fnl:
        win += 1
    else:
        lse += 1

print(win, lse)
#> 6714 3286
```

確かにWikipediaの記載通り、勝ちが負けの2倍程度になっていますね。。。

# プログラムから読み解くモンティ・ホール問題
プログラム中のif文に注目していただきたいのですが、

1. ```car == ply```（最初に選択した扉が当たりだった）の場合、今回のように必ず扉を変える戦略だと必ず負けてしまいます
2. 逆に、上記以外の```else```の場合、今回のように必ず扉を変える戦略だと必ず勝ちます
3. そして明らかに、```car == ply```になる(負け)確率は1/3で、そうならない(勝ち)確率は2/3です

よって、必ず扉を変える戦略を取ると、勝つ確率(2/3)が負ける確率(1/3)の2倍ということが分かりました。

## おわりに
私が直感的に理解しにくいと感じたのは、司会者の選択が勝敗に影響を及ぼさないというところでした。
特に```car == ply```の場合、```moh = {list({1, 2, 3} - car)[random.randint(0,1)]}```のように司会者は開けるべき扉を選びますが、これは勝敗に影響を与えません。①最初に当たりの扉を選び、②「必ず」扉を変える戦略を取っている時点で、負け確です。
巷の条件付き確率のお話とは裏腹に、「必ず」扉を変える戦略を取ると司会者の行動はどうでも良くなります。
「必ず」扉を変える戦略の下では、最初の選択で車を当てていれば最後は負けるし、最初の選択で車を外していれば最後は勝つ、という点がモンティ・ホールの要点でした。
メモ：スマホのwifiとLTEを切り替えたときにWebsocket通信はどうなるか？

- 2021.09.26 
    - [LTEからWifiに切り替えたら通信は切断されるのか？（QUIC） - フラミナル](https://blog.framinal.life/entry/2021/09/26/012352) を書きました

## 着想

スマホでwifi⇔LTEを切り替えた際に、セッションがきれるのかを確かめたかった。

## 実験方法

* スマホ→Webサーバ　間でWebSocket通信をはっておく
* Wifi⇔LTEを切り替える


## 結果

切り替えるとWebSocket通信が切断された。

* 送信元IPが変わってしまっているのでWebサーバ側からPSHパケットをおくってもRSTされる。
* 送信元IPが変わってしまっているのでクライアントからの通信が新規パケットとして扱われる

まあ、そりゃそうだよねってかんじ。以上。

## ＋α考察

ブラウザ通信の場合、送信元IPが変わったことにより切断された場合でもCookieを持ってさえいればリコネクト後も今までの状態を管理できるのでユーザがLTE⇔Wifiなどを切り替える？ようなシチュエーションを想定するならこっちで処理させた方が良い。
Dockerベースの機械学習環境を構築できるOSSを作った

# 概要
自分が所属している研究室のメンバーで、機械学習の実験環境をスムーズに作れるOSSを作り、githubで公開した。
# kronos
https://github.com/d-hacks/kronos
こちらにドキュメントなどが書いてあるが、ざっくり説明すると、このcliを入れると、機械学習のプロジェクトディレクトリの中にDockerのファイルを良い感じに作ってくれたり、その中で良い感じにjupyter notebookとかjupyter labとかを開いたり、Dockerのイメージの中でスクリプトを実行したりできる。
## 何が嬉しいの？
特殊なパッケージをいれたい場合は少しDockerの知識が必要になるが、基本的にはDockerの知識いらずでローカル環境とGPU環境で同じコードを動かすことができる。(内部的にはnvidia-dockerを使っている)

```
$ kronos init 
```

ってやると、既存のディレクトリ内に `docker`ディレクトリができる。

```
$ kronos build
```

で、`docker`ディレクトリ内のファイルを読み込んでイメージをビルドし、

```
$ kronos run experiment.py
```

で、イメージ内でスクリプトが実行される。`--gpu`オプションを使うと、gpuモードになって、gpuをdocker経由でアクセスできるようになる。


## まだ足りない点
今後は、より簡単にDockerイメージの中で実験を行えるようにしたいので、opencvだったり、強化学習系の実験に必要なライブラリだったりをもっとも楽にいれられるようにしたい。それこそ、Dockerの知識がなくてもできたら最高に嬉しい。

## プルリク大歓迎です
どんどん新しいプルリクを投げてくれると嬉しいです。もっとシームレスなDocker環境の構築ができるツールを作っていきたい。。。
pythonで百ます計算のプリント作った話

家庭教師のアルバイトで使う百ます計算 [^1] のプリントを、PythonのPandas使ってlatexソースとして吐き出させようと考えた。

#成果物
![pdf_page-0001.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159469/99bc0eeb-ea0e-7187-589f-f127f1c80cb7.jpeg)


#ソース

```source.py
#Python 3.7.2
#pandas 0.24.2
import random
import pandas as pd
#プリアンブル
priamble=r"""
\documentclass[dvipdfmx,autodetect-engine,12pt]{jsarticle}
\usepackage{extsizes}
\begin{document}

\begin{center}

\large{百ます計算}\\
"""
print(priamble)
#吐き出したいページ数を指定
pages=10
num=pages*2-1
for x in range(num+1):
    #行(1～9)確保
    index1 = list(range(1,10))
    #シャッフル
    random.shuffle(index1)
    #列(1～9)確保
    columns1 = list(range(1,10))
    #シャッフル
    random.shuffle(columns1)
    df=pd.DataFrame(index=index1,columns=columns1)
    #DataFrame形式のtableのNaN値をスペース埋め
    df1=df.fillna(" ")
    #tableの罫線追加&jsarticle環境での諸々を置換
    print(df1.to_latex(column_format="|l||l|l|l|l|l|l|l|l|l|").replace(r"\bottomrule","")\
.replace(r"\toprule",r"\hline").replace(r"\\",r"\\\hline").replace(r"\midrule",r"\hline"))
    #一番最後の表を除き、下部の表のタイトルを出力
    if(x!=num):
        mid=r"""
    
\vspace{\baselineskip}
\vspace{\baselineskip}
\vspace{\baselineskip}
\large{百ます計算}\\
"""
        print(mid)
ending=r"""
\end{center}
\end{document}
"""
print(ending)
```
#感想
もうすこし表を大きくしたかったです(geometryパッケージを使って余白調整もしてみましたがうまく行かないです、アドバイスお待ちしております。)。

フォントがきれいじゃないから埋め込んだほうがいいのかも…

ちょっとした思いつきとPythonの練習も兼ねてやってみたが、実際に困ったのはTeXの見栄えをいかに良くするかだった。

TeXツライ。

最後まで読んでいただきありがとうございました。

[^1]: 正確には81マスですが一般的名称(百ます計算 - Wikipedia https://ja.wikipedia.org/wiki/%E7%99%BE%E3%81%BE%E3%81%99%E8%A8%88%E7%AE%97)
)を用いました。
Rustの可変参照の挙動がわかりにくい

# TL;DR

- 「可変参照型」は通常の所有権ルールに従わない。
- 「可変参照型」には、ライフタイムが異なる場合に `reborrow` という特殊な借用？ move ？ が存在する


# 本文

Rustの不変参照は`Copy`である。

```rust:sample1.rs
fn main() {
    let v: i32 = 120;
    let v_ref = &v;
    let v_ref2 = v_ref;

    println!("{}", *v_ref); // 120
}
```

一方、可変参照はCopyではないそうだ。つまり、一度moveされたら二度と使うことはできない。

```rust:sample2.rs
fn main() {
    let mut v: i32 = 120;
    let v_mut = &mut v;
    let v_mut2 = v_mut;

    println!("{}", *v_mut); // コンパイルエラー
}
```

```rust:sample3.rs
fn main() {
    let mut v: i32 = 120;
    let v_mut = &mut v;
    let mut v_mut2 = v_mut;

    println!("{}", *v_mut); // コンパイルエラー
}
```

エラーメッセージとして、

```
move occurs because `v_mut` has type `&mut i32`, which does not implement the `Copy` trait
```

が表示されることからも、「可変参照の所有権」がmoveされていると理解できる。

しかし、関数の引数として渡しても、「可変参照の所有権」はmoveされず、この参照はそのまま使い続けられる。

```rust:sample4.rs

fn mut_fn(v_mut: &mut i32) -> &mut i32 { v_mut }

fn main() {
    let mut v: i32 = 120;
    let v_mut = &mut v;
    mut_fn(v_mut);

    println!("{}", *v_mut); // 120
}
```

それどころか、関数を経由して可変参照を持ち回れば、別の変数に可変参照を入れても、使い続けられる。

```rust:sample5.rs
fn mut_fn(v_mut: &mut i32) -> &mut i32 { v_mut }

fn main() {
    let mut v: i32 = 120;
    let v_mut = &mut v;
    let v_mut2 = mut_fn(v_mut);
    println!("{}", *v_mut); // 120
}
```

別の変数に可変参照を入れて、それを使っても、元の変数の可変参照を使い続けることもできる。

```rust:sample6.rs
fn mut_fn(v_mut: &mut i32) -> &mut i32 { v_mut }

fn main() {
    let mut v: i32 = 120;
    let v_mut = &mut v;
    let v_mut2 = mut_fn(v_mut);
    let v_mut3 = mut_fn(v_mut2);
    println!("{}", *v_mut3); // 120
    println!("{}", *v_mut2); // 120
    mut_fn(v_mut);
    println!("{}", *v_mut); // 120
}
```

「可変な可変参照変数」でも発生する。

```rust:sample7.rs
fn main() {
    let mut v: i32 = 120;
    let mut u: i32 = 150;
    let v_mut = &mut v;
    let mut u_mut = &mut u;
    u_mut = v_mut;
    println!("{}", *u_mut); // 120
    println!("{}", *v_mut); // 120
}
```

ただし、一度元の可変参照を使ったら、複製された可変参照はもう使えない。

```rust:sample8.rs
fn mut_fn(v_mut: &mut i32) -> &mut i32 { v_mut }

fn main() {
    let mut v: i32 = 120;
    let v_mut = &mut v;
    let v_mut2 = mut_fn(v_mut);
    println!("{}", *v_mut2);
    println!("{}", *v_mut);
    println!("{}", *v_mut2); // コンパイルエラー
}
```

以上からわかる結論。

- 可変参照はlet文で変数自体を直接代入すると「可変参照の所有権」がmoveされ、元の変数からは使えなくなる。
- 関数に渡したり、別の可変参照で初期化された可変変数に渡した場合
    - 「可変参照の所有権」は一時的に預けることができる。
    - しかし元の変数から可変参照の完全に所有権が失われているわけではなく、元の変数を使用した時点で所有権が「回収」される。
    - 値のmoveではこのようなことは起こらない。

```rust
#[derive(Debug)]
struct Foo {}

fn foo_fn(foo: Foo) -> Foo { foo }

fn main() {
    let f = Foo {};
    let f2 = foo_fn(f);
    println!("{:?}", f); // コンパイルエラー
}
```

可変参照を取る関数やメソッドに可変参照を一度渡したら、関数やメソッドから可変参照を返却して取得しなおさなきゃいけないとなったら不便だから、こういう挙動になるのが妥当なのはわかるけど、なんだか直感的ではない動きで少し困惑。

きっと理解が間違っていると思うので詳しい方見ていたら教えてください。

## 追記

https://yohhoy.hatenadiary.jp/entry/20160726/p1

こちらに回答がありました。
元の参照と異なるライフタイムに対しては「再借用」なるものが行われ、この場合は再借用が終了したら所有権が返ってくるようだ。
`sample6.rs` には明示的なスコープはないけど、最近のRustには `Non-lexical lifetime` なるものがあるので、再借用元が使用されるまでの区間を別のライフタイムとして扱っていると思われる。
A-FrameとAR.jsでマーカーレスWebAR

こんにちは！
この記事ではタイトルの通り、aframeとAR.jsでマーカーレスwebARをつくります！

**※iOS12以降でマーカーレスARをやる場合は少しややこしいです。記事の最後で注釈をつけます**

## 前提
前提として、WebXRを実現する方法をちょっと整理します。
活用できるライブラリには（2020年現在）これらが挙げられます。

- **AR.js** ： 簡単にマーカーベースwebARが作れるとして有名。OSS。
- **A-Frame** : mozillaの開発したWebXRライブラリ。OSS。
- **8th Wall**（8th Wall Web） : 安定した画像認識や平面認識など、機能とクオリティーが充実してる。14日間くらいのお試し版があるけど基本有料。

8th Wall Webは特に平面検知の精度などで抜きん出ていて、リッチなコンテンツを作るのに優れていますが、がっつり開発するためには課金が必要です。

そのため、今回は無料で触れる A-Frame と AR.js を使用してマーカーなしARを作りたいと思います。


## つくった

```index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
    <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js"></script>
    <title>untitled</title>
  </head>
  <body>
    <a-scene embedded arjs>
      <a-box position="5 0 -7" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
    </a-scene>
  </body>
</html>
```

AR.jsは、基本マーカーARの時は`<a-marker>`という感じにマーカーをタグでおきますが、
マーカーなしの場合はこんな感じで`<a-box>`などのオブジェクトを直置き（？）してあげると、シンプルに目の前にオブジェクトが現れてくれます。

**aframe**
https://aframe.io/
**AR.js**
https://github.com/jeromeetienne/AR.js/blob/master/README.md

できたものはこちら
![gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306452/ddc3a2b1-7633-d5b1-61bf-4248287f862f.gif)

## まとめ
AR.jsってマーカーARしかできないのかなと思ったのですが、案外A-FrameでWebVRつくる時と同じようにpositionなど指定すればオブジェクトをARで表示することができました。

しかし見てわかる通り平面検知などなく貼り付いてるだけの完全3DoF。。
なので「平面配置」というより、空中に浮いてるという表現をするなど、3DoFでも違和感ないように表現に気を使う必要がありそうです。

# iOSでマーカーレスWebAR
※2019年12月追記しました

iOS12と、2019年12月現在最新バージョンであるiOS13でマーカーレスWebARをやろうと思うと色々ややこしいので注意が必要です。

iOS12以降では、デバイスのモーションセンサーが自動（初期設定）で取得できないため
スマホを持って見回す動作をしても、以前のように画面も連動して360度見回すことができなくなってしまいました。。

iOS13ではそれを回避する方法もあります。
それについてはこちらの記事が参考になりますのでこちらをご覧ください。
https://bagelee.com/programming/ios13-webar-webvr/
AWS Chatbot（Beta）を試してみた

AWS Chatbot（Beta）を試してみました。

# どんなもの？
SlackとAmazon Chimeに通知するサービスです。
データソースは以下のAWSサービスが選択できます。(2019-07-28時点)

- AWS Billing and Cost Management
- AWS CloudFormation
- Amazon CloudWatch
- Amazon GuardDuty
- AWS Health
- AWS Security Hub

## 1. Slackを選択
AWS Chatbotから[Configure new client]を選択後、Slackを選択する。
<img width="600" alt="01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192584/a5f5b844-cf58-cd52-ae1a-30df7a913a9b.png">

## 2. Slack側設定
<img width="631" alt="02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192584/56c60940-f439-143f-1a80-a5ea90865d4d.png">

<img width="448" alt="04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192584/8c7f91a3-1544-210d-fde2-4b98e5afac64.png">


## 3. AWS Chatbot側設定
Slackチャネル、Role、SNSトピックを指定する。
<img width="1015" alt="05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192584/f49988a4-7c5f-7bc3-bb58-04f28edb4f44.png">
<img width="1010" alt="06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192584/be737004-4fbd-b46c-e36e-37946bbb16bd.png">
<img width="1009" alt="07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192584/bb4bd2ef-24ed-a276-6652-d7c156508b4e.png">

## CloudwatchアラームをSlackに通知した例
上記で指定したSNSトピックをCloudwatchAlarmの通知先に設定後、アラームを発生させる。
<img width="633" alt="09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192584/3c57aca1-c9c3-0098-2c88-72877d566244.png">



# 雑感
現在の機能は通知だけでちょっと寂しいので、HubotのようにSlackからデプロイ等ができるようにならなかなぁ。
ホームページ作成に役立つHTML, CSSの知識



# 1 はじめに
- ホームページを作りたいと思いました。
- しかし初心者であるため、中々上手く作ることが出来ませんでした。
- 実際にホームページを作っている友人を頼ることにしました。
- 今回はその友人から教えてもらったものの中で、個人的に役に立つと思うものをいくつかまとめてみました。

#2 役に立ったもの

##2-1\<table>タグ
表を作成するために使用するタグ。
下のような表を作ることが出来ます。colspanやrowspanを用いることで結合もできます。

<table>
<tr>
	<td colspan="3">これは表です。結合もできるよ。
</tr>
<tr>
	<th>項目1</th><th>項目2</th><th>項目3</th>
</tr>
<tr>
	<td>リンゴ</td><td>バナナ</td><td>オレンジ</td>
</tr>
</table>


```html:コード

<table>
<tr>
	<td colspan="3">これは表です。結合もできるよ。
</tr>
<tr>
	<th>項目1</th><th>項目2</th><th>項目3</th>
</tr>
<tr>
	<td>リンゴ</td><td>バナナ</td><td>オレンジ</td>
</tr>
</table>

```


##2-2メディアクエリー
スマホ対応をするときなどに使用します。
画面の大きさによってcssの処理を変更することができます。
記述する際は画面サイズが「大きい→小さい」もしくは「小さい→大きい」の順に記載してください。

```css:コード
/* 画面サイズが1000pxまでのときに対応 */
@media screen and (max-width: 1000px) {
	/* ここにcssを記述 */
}

/* 画面サイズが600pxまでのときに対応 */
@media screen and (max-width: 600px) {
	/* ここにcssを記述 */
}
```


##2-3padding
余白を作る際に使用します。
似たようなものにmarginというものもあります。
違いは余白を作る位置なのですが、この二つの違いはまだ感覚でしか理解できてないため説明は省きます。
今回はpaddingの値指定についてです。paddingは値の1～4つの値を設定して使います。
4つ値を指定する場合の、値に対応する位置を全く覚えきれず、使う度に調べてましたが友人から覚え方を教えていただきました。
4つ指定の場合は上、右、下、左の順番ですがこれは**時計回り**で覚えればよいそうです。
これでいちいち調べなくて済みます。

```css:コード
/* 1つの値を設定した場合は、上下左右全てにその値が反映される */
padding:5px;

/* 2つの値を設定した場合は、上下に0px左右に5pxが反映される */
padding:0 5px;

/* 3つの値を設定した場合は、上に0px左右に3px下に5pxが反映される */
padding:0 3px 5px;

/* 4つの値を設定した場合は、上に0px右に1px下に3px左に5px全てにその値が反映される */
padding:0 1px 3px 5px;

```

##2-4タグのmargin
htmlでよく利用するh1タグなどがありますが、こちらはあらかじめmarginが自動で設定されています。
そのため予測していたレイアウトとは、少し違った表示になることがあります。
h1 {margin: 0;}などで上手く調整しましょう。


#3 最後に
この辺りを知っているだけでかなり作りやすくなりました。
自分で勉強するのもいいですが、やはり詳しい人に教えてもらうほうが効率いいですよね。
Pycharmでrhinoscriptsyntaxのコード補完を有効にする

# Pycharmでrhinoscriptsyntaxのコード補完を有効にする

## はじめに
Pycharmでrhinoscriptsyntaxでコード補完を有効にするための手順が少々ややこしく説明する機会も多いため教材としてまとめたいと思います。

ちなみに公式のPyCharm使用ドキュメントは[こちら](https://pleiades.io/help/pycharm/meet-pycharm.html)になります。

## コード補完とは
コード補完とは、途中まで入力すると残りの文字列を入力することなく、IDE側が候補を挙げてくれるという機能です。
![スクリーンショット (70).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/400162/944c15b6-6853-ce7f-2538-9c234528bf9c.png)



これがあるかないかで開発速度がグンと上がるので利用したほうが良いです。

## 手順
1. 適当な.pyファイルを作成する。
2. Fileからsettingをクリック
3. Project Interpreterを選択
4. 右上にあるプルダウンボタンをクリックしShow All...をクリック
5. 右にある5つのアイコンのうち一番下にあるアイコンをクリック
6. Interpreter Pathsというポップアップが出てくるので、右上にあるプラスボタンをクリック。
7. User/ユーザー名/AppData/Roaming/McNeel/Rhinoceros/6.0/Plug-ins/IronPython/settings/lib までクリックしOKを選択
8. 最後にApplyを選択し完了


上記の手順で設定することができます。
以下は補助的にスクショを添付しておきます。

1.
![qita1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/400162/dd6fb895-64d8-b9ed-a362-df8031a7960b.png)

2.
![スクリーンショット (55).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/400162/b0e859fb-461f-6ff5-a141-e6fbc0d8cf97.png)

3, 4.
![スクリーンショット (56).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/400162/f78e4753-4024-db96-85f8-623c45ea2d50.png)

5.
![スクリーンショット (67)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/400162/27386ec8-dbae-5d6f-8388-ba4168b169fc.jpeg)
JavaFX（ローカルアプリ）でJARにしてもcssを読めるようにするには。

#経緯と試したこと

毎回JARにする度にeclipse上で動くものが動かず、パスかURLに苦しめられます。

```java:SceneBuilder.java
scene.getStylesheets().add(getClass().getResource("../application/application.css").toExternalForm());
```

上のコードがそうで、eclipseの再生ボタンでテストすると正常にスタイルされます。
でも、実行可能JARにビルドしてクライアントに渡したら動きません。
（だったら開発環境でも動かないでよ・・:sob:）
割愛しますが、他にも色々試して、他のサイトの方の成功事例をかたっぱしから試しましたが今度は開発環境ですら動かなかったり。

そもそも、eclipse上でもsystem.out.printlnで調べたパスをそのままターミナルにcat [調べたパス]でエンター押したらcssの中身が表示されるのに、そのパスをそのまま文字列リテラルで代入してもファイルが見つからないと怒られる。何故なのか。Javaのパス本当に難解です。

#解決法
で、私の場合の成功事例。
Javaコードには何も書きません。

まず、**該当のcssファイルを、そのcssを適用したいfxmlがあるディレクトリに移動します。**

次に、**そのcssを適用したいfxmlをeclipseからSceneBuilderを開いて、画面左端のDocumentペインでBorderPaneなどのルートコンテナを選択し、右端のInspectorペインのPropertiesタブでStylesheetsの項目に入力します。**この時入力欄の右の+ボタンからファイラーを開いて選ぶのが無難。

できればcssはcssフォルダにまとめたいのですが、ちょっと動かしただけでパスがズレたりするのでどこまで動かせるかはtry＆errorになりますね。詳しい人、コメントください。
v-slotのサンプルコード（Vue.js初心者）

Vue.js公式サイトの[スコープ付きスロット](https://jp.vuejs.org/v2/guide/components-slots.html#%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%97%E4%BB%98%E3%81%8D%E3%82%B9%E3%83%AD%E3%83%83%E3%83%88)に、v-slotの解説とコード断片が載っていますが、 最初読んだ時、データの関係が私にはよく理解できず、試しにコード書いても変数のReferenceErrorで進まず。「サンプルコード全体(HTML+JavaScript)は一体どのように書けば動作するのか？」と躓いてしまいました。が、試行錯誤してやっとわかったのでここに書きます。

- 対象Version: Vue.js 2.6.10+

### 躓いた箇所
この解説文。
> 親コンポーネント内でスロットコンテンツとして user を使えるようにするためには、<slot> 要素の属性として user をバインドします:

```html:HTML
<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>
```
v-bindの両辺に``user``が出てくるので、いざコードを書いていくと「自分が今ここに書いた``user``は上の解説文でいうどれのこと？」と、データの関係があやふやな状態になり頭が混乱していきます。
### わかった！
v-slotのコーディングを実演しているこの動画を観て、コツがわかりました！  
[Vue 2.6 First Look And V-Slot Tutorial!](https://www.youtube.com/watch?v=qCrogbJSHnk)

### 完成したサンプルコード
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="js,result" data-user="kaz_hashimoto" data-slug-hash="YmGbJe" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="[Vue.js basics]  v-slot example 1">
  <span>See the Pen <a href="https://codepen.io/kaz_hashimoto/pen/YmGbJe/">
  [Vue.js basics]  v-slot example 1</a> by Kazuhiro Hashimoto (<a href="https://codepen.io/kaz_hashimoto">@kaz_hashimoto</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
#### 理解を助けるためのポイント
先にJavaScript側から。

```javascript:JavaScript
Vue.component('current-user', {
  data: function() {
    return {
      xxuser: {
        firstName: 'Kazuhiro',
        lastName: 'Hashimoto'
      }
    };
  },
  template:`
<span>
  <slot v-bind:content="xxuser">
    {{ xxuser.lastName }}
  </slot>
</span>
`
});

new Vue({
  el: '#app'
});
```

- v-bind:○○○="▲▲▲" の左辺と右辺で別々の名前を付けて、見た目で区別できるようにしておく。上記サンプルでは、左辺○○○を``content``、右辺▲▲▲をあえて``xxuser``とした。
- ``data``プロパティは``Vue.component``の引数に渡すオブジェクト内で定義し、その値は関数リテラル。で、その関数の戻り値は、``xxuser``を要素に持つオブジェクト。
- ``template``に記述するslotのコンテンツ``{{...}}``に入れるのは、v-bind:○○○="▲▲▲"の▲▲▲、つまり``xxuser``経由でアクセスする式。

```html:HTML
<div id="app">
  <current-user>
    <template v-slot:default="slotProps">
      {{ slotProps.content.firstName }}
    </template>
  </current-user>
  <hr>
  <current-user></current-user>
</div>
```
- v-slotの右辺の変数``slotProps``でスロットプロパティを受け取る（名前は何でもよい）
- ``Vue.component``で指定した``data: function() {...}``の戻り値のオブジェクトが、``slotProps``に相当するイメージ。
- ``slotProps``から``xxuser``のメンバーにアクセスするには、v-bind:○○○="▲▲▲" に指定した○○○部分、つまり``content``経由でアクセスする。（ココが最初わからなくてハマった）


v-slotを使ったコーディングに慣れるまでは、自分にわかりやすい``v-bind:content="xx..."``形式でサンプルコードを書いて練習しようと思います。