OmniAICreator/Qiita-1.07M huggingface dataset:
Macのデフォの状態でとったスクリーンショットを整理するだけのメモ

#スクショの整理（日本語環境のMACのデフォの設定） 

日本語環境でMac（筆者はHigh Sierra）環境でスクショをとるとデスクトップに(スクリーンショット yyyy-mm-dd h.mm.ss.png)みたいな感じで保存されると思うのですが、けっこう鬱陶しいので（コマンドラインで設定すれば保存先も形式も設定出来ます、がデスクトップから即座に消えるのはそれはそれで探すのがめんどくさい）デスクトップにスクショがあるときに自動で日付順のディレクトリと名前に整理するだけのpythonプログラムを作りました

<img width="350"  alt="スクリーンショット 2020-04-23 1.01.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617323/10fce5f1-66a7-a0f1-de8b-7188f5c88f69.png">


---

```python:screenshot_sort_mac.py
#!/usr/bin/env python
# coding: utf-8


import os
import shutil

path = "/Users/user/Desktop/" # 保存先を
os.chdir(path)
files = os.listdir()


def change_file_name_png(x):
    str_files = x.replace(" ", "")
    str_files = str_files.replace(".", "")
    str_files = str_files.replace("-", '')
    str_files = str_files.replace("png", "")

    if "スクリーンショット" in str_files: # 二つのif文でファイル名を強引に簡単にしてる、for文等を使って連番にするのもよし
        str_files = str_files.replace("スクリーンショット", "Pict")
    else:
        break # スクリーンショット以外を処理させないため

    if "20" in str_files:
        cnt = str_files.index("20")

        file_date = str(str_files[4:10])
        str_files = str_files.replace(file_date, "")
    else:
        file_date = "PNG"

    if os.path.exists(path + "Screenshots/" + file_date + "/") == False:
        os.makedirs(path + "Screenshots/" + file_date + "/")
        os.chmod(path + "Screenshots/" + file_date + "/", 0o744)

    else:
        pass

    shutil.move(path + x, path + "Screenshots/" + file_date + "/" + str_files + ".png")

for i in files:
    if ".png" in i: # 移動するターゲットファイルの形式は自由に
        change_file_name_png(i)

print('finish')
```

---

MACのスクショは
`command + shift + 3 `　(4だと部分的なスクショも可能)
【初心者】YAML入門

Dockerを触ってみたりする中で、他の方が書いたMysqlとPHPMyAdminのコンテナをたてるdocker-compose.ymlとかをなんとなく調べて解読しながら読んだ事はありますが、、
そもそもYAMLの書き方について基礎的な知識がなく、基本的には読めないし書けないので、一度ゼロから入門してみたいと思います。

#YAMLとは
正式名称は「YAML Ain’t Markup Language」。マークアップ言語ではなく、
構造化されたデータを表現するためのフォーマット。
拡張子は「.yml」または「.yaml」を使用。

#YAMLで扱えるデータ型3つ

##スカラー
数字や文字列、真偽値などの基本的な値を表現できる。
※文字列のダブルクォートは省略も可

```yaml:YAML
    counts: 3
    author: "Qiita"
    rating: 3.3
    active: true
```
上記のYAMLデータをJSONに変換すると、以下のようになる。

```json:JSON
{
	"counts": 3,
	"author": "Qiita",
	"rating": 3.3,
	"active": true
}
```


##シーケンス(Sequence)
**要素の集合**で、**配列・リスト**のこと。
YAMLでは、行頭に「-」をつけることで配列を表現する。
「-」のあとに半角スペースを入れる。

```yaml:YAML
    languages:
     - Ruby
     - JavaScript
     - PHP
     - SQL
```
上記のYAMLデータをJSONに変換すると、以下のようになる。

```json:JSON
{
	"languages": [
		"Ruby",
		"JavaScript",
		"PHP",
		"SQL"
	]
}
```

##マッピング(Mapping)
YAMLでは**key：value**型のコレクションをマッピングとして表現できる。

```yaml:YAML
    spot:
      name: "Enoshima Aquarium"
      hours: "9:00〜17:00"
      price: 2500
      kindOfFish: 810
```
上記のYAMLデータをJSONに変換すると、以下のようになる。

```json:JSON
{
	"spot": {
		"name": "Enoshima Aquarium",
		"hours": "9:00〜17:00",
		"price": 2500,
		"kindOfFish": 810
	}
}
```

#コメント

```yaml:YAML
   # 生き物の情報
   name: jellyfish
```

#シーケンスとマッピングのネスト
シーケンスの中にマッピングをネストしたり、逆にマッピングの中にシーケンスをネストすることができる。

```yaml:YAML
    dolphin:
     - name: hope
       age: 9
     - name: atene
       age: 16
     - name : marin
       age: 18
```
上記のYAMLデータをJSONに変換すると、以下のようになる。

```json:JSON
{
	"dolphin": [
		{
			"name": "hope",
			"age": 9
		},
		{
			"name": "atene",
			"age": 16
		},
		{
			"name": "marin",
			"age": 18
		}
	]
}
```

#インライン記法
マッピングやシーケンスをJSONのようにインラインに記述可能

```yaml:YAML
    languages: [Ruby, PHP, JavaScript]

    student: {name: tanaka, age: 14}
```

```json:JSON
{
	"languages": [
		"Ruby",
		"PHP",
		"JavaScript"
	],
	"student": {
		"name": "tanaka",
		"age": 14
	}
}

```

マルチドキュメント
区切り文字としてアンダースコア３つ「___」を使うことで、１つのファイルに複数のドキュメントを区切って表現することが可能。

```yaml:YAML
    people:
     - name: abe
       age: 65
     - name: trump
       age: 73

---

    countory:
      - Japan
      - America
```


#特殊文字の扱い
YAMLでは、　 [] {} : > |.　などを文字列としてそのまま使うとエラーになる。
これらの文字を使うときはクオートで囲みましょう。

```yaml:YAML
    greeting: "[hello]>{world.}"
```

#改行を含む文字列
改行を含む文字列を扱うときは「|」を使う

```yaml:YAML
    introduction:　|
      HIGH
      MID
      LOW　
```
```json:JSON
{
	"introduction": "HIGH\nMID\nLOW\n"
}
```

#参考資料
[WINDIIテック>なんとなく使っていませんか？？YAMLの基本をまとめました！](https://tech.windii.jp/tool/yaml)
Angularでwebcomponentsを利用するときに発生したエラー

半年ぶりにwebcomponentsを触ったら、何もわからんという状態になったので起こったエラーと回避方法、発生条件を記載していく。

大体Angular Elementsでwebcomponentsを作成して、Angular上で動作確認している。

## DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "tag名" has already been used with this registry

Angular上だと２つ以上webcomponentsをimportすると発生するっぽい。
描画は普通にされる

## TypeError: n.createShadowRoot is not a function

WebComponents側で`encapsulation: ViewEncapsulation.Native`が設定されていると上記エラーが発生する。

なお、生のHTMLからだと普通に利用できたりする。(Deprecationは出る)(正確に言うとchrome 80だと表示できたがfirefox 75だと表示されなかった)

### 参考
https://stackoverflow.com/questions/34824758/angular2-exception-typeerror-el-createshadowroot-is-not-a-function-safari-edge
「dyld: Library not loaded: /usr/local/opt/openssl/lib/libssl.1.0.0.dylib」の解決法

# エラー

```
$ wget
dyld: Library not loaded: /usr/local/opt/openssl/lib/libssl.1.0.0.dylib
  Referenced from: /usr/local/bin/wget
  Reason: image not found
Abort trap: 6
```

# 解決策

```
brew uninstall --ignore-dependencies openssl
brew install https://github.com/tebelorg/Tump/releases/download/v1.0.0/openssl.rb
```

`brew` がない場合は事前に以下のコマンドを実施。

```
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
```

# 参考

- [dyld: Library not loaded error on macOS (OpenSSL missing) · Issue #86 · kelaberetiv/TagUI](https://github.com/kelaberetiv/TagUI/issues/86)
【Sequelize】日時の型指定の違いにより出力されるSQLが異なる

[前提]

- DBのstart_at, end_at共にTIMESTAMP型。
- Sequelizeのタイムゾーンは"+09:00"に設定（デフォルトはUTC）。

``` xxx.yml
sequelize:
  dialect: "mysql"
  timezone: "+09:00"
```

SequelizeでDATEとTIMESTAMPをそれぞれ指定した場合のSQLを出力してみる。
それぞれ以下の実行コードを実行する。

``` xxx.js
await Model.findAll({
    where: {
        startAt: {
            [Sequelize.Op.lt]: "2018-12-10 11:40:00",
        },
        endAt: {
            [Sequelize.Op.gt]: "2018-12-10 11:20:00",
        },
    },
});	
```

### 間違ってDATEを指定した場合

``` xxx.js
startAt: {
  type: Sequelize.DataTypes.DATE, // 本来は'TIMESTAMP'
},
endAt: {
  ttype: Sequelize.DataTypes.DATE, // 本来は'TIMESTAMP'
},
```

出力されるSQL

```
WHERE 'start_at' < '2018-12-10 20:40:00' AND 'end_at' > '2018-12-10 20:20:00'
```

### TIMESTAMPを指定した場合

``` xxx.js
startAt: {
  type: 'TIMESTAMP',
},
endAt: {
  ttype: 'TIMESTAMP',
},
```

出力されるSQL

```
WHERE 'start_at' < '2018-12-10 11:40:00' AND 'end_at' > '2018-12-10 11:20:00'
```

## SQLiteの場合

残念ながらカスタムタイムゾーンの設定はSQLiteではサポートされていません。

> Setting a custom timezone is not supported by SQLite, dates are always returned as UTC. Please remove the custom timezone parameter.

アプリケーションではMySQL、テストでSQLiteを使っている場合にタイムゾーンの違いで悩むかもしれません。

## さいごに

SequelizeのDATEとTIMESTAMPの型指定で出力されるSQLが異なる。
やはり日時はUNSIGNED BIGINT型を使い、UNIX時間で管理したい。
2038年まであと18年。

## 参考

https://docs.google.com/presentation/d/1TYctPPBhQR4vzFemnvaFzzMTBnrhSmKVFLGRKEIgO8U/edit#slide=id.p

https://dev.mysql.com/doc/refman/5.6/ja/datetime.html

https://qiita.com/ryokkkke/items/a007d5edd4d8e7484c56

https://qiita.com/TomK/items/132831ab45e2aba822a8
float、背景画像の可視性等


# はじめに

プログラミング初心者の学習記録です。

- 行ったこと
- つまずいたこと
- 新たな発見　等を書き溜めていきます。

#行ったこと
- ポートフォリオの目的と内容の決定
- ラフスケッチ作成
- 各ページ共通部分とトップページの作成

#つまずいたこと
- CSS Floatを使用した際、親要素のはみ出してしまう
  →親要素に```overflow: hidden;```を指定

- 背景画像の影響で、文字が見にくい　可視性を上げる為、背景画像を暗くしたい

HTML

```
    <div class="contents-bg">
        <div class="contents">
            <h1>Black Filter</h1>
        </div>
    </div>
```

CSS

```
.contents-bg {
    background-image: url(../images/sample-img.jpg);
    background-size: cover;
    background-position: center;
    height: 500px;
}
.contents {
    background-color: rgba(0,0,0,0.6);
    height: 500px;
}
```
EC2とRDSを使用し、RailsアプリをAWSにあげる際に詰まった点　-その1-　

# ●はじめに
下記の記事を参考にEC2とRDSへを使用しRailsアプリをAWSにデプロイする際に詰まった点と、その解消方法をまとめました。
[世界一丁寧なAWS解説。EC2を利用して、RailsアプリをAWSにあげるまで](https://qiita.com/naoki_mochizuki/items/f795fe3e661a3349a7ce)

# 1.EC2とRDSの接続
記事ではRDSを使用しない事を前提としており、DB、サーバー構築編でRDSの設定方法は記されていましたが、実際に接続する方法は記載されていませんでした。

###接続方法

```
$ mysql -h [DBインスタンスのエンドポイント] -u [ユーザー名] -p
```
ユーザー名はDBインスタンス作成時に登録したマスターユーザー名です。
DBインスタンスのエンドポイントは、AWSのページから作成したDBを選択すると確認できます。


#2.アプリのsecret_key_baseの設定
こちらはrails5.2以降の環境の人が対象です。
>config/secrets.ymlに記述されている、secrets_key_baseを変更

とありますが、rails5.2以降はsecret.ymlがなくなり、credentials.yml.encになっています。なので異なったやり方でsecret_key_baseを設定する必要があります。

###secret_key_baseの設定方法(rails5.2以降)
credentials.yml.encを変更する必要がありますが、直接エディタから編集する事はできません
編集するにはvimを使用します。

```
$ EDITOR=vim bin/rails credentials:edit
```
これはローカル環境で実行します。そうすると、このように表示されるはずです。

```ターミナル
# aws:
#   access_key_id: 123
#   secret_access_key: 345

# Used as the base secret for all MessageVerifiers in Rails, including the one protecting cookies.
secret_key_base: *************************************************************
```
ここで表示されるsecret_key_baseをコピーし、本番環境にも反映させてください。
同じく、EDITOR=vim bin/rails credentials:editです。

```
production:
    secret_key_base: *************************************************************
```

以上でEC2とRDSを使用し、RailsアプリをAWSにあげる際に詰まった点　-その1-　は終了です。
次回、デプロイ時に詰まった内容をまとめます。
Macの操作

#はじめに
・某プログラミング学習サイトでiPhoneアプリの作り方を学習しています。
・そもそもMacに触れるのが初めてです。
・プログラミング以前にMacの操作がままなりません。
・自分が行った操作は、このページに記録して覚えます。

#基本操作
・スクショ：「command」＋「shift」＋「3」キー
・やり直し：「command」+「z」
・カーソルの前を消す：delete
・カーソルの後を消す：fn + delete
XCodeエラー：Launch screens may not have triggered segues

#はじめに
Xcodeで、「初期画面にボタンを配置し、ボタンをタップしたら別画面に移動する」という動作を設計したところ、「Launch screens may not have triggered segues」というエラーが出た。
下記を参考に「Use as Launch Screen」のチェックを外したらエラーは解決したが、
シミュレーター起動時、表示されるはずのボタンが表示されない。
https://qiita.com/tattcho/items/cc2e1d7c6ba2f2489963

#解決方法
画面の設計を「Launch Screen.storyboard」で実行していたのが間違いだったようだ。「Main.storyboard」で画面を設計したら実行できた。

以上
【Swift】UITableView等で0件(empty)の時の表示方法まとめ

# DZNEmptyDataSet

超有名ライブラリ
Objective-C製で、Method Swizzling を使うことで、UITableViewDataSouceのメソッドを乗っ取ってDataが空の場合は別の処理が呼ばれるようになっている。
Method Swizzlingを使わずにこれをSwiftで実現できたらいいのになぁと思う。

DZNEmptyDataSet: GitHub
https://github.com/dzenbot/DZNEmptyDataSet

# EmptyStateKit

Swift製で、Empty用のDelegateとDataSourceをセットして、Dataが空の場合にshow()を叩くことでEmpty用のViewを表示させるようになっている。
魔法が使われていないのでコードをみたら実装がだいたいわかる。
これならライブラリを使わなくてもいいけど、使うと全体的に実装が強制的に同じ様になるんでいいかも。

EmptyStateKit: GitHub
https://github.com/alberdev/EmptyStateKit

# 自分でやるなら

UITableViewのtableHeaderViewにEmptyViewを入れておいて、Dataが空かどうかによってSizeを設定することでEmptyViewを表示させたり非表示にしたりする。
以下Sampleです。Protocol作ってみてますが、なくてもいいっちゃいいです。ViewControllerには4行ぐらい書けばいいので。

TableHeaderViewが使えないならFooterを使って、それでもだめだったり、CollectionViewだったらEmptyViewをTableViewにaddSubViewして、Hiddenで管理するようにしてもいいですね。違いは、スクロールできないぐらいなので。

```swift
protocol TableViewEmptyDisplayable {
    
    associatedtype EmptyViewType: EmptyView
    
    var emptyView: EmptyViewType { get }
    func showEmptyView()
    func hideEmptyView()
}

extension TableViewEmptyDisplayable {
    
    func showEmptyView() {
        self.emptyView.bounds.size = EmptyViewType.size
    }
    
    func hideEmptyView() {
        self.emptyView.bounds.size = .zero
    }
}

protocol EmptyView: UIView {
    static var size: CGSize { get }
}

class EmptyViewImpl: UIView, EmptyView {
    
    static let size = CGSize(width: UIScreen.main.bounds.width, height: 400)
}

class SampleViewController: UIViewController, TableViewEmptyDisplayable {
    
    typealias EmptyViewType = EmptyViewImpl
    
    @IBOutlet weak var tableView: UITableView!
    
    let emptyView: EmptyViewType = EmptyViewImpl()
    
    private var data: [Int] = []
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.tableView.tableHeaderView = self.emptyView
    }
}

extension SampleViewController: UITableViewDataSource {
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        if self.data.isEmpty {
            self.showEmptyView()
        } else {
            self.hideEmptyView()
        }
        return self.data.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        return UITableViewCell()
    }
}

```
AsciidocのドキュメントをGitHub Actionsを用いてGitHub Pagesで公開する。

# これを流し読みしてやってみた。
https://qiita.com/peaceiris/items/d401f2e5724fdcb0759d

# サンプルコード
https://github.com/fake-deli-ca/asciidoc-samplerepo

# 完成ドキュメント
https://fake-deli-ca.github.io/asciidoc-samplerepo/

# GitHub Pagesのポイント
GitHub Pagesの公開手法には以下の３パターンある。
- gh-pagesブランチで公開
- masterブランチで公開
- masterブランチの/docフォルダで公開
https://help.github.com/ja/enterprise/2.14/user/articles/configuring-a-publishing-source-for-github-pages
単なる静的コンテンツの場合は、masterブランチでの公開でいい気がするのだが、asciidocなど他を利用する場合は、gh-pagesブランチでの公開で良いと思う。理由は後述する。

# だいたいymlはこんな感じ。

ドキュメントを読めばいいといえばそれまでだが。
https://github.com/peaceiris/actions-gh-pages

asciidocの場合はこうかな。

```main.yml
name: Asciidoc Build&Deploy

on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    - name: Set up JDK 1.11
      uses: actions/setup-java@v1
      with:
        java-version: 1.11
    - name: Change wrapper permissions
      run: chmod +x ./gradlew
    - name: Build with Gradle
      run: ./gradlew docs
    - name: Deploy
      # PR時にはDeployさせたくないので、merge時のみに実施する。
      if: github.ref == 'refs/heads/master'
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: ./docs
```
※ コメント頂いた箇所を訂正

GitHub Actions作成の基本は以下からそれっぽいものを探すのがまず第一である。
https://github.com/actions/starter-workflows/tree/master/ci

凝ったことをやろうとするなら、気合を入れてリファレンス読むのもいいのだが、結構色々できそうで、逆に訳わからない。
https://help.github.com/ja/actions/reference/workflow-syntax-for-github-actions#

各Stepの中でifが使えるので、どうしてもというときに使うのがポイントである。でも、if文駆使しすぎると普通に他の人が読めなくなる。


## GitHub Actionsの結果
Actionsタブから見れば良い。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/115285/9d95404f-a487-db41-3d36-f3e3d2bab780.png)


# TOKEN利用時について補足
GITHUB_TOKENを利用する場合は、リポジトリのSettingsから下記手順を実施のこと。
https://github.com/peaceiris/actions-gh-pages#%EF%B8%8F-first-deployment-with-github_token

デフォルトの設定はgh-pages branchなので、上記のfirst deploymentの手順を実施しておけばそのようになる。

…と思ったが、どうやらgh-pagesブランチに入って、environmentをクリックし、一度以下の画面から参照する必要がありそうだ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/115285/dd291c7b-45a9-ffb0-30b2-a9fea118929d.png)


## 注意事項

なお、GitHub Actionsを利用してのドキュメントの公開をしたい場合、masterブランチでのGitHubPagesの公開はやめた方がいい。actions-gh-pagesをGitHub Actionsで動作させてみればわかるが、deploy時にmasterブランチ直下にpublish用のドキュメントが再構築され、元々あったはずのドキュメントが消える。そんなことは恐らく望む人はいないと思われる。


そんなことやってもいいという人は、下のようにすれば良い。

```main.yml
    - name: Deploy
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_branch: master
        publish_dir: ./docs
```

### 追記(20200423)
コメント頂きましたが、これは想定動作ではなく修正中とのことでした。
https://github.com/peaceiris/actions-gh-pages/issues/245

# 完成！
これでmasterブランチでmergeが完了すれば、自動的にドキュメントが公開される。
Swift 初期表示でScrollViewがうまく動作しない

#コードで記述したScrollViewの初期表示がうまく動作しない

この記事ではXcode 11.4  Swift 5.2を使用しています

- 対処方法
  - ScrollViewの制約を記述する前に`scrollView.translatesAutoresizingMaskIntoConstraints = false`を記述する

- translatesAutoresizingMaskIntoConstraintsについて
  - AutoLayout以前に使われていた「Autosizing」というレイアウトの仕組みを、AutoLayoutに変換するかどうかを設定するフラグ(デフォルトはtrue)
  - Autosizingの制約とコンフリクトを起こすと期待通りの動作をしないことがあるので、新たに制約を追加する際には忘れずにfalseに設定する
TOEIC の勉強

ふと、就職活動のときのことを思い出した。

TOEIC について、妙に評価してもらっていたように感じる。

「学生時代に何か刻んでいけるようなものがあればいいなと考え、定期的に受験してました」みたいなこと言ったような気がする。

社会人になってからも続けようと思うので、TOEIC についても記事を書いていこうと思う。


[目標]
６５０点
→　６００点が評価水準だとどこかで聞いたので、少し高めに設定しておく）

[現状]
５８０点
→　参考書を読んだり問題集を解いたりはしたものの、うつ病気味のまま根性論で押し切ったようなところがあるので、精神的に健康になった今、改めて戦略をねって６００点は超えたい。

[やること]
点数の分布は以前の成績書の裏に記載されていたように思うので確認する。
まずは模擬試験をやってみて、得意な方を重点的に伸ばしていこうと思う。
研修を終えてから時間があると思うので、そこで一度やってみよう。
【CSS】セレクタの計算方法

<p>自分の備忘として残しておくために書きました。<br>
優先度を計算できるセレクタは6つある。<br>
下記は上から優先度の高い順に記載してる。</p>
<table border="1">
        <thead>
            <tr>
                <th>セレクタ</th>
                <th>桁数</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>IDセレクタ</td>
                <td>3桁目</td>
            </tr>
            <tr>
                <td>クラスセレクタ</td>
                <td>2桁目</td>
            </tr>
            <tr>
                <td>属性セレクタ</td>
                <td>2桁目</td>
            </tr>
            <tr>
                <td>擬似クラス</td>
                <td>2桁目</td>
            </tr>
            <tr>
                <td>タイプセレクタ</td>
                <td>1桁目</td>
            </tr>
            <tr>
                <td>擬似要素</td>
                <td>1桁目</td>
            </tr>
        </tbody>
</table>
<p>これらは単純にどのセレクタがいくつあるのかで計算していく。<br>例えば、「#abc .cba」だったら110になる。<br>理由は3桁目のIDセレクタ1個、2桁目のクラスセレクタ1個、<br>1桁目は対象がないので0個だから、答えは110になるという解法です。
gitの初期設定

個人や会社で新しいパソコンを使うことになったとき、gitの初期設定って忘れてますよね！
というわけで、そういうときにさっと設定できるようにメモです！

# 結論

自分は下記の最低限の設定のみをしています。

```
# ユーザー名を指定、git log, git show, git blame などで表示される
git config --global user.name "MyoujiNamae"

# メールアドレスを指定、git log などで表示される
git config --global user.email "e-mail@address.com"

# ファイルパスなどを表示するとき（git status, git ls-filesなどで）特殊文字（日本語）をクオートして表示しないようにする
git config --global core.quotepath false

# commit時やcheckout時に自動で改行コードが変更（CRLF → LFなど）されないようにする
git config --global core.autocrlf false
```
個人的にはユーザー名の設定では名前と苗字の間はスペース開けないほうがよいかなと
PhpStormなどのJetBrain製のエディタのAnnotateで、例えば `First Family` と設定すると後ろの名前の `Family` が表示されるため

# 有効範囲、--local, --global, --system 

## --local
リポジトの設定（指定なしの場合これ）

## --global
PCユーザーの設定

## --system
システム（OS）での設定

# config の確認

## コマンドで確認

現在反映されている設定は下記で確認できる

```
git config -l
```

--local など有効範囲を指定するとその有効範囲の設定のみ表示される

```
git config -l --local
```

## ファイルで確認

下記のようにファイルに設定が記述されている

```
[user]
        email = e-mail@address.com
        name = MyoujiNamae
[core]
        quotepath = false
        autocrlf = false

```

### --local のファイルの場所

```
(リポジトリのroot)/.git/config
```

### --global のファイルの場所

```
~/.gitconfig
```
競技プログラミングはじめました

#競技プログラミングをはじめました
この度、Pythonでのコーティングスキル向上のため競技プログラミングをはじめました。
Python歴は3ヶ月程度で大学での研究で画像処理に用いた程度です。
せっかくならアウトプットできるそれなりのレベルに持っていきたいと思っています。

⚠この記事は自身のメモという意味合いが強いです。何かご意見があればぜひお願い致します。

なお、これから始めていくにあたって参考にしている文献は以下の通りです。

[AtCoder に登録したら次にやること ～ これだけ解けば十分闘える！過去問精選 10 問 ～](https://qiita.com/drken/items/fd4e5e3630d0f5859067)
[【転職エントリ】Googleに入社します](https://note.com/neko_chan0214/n/n3a64bc1e1412)
[PythonでAtCoder青になるまで -Pythonで競プロやるときに気をつけること-](https://qiita.com/Kentaro_okumura/items/a6917572756a2e3c0da9)

##チュートリアルをはじめました

[AtCoderのチュートリアルのA問題](https://atcoder.jp/contests/practice)をやってみました。
あれ？さっぱりわからん？となっているのでなかなか先行きは厳しそうです（汗）

###問題
<img width="755" alt="スクリーンショット 2020-04-22 23.33.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625332/aa9ba2be-ee1d-a5e5-982e-53b5f2290dc5.png">

###解答
```
# -*- coding: utf-8 -*-
# 整数の入力
a = int(input())
# スペース区切りの整数の入力
b, c = map(int, input().split())
# 文字列の入力
s = input()
# 出力
print("{} {}".format(a+b+c, s))
```

まず```input()```を使うだけで、次に示す関数やメソッドなどを組み合わせることであらゆる入力形式に対応できます。

```map(int, input().split())```はこの場合、b,cに```input()```を行うということです。

最後にformat関数が使われており、変数を文字列に代入しています。

```
'{0}, {1}, {2}...'.format(変数1, 変数2, 変数3….)  #インデックス（添え字）で指定
```

#参考
- tipsについて
https://qiita.com/kyuna/items/8ee8916c2f4e36321a1c
- format関数について
https://programming-study.com/technology/python-format/
SQLのGROUP BYについて②

前回、GROUP BYについて説明しましたが、
せっかくなので今回はGROUP BYを使用する際の注意点について説明しようと思います。
前回使用したテーブルを今回も使い回します。

|name|subject | score | 
|:-----|:-----|:-----|
|鈴木   |国語   |70
|鈴木   |数学   |80
|田中   |国語   |90
|田中   |数学   |60
|田中   |英語   |80
|山田   |数学   |70

前回は、上記のテーブルに対して「nameごとのscoreの合計値を算出する」というSQLを作成しました。
再掲になりますが、SQLは以下の通り。

```ruby:SQL
SELECT name, SUM(score) FROM TABLE1 GROUP BY name;
```

上記のようなSQLであるならば、問題なく実行することができます。
ですが、以下のようなSQLではエラーになってしまいます。

```ruby:SQL
SELECT name, SUM(score) FROM TABLE1 GROUP BY subject;
```

理屈で考えればわかると思うのですが、「nameごとにscoreの合計値を算出」しているのに、
「subjectごとに表示する」なんてことができるはずがないので、エラーになって当然なんですけどね。
GROUP BYを使い始めた辺りはこの辺りで混乱しやすいので、注意しましょう。
bashの簡単なメモ

# はじめに
LPIC Lv.1はじめました。
改めてシェルスクリプトを一から見直しているので
メモ残す。

# 引数を表す変数
| 変数名       |       説明 |
|:-----------------|------------------:|
| $0           | シェルスクリプト名 |
| $1           | １番目の引数 |
| $2           | ２番目の引数 |
| $#           | 引数の数 |
| $@           | すべての引数(スペース区切り) |
| $*           | すべての引数(区切りは環境IFSで指定されたもの) |

確認のためのスクリプトと結果がコチラ

```
# cat testargs
echo $0
echo $1
echo $2
echo $#

# ./testargs arg1 hoge hage
./testargs
arg1
hoge
3
```

$0はシェルスクリプト名というよりかはシェルプロンプトから見た最初の引数って理解するとスッと入ってくる。なるほどねぇ～。

# testコマンド
シェルスクリプトでif文使うときにおなじみの[ ]は実はtestコマンドでも同じことできる。
多分testを直感的に扱えるようにしたのが [ ]なのかなと。

…なので、↓↓の２つのスクリプトは同じ処理内容を意味する。
どっちを使うかはお好みで。

```:iftest1.sh
if test -f testscript
then
 source ./testscript
else
 echo "testscript file not exist"
fi
```

```:iftest2.sh
if [ -f testscript ]
then
 ./testscript
else
 echo "testscript file not exist"
fi
```
行数縮めてこんな書き方にしても大丈夫。結構融通利く。

```:iftest3.sh
if [ -f testscript ] ; then
 . ./testscirpt
 else echo "testscript file not exist"
fi
```
本とかで調べると-fとか-dとか-eqとかいろいろあるけど、
ここでは「[]とtestは同じなんだ、へぇ～」くらいにとどめておく。

# case文について
switch文ではなく、case文。論より証拠でやってみる。

```:casetest.sh
# cat casetest.sh
case $1 in
 1) echo "January" ;;
 2) echo "February" ;;
esac

↓↓実行結果はコチラ↓↓
# bash casetest.sh 1
January
# bash casetest.sh 2
February
# bash casetest.sh 3
# bash casetest.sh 0
```
１，２のときだけ返事する、該当する値が無いときは値を返さない。わかりやすい。

ちなみにcase文は結構インデント気にしてないのか↓↓みたいな文を書いても余裕。

```:インデントずれしてても平気
# cat casetest.sh
case $1 in
     1) echo "January" ;;
  2) echo "February" ;;
esac
```

```:インデントは半角スペースとタブ混在してても大丈夫！
# cat casetest.sh
case $1 in
     1) echo "January" ;;
        2) echo "February" ;;
esac
```

シェルスクリプトって結構タフですね。。。

# for文
スペース区切りにしてしまえば配列から値を取り出すように回せるのか。
これはワイルドですねぇ。

```:cat fortest.sh
for var in Vine SUSE Gentoo
do
  echo $var Linux
done

# bash fortest.sh
Vine Linux
SUSE Linux
Gentoo Linux
```

連続する数値を回したいならseqを使ったらよいようだ。

```:seqtest.sh
# cat seqtest.sh
for i in `seq 10 15`
 echo $i
done
# bash seqtest.sh
10
11
12
13
14
15
```
# while文
whileは[]の条件が真の間中ってことね。OKOK。

```:whiletest.sh
i=1
while[ $i -le 10 ]
do
 echo $i
 let i=i+1 　　# ←letコマンドは算術式を評価するコマンド
done
```

# read文
標準入力からの受付に使える。これは便利ですね。


```:readtest.sh
# cat readtest.sh
echo -n "Who are you?"
read username
echo "Hello,$username san."

# bash readtest.sh
Who are you?hiroshi
Hello,hiroshi san.
```

このread文、より実践的な扱い方として
while read lineパターンというやり方があって
ファイルやヒアドキュメントを利用して、繰り返し入力を受け付ける、
なんてやり方ができるそうだ。
[参考：シェルスクリプトで一行ずつ読込む while read line 4パターン](https://server.etutsplus.com/sh-while-read-line-4pattern/}

```:userBulkTest.sh
# bash userBulkTest.sh nameList.txt
Hello, hiroshi san
Hello, peroshi san
Hello, poroshi san
Hello, waroshi san

# cat userBulkTest.sh
while read USERNAME
do
  echo "Hello, $USERNAME san"
done < $1

# bash userBulkTest.sh nameList.txt
Hello, hiroshi san
Hello, peroshi san
Hello, poroshi san
Hello, waroshi san
```

# おわりに
LPIC Lv.1の内容だけあって、シェルスクリプトもさらっと文法をなめた感じで終わった。
実際に使用されているようなシェルスクリプトをかけるようになるにはもっと深い知識がいるとは思うけど
一通りの文法は見渡すことができたので、改めて.bashrcとか、わかってるようでわかってない
身近なスクリプトを読むのが楽しくなりそうな気がしてきた。

～おしまい～
zshでタブ補完したときの(eval):1: command not found:を解消

# はじまり
最近windows作業が多く、久しぶりにmacに戻って来てpip叩いてみると以下のように怒られた。

```
pip is configured with locations that require TLS/SSL, however the ssl module in Python is not available.
```

ちなみにpyenv環境でpython3.7.2
ググっても根本的な解決方法は出てこなく、他バージョン入れ直すのが有効らしいので3.7.7を入れ直す。モヤモヤするがしょうがない。思考停止
以降のためにパッケージ一覧をrequirements.txtで吐き出しておく。

```
$ pip freeze > requirements.txt
$ pyenv install 3.7.7
$ pyenv global 3.7.7
$ pip install -r ./
```

とここまで打ったのは良かったが、タブ補完で突如バグる

```
$ pip install -r (eval):1: command not found:_pip
```

ググると皆さんはpipじゃなくてmv案件らしい。
なんでワイだけpip案件なんや、、、

# おわり
ググってみると、zshのautocompleteが悪さをしていそう。
関係ありそうなファイル消して再起動すればなんとかなるそうなので、思考停止して以下を消去

```
rm ~/.zcompdump
rm ~/.zplug/zcompdump
```

# 所感
Macがデフォルトシェルをzshに変更したから起こった問題だと思います！（偏見
昔からのzshユーザが困っています！（偏見
【覚えておくと便利!!!】Eclipseにおけるコンストラクタとgetter/setterの簡易作成

## 1.事前知識
- [【最新】UbuntuでJavaの環境を構築する方法](https://qiita.com/ryome/items/37c53e9638a9c6ea146a)

- [【初心者でもできる‼】Windows10にJava環境を作る方法（JDK14.0.1）](https://qiita.com/ryome/items/30135570954e36196821)

- [【わかりやすく解説‼】Javaのインスタンスの使い方](https://qiita.com/ryome/items/62ba0d8395af6698053a)

- [【初心者でもできる‼】Windows10にEclipseをインストールする方法（Java環境構築）](https://qiita.com/ryome/items/b47c5acdaa52cffbec58)

事前知識として、上記リンクの内容が必要です。


## 2.Eclipseのコンストラクタ簡易作成

![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/67860648-78ac-0ed8-1df2-0afde4c5f058.png)
1. クラス内で `右クリック` をする。
![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/1a77a94a-160f-f825-98f5-ca85c9f4b93e.png)
2. `[ソース]→[フィールドを使用してコンストラクタを生成]` を選択する。
![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/17ccdfa0-8758-109e-71de-0fb6b5e2a425.png)
3. `引数として受け取る変数` を選択し、`デフォルト・コンストラクタsuper()の呼び出しを省略` にチェックをつけ `生成` ボタンをクリックする。
![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/6c19d3c5-46f3-56b0-6ebb-c038892ff895.png)
4. `コンストラクタ` が生成されれば成功。

## 2.Eclipseのgetter/setter簡易作成

![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/c538ebf1-eeff-1975-aad1-c2cddf1767dc.png)
1. クラス内で `右クリック` をする。
2. `[ソース]→[getter および setter の生成]` を選択する。
![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/4c171a20-3be8-f538-1e9f-87c1839ac1fd.png)
3. `対象の変数` を選択し、 `生成` ボタンをクリックする。
![07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/81a05999-7947-bba4-4acd-e4f2eefd5d2b.png)
4. `getter および setter` が生成されれば成功。

## 3.関連
- [【初心者でもできる‼】Javadocの書き方](https://qiita.com/ryome/items/4f2d5928c8aaf195f407)
require_once(__DIR__ . '/vendor/autoload.php'); しているファイル内で vendor 配下のクラスを extends したら Uncaught Error: Class 'ClassName' not found にハマった

# 背景
ちょっとした処理の作成だったので、メインの php ファイル内で

```php
require_once(__DIR__ . '/vendor/autoload.php');
```
しつつ、更にいくつかクラスを宣言する形で実装を進めていました。
また composer を使っていくつかライブラリも使用していました。  

こんな感じです。  

```php:main.php
<?php

require_once(__DIR__ . '/vendor/autoload.php');

$a = new ClassA();
$a->someMethod();

Class ClassA
{
    private $b;
    private $vendor_class;

    public function __construct()
    {
        $this->b = new ClassB();
        $this->vendor_class = new \Vendor\VendorClass();
    }
    
    public function someMethod()
    {
        // ...
    }
}

Class ClassB
{
}
```

## vendor 配下の読み込んでいるクラスを拡張したくなった

ちょっと vendor 配下にあるとあるライブラリの処理を拡張したくなったので、以下のように書き換えました。

```php:main.php
<?php

require_once(__DIR__ . '/vendor/autoload.php');

$a = new ClassA();
$a->someMethod();

Class ClassA
{
    private $b;
    private $vendor_class;

    public function __construct()
    {
        $this->b = new ClassB();
        $this->vendor_class = new ExtendsVendorClass();
    }
    
    public function someMethod()
    {
        // ...
    }
}

Class ClassB
{
}

Class ExtendsVendorClass extends \Vendor\VendorClass
{
}
```

普通に動くかと思ったんですが、途端に

```
PHP Fatal error:  Uncaught Error: Class 'ExtendsVendorClass' not found in main.php:XX
```

と言われ、明らかに宣言されているにも関わらず Class が見つからないと言われます。
タイポもしていないし、もしかして予約後的な名称だった？と思いクラス名を変更してみましたが結果は変わらずです。

その後いろいろなパターンを試したんですが、

```php
Class ExtendsVendorClass extends \Vendor\VendorClass
{
}
```

や

```php
Class ExtendsVendorClass extends ClassB
{
}
```

は NG で

```php
Class ExtendsVendorClass extends \Exception
{
}
```

は OK であることがわかりました。

# 原因

エラーとなるソース

```php:main.php
<?php

require_once(__DIR__ . '/vendor/autoload.php');

$a = new ClassA();
$a->someMethod();

Class ClassA
{
    private $b;
    private $vendor_class;

    public function __construct()
    {
        $this->b = new ClassB();
        $this->vendor_class = new ExtendsVendorClass();
    }

    public function someMethod()
    {
        // ...
    }
}

Class ClassB
{
}

Class ExtendsVendorClass extends \Vendor\VendorClass
{
}
```

ちゃんと調べたわけではないですが、結果を見る限りでは 

1. php ファイル内で宣言されている Class の読み込み
2. `require_once(__DIR__ . '/vendor/autoload.php');` が実行される

となるようで、

1 のタイミングでは autoload の設定が有効になっていないため `\Vendor\VendorClass` が読み込めず、結果それを継承しようとしている ExtendsVendorClass の読み込みも行われない

といった状態になっていたようでした。

# 解決法

クラス宣言とそれらを呼び出す php ファイルを分けました。
これによって、 main.php での `require_once(__DIR__ . '/vendor/autoload.php');` が先に処理され、その後に実際にクラスを呼び出したタイミングで autoload が行われるので、正常に ExtendsVendorClass も読み込めるようになりました。

```php:main.php
require_once(__DIR__ . '/vendor/autoload.php');

$a = new ClassA();
$a->someMethod();
```

```php:ClassA.php
Class ClassA
{
    private $b;
    private $vendor_class;

    public function __construct()
    {
        $this->b = new ClassB();
        $this->vendor_class = new ExtendsVendorClass();
    }

    public function someMethod()
    {
        // ...
    }
}
```

```php:ClassB.php
Class ClassB
{
}
```

```php:ExtendsVendorClass.php
Class ExtendsVendorClass extends \Vendor\VendorClass
{
}
```
iOSアプリBuild時に「Unable to install "アプリ名"」と表示されるがXcodeの設定で解決

#問題の概要
* Xcodeにて、Swiftを使ってアプリ開発（iPhone実機）をしていた．
* 今まで実機インストールして動作確認できていたが、突然「Unable to install "アプリ名"」と表示されてインストールできなくなった．
* Apple Developer Programには登録していない状態．

#問題の詳細
新しいプロジェクトを作ってビルドしたら、下記メッセージが表示された．

```
Unable to install "アプリ名"
```
Detailsボタンで詳細を見られるみたいなので、押してみたら、下記内容．

```
Details

Unable to install "アプリ名"
Domain: com.apple.dt.MobileDeviceErrorDomain
Code: -402620383
--
The maximum number of apps for free development profiles has been reached.
〜略〜
```

#環境
* Xcode 11.4
* Swift 5.2

#試したこと(1)：iPhoneから開発したアプリを削除
Detailsのメッセージを見る限り、無料で開発をする限り、実機にインストールするアプリ数に
制限があるっぽい（調べたら3個が上限だとか）．
今まで何回もアプリを入れては消してはしていたのでトータルでは3個以上はいってる．
そこで、iPhoneに現在インストールされていた開発アプリを削除してみた．だが変化なし．

#試したこと(2)：プロビジョニングプロファイルを削除
出てきたエラーコードをググってみると、Appleの公式リファレンスが出てきた．
https://developer.apple.com/documentation/xcode_release_notes/xcode_11_4_release_notes#3561491
どうやら下記をやれって書いてある．

* デバイスからアプリを削除
* Xcodeのメニューからプロビジョニングプロファイルを削除する

1つ目は実施済み．2つ目はXcodeのメニューからは消せそうになかったので、下記フォルダに「〜.mobileprovision」という名前で保管されてるらしいので、ターミナルから削除．それでも変化なし．

```
~/Library/MobileDevice/Provisioning Profiles/
```

#試したこと(3)：Xcodeの設定関係
* Xcodeのメニューからアプリ情報を削除できるらしい．「Window」→「Devices and Simulators」で
アプリ一覧を見られるが、(1)で削除したからかやはりアプリの記載は無し．ということでこれもダメ．
* Xcodeのプロジェクトを作成するディレクトリを変えてみるが、変化なし．エラーメッセージも同じ．
* Xcodeの「Preferences」→「Accounts」からアカウント情報削除→再登録しても変化なし．

#解決法
結局なにをやったかというと、やっぱりXcodeの設定．
「Window」→「Devices and Simulators」で出てきたデバイス名（実機の名前）より、
「Show Provisioning Profiles」を右クリック、出てきたプロファイルを「-」ボタンで削除．
これで解決．上記色々試行錯誤の時にもうちょっと関連記事を読み込めばよかった．

#まとめ
どうやらプロビジョニングプロファイルなるものは証明書などアプリの情報を管理するファイルらしいが、
見た目でアプリを削除できていても、残ってるらしい．
【CSS】transformで機能に応じたUIにしたい。

フリマアプリ制作中、
アップした写真の 「削除ボタン」 押下時に
見た目に変化がないのは少々寂しかったので
「削除」らしくなってもらいます。
# 完成形
[![Image from Gyazo](https://i.gyazo.com/60996117754161d3778f061bb4c7eccd.gif)](https://gyazo.com/60996117754161d3778f061bb4c7eccd)
**削除ボタンらしいUIにしていきます。**
## まずは削除ボタンを作る
```scss:sample.scss
.image-box {   
  position: relative;
  .delete-btn  {
    width: 100%;
    background-color: lightblue;
    text-align: center;
    position: absolute;
      bottom: 0;
      left: 0;
  }
}
```
**現状は少々素朴な感じ。**
※ jsは省略
[![Image from Gyazo](https://i.gyazo.com/a19610ca61b9614205795869b3675bab.gif)](https://gyazo.com/a19610ca61b9614205795869b3675bab)
# マウスが乗った時の動きを記述
**.delete-btn:hover** というカーソルが乗っている時の
スタイルを同列に記述します。


```scss:sample.scss
.image-box {   
  position: relative;
  .delete-btn {
    width: 100%;
    background-color: lightblue;
    text-align: center;
    position: absolute;
      bottom: 0;
      left: 0;
  }
  .delete-btn:hover {
    cursor: pointer; 
    transform: scale(1.1, 1.1);
    transition: all 0.1s ease;
    background-color: #ea352d;  //背景色を赤にする
    color:#ffffff;  //文字色を白に。
  }
}

```
## transformプロパティ
transformプロパティは、要素に対して移動、回転、伸縮、傾斜などの変形をさせる事ができます。
今回は **scale** を使用して拡大させます。

scale()の中の数字には、**X方向とY方向 (横, 縦)へ**適用される変倍を記入します。
【拡大させる場合は **1以上**を記入します】 


**そして、【transitionプロパティ】で変化の仕方を指定します。**
今回だと変化の始まりから終わりが0.1s(秒)。


_______
**◉ cursor** はマウスカーソルの形を指定するためのプロパティです。

[![Image from Gyazo](https://i.gyazo.com/615544955dee88d5910fcb1fe1ee8a0e.gif)](https://gyazo.com/615544955dee88d5910fcb1fe1ee8a0e)
____________________________________
以上で終了です。
ご覧いただきありがとうございました。
XcodeGenでつくったprojectをShareExtensionのSchemeで実行した際の 「Unable to install "xxxx Share Extension" 」エラーの対処法

## 現象

```
$ xcodegen generate
```

を実行してprojectを作成。
その後、Schemeを `Share Extension` や `Notification Service Extension` を選択して実行すると、以下のようなエラーが発生して実行されなかった。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30620/f1ea5c44-d361-92c5-1ba3-b726e05a2bad.png)

>
Unable to install “hogehoge Share Extension”
Domain: com.apple.platform.iphoneos
Code: -1
Recovery Suggestion: “hogehoge Share Extension” cannot be installed on {device name}. hogehoge Share Extension.appex is not an application bundle



## 原因

Schemeの設定を開き、Run > Info　タブを開く。

Executableの項目に、Extension自信の.appexが設定されていた。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30620/bc98d362-c559-e763-c5be-48b6ef4688c0.png)

## 対応

Executableに `Ask on Launch` を選択して実行する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30620/d869bc10-32da-674c-65d1-1550ad101424.png)
【AWS10分間チュートリアル】Hello, World!をサーバーレスで実行する(Lambda)

# 概要
社内でAWSを使ったシステム設計を任される予定があり、AWSのサービスを勉強中です。
チュートリアルと画面が異なるため、記事にしています。

以下もご覧いただけると幸いです。
[【AWS10分間チュートリアル】Docker コンテナのデプロイ](https://qiita.com/tyariponzu614/items/573231bf72115034eca2)
[【AWS10分間チュートリアル】ReactJSアプリをデプロイしてホストしてみた(CI/CD)](https://qiita.com/tyariponzu614/items/0b3b9c4c47bf4542d308)
[【AWS10分間チュートリアル】Lightsail でWordPressインスタンスにアクセスする](https://qiita.com/tyariponzu614/items/c1fb2cee1ace2d5f25b2)

# 教材
10分間チュートリアル
https://aws.amazon.com/jp/getting-started/tutorials/

「Hello, World!」をサーバーレスで実行する
https://aws.amazon.com/jp/getting-started/tutorials/run-serverless-code/?trk=gs_card&e=gs&p=gsrc

# 環境
特段なし

# チュートリアル概要

>このチュートリアルでは、AWS Lambda で、サーバーのプロビジョニングや管理をせずにコードを実行する方法の基本を学習します。AWS Lambda コンソールを使用して Hello World Lambda 関数を作成する方法を説明します。続いて、サンプルのイベントデータを使用して手動で Lambda 関数を呼び出す方法と、出力されたメトリクスを確認する方法を説明します。

## 1. Lambda の関数を作成する
関数を作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230037/7e9eb48f-8f54-8d1b-5210-190875f0d305.png)

設計図を使用します。
hello-world-pythonを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230037/05442c60-20c4-f5e9-5810-5079045977eb.png)

## 2. Lambda 関数を設定する
以下のように入力し、関数の作成をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230037/24124f21-b692-70b4-74b0-767afc5a2c39.png)

関数を正常に作成できると以下の画面になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230037/3a79c14e-a6b8-7f8b-18f2-c61de8e92b5c.png)

下方にスクロールしてメモリ、タイムアウト、VPC 設定を設定します。 
このチュートリアルでは、Lambda 関数の設定値をデフォルトのままにします。

## 3. Lambda 関数を呼び出して結果を検証する

テストイベントの設定を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230037/6c39f5f8-1f42-6133-c01d-2db0af0e7b8d.png)

このように設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230037/3f232e72-0019-9f6f-bf22-c9ed576237c2.png)

テストをクリックすると、関数が実行されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230037/46a1a098-0d68-47fc-30d5-ea2503f531f6.png)

## 4. メトリクスをモニタリングする
>AWS Lambda では、Lambda 関数が自動的にモニタリングされ、Amazon CloudWatch によってメトリクスがレポートされます。コードの実行をモニタリングできるようにするため、Lambda によりリクエスト数、リクエストあたりのレイテンシー、エラーを引き起こしたリクエスト数が自動的に追跡され、関連するメトリクスが発行されます。 

モニタリングをクリックすると、情報が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230037/d488d7e2-f4f0-8397-5635-39ce77338e3a.png)


>AWS Lambda では、使用した分の料金が発生します。AWS Lambda の無料利用枠が上限に達すると、関数のリクエスト回数 (呼び出し回数) およびコードの実行時間 (呼び出し時間) に応じて課金されます。

## 5. lambda関数の削除
以下から削除をしておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230037/283f5070-46f1-fcf1-5365-881dc4052646.png)

# 本チュートリアルで学んだ事
>サーバーのプロビジョニングや管理をせずにアプリケーションを実行する方法の最初のステップを学習しました。Lambda では、各種のトリガーに対するレスポンスによりコードが実行され、自動的にアプリケーションがスケールされます。スケーリングはワークロードの大きさに基づき正確に実行されます。
JavaScript ライブラリを使わず ISO形式で日本時間を取得する 

## ISO形式で日本時間

JSビルトインの Date オブジェクトのみで、ISO8601形式（例：2004-04-01T00:00:01+09:00）を日本時間で取得する。意外と簡単ではなかったので、記載しておく。

ライブラリ使えるなら使った方が良いです。moment.jsとか。


### moment.jsならこんなに簡単（ES6）

```moment.js
import moment from 'moment'

const now = moment().format()    // 2020-04-22T22:14:25+09:00

const now2 = moment().format('YYYY-MM-DDTHH:mm')    // 2020-04-22T22:14:25
```

### ライブラリを使わず、Dateオブジェクトで同様のことを行う

ただいま、日本時間で 2020/4/22 22:39:03 だとします。"2020-04-22T22:39:03+09:00" を取得します。

```date.js
// ローカル現在時刻の取得
const nowLocal = new Date()    // Wed Apr 22 2020 22:39:03 GMT+0900 (Japan Standard Time)

// UTCとローカルタイムゾーンとの差を取得し、分からミリ秒に変換
const diff = nowLocal.getTimezoneOffset() * 60 * 1000    // -540 * 60 * 1000 = -32400000

// toISOString()で、UTC時間になってしまう（-9時間）ので、日本時間に9時間足しておく
const plusLocal = new Date(nowLocal - diff)    // Thu Apr 23 2020 07:39:03 GMT+0900 (Japan Standard Time)

// ISO形式に変換（UTCタイムゾーンで日本時間、というよくない状態）
let iso = plusLocal.toISOString()   // "2020-04-22T22:39:03.397Z"

// UTCタイムゾーン部分は消して、日本のタイムゾーンの表記を足す
iso = iso.slice(0, 19) + '+09:00'    // "2020-04-22T22:39:03+09:00"
```

もっと簡単な方法があったら教えてください。


## 参考
- https://stackoverflow.com/questions/12413243/javascript-date-format-like-iso-but-local
Goでガチャっぽいの作ってみた

Goでガチャっぽい実装書いてみました。
社内勉強会でやったネタです。
リポジトリの README.md に内容をまとめました！
どんな実装にしたか、なぜそうしたかとかが書かれてます。
https://github.com/issuy/go-gacha
10日で匿名型討論Webサービスを公開しました

# 10日で匿名型討論Webサービスを公開しました

企画から始まり、設計、デザイン、コーディングまでを10日間で行い、匿名型討論サービス【みくぽん】を作成しました。
こちらのリンクから遊べます。試してみてください
[みくぽん](https://mixpon.net/)

###【議題】
3年後も仕事で使えそうなプログラミング言語は？

`JavaScript or Python`

[回答はこちらから](https://mixpon.net/topic/553)

## 使った技術
1. Laravel
2. MySQL
3. Heroku
4. Xサーバー
5. AWS S3

### Laravel
プログラミング言語にはPHP、フレームワークにLaravelを使用しました。
質問箱を始めとする、質問サービス同様画像加工をし、OGPに設定するようにしています。
データベースにはMySQLを使用しています。

### Heroku
テスト環境構築用に無料で公開できるHerokuを採用しました。
こちらを使い、β版のリリースを実施し、知人にテストプレイを依頼しました。
公開前のテストに使うには十分なサービスです。（本番リリースも表示速度等気にしないのであれば使用は可能かと思います）

### Xサーバー
本番リリースには普段私の[ブログ](https://yone-lab.com/)を置いているXサーバーを使用しました。
最も安いプランでも50個のデータベースが作成でき最高ですね。表示速度も申し分ありません。

### AWS S3
ユーザーが投稿時に生成される画像を格納するために使用しました。
1年間の無料期間で使用しています。


以上まとめると、運用にかかる費用はドメインとサーバー契約費だけになります。

### サービスをリリースしてみての感想
いろんな開発者のブログなどから伺っていたとおり、個人サービスは公開＝終了ではなく、
公開＝スタートをきった というのを実感しています。
今ではどうやったらこのサービスをみんなが使ってくれるのかを考える毎日です。

意見の投稿だけであれば、アカウント作成は不要です。
ぜひ皆さん意見を投稿してみてください
C++ 変数宣言時にアドレスが渡される？渡されない？（クラス変数とポインタ変数）

##はじめに

C++を1年前くらいから扱うようになりましたが、いまだにポインタとかメモリとかあやふやです。。。

初めてqiitaに書き込みます。
なので、書き方や言い回しなどもしかしたら酷いものかもしれません・・・
しかし同じような悩みを抱えている人がいれば！！


##本題
今日も仕事で遭遇したメモリ関連に関して記事にします。

どうやら、クラス変数を普通に宣言する場合と、ポインタとして宣言する場合でメモリが割り当てられたり割り当てられなかったりするみたいです。

下記がソースです。

```C++
class CTest
{
public:
	CTest() { m_no = 0; };
	~CTest() {};

public:
	int m_no;
};

int main()
{
	//クラスを変数で宣言
	CTest test;
	printf("testに割り振られたアドレス：%p\n", &test);
	test.m_no = 0; //【死なない！！】　アドレスあるからか！？

	//クラスをポインタ変数として宣言
	CTest* pTest = NULL;
	printf("pTestに割り振られたアドレス：%p\n", pTest);
	pTest->m_no = 0; //【死ぬ！！】　アドレスないものに突っ込もうとするからか！？

	return 0;
}
```

ソースの中の【死ぬ！！】のところで落ちましたよね。。。
ここらへんが自分でも最初は理解できず。。。

コンソールには、下記のような結果が表示されていると思います。
　testに割り振られたアドレス：00BAFA0C
　pTestに割り振られたアドレス：00000000

要するに、pTestにはアドレスが割り振られているようで振られていません！
アドレスの存在しないpTestに、pTest->m_noでアクセスしようとしたせいで死んだようです。

なのでポインタに、インスタンス化された変数をあげればうまくいきます。
下記参照

```C++
class CTest
{
public:
	CTest() { m_no = 0; };
	~CTest() {};

public:
	int m_no;
};

int main()
{
	//クラスを変数で宣言
	CTest test;
	printf("testに割り振られたアドレス：%p\n", &test);
	test.m_no = 0; //【死なない！！】　アドレスあるからか！？

	//クラスをポインタ変数として宣言
	CTest* pTest = NULL;
//↓↓↓↓↓↓ここが追加した部分↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
	pTest = &test;
//↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
	printf("pTestに割り振られたアドレス：%p\n", pTest);
	pTest->m_no = 0; //【死なない！！】　アドレスが割り振られたから！！

	return 0;
}
```

文章すごくわかりにくいかもしれません。

ポインタ・メモリに1年振れて思うのは、難しいけど面白い！！です。

それではまた記事書きたいと思います。
[Xcode] Unit/UI Test 環境設定　メモ #1

# Xcode でのUnit/UI Test 環境設定について

iOS 開発者はみんなさんはご存知かと。。。（T.T）
・　Unit/UI Test 実施ができない（実施ボタンが見えない）
<img width="393" alt="0. Test Disable.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101832/132d924a-933b-74ad-a6e4-11f06c8311a9.png">


## 環境
- Xcode 11.1

## Unit/UI Test 実施ができない場合の対応方法
手順①　スキーマ編集画面で該当テストターゲットを追加する
<img width="897" alt="2.Test-select.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101832/a7e78d1e-af2d-ed34-54ff-da908412a415.png">

手順②　追加されたターゲットが表示されること。
・enabled  チェック済みであること確認
<img width="892" alt="3.Test-added.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101832/5275a27a-5288-98fb-ecf6-fd198b58ea7b.png">
※　enabled が未チェックの状態であれば、下記のエラーメッセージがでるかも。。
<img width="425" alt="6.Test-error.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101832/872c1867-d8e1-7368-d596-47f0dae3c282.png">
## 【結果】
<img width="389" alt="5.Test enable .png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101832/cde4cb60-45c5-7303-50d5-1898d84886e2.png">

##    ！！！それでもため？？　。。。
Build Setting -> Build Options -> Enable Testablilty  確認！！
<img width="549" alt="0. Test-build-setting.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101832/7622cbab-9ff8-2803-96a2-e67e767720fe.png">

以上です。いいテストコードをかきましょう！！

##[次のメモはここへ](https://qiita.com/mario7/items/632d653aefe85bce437c)
GITbashでの方法

GIT bashでの方法

git config --global user.name ID
git config --global user.email jtths474@gmail.com

PASS sg*****

保存済みのファイルを開いているvimから抜ける場合
:q
ファイルを保存しないでvimを抜ける場合
:q!
ファイルを保存してからvimを抜ける場合
:wq


最初
shimizu@kazuki MINGW64 ~
$ git config --global user.name ID

shimizu@kazuki MINGW64 ~
$ git config --global user.email mail

①ディレクトリに移動
② git init ローカルレポジトリ
③git add .ワーキングディレクトリ
④コミット
⑤git commit
git branch⑥
⑦ cd testrep21day　移動
⑧git add .
⑨$ git commit
⑩git push origin

参考ページ
https://qiita.com/manabu-watanabe/items/ecf1b434baf305adaa00
【初心者向け】個人的によく参考にするWebデザイン・要素集

#はじめに
自分がいちいち検索しなくて済むようにまとめただけの投稿です。赦して。

#Webデザイン
見る人を惹きつけ、情報を受け取ってもらうために参考にしたいサイト達。

##美しいWEBデザインの作り方と9つのコツ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617028/eecff68b-18ce-ec15-81a8-d04ac8eac666.png)
スタイリッシュで人を惹きつけるサイト作りの上で重要な余白や配色、構成などが紹介されている。すぐに活用できるコツから、行き詰った時の解決策、Webデザインの心構え（？）まで網羅されており、忘れたころに何度も見返したい。
URL : https://stand-4u.com/design/webdesign.html

##ゴールを念頭にWebサイトをデザインするということ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617028/16a9f30b-f6d1-a5cd-a02f-d8ebc5a2f034.png)
単なるデザインから一歩踏み込んだ、より効果的・戦略的なサイトを作りたいとき役に立つ。何のためのWebサイトで、何のためのデザインかを再確認させられる。
URL : https://uxmilk.jp/72792

##ウェブデザインスキルを高める１３のコツ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617028/52b4a83a-a9f3-eab3-50e5-5674a244a12b.png)
自分のイメージだけで作っていくと、デザインが古めかしくなったり、自分の好みが主張しすぎて情報を伝達する役割が薄れたりすることがあるかもしれない。作ってみて、*なんか違う感*がしたら参考にしてみよう。
URL : https://blog.hubspot.jp/web-design-13-tips

##Webデザインに取り入れたいグラデーションの効果的な使い方
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617028/d20a3e11-c0b3-8ae2-c68e-bf6184974a1f.png)
グラデーションを使った美しいサイトを多数紹介していて、グラデーションを扱う上でのコツなども載せている。お手本にしてサイトを作ってみると思いのほかきれいな出来になる。すごい。
URL : https://spc-jpn.co.jp/blog/4306/


#要素
全体のデザインではなく、ボタンやアイコン、グラデーションに関して今すぐに活用できるサイト達。

##CSSで作る！押したくなるボタンデザイン100（Web用）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617028/72e8b598-9c6a-f11d-cb1b-dfc9a09e6d7a.png)
いちいちデザインに悩むボタンが、CSSのコードと共に多数掲載されている。目次から自分の求めている雰囲気のボタンをすぐに見つけられるうえ、コードをすぐに確認できるという優れサイト。~~そもそもこのページ自体のデザインが好み~~
URL : https://saruwakakun.com/html-css/reference/buttons#section7

##Grabient
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617028/e8ca9655-25c0-2d47-acb9-065c34623395.png)
25種類のサンプルから、色やバランスを自由に調整することでグラデーション作成が簡単に行える。コードもすぐに参照できるため優秀。下と合わせて活用したい。
URL : https://www.grabient.com/

##CSSのグラデーション（linear-gradient）の使い方を総まとめ！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617028/268563b8-030b-e084-4fc6-654b074247ed.png)
上のグラデーションサンプルのサイトに付随して。基本のグラデーションを表示させるコードから、様々な活用例までわかりやすく説明されている。グラデーションのサンプルやジェネレーターなどの外部リンクも充実していて、これだけ見ればばっちりカモ？
URL : https://saruwakakun.com/html-css/basic/linear-radial-gradient#section12

##Font Awesome
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617028/80111630-cb3f-c77b-646b-5b2b6b8896e8.png)
言わずもがな。ページ作成の上では必須といっても過言ではない？
URL : https://fontawesome.com/
[AWS]S3の設定手順

# 背景
S3はかなり使うAWSのサービスのため、設定手順をまとめて備忘録とする。

## 手順

1.S3のページに行き、「バケットの作成」をクリック

2.バケット名を作成し、リージョンを東京に設定

3.「パブリックアクセスを全てブロック」のチェック外す

4.新規のパブリック〜、あらゆるパブリック〜、にチェックを入れる

5.内容を確認し作成

6.IAMページからユーザーを選択する

7.ユーザーのARNをコピーしておく

8.S3のページに行き、バケットを選択

9.「アクセス権限」→「バケットポリシー」をクリック

10.以下を入力し保存する

```
{
    "Version": "2012-10-17",
    "Id": "Policy1544152951996",
    "Statement": [
        {
            "Sid": "Stmt1544152948221",
            "Effect": "Allow",
            "Principal": {
                "AWS": "ユーザーのARN"
            },
            "Action": "s3:*",
            "Resource": "arn:aws:s3:::バケット名"
        }
    ]
}
```
コンソール上でネットワークの速度を簡単に調べるコマンド

【追記】 speedtest-cli で計測する方法もあります ⇒ [記事](https://qiita.com/strike_yanagi/items/546cd81d9fd9baeeb2d6)

レンタルしたVPSのマシンのネットワークのベンチマークを取りたいときに場合に覚えておくと便利です。

```
$ curl http://cachefly.cachefly.net/100mb.test > /dev/null
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  100M  100  100M    0     0  11.4M      0  0:00:08  0:00:08 --:--:-- 12.7M
```

[CacheFly](https://www.cachefly.com/) という CDN サービスが CDN の速度を確認するためのテスト・ファイルを公開しています。本来は CDN の速度を確かめる為のものですが、逆に見れば、マシンのネットワークの速度を確かめることが出来ます。(逆というか、通信とは二者間の話なので当然の話)

マシンの回線速度はそれが接続しているネットワーク以外にも、通信先のマシンや、ロケーション、経路が関係してくるので、調べるのは難しく、このテスト・ファイルは非常にありがたいです。

参考

- http://cachefly.cachefly.net/speedtest/?ref=driverlayer.com/web
- https://medium.com/@icostar/vultr-vs-linode-vs-digitalocean-comparison-58590d98ef28
- https://gist.github.com/raulmoyareyes/34cbd643e2c93be64746
[AWS]セキュリティ強化方法３選

# 背景
アプリ制作においてセキュリティ面の充実は必須のため有効手段をまとめてみた。


### 二段階認証
1.携帯でAuthyをインストール、登録する

2.AWSのメニューから「マイセキュリティ資格情報」を選択する

3.「多要素認証(MFA)」→「MFAの有効化」をクリックする

4.モーダル画面の中から「仮想MFAデバイス」を選択し「続行」をクリック

5.QRコードをスマホで読み取る


### IAMユーザー利用
1.AWSのページからIAMのページに飛び「個々のIAMユーザーの作成」をクリックする

2.「ユーザーの管理」→「ユーザーの追加」をクリック

3.ユーザー名を入力し、「プログラムによるアクセス」にチェックし次のステップへ

4「既存のポリシーを直接アタッチ」を選択

5.「AmazonS3FullAccess」をチェックし次のステップへ

6.このページは特に何もせずに次のステップへ

7.内容確認後、ユーザーの作成(ダウンロードしておく)

8.「名前」→「認証情報」→「コンソールのパスワード管理」をクリック

9.「有効化」と「自動生成パスワード」をクリックし適用する

10.csvファイルはダウンロードしておく

※IAMユーザーにもに段階認証を設定しておく


### git-secrets

```javascript

$ cd ~/

$ brew install git-secrets               // インストールする

$ cd                                     // 設定したいアプリにいく

$ git secrets --install

$ git secrets --register-aws --global    // AWS関連の秘密情報を設定してくれる

$ git secrets --list                     // 内容確認をする

$ git secrets --install ~/.git-templates/git-secrets

$ git config --global init.templatedir '~/.git-templates/git-secrets'   // ７と８で今後作成するリポジトリに設定を適用させる

```
インクリメンタルサーチの実装手順について

# 背景
インクリメンタルサーチの実装に手こずったため備忘録を残したく、書いた。

## 手順

1.API側の準備。(ルーティング、アクション、jbuilderファイル作成、記述)
※API="何か"と"何か"をつなぐもの

2.テキストフィールド作成

3.jsファイルを作成し、テキストフィールドに入力されるたびにイベント発火する処理を記述。
[例]

```users.js

$(function() {
  $("テキストフィールドのセレクタ").on("keyup", function() {
    var input = $("テキストフィールドのセレクタ").val();
  });
});

```

4.イベント時に非同期通信が出来るようにする。
[例]

```users.js
$.ajax({
  type: "GET",
  url: "/users",
  data: { keyword: input },
  dataType: "json"
})

```

5.非同期通信の結果を得て、HTMLを作成。

6.エラー時の処理を記述。


[記述例]

```users.js

$(function() {
// 該当ありの場合に発動させる関数
  function addUser(user) {
    let html = `
    追加したいHTMLを記述する。(クラス名はscssに対応したやつor新たに作る)
      <div class="chat-group-user clearfix">
        <p class="chat-group-user__name">${user.name}</p>
        <div class="user-search-add chat-group-user__btn chat-group-user__btn--add" data-user-id="${user.id}" data-user-name="${user.name}">追加</div>
      </div>
    `;
    $("#user-search-result").append(html);
  }
  
// 該当なしの場合に発動させる関数
  function addNoUser() {
    let html = `
      <div class="chat-group-user clearfix">
        <p class="chat-group-user__name">ユーザーが見つかりません</p>
      </div>
    `;
    $("#user-search-result").append(html);
  }
  
// テキストフィールドに入力される度にイベント発火
  $("#user-search-field").on("keyup", function() {
// 入力された内容を変数に入れる
    let input = $("#user-search-field").val();
// 非同期通信の記述
    $.ajax({
      type: "GET",
      url: "/users",
      data: { keyword: input },
      dataType: "json"
    })
      // 成功した場合
      .done(function(users) {
      // 表示していた一覧の中身削除
        $("#user-search-result").empty();
      // 文字が入力された場合に該当ユーザーを表示する関数使用
        if (users.length !== 0) {
          users.forEach(function(user) {
            addUser(user);
          });
      // 文字が入力されていない場合は何も表示しない
        } else if (input.length == 0) {
          return false;
      // そのほかの場合、見つかりませんと表示する関数を使用
        } else {
          addNoUser();
        }
      })
      // 失敗した場合
      .fail(function() {
        alert("通信エラーです。ユーザーが表示できません。");
      });
  });
});

```