OmniAICreator/Qiita-1.07M huggingface dataset:
【SpringBoot】RestAPIでユーザー情報を取得する(初心者)

## 必要なもの
1. entityクラス(Employee.java)
2. Repositoryインターフェース(EmployeeRepository.java)
3. mainクラス(最初に呼ばれるクラス、SampleApplication.java)
4. RestControllerクラス(Con.java)
5. application.properties(DB情報保持ファイル)
6. build.gradle(主にdependencies)

## ソースコード
```Employee.java
@Entity
@Table(name="m_emp")
public class Employee {
    @Id
    @Column(name="empno")
    @GeneratedValue(strategy=GenerationType.IDENTITY)
    private Long id;
    private String empname;
    public Long getId() {
        return id;
    }
    public void setId(Long id) {
        this.id = id;
    }
    public String getEmpname() {
        return empname;
    }
    public void setEmpname(String empname) {
        this.empname = empname;
    }
}
```
```EmployeeRepository.java
@Repository
public interface EmployeeRepository extends JpaRepository<Employee, Long> {
}
```
```SampleApplication.java
@SpringBootApplication
public class SampleApplication {
    public static void main(String[] args) {
        SpringApplication.run(SampleApplication.class, args);
    }
}
```
```Con.java
@RestController
public class Con {
    @Autowired
    EmployeeRepository empRepository;
    @RequestMapping(value = "/", method = RequestMethod.GET)
    public String index(Model model) {
        List<Employee> emplist=empRepository.findAll();
        model.addAttribute("emplist", emplist);
        return emplist.toString();
    }
}
```
```application.properties
spring.datasource.url=jdbc:mysql://localhost:3306/db名
spring.datasource.username=root
//brew installでパスワードを指定していない場合はパスワードは不要
#spring.datasource.password=mysql
spring.datasource.driverClassName=com.mysql.cj.jdbc.Driver
spring.jpa.database=MYSQL
spring.jpa.hibernate.ddl-auto=update
```
```build.gradle
plugins {
    id 'org.springframework.boot' version '2.1.8.RELEASE'
    id 'io.spring.dependency-management' version '1.0.8.RELEASE'
    id 'java'
}

group = 'com.example'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '1.8'

configurations {
    developmentOnly
    runtimeClasspath {
        extendsFrom developmentOnly
    }
    compileOnly {
        extendsFrom annotationProcessor
    }
}

repositories {
    mavenCentral()
}

dependencies {
        compile('org.springframework.boot:spring-boot-starter-data-jpa')
        compile('org.springframework.boot:spring-boot-starter-thymeleaf')
        compile('org.springframework.boot:spring-boot-starter-web')
        runtime('org.springframework.boot:spring-boot-devtools')
        runtime('mysql:mysql-connector-java')
        compileOnly('org.projectlombok:lombok')
        implementation('org.springframework.boot:spring-boot-starter-tomcat')
        testCompile('org.springframework.boot:spring-boot-starter-test')
}

```
[!] Authentication token is invalid or unverified. Either verify it with the email that was sent or register a new session.の解決方法

# 経緯
久しぶりに`pod trunk push` を実行すると、タイトルのエラーが発生しました。

> [!] Authentication token is invalid or unverified. Either verify it with the email that was sent or register a new session.

# 解決方法
1, `$ pod trunk register 自分のメールアドレス '自分の名前'`
2, メールアドレスに届いたリンクを開く
3, 改めて`$ pod truck push`を実行する

# 余談
余談ですが、CocoaPods 1.5.3だとXcode 11でバリデーションが通りませんでした。


> -> SwiftyPickerPopover (6.6.6)
    - ERROR | [iOS] unknown: Encountered an unknown error (Could not find a `ios` simulator (valid values: ). Ensure that Xcode -> Window -> Devices has at least one `ios` simulator listed or otherwise add one.) during validation.
> Analyzed 1 podspec.
>[!] The spec did not pass validation, due to 1 error.

みたいなエラーが出ます。

`sudo gem update cocoapods`

で 1.8.0にバージョンアップすると解決されていました。
Pythonでエクセルデータを扱う！

#はじめに
vbaで処理を回していて、「遅い」「応答待ちになる」で、実行完了はいつになるんだろ～とか思い、いっそpythonで処理すればよくね？となった皆様に、自分がpythonでエクセルデータを扱った方法と注意点を紹介します。

#１．エクセルデータの取り込み
Pandasのread_excelを使って、エクセルデータの読み込みを行います！

```Python:code.py
import pandas as pd
sheet_D=pd.read_excel(r'読み込みたいエクセルファイルまでのPATH',sheet_index=読み込みたいシート番号)
```
sheet_indexの代わりに、sheet_nameでシート名も指定できます。

**注意点：read_excel内のｒ**
これを設定しないと、PATHに日本語等が含まれている場合、文字コードエラーが発生する(以下の感じ)。

```Python:code.py
SyntaxError: (unicode error) 'unicodeescape' codec can't decode bytes 
```

#２．型変換
これはどんな処理をしたいかに依存しますが、エクセルシート上のセルを**個別に処理する**必要がある場合は行うことをお勧めします。
pd.read_excelで読み込んだ場合、変数の型がDataFrame型となります。自分がちょっと触ってみた感じ、この型は列や行に対して何か処理をしたいときに適した型（列毎の平均や行毎の分散とか）で、個別の値について処理する場合は**list型**の方が扱いやすそうという印象を持ちました。

**DataFrame型→list型の変換を行う。**

```Python:code.py
sheet_L=sheet_D.values.tolist()
```
#３．処理
１と２の手順を踏まえることでsheet_Lにエクセルシートのデータをｎ×ｍの配列として読み込むことが出来る。

```Python:code.py
sheet_L[x][y]=エクセルシート上でx行のy列に対応
```
あとは行いたい処理を行う！(nanの取り扱いには注意必要。)

#４．エクセルに書き出し
処理を終えた後、エクセルに書き出すという作業が必要な場合が多い？と思うので、参考までに。

**＜フロー＞**
ワークブックを作成 → シートを作成 → セルに値書き込み → 保存

```Python:code.py
from xlwt import Workbook #エクセルに出力するのに必要なモジュール

wb=Workbook() #ワークブックの作成
ws=wb.add_sheet("シート名") #ワークブックにシートを追加

ws.write("行数","列数","値") #ワークシートに指定されたセルに値を書き込む

wb.save("ワークブック名") #ワークブック名を指定してエクセルファイルとして保存する。
```
#５．おわり
最後まで読んで頂きありがとうございました。
Pythonでエクセルデータの抽出 → 加工 → 出力の流れを紹介しましたが、いかがだったでしょうか？
自分は「思ったより手間なくできるんだな～」と思いました！
処理に関しても、エクセルのような不安定さは無いので、エクセルで膨大なデータを処理しないといけない場合は、処理落ちの可能性を排除するためにも、pythonで処理してしまう方が良さそうですね！
#docker の .env ファイルで 文字列はダブルクオートで囲わないこと。

```
$ cat /tmp/.env
MY_ENV_VAR1=abcdef
MY_ENV_VAR2="abcdef"
MY_ENV_VAR3=abc def
```

```
$ docker run --env-file=/tmp/.env alpine sh -c 'echo $MY_ENV_VAR1'
abcdef
$ docker run --env-file=/tmp/.env alpine sh -c 'echo $MY_ENV_VAR2'
"abcdef"
$ docker run --env-file=/tmp/.env alpine sh -c 'echo $MY_ENV_VAR3'
abc def
```

[strange interpretation/parsing of .env file · Issue #3702 · docker/compose](https://github.com/docker/compose/issues/3702)

# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2548








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
Angular (NgModule理解)

Angularアプリケーションはモジュール型のアプリケーションで、NgModuleという独自のモジュール方式を備えている。NgModuleは、アプリケーションドメイン、ワークフロー、または密接に関連する一連の機能をまとめたコードブロックのコンテナを指す。それは、コンポーネント、サービスプロバイダー、および包含するNgModuleによってスコープが規定された他のコードファイルとを含めることができる。他のNgModuleからエクスポートされた機能をインポートしたり、他のNgModuleで使用するために洗濯した機能をエクスポートする。

全てのAngularアプリケーションには少なくとも1つのNgModuleがあり、ルートモジュールは通常AppModuleと呼ばれ、app.module.tsというファイル名になっている。ルートのNgModuleをブートストラップすルコとでアプリを起動する。
小さなアプリケーションには1つのNgModuleしかないかもしれないが、ほとんどのアプリケーションにはより多くのフィーチャーモジュールがある。アプリのルートNgModuleは、任意の深さの階層に子NgModuleを含めることができるので、その名前が付けられている。

#NgModule｜メタデータ
NgModuleは@NgModuleで装飾されたクラスとして定義されている。@NgModuleデコレーターは、モジュールを記述するプロパティーをもつ単一のメタデータ・オブジェクトを取得する機能。もっとも重要なプロパティは次になる。

|プロパティ|説明|
|---|---|
|declarations|NgModuleに属するコンポーネント、ディレクティブ、およびパイプ|
|exports|他のNgModuleのコンポーネントレンプレートで|
|imports|エクスポートされたクラスがこのNgModuleで宣言されたコンポーネントテンプレートによって必要とされる他のモジュール|
|providers|このNgModuleがサービスのグローバルなコレクションに貢献するサービスの作成元。それらはアプリ全ての部分でアクセス可能になる。(コンポーネントレベルでプロバイダーを指定することもできる)|
|bootstrap|ルートコンポーネントと呼ばれるメインアプリケーションビューで、他の全てのアプリケーションビューをホストする。ルートNgModuleだけがこのbootstrapプロパティを設定する必要がある。|

```typescript
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-brawser'
@NgModule({
    imports:      [ BrowserModule ],
    provider:     [ Logger ],
    declarations: [ AppComponent ],
    exports:      [ AppComponent ],
    bootstrap:    [ AppComponent ]
})
// ここではサンプルのためAppComponentがexportsプロパティに含まれているが、実際には不要。
// 他のModuleはルートNgModuleをインポートする必要がないため、
// ルートNgModuleは何もエクスポートする必要はない
```

#NgModuleとコンポーネント
NgModuleは、そのコンポーネントのコンパイルコンテキストを提供する。ルートNgModuleには常にブートストラップ時に作成されるルートコンポーネントがあるが、任意のNgModuleに追加のコンポーネントを幾つでも含めることができる。これらのコンポーネントは、ルーター経由でロードするか、テンプレートから作成することができる。NgModuleni属するコンポーネントは、コンパイルコンテキストを共有する。

コンポーネントとそのテンプレートは一緒にビューを定義する。コンポーネントには、ビュー階層を含めることができる。これにより、画面の任意の複雑な領域を定義し、ユニットとして作成、変更、および破棄することができる。ビュー階層は異なるNgModuleに属するコンポーネントで定義されたビューを混在させることができる。これは多くの場合、特にUIライブラリの場合に当てはまる。

コンポーネントを作成すると、そのコンポーネントはホストビューという単一のビューに直接関連づけられる。ホストビューは、他のコンポーネントのホストビューである埋め込みビューを含むことができるビュー階層のルートにすることができる。これらのコンポーネントは、同じNgModuleに存在することも、他のNgModuleからインポートすることもできる。

#NgModuleとJavaScriptモジュール
NgModuleシステムは、JavaScriptオブジェクトのコレクションを管理するJavaScript(ES2015)モジュールシステムとは異なり、関連しない。相補的なモジュールシステムで、両方を使ってアプリを作成することができる。

JavaScriptでは、各ファイルはモジュールであり、ファイルに定義されている全てのオブジェクトはそのモジュールに属す。モジュールは、いくつかオブジェクトをexportキーワードでマークすることによって、それらを公開することを宣言する。他のJavaScriptモジュールはimportステートメントを使用して、他のモジュールのパブリックオブジェクトにアクセスする。

```typescript
import { NgModule } from '@angular/core'
import { AppModule } from './app.component'
```

↓参照元

```typescript
export class AppModule {}
```


#Angularライブラリ
Angularは、JavaScriptモジュールのコレクションを読み込む。それらをライブラリモジュールと考えることができる。Angularライブラリの各名前は、@angular接頭辞で始まる。それらをNodeパッケージマネージャnpmでインストールし、JavaScriptのimportステートメントでそれらの一部をインポートする。

```typescript
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-brawser'
```

上の単純なルートモジュールの例では、アプリケーションモジュールは BrowserModule内のものを必要とする。 そのものにアクセスするには、このように@NgModuleメタデータのimportsに追加する。

```typescript
imports:      [ BrowserModule ],
```
[バッチ] バッチでサブルーチンを書く

**もくじ**
→https://qiita.com/tera1707/items/4fda73d86eded283ec4f

# やりたいこと
バッチで、同じようなことを複数個所でやるときに、関数っぽいものをつくりたい。

# 書き方

```サブルーチン例.bat
rem -----------
rem 本来の処理
rem -----------
call :MYFUNC
echo returned value is %errorlevel%
pause
exit

rem -----------
rem サブルーチン
rem -----------
:MYFUNC

rem 行いたい処理をここに書く

rem 戻り値を返す
exit /b 123

```

```引数ありのサブルーチン例
@echo off
rem -----------
rem 本来の処理
rem -----------
call :MYFUNC "ABC" "DEF"
echo returned value is %errorlevel%
pause
exit

rem -----------
rem サブルーチン
rem -----------
:MYFUNC

echo 一つ目の引数は %1 です
echo 二つ目の引数は %2 です

rem 戻り値を返す
exit /b %321
```

# 注意
- 戻り値を返すときは、`exit /b 〇`とする
- 戻り値を受ける時は、`%errorlevel%`を見る。
- ただし数値のみ。文字列は不可。[参考](http://piyopiyocs.blog115.fc2.com/blog-entry-892.html)
- 文字列を返したいときは、別途変数を作ってそこに代入するようにする
- 本来の処理の最後には必ずexitを書くこと。書かないと、そのまま下に抜けていってしまう。

# 参考
batノウハウ
https://qiita.com/april418/items/ebad68298c140653ad48#%E9%96%A2%E6%95%B0%E3%81%A3%E3%81%BD%E3%81%84%E3%82%82%E3%81%AE%E3%82%B5%E3%83%96%E3%83%AB%E3%83%BC%E3%83%81%E3%83%B3

Windows、バッチファイルの戻り値（ERRORLEVEL）に文字列を設定する
http://piyopiyocs.blog115.fc2.com/blog-entry-892.html
[バッチ] if文を使って条件分岐

**もくじ**
→https://qiita.com/tera1707/items/4fda73d86eded283ec4f

# やりたいこと
バッチで、if文を使って条件分岐をしたい。

# 書き方

```ifbun.bat
set FLAG=0
if %FLAG% == 1 (
	echo FLAG is 1
) else (
	echo FLAG is 0
)
```

- 「(」や「)」だけ改行してはいけない。
- ifの中で`set FLAG=1`などすると、それが反映されるのはif文を抜けた後。
- なので、if文の中に具体的な処理を書かない方がよい。[参照](https://qiita.com/ejiw/items/8a6ac11c117b6695b6ca)


# 参考
バッチファイルでif文をトラブルなく使う
https://qiita.com/ejiw/items/8a6ac11c117b6695b6ca
名古屋地区 転職(17)

# 経緯
名古屋地区で転職しようと思うと難しい。

来年３月までに転職先をみつけないといけない。
過去に何度か挑戦している。

これまでにお誘いいただいたことがある場合の３分の２は東京。

実際に転職で面接などに進んだことがあるのも東京が多い。

転職(2) 転職者による、転職者のための、転職者の履歴、業績、面接
https://qiita.com/kaizen_nagoya/items/162fbb954deb886464bf

転職ドラフト
https://job-draft.jp/
に登録した。

名古屋地区の企業はすくなく、名古屋地区以外はリモート勤務希望にした。

今日が初めての最終日。
まだ１件も指名がない。
この記事を書き始めた。

「転職フェア　名古屋」検索

# 登録
愛知県の転職ならリクルートエージェントにお任せください
https://www.r-agent.com/entry/ts/?param=dt-aichi-1001&&vos=evnarag7000xac_2399729792_cm_1721857643_gp_68169603779_cr_377114591679_kw_kwd-316724210625_dv_c_sl_&gclid=CjwKCAjwldHsBRAoEiwAd0JybZL-FJBzD_Y-o8IXbu33YmFKR6hCsRHr-Or3CNXGMUZSiBiAhOhahRoCSZ0QAvD_BwE&gclsrc=aw.ds

株式会社DYM 
https://talk.dshu.jp

# 説明会・転職フェア
愛知県労働協会会社合同説明会 2019/10/10(木) 11:00～16:00 愛知県  愛知県産業労働センター（ウインクあいち） 
http://ailabor.or.jp/wp-content/uploads/2019/08/合説両面.pdf

https://talk.dshu.jp
 2019年10月16日(水)14:00～17:00＠名古屋※JPタワー(内定直結型イベント)

転職博（名古屋）［１０月２１日（月）・２２日（火）］10/21(月)11:00～17:00、10/22(火)11:00～17:00
https://re-katsu.jp/career/events/evt_dtl.aspx?p1=evt793

シゴトフェア 10月28日（月）12時～21時
http://job.atimes.co.jp/shigoto-fair/nagoya/

2019年11月2日（土）・3日（日）名大社の転職フェア【名古屋】
https://www.meidaisha.co.jp/tenshoku/fair/

2019年11月16日（土）マイナビ転職フェア【名古屋】
https://www.tenshokufair.jp/nagoya/nagoya-11/16-mynavi-2/

2019年11月29日（金）30日（土）doda転職フェア【名古屋】
https://doda.jp/e/fair/nagoya/

# 考察(consideration)
行事の日付に年が入っていない行事は、信頼度が低い。
過去の行事の記録を消している行事は、信頼度が低い。

# 文書履歴（document history)
ver. 0.01 初稿 20190903 朝
ver. 0.02 追記 20190903 昼
ver. 0.03 説明会・転職フェア追記 20190903 午後
ver. 0.04 みだし変更 20191119
### 最後までおよみいただきありがとうございました。

いいね　💚、フォローをお願いします。

#### Thank you very much for reading to the last sentence.

Please press the like icon 💚　and follow me for your happy life.
Affinity Photoで360°画像を修正して、Tour Creatorでアルバムを作る

[Affinity Photo](https://affinity.serif.com/ja-jp/photo/)で360°画像を修正し、[Tour Creator](https://vr.google.com/tourcreator/)でアルバムを作りました。
VRについて調べていたのですが、色々簡単にできるようになっていてすごいなと思ったので、書き残しておきます。

## Affinity Photoで360°画像に写り込んだ三脚を消す

メニューから `レイヤー > ライブ投影 > 正距円筒図法` を選択すると、 360°表示になり写真をクルクル回しながら作業ができるようになります。

左側のツールバーから `インペインティングブラシツール` を選択し三脚部分をなぞると、周囲の状況を反映しつつ勝手に消してくれます。

今回は石畳だったので、一気に消そうとするよりも石畳の溝で区切られた領域に分けて消すと、溝を取り込みながらおおよそ消してくれました。

![スクリーンショット 2019-10-03 2.00.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/8b00c616-b607-0980-30dc-2acf3b3d7740.png)　　![スクリーンショット 2019-10-03 2.01.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/44f8013c-4a9d-7719-9f77-14fe6d251971.png)

ついでに360°表示の状態で、様子を確認しながらトーンカーブもいじってます。

Photoshopでも同じような事はできるようですが、[Affinity Photo](https://affinity.serif.com/ja-jp/photo/) は買い切りでさほど高いツールでもないので、非デザイナーにも手が出しやすくていいのではないでしょうか。

## Tour Creatorでアルバムにする

Googleが提供しているサービス [Tour Creator](https://vr.google.com/tourcreator/) を使うと、持っている360°画像をアップロードするだけでアルバムが作れます。
情報を書き込んで、任意の場所にinfoを表示させる事も簡単です。

自前の360°画像がなくても、ストリートビューからパクれます。
すでに用意されているテンプレートを複製すると、すぐに自分のアルバムとして閲覧できるようになります。
publishすると、Googleが提供しているサービス [Google Poly](https://poly.google.com/) で公開できます。

至れり尽くせりです。

以前、[A-Frameを使って似たような事](https://qiita.com/matsukatsu/items/33d57f9151a5c60db6e4)をやったので、[Tour Creatorでも同じもの](https://poly.google.com/view/5xF5WH9I352) を作ってみました。



Tour Creatorは教育の現場で使われたりもしているそうです。
幼少の頃からやってきた事がGoogleプラットフォームにデータとして残っていき、いろんな角度で分析されてしまうのだろうなと思うと少し複雑な気持ちになりますが、テクノロジーを使った遊びと学びを提供する試みは素晴らしいし、利用してみて楽しかったです。
[VisualStudio] ソース上のコメントを英語で統一したいのにデザイナーが自動生成するcsファイルが勝手に日本語コメントになるので英語に直す

**もくじ**
→https://qiita.com/tera1707/items/4fda73d86eded283ec4f

# やりたいこと
ユーザーにソースコードを提供するようなアプリやライブラリのコードに出てくるコメントは英語で統一したい、などという場合に、自分で書いたコードは英語に統一したが、デザイナーによって自動生成されるcsファイルに自動的に日本語でコメントが書かれてしまう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352601/2f9c1886-e316-a865-d2fc-aae7fa901c7a.png)

一応、自動生成のcsファイルも、英語で統一しておきたい。

# 詳細
具体的には、下記のファイルが勝手に日本語になっていた。これを英語に戻したい。

- Resources.Designer.cs
- Settings.Designer.cs

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352601/9648e7be-99ad-a70c-a2f3-1400274e463a.png)

# やり方
- [ツール] > [オプション]を開く。
- [環境] > [国際対応の設定]を開く。
- [言語]のプルダウンメニューから、英語を選択する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352601/81c3e93b-8964-a57e-00c7-c0b9e0f07ba1.png)

こうすると、自動生成されるファイルのコメントが英語になる。
但し、この設定をしたらすぐ上記2つのファイルのコメントが英語になるかというとそうではなく、**次になにかリソースと設定を変更したら**、コメントが英語になる。

なので、コメントだけ変えたいのであれば、リソース(Resources.Desinger.cs)の場合は

- まず、上のように言語の設定を英語にする
- Resources.resxをダブルクリックし、リソースの編集画面を開く
- そこに、何でもいいのでリソースを一つ追加する
- その後、追加したリソースを削除する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352601/46444616-4034-e65b-1941-047d8a94cd36.png)

という操作をして、リソースに変化を与えてやる。
設定(Settings.Desingner.cs)も同様。

そうすると、コメントが英語に戻っている。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352601/a4128787-a262-376f-594d-8d7071c720b0.png)

# 備考
正しいのかどうかはわからないが、これでコメントを英語にすることができた。
使う側のユーザーのVSの言語の設定で、自動で英語(や他の言語)に変わってくれそうなのでなにもしなくていい気もするが、納品時に正しいコメントが記載されたものを、という意味では上記手順で英語にすべきかとも思う。
UISearchBarのテキストやプレースホルダーの文字サイズや文字色を変更する方法

今回の例では、UISearchBarをStoryboardとOutlet接続しているものとします。

コードで生成した場合も同じだと思います。

forKeyで指定するのは好ましくないっぽいけど、備忘録として残しておきます。

```swift
@IBOutlet private weak var searchBar: UISearchBar!
```

SearchBar内のTextFieldを特定します。

```swift
// 対象UISearchBar内のUITextFieldを特定する
let searchBarTextField = searchBar.value(forKey: "searchField") as? UITextField
// 文字色を変更
searchBarTextField?.textColor = .red
// 文字サイズのみを変更
searchBarTextField?.font = searchBarTextField?.font?.withSize(12)
```

PlaceholderのLabelを特定します。

```swift
// 特定済みのUITextFieldからPlaceholderを特定する
let searchBarPlaceholderLabel = searchBarTextField?.value(forKey: "placeholderLabel") as? UILabel
// 11サイズのシステムフォントに変更する
searchBarPlaceholderLabel?.font = .systemFont(ofSize: 11)
// 自動で小さくする可変文字サイズにする場合の例
searchBarPlaceholderLabel?.adjustsFontSizeToFitWidth = true
searchBarPlaceholderLabel?.minimumScaleFactor = 0.8  // 最小サイズ
```

以上、UISearchBarでPlaceholderの外観をいじりたいときはちょっと回りくどいやり方が必要なんですね。

もっと簡単にアクセスする方法あるのかな？Storyboardで弄れれば嬉しいんだけど🤔

## 参考

https://stackoverflow.com/questions/48983497/how-to-change-uisearchbar-font-size-color
Sublime Textでphp.iniを開くコマンドを作ってみた

久しぶりに使うとphp.iniの場所をよく探しています、PHPで開発しているときはphp.iniをよく開きます。すごくたいしたことではないけど「php.iniを開くコマンド」を作ってみました。

- 環境
    - Sublime Text Version 3.2.2
    - PHP 7.3.7
    - Windows 10
    - bash GNU bash, version 4.4.19

# Sublime Textを開く`subl`コマンドを作る
[bash_profileをSublimeText3で開く方法 - Qiita](https://qiita.com/ponsuke0531/items/93c05f0cc007ff457290)

# php.iniの場所を確認する
```bash
$ php --ini
...省略...
Loaded Configuration File:         C:\app\php-7.3.7-Win32-VC15-x86\php.ini
...省略...
```

# .bash_profileにエイリアスでSublime Textでphp.iniを開く`phpini`コマンドを作る
```bash
# .bash_profileを開く
$ subl ~/.bash_profile

# 以下の1行を追記(php.iniのパスは確認したものを使う)して保存する
alias phpini='subl /c/app/php-7.3.7-Win32-VC15-x86/php.ini'

# 反映する
$ source ~/.bash_profile
```

# `phpini`コマンドでphp.iniが開くようになる
```bash
$ phpini
```
C++ OpenCV 画像に点を描写

##結論
画像に点を描写する関数はざっと調べる限りなかった。

点を描写するプロセス
1. 円を描写する関数を使用
2. 関数内の半径を小さい値(1または2)とする
3. 関数内で円内を塗りつぶすを有効（-1）にする

大きい画像に対して半径が小さすぎると、点を認識できなくなるかもしれません。

## 参考コード
```c++:drwa_dot.cpp  
//入力画像
cv::Mat img;

//点の座標
cv::Point dot_P;
dot_P.x = 300;
dot_P.y = 400;

//点の半径
int dot_r = 2;

//色
cv::Scalar dot_S(0, 255, 255);

// -1 のとき円内を塗りつぶす
int draw_in = -1;

//点（円）を描写する関数
cv::circle(img, dot_P, dot_r, dot_S, draw_in, cv::LINE_AA);
```

ちなみに1チャンネルに3チャンネルを描写させても、1チャンネルのままです。
（当たり前ですよね。）

## 参考文献
下記のサイトに引数の詳しい説明があります。
[opencv 2.2 documentation 描画関数](http://opencv.jp/opencv-2svn/cpp/drawing_functions.html)
[OpenCV2 プログラミングブック 4 描画処理](https://book.mynavi.jp/support/pc/opencv2/c3/opencv_drawing.html)
[OpenCV 点群を内包する凸包を描画](http://maverickproj.web.fc2.com/OpenCV_34.html)
[C++版 OpenCVの基本 Matに直線 円 矩形 文字を描画する](https://cvtech.cc/opencv/3/)
SQLite3のテーブル作成とPythonによるデータ操作

この記事はSQLite3とPythonを使って簡易RDBを操作するものである。

## 環境
- windows 10 Home
- Python 3.6 系
- SQLite3 3.27 

## DBテーブルの作成

```db_table1.sqlite
create table xxx(
  id int primary key,
  name text,
)
```
```db_table2.sqlite
create table yyy(
  id_y int,
  name2 text,
  foreign key(id_y) references xxx(id)
)
```
## PythonのDB接続のクラスを作成
```db_connet.py
class db_orm():
    def __init__(self, sqlite_db_path):
        self.db_path = sqlite_db_path
        self.conn = None
        self.cursor = None
        self.db_cursor()
    
    def db_connect(self):
        if self.conn is not None:
            self.db_close()
        self.conn = sqlite3.connect(self.db_path)
        
    def db_cursor(self):
        if self.conn is None:
            self.db_connect()
        if self.cursor is None:
            self.cursor = self.conn.cursor()
            
    def db_commit(self):
        self.conn.commit()
    
    def db_execute(self, exec_sql):
        # Insert a row of data
        # sample sql source
        # c.execute("INSERT INTO stocks VALUES ('2006-01-05','BUY','RHAT',100,35.14)")
        if self.cursor is None:
            self.db_cursor()
        return self.cursor.execute(exec_sql)
    
    def db_execute_many(self, exec_sql, data):
        if self.cursor is None:
            self.db_cursor()
        return self.conn.executemany(exec_sql, data)
        
    def db_close(self):
        if self.conn is not None:
            self.conn.close()
        self.cursor = None
        self.conn = None
```


## dbに接続する
```
sqlite_path = '<dbのファイルパス>'
db_obj = db_orm(sqlite_path)
```


## dbとの接続を終了する
```
db_obj.db_close()
```

## sqlクエリを投げ、データを確認する
```
exe_sql = 'select * from xxx'
result = db_obj.db_execute(exe_sql).getchAll()
```
※ SELECT, DELETE, INESERTはどれも実行することができる

## pandasでのデータ取得と登録
```
exe_sql = 'SELECT * FROM xxx'
df = pd.read_sql_query(exe_sql, db_obj.conn)

df.to_sql('xxx', db_obj.conn, index=False, if_exists='append', index_label='id')
```
VBAの例外処理で起きた勘違い

##VBA 例外処理をしたい
IT企業に入って初の仕事は無限にExcelを使う仕事だったので、少しでも楽するためにVBAを覚えたくなった
そんなVBAを覚えたての自分はこんなプログラムを書いた

```vb:Complete.vba

Dim TypeNum As Integer

TypeNum = InputBox("区分を整数で入力")
If TypeNum <> 999 Then
    '処理
End If
```
このInputBoxのキャンセルボタンを押したり、文字を入れたりエンターの連打癖があると
すぐにエラーが起こってしまう。
CInt(InputBox("....."))　とかやってみたり、aをVariantにしてみたり色々試したけど、全然直る気配がなかったので
仕方がないから例外処理を勉強することにした。

##On Error ステートメント
VBA　例外処理　で調べたら

```
On Error GoTo ラベル名
    処理
ラベル名:
    例外処理
```
っていうのがいっぱい出てきた。とりあえずの疑問事項は...
「ステートメントってなんだ???」だった。

***ステートメント・・・関数ではない命令の事。SubとかDimとかIfとか色々該当する***

ステートメントについて多少は理解した。あと
・On Errorの構文(?)
・例外処理ではErrオブジェクトが使える
・GoToはあんまり使っちゃダメ
という情報をゲットしたので、とりあえず実装をしてみることにした。

##めっちゃエラー出る
とりあえず書いてみたプログラムがこれ

```vb:Complete.vba
Function TypeInputCheck() As Boolean
TypeInputCheck = True

（省略）

Dim TypeNum As Integer
On Error GoTo InputError
TypeNum = InputBox("区分を整数で入力")

If TypeNum <> 999 Then
    '処理
End If

（省略）

InputError:
    MsgBox("エラー!整数で入力してください!")
    TypeInputCheck = False
    Exit Function
End Function
```

めっちゃエラー出た。しかも整数を入力してもエラーが出るようになった....

あ、そういえばエラーコードごとに処理を分岐させたらいけるか?

```vb:Complete.vba
InputError:
    If Err.Number = 13 Then
        MsgBox("エラー!整数で入力してください!")
    Else
        MsgBox("エラー!処理を中断します。")
    End If

    TypeInputCheck = False
    Exit Function

End Function
```
・・・・・・・・?

##罠?
例外処理について何も分からなくなってきたので、Gotoについて調べてみたら気が付いた。

GoTo・・・ラベル名の位置に***移動***できる

```
GoTo ラベル名

ラベル名:
    処理

処理
```

( ﾟдﾟ)ﾊｯ!もしや....

出勤して早速、以下に編集した

```vb:inComplete.vba
InputError:
    If Err.Description <> "" Then
        If Err.Number = 13 Then
            MsgBox("エラー!整数で入力してください!")
        Else
            MsgBox("エラー!処理を中断します。")
        End If

        TypeInputCheck = False
        Exit Function
    End If

End Function
```

直った!!!!!!!!!

原因として、On Error ~~ GoTo --　は
「エラーが起こったら処理を飛ばして、GoToのラベル名の位置から再開するよ」っていう意味だったのを
「エラーが起こらなかったらラベル名の下に書いた処理はしない」っていう風に曲解したことだった。

しかも、ステートメントについて全然理解していなかったのが実は一番の敗因で
「関数ではない命令...?定義とかできるの?」とか考えてた矢先の

```
ラベル名:
    例外処理
```
っていう***見た事無い書き方***に出会ったからこそ、起こった勘違いだと思う。
~~~こんなインデントで括ってたら、処理の定義だと思うじゃん....????~~~

##反省
実はリーダブルコードも読んだことがあるし、高校でユーザーフォームを使ったVBAは経験していたから、
その時に「GoToはあまり使わない方がいい」
っていう知識があったから、使わなそうなGoTo文は記憶の片隅の片隅にしか無かった

「使わなそうな文だから勉強はそこそこでいい」
「あまり好きじゃないから知らなくていい」

という考え方は、おおよそもれなく、沼に落ちるという事を今後の教訓にしたい...
googleform の結果ページを共有する方法

# この記事について

googleformで取ったアンケート結果のサマリーを、第三者と共有する方法の備忘録。

googleformの右上にある"送信"ボタンのurlでは、アンケートformにアクセスするurlしか取得できない。

# 解決法

urlの一番後ろを `viewanalytics` に変更する。

```
https://docs.google.com/forms/d/{formのID}/viewanalytics
```
"使い方"の英語表記 [use] or [usage] ?

開発をgit hub で行っていると"このコードの使い方は～" と用法を書くことが多い。
英語でも書いておこうと思って、"使い方" を調べると use と usage が出てきた。

・Example of use
・Example of usage

どっちがいいの！？っというお話し。

#結論
仕様書等で、"使い方" と箇条書きする場合
・Example of usage

※exaple や usage など、単語だけで OKなのは秘密

#調べてみた
下のサイトを参考
https://ell.stackexchange.com/questions/219869/an-example-of-use-or-an-example-of-usage

##use と usage の違い
use = 動詞
usage=名詞

##使用法の違い
use の場合、動詞なので、使う"動き" に強いベクトルを持つ。
そのため、"使い方" と言う場合、
Example of use だと、使う動きに注目が集まり、違和感がある。
use to something のように、use の意味のベクトルを to で具体的な方向性を与えると違和感が薄い。

usage の場合、名詞なので、例えば と 使う(useexample, usage) のベクトルが近く、example of usage の方が、example of use より正しい。

##Example of usage を使ってみよう
今後、開発のログをgit hub 等で残す場合は、example of usage を使ってみよう！
AR.jsでobjにノイズが乗る件

#課題
AR.jsで、objファイルを動かした際、ぐちゃぐちゃとノイズが乗ってしまうバグを修正する方法。

```
aframe 0.8.0
ar.js 1.7.7
```

#結論
htmlファイルで読み込んでいるjsファイルに、以下の文を追加すればOKです。

```index.js
function init() {
    const sceneEl = document.querySelector('a-scene');
    sceneEl.addEventListener('loaded', () => {
        sceneEl.camera = new THREE.PerspectiveCamera();
    });
}
```
よく分からない人は、htmlファイルに以下を入れてあげてください。

```index.html
<!-- 省略 -->
      <script>
        const sceneEl = document.querySelector('a-scene');
        sceneEl.addEventListener('loaded', () => {
            sceneEl.camera = new THREE.PerspectiveCamera();
        });
      </script>
   </body>
</html>
```

ソースはこちらです。
https://github.com/jeromeetienne/AR.js/issues/410

どうやらAR.jsのバグらしいです。
やっていること自体は、a-sceneタグのカメラプロパティーにThree.jsのカメラを設定してあげているだけ。
かみ砕いてみたC#(ポリモーフィズム：多態性）

過去にやったC#の基本のJavaを踏まえアウトプット
#ポリモーフィズム：多態性

クラスの便利機能の一つで派生クラスのインスタンスを基本クラスの変数に入れられる仕組みです。

##補足１

finalばかりつける開発グループがあり見かねてMicroSoftが作ったって話を聞きました。


```C#
namespace ShootingGame
{
    class Enemy
    {
        public int hp;
        public virtual void Move() // public abstract void Move()
        {
        }
    }
}
```

##補足2

Javaにもあるabstractは（未実装のクラス)なのでnewはできません。
「継承した先でoverrideして中身を書く」事が肝！

メリットはいくつも継承できるのでどこからでもアクセスできるからだと感じてます。

踏まえると

##Enemy.cs

```C#
namespace ShootingGame
{
    class UFO:Enemy
    {
        public override void Move()
        {
            Console.WriteLine("ジグザグに移動");

        }
    }
}
```

##Meteor.cs
```C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace ShootingGame
{
    class Meteor:Enemy  //Enemyクラスを継承してMeteorクラスを作る
    {
        //EnemyクラスのMoveメソッドをオーバーライドする
        public override void Move()
        {
            Console.WriteLine("まっすぐに移動");
        }
    }
}
```

##Star.cs
```C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace ShootingGame
{
    class Star:Enemy
    {
        public override void Move()
        {
            Console.WriteLine("回転しながら移動");

        }
    }
}
```

##UFO.cs
```C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace ShootingGame
{
    class UFO:Enemy
    {
        public override void Move()
        {
            Console.WriteLine("ジグザグに移動");

        }
    }
}

```

##Program.cs
```C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace ShootingGame
{
    class Program
    {
        static void Main(string[] args)
        {
            UFO ufo;
            Star[] stars = new Star[2];
            Meteor[] meteors = new Meteor[2];

            // インスタンスを生成する
            ufo = new UFO();
            stars[0] = new Star();
            stars[1] = new Star();
            meteors[0] = new Meteor();
            meteors[1] = new Meteor();

            // 敵を移動する
            ufo.Move();
            for (int i = 0; i < stars.Length; i++)
            {
                stars[i].Move();
            }
            for (int i = 0; i < meteors.Length; i++)
            {
                meteors[i].Move();
            }
        }
    }
}
```

といった便利な機能って認識
IEでincludesメソッドがエラーになる

## 問題

IE11で以下のエラーが出た

> オブジェクトはプロパティまたはメソッド 'includes'をサポートしていません 

## 解決方法

[MDNリファレンスページ](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes#Browser_compatibility)にて、
includes Internet Explorerではサポートされていません。

よって、indexOf(***) >= 0 を用いて解決しました。

```javascript:解決前
if(service.AvailableChangeTypes.includes(2)) {
//処理
}
```

```javascript:解決後
if(service.AvailableChangeTypes.indexOf(2) >= 0) {
//処理
}
```
正規表現 ruby

## //でRegexpオブジェクト作成

これだけでも正規表現はできる

-  パターン①

```ruby

a = /ruby/ === "I love Ruby"
b = /ruby/ === "I love ruby"
p a
p b
```

- パターン②

```ruby

 Regexp.new "Ruby"
```

- マッチした値をとってくる

```ruby

p /Ruby/ =~"I love Ruby JAVA"


p $&
p $`
p $'

# ケース1 通常文字列文字列
# ケース2 スペースあり
```

## 基本

```ruby

# ^ 行始め
# $ 行終わり
# | or
# []
# -
# \d
# 繰り返し * + {m}

# "aac" "bbc"


reg = /^(aa|bb)c$/

p reg === "aac"
p reg === "bbc"


# "abegh"

reg = /a[bcd]e[fg]h/

p reg === "abegh"

# "a2z" - 

reg = /a[1-5]z/
p reg === "a2z" 

# "abz"

reg = /a[a-b]z/
p reg === "abz" 

# "a2z" \d 

reg = /a\dz/
p reg === "a2z" 

# *

reg = /a*b/
p reg === "ab" 

p reg === "aab"
p reg === "aaab" 




# + 直前の文字の

reg = /a+b/
p reg === "abz" 
p reg === "aaaab" 


# {m} 直前の文字の

reg = /az{3}/
p reg === "az"
p reg === "azz"
p reg === "azzz" 


# 取り出し

$1
$2
$3
```
SSHと踏み台サーバーを用いてサーバーを立てるのが困難な場所にVPNサーバーを立てる

#はじめに
一部のマンションではサーバーを立てる事が禁止されていたり、フレッツ光のIPv4 over IPv6オプションが有効になっているとWell-knownなポートを自由に利用する事ができません。
このような場合、SSHのリモートフォワードを利用し、踏み台サーバーから通信を転送してあげる事で自宅サーバーにアクセス出来ます。
私はは443/tcpで建てておいたOpenVPNサーバーでテストしましたが、これはWebサーバー等他のことでも同様に使えます。

#VPNサーバーの準備
ポートを443/tcpに変更した上でサーバーを立てます。
こちらについて特に何かすることはないのでここでは割愛します。

#概要説明
![CF310384-4C38-4072-B09A-9A748353B3AA.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/339688/21b86981-01fa-d8ce-b36f-d6644f73a0b8.jpeg)

こんな感じ

#踏み台サーバーの準備
踏み台サーバーはAWSやGCPなどのグローバルからアクセス可能で自由に使えるVPSサーバーを想定します。
転送するだけなのでスペックはあまり必要としません。
私はGCPの無料枠を使いました。

サーバーのセットアップは完了していて、鍵認証で普通にSSH接続できる状態であるとします。

###設定ファイルの編集
グローバル側から、設定したポートへのアクセスを許可するために、設定ファイルを編集します。

`/etc/ssh/sshd_config`を開き、`GatewayPorts`を`yes`に変更。

```shell
sudo nano /etc/ssh/sshd_config
```

``` /etc/ssh/sshd_config
  ...

#追記
GatewayPorts yes

```

sshdを再起動

```shell
sudo systemctl restart sshd
```

#クライアント側から接続
ターミナルから以下のようにコマンドを実行します

```shell

ssh <ユーザー名>@<踏み台サーバーのアドレス>  -i 鍵ファイル　-R \*:8443:localhost:443
```
前半の部分は普通にSSH接続する時と同じですから、重要なのは`-R`以下です。
`\*:8443:localhost:443`は、`\*`がIPv4とIPv6問わずすべてのアドレスという意味なので、**すべての何処かから8443に向けてやってきた通信を転送し、転送先ではlocalhostの443からの通信として扱う**というように捉えておけば良いと思います。

しばしば先頭の`\*`は省略されますが、この場合自動的にこの部分がlocalhostになります。
つまり、`8443:localhost:443`とした場合はlocalhostから8443に向けての通信のみ転送します。

IPv4の通信のみ転送する場合は`\*`を`0.0.0.0`に、IPv6の場合も同様に`::1`に置き換えます。

#接続の確認
前述の方法でssh接続が確立された踏み台サーバーの側で

```shell
netstat -l | grep 8443
```

で該当ポートがLISTENになっているか確認しましょう。


#VPNの接続
クライアント側のVPNの接続先アドレスを踏み台サーバーのアドレスへ、ポートを8443に変更するだけで接続可能です。
こちらについても何か他にする事はありません。

#注意点
踏み台サーバーの場所によってはpingがものすごく悪くなります、速度も期待はできません。
今回は転送待ち受けポートを8443番にしましたが、1024番以下の特権ポートを使いたい場合sshをroot権限で実行するiptablesでルーティングするなどの工夫が必要となります。
また、くれぐれも十分な強度を持った鍵ファイルをご利用ください。

#補足等
- `\*`の`\`はただのエスケープ文字で実際にはただの`*`
- sshする時に`-f -N`オプションも同時につければ接続確立後バックに引っ込んでくれます。終了するときは`ps -x`からの`kill`




#おわりに
普段よく使うSSHにこんな機能もあるなんて知りませんでした。
セキュリティ的に問題があればコメント欄にてご指摘ください。
本日は読んでいただきましてありがとうございました。
[TypeScript]オブジェクトのパスを指定して中身を取り出す方法 ～ ここは型の地獄 ～

# [TypeScript]オブジェクトのパスを指定して中身を取り出す方法 ～ ここは型の地獄 ～

[TypeScript で再帰的な型を定義する](https://qiita.com/hrsh7th@github/items/84e8968c3601009cdcf2)を参考にしています

## オブジェクトの中の型

　以下のようなプログラムを組む際、中の値を取り出すだけならプログラム的には容易です。しかしTypeScriptの型を取り出す場合は一筋縄ではいきません。ということで値だけでなく、型もきちんと戻ってくるようにプログラムを作成しました。

```ts
//テスト用の型
const value01 = {
  a: { b: { c: 100 } }
};

//データの取り出し(戻り値の型はnumber型)
const v = getValue(value01, ["a", "b", "c"] as const);
//100が出力される
console.log(v);
```

## データの型と値を取り出すプログラム
```ts
//配列の二番目以降を取り出す取得
type Next<U> = U extends readonly [string, ...string[]]
  ? ((...args: U) => void) extends (top: any, ...args: infer T) => void
    ? T
    : never
  : never;

type Deeps<
  State,
  Paths extends readonly string[]
> = Paths[0] extends keyof State
  ? {
      0: State[Paths[0]];
      1: Deeps<State[Paths[0]], Next<Paths>>;
    }[Paths[1] extends undefined ? 0 : 1]
  : never;

//パスに沿ってオブジェクトの型を取り出す
function getValue<State extends object, Paths extends readonly string[]>(
  state: State,
  paths: Paths
) {
  return (paths.reduce(
    (state, path) => {
      return state[path] as never;
    },
    state as { [key: string]: unknown }
  ) as unknown) as Deeps<State, Paths>;
}
```

## 解説

　まず重要なのが値を渡すときに

```ts
const v = getValue(value01, ["a", "b", "c"] as const);
```

　というように、「as const」を付けて、リテラルの配列を渡しているところです。リテラル以外で情報を渡しても、配列の中の型情報が **"a"** ではなく **string** に変換されてしまうため、オブジェクトのキーとして使えなくなってしまいます。また、渡した先にreadonly属性が付いていますが、constを渡す場合には必要となります。

　次が以下のように疑似再帰を行っている部分です。これは冒頭の参照元を読んでください。経路切り替えをして、再帰しているのにしていないと誤魔化すテクニックのようです。ただし利用できる再帰深度は41までらしいので注意が必要です。ちなみにTypeScript3.7betaでも型の再帰は出来ませんでした。

```ts
 {
    0: State[Paths[0]];
    1: Deeps<State[Paths[0]], Next<Paths>>;
 }[Paths[1] extends undefined ? 0 : 1]
```
　
　その他、genericsで使われるextendsの意味も知っておかなければなりません。

- 左辺のextends  
型の制約を付けるために使用する
- 右辺のextends  
三項演算子的に型の判定を行うために使用する

　これが分かっていないと、そもそもまともに型情報の管理が出来ません。しかしこれを真面目に書いていくと、型地獄へといざなわれます。


## まとめ

　Reduxを簡単に使うためのラッパーライブラリを作るのに、どうしても型情報の抽出が必要だったので、今回の内容にたどり着きました。

　[React-Reduxが難しい？ それは過去の話だ！ ～ ToDoアプリを最小限の労力で記述する ～](https://qiita.com/SoraKumo/items/be41bebdc5609770ac21)

　TypeScriptは多少知識を付けたと思っても、時々何をやっているんだかさっぱり分からないコードに遭遇することがあります。そういうものに遭遇したらイジり倒して理解していくしかありません。

　TypeScriptのバージョンが上がって、初見で理解の出来ないコードが次々に登場するかと思うと、ワクワクが止まりません。
laravel + vue.js環境構築

#laravelのbladeとvue.jsの記述が被っている問題

 - vueの書き方で{{ message }}等波括弧で閉じるとこはbladeの記述と被るため@{{ message }}にする<br>
 忘れると以下のエラーが出る<br>
``` Use of undefined constant message - assumed 'message' (this will throw an Error in a future version of PHP) ```

#環境設定
 - composer.jsonファイルに必要な情報追加 axiosなど
 - package.jsonに情報追加
 - cross-envを削除して"vue": "^2.6.00"を追加しています。

``` json:package.json
{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.19",
        "cross-env": "^5.1",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.13",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "vue": "^2.6.00"
    }
}
```
 - composerで環境構築

 ```cmd:cmd
composer update
```
 - 以下入っていなければインストール

```cmd:cmd
curl --silent --location https://rpm.nodesource.com/setup_10.x | bash -

yum install nodejs
npm -v
node -v
```


 - laravelをインストールしたディレクトリで以下実行

```cmd:cmd
npm -g install cross-env cross-spawn
npm install --no-bin-links
```

 - フロントエンドのビルド

```cmd:cmd
npm run dev
```

 - 

- error code ELIFECYCLEの場合

```cmd:cmd
# インストールされたjsモジュールを全部消す
rm -rf node_modules

# インストールされたjsモジュールのバージョン情報を消す
rm package-lock.json yarn.lock

# npmのキャッシュをクリアする
npm cache clear --force

# 再度jsモジュールを全部入れ直して、実行する
npm install
npm run dev
```

#コンパイルを自動で実行する

```cmd:cmd
npm run watch-poll
```
Rotate image with Keras

What if you want to rotate an image (whether it is 2D or 3D) within a Keras layer?
It is simple to do with Numpy because Numpy has [`rot90`](https://docs.scipy.org/doc/numpy/reference/generated/numpy.rot90.html).

Here is a way to perform 90˚ rotation only using Keras functions which can be wrapped as a Keras layer to be used in a CNN model.

# Basic Strategy
90˚ rotation can be done by combining **transpose** and **flip**. 
`keras.backend.transpose` transposes images.
`keras.backend.reverse` flips images on the specified axis.
Ex)

```python:rotate2D.py
import numpy as np
from skimage.data import camera
from keras import backend as K
from matplotlib import pyplot as plt

image =  camera().astype(np.float32)
image_tsp = K.transpose(image)
image_cw90 = K.reverse(image_tsp, axes=0)  # clock wise
image_ccw90 = K.reverse(image_tsp, axes=1)  # counter clock wise

plt.figure()
plt.subplot(221)
plt.imshow(image, cmap='gray')
plt.title('Original')
plt.axis('off')
plt.subplot(222)
plt.imshow(K.eval(image_tsp), cmap='gray')
plt.title('Transposed')
plt.axis('off')
plt.subplot(223)
plt.imshow(K.eval(image_cw90), cmap='gray')
plt.title('Rotated 90˚ cw')
plt.axis('off')
plt.subplot(224)
plt.imshow(K.eval(image_ccw90), cmap='gray')
plt.title('Rotated 90˚ ccw')
plt.axis('off')
plt.show()
```
Output
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/345318/7587bfb7-56a5-9184-bd0a-938d555572dd.png)

# Practical implementaion
In a real CNN model, input image data come with 4D or 5D tensors. (including batch and channel dimensions) Therefore, it would be better to use `permute_dimensions` rather than `transpose` because the latter reverses all the dimensions whereas the former reorders whatever dimensions you want.

In the following example, the dimensions are supposed to be
1: batch
2: depth
3: longitudinal
4: horizontal
5: channel

```python:rotate_nD.py
import numpy as np
from skimage.data import camera
from keras import backend as K
from matplotlib import pyplot as plt

# Create a multi dimensional image
image =  camera().astype(np.float32)
image = np.expand_dims(np.expand_dims(image, axis=2), axis=0)
image = np.concatenate((image, 0.5*image), 0)
image = np.concatenate((image, 0.5*image), 0)
image3D = np.expand_dims(image, axis=0)
image3D = np.concatenate((image3D, 0.5*image3D), 0)

image_tsp = K.permute_dimensions(image3D, (0, 1, 3, 2, 4))
image_cw90 = K.reverse(image_tsp, axes=-2)  # clock wise
image_ccw90 = K.reverse(image_tsp, axes=-3)  # counter clock wise
```
for ruby



```ruby

a = "hey"
target = a.chars
b = "you"
tbrget = b.chars

for i in target do 

 for num in tbrget do
   p "i:#{i}"
   p "num:#{num}"  
 end
end
```

```
i:h"
"num:y"
"i:h"
"num:o"
"i:h"
"num:u"
"i:e"
"num:y"
"i:e"
"num:o"
"i:e"
"num:u"
"i:y"
"num:y"
"i:y"
"num:o"
"i:y"
"num:u"
```
redux hooks

## reduxが簡単になった見たい

- orverview

  - dispatch an action to the store
  - which may or may not change the state via reducers
  - access that state with a selector
  - and changes will automatically re-render your app

## 変わった点

- useSelector
　これでstateを持ってきやすく


## メモ


- reducer

```ruby

return{...state, count: state.count +1}
```




## 記事

https://dev.to/chrisachard/redux-crash-course-with-hooks-a54
CSS 4

16進数…！

高校以来です。
ここで使うのですか。
色変えるのに16進数。

ちょっと何言ってるか分かんない。

h1
｛
color: #00ff00;
｝

→

h1
｛
 color:#0f0;
　｝

おんなじ！！
すごい！
作った人ほんとやばい！

毎日勉強になります。
LPC > MCUXPresso IDE > プロジェクトExport時に必要なこと

```txt:動作環境
OS: Ubuntu 18.04 LTS
基板: LPCXpresso54628
IDE: MCUXpresso IDE v11.0.1 [Build 2563] [2019-09-01]
```

資料: MCUXpresso IDE - User Guide REV 11.0.1
5.2 An Introduction to Launch Configuration Files
p23
Tips

> When exporting a project to share with others, launch configurations should usually be deleted before export (along with other IDE generated folders such as build configuration folders (Debug/Release if present)).

これをしないと失敗するのだろう。
そういう情報が260ページある資料の23ページ目に「さらっと」書かれている。
資料はこの資料以外にもSDKの資料やMCUの資料など、付随資料も含めると1,000ページはあり、それらの資料のある部分にこういうことが書かれている。
ペナルティ法(罰金法)

# 概要

ペナルティ法(罰金法)について勉強したので、そのメモとしてここに記載します。
![Screen Shot 2019-10-03 at 7.35.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335400/93800ffa-70de-c2b8-5089-c88881da7564.png)
©️ゆるゆり(かわいい...)

# 定式化

今、変数$x, y$のエネルギー$f(x, y)$が与えられているとします(この$f$はQUBOなどの変換によってすでに2次形式で2値($x, y \in {0, 1}$)の数式になっているものとします)。そのエネルギーが最小になるように$x, y$を取りましょう。これを数式で表現すると

```math
\min_{x, y} f(x, y) \tag{*1}
```

のようになります。シンプルですね。

# 制約の導入

ここで

```math
x + y = K \tag{*2}
```

という制約を導入しましょう。すなわち、この制約を守りつつ(*1)の$f$を最小にしなさい、という問題になりました。

# 制約ありから制約なしへの変換、ペナルティ法

制約という(*2)を満たしつつ(*1)式を到達する、というと式が2つに分かれていることもあり、複雑さが増しているように感じますね。ではどうするか...答えはそう、制約を制約と思えなくなるような1つの数式にまとめてあげれば良いのです。
そのためにコスト関数を導入しましょう。この制約からズレが生じたときにコストを増加させるような関数を考えればよいとすると、一番簡単な形は以下のようになります。

```math
E 
= f(x, y) + \lambda (x+y-K)^2 \tag{*3}
```

ここで$\lambda$は制約のズレにかかる重みの定数です。この$E$を最小化すれば、自動的に(\*1)式を満たし、かつ制約(\*2)も成立するような$x, y$が選択されます。
しかし、気をつけなければならないことは$\lambda$の大きさです。$\lambda \gg 1$を選択すると、せっかく(*1)が満たされていても、$x, y$が制約を少し破っているだけでコスト$E$が大きくなってしまいます。

# OpenJijでプログラミングにチャレンジ！

[OpenJij](https://openjij.github.io/OpenJijTutorial/_build/html/ja/index.html)というPythonのモジュールを使用することで実際に、最適化問題を解くことが可能です。

```
$ pip install openjij
```

で簡単にインストールできます。実際に使用してみると良いでしょう。

# 結言

今回は最適化問題でよく用いられる基礎的な手法のペナルティ法(罰金法)をご紹介しました。この調子で、他の最適化問題の記事も掲載していく予定です。乞うご期待ください。

# アドバンス: 拡張ラグランジュ未定乗数法

詳細は省略(目下、著者が勉強中)させていただきますが、以下のような拡張ラグランジュ未定乗数法を使うことで、より精度よくコストを減らしかつ制約を満たすような$x, y$が見つかることが知られています。

```math
E 
= f(x, y) + \lambda (x+y-K)^2 + \alpha (x+y-K)
```
react-navigation v4で追加された新たなhooks

https://github.com/react-navigation/hooks

react-navigation v4 で使える hooks api に新しく hooks が追加されました。

- useFocusEffect
- useIsFocused


## useFocusEffect

`useFocusEffect` は使っているScreenにFocusがあたった時、及びFocusが外れた時にサイドエフェクトを起こします。
`useEffect` の Screen 版のようなものですね。

```jsx
function MyScreen() {
  useFocusEffect(useCallback(() => {
    console.debug("screen takes focus");
    return () => console.debug("screen loses focus");
  }, []));
  return <View>...</View>;
}
```

## useIsFocused 

`useIsFocused` は現在screenがfocusされているか否かをbooleanで返します。

```jsx
function MyScreen() {
  const isFocused = useIsFocused();
  return <Text>{isFocused ? 'Focused' : 'Not Focused'}</Text>;
}
```

react navigationのstackはmountが発火されるタイミングがわかりにくいので、screen毎の`useEffect`のようなhooksがが使える様になったのはありがたいですね。

なお、次に来るreact-navigation v5はフルリライトでガラッと使い方が変わるので、このhooksを活用出来る期間はそう長くはないかもしれません。
lodashを使ったオブジェクトのマージ


私はReactをよく使いますが、とにかくオブジェクトのマジをよく使います。
通常、オブジェクトのマージにはObject.assign()やスプレッド演算子を使いますが、1階層しかないオブジェクトならいいのですが、ネストしたオブジェクトは標準機能では容易にマージできない（JSONに一度変換するとかすればできますが）ので、lodashを使ってみます。

## 準備

```bash
npm install --save lodash
```

## 実装（テスト）

たまたま開いていたプロジェクトがReact NativeだったのでRN環境で検証しました。
obj1とobj2を作り、

* Object.assign()を利用
* スプレッド演算子を利用
* lodashを利用

の３つを試して結果を表示させています。

```js:App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

//lodash
import lodash from 'lodash';

const obj1 = {
    status: 'OK',
    user: {
        email: 'test@test.com',
        age: 33,
    }
}

const obj2 = {
    status: 'OK',
    user: {
        tel: '03-1111-2222',
    },
    others: 'hoge',
}

const obj3 = {
    address: 'Tokyo',
}

const obj4 = Object.assign({}, obj1, obj2);
const obj5 = { ...obj1, ...obj2 };
const obj6 = lodash.merge({},obj1, obj2);
const obj7 = lodash.cloneDeep(obj6);
lodash.merge(obj7.user, obj3); //たりたいこと


export default function App() {

    console.log(obj4);
    console.log(obj5);
    console.log(obj6);
    console.log(obj7);

    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Open up App.js to start working on your app!</Text>
        </View>
    );
}

```

## 結果と考察

lodash以外は1階層目しかマージされていません。なお、同じ変数名がある場合は、後優先となるようです。

```js
Object {
  "others": "hoge",
  "status": "OK",
  "user": Object {
    "tel": "03-1111-2222",
  },
}
Object {
  "others": "hoge",
  "status": "OK",
  "user": Object {
    "tel": "03-1111-2222",
  },
}
Object {
  "others": "hoge",
  "status": "OK",
  "user": Object {
    "age": 33,
    "email": "test@test.com",
    "tel": "03-1111-2222",
  },
}
Object {
  "others": "hoge",
  "status": "OK",
  "user": Object {
    "address": "Tokyo",
    "age": 33,
    "email": "test@test.com",
    "tel": "03-1111-2222",
  },
}
```

いろいろ使いこなせば便利なんでしょうけど、とりあえずmergeで。
∞_00002 | 【Javascript】オブジェクト⇒配列の変換関数

2日連続更新！！
自分でほめていきます(=ﾟωﾟ)ﾉ

今日はJavascriptでオブジェクトを配列に、配列をオブジェクトに変換する汎用性の高めな関数を書き残し


業務中にSharepoint上にwebサイト構築の依頼があり 、
描画内容をEWA（web上でExcelをいじる機能）に張り付けてダウンロード
したいという要望。既存のサイトで実装経験があり、コピペ＆修正で実装が完了したのですが

✖ 　関数内で、そのサイト特有の固定値が入ったまま
✖　オブジェクト→配列 の変換処理で 配列名やインデックスがべた書き


別サイトに使いまわせない専用ソースとなっていてムズムズ...
ソースやコンソール画面で挙動をウォッチしやすいオブジェクトで基本的に処理をしつつ、
必要に応じて配列変換して利用する
　※ 実装環境 >>　ブラウザ：IE8　OS：windows10  (2019/10/03追記)


今後、そのような流れが増える予想なので今のうちに汎用化しておくに越したことはない！！
ということで作った関数の備忘録
(2019/10/03 17:40 バグ対応に伴い、修正)

```javascript:objArray.js
var input={
    "00001":{userId:1234567,    userNm:"ほげ一郎",    country:"北海道"},
    "00002":{userId:2234567,    userNm:"ふが次郎",    country:"東京"},
    "00003":{userId:3334567,    userNm:"ごう三郎",    country:"滋賀"}
};
var output = [];


function objToArray( inputObject ){
    var outputArray=[];
    var i = 0;
    var j;

    for ( key1 in inputObject ){
       j=0;
       outputArray[i]= [];
       
       for ( key2 in inputObject[key1] ){
           outputArray[i][j] = inputObject[key1][key2];
           j++;
       }
       i++;
    }
    return outputArray;
}

output = objToArray(input);
console.log(output);//→[[1234567,ほげ一郎,北海道],[2234567,ふが次郎,東京][3334567,ごう三郎,滋賀]]
```


メインの処理の中では、オブジェクトを使用して
ユーザIDでデータ問い合わせをしたり、ページ上でデータの上書き更新をし
Excelに張り付けるときだけ上記の関数に投げて二次元配列にしてから、
EWAの貼り付け関数に渡せるので、対象オブジェクトの増減、プロパティの増減も気にせず
実行可能に(・ω・)



＜修正前ソース＞

```javascript:objArray.js
var input={
    00001:{userId:1234567,    userNm:"ほげ一郎",    country:"北海道"},
    00002:{userId:2234567,    userNm:"ふが次郎",    country:"東京"},
    00003:{userId:3334567,    userNm:"ごう三郎",    country:"滋賀"}
};
var output;

function objToArray( inObj ){
    var outputArr=[];
    var i = 0, j = 0;
    var key2 = Object.keys(inObj)

//オブジェクトのキーの繰り返し
    for ( key in inObj ){
//キーのループを利用して配列に格納
       outArr[i]=inObj[key];
    }
    i++;
    return outArr;
}

for( i in input){
    output.push(objToArray(i));
}
output;//→[[1234567,ほげ一郎,北海道],[2234567,ふが次郎,東京][3334567,ごう三郎,滋賀]]


```
railsでasset:precompileが落ちて、デプロイ失敗するけどエラーログが特に出ないときどうするか

- `asset:precompile`が落ちて、デプロイ失敗する
- エラーログが特に表示されない
- [webpackerの仕様](https://github.com/rails/webpacker/blob/master/README.md#deployment)で`asset:precompile`時に`webpacker:compile`がフックされる。その中で落ちていた
- webpack-dev-serverではcompile成功していた
- ローカルで`bin/rails webpacker:compile --verbose`しても処理が終わらず、エラーはいてくれない。
- ローカルで`bin/webpack --verbose`するとちゃんとエラー吐いてくれた。これでどこで落ちてるかわかる。
```
ERROR in js/xxx/index-0b032e49757fa3df8c0d.js from UglifyJs
Unexpected token: name «o», expected: punc «;» [js/xxx/index-0b032e49757fa3df8c0d.js:1,12082]
```

### まとめ
- webpack-dev-serverでcompile成功していても、デプロイ時に失敗することがある
- `bin/webpack --verbose`するとローカルでもデバッグできるしエラーはいてくれる
gemの仕様をbyebugを使って調査する

### Gemの仕様を詳細に知りたいとき
- gemのバージョンを上げたらアプリケーションが動かなくなったので何が悪いのか知りたい
- githubでソースコードやドキュメントを読んでもわからない仕様を知りたい
- どのタイミングでgemが呼ばれてるか知りたい

  →gemの中でもbyebugできるよ

### やり方
- gemのリポジトリをclone
- Gemfileにそのローカルリポジトリをしていして`bundle install`
- gemのリポジトリのソースコードにいつもどおりbyebug
- いつもどおり`rails s`してそのgemつかってるところを踏めば停まる
【Rails】部分テンプレートでrender使う時に指摘されたこと

#概要
eachとrenderを使って繰り返し処理を作ったところ、「こうした方がよくなるよ〜」とメンターさんに指摘されたので、まとめておきます

#環境
rails 5.2.1

#Before
最初は以下のように記述してみました。
@all_evaluationにユーザー評価が複数入っていて、それを同じテンプレートで一覧表示させる、といったことをやろうとしています。

```hogehoge.html.haml
中略
   - @all_evaluations.each do |evaluation|
      = render partial: "evaluations", locals: {evaluation: evaluation}
  
```
この書き方でも問題なくビューは狙い通りに表示できるのですが、
パフォーマンスに影響があるんだそうです。（後述）

##locals
localsオプションは、部分テンプレート内で使う変数を定義して渡してあげることができます。
locals: {部分テンプレート内の変数名: 渡してあげる変数名}

またこの時、いつもなら省略できていたpartial: は省略できなくなるので注意が必要です。

##collectionオプション
collectionオプションを使うと、@all_evaluationsの中に入っているものを自動で取り出して、繰り返しビューに返してくれます。なので、これを使うとそもそもeach文が不要になるわけです。

##asオプション
collectionオプションを使用した場合、部分テンプレート内で使用する変数は、
オプションで指定した変数が「@hoges」であったらその単数形の「hoge」になります。
今回の場合だと、@all_evaluationsなので、変数はall_evaluationになるわけですね。
ただ、今回は他の変数のものと共通の部分テンプレートを使用しているため、別で変数を指定する必要がありました。
もし別の名前として変数を使いたい場合は下記のように記述します。
as: "部分テンプレート内で呼び出す変数名"



以上、これらのオプションを使うと、以下のように記述することができました。

#After

```hogehoge.html.haml
中略
    = render partial: "evaluations", collection: @all_evaluations, as: "evaluation"
```


##パフォーマンスについて
今回、collectionを使うことで記述を短くすることができましたが、
それ以外にこの書き方だとパフォーマンスに差が出るとのことです。
つまり、ユーザーが実際に使った時、「軽いサイトだなー」とか「重いなー」とか、UXに影響が出るということですね。
やっぱりサイトの表示は早い方がUXはいいですから、気にしていかないといけないところです。

実際、eachを使うと、renderを@hogesに含まれる数だけ呼び出すことになります。
しかし、collectionを使うと１回だけテンプレートを呼び出すことでビューが表示できます。

@hogesに含まれる数が少ないうちは差が感じませんが、サイトが大きくなってきたときに、この差が大きく感じることになります。
気をつけましょう。

#参考
[【Rails】部分テンプレートの使い方を徹底解説！](https://www.pikawaka.com/rails/partial_template)
Railsでslimを使う際はインデントに気をつけましょうって話

いきなりですが、みなさんはrailsのテンプレートエンジンに何を使っていますか？
僕はslimです。
公式ドキュメントは[こちら](https://github.com/slim-template/slim)

こちらのslimは<>や閉じタグが省略できてとてもシンプルに書くことができるんですよ。
ただ今回つまづいたところがあったので同じようにつまづいた人のために記事にしておこうと思いました。

#この記事で話すこと、しないこと
##話すこと
slimでつまづいたこと。
解決法
##話さないこと
slimの導入手順
slimの細かい記法
読者の皆さんはslimが書ける前提で進めていきます。

#つまづいた事象
僕がつまづいたのは下記のようなコードです。
もしAならhogeを表示すると言ったものです。

```
-if A
= hoge
```

さてお気付きのかたもいると思いますが、こちらif文が機能しません。

なぜなら上記のコードは下記のコードと同じだからです。

```
<% if A %>
<% end %>
<%= hoge %>
```

え、ならslimでif文書けないじゃんとお思いの方もいると思いますが大丈夫です。
解決方法はあります。

#解決方法
= hogeをネストさせるだけです。

```
-if A
  = hoge
```

これだけでif文が機能するようになります。

#まとめ
slimはif文、each文などの閉じタグがなく、インデントで判断するので上記のような事象が発生するのですね。
しっかりネストさせないと「お、ネストされてない。ということはif文はネストされているこの行までだな」と、slimさんに判断されちゃう訳なんですよ。
ということで、みなさんslimで書く際はerbの時以上にインデントに気をつけましょう。