OmniAICreator/Qiita-1.07M huggingface dataset:
UITextDocumentProxyのselectedTextは3行以上かつ改行含めて65文字以上選択していると正しい選択部分を返さない

想定外でした。

# 2020/12/16追記
より一般的な問題だったので新たに記事にしました。

* [UITextDocumentProxyのselectedText, documentContextBeforeInput, documentContextAfterInputの仕様について - Qiita](https://qiita.com/En3_HCl/items/37f74b47580d0f56da5d)


# 2020/12/12追記
バグとしてFeedbackAssistantから報告を送っていたのですが、「キーボードがクラッシュしないようにするためのexpected Behaviorだよ(意訳)」という返答をいただきました。

実際、例えば数万、数十万文字に及ぶテキストが一度に選択された場合(全選択では時折起こることですが)、メモリ制限の厳しいKeyboard Extensionでこのような制限がかかることは納得のいくことです。

# 挙動の概要
動作確認は第1・2世代のiPhoneSE (iOS14.2)において行っています。

タイトルの通り、UITextDocumentProxyの`selectedText`は3行以上かつ65文字以上選択していると**正しい選択部分を返しません**。代わりに**最初と最後の2行を結合したものを返してきます**。そんなことある？

論より証拠なのでまずは実行結果の例です。
![IMG_3811.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638786/e3e909fc-bbec-9f5a-e2e1-e7016ef39305.jpeg)
![IMG_3812.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638786/f3e7fa7a-7dfc-b267-88af-7ec83e8cf2a0.jpeg)
![IMG_3813.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638786/5947c81f-5355-5273-bcae-3cbe6f003a59.jpeg)
![IMG_3814.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638786/b39de0eb-f591-1431-1905-50e0deb36c51.jpeg)

なぜか最後だけ文字数が32と判定されています。
それぞれの場面で`textDocumentProxy.selectedText?.debugDescription`を出力すると以下のようになります。

``` 
Optional("aaaaaaaaaaaaaaaa")
Optional("aaaaaaaaaaaaaaaa\nbbbbbbbbbbbbbbbb")
Optional("aaaaaaaaaaaaaaaa\nbbbbbbbbbbbbbbbb\ncccccccccccccccc")
Optional("aaaaaaaaaaaaaaaa\ndddddddddddddddd")
```

挙動をさらに理解するために次の二例を見ましょう。

![IMG_3815.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638786/968edabf-93de-5178-5a52-d98c55b46b41.jpeg)
![IMG_3816.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638786/ff6de0ad-d713-7137-a08a-d1768bc22212.jpeg)

非常にわかりにくくて申し訳ないのですが、文字数は改行を含まない設定で算出しているため、改行を含める場合一枚目は64文字、二枚目が65文字です。ここを境に挙動が変わっていることがわかります。

同様の事象は3行でも起こります。

![IMG_3817.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638786/453f1223-3ab3-a22c-e244-229804d3d18e.jpeg)
![IMG_3818.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638786/7f809f7f-0737-bb88-4a9f-8f2ae6a541f8.jpeg)
同様に改行を含めて64文字、65文字を境に挙動が変わります。

ところが、2行の場合はこの制限はありません。
![IMG_3819.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638786/767bb3df-8996-c16b-767e-0bf3dfb6edd7.jpeg)

ハラスメントではないでしょうか。

# 挙動の問題点
さて、この挙動は実用上どう問題になるでしょうか。
まず、こちら側では得られた二行分のテキストが内部を省略されてしまったものなのか、それともそうでないのか、という判断ができません。従って次のように判断する必要があります。

* 三行以上のテキストがselectedTextに含まれていた場合→問題ない
* 二行のテキストが含まれていた場合→内部の省略かどうか判断ができない
* 一行のテキストが含まれていた場合→問題ない

ちょうど二行のテキストが得られた場合のみ挙動を変えなければならないということです。
しかしユーザ側から見れば、複数行選択した場合に望む挙動を得られる場合と得られない場合が生じることになります。この奇天烈な動作は**不具合にしか見えません**し、「3行以上かつ改行含めて65文字以上選択しないで下さい」とはとても頼めません。

従って実際は次のようにせざるを得ません。

❌ 三行以上のテキストがselectedTextに含まれていた場合→諦める
❌ 二行のテキストが含まれていた場合→諦める
⭕️ 一行のテキストが含まれていた場合→用いる

提供できる機能がぐっと制限されますが、やむを得ないでしょう。
恣意的にやらなければ起こらなそうな動作なのに、ドキュメントに書いていないのが本当に意味不明でした。


※こちらの環境によるものの可能性があるので、ぜひ検証をお願いします。

# 参照
 - https://developer.apple.com/documentation/uikit/uitextdocumentproxy/2875749-selectedtext
ActiveRecord inverse_ofの使い所

Rubocopの違反(RuboCop::Cop::Rails::InverseOf)が発生したので、inverse_ofについて調べてみました。


普通の関連付けではinverse_ofを使用しなくても、自動的に追えるようになっているので特に設定は必要ありません。

```ruby:model.rb
class Parent < ApplicationRecord
  has_many :children
end

class Child < ApplicationRecord
  belongs_to :parent
end

```

しかし、関連付けでscopeをつける場合はinverse_ofを使用しなければいけません。以下のようにinverse_ofを設定してあげると逆関連づけを指定できます。

```ruby:model.rb
class Parent < ApplicationRecord
  has_many :children -> { order(:height) }, inverse_of: :parent
end

class Child < ApplicationRecord
  belongs_to :parent, inverse_of: :children
end

```

参考にした記事のurl

Railsガイド inverse_of
https://railsguides.jp/association_basics.html#belongs-to%E3%81%AE%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3-inverse-of
Rails初心者の僕がCloud9を使用せずRailsチュートリアルを学習する理由3選

第6版Railsチュートリアルを学び始めて1週間が経ったしょう([@syo_aqn](https://twitter.com/syo_aqn))です。
1章の開発環境構築で「Cloud9使って開発環境を整える作業」について疑問を覚えたのでこのような記事を書いてみました。

結論から先に述べると、Cloud9を使用しない理由は以下の3つです。
*Cloud9にリソースを割きたくない
*Cloud9は完全ではない
*ネットに繋がっていないと開発ができない

これらを具体的に解説しつつ、最後に僕がどのような開発環境でRailsチュートリアルに取り組んでいるかをちょこっとだけお話します

(この記事はRailsチュートリアルの学習が進むにつれて更新されていきます。投稿主は現在5章まで学習中です_φ(･_･))

####解説の前に

解説の前に1つだけ伝えておきたいことがあります。
僕はに何かを身に付けるとき「守・破・離」という考え方をとても大切にしています(守・破・離の解説は[こちら](https://ja.wikipedia.org/wiki/%E5%AE%88%E7%A0%B4%E9%9B%A2))。
**初心者なのにCloud９を使わないという行為**は「守・破・離」から乖離してますが、Cloud9を使わない理由の方がデカかったのでこの記事を書いてみようと思ったわけです。

では、解説していきます。

##CloudIDEにリソースを割きたくない

Railsチュートリアルに「様々なテキストエディタの使い方を知っておくことも重要」と書かれていますが、それはプログラミングにある程度慣れている経験者の話で、僕みたいな初心者にとっては別です。

この先も**趣味として**Railsのコードを書くのなら話は別ですが、僕は転職を前提にRailsチュートリアルに取り組んでいます。

実務でCloudIDEを使用している企業というのはあまり聞いたことはありませんし、そもそも趣味でコードを書いていた経験があるのでテキストエディタには慣れていたので「**わざわざ新しいことを覚えるくらいなら今はRailsチュートリアルにリソース割きたいな**」って感じです。


##CloudIDEは完全ではない

CloudIDEはブラウザ上で全てを完結できたり、ローカルのOSに依存しなかったりと便利な面があるのですが、実は結構めんどくさい輩です。

エンジニアのQ&Aサイトteratailで「Cloud9　Rails」と調べてみたら約950件の質問が投稿されていました。

Cloud9を利用することで予期せぬエラーや不具合を避けることができますが、Cloud9を利用することで発生してしまう不具合もあるので、それなら実務に近い環境で開発して、そこで発生したエラーを解決する方が今後の自分のためになると考えました。


##ネットに繋がっていないと開発ができない

お恥ずかしい話、僕の実家ではWi-Fiが契約されていないので、実家に帰宅した際にはPCでの開発が不可能になってしまいます。
諸事情により、高頻度で実家に帰らなければならない僕にとっては致命的でした。

ローカルで開発していれば、わからないことはPCでググりつつ開発自体はPCで行うことができるので、使用できる状況が限られてしまうCloud9は避けました。

#僕の現在の作業環境

###PCスペック
![スクリーンショット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/898618/be1f3d63-9f36-63a5-f09b-bea5590e0e53.png)
MacBook Proで一番安かったですが、今のところはスペック面で不満を感じたことはありません。


###テキストエディタ(VSCode)と導入しているプラグイン一覧

ここは、現在利用していないプラグインがたくさんインストールされていたので後日編集して公開します。

#終わりに

まとめると
-転職を考えているから実務で利用頻度の少ないCloud９は避ける
-エラー解決でググるなら実務の役にたちそうな事象でググりたい
-両親がネットに疎すぎるあまり、実家に帰宅するとCloud9を使えない

って感じです。

以上「趣味ではじめたプログラミングで転職を目指している人」の持論でした。
【TypeScript】ObjectのKeyに変数でアクセスする

# 1. はじめに
こんにちは！みなさま楽しいプログラミンライフをお過ごしでしょうか？
最近TypeScriptでのReact開発を勉強しています。

**ObjectのKeyに変数でアクセス**しようとしたときに、
**型付けのところでハマったポイントがあったので**、備忘録として残しておきたいと思います。

|  | Version |
|:-:|:-:|
|node.js|14.12.0|
|yarn|1.22.7|
|TypeScript|3.8.3|

# 2. やりたいこと
以下のような、
object2のcategoryのvalueと、object1のkeyが一致するvalueの配列に、object2をまるっとpushしたい。object3のようになるイメージ。

```javascript
const object1 = {
  category1: [],
  category2: []
}

const object2 = {
  id: 1,
  title: "nazeudon",
  category: "category1",
}

const object3 = {
  category1: [
    {
      id: 1,
      title: "nazeudon",
      category: "category1",
    },
  ],
  category2: []
}
```

# 3. JavaScriptだとこう書ける
とてもシンプル。まさに。Simple is the Best.

```javascript
const cat = object2.category;
object1[cat].push(object2);
```
# 4. ハマったポイント
同じことをTypeScriptでやろうとすると。。。

```typescript
const cat = object2.category;
object1[cat].push(object2);
```
>Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ category1: never[]; category2: never[]; }'.
  No index signature with a parameter of type 'string' was found on type '{ category1: never[]; category2: never[]; }'.(7053)

>要素は暗黙のうちに 'any' 型を持っています。なぜなら、型 'string' の式は型 '{ category1: never[]; category2: never[]; }' をインデックス化するために使用できないからです。
type '{ category1: never[]; category2: never[]; }' には、型 'string' のパラメータを持つインデックスシグネチャが見つかりませんでした。

そりゃ、TypeScriptだからね。型付けしろと言うわけですよね！
`interface`で型付けしてやって〜、でも。。。

```typescript
interface OBJECT1 {
  category1: OBJECT2[]
  category2: OBJECT2[]
}

interface OBJECT2 {
  id: number
  title: string
  category: string
}

const object1: OBJECT1 = {
  category1: [],
  category2: []
}

const object2: OBJECT2 = {
  id: 1,
  title: "nazeudon",
  category: "category1",
}

const cat = object2.category;
object1[cat].push(object2);
```
>Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'OBJECT1'.
  No index signature with a parameter of type 'string' was found on type 'OBJECT1'.(7053)

>要素は暗黙のうちに 'any' 型を持っていますが、それは 'string' 型の表現が型 'OBJECT1' のインデックスに使用できないからです。
  型 'OBJECT1' の型 'string' のパラメータを持つインデックス・シグネチャは見つかりませんでした。

おっと、これでもダメなのね。OBJECT1のインデックスにString型を指定できないと言われています。

ってことで、この解決に小一時間費やしたので、解決策を残しておきます。

# 5. TypeScriptでの書き方（例）
```typescript
const cat: keyof OBJECT1 = object2.category as keyof OBJECT1;
object1[cat].push(object2);
```

こんな感じで、`cat`変数と`object2.category`を共に、OBJECT1のkeyですよ、と明示してあげれば無事動きました！！

# 6. 最後に思ったこと
- 自分のわかっている知識の範囲だと、型付けはバグを防げて便利だなと言う印象。
- 自分のわからない範囲の知識が必要で、型に起因するエラーが出ると、型付けめんどくさ！ってなる。
- 結論、もっと勉強しましょう。今回も良い勉強になりました。
超基本的なプログラミング用語の英単語メモ

#日本語　☞　英語

変数　→　variable
定数　→　constant
配列　→　array
オブジェクト指向プログラミング　→　object‐oriented programming(OOP)
演算子　→　operator
識別子　→　identifier
代入　→　assignment
属性　→　attribute
キャッシュ　→　cache　（cashまたはcasheではない）

#今日の名言

Done is better than perfect.
（完璧であることよりも終わらせることの方が重要）


-マーク・ザッカーバーグ
MySQLのEXPLAINをかいつまんで見る

## 概要
MySQLのEXPLAINを読むと良いぞ。
というか読まなきゃダメな時がいつかくる。

各項目の説明についてはこの記事がよくまとまってる。（参考にさせていただきました）
[MySQL EXPLAINのそれぞれの項目についての覚書](https://qiita.com/kzbandai/items/ea02727f4bb539fcedb5)

## なんでEXPLAINが大事なの？

EXPLAINは「実行計画」を表示してくれる。どういう順序で、どういう方法でデータを取ってくるか表示してくれるので、クエリのパフォーマンスをチェックすることができる。
スロークエリが発生していたら必ずEXPLAINする癖をつけよう。発生していなくても、自信がなかったらEXPLAINしよう。

RDBMSによって出し方や出力が異なるので注意。
今回はMySQLの話。

## そもそも遅くなる要員（よく見かけるやつら）
EXPLAINを見る前に、SQLがなぜ遅くなるのか把握してきたい。

### インデックスを使っていない・設定していない

言わずもがな。フルテーブルスキャンって感じ。
O(n)の計算量。インデックスを使えばO(logn)。

### 相関サブクエリ

二重ループが走ることになる。外側のクエリでヒットしたデータ一件ずつに対してサブクエリが実行される。
O(nm)の計算量のイメージ。

### filesort

ソートにクイックソートを使う。O(nlogn)。
インデックスを使ったソートの方が圧倒的に早い（というかインデックスつきのカラムは実質ソートされた状態でデータが保存されている）。

### temporary

一時テーブルを使ってソートする。filesortはオンメモリで行うが、データ量が大きくなった場合は一時テーブルを作って、そこからselectする形をとる。
I/Oが重くなるだけでなくテーブルを一回作って書き込むわけだからそりゃ重い。

### インデックスが有効活用できない

実質O(n)の計算量。フルインデックススキャンとかその辺。結局O(n)になる
例えば10000件データが入っているテーブルを検索して9999件ヒットする絞り込み条件を選択した場合、インデックスが設定されているカラムで条件を指定していたとしてもほとんど意味がない。

## 見るべきところ
上で述べたことが、EXPLAINのどこに現れるのか

### select_type

`DEPENDENT SUBQUERY` に注意。相関サブクエリを意味する。
外側のクエリで十分絞り込めていれば遅くはならない。

### type

`index` 、 `ALL` に注意。
フルインデックススキャン、フルテーブルスキャンになり、インデックスが有効活用できていない。

### key

`null` に注意。
インデックスが使われていないことを意味する。
ここが `null` の場合は possible_keys を見ると良い。利用可能なインデックスを探す。
ただしインデックスが設定してあっても利用されないことがあるので注意。

### rows

数字が大きいと注意
テーブルから取得する予想件数が多いことになるので、単純に n が大きくなる。I/Oも辛くなる。
特に `DEPENDENT SUBQUERY` や `filesort` 、 `temporary` との合わせ技が発揮されると一瞬で死ぬ。

filteredの数字が小さいとまだ救われる（filteredは絞り込まれる割合を百分率で表す）

### extra

`Using filesort` 、 `Using temporary` に注意。

## まとめ
EXPLAINの結果をしっかり見て、ボトルネックを探そう。
pydubを使うためにdockerにffmpegをインストール

　djangoでwebアプリを作っている時に、m4a形式の音声をwav形式に変換するために、docker環境にpydubを入れようとしたのですが、pydubを使うためにはffmpegというossをインストールする必要があるとのことでした（pydubはffmpegのラッパーとのこと）。
　ところがffmpegの公式ページに行くとコマンドでのインストール方法が見つからなく、必要なコマンドをDockerfileに書けないなといった状況でした。幸い、githubで参考になる書き方を見つけたので、時間を溶かさずにすみましたが、忘れないように備忘録としてメモします。

```:Dockerfile
FROM python:3.8
ENV PYTHONBUFFERD 1
RUN mkdir /workspace
WORKDIR /workspace
COPY requirements.txt /workspace/
RUN apt-get update && \
    apt-get -y install ffmpeg libavcodec-extra && \
    pip install --upgrade pip && \
    pip install -r requirements.txt 
CMD ["python3","manage.py","runserver","0.0.0.0:8000"]
EXPOSE 8000
```

このようなDockerfileをbuildすることで、Docker環境で無事ffmpegをインストールし、pydubを使うことができました（requirement.txt内にpydubを書く）。

なお、参考にしたgithubのurlは下記です。
https://github.com/546669204/docker-pydub/blob/master/Dockerfile
30代からのプログラミング勉強　6日目（HTML/CSS入門編）

本日は仕事が休みだったので短時間のコースを一気見しちゃおう！なんて思っていたのですが、MacOSがアプデされておらずこの後できるかなぁといった所です。

と言う訳でまだ時間はありますがキリのいい所まで進んだので投稿していきます。

##学習内容
###CSS
```CSS:影
box-shadow: 0 0 10px rgba(0, 0, 0, .4)
```
影の設定。X軸、Y軸、影のサイズを指定。rgbaのaで透過度を指定出来る。

```CSS:太字
font-weight: bold;
```
boldで太字に指定。数字でも指定可能で、細くする事も可能。

```CSS
dispray: block;
```
これについては理解が浅いです…少し調べた限りでは縦に並べる要素を使う事でそのままでは改行されない所で改行させられる…と。

```CSS:span
<span></span>
```
divと同じ様にclassを使うなどして区別する上で使用する。ただしdivは改行する性質を持っているので一行内で区別する場合はこちらを使用する。

```html:紐付け
<label for=○○></label>
<input id=○○>
```
forとidを同値にする事で紐付けがなされる。上記の様に記述するとlabelが付与されているテキストをクリックする事でもテキストボックスの入力が可能になる。

##所感
丁度１セクションが終わった所なので、PCが触れない環境でも動画を見返す等して改めて復習し知識の整理を行って行かなければならないと感じる。
ブリッジとスイッチの違い

#ブリッジとは？
- L2(レイヤー２)で動作する**セグメントとセグメントを中継する機器。**

- リピーターの機能に加えて、MACアドレスを元に宛先を判断してデータを送信する。

- 10BASE-２や10BASE-5など同軸ケーブルを使用したイーサネットが普及していた頃によく使用されていたが、**現在ではほとんど使用されていない。**

#スイッチとは？
- L2(レイヤー２)で動作する機器。

- ハブの機能も備えているものがほとんどなので、**「スイッチングハブ」**という言い方もする。

- ブリッジと同様、MACアドレスを元に宛先を判断してデータを送信する。

#ブリッジとスイッチの違いは？

- ブリッジ：ソフトウェア主体で処理するので処理速度が遅い。
スイッチ：ハードウェア主体で処理するので処理速度が早い。

- ブリッジ：ポート数が少ない(2〜16ポート。2ポートのタイプが多い。)
スイッチ：ポート数が多い(何百ポート以上)

- ブリッジ：MDI(Medium Dependent Interface)ポートを使用する。
スイッチ：MDI-X(Medium Dependent Interface Crossover)ポートを使用する。

参考サイト：https://www.n-study.com/network/switch5.htm
Seeeduino XIAO/Wio Terminalをビジュアルプログラミングできるようにしたい

タイトルのとおり、「Seeeduino XIAO/Wio Terminalをビジュアルプログラミングできるようにしたい」という話です。

# 動機

某IoT系講師のひとこと。
「初めてプログラミングに挑戦する人もいて、Arduinoでも大変なんですよ。」
「Arduinoでも大変なんですよ。」
「Arduinoでも難しい。」
「難しい。」
．．．

**ビジュアルプログラミングでWio Terminalをなんとなく動くようにしたい！**と思ったわけです。

# だれかすでに着手している？

Wio Terminalのアプリケーションは、SeeedがArduino IDEとArduPyで開発できるよう環境を整えています。

[Wio Terminalのアーキテクチャ](https://www2.slideshare.net/TakashiMatsuoka2/wio-terminal/30)から抜粋：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109634/dc520e57-1a8e-27c1-cb2f-ae418299d13a.png)

もちろん、いつものSeeed製品と同様にオープンソースにしていて、回路図も見れちゃったりするので、好みのプラットフォームで開発できるようにしたり、好みの言語でプログラミングできるようにすることだって可能です。

[Wio Terminalのアーキテクチャ](https://www2.slideshare.net/TakashiMatsuoka2/wio-terminal/31)から抜粋：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109634/6ff78729-03aa-9cdd-7662-ba2b199ee8a6.png)

がっ！
わたしの観測範囲では、ビジュアルプログラミング環境を用意しようという動きは見当たらず、、、

SeeedのWio Terminalチームにも聞いてみたが、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109634/7a1ed8fa-0c70-4343-e81c-a0c4dfbd5788.png)
ビジュアルプログラミング環境を作ってはいないっぽい。

# MakeCode MakerにWio Terminalを追加してみた

自前サーバー（Azure）でMakeCode Makerを立ち上げて、Wio Terminalを追加してみました。

トップページにWio Terminalの画像がが！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109634/516318dd-fb3e-3945-399f-09cd5e677b59.png)

内蔵LEDのLチカもできたよ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109634/1e6466f9-d148-06e3-ce11-5f9e26e2d7b0.png)

# 今後

まだまだ動かない部分多数です。。。 あは。

* 内蔵LEDのLチカしかできない。（ボタン、十字キー、Groveコネクタ、、一切使えない。）
* シミュレータが無い。（左側に表示されるやつ。）
* 英語のみ。（日本語リソースが無い。）
* Seeeduino XIAO対応は不明。（対応したいと思ってる（思っているだけ））

えー、興味ある方はお声がけください。**一緒に作りましょう！！！**

# 付録

## MakeCodeいろいろ

みなさんご存じのMakeCode。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109634/3d260778-8343-5f0c-4dcc-d6958999fa3a.png)

実はこのMakeCodeはMakeCode for micro:bitといって、micro:bit専用。内部ではmicro:bit target for PXTと呼ばれています。
このPXTって何ぞや？ですが、Programming Experience Toolkitの略称で、、、このPXTというのがMakeCodeのコアとなる部分。

PXTを使って作られたビジュアルプログラミング環境はいっぱいあります。

* https://makecode.microbit.org
* https://arcade.makecode.com
* https://makecode.adafruit.com
* https://minecraft.makecode.com
* https://makecode.mindstorms.com
* https://makecode.chibitronics.com
* ほかにもあります。→[参照](https://makecode.com/labs)

色んなデバイスに対応できるようになっていてWio Terminalを使えそうなのは、

* [MakeCode Arcade](https://arcade.makecode.com/)
* [MakeCode Maker](https://maker.makecode.com/)

でした。

MakeCode Arcadeは、ゲームを作る向け。キャラクタを動かしたり、コントローラで操作するといったゲームに特化した便利なブロックがあります。もちろん液晶必須。
MakeCode Makerは、Makecode for micro:bitに近い。手続きを淡々と積み上げる感じ。

## MakeCode Makerカスタム環境

Azureの仮想マシン（Debian）を立てて、そこにpxt、pxt-common-packages、pxt-makerをgit clone。pxt-makerでpxt serveを実行して、Webサーバーを起動しています。（詳しくは[ここ](https://github.com/microsoft/pxt-maker/blob/master/README.md)にあります。）
手元のPCからは、VSCodeのRemote-SSHで仮想マシンに接続。Webサーバーへは、VSCodeのポートフォワード機能？を使ってアクセスしています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109634/b6707f60-ea19-4a4c-4a40-0e6a59175191.png)
RSSの新着を通知するTypetalkボットを作成する

# 目的
Advent Calendar ２日目の記事です。

弊社では、コミュニケーションツールのひとつとして、Typetalk というチャットツールを使ってます。
Advent Calendar が、見逃されたら寂しいので、より盛り上がるように、更新されたら Typetalk に通知するということを仕込んでみます。

# やりたいこと
Advent Calendar の RSSフィードが更新されたら Typetalk に通知するという簡単なものです。

# 使うもの
* Typetalk
* Power Automate (旧名称: Microsoft Flow) 

各ツールを連携するようなサービスってたくさんありますが、なぜこれを使うかって言うと、
会社で Office365のアカウントをもっていて、作ったフローも組織内で簡単に共有できるので私は気に入って使ってます。

# やってみる
## 1. Typetalk に Botを作成する
![Typetalk.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39627/53bdac66-4ae8-e6c4-3e83-53f323be1625.png)

## 2. Power Automate を設定する
今回はテンプレートを使わずに空白から作成します。
![STEP1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39627/9cd35bbe-e3e6-0887-a09d-7659fb985d5b.png)

トリガーは RSSフィードの更新になりますので、RSSを選択します。
![STEP2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39627/b6a7ceb1-6a7c-af48-1bae-9251933c46e0.png)

RSSフィードのURLを入力します。
![STEP3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39627/43f48fb4-d0ee-29b5-31ff-f2c2eb7c60ac.png)

アクションは、Typetalkのメッセージ投稿のURLを呼び出します。
![STEP4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39627/b03d33b5-5e33-020f-416a-452b9a8ca4da.png)

これで仕込みは完了です！
あとは Advent Calendar の記事が公開されたら Typetalk に通知が届く予定です。

# 終わりに
きっとこれで、弊社の Advent Calendar は、社員からの閲覧数は確保できるはず。

# 補足
Typetalk は Nulab 社が提供しているビジネスチャットツールです。
https://www.typetalk.com/

Power Automate (旧名称: Microsoft Flow) は Microsoft社が提供するサービスです。
https://japan.flow.microsoft.com/
micro:bit v2 タッチセンサーの動作メモ

2020年11月に発売されたmicro:bit v2。
様々な機能が追加されました。
この記事では「タッチセンサー」と「関連ブロックの挙動」についてまとめました。
#センサーについて
タッチセンサーの搭載場所はロゴ部分(豚の鼻？)の金属全て。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71746/8aeb950d-77b2-9598-9472-a86275c9d5da.png)

金属部分に少しでもタッチするとセンサーが検知します。
静電容量方式タッチセンサーのため人の指などで触らないと反応しません。

#ブロックの種類
MakeCodeでは入力の中に下記4種類のブロックが用意されています。
(表記は2020/11/30時点)

・押された
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71746/06f36a97-7c44-54ed-58e0-a3d6273d1a9d.png)

・touched
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71746/7466665d-53dc-c134-9487-0a09189aad28.png)

・long pressed
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71746/9e3285c1-db1f-a376-791e-7525ea09b099.png)

・離した
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71746/6d645919-7cf5-a610-34f6-81216cd2b9a9.png)

#ブロックの動作確認結果
ブロックの表記だけでは似て非なる感じを受けましたので動作確認してみました。
それぞれ単独の動作、もしくは組み合わせで動作しています。

まずはわかりやすいのが下記の2つ
####touched:とにかく触ったらその瞬間判定
####離した：とにかく触った状態から離したら判定
この2つは単純でした。

残りの2つは上記と組み合わせで優先順位もありました。

####押された：「離した」を判定した後に判定される。touchしている時間が短かった場合に判定(1秒未満)

####long pressed：「離した」を判定した後に判定される。touchしている時間が長かった場合に判定(1秒以上)

#動作確認
こちらのサイトで動作が確認できます。
ロゴ部分(金色の金属部分)をクリックしてみてください。
https://makecode.microbit.org/_isy67P1PCi20

####並べたブロック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71746/2c0d886c-ef98-4d01-b898-85c671641d70.png)
VS Codeの設定

#はじめに
個人的に行ったVSCodeの設定を記録としてここにあげます。
筆者はもともとはVim使いです。隣の芝(VSCode)は本当に青いのか？　ということで試用してみようというものになります。


#Vim

![Screen Shot 2020-11-30 at 22.23.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227359/eed8d804-e0f9-502f-03e3-2697a93e76eb.png)

Vimの操作を移植しないことには始まらないということで、Extentionタブで、``vscodevim``をインストール。
ただ、これだけでは、カーソルの連続移動（リピート）ができず、一文字一文字、一行一行を移動する度に``j``や``n``を押さなければならず、非常に不便。Terminalを開き、

```bash
$ defaults write com.microsoft.VSCode ApplePressAndHoldEnabled -bool false         # For VS Code
$ defaults write com.microsoft.VSCodeInsiders ApplePressAndHoldEnabled -bool false # For VS Code Insider
$ defaults write com.visualstudio.code.oss ApplePressAndHoldEnabled -bool false    # For VS Codium
```

と打ち込み、VSCodeを再起動するとリピート機能が使えるようになります。


#Markdown

![Screen Shot 2020-11-30 at 22.02.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227359/ca832d64-e9bd-f4cb-4e9a-e0953162a28a.png)


Extentionタブを開き、``Markdown``(デフォルトで入っている）、``Markdown Math``、``Markdown Preview Enhanced``をインストールするのみ。
とくに最後の``Markdown Preview Enhanced``を入れていないと、プレビューで数式が表示されないので注意が必要。

ちなみに、プレビューを
- 左ウィンドウに表示させる際は ``Command + K``→``V``
- 別タブ（ウィンドウ）に表示させる際は``Command + Shift + V``
で表示する。

----
俺のNode.jsでTop-Level awaitが動かない！！なぜだ！？

# 事象

俺の環境でTop-Level awaitが動かない！！なぜだ！？

# 原因
`Top-Level await`は`ES Module`の機能で`Common JS`は未対応なので動かない。

> The await keyword may be used in the top level (outside of async functions) within modules as per the ECMAScript Top-Level await proposal.

訳：awaitキーワードは、ECMAScriptトップレベルawaitプロポーザルに従って、モジュール内のトップレベル（非同期関数の外部）で使用できます。

[出典:Node.js v15.3.0 Documentation
](https://nodejs.org/api/esm.html#esm_top_level_await)

# Node.jsのバージョン

v14.15.1

# サンプルコード

```js
function wait(time) {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve();
        }, time);
    })
}

async function waitSync(time){
    console.log('start timer', time);
    await wait(time);
    console.log('time out',time);
}

await waitSync(2000);
console.log('here');
```

# エラーメッセージ

```
/Users/username/async/index.js:15
await waitSync(2000);
^^^^^

SyntaxError: await is only valid in async function
    at wrapSafe (internal/modules/cjs/loader.js:979:16)
    at Module._compile (internal/modules/cjs/loader.js:1027:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
```

# 対応策
パッと思いつく対応は以下の2択

1. ファイルの拡張子を`.mjs`に変更する
2. `package.json`に`type`属性を追加して、値を`module`にする

# 現状

[Node.js v15.3.0 Documentation
](https://nodejs.org/api/esm.html#esm_top_level_await)

そもそも`Top-level await`のステータスは`Stability: 1 - Experimental`なので現状ガリガリ使うものでもない。
あくまで`v14.8 `で**`Experimental`のフラグが不要になっただけ**。

# エラーメッセージについて

[module: Improves Top-Level await error in cjs
](https://github.com/nodejs/node/pull/35196)

上記PRにて改善案が実装済み**`SyntaxError: Top-Level await is only supported in ESM.
`**とちゃんと教えてくれるようになるよ！

やったね！
「本メールは弊社社員と名刺交換させていただいた方にお送りしています」の配信停止をするためにGASでメールを抽出した

好きなモノは酒と女とラーメン、LIFULLのてぃば(@rechiba3)です。

皆さんは、「本メールは弊社社員と名刺交換させていただいた方にお送りしています」というメールを受け取ったことはありますか。

私はめちゃくちゃ受け取ったことがあります・・・！
そして、今すぐ全部「配信停止」押したい！！全部！

![スクリーンショット 2020-11-30 21.32.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86461/0d3e7d44-e1d6-1cf4-0727-6f376f4aa75b.png)
「弊社社員と名刺交換」ってワードだけで、Gmailも「/ 多数」って曖昧な回答をし始めた。

配信停止自動化は私の技術力では無理なので、とりあえず、

# Gmailの特定ワード検索でスプレッドシートに一覧を書き出して配信停止リストを作る



## 1. 取得する結果の見出しをスプレッドシートに入力する
スプレッドシートを作成して、
A列から順番に
タイムスタンプ
差出人アドレス
件名
本文サマリ
メール確認
と見出しを入れておきます。

今回は、見出しの文字列を参照するようなコードは書かないので、任意の見出しで大丈夫です。
（しかし、取得するAPIの項目は上記を意味する内容になるので、沿うように）

## 2. スクリプトエディタでメールを取得したものをスプレッドシートに反映する
ツール > スクリプトエディを開きます。
まずはGmail内の検索をします。
![スクリーンショット 2020-11-30 21.41.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86461/b2c1d4ce-c73d-1d87-55cd-2c8dfd90a277.png)

今回はヒットワードにできるだけ通常の名刺交換挨拶が含まれないように、「弊社社員と名刺交換」を採用しました。
この指定だけすれば、あとは以下のコードで稼働します。

```
function searchContactMail() {
 
  const query = '"弊社社員と名刺交換"';
  const start = 0;
  const max = 100;
 
  const threads = GmailApp.search(query, start, max);
  const messagesForThreads = GmailApp.getMessagesForThreads(threads);
 
  const values = [];
  const sheet = SpreadsheetApp.getActiveSheet();
  const lastRow = sheet.getLastRow();
  const ids = sheet.getRange(2, 6, lastRow).getValues().flat();
 
  for(const messages of messagesForThreads){
    const message = messages[0];
    const id = message.getId();
   
    if(!ids.includes(id)){
      const record = [
        message.getDate(),
        message.getReplyTo(),
        message.getSubject(),
        message.getPlainBody().slice(0,100),
        message.getThread().getPermalink(),
      ];
      values.push(record);
    }
  }
   
  if(values.length > 0){
    sheet.getRange(lastRow + 1, 1, values.length, values[0].length).setValues(values);
  }
 
}
```

## 3. トリガーの設定
「現在のプロジェクトのトリガー」をクリックして、Apps Scriptのプロジェクトのトリガー画面へ遷移します。
画面右下、「トリガーを追加」を押下、どのタイミングでスプレッドシートを更新するかを指示します。

今回は、メールの検索を開始するタイミングなので、日付単位で回します。
即時配信停止に対応する必要もなく、ストック型のリストを生成するイメージであるため、1日1回確認してればよいでしょう。
![スクリーンショット 2020-11-30 21.58.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86461/c153bc31-6f07-8bbe-6771-0825c19d6830.png)

「保存」を押して完了です。

##4. スクリプトを実行してリストを作る
スクリプトエディタに戻り、「実行」を押下してスプレッドシートへ戻ります。

う、うわぁあああああ〜〜〜〜〜〜〜
![スクリーンショット 2020-11-30 22.01.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86461/e326e011-f81a-6caf-22b6-019237028fa8.png)
![スクリーンショット 2020-11-30 22.01.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86461/ce1c753b-f87f-fd0e-2537-524b15e81af1.png)

一度に回しただけで52件出てきた・・・つらい・・・
でも配信元は4社ぐらいだったので安心しました😠😠😠

このURLからメールに遷移して、普段は開かないGmailの「プロモーションフォルダ」にある該当メールから配信停止手続きをします。

## おまけ

もし更に精度を上げたい人がいたら、

- スプレッドシートが更新されたらslackに通知
- 配信停止URLを直接引用

あたりを追加すると汎用性高くなりそうです。
私は暇なタイミングにポチポチ配信停止するために、このストックリストを半年に四半期に一度ぐらい覗こうと思います。

# 参考
[Gmailから始める自動化生活](https://qiita.com/t-chi/items/928f9666d79ce24b5f50)
バッカソンした話（ちゅらデータの日常）

こんにちは！
[ちゅらデータ](https://churadata.okinawa/)の CTO 菱沼です！

今日は[ちゅらデータアドベントカレンダー](https://qiita.com/advent-calendar/2020/churadata)の１日目ということで、普段ちゅらデータがどんなことをしているのかを少し書いてみようと思います。

# ちゅらデータでの日常風景の紹介

ちゅらデータではクレイジーな仲間を採用してしまうという文化があり、結果としてクレイジーな仲間たちが社内に存在しています。

たとえばその筆頭である[ジェイクさん](https://qiita.com/birosjh)と雑談しているといきなり…

```
ジェイクさん「あー、馬鹿なことしたいわー」
菱沼「お、やりますか？」
```

みたいなノリでバッカソンの開催が決まることがあります。

[真嘉比社長](https://qiita.com/amacbee)にとりあえず審査員をお願いしたところ快諾いただけました。

```
菱沼「社長、審査委員おねがいします！」
社長「いいけど、発表で恥ずかしがったら減点な！」
```

そうしてAIお馬鹿ハッカソン、通称バッカソンの開催が決定しました。
![IMG_20201106_191912.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75613/1979c6d3-08e4-7906-46bd-8ede1bf2dbdd.jpeg)

# そして当日

しかし当日は朝からトラブル発生。

```
社長「あー、今日は体調悪いから休みます」
菱沼「じゃ、審査委員は隊長(※)で」
```

※ => [aipa隊長](https://qiita.com/aipacommander)

でもこんなトラブルにも慣れたもんです。

# そして発表へ

結局４人(私とジェイク含む)のエントリーがあり、発表しました。
各人の詳細は各人に任せるとして、私のところだけ紹介しちゃいますね。

## 一番手：私

私が作ったのは「GPT2でなろう小説を生成するWebサービス」
その名も、ぽえぬまさん
↓タイトルとかちゃんと作ってた。
![20201120_バッカソン_ぽえぬま_-_Google_スライド-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75613/d463ccef-9bd6-b1e5-d7ce-8f23718ba9f2.png)

### デモの風景
![image__13_-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75613/41439477-4daf-19c6-cc8a-c5e92e7c98bd.png)


### ぽえぬまさんに対する審査委員の評価

```
aipa隊長「真面目すぎるわ。バッカソンなめてんの？」
菱沼「ひぇ！！厳しい!!」
```

### おまけ

ソースコード：https://github.com/foursue/poenuma

# その後

その後は、
二番手にVPoEの[hotoさん](https://qiita.com/hoto17296)が変顔しながら子供に蹴られ、
三番手の[intelさん](https://qiita.com/Intel0tw5727)がSlackの発言と日報のデータを使って同僚の休憩要因をまじめに分析したり、
最後に言い出しっぺの[ジェイクさん](https://qiita.com/birosjh)が学習したデータでその人に合った語尾を生成して観戦者の全員が自分専用の語尾を獲得、少し普段より個性的になりました。

# 結果

最終的に優勝したのは、intelさんが分析した対象の[同僚の方](https://qiita.com/shinyashikis@github)でした！！！
おめでとうございます！！
後日真嘉比社長からビール１ケースが送られるらしいです。


# いかがでしたか？

バッカソンいいですよね。

普段、真面目に仕事してるふりするのも疲れるんですよ！
好きなものが作りたい！

そして、こんな日常が繰り広げられるのがちゅらデータです。

ちゅらデータでは日々クレイジーな仲間を募集しています。
一緒に働くことにご興味のある方はぜひご連絡ください〜。
Android Studioおすすめプラグイン

# はじめに
今回はAndroid Studioのおすすめプラグインを紹介します。

# Save Actions
[Save Actions](https://plugins.jetbrains.com/plugin/7642-save-actions)

こちらは自動保存時に自動でコード整形やimportの最適化をしてくれます。
Android Studioのコード整形はcommand+option+Lなのですが、忘れることが多いです。
また使用しないimportを消すことはできません。

そんな時にSave Actionsはまじで役立ちます。
特にチーム開発の時にこの人のこのインデント気に入らない、import消し忘れが治らないなどなどの悩みがなくなります。

以下の記事を参考にすると、チーム開発でSave Actionsを使ってないメンバーがいなくなるので是非読んでみてください！
[「コーディングスタイルを統一する」ためのIntelliJ IDEAの設定ファイルのGit共有管理手順 | takemikami's note](https://takemikami.com/2018/08/29/IntelliJ-IDEAGit-CodeStyle.html)

# Nyan Progress Bar
今回はこれが紹介したかっただけです。

[Nyan Progress Bar](https://plugins.jetbrains.com/plugin/8575-nyan-progress-bar)

ビルド時やプロジェクトの読み込み時に猫が走ってくれます。
とにかく可愛いニャンニャンです。

![スクリーンショット 2020-11-30 22.07.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411927/3086e7c6-1b77-da9b-65cc-7c507adf2ff8.png)
unity初心者が初めてゲームを作って思ったこと

はじめまして、N高等学校一年のdaichiと申します。
プログラミング初心者の私が、学習の記録を残そうと思って書いてます。
良ければアドバイスなど頂けると幸いです。
#今月やったこと
**unity**にほぼ初めて触りました！（前に触ったことはあったけどしっかりやってなかったです）
N予備校のunity講座を進め初めて学習しました！


![スクリーンショット 2020-11-30 21.42.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/861438/146c49bf-81d4-c256-3095-e5d467c010bb.png)
このような3DアクションゲームをN予備校に従いながら作りました。
こんな簡単なのでさえ、作るの凄い難しかった…
来月から、ほんとに自分の作りたいゲーム作れるんだろうか…
でもグーグル先生に頼って、先人の知恵を借りながら頑張りたいと思います！


#改善点
C#を勉強出来ていないので何やってるのかわからなかった…
paizaなどでC#を勉強するなどする。
勉強すれば、基礎として何を書いているかわかるはず…

#あとがき
めちゃくちゃ初心者なので、こういう学習方法あるよとか、アドバイスいただけるとありがたいです…
CREとは。-GCPはいかにして顧客の不安を解消するか-

この記事は、[個人ブログ記事](http://tagfa.wpx.jp/archives/772)をQiita用に修正したものです。

Twitterを眺めていたら、たまたまANDPADさんの以下記事を見つけ、お恥ずかしながらそこで初めてCREについて知りました。

https://tech.andpad.co.jp/entry/2020/11/30/120000

やはりCREもGoogleが提唱した役割のようで、以下の記事に詳細があります。せっかくなので要約してみました。
https://cloudplatform-jp.googleblog.com/2016/10/google-cre.html

# Google記事の要約

25年の間に、コンピュータやそれを取り巻くテクノロジーは大きく変化した。一方、カスタマーサポートだけは、依然としてコールセンターでヘッドセットをつけた人たちが担当しており、変化していない。それでは不十分なので、Customer Reliability Engineering（CRE : 顧客信頼性エンジニアリング）という新しい専門職を発表した。

パブリッククラウドを利用する組織は、自分の環境を自分たちで管理できないことに対して不安を覚えている。これは、進化の中では当然で価値のある感情である。しかし、クラウドベンダーは、この不安を無視して導入を推し進めている。

以前のサポートチームの役割は分かりやすく、問題を解決するということだった。しかし、今では結局のところFAQやヘルプセンターにといったものになっている。現代において、このサポート体勢は完全に間違っている。**今、この時代において、真に適切なサポート チームのミッションはたった 1 つ。それは、お客様の不安をゼロにすること。**

お客様は、実際あまりクラウド プロバイダーの信頼性を気にしてはいない。それよりも、製品化されているアプリケーションの信頼性を気にしている。アプリケーションの信頼性は、次の 2 つによって成り立っている。

1. クラウド プロバイダーの信頼性
2. アプリケーションのデザインやコード、運用などに内在する信頼性

1はすでに業界内で認識されており、クラウドベンダーはSite Reliability Engineering（SRE : サイト信頼性エンジニアリング）という専門職を設けている。一方、2は、気にかけているのはお客様だけで、これに対する業界内での標準的な回答は次のとおり。

「ここにホワイト ペーパーや成功事例があり、コンサルタントもいます。あまり変なことをしなければ、アプリケーションもまあ大丈夫ですよ」

**お客様が不安に思うのも、ごもっともです。というか、不安に感じるべきですよ！**

そういうわけで、[Dropboxはオンプレに戻りましたとさ](https://www.wired.com/2016/03/epic-story-dropboxs-exodus-amazon-cloud-empire/)。

CREのミッションは、これらの不安をなくすこと。

CRE チームは、お客様の基幹アプリケーションにおける主要な要素を、コードからデザイン、実装、運用手順に至るまで綿密に調査する。そこで見つけたものを取り出し、アプリケーション（および関連チーム）に対して厳しく PRR を実施する。

このプロセスの最終段階で、Google はお客様に対し「ここに御社システムの信頼性に関するギャップがあります。これが御社のエラー予算です。信頼性を向上したい場合は、こういった変更が必要です」と伝える。

また、呼び出しをする場合やチケット発行に関する基準にお互いが合意できるよう、共通のシステム モニタリング体制を構築する。Google の PRR に合格するには、お客様の側で多くの作業が必要となるが、その努力の結果、次のような成果に結びつく。

1. 呼び出しに関する共通認識が生まれる。お客様がユーザーに呼び出されないようになれば、Google も呼び出されることはない。
2. 最重要事項に関するチケットが自動で生成され、エスカレーションされることになる。
3. CRE チームがお客様の悲惨な現場の対処に参戦する（お客様が必死でがんばったとしても、悲惨な出来事は避けられないため）。
4. Google のデザイン調査や製品調査を経たシステムが手に入る。

企業がお客様に対して「一緒にやっていきましょう」と言うことが流行していますが、企業側がその役割をきちんと果たしているケースは多くない、というのが実情。
真に「一緒にやる」人たちは、双方に対する義務感があり、お互いの責任を背負っている。共通のゴールに向けて共同で作業し、相互にやり取りする金銭よりも重要な運命を共にする。
【備忘録】Swift 実践入門について　第5章

Swift 実践入門のまとめ。
分からない部分の抜粋も記載し、解決できたら随時更新していきます。
なお、ここに記載している以外でも「わけわからん…」となっている部分も多々ありますが、
今は必要ない、と言い聞かせて飛ばしています。

第5章
制御構文　上から下へ流れていくプログラムの動きを変更したりすること。
理解度：60％くらいか


5.2
条件分岐
・if-let文
let a = Optional(1)
if let b = a {
   print(“値は＼(a)です”)
} else {
print(“値が存在しません”)
}
値は1です

・guard文
func printIfPositive() {
let a = 1
guard a > 0 else {
print(“aは0未満です”) //falseならこの部分が実行される
return //スコープ外に退出
}
print(a)
}
printIfPositive() //結果は1

・switch文…Bool型ではなく、caseを設定していくことでもっと細かい条件分岐が可能。defaultをつけることで条件に網羅性が出るが、細かく設定した方が追加で条件を設定する場合に強い。
　- case パターン where 条件式（a > 10 など）…whereを使ってさらに条件を絞り込むことができる。
　- break…swich文のケース実行を中断する。また「ラベル名 : switch文」で、さらに「break ラベル名」で対象のswitch文の実行を中断することができる。
　- fallthrough…次のケースを実行するようにする。


5-3 繰り返し
・for 要素名 in コレクション名…コレクション名としているが、本書では「シーケンス」になっている。

・while 条件式…条件式（a > 10 など）が成り立つ限り繰り返し実行される。

・repeat 条件式…条件式に当てはまらなくても、最初の値は実行される。
var a = 1
repeat a < 1 {
print(a)
a += 1
} //結果は1


5-4 遅延実行…特定の部分を記述されている場所よりも後に実行させること。defer文など。

5-5 パターンマッチ…値などで代入させるのではなく、パターンで代入させる
・バリューバインディング…変数や定数をcaseの中に入れ、それらを代入させ条件チェックすること。

その後も様々なパターンマッチの仕様が登場しているが、細かく時間がかかりそうなのでカット。
現段階ではパターンで値などをマッチさせるため、printなどで表示させるのも「1以上10以下」などのパターンであることが多いと感じた。
iOS14でSwiftUIのモーダル表示がズレる問題の対応

# 背景
シンプルな音楽プレイヤーアプリをフルSwiftUIで作ったものがあるのですが、Xcode12のせいなのか、iOS14のせいなのかわからなのですが、モーダル表示がずれてしまいました。
<a href="https://apps.apple.com/us/app/marshmallowplayer/id1511019522?itsct=apps_box&amp;itscg=30200" style="display: inline-block; overflow: hidden; border-top-left-radius: 13px; border-top-right-radius: 13px; border-bottom-right-radius: 13px; border-bottom-left-radius: 13px; width: 250px; height: 83px;"><img src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/en-US?size=250x83&amp;releaseDate=1589846400&h=ea5dc3d71808c8863ce25fdcd30a8917" alt="Download on the App Store" style="border-top-left-radius: 13px; border-top-right-radius: 13px; border-bottom-right-radius: 13px; border-bottom-left-radius: 13px; width: 250px; height: 83px;"></a>



iOS13 Xcode 11 |iOS 14 Xcode 12
---|---
![IMG_7874.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171702/c199ac9f-a799-ec7b-e073-7dd54f081ae1.png)|![IMG_7873.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171702/987d9ff0-9a48-06f6-3299-58c48db00f0a.png)

この画面の構成は以下の通りとなっています。

```swift
var body: some View {
    GeometryReader { geometry in
        ZStack {
            VStack (spacing: 0) {
                   ....... 各パーツ .......
            }
        }
    }
}
```

## 解決策

対象のViewに`frame(width: CGFlaot)`を設定することで解消されました。

```swift
var body: some View {
    GeometryReader { geometry in
        ZStack {
            VStack (spacing: 0) {
                   ....... 各パーツ .......
            }
            // 以下を追加
            .frame(width: geometry.size.width)
        }
    }
}
```

この現象は今の所、モーダルでしか見つかっていないのでSwiftUI 2.0でそこらへんの修正があったのかもしれませんね。


##　宣伝
自分のアプリダウンロードしていただけたら幸いです。
https://apple.co/37okj2G
<img src="https://tools-qr-production.s3.amazonaws.com/output/apple-toolbox/d276dac256fe013d9ce7fe6d4a1bb5ac/d0ddec05-fbd9-4b94-a05a-2fb87a72117b.png">
image_tag

railsチュートリアルを学習している時

問　image_tagで画像を表示してください



まずimege_tagってなんぞやということで検索。

image_tagとはHTMLの<img>タグを生成するためのメゾット



らしい。

なるほど、、img以外にも画像を挿入する方法があるのか



書き方



image_tag "rails_icon.png", alt: "Rails icon", id: "pic1", class: "image"



app/assets/images配下に画像がある場合これで良いらしいが、

public配下の画像を表示する場合には、画像ファイルのパスを次のように / から記載する必要があるらしい。



image_tag "/rails_icon.png", alt: "Rails icon", id: "pic1", class: "image"



なるほど。。。
プログラマーのためのスプレッドシート関数入門

学校法人角川ドワンゴ学園職員の @ohataken です。N高等学校・N中等部の生徒たちにプログラミングの楽しさを伝える仕事をしています。以前はいわゆるRailsエンジニアというやつでしたが、最近はアプリケーションを作ることは少なく、せっかく学校法人に所属してプログラミング教育やってるということで学問的な領域をやろうと思い、競技プログラミングやったり数学やったりしています。

# プログラマーは別に表計算ソフトに詳しいわけじゃない

さて、弊学の教職員もふつうの会社と同じくGoogle スプレッドシートで情報を記録したり共有したりしています。私はというとスプレッドシートの知識は高校生のころ情報の授業程度の知識しかなかったので都度都度ググって解決していたのですが、これは見通しが悪いので、よくあるプログラミング言語の解説書の流れでエッセンシャルを列挙しようと思いました。

### 文字列 結合演算子 &

```
= "Hello"&" "&"world!" 
```

文字列結合が `+` ではないものに割り当てられるのは、一周回ってイマドキな感じがする。

### 文字列 多変長引数関数で結合する CONCATENATE

```
= CONCATENATE("a", "b", "c", "d", "e", "f", "g")
```

### 文字列長を取得する LEN

```
= LEN("0123456789")
```

### 文字列のスライス MID

```
= MID("0123456789", 1, 3)
```

LEFT, RIGHTという関数もあるらしい。

### 数値型 和

```
 = 0 + 1
```

### 数値型 差

```
= 2 - 1
```

### 数値型 積

``` 
= 2 * 3
```

### 数値型 商

`/` を使うと float っぽくなってしまう。ここJavaScriptっぽい。

```
= QUOTIENT(10, 3)
```

### 数値型 剰余

上に同じく `/` を使ってしまうと float っぽくなってしまう。

```
= MOD(10, 3)
```

### 論理型 NOT

```
= NOT(FALSE)
```

ふつう

### 論理型 AND


```
 = AND(TRUE, FALSE)
```
 

### 論理型 OR

```
 = OR(TRUE, FALSE)
```
 
### IF 関数 

```
= IF(TRUE, "Yes", "No")
```

IFが関数なのはLispみがある。

### 比較演算子

```
= 1 = 1
```

イコールは代入に使われないので、比較演算子に使うことができる。ここだけ取り出して見るとものすごい違和感があるが。

### ここまででFizzBuzzを書く

これをオートフィルするとFizzBuzzができます。

```
= IF(MOD(ROW(A1), 15) = 0, "FizzBuzz",
    IF(MOD(ROW(A1), 3) = 0, "Fizz",
      IF(MOD(ROW(A1), 5) = 0, "Buzz", ROW(A1))
    )
  )
```

読みやすさのために改行とインデントをしていて、こういうことが許されるのは意外な気がしますが便利なのでOKです。しかし、ただ条件分岐しているだけなのにコールバック地獄みたいになるのはしんどい。

### IFS を使ってFizzBuzzを書く

と思ったらIFSがあった。

```
= IFS(
  MOD(ROW(A1), 15) = 0, "FizzBuzz",
  MOD(ROW(A1), 3) = 0, "Fizz",
  MOD(ROW(A1), 5) = 0, "Buzz",
  TRUE, ROW(A1)
)
```

### オートフィルのキーボードショートカット

10,000行のオートフィル、スクロールしてボーッと待っていたこともありました。

1. オートフィル元のセルを選択して、コピー
2. Shift + Ctrl + ↓ で底まで選択
3. Ctrl + V で貼り付け (するとオートフィル扱いになる)

## 2次元配列のポインタ操作系 

スプレッドシートには変数も関数もないけど2次元配列はあって、添字のようなものでアクセスできる。

### 2次元配列の添字呼び出し

いちばん左上のセルを、つまり[0][0]を呼び出す例。

```
 = INDIRECT(ADDRESS(1, 1))
```


多くのプログラミング言語が0-basedなのに対して、スプレッドシートは1-basedなので `(1, 1)` となるところまではいい。だが `INDIRECT(ADDRESS(1, 1,))` は冗長すぎるだろ、と今のところは思っていただく。

### 2次元配列の添字呼び出し省略記法

```
= A1
```

A1表記はたしかに2次元配列のDomain Specific Languageみたいなものと考えれば合理的だけど、C言語的なポインタ操作にはなじまないので、プログラマーの発想をするなら `INDIRECT(ADDRESS(1, 1))` みたいにしたほうが整数演算でセル位置を指定できて自然だと思う。前項の `ADDRESS` は `1, 1` を `A1` に読み替える関数で、 `INDIRECT` はポインタを解決する関数。

じゃぁなんでA1表記が一般的なのかというと、オートフィルが高機能すぎてA1表記をしたほうがオートフィルの運用に沿うというから。

### セルから行番号を求める

C言語の `&` のようなイメージで、つまり変数からアドレスを求めたい時に使う。

```
= ROW(A1)
```

### セルから列番号を求める

```
= COL(A1)
```

### 例 対角方向のオートフィル

```
= INDIRECT(ADDRESS(ROW($A$1), ROW(A1)))
```

これを縦にオートフィルすると、 ADDRESS の列成分だけが増えていくので、行と列を読み替えたい時にイディオムとして便利。

### まとめ

スプレッドシートについてよく知らないうちから、たとえばいきなりVLOOKUPするのって気持ち悪くないですか？いわゆる「役に立つ」関数を単語帳的に覚えていく前に「スプレッドシートもまぁプログラミング言語みたいなものか」と感じておいたほうが気持ちいいのではないでしょうか？(実際、エクセルはチューリング完全らしいし)

プログラマーはほかのスプレッドシートのユーザーに対してデータモデリングの知見が当然優れているので、スプレッドシートについてプログラマーになにか質問するとしたら「こういうふうに整理したくて、こういうふうなシートにしているんだけどどう思う？」みたいな聞き方をするほうが、正直お互いのために幸せだと思います。

あと「スプレッドシートで管理」とかいうフレーズはよく耳にしますが、私は(おそらくあなたも)それは無理ある技術選定だと考えていて、それでもそこをある範囲で解決できないかと考えたりしています。書けたら書きます。
GitHubActionsを用いて、爆速でNuxt.jsのコンポーネントテストをCIで動かす

# この記事を実際に行うのにかかる時間
Node.jsがインストールできていれば、１０分程度で終わると思います。

# 環境

環境は、下記の環境で行います。

```
$ yarn -v
1.22.5

$ node -v
v14.15.0
```

# プロジェクト作成と動作確認

まず、Nuxt.jsのプロジェクトを作ります。

```
yarn create nuxt-app HelloGitHubActions
```

下記のスクリーンショットの通りになるように選択肢を選択してください
![スクリーンショット 2020-11-30 19.02.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42567/ec5bbd14-2ce8-323c-d12e-948eaf97a75e.png)

下記のコマンドをうつと、nuxt.jsのdev環境が動きます。

```
$ cd HelloGitHubActions
$ yarn dev
```

http://localhost:3000
にアクセスしてみてください
![スクリーンショット 2020-11-30 19.07.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42567/5544dfa7-a628-76e5-33b4-0eb482a2a826.png)


# GitHubにプッシュ

GitHubで作成したリポジトリに、Nuxt.jsのプロジェクトを、プッシュしてください。

GitHub ActionsのActionsタブで、CIが動きます！

![スクリーンショット 2020-11-30 20.53.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42567/f0766522-d5fb-d9d6-2f0f-d509cd6b701a.png)


# テストを書く
落ちるテストを書いてみましょう。

```test/MessageComponent.spec.js

import { mount } from '@vue/test-utils'
import MessageComponent from '@/components/MessageComponent.vue'

describe('メッセージを表示するコンポーネントのテスト', () => {
  test('Hello Worldとメッセージを表示する', () => {
        const wrapper = mount(MessageComponent, {
            propsData: {
                msg: 'Hello world'
            }
        })
    expect(wrapper.text()).toContain('Hello world')
  })
})

```

こちらのファイルを、書いたら、GitHubに、pushしてください


GitHub Actionsを見ると、、、
![スクリーンショット 2020-11-30 21.23.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42567/6fd48e75-6c97-5fee-edef-df5594d77a2c.png)

正しく落ちました！


# テストが成功するように修正する

テストが成功するように、コンポーネントを追加しましょう

```components/MessageComponent.vue
<template>
    <div> {{msg}} </div>
</template>
<script>
export default {
    props:{
        msg: {
            type: String
        }
    }
}
</script>
```

こちらのコンポーネントを追加してください。
GitHubにプッシュしてください。

GitHub Actionsのタブから確認すると

![スクリーンショット 2020-11-30 21.23.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42567/65d58ba1-60aa-1059-35f0-dd728b876503.png)
正しくテストが通っています！

簡単にCI環境が構築できる、GitHub Actionsはすごいですね！
モブプロとペアプロについて

#プログラミング勉強日記
2020年11月30日
最近モブプロやペアプロといった言葉をよく耳にするが、モブプロとペアプロの違いがいまいちわかっていなかったので、まとめる。

#モブプログラミングとは
　モブプログラミング(通称：モブプロ)は3人以上のエンジニアで1つのプログラムを書くことをいう。

　モブ(mob:群衆)が集まって行うモブプロは、3人以上のエンジニアが協力して1つのプログラムを完成させるが、全員がプログラムを書くというわけではない。1人1人に役割があって、それぞれの人がその役割を全うする。実際にコードを書く<b>ドライバー(タイピスト)</b>と、コードを見ながら意見をする<b>ナビゲーター</b>という2つの役割に分かれる。ドライバーとナビゲーターの役割は数十分といった一定時間で交代することがいいとされている。

ドライバーの役割：プログラムのコードを書く人。ナビゲーターの指示に従ってコードを書くが、改善の提案を行う。ドライバーは常に1人である。
ナビゲーターの役割：基本的にはナビゲーター同士で議論をしながらドライバーに対してどういったコードにするのか具体的に指示を出す人。ナビゲーターは複数人である。

##モブプロのメリット

- 1人で考え込まずにチームで意見を出し合うことで効率よく作業できる
- モブプロで作成したコードはレビュー済みなのでコードの質が向上する
- 1人1人が持つ知識を他の人に共有できる
- チーム全員がコードについて共通認識を持てる
- エンジニア同士のコミュニケーションの促進

##モブプロのデメリット

- 大勢でプログラミングするので発言する回数が減る
- チームの人に依存してしまう可能性がある
- 複数人のナビゲーターで1人のドライバーを攻撃する形になってしまう

#ペアプログラミングとは
　ペアプログラミング(通称：ペアプロ)は2人で1つのプログラムを書く。

　モブプロと同様に、ドライバーとナビゲーターに分かれて作業する。ドライバーとナビゲーターの役割を30分ごとまたはテストを1つ完成といった一定時間で交代することが良いとされている。また、一定期間で2人ペア自体を組み替えるという方法もある。

##ペアプロのメリット
　ペアプロのメリットはモブプロのメリットとほぼ同じである。

- 1人で考え込まずにチームで意見を出し合うことで効率よく作業できる
- モブプロで作成したコードはレビュー済みなのでコードの質が向上する
- 1人1人が持つ知識を他の人に共有できる
- チーム全員がコードについて共通認識を持てる
- エンジニア同士のコミュニケーションの促進


#参考文献
[使える! 情シス三段用語辞典105「モブプロ（モブプログラミング）」](https://josys-navi.hiblead.co.jp/josys-words105-mob-programming#:~:text=%E3%83%9A%E3%82%A2%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%EF%BC%89%E3%80%8D%EF%BC%89-,3%E4%BA%BA%E4%BB%A5%E4%B8%8A%E3%81%AE%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A71%E3%81%A4%E3%81%AE%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0%E3%82%92,%E5%BD%B9%E5%89%B2%E5%88%86%E6%8B%85%E3%81%AF%E5%90%8C%E3%81%98%E3%81%A7%E3%81%99%E3%80%82&text=%E3%83%9A%E3%82%A2%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E3%81%AE%E7%99%BA%E5%B1%95%E5%BD%A2%E3%81%8C%E3%83%A2%E3%83%96%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E3%81%AA%E3%81%AE%E3%81%A7%E3%81%99%E3%80%82)
[使える! 情シス三段用語辞典104「ペアプロ（ペアプログラミング）」](https://josys-navi.hiblead.co.jp/josys-words104-pair-programming)
【Rails】validatesとvalidates_associated違い

# はじめに
モデルのバリデーションでうまくいかなかったり、勘違いしていた記述を整理し、学びがあったので書きます。

# 状況
親モデルとして`product`モデル、子モデルとして`product_image`モデルがあります。
`product`を作成した時は必ず一つ以上の`product_image`のレコードがあることが条件

以下のようなモデルの記述です。

```ruby
class Product < ApplicationRecord
  has_many :product_images, dependent: :destroy
  accepts_nested_attributes_for :product_images, allow_destroy: true

  validates_associated :product_images
  validates :product_images, presence: true
end

```

```ruby
class ProductImage < ApplicationRecord
  mount_uploader :image, ImageUploader
  belongs_to :product
  
  validates :image, presence: true
end

```

ここでタイトルの内容のように違いを説明します。

# validates_associatedについて

```ruby
validates_associated :product_images
```

これで`product_image`が無い時はバリデーションがかかるものだと思っていたがそれは誤りです。
この表記は`「関連付けされている両方のモデルでバリデーションを実行する」`というもの。
私なりの言葉ではアソシエーションされてる先？別？モデルのカラムに対するバリデーションもかけますよ！というもの。

そもそも`product_image`が空の場合とは意味が違います。

ではどうすればいいのか。
普通にバリデーションかけたいが、`product`モデルには`product_image`のカラム無いし・・・
と悩んでいました。

答えはすでに記述してあるとおり以下の記述です。

```ruby

validates :product_images, presence: true
```

# validatesについて
ここでもまだ私には疑問がありました。
`validates`の後に記述するのはカラム名では？と。

間違いではないですが、不足している点があります。
その考え方で学びがありました。

わかりやす言えば以下のように`product.`のあとに付けれるものは`validates :`という表記で条件（presence: trueなど）が付けれるということです。

```ruby

product.name           #プロダクトの名前(カラム名)
product.price　　　　　　#プロダクトの金額（カラム名）
product.product_image　#プロダクトの画像（アソシエートされてるモデル名）
```

たしかにアソシエーションかけてると`product.`で値が取り出せます！
これの考え方でかなりすっきりしました！
【Vue.js】ドロップダウンの値を取得する方法

```vuejs:App.js
<template>
  <div>
    <select v-model="selected">
      <option>りんご</option>
      <option>バナナ</option>
      <option>ぶどう</option>
    </select>
    {{selected}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: 'りんご'
    }
  },
};
</script>
```



![demo](https://gyazo.com/26161cbd9d0bb2bf1f6d9a0bdf785953/raw)
【NeosVR】自分だけ見えるオブジェクト【基礎練習】【小技】



はじめに
---
この記事は「[NeosVR Advent Calendar 2020](https://adventar.org/calendars/5277)」の17日目です！
昨日は、銀鮭さんの「[【NeosVR】酔っぱらいながらGASでAPIを作る](https://twitter.com/Hamadori_vrq/status/1336334557595881479?s=20)」でしたω

---
僕(https://twitter.com/TewiEwi_no96) がNeosVRで人にモノづくり教える時に説明する内容を記します。
NeosVRが好きになるキッカケになってもらえると嬉しいです。

LogiXの小技です。
必要知識
---
・ロジックスチップの使い方(https://neosvrjp.memo.wiki/d/LogiX)

---
ノードブラウザを開いて以下のようにつないでみましょう！
Users -> LocalUser
Users -> UserFromUsername
Operators -> ==

![20201130191653_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556177/1082d752-e2a4-7a71-333e-e0586482846a.jpeg)

このBoolの出力をオブジェクトのActiveにつなぐと、
そのオブジェクトは自分のみに見えるオブジェクトになります！

お疲れ様でしたω
FUNBOXで支援してもらえると記事を書く励みになります。
---
https://frick.fanbox.cc

終わりに
---
明日は、@piacere_exさんの
[NeosVRに見出した可能性と未来について：「4つの世界」は「7つの世界」に](https://qiita.com/piacerex/items/7c29778e19e5b281f293)です！
MAMPでファイル実行しようとしたらInternal Server Errorが出た

駆け出せてないエンジニアの卵なりにPHPの学習をしようと思い、いつも通りMAMPにフォルダを立てて実行しようとしたら下記のエラーが


Internal Server Error
The server encountered an internal error or misconfiguration and was unable to complete your request.

Please contact the server administrator, you@example.com and inform them of the time the error occurred, and anything you might have done that may have caused the error.

More information about this error may be available in the server error log.


ーーーーーーーーーーーーーーーーーーーーーーーーーーーー

え？何これ？いきなりなんだ？？と思い、とりあえずエラーログ確認

[Mon Nov 30 21:03:13 2020] [error] [client 127.0.0.1] Request exceeded the limit of 10 internal redirects due to probable configuration error. Use 'LimitInternalRecursion' to increase the limit if necessary. Use 'LogLevel debug' to get a backtrace.


なんかリダイレクトが10回以上失敗しまくっているみたい。

色々調べた結果、結論から書くと
htdocsの中にある.htaccessのファイルを書き換えたら直った。

[修正前（人によってコード違うかも）]
<IfModule mod_rewrite.c>
	RewriteEngine on
	# Uncomment if you have a .well-known directory in the root folder, e.g. for the Let's Encrypt challenge
	# https://tools.ietf.org/html/rfc5785
	#RewriteRule ^(\.well-known/.*)$ $1 [L]
	RewriteRule ^$ app/webroot/ [L]
	RewriteRule (.*) app/webroot/$1 [L]
</IfModule>


[修正後]
<IfModule mod_rewrite.c>
	RewriteEngine on
	# Uncomment if you have a .well-known directory in the root folder, e.g. for the Let's Encrypt challenge
	# https://tools.ietf.org/html/rfc5785
	#RewriteRule ^(\.well-known/.*)$ $1 [L]
	RewriteRule ^$ app/webroot/ [L]
	# RewriteRule (.*) app/webroot/$1 [L]
</IfModule>


RewriteRule (.*) app/webroot/$1 [L] が悪さしていた模様
なぜかはよくわからない、、

同じ部分で詰まった人の参考になれば嬉しいです。
Linux ウェルノウンポート

#【Linux ウェルノウンポート】

##LPIC102 覚えておくべき代表的なウェルノウンポート

<strong>20</strong>　FTP　TCP　ファイル転送（データ用）

<strong>21</strong>　FTP　TCP　ファイル転送（制御用）

<strong>22</strong>　SSH　TCP　リモートホストの遠隔操作(暗号化有り)

<strong>23</strong>　Telnet　TCP　リモートホストの遠隔操作(暗号化無し)

<strong>25</strong>　SMTP　TCP　電子メール送信

<strong>53</strong>　DNS　TCP/UDP　名前解決

<strong>80</strong>　HTTP　TCP　テキストや画像などのコンテンツの送受信(暗号化無し)

<strong>110</strong>　POP3　TCP　電子メール受信

<strong>143</strong>　IMAP　TCP　電子メール受信

<strong>443</strong>　HTTPS　TCP　テキストや画像などのコンテンツの送受信(暗号化有り)
コンパイルの流れをざっくり掴んでいく

## 概要
JSを触っていく上でどのように解釈してブラウザに表示されているのだろう？と思いました。この機会に裏で何をやっているのか理解をしておこうとおもったのでまとめていきます。

#### ブラウザが認識できる言語
まず、ブラウザで認識されるのは`HTML`, `CSS`, `JavaScript`, `WebAssembly`という言語です。

たとえば、**Railsでコードを書いていったとしても最終的に開発者ツールなど見たらHTMLなどに変換**されています。

#### 高級言語
高級言語とはプログラミング言語の分類のひとつで、**人間がわかりやすいように設計**されているものです。反対に、機械がわかりやすい言語のことを低級言語と呼びます。たとえば、開発するときに効率的にはやく書きたいときに扱うのが高級言語でSCSSなどの人間が便利だと思うもののことです。

#### コンパイル
コンピュータが分かる言葉にするには、**コンパイル**をして表示させています。プログラミング言語は機械に認識してもらわないと動きません。端的に言うと、**機械に認識してもらう作業、要するに機械が理解できるようプログラミング言語を翻訳する作業のことをコンパイル**といいます。

## コンパイルの流れ

コンパイルは***コンピュータがわかるように翻訳する作業***のことで、翻訳作業を行ってくれているのは**コンパイラ**というプログラムです。

#### 一度整理すると

1.プログラミング言語をコンピュータに理解してもらうには翻訳をしなければならない。
2.翻訳作業のことをコンパイルと呼びコンパイラというプログラムで翻訳される。

ただ**コンパイラはなんでも翻訳してくれるわけではありません。**そこで出てくるのが`プリコンパイル`というものです。

#### プリコンパイルとは
コンパイラが言語の**翻訳ができるように、事前に準備すること**です。コンパイラに翻訳をお願いする前に、もっとコンピュータのわかりやすい言葉にしてあげることです。

## アセットパイプライン
アセットパイプラインとは、**JavaScriptやCSSなどのアセットを小さくしたり圧縮したりしてまとめてくれる機能**のことです。**複数のアセットファイルを一つにまとめてブラウザに表示するために必要な機能**です。処理の流れを簡単にいうと、複数のアセットファイルをプリコンパイルして連結して、最小化または圧縮して最終的に**軽量化されたものをブラウザに渡せるようにpublicディレクトリに配置**します。

#### Sprockets
Railsでは、プリコンパイルするために、`Sprockets`というGemを用いてアセットパイプラインをしていました。しかし、`JavaScript`の使用が多くなり、Railsのバージョン6系から`モジュールバンドラ`によるプリコンパイルが主流になりました。

## モジュールバンドラ
モジュールバンドラとは**JavaScriptの依存関係を考慮しながら管理**してくれるものです。依存関係を考慮しながらというのが大切で、**複数あるJavaScriptファイルを１つにまとめることでブラウザで読み取ることができる**ようにしています。また、１つのファイルにすることで**通信の高速化**を可能にしています。

JavaScriptでは`webpack`というモジュールバンドラを利用しています。

#### webpackとWebpacker

`webpack`を使えば依存関係の管理ができるのですが、Railsではもっと簡単に管理できるものが用意されています。それは`Webpacker`というものです。専用の設定ファイルやヘルパーメソッドを用意してくれるGemでRailsのバージョン6系からはデフォルトで**WebpackerというGemが用意されている**ので、導入のことを意識せずとも使えています。**Webpackerによってプリコンパイルに加え、JavaScriptのパッケージを管理することを可能**にしています。


#### npmとyarn
`Webpacker`にパッケージをインストールして入れていくには**パッケージ管理ツール**を使います。パッケージ管理ツールには`npm`というものがありますが、Railsでは`yarn`というものを使います。**yarnはpackage.jsonとyarn.lockで使用するパッケージを管理**します。Railsの**GemfileとGemfile.lock**のように管理されるようになります。簡単にいうと、**package.jsonで使用するパッケージを管理して、yarn.lockで使用するパーケージのバージョンを管理**しているということです。


## まとめ
- コンパイルとはコンピュータが理解できることばに翻訳すること。
- コンパイラというプログラムが翻訳している。
- ブラウザは一つのファイルしか読み取ることができない。
- プリコンパイルとは、コンパイラが理解できるように事前に準備をすること。
- アセットパイプラインとは`プリコンパイル`、`連結`、`圧縮`、`配置`する機能のこと。
- `publicディレクトリ`に配置することでブラウザが読み込めるようにしている。
- `Sprockets`というGemでのプリコンパイルから`Webpacker`というGemが使われるようになり、プリコンパイルに加えJavaScriptのパッケージ管理を行ってくれている。
- 最近は`webpacker`というモジュールバンドラで管理しており、依存関係を解決しながらモジュールを一つにまとめることでブラウザに表示されるような仕組みになっている。
- `webpacker`にパッケージを入れるには`npm`を使うがRailsでは`yarn`というものが使われていてパッケージを管理している。

## 参考文献

- [高級言語 (high-level programming language)](https://wa3.i-3-i.info/word1974.html)
- [コンパイル (compile)](https://wa3.i-3-i.info/word186.html)
- [webpackの公式ドキュメント](https://webpack.js.org/)
- [Webpacker](https://github.com/rails/webpacker)
- [Ruby on Rails ガイド【アセットパイプライン】](https://railsguides.jp/asset_pipeline.html)
- [DOM の紹介](https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model/Introduction)
- [【Rails】結局bundlerって何？bundlerの仕組みを図解形式で徹底解説](https://pikawaka.com/rails/bundler)
- [npmとは　yarnとは](https://qiita.com/Hai-dozo/items/90b852ac29b79a7ea02b)
- [超初心者がwebpackerについて調べてみたぞ](https://qiita.com/Furuta03/items/0957e69c0927be5c1a8b)