OmniAICreator/Qiita-1.07M huggingface dataset:
小さな ASCII アスキーコード表（文字コード 一覧）

たまに見たくなったときに検索しても大きいだけの見づらい表ばかり見つかるので小さい ASCII コード表を作りました。まあ `ascii` コマンドでもいいんですが、必ずしも入っているとは限らないので。いつの間にか「小さな ASCII」で検索できるようになってました。ヨシ

## ASCII コード表

```
| HEX     |  +0  +1  +2  +3  +4  +5  +6  +7 |  +8  +9  +A  +B  +C  +D  +E  +F |
|     OCT |                                 | +10 +11 +12 +13 +14 +15 +16 +17 |
|=========|=================================|=================================|
| 00h:000 | NUL SOH STX ETX EOT ENQ QCK BEL | BS  HT  LF  VT  FF  CR  SO  SI  |
| 10h:020 | DLE DC1 DC2 DC3 DC4 NAK SYN ETB | CAN EM  SUB ESC FS  GS  RS  US  |
| 20h:040 | SP   !   "   #   $   %   &   '  |  (   )   *   +   ,   -   .   /  |
| 30h:060 |  0   1   2   3   4   5   6   7  |  8   9   :   ;   <   =   >   ?  |
| 40h:100 |  @   A   B   C   D   E   F   G  |  H   I   J   K   L   M   N   O  |
| 50h:120 |  P   Q   R   S   T   U   V   W  |  X   Y   Z   [   \   ]   ^   _  |
| 60h:140 |  `   a   b   c   d   e   f   g  |  h   i   j   k   l   m   n   o  |
| 70h:160 |  p   q   r   s   t   u   v   w  |  x   y   z   {   |   }   ~  DEL |
```

## 2進数 / 8進数 / 10進数 / 16進数 対応表

```
| 0: 000 | 1: 001 | 2: 010 | 3: 011 | 4: 100 | 5: 101 | 6: 110 | 7: 111 |
| 8:1000 | 9:1001 | A:1010 | B:1011 | C:1100 | D:1101 | E:1110 | F:1111 |
| HEX:BIN  (DEC)  |  (10)  |  (11)  |  (12)  |  (13)  |  (14)  |  (15)  |
```

## ASCII コード表（10進数対応版）

```
| HEX     |  +0  +1  +2  +3  +4  +5  +6  +7 |  +8  +9  +A  +B  +C  +D  +E  +F |
|     OCT |                                 | +10 +11 +12 +13 +14 +15 +16 +17 |
|=========|=================================|=================================|
|     DEC |---0---1---2---3---4---5---6---7-|---8---9--10--11--12--13--14--15-|
| 00h:000 | NUL SOH STX ETX EOT ENQ QCK BEL | BS  HT  LF  VT  FF  CR  SO  SI  |
|         |--16--17--18--19--20--21--22--23-|--24--25--26--27--28--29--30--31-|
| 10h:020 | DLE DC1 DC2 DC3 DC4 NAK SYN ETB | CAN EM  SUB ESC FS  GS  RS  US  |
|         |--32--33--34--35--36--37--38--39-|--40--41--42--43--44--45--46--47-|
| 20h:040 | SP   !   "   #   $   %   &   '  |  (   )   *   +   ,   -   .   /  |
|         |--48--49--50--51--52--53--54--55-|--56--57--58--59--60--61--62--63-|
| 30h:060 |  0   1   2   3   4   5   6   7  |  8   9   :   ;   <   =   >   ?  |
|         |--64--65--66--67--68--69--70--71-|--72--73--74--75--76--77--78--79-|
| 40h:100 |  @   A   B   C   D   E   F   G  |  H   I   J   K   L   M   N   O  |
|         |--80--81--82--83--84--85--86--87-|--88--89--90--91--92--93--94--95-|
| 50h:120 |  P   Q   R   S   T   U   V   W  |  X   Y   Z   [   \   ]   ^   _  |
|         |--96--97--98--99-100-101-102-103-|-104-105-106-107-108-109-110-111-|
| 60h:140 |  `   a   b   c   d   e   f   g  |  h   i   j   k   l   m   n   o  |
|         |-112-113-114-115-116-117-118-119-|-120-121-122-123-124-125-126-127-|
| 70h:160 |  p   q   r   s   t   u   v   w  |  x   y   z   {   |   }   ~  DEL |
```

## コピペ用

記号は ASCII コード順。時々使いたくなりますよね？

```
!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~
0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
```
golang:html内に埋め込む{{}}の記述方法をまとめる

# はじめに
html/templeteを用いたGolangのWeb開発でhtml内に埋め込む`{{}}`の記載方法について、
条件文`{{if}}`の記載方法をここにまとめます。
条件文以外については引用したサイトに詳しく記載されていますので、ご覧ください。

## 条件文の基本構文

```html
{{if 条件式}}
<!-- 条件式がtrueの場合 -->
{{else}}
<!-- 条件式がfalseの場合 -->
{{end}}
```

## 条件式の記載方法

|条件|書き方|
|---|:---:|
|論理演算子（true）|{{ if .~~~ }}|
|論理演算子（false）|{{ if **!**.~~~ }}|
|等号（A == B）|{{ if **eq** A B }}|
|不等号（A != B）|{{ if **ne** A B }}|
|不等号（A > B）|{{ if **gt** A B }}|
|不等号（A >= B）|{{ if **ge** A B }}|
|不等号（A < B）|{{ if **lt** A B }}|
|不等号（A <= B）|{{ if **le** A B }}|
|複数条件（条件１&&条件２）|{{ if **and** (条件１ 条件２) }}|
|複数条件（条件１&#124;&#124;条件２）|{{ if **or** (条件１ 条件２) }}|


比較する記号をAとBの間についつい入れがちだが、`比較方法 項目１ 項目２`となるのが間違えやすいところ。
htmlの中で記載できるビルドイン関数は[こちら](https://github.com/golang/go/blob/master/src/text/template/funcs.go)

# 引用

https://golang.org/pkg/html/template/

https://qiita.com/tetsuzawa/items/0d043ad76b9705cdbb79

https://que.how/ja/p/g/how-to-use-html-template-with-golang

https://miyahara.hikaru.dev/posts/20200313/

https://ema-hiro.hatenablog.com/entry/20170729/1501320887
BigQueryのStandardSQLでランダムランブリング

# 概要

BigQueryのStandardSQLだと`rand()`関数にseedを指定することができないので、再現性を担保した上で任意の件数のランダムサンプリングの実装が面倒。
簡易的な代替手段を備忘のためまとめる。

# やり方

1. ユニークIDを元にハッシュ値でソートし、rankをつける
    - ユニークIDに任意の文字列をseedの代わりに結合して扱う
1. rankで任意の件数を取得する

```sql:StandardSQLでランダムサンプリング
with
rand_sample as (
    select
        * except(rank)
    from (
        select
            word,
            dense_rank() over (order by farm_fingerprint(concat('seed', word)), word) as rank,
        from
            (select distinct word from `publicdata.samples.shakespeare`)
    )
    where
        rank <= 5
)

select * from rand_sample
```

# 参考

- [BigQuery でランダムサンプリング](https://medium.com/@sfujiwara/bigquery-%E3%81%A7%E3%83%A9%E3%83%B3%E3%83%80%E3%83%A0%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AA%E3%83%B3%E3%82%B0-807d64d1c2be)
【Androidを使い熟す！】Android Viewについて

#####※Android技術者認定にも役に立ちます！
#Viewとは
```
This class represents the basic building block for user interface components. A View occupies a rectangular area on the screen and is responsible for drawing and event handling. View is the base class for widgets, which are used to create interactive UI components (buttons, text fields, etc.). The ViewGroup subclass is the base class for layouts, which are invisible containers that hold other Views (or other ViewGroups) and define their layout properties
```
<details><summary>説明</summary>UI部品❣️
画面に表示させたい部品の集まりのことです〜</details>
#View Groupとは
```
A ViewGroup is a special view that can contain other views (called children.) The view group is the base class for layouts and views containers. This class also defines the ViewGroup.LayoutParams class which serves as the base class for layouts parameters.
```
<details><summary>説明</summary>
複数のビューを子として持つことができる特殊なビューのことです。
</details>
Android Developers: [View Group](https://developer.android.com/reference/android/view/ViewGroup)
Javascript 備忘録1<基礎>

■変数について

```js
// とちらも変数宣言（ただしwindowは省略可能なので一般的に省略）
let a = 0;
window.d = 1;
// スコープにより書き換え可能
d = 2;
```

■ブロックスコープ

```js
{/* 普通{}で囲まれた範囲をブロックという */}

{
    function d() {
        console.log('d is called');
    }
}
// 下の関数は実行可能で、「d is called」がコンソールに出力される
d();

function a() {/* この場合、ブロックスコープではなく関数スコープという */}

```

■レキシカルスコープ
→宣言した場所で変数が見える範囲が決まること
→自身よりも外部にあるスコープは、自身の中で参照することが可能

```js
// グローバル変数
let a = 2;
function fn1() {
    let b = 1;
    function fn2() {
        let c = 3;
        // bはfn2からみると外部スコープなので参照することが可能
        console.log(b)
    }
    fn2();
}

fn1();
```
■オブジェクトについて
 
```js
let obj = {
    prop1: 'value1',
    // 無名関数をオブジェクト内に宣言することができる
    prop2: function() {
        console.log('value2')
    }
}

// オブジェクトないの関数を呼び出す
obj.prop2();
```

■Javascriptの互換性
→ブラウザ、ネット上で使用できる物が異なってくる
→ブラウザだと、DOM APIなどを使用することができる
→その反面、ネット上だとnode.js(common.js)を使用する
→Javascriptをどこで実行するかにより、使用する物が異なっている

■コールスタック

```js
function a() {
} 
function b() {
    a()
}
function c() {
    b();
}

c();
```
コールスタックとは、後から入ってきた関数が先に呼び出されること
→呼び出された関数は、関数が終了後破棄される
→今回の場合なら、関数cが終了すると一連のコールスタックが終了する
たった一行で正しく .env をシェルスクリプトに読み込む方法（と .env の仕様について）

```sh
eval "$(shdotenv)"
```

はい、そういうことです。シェルスクリプトの標準機能だけでは一行で `.env` ファイルを読み込むのは無理です。書き方によっては可能な場合もありますが `.env` ファイルは各言語の実装ごとに細かい方言がありシェルスクリプトの文法とは細かい仕様が異なります。そこでシェルスクリプトに読み込むための [shdotenv](https://github.com/ko1nksm/shdotenv) を作りました。`.env` ファイルを読み込んで外部コマンドを起動する CLI コマンドとしても使うことができるので、他の実装の `dotenv` コマンド等の代わりとして言語に依存せずに使うことが出来ます。

## `.env` の仕様について

正式な仕様はありません。困ったことに各言語のライブラリがそれぞれそれっぽい文法で実装しています。（検索すると誰かが RFC を書こうとしようとした痕跡がありますが、広まってないようなのでリンクしません。）もちろんシェルスクリプトの文法とも異なります。以下はシェルスクリプトとは異なる点の一例です。

- キーと値の前後（`=` の前後）の空白が除去されます。
- 値をクォートで括らなくても `|` や `&` 等がシェルの文法ではなくただの文字として扱われます。
- 値の中にクォートが含まれる場合、それはクォートを閉じる意味を持たず通常の文字として扱われます。
- 値の中の `\n` は改行という意味を持ちます。実装によってはその他のエスケープ文字に対応してることもあります。
- 行末の`\`による継続行のサポートはありません。

このような違いがあるため、一般的な `.env` ファイルはシェルスクリプトで正しく読み取れるとは限りません。

## shdotenv の `.env` の仕様について

既存の `.env` が統一されてないので `shdotenv` でも新たに定義していますが、POSIX シェルスクリプトのサブセットとして定義しています。そのため `shdotenv` の標準の `.env` ファイルはシェルスクリプトの `source` コマンドでそのまま読み取ることが出来ます。`source` コマンドで読み取れるなら `shdotenv` は不要なのでは？と思うかもしれませんが、変数定義以外のシェルスクリプトコードが含まれているとエラーが出るようにしており安全に変数を読みとれるのと、すでに環境変数が定義されている場合は上書きしないように他の実装の仕様にあわせています。

さらに他の `.env` 形式を読み込むオプションもあるため、シェルスクリプトと他の言語とで相互運用が可能になっています。現時点で対応してる他の `.env` 形式は、ruby, node, python, php, go, docker です。

また Docker の `--env-file` による環境変数の読み取りが変数展開や複数行の値に対応していなかったので、それを可能にする `contrib/dockerenv` コマンドもおまけで作っています。

## 参考

- Ruby
  - https://github.com/bkeepers/dotenv
- JavaScript
  - https://github.com/motdotla/dotenv 
  - https://github.com/motdotla/dotenv-expand （変数展開を行う場合に必要）
- Python
  - https://github.com/theskumar/python-dotenv
- Go
  - https://github.com/joho/godotenv
- PHP
  - https://github.com/vlucas/phpdotenv
- Rust
  - https://github.com/dotenv-rs/dotenv
【Rails】link_toとform_withのボタンをbootstrapでキレイにする


「link_toとかform_with使いながらボタン作るってどうやるんだっけ…」

というのがプログラミング始めたばかりの頃わからず、とても冗長なコードになっていたので、今更ですが、振り返りと自戒の念を込めてメモしておきます。

#先に結論：classに記述すればOK#

### link_toの場合 ###

例えばDeleteボタンを作成するとして…

```html.erb
 <%= link_to "Delete", xx_path, class: "btn btn-sm btn-danger", method: :delete %>
```

 - link_toの後ろのクオテーション内（"Delete"など）は、ボタン上に表示したいテキストを記述
 - xx_pathのxx部分は、ボタンをクリックしたときのリンク先（パス）
 - class内にbootstrapを記述して、好きなボタンにカスタマイズ

上記の記述で、表示するとこんな感じのボタンになります👇
（もちろんパスは変えてます！）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1215197/83aeca89-0454-7632-a484-9ed3d4f1cba5.png)

### form_withの場合は？ ###
```html.erb

<%= form_with model:book, local:true do |f| %>

～中略～

  <div class='form-group'>
    <%= f.submit 'Sign up', class:'btn btn-sm btn-success' %>
  </div>
<% end %>
```
 
 - f.submitの後ろのクオテーション内（'Sign up'など）は、ボタン上に表示したいテキストを記述
 - class内にbootstrapを記述して、好きなボタンにカスタマイズ
 - ボタンクリック後の遷移先は該当のcontrollerで定義することになりますね

こうなります👇
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1215197/05fef621-c917-793f-33a2-90a4dda90e37.png)
mutatingについて　swift

#■structやnum内での値の変更をする際にfuncの前に書く

```swift
struct mm{
   
    var count = 0

    init(count:Int){
       self.count = count
    }

    mutating func countChage(){
        self.count = 1
   }
}
```


#下記だとエラーがでる。
エラーがでるがそのエラーのFixを押すとmutatingがfuncの前について解決する。

```swift
struct mm{
   
    var count = 0

    init(count:Int){
       self.count = count
    }

    func countChage(){
        self.count = 1
   }
}
```
【Androidを使い熟す！】Android ライセンスについて

#####※Android技術者認定にも役に立ちます！
#Androidのライセンス
・Apache License 2.0
<details><summary>説明</summary>オープンソースソフトウェアを開発・配布する際によく用いられる、利用条件などを定めた利用許諾契約書（ライセンス）の一つ。</details>
</br>
・GPL(GNU General Public License)
<details><summary>説明</summary>ソフトウェアの利用許諾条件などを定めたライセンスの一つ。主にフリーソフトウェアの開発・配布のために用いられるもので、FSF（Free Software Foundation）が公開している。</details>
</br>
・LGPL(GNU Lesser General Public License)
<details><summary>説明</summary>GPL（GNU General Public License）をベースとしているが、LGPLの元で公開されたソースを利用したソフトウェアを開発しても、その独自開発部分のソースコードの公開を強制しないという特徴を持っている。</details>
</br>
・BSD(Berkeley Software Distribution license)
<details><summary>説明</summary>オープンソースソフトウェアに適用されるライセンス体系の一種で、カリフォルニア大学バークリー校で生まれたBSD系UNIXのライセンスのために成立した方式である。</details>
[Rails]外部キーにnilを許可したいけど値を入れる場合は存在チェックしたい場合の実装方法

同じタイプのエンティティに親子関係をもたせるときにparent_idのようなカラムを作って親のIDを持たせることがあると思います。

例えば下記のようなテーブルです。
親を持たない場合はNULLを入れる想定のためNULLを許可しています。

```
Hoges
+----------------+------------------+------+-----+---------+----------------+
| Field          | Type             | Null | Key | Default | Extra          |
+----------------+------------------+------+-----+---------+----------------+
| id             | bigint           | NO   | PRI | NULL    | auto_increment |
| parent_id      | bigint           | YES  |     | NULL    |                |
| created_at     | datetime(6)      | NO   |     | NULL    |                |
| updated_at     | datetime(6)      | NO   |     | NULL    |                |
+----------------+------------------+------+-----+---------+----------------+
```

Hogeテーブルのモデルを作ると下記のようになります。
nilを許可するために`optional: true`をつけています。

```ruby
class Hoge < ApplicationRecord
  belongs_to :parent, class_name: 'Hoge', optional: true
end
```

ただ、optionalの場合はHogesテーブルに存在しないidをparent_idに入れた場合もバリデーションはOKになってしまいます。
※Hogeテーブルに適切に外部キー制約を付けていれば存在しないIDはを指定した場合はエラー(`ActiveRecord::InvalidForeignKey`)になります。

そこでタイトルに書いてある通り、nilは許可しつつ存在チェックはしたい場合の書き方を考えてみました。

カスタムバリデーションを使えばなんとでもなるのですが、できる限りシンプルにRailsに組み込まれているバリデーションを使って書いてみました。
もっと良い方法があればぜひ教えて下さい！！
（これを考えながら、そもそもbelongs_toの`optional: true`はnilは許可するけど関連が存在しないIDは許可しないになってくれるとありがたいなーと思ったりしました。)

```ruby
class Hoge < ApplicationRecord
  belongs_to :parent, class_name: 'Hoge', optional: true
  validates :parent, presence: true, if: :parent_id?
end
```
【Toyproject】Reactライフサイクルおよび、直前に戻る時データ保持

参照：https://edunga1.gitbooks.io/catlogic/content/cat-logic/react-remaining-async-data-on-back.html
# Rendering Element
- ReactDOMは必要なものしかupdateしない



# Propsとは
- immutable data
- componentのprops
- componentたちの間で値を渡す手段
- propsは読み取り専用

```javascript
function sum(a+b){
  return a + b;
}
````
いつも same input-> same output
とこかでPropsを変更し改めてComponetを呼び出す.....?

## {this.props.value} 
value = propsの名前


# React.Componentのライフサイクル(Lifecylce)
参照：https://ja.reactjs.org/docs/react-component.html
componentはclassまたはfunctionで定義可能
https://programmingwithmosh.com/javascript/react-lifecycle-methods/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209211/c2efc761-8a6b-bcbf-cb7a-feea7342a972.png)

### Mount
- **constrcutor()**
- static getDerivedStateFromProps()
- **render()**
- **componentDidMount()**


### Update
propsまたはstateが変更されたらupdateが動作
- static getDerivedStateFromProps()
- shouldComponentUpdate()
- **render()**
- getSnapshotBeforeUpdate()
- **componentDidUpdate()**
주의

# ESLintとは
ES(Ecma Script)＋Lint(エラーがあるコードにアラート)
codingの補助機能
参照：https://velog.io/@jiwon/ESlint

#### ESLintインストール

```
npm install -D eslint
```

#### ESLint初期化
```
.\node_modules\.bin\eslint --init
```
#### 全ファイルのエラー確認
```
.\node_modules\.bin\eslint [filename|directory]
```
#### 全ファイルをfixしたい場合
```
.\node_modules\.bin\eslint ** --fix
```

#### 拡張子 .jsのみ fixした場合
.\node_modules\.bin\eslint **/*.js --fix
Swift×NIFCLOUDで特定のデバイスにPush通知を送信するプログラム

Swift×NIFCLOUDで特定のデバイスにPush通知を送信するプログラム

```swift
struct NotificationRepository {
    
    var title : String
    var subtitle : String
    var OpponentID : String
    
    func send(){
        
        let push = NCMBPush()
        let data_iOS = ["contentAvailable" : false, "badgeIncrementFlag" : false, "sound" : "default"] as [String : Any]
        push.setData(data_iOS)
        push.setPushToIOS(true)
        push.setTitle(title)
        push.setMessage(subtitle)
        push.setImmediateDeliveryFlag(true)
        let query = NCMBInstallation.query()
        query?.whereKey("userId", equalTo: OpponentID)
        query?.whereKey("loginFlag", equalTo: true)
        push.setSearchCondition(query)
        push.sendInBackground { (error) in
            if error != nil {
                print("error:\(String(describing: error))")
            } else {
                print("suucess")
            }
        }
        
    }
}

```

呼び出す時は以下の通り

```swift
let notification_repository = NotificationRepository(title: "Push通知のタイトル", subtitle: "Push通知のサブタイトル", OpponentID: NIFCLOUDに登録したユーザーID)
            notification_repository.send()

```

## Swiftのお役立ち情報

https://wagtechblog.com/programing/swift-iphone-application-school

https://wagtechblog.com/programing/swift-textbook.html
【開く目次】をコピペで装飾！　

- [x] 目次作るのめんどくさいな,,
- [x] コピペでそのまま使いたい,,
- [x] 記事の邪魔になる目次は避けたい,,
<br>

開閉できる目次なら、記事の邪魔になりません。
さらにスクロール手間も省くことができます。


**開く目次のコピペ用**

```
<details>
<summary><strong>〜目次〜</strong></summary>
 [1. 1タイトル](#1-タイトル)
　 [1-1. タイトル1](#1-1-タイトル1)
　 [1-2. タイトル2](#1-2-タイトル2)
　 [1-3. タイトル3](#1-3-タイトル3)
[2. 2タイトル](#2-タイトル)
　 [2-1. タイトル2-1](#2-1-タイトル2-1)
　 [2-2. タイトル2-2](#2-2-タイトル2-2)
[3. 終わりに](#3-終わりに)
</details>
```
上のリンクに紐付けられるアンカーは、下のように記述します。

```
#1. 1タイトル
####1-1. タイトル1
####1-2. タイトル2
####1-3. タイトル3
#2. 2タイトル
####2-1. タイトル2-1
####2-2. タイトル2-2
#3. 終わりに
```
上記の結果は以下のようになります。

<br>
<details>
<summary><strong>〜目次〜</strong></summary>
 [1. タイトル](#1-タイトル)
　 [1-1. タイトル1](#1-1-タイトル1)
　 [1-2. タイトル2](#1-2-タイトル2)
　 [1-3. タイトル3](#1-3-タイトル3)
[2. タイトル](#2-タイトル)
　 [2-1. タイトル2-1](#2-1-タイトル2-1)
　 [2-2. タイトル2-2](#2-2-タイトル2-2)
[3. 終わりに](#3-終わりに)
</details>

#1. タイトル
####1-1. タイトル1
####1-2. タイトル2
####1-3. タイトル3
#2. タイトル
####2-1. タイトル2-1
####2-2. タイトル2-2
#3. 終わりに



最後まで読んで頂きありがとうございました。
まだまだ初学者ですので、もっと良い記述の方法があればご指摘お願い致します！
Python Django Codeタグ機能をやりたいです

### 解決したいこと。
現在、簡単なBlogサイトを作成しておりますが、
Blogに新しい情報を投稿する際、Codeを貼り付けると、そのCodeは囲み枠にしたいです。
例）
[code]コード内容[/code] を記載して投稿すると、
code内容の部分は囲み枠になります。

ご存知しましたら、ご教示お願い致します。
よろしくお願いいたします。

画像を添付します。
![zzzzz.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1290982/c9e10f5e-0ebb-9f23-7ee8-d47d397bf0b1.png)
ユーザー認証 【セッションの超基本】

#【ユーザー認証】

業務内外でログイン機能の実装の理解が必要になったので簡単に学んでみました。
この記事に関しまして、ご指摘などありましたらよろしくお願いいたします。

##ユーザー認証について考えてみる。

ユーザー認証は、HTTPプロトコルの取り決めによっておこなわれる。
　→　Webアプリに自分が誰かわかってもらうことが目的である。

HTTP/HTTPS通信は、ステートレスであるのでセッション管理が有効。

##セッション管理について

**ログインするまでの一連の流れをセッションという。**

ユーザーがログイン認証を試みる。
WebブラウザからAPサーバーへの認証が成功すると、
　→　Webブラウザにcookieが保存される。
　→　APサーバーにセッション情報が保存される。

次回以降、上記のものを照らし合わせて認証をおこなう。

※セッションが切れている＝ログアウト状態になっている。

##cookie利用の同意について

世界的に個人情報の厳格な管理が進み、cookieの規制が強まった。
　→　Web上の個人情報の管理が厳格に扱われている。

cookieの管理が厳しくなっているので、cookieを利用しない広告表示を実装しているものもある。

##過去記事

[キャッシュ　cookie　セッション](https://qiita.com/uejima_haruki/items/94fccd3b794fffca995a)
BigQueryの結果（TSV）をシェル芸でMarkdownにする

## 先に結論
`xclip`があれば

```bash
$ xclip -o |
  sed -e 's/\t/|/g' -e 2i$(xclip -o | head -n 1 | sed -e 's/\t/|/g' -e 's/\w*/--/g') |
  xclip -selection c
```

無い場合、`bqresult.txt`というファイルに結果をペーストして

```bash
$ cat bqresult.txt |
  sed -e 's/\t/|/g' -e 2i$(cat bqresult.txt | head -n 1 | sed -e 's/\t/|/g' -e 's/\w*/--/g')
```

## 動作環境
```bash
$ bash --version | head -n 1
GNU bash, version 5.0.3(1)-release (x86_64-pc-linux-gnu)
```

また、ここでのMarkdownは[GitHub Flavored Markdown（GFM）のテーブル拡張記法](https://github.github.com/gfm/#tables-extension-)に準じます。

## 説明
まずBigQueryの画面で好きなクエリを実行します。

今回はサンプルとして本当になんの意味もないクエリを実行します。

```sql
SELECT 1 AS id, "hoge" AS name
UNION ALL SELECT 2 AS id, "fuga" AS name
UNION ALL SELECT 3 AS id, "piyo" AS name
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50391/66f34fd9-7934-28e2-5868-1761f6f00d03.png)

実行結果を「結果の保存」→「クリップボードにコピー」します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50391/2a5ac671-a60b-28c5-7089-299ef6b8fff6.png)

とりあえず`bqresult.txt`というファイルにペーストします。

```bqresult.txt
id	name
1	hoge
2	fuga
3	piyo
```

このクリップボードにコピーされたクエリ結果はTSV（タブ文字区切り）になっています。タブ文字をバーティカルバー（`|`）区切りに変換します。お好みでスペースを入れたりしてください。

```bash
$ cat bqresult.txt | sed -e 's/\t/|/g'
id|name
1|hoge
2|fuga
3|piyo
```

区切り行も作る必要があります。

```bash
$ cat bqresult.txt | head -n 1 | sed -e 's/\t/|/g' -e 's/\w*/--/g'
--|--
```

これらを組み合わせれば完成です。

```bash
$ cat bqresult.txt |
>   sed -e 's/\t/|/g' -e 2i$(cat bqresult.txt | head -n 1 | sed -e 's/\t/|/g' -e 's/\w*/--/g')
id|name
--|--
1|hoge
2|fuga
3|piyo
```

id|name
--|--
1|hoge
2|fuga
3|piyo
【AzureCLI】"az login"で"No subscriptions found."と言われないために

Azureの勉強中、AzureCLIを試そうとして`az login`を叩いたら、ブラウザでのログインも成功したのに**"No subscriptions found."**と言われました。ググっても意外とドンピシャな記事がなかったので、備忘録として残しておきます。

## --tenantオプションを使う

**"No subscriptions found."**のエラーのちょっと上のコマンド出力を注意してよく見ると、
> The following tenants require Multi-Factor Authentication (MFA). Use 'az login --tenant TENANT_ID' to explicitly login to a tenant.
[テナントID] [テナント名]

と書いてあります。なので、`az login --tenant [テナントID]`を叩いてブラウザからログインすれば上手くいきます。

## MFAを無効化する
とはいえ、テナントIDのランダムな文字列を覚えておけるわけもない（環境変数として`.bashrc`とかに書くなら別ですが）ので、上の方法では最初のログイン試行で必ず失敗することになり、なんだか癪です。

そもそも勉強用の環境なんだからMFAとか知らん！無効化してやる！

というわけで、Azure Portalから**[Azure Active Directory]**>**[プロパティ]**>**[セキュリティの既定値群の管理]**と進んで、**[セキュリティの既定値群の有効化]**で**[いいえ]**を選択して**[保存]**を押して終了です。UIとかはこちらをご覧ください。

[Azure Active Directory のセキュリティ デフォルト | Microsoft Docs](https://docs.microsoft.com/ja-jp/azure/active-directory/fundamentals/concept-fundamentals-security-defaults#enabling-security-defaults)

CLIに戻って`az login`を叩き、ブラウザでログイン操作をしてちゃんとログインできることを確認したら終わりです。ありがとうございました。
mac OSの通知が来ないときの切り分け

# mac OSの通知が来ないときの切り分け

意外とありがちな 通知が来ない という現象・・・

数々の `通知がこないと思ったときに確認すること` みたいなドキュメントは見受けられますが

実際にどのような流れで通知が表示されているのか

また、実際にどうやって切り分けをするのか　というのは少なかったので

ざっくりと説明してみます。

https://support.apple.com/ja-jp/guide/mac-help/mh40583/mac

大半は、Appleのドキュメントに書いてありますが

実際の画像や流れを解説します。

## mac OSの通知ルートを理解する

### mac OSが通知を受け入れるまでの流れ

ざっくり、mac OSが通知を表示するまでの流れを解説します。

- アプリケーションが通知をmac OSに要求する
- mac OSは要求された内容をユーザーに通知
- ユーザーが許可した場合、以降の通知が許可される

![notification.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127585/fe35fab9-6ce5-9b04-9480-1eecd879524e.png)

アプリケーションをインストールした後、初回起動時に画像のような通知が表示されます。

ここで、許可をクリックすることで通知が許可されます。

許可をクリックした後、システム環境設定を見てみましょう。

![system-preferences.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127585/8dc5ccd2-e793-9a34-fe20-339459becdd0.png)

通知が許可されていることや、バナーが表示されることを確認できます。

ここで、 `Amphetamineからの通知を許可` のトグルをオフにすると

通知は届かなくなります。

また、 `通知スタイル` を `なし` にすると

通知は表示されません。（通知センターに通知は蓄積されます）

その他のオプションで、以下のようにカスタマイズすることができます。

- ロック画面に通知を表示しない
- 通知プレビュー（通知の内容）を表示しない
- 通知センター（通知の履歴）に表示しない
- アプリケーションのバッジ（アイコンの右上に赤い丸が付きます）を表示しない
- 通知音を鳴らさない

### 通知を受け入れるまでの切り分け

通知を受け入れるまでの流れを振り返って、**切り分けのポイント**は

- システム環境設定で `Applicationからの通知を許可` のトグルがオンになっているか
- `Application の通知スタイル` が `なし` になっていないか

上記2つです。

### 通知を受け入れた後

- システム環境設定 → 通知 の項目に追加される
- 以後の通知は設定に従って通知される

という流れになります。

## mac OSが制御する通知のあれこれ

先程説明した通知の受け入れ・通知の表示とは別に

mac OSがその通知を別の仕組みで制御できるようになっています。

### おやすみモード

おやすみモードを有効にすると、一切の通知をしないことを選択できます。

ステータスバーの右側に `通知センター` のアイコンが用意されています。

![nc-icon.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127585/99770943-9ad0-1e69-f476-3626807ac5d7.png)

これをクリックすると、通知センターが表示されます。

![notification-by-ampetamine.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127585/24a56b9e-76a8-bdda-432f-c115d8e6fb39.png)

おやすみモードのオン・オフは、更に通知センターを上にスクロールすると現れます。

![notification-center.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127585/56a4936e-d06e-c363-7b5c-9e16f9576c41.png)

このトグルを有効にすると、一切の通知は来なくなってしまいます。

``` text
mac OS Big Surからは、コントロールセンターからもおやすみモードをオン・オフにすることができます。
```

### おやすみモードのカスタマイズ

先程の、システム環境設定 → 通知 をもう一度開いてみましょう。

![oyasumi.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127585/e0bdc9ec-f258-7f96-ed1c-8afe7f39eec0.png)

一番上の、 `おやすみモード` を見てみます。

`おやすみモードをオンにする設定` から、様々なカスタマイズができます。

- 毎日、指定した時間におやすみモードをオンにする
- ディスプレイがスリープ中（画面がオフの時）はおやすみモードをオンにする
- 画面のロック中はおやすみモードをオンにする
- 画面のミラーリング中はおやすみモードをオンにする

その他、繰り返し（3分以内に2回目着信があった時）などのオプションがあります。

### 通知を受け入れてからの切り分け

通知の許可・通知の設定の切り分け後、それでも通知が届かない場合は

- おやすみモードがオンになっていないか
- おやすみモードのカスタマイズを確認する

というのがポイントとなります。

## Chrome / Firefoxなどのブラウザの場合

mac OSアプリケーションを中心に解説しましたが、

ChromeやFirefoxなどのブラウザでは、更にブラウザ上で通知の設定が存在します。

https://support.google.com/chrome/answer/3220216?co=GENIE.Platform%3DDesktop&hl=ja

ここでは、長くなるので割愛します。

## まとめ

mac OSを使っていて、通知が来ないときには

- システム環境設定で `Applicationからの通知を許可` のトグルがオンになっているか
- `Application の通知スタイル` が `なし` になっていないか
- おやすみモードがオンになっていないか
- おやすみモードのカスタマイズを確認する

この4つの設定を確認してみてください。
はじめてのDjango〜アプリケーションの作成からリクエスト処理まで〜

# はじめに
初心者だと、アプリ一つ作るのに苦労したので、備忘録として書いていきます。

## アプリケーションを作成する
以下の決められた手順に則って作成していきます。

### アプリケーションの枠を作成する
まず、ターミナルに以下を実行する。

```terminal:ターミナル
django-admin startapp <アプリケーション名>
```
するとプロジェクトファイルに、以下のファイル群が作成されます。

```
manage.py Django プロジェクトの管理用スクリプト
新しいアプリケーション/__init__.py Python がこのディレクトリをパッケージとみなすためのファイル
新しいアプリケーション/admin.py 管理ファイル
新しいアプリケーション/apps.py アプリケーション設定ファイル
新しいアプリケーション/models.py データベース定義
新しいアプリケーション/tests.py テストコードを書くところ
新しいアプリケーション/views.py ビュー
```
### 設定ファイルに新しいアプリケーションの設定をする。
プロジェクトを作成した際に作成されたフォルダの中のsetting.pyを以下の通り書いて、新しいアプリケーションをつなげる設定をします。

```python:urls.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    '<新しいアプリケーションの名前>.apps.XXXConfig'
]
# ※XXXConfigは、新しいアプリケーションのフォルダの中のapps.pyのクラスの名前です。
```

### URLを作成
プロジェクトを作成した際に作成されたフォルダの中のurls.pyに以下を書きます。

```python:urls.py
from django.contrib import admin
from django.urls import include, path

from . import views
urlpatterns = [
    path('', views.index, name='<新しいアプリケーションの名前>'),
    path('admin/', admin.site.urls),
]
```


次に、新しいアプリケーションファイル直下にurls.pyを作成して、urls.pyに以下を書きます。

```python:urls.py
from django.conf.urls import url
from . import views

urlpatterns = [
    url('', views.index, name='index'),
]
```

### Hello Worldと表示させる

最後に新しいアプリケーションファイル直下にindex.htmlを作成して、Hello Worldと表示させていきます。

```index.html
<!DOCTYPE html>
<html lang=" = "ja-jp">
    <head>
        <title>Hello World</title>
    </head>
    <body>
　　　　　<h1>Hello World</h1>
    </body>
</html>
```

## 参考記事

今回は、主にudemyの講座[3日でできる】Django 入門 ( Python 3 でウェブアプリを作って AWS EC2 で公開！）]を参考にまとめました。
woodwork.datacolumn.DataColumnをpandas.core.series.Seriesに変換してpandas.core.frame.DataFrameに結合する方法

## 背景

AutoMLライブラリのEvalMLを使ってみようと思ったことがあります。

https://github.com/alteryx/evalml

EvalMLを使ってみて、テストデータから予測を試みたときに「結果として出力される型が`woodwork.datacolumn.DataColumn`で`pandas.core.frame.DataFrame`に結合できない」という壁に直面しました。

そして、EvalMLや`woodwork.datacolumn.DataColumn`のドキュメント、EvalMLの利用例などを調査したのですが、解決策は見当たりませんでした。最終的に解決策は見つかったのですが、同じように悩む人もいるかと思い、この記事を公開します。

## 前提

Kaggleにおけるタイタニック号の生存者予測を例として挙げます。下記の手順でEvalMLによるテストデータからの予測が実現できます。

```python
import pandas as pd
from evalml.automl import AutoMLSearch

train = pd.read_csv('../input/titanic/train.csv')
test = pd.read_csv('../input/titanic/test.csv')
submission = pd.read_csv('../input/titanic/gender_submission.csv')
label = 'Survived'

X_train = train.drop(columns=[label])
y_train = train[label]

automl = AutoMLSearch(X_train=X_train, y_train=y_train, problem_type='binary')
automl.search()
automl.rankings

pipeline = automl.best_pipeline
pipeline.fit(X_train,y_train)
prediction = pipeline.predict(test)
```

しかし予測結果として出力されたであろう`prediction`を意図したとおりにデータフレームに結合できません。以下のように各データの予測結果が出力されてほしい部分に`<DataColumn: Survived (Physical Type = Int64) ...`というものが入ってしまっています。


```python
submission[label] = prediction
submission.head()
```

```shell
	PassengerId	Survived
0	892	<DataColumn: Survived (Physical Type = Int64) ...
1	893	<DataColumn: Survived (Physical Type = Int64) ...
2	894	<DataColumn: Survived (Physical Type = Int64) ...
3	895	<DataColumn: Survived (Physical Type = Int64) ...
4	896	<DataColumn: Survived (Physical Type = Int64) ...
```

以下のように、出力された`prediction`の型は`woodwork.datacolumn.DataColumn`でした。

```python
type(prediction)
```

```shell
woodwork.datacolumn.DataColumn
```

## 結果

以下のように解決できました。

```python
submission[label] = prediction.to_series()
submission.head()
```

```shell
	PassengerId	Survived
0	892	0
1	893	0
2	894	0
3	895	0
4	896	1
```

以下のように、出力された`prediction`の型を`pandas.core.series.Series`に変換しています。

```python
type(prediction.to_series())
```

```shell
pandas.core.series.Series
```

EvalMLのテストにヒントがありました。

https://github.com/alteryx/evalml/blob/01bf21fa73d83fab0f98fd14eb0c349a1df9fe24/evalml/tests/pipeline_tests/classification_pipeline_tests/test_classification.py#L57-L58

IDE使ってたらこんな悩みもなくなるのでしょうか…？これにより、`woodwork.datacolumn.DataColumn`を`pandas.core.series.Series`に変換して`pandas.core.frame.DataFrame`に結合し、EvalMLを使ってテストデータから予測ができました。おかげで、Kaggleにおいて、EvalMLを使って以下のようにsubmitまでできました。

https://www.kaggle.com/daikikatsuragawa/a-beginner-s-guide-to-evalml

よいEvalMLライフを！（※EvalML、オススメです！）
Ruby　クラスのインスタンスに情報を持たせる方法について

クラスのデータを定義するために使う「attr_accessor」というものがあります。　
これを使うと、下の例のようなHumanクラスインスタンスにあらゆる情報を持たせられます。
この情報はインスタンス変数と呼ばれており、1つのクラスにインスタンス変数は何個も作れます！
	
	class Human
	  attr_accessor :name
	  attr_accessor :age
	end
正規表現の初歩の初歩

java入門実践編の1章で正規表現を読んだまとめ。

## 完全一致
```
String a = "A"; 
a.matches("A");→true
a.matches("a");→false
```

## 任意の一文字であればOK
-  .（ピリオド）を使用する。使用した場合、その部分には任意の一文字が入るのでなんでもOK

```
String a = "A"; 
a.matches(".");→true
```

## 直前の文字の0回以上繰り返し
*（アスタリスク）の前の数を繰り返す

```
String a = "aaaab"; 
a.matches("a*b"); → true
```

## 指定回数の繰り返し
パターン中に波括弧で囲まれた数字が登場した場合、それは直前の文字の指定回数の繰り返しを意味する

```
String a = "aaaab"; 
boolean b = a.matches("a{4}b"); → true
```
{n} → 直前の文字をn回繰り返し
{n,} → 直前の文字をn回以上繰り返し
{n,m} → 直前の文字をn回以上m回以下繰り返し
? → 直前の文字の0回または1回以上の繰り返し
+ → 直前の文字の1回以上繰り返し

## いずれかの文字
###パターン中に各カッコ記号([])で囲まれた部分がある場合
- 角カッコの中のどれか一文字に当てはまることを要求する文章になる

```
String a = "ab1"; 
boolean b = a.matches("ab[123]"); → true
```

### 角カッコ内にハイフンが含まれる場合
- その両脇にある文字を含む範囲の任意の一文字であることを意味する

```
## [a-z] → aからzまでのいずれかの文字
## {3} → 3文字
## "[a-z]{3}" → aからzまでのいずれかの文字から3文字マッチしているか

String a = "ab1"; 
boolean b = a.matches("[a-z]{3}"); → false

String a = "ab"; 
boolean b = a.matches("[a-z]{3}"); → false

String a = "abc"; 
boolean b = a.matches("[a-z]{3}"); → true
```

#### 多用されるパターンは¥で始まる文字クラスとしてあらかじめ定義されている
- ¥d：いずれかの数字（[0-9]と同じ）
- ¥w：英字・数字・アンダーバー（[a-zA-Z_0-9]と同じ）
- ¥s：空白文字（スペース、タブ文字、改行文字など）
【Excel】十字キーで操作すると、画面がスクロールされる

![無題 - コピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864611/3cd8b868-f408-3b7d-40d7-2b5b3ae73922.png)

Excelには「スクロールロック」(Scroll Lock)という機能があり、
この機能によって、十字キーの操作で動きが異なります。

下記は、A1セルにカーソルを当てている状態で[↓](十字キー)を押下
　◆スクロールロックがONのとき、画面がスクロールされる（1行目が一番上→2行目が一番上）
![無題2-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864611/0ec9bdbd-f02d-d6a8-dbcf-a5fe5bfea1ef.png)
![無題2-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864611/cdf06ecb-2cb0-eb04-bfcf-8d51c0f263bc.png)

　◆スクロールロックがOFFのとき、選択しているセルが移動する　（A1セル→A2セルに移動）
![無題1-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864611/a0c3ddcc-c69a-cbf3-569c-df22f10aee29.png)
![無題1-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864611/19323bba-c808-cd10-f1e9-617268db75c2.png)



##設定(解除)方法
###方法①キーボードで設定(解除)
　　　　キーボードの[Scroll Lock]をON/OFFで設定(解除)
　　　　　※[ScrLK]と省略されている場合もある
　　　　　※ノートパソコンの場合は、ファンクションキーと同時押しが必要な場合がある
　　　　　　　→[Fn] + [ScrLK]同時押し

###方法②スクリーンキーボードで設定(解除)
　　　　[Scroll Lock]が無いキーボードの場合、スクリーンキーボードで設定(解除)を行う
　　　　②-1.スタート([Windows]押下)
　　　　②-2.「スクリーンキーボード」を検索
　　　　②-3.キーボードが表示されるので[ScrLK]をクリック
![無題-.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864611/0e74951d-2fa8-a869-5a94-ad4b3a5772e9.png)
![無題-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864611/02380f21-bd3f-bcdd-6613-ae2d9a555192.png)


###方法③ショートカット
　　　　スクロールロックをON/OFFするショートカットがある（PCメーカーによって異なる)
　　　　③-1.[Fn] + [C]
　　　　③-2.[Fn] + [K]
　　　　③-3.[Fn] + [S]
　　　　③-4.[Fn] + [F12]

##まとめ
　備忘録としてメモを投稿
　設定(解除)方法の方法③を今後メンテナンスしていきたい。。。
【Laravel】__()で呼び出した配列にキーが存在するか確認する方法

Laravelで、`__()`ヘルパーを使った時に、指定したデータが存在しない場合、引数で入力した内容が文字列として表示される。

##__()とは？
`Lang::get`の省略形。現在設定中の言語ファイルから、指定したデータを呼び出すときに使用する。

詳細については、[アンダースコア２つの意味。__()の記述は何をしているのか？](https://qiita.com/yuta-38/items/cc266801c8b5869280a8)をご参照。


<br>
##値が存在するときと存在しない時の挙動
以下のようなファイルがある時に`__()`の挙動を確認する。
resources/lang/ja/page.php

```php:paga.php
<?php

return [
 'test' => '01'
];
```


###値が存在するとき

'__()'を使えば値01を表示することができる。

```php:
dd( __('page.test') )
```

↓　画面表示

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/ad723bce-0502-eb28-54a1-d1d8ba0af308.png)



<br>
###値が存在しない時
存在しないキー`dummy`を指定した場合は、引数で指定した内容がそのまま文字列として表示される。

```php:
dd( __('page.dummy') )
```

↓　画面表示

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/6858bca0-66fb-1bfe-fd26-ffb8f3151d42.png)


<br>
##キーが存在する場合としない場合で条件分岐する方法
例えば、page.phpで定義している記述がすべて配列の場合、指定したキーが存在しているかどうかは、型をチェックすることで条件分岐できる。

型チェックには`gettype`メソッドを使う。

・`gettype( )`： 引数の方を文字列で返す。


**▼実例**

```php:page.php
<?php

return[
  x => [1, 2],
  y => [3, 4],
  x => [5, 6]
];
```

`__()`の型がstringの場合は404ページを表示し、配列が存在する場合はそれを表示する。

```php:xxxController.php
public function index($character){
 if ( gettype( __('page.' . $character) == 'string' ) ){
   abort('404');
 }

 return $character
}
```

・`abort()`
abortヘルパは引数にエラーのステータスコードを入れるとそのページを開く。

abort(404), abort(401), abort(500)など。
insertadjaceHTMLで二次元リストを表示しようとして失敗したこと 

#概要
Djangoのテンプレートの開発において、2次元リストのデータを表示しようとしたが手こずったのでその備忘録です。

自分のフロントエンド側の習熟度は素人に毛が生えている程度です。
早くボーボーになりたい。

#目的
・フロントエンド側に2次元リストの情報を表示する
・ユーザが操作→リストの内容が変更する
・すでにデータが表示されてる場合は内容を一新する

以下、ユーザーが部活を選択したときに、所属する生徒のIDと名前を表示するものを想定して記述します。

#達成に必要なもの/知識
タグの「table」「tr」「th」「td」の知識
insertAdjacentHTML()

以下はhtmlのぼんやりとしたイメージ

```html:test.html
<table>
  <!-- リストのヘッダー -->
  <tr>
    <th>項目1</th>
    <th>項目2</th>
  </tr>

  <!-- データを挿入する部分-->
  <div id="replace-data">
    <tr>
      <td>データ1</td>
      <td>データ2</td>
    </tr>  
  <div>

```


#試作コード
```html:test.html
<table id="classmate-club">
  <tr>
    <th>生徒</th>
    <th>部活</th>
  </tr>
</table>
```

例えばブラウザで「ラグビー部」をユーザが選択したときに以下のようなhtmlを出力できれば成功、などと思っていました。

```html:test.html
<table id="classmate-club">
  <tr>
    <th>生徒ID</th>
    <th>生徒名</th>
  </tr>

  <!-- 要素生成部分 -->
  <tr>
    <td>1</td>
    <td>稲垣啓太</td>
  </tr>
  <tr>
    <td>2</td>
    <td>ジョナサン・ジョースター</td>
  </tr>
  <!-- -- -->
  
</table>
```


・バックエンドからユーザがクリックした生徒の名前とクラブ名が渡される
・「tr」「td」をhtmlに生成する(tdに生徒の情報を入れる)
・差し込んだ「tr」がすでにある場合は事前に削除する
　(どんどん増えていくので)

```javascript:test.js

//バックエンドから渡されたデータが入っていると仮定
classmate = object()

// テーブルタグの要素をidで取得
var test_table = document.getElementById('classmate-club');

// 差し替えデータが一つでもある場合は削除する
var l_tr = document.getElementsByClassName('class-replace-data');
if(l_tr){
  for(i=0; i<l_tr.length; i++){
    l_tr[i].remove();
  }
}

// データ挿入
for(i=0; i<classmate.length; i++){
  // テーブル内の要素の最後にtrの要素を挿入
  test_table.insertAdjacentHTML('berforeend', '<tr id="id-replace-tr-"' + String(i) + ' class="class-replace-data">')

  // trの要素を取得  
  var test_tr = document.getElementById('id-replace-tr-' + String(i));

  // trの要素にtdをデータと共に挿入
  test_tr.insertAdjacentHTML('berforeend', '<td>' + classmate['id'] + '</td>')
  test_tr.insertAdjacentHTML('berforeend', '<td>' + classmate['name'] + '</td>')
}

```
上記のやり方で挿入されるtrの親にはtbodyが生成される。
そのため空のtbodyがどんどん生み出され、要素の削除もうまくいかない。

#沼ったポイント
・データの挿入部分をまとめて削除するときに便利だと思いid付きのdivで括ったがしかし
・insertAdjacentHTMLでtableの子階層のdivにtrを挿入できなかった
　→tableの子としてなら挿入できた
　consoleにエラーが表示されないため原因が明確ではないが、多分table/tr/tdの構造を崩してはいけない規則みたいなものがあるという認識で勝手に落ち着いている
　
・挿入したtrを挿入するときtbodyが自動で生成される


#解決策
element.innerHtml
element.insertAdjacentHTML()

ではなく
jqueryのapeend() またはprepend()を使用する。
今回はprependを使用する。

```javascript:test.js

//バックエンドから渡されたデータが入っていると仮定
classmate = {object}

// 差し替えデータが一つでもある場合は削除する
$('table'#classmate-club tbody *').remove();

// データ挿入
for(i=0; i<classmate.length; i++){
  // テーブル内の要素の最後にtrの要素を挿入
  var str = '';
  str += '<tr>';
  str += '   <td>' + classmate[i]['id'] + '</td>';
  str += '   <td>' + classmate[i]['metric'] + '</td>';
  str += '</tr>';
  $(' table tbody').prepend(str);
}
```
これでオブジェクトを2次元リスト形式で自由に差し替え可能になる。
問題の原因だったtbodyはちゃんと削除され、データ差し替えが正常に行える。
おそらくelement.insertAdjacentHTML()を使ってもうまくいく手法があるのだろうが、多分こちらの方がシンプルにまとまる。


#さいごに
つまづいて解決策を調査しているときに視野が狭くなりがちな癖を直そうと思いました。
フロントサイドの勉強中なのでもっといい方法を教えて頂けたら幸いです。
個人アプリ開発におけるCIサービスの選定

## 目次

- これは何？
- 個人開発で求める条件
- 候補となるCIサービス
- 最終的に選んだCIサービス
- 終わりに

## これは何？

最近個人開発でiOSアプリの開発をしておりテストの自動化をしたかったため、CIサービスの調査をしました。その価格やどういう基準でサービスを選んだのかをまとめまた記事です。

## 個人開発で求める条件

個人開発では収益をあげるのが難しく、料金も自分の財布から支払う必要があります。

そのためCIサービスを使う条件を以下のようにしました。

- 料金がなるべく安い（できれば無料枠で終わりたい）
- iOSの設定が簡単にできる

逆にチーム開発では求めていたけど個人開発では必要ないと考えたこと

- 権限管理が細かくできる
- サービスのメンテナンス性
- マルチプラットフォームのサポート

## 候補となるCIサービス

今回は Bitrise, Codemagic, GitHub Actions の3つを候補としてあげ比較をしました。

### [Bitrise](https://www.bitrise.io)

- 料金: × (無料枠がない、課金すれば時間は無制限)
- 設定: ○ (ドキュメントが豊富で設定もブラウザ上で行えて楽)

### [Codemagic](https://codemagic.io/start/)

- 料金: ○ (無料枠で月に500分使うことができる)
- 設定: △ (証明書管理などが簡単に行えない、iOSのデプロイに関するドキュメントがあまりない)

### [GitHub Actions](https://docs.github.com/en/actions)

- 料金: △ (無料枠で月に200分使うことができる)
- 設定: △ (証明書管理などが簡単に行えない、iOSのデプロイに関するドキュメントがあまりない)

## 最終的に選んだCIサービス

- CIは1回あたり10~20分程度と考えると個人開発といえど200分じゃたくさん開発をした月では足りなくなると考えて、Codemagicを利用することにしました。

## まとめ

- 今回は個人開発のCIとしてはCodemagicを採用しました。
- 今のところ特に不便なく利用することができています。
- 無料枠だけでCIを組みたい場合は Codemagic を選択肢に入れると良いと思いました。
【AWS】AWSの仕組みと操作方法

#プログラミング勉強日記
2021年4月7日

#AWSの仕組み
　AWSはインフラやアプリ開発の必要な機能がパーツサービスとして提供されている。それらのパーツを組み合わせることで、インフラを構築する。
　従来は、オンプレサーバーといったデータセンターに置いてあるような物理的なサーバーを使っていたが、これをEC2のクラウド上のサーバーに置き換えることができる。これによって時間とコストを削減することができる。ストレージにおいてもS3にデータを保存することができる。

#AWSの操作
　AWSの設定・操作はマネジメントコンソールでインスタンスなどを設定してSSHで接続して操作するのが基本である。

##1. AWSマネジメントコンソール
 WEB画面から設定できるGUIツール。そのため、プログラミングができない人でもGUIの操作で簡単にサーバーの起動・設定ができる。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/0aca58d3-b289-4993-7fd7-1196da3ef680.png)

##2. インスタンス接続
　設置したインスタンス(サーバー)の操作は、Windowsサーバー(PowerShellなど)やLinuxサーバー(Tera Term, PuTTYなど)といった標準に準じたソフトウェアを利用する。SSHソフトウェアは、設置したサーバーにアクセスして内部設定やソフトウェア設定を実行する通信方式、そのソフトウェアである。

##3. AWS CLI
　AWS CLI( Command Line Interface)は、コマンドラインから複数のAWSサービスを制御や管理ができる。
Chromeのデベロッパーツールで実行中の関数オブジェクトのメモリ使用量を確認できる?　#chrome　#Javascript　#programming

本内容を利用した場合の一切の責任を私は負いません。

先に結論を書くと、自分はできなかった(^^;
下記は悪あがきです(笑)

Chromeバージョン:バージョン: 89.0.4389.114（Official Build） （64 ビット）

スコープ内に定義された関数オブジェクトの実行中のメモリ使用量を知りたかった。
ソースは下記で、innerFunctionオブジェクトについて。
できれば、その関数を実行中である時と実行中でない時のそれぞれについて。
(どうでもいいことだが、「a1G」は最初は「1000 * 1000 * 1000」だったから。
実行するとデカ過ぎてJavascriptがOut of memoryでエラる(笑))

```html
<html>

<head>
    <script>
        function button1Handler()
        {
            innerFunction();

            function innerFunction(params)
            {
                let a1G = new Array(100 * 1000 * 1000);

                for (let index = 0; index < a1G.length; index++)
                {
                    a1G[index] = index;
                }

                alert("innerFunction start memory-snap");
                alert("innerFunction end memory-snap");
            }
        }

        function button2Handler(params)
        {
            alert("button2Handler start memory-snap");
            alert("button2Handler end memory-snap");
        }
    </script>
</head>

<body>
    <form action="">
        <input type="button" value="button1" onclick="button1Handler();">
        <input type="button" value="button2" onclick="button2Handler();">
    </form>
</body>

</html>
```

Chromeのデベロッパーツールに下記のようなMemoryタブがある。

![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397476/16767d69-377a-c055-8bd6-c4b1c5abce84.png)

単にChromeで表示している状態でスナップをとると、下記のようにオブジェクトのメモリ使用量らしきものが表示される。
一番したの検索窓っぽいものは、Ctrl+fを押すと表示されます。

![2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397476/09370db2-b53c-10bb-0da4-8b841b1c82df.png)

ということで、「innerFunction start memory-snap」のダイアログが表示されている時にスナップを撮ってみたのが下記。

![3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397476/541f214c-ac6f-dba8-ed2c-c2da37b8df01.png)

左の「HEAP SNAPSHOTS」のとこが「Snapshotting...」になってる。
これ、ずっとこのままorz
ダイアログのOKを押し、すぐ次に表示される「innerFunction end memory-snap」のダイアログでOKを押した後にやっと完了する。
完了した時のスナップの内容は最初と大差なく、実行中のスナップではないっぽい。
おそらく、Javascriptを実行中はスナップをとれないんじゃないかと思われる。
これじゃ欲しい情報はとれない。
ちなみに、最初の画面で、2つ目のラジオボタンの「～timeline」にするとモニタリングできる。
それでとったものだと「innerFunction」は出てくるけど、それでもバカデカいはずのa1Gが加味されたようなサイズではなく、それも欲しい情報とは違うっぽい。
一応、実行中ではなく、かつ、グローバル等常に存在するものを対象とするなら、「Chrome デベロッパーツール　memoryタブ　スナップ」で検索するといろいろ情報があります。

ちなみに、今更だとは思うけど、Javascript全体ならChromeが持っているタスクマネージャで確認することはできる。
ボタンを押す前が下記。

![a.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397476/90c4c77a-9a7f-fa7e-18d7-64112e87efbd.png)

ボタンを押し、全てのダイアログでOKを押し、ハンドラから復帰した時点が下記。

![b.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397476/2dd001e7-86ba-1861-e3ba-394dd000ad43.png)

1、2分経った後が下記。

![c.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397476/56b40453-2fce-00ee-daa2-09d48b60efb1.png)

解放に時間差があるので、ガベージコレクション(以降、GC)みたいなメモリ管理をしているのかも。
とはいえこれも、復帰後にバカデカくなったから、実行中を積み上げたものではなく、GCも含めたメモリ使用量を表示してるだけかも。
意外にも、ページの動作とChrome自身の動作は同一スレッドか同一イベントハンドリング下で、ページの動作中はスナップ等Chrome自身の動作も停まっちゃうのか？？？
[rails] 多対多の中間テーブル [to_table, class_name, through, source]





　　　　　　gift　　　　　　　　　　　　　　　
User　ーーーーーーーー＞　Profile　　　　　　　　　ギフトを贈る

[![Image from Gyazo](https://i.gyazo.com/8a77616e9c882a3aad12898f4574d6a7.png)](https://gyazo.com/8a77616e9c882a3aad12898f4574d6a7)

```20210301082221_create_gifts_.rb
class CreateGifts < ActiveRecord::Migration[6.0]
  def change
    create_table :gifts do |t|
      t.integer    :price,    null: false
      t.references :giver,    foreign_key: { to_table: :users }
      t.references :receiver, foreign_key: { to_table: :profiles }
      t.timestamps
    end
  end
end
```


```gift.rb
class Gift < ApplicationRecord
  belongs_to :giver, class_name: 'User', foreign_key: :giver_id
  belongs_to :receiver, class_name: 'Profile', foreign_key: :receiver_id
end
```


```user.rb
class User < ApplicationRecord
  has_many :gifts, class_name: 'Gift', foreign_key: 'giver_id'
  has_many :receivers, through: :gifts, source: :receiver
end
```


```profile.rb
class Profile < ApplicationRecord
  has_many :gifts, class_name: 'Gift', foreign_key: 'receiver_id'
  has_many :givers, through: :gifts, source: :giver
end
```

---

foreign_key: { to_table: :users }　　usersテーブルから参照してね

class_name: 'User'　　　　　　　 Userクラスから参照してね

through: :gifts　　　　　　　　　　giftsテーブルを通してね

source: :giver　　　　　　　　　　giverモデルが参照元だよ

---
foregin_key = 入口
source = 出口

という記事を見させていただいて、非常にわかりやすかったです。
記事は<a href="https://qiita.com/mitsumitsu1128/items/e41e2ff37f143db81897#relationships%E3%83%A2%E3%83%87%E3%83%AB%E3%81%A8user%E3%83%A2%E3%83%87%E3%83%AB%E3%81%AB%E3%82%A2%E3%82%BD%E3%82%B7%E3%82%A8%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E6%9B%B8%E3%81%8F">こちら</a>
(活用法以前に入力の仕方が分からない人向け)Notionの使い方

## この記事について

Notionは非常に自由度が高く、デザインもシンプルで好みだったので(ここポイント)
導入したものの、
・何をどこに入れればいいのか分からない
・/を入れると色々出てきて何が何だか分からない

そこで活用法以前にnotionに書くことももままならない有様だったので、ググったりYoutubeで色々みてどうにか使えるようになったので超初歩的なところをまとめてみました。


※Qiitaに投稿するのは初めてなので見苦しいところもあるかもですが最後までみていただけると幸いです。

## 最初の画面

![_2021-03-13_19.14.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/6099478f-f3c6-fb8f-0a3e-3316206e6862.png)

①Settings & Members

自分のNotionの名前(ワークスペース)を変えたりするところ。まだあまり使ってません。

②デフォルトで作成されたページたち

使い方の見本として最初からおいてあるページ。不要なら削除もできます。私はPersonal Homeの中にページを作ってます。

③Cover

カーソルを上に持っていくと好きな画像に変更することができます。デフォルトのものも用意されているほかUnsplashの画像も選択可

④自分で作ったページたち

作り方は後述

⑤連携サービスのリンクを貼り付け

/から始まるコマンドのEMBEDSの中から選んだサービスのリンクを貼り付けてます.

今貼ってあるのはGoogleスプレッドシートで作った家計簿のフォルダ

長くなりましたが今回は/コマンドの中からPageで作成しプログラミングのメモを書くやり方を紹介します

### Pageの作り方

①何も書かれていないところでマウスをオンすると下の画像のように `Click to add a block below` 

と出るので＋をクリック

![a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/bbdde004-0d77-a01a-742b-ef75db9d1f04.png)


②今回はノートを作りたいので `Page` を選びます。(Personal Homeというページの中にさらにページを作るイメージ)

![b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/ff6f64ab-9c5f-b797-c0ae-d70463ddd79a.png)

③Untitleとなっているところにページのタイトルを入力します。

あとは文字やコードを入力していくのですが、Notionではさまざまな文字入力が用意されています。

![_2021-03-13_19.47.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/9797a4b3-7475-787f-9098-21e6dffdea48.png)

![c.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/3995e1a8-27e6-efea-bb57-8f415aa91ecd.png)


①Pageのタイトル

②見出しの大きさ(1~3)

③ToDoLIst

④リスト(箇条書き、数字つき)

⑤トグルボタン

⑥クォート

⑦Divider(ページを分ける線)

⑧Notion内の他のページへのショートカットリンク

⑨code(ほとんどのコードに対応しています。)

上で紹介した文字入力を利用して書いたノートがこちら

赤文字のところは``(バッククオート)で文字を囲むと書くことができます。

![_2021-03-13_19.06.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/7c01fb46-d71b-7675-7556-03b394486c6c.png)

`code`　でよく使う表現を書いておけば、右上の `Copy` を押すだけでコピーもできるので便利かと思います。

### 最後に

自分が現在どこまでの機能を使えているか確認したかったのと、パッチメイトでもNotionが気になるという方が見えたので非常に簡単ですがまとめてみました。

日本語のヘルプページもあったので参考になるかと思います。

[https://www.notion.so/Notion-632234858e2e4d619cc63b4f3085d334#3ca8594db6b3480b8fc27b2503a992a5](https://www.notion.so/Notion-632234858e2e4d619cc63b4f3085d334#3ca8594db6b3480b8fc27b2503a992a5)
macbookpro jis配列に対して外部キーボードus配列の接続設定

仕事で初めてmacを使う事になった。
ツールや設定など初めてだったので記録。

## 外部キーボード接続
私はthinkpadのus配列キーボードを接続。
案内が表示される。
左shifｔの右隣のボタンを推して、右shiftの左隣のボタンを押して。
そうするとこのキーボードはusですね的なものが表示されるので選択する。

## commandなどボタンの配置設定
windowsを使用しているころから
スペースの両隣(alt)をctrl,ひらがな・英字の切り換えをしていたのでこの設定を
karabinerというソフトを使って設定する。

(スペースの両隣(alt)をctrl,ひらがな・英字の切り換えは多分macのus配列を使っている人は
そういう使い方をしているんではないだろか)

### Karabiner設定

#### keymap

karabinerインストール。
起動する。

![スクリーンショット 2021-04-07 19.02.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974496/a9a9c755-81c5-1ad4-627e-b02b2bb1c971.png)

thinkpadのキーボードを接続しているのでdevicesの一覧に表示されている。
それを選択し以下に設定。

![スクリーンショット 2021-04-07 19.10.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974496/b4dafb76-6924-88bb-c4cc-4e0fcddb149b.png)

thinkpadのfnボタンが認知されないので
thinkpadの左のctrlをfnに割り当てました。

#### ひらがな・英字の切り換え設定、delete(backspaceじゃなくて右から左に消してくれる方)設定
スペース両隣でひらがな・英字に切り換えたい。
左押したら英字、右を押したらひらがなといった感じ(英かなと一緒)

thinkpadのキーボードのdeleteボタンをmacのショートカットでいうところのshift+deleteを割り当てる。


Complex modificcationsタブに行きAdd rules押下。
Import more rules from ...を押下
![スクリーンショット 2021-04-07 19.20.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974496/084d423a-9d3a-5a00-7e24-6ba00ac65665.png)

For Japanese （日本語環境向けの設定） (rev 6)
Change delete key (rev 3)

をimport。

以下に設定。

![2021-04-07 19.26のイメージ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974496/c0bf0b6f-612f-db63-fa68-70a268fe790f.jpeg)



## 外部キーボードを接続時は本体キーボード無効化

![2021-04-07 20.07のイメージ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974496/4779df62-1938-3fc7-5a9d-4b1d4d5fffd9.jpeg)
ポートフォリオ作成の際に参考になっているリンク(デザイン編)

基本的にBootStrap4を使用しています。

### [画面サイズに合わせて高さを指定する3つの方法｜Webpark](http://weboook.blog22.fc2.com/blog-entry-411.html)
ブラウザで高さを出すときに便利。

### [footerを常に最下部に固定する方法(簡単) - Qiita](https://qiita.com/nozomi716/items/2b09d5bce3d08d1c41f9)
いつも探すのに時間がかかるやつ。


## BootStrap関連
### [はじめに - Bootstrap 4.4 - 日本語リファレンス](https://getbootstrap.jp/docs/4.4/getting-started/introduction/)

### [Bootstrap 4を使うならSassを使って3倍幸せになろう - Qiita](https://qiita.com/tonkotsuboy_com/items/1855734522bfe7ef7dad)
BootStrapのデザインをカスタマイズ(ちょっとだけ変更)したい時などにどうすれば良いか書いてある。
すごいわかりやすいし、すぐ読める。

### [Bootstrap4のメディアクエリ｜プログラムメモ](https://pgmemo.tokyo/data/archives/990.html)
BootStrapのデバイスごとのブレイクポイントの目安が書いてある。
公式にも記載して欲しい。

### [Bootstrapの変数を自分のSCSS（SASS）で使う方法 | 開発 | 2018年8月24日 | モノグサにお灸](https://monoxa.net/2018/08/bootstrap%E3%81%AE%E5%A4%89%E6%95%B0%E3%82%92%E8%87%AA%E5%88%86%E3%81%AEscss%EF%BC%88sass%EF%BC%89%E3%81%A7%E4%BD%BF%E3%81%86%E6%96%B9%E6%B3%95/?doing_wp_cron=1616571060.7641060352325439453125)
BootStrap使う際には知っておいた方がいいかも。

### [Home of free code snippets for Bootstrap](https://bootsnipp.com/)
BootStrapのパーツテンプレート集。
デザインが苦手なので、ここは非常に参考になります。
ちなみにBootStrapだけではなく、Foundation、Semantic UI、Materialize、Pure、Bulmaなどもあるみたいです。