OmniAICreator/Qiita-1.07M huggingface dataset:
Firebase UIで簡単Sign in with Apple対応

# はじめに

Firebaseを使ってソーシャルログインをやっているけど、まだSign in with Appleにまだ対応していないぞというそこのあなた！

朗報です。

あなたがFirebase UIを使ってソーシャルログインを実装していたら数分で対応できちゃいます。

ログイン画面のデザイン細かく変えたいしFirebase UIなんて使ってねーよという方はごめんなさい。本記事の対象外です。

# 使用するライブラリ

FirebaseUI for iOS — Auth
https://github.com/firebase/FirebaseUI-iOS/blob/master/Auth/README.md

# 対応方法

## 前準備

Firebase UIのReadmeにも記載されている「iOS で Apple を使用して認証する」を読んで設定をONにします。
特に躓くポイントはないと思われます。

https://firebase.google.com/docs/auth/ios/apple#comply-with-apple-anonymized-data-requirements

「「Apple でサインイン」して Firebase で認証する」の項目以降は、実施しなくていいです。Firebase UIが全部いい感じにやってくれますからね。（ダメ開発者まっしぐら）

## ソース修正

ドキュメントに従ってappleAuthProviderを追加するだけ。

```objective_c
// Objective-C
@import FirebaseUI;

/* ... */

NSArray<id<FUIAuthProvider>> *providers = @[
  [[FUIEmailAuth alloc] init],
  [[FUIGoogleAuth alloc] init],
  [FUIOAuth appleAuthProvider],//ここが重要
];
self.authUI.providers = providers;
```

と思ったけど、Sign in with AppleはiOS13からしか動作しないのでiOS13より下もきちんと考慮するとiOSバージョンを確認してから追加すること。

```objective_c

    NSMutableArray<id<FUIAuthProvider>> *providers = [NSMutableArray arrayWithObjects:
                                                      [[FUIGoogleAuth alloc] init],
                                                      [[FUIEmailAuth alloc] init],
                                                      nil
                                                      ];
    if (@available(iOS 13.0, *)) {
        if ([UIDevice currentDevice].systemVersion.floatValue >= 13.0) {
            // iOS 13以上の場合のみsign in with appleを追加
            [providers addObject:[FUIOAuth appleAuthProvider]];
        }
    }
    self.authUI.providers = [providers copy];

```

こちらの記事でavailableでOSバージョン確認する方法だと対応できないとあったので特に確認せず参考にさせてもらっています。（面倒くさがりですみません）
https://qiita.com/qinyong/items/aa348f266c05794c36b2
The way to add Basic Authentication on Laravel

## Description

I wanted to add just basic authentication on whole page. 
(It's not for user authentication)

## Preparation

```
$ php artisan make:middleware BasicAuthMiddleware
```

```:app/Http/Kernel.php
<?php
 
namespace App\Http;
 
use Illuminate\Foundation\Http\Kernel as HttpKernel;
 
class Kernel extends HttpKernel
{
 
    /** 
     * The application's global HTTP middleware stack.
     *
     * These middleware are run during every request to your application.
     *
     * @var array
     */
    protected $middleware = [ 
        \App\Http\Middleware\TrustProxies::class,
        \App\Http\Middleware\CheckForMaintenanceMode::class,
        \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
        \App\Http\Middleware\TrimStrings::class,
        \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
        \App\Http\Middleware\BasicAuthMiddleware::class, // Add here
    ];  
...

```

## Create Config

Add environment parameter for basic authentication

```:.env
...

BASIC_AUTH_FLAG=1
BASIC_AUTH_PASSWORD=sample
BASIC_AUTH_USER=sample
```

```
$ vim config/myauth.php
```

```:config/myauth.php
<?php
 
return [
    'basic' => [
        'flag'     => env('BASIC_AUTH_FLAG', 0),
        'username' => env('BASIC_AUTH_USER', null),
        'password' => env('BASIC_AUTH_PASSWORD', null)
    ]   
]; 
```

## Edit code

```app/Http/MiddleWare/BasicAuthMiddleware.php
<?php
 
namespace App\Http\Middleware;
 
use Closure;
 
class BasicAuthMiddleware
{
    /** 
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {   
        if (config('myauth.basic.flag')){
            switch (true) {
                case !isset($_SERVER['PHP_AUTH_USER'], $_SERVER['PHP_AUTH_PW']):
                case $_SERVER['PHP_AUTH_USER'] !== config('myauth.basic.username'):
                case $_SERVER['PHP_AUTH_PW']   !== config('myauth.basic.password'):
                    header('WWW-Authenticate: Basic realm="Enter username and password."');
                    header('Content-Type: text/plain; charset=utf-8');
                    die('You do not have permission');
            }   
 
            header('Content-Type: text/html; charset=utf-8');
        }   
        return $next($request);
    }   
}

```

## Usage

If you'd like to verify user, change BASIC_AUTH_FLAG on env.
【爆速メモ】全身3Dデータをclusterのアバターにしたいとき

<img width="1004" alt="z01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/f28c2f92-2d83-8f6d-0ba1-ca3ecdcd1794.png">



---

動画だとこんな感じです【clusterにダイブしてみた】
https://youtu.be/_GJlFthi7gw

---

例によって、作り終えてからの爆速メモなので、
随時、画像追加などで更新していきます。

---

1.objファイルをBlenderで読み込み、向きを補正して、サイズを拡大する
その後、エクスポートする

---

2.MeshMixerに読み込み、ポリゴンの削減を行う。
その後、エクスポートする
***画像を追加しました***

2-1.
・MeshMixerにobjファイルを[インポート]で読み込みます。
・スクショはカラーのobjですが、unity上でテクスチャを貼るので、真っ白で問題ないです。
・下図の右下、頂点や三角形の項目がありますが、これをcluster用にゴリゴリ減らしていくわけです。
<img width="791" alt="a02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/fb91f087-5c63-9416-b852-511cea7e0d5b.png">

2-2.
・全選択をして、[選択]アイコンを押下します。(Macの場合、cmd + A で全選択をします)
<img width="537" alt="a03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/4335edbf-b10b-07a1-cf98-a755155761e0.png">

2-3.
・[編集]-[削減]を押下します。
<img width="557" alt="a04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/f6fb07d5-bc80-3f42-d42c-233d5fe57b8f.png">

2-4.
・[削減]ウィンドウの中の[パーセント]をいじります。
いったんこのまま50%で編集してみて、clusterでのサイズ感を確認したら何回もやり直すと良いと思います。
<img width="797" alt="a05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/8dcef858-d0b7-abff-0c7c-d3f1bbbbf54f.png">

2-5.
・下図のように、[頂点]と[三角形]が減りました。
<img width="393" alt="a07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/cf9e681e-51c5-c8f2-6bd1-5ef3caa1b3c6.png">

2-6.
・つづいて、減らした分だけ滑らかにします。
・[編集]-[再メッシュ]を押下します。
・なお、[頂点]と[三角形]に変化はありません。
<img width="499" alt="a08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/dea18599-7ef4-6ab9-eb65-01ce44615307.png">

2-7.
・最後に、blenderでゴリゴリに減らせるようエクスポートしておきましょう。
<img width="221" alt="a99.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/80bdae38-74dd-9ae2-0d2f-956769417001.png">

---

3.再度Blenderに読み込み、[モディファイアーを追加]して、[デシメート]を行い、ポリゴン数をさらに削減する。
※Blenderは最新版の2.82をインストールしました。
※最終的に32000以下になれば良いのです
<img width="1436" alt="z02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/ff41dc56-f09b-c899-e474-d7ce317d9c71.png">
<img width="781" alt="z03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/38e192de-7f64-0d41-bd46-c0d4276bafcd.png">
<img width="365" alt="z04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/6e33b288-7dcb-092d-d34d-27174b3af81d.png">
<img width="362" alt="z05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/8258583a-8da5-cd37-4fcb-3e53ea7f6783.png">


4.mixamoにアップロードして、リグの設定をして、アニメーションを確認して、T字ポーズでfbx(unity用)でダウンロードする

5.unityは、VRMパッケージがインストールされていること

6.unityでmixamoのfbxデータのアニメーションタイプをHumanoidにしてApplyする。
Configure Avatarでボーンにエラーがないことを確認してDoneする。

7.fbxデータをsceneに出して、positionはオールゼロにする

8.マテリアルを新規作成して、3Dスキャンのデータで作成されたpng画像をマテリアルに入れる

9.scene上のfbxデータに、マテリアルをアタッチする

10.UniVRMでいったんエクスポートする

11.Scene上のfbxデータは削除して、UniVRMでエクスポートされたvrmデータをScene上に出す

12.positionはオールゼロで、再度UniVRMでエクスポートする

13.最後にエクスポートされたvrmデータをclusterのアバターとしてアップロードする
Railsでページ毎にsubmitの表記を変えたい

## submitボタンの表記を変えたい
submitボタンを実装した場合、デフォルトの日本語表記は下記のような形で表示されます
（色付けなどはCSSで加工済み）

<img width="695" alt="スクリーンショット 2020-03-20 14.09.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531549/73aae0da-ae88-db6a-c06a-724b3a4b6dd9.png">

'登録する' というのがデフォルトのsubmitボタンとなります。

例えば、作成しているアプリで商品出品するページでは当然、'出品する'という表記にしたいですよね。
しかし、商品を編集して更新する場合は、'出品する'だと違和感があるので
'更新する'と表記をしたいところです。

しかし、出品も更新も同じフォームを流用しているので
分岐分けで記入する必要があるところになります。

単純にsunmitボタンのテキストを変えたい場合なら
`<input type="submit" value="出品する">`
を使えば表記は変わるわけなのですが、上記のように分岐わけさせたいときにどうするべきか。
出品と更新のページを別々に作って、各々でテキスト表記を変えるという手段もできますが
メンテナンス上、ほぼ同じ記述のコードのファイルが増えてしまうのは避けたいところです。

## ja.ymlを利用して分岐させる
ja.ymlといえば、英語表記を日本語化させる指定を記述する場所なのですが
こちらでアクション毎にsubmitの表記を指定させることができます。

まずはi18nの導入が必要なので参考先にあるページを参照に導入を済ませておいてください
[[初学者]Railsのi18nによる日本語化対応]
(https://qiita.com/shimadama/items/7e5c3d75c9a9f51abdd5)

## `config/locales/ja.yml`に記述する
```ja.yml
ja:
  helpers:
    submit:
      create: "出品する"
      update: "更新する"
```
このように記述をするとcreate下のsubmitは出品すると表示され
update下のsubmitは更新すると表示されるようになります。

実際にcreate時はこのように変更がかかります。
<img width="694" alt="スクリーンショット 2020-03-20 14.09.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531549/4e0682f9-a5b9-b13f-25f3-79cea70fc846.png">
update画面も同様に記述した通りの変更がかかります。

これでhtmlをcreateとupdateで別々に表記を分ける必要がなくなるので
ファイルを増やすことなく分岐して表示させることができます。




## 参考先
[[初学者]Railsのi18nによる日本語化対応]
(https://qiita.com/shimadama/items/7e5c3d75c9a9f51abdd5)

http://api.rubyonrails.org/classes/ActionView/Helpers/FormBuilder.html#method-i-submit
2度目のpauseは止まらない

ジョジョっぽいタイトルになってしまいましたが、batのpauseについてです。

batでpauseコマンドを使うと、「続行するには何かキーを押してください . . .」という
メッセージが表示されて、一時的にbatが停止するのは周知の事実かと思いますが、
pauseコマンドを2連続で利用すると、仕様上2つ目のpauseが停止しないことがあるのはご存知でしょうか。

テスト用にこんなbatを書いてみました。
```
pause
echo 1
pause
echo 2
pause
echo 3
pause
echo 4
pause
echo 5
pause
```
実行して、「続行するには何かキーを押してください . . .」が表示されたら「Enter」キーを押下していきます。

6回止まりますね。

次に同じbatを実行して、「続行するには何かキーを押してください . . .」が表示されたら「→」キーを押下していきます。

なんと3回しか止まりませんでした。

不思議です。

調べてみると、賢者が回答していました。
https://oshiete.goo.ne.jp/qa/2702669.html

>おそらく、空白やEnterや英字でなく、カーソルキーとかファンクションキーなどを押したのでしょう。
>それらのキーではキーコードが2バイトなのでPAUSEコマンドを2つ分前に進めてしまいます。

「続行するには何かキーを押してください . . .」ということでしたが、
2バイトのキーコードを押したら駄目なのでした。

終わり。
IBM Cloud Load Balancer(ICLB)+Activity Tracker with LogDNAでログ出力

#1. はじめに

[IBM Cloud Load Balancer(ICLB)にはActivity Tracker with LogDNAにログを出力する機能がある](https://cloud.ibm.com/docs/loadbalancer-service?topic=loadbalancer-service-data-logging)みたいなので、試してみた。結論から言うと、現時点での出力内容はそんなに役に立たないと思う。しかし、将来的に出力内容が豊富になる可能性もあるので、いちおう記録も兼ねて残しておく。

#2. ログ出力を有効化させる手順

##2-1. **「Dallas DC」**でのActivity Tracker with LogDNAの購入
東京DCで利用しているICLBのログは、全てDallasのActivity Tracker with LogDNAに送られている。東京DCで購入したActivity Tracker with LogDNAには転送されないので注意。


##2-2. 「platform service logs」対象への指定

OSのログを監視する場合には、Activity Tracker with LogDNA用のAgentを導入し、Agent経由でログを収集するというのが一般的ん手法であるが、IBM Cloudのサービス側でLogDNA機能に対応していた場合は、この「platform service logs」対象のインスタンスにログが送付される。
Activity Tracker with LogDNAは１つのRegionに複数注文することはできるが、platform services logsはRegion内で１つのActivity Tracker with LogDNAインスタンスしか指定できないことに注意。
https://cloud.ibm.com/docs/Log-Analysis-with-LogDNA?topic=LogDNA-config_svc_logs
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62127/ff6dcec9-1773-b248-2db2-30809232c946.png)
<img width="1270" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62127/d20203e9-0919-9ac4-fb81-2d6e75e9670e.png">




##2-3. ログ出力設定の有効化（デフォルトではOFFになっている）
<img width="1272" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62127/300fbd17-95e9-c119-2192-4b450747624f.png">



#3. ログの確認

ICLB経由でWebサーバーにアクセスした後、LogDNAのコンソールで出力を確認してみる。`cloud-load-balancer`でフィルタリングするとわかりやすい。

- フィルタリング方法<br><img width="1279" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62127/6b4be274-d4f1-dddf-9ae6-5254ddb7cb31.png">
- アクセスログの例<br>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62127/d622843e-3679-8051-f474-92d71a6c2f31.png)
- Backend Serverがダウンしている際の例<br><img width="957" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62127/a64ae53d-d5f5-f2de-415b-f1c53dba9abb.png">


ちょっと使いづらいなと思ったのは以下の点

1. ログが出てくるのが遅い場合がある。ICLBにアクセスしてからログが出てくるまでに、早い時は数分以内で出力されるが、１時間以上かかっていた時もあった。
2. source IPがGDPR対応のためにマスキングされて、`xxx.xxx.xxx.xxx`となっている。結局どのIPからアクセスが来たのかはわからない。これは[IBM Cloud docs](https://cloud.ibm.com/docs/loadbalancer-service?topic=loadbalancer-service-data-logging)にも書かれている。結局、どの時間にどのICLBインスタンスにアクセスが来たか、ぐらいしかわからないのであれば、それほど有り難みはないと思う。

>loadbalancer-dal09-323716-880632-975820 is the load balancer name, and dal09 is the data center.
323716 is the account ID. 880632 is the load balancer ID. 975820 is the load balancer instance ID.
xxx.xxx.xxx.xxx is a public IP which has been masked for GDPR compliance.

なお、ICLBのinstance IDは、`slcli loadbal list`で確認可能。
VJのPCでクソ重要な設定

VDMX5やModul8などのアプリを使って映像プレゼンテーションするときに、やっておいた方が良い設定を解説します。
このアプリに限らず映像プレゼンするときにはクソ重要な設定です。

# VDMX5とModul8って何？

スクリーンに自由自在に映像プレゼンテーションするためのアプリ
例えば結婚式や、DJやライブの音楽イベント、学園祭で映像の演出をするのに使われるアプリ
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588661/fb22304c-a1c9-87e0-9f33-a2452dc363a7.png)

https://www.youtube.com/watch?v=Xm2dnBkzsfQ

https://vidvox.net/

http://www.garagecube.com/modul8/

https://www.youtube.com/watch?v=S17Roka6Rls

# 画面ロックボタンの無効化
これ非常に重要！
Touch IDキー(電源キー)を無効化する方法。ターミナルから
```terminal
defaults write com.apple.loginwindow DisableScreenLockImmediate -bool yes
```
https://infornography.blue/mac-disable-screen-lock/

なお上記で無効化しても、長押しで強制電源Offは無効にはならないので安心
願わくば、わざわざターミナルでコマンド打たなくても、システム設定から簡単に設定できるようになってほしい

# 出力画面のメニューバーを消す

これもメチャクチャ重要！
これをやらないとスクリーンに出力した映像にメニューバーが映ってしまう

システム設定を開き、「デスクトップとDock」の「ディスプレイごとに個別の操作スペース」をOFFにする
![スクリーンショット 2023-12-25 20.36.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588661/24cfd9ce-8fb8-b815-b877-a667135e0290.png)

ログアウトして再ログインすると設定が有効になる

# 壁紙をクリックしてデスクトップを表示するを無効に

こいつも多分やっといたほうがいい設定
![スクリーンショット 2023-12-26 1.25.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588661/a2f0966d-0d64-d4cc-c35c-0fbe91cbfdb6.png)

# トラックパッドジェスチャの無効化

この辺のジェスチャは無効化しておきましょう
![スクリーンショット 2023-12-27 1.34.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588661/b5e05085-6303-2054-694f-e3911eb0321d.png)
MacにNand2Tetrisのハードウェアシミュレータをインストールする

MacにNand2Tetrisのハードウェアシミュレータをインストールします。


以下のサイトの「Download the Nand2tetris Software Suite Version 2.6 (about 730K).」をダウンロードします。

https://www.nand2tetris.org/software#comp-j92z7kw7

次に、JavaのJDKをインストールします。JREじゃ動きません。ご注意を。

以下のサイトからダウンロードしてください。

https://www.oracle.com/java/technologies/javase-jdk14-downloads.html

最新バージョンがJDK14とは異なっている場合は、以下のサイトより辿ってください。

https://www.oracle.com/technetwork/java/javase/downloads/index.html

JDK Downloadよりダウンロードできます。

インストールウィザードに従ってインストールしてください。

<img width="732" alt="スクリーンショット 2020-03-20 14.15.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/53172/fe3da1cc-8de8-b9f8-72e7-3165fd3ea3aa.png">


```
$ java --version
java 14 2020-03-17
Java(TM) SE Runtime Environment (build 14+36-1461)
Java HotSpot(TM) 64-Bit Server VM (build 14+36-1461, mixed mode, sharing)
```

ダウンロードフォルダにNand2Tetrisソフトウェアスイートのファイルがあるはずなので、ターミナルを起動し、toolsフォルダに移動してください。

```
  $cd Downloads
  $cd nand2tetris/
  $cd tools
```

以下のコマンドでハードウェアシミュレータを起動できます。

```
$sh HardwareSimulator.sh
```

起動しました。

<img width="1136" alt="スクリーンショット 2020-03-20 14.11.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/53172/bd9cdd53-6e7b-d8bd-c1b3-c731ac2b9046.png">

以上です。ハードウェアシミュレータを別の作業フォルダに移動すれば完了です。
Vulkan TutorialのRust版をやってみた 〜目次〜

# Vulkan入門
[Vulkan](https://jp.khronos.org/vulkan/)は雑に紹介すると新しい技術にも対応したOpenGLのようなAPIです。ただOpenGLよりもかなりややこしくなっているように感じました。幸いにも公式(?)のチュートリアルとして、

* [LunarGのVulkan Tutorial](https://vulkan.lunarg.com/doc/sdk/1.2.131.2/linux/tutorial/html/index.html)
* [vulkan-tutorialのVulkan Tutorial](https://vulkan-tutorial.com/)
    * [Rust版](https://github.com/bwasty/vulkan-tutorial-rs)

があったので備忘録がてら書き残していきます。

## 開発環境
* OS: Arch Linux 5.5.9-arch1-2
* CPU: Intel Core i7-8700K
* GPU: GeForce GTX 1060 6GB
* Rust:
    * rustc: 1.42.0
    * cargo: 1.42.0
* Vulkan Instance Version: 1.2.132以降
* GitHub: [こちら](https://github.com/KBone12/vulkan-tutorial)

ちなみに、Arch Linuxでは`pacman -S vulkan-devel`でVulkanの開発に必要なものをインストールできます。

## 目次
1. [準備編](https://qiita.com/kbone/items/4ee5cddb7ce9f4bda150)
2. [Window編](https://qiita.com/kbone/items/9cefcb960fc1f58e9131)
3. [グラフィックパイプライン編](https://qiita.com/kbone/items/398c8d3099c50e00f9dc)
4. [描画編](https://qiita.com/kbone/items/fc530320d1922bfb98d9)
Vue.js入門編 ~コンポーネントについて ~

#コンポーネントとは?
<font color="Green">コンポーネント</font>は名前付きの再利用可能な Vue インスタンス。
いわゆるVue.jsでインスタンスを生成してそれをHTMLに反映させるための
<font color="Green">新しい箱</font>のようなイメージですね。

**では実際に成功品とコードを見てみましょう。**

<img width="1440" alt="スクリーンショット 2020-03-20 13.42.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517237/1b5e9504-45da-9e53-80ca-389980f2c975.png">
<img width="451" alt="スクリーンショット 2020-03-20 13.43.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517237/c3c7e0a8-65b5-6a2b-462c-7d01232f7c48.png">

**①Errorメッセージの表示**
**②クリックされた回数を表示**
**以上２つを説明していきます**


```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
</style>
<body>
    <div id="app"> <!-- こちらがerrorメッセージ -->
        <alert-box>
            入力されていません
        </alert-box>
        <!-- コンポーネント化されているため反映される -->
        <alert-box>
            入力されていません
        </alert-box>
    </div>
    <!-- クリック回数の取得 -->
    <div id="components-demo">
        <button-counter></button-counter>
    </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</body>
</html>
```

`Id`要素にはそれぞれ`app`と`components-demo`が与えられているのが見てわかるかと思います。
ちなみに、`<alert-box>`と`<button-counter>`は実際にHTMLには存在せず、
コンポーネントによって作られたインスタンスになります。


それでは実際にVue.jsでどのようにインスタンスを生成しているのか見てみましょう。
### ①Errorメッセージの表示
```js

Vue.component('alert-box',{ //alert-box というコンポーネント作成
  template:
    `<div class="alert" v-on:click="caution"> //htmlを記述
       <strong>Error!</strong>
       <slot></slot>
     </div>`,
     methods:{ //メソッドを定義
       caution: function(){ 
         alert('クリックされました') //アラートメッセージの表示
       }
     }
   });
 
var app = new Vue({ //id要素の取得
  el: "#app"
});
```
### ②クリックされた回数を表示
```js

Vue.component('button-counter',{ //button-counter というコンポーネント作成
  data: function(){
    return{ //初期値
       count:0
          }
  },
  template: 
    `<button v-on:click="count++"><p>クリックされた回数は {{ count }} です</p></button>`
  });

 var button = new Vu({ //id要素の取得
   el: '#components-demo'
 });
```

以上の記述でこちらが完成します。

><参考文献>
https://jp.vuejs.org/v2/guide/components.html
https://www.youtube.com/watch?v=vD7fZY2F_Kc&list=PLh6V6_7fbbo-SZYHHBVFstU2tp0dDZMAW&index=8
[scss]hamlへの反映方法は２種類あった  備忘録

今までscssのhamlへの反映方法といったら
`application.scss`へ@import記述のみと思っていましたが。

実はそんなことをしなくてもコマンド入力で作成したscssには
自動的に反映される記述が入っているんです。
知りませんでした。。。
コメントアウトされ得た以下の３行があるとOKらしい

```rails:scss
// Place all the styles related to the reset controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
```

ですので、scssの反映方法を以下２種類をまとめたいと思います

##コマンドで作成する方法

***importいらないコマンド存在したー！！！***

```rails:ターミナル
$ rails g assets 作成したいファイル名
```
以上です。
あとはscssに記述したものは自動的にhamlに反映されます。

## 手動でファイルを作成する方法
右クリックでファイル作成をした場合scssにimport記述は自動生成されませんので
`application.scss`にimportしてhamlにscssが当たるようにしましょう。

***やり方***
・hamlに反映させたいscssのファイル名をアンダーバー「 _ 」始まりにします。
・`application.scss`にimportします。
・終わり

***記述参考は下記***

```ruby:application.scss
@import "home";
@import "いれたいscssファイル名（アンダーバーは入れない）"; ⬅︎終わりは必ずセミコロンを入れる

#assetsの中でもフォルダの異なるものはURLをちゃんと記載しないと反映されない
@import "config/reset";
@import "フォルダ名/ファイル名";
```

## 参照記事
[Railsドキュメント](https://railsdoc.com/rails)

## 終わりに
自分のいた学校は極力コマンドを使用しない学校でしたが
コマンドはコマンドで別の仕様があることを今回知りました。
アウトプットもそうですがインプットも必要。
人との情報交換は本当に大事だなと改めて感じました。

初学者な為、記事に不備やアドバイ等ございましたらご連絡頂けますと幸いです。
最後まで読んできただきありがとうございます。
[Docker][apache][CakePHP]The requested URL was not found on this server.

#はじめに

↓cakePHP apache mysql環境作成一連作業書いてみました！ヽ(´▽｀)/
https://github.com/sachiko-kame/docker_cakePHP

結構あやふやな回答ですが、あまりパッと見つからないので書いてみました。**かなりメモ的な感じです**

現在の環境ざっくり:blush:気が向いたらもう少しちゃんと調べて書きます。
Docker
apache
CakePHP
でやってます。

❗️対象
❗️ちなみに一回はパス表示までできている方対象です。
❗️その他ルートは表示できている方対象です。
❗️apacheファイルの設定などは既に終わっている方。

#上記エラー解決

※rewriteはapacheでcakePHP使うなら必須モジュールをです。
参考:https://book.cakephp.org/4/ja/installation.html
<IfModule mod_rewrite.c>
mod_rewriteと言うものがないとリライトが機能しないので、、、

・apacheコンテナに入る
**********のbashoniapacheコンテナのidをいれる。
コンテナIDは`$docker ps`で確認できます。

```
$ docker exec -i -t ********** bash
```

・Dockerapacheコンテナに入って、確かルート部分で

```
$ a2enmod rewrite
```

```
$ service apache2 restart
```

:sweat:この記述普通はDockerfileに書く感じかな、、、

・Dockerのコンテナから出て以下コマンドうつ←<font color=red>**ここポイント**</font>

```
$ docker-compose up --build -d
```
NeoMuttのsidebarのmailbox名が'imaps://...'で埋まって困った 

NeoMutt 2020-03-13に更新したら，sidebarのmailbox名が`imaps://...`で埋め尽くされてフォルダ名が見えなくなりました．

以下で解決

```:muttrc
set sidebar_short_path = yes
```
[React]uniq key がないときの `Each child in a list should have a unique "key" prop.` の回避方法

サンプル作ってたり、データにユニークな key がないときに出る `Each child in a list should have a unique "key" prop.` のエラーが面倒だなと思ってたんですが、 `React.Children.toArray` で回避できる。

```tsx
<>
  {React.Children.toArray(items.map(item => <div>{item.title}</div>))}
</>
```

> データ構造が非公開の children を平坦な配列として返し、それぞれの要素に key を割り当てます。

https://ja.reactjs.org/docs/react-api.html#reactchildrentoarray

便利！
windows10のnumlockが解除される問題の対処方法

自分じゃないんですが、同僚がwindows7のサポート切れに伴い、
windows10への移行作業をやっていて、numlockが何故か解除されてしまう事象に
四苦八苦していました。
対処について教えてもらったので、ブログに書いた内容をQiitaにもまとめておきます。

まず、先に結論を書いておきますと、numlockを有効に設定したはずなのに解除されてしまうのは、
「高速スタートアップを有効にする」のバグです。

なので、解消方法としては、「これを無効にする」の一択です。

いやいや、そもそもnumlockの設定はbiosとレジストリにあってだな...
という話はわかりますが、そもそも「高速スタートアップを有効にする」のせいでnumlockの有効無効を
制御できてませんので、biosで設定しようが、レジストリで設定しようが、
起動したらあるタイミングでいつのまにか無効になっています。

なので、調べても無駄なので、「高速スタートアップを有効にする」を外してください。


あと、一応numlcokに関連した内容を下記に書いておくので参考にしてください。

・そもそもnumlockとは
numeric lockの略です。number lockではありません。
だいたいキーボードの右の方にある、「テンキー」を制御するのに使います。
numlockが有効なら、数字が入力できて、無効なら矢印キーなどになります。

・起動時に有効にしたい
今回の話です。
とりあえず、「高速スタートアップを有効にする」を外してください。
あと、numlockの制御は、biosとレジストリにもあるので、そっちも変更してください。

・biosのnumlock制御
biosはメーカや機器によって違います。
参考にfujitsuのQAです。
https://www.fmworld.net/cs/azbyclub/qanavi/jsp/qacontents.jsp?PID=0609-7037

・レジストリのnumlock制御
適当に設定してください。
HKEY_USERS\.DEFAULT\Control Panel\KeyboardのInitialKeyboardIndicatorsの値
widnows10
2147483648（デフォルト）→2147483650（NumLock有効）または2（NumLock有効）

・numlcokの考え方
windowsのnumlockは端末自体の設定とユーザ単位の設定があるそうです。
端末起動してログイン画面に遷移した時のnumlockの状態が、端末自体の設定です。
その後、ユーザを選んでログインしたときのnumlockの状態が、ユーザごとの設定です。
同僚は、この組み合わせをひたすら試していましたが、最終的にはやっぱり制御できないという結論になりました。

・いやいや昔検証したけど、制御できましたよ
あるwindowsUpdateのバージョンでは改善されていたという記事がありました。
少なくとも、「2020/3時点の最新windowsUpdate適用状態」では、「高速スタートアップを有効にする」はバグってます。
迷わず設定を解除してください。

・同事象のmicrosoftコミュニティのQA
https://answers.microsoft.com/ja-jp/windows/forum/windows_10-hardware/windows-10/51d9ef71-7a56-4620-ac09-2c6bac544e52

こんな感じでwindows10への移行に苦労されている同業者の助けになれば幸いです。


以上
Route53のバックアップを取得する

# はじめに
Route53のゾーン情報をバックアップする方法を説明します。
バックアップはBINDのゾーンファイル形式でテキスト出力されます。
Route53はゾーンファイルのインポートが可能なので、Route53を別アカウントに引っ越すことになった場合にも利用できそうです。
## 手段
cli53を利用します。
https://github.com/barnybug/cli53
## 検証環境
今回の記事を書くにあたり、以下の環境で確認を行いました。

- バックアップスクリプト実行環境
    - Linux(CentOS8)
        - aws cli 2.0.4
        - cli53 0.8.17
- 対象のDNS
    - AWS(Route53)
        - パブリックホストゾーン
        - プライベートホストゾーン

# 事前準備
## AWS側の準備
### IAMユーザの作成
Route53の情報を出力できるユーザを作成します。
今回は「AmazonRoute53ReadOnlyAccess」のポリシーをアタッチしました。
## Linux（バックアップスクリプト実行）側の準備
### AWS CLIのインストール
手順は省略します。
AWSの操作に問題がないかを確認するだけなので AWS CLI自体は必須ではありません。
### AWS CLIの認証情報を保存


```
# 「Access Key ID」と「Secret Access Key」を登録します
aws configure

# Route53の情報が取得できるかを確認します
# （例）ホストしているゾーンの取得
aws route53 list-hosted-zones --query "HostedZones[*].Name" --output text
```

### cli53のダウンロード
https://github.com/barnybug/cli53/releases/latest から最新のバイナリをダウンロードします。

```
wget https://github.com/barnybug/cli53/releases/download/0.8.17/cli53-linux-amd64
chmod 555 cli53-linux-amd64
mv cli53-linux-amd64 /usr/local/bin/cli53
```
### コマンドのテスト
以下のコマンドを実行して出力結果を確認します。

```
cli53 export <ホストゾーン ID>　または、
cli53 export <ドメイン名>
（例）
cli53 export example.com
```
# バックアップスクリプトの作成

```
#!/bin/bash

# ホストされているドメインのリストを取得して変数に代入
domain_list=$(cli53 list | sed -e '1d' | awk '{print $2}')

# ドメイン毎に別ファイルでエクスポート
for i in ${domain_list}
do
  cli53 export $i > /tmp/$i`date '+%Y%m%d'`.txt
done
```

※date でファイルに日付けを付与しています
※ファイルの保存場所は /tmp です
※複数のAWSアカウントを管理している場合はプロファイルの指定が可能です

```
（例）
cli53 export example.com --profile default
```
- --profileのオプションを使うと複数アカウントの操作が可能です。 for のループを2重に回す（domain_listの取得もループで回す）と取得ができるでしょう。


# おわりに
AWS CLI(aws route53 list-resource-record-sets)で取得できるjsonやtable、yamlの形式では情報がわかりにくかったので、cli53を使用しました。

## 参考
Route 53 で設定した DNS レコードをエクスポートする
https://qiita.com/tmtysk/items/6ca808dd9ed13abc1992

### 追記
2020/03/23 domain_listをforで取得する部分を追記しました。
アプリづくりを通して、感染症を考えてみた ~タスク分割編~


コロナです。

## アプリを作り始める前にあたって

今回は、いくつか初めてやるものがあって一度には終わらせることができないので
タスクを分割して数週間に分けて作業をしていました


## タスクの運用方法

普段の業務とは別の内容なので
「鈴江が個人的」に合った方法として以下のように勧めていました

0. 頭の中か開発するときに必要な要素を洗い出す

<img width="723" alt="product_brain_image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45396/285226c5-14a2-a558-a716-2fac0891d88d.png">


1.タスク管理ツールに作業を登録する

<img width="890" alt="task_regist.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45396/a0095a31-b723-43e6-0754-90558ea18881.png">


2.１スプリント＝一週間で見栄えを浴するのか、素材を作るのかなど週末に出来上がっているイメージを書き起こす

<img width="941" alt="document_about.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45396/658c0818-f775-5209-2a18-7a0b690bc759.png">



3.一週間程度でこなせる内容を作業する一覧に入れる

<img width="913" alt="manage_sample.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45396/c7ade65e-66b5-30f8-7745-773ac3e33baf.png">


4.上から下の順番で作業を進める

5.週末かよく週明けに、その週で作業をしていた時の動画やアプリを見直して自分なりの感想と、改めて必要になったタスクを洗い出す

6.改めて必要になったタスクと既存タスクを比較して、優先順位をつけなおす

## 個人的にやらなかったこと

1.各タスクに「重み」や「優先度」はつけるけど、締め切りはつけない

「今週いっぱい」はあるけど他は生活や仕事等々とのバランスを見て未記載にしました


## 個人的にやったこと

1.機能実装をするたびに、動画撮影やビルド

実際の体感として、再度触ってみたときに極度のずれがないかを確認
小さい単位で成果物を確認していくことで、自分で進められているなというイメージ

## 一通り通してみて

1.色々な空きタイミングなのもあって、実際に花粉データを考えたり可視化までつくることができた。

2020/02月末時点
https://www.youtube.com/watch?v=SsAJ2WlWBk8

2020/03/20現在
https://www.youtube.com/watch?v=1JMJzsPVlTU

2.LTやデモとして見せられるところまではやれたなという感想

3.仕事じゃなくても「俺は雨が降るのかテレビで確認しない」というひとは自分の愛着があるアプリという手段はありそう
Pythonのバッチ処理を強化した

## 前回のバッチ処理をよりリアルに

少し知識が増えたので使ってみました

```batch.py
# handling

def test1():
    print('---------- test start ----------')
    try: x = 1 / 0
    except ZeroDivisionError as ze: print(ze)

def test2():
    try: raise Exception('Custom exception message')
    except Exception as e: print(e)
    finally:
        print('---------- test complete ----------')
        print('\r')

# ------------------------------------------------------------------

# select records from DB
def select(conditions):
    records = list()
    records.append(conditions)
    records.append('record1')
    records.append('record2')
    records.append('record3')
    return records

# update entity
def update(entity):
    v = len(entity)
    if v == 0: return
    message = 'Successfully updated ' + str(v) + ' column'
    print(message if v == 1 else message + 's')
    print([v for v in entity])

# API custom exception
class CustomException(Exception):
    pass

# API. Get response.
def api(request):
    if request.count('0') >= 1: raise CustomException('request parameter check error')
    response = request
    request.append('response')
    return response

# batch job
def batch():
    print('---------- batch start ----------')

    # '0' is exception, others are success.
    targets = select('0')

    try: response = api(targets)
    except Exception as e:
        print(e)
        return

    update(response)

    print('---------- batch complete ----------')
    return

if __name__ == '__main__':
    test1()
    test2()
    batch()

```

## 結果

```失敗Ver.
---------- test start ----------
division by zero
Custom exception message
---------- test complete ----------


---------- batch start ----------
request parameter check error
```

```成功.
---------- test start ----------
division by zero
Custom exception message
---------- test complete ----------


---------- batch start ----------
Successfully updated 5 columns
['01', 'record1', 'record2', 'record3', 'response']
---------- batch complete ----------
```
SpringBootのTomcatのPostサイズ制限にハマった人へ

# SpringBootのTomcatのPostサイズ制限にハマった人へ

## 背景
Tomcatを使ったことがある人なら誰しもPostデータサイズのデフォルト制限(2MB)に引っかかって、Tomcatの設定を見直したことがあると思う。
私も以前に同じ経験をしたことがあり、そのときにTomcatのドキュメントを見直して「わかりにくいなー」と思った記憶があるが、そのときは特に記事にするほどでもないと思い、自分の記憶に留めておくだけで終わらせた。
けどつい最近、SpringBootでも同じ制限にひっかかったので、今後のためにまとめることにした。

## 素のTomcatの場合
本題の前に余談。
SpringBootを使わず、素のTomcatだけを使う場合は、`$CATALINA_HOME/conf/server.xml`に`maxPostSize`の指定があり、この値を変更することで対処する。maxPostSizeのデフォルトは2MB。
どうでもいいが、公式ドキュメントの記載箇所がわかりにくいと思うのは私だけ？　公式サイトに検索機能がほしいよね。

- Tomcat 公式ドキュメント →「Configuration」→「HTTP1.1」
  - https://tomcat.apache.org/tomcat-8.5-doc/config/http.html

```xml:conf/server.xml
<Connector port="8080" protocol="HTTP/1.1"
            connectionTimeout="20000"
            redirectPort="8443" 
            maxPostSize="2097152"/> <!-- ←ここに設定 -->
```

## SpringBootの組み込みTomcatの場合
今回の本題。
ご存知のとおり、SpringBootは内部にTomcatが組み込まれており、ビルドしたjarファイルだけで簡単にウェブアプリケーションを動作させることができる。
この内部に組み込まれているTomcatにも、デフォルト2MBのPostデータサイズ制限が存在する。
しかし、SpringBootの組み込みTomcatには`server.xml`が存在しないため、素のTomcatとは違う方法で設定をしなければならない。

結論から言うと、`application.properties`に以下の項目を設定することで対処できる。

```properties
server.tomcat.max-http-form-post-size=2MB
server.tomcat.max-swallow-size=2MB
spring.servlet.multipart.max-file-size=1MB
spring.servlet.multipart.max-request-size=10MB
```

- SpringBoot公式ドキュメント（最新版）
  - https://docs.spring.io/spring-boot/docs/current/reference/html/appendix-application-properties.html#server-properties

### ハマりポイント１：Content-Typeによって設定すべきプロパティが違う
注意すべきなのは、Post時の`Content-Type`が`application/x-www-form-urlencoded`（HTMLのformからsubmitしたときなど）の場合は、`spring.servlet.multipart.max-request-size`の**設定が効かない**点だ。Qiita上でも「`spring.servlet.multipart.max-request-size`設定すれば解決」という記事が多く、以下のStack Overflowの記事を見つけるまで気づけなかった。

> - https://stackoverflow.com/questions/33232849/increase-http-post-maxpostsize-in-spring-boot
>> If you are using using x-www-form-urlencoded mediatype in your POST requests (as I do), the multipart property of spring-boot does not work. If your spring-boot application is also starting a tomcat, you need to set the following property in your application.properties file:


### ハマりポイント２：古いSpringBootではプロパティ名が違う
今現在のSpringBoot最新版(v2.2.5)では上記のプロパティでよいが、古いバージョンだとプロパティ名が違うことがある。（自分もこれでハマって解決するのに時間がかかった）

```properties
## server.tomcat.max-http-form-post-size=2MB   # v2.2.5の場合はこっち
server.tomcat.max-http-post-size=2MB           # v2.1.6などはこっち
```

- たぶんこれが関連→ https://github.com/spring-projects/spring-boot/issues/18521
  - たしかに勘違いしやすいと思う。だからこの記事を書こうと思った。

ちなみに、`spring.servlet.multipart.max-file-size`と`spring.servlet.multipart.max-request-size`についても、かなり古いSpringBootではプロパティ名が違う(`spring.http.multipart.max-file-size`だったりする)ので注意。

# まとめ
今回の経験から学んだ教訓

    ちゃんとSpringBootのバージョンを確認してからプロパティを調べよう

当たり前のことだけどね。
RSpecで時間周りの備忘録

# :lock: 時間の操作

[Timecop](https://github.com/travisjeffery/timecop)を使って止めた時間の中でテストするのが良い.
Railsには [ActiveSupport::Testing::TimeHelpers](https://api.rubyonrails.org/classes/ActiveSupport/Testing/TimeHelpers.html)でも似たことができるが、ネストしてると期待通り動かないとか細かい点でTimecopの方がおすすめです.

## ミリ秒を丸める
**DB等でミリ秒が保持できない**場合もあるのでテストが失敗することがある.
事前にミリ秒を丸めて扱っていた方が良い.

```rb
# Good
let(:now) { Time.current }

# Best
let(:now) { Time.current.change(usec: 0) }
```
    
### Timecopの場合

```rb
# Bad
Timecop.freeze(Time.current)

# Best
Timecop.freeze
Timecop.freeze(Time.current.change(usec: 0))
```

## ⏳Timeout
RSpecを書いていると思いのほか時間がかかる処理が紛れ込んでしまう.
中には何かしらのタイミングで異常に時間がかかる処理もあったりする.

タイムアウトする様にすることで不安定なテストを特定することはできます.
ただし不安定なテストを改善するわけでじゃないので、無闇にタイムアウトの時間を伸ばすのはよくない.
後、実行環境が非力だとタイムアウトが多発するのにも注意が必要です.


```rb
require 'timeout'

it do
  # 5秒経過すると `Timeout::Error` がraiseされる
  Timeout::timeout(5) do
    expect{ subject.execute }.to_not raise_error
  end
end
```

### メタデータで制御

テストが少ないうちは大して気にならないが、ある程度の数になるとCIの実行時間が問題になってくる.
そこでRSpecにタイムアウトを仕掛けられる様にした.

`spec/support/timeout.rb` に以下のコードを配置する

<details>
<summary>timeout.rb のコード</summary>
<p>

```rb
require 'timeout'

class RSpecTimeoutError < Timeout::Error
  def message
    'execution expired by RSpec'
  end
end

RSpec.configure do |config|
  rspec_timeout = ENV.fetch('RSPEC_TIMEOUT', 0).to_i
  config.around(:example) do |example|
    sec = example.metadata[:timeout] || rspec_timeout
    next example.run if sec <= 0
    Timeout::timeout(sec, RSpecTimeoutError) do
      example.run
    end
  end

  config.backtrace_exclusion_patterns << /#{Regexp.escape(Pathname.new(File.expand_path(__FILE__)).relative_path_from(Rails.root).to_s)}/
end
```
</a>
</details>

## 使い方

タイムアウトの指定は２種類あり、それぞれ値にはタイムアウトする秒を指定します.
ただし`0`を指定した時はタイムアウトは無効になります.

### 環境変数を指定
`RSPEC_TIMEOUT` を指定する事でタイムアウトが有効になります.
ローカル等の通常の環境ではタイムアウトはせず実行してもらいたいためです.

CI等の全てのテストを実行するような場合のみ環境変数を指定すると良いでしょう.

```sh
RSPEC_TIMEOUT=20 rspec
```

### メタデータを指定
特定の箇所だけタイムアウトを制御したいときは[メタデータ](https://relishapp.com/rspec/rspec-core/docs/metadata/user-defined-metadata)を使います.

```rb
it('foo', timeout: 30) { ... }
```
Excel VBAからOracle DBのデータを取得する(oo4oもODBCも使わない)

# はじめに
Excel VBAからデータベースに接続し、データを取得、Excelに反映したいということは業務上とよくあると思います。
こういったとき一般的にはoo4oやODBCを使用すると思います。
しかし、セットアップされているoracle clientが64bit版の場合は上記の手法が使用できません。

そこで今回誰もが思いつく回りくどい方法でExcel VBAからOracle DBのデータを取得、シートに反映してみたいとおもいます。
~~（32bt版ぐらい自由に入れさせてくれ）~~

# 方法
以下のような方法でやりたいこと実現します。

1. VBAで「実行したいSQL文」を記載したテキストファイルを作成する。
1. VBAでsqlplusを叩き、作成したテキストファイルを実行する。
1. sqlplusから吐き出したテキストファイルをExcelに取り込む

# ソース
取得で使用するSQLとか、Excelの出力セル・書式等は必要に応じて書き換えて使ってください。

```vb
Const tempDirectry = "D:\hoge\"     ' 作業ディレクトリ

Const tempSQLFile = "tempsql.sql"   ' sqlplusのコマンド
Const tempBATFile = "tempbat.bat"   ' 実行するバッチ
Const tempCSVFile = "tempcsv.csv"   ' 取得結果の一時ファイル

Const dbAccess = "hoge@piyo/fuga" ' 接続先の情報（ユーザー@TNS設定/パスワード)

Public Function oracleSelect()
    Dim obj As Object
    Dim sqlQuery As String ' 実行したいSQL文
    Dim csvBuf As String   ' csv出力をする際の一時領域

    ' 実行するSQL文の生成
    sqlQuery = "select * from hogehoge where piyopiyo = 'fugafuga';"

    'コマンドファイルの作成
    Open tempDirectry & tempSQLFile For Output As 1
        Print #1, "SET ECHO OFF"
        Print #1, "SET LINESIZE 32767"
        Print #1, "SET PAGESIZE 50000"
        Print #1, "SET HEADING ON"
        Print #1, "SET UNDERLINE OFF"
        Print #1, "SET NEWPAGE NONE"
        Print #1, "SET FEEDBACK OFF"
        Print #1, "SET COLSEP ','"
        Print #1, "SET TRIMSPOOL ON"
        Print #1, "SPOOL " & tempDirectry & tempCSVFile
        Print #1, sqlQuery
        Print #1, "SPOOL OFF"
        Print #1, "EXIT"
        Print #1, ""
    Close 1

    ' sqlplusを起動
    Set obj = CreateObject("WScript.Shell")
    Call obj.Run("sqlplus " & dbAccess & " @" & tempDirectry & tempSQLFile, WaitOnReturn:=True)
    Set obj = Nothing

    ' コマンドファイルを削除
    Kill tempDirectry & tempSQLFile

    ' CSVをExcelに出力
    Dim row As Integer ' 現在の出力行数。出力先のセル座標を特定するのに使用
    row = 0

    Open tempDirectry & tempCSVFile For Input As #1
        Do Until EOF(1)
            ' CSVの行単位で処理を回す
            Line Input #1, csvBuf

            ' 行をカラム単位に分割
            Dim cols As Variant
            cols = Split(csvBuf, ",")

            ' カラム単位で出力
            Dim col As Integer
            For col = 0 To UBound(cols)
                ' カラムのデータを転記する
                ' ここで書式の設定等も行うとExcelの見栄えが良くなる
                ActiveCell.Offset(row, col).Value = Trim(cols(col))
            Next col
            row = row + 1
        Loop
    Close #1

    ' CSVを削除
    Kill tempDirectry & tempCSVFile
End Function
```
laravel 外部からのPOSTを許可

suicreditのクレジット決済を導入したい。

決済完了後、
先方から当サイトへの戻りとしてPOST送信でリンク移動する。

つまり、普通のリンク移動でないので、POST送信を許可しないと以下のエラーが出る。

```

Symfony \ Component \ HttpKernel \ Exception \ MethodNotAllowedHttpException
No message

```

同一サイト内のPOSTならフォーム内に
` {{ csrf_field() }} `
と書くだけなのだが・・・。


ということで、外部から指定URLへのPOST送信を許可する方法。



# 指定URLへ、外部からのPOST送信を許可

```Http/Middleware/VerifyCsrfToken.php

    protected $except = [
        '/mypage',
        //
    ];

```



# vue.js で get でも post でも全て受け付けるように

```web.php

Route::match(['get', 'post'] ,'/{app}', function () {
    //本番になったら削除する
    \File::cleanDirectory(storage_path()."/framework/views/");
    return view('vue');
})->where('app', '.*');

```

これで外部からのPOSTも受けることができる。
他の人がpushしてくれたブランチをベースに開発を進めたい時

#はじめに
例えば作業者Aと作業者Bが一緒に作業してて作業者Aの人が```feature/create_user_table```ブランチを切ってpush(このタイミングでリモートブランチが作成されます)して、このブランチをベースに作業してくれって言われた時に作業者Bの人がそのブランチの修正をローカルに持ってくる方法

#やること
リモートブランチの一覧を以下コマンドで見る。

```
$ git branch -a
```

この時、チェックアウトしたいブランチが表示されていない時は、```git fetch```すると最新のリモートブランチの情報を取得できたりする。

```
$ git fetch
remote: Enumerating objects: 10, done.
remote: Counting objects: 100% (10/10), done.
remote: Compressing objects: 100% (6/6), done.
remote: Total 10 (delta 5), reused 8 (delta 4), pack-reused 0
Unpacking objects: 100% (10/10), 2.22 KiB | 252.00 KiB/s, done.
From github.com:***/***
 * [new branch]      feture/create_user_table -> origin/feture/create_user_table

```

なんかこんな感じのが出ればオッケーです。

後は、これをベースにローカルブランチを作成。
```git checkout -b ローカルブランチ リモートブランチ```

今回の場合ならこれでいけます！

```
$ git checkout -b feture/create_user_table origin/feture/create_user_table
```

これで```git log```で修正履歴を確認した時に```origin/feture/create_user_table```の修正が反映されてるのが確認できればオッケーです！
n番目の素数を表す式をHaskellで書いてみる

# 経緯
[ren_265さんのtweet](https://twitter.com/ren_265/status/1240474455463231488?s=21)のスレッドより，
[n番目の素数を表す式](https://fermiumbay13.hatenablog.com/entry/2019/03/23/092147)を読み発想を得た．

# とりあえずひたすら書いてみる

```Haskell

import Data.List

p :: Integer -> Integer
p n = 1 + (sigma 1 (2^n) (e2 n))
  where
    e2 :: (Integral a) => a -> a -> a
    e2 n m  = floor $ (fromIntegral n / (fromIntegral $ e1 m)) ** (1.0/ fromIntegral n)

    e1 :: (Integral a) => a -> a
    e1 m = sigma 1 m e0

    e0 :: (Integral a) => a -> a
    e0 i = floor $ (cos $ (fromIntegral (product[1..i-1] + 1)) * pi / fromIntegral i )^2 

sigma :: (Enum a, Num a) => a -> a ->  (a -> a) -> a
sigma i j f = foldl1' (\a b -> a + f b) [i..j]
```

~~（今考えるとsigmaの引数をIntegralに制約しない方が良さそうですね．）~~
~~（sigmaの定義もListを2巡しているので改善の余地がありますね．）~~　更新しました．


# 実行してみる

```Haskell
>> map p [1..10]
[2,3,5,7,11,13,129,172,172,172]
```
6つ目までしか正しく出力されなかった．

# 考察
172（そもそも素数ではない）以降はどこかで桁溢れか丸め誤差が起こっているのかもしれないが，129（これも素数ではない）が出力されてしまうのが謎．
私の実装もしくは理解に誤りがあるのは確実なのでさらに考察したい．
（ご意見，ご指摘がありましたらコメントにお願いします．）

後半へ続く...

# 追記（20.04.03）
この件に関して[slack(Haskell-jp)の#questionsで質問](https://haskell-jp.slack.com/archives/C5666B6BB/p1584759748114600)したところ，

* cosやpiの精度に問題がある可能性がある．
* ウィルソンの定理をそのまま書き換えたら動いた．

とのご指摘を受けました．

```Haskell
e0 :: (Integral a) => a -> a
e0 i = if (product[1..i-1] + 1) `mod` i == 0 then 1 else 0
```
と書き換えると，

```Haskell
>> map p [1..10]
[2,3,5,7,11,13,17,19,23,29]
```
と正しく計算されます．lotsさん，mizunashi-manaさん，ありがとうございました．
PHP(Laravel)でレコードのinsert, update, delete


##insert
```
DB::table('テーブル名')->insert(配列データ);
```

##update
```
DB::table('テーブル名')->where('更新対象を検索')->update(配列データ);
```

```配列データサンプル
    $params = [
      'id' => $request->id,
      'name' => $request->name,
      'email' => $request->email,
      'age' => $request->age
    ];
```

##delete

```
#使い方
DB::table('テーブル名')->where(検索条件)->delete();
```


```php
#削除ルーティング
Route::post('/hoge/delete', 'HogeController@delete');
```

```HogeController.php
  public function delete(Request $request){
    $id = $request->delete_id;
    $person = DB::table('people')->where('id', $id);
    $person->delete();
    return redirect('/hello');
  }
```
css と簡単なjqueryでメニューを開閉する

久々に時間が取れたので、頭の整理も兼ねて書いてみることにしました。
フロントをメインに仕事をしていますが、cssをうまく利用すると簡単な動きなら表現できることを知ったので、その一例を書いてみます。
今回はヘッダーとかによくあるメニューを作ってみましょう。

## 目的
ボタンとリストを作成し、ボタンをクリックするとリストが開閉するようにcssとjqueryで調整する。

## html
htmlはボタンとリストだけのシンプルなもの、reset.cssの適用をお忘れなく。

```index.html
<html lang="jp">
    <head>
        <meta charset="utf-8"/>
        <link href="css/reset.css" type="text/css" rel="stylesheet" />
        <link href="css/open1.css" type="text/css" rel="stylesheet" />
        <script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
        <script src="js/open1.js" type="text/javascript"></script>
    </head>
    <body>
        <div class="btn"></div>
        <ul>
            <li>リスト１</li>
            <li>リスト２</li>
            <li>リスト３</li>
        </ul>
    </body>
</html>
```
## css(scss)
scssでかくとこんな感じです。ポイントは2つあります。
一つ目はulです。height:0;overflow:hidden;をつけることで中身のliが見えなくなります。また、transitionでheightが変更された時に時間をかけて変化してくれます。
もう一つのポイントは&.on(body.on)です。
ここにボタンを押した時の変化を記述します。

```open1.scss
body{
    width:100%;
    height:100%;
    background-color: rgb(220,220,220);
    .btn{
        width:100px;
        height:100px;
        background-color: blue;
    }
    ul{
        width:200px;
        height:0;
        overflow: hidden;
        transition: height 1s;
        li{
            width:100%;
            height:60px;
            border: 1px solid #000;
        }
    }
    &.on{
        background-color: rgb(150,150,150);
        .btn{
            background-color: red;
        }
        ul{
            height:186px;
        }
    }
}

```

## jquery
かなりシンプルに書いています。ボタンを押した時に、bodyタグにクラスを足すor消すだけ。

```open1.scss
$(function(){
	$(document).on("click", ".btn", function(){
        if(!$('body').hasClass('on')){
            $('body').addClass('on');
        }else{
            $('body').removeClass('on');
        }
	});
});
```

##動作説明
ボタンを押すとjqueryが発火し、bodyにonのクラスを足します。
すると、cssのbody.onが適用され、下記の変化が起こります。

1.bodyの背景色が変更される
２.ボタンの背景色が変更される
3.ulの高さが変わったため、一秒間のアニメーションをへて変化

もう一度ボタンを押すと元に戻ります。
ね、簡単でしょ？

このように、ボタンのオンオフくらいのアニメーションならcssをメインにするとコード量が減り、jqueryの負担も軽くなります。複数の言語を組み合わせると面白いことが結構あるので、色々試してみるといいでしょう。
次はphpとjqueryを組み合したものを紹介できたらなと思います。
【PHP】SQLクエリの実行

実行環境　
PHP 7.4
Postgre  12.2


##queryメソッド

SQLステートメント(SQLで作成した命令文)を実行し、成功した場合は PDOStatement オブジェクト、失敗した場合はfalseを返します。

```php
$db = new PDO("pgsql:host=localhost; dbname=postgres;","user","password");

$sql = "INSERT INTO test_tbl (id,name) VALUES (1,'yamada')";

$action = $db->query($sql);
```

SELECTした結果を使いたい場合などはqueryメソッドを使用します。

##execメソッド

SQLステートメントによって更新や削除された行数を返します。 
1行も作用しなかった場合は0を返します。

```php
$db = new PDO("pgsql:host=localhost; dbname=postgres;","user","password");
$sql = "INSERT INTO test_tbl (id,name) VALUES (1,'yamada')";

$action = $db->exec($sql);

if($action>0) {
    echo "{$action}件のデータ挿入";
} else {
    echo "データ挿入失敗";
}
```

行数を返すので、ifやforで活用できますね。
CSSで文字列の折り返しを制御するword-breakとoverflow-wrapの違い

# はじめに
幅の狭い領域で長い英単語やURLの途中で折り返しを制御できるCSSプロパティである、word-breakとovverflow-wrapについてです。どちらも折り返し制御を行うプロパティですが、２つの違いが分からず、モヤモヤしていたので自分なりにまとめてみました。
結論から言うと、使い勝手としては`overflow-wrap`の方が良いのかと考えています（現在の自分の知識の範囲内ではですが、、）

## サンプルコード
```index.html
    <p>1単語が領域幅を超える場合</p>
    <div class="text-wrap">    
    <p>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</p>
    </div>

    <p>1単語が領域幅を超えない場合(zとaの間に半角スペース)</p>
    <div class="text-wrap">    
    <p>abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz</p>
    </div>
```


```style.css
.text-wrap {
    width: 300px;
    border: 1px solid;
    padding: 0 12px;
}
```

## word-breakの場合
`word-break:break-all;`を使用することで、領域からはみ出るのを防ぎます。ただし、一律英単語の途中で強制的に折り返してしまいます。

```style.css
p{
    overflow-wrap: break-word;
 }
```
![text-wrap.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233987/733acaeb-e21b-ca51-cb4f-86cb0fb2cb3b.png)


## overflow-wrapの場合
`overflow-wrap:break-word;`を使用することで、領域からはみ出るのを防ぎます。
基本的に英単語の途中での折り返しは行いませんが、1単語の長さが領域の幅を超える場合のみ、英単語の途中で強制的に折り返します。

```style.css
p{
    overflow-wrap: break-word;
 }
```
![overflow-wrap.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233987/ca06442f-5259-b5c9-eeaa-2dcc5aa8c8b5.png)



## 参考にさせていただいたサイト
[【CSS】overflow-wrap (word-wrap) と word-break の違い](https://web.hazu.jp/overflow-wrap-word-break/)
[word-breakとword-wrapはややこしい](https://w3g.jp/blog/confusing_word-break_word-wrap)
tf-explainのGrad CAMとOcclusion Sensitivityを見比べる

#目的
tf-explainのGrad CAMとOcclusion Sensitivityを見比べる。

尚、tf-explainと
tf-explainのGrad CAMについては、
[全22行のコードでGradCAM。tf_explainは、使い易いかも、お薦め！](https://qiita.com/enoughspacefor/items/0f4568ecec4f5277cf37)
をみて下さい。

#結果
## Occlusion Sensitivity を動かすソース

超、簡単！！

```occlu_sens_cat2_2nd_224.py
import tensorflow as tf

from tf_explain.core.occlusion_sensitivity import OcclusionSensitivity

IMAGE_PATH = "./cat2_2nd_224.jpg"

if __name__ == "__main__":
    model = tf.keras.applications.vgg16.VGG16(weights="imagenet", include_top=True)

    img = tf.keras.preprocessing.image.load_img(IMAGE_PATH, target_size=(224, 224))
    img = tf.keras.preprocessing.image.img_to_array(img)

    model.summary()
    data = ([img], None)

    tabby_cat_class_index = 281
    explainer = OcclusionSensitivity()##
    # Compute OcclusionSensitivity on VGG16
    grid = explainer.explain(
        data, model, class_index=tabby_cat_class_index, patch_size=32
    )

    explainer.save(grid, ".", "grad_cam_cat2_2nd_224Ocu32b.png")

```

## 結果
Grad CAM


![grad_cam_cat2_2nd_224.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342207/3d262fea-476b-37d7-e90c-54dc2789d575.png)

Occlusion Sensitivity(patch_size = 32)

![grad_cam_cat2_2nd_224Ocu32b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342207/9eec76e1-1fcc-4164-e328-de81c47c2872.png)

Occlusion Sensitivity(patch_size = 64)
これをみると、patch_size = 64は、ちょっと、サイズが大きすぎる気がしますが、この関数の作りにもよるかと。。。。
**微妙に、tf-explainは、ノリが悪い？？？**
(ここでのノリが悪いとは、 tabby_cat　のポイントは、目の上、すなわち、額の部分の「M」の文字に見える模様であり、その部分にきっちりフォーカスがあたっていない意。）

![grad_cam_cat2_2nd_224Ocu64b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342207/f599f05a-10d9-a167-8f83-bb54ef6fedbe.png)

patch_sizeをどうするかは、難しい！！！

#まとめ
微妙ー。（再掲）**微妙に、tf-explainは、ノリが悪い？？？**
(ここでのノリが悪いとは、 tabby_cat　のポイントは、目の上、すなわち、額の部分の「M」の文字に見える模様であり、その部分にきっちりフォーカスがあたっていない意。）
コメントなどあれば、お願いしますっ。
Rails5 管理者によるユーザー情報編集

#管理者なんだけどユーザー情報編集時にpasswordのバリデーションでエラー

Userにadminカラムを追加して管理者を作りました。
ユーザー情報を編集して更新しようとした所で
よくある
`has_secure_password
  validates :password, presence: true, length: { minimum: 6 }`

このバリデーションに引っかかって更新ができず、、、
かといってバリデーション消すのはダメだし、、
管理用のgem導入するにもすでに管理者機能結構作成した後だから
なんとか使わずに行きたいな。。。

と思って検索したら`on:`を使うことでバリデーションの条件を追加できるのですね。
今回は編集更新にはバリデーション掛からなくていいので
`has_secure_password
  validates :password, presence: true, length: { minimum: 6 }, on: :create`

として新規ユーザー登録の時だけバリデーション掛かるようにした所更新できるようになりました。


参考記事

https://qiita.com/Shantti-Y/items/19ea23b81f3421063fc5
https://qiita.com/kadoppe/items/061d137e6022fa099872