OmniAICreator/Qiita-1.07M huggingface dataset:
Sublimeでhtml文書情報・構造タグを便利生成する

「！」を入力してから、Tabを押すだけで、下記のようなタグは自動生成される
<img width="314" alt="Qiita.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435377/a946c96d-c05c-11e8-4478-f38debc190fe.png">
※前提：編集するファイルは「何々.html」として保存されること
（画像の例はtest.html）
※上記ショートカットキーが無効問題に対する対応方法は以下である
Sublimeで
1.Ctrl+Shift+P押して、PCIを検索して、package control installを選択する
2.emmetを入力してから、最初のものを選択する
3.インストール完了すると、下記画面が表示される
<img width="807" alt="Qiita2.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435377/c586215c-ef79-6c3c-92c4-cdacdd1dddcb.png">
4.PyV8をインストールする
ダウンロード場所は　https://github.com/emmetio/pyv8-binaries
<img width="796" alt="Qiita3.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435377/0cece4f1-a041-e90d-fb41-c79a6ada406d.png">
5.pyv8-binaries-master.zipをPyV8というファイル名で解凍する。
そして、下記のところにコピーする
<img width="424" alt="Qiita4.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435377/eaa908fc-0d6b-b5cf-d0ee-3cf00af8ba16.png">
<img width="494" alt="Qiita5.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435377/42b6d400-60ee-085d-0791-ebbef77a51ae.png">
※因みに、自分のsublime ⇓
<img width="249" alt="Qiita6.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435377/9978c914-efc9-fc24-9641-4449da170be2.png">
6.もう一度ショートカットキーを試してみる
minecraft python de programing

minecraft をpython で操作する方法
1)raspberry pi では python から直接
2)mac serverを立てて 接続
3)mac mods を入れて minecraft のチャット
  / py teleportなどと入力
(いずれの場合も teleport.pyなどをあらかじめ
 作製しておく)
4)old mac (scratch1.4が動くもの)
  スクラッチの修正ファイルを入れると
スクラッチから  minecraftと接続できる。
1),2)ではminecraft を一旦中断してpythonの
ファイルを選択する必要がある。
3)ファイル名をタイピングする必要がある。
プログラムに数秒タイムラグを入れると、minecraft に戻ってからプログラムが実行されたようにみえる.
なぜそんなことを？ minecraft が好きでプログラミングでもやってみたい方にはおすすめかも
React+Babel+WebpackでHello Worldまで


手動でReactアプリを作成するときの自分用メモです。説明はほとんどしていないです。

##Reactアプリの作成

```
$ mkdir sample
$ cd sample
$ mkdir public src
$ npm init -y
$ touch .gitignre webpack.config.js
$ cd public && touch index.html
$ cd ../src touch index.js App.js
```

.gitignreの内容は<a href="https://github.com/github/gitignore/blob/master/Node.gitignoree">Github/gitignore</a>のnode用を貼り付け

```index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <script src="../bundle.js"></script> <!-- 後でバンドルされたJSファイル -->
</body>
</html>
```

次にWebapck、Babelの設定をしていきます。

```
$ npm i -D webpack webpack-cli
$ npm i -D @babel/core babel-loader
$ npm i -D @babel/preset-env @babel/preset-react
```

中身は最小設定にしてます。

```webpack.config.js
const path = require('path');

module.exports = {
    mode: "development",
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            test: /\.m?js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env']
                }
            }
        }]
    },
    resolve: {
        extensions: [' ', '.js', '.jsx'] //' 'で拡張子なしのimportを許可する。
    },
    // ...
}

```

.Babelrc

```.babelrc
{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
```

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

```
$ npm i react react-dom
```

ここまでで、WebpackがファイルをバンドルしてReactが実行されているか確認します。
`/src`の中の`index.js`と`App.js`にコードを書いていきます。

```index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));
```

```App.js
import React from 'react';

export default class extends React.Component {
    render() {
      return (
        <h1>Hello World!</h1>
      );
    }
  }
```

package.jsonにタスクを登録します。これで`npm start`を実行します。

```package.json
//...

"scripts": {
  start: "webpack"
},

//...
```

`/public/index.html`をブラウザで開いて確認すると、Hello Wolrdできました。
<img width="242" alt="スクリーンショット 2019-06-11 17.22.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323969/87b10aa2-bb92-edd4-b8bc-d4db8d35159a.png">

#Webpack devServer

```
$ npm i -D webpack-dev-server
```

```package.json
"scripts": {
    "start": "webpack",
  + "dev": "webpack-dev-server --port 3000",
  },
```

`npm run dev`で:3000ポートにサーバが立ちます。
シーサイドライン逆走事故で人工知能（AI）エンジニアが学ぶべきこと

## 事故紹介

2019年6月1日、「金沢シーサイドライン」で自動運転列車が始発駅で逆走。
列車は車両止めに衝突し、15人が負傷する事故が発生しまいた。
自動運転システムは30年間無事故。
運営会社は「逆走は想定していない」と説明しましたが、同月6日、車両側の進行方向を指示する回路に断線があったことを発表しました。

「自動運転が危ない」と、語るコメンテーターもいましたが、
**そもそも、この事故は自動運転に起因するものだったのでしょうか？**

## 自己紹介

約20年前にドラクエの敵が人工知能（AI）で制御されているという記事を読んで、中学生だった自分はAIに魅了されました。

大学は情報工学部に進学し、大学院ではAIの研究に没頭し、今まで、20年間AI一筋、、、

とはいきませんでした。

10年前の就職活動で「新卒でAI系の仕事」なんてありませんでした。
そこで、組み込みエンジニアとしてメーカーで修業することにしました。
そして、3年前、念願のAIエンジニアに転職しました。

AIエンジニアとして、ドライバ行動推定・音声感情認識・スマートハウスなど、研究開発していましたが、「自分の理想とするAIビジネスがしたい」と思い、去年12月、「人工知能とアイドル運営の会社」を起業しました。

今回、AI歴20年、組込みエンジニア歴7年の経験から、「シーサイドライン逆走事故」から感じたことを書きました。

特に、AIしかやっていない若いエンジニアに読んでもらいたいです。

## 何が問題だったのか

システムの大まかな流れは、こんな感じです。

![シーサイドライン-1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144410/c7c23b9d-f1ad-dad2-504c-5c281e0a3173.jpeg)

想定されるミスを分類すると以下の通りです。

1. 司令所のミス
2. 車両のミス
3. 通信のミス

## 司令所のミス

これは痛いですね。

要はトップの暴走です。

この場合は、システムから独立した保護機構が必要になります。
電気製品だと、ハード的な保護回路があります。例えば、ヒューズもその一つですね。

シーサイドラインの場合、車両 or 駅に自動運転システムから独立した逆走判定のシステムです。

「逆走しているよ！」という信号より、「進行方向OK！」という信号を送るフェイルセーフの考えも必要です。

こうすれば、逆走判定システムが故障しても大丈夫ですね。

## 車両のミス

これは痛いですね。

部下の勘違いです。

この場合は、システム自身（上司 or 部下）が異常に気付く必要があります。

車両が進行方向を切り替えたと思い込んで（実際は回路の断線で切り替わってなかった）、司令所も発車許可を出してしまったことが事故の原因でした。

電気製品だと、各種センサーからの値に異常がないかソフトウェアでチェックしています。
シーサイドラインの場合、加速度センサーなどで、進行方向チェックすればよいでしょう。
センサー系は故障した場合、修理が必要なのでセンサー自身のチェックも必要です。

上記のハード的な保護と2重の対策が安全でしょう。

## 通信のミス

これは痛いですね。

上司と部下のコミュニケーション不足ですね。

この流れに飽きてきたので、サクッと説明します。

よくある通信の安全対策は、「二度一致」と「誤り判定」です。
二度一致は、同じ内容を2回やりとりして、整合性をとる方法です。

上司「同じことは2度言わないからな！」

実は、何度か言った方がいいです。

うるさい（ノイズが多い）環境だと、聞き間違えがあるかもしれません。

通信の誤り判定は以下の方法があります。

1. パリティ
2. チェックサム
2. CRC（巡回冗長検査）

ノイズで通信データが変わってしまった場合に判定する方法です。
パリティはビット単位、チェックサム、CRCはデータ単位のチェックです。
CRCはノイズに強いが、計算コストがかかります。

## まとめ

以上、シーサイドライン逆走事故から、AIエンジニアが学ぶべきことでした。

AIシステムは、「100％安全！」と証明しにくいシステムです（ブラックボックス）

最新のGANとか、最新の最適化関数とか、難しい数学的理論も素晴らしいですが、このような泥臭い知識も重要だと考えると、7年間の組込みエンジニア歴も意味があったかもしれません。

もっと、システムの安全対策について勉強したい人は、

FMEA (Failure Mode and Effects Analysis：故障モードと影響解析)を勉強するといいでしょう。

設計のときに「逆走という故障モード」を想定していたら、この事故は起きなかったのですから。
ffmpeg ベンチマーク


#1
webm -> mp4

## webm file
150MB
121s

## option
-c:v h264
-b:v 30M


i7-8700k
3m28s17 total
1127% cpu

+GTX660
2m49s12 total
82% cpu

i9-9900k
2m27s63 total
1428% cpu

+K20
2m50s15 total
76% cpu
Flutter + Web3dart で dAppの作成

#はじめに
SmartContractをアプリから制御するために、iOSはWeb3.swift、Androidなら、web3jが用意されており、これらを用いることで、Walletの作成やContractのメソッドをcallすることができる。
今回は、iOSとAndroid両対応が必要で、Flutterを利用したかったので、flutterに対応したweb3モジュール、Web3dartを用いた覚書。

#web3dart
https://github.com/simolus3/web3dart

#実装
##準備
```
1.bwewインストール
https://brew.sh/index_ja
の手順に従う
$brew update

2.flutterインストール
https://flutter.dev/docs/get-started/install/macos
からダウンロード

3.cocoapodのインストール(必要な場合）
$brew install cocoapods
$pod setup
$sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
$sudo xcodebuild -runFirstLaunch

4.cloud fire storeを探す(必要な場合）
https://pub.dev/packages/cloud_firestore/versions
installingの手順に従って、
subspec.yaml--------
dependencies:
  cloud_firestore: ^0.13.4+2
--------
$ flutter pub get

5.他に漏れがないかチェック
$flutter doctor

6.app作成
$ flutter create web3dart_sample
$ flutter devices
$ flutter run

vim pubspec.yamにweb3dartとethereumを追記(必要な場合）
>  ethereum: ^3.1.0
>  web3dart: ^0.4.1

$ flutter pub get
$ flutter run (flutter packages get)
```

firebaseを使う場合はRunner.xcworkspace をxcodeでh李相手、
GoogleService-info.plistをRunnerの下に配置しておく

<img width="266" alt="スクリーンショット 2020-04-08 18.36.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/6dc3bc5f-b23a-909f-ef30-c1f7ae55d9b0.png">


##serviceの作成とviewからcall

```dart
class DemoContractService {
  Credentials credentials;
  DeployedContract contract;
  Web3Client client;

  Future<DemoContractService> init() async {

    var httpClient = new Client();
    client = new Web3Client(INFURA_URL, httpClient);
    client.printErrors = true;

    credentials = Credentials.fromPrivateKeyHex(ETH_PRIVATE_KEY);
    var contractABI = ContractABI.parseFromJSON(Abi, "");

    contract = new DeployedContract(
        contractABI,
        new EthereumAddress(CAPSULE_ESCROW_CONTRACT_ADDRESS),
        client,
        credentials);
    return this;
  }

  ContractFunction func(String fName) {
    return contract.findFunctionsByName(fName).first;
  }

  getRandNum() async {
    print("getRandNum");
    var resp = await new Transaction(keys: credentials, maximumGas: MAX_GAS)
        .prepareForCall(contract, func("random100"),[]).call(client);
    var res = resp.toString();
    print("rand num is: $res");
  }
}

```

```dart
  Future<List<int>> pushRandButton() async {
    var c = await DemoContractService().init();
    c.getRandNum();
  }
```
Vueでimgタグのsrcを書き換えて、transitionアニメーションさせる

表題の通りなのですが、imgにkeyの設定さえしておけば、srcの書き換えでもtransitionアニメーションをさせることができたので、いろいろと遊んでみました。

# サンプル
[こちら](https://kackie.github.io/vue_arrayShuffle/)
画像切り替えです。

# 仕組み
コードは1ファイル完結なので、HTMLのソースを見てもらうと良いと思います。
画像のデータが全て入った配列から表示分と残りの２つ配列を作り、2つの配列からそれぞれランダムに項目を選んで交換するという処理を一定時間ごとに行っています。
## HTML
``` HTML
<div v-for="(image,index) in active" class="img" v-bind:class="'img'+index">
    <transition name="imgFade" mode="out-in">
        <img v-bind:src="image" alt="" v-bind:key="image" width="100">
    </transition>
</div>
```
active（表示分の配列）をv-forループで表示させます。
`v-bind:key="image"`がミソなので、これは必ず設定しておきます。
今回は非表示アニメーション→表示アニメーションを順番に行いたかったため、`mode="out-in"`を設定しました。

## CSS
アニメーションは2パターン作ってみました。
シンプルにフェードイン・アウトと、裏返って新しい画像が表示されるものです。
transition用スタイルは↓のような感じ。

``` CSS
.imgFade-enter-active, .imgFade-leave-active {
  transition: opacity .5s;
}
.imgFade-enter, .imgFade-leave-to{
  opacity: 0;
  position: absolute;
}
.imgRotate-enter-active, .imgRotate-leave-active {
  transition: .3s linear;
}
.imgRotate-enter, .imgRotate-leave-to{
  transform:rotateY(90deg);
  position: absolute;
}
```

## JS
基本はVue.jsで、配列のシャッフルはUnderscore.jsが簡単そうだったのでこちらも使ってみました。
シャッフル動作は下記の一行のみでできてしまいます。

``` JS
this.images = _.shuffle(this.images)
```

### 配列の値の変更について
下記の記事を参考にさせていただきました。どうもありがとうございます。
[Vue.jsは気難しい（配列編）](https://qiita.com/tmak_tsukamoto/items/e303328681f20a036530)
変数のように代入する形では値の変更ができなかったので、spliceを使用しています。

``` JS
self.active.splice(self.activeChoice.new, 1, self.inactive[self.inactiveChoice]);
self.inactive.splice(self.inactiveChoice, 1, self.temp);
```

### VueでsetInterval、setTimeoutを使うときのthis
setInterval、setTimeout内でのthisはWindowになってしまいます。
methodsで定義した関数を呼び出したいため、下記のように記述しています。

``` JS
mounted:function(){
  let self = this;
  setInterval(function(){
    self.changeImg()
  },1500)
},
```

# 感想
着々と脱jQueryの準備を進めております。。
まだ実案件までには踏み込めていないのですが、そろそろどこかで試してみたいです。
とりあえずお遊びという感じで作ってしまったので、SEO面はあまり気にしてないです。
ちゃんとするならaltの情報を配列に持たせて適用するだとか、特に意味のない要素として割り切りこのままにするかの選択が必要ですかね。
見せ方としてはおもちゃ感が強めなので、後者で問題ないかもしれませんね。
写真はうちの猫です（今月で1歳になりました！）。
Amazon AWSのIAMのPolicy、Roleの理解

#はじめに
AmazonのAWSを使用し始めて、IAM使って、よくわからない言葉が一杯でてきました。
何がわからないって、ロールとポリシーです。
それが、Amazonの説明を読んでもやっぱりしっくりこないので、自分の理解を自分の言葉で書こうと思います。
このくらいわかっていれば、自分の利用範囲ではまあ大丈夫かなくらいのつもりで書いております。
詳しくや、正確なものは、Amazonの説明をみてください。

#説明する用語
##AWS IAM
Identity and Access Management
通常、IAMと書きますが、結局アクセス管理を実施するサービスです。機能のほうがわかりやすいです。
IAMでグループ、ユーザー、ロール、ポリシーという言葉を使います。

##グループ
ユーザをまとめたグループです。
これはWindowsでもグループありますので、それと同じです。
グループには、（複数の）ポリシーを適用します。

##ユーザー
AWSを利用するユーザーです。
結局、開発者のことが多いですね。
AWSを利用するのに、認証機能があり、
- ユーザー名
- パスワード
- アクセスキーID
- シークレットアクセスキー
があります。
ユーザーには、（複数の）ポリシーを適用します。
ユーザーはグループに所属することができます。
所属するグループのポリシーは、ユーザーに引き継がれます。
ユーザーはグループに所属しないこともできます。

##ロール
サービスへアクセスするためのアクセス権を管理するもの。
ユーザーと同じようなもので、例えば、Lambdaの関数が、DynamoDBにアクセスするときに、DynamoDBへのアクセス権が必要で、それをロールと呼びます。
ロールには認証機能はないようです。
例えば、あるAlexaの利用者がスキルを使用する場合、そのスキルはLamdbaの関数である場合、Lamdbaの関数が利用者に代わって、AWSのサービス（DynamoDB）へアクセスすることがあります。ロールはこのときの利用許可の設定をします。この利用者は上記のユーザのようにユーザ名やパスワードやアクセスキーIDやシークレットアクセスキーはもっていないので、上記のユーザーとは違います。
Lamdba関数とロールは多対1です。
Lamdba関数は、どれかひとつのロールとだけ関連付けられます。

##ポリシー
サービスへのアクセス権です。
Windowsのファイルのアクセス権がわかりやすいと思いますが、ファイルの読み取りのみ、書き込み可などのアクセス権がありますが、それと同じです。
AWSのサービスは、LambdaとかDynamoDBとか、S3とか、いろいろありますが、それに対する動作（アクション）に対して、許可するかどうかをポリシーとしてまとめます。
ポリシーは、JSON形式で各サービスへの許可を記載します。ビジュアルエディタで、GUI上で選択しながら作成するか、JSONエディタに直接記載することで作成できます。
ポリシーは、最初からAmazonで用意しているデフォルトのポリシーと、後から自分で新たなポリシーを作成するポリシーがあります。

##アタッチ/デタッチ
ポリシーをグループやユーザーやロールに設定することをアタッチ、その設定を解除することをデタッチと呼びます。
感触的には、ポリシーの設定/解除と書いてくれたほうがわかりやすいのですが、ポリシーのアタッチ/デタッチと呼びます。

#図で説明
これを図にしてみるとこんな感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405480/d5e00c85-a031-05fe-6669-b88f28f9b088.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405480/fd0947d2-3bfc-9ddb-f310-2e9df6e88043.png)

#おわりに
今回はこれだけの内容です。
git branch関連コマンド

## ブランチの確認
```terminal
ローカルブランチの確認
# git branch

リモートブランチの確認
# git branch -r
```
## 派生ブランチの作成
```terminal
# git branch BRANCH_NAME
```
## 作業ブランチの変更
```terminal
# git checkout BRANCH_NAME
```
## マージ
```terminal
# git merge BRANCH_NAME
```
## ブランチの削除
```terminal
# git branch -d BRANCH_NAME

リモートブランチの削除
# git branch origin :BRANCH_NAME

リモートリポジトリでは削除されていてローカルリポジトリに残っているリモートブランチの削除
# git remote prune --dry-run origin
```
Android で 実機に入っている AndroidManifest.xml を抜く

```bash
$ adb devices
List of devices attached
XXXXXXXXX        device
emulator-5554   device

$ adb -s XXXXXXXX shell \
  'pm list packages | grep uber | grep eats | cut -d: -f2 | xargs pm path | cut -d: -f2' \
  | xargs -I __ adb -s XXXXXXXX pull __ /tmp/ubereats.apk

$ aapt dump xmltree /tmp/ubereats.apk AndroidManifest.xml > AndroidManifest.txt
```


Refs:
https://stackoverflow.com/questions/4032960/how-do-i-get-an-apk-file-from-an-android-device

https://stackoverflow.com/questions/4191762/how-to-view-androidmanifest-xml-from-apk-file
NiFi ReplaceTextプロセッサのReplacement Valueの書き方

NiFiで流れてくるFlowfileの中身をReplace（頭何かデータを入れたい、後ろにデータをつけたいとか）したい場合は、ReplaceTextプロセッサを使えます。

ReplaceText既定の画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110403/c3e1d047-2694-b5f8-3099-2d5b25936628.png)

一個例を見てみましょう
例えば流れてくるFlowfileは一行のCSV

```
aaa,bbb,ccc,ddd
```

後ろにeeeをつけたい場合、以下のように書きます。

```
$1,eee
```

FlowfileのAttribute(filenameとか）を後ろにつけたい場合
＄１をシングルクォーテーションで囲む必要です。

```
${'$1'},${filename}
```

$1のdddをfffにreplaceして、eeeを追加したい場合

```
${'$1':replace('ddd','fff')},eee
```

一番重要なのは$1をシングルクォーテーションで囲むところかなぁ。囲まないと怒られます。
powerappsテキストフィールドをドロップダウンにする

#テキストフィールドをドロップダウンにする
powerappsで簡単に３画面ができると次は、投稿をよりスムーズにするためにカスタマイズをできるようにしたくなってくる。
テキストフィールドをクリックすると、ドロップダウンを入力するようにできる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204488/f3bde842-c052-b58c-fe55-94f5fb196a0d.png)

Editfoamからフィールドの編集をクリックする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204488/af61afde-91ec-20bc-93eb-20a738be9393.png)

フィールドを編集する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204488/b7c0fc72-ce08-249a-3789-00c172ce1b55.png)


フィールドを編集したい場所　この場合は、

![image.png](https://qiita-image-store.s3.ap-northeast-
1.amazonaws.com/0/204488/5f97d639-8af9-5896-8109-c5e8de4d1c8a.png)



カスタムの設定になっていたので、
あたらしく追加をして許可値に設定をし直す。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204488/7aaf6f56-51a6-53a0-58bd-6e6829f41608.png)



["hello", "good"]　とかなんとか　する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204488/8d35de09-6f93-f43e-7966-ea93169669f4.png)


これによってうまくドロップダウンをすることができる。
【ASP.NET】「Web発行」でWebアプリケーションを発行する

# 前提条件
Visual Studio 2017
Windows Server 2016

# サーバー側の準備

## 管理ツールのインストール
サーバーマネージャーの「機能と役割の追加」で、「Webサーバー(IIS)」内にある「管理ツール」をインストールする。
![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424975/e4061439-6317-eff4-6625-5fd57685d70f.png)

## Web配置ツールのインストール

1. https://www.iis.net/downloads/microsoft/web-deploy を開く
2. ページの下の方に日本語版インストーラがあるので、ダウンロードする。
3. サーバーでインストーラを起動する。
4. インストールする機能のうち、「リモートエージェントサービス」がインストールされるようにすること。(標準インストールだとインストールされない)
![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424975/b3022b83-bdde-f414-5e8f-b253649bcb92.png)

## IISの設定

1. IIS マネージャーを起動する。
2. サーバーの機能の中に、「管理サービスの委任」があることを確認する。(これがあれば、Web配置ツールが正しくインストールできている)  
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424975/f8018bda-5694-caeb-895c-058aa9a64d8d.png)
3. 「管理サービス」を選択し、サービスが起動していることを確認する。停止している場合は起動する。  
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424975/7446c541-24f2-2a34-2d14-1f0fbb542211.png)
4. 「IISマネージャーユーザー」を選択し、ユーザーを追加する。  
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424975/19f08a97-b5e3-3408-c58b-76239bd19013.png)  
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424975/16ceffea-dc38-e480-6227-57953e6861c6.png)
 - ここで追加したユーザーを、Visual Studioから発行するときに使用する。
5. Webサイト(既定だとDefault Web Siteになるところ)を右クリック→「展開」→「Web配置による発行の有効化」を選ぶ。(Web配置ツールがインストールされていると表示される)
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424975/a7c4a559-69b5-c961-bd5c-7c477f249a60.png)
6. 「発行アクセス許可を付与するユーザーを選択します」のところで、先ほど作成したIISマネージャーユーザーを選択する。また、設定ファイルの保存先がログオンユーザーのデスクトップになっているので、適切な場所に変更した方が良い。  
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424975/394ec781-bd0e-725e-ff10-7d114127aa45.png)

## ファイアウォールの設定
受信の規則で「8127(デフォルト値)」を許可する。Web管理サービスをインストール済みであれば、すでに許可されているかもしれない。
![07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424975/9860f0cf-396a-3ed5-1c70-7edce7ae7c21.png)

# Visual Studioから発行する

1. プロジェクトで右クリック→「発行」を選ぶ。
2. 発行先で「IIS、FTP、Webデプロイ」を選択し、「発行」を押す。  
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424975/c03d6018-e2a5-a513-ea51-e294fc673221.png)
3. プロファイル作成の画面になるので、必要情報を入力し、「保存」を押す。
![09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424975/780aa5f5-9ed2-d13a-ba57-1cfe53779609.png)
 - サーバー：発行先のサーバー名
 - サイト名：「Default Web Site/任意のアプリケーション名」
 - ユーザー名、パスワード：IISマネージャーユーザーの情報
4. あとはダイアログに従って構成を選択したりして発行する。


# 参考サイト
https://blogs.msdn.microsoft.com/osamum/2011/03/10/visual-studio-2010/
https://qiita.com/sugasaki/items/914eb0f2fa4e9337614e
[Django REST Framework]CursorPaginationsのカーソルが無限ループする


## TL;DR
Paginationクラスの、`offset_cutoff`に`None`を設定する(ドキュメントに書いてないような…？)

* offset_cutoffの説明
    * https://github.com/encode/django-rest-framework/blob/3.9.4/rest_framework/pagination.py#L493-L497
* offset_cutoff=Noneの場合、offsetは制限されない
    * https://github.com/encode/django-rest-framework/blob/3.9.4/rest_framework/pagination.py#L26-L35
* プルリク
    * https://github.com/encode/django-rest-framework/pull/4212

## 環境
django-rest-framework 3.9.4

## 現象
以下のCursorPaginationクラスを考える

```python3
class CursorPagination(pagination.CursorPagination):
  page_size_query_param = 'page_size'
  page_size = 100
  ordering = '-last_modified'
```
ViewSetのpagination_classにCursorPaginationを使ったViewからは、以下のようなレスポンスが返る。

```json
{
  'next': 'http://hogehoge.com/api/?cursor=bz0xMTAwJnA9MjAwNS0wNy0yNCsxNiUzQTAxJTNBMTElMkIwMCUzQTAw',
  'data': ...
}
```

`?cursor=`以降は、データの部分集合を特定するための文字列(base64)。
`next`のURLへのアクセスを繰り返すことで、すべてのデータを取得することが出来る。
しかし、`last_modified`が同じデータを1000件程取得すると、(リクエストURL)=(nextのURL)となる。
以降、無限ループに陥り、正しくデータが取得できない。
(対処法は、記事冒頭の通り)

---

問題は解決したのですが、もう少しだけソースコードを眺めてみました

* DRFのソースコード( https://github.com/encode/django-rest-framework/blob/3.9.4/rest_framework/pagination.py )を読みました

>
\# The offset in the cursor is used in situations where we have a
\# nearly-unique index. (Eg millisecond precision creation timestamps)
\# We guard against malicious users attempting to cause expensive database
\# queries, by having a hard cap on the maximum possible size of the offset.

* OFFSET操作は重いので、それを悪用した攻撃を防ぐための措置?
* cursorのbase64文字列をデコード→URLデコードすると、`o=1100&p=2005-07-24+16:01:11+00:00`のようになる
    * oはオフセット、pは位置を示す([参考](https://github.com/encode/django-rest-framework/blob/3.9.4/rest_framework/pagination.py#L754-L764))
  * pは`ordering`に指定された属性を参照し、値が決まる
      * デフォルト値は`created`、上記の例では`last_modified`
  * pの値が`nearly-unique`であり、かつ`max_page_num`個以上あるときは、取得できたデータの個数分オフセットを進めたcursorが生成される

* つまり、攻撃者は、o(オフセット)を過剰に大きく設定したcursorを作成して、リクエストを投げる?

    * 正常にデータが取得できるとき、expensive database queriesによる攻撃(DDos?)が成立する？
    * ので、対策としてオフセットの上限が1000に制限されている
Cloud IAPを有効化しようとするとローディングが終わらず有効化できない

GCPでIAP（Identity Aware Proxy）を有効化しようとするとローディングが終わらず、有効化されない現象が発生した。

原因は、IAPで使用しているOAuth client IDの上限があるため。
この上限はGCPのプロジェクトごとに決まっており、上げる事ができない。

試しにOAuth client IDを追加しようとすると以下のエラーが表示される。

```
Error
This project has reached its maximum number of OAuth clients. To create another, first remove an existing one.
```

解決するには、使用していないOAuth clientsを削除して作り直すしかない。
Batch Normalizationについてのメモ


# 概要

Batch Normalizationとは，2015年にGoogleの社員2人が提案したパラメータの最適化手法の1つである．


# 問題

ニューラルネットワークを用いて学習をする際，データに何かしらの前処理を施すことが一般的である．これは，以下の理由などで行うことが多い：

- sigmoid関数などで引き起こされる，早い段階での勾配消失を無くす
- 全てのデータが一定の範囲内に収まるようにする
- etc.

しかし，問題は前処理だけで解決されない．
入力データの分布と推定データの分布が異なる現象をCovariate Shiftという．
例えば，学習データとして黒猫のみを用いると，黒い猫を判定できるモデルが生成される．そこに，三毛猫を判定させようとすると，うまくいかない，という原理である．

そして，同じような現象が，層が深いネットワーク内でも発生する．これをInternal Covariate Shift という．これは，層の入力データの分布と出力データの分布が違うことで発生する．各層は，データの分布に適応しようと学習を行う．しかし，層が深くなるにつれ，データの分布は初期状態から違うものになってしまう．これは，イテレーションが増す毎に酷くなる．

そこで，全てのレイヤーにおいて，データがほぼ同じ分布になるように強制的に変えてしまう，というのがBatch Normalizationである．


# 解決手法

上記のInternal covariate shiftを無くすための手法としてBatch Normalizationが提案された．
学習中，以下の手法によって，正規化を行う：

1. レイヤーの入力値の平均と分散を計算
2. 1の値を用いてレイヤーの入力値の正規化を行う
3. レイヤーの出力値を得るために，シフトを行う

![](https://cdn-images-1.medium.com/max/800/1*Hiq-rLFGDpESpr8QNsJ1jg.png)


既存の層に対して，2つのパラメタのみ追加することでBatch Normalizationは実装ができる．

## 利点
- 学習が早く進む
- learning rateを比較的大きく設定ができる
    - Batch Normalizationによって，活性化されても大きすぎたり，小さすぎる出力が得られないようになる
- 過学習を防ぐ
    - Dropoutと似ており，隠れ層にノイズを含めることができる
- Dropout回数を減らすことができる


# 考察

BNはネットワーク内部の活性化の正規化をすることによって，結果に大きな違いを生み出すことができるようになった．


# 参照
- [Batch normalization: theory and how to use it with Tensorflow](https://towardsdatascience.com/batch-normalization-theory-and-how-to-use-it-with-tensorflow-1892ca0173ad)
- [[Survey]Batch Normalization: Accelerating Deep Network Training by Reducing Internal Covariate Shift](https://qiita.com/supersaiakujin/items/8a465ecb1dcbc7df8b02)
- [Batch normalization in Neural Networks](https://towardsdatascience.com/batch-normalization-in-neural-networks-1ac91516821c)
- [Batch Normalization: Accelerating Deep Network Training b y Reducing Internal Covariate　Shift](https://arxiv.org/pdf/1502.03167v3.pdf)
Windowsでソフトウェアを作ろう / 今から始めるVisual Basic #0

#Windowsでソフトウェアを開発したい
そう思ったことがあるはずです。たとえば
「自分向けにカスタマイズしたnotepad.exeが作りたい!」
「自分向けに必要な機能だけ搭載したInternet Explorerが作りたい!」
など、自分向けのソフトを作りたい方の用途は様々だと思います。
そこでいざ作ろうと思うと、一つ問題点が発生します。
これは初心者が絶対に直面します。
**プログラミングは知らない**。

##そこで簡単な構文でプログラミングができるBasic
最近はノンプログラミングでアプリが作れるツールもありますが、
やはり柔軟的に自分のやりたいことを実現するためにはプログラミングの知識が不可欠です。
有名なプログラミング言語としてC言語やJavaなどがありますが、
イマイチとっつきにくいものがあります。
**そこで簡単で覚えやすく人間語と近い簡単さを持つBasicを勧めますよ、えぇ。**
最近はBasicは「簡単」な言語で業界からはバカにされますが
Basicで得た知識はC#などの言語にも繋がります。
自身を持ってBasicを一緒に学びましょう。

実は私もBasicは初心者です。今回Qiitaに記事を上げようと思った理由は
人に教えることが自分につながると思ったからです(笑)
第一私の記事を見てもらえるかわかりませんけどね。

##早速作ろう
あなたは今すぐにソフトを作りたい。作りたいですね?
作りましょう。Basicを使ってWindowsのソフトを作るためには、
IDE(総合開発環境)が必要です。IDEには、プログラムを書くためのテキストエディタや
プログラムを動かすために必要な要素などが全て入っていて、これだけでソフト作りを完結できます。

##Visual Studio Communityをダウンロードしよう
今回使用するIDEは、Microsoft社が開発し無償で提供している
Visual Studio(以下VS)です。今はiOSやAndroidも一つのBasicコードで開発できるXojoと言うツールもありますが
情報量がVSと比べて微妙なところ、また有償と言う面があり**初心者が始めるには適していません**。

では早速VSをインストールしましょう。
Microsoftのホームページからダウンロードできます。
**今回は開発環境の都合上、Windows 7上で古いバージョンのVisual Studio 2010を使いますが、
基本的な操作はほとんど一緒です**
https://visualstudio.microsoft.com/ja/downloads/?utm_medium=microsoft&utm_source=docs.microsoft.com&utm_campaign=button+cta&utm_content=download+vs2019&rr=https%3A%2F%2Fdocs.microsoft.com%2Fja-jp%2Fvisualstudio%2Finstall%2Finstall-visual-studio%3Fview%3Dvs-2019

![Qiita1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435496/19874444-4e02-9003-7796-2bbbb6ed72a5.png)
Communityを選ぶ

##インストールを終わらせる
ダウンロードを押したら、あとはダウンロードしたインストーラーに従ってインストールを進めてください。
インストールが終了したら今回は終わり、次に進みましょう。

→#1につづく
cacooで使えるショートカット一覧

# :thinking: cacooとは
>Cacooはフローチャート、ワイヤフレーム、UML図、ネットワーク構成図などを作成して安全に共有するためのオンライン作図ツール。
https://cacoo.com/ja/features

主にWebサイトのワイヤーフレーム作りに活用しています。
ショートカットはもちろん、画像ファイルを直接ドラッグドロップで配置できるなど、PhotoshopやIllustratorのように感覚的に操作できるところもGood:thumbsup_tone1:

ワイヤーフレームやフローチャート作成が主なので、デザイン的な作り込みはできません。
私は無料メインなのでそれほど色々できませんが、有料だともっと機能が使えるようです。

# :keyboard: cacooショートカット
| アクション        |       Windows |    Mac    |
|:-----------------|------------------|------------------|
| 元に戻す          |          Ctrl + Z |        ⌘ + Z      |
| やり直す          |          Ctrl + Y |        ⌘ + Y      |
| コピー            |          Ctrl + C |        ⌘ + C        |
| 貼り付け          |          Ctrl + V |         ⌘ + V         |
| 切り取り          |          Ctrl + X |       ⌘ + X       |
| 全選択            |          Ctrl + A |      ⌘ + A       |
| グループ化         |          Ctrl + G |      ⌘ + G       |
| グループ化解除     |          Ctrl + U |      ⌘ + U       |
| 複製              |          Ctrl + D |      ⌘ + D       |
| 複製して動かす     |          Alt + Dlag |      Option + Drag       |
| 複製して線でつなぐ |          Ctrl + Alt + Dlag |      ⌘ + Option + Drag       |
| 移動(5px)         |          Shift + Arrow keys |      Shift + Arrow keys       |
| リサイズ(5px)     |          Ctrl + Shift + Arrow keys |      ⌘ + Shift + Arrow keys       |
| テキストを追加     |          T |      T       |
| 線を追加          |          L |      L       |
| コメント          |          C |      C       |
| スライドショー     |          Ctrl + F5 |      ⌘ + Enter       |
| キャンバスの拡大   |          Ctrl(+)+  |      ⌘(+)+       |
| キャンバスの縮小   |          Ctrl(+)-  |      ⌘(+)-       |
| 画面にフィット     |          Shift + 1 |      Shift + 1       |
| 次のシート         |          Page down |      Fn + Arrow key down       |
| 前のシート         |          Page up   |      Fn + Arrow key up       |
| シートパネルの開閉  |          Tab       |      Tab       |
| テキスト編集       |          テキスト選択 + F2 |      テキスト選択 + F2       |

## :point_up: Tips
| 線の操作       |       Windows |    Mac    |
|:-----------------|------------------|------------------|
|　　　　　　　　　　　　　　　　　　　|              Ctrlを押しながら操作すると接続ポイントを無視して移動できます。 |        ⌘を押しながら操作すると接続ポイントを無視して移動できます。        |
||            線の上でダブルクリックするとアンカーポイントの追加/削除ができます。 |       線の上でダブルクリックするとアンカーポイントの追加/削除ができます       |
| |              Shiftを押しながらドラッグすると水平や垂直もしくは斜めに直線を描くことができます。|        Shiftを押しながらドラッグすると水平や垂直もしくは斜めに直線を描くことができます。        |

公式のショートカット一覧は以下から確認できます。
![691790c3-351e-49d5-8986-39eaf2684cfc.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298037/f50f4baa-4eb2-4f43-2fc4-e50c10782a01.png)
Speed Wi-Fi NEXT W06 を USBで接続する

外出時にパソコンを使う機会が多くモバイルルーターを契約しました。

そこで Speed Wi-Fi NEXT W05 にクレードルを接続して有線接続をしてました。

しかし Speed Wi-Fi NEXT W06 に機種変したことによって有線接続ができなくなりました。

そこで usb 接続でできないか調べたところ日本語情報がなかったのでここに掲載します！

## 環境
モバイルルーターとパソコンとは Type-C の**通信可能**なケーブルで接続します

- Arch Linux
- Huawei 製モバイルルーター
    - Speed Wi-Fi NEXT W06

今回 **Arch Linux** を使用してますが Ubuntu / Debian など他ディストリビューションの場合は読み替えて設定を行ってください。

## やり方
まず `lsusb` で下記のようにルーターを認識してるか確認します

```bash
Bus 002 Device 003: ID 12d1:1f01 Huawei Technologies Co., Ltd. E353/E3131 (Mass storage mode)
```

今回 `usb_modeswitch` を使用するためインストールします。

```bash
sudo pacman -S usb_modeswitch
```

ネットワークデバイスとして使用できるように書き換えます。

```bash
sudo usb_modeswitch -v 12d1 -p 1f01 -V 12d1 -P 14DC -J 
```

`lsusb` で成功したか確認します。

```bash
Bus 002 Device 003: ID 12d1:14db Huawei Technologies Co., Ltd. E353/E3131
```

上記のように `(Mass storage mode)` が消え `ID` が `12d1:1f01` から `12d1:14db` に変わってたら成功です。

あとはそれぞれの環境にインストールされてる `NetworkManager` などを使用し接続してください
JavaScriptでネットワークのオンライン・オフライン監視する関数を作った

JSで端末のネットワークを監視して、オフラインの時はアラートを出す実装をしてた際のメモです。

ネットワークの監視は以下のように書いても良いんですが、

```javascript
window.addEventListener('offline', () => {
    console.log('offline');
})

window.addEventListener('online', () => {
    console.log('online');
})
```

もうちょっとわかりやすく出来ればと思って、以下のように関数化してみました。

```javascript
const watchOnline = function(callback) {
    window.addEventListener('online', () => callback(true))
    window.addEventListener('offline', () => callback(false))
    callback(navigator.onLine)
}

watchOnline((online) => {
    if (online) {
        console.log('online')
    } else {
        console.log('offline')
    }
})
```

これだと、ページ表示の際に実行されるのも良いです。

サンプルです。

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="js,result" data-user="kandai" data-slug-hash="ydLoBd" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="watch online/offline">
  <span>See the Pen <a href="https://codepen.io/kandai/pen/ydLoBd/">
  watch online/offline</a> by daichi (<a href="https://codepen.io/kandai">@kandai</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

参考
https://developer.mozilla.org/ja/docs/Web/API/NavigatorOnLine/onLine
iPhoneで撮影したHEIF形式の画像はJPEGに変換される

AppleはiOS 11でHEIFと呼ばれる画像フォーマットを導入しました
inputタグでHEIFファイルを投稿したとき、macとiPhoneで挙動が変わったのでメモしておきます。

## HEIFとは
>「HEIF」は高画質のまま軽量化した写真の保存形式で読み方はヒーフ。
「HEIF」形式で保存された写真は「.heic」という拡張子が付く。

引用：[HEIFとJPEGどっちを選ぶ？空き容量対策にもなるiPhoneカメラの新しい保存形式を比較してみた ｜ さくっとふぉとらいふ](https://photolog.aiko15.com/10141/)

## 結論
**iOSデバイスからinputタグで画像を投稿した場合、JPEGに変換される。**
ただし、**macから画像を投稿した場合、JPEGに変換されず、HEIFのまま。**

## 確認方法
```index.html
<input id="post-img" type="file">
```

```index.js
document.getElementById("post-img").addEventListener("change", onChange);

function onChange(e) {
  console.log(e.target.files[0].type); // image/jpeg
}
```

実機で下記を参考にmacと検証端末（iPhone）を繋げて投稿すればおけ
* [実機のMobile Safariのページデバッグについて - Qiita](https://qiita.com/codenameyu/items/a1b79bff45fba239f2f1)

## 参考
* [ios - Convert HEIF (.heic) to JPEG on a server? - Stack Overflow](https://stackoverflow.com/questions/45460611/convert-heif-heic-to-jpeg-on-a-server)
vue.js 検索エンジン対策 モバイルフレンドリーエラー

「GoogleBotは優秀なので、サーバーサイドレンダリングしなくてよい」
という嘘はやめてくれよ。

まだ vue.js 使ってる人が少ないからか、SEO気にする人はSSRするからか知らんが
情報がねぇ！

ということで、検索エンジン対策。

注意したいのは、スマホでもPCでも正常に動くのに、BOTんときだけエラーを吐く。
という場合。
かなりの確率である。


・モバイルフレンドリーテスト
https://search.google.com/test/mobile-friendly?hl=ja

ここでデータが表示されるかどうか。
まぁ、表示されんでしょうね。


# analyticsは、ライブラリを使わず以下の方法で行うでないとエラーが出る

https://qiita.com/tiwu_official/items/eeaa1424ca757362e836



# firewallを切る

サーバーの firewall は切っておく。
デバッグで googlebot を呼びまくることになるので、
firewallがBOTをブロックしてしまう。

```

systemctl stop firewalld

```

# 使えないライブラリ

・day.jsは使えるわ。。。
以下の感じで使う。

```app.js

import 'dayjs/locale/ja';
import dayjs from 'dayjs';
dayjs.locale('ja');
Vue.prototype.$dayjs = dayjs;



```

# this.$route.replace も使えない

this.$route.push で乗り切ろう

# name というのが使えない

配列内に name というのがあるとバグるので、name2 とかにしておく。


# foreach 文が使えない

ようは新しい構文は使えないみたい。

# 検索エンジンは chrome41

今回はら larave5.7 をバックエンドに利用。
ようはこのバージョンに合わせないと無理。
ということで


まずは

https://www.npmjs.com/package/laravel-mix-polyfill

を参考にインスコ。

それが終わったら、以下の設定。
chrome 41 でも理解できるようにソースを吐けよと。


```webpack.mix.js

const mix = require('laravel-mix');
require('laravel-mix-polyfill');



mix.webpackConfig({

    output: {
        chunkFilename: 'js/chunks/[name]-[hash].js',
//chunkFilename: 'js/chunks/[name].js',
        publicPath: '/'
            }
});


//読み込みたいフォルダを指定しておく
mix.js('resources/js/app.js', 'public/js','public/js/chunks/').version()
     .autoload({
         "vue": ['Vue', 'window.Vue']
     })

   .polyfill({
      enabled: true,
      useBuiltIns: "usage",
      targets: {"chrome":"41","firefox": "50", "ie": 11}
  })



    .sass('resources/sass/app.scss', 'public/css');
~                                                                                                                                                  


```


な。ここまでやってコツコツやってく。
特にルーティングしている場合は1ファイルずつちゃんとチェックしていこうな。


# 完成

![FireShot Capture 020 - モバイル フレンドリー テスト - Google Se_ - https___search.google.com_test_mobile-friendly.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31338/653a77f9-e391-a3be-99c2-bdb74ee5c5f5.png)


## ページの読み込みに関する情報もチェック。


![FireShot Capture 021 - モバイル フレンドリー テスト - Google Se_ - https___search.google.com_test_mobile-friendly.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31338/3ff7310d-bada-27e3-7ae4-7f88705a4482.png)


ということで、乙！
kintoneのJavaScriptからルックアップ参照を実行する

JavaScirptからルックアップフィールドに値を設定することはできても取得ボタンを押すようなことはできないのかなー
って思って調べたら普通に出来ましたｗ

lookupプロパティにtrueを設定したらルックアップが実行されます。

ドキュメントは隅々までよく読まないとですね。

```js
kintone.events.on('app.record.edit.show', function(event) {
    var record = event.record;
    record['ルックアップ']['value'] = '0001'; // ルックアップフィールドの値
    record['ルックアップ']['lookup'] = true;
    return event;
});
```

ただし、2019年5月リリースの新モバイル版デザインでこれをやると「取得されました」という表示がアラートで表示されるので、ユーザビリティに影響が出るかも。
トーストにしてもらえないかサイボウズに提案してみます。
docker環境でRails開発をしていたら、突然ソースコードが更新されなくなった

#事象
なんの前触れもなく、突然ソースコードの変更が反映されなくなる。コントローラーを削除しても、routesを削除しても変わらない。

# 試したけど動作しなかったこと
以下の記事のように、 `config/environment/development.rb` に以下の文言を足したが正常に動作はしなかった（正確には、前者に関してはもともと記述してあった。不要というわけではないと思う）。

```development.rb
  config.cache_classes = false
  config.reload_classes_only_on_change = false
```

https://qiita.com/uenoryo/items/5dd69436e9f5af6a752e
http://issyu39.com/programming/notreflected/


```development.rb
# config.file_watcher = ActiveSupport::EventedFileUpdateChecker
config.file_watcher = ActiveSupport::FileUpdateChecker
```

https://keruuweb.com/vagrant-rails-%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E5%A4%89%E6%9B%B4%E3%81%8C%E5%8F%8D%E6%98%A0%E3%81%95%E3%82%8C%E3%81%AA%E3%81%84/


#解決した方法
このプロジェクトでは `docker-sync` という物を使っているのですが、もしかしたらそれが原因とのお話を聞いたので再起動してみた

```
docker-sync stop

docker-sync start
```

なんとこれだけで治った！！！
EJSでナビゲーションへのカレントクラス付与に手間取ったので覚え書き

Dreamweaverテンプレ使いがいきなりEJSを使い始めました。  
今までよくやってた↓のようなやり方をEJSでやるのに何故か手間取ること約2時間・・。
`@@@((current=='hoge')?'<li class="current">':'<li>')@@@`
忘れないように、うまくいったパターンを書きつつ復習します。

# 事前情報
## 構造について
root/
├ index.ejs
└ include/
　　└-header.ejs

index.ejsが表示側、-header.ejsがグロナビのソースが記述されているインクルード用テンプレートです。
## おおまかな作りについて
1. 表示側から-header.ejsをインクルードする
2. インクルードする際に、currentパラメータを受け渡す
3. -header.ejs内で、受け取ったcurrentパラメータによって表示を条件分岐

構想自体はシンプルです。

# 実装方法
index.ejs

``` JS
<%- include('./include/common/-header.ejs',{current:'home'}); %>
```

-header.ejs

``` JS
<% if (typeof current === 'undefined') { var current = ''; } %>
<div class="home <%- current === 'home' ? 'current' : '' %>"><a href="/"><span>home</span></a></div>
```
こんだけです。

# つまづいたポイント
## EJSのスクリプトを記述する「`<% %>`について」
いくつか種類があります。
今回は`<% include(`と書いていたがためにエラーとなっていました。。
### `<% %>`
内側にJavaScriptが記述できる。
HTMLは出力されないので、変数の宣言やif文を書くのに使う。
### `<%- %>`
内側にJavaScriptが記述できる。
実行結果をHTMLとして展開する。
### `<%= %>`
中の変数の値をエスケープして展開する。

## `var current = '';`について
-headerの一行目のこれです。

``` JS
<% if (typeof current === 'undefined') { var current = ''; } %>
```

表示側のテンプレートがindex.ejs以外にも存在し、そちらは-headerのインクルードを↓のように記述していました。

``` JS
<% include ./include/common/-header %>
```
要するに、パラメータの受け渡しがあるパターンとないパターンが混在していてエラーを招いたみたいです。
表示側のテンプレートを全てパラメータを送るように修正すれば動くはずですが、さすがに骨が折れるので、値が存在しない場合は空の変数を用意するようにしてエラーを回避しました。

## 三項演算子について
リファレンスがなかなか見つけられず困っていましたが、普通に使えました！

``` JS
<%- current === 'home' ? 'current' : '' %>
```
クラスの付け替えくらいならシンプルに書けて良いですね。

# 感想
EJSまだ使い始めで勝手が全然わかりませんが、テンプレートのインクルードができるのはやはり便利ですね。
Dwテンプレは記述がアプリケーションに制限される上にソースが汚れるので、こっちで慣れていけたらいいなと思います。
Pugと違って普通にHTMLが記述できてとっつきやすさはありますが、リファレンスが少ないため今回みたいに何かにつまづいたときはちょっと大変かもです。
諦めてJSで実装しちゃおうかな・・とも思っていたのですが、なんとか解決できてよかったです。
ロケールについて


##ロケールとは
言語・地域が異なる国、地域単位で単位、記号、日付などの表記方法の集合。
ロケールの設定によってシステムは表記や処理を行う。

なお、ロケールの設定によっては、エラーが起こることもしばしば。
エラーの例として
	yum(CentOSでのUbuntuのaptの代わりみたいなもの)実行時に、ロケールの設定によっては、警告文が出る。
	emacsでのファイル編集時、文字化けが起こる。
	ターミナルで日本語入力できない

（余談）
ターミナルとコンソールの区別について
	ターミナル：GUI上でCUI操作を行うためのアプリケーション。Ubuntuでいうところの"端末"
	コンソール：コンピュータの入出力装置。ディスプレイやキーボードのこと。
とはいえ、現在ではコンソールはターミナルの意味合いで用いられることも多い。
ちなみに、[モニター、ディスプレイの違い](https://nihongo-box.com/136/)なども...


##localeコマンド
ロケール情報の表示は`locale`コマンドで行う。
	オプション無しでは、現在のロケールの設定が表示される。
	`a`オプションで利用可能なロケール一覧が表示される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/354859/be595d86-70e5-a935-0066-c2ee882d6519.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/354859/829f612a-0225-714b-10d0-de8ab89e10a5.png)

##ロケールの設定
ロケールの設定では、LC_ALL>LC_で始まる環境変数>LANGの優先順位で適用される。
設定方法は、これらは環境変数なので、ターミナルで以下の作業のいずれかを行えば良い。

```
# 環境変数として、登録。
$ export LANG="ja_JP.UTF-8"
# シェル変数として登録。
$ set LANG="ja_JP.UTF-8"
# 環境変数削除
$ unset LANG 
# 永続的に設定するには、.bash_profileに設定。システム全体で利用する場合は/etc/profileに設定。
$ cd
$ echo 'export LANG="ja_JP.UTF-8"' >> .bash_profile
```

なお、
	シェル変数：そのシェルのみで利用可能な変数。子プロセスには引き継がれない。
	環境変数：そのシェルと起動したコマンド(プログラム)の中で利用可能な変数。子プロセスに引き継がれる。


##localectlコマンド
CentOS7の場合`localectl`コマンドが使用できる。

- localectl status：現在のロケールの設定を表示
- localectl list-locales：利用可能なロケールを表示
- localectl set：ロケールを変更する

なお、ロケールの設定ファイルは`/etc/locale.conf`である。
Carrierwave × rails_adminで画像を複数アップロードするときにハマった話

# はじめに
Shopテーブルにimageカラムを持たせ、お店の画像をアップロードするためにCarrierwaveを使っていた。しかし、Shopに複数の画像を設定するように変更したかったため、[Carrierwaveのドキュメント](https://github.com/carrierwaveuploader/carrierwave#multiple-file-uploads)に従って、 imageカラムをimagesカラムに変更し、一つのカラムの中に複数画像をアップロードする実装をすることになった。
一通り実装を終えてrails_adminの管理画面からShopのデータを作成しようとしたらエラーが出てハマったので、同じ境遇になった方のために記事にしておきます。
※この記事は、Carrierwaveで画像アップロードを既に実装していて、かつrails_adminで管理画面を使っている方が主に対象になるかと思います。

# まずはCariierwaveのドキュメント通り実装する
ドキュメントを読んでいただければわかるのですが、Carrierwaveで複数画像をアップロードするための設定は非常に簡単です。
まず、imagesカラムを対象のテーブルに追加します。（私の場合はShopテーブル）

```
rails g migration add_images_to_shops images:json
rails db:migrate
```
※このコマンドはドキュメントに乗っ取っているので、新しくカラムを作るのか、既にあるimageカラムをimagesカラムに変えるのかによって多少変わります。要するにjson型のimagesカラムが作れればおけです

続いてShopモデルを編集します

```
class Shop < ActiveRecord::Base
  mount_uploader :images, ImageUploader
end
```

そして、これに加えてrails_adminのcarrierwave用の設定もします。[ドキュメント](https://github.com/sferik/rails_admin/wiki/CarrierWave)参照

```
class Shop < ActiveRecord::Base
  mount_uploader :images, AvatarUploader
  attr_accessor :delete_images
  after_validation do
    uploaders = images.delete_if do |uploader|
      if Array(delete_images).include?(uploader.file.identifier)
        uploader.remove!
        true
      end
    end
    write_attribute(:images, uploaders.map { |uploader| uploader.file.identifier })
  end

  def images=(files)
    appended = files.map do |file|
      uploader = _mounter(:images).blank_uploader
      uploader.cache! file
      uploader
    end
    super(images + appended)
  end
end
```
これで全ての準備が整った、、、はずなのですが、、、

rails_adminのShopの新規作成画面に行くと、以下のようなエラーが出てしまいます。

```
Showing /app/vendor/bundle/ruby/2.6.0/gems/rails_admin-1.4.2/app/views/rails_admin/main/_form_multiple_file_upload.html.haml where line #9 raised:

ActionView::Template::Error (undefined method `identifier' for nil:NilClass):
     6:         %i.icon-white.icon-trash
     7:         = I18n.t('admin.actions.delete.menu').capitalize + " #{field.label.downcase} ##{i + 1}"
     8: 
     9:     = form.check_box(field.delete_method, {multiple:true, style: 'display:none;'}, attachment.delete_key, nil)
    10: 
    11: = form.file_field(field.name, field.html_attributes.reverse_merge({ data: { :"multiple-fileupload" => true }, multiple: true }))
    12: 
```

rails_adminのgemのなかで何やらエラーが起こっている…だけどgemの中をひたすら追いかけ回っても原因がさっぱりわからず、1日もこのエラーに悩まされてしまいました。

しかし、ドキュメントと自分のコードを睨み続けた結果、あることに気づいたのです…

自分のコード
↓

```
class Shop < ActiveRecord::Base
  mount_uploader :images, ImageUploader
end
```

ドキュメントのコード
↓

```
class Shop < ActiveRecord::Base
  mount_uploaders :images, ImageUploader
end
```

mount_uploader「s」…

###mount_uploaderに「s」が付いてない！！！！＼(^o^)／

ただsをつけ忘れてただけでした…sをつけてあげると、ちゃんと動きました。

すごい凡ミスですが、単数の画像アップロードから複数の画像アップロードに変える際には皆さんもお気をつけてください…
BPMN

BPMN:Business Process Model and Notation

ISO/IEC 19510:2013 Information technology -- Object Management Group Business Process Model and Notation
https://www.iso.org/standard/62652.html


業務プロセスモデル図ってどう作るの？世界一わかりやすいBPMN解説
https://www.bpm-portal.jp/blog/instruction]
>業務フローのモデル図作成を如何に短縮するかが、BPMを成功させる秘訣の一つでもあるのです。

【今日から始める】BPMNモデリングの3つのポイント
https://kashika.biz/bpmn-1/

#目的

図を書く理由


##構造設計（二次元）

##入出力

###相互作用

正帰還、負帰還

###異常処理

###試験

###視点提供

###責任境界
　自動制御、人手監視

###合意形成

###分析改善
#XML(Extensible Markup Language)

Extensible Markup Language (XML) 1.0 (Fifth Edition)
https://www.w3.org/TR/REC-xml/

Extensible Markup Language (XML) 1.1 (Second Edition)
https://www.w3.org/TR/xml11/

##OOXML(office open XML) 
ISO/IEC 29500-1:2016(first version 2008) 
Information technology -- Document description and processing languages -- Office Open XML File Formats -- Part 1: Fundamentals and Markup Language Reference
https://www.iso.org/standard/71691.html

ISO/IEC 29500-2:2012 
Information technology -- Document description and processing languages -- Office Open XML File Formats -- Part 2: Open Packaging Conventions
https://www.iso.org/standard/61796.html

ISO/IEC 29500-3:2015 
Information technology -- Document description and processing languages -- Office Open XML File Formats -- Part 3: Markup Compatibility and Extensibility
https://www.iso.org/standard/65533.html

ISO/IEC 29500-4:2016 
Information technology -- Document description and processing languages -- Office Open XML File Formats -- Part 4: Transitional Migration Features
https://www.iso.org/standard/71692.html





#XMI

ISO/IEC 19503:2005 
Information technology -- XML Metadata Interchange (XMI)
https://www.iso.org/standard/32622.html

ISO/IEC 19509:2014 (OMG) 
Information technology -- Object Management Group XML Metadata Interchange (XMI)
https://www.iso.org/standard/61845.html

XML Metadata Interchange (XMI) Specification
https://www.omg.org/spec/XMI/2.5.1/PDF

#GSN Goal Structuring Notation

https://www.goalstructuringnotation.info/


SysML要求図をGSNと比較する
https://www.bcm.co.jp/site/youkyu/youkyu93.html


#SPEM:Software & Systems Process Engineering Meta-Model Specification
https://www.omg.org/spec/SPEM/2.0/PDF

EPF (Eclipse Process Framework)

#UML: Unified Modeling Language

ISO/IEC 19501:2005 (OMG-UML VER 1.3) 
Information technology -- Open Distributed Processing -- Unified Modeling Language (UML) Version 1.4.2
https://www.iso.org/standard/32620.html

ISO/IEC 19505-1:2012 
Information technology -- Object Management Group Unified Modeling Language (OMG UML) -- Part 1: Infrastructure
https://www.iso.org/standard/32624.html

ISO/IEC 19505-2:2012 
Information technology -- Object Management Group Unified Modeling Language (OMG UML) -- Part 2: Superstructure
https://www.iso.org/standard/52854.html

#SysML: 
ISO/IEC 19514:2017 
Information technology -- Object management group systems modeling language (OMG SysML)
https://www.iso.org/standard/65231.html

#まとめ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51423/3534ed62-5cd5-f4c0-b3be-b5922b0b845b.png)


#参考資料(reference)

業務フローを考えるときに使うツール
https://qiita.com/kenji-yokoi/items/8b577dbcd94f4a5902f6
Electronと透過ウィンドウ

# ウィンドウを透過させる
BrowserWindowの引数によって、ウィンドウを透過させることができます。
transparentとopacityのどちらを使用するかによって、透過の適用範囲が変わるので、用途により。

## transparent を使用する場合
transparentは背景のみを透過し、ラベルやボタン等の要素は透過させません。

```JavaScript:index.js
win = new BrowserWindow({
  transparent: true,
  frame: false,       // フレームを非表示にする
  resizable: false    // ウィンドウリサイズ禁止
})
```
- frame  
ウィンドウに付随する何かがあると、transparentが効かない模様。  
frameは勿論、Developer Toolsも同様なので、Undockしておく必要あり。
- resizable  
resizableが有効だと、一部環境によっては透過が機能しなくなる可能性があります。[^1]

## opacity を使用する場合
opacityは背景・要素・フレーム・Developer Tools全てを透過させます。

```JavaScript:index.js
win = new BrowserWindow({
  opacity: 0.3
}
```
# ウィンドウを透過させ、マウスイベントを無視する

透過ウィンドウの上から他のウィンドウを操作したい場合、透過ウィンドウにマウスイベントを無視させる必要があります。

## 一切のマウスイベントを無視する
*setIgnoreMouseEvents(true)*を指定することで、ウィンドウがマウスイベントを受け付けなくなります。

```JavaScript:index.js
win = new BrowserWindow({
  transparent: true,
  frame: false,
  resizable: false,
  alwaysOnTop: true  // 常に最前表示 処理には関係ないけど、恐らくセットで使うはず
})

win.setIgnoreMouseEvents(true)
```

## 特定の要素ではマウスイベントを受け取る
例えば、背景やラベルではマウスイベントを無視したいが、ボタンだけは押せるようにしたい、といった場合。
マウスポインタの位置に応じて、都度setIgnoreMouseEventsを呼び出す必要があります。

```JavaScript:index.js
win = new BrowserWindow({
  transparent: true,
  frame: false,
  resizable: false,
  alwaysOnTop: true
})

// forwardオプション: mouseenterやmouseleaveといったイベントを検知できるようになる
// clickが貫通するのは変わらず
win.setIgnoreMouseEvents(true, { forward: true })
```

```Vue:App.vue
<template>
  <div>
    <label>無視したいラベル</label>
    <button
      v-on:mouseenter="onMouseEnter"
      v-on:mouseleave="onMouseLeave"
    >
      押したいボタン
    </button>
  </div>
</template>

<script>
const win = require('electron').remote.getCurrentWindow()

export default {
  methods: {
    onMouseEnter () {
      // 要素にマウスポインタが乗っている間、マウスイベントの無視をやめる
      win.setIgnoreMouseEvents(false)
    },
    onMouseLeave () {
      // 要素からマウスが離れたら、マウスイベントを無視する
      win.setIgnoreMouseEvents(true, { forward: true })
    }
  }
}
</script>
```

# 参考
- [Frameless Window](https://electronjs.org/docs/api/frameless-window)

[^1]: 具体的にどうすれば機能しないのかは不明でした……。が、フレームを非表示にする以上は不要ですし、ついでに切っておくが吉？
LocalStackのDynamoDBへ登録してみた

## 目的
LocalStackを使ってAWSローカル開発できる環境を作る。
合わせてDynamoDBに登録してみる

## 前提
・サーバ：Linux(CentOS7)
・クライアント：Windows
・クライアントアプリ：C#(.NET4.6)
・AWSCLIインストール済み
・Dockerインストール＆起動済み

## LocalStackのインストール
### Localstackを取得

```
$ docker pull localstack/localstack
```

### AWSプロファイル設定
```
$ aws configure --profile localstack

AWS Access Key ID [None]: {AccessKey}
AWS Secret Access Key [None]: {SecretAccessKey}
Default region name [None]: {Region}
Default output format [None]: json
```
テスト時は適当なアクセスキーとシークレットアクセスキーを設定

### Localstack起動
```
$ docker run -d -p 4567-4578:4567-4578 -p 8080:8080 localstack/localstack
```
クライアントからアクセスできるよう起動ポートを開けておきます。

### DynamoDBテーブル作成
適当にテーブルを作成します

```
$ aws --endpoint-url=http://localhost:4569 dynamodb create-table --table-name hira --attribute-definitions AttributeName=Id,AttributeType=S --key-schema AttributeName=Id,KeyType=HASH　--provisioned-throughput ReadCapacityUnits=1,WriteCapacityUnits=1
```
確認

```
$ aws --endpoint-url=http://localhost:4569 dynamodb describe-table --table-name hira
```

## クライアントからの登録
### C#アプリからのPUT処理
``` App.config
<?xml version="1.0" encoding="utf-8" ?>
<configuration>
    <startup> 
        <supportedRuntime version="v4.0" sku=".NETFramework,Version=v4.6.2" />
    </startup>
    <appSettings>
      <add key="AWSProfileName" value="{Profile}"/>
      <add key="AWSRegion" value="{Region}" />
      <add key="AWSAccessKey" value="{AccessKey}"/>
      <add key="AWSSecretKey" value="{SecretAccessKey}"/>
    </appSettings>
</configuration>
```

``` App.cs
using System;
using Amazon.DynamoDBv2;
using Amazon.DynamoDBv2.Model;
using Amazon.DynamoDBv2.DocumentModel;

namespace TestApp
{
    class Program
    {
        private static AmazonDynamoDBConfig clientConfig = new AmazonDynamoDBConfig
        {
            ServiceURL = "http://{ホスト}:4569",
            UseHttp = true
        };
        private static AmazonDynamoDBClient DynamoDBClient = new AmazonDynamoDBClient(clientConfig);
        private static Table table= Table.LoadTable(DynamoDBClient, "hira");
        static void Main(string[] args)
        {
             var doc= new Document();
             doc["Id"] = "1";
             doc["name"] = "hira";
             table.PutItem(doc);
         }
     }
}
```
実行して登録されたか確認

```
$ aws --endpoint-url=http://localhost:4569 dynamodb get-item --table-name hira --key '{ "Id": {"S": "1" }  }'
{
    "Item": {
        "name": {
            "S": "hira"
        },
        "RequestId": {
            "S": "1"
        }
    }
}
```