OmniAICreator/Qiita-1.07M huggingface dataset:
【UiPath】Excel - 印刷の向きを変更する

# はじめに

この投稿は、RPAツールのUiPathで、Excelの印刷の向き（縦横）を変更する方法についての投稿です。

「Excel操作を.NETのコードでやってみよう」シリーズです。他の投稿はこちら。

https://qiita.com/miya_g/items/02230dc5774818f24e90

https://qiita.com/miya_g/items/1c3bb14583110ccac14b

https://qiita.com/miya_g/items/8341d6cc0cf0fb77ac31

https://qiita.com/miya_g/items/e36f7b5da5bc994a49d7

# 印刷の向き（縦横）とは

「ファイル」メニューの「印刷」で指定するプリントアウト時の用紙の方向です。
ブックを新規作成した時の初期状態は「縦」なので、UiPathで横印刷をしたい場合に操作が面倒です。

![hogegep.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154139/2a1f4f78-fad2-25c7-a027-4a1ac68c6993.png)


2021年4月現在では、UiPath標準では「印刷向きの変更」はできませんが、

- 「コードを呼び出し（InvokeCode）」アクティビティで実行
- 「VBA を呼び出し (Invoke VBA)」アクティビティで実行

のいずれかで実現できます。


# .NETで、印刷の向き（縦横）を変更

以下はVB.NETのコードです。実行すると「印刷の向き（縦横）」が変更されます。
UiPathの「コードを呼び出し（InvokeCode）」アクティビティに指定して実行できます。

```VB
'// 対象エクセルファイルの情報
Dim filePath As String = "C:\temp\Book1.xlsx"
Dim sheetName As String = "sheet1"

'// 処理開始
Dim ap As New Microsoft.Office.Interop.Excel.Application
Dim wb As Microsoft.Office.Interop.Excel.Workbook = ap.Workbooks.Open(filePath)
Try
	'// シートループ
	For Each ws As Microsoft.Office.Interop.Excel.Worksheet In wb.Sheets
		If ws.Name.ToUpper() = sheetName.ToUpper() Then
			'// 向きを変更
			ws.PageSetup.Orientation = Microsoft.Office.Interop.Excel.XlPageOrientation.xlLandscape '// 横向き
			'ws.PageSetup.Orientation = Microsoft.Office.Interop.Excel.XlPageOrientation.xlPortrait '// 縦向き
		End If
	Next
	'// 保存・終了
	wb.Save
	wb.Close
Catch ex As Exception
	Console.writeLine(ex.ToString)
	Throw(ex)
Finally
	If Not(wb Is Nothing) Then wb = Nothing
	ap = Nothing
End Try
```

実行すると以下のように、印刷の向きが横方向になりました。
![temadasdspsnip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154139/0d5f48b5-1ad2-3f19-44fc-99dcc39e470b.png)

「向きを変更」している箇所のコードを変えれば、印刷設定の他の項目も編集可能です。
例えば、以下のように設定できるはず。です。

```
	ws.PageSetup.PrintArea = "A:D"  '// 印刷範囲の設定
	ws.PageSetup.Zoom = False       '// 倍率をクリア
	ws.PageSetup.FitToPagesWide = 1 '// 横方向に1ページに収める
	ws.PageSetup.FitToPagesTall = 1 '// 縦方向に1ページに収める
	ws.PageSetup.CenterHorizontally = True  '// 水平方向に中央配置
	ws.PageSetup.PrintTitleRows = "$1:$2" '// 行タイトルを1～2行目に指定
	ws.PageSetup.PrintTitleColumns = "$A:$A" '// 列タイトルをA列に指定
```

指定できる項目はこちら（英語）

https://docs.microsoft.com/ja-jp/office/vba/api/excel.pagesetup


呼び出し可能なxamlファイルにしたものを用意しました。以下からダウンロードできます。

https://github.com/miyag/UiPath.ReusableCode/blob/master/ExcelUtility/EditPageOrientation.xaml



# 終わりに

UiPathで「Excelの印刷設定を変更したい」場合に、役に立てば幸いです。

この記事が参考になったら、 LGTMをお願いします。
閲覧ありがとうございました。
No CMAKE_CXX_COMPILER could be found.

## エラーの意味
`CMAKE_<LANG>_COMPILER`は<LANG>コンパイラへのフルパスという意味なので，　記事タイトルのエラーの意味は「C++のコンパイラへが見つかりません」という意味

## やろうとしていたこと
CentOS7にdevtoolset-8を使ってgccをインストールしようとしていたら， 記事タイトルのエラーが出た

## 調査
まずは`gcc`と`g++`コンパイラへのパスが通っているかを確認する

```bash
> gcc --version
 gcc (GCC) 4.8.5 20150623 (Red Hat 4.8.5-44)
 Copyright (C) 2015 Free Software Foundation, Inc.
 This is free software; see the source for copying conditions.  There is NO
 warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
 
> g++ --version
 bash: g++: command not found
```
あれ， gccとg++をインストールしたのにパスが通っていない？

## 解決

```bash
sudo yum install -y centos-release-scl
sudo yum install -y devtoolset-8
```
を実行した後にdevtoolset-8を有効にしていなかったのが原因だった．

```bash
scl enable devtoolset-8 -- bash
```

を使えば， `devtoolsset`の`gcc`および`g++`が使えるようになる．

## Dockerを使いたい場合
`dockerfile`の各行頭に `scl enable devtoolset-8 -- bash &&`を足すのは流石に面倒なので`SHELL`を使う．

```dockerfile:dockerfile
 SHELL [ "/usr/bin/scl", "enable", "devtoolset-8"]
```

[How to permanently enable scl CentOS 6.4?](https://unix.stackexchange.com/questions/175851/how-to-permanently-enable-scl-centos-6-4])

以上．
Libtorchドキュメント

## install
http://zhaoxuhui.top/blog/2021/04/13/libtorch-installation-and-use.html

##Tensor basics
https://pytorch.org/cppdocs/notes/tensor_basics.html
###Tensor dtype
https://pytorch.org/docs/stable/tensors.html
###torch::accessor
##API Library

https://pytorch.org/cppdocs/api/library_root.html

https://qiita.com/kai_ware/items/35f75ca83864f349c986
git branch  -m(-M) オプションってなに！？

## 説明
-m (もしくは-M)オプションで
ブランチ名の変更が出来ます

githubでリポジトリ作成したときなんかも

```
git branch -M main
```
なんて書かれてますね

##つかいかた
###git branch -m ブランチA
現在のブランチ名をブランチAに名前変更

###git branch -m ブランチA ブランチB
ブランチAをブランチBに名前変更

###git branch -M ブランチA
現在のブランチ名をブランチAに強制変更

###git branch -M ブランチA ブランチB
ブランチAをブランチBに強制名前変更

##大文字 -M 小文字 -m の違いは？
小文字 -m 変更後の名前と同名ブランチがあると失敗します
大文字 -M は強制上書き
Let's Encryptによるサーバ証明書の発行について

Let's Encryptから発行された証明書を利用する場合、証明書を導入する機器より
専用のツールを実行して証明書を受け取ります。
その際、httpによるコンテンツの確認を実施するため、利用する構成次第では少々厄介です。
WindowsやLinuxで利用するWebサーバであればツールをダウンロードして実行することが
比較的容易にできるのですが、仮想アプライアンスやハードウェアで証明書を利用するには
専用のツールを利用できないばかりか、そもそもコンソールが利用できないケースもあります。
そこで考えるのが「別環境で作成した証明書をインポートして使いたい」と。

とりあえずうまく発行できたので少し手順をまとめてみることにします。

1.インターネットから接続できるセグメント(DMZかな)にIISを用意する。
　一番お手軽で誰でも比較的容易に操作できます。
　「インターネットインフォメーションサービス(IIS)マネージャ」を起動し、[サイト]にある
　初期状態では「Default Web Site」を選択し、右ペインの「バインド」を開きます。
　HTTPで待ち受ける設定がデフォルトで作成されていますが、「ホスト名」が空白です。
　「ホスト名」に発行するサーバのFQDNを入力します。

2.DNSに先ほどのFQDNを登録し、http://fqdn/でに接続確認
　DNSへ先ほどのFQDNとIPアドレスを登録しfqdnでアクセスできるのかを確認します。
　IISのデフォルト画面が表示されれば準備はほぼ完了です。

3.専用ツールのダウンロード
　Windows版のツールをダウンロードします。今回はwin-acmeを利用します。
　下記のURLよりダウンロードし、適当なフォルダに展開してください。
　https://www.win-acme.com/

4.設定ファイルの編集
　設定ファイルを編集せずに実行するとプライベートキーがエクスポートできず、
　他の機器では利用できません。
　settings_default.jsonをコピーしsettings.jsonを作成してください。
　作成したらメモ帳などで編集します。
　49行目あたりから「"Security": {」で始まる行があります。
　このセクションでキー長やプライベートキーのエクスポートの設定を行います。
　デフォルトでは「`"PrivateKeyExportable": false,`」と設定されているので
　プライベートキーのエクスポートができません。
　この行を「`"PrivateKeyExportable": true,`」に変更します。
　キー長は3072に設定されているので適時変更します。

5.プログラムの実行
　先ほどダウンロードしたwin-acmeを実行し、証明書Let's Encryptより発行してもらいます。
　その際、IISで設定したFQDNへはhttpでの通信が必要になるのでhttpで通信できるように
　FireWall等の設定を行っておいてください。

6.発行された証明書のエクスポート
　IISよりサーバ証明書を確認するとLet's Encryptより証明書が発行されています。
　この証明書を「秘密鍵」付きでエクスポートし、利用したい機器に導入します。

◆最後に
この証明書ですが、90日毎に更新する必要があり、定期的に手動で更新して証明書の
再登録を行う必要があります。
永続的に利用するのであれば、コンソールを直接利用できる環境や、ツールが実行できる
環境での利用が良いのではと思います。
昨今、Cloud環境を利用するシーンが多くなり、検証するために証明書が必要になったりする
ケースが増えてきているかと思いますが、Cloudを利用すると自己証明書を利用することが
できずに公的認証局が発行した証明書が必須になります。
「事前の検証で証明書を買ってうまくいかなかったもったいないしー」ってな場合には
少々手間はかかりますがLet's Encryptは十分使えると思います。

CloudとのSAML認証を検証するため、No-IPを利用してLet's Encryptより発行された証明書を
導入して検証していますが、今のところ問題はなさそうです。
90日後の更新を覚えておかないと・・・。
『実践式はじめてのPython問題集まとめ.ver2: Python入門　問題集』の訂正

###はじめに
　『実践式はじめてのPython問題集まとめ.ver2: Python入門　問題集』という問題集はすごくいいのですが、誤りが結構あります。自分は著者ではないのですが、とりあえず自分が気づいた間違えを掲載します。なお訂正後のみを掲載しています。

###問題15 (問題)
```
-2
```

###問題43 (解答)

```python
a = '34'
b = '43'
print(int(a) + int(b))
```

###問題48(問題)

```
変数nに14を代入し、ifを用いて変数nが15より大きい場合「 とても大きい数字。」
elifを用いてnが11以上15以下の時、「中くらいの数字。」
else を用いてnが11以下のとき に「 小さい 数字。」と出力するプログラムを記載しなさい。
```

###問題50(解答)

```python
age = 20
if age >= 20:
    if age < 60:
        print("20以上60未満")
```

###問題56(問題文)
```python
print(s2 + 'は' + s1 'に含まれる')
```

###問題125(解答)

```python
t = (123, 'abc')
print(t[0])
```

###問題132(解答)

```python
# 解答その1
x = 0
while x < 5:
    print(x)
    x += 1

# 解答その2
x = 0
while x <= 4:
    print(x)
    x += 1
```

###問題146(問題と解答)
```python
問題文
li = [1, 2, 3, 4, 5]
for i, l in enumerate(li):
    if i % 2 == 0:
        print(l)

(結果 おそらくこうしたかったのだろう)
1
3
5
```

###問題170(問題文)

```
～のかたちで['a', 'c', 'e']を出力しなさい。
```

###問題193(解答)

```python
a = 0.5
b = '0.4'
print(a * float(b))
```

###参考文献
『実践式はじめてのPython問題集まとめ.ver2: Python入門　問題集』
M1 Macbookでfirebaseコマンドが実行できない

# エラー内容

M1 Macbookで`firebase login`や`firebase -V`などの`firebase`コマンドを実行しようとしたところ、このようなエラーが発生。

```
dyld: lazy symbol binding failed: Symbol not found: ...（略）
```

# 解決方法
firebase-toolsのバージョンを9.8.0から9.7.0にダウングレードしたら解決しました。
手順は以下の通りです。

```
yarn remove firebase-tools
yarn add firebase-tools@9.7.0
firebase -V
```

npmの場合は参考記事を参照してください。


# 参考記事
[Firebase broken on M1 Mac - Stack Overflow](https://stackoverflow.com/questions/66816456/firebase-broken-on-m1-mac)
GitHubとVsCodeとFlutterでAndroidアプリを作って実機にインストールしてみる

# 環境  
* VsCode 1.40.2
    * Flutter 3.8.1
    * Dart 3.8.1

# 手順  
1. GitHubアカウント作成  
https://github.com/  
1. VsCodeインストール  
https://azure.microsoft.com/ja-jp/products/visual-studio-code/  
1. VsCodeでFlutter,Dart拡張機能をインストール
1. GitHubにログイン  
1. 新しいリポジトリ作成  
1. ローカル環境の所定フォルダにClone  
1. VsCodeで上記所定フォルダを指定してFlutterの新しいプロジェクトを作成  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698712/ca748e08-a8c0-291e-35a8-5b2fcbe814b0.png)
1. プロジェクトをビルド  
VsCodeのTerminalで以下を実行   
```
$ flutter build apk --split-per-abi
```  
1. Android実機をPCに接続してインストール  
VsCodeのTerminalで以下を実行  
```
$ adb -d install -r build/app/outputs/apk/release/app-arm64-v8a-release.apk  
```
1. Android実機にアプリがインストールされていることを確認して完了！  

***  

# おまけ：Androidエミュレーター上で実行  
1. Android Studioを実行  
右下の「Configure」からAVD Managerを選択  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698712/d6d9014f-60f4-de75-8ad0-6283f31f0629.png)
1. 左下の「Create Virtual Device」を選択  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698712/dde7dca8-7a32-b58d-687b-428d900151fc.png)
1. 設定を適当に選択し「Finish」を選択  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698712/b0fa157c-b86a-6666-2b51-31165bf10a30.png)
1. 作成したエミュレーターを実行  
1. VsCode画面の右下タブで、作成したエミュレーターを選択  
1. VsCodeでデバッグ実行  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698712/fc14ab13-aeb2-5c0e-3000-ba9063e486bf.png)  

# おまけ：チーム開発フロー  
1. GitHubでIssueを発行  
1. VsCodeで新しいブランチを作成してチェックアウト  
```
$ git checkout -b [ブランチ名] (ブランチ名にIssueIDを入れる)  
```  
1. 空コミット  
```  
$ git commit --allow-empty -m "コミットメッセージ" (コミットメッセージにIssueIDを入れる)  
```  
1. コーディング  
1. リポジトリにPush  
```  
$ git push -u origin [ブランチ名]  
```  
1. GitHubでPullRequestを発行  
1. Merge  
1. Issueをクローズ
JS~if文~

#①　a  === b
左右の値が等しい場合にTrueとなります。

#②　a  !== b
○と✕が等しくない場合Trueとなります。

#③　a < b
aがbより小さいときにTrueとなります。

#④　a <= b
aがb以下（等しい）ときにTrueとなります。

#⑤　a >= b
aがb以上（等しい）ときにTrueとなります。

実際にプログラムを書いて行きたいと思います。

```index.html
<script>
    'use strict'

    const number = Math.floor(Math.random() * 6);
    const answer = parseInt(window.prompt('0~5の数字を入力してみてね'));
    let message;
    if (answer === number){
      message = "あたり！"
    } else if (answer < number) {
      message = "残念でした！もう少し！";
    } else if (answer > number){
      message = "もう少し小さい！";
    } else {
      message = "0~5の数字を入力してね";
    }
    window.alert(message);
```

数あてゲーム担っています。
Math.floor ▶　数値の少数点以下の切り捨てを行う処理になっています。引数に数値を入れます。
Math.random ▶　0〜1未満（1は入らない）までの小数による乱数を生成することが出来ます。　また今回は、0~5の範囲で乱数を作るようにしました。ランダムに数字が変わります。
parseInt▶　文字列を整数に変換するJavaScriptのグローバル関数です。しっかりとデータ型を定義することで、パグを避けることができます。

letは変数の宣言ですが、これは今回if文なのでメッセージの内容が変わってしまうので、変数だけ宣言しています！！
IBMCloud CitrixVPX ライセンス確認

##目的
Citrix VPXでライセンスの有効期限を確認する。
必要に応じてアップデートして貰う必要があるので、期限の確認だけ。

##コマンドで確認
ライセンスと期限を確認する。

有効期限は下記の部分
<font color="red">Days to expiration: 709</font>

```
> show ns license
	License status:
	                   Web Logging: YES
	              Surge Protection: NO
	                Load Balancing: YES
	             Content Switching: YES
	             Cache Redirection: YES
	                  Sure Connect: NO
	           Compression Control: NO
	             Delta Compression: NO
	              Priority Queuing: NO
	                SSL Offloading: YES
	  Global Server Load Balancing: NO
	                GSLB Proximity: NO
	           Http DoS Protection: NO
	               Dynamic Routing: NO
	             Content Filtering: YES
	           Content Accelerator: NO
	            Integrated Caching: NO
	                       SSL VPN: YES  (Maximum users = 500)  (Maximum ICA users = Unlimited)
	                           AAA: NO
	                  OSPF Routing: NO
	                   RIP Routing: NO
	                   BGP Routing: NO
	                       Rewrite: YES
	     IPv6 protocol translation: YES
	          Application Firewall: NO
	                     Responder: YES
	                HTML Injection: YES
	                NetScaler Push: NO
	           Web Interface on NS: YES
	                       AppFlow: YES
	                   CloudBridge: NO
	                  ISIS Routing: NO
	                    Clustering: NO
	                      CallHome: YES
	                        AppQoE: NO
	               Appflow for ICA: NO
	                          RISE: NO
	        Front End Optimization: NO
	               Large Scale NAT: NO
	                     RDP Proxy: NO
	                    Reputation: NO
	                 URL Filtering: NO
	            Video Optimization: NO
	                 Forward Proxy: NO
	              SSL Interception: NO
	     Remote Content Inspection: NO
	                  Adaptive TCP: NO
	  Connection Quality Analytics: NO
	               Model Number ID: 10
	                  License Type: Standard License
	                Licensing mode: Local
	            Days to expiration: 709
 Done
```

##ライセンスファイルを直接参照する

Shellモードに移行

```
>shell
```

コマンドを実行すると、**「.lic」**ファイルがあるのでこれがライセンスファイル

```
root@SLADC1160157-craz# cd /nsconfig/license/
root@SLADC1160157-craz# ls
068958c047f4.lic	ssl			xml
```

中身を見てみると、有効期限が書いてあるのがわかる
<font color="red">15-mar-2023</font>

```
root@SLADC1160157-craz# cat 068958c047f4.lic
#DO NOT EDIT THIS LINE - This File is in UTF-8 format.
#
SERVER this_host 068958c047f4
VENDOR CITRIX
USE_SERVER
INCREMENT CNS_SSE_SERVER CITRIX 2023.0305 15-mar-2023 1 \
```
【Java】JSoupでCAPTCHA認証を回避する

# お前もか、JSoup
先日、「[【Java】Selenium＋ChromeDriverで突然「あなたは人間ですか？」と聞かれた時は](https://qiita.com/11295/items/0ab572452e9af7bac255)」という記事を書きました。
無事解決し、これでWebスクレイピングが捗るね！！と思っていたのですが……
今度は別のツールでSeleniumではなく、JSoupでCAPTCHA認証の罠が！！
年単位で！運用実績あるのに！！急に！使えなくなったよ！！！
実際にはJSoupでアクセスするとHTTPステータス403が返ってきて異常終了になるんすよ。
それは接続時にユーザーエージェントとか色々設定してあげれば解決はできるんですが……そうするとCAPTCHA認証に飛ばされちゃって……
それを乗り越えても取得先のURLによってはJavaScriptのシンタックスエラーが発生する……:joy:

結局JSoupだけではうまくいかなかったので、HTMLUnitを導入しました……:sweat_smile:
MavenとかGladleとか、必要に応じて依存関係を追加してください。
[Maven Repository: net.sourceforge.htmlunit » htmlunit](https://mvnrepository.com/artifact/net.sourceforge.htmlunit/htmlunit)

# ソース
取得後の処理を変えたくなかったので、JSoupのDocumentクラスに取得したHTMLのデータを突っ込んでます。

```java
// HTNLUnit関連インポート文
import com.gargoylesoftware.htmlunit.BrowserVersion;
import com.gargoylesoftware.htmlunit.NicelyResynchronizingAjaxController;
import com.gargoylesoftware.htmlunit.Page;
import com.gargoylesoftware.htmlunit.WebClient;

// 実装
@SuppressWarnings("resource")
final WebClient webClient = new WebClient(BrowserVersion.BEST_SUPPORTED);
webClient.getOptions().setThrowExceptionOnScriptError(false);
webClient.setJavaScriptTimeout(10000);
webClient.getOptions().setJavaScriptEnabled(true);
webClient.setAjaxController(new NicelyResynchronizingAjaxController());
webClient.getOptions().setTimeout(10000);

Page page = webClient.getPage("取得先URL");
Document doc = Jsoup.parse(page.getWebResponse().getContentAsString());
```

ある日突然訪れるツールの死の対応で死ぬって、まあよくあるけどさあ……うん……
【Qiita】お前は俺の何を知っていると言うんだ

[Qiitaトップ](https://qiita.com/)がフィードというものにかわりました。

![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/2d81a5a6-c2ce-a91c-9d27-308ba7e3cf4f.png)

2021/04/06の 12時くらいに見たフィードとトレンドがこんな。
左がフィード、右がトレンドです。
![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/31033842-5795-abd7-e3e8-2d6d39b092ae.png)
全く異なりますね。

そして私のプロフィールがこれだ。
![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/732589f5-fb06-1cba-eb97-daf87d170def.png)

このプロフィールを一体全体どのようにこねくり回したらSalesforceとかExcelとかRustとかPythonとかが出てくるんですかね？
LGTMで判断するならインフラが出てこないとおかしいし、Contributionで判断したとしてもPHPとJavaScriptで埋め尽くされるのが筋ではなかろうか。


また、[これまでのトレンド](https://qiita.com/trend)は、いちいちトップ→トレンド→全てと辿らないと見れません。
さらにログアウト状態だと、トレンドに行こうとするとログインを要求され、サイトトップではトレンドが表示されます。
ログイン状態とログアウト状態で動作が大きく異なるのでとてもわかりにくい。
Ralisチュートリアルの第6章6.3.2の6.39のrails testが通らない問題


こんにちは！

Ralisチュートリアルの第6章の6.3.2のリスト6.39にて$ rails testが通らないトラブルが発生いたしました。これを解決したため、その方法を備忘録として残しておこうと思います。

２．【課題】
　リスト6.39の$ rails testを実行した際、以下に記載の
　エラーメッセージが表示されて、失敗する。(①)
　⇒　activemodel::unknownattributeerror: unknown attribute 'password' for user.
![①.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1040076/259e043f-2a49-e2b8-4d8a-478285f9525e.png)
　　画像①

３．【(考えられる)原因】
      1) 'password'というカラムが入っていない。
→　以下の画像の方法(②)にて、passwordのカラムがあることは確認できた。
![②.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1040076/f4681607-2f8f-5a52-65f3-3ca95848a8e1.png)
　　　　 画像②


しかし、以下
You don't have bcrypt installed in your application. 
Please add it to your Gemfile and run bundle installというエラーメッセージを発見したため、Gemfileに bcryptをインストールし、bundle installを試みることにした。

　　2) Gemfileにbcryptがインストールされていない。
　　→　以下の画像の方法(③)のようにコードを実施した結果、bundle installは完了した。
![③.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1040076/d920afd7-f863-0018-cc0c-7c97afc5832e.png)
　　　 画像③

　しかし、以下の画像④のように肝心のbcryptは未だインストールされない。
　　　　![④.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1040076/a5051fb4-0e0c-7971-a6b5-0c7456b2569e.png)
　　　 画像④

４．【開発環境】
PC: MacBook Pro (13-inch, 2017, Two Thunderbolt 3 ports)
Ruby: ruby-2.6.3 [ x86_64 ]
Rails: Rails 6.0.3.5
OS: macOS 10.14.6
総合開発環境(IDE): AWS Cloud9

上記に対して、実際の原因は以下でした。
「”bcryptを使用する場合、パスワードを暗号化した値を入れるためのpassword_digestというカラムのみ追加される。
passwordやpassword_confirmationという値は、userクラスに属性としては追加されるが、データベースには対応していない。”」

つまり、実際のデータベースに保存されるのは、password_digest
の値のみであるということであるので、「"password_digestに直接値を入力するようなプログラムに書き換えればいい”」ということになります。

そのように書き換えたコードが以下の画像⑤になります。
![(1) rails_content.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1040076/a3d71d93-7f31-fb39-2adb-618c055aca98.png)
   　　　　画像⑤


そうすると、画像⑥のようにテストが通ることが確認できました。
![(5) rails_test.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1040076/d6c4b52c-4688-df7a-28b8-32cccc6b259c.png)
  　　　　画像⑥

もし同じ箇所で躓いている方がいらっしゃればご参考までに
ご覧いただけますといいかと思います。

いつもありがとうございます。それではまた！
Docker環境の共有をするには

Dockerのメリットというのは誰でも違う場所でも本体の設定などに左右されず、簡単に同じ開発環境を使えるということですよね。
でも就職前は1人でポートフォリオを作るので「開発環境を共有する」という経験がなく、ただのコンテナとして利用していました。

で、いざ前回の記事で紹介したSwaggerを「Dockerで共有できるように」と言われて「あれ？どうすればいいの？」となったので調べました。
前回の記事は以下です。
[Swaggerについて調べてみた(Dockerバージョン)](https://qiita.com/mumucochimu/items/f64a9391aa8b31e69ff2)

初学者のため、ご指摘等ございましたらご連絡いただけますと幸いです。


## 方法

結論からいうと

#### docker-compose.ymlに記載してdocker-compose upする

です。

ちなみに今回私は自分でDockerfileを作成する必要がない(つまり既にimageがあった)のでDockerfileの内容は書きません。

Dockerfileとdocker-compose.ymlの違いについては以下の記事が分かりやすかったです！
ありがとうございます！
[Dockerを使うにあたってDockerfileは必要か](https://teratail.com/questions/101459)
[Docker Composeとは？使い方やコマンドを紹介](https://kitsune.blog/docker-compose)


で、どのような内容を書けばいいかというと分かる人は自分で書けばいいのですが...
私は分からないのでGithubで公開されているものを探しました。
というか分かってても作ってくれている人がいれば使わせていただく方がいいですよね。
`○○○ docker-compose.yml`みたいな感じでGoogleさんで探せば素晴らしい先人たちが公開してくれているかもしれません...！

今回で言えば
[swagger-all-in-one-docker-compose](https://github.com/elevennines-inc/swagger-all-in-one-docker-compose/blob/master/docker-compose.yml)
上記のdocker-compose.ymlが公開されていたのでこちらを使おうかなと思っています。
こちらありがたいことにREADMEを日本語バージョンも作成してくれているんです。
神様かな。

こちらをcloneして`docker-compose up -d`で環境を共有できるということです。

ちなみに今回のgithubではjson形式なのでyamlの方がいいかなということで絶賛編集中です。

今さらDockerの便利さを認識しました。
以上です。

※追伸

[swagger-all-in-one-docker-compose](https://github.com/elevennines-inc/swagger-all-in-one-docker-compose/blob/master/docker-compose.yml)
上記をcloneして`docker-compose up -d`したら下記のエラーが出ました。

```ターミナル
ERROR: Network swagger_link declared as external, but could not be found. Please create the network manually using `docker network create swagger_link` and try again.
```

エラー文通りに

```ターミナル
docker network create swagger_link
```

のコマンドを実行後、再度`docker-compose up -d`したらうまく起動できました！
Mac で python2.7入れ直し

## なぜ入れ直したのか

imagemagick入れただけなのに、awsコマンドがエラーになった
md5…
修正しようとしたが、無理そうだったので入れ直した

```
ERROR:root:code for hash md5 was not found.
File "/usr/local/Cellar/python@2/2.7.15/Frameworks/Python.framework/Versions/2.7/lib/python2.7/hashlib.py", line 147, in <module>
    globals()[__func_name] = __get_hash(__func_name)
  File "/usr/local/Cellar/python@2/2.7.15/Frameworks/Python.framework/Versions/2.7/lib/python2.7/hashlib.py", line 97, in __get_builtin_constructor
    raise ValueError('unsupported hash type ' + name)
ValueError: unsupported hash type md5
...
ImportError: cannot import name md5
```


## Macでpython2系を入れ直す

いろいろやり方ありそうだったのですが、うまく動かず下記で解消
md5はopenssl関連でエラーになっているらしいので、まずinstall

```
brew install openssl
```

pythonをアンインストール
インストール方法を確認して、そこから勘でコマンドを書いたら動いた

```
brew uninstall --ignore-dependencies python@2.rb
```

pythonインストール
私の環境、wgetが入ってなかった…
インストール方法は下記参考にしました
https://stackoverflow.com/questions/60298514/how-to-reinstall-python2-from-homebrew

```
brew install wget
wget https://raw.githubusercontent.com/Homebrew/homebrew-core/86a44a0a552c673a05f11018459c9f5faae3becc/Formula/python@2.rb
brew install python@2.rb
```
正規表現でCSVテキストの最終行を削除する

CSVテキストの最終行を削除しようと思った時に結構てこづったのでその方法をメモしておきます。

# やりたいこと

↓の最後に出現する改行以降を削除したい。

```ruby
csv_text = <<~CSV_TEXT
  りんご,apple
  みかん,orange
  イチゴ,strawberry
  バナナ,banana #この行を削除したい
CSV_TEXT
```

# 正規表現で最終行を削除

[gsub](https://docs.ruby-lang.org/ja/latest/method/String/i/gsub.html)を使って最終行を削除します。

```ruby
csv_text = <<~CSV_TEXT
  りんご,apple
  みかん,orange
  イチゴ,strawberry
  バナナ,banana #この行を削除したい
CSV_TEXT

csv_text.gsub(/(\r\n|\r|\n).*\z/, '')

#=> りんご,apple
#=> みかん,orange
#=> イチゴ,strawberry
```

どの改行コードがきてもいいように `(\r\n|\r|\n)` で改行コードを指定します。
`\z`はファイルの末尾にマッチするので、これで最後の行のみを削除することができます。
ちなみに末尾表現としてよく使われる`$`は行の末尾にマッチするので、これを使うと`みかん,orange`以下の行が全て削除されてしまうので注意です。
Internet Explorer 11(IE11)のファイルダウンロード時の通知バー上の保存ボタン押下をpythonで自動化

苦節2年…Internet Explorer 11(IE11)のファイルダウンロード時の通知バー上の保存ボタン押下をpywinauto、win32gui、win32conを駆使してpythonで自動化します。

～ダウンロードボタン押下後のダウンロード完了までは割愛～

～①IE11ウィンドウを最前面にします(pyautoguiはクライアントで稼働させる分には優秀だがサーバで稼働させるとうまく動かない)～

from pywinauto import application
from pywinauto.findwindows import WindowNotFoundError, WindowAmbiguousError
#InitApp object
app=application.Application()
try:
  app.connect(class_name="IEFrame",title_re=".%s." % '**** - Internet Explorer')
  #Access asp's window object
  app_dialog=app.top_window()
  app_dialog.minimize()
  app_dialog.restore()
  #app_dialog.set_focus()
except(WindowNotFoundError):
  print('"%s" not found' % app)
  pass
except(WindowAmbiguousError):
  print('Too many "%s" windows found' % app)
  pass

～②IE11ウィンドウ親と子ウィンドウの保存ボタンのハンドルを取得して通知バーのハンドルを特定します※****は対象サイト名等(pyautoguiはクライアントで稼働させる分には優秀だがサーバで稼働させるとうまく動かない)～

p_handle=win32gui.FindWindow("IEFrame", "**** - Internet Explorer")
p_class_name=win32gui.GetClassName(p_handle)
p_handle_name=win32gui.GetWindowText(p_handle)
handles_dict={str(p_handle):[p_class_name,p_handle_name]}
print('p',hex(p_handle),p_class_name,p_handle_name)
print('p',p_handle,p_class_name,p_handle_name)

c_handles=[]
win32gui.EnumChildWindows(p_handle,lambda handle,list: list.append(handle),chandles)
while True:
    for ch in c_handles:
        c_class_name=win32gui.GetClassName(ch)
        c_handle_name=win32gui.GetWindowText(ch)
        print('c', hex(ch),c_class_name,c_handle_name)
        handles_dict[str(ch)]=[c_class_name,c_handle_name]
        if c_class_name=='DirectUIHWND':
            print('Frame Notification Bar Hwnd:',hex(ch))
            print('Frame Notification Bar Hwnd:',ch)
            Hwnd=ch
            break
    if c_class_name=='DirectUIHWND':
        print("Frame Notification Bar found...")
        break

～③特定したIE11子ウィンドウの通知バーのハンドルにPostMessageでAlt＋Nキー送信のうえ保存ボタン押下する方法もありますがサーバでは最後の保存ボタンがうまく押せないため保存ボタンのハンドルにTABとSPACEキーを送ります。(pyautoguiはクライアントで稼働させる分には優秀だがサーバで稼働させるとうまく動かない)～

time.sleep(2)
print("VK_TAB")
win32gui.PostMessage(Hwnd,win32con.WM_KEYDOWN,win32con.VK_TAB,0)
win32gui.PostMessage(Hwnd,win32con.WM_KEYUP,win32con.VK_TAB,0)

time.sleep(2)
print("VK_SPACE")
win32gui.PostMessage(Hwnd,win32con.WM_KEYDOWN,win32con.VK_SPACE,0)
win32gui.PostMessage(Hwnd,win32con.WM_KEYUP,win32con.VK_SPACE,0)

～非常に煩雑ですが大抵のWindowsクライアント環境はもちろんWindowsサーバ環境であっても保存ボタンが押下できる…はずです、まさか保存ボタン1つでこんなに悩むことになるとは…～
phpinfoのイースターエッグを確認してみた

## はじめに

2021/4/28のphperkaigiのLTにて
「4/1にphpinfoを見ると表示が変わる」
という情報を得たので実際に確かめてみました。

## 下準備

```php:test.php
<?php
phpinfo();
```

```bash
php -S localhost:8080
```

以下にアクセス
http://localhost:8080/test.php

## 4/1以外

![スクリーンショット 2021-04-02 9.24.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67471/3d288492-ba8c-9841-a687-110282278abf.png)

## 4/1


![スクリーンショット 2021-04-01 18.15.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67471/47037c32-5013-6cfc-2f2c-fd39522ec37f.png)

右上のphpのロゴがelePHPantくんになってる！

## 解説

[phpのソース](https://github.com/php/php-src/blob/90da9bf53b22ecd47d7615b9963603315af03495/ext/standard/info.c#L778)にて4/1限定でロゴが変わるようになっている。

```c:info.c
            php_info_print("<a href=\"http://www.php.net/\"><img border=\"0\" src=\"");
	        if (ta && (ta->tm_mon==3) && (ta->tm_mday==1)) {
		        php_info_print(PHP_EGG_LOGO_DATA_URI "\" alt=\"PHP logo\" /></a>");
	        } else {
		        php_info_print(PHP_LOGO_DATA_URI "\" alt=\"PHP logo\" /></a>");
			}
```

ちなみにロゴの変更は期間限定？のようでremoveする[プルリク](https://github.com/php/php-src/pull/6835/commits/722d1497c9b4b41e057348ffd7881de1e9ae0741)が作成されていました。

## まとめ

4/1限定のphpの小ネタを見ることができました。
ちなみにロゴは複数種類あったようです。
以下はphperkaigiのLTでこのネタを教えてくださった方。
おもしろネタをありがとうございました！

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">本日限定ロゴ<br>phpinfo();<br><br>どっかのタイミングで変わってたりする <a href="https://t.co/JfiO6B835s">pic.twitter.com/JfiO6B835s</a></p>&mdash; てきめん (@youkidearitai) <a href="https://twitter.com/youkidearitai/status/1377276729970974727?ref_src=twsrc%5Etfw">March 31, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
postgresでカンマ区切りのデータをばらしてほかのテーブルと結合したい

なんかもうタイトルから設計ミスのにおいがプンプンしますが最近ぶち当たったので備忘録。

テーブル　fruit_csv
|  id  |  fruit_names  |
| ---- | ---- |
|  1  |  りんご,すいか,もも  |

テーブル　fruit
|  id  |  fruit_name  |
| ---- | ---- |
|1|りんご|
|2|すいか|
|3|みかん|
|4|もも|

こういう二つのテーブルがあったとして、fruit_csv.fruit_namesをばらしてfruitからidを取得したい。

```
select
    fruit.id,
    t.fruit_name
from (
    select
        id,
        regexp_split_to_table(fruit_names, ',') as fruit_name
    from fruit_csv
) t
inner join fruit
    on t.fruit_name = fruit.fruit_name
;
```

regexp_split_to_table(カラム名, ',')で指定してあげてください。
また、サブクエリにしてあげないと条件を付けられないので注意してください。
WHERE句などの絞り込みも同様ということです。

|  id  |  fruit_name  |
| ---- | ---- |
|1|りんご|
|2|すいか|
|4|もも|

こんな感じでとってこれました。
カンマ区切りでfruit.idを返してほしいな～って思ったら
WITH句を使います。

```
with main as (
    select
        t.id,
        fruit.id as fruit_id
    from (
        select
            id,
            regexp_split_to_table(fruit_names, ',') as fruit_name
        from fruit_csv
    ) t
    inner join fruit
        on t.fruit_name = fruit.fruit_name
)
select
    distinct id,
    array_to_string(
        array(
            select main.fruit_id
            from main
        ),
    ',') as fruit_id
from main;
```


|  id  |  fruit_id  |
| ---- | ---- |
|1|1,2,4|

でも正直こんなことしないでテーブルを変えるなり何か別な方法を取ったほうがいいと思います。
書いてから思いましたけどIDから名前とってくる例のほうがよかったですね。。まあいいか…
環境変数の設定方法

# 前置き
今回は.envに記載する方法を用いての環境変数の設定の説明したいと思います。
初学者の説明ですので不備など気なる点がありましたらコメントください。
railsの環境構築は省略しますのでご了承お願いします。
#手順
railsで.envのを使用するにはまずgemをインストールする必要があります

```ruby:Gemfile
group :development, :test do
#以下を追加
gem 'dotenv-rails'
end
```
```ruby:ターミナル
bundle install
```
__注意__
今回、本番環境ではherokuを想定しているためdevelopment ：testに記入してます
もしAWSのEC2にデプロイする際はrubyとかrailsのバージョンとか書いてる列に記述する

__bundle install__したら
カレントディレクトリ(gemfileとかが置いてあるとこ)に.envのfileを作成する

その後__application.rb__に以下を追記する

```ruby:config/application.rb

module BlogAppIk
  class Application < Rails::Application
    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 6.0
     
     
#以下を追加する
    if Rails.env.development? || Rails.env.test?
    Bundler.require(*Rails.groups)
    Dotenv::Railtie.load
   end
   ...
```
__コード説明__

```
if Rails.env.development? || Rails.env.test?
```
上記のコードはテスト環境または開発環境の時のみ.envを読み込むようにする

```
Bundler.require(*Rails.groups)
    Dotenv::Railtie.load
```
上記は.envを読み込む設定コード

ここまできたら設定は終了、あとは.envに環境変数を設定して、コンソールでしっかりと取得できるか確認する



```ruby:.env
TOKEN = 'AAAAAA'
```
確認作業なので変数は適当に設定okです
記述したら__rails c__でコンソール立ち上げてで確認

```ruby:コンソール
:001:0\> ENV['AWS_API_TOKEN']

=> "AAAAAA"
```
上記のように設定した値が取得できたらOK!

#注意点
__.envはgithubに絶対あげない__
なぜか？
__機密情報を外部に漏らさないため__
awsのキーやトークンを設定を記述している場合.envをgithubにアップしてしまうと機密情報が公開されてawsのキーやトークンを盗まれて高額請求されることがあるから
__対策__
.gitignoeに.envを追加する
.gitignoeに追加すると.gitignoreに書いてあるfileはgitの対象外にするためgithubにあがらない

.gitignoeに記述しているファイル、フォルダは灰色になる

以上で説明になります誰かの参考になればと思います
Vue.jsで[The “data” option should be a function that returns a per-instance value in component definitions.]という警告が表示されたときの対処法

Vue.jsでdataプロパティを触っているとき

```
The “data” option should be a function 
that returns a per-instance value in component definitions.
```
というエラーが表示され怒られました。
エラーの解消方法について、備忘録の意味をこめて残しておきます。

Vueにおけるdataプロパティやelプロパティは、関数として定義する必要があります。
<a href="https://jp.vuejs.org/v2/guide/components.html">Vue.jsの公式サイト</a>でもそのように記載されています。


```Vue.js
export default {
  data {
      results: [
        {
          title: "the very first post",
          abstract: "lorem ipsum some test dimpsum",
        },
        {
          title: "and then there was the second",
          abstract: "lorem ipsum some test dimsum",
        },
      ],
    };
  }

```
エラーが表示されていた時は、このように記載していましたがそれを....

```Vue.js
export default {
  data() {
    return {
      results: [
        {
          title: "the very first post",
          abstract: "lorem ipsum some test dimpsum",
        },
        {
          title: "and then there was the second",
          abstract: "lorem ipsum some test dimsum",
        },
      ],
    };
  }

```
と記載し関数として定義してあればOK。エラーが解消されます。

関数として定義する理由は、dataプロパティやelプロパティは、全インスタンス間でまたいで同じものが使用されるプロパティで
関数として定義することで、各インスタンスに返されるデータを独立して保持するためです。<br>

●参考サイト：<a href="https://yoshikiito.net/blog/archives/2275/">テストウフ</a>

以上となります。
カード案内サイト(Vue)を作ってみよう！

ポートフォリオとして制作したカード案内サイトの制作過程をまとめました。

ポートフォリオとGitHubは下記でございます。

ポートフォリオ「カード案内サイト(Vue)」URL
https://takayuki007.github.io/card-guide/

GitHub
https://github.com/takayuki007/card-guide



#1、要件概要

**導入**

JavaScriptのフレームワークであるVueを通じてクレジットカードの案内サイトを作ってみます。以前、jQueryとJavaScriptで同じようなサイトを作っていますが、今度はそれをVueで作ってみます。

**そこで**

HTML／CSSは同じでJavaScriptの処理だけ、Vueで書きます。

**同じようなところはあるか？**

カテゴリー分けのサイト
https://kakaku.com/card/

ポイント羅列のサイト
https://hoken-all.co.jp/media/creditcard-ranking/

部門ごとに専門家が分析したサイト
https://diamond.jp/articles/-/189805


#2、サービス概要

選択肢を選んでいくだけでピッタリのクレジットカードが表示される。そして、そのクレジットカードのポイントも少し解説されている。

**要件定義(10分)**

* PCとスマホで見られるレスポンシブデザインにする。
* 1ページでの構成とし、JavaScriptで表示、非表示を切り替える。
* 2つの選択肢を進むと最終的におすすめのカードが提示される。

**ページ構成(5分)**

* TOPページ

**画面設計&デザイン作成**

* PC(65分)
* スマホ(30分)

**環境構築(15分)**

* Vue CLIを用いて環境構築

参考URL：
https://qiita.com/567000/items/dde495d6a8ad1c25fa43

#3、実装

まずはHTMLを作成。その後にCSSを当てていく。

**HTML(30分)**

***
**意識したこと**

DOM操作で表示と非表示を切り替えるので、選択肢やカードの紹介をそれぞれ全てdiv要素で囲んでおかないとまとめて切り替えられないので、その部分は意識してコードを書きました。
***

**CSS**

PC画面用

* header部分(10分)
* presentation部分(10分)
* question部分(25分)
* answer部分(20分)

スマホ画面用

* header部分(10分)
* presentation部分(5分)
* question部分(15分)
* answer部分(10分)

HTML／CSSが完了したので、Vueの実装に入る。

処理としては、見えてほしくないところにはinvisibleのクラスをつけ、見せたいところはこのクラスを外す。このクラスの付け替えで見せる、見せないを対応する。

**Vue(255分)**

* クラスの付け替えで表示、非表示を切り替え。
* アニメーションもなく切り替わると切り替わったかどうかわかりにくいので、表示される要素にはanimationを使う。

参考URL：
https://qiita.com/wintyo/items/87565805174dca8c2105
***
**苦労したこと**

sassの導入。
スマホにも対応したかったのでVueにsassを導入することにしたが、node-sassとsass-loaderのバージョン違いでうまく動作せず、その修正に時間を取られてしまった。

参考URL：
https://qiita.com/pinalto/items/d2eeda06d49740d905ca
https://qiita.com/terufumi1122/items/6747cfed10b60e3c7fa1
https://qiita.com/TK-C/items/c501e631494d11d5d6d2

アニメーションの処理
Vueでは`<transition>`で要素を囲むことによりCSSでアニメーションを導入できるが、処理がうまくできず今回はjQueryで代用。

参考URL：
https://qiita.com/DaisukeNishi/items/cf871644401f745054d8
https://qiita.com/kira-0521/items/59c4bd74c3a56a7388f7

`v-show`で要素を表示、非表示の切り替え処理
`v-bind:class`で`invisible`クラスを付け替えることで表示、非表示を処理をしていたが、Q2の選択肢を回答するとそのも問題が消えないことが判明。一度クラスを付与したものは削除できなかったので、`v-show`をQ2のみ導入。無事にQ2を回答するとQ2が非表示になる処理を実現できた。

参考URL：
https://qiita.com/yuta-38/items/b46a1600c97d16874000#v-if%E3%81%A8v-show%E3%81%AE%E9%81%95%E3%81%84
***


#4、テスト(ローカル)

表示崩れや見にくい部分がないかのチェックとVueがきちんと機能しているかを確かめる。

* PC画面(5分)
* スマホ画面(5分)



# 5、本番デプロイ

今回はGithub pagesを利用して公開することにしました。

**Github pagesにデプロイ(10分)**

* Githubにプッシュする。
* Githubの設定からGithub pagesの設定をし、公開。
***
※苦労したこと

jQueryやJavaScriptの時はルートディレクトリを公開すればそのまま公開できたが、今回は新たにビルドしたディレクトリとファイルを公開しなければいけないことが判明。その作業に少し苦労した。

参考URL：
https://qiita.com/kuimac/items/9cfd08b2c3df871a5f56
***


#6、テスト(本番)

表示崩れや見にくい部分がないかのチェックとVueがきちんと機能しているかを確かめる。

* PC画面(5分)
* スマホ画面(5分)

スマホで見た際に、`presentation`クラスの箇所があるため、公式サイトのリンクが画面から見切れてしまう。カードの提案画面が出たら、このテキストは必要ないとも思うので、カードの提案画面になったらこのテキスト部分を非表示にし、リンクをスクーロールをしなくても表示されるようにした。

再度テスト

* PC画面(5分)
* スマホ画面(5分)



#7、まとめ

**全体として555分。1人日を8時間とした場合は、1.5人日での完成でした。**

今回のHTMLとCSSはjQueryのものを使い回していますが、想定としては1から作ったと想定して時間を計算しています。Vueの処理は以前扱ったことがあるので頭ではわかっていましたが、久々に触ってみると忘れていて時間がかかってしまいました。JavaScriptのフレームワークはよく使われるので、きちんと慣れておきたいです。
FirefoxのDuckDuckGoで日本語検索する

## Firefox標準のduckduckgoで検索すると中国語のページが出てくる
標準のDuckduckgoでも日本語検索できるじゃん？　と思いますよね。でもそうじゃないんだわ。漢字一文字の検索をしてみてください。中国語のページがたくさんヒットします。
これを避ける方法です。

## やりかた
1. アドオンの[Add custom search engine](https://addons.mozilla.org/ja/firefox/addon/add-custom-search-engine/)をインストールする
1. Add custom search engineの設定を開く
1. https://duckduckgo.com/?q=%s&kp=-2&kl=jp-jp をURL欄に貼る
1. 追加する

以上です。

## クエリーの説明
1. `&kl=`は検索地域の指定。`jp-jp`は日本。
1. `&kp`はセーフサーチの指定。`-2`はセーフサーチ無効（一応）。
【備忘録】cakephp4の初期設定

# cakephp4の導入の備忘録
毎回初期導入方法忘れるので細かいところまでメモ。

【環境】
`xammp`を使用
PHP:8.0.1
MySQL
※開発にcakephp2使ったりcakephp4使ったりしているので[xampp内で複数phpバージョンを切り替える方法](https://qiita.com/shie-works/items/65234ffb6753e277d621)がとても参考になりました。
※ただphp5.Xに切り替えるとphpmyadminが使えないですが、正直データベースは`A5:SQL Mk-2`使っているので特に問題ないかも。

## インストール
```:compserのアップデート
$ composer self-update
```

インストールしたいディレクトリでターミナル起動。

```:cakephp4インストール
// app:4.*のところはインストールするバージョンにする
$ composer create-project --prefer-dist cakephp/app:4.* <フォルダ名>
```

```:起動確認
$ cd <フォルダ名>
$ bin/cake server
```

表示された `http://localhost:8765` にアクセスできればおｋ。

## 初期設定

### config/.env

`config`ディレクトリの`.env.example`を`.env`にリネーム。
`APP_NAME`と`LOCALE`と`TIMEXONE`と`SECURITY_SALT`を変更。

.envはgit管理しないこと（githubとかでは基本デフォで管理からはずれるっぽい？）
プロジェクトで共有するなら.env.exampleのほうを安全なところで共有するらしい

```
export APP_NAME="my-se"                     //"__APP_NAME__"を適当な内容に変更
export APP_DEFAULT_LOCALE="ja_JP"           //"en_US"を変更
export APP_DEFAULT_TIMEZONE="Asia/Tokyo"    //"UTC"を変更
export SECURITY_SALT="__SALT__"             //適当な値を入れる　英数字記号混ぜて50文字くらい？
```

ちなみにいつも[ここ](http://www.japan9.com/cgi/rand_num.cgi)でランダム文字は生成してます。

### config/bootstrap.php

`config`ディレクトリの`bootstrap.php`内の以下コメントアウトされているのを外す。

```php:bootstrap
if (!env('APP_NAME') && file_exists(CONFIG . '.env')) {
    $dotenv = new \josegonzalez\Dotenv\Loader([CONFIG . '.env']);
    $dotenv->parse()
        ->putenv()
        ->toEnv()
        ->toServer();
}
```

`.env`ファイルが読み込まれるようになる。


### config/app_local.php

ローカル環境だと`app_local.php`が優先されてデータベースが読み込まれるらしい。

```php:app_local.php
    'Datasources' => [
        'default' => [
            'host' => 'localhost',
            'username' => 'root',
            'password' => '',
            'database' => 'my_database',      //データベース名
            'url' => env('DATABASE_URL', null),
        ],
        //~~~~~~~~//
    ],
```

ローカル環境で開発するときいつも`username`は`root`のまんまで、`password`も空にしちゃってるんだけどいいんだろうか。
本番じゃないしローカルだけだからいいかぐらいなんですけども。
【メモ】新しい「Webアクセシビリティ」の考え方

##WAIによる「Webアクセシビリティ」
W3Cでアクセシビリティを担当しているWAI（Web Accessibility Initiative）によると、**「Webアクセシビリティとは、障害を持った方がWebを使えるようにすることを意味する」**と定義されています。

>Web accessibility means that people with disabilities can use the Web.  - [WAI（Web Accessibility Initiative）](https://www.w3.org/WAI/fundamentals/accessibility-intro/#what)

##新しい「Webアクセシビリティ」
**「Webアクセシビリティは、障害を持った方だけではなく、あらゆる人がWebを使えるようになることである」**という新しい考え方が世界で広がりつつあります。

2014年4月に韓国・ソウルで開催された国際的カンファレンスである『Web for All Conference』におけるテーマは “The New Accessibility” でした。

公式サイトでは、**「アクセシビリティは障害を持った方だけのものだと考えられてきたが、もはやそうではなくなってきている。...あらゆる状況で全ての人に使いやすくなってきている。...デバイスは多様になっていて、さまざまなコンテキストにおいて使い方も多様なのである。」**

>Accessibility was once viewed as benefiting people with disabilities only — not anymore! ... benefiting everyone in different situations to different degrees...devices are diverse and their use varies across every conceivable context. - [The 11th Web for All Conference](w4a.info/2014/)

###参考文献
[Webアクセシビリティとは？](https://weba11y.jp/basics/accessibility/accessibility_index/)
Ruby on Rails には基本的な理念や原則が存在する

#はじめに
Webアプリケーションのフレームワークには、根本的な考え方があり、理念や原則が存在します。

本記事では、Ruby on Railsの理念や原則、そしてなぜそれが必要なのかを説明します。

#Ruby on Railsでは原則無駄のないコードを記述していくこと
Ruby on Railsでコードを書く時には、同じ情報を繰り返し記述することは避けるべきとされています。これ以降はRuby on Railsで掲げられている理念と、原則について説明します。

#DRY（Don’t Repeat Yourself）という考え方
DRYとは同じ情報を繰り返し記述、定義しないという考え方です。

同じコードを繰り返し書かないので、可読性の向上やコード量を減らすことによりアプリケーションの負荷を下げ、動作が早くなるという利点があります。また、修正工数も減りミスによるバグも少なくなります。

#CoC（Convention Over Configuration）という考え方
設定よりも規約を優先するという考え方です。

Railsにはコマンドが設定されそれを実行することでアプリケーションを作成していたかと思います。

ゼロから自身で設定するのではなく「設定よりも規約を優先」して作業していたということになり、これこそがCoCという考え方になります。

CoCを意識する利点としては、「すでに定義されている処理を利用する」ことで開発スピードが上がり質も担保できることや、規約は開発者同士の共通認識であるため可読性が向上することなどが挙げられます。


#ディレクトリの階層もCoCの考え方に則っている
ディレクトリ階層も規約に則って整理されています。
各ディレクトリの役割について以下に示します。
*後から生成されるディレクトリもありますが、以下はデフォルトの状態です。

###app
MVCに関するファイルなどを格納している、アプリケーションの主要ディレクトリ。

###bin
Binary Codeの略。コマンドなどで実行するファイルが格納されている。

###config
アプリケーションの設定関係のファイルが格納されている。

###db
データベースに関するファイルが格納されている。

###lib
libraryの略で、基本的なライブラリが格納されている。

###log
アプリケーションが動いている間の記録などのファイルが格納されている。

###node_modules
nodeのパッケージが格納されている。

###public
デフォルトで表示される画面の情報などが格納されている。

###storage
画像などをアプリケーション自体に保存する際に使用するディレクトリ。

###test
アプリケーションのテストを行う際に使用するファイルを格納するディレクトリ。

###tmp
アプリケーションが起動している際の一時的な情報を格納するディレクトリ

###vendor
イブラリ(Gem)などをアプリケーション自体にインストールする際に使用するディレクトリ。

#オブジェクト指向
オブジェクト指向とは、すべてを「モノ」として考える方針のことをいいます。

Ruby on Rails自体もオブジェクトの集合体であり、オブジェクト指向の考えに則って作られています。

モデル、ビュー、コンローラーはそれぞれ専用の役割を持ったオブジェクトであり、目には見えないが役割がはっきりとした処理で成り立っています。

すなわち、「モデル」「ビュー」「コントローラー」はそれぞれ専用の役割を担ったオブジェクトです。

#まとめ
Ruby on Railsに限らず、Webアプリケーションのフレームワークには、根本的な考え方には、無駄がなく、自分以外の人にも見やすいようコードを書くべきであるというものがあります。

これらはチームでの開発やアプリケーションに負荷をかけないなどの効率的に開発をしていくよう、フレームワークの開発者が道標を用意してくれているものです。

技術を磨いていく中に、仕事の全体の流れを見据えて開発することが求められますし、またエンジニアとしての重要な資質の１つであると思います。

以上です。
Elementとは？？

今回は、JSでの要素の取得と書き換えについて学習していきます。

#getElement


```index.html
<p id="choice">日時を表示します</p>
  <script>
    'use strict';

  document.getElementById('choice').textContent = new Date();
  </script>
```

document.getElementById('id')▶　特定のidをもつ要素を取得する
これで、choiceを取得することができました。
次に、これを書き換えて行きます。

document.getlementById('id').textContent = 書き換えたい文字列
にすることで、書き換えることができます。

![スクリーンショット 2021-04-06 11.03.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1033397/887a4bf3-3490-bd66-c63b-0ea15e6a1877.png)



#elementオブジェクトとは？？
HTMLの中にある要素を内包したオブジェクトのことです。
いくつかありますが、id,classname,innerHTML,clientHeight,childNodesなどがあります。
Element　▶　HTMLにおける要素（タグ）になります。

その他にも、createElementでは、HTMのタグを生成することもできます。
カード案内サイト(JavaScript)を作ってみよう！

ポートフォリオとして制作したカード案内サイトの制作過程をまとめました。

ポートフォリオとGitHubは下記でございます。

ポートフォリオ「カード案内サイト(JavaScript)」URL
https://takayuki007.github.io/cardGuid-JavaScript-/index.html

GitHub
https://github.com/takayuki007/cardGuid-JavaScript-



#1、要件概要

**導入**

JavaScriptのDOM操作を通じてクレジットカードの案内サイトを作ってみます。以前、jQueryで同じようなサイトを作っていますが、今度はそれをJavaScriptで作ってみます。

**そこで**

HTML／CSSは同じでjQueryの処理だけ、素のJavaScriptで書きます。

**同じようなところはあるか？**

カテゴリー分けのサイト
https://kakaku.com/card/

ポイント羅列のサイト
https://hoken-all.co.jp/media/creditcard-ranking/

部門ごとに専門家が分析したサイト
https://diamond.jp/articles/-/189805



#2、サービス概要

選択肢を選んでいくだけでピッタリのクレジットカードが表示される。そして、そのクレジットカードのポイントも少し解説されている。

**要件定義(10分)**

* PCとスマホで見られるレスポンシブデザインにする。
* 1ページでの構成とし、JavaScriptで表示、非表示を切り替える。
* 2つの選択肢を進むと最終的におすすめのカードが提示される。

**ページ構成(5分)**

* TOPページ

**画面設計&デザイン作成**

* PC(65分)
* スマホ(30分)

**環境構築(15分)**

* node-sassを用いてsass環境を構築


#3、実装

まずはHTMLを作成。その後にCSSを当てていく。

**HTML(30分)**
***
**意識したこと**

JavaScriptのDOM操作で表示と非表示を切り替えるので、選択肢やカードの紹介をそれぞれ全てdiv要素で囲んでおかないとまとめて切り替えられないので、その部分は意識してコードを書きました。
***
**CSS**

PC画面用

* header部分(10分)
* presentation部分(10分)
* question部分(25分)
* answer部分(20分)

スマホ画面用

* header部分(10分)
* presentation部分(5分)
* question部分(15分)
* answer部分(10分)

HTML／CSSが完了したので、JavaScriptの実装に入る。

処理としては、見えてほしくないところにはinvisibleのクラスをつけ、見せたいところはこのクラスを外す。このクラスの付け替えで見せる、見せないを対応する。

**JavaScript(80分)**

* クラスの付け替えで表示、非表示を切り替え。
* アニメーションもなく切り替わると切り替わったかどうかわかりにくいので、表示される要素にはanimationを使う。

参考URL：
https://www.hypertextcandy.com/vanilla-javascript-event
https://techacademy.jp/magazine/27860
***
**苦労したこと**

jQueryだとメソッドチェーンで処理をつなげて記述できるが、JavaScriptだとそれができないことを忘れていて、実装の仕方を調べるのに苦労した。
***
参考URL：
https://qiita.com/sawapi/items/279531c88709700d0ff1



#4、テスト(ローカル)

表示崩れや見にくい部分がないかのチェックとJavaScriptがきちんと機能しているかを確かめる。

* PC画面(5分)
* スマホ画面(5分)



# 5、本番デプロイ

今回はGithub pagesを利用して公開することにしました。

**Github pagesにデプロイ(10分)**

* Githubにプッシュする。
* Githubの設定からGithub pagesの設定をし、公開。



# 6、テスト(本番)

表示崩れや見にくい部分がないかのチェックとJavaScriptがきちんと機能しているかを確かめる。

* PC画面(5分)
* スマホ画面(5分)

スマホで見た際に、presentationクラスの箇所があるため、公式サイトのリンクが画面から見切れてしまう。カードの提案画面が出たら、このテキストは必要ないとも思うので、カードの提案画面になったらこのテキスト部分を非表示にし、リンクをスクーロールをしなくても表示されるようにした。

再度テスト

* PC画面(5分)
* スマホ画面(5分)



# 7、まとめ

**全体として380分。1人日を8時間とした場合は、0.7人日での完成でした。**

今回のHTMLとCSSはjQueryのものを使い回していますが、想定としては1から作ったと想定して時間を計算しています。イメージした通りにサイトができたので、非常に満足です。次はVueで書いてみたいです。
不要なサービスを止める【Windows】

Windowsは基本的に最初からある程度利用が可能になるように大抵のサービスを稼働させた状態で展開していきます。
正直セキュリティ的な問題やメモリ、CPUのリソースを一定量消費させる（通常は気にならない程度）ものなので、不要なサービスは極力設定を止めても良いと思います。

ただし、サービスはソフトウェアや各アプリなど利用していることもあるため、一概にこれが不要/必要という判断はある程度専門的知見を要します。

```
REM 保護者による制限
sc config "WpcMonSvc" start=Disabled
REM 市販でもサービス
sc config "RetailDemo" start=Disabled
REM Xbox関連
sc config "XboxGipSvc" start=Disabled
sc config "XblAuthManager" start=Disabled
sc config "XblGameSave" start=Disabled
sc config "XblAuthManager" start=Disabled
sc config "XboxNetApiSvc" start=Disabled
REM データ使用状況
sc config "DusmSvc" start=Disabled
REM Smart Card関連
REM E-Tax関連で使用する
REM Smart Card Removal Policy(スマート カードの取り出しポリシー)
sc config "SCPolicySvc" start=Disabled
REM Smart Card Device Enumeration Service()
sc config "SCDeviceEnum" start=Disabled

sc config "WerSvc" start=Disabled
sc config "icssvc" start=Disabled
sc config "Fax" start=Disabled

sc stop "LanmanServer"
sc config "LanmanServer" start=Disabled

sc config "AppMgmt" start=Disabled
sc config "PeerDistSvc" start=Disabled

sc stop "TrkWks"
sc config "TrkWks" start=Disabled
```
【Swift】【Xcode】Option + クリックで画面の分割ができなくなったら

# どういうことか

たとえばStoryboardやxibをControllerに繋ぐ際は画面分割をしたほうが断然便利だが、Option（Alt） + ファイルをクリックしても分割で表示させることができなくなってしまった。XcodeやMacの再起動も試したがダメだった。

## 解決策

左上のコレ

![46d3cd81aabde4f45e5b737d95bd0a87.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/413699/d34e3bcb-5ccb-caf3-379b-a069ed5f51fd.png)

をクリックする。
おわり。

Xcodeはバグが多いのでバグを疑ってしまった。スマン(´・ω・｀)
binding.pryでデバッグするとターミナルがpage breakする

#下記のような現象
railsのデバッグ機能で調べたいところにbinding.pryを挿入してWEB上で実際に動かしターミナルで内容を調べようとすると情報が多いと制限される

```:ターミナル
hogehogehoge
--- Press enter to continue ( q to break ) ---
```

enterを押すと１行ずつ追加で内容が表示されるという
めんどくさいので以下のように解決

#解決法
railsプロジェクトのhomeディレクトリ直下に .pryrc ファイルを作り以下を記述

```ruby:.pryrc
Pry.config.pager = false  #永続的にページングを無効にする
```

これで立ち上げ直してもう一度pryでデバッグすればpageが無効になる

#参考にさせてもらったURL
https://github.com/pry/pry/wiki/Customization-and-configuration#Config_pager

https://qiita.com/rorensu2236/items/fa6ae564bc5547556518
カード案内サイト(jQuery)を作ってみよう！

ポートフォリオとして制作したカード案内サイトの制作過程をまとめました。

尚、ポートフォリオとGitHubは下記でございます。

ポートフォリオ「カード案内サイト(jQuery)」URL
https://takayuki007.github.io/cardGuide-jQuery-/index.html

GitHub
https://github.com/takayuki007/cardGuide-jQuery-


#1、要件概要

**導入**

jQueryのDOM操作を通じてクレジットカードの案内サイトを作ってみます。クレジットカードは多種多様なカードが発行されており、どれを選んだら良いかわからない状態で案内サイトのようなものがあれば便利だと考えました。

**そこで**

Yes／No選択肢を用意し、選択肢によってカード選択ができるようなサービスを作ろうと思います。

**同じようなところはあるか？**

カテゴリー分けのサイト
https://kakaku.com/card/

ポイント羅列のサイト
https://hoken-all.co.jp/media/creditcard-ranking/

部門ごとに専門家が分析したサイト
https://diamond.jp/articles/-/189805



#2、サービス概要

選択肢を選んでいくだけでピッタリのクレジットカードが表示される。そして、そのクレジットカードのポイントも少し解説されている。

**要件定義(10分)**

* PCとスマホで見られるレスポンシブデザインにする。
* 1ページでの構成とし、jQueryで表示、非表示を切り替える。
* 2つの選択肢を進むと最終的におすすめのカードが提示される。

**ページ構成(5分)**

* TOPページ

**画面設計&デザイン作成**

* PC(65分)
* スマホ(30分)

**環境構築(15分)**

* node-sassを用いてsass環境を構築
* cdnを用いてjQuery環境を構築


#3、実装

まずはHTMLを作成。その後にCSSを当てていく。

**HTML(30分)**

***
**意識したこと**

jQueryのDOM操作で表示と非表示を切り替えるので、選択肢やカードの紹介をそれぞれ全てdiv要素で囲んでおかないとまとめて切り替えられないので、その部分は意識してコードを書きました。
***
**CSS**

PC画面用

* header部分(10分)
* presentation部分(10分)
* question部分(25分)
* answer部分(20分)

スマホ画面用

* header部分(10分)
* presentation部分(5分)
* question部分(15分)
* answer部分(10分)

参考URL：
https://wwg.co.jp/blog/3807
https://bbh.bz/2019/08/27/expansion-at-mouseover/

HTML／CSSが完了したので、jQueryの実装に入る。

処理としては、見えてほしくないところにはinvisibleのクラスをつけ、見せたいところはこのクラスを外す。このクラスの付け替えで見せる、見せないを対応する。

**jQuery(40分)**

* クラスの付け替えで表示、非表示を切り替え。
* アニメーションもなく切り替わると切り替わったかどうかわかりにくいので、表示される要素にはfadeInを使う。

参考URL：
https://qiita.com/dorara/items/82afce5109605767ca2a



#4、テスト(ローカル)

表示崩れや見にくい部分がないかのチェックとjQueryがきちんと機能しているかを確かめる。

* PC画面(5分)
* スマホ画面(5分)


#5、本番デプロイ

今回はGithub pagesを利用して公開することにする。

**Github pagesにデプロイ(5分)**

* Githubにプッシュする。
* Githubの設定からGithub pagesの設定をし、公開。


#6、テスト(本番)

表示崩れや見にくい部分がないかのチェックとjQueryがきちんと機能しているかを確かめる。

* PC画面(5分)
* スマホ画面(5分)

スマホで見た際に、presentationクラスの箇所があるため、公式サイトのリンクが画面から見切れてしまう。カードの提案画面が出たら、このテキストは必要ないとも思うので、カードの提案画面になったらこのテキスト部分を非表示にし、リンクをスクーロールをしなくても表示されるようにした。

再度テスト

* PC画面(5分)
* スマホ画面(5分)



#7、まとめ

**全体として335分。1人にちを8時間とした場合は、0.6人日での完成でした。**

イメージした通りにサイトができたので、非常に満足です。次は素のJavaScriptで書いてみたいです。
Active Storage のバリデーションをgemで実装する

Rails5くらいから登場したActive storageですが、バリデーションをかけようとする人がいないのかバリデーションのやり方がまじでわからんかったのですが、このgemを作ってくれた人であるgithub名aki77さんのおかげでめちゃくちゃやりやすくなりましたので、今回はそのやり方を解説していきたいと思います。
今回私がやりたかったこととしては動画投稿専用ページには画像をされたくないので、動画以外のものは投稿できないようにしようと思いました。なのでこちらのgemを使わせていただきました。
今回はこちらのgemの使い方を解説していきたいと思います。
まずgemfileに

```
gem 'activestorage-validator'
```
を記述します。その後に

```
bundle istall
```
dockerを使っている人は

```
docker-compose run --rm web bundle istall
```
をしたあとにきちんと

```
docker-compose build
```
をしましょう

そして、投稿するファイルについてのモデルに記述をします。
投稿するファイルについてのモデルとは何かというとActive Storageでは

`has_one_attached`や`has_many_attached`の記述があるモデルのファイルです。

そちらのファイルに

`validates :movie, presence: true, blob: { content_type: :video }｀

と書きましょう。
バリデーションをかけたいものがimageの場合は
`validates :(名前), presence: true, blob: { content_type: :image }｀
となります。
(名前)の部分には各々決めた変数名を記述してください。()はいらないですよ。
それでかんりょうです。

#出典
https://github.com/aki77/activestorage-validator
【Vue.js】v-htmlとは

vueを基礎から学び直しています。

## v-htmlについて
```html
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id="app">
  <div>{{ html }}</div>
  <div v-html="html"></div>
</div>
```

```javascript
new Vue({
	el: '#app',
  data: {
  	html: '<h2>h2です<h2>',
  }
})
```

## 表示結果
![スクリーンショット 2021-04-06 9.35.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628093/c099a5e7-3670-57c1-e81b-9570e298c959.png)

v-htmlを使うと、htmlのタグが適用されてh2の表示となる。
逆に、二重中括弧を使って{{ html }}とすると、``<h2>h2です<h2>``という表示になる。
Propsの使い方[React]

#Propsとは

親コンポーネントから子コンポーネントへ受け渡すときに使います。

今回の場合は、

 - 親コンポーネント：`App.jsx`
 - 子コンポーネント：`Button.jsx`

親が`import Button from './Button';`インポートして、`Button`コンポーネントを表示しています。
親から`Button`コンポーネントの`title`を変更しています。`Button.jsx`で`props`を使って受け取り、`{props.title}`と記述することで`title`を受け取ることができます。



```react:App.jsx
import React from 'react';
import Button from './Button';

const App = () => {
  return (
    <>
      <Button title='index'/>
      <Button title='show'/>
      <Button title='update'/>
      <Button title='destroy'/>
      <Button title='new'/>
    <>
  );
};

export default App;

```

```react:Button.jsx
import React from 'react';

const Button = (props) => {
  return (
    <>
      {props.title}
    <>
  );
};

export default Button;
```

#参考

[[公式のリンク]コンポーネントと props](https://ja.reactjs.org/docs/components-and-props.html)