OmniAICreator/Qiita-1.07M huggingface dataset:
Electron 重いし Eel 使ってみない？ってお話

## 皆さん、[Electron](https://electronjs.org/) 使ってる？

さくっと、アプリ作りたいときにいいですよねElectron。
有名ですし。

でも

Electron重くない？ 約60MB
![image.png](https://qiita-image-store.s3.amazonaws.com/0/131781/771a1c9d-99ec-a021-4e23-f368b8b807ea.png)

Electronで作ったアプリケーション毎に、ブラウザインストールしているようなものですもの。

正直、作りたいものに比べて、ライブラリが大きすぎる。

## [Eel](https://github.com/ChrisKnott/Eel)のサイズは？

約30KB（多少手を加えてはいる）

![image.png](https://qiita-image-store.s3.amazonaws.com/0/131781/39c2d5e7-bf74-5ced-f633-434542320dab.png)

Python自体が約170MBあるけど、Electron製アプリを4,5個入れたら吹っ飛ぶ

## Eelって何をやっているの？

平たく言うと
* Pythonでローカルサーバ立ち上げ
* Chromeをappmodeで起動してindex.htmlのパスを渡す

くらい

## Chromeないとダメ？
No

`Eel/chrome.py` を参考に
`find_chrome_[OS name]`が返すブラウザのパスを変えれば、FirefoxでもIEでもEdgeでもVivaldiでも開ける。

## 実行するときに書くもの

### Electronを始めるとき

index.js とかを用意して `npm run start`

```json:package.json(略)
{
  "scripts": {
    "start": "electron .",
  }
}
```

```js:index.js
const {app, BrowserWindow, ipcMain} = require('electron');
const isDebug = true;
var win = null;

const createMainWindow = () => {
	isDebug ? console.log(require.resolve('electron')) : void 0;
	win = new BrowserWindow({
		title: '',
		width: 1280,
		height: 720,
		minWidth: 350,
		minHeight: 100,
		alwaysOnTop: false,
		darkTheme: true,
		fullscreenable: true,
		webPreferences: {
			devTools: isDebug
		}
	});
	win.webContents.openDevTools();
	win.loadURL(`file://${__dirname}/index.html`);
	win.on('closed', () => {win = null;});
};

app.on('window-all-closed', () => process.platform !== 'darwin' ? app.quit() : void 0);
app.on('acrivate', () => win === null ? createMainWindow() : void 0);
app.on('ready', createMainWindow);
```


```:ディレクトリ構成
/
┝ web/
│ └ ........
┝ package.json
┝ index.html
└ index.js
```

### Eelを始めるとき

main.py とか用意して `py main.py`

```python:main.py
import eel
eel.init('web')
eel.start('index.html')
```

```:ディレクトリ構成
/
┝ web/
│ └ index.html
└ main.py
```

超簡単でしょ？


## Eelでデストップアプリはできるの？
できるよ。そう、[PyInstaller](https://www.pyinstaller.org/)があればね
ジャンクの液晶ディスプレイを改造して透過液晶作った話

＊gifアニメ多し．wifi推奨です．
東京に住むオタク院生が透過液晶の存在を知ってから実際に作るまでのまとめ

#きっかけ

以下の動画に大興奮してしまった．
[![thumbnail](http://img.youtube.com/vi/ku21Wbw-tJ8/0.jpg)](http://www.youtube.com/watch?v=ku21Wbw-tJ8)

興奮冷めやらぬままネットをぽちぽちしていると，以下のような記事を発見した．
[『MOD PC 透過液晶 作成まとめ』](https://ameblo.jp/tangerinelion/entry-12321308515.html)

これは秋葉原に行くしかないぞ！

#初号機は途中で壊れた（壊した）

くっそ寒い中（2019/02/02）アキバをうろつき，500円のジャンクモニタを発見．店頭で動作しているのが確認できたので，即購入．ありがとうツクモ12号店．

てわけで帰宅
![20190202_151648.jpg](https://qiita-image-store.s3.amazonaws.com/0/325381/f471df36-f7bf-c7d9-a7b5-a9e813094a4e.jpeg)

動作確認（かわいい）
![ezgif-3-5e0acb4049ba.gif](https://qiita-image-store.s3.amazonaws.com/0/325381/3d0f0eea-57aa-5f39-9ca2-030c6af13098.gif)


動画（動きがあったほうが良いかなと思って）
[【MMD】ELECT【sour式リン】](http://www.youtube.com/watch?v=HOvSk65ce0I)

ばらす
![IMG_20190202_154750.jpg](https://qiita-image-store.s3.amazonaws.com/0/325381/38c6a27d-98cb-bad7-f9d0-8e35a93e34d0.jpeg)

ばらす
![DyYhHPIU0AA5dgg.jpg](https://qiita-image-store.s3.amazonaws.com/0/325381/7a2edb19-b841-cb88-d502-a266f22a09be.jpeg)

動いた！
しかし，でかすぎる基板が邪魔で一部しか使えない．光源も（非常用の懐中電灯しか）ない．
![ho9ge.gif](https://qiita-image-store.s3.amazonaws.com/0/325381/cc2bee39-71f1-4672-78c0-304ecb052bdc.gif)




とりあえずバックライトつけて使おうかと思ってゴソゴソ作業していたところ，
![20190202_213525.jpg](https://qiita-image-store.s3.amazonaws.com/0/325381/fc4cc5a9-fa7d-4074-e8cd-2fa8dcaba51c.jpeg)
フラットケーブル破損．トレス台と化す↓↓↓
![IMG_20190202_203600.jpg](https://qiita-image-store.s3.amazonaws.com/0/325381/f98e10c8-1978-42d8-fe79-53e9c47e57ee.jpeg)


またアキバ行くぞ！

#二号機は動いている
一週間ぶりのアキバ（2019/02/09）

動作確認
![ezgif-3-7b702419af3a.gif](https://qiita-image-store.s3.amazonaws.com/0/325381/5f989bf2-6f22-ab8b-f90d-792a6b9843aa.gif)


動画は[√Bestmadsofalltime ▪ 纏物語　こよみトゥーシング](https://www.youtube.com/watch?v=PgXT50mU5oI)

ばらす
![20190209_195043.jpg](https://qiita-image-store.s3.amazonaws.com/0/325381/f35a8a83-0e2a-9564-25ca-9e51d6f94f96.jpeg)

ドーン！
![ezgif-3-65be36efb081.gif](https://qiita-image-store.s3.amazonaws.com/0/325381/485fb6e7-6392-60ec-6727-8d14a2d37b81.gif)


後日基板に足を生やしたり光源を用意したりした．（手が映り込んでる画像しかなかった）
![DzBx8ZMUwAA4Vcp.jpg](https://qiita-image-store.s3.amazonaws.com/0/325381/76f3bf73-b387-b6b7-c04e-738fe29217ba.jpeg)

最終的にメタルラックの最上階に落ち着く．ラズパイでcookie clickerをやっているところ．
![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/325381/f46309ef-cb1d-3fb8-b586-a004e4aea667.png)



グレア液晶は手に入らなかったのでノングレアでトライしました．
楽しかったので満足！

#参考
[【自作PC】ジャンクモニターから透過ディスプレイ作ったら近未来感が凄い](http://www.youtube.com/watch?v=ku21Wbw-tJ8)
[『MOD PC 透過液晶 作成まとめ』](https://ameblo.jp/tangerinelion/entry-12321308515.html)
[Qiitaにアップする画面動画をgifアニメで簡単に作ろう](https://qiita.com/bohebohechan/items/f8bf6d4bbe0f14497a7b)
RandomForest も dtreeviz してみる 

決定木は人間にとって判断基準がわかりやすい判別・回帰の手法です。
そのため判断基準を可視化したくなることが多いのですが、dtreeviz というとてもわかりやすい可視化ライブラリが公開されたそうなので、決定木系の RandomForest で簡単に試してみます。

決定木について知りたい方は下記の記事が参考になります。
https://qiita.com/3000manJPY/items/ef7495960f472ec14377

### 実行環境

Google Colaboratory を使用します。

### まず決定木で試す

下記のページを参考にさせていただいており、そのままですが決定木を実行してみます。
https://qiita.com/calderarie/items/e4321bff95ac3042601b

まず　dtreeviz をインストールします。

```Shell
! pip install dtreeviz
```

scikit-learn 付属の iris のデータセットを使用します。3種類の花ごとの花弁の長さなどのデータとなっており、特徴をみて種類を分類できるかを試すことができます。

```Python
from sklearn.datasets import load_iris
from sklearn import tree
from dtreeviz.trees import dtreeviz

iris = load_iris()
clf = tree.DecisionTreeClassifier(max_depth=2)
clf.fit(iris.data, iris.target)
```

これで決定木を得ることができました。
dtreeviz で可視化してみます。

```Python
viz = dtreeviz(
    clf,
    iris.data, 
    iris.target,
    target_name='variety',
    feature_names=iris.feature_names,
    class_names=[str(i) for i in iris.target_names],
) 

viz
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/323666/217c8051-4e3b-1450-e093-265e9a07bf5c.png)

花弁の幅を条件にして判別が行われ、setosa, versicolor と分類が定められる決定木の内容が可視化されます。

### RandomForest の場合

RandomForest は複数の決定木を使用して、学習データ以外のデータに対する精度を向上させる手法です。
以下が参考になります。

https://techblog.gmo-ap.jp/2017/10/02/%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92%E3%81%AE%E5%AE%9F%E8%B7%B5%E5%85%A5%E9%96%80%E3%83%BCrandom-forest%E3%81%AE%E8%A6%81%E7%B4%84/

といっても実行するだけなら簡単です。

```Python
from sklearn.ensemble import RandomForestClassifier

clf = RandomForestClassifier(n_estimators=150)
clf.fit(iris.data, iris.target)
```

複数の決定木がありますが、今回は先頭の決定木を可視化します。

```Python
estimators = clf.estimators_
viz = dtreeviz(
    estimators[0],
    iris.data, 
    iris.target,
    target_name='variety',
    feature_names=iris.feature_names,
    class_names=[str(i) for i in iris.target_names],
) 

viz
```

出力したい決定木を決めれば同様に出力できます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/323666/b90bba76-6a36-1c8a-8497-75cf01be4cba.png)
KerasとTensorflowのインストール

Pythonを勉強しようと本を買ってから、本を見ながら、Anacondaをインストールしました。

インストールするのはこれだけかと思いきや、ニューラルネットワークの解説を本の後半でするらしく、KerasとTensorflowのインストール方法が載っていました。

その方法は至って簡単。Anaconda Promptを管理者として実行し、起動したコマンドプロントに以下を記述するというもの

>pip install tensorflow

インストールは問題なく終了し、次に以下を記述

>pip install keras

これも問題なく終了。
楽勝じゃんと余裕をこきつつ、インストールの確認の為、Jupyter Norebookを開いて、以下を記述

>import keras

これで「Using TensorFlow backend.」と表示されれば、インストール成功なのだが、並んだのはエラーメッセージ。

「ええええええええええええ？？？？？？？」

「ちゃんと本通りにやったよ？　何がいけなかったの？」と思いつつ調べていると、どうやらpipに原因があるようで、インストールの仕方にはpipとcondaの二つの方法があるらしい。


「ほーん」と思いながら、Anaconda Promptを開いて、

>pip uninstall tensorflow

>pip uninstall keras

を実行して、インストールしたtensorflowとkerasをアンインストール。

>conda install tensorflow

実行すると、以下の画面で止まりました。

>Solving environment:

とりあえず、一生進みそうにないので中止して、原因を探る。そこで見つけたのがcondaのバージョンの更新

>conda update -n base -c defaults conda

実行後、再度>conda install tensorflowを実行すると、時間がかかりましたが、無事にインストール完了。
その後、「>conda install keras」を実行して、インストール完了。
Jupyter Norebookで「import keras」を実行すると、「Using TensorFlow backend.」と表示されました。
Canvas をメソッドチェーンできるようにする

掲題の通り、今さら感漂う小ネタです。
Canvas 、というか Canvas コンテキストの関数はメソッドチェーン（めちゃくちゃ懐かしい）できないので、下記のようなダルい書き方を強いられるケースが多々あります。

```javascript
context.beginPath()
context.moveTo(x1, y1)
context.lineTo(x2, y2)
context.lineTo(x3, y3)
context.closePath()
context.fillStyle = '#ff0000'
context.fill()
```

メソッドチェーンできればこう書けますよね。

```javascript
context.fillStyle = '#ff0000'
context.beginPath().moveTo(x1, y1).lineTo(x2, y2).lineTo(x3, y3).closePath().fill()
```

どうやら「 `undefined` を返す」関数をラップして、「コンテキスト自体（ `this` ）を返す」ようにすれば良さそうです。
で、作ったのが下記スニペットです。

```javascript
// Canvas Method Chaining
const prototype = CanvasRenderingContext2D.prototype
const exclusions = [ 'createImageData', 'createLinearGradient', 'createPattern', 'createRadialGradient', 'getImageData', 'getLineDash', 'getTransform', 'isPointInPath', 'isPointInStroke', 'measureText' ]
for (let key in prototype) {
  try {
    if (typeof prototype[key] === 'function' && exclusions.indexOf(key) === - 1) {
      const f = prototype[key]
      prototype[key] = function () {
        f.apply(this, arguments)
        return this
      }
    }
  } catch (error) {}
}
```

だいぶ evil ですけどね。タイプ量減らしたいだけっていう…こういうのはプライベートでのみ使うようにしましょう(｡ŏ﹏ŏ)
RAMユーザーのIPアクセス制限について

## はじめに

Alibaba Cloudの運用小ネタシリーズ 4つ目の投稿になります。
今までは、下記の運用小ネタをご紹介させていただきました。
①　[[運用小ネタ] RAMとECSのTag機能でECSインスタンスを保護する](https://techblog.sbcloud.co.jp/2018/08/17/protect_instances_by_ram_and_tag/)
②　[[運用子ネタ]「もう勘弁してよ、このECSインスタンを作ったのはだれ ?」と悩んでいる方へ](https://techblog.sbcloud.co.jp/2018/11/28/add_tag_to_ecs_instances_automaticly/)
③　[[運用小ネタ]RAMのパスワード再入力回数を設定して、アカウントロックを試してみる](https://techblog.sbcloud.co.jp/2019/02/08/ram_account_lock/)

今回はRAMユーザーのIP制限の話になります。

Alibaba Cloud上のシステムを運用する際に、Alibaba CloudへのアクセスをIPベースで制限したい場合があります。今まではRAMポリシーのConditionで制限する方法しかなかったですが、つい先日RAMユーザーのセキュリティを設定するだけで、Alibaba Cloud管理コンソールへのアクセスをIPアドレスのホワイトリストで制限できるようになりましたので、それぞれのやり方及び注意点をご紹介したいと思います。

## RAMポリシーの適応条件(Conditon)で制限する方法

ConditonでIPを制限する場合、公式ページの[【ポリシーの例】](https://jp.alibabacloud.com/help/doc-detail/28664.htm#h2--5)のようなConditonをRAMポリシーに追加して、そのポリシーをRAMユーザーに付与すればいいです。
※ Conditonの条件キーワード **acs：SourceIp**を利用

```
{
  "Version": "1",
   . . .
   . . .
  "Condition": {
      "IpAddress": {
          "acs:SourceIp": ["42.120.88.10", "42.120.66.0/24"]
  }
}
```

**注意点**
1: 該当ポリシーが適応されたRAMユーザーでの管理コンソール画面へのログオンは止められません。
　※ ログオン後、詳細なデータ(ECSインスタンスの数とか)が表示されないようになっている
　※ そのRAMユーザーのAccessKeyを利用する場合は、API実行自体ができてしまいますが、データは取得できないようになっています。
2: acs:SourceIpの値が特定のIPアドレス(サブネットマスク /32)の場合, IPの最後に **/32** を書いたら識別できなくなります。



## RAMユーザーのセキュリティの設定で制限する方法

つい最近リリースされた便利な機能で、RAMユーザーのセキュリティを設定するだけで、管理コンソール画面へのログオンできるIPを制限できます。

設定方法は非常に簡単で、下記のように、RAMの「サブユーザーのセキュリティの設定」の「接続許可 IPアドレス」欄に(ホワイトリスト形式)許可するIPを設定するだけです。
※ サブネットマスク /32 の場合は省略しても構いません。
<img width="1670" alt="ip_access_control.jpeg" src="https://qiita-image-store.s3.amazonaws.com/0/117156/ddeba379-f4d4-d84b-c8f9-9fd8deca8494.jpeg">

許可されていないIPから管理コンソールへログオンすると、下記にようなエラーメッセージ <font color="red">「ログオンが禁止されています。あなたのIPアドレスはホワイトリストにありません。」</font>が表示され、ログオンできません。
<img width="1394" alt="result.jpeg" src="https://qiita-image-store.s3.amazonaws.com/0/117156/a8a3fa94-656f-b183-cf48-145c0a86ca81.jpeg">

**注意点**
1: すべてのRAMユーザーに適応されます。
2: RootアカウントとAccessKeyはこの設定による制限が適応されません。

## 最後

今回はRAMユーザーのIP制限について簡単にご紹介させていただきました。RAMユーザーのAccessKeyまでIP制限したい場合はRAMポリシーのConditionの利用をおすすめしますが、管理コンソールへのログオンだけ制限したい場合は、RAMユーザーのセキュリティを設定するだけでいいと思います。
皆さんがAlibaba Cloudを利用される際に、この記事が少しでも役に立てたら嬉しいです。
行列の微分の導出

主に〇〇分布でのパラメータの微分する際に使う公式の証明です。

#逆行列
##逆行列の微分

$n$次正則行列$A$は

```math
A^{-1}A=I 
```
を満たしている。これを$A$で微分すると

```math
\frac{\partial A^{-1}}{\partial A}A+A^{-1}\frac{\partial A}{\partial A}=0 
```
となるので、移項して整理すると

```math
\begin{align}
\frac{\partial A^{-1}}{\partial A} &= -A^{-1}\frac{\partial A}{\partial A}A^{-1} \nonumber \\
    &= -A^{-1}A^{-1}
\end{align}
```
が得られる。

## 逆行列の公式
$A,B$を正方行列として

```math
(AB)^{-1}=B^{-1}A^{-1}
```
となる。
これの証明は天下り的に行う。

```math
\begin{align}
(AB)B^{-1}A^{-1} &= ABB^{-1}A^{-1} \\
&= AA^{-1} \\
&= I
\end{align}
```
となるので, $AB$の逆行列は$B^{-1}A^{-1}$ となる。つまり$(AB)^{-1}=B^{-1}A^{-1}$が得られる。

#トレースの微分
トレースは正方行列の対角要素の和を計算する作用素である。様々な微分公式があるが１つだけ紹介する。

$tr(AB)$をAで偏微分することを考える。ここで$A\in\mathbb{R}^{n\times p}$,$B\in\mathbb{R}^{p\times n}$、$A=(a_{ij})$、$B=(b_{ji})$として

```math
    tr(AB)=\sum_{i=1}^{n}\sum_{j=1}^{p}a_{ij}b_{ji} \nonumber
```

と展開される。これを1つの要素$a_{ij}$で微分することを考える。

```math
    \frac{\partial tr(AB)}{\partial a_{ij}}
    =b_{ji} \nonumber
```

となる。よって

```math
    \frac{\partial tr(AB)}{\partial A}=B^T
```

が得られる。

#行列式
##行列式の微分
$n$次正方行列$A=(a_{ij})$とし、第$i$行と第$j$列を取り除いて得られる$n-1$次の行列を$A_{ij}$とする。これは主小行列とも呼ばれる。また$(-1)^{i+j}A_{ij}$を$\triangle_{ij}$とおき、これらを利用して行列式の第$j$列に関する余因子展開は

```math
\begin{align}
   |A|&=(-1)^{1+j}a_{1j}|A_{1j}|+・・・+(-1)^{n+j}a_{nj}|A_{nj}|  \\
   &= a_{1j}\triangle_{1j}+・・・+ a_{nj}\triangle_{nj} 
\end{align}
```

と書き表すことができ、第$i$行に関しても同様に得ることができる。これより

```math
   \frac{\partial |A|}{\partial a_{ij}}= \triangle_{ij}  
```

を得ることができる。$\tilde{a_{ij}}=(-1)^{i+j}|A_{ji}|=\triangle_{ji}$が要素となる余因子行列$\tilde{A}=(\tilde{a_{ij}})$は$A^{-1}=\frac{1}{|A|}\tilde{A}$となることを利用して、

```math
\begin{align}
   \frac{\partial |A|}{\partial A}&=\tilde{A}^T \\
   &=|A|(A^{-1})^T 
\end{align}
```

となる。

##logdetの微分
対数尤度関数を微分する際にでてきます。普通のlogの微分公式と上の公式を利用して導けます。

```math
\begin{align}
   \frac{\partial log|A|}{\partial A}&=
    \frac{1}{|A|}\frac{\partial |A|}{\partial A}  \\
    &=(A^{-1})^T \\
&=(A^T)^{-1} 
\end{align}
```

となる。
nestjs入門 個人メモ

NestJSの特徴
-----

- サーバーサイトアプリケーションフレームワーク
- TypeScriptを使っている
- OOP(オブジェクト指向プログラミング)可能
- FP(関数型プログラミング)可能
- FRP(関数型反応性プログラミング)可能
- 内部でExpressを利用している
- 様々なライブラリとの互換性を提供([Fastify](https://github.com/fastify/fastify)など)


NestJSの目標
-----
- 高度なテストが可能
- スケーラブル
- 疎結合
- 保守の用意性
- 簡単に作成できる


NestJS
-----
公式: https://nestjs.com/
ドキュメント: https://docs.nestjs.com/


Introduction - アプリケーションの作成
-----

```bash
$ npm i -g @nestjs/cli
$ nest new test-nestjs

# 色々質問されるがすべて「Enter」でスキップ
? description: description
? version: 0.0.0
? author:
```

スタート

```bash
$ cd test-nestjs
> npm run start                                                                                              master untracked

> test-nestjs@0.0.0 start /Users/k4zzk/Desktop/test-nestjs
> ts-node -r tsconfig-paths/register src/main.ts

[Nest] 7083   - 2019-2-16 23:39:36   [NestFactory] Starting Nest application...
[Nest] 7083   - 2019-2-16 23:39:36   [InstanceLoader] AppModule dependencies initialized +22ms
[Nest] 7083   - 2019-2-16 23:39:36   [RoutesResolver] AppController {/}: +71ms
[Nest] 7083   - 2019-2-16 23:39:36   [RouterExplorer] Mapped {/, GET} route +4ms
[Nest] 7083   - 2019-2-16 23:39:36   [NestApplication] Nest application successfully started +3ms
```

「[http://localhost:3000](http://localhost:3000)」でアクセスが可能

<img width="967" alt="スクリーンショット 2019-02-16 23.41.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/47047/16dea6e6-4cf9-c105-d869-1b641fdfe5f6.png">


リポジトリを登録する。.gitignoreが無いので、作成する処理を入れる。

```bash
$ git init
$ curl https://raw.githubusercontent.com/github/gitignore/master/Node.gitignore > .gitignore
$ git add -A
$ git commit -m "first commit"
$ git remote add origin git@github.com:rorono/test-nestjs.git
$ git push -u origin master
```


First steps - 各ファイルの役目
-----

ここでの説明は基礎中の基礎。一番カンタンなCRUDアプリケーションを構築する。
Nestは最新の言語機能を利用しているため、TypeScriptを使用している。
ただ、後から通常のJavaScript構文に書き換えることもできる。

### 必要環境

- Node.js（> = 8.9.0）

### 「src/」について

src/には、コアとなるプログラムが含まれている。

```bash
$ tree src/
src
├── app.controller.spec.ts
├── app.controller.ts
├── app.module.ts
├── app.service.ts
└── main.ts

0 directories, 5 files
```

#### main.ts

アプリケーションのエントリファイル。 NestFactoryを使用してNestアプリケーションインスタンスを作成する

```js
import { NestFactory } from '@nestjs/core'; // <= NestFactory
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(3000);
}
bootstrap();
```
恋人とのコミュニケーション課題解決アプリ開発 -1日目-

#記事の趣旨
理系元カノとの間に生じたコミュニケーションに関する課題に、簡単なアプリケーションのプロトタイプを開発して、対応していく過程を日記として残します。同じ悩みを持つエンジニアの方の参考になれば嬉しいです。

主に自然言語処理やスクレイピングの技術を使って解決していこうと思います。

#課題
彼女がイライラしている時に言い方がキツくて、お互いが嫌な気持ちになってしまい、会えなくなってしまうこと。彼女は、イライラが収まるまで会わなければいいと言うが、イライラしている状態でもしっかりコミュニケーションをとって、彼女に会いたいと思ってもらえるようにしたい。

#解決策
彼女から送られてくるテキストを優しい言い方に変えて、自分が嫌な気持ちにならないようにする。例えば「ありえないんだけど！」といったキツめの語句をあらかじめ指定し、テキストに含まれていたら変換する。

#プロトタイプ
今回はこちらの記事を参考にさせていただきました。
https://qiita.com/anmorenight/items/3be08333d85648faad43

こちらの記事では、Sudachipyで形態素解析を行い、特定の語句を検出して、変換しています。今回は、彼女がよく使う言葉や口調を基に辞書を作り、上記の記事の方法を応用しました。

#結果
結果はこんな感じ。

ありえないんだけど→ちょっとないんじゃないかな
<img width="566" alt="スクリーンショット 2019-02-16 23.31.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/362316/497af3f7-a3ad-6e6e-3a06-c9234eefab55.png">

しないで→しなくて大丈夫だよ
<img width="565" alt="スクリーンショット 2019-02-17 0.10.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/362316/be305dc1-a3b2-b264-4a3e-93047a6f3a95.png">


あとは、彼女がよく使う言葉を見つけ次第、辞書に登録していくだけで、文中に含まれている語句であっても自動で変換されます。今回は、上記の2つを含め彼女の口癖を6つ辞書に登録しましたが、自分の記憶とLINEのトークを基に彼女の口癖を分析して、手動で辞書に追加していったので、少し大変でした。ただ、実装しながら相手の口癖に気づくことができたので面白かったです。

Future WorkとしてLINEの履歴から自動で相手の口癖を検出できるようにできればと思います。


#感想
今回は辞書を使って原始的にやりましたが、もっと効率の良い変換方法はあると思います。発見次第、改良しようと思います。

あとはLINEなどと連携できればと思い、LINEのAPIを調べて見ましたが、個人間のトークに組み込むのはやはり難しそうですね。。。メッセージをスクレイピングして、LINE BOTなどを介して変換するしかないんですかね。もし何か良い方法をご存知の方がいれば、教えていただければと思います。

次回は、彼女との会話を弾ませるために、相手の興味のあるワードを相手の発言から検出してくれるプログラムを実装してみたいと思います。
８日目。全種類Lv.1クリアしました！

##全種類Lv.1クリアしてみた感想
　現場をはなれてはや10年。正直いまの技術などウラシマタロウ状態でして。
今どきの言語を一通り見てみれば、何か分かるんじゃないかな、という期待で全種類LV1クリアを目指しました。
やってみたら「面白かった！」仕事から離れて好奇心の赴くままに手を動かしていると、そうそう、こういうのって楽しかったんだよなーという感覚が蘇ってきました。
　一通り見る中には、何でこうしちゃったんだろう？的な不合理さを発見したりして。理解の妨げになる所ですが、Webで動かす、便利さ重視、大量に捌くの重視、わかりやすさ重視、などなど、何か目的があって、こうなっているのかな？ という目星がつくと、すんなり行ける感じでした。全種類横断ならではですね！そしてどの言語も基本的なところはほぼ共通しているので、いくつかこなしていくうちに、クリア時間も早くなりました。強くてニューゲーム状態ですね。
　初日のペースだと３連休でクリアできると思ったのですが、あいにく私は机に向かうと眠くなる体質、、、なので、ちょいちょい小分けしながら進めました。８日間、休日５時間✕４、平日２時間✕４くらいだったと思います。とりあえず今は達成感で幸せです。次は何かアプリを作りたいなあと思います。

![Lv135.png](https://qiita-image-store.s3.amazonaws.com/0/356263/8f4d01ef-50be-dad4-96b1-8f740d1e3d0a.png)


#今日やった所。
##1.コマンドライン
キソキソキソ！！！ 私だったら最初にこれをやるかも。コマンドでファイルやディレクトリを作って変更して移動して、削除してコピーして。これが出来なきゃどうするのって思ったけど、ほんとに初心者だったらそういう面倒くさいとこより先に、プログラミングの面白いところを一通り触った方がいいのかもなあ。

##2.Git
先日からHerokuで使うのにGithubで苦戦していたのでちょうどよかった！ わけわからんのが、なんかわかるって感じになりました。Progateの手取り足取り作戦様々です。メッセージやコミットの使い方、マスターとブランチの意味、プルとプッシュの違いが何となく分かった気分。

##3.Saas
CSSの便利版みたいな。ダブって何回も書かなきゃだったのが、まとまって分かりやすくなります。

##4.SQL
データのとり方入門みたいな。ほしいデータをとってきたり、大量のデータを分析したりできるようになります。

##5.Go
Googleのアプリを作ったりする言語。
Pythonと近いけど、printがPrintlnになってたり。
方言ぽいよね。こういうこだわりがアイデンティティを作っているのかな。

-出力はPrintln
-packageとかfuncで囲む
-終了子はいらない
-インデント重要
-四則演算は共通
-文字列の連結は共通
-データ型の指定はしっかり。
例）`var message string= "Hello, 世界"`
-省略形もある
例）`message := "Hello, 世界"`
・・・なんでこの２つの方式があるんだろう？？？
-定義した変数が使われないと「使ってませんよ」エラーがでる。親切？おせっかい？？？
-変数を上書きするとき・・・「=」
-変数を定義するとき・・・「:=」　間違いやすいぞ！
-IF文ーふつう。
〜ではないの指定
 例） `if !(z==77) {
        println("zは77ではありません")
    }`
-switch文・・・breakいらず。シンプル。

##6.React
Javascriptのパッケージ。
カッコと中カッコの嵐で頭がこんがらかりまくりんぐです！
しかしできる事がたくさんある。Progateもこれで作っているそうです。

-呼び出す
例）`import React from 'react';`
-JSX・・・Javascript用のHTMLみたいな？
-Imgタグはしっかり閉じる。なんで？
-Javascriptで指定した変数をHTMLで使う時・・・{  変数名 } 

```
// Reactをインポートしてください
import React from 'react';

// Appクラスを定義してください
class App extends React.Component {
  render(){
    return (
      <h1>Hello React</h1>
    );
  }
}

// Appクラスをエクスポートしてください

export default App;
```
flutter iosでrunすると'pod install' or update your CocoaPods installation.というエラーが出る

# エラー文
```
error: The sandbox is not in sync with the
    Podfile.lock. Run 'pod install' or update your
    CocoaPods installation.
```
こんなエラー文が出てビルドできなくなる。

# 解決法
ターミナルでflutterのプロジェクト/iosフォルダに移動し

```
$ pod install
```
を行う。
管理したいディレクトリの親ディレクトリでgit initしちゃったら？

## 違う、そうじゃない

突然アイデアが閃くことってありますよね。
早速新しいプロジェクトを作って開発しよう。
作ったらgit initもしておかないとね。

```
ec2-user:~/environment $ rails new circle-list
      create  
      create  README.md
　　　　：
　　　(中略)
　　　　：
* bin/rake: spring inserted
* bin/rails: spring inserted
ec2-user:~/environment $ git init
Initialized empty Git repository in /home/ec2-user/environment/.git/
ec2-user:~/environment (master) $
```

よーし、出来………………**あっ**
masterと誇らしげに表示されているそこ、親ディレクトリ。

## .gitをセンターに入れてrm -rf

git initしたディレクトリには「.git」というディレクトリが出来ます。
ドット始まりなので普通のlsでは見えないので、詳らかにしてくれる-aオプションを使いましょう。

```
ec2-user:~/environment (master) $ ls -la
total 48
drwxr-xr-x 11 ec2-user ec2-user 4096 Feb 16 13:58 .
drwx------ 13 ec2-user ec2-user 4096 Feb 16 13:44 ..
drwxr-xr-x  3 ec2-user ec2-user 4096 Oct 12 13:05 .c9
drwxrwxr-x 14 ec2-user ec2-user 4096 Feb 16 13:57 circle-list
drwxrwxr-x  7 ec2-user ec2-user 4096 Feb 16 13:58 .git
```

いますね。
こいつを消せばgitの管理下から外れるので、サクっと消してしまいましょう。
打ってはいけないあのコマンドを打ちます。

```
ec2-user:~/environment (master) $ rm -rf .git
ec2-user:~/environment $
```

やったぜ！
本来管理下に置きたかった開発用ディレクトリにある.gitも同じように消去し、そこでgit initしましょう。

```
ec2-user:~/environment $ cd circle-list/
ec2-user:~/environment/circle-list (master) $ ls
app  config     db       Gemfile.lock  log           public    README.md  test  vendor
bin  config.ru  Gemfile  lib           package.json  Rakefile  storage    tmp
ec2-user:~/environment/circle-list (master) $ rm -rf .git
ec2-user:~/environment/circle-list $ git init
Initialized empty Git repository in /home/ec2-user/environment/circle-list/.git/
ec2-user:~/environment/circle-list (master) $ 
```

よしよし、これで開発できますね。
ここからgithubにつなげたい方は[こちらをどうぞ](https://qiita.com/ginger893/items/51a2594d07e3b44dd270)。
フラクタル "シェルピンスキーのギャスケット"をpython+gnuplotでシンプルに描く

#はじめに

フラクタルのひとつにシェルピンスキーのギャスケットというものがあります。
![シェルピンスキーのギャスケット.PNG](https://qiita-image-store.s3.amazonaws.com/0/268033/faba2144-011a-8744-4d68-b1a6158246e0.png)

フラクタルの特徴に”自己相似形”があります。まさにシェルピンスキーのギャスケットはその特徴を持っています。拡大しても同じ三角形（逆三角形？）が見えてきます。
そしてもう一つの特徴は三角形の中身がスカスカなことです。
三角形を大きくしていくと面積が増えるのに密度が０になるということ。

これ以上の説明は専門書に任せましょう。
さっそく、この図を描くシンプルなプログラムを紹介します。
ただし、図を描くのはgnuplotを使います。pythonは座標出力のみです。
また、実際には頂点位置の三角形は埋めなければなりませんが、今回はすべて線で描きます。

#python3のコード
```python
# -*- coding: utf-8 -*-
#sierpinskigasket.py

maxlevel = 7

def gasket(x10, y10, x20, y20, x30, y30, level):
  if level == maxlevel:
    print(x10, y10) 
    print(x20, y20, "\n")
    print(x20, y20)
    print(x30, y30, "\n")
    print(x30, y30)
    print(x10, y10, "\n")
    return
  else:
    x11, y11 = (x20+x30)/2.0, (y20+y30)/2.0
    x21, y21 = (x30+x10)/2.0, (y30+y10)/2.0
    x31, y31 = (x10+x20)/2.0, (y10+y20)/2.0
    gasket(x10,y10, x31, y31, x21, y21, level + 1)
    gasket(x31,y31, x20, y20, x11, y11, level + 1)
    gasket(x21,y21, x11, y11, x30, y30, level + 1)

x10, y10, x20, y20, x30, y30, level = 0.0, 0.0, 1.0, 0.0, 0.5, 1.0, 0
gasket(x10, y10, x20, y20, x30, y30, level)
```

とてもシンプルですね。
まず一番大きな三角形の頂点の座標(x10, y10), (x20, y20), (x30, y30)に初期値を入れます。
そして、gasketを呼びます。

gasketはgasket内で再帰的に呼ばれます。

if文の中を見てみましょう。
6つのprint文があります。これは3角形の3つの辺を出力するためのものです。
１つのprint文で一つの頂点を出力します。
gnuplotで描くためにこのような出力形式になっています。

シェルピンスキーのギャスケットを描くためには、辺の中点の座標を順々に求めていくことが必要になります。
その部分がelse以下になります。紙に図を描いてもらえればわかると思います。

maxlevelはどの程度細かくしていくかを表す数字です。
maxlevelを大きな値にすれば三角形はどんどん細かくなっていきます。
if文でlevelとmaxlevelを比較しています。
そして一番小さな三角形の頂点からprintで出力していきます。



# 実行、そしてgnuplotで描く
```
sierpinskigasket.py > output.txt
```
でoutput.txtに結果を保存してみましょう。
すると以下のようなoutput.txtができます。

```
0.0 0.0
0.0078125 0.0 

0.0078125 0.0
0.00390625 0.0078125 

0.00390625 0.0078125
0.0 0.0 

0.0078125 0.0
0.015625 0.0 
```
これをgnuplotを使ってプロットします。コマンドは以下のとおりです。

```gnuplot 
plot 'output.txt' with lines
```
これで簡単にプロットできます。
このままだと線の色やグラフの縦横比などがデフォルトなので、変更してみてください。


以下の記事を参考にさせていただきました。
https://qiita.com/sci_Haru/items/a6faca220972278ad5cc
https://arakan-pgm-ai.hatenablog.com/entry/2018/12/19/090000
変数と代入

前回:https://qiita.com/New_enpitsu_15/items/3e8993057bafc425df1b
次回:https://qiita.com/New_enpitsu_15/items/2647d3b929bf0e9e7113
目次:https://qiita.com/New_enpitsu_15/private/479c69897780cabd01f4

前回までに、文字と数字の区別について学んできました。

ですが、ちょっとまって。
文字としての数字と、数値としての数字を区別する必要があるのはわかったけど、

なんで、文字を使うときも引用符で囲わなきゃいけないんだ？

```Python
print("text")
#text

print(text)
#Traceback (most recent call last):
#  File "<stdin>", line 1, in <module>
#NameError: name 'text' is not defined
```

今回は、そんな疑問を解決します。

#変数って？

プログラミングにおける変数は、

C言語等では値を入れておく箱のようなもの。
Pythonでは、保存しておく値につけるネームタグみたいなものです。

今はこの二つの違いはさほど重要ではありませんが__後々片方の考え方にとらわれていると大変な目にあいます__から、言語によって違うと覚えておきましょう。

さて、Pythonにおける変数の動きの実例を交えて見てみましょう。

```python
var = "text"
print(var)
#text
```

print関数には`var`を渡したはずなのに、画面には`text`と表示されましたね。

これは`var`が変数としての機能を果たしているからです。

まず、
`var = "text"`
で、<font color="88ffbb">__"text"__</font>というデータに<font color="ffcc55">__var__</font>と名前を付けて保管庫(メモリ)に保存します。

![代入する..png](https://qiita-image-store.s3.amazonaws.com/0/283963/3653c619-6745-aa1d-2833-11a075ff7e11.png)

次に、`print(var)`では、`var`が参照され、<font color="ffcc55">__var__</font>と名前の付いたデータを探して、見つかればそのデータ。例では<font color="88ffbb">__"text"__</font>を返します。
それがprint関数に渡されています。

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f3238333936332f30326563343766632d666161382d633936382d323666622d6565393662666561666637342e706e67.png](https://qiita-image-store.s3.amazonaws.com/0/283963/dcd47cb6-a42c-0030-c565-c41b1c2ac962.png)


それで`text`と表示されたんですね。

(printがよくわかんない！という人は[画面に好きな文字を表示してみよう！](https://qiita.com/New_enpitsu_15/items/b71c7da6387b315d6f7e#print)を参照のこと)

#変数を使う

変数がどんなものかはわかりましたね。では、変数をどう使うかも学んでいきましょう。

変数は、必ず__代入、すなわち具体的なデータが入れられ__、その後に__参照する__ことで利用することができます。<font color="909090">数学の変数とは違うところですね。</font>

##代入(変数にタグをつけて保管庫に置く)

代入は`=`を用いて、`[変数名] = [値]`と記述します。
例の

```python
var = "text"
```

は、varという変数に"text"という値を代入していますね。

###値

値の部分は、__数値でも文字列でも、はたまた変数でも__ほぼ全てのものを代入することができます。

###変数名

変数名は、
`if`,`for`,`while`などの予約語([予約語一覧はこちら](https://docs.python.org/ja/3/reference/lexical_analysis.html#keywords))と呼ばれるもの以外の、
先頭が数字でない演算子(`+`,`-`,`*`,`/`など)を含まない文字列を使用することができます。

`.`,`[]`,`()`,`{}`が含まれるものも使えないこともないですが、ややこしいので今は避けましょう。


以下は<font color="#ff6677">__エラーの__例</font>です。

```Python
if = "test"
0a = "test"
mob-pig = "test"
```

##参照(保管庫から特定の名前がついたデータを探す)

参照する際は、そのまま変数名を記述します。

```python
var = "text"
print(var)
#text
```

そういえば！文字列と文字列は`+`で結合できるんでしたね。
文字列`"text"`を代入した変数`var`も、文字列と同じように使うことができます。

```python
var = "text"
print("This is \"" + var + "\"")
#This is "text"
```

文字列を代入した変数は文字列と同じように扱われましたが、

数値では？もちろん数値のように扱うことができます。

```Python
var = 1
print(var + 5)
#6
```

これが変数の基本であり、プログラムの基本でもあります。

#覚えておくと便利

```python
[変数名] = input()
```
とすることで、変数にユーザーからの入力を代入することができます。

#次回は

演算を行います。Pythonの考え方、オブジェクト指向について触れます。

今回の変数は基本中の基本ですから、理解できなかったら躊躇せずコメント等で聞いてください。
私も答えますし、ほかの方も答えてくれるかもしれません。
Herokuで限りなく24時間近くjobを動かす方法

今回は、Herokuで限りなく24時間近くjobを動かす方法を解説します。
## Herokuで限りなく24時間近くjobを動かす方法
なぜこれを記事にするのかというと、Herokuには「1日に一回は全てのdynoが再起動する」という決まりがあるからです。

そのため長時間のスクレイピングなど、２４時間を超えるjobはHerokuで行うことが難しくなっています。

これを解決する方法は、そのjobをHeroku schedulerで１時間毎のjobとして設定し、プログラム開始から55分ほどで終了するようなjobにすることです。

こうすることで複数のjobが同時に重複して実行することを避けることも可能になります。
## 終わりに
私は現在、Web3のサービスの開発をしています。詳しくはこちらの記事をご覧下さい。
        [無料でイーサリアムが当たる、Web3時代の寄付サイトを作った話](https://note.com/kenroda/n/n814347fbdcd7)
selenium + IE(Internet Explorer) + node.jsのテキスト入力が遅い場合の解消方法

Internet Explorerに対してseleniumを利用してテスト自動化をする際、テキストボックスへのテキスト入力が遅いことがある。
その遅い問題の解消方法を以下に記載する。

#環境前提
以下の環境化にて事象が改善された。

- windows10
- node.js

#遅延解消方法
**「拡張保護モードで64ビットプロセッサを有効にする」にチェックを加える。**
![image.png](https://qiita-image-store.s3.amazonaws.com/0/204260/3da0cc4c-806f-d5ee-c258-ddc8529b95de.png)
これを行うことで、入力遅延が改善される。
[Unity]環境分けコマンドラインビルドEditor拡張

develop環境, staging環境など
ビルド環境分けを行うことを目的としたEditor拡張を作りました。

https://github.com/kuroshio-ice/UnityEnvironmentBuilder.git

## セットアップ

```
Assets/Editor/EnvironmentBuilder
```

配下をインポートします。

## Json設定

develop.json

```
{
    "PlatformOptions": [   # <- 各プラットフォームごとのアプリ名などのビルド設定.
        {
            "Platform": "iOS",
            "ProductName": "AppName",
            "ApplicationIdentifier": "com.appname"
        },
        {
            "Platform": "Android",
            "ProductName": "AppName",
            "ApplicationIdentifier": "com.appname"
        }
    ],
    "DefineSymbols": [    # <- ビルド時に有効とするプリプロセッサ.
        "SERVER_DEVELOP",
        "DEBUG_LOG",
        "TUTORIAL_SKIP"
    ],
    "BuildOptions": [     # <- ビルド時に有効とするビルドオプション.
        "Development"
    ]
}
```

他の環境を追加する場合は
別名のjsonを追加してください。

## ビルド例

```
/Applications/Unity_2018.3.4f1/Unity.app/Contents/MacOS/Unity ¥
 -quit ¥
 -batchmode ¥
 -buildTarget Android ¥
 -projectPath $projectPath ¥
 -executeMethod AppBuilder.Perform ¥
 -path output ¥
 -env develop
```
htmlに装飾（css）を施す時の基本

まず、webサイトを作成する時にやりたいこととしてwebサイトを装飾したい。
そのときに重要となることは以下のとおりです。

・htmlの本文を書いて全体の入れ物を作る。
・cssを書いて装飾をする。　　　　　

そして、cssで装飾する時の最もつまづきたすいと感じたのが、cssの装飾は必ずclassの名前に対して
に対して行う必要があるということ。
具体的にはこうである。
まずhtmlの構文の上部`<head></head>`のなかに

```html
<!--自作CSS -->
    <style type="text/css"><!--
    /*ここに調整CSS記述*/
    .copyright {
      background-image:url(./img/unkai.jpg);
    }
    .footter_text{
      background-color: yellow;
    }
    <!--自作CSSここまで -->
    </style>
```

と書く。
そして、この`<style></style>`のなかで装飾したい部分の設定を行う。

今回でいうと、html文の中で`<div class="copy_right"></div>`を作っていた場合は上記のように

```css
.copyright {
      background-image:url(./img/unkai.jpg);
    }
```
として設定してやることで背景がunkai.jpgとなる。
Ruby Silverでよく出題される同じ動作をするメソッド群

# 概要
Ruby Silverの勉強をしている時に、同じ動作をするメソッドを問う問題がよく見られたので、分かった範囲でまとめました。

## Array
- map, collect

``` ruby
list = [1, 2, 3, 4, 5, 6]
puts list.map { |r| r * 2 }
# => [2, 4, 6, 8, 10, 12]
puts list.collect { |r| r * 3 }
# => [3, 6, 9, 12, 15, 18]
```

- delete_if, reject!  
ブロックに要素を渡し、その評価が真になった要素を全て取り除き、自分自身を返す。

``` ruby
list = [1, 2, 3, 4, 5, 6]
puts list.delete_if { |r| r % 2 == 0 }
# => [1, 3, 5]
puts list.reject! { |r| r % 3 == 0 }
# => [1, 2, 4, 5]
```

## Enumerableモジュール

- find, detect  
ブロックを評価して、最初に真となる要素を返す。

``` ruby
list = [1, 2, 3, 4, 5, 6]
puts list.find { |r| r % 2 == 0 }
# => 2
puts list.detect { |r| r % 3 == 0 }
# => 3
```
- select, find_all  
与えられたブロックを評価した結果の配列を返す。

``` ruby
list = [1, 2, 3, 4, 5, 6]
puts list.select { |r| r % 2 == 0 }
# => [2, 4, 6]
puts list.find_all { |r| r % 3 == 0 }
# => [3, 6]
```
## Hash

- delete_if, reject!  
ブロックを評価した結果が、真になる値を取り除く。

```ruby
hash = { 1: 'Ruby', 2: 'PHP', 3: 'Python' }
hash.delete_if { |k, v| k == 1 }
puts hash
# => { 2: 'PHP', 3: 'Python' }

hash = { 1: 'Ruby', 2: 'PHP', 3: 'Python' }
hash.reject! { |k, v| v == 'Python' }
puts hash
# => { 1: 'Ruby', 2: 'PHP' }
```

- merge!, update  
自分自身と引数で指定されたハッシュを統合する。

```ruby
hash = { 1: 'Ruby', 2: 'PHP', 3: 'Python' }
hash.merge!({ 4: 'Java', 5: 'JavaScript' })
puts hash
# => { 1: 'Ruby', 2: 'PHP', 3: 'Python', 4: 'Java', 5: 'JavaScript' }

hash.update({ 6: 'Go' })
puts hash
# => { 1: 'Ruby', 2: 'PHP', 3: 'Python', 4: 'Java', 5: 'JavaScript', 6: 'Go' }
```
picoCTF 2018 No Login - Points: 200

#問題

https://2018game.picoctf.com/problems

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/ef056265-9e82-b0a2-796c-a6f72647efe8.png)

#解いてみた

webサイトにアクセスしてみます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/92285a90-5386-44b7-13d6-5c19bc1ff644.png)

Sign InとSign Outをクリックすると

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/f0da0b6e-5631-cc9b-e9f6-e766f9693a33.png)

となりました。
flagをクリックすると

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/9049f953-0041-8318-e71e-4ed2087b122b.png)

となります。

adminとしてアクセスするとflagが表示されそうですね。
wiresharkでパケット見てみます。

HTTPだけに絞ると/flagに遷移したあとリダイレクトされて/に遷移してるみたいです。
/flagのパケット見てみます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/3b08e3d8-42b6-34a3-e545-70796687e990.png)

セッションIDみたいなのがあるなぁってくらいでヒントとなるものはなさそう。
/見てみます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/50d82aa3-5a11-8d4d-d2e2-bc48190312be.png)

あまりヒントになりそうなものはありませんでした。

Sign Inボタンを押したときの通信を見てみます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/1ad41d79-3fc2-4e78-90d9-f1badbbdc5ee.png)

こちらもヒントとなりそうなものはありません。

ヒント見てみます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/9a3b9a50-7070-0adb-9346-2cb870542cd9.png)

Cookieで何を探していますか？
ということ？
Cookieにそれっぽいのありましたっけ？と思ってもう一度通信を見直してみる。

```
Vary: Cookie
```

って何？
ということに気づいた。
調べます。
[Vary Http Header | SEO研究所サクラサクラボ - サクラサクLABO](https://www.sakurasaku-labo.jp/dics/332)

ユーザーエージェントやCookieによって表示を変える仕組みとして使われるらしい。

ということでこの問題はCookieを使って表示を変えているということがわかった。
ただ項目名とかは不明。
ただadmin=True的なものだろうという予想はつくのでやってみる。

EditThisCookieを使って追加します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/ba420c0a-ec3e-c5f4-3734-44d634a5c3e9.png)

この状態でflagボタンを押してみる。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/6117833b-6dfb-361b-768c-c866f620b256.png)

できた。
Cookieの値は勘であてるしかないのか。。。
MATLABの.mlxファイル開けなくなった場合

# DON'T PANIC
落ち着いてください、データを救う手はあります。

## まず以下の手順を試してください
1. 問題のファイルをコピーして保持。万が一の時に備える。
2. ファイル名の.mlxの後ろに.zipを追加
3. 普段zipと同じ操作できます。（[7zip]( https://sevenzip.osdn.jp/ )を薦め）
4. mlxファイル（今はzipファイルですが）内にmatlabというフォルダ内にdocument.xmlというファイルがあります。自分が書いた文書やプログラムはここになります。取り出して開いて（エディターではなく、ウェブブラウザー（例えばIE、chrome）はお薦め）、大事な文書とデータを取り出して、適切に別途保管してください。


## 高度の対応手順
やや難易度高い作業です、上記のバックアップをきちんと取って、以下の説明を読んで理解し、自己責任ができる方限定にお願いします。

説明：matlabの実行出力やエラー出力が大量にありすぎて、重くてファイルが開けなくなる場合があります。出力結果はoutput.xmlというファイルにあるため、不要なデータを削除し、zipに戻し、ファイル名をmlxに戻せば開ける可能性があります。

## その他の可能性
- .mファイルはただのテキストなので、普通にエディターで開けます。
- .mが開けないのはプログラム側が悪い、プログラムを初期化する方法が[紹介]( https://qiita.com/yt_siden/items/2589c1962d013ead100b )されています。
- .mlxを.mに[変換]( https://jp.mathworks.com/matlabcentral/fileexchange/59217-livescript2m?focused=6884789&tab=function )する優れものがありますが、私は試していませんので、使った方にコメントお願いします。
- MathWorks社の[サポート]( https://jp.mathworks.com/support.html?s_tid=gn_supp )や[コミュニティ]( https://jp.mathworks.com/matlabcentral/?s_tid=gn_mlc )に相談することもできます。


以上
[Tutorial] Tensorboard in keras

## Intro
In this article, I would like to briefly give a tutorial of Tensorboard using Keras.

## Environment
OS: Ubuntu: 16.04 LTS
Python: 3.6.2

## What is Tensorboard?
Simply saying, Tensorboard is a web-application for inspecting and understanding the result of the training using Tensorflow. And currently it does support five different visualisations: scalars, images, audio, histograms, and computational graphs. As you may know, all computations happen in Tensorflow are represented by the computational nodes. So, utilising visualisation tool, we can efficiently improve the model.
For more information regarding Tensorboard UI, please refer to [this](https://www.tensorflow.org/guide/graph_viz).

This is what a TensorBoard graph looks like:
![video-to-gif.gif](https://qiita-image-store.s3.amazonaws.com/0/240801/205ade8d-0353-4772-d434-d72b985b1856.gif)

## The basic script
```python
import tensorflow as tf

with tf.name_scope("MyOperationGroup"):
	with tf.name_scope("Scope_A"):
		a = tf.add(1, 2, name="Add_these_numbers")
		b = tf.multiply(a, 3)
	with tf.name_scope("Scope_B"):
		c = tf.add(4, 5, name="And_These_ones")
		d = tf.multiply(c, 6, name="Multiply_these_numbers")

with tf.name_scope("Scope_A"):
	e = tf.multiply(4, 5, name="B_add")
	f = tf.div(c, 6, name="B_mul")

g = tf.add(b, d)
h = tf.multiply(g, f)

with tf.Session() as sess:
	writer = tf.summary.FileWriter("output", sess.graph)
	print(sess.run(h))
	writer.close()
```

![scope_graph.png](https://qiita-image-store.s3.amazonaws.com/0/240801/25883f2c-9a0d-2d00-ca19-46572edb5a63.png)

## Collecting run data from your Keras program
```python
from time import time

from keras.models import Sequential
from keras.layers import Dense, Activation
from keras.callbacks import TensorBoard
import numpy as np0

x_train, y_train = np.random.rand(5,5), np.random.randint(2, size=5)
x_test, y_test = np.random.rand(3,5), np.random.randint(2, size=3)

model = Sequential()
model.add(Dense(3, input_dim=5, activation='relu'))
model.add(Dense(1))
model.compile(optimizer='sgd', loss='mse')

tensorboard = TensorBoard(log_dir="logs/{}".format(time()))

model.fit(x_train, y_train, epochs=100, verbose=1, callbacks=[tensorboard])
score = model.evaluate(x_test, y_test)
print('Test loss: ', score[0])
print('Test accuracy: ', score[1])
```

Once you finish the training, you can move on to check the result of the tensorboard by executing the command below.

```shell
$ tensorboard --logdir=logs/
```

![Screenshot from 2019-02-16 14-01-58.png](https://qiita-image-store.s3.amazonaws.com/0/240801/cd431fdc-ccd6-f40c-07a4-9a19e3445983.png)

Thank you for reading.
PHP アナグラムを見つける sort関数で条件を揃えて比較する

<h1>今回挑戦するプログラミング問題</h1>

codewars 5級
「Where my anagrams at?」


<h1>実現したいこと</h1>
与えられた文字列と同じアナグラムを見つける
>
アナグラムとは、言葉遊びの一つで、単語または文の中の文字をいくつか入れ替えることによって、全く別の意味にさせる遊びである --ウィキペディア

例えば、以下はアナグラムとなる。

```
'abba' & 'baab' == true

'abba' & 'bbaa' == true

'abba' & 'abbba' == false

'abba' & 'abca' == false
```

anagram(探したい文字列, アナグラムを含む文字列リスト)
=>引数2の中で、引数1と同じアナグラムを返す
※ない場合は空文字を返す


```
anagrams('abba', ['aabb', 'abcd', 'bbaa', 'dada'])
 => ['aabb', 'bbaa']
//2個のアナグラムが見つかった

anagrams('racer', ['crazer', 'carer', 'racar', 'caers', 'racer']) 
=> ['carer', 'racer']
//2個のアナグラムが見つかった

anagrams('laser', ['lazing', 'lazy',  'lacer'])
 => []
//アナグラムがない場合は空の配列を返す
```











<h1>コーディング</h1>
```
function anagrams(string $word, array $words): array {
  $word = str_split($word);
  sort($word);
  $res = [];
  foreach ($words as $key=>$anagram) {
    $anagram = str_split($anagram);
    sort($anagram);
    if($word === $anagram) $res[] = $words[$key];
  }
 return $res;
}
```
+ 探したい文字列を配列化→ソート①
+ 与えられた文字列リストをforeachで回していく
+ 取り出した文字列を分割して配列を作る→ソート②
+ ①と②を比較して同じものだけ新しく配列に追加する
Firestoreを使う時は、Firebaseコンソール画面でFirestoreを有効にしてから firebase init しよう！！

##背景
1. Firebaseでプロジェクトを作成。
+ ターミナルにて`firebase init`実行。
+ Firestore,Functions,Hostingを選択。
+ プロジェクトが選択肢として表示されるのだが、先ほど作成したプロジェクトが表示されていない！
+ 仕方なく`[don't setup a default project]`または`[create a new project]` を選択したがErrorになってしまう。

##結論
Firestoreを使いたいなら、
まずコンソール画面でFirestoreを有効にしてから`firebase init`を実行しよう！
するときちんとプロジェクトが選択肢として表示されます！

Firestoreを選択したときは、
コンソール画面でFirestoreを有効にしたプロジェクトのみが選択肢として表示されるのだと思います。

##調査
* `firebase list`で作成したプロジェクトを確認すると、リスト上では表示されていた。

* ログインし直してみる。

```terminal:ターミナル
firebase logout
firebase login
firebase init
```
まだプロジェクトの選択肢として表示されず、冒頭と同じ結果でした。

…そして結論で述べた手順にたどり着く。

##最後に
初心者&独学なので間違いなどあるかもしれません。
他にも方法がありましたら、コメントに残していただけると幸いです。
研究室内のPCを研究室外から起動する [Wake-on-Lan]

Wake-on-Lanを使用して、研究室内に設置しているPC (Ubuntu) を研究室外(大学外)から遠隔で起動できるようにしたのでメモ。

必要な条件

- 研究室内ネットワークにVPN接続できる
- 常時起動しているPCが研究室内に1台ある
- この常時起動しているPCにssh接続できる
- 起動したいPCが有線LANで接続されている

起動するPCは Ubuntu 18.04
常時起動しているPCは Raspberry pi 3+, Raspbian GNU/Linux 9.4 (stretch)

設定の仕方は
[こちら](http://blog.calcurio.com/enable-wake-on-lan.html)と
[こちら](http://d.hatena.ne.jp/adragoona/20130924/1380001302)と
[こちら](https://askubuntu.com/questions/1068900/18-04-lts-upgrade-has-stopped-wol-wake-on-lan)を参考にした。

# 起動するPCの設定
1. BIOSを起動し、Wake on Lanを有効化する。
2. `sudo apt install ethtool`でethtoolをインストール。
3. `ip`でネットワークアダプタを確認。今回は「eno1」だった。
4. `sudo nano /etc/rc.local`で設定ファイルを作成、以下を書き込む。これで起動時にWake on Lanが有効化される。
>\#!/bin/bash
ethtool -s eno1 wol g
exit

5. `sudo reboot`で再起動。
6. `sudo ethtool eno1 | grep Wake-on`を実行し、「Wake-on: g」であればOK。
7. `ip`でmacアドレスを確認しておく。

# 常時起動しているPCの設定
1. `sudo apt install wakeonlan`でwakeonlanをインストール
2. `wakeonlan [起動するPCのmacアドレス]`で起動するかどうか確認。

#はまったところ
Ubuntu 18.04では、`/etc/init.d/`以下にファイルを作って実行権限を与えた後`sudo update-rc.d file defaults`をしても起動時に実行されなかった。そこで、`/etc/rc.local`を作成した。

# メモ
常時起動させているPCは有線で接続されている必要はない。
Codewars を低解像度(1280x720とか)で使う場合に便利な操作(GitHub issue に対応していただいたため、この記事で紹介した問題はもう起こりません)

[![](https://www.codewars.com/users/JavaCommons/badges/large)](https://www.codewars.com/users/JavaCommons/completed) クリックすると私が解いた問題が見れます。
\# Codewars についてご存じない方は、先に[『【Codewars】ブラウザでコーディングの基礎からトレーニングできるサイト (ブラウザでvimが使えて32種類のプログラミング言語に対応。4000個以上の問題が投稿されています！)』](https://qiita.com/javacommons/items/7c473cda7825ab99e08c) をお読み頂くようお願い致します。

# 本文

モニターの横幅が1280ピクセルぐらいだと Codewars の IDE を開いたとき下のような画面になってテストを開始したりコードを提出したりするボタンが押せなくなることがあります。
~~そのような場合に上手く操作できるようにする方法を見つけました！
以下スクショをご覧ください。~~

2019/02/17 04:11 頃に、スクショの方法をやってみたら上手くいかなくなりました。
この記事のコメントに書いたんですが、ブラウザを最大化してない状態にすれば、特別な操作をしなくてもボタンが表示されます。(後でスクショを撮りなおして記事を書き換えますが) とりあえず、ボタンが押せない現象にあったら、ブラウザの最大化を解除してからブラウザのウィンドウの大きさを広めに調整してみてください。そうすればボタンが表示されると思います。

2019/02/17 06:31 ブラウザを最大化したままで、Ctrlキー＋マウスホイールでズームレベルを変えれば(やや縮小表示にすれば)ボタンが表示されるよ、というアドバイスもありましたのでご紹介しておきます。(Ctrl＋0 でズームレベルをリセット(100%に戻す)できます)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/140610/23bd190d-96c4-d3ba-ec6c-f5cb58b611b2.png)

2019/02/24 23:43 [GitHub issue](https://github.com/Codewars/codewars.com/issues/1735)を出してたんですが、対応していただき、この問題は治りました。以下のスクショの問題はもう起こりません。尚、スクショの操作を行うことで、コード編集ペインが少し大きくなるので、そういう意味では使い道はあるとは思います。


![image.png](https://qiita-image-store.s3.amazonaws.com/0/140610/40fd0372-a6e9-3534-33d2-bea8930e9793.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/140610/0f639831-27ce-0aef-c457-60ddc69156da.png)

以上、今回は小ネタでした～！古いパソコンで解像度を上げられないときにご活用ください。
Bootstrapの導入

#はじめに
Bootstrapを導入したので、その手順をメモします。

#手順
###1.gemのインストール
```ruby:Gemfile
gem 'bootstrap', '~> 4.1.3'
gem 'jquery-rails'
```
bundle installします。

###2.application.scssを作成する。
app/assets/stylesheets/application.cssを削除し、app/assets/stylesheets/application.scssを以下のように作成すします。

```ruby:app/assets/stylesheets/application.scss
@import "bootstrap";
```

###3.app/assets/javascripts/application.jsにコードを追加

```ruby:app/assets/javascripts/application.js
# 省略
//= require rails-ujs
//= require activestorage
//= require turbolinks
#以下3行挿入
//= require jquery3
//= require popper
//= require bootstrap-sprockets

//= require_tree .　# 現在のディレクトリにある全てのJavaScriptファイルを読み込む
```
C++でStimulusを使う！

# はじめに

[`Stimulus`](https://github.com/stimulusjs/stimulus)というシンプルなJavaScriptフレームワークをC++のWeb開発で使用した時のアレコレです

実際に作ったものは以下

[Ctimulus](https://github.com/S-H-GAMELINKS/Ctimulus)

実際にできたもののデモ

![ctimulus.gif](https://qiita-image-store.s3.amazonaws.com/0/191521/b64458be-ab80-3f73-7a39-deb6c8c51c7b.gif)



# チュートリアル
## cpp-httplibで基礎構築

まず、[`cpp-httplib`](https://github.com/yhirose/cpp-httplib)を使い、C++でのWeb開発環境を構築します

```cpp:main.cpp
#include <iostream>
#include <httplib.h>
#include <fstream>
#include <sstream>
#include <string>

const std::string load_assets(const std::string& path) {

    std::ifstream file(path.c_str(), std::ios::in);
    
    std::stringstream stream;

    stream << file.rdbuf();

    file.close();

    std::string assets(stream.str());

    return assets;
}

int main() {

    httplib::Server svr;

    std::string body = load_assets("./assets/index.html");

    std::string indexjs = load_assets("./assets/index.js");

    svr.Get("/", [&](const httplib::Request& req, httplib::Response& res) {
        res.set_content(body, "text/html");
    });

    svr.Get("/index.js", [&](const httplib::Request& req, httplib::Response& res) {
        res.set_content(indexjs, "text/javascript");
    });

    svr.listen("localhost", 3000);

    return 0;
}
```

後は以下のようにビルドします

```shell
g++ main.cpp httplib.h
```

## Stimulus

次に`main.cpp`と同じ階層に`assets`ディレクトリを作成し、各ファイルを作成します

```js:assets/webpack.config.js
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'index.js',
        path: `${__dirname}`
    }
}
```

```json:package.json
{
  "scripts": {
    "build": "webpack --display-error-details"
  },
  "dependencies": {
    "stimulus": "^1.1.1",
    "webpack": "^4.29.4",
    "webpack-cli": "^3.2.3"
  }
}
```

```html:assets/index.html
<html>
    <body>
        <h1> Ctimulus </h1>
        <div data-controller="post">
            <input data-target="post.content" data-action="input->post#content">

            <div data-target="post.preview"></div>
        </div>
        <script src="./index.js" type="text/javascript"></script>
    </body>
</html>
```

```js:assets/src/index.js
import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"

const application = Application.start()
const context = require.context("./controllers", true, /\.js$/)
application.load(definitionsFromContext(context))
```

```js:assets/src/controllers/post_controller.js
import { Controller } from "stimulus"

export default class extends Controller {
    static get targets() {
        return [ "content", "preview" ]
    }

    content() {
        this.previewTarget.innerHTML = this.contentTarget.value
    }
}
```

あとは、`assets`ディレクトリ以下で、`yarn install`と`yarn build`を実行すればOKです

```shell
yarn install
yarn build
```

## ローカルサーバを起動

`main.cpp`がある階層に戻って以下のように実行します

```shell
./a
```

これで、`localhost:3000`にアクセスすると以下のように動作します

![ctimulus.gif](https://qiita-image-store.s3.amazonaws.com/0/191521/47ae91a8-ac17-7834-b915-d0e688e8055c.gif)

# おわりに

ひとまずはこんな感じでC++でStimulusを使えるようになりました！
今後は、Firebaseとかと組み合わせて爆速なチャットアプリを作ってみようかな？
【GoogleAppsScript】二次元配列データを特定のスプレッドシートへ出力する

# 作成目的
- [【GoogleAppsScript】URLで指定したスプレッドシート情報を二次元配列で取得する](https://qiita.com/tomo-hawk/items/69bd303a3cf46f2bdb6a) で取得した二次元配列データを、指定のスプレッドシートへ出力する必要が出たため作成

# 手順／方法
1. 後述する関数 `outputToSpreadsheet()` へパラメータを設定し、呼び出す ※パラメータの詳細な説明は以下
    - target_spreadsheet_url → 出力先スプレッドシートのURL
    - start_column           → 値を出力する開始列番号
    - num_of_row             → 二次元配列データの行数
    - num_of_column          → 二次元配列データの列数
    - two_dimensional_array_datas → 二次元配列データ

# 補足
- 作成して思ったが、[【GoogleAppsScript】URLで指定したスプレッドシート情報を二次元配列で取得する](https://qiita.com/tomo-hawk/items/69bd303a3cf46f2bdb6a) の関数内へ盛り込んだ方がよかったかもしれない
- 後日、[【GoogleAppsScript】特定のスプレッドシートが起動されたタイミングで、その起動通知を指定のスプレッドシートへ出力する](https://qiita.com/tomo-hawk/items/9231450a17eafda4bf37) として記事を作成する

# 具体例
- パラメータが指定されたなかった場合は、ダミーデータが設定されるように対応した

```javascript:output_to_spreadsheet.gs
/*
* 二次元配列データをスプレッドシートに出力する関数
* 
* @param {string } 取得するスプレッドシートURL
* @param {integer} 二次元配列データ値出力先 開始列番号
* @param {integer} 二次元配列データ値 行数
* @param {integer} 二次元配列データ値 列数
* @param {array  } 二次元配列データ
*
*/

function outputToSpreadsheet(target_spreadsheet_url, start_column, num_of_row, num_of_column, two_dimensional_array_datas) {

  // パラメータ target_spreadsheet_url 未指定の場合、本スクリプトを実装したスプレッドシートを対象とする
  if(!target_spreadsheet_url){
    var target_spreadsheet_object = SpreadsheetApp.getActiveSpreadsheet();
    var get_active_sheet_object   = target_spreadsheet_object.getActiveSheet();
    var active_sheet_lastrow      = get_active_sheet_object.getLastRow();
  } else {
    var target_spreadsheet_object = SpreadsheetApp.openByUrl(target_spreadsheet_url);
    var get_active_sheet_object   = target_spreadsheet_object.getActiveSheet();
    var active_sheet_lastrow      = get_active_sheet_object.getLastRow();
  }
  
  // パラメータ start_column 未指定の場合、 ダミーデータとして 1 を代入する
  if(!start_column){
    var start_column = 1;
  }

  // パラメータ num_of_row 未指定の場合、ダミーデータとして 列数を 1 にする
  if(!num_of_row){
    var num_of_row    = 1;
  }
    
  // パラメータ num_of_column 未指定の場合、ダミーデータとして 行数を 5 にする
  if(!num_of_column){
    var num_of_column = 5;
  } 
    
  // パラメータ spreadsheet_info_all 未指定の場合、ダミーデータとして、以下の二次元配列データを利用する
  if(!two_dimensional_array_datas){
    var two_dimensional_array_datas = [['a', 'b', 'c', 'd', 'e']];
  }
  
  get_active_sheet_object.getRange(active_sheet_lastrow+1, start_column, num_of_row, num_of_column).setValues(two_dimensional_array_datas);

}

```