OmniAICreator/Qiita-1.07M huggingface dataset:
VScodeの設定共有（SettingSync）

#概要
拡張の機能 **"SettingSync"** を利用することで、VScodeの設定を複数の端末で共有できる。
ただいくつかの点で躓いた [^1]ので、手順をまとめておいた。

**2021/1/19追記**
**設定共有が公式の機能として提供されています！**
これから設定される方は次の記事を参考にどうぞ

- [Setting Sync in Visual Studio Code (公式ドキュメント)](https://code.visualstudio.com/docs/editor/settings-sync)
- [Visual Studio Code公式の設定同期を利用する](https://qiita.com/Nuits/items/6204a6b0576b7a4e37ea)


**2019/12/9追記**
**設定方法が変更されてこの記事の内容よりも簡単になりました！**
これから設定される方は次の記事を参考にどうぞ

- [【最新版】VSCodeの設定を共有しよう【Settings Sync】](https://qiita.com/kazurego7/items/3dc5a381811e4d429533#_reference-5431a921ac54266e243f)

##必要なもの
- GitHubアカウント
- SettingSync (VScode拡張機能)

SettingSyncは、アップロード側・ダウンロード側の両方にインストールする。
##設定手順
VScodeにSettingSyncをインストールし、GitHubアカウントを準備した段階から始める。
###準備１
1. VScode上で `Alt+Shift+U`でアップロードをする。
2. [GitHubのページ](https://github.com/settings/tokens)に飛ばされるので、tokenの説明(例:VScode設定共有など)とgistにチェックを入力。![Githubpage.png](https://qiita-image-store.s3.amazonaws.com/0/265266/d88ded96-8b34-271f-0940-363654fef654.png)
3. ページ下にあるGenerate tokenをクリック。
4. 生成されたtokenをテキストファイルなどに保存する。![tokenpage.png](https://qiita-image-store.s3.amazonaws.com/0/265266/0f753645-20b1-2fad-ac4c-c1d76de31ed9.png)

###アップロード
1. VScodeへ戻り、tokenを入力
2. アップロード情報が出力され、Doneが表示されれば完了。

###準備２
1. https://gist.github.com/ユーザー名 に行くとcloudSettingsがあるので選択。ない場合はアップロードに失敗している。![無題2.png](https://qiita-image-store.s3.amazonaws.com/0/265266/18fea487-bb3d-4d67-f715-04683c6fff12.png)

2. cloudSettingsのURLの最後の文字列がGistIDなので保存する。https://gist.github.com/ユーザー名/"この部分がGistID"

###ダウンロード
1. ダウンロードしたいVScodeへ移動して、`Alt+Shift+D`でダウンロードする。
2. tokenとGistIDを入力するとダウンロードが始まる。Done表示で完了。

##tokenとGistIDの変更をしたい場合
設定時のミスやtokenの再生成など行った場合は下記のファイルのjsonを変更すること。
詳細は[SettingSync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync)のページを参照のこと。

###tokenの変更
1. `Ctrl+Shift+P`でコマンドパレットを開いて`Sync`と入力。
2. `Advanced Options`を選択し、続けて`Edit Extension Local Settings`で**syncLocalSettings.json**を開く。
3. `"token":~`の部分を変更する。

###GitsIDの変更
1. **setting.json**を開く。
2. `"sync.gist":~`の部分を変更する。

##参考にさせていただいたサイト
[VSCode の設定を同期する「Settings Sync」を使ってみた](http://neos21.hatenablog.com/entry/2018/05/06/080000)
[Settings Syncの設定方法（Gist IDってなんやねん）](https://meshikui.com/2018/03/09/164/)

[^1]: GistIDとGithubのアカウント名を混同して設定をしてしまった。
アプリのかんたんな作り方

林です。

アプリの開発を続けていると、今の自分を苦しめるのは、過去の自分が書いた当時の「最高の実装」だということに気がつきます。なんでこんなところを複雑に書いてしまったのだという後悔。
**未来は予測できないという原則を忘れて、かえって問題を複雑にしてしまう**のは、人間の性なのでしょうか。

**かんたんな実装は本質的なので、変化に強く、品質も担保しやすい。**
分かってはいるけど、かんたんに作るのは難しく、かんたんを保つのはさらに難しい。
iOSアプリをかんたんに作るにはどうすれば良いのでしょう？

# 壊しやすく、作り直しやすく
**未来は予測できず、問題は起こるまで分からない。**となれば、壊しやすく変更しやすく設計するのが筋というものです。
アプリの大半はViewで、A/Bテストもあれば、要件もよく変わります。
画面は`Storyboard`と`AutoLayout`で、サクッと作ってサクッと捨てるくらいがちょうど良い。

`BaseViewController`や高機能なライブラリ・実装は、深く依存してしまって捨てにくいのでやめましょう。

# スタイルガイド・UIコンポーネントは作り込む

スタイルガイド・UIコンポーネントはアプリのアイデンティティです。
ここを`Storyboard`/`AutoLayout`と連携しやすいように作り込むことで、アプリの一貫性を保ったままで**画面のスクラップ＆ビルドが捗ります**。

WWDCのセッションと、Appleの公式ドキュメントを読みましょう。
`UIKit`をしっかり把握すると、UIコンポーネントの実装はそれほど難しくありません。

UI系のライブラリを使うのはあまりおすすめできません。

# Easy < Simple

可読性のためと思って作ったEasyな実装が、問題の原因になることがよくあります。

- 本来不要なプロトコル
- 普通の関数で良いのに`Extension`や`Computed property`
- プロトコルとジェネリクスが組み合わさった、Swiftyな何か

見た目をよくするために作った実装が、かえって見通しを下げることにつながります。

あるいは、自分が技術をよく理解できないために導入したEasyなWrapperライブラリ。
ある時、問題が起きてデバッグし、内部実装を読んで挙動を理解した頃には、そんなライブラリなんか必要ないことに気がつきます。

結局のところ、ソフトウェア全体の複雑度を下げること(=Simple)が一番Easyだったりします。

# 凝りすぎない

正しい方向に力を入れることができれば、その実装はアプリの強みになることでしょう。
一方で、間違った方向に凝ってしまった実装は、その後長い間チームを悩ませることになります。

**未来は予測できないという原則に立ち返ると、開発初期に頑張ってしまった実装は、つまり長い間チームを悩ませる頭痛の種となることになります。**

先回りせず、問題が起きた時に最小限の解決方法で対処するのが、プロジェクトをかんたんに保つコツです。

# たいていの場合、MVCで十分

ある程度の複雑度まではMVCでも十分に品質を保てます。
iOS SDKはMVCを前提に作られていて、アプリ開発の初期に適切な別のアーキテクチャを選択し、正しく実装するのは難しいものです。

エンジニアにとっては残念なことに、大抵のアプリはユーザーに使われずに消えていきます。
アーキテクチャではなくユーザーの方を見ましょう。

アプリが商業的にも成功すれば、規模も大きくなり、チームのメンバーも増えて、アーキテクチャについて考える余裕もできます。

# データの流れは一方向に

データが複雑に絡み合うと、人間には予想もつかない挙動になってしまいます。
データの流れを一方向に保つことは、変更に強く、処理を追いやすい実装に繋がります。

例えば、ViewがViewに依存する処理は、ありがちですが思わぬ不具合の温床になります。

```swift
button.isEnabled = 　uiSwitch.isOn
```

突き詰めてデータの流れの各ステップに名前をつけると「アーキテクチャ」と呼ばれるものになるのですが、問題は起きるまで解決しないのが信条ですから、まずはデータの流れを一方向に保つという原則だけを徹底するくらいが良いのではないでしょうか。
UnityでのVR開発初心者なのでとりあえずRayを飛ばしてUIの位置を調節する話

#最初に

本記事は以下の本にて得た知見からとりあえずRayを飛ばしてみた記事となっております。遅刻して申し訳ないです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/36899/278048ff-d8f2-30e4-d5c6-bea145086094.png)


## 事前準備

この本ではUnity5.6.0f3を使用しています。が、私はC#6を使いたいのでUnity最新版を取ってきてます。

また予め実行する環境としてHTC Viveを用意しております。

## Rayってなんだ？

以前記事にもしたためたのですが、簡単に言うとRayとは「任意の地点から透明な線を設定した方向に引いたもの」です。Ray上に何かしらのコライダがあるか検知をすることができます。これによって当たり判定系に使用することが可能です。以下、まとめていた記事。

[Unityのレイキャストとは何ぞや？(自分用)](https://qiita.com/4_mio_11/items/4b10c6fe37fd7a856350)

## 作ってみる

まずは自身の視線がどこにあるかを表示するためにMainCameraに対してCanvas追加とRawImageをぶら下げておきます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/36899/051c33ff-7daf-6c30-a84c-ecbec137246b.png)

RawImageには任意のカーソル用画像を設定しておきましょう。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/36899/71e79460-0a63-acc6-dbc0-4d13be836732.png)

カーソルをぶらさげているCanvasを適切な位置に調節するため、Canvasに以下のコードを書いたScriptを追加しておきます。

``` C#
using UnityEngine;

public class CursorPositioner : MonoBehaviour
{
    private float defaultPosZ;

    // Start is called before the first frame update
    void Start()
    {
        defaultPosZ = transform.localPosition.z;
    }

    // Update is called once per frame
    void Update()
    {
        Transform camera = Camera.main.transform;
        
        // 引数として(Rayの発生地点 , Rayが進む方向(今回はcameraの前方へ))
        Ray ray = new Ray(camera.position, camera.rotation * Vector3.forward);
        RaycastHit hit;

        // 引数として(どのRayで検知するか , 衝突したobjectの情報を格納するための変数 , Rayの長さ(今回は未設定のためMathf.Infinity(無限)) , Rayが衝突と判定するレイヤー(今回は未設定のため「Ignore Raycast」以外の全レイヤーが対象))
        if(Physics.Raycast(ray,out hit))
        {
            if(hit.distance <= defaultPosZ)
            {
                transform.localPosition = new Vector3(0, 0, hit.distance);
            }
            else
            {
                transform.localPosition = new Vector3(0, 0, defaultPosZ);
            }
        }
    }
}
```

やってることはとても単純です。
Rayを飛ばして、衝突したオブジェクトの距離に合わせて、その位置にCanvasを移動させているだけ。

ちなみにDebug.DrawRayを使うことでDebug用にRayを可視化することも可能です。

ほかにも「RaycastAll」でRayが衝突した全オブジェクトの情報を得ることが出来たり、「Physics.SphereCast」や「Physics.CapsulCast」で円状や楕円系のRayを半径指定して飛ばすこともできます。また、「Linecast」で始点と終点を設定して任意の場所にRayを張っておくようなAPIも存在しています。

Ray系は使用頻度が高いので押さえておくほうがベターでしょう。

# 参考
- [【Unity】Rayの使い方まとめ](http://megumisoft.hatenablog.com/entry/2015/08/13/172136)
- [【Unity】レイキャストまとめ](http://nopitech.com/2018/07/05/post-725/)
チーム開発でのメンバーとしての心得

新卒で現在の会社に入ってから2年チームメンバーとして働いてきて、自分がメンバーとして意識すべきことを独善的にまとめてみました。
気づいたことがあれば随時更新します。

#まえがき
人にとっては「当たり前だろ！」みたいな内容なんでしょうが、疲弊してくると気付かずに自分本位の考え方をしてしまう自分への戒めと、体系的に整理するためのメモとして記事にしました。
記事の内容を当然だと感じる人はそのまま持続すれば良いと思いますし、あんまり考えたことなかったという人は参考にして頂ければ幸いです。

それでは、以下に意識すべきポイントとその解説・具体的な内容を記載していきます。
#意識すべきポイント
1. 単価の高い人に働かせない
1. 自分が担当した仕事を忘れない
1. 進捗が見える度に報告する
2. 個人依存のリスクを最低限にしておく

##単価の高い人に働かせない
###解説
言葉の通りですが、ここで言う「単価の高い人」はチームリーダーやレビュアを想像してください。
組織的にはレビューなどを通してレビュア（単価の高い人）がメンバー（単価の安い人）をフォローする形になっていますが、
お金のことを考えるレビュアやリーダーがフォロー＋本来の作業で長時間働く状況は良くない状況でしょう。

私の場合は、メンバーの仕事として降ってくる時には具体的な内容になっていることが多く、ただ作業するだけでは「実績を上げる」「業績を出す」ことが難しいと思っていました。
なので、今は単価の高い人からできるだけ仕事を剥ぎ取り負担を減らしてレベルの高い作業に集中してもらい、チーム全体として品質を上げることで効果を出そうと思っています。

###具体的な内容
- 成果物のレビューをしてもらう前や一度してもらった後などに、レビュアが参考にしたドキュメント・知識や考慮すべきデータパターンを共有してもらう。
    - 先に想定されるレビューの観点について品質を担保しておくことが大事。
    - レビュアはそれが実現できていることの確認程度の負担で済むため、上記の想定から漏れたパターンがあるか気付く余力が生まれます。
- 環境の構築や、お便利なスクリプトを作成するなどしてリーダーの作業のフォローをする。
    - 開発やテストで実際に触れているメンバーの方が細かい環境などの情報はリーダーよりも知っている場合があります。その優位性を生かして巻き取れる部分はフォローしてあげましょう。

##自分が担当した仕事を忘れない
###解説
どれだけ小さな改修でも、数ヶ月後に再度改修が入り「何でこうした？」となる場面が多々現れると思います。
基本はチケットに記載されているのが大原則ですが、
言葉や図で説明しきれないものもあるので起票したのが自分であれば経緯や関係者など含めて人に説明できる理解は当然ながら必要です。

私はこういう状況の時、改修内容がOK/NGよりも、その当時の状況から原因を突き止めて次に繋げていくことが大事だと思っています。

###具体的な内容
- チケットに会話した内容を日付と関係者の名前を付けて記載する。
    - 「いつ誰と話したか」で内容を思い出せることは多いです。
- チケットのコメントは他人に読み返されることを意識して状況を書く。
    - 概要に書くレベルの内容ではなくともコメントに残すことでその時の状況や経緯が時間軸でわかります。
- 作業内容や打ち合わせした内容は別のメモとして残しておく。
    - 自分が何を思って何をしたか日付とタイトルを付けて残すだけで思い出しやすくなります。

##進捗が見える度に報告する
###解説
基本の「キ」みたいなものですが、マネジメントが自分の進捗から工数を引き直すのも負担であることを意識しています。
色々な要因で進捗が早まる・遅れることは仕方ないですが、その場合に自分の工数をどこに割くか、どこで巻けるかまで提案するところまでがメンバーの範疇だと思います。
###具体的な内容
- 自分の得意な領域・理解していない領域を把握し、タスクが後者の場合違うメンバーにスイッチしてもらう。
    - あまり知らない領域に関してスイッチできるならすべきです。自分が他領域を学べると言うメリットはありますが、それは余裕があればの話で期日に間に合うのが最優先であることを忘れない。

##個人依存のリスクを最低限にしておく
###解説
どれだけ健康に気を遣っても体調を崩すリスクは常にあります。
「替えが利かない」とは聞こえが良いですが、メンバーレベルであれば上記のリスクを考えるとその状態は避けるべきです。
技術的なことはさておき、どんな作業をすれば良いのかくらいは明確に残しておく方が良いです。

###具体的な内容
- 毎日チケットや仕様書の対応状況は小まめに更新しておく。行き当たりばったりで作業するのではなく、仕様書・そこまでちゃんと作成していなくともせめてToDoリストをまとめて「この先何をすれば良いか」を明確にしておく。
    - 自分が倒れても引継いだ人が見て作業できる。
    - まぁ倒れなくても準備してからやる方が普通に仕事早いと思いますが。
    - 人が読んでわかるように少し意識することが重要です。
- 手順書作成の際などは簡単な動確を先にしたり、他人が読んで理解できる文章にする。図を入れるとか。
    - 用意されたデータやファイルで上手くいかないと実施者が再度準備からしなければならない。それは避けるべき。
    - 内容が属人化されていると最悪。「わからなければ○○に聞いて」とか。

#あとがき
リーダーやマネジメントしている方にはまた違う観点からの意見が出たり、同じメンバーでも賛否あるのかもしれませんが自分の今の思想を今回言葉にしてみました。
他にもこんなこと意識してます、みたいな意見があるとありがたいです。
インスパイアされて『うにょうにょしたメタモン』を描きたくなった。

## はじめに

昼飯を食べながらネットサーフィンしていると、こんな記事を見つけた。

[【CSS】うにょうにょしたメタモンが作りたかった..【円をうにょうにょ】](https://qiita.com/deren2525/items/352e6c3802a29bfcd360)

ので、私もやってみたくなった。

ちなみに、この記事に書かれているコードには、綺麗さなんてものはない。**メタモンのためならば、あらゆるものを犠牲にする「覚悟」と「準備」ができている**。

## 書いた

CSS で何かを描いたことなんてない私にできることは、絶対配置でゴリ押すことくらいだ。
それに適当なアニメーションを付与して動かせば、良い感じのメタモンになるはずだ。

### HTML を書く

まずはいつもどおり HTML を書く。顔、胴体を`div`要素で分けた。

目は`before`, `after`擬似要素で書くので、`div`要素ひとつで問題ないが、口に使う要素は2つ用意しておく。胴体は歪ませた円で構成する予定だが、何個使うかわからないので、とりあえず12, 3個の`div`要素を置いた。


```HTML
<div class="monster">
    <div class="face">
        <div class="eye"></div>
        <div class="mouth">
            <div class="mouth_outer"></div>
            <div class="mouth_inner"></div>
        </div>
    </div>
    <div class="body">
        <div class="metamon"></div>
        <div class="metamon"></div>
        <div class="metamon"></div>
        <div class="metamon"></div>
        <div class="metamon"></div>
        <div class="metamon"></div>
        <div class="metamon"></div>
        <div class="metamon"></div>
        <div class="metamon"></div>
        <div class="metamon"></div>
        <div class="metamon"></div>
        <div class="metamon"></div>
        <div class="metamon"></div>
    </div>
</div>
```

### CSS を書く

次に CSS を書く。とりあえず、メタモンは書かず、メタモンを書くための枠を作る。幅や高さは固定にした。

```CSS
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body, .monster {
    display: flex;
    justify-content: center;
}

.monster {
    position: relative;
    width: 800px;
    height: 800px;
    background: #000;
}

.face {
    position: absolute;
    z-index: 1;
    left: 50%;
    width: 400px;
    height: 300px;
    transform: translateX(-50%);
    border: 1px solid #ffa;
}

.body {
    width: 770px;
    height: 770px;
    background: #000;
    filter: blur(15px) contrast(30);
}

.metamon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #ff69ff;
}
```

### メタモンのシルエット(胴体)を描く

メタモンのシルエット(胴体)を作る。`top`, `left`プロパティを調整してそれっぽくしていく。上半身と下半身で合計2つのアニメーションを作成し、そいつで`width`プロパティをいじってうにょうにょさせる。絶対配置で無理矢理配置するだけなので、特に工夫などはない。

### 完成

そうしてできたメタモンがこちら！
※ Windows 10: Google Chrome, Firefox, Opera で動作確認済み。

<p data-height="606" data-theme-id="0" data-slug-hash="bObXad" data-default-tab="result" data-user="boseki" data-pen-title="Pure CSS Metamon(Ditto)" class="codepen">See the Pen <a href="https://codepen.io/boseki/pen/bObXad/">Pure CSS Metamon(Ditto)</a> by 墓石 (<a href="https://codepen.io/boseki">@boseki</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>




**「なぞのばしょ」に佇み、静かにうごめくメタモンのような生物**...。まるで、**メタモンがメタモンに変身したような姿**をしている。

...つまるところ、はっきり言って**微妙な出来**ということだ。もう少し時間をかけるべきだったかもしれない。色々と悔いは残るが、人生は`Ctrl + Z`できない。立ち止らずに走り続けようと思う。

## まとめ

衝動的に描いた。反省はしているが、後悔はしていない(公開はしているが)。
そして最後に、元ネタの記事に感謝。
初めてのXHP 

# XHP
Hackといえば、XHPというイメージを持つ方も多いのではないでしょうか
XHPはXMLライクに記述し、UIに関するコードの型チェックを行うことができる様もので、
記法自体はReactとほぼ同じものです。
React自体に慣れている方は簡単に利用ができるのではないでしょうか。
このため、Hackを利用する場合はHTMLテンプレートライブラリを使うメリットがあまりありません。

## XHPを利用するには
XHPをフル活用するには、xhp-libをcomposer経由でインストールしておく必要があります。

```json:composer.json
"require": {
  "facebook/xhp-lib": "~2.2"
}
```

または、下記のコマンドになります。

```bash
$ hhvm $(which composer) require facebook/xhp-lib
```

## 書き方

入門ということで、書き方からみていきましょう。
PHPの標準的なHTML出力は次のようの記述します。

```hack
<?hh
$user_name = 'Fred';
echo "<tt>Hello <strong>$user_name</strong></tt>";
```

XHPでは以下となります。

```hack
<<__Entrypoint>>
function run(): void {
    $user_name = 'Hack / XHP';
    echo <tt>Hello <strong>{$user_name}</strong></tt>;
}
```

PHPではシンタックスエラーになる書き方ですので、
これもまた難解なイメージがあるかもしれません。
誤ったタグを記載すると、Typecheckerで警告が出ますので、
記述ミスなども防ぐことができます。
次の様に誤っタグを混在させると、エラーとなります。

```hack
echo <body><tt>Hello <strong>{$user_name}</strong></tt></bod>;
```

```
[Hack] Parsing[1002] XHP: mismatched tag: 'bod' not the same as 'body' [1002]
```

## セキュリティについて
XHPを利用する場合、HTTP Requestなどで悪意のある文字列などに対応するため、
デフォルトでエスケープが有効になっています。

```hack
    $user_name = '<a href="javascript:alert(\'lol\')">javascript:alert(\'lol\')</a>';
    echo <tt>Hello <strong>{$user_name}</strong></tt>;
```

特定の部分でエスケープを無効にする場合は、
XHPUnsafeRenderableインターフェースを実装した要素の描画クラスを用意します。

```hack
final class ExampleUnsafeRender implements XHPUnsafeRenderable {
  public function __construct(
    private string $html,
  ) {
  }

  public function toHTMLString(): string {
    return $this->html;
  }
}

```

さきほどのXHPへの埋め込みは次の通りです。

```hack
require __DIR__ .'/vendor/hh_autoload.php';

<<__Entrypoint>>
function run(): void {
    $user_name = '<a href="javascript:alert(\'hacked!\')">javascript:alert(\'hacked!\')</a>';
    echo <tt>Hello <strong>{new ExampleUnsafeRender($user_name)}</strong></tt>;}

```

## Reactライクに記述する
JSXと同等に小さく要素を切り出し、再利用しやすい形にできます。
要素を作成する場合は、`:x:element` を継承する必要があります。
これまたPHPではありえないシンタックスになりますので、
違和感が感じられる方も多いでしょう。
ちゃんと動作するので大丈夫です！

```hack:src/Acme/Render/Hoge.php
<?hh // strict

class :hoge extends :x:element {
  protected function render(): \XHPRoot {
    return <strong>hoge!</strong>;
  }
}

```

作成した要素は、hh-autoload経由([hhvm/hhvm-autoload](https://github.com/hhvm/hhvm-autoload))で利用できます。
`:hoge` は、`<hoge/>` として埋め込むことができます。

```hack
<?hh 

require __DIR__ .'/vendor/hh_autoload.php';

<<__Entrypoint>>
function run(): void {
    echo <hoge/>;
    echo <hoge/>;
    echo <hoge/>;
}

```

VSCの[Hack plugin](https://marketplace.visualstudio.com/items?itemName=pranayagarwal.vscode-hack) や、
Nuclideを利用している方は要素からクラスへジャンプすることなどができます。

まずは基本の記法をしっかりと理解しておきましょう。
RXJS HotとColdの違い

# 前提
Observableについて理解する必要があります。
https://qiita.com/ryuseikurata/private/fa5227a1203af86a19ab
https://qiita.com/ryuseikurata/private/45faa9cd8f50a390b10c


# Cold
subscribeすることで初めて値が流れるようになります。

```typescript
//subscribeするまでは、動きません。
const cold = new Observable(function subscribe(observer) {
  console.log('subscribed');
  observer.next(Math.random());
  observer.complete();
});
//subscribeすることで動きます。ストリームを二回稼働させている状態です。
cold.subscribe((num) => console.log('sub 1:', num));
cold.subscribe((num) => console.log('sub 2:', num));
```

```typescript
//1回目のsubscribe
subscribed
sub 1: 0.09805969045
//2回目のsubscribe
subscribed
sub 2: 0.1231231231231
```

# Hot
hot変換までの処理は、値が流れるようにします。
したがって、それまでのストリームの処理は一度しか行われず、その後は返り値で作られたobservableが残ります。


```typescript
//publish()によって、hot変換され、動く状態になっています。
const cold = new Observable(function subscribe(observer) {
  console.log('subscribed');
  observer.next(Math.random());
  observer.complete();
});
const hot = cold.publish();
//hot変換後の返り値で作られたメッセージを流しています。
hot.subscribe((num) => console.log('sub 1:', num));
//hot変換後の返り値で作られたメッセージを流しています。
hot.subscribe((num) => console.log('sub 2:', num));
//connectで稼働します。
hot.connect(); // <-- this subscribes the inner Subject to the cold source
```

```typescript
//connectで稼働し、subscribedがはじめにきます。
subscribed
//hot変換後のsubscribeなので、Math.randome()が返り値として残ったobservableを処理しています。
sub 1: 0.249848935489
sub 2: 0.249848935489
```

# 引用
https://christina04.hatenablog.com/entry/2017/02/26/140212
【PHP】二次元配列をfor文で作る

#はじめに
PHPで配列を扱う方法はたくさん実例があります。サンプルプログラムもたくさんありますが、ほぼすべてが冒頭で配列の要素も定義しています。
例えばこんな感じ。

```PHP
$table = array(
            array(10,20,30,40,50);
            array(11,21,31,41,51);
            array(12,22,32,42,52);
            array(13,23,33,43,53);
         );
```

ですが、私が知りたいのはプログラム内で配列を作る方法でした。

#二次元配列をfor文で作る
いろいろ試してなんとか二次元配列が作れたのはこちらです。

```PHP
//二次元にしたい配列
$table = array();
//一次元の配列
$array_row = array();

for ($i=0; $i <4 ; $i++) {
//一次元の配列を初期化する
  $array_row = [];
//一次元分の配列を作る
  for ($j=0; $j < 5; $j++) {
//今回は0〜99の乱数をセットする
    $array_row[] = rand(0,99);
  }
//行単位で追加する
  $table[] = $array_row;
};
```
これがベストプラクティスかわかりませんが、例のひとつとして参考になれば幸いです。
階層的決定性ウォレットを実装する

[こちら](https://medium.com/@ryoutakogaenzawa/%E9%9A%8E%E5%B1%A4%E7%9A%84%E6%B1%BA%E5%AE%9A%E6%80%A7%E3%82%A6%E3%82%A9%E3%83%AC%E3%83%83%E3%83%88%E3%82%92%E5%AE%9F%E8%A3%85%E3%81%99%E3%82%8B-8ba4a766e1af)へ移動
自己紹介

# 自己紹介
はじめまして！
データサイエンスや機械学習を勉強中のさくらです。
学び興味を持ったことを自分の備忘録として書いていきたいと考えてます。文章を書くことになれていないのと似非エンジニア（ちなみに仕事もエンジニアでは無いです）なので、お見苦しいところもあるかと思いますが、お目汚しした際には生暖かく見守っていただけましたら。。！
# 今後の目標
ざっくりした目標を自分向けに書きます！
1. 2019年2月迄に統計検定2級取得
2. 2019年3月中にはkaggleに投稿
（ここで金を取るとかは言えないチキン）
# 最終目標
データサイエンティストとしてお仕事をしていけるようになりたいと考えております。なので、ネット上でも師匠となってくれる人がいたら嬉しいな😁
Youtube のコメントを取得する in Python

Youtube の API を使って、動画のコメントを取ってきます。

## Requirement
- Youtube API Key
    - 取得方法は説明しません
- YouTube Data API v3
- anaconda3-5.2.0
    - Python 3.6.5

## Program
```python:youtube.py
import requests
import json

URL = 'https://www.googleapis.com/youtube/v3/'
API_KEY = 'your key'

def print_video_comment(video_id, n=10):
    params = {
        'key': API_KEY,
        'part': 'snippet',
        'videoId': video_id,
        'order': 'relevance',
        'textFormat': 'plaintext',
        'maxResults': n,
    }
    response = requests.get(URL + 'commentThreads', params=params)
    resource = response.json()

    for comment_info in resource['items']:
        # コメント
        text = comment_info['snippet']['topLevelComment']['snippet']['textDisplay']
        # グッド数
        like_cnt = comment_info['snippet']['topLevelComment']['snippet']['likeCount']
        # 返信数
        reply_cnt = comment_info['snippet']['totalReplyCount']

        print('{}\nグッド数: {} 返信数: {}\n'.format(text, like_cnt, reply_cnt))

video_id = 'hoge'
print_video_comment(video_id, n=5)
```
## Usage
```
$ python youtube.py
みんなの期待通りの内容だったかな！？
グッド数: 421 返信数: 34

微妙に太っている所がまた好きww
グッド数: 151 返信数: 3

はい、シンギュラリティ で笑いを我慢できなくなった
グッド数: 102 返信数: 4

*When the art style of an anime is vastly different compared to the manga's art style*
グッド数: 71 返信数: 1

サムネの顔で絶望した、訴訟
グッド数: 112 返信数: 0
```

## Hints
### videoId
```python
video_id = 'd1tnWnzWzm4'
```
`video_id` は動画 URL のこのパラメータのことです.
![スクリーンショット 2018-12-09 1.09.51.png](https://qiita-image-store.s3.amazonaws.com/0/245792/50ff8a6b-1323-b068-4f3d-926b25d56e5a.png)

### order
```python
'order': 'relevance',
```
デフォルト（`time `）では、直近のコメントを取ってきます。
`relevance` を指定することで、グッド数とコメント数が多い順に取ってこれます。

### textFormat

```python

'textFormat': 'plaintext',
```
コメントのフォーマットを html か plain text か選択できます。
デフォルトは html です。



## API limits
[こちら](https://developers.google.com/youtube/v3/getting-started#quota)をみてください。

## Regards
YouTube Data API にはたくさんの機能が用意されているので、それと組み合わせて

- どんなコメントがグッドまたは返信されやすいのか
- チャンネルごとの視聴者の民度
- 視聴回数の割にコメント数が多い（少ない）動画

などを分析してみるのはおもしろそうです。

## Reference
- [YouTube Data API ドキュメント](https://developers.google.com/apis-explorer/?hl=ja#p/youtube/v3/)
- [公式サンプル](https://developers.google.com/youtube/v3/code_samples/)
- [利用制限](https://developers.google.com/youtube/v3/getting-started#quota)
テクノロジーは人が本当に集中すべきものに集中できるようにするために存在するべきだ

※本記事では固有名詞を意図的に記載しておりませんが、なんらかのプロダクトやサービス、テクノロジーをご自由に思い浮かべながら、参照していただけますと幸いです。

## サービスやプロダクトに求められるもの
ユーザーが利用するサービスやプロダクトには、大きく次の2点が求められます。

1.有用性・・・利用することでメリットを感じられる
2.信頼性・・・継続的に安定してメリットを享受できる

**◆ 有用性**
時間、金銭、健康、感情などに何らかの影響が生じるものであり、ユーザー自身が利用することによってメリットを感じられること。

* ユーザーが抱えている問題を解決する
  * 長時間かかっていたものが、短時間ですむようになる。
  * 手作業で行なっていたものが、自動で処理される。
  * 問題は解決しないが、その対処を代行してくれる。
* ユーザーが新しい価値を体感できる


**◆ 信頼性**
有用性が確実に提供されることを保証し続けるものであり、安定時にはユーザーは意識しないものだが、不安定時はネガティブな評価としてユーザーに意識されやすいです。

* ユーザーが同じ操作を繰り返すと、必ず同じ結果を返してくれる。（期待値と結果の一致）
* ユーザーが使いたい時に、いつでも、どこでも使える。
* ユーザーが危険にさらされず、安心して利用することができる。


## テクノロジーに求められるもの

テクノロジーは、サービスやプロダクトを構成する重要な要素です。
テクノロジーの選択・活用の先に、サービスやプロダクトが成り立ちます。

ですが、どういった技術で構成されているかをユーザーが意識する必要はありません。

* 例えば、電話を使えば離れた相手と会話することができますが、どうやってそれが実現できているのかをユーザーは意識する必要はなく、その意識は相手との会話の内容に向いています。
* 自動車やバイクに乗れば速く移動できますが、どうして速く動くのかをユーザーは意識する必要はなく、意識は目的地への道筋に向いています。

このようにユーザーは、そのサービスやプロダクトのことを知っていても、それを実現するテクノロジーについては、あまり意識することなく利用しているのです。サービスやプロダクトを通して、その外側に意識が向かっているのです。

ここで言いたいことは、

**「テクノロジーは、人が本当に集中すべきものに、集中できるようにするために存在するべき」**

ということです。

もし、思ったように動かなかったり、毎回違う振る舞いをするようなサービスやプロダクトでは、ユーザーの意識は、その内側の挙動に向かってしまいます。外側に本来やりたいことがあったはずなのに、意識も時間も労力も余分に割かれてしまうわけです。

本当によいサービスやプロダクトの要件は、解決される課題や新しい価値体験の細部について、ユーザーが意識しなくてもよい状態を生み出すことです。このような**「意識に余白がある」**という状態は、その余白の分だけユーザーが**「本当に集中したいことに意識を集中できる」**ということにもつながっていきます。

IT技術は進化も変化も著しく、新しいテクノロジーもどんどん生まれています。ですが、どのようなテクノロジーも、根底として重要なメッセージは、今も昔も、そしてこれからも変わらないのではないか。

そんな考えが頭をよぎったので、文字に起こしました。答え合わせは、これから先の未来を通して、ブラッシュアップしていければと思います。
PixiJSでグラデーションを描きたい

[PixiJS](http://www.pixijs.com/)は2DのWebGLを使いたいときにとても便利なライブラリですが、グラデーションの描画が機能としては用意されていないので、Canvasと組み合わせて実装する必要があります。

といっても、そんなに大げさなことではなく、Canvas要素を用意してグラデーションを設定して、それをもとに[Sprite](http://pixijs.download/dev/docs/PIXI.Sprite.html)を生成するだけなので、わりとシンプルです。

* [Pixi.Application](http://pixijs.download/dev/docs/PIXI.Application.html)
* [Pixi.Sprite.from()](http://pixijs.download/dev/docs/PIXI.Sprite.html#.from)

```js
const createGradient = (width, height, colorFrom, colorTo) => {
  const canvas = document.createElement('canvas')  
  const ctx = canvas.getContext('2d')
  const gradient = ctx.createLinearGradient(0, 0, width, 0)
  
  canvas.setAttribute('width', width)
  canvas.setAttribute('height', height)

  gradient.addColorStop(0, colorFrom)
  gradient.addColorStop(1, colorTo)

  ctx.fillStyle = gradient
  ctx.fillRect(0, 0, width, height)

  return PIXI.Sprite.from(canvas)
}

const app = new PIXI.Application({
  width: 500,
  height: 300
})

const gradient = createGradient(500, 300, '#acb6e5', '#86fde8')

app.stage.addChild(gradient)

document.getElementById('app').appendChild(app.view)
```

<p data-height="450" data-theme-id="0" data-slug-hash="GPKbyx" data-default-tab="result" data-user="noplan1989" data-pen-title="Create Gradient With PixiJS" class="codepen">See the Pen <a href="https://codepen.io/noplan1989/pen/GPKbyx/">Create Gradient With PixiJS</a> by noplan1989 (<a href="https://codepen.io/noplan1989">@noplan1989</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
Azure Functionsの1回実行当たりの料金を試算する

Azure Functionsの料金表が難しかったので、1回実行当たりの金額をどうやって試算するか調べました。
内容は執筆時点（2018年12月）のものです。

# Functionsの種類
まずFunctionsには、App Serviceプランと従量課金プランの2種類があります。

## App Serviceプラン
App Service上で実行されるため、課金額はApp Serviceの料金が掛かります。
Basic以上のプランが必要な為、それなりに金額は掛かります。

[App Service料金表](https://azure.microsoft.com/ja-jp/pricing/details/app-service/windows/)

App Serviceプランを利用するメリットは、10分以上の実行が必要なときや、常にバックグラウンドでインスタンスを待機させたい場合などが挙げられます。（従量課金プランだと初回実行時は立ち上がるまで少し時間がかかる）

## 従量課金プラン
1回実行当たりの実行時間と実行回数によって課金されるプランです。
毎月の無料枠がかなりお得ですが、はたして自分の作ったFunctionsは無料枠に収まるのか？
が気になったので、従量課金プランの1回実行当たりの金額を試算します。

まずは料金表を見てみましょう。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/180335/ebdf6769-d008-e128-91a2-3f5284e1ab0b.png)

実行回数はいいとして、GB秒当たりの実行時間の試算方法がよく分かりません。

# 料金算出

## 実行時間算出
メトリックから確認することができます。

* すべてのサービスからメトリックを開きます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/180335/b937c2b7-caec-cbbf-4f66-10335b69d4de.png)

* どのメトリックを見るか入力していきます。まずは該当のFunctionsが所属するリソースグループを選びます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/180335/e5535894-a637-b541-6751-1eafa9d34a83.png)

* [RESOURCE]から該当の[App Service]を選んでください。（App Service Planではないです）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/180335/5ff13542-6216-2be6-bbef-8044ae58c51c.png)

* [METRIC]から[Function Execution Units]を選択してください。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/180335/8295cd99-183e-806b-5f6d-768ca629ce00.png)

* [AGGREGATION]から[Max]を選択してください。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/180335/a843ec01-7827-4bea-c2f8-39e6bd861ebc.png)

* 表示を[Last 30 minutes]に変更します。（ここは表示の問題なのでおまかせで）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/180335/96b26167-c772-e230-9f33-9d02ca592a06.png)

* メトリック値を選択すると、この例ではある1回の実行が[4.01M]と表示されました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/180335/9f306527-ebb5-41b9-fb64-eb2413d16bd9.png)

* 4.01Mは以下の式でGB秒に変換できます。

```
4.01M = 4,010,000
4,010,000 / 1,024,000 = 3.91 GB秒
```

* GB秒当たりの課金額は0.001792円なので、

```
3.91 GB秒 * 0.001792 円 = 0.007 円
```

* このFunctionsは1回実行当たり大体0.007円だということが分かりました。

## 実行回数算出
* メトリック[Function Execute Count]を確認することで分かります。

* 100万回実行までは22.40円なので、実行回数は分かりやすいですね。

## 合計金額
仮にこのFunctionsが毎日1回実行されるとした場合の月の課金額は以下となります。

```
実行時間 : 0.007円 * 31日 = 0.217円
実行回数 : 22.40 円
合計金額 : 0.217 + 22.40 = 22.617円
```

## 毎月の無料枠

```
実行時間 : 400,000 GB 秒
実行回数 : 100 万実行回数
```

先程の例だと余裕で収まります。無料枠お得過ぎますね！
アンエスケープ


1文字ずつがんばる。[CoSVON](https://github.com/cielavenir/cosvon/blob/master/lib/cosvon.rb)での経験が生きた。

\# そういえばあれって **CodeIQ管理者ページの出力するcsvのエスケープが壊れている不具合** を抱えていたんでパーサを再発明する以外になかったんでしたっけ--;;;

```rb:tyama_henae29.rb
#!/usr/bin/ruby
#http://nabetani.sakura.ne.jp/hena/orde29unes/
#https://qiita.com/Nabetani/items/f2db9b916c0a301b744f

def solve(s)
	r=[]
	k="".dup
	escape=nil
	i=0
	while i<s.size
		if s[i]=="'"
			if !escape
				escape="'"
			elsif escape=="'"
				escape=nil
			else
				k<<"'"
			end
		elsif s[i]=='"'
			if !escape
				escape='"'
			elsif escape=='"'
				escape=nil
			else
				k<<'"'
			end
		elsif s[i]=="/"
			if escape
				k<<"/"
			elsif s[i+1]=="/"
				i+=1
				k<<"/"
			else
				r<<k
				k="".dup
			end
		else
			k<<s[i]
		end
		i+=1
	end
	r<<k
	if escape || r.any?(&:empty?)
		"-"
	else
		r*","
	end
end

while gets
	puts solve($_.chomp)
	STDOUT.flush
end
```
[AWS]RDSのメンテナンス時間変更

IBM CloudのフルマネージドDBの話で、クラウド側で実施するパッチ適用等のメンテナンスについて「（現状は）メンテナンスの時間をずらすことはできない」という話があり、AWSの場合も確認しました。

DB インスタンスのメンテナンス
https://docs.aws.amazon.com/ja_jp/AmazonRDS/latest/UserGuide/USER_UpgradeDBInstance.Maintenance.html

>更新を利用できる場合は、いずれかのアクションを実行できます。

> - メンテナンス項目の適用を延期する。
> - メンテナンス項目をすぐに適用します。
> - メンテナンス項目を次のメンテナンス時間中に開始するようにスケジュールを設定します。
> - 何のアクションも実行しない。

適用タイミングをずらせるのは何となく知っていましたが、今すぐ適用、というのもあるんですね。

まあIBM Cloudでもそのうちできるようになるのでしょうが、現時点ではまだ他のクラウド基盤に遅れを取っていると言わざるを得ないかなと思います。
（セミナー等では「インフラ面ではほぼ追いついた」と言っていましたが）

※参考
必要な Amazon RDS のメンテナンス中にダウンタイムを最小化するにはどうすればよいですか?
https://aws.amazon.com/jp/premiumsupport/knowledge-center/rds-required-maintenance/
ABC 115

2回目の参戦．
クソバイト先のクソのせいで20時に終わるはずが21時まで掛かり，コンテスト参加に10分ほど遅れる．
結果は3完で，パフォが672．今回はC問題が簡単で，D問題に1時間ほど使えた．（がTLEで弾かれた・・・）

#[A問題](https://beta.atcoder.jp/contests/abc115/tasks/abc115_a)

```python:main.py
D = int(input())
if D == 25:
  print('Christmas')
elif D == 24:
  print('Christmas Eve')
elif D == 23:
  print('Christmas Eve Eve')
elif D == 22:
  print('Christmas Eve Eve Eve')
```
見返すとアホな実装だなーと思うが，帰ってきてノータイムで解いたので多めに見る．


#[B問題](https://beta.atcoder.jp/contests/abc115/tasks/abc115_b)

```python:main.py
N = int(input())
price = [int(input()) for _ in range(N)]
price.sort()
price[N-1] = int(price[N-1] / 2)
print(sum(price))
```
特に問題なし．


#[C問題](https://beta.atcoder.jp/contests/abc115/tasks/abc115_c)

```python:main.py
N, K = map(int, input().split())
h = [int(input()) for _ in range(N)]
h.sort(reverse=True)
mini = 10 ** 9
 
for i in range(N-K+1):
  a = h[i] - h[i+K-1]
  if a < mini:
    mini = a
    
print(mini)
```
これも特に問題なし．ここまで20分ほどで全て一発AC．


#[D問題](https://beta.atcoder.jp/contests/abc115/tasks/abc115_d)
ここまで順調だったのに・・・．どうやら僕はクリスマスに見合う人間ではなかったようだ．

```python:main.py
N, X = map(int, input().split())

def burger(number):
  if number == 0:
    return 'P'
  if number < 0:
    return 0
  ret = 'B' + burger(number-1) + 'P' + burger(number-1) + 'B'
  return ret

burger_str = burger(N)
print(burger_str[0:X].count('P'))
```
これはTLEで弾かれる．
この後は，「次元ハンバーガーを最後まで作る必要はあるのか」と考え，再帰中にretの文字数がxの値を超えたら，，，みたいなことをしていたらタイムオーバー．

###模範解答

```python:main.py
N, X = map(int, input().split())

a, p = [1],[1]
for i in range(N):
  a.append(a[i] * 2 + 3)
  p.append(p[i] * 2 + 1)

def f(N, X):
  if N == 0:
    return 0 if X <= 0 else 1
  elif X <= 1 + a[N-1]:
    return f(N-1, X-1)
  else:
    return p[N-1] + 1 + f(N-1, X-2-a[N-1])

print(f(N, X))
```

次も3完目指していこう．
React 16.6の新機能、React.lazyとReact.Suspense を使った非同期処理

React v16.6 から利用可能になった```React.lazy```ならびに```Suspense```を早速使用してみました。
この機能の嬉しいところは非同期処理時におけるコンポーネントの扱いが非常に楽になるということです。


# レガシーな実装方法

この機能が追加される以前は非同期で処理を行う際にローダーを表示して処理が終了したら結果を画面に表示するといった実装する時に、以下のような方法を採用していました。

- 処理中かどうか判断するステート ```isExecuting``` を用意する。
- 処理開始時に```isExecuting ```をtrueにする
- ```isExecuting ```がtrueの時に「Please wait...」というテキストを表示
- 処理完了時に結果を表示

つまり、ステートが変更されたらコンポーネントをレンダリングするという、Reactの仕組みに則って実現させるという方法になります。

コードに起こすと以下のような感じです。以下の例ではsetTimeoutで５秒間待っている間は「Please wait...」と表示して、完了したら「Done!」という文言を表示するという単純な例です。


```jsx:App.js
import React, { Component } from 'react';
import MyComponent from './MyComponent';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <MyComponent/>
        </header>
      </div>
    );
  }
}

export default App;
```

```jsx:MyComponent.js
import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isExecuting: false,
      result: ''
    }
  }
  componentDidMount() {
    this.timeout(5000);
  }
  render() {
    return (
      <div>{this.state.result}</div>
    )
  }
  timeout(msec) {
    this.setState({isExecuting: true, result: 'Please wait...'});
    setTimeout(() => {
      this.setState({isExecuting: false, result: 'Done'});
    }, msec);
  }
}

export default MyComponent;
```

# React.lazyおよびReact.Suspenseを使った実装方法

## React.lazy()

ざっくりいうと遅延ロード用のコンポーネントをimportするための機能です。この方法で読み込んだコンポーネントを```React.Suspense```を使ってfallbackの設定などができます。

```jsx:React.lazy()を使ったインポート方法
const LazyComponent = lazy(() => import('./LazyComponent'));
```
## React.Suspense

React.Suspenseは遅延ロード用のコンポーネントをラップするコンポーネントで、このコンポーネントを使ってfallbackの設定をすることができます。

```jsx:Suspense
<Suspense fallback={<div>ロード完了まで表示させたい内容</div>}>
	<LazyComponent>
</Suspense>
```

## 全体のコード

以下が通しで実装したコードです。

```jsx:App.js
import React, { Component, lazy, Suspense } from 'react';
// 遅延ロードしたいコンポーネントを呼び出す
const LazyComponent = lazy(() => import('./LazyComponent'));

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <Suspense fallback={<div>Please wait...</div>}>
            <LazyComponent/>
          </Suspense>
        </header>
      </div>
    );
  }
}
export default App;
```

```jsx:LazyComponent.js
import React, { Component } from 'react';

let result = null;
const timeout = (msec) => new Promise(resolve => {
  setTimeout(resolve, msec)
});

const LazyComponent = () => {
  if (result !== null) {
    return (
      <div>{result}</div>
    )
  }
  throw new Promise(async(resolve) => {
    await timeout(1000);
    result = 'Done'
    resolve();
  })
};

export default LazyComponent;
```

簡単なコードなので実感が湧きにくいですが、ステートを使わない分かなりスマートに記述することが可能になります。


ちなみに、これらの機能はサーバーサイドレンダリングでは使えないようで、今後のアップデートで実装されるのかもしれませんが、公式ドキュメントではサーバーサイドで使う場合には[Loadable Component](https://github.com/smooth-code/loadable-components)というものが推奨されています。


出典：
[React v16.6.0: lazy, memo and contextType](https://reactjs.org/blog/2018/10/23/react-v-16-6.html)
Firebase FunctionsとFirestoreでAPIのようなものをやってみた

よーしパパファイヤーベース使っちゃうぞー。

と思ったり思わなかったりして、Firebaseで何かやってみるべくさしあたりAPIのようなものを作ってみました。

Firebaseとかfunctionsとかfirestoreについての説明は省略します。

charactersというコレクションにドキュメントをCRUDするAPIです。
Firebase的には `HTTPリクエストで関数をトリガー` ということになります。

TypeScriptやNoSQLはほぼ初めてなので手探り的に作りましたがなんとか動いたのでまとめてみます。


# さいしょに
Firebaseのコンソールでプロジェクトを作って、Firebase CLIをインストールしましょう。

`$ firebase init functions`
`$ firebase init firestore`
でファイル類の雛形が作成されます。

コードが書けたらデプロイ。
`$ firebase deploy --only functions`
`$ firebase deploy --only firestore`


# API

## CREATE

`POST /characters`

```typescript:functions/src/index.ts
api.post('/characters', (req, res) => {
  const character = {
    "name": req.body.name,
    "description": req.body.description
  };
  firestore.collection('characters').add(character).then(_r => {
    res.json(character);
  }).catch(err => res.send(err));
});
```

こんなふうにリクエストを送ってみると

![post.png](https://qiita-image-store.s3.amazonaws.com/0/118352/c2aac511-8808-cb22-78d3-e54d6f521bf3.png)

できました。やったね！
ドキュメントのID (UrA...) は自動で振られるようです。

![post-result.png](https://qiita-image-store.s3.amazonaws.com/0/118352/18d0fdfd-e4b7-d4d0-ba54-40af3b66d2ba.png)

## READ

`GET /characters/:id`

```typescript:functions/src/index.ts
api.get('/characters/:id', (req, res) => {
  const record = firestore.collection('characters').doc(req.params.id);
  record.get().then(result => {
    res.json(result.data());
  }).catch(err => res.send(err));
});
```

さっき作ったドキュメントのIDを指定して、こんなふうにとれます。
![get.png](https://qiita-image-store.s3.amazonaws.com/0/118352/8933c651-311d-0d93-b46d-b6b7e1147684.png)

## UPDATE

`PATCH /characters/:id`

```typescript:functions/src/index.ts
api.patch('/characters/:id', (req, res) => {
  const record = firestore.collection('characters').doc(req.params.id);
  const character = {
    "name": req.body.name,
    "description": req.body.description
  };
  record.update(character).then(_r => {
    record.get().then(result => {
      res.json(result.data());
    }).catch(err => res.send(err));
  }).catch(err => res.send(err));
});
```

さっきのドキュメントを一部書き換えます。
![patch.png](https://qiita-image-store.s3.amazonaws.com/0/118352/a0183449-7f10-0e0a-fcc5-3fefc0f63f1d.png)

変わった！
![patch-result.png](https://qiita-image-store.s3.amazonaws.com/0/118352/8f04bd13-e8f1-dba3-0114-68c3e7d47a7e.png)

## DELETE

`DELETE /characters/:id`

```typescript:functions/src/index.ts
api.delete('/characters/:id', (req, res) => {
  const record = firestore.collection('characters').doc(req.params.id);
  record.delete().then(result => {
    res.send('deleted');
  }).catch(err => res.send(err));
});
```

これで消せます。
![delete.png](https://qiita-image-store.s3.amazonaws.com/0/118352/d09ba1da-5d95-5e60-8782-587988d01767.png)


# まとめ
実用にあたってはもちろんバリデーションや重複チェックやその他いろいろな処理を追加しないといけないわけですが、一番基本的な動作を行うところまではこんな感じでした。

Firestoreのセキュリティまわりも本来はもっといろいろ設定することがあるはずなのでこれから勉強ですね。

せっかく作ったのでそれっぽい名前で置いておきます。
https://github.com/asny23/firebase-functions-api-sample
Go で Enum を定義するときのちょっとした気遣い

@mosaxiv さんの代打で、Go で Enum を定義するときに気になっていたこととその解決策についてお話します。

Go にはデフォルトで Enum を定義する仕組みがないため、一般的に `const` 宣言内で `iota` を使って次のように定義することが多いと思います。

```go
type Type int

const (
	a Type = iota
	b
	c
)
```

しかし、Go には [Zero-Value](https://golang.org/ref/spec#The_zero_value) といって変数を初期化する際に明示的に値を代入しない場合、デフォルトで割り当てられる値が決まっています。例えば `int` 型の変数の場合「0」です。

すると `iota` は「0」から始まる連続する整数を生成する識別子であるため、上で宣言した `a` がデフォルト値でもない限り、変数を初期化する際に明示的に値を指定していないにも関わらずデフォルト値でもない `a` で勝手に初期化されてしまっている状態が発生します。

文章では少し伝わりにくいと思うのでコードで示すと

```go
type S struct {
	T Type
}

func main() {
	s := S{}
	switch s.T {
	case a:
		fmt.Println("a") // <- 実際にはここを通る
	case b:
		fmt.Println("b")
	case c:
		fmt.Println("b")
	default:
		fmt.Println("default") // <- s.T に何も設定していなかったらここを通ってほしい
	}
}
```

という具合です。

この問題は `iota` を「1」から始めることで解決できます。このちょっとした~~おせっかい~~気遣いによって次のように意図した処理が行われます。

```go
const (
	a Type = iota + 1 // <- 1から始める
	b
	c
)

func main() {
	s := S{}
	switch s.T {
	case a:
		fmt.Println("a")
	case b:
		fmt.Println("b")
	case c:
		fmt.Println("b")
	default:
		fmt.Println("default") // <- s.T に何も設定していないのでここを通る！
	}
}
```

ただこの解決策がベストかどうか分からないので、もう少しいい案があるよ！という方はコメント欄までお願いします:bow:
Wio LTE JP Version を使用して「リアルいいねボタン　ボタン花ちゃん」を作った話 


　今日はSeeed社が開発しているマイコンモジュール[「Wio LTE JP Version」](https://www.seeedstudio.com/s/wio%20lte.html)を使用した事例をご紹介しようと思います。その事例とは、「リアルいいねボタン　ボタン花ちゃん」。下の写真が実物となります。

![00003_Moment.jpg](https://qiita-image-store.s3.amazonaws.com/0/322498/51092b95-588d-7b28-1ae8-e076e431dff0.jpeg)

このボタン花ちゃん、頭脳はWio LTE JP Version、本体はロボット、こんな機能が付いています。

+ 超音波センサと音声再生モジュールがついており、人が近づくと頭の円形LEDが光って観光地案内を話し出す
+ いいね！と頭のボタンを押すとボタンが光り、サーボモータで腕をバタバタ動かし、「ありがとう」と音声再生モジュールで再生させる
+ ボタンが押された回数をカウンタで表示する
+ ボタンが押された回数をLTE通信でクラウドに飛ばし、ウェブマップにヒートマップとして表示する

　このIoTデバイスは、2017年に開催されたNagoya Hackathonで生まれ、2018年のMaker Faire Tokyo、Ogaki Mini Maker Faire 2018、有松天満社春季大祭、有松絞り祭りで実際に様々な人に体験してもらいました。ここで、なぜWio LTE JP Versionを使用することになったのか、経緯を少しお話します。

##Wio LTE JP Verionをなぜ使用したのか

　ボタン花ちゃんは、「観光地の隠れた魅力＝「いいね」を誰でもが現地から発信し、ウェブ上で誰でもがいいねの数が見えるようにすることで、小さな観光地を応援したい」という思いからNagoya Hackathon2017の場で生み出されました。ここで問題となったのが、「どうやっていいね！の数情報をクラウドに飛ばすか」。というのも、小さな観光地だとWiFi環境が整備されていない所も多いからです。現地の人に使ってもらうには、置いてスイッチを入れるだけでネット環境に繋げるようにしたい･･･さてどうしたものか。Seeedさんがいるじゃないか！

　一応、ソフト側の構成や設計を考える際にBLE通信とLTE通信の2通りの方法での構築を検討していましたが自分達だけでは限界がありましたので、Nagoya Hackathonの協力企業であったSeeedさんに技術的な相談をすることに。そこでmatsujirushiさんから、「LTEの通信を活用したIoTの仕組みを構築したいなら、Wio LTEでSORACOMの通信を使うと比較的容易にプロトタイプ開発が出来ますよ」というアドバイスをいただきましたので、最終的にWio LTE JP Versionを使用することにしました。

##Wio LTE JP Versionのここが良かった！
Wio LTE JP Versionを（IT素人）ユーザーとして使ってみて良かったことは、

+ LTE通信なのでWiFi環境がないところでも通信ができる（神社とかにも置けちゃう）
+ Grove コネクターでセンサ類を差すだけでプロトタイプが素早くできる（差すだけ！簡単！）

LTE通信がWiFi環境がない所でもIoT製品を広められる可能性を持っていますし、何よりも「差すだけ」でプロトタイプが作れる点が魅力的です。これで、IoTへの心理的なハードルもちょっぴり下がりました。

##まとめ

　実際に、Wifi環境がない場所（例：名古屋市緑区にある有松地域）でのお祭りで体験をしてもらい、お子様をはじめとした方々から「面白い」、「これいいね！」とボタンを押していただきました。IoTでこんなことができたらいいな、というアイディアを簡単にプロトタイプとして形にできた点でWio LTEは使いやすいマイコンだな、と感じています。色々なアイディアを形にできそうですね！
DxOpalを使ってゲームを作ってみた感想

[るびまの記事](https://magazine.rubyist.net/articles/0057/0057-GameProgramingWithDXOpal.html)でDxOpalを知り、想像以上のポテンシャルにそれ以来、コツコツとDxOpal上でゲームを作っています。
今回はゲーム作りの中で感じたDxOpalの魅力を書いていきたいと思います。
# 開発中のゲームの紹介
![powerwave.jpg](https://qiita-image-store.s3.amazonaws.com/0/322041/c9ef12e4-27ab-7c8d-aa5b-c7a44d7f1888.jpeg)
[ドールズイングラムオラトリオ](http://www.cranehouse.dojin.com/wordpress/?page_id=348)
上記のサイトでDxOpal製のゲームをプレイできます。
さらにブログの方で開発記録を書いていますので興味がある方は御覧下さい。

# DxOpalで作るメリット
## 何時でも何処でも開発ができる
ブラウザとエディタがあればゲーム開発が出来ます。ちなみにスマホでも電車の移動中に開発できるってのをネタに記事を書きたかったですが、ゲームの規模が大きくなってくると今使ってる格安スマホだとちょっと辛くなってきたかもしれません。
## 作ったゲームをすぐ皆に遊んでもらえる
昔、Windowsアプリケーションとしてゲームを作っていたときは、体験版を公開するときにzipで圧縮したゲームをダウンロードしてから遊んでもらっていたのですが、DxOpalの場合はブラウザでそのまま１クリックでプレイできます。
## DxRubyと互換性が高いのでWindows(DirextX)版としても流用できそう
どう収益化するか？という技術の話からは脱線するのですが無料ゲームしか作れないってことになると誰もDxOpalを使ってくれないので。完成したゲームをパッケージ化して同人販売したりダウンロード販売して収益化することも可能なのでは？ということです。

## Rubyで書ける
もちろん最大のメリットはコレでしょう。
ゲーム制作者の立場からRubyを使う利点を述べると、大抵のことをYAGNI "You ain't gonna need it"（そんなものは必要ない）で済ませられることだと思っています。
今までC言語やC++,Lua,Java辺りでゲームを作ってきましたが、本格的なゲーム作りに必要だったタスクシステムやシーン管理も実は今回作っていません。配列やHashに突っ込んで置けば大抵のことはなんとかなります。それくらいRubyの配列操作やブロックは使い勝手が良くて強力なんだと思います。さらに制作時間の割合もシステムまわりよりゲームの中身に費やせることが出来るようになりました。
つまりRubyで書くと面白いゲームを作ることができるのです。

**「Rubyで書くと面白いゲームを作ることができるのです」**

……というのを証明したいかな。
負荷発生・事後調査のときに便利なワンライナー


[今すぐalias登録すべきワンライナー by ゆめみ① Advent Calendar 2018](https://qiita.com/advent-calendar/2018/yumemi01_one-liner) 9日目の記事です。
前回は@szfさんの[とにかく多用するワンライナーもといaliases](https://qiita.com/szf/items/1ca8dcbd9dc7c7fea41c)でした。

---

本日は、負荷発生時や事後調査時に便利に使えるワンライナーをご紹介していきます！
Ubuntu, Apacheを想定していますが、チョチョッと変えていただければ他の環境でも利用できるかと思います。

# 容量多いディレクトリ上位を調べる
```bash
du -m / | sort -rn | head -100
```
ディスク容量が足りなくなった際に重宝します。
（さすがにこの時代にそんな障害起きひんやろｗと思いきや、たまに起きてしまうやつです・・・）
処理が終わるまで時間がかかるので、大体の目星がついている際はそのディレクトリ以下のみにするなど工夫してください。

# 容量多いファイル上位を調べる
```bash
du -ma / | sort -rn | head -100
```
こちらもディスク容量が足りなくなった際に重宝します。
ディレクトリ上位を調べたあとに、まだどの部分化特定できないようなら使うといいと思います。

# 30日以上経過しているファイル削除を調べる
```bash
find /fuga/cache -type f -mtime +30 -exec rm -rf {} \;
```
取り急ぎログファイルやキャッシュファイル等の古いファイルを手動で消したいときに重宝します。
（ログファイル等は、このワンライナーで手動削除するのではなく、きちんとrotateしたほうがいいです）

# 日別のログ行数出力を調べる
```bash
for file in `find -type f -name "access_log.2018112*.gz" | sort`; do echo $file `zcat $file | wc -l`; done
#  access_log.201811201.gz 20000
#  access_log.201811202.gz 24000
#  access_log.201811203.gz 19000
#  access_log.201811204.gz 12000
#  access_log.201811205.gz 45000
#  ...
```
負荷発生日時の前後のアクセス数、エラー数等をサクッと知りたいときに使えます。
`ls -l`でファイルサイズを見てもおおよその検討はつきますが、より具体的に調べていく過程で使うと便利です。

# 時毎のアクセス数を調べる
```bash
cut -d'[' -f2 /var/log/apache2/access_log.`date +%Y%m%d` | cut -d' ' -f1 | cut -d':' -f2 | sort | uniq -c
```
事後調査をする際、障害発生時刻の前後で比較したいときに便利です。

# 分毎のアクセス数を調べる
```bash
cut -d'[' -f2 /var/log/apache2/access_log.`date +%Y%m%d` | cut -d' ' -f1 | cut -d':' -f2,3 | sort | uniq -c | grep 12:
```
事後調査をする際、より具体的な発生時刻を特定するのに便利です。

# 秒毎のアクセス数を調べる
```bash
cut -d'[' -f2 /var/log/apache2/access_log.`date +%Y%m%d` | cut -d' ' -f1 | cut -d':' -f2,3,4 |  sort | uniq -c | grep 12:00:
#  2  12:00:00
#  10 12:00:01
#  22 12:00:02
#  27 12:00:03
#  10 12:00:04
#  ...
```
事後調査をする際、分間のアクセス調査後にさらにブレークダウンして調べたいときに便利です。

負荷テスト（古いシステムから新しいシステムへ移行するような場合）に、最大秒間どれくらいさばければいいのかの指標を探すのにも使えます。

# リクエスト別のアクセス数を調べる
```bash
cat /var/log/apache2/access_log.`date +%Y%m%d` | awk -F '"' '{print $2}' | awk '{print $2}' | sort | uniq -c | sort -n -r | head -n 5
#  13600 /api/entries/
#  10210 /api/images/
#   9000 /api/users/
#   6900 /api/categories/
#   5600 /api/likes/
```
どこへのリクエストが多いのか調べるときに便利です。


---

いかがだったでしょうか。
簡単なものばかりですが、これらを組み合わせて調査していくことである程度問題を特定できたりしますので、ぜひ使ってみてください。
継続的インテグレーション(デリバリー)サービスを利用しないという罪悪  :ビルドのたびに手動でテストを実行させ続けるという罪悪

継続的インテグレーション(デリバリー)サービス を利用するようになって思ったことを、いまさらながら記す。


### [継続的インテグレーション(デリバリー)サービス](https://www.ossnews.jp/oss_info/CircleCI)を利用しないという罪悪

#### 手動でのテストを各人のローカル環境で実行することの問題点
- ものごとは、数量が10倍になるとやり方を変えなければならないことは多い。
- 同時開発する開発者の数が増えてくれば、自分の変更の数よりも、他の人の変更の数が格段に増えてくる。
- その分、自分の理解していない部分で変更が加わって、いつの間にか破綻する可能性は出てくる。
- 手作業でそれぞれの人の環境でテストしていると、テストにかかる時間が増大していって、自分の担当しているコード自体の作業よりも、それ以外のテストを通すことの工数が増えることになりかねない。

#### いま利用できる状況

- ソースコードから自動ビルドと自動テストの実行をしてくれるサービスがある。
- 利点：
- 自動ビルドと自動テストをチームとして必ず実行できる。
- その結果を、変更の担当者とチームに反映できる。
- 自動テストを自分のローカルPCで行う必要がないので、その間に次のコードの改変に着手できる。

#### 私の開発ターゲットでは自動化テストを利用できないという思い違い

 自動ビルド・自動テストを活用している雑誌の記事が、web系の記事であったりすると、「そういうのが利用できるのは、web系の開発だけだよね」などと早合点する人もいるだろう。
　しかし、自動化テストできる部分は必ずある。
　自動化テストできる部分を引き出せないとしたら、それは設計が間違っている。
　たとえOSなしの組み込み系であっても、そのソースコードの中には、自動化テストできる部分がある。
　その部分を、継続的インテグレーション(デリバリー)サービスに利用すればいいのです。
　車載系の開発のなかでは、ある部品の制御に関わる開発をする際にも、自動化テストをしているようです。
　
[モデルベース開発移行ソリューション 「モデルベース開発とは」](https://www.tjsys.co.jp/embedded/modelbase-shift/summary.htm) などはその一例です。

　自分の担当モジュール以外の部分の実機であるはずの部分(エンジンや、ブレーキなどという物理的な実体を含む場合も)を、それを同等の動作をするソフトウェアでシミュレートすることで、開発を加速している。
　だから、「私の開発ターゲットでは自動化テストを利用できない」などという決め付けはしないことです。
Tupleを使って効率的にDictionary等を使う

#UiPathのDictionaryあるある

UiPathを使っていて、ExcelからDataTableに値を取得するようなケースはかなり多いです。
ですが、UiPath上で使う時にDataTableの不便なところは、各カラムのデータ型を事前に定義できないことにあります。（※実際には定義できなくはないですが、UiPathのGUI上で適用されないので意味がないです）
なので、各カラムの値は基本的にObject型として扱われます。Int32やStringなど、一般的な形式として使用するには、明示的に変換して使うことが必要になります。
（たとえば 変数名.ToString() でString型に変換してり、 Int32.Parse(変数名.ToString()) でInt32型に変換したりですね）

そこで、比較的よく使う（と思われる？）手として、Dictionary型というデータ型に値を格納します。
細かい解説は省きますが、Dictionaryは「キー」と「値」のコピーになります。DataTableと違って、キーおよび値にデータ型を設定することができます。たとえば「キーはString型、値はInt32型」のような感じですね。（厳密に言えば、これはDictionaryではなくGenericという仕様のおかげですが）

Dictionaryはかなり便利なのですが、何しろその性質上、キーに対して1つしか値が記憶できません。
配列を設定すれば値を複数格納できますが、型は1つしか設定できません。Object型の配列では前述のDataTableの使いにくさと同じ問題がついてまわりますし。

# そこでTupleを使ってみます

Tupleとは、1つの変数として振る舞いますが、中に子要素（あるいは値）を複数持てます。配列と違って、個々の要素はそれぞれ型を設定できます。
プログラミングの経験がある方なら、構造体に近いもの、というとイメージしやすいと思います。ただし、構造体との違いは、個々の要素には名前がなく、順番に「Item1」「Item2」……とつきます。

##Tuple型の設定方法
まず、具体的なTupleの設定方法です。
変数の型設定を「Tuple<」まで入力すると、以下のような画面になります。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/316716/32753f76-f75a-ef6f-f1ab-e6ee6e010fd9.png)

ここで必要な値の数を設定します。
たとえば、Int32型・String型・Int32型と3つ格納するなら、

    Tuple<T1,T2,T3>

を選択すれば良いです。
その上で型の設定すれば完了です。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/316716/9dcc6d6d-c906-6727-01cc-fbb1d666079a.png)

もちろん、Dictionaryの値に設定することもできます（むしろキー値にすることもできますが、そういう使い方は、流石にあまりしないと思います）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/316716/c0227bb4-669b-0269-6136-29df02d35629.png)

##Tuple型の使い方

値として設定するには、

    Tuple.Create(Of Int32, String, Int32)(100, "Value", 200)

のように、Tuple.Create(Of 型名, 型名, ……)(値1, 値2, 値3) として設定します。


値を取得・一部だけ変更する場合は、

    Tuple型変数.Item1
    Tuple型変数.Item2
    Tuple型変数.Item3

のように、設定した順番に応じた「Item●」とアクセスすれば良いのです。
（UiPath Studioの開発画面でも、ちゃんとItemごとに型が設定されます）

#ちょっと駆け足でしたが

ざっくりと「UiPathで構造体のようなものも使える」というのがこの記事の主旨です。
なので「構造体」という概念にあまり馴染みがないと使いにくいかもしれませんが、Dictionaryや引数など、通常は1つの変数として扱う部分に「複数の値を、個々の型を指定して持てる」方法がある、ということだけ、頭の片隅にいれておくと何かのときに役に立つかもしれません！
ニューラルネットワークでもやもやしたアニメーションを作る

Unity Advent Calendar 2019 その3の12/8の記事です。
急いで用意した雑な文章なので雰囲気だけ感じてください！

deepではないニューラルネットで次のような関数を作ります。
$f\left(u,v,p,q\right)=\left(R,G,B,A\right)$
$u,v$: テクスチャマッピングのUV座標
$p,q$: 時間で動く変数。例えば$t$を時間として$p=\sin\left(5t\right),q=\cos\left(7t\right)$など。

この関数をニューラルネットとして、フラグメントシェーダ内に適当に実装します：

```cg
fixed4 frag (v2f i) : SV_Target {
  half t = _Time.y * 0.2;
  half p = sin(t * 5);
  half q = cos(t * 7);
  half4 input = half4(1 - i.uv.y, i.uv.x, p, q);
  half4x4 w1 = ...; half4 b1 = ...;
  half4x4 w2 = ...; half4 b2 = ...;
  ...
  half4 out0 = tanh(mul(input, w0) + b0);
  half4 out1 = tanh(mul(input, w1) + b1);
  half4 out2 = mul(out0, w2) + b2;
  half4 out3 = mul(out1, w3) + b3;
  half4 out4 = out2 + out3;
  fixed4 output = tanh(out4) * 0.5 + 0.5;
  return output;
}
```

適当にパラメータを調整すると、もやもや動くアニメーションになります。
<img width="100" alt="スクリーンショット 2018-12-08 3.18.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/26821/af36a236-a2b4-88eb-8e9c-03fb4017c863.png"> <img width="100" alt="スクリーンショット 2018-12-08 3.19.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/26821/3f5430ac-ecc3-539f-528b-bb75b7bb4b5f.png">
これだけだとあまり綺麗ではないので、適当な学習セットを用意して学習します。例えば以下のようなイメージで学習セットを用意します。どうせ__大まかな色くらいしか学習できないので入力は何でも良い__です。
$f\left(u,v,1,1\right)=$![blue.png](https://qiita-image-store.s3.amazonaws.com/0/26821/38d22c7c-d994-52e9-67e2-d5431cf50ec6.png) $f\left(u,v,1,-1\right)=$![higan.png](https://qiita-image-store.s3.amazonaws.com/0/26821/f1e394a5-171b-ae27-bc83-178522522575.png)
$f\left(u,v,-1,-1\right)=$![rose.png](https://qiita-image-store.s3.amazonaws.com/0/26821/6eecc4a9-d415-8258-6590-d72894d48f55.png) $f\left(u,v,-1,1\right)=$![hasu.png](https://qiita-image-store.s3.amazonaws.com/0/26821/51251ae9-3e64-85b4-9416-c71fe34ce123.png)

これを[TensorFlowなどを使って適当に学習](https://gist.github.com/n-yoda/4e86c43531121232dfddfd70b5e56a25)させると、
$f\left(u,v,1,1\right)=$![predict0.png](https://qiita-image-store.s3.amazonaws.com/0/26821/eee54342-da1a-23d4-75cc-7972a441874d.png) $f\left(u,v,1,-1\right)=$![predict1.png](https://qiita-image-store.s3.amazonaws.com/0/26821/e583fb81-d34c-3c41-86e1-bd8a916c220c.png)
$f\left(u,v,-1,-1\right)=$![predict2.png](https://qiita-image-store.s3.amazonaws.com/0/26821/198f0476-f06a-cb88-1549-29b88f3061ce.png) $f\left(u,v,-1,1\right)=$![predict3.png](https://qiita-image-store.s3.amazonaws.com/0/26821/4aa8f954-6647-2d83-a55b-ae3c2be081fa.png)

のようになります。アニメーションさせると、
![ezgif-3-349510c8170e.gif](https://qiita-image-store.s3.amazonaws.com/0/26821/25c0aae3-b89a-a491-d1b8-74bd93849ee5.gif)
（早送りで分かりづらいですが、滑らかな感じのアニメーションです）

という感じになります。使いみちがあるのかどうかはわかりません。$p$ と $q$ は時間以外に例えばマウスの位置等を入れてみるのも良いかもしれません。モデルや学習方法ももう少し工夫したほうが良いと思います。やっつけ仕事になってしまいましたが、Unity Advent Calendar 2019 その3の12/8の記事でした。
Digdagメモ

個人的にDigdagを使っていて後で見返す時のためのメモ。

### コンテナの実行時に環境変数を渡す

ホストの環境変数がコンテナの実行時に設定される。`command.add("-e")`のところ。
https://github.com/treasure-data/digdag/blob/master/digdag-standards/src/main/java/io/digdag/standards/command/DockerCommandExecutor.java

### DockerHubにpushしてもイメージが更新されない

`pull_always: true`を指定する。
https://docs.digdag.io/architecture.html#running-tasks-on-docker

```yaml
_export:
  docker:
    image: tynmarket/spider2-agent-ruby:latest
    pull_always: true
```

### 起動時のバックフィルを無効化する

`skip_delayed_by`に実行間隔より短い時間を設定する。
https://docs.digdag.io/scheduling_workflow.html#skipping-backfill

```yaml
schedule:
  hourly>: 00:00
  skip_delayed_by: 1m
```

### プロパティファイルにメールの設定を記述する

https://github.com/treasure-data/digdag/blob/master/digdag-standards/src/main/java/io/digdag/standards/operator/MailOperatorFactory.java

```properties
config.mail.host=smtp.gmail.com
config.mail.port=587
config.mail.username=hoge
config.mail.password=fuga
```
Arnold RenderViewを起動するとMayaが落ちるエラーの対処方法

`Arnold > Arnold RenderView` を起動するとMAYAが落ちるエラーの直し方。

[maya 2017 arnold renderer fatal error](https://forums.autodesk.com/t5/maya-forum/maya-2017-arnold-renderer-fatal-error/td-p/7133021)
症状はこちらと全く同じだが、解決策が書いてなかったのでメモ。

__※作業前にバックアップ必須__

## Optimize Scene Size Options
`File > Optimize Scene Size Options`

作業中に生まれたゴミを削除する。
（`Remove: Unknown nodes`にチェック入れてもいい）

## Export Selection
`File > Export Selection`

Hypergraph Hierarchyなどから全てのオブジェクトを選択し、オブジェクトのみを外出する。
生成されたシーンを開き、そちらで作業を続ける。