OmniAICreator/Qiita-1.07M huggingface dataset:
foreach と type="radio" の共存の仕方

# foreach (PHP)

~~~php
<?php
$fruits = ["ぶどう", "みかん", "もも"];

foreach ($fruits as $value) {
    echo $value;
}
?>
~~~

####こう表示される
>ぶどうみかんもも

# type="radio" (HTML)

~~~html
<input type="radio">
~~~

# ガッチャンコする

~~~php
<?php
        $fruits = ["ぶどう", "みかん", "もも"];

foreach ($fruits as $value) { ?>
    <input type="radio">
    <?php echo $value;
}
?>
~~~

####こんな感じで表示される
>●ぶどう●みかん●もも

##思ったこと
ベースをHTMLにして書いてるからPHPとして埋め込んで書くところをちゃんと指定して区別してやってあげないとね！って感じ
Google Codelabsに任意のURLのiframeを埋め込む

# はじめに

Codelabsのナビゲーションをつかって、独自のチュートリアルページを作りたい。その際、iframeでいろいろ埋め込みたいが、claatのセキュリティ制限で、プリコンパイルのバイナリでは限られたドメインしかiframe埋め込み許可されていない。
（claatとはGoogle Docsまたはmdの原稿をソースに、Codelabsのhtmlを生成するプログラムです。）

ならば、claatのソースに手を加えて、makeしよう！ホワイトリストにドメインを追記するだけだぜ！

# 環境

以下の内容は、WSL2のUbuntu上で確かめました。

# 手順

基本的には、claatの[readme.md](https://github.com/googlecodelabs/tools/blob/master/claat/README.md)を基本として行います。もっとよいやり方あれば教えて下さい。

### claatのインスト

`$ go get github.com/googlecodelabs/tools/claat` する。

cf.) [README.md#install](https://github.com/googlecodelabs/tools/blob/master/claat/README.md#install)


### ソースの書き換え（whitelistへの追加）

前段の操作で`~/go/bin`にバイナリが、`~/go/src`にソースが入ったものとして書き進めます。

`~/go/src/github.com/googlecodelabs/tools/claat/types/node.go`の以下の部分に任意のドメインを追加します。

```go:node.go
// iframe whitelist - set of domains allow to embed iframes in a codelab.
var IframeWhitelist = []string{
	"google.com",
	"google.dev",
	"dartlang.org",
	"web.dev",
	"observablehq.com",
	"repl.it",
	"codepen.io",
	"glitch.com",
	"carto.com",
}
```

### make

次のようにすると、`./bin`に`claat`というバイナリができてる。嬉しい。

```
$ pwd
 $HOME/go/src/github.com/googlecodelabs/tools/claat 
$ make
```

#おわりに

- むし歯と歯周病は予防できる病気です。朝、昼、晩、１日３回、歯をみがきましょう。
- 健口は健康の要（かなめ）です。歯科医院に定期的に通って、歯のチェックアップを受けましょう。
【Rails】ブラウザのページタイトルをページごとに変更する方法

# 目標
![スクリーンショット 2020-06-27 10.43.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/689b81d1-48b7-c50e-cdbc-e912df0314b9.png)

# 開発環境
・Ruby: 2.5.7
・Rails: 5.2.4
・Vagrant: 2.2.7
・VirtualBox: 6.1
・OS: macOS Catalina

# 前提

下記実装済み。

・[Slim導入](https://qiita.com/matsubishi5/items/b639ffddecc626856039)

# 実装

## 1.`application_helper.rb`を編集

```ruby:application_helper.rb
module ApplicationHelper
  # 追記
  def full_title(page_title = '')
    base_title = "Bookers"
    if page_title.empty?
      base_title
    else
      "#{ page_title } | #{ base_title }"
    end
  end
end
```

### 【解説】

**◎ ベースとなるタイトル(アプリ名等)を設定し、変数へ代入する。**

```ruby
base_title = "Bookers"
```

**◎ 引数で受け取った各ページのタイトルが空の場合はベースタイトルのみを表示する。**

```ruby
if page_title.empty?
  base_title
```

**◎ 引数で受け取った各ページのタイトルが存在する場合は両タイトルを表示する。**

```ruby
else
  "#{ page_title } | #{ base_title }"
```

`page_title`が「本一覧」だとすると、`本一覧 | Bookers`と表示される。

## 2.ビューを編集

### ① `application.html.slim`を編集する。

```slim:application.html.slim
/ 変更前
title
  | Bookers

/ 変更後
title
  = full_title(yield(:title))
```

### ② 各ページのビューを編集する。

例として、`books/index.html.slim`のタイトルを設定します。

```slim:books/index.html.slim
/ 追記
= provide(:title, '本一覧')
```
(自分用)AWS_2(リモートアクセス/Apacheをインストール/ファイルを互いに送受信)

# 項目
1. 仮想マシンにリモートアクセスをする
2. HTTPサーバーのApacheをインストールし、ページを公開
3. ローカルと仮想マシン双方で、ファイルを転送し合う

# 1.仮想マシンへリモートアクセスする
```bash:ターミナル
# ".ssh"と言うフォルダがあるかを確認する
$ ls -a -l
# 無ければ`mkdir .ssh`で作成

# 前回のダウンロードしたキーを".ssh"の中に移動
$ mv ~/Desktop/FirstKey.pem ~/.ssh

# 仮想マシンとの関連付けみたいな事をしてる、多分
$ chmod 400 ~/.ssh/FirstKey.pem

# 仮想マシンへリモートアクセスしている、()は要らないの忘れずに
# 最初だけ何か聞かれるので、yesと答える
$ ssh -i ~/.ssh/FirstKey.pem ec2-user@(前回設定したパブリックIPアドレス)

# 仮想マシン内は"$$ ~~"で表現、これで仮想マシンのアクセスからログアウト
$$ exit
```
- 取り敢えず上からやっていけば大丈夫なはず

# 2.HTTPサーバーのApacheをインストールし、ページを公開
```bash:ターミナル
# 取り敢えずログイン
$ ssh -i ~/.ssh/FirstKey.pem ec2-user@(パブリックIP)

# まず仮想マシンを最新版に
$$ sudo yum -y update

# sudoコマンドでApacheをインストール
$$ sudo yum -y install httpd

# Apacheを作動
$$ sudo service httpd start

# 動くようにする
$$ sudo chkconfig httpd on

# /var/www/htmlの中身を確認、Apacheはここにhtmlコンテンツがあると動く
$$ ls /var/www/html

# sudoコマンドでviを起動し、前述の中に作られた"index.html"に何か書くよと言う事
$$ sudo vi /var/www/html/index.html
```

```html:index.html
<!-- まずは"i"か"A"を選択して記述モードを起動 -->
<h1> Hello World </h1>
<!-- "esc"を押した後、":wq"を入力してEnter、これは保存して終了ってこと --!>
```
- この後に`http://(パブリックIP)`にアクセスし、Hello World出来てれば完了

# 3.ローカル環境と仮想環境の双方でファイルを転送し合う
```bash:ターミナル
# scpコマンドでファイルを転送する、先に転送側と何を転送するか、後ろに何処へを記載
$ scp -i ~/.ssh/FirstKey.pem ec2-user@(パブリックIP):/var/www/html/index.html ~/Desktop
# これでデスクトップに"index.html"が来ているはず

# 前述の様に先に転送側や何を、後ろに何処へ
$ scp -i ~/.ssh/FirstKey.pem ~/Desktop/index.html ec2-user@(パブリックIP):

#仮想マシンに接続
$ ssh -i ~/.ssh/FirstKey.pem ec2-user@(パブリックIP)

# lsで受信確認後、"/var/www/html"に移しておく
$$ ls
$$ sudo mv ~/index.html /var/www/html
#この後一応パブリックIPにアクセスしてブラウザで動くか確認してみる

# 一々mvするのも面倒くさいので、勝手に行くようにする(ここからはほぼ呪文)
$$ sudo groupadd www
$$ sudo usermod -a -G www ec2-user

# 実行後"ec2 user wheel www"と表示されればOK
$$ groups

$$ sudo chown -R root:www /var/www
$$ sudo chmod 2775 /var/www
$$ find /var/www -type d -exec sudo chmod 2775 {} \;
$$ find /var/www -type f -exec sudo chmod 0664 {} \;
$$ exit
# ここまでで終了

# scpコマンドを使うタイミングで、どのディレクトリへ移動するか迄指定している。差異は前述のリモートへ転送と比較すべし
$ scp -i ~/.ssh/FirstKey.pem ~/Desktop/index.html ec2-user@(パブリックIP):/var/www/html
```

# 4.終わりに
- 何となく筋道というか光が見えて来たのでは?
- ApacheをFlaskで使うのはどうやるんだろう

## 追記
- 急を要す場合は取り敢えず`/var/www/html`内にディレクトリ作ってPythonやらFlaskやらを入れれば良いってところだけ
- phpMyAdminも調べれば出てくるから同じ所で良い感じにぽい
BEMについて簡潔に

## BEMを使う理由
再利用性があり、命名規則のおかげで考える手間を減らせて、見た目の分かりやすさがある為

## Block
これはWebページを形作るパーツの一つ一つ。例、アカウント作成フォーム

## Element
Blockを形作るパーツの一つ一つ。例、アカウント作成フォームの入力欄と作成ボタン

## Modifier
同じBlockがある時に片方を違う表現にしたい場合に使われる。Elementも同様
例、Aリスト、Bリストがある時にBリストはチェックボックスにする。
　　ヘッダーの中に同じコンテンツがある中で一つだけ色を変えたい時。

## ざっくりイメージ
BlockとElementは常に一緒
分解できるならBlock、できないならElement
Modifierは連続したものの中で一部を修飾したいとき。
ざっくり知るアスペクト指向 （AOP）



## Aspect Oriented Programming(アスペクト指向プログラミング）とは

一言で言うと「cross cutting concerns（横断的関心事）を、統一化する為の仕組み」


オブジェクト指向は結合度は高め。カプセル化して副作用を内側へ隠蔽。
　疎結合にする方法例がデザインパターン。
関数型は変数の値変更をさせない。関数は同じ引数ならば同じ結果を返すことが保証されていて副作用を減らす。
アスペクト指向は複数のクラスの中から同じ機能をまとめて切り出す。

>デザインパターン
https://refactoring.guru/design-patterns/proxy

例）
ログ、トランザクション、セキュリティ、例外処理、キャッシュ、リトライなど

今のところは、AOPと言うキーワード自体は人気はない。
この機会に技術選定のメモを書いた。
https://qiita.com/miyamotok0105/private/b1eec284a0887236a4a0

<img width="1044" alt="スクリーンショット 2020-06-27 10.28.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64334/bd1334a2-3301-5e75-e2b2-f5e83c65635b.png">


## AOP用語

DIコンテナに登録されてるBeanを呼ぶ場合は、内部でProxyが自動生成されてAdviceを実行してる。

アドバイス：アスペクト内の関数
ポイントカット：関数を実行する場所
ジェインポイント：関数実行のタイミング


JointPoint(実行タイミング)

Before：関数の実行前にAOP関数を実行
After：関数実行後に実行
AfterReturning：正常終了したら実行
Around：開始前と実行後に実行
AfterThrowing：異常終了時に実行


## AOP事例

Laravel+AOP
→　ライブラリあるが、スター数が少ないので途中でサポート切れになる可能性あり。

Spring+AOP
→　Springコミュニティによってサポートされてる。
>https://github.com/spring-projects/spring-framework/tree/master/spring-aop

Javascript+AOP
→　ほぼサンプルもない状態。

Vuejs,ReactJS+AOP
→　フロントでもやろうと思えばできそう。
>Frontend AOP — React Hooks vs. Vue Composition API
https://medium.com/@vyaron/frontend-aop-react-hooks-vs-vue-composition-api-7889d917d4cf




>Porxy+ DecoratorパターンでAOPを実装もできそう
https://meetup-jp.toast.com/284
HomebrewでインストールしたアプリにPATHを通す

# 発端:rolling_eyes:
- HomebrewでインストールしたGitを呼び出せない（Macのデフォルト・/usr/bin/gitが呼び出されてしまう）
- ググる→インストールしたバイナリ（Cellar/git/{verison}/bin/git）にパスを通す的な記事しか見つからない
- あれ？インストールしたアプリ毎に全部パス通すの？面倒じゃない？
  
# 結論:relieved:
そもそもHomebrewはインストールしたバイナリが/usr/local/binに配置されるようになっています。（Gitの場合は上記バイナリへのシンボリックリンクが配置されています）
そのため、PATHを通すべきは/usr/local/binとなります。

```shell
export PATH="/usr/local/bin:$PATH"
```

以上となります。
参考になれば幸いです:relaxed:
React Native で NSUserDefaults を扱う (iOS)


# はじめに
React Native アプリで自分でネイティブモジュールを書くような開発をしているときに、ネイティブ側の設定値を操作したいことがあるかもしれません。
iOS のNSUserDefaults の値を参照・更新したいという時に、React Native の `Settings` を使えばそれができるよという話です。


## 検証環境
- React Native v0.62.2

# NSUserDefaults とは
iOS でちょっとした設定値のようなデータを永続化するための仕組みです。
key-value のペアでデータを端末に保存できます。

## 補足
React Native では `AsyncStorage` (@react-native-community/async-storage) を使うことが多いため、開発者がNSUserDefaults を使ったコードを書く機会はあまりないでしょう。

# Settings 

React Native の `Settings` は `NSUserDefaults` のラッパーです。
使い方を簡単に紹介します。


## JavaScript 側
### import

```tsx
import { Settings } from "react-native";
```


### 値の書き込み

```tsx
const yourKey = 'isEnabledSomeFunc';
const yourValue = true;
```

```tsx
Settings.set({yourKey: yourValue});
```

### 値の取得 

```tsx
Settings.get(yourKey); // => 1
```

boolean の値を取得しようとするとnumber で返ってきました。
型の変換については開発者側で気を付けるのが良さそうです。
(React Native のコードを読めば処理の詳細が分かるのですが、今回はスキップします) 

```tsx
!!Settings.get(yourKey); // => true
```

## ネイティブ側
### 値の取得 

動作確認のため、ネイティブ側でもデバッグしてみます。
Objective-C だとこう書けます。

```objective_c
BOOL value = [[NSUserDefaults standardUserDefaults] boolForKey:@"isEnabledSomeFunc"];
NSLog(@"%@", (value) ? @"YES" : @"NO"); // "YES"
```



# さいごに
React Native の`Settings` を使うことで、iOS の`NSUserDefaults` を叩くだけのネイティブモジュールを自分で作らずに済みました。

なお `Settings` には `watchKeys` というメソッドも用意されていて、ネイティブ側で `NSUserDefaults` の指定したキーの値が変わった際の変更を購読することもできるようです。上手く使うと便利かもしれないですね。


# 参考

- [Settings · React Native](https://reactnative.dev/docs/settings)
[handlebars.js]Smartyからhandlebars.jsを急に使うようになって困ったこと

## Handlebarsとは

単純なテンプレート言語です。
テンプレートと入力オブジェクトを使用して、HTMLまたはその他のテキスト形式を生成します。
https://handlebarsjs.com/examples/simple-expressions.html
詳しいことは、公式ドキュメントをご覧ください。

## Smartyからhandlebars.jsを急に使うことになった

プロジェクトが変わったらテンプレートエンジンも変わっていて、急にhandlebars.jsを使うことになりました。
基本的な使い方などは、Smartyを使ったことあるのでそんなに困ることはなかったです。
おそらくテンプレートエンジンをなにかしら使ったことあれば困らないと思います。

## ifヘルパーはelseのみ

ifヘルパーを使いたいときに困りました。
ifヘルパーはelseのみ用意されています。
要は、else ifが使えないのです。
https://handlebarsjs.com/guide/builtin-helpers.html#if

なので、テンプレート側で複雑な条件式を書くことができないので、見通しはよくなります。
ただ、この出力に使っている処理の方を修正する必要があるので、Smartyに慣れてしまうとここが一番ネックになってくるかなと思います。

なかなか、else ifが使えないことってないですよね。

## まとめ

シェアも少なく、あまり採用されているのも見たことないので、
調べものするときは公式ドキュメントを読む方が早いぐらいでした。
ちょっとした修正でドキュメントを隅から隅まで読むことはまずないので、メモとして書き留めておきました。
【FuelPHP,エラー対処法】Uncaught Fuel\Core\PhpErrorException: mysqli::__construct(): (HY000/2002): 

#はじめに

MacOS
フレームワーク：FuelPHP
MAMP

#エラー内容

cronで実行しようとすると下記のエラー

```
 Uncaught Fuel\Core\PhpErrorException: mysqli::__construct(): (HY000/2002): 
```

#解決法

db.php 内の "localhost" を "127.0.0.1" に変更します。

```:fuel/app/config/db.php
//変更前
'default' => array(
        'type'   => 'mysqli',
        'connection' => array(
            'hostname'   => 'localhost',
            'port'       => '3306',
            'database'   => 'db_name',
            'username'   => 'root',
            'password'   => '',
            'persistent' => FALSE,
        ),
        'identifier' => '`',
        'table_prefix' => '',
        'charset'      => 'utf8mb4',
        'caching'      => false,
        'profiling'    => true,
),

//変更後
'default' => array(
        'type'   => 'mysqli',
        'connection' => array(
            'hostname'   => '127.0.0.1',
            'port'       => '3306',
            'database'   => 'db_name',
            'username'   => 'root',
            'password'   => '',
            'persistent' => FALSE,
        ),
        'identifier' => '`',
        'table_prefix' => '',
        'charset'      => 'utf8mb4',
        'caching'      => false,
        'profiling'    => true,
),
```

[公式ドキュメント](http://fuelphp.jp/docs/1.8/installation/troubleshooting.html)にも書いてありましたね。笑

<img width="1046" alt="スクリーンショット 2020-06-27 10.10.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/648324/8c21ffdf-511b-d4e7-b00a-43822d23129b.png">

ちなみにMySQLのソケットファイル(mysql.sock)が見当たらない場合にこのエラーが発生することもあるようです。
https://k-holy.hatenablog.com/entry/2014/05/28/192707
実はずっとこっちが原因ではないかと試行錯誤していました。
建物のスタイルの実装の変更準備

西バルカン地域の OSM ベクトルタイル実験サイトを作るにあたって、建物のスタイルの実装も変更しようと思っています。
変更前のスタイルについてメモを書きました。
https://github.com/unvt/naru/issues/5#issuecomment-650448740
CSSレイアウト：ケースに応じた実装方法（メモ）


# ケース1. 画像に重ねる形で、ボタンや文字を配置。レスポンシブで画像と文字やボタンもリサイズ・移動。

- コンテナ内にimg（picture/figure)とボタン、文字を含める。
- 重ねる要素は、position：absolute。
- background-imageを使うと、リサイズ・再配置の同期が難しい。


```tag.html

<section>
 <img src="xxxx.svg" />
 <h1>タイトル</h2>
 <button>ボタン</button>
</section>

```

```style.css
section {
 /* 子要素のabsoluteを有効にする為 */
 position: relative;
 width: 100vw;
}

section img {
  /* コンテナのすべての領域に画像表示 */
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

section h1, button {

  /* 文字サイズ(画面の横サイズを基準とする）vwで全体のサイズに応じて変更。 */
  font-size: [任意の数字]vw; 

  /* 重ねる */
  position: absolute;

  /* 上からの位置 */
  top: [任意の数値]%;

  /* absoluteでの中央配置 */
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

```
【Kotlin】擬似的に参照渡し（≠参照の値渡し）

Kotlin には参照渡し（≠参照の値渡し）がない[^参照渡しがない]。

参考：「参照渡し」と「参照の値渡し」の違いについて
→[もう参照渡しとは言わせない](https://qiita.com/mdstoy/items/2ef4ada6f88341466783)
→[値渡しと参照渡しと参照の値渡しと](https://qiita.com/ur_kinsk/items/949dabe975bdc1affb82)

[^参照渡しがない]: 少なくとも Kotlin/common および Kotlin/JVM には。Kotlin/native とかだったらあるのかも？

例えば次のコードのような、
ある関数に変数を渡してそこに保持されている値を書き換えてもらう、
ということはできない。

```Kotlin:期待通りにならないコード
fun main() {
    var count = 0
    countUp(count)
    println(count) // 1 が出力されることを期待
}

fun countUp(count: Int) {
    ++count // そもそもここでコンパイルエラーになる。
}
```

そこで参照渡しを擬似的に実現するクラスを作成した。

## 擬似的に参照渡しを実現するクラス（簡易版）

```Kotlin
/**
 * 擬似的に参照渡しを行うためのクラス。
 * 
 * @param get 参照先の値を取得する関数。
 * @param set 参照先の値を設定する関数。
 */
class Ref<T>(
    private val get: () -> T,
    private val set: (value: T) -> Unit
) {
    /** 参照先の値を取得・設定するプロパティ。 */
    var value: T
        get() = get()
        set(value) = set(value)
}
```

使用例：

```Kotlin
fun main() {
    var count = 0
    val countRef = Ref({ count }, { count = it })
    countUp(countRef)
    println(count) // > 1
}

fun countUp(count: Ref<Int>) {
    ++count.value
}
```

コンストラクター引数にゲッターとセッターを書いて渡してやらないといけないのがちょっと面倒。
→[コメント参照](https://qiita.com/sdkei/items/72d011abf320e6d88839#comment-351742c36be94ecf8c96)

## 擬似的に参照渡しを実現するクラス（高機能版）

- 読み取り専用版を作成：  
  `set` が不要であっても書かなければならず面倒であるとか、  
  そもそも元の値が `val` であるため `set` を定義できないというような問題に対応。
    - 書き込み専用は不要と判断。Kotlin ではプロパティを書き込み専用にすることができないし。
- インターフェイスを定義：  
  別の実装を使える。
- `invoke` 演算子をオーバーロード：  
  `ref.value` と書くのが面倒な場合に `ref()` のように短く書ける。

```Kotlin
/**
 * 擬似的に読み取り専用の参照渡しを行うためのクラス。
 *
 * @param get 参照先の値を取得する関数。
 */
interface ReadonlyRef<T> {
    /** 参照先の値を取得するプロパティ。 */
    val value: T
    /** 参照先の値を取得する関数。 */
    operator fun invoke(): T
}

/**
 * 擬似的に参照渡しを行うためのクラス。
 *
 * @param get 参照先の値を取得する関数。
 * @param set 参照先の値を設定する関数。
 */
interface Ref<T> : ReadonlyRef<T> {
    /** 参照先の値を取得・設定するプロパティ。 */
    override var value: T
    /** 参照先の値を設定する関数。 */
    operator fun invoke(value: T): Unit
}

/**
 * 擬似的に読み取り専用の参照渡しを行うためのオブジェクトを生成して返す。
 *
 * @param get 参照先の値を取得する関数。
 */
fun <T> ReadonlyRef(
    get: () -> T
): ReadonlyRef<T> = object : ReadonlyRef<T> {
    override val value: T
        get() = get()

    override fun invoke(): T = get()
}

/**
 * 擬似的に参照渡しを行うためのオブジェクトを生成して返す。
 *
 * @param get 参照先の値を取得する関数。
 * @param set 参照先の値を設定する関数。
 */
fun <T> Ref(
    get: () -> T,
    set: (value: T) -> Unit
): Ref<T> = object : Ref<T> {
    override var value: T
        get() = get()
        set(value) {
            set(value)
        }

    override fun invoke(): T = get()
    override fun invoke(value: T) {
        set(value)
    }
}
```

使用例（簡易版と同じ）：

```Kotlin
fun main() {
    var count = 0
    val countRef = Ref({ count }, { count = it })
    countUp(countRef)
    println(count) // > 1
}

fun countUp(count: Ref<Int>) {
    ++count.value
}
```

／以上
ZynqBerry > HDMIを使ったBlock Designサンプルを開くまで (ZynqBerry Demo VIDEO/AUDIO Design with video and audio example )

```txt:動作環境
Windows 10 Pro (v1909) 
PYNQ-Z1 (Digilent) (以下、PYNQと表記)
Vivado v2019.2 (64-bit)
```

### Vivado 

v2019.2用のファイルを使う。
v2019.2は`C:\Xilinx_2019.2`にセットアップ済とする。
(`C:\Xilinx`にセットアップしているユーザは以下の「`C:/Xilinx_2019.2`」は「`C:/Xilinx`」のままでよい。)

### 関連

- [資料調査: PYNQ-Z1 > Video > AXI4-Stream to Video Outへのデータ供給 (DDRからFrame Buffer Readで読む)](https://qiita.com/7of9/items/42c27a72d73bcd7c659e)

### HDMIのサンプル

PYNQを触っている中で、HDMIのFrame Buffer Read IP Coreが気になった。
いろいろ資料を読んでもわからないなか、ZynqBerry用のデザインがあることを知った。


- [各Vivadoバージョン用フォルダ](https://shop.trenz-electronic.de/Download/?path=Trenz_Electronic/Modules_and_Module_Carriers/special/TE0726/Reference_Design)
    - [2019.2](https://shop.trenz-electronic.de/Download/?path=Trenz_Electronic/Modules_and_Module_Carriers/special/TE0726/Reference_Design/2019.2)
        - [zynqberrydemo3](https://shop.trenz-electronic.de/Download/?path=Trenz_Electronic/Modules_and_Module_Carriers/special/TE0726/Reference_Design/2019.2/zynqberrydemo3) : ZynqBerry Demo VIDEO/AUDIO Design with video and audio example 

### ファイルの使用手順

1. 「Referenz Design - nur Quellcode (1 Dateien)」のzipファイルを取得
2. 任意のフォルダに展開
    - 例 (`C:\pynq_proj_2020-05-23\2020-06-27_0855_ZynqBerryV20192`)
    - zipファイル内の`zynqberry3`より「下」のフォルダ全部を上記フォルダに展開
        - 以下のフォルダ、など
            - `block_design/`
            - `board_files/`
            - `console/`
            - ...
3. `_create_win_setup.cmd`を実行
    - ファイルをExplorerでダブルクリック
    - 「WindowsによってPCが保護されました」と表示される場合
        - 詳細情報、をクリック
        - 実行、をクリック
    - `(1) Create minimum setup oc CMD-Files and exit Batch`を選択するため「1」
        - 以下のファイルなどが作成される
            - `design_basic_settings.cmd`
            - `vivado_create_project_guimode.cmd`
4. `design_basic_settings.cmd`を編集
    - 42行目
        - `@set XILDIR=C:/Xilinx`
        - を以下に変更する
        - `@set XILDIR=C:/Xilinx_2019.2`
            - Note: フォルダは「\」でなく「/」で記載すること
    - 44行目
        - `@set VIVADO_VERSION=2019.2`
        - 上記が2019.2であればよい
        - 違うバージョンだとそもそも失敗する
5. `design_basic_settings.cmd`を実行する
    - ファイルをExplorerでダブルクリック
    - 実行環境が設定される
6. `vivado_create_project_guimode.cmd`を実行する
    - ファイルをExplorerでダブルクリック
    - `「------------ Start VIVADO Script--------------」`など表示され、処理が進む
        - ここで止まる場合もある。Enterキーを押すと処理が進む
    - Vivadoが起動して、Block Designの生成まで実行される


### 生成されるBlock Design

以下のようなデザインが生成される。

![コメント 2020-06-14 212356.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32870/e932f469-81ac-3270-a4f3-12d54306ab2b.png)


### 補足

`vivado_create_project_guimode.cmd`を実行したコマンドプロンプトを閉じるとVivadoは終了する。

再度Vivadoプロジェクトを開くときは`vivado_open_existing_project_guimode.cmd`を実行するようだ。
Sympyのsubsメソッドで配列の計算をしたかった

subsメソッドでは駄目みたいで、sympy.lambdifyという関数を使う必要があるっぽい。

```python:subs_vs_lambdify.py
# coding:utf-8


import numpy as np
import sympy as sp


# sympy の変数を作る
x = sp.Symbol('x')
y = sp.Symbol('y')

# numpy の配列を作る
arrX = np.arange(12, dtype='float64').reshape((3, 4))
arrY = np.ones((3, 4))

# sympy の関数を作る
symbolFunc = 2*x + y

# subs メソッドで配列を代入
resSubs = symbolFunc.subs([(x, arrX), (y, arrY)])
print(resSubs)
# ==> 2*x + y
# 配列は計算できないっぽい

# lambdify を使って計算してみる
# まずは関数を作る
lambdifyFunc = sp.lambdify([x, y], symbolFunc)
# 作った関数の引数に配列を渡す
resLambdify = lambdifyFunc(arrX, arrY)
print(resLambdify)
# ==> [[ 1.  3.  5.  7.]
#      [ 9. 11. 13. 15.]
#      [17. 19. 21. 23.]]
# こっちは計算してくれた
```
AWS認定ソリューションアーキテクト–アソシエイト合格から一年振り返り

###Ｑ．資格をとって何が変わったか。

AWSに関する仕事を多く任されるようになった事が大きな変化でした。
今まで、仕事で使用したサービス
・lambda
・API Gateway
・Dynamodb
・ECS
・ECR
・CodeCommit
・CodeBuild
・ElastiCache
・VPC周り
・Cludwatch
・S3
・RDS
資格をとったら、結果がついてくるなぁと改めて思いました。。
会社で資格持っている人が少なかったらなおさらですね。

一年間でこんなに新しいことを勉強できたなんて、ありがたいや。
ECS,Dynamodbあたりは、休日も調べものをしていましたよ、よくやった(笑)

###Ｑ．新しいサービスを使うときはどうしているのか。
まずブラックベルトをみる。それにつきますね。
youtubeがあったりするので、家でざっとみたり。
https://aws.amazon.com/jp/aws-jp-introduction/aws-jp-webinar-service-cut/

###Ｑ．新しい情報はどこから仕入れているか。

なんだかんだで、週刊AWSしか見ていないですね。
https://aws.amazon.com/jp/blogs/news/tag/%E9%80%B1%E5%88%8Aaws/
会社のサイボウズに月曜日にスケジュールを登録しています。
週刊AWSをみるっと。（もちろん、スケジュールは非公開で）

一般的には、リリースノートを見られているのかもしれないですね。
http://aws.amazon.com/releasenotes

###Ｑ．更新に向けて

資格は３年更新なのですが、たぶん直前に勉強します！
ですので、週刊AWSが頼りの綱です。

あとは、会社で補助金がでるようにしれっとマネージャあたりに言い続けたいですね。
会社では、資格手当（月ＸＸ万）、資格試験手当、があるのですが。
まぁアップデートされていないので、AWSの資格試験を受けた時は実費でした。
模擬試験含め２万ぐらいかかりましたかね。。
私のために、ぜひ補助金を！
【仕事方法論】資料作成時の心構え

資料作成時の心構え
　その１：資料の用途を明確にすること
　　　　　⇒例：何月何日までに、XXさんと打ち合わせで、XXXを決めるための資料
　　　　　⇒例：スケジュールの妥当性を確認するための内部資料
　その２：資料にはタイトルをつけましょう
　その３：ほかのチームすでに作っているのでは？流用できるものないの？
　その４：流用できるものがなければ、どのように作れば、他の人が流用できるかを考える
Tomcat9 が HTTP Status 400 – Bad Request を返した時の対策

次のページを参考にしました。
[[] を含むURLをGETしようとするとTomcatが400を返す](https://qiita.com/neeton_iwasaki/items/c2b7e9eaa04e12d75108)

ブラウザーで次のようなメッセージが表示された時の対策です。

```text
HTTP Status 400 – Bad Request

Type Exception Report

Message Invalid character found in the request target. The valid characters are defined in RFC 7230 and RFC 3986

Description The server cannot or will not process the request due to something that is perceived to be a client error (e.g., malformed request syntax, invalid request message framing, or deceptive request routing).

Exception

java.lang.IllegalArgumentException: Invalid character found in the request target. The valid characters are defined in RFC 7230 and RFC 3986
```

/var/lib/tomcat9/conf/server.xml に
relaxedPathChars と relaxedQueryChars を加えます。

```text:/var/lib/tomcat9/conf/server.xml
（省略）
    <Connector port="8080" protocol="HTTP/1.1"
               connectionTimeout="20000"
               redirectPort="8443"
               relaxedPathChars="[]|"
               relaxedQueryChars="[]|{}^\`"
 />
（省略）
```

再起動

```bash
sudo systemctl restart tomcat9
```

状態の確認

```bash
sudo systemctl status tomcat9
```
Makefileの基本

#TL;DR
Makefileについてうろ覚えだったので、調べてみました。

間違い等ありましたら、コメントいただけると幸いです。

#Makefileとは
プログラム開発だけでなく、いろいろな作業を自動化してくれる便利なファイルです。
Makefileはシェルコマンドで実行できるどんな言語でも記述できます。

基本的には、

```
$ make
```
これだけで、Makefileに記載されたコマンドが走ります。

##基本

```
ファイル名:
	[ファイル作成のためのコマンド行]
```
これがmakefileの基本形になります。このかたまりを**ルール**と呼びます。

Makefileには、**複数のルールを含めることができます**。

ルールの中にある [ファイル名] のことを**ターゲット**と呼びます。

**ターゲットは通常、プログラムによって生成されたファイルの名前です。**
`clean`のように実行するアクションの名前でもOKです。

**[ファイル作成のためのコマンド行] は複数行書いてOKです**。
**※[ファイル作成のためのコマンド行] の手前には、タブ1文字を入れること！**

長いラインはバックスラッシュ`\`と改行を続けて書いて2行に分割します。

##複数のルールを書いた場合
複数のルールを書いた場合には、`make`を実行するときにターゲット名を指定するようにします。
**指定しなかった場合は、一番最初に書かれたルールが実行されます。**

```
$ make target
```

さらに、複数のターゲットを同時に`make`したい場合は、以下のように書きます。

```
$ make target1 target2
```

##依存関係
**依存ターゲット**とは、そのターゲットを作るために必要なターゲットのことです。
target1というターゲットを作るためにtarget2という部品が必要な場合、以下のように書きます。

```
target1: target2
	[target1のコマンド行]
```

make実行時に依存ターゲットがあれば、ターゲットの更新日時を比較してコマンド行を実行すべきかどうか判断します。

例えば、

```
target1:target2
	[target1のコマンド行]
target2:
	[target2のコマンド行]
```
というMakefileで

```
$ make target1
```
を実行すると、

**まず、依存ターゲットtarget2を作成（＝[target2のコマンド行]を実行）します。**

※ただし、次の条件が成り立つときは何もしません．
**・依存ターゲットファイルがすでに存在している場合**

**次に、target1を作成（＝[target1のコマンド行]を実行）します。**

ただし、次の条件が成り立つときは何もしません。
**・target1とtarget2という名前のファイルが存在しており、target1の更新日付がtarget2の更新日付より新しい場合**

**もし更新日時が依存ターゲットより新しいならば、makeは何しません**

##複数のターゲットをまとめる
```
target1 target2: target3
	[コマンド行]
```
と書いた場合、次の2つのルールがあるのと同じです。

```
target1: target3
	[コマンド行]
target2: target3
	[コマンド行]
```

##.PHONY フォニーターゲット
ファイル名ではないターゲット（実行時のアクションをターゲット名にできる）をフォニーターゲット(Phony target=偽のターゲット)といい、明示的にコマンドを実行させたい時にこの名前を利用します。

**フォニーターゲットを使うのには、同名のファイルとの衝突の回避、パフォーマンスの向上という二つの理由があります。**

以下のように書きます。

```
.PHONY clean
clean:
	rm *.o temp
```
`.PHONY` の行は、それに続くターゲットがフォニーターゲットであることを明示的に表しています。

一応、書かなくても動きますが、万が一、同名のファイル（ここでは`clean`）ができたときに、ストップしてしまうことを防ぎます。

##例
以下、Makefileの例になります。

`make` または `make mylib.a` で `prog1` `prog2` `prog3` を実行します。（依存ターゲット）
また、`make clean` で全ての .o ファイルを削除します。

変数は `$(変数名)` で呼び出します。

`$@`：ターゲットに同じ
`$<`：依存ターゲットに同じ

```
CC = gcc
CFLAGS = -c -Wall -Wextra -Werror
LIBS = ar -rc
SOURCES = putchar.c swap.c
OBJS = putchar.o swap.o
TARGET = libme.a

$(TARGET): $(OBJS)
	$(LIBS) $(TARGET) $<

$(OBJS): $(SOURCES)
	$(CC) $(CFLAGS) -o $@ $<

.PHONY: clean
clean:
	rm -f $(OBJS)
```

以上です。 こんな感じで、ライブラリの更新など自動化していきましょう。

ではでは。


#参考資料
もっと詳しく知りたい方はこちらをご覧ください。

・[make触ってみた](https://kimikimi714.com/entry/2015/12/20/193000)
・[自動化のためのGNU Make入門講座 - Makefileの基本：ルール](http://objectclub.jp/community/memorial/homepage3.nifty.com/masarl/article/gnu-make/rule.html)
・[GNU make 日本語訳(Coop編) - makeコマンドの概要](https://www.ecoop.net/coop/translated/GNUMake3.77/make_1.jp.html)
Learning React #1 セットアップ

これって王道なのかしら。よく見かける組み合わせなので、少しづつ勉強したいと思い、その軌跡をつづっていきます。

# React + TypeScriptの環境セットアップ
私はWindows環境を想定した環境をセットアップします。

## 使用するツールのバージョン確認
今回は以下の環境で実施します。それぞれ説明すると、

* node : JavaScript実行環境
* npm : nodeのパッケージマネージャ（Node Package Managerの略）
* yarn : npmの改良版。nodeモジュールの追加/削除、モジュール間の依存関係の解消も自動化
* npx : nodeコマンド実行ツール。node上で実行するコマンドで必要となるパッケージをインストールしなくても実行できるようにするコマンド
* create-react-app : Reactアプリケーション用のプロジェクトフォルダーを自動生成するコマンド

```bash:バージョン確認
satom@W1007018N182 MINGW64 ~
$ node -v
v12.16.1

satom@W1007018N182 MINGW64 ~
$ npm -v
6.13.7

satom@W1007018N182 MINGW64 ~
$ yarn -v
1.22.4

satom@W1007018N182 MINGW64 ~
$ npx -v
6.13.7

satom@W1007018N182 MINGW64 ~
$ create-react-app -V
3.4.0

```
ちなみに```yarn```はFacebook社が開発したパッケージマネージャーで、npmよりも高速だそうです。

## コーディングツール
今回はVS Codeを使用します。
以下からダウンロードします。
https://azure.microsoft.com/ja-jp/products/visual-studio-code/

ダウンロードしたらインストールします。
インストール後、以下のプラグインをインストールすると、より快適な開発環境になると思います。
特に私はvimを愛用してきたので、vim用のプラグインも入れてます。

* Prettier : コード自動整形ツール
* ESList : コード解析ツール
* stylelint-plus : スタイルシート用Lint
* Visual Studio IntelliCode : AI支援によるAPIサジェストの精度向上
* Bracket　Pair Coloizer : 対応する括弧を色で表示
* Debugger for Chrome : VSCode上でブレークポイントや変数の監視が可能になる
* VSCodeVim : VS Code用のvimエミュレータ

以上、環境セットアップはここまで。
unityでプロジェクトをimportすると.wav(音声)ファイルでfreezeする！

かなりハマったのでメモがてらqiitaにて投稿。

久しぶりにunityでゲーム開発することになり、クラウド上に置いてあった数年前のプロジェクトをimportしようとすると「importing assets」のところでフリーズ...

一晩中おいてもまだ終了していないところをみると、完全に止まっている模様。

unityを強制終了しても「importing assets」 windowは開いたままで、最近買ったmacbook pro(2019年モデル)のファンがフル回転しているに、まだ何か処理が走っているみたい。

ということで、やむなくパソコンを再起動し、unityで再度プロジェクトのimportを試してみるも、同じファイル(.wav)でフリーズしている...

ちなみに使っている開発環境はこんな感じ。

MacOS: 10.15.5
unity: 2018.2.0f2

## 解決策

ネットでいろいろ検索してみたところ下記のページを発見。

[Installing Unity on macOS Catalina](https://forum.unity.com/threads/installing-unity-on-macos-catalina.689089/#post-4685435)

32bitのFMOD Toolってやつが **macOS 10.15に対応してなくて、unityの2017.4ならOKだけど、2018.1/2018.2はダメ？** そんな感じのことが書かれている。

私のversionがまさに2018.2なのでもしかしてこれが原因？ということで、unity hubから2018のLTSの2018.4をインストール。

インストール後、これまたunity hubのなかから自分がimportしたいprojectのバージョンを変更。

<img width="963" alt="Screen Shot 2020-06-27 at 8.06.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429037/04cc5334-69ef-b09c-5a65-b0555b80cf93.png">

最新版に上げてから再度プロジェクトを開いてみると...立ち上がった！！！

もし同じように.wavファイルでフリーズしてprojectがimportできないという場合は、ぜひ試してみてくださいね。
slimでspanを挟みたくなったときの書き方

ブラウザにはこのように表示していきたいと思います。
「間」という文字をspanで間に挿入し、全て一行で表示させます。
```左の文字(間)右の文字```

コードは、こちらになります。

```html.slim
p
  | 左のもじ(
  span
    | 間
  | )右の文字
```

spanタグを書くときは、改行します。
そして、表示させる文字は、さらに改行し、インデントの後に「|」を書いて、その後に文字を書きます。
span以降の文字は、改行し、pタグの括りになるインデントで「|」を書き、その後に書きます。

##参考記事
https://stackoverflow.com/questions/13514660/nesting-a-text-inside-a-tag-in-slim
const ＝定数(読み込み専用)と思い込むのはもうやめよう

「const修飾子がついた値は定数となり、同じ関数内では上書きできない」と単純に思い込んでいたら思わぬところでハマったので。
# constとは結局何なのか？
constの意味は、次のように定義づけられることが多い。

- 定数(上書き不可)
- 読み込み専用とする

**この定義は、半分正解であり半分間違っている**。

　
constが定数として常に上書き不可を保証するのは、修飾する対象が非ポインタ型のときだ。
しかしポインタが絡むと、constが何を修飾しようとするか、constをどこに配置するかなど、細かな使い方によって挙動が変わるのである。

C言語を扱ううえでこの辺が今までふんわりしていたので、調べてわかったことを備忘録として残しておく。

# const × 非ポインタ型の使い方
例えば下のようにchar型にconstをつけた場合、上書きしようとするとコンパイルエラーになる。

```C:main.c
int main(void)
{
    char c        = 'A';
    const char cc = 'B';

    c  = 'Z'; // 上書き可
    cc = 'Z'; // 上書き不可。コンパイルエラーになる
    return (0);
}
```
　
このようにchar型やint型などにconstをつけると、常に上書き不可になる。

なお、この場合constをつける位置は重要ではない。
**つまりconst intと書いてもint constと書いても挙動は同じである。**

```C:main.c
int main(void)
{
    char const c  = 'A';
    const char cc = 'B';

    c  = 'Z'; // 上書き不可。コンパイルエラーになる
    cc = 'Z'; // 上書き不可。コンパイルエラーになる
    return (0);
}
```
非ポインタ型にconstをつけるのは簡単だ。
ややこしいのは、ポインタ型にconstを修飾するときだ。

ポインタ型にconstをつける場合は、**どこにconstを配置するかによって挙動が変わるので注意が必要である**。

# const × ポインタ型の使い方
例えば、次の4パターンの挙動の違いを正確に説明できるだろうか。

- const **char***
- **char*** const
- const **char*** const
- char **const*** const

表にまとめてみるとこうなる。

| 　　　        |意味|値の変更|ポインタの位置変更|
|:-------------|:---|-----------:|:-------------:|
|const char*   |const char(読み取り専用)の文字列|❌　|⭕️|
|char* const   |char型のポインタをconst(位置制御)する|⭕️　|❌|
|const char* const|const char(読み取り専用)の文字列をconst(位置制御)する|❌　|❌|      
|char const* const|char型をconst(制御=読み取り専用)してconst(位置制御)する|❌　|❌|

覚え方としては、*(アスタリスク)は「その左側すべてに係る」と考えるのが一番わかりやすい。

- const char* → const char(読み取り専用)文字列
- char* const → char*(文字列)をconstする

[追記] 2020.6.28
コメントで多くのアドバイスいただきありがとうございます！
特に@yuki12さんの記事が大変わかりやすかったので追記いたします。

[ポインタ型に付ける const は型名の後ろに付くと考えると憶えやすい](https://qiita.com/yuki12/items/06c85af2735ddefd5666)

# const × 二重ポインタ型の使い方
二重ポインタ型にconstを掛け合わせるとどうなるのか。
例えば次の4パターンは**すべて挙動が違う**。

- const char**
- char* const*
- const char* const*
- char** const

なんか頭が痛くなってくる...
　
二重ポインタの場合は、普通のポインタ型に比べて条件がひとつ増える。
それは「配列内容を操作できるかどうか」だ。
つまり、具体的な値を上書きするかどうかではなく、**配列自体の順番を入れ替えたり、NULLポインタを指すよう上書きしたりする操作**をここでは「配列内容の変更」と呼ぶことにする。

さて、上の4パターンの挙動を整理すると次のようになる。

|       |意味|値の変更|配列内容の変更|ポインタの位置変更|
|:------|:--|:-----|:------------|:-------------:|
|const char**|読み取り専用の文字列(const char*)の配列|❌|⭕️|⭕️|
|char* const*|書き換え可能な文字列(char*)をconst(配列内容を読み取り専用とする)する|⭕️|❌|⭕️|
|const char* const|読み取り専用の文字列(const char*)をconst(配列内容を読み取り専用とする)する。|❌|❌|⭕️|
|char** const|書き換え可能な文字列の配列(char**)をconst(位置制御)する。|⭕️|⭕️|❌|

覚え方としては、constより左の内容が上書き不可になるイメージ。
わかりにくいので具体例をあげると、

```C:func.c
void func(const char **str)
{
    str[2] = "aaa"; //値の変更：不可
    str[0] = NULL;  //配列内容の変更：可
    str    = NULL;  //ポインタの位置変更：可
}
```
こんな感じ。
# constを使いこなすメリット
プログラムによって細かく挙動を制御することで、思いがけないデータの変更を防ぐことができる。
チーム開発するときには使いこなせると大変便利。
特に大規模なプログラムになるほどconstの役割は重要になりそう。

またC標準ライブラリなどでもconstは頻繁に使われているので、自分では積極的に書かないまでも、せめて遭遇したときに正確に読めるようにしておきたい。
# 参考
[【C言語入門】constの使い方](https://www.sejuku.net/blog/24139)
[constポインタは何が上書き不可なのか](https://tyfkda.github.io/blog/2018/08/14/c-const.html)
[constとは](https://wa3.i-3-i.info/word17200.html)
[hiramine.com](https://www.hiramine.com/programming/c_cpp/constcharconst.html)
[const char*s, char* const sの違い](https://www.ei.fukui-nct.ac.jp/2019/11/13/constcharp-vs-charpconst/)
画像等のalt属性の値について、typo検出ができるツールはあるか

考えて書きたいけど時間がないので予備投稿する。

多分一生書かない。

# 契機

某銀行からのメールで、マイナンバーが未ナンバーになっていた。
画像を表示すると見えなくなったので、alt属性値と判断し、メールソースを確認した。

チェックフローがあったとしても、作成環境下で画像を用いて視認していると、エラーチェックをパスしている。

視覚障碍者（視覚障害者）はスクリーンリーダーで読む可能性があるが、不自由をしているのではないか。
Python の Pull Request を生まれて初めて書いて学んだこと

私は普段は、まったくPythonに触れたことはないのだが、偶然 Azure Functions の Kafka extensionsのバージョンアップと、ブラッシュアップを実施することになったので、その一環として、Python のライブラリをアップデートする必要が生じた。

あまりに言語仕様やツールを知らないので苦労したので、学んだことを記録しておきたい。

* [Kafka extension implementation #62](https://github.com/Azure/azure-functions-python-library/pull/62)

# Virtual Environment
Python 3.4 以降は、Virtual Environment という仕組みが標準搭載されています。これは、ライブラリをインストールするときに、環境を分けてくれるものです。Ruby でいうbundle とか、node でいう npm のライブライの管理の仕組みに近しいものがあります。

具体的には次のコマンドを実行します。

```bash
$ python -m venv .venv
```
すると、`.venv`というディレクリが作成されます。`venv`を有効化するためには下記のコマンドを実行します。

```bash
$ source .venv/bin/activate
```
これによって、今後ライブラリをインストールすると、`.venv`以下に保存されるようになり、`.venv`がアクティベートされている間は、python のプログラムがこの下にインストールされているライブラリを参照できるようになります。

# setup.py
もし、ライブラリを追加したくなったら、`setup.py`にエントリを追加します。わたしがコントリビュートした[リポジトリ](https://github.com/Azure/azure-functions-python-library/blob/dev/setup.py)

```bash
$ python -m pip install -U -e ./[dev\]
```
こちらのコマンドで、`setup.py` の `extras_require` の `dev`の箇所もインストールされるようになります。尚、`-U` は `Upgrade` の意味で、パッケージをより新しいバージョンに更新します。`-e`は`Editable`の意味で、インストールされたライブラリが編集可能になります。通常は編集可能な形式になっていません。ライブラリのデバッグをするときは、実験したりソースを見たりしたいはずなので、`-e`をつけるのがお勧めです。

_setup.py_

```python
from setuptools import setup
from azure.functions import __version__


setup(
    name='azure-functions',
    version=__version__,
    description='Azure Functions for Python',
    long_description='Python support for Azure Functions is based on '
                     'Python3.[6|7|8], serverless hosting on Linux and the '
                     'Functions 2.0 and 3.0 runtime. This module provides the '
                     'rich binding definitions for Azure Functions for Python '
                     'apps.',
    author='Microsoft Corporation',
    author_email='azpysdkhelp@microsoft.com',
    classifiers=[
        'License :: OSI Approved :: MIT License',
        'Intended Audience :: Developers',
        'Programming Language :: Python :: 3',
        'Operating System :: Microsoft :: Windows',
        'Operating System :: POSIX',
        'Operating System :: MacOS :: MacOS X',
        'Environment :: Web Environment',
        'Development Status :: 5 - Production/Stable',
    ],
    license='MIT',
    packages=['azure.functions'],
    package_data={
        'azure.functions': ['py.typed']
    },
    extras_require={
        'dev': [
            'flake8~=3.7.9',
            'mypy',
            'pytest',
            'requests==2.*',
            'coverage'
        ]
    },
    include_package_data=True,
    test_suite='tests'
)
```

# Lint

まだ試してないけど、PythonのLintは結構癖があるので、Linter を入れておくのが良さげ

* [Linting Python in Visual Studio Code](https://code.visualstudio.com/docs/python/linting)

# PR
生まれて初めてPythonのPR

* [Kafka extension implementation #62](https://github.com/Azure/azure-functions-python-library/pull/62)
Herokuで一定期間経つとアップロードした画像が消えてしまう理由とその対処法（AWS fog）

## 今回起きた問題
初めて制作したアプリをデプロイしたはいいものの、画像を投稿して一定期間経つと「あれ....画像が消えてる!?」と画像が全て消えてデータが投稿文章だけになっていました。

## 原因
一定時間経つとHeroku上のリポジトリ (Dyno) が最後のコミットの状態にリセットされるため、画像が保存できないとのこと。

## 解決法
自分はクラウドストレージを使用して解決しました。今回はfogとawsのS3と画像アップロードにCarrierWaveを使用しています。

### 1.fog
fogとはRubyでクラウドサービスを使いやすくするためのGemです。
まずはfogをインストールします。gemfileの以下の記述をしたら bundle installをします

```
gem 'fog'
```

開発環境ではローカルファイルに画像保存で問題ありませんが、本番環境ではクラウドストレージサービス（fog）に保存するように条件分岐させます。

```app/uploaders/〇〇〇〇_uploader.rb
if Rails.env.production?
  storage :fog
else
  storage :file
end
```
### 2.S3
S3はAWSのサービスの一つです。

ここでの流れは
①AWSのアカウントを作成する
②AWS Identity and Access Management (IAM)でユーザーとグループ(AmazonS3FullAccess)作成（アクセスキーとシークレットアクセスキーは後から使うのでcsvはダウンロードしておくと良い）
③作成したユーザーでログインし、サービス「S3」にてバケットを作成する
といったものです
参考記事
<a href="https://go-journey.club/archives/9653#S3%E3%81%B8%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AE%E3%80%8C%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%80%8D%E3%81%A8%E3%80%8C%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%82%AD%E3%83%BC%EF%BC%88Access_key_ID%EF%BC%89%E3%80%8D%E3%81%A8%E3%80%8C%E3%82%B7%E3%83%BC%E3%82%AF%E3%83%AC%E3%83%83%E3%83%88%E3%82%AD%E3%83%BC%EF%BC%88Secret_access_key%EF%BC%89%E3%80%8D%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B%E6%89%8B%E9%A0%86" >【AWS】【S3】作成手順 ＆ アップロード手順 ＆ アクセス権限設定手順</a>


3.CarrierWaveの設定

```config/initializers/carrierwave.rb
if Rails.env.production?
  CarrierWave.configure do |config|
    config.fog_credentials = {
      provider: 'AWS',
      aws_access_key_id: ENV['ACCESS_KEY_ID'],
      aws_secret_access_key: ENV['SECRET_ACCESS_KEY'],
      region: 'ap-northeast-1'　# S3バケット作成時に指定したリージョン。
    }
    config.fog_directory  = 'food-pictures-bucket' # 作成したS3バケット名
  end
end
```
上記についてファイルに直接鍵の名前を書いてしまうと悪用されることがあるので、環境変数で設定しおきましょう。

### 4.Herokuの環境変数設定

```
$ heroku config:set ACCESS_KEY_ID=アクセスキー
$ heroku config:set SECRET_ACCESS_KEY=シークレットアクセスキー
```

ここまできたらターミナルで　git push heroku master　でデプロイしまししょう

## 終わりに
herokuでアップロードするだけでも他のクラウドサービスのことや秘密鍵のことについての知識が必要で大変でしたがこの方法でうまくいいきました。
この記事が少しでも参考になれば幸いです。
[Jupyter] 実行中のipynbファイルが自分のパスを取得できるパッケージを作った

# TL;DR

```bash
pip install ipynb-path
```

```python
import ipynb_path

# tokenでJupyterサーバーにログインできる場合:
print(ipynb_path.get())
# -> /path/to/this/notebook.ipynb

# もしくはパスワードが必要な場合:
print(ipynb_path.get(password='foo'))  
```

# はじめに

Jupyter Notebookでipynbファイルを実行するとき、
自分自身のファイル名が知りたくなることがありませんか？
例えば、実行ログを別ファイルに出力するときにファイル名を書き出しておきたい、とか。

ググるといくつか方法が出てきますが、Jupyter Notebook / Jupyter Lab 兼用で短く書ける方法はなさそうです。
そこでページ下部の参考サイトの解決方法を参考に関数化・パッケージ化してPyPIに登録しました。

GitHub: https://github.com/kzm4269/ipynb-path

# 使い方

- Jupyter Notebook / JupyterLab サーバーにtokenでアクセスできる場合

```python
import ipynb_path
__file__ = ipynb_path.get()
print(__file__)
```

- Jupyter Notebook / JupyterLab サーバーへのアクセスにパスワードが必要な場合

```python
import ipynb_path
__file__ = ipynb_path.get(password='foo')
print(__file__)
```

- 上記のコードを普通の `.py` ファイルにコピーすると `__file__` が上書きされてしまいます。
  この問題は、引数に `__name__` を渡すことで防ぐことができます。

```python
import ipynb_path
__file__ = ipynb_path.get(__name__)
print(__file__)
```

# 参考
- [Jupyter notebookのnotebook名を取得する](https://qiita.com/cafeal/items/b351ad9247ff88ede555)
- [How do I get the current IPython / Jupyter Notebook name](https://stackoverflow.com/questions/12544056/how-do-i-get-the-current-ipython-jupyter-notebook-name)
csvファイルのアップロードをRSpecでテストしたい

## はじめに
新卒エンジニアの@yhorikawaです
csvをアップロードする機能を作っていたのですが、テストの方法がわからず苦戦したので
今後ファイルアップロード機能をテストしたいときのために備忘録として残します。

## controller
```ruby:csv_upload.rb
def csv_upload
  # csv読み込み部分
  csv = CSV.read(params[:csv])
  # このあと保存処理
end
```
このような形のcontrollerにparams[:csv]といった形でcsvを渡します。

## テストコード
```ruby:csv_upload_request_spec.rb
describe 'post #csv_upload' do
  let(:params) { { csv: fixture_file_upload('csv_file_path', 'text/csv') } }
  subject { post 'csv_upload', params }
  
  it 'upload_csv' do
    expect(subject).to be_success
  end
end
```
csvファイルを`spec/fixtures/`などに保存して
`fixture_file_upload('csv_file_path', 'text/csv')`にcsvファイルの相対パスを書くことで
ファイルをパラメーターとして渡すことができます

## おわりに
`fixture_file_upload` を使うことで比較的簡単に実装することができました。
csvに限らずファイルのアップロード機能をテストしたいことはあると思うので記事を書きました。
CameraのDepthTextureModeをDepth有効にした際のFrameDebuggerの変化

設定し直すのが面倒なので画像付きでメモしておきます。

環境はこちら

- Unity2019.4.0f1
- 新規シーン
- Cameraの設定は下記
    - HDRなし
    - MSAAなし
    - ClearFlag　は　SolidColor
- Lightingは下記
    - Shadowなし
- この状態でキューブを置く

![スクリーンショット 2020-06-27 2.01.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61266/36ea42c6-bb72-3ea7-76c5-f15a52373fbd.png)
で、この状態になるわけですが、
FrameDebugを確認すると
![スクリーンショット 2020-06-27 2.01.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61266/ac4068ea-c72e-d039-4b8c-764c229d5af0.png)
こんな感じ。

- ClearとCube描画でEvent2つ。
- Statsを見ると
    - Batches　は　1
    - SetPass　は　1
- RenderTargetは no name

で、ココでCameraのDepthTextureModeをDepthに設定

```cs:DepthCheck.cs
public class DepthCheck : MonoBehaviour
{
    // Start is called before the first frame update
    void Start()
    {
        var camera = GetComponent<Camera>();
        camera.depthTextureMode = DepthTextureMode.Depth;
    }
}
```
すると、FrameDebugは下記。
![スクリーンショット 2020-06-27 2.02.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61266/f59a83e4-c0be-c4ec-a2f8-37feff3f6860.png)

- Eventは４つ
    - まずDepthTextureを更新して、その後先程の描画を行う
- Statsを見ると
    - Batches　は　2
    - SetPass　は　2
- RenderTargetは
    - UpdateDepthBuffer　は　CameraDepthTexture
    - メイン描画部分は no name

UpdateDepthTextureが描画前に追加されます。

----
とりあえずのメモ書きということで置いておきます。
我ながらレベルの低い事をやっているけれども、それでもログを取っておけば今後の記事でリンクも貼れて手間が解消できるはず…。
ページ内リンクで位置を調整する方法

# プログラミングの勉強日記
2020年6月27日　Progate Lv.148
ポートフォリオ作成中
前回作成したwebページの調整をしている

##ページ内リンクの作成
　`<nav>`を利用してナビゲーションを作成する。ナビゲーションはページ内外のリンクのことである。

```html
<nav>
  <ul>
    <li><a href="#iceland">Iceland</a></li>
    <li><a href="#aurora">Aurora</a></li>
    <li><a href="#blueLagoon">BLUE LAGOON</a></li>
  </ul>
</nav>

<h1 id=aurora>Aurora in Iceland</h1>
<h1 id=iceland>Iceland</h1>
<h1 id=blueLagoon>BLUE LAGOON</h1>
```


<img width="466" alt="リンク.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/21fa5ec2-5544-f58a-46fb-57b4d73c0430.png">

　しかし、このままだと写真の上に書かれている文字がヘッダーと重なってしまって見えなくなってしまっている。なのでリンク先をもう少し下に指定したい。

##ページ内リンクの位置を変更
 CSSでpaddingやmarginを指定することでリンク先の位置を変えることができる。

```css
#iceland, #aurora, #blueLagoon{
    padding-top:100px;
}
```

<img width="446" alt="リンク2.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/cf489972-0fbe-3396-5756-f7b7e0f1a4f7.png">


このように指定することでリンク先の位置を調整することができた。
【Oculus/SteamVR】バイブレーション機能の周波数の範囲を調べてみた【Unity】

# TL;DR

多分この範囲、違ってたら教えてください

- Rift: 160-320Hz
- Rift S: 160-500Hz
- Quest: 160-500Hz
- SteamVR: 0-360Hz

# はじめに

現行のOculus/SteamVRのバイブレーション機能のメソッドで共通している`frequency(周波数)`の範囲について調べてみました。

```.cs
// Oculus Integration 17.0 (OVRPlugin 1.49.0)
SetControllerVibration (float frequency, float amplitude, Controller controllerMask)

// SteamVR Plugin V2
Execute(float secondsFromNow, float durationSeconds, float frequency, float amplitude, SteamVR_Input_Sources inputSource)
```

- [Unity Haptics](https://developer.oculus.com/documentation/unity/unity-haptics/)
- [Class SteamVR_Action_Vibration | SteamVR Unity Plugin](https://valvesoftware.github.io/steamvr_unity_plugin/api/Valve.VR.SteamVR_Action_Vibration.html#Valve_VR_SteamVR_Action_Vibration_Execute_System_Single_System_Single_System_Single_System_Single_Valve_VR_SteamVR_Input_Sources_)

# Oculusのバイブレーション機能

Oculusの`SetControllerVibration()`では`frequency`を`0-1`で指定します。

> 振幅と振動数の期待値は0から1の間の値(両端を含む)です。値が大きいほど、コントローラーの振動がより強くなるか、振動数が大きくなります。

引用元: [Unity Haptics](https://developer.oculus.com/documentation/unity/unity-haptics/)

上記のページには周波数の値について言及がないのですが、古いドキュメントに下記のような記載がありました。

> 振動を有効にするには振動数を指定します。0.0fを指定すると、160Hzで振動します。1.0fを指定すると、Riftでは320Hz、Rift Sでは500Hzで振動します。

引用元: [Haptic Feedback](https://developer.oculus.com/documentation/native/pc/dg-input-touch-haptic/?locale=ja_JP&device=RIFT)

この範囲が変わっていないとすると、`0-1`指定はこのような対応になりそうです。

- Rift: 160-320Hz
- Rift S: 160-500Hz
- Quest: 160-500Hz (Rift Sと同じコントローラーのはず[^1]）

[^1]: "QuestとRift Sは、共通の「Oculus Touch」コントローラーを使用しています。"（引用元: [「Oculus Quest」「Oculus Rift S」「Oculus Go」どれを買う？ オススメVRデバイス徹底比較 | Mogura VR](https://www.moguravr.com/oculus-rift-s-quest-go)）

# SteamVR

SteamVRの場合はドキュメントのDescriptionに記載がありました。

> // How often the haptic motor should bounce (0 - 320 in hz. The lower end being more useful)

引用元: [Class SteamVR_Action_Vibration | SteamVR Unity Plugin](https://valvesoftware.github.io/steamvr_unity_plugin/api/Valve.VR.SteamVR_Action_Vibration.html#Valve_VR_SteamVR_Action_Vibration_Execute_System_Single_System_Single_System_Single_System_Single_Valve_VR_SteamVR_Input_Sources_)

デバイス毎に違いがないのか気になるところですが、SteamVRでは`0-360Hz`の値を指定できるようです。

# 最後に（ポエム）

Oculusでは同じ`0-1`の指定で周波数の最大値が360Hz/500Hzと異なるデバイスがありますが、体験をデザインする上でこれって最適なんでしょうか？同じアプリでもRiftとRift Sでは感じ方が意図せず変わってしまうことを危惧しています。

例えば「軽めの振動と重めの振動」のような使い分けなら大丈夫そうですが、特定のモノ（リンゴなど）に触った時の最適な周波数は同じ値になる気がします。下記のような実装で一応固定値の指定はできますが、用意されているメソッドの使い道から外れていてかなり気持ち悪いです。どうするのがいいんでしょうね？

```.cs
// 周波数を200Hzで指定する
var clampedFrequency = GetClamp01(200f);
OVRInput.SetControllerVibration (clampedFrequency, amplitude, controllerMask)

// デバイスの差異を無くすためのメソッド
float GetClamp01(float frequency)
{
	if(Rift)
	{
		return (frequency - 160f) / (360f - 160f);
	}
	if(RiftS || Quest)
	{
		return (frequency - 160f) / (500f - 160f);
	}
}

```

# 参考

[[SteamVR Plugin V2] コントローラーへバイブレーション機能を付ける - Unity+UnrealEngine4+Blog.](https://nabesi777.hatenablog.com/entry/2019/03/07/_%E3%82%B3%E3%83%B3%E3%83%88%E3%83%AD%E3%83%BC%E3%83%A9%E3%83%BC%E3%81%B8%E3%83%90%E3%82%A4%E3%83%96%E3%83%AC%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E6%A9%9F%E8%83%BD%E3%82%92%E4%BB%98%E3%81%91%E3%82%8B)
tensorflowのscalar_summaryのログを展開する（tensorflowを使わない場合）

TensorflowやPyTorchによるログの出力としてTensorboardのtfeventファイルへの書き出しがある。これを可視化するにはtensorboardを使うことが多いだろう。しかしmatplotlibでのプロットなど他の用途でログを使いたい場合があると思う。Tensorflowには出力されたtfeventファイルをパースしてくれる[モジュールがある](https://qiita.com/kzmssk/items/3b08f9cd400cb3102c1b)。しかしPyTorchを使っている場合などはこのログを展開ためにわざわざtensorflowをインストールするのは煩わしい。

PyTorchのTensorboardモジュール実行に必要である`Tensorboard`だけでもログをPythonのオブジェクトに展開できる。Tensorboardは`EventAccumulator`を使ってログであるtfeventファイルを読み込んでいるのでこれを使えば良い。

以下のサンプルはランダムに出力されたScalar Summaryを読み込んでprintで出力している。他のデータ型も同様にできると思う。詳しくは[Tensorboardのソースコード](https://github.com/tensorflow/tensorboard/blob/master/tensorboard/backend/event_processing/plugin_event_accumulator.py)を参照してほしい。

```python
import tempfile
from pathlib import Path

import numpy as np
from tensorboard.backend.event_processing.plugin_event_accumulator import EventAccumulator
from torch.utils.tensorboard import SummaryWriter


def load_tfevent(event_filename: Path, tag: str = 'foo'):
    assert event_filename.exists()
    acc = EventAccumulator(path=str(event_filename))
    acc.Reload()

    # check `tag` exists in event
    assert tag in acc.Tags()['tensors']

    for t in acc.Tensors(tag):
        print(f'walltime = {t.wall_time}, step = {t.step}, value = {t.tensor_proto.float_val[0]}')


def parse_tflog():
    writer = None
    with tempfile.TemporaryDirectory() as dname:
        log_dir = Path(dname)
        with SummaryWriter(log_dir=log_dir) as writer:
            for i in range(100):
                writer.add_scalar('foo', np.random.random(), i)

        tfevents = list(log_dir.glob('events.out.tfevents.*'))
        assert len(tfevents) == 1
        tfevent = tfevents[0]

        load_tfevent(tfevent)


if __name__ == '__main__':
    parse_tflog()

```
Python3.8 以降では、逆元のmodが組み込み関数のpowで計算できる。

# 概要
競技プログラミングでよく使われる逆元の剰余演算ですが、Python3.8以降では組み込み関数のpowを用いて計算できるようになったようです。

これまでは下記の記事のような方法を参考にして、逆元の剰余を求める関数を独自に作る必要がありました。
[「1000000007 で割ったあまり」の求め方を総特集！ 〜 逆元から離散対数まで 〜(Qiita)](https://qiita.com/drken/items/3b4fdf0a78e7a138cd9a)

Python3.8以降で例えば

```math
38^{-1}\,\,mod\,\,97
```
を計算したい時は

```python
pow(38, -1, 97)
```
で計算できるようになります。

# 公式ドキュメントを確かめる
## Python3.7
[組み込み関数-pow(x, y[, z])](https://docs.python.org/ja/3.7/library/functions.html#pow)

>pow(x, y[, z])
>x の y 乗を返します; z があれば、x の y 乗に対する z の剰余を返します
>〜中略〜
>z がある場合、 x および y は整数型でなければならず、 y は非負でなくてはなりません。

## Python3.8
[組み込み関数-pow(base, exp[, mod])](https://docs.python.org/ja/3.8/library/functions.html#pow)

>pow(base, exp[, mod])
>base の exp 乗を返します; mod があれば、base の exp 乗に対する mod の剰余を返します
>〜中略〜
>For int operands base and exp, if mod is present, mod must also be of integer type and mod must be nonzero. If mod is present and exp is negative, base must be relatively prime to mod. In that case, pow(inv_base, -exp, mod) is returned, where inv_base is an inverse to base modulo mod.

3.7のドキュメントでは``pow(x, y, z)`の引数`y`（`exp`）は引数`z`（`mod`）がある場合、非負でなくてはならないと書いてありますが、その記述は3.8のドキュメントでは削除されています。3.8のドキュメントでは`pow(base, exp, mod)`の引数`exp`が負の数のときは、`base`と`mod`は互いに素でなければならないと書かれており、引数`exp`は`mod`がある場合でも負の数を許容しています。

# 実際に確かめてみる。

```shell
keigo0205@MacBook-Pro ~ % python --version
Python 3.8.2
keigo0205@MacBook-Pro ~ % python
Python 3.8.2 (default, Mar 24 2020, 11:35:26) 
[Clang 11.0.0 (clang-1100.0.33.17)] on darwin
Type "help", "copyright", "credits" or "license" for more information.
>>> pow(38, -1, 97)
23
>>> 23 * 38 % 97 == 1
True
>>> exit()
```

```shell
keigo0205@MacBook-Pro ~ % python --version
Python 3.7.7
keigo0205@MacBook-Pro ~ % python
Python 3.7.7 (default, Mar 24 2020, 13:42:02) 
[Clang 11.0.0 (clang-1100.0.33.17)] on darwin
Type "help", "copyright", "credits" or "license" for more information.
>>> pow(38, -1, 97)
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
ValueError: pow() 2nd argument cannot be negative when 3rd argument specified
>>> exit()
```

本当ですね・・・

# AtCoderで逆元のmodを使う問題を解いてみる。
[ABC159-D - Bouquet](https://atcoder.jp/contests/abc156/tasks/abc156_d)を解いてみます。AtCoderのPythonはバージョン3.8.2になります。

問題概要
自然数`n`とそれ以下の相異なる自然数`a`と`b`が与えられます。
次の式の答えを`10**9 + 7`で割ったあまりを求めなさい。ただし、`a`と`b`は`2*10**5`以下である点に注意せよ。

```math

2^n - 1 - nCa - nCb

```

[解答例](https://atcoder.jp/contests/abc156/submissions/14701655)

```python
n, a, b = list(map(int, input().split()))
MOD = 10**9 + 7

# 1!からmax(a, b)!までの逆元をMODで割ったあまりと
# nからn-max(a*b)までをかけてMODで割ったあまりを求めます。
fact = {}
fact[n] = n
fact[n - 1] = fact[n] * (n - 1) % MOD

inv_fact = [0] * (max(a, b) + 1)
inv_fact[1] = 1

for i in range(2, max(a, b) + 1):
    fact[n - i] = fact[n - i + 1] * (n - i) % MOD
    inv_fact[i] = inv_fact[i - 1] * pow(i, -1, MOD) % MOD

subtrahend = 1 + fact[n - a + 1] * inv_fact[a] + fact[n - b + 1] * inv_fact[b]
minuend = pow(2, n, MOD)

print((minuend + 2 * MOD - subtrahend) % MOD)

```

# まとめ
Python3.8になって組み込み関数の機能が拡張されていたので紹介しました。定期的に公式ドキュメントは読んだ方がいいですね。

個人的にはわざわざ独自関数を持ってこずに逆元のmodをシンプルに書けるようになって嬉しいです。
ChromeDriver 通知バー消す方法 (Java)

# Selenium (ChromeDriver) での「自動テストソフトウェアによって制御されています]という通知バーを削除する方法

|![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531595/0f385dee-a0d5-dd2b-7480-ca7250710894.png)|
|:--|
この表示邪魔ですよねー。


通知バーを消すと、デベロッパーモードを無効にしますか？とポップアップが出てしまい、
なかなか方法が見つかりませんでしたが、合わせ技で通知バーを消すことができたので記事に起こしておきます。

```
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;

ChromeOptions options = new ChromeOptions();
options.setExperimentalOption("excludeSwitches", new String[] { "enable-automation" });
options.setExperimentalOption("useAutomationExtension", false);
WebDriver driver = new WebDriver(options);
```

パスワード保存のポップアップ非表示は
`WebDriver driver = new WebDriver(options);`
の直前に以下のコードを追記すればできます。

```
Map<String, Object> prefs = new HashMap<String, Object>();
prefs.put("credentials_enable_service", false);
prefs.put("profile.password_manager_enabled", false);
options.setExperimentalOption("prefs", prefs);
```

これを丸ごとコードに記述することで通知バーが見事に消えます。