OmniAICreator/Qiita-1.07M huggingface dataset:
Electronで半透明なウィンドウを作る方法 2019年版

Electronで半透明なウィンドウを作る方法を調べても古い方法しかなかなか見つからなかったので、最新のやり方をメモしておきます。
2019/03 現在のバージョン(`4.1`系)ではウィンドウを半透明にするために**CSSを使う必要はありません**。

２つ方法があります。

## 方法1

```js
win = new BrowserWindow({
  width: 800,
  height: 600,
  opacity: 0.5 // これだけ！
})
```

これだけでウィンドウが半透明になります。1で不透明、0で完全に透明です。

## 方法2

```js
win = new BrowserWindow({
  width: 800,
  height: 600,
  transparent: true, // これと
  backgroundColor: '80FFFFFF' // これだけ！
})
```

こちらの方法の場合、背景色だけが半透明になるので、その上の要素(文字など)は半透明になりません。
`backgroundColor`の値はCSSと違い`ARGB`(Alphaが最初)な点に注意しましょう。

### 参考

- https://electronjs.org/docs/api/browser-window?q=mouseleave#new-browserwindowoptions
Masonite をHerokuで公開する方法

# 1.  Procfile ファイルを追加する
[Procfile](https://devcenter.heroku.com/articles/procfile) をプロジェクトのトップにつかします


```python
web: gunicorn wsgi  --log-file -
```
git に追加

# 2. Heroku　に新規アプリケーションを追加する。

```sh
$ heroku create
```

# 3. git remote　を追加する。

```sh
$ heroku git:remote -a {app-name}
```

# 4. Herokuアプリケーションを公開する
```sh
$ git push heroku master
```

詳細は作者の [ポスト](https://dev.to/masonite/deploying-a-masonite-application-to-heroku-45jp)に公開されています。
Rails Tutorialの次に8 Beautiful Ruby on Rails Apps in 30 Days & TDD　〜Udemy感想その１〜

#はじめに
４月からエンジニアとして新社会人になります

内定もらってから1年くらいUdemyでプログラミング学習(主にWeb系)をしていて、
修了した講座も増えてきました
(大学での専攻は情報技術とは全く関係なく、内定頂いた時点でもバリバリ初心者でした)

メンターの方に感想をQiitaに書いてみたらと言われたので当時を思い出しながら書いていきます

同じように初心者からWeb系の勉強始める人の参考なれば嬉しいなあ

#使った講座
勉強したのはこれ↓
[8 Beautiful Ruby on Rails Apps in 30 Days & TDD - Immersive](https://www.udemy.com/8-beautiful-ruby-on-rails-apps-in-30-days/)

railsを使ってinstagramやHacker News等のウェブアプリを８個作る

時間は**計１６時間**、なのにまさかの**無料**


音声は英語、英語字幕はついてるけど自動生成なのでちょくちょく間違いアリ

ただ動画を見ながらなので言ってることが全部理解できてなくても何がしたいか、何言ってるのかはだいたいわかる

この講座に限らず、英語の講座の方が日本語の講座より内容が盛りだくさん(単純に１講座の時間が長い)なイメージ

セールになるとどちらも同じ値段になるので英語の教材選んどいた方がコスパはいいと思います



#その時の自分
コードを書きはじめて1年くらい（ほぼPythonのみ、Rubyはちょっとだけ）

Rails Tutorialは最後までやった、ただ理解できないとこは飛ばした

仕事ではrailsを使うと聞いてたの、Rails Tutorialの次の教材を探してた

#良かった点
- **無料！！**

無料です、ああ素晴らしい。。

Webの勉強興味はあるけどお金払ってまでやりたいかって言われるとなーって人はとりあえずやってみてください

railsの有料の講座もいくつかやってみましたが遜色ないと思います

 - **たくさんのアプリが作れる**

初心者あるあるかどうかはわからないんですが

僕の場合フレームワークのチュートリアルが終わった段階で

「うん、なんとなく言われた通りのものはできた。。。
**で、これを使ったら何が作れるの？**」

ってなったんですよね

この講座は８つアプリを作るので多くの機能を触るので
「画像のアップロードはこうやるのか。。」
「動画のカテゴライズって確かによく見るな」
「星５つのレーティングも付けれるのか！」
など**railsを使ってこんな機能が実装できるんだ**という気づきが多くありました

せっかくrails勉強したから何か作りたい、でも何を作ったらいいかわからない
って人もこの講座で８個もアプリ作ったら何かヒントがあるかも知れません


#今ひとつな点
 - **rail触ったことないとキツいかも。。**
 
これは僕の英語力が足りないのかも知れませんがrailsを全く触ったことない状態で
挑むのは厳しい印象でした

講座の最初にRuby on railsの説明、インストールの仕方、MVCの説明等もしてくれていますが
やっぱり初めてrails触る人は一旦Rails Tutorial等の日本語の教材をやった方がいいとおもいます

英語得意な方はガンガンいっちゃってください！

 - **長い。。笑**

今ひとつなわけじゃないんですが、、
盛りだくさんだと褒めといてあれなんですが、やっぱり長いです笑
最後までやるにはかなり時間がかかるので余裕を持った計画で取り組むといいとおもいます
（絶対16時間の倍以上かかると思うので）
講師も３０日でって言ってますしね

ただ１つ１つのアプリの作成はそんなに時間かからないので
そういう意味でも初心者には優しいです

#ちなみに
この講座なんですが講師がもう古いって言ってサポートが修了してます笑
ただ講座の受講はまだできるみたいですし基本的な部分を勉強するには
初心者にはオススメできると思います

#まとめ
半年ほど前に使った講座なのでうろ覚えのところもありますが
無料とは思えないほど盛りだくさんな講座でした

Rails Tutorial終わってさあ、どうしよっかなーって人はぜひやってみてください
pipenv環境でPyrightを利用する設定

@ITの記事[Microsoft、Pythonの静的型チェック機能を提供する「VS Code」プラグイン「Pyright」を公開](https://www.atmarkit.co.jp/ait/articles/1903/26/news103.html)によると、mypyなどよりも5倍以上も高速な型チェッカのVisual Source Codeのプラグインが先週から公開されているそうです。

[GitHubのリポジトリ](https://github.com/Microsoft/pyright)もあります。

Pyrightをpipenv環境で利用する場合には環境設定ファイルに指定しないと、サードパーティーのライブラリのimportに問題があると表示するようです。環境設定ファイルは、デフォルトではプロジェクトのルート・ディレクトリにあるpyrightconfig.jsonです。

設定にはpipenv --venvの出力結果が必要です。たとえばpipenv --venvの出力が/home/user1/.virtualenvs/test1-4AdBOHeoの場合には、以下の通りです。

```pyrightconfig.json
{
    "venvPath": "/home/user1/.virtualenvs/test1-4AdBOHeo"
}
```

軽く試した限りでは、細かい制御の設定が見当たらなかったり、表示されている問題をクリックしてもソースコードが表示されないことがあったりして、これからに期待という感じです。
Kotlinでdetektを使って複雑度を測る

## 動機

Kotlinで雑度度(complexity)を取りたい動機がある
ただし、lizardでは未対応らしく別のものを探してみる

メトリクスをそのまま図るというよりKotlin向けのツールキットを利用するのが良さそう


## detekt 
- [github](https://github.com/arturbosch/detekt)
- [サイト](https://arturbosch.github.io/detekt/index.html)

`Code smell analysis for your Kotlin projects` らしい

サイトのFetureリストにある、
Complexity report based on logical lines of code, McCabe complexity and amount of code smells
を利用して


## 使い方

gradle経由で利用出来るみたいだが、コマンドラインでの利用用途が多いのでQuickStartの方法でjarを作成する

```
git clone https://github.com/arturbosch/detekt
cd detekt
./gradlew build shadowJar
java -jar detekt-cli/build/libs/detekt-cli-[version]-all.jar --help
```

helpが表示されたところでjarを実行してみる
app/src/main 以下にKotlinのファイルがあるとして `-i`オプションで指定してみる

```
java -jar detekt-cli-[version]-all.jar app/src/main
....................................................................................................................................................................................................

19 kotlin files were analyzed.

Ruleset: comments
Ruleset: complexity - 4h debt
    ComplexMethod - 12/10 - [onMeasure] at XXX.kt:32:5 
    NestedBlockDepth - 4/4 - [onMeasure] at XXX.kt:32:5
    LongMethod - 79/60 - [showDirectionalMessage] at XXX.kt:32:5
...
```

LongMethodなどの解析もしてくれるが、ComplexMethodを知りたいのでgrepしたりして対応してみるのが良さそう
また統計情報も出してくれるので指標として確認してみましょう(下の数値は適当です)

```
Complexity Report:
        - 1161 lines of code (loc)
        - 942 source lines of code (sloc)
        - 690 logical lines of code (lloc)
        - 47 comment lines of code (cloc)
        - 142 McCabe complexity (mcc)
        - 146 number of total code smells
        - 4 % comment source ratio
        - 181 mcc per 1000 lloc
        - 226 code smells per 1000 lloc

Project Statistics:
        - number of properties: 113
        - number of functions: 52
        - number of classes: 31
        - number of packages: ５
        - number of kt files: 19
```

lizardのAvgCCNは上記のmccをfunctionsで割った値になりそう
Node.js 6.10で動いているAWS Lambdaの関数をAWS CLI + jqで調べる

Node.js6.10のランタイムもいよいよEOLですね。

-> [4月1日にNode.js 6.10のサポートが終了になります](
https://forums.developer.amazon.com/articles/202870/finish-nodejs-v610-support.html)

ということでざっと対象のLambdaを調べてみましょう。


```bash
$ aws lambda list-functions | jq '.Functions[] | select(.Runtime == "nodejs6.10") | .FunctionName' -r
faultline-v0-projectsList
faultline-v0-occurrencesGet
example-alexa
faultline-v0-errorsDelete
faultline-v0-errorsGet
candidate-service-dev-candidateSubmission
faultline-v0-occurrencesList
faultline-v0-encrypt
faultline-v0-callNotifications
faultline-v0-deleteExpiredErrors
faultline-v0-projectsDelete
faultline-v0-errorsPost
faultline-v0-errorsPatch
sls-forms-development-sendMail
faultline-v0-errorsList
```

## 注意点
かならず全件とってくるわけではないので要注意です。
`NextToken`がレスポンスにある場合は、まだ後ろに控えてる可能性あります。

## 追記
いろいろ考えてたら面倒になったので、NPMでCLIツールにしました。

LambdaのRuntimeバージョンとか調べるのがめんどくさくてCLIツールにした話:https://wp-kyoto.net/lambda-function-search/
業界業種未経験者からのエンジニア転職記　その１

こんにちはー！

業界業種未経験でITエンジニアに転職活動中のJakigannです...。
新卒入社してから約3年ギリギリ第二新卒いけるかの境目なので前から行きたかったITエンジニアに思い切って転職活動中です。
もう26だから業界変えるなら今しかないんじゃ...。という危機感がありまして...。

※以下日記のようなものなので読んで得られるものはないかもしれません


プログラミングは独学でUnityとC#を触ってゲームを(幼稚園児でも作れるレベル)作ってました。
後、学生時代にVBAをちょろっとやったぐらい。
ゲーム業界での経験を積みたくて入りやすいソーシャルゲーム運用・開発会社を中心に応募しています。

でも実際の業務で求められるスキルというか熟練度がわからなくて心配です...。
Unityなら学生でも勉強していけるので正直「専門の新卒レベル」ぐらいの実力しかないと思ってます。

それで色々と今後について悩んでいるのですが...。
何で悩んでいるのかと言えば「選択肢の多さ」なんですよ。

1. 十数社受けて現在面接まで行ったのが数社、どれもソーシャルゲーム会社ですが面接に進んでいるのが数社あって結果待ち(つまり無い内定状態

2. 業界業種未経験でも偽装派k...ｺﾞﾎｺﾞﾎならいけますからね(根拠のない自信

3. 仮に全滅してもRubyとかのスクール行って、何かポートフォリオになるもの作って、転職活動すれば大体大丈夫じゃない？(根拠なし

4.在職中の会社からIT部に異動したらどうだ?とも声を掛けて頂いていてどれにすればええのやら:frowning2:

②は最終手段ですが恐らーくどこかしら受かりますし(根拠のない自信)
③も生活費やらスクール代やらで数十万円(住居手当とかがなくなるため)は掛かりますがその分勉強に打ち込めるので安いもんだと思ってます。
④は経済的に安定しながら実務兼勉強できるので中々魅力的...だけどシステム開発なのでJavaしか使わないかも?(確認中
①も正直なところソシャゲーは全くやらないので興味ない...けどいきなりコンシューマーは無理＆ゲーム業界での経験積みたい^o^

「お前ぶれっぶれじゃねーか！」と怒られそうですが
いやだってIT言語(特にWeb系)ならどこでもいつでも勉強できるじゃないですか！
Web系言語(Html+CSS,JavaScript,PHPやらやら)も最近勉強してるんですが楽しくて...^o^
C#だと闇の中をウロウロする感じですけどこれらは成果が目に見えやすくていいですね。
Html+CSSはあまりにもわかりやすすぎて感動しました。(その分使えても自慢になりませんが...

Html+CSSは勉強(Progateとかで)で慣れてきたので今日か明日あたりからウェブページコピーしていって、早くコーディング案件を受けれるぐらいに慣れていきたいですね(副業のため&やっててたのしい

「とりあえずお前は何をしたいんだ？」と言われると当面の目標というかやりたいことがあって
1. UE4でFPSを作る
2. UE4でシェーダーｺﾞﾘｺﾞﾘのカットイン(格闘ゲーのフィニッシュ)を作る
3. Web系言語を使って月5万ぐらいの副収入を得る
4. UE4でVRゲーかミニゲーム作ってどこかに出展する

「Unityどこいったの！？」となりますが正直に言うとグラフィックの質感がUnityよりUE4の方が好きなんですよね...なのでUE4は絶対に極めたい!
でもUE4は最近やり始めたばかりだし、C/C++なんて触ったことないんですよね^o^
BlueprintがあるのでC++は極めなくても良さそうですが実際その手のゲーム開発会社に行くとなると
C++でもコーディングするんじゃないかな？と考えてます。
むしろBlueprintだけなら誰でもできるので競合が:frowning2:
それとUE4募集している会社様がUnityと比べると圧倒的に少なくて^o^ 後スクールもない？（東京

結論から言うと"UE4やりながらWeb系の勉強もやりたい"が本音ですね。
なんでWeb系もやるのかというと、基本的にWeb系(特にRuby)だとベンチャーがよく採用しているそうなので０から実装からのマーケティングまでやる実務経験を積めそうなのがいいんですよ。
それに学習しやすいので成果が出るまで短いというのもいいですよね。
マーケティングの勉強にもなりますし、何よりホワイト(脳内ベンチャー図)なので定時上がり後にUE4で遊べるんじゃないかーってところが夢ありますね...! (そのためにポートフォリオ作らなきゃ^o^
交渉してリモートワークできれば空いた時間で勉強＆UE4ｺﾈｺﾈでスキルマックスエンドじゃないですか！！(希望的観測

ソシャゲー会社(まだ受かってない)はゲーム業界での経験積みながらUnityやらC#やらの勉強できるのがいいですよね。実際のゲーム運営がどうなってるのかわかるのもいいですし。
ただ恐らく超激務の可能性が...。実務でやりながら勉強はできますけど、業務外でも勉強していかないと詰みだと思ってるので恒常的に残業しているような環境にはあまり身を置きたくないのが心情です。
(身体にも悪いですしね)　何よりソシャゲー自体に興味が...^o^ 

結局自分でゲーム作るとなってもTwitterやらブログやらでコツコツ宣伝しないといけないのでWeb系の実務(コーディング,SEO,マーケティング)は絶対役に立つと思ってます。
そう考えるとWeb系に入ってOFFで趣味程度にコツコツUE4で遊んで色々と作って出展も十分アリだと思うんですよ。言語は違いますが開発経験は付くので悪くないじゃん...!という感じです。

なので結論を申し上げますと...

            "ポートフォリオができるまで、どこでどんな経験を積みながら時間を稼ぐか？"

という問題になってるんですよ。
ポートフォリオあれば転職できる根拠にはなりませんがコツコツやってればどこか採ってくれるんじゃないかって思ってます(希望的観測)

とこんな感じで色々と考えるとパターンがありすぎてﾄﾞﾝｶﾞﾗｶﾞｯｼｬﾝ状態なんですよ。
皆さんだったらどんなパターンを選ぶのか気になります。
Android 「エラー: LinkedHashMapのEntryはpublicではありません。パッケージ外からはアクセスできません」

何かのライブラリのバージョンを上げた際に以下エラーが出てしまいまして、

```
Uncaught translation error: com.android.dx.cf.code.SimException: invalid opcode ba (invokedynamic requires --min-sdk-version >= 26)
```
こちらによると、
https://stackoverflow.com/questions/45862140/invokedynamic-requires-min-sdk-version-26
以下を追加すればよいみたいでした。

```java

android {
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
```
しかし、これを追加した際に、以下部分で件名のエラーがでているようでした。

```java
	LinkedHashMap<String, String> rokuyoMap = new LinkedHashMap<String, String>(){
		@Override
		protected boolean removeEldestEntry(Entry<String, String> eldest) {
			return size() > 5;
		}
	};
```

`Map.Entry` と明示的に？書くことでこのエラーは解消されました。
LinkedHashMapの中のEntryの記述を見ても、`Map.Entry`となっていたので、こう書くのが普通なのでしょうかね。
今まで、なんでエラーになっていなかったか不思議
SeleniumでHeadless Chromeを使ってみよう(winodows編)

##鬱陶しい画面にはHeadless Chrome

業務でSeleniumを使うことがありますが、使い始めて一か月ほど画面を開かずに使える方法を全く知りませんでした。
お恥ずかしい話ですが、webdriverのスクリーンサイズを最小にして使っていました。

##optionsを使って設定
Seleniumはモジュールが結構多いので、ほかにも色々試せそうです。

```python3
from selenium import webdriver
from selenium.webdriver.chrome.options import Options

url = "https://www.google.com/"

options = Options()
options.add_argument("--headless")

driver = webdriver.Chrome("exeファイルのあるディレクトリ",chrome_options=options)

driver.get(url)
driver.save_screenshot("google.png")
driver.close()
```
NVIDIA JetBot の日本版BOM（部品リスト）

NVIDIA の Jetson Nano がGTCで発表され、同時に発表されたAIプロジェクトの [JetBot](https://github.com/NVIDIA-AI-IOT/jetbot) も注目されています。

日本で作るなら、どのような部品が使えるか、考察してみました。

本家 GitHub レポジトリ；　https://github.com/NVIDIA-AI-IOT/jetbot
本家 GitHub の Wiki ； https://github.com/NVIDIA-AI-IOT/jetbot/wiki
本家 Wiki の BOM（部品表）； https://github.com/NVIDIA-AI-IOT/jetbot/wiki/Bill-of-Materials 


##ロボット部品

|  **アイテム** | **仕様** | **数** | **価格** | **リンク** | **補足** |
| --- | --- | --: | --: | --- |--- |
|  カメラ | Raspberry Pi Camera Module V2-8 Megapixel (IMX219) | 1 | 3,800 円 | [アマゾン](https://www.amazon.co.jp/dp/B01ER2SKFS/) |
|  広角レンズ | 160-degree FoV lens | 1 | 2,499 円 | [アマゾン](https://www.amazon.co.jp/dp/B07HMXJ9Y1/),  [eBay](https://ebay.us/Fz7HGd) | 
|  Wi-Fi USB ドングル | "WLI-UC-GNM2S" | 1 | 1,150 円 | [アマゾン](https://www.amazon.co.jp/dp/B071DRF9FN/) | 
|  Motor | "TT motor" with 200RPM gearbox | 2 | 760円 | [Adafruit](http://adafru.it/3777), [アマゾン](https://www.amazon.co.jp/dp/B01HTC5C86/), [2](https://amzn.to/2MU9zPb) | 
|  Wheel | 60mm wheel for "TT motor" | 2 |  | [Adafruit](http://adafru.it/3757 ) |
|  Motor driver | TB6612, PCA9685 | 1 | 2,618円 | [Adafruit](http://adafru.it/2927), [マルツ](https://www.marutsu.co.jp/pc/i/10560550/) |
|  樹脂ボール | 1-inch POM ball | 1 | 359円 | [モノタロウ](https://www.monotaro.com/p/0847/0428/) |
|  バッテリー | 2x output, 10000mAh | 1 | 1,599円 | [アマゾン](https://www.amazon.co.jp/dp/B07MGRQDZF/) | `Update!` 本家BOMと同じバッテリが日本でもPSE付きで入手できるようになったようです |
|  USBケーブル  | L型コネクタ 右向き | 1 | 799円 | [アマゾン](https://www.amazon.co.jp/dp/B071D8TF8G/) |
|  USBケーブル  | L型コネクタ 左向き | 1 | 799円 | [アマゾン](https://www.amazon.co.jp/dp/B06ZY279BK/) |
|  PiOLED display | 128x32 OLED | 1 | 1,962円 | [Adafruit](http://adafru.it/3527), [マルツ](https://www.marutsu.co.jp/pc/i/26324854/) |
|  ピンヘッダー | 2.54㎜ ピッチ、2列、ライトアングル | 1 | 839円 | [Adafruit](http://adafru.it/1541), [アマゾン](https://www.amazon.co.jp/dp/B017IPVCYW/) |
|   |  |  | **17,184 円** |  |

Jetson 本体と必需品
0からはじめるelm-ui#0-element_to_html

# 今日覚えること

`Element msg`から`Html msg`に変換する方法

```elm
layout : List (Attribute msg) -> Element msg -> Html msg
```

```elm
import Element exposing (..)
main = layout [] <| column [] [ text "Hello, elm-ui" ]
```

# はじめに

elm-uiは新時代のすーぱーUIレイアウトライブラリなんですが初めてElmやっていきなりelm-uiやろうっていっても全然わかんないですよね

なので今日は0からはじめようと思います

# `Element msg`って？

`Html msg`型は触ったことありますよね？
elm-uiでは`Html msg`の代わりに`Element msg`という独自の型が使われます

> `Element msg`はHTMLに逐語訳のように単純に変換されるわけではなく、styleタグが生えたり、うまくレイアウトされるようにdivを何個も重ねられたりします
HTMLとCSSをうまく抽象化（？）できてるところがelm-uiのいいところです

`Browser.element`などが受け入れるのは`Html msg`だけなので必然変換しなければなりません

# `layout`で変換する

```elm
import Element exposing (..)

view : Model -> Html msg
view model =
    layout [] <| column [] [ text model.message ]
```

[`layout`](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element#layout)関数を使えば変換できます。特に解説することはありませんが型でも眺めてふんふんしましょう

```elm
layout : List (Attribute msg) -> Element msg -> Html msg
```



## 発展`layoutWith`

実はもう一つ変換する関数があります
packageサイトで`-> Html`とページ内検索してみましょう。（Html型に変換する関数なので当然型には`-> Html`が含まれるはずです）

```elm
layoutWith :
    { options : List Option }
    -> List (Attribute msg)
    -> Element msg
    -> Html msg
```

こっちはちょっと難しいですね。でも別に使わなくてもいいので特に解説なんてしないです。なんかオプションがつけられるんだなってことだけ覚えて帰ってください


# おわりに

`layout`で変換できますからね。やってみましょう
MirageSoloのビデオパススルーモード（2019/03/27時点）

#2019/03/27時点でベータ機能です。自己責任でお願いします。

##MirageSoloでビデオシースルーを有効化
1.MirageSoloを最新アップデート
2.ベータ機能から『ビデオシースルー機能』を有効化
3.VR設定からセーフティー警告の有効化（開発者は無効にしてるはず）
4.再起動
5.セーフティーエリアから出るとビデオシースルー機能が有効化される

#従来のビデオシースルートの比較
・モノクロのグレースケール
・遅延がかなり少ない
・画角が広い
・複眼で距離感がわかる。（カメラ位置が前に出ているので少し違う）
・解像度、FPSは低い
・明るさ自動調整機能付き
・アプリから使えるっぽい（[SDK公開されました](https://qiita.com/koukiwf/items/2c94b1f7cc9e8f5f9a84)）

#注意事項
・今までのシースルー機能より歩きやすいとは言え、危険性は変わらず
・バッテリーが切れたら映像も消えるので危ない
・何かの拍子でホームに戻って映像が消えることがあり危ない
・端末で表示される警告に従って自己責任でお願いします。
・無事故で行きましょう。
Sourcery（Stencil）で自前の変数の作り方

# 本文

[Sourcery](https://github.com/krzysztofzablocki/Sourcery) でメタプログラミングやる時に、たまには自分で変数を作りたい時もあるかと思います。例えば「この型とこの型とこの型、内部実装が少しずつだけ違うのでメタプログラミングで実装したい、でもそもそも宣言も何もないからメタプログラミングで型名をまず変数宣言しないといけない」と言ったシチュエーションです。

残念ながら今の Sourcery のサンプルのほとんどは、 `Equatable` プロトコルの適合などのような、あとで extension で対応するものばかりで、最初から用意された変数（例えば `types.implementing.AutoEquatable` のようなものばかりです。自分で変数宣言どうすればいいかの情報が全くありませんでした。

そして Sourcery が内部で使うスクリプトは [Stencil](https://github.com/stencilproject/Stencil) ですが、こちらも公式ドキュメント含めてそう言った情報特に見つかりませんでした…

が、どうにか関連プロジェクトの [StencilSwiftKit](https://github.com/SwiftGen/StencilSwiftKit) で情報見つかりました！

```stencil
{% set variable "value" %}
```

もしくは

```stencil
{% set variable %}value{% endset %}
```

です！

そして配列を入れたいときは、残念ながら直接配列を入れる方法は見つかりませんでしたが、文字列の演算子 `|split:` を使えば文字列から配列が作れるので、今回の場合はこのように作れました：

```stencil
{% set array "item1,item2,item3"|split:"," %}
```

これで `[item1, item2, item3]` の配列 `array` が作られます。

# 余談

実はなぜこれが欲しかったかというと、今まだリリースまで持っていけてないですが、Observer パターンだけに特化したライブラリー [SteinsKit](https://github.com/el-hoshino/SteinsKit) を作ってて、そこでほぼほぼ同じ実装になる `Variable` と `LazyVariable` があって、それぞれ手書きで作るの大変だなと思ってメタプログラミングで頑張ろうと思い、いきなりこの「型名の変数作りたいんだけどどうすればいいんだっけ」の壁にぶつかりました。ちなみに最終的にできたのは[こちらのファイル](https://github.com/el-hoshino/SteinsKit/blob/a54067d91dc697926d05f0e6ed0b1797aacccf44/SteinsKit/Variables/Variable.stencil)です。
AD変換する際に1024で割っている事に対する疑問

# AD変換とは
AD変換(アナログ/デジタル変換)とは，
アナログ信号(信号の変化が時間的に連続している信号)をデジタル信号(0と1で構成された信号)に変換する機能の事です．
光センサや温度センサ，電流センサなどが感知した値は数字で表すことのできないアナログ信号です．
しかしマイコン内部で扱う値は全てデジタル信号なので，AD変換が必要になるわけです．

# AD変換における疑問点
茶番はこれくらいにして本題に入ろう．
例えばの話，Arduinoでは10bitのAD変換器が搭載されているので分解能は2^10=1024となり，測定上限電圧が5Vなので，0~5Vを0~1023の値にAD変換しているわけだ．
だったら
(測定電圧をAD変換した値) ÷ **1023** × 5 = (測定電圧)
が正解のはず．
でも巷のAD変換を使っているサイトを見ると1024で割ってるやつが結構ある．
~~**これは完全な誤りである**として，彼らのやり方は誤差を生まないのか？~~

---
(2019/03/30追記)
コメントで指摘されましたが私の勘違いでした．1024で割るのが正解です．
以下に情報を追記...

---

Arduino UNOに載っているマイコン[Atmega328Pのデータシート](https://www.sparkfun.com/datasheets/Components/SMD/ATMega328.pdf
)のP261，21.7 ADC Conversion Resultに

```math

ADC = \frac{V_{in} \times 1024}{V_{ref}}

```

と記載されてます．
更にそのあとに，
> 0x000 represents analog ground, and 0x3FF represents the selected reference voltage minus one LSB.

つまり0x000 ~ 0x3FF(0 ~ 1023)で電圧値が表される(つまりその値が返ってくる)．
結局1023なのか1024なのかという話なのですが，基準電圧が5Vであれば
5(V) ÷ 1024 ≒ 4.8828(mV)
に対してデジタルで区切るわけなので，以下の表の様な電圧範囲がADCの値になります．(3.3Vの場合はレンジが違うだけです)

| Input voltage(V) |ADC(AnalogReadの返り値)|
|:-----------------:|:---------------------:|
| 0 ~ 0.0049未満     |                    0 |
| 0.0049 ~ 0.0098未満|                    1 |
| 0.0098 ~ 0.0146未満 |                    2 |
| ...                 |                 ... |
| 4.9902 ~ 4.9951未満 |                 1022 |
| 4.9951 ~ 5(未満？)      |                 1023 |

厳密には$V_{ref}=V_{in}$なら1024になると思いますが，測定装置に繋いだ時点でインピーダンス的に存在しないでしょうし，なによりリファレンスガイドが言ってるんで1024は返って来ないです，はい．
以上，1024で割った値をADC変換の際の下限値にする事で上手く0~1023になってることが分かりました．
詳しい話は以下のサイトにも載ってます．
[ArduinoでセンサIC(アナログ電圧出力)を使う(詳しい話)](https://n.mtng.org/ele/arduino/tutorial008.html)

---
(2020/06/05追記)
コメントで指摘されました．
ADCの値からInput voltage(V)の値を求める際には厳密には上で示した表のようにはなりません．

```math

ADC = \frac{V_{in} \times 1024}{V_{ref}}

```
を逆算して$ V_{in} $を導く必要があります．
その際，$ V_{ref} $はいくつかの基準電圧を選択可能ですが，どれも誤差が大小なりに存在するので実測値を用いるのが良さそうです．
詳しくはコメント参照してくれ．若しくはデータシートの「21.2 Overview」読め．
あと実測についてのサイトを個人的にメモ．
[#5-10　電源電圧を計測する]
(http://hello.world.coocan.jp/ARDUINO5/arduino5_a.html)

---

# まとめ
値は0~1023で返ってくるが，計算は1024を使う．
ADCの値で計算した電圧値は，((ADCで計算した値)+0.0049V)の範囲内の値という事に気を付けよう．
2点間の距離、中点の座標を求める

#### 数学公式
平面上の2点 A(x1, y1), B(x2, y2)  間の距離は、
$$ AB = \sqrt{(x_2 - x_1)^2 + (y_2 - y_1)^2}$$
中点の座標は、
$$ \left(\frac{x_1 + x_2}{2},\frac{y_1 + y_2}{2} \right)$$

---
空間の2点 A(x1, y1, z1), B(x2, y2, z2)  間の距離は、
$$ AB = \sqrt{(x_2 - x_1)^2 + (y_2 - y_1)^2 + (z_2 - z_1)^2}$$
中点の座標は、
$$ \left(\frac{x_1 + x_2}{2},\frac{y_1 + y_2}{2},\frac{z_1 + z_2}{2} \right)$$

---
#### AutoLISPで求める
距離は ```distance``` 関数で求める。

```scheme
;; 2点の中点を計算
(defun point:GetMidpoint (a b)
	(mapcar (function (lambda (a b) (/ (+ a b) 2.))) a b)
)
;; < Example >
;; 2D
(distance '(4 1) '(-1 4))
;; -> 5.83095
(point:GetMidpoint '(4 1) '(-1 4))
;; -> (1.5 2.5)

;; 3D
(distance '(-5 1 2) '(4 -1 -4))
;; -> 11
(point:GetMidpoint '(-5 1 2) '(4 -1 -4))
;; -> (-0.5 0.0 -1.0)
```
---
#### AutoCAD .NET(C#)で求める
2D点は```Point2d```構造体、3D点は```Point3d```構造体を使う。
距離は ```GetDistanceTo``` メソッドで求める。

```csharp
// 2点の中点を計算(2D)
public static Point2d GetMidpoint2d(Point2d a, Point2d b) {
    return new Point2d((a.X + b.X) / 2, (a.Y + b.Y) / 2);
}

// 2点の中点を計算(3D)
public static Point3d GetMidpoint3d(Point3d a, Point3d b) {
     return new Point3d((a.X + b.X) / 2, (a.Y + b.Y) / 2, (a.Z + b.Z) / 2);
}

// < Example >
// 2D
var pt2d1 = new Point2d(4, 1);
var pt2d2 = new Point2d(-1, 4);
pt2d1.GetDistanceTo(pt2d2);
// -> 5.83095
GetMidpoint2d(pt2d1, pt2d2);
// -> (1.5, 2.5)

// 3D
var pt3d1 = new Point3d(-5, 1, 2);
var pt3d2 = new Point3d(4, -1, -4);
pt3d1.GetDistanceTo(pt3d2);
// -> 11
GetMidpoint3d(pt3d1, pt3d2);
// -> (-0.5, 0.0, -1.0)
```

---
#### ObjectARX(C++)で求める
2D点は```AcGePoint2d```クラス、3D点は```AcGePoint3d```クラスを使う。
距離は ```distanceTo``` メソッドで求める。

```cpp
// 2点の中点を求める (2D)
satic AcGePoint2d getMidpoint2d(AcGePoint2d a, AcGePoint2d b) {
    return AcGePoint2d((a.x + b.x) / 2, (a.y + b.y) / 2);
}

// 2点の中点を求める (3D)
static AcGePoint3d getMidpoint3d(AcGePoint3d a, AcGePoint3d b) {
    return AcGePoint3d((a.x + b.x) / 2, (a.y + b.y) / 2, (a.z + b.z) / 2);
}

// < Example >
// 2D
auto pt2d1 = AcGePoint2d(4, 1);
auto pt2d2 = AcGePoint2d(-1, 4);
pt2d1.distanceTo(pt2d2);
// -> 5.83095
getMidpoint2d(pt2d1, pt2d2);
// -> (1.5, 2.5)

// 3D
auto pt3d1 = AcGePoint3d(-5, 1, 2);
auto pt3d2 = AcGePoint3d(4, -1, -4);
pt3d1.distanceTo(pt3d2);
// -> 11
getMidpoint3d(pt3d1, pt3d2);
// -> (-0.5, 0.0, -1.0)
```
RegularExpressionAttributeを継承した独自ValidationでClient Validationしたい

半角英数のみなどの入力チェックをいちいち一からValidationを作るのは面倒。
とはいっても全ての項目にRegularExpressionAttributeをいちいち書くのも面倒。
そんな時、RegularExpressionAttributeを継承した独自Validationを作る場面は良くあると思います。

実際に作ってみると確かにSever Validationは効くのだが、RegularExpressionAttributeで指定したときには効いていたClient Validationが動作しなくなります。

これは、独自Validationサブクラスを作成してプロパティに適用しただけだと、どのClient Validationを適用させるか判別できないためです。
独自ValidationサブクラスをValidatorProviderに登録すれば、Client Validationが動作します。

``` AlphaNumberAttribute.cs
    /// <summary>
    /// データ フィールドの値が半角英数かを検証する。
    /// </summary>
    {
        public AlphaNumberAttribute() : this(@"[a-zA-Z]+")
        {
        }
        public AlphaNumberAttribute(string pattern) : base(pattern)
        {
            ErrorMessageResourceName = nameof(Resources.Messages.AlphaNumber);
            ErrorMessageResourceType = typeof(Resources.Messages);
        }

    }
```

``` Global.asax.cs
    public class MvcApplication : System.Web.HttpApplication
    {
        protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            BundleConfig.RegisterBundles(BundleTable.Bundles);
            ModelValidatorAdapterConfig.RegisterModelValidatorAdapters();
        }
    }
```

``` ModelValidatorAdapterConfig.cs
    public static class ModelValidatorAdapterConfig
    {
        public static void RegisterModelValidatorAdapters()
        {
            // リソース名の設定
            DefaultModelBinder.ResourceClassKey = nameof(Messages);
            // アダプターの設定
            // 第1引数は独自Validationサブクラス、第2引数はRegularExpressionAttributeAdapter を指定
            DataAnnotationsModelValidatorProvider.RegisterAdapter(
                typeof(AlphaNumberAttribute), typeof(RegularExpressionAttributeAdapter));

        }
    }
```

元ネタ
Inheriting from RequiredAttribute breaks client side validation on ASP.NET MVC 2 RC.
https://forums.asp.net/t/1528277.aspx?Inheriting+from+RequiredAttribute+breaks+client+side+validation+on+ASP+NET+MVC+2+RC+
【CraftCMS】管理画面のソート機能拡張

# タイトルと投稿日以外でソートしたい

サンプルソースに準じてみたけど動かなかったので色々検証してついに実現。（朝4時半）

```php:Modules.php

namespace modules;

use craft\elements\Entry;
use craft\events\RegisterElementSortOptionsEvent;
use yii\base\Event;

class Module extends \yii\base\Module
{
	public function init()
	{
		parent::init();

		//↓ここに書いてあることまんまだけどどこに組み込めばいいか分からず...
		// https://github.com/craftcms/cms/issues/2818
		// https://docs.craftcms.com/v3/extend/updating-plugins.html#plugin-hooks
		Event::on(Entry::class, Entry::EVENT_REGISTER_SORT_OPTIONS, function (RegisterElementSortOptionsEvent $event) {
			$event->sortOptions[] = [
				'orderBy' => 'field_XXXXXX',
				'label' => "セレクタで表示したいラベル",
				'attribute' => 'field:XXX',
			];
			
			$event->sortOptions[] = [
				'orderBy' => 'field_teriyaki',
				'label' => "TERIYAKI",
				'attribute' => 'field:54',
			];
		});
	}
}
```
## 要素解説

| key | 役割 |
|:------------|------------|
|orderBy | ソートのキーにしたいfieldを指定。<br>「field_」 + ハンドル名の形式で記述  |
|label | ソートセレクタに表示する名称。何でもOK。<br>Craft::t()で翻訳も可。  |
|attribute | 対象ハンドルのfield_id。 <br>「field:」 + id の形式で記述。  |

これを CRAFT_PATH/modules/Module.phpへ組み込み
（今回は他にモジュール使ってないのでそのまま上書き）

さらにCRAFT_PATH/config/app.phpを↓のようにする

```php:config/app.php
return [
	'modules' => [
		'control-panel' => \modules\Module::class,
	],
	'bootstrap' => ['control-panel'],
];
```

**おわり**
Android Pie対応についてまとめ

# Android Pieとは
公式：https://developer.android.com/about/versions/pie?hl=ja
Android 9.0のこと。
何故Pieかというと、毎versionでお菓子の愛称を付けているから。
6.0はMarshmallow、7.0はNougat、8.0はOreoだった。

# 機能的な変更点
参考：[【まとめ】Android Pie 9.0の新機能、特徴、レビュー、変更点、不具合](https://android-geek.net/matome-android-pie-9-0/)

* ホームボタンが廃止になり、バーになった。iPhone XのようなUXに
* 最近使用したアプリの表示が新しくなり、よく使うアプリが５つ表示された状態の画面になった
* アプリドロワーが新しくなり、頻繁に使用されるアプリが一番上に表示されるようになった
* 「アプリのダッシュボードの表示」を搭載
* 「アプリタイマー」機能の搭載（アプリの利用時間がグラフィックに表示できる）
* 端末を平面に置き、画面を下にして起動する「Shushモード」の搭載（自動的に音声通知と振動をミュートに）
* 「ビール」の絵文字デザイン変更
* テキスト拡大表示
etc

# 開発面でのAndroid 9移行対応について
公式：[Migrating to Android 9](https://developer.android.com/about/versions/pie/android-9.0-migration?hl=ja)

移行は「基本的な互換性の確認」と「targetSdkVersionを28にする対応」の二つのフェーズがあるとのこと。

## 基本的な互換性の確認
参考：[Behavior changes for all apps](https://developer.android.com/about/versions/pie/android-9.0-changes-all?hl=ja)
targetSdkVersionを変えなくても、Android 9ではアプリの動作に影響を与える可能性がある。具体的には、以下のような変更点があり、これによってAndroid 9では一部機能が動かないなどの可能性が存在する。

* non-SDKインターフェースの制限：一部APIでリフレクション経由などでのアクセスがブロックされる
* Cryptoプロバイダの廃止：`SecureRandom.getInstance("SHA1PRNG", "Crypto")` を呼び出すと、`NoSuchProviderException`がスローされる
* UTF-8デコーダが厳密になり、Unicode標準に準拠するようになる
* アイドル状態でカメラ、マイク、SensorManagerセンサーにアクセスできなくなる
* アプリスタンバイバケットの導入：アプリの使用頻度に応じてバケットが割り当てられ、優先度が変化する
* バッテリーセーバーの改善
* 電話番号や通話履歴へのアクセスの制限

## targetSdkVersionを28にする対応
参考：[Behavior changes for apps targeting API 28+](https://developer.android.com/about/versions/pie/android-9.0-changes-28?hl=ja)

* フォアグラウンド サービスを使用する際に FOREGROUND_SERVICE パーミッションをリクエストする必要がある
* ビルドシリアル番号のサポートの終了（Build.SERIALが常に"UNKNOWN"になる）
* プライベートDNS APIの考慮が必要
* `isCleartextTrafficPermitted()`がデフォルト`false`になる。必要に応じて`cleartextTrafficPermitted`を`true`に指定する必要がある
* アプリが複数のプロセス間で単一の`WebView`データディレクトリを共有できなくなっている
* ワールドアクセスが可能な Unix パーミッションを使用して、他のアプリとデータを共有できない
* 現在のデフォルトではないネットワーク上のネットワークトラフィックがカウントされ、そのトラフィックをクエリするために、`NetworkStatsManager`クラスのメソッドが提供される
* Apache HTTP クライアントのサポートが削除される
* 面積が0のビューはフォーカス不可
* 4桁および8桁の16進数CSS色を扱うために、[CSS Color Module Level 4](https://drafts.csswg.org/css-color/#hex-color)で策定された動作を有効にする必要がある
* ドキュメントのルート要素がスクロール要素である場合、適切な処理が実行される
* 保留されたアプリからの通知が、アプリ再開まで非表示になる

# Pie関連のリンク
https://github.com/operando/Notes/tree/master/potatotips_52
https://developers-jp.googleblog.com/2018/10/introducing-android-9-pie.html
https://feel-log.net/android/developer/android_9_pie_migrations_apps/

# その他のリンク
[[Android]Androidバージョンと対応するAPIレベル/コードネーム一覧](http://to-developer.com/blog/?p=2154)
[AndroidのAPI LevelとVersionの対応関係一覧表](https://feel-log.net/android/api-level/)
Nuxt.js 2.5.1 でnuxt-tsを脱するためにやった事

# 事の始まり

先日Nuxt.js + TypeScript での環境をやっとこさ構築したばかりなのに。ビルド中にあるメッセージが。

<img width="701" alt="スクリーンショット 2019-03-27 10.39.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/49585/fc791bc5-94f4-c118-3f68-b10b98403d71.png">

お？

https://twitter.com/nuxt_js/status/1108728812945227776

お？

nuxt 本体で TypeScript をサポートしてくれるので nuxt-ts はもう不要になったようです。早速削除していきましょう。

# やった事

yarn.lockの削除
----

`$ rm yarn.lock`

package.jsonの更新
----

`nuxt-ts` を `nuxt` に変更します。

`dependencies` 部分。

```diff
-    "nuxt-ts": "^2.4.5",
+    "@nuxt/typescript": "^2.5.0",
+    "nuxt": "^2.5.0",
```



`script` 部分。

```diff
-    "dev": "nuxt-ts",
-    "build": "nuxt-ts build",
-    "start": "nuxt-ts start",
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start",
```

Programmatic API / Middleware の更新
-----

ここは[公式のマイグレーションガイド](https://github.com/nuxt/nuxt.js/releases/tag/v2.5.0)そのまま。なのであまり理解していないですが、必要とのことなので。SSR で express を利用しているので、そのスクリプトを下記のように修正しました。

```diff
   const nuxt = new Nuxt(config)
++ await nuxt.ready()
```


tslint の削除
----
突然の `tslint command not found`. 
自分の勉強不足ですが、今まで使っていた `tslint` コマンドが利用できなくなってしまいました。なので `eslint` を利用することにします。公式でも `eslint` 推しのようです。
[Why ESLint and not TSLint ?](https://github.com/nuxt/nuxt.js/tree/dev/examples/typescript-eslint#why-eslint-and-not-tslint-)

`package.json` の script に以下 lint 用のコマンドを追加。

```diff
+    "lint": "eslint --ext .ts,.js,.vue --ignore-path .gitignore .",
+    "lint:fix": "yarn lint --fix",
```

lint 用の設定ファイル `.eslintrc.js` を作成します。

```diff
+module.exports = {
+  plugins: ['@typescript-eslint'],
+  parserOptions: {
+    parser: '@typescript-eslint/parser'
+  },
+  extends: [
+    '@nuxtjs'
+  ]
+};
```

`tsconfig.json` を修正。[ここ](https://github.com/nuxt/nuxt.js/pull/5079/files#diff-8404199e6ca4961076ae35d7afeb980aR5)を参考に実装しました。

```json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": [
      "esnext",
      "esnext.asynciterable",
      "dom"
    ],
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noImplicitAny": false,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@types/node",
      "@types/jest",
      "@nuxt/vue-app"
    ]
  }
}
```

＃eslint に変えるまで `--fix` でコードを整形してくれるという神機能を知りませんでした。便利。


yarn install
-----
最後に `$ yarn install` で完了です。


# 参考になった資料

- 公式のマイグレーションガイド
  - https://github.com/nuxt/nuxt.js/releases/tag/v2.5.0

- nuxt-ts を削除するための PullRequest
  - 本体やサンプルリポジトリなどから `nuxt-ts` を削除するための PR です。すでにマージ済みですが、どのようにファイルを変更していけば良いかを確認できます。
  - https://github.com/nuxt/nuxt.js/pull/5079/files
Clean Architecture

#Introduction 
Clean Architecture Principle is the application's core functionality which separate into three layers:
1. **Presentation Layer**: how the data presents to the user
2. **Domain Layer**: can be called as use case layer where the core logic of the application.
3. **Data Layer**: how data can be accessed.

![cleanCode.png](https://qiita-image-store.s3.amazonaws.com/0/279562/7f9fe9bb-c038-cee6-b232-fa42e99e0a4b.png)

Each layer has its own data model, and data can only be exchanged between layers and usually flow in one direction anytime data needs to be changed. At the data layer, every source of data should be represented using the repository data pattern.

Here is the given example in swift code 
**Organize Folder**
<img width="360" alt="Screen Shot 2019-04-04 at 3.12.29 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/279562/d490a400-879b-ceb0-163b-424427b96e9a.png">

*Note*: You can structure your folder as you like too, this is the example and basically I structured my project like this, so it is clean and easy to understand for who will work after me in the future (in case). It takes less time to understand the whole project.

Ideally, inside Presentation folder, I stored all the view files, there are collection of screens, one scene represents one view or one screen.
【20190327更新】Actions on Google 食らったリジェクトまとめ

## 概要
個人で開発している **Actions on Google**アプリの申請をリジェクト食らったので
そのリジェクト内容を残しておく自分用Memo

## Your Action's display name is different from its custom pronunciation.

> アプリのInvocation nameはDisplay nameを同一の読み方である必要があります。
許可される例外は以下のとおりです。
句読点、スペース、数字表記（例:12とじゅうに)、序数
なお、複合語にスペースを加えて1単語と見なされない場合、名前のミスマッチとして認識されることがあります。

**display name**は【DQX防衛軍スケジュール】とし、**Invocation name**を【防衛軍スケジュール】としていたのが問題だったようです。
【ディーキューテン防衛軍スケジュール】みたいなInvocation nameなら問題ないのかもしれません。

## Sample triggers incorrectly structured

> Sample Invocationsでは原則< Invocation name + Trigger Phrase（「〜と話す」等） >といったような、
アプリが必ず起動するようなフレーズでご申請頂く必要があります。
従いまして、以下のSample Invocationsではアプリ起動が確認できないため、承認致しかねます。
・「DQテン防衛軍スケジュール」
該当箇所を削除いただくか、本アプリがGoogleアシスタントで起動できる文言にご修正ただけますでしょうか。
Trigger Phraseの例は以下のURLよりご確認いただけます。
https://developers.google.com/actions/localization/languages-locales#japanese 

登録時点では「DQX防衛軍スケジュールにつないで」になっていたので、問題ないと思いますが
申請後に変えた記憶があるのでそのラグによるものかもしれません。
てかGoogleさんドラフト申請してる間各種情報更新できないようにしといてもらったらいいのに・・・

## Unable to complete action described

> Descriptionに記載されているような「DQX内コンテンツの防衛軍のスケジュールの案内」という動作は確認できませんでした。
説明の内容に提示された動作は全て機能するようご修正いただけますでしょうか。

確かにDescが少し曖昧だったと反省・・・
よりユーザーが本文を読んだ時に一発で理解できるような使い方を書いておかないといけないですね

## Mic is open without prompt

> ユーザが何を回答すればわからない（会話内容が終了したと思われる）場合、
アプリ側がマイクをオープンにすることはActions on Googleのポリシーに反します。
この場合、アプリ側は新たに問いかけを作成し会話を継続するか、会話を終了しなければなりません。

DialogFlowのIntentsページResponsesの **Set this Intent as end of conversation** にチェック入れるだけ

あとはもちろんコードベースで対応することもできる
参考 
[Dialogflow v2の会話を継続 or 終了させるメソッドの使い方](https://qiita.com/h-takauma/items/1c26d0e43b3a6ce849b9)

## Action includes advertising

> レビューチームでは本アプリに広告や販売促進の内容が含まれていることを確認しました。これはGoogle広告ポリシーに反しています。現在、会話内の広告、Update APIやプッシュ通知を使っての広告は認められません。商品やサービスの有料プロモーション、「販売促進」「提供」「広告」などといった文言を含むすべての広告は認められません。
例）
・Long DescriptionのTwitter ID

サポートサイトなど準備していないので、サポート用のTwitterアカウントを作成し、それをストア詳細に記載していました
これは広告のようです。みなさんお気をつけて！
ES6のimportとexport

```javaScript:myModule.js
const message = 'some message'
const name = 'Hugo'
const location = 'Tokyo'
const getGreeting = name => {
    return `welcome ${name}`
}

export { message, name, getGreeting, location as default }   
```

```javaScript:index.js
import myCurrentLocation, { message, name, getGreeting } from './myModule';
console.log(myCurrentLocation);  // Tokyo
console.log(message, name);      // some message Hugo
console.log(getGreeting(name));  // welcome Hugo
```

・Named export 　⇒ 　import先で名前を~~変えられない~~（変えられました）
・Default export 　⇒ 　import先で名前を変えられる
create-react-appでeslintを導入した時のエラー

# はじめに
create-react-appでreactををやっていて途中からeslintを導入した時のエラー
## 自分がやったeslintの導入方法

```
npm i -D eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y babel-eslint
```

```:.eslintrc
{
    "extends": ["airbnb"],
    "parser": "babel-eslint",
    "plugins": [
      "react"
    ],
    "rules": {
        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
    }
  }
```

## エラー内容

```
There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "eslint": "5.12.0"

Don't try to install it manually: your package manager does it automatically.
However, a different version of eslint was detected higher up in the tree:

  /Users/myname/Works/React/myfolder/node_modules/eslint (version: 5.15.3) 

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove "eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

  5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
     This may help because npm has known issues with package hoisting which may get resolved in future versions.

  6. Check if /Users/myname/Works/React/myfolder/node_modules/eslint is outside your project directory.
     For example, you might have accidentally installed something in your home folder.

  7. Try running npm ls eslint in your project folder.
     This will tell you which other package (apart from the expected react-scripts) installed eslint.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! tutorial@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the tutorial@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

```

## 解決方法
ログの中にある１〜４をやったら治りました。
1.package-lock.jsonを消す

2.node_modulesを消す

3.package.json からeslintとbabel-eslintを消す（自分の場合は-DでインストールしたのでdevDependenciesの方にありました）

4.'npm install'する（package-lock.jsonとnode_modulesは新しく作られます）

create-react-appをするとデフォルトでeslintとbabel-eslintは入っているみたいです。
Ubuntu で日本語キーボードレイアウト

Ubuntu 18.04 では比較的簡単に日本語入力の設定ができるのだが、キーボードレイアウトがUSのままだと、全角半角ボタンでIMEオンオフができなかったり、`@` の場所が違ったりして使いづらいため、キーボードのレイアウトを日本語にしたい。

# コンソールで使うキーボードレイアウトの設定

    sudo dpkg-reconfigure keyboard-configuration

`Generic 105-key PC (intl.)` → `Japanese` → `Japanese` → `The default for the keyboard layout` → `No compose key` → `Yes` と入力する。

# X(GUI)で使うキーボードレイアウトの設定

    gnome-session-properties

`Add` → `setxkbmap jp` → `Save`

![Screenshot from 2019-03-27 12-06-49.png](https://qiita-image-store.s3.amazonaws.com/0/36973/138983fc-7518-901c-042f-558fe25973df.png)

なお `Ctr-Alt-F3` でコンソールへ一時的に切り替えて、
また `Ctr-Alt-F2` でX GUIに戻ると、キーボードレイアウトが
USになるバグがあるので、ターミナルに

     setxkbmap jp

で解決。
twig templateで、外部のcssやjs、htmlやテキスト文書の内容を、テンプレ側で読み込む

twigには別のテンプレートファイルを埋め込む仕組みが用意されており、``` {% include('template path name') %} ``` のように書けば、外部テンプレートの内容を埋め込むことができます。

が、取り込めるのは PHP側で指定したtwigテンプレートファイルの基準ディレクトリ配下のファイルに限られるようです。

今回は、.twig内に、テンプレートファイル基準ディレクトリの外側にあるファイルの内容を埋め込むのに、僕がとった方法の紹介です。

さて、twigには、filter という仕組みがあり、これを使うと、phpから渡ってきた変数やべた書きした文字列を twig template内で加工することができます。

標準でも、以下のような様々なフィルターが用意されています。

```twig:sample.twig
{# 配列の長さを出力する #}
{{valArray|length}}

{# html escapeせずに値をそのまま出力する #}
{{htmlSource|raw}}

{# PHPのnl2br関数と同等 #}
{{"今日は\n良い天気ですね\n"|nl2br}}
```

さらに、独自フィルターも簡単に追加できるようになっています。

filter の本来想定された使い方からは逸脱してしまうような気もしますが、今回は、.twig ファイル内に書かれたファイルパス名をファイルの内容に置き換えるようなフィルターを書いてみました。

```php

//　自作フィルターを集めた class
// global function でもいいけど、classにまとめといたほうが煩雑にならないと思う
class TwigCustomFilter {
    // $fileをファイルのパス名とみなし、ファイルの中身を返却する
    public function twig_embed($file) {
        if (!empty($file) && 
            file_exists($file) && 
            is_file($file)) {
            return file_get_contents($file);
        } else {
            return '';
        }
    }
}


$loader = new Twig_Loader_Filesystem($templateDir);
$twig = new Twig_Environment($loader, ['debug' => false]);

// フィルターの追加
$twigCustomFilter = new TwigCustomFilter();

// embed　というフィルターが .twigに書かれていたら  $twigCustomFilter->twig_embed($file) を呼び出す
$filter = new Twig_SimpleFilter('embed', [$twigCustomFilter, 'twig_embed']);
$twig->addFilter($filter);

$template = $twig->loadTemplate($templateFileName);
$template->display(['documentRootPath' => $_SERVER['DOCUMENT_ROOT']);
```

```twig:example.twig
<script>
{# スクリプトの内容を(htmlエスケープせずに)そのまま埋め込む #}
{{documentRootPath~'/assets/js/common.js'|embed|raw}}
</script>

{# テキストファイルの内容を htmlエスケープして埋め込む #}
{{documentRootPath~'/resource/license.txt'|embed}}
```

補足
twigの文字列連結演算子は、PHPの書き方とは異なっています。
PHPでは　「 . 」ですが、 twigの場合「 ~ 」になります。

フィルターはパイプ同様に数珠つなぎにすることができます。
document onloadをjQueryなしで書く

jQueryでおなじみの

```js
$(function(){
  ...
});
```
をjQueryなしで書くにはどうしたらよいのか迷ってしまいましたので投稿します。

結論、

```js
document.addEventListener('DOMContentLoaded', function(){
  ...
});
```

のように書きます。

参考 [DOMContentLoaded - イベントリファレンス | MDN](https://developer.mozilla.org/ja/docs/Web/Events/DOMContentLoaded)
半歩ずつ進める機械学習　～scikit-learn ボストン住宅価格編～

## はじめに
機械学習の勉強の為に、scikit-learnのデータセットを1個ずつ分析していきます。
一歩ずつなんてとんでもない、データの俯瞰からゆっくり、半歩ずつ学習を進めて行きたいと思います。
現在進行形で勉強中の身なので、出来るだけ正確な内容を書けるように努力しますが、書いてある内容は便所の落書き程度の信頼性だとお考えください。

## 分析対象データについて
今回、分析するのはscikit-learnライブラリで提供されている
ボストン住宅価格と、住宅の環境の関係についてです
環境に関するパラメータには以下の13種があります

|カラム名|内容|
|:--:|:--:|
|CRIM|人口 1 人当たりの犯罪発生数|
|ZN|25,000 平方フィート以上の住居区画の占める割合|
|INDUS|小売業以外の商業が占める面積の割合|
|CHAS|チャールズ川によるダミー変数 (1: 川の周辺, 0: それ以外)|
|NOX|NOxの濃度(窒素酸化物）|
|RM|住居の平均部屋数|
|AGE|1940 年より前に建てられた物件の割合|
|DIS|5 つのボストン市の雇用施設からの距離 (重み付け済)|
|RAD|環状高速道路へのアクセスしやすさ|
|TAX|$10,000 ドルあたりの不動産税率の総計|
|PTRATIO|町毎の児童と教師の比率|
|B|町毎の黒人 (Bk) の比率を次の式で表したもの。 1000(Bk – 0.63)^2|
|LSTAT|給与の低い職業に従事する人口の割合 (%)|

これらのパラメータと住宅価格の関係を調べ
最終的には、価格不明の物件のパラメータから、価格を予測する計算式（モデル）を導き出す事を目標とします。

## まずはデータの読み込みから


``` python3:boston.py
import matplotlib.pyplot as plt
from sklearn.datasets import load_boston
import pandas as pd

boston = load_boston()#環境データのロード
env_data = pd.DataFrame(boston.data,columns = boston.feature_names)#データをDataFrame形式に
price_data = boston.target#住宅価格のデータをロード
```

この時点で`env_data`には13種のパラメータデータが506件分入っています
`price_data`には506件分の住宅価格データが入っています。

実際に3件分のデータをそれぞれ見てみましょう


|CRIM|ZN|INDUS|CHAS|NOX|RM|AGE|DIS|RAD|TAX|PTRATIO|B|LSTAT|
|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|
|0.00632|18.0|2.31|0.0|0.538|6.575|65.2|4.09|1.0|296.0|15.3|396.9|4.98|
|0.02731|0.0|7.07|0.0|0.469|6.421|78.9|4.9671|2.0|242.0|17.8|396.9|9.14|
|0.02729|0.0|7.07|0.0|0.469|7.185|61.1|4.9671|2.0|242.0|17.8|392.83|4.03|

|PRICE|
|:--:|
|24.|
|21.6|
|34.7|

こんな感じのデータが506件分、env_dataとprice_dataに入っているワケです

##データをグラフ化してみよう
とりあえず分析に入る前にseabornを使ってenv_dataの中のパラメータ同士の関係性を見てみましょう

```python3
import seaborn as sns
sns.pairplot(env_data)
```
![ダウンロード.png](https://qiita-image-store.s3.amazonaws.com/0/316551/9699b0f7-e481-7cdc-f08b-a5555bd23a53.png)

眺めて「ふんふん」って言ってるだけで、分析してる気分になりますね
同様に相関性の強さをヒートマップという表で可視化してみます。

```python3
#相関係数の行列を作成
heat = env_data.corr()

plt.figure(figsize=(15,10))

#表のスタイルを指定しながらヒートマップを表示
sns.heatmap(heat, vmin=-1,vmax=1.0,center=0,annot=True, xticklabels=boston.feature_names, yticklabels=boston.feature_names,cmap="bwr")
```

![ダウンロード (1).png](https://qiita-image-store.s3.amazonaws.com/0/316551/255bf591-bbd1-9e33-0e22-b381cfb00cab.png)

表を見ると分かるように、より強い相関を持つマスは濃い色に、相関の薄い物は淡い色になっています
※斜めのマスは同じ全て同じ要素同士（CRIMとCRIM、ZNとZN...)の相関になるので、全て1になっています。

パラメータの中に強い相関を持つものがあると
多重共線性という現象で、最終的に求める計算式の予測精度が悪くなったりするようです

##休憩
今回はここまでにしましょう
データ見ただけじゃないか！ってな話ですが
そこは、半歩ずつ。のんびり行きましょう

##お願い
独学で機械学習を勉強しつつ、備忘録・理解の確認の為にQiitaに投稿しています。
間違った解釈や説明が多々あるかと思います。
お気づきになった方は、どうか優しくご指摘お願いいたします
AWS+nginxサーバーに独自ドメインを設定したい

# はじめに
現在の状況です。
下記環境でAWSにnginxサーバーを使用してデプロイはできている状態です。
IPでアプリケーションは表示されているが、自分で取得したドメインでも表示できるように
したいというのが今回の目的です。

# 環境
ruby 2.3.1
Rails 5.0.7.2
MySQL
git
unicorn
nginx
capistrano
AWS EC2

# 事前準備
[参考][お名前.comで取得したドメインをAmazon EC2に紐付ける](https://qiita.com/nadonado/items/a7c32c94fef87b7db0d5)

上記を参考にドメインの設定は完了しております。

# エラー発生
![キャプチャ.png](https://qiita-image-store.s3.amazonaws.com/0/332038/3ca1300e-23c9-c690-c150-4e0df7d724e2.png)

設定したドメインをブラウザで表示しても上記のように表示されてしまいます。
表示されている文面を翻訳するとnginxのどうやら設定が必要なようです。

# 対応したこと
[参考][【超初心者向け】AWSでたてたnginxサーバーにドメインを設定する](https://qiita.com/ryuchan00/items/3e172fbfd1044e093c52)

上記記事を参考にnginxの「conf」の変更、nginxのrestartを行いました。

```
[ec2-user@ip-XXX-XX-XX-XXX ~]$ sudo vim /etc/nginx/conf.d/rails.conf
```

```rails.conf
server_name XXXX.com; #ここの部分を取得したドメインに変更
#変更後保存
```

```
sudo service nginx restart #nginxのrestart
```

# 結果
正常にドメインでページが表示できました！！

# おまけ
上記を行うと逆にIPからはページが表示できなくなります。
私はIPからも接続できるようにしたかったので、その際にはその設定も必要です。

[参考][nginxでip入力によるアクセスをドメインにリダイレクトする](http://lifehack.skytips.xyz/wp/2016/12/31/post-403/)

```
[ec2-user@ip-XXX-XX-XX-XXX ~]$ sudo vim /etc/nginx/conf.d/rails.conf
```

下記を追記でOKです。

```
server {
    server_name XXX.XXX.XXX.XXX; #IPアドレス
    return 301 http://XXXX.com; #取得したドメイン
}
```

以上です。宜しくお願いします。

# 参考
[参考][お名前.comで取得したドメインをAmazon EC2に紐付ける](https://qiita.com/nadonado/items/a7c32c94fef87b7db0d5)
[参考][【超初心者向け】AWSでたてたnginxサーバーにドメインを設定する](https://qiita.com/ryuchan00/items/3e172fbfd1044e093c52)
[参考][nginxでip入力によるアクセスをドメインにリダイレクトする](http://lifehack.skytips.xyz/wp/2016/12/31/post-403/)
ホロレンズにアプリが入れれなくなった時の対応

### はじめに
* 久しぶりにホロレンズアプリをUnityで作成したところ、最終的に以下の部分でつまりました。
    * ホロレンズへのデプロイに失敗する（Visual Studio2017から）
    * ホロレンズへアプリをインストールできない（デバイスポータルから）
こちらの状況に対して私が対応した方法を記述します。

### 症状
* アプリをホロレンズに入れれない
    * Unityで作成してVisual Studio2017経由でビルドーデプロイしようとしたところデプロイでエラーが出る
        * 「〜127.0.0.1 で開発者ライセンスを取得できませんでした。」というエラーが出る（画像参照）
        * ![holo-vs-deploy-error.PNG](https://qiita-image-store.s3.amazonaws.com/0/44076/45c09c00-0895-caf8-b7c6-a7959c692369.png)

    * Visual Studioでパッケージファイルを作成してデバイスポータルからインストールしてもエラーが出る
* Windowsストアを開いても画面が白いまま進まない
* UnityのXRサポートARマーカー（Vuforia）を入れていたアプリが正しく動作しない
    * アプリは起動するがARマーカーを認識しなくなった
    * 「両手サポート」アップデート前までは認識していた
* その他情報
    * ホロレンズの「両手サポート」アップデート前まではデプロイできていた（Unity2017、VS2015）
    * 基本的な操作は問題なくできる（からタチが悪い）

### 原因（と思われるもの）
* ホロレンズを初回購入時のOSから「両手サポート」アップデートを行ったため？
    * 初期OSからアプデを継続していたので途中でおかしな内容が混入してしまったのかもしれない

### 対応方法
ホロレンズをクリーンインストールする。
* Windows Device Recovery Toolでクリーンインストール
* OSは最新バージョン（「両手サポート」対応版）をインストール

クリーンインストール後はなんの問題もなくデプロイできました。

### まとめ
* これらの症状が起きたら素直にクリーンインストールしましょう
困ったらクリーンインストールはマイクロソフトの定番？
PDFからコピペした文章の全角の後に入るスペースを一括削除する魔法 

「正規表現」をONにして、

```shell-session
検索：
([^\x01-\x7E])(\s) 

置換： 
$1
```

### 補足
```
([^\x01-\x7E])
```
で1バイト文字ではない1文字を、

```
(\s) 
```
でスペース1文字を検索し、

```
$1
```
でひとつ目のカッコ内だけに置換しています。
不足分をnilで埋めた配列を取得

`String#split` などで配列を作成する場合、指定した長さより実際の長さが短いことがある。

```ruby:長さ5の配列を作りたい
"a,b,c,d,e,f,g".split(',', 5)
#=> ["a", "b", "c", "d", "e,f,g"]

"a,b,c".split(',', 5)
#=> ["a", "b", "c"]   # 足りない…
```

`Array#[]` や `#first` や `#take` を使っても数を増やすことはできない。

```ruby
ary = "a,b,c".split(',', 5)

ary[0...5]
#=> ["a", "b", "c"]
ary[0, 5]
#=> ["a", "b", "c"]

ary.first(5)
#=> ["a", "b", "c"]

ary.take(5)
#=> ["a", "b", "c"]
```

[**`Array#values_at`**](https://docs.ruby-lang.org/ja/latest/method/Array/i/values_at.html) なら増やせる。

```ruby
"a,b,c".split(',', 5).values_at(0...5)
#=> ["a", "b", "c", nil, nil]
```

---

破壊的に拡張したいなら、 [**`Array#[]=`**](https://docs.ruby-lang.org/ja/latest/method/Array/i/=5b=5d=3d.html) で範囲外に代入する手がある。

```ruby
"a,b,c".split(',', 5).tap { |a| a[5-1] = a[5-1] }
#=> ["a", "b", "c", nil, nil]
```

`nil` でなくデフォルト値があるのなら、 `#zip` でも良いかもしれない。

```ruby
[*"1".."5"].zip("a,b,c".split(',', 5)).map { |v0,v| v || v0 }
#=> ["a", "b", "c", "4", "5"]
```

※ `||` を使う場合は、偽の値（ `nil` と `false` ）が既に入っていても書き換えてしまうので注意。
JavaScript基礎文法まとめ

<h3>0．背景</h3>
<p>
Webアプリが作るために、今更ながらJavaScriptの文法をお勉強。<br>
C Sharperなので、違和感ほぼ無し。
</p>
<h3>1．基本的なJavaScript実行方法</h3>
index.html：JavaScriptを適用するHTML

```index.html
<!DOCTYPE html>
<html lang="ja">
  ~ headタグ中略 ~
　<body>
    <script src="main.js"></script>     ← ファイル指定
  </body>
</html>
```

main.js：JavaScriptファイル

```main.js
"use strict"                            ← エラーチェック有効

console.log("Hello JavaScript")
```

<h4>[実行結果の確認 @ Chrome]</h4>
<p>① Chromeでデベロッパーツールを起動する。</p>
<img width="499" alt="tool1.png" src="https://qiita-image-store.s3.amazonaws.com/0/374906/8a7ae0a7-da61-e953-8d47-2ca8e74d7c6f.png">
<p>② Consoleで実行結果を確認する。</p>
<img width="255" alt="tool2.png" src="https://qiita-image-store.s3.amazonaws.com/0/374906/8853aa10-3c2e-8ed8-b22d-c48fb2b18f4f.png">

<h3>2．基本的なJavaScript文法</h3>
① コメント記載方法

```
// 一行コメント

/* 
   複数行コメント
*/
```

② 正規表現

```
.       // 改行以外の任意の文字 
\n      // 改行文字 
\r      // キャリッジリターン文字
\t      // タブ文字
\b      // 単語の区切り（単語の開始または終了）
\B      // 単語の区切り以外
\d      // 任意の数字 （ [0-9]と同じ）
\D      // 任意の数字のもの（ [^0-9]と同じ）
\s      // シングル空白文字（スペース、タブ、改行など） 
\S      // シングル空白文字以外の文字 
\w      // 単語文字（ [A-Za-z0-9_]と同じ）
\W      // 単語文字以外の文字（ [^A-Za-z0-9_]と同じ）
```

③ 関数

```main.js
"use strict"

function sum(a, b, c)          ← ３つの引数の合計を返す関数を定義
{
  return a+b+c;
}

for (let i = 1; i <= 5; i++)   ← Forループ
{
  console.log(`${i} + ${i+1} + ${i+2} = ` + sum(i, i+1, i+2));
}
```

<h4>[実行結果]</h4>

<img width="159" alt="result.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/374906/856fd2c8-0994-6e00-00f0-2b39edaac96d.png">

<h4>情報ソース</h4>
<ul>
 <li><a href="https://dotinstall.com/lessons/basic_javascript_grammer">ドットインストール：詳解JavaScript基礎文法編</a></li>
 <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Introduction">MDN：JavaScript仕様</a></li>
</ul>