OmniAICreator/Qiita-1.07M huggingface dataset:
react6 react-router　ページの分割

## version
```js
"react": "^18.2.0",
"react-dom": "^18.2.0",
```

## 通常のrouting
`BrowserRouter`は省略しています

```js
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/page1" element={<Page1 />} />
    <Route path="/page2" element={<Page2 />} />
  </Routes>
```

## よく紹介されているネスト

*下記方法だと親ページの内容が一緒に表示されてしまう*

```js
// page1/nestでアクセス可能
<Route path="/page1" element={<Page1 />}>
  <Route path="nest" element={<Nest />} />
</Route>
```
```js
// NestがPage1にくっつく形で処理される
// 親であるPage1でOutletを使用する
import { Outlet } from "react-router-dom";
const Page1 = () => {
  return (
  <>
    ...
    // returnの1番最後に書く
    <Outlet />
  </>
  )
}
```

## 親ページを表示させず独立したページを表示する
大抵の紹介されている方法は`コンポーネント`を渡して、渡した`コンポーネント`を子で表示する方法
記述量と考えることが多くなるので下記じゃダメなのだろうか？
railsみたいで個人的には好きなのですが、何か理由があるのだろうか??
```js
<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/page1" element={<Page1 />} />
  <Route path="/page1/:id" element={<User />} />
  <Route path="/page2" element={<Page2 />} />
  <Route path="/page2/nest" element={<Nest />} />
  <Route path="/*" element={<NotFound />} />
</Routes>
```
基本情報技術者試験で学んだ5つのこと

5月に基本情報技術者試験を受けまして、先日合格証書が届きました。試験勉強を通じて学びをたくさん得られたので、記憶が新しいうちに書き残しておこうと思います。
なお、効率的な勉強方法は先輩方が優れた記事を残してくださっているので、詳しく触れずに、私は主に「この勉強を通じてどのようなことを学んだのか」という視点で書いていきます。

試験を受けようかどうか迷っている方、受けなければならないけれどモチベーションが上がらないなぁ・・・という方の参考に、少しでもなれば幸いです！

## 私の状況
・ド文系出身の社会人
・ソフトウェアエンジニアを目指し勉強中
・JavaScriptの基礎知識はある
・IT業界、開発業務の経験なし
・IT用語の略語に弱い

## 受験理由
コードを書くことには慣れてきていたのですが、前提となるテクノロジー知識全般に疎いな、と感じたのが一番の理由です。ソフトウェアエンジニアとして転職した際に、「早くチームの一員になりたい」という想いがありました。経験不足を少しでも補うため、参考書を読み始めたのがきっかけで、受験を決意しました。

## 勉強方法
* 参考書を読書感覚で1周しながら、問題に軽く触れる。
* Udemyの解説で理解を深める。（この講座のおかげで、ただの暗記ではなく知識として身に着いた感覚があります。ありがとうございます。）

https://www.udemy.com/course/kihon_joho/

* 午前試験対策：有名な過去問道場さんをフル活用。（無料なのに解説が詳しくて感謝感激。）

https://www.fe-siken.com/

* 午後試験対策：アルゴリズム、疑似言語、Pythonの対策本。＋過去問道場さんをフル活用。
`●基本情報技術者 大滝みや子先生のかんたんアルゴリズム解法 ～流れ図と擬似言語～`
（図が多くて分かりやすい。疑似言語が解読できるようになった。）
`●徹底攻略 基本情報技術者の午後対策 Python編`
（ただの試験対策本じゃなかった。コンピュータの基礎理論やアルゴリズム、予想問題まで大充実。これ1冊でPythonに詳しくなれた。ずっと手元に置いておこう。）

## 試験勉強を通して学んだ5つのこと
#### １．技術の奥深さを再認識できたこと
参考書を読んで問題を解くだけでは、ただの丸暗記になってしまうと感じたので、Udemyで全ての範囲を受講。今後必須となる基礎知識を体系的に学ぶことができたのが良かったと思います。今まで理解不能＆食わず嫌いだった2進数やネットワーク、データベースなどが身近になり、もっと知りたいと感じています。

特にセキュリティやデータベース、ネットワークは、まだまだ分からないことだらけで、勉強を続けて知識を深めていく必要があることを痛感しました。

#### ２．限られた時間の中で「効率的に成果を出す」こと
今回、私が本格的な試験勉強を始めたのは約1ヶ月前で、勉強時間は全部で130時間。合格までの目安は200時間と言われており、不利な状況でした。しかし、勉強時間は「量より質」と常々考えているので、**短期間で集中して取り組む**ことを意識していました。

ただ闇雲に暗記して演習しているだけでは、合格ラインに届きません。先輩方の記事を読み漁り、より効率的な勉強方法、問題の解き方を収集しました。この過程で、エンジニアに必要なググり力が上がった気がしています。

#### ３．当日を想定して練習すること
たくさんググって集めた知恵を拝借し、問題を解く際に時間を計る、実際の試験を想定したスタイルで勉強する、などを行っていました。過去問を見て感じたのは、特に午後試験では知識よりも「制限時間内に解答に辿りつく読解力と集中力」が試されているということ。私にとっては、このスキルを身に着けるのが一番の壁でした。

勉強し始めてしばらくは、制限時間内に半分くらいしか解けず、伸び悩みました。しかし、試験では平均7割の得点ができたので、この練習のおかげだと思います。

#### ４．「やらない」を潔く決断すること

午前試験はスムーズにクリアできたのですが、午後試験は正直、合格ラインに達するか微妙なところでした。プログラミング言語は、もともと興味があったPythonを選択。実際にコードを書いたり本を読み込んだりして、かなりの時間を費やしていました。しかし、演習問題を解くと、まったく歯が立たないのです。

もっと時間があれば出来るようになったのかもしれませんが、合格しなければ元も子もありません。ここは悩みましたが潔く、試験数日前に「表計算」に選択を変えました。それからの数日間、表計算の対策に追われたことは言うまでもありません……。

#### ５．最後まであきらめないこと
午後試験はとにかく時間命なので、時間配分と順番を決めてから臨みました。しかし、本番は思い通りには進まないもの。予想より時間が押してしまいました。結果として、最後の方は時間が足りなかったのですが、ラスト1分前まで諦めず、全神経を集中させて1点でも多く取るつもりでいました。

## 試験を終えて
短期間だったこともありハードな１ヶ月間でしたが、無事合格ラインに到達できました:cherry_blossom:
午後試験は時間切れだったのでダメかと思いましたが、諦めず問題と向き合って本当に良かったと思います。

この勉強期間を通して、難しくて取っ付きにくいと感じていたテクノロジー知識を、おもしろいと感じられるようになりました。また、並行して勉強している内容ともリンクすることが多く、「大変だったけれど勉強しておいて良かった！」と痛感する日々です。引き続き**楽しく前向きに**:raised_hands_tone2:をモットーに進んでいきます！
カンバンボードをReactで作る👨‍💻

## はじめに
### 概要

Reactのハローワールド代わりになりそうなカンバンボードを作りました。
作成したモノのGifはコチラです👇
![output.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287774/d04fed84-79c0-778a-ba8e-8624b0468b3d.gif)

https://github.com/kawamou/kanban-board

# 実装
## ドラッグアンドドロップの実現方法
### React Dnd

カンバンはドラッグアンドドロップ（DnD）をどう実現するかが根幹になるかと思います。

今回は、Reduxの作者であるDan Abramovによる[React Dnd](https://github.com/react-dnd/react-dnd/)を利用しました[^1]。
DnDのパッケージは他にもreact-beautiful-dndがありますが、各パッケージの長所 / 短所を比較した「[React DnDを使ったので知見をまとめた](https://tech.hey.jp/entry/2021/03/09/131638)」を参考にしつつ、React Dndの導入を決定しました。

個人的にはクセのあるAPIに感じたので、基本的な概念のキャッチアップに割と時間がかかりました👶

ある程度正しさを捨象し丸め込んだ説明をすると、

- ドラッグしたいコンポーネントに`useDrag`を導入し、ドロップしたいコンポーネント（ドラッグしているコンポーネントとの「当たり判定」を得たいコンポーネント）に`useDrop`を導入
- ドラッグしたコンポーネントと接触した際にトリガーされる`hover`コールバック内に並べ替えロジックを記述する

みたいな感じです。
今回は、`hover`内でカード要素の順番を保持したState（状態）を変更することで、各カードを並べ替えて再レンダリングしています。

実装の上では下記の記事を大変参考にさせていただきましたので、合わせて読むと理解が深まるかと思います。

https://zenn.dev/mtblue81/articles/98ae1a40266317

https://github.com/MtBlue81/react-dnd-sandbox

## スタイル周り
[Github projects](https://docs.github.com/ja/issues/organizing-your-work-with-project-boards/managing-project-boards/about-project-boards)（旧版）のUIを意識して実装しました。
スタイルにはTailwind CSSを利用しています。

### アイコン

Tailwind CSSが作っている[heroicons](https://heroicons.com/)を利用しました。
こちら、普通にimportしてtsx内から呼び出せるので、svgを直接触る必要がなくメチャクチャ楽チンでした。

```tsx
import { PlusIcon } from "@heroicons/react/outline";
...
return (
    ...
        <PlusIcon />
    ...
  );
```

### ユーティリティクラスの順番

ユーティリティクラスを書く順番について当初は悩んでいましたが、Concentric CSSに従って書くと良さそうです。

>Concentric CSSのアプローチを使うのが良さそうです。
Concentric CSSでは、プロパティをアルファベット順とかにするのではなくて、それぞれのプロパティの役割ごとに並び替えます。
>...
>このルールに従うと下記のような順番でユーティリティクラスをつけていく形になります。
① : ポジショニング系
② : ボックスモデル
③ : ボーダ系
④ : コンテンツのサイズとスクロールバー周りのやつ
⑤ : テキスト周りのやつ
⑥ : その他の視覚的な調整を行うもの

https://qiita.com/yoshii0110/items/78419aa01081d10569d9

ルールを手動で実装するのは骨が折れるので、eslint-plugin-tailwindcssを導入し、自動で適切な順番に並び替えると楽でした。
下記の記事に導入方法が書いてあります。

https://zenn.dev/ikenohi/articles/df2bf0c990d99a

# まとめ
Reactを用いてGithub projectsっぽいカンバンボードを実装しました。
状態管理とか画面の作り方とか、Reactの入門に良いなと感じました。
書き捨てる気持ちで書いたので大変コードが汚く悲しくなっています...。

[^1]: https://react-dnd.github.io/react-dnd/docs/faq#who-made-it-and-why
antiX を　32bit　のパソコンへ

幸いantiX には　３２ビット版があります


![1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211097/69035767-43b9-f428-a7b3-a4720cb0b0c0.jpeg)




あとは　他のPCから　ssh で入って　コピペで

１）
apt install --install-recommends fcitx fcitx-mozc




２）
 .desktop-session/startup の最後に
fcitx-autostart &
を追加




3）
.desktop-session/desktop-session.conf　の最後に

export GTK_IM_MODULE=fcitx
export QT_IM_MODULE=fcitx
export XMODIFIERS=@im=fcitx
export DefaultIMModule=fcitx
を追加



これで日本語入力もOKです


----------

https://tobiinu.com/2022/01/01/antix-21-japanese-im/
を参照しました
React×Firebaseで非ログイン時のアクセス制限

# 背景

React×Firebaseで非ログイン時にアクセス制限を実装しようとしたところ、
意外と記事が少ないのと、Firebaseの仕様理解が甘く詰まってしまったので記事にまとめようと思います。

# 実装

```javascript
import React, { useState, useEffect } from "react";
import { onAuthStateChanged } from "firebase/auth";
import { useNavigate } from "react-router-dom";

const Home = () => {

  const [userAuth, setUserAuth] = useState();
  const navigate = useNavigate();

  useEffect(() => {
    // ログイン認証
    onAuthStateChanged(auth, (user) => {
      if (!user) {
        navigate("/signin");
      } else {
        setUserAuth(user);
      }
    }, []);
  });

  if (userAuth !== null) {
    return (
      <>
        <h1>Home</h1>
      </>
    )
  }
}
```
`onAuthStateChanged`を実行することで`auth`が保持している値 (ユーザー情報)が`user`に入り、
引数となる`user`が空の時には`signin`へ戻るようになり、そうではない時には`setUserAuth`を実行する

### なぜifを使う必要があるのか
onAuthStateChangedは非同期処理であるため、authオブジェクトの状態を待って認証情報を取得する必要があるため上記のようにifを使って条件分けを行う必要がある。


上記に合わせてreturn時にも`if (userAuth !== null)`を使い、ログイン時には`setUserAuth`を実行し、`userAuth`に`auth`の値が格納されるので`userAuth`が`null`ではなくなり、レンダリングされるようになっている

## まとめ
- アクセス制限をかけるためには`onAuthStateChanged`の非同期である特性を意識する必要がある
- ifを使って渡せる値があるかどうかで判定
- 非同期難しい
【1歩目 🐾 Flaskとの選択】1日1歩 Django

## はじめに
日々、更新するためにこのような１日１歩進んでいくための記事を作成しようと思います。
実は、Djangoでブログサイトを作ったりしたことがあるので、その工程や追加で気が付いたことを順々に追っていこうかと思います。
初回は、案外、気になる **Flask** **と** **Django** **の** **Web** **フレームワークはどう選べばいいの**？です。
**良い点・悪い点**を明確にするため、PythonのWebフレームワークの１つ **Flask** と比べていきます。

## 比較してみた！！
２つの違いを簡単に分かりやすく表にまとめてみます！！
この後、一つ一つなぜそのような評価になっているのか詳細に見ていきます

|　　　　　　  | 　Flask　 |　 Django　  |
|:-:|:-:|:-:|
| 使用言語 | Python | Python |
| 規模 | 小・中規模 | 大規模 |
| クイックスタート ※1 | 少し遅め | 速い |
| 拡張性 | 高い | 低い |
| 速度 | 速い | Flaskより重い |
| 難易度 | 低い | 高い |

※1 純粋なソースコード量ではなく、主観の入ったwebサーバー起動までを示す？


### 使用言語
使用言語はお互いにPythonです。
こちらはインストールのしやすさ等は変わらないのでスキップします。
### 規模
**Flask**

:::note info
後ほど拡張性で説明しまうが余計な機能をすべてそぎ落としてWebフレームワークとしての最小構成でできています。ですので、小規模から中規模を作るのに適しています。
:::
:::note alert
逆にFlaskで大規模を作ろうとすると外部から多くの機能を追加する必要があるため、コストが高くつきやすく、後付けのためDjangoよりメリットである速度も遅くなりがちです。
:::

**Django**

:::note info
DBや認証といったWebフレームワークにあったらいいなの機能がたくさん搭載されています。そのため、後から追加せずとも元から入っているため、大規模で開発をする際にDjango以外のモジュールを追加で必要としないことが多いので大規模開発に向いているといえます。
:::
:::note alert
逆に小・中規模を作ろうとすると余計な機能が盛りだくさんであるため、小規模なのに大規模並みの速度しかでないなどデメリットを講じてしまうため、向いていません。
:::
### クイックスタート
**Flask**

:::note warn
一からPythonのコードを書かないといけないので、手間はDjangoよりある感じ。
書くソースコードはさほどないので、速度だけでいうとそこまで差はない。
:::
**Django**

:::note info
プロジェクト作成　⇒　アプリ作成　で起動はできるのでクイックスタートという点においては速くはある
:::

### 拡張性
**Flask**

:::note info
最小構成しか入っていないため、拡張性は高い。最適なものを自由に選ぶことができる点はメリットです。
別記事で紹介している[Elelctron+Flask](https://qiita.com/BUU-SAN/items/af3ae2c9835cd06dddc4)の構成はこれを理由に組んでいます。
:::
**Django**

:::note warn
元からWebアプリ開発に必要な機能が揃っているため、別で用意する必要がなく、拡張性とみるとなく見える。だが、書いた通り機能は揃っており、Djangoが用意したものであるため、親和性は高いです。
:::

### 速度
**Flask**

:::note info
Webフレームワークを構築する上での最小構成しか入っていないため、速度は高いです。そのため、他のモジュールと組み合わせやすい。
:::
**Django**

:::note warn
あったらいいなの機能が盛りだくさんのため、どうしてもFlaskに軍配があがります。
ですが、速度を求めない限り、そんなに気にはならないと思います。
:::

### 難易度
**Flask**

:::note info
余計な機能がない分、シンプルな分かりやすいです。
そのため、Djangoより学習コストが低いです。

:::
**Django**

:::note warn
モデルの調整や設定ファイルと決めることが沢山あり、学習コストは高めです。
学ぶのに自信がない人はFlaskから始めるのもありです。
:::

## まとめ
Flask と Django を比較してみました。私自身はどちらもプログラムを組んだことがあり、やはり、それぞれ利点がある分、組むときの規模感で選んだらします。簡単なアプリケーションはFlask、サーバーに載せて運用するサイトはDjangoでなんて今は書いていたりします。
FlaskのViewをDjangoの書き方のようにすることとかやってたこともあるので、自分のおすすめはDjango→Flaskだったりします。
挫折しない自分に合った学び方を選んでください。
Rubyの開発環境を作る

初めましての方は初めまして。百瀬碧音と書いて、ももせあおいと言います。
今回の記事はRubyの開発環境を整えるための方法の備忘録です。

# Xcodeのインストール

まず、Macで開発を行えるようにするために必要なXcodeをインストールする。

```zsh
$ clang
# $ xcode-select --install と一緒
# Macを開発で使えるようにするためにXcodeが必要
```

# Homebrew のインストール

Homebrewという、Macのパッケージマネージャーをインストールする。

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

最新のコマンドは [Homebrew公式ページ](https://brew.sh/index_ja) を確認する。このページのインストールの真下にあるコマンドをコピーして実行すると、Homebrewをインストールできる。

# 必要なパッケージをインストール

```zsh
$ brew install ruby-build rbenv openssl
# Ruby のバージョン管理をやりやすくしてくれるHomebrewのパッケージ

$ brew install postgresql
# PostgreSQLのサーバーを起動するためのHomebrewのパッケージ

$ brew install peco
$ brew install ghq
# この2つでcloneしたリポジトリの位置をわかりやすくしたり移動しやすくする

$ brew install git
# ファイルのバージョン管理をするもの

$ brew install redis
# データへの素早いアクセスができ、バックアップが取れる
```

# `.zshrc` を編集

ruby のバージョンを最新（必要なバージョン）にする。

```zsh
$ rbenv install 3.0.4（入れたいバージョン）
```

インストール時にドキュメントを生成しない設定を追加。

```zsh
$ touch ~/.gemrc
$ echo -e "install: --no-document" >> ~/.gemrc
$ echo -e "update: --no-document" >> ~/.gemrc
```

gem をインストール。

```zsh
$ gem i bundler
$ gem i nokogiri -- --use-system-libraries
$ gem i solargraph
```

## 最低限必要な `.zshrc` の設定

これは `.zshrc` に貼り付けるおまじないみたいなもの。

```zsh
export PATH="/opt/homebrew/bin:$PATH"
export PATH="$(brew --prefix openssl@1.1)/bin:$PATH"
export RUBY_CONFIGURE_OPTS="--with-openssl-dir=$(brew --prefix openssl@1.1)"
export PKG_CONFIG_PATH="/opt/homebrew/opt/libffi/lib/pkgconfig"
export PATH="$(brew --prefix openssl@1.1)/bin:$PATH"
export PATH="$(brew --prefix postgresql@11)/bin:$PATH"
eval "$(rbenv init -)"
```

## あると便利な `.zshrc` の設定

よく使うコマンドはショートカットコマンドを設定しておくと使いやすい。
例えば `alias gg='ghq get'` と書いてあったら、ターミナル上で `gg` と打てば `ghq get` というコマンドが使えるので、長いコマンドをいくつも覚える/打つ必要がなくなり、作業効率も上がる。

```zsh
alias gg='ghq get'
alias cp='cool-peco-ghq'
# ghqとcool-pecoを使ってclone先の管理とリポジトリ移動をやりやすくする

alias gm='git checkout main'
# mainというbranchを作る
alias gb='git checkout -b'
# このコマンドのあとに書いた名前のbranchを切って、そのbranchに移動
alias gs='git stash'
# ファイル変更の一時退避
alias ge='git commit --allow-empty -m'
# 空（変更がない状態で）のcommit
```
100日後くらいに個人開発するぞ！day054


## 今日はinitializeメソッドを学んでみた！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2632394/ad863e16-4090-5b40-0586-beb59f443f31.png)


## 今日の学び
### インスタンス生成時に値を代入する方法
* initializeメソッド
    * インスタンスを生成した直後に処理を実行することができる
    * 「クラス名.new」でインスタンスを生成した直後に自動で呼び出される
    * 使用例
        * `class Menu`
        * ` attr_accessor :name`
        * ` attr_accessor :price`
        * ` def initialize`
        * `  self.name = "寿司"`
        * `  self.price = 1000`
        * `  puts "#{self.name}は#{self.price}円です"`
        * ` end`
        * `end`
        * `menu1 = Menu.new`→initializeが呼び出されメソッド内の処理が実行される


### initializeメソッドの引数
* initializeメソッドは引数を渡すこともできる
* 「クラス.new」に対して引数を渡すことでinitializeメソッドにその値を渡すことができる
    * １つの引数を渡す場合
        * `class Menu`
        * ` attr_accessor :name`
        * ` def initialize(name)`
        * `  puts name`
        * ` end`
        * `end`
        * `menu1 = Menu.new("寿司")`→「寿司」と表示される
    * 複数の引数を渡す場合
        * `class Menu`
        * ` attr_accessor :name`
        * ` attr_accessor :price`
        * ` def initialize(name:,price:)`
        * ` self.name = name`
        * ` self.price = price`
        * ` end`
        * ` def info`
        * `  return "#{self.name}は#{self.price}円です"`
        * ` end`
        * `end`
        * `menu1 = Menu.new(name:"寿司",price:1000)`
        * `puts menu1.info`
gcc -D オプション

# gccのオプション -D
### マクロ定義ができるgccオプション -D
マクロ定義するときはソースファイルに直接記載する方法しか知らなかったが、
どうやらコマンドでマクロ定義をすることもできるということで調べた。

具体的には以下の通りである。

```hogehoge.cをGCCでコンパイルするコマンド
gcc -D DEBUG_DEFINITION = 1 -o hogehoge hogehoge.c
```
この場合だと、「DEBUG_DEFINITION」が「1」という数字として、マクロ定義されていることになる。

仮に
```hogehoge.c
#include<stdio.h>

int main(void){
#ifdef DEBUG_DEFINITION
  printf("hogehoge\n");
#endif

   return 0;
}
```
この場合、main関数を実行すると「hogehoge」が表示されるようになる。

makefileでコンパイルスイッチを切り替えできるため便利だと思った。
IntersectionObserverを使うときに、複数作っても大丈夫？と悩んだのでメモ

# observer　=　new IntersectionObserver はいくつも作れます！

コーディング練習でPhotoshopカンプからのコーディングを練習していたときに、
少し悩みました。
でも、よく考えたら、ふつうにつくれるでしょうということのような気もしますが、
ぼくの勉強も含めて記事にしようと思いました。

# やりたかったこと

１つのページの中で、交差オブザーバーを使って、以下の２つを付けたいと思いました。

- ある程度スクロールしてきたらヘッダー出現
- スクロールに合わせて、タイトルや画像が入ってくる、よくあるやつ

最初にヘッダーの出現をIntersectionObseverを使って実装していました。
その後、スクロールに合わせてのアニメーションはお手軽なAOSにしようとしました。
すると、まだきちんと確認していないのですが、競合してしまっているような感じがしました。
なので、すべてのアニメーションをIntersectionObseverを使おうとしました。

# ちがうアニメーションをつけたい。
ということで、オブザーバーのインスタンス（？）を２つ作りたいなと思ったのですが、
ふと、
「２つ作っても大丈夫なのか？」と
疑問に感じたので、調べてみようと思い立ったしだいです。


# 検索してみた

「IntersectionObsever　複数」などで検索すると
「複数要素を監視」の記事が多くて、Observerインスタンスを２つ作れるのか、
複数のインスタンスを作って、違うコールバック関数を使いたいという例が出てきません。

でも、よくよく考えてみれば、
インスタンスなのだから、いくつか作っても全くOKってあとで気づいた次第です。


# 解決して書いたコード

```javascript
// ヘッダーが現れるときのアクション
// これはある程度スクロールしたらクローンのヘッダーが上からスライドダウンしてくるアニメーションを付けています。
const options = {
  rootMargin: "80%",
  threshold: 1.0,
};
const headerObserver = new IntersectionObserver((entries) => {
  entries.forEach((e) => {
    if (!e.isIntersecting) {
      headerClone.classList.add("clone-open");
    }
    if (e.isIntersecting) {
      headerClone.classList.remove("clone-open");
    }
  });
}, options);
headerObserver.observe(mv);

// タイトルアニメーション
// これは各セクションのタイトルが見えたら、左からシュッと入ってくるアニメーション
const titleObserver = new IntersectionObserver((entries) => {
  entries.forEach((e) => {
    if (e.isIntersecting && !e.target.classList.contains('slideLeft')) {
      console.log(e.target);
      e.target.classList.add("slideLeft");
    }
  });
});
const animateTitles = document.querySelectorAll('.c-section__heading-block');
animateTitles.forEach((t)=>{
	titleObserver.observe(t);
})

// 画像のアニメーション
// いくつかの画像に下からシュッと出現するアニメーション
const imageObserver = new IntersectionObserver((entries)=>{
	entries.forEach((e)=>{
		if (e.isIntersecting && !e.target.classList.contains('fadeUp')) {
      console.log(e.target);
      e.target.classList.add("fadeUp");
    }
	})
})
const animateImages = document.querySelectorAll('.js-animate-image');
animateImages.forEach((t)=>{
	console.log(t.target);
	imageObserver.observe(t);
})

```

# 今後のこと
パフォーマンス的にどうなのだろうかというところは今後の課題。
Obseverインスタンスを１つにして、
その中のコールバック関数で、
要素の種類に応じて、違うアニメーションをつけるとかいう方法もあるのだろうか、
とかぼんやり考えています。
【C++】基礎を学ぶ⑮～構造体～

# 構造体
**構造体**とは、新しいデータ型を作るための仕組み
**複数の型をまとめた新しい型**を定義することができる

## 構造体の構文

### 構造体の定義
`struct`を使う
```cpp
struct 構造体名 {
  型1 メンバ変数名1
  型2 メンバ変数名2
  型3 メンバ変数名3
  ...(必要な分だけ書く)
};
```
### 構造体の宣言
```cpp
構造体名 オブジェクト名;
```

### メンバ変数へのアクセス
```cpp
オブジェクト.メンバ変数;
```
### 構造体の宣言と初期化を同時に行う
```cpp
構造体名 オブジェクト名 = {メンバ変数1の値, メンバ変数2の値, メンバ変数3の値, ...(必要な分だけ書く)};
```

### 構造体を用いたプログラム
```cpp
#include <iostream>
using namespace std;
 
struct MyPair {
  int x;
  string y;
};
 
int main() {
  MyPair p = {12345, "hello"};
  cout << p.x << endl;
  cout << p.y << endl;
}
```
```
12345
hello
```

## メンバ関数
**メンバ関数**とは、構造体でメンバ変数に対して処理を行う関数のこと
### メンバ関数の定義
```cpp
struct 構造体名 {
  返り値の型 メンバ関数名(引数の型1 引数名1, 引数の型2 引数名2, ...) {
    // 関数の内容
    //   (ここではメンバ変数に直接アクセスすることができる)
  }
};
```
### メンバ関数の呼び出し
```
オブジェクト.メンバ関数(引数1, 引数2, ...)
```
### メンバ関数を用いたプログラム
```cpp
#include <iostream>
using namespace std;
 
struct MyPair {
  int x;
  string y;
  // メンバ関数
  void print() {
    cout << x << endl;
    cout << y << endl;
  }
};
 
int main() {
  MyPair p = { 12345, "Hello" };
  p.print();
 
  MyPair q = { 67890, "World" };
  q.print();
}
```
```
12345
Hello
67890
World
```

## 次の記事
[【C++】基礎を学ぶ⑯～クラス～](https://qiita.com/rapirapi/items/4e466ad0c9fba85f5c26)
横持ちを縦持ち/トランザクション形式へ復元する(SPSS Modeler データ加工逆引き7-5)

# 横持ちを縦持ち/トランザクション形式へ復元（行列入替）

![スクリーンショット 2022-07-08 11.30.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/e8cac3c1-5599-6117-9210-628ed0c3d0c7.png)

## 1.想定される利用目的

・トランザクション形式を要求するシーケンスモデル（時系列アソシエーション）の準備
・テーブルを追加するための前処理

## 2.サンプルストリームのダウンロード

https://github.com/yoichiro0903n/blue/blob/main/field2record.str?raw=true

## 3.サンプルストリームの説明

![スクリーンショット 2022-07-08 11.30.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/411a3dfb-b5fe-2af0-3d08-46c3abc2fc21.png)

a.入力するデータは以下の通りです。
![スクリーンショット 2022-07-08 11.25.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/890168f8-b73f-dc77-4ae6-714bd2f12d72.png)

b.[行列入替]ノードを編集します。[行列入替方法]を[フールドをレコードへ]にします。
![スクリーンショット 2022-07-08 11.37.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/c1f970ea-0dcc-67ca-7d99-f753d7ded358.png)

[プレビュー]します。
![スクリーンショット 2022-07-08 11.37.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/bb970017-8b93-5ab0-8a78-712ccb615eae.png)

c.[ソート]ノードを編集してIDを昇順に並び替えます。
![スクリーンショット 2022-07-08 11.37.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/ec478662-77c9-0f5e-48c3-94b6a49e7be0.png)

[テーブル]を実行します。
![スクリーンショット 2022-07-08 11.37.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/398b6272-d5d5-59ab-219e-bd41151c3c27.png)

#### [行列入替]ノードで逆の処理を行う
処理速度を考慮すると[再構成]を利用する方法がおすすめです。

https://qiita.com/416nishimaki/items/2519553c7cce0fc0b0e0

d.入力するデータは以下の通りです。
![スクリーンショット 2022-07-08 11.37.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/02af0917-9223-08e4-39cd-c8a41005b3d0.png)


e.[行列入替]ノードを編集します。[行列入替方法]を[レコードからフィールドへ]にします。
![スクリーンショット 2022-07-08 11.38.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/beec581c-7544-2486-8715-67d3e19c1a5e.png)

[プレビュー]します。値が実数なので変更します。
![スクリーンショット 2022-07-08 11.38.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/4f5398c6-3fa0-ebe8-7471-06bff467e7d6.png)

f.[置換]ノードを編集します。@&#xFFF0;FIELDはワイルドカードです。同時に3つのフィールド（列）を指定可能です。
![スクリーンショット 2022-07-08 11.38.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/33be042e-1e15-c959-310b-e8c6346431f6.png)

[テーブル]を実行します。
![スクリーンショット 2022-07-08 11.38.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/334a9be0-2185-2363-492b-4c1e64d09810.png)

#### 注意事項

cからeに接続して実行する場合には事前に[データ型]ノードを配置して[値の読み込み]を行う必要があります。

![スクリーンショット 2022-07-08 12.01.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/423ef7c6-c546-c54e-26b0-8a2e3568d57d.png)


## 4.参考情報

#### 横持ちを縦持ちにする解説記事

https://qiita.com/kawada2017/items/41484aece5a62f463a95

#### シーケンスを解説する記事

https://qiita.com/416nishimaki/items/5d28d0819f17335669c2

#### SPSS Modeler ノードリファレンス目次

https://qiita.com/416nishimaki/private/503037195081d3323eee

#### SPSS Modeler 逆引きストリーム集（データ加工）

https://qiita.com/416nishimaki/private/4bf813e6cba84b2a1008
【Next.js】なぜLinkでaタグを使うのか

# 疑問
Next.jsでなぜLink作成時にaタグが必要なのか。
以下のコードは両方とも動作するが無駄のように見える。
```Typescript
<Link href="/"><a>Back to home</a></Link>
```
```Typescript
<Link href="/">Back to home</Link>
```

# 答え
レンダリングされたhtmlに適切なセマンティクスが与えられるらしい。
セマンティクスが無いとSEOに悪影響を及ぼすし、アクセシビリティも悪くなる。
これについては以下のドキュメント参照。
https://nextjs.org/docs/api-reference/next/link#if-the-child-is-a-custom-component-that-wraps-an-a-tag

> Linkの子コンポーネントがタグをラップするカスタムコンポーネントである場合、LinkにpassHrefを追加する必要があります。これはstyled-componentsのようなライブラリを使っている場合に必要なものです。これがないと、タグにhref属性が付かないので、サイトのSEOに悪影響が出るかもしれません。

あと、Next.js公式コードのaタグを挿入するコード部分に以下のコメントがあった。
https://github.com/vercel/next.js/blob/af3315b14d2704a58edffbf8c0c7cf4de9b44380/packages/next/client/link.tsx#L230
```Typescript
  // Deprecated. Warning shown by propType check. If the children provided is a string (<Link>example</Link>) we wrap it in an <a> tag
  if (typeof children === 'string') {
    children = <a>{children}</a>
  }
```

> 非推奨。propTypeチェックで表示される警告。子要素が文字列の場合（`<Link>example</Link>`）は、`<a>`タグで囲みます。

非推奨であり今後なくなる可能性があるらしい。

# まとめ
書かなくてよいなら便利だと思ったけど色々問題があるようなのでこれからは書く！
クイックアクションでメール送信する


# クイックアクションでメール送信する時の本文

本文(Body)はテキストメールとHTMLメールが選択できますが、LighningではHTMLメールを使う必要がありそうです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/2d79e748-fe1a-b917-ac79-2186ed62013e.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/75aaa284-e6e5-efb7-13e2-cc51ea67eaf3.png)


元の質問 : [メール送信用のカスタムボタンの本文に、「ボタン、リンク、およびアクション」で定義した情報が入らない](https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000IQY8t)

[Send email no break new line](https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000IQY7b)


# カスタムオブジェクトからメールを送信するときにデフォルトで送信先を指定する

+ ["メール送信"ボタンの宛先について](https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000NGMG1)

カスタムオブジェクトでメールを送信するクイックアクションを作ります。
送信先をデフォルト値としてカスタムオブジェクトのレコードにあるメールアドレスにすれば希望の動作が実現できると思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/a9bb8441-fc7e-e5e2-f86b-be44abf925e8.png)


以下、活動タイムラインの設定して、活動コンポーネントを配置するとでてきました。

https://help.salesforce.com/s/articleView?id=000382953&type=1
iOS16から使えるPhotosPicker


## まえがき

PhotoPicker周りはiOS15まではUIKitを使って実装していましたが、
iOS16からSwiftUIでPhotoPickerが使えるようになるみたいなので、調べてみました。

## 使い方

PhotoPickerで選んだものがPhotosPickerItemとして渡ってくる。

``` swift
PhotosPicker(selection: $photosModel.selectedPhoto, matching: .any(of: [.images])
                    ,photoLibrary: .shared()) {
        Image(systemName: "photo.fill")
    }
)
                
```

enum ImageStateはロードするメディアの状態を管理するためのもの。
今回のケースでは PhotosPickerで渡してもらうのは .images　画像のみとなっています。

例えば、
iCloud上にあるものはダウンロードしないといけないときに loading
オフライン状態になっているとError に入るようになっています。

``` swift
class PhotosPickerModel: ObservableObject {
    @Published private(set) var imageState: ImageState = .empty

    enum ImageState {
        case empty
        case loading(Progress)
        case success(Image)
        case failure(Error)
    }

    @Published var selectedPhoto: PhotosPickerItem? {
        didSet{
            if let selectedPhoto {
                let progress = loadTransfereble(photo: selectedPhoto)
                imageState = .loading(progress)
            } else {
                imageState = .empty
            }
        }
    }
}
```

渡ってきたPhotosPickerItemをImageに変換する処理

``` swift

struct MediaFile: Identifiable {
    var id: String = UUID().uuidString
    var image: Image
    var data: Data
}
func loadTransfereble(photo: PhotosPickerItem) -> Progress {
    photo.loadTransferable(type: Data.self) { result in
        DispatchQueue.main.async {
            switch result {
            case .success(let data):
                if let data, let image = UIImage(data: data){
                    self.loadedImages.append(.init(image: Image(uiImage: image), data: data))
                }
            case .failure(let failure):
                print(failure)
            }
        }
    }
}
```

## あとがき

すごくかんたんに使えますね、
UIKitの出番がどんどん減っているのが嬉しいです。

## 参考

https://developer.apple.com/videos/play/wwdc2022/10023/
https://www.youtube.com/watch?v=YCZ2JxqKaiA
システムエンジニア1年目がやるべきこと！

# はじめに
この記事は[**YouTube**「システムエンジニア(SE)1年目がやるべきこと！」](https://www.youtube.com/watch?v=Kgwqy0dU6sA&t=48s)の要約です

## 「システムエンジニア1年目がやるべきこと！」を動画で見る
<iframe width="560" height="315" src="https://www.youtube.com/embed/Kgwqy0dU6sA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

# 要約

### 読者対象
* 若手SE（1～3年目くらい）
* SEになろうと思っている人

### 注意
あくまで**個人的な意見**なので、自分に合わなそうなものはやらなくてよいと思います

## SEがやるべきこと3選とその説明
### 1. 毎日プログラミングをする
* プログラミングの知識は、実装工程以外にも役に立つ
* 単純作業はプログラミングで自動化できる
* 毎日やることでどんどん楽しくなる
### 2. 優秀な人と関わる
* 優秀な人のスキル・考え方を吸収していく
* 優秀な人の具体的
    * 研修の成績が良い同期
    * 尊敬する先輩や上司
    * 社外の凄腕エンジニア
### 3. 周辺機器を揃える
買った方がよいもの
* モニター
* サイドボタン付きのマウス
* キーボード
### 番外編
* 資格を取る
* 会社の近くに住む
* ハッカソンやプロコンに出る
【IIS】IISと通信プロトコルについてちょっと詳しくなる記事



### 1.背景

会社でASPを使用しており、自宅でもASPを使用できるように環境構築をしたいと考えました。
ASPはIISの拡張機能の一つなので、IISについてまとめたいと思います。
※HTTPなどの通信プロトコルについてもまとめたので、本記事で「ちょっと詳しくなる」を目的としています。


### 2.IISとは

**Internet Information Services**（**IIS**）は、Microsoft Windowsの標準Webサーバー（アプリケーションサーバー）サービスです。
HTTP/HTTPS、FTP、SMTP、NNTP等の基本的なプロトコルはサポートしています。
※SMTPサーバ機能はIIS 7.0より削除されたので、現在は簡易なメールサーバを構築することができなくなっています。

#### 各プロトコルについて
- HTTP：**「Hyper Text Transfer Protocol（ハイパーテキスト・トランスファー・プロトコル）」** の略。
ホームページ（Webサイト）を環境に依らず問題なく表示するための、通信プロトコル（Protocol：通信規約・決まりごと）のことです。

- HTTPS：**「Hypertext Transfer Protocol Secure（ハイパーテキスト・トランスファー・プロトコル・セキュア）」** の略。
SSL（暗号化通信）によってセキュリティを高めたhttpのことです。
httpsにすることで、通信経路での第三者による情報の盗聴や改ざんのリスクを防止できます。

- FTP：**「File Transfer Protocol（ファイル・トランスファー・プロトコル）」** の略。
Webサイトを公開するためには、あらかじめ作成した文章や画像などの各種ファイルをWebサーバー上に転送、つまりアップロードする必要があります。
ネットワーク上でファイルを送受信する際に使用する通信プロトコルの一種です。

- SMTP：**「Simple Mail Transfer Protocol（シンプル・メール・トランスファー・プロトコル）」** の略。
インターネットなどのTCP / IPネットワークで標準的に用いられる、メールを送信するための通信プロトコルの一種です。
手紙を例にすると、ポストに投函（とうかん）され、郵便局で宛先別に振り分けられ、相手の最寄りの郵便局へ届けられます。

- NNTP：**「Network News Transfer Protocol（ネットワーク・ニュース・トランスファー・プロトコル）」** の略。
インターネット上のネットニュースにアクセスするための通信プロトコルの一種です。
ニュースリーダからネットニュースサーバに接続するのに使われ、購読、投稿をすることができます。


### 3.使用方法

インストールした時点でIISの仕事は始まっており、指定されたフォルダにhtmlテキストを保存し、設定することでwebページの公開が可能になります。
※IISのインストールについては別の記事でまとめようと思います。


### 4.シェア率

2022/7/11時点で6.0%（第5位）でした。
Nginxが33.7%、Apacheが31.4%です。


### 5.特徴

- Microsoft製品（Windows OS、SQL Server等）との高い親和性
- Microsoftの開発プラットフォーム(ASP.NETや.Net Frameworkなど)で開発したものが動作する
- 馴染みのあるWindowsのGUI（グラフィカルユーザーインターフェース）での操作のしやすさがある
- Microsoftが提供する、クラウドサービスのMicrosoft Azureで利用できる
- linuxにインストールできない
- 同時接続数に制限がある


### 6.まとめ

今回はIISについて、基本的なところとシェア率などをまとめてみました。
公式リファレンス等に目を通してまとめることで整理できました。


### 7.参考

1.[Internet Information Services](https://ja.wikipedia.org/wiki/Internet_Information_Services)
2.[httpsとは？　httpとのちがいやセキュリティ上の意味を初心者向けに解説！](https://ds-b.jp/media/what-is-https/)
3.[【入門】FTPとは？通信の仕組みやソフトについてわかりやすく解説！](https://www.kagoya.jp/howto/it-glossary/web/ftp/)
4.[SMTP](https://www.otsuka-shokai.co.jp/words/smtp.html)
5.[NNTPとは](https://www.designet.co.jp/faq/term/?id=Tk5UUA)
6.[Historical trends in the usage statistics of web servers](https://w3techs.com/technologies/history_overview/web_server)
7.[IISとは。MicrosoftのWebサーバーソフトを徹底解説！](https://www.winserver.ne.jp/column/about_iis/)


### 8.最後に

記事の感想や意見、ご指摘等あれば伝えていただけるとありがたいです。
読んでいただき、ありがとうございました。
【Rubocop】.rubocop.yml設定例【Rails】

## .rubocop.yml設定例
```.rubocop.yml
require:
  - rubocop-performance
  - rubocop-rails
  - rubocop-rspec

AllCops:
  NewCops: enable

Layout/EmptyLinesAroundAccessModifier:
  EnforcedStyle: only_before

Layout/IndentationConsistency:
  EnforcedStyle: indented_internal_methods

Layout/LineLength:
  Max: 80

Style/AsciiComments:
  Enabled: false

Style/Documentation:
  Enabled: false

Style/FrozenStringLiteralComment:
  Enabled: false

Style/StringLiterals:
  EnforcedStyle: double_quotes
```

## 各項目のドキュメント
- [Layout/EmptyLinesAroundAccessModifier](https://docs.rubocop.org/rubocop/cops_layout.html#layoutemptylinesaroundaccessmodifier)
- [Layout/IndentationConsistency](https://docs.rubocop.org/rubocop/cops_layout.html#layoutindentationconsistency)
- [Layout/LineLength](https://docs.rubocop.org/rubocop/cops_layout.html#layoutlinelength)
- [Style/AsciiComments](https://docs.rubocop.org/rubocop/cops_style.html#styleasciicomments)
- [Style/Documentation](https://docs.rubocop.org/rubocop/cops_style.html#styledocumentation)
- [Style/FrozenStringLiteralComment](https://docs.rubocop.org/rubocop/cops_style.html#stylefrozenstringliteralcomment)
- [Style/StringLiterals](https://docs.rubocop.org/rubocop/cops_style.html#stylestringliterals)
RaspberrypiのBluetoothアドレスを取得する

# Pythonを用いてBLEアドレスを取得する
海外サイト等を参考にどうやるのか探してみたが，2系での表示方法しかなかったので，3系にしたコードを記録する．

```python
import subprocess
status, output = subprocess.getstatusoutput('hciconfig')
output = output.split('hci0:')[1].split('BD Address: ')[1].split(' ')[0]
print(output)
```
2022/7/12主にITとかセキュリティの記事

「Amazonプライムデー」に便乗、フィッシング攻撃増加 - 関連ドメイン取得の動きも
https://www.security-next.com/138061

スニーカー通販サイト、顧客情報流出の可能性 - リニューアル前の被害が判明
https://www.security-next.com/138027

決済会社にサイバー攻撃、影響受けた可能性 - フランス文化センター
https://www.security-next.com/138035

今の日本はサイバー攻撃の絶好の対象、緊急・大量に必要な「デジタル戦士」はこうやって集めろ(7/10)
https://gendai.ismedia.jp/articles/-/97202

強奪した暗号資産は20億ドル超え？　北朝鮮のハッカー集団「ラザルスグループ」とは(7/10)
https://the-owner.jp/archives/9777

npmに暗号資産マイニング仕掛ける大規模キャンペーン発見、確認を(7/10)
https://news.mynavi.jp/techplus/article/20220710-2394061/

ドローンに使われるプロトコルに脆弱性、ドローンが乗っ取られる恐れ(7/10)
https://gunosy.com/articles/a8PYB
	
iPhoneやAndroidスマホでGmailのアドレスを変更できるか確認する方法(7/10)
https://gunosy.com/articles/eHXtR

「信頼・透明性・誠実」うたう富士通のパーパス経営、ProjectWEB問題と向き合えるか(7/11)
https://xtech.nikkei.com/atcl/nxt/column/18/02114/070800006/

サイバー攻撃を検知・分析、専門組織「SOC」の舞台裏(7/11)
https://xtech.nikkei.com/atcl/nxt/column/18/02110/062200005/

「4つの6Gユースケースを研究中」、エリクソンとNext G Allianceの共同報告(7/11)
https://xtech.nikkei.com/atcl/nxt/news/18/13264/
【Meta for Developers】Instagramの投稿データを取得する際につまづいたこと

[グラフAPIエクスプローラー](https://developers.facebook.com/tools/explorer?locale=ja_JP) を用いてInstagramの投稿データを取得する際に四苦八苦したのでメモ.

# 【参考】投稿をWebに載せるまでの手順
こちらの記事を参考に進めました.

https://engineering.webstudio168.jp/2022/02/2022-instagram-api-js/#toc1

# その１：３回目のトークン取得の際に何も表示されない
3回目のトークン(無期限トークン)取得時に下の空データが返ってきました.
```
{
   "data": [
   ]
}
```
これはどうやら**Facebookページを作ってなかった**ことが原因のよう. 
Facebookアカウントではありません, **Facebookページ**です (画像のようなページ, ややこしい...)
![スクリーンショット 2022-07-12 024229.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1483756/e08ddfb7-df22-8bca-92ce-92a6c3f95bf4.png "Facebookページ")
Facebookページを作成してInstagramアカウントと紐づけることで解決しました.

# その２： me?/fields=instagram_business_account でエラー
instagram_business_account のIDを取得する (グラフAPIエクスプローラーの入力フォームを ``me?/fields=instagram_business_account`` とした) 際にエラーが発生.
```
{
  "error": {
    "message": "(#100) Tried accessing nonexisting field (instagram_business_account) on node type (User)",
    "type": "OAuthException",
    "code": 100,
    "fbtrace_id": *****
  }
}
```
これは「グラフAPIエクスプローラー」->「ユーザーまたはページ」の欄を "ユーザートークン" からアクセストークンを取得したいアプリ名に変更することで解決しました.
![スクリーンショット 2022-07-12 030533.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1483756/33cca302-c8f0-6ec2-d1cd-7c58c1962b51.png)

# 今後に向けて
投稿データのJSONファイルを出力したのち, iframeでWeb上に表示する仕組みを作っていきます.
また, InstagramのAPIに関する新たなエラーが発生した際は, ここに追記していきます.
無料でJavaScriptを学べるサイト

# 無料でJavaScriptを学べる「javascripttutorial.net」

プログラミングの学習をしていて出会ったサイトがあります。
それが「**javascrittutorial.net**」というサイトです。

https://www.javascripttutorial.net/

ほとんどの内容が網羅されている海外のサイトになります。

すべて英語表記なので、苦手な方はとっつきずらいかもしれませんが、
このサイトをみながら英語読解にも慣れていこうという勢いでぜひ見てみてください（笑）

ちなみに
- **ES6(ES2015)以降の内容**
- **JS BOM / JS DOM**
- **WEB API**

などなどの内容が載せられています！

# まだまだあった！
JavaScriptだけではなく、他にも言語別でサイトがありました！
どちらも「javascripttutorial.net」の姉妹サイトです。

## Pythonが学べる「pythontutorial.net」


https://www.pythontutorial.net/

## TypeScriptが学べる「typescripttutorial.net」

https://www.typescripttutorial.net/

## PHPが学べる「phptutorial.net」

https://www.phptutorial.net/

## C#が学べる「csharptutorial.net」

https://www.csharptutorial.net/

# まとめ
今後もこのようなサイトを見つけたら、更新していこうと思います！

ぜひ、参考にして学習を進めてみてください！
styled-componentsで独自コンポーネントにスタイルを当てるときはclassNameプロパティが必要です。

# はじめに
[リファレンスの該当箇所](https://styled-components.com/docs/basics#:~:text=for%20future%20deprecation.-,Styling,-any%20component)に記載があります。

# 例えば
親コンポーネント（`Index`）で子コンポーネント（`Typography`）のスタイルを一部上書きしたい時
```react:index.tsx
import React from "react";
import styled from 'styled-components';
import Typography from "./typography";

const ExtendTypo = styled(Typography)`
    font-size: 3rem
`

const Index: React.FC = () => {
    return (
        <>
            <Typography>ベースのfont-sizeは1rem</Typography>
            <ExtendTypo>これはfont-sizeが3remになるはず</ExtendTypo>
        </>
    );
};

export default Index;
```

## うまくいかない例
```react:typography.tsx
import React, { ReactNode } from 'react';
import styled from 'styled-components';

const StyledParagraph = styled.p`
    font-size: 1rem;
    margin: 0;
    line-height: 1.5;
`

type Props = {
    children: ReactNode
}

const Typography:React.FC<Props> = ({children}) => {
    return (
        <StyledParagraph>
            {children}
        </StyledParagraph>
    )
}

export default Typography;
```
![スクリーンショット 2022-07-12 3.22.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1153569/96104ac1-225f-0042-78c3-bc2ba0b153dd.png)

## これでいける
子コンポーネントにclassNameプロパティを追加する
```react:typography.tsx
import styled from 'styled-components';

const StyledParagraph = styled.p`
    font-size: 1rem;
    margin: 0;
    line-height: 1.5;
`

type Props = {
    children: ReactNode
    className?:string
}

const Typography:React.FC<Props> = ({children,className}) => {
    return (
        <StyledParagraph className={className}>
            {children}
        </StyledParagraph>
    )
}

export default Typography;
```
![スクリーンショット 2022-07-12 3.23.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1153569/3cb13d84-7ea0-faae-1ebf-bc61d3b2be91.png)
Supabaseの認証であるsupabase-auth-helpers から auth-helpers は何が変わったのか？

2022年の6月にsupabaseの認証がsupabase-auth-helpers から auth-helpers に変更されました。

https://supabase.com/blog/2022/07/05/beta-update-june-2022

結論から書くと
supabase-auth-helpersは全部入りの認証ライブラリ。
auth-helpers は個別の認証ライブラリです。

```
import { UserProvider } from '@supabase/supabase-auth-helpers/react';
import { supabaseClient } from '@supabase/supabase-auth-helpers/nextjs';

```

と、このように前者はreactとnextjsが一緒に入っています。
それを切り分けたのが後者のauth-helpersです。

```
import { UserProvider } from @supabase/auth-helpers-react
import { supabaseClient } from @supabase/auth-helpers-nextjs

```

各フレームワークのライブラリを全部一緒に入れていたのが前者、各フレームワークごとに独立させたのが後者。
React
Next.js
Sveltekit
Remix
今ではこの数だけが対応していますが、これから対応するフレームワークを増やしていくためにライブラリの肥大を避けるため分割したのではないかと思われます。
Python3エンジニア認定基礎模試試験4回目　-間違えた問題-

<H1>獲得点数　925/1000点</H1>
<H2>正答率: 92.5 % ( 37問 / 40問 正解 )</H2>

```python
以下のプログラムをインタプリタにて実行した際の出力結果を選びなさい
(x, y) for x in [0,1,2] for y in [1,2,3] if x != y

A,[(0, 1), (0, 2), (0, 3), (1, 2), (1, 3), (2, 1), (2, 3)]
#forが入れ子になっている
```
react-firebaseuiのEmail認証でユーザー登録させない方法

## modバージョン
```json
    "react-firebaseui": "^6.0.0",
    "react": "^17.0.2",
```

## サンプル
Configのoptionを作ってあげればいいけど、型情報が取れなかったのでanyを使用する

```tsx
import StyledFirebaseAuth from "react-firebaseui/StyledFirebaseAuth";

const disableSignUp: any = {
  status: true,
};

const option: any = {
  provider: provider.providerId,
  disableSignUp: disableSignUp,
};

const uiConfig: firebaseui.auth.Config = {
  signInFlow: "popup",
function.
  signInSuccessUrl: "/home",
  signInOptions: [option],
};

export const Login: VFC = memo(() => {
  return (
    <div>
      <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={auth} />
    </div>
  );
});

```
## 型情報がどうしても取れなかった
EmailSignInOptionとDisableSignUpConfigがexportされてなくて参照できなかった…
いいやり方あれば教えてください。
Scaling Salesforce In-Memory Streaming Analytics Platform for Trillion Events Per Day 

# はじめに
2022/6/27（月）～2022/6/30（木）の4日間、サンフランシスコと Web 会場でData+AI Summit 2022が開催されました！
Data＋AI Summit 2022 で発表された Databricks 最新情報をお知らせします。

■公式URL
https://databricks.com/jp/dataaisummit/

■現地の様子
![IMG_9182.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1091796/675adb3b-5a80-7a7f-d57e-161910d94c45.jpeg)
![IMG_9102.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1091796/66b26680-3f93-7b76-3642-dc51a062dcae.jpeg)


# Data＋AI Summit 2022 とは？
Databricksは、データ収集、加工、AI・データ分析、可視化までクラウド上でのデータ利活用に必要なあらゆる機能を備えたデータ分析統合プラットフォームを提供する会社です。
そのDatabricks 社が主催する世界最大規模のデータ＆AIのカンファレンスである、Data＋AI Summit 2022が開催されました！
今年は、Databricks のユースケースや、事例、新機能などに関する情報が発表されています。

ログインページは下記になります。
https://dataaisummit.com/login/
※メールアドレスの登録が必要です

本記事では、その中の「※セッション名」のセッションについて翻訳、解説したいと思います。

# セッション名 概要
Data＋AI Summit 2022 セッション名 の内容を翻訳し、まとめました。
要約した内容は以下になります。
- Salesforce 概要
- Databricks 導入前の問題点
- Databricks で解決できたこと

# セッション名 詳細
## Salesforce 概要
まず初めに、SalesforceはクラウドベースのCRMプラットフォームであり、世界中の企業が非常に新しい方法で顧客に製品を販売、サービス、マーケティングすることを可能にします。そして最近、SlackやTableauによって、よりデータカンパニーらしくなり、よりリッチなコラボレーションツールを顧客に提供できるようになりました。

## やりたいこと
そこでSalesforceでは、次世代のデータプラットフォームを構築しており、これをUnified Intelligence Platformと呼んでいます。UIPは、Salesforceの全チームが利用できるワンストップデスティネーションです。つまり、Salesforceの内部データ・プラットフォームであり、Salesforceの全ビジネス・チームがこのプラットフォームにアクセスしてデータセットにアクセスし、自分たちを理解することができます。

## Databricks 導入前の問題点

## Databricks で解決できたこと

# セッション名 まとめ


# Data＋AI Summit 2022　最新情報更新中！
■Data＋AI Summit 2022ナレコム特設サイト
https://www.knowledgecommunication.jp/product/DataAISummit2022.html
Databricks導入ご相談申し込み受付中

Twitterではナレコム最新情報を更新中です。
https://twitter.com/KnowComInc
bokeh: 折れ線の円形マーカーを表示/非表示切り替える

# 環境
* Python 3.12.1
* bokeh 3.4.1

# やりたいこと
Pythonの[bokeh](https://bokeh.org/)ライブラリを使って、以下のようなコードで、円形のマーカー付き折れ線グラフを作成しています。

```python
import bokeh
from bokeh.plotting import figure, output_file, save

output_file("graph.html")

x = [1, 2, 3, 4, 5]
y = [6, 7, 2, 4, 5]

fig = figure(x_axis_label="x", y_axis_label="y")

fig.line(x, y)
fig.scatter(x, y)

save(fig)
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37903/4235a432-334e-ef05-9131-d62f134500ae.png)

# やりたいこと
プロット数が多くなると、マーカーが邪魔になる場合があります。
そこで、チェックボックスを使ってマーカーの表示/非表示を切り替えられるようにします。

# 解決方法
`circle`関数の戻り値に対して、`glyph.radius`を`0`にすれば、円形は表示されなくなります。

```python
import bokeh
from bokeh.plotting import figure, output_file, save
from bokeh.models import CustomJS, CheckboxGroup, GlyphRenderer


def create_checkbox(scatter: GlyphRenderer) -> CheckboxGroup:
    checkbox_group = CheckboxGroup(labels=["折れ線のマーカーを表示する"], active=[0])
    args = {"scatter": scatter}
    code = """
        let size = ( "0" in this.active) ? 4 : 0
        scatter.glyph.size = size
    """
    checkbox_group.js_on_change("active", CustomJS(code=code, args=args))
    return checkbox_group


output_file("graph.html")

x = [1, 2, 3, 4, 5]
y = [6, 7, 2, 4, 5]

fig = figure(x_axis_label="x", y_axis_label="y")

fig.line(x, y)
scatter = fig.scatter(x, y, size=4)
checkbox = create_checkbox(scatter)
save([fig, checkbox])

```


![マーカー表示非表示.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37903/a5ceda55-bfd7-c2e8-1f3a-911c36b679a1.gif)
【UiPath】Robot(UR)を共有して複数のユーザーがAssistantを利用する（ユーザー編）

この記事はUiPathブログ発信チャレンジ2022サマーの12日目の記事です。
昨日は[@cheez_RPA](https://twitter.com/cheez_RPA)さんの[記事](https://note.com/ryosukeiwasaki/n/n7ac64d40f8ae)、明日は[@kou12092](https://twitter.com/kou12092)さんの記事です。


# はじめに
メッセージボックス等を利用した対話型のプロセスをAssistantで利用したいが、Robotは、たまに実行するだけ。加えて、いつも実行する人が不在の場合は極たまに代理者で実行する必要もある。そして、このケースでの利用者が非常に多いと言った場合のご紹介です。
ユーザに紐付かないUnattended Robotがあれば、ユーザライセンス持ってない複数のユーザーがOrchestratorから手動実行できるのは、みなさんご存じですよね。しかしながら、Assistantで起動する対話型のプロセスを手元で動かすこともできると言うことと、その設定方法・利用方法は、あまり知られていないので、ブログを書くことにしました。

尚、Orchestrator側の設定を行う管理者側の記事と、Assistantを利用するユーザー側の記事の２部構成となっています。Orchestrator側の設定についての記事は、こちらです。

https://qiita.com/Jun96427231/items/1a565f88eb91aa6d0ffd

## 前提条件
※この利用方法は2022年7月時点のものです。将来を約束するものではありません。
※2022年7月時点のAutomation Cloud-Orchestratorの設定方法で記載します。
※UiPath Assistantはv2022.4.3の設定方法で記載します。
※必須でない手順（設定）もありますが、一例として見てください。

## 1.前準備
①Automattion Cloudからの招待を承諾。
②Automattion Cloudに参加し、Orchestratorの利用するテナントに一度入る。
③利用者の個々の端末もしくは共有PCにAttended Robotをインストールする。

## 2.Orchestratorと接続する
Orchestrator設定編で作成されたマシンテンプレートのマシンキーで接続する。
成功すると、接続済み、ライセンス済みとなる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639319/0bc5b652-5c05-4de5-7480-f948fd2b8e03.png)

## 3.他のユーザーが利用中の場合
他のユーザーが利用中の場合はライセンスを取得できないため、利用できません。
利用中のユーザーがAssistantの切断をクリックし、Orchestratorと切断するかログアウトすると利用できる様になります。利用が終わったら切断するルールの取り決め等を推奨します。

## 4.誰が利用中か確認する場合
長時間ライセンスが解放されない場合は、だれが占有しているか気になるところです。その場合は、Orchestratorで、だれが現在占有しているか確認できます。

テナント＞ライセンス＞Production (Unattended)の詳細を確認

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639319/bc6bc373-8caa-0d16-c628-dd7e0ab71e3d.png)

# 終わりに
以上、Unattended Robotを利用して、コンカレント的な利用方法を解説しました。
Unattended Robotは、無人ロボットとしての使い方が、最も効果的ですが、ユーザーライセンスを持ってない人が一時的にUnattended Robotを使い、Assistantで代理実行すると言った場面だけでも活用シーンがありそうです。
尚、Orchestratorからの実行と異なり、ジョブを溜めておけないのはデメリットとも言えますが、ユーザーの使い方は、様々なので、知っておいても損はないと思います！
【Swift】@discardableResult

# ＠discardableResult
＠discardableResultとは返り値を気にしなくなるアノテーションです。
以下のように＠discardableResultを付与した関数は値を返しているのも関わらず、警告が出ません。
必ずしも返り値を返す必要のない関数などを使用したいときには、このアノテーションを使い警告を消して利用しましょう。

```swift
@discardableResult
func double(num: Int) -> {
    return test * 2
}

func half(num: Int) -> {
    return test / 2
}

double(2) // 警告が出ない

half(4)   // 警告が出る
```
RailsでActive Hashを使ってカテゴリを作る

RailsでActive Hashを使ってカテゴリを作る方法を紹介します。

こちらの記事
https://qiita.com/satoka_com/items/183d22541c3a54e0d878
を参考にしました。

最初にGemfileに、
```
gem 'active_hash'
```
を記載して、
```
$ bundle install
```
します。

自分の場合だとrecruitmentモデル（求人ページ）にカテゴリを持たせたいと考えているので、
そこにActive Hashを使ってカテゴリを作っていきます。


最初にJobategoryモデルを作成します。
```Ruby
#job_category.rb
class Jobcategory < ActiveHash::Base
  self.data = [
  { id: 1, name: 'サンプル' }, { id: 2, name: 'サンプル2' },  { id: 3, name: 'サンプル3' }
  ]

include ActiveHash::Associations
has_many :recruitments

end
```

今回の場合だとjobcategoryがrecuirtmentに付くのは一つですが、
recruitmentは複数存在するので、has_manyとなります。
そして、recruitmentモデルにも記載していきます。

```Ruby
#recruitment.rb
class Recruitment < ApplicationRecord
  has_rich_text :content
  has_one_attached :image

  has_many :recruitment_jobtags, dependent: :destroy
  has_many :jobtags, through: :recruitment_jobtags

  validates :image, presence: true
  validates :title, presence: true
  validates :compnay_name, presence: true
  validates :locate, presence: true
  validates :access, presence: true
  validates :work, presence: true
  validates :appeal, presence: true
  validates :want, presence: true
  validates :work_time, presence: true
  validates :money, presence: true
  validates :day_off, presence: true
  validates :reception, presence: true
  validates :other, presence: true
  validates :establishmentdate, presence: true
  validates :employeesnumber, presence: true
  validates :age, presence: true

  extend ActiveHash::Associations::ActiveRecordExtensions
  belongs_to :job_category
end

```
こちらは、自テーブルが対象に所属しているため、belongs_toと書きます。
これでmodelの記載は完了です。
次にcreateアクションのviewに記載します。
```
#new.html.erb
<div id="new">
  <h2>求人投稿</h2>

  <%= form_with(model: @recruitment, local: true ) do |form| %>
    <%= render 'layouts/error_messages', model: form.object %>
    <div class="field">
      <%= form.collection_select(:job_category_id ,  JobCategory.all, :id, :name, { include_blank: '選択してください'}, {class:"job_category"}) %>
    </div>
  <div class="submit">
        <%= form.submit "投稿する" , data: { confirm: 'この内容で投稿しますか？'} %>
      </div>
    </div>
  <% end %>
</div>
```
こうすると self.dataに入っているデータが表示されて、１つ選択出来るようになります。
そして次にcontrollerの記載をします。
```Ruby
#recruitments_controller.rb
def create
  @recruitment = Recruitment.new(recruitment_params)
  @jobtags = Jobtag.all
  @jobcategories = JobCategory.all

  if @recruitment.save
    redirect_to recruitment_path(@recruitment)
  else
    render "new"
  end
end
  def recruitment_params
    params.require(:recruitment).permit(:title,:image,:compnay_name, :locate,  :access,:work, :work_content, :appeal,:want,:work_time, :money, :day_off, :reception, :other, :employeesnumber,:establishmentdate,:age,:job_category_id , { jobtag_ids: [] })
  end
```
recruitment_paramsに、job_category_idを追加して、
  @jobcategories = JobCategory.all　を書きます。
これで無事にjobcategoriesが保存できました。
表示する際は、このように表示します。

```
<span class="job_category">
	<%= @recruitment.job_category.name %>
</span>
```
@recruitmentに紐づいているため、このような書き方になります。
bokeh: 凡例のフォントサイズを小さくして、できるだけ多くの項目を表示する

# 環境
* Python 3.10.2
* bokeh 2.4.3




# やりたいこと
Pythonの[bokeh](https://bokeh.org/)ライブラリを使って、グラフを描画しています。

以下のようなコードで、グラフに20個以上の折れ線を表示したいです。

```python
import bokeh
import bokeh.palettes
import numpy
from bokeh.plotting import figure, output_file, save

output_file("graph.html")

x_data = numpy.arange(-20, 20, 0.1)
palette = bokeh.palettes.Category20[20]

fig = figure(x_axis_label="x", y_axis_label="y", height=400)

for i in range(20):
    fig.line(
        x_data, numpy.sin(x_data + i), color=palette[i], legend_label=f"y=sin(x + {i})"
    )

save(fig)
```



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37903/11424e0d-4035-8208-3c64-f320cf0ffa43.png)


折れ線は20個表示されたのですが、凡例の項目は14個までしか表示されませんでした。

グラフサイズを変えずに、凡例にできるだけ多くの項目を表示したいです。
凡例の項目を複数列で表示できれば解決するのですが、2022年7月現在、bokehは対応していません。

:::note
bokeh3.1で、legendでncol,nrowが利用できるようになりました。
https://github.com/bokeh/bokeh/issues/3880
:::


そこで、フォントサイズを可能な限り小さくして、できるだけ多くの項目を凡例に表示するようにします。

# 解決
以下のコードを追記すれば、凡例に20個の項目が表示されます


```python
fig.legend.label_text_font_size = "9px"
fig.legend.label_height = 10
fig.legend.glyph_height = 10
save(fig)
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37903/a0aa9062-c12d-f967-f4c2-c55af6304a14.png)


フォントサイズだけではなく、凡例の項目の高さを小さくする必要があります。
`fig.legend.label_text_font_size = "9px"`のみ指定した場合は、下図のように凡例に表示される項目数は増えません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37903/d15887a3-e892-5567-4a15-398e4e26e3b0.png)

なお、各プロパティの説明は以下の通りです。

>label_text_font_size : The text font size for the legend labels.
>label_height : The minimum height (in pixels) of the area that legend labels should occupy.
>glyph_height : The height (in pixels) that the rendered legend glyph should occupy.

https://docs.bokeh.org/en/latest/docs/reference/models/annotations.html#legend
【UiPath】Robot(UR)を共有して複数のユーザーがAssistantを利用する（Orchestrator設定編）


この記事はUiPathブログ発信チャレンジ2022サマーの12日目の記事です。
昨日は[@cheez_RPA](https://twitter.com/cheez_RPA)さんの[記事](https://note.com/ryosukeiwasaki/n/n7ac64d40f8ae)、明日は[@kou12092](https://twitter.com/kou12092)さんの記事です。


# はじめに
メッセージボックス等を利用した対話型のプロセスをAssistantで利用したいが、Robotは、たまに実行するだけ。加えて、いつも実行する人が不在の場合は極たまに代理者で実行する必要もある。そして、このケースでの利用者が非常に多いと言った場合のご紹介です。
ユーザに紐付かないUnattended Robotがあれば、ユーザライセンス持ってない複数のユーザーがOrchestratorから手動実行できるのは、みなさんご存じですよね。しかしながら、Assistantで起動する対話型のプロセスを手元で動かすこともできると言うことと、その設定方法・利用方法は、あまり知られていないので、ブログを書くことにしました。

尚、Orchestrator側の設定を行う記事と、Assistantを利用するユーザー側の記事の２部構成となっています。Assitantを利用するユーザー側の設定についての記事は、こちらです。

https://qiita.com/Jun96427231/items/f0da2f8373addbb8be56

## 前提条件
※この利用方法は2022年7月時点のものです。将来を約束するものではありません。
※2022年7月時点のAutomation Cloud-Orchestratorの設定方法で記載します。
※UiPath Assistantはv2022.4.3の設定方法で記載します。
※必須でない手順（設定）もありますが、一例として見てください。

## 1.前準備
①Automattion CloudへAssistant利用者を招待。

## 1.ロボットの認証の設定
テナント＞設定＞ロボットのセキュリティ＞ロボットの認証
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639319/14be49b0-3953-c1e1-28cf-ebdb3065223a.png)

## 2.利用ユーザー単位でUnattendedロボットの設定
テナント＞アクセス権を管理＞対象のユーザーを選択し編集＞②ロボットの設定
※AttndedロボットのライセンスはいらないのでOFFでOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639319/3bb37085-553d-9b8a-0dc9-65ddba6076cc.png)

## 3.マシンテンプレートを準備
マシン＞マシンを追加＞マシンテンプレート
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639319/afaee6c2-ea05-46c5-6531-904cdba94a82.png)

※作成したマシンテンプレートのマシンキーは、Assistantを使うユーザー側に連携して接続頂くことになります。
もうすぐマシンキーは非推奨ですが（笑）

## 4.利用するプロセスのあるフォルダにマシンテンプレート割り当て
　　テナント＞フォルダー＞対象のフォルダーを選択＞フォルダーでマシンを管理
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639319/4c709f64-c555-6ba2-cdbd-ff82c1a26dc5.png)

### ※Assistantに表示するプロセスをコントロールする
Assistantに表示されるプロセスは、マシンテンプレートを設定したフォルダのプロセスです。つまり、マシンテンプレートをフォルダ単位で用意することにより、例えば、部門単位でプロセスの閲覧をコントロールすると言ったことが可能になります。例えば、部門AはAグループマシンテンプレートを割り当て、部門BにはBグループマシンテンプレートを割り当てると言った感じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639319/873dde03-cb95-4b96-a82b-bcc976cda529.png)

# 終わりに
以上、Unattended Robotを利用して、コンカレント的な利用方法を解説しました。
Unattended Robotは、無人ロボットとしての使い方が、最も効果的ですが、ユーザーライセンスを持ってない人が一時的にUnattended Robotを使い、Assistantで代理実行すると言った場面だけでも活用シーンがありそうです。
尚、Orchestratorからの実行と異なり、ジョブを溜めておけないのはデメリットとも言えますが、ユーザーの使い方は、様々なので、知っておいても損はないと思います！