OmniAICreator/Qiita-1.07M huggingface dataset:
【Git】.DS_Storeを無視する

マシンを変えてから、設定してなく、煩わしかった。
備忘録。

# 自分のマシンのgit で.DS_Storeを無視する。

### ・ファイル作成
```
$ touch .gitignore_global
```

### ・無視したいファイルを記述

```
$ vi .gitignore_global
```

iして、「.DS_Store」書いてescして、:wqして、Enter

### ・作成したファイルを適用
```
$ git config --global core.excludesfile ~/.gitignore_global
```
* そのリポジトリだけで良いなら、「--local」

### ・確認
下記に、適用したファイルが入っていれば完了
>core.excludesfile=

```
$ git config --global --list
~省略~
core.excludesfile=/Users/XXXX/.gitignore_global
```

## あとがき
あと回さないで、やっときゃよかった〜〜！
素敵なGit生活をー！！
ビッグデータは、不可能を可能にする。これからのビッグデータ（大きな参照テーブル）活用法

# ビッグな参照テーブルのビッグデータが熱い(と思う）

## [対数表は紙計算機](https://jbpress.ismedia.jp/articles/-/49009)
ビッグデータのブームは去った気がしますが、ビッグデータな参照テーブルが熱くなりそうです。つい最近まで、計算には対数表という大きな数表がつかわれていました。計算が大変だったときに対数表はすごく役立ちました。計算するとき表参照(Lookup Table)するのはよくあります。九九がそうですね。ただ、そういった表参照は、アルゴリズムが高速化したらどんどんすたれました。[九九だって覚えなくてよいという記事](https://gendai.ismedia.jp/articles/-/49596)もあります。一方、表参照が不可能を可能にするという[記事](https://hackaday.com/2020/01/10/using-lookup-tables-to-make-the-impossible-possible/)もあります。つまり、アルゴリズム全盛の今でも、表参照が有効な領域があるというのです。従来に比べて、メモリや、ディスク容量が増えてきているのに、CPU性能向上がおいついていないのです。つい最近までは、CPUの速度向上にメモリやディスクは追いついていませんでしたが、CPUの速度向上は頭打ちになっています。一方、容量という意味では、メモリもディスクも飛躍的に増やしています。この逆転現象をどうかんがえるかです。

## 表参照(Lookup table)の本質は、事前処理をして実行時の負荷軽減
対数表は、事前に計算を行い、その表をつかって、計算実行時は、掛け算を足し算にして計算負荷を軽減します。今は、計算が高速にできるので、事前の計算などしなくて良いことが多くなっています。それで、九九など覚えなくてよいというわけです。ただ、素数判定を高速化しようとすると、素数表を使うのは有効のようです。[素数表をつかう素数判定をjavascriptでしてくれるページ](https://tools.m-bsys.com/calculators/prime_number.php)があります。小学校５年生的いえば、事前に準備して、実行に必要なときの処理時間を減らすといいですね。という話です。ボーイスカウトでよく使われる「備えよ常に」というわけです。ビジネスの世界でも同様の発想があります。トヨタの外段取り(シングル段取り)が有名です。

## ソート、検索を高速化してみよう。最初からソートしてあれば、ソート不要です。検索も高速化できますね。
どうしたら、高速のソートができるかという議論がよくあります。データ作成時に、ソートしておけば、ソートは不要です。ソート対象のデータが変更のないアーカイブなら、アーカイブ作成時点でソートをしておけばいいのではないでしょうか？　アーカイブデータで検索を早くするにはどうしたらいいのでしょうか？ CSVのような表形式のデータでアーカイブデータを想定してみましょう。こんな処理をしたらどうでしょうか？

### **データの列はソート順の自然数として表現する。超高速で検索可能に**
列のデータタイプはいろいろありますが、整数、浮動小数点、文字列だろうが、ソートして重複をのぞいて順番に自然数を割り当てたリストをつくります。これで、各列にSQL的に言えば、index がついたような状態になります。このとき、このソートして自然数化した並べられた列は、全体の数がわかっているので、[２分検索](https://ja.wikipedia.org/wiki/%E4%BA%8C%E5%88%86%E6%8E%A2%E7%B4%A2)が可能で、超高速検索になります。検索にかかる処理時間は、O(log(n)) です。超高速です。でも、これだけでは、検索した列の中だけで超高速になっただけです。該当する行を取り出す必要があります。

### **データの行は最初の順番（自然数）そのままで、データ取得は行番号（自然数）で行う**
ある列で検索した結果の行番号を取得するのは、この行番号と紐づけされた２つのリストが必要になります。ひとつは、重複データとの関連付けです。列ごとにソートされ自然数化したリストは、重複を省いた状態で作成されています。そこで、重複前の列ごとのソートリストで、その値が始まる位置（自然数）を保持しておきます。もうひとつは、行番号を、列の値順にソートしたリストです。この２つのリストがあると、元の行番号の頭出ができて、順番にデータをとりだすことができます。さらに、行番号から計算だけで、保存されたディスク上の位置を指定できるようにしておけば、データ取得もハッシュテーブルなどつかわなくて済むので高速です。行番号に相当するデータの格納バイト数を一定にしておけばこれは簡単に実現できます。

図表がないのでちょっとわかりにくいでしょうけど、雰囲気はわかってもらえたでしょうか？

ソート、検索の高速化はこのようなアイデアでかなりいけます。実は、上記の発想はずっと前に実現され、すでに実用化されています。こういった発想で、ビッグデータを高速に扱う技術がどんどんでてくるといいですね。
VsCode_Jupyterの文字化けの対策（chcp）

Visual Studio Code用のJupyter拡張機能をインストールしました。
![Jupyter_ms_ex.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551056/d1510730-3f52-496c-9e76-00e340e01de0.png)

試すため「!dir」を実行しましたが文字化け発生しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551056/866ea68c-59d7-29e5-3e4a-b2221e6cd955.png)

chcpで文字コードを指定することで直しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551056/2c2f64bc-bc74-7269-3028-66ea5e67e465.png)
【Swift】UITextFieldのplaceholderの色を変更する

<code>textfield.placeholderColor</code>みたいな感じで簡単に変更できるかなと思っていたのですが、そういう訳には行かなかったです。

|開発環境|バージョン|
|:-----------|:-----------|
|Xcode|12.1|
|iOS|14.1|
|Swift|5|

##textFieldのattributedPladeholderに値を代入してスタイルを変更する

```swift:
textField.attributedPlaceholder = NSAttributedString(string: "placeholder text",
                                                     attributes: [NSAttributedString.Key.foregroundColor: UIColor.red])
```
##foegroundColorで色を変更する

<code>attributes: [NSAttributedString.Key.foregroundColor: <font color="red"><b>UIColor.red</b></font>]</code>

今回は例で<font color="red">赤色</font>にしている箇所をお好みの色に変更すればplaceholderの色が変更出来ます。

##おまけ
・<code>attributed</code>って何だと思い意味を調べたら、

<b>〜に帰属する</b>

という意味でした。

・<code>attributedPladeholder</code>の説明には、このように記載があります。

>The styled string that is displayed when there is no other text in the text field.

テキストフィールドにテキストが無い時に表示されるスタイルされたStringです

とのことです。

その<b>スタイル</b>に<code>NSAttributedString</code>を代入して決めてあげる感じみたいです。

##参考
<a href="https://www.366service.com/jp/qa/50c8fabc33df425461e4d278f5f7d5d8">SwiftでPlaceholderテキストの色を変更する</a>
Metal で サポートしている GPU family と feature set を調べる

### M1 Mac mini がやってきた

我が家に M1 Chip の Mac mini がやってきました。これまで、Metal の試行錯誤は、Intel Mac の Simulator と 実際の iPhone や iPad でサポートしている機能が違うので、試行錯誤の効率が悪かったのですが、M1 Chip Mac を入手したので、A12相当の機能の試行錯誤などの効率があがるものと期待していました。しかし、M1 Chip の Mac の Simulator で検証コードを動かすと、思いもよらぬところで落ちました。

「あれ？」と思い、iPad Pro で実行すると、落ちません。そこで、色々調べ始めると、M1 Chip + Big Sur + Xcode 12.2 のシミュレータでは、A8相当にしかならない事に気がつきました。そこで、2020年10月21日つまり比較的最近アップデートされた、Metal Feature Set Tables を調べてみても、M1 の記述が全くありません。

<img width="640" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65634/20ec9340-0ff3-fbd5-cb9a-5f1ff9450faa.png"/>

### Metal Feature Set Tables

Appleの公式ドキュメントはこれです。

https://developer.apple.com/metal/Metal-Feature-Set-Tables.pdf

### iOS, macOSの実行環境は結構組み合わせが多い

よくよく考えると、macOS, iOS で動作するアプリの環境は様々です。

* iOS native on A chip
* iOS simulator on Intel Mac
* iOS simulator on M chip
* macOS native on Intel Mac
* macOS native on M chip
* macCatalyst on Intel Mac
* macCatalyst on M chip

例えば最終的な実行環境はA chipのみを対象としていても、開発工程で simulator などを使うと効率が上がる場合があります。Metal で試行錯誤を繰り返すには、どの機能がどの環境で動作するのか明確にする必要があると思いました。

### MetalFeatureQuery

そこで、簡単にテストできるプロジェクトを作ってみました。上記の組み合わせで動作する筈ですが、まだ全てで試した訳ではありません。

https://github.com/codelynx/MetalFeatureQuery


<img width="320" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65634/b44b26d1-e035-6f02-4836-230b4e8c30d2.png"/>

### 環境

執筆時点の環境は以下の通りです。

```.log
Apple Swift version 5.3.1 (swiftlang-1200.0.41 clang-1200.0.32.8)
Target: arm64-apple-darwin20.1.0
```

Xcode Version 12.2 (12B45b)
macOS Big Sur 11.0.1 (20B29)

### License

MIT License
SPA(Single Page Application)とは

<h1>SPAについて</h1>


単一のWebページで機能をなすWebアプリケーションのこと。


<h2>SPAのメリット</h2>

①ページが変わることによりストレスがなくなる。


②開発者のコーディングの量が減る


<h2>SPAのデメリット</h2>

①ローディングに時間がかかる


②処理が重くなる傾向にある
Sahni Bakery (+91-9988224408) ||Punjab||

Sahni Bakery is one of the best places to get crunchy cookies, dry cakes and a great variety of biscuits, whatever you are looking for you will definitely get from this beloved bakery.The best thing about this charming Sahni bakery Biscuits is that we offers almost everything like Cakes, Biscuits, Namkeen, pastries, sweets and fast food items also.Our Products also includes Gift Packages, Party Packages and Catering Services.Please feel free to contact us at +91-9988224408.

Visit: https://sahnibakery.com/biscuits/
MacOS Big Surにアプデして以来、VSCodeで、ターミナルを分割する時数秒程度待たされる問題の解決法

VSCodeには[内蔵ターミナル(Integrated Terminal)](https://code.visualstudio.com/docs/editor/integrated-terminal#_terminal-splitting)がついています。

この内蔵ターミナルは、[分割する(Split Terminal)事](https://code.visualstudio.com/docs/editor/integrated-terminal#_terminal-splitting)ができます。

![2020-11-19 19-33-48.2020-11-19 19_35_10.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145550/88ea3d90-cb03-ba82-f97b-d9d4fd377dd8.gif)


MacOS Big Surにアップデートして以来、ターミナルを分割する毎に数秒待たされる不具合が発生しています。

[こちらのGithub Issue](Integrated Terminal Lags Intermittently #105446)で、一時的な解決策が提示してありました。

ターミナルを立ち上げて、こちらのコマンドを実行するだけ。

```zsh
codesign --remove-signature /Applications/Visual\ Studio\ Code.app/Contents/Frameworks/Code\ Helper\ \(Renderer\).app
```

ただし、アプリの署名を除去するので、どう言った問題が生じるのかわかりませんが、あとは公式が治してくれるまで待つしかなさそうです。
HELP！！⇒動いたなう【Kotlin】 端末起動時にレシーバーで受けて処理が出来ない。。教えてください。

 かれこれ相当な時間を要したが、未だに解決出来ず助けて欲しいです。。。

# やりたいこと：　端末起動時にアプリからローカル通知を設定し直す
Android端末は再起動すると、
セットしてたAlarmManagerの処理は揮発しちゃうんですよね。。

そこで下記記事を見ていろいろやっては見たのですが
[Android の AlarmManager を改めて整理してみる](https://qiita.com/upft_rkoshida/items/8149605f751137b4c21c)
[does Alarm Manager persist even after reboot?](https://stackoverflow.com/questions/12034357/does-alarm-manager-persist-even-after-reboot)

アプリ起動時にレシーバーで受けるところがそもそも出来ていない様です
（レシーバーでトースト表示しにかかってますが一向に反応なし。。）

プロジェクト作りなおして、端末再起動時のレシーバーでの取得部分のみ最小限でやってみたのが下記です。

```AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.myapplication">

    <uses-permission android:name="android.permission.ACTION_BOOT_COMPLETED"/>

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name"
            android:theme="@style/AppTheme.NoActionBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <receiver
            android:name=".BootCompletedReceiver"
            android:enabled="true"
            android:exported="false"
            android:process="">
            <intent-filter>
                <action android:name="android.intent.action.BOOT_COMPLETED" />
                <category android:name="android.intent.category.DEFAULT" />
            </intent-filter>
        </receiver>
    </application>

</manifest>
```

```BootCompletedReceiver.kt
package com.example.myapplication

import android.annotation.SuppressLint
import android.content.BroadcastReceiver
import android.content.Context
import android.content.Intent
import android.widget.Toast

class BootCompletedReceiver : BroadcastReceiver() {
    @SuppressLint("SimpleDateFormat")

    override fun onReceive(context: Context, intent: Intent) {
        if (intent.action == "android.intent.action.BOOT_COMPLETED") {
            // 確認用
            val toast: Toast = Toast.makeText(context, "yes", Toast.LENGTH_LONG)
            toast.show()

            Intent(context, MainActivity::class.java).apply {
                flags = Intent.FLAG_ACTIVITY_NEW_TASK
                context?.startActivity(this)
            }


        }
    }
}
```

これで実機で再起動したり、
こちらの記事[再起動をadbコマンドで実行する](https://qiita.com/kumas/items/e34c0d809ae9e5e4fda7)
を参考にしてエミュレーターにたいして下記コマンド使ってトーストが出てくるのを期待するもいっこうに反応がありません。

```
#　am broadcast -a android.intent.action.ACTION_BOOT_COMPLETED
```

結構時間費やしたのですが万作尽きた感じです。。情けない。
誰か助けて下さい。


以上、宜しくお願い致します。
Gradle の Source Dependencies で外部ライブラリを参照したら、ビルド不能になった

gradle の [ソースコード参照（Source Dependencies）](https://blog.gradle.org/introducing-source-dependencies) 機能を使うと git の gradle プロジェクトをソースコードのまま参照出来て便利です。しかし、自作の外部ライブラリ（Android Library）をソースコード参照したところ、ビルドが全くできなくなりました。

`./gradlew assemble` しても、参照先の build.gradle のタスクが一切走りません。結果として、必要なクラスが一切見つからない状態となってしまいます。

どうもエラーが内部で握りつぶされているようで、--info や --stacktrace オプションを付けても原因がまったく分かりません。

調査に挫折しかけたのですが、なにかの条件（再現できない…）で偶然 `SDK location not found.` のエラーメッセージが流れてきたため、原因が分かりました。参照先の Android Library プロジェクトで ANDROID SDK のパスが見つからず、 Android Plugin が初期化できずに終了していたのです。

## 解決方法
環境変数 ANDROID_SDK_ROOT に Android SDK のパスをセットしてから、ビルドすることで解決しました。

## よもやま
Flutter Plugin の開発時に sourceControl を使っていたため、非常に分かりにくいことになっていました。 Flutter の場合、flutter run 時に、local.properties ファイルに ANDROID SDK のパスを自動で出力してくれるのです。が、 Source Dependencies で参照したプロジェクトからは local.properties 内容は当然見えないため、SDK が見つからない、という状態になってしまうようです。
【Moment.js】日本語の時刻表示から午前・午後を判定する方法

## 前提
[Moment.js](https://momentjs.com/)で時刻表示を扱う場合は、まず時刻のフォーマットを指定して、文字列をmomentオブジェクトに変換しなければなりません。

以下のように第2引数で指定してあげましょう。

```typescript
// 第2引数が大事！
moment('13:00', 'HH:mm');
```
これで準備はOKです。

## コード
「午前」や「午後」という形にフォーマットする際は`A`または`a`を使います。
日本語の場合は「午前」も「午後」も漢字なので、どちらを指定しても大丈夫です。

```typescript
moment.local('ja');

const noon = moment('12:00', 'HH:mm').format('a');
console.log(noon) // => 午後

const midnight = moment('24:00', 'HH:mm').format('a');
console.log(midnight) // => 午前
```

ただし、英語の場合は`A`と`a`で出力結果が変わりますので、ご注意ください。

```typescript
moment.local('en');

// 小文字'a'の場合
const noon = moment('12:00', 'HH:mm').format('a');
console.log(noon) // => pm

// 大文字'A'の場合
const noon = moment('12:00', 'HH:mm').format('A');
console.log(noon) // => PM

```
【個人開発】日常用のメモ帳アプリ（PWAアプリ）をリリースしてみた

# はじめに

- カレンダーとメモが、「ガッチリ結びついた」メモ帳が欲しいなぁ。
- というコンセプトで作りました。
- 無料です。


https://time-note-app.firebaseapp.com

※ 2022/02/10 追記
アプリのURLを上記に変更。

※ 2022/10/04 追記
2023/03/31にGoogleの旧ログイン方法が廃止されます。
アプリのアップデートは行われませんので、新規登録やログインはお控えください。

# 見栄え感
- アプリ名の通り、時間に紐付いたメモが出来るのが特徴です！

<img width="75%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/805885/f23d1656-634e-31d0-72c0-248cea3b222c.png">

<img width="75%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/805885/1dbbe3dc-7308-f075-090f-ce3b8134b84f.png">


# 技術スタック

- 言語
  - TypeScript
- フレームワーク
  - Vue.js + CompositionAPI
- データ保存
  - GoogleDriveAPI
  - IndexedDB + CacheAPI
- ホスティング
  - FirebaseHosting
- アプリ機能
  - ServiceWorker（PWA）
  - FirebaseRemoteConfig （アップデート管理）


# 使い勝手のポイント

- GoogleのWebアプリのように、右クリックで操作できます。UIがシンプルになりました！

<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/805885/93bd9e68-997f-653f-6217-c30ff27b0df8.png">

# ありがとう！

データはGoogleDriveに保存されるので、こちらからは一切わかりません。
使って頂けたら嬉しいです。
ありがとう！
ほぼ未経験Webエンジニアが入社半年でしたことまとめ（2020/11）

#言語

・PHP
・HTML
・JavaScript
（・MySQL）

#やったこと

・Web開発用の開発環境構築（XAMPP設定など）（なんだかんだ３，４回した気がする）
・変数や配列など基礎的な内容を理解
・Ajax勉強
・オブジェクト指向の勉強
・セキュリティ少し学んだ
・DBについて少し学んだ
・より良いコードが書けるようにリーダブルコードを読んだ
・リーダブルコードを英語で読みたいと思い、原書を購入（まだ読んでない…）
・mapboxのチュートリアル的なページを確認
・HTMLとJavaScriptにmapboxAPIを組み合わせて、マップ情報を活用したHTMLファイル作成（指定場所の面積計算など）
・エンジニア数十人が書いたエッセイ集みたいな本を買って読んだ
・メルカリ創業の本を読んだ（サクセスストーリー感があって非常に面白かった）
・kotlinとswiftをすこし内容みてみた
・UdemyでswiftとJavaScriptのコース（英語）を受講（現在進行中）

#感想
・幅広く興味を持っていい経験ができた気がする
・mapboxに触れられたのはよかった
・Udemyの英語コースは、英語の勉強にもなってとてもよい
・ちょっと時間の使い方があまりうまくなかった
・もう少しやりたいことに時間を使えばよかった
・面白いものをもっと探求したかった、開発できていればよかった
・もっと本を読みたい

#今後やりたいこと
・kotlinまたswiftに本格的に手を出す
・何か１つスマホアプリをリリースする
・フレームワークに手を出す
・JavaScriptでアニメーションっぽいものを駆使して何か面白いものをつくる
・mapboxを駆使して一風変わったワクワクするものをつくりたい
・mapboxでARのAPIが活用出来たら面白そうなので、ARで何かできないか模索する
個人アプリ開発日記　＃２

# 基本的なテーブル構造


## users テーブル

| Column           | Type   | Options                   |
| ---------------- | ------ | ------------------------- |
| nickname         | string | null: false               |
| email            | string | null: false, unique: true |
|password_digest   | string | null: false               |
| remember_digest        | string |             |
| reset_digest     | string |               |
| activation_digest   | string | null: false               |
| activated  | boolean |      default: false      |
| activated_ad      | datetime  | null: false               |

### Association

- has_many :drinks
- has_many :comments
- has_many  :trades


## drinks テーブル

**coffeeは不可算名刺なので初心者が扱うのが怖かった、、**

| Column    | Type   | Options                       |
| --------- | ------ | ----------------------------- |
| name      | string | null: false                   |
| price     | integer| null: false                   | 
| explain   | text   | null: false                   |
| user_id   | integer| null: false,foreign_key: true |

### Association

- belongs_to :user
- has_many   :comments
- has_many   :tags,
- has_many   :tags,through: :coffee_tags
- has_one    :trade

## tags テーブル

| Column    | Type   | Options                       |
| --------- | ------ | ----------------------------- |
| name   | string|          null: false         | 

- has_many :drinks
- has_many :tags,through: :coffee_tags

## coffee_tags テーブル

| Column    | Type   | Options                       |
| --------- | ------ | ----------------------------- |
| drink_id      | integer |null: false,foreign_key: true                  |
| tag_id    | integer| null: false,foreign_key: true                  | 

- belongs_to :drink
- belongs_to :tag

## comments テーブル

| Column   | Type   | Options                       |
| -------- | ------ | ----------------------------- |
| content  | text   | null: false                   |
| user_id  | integer| null: false,foreign_key: true |
| drink_id  | integer| null: false,foreign_key: true |

### Association

- belongs_to :user
- belongs_to :drink

## addresses テーブル

| Column        | Type   | Options                       |
| ------------- | ------ | ----------------------------- |
| postal_code   | string | null: false                   |
| prefecture_id | integer| null: false                   |
| city          | string | null: false                   |
| house_num     | string | null: false                   |
| building_name | string |                               |
| phone_num     | string | null:false,unique: true       |
| trade_id      | integer| null:false,foreign_key: true  |

### Association

- belongs_to :trade

## trades テーブル

| Column        | Type   | Options                       |
| ------------- | ------ | ----------------------------- |
| user_id       | integer| null: false,foreign_key: true |
| drink_id       | integer| null: false,foreign_key: true |

### Association

- belongs_to :user
- belongs_to :drink
- has_one :address

**次回は実際のコードに触れていきます**
初心者はDeviseをカスタマイズするなという話

#Deviseを実装したら迷走した
Deviseのことをよくわかっておらず、Contorollerやviewから全部作って設定しようとしてたので、戒めとして記事を書きます。
#ControllerとViewは最初からある
Ruby初心者の私はこんなことも直感的に分からなかったんですね。

https://qiita.com/hakatatech/items/f991d54ff527edb844d9

この辺りの記事をみて「はえ〜コマンドでコントローラー作るんだなあ」とコピペで実装していきましたが、最初からあるのでこういうのは実装しなくてOKです。
#それでも最初はコマンドを打たねばならない
まあgemファイル追加して必要なものは設定しないといけないので、こちらの記事を参考に実装してみてください。

実際に３日悩んだ結果、ここが一番簡潔で明快でした。

https://qiita.com/salvage0707/items/d3ddc889458ac186e62e

もう初心者はここの「Deviseの使い方」だけやってればいいと思いました。


#email認証じゃなくしたいんですけど？
そういう方へは、なんとDeviseの公式記事がございます。

https://github.com/heartcombo/devise/wiki/How-To:-Allow-users-to-sign-in-with-something-other-than-their-email-address

英語ですが、email認証からusername認証にするための方法が全部書かれいてるのでDeepLで翻訳して読んでください。
#終わりに
プログラミングの鉄則に**「複数のタスクを同時に解決しようとするんじゃない、一個ずつやりなさい」**というものがあるみたいですが、今回で身に沁みて分かりました。

あまりにもタスクが多いと「分からないことが分からない」みたいな状況に陥りがちなので、エラー画面から読み取って一つひとつ解決していきます。
Vueのバージョンアップとバージョンダウンを繰り返す

# Vue2とVue4を行き来しなければならない
## Vue2からVue４にする
```cl
＃ バージョン確認
test@test hoge % vue --version
@vue/cli 4.2.2

# Vue2をアンインストール
test@test hoge % npm uninstall vue-cli -g

# Vue4をインストール
test@test hoge % npm install -g @vue/cli

```

## Vue4からVue2にする
```cl
＃ バージョン確認
test@test hoge % vue --version
@vue/cli 4.2.2

# Vue2をアンインストール
test@test hoge % npm uninstall -g @vue/cli

# Vue4をインストール
test@test hoge % npm install vue-cli -g

```
数字を3桁ごとに区切る(python)

`'{:,}'.format()`を使って98765の数字を98,765にする。
数値(int)じゃないと区切れない。文字列(str)だとValueErrorになる。

```py
# python

>>> l=['12345',98765]  # 12345は文字列、98765は数値なリストを作る
>>> 
>>> l
['12345', 98765]
>>> 
>>> print(type(l[0]))  # 型の確認
<type 'str'>
>>> print(type(l[1]))  # 型の確認
<type 'int'>
>>> 
>>> l[0] = '{:,}'.format(l[0])  # str型を区切ろうとしてもエラーになる
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
ValueError: Cannot specify ',' with 's'.
>>> 
>>> l[1] = '{:,}'.format(l[1])  # int型だと問題ない
>>> 
>>> l
['12345', '98,765']
>>>
>>> type(l[1])  # ただし、区切ったあとはintじゃなくてstrになる。
<type 'str'>
>>>
>>> l[0] = '{:,}'.format(int(l[0]))  #str型のところはint()を使う
>>> l
['12,345', '98,765']
>>>
```


f-stringを使ってみた

```py
>>> m
['12345', 98765]
>>>
>>>
>>> print(f'{m[0]:,}')
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
ValueError: Cannot specify ',' with 's'.
>>>
>>>
>>> print(f'{int(m[0]):,}')
12,345
>>>
>>>
>>> print(f'{m[1]:,}')
98,765
```
【ALE 使用者向け】vim-prettier の Prettier: failed to parse buffer 解消法

Vim で Prettier 使いたくて vim-prettier いれたけど、`Prettier: failed to parse buffer` のエラー出て困ってる人、ALE を既に入れてる場合は、vim-prettier をいれる必要なくて ALE で Prettier 設定できます。お試しあれ。

Vim Setup | prettier.io
https://prettier.io/docs/en/vim.html
【Java】クラス

#クラス・フィールド変数
Javaの勉強で、「クラス」について学んだことをアウトプットしていきます。

##クラス
クラスとは、「 データ 」と「 処理 」の集まりです。
Javaのプログラムは、クラスを複数組み合わせてプログラミングしていく。
Javaのプログラミングは **`クラスのプログラミング` と、`呼び出し側のプログラミング`**の2つの作業に分かれる。

###クラスのプログラミング
クラスには、**そのクラスが持つ特徴や情報などの`データ`**と、そのクラスで行いたいタスク、TODO、ふるまいなどの**`処理`**を書きます。

###呼び出し側のプログラミング
クラスが完成したらクラスの**[インスタンス化]**をして、メソッドの呼び出しを記述する。

クラスのプログラミングの注意点は

- 必ず**`public class クラス `**と記述すること。
- **{ }の中に`データ`と`処理`を記述**すること。

この囲まれたコードのまとまりを**ブロック**という。

```java

// ここからブロック範囲=============================
//クラス（最初の一文字は半角英大文字）
public class HelloWorld {
    // フィールド
    private String printHello;
    // コンストラクタ
    public HelloWorld() {
        printHello = "Hello World";
    }
    // メソッド
    public void print() {
        System.out.println(printHello);
    }
}
// ここまでブロック範囲=============================
```

###【パスカルケース】Javaのクラス名の命名規則
「**クラス名の最初の一文字は半角英大文字**とすること」とコード内にも書きましたが、つまりは**パスカルケース（Pascal記法）で書く** ということです。
パスカルケースのルールは

- **先頭は大文字**
- **言葉の区切りは大文字**
- **それ以外は小文字**

となります。つまり **「JavaScript」, 「MyName」, 「AppleJuice」** みたいな書き方です。

クラス名の付け方に悩んだら[codec][] などのサービスがおすすめですのでつかってみてください。他にも良いサービスがあったらぜひ！

## mainメソッド

コーディングしたクラスを動かすためには、**自クラス又は他のクラス内に mainメソッド を記述しないといけません。**
そのmainメソッドの中で **[new演算子]** を使用し、メモリ上にクラスが扱うデータ用の領域を新規に確保します。


# 参考記事・文献
- [Java言語の命名指針](https://qiita.com/rkonno/items/1b30daf83854fecbb814)
- [codec][]
- [Javaのnew演算子の使い方【初心者向け】][]

[Javaのnew演算子の使い方【初心者向け】]:https://techacademy.jp/magazine/18937
[codec]:http://qiita.com/drafts/c686397e4a0f4f11683d

[インスタンス化]:https://qiita.com/takahirocook/items/ec01cdcbb440cf0d1cc4
[アクセス修飾子]:https://qiita.com/takahirocook/items/e51b0b9d37d95ad587fe
[フィールド変数]:https://qiita.com/takahirocook/items/28df75a133049a74ece1
[new演算子]:https://qiita.com/takahirocook/items/00f9f97592bf50831d39
[カプセル化]:https://qiita.com/takahirocook/items/e469a7c0539a0012868e
個人アプリ開発日記　 #1

:point_up:
初めましてHarasouです。これから個人アプリを開発するのでその進捗を更新指定いきたいと思います、、！

◎ポートフォリオ概要
■何を作るか
コーヒーの感想をみんなとシェアできて、コーヒーを購入できるアプリ

■なぜ作ろうと思ったか
コーヒーが大好きで、みんなのおすすめのコーヒーを
知りたかったけど、日本にコーヒー専用アプリみたいなのはなかった

スタバはみんな知ってるのに,スタバのサービスのコーヒーパスポートはみんな知らない

スタバには「コーヒーパスポート」と言う、コーヒーの記録を取れる手帳が実はあるんです、、、！

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653881/69cfcb64-56cb-14c6-a165-5f408ea37145.jpeg" width=50%>


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653881/b388e423-a636-87fc-9ac8-1b2f0f65c430.jpeg" width=50%>


<strong>お洒落でございますね、、、</strong>(字が汚い,,)

こんな風に記録を取ることができます、、、！！

■必要な機能

コーヒー購入機能(提携した企業によって商品ラインナップが変わる)
投稿機能
ユーザー登録機能
ログイン機能
ユーザー詳細表示機能
ユーザー編集機能
ユーザー削除機能
投稿一覧表示機能
投稿に画像
投稿詳細表示機能
（ユーザー表示押したらそのユーザーの投稿表示）
投稿削除機能
フォロー機能
(いいね機能)
(レイティング機能)
コーヒータグ付け機能
検索機能
スタンプ機能
ページネーション
フレンドリーフォワーディング
動的なタイトル変更
メール認証
ゲストログイン
ハンバーガーメニュー
レスポンシブ化

<strong>次回細かな実装に入りたいと思います</strong>
プロキシとリバースプロキシの違い

## 勉強前イメージ

プロキシは中継する
リバースプロキシは「リバース(=返す)中継する」？ → よくわからん...恥ずかしながら

## 調査

### プロキシとは

一般的によく言われている `プロキシ` がこちらになります。
代理サーバ、フォワードプロキシとも呼ばれます。
こちらのプロキシは一般的にはネットワークの出入り口に設置し、通信の中継を行います。
内部のPCはプロキシサーバを通じてのみ通信を行います。


以下の図のように通信は中継をしています。
1. ネットワーク内のPCはすべてプロキシサーバにリクエストを行って通信されます。
2. プロキシサーバはwebサーバへリクエストを行います。ここが中継されるところです。
3. リクエストを受けたwebサーバは送信元(プロキシサーバ)にコンテンツを送ります。
4. webサーバからもらったコンテンツをネットワーク内のPCに中継します。

![フォワードプロキシUntitled Diagram.drawio - diagrams.net - Google Ch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/d32581e9-a3ee-cf52-c9b1-2b2ba6266d7a.png)


### リバースプロキシとは

リバースプロキシとはリバース(=逆)という意味になり、`逆プロキシ`と呼ばれることもあります。
こちらのリバースプロキシは外部からのweb等のアクセスを代理で受けてwebサーバへ割り振りを行います。
リバースプロキシは外部からの通信が来るので [DMZ領域](https://qiita.com/miyuki_samitani/items/bef4feacd20d689035da) に配置されることが多いです。
以下の図ではロードバランサー機能を使って負荷分散を行ったり
機能としてはSSLの暗号化・復号化を行う機能があります。

以下の図ではこのような流れになっています。
1. PCはインターネット経由でアクセスを行う。このときの送信先はfirewallだったり、リバースプロキシだったり...
2. リバースプロキシはwebサーバにリクエストを行います。
3. webサーバはリバースプロキシにコンテンツを送ります。
4. 受けたコンテンツをリバースプロキシはPCに送ります。

![リバースプロキシUntitled Diagram.drawio - diagrams.net - Google Ch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/a9f9f9b8-c96b-0043-ff0a-d093d634f7f9.png)


### プロキシ・リバースプロキシまとめ

- プロキシ
	- 役割 : 社内LANからネットワークへの接続を中継するとき
	- 目的 : 管理性・セキュリティの向上

- リバースプロキシ
	- 役割 : 外部(インターネット)からのアクセスをサーバへ中継するとき
	- 目的 : パフォーマンスの向上

## 勉強後イメージ

リバースプロキシのこと知ると、firewall,ロードバランサーはどうなったの？って気持ちになった。
とりあえずプロキシとリバースプロキシの違いは分かったけど、
別のことで疑問ができた。

## 参考

- [プロキシサーバとリバースプロキシサーバの違い](https://itsakura.com/network-proxy)
- [プロキシとリバースプロキシの違いまとめ](https://qiita.com/zawawahoge/items/a931de1464ccaa228551)
- [リバースプロキシとプロキシ、その仕組みと役割の違い](https://ascii.jp/elem/000/004/030/4030703/)
- [リバースプロキシとプロキシの違いとは？それぞれのサーバーの仕組みは？](https://eset-info.canon-its.jp/malware_info/special/detail/201021.html)
【翻訳】FFmpegを使ってたった4ステップでビンテージ風な動画を作成する方法

著者のの許諾を得て翻訳・公開しています。
元記事：[Create Vintage Videos Using FFmpeg in 4 Simple Steps](https://ottverse.com/create-vintage-videos-using-ffmpeg/)（2020.11.15公開）

**年末年始に家族と思い出話をするのに、ビンテージ風の動画よりいいものはないでしょう。そして、ホームビデオをビンテージ風にするには、タイムマシーンで50、60年代に戻る必要もない！必要なのは、FFmpegと、想像力と、そしてこの手順書だけなのだ🙂**

それでは、FFmpegを使って動画をビンテージ風にする方法を見てみましょう。

# ビンテージ動画とは？
よくぞ聞いてくれた！

**僕は「ビンテージ動画」を、「フレームレートが低く（15fpsぐらい）、ノイズとザラザラが入っていて、セピア調の動画」と定義します！**

さて、FFmpegでこれらをどう実現するのか。

このチュートリアルでは、Xiphより「Touchdown Pass」という動画を使って解説する。20秒の動画だが、このチュートリアルでは10秒にトリミングしたものを使用する。

それでは、始めましょう！

# Step 1: FFmpegを使ってフレームレートを変更
まずは、動画の早送りです。60fpsや30fps以前の時代に戻って、10fpsに下げましょう。それだけでレトロな動画になります！

```
ffmpeg.exe -i td-10sec.mp4 \
-filter:v fps=fps=10 \
td-fast.mp4
```

処理後の動画は[こちら](https://vimeo.com/479524704)。

# Step 2: FFmpegのフィルターでビンテージ風に
次は、動画のビビッドな色をセピア調に変えましょう。これはFFmpegの`curves`というフィルターで実現できる。`curves`を使って、フレームごとのRGBの量の変更ができ、RGB曲線を操作して色の調整も可能である。

嬉しいことに、FFmpegにはいい感じの`vintage`フィルターがプリセットで入っています！早送りした動画をビンテージ風のものに変換するコマンドは以下の通り。簡単だろう？

```
ffmpeg.exe -i td-fast.mp4 \
-vf curves=vintage \
td-vintage-fast.mp4
```

`curves=vintage`フィルターをかけた動画は[こちら](https://vimeo.com/479525304)。

# Step 3: ザラザラ加工のオーバーレイのリサイズ
最後に、フィルム粒子とノイズを加えます。そうすると、まるでフィルムで撮影して、ホコリだらけの押入れにしまったものが40年後に掘り出されたかのような仕上がりに！

素晴らしいレトロなオーバーレイを[YouTube](https://www.youtube.com/watch?v=J_MZb7qTenE)で見つけました。ダウンロードURLは動画の概要欄にあります。

上記のオーバーレイは`1440x1080`なので、元の動画に合わせて`1920x1080`に変換しなければならない。

FFmpegの`scale`フィルターを使って動画のサイズ変更をするコマンドは以下の通り。サイズ変更後のオーバーレイはoldFilm1080.mp4というファイルとして保存した。

```
ffmpeg -i old-film-grain.wmv \
-vf scale=1920:1080,setsar=1:1 \
oldFilm1080.mp4
```

# Step 4: 動画にオーバーレイを追加
2つの動画が出来上がりました：

1. レトロなザラザラ加工のオーバーレイ動画
1. ビンテージ風の早送りした動画

残るのは、2つの動画を重ね合わせて~~我々~~FFmpegが頑張った成果を楽しむのみ！

そのためのコマンドは以下の通り：

```
ffmpeg.exe \
-i oldFilm1080.mp4 \
-i td-vintage-fast.mp4 \
-filter_complex "[0]format=rgba,colorchannelmixer=aa=0.25[fg];\
[1][fg]overlay[out]" \
-map [out] \
-pix_fmt yuv420p -c:v libx264 -crf 18 \
touchdown-vintage.mp4
```

説明しよう。

- FFmpegに2つの動画を入力する。
- `filter_complex`で、`colorchannelmixer`を使ってオーバーレイ動画（`[0]`）のアルファチャンネルを操作し、その結果を`[fg]`に代入。オーバーレイ動画は白黒のため、アルファだけ操作しても、今回は十分である。文法は次の通り、`colorchannelmixer=rr:rg:rb:ra:gr:gg:gb:ga:br:bg:bb:ba:ar:ag:ab:aa`。
- アルファだけ変更するため、aa（出力のアルファ）だけ0.25に設定する。
- それを早送りした動画（`[1]`）に`overlay`を使って重ね合わせ、その結果を`[out]`に代入。これを`[1][fg]overlay[out]`という部分で表している。
- 最後に、それを`H.264`と`crf=18`でエンコーディングして画質のいい動画に仕上げる。

**最終結果は[こちら](https://vimeo.com/479529512)。すごいだろう？**

元の動画と、[並べて比較しましょう](https://vimeo.com/479529447)

アルファチャンネルの透明度の設定を変えたり、違うオーバーレイ、または、`curves`フィルターを使っても、上記の手順に沿ってできます。

年末年始はビンテージ風動画で家族とたくさん遊んで、笑って、楽しんでください🙂

それでは！
TkinterをMacbookに入れて動作確認

#1. インストール

```bash:Terminal
% brew install tcl-tk

% echo 'export PATH="/usr/local/opt/tcl-tk/bin:$PATH"' >> ~/.bash_profile
% export LDFLAGS="-L/usr/local/opt/tcl-tk/lib"
% export CPPFLAGS="-I/usr/local/opt/tcl-tk/include"
% export PKG_CONFIG_PATH="/usr/local/opt/tcl-tk/lib/pkgconfig"
% source ~/.bash_profile
```

#2. 動作確認

・[@chibi929さんのQiita記事「tkinter で作った GUI の実行可能ファイルを作る」](https://qiita.com/chibi929/items/32dce1204c8c0dccccac)

```bash:Terminal
% python -m tkinter
```

##成功！
![スクリーンショット 2020-11-20 0.28.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/862466/098b46d4-841f-18bf-17fc-0079646b5ddd.png)


・[Tkinter のインストールとバージョン確認](https://python.keicode.com/advanced/tkinter-install.php)

```Python3:Python3
% python3
Python 3.9.0
>>>
>>> import tkinter
>>> tkinter._test()
```

##成功！

![スクリーンショット 2020-11-20 0.33.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/862466/6019fc76-11a6-5dcc-7f81-df1d78edf57a.png)


```Python3:Python3
>>> quit()
```
AtCoder Beginner Contest 097 C - K-th Substring 緑色diff 反省log

## 概要

なぜ解けなかったか、解くためにはどのような思考が必要だったかを言語化する記事。

## 自分の思考

最大5000文字の、長さnの文字列の最大部分列を全て列挙しようとした。

これは長さ1 ~ nのものを考え、それを全てvectorに入れる。

それをsortする。

sortの計算量はn log n;

最大5000文字の長さnの文字列の累積和はn ^ 2。

よってそれのsortは、`n ^ 2 log (n ^ 2) = 2 * (n ^ 2) log n = n ^ 2 log n`

`n ^ 2 log n`だと考えた。

制約は5000であり、5000 ^ 2 = 1e7なので、十分に間に合うと思ったが間に合わない。

TLEし続けたが、謎が解けなかった。

## 正解の思考

まず計算量の計算が間違っていた。

`n ^ 2 log n`だが、ここまでは正しい。

しかし長さnの文字列を二つ比較するとき、1番目の文字からn番目の文字までの比較で、それぞれn回の回数の処理が走る。

つまり、`n ^ 2 log n`の処理について、それぞれでn回の文字列の比較が走ってしまう。

つまり最終的な計算量は、 `n * n ^2 log n`で`n ^ 3 log n`であった。

TLEするのも当然である。

ここで計算量を減らす必要が出てくる。

ここで`aaaaa`という文字列を考える。

この文字列は
`a`, `aa`, `aaa`, `aaaa`、`aaaaa`が部分文字列である。

つまり最初から5番目までを列挙するには、長さは最大5までのもののみを考察すれば良い。それより真に大きい長さの場合は、それをさらに分解した部分文字列が最低5個存在するので無視できる。

それをsortすれば良いので、容易に間に合うことがわかる。

#### 結論

計算量の計算の仕方を間違えていると悲劇にある。

文字列比較の場合はさらにnがかかることを念頭に入れる。
pyenvが有効にならない場合の対処法(zsh)

## 前提
- macOS 10.15.7(Catalina)
- zsh
- pyenvはインストール済み
- [ここ](https://qiita.com/muran001/items/7b104d33f5ea3f75353f)を参考に`.zshenv`に環境変数を記述

## pyenvが使用されていないことの発見

pyenvで3.8.6に指定されていることを確認。

```zsh
% pyenv versions
  system
* 3.8.6 (set by /Users/user/.pyenv/version)
```

ところが実際pythonのバージョンを確認したところ、3.8.6になってない！！

```zsh
% python3 -V
Python 3.9.0
% python -V
Python 2.7.16
```

そもそもPATHを確認すると

```zsh
% echo $PATH
/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/user/.pyenv/bin
```

最初に `/user/local/bin` が来ている！

```
% which python
/usr/bin/python
% which python3
/usr/local/bin/python3
```

なるほど、pyenvが使われていないわけだ。
`~/.zshenv`はこうなっている

```zsh
% cat ~/.zshenv
export PYENV_ROOT=$HOME/.pyenv
export PATH=$PYENV_ROOT/bin:$PATH
if command -v pyenv 1>/dev/null 2>&1; then
  eval "$(pyenv init -)"
fi
```

内容的には問題なさそう。
PATHの順番を書き換えるとなると、`/etc/zprofile`あたりか。

```zsh
% cat /etc/zprofile
# System-wide profile for interactive zsh(1) login shells.

# Setup user specific overrides for this in ~/.zprofile. See zshbuiltins(1)
# and zshoptions(1) for more details.

if [ -x /usr/libexec/path_helper ]; then
	eval `/usr/libexec/path_helper -s`
fi
```

こんなところ書き換える必要があるのか疑わしいので、pyenvの[公式サイト](https://github.com/pyenv/pyenv#homebrew-on-macos)を確認。
すると、`~/.zshrc`に

```zsh:~/.zshrc
if command -v pyenv 1>/dev/null 2>&1; then
  eval "$(pyenv init -)"
fi
```

とするよう書いてある、早速`~/.zshenv`に記載していた部分を`~/.zshrc`に移動して、ターミナル再起動！

すると、

```zsh
% echo $PATH
/Users/user/.pyenv/shims:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/user/.pyenv/bin
% python -V
Python 3.8.6
% which python
/Users/ham/.pyenv/shims/python
```

## 結論

- zshの場合は環境変数は全て`~/.zshenv`に記載すればよいというわけではなく、`~/.zshrc`も使用する。
- 公式ドキュメントを確認する。
[Javascript]オブジェクトを定数に代入する

#オブジェクトを定数に代入する
定数itemにオブジェクト内の値を代入する
![1512365586993.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/725167/f7de94b2-13a5-3202-d475-48fdcf6e9bdc.png)
console.logで出力するとオブジェクト内の値をまるっと表示させる事ができる
![1512365596496.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/725167/469d073f-778d-1879-9d37-8ad10935ad12.png)
#オブジェクトの値を取り出す
1行目は先ほどと同じようにitem定数に値を代入する
2行目でitem.nameでオブジェクト内のnameの値のみを出力する
![151236560518.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/725167/5fcf7314-a219-2b27-a944-5c85f7f009b8.png)
name内の文字列のみ出力させる事ができる
![151236561010.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/725167/90a2afb2-61d2-b28f-db1d-6fe7bda84149.png)
##const
###constは定数なので上書きする事ができない。メリットとしてはコード量が多くなるほどconstで定義すれば可視化しやすい
#let
###letは変数なのでいくらでも上書きする事ができる。メリットとしては変数内の値を変えたい時に即座に変える事ができるが、本人しかわからないコードにならぬようコメントアウトしておいた方が吉
#以上！
Ansible Moleculeから稼働中サーバーを更新する

# Moleculeから稼働中サーバーを更新するメリット

普通にansible-playbookコマンドから稼働中サーバーを更新するのではなく、Ansible Moleculeから稼働中サーバーを更新する場合、以下の様なメリットが考えられる

- サーバーに対しても開発/テスト時と同じコマンド体系で反映が可能(シナリオを分ける前提)
    - サーバーに対しても開発/テスト時と同様にverifyを実施可能
    - サーバーに対しても開発/テスト時と同様に冪等性が確保されているかを検証可能
- playbookの場所を考えなくても良い
    - molecule/default/converge.yml

ちなみにtest kitchenではproxyドライバーに相当

# 実装例

delegatedドライバーにより容易に実装可能
接続先情報のソースは、ここでは見通し良く、かつ連携を容易にする為に、molecule.ymlのplatforms下に置くことにする。

## テンプレートの作成

roleごと

```
$ molecule init role ROLENAME --driver-name delegated
```
もしくはmolecule directory下のみ

```
$ molecule init scenario --driver-name delegated
```

によりテンプレートを作成

```
molecule
 └── default
     ├── INSTALL.rst
     ├── converge.yml
     ├── molecule.yml
     └── verify.yml
```

## molecule.ymlの設定例

```yaml:molecule/default/molecule.yml
---
dependency:
  name: galaxy
driver:
  name: delegated
platforms:

- name: host1
  address: xx.xx.xx.xx
  user: root
  port: 22
  identity_file: "~/.ssh/id_rsa"

- name: host2
  address: xx.xx.xx.xx
  user: root
  port: 22
  identity_file: "~/.ssh/id_rsa"

provisioner:
  name: ansible
verifier:
  name: ansible
```

- platforms下に接続先情報を記載
- host_varsやgroup_varsディレクトリーを使用する場合、provisioner:セクションにinventory: links: を追加する事で対応可能
    - https://molecule.readthedocs.io/en/latest/configuration.html



## create.ymlの例


```yaml:molecule/default/create.yml
---
- name: Create
  hosts: localhost
  connection: local
  gather_facts: false
  no_log: "{{ molecule_no_log }}"
  tasks:

  - set_fact:
      instance_conf: "{{ instance_conf + [ { 
        'instance': item.name,
        'address': item.address,
        'user': item.user, 
        'port': item.port, 
        'identity_file': item.identity_file
        } ] }}"
    vars:
      instance_conf: []
    loop: "{{ molecule_yml.platforms }}"

  - name: Dump instance config
    copy:
      content: |
        # Molecule managed

        {{ instance_conf | to_json | from_json | to_yaml }}
      dest: "{{ molecule_instance_config }}"
```

- 接続情報を設定
- set_factにてname:をinstance:に置き換えている
    - 元データにinstance:も合わせて記載しておけば、set_fact無しで直接molecule_yml.platformsを書き込んでも良い
- ちなみに"{{ molecule_instance_config }}"は、~/.cache/molecule/ロール名/シナリオ名/instance_config.yml
- | to_json | from_json は昔の障害対応の名残?

これだけで稼働中サーバーに対して接続可能となる
herokuにデプロイする際にpackage installation failed出た時の対処

##使用機器
- macOS

## 発生したエラー
- pipenv install django-herokuを実行した際に、以下のエラーが発生した。

```
$ pipenv install django-heroku


ld: library not found for -lssl
clang: error: linker command failed with exit code 1 (use -v to see invocation)
error: command 'clang' failed with exit status 1

ERROR: package installation failed

```

## エラーの原因
- postgresqlはインストール済み。

- 色々調べてみた結果「opensslがないよ！」と言われているということが分かったのでその辺りを調べてみると下記の方法で解決できました。



## 解決方法
- 以下のコマンドで自分の場合は解決することができた。

```
$ xcode-select --install

$ env LDFLAGS="-I/usr/local/opt/openssl/include -L/usr/local/opt/openssl/lib" pipenv install psycopg2

```

##参考サイト
[Package installation failed - psycopg2 in OsX]
(https://stackoverflow.com/questions/55922840/package-installation-failed-psycopg2-in-osx)
[Can't install psycopg2 package through pip install… Is this because of Sierra?]
(https://stackoverflow.com/questions/39767810/cant-install-psycopg2-package-through-pip-install-is-this-because-of-sierra)

## Herokuでよくあるエラーまとめリンク
- 今回のエラーの副産物として参考になりそうなサイトがあったので、一応貼り付けておきます。

[公式ドキュメント(Git周り)]
(https://devcenter.heroku.com/articles/git#deploying-code)
[Pyhton Heroku でpushできなくてあきらめる前に見るページ](https://alexandco-python.tokyo/archives/879)
[DjangoをHerokuにデプロイしてもアプリケーションエラーになる時に見直すべきこと](https://www.mathpython.com/ja/django-error/)


## 最後に
Herokuでのデプロイに関しては、様々なエラーがあるようで中々上手くいかない場合もあるようです。 
例えば諸々の設定終わってPushしようと思ったら出来ないとか…。
海外のサイトなどで調べつつなんとか自己解決できたので良かったです。
[メモ]Discord招待リンクをランダムに生成するボット。

#はじめに

このボットはDiscordの招待リンクをランダムに生成できます。
生成したリンクは全部有効な招待であるわけではなく、大体無効な招待です。

このような感じです。
![001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/571953/b68a2c96-370c-9613-63f2-5d1bfbc418d5.png)

これを使えば、誰かのサーバーに入ることができるかもしれません。

*免責事項：これはただ教育のためのサンプルです。

# コード

| パラメータ | 意味 |
| --- | --- |
| l | リンクの長さ |
| c | リンクの字母の構成元素 |

l は生成するリンクの長さ、今Discordの招待リンクは8桁です（昔は6桁です）。
c はリンクの生成の条件、これを変えると、リンクの生成するモードは変わる。

例えば、

```js

var c1 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
```

と

```js

var c2 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz012345678901234567890123456789";
```

c1を使えば生成したリンクは数字がありません。
c2を使えば生成したリンクは数字が含む確率は高くなります。

ですから、もしDisocrdの招待リンクの生成するモードが見つけたら、生成したリンクが有効な招待である確率は高くなります。

```js

//main.js

const Discord = require('discord.js');
const client = new Discord.Client();

client.on('ready', () => {
    console.log(`Logged in as ${client.user.tag}!`);
});

client.on('message', message => {
    const args = message.content.slice('').split(' ');
    if(message.content.startsWith('生成')){
        if(args[1] === undefined){
            message.channel.send("Pleace enter a munber.");
        }
        else{
            for(let i=0;i<args[1];i++){
                var l = 8;
                var c = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
                var cl = c.length;
                var r = "";
                for(var ii=0;ii<l;ii++){
                    r += c[Math.floor(Math.random()*cl)];
                }
                message.channel.send(`https://discord.gg/${r}`);
            }
            message.reply(`${args[1]} invite link generated.`);
        }
    }
});

client.login('BOT_TOKEN');
```

# 使い方

以下のコマンドを入力します。

```

生成 (数字；生成するリンクの数量)
```

![002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/571953/524937cc-2352-bc3f-6e5d-828ae1fcb374.png)
【初心者向け】Rails6で作られたWebアプリをCircleCIを使いAWS ECR・ECSへ自動デプロイする方法②-2 インフラ構築編【コンテナデプロイ】

さて、前回RDSまで作成できたので、今回はALBの作成をしていこうと思います！
この記事ではALBを作成するだけなので、今までの記事を比べるとこの記事は短めです！

| タイトル|
|:-----------|
| [① 下準備編](https://qiita.com/Kiyo_Karl2/items/5f77d6f59bcddf05c614)       | 
| [②-1 インフラ構築編](https://qiita.com/Kiyo_Karl2/items/ddf03ac97ab649b63c1d)        | 
| [②-2 インフラ構築編](https://qiita.com/Kiyo_Karl2/items/dadd70c9dbe83dddcde2) **←今ここ！**         | 
| 自動デプロイ編(執筆中）      | 

# ALBとは？
ここで、ALBについて説明させていただきます。
ALBとは「Application Load Balancer」の略称で、Webからのアクセスを分散してくれるものです。
一つのWebサイトにアクセスが集中してしまうと、サーバーがアクセスを処理しきれなくなり、ページが表示できなるくなるといったトラブルが起こります。

ALBを導入することで複数のサーバーに負荷を振り分けることができるので、安定したサービスをユーザーに提供することができるというわけです。

これは余談ですが、ALBの他にも、CLB（Classic Load Balancer）、NLB（Network Load Balancer）というものがあり、これらのロードバランシングサービスを総称してELBと呼びます。

# ALBを作成する
それではさっそく、ALBを作成していきましょう！
サービスからEC2のコンソールへ行き、Load Balancers→Create Load Balancerとクリックし、 Application Load Balancersを選択する。
![スクリーンショット 2020-11-18 235646.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632678/4bf38bd2-7cb4-d3d3-c006-0766bdaf44af.png)
任意のALBの名前を入力します。
Listenerは一旦デフォルトのままでいいです。
![スクリーンショット 2020-11-19 232033.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632678/d968eb21-4cb5-b91f-43df-41332f0e34f1.png)
その後、自動作成されたVPC、サブネットを選択し、Nextをクリック。
警告が出てきますが、かまわずNextをクリックします。
![スクリーンショット 2020-11-19 232224.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632678/0fd68f66-1db7-550e-0298-4a54e5d15c4b.png)
次にALBのセキュリティグループを新に作成します。任意の名前と説明を入力します。
インバウンドルールはHTTPプロトコルで、すべてのソースを許可します。（画像参照）
![スクリーンショット 2020-11-19 232450.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632678/555c72e6-43a6-36d9-b2cb-f44de71dc798.png)
次にターゲットグループ（ALBに来たアクセスのリダイレクト先）を新しく作成します。
ターゲットグループにはEC2インスタンスを指定していきます。

New Target groupを選択し任意のターゲットグループの名前を入力します。
後はデフォルトでOKです。
![スクリーンショット 2020-11-19 232547.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632678/d61d49a0-43d6-1019-eab6-08703f9f4fff.png)
ヘルスチェック（ALBからサーバーが正常に動いているかどうかチェックする機構）もデフォルトでOK
デフォルトだとヘルスチェックのパスはルートパスになってます。
![スクリーンショット 2020-11-19 232606.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632678/9dfaab1a-0916-0c3a-70c0-940dd4a01a19.png)
次にターゲットグループのインスタンスを登録します。
自動生成されたEC2インスタンスが二つあるはずなのでチェックマークをいれ、赤丸のinclude as pending below をクリックします。
その後、Register pending targetsをクリックします！
![スクリーンショット 2020-11-19 234348.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632678/fa58ee3a-fb29-71bb-c93b-be5f5a10082e.png)

最後に、確認画面が出るので、設定があっているか確認出来たらCreateをクリックして作成完了です！
お疲れ様でした！

# 最後まで読んでいただきありがとうございます！
今回はALB作成編をやっていきました！次回はいよいよDockerイメージをECRへpushしていきます！
今週中にはすべての記事を完成させていくつもりですので、よろしくお願い致します！！

何かご指摘やご質問などあればコメントいただけますと嬉しいです。
Flutter実装時にお世話になったページ 2020/11/19

## なにか

毎回、同じ問題に、同じ検索して、同じページで解決してるので。。。

## ```Image.network``` や ```NetworkImage``` で画像が表示されない場合がある

特に画像が大量にある画面でたまに表示できてない画像があった。で、ログが流れる。

> ════════ Exception caught by image resource service ════════════
> Connection closed before full header was received, uri = https://xxxxxx

[Stack Overflow "Network Image - Connection closed before full header was received..."](https://github.com/flutter/flutter/issues/25107#issuecomment-655655719)

これで解決する前に、同じページの別のコメントや

[I globally overrode the HttpClient](https://github.com/flutter/flutter/issues/25107#issuecomment-456667247)

別ISSUEのコメントに出てきた [flutter_image](https://pub.dev/packages/flutter_image) の```NetworkImageWithRetry```を使ってみた。

[Stack Overflow "Flutter how to handle Image.network error (like 404 or wrong url)"](https://stackoverflow.com/a/52569475)

これらは、解決に至らなかったけど、HttpClientのOverrideは今後役に立ちそうだし、[flutter_image](https://pub.dev/packages/flutter_image)の考え方は結構好き。

で、最終的にURLをHTTPにするという残念な対応になってしまっているので、根本解決されたときに戻しやすいようにしておいた。

## Androidの通知用アイコンを設定したい

個人的には [Android Asset Studio](http://romannurik.github.io/AndroidAssetStudio/index.html)がありがたかった。

[Qiita "Android Push通知のアイコンを作成 ＋ 設定"](https://qiita.com/kokogento/items/9e91075855779285e6ac)

## [video_player](https://pub.dev/packages/video_player)で連続再生している動画を、画面遷移時に止めたい。

もともと、[inview_notifier_list](https://pub.dev/packages/inview_notifier_list)でスクロールINしたときに再生開始にしていたんだけど、このコメント見て [visibility_detector](https://pub.dev/packages/visibility_detector)に変えた。

[Stack Overflow "How to pause flutter video(video_player plugin) when navigating from page to another"](https://stackoverflow.com/a/59028141)

最終的に、```RouteObserver```や```RouteAware```は使用せずに、```didChangeDependencies```内で、現在画面に表示中かどうかを取得してハンドリングするようにした。

## そのWidgetが画面に描画されているかどうかを取得したい

[Stack Overflow "How to check if a widget/page is rendered?"](https://stackoverflow.com/a/54328892)

## さいごに

本当に、先人たちありがとう。
【 Python】よくあるエラーと過去の自分の経験から回避法も

##ImportError: No module named

そのようなモジュールはない

```error.py
ImportError: No module named pandaas
```
単純にスペル違いがほとんどです。

##list index out of range

リストの参照先が範囲外

```error.py
IndexError: list index out of range
```
例えばfor文で回してるときに、n番目が存在しないのに、処理してしまっているときは範囲外のエラーが出ることが多い。
個人的にはforで回して削除するときに多い印象です。

##NameError: name 'XXX' is not defined

XXXという変数は定義されていません

```error.py
NameError: name 'XXX' is not defined
```

個人的によくあるのが、例えばtestという変数作って、試して、いざ本番で処理してみようとしたときにこのエラーが出ることが多いです。
ただ基本的に変数が定義されてないだけなので、スペル間違いなどを疑えばすぐに回避できます。

##TypeError: 'XXX' object is not iterable

XXXという型は繰り返しできません。

```error.py
TypeError: 'int' object is not iterable
```

これはfor構文で発生するエラーです。
本来、繰り返しできない型をfor構文で回すことで発生します。

例えば、整数型・少数型はfor構文では繰り返し処理できません。
一度文字型（str）に変換して繰り返し処理する必要があります。

随時書き足していきます。
Mac に rbenv を入れてバージョン管理


テスト用の環境とローカル(Mac)で Ruby のバージョンが違っていたため、 `rbenv` を使って合わせる。`rbenv` は Ruby のバージョン管理ツール。

- テスト環境： 2.4.1
- ローカル環境： 2.3.1

```bash
# はじめにローカル(Mac)側のバージョンを確認
$ ruby -v
ruby 2.3.7p456 (2018-03-28 revision 63024) [universal.x86_64-darwin18]

# rbenv をインストール
$ brew install rbenv ruby-build

# 今使っている Ruby のバージョンを確認
# system というのは Mac に最初から入っているやつを使っているよ、の意味
$ rbenv versions
* system (set by /Users/takiguchi-yu/.rbenv/version)

# インストール可能なバージョンを確認
$ rbenv install -l
# ※ 全てのバージョンを確認する場合は以下のコマンド
$ rbenv install --list-all

# 今回インストールしたいバージョンを指定してインストール
$ rbenv install 2.4.1

# 現在の Ruby のバージョンを今インストールしたバージョンに変更する
$ rbenv global 2.4.1
$ rbenv versions
  system
* 2.4.1 (set by /Users/takiguchi-yu/.rbenv/version)
```

Ruby の開発をするなら `rbenv-communal-gems` も入れておいた方が良いらしいです。

> rbenvでインストールされたrubyのgemsディレクトリを共有化することができるヤツです
> これないとrubyのversion up対応の時にgemの入れ直しをしないといけなかったりして酷い目に合います

> [github rbenv-communal-gems公式](https://github.com/tpope/rbenv-communal-gems)

引用：https://qiita.com/Alex_mht_code/items/d2db2eba17830e36a5f1

```bash
$ brew install rbenv-communal-gems
```

最後にパスを通して終わり。

```bash:~/.bash_profile

# rbenv PATH

if which rbenv > /dev/null; then eval "$(rbenv init -)"; fi
export PATH="$HOME/.rbenv/bin:$PATH"
eval "$(rbenv init -)"
```
[Laravel] コードをコミット時に自動整形する

#やりたいこと
複数人で開発時に、フォーマットを統一したい。
自動整形するやつ入れても実行し忘れるので、コミットのタイミングで何も考えることなく整形できるようにしたい。

#やりかた

`brainmaestro/composer-git-hooks`というパッケージを使うと、git hook(`gitの特定タイミングで色々できる`)を簡単に使える

そして`friendsofphp/php-cs-fixer`を使うと、コードの規約違反を指摘/修正してくれる

まずはインストール

```bash
composer require --dev brainmaestro/composer-git-hooks
composer require --dev friendsofphp/php-cs-fixer
```

つぎに設定
`composer.json`の`extra`に`"hooks"`を追加
`pre-commit`をフックに、`php-cs-fixer`を使って自動フォーマットする。

```composer.json
"extra": {
        "laravel": {
            "dont-discover": []
        },
        "hooks": {
            "pre-commit": [
                "./vendor/bin/php-cs-fixer fix .",
                "git add ."
            ]
        }
    },
```

反映して完了。

```bash
./vendor/bin/cghooks update
```


----
このままだと、stageに上がってないものもそのままコミットされてしまうので対策を書きました

https://qiita.com/ntm718/items/b76c4281dc358e89d03f
【第4回】初心者二人で0から麻雀アプリ開発

[第3回の記事はこちら](https://qiita.com/RTkd59/items/039c380f0955de103886)

##改版履歴
2020年11月19日投稿
##第4回会議(2020年11月13日)

###議題
・画面デザイン詰める
・実装してみたい機能
・来週からの活動
・プロジェクト全体の大まかな期間

##画面デザイン
画面のデザインはgoogledrive内のdraw.ioを使用して作りました。この時、ホーム画面から成績入力画面に移動する際に、画面全体で遷移させるのか、画面を部分的に遷移させるのか悩みました。部分的に遷移するのが今の流行ということなので、部分遷移でいこう！ということになりました。また、ポップアップで入力画面を立ち上げるという案も出ました。






##実装してみたい機能
今回の会議で、お互いにやってみたいことが結構出てきました。
・テーマ
最近のアプリはダークテーマとか、ホワイトテーマとか自分の好みで切り替えられるようにしたい。デフォルトであるらしい…❓

・githubの芝みたいなもの
打数に応じてカレンダーに色づけするみたいなことができればモチベーションの維持につながるのではないかと思い実装してみたいと思いました。



##来週からの活動
今回から、各々テーマを決めて、次の会議までに実装の方法を調べてくるという方法をとります。
今週のテーマはそれぞれ
・テーブル表示の実装について　　　
・ヘッダーとフッターの実装について
・スコア表機能の実装　
ということになりました。

##プロジェクトの展望と今後の予定について
要件定義と基本設計　1ヶ月

画面遷移図の作成　2ヶ月くらい

詳細設計　1ヶ月　(勉強会)、クラス図作成、処理の順番、変数名など

実装1ヶ月　(ソースコードを書く)
テスト1ヶ月半　
アプリをリリース
という大雑把な計画を立てました。
できるだけ多くの機能を実装してみたいと思っていますが、最低限挫折しないということを目標に頑張っていきます。

##終わりに
雑記みたいな感じになってしまいました。速くqiitaっぽくcode載せたいです。(切実)
link_toを使って、一つ前のページに遷移させる方法

##link_toでもどるボタン

```ruby
<%= link_to 'もどる', :back %>
```

`:back`とすると、一つ前のページに遷移させることができる。

##ちなみに


```ruby
<%= link_to 'TOPページへ', root_path  %>
```
これで、routesで設定した、トップページに遷移させることができる。
dictやlistの値を文字列で取り出す

dict や list の値を`a.b`や`c.d.2.e`のようなピリオド区切りの文字列を使って値を取り出したいことがあったので書いてみた。

```python  
def get_item(src, path):
    now = src
    for i in path.split('.'):
        if type(now) is list:
            now = now[int(i)]
        else:
            now = now[i]
    return now
```
nowは現在の値を入れるための変数。初期値は引数の dict or list。
pathをピリオドで分割してforで回す。
nowの値をforが終わるまで入れ替えていって最後にリターン。

ちなみに、Key名にピリオドが入っている場合は想定してないです。

```python
my_dict = {
    'a': {
        'b': 'hello'
    },
    'c': {
         'd':[
             {'e': 3},
             {'e': 4},
             {'e': 5},
             {'e': 6},
         ]
     }
}

print(get_item(my_dict, 'a.b'))
print(get_item(my_dict, 'c.d.3.e'))
print(get_item(my_dict, 'c.d'))
# hello
# 6
# [{'e': 3}, {'e': 4}, {'e': 5}, {'e': 6}]
```
command not found: nodeエラーは、"nodebrew use" で解決する

##直面した問題

```bash:Terminal
% nodebrew list
v15.2.1

current: none
% 
% node -v
zsh: command not found: node
%
```
以下のように、パスを通したり、いろいろやっても*node*コマンドは認識されない。

・[@kyosuke5_20さんのQiita記事「kyosuke5_20」](https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09)
・[「node がインストールできない」](https://teratail.com/questions/219745)


##*nodebrew use vバージョン番号*を実行すると、*node*コマンドが認識された。

```bash:Terminal
% nodebrew use v15.2.1
use v15.2.1
% nodebrew list       
v15.2.1

current: v15.2.1
% 
% node -v
v15.2.1
% 
```