OmniAICreator/Qiita-1.07M huggingface dataset:
料理画像からレシピを生成するAI

[Inverse Cooking: Recipe Generation from Food Images](https://github.com/facebookresearch/inversecooking)のデモです。

![料理画像からレシピを生成するAI.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/dce31234-56db-2401-74a1-bf3586ad3bea.png)

# 使い方

以下にアクセスする。
http://nuxt.io/

![Screenshot from 2019-06-15 22-36-35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/1670b04a-3383-b7a1-e36b-3e528db60d03.png)

画像を選択する。
![Screenshot from 2019-06-15 22-37-54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/afa4b246-0bc9-c278-e753-4123e601a976.png)

レシピが表示される。
![Screenshot from 2019-06-15 22-38-22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/68f1b76d-af05-5fbf-df54-30010611c878.png)

必要に応じて日本語に翻訳してください。
![Screenshot from 2019-06-15 22-40-32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/6f8bedaa-59fa-ca15-ac22-f1ea765d14b3.png)

# 理論
TBD

# ソースコード

### Nuxtのアプリ
https://github.com/GitHub30/inversecooking-app

### バックエンド
https://github.com/GitHub30/inversecooking-api
ng-bootstrapを導入する前にしなければならないこと

# AngularアプリにBootstrapを導入したい
Bootstrapの導入にあたり調べてみたら *ng-bootstrap* というものがあるみたいなのでインストールしてみたのだが、その際に戸惑ったのでメモ

## ng-bootstrapを導入する
ng-bootstrapはangularでbootstrapを使えるようにするライブラリ。
公式HP：https://ng-bootstrap.github.io/#/home


とりあえず公式に記載の通りにやってみる。

### 導入手順
1. ng-bootstrapをインストールする

```
npm install @ng-bootstrap/ng-bootstrap
```

2. app.module.tsにNgbModuleをインストールする

```app.module.ts
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  ...
  imports: [NgbModule, ...],
  ...
})
export class YourAppModule {
}
```

これでng-bootstrapがインポートでき、angularでもBootstrapが使えるとのこと

### 早速試してみる
公式のサンプルを拝借してDropdownを動かしてみる。

```app.component.html
<div class="row" style="padding: 40px 10px">
  <div class="col">
    <div ngbDropdown class="d-inline-block">
      <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
      <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
        <button ngbDropdownItem>Action - 1</button>
        <button ngbDropdownItem>Another Action</button>
        <button ngbDropdownItem>Something else is here</button>
      </div>
    </div>
  </div>

  <div class="col text-right">
    <div ngbDropdown placement="top-right" class="d-inline-block">
      <button class="btn btn-outline-primary" id="dropdownBasic2" ngbDropdownToggle>Toggle dropup</button>
      <div ngbDropdownMenu aria-labelledby="dropdownBasic2">
        <button ngbDropdownItem>Action - 1</button>
        <button ngbDropdownItem>Another Action</button>
        <button ngbDropdownItem>Something else is here</button>
      </div>
    </div>
  </div>
</div>
```

ところが起動すると、画面がこのようになった。
![angular_with_bootstrap1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412663/4df33d31-6d67-97d0-e942-6369d30b9ca6.png)


## 何が間違っているのか
インストールしたng-bootstrapの`readme.md`を開いてみると原因が分かった。
**どうやらAngularでbootstrapを使うにはng-bootstrapだけではだめで、bootstrapのcssファイルが必要らしい。**
ここからは`readme.md`に記載の手順に従って`bootstrap.css`をAngularに適用した。

1. bootstrapをインストールする

```
npm install --save bootstrap
```

2. `angular.json`に以下を追記する

```angular.json
  ...
  "styles":[
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "styles.scss"
  ]
  ...
```

3. styles.cssに`bootstrap.min.css`をインポートする

```styles.css
  @import 'bootstrap/dis/css/bootstrap.min.css'
```

設定が終わってから再起動すると画像のように表示されるようになった。
![angular_with_bootstrap2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412663/9d90b9b0-999c-9b0b-bb8f-907dd490cebc.png)

## まとめ
AngularでBootstrapを使えるようにするには *ng-bootstrap* だけではなく *bootstrap.css* もインストールする必要があった。
jQueryが機能しない原因

progateでjQueryを勉強し、いざ自分で書いてみると、全く反映されず、どうすればいいか分からなくなってしまいました。今回はそれが解決した経緯を紹介します。
　 
##jQueryを読み込めていない
progateはここでつまづかないよう、すべてコピーすれば動くように簡単になっています。しかし実際自分でしようと思うと、「どうすればいいんや？」となることが多いです。

ではどうすればいいかというと、
・jQueryをダウンロードする方法
・他サーバーにあるjQueryファイルを使う
この二つになります。
一つ目はこちらのサイトからダウンロードしてください。[jQueryをダウンロード](http://jquery.com/download/)
そしたらHTMLのhead内に下記のcodeを書きます。

```html

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
```
これでjQUeryが読み込まれるようになります。
src先は自分で保存したファイル名にしてください！

もう一つは

```html

 <!-- jQueryの読み込み -->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script type="text/javascript" src="my introduction.js"></script>
```

これをhead内に書き込むことで動くようになります。
このとき注意なのが先にjQueryのファイルを読み込むよう先に記述する必要があります。
また僕の場合はJSファイルを別にしているので紐づけけるために、2文目を書いています。

最後にbodyタグの一番下に

```html

  <script src="my introduction.js"></script>
```

と書けば完了です。
この時もsrcには自分のファイル名を書くようにしてください。

以上になります。
何か間違いや指摘があればお願いします。
React カウントアップ機能の作成

カウントアップ機能を作りために必要な要素が
・イベント
・state
この2つになります。
イベントによってクリックしたときの機能を追加し、stateでクリック時の表示を変更する、これが大まかな流れになります。


stateを使うとき3つのステップがあります。
・最初の値の定義
・その値をサイトに表示させる
・クリックされた時、最初の値から+1する
この順番で行います。

```react

this.state = {count:0};
```
このように最初に値を定義します。
次にreactファイルのreturn内で

```react

{this.state.count}
```
と書いて、HTMLで表示されるようにします。

この3つ目でメソッドを定義し、その中にstateを書きます。

```react

handleClick(){
this.setState({count:this.state.count+1});
}
```
とすることでクリックしたとき、stateを変更し値が変わるようにします。

上記によってhandleClickというメソッドが作成できました。
これをonClickイベントでボタンタグに入れることでカウントアップボタンが作成できます。

```react

<button onClick = {() => this.handleClick()}}></button>
```
完成はこのようになります。
まとめとしてはメソッドにstateの定義、表示、変更のcodeを書き込み、onClickイベントでクリックしたとき、stateの内容が変更されることでカウントアップできる仕組みになっています。

以上がカウントアップ機能の作成になります。
間違いや指摘があればお願いします。
Dockerホストからコンテナに接続する方法

- 環境
    - Dockerホスト:
        - CentOS Linux release 7.6.1810 (Core)
        - Docker version 18.09.6, build 481bc77156
    - Dockerコンテナ
        - CentOS Linux release 7.6.1810 (Core)

# 1. コンテナの情報を確認する

```bash
# 停止しているコンテナも含めて(-a)一覧で見る
$ docker ps -a
CONTAINER ID  IMAGE                     COMMAND             CREATED             STATUS              PORTS                    NAMES
5aa12f        host-hoge_hoge_shibainu   "/usr/sbin/init"    17 hours ago        Up 2 hours          0.0.0.0:8081->8080/tcp   hoge_shibainu
...
```

# 2. docker-compose.ymlのあるディレクトリに移動
```bash
$ cd git/docker/host-hoge/
```

# 3. 起動しているか確認をする
```bash
# 停止していたら・・・
$ docker-compose ps
Name              Command        State             Ports
-------------------------------------------------------------------------
hoge_ponsuke    /usr/sbin/init   Exit 129
...

# 起動する
$ docker-compose start hoge_ponsuke
Starting hoge_ponsuke  ... done

# 起動した
$ docker-compose ps
Name              Command       State           Ports
----------------------------------------------------------------------
hoge_ponsuke    /usr/sbin/init   Up      0.0.0.0:8082->8080/tcp
...
```

# 4. コンテナに接続する
参考 : [コンテナに入りたい？それ docker exec でできるよ - Qiita](https://qiita.com/yosisa/items/a5670e4da3ff22e9411a)

```bash
# コンテナ名を指定して接続する
$ docker exec -it hoge_ponsuke /bin/bash
[root@1493c5 opt]#
```

## rootユーザーでコンテナに入りたい
参考 : [意外と忘れがち？コンテナのrootユーザのパスワードを知らなくてもrootユーザで実行する方法](https://qiita.com/comefigo/items/fb435c8c886b470ec07c)
単純に接続すると使ったイメージによってはroot以外でログインされる、そんなときでも`root`でログインしたい場合は`-u root`を指定する

```bash
$ docker exec -it -u root hoge_ponsuke bash
[root@89bcfa954a5f payara]#
```
git push heroku masterで「pg is not part of the bundle.」と出る

Railsアプリをherokuへデプロイしようとしたところgit push heroku masterのところでつまいづいたのでメモとして残します。結果的にめちゃくちゃアホなことやってしまってた、、、

##発生している問題
git push heroku masterをすると、

Gem::LoadError: pg is not part of the bundle. Add it to your Gemfile.

というエラーメッセージが出ました。
pgはGemfileに追加したはずなのに、、、datebase.ymlも確認しましたが問題なし、、、

##解決方法

[heroku run rails db:migrateの時にpg is not part of the bundle](https://qiita.com/jpmogul/items/b651d2664d6055cc6bf9)
という記事を発見。
どうやら私も.bundle/configをherokuにアップロードしてしまったっぽい、、、
ここで重大なことに気づく。Railsアプリの入っているファルダに.gitignoreがない、、、？！
どうやら何かの拍子に勝手に消してしまったっぽい。急いで.gitignoreを作成しました。
.bundleの中身を全て無視する部分の記述はこんな感じ。

```
# Ignore bundler config.
/.bundle
```
一度gitのキャッシュを削除した後に再度pushすると、無事にデプロイすることができました。

##原因
.gitignoreがなかったので.bundle/configがherokuにアップロードされてしまったためエラーが出てしまっていました。herokuを使うのは初めてで色々と怖かったので元のアプリのコピーで作業をしていたので色々いじくった時に消してしまったみたいです。もっと慎重に作業しないとなあ、、、
44日目 Bebutifulsoupでinputの値をとってくる

Formの値がnameで一意に決まる場合の設定です。

こちらのサイトを参考にしました。
[Python Beautiful Soup \- Getting input value](https://stackoverflow.com/questions/46028156/python-beautiful-soup-getting-input-value)


```test.html
<html>

<form action="process">
<input type="hidden" name="_AntiCsrfToken" value="5435434354353453545">

</form>
</html>
```

```test.py
from bs4 import BeautifulSoup 
res = open("test.html", encoding="utf-8")
soup = BeautifulSoup(res, "html.parser")

#findでとってくる
token = soup.find('input', {'name':'_AntiCsrfToken'})['value']
print(token)

#selectでとってくる
csrf = soup.select_one('input[name=_AntiCsrfToken]')['value']
print(csrf)
```
実行結果

```
$ python test.py
5435434354353453545
5435434354353453545
```

ばっちり！
これでいけそうです！！！


あとは、


###1.Ruby on Railsを始めよう
12分
忘れたくないので復習！

###Python 1
15分
四則演算、変数、型変換、if文
この辺は大丈夫そう！

###Python 2
32分
リスト、辞書、for、while 
お買い物システムを作るのでした。
ちょっと手間取った感じ。

次は関数とかクラスとかわかりたいなあ。

(所要時間 ２時間くらい)
Windows10にVirtual BoxでUbuntuを入れる

# VirutualBoxのインストール
- [VirutualBox](https://www.virtualbox.org/wiki/Downloads)のサイトからインストーラをダウンロード
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225812/0e11bb60-d62a-3f1a-54c7-1452f7ea84a2.png)

- インストーラをダブルクリックしてインストール。OK押せばよい。

# VirutualBoxにUbuntuをインスロール

- [Ubuntu](http://releases.ubuntu.com/bionic/)のサイトからISOイメージをダウンロード
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225812/40a0874b-1bef-a304-14f7-2ca40a32f2f3.png)

-  Virtual Boxを立ち上げて、新規ボタンを押し、下記画面に名前(好きなもの)、マシンフォルダー（インストールフォルダ）、タイプ(Linux)、バージョン（ubuntu）を設定する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225812/f4a8cfcf-350f-1887-82a1-e93b672a4fe3.png)

メモリサイズを設定する。(適当に2GBくらい)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225812/ffa01061-f499-2fed-1bfa-41744cb26f49.png)

仮想ハードディスクを作成する（適当に20GBくらい）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225812/77956c28-2c88-f9fb-8038-736dcf5c6130.png)

-  Virtual Boxの起動ボタンを押し、UbuntuのISOファイルを指定する。後は通常のUbuntuの流れにしたがってインストールする。

# Windows10とUbuntuの共有フォルダを作成する。

- Virtual Boxを立ち上げて、 設定ボタンを押して、共有フォルダを設定する。フォルダーパス(Windows側の共有したいフォルダのパス)、フォルダ名(Windows側の共有したいフォルダ名)
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225812/b4ff238b-b64d-ea23-3a29-d1e2b6027489.png)

-  Virtual Boxを立ち上げて、起動ボタンを押して、Ubuntuを起動し、コマンドラインで下記コマンドを入力しGuest Addisionsをインストールする。

```
$ sudo apt install virtualbox-guest-dkms
```

-  デバイス→Guest Addition イメージの挿入を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225812/f3f1e083-5021-e040-590d-244cc70cd214.png)

- ホーム画面に共有フォルダ(sf_****)が表示されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225812/afc0f2a5-c0d1-43cd-dde1-0ae2fe1283fc.png)
簡単！VRコンテンツ開発！

# はじめに
Oculus Questを買ったのでVRコンテンツにも手を出したいなーと思っていました。そこで、実際に始めてみたら初心者でも10分で実機確認までできました！簡単！

## 実機動作
こんな風にOculus QuestのブラウザでVRコンテンツがプレビューできます！

![ezgif.com-video-to-gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321692/21822c00-a4b3-ddf0-0115-43172f3f732f.gif)


それではさくっと環境構築していきましょう！

## 用意するもの
- VScode
- Live Server (VScode拡張機能)
- ブラウザ搭載VR実機 (今回はOculus Quest)
- 無線LAN環境
- A-Frameのサンプルコード

まずはVScodeをインストールして、Live Serverという拡張機能を入れます。

[【ゼロから！】Visual Studio Codeのインストールと使い方](https://eng-entrance.com/texteditor-vscode)

[VS Code：ライブリロード機能を備えた簡易ローカルサーバーを起動できる拡張機能「Live Server」 \| NxWorld](https://www.nxworld.net/services-resource/vscode-extension-live-server.html)

次に今回使うWebVRのJavaScriptフレームワークであるA-Frameのソースコードを持ってきて、適当なhtmlファイルで保存しましょう。

[aframe](https://glitch.com/~aframe)

そして、VScodeの右下にあるGo Liveを押せばローカルサーバーが立ち上がります。

コマンドプロンプト等で自分のIPアドレスも調べておきましょう。

[自分のIPアドレスを調べてみる/コマンドライン \| IPラーニング](https://www.geolocation.co.jp/learn/program/01.html)


あとは、同じ無線LAN環境に繋いだOculus Questのブラウザでアドレスを入力するだけで、簡単にVRコンテンツをプレビューできます！

```
自分のIP:5500
```

A-Frameの詳しい説明は以下を参照してください。
[A-Frame – Make WebVR](https://aframe.io)

[A-Frameを使ってWebVRを実装してみよう ｜ 福岡のホームページ制作会社・株式会社マグネッツ](https://magnets.jp/web_design/8859/)
【Fortran】コマンドライン引数の個数が分からないときの取得

``` Fortran
program main
    implicit none
    integer a, b, c
    integer, parameter :: a_def = -9, b_def = -9999, c_def = 0
    character(len=:), allocatable :: arg
    integer i, length, status
    a = a_def
    b = b_def
    c = c_def
    do i = 1, command_argument_count()
        call get_command_argument(i, length=length, status=status)
        if (status /= 0) exit
        allocate(character(length) :: arg)
        call get_command_argument(i, arg, status=status)
        if (status /= 0) exit

        select case (i)
            case (1)
                read(arg, *) a
            case (2)
                read(arg, *) b
            case (3)
                read(arg, *) c
        end select
        deallocate(arg)
    enddo
    write(*, *) a, b, c
end program main
```
Liberty Docker Toolsを使ってEclipseからLibertyコンテナを操作する

EclipseプラグインであるIBM Liberty Developer Toolsを使うとEclipseからLiberty上へアプリケーションのデプロイやデバッグを行うことができます。Docker上で稼働しているLibertyへもデプロイすることができるので試してみました。

## プラグインの導入

Eclipse Marketplaceから探します。
https://marketplace.eclipse.org/content/ibm-liberty-developer-tools

WebSphere Application Server Liberty Docker Toolsにチェックを入れて導入します。
![スクリーンショット_2019-06-14_21_54_23.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/376039/8f7ae079-237b-f26f-8833-4f26612a0f50.jpeg)

## Dockerコンテナの準備

Docker Desktopを導入してからDockerイメージを以下から探します。今回は`19.0.0.5-kernel`を使うことにします。
https://hub.docker.com/_/websphere-liberty/

Liberty Docker Toolsを使う場合は、イメージを作ってコンテナを稼働した状態にしてからEclipseから接続するようなので、まずはイメージを作ります。

Libertyの構成ファイルであるserver.xmlは以下にしました。`<administrator-role>`要素あることとhttpsで公開していることが必須なようです。`<feature>restConnector-2.0</feature>`も有効化しました。

```xml
<server description="new server">
  <featureManager>
    <feature>localConnector-1.0</feature>
    <feature>servlet-4.0</feature>
    <feature>restConnector-2.0</feature>
  </featureManager>

  <httpEndpoint host="*" httpPort="9080" httpsPort="9443" id="defaultHttpEndpoint"/>

  <applicationManager autoExpand="false"/>
  <applicationMonitor updateTrigger="mbean"/>

  <administrator-role>
    <user>admin</user>
  </administrator-role>
  <basicRegistry>
    <user name="admin" password="password"/>
  </basicRegistry>
  <keyStore password="password"/>
</server>
```

Dockerfileは以下のようにします。上記のserver.xmlをイメージに含めることと、必要なフィーチャーの導入を行うだけです。

```dockerfile
FROM websphere-liberty:19.0.0.5-kernel
COPY --chown=1001:0  server.xml /config/
RUN installUtility install --acceptLicense defaultServer
```

## イメージの作成とコンテナの起動

準備ができたので、イメージを作ってコンテナを起動します。ポートを公開します。

```bash
docker build -t myimage:0.0.1 .
docker run -d --rm -p 9080:9080 -p 9443:9443 --name mycon myimage:0.0.1
```

## Eclipseから接続

Eclipseに戻ってコンテナへの接続を行います。Server Viewからサーバーの追加を行います。Server in Docker containerを選択します。Refreshボタンを押すと先ほど起動したコンテナが出てきました。`<administrator-role>`で設定したユーザー、パスワードを入力します。

![スクリーンショット_2019-06-14_21_23_27.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/376039/7ce88511-e745-de60-7f60-528b630b9bd7.jpeg)

ホストのmacOSのディレクトリをマウントして良いのでYesを選択します。

![スクリーンショット 2019-06-14 21.24.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/376039/930acaac-2ca6-5e87-2536-b19000ee6119.png)

アプリケーションを公開します。その都度コンテナを作り直してくれるようです。デバッグモードで起動し直す時も自動的にイメージを作成し直して起動するとことまで自動的に実行されました。

![スクリーンショット 2019-06-14 21.25.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/376039/11029c9a-f7f0-024c-fdca-a5030abeeeae.png)

## 参考

https://www.ibm.com/support/knowledgecenter/ja/SSEQTP_liberty/com.ibm.websphere.wlp.doc/ae/t_creating_server_docker.html
TextFieldに入力した値を辞書型で保存 

TextFieldに入力した値を辞書型で保存して、アプリを再度開いても保存した値が入力されてる状態のアプリを作らないといけないのですが、どのように作ればいいのかがわかりません。

値を読み込み、保存するときに何をつかうか
- 辞書で保存する際にkeyは"fruit"と"vege"の二種類が必要
- 保存時のキーと辞書のキーを混同しないように
作る際にこの条件にそってつくりたいです。
Google ColaboratoryでPythonファイルを実行する

# はじめに
自宅では、Anacondaで環境構築して、統合開発環境（IDE）は「Spyder」を使用していますが、出先でもやりたくなってきたので、Google Colaboratoryを使用することにしました。
## 更新履歴
* 2022/9/10
    * コマンドでのマウントからGUIでのマウントに変更
    * Colaboratoryのtensorflowのバージョンが2に変わったので、tensorflow2向けのコードに修正

# 認証とディレクトリ移動
1. Google Drive上で、Colaboratoryのファイルを作成して、Colaboratoryを起動します。
2. サイドメニューから[ファイル] - [ドライブをマウント]を選択して、アクセス許可を与えます。
![スクリーンショット 2022-09-10 191722.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/438288/7658aba0-41a1-7c92-f934-80b75d06aec2.jpeg)
![スクリーンショット 2022-09-10 191920.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/438288/f32e50ce-eae9-912f-77e0-cae613d4bbae.jpeg)
3. 以下のコードを入力して、作業ディレクトリに移動します。マイドライブの下に「Colaboratory」というフォルダを作っている前提とします。

```Colaboratory：test.ipynb
import os
os.chdir('/content/drive/My Drive/Colaboratory/')
```
確認として、以下を実行します。「Colaboratory」の下においているファイル一覧が表示されれば、OKです。

```Colaboratory：test.ipynb
!ls- la
#「!」を先頭につけることで、Linuxのコマンドが使用できます。
```

# Pythonファイルの実行
Pythonのファイルを作成して、「Colaboratory」フォルダに格納します。
今回はTensorFlowのテストも兼ねて、以下のようにします。

``` Test.py
import tensorflow as tf
from tensorflow.keras.backend import eval

hello = tf.constant('Hello, TensorFlow!')
print(eval(hello))
```

ノートブックでファイル名を指定して、importします。それだけです。

```Colaboratory：test.ipynb
import Test
```

以下のように実行結果が表示されます。

```Colaboratory：test.ipynb：出力
b'Hello, TensorFlow!'
```

# 気をつけないといけない点

## 事例1
「Test.py」をローカルで以下のように書き換えて、Google Drive上のファイルを上書きしたとします。

```変更後：Test.py
import tensorflow as tf
from tensorflow.keras.backend import eval

hello = tf.constant('Hello, TensorFlow!!!!!')
print(eval(hello))
```
出力が`b'Hello, TensorFlow!!!!!!`のように変わっているはず！と思いきや、実行しても何も表示されません。

## 事例2
クラスをつかった場合

``` Test3.py
class Test:
	def test():
		print('Hello, Python!')
```
```Colaboratory：test.ipynb
from Test3 import Test
Test.test()
```
```Colaboratory：test.ipynb：出力
Hello, Python!
```

このPythonファイルを以下のように変更して、Google Drive上のファイルを上書きして実行します。

``` 変更後：Test3.py
class Test:
	def test():
		print('Hello, Python!!!')
```
```Colaboratory：test.ipynb：出力
Hello, Python!
```
出力内容が変わりません。。。
このせいで、1週間くらいはまりました:crying_cat_face:

どうも、一度importすると、Colaboratoryでキャッシュのように覚えているらしく正常に動作しないことがありそうです。
今回は、ローカルで編集して、GoogleDrive上にコピーしましたが、GoogleDrive上で直接Anyfile NotePadなどを使用して編集した場合も同じでした。

## 対策
以下のどちらかで解決しました。
### 対策1
- ノートブックのツールバーの [ランタイム] - [ランタイムの再起動]

※ 再度ディレクトリの移動が必要になります。

### 対策2
読み込み側でreload()をすることで、解決できます。

```Colaboratory：test.ipynb
import Test
import imp
imp.reload(Test)
```


# まとめ
Google Colaboratory非常に便利ですが、ノートブック外でファイルの修正をした場合は、ランタイムを再起動する！というのを習慣づけた方がよさそうです。

Google ColaboratoryのGPUを使用時に、いかに早かったかは次回で！！！
変数について

##変数とは
値を保管して置くための箱のことです。変数に名前を付けて識別することによって値を取り出したり代人することができます。変数を使用することによってどんな時でも使い回すことができます。

###変数の宣言

```javascript
//msgという名前を持った変数を宣言する
var msg;
```

##代入

変数に値を格納することを変数に値を代入すると言います。
値を代入するときはイコール（＝）を使います。

```javascript
//イコールを使用することによってmsg変数に「Hellow word」という文字列を代入するという意味になる
msg = "Hellow word";
```
数学で使うイコール（＝）は左辺と右辺の値が等しいという意味合いで使われるが、プログラミンの世界では**右辺を左辺に代入する**意味合いで使われます。

###別の値を代入

変数には何度でも値を代入することができる。変数が保持できる値は一つなので値が代入されている変数に別の値を代入すると、その変数は新しい値を保持します。つまり、上書きされるということです。

```javascript
var name;

name = '鈴木';
console.log(name);

name = '山田';
console.log(name);
```

###他の書き方で変数に代入する

・変数宣言と代入を一緒にするやり方

```javascript
//個人的にはよく使われる書き方だと思います
var msg2 = "Hellow word";
console.log(msg2);//Hellow word
```

・複数宣言するやり方

```javascript
//あまり使用されない珍しい書き方
var x =1,y = 2,z = 3;
console.log(x + y + z);//6
```

##型
値には型（タイプ）と呼ばれるものが存在します。
javascriptは「基本型」と「オブジェクト型」にわかれてます。

###基本型
文字列　"123456789"
数値　123456789
論理値　true/false

###オブジェクト型
基本型以外の型のこと全ては「オブジェクト型」となる。

配列
関数

###特殊な型
null　値が存在しない
undefined　値が定義されていない

##参考動画
[テックプレイ　変数とは](https://www.youtube.com/watch?v=UUFMWIJwBlA&list=PLjw-30bsJNVUpFTm9FDof8B91uI3iorDH&index=3)
boto3でEC2インスタンスサイズ変更（を自動化）

# 概要

EC2のインスタンスサイズ変更をboto3で変更する方法です。
スクリプトをcronに登録しておけば、インスタンスサイズ変更を自動化できます。

# 環境
- Amazon Linux
- python 2.7.15
- boto3 1.9.169

# 準備
- boto3インストール
- IAMロール作成
- IAMロールを割り当てたIAMユーザ作成
- IAMユーザの認証情報を実行端末のAWSプロファイルに設定済(本記事ではプロファイル名を`Ec2InstanceSizeChangeableUser`としてます）

# 参考情報
- [python - Resizing an EC2 instance using boto3 - Stack Overflow](https://stackoverflow.com/questions/38664328/resizing-an-ec2-instance-using-boto3)
- [インスタンスタイプ - Amazon EC2 | AWS](https://aws.amazon.com/jp/ec2/instance-types/)
- [EC2 — Boto 3 Docs 1.9.169 documentation](https://boto3.amazonaws.com/v1/documentation/api/latest/reference/services/ec2.html)
- [名前付きプロファイル - AWS Command Line Interface](https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/cli-configure-profiles.html)
- [AWSコンソールでのインスタンスID確認]([![Screenshot from Gyazo](https://gyazo.com/4231ca995d50dce31c76ec715771f5cd/raw)](https://gyazo.com/4231ca995d50dce31c76ec715771f5cd))

# IAMロール例
Resourceに"*"（全て）を指定していますが、EC2のARNを指定することで操作可能なインスタンスを制限できます。

- StartInstances インスタンスの開始
- StopInstances インスタンスの停止
- ModifyInstanceAttribute インスタンスサイズ変更
- DescribeInstances/ReportInstanceStatus Wait処理

```
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": [
                "ec2:StartInstances",
                "ec2:StopInstances"
            ],
            "Resource": "arn:aws:ec2:*:*:instance/*"
        },
        {
            "Sid": "VisualEditor1",
            "Effect": "Allow",
            "Action": [
                "ec2:ModifyInstanceAttribute",
                "ec2:DescribeInstances",
                "ec2:ReportInstanceStatus"
            ],
            "Resource": "*"
        }
    ]
}
```

# スクリプト

```python:modify_ec2_instance_size.py
import boto3
import sys
from boto3.session import Session

args = sys.argv

if len(args) <= 1:
    print('引数でインスタンスタイプを指定してください｡例.t3.micro')
    sys.exit()

INSTANCE_ID = 'i-XXXXXXXXXXX'
NEW_INSTANCE_SIZE = args[1] # eg. t3.micro, t3.medium(2/4GB), t3.large(2/8GB)
PROFILE = 'Ec2InstanceSizeChangeUser'

print('instance id=[{}] instance type=[{}] profile=[{}]'.format(INSTANCE_ID, NEW_INSTANCE_SIZE,PROFILE))

session = Session(profile_name=PROFILE)
client = session.client('ec2')

# Stop the instance
print('stopping ...')
client.stop_instances(InstanceIds=[INSTANCE_ID])
waiter=client.get_waiter('instance_stopped')
waiter.wait(InstanceIds=[INSTANCE_ID])

# Change the instance type
print('changings...')
client.modify_instance_attribute(InstanceId=INSTANCE_ID, Attribute='instanceType', Value=NEW_INSTANCE_SIZE)

# Start the instance
print('staring...')
client.start_instances(InstanceIds=[INSTANCE_ID])
```
テスト5


```vb

Sub DBへCSV取込()
 '--------------------------------------------------------------------------------
 '初期設定
 '参照設定で「Microsoft ActiveX Date Objects 6.1 Library」にチェックを入れる
 
Dim cn As New ADODB.Connection
Dim rs As New ADODB.Recordset
Dim ConectString As String
Dim accApp As Object
Dim CSVfile As String
Dim strFileName As String
strFileName = "データベース4.accdb" 'データベースのファイル名

 '---------------------------------------------------------------------------------
 'Accessに接続( 注意：Data と Source の間に半角スペースを入れる)
ConectString = "Provider=Microsoft.ACE.OLEDB.12.0;Data Source=" & _
                        ThisWorkbook.Path & "\" & strFileName & ";" 'Accessファイルに接続

cn.Open ConectString

'(クエリを操作したい場合は、Sourceの所にクエリ名を入れる)
rs.Open Source:="テーブル1", _
             ActiveConnection:=cn, _
             CursorType:=adOpenKeyset, _
             Locktype:=adLockOptimistic
 
 '一度テーブルのデータを全て削除する(テーブルの構造を残したまま削除する)
 strSQL = "DELETE * FROM テーブル1"
 cn.Execute strSQL
 
 '---------------------------------------------------------------------------------
  '接続したAccessのテーブル1に順番にCSVファイルをインポートしていく。
 
DBfile = ThisWorkbook.Path & "\" & strFileName
CSVfile = ThisWorkbook.Path & "\" & "accessテスト用1.csv"
 
 Set accApp = GetObject(DBfile)

'Accessの指定のプロシージャを実行(予めAccessに標準モジュールとプロシージャをつくっておく必要がある)
accApp.Run "CSV読込"
accApp.Quit
MsgBox ("Excelのデータを取り込みました。")
 
 '---------------------------------------------------------------------------------
 
rs.Close
cn.Close

End Sub

'-------------------------Accessの標準モジュール---------------------------------
Sub CSV読込()

Dim CSVfile  As String
Dim FSO As Object, f As Variant

Set FSO = CreateObject("Scripting.FileSystemObject")
For Each f In FSO.GetFolder(Application.CurrentProject.Path).Files

    If FSO.GetExtensionName(f.Path) = "csv" Then
    
        CSVfile = Application.CurrentProject.Path & "\" & f.Name
        DoCmd.TransferText acImportDelim, , "テーブル1", CSVfile, True
    
    End If

Next

End Sub

Sub 検査()
'---------------------------------------------------------------------------------
'フォーマットが変わっていないかの検査用コード
If Sheets("Sheet4").Range("A4").Value <> "" Then

    For Each c In Range("A6:E6")
    
        If c.Value = "" Then
            MsgBox "確認をお願いします。"
            End
        End If
    
    Next
    
Else

            MsgBox "確認をお願いします。"
            End

End If

If Sheets("Sheet4").Range("F6").Value <> "" Then
    MsgBox "確認をお願いします。"
    End
End If
'---------------------------------------------------------------------------------
MsgBox "OK"

End Sub

```
【Brackets】Emmetをカスタマイズ　👉　php雛形出力


#BracketsのEmmetにphp雛形を出力してくれる物が無い
Emmetの編集方法は下記にて。
https://www.granfairs.com/blog/staff/efficiency-by-emmet-01

shippets.json の675行目に改行を入れて下記を入れる。

```shippets.json
676  "php":"<?php\n\t|\n?>",
```

そうするとphpの雛形が出力できる。

```index.php
1  <?php
2    
3  ?>
```

出力させるに当たって下記のjsonファイルの書き方についても参考にしました。
https://www.sejuku.net/blog/80855

色々とカスタマイズすればどんどん描くスピードは早くなりそうなので試していきたいと思います！！
【Windows Server 2012 R2】Remote Desktop ブローカー サーバー利用時に特定のサーバにリモート接続する方法

# はじめに
RDブローカーサーバによって管理された複数台のRDサーバに接続する方法です。

この機能で管理されたサーバにリモートデスクトップ接続をしようとすると、
管理者ですら振り分けられ、望んだサーバにログインすることができません。

前にこの問題で2日潰したことを思い出したので、備忘で書きます。

(かなりニッチな記事なので、自分でも見返すことはないと思いますが。。。)

# 結論
・mstsc /adminで管理セッションを用いてRDサーバへログインする。

[Win] + [r]でファイル名を指定して実行を開き、

```
mstsc /admin
```
でリモートデスクトップ接続を開いてください。
ログインユーザは対象のサーバのAdministratorsグループに所属している必要があります。
あとは通常どうりログインするだけです。

## 参考
https://support.microsoft.com/ja-jp/help/947723/changes-to-remote-administration-in-windows-server-2008

# 終わりに
潰した2日のうちの7割はMSのドキュメントの見づらさが原因だと思ってます。
OpenOffice Calc のソルバーを非線形解析に対応させる

OpenOffice Calc の標準ソルバーでは、非線形の解析ができないので、SUNの提供する機能拡張をインストールする。

⓵WindowsにJavaのランタイム（https://www.java.com/ja/download/）をインストールする。（機能拡張時にJavaが必要）

②OpenOfficeのツール～機能拡張マネージャー～「ほかの機能拡張をオンラインで取得...」からサイトで「Solver for Nonlinier Programing 0.9」をダウンロード

![OpenOfficeExtensions.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/438457/c3e9b016-6560-39c1-660e-b116475ffe5e.jpeg)

![searchExtention.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/438457/dde1ae3f-009a-f35c-d981-fb20d01d3040.jpeg)


③機能拡張マネージャーの「追加」ボタンから、ダウンロードした機能拡張ファイル「nlpsolver.oxt」を選択する。
![Solver機能拡張.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/438457/225c21d6-157f-f986-59b1-c91089859477.jpeg)
Rails webpackerによるReact導入

個人のメモ用です。
#gem: webpackerの追加とインストール
githubのgemをコピペ
[rails/webpacker-github](https://github.com/rails/webpacker)

```
gem 'webpacker', '~> 4.x'
```

yarnが勝手にやってくれます。
yarnをインストールしていなければ、Homebrewなどでインストールをたしかしないと行けなかったかな？

```
$bundle
$bundle exec rails webpacker:install
```

#Reactの導入
新しくプロジェクトを作るなら

```
$rails new myapp --webpack=react
```

既存のプロジェクトに導入するなら

```
$bundle exec rails webpacker:install:react
```
layouts/application.html.erbに一行追加する

```erb:layouts/application.html.erb
<head>
    <title>ReactIine</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag    'application' %> #この一行を追加
</head>
```

#gem: react-railsの追加とインストール

```
gem 'react-rails'
```

Reactのコンポーネントを作成することができるようになるコマンドかな

```
$bundle
$rails generate react:install
```

これで準備完了です！！

#最初のコンポーネントを作成
ちゃんと出来ているかテストするために、
コマンドラインでHelloWorldというコンポーネントを作ります。

```
$rails g react:component HelloWorld greeting:string
```
app/javascript/components/HelloWorld.jsに以下の用なファイルが出来ます。

```react:javascript/components/HelloWorld.js

import React from "react"
import PropTypes from "prop-types"
class HelloWorld extends React.Component {
  render () {
    return (
      <React.Fragment>
        Greeting: {this.props.greeting}
      </React.Fragment>
    );
  }
}

HelloWorld.propTypes = {
  greeting: PropTypes.string
};
export default HelloWorld
```

どこのビューでもいいので以下のコードを付け加えます。
今回はわかりやすいようにapplication.html.erbに貼ります。

```erb:layouts/application.html.erb
<%= react_component("HelloWorld", { greeting: "Hello from react-rails." }) %>
```

Greeting: Hello from react-rails.と表示されれば、テスト完了です！！
BashでマネージドIDを使いAzure KeyVaultを操作（VMからKeyVaultのSSL証明書を取得するBashスクリプト付き）



詳しくは [Azure VM 上で Azure リソースのマネージド ID を使用してアクセス トークンを取得する方法](https://docs.microsoft.com/ja-jp/azure/active-directory/managed-identities-azure-resources/how-to-use-vm-token) をお読みください。


### 前提

- マネージドIDを有効にしてある状態
- KeyVaultに対するアクセスポリシーは適宜許可してある状態
- CentOS 7上での実行を想定(Bash,curl,Python 3があるLinuxであれば動くはず)

以下、BashでSecret値を得る例。Bashだけど、肝はHTTP通信なので同じ操作なら言語は何でも良いです。

```
# KeyVaultの適宜いい感じに設定する
KEYVAULT_NAME=your-keyvault-name
SECRET_NAME=your-secret-name

# アクセストークンを得る
ACCESS_TOKEN=$(curl --fail -H "Metadata: true" "http://169.254.169.254/metadata/identity/oauth2/token?resource=https://vault.azure.net&api-version=2018-02-01" | python -c 'import sys,json; print(json.load(sys.stdin)["access_token"])')

# KeyVaultのSecretなURLを作る(secretsの部分は適宜keysやcertificatesに置き換えて良い)
SECRET_URL="https://${KEYVAULT_NAME}.vault.azure.net/secrets/${SECRET_NAME}/?api-version=2016-10-01"

# 値を得る
curl --fail -Lv -H "Authorization: Bearer $ACCESS_TOKEN" "$SECRET_URL" | python -c 'import sys,json; print(json.load(sys.stdin)["value"])'
```



### 解説

AzureではVM等から `http://169.254.169.254/metadata/identity/oauth2/token` というエンドポイントにアクセスすると、アクセストークンが得られる仕組みになっています。
ただ、レート制限が結構厳しいので、適当に連打するような事はないように注意しましょう。実運用するときは、アクセストークンを使いまわす（有効期限切れを考慮する）、1時間に1回使うだけにする、ちゃんとリトライを入れる、など少し考える必要があります。

次に、`Metadata: true` というヘッダはSSRF対策につける必要があります。SSRFについては徳丸先生のBlog記事が詳しいです。

https://blog.tokumaru.org/2018/12/introduction-to-ssrf-server-side-request-forgery.html

万が一、外部から来るデータ(リクエストデータやURL入力欄などテキストデータ等)を接続先に使いつつ`Metadata: true`ヘッダを使ってリクエストを行うようなアプリを動かす場合は、SSRF対策出来ているか少し考慮する必要があります。そんなにないと思いますが。

次に、`resource=https://vault.azure.net`という所でどのリソースに対する操作かを指定しています。`https://vault.azure.net`はKeyVaultを指します。
もし、Azureのリソース操作を行いたい場合は`resource=https://management.azure.com/` という形になります。この時**末尾のスラッシュ1文字の漏れも許してくれない**ので注意しましょう。
詳しくは[Azure リソースのマネージド ID をサポートするサービス](https://docs.microsoft.com/ja-jp/azure/active-directory/managed-identities-azure-resources/services-support-managed-identities)あたりをお読みください。他のクエリパラメータは[環境によっては必須になります](https://docs.microsoft.com/ja-jp/azure/active-directory/managed-identities-azure-resources/how-to-use-vm-token#get-a-token-using-http)ので適宜確認します。



### 使用例

これを書きたいだけだったので、実質本編

Nginx向けにKeyVaultで管理しているSSL証明書+秘密鍵をVM上に保存するバッチスクリプト（nginx.conf付）

https://gist.github.com/fukasawah/56edff292ebe725b695649a2b823e47b

KeyVault上ではsecretsでPFX(PKCS12)で記録されているので、それをopensslで紐解いて配置するだけのスクリプトです。VM上に適当に配置して1日1回Cronで回しておけばよいでしょう。

PassPhraseがある場合は、opensslコマンドにある"Pass:"の部分を"Pass:password"となるようにします。（そこもkeyvaultから取るようにすると尚よい）

配置された秘密鍵はパスフレーズ無しになるので、困る場合は何か考えてください。
【Java？】Unicodeなプロパティーファイルをちょっと覗きたい【文字化け？】

# INDEX
- 概要
- 確認した環境
- やってみた

# 概要
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">一時期propertiesファイルをUTF-8で書けるように実装した事あったけど、他のメンバーにUTF-8のファイルをASCIIに替えられまくるのでやめたω<a href="https://twitter.com/hashtag/%E7%A4%BE%E7%95%9C%E3%81%A1%E3%82%83%E3%82%93%E5%8F%B0%E8%A9%9E%E3%83%A1%E3%83%BC%E3%82%AB%E3%83%BC?src=hash&amp;ref_src=twsrc%5Etfw">#社畜ちゃん台詞メーカー</a> <a href="https://t.co/rHdsYHelTL">https://t.co/rHdsYHelTL</a> <a href="https://t.co/RKRwlrc1C2">pic.twitter.com/RKRwlrc1C2</a></p>&mdash; まあにい (@mahny_b) <a href="https://twitter.com/mahny_b/status/1139862648210612224?ref_src=twsrc%5Etfw">June 15, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

- 結構こういう問い合わせはあってその都度教えてたりする
    - 設定を見たら文字化けしているぞ
    - 設定をvimで書き換えたらエラーが大量発生するようになって動かなくなった
- Javaシステムのこの辺の仕様は独特だと思うのである程度しょうがないけど、運用さん用のマニュアルには書いておいた方がいいよなーと思っています

# 確認した環境
- Windows 8.1
- Oracle JDK 1.8.0_182

# やってみた
## お題のプロパティーファイル

```
> type hoge.properties
# \u4ffa\u306e\u982d
hage=\u30d4\u30ab\u30fc
>
```

## 読む時のコマンド

```
> native2ascii -reverse hoge.properties
# 俺の頭
hage=ピカー
>
```

## あとがき
実はこの記事、半年近く下書きで埋もれていました。
もっと凄い事かかないとQiitaに投稿するのも申し訳ないなとか思ってたけど、エンジニアなのに全然アウトプットできなくなるので、これからは気にしないようにしたい。
【fontbonb】たった2行でWebページを爆破しよう

[未来電子テクノロジー株式会社](https://www.miraidenshi-tech.jp)でインターンをしている文系大学一回生です。
JavaScriptで面白い機能が実装できたのでご紹介します。

##1.HTMLを適当に書く
```html
<!DOCTYPE html>
<html lang="ja">

  <head>
    <meta charset="utf-8">
    <title>fontbonb</title>
  </head>

  <dody>
    <p>あああああああああああああああああああああああああああああああ</p>
    <p>あああああああああああああああああああああああああああああああ</p>
    <p>あああああああああああああああああああああああああああああああ</p>
    <p>あああああああああああああああああああああああああああああああ</p>
    <p>あああああああああああああああああああああああああああああああ</p>
  </dody>
```

##2.javascriptを2行追加する

```html
<!DOCTYPE html>
<html lang="ja">

  <head>
    <meta charset="utf-8">
    <title>fontbonb</title>
    <!-- 1行目を追加　-->
    <script type="text/javascript" src="http://use.typekit.com/qcc5ovd.js"></script>
  </head>

  <dody>
　　 <p>あああああああああああああああああああああああああああああああ</p>
    <p>あああああああああああああああああああああああああああああああ</p>
    <p>あああああああああああああああああああああああああああああああ</p>
    <p>あああああああああああああああああああああああああああああああ</p>
    <p>あああああああああああああああああああああああああああああああ</p>
    <p>あああああああああああああああああああああああああああああああ</p>
    <!--2行目を追加 -->
    <p><a href="javascript:(function () {var s = document.createElement('script');s.setAttribute('src', 'http://fontbomb.ilex.ca/js/main.js');document.body.appendChild(s);}());"><strong>Fontbomb</strong></a></p> 
　　</dody>
```
ポイントは、1行目をheadタグ内に、2行目をbodyタグ内に追加することです。

##3.ブラウザで確認
<img width="529" alt="スクリーンショット 2019-06-15 20.58.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402245/64c70a5a-0012-7476-d5ec-a19a4da8f2ff.png">
Fontbombと書かれたリンクをクリックした後にもう一度他の場所をクリックすると、文字を爆破できます。

たった2行でストレス発散できるのでコスパは最高です。
暇な方はぜひ試してみてはいかかでしょうか？
Python初心者向け、あまり教えて貰えない三種の神器

## 概要

## タイプヒント

変数にタイプヒントを指定するとIDEで補完が更に効くようになる。

```python
# 普通（hogeはstringの補完が効くようになる）
hoge: str

# 関数
# a,bはstringの補完が効くようになる
# hogeのreturnを受け取った変数はstringの補完が効くようになる
def hoge(a: str, b: str) -> str:
    pass
```

## 複数return

returnの値を複数返せる。

```python
def hoge():
    return 100, 200

a, b = hoge()

# aに100, bに200が入る
```
## sys.path

Python版ビルドパス。
importができない場合、ここにパスの指定が入っていない。
`sys.path`に直接appendしても良いし、環境変数PYTHONPATHでも追加可能。

```bash
# /gg の中に hoge.pyがあるとして、↓の状況だと、※hoge.pyの中は print('auaua')
>>> import sys; sys.path # 見やすいように出力結果整形済
[
'', '/usr/local/lib/python37.zip', 
'/usr/local/lib/python3.7',
'/usr/local/lib/python3.7/lib-dynload', '/usr/local/lib/python3.7/site-packages'
]

# hogeのimportは失敗する
>>> import hoge
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
ModuleNotFoundError: No module named 'hoge'
```

```python
# sys.pathに/ggを追加すると、(export PYTHONPATH=/gg も可　※winだとset PYTHONPATH=/gg)
sys.path.append('/gg')
>>> import sys; sys.path # 見やすいように出力結果整形済
[
'', '/usr/local/lib/python37.zip', 
'/usr/local/lib/python3.7',
'/usr/local/lib/python3.7/lib-dynload', '/usr/local/lib/python3.7/site-packages', 
'/gg'
]

# importできる
>>> import hoge
auaua
```
MarshalJSON で無限ループが発生した時に調べた内容と対処方法

# TL;DR

```go
import "encoding/json"

type User struct {
	Id int64
	Name string
}

func (u User) MarshalJSON() ([]byte, error) {
	type __user User
	return json.Marshal(__user(u))
}
```

`MarshalJSON()` を持った状態だと無限ループするので、別で宣言し変換してから `json.Marshal()` に渡す

# はじめに
本稿は Go 1.12 で動作確認した内容になります

# なんで発生したの?

```go
import "encoding/json"

type User struct {
	Id int64
	Name string
}

func (u User) MarshalJSON() ([]byte, error) {
	// 処理

	return json.Marshal(u)
}
```

とある処理を加えてから JSON として出力しようとしたら無限ループに…

# どういう条件でループに入るか試してみた

```go
import "encoding/json"

type User struct {
	Id int64
	Name string
}

// パターン1: 発生しない
func (u User) MarshalJSON() ([]byte, error) {
	return json.Marshal("string")
}

// パターン2: 発生しない
func (u User) MarshalJSON() ([]byte, error) {
	return json.Marshal(struct{ Test string }{Test: "dummy"})
}

// パターン3: 発生する
func (u User) MarshalJSON() ([]byte, error) {
	return json.Marshal(u)
}
```

最初は `json.Marshal()` に構造体を渡すのがダメかと思ったんですが、そうじゃないのがパターン 2 でわかった

# encoding/json のソースコード読んでみた
https://github.com/golang/go/blob/release-branch.go1.12/src/encoding/json/encode.go#L444
そもそも `MarshalJSON()` がどこで呼ばれてるのか調べてみると `marshalerEncoder` / `addrMarshalerEncoder` のどちらかみたい

`Marshal() (encoding/json.go)` -> `MarshalJSON() (書き手のソースコード)` -> `Marshal()` -> `MarshalJSON()` ...
といった流れになってそう

https://github.com/golang/go/blob/release-branch.go1.12/src/encoding/json/encode.go#L157
実際の処理を追ってみる
`json.Marshal()` の処理はここから始まって

https://github.com/golang/go/blob/release-branch.go1.12/src/encoding/json/encode.go#L334
ここで型別に処理が変わってる

https://github.com/golang/go/blob/release-branch.go1.12/src/encoding/json/encode.go#L392
`newTypeEncoder()` 内の `if t.Implements(marshalerType) {}` あたりで引っかかって `marshalerEncoder` の処理に入ってそう

# 試してみた

```go
package main

import (
	"encoding/json"
	"fmt"
	"reflect"
)

type TestA struct {
	Test string
}

type TestB struct {
	Test string
}

func (t TestB) MarshalJSON() ([]byte, error) {
	return json.Marshal(t)
}

type TestBdash TestB

func main() {
	a := TestA{"dummy"}
	b := TestB{"dummy"}
	marshalerType := reflect.TypeOf((*json.Marshaler)(nil)).Elem()

	// false
	fmt.Println(reflect.ValueOf(a).Type().Implements(marshalerType))
	// true
	fmt.Println(reflect.ValueOf(b).Type().Implements(marshalerType))
	
	bdash := TestBdash(b)
	// false
	fmt.Println(reflect.ValueOf(bdash).Type().Implements(marshalerType))
}

```

[playground](https://play.golang.org/p/JkhKPm4kFis)

やっぱり `MarshalJSON()` を持つ構造体だと `if t.Implements(marshalerType) {}` で `true` になる
そこで[最初](#tldr)に書いた結論に至ったという感じ

# おわりに
Go 歴短かいけど、読みやすいおかげでバグの当たりをつけやすかった
Python+OpenCVで画像解析(画像に写っている星を検出)

##はじめに
[Pythonを使って星を数えてみよう](https://note.mu/kamonoha_iro/n/n6e38e0f52dd9)
↑のnoteで使用したコードについて説明していきます。
下のコードは**「（練習）いちごの検出、カウント」**で使用したものです。

```python:バージョン
Python 3.7.1
OpenCV 3.4.2
numpy 1.15.4
matplotlib 3.0.2
```

```python:（練習）いちごの検出、カウント
import cv2
import numpy as np
import matplotlib.pyplot as plt

imageGRAY = cv2.imread("strawberry.jpg", cv2.IMREAD_GRAYSCALE)
imageBGR = cv2.imread("strawberry.jpg", cv2.IMREAD_COLOR)

blur = cv2.GaussianBlur(imageGRAY, (59, 59), 0)
ret1, th1 = cv2.threshold(blur, 0, 255, cv2.THRESH_BINARY_INV + cv2.THRESH_OTSU)

image, contours, _ = cv2.findContours(th1.astype(np.uint8), cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_NONE)

frame = cv2.drawContours(imageBGR, contours, -1, (0,0,0), 10)
cv2.imwrite("/Users/ユーザー名/保存先/保存したい画像の名前", frame)

count = []
for i in contours :
    x = 0
    y = 0
    for n in i :
        x += n[0][0]
        y += n[0][1]
    count.append([x/len(i), y/len(i)])
count = np.array(count)

print("結果 : " + str(len(count)) + "個")
```

##１．画像を読み込む

```python
#グレースケール化して画像を読み込む
imageGRAY = cv2.imread("strawberry.jpg", cv2.IMREAD_GRAYSCALE)
#カラー画像を読み込む
imageBGR = cv2.imread("strawberry.jpg", cv2.IMREAD_COLOR)
```
cv2.imread関数を使って画像を読み込みます

cv2.imread()では画像はBlue,Green,Redの順で読み込まれますが、
matplotlibはRed,Green,Blueの順で画像を解釈するので注意してください。
※cv2.cvtColor(画像, cv2.COLOR_BGR2RGB)でBGR→RGBに変換できます
##２．画像をぼかす（前処理）

```python

blur = cv2.GaussianBlur(imageGRAY, (59, 59), 0)
```
cv2.GaussianBlur関数を使って画像をぼかします。
今回行った星を検出するような際にはこの処理は行いません。

##３．閾値処理で２値化（前処理）

```python

ret1, th1 = cv2.threshold(blur, 0, 255, cv2.THRESH_BINARY_INV + cv2.THRESH_OTSU)
```
cv2.threshold関数を使って画像を閾値処理して２値化します。
この関数は２つの出力を返します。１つ目（ret1）が閾値で、２つ目（th1）が２値化された画像になります。

また閾値処理の方法として「cv2.THRESH_BINARY_INV」と「cv2.THRESH_OTSU」の２種類を使用しました。

##４．物体の輪郭を検出する

```python

image, contours, _ = cv2.findContours(th1.astype(np.uint8), cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_NONE)
```
cv2.findContours関数を使って輪郭を検出します。
（注：入力画像はNumPy配列しか受け取らないのでnp.uint8型に変換）

返り値であるcontoursには抽出された輪郭のリストが返されます。
##５．検出した輪郭を写真に描画
```python
frame = cv2.drawContours(imageBGR, contours, -1, (0,0,0), 10)
cv2.imwrite("/Users/ユーザー名/保存先/保存したい画像の名前", frame)
```
cv2.drawContours関数を使って写真に抽出した輪郭を描画します。
全輪郭を描画したい場合は第３引数に−１を指定します。
##６．各輪郭の重心を求めて座標としてリスト(count)に追加

```python

count = []
for i in contours :
    x = 0
    y = 0
    for n in i :
        x += n[0][0]
        y += n[0][1]
    count.append([x/len(i), y/len(i)])
count = np.array(count)
```
append()を使ってリストの末尾に座標を追加していきます。
##７．個数を表示
```python

print("結果 : " + str(len(count)) + "個") 
```
##（補足）matplotlibでグレースケール化した画像を表示
```python

plt.imshow(imageGRAY,'gray') #matplotlibは疑似カラーに自動で表示するため灰色を指定
plt.colorbar() #カラーバーを表示
plt.xticks([]) #[]でグラフのX軸を非表示
plt.yticks([]) #[]でグラフのY軸を非表示
plt.show() #画像を表示
```
DOMとはなにか大体わかる記事


#そもそもDOMって何の略？

**A、Document Object Model**

それぞれの頭文字をとって、DOMという訳である。

日本語に直すのなら、
**「文章(Document)を、物(Object)として扱う、枠組み(Model)」**
となる。

#DOMの使われ方

**DOMとは主にJavaScript等の言語とWEBページを繋いでくれる仕組み。**
つまり、ウェブページ上のデータに介入にてほにゃららしたいのなら、DOMと向き合う事を考えなくてはならなくなる。

ブラウザ上の(HTML上の)文字の大きさを変えたり、色を変えたり、消したり、増やしたり、追加したりする動作をする為のもの。
ある部分だけ指定して変更を加えられるための取り決めとも言える。

後述するが、階層構造になっている性質から、指定したノードから見た別の場所のノード情報を取り出すなんて事も可能になる。

#DOM周りのキーワード

ここからはDOMの周りで聞くキーワードを紹介します。

##ノード
DOMでは、HTMLの要素1つ1つをノードと呼称する。
\<body>も、\<main>も、\<p>も、\<span>もそれぞれがノードである。

###親ノード/子ノード

親ノードは、そのノードの分岐元のノードの事。
子ノードは、そのノードの配下にあるノードの事。

例えば、

```HTML:test.html

<body>
   <p>test</p>
</body>
```

というHTMLがあれば、

・\<p>は\<body>の子要素。
・\<body>は、\<p>の親要素。

という関係になる。


###ルートノード

あるノードの元祖の親元になっているノードの事。
枝分かれになった子ノードの始まり部分のノードを指すので、ある意味アダムとイブ的なノードと言える。

##階層構造
DOMにおける、HTMLの扱い方・捉え方

HTMLは階層的な構造をしているととらえることができる。
例えば<body>の子に、\<main>が来て、その子に\<p>が来ると言った感じ。
空力音数値計算のための基礎知識1

# 空力音
風が吹いて木に当たると木枯らしの音がする。
楽器に息を入れると音が鳴る。
自動車に乗ると風切り音が聞こえる。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341350/91b6d7ff-1df1-2402-1d6d-0925bd62818d.jpeg" width="300">


空気が流れて物体に作用することで、きれいな音から不快な騒音まで様々な音が発生する。この音のことを「空力音」（もしくは流体音など）という。

どのような音が発生するかは、
* 流れの条件（流速、方向など）
* 物体のカタチ
によって変化する。

たとえば、同じ楽器を吹いても、うまい人が吹けばいい音が鳴るし、初心者が吹けば音が鳴らないこともある。カタチが同じでも、流れ（息）の条件によって、音が変わる。

また、同じ人でも違うメーカの楽器を吹けば、違う音色になる。流れ（息）の条件は同じでも、カタチ（楽器形状）によって音が変わる。

目的の音を出すために、どのようなカタチに設計したら良いか？
どのように流れをコントロールしたら良いか？

それを明らかにするために、空力音響学の世界では、理論、実験、数値計算、機械学習等によって様々な研究がなされてきている。

# 流れと音の相互作用

* 流れと音が相互作用が重要な現象

    フルートやリコーダーでは、息を入れると音が発生する。ここまでは誰もが知っているが、実はそれで終わりではなく、発生した音が息の流れに影響を与えている。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341350/657bb013-0d11-81fe-30c2-a1b8042b832b.jpeg" width="300">


    楽器から音が鳴っているとき、管内では定在波が発生していて、圧力がわずかに高くなったり低くなったりを繰り返しており、それによって空気の密度がわずかに「疎」⇔「密」に変動している。

    このような、圧力変動に伴う密度変動のことを「流体の**圧縮性**」という。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341350/dbbc6d29-9a98-08fc-adf3-238d72afcfdc.jpeg" width="400">

    定在波による空気変動の影響を受けて、息の流れは上下に振動する。そして息が管から出たり入ったりすることで定在波が影響を受ける。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341350/c0e51ca4-e89d-6a33-59a4-efff3e34e9a2.jpeg" width="400">


    このように、フルートやリコーダーでは、流れと音が相互作用（連成）している。![流れと音の連成.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341350/f62d3dd9-65b9-3ec1-35f2-2531af39ff65.jpeg)



* 流れと音が相互作用が重要でない現象

    しかし、すべての空力音で流れと音の連成が重要なわけではない。音が流れにほとんど影響しない場合は、連成を考慮する必要は無い。

    たとえば、自動車の風切り音のように、流れによる空気変動に対して音による空気変動がわずかな場合は、音による流れの変化を無視できる。この場合、自動車まわりの流れがどうのようになるかは、流体の圧縮性を無視し、**非圧縮性流体**と仮定して考えることができる。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341350/f965da1c-8621-2a37-b919-e24ae6e18261.jpeg" width="400">


# 数値計算手法
* 流れと音の連成が重要な場合

    流れと音を同時に解く必要がある。

    そのため、流体を圧縮性流体として扱い、圧縮性流体の支配方程式に基づいて、流れと音を計算する。

* 流れと音の連成が重要でない場合

    流れと音を別々に解くことができる。

    その場合、流体を解くときは、音を考える必要が無いので、流体を非圧縮性流体として扱い、非圧縮性流体の支配方程式に基づいて流れを計算する。
    
    ただし、非圧縮性流体では音が発生しない。そこで、流れからどのような音が発生するかは、流れの状態から音の発生と伝播を予測する方程式（Lighthill方程式など）を用いて計算する。

まとめると、以下のようになる。![まとめ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341350/a56d23f8-28e0-c276-a0d1-b5b470c55566.jpeg)
PHP7.4をDocker環境で動かす

2019/06/13に、[PHP 7.4.0 alpha 1](https://php.net/archive/2019.php#id2019-06-13-1)がリリースされました。
[ダウンロードページ](https://downloads.php.net/~derick/)が公開されていますが、これはソースからのインストールになるため、ビルド環境を整えるのが面倒です（自分は断念した）
そのためDocker環境でPHP7.4を動作させてみました。

## Docker Hubを確認
phpイメージのDocker Hubを確認すると、`7.4`のタグがこの記事を書いた時点（2019/06/15）ではまだありません。出たばかりのためまだ公開されていないようです。
https://hub.docker.com/_/php

## GitHubリポジトリを確認
そこでphpイメージのGitHubリポジトリ、[docker-library/php](https://github.com/docker-library/php)を確認すると`7.4-rc`というフォルダがあり、ここにPHP7.4のDockerfileが追加されています。

以下のPRで、7.4の環境を追加してくれたようです。感謝:clap:
https://github.com/docker-library/php/pull/840

## Dockerfileからビルド
https://github.com/docker-library/php/blob/master/7.4-rc/stretch/cli/Dockerfile がcli版の7.4のDockerfileで、今回はこれをビルドしてみます。
GitHub上のDockerfileをビルドするコマンドは、[こちらのページ](https://docs.docker.com/engine/reference/commandline/build/#build-with-url
)を参考にしました。以下のようなコマンドでビルドできます。

```
$ docker build -f 7.4-rc/stretch/cli/Dockerfile -t php74 github.com/docker-library/php
```

## PHP7.4を実行
ビルドしたイメージからコンテナを起動すると、対話シェルでphpが起動します。

```
$ docker run -it --rm php74
Interactive shell

php > 
```
[phpversion](https://www.php.net/manual/ja/function.phpversion.php) で実行されているバージョンを取得してみると`7.4.0alpha1` と表示され、7.4が実行されていることが確認できます。

```
php > echo phpversion();
7.4.0alpha1
php > 
```
ついでに7.4で新しく追加された構文、[Arrow Functions 2.0](https://wiki.php.net/rfc/arrow_functions_v2)も実行できました！

```
php > $y = 1;
php > $fn1 = fn($x) => $x + $y;
php > echo $fn1(3);
4
php > 
```
【Ma_gician #01】 世界中のフロントエンダーの残業時間を減らす、新しい JavaScript フロントエンドフレームワーク

## 読み方

* Ma_gician 「マジシャン」

## どういうもの？

* 新しいアーキテクチャで作られた JavaScipt フロントエンド フレームワーク

---

## 特徴は？

* 極端に少ないコード量で動作可能。

---

## どこで見られるの？

* ソースコードと正式名称は未公開です。  
（2019/09/25時点）

## マイルストーン

* 令和元年内にオープンソース化

---

## キャッチコピー

* 世界中のフロントエンダーの残業時間を減らす

## 当初は

* 世界中のフロントエンダーを jQuery の記法から解放する

---

## デモ

* Vue.js で書かれたリアクティブなコードを見てみましょう。

---

```HTML:Vue.jsのリアクティブなコード
<script src="assets/js/vue-2.5.21"></script>

<div id="component">
  <input v-model="message">
  <p>Message = {{ message }}</p>
</div>

<script>
  new Vue({
    el: '#component',
    data: { message: '' }
  })
</script>
```

---

## Ma_gician で書き替え

1. `new Vue` が書かれている `<script>` を削除
2. ライブラリの読み込みを `vue-2.5.21` から `ma_gician` に変更
3. `<div id="component">` の `>` の直前に `::` を追加

これだけ。

* Lightning Talk などでは、ここでライブコーディングします

---

```HTML:Vue.jsのリアクティブなコード
<script src="assets/js/vue-2.5.21"></script>

<div id="component">
  <input v-model="message">
  <p>Message = {{ message }}</p>
</div>

<script>
  new Vue({
    el: '#component',
    data: { message: '' }
  })
</script>
```

---

```HTML:Ma_gicianのリアクティブなコード
<script src="assets/js/ma_gician"></script>

<div id="component" ::>
  <input v-model="message">
  <p>Message = {{ message }}</p>
</div>
```

---

## 結論

* Ma_gician で記述すると、コード量が減る
* コード量が減れば、バグの可能性も減る
* バグが減れば、作業時間も減る
* 作業時間が減れば、残業時間も減る

Q.E.D.

---

## Ma_gician を作った人

* 名前: Stew Eucen
* 国籍: 日本

## SNS

* Twitter: [@StewEucen](https://twitter.com/StewEucen) 
* Facebook: [Stew Eucen](https://www.facebook.com/stew.eucen)
機械学習・Pythonについて学習した内容 【随時更新】

# はじめに
大学・大学院時代に機械学習(ニューラルネットと遺伝的アルゴリズム)の研究をしていました。卒業して10ン年、世の中では機械学習がブームになっているのに、業務で関われそうにないので、自力で勉強を始めることにしました。

10ン年たって、忘れてしまっているので、ほぼ一からの勉強です。


# 機械学習
以下の順番で、参考書を読んで勉強しています。

1. [ディープラーニングがわかる数学入門](https://www.amazon.co.jp/dp/product/477418814X/ref=as_li_tf_tl?camp=247&creative=1211&creativeASIN=477418814X&ie=UTF8&linkCode=as2&tag=bookmeter_book_middle_detail_pc_login-22)
2. [あたらしい人工知能の教科書](https://www.amazon.co.jp/dp/product/4798145602/ref=as_li_tf_tl?camp=247&creative=1211&creativeASIN=4798145602&ie=UTF8&linkCode=as2&tag=bookmeter_book_middle_detail_pc_login-22)
3. [人工知能プログラミングのための数学がわかる本](https://www.amazon.co.jp/dp/product/4046021969/ref=as_li_tf_tl?camp=247&creative=1211&creativeASIN=4046021969&ie=UTF8&linkCode=as2&tag=bookmeter_book_middle_detail_pc_login-22)
4. [ゼロから作るDeep Learning ―Pythonで学ぶディープラーニングの理論と実装](https://www.amazon.co.jp/dp/product/4873117585/ref=as_li_tf_tl?camp=247&creative=1211&creativeASIN=4873117585&ie=UTF8&linkCode=as2&tag=bookmeter_book_middle_detail_pc_login-22)

始めはPythonが分からない状態だったので、Pythonで書かれている本は敬遠していましたが、4.が一番分かりやすかったです。

# Python
Pythonに関しては、機械学習の本に出てくる内容とネット検索で十分かなと思ったので、参考書は買っていません。

[paizaラーニング](https://paiza.jp/works/courses) の 「Python3入門編」でざっとは勉強しました。

C/C++/C#をメインにしている人間としての所感
- 「動的型付き言語」気持ち悪い。DeepLearningでデータ構造が複雑になるほど、自分が何を触っているのかがパッと見わからなくて、気持ち悪いです。