OmniAICreator/Qiita-1.07M huggingface dataset:
CURLの組み立て方について

# CURLの書き方について
新しい職場になって、今までほぼ使わなかったcurlコマンドを打つことが増えたので
コマンドの組み立て方について書いていこうと思います。

# curlの基本構文
curlの入力書式は以下になります。
```
curl [options] [URL]
```

# メソッドがGETかそれ以外か？
## GETの場合
何も必要ありません。
## それ以外の場合
オプションで `-X メソッド名` を追加します。
POSTの場合であれば、`-X POST`を指定します。
`curl -X POST ...`

# リクエストヘッダーがあるか？
## ある場合
オプションで `-H` を追加します。
```
curl -H "Content-Type: application/json" ...
```

# プロキシの設定が必要か？
プロキシが必要な場合 `-x プロキシサーバ:ポート番号`が必要です。
```
curl -x プロキシサーバ:ポート番号 ...
```

# リクエストbodyパラメータはjson形式かurl-encode方式か？
## リクエストbodyパラメータはいくつあるか？
### jsonの場合
-dオプションを付けてJSON形式で設定を行います。。
```
-d '{"parameter1":"value1", "parameter2":"value2"}'
```

### url-encode方式で1つの場合
urlencode形式の場合は、URLにパラメータを仕込むことになります。
1つの場合であれば、以下のように`?parametr1=value1`となるので、特に設定は必要ありません。
```
curl ... http://....?parameter1=value1
```
### url-encode方式で2つ以上の場合
urlencode形式の場合は、URLにパラメータを仕込むことになります。
2つ以上の場合であれば、2つ目以降は＆でつなげます。
つまり、URLは`?parameter1=value1&parameter2=value2`のようになります。

問題になるのは、curlでは`&`は予約語なのでエスケープシーケンスする必要があることです。
つまり単純にURLを送ろうとするとエラーが起きるわけです。

Urlencode方式であれば、以下のように文字列として認識させてあげれば2つ以上のパラメータでも送ることができます。
```
curl ... "http://....?parameter1=value1&parameter2=value2"
```

## 詳細なログがほしいか？
詳細なログが欲しい場合は `-v` オプションを指定すれば可能です。
```
$ curl -v ...
```

逆に必要にない場合は、`-s`オプションを指定します。
ArduinoでRTCを使用して時刻を取得する際のハード側注意点

# やったこと
ESP32にてRTC(DS1307)とOLED(SSD1306)を使って時刻をディスプレイ表示します。ESP32を使うのでwifi接続して時刻取得すればいいいのですが、今回はあえてローカルな方法でやっていきます。


# OLED(SSD1306)の使い方
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342722/3ab7edc5-c4c8-9c9b-2640-8291881bf202.png)

過去の記事があるのでそちら参照してください

# RTC(DS1307)の使い方
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342722/59e3945e-a29e-f996-19a6-90a8103eed4f.png)

amazonでKKHMF製のRTCモジュールを購入しました。

:::note alert
使用する電池に注意してください
これ以外の製品もそうですが、こちらは２次ボタン電池仕様となっており充電回路があります。ですので、一般的にホームセンター等で売られている安いボタン電池（CR2023）をそのまま使うことは危険ですので、少し細工が必要になります。
:::

### 充電回路カット

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342722/76593a3f-e6c0-b101-b551-95b0a353bb88.png)

こちらの回路を見ると電源からVCCｋらbatteryに電気が流れて充電されていることがわかります。
参考までにD1,R4,R5,R6をカットしてR6はメモリ電源として必要なため半田等で再度接続してください。

::::note warn
製品により異なりますので、実施する場合は必ず回路を入手して自己責任で行ってください
:::

# ソースコード

どちらもI2C通信モジュールです。ライブラリによっては干渉してしまう現象もありました。下記のコードは問題なく動作することは確認しています。

```C++:RTC_OLED.ino
/*
 DS1307+SSD1306
 ディスプレイSSD1306　(　横　128ﾋﾟｸｾﾙ　×　縦　64ﾋﾟｸｾﾙ　)　　
      GND　→　GND
      VCC　→　3.3V
      SCL　→　GPIO 22　
      SDA　→　GPIO 21
 tiny RTC（充電回路カットしてから使うこと）
      GND　→　
      vcc　→　 5V(降圧回路あるか確認してから)
      SCL　→　 GPIO 22
      SDA　→　 GPIO 21
 */

#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#include <RTClib.h>

#define SCREEN_WIDTH 128 // OLED display width,  in pixels
#define SCREEN_HEIGHT 64 // OLED display height, in pixels

Adafruit_SSD1306 oled(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1); 
RTC_DS1307 rtc;

String time_;

void setup() {
  Serial.begin(9600);

  if (!oled.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
    Serial.println(F("SSD1306 allocation failed"));
    while (true);
  }

  delay(2000);         // wait for initializing
  oled.clearDisplay(); // clear display

  oled.setTextSize(3);          // text size
  oled.setTextColor(WHITE);     // text color
  oled.setCursor(0, 10);        // position to display

  // SETUP RTC MODULE
  if (! rtc.begin()) {
    Serial.println("Couldn't find RTC");
    Serial.flush();
    while (true);
  }

//  // PCの時刻を書き込む(1度書き込んだらコメントアウトして再度書き込む)
//  rtc.adjust(DateTime(F(__DATE__), F(__TIME__)));
 
}

void loop() {
  DateTime now = rtc.now();
  time_ = "";
  time_ += now.hour();
  time_ += ':';
  time_ += now.minute();
  time_ += ':';
  time_ += now.second();
  Serial.println(time_);
  oledDisplayCenter(time_);
  delay(1000);         // wait for initializing

}

void oledDisplayCenter(String text) {
  int16_t x1;
  int16_t y1;
  uint16_t width;
  uint16_t height;

  oled.getTextBounds(text, 0, 0, &x1, &y1, &width, &height);

  // display on horizontal and vertical center
  oled.clearDisplay(); // clear display
  oled.setCursor((SCREEN_WIDTH - width) / 2, (SCREEN_HEIGHT - height) / 2);
  oled.println(text); // text to display
  oled.display();
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342722/e40ab9d6-c8f4-660b-95a5-3226a744fbba.png)

画像ボケてしまいましたが、こんなに感じになります。
【簡単】GitHubのREADMEにYoutube動画を埋め込み（のように見せる）

# 概要
GitHubの`README.md`にYoutube動画を埋め込みます。
一見すると、埋め込みが行われているように見えますが、その実態は動画ページへの画像リンクとなります。

https://github.com/kohei-yamamoto1012/jojo-pose-exam
<img width="800" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1519716/ba26bb22-db56-4d7e-b1e6-48f4811f9b24.png">


# 手順
このようなマークダウンテキスト作成し、`README.md`に書き込みます。

```shell
[!['altテキスト']('サムネイル画像のURL')]('Youtube動画のURL')
```

それぞれに挿入すべき内容について、以下で解説します。

## altテキスト
サムネイル画像が表示できなかった場合に表示される任意のテキストを指定します。
（何も指定しないことも可能です）

## サムネイル画像のURL
サムネイル画像のURLを指定します。

**①サムネイル画像の作成**
・Youtube動画中のサムネイルとしたい箇所のスクリーンショットを撮影
・お好みの画像加工の方法で、再生開始ボタンを合成する

**②URLの取得（サムネイル画像のアップロード）**
GitHub上のREADME編集画面で、作成したサムネイル画像をドラッグ＆ドロップすることで、
画像のアップロードが行われ、HTMLが生成されます。
<img width="600" src="https://i.gyazo.com/e531d1bc4c86850d7ba25b53b891c857.gif">
生成されたHTML中の`src` の箇所が画像のURLとなります
```html:生成されたHTMLの例
<img width="1282" alt="サムネイル画像" src="https://user-images.githubusercontent.com/84756197/173222007-3aefa245-4c0e-45e6-9855-91f0e3be89ed.png">
```

## Youtube動画のURL
Youtube上の共有ボタンから、動画のURLを取得することが出来ます。
<img width="600" src="https://gyazo.com/92345dcca2d010e07d3c8f3605848e88.gif">

```:取得したURLの例
https://www.youtube.com/watch?v=5aKI900iGVo&t=1336s
```

# 完成形
このようなマークダウンが作成できたら、OKです。
GitHubの`README.md`に書き込みましょう！

```markdown
[![サービス紹介動画](https://user-images.githubusercontent.com/84756197/173222007-3aefa245-4c0e-45e6-9855-91f0e3be89ed.png)](https://youtu.be/5aKI900iGVo?t=1336)
```

# 参考サイト
https://gist.github.com/LeeDDHH/0e6694ab47262b9dc52d9a1ba85f6137
【お店探しのWebAR】DjangoでWebSocket編

# どんなアプリ？
おおもとの記事です。
[【Django,A-frame】お店探しのWebARを作りました。](https://qiita.com/KarT1994/items/e7fae60a5856891ff0fd)

# 対象の読者
一応、下記前提で記事を書いていきますが、難しいことは書いてないので分からない用語があれば調べてください。
* pythonの初歩的な用語、文法を知っている人向け
* Djangoを使ったことがある人向け

# 今回の内容
websocketでサーバ・ブラウザ間の送受信

# ブラウザ側
WebSocketのインスタンスを生成します。
```javascript:aframe_ctrl.js
var ws = new WebSocket('wss://' + window.location.host + '/ws/');
```

JSON形式でサーバからデータを受け取ります。
受信するごとに更新されます。
```javascript:aframe_ctrl.js
ws.onmessage = function(e) {
  var data = JSON.parse(e.data);
}
```

JSON形式でサーバにデータを送信します。
末尾の10000[ms]で10秒に一回送信するよう設定しています。送信データは緯度経度です。
（端末の緯度経度の取得がサーバーからだと複雑な処理になりそうだったため）
```javascript:aframe_ctrl.js
  $(function() {
    setInterval(function(){
      const sendData = {
        message : my_latitude + "," + my_longitude
      }
      ws.send(JSON.stringify(sendData));
      },10000);
  });
```

# サーバ側
基本的な設定は下記サイトを参考にさせていただきました。
[http://engmng.blog.fc2.com/blog-entry-110.html](http://engmng.blog.fc2.com/blog-entry-110.html)

一個注意することがあります。
Websocketのルーティングを設定する時、末尾にASGIとして使いますよって明示する必要があります。
```python:routing.py
websocket_urlpatterns = [
    path('ws/', consumers.TestConsumer.as_asgi()),
]
```

ここではブラウザからJSONでデータを受け取り、緯度経度を抽出してHotPepperAPIを介してお店情報を取得します。
取得したお店情報をJSON形式にしてsendでブラウザに送ります。

```python:consurmers.py
    def receive(self, text_data=None):
        if text_data != None:
            text_data_json = json.loads(text_data)

            _location = text_data_json['message']
            if "," in _location:
                shop_num = 5
               # ブラウザから受信した緯度経度からお店情報を取得する
                _array_location = _location.split(",")
                lat = _array_location[0]
                lng = _array_location[1]
                HP_data = HotpepperAPI(lat_st=lat,lng_st=lng )
　　　　　　　　　　・・・

                shop_array[2] = "お店を検索中…"
                for i in range(0,shop_num):
                    try:
                        shop_array[i] = HP_data['name'][i]
                        lat_array[i] = HP_data["lat"][i]
                        lng_array[i] = HP_data["lng"][i]
                        ・・・
                    except:
                        pass

            else:
                self.name = 'Failed:location'

            self.send(text_data=json.dumps({
                'message0':shop_array[0],
                "shop_lat0":lat_array[0],
                "shop_lng0":lng_array[0],
                "shop_dis0":dis_array[0],
                "catch0":appeal[0],
                "urls0":shop_urls[0],
　　　・・・
```
PyQtGraphでうんこを描画する方法

PyQtGraphでうんこを描画する方法を説明する。

# 完成イメージ
![スクリーンショット 2022-06-12 16.55.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/485337/9fd6dbaf-ec9d-860d-3f85-94f28a063c1a.png)

# コード
```python: unko.py
import sys
from PyQt6.QtWidgets import QApplication, QWidget
import pyqtgraph as pg


class GuiWindow(QWidget):

    def __init__(self, parent=None):
        super().__init__(parent)
        self.グラフを描画する()

    def グラフを描画する(self):
        self.graph = pg.GraphicsLayoutWidget(show=True)
        self.p = self.graph.addPlot()

        # unko
        self.p.plot(x=[10, 60],
                    y=[10, 10],
                    pen=pg.mkPen((100,53,44), width=150))
        self.p.plot(x=[20, 50],
                    y=[25, 25],
                    pen=pg.mkPen((100,53,44), width=150))
        self.p.plot(x=[30, 40],
                    y=[40, 40],
                    pen=pg.mkPen((100,53,44), width=150))
        self.p.plot(x=[35, 36],
                    y=[55, 55],
                    pen=pg.mkPen((100,53,44), width=100))

        # 枠
        self.p.plot(x=[-10, 100, 100, -10],
                    y=[-10, -10  , 100, 100],
                    pen=pg.mkPen('black', width=5))

if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = GuiWindow()
    sys.exit(app.exec())
```
astropyでFITSファイルに行を追加したい。

# 前置き

Pythonで天文データ解析をする際に必須のライブラリである`astropy`。
今回はこれをもちいて天文データフォーマットの標準であるFITSファイルに行を追加する方法の備忘録を兼ねた共有です。

ネットで検索したが難しいという情報が。。
https://stackoverflow.com/questions/68562745/adding-a-row-to-a-fits-table-with-astropy
そんなはずないということで、頑張ってみたらできたので記事にしてみました。

今回はGTIをFITSファイルに追加するという作業を例に扱います。

# 結論

`Table`オブジェクトの`add_row` method で追加することが可能です。

# 詳細
以下のようなFITS　ファイルを想定します。
```
$ ftlist event.evt+2 C
HDU 3

  Col  Name             Format[Units](Range)      Comment
    1 START              1D
    2 STOP               1D
```
これに`[0, 10]`と`[11, 15]`の範囲のGTIを追加してみます。
読み込み、追加、そして保存までのスクリプトは以下のようになります。

```python
from astopy.table import Table
from astopy.io import fits

def update_gti(hdul, gtis, idx_gti_hdu=2):
    tbl = Table.read(hdul[idx_gti_hdu])
    for gti in gtis:
        tbl.add_row(gti)
    hdul[idx_gti_hdu] = fits.BinTableHDU(tbl)
    return hdul


gtis = [[0, 10], [11, 15]]

hdul = fits.open("event.evt")
hdul_updated = update_gti(hdul, gtis, idx_gti_hdu=2)　　# HDU 3 のインデックスは 2
hdul_updated.writeto("new_event.evt")
```

もちろん[公式ドキュメント](https://docs.astropy.org/en/stable/table/modify_table.html)にあるのですが情報を見つけるのが少し大変でした。
【FileMaker】FileMaker Serverへのアップロードで失敗する時に見るページ

FileMakerの[FDS](https://community.claris.com/ja/s/article/FileMaker-Developer-Subscription-%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6)を更新して、久しぶりにFileMaker Serverのインストールをして、さて、ファイルをアップロード、というところでこれまた久しぶりに手順を忘れてしまったので、備忘録です。

# エラーメッセージ
エラーは、FileMaker ProからFileMaker Appをアップロードする際に出てきます。
スクショ撮るのを忘れてしまったので画像なしですが、「ファイルのアップロードに失敗しました」というメッセージが出てきた時の対応です。

# 現象が起こる環境
macOS、Ubuntuで発生するようです。
バージョンや原因、解決方法など詳細は、こちら。
[Q&A: Apache Server をバージョン 2.4.51 にアップグレード後、FileMaker Server へのファイルのアップロードが失敗する、もしくは遅くなる](https://support.claris.com/s/article/Q-A-Uploading-files-to-FileMaker-Server-fails-or-files-upload-slowly-after-upgrading-Apache-Server-to-version-2-4-51?language=ja)
(Claris社 Clarisエンジニアリングブログ）

# 解決方法
Apacheのパッチを充てます。

1.パッチのダウンロード
パッチは、上記エンジニアリングブログの下の方にリンクがあるので、そこをクリックしてダウンロードします。

2.パッチを実行
あとは、以下をターミナルで実行します。
ここでは、shellがzshの環境なので、bashに切り替え、Downloadsフォルダにダウンロードしたパッチ、"Apache_2-4-51_Patch.sh"を実行します。
パッチ名が違う場合はダウンロードしたパッチ名にして実行してください。

```
% echo $SHELL
/bin/zsh
% chsh -s /bin/bash
Changing shell for <account>.
% cd Downloads
sudo bash /Users/<account>/Downloads/Apache_2-4-51_Patch.sh
Password:<パスワードを入れる>
```

3.FileMaker Server 再起動
パッチを充てて問題なく終わったら、FileMaker Serverを再起動します。
構成＞一般設定＞サーバー情報にある、「データベースサーバーの停止」をクリック。
![スクリーンショット 2022-06-12 16.39.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/0ef061a4-2c0b-b3a1-680f-bed9dbec9ce9.png)
アナウンスが出るので、「データベースサーバーの停止」をクリックして本当に停止。
![スクリーンショット 2022-06-12 16.45.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/29e11582-bdb2-7de5-3dae-54aeb8db81fd.png)
起動します。
![スクリーンショット 2022-06-12 16.45.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/e35c4293-975e-8bdc-dc60-9e61d736f627.png)


# 影響のある範囲
FileMaker Serverへファイルをアップロードする時以外にも、FileMaker Data APIの問題（？）も解決する、とエンジニアリングブログに書いてあるので、Data APIでなんか変だな、という時は同じくパッチを充てたほうが良さそうです。
HTMLの基礎 Part1

## HTMLの基本
### 要素
HTMLを構成するために必要な成分で、いくつもの要素が積み重なってHTMLは構成される。
その要素は、タグ「< >, </>」で囲って使用する。

```
HTML
<body>
# HTMLの基礎になる部分を記述するところ。
# ブラウザ上には表示されない。
</body>
<head>
# ブラウザ上に表示することを記述する。
</head>
```

### head部分の記述例
* HTMLのタイトル
* 装飾するためのCSSのファイル指定
* 外部ファイルの読み込み
* SNSのシェアされた時の表示の仕方


### bodyの記述例
```
<body>
    <h1>
      見出し
    </h1>
    <p>
      1つ目の段落
    </p>
    <p>
      2つ目の段落
    </p>
    <p>
      3つ目の段落<b>この部分は太字</b>
    </p>
  </body>
```

#### h1~h6要素
文章の見出しになる部分であり、1から6になるにつれて文字の大きさと太さが小さくなる。

#### p要素
文章の段落を表す部分であり、<>で囲んだ部分が一つの段落として表示される。
Webページ内の大半はこのpを使用して表示されることが多い。

#### b要素
文字を太字にする。
<>で囲んだ部分が太字に表示される。

## body内のリンクの設定の仕方
他ページへリンク設定するためにはa要素を使用する。

#### a要素
aで囲った箇所をリンク設定することができる。

#### href属性
href属性でリンクの移動先を指定できる。

```
<a href="sample.com">"リンク部分"</a>
```
上記のように表示することによってリンクの設定ができる。
【例】
表記：＜a href="https://www.google.com"＞Googleへのリンク＜/a＞
表示： <a href="https://www.google.com">Googleへのリンク</a>

といったような表記・表示の仕方ができる。
glTF 2.0 の Accessor と BufferView の違い

## 疑問

glTF 2.0 のアクセサ（`accessor`）とバッファビュー（`bufferView`）の違いがよく分からなかった。
![AccessorとBufferViewとBufferの関係](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185533/0e0c5ac4-8738-d722-5b11-b0933e5a6309.png)
バッファビューはバッファの特定範囲を示すもので、アクセサはバッファビューの特定範囲のデータ型を示すもの。

それなら、例えば、バッファビューの持つ情報を全部アクセサに持たせて、**アクセサがバッファの特定範囲を直接参照するようにすれば、バッファビューは不要になるんじゃないか？**

glTF 2.0 の[公式の仕様書](https://github.com/KhronosGroup/glTF)と[チュートリアル](https://github.com/KhronosGroup/glTF-Tutorials)はひと通り読んだが、アクセサとバッファビューが別々に存在するその辺りの理由は分からなかった。もしかしたら glTF のコミュニティでも議論が行われていたかもしれないが、さすがにコミュニティ上の全記事を探して読む気にはなれない。

ということで、自分で考えてみた。

## 考察

まず、バッファのデータは、適切なタイミングで適切な量をグラフィックメモリに転送する必要がある。具体的には、メッシュを描画する際に、アクセサが（バッファビューを介して間接的に）参照するバッファデータをグラフィックメモリに転送する必要がある。

では、1 つのメッシュを描画するために、**どの範囲のデータを GPU に転送すれば良いのか。**

バッファビューがない場合には、まずメッシュの持つプリミティブをすべて走査し、プリミティブのターゲットが使用するアクセサを寄せ集め、それらのアクセサが指示する範囲をすべて包含できる**最小の転送範囲**をいくつか決定する。

しかし、メッシュを描画するたびに最小転送範囲を計算するくらいなら、それを**最初から定義して glTF に持たせておけば良い。** それぞれの最小転送範囲は glTF ファイルの完成時には静的に定まるものだし、同一メッシュ内のアクセサの示すデータを近くに寄せ集めるなど、うまく設計すれば最小転送範囲を小さく効率よくまとめることができる。

これが、アクセサとは別にバッファビューが存在する理由のひとつなのかと思う。

## 結論

メッシュを描画する際に、まず必要となる（1～数個程度の）バッファビューのデータをグラフィックメモリに転送する。
そして、アクセサの情報はシェーダーに渡し、シェーダーがグラフィックメモリ内のデータを個別にアクセスする。

つまり、

- バッファビューはグラフィックメモリへのブロック転送用
- アクセサはシェーダーでのアクセス用

ということで、自分の中では落ち着いた。

もちろん、glTF の仕様書にはここまでの言及はないので、アクセサを転送の単位として使ったりするような自由な設計も許されるはずだとは思う。
LCS(最長共通部分列）をPythonで解く


## この記事でやること

前回の記事で、2つの文字列の類似度を表す**レーベンシュタイン距離**と**ジャロ・ウィンクラー距離**について説明した。

https://qiita.com/tetsuro731/items/1bb1700b687d391c3c7b

2つの文字列の一致度を表すものとして、他に**最長共通部分列**(Longest Common Subsequence: **LCS**)がある。
今回の記事はこのLCSの紹介をした後にPythonを使って実装してみる。

## LCSとは？
定義は簡単で、単に二つの文字列の共通部分を表す。
この共通部分は必ずしも連続した文字である必要はなく、例えば"aa"と"xayaz"のLCSは"aa"となる。

この実装は競プロではお馴染みのdp (dynamic programming)で解けることが知られている。

## 解いてみる

AtCoderの過去の問題でちょうどいい問題があったのでPythonで解いてみる。

https://atcoder.jp/contests/dp/tasks/dp_f

```Python
str1 = input()
str2 = input()
dp = [[0] * (len(str2)+1) for i in range(len(str1)+1)]

for i, vi in enumerate(str1):
    for j, vj in enumerate(str2):
        if vi == vj:
            dp[i+1][j+1] = dp[i][j] + 1
        else:
            dp[i+1][j+1] = max(dp[i+1][j], dp[i][j+1])
#print(dp[len(str1)][len(str2)])

ans = []
i = len(str1) - 1
j = len(str2) - 1
while i >= 0 and j >= 0:
    if str1[i] == str2[j]:
        ans.append(str1[i])
        i -= 1
        j -= 1
    elif dp[i+1][j+1] == dp[i][j+1]:
        i -= 1
    elif dp[i+1][j+1] == dp[i+1][j]:
        j -= 1
ans.reverse()
print(*ans, sep='')
```

最初のenumerateのloopでdpを計算し、それを用いて2回目のwhileのloopで共通する文字列を計算している。
単に"最大で何文字共通するか"だけを知りたければ最初のloopの後にdpを出力すれば求まる。

この値が大きいほど「**共通部分が大きい = 2つも文字列が類似している**」とイメージできそうだ。

## まとめ
- 最長共通部分列 (LCS)について紹介した
- LCSはdpを使って計算することができる
統計学学び直し

<h1>統計1から学び直し</h1>
<a href="https://bellcurve.jp/statistics/course/">https://bellcurve.jp/statistics/course/</a><br>
こちらのサイトを参考に統計を学び直していきます。

#### 狙い：統計を学び直し、統計検定2級に合格する

# step0.初級編 1-1 まとめ
1. データをグラフにするときは1つのセルに一つの情報
2. データに含まれる数は質的変数と量的変数の二つ

このコンテンツは基本的に読んだ通りのため、難しいと感じるポイントはないだろう。
唯一、難しいポイントは質的変数と量的変数の見方だろう。

## 質的変数とは
簡単に言うと「単純に数値で表すことが出来ないデータ」という事である。
例えば、血液型なんかはA,Bなどの文字であらわすことが出来る。
（厳密にいうと違うかもしれないが、こんな感じだと思っておけば基本は大丈夫だろう、と思う）

## 量的変数とは
こちらは質的変数とは違い、数値で表すことが出来るデータの事である。
鉛筆の数は1や2、身長は173などである。（単位はあるが）

その横に書かれている離散変数や連続変数に関しては、いったんサイトに書いてある理解をしておいてもらえればと思う。

## クイズ
ここからは、この章の確認クイズである。

・名前は量的変数か、質的変数か
・体重は量的変数か、質的変数か
・以下のグラフは正しいか、正しくない場合は直すべき点を考えよ
| 番号 | 体長 | 性別 | 毛色 | 一人っ子 | 足の数 |
|:-:|:-:|:-:|:-:|:-:|:-:|
| 1 | 100m  | オス | 黒 | 〇 | 4 |
| 2 | 100cm | 男 | 白 |   |   |
| 3 | 10km | メス | 茶 | × |   |
コマンドを繰り返し実行するツール（Linux＆Windows）

## 目的
一定のサイクルでアクセスを飛ばしたり、一定量のファイルに対して処理をする場合、コマンドを繰り返し実行するツール（shファイル/batファイル）があると作業の時短になり便利です。今回は、私が使用しているサンプルソースを公開します。

## Windows編（コマンドプロンプト用batファイル）
### batファイル
任意のコマンドを一定間隔繰り返し実行する。（疎通確認や負荷試験で使用する）

``` sh:sample.bat
@echo off
echo ======================================
echo Tool Start
echo %date% %time%
echo parameter1(Loop): %1
echo parameter2(Wait): %2
echo ======================================
FOR /l %%n IN (1,1,%1) do (
  rem 実行コマンド
  echo Do Command
  timeout /nobreak %2 > nul
)
echo ======================================
echo Tool Finish
echo %date% %time%
echo ======================================
```
### 実行方法
コマンドプロンプトを開き、batファイルに引数を渡して実行する。
parameter1(Loop): 10 ⇦ 繰り返し回数
parameter2(Wait): 2 ⇦ コマンド実行後に待つ秒数
上記の場合、2秒間隔で10回コマンド実行するとなる。
```
sample.bat 10 2
```
### 実行結果
```
======================================
Tool Start
2022/01/01 12:06:09.06
parameter1(Loop): 10
parameter2(Wait): 2
======================================
Do Command
Do Command
Do Command
Do Command
Do Command
Do Command
Do Command
Do Command
Do Command
Do Command
======================================
Tool Finish
2022/01/01 12:06:29.13
======================================
```

## Linux編（.shファイル）

### shファイル【準備中】
【準備中】
任意のコマンドを一定間隔繰り返し実行する。（疎通確認や負荷試験で使用する）

``` sh:sample.sh
#!/bin/bash
echo ======================================
echo "Tool Start"
date
echo "parameter1(Loop): $1"
echo "parameter2(Wait): $2"
echo ======================================

for i in `seq 1 $1`
do 
  # コマンド実行
  echo Do Command
  sleep $2
done

echo ======================================
echo Tool Finish
date
echo ======================================

```

### 実行方法
shファイルに引数を渡して実行する。
parameter1(Loop): 10 ⇦ 繰り返し回数
parameter2(Wait): 2 ⇦ コマンド実行後に待つ秒数
上記の場合、2秒間隔で10回コマンド実行するとなる。
```
sample.sh 10 2
```

### 実行結果
【準備中】


## 【おまけ】バックグラウンド実行【準備中】
【準備中】
LineLoginが「正常に成功しませんでした」のエラーで自分以外がログインできない

# 概要
LINE DevelopersでLineLoginチャンネルを作成し、Webアプリ等に組み込み、ローカルや検証環境等では自分はログインできるのに、それ以外の人がログインしようとするとエラーで弾かれる問題。
検索しても、ユーザの視点の記事しか出てこず、開発者視点の情報がなかった。

# 解決策
![スクリーンショット 2022-06-12 154214.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513355/18d53f8b-6514-384e-1c40-e4a9e2141d10.png)



ここをpublicにするだけ。

ただ、不可逆操作っぽい（？）ので、開発中は厳禁。
【TypeScript入門 #12】Index SignatureとMapped Typesの違い

# 概要

オンラインサロン IT_KINGDOM で、typescript について学んだことを備忘録としてメモしていきます。

# 学習内容

- Index Signature
- Mapped Types

# Index Signature、Mapped Types とは

オブジェクトの型宣言でフィールドを指定することなくプロパティを指定できる機能

# Index Signature

- Index Signature の基本形( `key` :フィールド名。名称は任意、`K1`: key の型、`K2`: プロパティの型)<br>
  `[key:K1]: K2;`
- オブジェクトのプロパティを動的に追加する
- Index Signature を使えば、型宣言で未定義のプロパティを使うことができる

```typescript
export type User = {
  name: string;
  age: number; // index signatureでstring指定しているためエラー
  [key: string]: string; // プロパティ名はkeyでなくても良いが、慣例的にkeyがよく使われる
};

const user: User = {
  name: "taro",
  age: 20,
  account: "たろたろ", // 型宣言で[key: string]: stringと宣言されているため、プロパティaccountが明示的に宣言されてなくても使える
  job: "Software Engineer", // 同上
};
```

# Mapped Types

- Mapped Types の基本形(`P` :引数型、`K` :制約型、`T` :テンプレート型)<br>
  `[P in K]: T;`
- オブジェクトのプロパティ名を限定する
- ジェネリクスと組み合わせて型を作り出す（本稿では解説しない）

```typescript
export type User = {
  name: string;
} & PersonalData;

type PersonalData = {
  [K in "height" | "weight"]: number;
};

const user: User = {
  name: "yama",
  height: 174,
  weight: 60,
};
```

# 参考サイト

[サバイバル TypeScript](https://typescriptbook.jp/reference/values-types-variables/object/index-signature)<br>
[Mapped Types のあれこれ](https://zenn.dev/qnighy/articles/dde3d980b5e386)
毎回探してコピーするのが面倒になってきたので、雑なQiita投稿用のテンプレートを作っておく



# タイトルを書くよ

# 結論（どうすればよいか）

```src
ここをコピペして、こう
```
https://qiita.com/2f0833e717/items/af5a8852f81615c40389.md

# エラー内容
あれば

# 余談
あれば

# エラー対応　参考：
URL
heroku add-on 追加方法メモ

# herokuアドオンの追加方法
1.以下のコマンドを実行しherokuにログインする。

```:ターミナル
heroku login 
```
この際、以下のコメントが返ってくる。「何かキーを押してブラウザでログインしよう」ということなので、適当にエンターキーでも押してみる。

```:ターミナル
heroku: Press any key to open up the browser to login or q to exit:
```


すると、ブラウザが立ち上がり、メールアドレス、パスワードの入力フォームが立ち上がるので、入力する。以下の画面が表示されてログイン完了。

<img width=400 height =400 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2449886/3878863c-9e13-83da-64c0-e0989b0a73f7.png">

また、dockerで環境を構築している場合は、以下のコマンドも実行し、heroku上のContainer Registoryへのログインも行っておく。
```:ターミナル
heroku container:login
```
<br>

2.ログインした状態のままターミナルに戻り、以下のコマンドを実行し、対象となるherokuアプリを作成
```:ターミナル
heroku create アプリ名
```
3.次のコマンドを実行してアドオンを追加。今回はherokuでmysqlを使用するためのJAWSDBというアドオンを追加している。（JAWSDBなどのアドオンでは利用に際してクレジットカード情報の登録が必要となるので、herokuのアカウント情報から必要に応じて登録のこと。）
```
heroku addons:create jawsdb:kitefin
```
また、herokuのページから直接アドオンを追加する場合、作成したアプリのResourcesのAdd-onsの項目で、アドオンを検索して追加することができる。↓
![スクリーンショット 2022-06-12 15.22.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2449886/995d60c3-90e2-2e80-fd5a-6cf01c992732.png)
【SNSでよくみるアレ】について調べてみた

# はじめに
OGPってなんだろうと思い、調べてみたので自分なりまとめました。
（下書きにずっと放置されていたので、とりあえず投稿しておきます）


# OGPについて
## OGPとは？
OGPはOpen Graph Protcolの略。
OGPを設定しておくことで、URLが添付された際に設定したタイトルやURL、画像、詳細文などが表示されます。

↓これ

https://ogp.me/


リンクだけのものと比べ、どんなサイトなのかイメージがつきやすいです。
確かに、SNSでリンクだけのものよりOGPが設定されているサイトの方がアクセスしてみようと思えます。


## 使用するには
OGPを使うには、サイトにメタデータを追加する必要があります。

:::note info
メタデータとは、本体であるデータに関する情報が書かれたデータのこと。
:::

OGPを使用する際、全てのページに必要なプロパティが以下の4つ。

- og:title 　　オブジェクトのタイトル
- og:type　　オブジェクトのタイプ
- og:image　 オブジェクトの画像URL
- og:url　　　オブジェクトの正規URL

また、headタグに以下のprefixを指定する必要があるようです。
`<html prefix="og: https://ogp.me/ns#">`


上記のもの以外にも様々なメタデータを指定することができます。

title,image,urlあたりは想像つきますが`og:type（オブジェクトのタイプ）`はどんなものがあるのかイメージがつかなかったので実際に見てみます。

### オブジェクトのタイプ　og:type
ページの種類を指定するもの。いくつかの例を以下に記載します。

#### meta property="og:type" content="website"
Webサイトのトップページ
例）The Open Graph protocolのサイト
※ちなみにここにオブジェクトのタイプについてまとまっているので、詳しく知りたい方はこちらをみてください。

https://ogp.me/#types


#### meta property="og:type" content="article"
記事ページ
例）Qiitaの投稿記事
※良かったら是非読んでみてください！

https://qiita.com/sasao3/items/640cebfc14f725927acc


#### meta property="og:type" content="product"
製品の紹介ページ
例）AppleWatchの購入ページ

https://www.apple.com/jp/shop/buy-watch/apple-watch


このように用途によって、使い分けているようです。



### 実際に見てみる
meta部分で指定した値が、以下の画像のように表示されています。

画像は、OGPの設定をしているサイトURLをTwitterに添付した際のものです。

![スクリーンショット 2022-05-21 14.24.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/381376/4c910f1b-c0b8-b814-d95b-ed3b7aad90bd.png)


# まとめ
今回はOGPについてざっくりでありますがまとめてみました。
今まで特に気にしていなかったのですが、こうやって設定しているんだなぁと思いました。

思いのほか、簡単に設定できるんだなと思いました。もしWebサイトなどを作る際は設定しようと思います。

以上。
asdfでPHPやNode.jsをインストールしたかった

# はじめに

複数言語のバージョン管理ができる[asdf](https://asdf-vm.com)でPHPやNode.jsをインストールしたかったというお話。
結論、 PHPプラグインのAppleシリコン対応がまだ不十分なのでHomebrewでPHPをインストールしつつ、Dockerでマルチバージョン環境を作るのが良さそう。

## 環境

Mac mini m1

# asdf

https://asdf-vm.com

```bash
brew install asdf
echo -e "\n. $(brew --prefix asdf)/libexec/asdf.sh" >> ${ZDOTDIR:-~}/.zshrc
```

# Node.js

```bash
brew install gpg gawk
asdf plugin add nodejs https://github.com/asdf-vm/asdf-nodejs.git

asdf list all nodejs lts
asdf global nodejs lts
```

で現時点で最新のLTS(16.x)がインストールされます。

# PHP

ざんねんながら現時点ではasdfでPHPを使うのは面倒そうなのでHomebrewを使います。

https://github.com/asdf-community/asdf-php

https://github.com/asdf-community/asdf-php/issues/124

8.1(最新バージョン)はバージョン指定なし、それ以前はバージョン番号を@以降に付けて(例：php@7.4)インストール

```bash
brew install php
```

Xdebugをインストール

```bash
pecl install xdebug
```

php.iniの先頭にモジュールの読み込みが追加されているので

```ini:/opt/homebrew/etc/php/8.1/php.ini
zend_extension="xdebug.so"
```

その直下にモード設定を追加

```ini:/opt/homebrew/etc/php/8.1/php.ini
zend_extension="xdebug.so"
xdebug.mode=debug
```

一般的なお作法通りに設定するなら

```ini:/opt/homebrew/etc/php/8.1/php.ini
[xdebug]
zend_extension="xdebug.so"
xdebug.mode=debug
xdebug.client_host=127.0.0.1
xdebug.client_port=9003
```

ついでにデフォルトタイムゾーンの設定も追加

```ini:/opt/homebrew/etc/php/8.1/php.ini
;date.timezone =
date.timezone = "Asia/Tokyo"
```

複数バージョン使いたいならDockerの利用を検討するのが良さそう。
【React】TypeScriptでuseRefを使う際の型の使い分け

## はじめに
以前`useRef`の2つの使い方について記事にまとめたが、`useRef`を`TypeScript`のもとで使う際には、2つの使い方それぞれで必要な型定義が異なることを学んだので、今回は型の使い分けについてまとめる。

https://qiita.com/hinako_n/items/1d041e71820148e8bf61

## useRefの2つの使い方
まずはuseRefの2つの使い方を簡単におさらいする。

#### 使用方法① ： DOMへのアクセス
- 例えば<input id="name" /> のinput要素にフォーカスしたい場合、`JavaScript`で `document.getElementById('name').focus()` というように書くが、これと同じことを`React`で行いたい場合に`useRef`を使ってDOMへアクセスすることができる。
- hooks誕生以前からの`ref`の使い方。

#### 使用方法② ： 値を保持する
- `useState`も値を保持することが出来るが、`useState`と違い`useRef`では値を更新してもコンポーネントの再レンダリングが起きないというのが特徴。
- hooks誕生により新たにできた`ref`の使い方。

## useRefの返り値
では2種類の使い方を確認したところで型の話に入るが、実は`useRef`の返り値にも `RefObject`もしくは`MutableRefObject` という2種類の型がある。

#### RefObject

- hooks登場以前からのRefObject。
- .currentの初期値はnullであり、.currentに `readonly` の制約が付いている。

#### MutableRefObject

- hooksによりできた値を保持するという用例に対応するため、 `readonly` の制約がないMutableRefObjectが設けられた。

#### 返り値の型の使い分け

上記の特徴を見ると察することができる通り、DOMへのアクセスの為（従来からの用例）に使う場合は `RefObject` 型を使い、値の保持の為（hooks以後の用例）に使う場合は `readonly` 制約のない `MutableRefObject` 型を使う。

そしてこれら返り値の型は**初期値と引数の与え方**によって決まるので、使用方法に合わせた初期値と引数を与える必要がある。

## DOMへのアクセスに使う場合の型付け

DOMへのアクセスの為に`useRef`を使う場合は、返り値を `RefObject` 型にする必要がある。

どうすれば `RefObject` 型になるのかというと、**初期値がnull** かつ **型定義にnullを含まない** ようにすると、返り値は `RefObject`型となる。

　
よってDOMへのアクセスに使う場合は、以下のようにする。
- 初期値はnullを与える
- 型引数は、中身に入りうるDOMノードもしくはReact要素を与える

```jsx
function Home() {
  const ref = useRef<HTMLInputElement>(null)
  return <input ref={ref}>Home</input>
}
```

仮に上記の条件を満たしておらず返り値が `MutableRefObject`型となった場合、ref属性に設定する箇所でTypeScriptのエラーが出る。

```jsx
function Home() {
  const ref = useRef<HTMLInputElement>()    // MutableRefObject型になる
  return <input ref={ref}>Home</input>      // エラー
}
```

![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1208065/69fc7b33-c350-819e-0a46-085726353b85.png)



## 値の保持に使う場合の型付け

値の保持に使う場合のは返り値を `MutableRefObject`型にする必要があるが、上記の `RefObject型`の条件に当てはまらない場合は、全て`MutableRefObject`型となる。

なので通常のTypeScriptのセオリー通り、なるべく初期値を与え、型引数は初期値からの推論に任せるか明示的に書くと良い。

```jsx
// 推論されて `MutableRefObject<number>` になる。
const ref = useRef(0)

// `MutableRefObject<string | null>` になる。
const ref = useRef<string | null>(null)
```

仮に `RefObject型`なのに`current`プロパティに値を代入しようとすると、「読み取り専用プロパティであるため、'current' に代入することはできません。」というエラーが出る。


## さいごに
`TypeScript`を使っていると、思わぬところで躓き時間がかかることがある。

今回は返り値の型の違いを知ったことで`useRef`についての理解も深まったので、今後もその場しのぎで`TypeScrpt`のエラーが消えればOKではなくしっかり理解して`TypeScript`を活用していきたい。


## 参考記事

https://zenn.dev/berlysia/articles/624bc1aaffda58

https://ja.reactjs.org/docs/hooks-reference.html#useref
Playframeworkにsbt-sassify(Sass)を導入する

# はじめに
こんにちは。
こちらの記事では、Playframework に scss を導入する方法を記しています。
すこしでも参考になれば嬉しいです！

## 実装手順

* app/assets ディレクトリ以下に scss ファイルを配置する。
* sbt-sassify のプラグインを plugin.sbt に追記する。
* main.scss に複数の scss ファイルを import しておく。


### app/assets ディレクトリ以下に scss ファイルを配置する。

ディレクトリ構成は以下のようにしております。
scssファイルを配置する際は、必ず `app/assets ディレクトリ以下` に配置するようにしてください。
（public 以下に配置したところ、うまくコンパイルが通らずエラーになってしまうため） 

```
app
└ assets
  └ stylesheet
    └ main.scss
    └ page
      └ top.scss
    └ utils
      └ _reset.scss
      └ _layout.scss
```


### sbt-sassify のプラグインを plugin.sbt に追記する。

sbt-sassify を利用できるように、 `project/plugins.sbt` ファイルに下記を追記しておきます。
このプラグインを追加しておくことで、sbt 起動時に scss ファイルがコンパイルされるようになります。

```scala:project/plugins.sbt
addSbtPlugin("io.github.irundaia" % "sbt-sassify" % "1.5.2")
```


### main.scss に複数の scss ファイルを import しておく。

複数の scss ファイルを作成していくと思うので、 main.scss ファイルに import しておきます。
これにより import したファイルで sass の記法が使えるようになります。
エラーの原因になるので、import の最後には `;` をつけておきましょう。

```scss:main.scss
@import "utils/reset";
@import "utils/layout";

@import "page/top";
```

css が読み込まれる `.scala.html` ファイルには、 `stylesheet/main.css` を指定しておきましょう。 `main.css` ファイルは、 `main.scss` ファイルがコンパイルされると作成されるファイルなので、新たに作成する必要はないです。

```html:app/views/main.scala.html
<link rel="stylesheet" media="screen" href="@routes.Assets.versioned("stylesheet/main.css")">
```


<br>

## 参考

- [公式ドキュメント](https://www.playframework.com/documentation/2.8.x/AssetsSass)
- [GitHub](https://github.com/irundaia/sbt-sassify#options)
- [PlayFrameworkでSassを使う方法(簡単)](https://qiita.com/jun__tech/items/f130fdfe4a4a1e9c546c)


# おわりに
ここまでPlayframework に sass を導入する方法についてまとめました。
Qiitaの記事とドキュメントを参考にしたおかげで、意外と簡単に導入することができました！！！

以上、最後まで読んでいただきありがとうございました！
csvファイルとpandasのDataFrameの変換

# はじめに
データ分析において、Excelで物足りないときはpandasを使うと便利なことが多々あります。
今回はcsvファイルを想定しての記載です。

# 環境
- python3:3.9.12
- numpy:1.21.5
- pandas:1.4.2 

# pandasのDataFrameからcsvファイルへの保存
```python:write_csv.py
import numpy as np
import pandas as pd

dates = pd.date_range("20220612", periods=6)
df = pd.DataFrame(np.random.randn(6, 4), index=dates, columns=list("ABCD"))

df.to_csv('sample.csv')
```

# csvファイルからpandasのDataFrameへの読み込み
```read_csv.py
import pandas as pd

df = pd.read_csv('sample.csv', index_col=0)
print(df)
```

# おわりに
ご覧いただき、ありがとうございました。
こちら初めての投稿になります。励みになりますので、お気軽にご意見・ご感想いただけると幸いです。
よろしくお願いします。
Power Automateのデスクトップレコーダーを使って、エクセルデータの集計作業を自動化してみた!!

## 　**なぜ今？**
 　半年ほど前から販促グループのメンバーが、チラシ商品販売結果の集計に苦戦している姿をよく見かけていたので、集計方法を詳しく聞いて実際に自分で試してみました。実はこの手法はかなり手間がかかるのと、会社の集計システムの気分（アクセス状況）により時間がかかり過ぎることがあって、僕がPowe BI Desktopで集計結果（会社が制作したものに手を加えて5分程で集計できる）をpbixファイルで渡そうとしたのですが、パワビの操作ができないのでエクセル形式で欲しいを言われました（わが社はこれが普通:sweat:）。
　そこで今回は、pbixファイルで作成したデータをcsvでエクスポートして、昨年挫折したPower Automateのデスクトップレコーダー機能を使って、皆が見やすいエクセルファイルを作成してみました。

## 　**用意したもの**
pbixファイル
Power Automate Desktop

## 　**作業手順**
#### ①Power Automateのデスクトップレコーダー起動の準備をする。
![スクリーンショット (149).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669820/ce542170-3b79-e350-6d2d-f49ca2c67f1b.png)
 　まずは１から５までのフローを完成させます。
こちらの記事を参考にしました。https://lacotasu.com/?p=4039
![スクリーンショット (154).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669820/d8535513-edb5-7766-4da0-fd87963087c5.png)
　１「Excelの起動」のアクションを選び「次のドキュメント」を選択、ドキュメントパスはデスクトップに張り付けたファイルを指定します。
![スクリーンショット (155).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669820/d73b1a77-e8ae-095f-7d64-91cc2d07c74a.png)
　次に２の「ウィンドウを待機する」アクションを選んでウインドウの検索は「タイトルやクラスごと」を選択。タイトルはファイル名を記入して、半角スペース、ハイフン、半角スペース、Excelと入力します。
![スクリーンショット (158).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669820/0b30d790-565a-5102-e176-72867a8b26b3.png)
　３のアクションは「キーの送信」をチョイスして「特殊キーの挿入」ボタンで「左windowsキー」、「方向キー」で「上」を選んでください。
![スクリーンショット (160).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669820/d2bca338-c24b-444b-8756-79f6d1a5831d.png)
　４番目のアクションは「ウィンドウにフォーカスする」で、ウインドウ・クラスの欄は「XLMAIN」と入力。アプリケーションがExcelだからという意味のようです。
![スクリーンショット (162).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669820/60355e69-f80c-14c1-3d08-a7795543a914.png)
　最後の５番目のアクションは「Excelワークシート内のセルをアクティブ化」を選び、上記のようにA1のセルからに設定します。
これで準備完了!!　いよいよデスクトップレコーダーによるフロー製作に入ります。
#### ②デスクトップレコーダー起動する。
　最初にアクション５までを実行して、エクセルファイルを開いた状態にします。
![スクリーンショット (164).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669820/27aac4e6-f77d-0635-3ea0-5628ee3359cb.png)
　次に赤丸のボタンを押すとダイアログボックスが出現して、エクセル上の加工作業を「６．コメント」のフローから自動的にアクションを書き込んでくれます！！
## 　**完成品！？**
![スクリーンショット (146).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669820/34dce1e9-5448-8c3e-6c48-9dc122cd22b7.png)

　上の画像はPower Automateで処理したときの最終画面です。このエラーを解消しようと頑張ってみたのですが、無理でした。ピポットテーブルの内容を別のシートにコピペして、視覚的に見やすく加工しようという最終工程でしたが、私の技術では乗り越えることができませんでした。またエクセルデータを加工する様子（Power Automateで一番感動したとこ）は、機密漏洩になりかねないほど店名や商品名、売上等が映っているため、ここではPower Automateのフローの動画をアップさせていただきます。
https://twitter.com/mvminami2022/status/1535838141726490624
## 　**振り返ってみて**
　実はPower Aotomateのレコーダー機能にものすごく期待しておりました。しかし実際には６番目からのアクションを２０回以上行ってできた作品が上のフローでした。よく出ていたエラーメッセージがこちらです。
![スクリーンショット (140).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669820/58c8e530-64a2-fdc5-ab18-c80abfe0d955.png)
　画像にあるようなドラッグアンド・ドロップに失敗しました「UI要素の移動中にエラーが発生しました」とか「クリックに失敗しました」等です。対策としてエクセルファイルの加工作業の際、ピポットテーブルの挿入作業は該当のタブが開いていても必ず「挿入タブ」を左クリックして「ピポットテーブル」を選択、「ピポットテーブルのフィールド」上でも一度フィールドを左クリックして認識させ操作を継続しました。結果的には自分の考えていた作品にはなりませんでしたが、良い学びの機会でした。
　このフローの実行を見た他のメンバー（20代）は、非常に驚いていました。自分もチャレンジしたいと（部下にしようかな）。今後は時間を確保して、チャレンジしていきたいと思います。それとPADのソースコードの添付がうまくいきませんでした。teamsのほうに添付させていただきます。お疲れ様でした。。
Re:ゼロから始めるSNS作り生活（二週間目＋α）

# どんな記事？
プログラミング初心者が、イチからSNSサイトを構築する過程を記録したもの。
誰かに「勉強の状況はどう？」と訊かれたときに提示できるよう、Qiitaの記事として投稿しています。
# 前置きや前提
### 完成品のイメージ
- コンセプトは「勉強記録をポストしたり、問題を出しあったりできるSNS」
- 自分の勉強記録をポストし、閲覧できる
- 友人の勉強記録に対し、コメントやミニクイズを投稿できる
- 自分と似た目標を持つユーザーを検索し、フォローできる
- フォローしている人の勉強記録を一覧表示する「タイムライン」もある
- 当然レスポンシブデザイン（本記事では未実装）
### 制作の目的
- プログラミング技術の向上
- あわよくば友人にこのSNSを使ってもらいたい
### これまでの経験や知識
- WordPressで構築されたサイトの調整経験
（2年弱従事していたため、HTML・CSS・PHPとも基礎はわかっていたつもり）
（通信をはじめバックグラウンドの知識はゼロ）
- 大昔にイチからサイトを構築した経験
（HTMLしか使用していない化石のようなサイトのみ）
- JavaScriptとSQL：1年ほど前にProgateで一応学んだだけで、ほぼ忘却
- DBの知識：応用情報技術者の合格ラインにギリギリ触れられる程度


# 先週まで
https://qiita.com/I-know-way/items/9cf244a8b78b37062194 

# 今週の日記
### 10日目（6月6日）
- 「勉強記録」画面の入力項目を減らし、簡略化
- 「勉強画面」に編集機能を実装
### 11日目（6月7日）
- 「勉強画面」にデータ削除の機能を実装
- 「友達検索機能」の実装（未完成）
【ハマったドツボ】
ユーザーの入力情報に当てはまるデータを`select`する機能を作成
→結果がnullにしかならない
→途中で生成している変数をすべて`echo`（配列なら`var_dump()`してから）
→異常はなさそう……。ここで2時間くらい悩んで、結局寝る
→起きたら気づいた。「そもそも当てはまるデータがテーブルにない！」
### 12日目（6月8日）
- 「友達検索機能」の実装（完成）
- 「フォロー機能」の実装
- 「タイムライン機能」の実装
【悔しい点】
SQLの`JOIN`を使えばスマートに実装できそうな場所があったが、
どうにもうまくできず、結局スマートでない方法で実装してしまった……。
DBにアクセスする回数が増えてしまい、低速化につながっているはず。
### 13日目（6月9日）
- 「勉強記録」に画像をCRUDする機能
### 14日目（6月10日）
- 「コメント」のうち、CRUDのRだけ
- 共通部分としてまとめられる箇所を発見したため、一部を共通部品化
（設計段階でそこを見抜けという話ではある）
### 15日目（6月11日）
- 「コメント」のうち、CRUDのCRおよびD（ただしDはバグ発生中）
- 「勉強記録」や「コメント」をREADする権限の調整
- 共通部分を部品化（昨日よりさらにコードの可読性がアップした）
### 16日目（6月12日）
- 残ったバグ潰し
【得た教訓】
PHPベースでコードを組んでいるのだから、無理にJSを使おうとしない。
可能ならば言語は統一したほうが良さそう。
- コメント機能の完成
# 来週以降実装したいこと
- 「勉強記録」の「詳細」にもURLがある場合、自動でリンク化
- 変更前の画像データの自動削除機能（プロフィール画像のみ初週に実装済）
- GET通信でデータをやりとりしていた部分をPOSTに→セキュリティの改善
- レスポンシブデザイン化
- よりセキュアに、より高速に
- 全体的なデザインのブラッシュアップ
- androidアプリ化
- ファイル名や変数名のルールを明確にし、脱スパゲッティ化
6.1 (標準) 指数型分布族

## 方針

有名な分布はほとんど全て指数型分布族に属する．分布が指数型分布族に入っていると色々と嬉しいことがある．

![知ったこと-60.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1702786/cee54387-1ef9-b639-a0ea-51d4f42be0c8.jpeg)

答案では，(6)ガンマ分布と(7)ベータ分布で上記の期待値母数の計算方法を利用した．

## 答案![6. 2周目-2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1702786/429f3361-bd0d-20d9-8f3d-e2c47008b07c.jpeg)
![6. 2周目-3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1702786/5d4db188-56f7-f08f-20dc-d3e4edf6713b.jpeg)
![6. 2周目-4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1702786/5e71e906-a6ee-483e-f5a3-e1eb3c446f22.jpeg)
![6. 2周目-5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1702786/bbf4f61f-c5da-3c00-8dc0-d0876fed2659.jpeg)
![6. 2周目-6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1702786/0b6f6d54-8aef-6255-d0b7-11e2e3991cae.jpeg)

## 参考文献

- 『[現代数理統計学の基礎](https://www.kyoritsu-pub.co.jp/bookdetail/9784320111660)』(久保川達也　著)
Laravelを始めよう

Dockerを使ってLaravelを始めるときにひっかっかったところを記録していきます。

# Laravelをインストールする
ucan-labさんの記事[最強のLaravel開発環境をDockerを使って構築する
](https://qiita.com/ucan-lab/items/5fc1281cd8076c8ac9f4)を読みながらLaravelプロジェクトを始めました。
詳しくは記事を参照していただきたいのですが、
1. ucan-labさんの指定しているリポジトリをクローンする
1. docker-laravelディレクトリへ移動
1. `make crete-project`を実行
以下make create-projectの内容
    1. srcディレクトリを作成
    1. dockerが、イメージの作成、（build）
    1. イメージの構築・コンテナの構築・起動（up）
    1. laravelのインストール

の手順を踏みます。
しばらくかかるので待つ。:rice_ball: :tea:
# Laravelを起動
Ubuntuで`make up`を実行。終わった後にlocalhostへ接続します。
![スクリーンショット 2022-06-04 185042.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416489/021b1006-dada-1313-2a51-56bae0cc4788.png)

成功～:clap_tone2::clap_tone2::clap_tone2:

# 編集してみる
適当なところを編集し、保存しようとするとこんな画面が。
![スクリーンショット 2022-06-04 184438.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416489/4ded3416-b2c3-cff3-3981-6b5119074067.png)
管理者権限でやっていいの・・・？と思いながら再試行を選択するもうまくいかず。
## ファイルの権限を確認
`ll`コマンドでファイルの権限を確認。
```bash
$ ll
-rw-r--r--  1 root root473 MAY 1 00:00 hoge.txt   //適当
```
srcディレクトリ内がroot権限になっていました。
## 権限を一般ユーザーに変更する。
```bash
sudu chown -R ユーザー名:グループ名 変えたいディレクトリ名
```
`-R`で指定したディレクトリ内で再帰的に処理を実行してくれるので、
全部のファイルに対して`chown`しなくてよくなる！
### ユーザー名？私は誰？どこに書いてあるの？な人（私）へ・・・
```
$ whoami
```
【GAS】GoogleフォームとGoogleチャットを連携

## 概要
Googleフォームに回答があった際にメールで通知する機能はあるけど、お知らせは「新しい回答があります」だけでちょっと不便。

GoogleチャットやスペースにはWebhookが設定できるので、GASでフォームと紐づけてみた。

思った以上に簡単。Googleってよくできてるぅ(ﾟДﾟ)

## 準備
・フォームを作成
・チャットルームかスペースを作成
・チャットにWebhookを追加しURLを取得

それぞれ丁寧なサイトがあるので割愛。

## 完成形
フォームに回答があると「〇〇さんが回答しました」とチャットが飛んでくるようにする。

## コード
フォームの一つ目の質問で名前を尋ねているとしたらこんな感じ。該当フォームのスクリプトエディタに記述する。

```javascript
function formtochat(e) {

  const URL = 'webhookのURL';

  var response = e.response.getItemResponses();
  var name = response[0].getResponse(); //一つ目の回答を取得

  var message = {'text' : name + 'さんが回答しました'};
  var options = {'payload' : JSON.stringify(message),
                 'myamethod' : 'POST',
                 'contentType' : 'application/json'
                };
  UrlFetchApp.fetch(URL,options);
}
```

## 仕上げ
こちらのコードを、フォームの送信で作動するようトリガーにセットして完成。

## 検討
今回は一つ目の質問の回答をチャットに送っているけど、それ以外に欲しい情報があるなら、`name`の時と同じように取得して`message`に組み込んでやればOK ^^)b

### おしまい
OracleCloudのUbuntu20.04インスタンスでカーネルアップデート後カーネルパニックを起こして起動できない場合の対処方法

# はじめに
OracleCloudのVM.Standard.A1.Flexシェイプを使用したUbuntu20.04インスタンスでカーネル5.13.0-1033-oracleにアップデートしたところカーネルパニックを起こし動作しなくなった場合への対処法
他のインスタンスを使わずCloudShellを使用した解決法です

# 原因の解明
カーネルパニックを起こしてしまうと当然SSHも繋がらなくなるのでOracleCloudのCloudShellを利用する
インスタンス->リソース->コンソール接続->CloudShellの起動
すると勝手にインスタンスに接続してくれます
ただ、カーネルパニックを起こしているので何も表示されません。

CloudShell開きっぱなしでそのままインスタンスを再起動してみましょう(ハングしているので直ちに電源断でいいと思います)
しばらくするとCloudShellにカーネルログがずらぁ～っと出てくると思います
`end Kernel panic - not syncing: Fatal exception in interrupt`
で止まったらCtrl+Fで`kernel BUG at`と検索してみましょう
`kernel BUG at include/linux/fs.h:3104!`が引っかかればこの記事の対象です

因みに原因はDocker絡みで、docker.serviceをdisableさせれば正常起動出来るらしいですが、自分が試した限り、
- ハングしない一瞬のタイミングを狙うのは無理(VM.Standard.A1.Flexの場合)
- 他インスタンスにアタッチしてシンボリックリンクを解除する→解除してもカーネルパニックを起こす

# 解決法
## カーネルを一時的に変更して起動する
CloudShell開きっぱなしで再起動しましょう
シェルの内容がクリアされたタイミングでEscキーを連打
UEFI(?)が表示されたらBootManager->Oracle ~~ Volumeを選択
またEscキー連打
そうするとGrubが表示されるので「Advance Options for Ubuntu」を選択
問題の1033カーネル以外を選択して起動させます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/701723/fa2e56fe-c3e9-b7a1-bead-263b3d6dc9ec.png)

SSHなりシェルなりでログインするときちんとさっき選択したカーネルで起動します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/701723/e6e5aade-8d71-15f8-b70b-0f29c84eb688.png)

## カーネルのアップデート&固定
`sudo nano /etc/default/grub`でGrubの設定ファイルを開きます
```
GRUB_DEFAULT=saved
GRUB_SAVEDEFAULT=true
```
この2行を追加します(GRUB_DEFAULTはデフォルトで0になってると思います)
`sudo update-grub`を実行してパッチ済みカーネルである`5.13.0-1034-oracle`を落とします

再起動して、再度「Advance Options for Ubuntu」を開くと`5.13.0-1034-oracle`が追加されているのでそれを起動します
これでカーネルパニックを起こすことなく正常に起動することができます
Grubの設定で最後に選択したカーネルを保存して次起動するときもそのカーネルを使用してブートされます

お疲れ様でした。

# 参考
https://zenn.dev/ycrack/scraps/a0d5ed5ca8b457

https://support.oracle.com/knowledge/Oracle%20Cloud/2875812_1.html
GitHubとVSCode、vscode-revealを使って、知識のストック→アウトプットをシームレスに行える環境を整えた話

## はじめに

学習の記録の選択肢として「紙」「ローカルPC内」「メモアプリ」などなど、様々な選択肢がありますが、

- エンジニアらしくGitHubで管理してみた
- そのままプレゼン資料を作れる状態にした  
という話です

この記事のプレゼン資料は[こちら](https://yoyoyo-pg.github.io/vscode-reveal-sample/)

---

### 対象

- プレゼン資料作成に手間をかけたくない人
- 学習記録をどこかに統一で管理したい人
- 初心者向け記事です

---

### 前提

- Gitの基本的な使い方が分かること
- Git、VSCodeがインストール済であること

---

### 今回伝えたいこと

- VSCodeの拡張機能最強！
- mdは便利！そしてreveal.js最強！

--

最近はGithubで`.md`ファイルの形式で学習記録を残すようにしています。  
`.md`ファイルで残すことによって、情報が整理されるのもありますし、  
Reveal.jsを使うことで、その情報を殆ど加工なしにスライド作成できます。

---

### Reveal.jsとは

- HTMLでスライドを作れる
- mdでも書ける

--

ただし、reveal.jsの環境構築が面倒  
VSCodeの場合「vscode-reveal」という拡張機能をインストールすれば簡単に使えます！

---

### vscode-revealの使い方

- VSCode上で`.md`ファイルを編集し、そのプレビューのような形でプレゼン資料が作成できます。
- `"---"`の区切りで横スライド、`"--"`の区切りで縦スライドを追加できます

--

こちらのQiita記事を参考にしました。
[これからのプレゼン資料は reveal.js を使おう](https://qiita.com/Targityen/items/40ae4795e2cb77c1adc6)

---

### GitHub連携

- 今度は「GitLens」という拡張機能をインストールします
- 「GitLens」によりGitの各種操作をVSCodeのGUI上で実行可能です
- 2022/06/18追記：詳細はこちらの記事「[VSCodeの拡張機能「GitLens」で快適なGitライフを手に入れよう！」](https://qiita.com/yoyoyo_pg/items/e7f010dd13f99e61beba)をご覧ください

--

ここまでの準備で、GitHub上で管理している`.md`ファイルをそのままスライドにしたり、そのままQiitaに移すことが可能になります

---

### 拡張機能まとめ

- 最低限「GitLens」と「vscode-reveal」
- 文法チェックで「markdownlint」も入れておくと便利

---

### まとめ

- 「`.md`での情報を様々な場所で利活用できる」のがメリットだと思います
  - そのままQiitaに転用でき、スライドも作成できる
- `.md`記法に従いつつ、アウトプットを意識することで、情報を簡潔にまとめる癖がつきます

--

基本的にマークダウンの内容を書き換えなくて大丈夫なので、日々の「インプット」「アウトプット」をシームレスに行えるのが魅力的な部分です！

--

また、今回の記事は「vscode-reveal」でスライドとして使える状態にした`.md`ファイルを、そのままコピペして持ってきています（Qiita用に書き換えなくて良いので便利！）  

※唯一`.md`ファイルの上部に記載する、vscode-revealのスライド用の記載だけはQiita投稿時に消しています。

```md
---
theme: "night"
title: "GitHubとVSCodeの話"
enableChalkboard: false
slideNumber: true
---
```

---

### おまけ

GitHub＆GitHubPagesで今回の記事のファイル＆vscode-revealで生成されたプレゼンページを公開しました！

- `.md`ファイル置き場
<https://github.com/yoyoyo-pg/vscode-reveal-sample>

- プレゼンページ（reveal.jsでのプレゼン資料の使用感をお試し頂けます！）
<https://yoyoyo-pg.github.io/vscode-reveal-sample/>
【JavaScript 関数ドリル】中級編のfindLastIndex関数の実装アウトプット

## findLastIndex関数の課題内容

\_. findLastIndex関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#findLastIndex

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。
https://js-drills.com/blog/findLastIndex/

## 課題に取り組む前の状態

- 解答を見ずにできそうだと思った。

## 課題に取り組んだ後の状態

- 解答例と同じように処理できるものができたので自信につながった。



## findLastIndex関数の実装コード（答えを見る前）

```javascript
function findLastIndex(array, predicate, fromIndex = array.length - 1) {
  for (let i = fromIndex; i >= 0; i--) {
    const value = array[i];
    if (predicate(value)) {
      return i;
    }
  }

  return -1;
}

var users = [
  { user: "barney", active: true },
  { user: "fred", active: false },
  { user: "pebbles", active: false },
];

const result = findLastIndex(users, function (o) {
  return o.user == "pebbles";
});
console.log(result);
// => 2

```

##　findLastIndex関数の実装コード（答えを見た後）

```javascript
// 同じ
```
AWSにKeycloak立ててみる

Keycloak初心者ですが、AWSにインストールしてみたいなぁと思いまして試行錯誤しております。

一番参考にしたのは、唯一の日本語書籍である以下の本です。

『認証と認可 Keycloak入門 OAuth/OpenID Connectに準拠したAPI認可とシングルサインオンの実現』


【動機】

私は中小企業に勤務していますが、いくつかの社内開発のWEBシステムがあります。
シングルサインオンはおろか、IDパスワードも個別のWebシステム毎に登録されており、バラバラです。
今後IT化を進める上で、IDパスワードの一元管理が重要と思っているからです。


![Keycloak-donyu-1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1339875/d417d801-c504-04a8-7336-7771414b807f.jpeg)


![Keycloak-donyu-2.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1339875/ca7fee0c-31fd-13dc-6311-f0cec1ef9513.jpeg)


やりたい事は、各システムに実装しているログインの仕組みを外して、Keycloakで一元管理です。
まだKeycloak環境構築で試行錯誤している段階なので、アプリの改修の仕方はわかっておりません。
Keycloakは色々なユースケース（使い方）があるそうですが、一番簡単そうなリバースプロキシ型を採用します。

（acme.comの所は、ご自分のドメインに適宜読み替えてください。余談ですが、実際に、このドメインがある事を今知りました）


【つまづきポイント１】

最初慣れているAmazonLinux2で、サーバー構築を始めたのですが、Apacheのモジュールのインストールの所で、わからなくなってしまいました。

初心者のため、『認証と認可 Keycloak入門』この本になるべく合わせるのが良いと考えて、ubuntuで、EC2インスタンス作成から、やり直しました。

インスタンス作ったは、いいが、ログインできない！

AmazonLinuxだと ec2-userでログインしますが、OSとしてubuntuを選択した際は、ec2-userの代わりにubuntuと入力する必要があるんですね。知りませんでした。


【つまづきポイント２】

最初『認証と認可 Keycloak入門』を参考にサーバー構築を進めていたのですが、この本では、localhostと書いてあって実際にドメイン名を取って、どうするの説明が書かれていません。

検索していたところ、以下の記事が私のやりたい事に近い事がわかりました。
こちらを参考にさせてもらいました。

https://qiita.com/yagiaoskywalker/items/44a0bc6034083477628f

↑こちらの記事です。
参考にしたQiitaの記事と、上の方に書いてあるAfterの図のポート番号が違っているのは、『認証と認可 Keycloak入門』に合わせてインストールしていたため、ポート番号が本に書かれているのに、沿っています。

【つまづきポイント３】

参考にしたQiita記事では kc-httpd.example.comが 80(http)となっております。
私は両方ともhttpsにしたかったのですが、「ロードバランサーって、２つ必要なの？」と思いました。
東京リージョンのロードバランサー約１９ドル。中小企業なので、なるべく月額コストは、おさえさえたいところ。社内開発の社内システムなので、同時接続数も、たかが知れています。

調べたところ、ターゲットグループを２つ作る事で、Afterの図のような構成が取れる事がわかりました。
１つのロードバランサーの料金で運用できそうです。
ELB(ALB)の所で、https → http 変換をしています。

【つまづきポイント４】

『認証と認可 Keycloak入門』では、データベースの変更について、あまり記載がありません。
postgresqlを推奨している様子ですが、バージョンも書いてありません。

検索していたところ、keycloak 本家のドキュメントに記載がありました。

https://www.keycloak.org/server/db

どれにしようか、かなり迷いますが、mariadb  Ver10にしてみます。

次は、Undertow request failed HttpServerExchange{ GET /management}:こんな
エラーが出てきました。

検索したところ、以下の記事がありました。

https://stackoverflow.com/questions/72040055/wildfly-org-jboss-nio-filenotfoundexception-invalid-file-path-with-windows-j

JDKを  11.0.14にすると、発生しなくなるそうです。
まだローカル環境(Windows)でしか試していませんが、たしかに発生しなくなりました。


本日は、ここまで。
最後までお読みいただきありがとうございました。
OpenCV(3.4.10) C++用DockerFile

## Dockerfile

```Dockerfile
FROM ubuntu:20.04

RUN apt-get update && apt-get install -y tzdata

ARG HOME="/root"
# timezone setting
ENV TZ=Asia/Tokyo 

RUN apt-get update && apt-get install -y vim wget git dpkg-dev cmake g++ gcc binutils libx11-dev libgtk2.0-dev pkg-config libavcodec-dev libavformat-dev libswscale-dev tesseract-ocr libtesseract-dev libavcodec-dev libavformat-dev libswscale-dev libv4l-dev libgstreamer-plugins-base1.0-dev libgstreamer1.0-dev libgtk2.0-dev libgtk-3-dev libpng-dev libjpeg-dev libopenexr-dev libtiff-dev libwebp-dev unzip

RUN wget https://github.com/opencv/opencv/archive/3.4.10.zip 
RUN wget https://github.com/opencv/opencv_contrib/archive/3.4.10.zip 

RUN unzip -q 3.4.10.zip
RUN unzip -q 3.4.10.zip.1

RUN ln -s opencv-3.4.10 opencv
RUN ln -s opencv_contrib-3.4.10 opencv_contrib

RUN cd opencv && mkdir build 
WORKDIR opencv/build

RUN cmake -D CMAKE_BUILD_TYPE=RELEASE -D CMAKE_INSTALL_PREFIX=/usr/local -D OPENCV_EXTRA_MODULES_PATH=/opencv_contrib/modules ..
RUN make -j9
RUN make install
```
【JavaScript 関数ドリル】中級編のfindIndex関数の実装アウトプット

## findIndex関数の課題内容

\_. findIndex関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#findIndex

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。
https://js-drills.com/blog/findIndex/

## 課題に取り組む前の状態

- 解答を見ずにできそうだと思った。

## 課題に取り組んだ後の状態

- サンプルの処理結果と同じように処理できるものができた。
- 解答例では変数を定義して第二引数の関数への引数として渡している。どのような関数が第二引数に渡されるのか分からないので、元の配列を破壊されないように、解答例のように変数に代入する方法を取らないといけないと実感。


## findIndex関数の実装コード（答えを見る前）

```javascript
function findIndex(array, predicate, fromIndex = 0) {
  for (let i = fromIndex; i < array.length; i++) {
    if (predicate(array[i])) {
      return i;
    }
  }
  return -1;
}

var users = [
  { user: "barney", active: true },
  { user: "fred", active: false },
  { user: "pebbles", active: true },
];

const result = findIndex(users, function (o) {
  return o.user == "barney";
});
console.log(result);
// => 0
```

##　findIndex関数の実装コード（答えを見た後）

```javascript
function findIndex(array, predicate, fromIndex = 0) {
  for (let i = fromIndex; i < array.length; i++) {
    const value = array[i];
    if (predicate(value)) {
      return i;
    }
  }
  return -1;
}
```
絶対してはいけない。仕事やってるアピールするためにgithubに自動でコミットする方法。

仕事やってるアピールするためにgithubに自動でコミットする方法です。
絶対にしないでください。


https://github.com/PeterTakahashi/auto-commit

このgithubリポジトリをforkにして、このコマンド実行するだけ
```
git clone {git_url}
git remote set-url origin {git_url} 
sh commit.sh
```

草生えますw
![image3_s.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264684/74740a8f-8b81-21cb-db06-c8bb77a6d64d.jpeg)
【JavaScript 関数ドリル】中級編のdropWhile関数の実装アウトプット

## dropWhile 関数の課題内容

\_. dropWhile 関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#dropWhile

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。
https://js-drills.com/blog/dropWhile/

## 課題に取り組む前の状態

- 前回取り組んだdropRightWhile関数と同じように第二引数は関数の場合のみとの前提で実装するなら、解答を見ずにできそうだと思った。

## 課題に取り組んだ後の状態

- サンプルの処理結果と同じように処理できるものができた。
- 解答例ではshift関数を使用していたので、そちらの関数を使用した場合も実装できるようになりたい。


## dropWhile 関数の実装コード（答えを見る前）

```javascript
function dropWhile(array, predicate) {

    const droppedArray = [];

    for (let i = 0; i < array.length; i++) {
        if (!predicate(array[i])) {
            droppedArray.push(array[i]);
        }
    }

    return droppedArray;
}

var users = [
    { 'user': 'barney',  'active': false },
    { 'user': 'fred',    'active': false },
    { 'user': 'pebbles', 'active': true }
  ];
   
const results = dropWhile(users, function (o) { return !o.active; });
console.log(results);
  // => objects for ['pebbles']
```

## dropWhile 関数の実装コード（答えを見た後）

```javascript
// 同じ
```