OmniAICreator/Qiita-1.07M huggingface dataset:
Rails EngineのRoutesを書き換える

## はじめに
Rails Engineは複数のプロジェクトで、同じアプリケーションの機能を提供したい場合に使いますよね

有名なgemでは[device](https://github.com/heartcombo/devise)とかでしょうか

そんなRails Engineですが、上位アプリケーションで独自の機能を追加したいときがあります

今回はRoutesにフォーカスします

上位アプリケーションで、Rails EngineのRoutesを上書き、追加してみましょう

## Rails Routes
アプリケーションのルーティングを定義します

```routes.rb
Rails.application.routes.draw do
  resources :posts
end
```

Rails Engineではこんな感じです

```routes.rb
MyEngine::Engine.routes.draw do
  resources :users
end
```

### draw
この`draw`メソッドが何をやっているのか見てみる

https://github.com/rails/rails/blob/66a4cf4bbc0651b995646ad86aa76f5634da49c5/actionpack/lib/action_dispatch/routing/route_set.rb#L407-L412

```rails/actionpack/lib/action_dispatch/routing/route_set.rb
def draw(&block)
  clear! unless @disable_clear_and_finalize
  eval_block(block)
  finalize! unless @disable_clear_and_finalize
  nil
end
```

なんかclear!して、blockを展開して、finalize!している

### clear!
clear!が何をしているのか見てみる

https://github.com/rails/rails/blob/66a4cf4bbc0651b995646ad86aa76f5634da49c5/actionpack/lib/action_dispatch/routing/route_set.rb#L438-L445

```rails/actionpack/lib/action_dispatch/routing/route_set.rb
def clear!
  @finalized = false
  named_routes.clear
  set.clear
  formatter.clear
  @polymorphic_mappings.clear
  @prepend.each { |blk| eval_block(blk) }
end
```

なんか`@prepend`を展開してますね

`@prepend`はどこでセットされてるのか？

```rails/actionpack/lib/action_dispatch/routing/route_set.rb
def prepend(&block)
  @prepend << block
end
```

prependってメソッドのblockが展開されることがわかります

ってことは、prependで定義されたroutesは、アプリケーションのdrawで定義された手前に差し込まれるってことです

Railsのroutesは上から順番にマッチングされるので、定義済みのルーティングを上書きしたりできます

### finalize!
finalize!が何をしているのかを見てみる

https://github.com/rails/rails/blob/66a4cf4bbc0651b995646ad86aa76f5634da49c5/actionpack/lib/action_dispatch/routing/route_set.rb#L432-L436

```rails/actionpack/lib/action_dispatch/routing/route_set.rb
def finalize!
  return if @finalized
  @append.each { |blk| eval_block(blk) }
  @finalized = true
end
```

`@append`を展開してますね

`@append`はどこでセットされているのか？

```rails/actionpack/lib/action_dispatch/routing/route_set.rb
def append(&block)
  @append << block
end
```

appendってメソッドのblockが展開されていることがわかります

ってことは、appendで定義されたroutesは、アプリケーションのdrawで定義されたあとに差し込まれるってことです

なので、単純にRoutesを追加することができますが、アプリケーションで定義されているルーティングが優先されます

## Rails EngineのRoutesを上書き
では、Engineのroutesを上書きしてみる

こんなルーティングが定義されていて、ネストしたルーティングに上書きしたい！

```routes.rb
MyEngine::Engine.routes.draw do
  resources :users
end
```

上書きなので、`prepend`を使って定義します

こういうネストをさせたいユースケースは、Engineの名前空間を利用したいときですかね

```config/initializers/my_engine_routes.rb
MyEngine::Engine.routes.prepend do
  resources :users do
    resources: posts
  end
end
```

追加したい場合は、`append`を使って定義します

```config/initializers/my_engine_routes.rb
MyEngine::Engine.routes.append do
  resources: posts
end
```

## まとめ
今回はRilas EngineのRoutesを上書き、追加する方法を、Railsのコードをみながら書きました

もちろん、上位アプリでも同じことができます

`prepend`,`append`を使って、肥大化したroutesのファイルを分割したりもできますね
npmに自作モジュールを公開する方法

# はじめに

先日Node.jsの勉強中にnpmについて改めて学ぶ機会がありました。その際npmにサンプルのモジュールを公開したので、具体的なやり方をシェアします。

# npmとは

Node Package Managerが正式な名称です。その名の通りNode.jsのパッケージを管理するためのツールです。ホームページは下記リンク先からアクセスできます。

[https://www.npmjs.com/](https://www.npmjs.com/)

npmはNode.jsをインストールする際にインストールされます。インストール済みの場合、下記コマンドでバージョンが表示されます。

```
npm --version
```

# npmに自作モジュールを公開する方法

## 公開までの流れ

流れは下記の通りです。

- npmのアカウントを作成する。
- 公開したいモジュールを作成する。
- npmへログインする。
- npmへ公開する。

それでは1つずつ見ていきます。

## npmのアカウントを作成する

まずはnpmのアカウントを作成します。下記リンク先からSign Upできます。

[https://www.npmjs.com/signup](https://www.npmjs.com/signup)

## 公開したいモジュールを作成する

npm initでpackage.jsonを作成します。package nameを聞かれるので、npmレポジトリ上に存在していない名前を入力します。あらかじめnpmのサイトで利用されていない名前であることを確認しておきましょう。

```
npm init
```

package.jsonができたら、private属性をpackage.jsonに追記して公開設定にします。

```
"private": false
```

次に、README.mdファイルを準備します。ここにはどういった動きをするモジュールなのか、プロジェクトの概要を記述しておきます。

## npmへログインする

ターミナルを起動し、プロジェクトのルートで下記コマンドを入力します。ユーザーネーム、パスワード、メールアドレスを聞かれるので入力します。

```
npm login
```

## npmへ公開

ログインができたら、下記コマンドで公開できます。

```
npm publish —access public
```

※—dry runオプションをつけることで、お試しで実行することができます(実際には公開されません)。

```
npm publish —access public —dry run
```

# 最後に

簡単ですがサンプルのモジュールをGitHub上にpushしたので、package.json等の参考までに見てください。

[https://github.com/n199603/npm-study](https://github.com/n199603/npm-study)

以上、npmに自作モジュールを公開する方法でした。見ていただきありがとうございました。
TableViewを余分にスクロールできるようにする

##はじめに

TableViewの上にボタンを重ねるUIを作る時に、一番下にスクロールしてもボタンに重なったままになるのを防ぐために余分なスクロール領域を確保する。


##コード

下部に100の余分な領域を確保する

```swift
tableView.contentInset = UIEdgeInsets(top: 0, left: 0, bottom: 100, right: 0)
```

##参考にさせていただきました
UIScrollViewのコンテントオフセットとコンテントインセットについて
http://u16suzu.hatenablog.com/entry/2015/04/01/195309
パスワード変更機能

Springでパスワード変更機能の実装
学習の記録用として記載

##DBのパスワードと入力されたパスワードの照合

・パスワードはハッシュ化されたものが登録されている状態

※DBにハッシュ化（暗号化）してパスワードを保存⬇️

```java:Service.java
@Autowired
PasswordEncoder;

public Entity save(Entity user, String rawPassword){

    String encodedPassword = passwordEncoder.encode(password);
    user.setPassword(encodedPassword);
    return Repository.save(user);
}
```

####PasswordEncoderとは
Spring Securityが提供するクラスで、DBなどにログインパスワードを保存するときの暗号化に関わるクラス
・パスワードを暗号化(ハッシュ化)をする
・認証時に入力のパスワードと、保存した暗号化パスワードが一致するかを確認する
<a href="https://spring.pleiades.io/spring-security/site/docs/current/reference/html5/">Spring Security 公式リファレンス</a>


・入力したパスワードとDBに保存されているハッシュかされたパスワードが一致するかを照合する

```Controller.java

//入力したパスワードとDBのハッシュ化されているパスワードの照合
if (passwordEncoder.matches(rawPass,dbPass)){
   //一致すれば画面遷移
   return "/index";
}
```
[![Image from Gyazo](https://i.gyazo.com/a4d3572c503fc3eb0e25907b148d831c.png)](https://gyazo.com/a4d3572c503fc3eb0e25907b148d831c)
<a href="https://spring.pleiades.io/spring-security/site/docs/current/api/org/springframework/security/crypto/password/PasswordEncoder.html">Spring Security 公式リファレンス</a>
[Flutter] SharedPreferences がcallback内で更新されない時の解決法

### やりたいこと
```main.dart
void initState(){
  funcA('Home');
  callbackStarter(); //ここで、callbackを呼び出し。
}

Future<void> funcA (String locationName) async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setString('currentGeofence', locationName);
}

static Future<void> callback() async {
    final prefs = await SharedPreferences.getInstance();
    final currentGeofence = await prefs.getString('currentGeofence'); ///ここで、funcAで登録した値が読み込まれない。。  
}

```

`background_locator` を用いて、location を随時取得しているのだが、
ある関数内で更新しているSharedPreferencesを、locationをとるためのcallback内で呼びだしてるけど、更新された値が取得できない

### 解決策
`SharedPreferences.reload()` を使う

```main.dart
static Future<void> callback() async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.reload();
    final currentGeofence = await prefs.getString('currentGeofence'); 

}
```

### 参考Document
- https://github.com/rekab-app/background_locator/issues/92#issuecomment-667086237
Clangビルドスクリプト

C++をきっちり使いっているみなさんなら、なるべく最新のClangを使いたくなると思います。

しかし、dist公式パッケージには古いやつしかない…。
なのでソースビルドをしたいけれど、いっぱい色々落としてきたり特定の場所に置いたりするのが面倒＆間違えそう。

そんな人（主に私）のために、随分前からClangを自力でビルドするスクリプトをbitbucketのsnipetに公開していたんですが

* 毎回たどり着くのが難しい（snipetってgoogle検索に引っかからないらしい）
* 使い方を忘れる

という声を聞いたので、紹介がてらQiita記事にしておきます。

## 簡単な使い方

まず、スクリプト自体は https://bitbucket.org/aokomoriuta/workspace/snippets/KqEaE にあります。

使い方は簡単で、スクリプトのコメントにもありますが

```shell-session
$ cd /where/you/want/to/build
$ curl -L 'https://bitbucket.org/!api/2.0/snippets/aokomoriuta/KqEaE/master/files/clang.sh' | bash
```

だけです。これでClangが使えるようになります。

## なにが起きるのか

ぱっと読んで分かると思いますが、

1. `/where/you/want/to/build`（つまり、自分がビルドしたいディレクトリをどこか適当に作ったところ、例えば`~/clang/`）に移動して
2. 上記スクリプトのmaster（最新版）をダウンロードして実行

しているだけです。

これをすると、

0. 指定されたバージョンの
1. ソースコードのtarが自動でダウンロードされ
2. 適切な場所に展開され
3. cmake&makeを使って、x86向けリリースビルドされる

という感じです。汎用的になってないので、特殊な環境では動かないかもしれませんが、私が日ごろ使うFedora/Ubuntu/CentOS/RHELあたりでは動いています。

ビルド時にcmakeのバージョンが古かったり、依存パッケージがないって怒られることもあるかもしれませんが、Clangを自力ビルドするような方ならエラーメッセージ見れば自己解決できますよね。

## バージョンを上げたい下げたい

記事執筆時点ではv11.0.1に対応させてありますが、私が気づいたタイミングで更新し続けているので、これを読んだ方はもっと新しいバージョンがあるかもしれません。

私が対応してあったら、masterは私が気づいた時点での最新版になってると思います。

もしもっと新しいバージョンにしたければ、スクリプトを時前で落としてきて

```shell-session
$ wget 'https://bitbucket.org/!api/2.0/snippets/aokomoriuta/KqEaE/master/files/clang.sh'
```

clang.shの中にある`VERSION=`を変えて、自力で`bash clang.sh`とかして使ってください。それだけで動くはずです。

古いバージョンにしたい場合も同様に、`VERSION`を変えてください。
ただし、それなりに古いバージョン（例えばのv9.0.0とか）の場合、LLVMがまだgithub.comになかった時代なので、その場合は更新履歴から[古い時代のスクリプト](https://bitbucket.org/aokomoriuta/workspace/snippets/KqEaE/revisions/294aff0ac161a7a899bb684e33cc3e5abf63d5fe)を持ってきて使ってください。

## 余談：システムインストールもしたい

```shell-session
$ sudo make install
```

で強制的にインストールもできますが、もうちょっと管理したければ[porgを使って](https://qiita.com/japboy/items/57063e3e0fc021617dd3)、

```shell-session
$  sudo porg -lp clang-11 make install
```

とかしても良いと思います。suffixとかホーム以下へのインストールをしたい人はcmakeのオプションで指定しましょう。

## サポート

別にClang/LLVMの専門家ではないのでサポートとかは保証しませんが、ここのコメントとかに書いてあったら誰か気づいた人（私かもしれない）が回答してくれるかもしれませんね。

フリーライセンスにしてあるので、問題があればライセンスにしたがって改変・再配布ご自由にどうぞ。snipetなのでpull reqみたいな仕組みはないですが、適当な形で投げてくれれば適当に取り込みます。
Gatsby.jsにて【Font Awesome】を使用する方法

Gatsby.jsにて【Font Awesome】を使用する方法です。

## まずは、Font Awesome を導入する

```terminal:yarn
yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/react-fontawesome
```

```terminal:nmp
npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/react-fontawesome
```

### 使用したいFont Awesomeのアイコンをインストール
```terminal:yarn
#solid
yarn add @fortawesome/free-solid-svg-icons

#regular
yarn add @fortawesome/free-regular-svg-icons

#brand
yarn add @fortawesome/free-brands-svg-icons
```
```terminal:npm
#solid
npm install @fortawesome/free-solid-svg-icons

#regular
npm install @fortawesome/free-regular-svg-icons

#brand
npm install @fortawesome/free-brands-svg-icons
```

これでFont Awesomeの導入は完了です。

## Gatsby.jsにて【Font Awesome】を使用する

```tsx
import React from 'react'

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faBars, faCalendar } from '@fortawesome/free-solid-svg-icons'
import { faTwitter, faInstagram } from '@fortawesome/free-brands-svg-icons'

export default () => {
  return (
    <div>
      <p>
        <FontAwesomeIcon icon={faBars} />
        <FontAwesomeIcon icon={faCalendar} />
        <FontAwesomeIcon icon={faTwitter} />
        <FontAwesomeIcon icon={faInstagram} />
      </p>
    </div>
  )
}
```

上記のように使用したいアイコンをimportして、使用することができます。
[Unity]NullReferenceException: Object reference not set to an instance of an object xxx. の解決例

## エラーの様子

![スクリーンショット 2021-01-09 11.00.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555157/e9494440-b07a-509a-9fed-a31e06906195.png)

## 原因
今回はC#のファイル内に間違いはなく、inspector内の変数の設定のし忘れがあるようです。
ちなみに今回の筆者の場合は下記の図のimageの部分の設定し忘れでした。

![スクリーンショット 2021-01-09 11.02.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555157/c047049f-73da-024d-2d6f-05b4349237df.png)

## 解決策
inspector内の変数の設定のし忘れを見つけて、設定することで修正できます。

## 同じエラーの記事
C#ファイルの中でGetComponentしてなかったときの記事：
https://qiita.com/KONTA2019/items/c964af275419dc425d3e
windowsでiverilog その86

#概要　

windowsでiverilogやってみた。
td4のcpu書いてみた。

#サンプルコード


```

module cpu4(input clk, input rst, input [3:0] inport, output reg [3:0] outport);
	reg [3:0] a,
		b,
		pc;
	reg c;
	reg [7:0] mem[15:0];
	wire [7:0] code;
	wire [3:0] op;
	wire [3:0] opland;
	assign code = mem[pc];
	assign op = code[7:4];
	assign opland = code[3:0];
	always @(posedge clk, negedge rst)
	begin
		if (!rst)
		begin
			mem[0] <= 8'hb7; //out 7
			mem[1] <= 8'h01; //add_a 1
			mem[2] <= 8'he1; //jnc 1
			mem[3] <= 8'h01; //add_a 1
			mem[4] <= 8'he3; //jnc 3
			mem[5] <= 8'hb6; //out 6
			mem[6] <= 8'h01; //add_a 1
			mem[7] <= 8'he6; //jnc 6
			mem[8] <= 8'h01; //add_a 1
			mem[9] <= 8'he8; //jnc 8
			mem[10] <= 8'hb0; //out 0
			mem[11] <= 8'hb4; //out 4
			mem[12] <= 8'h01; //add_a 1
			mem[13] <= 8'hea; //jnc 10
			mem[14] <= 8'hb8; //out 8
			mem[15] <= 8'hff; //jmp 15
			a <= 4'h0;
			b <= 4'h0;
			pc <= 4'h0;
			c <= 0;
		end
		else
		begin
			case (op)
			4'h0: // add_a im
			begin
				{c, a} <= a + opland;
				pc <= pc + 1;
			end
			4'h1: // mov_a b
			begin
				a <= b;
				pc <= pc + 1;
			end
			4'h2: // in a
			begin
				a <= inport;
				pc <= pc + 1;
			end
			4'h3: // mov_a im
			begin
				a <= opland;
				pc <= pc + 1;
			end
			4'h4: // mov_b a
			begin
				b <= a;
				pc <= pc + 1;
			end
			4'h5: // add_b im
			begin
				{c, b} <= b + opland;
				pc <= pc + 1;
			end
			4'h6: // in b
			begin
				b <= inport;
				pc <= pc + 1;
			end
			4'h7: // move_b im
			begin
				b <= opland;
				pc <= pc + 1;
			end
			4'h9: // out_b
			begin
				outport <= b;
				pc <= pc + 1;
			end
			4'hb: // out im
			begin
				outport <= opland;
				pc <= pc + 1;
			end
			4'he: // jnc
			begin
				if (c == 0)
					pc <= opland;
				else
					pc <= pc + 1;
			end
			4'hf: // jmp
			begin
				pc <= opland;
			end
			endcase
		end
	end
	initial
	begin
		//$monitor("%h  %h  %h  %h", pc, op, opland, outport);
	end
endmodule

module test;
	reg clk,
		rst;
	reg [3:0] inport;
	wire [3:0] outport;
	cpu4 u(.clk(clk), .rst(rst), .inport(inport), .outport(outport));
	initial
	begin
		$monitor("%d", outport);
		clk = 0;
		rst = 1;
		inport = 4'h0;
		#2
			rst = 0;
		#2
			rst = 1;
		#400
			$finish;
	end
	always
		#1
			clk = ~clk;
endmodule





```

#実行結果

```


 x
 7
 6
 0
 4
 0
 4
 0
 4
 0
 4
 0
 4
 0
 4
 0
 4
 0
 4
 0
 4
 0
 4
 0
 4
 0
 4
 0
 4
 0
 4
 0
 4
 0
 4
 8


```

以上。
NimのコードをNode.js用のJavaScriptコードにトランスコンパイルする

# 概要

- NimのコードをJSバックエンドでコンパイルしてNode.jsスクリプトとして実行してみます
- NimのコードからNode.js用のライブラリを生成して、Node.jsスクリプトからライブラリを読み込んで関数を呼び出してみます

# NimはJavaScriptを生成できる

Nimは公式でNimのコードからJavaScriptのコードにトランスコンパイル可能です。

例えば、以下のようなNimコードに対して

```index.nim
proc plus*(x, y: cint): cint {.exportc.} =
  return x + y
```

以下のコマンドでコンパイルします。すると、`index.nim`から`index.js`が生成されます。

```bash
$ nim js index.nim

$ ls index*
index.js index.nim
```

このようにJavaScriptコードを生成できます。

しかしここで生成されるJavaScriptはフロントエンド用で、HTMLから読み込む想定のものです。
Node.jsからは扱うことはできません。

# NimはNode.jsのコードも生成できる

しかし、コンパイル時にオプションを渡すことにより、Node.js用のJavaScriptコードを生成できます。
[Nim Backend Integration - Nim](https://nim-lang.org/docs/backends.html#backends-the-javascript-target)

前述のコードを手直ししてNode.js用コンパイルを実施し、Node.jsで実行してみます。

```index.nim
proc plus*(x, y: cint): cint {.exportc.} =
  return x + y

echo plus(1, 2)
```

```bash
$ nim js -d:nodejs index.nim

$ node index.js
3
```

node.jsで実行できました。

# NimのコードからNode.js用ライブラリを生成してみる

Node.js用の単体のスクリプトとして実行できることがわかりました。
次はNode.js用ライブラリを生成してNode.jsスクリプトから読み込めることを確認します。

以下のNimコードを用意します。
以下のNimコードでは、`plus`関数を定義して、Node.jsから`plus`関数を呼び出せるようにするものです。

```lib.nim
import jsffi

var module {.importc.}: JsObject

proc plus*(x, y: cint): cint =
  return x + y

module.exports.plus = plus
```

次に、上記ライブラリを読み込んで使用する`index.js`を定義します。

```index.js
const lib = require("./lib");
console.log(lib.plus(1, 2));
```

これらのファイルを同じディレクトリに配置し、以下のコマンドを実行します。

```bash
$ nim js -d:nodejs lib.nim

$ ls lib*
lib.js lib.nim

$ node index.js
3
```

無事、Node.jsスクリプトから、Nimで生成したNode.js用ライブラリを読み込んで、関数を呼び出すことができました。

# まとめ

以下の内容について記載しました。

- NimのコードをJSバックエンドでコンパイルしてNode.jsスクリプトとして実行できる
    - コンパイルするときはjsバックエンドで `-d:nodejs` を付ける
- NimのコードからNode.js用ライブラリを生成してNode.jsスクリプトからライブラリを読み込み、関数を実行できる
    - `module {.importc.}: JsObject`でモジュールを読み込んで関数をセットする

以上です
cannon.jsの衝突イベントのはまりどころメモ


衝突時に音でもならしてみようかなと思って、cannon.jsの衝突検出時に発生する`collide`イベントについて調べてみた。

# 衝突イベントは衝突毎に2回発生する

２つの物体が衝突するので、それぞれの物体に対してイベントを発火するようである。

[cannon.js/World.js at master · schteppe/cannon.js · GitHub](https://github.com/schteppe/cannon.js/blob/master/src/world/World.js)より抜粋：

```js

if (!this.collisionMatrixPrevious.get(bi, bj)) {
    // First contact!
    // We reuse the collideEvent object, otherwise we will end up creating new objects for each new contact, even if there's no event listener attached.
    World_step_collideEvent.body = bj;
    World_step_collideEvent.contact = c;
    bi.dispatchEvent(World_step_collideEvent);

    World_step_collideEvent.body = bi;
    bj.dispatchEvent(World_step_collideEvent);
}
```

# きわめて低速でも衝突イベントは発生する

下記を使うと衝突時の速度が得られるようである。これを使用して、速度に応じて処理を切り分けるとよいのではないか。※参考サイトのコードでは絶対値(`abs`)を取っている。詳細調べてないので正確な要否は不明だが、付けておいたほうが無難か。
[`contact.getImpactVelocityAlongNormal()`](https://schteppe.github.io/cannon.js/docs/classes/ContactEquation.html#method_getImpactVelocityAlongNormal)


# 参考サイト

 - [three.js - キャノンJS衝突力の量を検出する](https://stackoverrun.com/ja/q/12245736)
 - [Three.jsとCannon.jsを使ってだるま落としをつくってみた | 株式会社ジュニ](https://junni.co.jp/release/56/)
 - [JavaScriptで変数の型がわからないときの調べかたメモ - Qiita](https://qiita.com/kob58im/items/322b5184d79d6d370ef7)
本番環境でのエラー（The asset "〜" is not present in the asset pipeline.）

## はじめに
オリジナルアプリをデプロイする際にエラーが発生したので、今後同じエラーが発生した際に簡単に解決できるように載せておこうと思う。


##1.エラー内容
公開したアプリケーションを確認したところ、以下のエラー画面が出た。
この画面からではエラーの原因がはっきりしないので、

![スクリーンショット 2021-01-08 21.52.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/941480/ab90f6e9-2ab5-1267-a6f8-b5e388e90c74.png)
上の画面からではエラーの原因がはっきりしないので、ターミナルでエラーログを確認する。

```言語:ターミナル
heroku logs --tail --app hoge-app-0123
```
すると下記の部分に不具合があるのを確認できた。
![スクリーンショット 2021-01-08 21.46.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/941480/3895b691-3f1d-4193-6aa5-e938a4190d74.png)

## 調べたこと
エラーログをグーグル翻訳すると『アセット「icon_noimage」はアセットパイプラインに存在しません。』と翻訳された。

アセットパイプラインが不明だったため、ネット検索
→複数のディレクトリやファイルに分かれたassetsディレクトリ内のファイルをひとつに連結・圧縮する機能と出た。
　→icon_noimageは存在しないから連結されないということ？？？　んー、分からん…

さらに解決策を調べる…

## エラー解決へ
config/envitonments/production.rb の config.assets.compileをfalseからtrueに変更することで解決することが出来た。
本番環境でレイアウトが崩れた際に用いるらしい。

```ruby:config/envitonments/production.rb
config.assets.compile = true
```

## 最後に
ローカル環境では問題なくても、本番環境では問題が発生する可能性があるため、こまめにデプロイしろと前々から言われていたが、その意味を実感した。
また、今回のエラーでシステムの用語の知識不足も実感することができたので、今後も学んでいきたい。

##参考記事
TRANSNET　コラム『Rails初学者がつまずきやすい「アセットパイプライン」』
https://www.transnet.ne.jp/2016/02/28/rails%E5%88%9D%E5%AD%A6%E8%80%85%E3%81%8C%E3%81%A4%E3%81%BE%E3%81%9A%E3%81%8Dcolnr%E3%80%8C%E3%82%A2%E3%82%BB%E3%83%83%E3%83%88%E3%83%91%E3%82%A4%E3%83%97%E3%83%A9%E3%82%A4%E3%83%B3/
【Visual Studio Code】webデザイナーがよく使う拡張機能

普段HTMLとかを書いているときによく便利な拡張機能をまとめました。

#Auto Rename Tag
対応したタグを自動で修正してくれる。
開始タグ、終了タグどちらを変更しても修正してくれる。
とても楽。

#Bracket Pair Colorizer
開始タグと終了タグの色を合わせてくる。
意外とこれのおかげで閉じ忘れに気づける。
助かる。


#Highlight Matching Tag
開始と終了の関係になってるタグをハイライトしてくれる。
閉じ忘れによるミスが大幅に減った。
助かる。

#DartJS Sass Compiler and Sass Watcher
Sassファイルを保存した段階でコンパイルしてくれる。
とても楽。

#Path Autocomplete
pathの候補を出してくれる。
いちいちディレクトリ見直して構造とか名前確認する必要がなくなった。
楽。



#番外
Japanese Language Pack for Visual Studio Code
日本人だもの。
Firebaseでスクレイピング [axois => firebase storage]

## 概要

以外と探すのに時間がかかったので備忘録としてご共有。

## 実現したいこと

Firebase Functions内で、axiosを使って外部サイトから取得した画像をFirebase Admin SDKを使用し、StorageにUploadする。

## コード

```typescript
import * as admin from 'firebase-admin';
admin.initializeApp();

const upload = async ( imageUrl: string, uploadPath: string ) => {
  // ストリームで取得
  const res = await axios.get( imageUrl, { responseType: 'stream' } );

  // アップロード先を設定
  const file = admin.storage().bucket().file( uploadPath );
  const writer = file.createWriteStream( { contentType: res.headers['content-type'] } );

  // axiosの結果がストリームなので、そのままwriterに渡す
  await new Promise<void>( resolve => {
    ( res.data as Readable )
      .pipe( writer )
      .on( 'error', err => { throw err; } )
      .on( 'finish', resolve );
  } );
};
```

## リサイズなどの目的で、gmを使用する場合

```typescript
import * as admin from 'firebase-admin';
admin.initializeApp();
import gm, { State } from 'gm';

export const upload = async ( imageUrl: string, uploadPath: string ) => {
  const res = await axios.get( imageUrl, { responseType: 'stream' } );
  await new Promise<void>( resolve => {
    gm( res.data as Readable )
      // サイズを確認
      .size( { bufferStream: true }, function( err, size ) {
        const { width, height } = size;

        // @ts-ignore
        const _this = ( this as State );

        // 大きい場合はリサイズ
        const maxWidth = 400;
        if ( width > maxWidth  ) {
          const toHeight = height / ( width / maxWidth );
          _this.resize( maxWidth, toHeight, '!' );
        }

        // Storageに書き込む
        _this.stream( ( err1, stdout, stderr ) => {
          const file = admin.storage().bucket().file( uploadPath );
          const writer = file.createWriteStream( uploadPath );
          stdout
            .pipe( writer )
            .on( 'error', err => { throw err; } )
            .on( 'finish', resolve );
        } );
      } );
  } );
};
```

以上
Laravel Eloquentで作る「いいね」数ランキングリスト

##はじめに
メディア系サイトを構築している際、ユーザーや投稿をランキング形式で取得したい場合があるかと思います。
ランキングの基準を「いいね」数にしている場合`投稿`と`いいね`を別テーブルにし、リレーションを設定するのが一般的だと思います。
リレーション先のいいね数をカウントしてソートします。
##何が問題か？
`Laravel Eloquent`を用いてソートを実装する場合`orderBy`を使用します。

```php:ProductController.php
public function list()
    {
        $products = Product::with('likes')->orderBy(Product::CREATED_AT, 'desc')->paginate();
        return $products;
    }
```
`orderBy`はテーブルのカラムを利用して（第一引数）降順・昇順（第二引数）を決定します。
そのためcount()を用いて「いいね」数を取得してもそれはカラムではないため、orderByできません。
##実装
`withcount()`を使用します。引数に取得したいリレーションテーブル名を入れると'○○_count'というデータをカラム扱いとして取得できます。この値はカラム扱いなため、きちんと`orderBy`できます。

```php:ProductController.php
public function list()
    {
        $products = Product::withCount('likes')->orderBy('likes_count', 'desc')->paginate();
        return $products;
    }
```
【Swift】iOS14におけるIDFAの取得

#IDFAとは
IDFA は「Identifier for Advertisers」の略称であり、Appleがユーザーの端末にランダムに割り当てるデバイスIDです。 広告主はこのIDを使ってユーザーの広告エンゲージメント 、アプリ内のユーザー行動を計測することで、カスタマイズした広告を配信することができます。
つまりiOSアプリ内で自分の興味のある広告表示されることがあるのは、このIDFAのおかげということになります。

#iOS14からのIDFAの取得
WWDC2020でiOS14でIDFAの扱いに変更が加えられることが発表されました。
iOS14以降はIDFAを取得する前に取得の可否を選択させるダイアログを表示することが義務付けられるようになりました。

###IDFA取得ダイアログの表示方法
###1.frameworkの追加
以下のframeworkを追加します。
**AdSupport.framework**
**AppTrackingTransparency.framework**


参考リンク: 
https://developer.apple.com/documentation/adsupport
https://developer.apple.com/documentation/apptrackingtransparency

###2.info.plistへの文言の追加
![b1b425f7-b494-2d34-86d9-d7bfd25bdb08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/357475/56d4bdef-f2d2-6737-c81b-fca8ed832653.png)

info.plistに「Privacy - Tracking Usage Description」をKeyとしてValueに文言を設定します。
上記画像の赤枠の箇所に文言が反映され、他の箇所についてはデフォルト文言で変更不可のようです。

###3.ダイアログを表示
ダイアログ表示するには**requestTrackingAuthorization(completionHandler:)**を使用することで、下記のように実装することができます。

**Swift**

```swift
if #available(iOS 14, *) {
   ATTrackingManager.requestTrackingAuthorization(completionHandler: { status in
      switch status {
      case .authorized:
         //IDFA取得
         print("IDFA: \(ASIdentifierManager.shared().advertisingIdentifier)")
         print("success")
      case .denied, .restricted, .notDetermined:
         print("failure")
      @unknown default:
         fatalError()
      }
   })
}       
```
【Ruby】rqr_codeでundefined method `dark?'が発生する

#課題
既存の記事を参考にrqr_codeを利用したら undefined method `dark?' が出た。

###再現手順
```zsh:rqr_codeのインストール
$ gem install rqrcode_png
```

```ruby:基本コードの丸写し
require 'rqrcode'
require 'rqrcode_png'
require 'chunky_png'

qr = RQRCode::QRCode.new( "Hello World!!", size: 3, level: :h)
img = qr.to_img

img.resize(200, 200).save("hello_world.png")
```

```zsh:実行エラー
$ ruby qr_code.rb 
Traceback (most recent call last):
<中略>
rqrcode_png/sequence.rb:11:in `block (2 levels) in dark_squares_only': undefined method `dark?' for #<RQRCode::QRCode:0x00007f9126021200> (NoMethodError)
```

#結論
.to_imgでは無く.as_pngで回避できた。

```ruby:.to_imgを.as_pngに変更
require 'rqrcode'
require 'rqrcode_png'
require 'chunky_png'

qr = RQRCode::QRCode.new( "Hello World!!", size: 3, level: :h)
# img = qr.to_img
img = qr.as_png

img.resize(200, 200).save("hello_world.png")
```

#参考情報
[Ruby]QRコードの生成、埋め込み
https://qiita.com/koteko/items/d6d033997c544c47b718

Rubyで簡単にQRコード画像を生成する方法
https://qiita.com/sakaitaka/items/c753103c93fa177e4466

rqrcode
https://github.com/whomwah/rqrcode
JavaScriptで、ライブラリとかの変数の型や詳細情報がわからないときの調べかたメモ

JavaScriptのライブラリとかを使ってて、下記のように型が不明なときに手探りで調べた内容をメモしておく。

例：`CANNON.js`の下記の`e`の型がわからない。

```js

cannonObj.addEventListener("collide",function(e){・・・});
```

# 手段

静的に調べる


とりあえずキーワードでググる。


- ライブラリのドキュメントを探す。（GitHubとか）
- ライブラリのソースを探す＆ソース上でキーワード検索する。（同上）　・・・[例](https://github.com/schteppe/cannon.js) → [`collide`で検索した結果](https://github.com/schteppe/cannon.js/search?q=collide)
- ライブラリのデモコードを探す。（同上）  ・・・[例](https://github.com/schteppe/cannon.js/blob/master/demos/events.html)

動的に調べる

- クラス名を調べる。
- リフレクションを使う。
- `console.log`にそのままぶち込む。

## クラス名を調べる

下記が詳しいので、ここで特に書くことはないです。（他力本願！）

 - [JavaScriptの「型」の判定について - Qiita](https://qiita.com/south37/items/c8d20a069fcbfe4fce85)

おまけ：

 - [javascript 変数 型 調べる - Google 検索](https://www.google.co.jp/search?q=javascript+%E5%A4%89%E6%95%B0+%E5%9E%8B+%E8%AA%BF%E3%81%B9%E3%82%8B)

## リフレクションを使う

クラスとかじゃない場合は、リフレクションを使うと多少の情報は得られそう。

[Reflect - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Reflect)
  
### プロパティ名を得る

[Reflect.ownKeys() - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Reflect/ownKeys)

実行例：

```js

cannonObj.addEventListener("collide",function(e){
  console.log(Reflect.ownKeys(e));
});
```

実行結果：

```text

["type", "body", "contact", "target"]
```


## `console.log`にそのままぶち込む

 - [console.log() - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/Console/log)
シェルスクリプトで呼び出し元プロセスの情報を表示する

# シェルスクリプトで呼び出し元プロセスの情報を表示する

## やり方

子プロセス内で以下で取得できる。

```
ps $PPID | tail -n 1 | awk '{c="";for(i=5;i<=NF;i++) c=c $i" "; print c}'
```


## スクリプト定義

### parent.sh (親プロセス側)

```
#!/bin/sh

./child.sh test1 test2 test3
```


### child.sh (子プロセス側)

```
#!/bin/sh

echo $*
ps $PPID | tail -n 1
ps $PPID | tail -n 1 | awk '{c="";for(i=5;i<=NF;i++) c=c $i" "; print c}'
```

## 実行例

```
$ ./parent.sh test test2 test3 test4
test1 test2 test3
3070289 pts/8    S+     0:00 /bin/sh ./parent.sh test test2 test3 test4
/bin/sh ./parent.sh test test2 test3 test4
```


参考情報

* https://orebibou.com/ja/home/201607/20160728_001/
* https://stackoverflow.com/questions/20572934/get-the-name-of-the-caller-script-in-bash-script
IntelliJ IDEAのインデックスが壊れた時にやること

IntelliJ IDEAはアップグレードの度にインデックスが壊れるし、何もしなくても壊れるんだけど、過去にどうやったら直ったかをメモしてなくて忘れてしまうので、今日からここに書きためていくことにする。

## GradleのRefresh
右のGradleペインを開いてグルグルしてる更新マークを押すと全部のインデックスが走り、それで直ることもある。

## ローカルでGradleを走らせる
build.gradleで環境変数などでmavenのcredentialを取得している場合、IntelliJからライブラリを更新しようとするとうまくいかないことがある。Path Variablesを設定しても動かないことがある。

その場合、環境変数をセットしているシェルで `./gradlew build` などしておくと、そこで取得できたライブラリをIntelliJも見てインデックスが成功する。

## sbtのRefresh
まずScala SDKをインストールする。また、SBT Executorプラグインをインストールする。

それでもsbtが右のペインに出ない場合、.ideaを削除して再起動する。うまくいくと、Gradleと同じく更新マークが出るようになる。

プロジェクトは、build.sbtから開くこともできる。

## Kotlin pluginのアンインストール
普通にgradleでのビルドは通るのに "Cannot access class ‘xxx’. Check your module classpath for missing or conflicting dependencies" になる時、Kotlin pluginをuninstall and restartしたら全部直った。uninstallしてもbundledな奴が動く。
p5.js入門記 -その２Flaskにp5.jsの画像を載せる-

# 前回まで
+ その１：[雪を降らせる](https://qiita.com/choco_py3/items/02200022d9b6e73544f8)

# はじめに
今回は、[自分のWebサイト](https://flaskandheroku.herokuapp.com/)にp5.jsの作品をUPしてみます。

【環境】

+ Webサーバ: Heroku
+ フレームワーク: Flask
+ 言語: p5.js

また、コードは[前回](https://qiita.com/akihanari/items/02200022d9b6e73544f8)と同じなので、省いております。

# Flaskで作成したページにp5.jsの作品（画像）を載せたい

### 問題点：画像が反映されない
+ pythonでWebサーバを立てた状態→正常に動作する
+ Herokuにアップロードした状態→画面が真っ白の状態である

### 原因
+ 画像のファイルパスが認識されていないため？

```sample.js
bg = loadImage("../static/bg_snow_jutaku.jpg");
img = loadImage("../static/kids_hashirimawaru_snow.png");
```

### 対処法
+ .jsファイルの内容を.htmlファイルに直書きしたら解決した

```sample.html
  bg = loadImage("{{url_for('static', filename='bg_snow_jutaku.jpg')}}");
  img = loadImage("{{url_for('static', filename='kids_hashirimawaru_snow.png')}}");
```

# 成果物
https://flaskandheroku.herokuapp.com/p5js4

# おわりに
~~次回はサンプルを元にした模様について書こうと思います。~~

+ その３：[#つぶやきProcessingをやってみる](https://qiita.com/choco_py3/items/00d24215b54c09fa8140)
PHP基礎　-比較演算子をマスターする-

#比較演算子の種類
PHPでは以下の比較演算子があり、各条件に該当する場合はtrueを、該当しない場合はfalseを返します。

| 例    | 条件     |
|-------|---------|
|\$x < $y|\$xは$y未満|
|\$x <= $y|\$xは$y以下|
|\$x > $y|\$xは$yより大きい|
|\$x >= $y|\$xは$y以上|
|\$x == $y|\$xと$yは等しい|
|\$x === $y|\$xと$yは厳密に等しい|
|\$x != $y|\$xと$yは等しくない|
|\$x !== $y|\$xと$yは厳密に等しくない|

##==と===の違い
==は値が等しいかのみを検証しているのに対し、===は値とデータ型の2つが等しいかを検証しています（!=と!==も同様）。そのため、以下のようなケースでは異なる値が返ってきます。

```php
$x = 1; #integer型

$y = '1'; #string型

$x == $y;
#=> true

$x === $y;
#=> false

$x != $y;
#=> false

$x !== $y;
#=> true
```
この違いを理解して使い分けないと、エラーや予期しない動作の原因となります。
最後に訪れた bookmark を最上位に

Emacs にある [bookmark](https://www.gnu.org/software/emacs/manual/html_node/emacs/Bookmarks.html) をずっと使っていて、今まで何の疑いもなく 1ファイル/1ブックマークしか記憶できないものだと思い込んでいました。

ポイント位置も記憶し、これはあんま意味ないなあと思っていたのですが、今頃になって同じファイルを別のポイントで複数ブックマークできるものだったと知り、それならもっと使えそうだと少し設定を見直すことに。

# おさらいしておくと

  `C-x r m` とするとミニバッファにプロンプトが出るので、  `RET` のみならファイル名が、  何か入力してから `RET` なら、その名前がブックマークになる。

  開くときは `C-x r b` で直接名前を指定するか、  `C-x r l` でメニューから選べば目的のブックマークを開くことができる。
  これが基本的な使い方。

  自分の場合は [ido](https://www.gnu.org/software/emacs/manual/html_mono/ido.html) + `C-x r b` でずっと使っていました。
  やや込み入ったバインドですが `C-x r` のキーマップはレクタングルやレジスタと共有されているので、  合わせて覚えることができました。

| bind             | 機能                    |
|:-----------------|:------------------------|
| C-x r m RET      | ブックマークする        |
| C-x r m name RET | name でブックマークする |
| C-x r b name RET | ブックマークを開く      |
| C-x r l          | ブックマークリスト      |

  ブックマークをするときに、いちいち名前を入力させるのところがミソで、  ここで `RET` だけなら新規または同じ名前があればオーバーライトされ、  名前を入れれば新規または「既にあるブックマークされたファイルの別のブックマーク」が作られます。
  今までこのことに気づかずにいました。

  別名をつけるための補助機能として、プロンプトで `C-w` するとポイントの文字が拾えるので、  それを利用すると別の名前を考える労力が少しだけ軽減されます。
  勿論 `M-n`,  `M-p` も有効でデフォルト値であるファイル名も格納されているので、  勢いで消した場合の復活にも使えます。

# 最後に訪ずれたブックマークを最上位に
  
  自分の場合基本的にファイルは更新順に並べられているのが使い易いので、  古くからある拡張版の [bookmark+](https://www.emacswiki.org/emacs/BookmarkPlus) を入れておいたこともあったのですが、いかんせん重い。

  bookmark+ だと高機能な分データも大きくて、更新されセーブされるとき一瞬「間」ができ、  ブックマークを選ぶたびにこれをやられるので結構ストレスがあります。

  なのでバンドル bookmark に来訪順機能を追加してみました。
  自分の場合 50くらいしか登録されていないので軽いですが、  もしかすると登録が多くなってくると bookmark+ を使った場合と肌感はあまり変わらないかもしれません。

```emacs-lisp:source.el
(require 'bookmark)
(setq bookmark-sort-flag nil)
(add-hook 'bookmark-after-jump-hook 'bookmark-last-visit-up)
(defun bookmark-last-visit-up ()
  (let ((last (bookmark-get-bookmark (car bookmark-history)))
        file common others)
    (setq file (assoc-default 'filename last))
    (setq bookmark-alist (delete last bookmark-alist))
    (dolist (a bookmark-alist)
      (if (equal file (assoc-default 'filename a))
          (setq common (cons a common))
        (setq others (cons a others))))
    (setq bookmark-alist
          (cons last (append (reverse common) (reverse others))))))
```

  このとき同じファイルのブックマークをまとめて上げると栞としても使い易いと思い、  それも行ないます。

  bookmark のメモリ上のデータ(bookmark-alist)の順列を変更するので、  ido 等のインターフェイスからもこの順序になり、  よく開くファイルへのアクセス性は向上すると思います。

# 更なる追加版

  `C-x r l` を使わないなら上記のみで十分ですが、  結局この他にあれもこれもと 主にメニュー側に最低限欲しい機能を追加してしまい、  少し長くなったのでその版は [github](https://github.com/s-fubuki/bookmark-ex.el) に置いておきます。

- [show-marks-ex](https://qiita.com/s-fubuki/items/030b612e93ddecca1d9f) とも連携する
- `C-x r l` で directory に色がつき `<` ,  `>` でそこにカーソル移動
- `C-x r l` のリネーム(`r`) で `RET` だけだとブックマークが壊れるのを防止
- アノテーション窓を必要最低限行数に
- ブックマーク名をつけるとき `C-c #` で "ファイル名:行番号" の文字列を出力

最後のものは同ファイルのブックマーク追加補助用です。
バインドしても忘れるのでミニバッファのメニューにも出現します。

# Changes
- Sat May  7 08:03:06 2022
  github 版を Emacs 28.1 対応.
- Sat Jan 23 10:00:23 2021
  github 版を Emacs 28.0.50 に対応.
Elastic Cloud + GCP 事始め④　～cURLからのロール投入～

# ゴール

CLI からロールとユーザーを更新する

# 公式手順

https://www.elastic.co/guide/en/elasticsearch/reference/current/security-api-put-role.html
https://www.elastic.co/guide/en/kibana/current/role-management-api-put.html

# 1. Kinana API key の発行

## 1.1. GUIからの発行

※こちらはElastic Cloud 内の各環境内を操作するAPIキー

Kibanaのハンバーガーメニュー＞「Stack Management」＞「API Keys」＞「Go to Consle」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/73f999ad-922c-469d-05d6-8e8ea2b266df.png)

```
POST /_security/api_key
{
  "name": "test1-api-key",
  "expiration": "7d", 
  "role_descriptors": { 
    "kibana-url-api-role": {
      "cluster": ["all"],
      "index": [
        {
          "names": ["*"],
          "privileges": ["all"]
        }
      ]
    }
  }
}
```

※上記APIキーは7日間のみ有効な全操作権限ありAPIキー。
　目的に応じて適宜ロールや有効期限を変更する事。
　expiration行を削除すれば無期限有効。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/a4eacf0c-cf7b-8edf-9bc1-e2257c67265b.png)

画面右上に「200 - success」と出ていれば成功。
結果を別途保存しておく。（二度と表示されない）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/9bfa820f-1ec1-241f-e5b8-5f0a76505f40.png)

1.2. base64形式への変換

APIキーにはIDとキー値を:で繋いでbase64形式に変換した文字列を使用する。

```
echo -n <id>:<api_key> | base64
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/d5b83343-76c4-1532-8761-f2233eb4afce.png)

出力結果を保存する。

# 2. ロールの作成/更新

## 2.1. Kibana endpointのコピー

Elastic Cloud の環境トップページから、`Kibana` の endpoint をコピーする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/9e2765c3-6d1b-6b62-3df1-cb3b9f6dc3bf.png)

## 2.2. cURLコマンドでAPI実行

```
curl -H 'Authorization: ApiKey <1.2.のbase64ApiKey>' -H 'Content-type: application/json' \
-H 'kbn-xsrf: true' -H '{ WWW-Authenticate={ 0=\"Basic realm=\\\"security\\\" charset=\\\"UTF-8\\\"\" & 1=\"Bearer realm=\\\"security\\\"\" & 2=\"ApiKey\" }' \
-X PUT '<KibanaEndpoint>/api/security/role/sample-suzuki@hoge.jp' -d '{
  "metadata" : {
    "version" : 1
  },
  "elasticsearch": {
    "cluster" : [ ],
    "indices": [
      {
        "names": [ "<index名>", "<index名>" ],
        "privileges": ["read"]
      }
    ]
  },
  "kibana": [
    {
      "base": [],
      "feature": {
        "dashboard": ["read"]
      },
      "spaces": [
        "default"
      ]
    }
  ]
}'
```

上記コマンドで、`ロール名` が既存にない場合、登録。ある場合、更新される。
Dashboardから、指定したINDEX内のデータの閲覧権限のみを与える事ができる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/30428c6d-08ea-1d34-8be8-a5ff7bac9a25.png)



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/b14cb4a2-1ebe-3f99-8b57-bab7f9c22046.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/1bb95fc9-3c09-f565-4e4e-c32055baaf89.png)


次回予定：未定
typingを用いたdefaultdictの制限


# はじめに

[typingを用いたdefaultdict](https://docs.python.org/ja/3/library/typing.html#typing.DefaultDict)の公式ドキュメントがあります．

しかし，使い方は詳しく説明されていないため，まとめようと思います．

# defualtdict

defaultdictは，`callable`，かつ値を返すものを指定します．
例えば以下のようなものです．

```python
from collections import defaultdict

d1 = defaultdict(int)
d2 = defaultdict(lambda: 'hello')
```

`int`はCallableのため，指定できます．
そして，もしKeyがなければ，これらのCallableが呼ばれて初期値となります．

よって，`d1['hello']`とすると，この時点でKeyが存在しなければ`int()`が実行されて0が入ります．

# typingを用いたdefaultdict

defaultdictは，Value側のCallableは指定できますが，Keyに関しては制限がありません．
そのため，Keyはstrのみしかとらない設計にする！とエンジニアが考えていたとしても，IDEにその思いはおそらく届きません．

そのため，typingを利用します.


```python
from collections import defaultdict
from typing import  DefaultDict

dic: DefaultDict[str, int] = defaultdict(int)
dic['hoge'] = 10
dic['huga']

# defaultdict(<class 'int'>, {'hoge': 10, 'huga': 0}
print(dic)
```

`DefaultDict[key, value]`のように型を指定することで，keyの取る型, valueの取る型を制限できます．
そのため，以下のように書くとIDEから，`int`の型をValueに取るはずなのにAのインスタンスが初期値に入ってしまうと注意されます．（型サポートを受けやすくなります，嬉しいですね．）

```python
from collections import defaultdict
from typing import DefaultDict


class A:
    pass


dic: DefaultDict[str, int] = defaultdict(lambda: A())
```
PHP基礎　-算術演算子をマスターする-

PHPでは基本的な四則演算ができる算術演算子を使うことができます。

```php
$i = 1 + 1;

$i = 1 - 1;

$i = 8 * 2;

$i = 8 / 2;

$i = 3 % 2;
```

効率的に開発を進めるため、再代入をする際に省略系で書くこともできます。

```php
$i += 1;

$i -= 1;

$i *= 2;

$i /= 2;
```

さらに、+1と-1の再代入は繰り返し処理などで特に多用することのなるため、以下のように書くこともできます。

```php
$i++;

$i--;
```
windowsでiverilog その85

#概要　

windowsでiverilogやってみた。
td4のテストベンチ、書いてみた。

#参考にしたページ

https://qiita.com/oskimura/items/83b0173bd11ef773ea84


#サンプルコード

```
module test;
	reg clk,
		rst;
	reg [3:0] inp;
	wire [3:0] outp;
	td4 u(.reset(rst), .clk(clk), .inp(inp), .outp(outp));
	initial
	begin
		$monitor("%h", outp);
		clk = 0;
		rst = 1;
		inp = 4'h0;
		#2
			rst = 0;
		#2
			rst = 1;
		#400
			$finish;
	end
	always
		#1
			clk = ~clk;
endmodule


```

#実行結果

```


0
7
0
7
6
0
4
0
4
0
4
0
4
0
4
0
4
0
4
0
4
0
4
0
4
0
4
0
4
0
4
0
4
0
4
0
4
8


```


以上。
windowsでiverilog その84

#概要　

windowsでiverilogやってみた。
td4のcpu書いてみる。
構想編。

#cpu仕様

レジスタマシン
4bit CPU（汎用レジスタが4bit 2本）
メモリーは、16語8bit
マシン語は8bit固定長
命令は、入力、出力、代入、加算、キャリー、ジャンプの6種類
命令に4bit、4bitを値に

|7:4|	3:0|
|:--|:--|
|命令|	値|

レジスタは2コ、とプログラムカウンタ(4bit)とキャリーフラグ
入力、出力は4bit

#アセンブラの説明

|アセンブリ|	機械語|	動作|
|:--|:--|:--|
|ADD_A Im|0000bbbb|AレジスタとImの値を加算|
|MOV_A B|0001bbbb|AレジスタにBレジスタの値を代入
|IN A|0010bbbb|Aレジスタに入力の値を代入
|MOV_A Im|0011bbbb|AレジスタにImの値を代入
|MOV_B A|0100bbbb|BレジスタにAレジスタの値を代入
|ADD_B Im|b0101bbbb|BレジスタとImの値を加算|
|IN B|0110bbbb|Bレジスタに入力の値を代入
|MOV_B Im|0111bbbb|BレジスタにImの値を代入
|OUT B|1001bbbb|Bレジスタの値を出力
|OUT Im|1011bbbb|Imの値を出力
|JMC|1110bbbb|キャリーフラグが立てば、Imの値をプログラムカウンタに代入|
|JMP|1111bbbb|Imの値をプログラムカウンタに代入


#プログラム例

|番地|ニーモニック|説明|
|:--|:--|:--|
|0|out 7|7を出力
|1|add_a 1|aレジに１を加算
|2|jnc 1|キャリーフラグが立てば、1へジャンプ
|3|add_a 1|aレジに１を加算
|4|jnc 3|キャリーフラグが立てば、3へジャンプ
|5|out 6|6を出力
|6|add_a 1|aレジに１を加算
|7|jnc 6|キャリーフラグが立てば、6へジャンプ
|8|add_a 1|aレジに１を加算
|9|jnc 8|キャリーフラグが立てば、8へジャンプ
|10|out 0|0を出力
|11|out 4|4を出力
|12|add_a 1|aレジに１を加算
|13|jnc 10|キャリーフラグが立てば、10へジャンプ
|14|out 8|8を出力
|15|jmp 15|15へジャンプ

#想定される実行結果



```
7
6
0
4
0
4
0
4
0
4
0
4
0
4
0
4
0
4
0
4
0
4
0
4
0
4
0
4
0
4
0
4
0
4
8


```

以上。
Forkを使って開発したときのpull requestの出し方・注意点

# forkを使用する際のpull requestの出し方

## ①forkを作る

![togo-mori_chat-vue-app.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652172/81c4a55d-7547-1283-9082-14bef1d4de26.png)


画像の赤丸で囲ったところのボタンを押す


![Your_Repositories.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652172/445dd88a-67bc-cb72-303b-3c9297a9d28e.png)


forkが完了すると自分のリポジトリ一覧に"Froked from 元のリポジトリ名"といった注釈がついたリポジトリが作成される。これがforkが完了している目印。

## ②forkで作業をすすめる

![GitHub_Desktop.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652172/385114dd-56c0-8e9c-9f2d-8a9549266a82.png)!


forkを作成するとfork元のリポジトリがupstream、forkしたリポジトリがoriginとして登録される。これらは別ブランチで初心者あるあるとしてorigin/masterとupstream/masterの区別がつかず「masterブランチが複数ある！」となるケースがあるが、全く別のブランチなので2つあっておかしいわけではない。これには私も実際引っかかった。。。

originとupstreamではgitコマンドなども別になる。forkしたブランチで作業をする場合はgit push **origin** とすることを気をつけたい。

## ③forkからpull requestを出す

![togo-mentor_chat-vue-app.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652172/2837d6a3-215a-b3fe-9ae8-6fc696ec3cdf.png)


画像赤丸のボタンからpull requestを出す。

![Comparing_togo-mori_build-frontend-directry___togo-mentor_build-frontend-directry_·_togo-mori_chat-vue-app.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652172/6297ee18-33fc-bace-1c1b-27e7789afa64.png)


pull request作成画面。forkなしでやる場合と異なり、どのリポジトリからpull requestを出すのかまで選択できる。問題なければ緑色の"Create pull request"ボタンを押す。

## ④コードレビューしてもらう

![webpack、Vue_jsの導入・環境構築_by_togo-mentor_·_Pull_Request__1_·_togo-mori_chat-vue-app.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652172/d3518efc-1d2a-05c7-c861-5cc3f7526ed9.png)


作成したpull requestの画面。forkなしで行う場合との違いはpull request依頼をした本人はmergeできない仕様になっていること。fork元のリポジトリを管理しているユーザーのみがmergeできる仕様になっている。



## 結論

チーム開発などではforkを利用した開発をしたほうが良いと感じた(誤ってpullrequestを出した人がmergeしてしまうケースがあるので)。ただしoriginとupstreamの区別など初心者が見落としがちな要素も多いのでまずはforkなしでブランチを切って作業するのになれていくのが良さそう。



### 参考

Github で Fork して PullRequest を送るのはこんなに簡単(ほぼここに書いてあるとおりです)

https://qiita.com/YumaInaura/items/acff806290c8953d3185
Wio TerminalでBluetooth（その２）

# Wio TerminalでRTL8720を直接利用
[その１](https://qiita.com/infinite1oop/items/47235ce4a50e24312ae9)の続きである。Wio Terminalは、メインのマイコンSAMD51とWiF/Bluetoothを扱うRTL8720とを持つ。今回はRTL8720用のサンプルコードを実行してみる。

## 環境
Windows10上でのArduino IDE利用。本家本元の、RTL8720開発ボードとしてWio Terminalを利用する[Wiki](https://wiki.seeedstudio.com/Wio-Terminal-8720-dev/)に従って進める。

## 設定
### Wio Terminal
こちらは[その１](https://qiita.com/infinite1oop/items/47235ce4a50e24312ae9)参照。

### RTL8720をArduino IDEで利用
上記Wikiに従い、追加のボードマネージャーURLとして
https://github.com/ambiot/ambd_arduino/raw/master/Arduino_package/package_realtek.com_amebad_index.json
を追加し、ボードマネージャーで「realtek」として検索＆インストールする。
![ボードマネージャー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634816/6f95bf40-a984-a474-d4ae-bcb49f5e051f.png)
すると
![選択されたボード.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634816/e5f2db1e-8db0-0866-c8a5-239825fd7934.png)
となる。

### SAMD51からRTL8720へのシリアル通信用プログラム（書き込みプログラム）をコピー
[その１](https://qiita.com/infinite1oop/items/47235ce4a50e24312ae9)で記載した「rtl8720_update_v2.uf2」をコピーする（Wio TerminalがMass Storageデバイスとなる）。すると、シリアル通信を使ってRTC8720への書き込みができるようになる。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634816/a0930824-b648-a8bb-74af-aed65e088ac8.png", width=50%>

### サンプルプログラムのビルド＆転送
ここでは、RTL8720サンプルプログラムとして、「WiFiAPMode」（WiFiアクセスポイントプログラム）を選択。（Bluetoothではないが、シリアルコンソール出力がわかりやすいもの。）
![サンプルプログラムWiFi.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634816/07635304-fa3c-362b-74bb-c2e8b4d2fd84.png)
ボードとして「RTL87xx」が選択されており、さきほどの「Burn RTL8720 fw」が表示されている状態で、サンプルプログラムのビルド＆転送を行う（マイコンボードに書き込む）と、ビルドされたバイナリがRTL8720に書き込まれる。

### RTL8720シリアルアウトプットをPCへ
「Burn RTL8720 fw」が表示されている状態で、真ん中のボタンを押すと、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634816/5ab49355-1121-9e50-70aa-e10b08697770.png)
「USB to Serial」と表示される。これにより、RTL8720のシリアルアウトプットをPC側で見ることができるようになる。

## Arduino IDEでのシリアルコンソール表示
![WiFIAP.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634816/6d8d2eca-7f6d-ed7d-5c12-24fab3fb11a5.png)
成功。

## 補足
### 電源オフオン
RTL8720用プログラムは、電源オフオンしても問題なく動作する。（当たり前か）

### 別のプログラムを焼くには？
「USB to Serial」が表示されている状態で右のボタンを押すと、「Burn RTL8720 fw」が表示されるが、このときに別のプログラムをビルド＆転送しても、私の環境ではうまく動作せず。再度、「rtl8720_update_v2.uf2」のコピーからやり直す必要があった（その後、別のプログラムをビルド＆転送）。
【Delphi】業務アプリの作り方　目次

社内での教育過程を公開予定です。

開発の準備
---
[Delphiインストール](https://qiita.com/hagi83484/private/23711648259f1dd3caf3)
[Delphi IDE初期設定](https://qiita.com/miu31/items/ed67eed2513b69df8729)
[PostgreSQLインストール](https://qiita.com/hagi83484/private/737349b83bcb94617732)
[PostgreSQL サービスの起動と停止の方法](https://qiita.com/miu31/items/983c8fd48da7aedb8b34)
[DBeaverインストール](https://qiita.com/12345/items/48f6856e32fd618ea307)
[DBeaverテーブル作成](https://qiita.com/miu31/items/7ead687ff0321c80d5f3)
[DB接続](https://qiita.com/hagi83484/items/6a3f57336b922914a120)

設計書
---
[未完:コーディング規約](http://qiita.com)
[未完:基本設計](http://qiita.com)
[未完:詳細設計](http://qiita.com)
[未完:DB設計](http://qiita.com)

データベース
---
[未完:DB作成](http://qiita.com)
[未完:テーブル作成](http://qiita.com)
[未完:エンティティ](http://qiita.com)
[DDL作成](https://qiita.com/miu31/items/f4689c9bdf142b0895f4)
テストの自動化
---
[未完:オンラ編：Selenium4d](http://qiita.com)
[未完:バッチ編](http://qiita.com)
[未完:GUI編](http://qiita.com)

完成形サンプル
---
[未完:タスク管理](http://qiita.com)
・WEB版、Windowsアプリ版
[未完:文書管理](http://qiita.com)
・WEB版、Windowsアプリ版
[未完:社内評価システム](http://qiita.com)
・WEB版
[未完:有給休暇管理システム](http://qiita.com)
・WEB版
[未完:バッチシステム](http://qiita.com)
・WEB管理コンソール(Intraweb)
・キーワード駆動テスト(エクセルシナリオ読込)
[未完:インフラ構築自動化](http://qiita.com)
・Ansible、CentOS ※SSH接続に有償コンポ利用
・GitLAB(API制御)
[MSP](https://qiita.com/miyamura-figeo/items/4721465e2239bf0834b3)
【Swift】UIImagePickerより便利なUIPHPickerViewControllerを使ってみた

UIImagePickerControllerについて調べていると、PHPickerViewControllerというものに出会ったので使ってみた。

##デモ
見た目の動きとしては、ほぼUIImagePickerControllerとほぼ同じです。
![イメージ.GIF](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678954/39a41fd7-4549-875c-6521-36ef56a524af.gif)

##UIImagePickerControllerとの違い

・検索機能付き
・複数選択が可能
・プライバシーに配慮したプロセスになっており、Privacy Photolibrary Usageを設定する必要がない

##使ってみる

###①PhotosUIをインポート
```swift
import PhotosUI
```
###②コンフィギュレイションを設定し、PHPickerViewController(configuration:)に値を入れる
```swift
var configuration = PHPickerConfiguration()
        
        //選択できる枚数を指定する。　0 を代入すると無制限に選択出来る
        configuration.selectionLimit = 1
        
        //PHPickerViewに何を表示させるか選択出来る。　以下は画像のみ
        configuration.filter = .images
        
        //複数選択したい場合は、配列で選択が可能
        //configuration.filter = .any(of: [.images, .livePhotos, .videos])
        
        let phPicker = PHPickerViewController(configuration: configuration)
```

###③あとは、delegateを設定して表示するだけ

```swift
        phPicker.delegate = self
        present(phPicker, animated: true)
```

##画像が選択された時のdelegate処理を書いてみる
```swift
extension ViewController: PHPickerViewControllerDelegate {
    
    func picker(_ picker: PHPickerViewController, didFinishPicking results: [PHPickerResult]) {
        picker.dismiss(animated: true)
        
        //結果から最初のItemProviderを取得
        let itemProvider = results.first?.itemProvider
        
        //オプショナルバインディングで取得したItemProviderのnilチェックとロード可能かチェック
        if let itemProvider = itemProvider, itemProvider.canLoadObject(ofClass: UIImage.self) {
            
            //ItemProviderから画像を呼び出す
            itemProvider.loadObject(ofClass: UIImage.self) { (readingImage, error) in
                if let error = error {
                    print("画像の取得に失敗しました:", error)
                    return
                }
                DispatchQueue.main.async {
                    guard let image = readingImage as? UIImage else { return }
                    self.imageView.image = image
                }
            }
        }
    }
```

##参考
<a href="https://qiita.com/akatsuki174/items/088f0aeb76c93bf52833">UIImagePickerControllerに代わるPHPickerViewControllerの紹介</a>
とても分かりやすく詳しく書かれており、とても参考になりました🙇‍♂️


##謎のエラー
シュミレーターでは問題なく動作したが、実機でPHPickerViewを使用したところ、
<code><font color="red">[ERROR] Could not create a bookmark: NSError: Cocoa 257 "The file couldn’t be opened because you don’t have permission to view it."</font></code>
というエラーが出た。

エラーをこちらで<a href="https://developer.apple.com/forums/thread/654021">[PHPicker] Permission error</a>調べたところ
>この問題を認識しており、将来のリリースで修正される予定です。
とのことです。

まぁ、動作はするからいいのか？

##まとめ
奥が深いPHPImagePickerでした。今後の開発に活用していきたい。

何か間違いがありましたら、優しく教えていただけると幸いです。
Rails link_toで表示された下線を消す方法

## はじめに

検証機能を使えば分かるがlink_toはaタグ

## 方法1

aタグだからscssにて

```
a {
    text-decoration: none;
}
```
を指定する

## 方法２

link_toにクラスをつけて

```
<%= link_to "リンク", path名, class: "link" %>
```
scssにて指定

 ```
.link {
    text-decoration: none;
}
```

##それでも消えないとき

`!important`を付けて優先順位を変更する


#### 方法１の場合

```
a {
    text-decoration: none !important;
}
```

#### 方法２の場合

```
.link {
    text-decoration: none !important;
}
```


`!important`はあくまで最後の手段なので多用は厳禁