OmniAICreator/Qiita-1.07M huggingface dataset:
PHPのIterable型を使ってみる

# TL;DR
- PHPが用意してる型の１つの**Iterable型**に関する内容
- 特に、array型を受け取る前提、かつ、型に厳格さを求めるfunctionなどの場合、**Iterable型**での定義は最適な実装方法の１つではないかと感じる

# 前提
- 実行環境
    - **PHP 7.1.32**

## 注意
>Iterable は PHP 7.1 で導入された疑似型です。array、あるいは Traversable インターフェイスを実装したオブジェクトを 許容します。これらの型は、いずれも foreach で繰り返し可能であり、また、 ジェネレータ 内で yield from できます。

引用元：https://www.php.net/manual/ja/language.types.iterable.php

上記に記載されているように、公式ドキュメントには、**Traversable インターフェイスを実装したオブジェクト**も許容するとあるが、実際のユースケースとして、arrayの方が頻度は多いと判断したため、arrayを主に利用したサンプルコードと実際の挙動について触れてみる

# 20200128 追記
- 以前記載したサンプルコードが適切ではなかったため、@picklesさんのご提示いただいたサンプルコードを引用させていただきます。非常に助かります。ありがとうございます。

```php
<?php

function checkIterable(iterable $iterable): string
{
    return gettype($iterable);
}

var_dump(checkIterable(['apple', 'orange', 'banana']));

$type = new class implements iterator {
    private $position = 0;
    private $array = [
        'apple', 'orange', 'banana'
    ];

    public function __construct()
    {
        $this->position = 0;
    }

    /**
     * @inheritDoc
     */
    public function current(): string
    {
        return $this->array[$this->position];
    }

    /**
     * @inheritDoc
     */
    public function next(): void
    {
        ++$this->position;
    }

    /**
     * @inheritDoc
     */
    public function key(): int
    {
        return $this->position;
    }

    /**
     * @inheritDoc
     */
    public function valid(): bool
    {
        return isset($this->array[$this->position]);
    }

    /**
     * @inheritDoc
     */
    public function rewind(): void
    {
        $this->position = 0;
    }
};
var_dump(checkIterable($type));

$type = new class {};
var_dump(checkIterable($type));
```

- 実行結果

```console
% php iterable.php
string(5) "array"
string(6) "object"
PHP Fatal error:  Uncaught TypeError: Argument 1 passed to checkIterable() must be iterable, object given, called in /dev/iterable.php on line 64 and defined in /dev/iterable.php:3
...
```
BraveがGood！

# Braveとは
>より良いインターネットを目指して
ブラウザとはどうあるべきか、もう一度考えてみました。
まずはパワーを取り戻していただくことです。比類なき速度、堅牢なセキュリティとトラッカーをブロックすることでプライバシーを保護します。さらにプライバシーを重視した広告を閲覧することで報酬を得て、パブリッシャーがフェアな収益を得られる仕組みを提供します。
　[Brave公式](https://brave.com/ja/)　より

Braveは2015年から開発が始まった新しいブラウザです。Brave開発秘話は[こちら](https://gigazine.net/news/20191114-brave-road/)で見ることができます。

独自の広告システム「BRAVE REWARDS」を採用していることでご存知の方もいるのではないでしょうか？（[Wikipedia](https://ja.wikipedia.org/wiki/Brave_(%E3%82%A6%E3%82%A7%E3%83%96%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6))によるといろいろゴタゴタがあるみたいですね）

よって色物のイメージを持たれるかもしれませんが、私は普通のブラウザとしてとても好きです。
Firefox、Chorme、Opera、Vivaldi以外のブラウザとしてがんばって、ブラウザの多様性を上げてほしいのでここでご紹介します。

※Windows向けにはインストーラーがあります。Ubuntuにインストールする場合にはレポジトリを追加する必要があります（[こちら](https://brave-browser.readthedocs.io/en/latest/installing-brave.html#linux)を参照）。

# 個人的Goodポイント
公式にはアドブロックやTorブラウジング、BRAVE REWARDSが押し出されていますが、私は以下の点で気に入っています。
（Torブラウジング、BRAVE REWARDSは全然使っていないのでご紹介できません。ごめんなさい）

## 速い
Windows10、Ubuntu18.04の環境下では Firefox、Chrome(Chromium)、Vivaldiよりも体感で速いです。
起動はもちろんのこと、ページを開く際もサクサクです。
公式のパフォーマンスデータは[こちら](https://brave.com/brave-one-dot-zero-performance-methodology-and-results/)

## シンプル
ホーム画面やUIをとてもシンプルにできます。
ふと調べものをしたいときなどに、ごちゃごちゃ感に煩わされずに済みます。
![Brave_home.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535720/40d84904-fd55-2294-13bc-83d18b021b82.png)
あと画像がきれい。個人的には、たまにSpaceXの画像が出てくる点がポイント高いです。


## 基本的な操作感や拡張機能はChromeやVivaldiと同じ
Chromiumベースで開発されているので、大まかな操作等はChromeやVivaldiとほぼほぼ同じです。よってあまり違和感を感じません。
Chromeの拡張機能も使えます。
またVivaldi同様、ユーザーエージェントはChromeとして識別されます。
![brave_extent2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535720/ea275b93-308b-def3-ad57-b4b6349c3072.png)
![brave_m2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535720/cc3c794a-5ea0-6fb2-dcb9-2e7deb4dc7d0.png)


## プライバシー設定がいい感じ
「ブラウザ終了時に履歴もCockie全削除」という設定をしたいときがあるのですが、ChromeやVivaldiだとやりにくいです。
Firefoxだと常時プライベートにすれば簡単なのですが、見境なくブロックするので、Twitterの埋め込みなどは見れなくなってしまいます。
Braveだと「ブラウザ終了時に履歴もCockie全削除」がとても簡単にできて、かつTwitterの埋め込みだけは許可するようにできます。
![private.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535720/192cb5e2-ca8e-6c49-0cb8-95777bb27648.png)
![set.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535720/d811dab2-ccb3-6df9-39fd-092c74ec9262.png)

## タブのスイッチング機能が便利
確認した限りではChromeやVivaldiにはない機能です。
アドレスバーに検索ワードを入力した際、開かれているタブに関連するものがある場合には「Switch to this tab」が表示されます。これをクリックすると該当のタブに飛ぶことが出来ます。
タブをたくさん開いているときに探す手間が省けるので便利です。
![brave_tab2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535720/89fd3fae-d70c-4a33-c705-c1eca321da3f.png)


# さくっと検索するブラウザがほしい方はおすすめ！
メインとしていろいろやるには手狭かもしれませんが、軽い検索をする際にはこの上ないブラウザだと思います。
個人的にはPCにおけるFirefox Focus的ポジションのブラウザです。
[Tips]OneDriveブラウザ画面上で貼り付け操作を行うとクリップボードからデータを直接アップロードできる

掲題のTipsの手順のメモです。

## 手順

OneDriveのブラウザ画面です。
![image.png](https://image.docbase.io/uploads/4d9fe405-7fef-4429-8736-0d6c9857c6d7.png)

この画面にてWindowsなら[Ctrl + v]、Macなら[command + v]により貼り付け操作を行うと、クリップボードからデータをOneDrive上に直接アップロードすることができます。

- クリップボードにテキストデータがある場合

貼り付け操作により[clipboard.txt]というテキストファイルがアップロードされます。
![image.png](https://image.docbase.io/uploads/36fc43c9-e440-4125-b41f-49b242002587.png)

ファイルを開くとクリップボード上のテキストデータが書き込まれています。
![image.png](https://image.docbase.io/uploads/760ffd36-0d41-4917-af93-1836c43ed8fa.png)

- クリップボードに画像データがある場合

貼り付け操作により[image.png]という画像ファイルがアップロードされます。
![image.png](https://image.docbase.io/uploads/ea1d218a-20d8-4ed2-9d61-bdc64cba5cd2.png)

ファイルを開くとクリップボード上の画像データが書き込まれています。
![image.png](https://image.docbase.io/uploads/e088049e-54c5-4448-be3e-bf5283a26fcc.png)

## 補足

貼付け操作時にすでに貼り付け先フォルダ内に同名のファイルがある場合は、`clipboard.txt` `clipboard 1.txt` `clipboard 2.txt`や、 `image.png` `image 1.png` `image 2.png`のようにファイル名はナンバリングされます。（数字の前にスペースがつきます）

## バグ？

[clipboard.txt]**ではない**ファイル名のテキストファイルがすでに作成されている。
![image.png](https://image.docbase.io/uploads/ebfe2a98-f533-407f-a99c-b211f415e5bc.png)

この状態でクリップボードにテキストデータがある状態で貼り付け操作を行うと、新しいファイルは[clipboard.txt]ではなくすでにあるファイルと同名のファイルとして作成されてしまうように見える。（期待していない動作）
![image.png](https://image.docbase.io/uploads/c82a8b4b-f033-4046-a340-f98fbac7cd38.png)

しかし、ブラウザ画面をリフレッシュすると、新しいファイルは[clipboard.txt]として作成されている。
![image.png](https://image.docbase.io/uploads/b31b5dc2-b96c-438a-b740-361f0fcaa299.png)

一方、[clipboard.txt]のファイル名のファイルがすでに作成されている状態でまた同貼り付け操作を行うと、新しいファイルは[clipboard 1.txt]として作成される。（期待動作）
![image.png](https://image.docbase.io/uploads/ea8b7609-53d2-458a-ac7f-54703ac79961.png)


## おわりに

OneDriveを利用する人にとっては周知の操作なのかもしれませんが、わたしは見つけたときにびっくりしました。

以上
tensorflow 2.0でImportError: DLL load failed が出て苦労した話

## 結論
Stack Overflow の以下の記事を参照してください。

https://stackoverflow.com/questions/59593972/tensorflow-2-0-on-windows-sse2-how-do-you-stop-importerror-dll-load-failed

## 詳細
tensorflow 2.0
python 3.5
Windows 10

```
import tensorflow as tf
```
の箇所で下記のエラーが発生しました。

```
Failed to load the native TensorFlow runtime.
```

はじめ、公式ホームページを見たのですが詳細な情報は書いておらず途方に暮れていたところ
tensorflow 2.0 では tensorflow-gpu 無しで GPU を使えることを思い出し
CUDAのバージョン不一致を疑ったりしていました。

でも、結局は Visual C++ のバージョンが古いことが原因でした :frowning2:

機械学習は本当に環境構築が大変ですね。
ラズパイを触ってみた(OSインストール編)

リアルに「ラズベリーパイ？え、美味しそう！」レベルが「面白そう」という理由だけで触ってみた。


参考にしたページ
https://usortblog.com/raspberrypi3-2/

#OSインストールのつまづきポイント
##microSDのフォーマット
[ラズパイ公式](https://www.raspberrypi.org/downloads/noobs/)からNOOBSのzipを落として、展開したファイルたちをmicroSDに移してラズパイに入れてみたが動かず画面真っ暗。

そこで
`INSTRUCTIONS-README.txt`をちゃんと読んでみることにした。
(私の端末はmacなので関係あるとこだけ抜粋)

```INSTRUCTIONS-README.txt
1. Insert an SD card that is 8GB or greater in size into your computer.
2. Format the SD card using the platform-specific instructions below:
   b. Mac (32GB cards and under)
      i. Download the SD Association's Formatting Tool from https://www.sdcard.org/downloads/formatter_4/eula_mac/
      ii. Install and run the Formatting Tool on your machine
      iii. Select "Overwrite Format"
      iv. Check that the SD card you inserted matches the one selected by the Tool
      v. Click the "Format" button
3. Extract the files contained in this NOOBS zip file.
4. Copy the extracted files onto the SD card that you just formatted so that this file is at the root 
```
ちゃんと書いてあるやんけ。
> iii. Select "Overwrite Format"

私が失敗した理由はまさしくここです。
[SDカードフォーマッター](https://www.sdcard.org/downloads/formatter_4/eula_mac/)を落として、フォーマットしたのですが、 ***Overwrite Format***で実行していませんでした。

この子ね
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513179/ca7eede4-b4be-e035-44ef-59b4c244b174.png)

で、無事にラズパイにwelcomeしてもらいました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513179/03d05cc7-ae15-de96-88a2-7d497499b5b1.png)

（ここまで長かったな…）


##今日の教訓
当たり前だけどREADMEは始めにしっかり読め。
Gatsbyで作成したテンプレートに要素を足してみる

# はじめに

こんにちは。

GatsbyテンプレートからこのWebサイトを立ち上げて早２週間ほどが経とうとしていますが、僕はあることに気がつきました。それは…



**コードほとんど触ってないやんけ！！！！！！！！！！！！！！！！！！！！１１**



そうです。テンプレートは[こちら](<https://github.com/alxshelepenok/gatsby-starter-lumen>)なのですが、今までに変更を加えたものは

- サンプル記事の削除
- About Meの更新
- TwitterとGithubのアカウントの向き先の変更
- READMEの更新



。。。。。。。。。。。。。。。。。。。。。。。。

**プログラマーっぽいこと何にもやってない！！！！！！！！！**



なので今回はせっかくGatsbyJSに触れるチャンスなので、このテンプレートに１つ要素を加えてアレンジをしたいと思います。



# 完成図

今回はブログのタイトルをトップページにh1タグとして追加するという修正を行いました。

## Before

<img width="956" alt="title_before.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264906/d2aeb9a0-dac5-1641-f6db-8d379a819ff9.png">


## After

<img width="1028" alt="title_after.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264906/f96a2b91-62f5-c3d0-a9c5-6e4154854598.png">




# 実装

今回の実装の流れとしては、

1. Headerコンポーネント の作成(今考えるとHeaderって名前色々とヤバい)
2. 作成したHeaderコンポーネント をindexテンプレートに追加

です。



まずはHeaderコンポーネント を作ります。

とりあえずはh1タグでタイトルだけを表示させます。

再利用可能なUIコンポーネント とするために、このような書き方をします。

```javascript
import React from "react"

const Header = props => (
    <div className="header">
        <h1>{props.title}</h1>
    </div>
)

export default Header;
```



[Gatsby-starter-lumen](<https://github.com/alxshelepenok/gatsby-starter-lumen>)ではトップページのコンポーネント は`Layout`というプロフィールと投稿記事を包括しているコンポーネント が存在していたので、`index-tenplate.js`を編集し、`Layout`コンポーネント の中にさきほど作成したHeaderコンポーネント を追加します。

```html
<Layout title={pageTitle} description={siteSubtitle}>
      <Header title="快速スーパーエンジニア行き" />
      <Sidebar isIndex />
```



# おわりに

コード修正量はそんなに多くないですが、Reactを今までに触ったことが無かったので、コンポーネント やCSS Moludeの概念を理解していなかったので既存のコードを読んで理解するのに圧倒的に時間がかかりました。

今回はh1タグで適当にブログのタイトルを追加しただけですが、今後もGatsby Tutorialなどを進めながらフロントの世界を理解しつつこのブログをモダンにアップデート出来たらなと思います((꜆꜄ ˙꒳˙)꜆꜄꜆ﾊﾟﾝﾁﾊﾟﾝﾁ

[ブログ](https://27ma4-mokumoku.netlify.com/posts/gatsby-mokumoku-title-add)にも同じ内容の記事を投稿しているので、良ければそちらもご覧ください(｀･ω･´)ゞﾋﾞｼｯ!!
【Swift】mapviewにピンを立てバルーン表示まで行う

#mapkitを使う

mapviewでピンを立て、なおかつバルーン表示などもやっていきたいと思ったときのコード
現在地は不使用(緯度と経度で場所を指定)

なお、緯度と経度は下記のgeocodingで場所検索すれば一発！
http://www.geocoding.jp/

```mapkit.swift

import MapKit

class ViewController: UIViewController {

    @IBOutlet weak var myMapView: MKMapView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
    //中心となる場所の座標オブジェクト作成
      //フィリピンのセブ・マクタン空港

   let coordinate = CLLocationCoordinate2DMake(10.310656, 123.98022)
        
   //種尺を設定
   let span = MKCoordinateSpanMake(0.2, 0.2)
             
   //範囲オブジェクトを作成
   let region = MKCoordinateRegionMake(coordinate, span)
        
   //MapViewに範囲オブジェクトを設定
   myMapView.setRegion(region, animated: true)
    
   //ピンを生成
   let myPin = MKPointAnnotation()
        
   //ピンの座標設定
   myPin.coordinate = coordinate
        
   //タイトル、サブタイトルを設定
   myPin.title = "セブ・マクタン空港"
   myPin.subtitle = "Jollibeeうまい"
        
   //mapViewにピンを追加
   myMapView.addAnnotation(myPin) 

      }

override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}
```

ここまででとりあえずピンが中心地に立ち
タイトル、サブタイトルまで出るようになった

【備考】
Jollibeeはフィリピンのマクドナルドみたいな感じ
vue リンク先にパラメータ渡す

ルータ

```

{ 
  path: '/user/:id',
  name: 'Detail',
  component: Detail 
},
```

リンク元

```
<td class="name"><router-link :to="{ name : 'Detail', params : { id: grp.user.id }}">{{grp.user.last_name}} {{grp.user.first_name}}</router-link></td>

```

受け取る

```
methods: {
    getParam() {
        return this.$route.params.id
    },
```
困ったらググれ

どうも、[**momotaro**](https://twitter.com/1992_momotaro)です。初めまして。

TECH::EXPERT受講初めたことがきっかけで、ブログはじめました。
自己学習（アウトプット）の為に投稿していきます。

今週月曜からプログラミング初心者として学習を始めて、この一週間で学んだ大きなこと。
それはタイトルにある通り、
### 分からないコードが出てきたり、エラーが出てきたらGoogleさんに遠慮なく質問しよう！
・・・ということですね。

これはTECH::EXPERTのカリキュラムにもきちんと書いてあります。

この教えが意味するものは
###『”自己解決能力”を身につける』


だと思います。大切なのは、なぜその問題が起こるのかを理解すること。そして大事なのは、いかにその問題をいち早く解決できるか・・・。
実際現場の方でもググることはよくあるそうです。

なので、これからは良い検索方法やわかりやすい解説サイト、ブログなどあれば模索していきたいと思います。

また自分が新しい解説など思いついたり発見した場合は発信していきます。

最後に自分と同じくTECH::EXPERT受講はじめたばかりの人に読んで欲しいブログのリンク載せておきます。

[#Rails入門者のエラー対処](https://qiita.com/snskOgata/items/4fd51a893930517d1d90)

もしよかったら『いいね』押してください。
vue.jsのscope id計算方法

全く別のvueモジュールとscoped cssのID(data-v-xxxx の様な値)が被ったので調べた。

2020/01/26時点ではここが計算元
https://github.com/vuejs/vue-loader/blob/74febfc280/lib/index.js#L94

```
  const id = hash(
    isProduction
      ? (shortFilePath + '\n' + source)
      : shortFilePath
  )
```

shortFilePathは`src/index.vue`の様な値。この値の場合、ハッシュ値は`2964abc9`になる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5825/7360d721-50ff-0ca0-622e-db5e9e3ffbb8.png)

Productionビルドにするとソースコードも含まれるので被ることは無さそう。自分用だとdevelopmentビルドをそのまま使っていたので引っかかってしまった。困った
NATゲートウェイを使わずにプライベートサブネットをインターネットにつなぐ

# NATゲートウェイを使わずにプライベートサブネットをインターネットにつなぐ
## 概要
AWSを日々活用の皆様、セキュリティには苦労されていることと思います。
特に、プライベートサブネットの管理については頭を悩ませていることと思います。

私も、いろいろ悩んだ結果、↓のような工夫していたりします。
https://qiita.com/SSMU3/items/23c533066ff9456c3bd1

話を戻しますが、ご存じの通り、プライベートサブネットを作ることによるメリットデメリットは以下の通りです。

|方向|メリット|デメリット|備考|
|:-------------------:|:--------------------|:--------------------|:--------------------|
|IN|インターネットからアクセスされない為セキュアである。|インターネットからSSHやRDPで接続できない。||
|OUT|インターネットに余計なデータを出力しない為、情報漏洩の危険が少ない。|**インターネット経由のアップデートが出来ないため、インストールやアップデートが悩ましい。**|||

INに関しては、踏み台を立てる。もしくはSSH経由の接続などでカバーできますので、あまり問題になることはないかと思います。
https://qiita.com/1Kano/items/1496d58b1293ff70c5ec

**ただし、OUTに関してはインターネットに出ていく為にはNatゲートウェイ／インスタンスが必要|Natゲートウェイはサブネット事に必要かつ、1つにつき月2,000円程度の費用が必要(2020年1月時点)となります。しかも、それで役に立つのはアップデートや監視くらいです。**

というわけで、やり方を考えました。
このやり方なら、メリットは以下のように変わります。

|方向|メリット|デメリット|備考|
|:-------------------:|:--------------------|:--------------------|:--------------------|
|IN|インターネットからアクセスされない為セキュアである。|インターネットからSSHやRDPで接続できない。||
|OUT|インターネットに余計なデータを出力しない為、情報漏洩の危険が少ない。|**Natゲートウェイ／インスタンスがなくてもインターネット経由のアップデータができる。必要であれば、通信制限もできる。**|ここが違う|

というわけで、わりとデメリットなく問題が解決します。

その方法とは・・・・

**プライベートサブネットをインターネットGWにつなぎ、ネットワークACLで制御する。**

以上です。
なんだ、それだけか、という話なんですが、そもそも要件が満たせるならインターネットゲートウェイを使わない理由はありません。
なんですが、世の中**「プライベートサブネットはインターネットゲートウェイを使わないサブネットである」**という認識が根深いようで、話すとわりと「ええー」といった反応が返ってきます。
面白いですね。

ただ、デメリットかどうかはわかりませんが、1点だけ、
**インスタンスにグローバルIPを設定する必要がある**
という点が問題になる場合があります。
ただそれも、ACLとセキュリティグループの2重防御で守られているので、あまり問題ではないと思います。

## やり方
### プライベートサブネットの所属するルートテーブルにインターネットゲートウェイを設定
#### ルートテーブルの設定
##### Before
![WS000113.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/400941/b411521c-2cd3-ba07-f66e-420959e8d8e5.jpeg)

##### After
![WS000114.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/400941/d146bd70-ac28-da14-09e1-a64b034a1705.jpeg)

#### ネットワークACLの設定
##### (1) 新しいネットワークACLを作成
![WS000117.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/400941/1563e1fa-079f-847a-1923-0c028361852d.jpeg)

##### (2) 作成したネットワークACLのアウトバウンドのルールを編集
![WS000119.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/400941/e25d728c-1909-f9ab-7305-378b07e61602.jpeg)

単純な方法はアウトバウンドのすべてのトラフィックをPERMITにすることです。

ただ、アウトバウンドも最小限にしたい、ということであれば、以下のサイトの中で割り当てられたグローバルIPの属するレンジを許可してあげればアップデートは可能でしょう。
数が多いので、「ap-northeast」などで検索するとわかりやすくなります。
**尚、EC2分だけでもいいですが、Route53なども許可してあげればヘルスチェックも可能になります。**
https://qiita.com/uchidake/items/46309bf5f6919b3906c0#12-ap-northeast-1--2264752-ips-

##### (3) 作成したネットワークACLをサブネットに割り当て
![WS000121.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/400941/e55cd0a7-1278-c75f-8763-8c4435e624ac.jpeg)
↓
![WS000124.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/400941/9009648a-5e8d-e390-6e35-a8e46c708ea2.jpeg)

## 雑感
単純にこれだけですべてが解決するわけではありませんが、セキュリティを保護しつつ、費用や工数を抑えるための一つの方法だと思えば、ありかなと思います。
必要な出口は作りつつ、ネットワークACLとセキュリティグループの2重の鍵で守る、というわけですね。
もちろん、ルートテーブル0.0.0.0/0ではなく、ネットワークACL同様に通信したい個所を限定して絞る手段もあると思います。

とはいえ、出口は作っちゃうわけなので、DBなどが置かれるサブネットにはこの方法は使わない方がいいと思います。
あくまで、アップデートなどが必要なサーバのみが対象、ということで。

画期的ではないですが、コロンブスの卵的な方法ではあると思います。
Re:ゼロから始める競技プログラミング生活　第1章1『C++しか使えない』

#はじめに
本記事はプログラミング若葉マークを胸に貼ったエンジニア志望の私、OTがAt.Coderで出題された競技プログラミングの問題を死に戻り(リトライ)を繰り返して解いていく、涙なしでは読めない長編Part式の記事となっております。
途中で絶望して失踪するかもしれませんが、せめて就職が決まるまではやっていきたいと考えています！！

#まずは簡単なプロフィール
名前：OT
プログラミング歴:3ヶ月(TECH::EXPERT63期)
使える言語：Ruby(Railsで簡単なWebサイトを作れるレベル)、C#(Unityで簡単なオセロを作れるレベル)、Python("Hello World"レベル)
好きな芸能人：ガッキー

#最初の敵
では、何の文脈もありませんが早速問題を解いていきます。笑
最初なので一番簡単なA - Roundingで経験値を積んでいく算段。
では、記念すべき第一問目どーん！！

**問題文**
X,Aは0以上9以下の整数です。
XがA未満の時0、A以上の時10を出力してください。

**制約**
0≤X,A≤9
入力は全て整数である

...めちゃくちゃ簡単じゃね！？
言語は練習を兼ねてPythonを使ってみました。完全に舐めプです。
これが沼への入り口だとも知らずに...

#絶望のPython、希望のC++

```python
x = int
a = int

if x < a:
  print("0")
else:
  print("10")
```

「とりあえずコードはこれでいいでしょう」
そう呟き、私は「Pythonって楽だな〜」とか思いながらコードを提出した数秒後、エラー文を見て自分の考えの愚かさに気付かされた。

「int型の変数って比較できないのかorz」

変数にそのまま実数を入れてみるとエラーなく作動したので、Input()で数値を入力してもらってから比較する形式にしようとコードを変更

```python
x = input()
a = input()
y = int(x)
b = int(a)

if y < b:
  print("0")
else:
  print("10")
```

これでも同じエラー。
この後何度もリトライし、RubyとC#でも記述してみたが同様のエラーで正解には至らず、私の心が絶望に染まっていく...

OT「一体どうすりゃいいんだよぉ...」

???「力が欲しいか？」

OT「だ、誰だ！？」

C++「我が名はC++。競技プログラミングでの使用率が最も高い言語の１つである。」

OT「(最も高い言語の１つってなんか日本語間違っている気もするけど)...C++！！あなたを使いこなせばこの問題を解くことができると言うんだな！？」

C++「無論。だが、心して使うんだぞ。我の記述量はPythonの比にならんからな」

【--C++が仲間になった--】

OT「C++...なんて難しい言語なんだ。だが、このサイト（ http://cpp-lang.sevendays-study.com/index.html ）で学習しながら書けば何とかなるかもしれない！！」

↓こうして仲間になったC++を使って書いたコードがこちら↓

```c++
#include <bits/stdc++.h>
using namespace std;

int main() {
  int X, A;
  cin >> X >> A;
  if (X < A){
    cout << "0";
  }
  else {
    cout << "10";
  } 
  return 0;
}
```

提出して無事、AC(正解)をいただくことができました！！8888888888888888888

<img width="1124" alt="ef389ac05dcd5a69ae36d84f26e2bdb0.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/570839/9040c435-e35d-170c-fc3c-3a71e48c3d29.png">
これが今回の死に戻りヒストリー...始まりからクライマックスだった()

#最後に
C++は書くことが多いし、いろんなサイトで習得難易度が高めに書かれてあるけど、使い勝手が良いのかもしれない。
そして、記述量が多いと言うことはそれだけ自分の思い通りの処理を実行することができるメリットでもあるのかもしれないと感じました。

あと、これPythonだとどう書けば正解になるのかわかる方いらっしゃれば教えて欲しいですm(_ _)m

ご拝読いただき、ありがとうございました！！
セマフォについてまとめ

# はじめに
前にOracle Master Bronze（DBA）の勉強をしていた時にふとセマフォのことがわからなくなったことを思い出したのでざっくりまとめてみました。

# セマフォとは
共有リソースの排他制御（アクセス可能な接続数を制御）を行うもの。

https://docs.oracle.com/cd/E19455-01/806-2732/6jbu8v6os/index.html

## Linuxでの確認方法

[root@localhost ~]# sysctl kernel.sem
kernel.sem = 250(①) 32000(②) 32(③) 128(④)

## パラメータ説明

|No|パラメータ|説明|
|:--|:--|:--|:--|
|①|SEMMSL|セマフォ集合ごとのセマフォ数の最大値。IHSで言うとThreadLimitのこと。|
|②|SEMMNS|システム全体での、全てのセマフォ集合におけるセマフォ数の制限。IHSで言うとMaxClientのこと。
|③|SEMOPM|semop(2)コールに指定されるオペレーション数の最大値。semopはセマフォ獲得後に行う操作で、その実行回数を指定するもの。(*1)|semopのMax値。|
|④|SEMMNI|システム全体でのセマフォ識別子の最大値（＝セマフォ集合の最大数）。IHSで言うとServerLimitのこと。|

(*1)セマフォ獲得後の操作とは、セマフォの値を増減させることだと思われる

## 覚え方
|No|パラメータ|覚え方|
|:--|:--|:--|:--|
|①|SEMMSL|Max Set Limit。セットのリミット（上限）。|
|②|SEMMNS|S = Systemということで全体の数。N = Nodeで全体、という意味（だと考える）。|
|③|SEMOPM|semopのMax値。|
|④|SEMMNI|I = Identify。N = Nodeで全体、という意味（だと考える）。|

## イメージ図
![セマフォ画像.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319027/af0c7c42-67e5-d9a9-ee94-2d5e7f52697f.png)

# 参考URL
http://dbnote.web.fc2.com/note_install_04_kernel_shm.html

https://thinkit.co.jp/cert/tech/23/5/2.htm

https://qiita.com/momotaro98/items/5e37eefc62d726a30aee
iftttでSSHログインの成功時にLineを飛ばす

# 概要
SSHログインが成功すると、Lineに通知が行くようにした。

# 前準備
- iftttで　ifがWebHookなるものをつくっておく

https://ifttt.com/maker_webhooks からDocumentationでcurlのコマンドを出力させておく。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245977/4c5d7a7a-fbc8-bd8a-ab38-579fa5c47a08.png)

# 作業

```
vi /etc/ssh/sshrc
```

```bash:sshrc
curl -s -o /dev/null -X POST -H "Content-Type: application/json" -d @- https://maker.ifttt.com/trigger/イベント名/with/key/キー << EOS
{"value1":"[SSHログイン] ユーザー名: $USER, IP: $SSH_CLIENT"}
```

これでおｋ。
ただし、ここでどんな些細なことでも標準出力があると、sftpが使えなくなるので注意。

# 結果

```
Welcome to Ubuntu 18.04.3 LTS (GNU/Linux 4.15.0-74-generic x86_64)

 * Documentation:  https://help.ubuntu.com
 * Management:     https://landscape.canonical.com
 * Support:        https://ubuntu.com/advantage

 System information disabled due to load higher than 8.0


 * Canonical Livepatch is available for installation.
   - Reduce system reboots and improve kernel security. Activate at:
     https://ubuntu.com/livepatch

0 packages can be updated.
0 updates are security updates.


Last login: Sat Jan 25 15:50:56 2020 from 
mirmdock@mirm_dockernode:~$ 

```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245977/48baf84a-a3e2-f5fc-c5aa-7f90bbbf4f81.png)

# 参考
https://qiita.com/tekitoh/items/8acccb313d6e7a14c2ec
https://bacchi.me/linux/ssh-login-alert/
Laradockを使ってLaravel6の開発環境をインストールする

##はじめに
こちらの記事はTechpitに販売されている教材を進めるにあたって、教材を参考（ほぼ丸写し）にさせてもらって作成しています。
参考箇所はプレビュー部分なので、誰でも見ることができます。
URLも貼っておきます → [Laravelで飲食店検索LINE Botを作ろう！](https://www.techpit.jp/p/laravel-line-bot)
開発者はコチラの方です → やんばるさん([@shonansurvivors](https://twitter.com/shonansurvivors))

##前提
Dockerをインストールしていること。
今回は略しますが、開発者のプレビューでもインストールの方法を丁寧に解説されていますので、よければご覧ください。

#ユーザライブラリフォルダの直下にフォルダを作成
今回はユーザライブラリフォルダの直下にlaravel-projectフォルダを作成します。
下記のコマンドを叩けばユーザライブラリフォルダの直下にlaravel-projectフォルダを作成できます。
さらにlaravel-projectフォルダに移動。

```
$ cd
$ pwd
/Users/Macでのユーザー名

$ mkdir laravel-project
$ cd laravel-project
```

##Laradockのインストール
GitHubからlaradockのファイルをコピーします。

```
$ git clone https://github.com/Laradock/laradock.git

Cloning into 'laradock'...
remote: Enumerating objects: 10007, done.
remote: Total 10007 (delta 0), reused 0 (delta 0), pack-reused 10007
Receiving objects: 100% (10007/10007), 8.99 MiB | 1.61 MiB/s, done.
Resolving deltas: 100% (5432/5432), done.
```

もし下記のようなメッセージ（XcodeとiOSのライセンスの同意）が出たらリンク先を参考にしてみてください。

```
Agreeing to the Xcode/iOS license requires admin privileges, please run “sudo xcodebuild -license” and then retry this command.
```
[Gitコマンド実行時に、XcodeとiOSのライセンス同意を求められた場合の解決法](https://qiita.com/fumidadada/items/09e543990add71fd4de3)

しばらく時間がかかりますが、完了すると、laravel-projectにlaradockフォルダが作成されます。

```
$ ls
laradock
```

##laradockの.envファイルを作成
laradockフォルダに移動します。cpコマンドでlaradockにあるenv-exampleファイルをコピーし、.envファイルを作成します。

```
$ cd laradock
$ cp env-example .env
```
これでenv-exampleファイルをもとに.envファイルが作成できました。

##laradockの.envファイルを編集する
テキストエディタでlaladockフォルダの.envファイルを開き下記のように変更。

```
APP_CODE_PATH_HOST=../laravel
DATA_PATH_HOST=../data
```

##Dockerを使って開発環境を起動する
引用させていただきます。
>次にDockerを使って開発環境を起動します。
Docker上で動く各サービスの単位をコンテナと呼びます。
ここでは、以下3つのコンテナを起動します。
・workspace
・php-fpm
・nginx

laradockディレクトリにいることを確認し、下記のコードを実行する。

```
$ docker-compose up -d workspace php-fpm nginx
```
>docker-composeは、複数のコンテナを同時に取り扱うDocker Composeという機能を使うためのコマンドです
upは、Docker Composeでコンテナを起動するときに使うコマンドです
-dは、コンテナを起動した後に、ターミナルの操作に戻るためのオプションです

結構時間かかります。

```
Creating laradock_docker-in-docker_1 ... done
Creating laradock_workspace_1        ... done
Creating laradock_php-fpm_1          ... done
Creating laradock_nginx_1            ... done
```
上記のメッセージが表示されたらコンテナの起動が成功している。

##Dockerコンテナの起動確認
ブラウザを起動し、 localhost とだけ入力。「404 Not Found」のエラーが出れば、Dockerが起動しているのでひとまずはOK。

##Laravelのインストール
laradockフォルダにいることを確認した後、Laravelをインストールします。

```
$ docker-compose exec workspace composer create-project --prefer-dist laravel/laravel . "6.2.*"

Installing laravel/laravel (v6.2.0)
  - Installing laravel/laravel (v6.2.0): Downloading (100%)         
Created project in .
.
. // 中略
.
Package manifest generated successfully.
> @php artisan key:generate --ansi
Application key set successfully.
```

てな感じでlaravel-project直下にlaravelのフォルダが作成される。
localhost　へブラウザでアクセスしてみるとLaravelのウェルカムページが表示される。
VoIP Push がバックグラウンド時に届かない

iOS13 & xcode11 では、VoIP Push (PushKit) を受けた際 CallKit に [reportNewIncomingCall](https://developer.apple.com/documentation/callkit/cxprovider/1930694-reportnewincomingcall) を使って通知をしなければならなくなりました。
　参考：[VoIP Push (PushKit) は着信通知専用になりました・・・](https://qiita.com/sunskysoft/items/34665541d9bec438ee36)
　
その対策の中、アプリがバックグラウンドまたは未起動時に VoIP Push が届かないという現象が発生しました。（フォアグラウンドにある時は届く）

##原因
分かりません！

xcode11 でビルドし VoIP Pushを受けた際に、すぐに[reportNewIncomingCall](https://developer.apple.com/documentation/callkit/cxprovider/1930694-reportnewincomingcall) を呼び出す対策を行う前に、何度かPushを受けてました。
もちろん、[reportNewIncomingCall](https://developer.apple.com/documentation/callkit/cxprovider/1930694-reportnewincomingcall) を呼び出さないとアプリは停止させられてしまいます。
それを何度か繰り返すことで、システムの中で「悪い子」認定されてしまったと思われます。
　
「悪い子」認定されてしまうと、Apple のドキュメントによれば VoIP Push 自体届かなくなるはずなのですが、なぜかフォアグラウンドでは届いてしまう点が不思議です。。。

##対策
1. アプリを一旦削除します。
2. iPhoneの電源を落とします。
3. 一定時間後、iPhoneの電源を入れます。
4. ビルドして、アプリをインストールします。

以上！！

アプリの削除→再インストールだけではダメでした。
　
電源を落とすか再起動が良いのだと思われます。
「一定時間後」が効いているかどうかは不明です。
私は３時間くらい電源を入れるのを忘れてました（他のことをしていたので・・・）

同様の現象で困っている方がおられましたらお試しください。

##類似問題
[VoIP Push のトークンが取得できない（iOS13/xcode11）](https://qiita.com/sunskysoft/items/18721f2afeaf49691b94)
VSCodeにThymeleaf用のスニペットを作ろう

#はじめに
VSCodeでのユーザースニペットの記事は調べればあるが、Thymeleaf用のものがなく、VSCodeのプラグインでもいい感じのものがなかったため備忘録的に書いておこうと思う。
※検証環境はmacOS Mojave 10.14.16
## スニペットとは
直訳すると「切れ端」や「断片」となるが、要は呼び出したいものに名前を付けて簡単に呼び出せるようにしたものということ。
#早速試してみる
「Shift+Command+p」を押すと、画面上部に検索画面が出てくるので`user`などと打つと「Preferences: Configure User Snippets」が出てくるからこれを選択。
<img width="597" alt="スクリーンショット 2020-01-17 6.17.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568373/fde322f4-a64c-51d0-0472-97880d1e1260.png">
次に、言語選択画面が出てくるので今回は`html`を入力し、html.jsonを選択し開く
<img width="595" alt="スクリーンショット 2020-01-17 6.21.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568373/2166afbf-9070-e736-9edb-f2870223ecde.png">
この中にスニペットを書いていけばhtmlの中で呼び出すことができます。

```
"Thymeleaf value": {
	"prefix": "tval",
	"body": "th:value=\"\\${$1.$2}\"",
},
```
##解説
`"Thymeleaf value"`
スニペット名…スニペットの名前を決めます。(このファイルの中で区別するためのもの)
`"prefix": "tval",`
実際に入力する単語…この文字をhtmlファイルで入力することで呼び出せます。
`"body": "th:value=\"\\${$1.$2}\"",`
呼び出されるもの…prefixを入力するとこちらが呼び出されます。
1行の場合は、""の中、2行以上の場合は[]で入れてください。
\$1…呼び出された後の入力位置tabキーを押すと\$2、\$3と移動することができます。
\\…"は\、\$は\\\など、特殊文字を単なる文字列として使いたい場合は、エスケープしてください。
#実演
![qiita_thymeleaf.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568373/074cb783-b240-884b-12b2-fb6f098d7106.gif)
こんな感じで動きます。
##Thymeleaf用に作成
では、これをThymeleaf用に作成していきたいと思います。

    "Thymeleaf comment": {
        "prefix": "tcom",
        "body": "<!--/* $1 */-->",
    },
    "Thymeleaf value": {
        "prefix": "tval",
        "body": "th:value=\"\\${$1.$2}\"",
    },
    "Thymeleaf text": {
        "prefix": "ttex",
        "body": "th:text=\"\\${$1.$2}\"",
    },
    "Thymeleaf local": {
        "prefix": "twit",
        "body": "th:with=\"x=$1,y=$2\"",
    },
    "Thymeleaf link": {
        "prefix": "tlink",
        "body": "th:href=\"\\@{'/' + \\${$1.$2}}\"" ,
    },
    "Thymeleaf if": {
        "prefix": "tif",
        "body": "th:if=\"\\${$1}\"" ,
    },
    "Thymeleaf unless": {
        "prefix": "tif",
        "body": "th:unless=\"\\${$1}\"" ,
    },
    "Thymeleaf switch": {
        "prefix": "tswit",
        "body": [
            "<div th:switch=\"\\${$1}\">",
            "\t<p th:case=\"$2\" th:text=\"\\${$3}\"></p>",
            "\t<p th:case=\"$4\" th:text=\"\\${$5}\"></p>",
            "\t<p th:case=\"*\">対象なし</p>",
            "</div>"
        ] ,
    },
    "Thymeleaf for": {
        "prefix": "tfor",
        "body": [
            "<tr th:each=\"$2 : \\${$1}\">",
            "\t<td th:text=\"\\${$3.$4}\"></td>",
            "\t<td th:text=\"\\${$5.$6}\"></td>",
            "\t<td th:text=\"\\${$7.$8}\"></td>",
            "</tr>",
        ] ,
    },
##あとがき
とりあえず最近使っているものだけまとめましたが、他にもThymeleafの記法はあるので随時追加して使っていきたいと思います。また、これを改変すれば他の言語にも応用できるので積極的に使用していこうと思いました。
##参考にした記事
https://qiita.com/NagaokaKenichi/items/c6d1b76090ef5ef39482
Web Authentication 概フロー

[Web Authentication](https://www.w3.org/TR/webauthn/) (Web Authn) の概フローをシーケンス図形式で整理した。

（あくまで大まかな流れを掴む目的のため、細かい処理内容は省略している。）

![Web Authentication.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186068/5ec15a70-ceb0-a096-5e69-f00849cdc453.png)
Nuxt.js state

```vuejs:pages/state.vue
<template>
  <div class="container">

    <div class="btn btn-primary" @click="$store.commit('count', 2)" >+2</div>
    <div>{{$store.state.counter}}</div>

    <div class="btn btn-primary" @click="$store.commit({type: 'message', text: new Date().toUTCString()})">UTC</div>
    <p>{{$store.state.message}}</p>

    <div class="btn btn-primary" @click="$store.dispatch('reset')">reset</div>
    <div><router-link to="/state2">next</router-link></div>
  </div>
</template>

<script>
export default {}
</script>
```

```vuejs:pages/state2.vue
<template>
  <div class="container">
    <div>{{$store.state.counter}}</div>
    <div>{{$store.state.message}}</div>
    <div><router-link to="/state">back</router-link></div>
  </div>
</template>

<script>
export default {}
</script>
```

```javascript:state/index.js
import Vuex from 'vuex'

const createStore = () => {
  return new Vuex.Store({
    state: function() {
      return {
        message: '-',
        counter: 0
      }
    },
    mutations: {
      count: function(state, n) {
        state.counter += n;
      },
      message: function(state, obj) {
        state.message = obj.text;
      },
      reset: function(state) {
        state.counter = 0;
      }
    },
    actions: {
      reset: function(context) {
        context.commit('reset');
        context.commit({type: 'message', text: '-'});
      }
    }
  })
}

export default createStore;
```
Rails6 decimal型のカラムに格納されたデータの文字数を取得する

# 目的

- devimal型のカラムに格納されたデータの文字数を取得する方法をまとめる。

# 経緯

- Rails6のアプリでツイート用のテンプレートを作成したい。
- そのテンプレート内容は140文字以内に制限したい。
- そのテンプレート内容はデータベースの複数の特定カラムに格納されているもので構成される。
- 複数の特定カラムのデータ型はtext型とdecimal型が混在している。

# 結論

- decimal型のデータの文字数は`.to_s`で一旦文字列に変更してから`.length`で文字数を抽出する。

# 詰まったところ

- decimal型の値を`.length`のみで文字数を抽出しようとした。
- そもそも数値に`.length`メソットは使用できない。

# 解決方法

- decimal型の値の文字列は`.to_i`で一旦文字列に変更してから`.length`で文字数を抽出した。
- 下記に文字数の抽出方法を記載する。

    ```ruby
    decimal型の値.to_s.length
    ```

# 今回の具体例

- 下記にテンプレートのビューファイルの内容を記載する。(下記に記載される内容を全て含めて１４０文字以内にしたい。説明のために空行を入れているため改行は考慮しない。)

    ```html
    <p>
    <!-- postsテーブルのcontentカラムの内容(text型) -->
    <%= @post.content %><br>

    <!-- postsテーブルのtoday_study_timeの内容(decimal型) -->
    today: <%= @post.today_study_time %> h<br>

    <!-- postsテーブルのstudy_timeの内容(decimal型) -->
    total: <%= @post.study_time %> h<br>

    <!-- postsテーブルのfree_commentの内容(text型) -->
    <%= @post.free_comment %><br>

    <!-- postsテーブルのhash_tagの内容(text型) -->
    #<%= @post.hash_tag %>
    </p>
    ```

- コントローラファイルで前述のデータベースから取得した値の文字列のトータルを140文字以下になっているかの処理を記載した。
- 下記に処理を記載する。(今回の件を説明することに最小限のコードを記載する)

    ```ruby
    #ビューから受け取った情報を@postに格納
    @post = Post.new(content: params[:content], 
                     study_time: params[:'study_time'],
                     today_study_time: params[:'study_time'], 
                     hash_tag: params[:hash_tag], 
                     user_id: @current_user.id, 
                     free_comment: params[:free_comment]
    )

    #変数word_countに各値の文字数を格納する。
    word_count = @post.content.length  + @post.hash_tag.length  + @post.free_comment.length  + @post.study_time.to_s.length + @post.today_study_time.to_s.length

    #word_countが１４０よりも大きい時にエラーで特定のページにリダイレクトされるような処理などが連なって記載されている。
    ```
expressによるウェブページテンプレート化の手法(express-ejs-layoutsを使用)

# 概要
Expressにおけるwebページのテンプレート化の方法をまとめてみる。
使用するパッケージは以下の通り。
・express
・express-ejs-layouts

作成するファイルは以下の通り。
(1) /main.js
テンプレート化に必要なパッケージの読み込み、レスポンスのロジックを実装

(2) /views/layout.ejs
テンプレートエンジンが使用するレイアウトのウェブページのテンプレート。このファイルでページのレイアウトとコンテンツの埋め込み箇所を定義する。

(3) /views/index.ejs
テンプレートエンジンがレイアウトに埋め込むファイル。
ここではindexのページを定義しているが、ユーザーのアクセスするパスに応じて他のejsファイルも作成する。

# Step1. main.jsの実装
まず、以下のようにmain.jsを実装する。
(1) パッケージのインポート
以下3つの定数を定義する。

```
const express =require(“express”)
const layouts = require(“express-ejs-layouts”)
const app = express()
```

(2) view engineの指定
appに対して、view engineの属性設定。

```
app.set(“view engine”,”ejs”)
```

https://expressjs.com/ja/guide/using-template-engines.html

(3) リクエストパスに対するレスポンスロジックの実装
以下のようにrenderに/view/index.ejsのファイルをテンプレートとして読み込むことを指定する。拡張子指定不要。

```
app.get(“/”, (req, res) => {
    res.render(“index”)
})
```

# Step2. layout.ejsの定義
layout.ejsはページ間で共通のコンテンツを定義する。
その上で、各ページ固有のコンテンツを埋め込む場所を定義する。

```
<html>
<head> ... </head>
<body> 
レイアウトのコンテンツを記載

<%- body %>

</body>
</html>
```

上記でも記載のあるように、以下の記述が各ページのコンテンツの埋め込み先になる。

```
<%- body %>
```

# Step3. index.ejsの定義
index.ejsには、laytout.ejsの<%- body %>に埋め込むコンテンツを定義することになる。

```
<h1>これがhttp://xxxxxx.xx.xx/にアクセスした際に表示されるページのコンテンツ部分です</h1>
```

ポイントは、HTMLを記載しているのだが、お決まりの<html>から始まるタグの記載をするのではなく、layout.ejsに埋め込まれることを想定したhtmlの記述をする必要がある。
基本情報技術者　テクノロジ系　第7章 セキュリティ⑤


昨日続いて内容を続けます。


# ファイアウォール
パソコンの関所のようなもの

## ファイアウォールの設置

### 外部セグメント：　外側に位置する
公開サーバを設置
### 内部セグメント：　内部に設置
非公開サーバ、クライアントを設置

### DMZ: 内側で公開サーバを設置する箇所を非武装セグメント
　　　中間地点とも言えます。

## パケットフィルタリング型ファイアウォール
　　アドレスにとって判別

　　　パケットの
　　　・宛先のIPアドレスとポート番号
　　　・送信元のIPアドレスとポート番号
　　　　によって通信の可否を決める方式

　　　フィルタリングテーブルには
　　　要求と応答を設定

## アプリケーションゲートウェイ型ファイアウォール
　　通信しているデータの内容をチェックして通過の可否を決める方式

　　使用にはプロトコルを理解している必要があります。

## WAF(Web Application Firewall)
ウェブサーバやウェブアプリケーションへの攻撃を遮断すること

## IDS,IPS
運用に当たって
誤検出(フォールスポジティブ)
見逃し(フォールスネガティブ)に注意が必要

### IDS
進入検知システム

### IPS
進入防止システム

### ハニーポット
攻撃手口収集のための
ダミー

## ペネトレーションテスト
模擬戦、実際に攻撃を仕掛けて進入を試みるテスト

## ファジング
問題が起こりそうなデータ(ファズ)を入力して
セキュリティ上の未知な脆弱性を見つける手法
Raspberry Pi 4 の省エネ設定

# はじめに
激アツと噂のRaspberry Pi4を購入しました。
[こちら](https://goozenlab.com/blog/2019/07/pi-save-power/) を参考に Raspberry pi 4 / Ubuntu server 64bitで省エネ設定したときのメモ。

# 環境
- Ubuntu Server 19.10 (aarch64)
    - `Linux ubuntu 5.3.0-1015-raspi2 #17-Ubuntu SMP Thu Dec 5 04:58:47 UTC 2019 aarch64 aarch64 aarch64 GNU/Linux`
- Raspberry Pi 4
    - `Revision : c03112`

# CPU設定関連

## ポリシー

設定して再起動みたものの設定が変わっていないかも

- ツールインストール

```
sudo apt update
sudo apt upgrade
sudo apt install cpufrequtils
```

- 設定変更

```diff
sudo vi /etc/init.d/cpufrequtils
-GOVERNOR="ondemand"
+GOVERNOR="conservative"
```

- 確認

```
sudo cpufreq-info

  current policy: frequency should be within 550 MHz and 1.10 GHz.
                  The governor "ondemand" may decide which speed to use
                  within this range.
```

## CPUクロックとか

`/boot/firmware/config.txt`に書いてみたら反映されました。
(あとで調べる)

- 設定変更

```diff
sudo vi /boot/firmware/config.txt
+force_turbo=0
+arm_freq=1100
+arm_freq_min=550
```

- 確認

```
sudo cpufreq-info
  hardware limits: 550 MHz - 1.10 GHz
```

# その他ハードウェアの設定

## 無線無効化

Bluetoothの無効化とWifiの無効化
- 参考: https://raspberrypi.stackexchange.com/questions/100543/how-to-disable-wifi-in-raspberry-pi-4

- 設定変更

```diff
sudo vi /boot/firmware/config.txt
+dtoverlay=disable-bt
+dtoverlay=disable-wifi
```

- 未確認

## HDMI無効化


- 参考: https://qiita.com/mt08/items/bc2d54e4be069b790eac
- `tvservice` コマンドを導入
    - `vcgencmd`もついでに。 @SNAMGN さんコメントありがとうございます。参考に入れ直すことができました

        ```
sudo apt-get install git build-essential cmake
git clone https://github.com/raspberrypi/userland.git
cd userland
./buildme --aarch64
sudo mkdir -p /opt/vc/bin
sudo mkdir -p /opt/vc/lib
sudo cp ./build/bin/* /opt/vc/bin
sudo cp ./build/lib/*.so /opt/vc/lib
sudo chmod -R 755 /opt/vc
sudo chown -R root:root /opt/vc
sudo vi /etc/ld.so.conf.d/rpi-lib-bin.conf
```

        ```:/etc/ld.so.conf.d/rpi-lib-bin.conf
/opt/vc/lib
```

        ```
sudo ldconfig
sudo ln -s /opt/vc/bin/vcgencmd /usr/bin/vcgencmd
```


- 未確認
HerokuにFlaskアプリをデプロイする

# 概要

Herokuに最小のFlaskアプリをデプロイするまでの手順を記載します。



# 前提条件

* Herokuに登録していること
* [Heroku CLI](https://devcenter.heroku.com/ja/articles/heroku-cli) が導入済みであること
* 仮想環境は利用しない
* 下記がインストールされていること  
    * flask（pip install flask、または、pip3 install flask）
    * gunicorn（pip install gunicorn、または、pip3 install flask）



# 手順

## 必要なリソースを作成

プロジェクトファイル置くディレクトリを作成し、ディレクトリに移動する。

```bash
$ mkdir flaskonheroku
$ cd flaskonheroku
```

必要なファイルを作成する。

```bash
$ touch app.py Procfile
```

app.py を下記の通り編集する。

```python
# -*- coding: utf-8 -*-
from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    return 'hello, world'

if __name__ == '__main__':
    app.run()
```

Procfile を下記の通り編集する。

```bash
web: gunicorn app:app --log-file=-
```


## ローカル環境で動くか確認

```bash
$ python app.py
 * Serving Flask app "app" (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
```

アドレスにアクセスし、問題なければOK。



## デプロイに必要なファイルを作成

requirements.txtを作成する。

```bash
$ pip freeze > requirements.txt
```



## gitリポジトリの準備

gitリポジトリとして初期化する。


```bash
$ git init
$ git add .
$ git commit -m "first commit"
```



## Herokuアプリの作成

Herokuにログインしてアプリを作成する。

```bash
$ heroku login
$ heroku create
```



## Herokuへアプリをデプロイ

リモートリポジトリが作られているので、プッシュする。

```bash
$ git remote
heroku
$ git push heroku master
```



## アプリの確認

アプリを開いて確認する。

```bash
$ heroku open
```


:::note info
以降、コードを修正しcommitした後、git push heroku master すれば再度デプロイされて変更がサイトに反映されます。
:::
セルを結合して中央揃えした将棋

堀川ランプさんがネタでやってたらしいので便乗してスプレッドシートで作成してみました。<img width="721" alt="スクリーンショット 2020-01-25 23.57.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181863/c3b6b912-9814-c59a-077b-9c8b5d8309e2.png">
https://docs.google.com/spreadsheets/d/1bW82YG6JSNk5PFxH8Z1ud2yDSZFnPdJuGjarhg6QIwE/edit?usp=sharing

役に立つかは分かりません
Linux or macのbashでコマンドラインの内容をマウスなしでコピペする方法

# 参考にした記事

* Linux or macのbashでコマンドラインの内容をマウスなしでコピペする方法

https://saltiga.hatenablog.com/entry/2020/02/14/235139

# コマンドラインの内容をコピーするのにマウスを使いたくない

catとかで出力した内容をそのままコピーしたい！！

# Tmuxのコピーモードを使う

tmuxをインストール

↓

以下のファイルを作成

```{~/.tmux.conf}
set-option -g default-command "exec reattach-to-user-namespace -l $SHELL"
setw -g mode-keys vi
bind-key    -T copy-mode-vi v     send-keys -X begin-selection
bind-key    -T copy-mode-vi y     send-keys -X copy-pipe-and-cancel "reattach-to-user-namespace pbcopy"
bind-key    -T copy-mode-vi Enter send-keys -X copy-pipe-and-cancel "reattach-to-user-namespace pbcopy"
```


↓


Ctrl+b+[ でコピーモードに入れる。

vimと同じようにカーソル移動、yでヤンク可能。


# 他にいい方法があったらコメント欄で教えてください
# スイッチ・ルータなどの設定方法(基本編)

# スイッチ・ルータなどの設定方法(基本編)

初投稿です。
文句あればドシドシかもん。

このページでは、AlliedとCisco製品の基本的な操作方法について説明しています。
その他メーカーについては、知見がありません。
なお、メーカーやバージョンによっては微妙な違いがありえます。
詳細についてはメーカーHPを参照ください。

| [AlliedTelesis](https://www.allied-telesis.co.jp) | [Cisco]() |
|:---:|:---:|
| [https://www.allied-telesis.co.jp](https://www.allied-telesis.co.jp) | [https://www.cisco.com/c/ja_jp/](https://www.cisco.com/c/ja_jp/) |

最近はAlliedTelesis社の仕様がCisco社とほぼ同じになりつつあって、大変助かってますね。

## 対象機器

* スイッチ
* ルータ
* ...etc

## コンソール接続

オススメのツールはTeraTermです。
ダウンロードは[コチラ](https://forest.watch.impress.co.jp/library/software/utf8teraterm/)から。

### teraterm設定内容

| 通信速度 | データ | パリティ | ストップビット | フロー制御 |
|:---:|:---:|:---:|:---:|:---:|
| 9600 | 8 | none | 1 | none |

#### 送信遅延

コピー&ペーストで設定を流し読みする際にエラーが出ないよう遅延設定をしておきます。

| 字 | 行 |
|:---:|:---:|
| 5秒 | 5秒 |

### 接続方法

1. teraterm起動
2. コンソール接続(COM-LAN) or telnet
3. 電源投入

## ログイン方法

初回ログイン以降は、パスワードの変更をすることです。
SSHに対応していればSSH接続設定も必須です。

### 初期値

Ciscoの初期値は無しでログインできます。
以下はAlliedの初期値です。

| ユーザー | パスワード |
|:---:|:---:|
| manager | friend |

## コマンドモード

設定する内容に応じて適宣、モードを変更する必要があります。
なお、設定するコマンドが不明な場合は`/?`もしくは`[TABキー]`でヒントが出るかも。

### モード種別

設定には、その設定内容に見合ったモードに入っている必要があります。

| モード名 | 表示名 | 主なコマンド | 権限を得る為のコマンド |
|:---:|:---:|:---:|:---:|
| 非特権EXECモード | ホスト名> | 参照など | ログイン直後のため不要 |
| 特権EXECモード | ホスト名# | 再起動など | enable |
| グローバルコンフィグモード | ホスト名(config)# | 大まかな設定など | configure terminal |
| インターフェースモード | ホスト名(config-if)# | 詳細設定など | いろいろ |

### モード移行順序

モードには適切なモード移行の順番があります。
そのためログイン後に秘特権EXECモードから、いきなりインターフェースモードに移行することができません。
必ず、以下の順序を踏まなければなりません。

| 非特権EXEC | → | 特権EXEC | → | グローバルコンフィグ | → | インターフェース |
|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
| ホスト名> | → | ホスト名# | → | ホスト名(config) | → | ホスト名(config-if)# |

```:コマンド内容
ホスト名 login: manager
Password:
Last login: Mon Feb 10 16:43:56 JST 2020 from 172.22.21.36
AlliedWare Plus (TM) 5.4.9 08/23/19 03:58:30

!ここから非特権EXEC
ホスト名>
ホスト名>
ホスト名>enable
!ここから特権EXEC
ホスト名#
ホスト名#
ホスト名#configure terminal
Enter configuration commands, one per line.  End with CNTL/Z.
!ここからグローバルコンフィグ
ホスト名(config)#
ホスト名(config)#
ホスト名(config)#exit
!ここから特権EXEC
ホスト名#
ホスト名#
ホスト名#exit
!ここから非特権EXEC
ホスト名>
ホスト名>
ホスト名>exit

```

なお、前のモードに戻るには`exit`を使用します。
非特権EXECで`exit`すると画面が閉じられます。
もしくは、ログイン画面へ。

## 主な設定

設定は各々で違うでしょうが、基本は同じかと。
詳細コマンドについては、別記事へ掲載します。

* ホスト名
* VLAN
* インターフェイス
* IPアドレス
* NTPサーバー
* LOGサーバー
* SNMPサーバー
* ループガード
* パスワード
* SSH
* ...etc

### コンフィグファイル

主な設定が完了したら、コンフィグファイルを作成します。
次回の再起動時でも同じコンフィグを読み込めるようにしましょう。

#### 内容の確認

```:startup設定
!特権EXECで
ホスト名#show running-config
!設定内容がたくさん表示されます。。。
ホスト名#
!現在の設定内容を起動時に読み込まれるコンフィグファイルに上書きします
ホスト名#copy running-config start-config
```

これで作業は完了です。
`reload`で再起動しましょう。

## 考察

本来はもっと項目がありますが、今回はあまあまでやってみました。
コンフィグファイルのバージョン管理などやらなきゃいけないことはまだまだあります。
おいおい、やっていきます。

### やりたいこと

* 各コマンドの設定方法
* コンフィグファイルの管理方法
rbenvの新環境にgemをインストールしようとしてもパスがシステムのもののままになっている場合の対処法

# 対処法
以下のコマンドで解決．おそらくターミナルの再起動でも解決すると思われる．公式ドキュメントに書いていなかったので一応メモ．

```bash
rbenv rehash
```
vueで出会う「$」について

vue.jsを扱っていると、時々「$」に出会います。
例えば

```javascript
db.collection("twits").doc(this.$props.id),
```

これは何なのかわからなかったので調べました。

https://tutorialmore.com/questions-266496.htm

その他でも説明されていますが、これはvueが元々持っているネイティブのプロパティを使う場合に必要となるものです。

`props` というプロパティは元々vueに備わっているものなので、 `$` が必要ということです。

ちなみに `main.js` にある `$mount` は、elプロパティと同じことを行うことができるメソッドです。
`$mount` は引数を取り、テンプレートをマウントしたい要素を決めることが可能です。

また一つ学びました。
Codeforces Round #615 C. Product of Three Numbers

こういう問題を瞬殺できるようにならないといけない。(20分かかったけど気持ち5分くらいで解きたい)

# 概要
- nが与えられる。積がnとなる異なる$a,b,c$があるならば答えよ。ただし、それぞれ2以上の整数である。

# 例
積という時点で素因数分解した数の組み合わせという推察はできる。
- 64 ⇒可能 2*4*8
- 32 ⇒不可能 (2*2*2*2*2のため、どうやっても2か4が被る)
- 97 ⇒不可能(素数)

# アプローチ
nは高々$10^{9}$なので、$2^{30}$以下である。ということは素因数は高々30であるので、総当たりする。
- 素因数分解する
- この数が2以下の場合は条件を満たせない。
- 素因数を適当に3つに分けて掛け算し、違う3つの数ができたらYESとして答えに採用

WORSTでも30*30*30 = 9000程度なので、力づくで試行した。

```Python
def factorization(n):
    arr = []
    temp = n
    for i in range(2, int(-(-n ** 0.5 // 1)) + 1):
        if temp % i == 0:
            cnt = 0
            while temp % i == 0:
                cnt += 1
                temp //= i
            for j in range(cnt):
                arr.append(i)
 
    if temp != 1:
        arr.append(temp)
 
    if arr == []:
        arr.append(n)
 
    return arr
n = int(input())
for _ in range(n):
    x = int(input())
    dat = factorization(x)
    datlen = len(dat)
    if len(dat) <= 2:
        print("NO")
    else:
        f = False
        a = 1
        for i in range(datlen):
            a *= dat[i]
            b = 1
            for j in range(i+1, datlen):
                b *= dat[j]
                c = 1
                for k in range(j+1, datlen):
                    c *= dat[k]
                if a != b and b != c and a != c and a != 1 and b != 1 and c != 1:
                    f = True
                    break
            if f:
                break
        if f:
            print("YES")
            print("{0} {1} {2}".format(a, b, c))
        else:
            print("NO")
```
https://codeforces.com/contest/1294/submission/69332106
yukicoder No.992 最長増加部分列の数え上げ

yukicoder No.992 → [問題リンク](https://yukicoder.me/problems/no/992) 
writerの解説とは違う方法で解いた。
#####問題
数列の最長増加部分列(LIS)の個数を求める問題。
ただし数列には同じ値があるかもしれない。
#####事前知識
$1, 2, \dots N$ の順列 $P_1, P_2, \dots P_N$ のLISの長さを求めるには、次のようなDPをすればよい。
・$dp[i] = P_i$ を最大値(最右項)とするLISの長さ
・$dp[i]$ は $P_i$ の小さい順に更新する。未更新の値については $dp[j]=0$ とする。
・$dp[i] = \max(dp[0], dp[1], \dots , dp[i-1])+1$ になる。この計算はBITを使えばよい。

個人的には、このやり方はDP配列を二分探索して値を更新するやり方よりも直感的で分かりやすいと思う。
#####解説
相異なるとは限らない数列というのが厄介だが、同じ値が2度採用されることはないのを考えると、$(A_i, -i)$ の小さい順に $1, 2, \dots N$ と値を付け替えればよいことがわかる。
これで、$1, 2, \dots N$ の順列($P_1, P_2, \dots P_N$ とする)のLISの個数を求める問題になった。

先ほどの **事前知識** の項に載せたLISの長さを求めるDPを応用する。
・$dpL[i] = P_i$ を最大値(最右項)とするLISの長さ
・$dpC[i] = P_i$ を最大値(最右項)とするLISの個数
・$dpL[i], dpC[i]$ は $P_i$ の小さい順に更新する。未更新の値については $dpL[j]=0, dpC[j]=0$ とする。
・$MAX=\max(dpL[0], dpL[1], \dots , dpL[i-1])$ とすると、$dpL[i]=MAX+1$、$ dpC[i]=\displaystyle\sum_{dpL[k]=MAX}dpC[k]$  と更新できる。この更新はBITなどを使えばよい。

実際の実装では、次のようにするとよい。
・$dpL[i]$ や $dpC[i]$ の代わりに`struct Item { int L; long long C; };` を作り、DP配列の要素はこの構造体にする。
・この構造体に関数`Item max(Item a, Item b)`を定義する。この関数は、`a`と`b`で`L`の値が異なる場合は`L`が大きい方の構造体を返し、`L`の値が同じ場合は`Item(a.L, a.C + b.C)`を返す。
このように実装すると、**事前知識** で述べたDPとほぼ同じようにDPの更新が書ける。

[提出コード](https://yukicoder.me/submissions/430251)
【Laravel】HTML::linkやHTML::linkActionメソッドが使えない件（LaravelCollective）

# 環境
- PHP 7.4.1
- Composer 1.9.3
- Laravel Framework 6.14.0
- laravelcollective/html v6.0.3

# 結論
LaravelCollective/html v5.4から記法が変更になっています。
v5.4以降を使用する場合は、link_toやlink_to_actionメソッドを使いましょう。
https://laravelcollective.com/docs/6.0/html#generating-urls

```php

// v5.3以前
Html::link('foo/bar', $title = null, $attributes = [], $secure = null)
Html::linkAction('HomeController@getIndex', $title = null, $parameters = [], $attributes = [])

// v5.4以降
link_to('foo/bar', $title = null, $attributes = [], $secure = null)
link_to_action('HomeController@getIndex', $title = null, $parameters = [], $attributes = [])
```

# 参考（公式）
・LaravelCollective | HTML v5.3
https://laravelcollective.com/docs/5.3/html#generating-urls

・LaravelCollective | HTML v5.4
https://laravelcollective.com/docs/5.4/html#generating-urls
Chromeリモートデスクトップを使用してスマホからPCをリモート操作する方法②(スマホ側設定)

PC側の設定については、[こちら](https://qiita.com/gori1747/items/7a060d536536d3b306bf)を参照ください。

設定手順
※Android向けの説明になっていますが、iphoneでも手順は変わりません。
①Playストア(App store)より『Chromeリモートデスクトップ』をインストール
<img width="225" alt="Screenshot_20200214-224807.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569318/c333745c-afcf-d0ae-1094-a05cf1af712a.png">

②アプリを起動し、PC側で設定したPC名を選択
<img width="225" alt="Screenshot_20200214-225010.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569318/c2682e02-4569-76d3-8124-a41861e15056.png">

③6桁のPINコードを入力し接続
<img width="225" alt="Screenshot_20200214-225028.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569318/d68f7cc8-2ab7-6d16-4d59-06e02e4003b9.png">

④設定完了
<img width="225" alt="Screenshot_20200214-225119.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569318/bd1d5cae-55e9-c931-5fda-7be9f78d7fe6.png">

以上でリモート接続は完了です。

ちなみに、
こちらが横向きの画面
<img width="450" alt="Screenshot_20200214-225132.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569318/9a544dd2-e52a-47c2-2150-571c5ffa3ea8.png">


横向きの方が見やすく操作もしやすいですね。
スマホでの操作方法については、また別の記事で説明したいと思います。


今回もご覧いただきありがとうございました。
[Kaggle] ep.2 - タスク

# tldr

分析コンペにおけるタスクについて勉強した

# タスクとは
Kaggleにおいてタスクとは
「コンペの評価指標を最適化するための方法」を指すらしい

# タスクの種類

## 回帰タスク（Regression Task）

数値を予測するタスク

例）

- 株価のリターン
- 不動産価格


## 分類タスク

レコードがある属性に属しているかどうかを予測するタスク

例）

- 患者が病気にかかっているか否か

## 多クラス分類

レコードが複数のクラスのうちどれに属しているかどうかを予測するタスク

- `マルチクラス分類` 複数のクラスのうちどれか1つにぞくしている
- `マルチラベル分類` 同時に複数のクラスに属する場合がある


例）

TBA

## レコメンデーション

ユーザーが購入しそうな商品や反応しそうな広告などを予測するタスク

## 物体検出

画像に含まれる物体のクラスとその存在する領域を短径領域で推定するタスク

## セグメンテーション

画像に含まれる物体の存在領域を画像のピクセル単位で推定するタスク
schema.rbにマイグレーションファイルが反映されない！

## 開発環境
ubuntu(WSL)
Rails 5.2
Postgresql

## 想定エラー内容

```
ActionView::Template::Error (PG::UndefinedColumn: ERROR:  column tasks.user_id does not exist
LINE 1: SELECT "tasks".* FROM "tasks" WHERE "tasks"."user_id" = $1 O...

```

## 原因
一概には言えないですが、おそらく`rails:db migrate`した後にマイグレーションファイルを書き換えている。

## 対処法
`rails db:migrate:status`で反映されているか確認する。
upは反映済み。downは未反映。

```
 Status   Migration ID    Migration Name
--------------------------------------------------
   up     20200213054056  Create users
   up     20200214132021  Add user id to tasks

```


`rails db:rollback`で戻す。
マイグレーションファイルを書き換えて再び、`rails db:migrate`を実行する。

## 参考文献
- [[Rails5]migrationファイルの削除方法(DB反映前/反映後)](https://qiita.com/gita/items/2198e2961a9fc7d10bd2#db%E5%8F%8D%E6%98%A0%E5%89%8D%E3%81%AEmigration%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E5%89%8A%E9%99%A4)