OmniAICreator/Qiita-1.07M huggingface dataset:
初心者によるプログラミング学習ログ 176日目

# 100日チャレンジの176日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

176日目は

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます<br>176日目<br><br>webサイトコーディングの課題<br>オブジェクトの配置修正<br>flexの使い方<a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</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/%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></p>&mdash; ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) <a href="https://twitter.com/yudapinokio/status/1201957019885817858?ref_src=twsrc%5Etfw">December 3, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
【初心者向け電子工作】超音波センサーで距離を測ってみる

この記事は[IoTLT Advent Calendar 2019](https://qiita.com/advent-calendar/2019/iotlt_neo)の5日目の記事です。

こんにちは！岩手県立大学のsasakisanです！
昨年のIoTLTのアドベントカレンダーは、
「[岩手の寒い冬はガスセンサで身を守ろう](https://qiita.com/sasakisan/items/6c3c52b8c8f939c4f61a)」
という題材で書きました。

今年は絶賛卒業研究でハードモードなので今回はさくっとできる初心者向けの電子工作をしていこうと思います。
題材は「超音波センサーで距離を測ってみる」です。
みなさんは普段距離を測るときはメジャー等を使いますよね？
今回はメジャーではなく超音波で距離を測れるようにしていきます！


## 使うもの
- M5Stack

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143395/b47cda5c-c0e7-3ec6-4931-eba4cf5aecad.jpeg" width="300px">


- 超音波センサー(HC-SR04)

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143395/876a4485-a89c-d7ca-2f8d-b40c97ca0043.jpeg" width="300px">

- ジャンパー線4本
- ブレッドボード

## 超音波センサーの仕組み
距離を測ることのできるセンサの仕組みはいくつかありますが、今回は超音波を使った距離センサを使います。
超音波を使う距離センサには、センサが２つついています。片方が超音波を出します。この時、距離を測りたいものに超音波があたり、跳ね返ってきたものがもう片方のセンサに当たります。跳ね返ってきた時間で距離を測ることができます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143395/c441e56b-fa1f-c083-347d-767e0a9365eb.png" width="300px">

## 回路
以下の表のようにジャンパとブレッドボードを繋いでいきます。
(M5Stackと超音波センサーの表記と表の表記を対応させて書いています)

|M5Stack|超音波センサー|
|:----:|:----:|
|5V|Vcc|
|G|Gnd|
|2|Trig|
|5|Echo|

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143395/9bcce11b-2d66-c385-9c97-c8a934300419.jpeg" width="400px">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143395/bd747306-94a4-ef2b-1d53-a0cdfc0a16f8.jpeg" width="400px">

## プログラム
M5Stackの環境構築をしていない方は[こちら](https://qiita.com/sasakisan/items/28de5d96e34c643cfe54)をご覧ください。

以下、プログラムと説明になっています。

```
#include <M5Stack.h>

#define TRIG 2
#define ECHO 5

int times;
int distance;

void setup() {
  M5.begin();
  
  pinMode(TRIG, OUTPUT);
  pinMode(ECHO, INPUT);

  // 文字サイズ
  M5.Lcd.setTextSize(10);
}

void loop() {
  // 画面を黒くする
  M5.Lcd.fillScreen(BLACK);
  
  // 超音波を発生させる
  digitalWrite(TRIG, HIGH);
  delayMicroseconds(10);
  digitalWrite(TRIG, LOW);

  // 超音波を受け取る
  times = pulseIn(ECHO, HIGH);
  distance = (int)(times * 0.017);

  // ディスプレイに表示させる
  M5.Lcd.setCursor(0, 0);
  M5.Lcd.print(distance);
  delay(500);
}
```


## 動かしてみる
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143395/108aa52c-bab7-4ec8-e6d7-6fef9aa636d2.jpeg" width="400px">

このように距離が表示され、距離が変わるごとにディスプレイの数字が変われば成功です！

## まとめ
今回は初心者向けの記事を書きましたが、センサーがあればとても簡単に試すことができるのでぜひやってみてください。
M-Functionでのmatファイルデータ読み込み時のエラー回避

M-Function内でmatファイル読み込んでデータをcsvファイルに保存しようとしていました。
matファイルの変数ansのデータをとりあえず確認したかったのですが。。。

```
coder.extrinsic('matfile');
filename = 'test.mat';
m = matfile(filename);
disp(m.ans);
```

#####'mxArray'から'ans'のフィールドを抽出しようとしています。

とエラーが出現

M-Function内だとこのやり方できないんだなあっと思って検索検索。

↓以下の記事にお世話になりました。ありがとう感謝です。
[M-FunctionでのMATLAB関数の使い方とmxArrayエラーの回避方法](https://qiita.com/nakaziki/items/623f55b3641570a21f47)

なるほど、getfieldで要素を取り出すのか。

↓修正後

```
coder.extrinsic('getfield');
coder.extrinsic('matfile');
filename = 'test.mat';
m = matfile(filename);
m = getfield(m,'ans');
disp(m);
```

データ取り出せた～～！！
simulink最近始めたばかりですが、普通のmatlabでの動く動作がsimuink内では動かないことがあるので大変ですね！それでは！
RIOTの良さとハマる点

#ごめんなさい。遅れましたがRiot.jsアドベントカレンダー3日目です。
##実は昨日と今日で煮詰まってました。
実はRIOT以外で煮詰まってしまい今日まっさらな自宅のMacで書いてみようと思ったわけで早めに帰宅しています。
コードはすいません。
あえて書きません。
初心者なりの感想を書かせていただきたいと思います。
##RIOTの良さ
RIOTの良さはReactやVueになかった発想を取り入れている点です。
それはTag自体をView化している点でしょう。
正直言うとVirtualDOMのタグって意外と昔からやっている自分たちだと思いつかないようなTagの使われ方しています。
RIOTはその点もリカバーできているのかなと思っています。
##ハマってしまう点
それはテストです。
一発外してしまうと二回三回とドツボにはまるようです。
それはECMAScirptとNode.jsの罠ってところです。
ECMAとJavascriptのクラスのインポートなどの問題があります。
トランスパイル（Babel）の使い方にしても数多く出てしまっていてどれが正確なのかわからなくなりそうになることが多いです。
そういうときはスッキリとした環境で一回作ってみて実装してみるのが一番だと思います。
実はPythonやPHPも自分は書くので実際言うと一回自分なりの実装を試してみるのが一番だと思います。
自分みたいにライブラリーなどの実装をやっているとよくハマるので今後は嵌りそうだったらスッキリさせてみることが重要だと思います。

遅れたこと申し訳ございませんが。
Riot.jsアドベントカレンダー三日目とさせていただきます。
Visual Studio Code でのHamlにはこれ!! Indent-Rainbow

Hamlって結構インデントの判定に厳しいですよね。
半角スペース１個分ずれていたら途端にエラーになりますし。
それで、VSCodeを使っている中で見つけたのがこの「Indent-Rainbow」。
ただ、デフォルトだと「ん？」と思うようなことがあったので簡単なカスタマイズ方法も載せておきます。

## Indent-Rainbowについて
名前通り、インデントごとに色を付け加えるものです。
※自分のVSCodeは背景を白にしているので見辛かったらスミマセン・・・
![](https://gyazo.com/7cc5897b19fa259fa41c615a59292ac1.png)
VSCodeのEXTENSIONSでindent-rainbowを検索してもらうとこれが出てくると思います。
ただ、見て欲しいのが
![](https://gyazo.com/8c3d9da35840c3ba595b35d0a716e94f.png)
デフォルトだと、インデントについている色が**薄ーーーい**ですよね。
というわけで

## カスタマイズ
<img width="623" alt="スクリーンショット 2019-12-04 18.54.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480714/84b9ee50-f275-264d-4fcd-6ecc64554624.png">
Code / 基本設定 / 設定
を選択してもらい、
![](https://gyazo.com/a44c35f86983a7064449509215e44175.png)
どれでもいいので「settings.json で編集」を選択してください。

```settings.json
{
    "indentRainbow.colors": [
    "rgba(178,255,255,0.4)",
    "rgba(142,198,255,0.3)",
    "rgba(173,255,173,0.4)",
    "rgba(255,204,153,0.4)",
    "rgba(214,173,255,0.4)",
    "rgba(255,173,214,0.4)",
    "rgba(255,255,137,0.8)"
    ],
    "indentRainbow.errorColor": "#FFFFFF",   
}
```
実際に自分が記述したものです。
一番外側の`{ }`の中に記述します。
`rgba()`の中の４番目の数字は色の透明度になります。

- 0（完全に透明）
- 1（完全に不透明）

７つの色を設定しており、８段目からは１色目からまた繰り返されます。

## 実物
![](https://gyazo.com/5e6f216850eeba69c29a3fbf8f37290e.png)
[こちらのサイト](https://www.colordic.org/p)を参考にさせていただき、パステルカラーを採用しました。
ビビッドカラーだと作業中に目が痛くなって仕方なかったです・・・
困った時に活躍してくれたコマンドプロンプトのコマンド


## 概要
業務系のデータを扱ったりシステム構築する際、微妙にかゆいところに手が届けさせたい時に活躍してくれたコマンド達。

UNIXであればコマンドからSHELLまであるけど、Windowsは微妙に手が届かない際に出番があるかもわからない。

## コマンド
#### SORT

指定した桁数でソートを掛けるコマンド。UNIXではなく、Windowsでもありました。
以下のような感じで使用する。
ヘルプを見たいときは/?で。

```BAT:SAMPLE.BAT
SORT /+1 SAMPLE.TXT > RESULT.TXT
```

サンプルのデータ以下の通り。

```TXT:SAMPLE.TXT
1,2,3
4,1,2
2,2,2
2,1,3
3,2,1
1,1,1
```


以下、結果のファイル。
前の1桁でソートを掛けている。

```TXT:RESULT.TXT
1,1,1
1,2,3
2,1,3
2,2,2
3,2,1
4,1,2
```

桁数増えた時どうするのかという問題あり。
Noとか通番と言われているものなら、1ではなく0001とかで予め桁数に余裕を持つとか方法を考える必要あり。

#### WHERE

Windows上でもコマンドでファイル探しができるのは場合によっては便利。
どこにインストールされているかわからないアプリなどを探すのに重宝しそう。

```:where
C:\Users\**************>where /R C:\ excel

C:\Program Files\Microsoft Office\root\Office16\EXCEL.EXE
```

#### certutil
証明書インストールで使えるコマンド。
のうち、オプションでbase64のエンコード・デコードが行える。
運用で使うな、開発者とかが確認の為に使ってねとあり。

ちょっとした確認で使えるので便利。

以下、公式サイト。
https://learn.microsoft.com/ja-jp/windows-server/administration/windows-commands/certutil


～以上～
プロフィール画面で見るアレやってみたい(CoordinatorLayout)

おはようございます！
CA Tech Dojo/Challenge/JOB Advent Calendar 2019(長ぇ)
の4日目を担当をさせていただきます、zoothezooです！！

夏休みにDojo,Challengeに参加し、
12月から(厳密には明日)TechJOBに挑戦します。
では、参りましょう。


## 概要


プロフィール画面でよく見るような上にスクロールすると、
ヘッダー画像がいい感じに消えていく??やつを作りたいと思います。

理解し難い実装たくさんあると思いますが、
お手柔らかにお願いしますね。

これです。

<img src = "https://drive.google.com/uc?export=view&id=1OZZGQFZfNJg9yTdv2luF4ecwZriCVv78" width="500dp">

## 実装
- activity_main.xml
(かなり省略しています)

```xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:fitsSystemWindows="true">

    <com.google.android.material.appbar.AppBarLayout
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:layout_anchor="@+id/appbar"
            app:layout_anchorGravity="center"
            app:title="Profile">

            <ImageView
                android:minHeight="100dp"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                android:src="@drawable/curry"
                />

            <androidx.appcompat.widget.Toolbar
                app:layout_collapseMode="parallax"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                />

        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

    <include
        layout="@layout/basic_profile"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom|center"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

```

- basic_profile.xml
(中身は自由に書いてください)

```xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout>
    <androidx.core.widget.NestedScrollView
        android:fitsSystemWindows="true">
    </androidx.core.widget.NestedScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
```

## 各要素について
以下の要素が重要になります。
### Coordinatorlayout
- スーパークラス : FrameLayout
    - Constraintlayoutばっかり使ってたから慣れなかった
- 複数の子ビューとの相互作用のコンテナ

###  AppBarLayout
- CoordinatorLayoutの直下に配置
- 垂直方向のスクロールができる
- nestedscrollviewやrecyclerview


### CollapasingToolbarLayout
- AppBarLayoutの直下に配置
- ↑をCoordinatorLayout内に配置しないと、
CollapsingToolbarLayoutのスクロールなどの機能は使えなさそう
- collapseModeについて
    - parallax,pin,(なし)がある
    - parallaxは、視差方式でスクロールするらしい(英語難しかった)


## まとめ

僕はかなりこれを実装できた時感動したんですけど...(めっちゃ調べたし、バグるし)

ユーザとして使う分にはすげぇ程度に終わってしまいますが、
実装してみるとやっぱりエンジニアの人ってすげぇ(!!!!!!!)ってなりますよね

よかったら[github](https://github.com/zoothezoo/CoordinatorLayoutSample)に載せてますので見てください。
JavaScriptにおけるfor-in文の動作

# JSの`for-in`文が思ったように動かない...
素直に配列の中身を`for-in`文で取ろうとしたのだが、

```JavaScript:sample.js
var a = ["hoge", "fuga", "piyo"];

for (var v in a) {
  console.log(v);
}

/* result
0
1
2
*/
```

なぜか、`0, 1, 2 `と出る（泣）

# JSでは、`for-of` を使う
```JavaScript:sample.js
var a = ["hoge", "fuga", "piyo"];

for (var v of a) {
  console.log(v);
}

/* result
hoge
fuga
piyo
*/
```

何かと、20分くらい悩んでた...。
PythonやC#などforeach文に慣れているとちょっと違和感w


## ちなみに、`for-in`文の使い方は？
JSでの`for-in`文はオブジェクトのプロパティを取得するみたいです。

```JavaScript:sample.js
var pen = {
  name: "hoge",
  color: "black",
  price: 100
}

for (var p in pen) {
  console.log(p);
}

/* result
name
color
price
*/
```
rubyのバージョンアップのときのエラー対処

rubyをバージョンアップをして、*budnle install*を叩いたら、

```
Fetching: mysql2-0.3.18.gem (100%) 
Building native extensions. This could take a while... 
p 
ERROR: Error installing mysql2: 
    ERROR: Failed to build gem native extension. 

    /Users/my_username/.rvm/rubies/ruby-2.1.2/bin/ruby -r ./siteconf20150614-72129-orqsb7.rb extconf.rb 
checking for ruby/thread.h... yes 
checking for rb_thread_call_without_gvl() in ruby/thread.h... yes 
checking for rb_thread_blocking_region()... yes 
checking for rb_wait_for_single_fd()... yes 
checking for rb_hash_dup()... yes 
checking for rb_intern3()... yes 
----- 
Using mysql_config at /usr/local/bin/mysql_config 
----- 
checking for mysql.h... yes 
checking for errmsg.h... yes 
checking for mysqld_error.h... yes 
----- 
Don't know how to set rpath on your system, if MySQL libraries are not in path mysql2 may not load 
----- 
----- 
Setting libpath to /usr/local/Cellar/mysql/5.6.25/lib 
----- 
creating Makefile 

make "DESTDIR=" clean 

make "DESTDIR=" 
compiling client.c 
compiling infile.c 
compiling mysql2_ext.c 
compiling result.c 
linking shared-object mysql2/mysql2.bundle 
ld: warning: directory not found for option '-L/Users/travis/.sm/pkg/active/lib' 
ld: library not found for -lssl 
clang: error: linker command failed with exit code 1 (use -v to see invocation) 
make: *** [mysql2.bundle] Error 1 

make failed, exit code 2 

Gem files will remain installed in /Users/my_username/.rvm/rubies/ruby-2.1.2/lib/ruby/gems/2.1.0/gems/mysql2-0.3.18 for inspection. 
Results logged to /Users/my_username/.rvm/rubies/ruby-2.1.2/lib/ruby/gems/2.1.0/extensions/x86 
```

上記のように*mysql*のエラーが出る。。。。

もしもインストールをしていなければ、

```
bundle config --local build.mysql2 "--with-ldflags=-L/usr/local/opt/openssl/lib --with-cppflags=-I/usr/local/opt/openssl/include"
```
こいつを叩いて、`bundle install`してみて、

```
Library not loaded: /usr/local/opt/openssl/lib/libssl.1.0.0.dylib (LoadError)
```
上記のエラーが出るようなら、


```
$ brew install openssl
$ export LIBRARY_PATH=$LIBRARY_PATH:/usr/local/opt/openssl/lib/
```
これでPATHを指定してから、再度`budnle install`
これでも無理なら、、、、

```
brew update && brew upgrade
```

これで行けるケースもあります。
ただ、これでも

```
Library not loaded: /usr/local/opt/openssl/lib/libssl.1.0.0.dylib (LoadError)
```

こいつが出るようなら、
`rbenv` をアンインストールする。

```
$ ruby -v
ruby 2.3.4p301
```
でrubyのバージョン確認

```
$ rbenv uninstall 2.3.4
```


```
$ rbenv install --list
$ rbenv install 2.3.4
```

インストールするlistの確認をして、rubyのバージョンを指定してinstallする。

```
$ gem install bundler
```
その後、`bundle install`する。
ただ、念の為に`gemfile.rock`を消してからやるとよい

メモ書きの感じで書いたので、まだ理解不足です。
ご指摘等あればお願いします。
インターフェイス/抽象クラス/オーバーライド　

初学者ですが、個人的な勉強のために書いたものです

##インターフェイス 

インターフェイスとはクラスのような具体的な処理を提供するものではなく、**決まり事**を定めるために明示しとくものであり、実際の処理はインターフェイスを実装したクラスで定義する
これにより、プログラムを複数人で作るような会社の現場では、親の抽象クラスで子クラスに実装してほしいメソッドを抽象メソッドとして定義しておくことで、他の人が作成する子クラスでも、必ずそのメソッドを実装してもらえるという利点がある

**※抽象メソッド**・・・名前/型/引数だけを定義したメソッド

####①クラスから「型」だけ取り出したもの 
 
**※「型」**・・・そのものの**「扱い方を決める方法」**であり、変数を宣言するときに、型を指定するのは変数の扱い方を決めるためである

・注意すべき点は、**扱う対象そのものの種類と、型で指定する「扱うものの種類」は異なる概念**であること。例えると、１という数値をint型で扱うのか、double型で扱うのか変えられるように種類と扱い方は異なるということ
 
####②ほかのクラスからの「扱い方」を規定したもの 
 
・ほかのクラスから扱えるようにするために、規定するメソッドはすべてpublicと解釈されるため、インターフェイスはコンパイラによって**自動的にpublic**にされる 
・インターフェイスで定義するメソッドは、protectdやprivateで修飾することはできない （Java8からdefault修飾子を付けることで中身も定義できるようになった）
・クラスがインターフェイスを継承するときにimplements（実現する）を使うことからわかるように**「規定を実現するクラス」**があって初めて動作する 
 
####③インターフェイスは実装を持てない 
 
**インターフェイスは扱い方だけを規定**しているので、**実装を持てない**ため、インスタンスを生成して**動的に動作するもの（動的に値が変わるもの）は記述できない** 
ただし、以下の二つの条件をどちらか満たしていれば記述可能 
 
・**final**を使い、動的に値が変更されないこと（定数） 
・**static**を使い、インスタンスを生成できないこと 
 
####④インターフェイスの継承 
 
・継承はextends（拡張する）を使うことからわかるようにクラス機能を拡張した新しいクラスを定義することができるが、インターフェイスにおいてもextendsで、あるインターフェイスを拡張した新しいインターフェイスを定義（継承）できる 
・**クラスの多重継承は禁止だが、インターフェイスの多重実現は認められている**
 
##抽象クラス 
 
####①インターフェイスとクラスの両方の性質をもつ 
 
・**実装を持つ具象メソッド**と、**実装を持たない抽象メソッド**の両方を持つことができる 
・抽象クラスに定義した具象メソッドは、その抽象クラスを継承したサブクラスが引き継ぐ
・**抽象メソッドは、そのサブクラスでオーバーライドして実装しなおさなくてはいけない**

####②インスタンス化はできない

・インターフェイスのの特性（抽象メソッド）を持つ抽象クラスは、インターフェイス同様に**インスタンス化できない**
・インスタンス化できないことからわかるとおり、**継承されて利用されることが前提**である
・抽象クラスに定義した抽象メソッドはこれを継承した**具象クラスが実装を提供しなければならない**
・抽象クラスを継承した抽象クラスは、具象クラスのように必ずしも実装する必要はなく、元の抽象クラスを拡張し、新しい抽象メソッドを追加したり、既存の抽象メソッドをオーバーライドして実装することができる。

####③フィールド定義

・抽象クラスを継承したサブクラスのインスタンスには、抽象クラスのインスタンスが含まれる。つまり、抽象クラスを継承したサブクラスのインスタンスには抽象クラスのインスタンスが含まれ、型だけを提供するインターフェイスは定数フィールドしかできないが、抽象クラスには動的に値が変更できるフィールドが定義できる

##オーバーライド

・**オーバーライド**は、サブクラスでスーパークラスに定義されたメソッドを**再定義**すること
・**多重定義**を表す**オーバーロード**と間違えないように注意
####オーバーライドには3つルールがある
①メソッドの再定義のため、メソッドの**シグニチャは同じでなければならない**
　※**シグニチャ**・・・メソッド名、引数リストの型、数、順番を組み合わせたもの
②**戻り値が同じか、サブクラスであること**
③**アクセス修飾子は元の定義よりも緩くすることはできるが、厳しくすることはできない**
　・下記の例はInteger型がNumber型のサブクラスであるのでオーバーライドできる

```Sample.java
public Number method{
//any code
}
```

```Sample.java
public Integer method{
//any code
}
```
####オーバーライドは追加（再定義）
・オーバーライドは上書き（overwrite）ではなく、追加（再定義）なので、サブクラスのインスタンスには同じ名前のメソッドが複数存在していることになる。この場合、オーバーライドされたメソッドが使われる
[UE4] Shader Development Mode を使ってシェーダー開発を円滑に

UnrealEngineにはShader Development Modeという設定があります。
通常Shaderまわりでクラッシュが起きてしまうと、エラーなどが表示出来ないケースがありますが、
Shader Development Modeの設定を有効にしていると、
問題がある行数の表示やクラッシュするような変更の場合でもリトライができる可能性があります。

# 設定方法
以下パスのConsoleVariables.iniにコメント状態で;r.ShaderDevelopmentMode=1が定義されているので、
こちらの;を削除しコメント状態を解除することで設定が可能です。
INIファイルを変更、保存しEditorを再起動することで設定されます。
**Engine/Config/ConsoleVariables.ini**
![2019-12-04_18h35_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363894/6cfc0930-d1c0-0889-a554-8f181325a817.png)

# 使用例
例えばPostProcessTonemap.usfを編集していて、変数宣言のところで;を書き忘れていたケースです。
![2019-12-04_18h52_20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363894/0094b14d-182a-e513-92aa-c2e1f0b4a2c1.png)

このような状態で通常シェーダーをリコンパイルするとクラッシュしてしまう可能性が高いですが、
Shader Development Modeが有効な場合は、以下のようなメッセージウィンドウが表示されコンパイルのリトライが可能です。
![2019-12-04_18h52_45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363894/24ba245b-bd04-6f7b-14f3-c8145f6cb7d1.png)

# おわりに
Shader Development Modeを使ってシェーダー開発を円滑に行いましょう。
GitHub Organization の領収書が届かなくてSupportに問い合わせた話

# 発生した問題
通常では月末にはメールで届くはずの GitHub の領収書が、月が変わっても届かなかった。
Organization の Payment history を見ても領収書がなかった。
クレジットカードの利用履歴をみるときちんと引き落としされている。
経費精算の都合で早めに領収書が欲しかった。やばい。

# どういう状態だったか
領収書はメールで送られてくるほか、 GitHub Organization の `Settings->Billings->View payment history` に行けばいつでもダウンロード出来る状態になっている。
今回はメールが届かなかった上に、Payment history に行っても記載がなかった。
ちなみに Billings は以下のようなURLになっている。 <org-name> は適当に読み替えてほしい。
`https://github.com/organizations/<org-name>/settings/billing`

また、Billings のページに、見覚えのないインフォメーションがあった。

```
Data Transfer billing issues have been resolved, and billing has resumed for data transfers for your Packages. Please contact support if you have any questions about your next bill.
```

え、なんか不具合でもあったのかしら。

# GitHub Status を見る

https://www.githubstatus.com/history

2019年11月の Incidents を読んで見る。
うーん、支払いに関するインシデントは無いような気もするんだが。
あと、Billings に書いてある英文いわく、 `issues have been resolved,` と書いてあるので、インシデントがあったとしても解決はしているんだよなぁ。

# ぐぐる
`GitHub payment receipt issue` とか色々調べたけど全然出てこず。Twitterでも全然話題になってない。
困っているの私だけなんだろうか。


# GitHub Support に問い合わせる

`Please contact support if you have any questions about your next bill.`

って書いてあるし、問い合わせることにした。
https://support.github.com/contact

Google の翻訳機能を片手に英文で問い合わせてみる。
英文が拙いのは目をつぶってほしい。。。

```
Payment staff;

I paid GitHub subscription on November 24, 2019. Payment method is Visa ending in xxxx.
But I couldn't find a receipt on Payment history. I want this receipt by December 4, 2019 23:59 (JST) for my company's expense settlement.

Regards,

---

決済担当者様

去る11月24日に GitHub subscription の支払いをしました。支払い方法は末尾xxxxのVisaです。
GitHubのPayment historyを見ても領収書がありませんでした。弊社の経費精算のために12月4日までに領収書をいただきたいです。

よろしくお願いします。
```

英語の下にしれっと日本語も添えた。あと、どの Organization でトラブルが起きているか伝えたかったので、スクショも添えた。
天下のGitHub様なのだから、きっと日本語が読めるひともいるんだろう。いてほしい。届いて！！！

# 1日後・・・

GitHub Support の Jimmy からメールが届いた！

```
Hi there,

Sorry for the time taken to get back to you. We really do appreciate your patience.

The <org-name> organization account has been re-synchronized and that 2019-11-24 payment receipt should be reflected in your payment history now. An organization owner can download any payment receipts by following this guide:

https://help.github.com/en/github/setting-up-and-managing-billing-and-payments-on-github/viewing-your-payment-history-and-receipts#viewing-receipts-for-your-organization

For your convenience, I've attached that payment receipt here.

Kind Regards,
Jimmy
```

復旧してくれたようだ。
そしてご丁寧に欲しかったPDFの領収書まで添付してくれた！
もちろん GitHub の Payment history にもバッチリ記載が入っていた。
英語がアレでも勇気をだして問い合わせるとなんか通じるようす。海外のSaaS使っていても困ったらビビらず問い合わせるの大事だね。


# 結論
何もしなくても放っておけば復旧してメールで領収書が届いたんじゃないか・・・
Google reCAPTCHA v2 導入時につまったこと


# 概要
Google reCAPTCHA v2 サーバ側処理の実装時に詰まった内容の備忘録

## 内容
実装する際に当初下記のようにgoogle側に認証のため、
file_gets_contentsを利用して結果を受け取るように実装し、
開発環境では問題なく動作していた。

```
$response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".シークレットキー."&response=".レスポンスコード);
```

ただ、こちらの内容を今度は本番環境にリリースしたとき、何度試しても
reCAPTCHAの認証がエラーが返ってくる現象が発生。

## 原因
結果としては、「file_gets_contents」が原因で発生。
開発サーバ側では上記は利用できるような設定がされていたが、本番サーバ側では
利用できないように設定されていたため、認証が出来ずに常にエラーに・・・。

>PHP: 実行時設定 - Manual
>http://php.net/manual/ja/filesystem.configuration.php#ini.allow-url-fopen

今までは普通のこちらの設定がONになっていたため、利用できていたが
まれにOFFになっていることがあるようです。

## 解決策
単純に「file_gets_contents」を利用せずに「cURL」を利用して実装したところ
問題なく動作可能でした。

```
$url = "https://www.google.com/recaptcha/api/siteverify?secret=".シークレットキー."&response=".レスポンスコード;

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
curl_setopt($ch, CURLOPT_POST, TRUE);
curl_setopt($ch, CURLOPT_HTTP_VERSION, CURL_HTTP_VERSION_1_1);
$response = curl_exec($ch);
curl_close($ch);
```

## おわりに
PHP側で用意されている関数を利用するから問題ないだろうとろくに調べずに
「いつもどおり」で実装することは危険であることが改めて実感できました・・。

皆様もお気をつけください。
Cloud Tasks+GAEで非同期タスク管理

この記事は [Brainpad Advent Calender 2019](https://qiita.com/advent-calendar/2019/brainpad) 5日目の記事になります。

大体のサービスの裏には定時実行されるジョブがあるかと思います。
そしてこれらのジョブは並列で動かしたり、途中で失敗したら自動的に再実行するリトライ機構が欲しくなるはずです。
それができないとジョブが完了するまでかなり時間がかかったり、何かが失敗したらそのたびに手動で再実行しないといけなくなります。
そこで非同期タスクの管理が出来るCloud Tasksが役立ちます。

# Cloud Tasksとは

[公式サイト Cloud Tasks](https://cloud.google.com/tasks/?hl=ja)

まぁこれ見れば全て分かるはずです……。
いつも思うんですけどこういうクラウドサービス特有のポエムを解読するのって初見だと難しくないですか？

もう少しちゃんと説明すると、タスク（HTTPリクエスト）を並列で動かしたり、失敗したら再実行する、というような仕組みをyaml書くだけでできる、というものです。
似たようなサービスとしてPub/Subがありますが、これよりもTasksのほうが細かく設定が可能です。
詳細な比較は以下の通り。
[Cloud Tasks か Cloud Pub/Sub かの選択](https://cloud.google.com/tasks/docs/comp-pub-sub?hl=ja)

習うより慣れろ、動かして試してみましょう。

# 動かしてみる

[Cloud Tasksの公式チュートリアル](https://cloud.google.com/tasks/docs/quickstart-appengine?hl=ja)

これの通りやればわかるはずです……。
というともうqiitaの意味ないじゃん、となりますがざっくり流れをいうと以下のような感じです。

1. 事前にキュー（タスクを管理する単位）を設定する
2. タスク（GAEへのリクエスト）を登録する
3. ワーカー（GAEでいうサービス）が動く
4. タスクが正常終了（ステータスコード=2xx）したら終わり、そうでなければ再実行

# 補足

## ジョブフローも可能

ワーカー中でタスク登録を行えばタスクをつなげていってジョブフローの管理も可能です。
ただ管理画面からだと現在動いてるタスクの動きしか確認できないため、
グラフで見るとかしたい場合は別のミドルウェアが必要となります。

## 障害対応しやすい

例えばジョブの途中で事故ったとき。
どのリクエストが失敗したかを確認、コードを修正、アプリをデプロイ、対象のリクエストを手動で再実行する必要があります。
Cloud Tasksだと失敗して留まっているタスクの情報の確認や再実行が管理画面から可能なのでちょっと楽です。

## リトライしないという設定も可能

task_retry_limitの設定を0にしておけば、1回だけ実行して失敗したらそのまま放置、というのも可能です。
リトライしなくていいときのAPIのレスポンスを強制的に2xx系にする、というやり方もありますが、これはサービスによるかなと思うので要検討でしょう。

# 注意点

## 基本GAE向け

基本的にCloud Tasksは同じプロジェクト内のGAEへのリクエストの管理を行います。
外部へのHTTPリクエストも可能ですが、こちらはベータ版となっています。（2019/12/4現在）
詳しくは以下の通りです。

[HTTP Target タスクの作成](https://cloud.google.com/tasks/docs/creating-http-target-tasks?hl=ja)

## gcloudコマンド使うよりqueue.yaml使ったほうがよさそう

これはqueue.yamlを適用するとコマンドで設定したキューの設定を上書きしてしまうためです。
チュートリアルだとコマンドで追加してますが、
公式でもコマンドとyaml設定を併用するのは止めようという話をしてます。
ただキューの情報はgcloudのスクリプトよりはqueue.yamlでまとめておいたほうが確認しやすいし、
`gcloud app deploy queue.yaml`によるキューの更新が冪等になるのでqueue.yamlのほうが良いかなと思います。

ちなみにqueue.yamlのリファレンスは以下の通り。
python2系とありますが3系でも同様に動かせました。
[queue.yamlリファレンス](https://cloud.google.com/appengine/docs/standard/python/config/queueref)

## ローカルでのテストがしにくい

Cloud Tasksにエミュレータはないです。（2019/12/4現在）
したがってやり方としてはGCPの検証環境にデプロイして確認するしかなさそうです。
そのため考えられるのは以下のようなやり方です。

+ 事前に検証環境のキュー、ワーカーの設定をしておく
+ 開発環境は通常、ローカルのワーカーに対して直接リクエストするような形にする、GCPを経由しない
+ CloudTasksの動作確認時のみ、開発環境から検証環境のキュー、ワーカーを指定する

あとはローカルサーバを外部からアクセスできるようにしてワーカーとして指定する、
という方法もあるようですがそこまでやるかどうかは開発者次第です。
Pub/SubもエミュレータできたしいずれはCloud Tasksもできる……かもしれません……。

# まとめ

やってみた系ポエム記事になってしまいました。
Web界隈に対して違和感を持たれる可能性が高いので、来年は自作ライブラリ公開したいです。

おわり
【備忘録】storage/framework/cache のエラーでキャッシュを作り直した

EC2インスタンスを再起動したら、こんなエラーが。

```bash
[oauth/token][exception_message]file_put_contents(/Hogehoge/storage/framework/cache/data/9a/c1/9ac1b29cf1a1d991418507a9743d8479c3be0636): failed to open stream: No such file or directory
```

どうやら再起動したとしても、内部のキャッシュが残っててしまって、更新したプログラムをうまく反映してくれない時があるらしいです・・・。
キャッシュ系を全部クリアしてみてみたり、不要になったファイルを削除してみたりしてもうまくいかず。
最終的に作り直しました。

```bash
$ composer dump-autoload // composer.json の名前空間の割り当てマップの変更を autoloader.php に反映させるコマンド
$ php artisan clear-compiled // クラスローディングの最適化や、テストのために最適化させるコマンド
$ php artisan optimize // 最適化されたクラスローダを生成するコマンド
$ php artisan config:cache // configのキャッシュをクリアするコマンド
```

参考
https://getcomposer.org/doc/03-cli.md#dump-autoload-dumpautoload-
http://recipes.laravel.jp/recipe/36
http://recipes.laravel.jp/recipe/50
https://qiita.com/Ping/items/10ada8d069e13d729701
Bootstrap Frameworkについて学んだことまとめ

## 目次
1. Bootstrap Frameworkとは
2. Bootstrap Frameworkを理解する

## 今回の学習のゴール
- Bootstrap Frameworkとは何か、何ができるかを知る
- 実際の使い方について知る

## 1. Bootstrap Frameworkとは
- Twitter社が開発したCSSのフレームワーク
- よく使用されるスタイルがあらかじめ定義されているため整ったデザインのページを効率的に作成することができる
- 特徴
    - グリッドシステムの採用
    - レスポンシブ対応
    - 豊富なコンポーネント

## 2. Bootstrap Frameworkを理解する

### グリッドシステム
- グリッドとは、サイトの横幅を均等に分けるガイドラインのことで、Bootstrapではサイトの横幅を12分割してデザインを行う
- グリッドシステムとは、画面上に架空の縦横線をガイドラインとして引き、そのブロックごとに文字や図版を配置し、無駄なくスッキリした画面を作る手法のこと
- container, row, colの3つのclassを使ってレイアウトを行う

> ![bootstrap.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529506/05818ade-32bb-fcd9-970e-4c1835f2279f.jpeg)
http://websae.net/twitter-bootstrap-grid-system-21060224/

- container
    - 固定幅のコンテナか全幅のコンテナ(常に100%の幅)から選択できる
    - 固定幅のコンテナの場合は、ブレイクポイントを指定する

| サイズ  | 画面幅               | container幅    |
|:------:|:------------------:|:--------------:|
| lg     | 1200px以上          | 1170p          |
| md     | 992px以上、1200px未満 | 970px         |
| sm     | 768px以上、992px未満  | 750px         |
| xs     | 768px未満           | auto           |

- row
    - 行に適用するclass
    - コンテナを水平に分割して上から下へ積み重ねられる
- col
    - column（カラム）のこと
    - 全体を12カラムに分割し、何カラム分の幅にするのかをcolクラスで指定する

>![bootstrap.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529506/9ce65ebc-93f8-b3dd-30eb-143ab2364eb7.png)
https://getbootstrap.com/docs/3.4/css/

```html:example
<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>
```

### ユーティリティ
- 配色やボーダー線など各種CSS設定のプリセットのこと
    - 配色
        - 意味合いを色で伝えることができる
        - [Colors · Bootstrap](https://getbootstrap.com/docs/4.0/utilities/colors/)で詳細を確認できる
    - ボーダー線
        - borderクラスやborder-radiusクラスを適用すると枠線を適用できる

```html:example
<span class="border">...</span>    <!-- 四面全てに線 -->
<span class="border-top">...</span>    <!-- 上部に線 -->
<span class="border border-primary">...</span>    <!-- primaryの色の線 -->
<img src="..." alt="..." class="rounded">    <!-- 画像の角を全て丸くする -->
```

### コンポーネント
- ボタンやカードなど多様なコンポーネント（パーツ）が用意されているので、コンポーネントを画面上に配置すれば簡単にレイアウトを作成することができる

ex. アラートメッセージ

```html
<div class="alert alert-primary" role="alert">
  アラートメッセージ
</div>
```
ex. ボタン

```html
<button type="button" class="btn btn-success">ボタン</button>
```
- 詳細
    - [コンポーネント · Bootstrap](http://memopad.bitter.jp/web/bootstrap-3.3.2/_gh_pages/components/)

## 参照
- [はじめに - Bootstrap 4.3 - 日本語リファレンス](https://getbootstrap.jp/docs/4.3/getting-started/introduction/)
Google AnalyticsのデータをAWSのs3に保存しQuickSightに可視化

# 概要
Google AnalyticsのデータをS3に保存して、athenaに取り込んみQuickSightで可視化してみました

# 構成
![無題の図形描画 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525769/e2c1dca5-703f-bfbc-170d-6d5af87f1cb5.png)

## Lambda
LambdaでBigQueryからデータの取得しS３にアップロードする。
実際にはBigQueryから直接ダウンロードできないので、一旦Google StorageにBigQueryのダンプファイルを落とす感じになります

### BigQueryのデータをダンプしてストレージ保存する
```
client = bigquery.Client(
    credentials=credentials,
    project=credentials.project_id,
)
project = credentials.project_id
dataset_ref = client.dataset(dataset_id, project=project)
table_ref = dataset_ref.table(table_id)

ext_job_config = bigquery.job.ExtractJobConfig()
ext_job_config.destination_format = bigquery.job.DestinationFormat.NEWLINE_DELIMITED_JSON
ext_job_config.compression = bigquery.Compression.GZIP

extract_job = client.extract_table(
    table_ref,
    destination_uri.format(gcp_bucket_name, target_day, file_name),
    location='US',
    job_config=ext_job_config
)
extract_job.result()
```
## Glue
クローラーを設定する

設定内容はほぼデフォルトのですが「クローラの出力を設定する」の項目以下を設定

- 「設定オプション」で「新規列のみ追加します。」を選択
- 「全ての新規および既存のパーティション〜」にチェックをつける

この設定をしないとAthenaでSQLを実行した際に下記の様なエラーメッセージができる
<font color="red">Your query has the following error(s):<br>HIVE_PARTITION_SCHEMA_MISMATCH: There is a mismatch between the table and partition schemas. </font>
<img width="1216" alt="スクリーンショット 2019-11-14 22.42.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525769/78fe4142-2e45-d4e8-e089-c61a3b4bc03e.png">

## Athena
Glueでクロールが完了するとAthena側でSQLを実行してみる、以下の様に結果が表示されればOK
<img width="1214" alt="スクリーンショット 2019-11-14 22.51.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525769/48105893-9255-b67c-de40-c2efe06b8c31.png">
ちょっと一手間、Athenaに取り込んだデータのカラムが複合型なので、Viewを作りQuickSightで取り出しやすい形にしておきます

```Athena:Athena&nbsp;sql
CREATE OR REPLACE VIEW ga_pageviews AS 
SELECT
  "date"
, "count"("totals"."pageviews") "pageviews"
FROM
  woman.type_ga_sessions CROSS JOIN UNNEST("hits") t (hit)
WHERE ("hit"."type" = 'PAGE')
GROUP BY "date"
```

# QuickSight
可視化のためQuickSightを使って可視化を行います
<img width="1139" alt="スクリーンショット 2019-11-15 19.05.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525769/ca9b3cc2-2dbf-b145-de02-1873957caa8e.png">

## 注意点
analyticsは360が対象です、360出ない場合はAPIで取得してS3にアップします（制限あり）
Athenaに取り込んだデータの型がstringなので、Glueのジョブで前処理をするか、QuickSigthの方でcastする必要があります

# まとめ
開発工数は１〜２人日、すごく手軽にできます。
費用面もbigqueryよりathenaの方が安いように感じます
サービス内で持っているコンテンツの情報も取り込んで、analyticsの情報とかけ合わせると面白い分析が出来ると思いました。
react-firebase-hooksを使ってみた（Firestore Hooks編）

## はじめに

[前回の記事](https://qiita.com/daishi/items/13379bbce59f275f1d0c)でreact-firebase-hooksのAuth Hooksを使ってみたのですが、今回はFirestore Hooksに挑戦したいと思います。

## react-firebase-hooks

リポジトリはこちらです。

<https://github.com/CSFrequency/react-firebase-hooks>

このライブラリは、4種類のAPIを提供しています。

- Auth Hooks
- Cloud Firestore Hooks
- Cloud Storage Hooks
- Realtime Database Hooks

今回対象とするのは2つ目のFirestore Hooksです。

## テストデータの作成

最初に、Firestoreのコンソールでコレクションといくつかのドキュメントを作成します。コレクション名はtodosとしました。

<img width="665" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63327/ae69db75-b681-5a01-e4d0-f6cbed4750fb.png">


## コーディング

### モジュールのimport

今回使うモジュールをimportします。

```javascript
import React, { useState } from "react";
import ReactDOM from "react-dom";

import firebase from "firebase";
import { useCollectionData } from "react-firebase-hooks/firestore";
```

### TodoListコンポーネント

todosコレクションを表示するコンポーネントを作ります。

```jsx
const TodoList = () => {
  const [values, loading, error] = useCollectionData(
    firebase.firestore().collection("todos"),
    { idField: "id" }
  );
  if (loading) {
    return <div>Loading...</div>;
  }
  if (error) {
    return <div>{`Error: ${error.message}`}</div>;
  }
  return (
    <ul>
      {values.map(value => (
        <li key={value.id}>{value.title}</li>
      ))}
    </ul>
  );
};
```

`idField`でidを取得するところがポイントです。

### NewTodoコンポーネント

todosコレクションに新たなドキュメントを追加するためのコンポーネントを作ります。

```jsx
const NewTodo = () => {
  const [title, setTitle] = useState("");
  const [pending, setPending] = useState(false);
  const add = async () => {
    setTitle("");
    setPending(true);
    try {
      await firebase
        .firestore()
        .collection("todos")
        .add({ title });
    } finally {
      setPending(false);
    }
  };
  return (
    <div>
      <input value={title} onChange={e => setTitle(e.target.value)} />
      <button type="button" onClick={add}>
        Add
      </button>
      {pending && "Pending..."}
    </div>
  );
};
```

エラー処理は省略しています。

### Appコンポーネント

最後に、全体をつなげるAppコンポーネントとReactDOMのrenderです。

```jsx
const App = () => {
  return (
    <div>
      <TodoList />
      <NewTodo />
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
```

## CodeSandbox

<https://codesandbox.io/s/wonderful-browser-zh0wc>

完成したものがこちらです、実際に動作させるためにはforkしてfirebaseConfigを置き換える必要がありますのでご注意ください。

<img width="195" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63327/7c3576e6-468c-cd49-ec12-386578be0bab.png">

## おわりに

Firestoreのリアルタイム更新とReact Hooksはとても相性がいいと感じました。ドキュメントを追加したら、すぐに更新されます。Firestoreのコンソールから追加しても同様です。

今回は、useCollectionDataを使いましたが、用意されているhooksはさらにあります。

- useCollection
- useCollectionOnce
- useCollectionData
- useCollectionDataOnce
- useDocument
- useDocumentOnce
- useDocumentData
- useDocumentDataOnce

Once系は一度だけの取得なのですが、その場合はhookがどれだけ役立つかは微妙です。callbackから使うことになることが多い気がします。また、Data系のhookはTypeScriptの型が付けられますが、ソースコード上は単にアサーションしているだけなので、予期せぬランタイムエラーが発生する可能性がありそうです。結局、独自の拡張をしようと思うとcustom hooksを作ることになりそうですが、その先に本ライブラリのhooksから合成できるかはやってみないと分からないといった感じになりそうです。
【複数のウィンドウでVScodeを開く！！】

# はじめに
関東の大学院の修士1年です。

最近，研究室内の大きめの発表が終わって少し時間ができたので，記事書こうと思います。

中間発表の原稿はvscode × texで初めて原稿書いてみました！texファイルをbuild, makeして，原稿がpdfとしてvscode上のタブに生成できた時は結構うれしかったです笑

でも，その時少し面倒だったのは，１つのウィンドウ上にtexファイルとpdfが存在していることです。

私はモニターがデュアルディスプレイなので，ウィンドウを2つ開いて作業することが多いのですが，1つのウィンドウ上にtexファイルとpdfがあると，何となく作業しずらかったです。

そこで別のウィンドウでvscodeを開こうとすると，どうやら同じフォルダは複数のウィンドウで開けないらしいです、、、。


# アウトプット
なので今回は
 **複数のウィンドウで同じフォルダを開く**
を目標にします。

最終的にはこんな感じです。
![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416435/0c5ad442-9552-2e79-2629-adb21b7f6c74.png)

# やること
実はそんなに難しくなかったです笑

vscodeは同じフォルダを同時に複数のウィンドウでは開けないですが，ワークスペースとしてなら，複数のウィンドウで開けるみたいです！

手順は以下の通りです

1.VScode上で，ctrl + k，ctrl + sでキーボードショートカットを開きます。
2.workbench.action.duplicateWorkspaceInNewWindow　とやらを探してきます
3.keybinding を設定します。今回はctrl + shift + n にしてます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416435/1d5b0014-614f-7fb7-f0a9-9570e2184320.png)

これだけです！

後は，texでpdfを別ウィンドウで生成したいときに，ctrl + shift + n 実行すれば，ワークスペースとして同じフォルダが開けます！

# おわりに
謎に前置きの方が長くなってすみません。
でもこれで，狭い思いをしながら，原稿を書くことはなくなりそうです！
またこれは、VScodeでtexを書くとき以外にも応用できそうです！
[Flutter] App bar の X ボタンを非表示にしたい

Modal 表示(`fullscreenDialog: true`)した時のScaffold の AppBar(Navigationbar みたいなの）の左側に出てくるCloseボタンを押せないように（非表示に）したかったので調べたメモです。

## AppBar の leading プロパティをいじる

`leading` プロパティがタイトル前に表示する widget だとドキュメントに書いてあったのでこれをセットします。

非表示にしたいので Container をセットすればOKです。

```
class PopupScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('title'),
        leading: Container(),
      ),
    ..
```

### Before
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27210/cb0b3d7c-086f-365f-1c10-2eb1ea25cab2.png)

### After
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27210/58f07870-d722-5715-7fcc-86a75deb930c.png)


## 参考
https://api.flutter.dev/flutter/material/AppBar/leading.html
【Unity】gameObjectのgameObject

# スクリプトからゲームオブジェクトを取得する
`gameObject`からアタッチしているゲームオブジェクトのインスタンスを取得することが可能（[リファレンス][1]）。
`MonoBehaviour`の継承が必要だがそもそもアタッチしている時点で継承する必要あり。

例えばCubeオブジェクトにスクリプトをアタッチしてデバッグログで`gameObject`を出力した場合。

```cs:SampleObject.cs
public class SampleObject : MonoBehaviour {

	private void Start () {
		Debug.Log(gameObject);
	}
}
```

```txt:Console
Cube (UnityEngine.GameObject)
UnityEngine.Debug:Log(Object)
```

こんなこと誰でも知ってるよね

# gameObjectのgameObject
`gameObject`は`GameObject`だが、`GameObject`も`gameObject`を持っている（下記参照）。

```cs:GameObject.cs
namespace UnityEngine
{
	[ExcludeFromPreset]
	[NativeHeaderAttribute("Runtime/Export/GameObject.bindings.h")]
	[UsedByNativeCodeAttribute]
	public sealed class GameObject : Object
	{
		...
		//
		// Summary:
		//     Scene that the GameObject is part of.
		public Scene scene { get; }
		public GameObject gameObject { get; }
		...
	}
}
```

つまり`gameObject.gameObject`みたいな書き方も可能。インスタンスも同じである。

```cs:SampleObject.cs
private void Start () {
	Debug.Log(gameObject.gameObject);
	Debug.Log(gameObject == gameObject.gameObject);
}
```

```txt:Console
Cube (UnityEngine.GameObject)
UnityEngine.Debug:Log(Object)

True
UnityEngine.Debug:Log(Object)
```

その気になれば`gameObject.gameObject.gameObject`なんて書くことも可能、たくさん繋げられる。

```cs:SampleObject.cs
private void Start () {
	Debug.Log(gameObject.gameObject.gameObject);
	Debug.Log(gameObject == gameObject.gameObject.gameObject);
}
```

```txt:Console
Cube (UnityEngine.GameObject)
UnityEngine.Debug:Log(Object)

True
UnityEngine.Debug:Log(Object)
```

何故こういう動きになるのか気になって調べてみたのですがあまり有力な情報は得られず。
何か知っている人がいたらコメント等で教えて下さい。

[1]:https://docs.unity3d.com/jp/460/ScriptReference/Component-gameObject.html
【Jest】GraphQLで定義したクエリがimportできない場合の対処法

## 現象
JestのテストでマウントしたVueコンポーネントの中で、Appolo Clientに読ませるためにファイルに保存したGraphQLクエリをimportすると以下のエラーが発生する

```bash
SyntaxError: Unexpected identifier

      113 | import Component from '~/plugins/nuxt-class-component'
    > 114 | import getDataGql from '~/apollo/queries/getData.graphql'
          | ^
      115 | import createDatasGql from '~/apollo/queries/createData.graphql'
      116 | import deleteDatasGql from '~/apollo/queries/deteleData.graphql'
      117 | import updateDatasGql from '~/apollo/queries/updateData.graphql'

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
      at Object.<anonymous> (pages/data.vue:114:1)
      at Object.<anonymous> (test/page/DataPage.spec.js:2:1)
```

## 対応

- [jest-transform-graphql](https://www.npmjs.com/package/jest-transform-graphql)を導入し、`jest.config.js`のtransformに設定を追記することで、マウントしたVueファイルでGraphQLクエリのimportが機能するようになる

```bash
yarn add -D jest-transform-graphql
```

```js:jest.config.js
module.exports = {
  setupFiles: ['<rootDir>/test/jest.setup.js'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1',
    '^~/(.*)$': '<rootDir>/$1'
  },
  transform: {
    '\\.(gql|graphql)$': 'jest-transform-graphql',  // add transform module
    '^.+\\.js$': 'babel-jest',
    '.*\\.(vue)$': 'vue-jest'
  },
  moduleFileExtensions: ['js', 'json', 'vue']
}
```

## 参考
- [SyntaxError: Unexpected token export · Issue #2134 · wallabyjs/public](https://github.com/wallabyjs/public/issues/2134)
ゆ、useEffectちゃん!初回に動かないで!

## TL;DR
~~よいしょ……よいしょ……~~
useEffect便利ですよね。
stateの変化を監視し、そのstateの**変化に伴うべき処理**の流れを一元管理できます。

```jsx
import React, { useState, useEffect } from 'react'
import ReactDOM from 'react-dom'

function Counter(props) {
  const [count, setCount] = useState(0)
  const [lastUpdatedAt, setLastUpdatedAt] = useState(null)

  useEffect(() => {// 『count』 が更新された際に、それに伴い必ず実行される
    setLastUpdatedAt(new Date().toString())
  }, [count]) 

  return (
    <div>
      <p>カウント {count} 回目</p>

      {/* 変な要件の機能だなぁ…🤔 */}
      <p>🎉最終カウントアップ日時🎉 {lastUpdatedAt || ''} </p>

      <p>
        <button onClick={() => setCount(count + 1)}>カウントアップ</button>
      </p>
    </div>
  )
}

ReactDOM.render(
  <Counter />,
  document.getElementById('root')
)
```

## かなしいところ
(上記例の様に)何も考えずそのまま使うと、**対象のstateが変更されているか否かに関わらず、初回レンダー時『にも』必ず動いてしまう。**

![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119363/290bcaf3-5ca8-4b7f-0844-1efb0f2f21a9.png)

カウントまだ1回もしてないのに「最終カウントアップ日時」出てんのおかしいﾀﾞﾙﾙｫﾝ!?~~(うるさいですね・・・)~~

## かいけつ
[useRef](https://ja.reactjs.org/docs/hooks-reference.html#useref)を使う。

```jsx
import React, { useState, useEffect, useRef } from 'react'
import ReactDOM from 'react-dom'

function Counter(props) {
  const [count, setCount] = useState(0)
  const [lastUpdatedAt, setLastUpdatedAt] = useState(null)

  const isFirstRender = useRef(false)

  useEffect(() => { // このeffectは初回レンダー時のみ呼ばれるeffect
    isFirstRender.current = true
  }, [])

  useEffect(() => {// 『count』 が更新された場合『と』初回レンダー時に動くeffect
    if(isFirstRender.current) { // 初回レンダー判定
      isFirstRender.current = false // もう初回レンダーじゃないよ代入
    } else {
      setLastUpdatedAt(new Date().toString())      
    }
  }, [count]) 

  return (
    <div>
      <p>カウント {count} 回目</p>

      <p>🎉最終カウントアップ日時🎉 {lastUpdatedAt || ''} </p>

      <p>
        <button onClick={() => setCount(count + 1)}>カウントアップ</button>
      </p>
    </div>
  )
}

ReactDOM.render(
  <Counter />,
  document.getElementById('root')
)
```

かつてのクラスコンポーネントで言う所の「componentDidUpdate」と似た働きが期待出来ます。

## けつろん
~~結果オーライ！　終わり~~やっぱりReactはたのしい。以上。
PHP Swoole学習メモ書き

PHPに非同期処理を提供してくれるSwooleプラグインについての学習メモ。
主に自分向けだけど、誰かの役に立つかもしれないので公開しておく。

# About Swoole
PHPプラグイン。Peclで入れる模様。
いろんなモジュールがある。 https://www.swoole.co.uk/docs/module
TCP, UDP, UnixSocket, HTTP, WebSocket, Redisなど。 Clientも提供している。 Http/2 Clientもあるのか。
Linux Process Manager,  Async File IO, etcなども。

MySQL, Redis Clientもあるな。 mysqlnd, mysqliの置き換えとして動くらしいから、 PHP -> C -> MySQL の全部を担当してくれるのか。


## Install
Pecl, はmacOSだけになったらしい。Source落として自分でビルドしろと…
試したいだけならDockerfileのサンプルが用意されてるっぽい。Docker Hubに上がってないのかな？
https://www.swoole.co.uk/docs/get-started/try-docker


## Server

調べることがあったら書く。
今のところphp-fpmの置き換えをしたいとは思っていないので後回し。


## EventLoop
https://www.swoole.co.uk/docs/modules/swoole-event-loop
イベント駆動の処理を書けるのかな？サンプルだとSocket接続してstream処理のようなことをしてるように見える。

KafkaみたいなメッセージングツールのSubscriberをPHPで書きやすくなる…？


# Coroutine
どこかのバージョンからSwooleパッケージから切り出されたっぽい。

GoのChannel相当のものもあって、ネット上のサンプルコードだとこれをよく見る気がする。 `go()` で非同期処理が開始されたりdefer関数を呼んでたりでだいぶGoを意識してそう。
と思ったら `go() + Swoole\Event::wait()` のパターンはdeprecatedになっている。`Coroutine\run`で置き換えられたのかな。
この辺がCoroutineとして切り出されたからこっち使ってね、的なことなのかな。
しかし4.4.0-alpha版で試したら`Coroutine\Run`が無いと言われてしまった。サンプルが壊れてんのかな。


# 所感
Serverとか TCP/UDP, WebSocket接続, Stream, プロセスやメモリ管理のようなPHPが隠蔽してくれるおかげで触らなくて(理解しなくて)済んでる低レイヤーを露出させてますね。ハイパフォーマンスなアプリケーションを作ろうと思うとこの辺の知識がどうしても必要になるということをPHPエンジニアに突きつける感じでいいですね。そんなにパフォーマンスが必要なものにPHPを使うのかというのはまぁそれはそれで。
冬到来! SwiftShader を使い人類史上最速で Vulkan プログラミングをはじめよう!

冬到来!

冬はこたつでぬくぬくと Vulkan プログラミング始めたいですね. 

やりましょう!

SwiftShader 使えば Vulkan 対応 GPU がなくても CPU でうごくよ.

## 動作環境

* Ubuntu 18.04
* Windows, macOS でも動くはず(未検証)
* Raspberry Pi 4(aarch64) などでも動くはず

## 必要なライブラリ 

* C++11 compiler
* git, cmake
* SwiftShader Vulkan(Vulkan の CPU 実装. シェーダ実行部分(LLVM)も含まれているはず)
* Vulkan-Loader(ベンダーごとの Vulkan ドライバのロードや管理を楽(?)にするライブラリ)
  * Vulkan-Headers https://github.com/KhronosGroup/Vulkan-Headers (Vulkan-Loader をコンパイルするのに必要)
   
### SwiftShader について

SwiftShader の Software Vulkan 実装で自前 Vulkan アプリを作る準備(Linux)
https://qiita.com/syoyo/items/17a74b6809ebf1577ce7

### Vulkan-Loader について

Vulkan のドライバロードなどを楽(?)にするものです. 必須ではないのですが, 基本的に使ったほうが便利なので使いましょう.

## とりあえず動かすサンプルコード

Vulkan minimal compute を Vulkan-Loader 対応し, swiftshader や vulkan ヘッダーファイルも git sbumodule で一式取ってくる self-contained なのを作りました.
(LunarG Vulkan SDK のインストールは不要です)

https://github.com/syoyo/vulkan_minimal_compute

`swiftshader` branch です.

```
$ git submodule update --init --recursive
$ ./scripts/bootstrap-linux.sh
$ cd build
$ make
```

SwiftShader(+ シェーダコンパイラ)も一緒にビルドするので, 時間かかります.

バイナリができたら,  `Linux` に `libvk_swiftshader.so`(Vulkan 実装), `vk_swiftshader_icd.json`(Vulkan-Loader 用設定ファイル)もできているはずです.

`VK_ICD_FILENAMES` 環境変数で, vk_swiftshader_icd.json のパスを指定します.

```
export VK_ICD_FILENAMES=vk_swiftshader.json
```

としてからアプリを実行します.

Windows だと `set VK_ICD_FILENAMES=...` かな?

実行するとマンデルブロー描画されるはずだよ!

## Vulkan プログラミングの情報

* Sascha 先生 https://github.com/SaschaWillems/Vulkan
* Vulkan Programming Series(日本語) https://blog.techlab-xe.net/vulkan-programming-books/
* Vulkan Tutorial https://vulkan-tutorial.com/

## 発展

NVIDIA や AMD の GPU 積んで Vulkan ドライバが入っていれば, コード(バイナリ)はそのままで GPU で動くはずだよ! 試してみよう!

Vulkan 対応 GPU 持っていない優秀な小学生さまにおかれましては, GPU をクリスマスプレゼントとしておねだりしようね
(NVIDIA Jetson という手もあるよ! > https://developer.nvidia.com/embedded/vulkan)
(Switch で Vulkan プログラミングという奥の手があるかもだけど, 18 才以上じゃないと開発者申請できなくてぴえん 😢 https://developer.nintendo.com/ja/home )


## TODO

* [ ] シェーダのコンパイルについて記載する
* [ ] 画面を出すサンプルを作る
* [ ] 優秀な若人さまが, **SwiftShader を使い人類史上最速で優秀な Vukan 若人さまへ昇華なされるスキーム**を確立する旅に出たい
Vee-validate3を使って、子コンポーネントのエラーを親コンポーネントで表示する

## 概要
vee-validate3系で親子コンポーネントのvalidationを試してみたらすごい簡単だったのでざっと紹介
サンプルコードはtypescriptになってます

## 使ったもの
* Nuxt 2.8.1
* vee-validate 3.0.3

## サンプルコード

#### 設定ファイル

```plugins/veeValidate.ts
import Vue from 'vue';
import { ValidationObserver, ValidationProvider, localize, extend } from 'vee-validate';
import ja from 'vee-validate/dist/locale/ja.json';
import { required, max } from 'vee-validate/dist/rules';

Vue.component('ValidationProvider', ValidationProvider);
Vue.component('ValidationObserver', ValidationObserver);

extend('required', { ...required });
extend('max', { ...max });

localize('ja', ja);
```


#### 親コンポーネント
`<validation-observer>` を使ってcomponentを囲むだけ
`v-slot` に子コンポーネントのメッセージや、`valid`かどうかなどを取得できます

```pages/test.vue
<template>
  <div class="newPost">
    <validation-observer v-slot="{ invalid, errors }">
      <template v-if="invalid">
        <div v-for="(error, i) in errors['test']" :key="`error${i}`">
          <p>{{ error }}</p>
        </div>
      </template>
      <test-form />
    </validation-observer>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { ValidationObserver } from 'vee-validate';

import TestForm from '~/components/TestForm.vue';

@Component({
  components: {
    TestForm
  }
})
export default class Test extends Vue {}
</script>
```

#### 子コンポーネント

`<validation-provider>`で囲む

```components/TestForm.vue
<template>
  <div class="test-form">
    <validation-provider vid="test" name="メッセージ" rules="required|max:10">
      <textarea v-model="message" />
    </validation-provider>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { ValidationProvider } from 'vee-validate';

@Component
export default class TestForm extends Vue {
  message: string = '';
}
</script>
```
`vid`を指定することで親コンポーネントでkeyとしてerrorsを判定できる

```
errors: {
  test: ['error message1', 'error message2']
}
```

これだけで完了です！
初学者にとってなんだかんだVScodeは最強じゃね？って思う理由3選

# はじめに
vim, nano, emacs, xcode …　コードエディタって色々ありますよね。
私も色々使っています。
大学の授業ではemacs使え！って言われてたし、研究ではみんな使ってるからという理由でatomだし、プライベートではVScodeだし…みたいな。

そんな謎の使い分けをしている人間ですが、今日は色々使ってきた中で

**「VScodeってなんか色々便利な機能あるし、初心者にもわかりやすいし、実は最強エディタなんじゃね！？！？」**


と思ったので、その理由を書いていこうと思います。


# VScodeってそもそも何やねん!
早速理由を説明しよう…と思ったのですが、

**「さっきからぶいえすこーどぶいえすこーどってなんやねん!~~説明してくれんとぶっ飛ばすやで!~~」**

という方がいたら困るので、ちょこっとだけ説明します。

Visual Studio Code(略してVScode)は、Microsoftが提供する**テキストエディタ**のこと。(←ココ重要)

macでもwindowsでもlinuxでも使えるというMicrosoftにしては珍しくマルチプラットフォームで動くという有能っぷり。

MicrosoftのHPを覗くと、どうやらAzureを用いた開発に使ってほしそうな感じがしますね。
もちろん、使える言語は数多ある。

そんなわけで、VScodeのいいところ、書いていきます

# その1　は？　軽すぎません？？？

はい、とにかく軽いです。

自分が研究で使っているAtomなんかより起動速度は体感1/4くらいです。（Atomが重すぎるのもあるけど）

CUIで動くようなエディタにはさすがにかないませんが、GUIで表示できる~~色とりどりでコード補完機能が異様にある系の~~エディタでは最速ではないでしょうか。

#その2　拡張機能が便利すぎて感動する

拡張機能ありすぎて、IDE(統合開発環境)に近いものが作れます。

拡張機能をインストールするのも、スマホでアプリを入れる感覚でできます。

ちょこっと書いてなんとなく動くか確かめたいだけなら、わざわざターミナルを起動させる必要がありません。すべてVScode上で完結します。

例えば、サーバーを立ち上げないと確認できないものでも、Live Serverという拡張機能をインストールすれば、ボタン一つでサーバーが立ち上がります。

他にも、Code Runnerという拡張機能を使えば、実行したいコードを選択するだけで選択部分の実行結果が見えたり…と、便利機能が盛りだくさんです。

私もまだまだ使いこなせていない機能がたくさんあります。

#その3　コマンドいらず

プログラミングを初めて学ぶ人やPCの知識があまりない人にとって、コマンド操作ほど覚えにくいものってないですよね。(多分)
もっと言うと、CUI自体に拒絶反応を起こす人もいるかもしれません。

コマンド操作を(ほぼ)必要とせず、UIが非常に分かりやすく優秀、というのが何より一番最強じゃね？って思う理由です。

vimやemacsなど、エディタには初心者にはとっつきにくく、敷居が高いものが多いような気がします。

コマンドなんかはゆくゆく覚えていけばいいのです。最初のうちはプログラミング言語により多くのリソースを割くのがいいのではないかな、と私は思います。

# おわりに

VScodeと他のエディタとの比較をまとめると、

| 比較項目      |    比較結果    |
|:-----------------:|:------------------:|
| 軽量性           | Atom < VScode < vim,emacs |
| 拡張性           | Atom = VScode < vim,emacs |    
| ユーザビリティ    | vim < emacs < Atom = VScode |  

総合評価で見事VScodeの勝利です。

<br>
初心者ながらにVScode最強説を立証したつもりです。

これを見てVScodeインストールしたくなってきた…！という方は下記のリンクへどうぞ。

[windows版](https://qiita.com/psychoroid/items/7d85ae6bade4a67aedb1)
[mac版](https://qiita.com/watamura/items/51c70fbb848e5f956fd6)
[linux版](https://qiita.com/yoshiyasu1111/items/e21a77ed68b52cb5f7c8)


### 参考文献

https://gabekore.org/vscode-c-windows
https://www.bloguchi.info/1282