OmniAICreator/Qiita-1.07M huggingface dataset:
Maplat Coreでマーカーの画像を変更する（レイヤー単位）

Maplat Advent Calendar 9日目は、Maplat Coreでマーカーの画像を変更する方法（レイヤー単位）です。
今日の動くものはここで確認できます。 => [CodeSandBox Maplat Advent Calendar day 9](https://codesandbox.io/s/maplat-advent-calendar-day9-6xicz)

今日の変更は簡単です。
昨日`pois/poi.json`に追加した`icon`および`selected_icon`の、設定場所を動かしてみましょう。
各POI単位の設定の下に追加していたのを、レイヤー設定の下での追加に動かしています。

```pois/poi.json
{
  "main": {
    "pois": [
      {
        "id": "castle",
        "lat": 36.243881,
        "lng": 139.543517,
        "name": "館林城"
      },
      {
        "id": "shrine",
        "lat": 36.25163,
        "lng": 139.528562,
        "name": "愛宕神社"
      }
    ],
    "icon": "parts/blue_marker.png",
    "selected_icon": "parts/red_marker.png"
  }
}
```

これで、レイヤーに属するPOIピン全体のマーカー画像が切り替わります。

明日の話題は未定です。さて、そろそろ苦しくなってきた。何にしよう...。
RでClipboardにコピーする方法

#Clipbordへのコピー
会社で案外知らない人がいることを知ったので、こちらでも共有

`write.table(table, "clipboard", sep = "\t")`

これでクリップボードにコピーできるので、エクセルへ`ctrl + v`で貼り付けられます！

例えばこんなかんじに

```
#下記のデータがあった場合に、、、
> table
   unit price freq temp
1     1     1    4    5
2     5     2    3    2
3     2     3    5    2
4     4     4    2    4
5     2     1    4    5
6     4     2    6    7
7     4     3    4    6
8     3     4    7    2
9     5     1    5    4
10    2     2    6    3
11    4     3    7    6
12    5     4    6    7
13    4     1    5    5
14    2     2    2    4
15    5     3    6    2
16    4     4    4    3

> write.table(table, "clipboard", sep ="\t", row.names = FALSE)
```

これでコピーされたので、エクセルの`ctrl + v`で貼り付けできます。

（貼り付けたところのキャプチャー）
![Untitled.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324506/41520406-8bdf-c907-c9ca-9580f109c90f.jpeg)



#はてなブログもはじめました
良ければこちらも見ていただけると喜びます。
ゆくゆくはコード以外の雑多なことははてなブログに記載しようかな思ってます。
https://data-analy.hatenablog.com/
【Unity】無料アセット「CSV Serializer」を使ってスプレッドシートでマスタデータ管理

プロトタイプ作成に便利そうなアセット「CSV Serializer」の使い方の紹介


[<img width="469" alt="2019-12-09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156809/a2a09c93-fb65-2436-a028-fb5582cd4457.png">](https://assetstore.unity.com/packages/tools/integration/csv-serialize-135763)

簡単に説明すると。CSVを簡単にC#クラスにパースしてくれるアセット
スプレッドシートもCSV形式でダウンロードすればすごく簡単にUnityに持ってこれる

### 1.データクラスを用意
てきとうにスプレッドシートで管理したいデータクラスを作る

```csharp
public class Enemy
{
    public int id;
    public string name;
    public int hitPoint;
    public int power;
    public int defence;
}
```

### 2.対応するスプレッドシートのシートを用意

てきとうにデータの中身も用意する
<img width="568" alt="2019-12-09 (1).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156809/4520f625-285c-1127-ecee-d01c002c496d.png">

これをCSV形式でダウンロードできるように公開設定する
・「ファイル」 →「ウェブに公開」
・シートの指定をさっき作ったシートにし、形式を「カンマ区切り　(.csv)」にして公開。表示されるURLをコピー

<img width="267" alt="2019-12-09 (3).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156809/53c2be57-74cd-9851-a0ac-cb30a4245144.png">

<img width="431" alt="2019-12-09 (2).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156809/724341a3-a891-5309-8cb9-7c9cc24e4af6.png">

### 3.ダウンロード＆デシリアライズ処理を書く

```csharp
Enemy[] enemyData;
IEnumerator DownloadAndDeserialize ()
{
    string url = "さっきコピーしたURL";
    UnityWebRequest request = UnityWebRequest.Get (url);
    yield return request.SendWebRequest ();
    enemyData = CSVSerializer.Deserialize<Enemy> (request.downloadHandler.text);
}
```

データクラスをScriptableObjectとかにしておけば開発中はスプレッドシート、製品版はアプリ内に埋め込み、とかも簡単にできる。便利！
ラインみたいなwebアップリケーションを作ろう！！　１日目

#はじめに

この記事は、2019/11/1からプログラミング学習を始めた学生がプロのプログラマーになるまでのアウトプットする為の書き込みの場である。

#手順
１、htmlのクラス名を決める

ポイント1 ：　紙に書き出して全体像を掴みながら決める
ポイント2 ：　BEMのルールに従ってクラス名を決める

２、画面設計　


#学んだ事

- **初めは、全体を書く**

```hello.haml
!!! 
%html
  %head
  %body
```
```hello.sass
.html{
  background-color: #ffffff;
  color: black;
}
```
と記入！！！

- **並べ方(flax box)**
 - justify-content: center;
 - display:flex;　
 
今回は上記の二つを使いましたが、他にも色々使い方があります
flex boxはwebサイトを作成する際に必ず使う要素の一つと思います

- **haml要素**

- i要素
 - i 要素は、その文章内で定義されていないものを表すときに使われます
 - 他とは質が異なるテキストを表すものです
- p要素
 - p 要素は、文書における人まとまりのこと
- ul要素
 - ul 要素は順不同リストを表します
 - 順不同リストとは、項目の順序に意味ががない、箇条書きのことです
 - ulを使うとき必ず子要素は、liになります
- a要素
 - a要素となるタグで囲った文章をリンクにすることができます。
 - クリックすると特定のページに遷移するように設定できます。
 - aタグのhref属性に対して、遷移させたいページのURLを指定します

#感想
haml,sassでの記述が難しい
慣れれば、もっと素早く記述できると思いますが、今は、数をこなすのみですね
経験が浅い分時間が、かかりそうです
関係ない話なんですが、『NOKIA復活の軌跡』を読んだ感想
NOKIAは、携帯電話シェア世界topであったが、時代の流れに乗れず、スマートフォンの普及により携帯電話のシェアを奪われって停滞していきました。
これは、個人事業主を目指している私にも、当てはまることで、個人事業主の場合、時代の変化に、敏感でないと突然仕事がなくなる可能性があります。
情報収集能力・行動力・時代の流れに合わせる能力・時代を先読みする能力はフリーランスで生きていく上で大事だと思いました。


##終わりに

もっとこうした方が良いよなどご指摘頂けると幸いです
Unityでスクリプトのビルドが走らなくなった時はAuto Refreshを確認すること

# ある日突然、スクリプトを保存してもビルドされなくなった

いつものようにスクリプトを編集、保存、Unityエディタに切り替えると走るはずの自動ビルドが走らない。
編集したスクリプトをProjectでクリックしてInspectorを確認しても、古いまま。
仕方ないので右クリックしてReimportをするとビルドが走る。

不便なので色々なキーワード、「Unity」「ビルド」「自動」「Import」などで検索してみても、まぁ大体Jenkinsとかの記事が出てくるばかりで。。

数日不便なまま過ごした挙句、結局詳しい方に教えていただいた。

# 原因はAuto Refreshのチェックボックス

原因は、PreferencesのGeneralの先頭にある、Auto Refresh のチェックボックスが外れていた事。

![autorefresh.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102758/88b5e0f3-456b-bf8e-223c-eb7e2f24eaa1.png)

まったく覚えはないけれど、多分Preferencesにフォーカスを移そうとした時に、クリックしてチェックを外してしまったのだと思われる。


同じような事態に陥ってしまった人のために、、、記録として残しておきます。

# 参考
- [【Unity】Monoで保存したスクリプトがUnity側で自動で更新されなくなった](https://www.jonki.net/entry/20140201/1391233768)
three.jsで一筆書きのlineを作る

# 作ったもの
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">アイディアを考え中 🤔💡<a href="https://twitter.com/hashtag/webgl?src=hash&amp;ref_src=twsrc%5Etfw">#webgl</a> <a href="https://twitter.com/hashtag/threejs?src=hash&amp;ref_src=twsrc%5Etfw">#threejs</a> <a href="https://t.co/o3sWjJXNkj">pic.twitter.com/o3sWjJXNkj</a></p>&mdash; yukidoke (@snowdoke) <a href="https://twitter.com/snowdoke/status/971336204581916672?ref_src=twsrc%5Etfw">March 7, 2018</a></blockquote>

[一筆書きlineのリンク](http://gl.matrix.jp/line/)

# 初めに
[Three.js Advent Calendar 2019](https://qiita.com/advent-calendar/2019/threejs)の10日目の記事です。

今回、ご紹介するのはSVGをJSONに変換して、一筆書きのlineを作ろうというものです。

少し古くなってしまうのですが、
three.js r92
blender 2.79
を使用しています。

まず、blenderでSVGをインポートします。
ファイル > インポート > .svg

その際、インポートしたSVGはカーブになっていますので、SVGを選択した状態でAlt + Cを押して、メッシュに変換してください。

次は、インポートしたSVGをJSONにエクスポートします。
ファイル > エクスポート > .json
デフォルトでは、JSONのエクスポートはないため、アドオンを追加する必要があり、こちらの記事が参考になります。

[3Dデータ(Blender)をThree.jsで表示するまでの方法](https://liginc.co.jp/331430)

JSONをエクスポートする際のオプションですが今回は頂点情報のみを使用するので、
Geometry
タイプ: geometry
index Buffer: なし
エクスポートするもの **頂点**にのみチェックを入れる、でやっています。

# コード
頂点座標を配列に追加する関数を書きます。

```javascript
function addVertexBuffer(geometry, index, x, y, z){
	var index = index*3;
	var array = geometry.attributes.position.array;
	array[index]   = x;
	array[index+1] = y;
	array[index+2] = z;
};
```

描くlineの設定を書きます。

```javascript
function drawDynamicLine(){
    var geometry = new THREE.BufferGeometry();

	// JSONの読み込み
  	var request = new XMLHttpRequest();
  	request.open("GET", "think.json", false);
  	request.send(null);
  	var json_l = JSON.parse(request.responseText);

	var positions = new Float32Array(maxpoints * 3);
	geometry.addAttribute('position', new THREE.BufferAttribute(positions, 3));

	var material = new THREE.LineBasicMaterial({color: 0xffd700});

	var line = new THREE.Line(geometry, material);

  	var points = new Float32Array(json_l["vertices"]);

	for(var i=0; i<maxpoints; i++){
		var x = points[i*3+0];
		var y = points[i*3+1];
		var z = points[i*3+2];
		addVertexBuffer(line.geometry, i, x, y, z);
	}
	line.position.z = 0.3;
	scene.add(line);
}
```

繰り返す関数を書きます。

```javascript
function animate() {
	line.geometry.setDrawRange( 0, drawCount );

	if(drawCount > maxpoints) drawCount = maxpoints;
	drawCount += 2;

	line.geometry.attributes.position.needsUpdate = true;

	requestAnimationFrame(animate);
	renderer.render(scene, camera);
}
```

Sceneなどを設定します。

```javascript
function setup() {
    scene = new THREE.Scene();

	camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 100);

	var ambientLight = new THREE.AmbientLight(0xffffff);
	scene.add(ambientLight);

	var directionalLight = new THREE.DirectionalLight(0xffffff);
	directionalLight.position.set(1, 1, 1).normalize();
	scene.add(directionalLight);

	renderer = new THREE.WebGLRenderer();
	renderer.setSize(window.innerWidth, window.innerHeight);
	document.body.appendChild(renderer.domElement);

	drawDynamicLine();
}

setup();
animate();
```

# 最後に
個人の感想ですが、lineが時間の経過とともに描かれていくのは、とても面白いです。
僕が作ったものでは、lineがZ軸上は移動していないので、Z軸も移動させるとまた違うものができてくると思います。
Notionでリンクブロックを作る

[アルプ株式会社](https://thealp.co.jp/)でエンジニアをしています、集約のエンティティ@pictinyです。
これは[Notion Advent Calendar 2019](https://qiita.com/advent-calendar/2019/notion) 9日目のエントリです。
8日目は[Notionには3つのコメントがある](https://qiita.com/pictiny/items/8bef45e801b90a2989fe)でした。

# リンクブロック
Notionのページ内に、Notionのページへのリンクテキストを貼り付けるとメニューが表示されます。
`Link to Page`を押すとリンクが作成されます。

<img width="414" alt="リンク1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427952/43da77ae-da57-a304-ab8e-85df5633c792.png">

`Link to Page`で作成されたリンクは、アイコンとページタイトルが使われます。

<img width="247" alt="リンク2" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427952/1e459b51-f3e3-fa01-b0be-95321b725fc8.png">

また、スラッシュコマンドでもリンクを作成することができます。

<img width="396" alt="リンク3" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427952/d0b75ad4-323a-3e08-6d88-e9f4374e884c.png">

# まとめ
公式ドキュメントは[Link to pages & blocks](https://www.notion.so/Link-to-pages-blocks-cb3c406403c940b68af52de121e05474)にありますので、そちらもご覧ください。
Vuetify公式ドキュメントの読み方

[ラクス Advent Calendar 2019](https://qiita.com/advent-calendar/2019/rakus) 9日目担当、新卒2年目@choreiです。~~滑り込み投稿。。。~~

## はじめに

現在関わっているプロジェクト（1年足らず）では、フロントエンドで[Vue.js](https://jp.vuejs.org/index.html)と[Vuetify.js](https://vuetifyjs.com/ja/)を使用しています。基本的にはVuetifyのコンポーネントやマテリアルデザインを使用しつつ、必要に応じてスタイルを調節したりしています。要望通りのデザインを実現するために情報を手探りで調べていかなければならないことも多いです。

プログラミングに限らずですが、自分は生来のめんどくさがりです。ゲームであれば取り扱い説明書は読みませんし、参考書や技術書を読む際も前書きなどは飛ばしがちです。Vuetifyも最初は公式ドキュメントをあまり見ずに、とりあえずやってみるの精神で試行錯誤を重ねてました。

そんな中、何度かつまみ食いで公式ドキュメントを見ているうちに、「あれ？ これ公式ドキュメントさえちゃんと読めばもっと効率良く実装できたんじゃ。。。」と思うようになり、今では困ったことがあれば真っ先に公式ドキュメントを読むことにしていますし、ちょっとした読み物感覚で読むことも多くなりました。

今回は、`Vuetify`（ここ重要）の公式ドキュメントを読む理由と、よく読む場所、早めに読んで置きたかった場所などをまとめます。

## 公式ドキュメントを読む理由

[Vuetify公式ドキュメント](https://v15.vuetifyjs.com/en/getting-started/quick-start)

公式ドキュメントを読むようになった理由は主に以下の2点です。

1. 自分と同じ実装で悩んでいる情報が世に転がっていない
2. 公式ドキュメントにコンポーネントの使い方やスタイルの当て方などが細かく書いている（よく読めば）

### 情報が世に転がっていない

自分が悩んでいることに対しての似たような体験談が全く見当たらないです。これがJavaのロジックの書き方であれば、「〇〇　実装方法」みたいにググれば、参考にできそうな情報がいくらかヒットすると思います。

今思えば、Vuetify自体わりと新しいライブラリですし、たとえ情報が多くあったとしても、ロジックに比べ個々人が求めているものが違うために中々参考にしやすい情報がでてこなかったのだと思っています。

### 公式ドキュメントに細かく書いている

よく読み込めばどこかしらに情報が載っています。。。個々のコンポーネントの使い方は必要に応じて確認していましたが、それ以外の細かい情報も多く掲載されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308848/5ce61fc6-ffdb-d76a-e197-feb0d9daf3bc.png)

ただ、画像にも載せている通り項目が多く（まだ下に続きます）、どこになんの情報があるのかがわかりづらいです。自分みたいに「全部読んでられるかー！！」と最初になるタイプだと後々読んでみようとなるまでのハードルが中々高いものがあります。（ちなみに私は英語も苦手なのでさらに拍車をかけています）

その分情報はほぼ揃っており、コンポーネントに関しても使えるpropsやその使用例も網羅されていて公式ドキュメントを読むだけで何ができるのかがわかるようになっています。（その分できないことも明確にわかってしまいますが）

例：[テキストフィールド](https://v15.vuetifyjs.com/ja/components/text-fields)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308848/87efa315-94a1-ea75-c3f4-844cfa50c321.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308848/be09cc9c-85f2-e31e-9ea5-93e8059bb446.png)

## 公式ドキュメントの情報

公式ドキュメントを読む理由を説明したところで、スタイルまわりでもっと早めに知っておけばよかったと思っていることを羅列していこうと思います。

### カラースタイル

https://v15.vuetifyjs.com/ja/framework/colors
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308848/c47178fc-52d1-1360-e5c9-627e6f6c9808.png)

20種類のベースとなる色と明暗をclassで指定でき、独自にCSSを定義しなくても結構な種類の色を表すことができます。（最初は勘で色の名前を書いてスタイルをあてていました）

### スペーシング（余白）

https://v15.vuetifyjs.com/ja/framework/spacing
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308848/1365a227-f78b-d032-569b-e0639476188d.png)

paddingやmarginも独自のclassで定義されています。最初は`pa-0`（padding: 0）が何を指し示しているのか全くわかりませんでした。余白の付け方などいくらでも情報が転がっていそうですが、やはりこれも公式以外でまとめて紹介しているところをほとんど見たことがないです。（公式がまとまっているからだとは思いますが）

### タイポグラフィー

https://v15.vuetifyjs.com/ja/framework/typography
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308848/27828d45-642c-605b-eec6-3cd182b9676f.png)

文字の大きさや幅、書式を変更することができます。自分ではあまり使い道を思いつきませんが、文字をアッパーケースにする`.text-uppercase`などもあり読んでいるだけで中々おもしろいです。

## おわり

Vuetify公式ドキュメントの利点と読み方を簡単にまとめました。ドキュメントを読むことに苦手意識のある方やVuetifyの書き方に詰まった時にどうすればいいかわからない人の助けになれば幸いです。
emacs撲滅運動

最近
/etc/sysconfig/network-script/ifcfg-eth0~
というファイルを見つけてドタマに来た、神谷です。
「現行で動いているの居だから、余計な事をするな」がお客様の基本方針。
あっそ、ifcfg-eth0だけを書き換えました。後はしーらねっと。

ちなみにOSは
/etc/sysconfig/network-script/ifcfg-eth*
を全て見る設定なので、ifcfg-eth0～も見るという事です。

実害は無さそうですが、emacs使うやつに「ばーか、ばーか！」と言ってみてもいいかも知れません。
【Python】クラス変数と__init__ってどっちが最初に実行されるの？

pythonを書いていてふと思いました。
「クラス変数と\_\_init\_\_はどっちが先に実行されるんだ？？？」  
深掘りはしません。小ネタです。
最後まで読むにはもったいないくらいの小ネタなので最初に結果書いちゃいます。

#結果
最初にクラス変数の処理が行われ、その後に\_\_init\_\_が実行されます。

#検証
クラス変数と\_\_init\_\_にそれぞれprint()を書きます。その実行結果からどちらが先に表示されたかを確認します。

```python:test.py
class main:

    s = 'クラス変数が定義されました。'
    print(s)

    def __init__(self):
        s = '__init__が実行されました。'
        print(s)

if __name__ == '__main__':
    main()
```

```terminal:結果
$ python test.py
クラス変数が定義されました。
__init__が実行されました。
```

先にクラス変数が実行され、その後に\_\_init\_\_が実行されています。
では、次は\_\_init\_\_の下にクラス変数を定義してみましょう。コードは汚くなりますが検証なので...

```python:test.py
class main:

    def __init__(self):
        s = '__init__が実行されました。'
        print(s)

    s = 'クラス変数が定義されました。'
    print(s)


if __name__ == '__main__':
    main()
```

```terminal:結果
$ python test.py
クラス変数が定義されました。
__init__が実行されました。
```

結果は変わっていません。どちらを上に書いても必ずクラス変数から実行されることがわかりました。
それだけです。

#追記
コメントで
>main()を呼ばずに実行してみてください。
>面白い結果になりますよ。

と頂き、やってみたところクラス変数の部分のみ実行されました。わかりやすく説明をして頂いたのでコメントを参照してください。クラスを実行しなくともクラス内やメソッド内の処理が参照できることがわかると思います。  
一生初心者から抜け出せません。でも楽しいです。
RxFirebaseでRxJava + Firebaseを手軽に始める

# はじめに
RxJavaを簡単な例(OkHttpとか)で触っているうちは、OkHttpやその補助ライブラリで容易にRx化できるかと思います。
ただし、いざ、自分で他のライブラリと組み合わせて書いていこうとすると、辛い部分が多く存在します。

特に、Firebaseと組み合わせようとすると、RxJavaに慣れていないうちは

* `どう書けばいいかがわからないこと`
* `記事が圧倒的に少ない`

ためにつらい思いをすると思います。

(たとえば[こちらの記事](https://qiita.com/oogatta/items/4802f521135c3eb2c6fc)にのっています)

# そこで
[RxFirebase](https://github.com/FrangSierra/RxFirebase)というライブラリを使うことで
簡単にRxJava+Firebaseを始めることができます。

# 実際に使ってみる
ここからは実際のプロジェクトでの使用方法を説明していきます。
また、Firebaseなどの呼び出しはモジュールとして切り出している例を紹介します。

## インストール方法
[RxFirebase](https://github.com/FrangSierra/RxFirebase)のREADMEに書いている通りに導入していきます。

```build.gradle
dependencies {
  compile 'com.github.FrangSierra:RxFirebase:1.5.6'
}
```

```build.gradle
allprojects {
    repositories {
        ...
        maven { url "https://jitpack.io" }
    }
}
```

## FirebaseAuthの場合
今回は単純なemailでの認証を考えます。

```FirebaseAuthService.kt
object FirebaseAuthService: AuthService {
    val auth: FirebaseAuth
    init {
        auth = FirebaseAuth.getInstance()
    }
    override fun signIn(email: String, password: String): Maybe<AuthResult?> {
        return RxFirebaseAuth.signInWithEmailAndPassword(auth, email, password)
    }
}
```
例えば、emailでのシンプルな認証の場合、RxFirebaseが用意しているメソッド`signInWithEmailAndPassword`に
`Firebase`のインスタンスを噛ませるだけでできます。

これをもし、自分でやる場合は、自分でSingleやObservableを作ったりと、なれていないとわかりづらいところが多々あります。

あとは、Observerを加えるだけですが、MainActivityで呼び出したりするとき

```MainActivity.kt
FirebaseAuthService.signIn(email, password)
    .subscribeOn(Schedulers.io())
    .observeOn(AndroidSchedulers.mainThread())
        .subscribe(object : MaybeObserver<AuthResult?> {
            override fun onSuccess(t: AuthResult) {
               // うまくいったときー
            }
            override fun onComplete() {
              // 完了したときー
            }
            override fun onSubscribe(d: Disposable) {
              // こうどくしはじめたときー
            }
            override fun onError(e: Throwable) {
              // エラーがでちゃったとき
            }
        })
```
というふうに呼び出してやるだけで簡単に使えます。

# 最後に
最近のAndroid開発ではRxJavaがよく出てきますがとっつきづらい部分が多々あると思います。
今回のように、RxFirebaseを用いることで、初心者にとって実装が難しい部分をライブラリに任せるながら
FirebaseとRxJavaを利用することができるため、「ちょっとRxJavaをさわってみようかな」といった方には
ベターな選択肢だと思います。

また、今回のようにサービス層側の実装をきれいに書いてあげることで、
RxJavaに慣れてからRxFirebaseに依存しないものに置き換えることも簡単であり、
RxFirebaseを利用するもの、しないものの共存もできるので、非常に便利です。

それでは、RxFirebaseでよきRxJava Lifeを！！
Qiitaの人気タグをBar Chart Raceで可視化したら色々わかった

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Qiita記事用。qiitaタグの人気推移をbar chart raceで表す<a href="https://t.co/MJkRJxLAEQ">https://t.co/MJkRJxLAEQ</a></p>&mdash; okd_yk (@okd_yk) <a href="https://twitter.com/okd_yk/status/1204027383348490240?ref_src=twsrc%5Etfw">December 9, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

こっちもどうぞ。
https://public.flourish.studio/visualisation/1057329/

# ざっくりと作り方
1. この記事[^7]を参考にQiita Apiから情報取得
2. 各月ごとにtag数をカウント
3. flourish[^8]のbar chart raceを使って可視化。


# Qiita設立翌日に使用されて以降一度も使用されていないタグがある

Wikipedia[^2]によるとQiitaは2011年9月16日。
その翌日に公開された記事「/etc/hosts に書いたのにつながらないなあと思ったら、別の行に同じ名前が定義されてたしwww」[^1]、に使われていたタグ```-etc-hosts```。
このタグはこの一回以降8年以上の間使われていない。
Qiitaが設立された当初はタグの使い方も探り合いながらであったと予想されるため、このようなタグも存在しているのだろう。

# 初代王者```Ruby```、2代目王者```JavaScript```、現王者```Python```

Qiita設立当初から安定して投稿量が多かったのが```Ruby```
2015年から投稿量が増えていき、2017年3月に追い越していった```JavaScript```
そして2016年6月頃から投稿量が増えていき、2018年12月に一番人気になった```Python```

時代と流行の移り変わりが見えるのがBar Chart Raceの特徴。

# 日本語の人気タグはつい最近まで1つだけ

2013年の2月頃から現れる```どう書く```というタグ。
これは、「オフラインリアルタイムどう書く[^3]」というイベントに関連するもののタグであることがわかった。
（普通に面白そうだから時間が有る時に詳しく見てみよう）

しかし、これ以外にも、「どのように書くのか」という意味でも使われている[^4][^5]

これ以降長らく日本語の人気タグはなかったが、2019年1月に```機械学習```がランクイン。
現在のAIブームを鑑みると当然か。
しかし、2019年7月から```初心者```タグがランクインし、現在では機械学習を追い抜いている。
IT人材の不足が問題視されているが、着実に新規参入してくる方達が増えていることがわかる。


# まとめ
その時々の流行をしっかり追えるのがBar Chart Raceのメリット。
普通に見てて面白い。
皆も作ろう。



[^1]: https://qiita.com/wakaba@github/items/1bd403c7c108c3d33adf
[^2]: https://ja.wikipedia.org/wiki/Qiita
[^3]: https://atnd.org/events/30285
[^4]: https://qiita.com/uchida-takumi/items/3379677a560c2fa3aadd
[^5]: https://qiita.com/PYTHONISTA/items/2dcabc93365a62397afe
[^6]: https://apple-geeks.com/iphone-33-2455
[^7]: https://qiita.com/arai-qiita/items/94902fc0e686e59cb8c5
[^8]: https://app.flourish.studio/
”パソコンを付ける”から”なんとか開発できる”になるまで

始めまして！
新卒1年目でエンジニアをしているマンです。
この度Advent Calendarの企画に混ぜて頂き、初めての投稿をしてみます
至らぬ点もあるかと思いますが是非色々ご指摘頂ければ幸いです。
今回は初めて開発していく中で理解に苦しんだ点を共有してみたいと思います
# 開発環境
- PHP
- phpMyAdmin
- phpStorm
- Git

# 開発を始める前の私の状態
- とりあえずインターネットで検索はできる
- PHP？環境？え、何それは…
- 簡単なゲームを作りたいと思ってC++をやっていた時期が私にもありました

# 私に課せられた課題
WEBアプリケーションのソースコードをローカル上で確認し、
あるページの文言○○を××に変える

私『勝ったなガハハ』

はい、地獄のスタート

# その壱
#### ”まずツールの使い方が分からない”
phpStormを使って開発をしていくというのは辛うじて理解できたものの
どうやれば開発できるのか？そもそもここに表示されている謎のコードは何なのか？
からスタートしたため全てが手探りでした

とりあえず文言を変えればよいと考えていたので、なんとなく検索を使って探し始めましたが
これが更なる混乱を招きました

# その弐
#### ”周りへの聞き方が分からない”
処理がどのように呼び出されて、どのように表示されているのか分からないまま
課題の目的である、変更対象の文言を探し始めてしまいました

すると、周りの方に質問をしてみようと思っても
過程がグチャグチャなので必然的に質問もうまくできません
これにより見事に泥沼化しました

# その参
#### ”そもそもなんで動いているのかが分からない”
与えられた課題は文言変更でしたが、
実際に動いているWEBアプリケーションの文言変更なので
対象の文字列は必ずどこかにあるはず

探し方が悪いというところまで半端に掴んでいた為
どのようにその画面や文言が表示されているか考えるのを二の次
にしてしまっていました

ここらへんで文言を探すことに躍起になっているので
開発において重要なそもそもなぜ動くのかという疑問が
完全に蚊帳の外になります

# その肆
#### ”調べ方が絶望的に分からない”
大分時間が経って初めてGoogleなどで調べようとしますが
そもそもどういう検索キーワードで調べればよいかが謎でした
出てきたエラー文などをそのまま検索してみても
アプリケーション独自のエラーであることが大半だったので
Google先生は無力でした
(自分の調べ方が悪かっただけですが)

# その伍
#### "飛び交っている言語が分からない"
解決策を求め分かる人に話を聞きに行きます。
そしてそこで四苦八苦しながら現状の課題を伝えます。
そして帰ってくる言葉を聞いて
？？？？？？？？
となります

前提知識の差はありますがここまでで正規ルートから外れた調査の仕方をしていた為に
得られたアドバイスが全く分かりませんでした

ｵﾜﾀ(´・ω・｀)

# どうすれば良かったか？
個人的な見解ですが、**周りへの聞き方**を改善することで
このカオスな初動はもっと違う姿を見せてくれていたと思います
(後から)当たり前(と分かった事)ですが
プログラムはルールに従って**順番に**動くわけです

この順番をすっ飛ばして答えを探そうとしたから滅茶苦茶になりました
この後に作成するようになったメモを持って聞くことで大分聞きやすくなったので
形はどうあれこのようにまとめるといいのではないでしょうか

あくまで参考程度になのでもっと良い纏め方があれば教えて頂きたいです！
(例)
➀一番最初に呼び出されるファイル:hoge/test.html
➁最初に通る処理:hoge function
➂その次呼び出されるファイル:hoge/test2.html
:
:

これをまとめようとすると自分が処理のどこを理解できていないかが浮き彫りになり、
周りに聞いたタイミングで自分の思考過程を追って貰いやすくなったので
非常に質問が楽になりました

# 結論
- 最初は一つ一つ処理を丁寧に追うことを考えないと詰む
- 最初にどこが呼び出されるか、なぜそれが呼び出されるかが分からない時は
過程を飛ばさないでそこから聞く、調べる方が早い
- 質問前に自分の思考過程を書くと整理しやすい
プロジェクトに参画してから炎上の確率を予測するチェックリスト

仕事には必ず納期がある。

そして100％完成したかどうか確認するスキルのある人間はその現場で長く携わっている有識者のみ。

今回は納期に間に合わせたくても物理的にそうさせない、いわゆる炎上プロジェクトに参画してから察知するためのチェックリストを考えてみた。


①ＰＣのスペックが悪い。
よくあるのがこれ。ウイルス対策ソフトが動いているのか、右クリックするだけで毎回１分くらい固まるｐｃが支給されていたりする。
納期が遅れて炎上する危険性がある。
-10ポイント


②有識者が相談に応じてくれない
有識者（その人一人でプロジェクトのpdcaを回せる人）と１日最低一時間とることは出来る。
もしくは有識者から「困っていることない？」
と聞いてくれれば納期に間に合わせることに向けたプロジェクト進行がまだ可能。

しかし有識者が話を聞けなかったり、確認をとっただけでキレる人間であると炎上する危険性がある、精神衛生上よくない。

皆自分の仕事で精一杯だろうがこちらは納期を間に合わせる戦いをしているので、遠慮なく助けを求めよう。
-20ポイント



③有識者がパワハラ、何らかの嫌がらせをする
これは上記の件に関連するが、
パワハラしてくる有識者に相談なんかしたくないという思想に向けてることが危険。
納期が間に合わなくなるように仕向けているようなもの。
特に客先で発動することが多い場合は要注意。
逃げましょう。
-15


④お客さんの注文が多い
納期があるのに直前にバンバン注文を入れる、
技術がわからないけど進捗管理に時間を使わせすぎる。
このあたりの気が使えないとプロジェクトは炎上する。
-5ポイント


いかがでしょうか、これからエンジニアとして戦い続ける人は納期との戦い方を考えましょう。
p5jsでPokémon GOっぽいUIを作る(1)

位置情報と連携するサイトを作っているが、ふとPokémon GOっぽくしたいと思ったもののUnityを覚えるのは大変。というわけでp5jsでどこまで近づけられるかを試してみる１回目。多分、10回ぐらいすれば色々と機能が揃うかも。

# まず地図を作る

Pokémon GOはGoogleだと思いますが、ここはYahoo!JapanのYOLPのスタティックマップを使ってみます。

https://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/static.html

アプリケーションIDを取得して、こんな感じで施設名とか地名が入ってない地図を作ってみる。

```php
<?php
$appid = "YOUR_APP_ID";
$lat = @$_GET["lat"] ?: "35.66521320007564";
$lon = @$_GET["lon"] ?: "139.7300114513391";
$query = http_build_query([
    'lat' => $lat,
    'lon' => $lon,
    'z' => '16',
    'appid' => $appid,
    'style' => 'base:yellowishgreen|off:address,landmark,line_name,station_name,symbol,area_name',
]);
$url = 'https://map.yahooapis.jp/map/V1/static?' . $query;
header("Access-Control-Allow-Origin: *");
header('Content-Type: image/png');
readfile( $url );
?>
```

# p5jsで地図を平面に表示する

次にp5jsをダウンロードし、取得した地図を貼ってみる。

https://p5js.org/

```html
<script src="p5.min.js"></script>
<script>

let img;
function preload() {
  img = loadImage('getmap.php');
}

function setup() {
  createCanvas(600, 600, WEBGL);
}

function draw() {
    background(0);

    rotateX(1);
    rotateZ(frameCount * 0.001);

    push();
    texture(img);
    plane(1000, 1000);
    pop();
}

</script>
```

こんな感じになりました。

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="usop4" data-slug-hash="eYmyYeK" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="map like pokemon go">
  <span>See the Pen <a href="https://codepen.io/usop4/pen/eYmyYeK">
  map like pokemon go</a> by t.uehara (<a href="https://codepen.io/usop4">@usop4</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

次回は中心に棒人間でも描いてみるか、それとも地図を回転させてみるか。気まぐれに書き足してみます。
CentOS6.X系のオンプレをクラウドに移植する際の注意点

#そもそもんな事するな
いやー、今どきCentOS6.XとかCentOS5.X系を使うのやめましょうよー　と言ったところで、やっちゃうのがお客さんです。
ま、やるっきゃないでしょう。

#注意点
一番の注意点は、
>/etc/udev/rules.d/70-persistent-net.rules

でございます。
これは、MACアドレスと、ethXを結びつける情報が書かれたファイルです。
もともとは「eth0に表面、eth1に裏面ネットワークを接続した」状態で再起動をかけると、時々「eth0に裏面、eth1に表面ネットワークが関連度けされてしまっている」という現象が発生する事から、それを解消するために生まれた仕組みです。
/etc/udev/rules.d/70-persistent-net.rules
には、MACアドレスとethXの組み合わせが記載されています。


>\# PCI device 0x15ad:0x07b0 (vmxnet3)
>SUBSYSTEM=="net", ACTION=="add", DRIVERS=="?*", ATTR{address}=="00:50:56:95:46:45", ATTR{type}=="1", KERNEL=="eth*", NAME="eth0"
>
>\# PCI device 0x15ad:0x07b0 (vmxnet3)
>SUBSYSTEM=="net", ACTION=="add", DRIVERS=="?*", ATTR{address}=="00:50:56:95:24:07", ATTR{type}=="1", KERNEL=="eth*", NAME="eth1"

上記みたいな中身です。
これ、クラウド上で動く仮想マシンでは単なる邪魔者ですね。
何しろ、クラウドなんてMACアドレスなぞとっかえひっかえですので、固定する意味がありません。
という事で、この仕組ごと削除してしまいましょう。

(1)/etc/udev/rules.d/70-persistent-net.rulesを消す
mv /etc/udev/rules.d/70-persistent-net.rules /etc/udev/rules.d/70-persistent-net.rules.`date "+%Y%m%d"`
echo "" > /etc/udev/rules.d/70-persistent-net.rules

(2) /lib/udev/rules.d/75-persistent-net-generator.rulesを消す
mv  /lib/udev/rules.d/75-persistent-net-generator.rules  /lib/udev/rules.d/75-persistent-net-generator.rules.`date "+%Y%m%d"`
echo ## >  /lib/udev/rules.d/75-persistent-net-generator.rules

(3)/lib/udev/write_net_ruleを無効化
vi /lib/udev/write_net_ruleで中身を見て、以下の行を修正します
旧：#RULES_FILE='/etc/udev/rules.d/70-persistent-net.rules'
新：RULES_FILE='/dev/null'

これで、マシン再起動で大丈夫です。
念の為、70-persistent-net.rulesをcatしてみて、空ファイルになっている事を確認してみて下さい。
空ファイルになっていたら成功です。

上記、やっておかないと、そのマシンのクローンを作る際に大変に困ってしまう事になります。クラウド情でCentOS6.X系を動作させているのであれば、まず第一にやっておくべき事でしょう。
【Lチカ】ArduinoとRaspberryPiについて説明しちゃう

## 初めに
こんばんわ！
今回は工学系，制御系を専攻している**学生以外**に向けて、Arduino，Raspberry Piについて説明させていただきます！

### この記事の概要
1. Arduinoとは
2. Raspberry Piとは
3. Arduino と Raspberry Pi の違いについて
4. Arduinoを使ってLEDを点灯してみる
5. Raspberry PiとArduinoを通信させてみる。

### この記事が目指すところ
Arduino と Raspberry Pi について知り、実際に"もの"を制御する楽しさを知ってもらう！


## Arduinoとは
Arduinoは**AVRマイコン**と呼ばれるマイコンが搭載されている「基板」です。
ArduinoはC言語でプログラミングをすることができ、エンジニアを目指す学生や非エンジニアが使用することが多いです。
![90691.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541458/50c86413-932c-9626-30d9-5797e0660b53.jpeg)

## Raspberry Piとは
Raspberry Piは、Arduinoに似た基盤のように見えます。しかし、ArduinoとRaspberryPiで最も違う部分として、**RaspberryPiにはOSが搭載されている**という点が挙げられます。

Raspberry Piは、PCと同じように扱うことが出来ます。Linuxのコマンド等
を使った初期設定や環境構築が必要となるため、**Arduinoを学習した後に触るのをお勧め**します！！
![90690.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541458/b95466e6-03e8-8b0a-e66b-ae09e84dfc56.jpeg)

## Arduinoを使ってLEDを点灯してみる
実際にArduinoでLEDを点灯させてみましょう。

### 配線
13番のピンとGNDピンをまたぐようにLEDを取り付けます！！
![906901.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541458/dfb43b3c-76f3-bfaf-f471-8d245156a9f8.jpeg)

### ソースコード
```c:main.c
//definition of output pin
#define LED_PIN 13


void setup() {

  //setup 13 pin 出力設定
  pinMode(LED_PIN, OUTPUT);

}


void loop() {

  //arduino 13 pin 出力
  digitalWrite(LED_PIN, HIGH);
  //delay 1s (1000ms) 
  delay(1000);
  //arduino 13 pin 出力停止
  digitalWrite(LED_PIN, LOW);
  //delay 1s (1000ms) 
  delay(1000);

}
```
LEDが点滅すれば成功です！！

## 終わりに
Arduino RaspberryPiは非エンジニアの方でも簡単にハードウェアを学習・利用することができるように様々なライブラリがあります。

生活に役立つものなんかを自分の手で生み出せたりしちゃいます！！
python初心者があれこれ調べてみた

#あれこれ調べてみた
python初心者が使うコードについてあれこれ調べてみた

#Pillowについて
ブログに画像をアップする上でpillowをinstallする必要があるので調べた。
今も開発が進められているpythonのライブラリ（より高度なことをするならopenCV）
画像の色の変換やトリミングなど加工が色々できる

#pip
パッケージをinstallするときに使う。
pip install ##　みたいな感じ

#static_URL
project名/setting.pyの一番下にあるコード。以下のURLがわかりやすい
https://qiita.com/saira/items/a1c565c4a2eace268a07

#os.path()
osに依存する様々な機能を利用するためのモジュール
ファイルやディレクトリ操作が可能
os.path.joinはパスとファイル名を結合できる
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')はBASE_DIRとmediaを結合している
os.path.dirname()は指定したパスからファイル名を除いたものを返す
https://codor.co.jp/django/about-basedir

#フォルダ名の中にproject名があり、app名が並列になっている
projectフォルダ名
　┗project名
　┗app名

#ImageFields
modelの中にある画像ファイルを扱うための変数
Instanceを全て選択するFigmaプラグインを作ろう

#はじめに
Figmaには特定のオブジェクトをライブラリ化するComponentという機能があります。
Componentを複製するとInstanceとなり、Componentに加えられた変更はInstanceにも反映されます。
progateの教材スライド制作では下図のようにスライドや画像のフォーマットなどをComponentにしています。
<img width="492" alt="スクリーンショット 2019-12-09 21.52.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44990/ebf0affb-ebc8-b38b-24fc-ca595d726a2a.png">


Componentは効率が大きく上がる反面、リリース後の修正時に意図しない変更を取り込んでしまう可能性がありました。
Instanceを1つずつ選択してdetach（切り離し）を実行すれば良いのですが、数が多く諦めていました...がプラグインなら簡単にできます！


#やりたいことの確認
プラグイン開発においてdetach instance機能はComing Soonとのことでした（2019/12/9 現在）
▽Figma - What's Supported
https://www.figma.com/plugin-docs/whats-supported/
そこで、Instanceを全て選択状態にするプラグインを作ることにしました。

#コード
```ts
const selectedNodes: SceneNode[] = [];

figma.currentPage.children.forEach((item) => {
  findInstanceRecursively(item);
});

function findInstanceRecursively(item: SceneNode) {
  debugger;
  if (item.type === "INSTANCE") {
    // 本来はここでDetach Instanceを実行したいが、機能が提供されていないので選択する配列に追加するだけ
    selectedNodes.push(item);
  }
  // "INSTANCE"とその子の"INSTANCE"を選択しても親しか選択状態にできないが、
  // Detach Instance機能が提供されるようになる想定で再帰処理に含めておく
  if (item.type === "INSTANCE" || item.type === "GROUP" || item.type === "FRAME" || item.type === "BOOLEAN_OPERATION") {
    item.children.forEach((child) => {
      findInstanceRecursively(child);
    });
  }
}

figma.currentPage.selection = selectedNodes;

figma.closePlugin();
```
これを実行すると今のページのInstanceを全て選択できます。
<img width="383" alt="スクリーンショット 2019-12-08 21.57.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44990/c722dcc6-3d9a-2cf9-a8fc-fd361cff1770.png">
この状態でいつもどおり右クリックメニューからDetach InstanceをポチッとすればOKです。

#解説
##全レイヤーを検索するには再帰処理を使う
レイヤーは多重階層構造なので、どれだけ階層が深くなっても検索できるようにfindInstanceRecursively内でfindInstanceRecursivelyを呼び出す再起処理を行うようにしました。全レイヤー対象の検索系プラグインであれば大体必要になってくる処理だと思います。

開発中、間違えてitem自身を再起処理の対象にして無限ループを発生させてしまったのですが、スタックオーバーフローのエラーとなり止まってくれました。（どれだけスタックできるんだろう？）

##子を持ちうるレイヤーを再帰処理にかける
子要素を持つかどうかはChildrenMixin interfaceを実装しているかどうかで判断しました。
▽Figma - The Typings File
https://www.figma.com/plugin-docs/api/typings/
該当した下記4つのinterfaceが持つtypeを再起処理にかける条件としています。（2019/12/9 現在）

```ts
  if (item.type === "INSTANCE" || item.type === "GROUP" || item.type === "FRAME" || item.type === "BOOLEAN_OPERATION") {
```

##Instance内のInstanceは選択できない
Figmaの仕様で親要素が選択されていると子要素を選択できません。
Componentの作りが複雑で多重にComponentを含んでいると一回では選択しきれなので、一度detach instance実行後に再度プラグインを実行して選択しなければなりません。

detach instance機能がプラグインで使えるようになれば解決するので、それまでは待ちですね

#おわりに
Typescriptを初めて書きましたが、型が明確になっているので実装しやすいですね。
FigmaがThe Typings Fileを提供してくれているので、Figma固有の補完も効いて良い感じ！
【初心者向け】Qiitaのかきかた  ~ Markdownきほんの10記法まとめ ~

# はじめに
Qiitaに触れたばかりの筆者がMarkdownの記法を覚えたかったので、「これ基本っぽくて使いたいな」と感じたものを10個選び自分用に整理しました。


# Index
1\. 見出し
2. 強調 + インライン + 赤字
3. リンクの挿入
4. コードの挿入
5. 改行
6. 引用
7. テーブル (表)
8. 画像の挿入
9. 水平線
10. Markdownの無効化
参考

#1. 見出し
```
「 ＃ 」 ＋ 文字
HTMLで言うところの「h1」タグで、3つまで重みをつけることが可能。
#1. 見出し
##2. 見出し
###3. 見出し
```

#2. 強調  + インライン + 赤文字



```
*強調1*
**強調2**
***強調3***
`インライン`
<font color="Red">赤文字</font>
```

*強調1*
**強調2**
***強調3***
`インライン`
<font color="Red">赤文字</font>


#3. リンクの挿入

```
[リンクテキスト](URL)

[Qiita](https://qiita.com/)
```

[Qiita](https://qiita.com/)

#4. コードの挿入


\`\`\`ruby
foods = [ "うどん", "そば", "ラーメン" ]
foods.each do |food|
  puts food
end
\`\`\`

と書くと

```ruby
foods = [ "うどん", "そば", "ラーメン" ]
foods.each do |food|
  puts food
end
```
　
さらに、下記のように 「 言語名 」 + 「 : 」 + 「 ファイル名 ＋ 拡張子 」 と書けば


\`\`\`ruby:test.rb
foods = [ "うどん", "そば", "ラーメン" ]
foods.each do |food|
  puts food
end
\`\`\`



```ruby:test.rb
foods = [ "うどん", "そば", "ラーメン" ]
foods.each do |food|
  puts food
end
```
コードブロックにファイル名が表示されます。


#5. 改行

```
半角スペース2つ、若しくは
「 かな入力モード 」 にして space + return
```




#6. 引用

```
「 > 」 + 引用内容
```

>引用内容


#7. テーブル (表)

```
|left|center|right|
|:---|:---:|---:|
|aaaaaa|bbbbbb|cccccc|
|***ひだり***|<font color="blue">まんなか</font>|*[Qiita](https://qiita.com/)*|
```

|left|center|right|
|:---|:---:|---:|
|aaaaaa|bbbbbb|cccccc|
|***ひだり***|<font color="blue">まんなか</font>|*[Qiita](https://qiita.com/)*|


#8.画像の挿入


```
画像を ドラッグ & ドロップ
※ 制限：ファイル単体で10MBまで
```

<img width="106" alt="スクリーンショット 2019-12-09 21.36.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434223/2c3bf10f-01ce-32a7-bbed-756b5a3b2d82.png">



#9.水平線

```
*** (3つ以上)
--- (3つ以上)
```

***
---

#10.Markdownの無効化
```
「 \ 」 を Markdown の前につけることでMarkdownを無効化できる。
本記事では「4.コードの挿入」で「```」の無効化に使ってます。
（ちなみに 「 \ 」 の入力方法は 「 option 」 + 「 ¥ 」）

\#1.見出し
```
\#1.見出し
　

#参考
[Qiita マークダウン記法 一覧表・チートシート - Qiita](https://qiita.com/kamorits/items/6f342da395ad57468ae3)
[Qiitaのマークダウンで色をつける方法[140色] - Qiita](https://qiita.com/twipg/items/d8043cd4681a2780c160)
[Qiita Markdown 書き方 まとめ - Qiita](https://qiita.com/shizuma/items/8616bbe3ebe8ab0b6ca1)
KPTがマンネリしてきたチームに。OPTでどきどきを取り戻そう♡

これは[株式会社ACCESS Advent Calendar 2019](https://qiita.com/advent-calendar/2019/access) の10日目の記事です。
こんにちは！令和入社の @yocidama です！
今日は [CosmoSia](https://twitter.com/cosmosia_info) チームでやっているふりかえり手法について書きたいと思います！


## はじめに

 * ふりかえり手法としてメジャーなKPTのK部分をちょろっと変えて**OPT**にしました。
 * チームとして考える問題やよろこびあえることをより共有しやすくした話です。

#### こんなチームにおすすめ
  * KPTにちょっとマンネリしてきた
  * あまり意見を出さないメンバーがいるけど、本当に何もないのか気になる…
  * もっとみんなのことを知りたい！

## OPTとは
  * O ・・・ おきもち（Happy😊/Bad😢）
  * P ・・・ Problem
  * T ・・・ Try
  
P と T は KPT と一緒です。
O では Sprint 内で感じた様々な **おきもち** を出してもらいます。
P は O で出たおきもちから、これはチームとして考えたいなぁというものをピックアップしてきます。
T は問題に対する Try や、Happyなおきもちに対してよりよくするための Try を出します。
CosmoSiaチームではあがったTryからTodoにするものを決めてます。

## やってみよう！

1. 7分〜10分くらいでおきもちを付箋に書き出す 

2. 順番に読み上げながらおきもちゾーンに付箋をはる
   *😉Happyなおきもちは上の方に、Badなおきもちは下のほうに*
3. みんなでおきもちをながめる
   *😉これについては話し合ったほうがよさそう、これってどういうこと？、これはすぐ解決できそう、（Happyなお気持ちに対して）よかったね！*
4. 気になったお気持ちをPに移動する
   *😉「〇〇がつらい」、「〇〇がよくわからない」、などBadよりのことは特に解決したい*
5. 7分〜10分くらいでTryを付箋に書き出す
   *😉ピックアップしたPに対してのTry、Pには移動しなかったけどより良くするためのTryを書こう！*
6. 順番に読み上げながらTryゾーンに付箋をはる
7. TryからTodoにするものを決める
   *😉明示的にToDoにしなくてもいいものはあえてToDoとして管理しなくてもOK* 


こんな感じ
![opt2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538286/b63a5061-4e20-aab8-3ecf-6bc2a96639a6.png)

このときは、「なかなか仕様が理解できないことがある」みたいなおきもちをPにピックアップしてTryを考えたりしました。


## やってみてどうだったか

* 個人的な問題だと思って表に出てこなかった問題が出てくるようになった
* これはチームとしてなにか解決できるだろうか？と個の問題ではなくチームの問題として考えようという意識が強まった
* KPTからOPTにして「**自分の気持ちがたくさん出せるようになった**」というおきもちが貼られました！🎉いえーい！

## おわりに

おきもちだけを英語にできないかチーム内で考えましたが、適した言葉がなかったのでおきもちに落ち着きました。
今では割と愛着が湧いています。

自分にとって些細なことだとしても、周りからみたら些細じゃなかったりしますよね。
そういうのをすくっていけたらなぁというおきもちです。

----

明日は @diescake さんです！
明日の @diescake さんのおきもちはどんな感じかなぁ〜
RSpec導入、記述ルール

#目的#
新しいポートフォリオを作成する際に、RSpecを利用したTDD(テスト駆動開発)
に挑戦するため、RSpec導入します。ついでにRSpecによるテストの簡単な記述ルールについて説明したいと思います。

#RSpecとは#
RSpec とは Ruby プログラマー向けのBDD(Behaviour-Driven Development) ツールです。
BDD(Behaviour-Driven Development)は、
できることは普通のテストと同じで、加えて、
これから作成しようとするプログラムに期待される「**振る舞い**」や「**制約条件**」、
つまり「**要求仕様**」に近い形で、**自然言語（英語）**を併記しながらテストコードを記述することができるものです。

**メリット**は、テストコードの可読性があがる上、テストコードが要求仕様となりうることと、
要求仕様からテストコードを起こす際も、スムーズにコードに移行しやすいことです。

#RSpecの導入#
まずは RSpec の Gem パッケージをインストールします。

```Gemfile
・・・
group :development, :test do
  gem 'rspec-rails', '~> 3.5'
end
・・・
```

ちなみに、RSpec は test フレームワークなのに、なぜインストールグループに development を追加するかというと、RSpec にはテストファイルを作成する generator があり、それを利用するために default の RAILS_ENV である development にインストールしておくと楽だからです。

インストールします。

```
$ bundle install
```

Gem パッケージがインストールされたら、次は Rails ソフトウェアに対して RSpec 用の初期ファイルをインストールする。

```
$ rails generate rspec:install
Running via Spring preloader in process 9045
      create  .rspec
      create  spec
      create  spec/spec_helper.rb
      create  spec/rails_helper.rb
```


#テストファイルの記述ルール#
テスト記述ルールとしては、テストする内容を説明する文章を引数として、describe, context, it を使って記述します。
1 つのテスト内容は it で記述し、期待する動作(expect)を 1 つ含めます。

```ruby
require 'rails_helper'

RSpec.describe Diff, type: :model do
  it "is valid with diff string" do
    diff = Diff.new(diff: "some diff")
    expect(diff).to be_valid
  end
end
```
it に続く文字列は動詞から始める。

ここまでで 1つのテスト項目の記述ですが、実行すると、なぜitの次が動詞から始まる説明文を記述していたのか理由が分かります。

```
Diff
  is valid with diff string

Finished in 0.02296 seconds (files took 0.35495 seconds to load)
1 example, 0 failures
```

このように、describe, it で記述した内容がテスト結果に表示されるため、実行結果を見れば何をテストしているのかが分かるようになっています。

テストが特定の条件を想定する場合は context を使ってその条件を記述します。
ここで describe, context は入れ替えても動作しますし、以下の例では describe, context は記述せず it だけ記述しても動作しますが、テストが想定する内容が分かりやすくなるので積極的に使いましょう。

```ruby
require 'rails_helper'

RSpec.describe Micropost, type: :model do
  describe "search posts by term" do
    context "when no post is found" do
      it "returns an empty collection" do
        expect(Micropost.search("John Doe")).to be_empty
      end
    end
  end
end
```

#感想#
RSpecの導入は思っていたより簡単でした。
RSpecテストの作成についてまだ知識が浅いため今回は初歩のところだけ説明しました。
知識がついたらテストの作成方法について詳しいブログを投稿します！！
クラウドはdhcpが当たり前

さて、つい最近とあるプロジェクトにて。
「Azureの設定的には、インタフェースには静的なIPを振りますが、OSの設定としてはdhcpを設定します」
と説明したところ
「そんなのあり得ない！」
という反応を受けました。
どうやら「クラウドに中途半端に詳しい人が勘違いしてることあるある」っぽいネタのようですので、解説していきたいと思います。

#Azure(やらAWSやら)では基本的にOS設定はDHCP
さて、皆さんはAzure、或いはAWSで新規に仮想マシンを建てる時、OSの中身はほぼデフォルト設定になっているという事は理解されているかと思います。
OSのデフォルト設定は、DHCP設定なのです。
つまり、事実として、OSはDHCP設定のままでいると、AzureなりAWSなりが設定している「ネットワークの設定」が設定される仕組みになっているのです。その際、サブネットマスクだの、デフォルトゲートウェイだの、DNSだのが自動で設定されるのです。

#DHCP設定しないとどうなるの？
こまる事だらけです。
特に[VMのクローンを作る]という時に大変困った事になります。
例えばOSの設定として、192.168.0.10というアドレスを設定してしまったとしましょう。すると、そのクローンとして192.168.0.11というIPアドレスを持つクローンを作っても、そのクローンはパケットを受信して来れません。そのクローンの仮想マシンは、自分のIPを192.168.0.10だと思っているからです。
バカハブという言葉を聞いた事がありますか？とにかくネットワークに流れるパケットを、つながっている全てのノードに送信してしまうハブの事です。最近はめったに見なくなりました。ネットワークのキャプチャなどで大変に役に立つものです。
そして、そのバカハブにつないでも、大抵のPCは混乱なく通信をする事が可能です。それは、自分のIPアドレスを知っていて、そのIP以外の通信を受け取らない、という仕組みが出来ているからです。

#クラウドの設定と、OSの設定は違うんだよ
「何を当たり前の事を言ってるんだ」と思われるかもですが、これが理解出来ていない人、ホントに多いんですよ。
上記を読めば、まさかの勘違いも解消するかもと思っているのですが、ウチの職場で延々と「わからない」を繰り返している方がいらっしゃったので、改めて執筆してみました。
travis CI の仕様変更によりPerlの古いバージョンの自動テストがうまくいかない件を解決する

#症状
- [Travis.CI](https://travis-ci.com/)にてPerl5.20以下のビルドに失敗する。
- [github](https://github.com/)に上げてる`.travis.yml`はいじってない。

#解決策

`.travis.yml`の冒頭に`dist: trusty`と添えるだけで直る。

#原因その1

travisが初期状態で持ってる`perlbrew`のバージョンが古い？
`perlbrew`でソースを読みに行くURLが`404 not found`で`curl`に失敗している。
よって、`perlbrew use　5.xx`に失敗。初期状態で`perlbrew list`に入っている5.22以上だと影響がない。

#原因その2

Module::Build::Tiny のバージョンが古い？

`cpanfile`に


```
on configure => sub {
    requires 'Module::Build::Tiny', '0.039';
};
```
とわざわざ最新のバージョンを指定しているのにも関わらず、

```
Can't locate Module/Build/Tiny.pm in @INC (you may need to install the Module::Build::Tiny module) (@INC contains: /etc/perl /usr/local/lib/x86_64-linux-gnu/perl/5.22.1 /usr/local/share/perl/5.22.1 /usr/lib/x86_64-linux-gnu/perl5/5.22 /usr/share/perl5 /usr/lib/x86_64-linux-gnu/perl/5.22 /usr/share/perl/5.22 /usr/local/lib/site_perl /usr/lib/x86_64-linux-gnu/perl-base .) at Build.PL line 9.
```

と、怒られる。この事象だけなら`.travis.yml`に

``` yml
before_install:
  - 'cpanm --local-lib=~/perl5 local::lib && eval $(perl -I ~/perl5/lib/perl5/ -Mlocal::lib)'
  - 'cpanm Module::Build::Tiny'
```

と明示的なインストールをすることで解決するが、そもそも`dist: trusty`と指定した場合、__この記載はいらない__ことを確認したし、そうでない場合は`perlbrew use 5.xx`に失敗してもテストが止まらず、__指定していないバージョンでテストを走らせてpassしてしまう__という謎の大暴走を起こすので__全くお勧めできない。__

#結論

`.travis.yml`に`dist: trusty`と入れれば従来通り後方互換性を自動確認しながらモジュールを更新できる。

```yml
dist: trusty
language: perl
sudo: false

perl:
- '5.8'
- '5.10'
- '5.12'
- '5.14'
- '5.16'
- '5.18'
- '5.20'
- '5.22'
- '5.24'
- '5.26'
- '5.28'
- '5.30'
...
```

#なぜ？

わかりません。`curl`の先が`404 not found`になっている時点で参照元のデータベースが古いか、バグかを疑うところなんですが、travis CIのサポートにメールで問い合わせた結果として`dist: trusty`使えばええねん、という回答しか来なかったので。

この件を深掘りできる方の__コメントおよび編集リクエストお待ちしております__。
基本情報技術者試験の勉強計画　第８週（12/9週）

## 目標と結果
### 目標
・基礎理論を理解する
・アルゴリズムを理解する
・今週も大学のテストがあるので焦らない
### 結果
・基礎理論もアルゴリズムも理解が中途半端だった。
・焦らずに確実にやっていこうと思う。
## 振り返り
### keep
・一日１０分は過去問道場をやること
・朝起きること
### probem
・テキスト開かずにすぐ寝てしまう
### try
・苦手な分野の克服
BigqueryではLEFT JOINを使ってなくてもLEFT JOINのエラーが出る

タイトルの通りBigqueryではleft joinを使ってなくてもleft joinのエラーが出ます。エラー文は以下です。

```
LEFT OUTER JOIN cannot be used without a condition that is an equality of fields from both sides of the join.
```

### 原因

相関サブクエリが原因でこのエラーが発生するらしい。相関サブクエリ内のwhere句で不等号を使うとエラーになるのだとか。以下参照。
↓
http://silva-tech.hatenablog.com/entry/2018/04/14/233112

相関サブクエリは色々と制約があったり可読性も悪くなったりするので、便利だけどなるべく使わない方が良いかもしれない。

※相関サブクエリとは：
外側のクエリの値を内側で使用するサブクエリ。
最高のランダムドットステレオグラム(RDS)を求めて。

前回の記事でPythonを使ってオリジナルのランダムドットステレオグラムの作成に挑戦した。

- [Pythonでオリジナルのランダムドットステレオグラム（RDS）を作る](https://qiita.com/KR_bangkok/items/39d981d93c68fd360fa9)

無事に立体視をすることはできたのだが、単に丸印やテキストを立体視しただけで満足してしまった。今回はもう少しかっこいいものを作る。

# 色を変更する

前回はランダムドットステレオグラムをグレースケールで表示させていた。これがなんか昔のテレビの砂嵐みたいで怖い。

`Matplotlib`にはグレースケール以外にもいろいろなカラーマップがあるので変更してみた。

```python
plt.imshow(stereogram, cmap='spring')
```

![1207_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329479/72021d8b-52dd-4618-1fe5-1b901246c1ba.png)
貞子感がなくなってだいぶPOPになった。イイネ。

# 深み
前回は立体パターンの深度マップを2値で作成していた。これではいろんな意味で深みがない。
深度マップを連続的な数値にすることで立体の浮かび上がらせる程度を調整することができる。

ためしに下のようなパターンを準備した。

```python
def make_depthmap(shape=(400, 600)):
    depthmap = np.zeros(shape, dtype=np.float)
    cv2.circle(depthmap, (200, 100), 50, (255 ,255, 255), -1)
    cv2.circle(depthmap, (400, 100), 50, (200 ,200, 200), -1)
    cv2.circle(depthmap, (300, 200), 50, (155 ,155, 155), -1)
    cv2.circle(depthmap, (200, 300), 50, (100 ,100, 100), -1)
    cv2.circle(depthmap, (400, 300), 50, (55 ,55, 55), -1)
    return depthmap
```

![1207_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329479/9a7331dc-281e-520e-0f2a-6c12ffb2b76f.png)

左上からZ順に暗くなっていくパターン。これでRDSを作成してみる。

![1207_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329479/ed9daa54-b277-974b-46c8-d893256043c4.png)


すごいぞ。深度マップの暗さに応じて、飛び出し具合が変わっている。
こんなパターンでもやってみた。

```python
def make_rectangle_depthmap(shape=(400, 600)):
    depthmap = np.zeros(shape, dtype=np.float)
    for i in range(16):
        c = 255 - i * 16
        cv2.rectangle(depthmap, (100+i*25, 100), (125+i*25, 300), (c, c, c), -1)
    return depthmap
```

![1209_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329479/d2784539-821b-8cba-6ee6-7c179e54034e.png)


結果がこちら

![1209_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329479/023dfdd1-2694-5e78-d4c2-549ad6dfe93f.png)

階段みたいに見える。イイネ。

# おわり
次回は写真（2次元画像）から深度マップを作成して、普通の写真を立体視できるようにしたい。
ランダムドットステレオグラマーになりたい。

# 追記
続編を書きました。

- [機械学習による深度推定で2Dの写真からオリジナルのランダムドットステレオグラム(RDS)を作成する](https://qiita.com/KR_bangkok/items/8fdb403733b41f67339c)
VSCodeの拡張機能のみでSassのコンパイル、Autoprefixerの自動付与、SourceMapの自動生成をする

## 概要
今回はSassのコンパイル、Autoprefixerの自動付与、SourceMapの自動生成をひとつで実装してくれる拡張機能である【Live Sass Compiler】を紹介します。

ちょっとしたSassを記述するときにタスクランナーを使うほどでもなく、サクッとコンパイルしてしまいたい時などに使えます。

コンパイラとしてKoalaやPreprosを紹介している書籍・サイトもいくつかあると思いますが、こちらの拡張機能を使えばVSCodeのみで作業が完結します。

> Live Sass Compiler
> ~~https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass~~
> https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass


## Sassのコンパイル
コンパイルするだけであれば、エディター下部の`Watch Sass`ボタンを押すだけでSassの監視、コンパイルが始まります。
このとき、ワークスペース内の`.scss`ファイル、`.sass`ファイルすべてが監視対象になりますので、対象外にしたいフォルダがあれば後述の除外リストに設定してください。


## Autoprefixerの付与
Autoprefixerを自動で付与したい場合は、settings.jsonに追記する必要があります。

```json:settings.json
{
    "liveSassCompile.settings.autoprefix": [
        "> 1%",
        "last 2 versions"
    ]
}
```
この設定だと「シェアが1%以上あるブラウザ」または「最後から2バージョンのブラウザ」が対象となります。
この記述の詳細については【Browserslist】のGithubから確認できます。
> Browserslist
> https://github.com/browserslist/browserslist


## SourceMapの自動生成
SourceMapはデフォルトで自動生成されるようになっています。
不要な場合は、settings.jsonに追記することで生成されなくなります。

```json:settings.json
{
    "liveSassCompile.settings.generateMap": false
}
```


## 出力フォーマットの設定
コンパイルされたCSSファイルについて圧縮形式の指定、拡張子の設定、保存先の指定ができます。
こちらはデフォルトの設定になります。

```json:settings.json
{
    "liveSassCompile.settings.formats": [
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": null
        }
    ]
}
```
formatは`expanded`、`nested`、`compact`、`compressed`の4つから、
extensionNameは`.css`、`.min.css`の2つから選べます。
savePathは保存先の指定になりますが、`null`にしていた場合Sassファイルと同階層に出力されます。


## コンパイルしたくないフォルダ（除外リスト）を設定する
デフォルトだとワークスペース内すべての`.scss`ファイル、`.sass`ファイルが対象となってしまいますので、もし対象外のフォルダを設定したい場合は利用してください。

```json:settings.json
{
    "liveSassCompile.settings.excludeList": [
        "/path/to/directory"
    ]
}
```


## おまけ
【Live Server】という拡張機能も入れるとライブリロード（更新したらブラウザに反映）も使えるようになります。
 ~~同じ制作者様の拡張機能になるので、セットで入れておくのもおすすめです。~~

> Live Server
> https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer


## まとめ
Live Sass Compilerの詳細な設定については制作者様のGithubから確認できます。
> ~~https://github.com/ritwickdey/vscode-live-sass-compiler/blob/master/docs/settings.md~~
> https://github.com/glenn2223/vscode-live-sass-compiler/blob/master/docs/settings.md

複数のアプリを行き来することがなくなり、多少でも作業の効率化でできればと思います。
Zephyr + STM32L476 > ADC > Analog Discovery 2で出力した電圧の取込み

```txt:動作環境
Ubuntu 18.04 LTS
ボード: STM32L476 Nucleo_64 (以下、STM32L476)
Zephyr 2.1.0-rc1
電圧: Analog Discovery 2
```

### 概要

- ZephyrのADCを練習
- STM32L476はADC取込みに対応しているという記載あり
    - https://docs.zephyrproject.org/1.12.0/boards/arm/nucleo_l476rg/doc/nucleol476rg.html

### プロジェクト

`tests/drivers/adc/adc_api/`にAD取込みの実装があるため、これを使う。

### 配線

- Analog Discovery 2 <-> STM32L476
    - V- <-> GND
    - V+ <-> CN8: AD5

### Analog Discovery 2設定

- Voltage Supplies
    - Negative Supply (V-) On: -500mV
    - Positive Supply (V+) On: 500mV, 1V, 1.5Vを使う

### 実行

```
$ west build -p auto -b nucleo_l476rg tests/drivers/adc/adc_api/
```

デバッグ実行

```
$ west debug
(gdb) break test_adc.c:240
(gdb) c
(gdb) p sample_value 
$1 = 611
```

Analog Discovery 2の「Positive Supply (V+) On」を変更すると、AD取込み値も変化する。
AD取込みが成功していることが分かる。

- 500mV => 298
- 1000mV => 454
- 1500mV => 607

### 補足

test_adc.cの240行目はcheck_samples()の実装であり、チャネルごとのAD値はsample_valueに格納される。

test_task_one_channel()の実行によりA5のみが取込みされている。

### はまった

- A0でなくA5を取込みに使っているとは思わなかった
シェルスクリプト return コマンド

Java などでは、関数の戻り値を返すのに return を指定しますが、シェルにおいては単純に”シェル関数を終了するコマンド”になると思います。

##### 終了ステータス0 でシェル関数を終了する
一般的に終了ステータス0 は正常終了とみなされます。

```bash:return-example1.sh
func()
{
  return 0
}
```

##### 終了ステータス0 以外でシェル関数を終了する
一般的に終了ステータス0 以外は異常終了とみなされます。

```bash:return-example2.sh
func()
{
  if [ -f "$1" ]; then
    return 0 # 引数で指定したファイルが存在したため、正常終了
  fi
  return 1 # ファイルが存在しなかったため、異常終了
}
```

##### サブシェルでの return
サブシェル内で return コマンドを呼んだ場合、サブシェルを終了するが、シェル関数は終了しない。

```bash:return-example3.sh
func()
{
  (
    return 1 # サブシェルを抜ける（異常終了扱い）
  )
  echo $? # サブシェルでの終了ステータス"1"が得られる
  return 0 # シェル関数はここまで実行される（正常終了扱い）
}
```
Quest Basicsの歩き方　その１

みなさん、Oculus Quest向けコンテンツ開発、してますか！
前回、こんなのがあるよ～と軽く紹介だけしたQuest Basics、今回はその中身を紹介します。中身は結構いろいろあるので、何回かに分けて紹介していきます。

##　それどこにあるの、ってあなたのために
ここです。以下のGithubのURLからダウンロードしてみてください。おっと、Starをクリックしていいねするのを忘れずに！
https://github.com/hassydhw/QuestBasic

###　今日紹介するのは、シーン名が _01_xx というシリーズです
この01で始まるシーン群は、Oculus Integrationにある各種のコントローラーの3Dモデルがはいったシーンです。中身のコンテンツは正直なにもないのですが、こんなコントローラーを表示してシーンを構築したい、と思ったときにベースとして使えるシーン群だと思っていただければ。

####_01_1は、
初代 Oculus Touchのコントローラーを使ったシーン。見た目がクエストのコントローラーと少し違ってて、コントローラを握ると丸い輪っかが下の方に向いているのでプレイすると少し違和感がありますが、ボタンを押したりスティックを操作するとそれにあわせたアニメーションがついてます。

####_01_2は、
手のモデルを使ったシーン。ボタン操作にあわせて指が動きます。このシーンの目の前にあるCubeを掴んで動かすこともできます。
Cubeについているコンポーネントをみてみると・・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60544/e857544a-2001-dab2-fd05-90799d43e53c.png)
なるほど、RigidbodyとOVRGrabbableスクリプトをつけてやるだけで（実質コード一行も書かなくても）手でつかめるんです！私がすごいんじゃなくてOculusがすごいんだけど。

####_01_3は、
Oculus Questのコントローラーを使ったシーン。これだと握っているコントローラーと見た目が同じになるので違和感がなくなります。でも残念ながら、こいつにはボタンを押したときのアニメーションがついてないんだよねえ・・・

####_01_4は、
左右のコントローラーの場所に細長くしたCubeをつけたシーン。もしBeat Saberのようなゲームを作りたくなったら、このシーンをベースにしていただければ。サンプルだからそっけないCube、というかただの棒だけど、アセットストアでかっちょいい剣のモデルを買って、このCubeの角度や大きさにあわせて配置してくれれば、なんかそれっぽくなると思いませんか？

##　でも、実はそれだけではないんです。
これらのシーンに配置されているOVRCamerarigは、すでにコントローラー付きでプレファブにしてあるので、それをそのままご自分のシーンにいれて使い回すことができます。
OVRCameraRigWithController
OVRCameraRigWithQuestController

##　しかも！
そのプレファブには、すでにOVRPhysicRaycasterスクリプトがついているんです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60544/8c79f93c-fddb-69be-0bba-76c87816a2d9.png)
このあたりの話は次回もう少し詳しくやるつもりなのですが、このスクリプトは、コントローラーからレーザーポインターをだしてゲームオブジェクトを操作したいときに必要なやつ。つまりこのプレファブは、単にコントローラーが付いているという見た目だけでなく、機能的にも、このままで便利に使える優れもの。
ぜひ自分の心向けに使ってください。

##　今日はここまで
今日はシーン名が_01_xx というシリーズの紹介をさせていただきました。非常に基本的なシーンだけど、ここで使っているプレファブが便利設定になっているので使いまわしてほしい、というのも伝えたかったことです。実際、このサンプルの_02_以降のシリーズはこれらのプレファブをつかってできています。

##　ところで、あなた誰？、って方
宣伝っぽくて恐縮ですが、VRプロフェッショナルアカデミーという、VRコンテンツの作り方を教える学校で、初心者向けコースの講師をやっています。このBasicsも、生徒向けの教材の一環として作ったものなのですが、自分の生徒以外にも初心者の方には広く使っていただきたいとおもっています。
VRコンテンツ作ってみたい！っておもった方はこちらも覗いてみてください。
https://vracademy.jp/vrBeginner.html
計算力学技術者（熱流体）2級の資格試験受けてきた その２

[その１](https://qiita.com/iowanman/items/c9c5636600dd895f0911)の続き。

計算力学技術者資格認定事業 標準問題集３ 計算力学技術者２級 第５版７刷 をベースに。

過去問は存在しないので。
とはいえ、がっつりと、どの問題が出たのかを羅列して機械学会に対策されても嫌なので。
察して。

キーワードだけ。

1－4 マクローリン展開と、その誤差
試験中に題意が理解できずにオワタ。今でも理解できない。

1－9 ストークスの定理
ガウスだけじゃな！

3－9 等圧変化 でのTーS線図
等温等圧等容断熱の各 P-V線図 T-S線図 H-S線図は丸暗記した方がいいかも。

3－12 ダイヤモンドの熱伝導
ダイヤモンドは並の金属よりよく熱を通す。

6－6 移流・拡散項

7－1 ノイマン・ディリクレ条件以外の条件（忘れた）に騙されちゃいけない。

8－5 揚力の場合は？

9－4 3次元流れの場合は？
解説に、「3次元ならば」の説明がある。解説もしっかりと読みましょう。

・コンピュータの基礎
1問目が、正しいものを選べだったんだけど、正しいものが無かったんやけど。

新キーワード VPN　SSH　SFTP SCP   ちょっと最近の「常識」が含まれてた。

10－22 MPIの実装
OpenMP　とか OpenMPI とか　MPICH の違いを理解しておかないといけない、
ちなみに筆者は理解してない。


というわけで、筆者の記憶に残ってて怒られない程度に。
標準問題のコピペ問題もたくさんあった。問われてるものが違う場合もあるけど。
図は同じでも、問題文が少し違っていたりと、しっかりと問題文を読むのは必須。
標準問題の解答・解説も目を通しておく必要があると思う。

コンピュータの基礎には少し新しいキーワードが含まれてた。
~~標準問題の選択肢を古文書と呼んでたなんて言えない~~

以上参考にどうぞ。