OmniAICreator/Qiita-1.07M huggingface dataset:
UiPath勉強六回目

#UiPathに触ってみる(6)

今回は五回目で取得したデータを実際に表示するまでの処理を行う。

最初に前回の処理で作成された「Extract Structured Data」の設定を変更する。

![2.PNG](https://qiita-image-store.s3.amazonaws.com/0/246340/e1dd1189-33d5-fb94-627c-aab6a0eaaa41.png)



「Extract Structured Data」の「Variables」を確認してみると「scope」が「Data scraping」となっている。

![5.PNG](https://qiita-image-store.s3.amazonaws.com/0/246340/28e8ed76-0640-ad11-a67e-29292b0c59d0.png)


これは、前回の作成内容が「Data scraping」のボックス内のみで使えることを示している。
今回の処理では検索から表示までの自動化を行うため、下記のように「scope」範囲を広げる必要がある。


![6.PNG](https://qiita-image-store.s3.amazonaws.com/0/246340/611e8883-6e4c-3a06-2eb2-6e902ce70001.png)

これで、取得したデータを次のボックスでも使用できるようになる。

次に、左側にある「Activities」で「For Each Row」を検索する。

![7.PNG](https://qiita-image-store.s3.amazonaws.com/0/246340/f558e930-767a-f910-2d2a-368c0c876b94.png)

それを「Data scraping」のボックスの下にドラッグ＆ドロップする。

![8.PNG](https://qiita-image-store.s3.amazonaws.com/0/246340/83b19955-6da0-c293-f008-9bdfc3fce202.png)

先ほどのデータを取得する必要があるので、右上の欄に「ExtractDataTable」を指定する。

![9.PNG](https://qiita-image-store.s3.amazonaws.com/0/246340/62231f94-93d7-bdd4-92e2-382c4b7103c7.png)

「Body」に関しては、Activities」で「For Each Row」を検索。


![10.PNG](https://qiita-image-store.s3.amazonaws.com/0/246340/0237755b-dd6e-e3be-14ea-3d4672f8ed45.png)

ドラッグ＆ドロップする。


![11.PNG](https://qiita-image-store.s3.amazonaws.com/0/246340/527bfd83-873a-9844-e5da-315bc6198f96.png)

「Text」欄には「row(0).toString」と入力。
※取得したデータの列番号0にあるデータをString型に変換して取得する。



![12.PNG](https://qiita-image-store.s3.amazonaws.com/0/246340/09017909-0948-e862-bdec-0baf2dd016e3.png)

この状態で「Run」ボタンを実行すると「Output」に検索結果が表示される。


![13.PNG](https://qiita-image-store.s3.amazonaws.com/0/246340/f66e82b5-b19e-b7d6-7c85-f2509e84eacc.png)

これで、検索から表示までの自動化が完了。
『ZenHub x Github』複数リポジトリをマージして、ひとつのBoardでIssueを一元管理しよう！

今回は、Zenhubを使ってタスク管理しているときに他リポジトリに切ったIssueをチケット管理しているBoardでもみたい際の手順について記載していきます。

#### ■ おさらい
[『ZenHub x GitHub』を使ったプロダクトバックログ運用について](https://medium.com/@i35_267/zenhub-x-github-%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%83%97%E3%83%AD%E3%83%80%E3%82%AF%E3%83%88%E3%83%90%E3%83%83%E3%82%AF%E3%83%AD%E3%82%B0%E9%81%8B%E7%94%A8%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6-2d599c9f9d0a)に詳しい運用について記載しております。

#### ■ イメージ
![image.png](https://qiita-image-store.s3.amazonaws.com/0/122901/44144695-0271-e67d-06a8-c3eff96ae775.png)
サマリー
・ 『backlog』というチケット可視化専用のリポジトリ(Board)を用意する。
・『api』『infra』などの他リポジトリに対して作成したIssueを『backlog』のBoardでも一元管理したい。


#### ■ マージ方法
やり方は簡単で、下でいうところの『Repo』といったタグからリポジトリを選択していけばうまくマージされます。
<img width="1050" alt="スクリーンショット_2018-07-30_17_00_57.png" src="https://qiita-image-store.s3.amazonaws.com/0/122901/c8a910bc-2e39-2855-f1d0-c8fd870394a6.png">

良いところは、マージ元のレーン(今回でいうとreview_backlog)をマージ先にも適応してくれるところです。
デフォルトレーンが下記なのですが、
<img width="1273" alt="スクリーンショット 2018-07-30 23.37.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/122901/b53d9b9d-3e0e-da58-fb06-efff00ed5fdc.png">


マージすると、マージ元のレーンになるように自動で編集してくれます。※下は独自レーンです。
<img width="1271" alt="スクリーンショット 2018-07-30 23.37.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/122901/135995ab-733b-b0de-72a7-1c0bac18ed8f.png">

#### 注意点
このままだと、Boardに関しては一覧で見ることはできますが、まだ、『Milestone』 いわゆるスプリントには他リポジトリのタスクを紐付けることはできません。

なので、Milestoneのほうも。editして紐づけてあげます。
![スクリーンショット_2018-07-30_19_32_33.png](https://qiita-image-store.s3.amazonaws.com/0/122901/70169252-d0df-4f05-fdc8-426c1f0688c5.png)
個人学習メモ＃１０　

パスワードマネージャー・・・アプリケーションのID・パスワード認証に用いられる複数のパスワードを記憶・管理する機能


（ログイン機能に関して）
$_POST=フォームから送られてきた値を受け取ることができる

<form action="" method="post">
  <p><input type="text" name="first_name"></p>
  <p><input type="text" name="last_name"></p>
  <p><input type="submit" value="送信"></p>
</form>

下記のままではセキュリティ的に良くない
<?php
echo $_POST["first_name"];
echo $_POST["last_name"];
?>



$_SERVER=PHPは稼働しているウェブサーバーが生成するヘッダ情報、パス情報、スクリプトの位置のような情報を提供する。

PHP_SELF=スクリプトのファイル名

SERVER_ADDR=サーバーのIPアドレス

empty=変数が空であるかどうか

split=指定した区切り記号を使用して文字列を部分文字列に分割し、配列として返す。

escape=16進数に変換

unescape=ASCII文字に変換

ASCII文字・・・半角の英字やアラビア文字、記号、空白文字などの128 文字が定義されている。
PowerShellからDocker for Windowsの-vにpwdを指定する時の注意点

# はじめに
`$(pwd)`と`${pwd}`で少しだけハマったのでまとめておく。

|指定例|結果|備考|
|:--|:--|:--|
|-v $(pwd):/foo/bar| NG | "invalid reference format."になる|
|-v "$(pwd):/foo/bar"| OK | |
|-v ${pwd}:foo/var| OK| |
|-v "${pwd}:/foo/bar"| OK | |

- `$(pwd)`はダブルクォートで囲む必要がある
- `${pwd}`ならどちらでも大丈夫

PS: 念の為ですがシングルクォートは、そのまま文字列とみなされてしまうのでNGです。
HTMLを本当に何一つしたことがない人に向けて

#はじめに
この記事はつい最近ドットインストールというプログラミング勉強サイトを使ってHTMLについて勉強した内容を備忘録代わりにまとめたものです。もっと詳しく知りたければ、実際にドットインストールのサイトを見てもらえばいいかなと思います。


###目次
1.HTMLとは？
2.HTMLファイルの作り方
3.HTMLのタグ
4.HTMLの構造


##HTMLとは？
まず、HTMLとは<font color="Red">”Hyper Text Markup Language”</font> の略称です。
簡単にいえば、HTMLとはホームページにおける構造的な文書を書くための技術になります。HTMLとよくセットで話題に上がることの多いCSSはHTMLで書かれた殺風景な文書を色付けしたり、より華やかにするために用いられる技術です。

この記事では、主にHTMLについて話していきます。

##HTMLファイルの作り方
下に今後多く使うことになりそうな基本的なHTMLファイルの骨格を書いてみます

```html
<!DOCTYPE html>
<html lang="ja">
   <head>
      <meta charset="utf8">
      <title>はじめてのHTML</title>
   </head>
   <body>
      <p>こんにちは！</p>
   </body> 
</html>
```

まずこちらを”index.html”として保存してみましょう。（”index”の部分は何でもいいです。）
次に、このファイルをインターネットにドラッグアンドドロップしたら（意味が解らなければ、[こちら](https://dotinstall.com/lessons/basic_html_v3/31604)を参照してください）下のような画面になるはずです。![html(1).png](https://qiita-image-store.s3.amazonaws.com/0/272947/5f938a40-e2e2-abf0-413e-fa9fe2b937b2.png)

こんな感じでHTMLファイルは作られます。
ファイルに何か変更を加え、ホームページ内容を更新したい場合は時計回りの矢印をクリックすれば内容が更新されます。

##HTMLのタグと属性
ファイルの作り方がわかったところで、次に実際のファイルの中身について説明をしていきます。
まず基本用語としてタグの説明をしようと思います。

タグは文章の内容、位置づけを明らかにする役割があります。ある文章をタグ付けする場合、以下のような形になります。

<font color="Red"><タグ></font>文章<font color="Red"></タグ></font>

タグ付けしたい文章を<タグ></タグ>で挟み込むことでタグ付けをすることができます。
ピンと来ないと思うので、実際にさっき作ってみたindex.htmlの中身を参考にしてみましょう。

```html
<title>はじめてのHTML</title>

<p>こんにちは！</p>

```
上にあげた二つは例としてわかりやすいんじゃないかと思います。

一つ目は「はじめてのHTML」という文章に\<title>（タイトル）という意味を、
二つ目の\<p>はparagraphの略で、「こんにちは！」という文章に（段落）という意味を与えています。

このようなものをタグといい、今後多用することになります。

##HTMLの構造
ではここで細かくindex.htmlの一行一行の意味を見ていきたいと思います。

<font color="LightSeaGreen">\<!DOCTYPE html></font>
HTMLのバージョンを宣言している行です。
これはもう考えず、一行目に書くものだ！という認識でいいと思います。

<font color="LightSeaGreen">\<html lang="ja">\</html></font>
ホームページの本文は基本的に\<html>タグで囲ってやります。これもそうゆうものなのか、という感じでいいと思います。<font color="DeepPink">lang="ja"</font>とすることで「日本語でサイトを書きます」ということを宣言しています。

<font color="LightSeaGreen">\<head>\</head></font>
\<head>タグで囲まれた部分に文章自体の情報（文字コード、タイトルなど）の設定を記入していきます。直接ホームページ本文中に現れることはない部分です。
実際に、この\<head>\</head>内で<font color="LightSeaGreen">\<meta charset="utf8"></font>として文字コードが宣言されています。
ちなみにタイトルというのはホームページを開いたときに上のほうに出てくる名前です。

![html(2).png](https://qiita-image-store.s3.amazonaws.com/0/272947/05934182-24d8-a2fd-4a4c-6bb26b5c09ba.png)


<font color="LightSeaGreen">\<body>\</body></font>
\<body>タグに囲まれた部分は実際に本文となる部分です。

##おわりに
今回は本当に初歩の初歩について書いてみました。
この先のことも見たいと思ってくれた方は今後も書いていくので見ていただけたらと思います。:construction_worker_tone1:
配列のデータからDOMを作る

表題のとおり。
jQueryを使わずにDOMを作ります。

## HTML

tbodyのなかにDOMを作ります

```html
<table>
 <tbody></tbody>
</table>
```

## Data

```javascript
const FAMILY = [
  {
    "id": 1,
    "name": "悟空"
  },
  {
    "id": 2,
    "name": "悟飯"
  },
  {
    "id": 3,
    "name": "悟天"
  },
  {
    "id": 4,
    "name": "チチ"
  }
]
```

## Javascript

パターン1

```javascript
FAMILY.map(t => {
  const list = `
    <td>${t.id}</td>
    <td>${t.name}</td>
  `
  const trElement = document.createElement('tr');
  trElement.innerHTML = list;
  document.querySelector('tbody').appendChild(trElement);
});
```

パターン2

```javascript
document.querySelector('tbody').innerHTML = FAMILY.map(t => (
  `
    <tr>
      <td>${t.id}</td>
      <td>${t.name}</td>
    </tr>
  `
)).join('');
```
Railsのhelperはどのhelperファイルに書いても使用可能(自分で作るhelper)

#Helperとは
viewを見やすく簡単に書くために、メソッド化したもの。
helper.rbなどのファイルに書き込みます。
基本、どのファイルにhelperを定義しても使用可能です。
が、どこで使われているのかわかりやすくするために、関連ファイル内に記述します。


なお、
モデルやコントローラーにもhelperは使用可能。
下記のようにコントローラやモデルにincludeすればいいです。
```include Helper名```　

ただ、コントローラに使うならconcernっていうフォルダがあって、
それがコントローラ版のhelperって思ってるんですが、使い分けが謎。
誰か教えてください。
sympyで「疎行列(sparse matrix)」をやってみた

(参考)Python：FEMでの疎行列計算の利用（３次元骨組構造解析での事例）＞簡単な連立一次方程式を解いてみる（１）
https://qiita.com/damyarou/items/85c7902cc658d748115e
(参考)Sparse Matrices
http://docs.sympy.org/latest/modules/matrices/sparse.html

```fullscript.py 
from sympy import *
var("A B C")
A=Matrix(([ 1,  5,  0,  0,  0],
          [ 0,  2,  8,  0,  0],
          [ 0,  0,  3,  9,  0],
          [ 0,  0,  0,  4, 10],
          [ 0,  0,  0,  0,  5]))

B =Matrix(([1],[2],[3],[4],[5]))
C=A.inv() * B
print("C=[",float(C[0]),float(C[1]),float(C[2]),float(C[3]),float(C[4]),"]")
# C=[ 106.0 -21.0 5.5 -1.5 1.0 ]
```
backlog記法、どうしてますか？ 

# backlog記法とmarkdown記法の差よ。
そもそもなぜあるのだろう？ どっちが先とか全く知らないので、「それはね」と優しく教えてくれるのを待ってます。

さて、会社で使うバックログですが、非常に好きではありません。理由は
- プレビューがめんどくさい
- 入力画面が小さい
- 完全なmarkdown記法じゃない

と、個人的な見解ですが、同じ気持ちの人は多いと思います。

> markdown記法に変えられますよ

というコメントも見かけましたし、機能としては知っていますが、
すでに バックログ記法に最適化されている社内では、下っ端の意見が通るとは思えない。

## じゃあエディタでやればいい
ということでさがしてみたらあっっっさりありました。

私はVScodeを家でも会社でも用いています。
そこに backlogwiki用の **VScode backlog wiki perview** という拡張機能を作っている神様がいました。

### 機能の概要
.bl .biki .backlog という拡張子の場合のみが対象

なにもインストールしていない状態でも、該当の拡張子で保存すると、この拡張機能を勧められます。すごい、VScode

そしてインストールして ⌘ K V （通常の .md もこれでプレビューできます）を押せばあっという間にバックログ記法で書いたテキストのプレビューの出来上がり。
分割表示すればリアルタイムで文章作成ができますね。

### 最高すぎる。。明日からじゃんじゃか書くね。

プレビューのフォントを変えたければ、⌘, で環境設定を開き、_backlog_ で検索すれば設定内容が書かれていますので、いつもどおり右側のユーザー設定エリアに書き込めば、設定が上書きされます。
わからない場合、「VScode フォントかえたい」とかで検索すればポンポン出てくると思います。

あすもはたらくのだ！がんばりましょう！

## 追記
- 表に対応できていないこと
- よくわからない仕様が紛れ込んでいることなどが使っていて判明しました

# 結論
## backlog記法は今すぐやめるように働きかけます
マイグレーションファイルについて

#マイグレーションファイルはDBの歴史だから触ってはいけないものだと思っていました。

でも、リリースする前なら一つのファイルに一緒に記入してもいいみたい。
その方が見やすいし、ファイルも少なくて済む。
どっちでもいいけど、分ける必要ないなら、一緒にしちゃえばいいやん(同じテーブルなら)。ということらしい。
javascriptのsetTimeoutが即実行されてハマった

sleep処理を実装するため、setTimeoutで再帰っぽく書いてたらハマったのでメモ

# 一見すると問題ないがダメなコード
次のコードは問題ないように見える。
出力もされ、期待通り動いているようだが？

```js
var hoge = function(str) {
  console.log(str)
}

//ダメな書き方
setTimeout(hoge('すぐ実行されてしまう'),4000)
```
しかし、`hoge()`がすぐに実行されている事に気づく

こうすると良く分かる。


```js
var hoge = function(str) {
  console.log(str)
}

setTimeout(hoge('う'),3000)
setTimeout(hoge('い'),2000)
setTimeout(hoge('あ'),1000)
```
「あ　い　う」　という順番で出て欲しいが、
「う　い　あ」　で出てしまう

# ちゃんと動く3つの方法
```js
var hoge = function(str) {
  console.log(str)
}


//良い
setTimeout(hoge,2000,"第三引数に入れてあげる")
setTimeout("hoge('これも可能だが非推奨だから注意')",2000)
setTimeout(function(){console.log('ぐぐると一番良く見る奴')},2000)
```
順番に解説していく

## 1 第三引数を使う
setTimeoutの第三引数を使う事で、中の関数に引数を渡すことが出来る

```js
setTimeout(hoge,2000,"あああ")
```

引数を2つ渡したい場合は第三引数、第四引数 …　とする。
`hoge()` ではなく `hoge`な点に注意。

## 2 文字列として渡す
なんと、こんな方法でも動く。

```js
setTimeout("hoge('あああ')",2000)
```


これが動くのは不思議だが。
https://developer.mozilla.org/ja/docs/Web/API/WindowTimers/setTimeout 
を見ると

>
関数の代わりに文字列を含める代替構文も許容されており、タイマーが満了したときに文字列をコンパイルして実行します。
eval() の使用にリスクがあるのと同じ理由で、この構文は 推奨しません。


setTimeoutはevalみたいに文字列をコードとして解釈するらしい。
非推奨と書いてあるので、あんまりおすすめはしない


## 3 無名関数を使う
ググると一番よく出てくる方法

```js
setTimeout(function(){console.log('あああ')},2000)
```

(無名関数　という名称についてはいろいろありますが一般的にそう呼ばれてるのでその話はここではしません)



## なんで最初のじゃ動かないのか

```js
setTimeout(hoge('すぐ実行されてしまう'),4000)
```

では、hogeがまず評価(実行)され、setTimeoutはその結果をwait後に実行する。
hoge('すぐ実行されてしまう')の結果は`undefined`のため、

```js
setTimeout(undefined,4000)
```

を実行している事になる。
だから何も起こらない。

良く考えれば当たり前だが、とても嵌る箇所だと思う。
文法的には間違っていないので厳格モードでも動くし、
waitがかかってないだけで一見動いてはいるのでぼーっとしていると気づかない。


### 最初みたいな感じで書きたい

```js
//こういう風にもかける
var hoge2 = function(str) {
  return function(){console.log(str)}
}
var hoge3 = str => {
  return () => console.log(str)
}
setTimeout(hoge2('従来のjs'),2000)
setTimeout(hoge3('ES6'),2000)
```
###

## waitを入れつつ、同じ関数を10回実行する

### ダメ
```js
function counter() {
  var count = 0;
  return function re () {
    if (count < 10 ) {
      count++
      console.log(count)
      setTimeout(re(),100)
    }
  }
}
var count = counter();

setTimeout(count(),100)
```

### 良い

```js
function counter() {
  var count = 0;
  return function re () {
    if (count < 10 ) {
      count++
      console.log(count)
      setTimeout(re,100)
    }
  }
}
var count = counter();

setTimeout(count,100)
```

ES6からはPromiseが使えるため、普段なかなか利用しないsetTimeoutであるが
すごくハマった
JimdoでGoogle Tag Managerのコードを挿入

Googleタグマネージャーでは、コンテナを作成したあとのインストールのために、２つのコードをサイトに埋め込む必要がある。1つはヘッダーなので特に問題ないが、2つめのコードはBody要素のなるべく先頭に入れるのが望ましいらしい。
Jimdoでやるのはちょいと困るが、動的に入れても動くらしい。

参考 [JimdoサイトにGoogleタグマネージャーのコードを挿入する - idew.](https://idew.jp/googleanalytics/insert-google-tag-manager-code-on-jimdo-site/)

上記記事はjQueryが使われていたので、jQueryを使わず、なおかつ1つ目のコードのまとめてヘッダーで挿入することにした。
`GTX-XXXXX` を置き換えてお使いください。

```html

<script type="text/javascript">
//<![CDATA[
// Google Tag Manager
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
var google_tag_manager = '<iframe src="https://www.googletagmanager.com/ns.html?id=' + i + '" height="0" width="0" style="display:none;visibility:hidden"><\/iframe>';
    document.addEventListener("DOMContentLoaded", function() {
        var parent = d.body;
        var firstElement = parent.firstChildren;
        var element = d.createElement('noscript');
        element.innerHTML = google_tag_manager;
        parent.insertBefore(element, firstElement);
    });
})(window,document,'script','dataLayer','GTM-XXXXX');
// ]]>
</script>
```

# 参考

* [JimdoサイトにGoogleタグマネージャーのコードを挿入する - idew.](https://idew.jp/googleanalytics/insert-google-tag-manager-code-on-jimdo-site/)
* [Node.insertBefore - Web API インターフェイス | MD](https://developer.mozilla.org/ja/docs/Web/API/Node/insertBefore)
『増補改訂版Java言語で学ぶデザインパターン入門』をKotlinでやってみる（Iterator編）

## 【経緯】
PGを初めて数年。
土方プログラマーとしてやりたいことを実装する能力はそれなりに身についてきた（ような気がする）。
が、しかし土方故に「最低限動く」ものは作れても、それが「理論的に正しいのか」、「クラス設計観点でどうなのか」といった観点で物を作れない問題にぶち当たりました。
そこでクラス設計を勉強するにあたり、[増補改訂版Java言語で学ぶデザインパターン入門](https://www.amazon.co.jp/%E5%A2%97%E8%A3%9C%E6%94%B9%E8%A8%82%E7%89%88Java%E8%A8%80%E8%AA%9E%E3%81%A7%E5%AD%A6%E3%81%B6%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3%E5%85%A5%E9%96%80-%E7%B5%90%E5%9F%8E-%E6%B5%A9/dp/4797327030/ref=pd_lpo_sbs_14_t_0?_encoding=UTF8&psc=1&refRID=HWPPN8FKRXCH0GER8542)を購入して一旦デザインパターンをちゃんと勉強しようという試みを行っています。
が、Java自体も何度か触っているので、書こうと思えばあんまり悩まずにプログラムを書けてしまってあんまり身につかない・・・。
あとJava自体があまり好きではないので続く気がしない・・・どうしたものか。
そういえばAndroidってKotlin使えるよなーそっちの方が興味あるんだよなー・・・。
## 【よし、Kotlinでやろう】
どうせなら興味がありつつも手が出せないでいたKotlinベースで自分で書いてみようと思いたちました。（意味があるかはわからない）
swiftにも似たところがありそうなので、そういう意味でもKotlinに手を出してみます。心が折れたらJavaでやります。

##【というわけで、コード】
まずはIteratorです。
Iteratorは集合体の要素を統一した方法で繰り返し1つ1つ数え上げていくデザインパターン。
for文等でリストなどのコレクションの要素にアクセスする場合や、集合の要素に順番にアクセスする必要がある場合などに有効。
期待動作はしてるので問題無く変換出来ている・・・はず？

```kotlin:Iterator.kt
interface Iterator {
    fun hasNext() : Boolean
    fun next() : Any
}
```
```kotlin:Aggregate.kt
interface Aggregate {
    abstract fun iterator() : Iterator
}
```
```kotlin:Book.kt
class Book(title:String) {
    private var name: String = title

    fun getName(): String {
        return this.name
    }
}
```
```kotlin:BookShelf.kt
class BookShelf() : Aggregate  {
    private var books = ArrayList<Book>();
    fun getBookAt(index:Int): Book {
        return books.get(index)
    }

    fun appendBook(book: Book) {
        this.books.add(book)
    }

    fun getLength(): Int {
        return this.books.size
    }

    override fun iterator() :Iterator {
        return BookShelfIterator(this)
    }
}
```
```kotlin:BookShelfIterator.kt
class BookShelfIterator(bookShelf: BookShelf) : Iterator {
    private var bookShelf:BookShelf = bookShelf
    private var index:Int = 0

    override fun hasNext(): Boolean {
        if (this.index < bookShelf.getLength()) {
            return true
        } else {
            return false
        }
    }

    override fun next(): Any {
        var book:Book = bookShelf.getBookAt(index)
        index++
        return book
    }
}
```
```kotlin:MainActivity.kt
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        var bookShelf:BookShelf = BookShelf()
        bookShelf.appendBook(Book("Around the World is 80 Days."))
        bookShelf.appendBook(Book("Bible"))
        bookShelf.appendBook(Book("Cinderella"))
        bookShelf.appendBook(Book("Daddy-Long-Lengs"))
        bookShelf.appendBook(Book("Little-Red-Riding-Hood"))

        var it:Iterator = bookShelf.iterator()
        while (it.hasNext()) {
            var book:Book = it.next() as Book
            Log.d("BookName", book.getName())
        }
    }
}
```
```:出力結果
Around the World is 80 Days.
Bible
Cinderella
Daddy-Long-Lengs
Little-Red-Riding-Hood
```
Ubuntu上にReact開発環境を構築する(自分用)

自宅PCに開発環境を構築する自分用の手順書です。
※あくまで自分用の手順書です。
OSはUbuntu 18.04 LTSです。

まずGitHub上にある自分の開発リポジトリをクローンするためにGitをインストールします。
その後、GitHubからリポジトリをクローンします。

```
sudo apt install git
cd 適切なディレクトリ
git clone リポジトリURL
```

Node.jsとnpmをインストールします。

```
sudo apt install nodejs
sudo apt install npm
```

プロジェクトのパッケージをインストールします。

```
cd プロジェクトのディレクトリ
npm install
```

起動！！！

```
npm start
```
Django(Python)開発環境構築時メモ

## 目的
Aさんが作ってるレポジトリをgitからcloneしてこっちでマークアップとJSを行う

## 前提
- Python3.6.5
- Django2.0.7
- Cloud9(IDE) 
- 全然理解してないクソ初心者

## ハマった点
1. Syntax Errorが出て `python manage.py runserver` 出来ない
2. serverと通信出来てない
3. 


## 状況
1. [GitHub - Django: runserverするときにSyntax Errorが発生します。(138440)｜teratail](https://teratail.com/questions/138440)
 1-1. Syntax Errorが表示されてるのは `settings.py`ファイル 　　
 

2. `python manage.py runserver`出来た後に `html` は表示されるがpythonで記述した ` {% -- %}` は表記されない


## やり方
### 1. versionを合わせる + version気にしつつ順序通りに足りないものを入れてく

- 最初version合わせてなかった。cloud9のが古かった
それで
自分：python2系
Aさん：python3系
になっててまずそこがおかしかった。

- cloud9の右上のギアマークからPython versionを3に変更
- [Cloud9にPython3.6をインストール](https://imabari.hateblo.jp/entry/2017/10/09/223748)する
  ※『PYTHONPATHに「」を追加』以降の部分は必要なかった
  ※ちゃんと`python -V`と`pip -v`する
- [Pipenvのインストール](http://pipenv-ja.readthedocs.io/ja/translate-ja/install.html)する
  - `$ pip install --user pipenv`
  - それで無理なら注釈のところもする
  - `pip install --user --upgrade pipenv`アップグレードもする
- `pipenv shell`
- [Djangoを入れる](https://qiita.com/OXamarin/items/c593487d86f2181da00b)
  - 入れるというかアップデートが正しい
  - `python -m django --version`でちゃんと確認
- `python3 manage.py migrate`
- 足りてないものググりつつ入れる
- `python3 manage.py runserver`

てか今見たら当たり前のことしかやってねえ..


### 2.IPとPORTはcloud9とAさんのlocal hostで違うのに注意
- `python manage.py runserver $IP:$PORT`
  - [参考](https://community.c9.io/t/setting-up-django/1727)
  - よく考えたらrailsの時と一緒
    - `rails s -b $IP -p $PORT`
JSON Schema で快適に CloudFormation テンプレートを書く

[cloudpack あら便利カレンダー 2018](https://benri2018.rnd.cloudpack.jp/)の記事です。

# tl;dr

CloudFormation テンプレート用の JSON Schema を作ったので、これを使って CFn テンプレートを書いてみてほしいです。


[y13i/cfn-schema: JSON Schema for AWS CloudFormation templates.](https://github.com/y13i/cfn-schema)

# CloudFormation って

テンプレートを書いてる時間の大半が[リファレンス](http://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/aws-template-resource-type-ref.html)読みだと感じていて、

- アレを作るにはどのリソースタイプを使ったらいいのか
- アレを設定するにはどのプロパティを使ったらいいのか

というのを調べる時間がほとんどだと思うんですね。

で、いざ書いたので実行してみようとするとどこか間違ってて蹴られたり。もうちょっとエディタで書いてる段階で補助がほしい。

# JSON Schema って

[Understanding JSON Schema — Understanding JSON Schema 1.0 documentation](https://spacetelescope.github.io/understanding-json-schema/)

が一番わかりやすいと思います。要は JSON で表現できるデータに対する、 JSON で表現された型定義です。

型定義があることで、あるデータがその型にちゃんと合っているかを検証すること（Validation）ができます。

複雑な条件に対する記法もかなり充実しているので、 CloudFormation テンプレートのような特定形式のオブジェクトを使った関数表現なども定義することが可能です。

# なぜ作った

同様の試みは何件か既存のものを見つけたのですが、 `Fn::` 関数への対応がイマイチだったり、メンテされてなかったり、一度 clone して手元でビルドしないといけなくて面倒だったりするので自作しました。

# 使い方

[Visual Studio Code](https://code.visualstudio.com/) で使うのが一番簡単だと思います。

GitHub Pages に JSON Schema を置いてあるので、 **Ctrl/⌘ + ,** でプロジェクトの設定を開き、

```json:.vscode/settings.json
{
  "json.schemas": [
    {
      "fileMatch": ["*.cfn.json"],
      "url": "https://y13i.github.io/cfn-schema/us-west-2.min.json"
    }
  ]
}
```

という感じで JSON Schema を使う設定をしてあげればおわりです。

この場合は `.cfn.json` で終わる名前のファイルに対して `https://y13i.github.io/cfn-schema/us-west-2.min.json` を適用するという設定になります。 `us-west-2` の部分はお使いの AWS リージョンに合わせて設定してください。

あとは `foobar.cfn.json` などのファイルでテンプレートを書き始めることができます。プロパティ名の補完や、プロパティにマウスオーバーしたときのツールチップ表示、正しくない指定に対するエラーなどが確認できると思います。

YAML で使う場合は [VSCode 本体でのサポートはまだない（as of 2018-07）](https://github.com/Microsoft/vscode/issues/1176)ので、 [Redhat が作っている拡張](https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml)を使いましょう。オプションの指定方法が JSON の場合とちょっと違うので注意。

# どうやって作った？

`Fn::` 関数などを含む[ベースの JSON Schema](https://github.com/y13i/cfn-schema/blob/master/src/base.json) は、手動でがんばって書きました。

各リソースの定義は流石に数が多すぎて人類には無理です。しかし、 AWS が[独自フォーマットの定義](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/cfn-resource-specification.html)を公開しています。これを[拾ってきてパースしてベーススキーマに足すスクリプト](https://github.com/y13i/cfn-schema/blob/master/src/build.js)を JavaScript で書きました。
MovableTypeでカテゴリーでもインデックスでも記事でも最終更新日時を取得する

テンプレートタグ利用。
ありそうだけど検索しても全然出てこなかった。。

## 環境
Movable Type 7 r4208

## 構文

```html
<mt:If name="entry_archive">
    <$mt:EntryModifiedDate format="%x %X"$>
<mt:ElseIf name="page_archive">
    <$mt:PageModifiedDate format="%x %X"$>
<mt:ElseIf name="content_archive">
    <$mt:ContentModifiedDate format="%x %X"$>
<mt:ElseIf name="main_index">
    <mt:Entries>
        <mt:EntryModifiedDate format="%Y%m%d%H%M%S" setvar="entry_date">
        <mt:If name="last_modified" lt="$entry_date">
            <mt:SetVar name="last_modified" value="$entry_date">
        </mt:If>
    </mt:Entries>
    
    <mt:Entries>
        <mt:EntryModifiedDate format="%Y%m%d%H%M%S" setvar="entry_date">
        <mt:If name="last_modified" eq="$entry_date">
            <$mt:EntryModifiedDate format="%x %X"$>
        </mt:If>
    </mt:Entries>
<mt:ElseIf name="category_archive">
    <mt:Entries>
        <mt:EntryModifiedDate format="%Y%m%d%H%M%S" setvar="entry_date">
        <mt:If name="last_modified" lt="$entry_date">
            <mt:SetVar name="last_modified" value="$entry_date">
        </mt:If>
    </mt:Entries>
    
    <mt:Entries>
        <mt:EntryModifiedDate format="%Y%m%d%H%M%S" setvar="entry_date">
        <mt:If name="last_modified" eq="$entry_date">
            <$mt:EntryModifiedDate format="%x %X"$>
        </mt:If>
    </mt:Entries>
</mt:If>
```

## 出力例

```
2018年7月30日 21:00
```
Black Friday sales 2018


Hi, I am Jelina. I am a seasoned writer specialized in Business copy writing.I'm a US writer and Pro-Editor, currently working exclusively on Fiverr. I hold an M.A. in English Literature and other <a href="http://bestblackfridaysales2018.com/">black friday deals</a> and have worked extensively within the editing/writing industry for over 10 years. l am also a blockchain ICO whitepaper writer and website designer. 

 I create professional Amazon product descriptions and listing sales copies, About us pages, and all related website content. With me, you always get 100% original, catchy, plagiarism free content complete with relevant keywords for SEO, + HTML, all delivered on a platter <a href="http://bestblackfridaysales2018.com/amazon-black-friday-sales-2018/">amazon black friday ads</a> excellent communication and great after sales rapport. I have lots of experience in article proofreading and editing and can rid your work of punctuation, syntax, grammatical, and spelling errors.
Swiftにおけるインスタンスの文字列表現について ~CustomStringConvertible~

アプリ開発中のデバッグ方法としてprintデバッグはお手軽でついつい使ってしまいます。
print(_:)関数はAny型の引数をとるので、数字や文字列だけでなく構造体やクラスのインスタンスもそのまま渡すことができるので非常に便利です。

```swift
print(1)
print("hello")
print(SomeStruct())
print(SomeClass())
```

UIKitやSwift標準ライブラリで提供されているクラスのインスタンスをprintデバッグすると、インスタンスのプロパティの値などをいい感じに出力してくれますが、このとき出力される文字列はどのように決まるのでしょうか。

```swift
print(Date())  // 2018-07-30 10:44:35 +0000
print(NSError(domain: "Some domain", code: 1, userInfo: nil))  // Error Domain=Some domain Code=1 "(null)"
```

実はprint(_:)関数は、引数に与えられたオブジェクトの文字列表現(textual representation)を出力しています。
本記事では、オブジェクトの文字列表現に関係するCustomStringConvertibleプロトコルやStringのイニシャライザについて説明します。



## CustomStringConvertible
クラスや構造体をCustomStringConvertibleプロトコルに準拠させることで、インスタンスの文字列表現を自由にカスタマイズすることができます。
CustomStringConvertibleプロトコルに準拠させるには、`description`プロパティを実装します。

```swift
class SomeClass: CustomStringConvertible {
    var description: String { return "This is SomeClass" }
}
```

print(_:)関数は、インスタンスがCustomStringConvertibleプロトコルに準拠している場合にこの`description`プロパティを使用します。

```swift
let some = SomeClass()
print(some)  // This is SomeClass
```

## String.init(describing:)イニシャライザ
ある型のインスタンスの文字列表現を得るには`String.init(describing:)`を使用します。
得られる文字列が実際何になるかは、以下のように決まります。

- インスタンスがTextOutputStreamableプロトコルに準拠していれば、instance.write(to: s)の結果を得る(sは空文字列)
- インスタンスがCustomStringConvertibleプロトコルに準拠していれば、instance.descriptionの結果を得る
- インスタンスがCustomDebugStringConvertibleプロトコルに準拠していれば、instance.debugDescriptionの結果を得る
- 上記のいずれにも当てはまらない場合、文字列表現はSwift標準ライブラリによって提供される

プロトコルに準拠していないクラス、CustomStringConvertibleに準拠したクラス、CustomDebugStringConvertibleに準拠したクラス、CustomStringConvertibleとCustomDebugStringConvertibleの両方に準拠したクラスを比較してみます。

```swift
class SomeClass1 {}

class SomeClass2: CustomStringConvertible {
    var description: String { return "This is SomeClass2" }
}

class SomeClass3: CustomDebugStringConvertible {
    var debugDescription: String { return "debug: This is SomeClass3" }
}

class SomeClass4: CustomStringConvertible, CustomDebugStringConvertible {
    var description: String { return "This is SomeClass4" }
    var debugDescription: String { return "debug: This is SomeClass4" }
}
```

```swift
let some1 = String(describing: SomeClass1())  // App.SomeClass1
let some2 = String(describing: SomeClass2())  // This is SomeClass2
let some3 = String(describing: SomeClass3())  // debug: This is SomeClass3
let some4 = String(describing: SomeClass4())  // This is SomeClass4
```

SomeClass1の文字列表現は、Swift標準ライブラリによって`アプリ名.クラス名`という形で出力されています。
SomeClass2の文字列表現は、`description`プロパティで提供される文字列です。
SomeClass3の文字列表現は、`debugDescription`プロパティで提供される文字列です。
SomeClass4の文字列表現は、`description`プロパティで提供される文字列です。

## まとめ
オブジェクトの文字列表現に関係するCustomStringConvertibleプロトコルとString.init(describing:)イニシャライザについて説明しました。
print(_:)関数はオブジェクトの`description`プロパティを出力していたんですね。

Swift標準ライブラリのリファレンスを追っていくと、多くのクラスや構造体がCustomStringConvertibleプロトコルに準拠していることがわかります。
リファレンスを読むときに気にしてみて下さい。

## リファレンス
CustomStringConvertible
https://developer.apple.com/documentation/swift/customstringconvertible

String.init(describing:)
https://developer.apple.com/documentation/swift/string/2427941-init
アジャイルとスクラムの違い

-スクラム開発は、アジャイル開発の手法の一つ
--ちなみに、アジャイル開発の手法として、エクストリーム・プログラミング (XP) 、ユーザ機能駆動開発、Microsoft Solutions Framework (MSF)等がある
-スクラムの歴史は、1986年に野中郁次郎さんと竹内弘高さんが「新製品開発のプロセス」を発表したのが、契機。
-一方、アジャイル開発の歴史は1990年代半ば頃から、ウォーターフォール開発を代表とした「重量ソフトウェア開発」に反発して、「軽量ソフトウェア開発手法」として、提起されていた。（スクラム開発を含む。だよね？）2001年に「軽量ソフトウェア開発手法」の著名人17人（以下掲載）が、「アジャイルソフトウェア開発宣言」として、まとめたものが最初と言われている。
--Kent Beck
--Mike Beedle
--Arie van Bennekum
--Alistair Cockburn
--Ward Cunningham
--Martin Fowler
--James Grenning
--Jim Highsmith
--Andrew Hunt
--Ron Jeffries
--Jon Kern
--Brian Marick
--Robert C. Martin
--Steve Mellor
--Ken Schwaber
--Jeff Sutherland
--Dave Thomas 
-言い方を変えて繰り返すが、スクラム開発は、アジャイル開発のフレームワークの一つである。

-参照
--https://code.i-harness.com/ja/q/af022e
Schur complement のwikipediaの和訳がなかったのでメモ

https://en.wikipedia.org/wiki/Schur_complement の和訳がないので，読んで分かったことをまとめる．

ある行列$M$があって，以下のようにブロックで書けるときに，$M$の**逆行列を求める**ときの話である．
$$
M =
\begin{bmatrix}
A & B\\\
C & D
\end{bmatrix}
$$
ただし，各行列の大きさは
$$
\begin{align}
M &\in R^{(p+q) \times (p+q)}\\\
A &\in R^{p \times p}\\\
B &\in R^{p \times q}\\\
C &\in R^{q \times p}\\\
D &\in R^{q \times q}\\\
\end{align}
$$

である．

## はじめに
$p=1$かつ$q=1$のときは，よくある話で
$$
M =
\frac{1}{AD - BC}
\begin{bmatrix}
D & -B\\\
-C & A
\end{bmatrix}
$$
だが，それ以外の大きさの場合はどうやって求めるか，という問題の解がSchur Complementである．

## Dが可逆の場合
行列$M$の$D$のschur complementは
$$
M/D := A - BD^{-1}C
$$
である．

ここで行列$M$は
$$
M =
\begin{bmatrix}
A & B\\\
C & D
\end{bmatrix} =
\begin{bmatrix}
I_p & B D^{-1}\\\
0 & I_q
\end{bmatrix}
\begin{bmatrix}
A - BD^{-1}C & 0\\\
0 & D
\end{bmatrix}
\begin{bmatrix}
I_p & 0\\\
D^{-1}C & I_q
\end{bmatrix}
$$
と変換できる．
それぞれtrianglur matrixまたは対角行列なので，逆行列が簡単に求まることに注意して，

$$
\begin{align}
M^{-1} &= 
\begin{bmatrix}
I_p & 0\\\
D^{-1}C & I_q
\end{bmatrix}^{-1}
\begin{bmatrix}
A - BD^{-1}C & 0\\\
0 & D
\end{bmatrix}^{-1}
\begin{bmatrix}
I_p & B D^{-1}\\\
0 & I_q
\end{bmatrix}^{-1}\\\
&=
\begin{bmatrix}
I_p & 0\\\
-D^{-1}C & I_q
\end{bmatrix}
\begin{bmatrix}
(A - BD^{-1}C)^{-1} & 0\\\
0 & D^{-1}
\end{bmatrix}
\begin{bmatrix}
I_p & -B D^{-1}\\\
0 & I_q
\end{bmatrix}\\\
&=
\begin{bmatrix}
(A - BD^{-1}C)^{-1} & -(A - BD^{-1}C)^{-1} B D^{-1}\\\
-D^{-1}C (A - BD^{-1}C)^{-1} & D^{-1}C (A - BD^{-1}C)^{-1} B D^{-1} + D^{-1}
\end{bmatrix}
\end{align}\\\
$$
と求まる．

## Aが可逆の場合
行列$M$の$A$のschur complementは
$$
M/A := D - CA^{-1}B
$$
である．

ここで行列$M$は
$$
M =
\begin{bmatrix}
A & B\\\
C & D
\end{bmatrix} =
\begin{bmatrix}
I_p & 0\\\
C A^{-1} & I_q
\end{bmatrix}
\begin{bmatrix}
A & 0\\\
0 & D - CA^{-1}B
\end{bmatrix}
\begin{bmatrix}
I_p & A^{-1}B\\\
0 & I_q
\end{bmatrix}
$$
と変換できる．
それぞれtrianglur matrixまたは対角行列なので，逆行列が簡単に求まることに注意して，

$$
\begin{align}
M^{-1} &=
\begin{bmatrix}
I_p & A^{-1}B\\\
0 & I_q
\end{bmatrix}^{-1}
\begin{bmatrix}
A & 0\\\
0 & D - CA^{-1}B
\end{bmatrix}^{-1}
\begin{bmatrix}
I_p & 0\\\
C A^{-1} & I_q
\end{bmatrix}^{-1}
\\\
&=
\begin{bmatrix}
I_p & -A^{-1}B\\\
0 & I_q
\end{bmatrix}
\begin{bmatrix}
A^{-1} & 0\\\
0 & (D - CA^{-1}B)^{-1}
\end{bmatrix}
\begin{bmatrix}
I_p & 0\\\
- C A^{-1} & I_q
\end{bmatrix}
\\\
&=
\begin{bmatrix}
A^{-1} + A^{-1}B (D - CA^{-1}B)^{-1} C A^{-1} & -A^{-1}B (D - CA^{-1}B)^{-1}\\\
- (D - CA^{-1}B)^{-1} C A^{-1} & (D - CA^{-1}B)^{-1}
\end{bmatrix}
\\\
\end{align}
$$
と求まる．
超簡単！Photonでボイスチャット！

#この記事について
Photon * Unityでボイスチャットを実装しました。
参考にしたところが3Dモデル使ったり、動きの同期も取ったりして凝っていたのでこの記事ではボイスの同期だけの手順を簡単にまとめました


#準備するもの
・Unity 2018.1
・[Photon Voice](https://assetstore.unity.com/packages/tools/audio/photon-voice-45848)
・Photon ランタイムアプリケーションID
・Photon　VoiceアプリケーションID

# Unityの準備
## Photon VoiceのImport
[Photon Voice](https://assetstore.unity.com/packages/tools/audio/photon-voice-45848)をImpotします。

ImportしたらWindow->Photon Unity Networking->Highlight Server Settingsをクリック
設定を以下の通りにします

`Hosting    : Photon Cloud
Region     : Jp
AppId      : ランタイムアプリケーションID
VoiceAppId : VoiceアプリケーションID
Auto-Join Lobby: On`

![スクリーンショット 2018-07-30 19.18.13.png](https://qiita-image-store.s3.amazonaws.com/0/255761/9eead103-6bf9-90de-16ce-9c75e5a26e63.png)

## Prefabの作成
Photonで同期させるPrefabを作ります

ProjectにResourcesフォルダを作成して、適当にGameObjectをPrefabにします。
Cubeでも空のGameObjectでもなんでもいいです。
僕は同期が取れたのを確認しやすいためにCubeで行います。
名前もCubeで作成します。
PrefabにしたGameObjectに以下のComponentを付けます

- Photon Voice Recorder
- Photon View

Photon Voice Recorderをつけると自動的に複数のComponentが付きます

## Photonの同期
Photonの同期のScriptを作成します。

```C#:VoiceDemo
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class VoiceDemo : MonoBehaviour {

	private string cubeName = "cube";

	void Start () {
		PhotonNetwork.ConnectUsingSettings("0.1");
	}
	
	void OnJoinedLobby() {
		RoomOptions options = new RoomOptions() {
			isVisible = false,
			maxPlayers = 4
		};
		PhotonNetwork.JoinOrCreateRoom("room",options,TypedLobby.Default);
	}

	void OnJoinedRoom() {
		PhotonNetwork.Instantiate(
			cubeName,
			Vector3.zero,
			Quaternion.identity,
			0
		);
	}

}
```

あとはこれを空のGameObjectに付けて、終わりです。

Editorとビルドしたアプリで実行したり、Androidなどの端末にビルドしてテストしてみてください。

# まとめ
今回やったことの簡単なまとめ
・ランタイムアプリケーションIDとVoiceアプリケーションIDの設定
・Instantiate用のGameObject作成
・Instantiate用のGameObjectにPhoton Voice ViewとPhoton Viewをつける
・Photonのロビーとルームに入るスクリプトを書く

意外と簡単にボイスチャットは出来ました。
**Photonすごい。**


# 参考記事
[Photon RealtimeとPhoton Voice でマルチ通信](https://qiita.com/pchan52/items/19d2899c167ce6da0710)
[PUN Voiceデモ](https://doc.photonengine.com/ja-jp/voice/current/tutorials/pun-voice-demo)
【uGUI】ToggleのON/OFF時にToggleの色を変える

#概要
uGUIのToggleでON/OFF切替時に色を変えたいなと思ってやってみたら少し手こずったので忘備録も兼ねて記事にしておきます。

#NormalColorを変えるだけじゃ駄目

単純にONとOFFを切り替えたタイミングでnormalColorを変えるだけかと思っていたので、こういうスクリプトを用意します。

```c#:ToggleValueChangeColor
    using UnityEngine;
    using UnityEngine.UI;

    [RequireComponent(typeof(Toggle))]
    public class ToggleValueChangeColor : MonoBehaviour
    {
        [SerializeField]
        private Color onColor;

        [SerializeField]
        private Color offColor;

        private Toggle toggle;
       
        void Start()
        {
            toggle = GetComponent<Toggle>();
            toggle.onValueChanged.AddListener(OnToggleValueChanged);
        }


        private void OnToggleValueChanged(bool isOn)
        {
            if(isOn)
            {
                //colorsはColorBlocksという構造体のため、値型であるnormalColorを直接変えることはできないので一旦別変数に確認
                var newColors = toggle.colors;
                newColors.normalColor = new Color( onColor.r, onColor.g, onColor.b, onColor.a);
                toggle.colors = newColors;

            }
            else
            {
                var newColors = toggle.colors;
                newColors.normalColor = new Color(offColor.r, offColor.g, offColor.b, offColor.a);
                toggle.colors = newColors;
            }
        }
    }
```



>参考
値型と参照型とミュータブルとイミュータブルと
https://qiita.com/chocolamint/items/020143cf249505bf2ffc

>ButtonのTransitionをColor TintにしたときのColorBlockをスクリプトで設定する
http://d.hatena.ne.jp/acey014/20160111/1452527329


こうしたら期待通りになるかと思ったら違いました…。

#Highlighted Colorも変えないと駄目

ボタンを押した時に変わる色はHighlighted Colorの方で、他の部分を押すとNormalColorに戻るそうです。

>参考

>uGUIのButtonでの色とかのメモ
https://qiita.com/kanpe777/items/7db0d720059effd94f77


なので最終的にこうなりました。

```c#:ToggleValueChangeColor
    using UnityEngine;
    using UnityEngine.UI;

    [RequireComponent(typeof(Toggle))]
    public class ToggleValueChangeColor : MonoBehaviour
    {
        [SerializeField]
        private Color onColor;

        [SerializeField]
        private Color offColor;

        private Toggle toggle;
       
        void Start()
        {
            toggle = GetComponent<Toggle>();
            toggle.onValueChanged.AddListener(OnToggleValueChanged);
        }


        private void OnToggleValueChanged(bool isOn)
        {
            if(isOn)
            {
                //colorsは構造体のため、値型であるnormalColorを直接変えることはできないので一旦別変数に確認
                var newColors = toggle.colors;
                newColors.normalColor = new Color( onColor.r, onColor.g, onColor.b, onColor.a);
                newColors.highlightedColor = new Color(onColor.r, onColor.g, onColor.b, onColor.a);
                toggle.colors = newColors;

            }
            else
            {
                var newColors = toggle.colors;
                newColors.normalColor = new Color(offColor.r, offColor.g, offColor.b, offColor.a);
                newColors.highlightedColor = new Color(offColor.r, offColor.g, offColor.b, offColor.a);
                toggle.colors = newColors;
            }
        }
    }
```

#終わりに
ColorBlock構造体の仕様を知らなかったので躓いてしまいましたが、なんとか解決してほっとしました。
今後も使う機会があると思うので、きちんと理解しておきたいですね。
Vimで自動保存したい！！！

Vimでいちいち`:w`するのがめんどくさく、Webではよく、あれ、保存したっけ？？となってしまうので自動保存したいなぁと思いました。

https://github.com/vim-scripts/vim-auto-save を導入すると、自動保存できます。

#　インストール

NeoBundleの場合

```vimscript:.vimrc
NeoBundle 'vim-scripts/vim-auto-save'
```

`:NeoBundleInstall`

# 設定

```vimscript:.vimrc
let g:auto_save = 1
let g:auto_save_in_insert_mode = 0
```

`let g:auto_save = 1`はデフォルトで有効にする。
`let g:auto_save_in_insert_mode = 0`は、インサートモードの自動保存を無効にする。**有効にすると、スペースするたびにカーソルが一番左になってうまくできませんでした。**
機械学習知識ゼロの囲碁キチが3か月で囲碁AIを作った話　～番外編～

## **前回まで**
[機械学習知識ゼロの囲碁キチが3か月で囲碁AIを作った話 ～概要編～](https://qiita.com/intenseG/items/2fe5f867b0afe439fc6b)

[機械学習知識ゼロの囲碁キチが3か月で囲碁AIを作った話 ～導入編～](https://qiita.com/intenseG/items/34b452cbab04817cdaef)

[機械学習知識ゼロの囲碁キチが3か月で囲碁AIを作った話 ～棋譜学習編～](https://qiita.com/intenseG/items/73cd082443aed2eb7b5d)

## **概要**
9路盤以外(13、19路盤)の棋譜学習方法と、無料で使えるGPU環境 [Google Colaboratory](https://colab.research.google.com/)を利用した棋譜学習の方法を解説していきます。

## **9路盤以外の棋譜学習方法**
9路盤以外の棋譜を学習させたいときは、[棋譜学習編](https://qiita.com/intenseG/items/73cd082443aed2eb7b5d)でダウンロードした[Pyaq](https://github.com/intenseG/Pyaq/tree/japanese)のフォルダ直下にある```board.py```の中身を1行書き換えるだけでOKです。

Visual Studio Code等のテキストエディタでboard.pyを開いたら、13路盤の棋譜を学習させる場合、8行目のBSIZEを```BSIZE = 13```に書き換えます。

```board.py
BSIZE = 13  # board size
```

書き換えたら、AnacondaPromptで```python pyaq.py --learn```を実行すれば13路盤の棋譜学習が始まります！

## **無料で使えるGPU環境 Google Colaboratoryを利用した棋譜学習**
**GPU使って高速学習したいけど自分のパソコンスペック低いし...**

そんな悩みを解決するのがGoogleが無料提供しているGPU環境 [Google Colaboratory](https://colab.research.google.com/)。

環境構築不要でブラウザ(Google Chromeのみ)からPythonやTensorflowを使うことができる素晴らしいサービスです。

それでは、Google Colaboratoryを使って高速学習をしていきましょう！

学習の手順は以下の通りです。

**1.** パソコンの[Google Chrome](https://www.google.com/intl/ja_ALL/chrome/)から[囲碁AI製造機](https://colab.research.google.com/drive/1ctDQe53oL7WN4n9BMnLiLHmpWRJjAI57)にアクセス

**2.** ファイル -> ドライブにコピーを保存でファイルを複製

**3.** ランタイムのタイプにGPUを割り当てる

**4.** 学習用棋譜のダウンロード

**5.** 実行ボタンを上から順番に押していって学習スタート

**6.** 学習が終わったら```model.ckpt```と```log.txt```をダウンロード

詳細な使い方や注意点は、[囲碁AI製造機](https://colab.research.google.com/drive/1ctDQe53oL7WN4n9BMnLiLHmpWRJjAI57)に書いておいたので、そちらをご参照ください。

**囲碁AI完成したから誰かと戦わせてみたい！**という方がいましたら、僕の[Twitter](https://twitter.com/oubeika11)まで~~果たし状~~リプを飛ばしてください！

暇なときにBSKBot(バーサーカーボット)が何路盤でもお相手します。

## **参考リンク**
- [Google Colaboratory](https://colab.research.google.com/)
- [Pyaq](https://github.com/intenseG/Pyaq/tree/japanese)
- [囲碁AI製造機](https://colab.research.google.com/drive/1ctDQe53oL7WN4n9BMnLiLHmpWRJjAI57)
CSS Painting APIをとりあえず試してみた

## CSS Paint API
CSS Paint API（CSS Painting API）とはWEBブラウザがCSSで行っている描画処理の一部をJavaScriptで記述することができるものです。
詳細がよくわからないですが、canvas要素で頑張っていたことをもう少しスマートにかけるようになる？

## とりあえず試す
Workerの一種のPaintWorkletが必要となる。


```worklet.js

class CirclePainter {
	static get inputProperties() {
		return ['--circle-color'];
	}
 
	paint(context, size, properties) {
		const color = properties.get('--circle-color').toString();
		context.fillStyle = color;
 
		const centerX = size.width / 2;
		const centerY = size.height / 2;
  
		context.arc(centerX, centerY, 50, 0, Math.PI * 2);
		context.fill();
	}
}
registerPaint('circle', CirclePainter);
```

` registerPaint('circle', CirclePainter); `
最後の箇所のregisterPaintで任意の名前('circle')で呼び出せるように登録しています。


```sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>CSS Paint API</title>
	<style>
		.target {
			width: 500px;
			height: 500px;
			--circle-color: blue; /* JSへの受け渡し変数 */
			background-image: paint(circle); /* ここで呼び出し */
		}
	</style>
</head>
<body>
	<div class="target"></div>
	<script>
		// workletを登録する
		CSS.paintWorklet.addModule('worklet.js');
 	</script>
</body>
</html>
```
CSSから利用できるように、CSS.paintWorklet.addModuleでwokletを登録しています。

` background-image: paint(circle); `
そうすることにより、CSS内のbackground-imageで利用できます。

まだ、利用シーン等イメージはついていませんが、描画周りも日々進化していますね。
今後なにかに利用出来るかもということでメモがわりとして残します。

##参考
https://developers.google.com/web/updates/2018/01/paintapi
【Vue.js】爆速でリッチなマークダウンエディタをつくれるmavonEditorを使おう

## はじめに
Vue.jsでマークダウンエディタをつくる際に、mavonEditorという便利なコンポーネントがあったので紹介します。

以下のようなリッチなマークダウンエディタを簡単につくることが出来ます。
デフォルトの設定でサービスでも使えそうです。

![en-image.gif](https://qiita-image-store.s3.amazonaws.com/0/192435/8556c1a1-198d-a6e0-ad14-ea9ea38ea651.gif)

## 使い方

mavonEditorをインストールします。

```
$ npm install mavon-editor --save
``` 

vue側でimportするだけでマークダウンエディタが出来てしまいます。
簡単すぎて驚きじゃないですか？！

```Editor.vue
<template>
  <div id="main">
    <mavon-editor v-model="value" language="en" />
  </div>
</template>

<script>
  import Vue from 'vue'
  import mavonEditor from 'mavon-editor'
  import 'mavon-editor/dist/css/index.css'

  Vue.use(mavonEditor)
    new Vue({
        'el': '#main',
        data() {
            return { value: '' }
        }
    })

</script>

```

開発者が中国の方のようでデフォルトの設定が中国語となっているので**language="en"**のアトリビュートを設定しましょう。すると英語表記になって使い勝手が良くなります。

## ツールバーのカスタマイズ

デフォルトだと全てのツールバーメニューが表示される設定になっています。
個人的には多すぎだと感じ、いくつか不要なものを非表示にしました。ツールバーの表示設定は以下のように行います。

```Editor.vue
<template>
  <div id="main">
    <mavon-editor v-model="value" language="en" :toolbars="toolbars" />
  </div>
</template>

<script>
  import Vue from 'vue'
  import mavonEditor from 'mavon-editor'
  import 'mavon-editor/dist/css/index.css'

  Vue.use(mavonEditor)
    new Vue({
        'el': '#main',
        data() {
           return { 
             value: '',
             toolbars: {
             bold: true,
             italic: true,
             header: true,
             underline: true,
             strikethrough: true,
             mark: true,
             superscript: true,
             subscript: true,
             quote: true,
             ol: true,
             ul: true,
             link: true,
             imagelink: true,
             code: true,
             table: true,
             help: true,
             alignleft: true,
             aligncenter: true,
             alignright: true,
             subfield: true,
             preview: true,
             // false
             undo: false,
             redo: false,
             fullscreen: false,
             readmodel: false,
             htmlcode: false,
             trash: false,
             save: false,
             navigation: false,
             }
           }
        }
    })

</script>

```

これだけオプションがあれば大抵の要件は満たせそうですね！

##　まとめ
以上、マークダウンエディタを作るのに便利なコンポーネントの紹介でした。
最近Vue.jsを使い始めたのですがとっつきやすくて楽しいです。
コンポーネントも充実しているのでどんどん触りたいですね！

[公式のReadme](https://github.com/hinesboy/mavonEditor/blob/master/README-EN.md)
Python ファイル読み込み

ファイルを読み込むときに結構忘れてしまうことが多いため個人用のメモとして作る。
#Pythonでファイルを読み込む
ファイルtext.txtがあったとする。

```text:text.txt
first line
second line
```
同じディレクトリにtext.pyを作り、以下のコードを実行する。

```python:text.py
all = open('text.txt')
data = all.read()
all.close()

print(data)
```
結果：
`first line
second line`
のようにtext.txtの中の文章がそのまま吐き出される。

`all.read()`はallの文字をすべて読み込んでdataに入れている。では1行ずつ読み込みたいときはどうするべきか。

1行ずつ読み込みたい場合はreadline()を用いる。

```python:text2.py
all = open('text.txt')
data = all.readline()
all.close()

print(data)
```
結果：
`first line`
のみ出力される。この後の行を読み込む際は再び
`all.readline()`
を実行すれバ良い。
ICPでGrafanaのデータソースからPrometheusが消えた場合の一時的な対応

IBM Cloud Private v2.1.0.3で、GrafanaのデータソースからPrometheusが消えるという事象が発生したので、対応方法のメモ。

## 原因と対策

データソースの登録はJobとして1回だけ実行されており、そもそもインストール時にGrafanaがPersistent Volumeを使用するように設定していなかったので、ICPを再起動してコンテナが再起動されると消えてしまう模様。ダッシュボードは消えていなかったが、こちらはConfigMapに保管されていた。

一時的にはデータソースを手動で追加すればよい。ここでは一時的な対応を記載する。

恒久対応としてはPVに保管するように変更する。そちらは以下のリンクを参照。

[IBM Cloud PrivateでモニタリングデータをPVに保管する](https://qiita.com/sotoiwa/items/6e66494add8e65e10a08)

## データソースの手動再作成

メニューからData Sources画面に行き、「+Add data source」をクリックする。

以下の通り設定する。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/86449/058ffa76-bbf8-b58d-bd1b-2b500e8411d5.png)

|項目|値|
|---|---|
|Name|prometheus|
|Default|true|
|Type|Prometheus|
|URL|https://monitoring-prometheus:9090|
|Basic Auth|false|
|With Credentials|false|
|TLS Client Auth|true|
|With CA Cert|true|
|Skip TLS Verification (Insecure)|false|

証明書はSecretに入っているので、CLIから取得してコピペする。
jsonpathでの指定の際に`.`をエスケープする必要があることに注意。

CA証明書

```
kubectl get secret -n kube-system monitoring-monitoring-ca-cert -o "jsonpath={.data['tls\.crt']}" | base64 -d
```

クライアント証明書

```
kubectl get secret -n kube-system monitoring-monitoring-client-certs -o "jsonpath={.data['tls\.crt']}" | base64 -d
```

クライアント鍵

```
kubectl get secret -n kube-system monitoring-monitoring-client-certs -o "jsonpath={.data['tls\.key']}" | base64 -d
```

## Jobの再実行

データソースの定義はJobとして実行されているので、Jobを再実行することでも登録可能であり、Knowledge Centerにはその方法の記載があった。以下リンク先の「Grafana での Prometheus データ・ソースの手動構成」を参照。

[IBM® Cloud Private モニター・サービス](https://www.ibm.com/support/knowledgecenter/ja/SSBS6K_2.1.0.3/featured_applications/deploy_monitoring.html)

## 参考リンク

[JSONpath fails to return keys containing dots in a map](https://github.com/kubernetes/kubernetes/issues/23386)

[How to enable high availability for the IBM Cloud Private cluster monitoring service after initial installation](https://medium.com/ibm-cloud/how-to-enable-high-availability-for-monitoring-service-of-ibm-cloud-private-cluster-after-initial-4e9b8102b50)

[モニタリング・サービスの構成](https://www.ibm.com/support/knowledgecenter/ja/SSBS6K_2.1.0.3/installing/monitoring.html)
Windows 10 > tips > PDFのファイルパスを取得する方法 3つ

```txt:動作環境
Windows 10 Pro (64bit) バージョン 1803 (April 2018 Update)
Google Chrome バージョン: 67.0.3396.99（Official Build） （64 ビット）
```

エクスプローラーで検索したPDFファイルのパスを取得する方法。
いくつかありそう。

Chromeを使った方法がフォルダとパスを同時に取得できるという点で早いかもしれない。

### A. ファイルの場所を開く

1. エクスプローラーで右クリックして「ファイルの場所を開く」選択
2. 開いたところで、エクスプローラーのアドレスバーからフォルダを取得
3. エクスプローラーのファイル一覧からファイル名を取得

### B. Chromeから取得

1. ChromeにPDFファイルをドロップ
2. Chromeのアドレスバーからパスを取得

### C. ファイルプロパティ

1. ファイルを選択し、右クリックし、「プロパティ」選択
2. 全般タブの「場所：」からフォルダを取得
3. 全般タブのファイル名（一番上のテキストボックス）からファイル名を取得
Google AIY Voice Kitと学習リモコン（ADRSIR）を無理やり合体

スマートスピーカーで家電制御するには、対応家電を購入する必要があります。
そこまでしなくても、手作りGoogle Homeと学習リモコン基板で、疑似スマートホームを体験できます。
※お決まりの文句で恐縮ですが、改造は自己責任でお願いします。

#1. Google AIY Voice Kitを作る
普通に作って大丈夫ですが、学習リモコンをつなぐ作業があるので、箱詰めはしないでください。
マイク、スピーカー、LED、スイッチが正しく動作することを確認してください。
こちらのサイトなど、ご参考に。
https://qiita.com/Brutus/items/15307ff2286a10d6a706
#2. 学習リモコンをつなぐ
ラズベリー・パイ専用 学習リモコン基板 ADRSIR
http://bit-trade-one.co.jp/product/module/adrsir/
赤外線LEDが9個もついており、ほぼ指向性がありません。置き場所の自由度は高いです。
エアコンなど、送信バイト数の多い機器でも対応可能です。

これを、Voice Hat基板に接続します。

Voice Kitで使用しているGPIOがあるので、それ以外を接続します。
接続は、はんだ付けがおすすめですが、ジャンパーワイヤーでもできるかも。
接続図は、以下の通り。
![接続.png](https://qiita-image-store.s3.amazonaws.com/0/276133/054a9893-ba3d-3907-1d4f-f2711786cf79.png)

SW4,10が使用できません。
リモコン学習以外でスイッチは使わないので、面倒な人はSW1だけスイッチ接続でもいいかも。
※回路図が公開されていないので、念のため、電源はすべて接続してください。

完成例は、こんな感じで。
![IMG_20180728_160927-1040x780.jpg](https://qiita-image-store.s3.amazonaws.com/0/276133/f6ad28a0-6a6d-f2ac-d58f-7cb39ffca976.jpeg)

#3. Pythonを書く
まず、リモコン基板を動かすためのライブラリを取ってきます。
http://bit-trade-one.co.jp/blog/20180515/
リモコン学習したデータを送信することにします。
使えるスイッチで学習を行ってください。

リモコン送信は、subprocessを使って、こんな感じで。
subprocess.call('/home/pi/I2C0x52-IR/IR-remocon02-commandline.py t < /home/pi/I2C0x52-IR/data/tv_power.data', shell=True)

cloudspeech_demo.pyを参考に、認識結果に応じてリモコン送信をさせれば、音声操作できるリモコンキットの完成！
うちは、テレビ、エアコン、扇風機、LED照明を音声でコントロールしています。
リモコンが見当たらないときに便利です。
MindMup 2 > Error: Your changes are not yet saved... since 2018/7/30 19:21:38 > Ctrl + Rでリロードすると保存される?

```txt:動作環境
Windows 10 Pro (64bit) バージョン 1803 (April 2018 Update)
Google Chrome バージョン: 67.0.3396.99（Official Build） （64 ビット）
MindMup 2
```

### 症状

2018年7月30日現在、MindMup 2でマップを変更後、上部に赤文字で下記のメッセージが表示されるようになっている。

> Your changes are not yet saved... since 2018/7/30 19:21:38

他のサービスでのネットワーク不具合は見当たらない。
MindMup 2側の問題だろうか?

### 対処

ブラウザのリロードを実施すると「All changes saved」になる。

変更内容も保持されているように思われる。

編集のたびに、保存の代わりに<kbd>Ctrl</kbd> + <kbd>R</kbd>することになるだろうか。
LaravelのQueueをWebのエンドポイントから実行する

LaravelのQueueを実行するには、一般的にはartisanコマンドを使います。

```
php artisan queue:work
```

でも状況によっては、artisanコマンド以外でqueueに積まれたタスクを実行したいときもあると思います。supervisorが使えないとか…。

そんなときにWebアクセスからQueueの実行をする方法を紹介します。

# LaravelのQueueWorker
artisan queueコマンドではQueueWorker経由で実行されていて、実質こいつがQueueの実行を司っているのがわかります。

```php:Illuminate/Queue/Worker.php
<?php

namespace Illuminate\Queue;

use Exception;
use Throwable;
use Illuminate\Support\Carbon;
use Illuminate\Contracts\Events\Dispatcher;
use Illuminate\Database\DetectsLostConnections;
use Illuminate\Contracts\Debug\ExceptionHandler;
use Symfony\Component\Debug\Exception\FatalThrowableError;
use Illuminate\Contracts\Cache\Repository as CacheContract;

class Worker
{
    use DetectsLostConnections;

・・・

```

# WorkerをWebアクセスから呼び出す
ControllerからWorkerを呼び出して、Queueに積まれたタスクを実行します。

```php:app/Http/Controllers/QueueWorkerController.php
<?php

namespace App\Http\Controllers;

use App\Http\Controllers\Controller;
use Illuminate\Queue\Worker;
use Illuminate\Queue\WorkerOptions;

class QueueWorkerController extends Controller
{
    private $worker;

    public function __construct(Worker $worker)
    {
        $this->worker = $worker;
    }

    public function work()
    {
        $connection = $this->getConnection();

        $this->queueWorker->runNextJob(
                $this->getConnection(),
                $this->getQueue($connection),
                new WorkerOptions()
            );

        return ['process complete'];
    }

    private function getConnection(): string
    {
        return config('queue.default');
    }

    private function getQueue(string $connection): string
    {
        return config("queue.connections.{$connection}.queue", 'default');
    }
}
```

これで、アクセスするとQueueに積まれたタスクを1回実行してくれます。
【python】re.match より re.search を使おう

# TL;DR
re.match は文字列の先頭からしかマッチしない。

- 部分一致したい -> **re.search**
- 全体一致したい -> **re.fullmatch**

fullmatch が全体一致なので match は部分一致かな？と適当に使うと痛い目を見るので注意が必要です。

# python の正規表現
公式： https://docs.python.jp/3/library/re.html#re.search

- re.search: 文字列の部分のマッチ
- re.match: 文字列の先頭からのマッチ
- re.fullmatch: 文字列の全体のマッチ

となっています。
具体例としては以下のようになります。

| text                       | aaa | aaaB | Baaa | BBB |
|----------------------------|-----|------|------|-----|
| re.search(r'aaa', text)    | ○   | ○    | ○    | ✗   |
| re.match(r'aaa', text)     | ○   | ○    | <font color=red>**✗**</font>    | ✗   |
| re.fullmatch(r'aaa', text) | ○   | ✗    | ✗    | ✗   |

文字列の最初からのみの一致って私には少し特殊に思えるのですがどうなのでしょうか。