OmniAICreator/Qiita-1.07M huggingface dataset:
[Python numpy] 配列のインデックスを動的に指定する

単語帳．毎回検索するのが面倒なので転載多め．元URLあり．

## 方法1: `take(indices, axis=)`メソッド

`indices`は配列でもOK．
しかし`axis`にタプルを入れて複数の次元を指定することは不可．

```Python
nx, ny, nz = 2, 3, 4
arr = np.arange(nx * ny * nz).reshape(nx, ny, nz)

arr.take(0, axis=0) # arr[0]と同じ
arr.take(1, axis=1) # arr[:,1]と同じ
```

[Numpy: numpy.take]
(https://docs.scipy.org/doc/numpy/reference/generated/numpy.take.html)


## 方法2: sline(None)を組み合わせる

`slice(None)`，または`slice(None, None, None)`はインデックスでいう`:`と同じ．

```Python
# 以下はarr[:,0,2]と同じ
I = [slice(None)] * arr.ndim # [:,:,:]と同じ
I[1] = 0
I[2] = 2
arr[tuple(I)]
```

[stackoverflow: Dynamic axis indexing of Numpy ndarray]
(https://stackoverflow.com/questions/31094641/dynamic-axis-indexing-of-numpy-ndarray)
DNSのゾーンとドメイン

# 概要
DNSのゾーンとドメインの違いを理解する

# 前提
DNS初心者のメモ書き

# ゾーンとドメイン
間違えやすいのは、ゾーンは階層構造ではないこと。階層構造なのはあくまでドメインであり、ゾーンはドメインの管理範囲を定義している。
ゾーンは、「1つのドメイン」、もしくは「1つのドメインとそのサブドメイン」を管理対象とする。サブドメインのサブドメインは対象にできない。

## ドメイン
以下のように階層構造となっている。
ドメインはADで管理できる。

com
　├ ccc
　└ bbb
　　　└ aaa

## ゾーン
ゾーンの分割は、配置するDNSとADによる。
ゾーン分割は以下が考えられる。（前方参照ゾーン）

分割例1：
comゾーン
ccc.comゾーン
bbb.comゾーン
aaa.bbb.cccゾーン

分割例2：
comゾーン
　├ ccc（comのサブドメイン）
　└ bbb（comのサブドメイン）
aaa.bbb.cccゾーン

分割例3：
comゾーン
　└ ccc（comのサブドメイン）
bbb.comゾーン
　└ aaa（bbb.comのサブドメイン）

# 参考資料
[DNSのサブドメインを定義する](atmarkit.co.jp/fwin2k/win2ktips/739subdomain/subdomain.html)
cdしたらlsしろよ。しろよぉ……

私は短気なので、cdした後に自分でlsしなければいけない人生を送るくらいなら、寿司に醤油をつけたらタイキックされる人生を送ったほうがましだと考えている。

ごめん言いすぎた。

しかし、他の人とペアプロ的なことをするときに、

```
「そのディレクトリ入って」
「はい」
……
「……lsして」
「あ、はい」
```

みたいな地獄のやり取りや、

```
cd xxx
0.5秒くらい間があって（体感では三年と二か月半）
ls
```

みたいな謎の待ち時間に耐えられないのは本当だ。
頼むからcdlsくらい自動化してくれよ。
日が暮れちゃうよ。

もっとも、「俺は勝手にlsされるくらいならワサビ抜き寿司を食う！」という硬い意志を持ってる人はそのままでいいのだが、今まで私が出会ってきたそういう人はcdlsの自動化の発想がなかったようで、勧めてみると大体「いいねそれ」みたいな感じだった。

zshを使ってる人は.zshrcに一行追加するだけ。

```zsh
function chpwd() { ls }
```

bashの人は https://qiita.com/b4b4r07/items/8cf5d1c8b3fbfcf01a5d でも見たらできるんじゃないか？。
TypeScriptでオブジェクトの一部のプロパティのみ省略可能にする

# 

```typescript:Data1
interface Data1 {
  foo: number
  bar: string
  baz: string
}
```

この`Data1`というinterfaceに対して

```typescript
const value: Data1 = {
  foo: 1,
  bar: "bar"
}
```

このように変数`value`を定義すると当然コンパイルエラーになります。
このエラーを解消する方法として、各プロパティをnullableにしてしまう方法があります。
TSの標準ライブラリには`Partial`があり、これを使うと`Data1`を

```typescript:Data2
interface Data2 {
  foo?: number
  bar?: string
  baz?: string
}
```
として扱えるようになります。
ただ、全てのプロパティを問答無用でnullableにするよりは、以下のように一部だけnullableとして扱えるようにすべきケースの方が多いかと思います。例えば以下のように扱いたい場合です。

```typescript:Data3
interface Data3 {
  foo?: number
  bar?: string
  baz: string
}
```

ここで、`Data1`の構造を維持したまま`Data3`のように扱えるようにするためのオブジェクト操作系`PartiallyPartial`を実装する方法について書きます。

# 方法

TypeScript標準ライブラリの`Partial`を利用して以下のように書くと実現できます。

```typescript:PartiallyPartialの定義

type PartiallyPartial<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
```

この後の構文解説では以下の使用例を用いていきます。

```typescript:使用例
interface Data {
  foo: number
  bar: string
  baz: string
}
/*
 * T1は { foo?: number; bar?: string; baz: string } 型になる
 */
type T1 = PartiallyPartial<Data, 'foo' | 'bar'>

const value1: T1 = {
  baz: "baz"
}

console.log(value1)
```

# 構文解説
`PartiallyPartial`の定義を分解して見ていきます。

## `PartiallyPartial<T, K extends keyof T>`
`keyof T`は`type T`のプロパティ名の直和型を表しています。
`K extends keyof T`についてですが、このように記述することで`K`は`T`の部分型であるという制約をつけることができます。
`使用例`においてこの構文の実体は`PartiallyPartial<Data, 'foo' | 'bar'>`であり、`keyof T`は`'foo' | 'bar'`となります。


## `Omit<T, K>`
型`T`の中から`K`に当てはまるプロパティのみを抽出した型を返します。
`使用例`においてこの構文の実体は`Pick<Data, 'foo' | 'bar'>`であり、`'foo' | 'bar' | 'baz'`から`'foo' | 'bar'`を抜き取った`{baz: boolean}`を返してきます。

## `Partial<Pick<T, K>>`
`Partial`は、冒頭でも述べたように全てのプロパティをnullableにする操作系です。
ここでは`Pick<Data, 'foo' | 'bar'>`の`'foo' | 'bar'`をnullableにしています。つまり`Data`型のプロパティの中で唯一`'baz'`だけがnullableでなくなります。最終的に返ってくる値は`{foo?: number; bar?: string}`になります。

## `Omit<T, K> & Partial<Pick<T, K>>`
これはつまり`{baz: boolean}`と`{foo?: number; bar?: string}`の積になるので、
`{ foo?: number; bar?: string; baz: string }`という型になります。


# 応用

`Omit`の逆である`Pick`は、型`T`の中から`K`に当てはまるプロパティを除外した型を返すので、`T`で指定したプロパティ以外を省略可能にすることが可能です。

```typescript
type PartiallyPartial<T, K extends keyof T> = Pick<T, K> & Partial<Pick<T, K>>;
```

```typescript:使用例
interface Data {
  foo: number
  bar: string
  baz: string
}
/*
 * T2は { foo: number; bar: string; baz?: string } 型になる
 */
type T2 = PartiallyPartial<Data, 'foo' | 'bar'>

const value2: T2 = {
  foo: 1,
  bar: "bar",
}
```
oak のサンプル (その３)

Deno のフレームワーク [oak](https://github.com/oakserver/oak) のサンプルです。 Static content を改造しました。

フォルダー構造

```text
$ tree
.
├── examples
│   └── static
│       └── index.html
└── oak_static.ts
```

```ts:oak_static.ts
// ---------------------------------------------------------------
//      oak_static.ts
//
//                                      Dec/24/2023
//
// ---------------------------------------------------------------
import { Application,send } from "https://deno.land/x/oak/mod.ts";

const app = new Application()

app.use(async (context) => {
  await send(context, context.request.url.pathname, {
    root: `${Deno.cwd()}/examples/static`,
    index: "index.html",
  })
})

console.log("*** start ***")
console.log(`${Deno.cwd()}/examples/static`)
await app.listen({ port: 8000 })

// ---------------------------------------------------------------
```

```html:examples/static/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset=utf-8">
<title>Welcome to nginx!</title>
</head>
<body>
<h1>Welcome to oak!</h1>
<blockquote>
こんにちは<p />
</blockquote>
<hr />
May/20/2020 AM 09:44<p />
</body>
</html>
```

実行コマンド

```bash
deno run --allow-net --allow-read oak_static.ts
```

http://localhost:8000/ にアクセス
![oak_may2004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/6fe48a61-912d-4608-77a0-809f98aa6dfb.png)
マイライブラリ：headの記述

**headの記述**

〇基本セット

```
<head>
    <meta charset="UTF-8">
    <title>HTML文書の基本</title>
    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
    <link rel="stylesheet" href="css/style.css">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="description" content="文書の説明は検索エンジンの検索結果ページに表示されるため、タイトルと並びSEO上非常に重要です。">
</head>
```

〇必要に応じて追加

・googleフォント https://fonts.google.com/
 フォントを選んでEmbedでソースをコピーして貼り付ける
oak のサンプル (その２)

Deno のフレームワーク [oak](https://github.com/oakserver/oak) のサンプルです。Router の Basic usage を改造しました。

```ts:oak_basic.ts
// ---------------------------------------------------------------
//	oak_basic.ts
//
//					May/20/2020
//
// ---------------------------------------------------------------
// import { Application,Router } from "https://deno.land/x/oak/mod.ts"
import { Application,Router } from "https://deno.land/x/oak@v10.1.0/mod.ts"

const books = new Map<string, any>();
books.set("1", { id: "1", title: "それから", author: "夏目漱石", })
books.set("2", { id: "2", title: "夜明け前", author: "島崎藤村", })
books.set("3", { id: "3", title: "舞姫", author: "森鴎外", })

const router = new Router()
router
  .get("/", (context) => {
    context.response.body = "日本文学"
  })
  .get("/book", (context) => {
    context.response.body = Array.from(books.values())
  })
  .get("/book/:id", (context) => {
    if (context.params && context.params.id && books.has(context.params.id)) {
      context.response.body = books.get(context.params.id)
    }
  })

const app = new Application()
app.use(router.routes())
app.use(router.allowedMethods())

console.log("*** start ***")
await app.listen({ port: 8000 })

// ---------------------------------------------------------------
```

実行方法

```bash
deno run --allow-net  oak_basic.ts
```

http://localhost:8000 にアクセス
![oak_may2001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/62717cb8-61ba-f719-eeac-a2d09e7134d2.png)

http://localhost:8000/book にアクセス
![oak_may2002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/9a2d0ff0-d4b7-80b7-3f43-2c6c29a917db.png)

http://localhost:8000/book/3 にアクセス
![oak_may2003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/0d0bb3ef-8183-51fc-fb12-41112366db55.png)
200520学習記録：デフォルトCSSのリセット

ブラウザのデフォルトでマージンや余白、文字サイズなどが指定されている。
CSSを適用するために、一度それをリセットする。

headに以下の一文を入れる。本来読み込むフCSSファイルはその下に入れる。

```
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
<link rel="stylesheet" href="css/style.css">
```
Promiseでお手軽に並列処理

#概要
ある処理を行うのに事前に複数の事前処理が必要な場合、並列してできると処理が速くなる場合がある。コールバック地獄にならない記述がnodeだとできる。

##例
3つのタスクが全て完了したら本処理を実行する例。

```js
var Task1 = new Promise(function(resolve, reject) {
  //事前処理１

  resolve();  //これで事前処理１が終わったことを宣言する
});

var Task2 = new Promise(function(resolve, reject) {
  //事前処理２

  resolve();  //これで事前処理２が終わったことを宣言する
});

var Task3 = new Promise(function(resolve, reject) {
  //事前処理３

  resolve();  //これで事前処理３が終わったことを宣言する
});

Promise.all([Task1, Task2, Task3]).then(function () {
  //本処理
});
```

スッキリ。
jestでシーケンシャルにテストを実行する

jest便利ですね。
DBを使ったテストを作成しているときに、並列で複数のテストが実行されてしまうとテストデータのセットアップが意図したとおりに作成されない状態になってしまいます。
この問題を避けるためjestでシーケンシャルにテストを実行する方法を調べました。

`--runInBand` オプションをつけるとシーケンシャルにテストすることができます。

参考
https://stackoverflow.com/questions/32751695/how-to-run-jest-tests-sequentially
R 4.0.0 の破壊的変更まとめ

約 1 ヶ月ほど前に R-4.0.0 がリリースされた。 メジャーバージョンアップということで、いくつか破壊的な変更があるようだ。 今後、本格的に移行していくのに備えて、実際の挙動を確認しておきたい。

尚、この記事には新機能の紹介は含まれていない。また、破壊的な変更点も何か漏れがあるかもしれない。気になる方は [CHANGES IN 4.0.0](https://cran.r-project.org/doc/manuals/r-release/NEWS.html) をご覧いただきたい。

# `stringsAsFactors = FALSE` がデフォルトに

-   もともと嫌われることの多かったこの仕様が、遂にデフォルトで `FALSE` になる。
    -   tidyverse の `{tibble}` や `{readr}` を使って `data.frame` を作成・読み込みしていたのなら影響はない。

```R
df <- data.frame(letters = letters)
str(df)
```

    
    'data.frame':	26 obs. of  1 variable:
     $ letters: chr  "a" "b" "c" "d" ...



-   デフォルトを `TRUE` に変更しようとすると Warning が出る。将来的にはこのオプション自体がなくなる可能性もありそう。

```R
options(stringsAsFactors = TRUE)
```

    Warning message:
    In options(stringsAsFactors = TRUE) :
      'options(stringsAsFactors = TRUE)' is deprecated and will be disabled



-   注意すべきケース
    -   `data.frame()` や `read.csv()` を使っていて、明示的に `stringsAsFactors` を指定していない場合

# `matrix` が `array` を継承するようになる

-   `matrix` は 2d の `array` なので、自然な変更

```R
matrix_obj <- matrix()
class(matrix_obj)
```

    
    [1] "matrix" "array"



-   注意すべきケース
    -   `class(matrix_obj)` の結果として length 1 を期待している場合
    -   `array` の S3 メソッドを利用しているが `matrix` の S3 が存在している場合 (`matrix` の S3 が呼ばれてしまう)

# `plot()` ジェネリック関数が `{graphics}` から `{base}` へ移動

-   互換性を維持するために、現時点では `{graphics}` からも re-export されているが、今後は廃止される可能性がある

```R
environment(plot)
```

    <environment: namespace:base>

-   注意すべきケース
    -   `{graphics}` から `plot` を Import しているパッケージを開発している場合

# 正規表現ライブラリが PCRE1 から PCRE2 へ移行

-   PCRE1 は既に開発が終了しているため
-   PCRE = Perl 5 compatible Regular Expression Library
    -   PCRE1: PCRE <= 8
    -   PCRE2: PCRE >= 10

```R
extSoftVersion()["PCRE"]
```

                  PCRE 
    "10.31 2018-02-12"

-   注意すべきケース
    -   PCRE1 ではサポートされていた記法で利用できなくなるものがある (正規表現に詳しくないので詳細割愛)

# 参考

-   [CHANGES IN 4.0.0](https://cran.r-project.org/doc/manuals/r-release/NEWS.html)
-   [R 4.0.0 now available, and a look back at R's history (Revolutions)](https://blog.revolutionanalytics.com/2020/04/r-400-is-released.html)
-   [R 4.0.0 にさっさと移行しようと思ったたった一つの理由：新しい raw string 記法【 r"" 】 - Qiita](https://qiita.com/taiyodayo/items/250483de6228eb298c80)
Railsで画像を使用する

#Railsで画像を使用する。

利用したい画像ファイルをapp/assets/imagesに入れておく。
画像を使用したいhtml.hamlファイルにて、

```ruby:html.haml
= image_tag src= "/assets/sample.png", size: "50x50"
```
#Railsで背景画像をcssで指定する。
背景として利用した画像ファイルをapp/assets/imagesに入れておく。
そしてcssファイルにて

```ruby:css
background: image-url("sample.png");
background-size: cover;
```
WSL2でGUIアプリケーションが実行できるようになる日がくる！１

## どういうこと？

今後WSL2の機能にホストのDirctxにアクセスできる仮想デバイス(`/dev/dxg`)とドライバーが追加されて
それ経由でGUI描画できるようになるということらしい。
(Windowsインサイダーに参加している人はもうすぐ試せるようになるみたい。at 2020/05/19)

## 何ができる？

LinuxのGUIアプリが使えるようになるよ。
つまりLinux版のInteliJ IDEAが使える！！！　←　ここ重要
Xsrvしなくていいんじゃ^～

## どこ情報？

英語下手オブ下手なので気になった方は下記の元データをご覧ください。
~~（そして私にも教えて下さい）~~

[DirectX on Linux - Hacker News](https://lkml.org/lkml/2020/5/19/742)
[DirectX ❤ Linux - DirectX Developer Blog](https://devblogs.microsoft.com/directx/directx-heart-linux/)
SSH公開鍵認証に加えて外からのログイン時にTOTPを要求する

家のサーバのsshdへはパスワード認証を無効にして公開鍵認証でログインしていて、接続元のホストを制限しているのだけれど、ふと、踏み台ホストに置いてある私有鍵のパスフレーズを解析されると怖いと思い立って、外からのログインの時には公開鍵認証に加えてTOTPを要求するように設定してみました。

Ubuntu 18.04 LTSのserver版での作業記録です。作業前には、sshdでは公開鍵認証のみが有効になっていました。外からは家庭用ルータのポート転送で接続されます。

## TOTPの用意
[TOTP](https://tools.ietf.org/html/rfc6238)はGoogle Authenticatorなどで表示される、シークレットと現在時刻から生成される、30秒ごとに変化する6桁の数字です。Aptパッケージをインストールすることで認証に用いるPAMとTOTPを設定するCLIが利用できるようになりました。

### インストール

```sh
sudo apt update; sudo apt install libpam-google-authenticator
```

### 設定
ログイン先のユーザーとして下記を実行すると、`~/.google_authenticator`が生成されてシークレットが保存されます。電話のTOTPアプリの設定には表示されるQRコードを利用できます。QRコードが期待どおり表示されるように端末を広めにしておくと良さそうです。

```sh
google-authenticator
```

## PAMの設定
`/etc/pam.d/sshd`を編集し、sshdが

- PAM経由でパスワード認証をしないよう、`common-auth`の行をコメントアウトして無効にして、
- TOTP認証をするよう、直下に下記の行を追加

します。

```
#@include common-auth
auth       required     pam_google_authenticator.so
```
## sshdの設定
sshdが公開鍵に加えてPAM経由での認証を要求するよう、そして、ローカルなネットワーク(ここでは`192.168.0.0/16`)からの接続では公開鍵で認証を済ますように、`/etc/ssh/sshd_config`の`ChallengeResponseAuthentication no`のあたりを下記のように編集します。手元ではlocalhostからのログインは`::1`からと認識されるようです。

```
ChallengeResponseAuthentication yes
AuthenticationMethods publickey,keyboard-interactive
Match Address 192.168.0.0/16,::1
       AuthenticationMethods publickey
Match all
```

この設定を加えて1週間、cronから自動的にログインしてsshするタスクが失敗するのに気づきました。自動運転に使うローカルなアカウントにはTOTPを要求しないように`sshd_config`を下記のような感じに編集しました。だんだん穴が増えていく。

```
ChallengeResponseAuthentication yes
AuthenticationMethods publickey,keyboard-interactive
Match Address 192.168.0.0/16,::1
       AuthenticationMethods publickey
Match User automation,backup
       AuthenticationMethods publickey
Match all
```

## sshdの再起動
sshdを再起動して設定を反映します。設定がうまくいかなかった場合にログインできなくならないよう、新規に接続できることを確認できるまで、ログインしてある端末を手元に残しておくと良いでしょう。

```
sudo service sshd restart
```
【AWS】pingコマンドで「タイムアウト」になる時の対処法

## pingコマンドでタイムアウトになる

AWSでEC2インスタンスを作成して、pingコマンドで応答確認をしたいのにタイムアウトになる。

![スクリーンショット 2020-05-20 8.26.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264073/836df453-a945-1ba3-173e-e26a66eeec7c.png)

■考えられる理由は大きく２つです。
1. サーバーが停止している
2. ファイアウォールで阻止されている

今回は2.についてです。

ファイアウォールにあたるセキリティグループでICMPを許可する必要があります。

■手順
1. マネジメントコンソールにログイン
2. 使用しているセキリティグループを選択
3. 「インバウンドルールの編集」をクリック
4. 「カスタム ICMP - IPv4」を選択し、ソースは任意の場所を選択
5. ルールを保存

![スクリーンショット 2020-05-20 8.36.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264073/8a2b3200-97ab-7264-d129-9e40e8f5797e.png)

![スクリーンショット 2020-05-20 8.42.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264073/f5779505-447a-2c66-7e45-a9ed38fcaf9e.png)


pingコマンドで応答しない原因がセキリティグループの設定の場合は、以上の設定でpingコマンドが通るはずです。

## 参考

[Amazon Web Services 基礎からのネットワーク&サーバー構築]( https://www.amazon.co.jp/dp/4296105442/ref=cm_sw_em_r_mt_dp_U_m6gXEbNPM5RXQ)
【スクラム開発】良い点、悪い点

スクラム開発の現場で働いて、約１月ほど経ったので
スクラム開発のことをまとめ＆良い点悪い点を個人的にまとめてみる。

##スクラム開発とは
アジャイル開発の１つで、特にチームのコミュニケーションを重視した手法のこと。
以下の順序で開発を進める。

1. プロダクトへの要望を優先順位で並べかえる。
2. 固定の短い期間（1～4週間程度）の単位で開発を区切り、１の優先順位をもとに、開発計画を立てる。
3. 開発を行いつつ、プロジェクトの状況や進め方に問題がないかメンバー同士で毎日確認しあう。
4. 2の期間終了後、レビューを行う
5. 1に戻る

大枠で「何をやるか」を決めて、「直近では何をやるか」を決めて固定した期間内で実施していく。毎日、状況の確認を行い、直近でやると決めたことを達成できるようにする。という感じ

##スクラム開発の良い点

 - タスクの工数見積もりがしやすい

短い期間（1～4週間程度）でやることを決めて取り組むので、工数見積もりのズレが発生しにくい。

 - 取り組むべきタスクに集中できる

決めたタスクのみに集中して取り組むことができる。

 - 発生した問題に気付きやすくなる

毎日、チーム内の状況確認を行うので、何か問題があった時に気付きやすいし、調整もしやすい。

 - リーダーの判断をいちいち仰ぐ必要がなくなる（現場による？）

予めタスクを書き出しておいて、その中から「今回やること」みたいな感じで抜き出す形なので、何やるかを決めた後のタスクの消化までリーダの判断が必要になるということが少なく感じる。その分、メンバーが自分のタスクに責任を持つことが必要にはなる。




## スクラム開発の悪い点

 - 話し合いの時間が長くなりがち

毎日、状況確認のための話し合いをする＆レビューなどもあるので
毎日30分は確定で会議があり、レビューのある日は半分以上が会議で持っていかれる。
話している時間がかなり長く、開発をしている時間が短くなる。


## 感想
良い面が多く、実際に開発しやすいと思う。やることが明確化するのが良い。
ただ、作業時間自体は短くなりがちなのは感じる。
※もし悪い面が目立ってきたら、今後も追記していこうと思う。
blocklyでobjectを動かす。その18

#概要

blocklyでobjectを動かす。
leafletにmarkerを立ててみる。

#stageを書く。

```
function marker(src) {
  var line = src.split(",");
  L.marker([line[0], line[1]], {
    title: line[2]
  }).addTo(map);
}
var map = L.map('map').setView([35.65858404, 139.74543162], 12);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
```

#objectを書く。

```

Blockly.Blocks.marker = {
	init: function() {
		this.jsonInit({
		message0: "marker %1",
		args0: [{
			type: "input_value",
			name: "TEXT"
		}],
		previousStatement: null,
		nextStatement: null,
		style: "text_blocks",
		tooltip: Blockly.Msg.TEXT_PRINT_TOOLTIP,
		helpUrl: Blockly.Msg.TEXT_PRINT_HELPURL
	})
}};

Blockly.JavaScript.marker = function(a) {
    return "marker(" + (Blockly.JavaScript.valueToCode(a, "TEXT", Blockly.JavaScript.ORDER_NONE) || "''") + ");\n"
};
```

#フローを書く。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/174477ed-a378-517d-a2ec-84afa59749cf.png)


#写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/9ec75ea5-3931-6d93-0b1c-998801ce775a.png)


#成果物

https://embed.plnkr.co/plunk/8N3ycbO8jo6ty60B

以上。
Docker × swagger × Basic認証 をherokuにデプロイする

# はじめに
関わっているスタートアップではAPIの調整をswaggerを用いて行なっているのですが、swagger uiに毎回ログインするのはめんどくさすぎるので、herokuにデプロイしてそちらを使うことにしました。
その際に認証なしはまずいのでbasic認証をかけています

# ソースコード
まずは構成から、、、
とは言っても大したことはありません

```tree
.
├── Dockerfile
├── heroku.yml
└── swagger.yml
```


```Dockerfile:Dockerfile
FROM swaggerapi/swagger-ui

# ローカルで作成したswagger.ymlをdocker内のsample.yamlにコピー
COPY ./swagger.yml /usr/share/nginx/html/sample.yaml

# デフォルトで表示する内容をコピーしたものにするように環境変数を修正
ENV API_URL=sample.yaml

# Basic認証

# Basic認証を使うためのパッケージをインストール
RUN apk add apache2-utils

ARG USERNAME=username
ARG PASSWORD=password

# 暗号化して`/etc/nginx/.htpasswd`に書き出している
RUN htpasswd -c -b /etc/nginx/.htpasswd ${USERNAME} ${PASSWORD} && cat /etc/nginx/.htpasswd

# `/etc/nginx/nginx.conf` に

# auth_basic "Restricted Content";
# auth_basic_user_file /etc/nginx/.htpasswd;

# の２行を加筆する
RUN sed -i "s|location / {|location / {\n\tauth_basic \"Restricted Content\";\n\tauth_basic_user_file /etc/nginx/.htpasswd;\n|g" /etc/nginx/nginx.conf
```

```yml:heroku.yml
build:
  docker:
    web: Dockerfile
```
herokuでdockerを動かすためのファイル
herokuのためのdocker-composeみたいなイメージです
※参考： https://devcenter.heroku.com/articles/build-docker-images-heroku-yml

# herokuの設定
```terminal:ターミナル
heroku login

heroku container:login

heroku create 任意のアプリケーション名

heroku container:push web

heroku container:release web

heroku open
```

適切にデプロイされていることを確認
※参考:https://devcenter.heroku.com/articles/container-registry-and-runtime

# CI/CD
gitにpushされた時に自動でデプロイさせる
1, [herokuダッシュボード](https://dashboard.heroku.com/apps)にいき該当のアプリケーションの詳細ページへ
2, 「deploy」を選択
![スクリーンショット 2020-05-20 10.05.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281558/293c1544-2a8c-3984-0f26-9984c9e0b863.png)

3, gitリポジトリを検索し「connect」を選択
 ![スクリーンショット 2020-05-20 10.09.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281558/96bad2ea-d0ea-6938-8317-facdbc41bee4.png)

4, 自動デプロイするブランチを選択し「Enable Automatic Deploys」を選択
 ![スクリーンショット 2020-05-20 10.12.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281558/a97c95a7-9bfa-73fe-e6cc-9b7626438c52.png)

5, masterにpush後herokuの「Activity」内で `Build succeeded` とかって文字があれば設定は完了です。


# まとめ
個人的に一番辛かったのがどうやってswaggerにbasic認証をかけるか？
ってところです笑
まあ、蓋を開けてみれば別に大したことしなくても動いてくれたのでとりあえずいいかな〜と、、、
なんか本当はもうちょっといいやり方ありそうな気がするので他にやり方知っている方いれば教えてください汗
tensorflow_addons (tfa.image.rotate) で Colaboratory (Jupyter Notebook) のセッションがクラッシュするときの解決法

# 解決法

現在デフォルトだと、tensorflow と tensorflow_addons の互換性が狂っているようなので、`pip install` で修正する。

```python
! pip install tensorflow==2.1
! pip install tensorflow_addons==0.6.0 --no-deps
```

# 参考資料

- image.rotate Segfault with TensorFlow 2.2.0rc0 and tf-nightly: https://github.com/tensorflow/addons/issues/1298
Apple WWDC (世界開発者会議) の奨学金および学生として会議に直接参加する方法

Appleは毎年、WWDCに直接参加する機会として、世界中の学生に350枚のチケットを授与しています。（AppleがWWDCカンファレンスをオンラインで開催した今年を除きます）。このアワードにはカンファレンスに参加するための宿泊費や、Apple Developer Programの1年間の無料利用も含まれます。

このスカラシップ（奨学金）チャレンジに参加するには、現在学生であるかSTEM機関で学んでいる必要があります。

（　WWDCはアメリカにあります　）

![422ABF6C-CB47-412D-8187-5BEBC53F5698.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/02cbb7c6-f71e-95ce-63eb-78c3df577f62.jpeg)

![FCD56C43-04F4-40CD-9B30-D52BA10CBCE9.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/fee60294-1717-3258-5b0c-fbe3e2343902.jpeg)

こちらがWWDC 2019スカラシップのウェブサイトです。英語で書かれています。: https://developer.apple.com/wwdc19/scholarships/

## チャレンジとは？

（こちらの情報は、2017、2018、2019の規則に基づいています）。この規則が今後数年間同じであるという保証はございません。

### Swift Playgroundを作る

決まったトピックに基づきプログラムを作ってもらうのではなく、何でも好きなものに関するSwift Playgroundを作っていただきます。Swift PlaygroundsはMac OS（https://apps.apple.com/us/app/swift-playgrounds/id1496833156?mt=12 にてXcodeあるいはスタンドアロンに含まれる）だけでなく、 iPad上 (https://apps.apple.com/jp/app/swift-playgrounds/id908519492) でも動作する必要がありますのでご注意ください。

### エッセイを書きなさい

Swift Playgroundを完了させたら、エッセイを2本書いてください

#### あなたが開発したプログラムを説明してください

1つ目はあなたが使用した機能と技術（フレームワーク）を含む、あなたが作ったSwift Playgroundを記述するエッセイです。ここに、developer.apple.comからの元の記述があります。

>Upload your Swift playground from your Mac. Tell us about the features and technologies that you used in your Swift playground, in 500 words or less.

#### オプションのエッセイ

##### 会議を超えて
コンピュータサイエンスのコーディング知識を他の人と共有することについてどう思うか記述してください。

>Beyond WWDC. If you've shared or considered sharing your coding knowledge and enthusiasm for computer science with others, let us know in 500 words or less.

### 証明書類
また、あなたが現在学校やSTEM組織の学生であることの証明を提出する必要があります。

## より多くのインスピレーション/ より多くのリソース

### Githubリポジトリ

奨学生の多くがソースコードと彼らの仕事のビデオをアップロードするGithubリポジトリがあります。

https://github.com/wwdc

### YouTube

また、過去のWWDCスカラシップ作品を見ることのできるYoutube プレイリスト（非公式）もございます。

WWDC 2018 https://www.youtube.com/playlist?list=PLRg_ppvslSwravoG9QwGsyNjO-n9Nq_Qr&feature=share

### 公式WWDC奨学金フォーラム

これは奨学金の応募者が議論できるフォーラムです。

https://forums.developer.apple.com/community/other/wwdc-scholarships

### WWDC スカラシップの申し込みは通常2月か3月に開始します。この情報は developer.apple.com で見ることができ、申し込みもこちらから可能です。

（こちらの情報は、2017、2018、2019の規則に基づいています）。この規則が今後数年間同じであるという保証はございません。

### WWDC 2020

WWDC 2020 スカラシップへの応募期間は既に終了しました。今年度の参加条件は昨年度と同様であり、WWDC 2020はオンラインで開催されます。
Web Share Target APIを使うときのmanifest.jsonの書き方

色々調べたけどほしい情報がまとまってるところがなかったから調べた内容共有。

# Web Share Target API?
他のアプリからの共有先に、自分のアプリを追加する機能。

このあたり見ればだいたいわかる。
[PWAで使える（ようになる）機能3選 | フロントエンドBlog | ミツエーリンクス](https://www.mitsue.co.jp/knowledge/blog/frontend/201904/22_1347.html)
[Receiving shared data with the Web Share Target API](https://web.dev/web-share-target/)

ネイティブアプリからは共有先にできないってのが残念だったけど、
確認したらネイティブアプリからも共有先にできてた。進化してた。
android端末以外ではまだ使える場面少ないにしても、PWA作るなら入れといて損はしないと思う。

# 実装方法
## manifest.jsonにshare_targetを追加
manifest.jsonにshare_targetを追加するだけでWeb Share Target APIが使えるらしいからさくっと追加。

```json:manifest.json
"share_target": {
  "action": "/share-target/",
  "method": "GET",
  "params": {
    "title": "title",
    "text": "text",
    "url": "url"
  }
}
```
最初この書き方をしたらコンソールに警告が出た。

```
Manifest: Method should be set to either GET or POST. It currently defaults to GET.
Manifest: Enctype should be set to either application/x-www-form-urlencoded or multipart/form-data. It currently defaults to application/x-www-form-urlencoded
```
methodとenctypeは必須じゃないみたいだけど、書かないと警告が出るらしい。
動作は問題なさそうだけど、毎回警告出てるのもあれだから修正する。
ということで追加。

```json:manifest.json
{
  "share_target": {
    "action": "/share-target/",
    "method": "GET",
    "enctype": "application / x-www-form-urlencoded",
    "params": {
      "title": "title",
      "text": "text",
      "url": "url"
    }
  }
}
```

しかしまた警告。

```
Enctype should be set to either application/x-www-form-urlencoded or multipart/form-data. It currently defaults to application/x-www-form-urlencoded
```

言われた通り指定してるはずなのに、と悩んでたら、
"application/x-www-form-urlencoded"を、ついうっかり
"application / x-www-form-urlencoded"にしてみたい。

```json:manifest.json
{
  "share_target": {
    "action": "/share-target/",
    "method": "GET",
    "enctype": "application/x-www-form-urlencoded",
    "params": {
      "title": "title",
      "text": "text",
      "url": "url"
    }
  }
}
```

これで警告消えた。

## 共有時の動作
上記設定で他のアプリから共有を受け取る準備は終わってるから、あとは受け取るだけ。

```javascript:javascript
const title = new URL(document.location).searchParams.get("title")
```

"action"で指定されてるページでこんな感じで受け取って、必要な処理書いとく。

Web Share APIと合わせて、PWAをネイティブアプリに近い感覚で使えるようになるこのあたりの機能。
実装にもさほど手間がかからないし、試しに導入してみるのもいいんじゃないかと思う。
GIT　手順書フォルダ

#手順書　フォルダ　
まず、手順書フォルダを見よ。
現場の手順書フォルダとは違ってもう少し一般的なものを取り上げています。
#GITについて　
##用語
・git 
・github
・リポジトリ
・ローカル
・リモート
・CUI GUI
・modified・・・ 修正された
・fetch　・・・ 取って来る

##シラバス/コマンド
・git init
・git config --global core.editor "code --wait"
・code .
・git clone develop 
・git status
・git log
・git add file1
・git add .
・git commit -m "はじめてコミット"
・git push origin 
・git push origin develop
・git pull origin develop


・git checkout -b develop master
・git branch   自分がどこにいるかわかる。
・git push origin develop
・git checkout master
・git merge develop
・git reset --hard HEAD
・git stash
・git stash pop

##動画
###Git Tutorial for Beginners: Command-Line Fundamentals
https://www.youtube.com/watch?v=HVsySz-h9r4&fbclid=IwAR3lLQnfKwADzCBnlaqRiLGhwyvpRGd0nk3Phab-8j9-89w-2VSQ2uMb5ro

###Git+Github使い方入門講座🐒デザイナーやプログラマー必見！Gitの仕組みやブランチの運用ルールまで、開発現場で必要な知識を完全解説！ #1
https://www.youtube.com/watch?v=EjSgD1xb6zw&fbclid=IwAR2SM8vxh6070fd7evTtDG52aXrDqhz_oOfNYjKZBnnc9KufvF6MCSa5eLw

###Git+Github使い方入門講座 #2
https://www.youtube.com/watch?v=cAlboA-Maqc

###【Git入門】サルでも分かるGit入門の前に！Git使い方高速入門編【入門は5分で十分だと思います】
https://www.youtube.com/watch?v=i1L3A0SLDyg

##トラブルシューティング
###1 権限の問題　sudo 
注　エラーメッセージ　Permission denied
###2 セキュリティの問題
git hubでリポジトリを作成時にセキュリティ上重い方にしてしまった。

##nano プロジェクト　基本コース
・市販の教材で用意してくれたリソースをForkする。
・ローカルにクローンを行う
・ブランチを作成する。
・修正を行う。
・ブランチにpushを行う。
・今までの工程を別フォルダで行う。
・ローカルでpullを行う。
懸念点：余計なものをpushしたり削除したりしないのか？ 
https://techacademy.jp/magazine/10179

##nano プロジェクト　応用コース
・ローカルにクローンを行う
・ブランチを作成する。
・修正を行う。
・マスターに変更する。ブランチにpushを行う。
・マスターで修正を行う。
・git branchで確認をする。
・git stash で修正を消す。
・git checkout developで場所を移動する。
・git stash pop で変更を反映する。
・ブランチにpushを行う。
←　git push origin develop
##懸念点：
pullを忘れそう。
git push origin develop
memo UI上で動的に矢印の生成。

```C#
using UnityEngine;
using UnityEngine.UI;

public class ArrowRenderer : Graphic
{
    protected override void OnPopulateMesh(VertexHelper vh)
    {
        Vector2 corner1 = Vector2.zero;
        Vector2 corner2 = Vector2.zero;

        Vector2 leftBottom = Vector2.zero;
        Vector2 rightBottom = Vector2.zero;
        Vector2 top = Vector2.zero;

        corner1.x = 0f;
        corner1.y = 0f;
        corner2.x = 1f;
        corner2.y = 1f;

        leftBottom.x = -0.2f;
        leftBottom.y = 0f;

        rightBottom.x = 1.2f;
        rightBottom.y = 0f;

        top.y = -0.3f;
        top.x = 0.5f;


        corner1.x -= rectTransform.pivot.x;
        corner1.y -= rectTransform.pivot.y;
        corner2.x -= rectTransform.pivot.x;
        corner2.y -= rectTransform.pivot.y;

        leftBottom.x -= rectTransform.pivot.x;
        leftBottom.y -= rectTransform.pivot.y;

        rightBottom.x -= rectTransform.pivot.x;
        rightBottom.y -= rectTransform.pivot.y;

        top.y -= rectTransform.pivot.y;
        top.x -= rectTransform.pivot.x;


        corner1.x *= rectTransform.rect.width;
        corner1.y *= rectTransform.rect.height;
        corner2.x *= rectTransform.rect.width;
        corner2.y *= rectTransform.rect.height;

        leftBottom.x *= rectTransform.rect.width;
        leftBottom.y *= rectTransform.rect.height;

        rightBottom.x *= rectTransform.rect.width;
        rightBottom.y *= rectTransform.rect.height;

        top.y *= rectTransform.rect.height;
        top.x *= rectTransform.rect.width;

        vh.Clear();

        UIVertex vert = UIVertex.simpleVert;

        vert.position = new Vector2(corner1.x, corner1.y);
        vert.color = Color.black;
        vh.AddVert(vert);

        vert.position = new Vector2(corner1.x, corner2.y);
        vert.color = Color.black;
        vh.AddVert(vert);

        vert.position = new Vector2(corner2.x, corner2.y);
        vert.color = Color.black;
        vh.AddVert(vert);

        vert.position = new Vector2(corner2.x, corner1.y);
        vert.color = Color.black;
        vh.AddVert(vert);


        vert.position = new Vector2(leftBottom.x, leftBottom.y);
        vert.color = Color.black;
        vh.AddVert(vert);

        vert.position = new Vector2(rightBottom.x, rightBottom.y);
        vert.color = Color.black;
        vh.AddVert(vert);

        vert.position = new Vector2(top.x, top.y);
        vert.color = Color.black;
        vh.AddVert(vert);

        vh.AddTriangle(0, 1, 2);
        vh.AddTriangle(2, 3, 0);
        vh.AddTriangle(4, 5, 6);
    }
}
```

<img width="628" alt="スクリーンショット 2020-05-20 6.59.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328087/ae86c8b6-b3ce-5f15-8cb8-f2ffea63c587.png">
明日から無職でエンジニア目指す

#エンジニア転職失敗したらきのこ掘る

##自己紹介
■年齢
24歳
■経歴
大学(2019年3月卒業)
↓
プログラミングスクールでキャリアアドバイザー担当(2019年4月〜2020年5月)

■Qiitaを始めた経緯
素人がエンジニアを目指した過程の残す

##エンジニアを目指した経緯
１年間、プログラミングスクールのキャリアアドバイザー担当を務めていました。
その環境で、エンジニアの方と関わることが多く、プログラミングに触れる機会が多々あり、自分でもやってみようかなぁってなりました。

やってみると、凄く面白く、業務時間が終わるのが楽しみの生活になりました。笑

いっそのこと会社辞めて本気でエンジニア目指すか！
ってなり、退職しました。

##エンジニアになった後のキャリア
正直あまり考えてません。
強いていうなら、世の中に存在する会社の生産性を上げることができるエンジニアとして活躍したいですね。
我ながら、縁の下の力持ちをすることが大好きな人間のため、自分が支えて周りが生産性を上がっていく環境作りをしていきたいです、

##Qiitaに書くこと
・PHPの学習日記
・転職過程
・その他アウトプット

##キノコ掘る？？
彼女が一緒に田舎でキノコ堀りしてくれるらしいです。（なぜキノコなのかは不明）
【Flutter】multi_image_pickerのカメラがクラッシュする不具合

Flutterで複数画像が選択できるパッケージ「multi_image_picker」でカメラが動かない（アプリが停止する）現象があったのでその原因メモ。

#結論
・multi_image_picker
・image_picker_flutter

上記のパッケージを併用してると発生する模様。
pubspec.yamlに追記しただけで、実際はimage_picker_flutterの方はどこでもimportしておらず機能も使ってなかったが、パッケージが併存しているだけでNGな模様。
image_picker_flutterをpubspec.yamlから削除してPackage upgradeをかけてやれば解消した。

以上
【flutter初心者】ListViewやGridViewを入れ子にするには（Vertical viewport was given unbounded height エラー）

##### ListView in ListView
flutterのリストビュー、グリッドビューを使ってレイアウトを組む際、これらを入れ子（ネスト）したい場面がありますが、単純にやると下記のようなエラーが出ます。

>The following assertion was thrown during performResize():
Vertical viewport was given unbounded height.

>Viewports expand in the scrolling direction to fill their container. In this case, a vertical viewport was given an unlimited amount of vertical space in which to expand. This situation typically happens when a scrollable widget is nested inside another scrollable widget.

>If this widget is always nested in a scrollable widget there is no need to use a viewport because there will always be enough vertical space for the children. In this case, consider using a Column instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size the height of the viewport to the sum of the heights of its children.

要するに「高さが無制限になっとるぞ」と怒られます。これの解決方法。

#解決方法
子のListViewウィジェットに、以下を設定する。

```dart
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
```

「shrinkWrap: true 」だけでもエラーは解消しますが、これだけだと子のリストビューエリアで画面全体のスクロールが効かなくなります。これを解消するには「physics: NeverScrollableScrollPhysics()」もセットで指定すること。

#サンプルコード
```dart
class ListInList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    List<Widget> _listChild = new List();
    for(int i=0; i<20; i++){
      _listChild.add(Text('子${i}'));
    }

    return Scaffold(
      appBar: AppBar(
        title: Text('List in List'),
      ),
      body: ListView(
        children: <Widget>[
          //親１
          Column(
            children: <Widget>[
              ListTile(subtitle: Text('親１'),),
              ListView(
                shrinkWrap: true,
                physics: NeverScrollableScrollPhysics(),
                children: _listChild,
              ),
            ],
          ),

          //親２
          Column(
            children: <Widget>[
              ListTile(subtitle: Text('親２'),),
              ListView(
                shrinkWrap: true,
                physics: NeverScrollableScrollPhysics(),
                children: _listChild,
              ),
            ],
          ),

        ],
      )
    );
  }
}

```

#スクリーンショット
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636647/a692a575-8532-59a7-9c14-730f24c7d280.png)


以上となります。
【flutter初心者】画面の構成とファイル分割

flutter初心者（自分）がアプリを作るにあたり最初に困ったのでメモ。
おそらく初歩的過ぎてちゃんと説明してるところがあまり見当たらなかったので。

よくあるサンプルコードは大体こんな感じになってることが多いです。

main.dart

```dart
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MainPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('main画面のタイトルバー'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('ボタン'),
        ),
      ),
    );
  }
}
```

ふむふむ、main処理のrunAppメソッドでMyApp クラスを呼び、MyAppクラスで画面全体のウィジェットをビルド・・・なるほど。

これはこれでなるほどよく分かるのですが、「じゃあボタンを押して新しい画面を開くには」どうすればよいか？

画面（ビュー）はScaffoldウィジェットが親になる、と考えて良いかと思います。（Scaffoldはアプリケーションバーやbodyを持つウィジェットです）。

なので新しい画面を開くには
・新しい画面をビルドするクラスを定義する。
・このクラスはScaffoldをリターンする。

とすればOKです。この新しいクラスを別ソースファイルにすることで、画面ごとにファイル分割が可能です。

上記を改修したサンプルはこちら

main.dart

```dart
import 'package:flutter/material.dart';
import './newview1.dart';  //★１ 外出ししたファイルのインポート

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MainPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('main画面のタイトルバー'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('ボタン'),
          //★２ 画面遷移のボタンイベント
          onPressed: () => Navigator.of(context).push(MaterialPageRoute(builder: (context) {
            return NewView1();
          })),
          //★２追加ここまで
        ),
      ),
    );
  }
}
```
★１、★２を追記



newview1.dart （新しい画面用のファイル/クラス）

```dart
import 'package:flutter/material.dart';

class NewView1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text('NewView1のタイトルバー'),
      ),
      body: Center(
        child: Text('NewView1'),
      ),
    );
  }
}
```

これで、初期表示画面の上に新しい画面が表示されます。
このような形で画面/機能ごとにソースファイルを分割していくことが可能です。
初心者によるプログラミング学習ログ 321日目

#100日チャレンジの321日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
321日目は、
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます<br>321日目 1.5h<br>・架空LP模写10日目1.5h（<a href="https://twitter.com/ririru_123?ref_src=twsrc%5Etfw">@ririru_123</a><br>）<br>・架空LP模写：お問い合わせ部分を作成<a href="https://twitter.com/hashtag/%E6%97%A9%E8%B5%B7%E3%81%8D%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8?src=hash&amp;ref_src=twsrc%5Etfw">#早起きチャレンジ</a><a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a><a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a></p>&mdash; ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) <a href="https://twitter.com/yudapinokio/status/1262834005533003778?ref_src=twsrc%5Etfw">May 19, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
SSHの秘密鍵を使い分ける

SSHの公開鍵・秘密鍵のペアが複数あり、ホストに送った公開鍵に合わせて使い分けたい。

##`-i`オプションで使用したい秘密鍵のファイルを指定する

```
$ ssh -i ~/.ssh/id_rsa_hostA -p ポート番号 ユーザ@ホスト
```

このコマンドでリモートサーバにアクセスしようとしたところ、次のエラーが発生。

```
$ ssh -i ~/.ssh/id_rsa_hostA -p ポート番号 ユーザ@ホスト
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@         WARNING: UNPROTECTED PRIVATE KEY FILE!          @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
Permissions 0777 for '~/.ssh/id_rsa_hostA' are too open.
It is required that your private key files are NOT accessible by others.
This private key will be ignored.
Load key "~/.ssh/id_rsa_hostA": bad permissions
```
調べたところ、パーミッションを600に変更すれば良いそうなので実行。

```
$　chmod 600 ~/.ssh/id_rsa_hostA
```
再度アクセスを試みると無事できた。
##.ssh/configを編集して秘密鍵を使い分け
毎回`-i`オプションを入力するのは面倒なので、.ssh/configにホストと秘密鍵の対応を書いておく。

```
Host hostA
	HostName 192.168.0.1
	User user_a
	IdentityFile ~/.ssh/id_rsa_hostA
	Port 1111

Host hostB
	HostName hostb.com
	User user_b
	IdentityFile ~/.ssh/id_rsa_hostB
```
`IdentityFile`にそれぞれのホストで使用したい秘密鍵を指定する。`HostName`はホスト名でもIPアドレスでも可能。`Port`でポート番号もしてできる。configが編集できたら、

```
$ ssh hostA
```

とするだけでホストごとに秘密鍵を切り替えて接続できる。
##自分用メモ
scpコマンドでローカルのファイルをホストに送信する際も同様に`-i`オプションが使用できる。

```
$ scp -P ポート番号 -i ~/.ssh/id_rsa_hostA -r ローカルパス ユーザ@ホスト:リモートパス
```

configを設定したものにオプションを付けたい時は、`ssh`とホストの間に書く。

```
$ ssh -p 8888:8888 hostA
```
Export-CsvでCSV出力する際に二重引用符を外す[PowerShell]

PowerShellでCSV出力する方法はいくつかありますが、一番簡単なのは`Export-Csv`を利用することかと思います。

```powershell
Get-Process | Select-Object Id, CPU | Export-Csv ".\process.csv" -Encoding UTF8
```

しかしこの`Export-Csv`、デフォルトでカラムにダブルクォーテーション（二重引用符）を付加してくれます。

```text:process.csv(抜粋)
"Id","CPU"
"9464","1.15625"
"18128","1.21875"
"5012",
"22976","1.21875"
"4940",
...
```

そして`Export-Csv`にはダブルクォーテーションを外す機能はなく、(私の知る限りでは)後から自力で外すしかありませんでした。調べてみるとStack Overflowでも皆さま自力でやっていたようですね。

[powershell \- ConvertTo\-Csv Output without quotes \- Stack Overflow](https://stackoverflow.com/questions/24074205/convertto-csv-output-without-quotes)

今回私にもそんな機会が訪れたので改めて調べてみた訳ですが、なんと！`Export-Csv`にダブルクォーテーションを有無を指定できるパラメータが PowerShell 7 にて追記されておりました。(どのバージョンで追加されたかは未確認です)

[Add UseQuotes parameter by iSazonov · Pull Request \#8951 · PowerShell/PowerShell](https://github.com/PowerShell/PowerShell/pull/8951)
[Add QuoteFields parameter to ConvertTo\-Csv and Export\-Csv by iSazonov · Pull Request \#9132 · PowerShell/PowerShell](https://github.com/PowerShell/PowerShell/pull/9132)

PowerShell 7.0.0 にて確認してみます。

```powershell
Get-Process | Select-Object Id, CPU | Export-Csv ".\process.csv" -Encoding UTF8 -UseQuotes Never
```

```text:process.csv(抜粋)
Id,CPU
9464,1.15625
18128,1.21875
5012,
22976,1.21875
4940,
...
```

以上のようにダブルクォーテーションなしで出力することができました。
自力で頑張る必要がなくなったので非常にありがたいですね。

参考URL
* [PowerShell で csv を扱う方法まとめ \- Qiita](https://qiita.com/nimzo6689/items/4a6fcabc032f570de6f0)
PowerQueryで入力したテーブル元にフィルタする

#Excelに手動で入力したテーブルを元にデータベースをフィルタする。
参考にしたサイト：http://officetanaka.net/excel/function/GetAndTransform/13.htm

##前提条件
データベースには親番号とそれを基にした子番号からなる列が存在する
　ex：XX01,XX02・・・,YY01,YY02,・・・

| ID|子番号|
|:------------|------------:|
| 1|XX01|
| 2|XX02|
| 3|YY01|
| 4|YY02|

その中からテーブルに入力した親番号だけをフィルタしたい
　ex:XX00だけをフィルタしたい。

|親番号|
|------------|
| XX00|

空のクエリに入力したテーブルを読み込ませる。
= Excel.CurrentWorkbook(){[Name="テーブル名"]}[Content]

キーワードの先頭2桁を抜き出す。
　ex:2桁="XX"
＞＞テーブルとデータベースの両方に実施
= Table.AddColumn(#"Changed Type", "First Characters", each Text.Start([テーブル名], 2), type text)

入力したテーブルを元にマージし、展開
(データベースのうちテーブルに存在しない行は削除される）

不要な列の削除

| ID|子番号|
|:------------|------------:|
| 1|XX01|
| 2|XX02|
Pythonひよっこが『言語処理100本ノック 2020』に挑戦【15-16】

Pythonひよっこのわたしが、『言語処理100本ノック 2020』の第2章の15・16に挑戦してみました。
どちらのコードも長くなってしまったので、今回はふたつだけにしました。
わたしが作った解答と一般の方が公開されている解答と比べながら、1問ずつ学んだことなどをまとめていきたいと思います。

こちらの続きになります。
[Pythonひよっこが『言語処理100本ノック 2020』に挑戦【10-14】](https://qiita.com/tulip_rabbit/items/aecb00486a4998bfc21d)

#第2章:UNIXコマンド
##15. 末尾のN行を出力

はじめはリストのスライスを使ってスマートに書いてみたのですが...

```python
#15.
def print_func(N):
    f=open("popular-names.txt",'r')
    text=f.readlines()
    print(text[-1*N :])
    f.close()

print_func(5)
```

出力すると...

```
['Benjamin\tM\t13381\t2018\n', 'Elijah\tM\t12886\t2018\n', 'Lucas\tM\t12585\t2018\n', 'Mason\tM\t12435\t2018\n', 'Logan\tM\t12352\t2018\n']
```
...これじゃだめですね(><)
リストのスライスで出力すると、リストの形でタブとかも変換されずに出力されてしまいました...
1行ずつ出力する分にはちゃんと出力できたので、

```python
#15-2.
def print_func2(N):
    f=open("popular-names.txt",'r')
    text=f.readlines()
    
    for x in range(N):
        print(text[-1*(x+1)].replace("\n",""))
    f.close()

print_func2(5)
```
for文を追加して、このように変更しました。すると...

```
Logan	M	12352	2018
Mason	M	12435	2018
Lucas	M	12585	2018
Elijah	M	12886	2018
Benjamin	M	13381	2018
```
思っていた通りに出力することができました！
今回、実装自体はうまくいきませんでしたが、『リストの末行を取得→引数を負の数にする』を自分で思い出せたのでよかったです。
出力で、無駄に1回改行を挟んでしまっていたので replace() を使いましたが、調べたらprint() に end=* を与えることで改行しないprintができることがわかりました。
機会があれば実践したいです。

::

```
tail -n 5 popular-names.txt 
```
→ターミナルにて、tailコマンドを使って確かめました。
tailコマンドは14.のheadコマンドと同じ使い方ですね。

##16.ファイルをN分割する
```python
#16.

##output_16_*.txt のかたちでファイルを作る

##ながれ
##1.分割数を知る@split_N関数
##2.ラベル作る→ファイルを作る@make_file関数
##3.ファイルに文をwriteする@file_write関数

##x個目のファイルを作る
def make_file(x):
    new_output_name="output_16_" + str(x) + ".txt"
    f_out=open(new_output_name,'w')
    return f_out
    
##ファイルに書き込む
def file_write(file_name,raw_num,text):
    file_name.write("".join(text))
    file_name.close()

def split_N(N):
    f=open("popular-names.txt",'r')
    text=f.readlines()
    
    #行数(1~N-1このファイル)
    raw_num=len(text)//N
    
    for x in range(N):
        #1~N-1個目
        if x!= N-1 :
            file_write(make_file(x+1),raw_num,text[x*raw_num:x*raw_num+raw_num])
        #N個目→のこり全部をいれる
        else:
            file_write(make_file(x+1),raw_num,text[x*raw_num:])
    f.close()

    
split_N(6)
```

あえて2780(popular-names.txtの行数)の因数でない、6分割にしてみました。
ちゃんと、output_16_1~5が463行、output_16_6が465行でファイルができていました。
(あまりの行はすべて最後のファイルに押し込んでいます)

こちらはちゃんとかけたのですが、splitコマンドを使った実行ができませんでした...
調べた感じだと、splitコマンドは行数やbyte数を指定して分割するように、こちらが分割する大きさを与えないと使えないようです....
仕方ないので行数(今回は6分割なので、ひとつ463行)を指定しましたが...

```
split -l 463 popular-names.txt output_16_split_
```
これでは、予想通り、ファイルは7こ作成されてしまいました(><)
良い方法があれば教えていただけると幸いです...

#おわりに
ファイルの入出力に慣れてきました。
細かいところは試行錯誤ですが、ちょっとレベルアップできている気がしています。
この調子でがんばります！
Vue.js+TypeScript+Nuxt.js環境で、『Property 'XXX' does not exist on type 'CombinedVueInstance~'』を解消するためのtips

# はじめに

Vue.js+TypeScript+Nuxt.js環境におけるScriptの書き方には下記の３種類があります。

- Vue.extend（OptionsAPI）
- defineComponent（CompositionAPI）
- vue-property-decorator（ClassAPI）

https://typescript.nuxtjs.org/ja/cookbook/components/#template

今回は、**Vue.extend（OptionsAPI）**を使用している場合の**『Property 'XXX' does not exist on type 'CombinedVueInstance~'』**というエラーを解消するためのtipsをまとめたものです。

しばしば遭遇するエラーだと思われますが、記事が少ないので取り急ぎまとめることにしました。
そのため、記事の内容については追加と修正を随時していきます。


# どんな時に発生するか

Vue.js+TypeScriptでcomputed、watch、methodsなどを書いていて、**TypeScriptの型推論が効かなくなった時**に発生します。

# 解消方法

1. 返り値と引数の型を定義する
2. TypeScript標準の型で定義できない場合はInterface、Typeで定義する
3. 強制的にエラーをなくす

基本的には1と2で解決しますが、状況によっては3を使う場面があるかもしれませんので、参考までに入れておきます。

#1.返り値と引数の型を定義する

```
methods: {
  someMethod (arg: number): number {
    return arg
  },
}
```
返り値については、TypeScriptの型推論が行われる仕様になっているのですが、今回のように型推論が効かずにエラーの原因になり得るということと、可読性の観点から定義しておくべきだと考えています。
引数はそもそも型推論が行われませんので定義しないと他のエラーにも引っ掛かります。


【 型定義の参考記事 】
https://qiita.com/is_ryo/items/6fc799ba4214db61d8ab

#2.TypeScriptの標準の型で定義できない場合はinterface、typeで定義する

number、string、voidなどの標準の型では定義できない複雑なものに関しては、下記のようにtypeやinterfaceを使用することによって定義することができます。

```
export type Hoge = {
         name: string
         price: number
         ,,,,省略
       }

,,,,省略

methods: {
  someMethod (arg: Hoge): Hoge {
    return arg
  },
}
```

【 InterfaceとTypeの違いの参考記事 】
https://qiita.com/tkrkt/items/d01b96363e58a7df830e


#3.強制的にエラーをなくす

本質的な解決ではありませんが、下記の2つのように書くと解消することができます。

```
computed: {
  ① return (this as any).hoge.method()

  ② // @ts-ignore
  return this.hoge.method()
}
```

①は(this as any)でany型にキャストすることができます。

②はts-ignoreによって次の行の型検査をスキップすることができます。


# 最後に

この他にも型定義関連のエラーは多々ありますので、随時投稿してまいります。
ナレッジを共有していって開発を効率化させましょう！
CanvasLMSに外部アプリ「Vedamo Virtual Classroom」を追加する

#環境
ubuntu18.04
[Github](https://github.com/instructure/canvas-lms)

#実施
[こちら](https://www.vedamo.com/integrations/access/lms_type/canvas)よりVEDAMOにログインし、`Consumer Key`と`Shared Secret`と`Config URL`をコピーする。
<img width="1437" alt="スクリーンショット 2020-05-20 1.28.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620216/1fc87c1f-d257-94ed-1a18-cf90f4d12798.png">



Canvasの外部アプリ追加画面を表示する。
<img width="1437" alt="スクリーンショット 2020-05-19 1.04.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620216/4ea54098-e095-9fc2-636e-8770c4c376f3.png">
「+ App」を押下し、「By URL」を選択する。
<img width="1437" alt="スクリーンショット 2020-05-20 1.32.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620216/6f77f61d-a73c-a3e0-345c-996f502dddf8.png">

「Name」に`Vedamo Virtual Classroom`、「Consumer Key」にコピーした`Consumer Key`、「Shared Secret」にコピーした`Shared Secret`、「Config URL」にコピーした`Config URL`を入力し「Submit」を押下する。


追加後に、設定の`Placements`を押下する。
<img width="1437" alt="スクリーンショット 2020-05-19 1.29.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620216/e1d1e86a-7090-c06e-2a73-20309e8d55dd.png">

画面に、以下が表示されていれば完了。
<img width="1437" alt="スクリーンショット 2020-05-19 1.30.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620216/9cd1f9bd-a417-5ed3-caae-4d5e006c164a.png">


※サイドバーに追加したい場合は、ナビゲーションタブから「Zoom」を有効にする。
【Python】Numpy の assert_array_equal が思ったように動かない原因は dtype にある

# 概要

マニュアルによると `numpy.testing.assert_array_equal` は NaN (`np.nan`) 同士を同じものとして比較してくれる、はずだが動かなかった。

**原因は、`dtype` が `object` のとき (mixed な ndarray のとき) は思ったように動かない、と判明**

# 環境

Linux 系 OS (詳細未確認) Conda 版 Python v3.7 および Numpy v1.8.1

```
$ python
Python 3.7.0 (default, Oct  9 2018, 10:31:47) 
[GCC 7.3.0] :: Anaconda, Inc. on linux
Type "help", "copyright", "credits" or "license" for more information.
```

## 動くケース

通常の比較では、NaN 同士の比較は `False` になるが、`assert_array_equal` は同じものとして比較してくれる。
ただし、`float` の配列なら。

```python
>>> import numpy as np
>>> from numpy.testing import assert_array_equal as aae

>>> a = np.array([1, np.nan])
>>> b = np.array([1, np.nan])

>>> a.dtype
dtype('float64')
>>> b.dtype
dtype('float64')

>>> a == b
array([ True, False])
>>> aae(a, b)
>>> 
```

## 動かないケース

`a` および `b` を作るときに `dtype` を指定しているのは、そうしないと文字列の配列になってしまうからである。
`object` 型として作られたこれらの配列に対して、`assert_array_equal` は今度は fail する。

```python
>>> a = np.array([1,'test',np.nan], dtype=object)
>>> b = np.array([1,'test',np.nan], dtype=object)

>>> a.dtype
dtype('O')
>>> b.dtype
dtype('O')

>>> a == b
array([ True,  True, False])
>>> aae(a,b)
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
  File ".../anaconda3/envs/opt/lib/python3.7/site-packages/numpy/testing/_private/utils.py", line 936, in assert_array_equal
    verbose=verbose, header='Arrays are not equal')
  File ".../anaconda3/envs/opt/lib/python3.7/site-packages/numpy/testing/_private/utils.py", line 846, in assert_array_compare
    raise AssertionError(msg)
AssertionError: 
Arrays are not equal

Mismatched elements: 1 / 3 (33.3%)
 x: array([1, 'test', nan], dtype=object)
 y: array([1, 'test', nan], dtype=object)
>>> 
```
Mac mini 2007  にOSを入れなおす

## 目標
- Mac mini 2007 にUbuntuを入れたい

## 状況整理
- Mac mini 2007 
    - [細かいスペック(たぶんこれ)](https://www.apple.com/jp/support/datasheet/desktop/macmini_607_608.html)
- Boot Camp で windows7 が入っている
- 通常起動時は windows7 で起動する
- いろいろやってみたが現状ではMacOSXには戻れなさそう

## 段取り
- まずは（Windowsを消し去り）MacOSXを入れる（クリーンインストール）
- MacOSXが入った状態でUbuntuをクリーンインストール

## 用意するもの
- Macに付属しているMacOSXのインストールディスク
- Ubuntuバージョン16.04 LTS 32bit版を焼いたDVD[^1]
- 有線のキーボードとマウス

## やったこと
1. ［失敗］MacOSXのインストールディスクを入れ`alt（option）キー`や`C`を押して起動
2. ↑からディスクを認識しなかったことが判明
3. PRAMリセットを実行
  - 再起動する
  - 起動音をしたあたりで`option`＋`command`＋`P`＋`R`を長押しする
  - 2回目の起動音がしたら↑のキーを離す
4. リベンジ：MacOSXのインストールディスクを入れ`alt（option）キー`や`C`を押して起動 [^2]
5. インストール手順に沿ってインストールする[^3]
    - 自分の場合はパーティションがWindowsに全振りしていたのでMacに全振りし直す 
6. MacMiniにrEFItをインストールする [^４]
    - [公式サイト](http://refit.sourceforge.net/)から`rEFIt 0.14 (6.5M Mac disk image)`を落としてきてインストールする
7. 用意したUbuntuのインストールディスクを入れ`alt（option）キー`を押して起動
8. インストール手順に沿ってインストールする
9. 喜ぶ

## 雑記
- ここのインストールするまでに約４日かかったため記事に起こした
- 特異な状況からのインストールだが誰かの参考になることを祈る
- 記憶を辿りにやったので多少違う部分もあるかもなので試した人はコメントくれると嬉しいです
- 終わりだよ～(●・▽・●)
[^1]: 最新版の18.xのLTSを試したがDVDを認識しなかったためこのバージョンにした（別の要因もあるかも）

[^2]: どっちかを押してやった記憶があるのですが、どっちだったか忘れた

[^3]: エンプレス構文みたい 
[^４]: 公式サイト曰く`rEFItは誰もメンテしてないからメンテしてるrEFIndを使おうね`と言われているがとりあえず動いたのでこれで行った