OmniAICreator/Qiita-1.07M huggingface dataset:
(neo)Vim Plugin開発で別ファイルにクラスを定義する

久々にVimをやっています．
(実際はNeovim v0.4.4で開発をしています．Vimでは違う動作をしてしまうなどありましたら教えてください)

さて，Vimにはクラスは無いので連想配列やら関数やらを組み合わせてどうにかします．

参考

https://qiita.com/machakann/items/8010f552b48c771ce52f

https://yossan.hatenablog.com/entry/2020/08/04/004734


今回，Vim Pluginを書いているときにStackというデータ構造を使いたくなったのですが，Vimの標準の機能にはなさそうです．
そこで，`autoload`下にて別ファイルにStackクラス(のようなもの)を作りたくなりました．
しかし，Vimscript特有のスコープや`autoload`下のファイルの関数に書く必要があるプレフィックスのことなどがごっちゃになって詰まったので，ここにメモとして残しておきます．

```vim
" メンバやメソッドが入る辞書
let s:Stack = {'vals': []}
" コンストラクタ
function! stack#Stack() abort
  return deepcopy(s:Stack)
endfunction

" メソッド
function! s:Stack.push(val) abort
  call add(self.vals, a:val)
endfunction

function! s:Stack.pop() abort
  call remove(self.vals, len(self.vals)-1)
endfunction

function! s:Stack.top() abort
  return self.vals[len(self.vals)-1]
endfunction
```

そう，メソッドは`stack#`をプレフィックスにする必要はなさげなんですよね．

呼び出し側

```vim
let s:stack = stack#Stack()
```

ただ，これでは`stack`というプラグインがあるように見えるので，`autoload/myplugin`みたいなディレクトリを作って，その中にファイルを置いて`myplugin#stack#Stack`で呼び出せるようにすると良さげな気がします．
実際，例えばShougoさんの[dein.vim](https://github.com/Shougo/dein.vim)ではそういう工夫がされているように見えます．

もっと良い書き方やご指摘あればコメントなどで教えてください:bow:
【Rails】ActiveRecord::PendingMigrationError (Migrations are pending. To resolve this issue, run:rails db:migrate RAILS_ENV=development):の対処法

<h2>症状</h2>
gitからアプリを新しいPCにpullして、Railsサーバーを起動してフロント側から動かそうとしたところ下記のエラーメッセージが表示されました。
翻訳すると、「移行は保留中です。この問題を解決するには、次のコマンドを実行します。rails db：migrate RAILS_ENV = development」になりました。

```terminal:error
ActiveRecord::PendingMigrationError (

Migrations are pending. To resolve this issue, run:

        rails db:migrate RAILS_ENV=development

):
  
activerecord (6.0.4.1) lib/active_record/migration.rb:586:in `check_pending!'
activerecord (6.0.4.1) lib/active_record/migration.rb:564:in `call'
actionpack (6.0.4.1) lib/action_dispatch/middleware/callbacks.rb:27:in `block in call'
activesupport (6.0.4.1) lib/active_support/callbacks.rb:101:in `run_callbacks'
actionpack (6.0.4.1) lib/action_dispatch/middleware/callbacks.rb:26:in `call'
actionpack (6.0.4.1) lib/action_dispatch/middleware/executor.rb:14:in `call'
actionpack (6.0.4.1) lib/action_dispatch/middleware/actionable_exceptions.rb:18:in `call'       
actionpack (6.0.4.1) lib/action_dispatch/middleware/debug_exceptions.rb:32:in `call'
actionpack (6.0.4.1) lib/action_dispatch/middleware/show_exceptions.rb:33:in `call'
railties (6.0.4.1) lib/rails/rack/logger.rb:37:in `call_app'
railties (6.0.4.1) lib/rails/rack/logger.rb:26:in `block in call'
activesupport (6.0.4.1) lib/active_support/tagged_logging.rb:80:in `block in tagged'
activesupport (6.0.4.1) lib/active_support/tagged_logging.rb:28:in `tagged'
activesupport (6.0.4.1) lib/active_support/tagged_logging.rb:80:in `tagged'
railties (6.0.4.1) lib/rails/rack/logger.rb:26:in `call'
actionpack (6.0.4.1) lib/action_dispatch/middleware/remote_ip.rb:81:in `call'
actionpack (6.0.4.1) lib/action_dispatch/middleware/request_id.rb:27:in `call'
rack (2.2.3) lib/rack/runtime.rb:22:in `call'
activesupport (6.0.4.1) lib/active_support/cache/strategy/local_cache_middleware.rb:29:in `call'
actionpack (6.0.4.1) lib/action_dispatch/middleware/executor.rb:14:in `call'
actionpack (6.0.4.1) lib/action_dispatch/middleware/static.rb:126:in `call'
rack (2.2.3) lib/rack/sendfile.rb:110:in `call'
actionpack (6.0.4.1) lib/action_dispatch/middleware/host_authorization.rb:82:in `call'
rack-cors (1.1.1) lib/rack/cors.rb:100:in `call'
railties (6.0.4.1) lib/rails/engine.rb:527:in `call'
puma (4.3.8) lib/puma/configuration.rb:228:in `call'
puma (4.3.8) lib/puma/server.rb:718:in `handle_request'
puma (4.3.8) lib/puma/server.rb:472:in `process_client'
puma (4.3.8) lib/puma/server.rb:328:in `block in run'
puma (4.3.8) lib/puma/thread_pool.rb:134:in `block in spawn_thread'
```

<h2>解決策</h2>
メッセージ通りに「rails db:migrate RAILS_ENV=development」を実行したら、railsサーバーが正常に動作するようになりました。
なお、rails db:migrateだけだと、エラーが発生してしまいました。環境をしていしないと、railsさんも困ってしまうようです。

```terminal:fix
 rails db:migrate RAILS_ENV=development
```
【npm】run `npm audit fix` to fix them, or `npm audit` for detailsの対処法

<h2>症状</h2>
npmstartを実行としたところ、

https://qiita.com/GalaxyNeko/items/1d3b022fbf17aca2b0ac

上記のように起こられたので、npminstallを実行したところ、下記メッセージが表示されました。

翻訳すると「397の脆弱性が見つかりました（391中程度、6高）`npm audit fix`を実行して修正するか、` npmaudit`を実行して詳細を確認してください」でした。脆弱性多すぎ。。。

```terminal:error
found 397 vulnerabilities (391 moderate, 6 high)
  run `npm audit fix` to fix them, or `npm audit` for details
```

(問題のあるパッケージを洗い出すnpm auditを実行したところ、量が多すぎてterminalの表示しきれなくなってしまいました。。。)

<h2>解決方法</h2>
npm audit fixを実行することでエラーが解消し、npmstartが実行できるようになりました。
ちなみに、audit fixはnode_modulesの脆弱性を自動的に修復してくれる呪文のようです。ありがたや

```terminal:auditfix
npm audit fix
```

<h2>参考</h2>

https://kossy-web-engineer.hatenablog.com/entry/2018/12/15/130312

https://qiita.com/hibikikudo/items/0af352acac85fce28ec2

https://qiita.com/GalaxyNeko/items/1d3b022fbf17aca2b0ac
iOSでリストのドラッグ&ドロップと長押しによるコンテキストメニューの表示は同時に実装しても競合しない

## ドラッグ&ドロップでの並べ替えと長押しによるコンテキストは共存できるのか :thinking: 

iOSでは最近、リストUIでアイテムをドラッグ&ドロップで並べ替えるようなUIが流行っていますよね。
`UITableView` や `UICollectionView` では `dragInteractionEnabled` `dragDelegate` `dropDelegate` をそれぞれ実装することで、ドラッグ&ドロップ時のアクションを追加することができます。

一方でiOS 13からは長押しでコンテキストメニューを表示させることができるようになりました。
これは `UITableViewDelegate` の `tableView(_:contextMenuConfigurationForRowAt:point:)` メソッドを使うと実装することができます。
このdelegateメソッドを実装するだけで、アイテムの長押しでコンテキストメニューを表示させることができます。

この2つはAPIとしても完全に独立しており、同時に実装することが可能です。
ではその場合、機能の共存は可能なのでしょうか:question: 

## 結論: 共存可能 :earth_africa: 

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17214/1b716733-de72-d89b-3a67-e5807ebdca78.gif" width="320">

そこで[適当なUITableViewを使ったコードで実装してみた](https://gist.github.com/imaizume/bd37a90ff35f74e7ccb6e50a02684cfd)ところ、 **2つの機能は共存可能なようでした。**
動作としては上の画像の通りで

- **長押しするとコンテキストメニューが表示される**
- **そこから一定距離をドラッグするとドラッグ&ドロップのジェスチャーに切り替わる**

という感じになるようです。
意外と情報がなかったのでメモです。

## 参考資料

- [tableView\(\_:contextMenuConfigurationForRowAt:point:\) \| Apple Developer Documentation](https://developer.apple.com/documentation/uikit/uitableviewdelegate/3295956-tableview)
- [UITableViewのdragDelegate, dropDelegateについて調べて試した \| DevelopersIO](https://dev.classmethod.jp/articles/uitableview-dragdelegate-dropdelegate1/)
【CSS】よく使うセレクターをまとめてみた

# はじめに
開発現場でよく使うCSSのセレクターをまとめてみました。随時追加していく予定です。


## タイプセレクター

```html:html
 <div>こちらはdivタグです。</div>
```

```css:css
div {
  color: red;
}
```
* カンマ区切りでも使える

```css:css
div, p {
  color: red;
}
```
## classによるセレクター

```html:html
 <p class="ptag">こちらpタグです。</p>
```

```css:css
.ptag{
  background-color: gold;
}
```

## idによるセレクター
```html:html
 <p id="ptag">こちらpタグです。</p>
```

```css:css
#ptag{
  background-color: gold;
}
```

## ユニバーサルセレクター
```css:css
* {
  color: blue;
}

```

## 属性によるセレクター
指定した属性によるセレクター

```html:html
<a href="https://www.kddi.com/">KDDI</a>
```

```css:css
a[href]{
  color: green;
}
```

## 部分文字列一致セレクター

### 全文一致
 
```html:html
<a href="https://www.kddi.com/">KDDI</a>
```

```css:css
a[href="https://www.kddi.com/"]{
  color: green;
}
```

### 前文部分一致
*  前文部分一致させる場合は、^を使う
     
```html:html
<a href="https://www.kddi.com/">KDDI</a>
```
```css:css
a[href^="https://www."]{
  color: green;
}
```

### 後文部分一致
* 後文部分一致させる場合は、$を使う 

```html:html
<a href="https://www.kddi.com/">KDDI</a>
```
```css:css
a[href$="com/"]{
  color: green;
}
```

### 指定の文字を含む場合のみ

*  指定の文字の場合は、*を使う

```html:html
<a href="https://www.kddi.com/">KDDI</a>
```
```css:css
a[href*="kddi"]{
  color: green;
}
```

## 擬似クラス及び疑似要素によるセレクター

### 最初の要素を選択する```first-of-type```

```html:html
    <article>
      <h1>h1タグです</h1>
      <p>１番目</p>
      <p>2番目</p>
      <p>3番目</p>
    </article>
```

```css:css
article p:first-of-type{
  color: red;
}
```

### 最後の要素を選択する　```last-of-type```

```html:html
    <article>
      <h1>h1タグです</h1>
      <p>１番目</p>
      <p>2番目</p>
      <p>3番目</p>
    </article>
```

```css:css
article p:last-of-type{
  color: red;
}
```

### 好きな順番の要素を選択する```nth-of-type()```

```html:html
    <article>
      <h1>h1タグです</h1>
      <p>１番目</p>
      <p>2番目</p>
      <p>3番目</p>
    </article>
```
* ２番目を選択する場合

```css:css
article p:nth-of-type(2){　
  color: red;
}
```

### 最初以外を選択する場合```:not(:first-of-type)```

```html:html
    <article>
      <h1>h1タグです</h1>
      <p>１番目</p>
      <p>2番目</p>
      <p>3番目</p>
    </article>
```

```css:css
article p:not(:first-of-type){
  color: red;
}
```

### 選択したときの色を変更させる```hover```

```html:html
    <article>
      <h1>h1タグです</h1>
      <p>１番目</p>
      <p>2番目</p>
      <p>3番目</p>
    </article>
```

```css:css
p:hover{
  background-color: pink;
}
```
headlessui の Modal Dialog で画面が右にずれる

tailwindcssを使っているとheadlessuiやtailwinduiなどのComponentテンプレートを使うと思う。Modalを表示した時に元の画面が裏でスクロールするのを防ぐため下記のCSSが`<html>`タグに付与される。

```
overflow: hidden; padding-right: 15px;
```

これは右側のスクロールバーが消えるため、そのレイアウト崩れをさせないために15pxのpaddingを取っているのだが、上部固定のheaderなどを`position: fixed; text-align: center;`で設定していると（fixedはwindowに対しての絶対位置で指定するため）中央の位置が若干右にずれて、Modal表示時にカクッとなってしまう。

MaterialUIであれば`scrollLock={false}`のような設定ができるが、そもそも背面のViewのスクロールをロックするというのはUX的には正しい挙動だと思うので、CSSで頑張る。

結論、tailwindcssを使っているなら、headerに`px-2`(`padding-left: 15px; padding-right: 15px;`)を指定してやっておけば最初の位置からずれないので解決する。
【npm】Local package.json exists, but node_modules missing, did you mean to install?の対処法

<h2>症状</h2>
npmstartをしたところ下記のエラーメッセージが表示されました。
warnを翻訳したところ、「ローカルのpackage.jsonは存在しますが、node_modulesがありません。インストールするつもりでしたか？」となりました。

```terminal:error
 npm start

> frontend@0.1.0 start D:\mogumogu\frontend
> react-scripts start

'react-scripts' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
npm ERR! errno 1
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the frontend@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.    
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\natum\AppData\Roaming\npm-cache\_logs\2021-09-03T09_06_24_971Z-debug.log   
```

<h2>解決策</h2>
npminstallしたら、エラーが表示されなくなりました。
参考にしたサイトによると、「npm installはpackage.jsonに記述されている依存パッケージを自動でインストールしてくれる」らしいです。

```terminal:npminstall
npm install
```

<h2>参考</h2>

https://teratail.com/questions/212621
未経験入社一ヶ月を終えて

#近況報告
今日で入社して約一ヶ月が過ぎました。そのため、ここで短めですが現状の振り返りまとめておこうと思いました。

今の会社に入社して、ほんとに多くのことを学べているなと思いました。他の会社が未経験で入社した際にどのくらい学べるのかは分かりませんが、多分他の会社に比べても幅広い事を学べており、恵まれた環境だな思います。
フロントエンド側では、入社しJavaScriptの復習から始まり、Reactの基礎やルーティング。また、Netlifyを使って実際に簡単なアプリを作り、それを公開する流れを学びました。
バックエンド側を初めて使った学習は、ExpressやSequelizeを使ってのAPIサーバーの開発やAuth0によるユーザー認証機能の追加、またAWS Amplifyを使ってのアプリ開発など学びました。今まで、フロント側だけを学習で触ってきた自分からしたら、ここでのサーバーに関する記述など半分以上何を書いているのか分からず、呪文のように見えてしまい、学習しながらバックエンドをメインで開発している方はすごいなぁーと改めて思いました。

ここ一ヶ月で、Web開発に必要な基礎を幅広く学べているなと思いますが、逆に幅広く学び過ぎて取得できている知識が浅いかもしれないと学習しながら感じました。自分でも未経験なのでとりあえず色々なことをやってみたい、というのはあるのですが実際にまだ業務には携わっていない為、今まで学んできたことがちゃんと活かせるのか、以前学んだことが新しい事を学ぶことによって忘れていないか、など不安なことが多々あります。
しかし、今から不安に思っていても仕方ないですし未経験なんてそんなもんだな、と言い聞かせてとりあえず目の前のできることをやろうと思います。
来週から会社での合宿があるので、とりあえずその合宿で多くのことを学べたらと思います。
【iOS】FirebaseのDynamic Linksからディープリンクを受け取る

# どういうことか

Dynamic Linksの設定方法は省く。
設定したURLをXcode側で対応してアプリで受け取りたい。

ここではDynamic Linksで `SampleAppDynamicLinks.page.link` というURL接頭辞を設定したという想定で書く。

## ドメインを許可する

### Entitlementの追記

1. まず**.xcodeproj**ファイルを選択、左側の**TARGET**から該当のアプリを選択
2. 上部タブの**Singing & Capabilities**を選択
3. 上部タブすぐ下の**+ Capability**を押す。**Associated Domains**を選択
4. Associated Domainsの**Domains**の+ボタンを押して `applinks:SampleAppDynamicLinks.page.link` を記入
5. Apple Developerのサイトにログインし、**Certificates, Identifiers & Profiles > Identifiers > 該当のアプリ**を選択。ページ内で**Associated Domains**にチェックを入れてSave

### info.plistの追記

1. +ボタンを押して**URL Types**を追加
2. URL Typesで+ボタンを押す。**item 0**の中に**URL identifier**というKeyがある。Valueに `link.page.SampleAppDynamicLinks.app.schemes` と記入
3. URL identifier+ボタンを押す。追加したKeyは `URL Schemes` を選択。追加された**item 0**のValueに `SampleAppDynamicLinks` を記入

## ライブラリのインストール

Podfileに追記

```
pod 'Firebase/Analytics'
pod 'Firebase/DynamicLinks'
```

```terminal
$ pod install
```

## URLを受け取る

```AppDelegate.swift
// 公式ドキュメントでは import Firebase と書いてあるが FirebaseDynamicLinks と書かないとエラーになった
import FirebaseDynamicLinks

    // 中略

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        
        FirebaseApp.configure()

        // 中略
    }

    // DynamicLinkのハンドリング
    func application(_ application: UIApplication, continue userActivity: NSUserActivity,
                     restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
        
        let handled = DynamicLinks.dynamicLinks().handleUniversalLink(userActivity.webpageURL!) { (dynamiclink, error) in
            
            // Dynamic Linksで設定したディープリンクを受け取る
            guard let deepLink = dynamiclink?.url else { return }
            
            // 受け取ったディープリンクを使ってなにかする処理を書く
        }
        return handled
    }
```

おわり(´・ω・｀)
並行処理テスト

# Reference
https://docs.spring.io/spring-batch/docs/current/reference/html/scalability.html(英語)
https://jojoldu.tistory.com/331 chunck指向処理(韓国語)
https://stackoverflow.com/questions/46452527/difference-between-chunk-size-and-page-size-spring-batch

# breakdown options
- there are two modes of parallel processing:
    - Single process, multi-threaded
    - Multi-process
- These break down into categories as well, as follows:
    - Multi-threaded Step (single process)
    - Parallel Steps (single process)
    - Remote Chunking of Step (multi process)
    - Partitioning a Step (single or multi process)

#ItemReader
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209211/b46c60e9-0689-bc80-4792-22e4f995d645.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209211/79ebac33-3e01-d997-b2f6-e6af4ac8a069.png)
※https://jojoldu.tistory.com/331から/問題あれば削除

Chunk Size는 한번에 처리될 트랜잭션 단위를 얘기하며, Page Size는 한번에 조회할 Item의 양
Chunk Sizeは一度処理されるトランザクション単位で、
Page Sizeは一回照会するItemの量

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209211/7d261e47-7e93-2d78-8e59-a455e1f343bd.png)
※https://jojoldu.tistory.com/331から/問題あれば削除


Sample?

JobBuilderFactory
stepBuilderFactory
??Tasklet?

Scheduled cron>


@Bean 
public Step ~~Step(){
return stepBuilderFactory
          .get("~Step")
          .tasklet(~Service)
          .build();
};

@Bean
public Job processJob(){
return jobBuilderFactory.get("").
   .incrementer(new RunIdIncrementer)
   .start(~~Step())
   .build();
}
※https://jojoldu.tistory.com/331#:~:text=Chunk%20Size%EB%8A%94%20%ED%95%9C%EB%B2%88%EC%97%90%20%EC%B2%98%EB%A6%AC,%EC%9D%98%20%EC%96%91%EC%9D%84%20%EC%96%98%EA%B8%B0%ED%95%A9%EB%8B%88%EB%8B%A4.
Ubuntu20.04LTS(WSL2)にPostgreSQLをインストールする

[初投稿]
Ubuntu20.04(WSL2)上にPostgreSQL13をインストールしたので備忘録。

WSL2にアップデートした状態で、
https://www.postgresql.org/download/linux/ubuntu/

```sh
# Create the file repository configuration:
sudo sh -c 'echo "deb http://apt.postgresql.org/pub/repos/apt $(lsb_release -cs)-pgdg main" > /etc/apt/sources.list.d/pgdg.list'

# Import the repository signing key:
wget --quiet -O - https://www.postgresql.org/media/keys/ACCC4CF8.asc | sudo apt-key add -

# Update the package lists:
sudo apt-get update

# Install the latest version of PostgreSQL.
# If you want a specific version, use 'postgresql-12' or similar instead of 'postgresql':
sudo apt-get -y install postgresql
```
をコメントアウトされてない部分を上から順に実行します。
次に
```sudo -u postgres psql
```を入力して、
```postgres=#
```↑の状態にコマンドラインが切り替わったらPostgreSQLのユーザー作成をします。

```create role username with createdb login password 'password';
```username,passwordは任意です。passwordを括っているシングルクォートも忘れずに。また、メモ帳などに記録を忘れないようにしましょう、Ruby on rails でも何でも、DBの設定で使います。
完了したら``` postgres=# \du ```と入力してユーザー登録できているか確認しましょう。

ひとまず、PostgreSQLの立ち上げ方法だけ記録です。Ruby on rails で使う場合の記録なども随時投稿し、修正も適宜していきます。
CICD Conferenceに参加してきた

##背景
CICDに関して大型なイベントがやっていると聞き、聴講することにした。
タイムテーブルはこんな感じ

https://event.cloudnativedays.jp/cicd2021/timetables

##聞いた講義

|時間帯|講義名|
|---|---|
|13:55~14:35|State of DevOps Report 2020/2021から見るCI/CDの始め方|
|14:45~15:25|現場に合わせて考えたパイプラインのデザインパターン|
|15:35~16:15|GitHub Actionで構築するAndroidアプリのCI/CD|
|16:25~17:05|Helm/ArgoCDで実現するKubernetesにおける宣言的リソースデリバリーの実践|
|18:05~18:45|プログラミング言語RubyのCIの裏側|

##発表資料まとめ
公式が出しているものとTwitterで流れてきたものをまとめてみた。（自分が気になってまとめられたものだけ）

- [デプロイメントパイプラインの原理原則を確認する](https://speakerdeck.com/takaichi00/confirm-deployment-pipeline-principle)
- [State of DevOps Report 2020/2021から見るCI/CDの始め方](https://speakerdeck.com/kurumai/cdfalseshi-mefang)
- 現場に合わせて考えたパイプラインのデザインパターン ※更新され次第追記します
- [Helm/ArgoCDで実現するKubernetesにおける宣言的リソースデリバリーの実践](https://speakerdeck.com/sshota0809/argocd-teshi-xian-suru-kubernetes-niokeruxuan-yan-de-risosuteriharifalseshi-jian)
- [CyberAgentにおけるOSSのCI/CD基盤開発](https://speakerdeck.com/nghialv/pipecd-at-cyberagent)
- [プログラミング言語RubyのCIの裏側](https://www.slideshare.net/hsbt/the-details-of-cicd-environment-for-ruby)

##印象に残った講義
- 現場に合わせて考えたパイプラインのデザインパターン
パイプラインデザインパターンは5つあり、個々のケースに応じて当てはめるのが良いと話されていました。
資料がどこにあるのか分からないので復習できないのですが、公開されたら復習します。

- Helm/ArgoCDで実現するKubernetesにおける宣言的リソースデリバリーの実践
HelmとArgoCDを知っている前提で話が進む（そうはいっても定義くらいはさらっと復習してくれる）ので、ある程度知っていないと難易度が高いなと思いましたが、どういった場合に使用するだとか、具体的にどう使っているのかなどの説明がとても丁寧だったので、聞きやすかったです。

##感想
ディスカッションボードとしてmiroを採用して参加者がフラットに書き込みができるUIを作ったのは、とても革新的だなと思いました。

https://event.cloudnativedays.jp/cicd2021/discussion

他のイベントでもこういう手法が出てきて欲しい！
運営者の方々、開催いただきありがとうございました！
ETHのガス(GAS)送金手数料 計算ページを作りました

GAS代高いですね。

![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25728/e2d09173-9e49-792d-882e-17082ccfa144.png)

https://heuristic-noether-2f83ac.netlify.app/
【TypeScript】as const（const アサーション） を理解する

# as const（const アサーション） とは
- 全ての値を``readonly``（読み取り専用、変更不可）にするアサーション。
- ネストしたオブジェクトに対しても``readonly``（読み取り専用、変更不可）にしてくれる
- widening も抑止してくれる

● アサーションの参考資料

- https://e-words.jp/w/%E3%82%A2%E3%82%B5%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3.html
- https://typescript-jp.gitbook.io/deep-dive/type-system/type-assertion



# as const を使ってみる

### オブジェクトで

値を変更しようとすると、
``Cannot assign to 'first' because it is a read-only property.``
「``first``は読み取り専用だから、適用できないよ」と怒られる。

```ts
const sampleObj = {
  first: '最初',
  second: '２番目',
  third: '３番目',
  fourth: '４番目',
} as const

sampleObj.first = 'さいしょ' // Cannot assign to 'first' because it is a read-only property.
```

``as const``をコメントアウトすれば怒られない。

```ts
const sampleObj = {
  first: '最初',
  second: '２番目',
  third: '３番目',
  fourth: '４番目',
} // as const

sampleObj.first = 'さいしょ'
```

### 配列で
配列でも同様。

値を変更しようとすると、
``Cannot assign to '3' because it is a read-only property.``
「``3``は読み取り専用だから、適用できないよ」と怒られる。

```ts
const sampleArr = ['最初', '２番目', '３番目', '４番目'] as const

sampleArr[3] = 'フォース' //  Cannot assign to '3' because it is a read-only property.
```

``as const``をコメントアウトすれば怒られない。

```ts
const sampleArr = ['最初', '２番目', '３番目', '４番目'] // as const

sampleArr[3] = 'フォース'
```

# 最後に
ありがとうございました！！

- https://chaika.hatenablog.com/entry/2020/08/28/083000
- https://qiita.com/Takepepe/items/f39c249ed31e546ecb7c
【Draft.js】ContentBlock

# ContentBlockとは
- HTMLのブロック要素に対応する要素
- `ContentState` の `blocks` にブロックの数分格納されている  
※ ContentStateについては [こちらの記事](https://qiita.com/y-hira18/items/1acf13d44a71c5d8fd36) に記載

## ContentBlockに格納される情報
### key
- ContentBlockの識別のためのキー
- `key` の生成には `generateRandomKey` を使用する

### type
- ブロック要素の種類
  - デフォルトで用意されている `type` は下記の通り
      - unstyled
      - paragraph
      - header-one
      - header-two
      - header-three
      - header-four
      - header-five
      - header-six
      - unordered-list-item
      - ordered-list-item
      - blockquote
      - code-block
      - atomic
  - 上記以外に自作の `type` も定義可能

### text
- プレーンテキスト
  - スタイリング・装飾・HTML情報は含まれない

### depth
- インデントの深さ
  - リストアイテムで使用されている

### inlineStyleRanges
- `text` の装飾情報がObject型の配列で格納されている
- 装飾情報のプロパティは下記の通り
  - offset: 装飾情報を付与する開始位置
  - length: 装飾情報を付与する長さ
  - style: インライン要素の装飾の種類
     - デフォルトで用意されている `style` は下記の通り  
       ・BOLD  
       ・CODE  
       ・ITALIC  
       ・UNDERLINE
     - 上記以外に自作の `style` も定義可能

### entityRanges
- `text` への補足情報がObject型の配列で格納されている
- 補足情報のプロパティは下記の通り
  - offset: 補足情報を付与する開始位置
  - length: 補足情報を付与する長さ
  - key: `entityMap` の中のどの `entity` を適用させるか  
  ※ Entityについては [こちらの記事](https://qiita.com/y-hira18/items/796048296a15e9d8f4d9) に記載

### data
- ブロックのメタデータ
GitHub：リモートリポジトリに成果物をアップロードする方法のメモ

#はじめに
本記事は、GitHubをリモートリポジトリにアップロードする方法を復習用にメモしました。

#ターミナルとGitHubを紐づける

まず初めに、下記コマンドで公開鍵と秘密鍵を作成しましょう。

```
$ ssh-keygen
```

次に、作成できた公開鍵をコピーするために、下記コマンドを実行しましょう。

```
cat ~/.ssh/id_rsa.pub
```
このコマンドで出てきた ssh-ras　から始まる公開鍵をコピーしましょう。
次に、自身のGitHubアカウントにログインして、
「setting」→「SSH and GPG keys」を選択しましょう。

（図１)
![git.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1876077/a8d5f9fb-57df-0e3c-260d-c14a7f580135.png)

図１の画面に遷移できたら、Titleを自由に決めて、Keyの場所に先ほどコピーした公開鍵を貼り付けましょう。
この際にアップロード先のリモートリポジトリのSSHをコピーしておきましょう。

最後に、ターミナルに移動して下記のコマンドを入力しましょう。

```
ssh git@github.com
``` 
これでターミナルとGitHubの連携は完了しました。

#リモートリポジトリにアップロードする方法

```
$ git init
$ git add 対象ファイル名 or 対象ディレクトリ名
$ git commit -m "メッセージ"
$ git remote add origin "リモートリポジトリのSSH"
$ git branch -M main
$ git push origin main
```
リモートリポジトリのSSHは先ほどコピーしたSSHをペーストしましょう。

これでリモートリポジトリに成果物をアップロードすることができました。お疲れさまでした。
Crest Ocean System URP


###Crest Ocean System URPというアセットを利用して水面表現した時の「アセット復習記事」です。

####・アセット情報 $64.90
https://assetstore.unity.com/packages/tools/particles-effects/crest-ocean-system-urp-141674?locale=ja-JP

####・参考記事
このアセットを利用される場合、水面の生成など基本的なことは、
下記サイトさまが、すごく分かりやすかったのでまずそちらを参考にされて下さい。

#####　・そもそも波の作り方などはこちらへ
https://raspberly.hateblo.jp/entry/CrestOceanSystemURP

--

#####　・無限範囲なので、狭める場合はこちらへ
　👇リンク先の記事内にある、サイト上側のyouTube動画と同じ手順でやられて下さい。
　（サイト下側の記事は自分の環境では、うまく機能していない気がしました。。）

https://crest.readthedocs.io/en/stable/user/water-bodies.html?rp=urp#

#現状共有
簡単に揺れを再現出来るのですが、、、
この揺れを抑えたいけど、抑え方が分からなかった。。
![CrestOceanSystemURP-01-1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232643/a206f883-e233-eba1-6204-a5934388ed02.gif)

なので、どこをいじれば良いのかを確認していきます。
揺れに必要な下記コンポーネントは取り付けた状態からスタートしています。
・Rigidbody
・SimpleFloatingObjectコンポーネントの記述箇所（中段くらい）

https://crest.readthedocs.io/en/stable/user/other-features.html?rp=urp

暴れるキューブを抑えるのは、かなり難しい。。

![CrestOceanSystemURP-02-1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232643/d9f78b37-b3b3-4204-b95a-9bf8c1a12ac8.gif)


###はっつ、、、波が強いのでそこを抑制するのが先の様です。
![CrestOceanSystemURP07.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232643/2271aaf6-a185-171a-af60-f9a71037d5b3.jpeg)
![CrestOceanSystemURP-04-1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232643/c856b81f-c249-d38e-f45a-5d3e96dd79b4.gif)
👆このあたりをいじれば波を制御できるみたいです。
水面の波と、オブジェクトの揺れが連動しているのが驚き。。




![CrestOceanSystemURP-05-1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232643/d15417d9-4858-ae8d-7720-5db77ac9af23.gif)
👆本体のWave（違うコンポーネント）を操作しているところ


##波は残しつつ、揺れを減らしたいという非現実な感じを設定する。 
結果、いじったところ

![CrestOceanSystemURP06.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232643/6e2161f1-d5cf-e88e-d954-58fdd3654c43.jpeg)


##海岸線の泡もついでに表現したい時

####■5.2. Shoreline Waves（下の方にyouTube動画があります）
https://crest.readthedocs.io/en/stable/user/shallows-and-shorelines.html?rp=urp

ここに泡を表示したい時、、、
![CrestOceanSystemURP08.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232643/059c7be8-7b43-e972-7981-7b8e58894d89.jpeg)

コンポーネントを追加して、泡立てたい箇所に線を引いて設定すると、、、
![CrestOceanSystemURP09.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232643/757674c6-0695-17bd-f613-ef9a23170ff5.jpeg)

泡表現完成！
![CrestOceanSystemURP10.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232643/8be3046a-b13d-9420-5e36-d909e22256b2.jpeg)
Three.jsで再生可能な２Dキャラアニメーションを作る

#動機
Live2DやSpine使いたかったけど、サブスクなしでやりたかった

#環境
Mac
blender2.83LTS

#SVGを読み込む
この素材を使用
https://freesvg.org/shokunin-japanese-character

![スクリーンショット 2021-09-03 18.05.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514937/bd6a2390-5139-f319-9788-11b2ba8ef5ef.png)


#Object Mode

##メッシュ化
object > Mesh from Curve

##すべて選択し統合
Command + J

##リメッシュ 
綺麗な並びのポリゴンにする　
周辺がガタガニになるが、内側にテクスチャーを貼ることで綺麗に見せる
Spineメッシュ変形のポリゴン形状を参考に作る
http://ja.esotericsoftware.com/spine-demos
![スクリーンショット 2021-09-03 18.09.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514937/2f2cb8d7-93b5-15b8-bbe1-302f88effdeb.png)



##リダクション
Decimate 
![スクリーンショット 2021-09-03 18.10.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514937/76687887-b711-b6cc-2413-76c99e74169c.png)


#UV Editing 
UV調整
![スクリーンショット 2021-09-03 18.18.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514937/5cdd9741-32b3-6b57-d137-dfa10870b0aa.png)



##ボーン
![スクリーンショット 2021-09-03 18.19.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514937/90c31cda-0b2f-b596-e3a5-38d39d27e018.png)


##自動ウエイト
モデル、ボーンの順に選択
Ctrl + Pを押し「With Automatic Weight」を選択

#Pose Mode
##アニメーション
動かしたいボーンを選択して、拡大または回転しInsert Keyframe
![スクリーンショット 2021-09-03 18.12.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514937/acb70d4b-2f4c-59f5-0896-65dbb257d5b2.png)


#GLB書き出し
初期設定のまま


#Viewerで確認
https://gltf-viewer.donmccurdy.com/

![Sep-03-2021 18-15-00](https://user-images.githubusercontent.com/45844502/131982816-71bc3e44-18fc-4d69-b8a9-3554eb1533f8.gif)
踏み台サーバー × FileZillaを簡略化する



# sshコマンドを簡略化する
踏み台サーバー経由でFileZillaを操作したい場合、
一般にポートフォワーディングしてアクセスすることが多いかと思います。
【参考記事】　https://qiita.com/mechamogera/items/b1bb9130273deb9426f5

```
$ ssh -f -N -L [ローカルに割り当てるポート]:[ターゲットのホスト]:[ターゲットのポート] [踏み台のユーザー]@[踏み台のホスト]
```

長すぎる。
ので、configファイルに詳細をかき、コマンドを簡略化します。


## やり方

```
$ vim ~/.ssh/config
```

~/.ssh/configの中を下記のように編集

```ssh:~/.ssh/config
# 　踏み台サーバー
Host bridge
HostName bridge.com
User bridge_user
Port 50000 

# 目的のサーバー
Host server
HostName server.com
User server_user
Port 51111
LocalForward 59000 bridge.com:50000
ProxyCommand ssh -CW %h:%p bridge
````

これで今後は下記を入力するだけ!

```
$ ssh -f -N server
```

![スクリーンショット 2021-09-03 18.20.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/441432/c2e080b4-d6eb-84c9-3954-68c190bbdabf.png)

上記のようにFilezillaで接続できます。


## GUIとかいらない場合

```
$ ssh server
```
でオプションなしで接続すればOK


# パスワード認証を簡略化する
踏み台サーバーのパスワード、いちいち入力するの大変ですよね。
ここも簡略化しましょう。

公開鍵認証を利用します。

```
$ ssh-keygen -t rsa -b 4096
```
で鍵を生成します。

```
$ ssh-copy-id -i ~/.ssh/id_rsa.pub [リモートユーザー]@[リモートホスト名]
```
で鍵を送信します。
これで接続時パスワードを入力せずにアクセス可能です。

## それでもパスワードを聞かれる場合
パーミッションのエラーであることが多いです。
https://soji256.hatenablog.jp/entry/2021/03/04/070000
上記の記事を参考に、

```
＜接続元（クライアント）の設定例＞

chmod 755 /home/
chmod 755 /home/user
chmod 700 /home/user/.ssh
chmod 600 /home/user/.ssh/id_rsa
chmod 644 /home/user/.ssh/id_rsa.pub
＜接続先（サーバ）の設定例＞

chmod 755 /home/
chmod 755 /home/user
chmod 700 /home/user/.ssh
chmod 600 /home/user/.ssh/authorized_keys
```

で設定されているか確認してください。

# ホスト指定を簡略化する
究極のズボラなのでssh後のホスト名指定すらしたく無いので、補完機能をつけます。

```
$ brew install bash-completion
```

~/.bash_profileに下記を追加します。

```bash:~/.bash_profile
if [ -f $(brew --prefix)/etc/bash_completion ]; then
  . $(brew --prefix)/etc/bash_completion
fi
```

あとはターミナルを再起動 or `source ~/.bash_profile` で設定を読み直すだけです。

`$ ssh` の後にTABを2回押すと補完してくれます、便利!

【参考記事】https://sig9.hatenablog.com/entry/2016/06/19/003000


インフラ周りあまり詳しくないので、間違ってる場所あったり、
もっと良い方法があればバシバシご指摘ください🙇‍♂️
heroku 関連のコマンド集 &Error対応編

herokuに新しいアプリケーションを作る

```
heroku create
```

アセットプリコンパイルする

```
rails assets:precompile RAILS_ENV=production
```


GemfileのRubyのバージョンをコメントアウトする

```
 source 'https://rubygems.org'
 git_source(:github) { |repo| "https://github.com/#{repo}.git" }
 # ruby '2.6.5'

$ bundle install
```


コミットする

```
~/workspace/heroku_test_app (master) $ git add -A
~/workspace/heroku_test_app (master) $ git commit -m "init"
```


Heroku buildpackを追加する

```
$ heroku buildpacks:set heroku/ruby
$ heroku buildpacks:add --index 1 heroku/nodejs
```

herokuにデプロイ

```
git push heroku master
```


デプロイに失敗する場合

```
$ heroku stack:set heroku-18
```

現在使われているstackを確認したい場合

```
heroku stack
```

エラー出てstack下げたら再度デプロイ


こんなエラーが出たら
![b25617bdae030baecf628262e7658361.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1724474/e3f3c562-1932-7bb0-fab0-f0957588acc3.png)

Gemfile.lockを削除

```
rm Gemfile.lock
```
バージョン2.2.11のbundlerをインストール

```
 gem install bundler -v 2.2.11
```

バージョン2.2.11のbundlerをインストールできているか確認

```
bundle exec bundle -v
Bundler version 2.2.11
```

上記のように、2.2.11が表示されればok

バージョン2.2.11のbundlerを用いて、再度gemをインストールする

```
 bundler _2.2.11_ install

```

再度コミットしたのち、Herokuにpushする

```
$ git add -A
$ git commit -m "bundlerのバージョンを2.2.11に変更"
$ git push heroku master
```

***Error関連***

```
Bundler Output: Unable to find a spec satisfying nokogiri (>= 1.6) in the set. Perhaps the
   lockfile is corrupted? Found nokogiri (1.11.2-x86_64-darwin), nokogiri
   (1.11.2-x86_64-darwin), nokogiri (1.11.2-x86_64-darwin) that did not match the
   current platform.
```

```
$ bundle lock --add-platform x86_64-linux
$ git add -A
$ git commit -m 'Add platform'
$ git push heroku master
```




ブランチ分けた所からherokuをアップデート

```
git push heroku ブランチ名：master
```


シードデータをherokuに反映

```
heroku run rake db:seed
```

herokuのデータベースを綺麗にする

```
heroku PG:reset DATABACE
```

herokuのmigrationを更新

```
heroku run rails db:migrate
```

アプリ名確認

```
heroku config
```

一連の流れは大体こんな感じのコマンドを使えば
ある程度は対応できるであろうの記事でした！！！！
【メモ】Microsoft Edgeでゲストモードを無効にする (Windows10)

# きっかけ
プライベートブラウジング無効化はあったけどゲストモード無効は見つからなかったので。

# 環境
Windows10

# 手順
1. コマンドプロンプトを管理者権限で開く。
1. 以下のコマンドを実行する。

```
# ゲストモード無効化
C:hoge> REG ADD HKLM\SOFTWARE\Policies\Microsoft\Edge /v BrowserGuestModeEnabled /t REG_DWORD /d 0
# ゲストモード有効化
C:hoge> REG ADD HKLM\SOFTWARE\Policies\Microsoft\Edge /v BrowserGuestModeEnabled /t REG_DWORD /d 1
# プライベートブラウジング無効化
C:hoge> REG ADD HKLM\SOFTWARE\Policies\Microsoft\Edge /v InPrivateModeAvailability /t REG_DWORD /d 1
```
おしまい。

# 参考
- https://find366.com/windows10-microsoft-edge-inprivate-invalid/
- https://admx.help/?Category=EdgeChromium&Policy=Microsoft.Policies.Edge::BrowserGuestModeEnabled&Language=ja-jp
入門『地頭を鍛える』を読んでみた感想3

こんにちは、A-seatです。

時間がかかりましたが全て読み終わりましたので感想を述べます。

#1.読んでみた感想
##chapter3
フェルミの推定は地頭が試されるもので転職活動中に対策できていなかった部分でもありました。この本を読んで
定義→日本の面積や物の面積などから考える→3分以内と時間をかけすぎない
といった順番でやってみようと思いました。

##chapter4
AIは知識面で得意とし、人類は思考力で勝負せざるを得ないと感じました。考えを出すにあたっては一つの視点で捉えずに複数の視点で物事を見てこういうやり方もあるんだというのを実感して新しい発見をしていきたいと思いました。


##chapter5
無知の知といったところで自分自身プログラミング学習を行なっていますが、一つのことを知ったからといって満足しないといった意識を持てるようになりました。
ITというのは常に変化するものなので一つのことに満足しては衰退するばかりだと感じました。
また、常識を疑うということで「〇〇に言われたから」と鵜呑みにしてました。情報社会の世の中では本当にそうなのかよく噛み砕いてから行動すると時間がかからずにできるのではないかと感じました。


2.アクションプラン
・思考をまとめるにはとにかく考えを出しまくって必要だと思うものを選び、話の筋が良いかなど確認する
・志望動機等を考える際は3分以内と制限時間を設ける。長く考え込まないこと
・何か情報を得たらソースを確認する
・自分は全然知識がないと意識してプログラミング学習をする際一つのことができたら満足しないで次へと進める

3.さいごに
実際にやってみないと力がつかないので、自分としては転職活動やプログラミング学習などで実践してダメなら改善してまた実践するといったふうにしてこの本で読んだことを活かしていきたいと思います。
ToolbarのonCreateOptionsMenu()がFragmentから呼ばれないときの対処法

一部のFragmentでのみ、とあるメニューを表示したかったのですが、メニューのvisiblityをうまくコントロールできず困りました。

というのも、ActivityからはonCreateOptionsMenu()やonPrepareOptionsMenu（）が呼べるのに、Fragmentからは呼べませんでした。


すごくシンプルなのですが、

```kotlin:HogeFragment.kt
   override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        setHasOptionsMenu(true)
        (略）
    }
```

これだけでした。
setHasPotionsMenu(true)を呼べば、onPrepareOptionsMenu（）やonCreateOptionsMenu()も呼ばれます。

```xml
    <item
            android:id="@+id/hoge"
            android:icon="@drawable/ic_hoge_24"
            android:title="@string/hoge_string"
            app:showAsAction="ifRoom"
            android:visible="false" />
```

あとはこんな感じでメニューをあらかじめ非表示にしておいて、表示したい特定のFragmentにおいて

```kotlin:HogeFragment.kt
    override fun onPrepareOptionsMenu(menu: Menu) {
        super.onPrepareOptionsMenu(menu)
        val item = menu.findItem(R.id.hoge)
        item.isVisible = true
        item.setOnMenuItemClickListener {
            // クリックリスナーも機能します
            return@setOnMenuItemClickListener true
        }
    }
```

こんな感じでvisibleをtrueにできます。
数理計画（定式化②）

#差分最大値の最小化

##①の時は差分合計でしたが、目的関数を差分の最大値を最小化する場合の考え方

```
min |x[i] - A[i]| (i=1....n)
A[i]:定数
```

この場合、"Z"という説明変数を追加します。
"Z"は、差分値の最大値と考えます。

```math
min　 Z\\

x[i] - A[i] \geqq -Z\\
x[i] - A[i] \leqq Z\\
Z \geqq 0
```

```
【自己解釈】

0を中心として"-Z～Z"幅の差分許容範囲が定義されます。
"|x[i]-A[i]|"で求められる差分最大値Zを最小とするためのx[i]が求められます。

当然、x[i]は他に定義された制約条件を満足した値になります。　
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314982/8333e92d-9b16-7b88-918f-a158d0aec002.png)

赤の破線が０に近くなる、x[i]を求めることになるという事でしょうか。

これは、制約条件にも使用できそうです。
条件によって返す配列の値が変わるメソッドをまとめる。

#はじめに
配列の値をある条件によって変化させるメソッドがたくさんありすぎて混乱してきたので一度まとめてみました。

#条件に合致する値のみを配列として返す（filter）
その名の通り、指定した条件に合う値のみを配列として返します。検索機能の実装の際によく使うメソッドで、大変お世話になっております。

```jsx
const num = [1, 2, 3, 4, 5, 6];
const fruits = ["apple", "orange", "grape", "peach", "mango", "blueberry"];

//3以上の値を返す
const filterNum = num => {
  return num.filter(el => el > 3);
}

//出力：[4, 5, 6]
console.log(filterNum(num));
```

文字列の場合は完全一致が前提。
※indexOfと組み合わせれば部分一致に対応することも可能です。

```jsx
const num = [1, 2, 3, 4, 5, 6];
const fruits = ["apple", "orange", "grape", "peach", "mango", "blueberry"];

//一致する文字列を返す
const filterNum = num => {
  return num.filter(el => el === "apple");
}

//出力：["apple"]
const result = filterNum(fruits);
console.log(result);
```

#条件に一致する最初の値のindexを返す（findIndex）
配列を前から順番に見ていき条件に合う値最初の値のindexを返します。

条件に合う値のindexを特定して、そのindexを起点にsliceで値を取ってきたり、spliceで値を追加・削除したりする際に便利です。

```jsx
const num = [1, 2, 3, 4, 5, 6];
const fruits = ["apple", "orange", "grape", "peach", "mango", "blueberry"];

//peachのindexを返す（存在しない場合は-1を返します）
const filterFruits = fruits => {
  return fruits.findIndex(el => el === "peach");
}

//出力：3
const result = filterFruits(fruits);
console.log(result);
```

注意：似たメソッドでindexOfがありますが、こちらはStringメソッドです。


#条件に一致する最初の値を返す（find）
配列を前から順番に見ていく点は上記のfindIndexと同じ。ただし、返す値が今回はindexではなく値です。

```jsx
const num = [11, 2, 13, 44, 5, 76];
const fruits = ["apple", "orange", "grape", "peach", "mango", "blueberry"];

//配列を順番に見て12を超える最初の数字を返す
const filterNum = num => {
  return num.find(el => el > 12);
}

//出力：13
const result = filterNum(num);
console.log(result);
```

#条件に一致する値が配列内に一つでもあるか真偽値を返す（some）
こちらは配列内の値で指定の条件に一つでも当てはまればtrueを返すメソッドです。いくつかの条件の内一つでも合格なら良いみたいな式で使えるのでしょうか？（すいません、良い例が思いつきませんでした。。）

```jsx
const num = [11, 2, 13, 44, 5, 76];
const fruits = ["apple", "orange", "grape", "peach", "mango", "blueberry"];

//75以上の数字が一つでも含まれていればtrueを返す
const filterNum = num => {
  return num.some(el => el > 75);
}

//76が存在するので
//出力：true
const result = filterNum(num);
console.log(result);
```

someと似たメソッドでincludesがあります。一見同じ動きに見えるこれらの違いは下記の記事でわかりやすくまとまっていました。

https://qiita.com/Nossa/items/4a425e57ec4b7eedb7cb


#配列内の全ての値が条件に一致するか真偽値を返す（every）
everyは配列内の値全てが指定の条件を満たす場合のみtrueを返します。someが一つでもOKだったのに対してeveryはより厳格です。

使い所としてはフォームのバリデーションなどでしょうか？

```jsx
const num = [11, 2, 13, 44, 5, 76];
const fruits = ["apple", "orange", "grape", "peach", "mango", "blueberry"];

//配列内全ての文字列が4文字以上であればtrueを返す
const filterfruits = fruits => {
  return fruits.every(el => el.length > 4);
}

//出力：true
const result = filterfruits(fruits);
console.log(result);
```

#さいごに
今回は配列の値を調べて返すメソッドをご紹介しました。ただこれらの配列を組み合わせることでできることは他にもたくさんあります。またそれらの組み合わせについてもまとめていきたいと思います。
rr と vscode でデバッグしてみる

# はじめに
`rr`を使ったデバックを実際に試してみる

# 前準備
```Shell:ワーキングフォルダに移動
$ cd <work directory>
```

```Shell:ソースコードを取得
$ git clone https://github.com/aRaikoFunakami/rr_test.git
$ cd rr_test/
```

```Shell:コンパイル
$ gcc -g -O0 -pthread a.c
```

```Shell:vscodeを起動
$ code . &
```

# アプリの実行を記録
```shell:実行１
$ rr record ./a.out
rr: Saving execution to trace directory `/home/raiko/.local/share/rr/a.out-49'.
100/array[0] = 10
100/array[1] = 5
100/array[2] = 3
100/array[3] = 2
```

1回目の実行では不具合は発生しなかった 
（タイミングによって発生する不具合のため1回目の実行でエラーが発生する場合もある）

```shell:実行2
rr record ./a.out
rr: Saving execution to trace directory `/home/raiko/.local/share/rr/a.out-50'.
100/array[0] = 10
100/array[1] = 5
Floating point exception
```

2回目の実行では `Floating point exception` が発生

このようにタイミングイシューで問題が発生する不具合は再現が難しいのだが、今回は`rr`で実行を記録しているので不具合を再生することができる。


# 不具合の再生
```shell:再生の準備
$ rr replay -s 50505 -k
```

vscode で `rr` に接続して再生する
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1017489/109923e5-9fbc-91ca-3d4a-cf0ebe8998fb.png)
再生するとExceptionが37行目で発生していることがわかる
例外の発生は `array[2]` の値が `0` であるため、`0除算`を実行してしまっているため
![２.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1017489/6cdc68e8-0e1a-bb80-8bbb-3bb87ace672a.png)

# デバッグ
どこで `array[2]` の値が `0` に設定されたのかを確認していく
30行目にブレークポイントを設定
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1017489/f1413899-ce02-5d91-6da7-5d02381cc8e7.png)
`DEBUG CONSOLE` で `-exec rc` (`-exec reverse-continue`) で巻き戻す
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1017489/c4313535-a649-25e5-cd56-9ef39d93abd9.png)
30行目に戻ると`array[2]=３０`であることが確認できる
別スレッドで実行される `thread_func`で`array[2]`の内容が書き換えられていると目星がつく
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1017489/9273d900-810e-d38b-b5ce-67df9153efb6.png)
20行目にブレークポイントを設定して Continue
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1017489/be34fa73-e81e-834e-dc47-f1ca5038d15a.png)
20行目まで実行されたとき`r=2`であり、`array[2]=0`が実行されることが確認できる
これで`Floating point exception`の発生原因を特定した
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1017489/468e55f1-62d3-2c31-c2c1-74413c8cee7b.png)

# まとめ
`rr`でアプリの実行を記録しておくことで、タイミングイシューで発生する不具合を再生して再現できる。
不具合によっては再現するまでに何時間、何日もかかるものも存在するが、`rr`で実行を記録しておくことで不具合を再現する時間を大幅に短縮可能である。
また、`例外エラー`が発生した場所から`巻き戻し実行`することで、不具合の原因となった場所の特定することも比較的容易となることが確認できた。

# 関連記事

https://qiita.com/rairaii/items/a8028dd952eac43cd5b5

https://qiita.com/rairaii/items/749323c4910a42d530bb

https://qiita.com/rairaii/items/b9e580ba24671cb4c101
rr を Visual Studio Code(vscode) から使う設定


# はじめに
[`rr`](https://rr-project.org/) は非常にパワフルなデバッグツールだがコマンドラインで使うと素のgdbと同じくかなり使いづらい
そこで `rr` を `vscode` から利用する設定を行う
具体的的には `rr` に `vscode` を接続する設定をすれば良い

# rr を vscode から利用する設定

## launch.json 設定ファイルをの作成
1. `vscode`を立ち上げる
1. `vscode`でソースコードを保存しているディレクトリを開く
1. `Ctrl+Shift+D` でDebug viewを開いて `launch.json` 作成を選択
1. 下記の設定を`launch.json`に追加する


## 設定ファイル
[Firefoxのデバッグ用の設定](https://github.com/rr-debugger/rr/wiki/Using-rr-in-an-IDE#setting-up-visual-studio-code)を参考にする

- `rr` を起動するときに `localhost:50505` をデバッグポートとして起動して `vscode` からの接続を待つ
- `vscode` で `F5` でデバッグ起動すると `localhost:50505` へ接続して `rr` を使ってデバッグ
- `program` 等は環境に合わせて修正


``` launch.json
{ 
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "rr",
            "type": "cppdbg",
            "request": "launch",
            "program": "${workspaceFolder}/a.out",
            "args": [],
            "miDebuggerServerAddress": "localhost:50505",
            "stopAtEntry": false,
            "cwd": "${fileDirname}",
            "environment": [],
            "externalConsole": true,
            "linux": {
                "MIMode": "gdb",
                "setupCommands": [
                  {
                      "description": "Setup to resolve symbols",
                      "text": "set sysroot /",
                      "ignoreFailures": false
                  }
                ]
              },
              "osx": {
                "MIMode": "gdb"
              },
              "windows": {
                "MIMode": "gdb"
              }
        }
    ]
}
```

# vscodeを使ってデバッグする

`rr record <実行ファイル>` で実行し、 `replay`でデバッグ開始


```
$ rr record ./a.out
$ rr replay -s 50505 -k
```

`vscode` でデバッグしたいファイルを開いて `F5`
`rr` に接続してデバッグを開始する

残念ながらvscodeのGUIにリバーズ実行のためのボタンが用意されていない
![スクリーンショット 2021-09-01 18.25.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1017489/ac1d41ea-6200-2a24-c8e7-dfc97f807f1b.png)
リバース実行したい場合は Debugger Console でコマンド入力が必要
`-exec reverse-continue` (-exec rc), `-exec reverse-step` (-exec rs)など


# rr の使い方
- [Instant replay: Debugging C and C++ programs with rr](https://developers.redhat.com/blog/2021/05/03/instant-replay-debugging-c-and-c-programs-with-rr#requirements_and_setup)
- [Debugging Firefox with rr](https://firefox-source-docs.mozilla.org/contributing/debugging/debugging_firefox_with_rr.html)
- [The Chromium Chronicle #13: Time-Travel Debugging with RR](https://developer.chrome.com/blog/chromium-chronicle-13/)
- [RR: The magic of record and replay debugging](https://johnysswlab.com/rr-the-magic-of-recording-and-replay-debugging/)

## rr のようなツール
- https://github.com/rr-debugger/rr/wiki/Related-work

#関連記事

https://qiita.com/rairaii/items/9fb6b0a74493c77d078f

https://qiita.com/rairaii/items/a8028dd952eac43cd5b5
rr : アプリケーションの実行の記録と再生するツール

# はじめに

デバッグツールとして非常に役に立ちそうな `rr` だが、意外と情報が少ない
特に、たまにしか発生しない不具合の解析に特に有意義だと考えられるので `rr` の情報をまとめる

ソフトウェアの不具合の発生原因を調査するため便利ツール `rr` 
このツールの凄いところは、、、

1. 不具合発生するまでの一連の流れをすべて記録して
1. それを再生することが出来ること
1. 巻き戻し再生も可能
1. 同等のマシンであれば記録と再生を別のマシンで行うことも可能

つまり、起きた不具合を確実に再現することが可能であり、その不具合の根本原因を探るために記録を巻き戻して`変数`の内容が確認できる。
また、テスターが不具合発生を記録しておき、エンジニアが再生して不具合を調査する、というような不具合解析も可能となる。

# rr とは?

`rr`の[公式ページ](https://rr-project.org/)での `rr` の紹介
>rr aspires to be your primary C/C++ debugging tool for Linux, replacing — well, enhancing — gdb. You record a failure once, then debug the recording, deterministically, as many times as you want. The same execution is replayed every time.

# rr の基本機能
* アプリケーションの実行を記録する
* 記録内容を再生する
* 記録内容をパッケージにしてどこでも再生可能にする

# rr の利用方法

```shell:アプリの実行
$ rr record ./a.out args
```

```shell:実行記録の再生
$ rr replay
```

```shell:実行記録のパッケージ
$ rr pack
```

# rr を実際に使ってみる
[Instant replay: Debugging C and C++ programs with rr](https://developers.redhat.com/blog/2021/05/03/instant-replay-debugging-c-and-c-programs-with-rr#a_simple_debugging_example)

# rr の欠点
* 複数スレッドの同時実行記録はできない
* 記録していないプロセスとの共有メモリの競合
* 記録するため実行に時間がかかる(再生は早い)

# Ubuntu での rr のインストール方法
x64向けのUbuntu向けは [`rr` パッケージ](http://manpages.ubuntu.com/manpages/bionic/man1/rr.1.html) が用意されている

```shell:rrのインストール
sudo apt-get update
sudo apt-get install rr
```

# 参考資料
* [公式サイト](https://rr-project.org/)
* [ソースコード](https://github.com/rr-debugger/rr)
* [レコーディング&リプレイデバッグツール rr](
https://www.nds-osk.co.jp/wp/wp-content/uploads/2021/07/onelcof13_casestudy5.pdf)
* [Instant replay: Debugging C and C++ programs with rr](https://developers.redhat.com/blog/2021/05/03/instant-replay-debugging-c-and-c-programs-with-rr?fbclid=IwAR3IWOA4sz8ol7U4ceGW9NuALIOrSKlbzwHNFJUNfr1hdb65c50B01r4t2U)
* (Reverse Debugging Toolのrr)[Reverse Debugging Toolのrr]



# 小ネタ
- `rr` という固有名詞とは思えない名前のため、 Google で検索する際には `"rr"` と `"` で囲っておかないと `rr` 関連の検索がうまくいかないことに注意
- 5.4.0から[AArch64も実験的にサポート開始](https://github.com/rr-debugger/rr/releases/tag/5.4.0)

#関連記事

https://qiita.com/rairaii/items/749323c4910a42d530bb

https://qiita.com/rairaii/items/b9e580ba24671cb4c101
docker-composeで手軽にMySQLを構築する

dockerでMySQLを構築することがよくあります。
複数必要な場合はdocker-composeを使うと便利です。

```yml
# イメージpull
# docker-compose pull
# 起動
# docker-compose up -d
# 停止／削除（ボリュームも削除）
# docker-compose down -v
# 接続
# mysql -h127.0.0.1 -P13306 -uroot -proot
# mysql -h127.0.0.1 -P23306 -uroot -proot

# 起動時に、docker-entrypoint-initdb.dにマウントしたディレクトリに存在するsqlファイルを実行してくれる

version: '3'
volumes:
    v-mysql57-db:
        driver: 'local'
    v-mysql80-db:
        driver: 'local'
services:
    mysql57-db:
        image: mysql:5.7
        container_name: mysql57_db
        environment:
            - MYSQL_ROOT_PASSWORD=root
            - TZ=Asia/Tokyo
        ports:
            - 0.0.0.0:13306:3306
        volumes:
            - v-mysql57-db:/var/lib/mysql
            - $PWD/mysql57_init.d:/docker-entrypoint-initdb.d
        command:
            - mysqld
            - --character-set-server=utf8
            - --collation-server=utf8_general_ci
            - --innodb-large-prefix=ON
            - --innodb-file-per-table=ON
            - --innodb-file-format=barracuda
    mysql80-db:
        image: mysql:8.0
        container_name: mysql80_db
        environment:
            - MYSQL_ROOT_PASSWORD=root
            - TZ=Asia/Tokyo
        ports:
            - 0.0.0.0:23306:3306
        volumes:
            - v-mysql80-db:/var/lib/mysql
            - $PWD/mysql80_init.d:/docker-entrypoint-initdb.d
        command:
            - mysqld
            - --character-set-server=utf8mb4
            - --collation-server=utf8mb4_ja_0900_as_cs
            - --innodb-file-per-table=ON
            - --default-authentication-plugin=mysql_native_password
```
Pythonのループ＋try/except/finally句＋break/continueの挙動

動きに確信が持てなかったので検証しました。
# 検証
## コード1
```python
while True:
    try:
        print('a')
        raise Exception()
    except Exception:
        print('b')
        break
    finally:
        print('c')
```
## 実行結果1
```sh
$ python3 loop.py
a
b
c
```
## コード2
```python
for i in range(0, 2):
    try:
        print('a')
        if i == 0:
            raise Exception()
    except Exception:
        print('b')
        continue
    finally:
        print('c')
```
## 実行結果2
```sh
$ python3 loop.py
a
b
c
a
c
```
# 結論
ループ中の`except`句で`break`や`continue`が実行された場合も、`break`や`continue`による処理の前に`finally`句の処理が実行される。
GitHubAPIで複数アカウントの草をまとめて表示させる

# TL;DR
GitHubの会社用アカウントと個人用アカウントの草を，自分のWebサイトにまとめて表示させてみました．

[GitHubのGraphQL API](https://docs.github.com/ja/graphql)を叩くことで草情報を取ってこれるので，それを自分のWebサイトで表示させてやります．

# 手順

## GitHubアクセストークンの発行
ここからPersonal access tokenを発行します．
https://github.com/settings/tokens

具体的な手順は[公式ドキュメント](https://docs.github.com/ja/github/authenticating-to-github/keeping-your-account-and-data-secure/creating-a-personal-access-token)の説明が分かりやすいのでそちらを参照してください．

今回は複数アカウントにアクセスしますが，草情報などのパブリックな情報であればどのアカウントのアクセストークンでも取得できるので，どれか一つで大丈夫です．


## 草情報の取得

こちらのサイトを参考にさせていただきました．
https://zenn.dev/yuichkun/articles/b207651f5654b0

具体的な手順は次の通りです．

1. エンドポイントを`https://api.github.com/graphql`に設定する
1. ヘッダーにアクセストークンを追加する（`Authorization: Bearer [発行したアクセストークン]`）
1. メソッドをPOSTにする
1. クエリを書いてリクエスト

草情報のみであれば次のクエリで取得できます．
ユーザーIDを変えることでアカウントごとの草情報を取得できます．

```graphql
{
  user(login: [ユーザーIDを入れる]) {
    contributionsCollection {
      contributionCalendar {
        weeks {
          contributionDays {
            contributionCount
          }
        }
      }
    }
  }
}
```

レスポンスは次の通りです．
草情報(各日のcontribution数)は，`contributionCount`という名前で週ごとに配列で返ってきます．

```graphql
{
  "data": {
    "user": {
      "contributionsCollection": {
        "contributionCalendar": {
          "weeks": [
            {
              "contributionDays": [
                {
                  "contributionCount": 0
                },
                {
                  "contributionCount": 1
                },
                {
                  "contributionCount": 5
                },
                {
                  "contributionCount": 17
                },
                {
                  "contributionCount": 3
                },
                {
                  "contributionCount": 5
                },
                {
                  "contributionCount": 6
                }
              ]
            },
            ...(省略)...
          ]
        }
      }
    }
  }
}
```

画像はGraphiQLの例です．

![スクリーンショット 2021-09-03 16.39.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840171/83b2b2d8-d31b-3f5c-a5a7-8be2d31ac8d3.png)

![スクリーンショット 2021-09-03 16.58.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840171/6f77a4bb-e698-7c36-7bc6-ee8d5761374b.png)


## Webサイト上で表示

あとは`contributionCount`に入っている値を使って表示するだけです．

私はアカウントごとに色を変えて表示させてみました．
（ちなみにVue.jsです）

この辺の詳細は，長くなる&コードが汚いので今回は割愛しますが，gridで四角を並べて，`contributionCount`に応じてbackground-color変えてやっています笑

![forQiita.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840171/43721dd4-136b-b8e4-2a98-c71ea56d2ce4.gif)


# おわりに

上のGifにも若干映っていますが，GitHub APIは草情報だけでなく，リポジトリ情報や言語情報なども引っ張ってこれるので，色々できて面白いです．

GraphQLの勉強にもなるのでぜひ！
【iOS】コントロールセンターのQRコードリーダーではまった件 

現在のiOSで端末のコントロールセンターにQRコードリーダーが実装されていますが、
URLをQRコードにして、QRコードリーダーアプリからWEBページへ遷移させる際の挙動に差異があったのでメモ。

＜＜動作の差異＞＞
QRコードからWEBページを表示後、WEBページから別のアプリがキックされる際に、
・コントロールセンターのQRコードリーダー
　別アプリが起動した際にWEBページ（ブラウザ）が終了
・カメラアプリのQRコードリーダー
　別アプリを起動時、ブラウザはバックグラウンドに遷移
コントロールセンターのQRコードリーダーはWEBViewにてページを表示し、
バックグラウンドで待機してくれない。

＜＜実際にはまった事象＞＞
ブラウザ上から電話発信で2要素認証を行う「着信認証」サービスにて、
1.QRコード読取り
　↓
2.WEBページ表示
　↓
3.電話発信を行う
　↓
4.終話後、WEBページ側は「着信認証」の結果に応じた振舞い（Myページへリダイレクト等）を行う
という流れで動作させたいのですが、3の時点でWEBページ（ブラウザ）が終了してしまい、
正常に認証がなされていても、利用者はMyページへ遷移出来ない。

＜＜対処方法＞＞
QRをカメラアプリから読込んで頂くように案内。
全然解決してない、、、