OmniAICreator/Qiita-1.07M huggingface dataset:
docker-compose up -d 実行したらSSL errorで起動しなかったのでTLS_VERSIONを指定した

# 実行環境
windows7 64bit
virtualbox 5.0.24
Docker version 18.01.0-ce
docker-compose version 1.18.0
docker-machine.exe version 0.13.0

# 現象
いつものように仮想マシンを作って、コンテナを立ち上げようとしたときにエラーが発生。
```$ docker-machine create machine_name--driver virtualbox```
```$ eval $(docker-machine env machine_name)```
```$ docker-compose up -d```

```
SSL error: [SSL: TLSV1_ALERT_PROTOCOL_VERSION] tlsv1 alert protocol version (_ssl.c:661)
```

# 原因・対応
docker-composeはデフォルトでTLSv1が使われるがサポートされなくなったためエラーになっている様子。
TLSv1_2を使うように .env に以下を追記。
```COMPOSE_TLS_VERSION=TLSv1_2```

設定を反映させて再度実行
```$ eval $(docker-machine env machine_name)```
```$ docker-compose up -d```

無事起動できた！

引用
Git hub: docker-compose issues
https://github.com/docker/compose/issues/4651

docker docs: Compose CLI environment variables
https://docs.docker.com/compose/reference/envvars/
GitLab CI が想像以上にお手軽だった

「自動テストやってみたいなぁ……でも自動テストツールってお高いんでしょう？」と思っていましたが、GitLab CIなら無料で月2000分まで使えるようです。
というわけで。

# GitLab CIを試してみた

## やったこと

- GitLabでプロジェクトを作成（SSH認証の準備以外はほぼGitHubと同じ感覚で作れる）
- GitLab CI用の設定ファイルをリポジトリに追加する

これだけです。
マジでこれだけです。

## リポジトリ作成

まずはサインインしましょう。GitHubアカウントを使ってサインインできるのでオススメです。
サインインしたら適当にリポジトリを作成します。
リポジトリを作ると画面上部に警告が表示されると思います。SSH認証のために公開鍵を登録してほしいという内容なので、[ガイド](https://docs.gitlab.com/ee/ssh/)に従って登録しましょう。コマンドのコピペと公開鍵のコピペだけなので英語が苦手でもそれほど難しくないはずです。

## プロジェクト作成

リポジトリが準備できたらプロジェクトを作成していきます。このあたりまではGitHubと同じ感覚ですね。
今回はサクッと試したかったのでvue-cliで適当なプロジェクトを作りました。
出来上がったプロジェクトに先ほど作成したリポジトリ情報を付与してプッシュしましょう。
うまくいったら準備OKです。

## .gitlab-ci.ymlの作成

ここから本題です。
プロジェクトのルートディレクトリ配下に`.gitlab-ci.yml`を追加するだけで、賢いGitLab CIさんはテストを実行してくれるようになります。このファイルはビルド&テスト（&デプロイ）実行の指示書みたいなものです。
実装はこんな感じ。

```yml:.gitlab-ci.yml
image: node:11.14.0-alpine

cache:
  paths:
    - node_modules

stages:
  - build
  - test

build:
  stage: build
  script:
  - npm install -g yarn
  - yarn install

test:
  stage: test
  only: ['pushes']
  script:
    - yarn test:unit

```

`image`、`cashe`、`stages`は予約語ですね。見ただけでなんとなく意味は伝わるんじゃないでしょうか。
GitLab CIはDockerが基幹技術のようで、指定した`image`のコンテナを作成してスクリプトを実行するようです。

`build`、`test`はユーザー（今回は私）が任意に設定した名称です。予約語に無い単語を使うとユーザーが設定したスクリプトと判断されるようです。それぞれのスクリプトに`stage`を設定し、それらの`stage`の順番を指定しているので、`build`、`test`の順番に実行されます。当然先に実行されたスクリプトがコケれば後のスクリプトは実行されません。必要に応じて`test`ステージを`unit`と`e2e`に分離したり、`deploy`ステージ等を用意すればもっと楽しく便利になると思います。
これらのスクリプトは独立したコンテナで実行されます。共通のファイルを利用したい場合は`cache`に指定するだけのお手軽設定。

`.gitlab-ci.yml`が準備できたら、リモートリポジトリにプッシュするだけです。
実行結果はそれぞれ保存され、履歴から簡単に見ることができます。

<img width="1254" alt="スクリーンショット 2019-04-28 11.16.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213374/bfab7904-65c6-fef1-ed01-19eb3a0f1517.png">

各実行履歴からはコンソールログも見れる他、失敗した場合は登録したメールアドレスに連絡してくれるという手厚いサポート付き。頼もしいですね。

なお、今回はRunnerの設定を行なっていません。Runnerの設定を行えば別個に用意した独自環境で走らせることもできるようなのですが、独自のdockerイメージを使う程度なら`image`設定でできそうですし、個人制作の簡単なアプリ程度なら共有のRunnerで十分な気がします。
冒頭に書いた無料で月々2000分使えるというのはこの共有Runnerのことを指しているようです。

## 公式リファレンス

今回GitLab CIを利用するにあたって、参考にした資料はほぼ公式リファレンスだけです。公式がすごくわかりやすい。
Getting startedは[こちら](https://docs.gitlab.com/ee/ci/quick_start/)、設定ファイルのリファレンスは[こちら](https://docs.gitlab.com/ee/ci/yaml/)です。
上記以外にも静的構文チェックツールが用意されています。URLは以下の通り。

```console
{GitLabプロジェクトURL}/-/ci/lint/
```

<img width="1218" alt="スクリーンショット 2019-04-28 11.30.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213374/4659c4ef-ae74-3e93-f95e-ccdfbf585ccc.png">

簡単な構文チェックだけならこれで行えます。前準備も無しに利用できるのが非常にありがたいですね。

## まとめ

無料でお手軽に試せるので自動テストの事始めに適切だと感じました。
まだGitHubとGitLabの違いに慣れていないので若干戸惑いますが、個人で勉強しながら運用するにはなかなかいいんじゃないでしょうか。
しかし、今回の簡単なスクリプトでも実行に１分程度かかっているので、活発に開発を行うのであれば足りなくなりそうです。フルに運用するのであればお金か工夫が必要になりそうですね。
VCI説明＆VCIで出来ること出来ないこと(導入)[VCIアドカレ#1] 

#はじめに
この記事はGWアドベントカレンダーという企画の「[VCIアドベントカレンダー GW ver](https://gw-advent.9wick.com/calendars/49)」1日目の記事です。
バーチャルキャストというサービスで使用しているVCIという技術のついてのノウハウの共有・コードの紹介などを目的としてます。記事自体書いたことなく、内容もだいぶニッチなため需要があるかはわかりませんがつらつらと書いていきます。

GWアドベントカレンダー全体についてはこちら↓
>[10連休向けアドベントカレンダーシステムを作った【個人開発】](https://qiita.com/wicket/items/f2aa70ac9cd734a01c7d)

今日は1日目ということでVCIの概要について説明します。


#バーチャルキャストとは
バーチャルキャストとは配信特化型VRコミュニケーションサービスです。
詳しいことは以下の公式の説明ページや実際の配信を見ていただければ雰囲気がわかるかと思います。

* [バーチャルキャストとは？](https://virtualcast.jp/about/)
* [バーチャルキャストTOPページ](https://virtualcast.jp/)


#VCIとは
正式名称は「Virtual Cast Interactive」といい、バーチャルキャスト内で自作のアイテムを持ち込むことが出来る仕組みです。簡単なアイテムであればスクリプトも不要で作成でき、スクリプトを組み込むことでより凝ったアイテムを作ることが出来ます。
以下の動画を見ていただければ具体的なイメージが湧くかと思います。

* [【THE SEED ONLINE】VCIの動画まとめ](https://togetter.com/li/1325446)

言語的にはluaを使用しており、アプリを起動しながら**リアルタイムで修正・確認を実施できる**という特徴があります


#VCIで出来ること・出来ないこと(2020/7/16 更新)
本日の記事の本題です。特に出来ないことはあまり言及されていなかったのでまとめました。
###出来ること
- オブジェクトの移動・回転・拡縮
- サウンドの再生
- アニメーションの再生
- アバター座標の取得
- アバターへの装着

出来ることはだいたいリファレンスに載ってるため特に補足などはありません。

###出来ないこと
- オブジェクトの生成・複製・削除
    - 「ボタンを押したらオブジェクトが出現」のようなことを実現するためには、「事前にUnityでオブジェクトをサイズ0で作成」⇒「ボタンを押したらサイズを拡大して見えるようにする」等をする必要があります
- 他VCIの座標情報を取得
    - 作成したVCI内のオブジェクトであれば座標を取得できますが、他VCIからの直接座標情報を取得することが出来ません。
- ~~他VCIの操作~~
    - ~~他のVCI及びプレイヤーをスクリプトで操作することはできません。そのため、プレイヤーのワープ等(VRchatのボータルのようなもの)は実現できません~~  
⇒[2019/08/29 追記]1.7.2aから一部公式アイテムで可能となりました。自作アイテムはできない状態のままです。
- 外部サービス連携・ローカルファイル連携
    - 現状代替方法はありません。

#おわりに
今日は導入のため記事は以上です。
とりあえずVCIでわからないことがあったらdiscordに投げれば解決すると思います
また、ほかに出来ること・出来ないことがあればコメントで教えていただけると幸いです。


(記事遅刻してすみませんでしたm(_ _)m)
【Apache】localhost接続方法

#Apacheって何？
サーバーソフト。
PHPなどの言語はサーバーがあって初めて成り立つもの。

でも、サーバーにはお金がかかります。
なのに、開発フェーズからサーバー代にお金はかけられない。

そこで活躍するのがApacheと呼ばれれるサーバーソフトです。
自分が使ってるPCをサーバー代わりにできます。

そのソフトがMacには最初から入っているので早速起動してみましょう。
##Apacheバージョン確認
```
https -v 
```
するとこんな感じの文字が出ます

```
Server version: Apache/2.4.34 (Unix)
Server built:   Feb 22 2019 19:30:04
```
バージョンを確認したら起動してみます。
##Apache起動
```
sudo apachectl start
```

**sudo**・・・Super User Doの略。パーミッション（権限）を無視して実行できます。なお実行する前にパスワードが求められます。Macを立ち上げる時のパスワードです。タイプしてもターミナルに文字は出ませんがちゃんとに認識されています。
**apachectl**・・・Apache Control。アパッチをコントロールする。

##Apache停止
```
sudo apachectl stop
```

##Apache再起動
```
sudo apachectl restart
```

以上がApacheに関するコマンドです。

次はPHPのバージョンを確認しましょう。
##php
php -v・・・バージョン確認

##localhostを起動させてみる
これで
・Apacheが起動すること
・PHPがインストールされていることを確認しました。

次は実際にlocalhostを起動させます。
まず、apacheを停止させて再起動しましょう。

その後ブラウザのアドレスバーにこちらのURLを入力してみてください。

```
http://locahost
```
画面に「It works!」と表示されていれば接続ができています。
node.js(v10.15.3)：ファイルの存在確認


fs.existsSyncを使う。node.jsのバージョンは、"v10.15.3"を使用する。
https://nodejs.org/api/fs.html#fs_fs_existssync_path


### 例


```
$ node
> fs = require('fs')
（出力は省略）
> fs.existsSync('foo.txt')
true
> fs.existsSync('bar.txt')
false
```
99分99秒は何時間何分何秒？

## 99分59秒ってどれくらい？
百均などで売っているキッチンタイマー、安く便利ですよね。

ただ、表示が「分」までのものだと、**99分**とういう時間の概念を超えてセットできるものもあります。
ちなみに手元にあるものは「99分59秒」が最大値です。

**ついに！私は！「分」の限界を超えたぞ！！**

...わかりづれぇ


## 時分秒に変換
あまりにもわかりづらいので、変換するプログラムを用意しました。

```.js
class TimeConvert{
  constructor(hour,min,sec){
    this.hour = hour;
    this.min = min;
    this.sec = sec;
  }

  fixTime(){
    //一時保管用の秒数に変換後、時→分→秒の順に整形する。
    var tmpHour = this.hour;
    var tmpMin = this.min;
    var tmpSec = this.sec;

    //秒数に変換
    var tmpTime = this.conv2sec(tmpHour,tmpMin,tmpSec);

    //時に整形
    this.hour = this.conv2hour(0,0,tmpTime);
    //一時保管用の秒数を更新（時に整形した分を差し引く）
    tmpTime = tmpTime - this.hour*3600;

    //分に整形
    this.min = this.conv2min(0,0,tmpTime);
    //一時保管用の秒数を更新（分に整形した分を差し引く）
    tmpTime = tmpTime - this.min*60;

    //秒に整形（小数などの整理）
    this.sec = this.conv2sec(0,0,tmpTime);

    //結果表示
    console.log(this.hour,"h",this.min,"m",this.sec,"s");
  }

  conv2hour(inH,inM,inS){
    return Math.floor(inH + inM/60 + inS/(60*60));
  }

  conv2min(inH,inM,inS){
    return Math.floor(inH*60 + inM + inS/60);
  }

  conv2sec(inH,inM,inS){
    return Math.floor(inH*60*60 + inM*60 + inS);
  }
}
```

## やってみる
```console
//変換クラスをnewするときに変換したい時間をセット。
> a = new TimeConvert(0,99,59)

//セットした値が入っているか確認。
> a
TimeConvert {hour: 0, min: 99, sec: 59}
hour: 0
min: 99
sec: 59

//変換関数実行。
> a.fixTime()
1 "h" 39 "m" 59 "s"
```

**でました！**
**99分59秒 = 1時間39分59秒です！**

暗算ができないときにどうぞ！


### ちなみに...
タイトルにある**99分99秒**ですが、

```console
> b = new TimeConvert(0,99,99)
> b.fixTime()
1 "h" 40 "m" 39 "s"
```
**1時間40分39秒です！**
Leetcode #145: Binary Tree Postorder Traversal

Postorder traversal: left -> right -> root

recursive solution:

```swift
func postorderTraversal(_ root: TreeNode?) -> [Int] {
    if let node = root {
        return postorderTraversal(node.left) + postorderTraversal(node.right) + [node.val]
    } else {
        return []
    }
}
```

iterative solution:

```swift
func postorderTraversal(_ root: TreeNode?) -> [Int] {
    var stack = [TreeNode]()
    var answer = [Int]()
    var current = root
    var lastVisitedNode: TreeNode?
    while !stack.isEmpty || current != nil {
        if let node = current {
            stack.append(node)
            current = node.left
        } else {
            let peekNode = stack.last!
            if peekNode.right != nil && lastVisitedNode !== peekNode.right {
                current = peekNode.right
            } else {
                answer += [peekNode.val]
                lastVisitedNode = stack.popLast()
            }
        }
    }
    return answer
}
```
51歳からのプログラミング　備忘　View->Controllerに連想配列　／　cocntroller->script　／　controller->html　／　(e) htmlspecialchars() expects parameter 1 to be string, array given

勘違いで多くの時間を無駄にすることが多々あり、今回もそのケース。

＜勘違い＞
ControllerからViewに連想（ハッシュ）配列を渡そうとして（勘違い）、
`htmlspecialchars() expects parameter 1 to be string, array given`
`期待されたパラメータ１は文字なのに、配列が渡されているよ`、というエラーが来た。

＜正しくは＞
発生したファイルはViewだったので、連想配列の受け取り時にエラーが出たのだと勘違いしていたら、ViewからControllerに連想配列を返そうとして生じたエラーだった。

ControllerからViewに配列をわたし、php-foreachやjs-echo、jq-$.echoで繰り返し処理する場合にも生じたりする。View側に連想配列を渡すときに、改行やクォテーションが文字列に変換されてしまい、配列じゃなくなったりする（のだと思う）。この場合の処理は、このページの最後に記載してます。

エラーコード

```php:View_エラーコード
// $param=['ap'=>'apple','bn'=>'banana','rm'=>'remon']

<input type="hiddem" name="param" value="{{$param}}"/>
```
inputで配列を送ろうとしてのエラー。
初心者ならではの、ですね。

```php:View_修正コード
@php 
foreach($param as $key =>$value)
{
echo '<input type="hidden" name="param['.$key.']" value="'.$value.'"/>';
}
```
これでControllerへのRequestに連想配列を渡せた。

エラーの発生個所やエラー内容の特定に数時間かけてしまった。
初心者って凄く時間を掛けてしまうのですね。

controller->script
--
```
//controller --------------------
$param=['param'=>$param];
return view('/',$param);

//blad.php   --------------------
<script>
$(function(){
  console.log({{$param}});
});
</script>

<body>
  {{$param}}
</body>
```
同一ファイル内で　javascript -> php（ララベル-bladeで）
--
```
<script>
  window.onload=function(){
    var param           = 222;
        document.cookie = "sample="+param+"";
  }
</script>

<body>
@php
  $sample = COOKIE['sample'];
  echo $sample;
@endphp
</body>

// 実行結果
// 222
```

##laravelController -> view.javascript に連想配列を送受信
どうやら、コントローラからjavascriptに連想配列を直接送受信できないらしい。送受信のステップは、

1. Controller側で、連想配列を、Jsonコードに変換してviewに送信
2. viewで、受信した連想配列をJSON.parse()する
3. parseした配列を回す

```Laravel:Controller
$person = Person::get(['id','name','e-mail'])->toJson();
return view('top',['person'=>$person]);
```
```javascript
<script>
   $(function(){
     var personArray = JSON.parse('<?php echo $person; ?>');
     $.each(personArray,function(key,value){
        console.log(value);
     });
   });
</script>
```
【C#】外部DLLの静的クラスの静的メソッドを文字列で指定して呼び出す

意外とぐぐっても直球の答えがなかったのでメモ書きです。

```C#:C#
    //メソッドの指定はAssemblyFileName:NameSpace.ClassName.MethodNameで指定されるものとする。
    string assemblyFileName = url.Substring(0, url.IndexOf(':'));
    string fullObjectName = url.Substring(url.IndexOf(':') + 1, url.LastIndexOf('.') - (url.IndexOf(':') + 1));
    string methodName = url.Substring(url.LastIndexOf('.') + 1);
    
    //クラスを呼び出す前にアセンブリをロードする
    Assembly asm = Assembly.Load(assemblyFileName);

    //名前空間も含んだフルパスでオブジェクト名を指定する
    Type type = asm.GetType(fullObjectName);

    //静的メソッドはInvokeMemberで呼び出す。引数は最後のオブジェクト配列で渡す
    object ret = type.InvokeMember(methodName, BindingFlags.InvokeMethod, null, null,new object[]{ arg1,arg2,... });

    //戻り値はobject型になるので適切な型にキャストして返すこと
    return ret;
```

ポイントは、プロジェクトとして参照設定などをしていても明示的にアセンブリをロードしないとアセンブリが認識されない点かと思います。
The machine with the name 'app' was not found configured for this Vagrant environment.を解決

vagrant一覧を以下のコマンドで確認

```shell
$ vagrant global-status
id       name    provider   state    directory
-------------------------------------------------------------------------
2fd8a92  app     virtualbox poweroff /Users/myname/Desktop/new1
d67e8a3  new3    virtualbox poweroff /Users/myname/Desktop/new2
8b34c27  default virtualbox running  /Users/myname/Desktop/new3
```

普通に削除。しかしエラーがでる。

```shell
$ vagrant destroy 2fd8a92
The machine with the name 'app' was not found configured for
this Vagrant environment.
```

##「vagrant global-status --prune」で解決


```shell
$ vagrant global-status --prun
id       name    provider   state   directory
------------------------------------------------------------------------
8b34c27  default virtualbox running /Users/r.sugikawa/Desktop/new4
```
math.gcd と np.ufunc.accumulate で累積GCD

[AtCoder Beginner Contest 125 - AtCoder](https://atcoder.jp/contests/abc125)で出題された[C - GCD on Blackboard](https://atcoder.jp/contests/abc125/tasks/abc125_c)で、累積GCDが必要になったので、組み込みの`GCD`と`np.ufunc.accumulate` で実装しました。`gcd`を別の関数に置き換えれば、一般に関数を累積的に適用できます。

## GCD

`GCD`は`math`に移行中ですが、AtCoderで利用されているPythonのバージョンでは`math.gcd`が存在しません。`fractions`に実装があるので次のようにして両方の差異を埋めます。

```python
def gcd_strategy():
    import math
    import fractions
    return math.gcd if hasattr(math, "gcd") else fractions.gcd


gcd = gcd_strategy()
```

## 累積GCD

[numpy.frompyfunc](https://docs.scipy.org/doc/numpy/reference/generated/numpy.frompyfunc.html)を用いると、`ufunc`をPythonの関数から手軽に作成できます。

```python
gcd_ufunc = np.frompyfunc(gcd, 2, 1)
```

作成した`ufunc`を用いると、次のように累積GCDを計算できます。

```python
numbers = [24, 18, 12, 4, 7, 2]
cumgcds = gcd_ufunc.accumulate(numbers, dtype=np.object).astype(np.int)
print(cumgcds) # [24  6  6  2  1  1]
```

`accumulate`で`dtype`の指定を行わない場合、エラーになります。

参考 : [python - generalized cumulative functions in NumPy/SciPy? - Stack Overflow](https://stackoverflow.com/questions/13828599/generalized-cumulative-functions-in-numpy-scipy)

## おまけ

[itertools](https://docs.python.org/ja/3/library/itertools.html)を用いても同様のことができます。

```python
from itertools import accumulate
import math
import fractions

gcd =  math.gcd if hasattr(math, "gcd") else fractions.gcd
numbers = [24, 18, 12, 4, 7, 2]
cumgcds = accumulate(numbers, gcd)
print(list(cumgcds)) # [24  6  6  2  1  1]
```
CircleCIの基礎的な理解

Railsでポートフォリオを作成していたのですが、ふとCIたるものを導入してみようと思いました。
 

Rails人口が多いので、CircleCI関係の記事も多く、コピペだけでなんとなくテストの自動化ができたのですが、体系的な理解がイマイチでした。
 

ということで、時間をとって勉強したことを、ここに書き込みます。


# そもそもCIって？
Continuous Integrationの略。日本語に訳すと「継続的インテグレーション」。
 
アプリケーションの品質改善や作業コストの削減を目的として、コミット単位でコンパイルやテストを行うこと。
 
ざっくり言うと、「細かく振り返ること」ですね。
 
誤解されがちだなと思ったのは、「CI」と「CIサービス」は違う意味ということです。

- 「CI」… 開発手法
- 「CIサービス」… CIの手助け、あるいは自動化を行ってくれるサービス
 
CircleCIはそのCIサービスの一つです。

## CircleCIについて
CircleCIに限らないことかもしれませんが、CIサービスの利用方法として、2種類の方法が存在します。

- クラウド型 … クラウドサーバー上にホスティングされたCircleCIを利用する
- サーバー型 … 利用者のサーバーにインストールして利用する 

ほとんどの方がクラウド型を利用していると思います。多分。

## クラウド型の利用方法
CircleCIのアカウントを登録する必要があります。

ここら辺の解説はたくさんあるので、他のサイトを参照してください。

[【CircleCI】CircleCI 2.0からはじめる個人での簡単なCI導入方法 - githubとの連携まで](http://tweeeety.hateblo.jp/entry/2018/02/09/195345)


CIを導入したいリポジトリに.circleciフォルダを追加し、その中にconfig.ymlを作成します。 

CircleCIの設定は、このconfig.ymlに記述するのが基本です。 

**ここからが本題、config.ymlの基本的な書き方を説明していきます。**(前置きいらんかったな）

# config.ymlの基本的な書き方
ymlファイルによく記述するキーを解説します。

 ### jobs

circleCI環境内で行われる処理の大枠の1単位を定義するセクション
これらの中身をworkflowセクションから呼び出すことにより、CIを行う。
 
### steps
jobs内に定義される、そのjobで実行される処理を定義したもの。
steps内に記述できるキーは様々だが、主にcheckoutとrunが主要。

- checkout … 設定されたpathにソースコードをcheckoutする。デフォルトは「working_directory」
- run … command lineプログラムを実行する
 
### docker
利用するdocker環境の設定を行う
 


これらを利用したconfig.ymlファイルの一部を見てみましょう。

```
jobs: 
  build: 
    docker: 
      - image:  circleci/ruby
    steps: 
      - checkout 
      - run: bundle install --path vendor/bundle
  test: 
    docker: 
      - image:  circleci/ruby
    steps: 
      - checkout 
      - run: bundle install --path vendor/bundle
```

jobsキーに「build」jobと「test」jobが定義されています。
それぞれがDockerfileのパス「circleci/ruby」を参照し、Docker環境を構築しています。
 
stepsキーでは、構築した環境内で行われる処理を記述しています。
 
 
 
これらのjobをworkflowキーで制御することにより、CIを行います。
workflowに関しては、先に例をみた方が早いでしょう。
jobsキーの例に、workflowキーを追記します。

```
jobs: 
  build: 
    docker: 
      - image:  circleci/ruby
    steps: 
      - checkout 
      - run: bundle install --path vendor/bundle
  test: 
    docker: 
      - image:  circleci/ruby
    steps: 
      - checkout 
      - run: bundle install --path vendor/bundle
workflow:
  do_something:
    jobs
      - build
      - test:
          require:
            - build
          filters:
            branches:
              only: develop
 ```

 
プログラミングに親しい方は、何をやっているか、勘で理解できると思います。
 
先ほども記述したように、workflowはjobsに書かれた処理を制御する部分です。
「do_something」と書かれたキーは、その制御を行う1つの単位だと思って差し支えないです。
 
「- test」以下の部分が記述されていなかった場合、「build」jobと「test」jobは並列で実行されます。
requireキーによって、jobsの実行順序を制御し、
filtersキーによって、ブランチによる処理条件を制御しています。
 
例えば、masterブランチをcommitした場合、「test」jobは実行されません。
 
 
 
# まとめ
今回紹介した以外にも、様々なキーが存在しますが、基本的には上記を理解することで、簡単なCIは行うことができます。

自分も少しづつ理解を深めていこうと思います。
visual studio codeでprocessing。

visual studio codeでprocessing。

ワークスペースにprocessingのスケッチが入っているフォルダの設定。
適当にスケッチを作成。
(今回の場合、beautifulSphere_20190426というフォルダの中に、beautifulSphere_20190426.pdeというファイルを作成)

`ctrl + shift + B`で、スケッチをビルド。
規定のビルドが...云々聞かれるので、新しくtask.jsonを作成して下記のコードを貼り付け。

`"command":`の箇所は、processing-java.exeのパスを記入。

`panel`の箇所は複数のタスク間でターミナルを共有するかどうかを設定できる。newにしているとビルドするたびに新しいターミナルが作成されるのでshareの方が良い気がする。(個人差があるかもしれません。)


![json.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407001/689b497c-c3f3-276c-ba7a-6a24cbdcc3c7.jpeg)


```tasks.json

{
    "version": "2.0.0",
    "tasks": [
      {
        "label": "Run",
        "command": "D:\\programs\\Processing\\processing-3.5.3-windows64\\processing-3.5.3\\processing-java.exe",
        "type": "process",
        "args": [
          "--force",
          "--sketch=${workspaceRoot}\\beautifulSphere_20190426",
          "--output=${workspaceRoot}\\beautifulSphere_20190426\\output",
          "--run",
          //--sketchにはpdeファイルが含まれるフォルダを指定します。スケッチ毎に指定を変更する。
          //--outputにはビルド成果物の出力先のフォルダを指定します。スケッチ毎に指定を変更する。
        ],
        "group": {
          "kind": "build",
          "isDefault": true
        },
        "presentation": {
          "reveal": "always",
          "panel": "shared"
        }
      }
    ]
  }

```
PHP 遅延静的束縛 (Late Static Bindings) static:: 分かりやすいサンプル

```php

class Animal {
    protected static $name = 'Animal';

    public static function getName() {
        return static::$name;
    }
}

class Cat extends Animal {
    protected static $name = 'Cat';
}

echo Animal::getName(); // Animal
echo Cat::getName(); // Cat

```

```php

class C
{
  public static function foo() {
    static::bar(); // bar()のスコープは直近の "非転送コール" のクラス（C::foo()ならC。CC::foo()ならCC）
  }

  public static function bar() {
    echo 'C_bar' . PHP_EOL;
  }
}

class CC extends C
{
  public static function bar() {
    echo 'CC_bar' . PHP_EOL;
  }
}

C::foo(); //C_bar
CC::foo(); //CC_bar  

```    
参考サイト
https://maeharin.hatenablog.com/entry/20130202/php_late_static_bindings
【iOS】clipsToBoundsについて調べる

なんとなく使っていたことを反省してちゃんと調べたときのメモです:baby:

# `clipsToBounds`の概要
[Apple公式サイト](https://developer.apple.com/documentation/uikit/uiview/1622415-clipstobounds)には下記のようにあります。

>A Boolean value that determines whether subviews are confined to the bounds of the view.
（サブビューをビューのboundsに限定するかどうかを決定するBool値。）

また実際のプロジェクトでは UIKit > UIView.h の配下にプロパティとして定義されていました。

```swift:UIView.h
@property(nonatomic) BOOL clipsToBounds; 
// When YES, content and subviews are clipped to the bounds of the view. Default is NO.
```

ここまでで`clipsToBounds`の特徴まとめてみます。

* **UIView（+それを継承しているUIImageView等）のプロパティである**
* **Viewにセットしたコンテンツが、領域`bounds`の外を描画するかどうかを決定する**
* **デフォルト値が`false`で、`true`にすると領域内に限定される**

またデフォルト値が`false`ということは、UIViewやUIImageViewはデフォルトで領域外の描画を許可しているということになります:point_up:


# Storyboardで確かめてみる
Storyboardの中央に、長方形のUIImageViewを配置します。
（Content Modeは`Aspect Fill`を選択しておきます）
<img width="300" alt="スクリーンショット 2019-04-28 10.07.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112818/2f97f05a-9ab1-2dec-1b45-64bfea0f3d8c.png">

そこに正方形の画像をあててみます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112818/7fa18779-c1d5-4259-d568-e61a9b1b23da.jpeg" width="300" />

## `clipsToBounds`が`false`の場合（デフォルト）
画像のサイズに応じて、UIImageViewの領域外も描画されました。
<img width="500" alt="スクリーンショット 2019-04-28 10.11.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112818/ee3f3697-f57a-62e7-77f7-4a9fabfc7cc1.png">

## `clipsToBounds`が`true`の場合
描画がUIImageViewの領域内に限定されました。
<img width="500" alt="スクリーンショット 2019-04-28 10.11.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112818/c57343ef-250e-b1f2-a467-9bf217002883.png">

`clipsToBounds`についての理解がかなり進んだ気がします:sun_with_face:

# `clipsToBounds`の使いどころ
たとえばAPIからランダムな大きさの画像が返ってきて、それをいい感じにUIImageViewに表示したいときなどは`Aspect Fill`+`clipsToBounds`が便利です。

詳細はわかりやすい記事がありましたのでそちらをご覧ください。
[Aspect Fill, Aspect Fit, Scale to Fillの違い - Qiita](https://qiita.com/Saayaman/items/a23519ff5a8ad287cf20)

# 参考になった記事
* [clipsToBounds - UIView | Apple Developer Documentation](https://developer.apple.com/documentation/uikit/uiview/1622415-clipstobounds)
* [iOSUIImageViewにAspect Fillで画像を表示したらなんかはみ出しちゃった時にすること ｜ DevelopersIO](https://dev.classmethod.jp/smartphone/iphone/uiimageview-aspectfill-clipsubviews/)
* [Aspect Fill, Aspect Fit, Scale to Fillの違い - Qiita](https://qiita.com/Saayaman/items/a23519ff5a8ad287cf20)
* [UIImageView で cornerRadius と Shadow を同時に使いたい - Qiita](https://qiita.com/star__hoshi/items/0edbb8ee94b231dd1c79)
【Unity】library not found for -lGoogleUtilities

# 問題
iOS用にUnityでビルドを行った後に、Xcode側で
>library not found for -lGoogleUtilities

というエラーが出る。

# 原因
詳しいことは分からないのですが、CocoaPods関連の問題みたいです。

# 解決方法
Unity上で、
Assets > Play Services Resolver > iOS Resolver > Install CocoaPods

xcodeでプロジェクトを開く時、拡張子が`.xcodeproj`のファイルではなく`.xcworkspace`のファイルを開いてください。

# 参考文献
- https://blog.tagbangers.co.jp/2015/12/03/Xcode_library_not_found_for_marumaru

- https://akatana.games/blog/tips/unity/184/
A-Frame で Oculus Go のコントローラの向きを取得する（小ネタ）

# 概要

[A-Frame](https://aframe.io/) で [Oculus Go](https://www.oculus.com/go/) 用のコンテンツを作っていて、コントローラの向きを取得したかったのですが、方法が分かりませんでした。[Stack Overflow](https://stackoverflow.com/) にて質問したら、A-Frame 開発者・メンテナのひとり [Kevin さん](https://stackoverflow.com/users/5965986/ngokevin)からひとつのアイデアを[教えていただきました](https://stackoverflow.com/questions/55663453/how-to-get-direction-vector-of-oculs-go-controller-in-a-frame)。忘れないようにメモしておきます。


# 結論

例えば以下の方法でコントローラの向きを取得することができました。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>A-Frame で Oculus Go のコントローラの向きを取得する</title>
  <script src="https://aframe.io/releases/0.9.1/aframe.min.js"></script>
</head>
<body>
<a-scene>
  <!-- 任意に適当なオブジェクトを置いた -->
  <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
  <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-sky color="#ECECEC"></a-sky>
  <!-- Oculus Go のコントローラを使う laser-controls -->
  <a-entity id="ctl" laser-controls></a-entity>
  <!-- コントローラの向きを表示するための a-text -->
  <a-text id="txt" value="text" position="0 2 -2" align="center" color="#000000"></a-text>
</a-scene>

<script>

const ctl = document.getElementById("ctl");
const txt = document.getElementById("txt");
const timer = setInterval(() => {    // （任意）コントローラの向きを定期的に取得して表示
  // ここから、教えていただいた部分
  const point = new THREE.Vector3(0, 0, -1);
  ctl.object3D.localToWorld(point);
  const worldDirection = point.sub(ctl.object3D.position);
  // ここまで、教えていただいた部分
  txt.setAttribute("value", worldDirection.x.toFixed(2) + ", " + worldDirection.y.toFixed(2) + ", " + worldDirection.z.toFixed(2));
}, 100);

</script>
</body>
</html>
```

以下、実行画面です。

![IMG_0166.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/157570/50111511-0b18-c6eb-3bcc-dcd3ac4f99e5.png)


以上、小ネタでした。
Softmax Cross Entropyの誤差逆伝播法

#Softmax Cross Entropyとは
出力層でよく使われる活性化関数Softmaxと損失関数Cross Entropyとの合成関数です。以下ではバッチ版で議論していきますが、バッチなしのときは$m = 1$を代入すればOKです。

#Softmax Cross Entropyの導関数の導出
活性化関数Softmaxの入力を$\boldsymbol{X}$、出力を$\boldsymbol{Y}$とします。教師データを$\boldsymbol{T}$とします。損失関数Cross Entropyの値を$L$とします。ここで、$\boldsymbol{X,Y,T}$は$m \times n$行列で、$L$はスカラーです。このときSoftmaxとCross Entropyの定義から

```math
y_{ij} = \frac{\exp(x_{ij})}{\sum_{k=1}^n \exp(x_{ik})}\\

L = - \frac{1}{m} \sum_{i, j} t_{ij} \log y_{ij}
```

よって

```math
L = - \frac{1}{m} \sum_{i, j} t_{ij} x_{ij}
 + \frac{1}{m} \sum_{i, j} t_{ij} \log(\sum_{k=1}^n \exp(x_{ik}))
```

$これをx_{pq}$で偏微分すると

```math
\frac{\partial}{\partial x_{pq}}\left(
- \frac{1}{m} \sum_{i, j} t_{ij} x_{ij}
\right) = - \frac{1}{m} t_{pq}\\

\begin{align}
\frac{\partial}{\partial x_{pq}}\left(
\frac{1}{m} \sum_{i, j} t_{ij} \log(\sum_{k=1}^n \exp(x_{ik}))
\right) &= 
\frac{\partial}{\partial x_{pq}}\left(
\frac{1}{m}\sum_{j=1}^n t_{pj} \log(\sum_{k=1}^n \exp(x_{pk}))
\right) \\
&= \frac{\partial}{\partial x_{pq}}\left(
\frac{1}{m} \log(\sum_{k=1}^n \exp(x_{pk})) \sum_{j=1}^n t_{pj}
\right) \\
&= \frac{1}{m} \frac{\exp(x_{pq})}{\sum_{k=1}^n \exp(x_{pk})} \sum_{j=1}^n t_{pj} \\
&= \frac{1}{m} y_{pq} \sum_{j=1}^n t_{pj}
\end{align}
```

one-hot表現のときは$\sum_{j=1}^n t_{pj} = 1$であることを用いると

```math
\frac{\partial L}{\partial x_{pq}} = \frac{1}{m} (y_{pq} - t_{pq})
```

したがって

```math
\frac{\partial L}{\partial \boldsymbol{X}} = \frac{1}{m} (\boldsymbol{Y} - \boldsymbol{T})
```

ただし$\frac{\partial L}{\partial \boldsymbol{X}}$は分母レイアウト記法。

以上から教師データはone-hot表現である必要があることがわかります。
縦書きCSSの世界

# 概要

* まずは文章で縦書きを表示
* 縦書きCSSの基本
* 要素・テキストの表示
* まとめ
* 参考

---

# まずは文章で縦書きを表示

---

# CODEPENで縦書き表示してみる

[CODEPEN](https://codepen.io/moonglows76/pen/QPzBxN?editors=1000)

---

# マークアップとスタイル

3つ要素が必要

* 縦書きになる要素（p）
* 縦書き指定する親要素（div.v-writing）
* 親要素をレイアウトする祖先要素（div.contents）

---

# マークアップとスタイル

縦書きになる要素（p）

* 縦書きにするためのスタイル指定なし

---

# マークアップとスタイル

縦書き指定する親要素（div.v-writing）

* writing-mode: vertical-rl;　→　縦書き指定
* display: inline-block;　→　親要素のレイアウト用
* text-align: left;　→　親要素内の文字の揃え

---

# マークアップとスタイル

親要素をレイアウトする祖先要素（div.contents）

* text-align: center;　→　親要素のレイアウト用

---

# 縦書きCSSの基本

---

# 3つの基本プロパティ

* writing-mode
* text-combine-upright
* text-orientation

---

# 3つの基本プロパティ

**writing-mode** : ブロックのフロー方向（縦書き・横書き）を指定

* 横書き(horizontal-tb, 初期値) / 縦書き(vertical-rl) 等
* [MDN](https://developer.mozilla.org/ja/docs/Web/CSS/writing-mode)

---

# 3つの基本プロパティ

**text-combine-upright** : 一文字分の空間に挿入する複数文字の組み合わせを指定

* none(なにもしない, 初期値) / all(どんな文字でも縦中横) / digits ?(2〜4桁の数値を指定して縦中横, 未サポート)
* Safariは効かない
* [MDN](https://developer.mozilla.org/ja/docs/Web/CSS/text-combine-upright)

---

# 3つの基本プロパティ

**text-orientation** : 行内のテキストの向き（縦書き・横書き）を指定

* 横書き文字・縦書き文字を適切に処理(mixed, 初期値) / 縦書き(upright) / 横書き(sideways)
* [MDN](https://developer.mozilla.org/ja/docs/Web/CSS/text-orientation)

---

#  テキストのスタイリング

* text-align
    * left(上) / center(上下中央) / right(下)
* line-height
    * 行の高さ。縦方向→横方向

---

#  テキストのスタイリング

* text-indent
    * 1行目のインデント。左からの空き→上からの空き
* letter-spacing
    * 横方向→縦方向

---

#  ブロックのレイアウト

* margin / padding / top / left / right / bottom の指定方向はそのまま
* flexboxの位置指定もちゃんと効く

---

# 要素・テキストの表示

---

# 要素・テキストの表示

[CODEPEN](https://codepen.io/moonglows76/pen/yrQvdO?editors=1100)

---

#  要素の表示

* sup（上付き文字） / sub（下付き文字）
    * **normalize.cssを使うと文字が上下に重なる**ので注意
* ruby（ルビ）
    * **ルビテキストと本文テキストの隙間をChromeは調整できない**ので注意

---

#  要素の表示

* 下線
    * デフォルトは左に表示。text-decorationで大まかに調整できる
* リスト・テーブル
    * 左が起点→上が起点

---

#  特殊な文字

* © ㈱　③　Ⅵ　などの機種依存文字はブラウザによって縦・横の表示が異なる可能性あり

---

# まとめ

* 縦書きCSSのためには **1. 縦書きにする要素　2. 1の親要素　3. 2をレイアウトする祖先要素** が必要
* 全角文字は縦書きに変わるが、**半角文字は変わらないので必要に応じてスタイリング**する
* テキストに反映するスタイルは方向が変わるが、**ブロックのスタイルは方向が変わらない**

---

# 参考

* [【CSS】徹底検証！CSSで縦書きデザインをやってみる！ - WEBDESIGNDAY](https://webdesignday.jp/inspiration/technique/css/3789/)
* [縦書きレイアウトとＣＳＳテクニック│縦書きWeb普及委員会](https://tategaki.github.io/explan6.html)
* [CSS3で縦書きにする方法と挙動 - Qiita](https://qiita.com/RinoTsuka/items/3e3eaaba8cddb6ff08e9)
Google Apps Script でスプレッドシートの値を強制的に再計算させる方法

Google Apps Script から Google スプレッドシートの値を取得するだけでは値の再計算はされません。

`TODAY()` 関数や `NOW()` 関数を使用していてスクリプトを実行したときの時刻で再計算させたい場合、以下のようにします。

# 対処法

値の取得前にそのシート内のいずれかのセルの値を変更すると、値が再計算されます。

```js
var SS = SpreadsheetApp.openById('SPREADSHEET_ID_HERE').getSheetByName('SHEET_NAME_HERE');
SS.getRange('A1').setValue('foo');  // A1セルに'foo'と入力
SpreadsheetApp.flush();  // 変更内容を即反映
```

ここではA1セルとしていますが、変更しても問題のないセルに置き換えてください。

# 参考
https://developers.google.com/apps-script/reference/spreadsheet/spreadsheet-app#flush
> Applies all pending Spreadsheet changes.

> Spreadsheet operations are sometimes bundled together to improve performance, such as when doing multiple calls to Range.getValue(). However, sometimes you may want to make sure that all pending changes are made right away, for instance to show users data as a script is executing.
チーム開発のアンチパターン　〜いかにしてプロジェクトを破壊するか〜

# アンチパターン
どうすればチーム開発を停滞させることができるか？
そのためのtipsを紹介したいと思います。

## 1.大量のコードを書こう
とにかく**無駄のある大量のコード**を書きましょう。
大量のコードを書く最も簡単な方法は、**コピペ**です。すでに書いた処理をコピペして使用しましょう。重複した処理や関数をたくさん作りましょう。
簡単な処理に数十行、数百行のコードを書くことで、他の人はあなたのコードを読むことを諦めます。
結果、あなたの書いたコードは誰にも読まれず、誰にも修正されず、そのままそこに鎮座して、のちに問題を引き起こすことになるでしょう。

## 2.一行に全部の処理を書こう
今度は逆に、**複雑な処理や条件を一行**で書きましょう。
複雑な処理を一行で書けた時、あなたはとても気持ちが良くなります。
しかし、他の人は理解できません。仕様の変更で処理を変えなければいけなくなった時、誰も（もしくはあなたすらも）元のコードの意味がわからず、変更ができなくなります。
条件式には**and, or, notをたくさん使う**ことで、複雑な条件を一行で収めることができます。notにnotを重ねて複雑にしましょう。

## 3.再帰処理を書こう
再帰処理もクールな実装の一つです。複雑な処理を簡潔に書けるからです。
あなたのコードを読む同僚は頭がこんがらがります。同時に、あなたに対して尊敬の念を抱くでしょう。なんて難しくてかっこいいコードを書くのだろう、ってね。そしてあなたのコードには**誰も手を触れなくなります**。

## 4. １つのファイルや１つの関数に多くを詰め込もう
意味単位、責務単位でファイルや関数を分けることをすると、あなたのコードは読みやすくなってしまいプロジェクトを破壊できません。
「このファイルに全部の処理が書いてあるから必要なメソッド探してね」
「このメソッド内で全部の処理をやってるよ」
**全てが１箇所にまとまっているとわかりやすいよね**、みたいに笑顔で言いましょう。
これは**単体テストをできなくさせる**ためにも必要です。

## 5.今は必要ないコードや引数を書きましょう
今は使わないけど将来使いそう、と思ったらすぐにそのメソッドを作ったり引数を用意しておきましょう。
**きっといつか使うだろうと思いますが、多分使うことはありません**。
同僚は**不必要な引数を理解することに多くの時間を使う**ことになるでしょうが、それはこちらの思う壺なのです。

## 6.スコープの広い変数をたくさん使おう
グローバル変数やプロパティは存分に宣言し、使っていきましょう。
**どこでその値が変更されるのかさっぱりわからない**ようにしましょう。
同僚はあなたのコードを読んでも、どの変数にどんな値が今入っているのか全く理解できず、コードを読むことを諦めてくれるでしょう。

## 7. リファクタしない
無駄が多く、責務もはっきりせず、分かりにくくて編集したくないようなコードをせっかく書いたのだからリファクタはしないようにしましょう。
リファクタなんかする暇があったら、どんどんと無駄で読めないコードを量産して、レガシーコードを生産していきましょう！！
Packerインストール

##環境
- AmazonLinux2

##手順
1. ダウンロードしたいバージョンを確認
   https://releases.hashicorp.com/packer/
   
2. Packerダウンロード（2019年4月28日時点の最新バージョンは1.4.0）

    ```
    wget https://releases.hashicorp.com/packer/1.4.0/packer_1.4.0_linux_amd64.zip
    ```

3. 解凍

    ```
    unzip packer_1.4.0_linux_amd64.zip
    ```
4. パスを通す

    ```
    sudo mv packer /usr/bin
    ```
「アンダースタンディング コンピュテーション」を Haskell でやってみた

## tl; dr

- 「アンダースタンディング コンピュテーション」楽しかった！
- Haskellでやった例を上げたので良かったら参考にどうぞ
  - https://github.com/spinylobster/book-understanding-computation-in-haskell

## 本の紹介

[アンダースタンディング コンピュテーション](https://www.oreilly.co.jp/books/9784873116976/)
[<img width="300" src="https://www.oreilly.co.jp/books/images/picture_large978-4-87311-697-6.jpeg">](https://www.oreilly.co.jp/books/9784873116976/)
> 本書は計算理論をRubyでわかりやすく紹介する書籍です。コンピュータサイエンスの主要なテーマである「計算とは何か」という問いに対して、難しい数学の知識を利用をせず、Rubyを使って実際にプログラムを作りながら解説します。さらに、なぜこれらのアイデアが大切なのか、そしてそのアイデアは我々の日常的なプログラミングにどう関係していくのかを解き明かしていきます。日本語版ではまつもとゆきひろさんによる「日本語版まえがき」を収録。プログラミングの根底にある理論を学ぶことで、より広く深くプログラミングを考えたいプログラマ必携の一冊です。

以下ざっくり各章の内容紹介

| 章タイトル | 内容 |
|-----------|------|
| 1章 Rubyひとめぐり | Rubyの文法やREPLの使い方の説明 |
| 第Ⅰ部 2章 プログラムの意味 | 操作的意味論や表示的意味論について、簡単な言語を実装しながら学ぶ |
| 3章 最も単純なコンピュータ | 決定性有限オートマトン、非決定性有限オートマトンと正規表現について実装しながら学ぶ |
| 4章 能力を高める | プッシュダウンオートマトン(スタックの操作ができるようになったオートマトン)を作り、前章で作ったオートマトンと比較する |
| 5章 究極の機械 | チューリングマシンについて実装しながら学ぶ |
| 第Ⅱ部 6章 無からのプログラミング | Rubyでラムダ計算を真似てFizzBuzzを書く |
| 7章 至るところにある万能性 | ラムダ計算を含む、チューリングマシン以外のチューリング完全なシステムの紹介と実装をしていく。SKIコンビネータやライフゲームなど |
| 8章 不可能なプログラム | チューリングマシンにできないこととその理由について。Quineも出てくる |
| 9章 おもちゃの国のプログラミング | 抽象解釈と静的意味論について。2章で作った言語に簡単な型システムを実装する |

この本は、簡単に言うと「プログラマのためのコンピュータサイエンス入門本」です。
上で紹介した通り、ごく簡単な言語の実装からオートマトン、チューリングマシン、ラムダ計算、型システムなど、プログラマなら「いつかは理解したい、作ってみたい」と思うような概念を実際に作りながら学ぶことができます。

300ページちょっとの本にこれだけの内容が詰め込まれていて、圧巻です。
この本は数学に親しんでない人向けに書かれていて数式や証明は出てこないので、個人的にはとても有り難かったです。おかげで挫折することなくいい感じにCSに入門できた気がします。
この本のおかげでSICPやTAPLに挑む勇気も湧いてきました。

Ruby以外の勉強したい言語でやると練習にもなって1粒で2度おいしい！

## Haskell でやってみた

Ruby でやっても良かったのですが、 Haskell の方が個人的には書いてて気持ちいいのでチャレンジしてみました。
Haskell は Ruby とは互いに距離のある言語なので、写経は割と苦労します。
コード例を共有しておくので、僕と同じく Haskell でチャレンジする人がいれば参考になると幸いです。

https://github.com/spinylobster/book-understanding-computation-in-haskell

`src/` 以下が実装コードで、 `test/` 以下には書籍内の動作確認に相当するコードがあります(HSpec)。

極力書籍中のコードとHaskellのコードが一致するように努めたのであまりHaskellらしくないかもしれません。
ただそれとは関係なく僕のHaskell力が低くて苦しんでる箇所もあるので、イケてないところを指摘してもらえると飛び上がって喜びます。

すごく楽しい本だったので、興味のある人は是非やってみてください！
TypeScriptとJavaScriptとのsortに関する注意点

# TL;DR
- ~~JavaScriptのsortは戻り値を持たず、自分自身を並べ替える。~~
- ~~TypeScriptのsortは**戻り値を持ち、並べ替え後の配列を返却する。**~~

JavaScriptからTypeScriptへのmigration時にハマったので、記載しておきます。

(追記)
**正しくは以下でした。**
- JavaScriptのsortは戻り値を持ち、自分自身を並べ替えた結果を返却する。
- TypeScriptのsortは戻り値を持ち、自分自身を並べ替えた結果を返却する。

mobx利用に関するハマりだったようなので、別途検証記事を記載します。

# JavaScriptからTypeScriptへのmigration
配列のsortに関する処理を、JavaScriptからTypeScriptへ単純に変換(「.js」を「.ts」へ変換)してみると、期待通りに動作しませんでした。

```javascript:SortSample.js
const array = [1,5,2,4,3];
array.sort();
console.log(array);
/*
* 結果
* 「1,2,3,4,5」
* (期待通りに並べ替えが発生する)
*/
```

```typescript:SortSample.ts
const array = [1,5,2,4,3];
array.sort();
console.log(array);
/*
* 結果
* [1,5,2,4,3]
* (並べ替えが発生しないようにみえる。なぜ。。。)
*/
```

## JavaScriptのsort
[MDNのsort](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#%E6%A7%8B%E6%96%87)を確認すると、以下のようになっています。

>戻り値
>ソートされた結果の配列。ソートは対象配列上で直接行われることに注意して下さい。コピーされた別の配列が準備されることはありません。

うん。私の知っているsort処理のとおりです。

## TypeScriptのsort
TypeScriptのsortはドキュメントを見つけられなかったので、定義ファイルを確認します。

```typescript:lib.es5.d.ts
    /**
      * Sorts an array.
      * @param compareFn The name of the function used to determine the order of the elements. If omitted, the elements are sorted in ascending, ASCII character order.
      */
    sort(compareFn?: (a: T, b: T) => number): this;
```

「sort(compareFn?: (a: T, b: T) => number): ***this;***」
→「***this;***」

ん？戻り値が「void」ではなく「this」となっている??
つまり、**sortされた結果を戻り値として返却している!!**

なので、TypeScriptのsort処理を利用するならば以下の通りに変更する必要があります。

```typescript:SortSample.ts
let array = [1,5,2,4,3];
array = array.sort();
console.log(array);
/*
* 結果
* 「1,2,3,4,5」
* (期待通りに並べ替えが発生する)
*/
```

#まとめ
- ~~JavaScriptのsortは戻り値を持たず、自分自身を並べ替える。~~
- ~~TypeScriptのsortは**戻り値を持ち、並べ替え後の配列を返却する。**~~

(追記)
**正しくは以下でした。**
- JavaScriptのsortは戻り値を持ち、自分自身を並べ替えた結果を返却する。
- TypeScriptのsortは戻り値を持ち、自分自身を並べ替えた結果を返却する。
plunkerでteddy

#概要

plunkerでteddyやってみた。

#写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/f26a8e4a-c163-f921-0a51-81f799b59552.png)

#成果物

https://embed.plnkr.co/Zc3Ic0QF5fJbEbJsPcSq/

以上。
FuelPHPのエラー (1064)You have an error in your SQL syntax..

# 環境
MAC
MAMP
FuelPHP 1.8.1
# Authクラスのcreate_userメソッドを使うと以下のエラー
適当にxで伏せ字にしてます。

`
Fuel\Core\Database_Exception [ 1064 (1064) ]:
You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'group, profile_fields, last_login, login_hash, created_at) VALUES ('xx', 'XXXX' at line 1 [ INSERT INTO users (username, password, email, group, profile_fields, last_login, login_hash, created_at) VALUES ('xx', 'XXXXXXXX=', 'x@x.x', 1, 'a:0:{}', 0, '', xxx) ]
`
### 解決方法
fuel/app/config/db.phpファイルに「'identifier' => '`'」を追加

「`」はshift押しながら＠マークを押す

```php:fuel/app/config/db.php
<?php
return array(
    'active' => 'mysqli',

    'mysqli' => array(
        'type' => 'mysqli',
        'connection' => array(
            'hostname' => 'localhost',
            'database' => 'dbname',
            'username' => 'xxxx',
            'password' => 'xxxx',
            'persistent' => false,
            'compress' => false,
        ),
        'identifier' => '`', //これを追加する
        'table_prefix' => '',
        'charset' => 'utf8',
        'caching' => false,
        'profiling' => true,
    ),
);
```
参考サイト
[https://fuelphp.com/forums/discussion/comment/12002](https://fuelphp.com/forums/discussion/comment/12002)
Hamlの書き方を簡単にまとめてみた

# Hamlとは
『HTML abstraction markup language』の略で、
HTMLを生成するマークアップ言語のこと。


## Hamlのメリット
・　タグが省略できるため記述が少ない
・　rubyが使える
・　変数、条件分岐、繰り返しも使える

##基本の書き方
```sample.html.erb
<!DOCTYPE html>
<html>
  <body>
    Hello!!
  </body>
</html>
```
```sample.html.haml
!!!
%html
  %head
  %body
    Hello!!
```
####！！！
DOCTYPE宣言を生成
####％
開始タグと閉じタグを生成

##class属性
```sample.html.erb
<div class ="sample">sample</div>
```
```sample.html.haml
.sample
  sample
```
##id属性
```sample.html.erb
<div id ="sample_id">sampleのid</div>
```
```sample.html.haml
#sample
  sampleのid
```
##属性
```sample.html.erb
<div class ="sample"　style="color:red">sample</div>
```
```sample.html.haml
.sample{style: "color:red"}
  sample
```
Hamlを使い始めた時は、全然馴染まずかなり抵抗がありましたが、徐々に慣れてくると楽だなぁと感じるようになりました。
やっぱり、慣れって大事。
requestFocus は狙いを定めて

# 目次
1. はじめに
2. スクロールを手繰り寄せて
3. ソフトウェアキーボードを貫いて
4. さいごに

# はじめに
　AndroidのViewのフォーカスを切り替えるには view.requestFocus(), view.requestFocusFromTouch() を使います。しかし、どうもフォーカス対象のViewが画面外にある場合は失敗するようなので(※詳しくは未調査)、その対処方法を記載します。

# スクロールを手繰り寄せて
　これは、フォーカス対象のViewが、ScrollView上でスクロールされて見えなくなっているときの対処方法です。

```java:Activity.onClick(View)とか
// スクロールは post しないといけないもよう
scrollView.post(() -> {
    // フォーカス対象のViewまでスクロールする
    scrollView.scrollTo(0, focusingView.getBottom());
    // フォーカスする
    focusingView.requestFocusFromTouch();
});
```

# ソフトウェアキーボードを貫いて
　これは、ソフトウェアキーボードが出現したことにより、フォーカス対象のViewが見えなくなっているときの対処方法です。もしかしたらキーボードの下に隠れただけなら必要ないかもしれませんが(※詳しくは未調査)。

```java:Activity.onClick(View)とか
// InputMethodManager.hideSoftInputFromWindow() を利用し、ソフトウェアキーボードを隠す
// 引数の WindowToken は 現在フォーカス中のViewから取得する
((InputMethodManager) getSystemService(Activity.INPUT_METHOD_SERVICE))
    .hideSoftInputFromWindow(getCurrentFocus().getWindowToken(), 0);

// キーボードを隠しただけでは、キーボードの裏側が白いままなので、再描画する
getWindow().getDecorView().requestLayout();

// フォーカス対象のViewにフォーカスする。時間差が必要なようなので、postする
focusingView.post(() -> focusingView.requestFocusFromTouch());
```
　再描画は invalidate() でも大丈夫らしいです(未調査)。違いも未調査。あと、フォーカスするときに post が必要なのも未調査。

# さいごに
　詳しくは未調査、な部分が多いですがまた時間があれば、ということで。
ghqで管理するプロジェクトごとtmuxセッションを作ってるので楽にするプラギン作った

# はじめに
現在私はghqでプロジェクトを落として、
プロジェクトごとにtmuxセッションを立ち上げ(tmuxのルートリポジトリをプロジェクトのルートにするためにわざわざ該当ディレクトリに`cd`してから)、
そこでvimを動かし、プロジェクトを切り替えるときは`prefix-s`をして切り替えている。

これらを5回ぐらい繰り返したところで面倒くさくなったのでsh書いた。
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">ghq x tmuxでプロジェクトごとセッション立ち上げるのをfzfでインタラクティブにラクラクできるやつ書いた(やっつけ仕事) <a href="https://t.co/3gHxgh9mEe">pic.twitter.com/3gHxgh9mEe</a></p>&mdash; けんと (@2357gi) <a href="https://twitter.com/2357gi/status/1122209396564484096?ref_src=twsrc%5Etfw">2019年4月27日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

[2357gi/ghux - github.com](https://github.com/2357gi/ghux)


# できること
まず`ghq get ~~`でリポジトリを落としてくる。
ghuxを起動
fzfでghqで管理しているプロジェクトを選択
選択されたプロジェクト用のセッションが既に立っていればそれにattach,
立っていなければ新しくセッションを作成する。

これで適当にghuxをCtrl-gにでもshortcut登録しておけば,
プロジェクトのセッションが立っているか立っていないか確認しないでとりあえず`Ctrl-g`してディレクトリ選択すればおｋになる。
捗る〜〜〜！

ｚplugでimportできるようにそれっぽいファイル名にしたけど
自分がzplugを使ってないのでつかえるかわからないです。

気が向いたらやってみるか、
それかこれをgolangで書き直してみたひ
型落ちノートPCにJava開発環境を作った備忘録

しました。

### 2023年4月追記
文面の体裁を整えるため更新。新しい情報は何も入っていません。

## 今回のゴール
真っさらなMacBook Air(2014)に色々入れて、Java8でハローワールド

## 経緯(興味がなければ飛ばしてください)
色々あって大学卒業の時に買ったMacBook AirにOSを再度入れなおす羽目になったので、
そのついでに真っさらなこいつを外で開発用として使える様にしていきたい。
まずは最低限のローカルでの開発を出来るように、やったことをメモとして残しました。

## やったこと
### 各種アプリケーションのインストール
* Google Chrome(ブラウザ)
* IntelliJ Community(IDE)
* Atom(エディタ)

割と適当。IntelliJとAtomは使ってみたかったので採用。

### Terminalと上記のアプリケーションをDockに登録
起動している最中に「オプション＞Dockに追加」で追加できる

### Homebrewの導入
これは何？→Mac用のパッケージ管理ツール
公式サイト：https://brew.sh/index_ja
Getting Started的なterminalで叩く用のコマンドは載っていますが、
実際はCommand Line Toolというものも入れる必要があります。

導入方法はこちらのQiita記事を参考にしました。

https://qiita.com/krtsato/items/ba567acacb93a7a02dd9

### Homebrewを使いJava(JDK)をインストール
```Terminal:Terminal
$ brew tap caskroom/versions
$ brew cask install caskroom/versions/adoptopenjdk8
```
普通に`brew cask install java`とやると現行の最新バージョン(2019年4月現在だと12)がダウンロードされるため、
バージョンを選んでインストールするためには上記の書き方が必要。
`brew tap`で公式以外のリポジトリをフォーミュラとして追加できる。`caskroom/versions`は過去バージョンのライブラリが入っているとの事
純正のjdk8は既にリポジトリ上には存在しないため、AdoptOpenJDKのJDKをつかう。
詳しく知りたい方はこちら

https://adoptopenjdk.net/index.html

### JAVA_HOMEにパスを通す
```Terminal:Terminal
export JAVA_HOME=`/usr/libexec/java_home -v 1.8`
```
因みに`/usr/libexec/java_home`とは、そういうディレクトリが有るのではなく
` -V (バージョン)`で指定したJVMバージョンのあるディレクトリを探してきてくれるとのこと。はえー。

### IntelliJ起動
初期設定は特に何もなく出てきた通りにやっていけばOK
![スクリーンショット 2019-04-28 2.35.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261258/34819176-7736-9d08-8ce8-6875f8adf8a9.png)

出来た！

## おまけ：日本語化
下記のサイトからMac用のPleiades Plugin インストーラをダウンロードし、実行してください

http://mergedoc.osdn.jp/#pleiades.html#PLUGIN

マニュアル：

https://pleiades.io/pages/pleiades_jetbrains_manual.html
Rails×Vue.jsでVuetifyを導入しようとしたときのStylusエラー解消法

Rails×Vue.jsで作ってたアプリにVuetifyを導入しようとしたらStylusのエラーが発生しました。

# 環境

```bash
tocomi$ rails -v
Rails 5.2.3

tocomi$ vue -V
3.5.5
```

# 前提

`vue add vuetify`で作成されたファイル群を`app/javascript`にコピーしてVuetifyを導入しようとしました。

# Stylusのエラー

```
04:11:39 webpack.1 | ERROR in ./node_modules/vuetify/src/stylus/app.styl 1:0
04:11:39 webpack.1 | Module parse failed: Unexpected character '@' (1:0)
04:11:39 webpack.1 | You may need an appropriate loader to handle this file type.
04:11:39 webpack.1 | > @-moz-keyframes shake {
04:11:39 webpack.1 | |   59% {
04:11:39 webpack.1 | |     margin-left: 0;
```

`You may need an appropriate loader to handle this file type.`
とあるので、どうやらloaderとやらの設定が必要っぽいです。

## loaderの追加

なんとなくwebpack周りの設定なんだろうなーと思ったので、
`config/webpack`ディレクトリに目星をつけました。

`loaders`以下に`vue.js`というのがあったので、
見よう見まねで`stylus.js`を作って読み込ませてみます。

利用するloaderは以下を参考にしました。
https://stackoverflow.com/questions/47452077/how-to-configure-the-webpacker-to-work-with-stylus-so-i-can-use-vuetify

```js:config/webpack/loaders/stylus.js
module.exports = {
  test: /\.styl$/,
  use: [
    'style-loader', 'css-loader', 'stylus-loader'
  ]
}
```

```diff:config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const { VueLoaderPlugin } = require('vue-loader')
const vue = require('./loaders/vue')
+ const stylus = require('./loaders/stylus')

environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
environment.loaders.prepend('vue', vue)
+ environment.loaders.prepend('stylus', stylus)
module.exports = environment
```

## 解消

サーバーを再起動したらエラーが消えVuetifyのWelcomeページが表示されるようになりました。

# まとめ

とりあえず問題は解消したが、webpack周りの知識が乏しいのでもっと学びが必要。
【Unity】Unityで作ったアプリにInkscapeで描いたアイコンを設定する

環境メモ
⭐️Mac OS Mojave バージョン10.14![s_CherryCocktailGrass_Icon.png]
⭐️Unity 2018.2.15f1
⭐️Android3.2

↓↓Androidアプリに設定するアイコン
[![s_CherryCocktailGrass_Icon.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/f7a4bd07-8943-a80c-cc95-2e8f492141d1.png)](https://play.google.com/store/apps/details?id=com.non.CherryCocktailGrass)


1.Inkscapeで256×256pxでアイコンを作りpng出力する
<img width="1121" alt="スクリーンショット 2019-04-20 22.52.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/0bf87c4b-ef3f-d13c-cc16-79c9de43491e.png">

2.Unityに取り込む
Assetsフォルダの中に、Drag＆Dropでpngを入れる。
Texture　Typeを「Editor GUI and Legacy GUI」にする
<img width="917" alt="スクリーンショット 2019-04-20 23.02.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/e4bc8345-54bc-f77d-0f92-ee666cde9d9a.png">


3.Unity側の設定でPlayerSettingsを開く。
「Edit」-「Project Settings」-「Player」
<img width="470" alt="スクリーンショット 2019-04-28 0.17.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/78548194-ed3b-1833-cc24-ee8c2f3b0b46.png">

4.Default Iconとそれぞれiconを設定する
<img width="980" alt="スクリーンショット 2019-04-28 0.26.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/c43ff6fc-a815-4da1-e75c-467a3fc23b97.png">

<img width="1007" alt="スクリーンショット 2019-04-28 0.28.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/a3954b81-41ac-5500-3fc5-9f070b1e7acd.png">

<img width="1005" alt="スクリーンショット 2019-04-28 0.29.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/685c6eab-bccd-b20f-9c3b-0736d301882f.png">

完了！！

</br>
</br>

↓↓Google Play
CherryCocktailGlassチェリーカクテルグラス〜無料簡単ミニゲームFree games
[![googleStoreLink.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/0687ddf4-3146-65bd-7ca5-45b6f70fb153.png)](https://play.google.com/store/apps/details?id=com.non.CherryCocktailGrass)
[![gplay_icon_small.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/9b024bfe-3963-f0d9-0c3f-408bfe071522.png)](https://play.google.com/store/apps/details?id=com.non.CherryCocktailGrass)

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">⭐️Androidアプリ⭐️リリース<br>🍒CherryCocktailGlass🍒<br>Blenderで絵を描いてUnityで作成したミニゲームリリースしました😍<br>🍷カクテル🍷グラス🍷に<br>🍒チェリー🍒をのせるシンプルなゲームです。<br>✨（●＾o＾●）✨<br>【Android】<br>Google Play 無料Free<a href="https://t.co/I70R9QEDuq">https://t.co/I70R9QEDuq</a><a href="https://twitter.com/hashtag/CherryCocktailGlass?src=hash&amp;ref_src=twsrc%5Etfw">#CherryCocktailGlass</a> <a href="https://t.co/g8kCM9QVhL">pic.twitter.com/g8kCM9QVhL</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1121818121323433984?ref_src=twsrc%5Etfw">April 26, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Linuxでcrontabのファイルに定期的にディレクトリを削除するためのコマンドを書く

今回初めて投稿致します。先日会社でLinuxの特定のディレクトリを定期的に削除するためにcrontabのファイルを編集したので書き残して置こうと思います。

```
0 1 * * * find /usr/test/ -type d -mtime +0 | xargs rm -rf
```

このコマンドは、生成されてから24時間以上経過したディレクトリを毎日午前1時頃に削除するものです。
PrettierのTrailing Commaが動作するパターン、しないパターン

# この内容について
Trailing Commaの動作パターンを正しく理解しておらず、設定にハマってしまったので反省のための忘備録。

## 結論
PrettierのTrailing Commaは1行では動作せず、複数行で動作する。
下記は簡単なサンプルだが1行あたりの最大文字数(= Print Width)で1行にフォーマットされて見落としてしまうため注意。対策として、変数宣言含め1行で80文字以上のオブジェクトか配列を作れば正確に確認できる(Print Widthがデフォルトの80文字とする)

```
// NG
const notWork = { hoge: 0, foo: 1 }

// OK
// 実際のコードでは下記の場合は短いため1行にフォーマットされカンマも取り除かれるため注意
const work = {
  hoge: 0,
  foo: 1,
}

// OK
// これなら1行にフォーマットされることはないので正確に確認できる
const better = {
  hoge: 1234567890,
  foo: 1234567890,
  huga: 1234567890,
  piyo: 1234567890,
}
```

## 参考

> Print trailing commas wherever possible when multi-line. (A single-line array, for example, never gets trailing commas.)

複数行で動くと書いてあったのに見落としてしまって痛い。自身の英語力不足を痛感した。
https://prettier.io/docs/en/options.html#trailing-commas

自分の勘違いに気がついたイシュー
https://github.com/prettier/prettier/issues/2655