OmniAICreator/Qiita-1.07M huggingface dataset:
スプレッドシートに承認ワークフロー機能がついた！！

# はじめに

Google Workspaceは業務基盤として多くの会社で利用されていると思います。
弊社でも、ドキュメント、スプレッドシート、スライドはかなり重宝しています。
そんな、すばらしいアプリになんと、承認、却下、コメント追加、編集を行える機能がつきました！！
さすがGoogle様です。

※「G Suite Basic」や「個人の Google アカウント」では利用できません。
[詳細な対応エディションはこちらから確認できます](https://workspaceupdates-ja.googleblog.com/2021/11/google_12.html)

# こんなことしてませんか？

- ドキュメントに承認者欄を設けている。
- ディレクトリで、承認状態を管理している。

![2021-12-24_17h12_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615083/2b323518-f70a-03b1-9a6b-0f4410a538a1.png)

半強制的なリモートワークが始まり、脱ハンコが世の中的に推進され、社内の様々なドキュメントの承認形態が急激に変化しましたね。
公式な書類は社内のワークフローシステムで管理されていると思いますが、現場ではまだまだワークフローシステムで管理されてない書類が多い状態だと思います。
ExcelやWordの実ファイルからは脱却したものの、「作業申請、承認、実施」、「統制資料の変更管理」、「部門内簡易稟議」などは様々な手段で証跡管理の工夫をしている状態だと思います。

そんな、みなさんには朗報だと思います。
いつも使ってるGoogleのドキュメント、スプレッドシート、スライドで承認ワークフローが簡単に利用開始できるのです！

# ワークフローの開始

ワークフローをしたいファイルに内容を記載したあとに、メニューの「ファイル」から「承認」を選択して
右サイドに表示された承認のリクエストから「リクエストを送信」することで、ワークフローを始めることができます。

例．ドキュメントの場合（※スプレッドシート、スライドもメニューの「ファイル」から開始できます）
![2021-12-24_17h33_09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615083/afc34bc5-d282-f8e7-ac07-fcb4e6831c96.png)

1. 承認して欲しい人を追加します。
1. 承認期限を設定できます。
1. 承認者に対し、ファイル編集可否を設定できます。
1. 承認者以外が編集できないようにファイルをロックすることができます。（申請者も編集できなくなる）

※下記お二人には名前が掲載されることについて許可いただいています。
![2021-12-24_17h38_19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615083/52e43a7a-fa9c-ab9c-8799-11c41129f552.png)

承認のリクエストを送信すると、承認者に指定した人にメールが送信されます。

# ワークフロー中の編集ロック

承認リクエスト時に、ファイルをロックすることで、申請内容を担保することができます。
ワークフローの承認者以外でファイルの編集権限を持ってる人に勝手に内容を変更されると困るときはありがたいですね。
承認者が編集したい場合は、明示的に「ロック解除」をする必要があります。

![2021-12-24_19h12_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615083/d93b28e4-73e8-b14a-2bbf-9ce892db295b.png)

# ワークフロー中のコメント

承認をする際に、申請内容について申請者に確認をしたり、次の承認者に向けてコメントを残したい場合があります。
それもアクティブティとしてコメントすることができ、時系列にそって確認することができます。
また、「承認」や「拒否」をする際にもコメントを残すことができるので、コミュニケーションに役立ちますね。

![2021-12-24_19h17_08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615083/bb5b74d9-b80b-d51a-1b25-a1f9c435c0ba.png)


# 承認済み版

すべての承認が完了すると、ファイルがロックされ、承認済みバージョンであると表示されるようになります。
再度修正したい場合は、ロックを解除して、修正してからまた承認リクエストをすることでやり直すこともできます。

![2021-12-24_19h20_51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615083/85e78fe8-aec5-8a47-9a9a-687937bbd5f8.png)

地味にいいなとおもったのが、ファイルを開かなくても、Google Driveのフォルダの一覧からも承認済みであることをひと目で確認することができ、詳細も右サイドから確認することができます。

![2021-12-24_19h20_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615083/60355a2c-9f80-3cd4-7da9-b9d13d1ba357.png)

また、承認済み版のファイルをコピーしたとき、そのファイルは承認済みではなく、未承認のファイルとなります。
これは非常に大事なことだと思うので、さすがGoogle様はしっかりしてるなーと思いました。

# ここが残念

承認済み版のファイルでも、通常のファイルとおなじ感じで削除できてしまいます。。。

警告をするなど、ひと手間かかるようになってくれていると良かったのですが、、、
大事なファイルの場合は、削除できない場所に移動するなど、利用者側で対策を講じる必要がありますね。

# おわりに

実は、だいぶ前からGoogleドキュメント、スプレッドシート、スライドには承認ワークフローの要望がたくさんありました。
3rd-Prtyベンダーがアドオンを販売してたり、GASを使った簡易ワークフローの作り方の記事があったり、みなさんいろいろな工夫と努力でなんとか実現しようとしていました。

Google Workspaceは業務をする基盤になっているので、デフォルトで手軽に承認ワークフローが使えるにようになったのは業務革命が起こせるんじゃないかなと思っています。個人ごとですが、来年から組織横断的にDXを推進していく立場になるので、早速この恩恵にあずかり、開発組織全体のストレス低減を実現したいと思ってます！

みなさんにも良い発見と、開発をもっと楽しめるようになることを祈って ***Merry Christmas！***
Powerautomate Resource not found for the segmentエラーについて

参照列にテーブル「cr324_test」のGUIDを追加するとき発生しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368087/3300cddb-eda8-cd23-2f8f-1228e1c628bd.png)

対応方法：
行を追加するステップに「cr324_test」を「cr324_tests」に変更したら解決しました。

参考記事：
https://powerusers.microsoft.com/t5/Building-Flows/Resource-not-found-for-the-segment-Custom-Entity/td-p/792802
Hololens2のSceneUnderstandingを利用しようとしたときに出たエラーを解決

## 現象

https://zenn.dev/hiromu/articles/20210421-scene-understanding#%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D%E6%89%8B%E9%A0%86

こちらの記事のようなエラーが出ていて、同じようにエラー回避しようとしてもできなかったでした

```
Library\PackageCache\com.microsoft.mixedreality.toolkit.foundation@2387a6a2d46b-1639703055967\Providers\Experimental\WindowsSceneUnderstanding\WindowsSceneUnderstandingObserver.cs(502,35): error CS7069: Reference to type 'Matrix4x4' claims it is defined in 'System.Numerics', but it could not be found
```

## 環境

* Unity v2019.4.18
* MRTK v2.7.2
* SceneUnderstanding v0.6.0

## 解決した方法と注意点

* 参考記事に書いてあった方法
    * `build settings`で`.NET4`に
    * `SceneUnderstandingManager`の`Query Scene From Devie`のチェック外す
* 追加で試した方法
    * TextMeshProのバージョンが3系だと動かず、`2.1.6`だと動いた
    * プロジェクトパスが変わっていた場合`Library`フォルダを一回消し、Unityを立ち上げなおす(その後もう一回`build settings`は確かめる)

追加で試した方法で解決できました！

### ちなみに

[![Image from Gyazo](https://i.gyazo.com/b969a03224a7af1851b0e5727ba74f23.png)](https://gyazo.com/b969a03224a7af1851b0e5727ba74f23)

実機だとここにチェックいれるのよく忘れるのでどうにかしたい…
【コピペでOK】APIを使ってSesame4を施錠解錠する

## セサミを買いました
最近、セサミというスマートロックを買いました。このスマートロックはよくできていて、私の今年買ってよかったものランキングぶっちぎり１位です。価格も安いので是非試してみてください。
セサミは Web API が無料で公開されており、この記事ではNode.js から使うときのサンプルコードと手順をご紹介します。


## 今回使うもの
以下の手順は**SESAME4**を動かすためのものです。今回はインターネット越しにSESAMEにアクセスするためWi-Fiモジュールが必要となります。



https://jp.candyhouse.co/products/sesame4

https://jp.candyhouse.co/products/new-wifi




## Web API キーの取得

こちらのページからログインするとWeb APIキーを取得できます。
https://partners.candyhouse.co/login

## アプリから招待用QRコードを発行
セサミのスマホアプリを開き、APIから操作したいデバイスを選択して招待用のQRを発行します。
![img](https://i.gyazo.com/a6df20cd2e30527e9ee3828a9e58504f.png)

## QRからAPI呼び出しに必要な値を抽出
先ほどのQRをこちらのページに読み込ませるとAPI呼び出しに必要な情報を取得できます。
下の画像のような感じで抜き出せますので、UUID（デバイスID）とSecret Keyをメモします。

https://sesame-qr-reader.vercel.app/

[![Image from Gyazo](https://i.gyazo.com/f43ef4de29ac50890daff498827c0c4d.png)](https://gyazo.com/f43ef4de29ac50890daff498827c0c4d)

## APIから操作してみる

私のGitHubにNode.jsを使ったサンプルコードがありますのでそちらを使ってみてください。

https://github.com/kota-imai/sesame-webapi-sample

プロジェクトをダウンロードしたら、まずライブラリを集めます。

```
npm install
```

そして.envファイルを作成して先ほど取得した情報を埋めてください。


```
SESAME_UUID=<QRから抽出したUUID>
SESAME_API_KEY=<APIキー>
KEY_SECRET_HEX=<QRから抽出したシークレットキー>
```

最後にindex.jsを実行すると鍵が動くと思います。

```
node index.js
```


## 最後に
以上、走り書き程度ですが参考になれば嬉しいです。
スマートロックにしてから鍵を持ち歩く必要がなくなりました。荷物が減るのでとてもおすすめです。


## 応用編
LINEのAPIと組み合わせてこのようなこともできます。
ぜひご自身でスマートロックの機能拡張に挑戦してみてください！

https://qiita.com/kaonaga9/items/de5c6acdba58222771c3







## 参考
[公式ドキュメント](https://doc.candyhouse.co/ja/SesameAPI)
RaspberryPiに4インチディスプレイ

久しぶりにRaspberryPi3に4インチのディスプレイを付けたら映らなかった。

ここによると新しいディスプレイドライバがバグってるらしい。

https://forums.raspberrypi.com/viewtopic.php?p=1937528

/boot/config.txt
の
dtoverlay=vc4-kms-v3d
をコメントアウトしたら映るようになりました。
[WIP] Cypress > Github ActionsでCypressを実行し、結果をSlack通知する





まずはActionの作成

.github/workflows/cypress-screenshot-video-upload.yml


```
name: cypress slack video upload action

on:
  workflow_dispatch: # 手動トリガー
  push:
  schedule:
    - cron: '0 * * * *'



jobs:
  test-and-upload-results:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Cypress run
        uses: cypress-io/github-action@v2
        with:
          start: yarn dev
          wait-on: 'http://localhost:3000'
          # wait for 2 minutes for the server to respond
          wait-on-timeout: 120
        env:
          NEXT_PUBLIC_YOUR_NAME: ${{ secrets.NEXT_PUBLIC_YOUR_NAME }}
          CYPRESS_TEST_USER_NAME: ${{ secrets.TEST_USER_NAME }}

      - name: 'Upload screenshots and videos to Slack'
        uses: trymbill/cypress-slack-video-upload-action@v1.3.0
        # if: failure()
        with:
          token: ${{ secrets.SLACK_TOKEN }}
          channels: 'cypress-test'

```



[cypress\-io/github\-action: GitHub Action for running Cypress end\-to\-end tests](https://github.com/cypress-io/github-action)

![スクリーンショット 2021-12-24 19.09.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/81f7431e-64db-5b18-3c76-fdf71ef885db.png "スクリーンショット 2021-12-24 19.09.26.png")
 
 
 ![スクリーンショット 2021-12-24 19.09.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/cf7637be-4948-5046-48ae-892b4f591337.png "スクリーンショット 2021-12-24 19.09.52.png")
oneWEXのタイムアウト時間変更

oneWEXのセッションタイムアウト時間は、デフォルトで30分となっています。
（画面が最後に更新されてから30分）

割とすぐにタイムアウトしてログイン画面に戻るので、この時間を伸ばしたい場合には、
wex.jsonにある APP_LOGIN_EXPIRATION_MIN パラメータで分単位で変更可能です。

変更後、oneWEXを再起動すれば反映されます。
デザイナーが声を大にして伝えたい、エンジニアへの「ありがとう」と「ごめんなさい」

#はじめに
モチベーションクラウドシリーズでデザイナーをしている辻井です。

今日は、普段協働するエンジニアに伝えたい「感謝」と「謝罪」を、デザイナー目線でまとめてみます。
エンジニアに実際に言われた言葉を紐解きながら、スムーズな連携のポイントを探っていきます。

#エンジニアへの「ごめんなさい」
###第３位『このデザイン、実装とギャップあるんですけど、どうします？』
デザインデータの整備が不十分だと、実装内でもボタンサイズに不整合が生じたり、
実装前のデザインと現実装にギャップが生じたりします。
ギャップの数だけ確認が必要となり、エンジニアにも負担をかけてしまうことに…。

（対策）
・一番の理想は、不整合がないデザインデータを作ること
・上記が直近難しい場合は、実装とのギャップをデザイナーが把握した上で、
　「何を正のデザインとするのか」を事前にコミュニケーションしておく

###第２位『そろそろデザインFIXして欲しいです…』
想定以上にデザイン工数が膨らみ、デザイン納期を過ぎてしまった場合、
後工程の開発は完全にストップしてしまいます。
ワイヤーフレームなどをもとに、設計や大枠の開発は着手できても、
ディティールの開発には完成したデザインが必要不可欠。
開発上、非常にクリティカルで、ご迷惑をおかけしてしまいました…。

（対策）
・工数見積もりの精度を上げた上で、バッファを組み込んでおく
・最終完成に至るまでのマイルストンを定め、事前に共有しておく

###第１位『ここ、検討漏れかもです…。デザイン作れそうです？』
第２位とも繋がってきますが、開発が佳境になったタイミングでの検討漏れは致命的。
デザインフェーズでの見落としや考慮漏れが原因なので、
申し訳なさもひとしおです…。

（対策）
・デザイン完成のタイミングで、検討漏れがないかレビューを入れる
・画面一覧を活用し、デザインフェーズで検討漏れをなくす
　→以下の記事も、ぜひご参照ください

https://qiita.com/sugie_m/items/8f5661ba2161cac9a0e7

###まとめ
デザインのスピードとクオリティが、そのまま開発の質を左右します。
だからこそ、「遅延」や「抜け漏れ」は開発全体に大きな影響を与えてしまいます。

デザイナーとしては、
・想定と検討の幅を広く持って、デザインを進めること
・「いつまでに」「何を」「どこまで」完成させるのか、マイルストンを定めること
・バッファを設けて作業を進め、進捗の管理・共有を怠らないこと
が大事になってきます。

エンジニアからも、上記の視点を持ってデザイナーとコミュニケーションを重ねることで、スムーズな連携・開発を実現できるはずです。

#エンジニアへの「ありがとう」
###第３位『なんか困ってます？壁打ちしましょうか？』
ともすると、「デザインはデザイナーの仕事」となりがちですが、
エンジニアとの壁打ちでブレイクスルーが起こることは少なくありません。

データ構造上の制約から、物理的に不可能な仕様を潰したり、
既存のページやデータベースを踏まえて画面構成を提言してくれたり、
エンジニアと話したからこそ気付けることがたくさんあります。

もちろん、効率的で生産的なプロセスを実現するための分業ですが、
時に役割や職種を横断した対話が大きな突破口になります。
「柔軟な越境」をぜひ意識してみてください。

###第２位『ユーザー的にはこっちの方が嬉しくないですか？』
デザイナーがUX/UIデザインを作り、エンジニアが開発をする、
というのが一般的なプロセスになっているケースが多いと思います。

だからこそ、「本当にこれがユーザーへの最適解なのか？」について、
エンジニアから質問や提案をもらえるのは、とても貴重な財産になります。
デザイナーとしては、自分の知見と思考の中でベストを尽くしていても、
気づけていない観点や視点も必ず存在しています。

「ユーザー視点」「アウトカム志向」を持って、一緒に価値を探究できるのは、
チームとしても理想的な姿ではないでしょうか。

###第１位『超粗いですけど、実装しちゃいました！』
今年、実際に何回もエンジニアチームが実践してくれた取り組みで、
本当に感謝しているのがこれです。

デザインのA案とB案で意見が割れているときに、
「動く環境で見れた方が早いと思うので、開発環境に実装しました！」
と素早く動いてくれて、現物を見ることで議論が一気に進みました。

もちろん、デザインデータを見て確認することもできるのですが、
実際の環境で動かすことで見えることも多かったので、超ありがたかったです。

#終わりに
改めて振り返ってみると、プログラムをゴリゴリ書いて実装するのに加えて、
「このデザインがベストなのか？」「どうすれば価値を最大化できるのか？」といった
大きな問いに共に向き合ってくれた時、本当にありがたく、心強かったです。

逆に、自分から開発やプログラミングの領域に踏み入って、
サポートや提言をすることは全然できていなかったなぁという反省にもなりました。
情報設計やデータ構造の整備などをもっとしっかりと学んだ上で、
エンジニアからもより多くの「ありがとう」をもらえるデザイナーを目指していきます。
プリザンターの進化はあなたのために。


本記事は Pleasanter(プリザンター) Advent Calendar 2021の25日目の記事であり、今年のアドベントカレンダーの締めくくりとなります。

多くの皆様のご協力のもと、今年もアドベントカレンダーを完走することができました。
本当にありがとうございました！
今年も、昨年同様、興味深い記事を多く書いていただきましたので、よろしければ他の記事も是非ご参照ください！良ければLGTMもお願いいたします。

## 2021年と、プリザンターの進化
昨年のアドベントカレンダーの最終日の記事では、直前に実装されたサーバスクリプト機能の「可能性」について触れていました。サーバスクリプト機能の実装により、ローコード開発プラットフォームとしての確固たる位置に立ちたい、と。
今の立ち位置がどこかは皆様の評価に委ねるとして、プリザンターは確かに大きく進化しています。
2021年は、サーバスクリプト機能を中心に多くの機能が拡張されており、それにより、多くの皆様の業務課題を解決できるようになっています。

特に、以前から多くのご要望をいただいていたワークフロー機能は、大きな反響を頂きました。
サーバスクリプト機能を使って実装しているため、多少コードの変更などは必要となりますが、基本的にFAQとして公開されているサンプルコードのコピペで、お使いのプリザンターにワークフローを実装することが可能です。
ユーザIDや、グループIDなどいくつかの箇所を書き換えて頂ければ使えますので、技術知識などはあまり無くても問題なくお使い頂けるかと思います。

FAQ：稟議申請などのワークフロー（承認プロセス）を実装する
https://pleasanter.org/manual/faq-server-script-workflow

サイトパッケージ(サイト設定情報)もダウンロードできますので、お使いのプリザンターにインポートして頂ければ、より簡単にお試し頂けるかと思いますので、是非試してみてください。
高額なワークフローシステムとは比べるまでもなく簡易的なものではありますが、申請内容による承認ルートの切り替え、承認・否認(差戻)など必要最低限の機能は実装されています。

以下の例では金額によって承認ルートが変わります。
![cd598f23a9c44774910395ba57bc82cb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/834556/83913f2e-4303-190e-4191-4427a3989d3d.png)

多少の知識は必要になるかもしれませんが、例えば承認ルートの分岐を作るといったことも、結構簡単にできるかと思います。
もし、コードを変更して、思い通りに動かない！といった場合は、最近実装されたサーバスクリプトのデバッグ機能をお使いいただくと原因を見つけやすくなります。

開発者向け機能：サーバスクリプト：デバッグ
https://pleasanter.org/manual/server-script-debug


そして、もうひとつ反響が大きかったのは、こちらはサーバスクリプトではなくAPIですが、添付ファイル付きのメールが送れるようになったメールAPIを呼び出すサンプルコード。

FAQ：メール送信APIを使用して添付ファイル付きのメールを送信したい
https://pleasanter.org/manual/faq-sendmail-with-attachments

レコードに貼り付けたファイルを添付したメールを送信できます。
基本的には更新情報をメンバーに通知してプリザンター上の情報を参照する、という使い方が多いかと思いますが、プリザンターにログインできない外部のかた向けにメールを送信するケースなどではファイルの扱いが大変でしたが、メールAPIの添付ファイル対応のおかげでかなり楽になりました。
こちらもサンプルコードをコピペすればそのままお使い頂けます。

このように、プリザンターは、サーバスクリプトやAPIの強化で、かなり柔軟に機能を拡張、追加することが可能となりました。
2021年は、それ以外にも多くの機能が追加され、サーバスクリプトやAPIを使わずに、マウス操作だけで使える機能もかなり増えています。

皆様が業務で抱えている課題の多くはプリザンターの導入で解決できるかもしれません。
自分の業務に合わせて業務アプリを簡単にカスタマイズできる、というのは想像以上にカイゼンが捗ります。

## 業務アプリを作るということ
エンジニアさん向けのコミュニティであるQiitaでは、当然その限りではないでしょうけれど、アプリを作るなんて無理でしょ、という方のほうが一般的かと思います。
業務アプリ、というと、電気屋さんに並んでいるような(今はダウンロードが主流ですけれど)パッケージソフトウエアを思い浮かべがちですが、もちろん、それらも含むものの、プリザンターでいう業務アプリは、ExcelやAccess、FileMakerなどで作られたものにイメージが近いでしょうか。
昨今ではDXの後押しもあり「社内システムの内製化」が声高に叫ばれるようになり、ローコード開発、というキーワードも様々なメディアで目にするようになりました。
とは言え、「ローコード」という聞き慣れない言葉と、さらに「開発」という言葉が連なり、「難しいヤツ」というイメージを持ってしまう方も多いのですが、実際は、新しいエクセルの管理表を作るような、そんなイメージで、そのくらい手軽なものです。
手軽に業務アプリが作れて、手軽にメンバーと情報共有ができて、手軽に業務改善ができて、手軽に情報を利活用できます。プリザンターならね。
あれ？ 良いこと尽くめでは…

## おわりに
プリザンターは、ノーコードで素早く簡単に業務アプリが作成できるうえに、ローコードで強力に柔軟に機能を拡張することができるオープンソースの開発プラットフォームです。

プリザンターなら、マウス操作だけで業務アプリを作成し現場のスピード感で素早くシステムを業務にフィットさせることが可能です。さらに、僅かなコードを記述するだけでそのシステムをもっともっと便利に機能拡張することもできるのです。それがプリザンターの掲げる「小さく始めて、大きく広げる」という"やり方"のひとつでもあります。

プリザンター：
https://pleasanter.org/

以上、定型文。

もっと"楽"がしたいなら、是非、プリザンターを試して下さい。
プリザンターによってマネジメントを快適化し、皆様がもっとクリエイティブで楽しい仕事ができますように！

それでは本年の記事はこれにて！最後までお読み頂きましてありがとうございました。
進化を続けるプリザンターを、来年もどうぞよろしくお願いいたします！

皆様、Merry Christmas!🎅🎄 & Happy New Year!🎍🗻

and...

![https___qiita-image-store.s3.ap-northeast-1.amazonaws.com_0_834556_9f7148dd-3338-c7fe-338e-463735f48fbb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/834556/3b8c42ac-6108-3838-a6cb-288202511f70.png)
AWSIoTcoreについて個人的にまとめたメモ

## この記事について
IoTcoreの機能の一つであるフリートインデックスを中心に、少し細かい内容をドキュメントベースや実際に触った内容についてまとめています。


## フリートインデックスで検索できる項目の例
* モノの名前
* 属性
* シャドウ(名前付き/クラシック)
* 接続状態
* タイプ
* グループ

以下の画像のように、インデックスが作成される対象を選択することで検索できるようになります。
AWS IoT > 設定 > フリートのインデックス作成の管理

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2337873/b34d900c-e319-cdd5-3665-7b44c4dfcde0.png)

## フリートインデックスで可能な検索方式


| 検索方式 | 可否 | 検索例 |
---------- | ---------- | ---------- | 
| 前方一致 | 可能 | thingName: A*　(Aから始まるモノの名前) |
| 部分一致 | 不可 | - |
| 後方一致 | 不可 | - |
| 完全一致 | 可能 | thingName: test　(名前がtestであるモノ) | 
| 正規表現 | 不可 | - |

クエリ文で利用可能な機能については以下を参考にしています。
https://docs.aws.amazon.com/ja_jp/iot/latest/developerguide/query-syntax.html


前方一致の例として、*だけでなく?を使うことでも検索が可能です。
"thingName:ab?”というクエリ文では「ab」、「abb」、「abc」など、名前に「ab」と 1 つの追加文字を加えたモノを検索します。
https://docs.aws.amazon.com/ja_jp/iot/latest/developerguide/example-queries.html

## IoTcoreで日本語が使える箇所
IoTcoreでは、各項目について使える文字種が以下のようになっています。

原則、日本語を使うことはできませんが、シャドウでは日本が使えるようになっています。
このため、フリートインデックス(高度な検索)でもシャドウの検索を行う場合のみ日本語が使えます。

| |英数字(半角)|英数字(全角)|-|:|_|,|.|@|/|#|スペース|日本語(カナ文字)|備考(AWSのエラーメッセージを転記)|
|:----|:----|:----|:----|:----|:----|:----|:----|:----|:----|:----|:----|:----|:----|
|thing名|○|×|○|○|○|×|×|×|×|×|×|×|モノの名前に使用できるのは、英数字、ハイフン、コロン、アンダースコアのみです。|
|タイプ名|○|×|○|○|○|×|×|×|×|×|×|×|モノのタイプの名前に使用できるのは、英数字、ハイフン、コロン、アンダースコアのみです|
|属性名|○|×|○|○|○|○|○|○|○|○|×|×|属性キーには、英数字および _.,@/:#- のみを使用できます。|
|属性値|○|×|○|○|○|○|○|○|○|○|×|×|属性値には、英数字および _.,@/:#- のみを使用できます。|
|グループ名|○|×|○|○|○|×|×|×|×|×|×|×|モノのグループの名前に使用できるのは、英数字、ハイフン、コロン、アンダースコアのみです。|
|シャドウ名|○|×|○|○|○|×|×|×|×|×|×|×|文字、ハイフン、コロン、またはアンダースコアのみを含む一意の名前を入力してください。シャドウ名にスペースを含めることはできません。|
|シャドウ値(json形式)|○|○|○|○|○|○|○|○|○|○|○(全角/半角)|○| |



ここからは解釈になります。
何かしらの事情でIoTcoreに日本語を使わざるを得なくなった場合はシャドウで対応することになりそうです。

>シャドウ状態データは動的であり、シャドウへのアクセス許可を持つデバイス、アプリ、その他のクラウドサービスによって変更できます。

ドキュメントを見る限り、シャドウに書き込まれる情報は動的なので属性やグループの代わりとしてシャドウを使うのは想定された使い方からは少し外れてしまうように見えます。


>シャドウデータオブジェクトに含まれるデータは、他のシャドウや Thing オブジェクトのプロパティ (Thing の属性や MQTT メッセージのコンテンツなど) から独立しています。ただし、デバイスは、必要に応じて、異なる MQTT トピックとシャドウで同じデータを報告できます。


(引用元)
https://docs.aws.amazon.com/ja_jp/iot/latest/developerguide/iot-device-shadows.html

(補足)
シャドウの名前や値に日本語を入れた場合、以下のように表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2337873/14c5af4f-95f4-3bea-30b0-816ed6dfe10e.png)
Nuxt.js + Atomic Designのコンポーネント設計

# Atomic Design ってなに？

ボタンやテキスト入力欄などの、最小単位のUI部品を組み合わせてレイアウトを構築する設計手法。
部品の単位に名前がついている。

- Atoms：ボタンやテキスト入力欄など
- Molecules：Atoms を組み合わせたもの
- Organisms：Atoms または Molecules を組み合わせたもの
- Templates：Organisms を組み合わせたワイヤーフレームみたいなもの
- Pages：Templates にデータを組み込んだ最終系

![pic_atomic_design.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1407602/5b1796cf-73dc-1aed-e3ed-9f88db0feeb9.png)

例えば、Qiita のヘッダーに Atomic Design を適用してみる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1407602/dcec4a76-6dcc-3fc6-13ab-68de72c6b25d.png)

こんな感じ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1407602/612b0c96-63d8-7bf6-3e6f-53d48e3fdf4b.png)

<font color="red">赤</font>：Atoms
<font color="blue">青</font>：Molecules
<font color="#bdbd2e">黄</font>：Organisms

# Nuxt のディレクトリ構成に適用する

| ディレクトリ | Atomic Design |
| --- | --- |
| /components | Atoms, Molecules, Organisms |
| /layouts | Templates |
| /pages | Pages |

`/components` は `/components/atoms` みたいな感じで分ける。

# 設計におけるルール

## Atoms

- 他のコンポーネントを使わない
- CSSには `margin` をつけない
- ボタンのクリック処理等は書かない
    - `emit` を使って親に渡す

## Molecules

- Organisms のコンポーネントを使わない
- Molecules を2つ使って Molecules を構成することも可能
    - 3つ以上だと Organisms にするのをおすすめ
    - ここはプロジェクトにおけるルールに従う
 
## Organisms

- Organisms を組み合わせて作らない
    - コンポーネントの粒度が細かい可能性があるので、設計を見直してみる

## ポイント

### [スロット](https://jp.vuejs.org/v2/guide/components-slots.html)を活用する

子コンポーネントのボタンを作るとき、中身に `<slot />` を入れる。

```vue:Children.vue
<button>
  <slot />
</button>
```

親コンポーネントで中身を記述できる。

```vue:Parent.vue
<children>
  {{ text }}
</children>
```

名前付きスロットを使うと、個別にスロットを指定できる。

```vue:Children.vue
<div>
  <slot name="hoge" />
  <slot name="fuga" />
</div>
```

```vue:Parent.vue
<children>
  <template #hoge>
    {{ hogeText }}
  </template>   
  <template #fuga>
    {{ fugaText }}
  </template>
</children>
```

# メリット

- チーム開発で役割分担がしやすくなる
- コンポーネントの依存関係がわかりやすくなる

# デメリット

- 開発の初期段階はレイアウトのイメージがつきにくい
  - 設計上、`pages` は最後に手を付ける
  - [Storybook](https://storybook.js.org/) の導入がおすすめ
- Atomic Design の学習コストがかかる

# まとめ

便利なものだけど、状況に応じて使い分けよう！
ESlint 全角スペースを正規表現で使う

## 修正前

エラー

```
Irregular whitespace not allowed  no-irregular-whitespace
```


## 修正後

[参考(document)](https://eslint.org/docs/rules/no-irregular-whitespace#disallow-irregular-whitespace-no-irregular-whitespace)

```eslintrc.js
module.exports = {
  ...,
  rules: {
    "no-irregular-whitespace": [
      "error",
      {
        skipRegExps: true
      }
    ],
  }
}
```
ElasticsearchにおけるMapping の使い方

#1. そもそもMappingの確認/登録はどうやるの
##■ Mappingを登録するとき
Mappingに関するJSONをPUTで投げるだけ。

```
PUT /test_index
{
  "mappings": {
    "properties": {
      "name": { "type": "text" },
      "team": { 
        "type": "text",
        "fields": {
          "raw": {
            "type": "keyword",
            "ignore_above": 256
          }
        }
      }
    }
  }
}
```
##■ Mappingを確認するとき
Mappingに関するGETで投げると、Mappingに関するJSONが返ってくる。

```
GET /test_index/_mapping?pretty

# レスポンス
{
   "test_index": {
      "mappings": {
         "properties": {
            "name": {
               "type": "text"
            },
            "team": {
               "type": "text",
               "fields": {
                    "raw": {
                        "type": "keyword",
                        "ignore_above": 256
                     }
                }
             }
         }
      }
   }
}
```

#2. Mappingの読み方
## データ・タイプは複数指定できる
```　取り込みデータ.json
{
   "name":"hogehoge",
   "team":"A"
}
```
![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562040/ef0cf300-9218-408d-b63c-2f6f8f9e221a.png)

## データに連想配列があるとき
```　取り込みデータ.json
{
   "name":"hogehoge",
    [
       {
          "team":"A",
          "position":"wingback"
       },
       {
          "team":"B",
          "position":"goalkeeper"
       }
     ]
}
```
![図2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562040/10243c5d-a274-0d36-18a1-270f581513d5.png)

#メモ
curlでも投げられる。KibanaのDevToolに`curl -XGET /test/_mapping?pretty`
をコピペすると自動的に、`GET /test/_mapping?pretty `にしてくれる。なんだこの機能。

#参考
https://baubaubau.hatenablog.com/entry/2020/07/02/203000
OpenSearch でいろいろやってみる ～絞り込み編～

# 絞り込み編
OpenSearchを触ってみた個人的メモ代わりです。

1. [OpenSearch でいろいろやってみる ～インストール編～](https://qiita.com/hwatry/items/cf92a44f48f4dbb54d9d)
2. [OpenSearch でいろいろやってみる ～インデックス編～](https://qiita.com/hwatry/items/e67282b855cc8848d455)
3. OpenSearch でいろいろやってみる ～絞り込み編～ (👈ココ)
4. OpenSearch でいろいろやってみる ～Aggregation編～

## 絞り込みしてみる
全文検索は一旦置いといて、基本的な絞り込みを試してみた。
対象となるデータはインデックス編参照

### 単純な文字列一致
```json:term
GET reviews/_search
{
  "query": {
    "term": {
      "product_cd": "SAMPLE0001"
    }
  }
}
```
検索はとりあえず_searchにJSONを送り付ければできる。
"送り付ける"と言っても、GETでもPOSTでも同じっぽいですな。
これは一番シンプルな形として。

### 複数条件（AND/OR）

```json:bool
GET reviews/_search
{
  "query": {
    "bool": {
      "must": [
        {
          "term": {
            "product_cd": {
              "value": "SAMPLE0001"
            }
          }
        },
        {
          "term": {
            "star": {
              "value": 2
            }
          }
        }
      ],
      "should": [
        {
          "term": {
            "product_cd": {
              "value": "SAMPLE0002"
            }
          }
        }
      ]
    }
  }
  "size": 10
}

```
"bool"を使う、"must"はAND、"should"はORに相当する。
条件ごとの関係に合わせて適宜ネストするところが、最初はとっつきにくい。。。
また、"size"プロパティで取得件数も指定可能。

### filter
```
GET reviews/_search
{
  "query": {
    "bool": {
      "filter": [
        {
          "term": {
            "product_cd": {
              "value": "SAMPLE0001"
            }
          }
        }
      ]
    }
  },
  "size": 10
}
```
filterによる絞り込みも可能。
スコアを算出しない（影響されない）ので、全文検索以外は基本filterで良さそう。

## SQL
ここまでいろいろやってみて、今更感あるが、
実はSQLでクエリーすることも可能。

```json:sql
POST _plugins/_sql
{
  "query": "SELECT * FROM reviews"
}
```
内部でDSLに読み替えてるのかな？
とは言ってもDBでやるような複雑なAggregationや多数のJOINは（まだ）無理。
こんなエラーが返ってくる↓

```
"Aggregation type nested is not yet implemented"
```

次回はいよいよ（？）Aggregaion系をやってみようと思う。
社内最低評価を受けた社員が執行役員になるまでに教わった、大きな成果を残し続ける為に必要な3つの力

##はじめに
株式会社じげんにて執行役員を務めています、今井と申します！
今回は、じげん創業以来初のAdventCalenderへ参加ということで、私自身毎日楽しませてもらっています。

そこで早速、クリスマス・イブに相応しくない！とご指摘を受けてしまうかもしれませんが、皆さんに質問です！
**2021年は成果を残すことできましたか？**また、その成果で大きなインパクトを残すことができましたか？

この記事では、私自身がこれまで**成果を残すために実践してきたこと・そのための思考法**について書かせていただきます。
来年こそ大きな成果を仕事で残したい方、大きく成長されたい方の参考になれば嬉しいです。

##【正しい問い】と向き合うことが大きな成果につながる
大きな課題に取り組まない限りは、絶対に大きな成果は残りません。受験勉強を思い出しても、各問題ごとに配点があったように、仕事も同様に**各課題には解決した時に得られる点数（成果や評価）には違い**があります。

より大きな成果を残したいのであれば、より大きな課題で今改善すべき課題と向き合うことが大切です。**正しい問いを選定できるかできないか**が大きな成果を残す人とそうでない人との一番の差分になります。ここが本投稿にて最も大事な箇所です。

例えば、開発者であれば生産性を向上させるべく自動テストツールを導入し、リリース効率を引き上げる取り組みを行う。
マーケターであれば、ARPUを大幅に改善する為に、ダイナミックプライシングの仕組みを取り入れるなど。
皆さんそれぞれのやり方で、直接間接問わず、ビジネスに大きく影響を与える変数に対し向き合いましょう！

イメージとしては下記のように各課題には配点があるのです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35682/02e13311-10b6-27c2-86e3-a1586f856951.png)
（引用：https://daigakujukensenryaku.com/ph-center/ ）

##【高すぎる目標】を設けることで、問いの精度は上がる
では、どうすれば正しい問いを立てることができるのか？ですが、私が実践している方法の一つに、
先入観を一旦捨て、**「高すぎる目標」を設けることで、思考のリミッターを解除する**という手法があります。

例えば、目標が「来月は今月比+5%の売上」と設定された場合、これを+5%ではなく**+300%の売上を目標**と置き換えるということです。

そうると、目の前で考えていたことだけでは、すぐに限界がくることに気付いたり、思いも寄らないボトルネックが発見できたりと、大きな課題を発見するに至ります。

単月1億円の売上を保有している部門であれば、どうすれば単月売上10億円の部門になれるか？を**具体的に想像してみて、その状況がどういったものかを現状のKPIに落とし込んでみてください。**最大の課題が見えます。

これはかなり前に私が実際に使っていたシートのキャプチャです。
※内容がセンシティブなのでモザイクかけてますが、10倍状態を各KPIにまで数値を落としています

![スクリーンショット 2021-12-24 19.12.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35682/154bde1e-b1a8-9791-edd5-b00e7c8e0842.png)


##【仮説思考の筋トレ】が高すぎる目標を実行する鍵
高すぎる目標を立て、大きな課題が見えたとしても、いきなり実行案を出せと言われると、難しいものです。
課題を解決に導くアイデアは、**常日頃から「考える力」をトレーニング**しておかないと出ません。

ですので、日頃から仮設思考力を鍛える筋トレをすることをおススメします。！

経営者の先輩方も同じことをされていると耳にしますが、私は食事をしに行った際、座席数/客単価/回転率などから売上を推測し、家賃/人件費/材料費/広告費などの原価や販売管理費を推察しています。そこから、営業利益を割り出し、「自分だったらどういう経営をするか？売上や利益を3倍にするにはどうするか？」を考える筋トレを欠かさず行っています。

また、私がメンバーを育成していた頃は、某サ○ヤ人のトレーニングルームにあやかり、『精神と時の部屋』という名前のチャットグループを作り、毎日1人1件、施策や仮説を出してもらい、パーソナルジムの如く、必ず私から各仮説に対してのフィードバックをしメンバー全員の仮設思考力を鍛えるトレーニングを行っていました。
※これは人数分労力かかるのでコーチ側すごい大変ですww

![スクリーンショット 2021-12-24 19.03.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35682/cb91a6ab-bca7-25a0-f36f-6d490f322d3d.png)



余談ですが、
この文化はしばらく続いていたようで、私が知らないところで『精神と時の部屋』は引き継がれていたようですw
覚えやすいキャッチーなネーミングをつけることで、文化になりやすいと思いますので、**ネーミング大事**です。

![スクリーンショット 2021-12-22 21.50.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35682/0cf49519-0dcd-68c7-2ea0-a8805192af54.png)

##実行力を身につければ、パーフェクト！！
ここまでで、解くべき課題と解き方を考えるというところまでできているので、あともう一息です！
最後は、これらを「どう実現するか？」を考え、動くことが重要になります。

大きな課題になればなるほど、実現することが難しく、関わるステークホルダーも増えていくので、知識・経験・人間力が試されます。
すべて一朝一夕に身に付くものではありませんが、すべて行動しないことには始まりません。

##最後に
チャンスを掴むタイミングは意外と近くにあるものです。
「今だ！」というタイミングを見逃さず、、チャレンジし、大きな成果に結び付けてください。

大きな成果を残すためには**【問いを立てる力】【仮説思考力】【実行力】**の3つの力を身につけることが必要なので、是非まず冬休みは2022年に解くべき最大の課題を見つけましょう！！開発計画を作る時もこれらの力はとても使うのでビジネス職だけではなく、専門職の方々も是非試してみてください！

私も2022年解くべき課題を早々に策定し、社会に大きなインパクトを与えられるよう尽力します。

『一年の計は元旦にあり』ですが、『善は急げ』なので、早々にやりましょう！！
latexでminipageを使って図を横に並べる際に間隔を調整

latexでminipageを使って図を横に並べようとすると，図が左詰めで出力されます．

キャプションが短い場合はそこまで問題ないのですが，長い場合には隣の図のキャプションとの間隔がほとんど無くなってしまい，とても読みづらいです．

そんな時はminipageのサイズを少し小さめに設定しつつ，minipageの間に`\hspace`を入れてあげることで図の間に隙間を作ることができます．


以下サンプルコードです．

```latex
\begin{figure}[tbp]
  \begin{minipage}[b]{0.48\columnwidth}
    \centering
    \includegraphics[draft,width=\columnwidth]{hoge.pdf}
    \caption{hoge画像です}
  \end{minipage}
  \hspace{0.04\columnwidth} % ここで隙間作成
  \begin{minipage}[b]{0.48\columnwidth}
    \centering
    \includegraphics[draft, width=\columnwidth]{huga.pdf}
    \caption{huga画像です}
  \end{minipage}
\end{figure}
```

minipageで2つの図を横に並べています．

それぞれのminipageの幅をカラム幅の48%に設定しつつ，余った4%の幅をhspaceにしています．

この辺りの数字を適当にいじれば好みのスペースを作成できます．
【TouchDesigner】専門学校で講師をした話

オンラインで講師をするにあたっての講師向けのTipsと、どのように授業を進めたかなどをまとめます。

#こんにちは
[株式会社たきコーポレーション たき工房](https://www.taki.co.jp/) のテックラボ という部署でプログラマーをしていて、主にインタラクティブコンテンツを作っています。個人ではTouchDesignerで映像制作やVJをしたり、HoudiniでCG制作をしています。（[Twitter](https://twitter.com/komakinex)、[instagram](https://www.instagram.com/komakinex/)）
[テックラボの制作事例](https://lab.taki.co.jp/)

最近はMUTEK.JPやサイバー南無南無でVJをしました！
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">MUTEKありがとうございました！<br>オンラインじゃなくて会場で、たくさんの人の前でVJできて本当によかったです！めちゃくちゃ緊張したけど楽しかったです<a href="https://twitter.com/azels?ref_src=twsrc%5Etfw">@azels</a> と、もっとたくさん現場を経験して力をつけたいと話していたので、もし機会があればバンバン声をかけてもらえると嬉しいです！！ <a href="https://t.co/qOI0oYgHIO">pic.twitter.com/qOI0oYgHIO</a></p>&mdash; komakinex (@komakinex) <a href="https://twitter.com/komakinex/status/1470755789740847106?ref_src=twsrc%5Etfw">December 14, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">今回はトンネルトーキョーの6面LEDを活かしつつ横ぶち抜きつつ、VJぽいVJが出来たと思う！<br>多めに仕込んで使わない判断もできた<br>20分どんな流れで演奏するのか未知やったけど、陽月さんの息遣いとか手の動きを見てセッションできた <a href="https://t.co/EN3lrDGzYr">pic.twitter.com/EN3lrDGzYr</a></p>&mdash; komakinex (@komakinex) <a href="https://twitter.com/komakinex/status/1472977610863161344?ref_src=twsrc%5Etfw">December 20, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


#授業について
自分は2019年3月にデジタルハリウッド東京本校 本科UI/UXD専攻を卒業しました。
[デジタルハリウッドスクール 本科UI/UXD専攻](https://school.dhw.co.jp/course/digital/)
Webのデザインやコーディング、UnityやProcessing、コンテンツの企画など幅広く学べるコースです。

当時の担任の先生から連絡があり、2021年の9月から11月の2ヶ月間で全8回の授業を担当しました。自分が通っていた頃はTouchDesignerの授業はなかったのですが、カリキュラムが色々と更新されていました。
前期にp5.jsで2Dに触れているとのことだったので、3Dの入門としてTouchDesignerを学んでもらおうと思い、こんな感じで授業をしました。

第1回　自己紹介　CGについて　SOP
第2回　SOP　レンダリング
第3回　CHOP　音反応
第4回　SOP　インスタンシング　OP間の変換
第5回　TOP　Feedbackなどカメラエフェクト
第6回　TOP　NDIを使ってZoomのカメラを変えてみる
第7回　SOP　パーティクル　ZigSimを使ってOSC通信
第7.5回　授業は休み 課題制作・質問タイム
第8回　オーディオビジュアルの課題発表



#授業で役立ったツール
画面共有していることをなるべく伝わりやすくするために役立ったツールを紹介します。

##マウスカーソルのサイズ変更
######Windows
https://www.pc-koubou.jp/magazine/40776
######macOS
https://www.too.com/support/faq/mac_basic/24604.html

##キーストロークの表示
ショートカットが伝わりやすくなったと思います。
######Windows
http://code52.org/carnac/
######macOS
https://github.com/keycastr/keycastr

Keycastrの導入方法↓

https://softantenna.com/wp/review/keycastr/


##画面の一部分をズームする
######Windows
https://support.microsoft.com/ja-jp/topic/%E6%8B%A1%E5%A4%A7%E9%8F%A1%E3%81%AE%E3%82%AD%E3%83%BC%E3%83%9C%E3%83%BC%E3%83%89%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%82%AB%E3%83%83%E3%83%88%E3%81%A8%E3%82%BF%E3%83%83%E3%83%81%E3%82%B8%E3%82%A7%E3%82%B9%E3%83%81%E3%83%A3-6d7c3095-75ec-258f-6f5b-3b0bc19a18e7
######macOS
https://support.apple.com/ja-jp/HT210978

#参考にした資料
######東京藝術大学 比嘉了さん
http://satoruhiga.com/TDWS2019/
######前橋工科大学 田所淳さん
https://yoppa.org/mit-ma20
######多摩美術大学 スコット・アレンさん
https://scottallen.ws/tau
######甲南女子大学 高尾俊介さん
https://cenkhor.org/lectures/programming_a_2019/


#年末年始に書き足します！
1Passwordの整理をした話

こんにちは！株式会社Diverseの nagaeです。
この記事は株式会社Diverse Advent Calendar2021 、25日目の記事です。

Diverseではパスワード管理・共有には1Passwordを導入しています。
導入してから数年間をルール整備せずにメンバー各々におまかせ。といった状態で利用し続けていました。

メンバー各々におまかせした結果、

* Groupが意図なく増えてしまった
* Valutsの区分が無駄に多くなってしまった
* ルール的に、どこに入れるべきか？誰に権限を与えてもいいのか？が曖昧で同じID/PWが複製されるケースもあった

という無法地帯となっていまっていました。

後回しにしていた課題でしたが、情シス、CTO、VPoEと認識を合わせつつ1年の終わりということで強い推進力で1Passwordを整理することを決断しました。

※ 今回整理したルールは `セキュリティレベルを最低限で担保する` `Valuts管理に迷う人を減らす` という目的で定めたものなので、このルールが最高だ！といった考えではありません。

# 決めたルール

- Groupは Administrators / Owners / Team Membersで運用する
- Valutsは以下の項目のみで運用する    

    | Valuts | 説明 |
    | --- | --- |
    | デザイナー | デザイン関連(ex. figma) |
    | エンジニア | エンジニア関連(ex. iOS、AWS) |
    | youbride | youbride事業 |
    | YYC | YYC事業 |
    | CS | CSチーム関連 |
    | マーケティング | マーケティングチーム関連 |
    | QA | QAチーム関連 |
    | 情シス | 情報システム部関連 |
    | バックオフィス | 経営企画室関連 |
    | 採用人事広報 | 広報、人事、採用に関わるもの |
    | 労務 | 労務関連(ex. AKASHI、SMART HR) |
    | 決済 | 決済関連(ex. 経理財務) |
    | Shared | 全社員に共有しても良いもの |

- プロダクト横断するものなどは、**タグ**で分類する
    - タイトルののプレフィックスは減らす
    - iOS、Android 、インフラ/AWS などで仕分けする
- アカウントのルール
    - 数人が共通で使うアカウントのメールアドレスはメーリングリストを使う
- パスワードのルール
    - `012345678` など弱いパスワードを使わない

# 実際に施行した結果

|  | Group数  |  Valuts数 | Item数 | 
|---|---|---|---|
| 整理前 | 14  | 28 | 728 |
| 整理後 | 3  | 14 | 678 |

※ 合わせて様々な理由から使われなくなったパスワードをアーカイブするなどの断捨離も実施しています

# 最後に

数年間積もり積もったものの整理を強い推進力、短期間で実行することで改善を行えました。
中々正解のない部分ですが、今後も放置せず常に改善の意識で取り組んで行くように情シスチームと連携して負債を残さないことを社内文化になるように働きかけていきます。
lambda + serverlessでRDB使うなら、expressよりkoaがチョット良さそう

lambda + serverlessでRDBを使う際、リクエスト毎にコネクションを閉じたい訳ですが

# express + serverless-httpでやった場合

こんなソースだとして

```.ts
const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
const app = express();
app.use(async (req, res, next) => {
  console.timeEnd("express");
  console.time("express");
  console.timeLog("express", "express middleware begin");
  await next();
  await wait(1000);
  console.timeLog("express", "express middleware end");
});

app.get("/express/hello", async (req, res) => {
  console.timeLog("express", "express open connection");
  res.send({ result: "Hello Express!" });
  await wait(2000);
  console.timeLog("express", "express close connection");
});
```

結果は
> express: 0.003ms express middleware begin
> express: 0.32ms express open connection
>offline: (λ: app1) RequestId: ckxk2061u000quh9kep97ey7h  Duration: 38.19 ms  Billed Duration: 39 ms
>express: 1.002s express middleware end
>express: 2.003s express close connection

という感じで、
- 順番がバラバラ
- res.sendの時点で、レスポンスが返ってしまう・処理が終わってしまう
という問題があります。
nextにawait出来ないのつらい
高負荷の場合、前のリクエストのconnection closeと次のリクエストのconnection openが重なり、エラーとなる場合も


# koa + serverless-http の場合

```.ts
const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
const app = new Koa();
app.use(async (ctx, next) => {
  console.timeEnd("koa");
  console.time("koa");
  console.timeLog("koa", "koa middleware begin");
  await next();
  await wait(1000);
  console.timeLog("koa", "koa middleware end");
});
app.use(
  _.get("/koa/hello", async (ctx) => {
    console.timeLog("koa", "koa open connection");
    ctx.body = { message: "Hello Koa!" };
    await wait(2000);
    console.timeLog("koa", "koa close connection");
  })
);
```

koa: 0.003ms koa middleware begin
koa: 0.589ms koa open connection
koa: 2.002s koa close connection
koa: 3.004s koa middleware end
offline: (λ: app2) RequestId: ckxk1v21c000nuh9k1aqk6n4i  Duration: 3028.71 ms  Billed Duration: 3029 ms
綺麗に順番通り流れてくれた上で、レスポンスが帰るのも全部の処理が終わってから、素敵。
バグのせいで社内恋愛がバレた件

クリスマスなので恋の話でも。

# 何があった

昔、某グループウェアで**あるバグ**がありました（今はなくなっています）。

朝、チームメンバーの今日の予定を確認したところA子さんとQ太郎さんが有給休暇で、さらに非公開予定で同じ時間帯に予定が入っていました。
そういえばこの2人同じ日に休むこと多いなあ、と思いながら、何気なくその非公開予定の枠の上にマウスのカーソルを持っていったところ

**「〇〇デート」とポップアップウィンドウに、2人とも**

そう、グループウェアのバグとは、非公開予定でもaltに予定のタイトルを入れてしまっていたのです。

そのことは心にそっとしまっておきました。

# どうすればよかった

会社のグループウェアにバレたら困るプライベートの予定を入れるのはやめましょう。
または万一見られてもいいように自分だけがわかる暗号で入れましょう。
今回のようなバグがなくても、普通に管理者権限でみられているかもしれないので。
チャットとかメールとかも同様ですね。

ちなみに後で知りましたが、私が知らなかっただけで、その2人が付き合っていたのは社内では有名でした。

# Last Christmas

I gave you my heart.
But the very next day, you gave it away.
This year, to save me from tears,
I'll eat chicken at AEON's food court.
有料級なPythonの開発レシピが載っているWebアプリ

 
      
#概要
AI/DX活用を学習教材として提供するプラットフォームです。
その名も、「Axross」

Axrossは「学んだが活用できない人」を減らしたい想いでソフトバンクの社内起業制度（SBイノベンチャー）で立ち上げた、現役エンジニアのノウハウを "レシピ" として提供するプラットフォームです。

#使用してみて
・現役エンジニアのレシピがありとても興味深い
・かなり有料級の学習教材が多い
・Pythonを書いている人はとても嬉しいWebアプリ
・学習教材を開いてやってみて、解説や回答の流れまでシンプルで使いやすいかつ自主性を求めている所が「見て終わり」ではなくて「書いて終わり」ができるので素晴らしいWebアプリだと思った。
・クリアした後には、修了証などゲーム感覚や友達や世間に認めてもらえる遊びシステムがあるところもAxrossの魅力だと思いました。

#参考文献
Axross
https://axross-recipe.com/recipes
ビジュアルのデータポイントを選択したときの、メジャーのフィルターコンテキストを見ていく➁

# はじめに

[ビジュアルのデータポイントを選択したときの、メジャーのフィルターコンテキストを見ていく➀](https://qiita.com/toukamin/items/9de60bed993b6e2eefa4)の続きです。
続きですが、ここだけ読んでも問題ないと思います。（データモデルだけはここでは割愛しますので➀をご確認ください）
前回同様、今回もビジュアルクリック時のフィルターがメジャーにどのように働くかを図を書いて見ていきます。

# ビジュアルのデータポイントを選ぶ

テーブル➀➁に表示させるメジャーを変えましたが、以下の説明には問題ないと思いますのでご了承ください。

## ALL()関数のはたらき

「165～169㎝の身長の女性」をクリックしてみます。（↓図１）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2349908/5277df40-46d3-80fe-a735-950415768b81.png)


クリックしても、テーブル➀赤く囲った集計結果は変わりません。
以下のようなDAX式によって集計されています。（↓図２）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2349908/917c266d-062a-6ee0-76d5-24017091581e.png)


[ALL()関数](https://docs.microsoft.com/ja-jp/dax/all-function-dax)を使うと、引数に指定したテーブルによる外部フィルターが外されます。
よって、日本語で書くと以下のように表現できます。（↓図３）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2349908/7589cca2-9ad2-3aac-81fd-ab07344db9a1.png)


つまり、某グラフのどこをクリックしても集計結果は変わりません。
「男性の平均身長」「女性の平均身長」が集計され続けます。

## ALLEXCEPT()関数のはたらき

次に、[ALLEXCEPT()関数](https://docs.microsoft.com/ja-jp/dax/allexcept-function-dax)を使ったメジャーの集計結果を見てみます。（↓図４）
ここでは、'身長表'テーブルの[身長(ビン)]フィールドのフィルターだけを**残し**、それ以外の外部フィルターは外しています。
クリック時に**フィルターとしてはたらく**のは、ALLEXCEPTで指定した[身長(ビン)]だけです。
逆に、外された外部フィルターはgender[性別]フィールドですが、
メジャーのDAX式の中で ```gender[性別Key] = 1 ```とフィルター指定されていますので、「165～169㎝の男性の平均身長」が集計されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2349908/8b8655f6-cd59-35a1-5efb-cf08f684733f.png)

試しに、データポイントで男性も選んでも、同様の結果になります。（↓図５）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2349908/75c9c3fb-9a24-3189-a6cd-3e5c288591a8.png)

## ALLSELECTED()関数のはたらき

最後に、[ALLSELECTED()関数](https://docs.microsoft.com/ja-jp/dax/allselected-function-dax)を使ったメジャーの集計結果を見てみます。（↓図６）
ここでは、'身長表'テーブルの[身長(ビン)]フィールドのフィルターだけを**外し**、それ以外の外部フィルターは残しています。
クリック時に**フィルターとしてはたらかない**のは、ALLSELECTEDで指定した[身長(ビン)]だけです。
逆に、残された外部フィルターはgender[性別]フィールドですから、
メジャーのDAX式の中で ```gender[性別Key] = 1 ```とフィルター指定されていますので、「男性であり女性である人の平均身長」が集計されます。
集計結果が空白ということは、そんな人はいないというわけです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2349908/3f5c60cb-8279-f0bc-7c2f-61789534008b.png)

では、データポイントを男性にしてクリックし直すと、以下のようになります。（↓図７）
順当に考えると、「男性の平均身長」が出るはずですが…。結果は違いますね。[身長(ビン)]のフィルターがはたらいているように思えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2349908/c5624f4e-0ce1-ae0b-f6e8-68c1da0ba73c.png)

外部フィルターがはたらかない、別のテーブルに落とし込んでみます。（↓図８）
ALL列、ALLEXCEPT列、ALLSELECTED列は、それぞれ上記で使ったメジャー（男性の平均身長の類）をいれています。
外部フィルターがはたらかないところでは、「男性の平均身長」を集計しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2349908/9d57ba67-8645-82dd-9e27-0d3728f37f1a.png)

つまり、外部フィルターがはたらくところでは、それが適用される、というわけです。（↓図９）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2349908/8179fb96-1ea7-5e16-4087-8c1ff0b6bc69.png)

よって先ほどの図６の解説「男性であり女性である人の平均身長」、
正しくは「男性であり女性であり165～169㎝の人の平均身長」（そんな人はいませんので変わらず空白ですが）といえます。

# おわりに

➀から含め、自分なりに外部フィルターの影響をシンプルなメジャーを使ってひも解いてみました。
解釈に間違い等あれば、ご指摘お願いします。
CALCULATE内のフィルターを含めると、フィルターコンテキストへの理解は十分ではありませんが、今後も引き続き勉強していきます。
k近傍法をsklearnなしで実行する方法について！！

こんにちは！初投稿させていただきます．

今回はk近傍法をsklearnを使わず行う方法を解説します．

使うデータとしてはsklearnに内蔵されているdigitデータです．


```k.py
import numpy as np
import pandas as pd
import collections
from sklearn import datasets
from sklearn.model_selection import train_test_split
from sklearn.metrics import classification_report, accuracy_score, confusion_matrix

# データのロード
digits = datasets.load_digits()

# 特徴量
image = digits.images
total , x , y = image.shape 
image = np.reshape( image , [total,x*y] )

# 目的変数
label = digits.target

# 学習データ，テストデータ
train_data, test_data, train_label, test_label = train_test_split(image, label, test_size=0.5, random_state=None)

# テストデータ数
testcount = test_label.shape[0]

# 予測結果を格納する配列
all_label=[]
#k近傍法のkの指定
mk=int(input())


#テストデータの繰り返しの準備
for i in range(len(test_data)):
    #あるテストデータにおける最近傍を求めるためのデータフレームの準備
    output=pd.DataFrame(columns=['index','ans'])
    #学習データの繰り返しの準備
    for j in range(len(train_data)):
        #あるテストデータと学習データの距離を格納するための変数ans
        ans=0
        #あるテストデータと学習データの距離を調べるfor文
        for k in range(len(train_data[0,:])):
            ans+=(train_data[j,k]-test_data[i,k])**2
        #outputに各学習データのindexとあるテストデータとの距離を格納
        number = pd.Series([int(j),ans],index=output.columns)
        output = output.append(number, ignore_index=True)
    #outputを距離で昇順に並べる
    output = output.sort_values('ans')
    #距離で昇順に並べたあとのindexを格納するリストkkk
    kkk=[]
    #距離で昇順に並べたあとのindexから学習データの中のラベルを調べるfor文
    for l in range(mk):
        kkk.append(train_label[int(output.iat[l,0])])
    #ラベルを調べた後にその中にどの値が最も多いのか（最頻値）を調べてkkkに格納
    kk = collections.Counter(kkk).most_common()[0][0]
    #ラベルを結果に格納する
    all_label.append(kk)


        
        


#念の為の正解率や混合行列の結果

#予測結果
print( classification_report(test_label, all_label) )

#正解率
print( accuracy_score(test_label, all_label) )

#混同行列
print( confusion_matrix(test_label, all_label) )
```

ぜひ，ご自分でも加工して作ってみてください！！
これを学ぶだけでもpythonの中身がわかっていい勉強になると思います．
次元とサイズがわからなくなった時に見るページ

# 概要
機械学習系のコードを書いている際，突然次元やサイズの概念があやふやになってきたり，なんでここでsqueeze(unsqueeze)してるんだ？ってなって詰むことありませんか？
コードとにらめっこして分からなくなった時に深呼吸しながら眺める用の日記です．
ほとんどの人にはそんなの当たり前だろって感じだと思いますが，自分は文字だけ眺めてるとふと分からなくなるので...
あと配列とテンソルをそんなに区別せずに書いてますが許してください．

# 言ってること
(少なくともpytorchやnumpyでは)次元数は軸の数で，サイズは各軸の要素数だよ．
ベクトルの次元数と配列の次元数をごっちゃにして考え出すとわからなくなるよ．
~~サイズ1の次元とか考えたくねぇよ！~~
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535181/7aa12c1b-93f5-ff5e-3e24-ec80032a00f1.png)


# 本文
多次元の配列を扱うときやNN系のコードを書いている際に，配列(やテンソル)の形がわからなくなることありませんか？
自分は往々にしてあります．そんな時，役に立つのが次元やサイズを確認する機能です．
例えば

```python
 tensor = torch.ones(2, 2, 2)
 tensor.size() # ([2,2,2])
 tensor.dim() # 3 
```
はい，解決です．
ではありません．いや，ほとんどの場合はこれで解決です．
でも数式とにらめっこしながらプログラミングしていると，たまにモヤモヤが残ることがあります．

例えば，
ふむふむ，$C=Ax$で$A$が2*2行列で$x$が2次元ベクトルか．

``` python
>>> import torch
>>> x = torch.tensor([2, 3])
>>> A = torch.tensor([[1, 0],[0, 1]])
>>> torch.mv(A, x)
tensor([2, 3])
```
よし！一応次元数も確認しとくか．

```python
>>> x.dim()
1
```

あれ？$x$って2次元じゃなかったっけ？→パニックでプログラム全消去

まあこんな簡単な式でこうなる人はいないと思いますが，配列というものを扱う以上次元数やサイズ数にまつわるエラーからは逃げられないと思います．
前置きが長くなりましたが，言いたいのは配列やテンソルはベクトル，行列を表せるだけでそのものではないよってことです．
ベクトルの感覚で言う次元数はpytorchのtensorで言うと各軸のsizeに当たります．
また，配列やテンソルにはサイズ1の次元も存在します．これは初心者が配列操作でエラーを出す時の典型的な躓きポイントな気がします．
配列を扱う際には，以下の画像のように同じものでも自分が扱っているものがどの形式で表されているのか，落ち着いて考えましょう．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535181/93c75d96-fe61-15cf-1cf1-b22eaa5cf5e8.png)
JavaScriptの基本「プロトタイプ」



<h2>プロトタイプとは</h2>

実はJavaScriptの関数オブジェクトは、標準でprototypeプロパティを持っています。

試しに関数を作ってみます。

オブジェクトの中に何も記述しておりませんが、コンソールはしっかり表示されます。

```javascript

function F() { }
console.log(F.prototype)

```

デフォルトでは空のオブジェクトを参照しています。
この関数F()のprototypeプロパティがが参照しているオブジェクトをプロトタイプオブジェクトといいます。

ではこのプロトタイプオブジェクトにpropというプロパティを作り、そこに値を入れてみましょう

```javascript
//プロトタイプオブジェクトのプロパティ
F.prototype.prop = "プロトタイプ"

//インスタンス化
let obj = new F();

//propはobjオブジェクトのプロパティではないがそのように使える
console.log(obj.prop)

```


prototypeオブジェクトのプロパティはコンストラクタによって生成されたインスタンスから、あたかもそのインスタンスのプロパティであるかのように参照できます。


※あくまで参照しているだけなので、

```javascript
obj.prop = "代入"
```
代入はできないです。

<h2>プロトタイプを使用するのメリット</h2>

```index1.js
//コンストラクタ
function User(email,name) {
  this.email = email
  this.name = name
}

//プロトタイプ
User.prototype.login = function () {
  this.online = true
  console.log(this.email , 'has logged in')
}

//インスタンス化
let japanese = new User("japan@gmail.com", "まさき")

japanese.login();

//コンソール
japan@gmail.com has logged in

```

プロトタイプを使って、login()メソッドを作りました。

でもこれは、オブジェクトの中にメソッド作れば同じじゃないか？と思うかもしれません

```index2.js
//コンストラクター
function User(email,name) {
  this.email = email
  this.name = name
  this.online = true
  this.login = function () {
    console.log(this.email , 'has logged in')
  }
}

//インスタンス化
let japanese = new User("japan@gmail.com", "まさき")

japanese.login();

//コンソール
japan@gmail.com has logged in

```

コンソール自体は同じになります。

<h4>何が違うのか</h4>

オブジェクトの中にプロパティ（メソッド）を書いてしまうとインスタンス化するごとに新しいプロパティが生成されます。

当然といえば当然なのですが、たくさんのインスタンスを生成するとその分メモリを消費します。

一方protptypeはプロトタイプオブジェクトを参照しているので、インスタンスを何個作ってもメモリは増えません。

<h5>クロージャー</h5>
余談ですが、ここでなぜ、プロトタイプオブジェクトでthisが使えるのだろうと思った方いるかもしれません。

試しにコンソールでthisを見てみましょう。

```javascript

//コンストラクタ
function User(email,name) {
  this.email = email
  this.name = name
}

//プロトタイプ
User.prototype.login = function () {
  this.online = true
  console.log(this)
}

//インスタンス化
let japanese = new User("japan@gmail.com", "まさき")

japanese.login();

//コンソール
User {email: 'japan@gmail.com', name: 'まさき', online: true}email: "japan@gmail.com"name: "まさき"online: true[[Prototype]]: Object

```

コンソールにUserが出てきましたね。プロトタイプオブジェクトの中でもthisはUserを表しています。

javaScriptでは「自分を定義した関数を親とする」のでプロトタイプオブジェクトの親は「User = this」になるわけです。

クロージャーについての記事

https://qiita.com/t_109609akg/items/7a8f260db8b99e42ecf2

<h2>何か間違えなどあれば、指摘していただけると助かります。</h2>

<h3>追記予定 継承</h3>
[py2rb] dict の for

# はじめに
移植やってます
# for (Python)
```python
h = { 1: 2, 3: 4, 5: 6 }
for x in h:
    print(x)

# 1
# 3
# 5
```
https://docs.python.org/ja/3.7/library/stdtypes.html#dict

知っている人にとって当たり前かもしれませんが、`dict`の`for`で変数が1つの場合、キーのみを返します。

知らなかったため、人生初の`stack level too deep`を頂きました。
とんでもないクリスマスイブになるところでしたが、デバッグの甲斐あって普通のクリスマスになりそうです。
# each_key (Ruby)
```ruby
h = { 1 => 2, 3 => 4, 5 => 6 }
h.each_key do |key|
  puts key
end
h.keys.map{ puts _1 }
```
`map`や`select`のときは、`keys`を使用することも可能です。
# メモ
+ Python の for を学習した
+ 道のりは遠そう
Kotlin初心者がゴミ拾い用の地図アプリの作成に挑戦

# はじめに

　先月、１１月１日に、九州へ旅行に行ったのをきっかけに、道路脇に捨てられているポイ捨てゴミが気になるようになり、趣味で、車で移動中に道路脇に落ちているゴミ拾いをはじめたのですが、ただ拾うだけでは面白みがないので、ゴミを拾った場所の位置データを記録・集計するソフトを作りたくなり、勉強を兼ねてKotlinで地図アプリを作成をはじめました。

　Qiitaの方では、AndroidStudio と Kotlin 関連のネタをメモを兼ねて少しずつ書いていく予定です。


# 開発環境と現状

　現在は、Android Studio を使ってネット情報を見ながら、少しずつ作成中で、地図を表示させて、setOnClickListenerでクリックイベントの処理や、addMarkerでマーカーを作成・カスタムするなど、初歩的な事が出来るようになったところです。

![イメージ7339.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503948/3d3c0e66-7af3-d43a-3c6c-6114f1ae9ba8.jpeg)
![イメージ7340.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503948/729df57b-6ee2-0fda-4feb-0f911f28bbcf.jpeg)


# 目標

　クルマに取り付けたAndroid Tabletにアプリをいれて、ゴミが落ちてるポイントの位置座標を記録して、オンラインサーバーへ情報を送信し、WEB上でゴミの位置情報を表示できるまでを考えています。

　その他、サーバー上で集計した情報を分析して、Pythonで何か面白事が出来ないかとも考えています。
Reactで使えるCSS-in-JSのライブラリ比較

## 💭 始めに 
KWCのフロントエンドエンジニアの[@eri2490](https://twitter.com/eri2490)です。
React(Preact)で利用できるスタイリングの比較・導入の検討を行いました。

## ⛑ CSS in JSとは？
特定のフレームワークやライブラリを指すものでは無く、「JavaScriptの中でCSSを書く」という概念のことです。JS実行時にスタイルを処理し、HTMLのheadにスクリプトを追加します。
他にはCSS-Modulesや、直接cssファイルを読み込む手法があります。今回はJSファイルに直接CSSも書く方法を取りたかったので、CSS in JSのライブラリの比較も行いました。

## 🏋🏼 npm trendsでの比較
候補にあがったライブラリ
1. [styled-component](https://styled-components.com/)
2. [emotion](https://emotion.sh/docs/introduction)
3. [JSS](https://cssinjs.org/?v=v10.9.0)
4. [goober](https://github.com/cristianbote/goober)
5. [Picostyle](https://github.com/morishitter/picostyle)
![Screen Shot 2021-12-22 at 16.21.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2422504/7c4f53fb-862b-71bf-3cbc-645c202b4ccf.png)
`styled-component` のダウンロード数の多さと`emotion` の一定の人気・パッケージサイズの軽量さが特徴的でした。
一方で`Picostyle`はダウンロード数・スター数の少なさから、検討することを止めました。

## 🛹 インポートや書き方の比較
`emotion` は複数の書き方が提供されており、`styled-component` や `goober` はStyled Componentを作成します。
`JSS` はCSSのクラスを作成し、classNameで指定します。

### styled-component
```ts
import styled from 'styled-components';

const TitleComponent = () => {
    return <Title>title component</Title>;
};

const Title = styled.h1`
    color: 'red';
`;
```

### emotion
```ts
// styled-componentっぽく
import styled from '@emotion/styled';

const Title = () => <Text>title component</Text>;

const Text = styled.h1`
  color: red;
`;
```

```ts
// Object Styles
import { css } from '@emotion/css';

const Title = () => <h1 className={Text}>title component</h1>;

const Text = css({
    color: 'red',
});
```

```ts
// Object Stylesを変形してJSSっぽく
import { css } from '@emotion/css';

const Title = () => <h1 className={styles.title}>title component</h1>;

const styles = {
  title: css({
    color: 'red',
  }),
};
```

### JSS
```ts
import { createUseStyles } from 'react-jss';

const Title = () => {
	const classes = styles();
	return (
		<h1 className={classes.text}>title component</h1>
	);
};

const styles = createUseStyles({
	text: {
		color: 'blue',
	}
});
```

### goober
```ts
import { styled } from 'goober';

const TitleComponent = () => <Title>title component</Title>;

const Title = styled('h1')`
    font-size: 3rem;
    margin-bottom: 0.8rem;
`;
```

## 🎄 まとめ
Styled Componentを作成すると生のCSSを書けるという利点はあるものの、IDEでCSSの補完が効かない点や、一見して普通のコンポーネントかどうかわからないという点はデメリットに思えました。
逆にCSSクラスを作成する場合は上記の書きづらさは解消される一方で、定義されたプロパティのみしか使えないという点で、困難さが予想されます。

個人的にはパッケージサイズが小さく、IDEでCSSの補完が効く書き方ができる**emotion**の使い勝手が良さそうでした。

## 🍻 We're hiring!
KWCでは、エンジニアを募集しています。
https://recruit.kddi-webcommunications.co.jp/recruitment/career/
ご興味を持たれた方はぜひご連絡をお待ちしております！
それでは良いお年をお迎えください🎍
socket通信とはなんのこと？

## 勉強前イメージ

通信する口？のことなきがするけど、実際よくわかってない

## 調査

### そもそもsocketとは？

tcpは `サーバのアプリケーション` と `クライアントのアプリケーション` との通信を決めています。
イメージとしては、 `クライアントのブラウザがサーバのapacheにアクセスしてデータのやり取り` を想定してもらえればと思います。
その際の通信は サーバ側: `XXX.XXX.XXX.XXX:80 (宛先IP:ポート番号)` と クライアント側: `YYY.YYY.YYY.YYY:50001 (送信元IP:ポート番号)` との通信、
`XXX.XXX.XXX.XXX:80 ⇔ YYY.YYY.YYY.YYY:50001` の意味合わせのことを `socket` と呼びます。
アプリケーションはこのsocketでTCPコネクションを確立しています。

### socket通信

上記がsocketで、送信元と宛先の組み合わせの通信のことをsocket通信と言います。
socket通信は、OSI参照モデルでは第4層:トランスポート層に位置しています。

※トランスポート層は
通信プロトコルの通信手順や規約を定めている層で、
データの送信元と宛先での通信の制御や通知を担っています。

socket通信(トランスポート層)を用いてhttp通信(アプリケーション層)をしてるイメージになります。

## 勉強後イメージ

難しくて、簡単なことしかわからんかった....

## 参考

- [【図解】初心者にも分かる TCP/UDP 〜違いや共通点,使い分け,ポート番号,具体例について〜](https://milestone-of-se.nesuke.com/nw-basic/tcp-udp/tcp-udp-summary/)
- [Http通信とSocket通信の違い](https://bny64.github.io/2020/12/13/http-socket-jp/)
ローカル環境でMySQLが立ち上がらないときの解決策


```
rake aborted!
ActiveRecord::ConnectionNotEstablished: Can't connect to local MySQL server through socket '/tmp/mysql.sock' (38)
```
というエラーが発生した。`/tmp`ディレクトリを確認しても`mysql.sock`はしっかりと存在する。
mysqlを起動してみると下記のエラーが起こっていることが判明した。

```
$ sudo mysql.server start
Password:
Starting MySQL
.Logging to '/usr/local/var/mysql/fujiwaratakuminoMacBook-Pro.local.err'.
 ERROR! The server quit without updating PID file (/usr/local/var/mysql/fujiwaratakuminoMacBook-Pro.local.pid).
```
というエラーが起こっていることが判明した。
#pidファイルとは？
> 「.pid」で終わっているファイルがpidファイルです。このファイルには、該当するプロセスのプロセスIDなどの情報が記述されています。たとえば、/var/run/crond.pidファイルには、crondのプロセスIDが記述されています。
> このファイルは、スクリプトやほかのプロセスで利用されます。プロセスIDが記述されているので、このファイルはプロセスの制御（再起動や停止など）、プロセス同士の連携などに利用されます。
参照先　[「/var/run」ディレクトリ](https://linuc.org/study/knowledge/523/)

ググった末に[mysql起動時でエラーが起きた時の対処](https://qiita.com/makuramoto1/items/52159370d00bef708595)の記事を参考に

```
$ sudo rm /tmp/mysql.sock
$ chown -R _mysql:_mysql mysql
```
を実行。再度`sudo mysql.server restart`を実行するが、

```
 $ sudo mysql.server restart
 ERROR! MySQL server PID file could not be found!
Starting MySQL
.Logging to '/usr/local/var/mysql/fujiwaratakuminoMacBook-Pro.local.err'.
 ERROR! The server quit without updating PID file (/usr/local/var/mysql/fujiwaratakuminoMacBook-Pro.local.pid).
```
と違うエラーが発生した。`/tmp/mysql.sock`を消したのがまずかったのかと思った。
今度は、[mysql 起動時のThe server quit without updating PID file エラーの回避法](https://qiita.com/jonakp/items/477a18d4a94c01a31583)を参考にした。

`$ ls /usr/local/var/mysql`を実行してみると`*****.local.pid`がなかった。

```
$ touch /usr/local/var/mysql/*****.local.pid
```
を実行。`sudo mysql.server restart`を実行してみるが、`*****.local.pid`に権限がなかったので、

```
sudo chown -R _mysql:_mysql /usr/local/var/mysql/
```
これで無事動くことができました！

#参考にさせて頂いていたサイト
[「/var/run」ディレクトリ](https://linuc.org/study/knowledge/523/)
[mysql起動時でエラーが起きた時の対処](https://qiita.com/makuramoto1/items/52159370d00bef708595)
[mysql 起動時のThe server quit without updating PID file エラーの回避法](https://qiita.com/jonakp/items/477a18d4a94c01a31583)