OmniAICreator/Qiita-1.07M huggingface dataset:
【jQuery】親要素、子要素、兄弟要素の取得方法

##要素選択方法

|No|文法  |使い方  |説明  |
|---|---|---|---|
|<b>1</b>|parent()  |$("li").parent()  |親要素を探す  |
|<b>2</b>|children(selector) |$("ul").children("li")  |子要素を探す|
|<b>3</b>|find(selector) |$("ul").find("li")  |全ての子（孫）要素を探す。　＝$("ul li")|
|<b>4</b>|siblings(selector) |$(".first").siblings("li")  |自分を除く、兄弟要素を探す|
|<b>5</b>|nextAll([expr]) |$(".first").nextAll()  |自分より後ろの要素を探す|
|<b>6</b>|prevAll([expr]) |$(".last").prevAll()  |自分より前の要素を探す|
|<b>7</b>|hasClass(class) |$("div).hasClass("update_bt")  |当要素は指定クラスを含めているかどうかを確認。存在しているなら、Trueを返す|
|<b>8</b>|eq(index) |$("li").eq(2)  |=$("li:eq(2)")|


###例1~3
demo:https://jsfiddle.net/boababy/p6n74zht/27/

```JavaScript
<div class="grandfather">
<div class="father">
    <div class="son"> son </div>
</div>
</div>

<div class="parent">
  <p></p>
  <div>
    <p></p>
  </div>
  
</div>


<script>
    
   $(function(){

     /* 親要素を検索し、親要素に子要素を追加 */
        $(".son").parent().append("後付けの子要素だよ！")

    /* parent()は一階層上の親を探せるですが、より上の先祖要素はparents（）で検索する*/
        $(".son").parents(".grandfather").append("親の親だよ、つまり爺爺だ")

    /* 子要素を検索し、内容を追加*/
        $(".parent").children("p").text("手動追加の内容だよ")

   /*子孫要素を検索*/
        $(".parent").find("div p").html("孫だよ")

   });

</script>

```

###例4〜6,8
demo: https://jsfiddle.net/boababy/7Lw0chr2/26/

```javascript
<ol>
  <li>お</li>
  <li>は</li>
  <li class="item">よ</li>
  <li>う</li>
  <li>〜</li>
</ol>


<ul>
  <li>こ</li>
  <li>ん</li>
  <li>に</li>
  <li>ち</li>
  <li>は</li>
</ul>

<dl>
  <li>こ</li>
  <li>ん</li>
  <li>ば</li>
  <li>ん</li>
  <li>は</li>
</dl>

<script>
$(function(){

/*兄弟要素を検索*/

$("ol .item").siblings("li").addClass("items")

$("ul li").eq(2).nextAll().addClass("nextAll")

$("dl li").eq(2).prevAll().addClass("prevAll")


}
); 

<style>
  .items{
  color:#FFFF00;
  font-weight:normal;
}

.nextAll{
  color:#FF6633;
  font-weight: bold;
}

.prevAll{
  color:#003366;
  font-weight: bolder;
}
</style>
</script>
```
【Salesforce】テキスト型のyyyy年MM月dd日を日付に変換して年齢を算出する方法

外部のDBやメールなどからデータをSalesforceに取り込んだときに、フォーマットができないものをテキスト型で取得するということがあるかと思います。
今回は実際にあった事例を基にyyyy-MM-ddの日付型でなく、yyyy年MM月dd日のテキスト型から年齢を算出してみました。
#yyyy年MM月dd日を日付に変換する
1.こちらのテキスト型項目を使っていきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2003505/77930a50-3950-04e8-a79c-758f0b0588f2.png)

2.戻り値が日付の数式項目を下記の数式を参考に作成します。
　今回のように複数条件がある場合はネストさせることで実現できます。

```
DATEVALUE(
    SUBSTITUTE(
        SUBSTITUTE(
            SUBSTITUTE(参照元のテキスト項目,"年","-"),
        "月","-"),
    "日","")
)
```
3.年月日を置換して日付のフォーマットに直したことで日付に変換することができました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2003505/d4f20c55-253e-caaa-6e3d-b6ead9c5ac3d.png)

#yyyy年MM月dd日から年齢を算出する
上記の応用として日付に変換した後、その値を使って年齢を出すこともできます。

```
TEXT(
    FLOOR(
        ( TODAY() - DATEVALUE(SUBSTITUTE(SUBSTITUTE(SUBSTITUTE(参照元のテキスト項目,"年","-"),"月","-"),"日","")) ) / 365.2425
    )
)+"歳"
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2003505/d5c17d32-bcbe-80c0-77e8-ce8515f3b0d5.png)

#参考文献
https://help.salesforce.com/s/articleView?id=sf.customize_functions_i_z.htm&type=5
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2003505/56446d9f-6732-94f0-2a52-b3d944f3b35f.png)


#まとめ
フォーマットに困った時はテキスト型で取り込んでSUBSTITUTE関数を使って置換してあげると良さそうです。
AWS マネジメントコンソールで大事な情報を隠す動的マスキング

# はじめに

AWS マネジメントコンソールには、ユーザー名や AWS Account ID やクレデンシャルなど、あまり他の方に見られたくない情報が表示されます。技術ブログに投稿するためのスクリーンショットやライブデモなどで、こういった情報を自動的にボカシ・モザイク・マスクを入れることが出来ます。

次のようなユースケースに便利です。

- 技術ブログの執筆のために、手動で AWS Account ID を隠すのが面倒
- デモで画面共有を見せるときに、見られたくない情報をかくしたい
- 動画撮影したいけど、あとからマスク処理するのが面倒



次の URL で、ソラコムのテクノロジー・エバンジェリスト 松下さんが紹介されている方法を参考にしながら、AWS マネジメントコンソールでの動作を確認してみます。
https://blog.soracom.com/ja-jp/2021/08/12/dynamic-masking-webpage-using-css3/



# どんな見た目になるのか

例えば、AWS のマネジメントコンソールでは、右上にログインに使った IAM User 名などが表示されます。この動的マスキング機能を使うことで、実際のブラウザ上で自動的にマスクされます。すごい。

![image-20211218114913906.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1002774/5b6f5b56-7d4a-ded5-23d8-b3edff4fbb82.png)



それでは手順を確認してみましょう。



# Stylus をインストールする

Chrome に次の拡張機能をインストールします。Firefox でも動くらしい。

https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne

![image-20211218113645387.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1002774/58e79337-c4ca-df9e-8b45-790380b81ed2.png)





# AWS マネジメントコンソール用 css をインストールする

公開されている GitHub にアクセスします。
https://github.com/ma2shita/stylus-aws-management-console

Getting Started に書かれている、「stylus-aws-management-console.user.css」をクリックします。

![image-20211218113841802.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1002774/31014d0f-31ff-16a7-1c10-83f5add2e9c2.png)



Stylus にこの css をインストールする画面に遷移するので、左側のインストールをおします。なお、内容が心配な方は右側に内容が表示されているので確認するとよいでしょう。

![image-20211218113938947.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1002774/02838298-4005-6734-da41-af0b16df7fea.png)



CSS のコメントを見ると、いくつかのサービスに対応しているように見えます。

- AWS IoT Core
- AWS Lambda
- Amazon CloudWatch Logs
- Amazon SNS



GitHub で公開されているため、自分の必要なマスクを追加して Pull Request も投げられます。好きなようにカスタマイズしていくのがよいでしょう。



# 動作確認

これで設定完了です。インストールが非常に簡単でとてもよいですね！それでは、実際に AWS マネジメントコンソールにアクセスしてみると、右上のユーザー名がマスクされています！すごい。

![image-20211218114913906.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1002774/8ce96d1c-39d1-543a-ba03-1c82d65d26fe.png)



Lambda の ARN がマスキングされています

![image-20211218122409931.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1002774/42927cc6-cc21-cc27-6da2-c508f0c2fd75.png)



# まとめ

Stylus を使うことで、自動的に AWS のマネジメントコンソールでぼかしが表示されることを確認できました。対応しているサービスでは非常に便利に使っていくことができます。また、より使い方に合わせたぼかしが必要な場合は、簡単にカスタマイズができます。紹介ブログでカスタマイズ方法が記載されているので、次のURL を参考にカスタイマイズしていくのもよいとおもいます。

https://blog.soracom.com/ja-jp/2021/08/12/dynamic-masking-webpage-using-css3/

# 余談 : 独自 Repository

ソラコム松下さんが所有されている Repository に Pull Request をしておりますが、細かい部分で自分でカスタマイズをやり切りたい部分がでてきたので、Fork して独自追加をしています。こちらも参考にしていただけると良いと思います。

https://github.com/Sugi275/stylus-aws-management-console/raw/main/stylus-aws-management-console.user.css
実は優秀なサービス[Google my maps]について解説実践

#はじめに
どうもこんにちは。
今回は、旅行や出張で役に立つGoogle my mapsというサービスを解説していきます！
皆さんは、旅行や出張で下調べ、計画を立てていますでしょうか？
場所とかならGoogle mapで調べればいいでしょと考える方もいるかと思います。
そんな方にお勧めなのがGoogle mapをよりよくするGoogle my mapsです。

#Google my mapsって何？
Google my mapsとはGoogleが提供するサービスの一つで目的の場所をマーカーで示してくれます！
そして、Googleのドライブに保存することができGoogle mapに反映できます。
＜使い方＞
１．検索欄で場所を選びます。
![2021-12-18 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2301722/574d13a0-c1cc-7d34-aef6-2881e4ef39e5.png)
２．場所を選択したら地図に追加するのボタンを押してレイヤーに追加

![2021-12-18 (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2301722/fc212c97-8791-fe5c-4978-3e41c76470e1.png)
３．バケツのマークを押してアイコンの選択
![2021-12-18 (7).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2301722/86500a39-f673-80b0-0a9b-67950bb87df0.png)
※保存は自動で行われます
#Google mapで実装する方法
Google mapで実装する方法はいたって簡単です。
メニュー欄からマイプレイスを選択し
自分が作った地図を選び実装です。
![2021-12-18 (10).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2301722/69fb34e6-7e5d-eb39-74b8-a09758f3f637.png)
試しに私は趣味であるカードゲームの東北でやっている大会の会場をまとめました。
[cs会場]（https://www.google.com/maps/d/edit?hl=ja&mid=1vmrEejTmnQ2z3dEAtYSQp82d7ylQF-Fc&ll=38.89745284500016%2C140.67307675000004&z=7）
#おわりに

今回はGoogle my mapというサービスの紹介・使い方についてでした。
このサービスを利用すれば旅行先や出張先でわざわざ検索をする必要がなくなります。
事前に準備は必要がありますが、当日になれば成果が出ます。
Google my mapを使って充実した生活を送ってください。
以上になります。最後まで読んでいただきありがとうございます。
M1 Macで機械学習やPythonはMiniforgeを使う

現時点(2021年12月)で、M1 Macで機械学習用のPython環境構築は、Miniforgeを使うのが一番の簡単なので手順をメモしました。


# Homebrewをインストール

こちらから指示に従って[Homebrew](https://brew.sh/index_ja)をインストール。

# Miniforgeをインストール

[Miniforge](https://github.com/conda-forge/miniforge)をインストール。Miniforgeのパッケージ管理システムである「conda」を使えるようにします。

```
# Miniforgeをダウンロード
% wget https://github.com/conda-forge/miniforge/releases/latest/download/Miniforge3-MacOSX-arm64.sh

# インストール
% bash ./Miniforge3-MacOSX-arm64.sh
# ここでいっぱいEnterキーを押して、"yes"をタイプしてEnterキー

# Miniforgeのcondaを起動
% source ~/miniforge3/bin/activate
```

# Tensorflowをインストール

機械学習で使ういろいろなものをここでインストールします。まずは、mlという環境を作ります。

```
% conda create -name ml python=3.9
% conda activate ml
``` 

最初に、Tensorflowをインストールします。

```
% conda install -c apple tensorflow-deps -y
% python -m pip install tensorflow-macos
% python -m pip install tensorflow-metal
```

うまくいけば、以下のプログラムを実行すると、バージョン情報が表示されます。

```test-tf.py
import tensorflow as tf
print(tf.__version__)
```

# Transformer をインストール

次に、自然言語処理に役立つ Transformer をインストールします。

```
% conda install -c huggingface transformers -y
```

その他、機械学習でよく使うパッケージをインストールします。

```
% conda install -c conda-forge scikit-learn -y
% conda install -c conda-forge pandas -y
% conda install -c conda-forge jupyterlab -y
% conda install -c pytorch pytorch torchvision -y
```

うまくうけば、以下のプログラムが動きます。

```test-transformers.py
import transformers as tr
print(tr.__version__)
```


# 音声関連のライブラリ

その他必要に応じてインストール。
諸々の機械学習関連のライブラリのコンパイル環境など。

```
% conda install numpy decorator attrs cython
% conda install llvmdev
% conda install cmake
% conda install tornado psutil xgboost cloudpickle pytest
% conda install -c conda-forge librosa -y
```

# Condaの使い方

ターミナルを立ち上げたあと、以下のようにして、condaの環境を開始します。

```
% source ~/miniforge3/bin/activate
% conda activate ml
```

環境一覧の確認:

```
% conda env list
```

Jupyter notebookを起動する場合、以下のコマンドを実行します。

```
% jupyter notebook
```

![スクリーンショット 2021-12-18 12.58.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33180/7d960eb9-991e-ba37-bb5e-56b959c46a1d.png)



# 二度目移行の始め方

一度設定してしまえば、後は、以下のようにしてminiforgeのconda環境を始めます。

```sh
# Miniforgeのcondaを起動
% source ~/miniforge3/bin/activate
% conda activate ml
```




# 参考

- [Apple-M1-BERT](https://github.com/octoml/Apple-M1-BERT)
- [From Zero to Transformers on Apple M1 Chip](https://medium.com/@alfarruggia/from-zero-to-transformers-on-apple-m1-chip-e5d9afa35f5)
- [【M1 Pro/Max対応】M1 Mac環境構築ベストプラクティス](https://qiita.com/c60evaporator/items/aef6cc1581d2c4676504)
- [HuggingFaceのwav2vecで音声認識をしてみる](https://www.yurui-deep-learning.com/2021/04/04/huggingface%E3%81%AEwav2vec%E3%81%A7%E9%9F%B3%E5%A3%B0%E8%AA%8D%E8%AD%98%E3%82%92%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B/)
  - [信号処理とか音楽の分析に大活躍しそうなlibrosa](https://qiita.com/tom_m_m/items/91ba624dd8507bc0b746)
  - [M1搭載MacにおけるPytorchのインストール](https://qiita.com/onkyo14taro/items/6ce72982ae5a43fdee63) ... 既にpipでPytoarchインストールできるようになったけど、まだ諸々の問題がある
Angular13 開発メモ

# `window`イベントを追加したい

```typescript:hoge.component.ts
import {
 HostListener
} from '@angular/core';

export class HogeComponent implements OnInit {
  @HostListener("window:scroll",["$event"])
  onWindowScroll(event) {
  }
}

```

# DOMを取得したい

```typescript:hoge.component.html
<nav #nav></nav>
```

```typescript:hoge.component.ts
import {
  ElementRef, ViewChild, AfterViewInit
} from '@angular/core';

export class HogeComponent implements OnInit {
  @ViewChild('nav') nav?: ElementRef;
}

  ngAfterViewInit() {
    //DOMに初期値を設定したい場合はここに記述する
    //this.nav?...
  }
```
WUni232cって何？なんでGetitで10.3以外取れないの？etc..

こんにちは
やましょうです。

#前提
これはDelphiを使って232cコンポーネントWUni232についての話です。
**WUni232cは、Windows用の232cコンポーネントです。**
これにAndorid版を付けたものがUni232cコンポーネントになっています。
実際にはuni232cコンポーネントからAndroid版を除いたものが、Wuni232cです。
余談ですが、iosでできないの？って話もあるのですが、作ることできますが、
リンゴさんが認証してくれないと思われます。
(なお、私はリンゴとそういう契約もしていますのでお仕事があったら連絡くださいませ。）


#Delphi 10.3 だとGet itで取得できた。
こんな感じに取得できました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31412/f91c736d-eed9-3e77-925a-4b249ac21744.png)
現在でも10.3では取得できるのですが、10.4以降はGet itでは取得できません。

#なぜ10.4以降取得できないのか？
どうも毎verごとに申請が必要な様です。
毎度、コンポーネント申請にこちらも時間を取られるわけにはいきません。


#現在の入手先
私の会社のホームぺージ取得するか？
https://www.csd.co.jp
今回githubにもコピーを置きましたので、取得してください。
https://github.com/CSDCOJP/WUni232c


#このコンポーネントを使用する最大の利点って何？
Windowsで動かしているitemをAndroidで数時間もあれば動かすことができるからです。
FMXで作ってこのコンポーネントを使用しておければ、
弊社からUNI232Cコンポーネント（WINDOWS版+ANDROID版）購入、
コンポーネントをWUNI232C=>UNI232Cにしてusbのvid/pid等を設定すればoK!
ほぼ、メソッド、プロパティが同じであるため、

#最大の特徴
**自分でcomポートのデータを読みに行く様にしているのが特徴。**
.netをやれられた方では232cでハマまった方が多いと思いますが。
**受信が別スレッドで動くため、**そこで受信データの処理をするしかないのです。
そのため受信スレッドからdelegeteして、メインスレッドにデータの引き渡しが必要になりますよね。
また,delegateせず行った場合、時たま動かない等の問題でますよね！
基本windowであれば4kはwindows自体がキャッシュしてくれますし、
usb-232c-ic自体が250byte程度はキャッシュしてくれます。
**なので、そんなに急いで読む必要性ってないと私は考えています。**

#Androidの為の制約
送信に64byteの縛りをつけています。
これはAndoridにしたときに効いてきます。
(vclや、Andoridで使わないなら取って使って問題ないと思います。）


明日は、実際の応用例について書いてみたいと思います。


以上

やましょうでした。
iPhoneで撮った写真の向きがおかしいとき、お手軽回転メソッドで全てを解決する

iPhoneで撮った写真をフォトライブラリから取得すると、画像の向きがおかしかったりする。
![yumikoPAR52809_TP_V4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/fef21b62-1815-c70c-0f6d-115ad6b41edf.jpeg)
↓ こうしたい。
![yumikoPAR52809_TP_V4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/26974aea-dd55-0697-e13c-5fd82e957d46.jpeg)
それを一発で解決する方法です。
焦らなくて大丈夫。
このメソッドをかませれば正しい向きの画像が返ってきます。

```swift
func getCorrectOrientationUIImage(uiImage:UIImage) -> UIImage {
    var newImage = UIImage()
    switch uiImage.imageOrientation.rawValue {
     case 1:
        guard let orientedCIImage = CIImage(image: uiImage)?.oriented(CGImagePropertyOrientation.down),
              let cgImage = ciContext.createCGImage(orientedCIImage, from: orientedCIImage.extent) else { print("Image rotation failed."); return uiImage}     
        newImage = UIImage(cgImage: cgImage)
    case 3:
        guard let orientedCIImage = CIImage(image: uiImage)?.oriented(CGImagePropertyOrientation.right),
              let cgImage = ciContext.createCGImage(orientedCIImage, from: orientedCIImage.extent) else { print("Image rotation failed."); return uiImage}
       newImage = UIImage(cgImage: cgImage)
    default:
       newImage = uiImage
    }
    return newImage
}
```

🐣
****
フリーランスエンジニアです。
お仕事のご相談こちらまで
簡単な開発内容をお書き添えの上、お気軽にご連絡ください。
rockyshikoku@gmail.com

Core MLやARKitを使ったアプリを作っています。
機械学習／AR関連の情報を発信しています。

[Twitter](https://twitter.com/JackdeS11)
[Medium](https://medium.com/@rockyshikoku)
関数の途中で引数を渡せるようにすると？ 例：greet(person)with(message)

はじめに。

これはこんな風にするとどうなるのだろうか？という妄想の記事。

# 関数の途中で引数を渡す

そもそもの問題意識を共有するために、とりあえず以下を見てほしい。

```
exchange(100, 'USD', 'JPY')
```

これ、おそらくドルを円に変換する処理であろうことは想像に難くない。ただ、実際に関数の定義をみてみないとどうなってるかはわからない。
そこで実際どうなの？と見てみる。

```
function exchange(amount, fromCurrencyCode, toCurrencyCode)
    // 処理。
    return exchangedAmount
end
```

オッケー。大丈夫そう。
でも待ってほしい。

とりあえず僕の妄想を見てほしい。

```
exchange(100)from('USD')to('JPY')
```

これだと呼び出し部を見ただけで何をしているのか理解できる。

#### 妄想関数の定義
関数の定義部はこんな感じで妄想してます。

```
function exchange(amount)from(fromCodeCurrency)to(toCodeCurrency)
    // 処理
    return exchangedAmount
end

```

これできると結構楽に表現できるかなぁ、って感じることが多いんですよね。（コードの記述量とか、あとはコードを理解する時に参照するべき箇所が少ないかな？とか。）


## 今までの記法

今までの記法で「何を」とか「何から」とかを表す時には関数の引数に前置詞を付けてfromSomething, toSomething とやる方法が自然だと思う。

しかし、これをやると最初のサンプルでみたように呼び出し部から前置詞の情報が削られてしまう。

## 実際これ有用なのよ？

もちろん、前置詞の情報を表現できない問題を回避する方法は色々あると思う。
今回の例で言えば以下みたいに

```
class Exchanger
    function setFrom(currency)
        this.fromCurrencyCode = currency
        return this
    end
    function setTo(currency)
        this.toCurrencyCode = currency
        return this
    end 
    function exchange(amount)
        // this.fromCurrencyCodeとthis.toCurrencyCodeを使って変換
　　　　return exchangedAmount
    end
end

amount = 100
exchanger = new Exchanger
exchangedAmount = exchanger.setFrom('USD').setTo('JPY').exchange(amount)
```

なので結局のところそんなに必要無いのかな？とは思うけれど、あったらあったで便利なのかな、と思った次第。

追記：
こっちのがスマート？

```
from = 'USD'
to = 'JPY'
amount = 100
exchange(amount, from, to)
```

## さいごに

ただの妄想なので突っ込みどころが多々あるかと思います。
気づいた方から是非是非。
ツッコミ(あと回避策)を楽しみにしてます。
React: Create React Appでプロジェクトがつくれない

Create React Appが[v5.0にアップデート](https://github.com/facebook/create-react-app/releases/tag/v5.0.0)されました。それにともなって、プロジェクトをつくろうとしたとき、バージョンが古いからダメと怒られてしまうかもしれません。

```terminal
You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0).
```

# 解決法
npxのキャッシュをクリアしてください。

```terminal
npx clear-npx-cache
```


# エラーの内容
エラーでプロジェクトがつくれない状況はこうです。グローバルにインストールした覚えはないのですけど。

```terminal
We no longer support global installation of Create React App.

Please remove any global installs with one of the following commands:
- npm uninstall -g create-react-app
- yarn global remove create-react-app
```

そう言い張るなら、したがいましょう。

```terminal
npm uninstall -g create-react-app

up to date, audited 1 package in 179ms

found 0 vulnerabilities
```

改めてプロジェクトをつくろうとすると同じエラーです。原因は、前述のとおりキャッシュが残っているためでした。「それ、ドキュメントで早く言ってよ〜」。

[追記] これはNPXのバグのようです(「[Why you should clear your NPX cache?](https://www.npmjs.com/package/clear-npx-cache)」)。

> NPX package will be stored in the cache forever. When NPX-utility was updated, the cache will not be updated. I'll repeat, it's a bug.

[参考]「[[Solved] We no longer support global installation of Create React App](https://exerror.com/solved-we-no-longer-support-global-installation-of-create-react-app/)」
unvt/equinox コンポーネントレビュー

これは[ベクトルタイル Advent Calendar 2021](https://qiita.com/advent-calendar/2021/vt)の第19日目です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102082/0eedf77c-fe41-825d-fb58-552673e29507.png)

- 地図に自由を
- データに愛着を
- 現場に向かって

をビジョンとして進めている国連ベクトルタイルツールキット（UNVT）ファミリーですが、特に現場に向かって前進するときに重視しているのが Raspberry Pi の活用です。

なお、UNVTを用いる場合のサーバー選びについては、[サーバーの選び方 - ベクトルタイルをどう配備するか
](https://docs.google.com/presentation/d/1FFal8xxbGbSJrjk8CViYcsAXv9VfXdO9eGawKgdpuGo/edit?usp=sharing) も見ていただけると嬉しいです。

# Raspberry Pi 用 UNVT インストーラー unvt/equinox

Raspberry Pi 用 UNVT インストーラーとして、[unvt/equinox](https://github.com/unvt/equinox)を保持しています。Raspberry Pi OS 上で `curl https://unvt.github.io/equinox/install.sh | sh` とするとインストールが進むというスクリプトです。

今回は、次の図に示すような、[equinox でインストールされるソフトウェア](https://github.com/unvt/equinox/projects/1)のうち、主要なものについて説明を試みます。

[![2021-12-18 10.42.24.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102082/85aededf-fceb-a84c-55dc-507969c4d0d5.jpeg)](https://github.com/unvt/equinox/projects/1)

# システム関係
## tmux 
ターミナルのマルチプレクサです。ssh で Raspberry Pi に入った後、複数のシェルをきりかえて使えるようになります。また、ログアウトしても使っているシェルは生きたままになるので、例えば日を超えての作業の継続をするときにも便利です。

## budo
Node.js で書かれた簡単なウェブサーバです。気軽に動かせて、割とオプションのセンスも良いので使っています。

## ruby
オブジェクト指向スクリプト言語です。UNVTを構成する初期の頃は、全てを Node.js で取り扱うように心がけていましたが、ファイルシステムを扱うようなタスクでは煩雑になりがちなのと、シェルとの間のカルチャーの違いがあるように感じたので、再び Ruby を使うようになってきています。

特に、タスクを一つの Rakefile にまとめておくということをよく行っています。ファイルが増えすぎないためにも良いですし、Rakefile の記法は結局 Ruby の上の DSL なので、柔軟に回せるのが気に入っています。

Rakefile に対応するものを見つけきれなかったことが、 Ruby を再びよく使うようになった理由かもしれません。

また、改めて振り返ってみると、私は Ruby のカルチャーにアクセスできるところからヒントやメリットを得ているかもしれません。例えば、最近も、シンプルさについて次のような勉強を進めています。このような知見にアクセスしやすくなるという点で、 Ruby にアクセスしているというところからヒントやメリットを得ているかもしれません。

[Rich Hickey: Simplicity Matters (eugene yokota 訳)](https://github.com/hfu/noteworthy/issues/129)

## parallel
Parallels ではなくて、GNU Parallel です。シェルの上で並列処理をするのに便利なツールです。Raspberry Pi でタイル生産をする場合、メモリ・CPU・IOを使い切るようにタスクを設計することが重要ですが、Raspberry PiのCPUの4つのコアを十分に活用するには、多くの場合並列化が有効です。

## nginx
ウェブサーバです。おそらく軽量なので、Raspberry Piでも安心して動かせる感覚があります。

## nodejs
Node.js の処理系です。equinox でインストール処理を書くのによく苦労しています。本当に正しい入れ方がどれなのか、完全には自信がないところですが、現在のところ、equinox で導入した Node.js は問題なく動作しているようです。

# 地理空間情報関係

## Tippecanoe
ベクトルタイルの生産を担う、CLI の優れたオープンソースソフトウェアです。

## Charites
ベクトルタイルのスタイルを担う、CLI の優れたオープンソースソフトウェアです。

## vt-optimizer
ベクトルタイルの最適化を担う、CLI の優れたオープンソースソフトウェアです。

## GDAL
地理空間情報を CLI でハンドルするためによく使うオープンソースソフトウェアです。

## PDAL
ポイントクラウドデータを CLI でハンドルするためによく使うオープンソースソフトウェアです。

## Osmium
OpenStreetMap の osm.pbf ファイルをハンドルするためによく使うオープンソースソフトウェアです。

# 開発関係

## yarn
Node.js のためのパッケージマネージャーですが、npm のみでも十分かもしれないと思っており、維持するべきかどうか迷っているところではあります。コメントがあればいただけると嬉しいです。
データサイエンティストって、どうやったらなれるのか？

#データサイエンティストの求人
 うどん県にいてデータサイエンティストになれるのか？
そんな命題を解決すべく、DODAでデータサイエンティストの募集をググってみると1000件を超える募集が出てきました。
検索条件は技術職（SE・インフラエンジニア・webエンジニア）－データサイエンティストです（２０２１年１２月１３日のデータです）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2403572/9d7c8e83-bba4-a367-5360-147e80c5e118.png)
		

 結構あるなと思ったのですが、地域を見ると、関東が７８％で関西でも８％なので、結局完全に主都圏集中ですよね。ちなみに香川で限定すると１０件あるのですが、勤務地は香川ではないのです。
 そこで、「フルリモート、データサイエンティスト」でググると、Greenとかindeedで出てきます。Greenで約700件、indeedだと1700件以上あります。細かな条件考えるとそんなに簡単ではないことは想像できますが、でも募集はあるので、技術と経験さえあればうどん県でデータサイエンティストとして仕事のできる道はあるということはわかりました。
収入も他のIT技術者の水準からすると結構高いようです。人材不足なんですね。
#そもそもデータサイエンティストっていう職種はあるのか
データサイエンティストで募集があるので、データサイエンティストという職種があるのだと思っていたのですが、個々の募集の内容を見ると、ん？　結局、機械学習エンジニアだったり、Pythonプログラマだったり、データアナリストだったり・・・。
データサイエンティストという名称の役職や資格がある会社もあるようですが、ほとんどはそうではなくで、データサイエンスに必要な技術を持つ技術者をデータサイエンティストとして募集しています。
ちなみに、データサイエンティスト協会のＨＰを見ると、なんと「データサイエンティストには明確な定義がない」と明記されています。
#Pythonさえ書ければデータサイエンティストの募集に応募して大丈夫か？
データサイエンティストの募集でPythonプログラマが募集されていますのでPythonさえ書ければデータサイエンティスト募集に応募しても大丈夫かという疑問が生まれますが、まあ、直観的にデータサイエンス領域の経験が無ければ難しいだろうなと感じます。
実際に募集内容を見ても、経験があることが前提のような書き方がされていたり、逆に経験が積めますよみたいな募集が多いようです。

#データサイエンティストの募集に応募できる技能、経験ってなに？
データサイエンティスト協会のHPでは、データサイエンティストに必要な能力を
###データサイエンス力
###データエンジニアリング力
###ビジネス力
で定義しており、Pythonプログラマはデータエンジニアリング力に位置づけられます。
なので、Pythonプログラマはデータエンジニアリング力に軸足を置いているのですが、それ以外の技術者と連携するために、データサイエンス力とは何か、ビジネス力とは何か、ある程度の知識が必要だということです。

https://www.datascientist.or.jp/dskentei/

やはりデータサイエンス全般を知っておくことが重要で、まずは、この辺をクリアする努力は必要なようですね。

あとは経験が必要なのですが、いわゆるOJTですよね、これは難しい。
データサイエンスで仕事を進めている会社に入ればその環境があり、経験が積めますが、まずはそこにどうやって潜り込むか。高いハードルで、このことが、首都圏集中の原因の１つとなっているように思います。まあ、データサイエンスに限ったことではないのですが。
#地域でのデータサイエンティスト育成に向けて
結局、うどん県にいて、データサイエンティストを目指すのは難しいのでしょうか？
そんなことはないのです。オープンソースのプログラム言語のRubyはご存じだと思います。「Rubyの聖地松江」って知っていますか？島根県の松江です。でもRubyの聖地であり、町を挙げてRubyプログラマを育成したり、企業も集まってきているようです。

https://rubycitymatsue.jp/ja

もともとは、Rubyの開発者のまつもと氏が松江在住から始まったようですが、地域にRubyの環境を作ったことで、松江でRubyが普及し、ビジネスに繋がっていく歴史がHPで見ることができます。
うどん県でもデータサイエンスコミュニティみたいなものが育てば、地域のその中で、データサイエンティストとしての経験が積める環境ができるかもしれません。
コンパクトシティで行政もデジタル化推進を強力に進めているうどん県であれば可能なのではないでしょうか。
応用情報技術者試験を合格するためにやった2つのこと

#応用情報技術者試験を合格するためにやった2つのこと

:::note info
基本情報技術者試験を合格、または合格同等の知識レベルを保有している方向け
:::

##お品書き
1. 応用情報技術者試験の合格ライン
1. 午前試験対策
1. 午後試験対策
1. まとめ

##応用情報技術者試験の合格ライン
そもそも、応用情報技術者試験を合格するには、試験の構成と合格ラインを知っておく必要がありますね。
試験構成はシンプルで、以下の2つの試験で構成されます。

* 午前試験
* 午後試験

午前、午後の両方で合格ラインの点数を取ったら合格となります。
合格ラインは **60%** です。

:::note warn
午前、午後の総合で60％ではありません。それぞれで60％必要です！
例えば、午前試験で60%取ってなかったら、午後試験で満点取ろうと不合格なので注意してください！
:::

##午前試験対策
午前試験は4択のマークシート形式の試験です。

* 試験時間：150分
* 問題数：80問

単純計算で、1問あたり1分52秒かけていいので、試験時間が足りないことはないでしょう。
また、電卓が必要な問題も出題されませんし、計算問題は大体綺麗に計算できるように数字が調整されているので、筆算ができれば十分な難度です。

:::note info
最大のポイントは、試験問題の半数近くは、過去問から出題されることです。
:::

午前試験の問題は過去問からほとんど、そっくりそのまま出題されます。
一字一句問題文が同じなだけでなく、選択肢の構成と順番まで一緒な問題もあるくらいです。
つまり、60％の合格ラインを突破するには、50％の過去問対策と、10％の新規問題対策でいいのです！

##午後試験対策
午後試験は記述式の試験になります。

* 試験時間：150分
* 問題数：11問
* 解答数：5問

午後試験は11問の大問から5問を解答します。
5問中、1問は情報セキュリティが必須で、後の4問は自由選択です。

###必須選択問題について
必須問題も選択問題も配点は変わりません。
また、必須問題は選択問題よりも難度が低い傾向があるため、確実に点数を稼ぐ必要があります。

###自由選択問題について
選択問題は4つ選択して解答します。選択問題は毎年この問題が簡単！という傾向はないと思われます。
なので、解く問題を決め打ちで臨むのはお勧めしません。
しかし、自分が全く経験も勉強もしたことのない分野を解くのは全くお勧めしないので、多少なりともかじったことのある分野を解くのがいいでしょう。
例えば、DBについて全く知識がないのに、DBの問題を選択するようなことはやめておきましょう。DBの問題は毎年必須と言っていいほど、SQLを記述する問題が出題されているので、自力でSQLを書いた経験のない人は爆死します。。。

:::note info
おすすめは、安定して解けそうな分野を6つほどを決めておいて、当日に問題文を見てから、そのうちの4つを決めて解くスタイルです。
:::

午前と異なり、試験時間はシビアで、一問あたり30分以内で解く必要があります。問題文はB5用紙4ページ分ほど（図表含む）あるので、読むだけでも時間がかかります。全文読むのではなく、必要なところを拾い読みすることを心掛けましょう。

##まとめ
応用情報技術者試験は合格者比率が20％前後と、高難度の試験と思われがちですが、誰でも受験できる試験のため、合格率が低いのは必然でしょう。もちろん、ノー勉で合格できるほど甘い試験でもありません。この記事で紹介した、以下のことを踏まえて勉強すれば、合格に近づきますので、頑張りましょう！

**午前試験は、50％の暗記と10％の知識**
**午後試験は、文章読解力**
接続先IPが制限されているとSalesforceを使用できない

https://help.salesforce.com/s/articleView?id=000321501&type=1
に許可すべきIPリストがあるが、
それらを設定することでログインはできてもその後のLightning画面表示ができない
理由は上記IP内にstatic.lightning.force.comが含まれていないため

https://developer.salesforce.com/docs/atlas.ja-jp.lightning.meta/lightning/perf_cdn.htm
によればstatic.lightning.force.comのIPは動的であり、ホワイトリストへの記述ができない
Akamai CDNコンテンツへの接続を可能にする必要がある
cordova-plugin-firebasexでiOSのみFirebase Cloud Messagingのプッシュ通知が届かない場合の対処

# 前提条件

- <a href="https://github.com/dpa99c/cordova-plugin-firebasex#ios-notifications">cordova-plugin-firebasex</a>がプロジェクトに含まれている
- GoogleService-Info.plistがプロジェクトに含まれている
- APNs認証キーまたはAPNｓ証明書がFirebaseにアップロードされている

# iOSだけFCMのプッシュ通知が届かない

<a href="https://ja.docs.monaca.io/tutorials/firebase">Monaca</a>や<a href="https://ionicframework.com/docs/ja/native/firebase-x">Ionic</a>のドキュメント通りにコードを記述して、Androidではプッシュ通知が届くけど、iOSだけはプッシュ通知が届かない。
コンソール上には、FCMのトークンが表示されていて、　プラグインが正常に動作しているはずなのに、プッシュ通知が届かないことがありました。

その場合、<a href="https://github.com/dpa99c/cordova-plugin-firebasex#grantpermission">cordova-plugin-firebasexプラグインのドキュメント</a>にある、プッシュ通知を許可するか尋ねるコードを記述されていることを確認してください。

```javascript
FirebasePlugin.grantPermission(function(hasPermission){
    console.log("Permission was " + (hasPermission ? "granted" : "denied"));
});
```

Androidの場合は、デフォルトでプッシュ通知が許可されていますが、iOSの場合は、利用者がプッシュ通知を許可しない限りは送信できない仕様となっているみたいです。
Postman(WebAPI テスト)で画像をアップロードできなかった時の対処

##　1.エラー発生
　APIテストでPostmanを利用して画像をアップロードしようとしてエラー発生。
![スクリーンショット 2021-12-18 10.32.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1310301/0f37d335-5c44-e57e-b21a-9c7f5bf06e97.png)

→ワーキングディレクトリの中にあるファイルなら読み込むことができますよとのこと。

##　2.対処方法(参考：[Setting Up Postman](https://learning.postman.com/docs/getting-started/settings/))

### 公式より
> You cannot change the working directory in Postman for Web. When you upload a file, Postman for Web creates a new folder with a random name in the ~/Postman/files directory. Postman stores the uploaded file in the new folder so you can use it when sending requests. To automatically sync files you upload to Postman for Web with your local working directory, make sure you are using the Postman Desktop Agent.

→ Postman Desktop Agentをinstallすれば自分のPCがworking directoryになる。


* やったこと：localの環境にPostman Desktop Agentをinstallしてworking directoryを自分のPCに設定する。


##　3.発生原因

* Web上で登録しただけでは、working directoryはdefaultで「\~/Postman/files」のままだった。
* working directoryの変更をしなければいけない →2対処方法を行う。
* Postman Desktop Agentのworking directoryを確認: 「/Users/ユーザー名/Postman/files」となっていればok



##　4.まとめ

* 利用しているサービスが原因なのか自分の書いたコードが原因なのかを考える必要があった。
* コードに原因があると思い込んでいると、解決する時間がかなり長くなってしまう。
* working directoryてなんだ？を後回しにしていたため、サービスを利用する時はわからないことは調べるよにする。
Salesforce DataLoaderについて

以下、Windowsでの話 (Macは知らない)

サーバOSへのインストールがうまく行かないことがある
(もともとサーバOSはサポート外ではある)
クライアントOSのインストール先フォルダを持っていけば動く

ログイン時に
Destination URL not reset. The URL returned from login must be set in the SforceService
エラーになった場合はSettingsのReset URL on Loginにチェックを付ける
https://help.salesforce.com/s/articleView?id=000334059&type=1

V53では日付時刻型へのロードが失敗する
V53.0.1で修正されている
https://github.com/forcedotcom/dataloader/releases/tag/v53.0.1

OAuthログインが使えない環境でパスワードログインが失敗する場合、組織 or 当該アカウントのプロファイルにIPアドレス制限を設定するか、当該アカウントにセキュリティトークンのリセットを行ってパスワードにセキュリティトークンを付加する
https://help.salesforce.com/s/articleView?id=000331585&type=1
セキュリティトークンのリセットを行ってもその後のLightningへのログイン時にパスワードに付加する必要はない
Qiskitがインストールできない人に捧げる

anacondaを用いてQiskitをインストールしようとしていたが、挫折。二週間後、ようやく解決方法に気づくこととなった。
#挫折
「generator」がないと怒られていて、「Visual Studio 2019が必要」と言われていたのでインストールしてみたり、pipで「Ninja」をインストールなどいろいろ試してみたものの、挫折。
#解決

https://pypi.org/project/qiskit/

このページにある「Programming Language」という欄を見ていただきたい。

＿人人人人人人人＿
＞　python :: 3.6　＜
＞　python :: 3.7　＜
＞　python :: 3.8　＜
＞　python :: 3.9　＜
￣Y^Y^Y^Y^Y^Y^Y￣
そう、python3.10がサポートされていなかったのです。

```
conda create -n Qiskit python=3.9
```

として無事解決。
量子コンピューティング、がんばるぞ！
Vue.js(Nuxt.js)におけるv-ifとv-showの違い

## 概要
Vue.jsやNuxt.jsで様々なディレクティブを使用する機会があると思います。
今回はその中で`v-if`と`v-show`ディレクティブについて学習したのでアウトプットします。

##ディレクティブとは
公式ドキュメントにディレクティブについて記載を一部抜粋します。
>ディレクティブは v- から始まる特別な属性です。ディレクティブ属性値は、単一の JavaScript 式を期待します（・・・一部省略・・・）。ディレクティブの仕事は、属性値の式が変化したときに、リアクティブに副作用を DOM に適用することです。

[Vue.js公式ドキュメント](https://v3.ja.vuejs.org/guide/template-syntax.html#%E3%83%86%E3%82%99%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%86%E3%82%A3%E3%83%95%E3%82%99)

つまりJavaScriptの式を使って、DOMを操作することができるものです。

### 具体例

```
<p v-if='message'>hello world!</p>
```

上記は`messages`という式が`true`か`false`によって`<p>hello world!</p>`の表示の有無が決まります。
ディレクティブは他にも`v-bind`や`v-on`などの種類があります。
詳しい使い方については[Vue.js公式ドキュメント](https://v3.ja.vuejs.org/guide/template-syntax.html#%E3%83%86%E3%82%99%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%86%E3%82%A3%E3%83%95%E3%82%99)を参照してください。

## v-ifとv-showの違い
`v-if`と`v-show`の両方とも与えられた式の条件に基づいてDOMを表示、非表示にする役割があります。
ただその表示、非表示にする方法が異なります。

####v-show
`v-show`は条件に関わらずレンダリングされます。
レンダリングされた後、条件がfalseの時`display`プロパティが`none`になることで非表示になります。
よって初期レンダリングコストが高いです。

####v-if
一方`v-if`は条件がtrueのときだけレンダリングされます。
つまりfalseの場合はレンダリングされません。
よって初期レンダリングコストはv-showに比べて低いです。
しかし、切り替えが頻繁に行われる場合は逆にコストが高くなります。

## v-ifとv-showの使い分け
公式ドキュメントでは下記のように記載されてます。
>一般的に、v-if はより高い切り替えコストを持っているのに対して、 v-show はより高い初期レンダリングコストを持っています。 そのため、とても頻繁に何かを切り替える必要があれば v-show を選び、条件が実行時に変更することがほとんどない場合は、v-if を選びます。

つまり使い分けの基準は下記になります。

・ `v-if`は__頻繁に切り替えが必要ない__場合に使用
・ `v-show`は__頻繁に切り替えが必要__な場合に使用

## 参考文献
[Vue.js公式ドキュメント](https://v3.ja.vuejs.org/guide/template-syntax.html#%E3%83%86%E3%82%99%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%86%E3%82%A3%E3%83%95%E3%82%99)
【図解解説】JOI2021-2022 二次予選 問題1 図書館2

## 図解解説シリーズ
競技プログラミングを始めたばかりでAtCoderの解説やJOIの解説ではいまいちピンと来ない…という人向けに、図解を用いて解説を行います。

## 問題文
### 情報オリンピック日本委員会に掲載されている問題

https://www.ioi-jp.org/joi/2021/2022-yo2/index.html

### AtCoderに掲載されている問題
入出力など実際に確認して自分の作成したプログラムを採点することができます。

https://atcoder.jp/contests/joi2022yo2/tasks/joi2022_yo2_a

## 図解解説
今年度の二次予選のA問題は、以下のスキルを確認する問題になっています。
１．スタック・キューなどの特殊なデータ型を正しく利用できる

問題文を整理するために、入力例１を用いて、図示して考えてみます。
![スライド1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2211017/7bb9b934-4386-a153-13b0-0a1d39d42a2e.png)
![スライド2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2211017/a08f36fc-0ea0-2609-63f5-1ddcb2de12b6.png)
この動きは、スタックと呼ばれるデータ構造にあてはまります。スタックの概念については、以下のサイトが参考になります。アニメーションがついているため動作のイメージをつかむことができます。合わせてキューというデータ構造もありますので、一緒に覚えておいてください。

https://www.momoyama-usagi.com/entry/info-algo-stack-queue

Pythonではキューとスタックの両方を兼ね備えた両端キューを使用します。
![スライド3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2211017/ea26ab2d-f73e-6bec-aed5-cdef012e47fe.png)
今回の問題ではスタックの動きを実装するので、appendとpopの命令を使用します。
※2021/12/18 12:20　スライドを差し替えました

## 解答例

```a.py
#両端キュー(deque)を使用するためにライブラリを読み込む
from collections import deque
N = int(input())
#書籍を格納するための両端キューを作成する
q = deque()
#先頭から順番に読み込み、
#　READなら両端キューの末尾にある書籍を取り出して表示する
#　READでなければ、両端キューの末尾に書籍を追加する
for i in range(N):
  s = str(input())
  if s=='READ':
    print(q.pop())
  else:
    q.append(s)
```
[採点サイトに提出したプログラム](https://atcoder.jp/contests/joi2022yo2/submissions/27958958)

## イラスト
スライド内で使用しているイラストはすべて「[いらすとや](https://www.irasutoya.com/)」の素材を利用しています。
self.navigationController is nilが調べても解決できない

## 結論

その偏移先のViewController, init使ってませんか？その中身はviewDidloadに移動して、init使うのはやめましょう。

## 経緯

　viewDidLoadではself.navigationControllerはnilになる、偏移先のViewControllerは偏移元のviewControllerのnavigatoinControllerのスタックの範囲外という情報が出てきますが、どれも効果なし。少し趣旨にはずれた質問の内容ですがこの記事の回答を見てinitをやめたところ解決しました。

https://www.generacodice.com/en/articolo/1696197/self.navigationcontroller-is-nil-even-if-called-with-initwithrootviewcontroller
JavaScriptで要素の出現を監視する

php-webdriverなどのuntil + WebDriverExpectedConditionで要素の出現をチェックするみたいな動きをJSで力技でテスト的に実装してみました。

# 準備する

```javascript
const scraping = {
  /** ================================================ **/
  // 対象要素の出力を待つ
  /** ================================================ **/
  waitingForTheElement: function (targetElement, waitingTime = 30) {
    return new Promise(function (resolve, reject) {
      let timer,timeout;

      // タイムアウトを設定（デフォルト: 30秒、この時間までに要素出力を確認できなければエラー扱いになる）
      timeout = setTimeout(function () {
        clearInterval(timer);
        reject(new Error(targetElement + " の取得に失敗しました。"));
      }, waitingTime * 1000);

      // 250ミリ秒毎にチェックを実行
      timer = setInterval(function () {
        if (document.querySelectorAll(targetElement).length > 0) {
          clearInterval(timer);
          clearTimeout(timeout);
          resolve();
        }
      }, 250);
    });
  }
}
```

`document.querySelectorAll(targetElement).length > 0` この条件式を変更すれば好きな形式でのチェックを行うことができます。

## 使う

```javascript
(async function () {
  console.log("実行します。");

  try {
    // #hoge という要素の出力を 最大10秒間 待機する
    await scraping.waitingForTheElement('#hoge', 10);
  } catch (e) {
    // タイムアウトしたときの処理
    console.log(e);
  }

  // 上の処理が完了したら下の処理が開始される。
  console.log("処理が完了しました。");
})();
```

---

**2021/12/20 追記**

`MutationObserver` は未知の要素に対する監視と、対象要素を子要素レベルまで絞り込めないだろうという妄想のもと使いませんでした。もし使えるなら多分そっちの方がいいですね、ごめんなさい。

それと、こっちの方が条件を自由に好きなように変えれるのでChrome拡張機能でのスクレイピングという意味では都合がいいんじゃないかなと思っています。
Flutter環境構築メモ(シミュレーターで立ち上げ確認まで)

普段はWebばかりのモバイルアプリど素人ですが、ついにFlutterの環境構築やったのでメモ。

## 環境
```zsh
$ sw_vers
ProductName:	macOS
ProductVersion:	12.0.1
BuildVersion:	21A559
```

## 公式 doc
https://docs.flutter.dev/get-started/install

Android StudioとかXcodeインストールとかはdocどおり。


## flutter doctorが通るまで。
### SDK managerどこ？
AndroidのSDK managerをインストールする必要がありました。
ググってもAndroid StudioのUIが違って見つけられなかったけど、いじってたら見つけた。

`More Actions > SDK Manager`

![スクリーンショット 2021-12-18 9.42.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182399/55dc47a8-313a-bb3e-cda0-bf33d9f8252c.png)

### Andoridのライセンス系
ターミナル通り操作すれば、ライセンスが通って`flutter doctor`でwarningが消えた。

一応こんなwarning出てたけど、指示通りで通った。

```
Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
```

### Xcode
```
CocoaPods not installed.
```
のwarningは、こちら参考にさせていただきました。
https://qiita.com/yoshinyan/items/2c9a59e5a3bd80b9bdbd

入っていなかったのでインストール。
ちなみに、CocoaPodsは Swift and Objective-C の依存マネージャーと書いてました。
https://cocoapods.org/

iOS関係のライブラリ依存とかのマネージャーっぽい。

## 最終的には
最終的には、きれいになりました。
![スクリーンショット 2021-12-18 9.51.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182399/69544fde-4a7c-7476-c08b-41faf5e942d0.png)

その後、

```zsh
$ open -a Simulator
$ flutter create my_app
$ cd my_app
$ flutter run
```
で初期のアプリが立ち上がりまで確認しました。
![スクリーンショット 2021-12-18 10.15.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182399/c81ae181-2597-b96e-049d-0c0907b9918d.png)

ちなみに、シミュレーターを立ち上げなければ、chromeで開きました。
「Error: Cannot install under Rosetta 2 in ARM default prefix (/opt/homebrew)!」の解決方法

# はじめに
M1 Pro搭載Macで `brew install java` をしたところ、エラーが出ました。

# 環境
- macOS Monterey 12.0.1
- Homebrew 3.3.8

# 問題
ターミナルをRosettaを使用して開き、Homebrewでjavaをインストールしようとしたところ、エラーが出ました。
![スクリーンショット 2021-12-18 10.07.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631585/244e7bd8-35f8-098a-3a96-2fb6b9abe5b2.png)

# 解決方法
いくつか方法があるようですが、
`arch -arm64` これを前に付けたら簡単に解決できました。

`arch -arm64 brew install java` 最終的にこれだけでOKでした。

# おまけ
javaは入れられたけど、`java --version` でまだエラーが。

```
The operation couldn’t be completed. Unable to locate a Java Runtime.
Please visit http://www.java.com for information on installing Java.
```

その場合は、
`sudo ln -sfn $(brew --prefix)/opt/openjdk/libexec/openjdk.jdk /Library/Java/JavaVirtualMachines/openjdk.jdk`
でシンボリックリンクを貼ることで解決できました。


# 参考記事
https://zenn.dev/suzuki_hoge/books/2021-07-m1-mac-4ede8ceb81e13aef10cf/viewer/5-brew-and-binary

https://shiro-changelife.com/cannot-install-under-rosetta/

https://tech-broccoli.life/articles/engineer/use-homebrew-with-apple-silicon/

https://zenn.dev/satokazur222/articles/66568417b291d8
Google Cloudでインスタンスの起動時間短縮、設定の省略をするには

### What's This

表題のことで、気になったのでまとめました。
以下３つが代表的なのとしてあげられるのかなと思います。

### １、起動スクリプトを使う。

インスタンス作成画面で、Scriptを入力する、**自動化**があるので、以下のようなスクリプトを書いて起動します。

![スクリーンショット 2021-12-18 9.20.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1740345/17d1db24-8e2d-f946-c455-d7164f681f8b.png)


```
 #! /bin/bash
 apt update
 apt -y install apache2
 cat <<EOF > /var/www/html/index.html
 <html><body><p>Linux startup script added directly.</p></body></html>
```

### ２、インスタントテンプレート
インスタンス テンプレートとは、仮想マシン（VM）インスタンスとマネージド インスタンス グループ（MIG）を作成するために使用できるリソースです。

ただ、インスタンス テンプレートを更新したい場合、注意が必要です。
同じ構成のインスタンスを作成するように設計されているため、既存のインスタンス テンプレートを更新したり、インスタンス テンプレートを作成した後で変更したりすることはできません。

構成の変更が必要になった場合は、新しいインスタンス テンプレートを作成する必要があるということですね。
例えば、既存のテンプレートのコピーを作成して、それを変更して新しいバージョンを作成したり、ですかね。

なお、インスタンステンプレートを作成するのにかかるコストは、ありません。テンプレートに基づいて作成するリソースには料金が発生します。

#### 既存のインスタンスに基づくインスタンス テンプレートの作成

既存のインスタンスから設定をコピーして、テンプレートを作成するコマンドです。

```
gcloud compute instance-templates create INSTANCE_TEMPLATE_NAME \
    --source-instance=SOURCE_INSTANCE \
    --source-instance-zone=SOURCE_INSTANCE_ZONE \
```

### ３、カスタムイメージを使用

2.で、インスタンス テンプレートについて書きましたが、この方法だと、インスタンス起動時にOSパッチとソフトウェアをインストールするので、起動時間が長くなります。
これを回避する１つとして、カスタムイメージ使用が挙げられます。
OSやソフトウェアが、起動前からセットされているので、時間短縮できます。

こちらも、テンプレート同様、既存のインスタンスから作成できます。
作成したイメージは、異なるプロジェクト間で共有もできます。
https://cloud.google.com/compute/docs/images/managing-access-custom-images?hl=ja#accessing_images

共有もできますが、使わないように非推奨にすることもできます。
イメージを作成したものの、時間が経つと古くなっていくので、それは使わないようにマークすることもできるみたいですね。

セキュリティの面から見ても、いい方法だと考えることができます。
全社的に、あるいはプロジェクト的に、あらかじめ定められたセキュリティに準拠させたい場合、それに即したイメージを作成し、使用させることで、準拠させることができます。

#### 作成時の注意

カスタム イメージは、ソースディスク、イメージ、スナップショット、Cloud Storage に保存されているイメージから作成し、そのイメージを使用して仮想マシン（VM）インスタンスを作ることができます。

![スクリーンショット 2021-12-18 9.51.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1740345/6384ca33-912c-b7a7-3a18-d65d47b67a64.png)

実行中の VM にアタッチされている状態のディスクからでもイメージを作成できますが、
作成する前に、永続ディスクにデータを書き込ませないようにするため、VMは停止した方がいいっぽいです。

## 参考

```
https://cloud.google.com/compute/docs/images/managing-access-custom-images?hl=ja#accessing_images
https://cloud.google.com/compute/docs/images?hl=ja#custom_images
https://cloud.google.com/compute/docs/instance-templates
https://cloud.google.com/compute/docs/instances/startup-scripts
```
re:Invent 2021 コンテナ関連の新サービス、アップデートまとめ

re:Invent2021で発表されたコンテナ関連サービスのアップデートをまとめてみました。

12/18 20:00 から [JAWS-UG横浜 #39 AWS re:Invent 2021 Recap Container](https://jawsug-yokohama.connpass.com/event/233900/) でこのあたりをキャッチアップしますので是非ご参加ください！

## Karpenter
https://aws.amazon.com/jp/blogs/news/introducing-karpenter-an-open-source-high-performance-kubernetes-cluster-autoscaler/

 - 柔軟で高パフォーマンスのオープンソース Kubernetes クラスターオートスケーラー
 - アプリケーションの負荷の変化に応じて適切なサイズのコンピューティングリソースを迅速に起動することで、アプリケーションの可用性とクラスターの効率を向上
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33070/02cff160-8b14-d2eb-5e58-441bdacab168.png)
(画像出展元：上記リンク先）


## Amazon ECR、キャッシュリポジトリのプルスルー機能を提供
https://aws.amazon.com/jp/blogs/aws/announcing-pull-through-cache-repositories-for-amazon-elastic-container-registry/

Amazon ECR のダウンロードパフォーマンス、セキュリティ、および可用性をパブリックイメージにも

### ECRに組み込まれているセキュリティ機能
 - AWS PrivateLink
 - 脆弱性を検出するためのイメージスキャン
 - AWS Key Management Service（KMS）による暗号化など


## AWS Marketplace for Containers Anywhere
https://aws.amazon.com/about-aws/whats-new/2021/11/aws-customers-find-subscribe-deploy-kubernetes-aws-marketplace/

 - コンテナ化されたサードパーティー製アプリケーションを見つけてサブスクライブし、Amazon ECS と Amazon EKS にデプロイ

### AWS Marketplace for Containers Anywhere のローンチパートナー
オンプレミスのデプロイオプションをサポートするローンチパートナーの一覧

 - D2iQ は、クラウド、ハイブリッド、エッジ、エアギャップなどのさまざまな環境で、エンタープライズグレードの Kubernetes を大規模に実装するための、業界をリードする独立系プラットフォームを提供しています。
 - HAProxy Technologies は、規模や環境を問わず、ウェブサイトやアプリケーションで最高のパフォーマンスを発揮し、可観測性、セキュリティを備えられるようにするために、広く使用されているソフトウェアロードバランサーを提供しています。
 - Isovalent は、オープンソースソフトウェアと Cilium や eBPF などのエンタープライズソリューションを構築し、最新のクラウドネイティブインフラストラクチャのネットワーキング、セキュリティ、および可観測性のニーズに応えています。
 - JFrog の「流動的なソフトウェア」の使命は、デベロッパーからエッジまでのバイナリのシームレスで安全なフローを通じて、世界中のソフトウェアアップデートを強化することです。
 - Kasten by Veeam は、Kubernetes 専用に構築されたデータ管理プラットフォーム Kasten K10 を提供しています。Kasten K10 は、バックアップとリカバリ、災害対策、アプリケーションモビリティのための使いやすくスケーラブルで安全なシステムです。
 - Kyverno の作成者である Nirmata は、ポリシーベースのセキュリティと、本番環境の Kubernetes ワークロードとクラスタのオートメーションのためのオープンソースおよびエンタープライズソリューションを提供しています。
 - Palo Alto Networks はサイバーセキュリティの世界的リーダーであり、人と組織の営みを変革するテクノロジーによって、クラウド中心の未来を形作っています。
 - Prosimo の SaaS は、クラウドネットワーキング、パフォーマンス、セキュリティ、AI を活用した可観測性、コスト管理を組み合わせて、エンタープライズクラウドをデプロイしやすくし、そのリスクを軽減します。
 - Solodev は、コンテンツから暗号まで、カスタムのクラウドアプリを構築するためのエンタープライズ CMS およびデジタルエコシステムです。AWS による DevOps、トレーニング、および 24 時間年中無休のサポートを利用できます。
 - Trilio は Kubernetes、OpenStack、および Red Hat Virtualization 環境向けのクラウドネイティブなデータ保護のリーダーであり、バックアップとリカバリ、移行、アプリケーションモビリティのためのソリューションを提供しています。

## Amazon Inspector v2 での Amazon ECR に格納されたコンテナイメージのスキャン対応
https://aws.amazon.com/about-aws/whats-new/2021/11/amazon-inspector-continual-vulnerability-management/

 - ECR にあるコンテナイメージと EC2 インスタンス含め、全体の脆弱性を総合的に見ることが可能に

## Amazon GuardDuty for K8s Audit Logs

 - Amazon GuardDuty が Kubernetes の監査ログに対応


## その他
re:Invent 2021のコンテナ系注目セッションなどの情報がまとまっているので、こちらの記事必見です！

https://aws.amazon.com/jp/blogs/news/reinvent-2021-aws-containers-track/

セッション動画は[こちら](https://virtual.reinvent.awsevents.com/tracks/?nc2=reinv21_m_t
)から（ログイン必要）
DynamoDBでBatchWriteItemを使用する際の注意点

## 概要
DynamoDBを使用していて複数データを保存、削除する際、`BatchWriteItem`を使用することになる。
具体的な使用例と注意点をまとめる。

## BatchWriteItem
データの保存、削除等をまとめて実行できる。
並列で処理されるため、パフォーマンスは上がる。
※レイテンシは低減されるが、消費キャパシティは変わらないのでコストが下がるわけではない。

## 基本的なルール
AWSのdocumentにはこのような記載がある。
[BatchWriteItem - Amazon DynamoDB](https://docs.aws.amazon.com/amazondynamodb/latest/APIReference/API_BatchWriteItem.html)
>The BatchWriteItem operation puts or deletes multiple items in one or more tables. A single call to BatchWriteItem can write up to 16 MB of data, which can comprise as many as 25 put or delete requests. Individual items to be written can be as large as 400 KB.

ポイントとしては、
1. 最大25項目までまとめて登録できる
2. 一度に送信できる最大のデータ量は16MB
3. 項目一つに対しての最大のデータ量は400KB

#### Laravelを使用している場合
Laravelを使用するのであれば、[GitHub - baopham/laravel-dynamodb: Eloquent syntax for DynamoDB](https://github.com/baopham/laravel-dynamodb)を利用するとEloquentモデルでDynamoDBにアクセスできるようになる。

## 具体例
### Putの例
以下のように`DynamoDb::marshalItem()`に挿入したい値を連想配列で渡し、それを`setItem`に渡す。
（`marshalItem`とはAWS-SDKの`Marshaler`クラスに書かれている、DynamoDBのitem形式のフォーマットでJSON形式のテキストとPHPのArray型の変換ができるようになるメソッド）

```
$query = DynamoDb::table($table)
             ->setItem(DynamoDb::marshalItem($item->toArray()))
             ->prepare()
             ->query;

$putRequests[] = ['putRequest' => $query];
```

その後、以下のような形で`batchWriteItem`を使う。

```
DynamoDb::newQuery()->setRequestItems([
        $table => $putRequests,
])
    ->prepare()
    ->batchWriteItem();
```
※この例はPutのケース、作成する項目が25件までなので注意が必要（25件以上の場合、ValidationErrorになる）

### chunkする際に気をつける点
また、以下のような方法でchunkをする場合は注意が必要。
100件のUserを保存するケース。

```
$userPutRequestsChunk = $users->map(function ($user) use ($table) {
                return [
                    'PutRequest' => DynamoDb::table($table)
                        ->setItem(DynamoDb::marshalItem($user->toArray()))
                        ->prepare()
                        ->query
                ];
            })
            ->chunk(25)
            ->all();
  
foreach ($userPutRequestsChunk as $requests) {
    DynamoDb::newQuery()->setRequestItems([
        $table => array_values($requests->all()),
    ])
        ->prepare()
        ->batchWriteItem();
}
```

foreachの1ループ目は問題無いが、それ以降$requestのkeyが 25, 50, 75から始まるため、`SerializationException`が返され1ループ目のデータしか保存されない。
そのため、keyが0から始まっていない場合は`array_values()`等でkeyを振り直す必要がある。
`SerializationException`の際は基本的にformatエラーのため、何が入っているか確認が必要。

### 必ずResponseを確認するべき
batchWriteItem成功時、全Requestが成功したとは限らないのが罠。
もしRequestが失敗した場合、Response内の`UnprocessedItems`に失敗したデータが入るので、この中身が空になるまで再度処理をする必要がある。

## まとめ
最後のResponseを確認しないといけない箇所は、DynamoDBを使用する上で必ず知っておくべきことだと感じた。
MVC の構成をアレンジしてみた

# MVC に救いの手を

## 一般的な MVC 構成

```
app
├── controllers
│   ├── accountController.js
│   ├── apiController.js
│   ├── authController.js
│   ├── controller.js
│   ├── templateController.js
│   ├── topController.js
│   └── userController.js
├── index.js
├── models
│   ├── auth.js
│   └── user.js
├── routes
│   ├── accountRoute.js
│   ├── apiRoute.js
│   ├── authRoute.js
│   ├── route.js
│   ├── templateRoute.js
│   ├── topRoute.js
│   └── userRoute.js
├── services
│   ├── accountService.js
│   ├── apiService.js
│   ├── authService.js
│   ├── service.js
│   ├── templateService.js
│   ├── topService.js
│   └── userService.js
├── validations
│   ├── accountValidation.js
│   ├── apiValidation.js
│   ├── authValidation.js
│   └── userValidation.js
└── views
    ├── account
    │   └── password.ejs
    ├── auth
    │   └── login.ejs
    ├── error
    │   └── default.ejs
    ├── index.ejs
    ├── menu
    │   ├── body.ejs
    │   └── head.ejs
    ├── partial
    │   └── header.ejs
    └── user
        ├── index.ejs
        ├── register.ejs
        └── reset.ejs
```

## 機能を移植しにくいので構成を変更

```
app
├── account
│   ├── controller.js
│   ├── route.js
│   ├── service.js
│   └── validation.js
├── api
│   ├── controller.js
│   ├── route.js
│   ├── service.js
│   └── validation.js
├── auth
│   ├── controller.js
│   ├── model.js
│   ├── route.js
│   ├── service.js
│   └── validation.js
├── controller.js
├── index.js
├── route.js
├── routes
├── service.js
├── template
│   ├── controller.js
│   ├── route.js
│   └── service.js
├── top
│   ├── controller.js
│   ├── route.js
│   └── service.js
├── user
│   ├── controller.js
│   ├── model.js
│   ├── route.js
│   ├── service.js
│   └── validation.js
└── views
    ├── account
    │   └── password.ejs
    ├── auth
    │   └── login.ejs
    ├── error
    │   └── default.ejs
    ├── index.ejs
    ├── menu
    │   ├── body.ejs
    │   └── head.ejs
    ├── partial
    │   └── header.ejs
    └── user
        ├── index.ejs
        ├── register.ejs
        └── reset.ejs
```

## 機能の移植が容易になって嬉しい

### コードサンプル

```
https://github.com/jobscale/tanpo.git
https://github.com/jobscale/jsxjp.git
```

### デモサイト

```
https://jsx.jp
https://tanpo.jsx.jp
```

### 次の目標

各機能を npm モジュール化してみます
paiza(PHP)でよく使う処理をまとめてみた

#はじめに
rubyからスタートして約4か月。最近は次の仕事でよく使われるPHPを勉強している。paizaでよく使われる入力値の仕方をまとめてみました。

###➀入力値の取得
####ruby
```
hoge = gets
```
####PHP
```
$hoge = fgets(STDIN);
```

###➁空白や改行が与えられる場合
####ruby
```
hoge = gets.chomp
```
####PHP
```
$hoge = trim(fgets(STDIN));
```

###➂➁を配列で取得したい場合
####ruby
```
hoge = gets.chomp.split
```
###PHP
```
$hoge = explode(" ",trim(fgets(STDIN)));
```

##おわりに
学習していくうちに追加していこうと思います。
間違っていたらご指摘お願いします（笑）

てかセミコロンのつけ忘れてしまう。。
React応用 - PartX - React & Liff & Firebaseしてみよう

<!-- 
https://dev.to/yutagoto/react-typescript-liff-1kpk
-->

# 目次

# Liff(Line Front-end Framework)とは

LINE提供の開発者向けサービスのひとつです。
多くの企業LINE公式アカウントで利用されています。

# 事例

# Liffの開発に必要なこと

# 今回イメージするサービス

- お問い合わせフォーム
- モバイルオーダ
- QRコードリーダ提示、読込
- PayPay決済、LinePay決済

#### <font color="red">あくまで、今イメージしているだけ。。</font>
今後ノウハウが蓄積してきたらイメージを具体化したいと思います。

# 手順1. Reactアプリ作成

create-react-appでプロジェクトを作成します。

```typescript
npx create-react-app プロジェクト名 --template typescript
```

プロジェクトディレクトリに移動します。
yarn startでReact初期画面が開くことを確認しておきます。

```typescript
yarn start
```

# 手順2. Line Developer設定（チャネル作成）

[Line Developerコンソール](https://developers.line.biz/console/)を開きます。
※Lineビジネスアカウントを事前に作成しておきます。

「新規プロバイダー作成」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559029/e2ac320c-484e-ff8b-c441-691271d34e0e.png)

「プロバイダー名」を入力し、「作成」をクリックします。
<img width="50%" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559029/452949d3-5364-46d6-22d2-8a4b958d78c8.png">

「チャネルの種類」は「Lineログイン」を選択します。
<img width="50%" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559029/83f4c79e-0d00-132e-c694-5542d5a54395.png">

「アプリタイプ」は「ウェブアプリ」を選択します。
その他の入力項目は今のところ重要箇所はなさそうなので割愛します。
（何かあれば記事を更新します。）
<img width="50%" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559029/8bb3514a-45a0-d865-6627-c186a53f62d3.png">

# 手順2. Liffの設定

「Liff」タブから「追加」ボタンをクリックします。
<img width="50%" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559029/d9149306-adfd-e7b1-79cb-0e8ea5fff9b2.png">


# 手順4. Reactアプリのデプロイ


------------------------------------------------------------------------------------
いつも忘れるやつ覚え書き

<ul>
　<li>オラクルに接続</li>
    <ul>
　    <li>JDBC</li>jdbc:oracle:driver_type:[username/password]@database_specifier
　    <li>sqlplus</li>sqlplus {ユーザー}/{パスワード}@//{ドメイン}:{ポート}/{SID}
    </ul>
</ul>