OmniAICreator/Qiita-1.07M huggingface dataset:
JavaScript　getAttribute();（属性の取得）とsetAttribute();（属性の追加）

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/7533369e-2ef6-9b36-2243-819d852dc5dc.png" width="300">

#　Attribute（属性）とは…
>属性は要素を拡張し、動作を変更したりメタデータを提供したりします。
属性は常に name="value" の形式を取ります (属性の識別子に関連付けられた値が続きます)。
([MDN](https://developer.mozilla.org/ja/docs/Glossary/Attribute "MDN")より抜粋)

#　今回使うHTMLファイル
**今回のゴール：＜li＞タグに<font color="Red">class属性を追加</font>します**

>```html:index.html
    <!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>DOM</title>
    </head>
    <body>
        <ul>
            <li class="first" id="special">私はfirstクラスを持っています。</li>
            <a href="first.html" id="link">リンク</a>
            <li>私は属性をもっていません。</li>　<!--　←ここにclass属性を追加します -->
        </ul>
        <!-- JavaScript -->
        <script src="main.js"></script>
    </body>
    </html>
```

#１，まず、＜ul＞タグ直下＜li＞タグのid属性値を取得してみます！　【getAttribute();メソッド】


>```javascript:app.js
    // <ul>タグ直下の<li>タグを取得する
    const first = document.querySelector('.first');
    // id属性値を取得
    const idValue = first.getAttribute('id');
    // コンソール表示
    console.log(idValue); // spesialが表示
```

#２，次に＜a＞タグのhref属性値を取得してみます！　【getAttribute();メソッド】

>```javascript:app.js
    // <a>タグを取得する
    const link = document.getElementById('link');
    // href属性値を取得
    const showLink = link.getAttribute('href');
    // コンソール表示
    console.log(showLink);  // first.htmlが表示
```

#３，最後に、属性のない＜li＞タグにclass属性を追加します　【setAttribute();メソッド】

>```javascript:app.js
    // <li>タグを取得する
    const last = link.nextElementSibling;
    // class="first"を追加
    last.setAttribute('class', 'first');
    // コンテンツを追加
    last.textContent= '私はfirstクラスを持っています。';
    // コンソール表示
    console.log(last);
```

#４，デベロッパーツールで確認

>**<font color="Red">＜li＞タグに属性が追加されていることがわかると思います。**

>![get.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/937373ce-2631-a45a-469c-eadd890d163f.png)
Homebrew CaskでSourceTreeをインストールする


- 環境
    - macOS Big Sur バージョン11.1
    - Homebrew 2.7.1

# SourceTreeをインストールする

```zsh
# まずはアップデートして
% brew update
Updated 1 tap (homebrew/core).
No changes to formulae.

# お医者さんで健康か確認する
% brew doctor
Your system is ready to brew.

# SourceTreeをインストールする
% brew install sourcetree 
Updating Homebrew...
==> Auto-updated Homebrew!
Updated 1 tap (homebrew/cask).
==> Updated Casks
Updated 1 cask.

==> Downloading https://product-downloads.atlassian.com/software/sourcetree/ga/Sourcetree_4.0.2_236.zip
######################################################################## 100.0%
==> Installing Cask sourcetree
==> Moving App 'Sourcetree.app' to '/Applications/Sourcetree.app'.
==> Linking Binary 'stree' to '/usr/local/bin/stree'.
🍺  sourcetree was successfully installed!
```

# SourceTreeを起動する
1. ドックにあるLaunchpadにSourceTreeが追加されているので起動する![スクリーンショット 2020-12-29 21.55.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159761/990df2a5-0d37-c774-1952-ec5ba624edc9.png)
2. セキュリティで引っかかって開けないので一旦[OK]ボタンでダイアログを閉じる![スクリーンショット 2020-12-29 21.55.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159761/91157bdf-dd00-c71b-71ee-b0c3f8ef5e36.png)
1. システム環境設定 > [セキュリティとプライバシー] > [一般]タブ > [このまま開く]ボタン![スクリーンショット 2020-12-29 21.56.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159761/b19a298f-6c5d-f0c0-c3e0-e815b4b302d4.png)
2. ダイアログの[開く]ボタンで起動する![スクリーンショット 2020-12-29 22.01.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159761/85e25306-a7cf-8164-34a0-ea7d83330eda.png)
1. [続行]ボタンで次へ進む![スクリーンショット 2020-12-29 22.06.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159761/3d98379e-257a-c573-89a2-de734ebc8fad.png)
1. グローバルのユーザー名やメールアドレスを設定して[完了]ボタン![スクリーンショット 2020-12-29 22.06.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159761/545cebdd-3995-a529-28ba-d4e1060530e5.png)
1. ここからは使いたいように使う
    - 参考 : [SourceTreeの使い方を紹介しているサイト集 - Qiita](https://qiita.com/ponsuke0531/items/bba6a8c87317578f8018)

# 既存のローカルリポジトリを追加する
1. [新規...] > [既存のローカルリポジトリを追加] > リポジトリをクローンしているディレクトリを選択![スクリーンショット 2020-12-29 22.07.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159761/0ff8c5f3-aada-59b9-8e60-947fe08760cd.png)
1. [ローカル] > 追加したリポジトリをクリック![スクリーンショット 2020-12-29 22.18.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159761/3f3d5412-a349-92ee-e295-1c27ae0e0aaf.png)
1. ![スクリーンショット 2020-12-29 22.19.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159761/67cccd6c-a56b-a148-70b1-8ddfd0dec2e3.png)
React Native アプリ開発メモ

#[ReactNative](https://reactnative.dev/)

##長短点(勝手に思って)
###長点
・JavaScriptライブラリであるReactを組み合わること
・Reactを使用してAndroidおよびiOS用のネイティブアプリを作成できること
・高速リフレッシュできること

###短点
・別のバージョンへのアップグレードが難しいこと
・例外の根本原因が簡単に突き止められない場合があること
・複雑な構造対応が難しいこと


##Component 
### State 
Reactコンポーネントは、ユーザーの操作やネットワークの応答などに応じて、
時間の経過とともに出力を変更できます。
####実装

```state.ts
 state = {
    count: 0
  }
  onPress = () => {
    this.setState({
      count: this.state.count + 1
    })
  }
```

#[Redux](https://redux.js.org/)
JavaScriptアプリの予測可能な状態コンテナー

![Redux.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101832/c27e3cb7-d6f5-4cf0-e62d-7890b9c803b8.png)



##[Redux Toolkit](https://redux-toolkit.js.org/)
Reduxロジックを作成するための公式に推奨されるアプローチ

###Slice
Reducer(以前の状態とアクションを組み合わせ)を持つ

```slice.ts
import { createSlice } from '@reduxjs/toolkit';
const firestoreSlice = createSlice({
      name: "list",
      initialState: [],
      reducers: {
        addChat: (state: Chat[], action) => {
            state.push(action.payload)
        },
        saveChat: (state, action) => {
          saveDocument(action.payload);
      }
    }
    });
```
###Store 
状態は基本的に全てここで集中管理

```store.ts

const rootReducer = combineReducers({
    list: fireBaseReducer,
    name: sampleReducer
    });

const store = configureStore({
reducer: rootReducer,
});
```
###画面

```screen.tsx
import firestore from '@react-native-firebase/firestore';

const results = useSelector(state => state.list );

const firestoreRows = results.map ((chat) => {
    <>
    <Text>message:{chat.message} \n</Text>
    <Text>date:{chat.sendTime}</Text>
    </>
});
```

以上です。
Swift: 配列だってチェーンしたい

# Optionalだけ特別扱いずるくないか
SwiftでOptional Chainingというものがあったが、言語仕様でそんな飛び道具をサポートするなら配列やそのほかの似たような（モナモナしてる）やつらもサポートしてあげて欲しい。

今更だとは思うが、オプショナルチェーンとはご存知の通り

```swift
struct Person {
	let name: String
	let age: Int
	let friends: [Person]
}

let me: Person = .init(name: "Freddie", age: 30, friends: [])
let someone = me.friends.first?.friends.first?.friends.first // <- Person?
```

のように?を使って連続的にプロパティアクセスできる。

しかし問題は、なぜこの構文を配列やResult型でもサポートしてくれないのか。

オプショナルと配列をなぜ対等に扱ってくれと引き合いに出すのかと言えば、非常に長くなるので「これらは共通してモナドだ」という説明で割愛しておく。乱暴に言えば、オプショナルも配列もmapやflatMapってメンバー関数持ってて何だか似たもの同士だろ？ってところだ。

# 戯（や）りたいこと

どういうことがしたいかというと、配列においてこんな夢のようなかっこいい書き方をしたい。

```swift
let people: [Person] = [.init(name: "me", age: 32, friends: [.init(name: "Tom", age: 40, friends: [])]), .init(name: "you", age: 28, friends: [.init(name: "Nancy", age: 10, friends: []), .init(name: "Freddie", age: 20, friends: [])])]
let totalAge = people[].age.reduce(0, +) // 60
let ourFriends = people[].friends[].name // ["Tom", "Nancy", "Freddie"]
```

名付けるなれば、Array Chaining（アレーチェイニング）ってところか。

```swift
people[].age
```

この通り書けるなら、短くて美しくないだろうか？

よ〜くある

```swift
people.map { $0.age }
```

とか、せいぜい

```swift
people.map(\.age)
```

みたいなマサラタウンレベルのコードにはサヨナラバイバイしよう。

# それでは実装していこう

今回は配列を扱うのでメソッドチェーンを使うよという合図は?でなく[]でいこうと思う。

```swift
public extension Collection {
	subscript() -> ArrayMemberLookupReference<Self> {
		.init(source: self)
	}
}

public extension Collection where Element: Collection {
	subscript() -> ArrayMemberLookupReference<[Element.Element]> {
		.init(source: lazy.flatMap { $0 })
	}
}

@dynamicMemberLookup
public struct ArrayMemberLookupReference<C: Collection> {
	fileprivate let source: C
}

extension ArrayMemberLookupReference {
	subscript<Property>(dynamicMember keyPath: KeyPath<C.Element, Property>) -> [Property] {
		source.map { t in t[keyPath: keyPath] }
	}
}
```

# 使ってみるぞ

さて、こんなものが果たしてほんとに使えるのかと思われるかも知れない。
今一度サンプルコードを示してみよう。

```swift
struct Person {
	let name: String
	let age: Int
	let friends: [Person]
}

let people: [Person] = [.init(name: "me", age: 32, friends: [.init(name: "Tom", age: 40, friends: [])]), .init(name: "you", age: 28, friends: [.init(name: "Nancy", age: 10, friends: []), .init(name: "Freddie", age: 20, friends: [])])]
let totalAge = people[].age.reduce(0, +) // 60
let ourFriends = people[].friends[].name // ["Tom", "Nancy", "Freddie"]
```

# 是非お試しあれ。

実際に動くかと疑われる方はPlaygroundで実行してみて欲しい。
実際に現行のSwiftで実装されているが、あたかも新たな言語仕様が追加されたかのようにも見える。
Git コマンドまとめてみた

#git で良く使うコマンド


```
indexにファイルを移動
$ git add file名

indexに削除、追加、変更されたファイルをindexに移動
$ git add -A

上記同様だがカレントディレクトリ以下のみが実行されるため注意！
$ git add .

indexにあるファイルをコミットメッセージをつけてローカルレポジトリに移動
$ git commit -m "コミットメッセージ"

直前のコミットを取り消す(コマンド実行後再度コミット)
$ git commit --amend

ローカルレポジトリに変更を保存
$ git push origin master
(実際は実務ではこんなことしないらしい、ブランチ切ってそっちにpush推奨)

ローカルレポジトリの指定したブランチにpush
$ git push origin ブランチ名

branchの確認(今いるブランチに＊ついてるはず)
$ git branch

⓵branchの作成
$ git branch ブランチ名

⓶今いるブランチから指定のブランチへ移動
$ git checkout ブランチ名

⓵と⓶一緒に実行（もっぱらこれ）
$ git checkout -b ブランチ名

commitされていないファイル
変更があったがaddされていないファイル
.gitignoreに置かれていないにもかかわらずgitの管理外のファイル
といろいろ見れちゃう
$ git status

--------------------------------------------豆知識------------------------------------------------
.gitignoreはここにgitで管理したくないファイル（keyとか人にみられちゃいけないファイル＆上げなくてもいいファイル）
書いておけばリモートレポジトリとかにあがらない。これ未経験の場合、就職の書類審査でみられるとか見られないとか
-------------------------------------------------------------------------------------------------

コミットの履歴が見れる（↑で戻り、↓で進む　enterで一行ずつ進む　qで終了）
$ git log

```

これは本当に最低限なのでまだまだ使うコマンドはたくさんあると思います。

初めての投稿なので間違いがあれば教えてください。

ps. md記法覚えるのめんどくさいと思いました。（小学生風）
rake



# rake

rake は make や ant の ruby版である. ちょっとした作業やよく使う作業をさせる時に便利なように作られている.

例として以下のように記述してみる

```ruby
task :default do
  system 'rake -T'
  exit
end

desc 'hello NAME'
task :hello do
  name = ARGV[1]
  puts "Hello #{name}!"
  exit
end
```

    > rake

とすると Rakefile が用意している task (仕事) が表示される.

    rake hell # hello NAME

次によく使う git pull や git push を追加してみる


# git pull

```ruby
desc 'git pull'
task :pull do
  p comm = "git pull origin main"
  system comm
  exit
end
```


# git push

```ruby
desc 'git push'
task :push do
  p comm = "git add -A"
  system comm
  comm = "git commit -m 'hoge'"
  puts comm.green
  system comm
  p comm = "git pull origin main"
  system comm
  p comm = "git push origin main"
  system comm
  exit
end
```

これで

    > rake push

とするだけで github 共有をできるようになった


# おまけ

私は screenshot をよく使うので, screenshot の Rakefile を作成してみた

```ruby
desc 'screenshot'
task :screenshot do
  p comm = "gnome-screenshot --area"
  system comm
  exit
end
```

これは area を指定してその部分を .pngファイルで保存するというものだ.


# 参考ページ

[チャート式ruby-appendix-IV(rake)](https://qiita.com/daddygongon/items/1c2d6d2895333ccf5e62)



------
 - **source** ~/grad_members_20f/members/djj31370/rake.org
Rakeを使って作業を自動化

\![macOS-11.1](<https://img.shields.io/badge/macOS-11.1-brightgreen>) \![ruby-2.7.2p137](<https://img.shields.io/badge/ruby-2.7.2p137-brightgreen>) 


# Preface (はじめに)

makeやantのRuby版として`rake`があります. これは`Rakefile`に記述に沿って自動で処理してくれます. 

今回はGitの "add-commit-pull-push"までの処理を自動化してくれる`Rakefile`を作って作業を楽にしたいと思います.


# rake


## Rakefileの基本

典型的な`Rakefile`は, 

```ruby:Rakefile
task :default do
  system 'rake -T'
  exit
end

desc 'hello NAME'
task :hello do
  name = ARGV[1]
  puts "Hello #{name}!"
  exit
end
```

この`Rakefile`で実行すると

```
> rake
-> rake hello # hello NAME


> rake hello Wor
Hello Wor!
```

見事に作業の自動化ができました.


## Gitの自動化

今度はGitの"add ~ push"までの作業を自動化する. 

まずは, Gitのpullを自動化します. systemコマンドを起動する関数`system`を用いて, 

```ruby:Rakefile
desc 'git pull'
task :pull do
  p comm = "git pull origin main"
  system comm
  exit
end
```

以下のコマンドで実行できます. 

```
> rake pull
```

次に, 今回の主目的であるGitの"add ~ push"までの作業を自動化する`Rakefile`は

```ruby:Rakefile
desc 'git push'
task :push do
  p comm = "git add -A"
  system comm
  p comm = "git commit -m \'hoge\'"
  system comm
  p comm = "git pull origin main"
  system comm
  p comm = "git push origin main"
  system comm
  exit
end
```

ただ, このままでは大量の"hoge"というコミットメッセージのコミットが生まれてしまうので, 

自分でコミットメッセージを変えれるようにします. 

```ruby:Rakefile
require 'colorize'
desc 'git push'
task :push do
  msg = ARGV[1]
  p comm = "git add -A"
  system comm
  comm = "git commit -m \'" + msg + "\'"
  puts comm.green
  system comm
  p comm = "git pull origin main"
  system comm
  p comm = "git push origin main"
  system comm
  exit
end
```

以下のコマンドで実行できます. 

```
> rake push
```


# 参考資料

[チャート式ruby-appendix-IV(rake)](https://qiita.com/daddygongon/items/1c2d6d2895333ccf5e62)
Youtube 音楽をオフラインで

はじめに
----

みなさん、こんばんは、年の瀬いかがお過ごしでしょうか

コロナやらニューノーマルなんやら・・・とは、関係なく家に籠りっきりなのですが

そんな情勢を快適に過ごすために良い音楽が必要だとおもいす。

ということでYotubeをMP3変換してネットが使えない状況でも持ち歩いて楽しめいる様にしたい、と思いたったので
サーバーの設定を行いました。
>　家から出ないならオフラインの意味はというつっこみはないで


- 先人の叡智（参考サイト）   
  [FFmpeg：Wiki](https://ja.wikipedia.org/wiki/FFmpeg#Linux)   
  [FFmgeg:Qiita参考](https://qiita.com/naoh16/items/f9bd1094b93ce47fefeb)   
  [yotube-dl:公式](https://ytdl-org.github.io/youtube-dl/index.html)   
  [yotube-dl:Git](https://github.com/ytdl-org/youtube-dl/blob/master/README.md#readme)   
  [youtube-dl:参考サイト](http://byebyejohnny.hatenablog.com/entry/2017/10/28/080745)    


## 使うもの

| ソフト名   | 役割             |
| ---------- | ---------------- |
| youtube-dl | ダウンロード担当 |
| ffmpeg     | 変換担当         |

## 環境

| OS      | バージョン |
| ------- | ---------- |
| CnetOS7 |     7.9    |


### ffmpegの設定

**epel**リポジトリをインストールした後に**rpmforge**リポジトリを追加して目的の**ffmpeg**をインストールします。

> **yum-utils**は、リポジトリ操作の有効/無効をコマンド制御するためものもです。

```bash
sudo yum install yum-utils
sudo yum install epel-release
sudo yum install https://download1.rpmfusion.org/free/el/rpmfusion-free-release-7.noarch.rpm
```

インストールしたリポジトリを常時無効化しておきます。

```bash
sudo yum-config-manager --disable epel rpmfusion-free-updates
```


**ffmpeg**のインストール

```bash
sudo yum --enablerepo=epel,rpmfusion-free-updates install ffmpeg ffmpeg-devel
```

**ffmpeg**バージョンと作動を確認します。

```bash
ffmpeg -version

# 実行結果
ffmpeg version 3.4.8 Copyright (c) 2000-2020 the FFmpeg developers
built with gcc 4.8.5 (GCC) 20150623 (Red Hat 4.8.5-39)
# 以下略
```

### youtube-dlの設定

次に**yotube-dl**をインストールします。
**curl**や**wget**コマンドを使って直接**/usr/local/bin**ディレクトリの下にインストールする方法とPIPを使ってインストール方法があります。


#### curlインストール

```bash
sudo curl -L https://yt-dl.org/downloads/latest/youtube-dl -o /usr/local/bin/youtube-dl
sudo chmod a+rx /usr/local/bin/youtube-dl
```

#### wgetインストール

```bash
sudo wget https://yt-dl.org/downloads/latest/youtube-dl -O /usr/local/bin/youtube-dl
sudo chmod a+rx /usr/local/bin/youtube-dl
```

### PIPインストール

```bash
sudo -H pip install --upgrade youtube-dl
```

インストールの確認

> PIPで実行するとPython2.7になるので廃止の警告が出てきます。

```bash
pip freeze | grep youtube-dl
youtube-dl==2020.12.29
```



### MP3でダウンロード

以上で準備完了でMP3でダウンロードする場合は、以下のコマンドラインとなります。

```bash
youtube-dl -x --audio-format mp3 https://youtu.be/hogehoge
```


その他にもいろいろ機能がありますので公式ドキュメントを使ってお気に入りの音楽を楽しんでください。
【Vue.js】inputやtextereaで空白(スペース)をトリミング

##背景
Vue.jsとLaravelで自作WEBサービス内のレビュー機能を作成中。

textareaやinputを使った入力必須としたい投稿フォームにて、空白のみでも投稿ができてしまう。
空白のみでの投稿ができないようにしたい。


##解決策
.trim修飾子を使うと、ユーザの入力から前後の空白を自動的に取り除いてくれる。

```vuejs:ReviewForm.vue
<template>

    .......
  
    <textarea
        v-model.trim="detail"
        placeholder="詳細"
        rows="10"
    ></textarea>

</template>
<script>
export default {
    data() {
        return {
            detail: '',
        }
    },
}
</script>
```

![スクリーンショット 2020-12-29 21.30.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680199/5d40606c-67ec-4989-b7d4-19a205c6f194.png)
このように「あああああ」の前後に空白があっても・・・
![スクリーンショット 2020-12-29 21.31.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680199/1b820190-7e38-ab2e-1e31-550d11cc58ae.png)
フォーカスが外れると空白が取り除かれる。

これで空白のみを入力しても取り除かれ、何も入力していないのと同じ状態にできる。
バリデーションと合わせ、空白のみでの投稿はできなくなった。


参考サイト
[フォーム入力バインディング](https://jp.vuejs.org/v2/guide/forms.html)
【Next.js】setStateでハマった(Maximum update depth exceeded)

###前提としての状況
Next.jsを用いてポートフォリオサイトを制作中
自分で撮影した写真を一覧表示するコンポーネントを作成し、
各画像を-img-タグで表示

###エラー発生の原因
そこで以下のように'onClick'属性を付与し、その先で'this.setState'としてところ上記のエラーが発生

```:画像表示タグ
<img src=... onClick={this.handlePopup()} />
```
```:setStateするために呼び出した関数
handlePopup() {
    this.setState({
        -stateの指定-
    })
};
```



###解決策
'onClick'属性に直接関数を指定するのではなく、アロー関数で指定

```
onClick={() => this.handlePopup()}
```

####参考にさせていただいたサイト
https://ja.stackoverflow.com/questions/57002/%E4%BD%95%E6%95%85-uncaught-invariant-violation-maximum-update-depth-exceeded-%E3%81%A8%E3%81%84%E3%81%86%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%8C%E5%87%BA%E3%82%8B%E3%81%AE%E3%81%8B%E3%82%8F%E3%81%8B%E3%82%8A%E3%81%BE%E3%81%9B
Angularの環境構築でzsh: command not found: ngとでた話

Angularの環境構築で本やQiitaの他の方の投稿をみながら構築していたのですが表題のエラーが出たため若干詰まった話をしようと思います。

anyenv,nodenv,node.js,Angular CLIを全てインストールして、

```
% ng new アプリ名
```
でプロジェクトを作成しようとしたところ、出てしまいました。

```
zsh: command not found: ng
```
この手のエラーは「PATHが通っていないからPATHを通してください」というものということを改めて理解しました。

###PATHとは何か
コマンドの一つ一つがプログラムとして保存されているので、そのコマンドがどこに保存されているのかを探してくるということみたいです。

```
ls
/bin/ls
```
どちらも結果は同じになるけどわざわざ毎回pathを通すのが面倒なのでzshやbashに書いていたということということをようやく理解できました。

### ngを実行できるようにするためには
pathを通す必要があります。
私はhomeにnpm-globalというディレクトリを作成しそこに

```
% npm config set prefix '~/npm-global'
```
と記述しました。ngのプログラムはこの下のディレクトリのbinに入っています。そこからとってくるという形でpathを通す必要があります。

```
% vim ~/.zshrc
```

```
export PATH=$PATH:/Users/nariomasahisa/npm-global/bin
```

これで通したあとはプロジェクトを作成できるようになりサーバーにもアクセスできるようになりました。
GrafanaのイメージがSlackへ転送できなくなったので対処した話


Grafanaを6.4.1で運用していましたが、ふとバージョンをあげてみたところ
Slackへ通知していた画像が送られなくなったので対処しました。

手順としては
https://grafana.com/docs/grafana/latest/administration/image_rendering/
こちらに書いてある通りですが、
適当に読んで重要な部分をすっかり読み飛ばしてしまう私のような人の助けになれば・・・。orz


![rendering_plugin_not_installed.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180964/1382c16a-74ce-db4a-9ba2-d7ddc3f9d153.png)

### Image rendering プラグインの導入

Grafana Image Renderer なるものがないということで、サクッと導入しました。
https://grafana.com/grafana/plugins/grafana-image-renderer/installation

`grafana-cli plugins install grafana-image-renderer`



ん？ なにかよく見た画像になった

![mixed_styles.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180964/bd51f120-1c17-3e1a-ea9a-588a13c390f6.png)

grafanaの通知テストとかで表示される画像ですね。
私はここで彷徨ってしまいました。ちゃんと書いてあるのに・・・。
はい、答えは最初のマニュアルのトラブルシューティング。

### 足りないシステムの補完

Ubuntu:
On Ubuntu 18.10 the following dependencies have been confirmed as needed for the image rendering to function.

```
libx11-6 libx11-xcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrender1 libxtst6 libglib2.0-0 libnss3 libcups2  libdbus-1-3 libxss1 libxrandr2 libgtk-3-0 libgtk-3-0 libasound2
```

Debian:
On Debian 9 (Stretch) the following dependencies have been confirmed as needed for the image rendering to function.

```
libx11 libcairo bcairo2 libcairo2 libxtst6 libxcomposite1 libx11-xcb1 libxcursor1 libxdamage1 libnss3 libcups libcups2 libXss libXss1 libxss1 libxrandr2 libasound2 libatk1.0-0 libatk-bridge2.0-0 libpangocairo-1.0-0 libgtk-3-0
```

On Debian 10 (Buster) the following dependencies have been confirmed as needed for the image rendering to function.

```
libxdamage1 libxext6 libxi6 libxtst6 libnss3 libnss3 libcups2 libxss1 libxrandr2 libasound2 libatk1.0-0 libatk-bridge2.0-0 libpangocairo-1.0-0 libpango-1.0-0 libcairo2 libatspi2.0-0 libgtk3.0-cil libgdk3.0-cil libx11-xcb-dev
```

Centos:
On a minimal Centos installation, the following dependencies have been confirmed as needed for the image rendering to function:

```
libXcomposite libXdamage libXtst cups libXScrnSaver pango atk adwaita-cursor-theme adwaita-icon-theme at at-spi2-atk at-spi2-core cairo-gobject colord-libs dconf desktop-file-utils ed emacs-filesystem gdk-pixbuf2 glib-networking gnutls gsettings-desktop-schemas gtk-update-icon-cache gtk3 hicolor-icon-theme jasper-libs json-glib libappindicator-gtk3 libdbusmenu libdbusmenu-gtk3 libepoxy liberation-fonts liberation-narrow-fonts liberation-sans-fonts liberation-serif-fonts libgusb libindicator-gtk3 libmodman libproxy libsoup libwayland-cursor libwayland-egl libxkbcommon m4 mailx nettle patch psmisc redhat-lsb-core redhat-lsb-submod-security rest spax time trousers xdg-utils xkeyboard-config
```

私は CentOSを利用しているので、 yum install ～ (dnf install ～)で完了です。


ほんと、ただの自分のおっちょこちょいなんだよなぁ・・・。
AWS基礎

#はじめに
###AWSとは
アマゾンが提供するクラウドサービス
クラウド上でサーバーやネットワークを構築するためのサービス


###インフラとは
サーバーやネットワーク
システムやサービスの基盤となる設備

infrastructure : 基盤


###サーバーとは
クライアントに対してサービスを提供するコンピューター
ex)
本番サーバー、テストサーバー、webサーバー、データベースサーバー

###ネットワークとは
複数のコンピューターをつないで、データを送受信できるようにするもの
ex)
コンピュータ同士をケーブルで直接繋ぎ、データを送受信できるようにする
インターネットのように色々なコンピュータを繋ぎデータを送受信できるようにしたもの
【Ruby】initializeメソッドとクラス変数を使って合計金額を出す方法

## 概要

合計金額の出し方はいくつも方法があります。

今回はその中でも**`initialize` メソッドと `クラス変数`**を使用します。

## 目次
- 実践
    - 問題
    - 条件（構成）
    - 解答（解説）
    - プロセス
    - 補足

- まとめ
- 参考文献

## 実践

#### 問題

>initialize メソッドと クラス変数 を用いて果物の合計金額を出力してください。

#### 条件（構成）

- クラス名
    -  Fruits


- インスタンス
    - apple
        - 名前: リンゴ
        - 値段: 200

    - banana
        - 名前: バナナ
        - 値段: 150

    - melon
        - 名前: メロン
        - 値段: 500

- クラス変数
    - sum

- クラスメソッド
    - get_sum

- インスタンス変数
    - name
    - price

#### 解答（解説）

```ruby:解答例
class Fruits
  attr_reader :name, :price #読み取り可能にする
  
  @@sum = 0 # 変数定義
  
  def initialize(name, price) # initializeメソッドで引数としてname,priceを受け取る
    @name  = name             # インスタンス変数@nameを定義
    @price = price            # インスタンス変数@priceを定義
    @@sum += price            # @@sumに各フルーツの合計金額を足していく
  end
  
  # 果物の名前と値段
  def cost
    puts "#{name}の値段は#{price}円です。"
  end

  # 果物の合計金額
  def self.get_sum
    puts "合計の価格は#{@@sum}円です！"
  end
  
end

# インスタンス生成
apple  = Fruits.new('リンゴ', 200)
banana = Fruits.new('バナナ', 150)
melon  = Fruits.new('メロン', 500)

# 呼び出し
apple.cost
banana.cost
melon.cost
Fruits.get_sum

# ターミナル出力結果

# リンゴの値段は200円です。
# バナナの値段は150円です。
# メロンの値段は500円です。
# 合計の価格は850円です！
```

#### プロセス

1.インスタンス生成

- 引数をクラス内に渡す
- `initialize` が呼び出される

2.`initialize`

- インスタンス変数定義
- `@@sum` に各フルーツの `price` を足していく

3.メソッドを定義してターミナルに出力できるようにする

4.メソッド呼び出し

#### 補足

- `attr_reader` を使うことでインスタンス変数を@なしで使用することができます。（コードでいうと **costメソッド** の **name と price** ）


## まとめ

- インスタンス生成時 に `initialize` は呼び出される
- クラス変数は `@@` を変数の前につけることで定義することができる
- `attr_reader` を使うことで ゲッターメソッド が定義できる
- `attr_writer` を使うことで セッターメソッド が定義できる
- `attr_accessor` を使うことで ゲッター / セッターメソッド が両方を定義できる

## 参考文献

- [Ruby 3.0.0 リファレンスマニュアル (変数と定数)](https://docs.ruby-lang.org/ja/latest/doc/spec=2fvariables.html)
- [【Ruby】attr_accessorメソッド初心者入門書~使い方と必要な理由を理解しよう](http://pikawaka.com/ruby/attr_accessor)
- [【Ruby】「ゲッター」と「セッター」を理解する](https://qiita.com/k-penguin-sato/items/5b75be386be4c55e3abf)
- [rubyの変数について](https://qiita.com/nakamaru/items/1339303487fe8a876825)
Reduxを学んだ(1) ~StateとActionとReducer~

- この記事は自分のメモでしかないので、正確さは全く保障されておりません。

## ReduxでのState管理とそのインターフェイス


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534442/05b293fc-fc3f-375f-738d-5b098564f544.png)


## Actionについて


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534442/628aaac4-0ca2-f2f5-4898-d3103a24d8b5.png)

- ActionCreatorを使ってActionを作成する


## Reducerについて



以下のルールを設けた上で

- Only an event can change the state of the store.
- The function that returns the new state needs to be a pure function.

**State + Action --(Reducer)--> newState** という設計が用いられている。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534442/10028428-3318-edfa-895e-c345ed874b55.png)

- 複数のreducerは以下のように連結できる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534442/ecedad23-690c-5a7b-8c11-30f41416d47b.png)



### [補足]Reducerは、pure functionであるべきである

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534442/8c662b52-5577-bbe3-d7ad-8737bd9d192f.png)







## 参考



- 画像はUdacityの[Become a React Developer](https://www.udacity.com/course/react-nanodegree--nd019)コースのコンテンツから引用している。本文の内容に関しても、同コンテンツを大いに参考にしている。

## その他

自分の書いたReactの学習メモは: [Reactを学んだ(1) ~StateとProps~](https://qiita.com/kudojp/items/d2e4d4247dd870b7a364)
emacs



# emacs を install

    sudo apt install emacs

できない場合, 一度アップデートしてから

    sudo apt-get update
    sudo apt install emacs

emacs の version チェックは

    emacs -version

例

    > emacs -version
    GNU Emacs 26.1
    Copyright (C) 2018 Free Software Foundation, Inc.
    GNU Emacs comes with ABSOLUTELY NO WARRANTY.
    You may redistribute copies of GNU Emacs
    under the terms of the GNU General Public License.
    For more information about these matters, see the file named COPYING.

emacs の version は 26.1 ということがわかる.



------
 - **source** ~/grad_members_20f/members/djj31370/emacs.org
0b1111～を用いてforループの進捗状況表示のタイミングを判定する試行

forループの中で、進捗状況の表示(print)を出すタイミングを**bit演算「i & 0b1111... == 0」で判定**します。(よく「i % 1000 == 0」等で判定する所)

表示頻度の**調節は「1」を足すだけ**でOK。2bit値なので2倍ずつ頻度が変化。(正確な頻度でなく)適当に調節するだけでよいなら「1」を足していくだけなのでお手軽。

bitの「&」演算1回でOK。「%」(剰余演算)よりは処理負荷低。

```python:trial.py

# -*- coding: utf-8 -*-

# forループの進捗状況%表示タイミング「i & 0b1111.. == 0」を用いる方法

# note: np.arange(10)のコピーを大量にlistに追加すると、メモリが潤沢に使用されていく模様

import numpy as np

# sec: main

def main(if_print=True):
    
    if if_print:
        print("started:", end="")
    
    t = np.arange(10) # 処理負荷用
    n = 100000000 # 反復回数
    y = [] # 結果用
    for i in range(n):
        
        # sec: 処理
        
        y.append(t + i) # 処理負荷用
        
        # sec: 進捗表示
        
        if if_print:
            if i & 0b1_1111_1111_1111_1111_1111 == 0:
                print(f"{i / n * 100:.1f}%", end="")
            elif i & 0b1_1111_1111_1111_1111 == 0:
                print(".", end="", flush=True)

    if if_print:
        print(" ok")
        print("finished.")
    
    del y

# sec: entry

if __name__ == "__main__": main()

```

コンソール出力例:

```
started:0.0%...............2.1%...............4.2%..............
.6.3%...............8.4%...............10.5%...............12.6%
...............14.7%...............16.8%...............18.9%....
...........21.0%...............23.1%...............25.2%........
.......27.3%...............29.4%...............31.5%............
...33.6%...............35.7%...............37.7%...............3
9.8%...............41.9%...............44.0%...............46.1%
...............48.2%...............50.3%...............52.4%....
...........54.5%...............56.6%...............58.7%........
.......60.8%...............62.9%...............65.0%............
...67.1%...............69.2%...............71.3%...............7
3.4%...............75.5%...............77.6%...............79.7%
...............81.8%...............83.9%...............86.0%....
...........88.1%...............90.2%...............92.3%........
.......94.4%...............96.5%...............98.6%.......... ok
finished.
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606924/4e323651-0309-cc15-0b60-e39f84168b5a.png)

## 余談: メモリが潤沢に使用される

前述のtrial.pyを実行すると、必要以上にメモリが使用されていき、すぐにOSのメモリ使用率90%越えとなる。np.arange(10)のコピーを大量にlistに追加すると、メモリが潤沢に使用されていく模様。(PCが不安定になるようなことはない)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606924/7d63bcbb-8452-ec1f-46ea-f97bc45b5dde.png)
当処理が終了した後は、OSのメモリ使用率36%→27%となり、現在実行中のOS・アプリに必要な最低限のメモリ量が27%程度と分かる(のかもしれない)。
ESPr Door Sensor(ESP-WROOM-02)への書き込みができない

#ESPr Door Sensor

ESPr Door Sensorはスイッチサイエンス社から販売されているモジュールです。
扉の開閉を検知するために使ってみようと思い、[こちらの記事](http://trac.switch-science.com/wiki/ESP-DOOR)にある動作確認用サンプルをまずは書いてみました。

```c++:RestRoomIoT_Test.ino
int LED = 4;
int reed_sw = 5;

void setup() {
  pinMode(LED,OUTPUT);
  delay(10);
  if(digitalRead(reed_sw) == 0){
    digitalWrite(LED,HIGH);
      delay(100);
      digitalWrite(LED,LOW); 
  }
  else{
    for(int i = 0; i < 3; i++){
      digitalWrite(LED,HIGH);
      delay(100);
      digitalWrite(LED,LOW);
      delay(100);
    }
  }
  ESP.deepSleep(0,WAKE_RF_DEFAULT);
  delay(1000);
}

void loop() {
  

}
```



しかし、Arduino IDEから書き込みボタンを押しても書き込めず。。。
いろいろなサイトを見ても原因がそれ通りではなく手間取ったので、その過程を記しておこうと思います。

##開発環境と購入部品

開発環境は以下の通りです。
MacBook Pro (15-inch, 2018)
macOS Catalina バージョン 10.15.7
Arduino 1.8.10　
上記の記事に従ってArduino1.6.8をインストールしたら、なぜか書き込みも検証もできず、どんなコードでも以下のようなエラーが出続けてしまいました。

>failed MSpanList_Insert 0x30b000 0x1bac3dab73962 0x0
fatal error: MSpanList_Insert

>arduino-builderが2を返しました。
Error compiling for board Generic ESP8266 Module.

エラーコードをぐぐりましたが、何が起こっているのかさっぱり分からなかったので、ここは一旦1.8.10で開発を行いました。

購入した部品は以下の2点です。
[ESPr Door Sensor](https://www.switch-science.com/catalog/2741/)
[FTDI USBシリアル変換アダプター（5V/3.3V切り替え機能付き)](https://www.switch-science.com/catalog/1032/)


##エラー１：esptool.FatalError: Timed out waiting for packet headerと表示される
[こちらの記事](https://entotsu44.hatenablog.com/entry/2019/09/10/185345)によれば、アップロードスピードが合っていないと書かれています。
しかし、Arduinoメニューのツール>Upload Speedからは、一番早くても115200しか選べませんでした。これは、Arduino IDEに追加したボードのバージョンが原因のようです。
現時点で最新のバージョンは2.7.4ですが、それを一旦削除して、2.2.0をインストールし直しました。
これにより、アップロードスピードを落とすことができました。
（注：今回はエラー２まで解決した際には、アップロードスピードは115200でも書き込むことができたので、これが直接的な原因かどうかはわかりません）


##エラー2: warning: espcomm_sync failed, error: espcomm_open failed
今度は別のエラーが表示されました。
このエラーコードを検索すると、書き込みモードに変わっていないのが原因だという記事が沢山出てきます。

https://dev-moyashi.hatenablog.com/entry/2016/11/03/232938

ただしこれは、ESPr Developer（ESP-WROOM-02開発ボード）に関するもの。今回使用しているESPr Door SensorはそもそもRSTスイッチを有していません。またReset Methodについても、そもそもnodeMCUではなくckを選択するように記述されています。

どうすれば書き込めるのか分からない...と途方にくれて、思いつきで試してみたものが解決に繋がりました。

##ESPr Door Sensor本体も給電した状態で書き込みを行う
書き込みを行うFTDI USBシリアル変換アダプターだけでなく、ESPr Door Sensorにも5VでのUSB給電が必要でした。
参照していたスイッチサイエンスの記事にもこのようにきちんと書かれていました。

>FTDI USBシリアル変換アダプターからはESPr Door Sensorに給電しないようになっています。プログラムの書き換え時は基板本体の電源とFTDI USBシリアル変換アダプター用のMicro USBケーブルをご用意ください。

エラー2については、書き込みモードに切り替わっていないのが原因ではなく、給電が原因でした。
同じようなエラーが出た場合には、必ず両方にUSBケーブルを接続するようにして下さい。
emacs 使い方 (基本)



# 概要

emacs を使う上での基本的な操作方法のメモ


# 基本操作

-   C-z 一旦停止
-   C-x C-c 終了
-   C-g 操作の中止(困ったときはこれ)
-   C-x u 操作の取り消し


# 基本カーソル操作

-   C-f 一文字進む
-   C-b 一文字戻る
-   C-n 一行進む
-   C-p 一行戻る


# ファイル操作

-   C-x C-f ファイルを開く
-   C-x C-s ファイルを保存
-   C-x C-w 名前を付けて保存



------
 - **source** ~/grad_members_20f/members/FumiyaToyoda/emacs_howto.org
Ruby on Railsのインストールエラー2(`You don't have write permissions`、`Rails is not currently installed on this system.`)

([Ruby on Railsのインストールエラー(error reading '/dev/fd/9')](https://qiita.com/tanukiman/items/21cb07611e344fbe7f26)の続きです。)
しかし苦難はまだまだここからでした。
#壁１　`You don't have write permissions`
インストールを試みたところ、以下のメッセージが...

```
$ gem install rails -v "5.2.4.1"
ERROR:  While executing gem ... (Gem::FilePermissionError)
    You don't have write permissions for the /Library/Ruby/Gems/2.3.0 directory.
```

ここで、`You don't have write permissions`を検索してみたところ、
[gem installでpermissionエラーになった時の対応方法](https://qiita.com/nishina555/items/63ebd4a508a09c481150)
[Railsがインストールできないときの対応｜You don't have write permissionsとでてしまう](https://snownotes.org/you-dont-have-write-permissions/)
という記事があったので試してみたのですが、

```
$ which gem
/Users/ken/.rbenv/shims/gem
$ which ruby
/Users/ken/.rbenv/shims/ruby
```
パスは正常でした。
そして、

```
$ sudo gem install bundler
Fetching: bundler-2.2.3.gem (100%)
ERROR:  While executing gem ... (Gem::FilePermissionError)
    You don't have write permissions for the /Library/Ruby/Gems/2.3.0 directory.
```
スーパーユーザー権限での実行時にも同じエラーが出てしまいました。

ここでいろいろググり、いろいろ試しました。
うまくいったのが以下の操作でした。

```
$ rbenv global 2.6.6
```
これは、システム全体で使うrubyのバージョンを指定するコマンドとのことでした。(参考リンク[rbenv | global と local と .ruby-version の微妙な関係](https://qiita.com/Yinaura/items/0b021984bb21ae77816d))
そうすると、

```
$ gem install rails
Fetching activesupport-6.1.0.gem
Fetching rack-test-1.1.0.gem
Fetching i18n-1.8.5.gem
〜〜〜〜
(省略)
〜〜〜〜
Installing ri documentation for rails-6.1.0
Done installing documentation for concurrent-ruby, i18n, tzinfo, zeitwerk, activesupport, rack, rack-test, mini_portile2, nokogiri, crass, loofah, rails-html-sanitizer, rails-dom-testing, builder, erubi, actionview, actionpack, activemodel, activerecord, globalid, activejob, mini_mime, mail, actionmailer, nio4r, websocket-extensions, websocket-driver, actioncable, mimemagic, marcel, activestorage, actionmailbox, actiontext, thor, method_source, railties, sprockets, sprockets-rails, rails after 70 seconds
39 gems installed
```
ふう、苦労かけやがって。
しかし、さらなる苦難が待ち受けます...
#壁２　`Rails is not currently installed on this system.`
インストールしたrailsのバージョンを確認してみます。

```
$ rails -v
Rails is not currently installed on this system. To get the latest version, simply type:

    $ sudo gem install rails

You can then rerun your "rails" command.
```
ん？？？
`$ sudo gem install rails`はまさに直前に実行したコマンドです。
僕が親友によくやる「最近元気？」って聞いて「聞いてねえよ」で返すやつと同じですね。
こちらは[無限 Rails is not currently installed on this system. 問題の調査](https://qiita.com/amuyikam/items/313bc89c1de320a4257e)を参考に解決させていただきました。
実際の操作は以下となります。

```
$ hash rails
```
原因を簡潔にまとめると、以下のようになります。
・railsコマンドが２箇所に存在した。
・ハッシュテーブルにrailsコマンドが記録されてしまっていた。
・railsをインストールするPathとhashのPathが異なっていた。

ということで、再度railsのバージョンを確認してみると

```
$ rails --version
Rails 6.1.0
```
無事にインストールが確認できました。
というより、インストールはできていたんですね。

同じようにインストールで苦労されている方の参考になれば嬉しいです。
gitのログからパスワードを削除する（git-filter-repo）


# はじめに
「git filter-branch」を使用してパスワードを実行すると
WARNが発生し「[git-filter-repo](https://github.com/newren/git-filter-repo/)」が推奨されます

```
WARNING: git-filter-branch has a glut of gotchas generating mangled history
	 rewrites.  Hit Ctrl-C before proceeding to abort, then use an
	 alternative filtering tool such as 'git filter-repo'
	 (https://github.com/newren/git-filter-repo/) instead.  See the
	 filter-branch manual page for more details; to squelch this warning,
	 set FILTER_BRANCH_SQUELCH_WARNING=1.
```

「[git-filter-repo](https://github.com/newren/git-filter-repo/)」は「Git 2.24.0」より導入されました。

# インストール方法

## brew

```
brew install git-filter-repo
```
https://formulae.brew.sh/formula/git-filter-repo

## pip

```
pip install git-filter-repo
```
https://pypi.org/project/git-filter-repo/

## Windows
```
scoop install git-filter-repo
```

# パスワード変更方法
※例として「-f」を指定しているため注意してください
指定なし →「\*\*\*REMOVED***」へ変更される

```
 git filter-repo -f --replace-text  <(echo my_password)
```

「my_password」から「XXXXXXX」へ変更

```
git filter-repo -f --replace-text  <(echo “my_password==>XXXXXXX”)
```

正規表現で変更

```
### シングル
git filter-repo --replace-text <(echo 'regex:(password:).*==>\1******') 
### ダブル
git filter-repo --replace-text <(echo -e "regex:(password:).*==>\1******") 
```

# ログの確認

```
git log -p --ignore-space-change 
```

# テスト用ソース
```
git clone https://github.com/taku333/test-git-filter-repo.git
```


# 参考資料
* [Gitの履歴から名前とメールアドレスを一括変更 (git-filter-repo)](https://qiita.com/mosh/items/5dedf0c050c3387491e0)
* [「Git 2.24」公開、複数の新機能が導入される](https://mag.osdn.jp/19/11/07/171500)
* [To replace the text 'password' with 'p455w0rd':](https://github.com/newren/git-filter-repo/blob/e9e0308df1e9e792598b8e41d0086d7a785e9cc5/git-filter-repo#L1731)
* [How to substitute text from files in git history?](https://stackoverflow.com/questions/4110652/how-to-substitute-text-from-files-in-git-history)
* [git-filter-repo(1) Manual Page](https://htmlpreview.github.io/?https://github.com/newren/git-filter-repo/blob/docs/html/git-filter-repo.html)
[Swift] private(set)を簡単に説明

#private(set)とは
private(set)が定義されているクラスや構造体の中では変更できるが、

それ以外の場所では読み取りのみ行う事が出来ます。

privateだけの場合は、定義されている場所内では変更・読み取りできるが、

それ以外では変更も読み取りも出来ません。

private(set)は変更できないようにアクセス制限するが読み取りは可能でprivateより制限がゆるいという事です。

#使ってみた
private(set)の方はエラーにならず、読み取り出来ています。

```swift
class test {
    private var number1 = 0
    private(set) var number2 = 2
}

let Test = test()

class test2 {
    let a = Test.number1  //'number1' is inaccessible due to 'private' protection level
    let b = Test.number2
}
```
github, qiita



# github 共有

    git config --global core.editor emacs
    git pull origin main
    git add -A
    git commit -m 'hogehoge'
    git push origin main

-   git pull した後, push する前に他の人が git pull したら push に失敗するので注意
-   もしそうなったらもう一度 git pull すれば良い


# qiita check

    gem install qiita_org
    qiita config
    qiita config global access_token YOUR_TOKEN  //YOUR_TOKEN には自分の access_token を入力
    qiita post README.org public
    qiita post README.org private // 限定共有記事にしたい場合

qiita の version チェックは

    > qiita version
    0.1.35

qiita のコマンド一覧

    Commands:
    qiita all [teams/public/private] [options]    # post all org files in the directory
    qiita config [global/local] [option] [input]  # set config
    qiita get [qiita/teams] [ITEM_ID]             # get qiita report
    qiita help [COMMAND]                          # Describe available commands or one specific c...
    qiita list [qiita/teams]                      # view qiita report list
    qiita post [FILE] [private/public/teams]      # post to qiita from org
    qiita say_hello                               # say_hello
    qiita template                                # make template.org
    qiita upload [FILE] [teams/public/private]    # upload about image to qiita
    qiita version                                 # show version



------
 - **source** ~/grad_members_20f/members/djj31370/github_qiita.org
Amazon SageMaker Studio の基本機能

## はじめに
Amazon SageMaker Studio の環境を立ち上げたは良いけれど、Jupyter notebook を作成したり実行したりする以外に何ができるのかがよくわからない！と感じている方もいらっしゃるのではないでしょうか。
本記事では、Aamazon SageMaker Studio の基本的な機能をご紹介します。

## 左側にあるアイコンは何？
Amazon SageMaker Studio を開くと、左側にアイコンが表示されます。ここでは、それぞれの役割をご紹介します。
![スクリーンショット 2020-12-27 13.04.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315319/61b6221c-75d6-44d8-e39f-b690bf0117bf.png)

### ファイルブラウザ
フォルダやファイルの新規作成、ファイル一覧の表示、ファイルのアップロードなどが可能です。
![スクリーンショット 2020-12-27 13.10.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315319/5cbdf433-ab3d-6905-eb53-6b26f301b000.png)

### Git
Git リポジトリ の状態を確認することができます。ここから Git リポジトリに対する操作も可能です。
![スクリーンショット 2020-12-27 13.10.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315319/7f79b5fe-ce79-2e78-57e2-707782998fbd.png)

### 稼働中のターミナルとカーネル
ここでは、稼働中のインスタンス、ノートブック、ターミナルなどを確認できます。たとえば使用していないノートブックを選択して右側のアイコンをクリックすることでノートブックを shutdown することができます。
![スクリーンショット 2020-12-27 13.14.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315319/82d2e13c-00e1-41a6-986d-b741aaeeb675.png)

### コマンド一覧
各種コマンドをここから実行することが可能です。
![スクリーンショット 2020-12-27 13.18.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315319/5928a51d-859b-6ae3-1b2a-36467b067451.png)

### ノートブックの設定
ここでは、ノートブックの設定を確認、変更することができます。このアイコンは、ノートブックが開いている時のみ表示されます。
![スクリーンショット 2020-12-27 13.20.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315319/93987471-37be-853b-3c97-12223b43e43d.png)

### 開いているタブの一覧
ここでは、現在開いているタブの一覧を確認できます。たくさんタブを開いているときに便利です。
![スクリーンショット 2020-12-27 13.21.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315319/777e9b70-f439-36dd-eb4f-090cdccb4c21.png)

### SageMaker JumpStart
ここでは、Amazon SageMaker JumpStart のプロジェクト一覧を確認できます。SageMaker JumpStart は 1クリックでソリューションや学習済みモデルやサンプルノートブックを起動できる機能です。
![スクリーンショット 2020-12-27 13.22.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315319/40198fb0-f95b-fcb5-afbc-3c264e1485cb.png)

### SageMaker コンポーネントの一覧
ここでは、プロジェクト、SageMaker Data Wrangler のフロー、パイプライン、experiments とtrial、モデル、エンドポイント、 Feature Store などの SageMaker コンポーネントを確認することができます。
![スクリーンショット 2020-12-27 13.24.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315319/0c4d2828-ae96-47f4-c190-a281a2c4917f.png)

## 機械学習を楽にする便利機能
ここでは、Amazon SageMaker Studio を使って機械学習モデルを作成、学習、デプロイするにあたって便利な機能をご紹介します。
### データの前処理（Amazon SageMaker Data Wrangler）
https://qiita.com/mariohcat/items/a9503760944318ab4216

### モデルの学習
#### Amazon SageMaker Distributed Training で何ができるのか？（分散学習）
https://qiita.com/mariohcat/items/427f3f03676626835e07

#### Amazon SageMaker JumpStart でうちの猫を見分けるモデルを作ってみた
https://qiita.com/mariohcat/items/dab9ffaa5cf7189a0165

### デバッガ（Amazon SageMaker Debugger）
（準備中）
### モデルのバイアスの検出（Amazon SageMaker Clarify）
（準備中）
### モデルのデプロイ
（準備中）
### 自動シャットダウン
アイドル状態が続いたらカーネルを自動で停止させる拡張機能
https://github.com/aws-samples/sagemaker-studio-auto-shutdown-extension
Azureでテキストの感情分析（ネガポジ判定）をして遊ぶ

Azure Cognitive Servicesの機能の1つであるText Analytics API (v3.1-preview.1)で、文章のネガポジ判定をして遊びました。

詳細はこちらに書いています。
https://zenn.dev/ibaraki/articles/461543bf8351a5
ショートカットキー



# 基本

    M-: escキーを押した後
    C-: ctrlキーを押しながら


# 一旦停止 (suspend)

    C-z


# 終了 (kill emacs)

    C-x C-c


# 操作中止

    C-g


# 操作取り消し (undo)

    C-x u


# 領域選択 (mark set)

    C-space


# 編集操作

    C-d   // 1字消す(delete)
    C-k   // 1行消す(kill-line)
    C-w   // カット(kill-region)
    M-w   // コピー(copy-region)
    C-y   // ペースト(yank)
    C-s   // 検索(search-forward)


# カーソル移動

    C-a   // 行頭へ(ahead)
    C-e   // 行末へ(end)
    C-f   // 1字進む(forward)
    C-b   // 1字戻る(backward)
    C-n   // 1行進む(next) 
    C-p   // 1行戻る(previous)



------
 - **source** ~/grad_members_20f/members/djj31370/shortcutkey.org
UI Elementsを学習するときに参考にした記事

# UI Elementsを学習するときに参考にした記事

記事のリンク集です。個人的なまとめです。



## UI Elementsを学習する

### [Unity：UIElements の使い方（Unity2019新機能）](https://www.fast-system.jp/unity-uielements-howto/)

手順にしたがってすすめれば、お手軽にUI Elementsが体験できます。最初の一歩にオススメです。

### [Unity：UI Elements で共通コントロールを作成する](https://qiita.com/kingyo222/items/2330c5408783e9f8a912)

ボタンのようによく使う部品は共通化したくなるものですが。こちらの記事ではそういう部品の作り方を紹介しています！

## GraphViewを学習する

### [GraphView完全理解した(2019年末版)](https://qiita.com/ma_sh/items/7627a6151e849f5a0ede)]

こちらの手順にしたがってコーディングをするだけで、簡単なノードベースのツールが作成できました。
【cors】basic認証下のサブドメインの対してのリクエスト

Laravelで従来CORSのヘッダーを設定するには barryvdh/laravel-cors のパッケージが提供するミドルウェアがスタンダードだったらしいのですが、このパッケージは2019年末よりfruitcake/laravel-corsが導入されています。
またLaravel 7.X よりこのパッケージは初期テンプレートにバンドルされ、初期状態で利用可能になりました。

```Karnel.php
\Fruitcake\Cors\HandleCors::class
```
config/cors.phpで設定可能です。
## 問題

そして、
フロントエンド側のメインドメイン
https://example.comから

バックエンド側のサブドメイン ( basic認証あり )
https://api.example.com/api/register
に対してAPI (POST送信) を叩いた時corsに引っかかりました。甘かった。

```console.
Access to XMLHttpRequest at 'https://api.example.com/api/register?name=%sample&text=&smaple' from origin 'https://example.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
```

```RequestHeaders.
:authority: api.example.com
:method: OPTIONS
access-control-request-headers: authorization
access-control-request-method: POST
origin: https://example.com
```
同一オリジン下でのbasic認証有りの場合は、
HTTPリクエストの際にAuthorizationヘッダーに情報を付与することで、認証に成功するはずです。

しかしCORSに該当するリクエストで、単純なリクエストではない場合、
具体的には以下のいずれかに当てはまる場合プリフライトリクエストを送る。
・HTTPメソッドがGET, POST, HEAD以外
・HTTPヘッダにAccept, Accept-Language, Content-Language, Content-Type以外のフィールドが含まれる
・Content-Typeの値はapplication/x-www-form-urlencoded, multipart/form-data, text/plain以外

①ブラウザがプリフライトリクエストに変換し、HTTP の OPTIONS リクエストメソッドを用いて、送信(サーバーから対応するメソッドの一覧を収集すること)。

②プリフライトを飛ばしてしまうと、プリフライトリクエストには認証情報は乗らないので、プリフライトリクエスト自体がBASIC認証で弾かれる。

という現象に陥りました。

## 解決方法
今回のAPIは短期的に利用するものであったので、basic認証自体を解除しました。

####他に解決方法としては、
プリフライトが飛ばないようにリクエストを組む。
そのためには、js側でAuthorizationヘッダではなく、XMLHttpRequestのオプションでBASIC認証のIDとパスワードを指定します。withCredentials,trueのプロパティを追加する。
httaccess側では、
Access-Control-Allow-Credentials,trueを返す設定を追記するとのことでした。
【GAS】GASにcurlでPOSTしてjsonを送ろうとしたらエラーが出たのでメモ

どうも。
今日はGASにPOSTでjson送ろうとしたらエラーが出てそれにはまってしまったのでメモ。

ソース

```main.php
			$url = "GASのりんく";
			$ch = curl_init($url);
			curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json'));
			curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'POST');
			curl_setopt($ch, CURLOPT_POSTFIELDS, $senddata_json);
			curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
			curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
			curl_setopt($ch, CURLOPT_URL, 'GASのリンク');
			$result = curl_exec($ch);
			var_dump($result);
			var_dump(curl_error($ch));
			curl_close($ch);
```

phpで書かれた案内フォームの内容をjsonに変換しようとしたのだがresultがずっとFALSE。

## 原因を探る

```sample
var_dump(curl_error($ch));
```

これを書くことによって何がダメだったのかを出すことができます。
結果このようなエラーが出てきました。

```sample
string(63) "SSL certificate problem: unable to get local issuer certificate"
```

要はHTTPS通信しようとしたのにCA認証に使う証明書がないと言っている。

## 解決方法
### ①証明書の検証を行わない
以下の構文を書くことで検証を行わず、エラーが起きることを防止できます。

```sample
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false); 
```

俺σ(ﾟ∀ﾟ )ｵﾚ証明書対策もできるらしいですが詳細は省かせていただきます。

### 証明書を導入する
https://curl.se/ より最新の証明書をダウンロードします。
そこからダウンロードしたcacert.pemを適当な場所において以下の通りに記述します。

```php.ini
[curl]
; A default value for the CURLOPT_CAINFO option. This is required to be an
; absolute path.
;curl.cainfo = 
```

;curl.cainfo= の部分がコメントアウトされていますがそれを外し、証明書の**絶対パス**を記入します。

## おわり
これで解決すると思われます。
このエラーで5時間ほど悩みましたがなんとか解決。
見てくれてありがとう。
[jQuery] slickでスライドショー設置手順

トップページのメイン画像のスライドなどでよく使われるjQueryのプラグインのslickの導入手順メモ。
レスポンシブ対応。


完成イメージ
<img width="400" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/825124/e944fa0b-32a3-f73c-7648-6530fa6571f7.png">

# ①slickの導入
※jQuery本体は別途使える状態にしておいてください。

- [公式サイト](http://kenwheeler.github.io/slick/#go-get-it)のDoenload NowをクリックしてDL
- 以下4ファイルを格納し読み込む(slickディレクトリを挟むかはどちらでも可)



css/
┗ slick/
　　┗ `fonts/`
　　┗ `slick-theme.css`
　　┗ `slick.css`

js/
┗ slick/
　　┗ `slick.min.js`

```html
<head>
    <!-- slick -->
    <link rel="stylesheet" href="css/slick/slick.css">
    <link rel="stylesheet" href="css/slick/slick-theme.css">
    <!-- style (上書きするのでstyle.cssは一番下で読み込む)-->
    <link rel="stylesheet" href="css/style.css">
</head>
    <!-- jQuery -->
    <script src="js/jquery-3.5.1.min.js"></script>
    <!-- slick -->
    <script src="js/slick/slick.min.js"></script>

<body>

</body>
```


# ソースコード

### html
画像を親要素で囲えていればOK(今回はmvSlider部分のこと)

```html
<ul class="mvSlider">
    <li class="mvSlider__itm"><img class="mvSlider__img" src="img/photo--1.jpg"></li>
    <li class="mvSlider__itm"><img class="mvSlider__img" src="img/photo--3.jpg"></li>
    <li class="mvSlider__itm"><img class="mvSlider__img" src="img/photo--4.jpg"></li>
</ul>
```


### jQuery

ミニマム

```javascript
<script>
$(function ()
{
    $(".mvSlider").slick();
});
</script>
```

オプションあり(ミニマムに追加)

```javascript
<script>
$(function ()
{
    $(".mvSlider").slick({
        arrows: false, //左右の矢印ボタン非表示
        dots: true, //画像下のドット表示
        fade: true, //スライド方法を、フェードインにする (これ書かないとただのスライド)
        autoplay: true, //自動スライドオン
        autoplaySpeed: 2000, //1枚の画像の表示時間 (2秒後にスライド開始)
        speed: 1500, //次のスライドに切り替わるまでの秒数 (短いと必然的にスライド速度が上がる)

    });
});
</script>
```

### css
jQueryの記述が完了すると自動的にhtmlとcss構造がアレンジされる。
`jQueryで呼び出してるclassがたくさん書かれている`のでそのセレクタを`上書きしてスタイルを整える`。

```css
/* スライド画像どうしをぴったりくっつける */
.slick-slide img {width: 100%;}

/* ドット */
.slick-dots li button:before{
    font-size: 1.5rem; /* 大きさ調整 */
    opacity: 1; /* 初期は.25で透過されているので戻す(必要であれば) */
    color: grey; /* 色 */
}

/* ドット(アクティブなスライドの) */
.slick-dots li.slick-active button:before{
    color: red;
}
```
# カスタマイズメモ
よりカスタマイズしたい場合は以下参考です。

[東京ホームページ制作 BRISK slickの使い方からカスタマイズまで【スライダープラグイン決定版】](https://b-risk.jp/blog/2020/01/slick-customize/)
[slick.jsでカルーセルスライダーを実装＆カスタマイズしてみるデモページ](https://ponsyon.com/demo-slick.html)
おひとり様AWSでのリソース掃除Tips（ただのメモ）

個人で勉強していると、時々ゴミが残ってたりする

AWS Configである程度確認する

#### S3のバケット強制削除

```
$ aws s3 ls | cut -d' ' -f 3 | xargs -I{} aws s3 rb s3://{} --force
```
PythonでPowerPointからテキストを抽出する！（テーブルにも対応）

##この記事について

会議の議事録などをメールで送る場合、スライドの文字だけ欲しい場合があったので、ちょっとコードを書いてみました。テーブルの文字を抜き出すのが若干手間でした。

##準備したPowerPointサンプルファイル (sampleFile.pptx として同じフォルダに入れておく）
![スクリーンショット 2020-12-29 195938.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/823476/092c6df6-e43b-1773-21ef-463ce90c2a82.png)

##結果

```
File name:  sampleFile.pptx 

-- Page 1 --
タイトルです

サブタイトルです

-- Page 2 --
２ページ目です。
テキストボックスです♪

果物, 八百屋さんA, スーパーB, 
バナナ, 100円, 200円, 
リンゴ, 150円, 140円, 

テーブルのサンプル
```

##コード

```python

import pptx
from glob import glob

for fname in glob ('*.pptx'):
    print ('File name: ', fname, '\n')
    prs = pptx.Presentation(fname)

    for i, sld in enumerate(prs.slides, start=1):

        print(f'-- Page {i} --')

        for shp in sld.shapes:
            
            if shp.has_text_frame:
                print (shp.text.replace('\n', ''))

            if shp.has_table:
                tbl = shp.table
                row_count = len(tbl.rows)
                col_count = len(tbl.columns)
                for r in range(0, row_count):                 
                    text=''
                    for c in range(0, col_count):
                        cell = tbl.cell(r,c)
                        paragraphs = cell.text_frame.paragraphs 
                        for paragraph in paragraphs:
                            for run in paragraph.runs:
                                text+=run.text.replace('\n', '')
                            text+=', '
                    print (text)
            print ()
```

同じフォルダに入っているpptxの拡張子が入っているファイルすべてのテキストを抽出します。

##　参考

Powerpoint（pptx）の表をスクレイピング
https://qiita.com/barobaro/items/a3a4a00aeda9d19e41b6

PDF・Word・PowerPoint・Excelファイルからテキスト部分を一括抽出するメソッド
https://qiita.com/barobaro/items/a3a4a00aeda9d19e41b6


#### 2023/5/16
textの改行を省くよう、replace('\n', '')を追加しました。