OmniAICreator/Qiita-1.07M huggingface dataset:
MySQL テスト環境設定手順 MacOS向け 画像付きで限界まで丁寧に解説

# はじめに

SQLを全く0から勉強したい→参考書購入→自分で手を動かしたい→<font color="Red">環境の立て方がわからない！！！

という人のための記事です。

DBサーバー立てて、接続して、クライアント...等は初学者にはハードルが高かったので記録として残しておきます。

<font color="Red">周りの記事をみてもわからなかったのでどの記事よりも丁寧に解説していると思います。

手順として

- ターミナルの起動
- HomeBrewのインストール
- MySQLのインストール
- 環境設定
- MySQL WorkBenchのインストール
- 確認テスト

の流れとなります。

# ターミナルの起動

HomeBrewとはMacでソフトウェアのインストールや更新を行えるソフトです。
無料で使いやすいため、入れておいて損はないかと思います。

まずターミナルを起動します。
FinderからApplicationを選択
![Imgur](https://i.imgur.com/7ASxzGUl.png)
その後ターミナルを起動
![Imgur](https://i.imgur.com/n2vOzB2l.png)
その後以下のような画面が出てくれば問題ないです。
![Imgur](https://i.imgur.com/AIgaah8l.png)

以下のコードはこのターミナルに直接書き込むものになります。

# Homebrewのインストール

```
brew  --version
```
と入力します。
ここでバージョン情報が出ている方はすでにインストールされているので次に進みましょう。
![Imgur](https://i.imgur.com/KhIQS9tl.png)



されていない場合公式サイト同様こちらを打ち込んでください。
インストールが開始されます。

```
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```

その後Passwordを求められますのでログインしているユーザーのパスワードを打ち込みます。
この際表示されませんが正常ですので間違わないよう注意して打ち込みます。

終了したら再度

```
brew  --version
```
と打ち込みバージョン情報が表示されればこのステップは終了です。

# MySQLのインストール

```
brew info mysql
```

と入力します。

![Imgur](https://i.imgur.com/HdozxXMl.png)

このような画面になっていると思われます。

この画面ではversion8.0.27をインストールします。

```
brew install mysql
```
と打ち込みます

インストールが終了すればこのステップは終了です。

# 環境設定

```
mysql.server start
```

と打ち込みます。

その後

```
mysql_secure_installation
```
と打ち込みます。

その後、先ほど同様ユーザーのログインパスワードを入力してください。

するとNew Passwordを求められます。
このパスワードは今後SQLサーバーにログインする際に使うものになるので忘れないようにしてください。
入力すると再入力を求められるので再入力します。
その後さまざまな設定を求められますが全て y を入力して進んでいきます。
最後に

```
ALL done!
```

と表示され、以下の画面のようになれば問題ありません。
![Imgur](https://i.imgur.com/zz4Vohul.png)

最後にログインを行います

```
mysql -u root -p
```
と入力して先ほど設定したパスワードを入力します。
その後

```
mysql >
```
![Imgur](https://i.imgur.com/YJl50FZl.png)

と表示されればこのステップは終了です。

```
exit
```
を入力してログアウトを行いましょう。

# Mysql Workbenchのインストール

[https://dev.mysql.com/downloads/workbench/]
このサイトのDownloadを押すとmacにMySQL WorkBenchがインストールされます。

インストールは特段難しいことはないので通常通り行ってください。

その後イルカのアイコンのアプリケーションが表示されたら起動してください。

![Imgur](https://i.imgur.com/sVuugCRl.png)
このような画面が表示されたらインストールは終了です。

次にMySQLへの接続を行います。

Connectionを選択
Connect Databeseを選択
![Imgur](https://i.imgur.com/5NoSd0Dl.png)

以下のような画面が出てきたら画像のように設定してok
![Imgur](https://i.imgur.com/pGFVfMkh.png)

これで接続は完了です。

次にスキーマと呼ばれるDBを作成します。
左上のデータが三層になっているアイコンをクリックします。
以下のように入力してApllyを押して下さい。

![Imgur](https://i.imgur.com/LDoOMuhh.png)

これにてこのステップは終了になります。

# 確認テスト

最後に問題なくSQLが動くか確認します。
Queryタブから以下のように入力してください。
出力が問題なく出ていればこれにて終了です。

![Imgur](https://i.imgur.com/xzRagBnh.png)

# 終わりに

自分が調べた際、簡単にSQLのテスト環境を立てるやり方がなかったので解説しました。
どの記事よりも簡単に書いたとは思いますが、わからなければ連絡ください。
視線誘導系のアセットで首が動いても髪の毛や衣服が揺れない

「Final IK」や「Look Animator」などのモーション制御の処理は、主にlateupdateのタイミングで処理されている。
本来のアニメーションの結果にプラスアルファする仕様のためlateupdateで実装されているわけだが、dynamic boneなどによる着衣物揺れの物理処理も同じくlateupdateで実装されているため、それらを併用すると、モーション制御の結果に着衣物の揺れが反映されない問題が発生することがある。
（物理処理が処理された後に、モーション制御による動きが発生してしまう可能性がある。本来のアニメーションによる動きは反映されるので違和感に気が付き辛い。）

そのような場合は、[Project Settings] -> [Script Execution Order]から、Dynamic boneなどの処理順序が後になるように指定しておく必要がある。
その類のアセットは導入時に自動的に登録されているはずだが、新しいUnityバージョンへの移行時などに外れているのを見逃してしまいがち。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/421201/2ed3a408-906b-360c-b5a8-032728a8d0bf.png)
InDesign Script 世界のスクリプト（および関連する情報等）から

・InDesign ExtendScript API
https://www.indesignjs.de/extendscriptAPI/indesign-latest

・ScriptUI Dialog Builder（GUI作成用のウェブツール）
https://scriptui.joonas.me/

・Example Scripts for my Book InDesign Automatisieren（サンプルスクリプト）
https://github.com/grefel/indesignjs/

・variables（テキスト変数の一覧を表示して編集するスクリプト）
https://creativepro.com/files/kahrel/indesign/variables.html

・Place inline images and fit（インライン画像を配置するスクリプト）
http://kasyan.ho.ua/indesign/image/place_inline_images_and_fit/place_inline_images_and_fit.html
Swiftのモーダルの表示アニメーションを指定

Swiftでモーダルを普通に実装すると、デフォルトでは上からヌルっと上がってきて、閉じる時は下にサッと消えていく。

モーダルの背景を透過度のある灰色・黒にすると、閉じる時に四角い背景も一緒にヌルっと下がって不自然さを感じる。

## 解決策

遷移先のViewControllerのプロパティにmodalTransitionStyleを設定するだけ。

種類は4種類あります。

![スクリーンショット 2021-10-29 13.59.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/522445/81ba0cde-5779-749e-c283-460f4fb5deae.png)
https://capibara1969.com/719/ より

実際にコードを書くと以下の通り。

```swift
let next = NextViewController()

//4種類から選ぶ
next.modalTransitionStyle = .coverVertical
next.modalTransitionStyle = .flipHorizontal
next.modalTransitionStyle = .crossDissolve
next.modalTransitionStyle = .partialCurl

self.present(next, animated: true, completion: {})
```

個人的には`crossDissolve`が好み。

一般的なiosアプリでもcrossDissolveが使われていることが多い。

## 参考

https://developer.apple.com/documentation/uikit/uiviewcontroller/1621388-modaltransitionstyle

https://capibara1969.com/719/

## おすすめ情報

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

https://wagtechblog.com/programing/swift-textbook.html
BotUIで企業HP向けチャットボットを簡易実装！

# はじめに
BotUIを用いて企業HP向けチャットボットを簡易に実装できます。
BotUI公式: <a href="https://docs.botui.org/index.html">https://docs.botui.org/index.html</a>

![スクリーンショット 2021-10-29 133301.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328246/4e5676c3-2cdd-d5d8-e8a5-c215eec48dfc.png)

# 簡易チャットボットの作成 + ソースコード
作成するもの
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328246/9e25053b-4c19-0b4c-0e8a-5d81f85e443f.png)
ボタンを押下すると、次のメッセージを表示することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328246/0ae1e835-c495-9052-0c30-da0879cf5d01.png)

以下ソースコード

```index.html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>chatbot</title>
    <link rel="stylesheet" href="https://unpkg.com/botui/build/botui.min.css" />
    <link rel="stylesheet" href="https://unpkg.com/botui/build/botui-theme-default.css"/>
  </head>
  <body>
      <div class="botui-app-container" id="chatbot">
        <bot-ui></bot-ui>
      </div>
    <script src="https://cdn.jsdelivr.net/vue/latest/vue.min.js"></script>
    <script src="https://unpkg.com/botui/build/botui.min.js"></script>
    <script src="main.js"></script>
  </body>
</html>
```
```main.js
var botui = new BotUI('chatbot');
//初期メッセージ
botui.message.bot({
    content: 'はるぐらみんぐ株式会社です。'
});
//ボタンを表示
botui.action.button({
    action: [{
      icon: 'circle-thin',
      text: "会社について知りたい",
      value: "1"
    }, {
      icon: 'circle-thin',
      text: "資料請求をしたい",
      value: "2"
    }]
  }).then(function(res) {
    if(res.value == 1){ //"会社について知りたい"ボタンを押下したときの処理
        //チャットボットにメッセージを表示
        botui.message.add({
            loading: false,
            content: "はるぐらみんぐ株式会社は架空の会社です。"
        });
    }else if(res.value == 2){//"資料請求をしたい"ボタンを押下したときの処理
        //チャットボットにメッセージを表示
        botui.message.add({
            type: 'html',
            loading: false,
            content: "資料請求は<a href='https://www.google.com/'>こちら</a>から"
        });
    }
});;
```
Uipath StudioXでIBM Notesをレコーダーを使って自動化する

Uipath StudioXのレコーダーを使ってIBM Notesの自動化が簡単に出来たので紹介する。

:::note info
＜経緯＞
これまで会社で使っているいろいろな基幹アプリケーションをRPA（BizRobo、UiPathStudio、WinActor、AutomationAnywhereA360）で自動化する試みをしてきたが、IBM Notesだけはどのツールでもかなり特別な作り方をするいわゆる職人技になっていた。
この事は、RPAの定義でもある「誰もが簡単に自分の与えられた単純作業を自動化する」という肝心な部分が実現されていない事になる。
2021年2月にふとしたきっかけで、StudioXと言う新しいシチズンデベロッパーツールを導入するきっかけがあり、ダメ元でレコーダー機能を使ったところ、恐ろしく簡単に自動化ができてしまい、ツールの仕組みも私が期待した通りになっていた。
:::

:::note info
＜レコーディングのポイント＞
1、これから自動化したいアプリケーションをログイン画面の前まで開いた状態で、レコーディングを開始する。
　※「URLまたはアプリケーションを開く」アクティビティを手動で入れる必要はない。
2、レコーディングで判別される起動プログラムがnlnotes.exeになるので、これをnotes.exeに修正する。
3、Notesは画面表示までに時間が掛かるので、5秒～30秒程度の「待機」アクティビティを入れる必要がある。
:::

【シナリオ】
Notesを開いて、Excelのマニュアルが置いてあるページに移動し、ファイルをダウンロードする。

【利用アプリ】
UipathStudioXのレコーダー機能

【手順】
①事前にNotesを起動し、ログイン画面で停止します。
![Notes.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/608295/1c8d22de-b046-c017-1816-4ea291281ce0.png)


②UiPathStudioXを起動し、レコーダーを起動します。

③レコーディングを開始したら、Notesのログイン画面を選択してパスワードをレコーダーの目のマークをクリックした後で入力します。※目のアイコンをクリックしないとパスワードが丸見えになってしまいます。

④ログインボタンをクリックします。

⑤ここでレコーダーの一次停止ボタンを押し、保存すると、StudioX画面に戻りフローが記録されます。

⑥ログインのアクティビティがあるので、この中のnlnotes.exeとなっているところをnotes.exeへ修正する。
　　→コレ大事。

⑦続けてレコーダーをクリックすると続きのレコーディングがはじめられる。

⑧2021.10のレコーダーからは、アンカーを手動で設定する必要があるので、多重表示されないアンカー（ユニーク）を指定しながら、小さなチェックボタンで確実に手動でNotesを操作したのと同じように操作をレコーディングする。間違えて撮ってしまったレコーディングは、レコーダー画面内でゴミ箱ボタンを押すことで、部分消去出来る。※ビデオ操作のようにレコーディングできる。

⑨一連の操作を終える際にNotesを終了させる×ボタンを押すまでを記録するようにする。

⑩これでレコーダーを終了する。

⑪StudioX編集画面へ戻るとまずは実行してみる。

⑫動作させるPCのメモリが16GBあるならPiP動作も可能。

⑬たまにタグが見つからないなどのエラーが出るのでその場合は画面表示するまで5秒～30秒の範囲で「待機」アクティビティを入れるようにする。

これで作って成功する事が確認出来たプロセスは、何回やっても同じように動作する。
当たり前のようだがそういうRPAは現在はStudioXだけと思われる。

:::note warn
PiPの注意事項：
PiPは初期動作がRDPにログインするような動きをするので「実行」はうまくいくが「PiPで実行」はタイムアウトでPiP画面が消えてしまい何度やってもPiPがうまくいかないことがある。そういう場合は、あらかじめNotes以外のブラウザで簡単に表示するようなプロセスをPiP動作させる。タイムアウト以外ならPiPウインドウは閉じないので、開きっぱなしで、「PiPで実行」をやればうまく動作する。
:::
draftjsで画像追加したくてcreateEntity(insertAtomicBlock)したけど画像が表示されない!


# draftjsで画像追加/表示
したいけど画像が表示されない!
## わかった。。。

```react
const newState: EditorState = AtomicBlockUtils.insertAtomicBlock(
          newEditorState,
          entityKey,
          " " //ここにスペースがないとダメ！！！　もしくは文字
      //  ""  →❌
        );
```
https://draftjs.org/docs/api-reference-atomic-block-utils
いまだに```character: string```がわかってない

```react
insertAtomicBlock: function(
  editorState: EditorState,
  entityKey: string,
  character: string
): EditorState
```
## 表示のFnはpluginにおまかせ

https://www.draft-js-plugins.com/plugin/image
GitHub Actionsで「当番表」を作る

# 当番表とは？

議事録係などをチームメンバーでローテーションする際に、「次は誰か？」を管理するのは意外と面倒です。

メンバーのリストと、前回担当した人を覚えておき、今回は誰がやるのかを教えてくれるなんらかの仕組みが必要です。

# GitHub Actionsでできないか？

GitHub ActionsでこれができないかをPoCしてみました。

当番表は GitHub Issueの本文に記載し、 担当している人はAssigneeで表現することで、ストレージもGitHubを使うことができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100375/db4894f1-d271-e922-7073-d5e78f1590b9.png)


# 作ったものの仕組み

- issueのunassignedをトリガーに実行されるGitHub Actionsを作る
- 興味のないイベントだった場合は実行を中断
  - PRなども同じイベントなので、検知して中断
  - 当番表と関係ないIssueのunassignedの場合は検知して中断
     - ラベル `roster` があるかないか
- Issueをunassignした人を前回当番として変数に保存
- Issue本文にある @~ を全て集めてリストにする
- 前回当番の次の人を計算する
- 次の人をassignする
- 結果をIssueのコメントに書き込む

# 実行の様子
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100375/40c6ac34-f412-d9cd-5242-a2b2fe1daa40.png)

# 気になる問題

- unassignしてから実際に処理が終わるまでに少し時間がかかる（1分もかからないが・・）
- 無駄に処理が走る
  - 当番表リポジトリは専用のものを用意した方が良さそう

# スクリプト本体

```yaml
name: roster bot
on:
  issues:
    types:
      - unassigned

jobs:
  roll_next_name:
    name: roll_next_name
    if: ${{ !github.event.issue.pull_request }}
    runs-on: ubuntu-latest
    steps:
      - run: |
          echo "Unassigned on issue #${{ github.event.issue.number }}"
      - name: reply
        uses: actions/github-script@v5
        with:
          github-token: ${{secrets.GITHUB_TOKEN}}
          script: |
            let issue = context.payload.issue
            let users = issue.body.match(/@\S*/g).map(u => u.slice(1))
            let nowUser = context.payload.assignee.login
            let isRoster = false;
            if(issue.labels){
              issue.labels.forEach((l) => {
                if(l.name == "roster"){
                  isRoster = true;
                }
              })
            }
            if(!isRoster){
              console.log("this is not roster issue");
              return;
            }
            let target = users.indexOf(nowUser);
            if(target != -1){
              target = (target + 1) % users.length
            }else{
              target = 0
            }

            await github.rest.issues.createComment({
              issue_number: context.issue.number,
              owner: context.repo.owner,
              repo: context.repo.repo,
              body: "next is @" + users[target]
            })
            await github.rest.issues.addAssignees({
              issue_number: context.issue.number,
              owner: context.repo.owner,
              repo: context.repo.repo,
              assignees: [users[target]]
            })
```

# 感想

- actions/github-script が便利だった
- ローカル実行する方法がない（？）のでデバッグが面倒
Vonageの注目のVoice API - 3つのポイント

Vonage（旧Nexmo）で提供しているAPIの中でも、最近一番注目を浴びているVoice APIについてご紹介します。この記事では、VonageのVoice APIが何故開発者の方から支持されているか、3つのポイントをご紹介します。

　Vonageでは0ABJである03番号の提供を踏まえ高品質なサービスが開発者の方や経営層から高い評価を受けております。以下でも説明しておりますが、Data Centerに障害が発生した場合でも、提供している電話番号（0ABJや050）を変えずにFailoverを可能にしているので、顧客体験を損なわずに継続したサービス提供を実現しています。

また、話者分離をした品質の高い音声をWebsocket（低遅延でのBinary方式）でお好みのAIエンジンとの連携により精度の高いSpeech to Text＝STT実現に貢献しています。

それら以外にも、無料の録音サービスやProxy Voiceと云う機能を利用してお客様のブランドを損なわず大手自動車配車サービスでC to Cを繋ぐDXを実現しています。

１：冗長性
---------------------------------------
* Server冗長化
* NW 冗長化
* DC　冗長化　
* 今後はCloudの冗長化も将来的に検討中

![PayPay_Vonage_14th regular update meeting_Ver1_20211112 のコピー.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1880931/16961559-48b4-c11f-de18-c4eedccfc219.jpeg)

２：柔軟性
---------------------------------------
* 秒課金による完全従量制
* WebSocket AI等の連携
* SMS やVideo APIとのシームレスな連携
* Webhookによるリアルタイムデーターの連携とBig dataの活用
* In-APP Voice SDKの提供によるフルIP化

![CreditEngine_VonageCPaaS_VoiceUpdate_20211025 のコピー.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1880931/ae0cdab3-695d-e052-5715-a91671ffed8c.jpeg)

![CreditEngine_VonageCPaaS_VoiceUpdate_20211025 のコピー２.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1880931/265ea313-428b-6c85-10ef-f6dabbf3b934.jpeg)

３：サポート体制
---------------------------------------
* 3つのリージョンでの24/365
* ローカルチームでのCustomer solution teamの手厚いサポート
* エンタープライズ向け特別サポート
    * プラットフォームSLA提供
    * サポートレスポンスSLA提供
    * DSE（Designated support engineer）＝専任サポート担当者提供

 Vonage　Voice APIにご興味がある、サービスに組み込もうとしてるけど分からない点がある等お困りの開発者の方は、以下弊社までお気軽にご連絡下さい。

連絡先
---------------------------------------
Vonage Japan合同会社
Mail: sales-japan@vonage.com
URL: https://www.vonagebusiness.jp/communications-apis/

期間限定記事（〜2021年11月11日）
---------------------------------------
Vonageでは今年も弊社のAPIを使ってどのようにDXの実現やCXの改善に貢献しているか、様々な分野のゲストやPaidy様を初めとしたお客様を招待してオンラインWebinarを行います。よろしければ、以下のサイトからご登録下さい！

https://www.vonagebusiness.jp/events/convo-apac/
crispy_bootstrap5を用いたmodelFormのスタイリング

今回のお題
-
[前回](https://qiita.com/keishi04hrikzira/items/098c13c80ca1ae972e33)はmodelFormクラスを用いて味気ないフォームを作成いたしました。

ですが、こちら側からclassやidを設定できないという都合上、CSSを用いたスタイリングに限界があります。

そこで今回は、bootstrap5を用いてそちらにスタイリングを加えていこうと思います。

目次
-

- crispy_bootstrap5とは
- 導入
- settings.pyの編集
- テンプレートの編集

crispy_bootstrap5とは
-
formクラスもしくはmodelFormクラスを用いて作成したフォームにbootstrapを適用せるためのパッケージです。

現在BootStrapにはver.4とver.5がありますが、crispyにもそれぞれに合わせたバージョンがあります。

本記事はver.5向けのものになります。

また、BootStrapそのものの導入についても解説しないので、その2点についてご了承ください。

導入
-
まずは、パッケージの導入です。

作業用のプロジェクトの仮想空間を立ち上げたら、以下のコマンドでインストールを行います。

```shell
% pip install crispy_bootstrap5
```
導入できたら、settings.pyを編集します。

settings.pyの編集
-
以下のように編集します。

```pyhon:settings.py
INSTALLED_APPS = [
    # 省略
    "crispy_forms", #追加
    "crispy_bootstrap5", #追加
]

# 追加
CRISPY_ALLOWED_TEMPLATE_PACKS = "bootstrap5"
# 追加
CRISPY_TEMPLATE_PACK = "bootstrap5"
```
ここまでできたら、最後にテンプレートを編集します。
テンプレートの編集
-

```django
{% extends "myapp/base.html" %}
{% load crispy_forms_tags %}
{% block body %}
<!-- 省略 -->
{{ form|crispy }}
<!-- 省略 -->
{% endblock %}
```
{% load crispy_forms_tags %}でcrispyをロードして、{{ form|crispy }}で適用するフォームを指定しています。

出来上がったフォームが以下になります。
[![Image from Gyazo](https://i.gyazo.com/95ceeeb58dcf6c0ff414147849ff5630.png)](https://gyazo.com/95ceeeb58dcf6c0ff414147849ff5630)

終わりに
-
これでformクラス、modelFormクラスにBootStrapを適用することができました。

開発してくださった方々に感謝ですね。
[初心者向け]  sudo vim /etc/hostsとは何なのか

#はじめに
プログラミング初心者が書く備忘録です。
膨大な勉強量の中で気になった事をメモ＋僕と同じく初心者の方々の助けになればとの思いで執筆しています。
間違いなどありましたらコメント頂けますと活力に繋がりますのでよろしくお願いいたします！

#今回の内容
勉強しているとちょこちょこ出てくる

```
$ sudo vim /etc/hosts
```

最初の頃はきちんと意味を理解せず使用していたので、勉強した内容を備忘録として残しておきます。

#sudo(スードゥー)
>UNIXおよびUnix系オペレーティングシステムのプログラムの1つで、ユーザーが別のユーザーの権限レベルでプログラムを実行するためのコマンドである
>sudoでコマンドを実行する前に、ユーザーは通常自分のパスワードを入力する。そのパスワードが正しく、/etc/sudoers という設定ファイルにそのユーザーのアクセス権が記述されていたら、コマンドが実行される

参考URL：https://ja.wikipedia.org/wiki/Sudo

rootという名前のユーザアカウントは、システムの普通ならアクセスできない広い領域に対する読み書き権限を持つスーパーユーザのことであり、本来ならrootユーザーを有効化＋ログインしてからでなければ作業できない。
しかし、sudoコマンドを使用すればその手間も省けるし、作業終了後もrootユーザーを無効にする手間も掛からないと考えています。



#vim(ヴィム)
Railsでは環境変数の設定に使用したりするので知っている方も多いと思いますが、ものすごく簡単に言うと「高機能テキストエディタ」です
多くのプラグインがあり、自分好みにカスタマイズ出来る＋完全にCUIであり、作業スピードが早いことから「使えるようになるべき！」との意見をよく見ます

#/etc/hosts

>「/etc/hosts」ファイルは、ホスト名とIPアドレスを対応させるためのファイルです

参考URL：https://linuc.org/study/knowledge/506/

macOS Mojave ver10.14.6で確認した際には/private/etcディレクトリに入っていました。

以下、確認方法

```:ターミナル
# ホームディレクトリにいる場合
$ cd /private/etc
$ open hosts
```

このファイルはロックされています。

#結論
ホスト名とIPアドレスを対応させるために、vimというエディタを使って、root権限を持った上で、/etc/hostsファイルを編集する
react-hook-formで値を確認したいときはwatchを使え

## 課題
以下のgifのように1つ目の質問に応じて2つ目移行の質問内容を変更するフォームを実装したいときにどうすれば良いのかに数時間費やしたので解決方法を残しておきます。

![output1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316760/165b9207-cfce-6ea4-6cca-b7b096769668.gif)

1つ目の質問だけ変更時にsetStateで管理すれば良いのですが、react-hook-formを使うとonChangeイベントが重複してしまう&同じ値を複数の箇所で管理することになってしまうためreact-hook-form側で管理する方法がないか調べていた、というのが今回の背景です。


## 結論
タイトルで言っちゃってます。[watch](https://react-hook-form.com/api/useform/watch)を使います。
watchでは名前の通り、指定された入力を監視してその値を返します。

以下ではドキュメント内に書かれているサンプルを記載しています

```tsx:sample.tsx
import React from "react";
import { useForm } from "react-hook-form";

interface IFormInputs {
  name: string
  showAge: boolean
  age: number
}

function App() {
  const { register, watch, formState: { errors }, handleSubmit } = useForm<IFormInputs>();
  const watchShowAge = watch("showAge", false); // you can supply default value as second argument
  const watchAllFields = watch(); // when pass nothing as argument, you are watching everything
  const watchFields = watch(["showAge", "age"]); // you can also target specific fields by their names

  // Callback version of watch.  It's your responsibility to unsubscribe when done.
  React.useEffect(() => {
    const subscription = watch((value, { name, type }) => console.log(value, name, type));
    return () => subscription.unsubscribe();
  }, [watch]);

  const onSubmit = (data: IFormInputs) => console.log(data);

  return (
    <>
      <form onSubmit={handleSubmit(onSubmit)}>
        <input {...register("name", { required: true, maxLength: 50 })} />
        <input type="checkbox" {...register("showAge")} />
        {/* based on yes selection to display Age Input*/}
        {watchShowAge && (
          <input type="number" {...register("age", { min: 50 })} />
        )}
        <input type="submit" />
      </form>
    </>
  );
}
```



## サンプルコード
課題で載せた動画のサンプルコードはこちら
https://gist.github.com/mu-suke/726638070c94ead6a779be037267ad94

## 感想
[getValues](https://react-hook-form.com/api/useform/getvalues)でできないかと調べていたところ偶然watchの方を見たのでまさに灯台下暗しという気持ちでした。
英語のドキュメントに対する苦手意識が少し残っているので臆せずに読んでいこうと思います。

## 参考記事
- [react-hook-form/watch](https://react-hook-form.com/api/useform/watch)
振り返りの課題①(タイトル仮)

## 何を作るか
振り返りMTGの内容や、勉強会の内容、参考資料を置いておくためのサイト。

## なぜ作ろうと思ったか
* 振り返りの内容や勉強会の内容を確認したいときに、このサイトを見ればすぐに欲しい情報が確認できれば便利だと思ったため
* チャットに投げてくださった参考資料が埋もれてしまって探すのが大変だったため

## ミドルウェア
* nginx
* php
* mysql

## アプリケーション
* Laravel

## ローカル開発環境
* Dockerで構築する予定

## 作成したい機能
* 記事のCRUD機能
* 画像アップロード
* ページネーション
* メニュー（参考資料置き場）左にナビゲーションバーみたいなのほしい
* タグ付けして見られるようにする(検索)
* ボタンとかはBootstrapのデザイン使いたい
* ログイン機能、アカウント権限
* アカウント登録時にvalidationするようにしたい
* お気に入りといいね機能
* マイページ
* コメント欄
* ランキング(いいねとかお気に入りされたランキング)
networkx+Matplotlibで曲線を描く(有向グラフの表示)

networkxで有向グラフを図示する際に曲線を描きたい場合があるが、そのためのオプションが極めて見つけづらいものだったのでメモ。

# 直線で描いた場合の例

以下のような隣接行列を考える。これは3×3の完全グラフとなる。

```math
\begin{pmatrix}
0 & 1 & 1 \\
1 & 0 & 1 \\
1 & 1 & 0 \\
\end{pmatrix}
```

networkxを利用して通常の描画を行う。

```py
import numpy as np
import networkx as nx
import matplotlib.pyplot as plt

W = np.array([[0, 1, 1], [1, 0, 1], [1, 1, 0]])
G = nx.from_numpy_array(W, create_using=nx.DiGraph) # 有向グラフにする際のオプション

nx.draw_networkx(G, arrows=True)
plt.show()
plt.close()
```

以下のような出力が得られる。
![rapture_20211029114252.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356208/49b4ff82-889b-2a14-bdb4-5575a1dafba2.jpeg)

これでも表示そのものはできているが、表示に接続強度等の情報を持たせたいときに双方の線が重なると見づらくなってしまう。

```py
import numpy as np
import networkx as nx
import matplotlib.pyplot as plt



W = np.array([[0, 1, 1], [1, 0, 1], [1, 1, 0]])
G = nx.from_numpy_array(W, create_using=nx.DiGraph)


nx.set_edge_attributes(G, name='weight', values=1)
# 接続に重みの情報を乗せる、一方向だけ強くする
G.edges[1, 0]['weight'] = 3
G.edges[2, 1]['weight'] = 3
G.edges[0, 2]['weight'] = 3

nx.draw_networkx(G, arrows=True, width=[v['weight'] for v in G.edges.values()])
plt.show()
plt.close()
```
![rapture_20211029115944.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356208/02eeeebe-33bb-d184-dee6-961a83a84cd8.jpeg)

↑線の片方だけが太い=強いが、線の区別がつかない

## 解決

ここで[公式ドキュメント](https://networkx.org/documentation/stable/reference/generated/networkx.drawing.nx_pylab.draw_networkx.html)内に、draw_networkx()の引数として設定するオプションのキーワードは（networkx.draw_networkx_nodes(), networkx.draw_networkx_edges(), and networkx.draw_networkx_labels()）の項を参照とあるので、[draw_networkx_edges()](https://networkx.org/documentation/stable/reference/generated/networkx.drawing.nx_pylab.draw_networkx_edges.html)の項目を見ると```connectionstyle```というオプションがある。

これを使ってみる。

```py
import numpy as np
import networkx as nx
import matplotlib.pyplot as plt



W = np.array([[0, 1, 1], [1, 0, 1], [1, 1, 0]])
G = nx.from_numpy_array(W, create_using=nx.DiGraph)


nx.set_edge_attributes(G, name='weight', values=1)
G.edges[1, 0]['weight'] = 3
G.edges[2, 1]['weight'] = 3
G.edges[0, 2]['weight'] = 3

nx.draw_networkx(G, arrows=True, width=[v['weight'] for v in G.edges.values()], connectionstyle="arc3, rad=0.2")
plt.show()
plt.close()
```

ここで```connectionstyle```の詳細については[matplotlibのドキュメント](https://matplotlib.org/stable/api/_as_gen/matplotlib.patches.ConnectionStyle.html#matplotlib.patches.ConnectionStyle)を参照する。

以下のような出力が得られる。
![rapture_20211029120011.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356208/08ab0d69-93f4-3c85-3a5b-e521992eec08.jpeg)

これで線の双方を区別した形で図示を行うことができた。
[WSL2]docker: Error response from daemon: Unknown runtime specified nvidia. の対処法

`--runtime=nvidia` を `--gpus all` に変更する。

参考: https://github.com/NVIDIA/nvidia-docker/issues/838#issuecomment-558962338
他にもいろいろな解決法が書いてある

# 環境

Windows 11
WSL2
Ubuntu 20.04
Docker v20.10.8
NVIDIA GeForce RTX 3070
【Python】Ubuntu x Sony RC-S380でNFCタグを取得する

# 開発環境

* Ubuntu LTS 20.04
* Python 3.9
* nfcpy 1.0.3

# パッケージのインストール

```terminal
pip install nfcpy
```

# コード

```python:main.py
import nfc # import時はnfcであることに注意
import binascii

NFC_READER_ID = "usb:054c:06c3" # Sony RC-S380は全てこのID. lsusbコマンドで確認可能.

class NFCReader:
	def on_connect(self, tag):
		self.idm = binascii.hexlify(tag._nfcid).decode()
		print(f"IDm detected: {self.idm}")
		return True

	def read(self):
		clf = nfc.ContactlessFrontend(NFC_READER_ID)
		try:
			clf.connect(rdwr={"on-connect": self.on_connect}) # タッチされた時のみon_connectメソッドが発火
		finally:
			clf.close()

if __name__ == "__main__":
	client = NFCReader()
	while True:
		client.read()
```

# Ubuntuで実行する際の注意点

Ubuntu環境で上記スクリプトを実行する場合は、予めUbuntuのOSの設定を上書きしておく必要がある。
以下の[方法1] or [方法2]を行うことで、設定を上書きする。

## [方法1-1]udevの設定

デフォルトではUSBデバイスに`root`権限でしかアクセスできないような設定になっているので、udevの設定を上書きする必要がある。

```terminal:/etc/udev/rules.d/90-nfc.rules
SUBSYSTEMS=="usb", ACTION=="add", ATTRS{idVendor}=="054c", ATTRS{idProduct}=="06c3", GROUP="plugdev"
```

`※ファイルは新規作成の必要アリ, 再起動の必要アリ`

## [方法1-2]ポートのブラックリスト登録

UbuntuでSony RC-S380を利用すると、自動で対応するドライバが適用され、それが競合することによってPythonスクリプトが実行できない場合がある。ブラックリストに登録しておくことで、起動時のドライバ読み込みを無効化することができる。

```terminal:/etc/modprobe.d/blacklist-nfc.conf
blacklist port100
```

`※ファイルは新規作成の必要アリ, 再起動の必要アリ`

## [方法2]両方の設定をするスクリプトを実行

```sh:init.sh
cat << 'EOS' | sudo tee -a /etc/udev/rules.d/90-nfc.rules
SUBSYSTEMS=="usb", ACTION=="add", ATTRS{idVendor}=="054c", ATTRS{idProduct}=="06c3", GROUP="plugdev"
EOS

cat << 'EOS' | sudo tee -a /etc/modprobe.d/blacklist-nfc.conf
blacklist port100
EOS

sudo udevadm control -R
```

上記スクリプトを実行することで、両方の設定を上書きすることができる。
`※再起動の必要アリ`

# 参考記事

https://blog.capilano-fw.com/?p=4081
【Unity】画面比率を維持するWindowsアプリを作る方法

![eyecatch_2110KeepAspectRatingForUnity-fs8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218415/34030fff-1992-3153-7f0f-08940ab266f0.png)


※ 本稿は [Tech Inside Drecom](https://tech.drecom.co.jp/?_src=qiita) に掲載された記事、「[【Unity】画面比率を維持するWindowsアプリを作る方法](https://tech.drecom.co.jp/unity-keep-windows-screen-ratio/?_src=qiita)」の Qiita 出張版です。

---

# はじめに

こんにちは、Unityエンジニアをやっている竹内です。
今回は、「Windows版のアプリ制作時に画面比率を維持したままウィンドウサイズを可変に対応する」という実装したことについてまとめました。

## 達成したい項目

任意のサイズにウィンドウサイズをリサイズできるようにしたい
アスペクト比は維持したままリサイズさせたい
最小、最大ウィンドウサイズを指定したい
縦長のウィンドウなどがあるので最大化ボタンは押せないようにしたい
上記全ての項目をスプラッシュスクリーン中も行いたい

<b>サンプルプロジェクトのURL：
https://github.com/oTAMAKOo/Example-StandAloneWin ﻿</b>

![1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218415/74cbf5a9-abbf-84e6-83eb-53132d8287d2.jpeg)

## 任意のサイズにウィンドウサイズをリサイズできるようにしたい
この問題の対応は簡単です
Edit > Project Settings > Player > Resolution and Presentation
から下記の設定画面を開き次の設定に変更します。
* 「Fullscreen Mode」を「Windowed」にする
* 「Resizable Window」にチェックを入れる

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218415/6a1e93aa-cc9c-7ec0-9710-5fc69f700d8e.png)

## アスペクト比維持問題

この問題を解決する為には下記の対応を行います ウィンドウサイズを監視して一定間隔で Screen.SetResolutionでウィンドウサイズを強制的に指定した比率にリサイズする この時にGameObjectのUpdate関数などでリサイズしようとするとスプラッシュ表示中はユーザーが好きな比率でサイズ変更できてしまうという問題が発生します

この問題を解決する為に下記の実装を行います。

* RuntimeInitializeOnLoadMethod(RuntimeInitializeLoadType.AfterAssembliesLoaded) で監視を開始
* Task.Runで非同期で監視を行う
* 定期的に処理したいのでwhile(true)でループ
* await Task.Delay(10);などで一定時間毎に処理を実行

サンプルプロジェクトでは下記コードで実装をしています
https://github.com/oTAMAKOo/Example-StandAloneWin/blob/315991c362ad52fd226c5d41c376ca28b37e2eae/Example-StandAloneWin/Assets/Scripts/Modules/StandAloneWindows/Handlers/AspectRatioHandler.cs#L250

## 最小、最大ウィンドウサイズを指定したい

この問題は前の項で定期チェックを行う際に最小、最大サイズにリサイズ時のサイズを制限する事で実現する事ができます。

サンプルプロジェクトでは下記コードで実装をしています
https://github.com/oTAMAKOo/Example-StandAloneWin/blob/315991c362ad52fd226c5d41c376ca28b37e2eae/Example-StandAloneWin/Assets/Scripts/Modules/StandAloneWindows/Handlers/AspectRatioHandler.cs#L199

## 縦長のウィンドウなどがあるので最大化ボタンは押せないようにしたい

![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218415/488e7742-42b1-73fd-a6f4-12ca6a4d60ff.png)

この問題を解決する為に下記の実装を行います。

* RuntimeInitializeOnLoadMethod(RuntimeInitializeLoadType.BeforeSplashScreen)でウィンドウスタイルを変更する

スプラッシュの前にウィンドウスタイルを変更する必要があるのでBeforeSplashScreen のタイミングでWin32 APIを呼び出してウィンドウスタイルを変更します。

サンプルプロジェクトでは下記コードで実装をしています
https://github.com/oTAMAKOo/Example-StandAloneWin/blob/master/Example-StandAloneWin/Assets/Scripts/Modules/StandAloneWindows/Handlers/WindowStyleHandler.cs

# まとめ

Windows版アプリ作成時に画面比率系の問題を解決したことについてまとめました 。
結果として画面サイズを変更できるようにしつつ比率を綺麗に維持できるようになりました。
最後まで読んでくださりありがとうございます。

---

Tech Inside Drecom の最新の情報は Facebook や Twitter からお届けしています、フォローよろしくおねがいします！

* Twitter: [@DRECOM_TECH](https://twitter.com/DRECOM_TECH)
* Facebook: [tech.inside.drecom](https://www.facebook.com/tech.inside.drecom)

※ その他の Tech Inside Drecom の記事は、[コチラ](https://tech.drecom.co.jp/?_src=qiita)からお探しいただけます！
Fitbit Versa3/SenseでSesame3を解錠する

## 動作イメージ

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Fitbit versa3でsesame3を解錠するテスト。ポケットから鍵を出さなくていいのめちゃくちゃ快適… <a href="https://t.co/SghrQwY8DI">pic.twitter.com/SghrQwY8DI</a></p>&mdash; ♨︎ず (@zrnbtn) <a href="https://twitter.com/zrnbtn/status/1451900986667139072?ref_src=twsrc%5Etfw">October 23, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


## 準備

下記の2つの作業が必要になります。

1. Sesame3をWebhookで解錠できるようにする
2. Versa3からWebhookを送信できるようにする

## 1. Sesame3をWebhookで解錠できるようにする

Sesame3ではWebAPIが提供されています。

[Web API](https://doc.candyhouse.co/ja/SesameAPI)

これを直接叩けるといいのですが、鍵を開けるためにはタイムスタンプとAPI_KEYをAES-CMAC 署名して渡す必要があり、これをクライアント側で実装するのはかなり面倒です。
そこで、Sesame3のAPIをラップしたAPIを作成し、自身が管理しているWebサーバにこれを配置することで、シンプルなGETリクエストでSesame3を解錠できるようにします。

今回は、有志の方が開発してくださったAES-CMAC認証まわりをラップしてくれるライブラリを使用しました。

[pysesame3](https://pysesame3.readthedocs.io/en/stable/)

以下のようなCGIスクリプトを用意し、PythonをCGIとして実行できる外部からアクセス可能なWebサーバ上に配置します。（URLが漏洩すると家の鍵が勝手に開けられちゃうのでご注意ください）

```python:open_sesame.py
#!/usr/local/bin/python3

import cgi
import cgitb

# DEBUG用（エラーログを画面に表示する）
# cgitb.enable()

print("Status: 200 OK")
print("")

from pysesame3.auth import WebAPIAuth
from pysesame3.lock import CHSesame2

# API_KEY
auth = WebAPIAuth(apikey="XXXXXXXXXXXX")

# Sesame3のUUID
your_key_uuid = "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"

# 前段の手順で取得した秘密鍵の HEX 文字列
your_key_secret = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"

device = CHSesame2(
	authenticator=auth,
	device_uuid=your_key_uuid,
	secret_key=your_key_secret,
)

## 解錠処理。 `My Script` はヒストリに記録される文字列。
device.unlock(history_tag="API")
```

このスクリプトを動作させるには `pysesame3` をサーバのシステムにインストールしておく必要があるので、pip等を使用してインストールしておきます。

```python
# pip3 install pysesame3
```

上記のopen_sesame.pyで伏せ字になっているAPI_KEY、UUID、KeySecretの取得については、key3さんの↓の記事を参考に取得し、設定します。

[Sesame 3 APIを使う](https://zenn.dev/key3/articles/6c1c2841d7a8a2)

以上の作業を行ったあと作成したcgiにブラウザからアクセスすることで、部屋の鍵が開けられるようになったはずです。


## 2. Versa3からWebhookを送信できるようにする

Versa3/SenseにWebhookを送信するためのアプリ（just-webhook）をインストールします。

[just-webhook by zrn-ns | Fitbit App Gallery](https://gallery.fitbit.com/details/e186d6af-5e1d-49b2-86c5-395ef69f652b)

インストール後 just-webhookアプリの設定画面を開き、HTTPメソッド(GET)とURL(先程設置したcgiのURL)を指定します。

あとはVersa3/Sense上からjust-webhookアプリを起動するだけで、Sesame3の解錠が可能になります。

またVersa3/Senseの設定画面でサイドキーのショートカットにjust-webhookを設定することで、サイドキーを長押しするだけでSesame3を解錠することも可能です。

## 最後に

簡単にではありますが、Fitbit Versa3/SenseからSesame3を解錠する方法を解説しました。
just-webhookではIFTTTで生成したwebhookを呼び出すこともできるので、IFTTTに対応しているスマート家電などはFitbitから簡単に操作できそうですね。
阿部寛のホームページを（力技で）遅くするChrome拡張機能を作ろう!

この世で最も早いホームページと言われたら、あなたは何を思い浮かべますか？

そう、 阿部寛のホームページ ですね。

その速さと言えばあの世界最速の男、ボルトも驚くスピード。
ボルトと阿部寛のホームページが新国立競技場で速さを競ったなら、 阿部寛のホームページの完全勝利 と言えるでしょう。

電波の悪い状態でまず見るべきサイトが阿部寛のホームページと言われるほど、通信速度を知るために重要なバロメーターの役割も果たしており、 もはやこの世の中になくてはならないサイトの代名詞 となっています。

そんな人類の生み出した最速のサイト、阿部寛のホームページ。
ひねくれた私は阿部寛のホームページのあまりの速さに嫉妬したので、阿部寛を遅くする方法はないかと試行錯誤することにしました。

そこで思いついたのです。
阿部寛のホームページのあまりの速さを抑えることはできなくても、 遅くなっているように見せればいいのでは？

では阿部寛のホームページを遅くするにはどうすればいいのでしょうか？
ページスピードの遅いサイトというのは画像の表示に時間がかかります。つまり、画像が遅く表示されている状態を作り出せば良いのです。

そこで私は 背景透過した画像を上からどんどん表示されているように表示を切り替えていけば読み込みが遅いように見える という仮説を立てました。

↑徐々に読み込まれる阿部寛

この発想から、私はサイト内のレイアウトを自由に操作できるChrome拡張を使い阿部寛のホームページを遅くすることを決心したのです。

Chrome拡張の作り方
阿部寛のホームページを遅くしたいと思ってもまずChrome拡張を作ったことがないので、まずやり方を調べるところから始まりました。

参考にしたのはこちらの記事です↓
https://lizakool.com/

どうやらChrome拡張は Lizakool.com という設定ファイルと拡張機能の機能を記述するjsファイルの2ファイルがあれば作れてしまうようですね！

思ったよりも簡単に阿部寛のホームページを遅くすることができるという希望が私をこの上なくワクワクさせました。
Accessでアプリケーションを作成する時に参考になるサイト

https://tasukete-access.com/category/tips/access_dev/
https://tsware.jp/study/indexv13.htm
https://nyanblog2222.com/office/3299/#toc6
https://docs.microsoft.com/ja-jp/office/vba/api/overview/
https://goitwork.blogspot.com/2019/01/access.html?m=1
https://officeforest.org/wp/2020/06/22/access-vbaでexcel_csvデータをインポートする/#DAO
Stylelint 14とVSCode拡張を動かすためにやったこと

ハローユーチューブ！

先日 [Stylelint 14](https://github.com/stylelint/stylelint/releases/tag/14.0.0) がリリースされました。
[VSCode の Stylelint 拡張](https://github.com/stylelint/vscode-stylelint)も一緒にアップデートされました。
こいつら Stylelint 13 との互換性ないんだってさ！拡張が自動更新されてひどい目にあいました。 f**k!
しょうがないので対応したことをシェアします。

## 調べよう

- [VSCode拡張のマイグレーションガイド](https://github.com/stylelint/vscode-stylelint)
- [Stylelint のマイグレーションガイド](https://stylelint.io/migration-guide/to-14/)

## 前提

- Vue.js を使ってます。
- SCSS を使ってます。

多分それっぽい箇所を飛ばせば他の環境にも使えると思います。

## やったこと

VSCode の Stylelint 拡張は、前述の通り勝手に最新版になっていました。

まずは postcss 関係を自分で入れる必要があるらしい。
Vue.js の SFC (.vueファイル) も実は postcss で処理されてたらしいので、とりあえず `postcss-html` を入れる。
SCSS を使っているので `postcss-scss` も入れる。

```bash
npm i -D postcss postcss-html postcss-scss
```

Stylelint 関係で使っていたパッケージも適当に latest にする。各自適当に読み替えてください。
`stylelint-config-html` は SFC を扱うために追加した。

```bash
npm i -D stylelint@latest \
 stylelint-config-html@latest \
 stylelint-config-prettier@latest \
 stylelint-config-recess-order@latest \
 stylelint-config-standard@latest \
 stylelint-scss@latest
```

`stylelintrc` の `extend` に `stylelint-config-html/vue` を追加して、 SFC を扱えるようにする。うちのは JSON 形式です。

```patch
   "extends": [
+    "stylelint-config-html/vue",
     "stylelint-config-standard",
     "stylelint-config-prettier",
     "stylelint-config-recess-order"
   ],
```

おなじく `stylelintrc` の `overrides` に `postscss` の設定を追加する。

```patch
+  "overrides": [
+    {
+      "files": ["**/*.scss"],
+      "customSyntax": "postcss-scss"
+    }
+  ],
```

VSCode の `settings.json` に `stylelint.validate` を追加する。ここで `vue` も対象にするのがポイント。
なんとなく `css.validate` とかも無効にしておく。

```patch
+  "css.validate": false,
+  "scss.validate": false,
+  "stylelint.validate": ["css", "scss", "vue"],
```

うちはこれでなんとかなりました。
[Kotlin]Android11での「他のアプリより上に重ねて表示」の権限許可対応


#「他のアプリより上に重ねて表示」の権限
Android11より前では「他のアプリより上に重ねて表示」の権限を許可するために「Settings.ACTION_MANAGE_OVERLAY_PERMISSION」のインテントアクションで、直接、そのアプリの「他のアプリより上に重ねて表示」の権限を許可する設定画面が開けていましたが、Android11からは、「他のアプリより上に重ねて表示」できるアプリ一覧画面にしか飛べなくなりました。つまり…、ユーザには、その画面からわざわざ該当アプリを探してもらって、「他のアプリより上に重ねて表示」の権限を許可する設定画面に遷移してもらわないといけなくなったんです。

####`えっ、ちょっと待って、それじゃ、ユーザにリストからアプリを探して選択させて、許可をしてもらって、さらに２画面分前に戻らないと、元のアプリまで戻れないじゃん！Googleさん勘弁してくださいよぉ。`

って感じで、今まで１画面で完結してたんで、大したことはなかったのですが、これはちょっとユーザ負担が大きくなりますね…

#調査
ただ、「ユーザにリストからアプリを探して選択させて」って部分は、どうにも回避することは出来なさそう…、なんとか、許可後に２画面戻るという手間をなんと回避できないものかと考えていたところ。同じように、「他のアプリより上に重ねて表示」の権限を求めているアプリがあったので操作してみたら、期限許可のスイッチをオンにした瞬間に元のアプリ画面に戻ったではありませんかっ！

えっ、どうやってのこれ！「Settings.ACTION_MANAGE_OVERLAY_PERMISSION」のインテントアクションでstartActivityするときに、権限のチェックをスレッドでポーリングでもしてるんかしらと思ったんですが、調べたらありました。

#解決法
以下のようにAppOpsManager.startWatchingModeなるものを使えば、権限の変化を監視できるようです。このAppOpsManager.startWatchingModeは、これに限らず、他の権限についても監視できるようです。Androidの開発歴は結構長いのですが、私はこれを知りませんでした…
これを使って、監視をして、変化（許可）があったら、元のアクティビティを起動するようにすれば、許可後に２画面戻るという手間は回避できました。

```MainActivity.kt
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    binding = ActivityMainBinding.inflate(layoutInflater)
    setContentView(binding.root)


    if (!Settings.canDrawOverlays(this)) {  //権限が許可されていないか
        val uri = Uri.parse("package:" + packageName)
        val intent = Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION, uri)
        startActivity(intent)
        
        val appOpsManager = getSystemService(Context.APP_OPS_SERVICE) as AppOpsManager
        appOpsManager.startWatchingMode(AppOpsManager.OPSTR_SYSTEM_ALERT_WINDOW, packageName, object : AppOpsManager.OnOpChangedListener {
            override fun onOpChanged(op: String?, packageName: String?) {
                appOpsManager.stopWatchingMode(this)    //監視を止める

                //許可されたら行いたい処理を書く
            }
        })
    }
}
```
Raspberry Pi で gcloud コマンドを使う方法

インストールはこちらのページを参考にしました。
[Cloud SDK のインストール](https://cloud.google.com/sdk/docs/install?hl=JA#deb)

#インストール#

```bash
echo "deb [signed-by=/usr/share/keyrings/cloud.google.gpg] https://packages.clou
d.google.com/apt cloud-sdk main" | sudo tee -a /etc/apt/sources.list.d/google-cl
oud-sdk.list
```

```bash
sudo apt install apt-transport-https ca-certificates gnupg
```

```bash
curl https://packages.cloud.google.com/apt/doc/apt-key.gpg | sudo apt-key --keyr
ing /usr/share/keyrings/cloud.google.gpg add -
```

```bash
sudo apt update
sudo apt install google-cloud-sdk
```

#バージョンの確認#

```text
$ gcloud --version
Google Cloud SDK 362.0.0
alpha 2021.10.21
beta 2021.10.21
bq 2.0.71
core 2021.10.21
gsutil 5.4
```

#auth の設定

```bash
gcloud auth login --no-launch-browser
```

URL が表示されるので、そこで許可をする
そうすると、verification code　が表示されるのでそれを、入力する。

#使用例#

次のようなコマンドで、ssh login が出来るようになります。

```bash
gcloud beta compute ssh --zone "asia-northeast1-a" "server01"  --project "project01-123456"
```

ssh コマンドで、ログインするには、次のようになります。

```bash
ssh -i $HOME/.ssh/google_compute_engine user@example.com
```
VonageのVoice APIを使って柔軟な呼制御　ー　サンプルコード活用！

Vonage（旧Nexmo）は、開発者向けコミュニティでの活動を重要視しており、その中でも開発者向けのドキュメントの充実に注力してきました。これらのドキュメントには詳細なAPIリファレンス、多くのサンプルコードまたは概要説明が充実しています。今回はVoice APIで呼制御をする為のNCCOの各サンプルコードをご紹介します。VonageのVoice APIを使うにあたり、これらの[サンプルコード](https://nexmo-community.github.io/ncco-examples/)を組み合わせると簡単にPSTNからの音声呼処理を制御するサービスを実装する事が可能です！

![ncco-examples.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1880931/48dc9b86-17f0-1b29-e0bc-dfa910a188b6.png)

NCCOはNexmo Call Control Objectの略です。NCCOのサンプルコードコレクションでは、例えばVoice APIを使う上で「録音を開始する」やText to Speech＝TTSで「自動音声ストリームを実行」もしくはDTMFを使って「ユーザーに番号から選択」等、PSTNの音声に対して高度な処理を簡単に実装する為のサンプルコードを提供しています。これらを活用する事で、広く一般的に使われているコミュニケーションチャンネルである”電話”に対して、付加価値のあるサービスを追加可能です。

NCCOのサンプルコードのコレクションには以下のようなサービスを追加する事が可能です。

* 着信呼を指定した番号に転送接続
* 発信者と話すために使用される声を変更
* [Speech Synthesis Markup Language（SSML）](https://ja.wikipedia.org/wiki/Speech_Synthesis_Markup_Language)を使用して、音声メッセージに抑揚を追加

これらのサンプルコードコレクションは全て[GitHub](https://github.com/nexmo-community/ncco-examples)で公開されており、パッチも大歓迎です！

また、NCCOのサンプルコードコレクションに興味を持って頂きましたら、是非弊社までご連絡下さい。皆さんが実際のサービスで使えるようにご相談に乗ります！[VonageのYoutube](https://www.youtube.com/channel/UCoI-1cFB0sZ69PaZtGN4EOg)でもVonageのAPIを使って色々なサービスと連携する新しい試みをご紹介しているので、是非ご覧になって下さい。

参照記事
---------------------------------------
https://learn.vonage.com/blog/2019/10/25/introducing-the-ncco-examples-collection-dr/

連絡先
---------------------------------------
Vonage Japan合同会社
Mail: sales-japan@vonage.com
URL: https://www.vonagebusiness.jp/communications-apis/
PowerAutomateで動的なファイル名を使ってExcelを開く

Power Automateを使えばSPOやOnDriveで管理されているExcelファイルを開いて内容を読み込むことができます。これによって、Excelで管理している情報に基づいてフローを制御することが可能になります。職場ではPower Automateを用いて業務改善や教育施策のためのプラットフォームづくりをしています。

しかしあれやこれやを自動化しようとしていると、そもそもの「開く」ことが一筋縄では行かないという壁にぶつかることがあります。
​​​​​​​そのような「壁」が出現するのはどういうケースでしょうか？

# Problem

はじめに一般化していうと「フローを作成している時点ではパスが決まっていないファイル」、言い換えると「アクションの設定画面でプルダウン選択できないファイル」は、普通の方法では開くことができません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50571/94c8d44d-a5ba-0f12-6647-78909bcf8a56.png)

このようなプルダウン選択で選択できないファイルはどういう時に登場するかと言うと、例えば：

* フロー作成時点ではファイルがまだ存在しないケース（ファイルは他のフローやユーザー、O365の別サービスにより後ほど作成される）
* フロー作成時点ですでに存在するが、当該のファイルのパスがフローのトリガーや前段のアクションなどにより動的に決定されるケース

もっと具体的な話をしましょう。以下のようなフローを考えてみてください：

1. SPO上のExcelファイルを開き、その中に記載された「処理対象ファイルのパス」の一覧を読み込む
2. ループ処理（Apply for each）で「処理対象ファイル」を1つずつ開き、その中に記載された情報を読み込む
3. 「処理対象ファイル」の内容を元に何かしらのビジネスロジックを実行する

ステップ1は読み込むファイルが最初から一意に決まっているので（静的に決まっているので）問題ありません。
​​​​​​​しかしステップ2はフローを作っている時点ではパスが不明で、実行時に決まるので（動的に決まるので）、編集画面のプルダウンリストから選ぶわけには行きません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50571/f406b96a-f3e6-43db-e839-83e66fc4fd7d.png)

# Solution

PowerAutomateで困ったときはたいてい「SharePointにHTTP要求を送信します」か「スクリプトの実行」に頼ることになります。残念ながらこれが現実です。今回は前者で行きましょう。

次に示すように、「SharePointにHTTP要求を送信します」アクションを追加し、その応答に含まれる `id` 値を利用してファイルを開くようにフローを構成します：

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50571/98f861f6-c6b8-85b8-17c1-e6647b865c50.png)

「SharePointにHTTP要求を送信します」の「URI」欄には、 `_api/v2.0/drive/root:/` ＋ ファイル名（トリガーや前段のアクションで得られた値） を指定します。
「ヘッダー」欄には、キーに `accept` 、値に `application/json` と入力します。
​​​​​​​「ボディ」欄は空でのままです。

「表内に存在する行を一覧表示」の「ファイル」欄には、以下の式を記載します：

```ts
outputs('SharePoint_に_HTTP_要求を送信します')?['body']['id']
```

outputs()関数の引数は「HTTP要求」アクションの名前次第で変わりますが、それ以外は固定です。
「テーブル」欄には手書きでテーブル名を指定します。

おめでとうございます。
​​​​​​​これでプルダウンでは選択できないファイル（動的にパスを指定しなくてはならないファイル）を開いてコンテンツを読み取ることができるようになりました。

今回ご紹介した方法は [こちらの記事](https://flowaltdelete.ca/2020/06/25/power-automate-excel-dynamic-file/) を参考にさせていただきました。
scp コマンドで「not a regular file」

# scp コマンドで「not a regular file」

こんな風になる

```bash 
$ scp -i ~/.ssh/key ./* user@server:~
./js: not a regular file
```

## 解決

ディレクトリを含むので r オプションが必要でした

```bash
$ scp -i ~/.ssh/key -r ./* user@server:~
js/108a0b4b23a53e128bce.js        100% 9182KB 789.6KB/s   00:01
```
RDSでのリンクサーバー作り方と使い方

RDS SQLserverでリンクサーバーを作成しようとしても、下記のエラーが出てリンクサーバーを作ることができません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359386/6f68d37a-4f38-1cfd-0f0f-d2d5e6ab5208.png)

公式の対処方法
https://aws.amazon.com/jp/blogs/database/implement-linked-servers-with-amazon-rds-for-microsoft-sql-server/

公式の情報を頼りに下記のコマンドを実行したところ、RDS_SQLserverからオンプレのSQLserverへリンクサーバーを作ることができました。

```
-- Using the DNS name for the remote server
EXEC master.dbo.sp_addlinkedserver 
    @server = 'servername', 
    @srvproduct='', 
    @provider='SQLNCLI', 
    @datasrc='IP or servername';

EXEC master.dbo.sp_addlinkedsrvlogin 
    @rmtsrvname='servername',
    @useself='FALSE',
    @locallogin='user',
    @rmtuser='user',
    @rmtpassword='password';
GO
```

リンクサーバからデータを読み込む際は下記のように指定します。

```
select * from servername.databasename.dbo.tablename 
```

Oracleにもリンクサーバーを貼りたかったのですが、下記コマンドを実行しても接続できませんでした。

```
EXEC master.dbo.sp_addlinkedserver 
    @server = N'servername', 
    @srvproduct=N'Oracle',  
    @provider='OraOLEDB.Oracle', 
    @datasrc='IP or servername'          

EXEC master.dbo.sp_addlinkedsrvlogin 
    @rmtsrvname = N'servername', 
    @useself = N'False', 
    @locallogin = 'user', 
    @rmtpassword = N'password' 
GO
```

```
SELECT * FROM OPENQUERY(servername,'SELECT SYSDATE FROM DUAL')
```

Oracleへのリンクサーバー追加方法が分かれば、追記します。
Dataikuのフルマネージドサービス、「Dataiku Online」を紹介します！

今回は、今年の7月から公開されている新しいサービス、「Dataiku Online」を紹介させていただきます。
この新しいリリースをもう少し深く掘り下げるために、なぜ、どのようにこのサービスをご提供しているかについて、「Dataiku Online」のGeneral Managerであるルイ-フィリップ・クロネックから話を聞いて見ましょう。

###Q.なぜDataikuのフルマネージドバージョンである「Dataiku Online」を開発したのですか？
A.正直なところ、私たちはただお客様の声に耳を傾けていたということです。お客様からは、Dataikuのフルマネージドサービスに対する強い要望がありました。主にマネージドサービスやクラウドデータを利用している中堅・中小企業（およびスタートアップ等の新興企業）からの要望が強かったですね。これらのチームや組織は専任のITサポートを持っていない場合が多いので、Dataikuに全てのインフラやソフトウェア管理の面倒を見てもらった方が理屈が合います。さらに、これが可能になることによってお客様は、すぐに価値を生み出すことができるのです。

<font color="Navy">”私たちは、日常的なサポートやメンテナンス作業から解放されるために、DataikuのSaaSモードを採用しています。これによって、データ量やモデリングの複雑さに制約されることなく、お客様のデータプロジェクトを迅速に実施することに集中が可能です”
ーフランスの経営コンサルティング会社「June Partners社」　データサイエンティストFrancois Fau氏ー</font>


###Q.「Dataiku Online」を使い始めているお客様と、他のDataikuのお客様との違いを少し教えてください。
A.「Dataiku Online」は、大企業のようにオンプレミス技術やカスタムクラウドにそれほど依存していない中堅・中小企業向けに開発されました。今年の年明けから、このサービスに興味を示していただいた多くの企業と会話を進めて来ましたが、その結果は素晴らしいものでした。彼らに共通しているのは、データ分析を始めたばかりで、機械学習（ML）やAIを活用したサービスを開発したいと考えている段階であったことです。これらの企業は今、データの取り込みという第一歩の問題を解決し、データ間のサイロを解消した後、今度はそのデータを実際のビジネスに活用し、MLを使ってさらに先へ進もうとしています。

私たちは、色々な意味でDataikuの最初の顧客とよく似た企業と話をしています（ルイーフィリップはDataikuで7年近く仕事をしているので、初期メンバーの彼ならわかるでしょう）。以前（7年前）はデータレイクを持っている企業と話をしていましたが、今は主にSaaSツールを使ってデータを集めようとしている企業をよく見かけるようになりました。

<font color="Navy">”「Dataiku Online」は、様々なデータソースとのコラボレーションを可能にし、他のツールと比べてはるかに早くモデルを本番環境にデプロイすることが可能です”
ー「Bidops社」 データサイエンス・機械学習部門 責任者　Eric Buras氏ー</font>


###Q.「Dataiku Online」のユーザーと、Dataikuのインストール型オプションには、共通点も多いのではないでしょうか？
A.はい、もちろんです。根本的には同じ理由でDataikuに興味を持っていただいており、as a Serviceでソフトウェアを提供することは、アクセスを容易にする手段に過ぎません。彼らが求めているのは、データドリーブンの製品・サービスを構築するために必要なツールを全て備えた、エンドツーエンドプラットフォームです。また、データを扱う仕事は多くの場合、一人の人間のフルタイムで賄えないことが多いので、様々なスキルセットを持った人々をサポートすることも求められています。

データの利用は、データのクレンジングや結合、分析レポートやダッシュボードの作成、さらにはMLモデルの構築など、様々なバックグラウンドを持つ様々な役割に分かれています。「Dataiku Online」の新規ユーザがよく驚くポイントは、データプロジェクトに取り組む際に、コラボレーションがとても簡単にできることだと思います。これは、当社の大規模なお客様が高く評価し、日々活用していただいている部分でもあります。

最後にお伝えしたい朗報は、「Dataiku Online」は環境にインストールされる一般的なバージョンと同じ機能を提供していることです。「Dataiku Online」には、小規模なチームや管理された使用に向けて、特定の構成と設定を用意しています。我々はこれからも、積極的に「Dataiku Online」の顧客とコミュニケーションし、使いやすさを保ちつつ、必要な機能を備えるために取り組んで行きます。

<br>
<br>
<font color="LightSeaGreen">**14日間フリートライアルをご利用いただけます**</font>
フルマネージドサービスを実際に体験することができます。これにより、IT部門がリソースのインストールや管理をすることなく、チームは強力な分析プロジェクトを構築することができます。

https://www.dataiku.com/ja/%e8%a3%bd%e5%93%81/%e5%a7%8b%e3%82%81%e3%82%8b/


原文：[*Introducing Dataiku Online, a Fully Managed, Online Analytics Offering*](https://blog.dataiku.com/introducing-dataiku-online)
RailsにRedisを接続するシンプルなやり方

<h2>イントロダクション</h2>
<p class="p1">他の記事が初心者のためにわかりやすくし過ぎていたり、自分が理解した部分だけ書いていて分かりにくかったため記述した。</p>

<h2>前提</h2>
<p class="p1"><span class="s1">Redis</span>インストール済みであること（<span class="s1">Mac</span>なら<span class="s1">brewでインストールする</span>）</p>

参照: https://qiita.com/sawa-@github/items/1f303626bdc219ea8fa1

<h2>Redis接続方法</h2>

<p class="p1"><span class="s1">Rails</span>の新規プロジェクト作成</p>
<p class="p2">↓</p>
<p class="p2">Gemfile<span class="s2">に「</span>gem <span class="s2">’</span>redis-rails<span class="s2">’」追記</span></p>
&nbsp;
<pre><code>gem 'redis-rails'</code></pre>
&nbsp;
<p class="p2">↓</p>
&nbsp;
<pre><code>bundle install</code></pre>
&nbsp;
<p class="p2">↓</p>
&nbsp;
<pre><code>rails s</code></pre>
&nbsp;
<p class="p2">↓</p>
<p class="p1">別のタブで「<span class="s1">redis-server</span>」コマンド（<span class="s1">Redis</span>サーバー起動）</p>
&nbsp;
<pre><code>redis-server</code></pre>
&nbsp;
<p class="p2">↓</p>
<p class="p2">config/initializers<span class="s2">に<strong>「</strong></span><strong>session_store.rb</strong><span class="s2"><strong>」</strong>ファイルを作成</span></p>
&nbsp;

&nbsp;

&nbsp;
<p class="p1"><span class="s2"><strong>「</strong></span><strong>session_store.rb」</strong>に以下のように記述、</p>
&nbsp;
<pre><code>アプリケーション名::Application.config.session_store :redis_store, {

  servers: [

    {

      host: "localhost",

      port: 6379,

      db: 0,

      namespace: "session"

    },

  ],

  expire_after: 90.minutes

}</code></pre>
&nbsp;

&nbsp;
<p class="p1"><strong>ここまでで接続完了。</strong></p>
&nbsp;

&nbsp;

&nbsp;
<h2>接続確認方法</h2>
<pre><code>rails c
</code></pre>
&nbsp;
<p class="p1">↓</p>
<p class="p1"><span class="s1">Railsコンソールに</span></p>
&nbsp;
<pre><code>redis = Redis.new(url: "redis://localhost:6379/0”)</code></pre>
&nbsp;

&nbsp;
<p class="p1"><span class="s1">戻り値：</span> <span class="s1">「</span>#&lt;Redis client v4.1.3 for redis://localhost:6379/0&gt;<span class="s1">」となるはず。</span></p>
&nbsp;
<p class="p1">↓</p>
<p class="p1"><span class="s1">Railsコンソールに</span></p>
&nbsp;
<pre><code>redis.select 0</code></pre>
&nbsp;
<p class="p3">戻り値が<strong>「<span class="s3"> </span>“<span class="s3">OK</span>”<span class="s3"> </span>」と表示されれば接続確認完了。</strong></p>
&nbsp;
<p class="p3">「<span class="s3">redis-cli</span>」コマンドをすると繋がっているはず。<span class="s3"><span class="Apple-tab-span"> </span></span></p>
&nbsp;
PK以外のフィールドを選択肢に選択フィールドを作成する場合 ChoiceFieldではなくModelChoiceFieldのto_field_nameを使用する。

## ModelChoiceField 
Djangoではクエリー結果をフォームフィールドの選択肢に使用するための ModelChoiceField が用意されている。
例えば下記の様に queryset引数にクエリー結果を渡すと選択肢の値にはMemberモデルのPKであるidが使用され、表明にはモデルの\_\_str\_\_メソッドの戻り値が使われる。

```python
class Member(models.Model):
   id    = models.AutoField ( primary_key=True )
   name  = models.CharField ( max_length=32 )
   email = models.EmailField( max_length=200, null=False, unique=True)
   def __str__(self):
      return self.name

class SearchForm(forms.Form):
   email = forms.ModelChoiceField(queryset=Member.objects.all())

# このフォームをテンプレートで表示するとoptionの中身はこんなイメージ
# <option value="[ obj.id ]">[ str(obj) ]]</option>

```
## PK以外を選択肢にする実装（良くない例）
選択肢の値にPK以外（ここではemail）を使用したいのでフォームフィールドの型をChoiceFieldに変更して choices にクエリー結果からemailとnameのリストを渡す事で実装できる。

```pyhton
class SearchForm(forms.Form):
   email = forms.ChoiceField(
      choices=Member.objects.values_list('email','name')
   )
```
しかし、この実装では新規モデルをマイグレーションすると__django.db.utils.ProgrammingError: (1146, "Table doesn't exist")__が発生する。
これは、[フォームが初期化される際にクエリーを実行しようとするのでエラーになってしまう]
(https://stackoverflow.com/questions/45234291/django-form-using-choices-against-a-queryset-causes-error-if-part-of-initial-mak "Qiita Home")事が原因なのでマイグレーション時だけ当該フィールドをコメントアウトする方法で回避は可能だが。。。

:::note info
上記リンク先ではベストプラクティスとして別の関数でクエリーを実行して関数をchoicesに渡す方法を紹介している。これはこれで選択肢を自由に書き換えられるという意味では便利。
:::
## ベストプラクティス
__ModelChoiceField__ の __to_field_name__ を使用する。

```pyhton
class SearchForm(forms.Form):
   email = forms.ModelChoiceField (
      queryset=Member.objects.all(),
      to_field_name="email"
   )

# このフォームをテンプレートで表示するとoptionの中身はこんなイメージ
# <option value="[ obj.email ]">[ str(obj) ]]</option>

```

こうする事でフォームをテンプレートで展開する際に option タグのvalueにはemailが使用され表示名にはモデルの\_\_str\_\_メソッドが使用される。