OmniAICreator/Qiita-1.07M huggingface dataset:
AtCoder 勉強記録[C++] その5

AtCoderで入茶を目指して勉強しています。
勉強を継続するために投稿を始めました。
もともとアカウントを作成していましたが、今年の4月から本格的に勉強を始めました。
一応自分用に解法を書いていますが雑です、自分で読み返して困ったら修正します。
[私のアカウント](https://atcoder.jp/users/nanami_brother)
[解いた問題](https://kenkoooo.com/atcoder/#/table/nanami_brother)
# 本日解いた問題
## B - Pizza
[B - Pizza](https://atcoder.jp/contests/abc238/tasks/abc238_b)
解答
```c++
#include <bits/stdc++.h>
using namespace std;
using ll = long long;
using vec = vector<ll>;
#define rep(i, n) for (int i = 0; i < (int)(n); i++)

int main() {
  vector<bool> cnt(361);
  cnt[360] = true;
  ll n, a, tmp = 0, res = 0;
  cin >> n;
  rep(i, n) {
    cin >> a;
    tmp += a;
    if(tmp>360) tmp -= 360;
    cnt[tmp] = true;
  }
  ll com = 0;
  for(int i = 1; i <= 360; i++){
    if(cnt[i]){
      tmp = i - com;
      res = max(tmp, res);
      com = i;
    }
  }
  cout << res << endl;
}
```
### 解法
0から360のbool型の配列を作成し、切れ込みを入れた角度をTrueにする。Trueの数を出力する。

## B - Integer Division
[B - Integer Division](https://atcoder.jp/contests/abc239/tasks/abc239_b)
解答
```c++
#include <bits/stdc++.h>
using namespace std;
using ll = long long;
using vec = vector<ll>;
#define rep(i, n) for (int i = 0; i < (int)(n); i++)

int main() {
  ll x;
  cin >> x;
  if (x < 0 && x % 10 != 0) {
    cout << x / 10 - 1 << endl;
  } else {
    cout << x / 10 << endl;
  }
}
```
### 解法
longlong型を利用して計算する。0未満かつあまりがある場合-1する。

## B - Count Distinct Integers
[B - Count Distinct Integers](https://atcoder.jp/contests/abc240/tasks/abc240_b)
解答
```c++
#include <bits/stdc++.h>
using namespace std;
using ll = long long;
using vec = vector<ll>;
#define rep(i, n) for (int i = 0; i < (int)(n); i++)

int main() {
  ll n,a;
  set<ll> res;
  cin >> n;
  rep(i, n){
    cin >> a;
    res.insert(a);
  }
  cout << res .size() << endl;
}
```
### 解法
setを使うことで重複しないように整数の個数を数えられる。

## C - Doukasen
[C - Doukasen](https://atcoder.jp/contests/abc223/tasks/abc223_c)
解答
```c++
#include <bits/stdc++.h>
using namespace std;
using ll = long long;
using vec = vector<double>;
#define rep(i, n) for (int i = 0; i < (int)(n); i++)

int main() {
  ll n;
  cin >> n;
  vec a(n);
  vec b(n);
  rep(i, n) cin >> a[i] >> b[i];
  double time = 0, res = 0;
  rep(i, n) time += a[i]/b[i];
  time /= 2;
  rep(i, n){
    res += min(a[i], time*b[i]);
    time -= min(a[i]/b[i], time);
  }
  cout << fixed << setprecision(15) << res << endl;
}
```
### 解法
左端から右端まで燃え尽きる時間の半分の時間で2つの火がぶつかるため燃え尽きる時間を求める。燃え尽きる時間からぶつかる地点の長さを求める。

## C - Triangle?
[C - Triangle?](https://atcoder.jp/contests/abc224/tasks/abc224_c)
解答
```c++
#include <bits/stdc++.h>
using namespace std;
using ll = long long;
using vec = vector<ll>;
#define rep(i, n) for (int i = 0; i < (int)(n); i++)

int main() {
  ll n;
  double slo1, slo2, slo3;
  cin >> n;
  vec x(n), y(n);
  rep(i, n) cin >> x[i] >> y[i];
  ll res = 0;
  for(int i = 0; i < n-2; i++){
    for(int j = i+1; j < n-1;j++){
      for(int k = j+1; k < n;k++){
        if((x[j]-x[i])*(y[k]-y[i])-(x[k]-x[i])*(y[j]-y[i])!=0) res++;
      }
    }
  }
  cout << res << endl; 
}
```
### 解法
Nが3以上300以下であるため3重ループで問題なく計算が終わる。3点が三角形なるかどうかの判断は[公式の解答](https://atcoder.jp/contests/abc224/editorial/2810)のものを参考にした。
Laravel+Reactプロジェクトを新規作成する方法

## はじめに
Laravel+Reactの技術と触れるために勉強用プロジェクトを作成しました。その備忘録として作成します。

## 開発環境

PHP: 8.3.8
Laravel: 11.13.0
react: 18.3.1
types/react: 18.3.3

## Laravelのインストール

```bash:bash
composer create-project laravel/laravel laravel-react
cd laravel-react
```

以下のコードを実行すると画面が表示されます。

```bash:bash
php artisan serve
```

![スクリーンショット 2024-06-22 182941.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2954837/0c464f8f-7977-042c-9d11-2cd0fdfb173f.png)

## viteのインストール

Laravel9以降のバージョンでは、フロントエンド(JS,CSS)のビルドツールが、従来のLaravel MixからViteへと置き換わりました。そのため今回はviteのインストールをスキップします。Laravel Mixやほかのビルドツールを使用する場合は適宜調べてください。

## React+vite+TypeScript+scssをインストール

今回使用するもろもろをインストールします。

```bash:bash
npm install react react-dom react-router-dom typescript @types/react @types/react-dom
npm install -D @vitejs/plugin-react sass
npm i -D react-router-dom @types/react-router-dom
npx tsc --init --jsx react-jsx
```

以下のコマンドを実行すると画像が表示されます。

```bash:bash
npm run dev
```

![スクリーンショット 2024-06-22 182329.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2954837/46e9d774-caf9-a000-4180-259778dace77.png)

## フロント側を作成

`vite.config.js`ファイルを`vite.config.ts`に名前変更してください。

```md:ファイル名変更
vite.config.js → vite.config.ts
```

`vite.config.ts`の内容を以下に修正してください。

```ts:vite.config.ts
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/ts/App.tsx'],
            refresh: true,
        }),
    ],
});
```


`resources/views/app.blade.php`を新規作成します。

```php:app.blade.php
 <!DOCTYPE html>
 <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">

     <title>laravel+React</title>
     @viteReactRefresh
     @vite(['resources/css/app.css', 'resources/ts/App.tsx'])
 </head>

 <body>
     <div id="app"></div>
 </body>

 </html>
```

`resources/ts/App.tsx`を新規作成します。

```tsx:App.tsx
import React from 'react'
import { createRoot } from 'react-dom/client'

const App: React.FC = () => {
    return (
        <React.StrictMode>
            <p>Hello React !</p>
        </React.StrictMode>
    );
};

const appElement = document.getElementById('app') as HTMLElement
if (appElement) {
    const root = createRoot(appElement);
    root.render(<App />)
}
```

`routes/web.php`に以下を追加します。

```php:routes/web.php
<?php

use Illuminate\Support\Facades\Route;

Route::get('{any}', function () {
    return view('app');
})->where('any', '.*');
```

画面をリロードして以下のような画面がでれば完了です。

![スクリーンショット 2024-06-29 195954.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2954837/e733060a-039f-036d-d9ff-0c897830a4ec.png)

## おわりに

今回はLaravel+Reactを組み合わせたプロジェクトを作成しました。ここからコンポーネント作成、scss作成、Laravelとのapi連携など、やることはまだまだあります。この記事が開発の足掛かりとなっていただければ幸いです。

## 参考記事
AWS Amplifyを用いて単語帳アプリを作る ~準備~

AWSをいろいろ組み合わせて何かを作りたいなぁと思い、よくある単語帳アプリを作成します。

イメージとしてはこんな感じ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273072/edf1ec7c-2f3d-66fa-a4c2-588d886e2334.png)

フロントはReactで作成し、バックはLamdaを用いて作成します。
最終的には、ログイン画面、単語登録画面、単語問題画面の3画面は作ります。

# AWS Amplifyとは？
めちゃめちゃざっくりいうとGitHubから直接デプロイできて、AWSのサービスと連携しやすいものです。
まだまだざっくりしか理解できていないので、今回触ってより理解を深めていきます！

# 次回
まずはログイン画面の作成から進めていきます！
Salesforceモバイルアプリからのログインで画像を外部共有させない方法

Salesforceモバイルアプリからのログインで画像を外部共有させない方法を紹介します

参考記事はこちら

https://help.salesforce.com/s/articleView?id=sf.salesforce_app_security.htm&type=5

SHOW_OPEN_IN	
TRUE
FALSE
Android、iOS	
TRUE に設定されている場合、ユーザーはファイルへのリンクを介して Salesforce モバイルアプリケーションからファイルを共有したり、サードパーティアプリケーションで Salesforce ファイルを開いたりできます。
FALSE に設定されている場合、ユーザーは Salesforce モバイルアプリケーションからファイルを共有したり、サードパーティアプリケーションで Salesforce ファイルを開いたりできません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/a163d2d2-9e11-ccb5-ce05-d283af87ce4e.png)
要はSHOW_OPEN_INでFALSEに設定すればいいのです

設定方法はこちら

・接続アプリケーションを管理する

を検索して
・Salesforce for iOS
をクリックしましょう

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/d9b0a6f4-3d81-71d7-1ce6-0531aa7dbd85.png)


下部のほうに「カスタム属性」があるので「新規」をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/0c9e773f-6d9f-7088-9986-69cd751d7500.png)


属性キーは
SHOW_OPEN_IN

属性値は
"FALSE"

で保存

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/cfbb5d0e-d0de-7f3b-bb30-6fb6082445d6.png)


こちらが設定済みの画面
この設定によりモバイルアプリからのファイルダウンロードを防ぐことが可能です
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/5ae821ff-38c6-566c-d28f-d7f35dddb8b4.png)
自己紹介ページ　進捗

お疲れ様です。

今日も自己紹介ページの編集を行いました。
といっても、職歴は書き終えていますので、写真を追加したり transition によるアニメーションを付け加えて、ひと段落かなと考えているところです。

![footer.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810013/bd3385ca-1a7d-b709-a503-93aee980414a.png)

![スクリーンショット 2024-06-29 230359.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810013/0e81c955-8efe-4472-e0e8-2dc9c49a7431.png)

1時間ほど作業し、写真を追加。そして中央揃えにしました。
この中央揃えに手間取ってしまい、 inline-block をあちこち移動させ、挙動を確認するも中央に来ず…
結局 justify-content が邪魔をしており、ページを最大化した時に中央揃えにならなかったので、削除することで画像のように最大化した時にも中央揃えが適応されていました。

これについては先月の課題で勉強していたので、 inline-block を使うということは分かっていましたが、これまでよく使っていた justify-content で中央揃えにするんだろうという先入観で時間がかかってしまいました…
今回のことはちゃんとメモを残しておき、同じことで引っかからないようにしたいところです。
ABC319Dを解いた


筆者はレート600弱の茶色コーダ

ABCやってなかったので[AtCoder Problems](https://kenkoooo.com/atcoder/#/table/)から適当に問題を選んで解いた

https://atcoder.jp/contests/abc319/tasks/abc319_d

# 実装コード

解説見る限りでは二分探索すればいいみたい。

範囲を適当に決め、中心が要件を満たすか判定して範囲を縮めていく。


```python
import sys
def rI(): return int(sys.stdin.readline().rstrip())
def rLI(): return list(map(int,sys.stdin.readline().rstrip().split()))
def rS(): return sys.stdin.readline().rstrip()
def rLS(): return list(sys.stdin.readline().rstrip().split())
def err(*args): print(*args, file=sys.stderr)

def chk(A,M,w):
    s = 0
    cnt = 1
    for a in A:
        s += a
        if s >= w:
            s = a+1
            cnt+=1
        else:
            s+=1
    return cnt <= M
def main():
    N, M = rLI()
    A = rLI()
    
    l = max(A)
    r_max = sum(A)+N-1
    r = r_max
    w = r
    while l+1<r:
        w = (l+r)//2
        if chk(A,M,w):
            r = w
        else:
            l = w
    print(r-1 if r<r_max else r_max)

if __name__ == '__main__':
    main()

```

# まとめ

ABC319のD問題を解いた。回答の算出には二分探索を使用した。

# 感想
最小値探索→DPや！とかおもったけど二分探索だった件
二分探索で解を決める問題はやったことなかったので新たな知見を得た
Jetson NanoにOpenCVをインストールする方法

## 環境
Module: NVIDIA Jetson Nano 4GB ram
Jetpack 4.6.1
Ubuntu 18.04 Bionic Beaver
Python 3.6.9

## Ubuntuをセットアップする
```shell
sudo apt update
sudo apt-get update
sudo apt upgrade -y
sudo reboot
```

## pipをインストールする
```shell
sudo apt install python3-pip
```

## jtopをインストールする
Windowsでいうところのタスクマネージャーをインストールする。無くてもいいが、あるとJetpackのバージョンやOpenCVのバージョン確認が容易になるのでインストールをおすすめする。
```shell
sudo -H pip3 install jetson-stats
sudo reboot
```

使用する場合は以下のようにする
```shell
sudo jtop
```

## Python3をデフォルトにする
このままライブラリ等をインストールすると、一部ライブラリがPython2にインストールされてしまい、うまく動かなくなってしまう。
```shell
cd /usr/bin
ll py*
sudo unlink python
sudo ln -s python3 python
```
バージョンを確認し、Python3になっているか確認する。
```shell
python --version
```

## パッケージからOpenCVをインストールする
1.ビルド済みのシェルスクリプトインストーラーをwgetを利用してダウンロードする
```shell
wget https://github.com/lanzani/jetson-libraries/raw/main/libraries/opencv/l4t32.7.1/py3.6.9/ocv4.8.0/OpenCV-4.8.0-aarch64.sh
```
2.実行権限を付与する
```shell
chmod +x OpenCV-4.8.0-aarch64.sh
```
3.OpenCVをインストールする
```shell
sudo ./OpenCV-4.8.0-aarch64.sh --prefix=/usr/local --skip-license --exclude-subdir
```
4.ランタイム依存関係をインストールする必要がある
```shell
sudo apt-get -y install libtesseract4 libatlas3-base python3-numpy
```
```shell
sudo apt-get clean
```
5.正しくPythonのパスを指定する
```shell
vim .bashrc
```
末尾に次の行を追加する

```shell
export PYTHONPATH=/usr/local/lib/python3.6/site-package:$PYTHONPATH
```
vimの使い方がわからい人はググってください

6.ターミナルを閉じて別のターミナルを開く
7.インストールが正常に完了したかどうかを確認するには、次のように入力する。
```shell
opencv_version
```
以下のように出力されれば成功
```shell
4.8.0
```
一応Pythonの対話モードでもOpenCVがimport可能かどうかをテスト
```shell
python
>>> import cv2
>>> print(cv2.__version__)
4.8.0
>>> exit()
```

これでJetson NanoにOpenCVをインストールすることができました。
まちがった方法でimgタグのsrcを指定していた話

## はじめに
Reactでimgタグに画像を指定する際、htmlのときと同じように画像のパスを指定していました。
しかし、この方法は正しくないということを知ったので、何がどうまちがっているのかを含め、正しい設定方法についてまとめました。

### 環境
本記事の実装においては、以下のものを使っています。
| ライブラリ | バージョン | 
|:-|-:|
| React | 18.2.0 |
| TypeScript | 5.2.2 |
| Vite | 5.2.0 |

## まちがった指定方法
「まちがった」とは言っていますが、この書き方で画像が表示されないわけではありません。
開発環境においては問題なく画像が表示されます。
```react:MyImage.tsx
const MyImage = () => {
  return (
    <>
      <img src="src/assets/myIcon.png" />
    </>
  );
};

export default MyImage;
```

一見、正しそうな感じがしますが、`src`属性に直接画像パスを指定してはいけません。
なぜだめなのか、については後ほど確認します。

## 正しい指定方法
```react:MyImage.tsx
import myIcon from "./assets/myIcon.png";

const MyImage = () => {
  return (
    <>
      <img src={myIcon} />
    </>
  );
};

export default MyImage;
```
reactにおいて、画像ファイルを読み込む際はインポートして利用します。
こうすることにより、本番環境へビルドしたときに適切なパスでファイルを読み込むことができます。

### どういうことか
開発環境においては`/myIcon.png`となっている画像が、本番環境のビルドでは`/myIcon.2d8efhg.png`というふうにハッシュ化されます。

実際にビルドされたあとのものを確認してみます。
<img width='60%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/deae93dd-b9e7-a9a8-1849-85ba518e2dd4.png'>

比較のために、imgタグの`src`に直接画像のパスを設定したものも用意しました。
インポートした画像の方は、`myIcon.png`のファイル名が変化していますが、直接画像のパスを指定したほうは変化していません。

つまり、パスを直接指定した場合、画像を表示することができなくなります。
現に、「srcに指定した画像」には画像を正しく表示できていません。

## まとめ
今回はだいぶあっさりとした記事になりましたが、画像ファイルを使用する際の方法についてまとめました。

なぜそのような挙動になるのか（ハッシュ化するのか）、についてまで言及したかったのですが、viteやwebackなどの挙動について深く理解する必要があったため、今の知識では太刀打ちできず、断念しました。

また知見が溜まってきたら改めてこの点について触れたいと思います。
SaleforceログインでiPhoneのSafariでログインできないようにする方法

iPhoneでSalesforceにログインする際はモバイルアプリでのログインが推奨されています

https://help.salesforce.com/s/articleView?id=000380219&type=1

今回はiPhoneでSafariからSalesforceにログインさせなくする方法をお伝えします


トランザクションセキュリティポリシーを使い対応します

このようなものを作成します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/b350ef61-209c-4f9b-c1de-43b1358dd5fd.png)

イベントLoginEventで条件は
ブラウザー

次の文字列で始まる

値
Safari

です


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/f944f9bf-bc7c-67b7-bad5-b0e516d801ae.png)

こちらでブロックの設定を行います
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/e874fa12-079f-d273-8804-a923fa18b4c4.png)


このブロックによりSafariからログインしようとすると
「この組織のセキュリティポリシーが原因で、ログインできません」というエラーが出るのでSafariへのログインを防ぐことが可能です
Google Gemini触ってみた

とりあえず触ったよという初心者向けの記事です。

難しいことは他の方の記事を見てください

https://qiita.com/skillup_ai/items/e7447e3fd66dd7be9750

# 使い方

超簡単Googleアカウントでログインそれだけ！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/93403996-df39-dc35-c3cf-233d421c39c6.png)

# インターネットから最新情報を検索できる

インターネットから最新情報を取得してこれるということで、
やほーで新しくて質問しやすそうな記事を見つけてきて、

質問！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/1eb58cd1-3e84-586a-5c98-b5c057fd768c.png)


あれ？難しいな

ちょっとヒントを出してみる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/b5c75cb1-152d-8c36-e129-73b9f4913d6f.png)

出ました！

情報源？も表示してくれる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/687920c4-4bbe-f6b1-c634-c86fefa06aac.png)

直接リンクが出てくるので、クリックするのを躊躇しますが、
言ってることは正しそう。

### Claudeは最新情報の検索機能はない

Claudeでもやってみましたが、検索機能は無いようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/e940ebd7-ce83-8698-b2db-6b0a36e70f13.png)


# 記載内容をGoogle検索する

なぞのボタンを押してみました

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/dbd27dd6-67e2-4445-f5be-32e0631650d4.png)

すると出力した文章がハイライトされ、
「開く」ボタンが表示されましたので、押してみるとGoogle検索した一部が表示されました。
これは便利

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/84389567-b0e2-1fb5-2d42-19a4db66e7ea.png)

# まとめ

ビジネス利用については、著作権に触れちゃうような、ネットのどっかの文章をそのまま出力しちゃうのとこでおすすめしませんが、
「情報に溺れてよくわからん」とか、「このネット記事長すぎて読むに気にならない」みたいなときに、要約してもらったり、検索してもらうみたいな使い方がいいんじゃないでしょうか。
Microsoft アカウントへの不正アクセス確認と乗っ取り防止

# はじめに
はじめまして[ほしいも](https://twitter.com/hoshiimo_se)です。
最近話題のMicrosoftアカウントへの不正アクセス確認と、
アカウントの乗っ取り防止策についてお話します。

# 不正アクセスの確認
Microsoftアカウントのページ( https://account.microsoft.com/account )からサインインし、
左ペイン（スマホの場合はハンバーガーボタン）の[セキュリティ]-[サインイン アクティビティ]を選択。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521440/a5b2e7a5-c409-14c2-850e-0527056ff685.png)

こんな感じでサインインの失敗履歴等が確認できます。

## 乗っ取り防止策
セキュリティページ( https://account.live.com/proofs/manage/additional )にて「2 段階認証」の「管理 >」から２段階認証を有効にします。
【参加日記#04】Gemini API デベロッパー コンペティション

～[前回](https://qiita.com/arc-lab-jp/items/fdfc6908f6d90a9b8b85)までのあらすじ～
製作するアプリをちゃんと決めないとならないのだが、まだアイデアが煮詰まていない。AI君たちに、手伝ってもらおうということで・・・

# 1.フワフワなアプリの構想
今回頭の中に思い描いているのは、日常生活において情報の橋渡し（翻訳）をするアプリ。英語を日本語へ翻訳とかではなく、同一言語で翻訳を行うんです。
「うん、なんのこっちゃ…」って大抵の方がおもったんじゃないかな。

# 2.例えば…　その１
あなたは、休日のコンビニで友人Aにばったり出くわしました。
友人Aは、基本面白い奴ですが、話し出すと止まらないのが玉に瑕です。

**あなた**：「うわぁ、めんどくさい奴に会っちゃったな…」（原文）
　↓↓↓　　↓↓↓　　↓↓↓
**アプリ**：「おお、A！こんなところで会うなんて驚いたよ。でも、実はちょっと急いでいるんだ。また今度ゆっくり話そう！」（翻訳文 by Gemini君）


# 3.例えば…　その２
いつもご飯を作ってくれる母。心の中では感謝しつつも、照れくさいのでいつもぶっきらぼうな物言いや、態度をとってしまいます。

**あなた**：「ごちそうさま。…。」（原文）
　↓↓↓　　↓↓↓　　↓↓↓
**アプリ**：「ごちそうさまでした。今日もおいしかったよ、ありがとう。！」（翻訳文 by ChatGPT4o君）


# 3.例えば…　その３
取引先のBさんはせっかちな方で、特に急ぐような内容でもないのに、「緊急で！」と連絡が来ます。また、自分の間違いでなにかシステムに不具合が生じたときには「うまくいかない。エラーが出る。」と間違えて行った操作の話をせずにいます。「どんな操作をしましたか？」と聞いても、間違った操作はしてないといいます。

**あなた**：「どんな操作をしましたか？」（原文）
　↓↓↓　　↓↓↓　　↓↓↓
**アプリ**：「Bさん、ありがとうございます。詳しく調査してみました。システムの動作を確認したところ、予期せぬ結果が出ているようです。一緒に解決策を見つけましょう。もし可能であれば、最近行った操作手順を教えていただけますか？些細なことでも構いません。それによって、問題の原因をより正確に特定し、迅速な解決につながる可能性があります。」（翻訳文 by Claude3.5Sonnet君）


その３だけは、ノンフィクション（笑）
あと、実はアプリ名を先に考えてあるんだ、可愛い（？）名前を。
今回アプリを作るにあたって、一番初めに考えたのが名前だったりする。

というわけで、また[次回](https://qiita.com/arc-lab-jp/items/421a9040624db687f6c3)
ストレージについて

基礎からの新しいストレージ入門を読んだので、そのメモ。

ストレージとは、データを保存する場所のこと。

## ストレージの種類
- ブロックストレージ
- ファイルストレージ
- オブジェクトストレージ

### ブロックストレージ
OSから見たら、内蔵ドライブと同様に扱うことができるストレージ。
高速でデータをやり取りすることができる。
用途はDBなど。

### ファイルストレージ
ファイルを複数サーバで共有するのに適しているストレージ。
中速でデータをやり取りする。
用途はファイルの共有。

### オブジェクトストレージ
大量のデータを格納できるストレージ。
データのやり取りは低速。
用途は、写真や動画。

## ストレージのタイプ
- アプライアンスストレージ
- SDS

### アプライアンスストレージ
専用の集積回路を搭載したハードを開発して提供するタイプ。
ドライブをまとめたディスクシェルフとストレージコントローラが一体となっているもの。
なので、高性能かつ高可用性。

### SDS
一般に利用されているサーバ上に専用のソフトをセットアップするタイプのストレージ。
容量を追加したい際は、サーバ単位で追加できるため、小さな単位で変更可能。
性能は、サーバの性能等によって決まる。

### サーバー・ストレージ間の通信
ストレージと通信するサーバは
- 管理ソフト：ボリューム等の設定
- アプリケーション：データのやり取り

この二つではプロトコルが異なる。

---
ストレージについて何も知らなかったので、1章以降は難解すぎて、内容の理解がほとんどできていないため、またいつか読み直す。
st_word_excel_download


```
import streamlit as st
import docx
from io import BytesIO
import pandas as pd

def main():

    # Streamlitアプリケーション
    st.title("word出力")

    # Documentオブジェクトを作成
    doc = docx.Document()

    # 1ページ目
    with st.expander('1ページ目', expanded=True):
        page1_title = 'サンプルドキュメント'
        page1_body = st.text_area("ここに入力してください:", height=100, key='page1_body')

        # ドキュメントの内容を追加
        doc.add_heading(page1_title, 0)
        doc.add_paragraph(page1_body)

    # 2ページ目
    with st.expander('2ページ目', expanded=True):
        page2_title = 'サンプルドキュメント'
        page2_body = st.text_area("ここに入力してください:", height=100, key='page2_body')

        doc.add_heading('セクション1', level=1)
        doc.add_paragraph('ここにセクション1の内容が入ります。')
        doc.add_heading('セクション2', level=1)
        doc.add_paragraph('ここにセクション2の内容が入ります。')

    # バイナリストリームへの保存
    bio = BytesIO()
    doc.save(bio)

    # ストリームの位置を先頭に戻す
    bio.seek(0)

    # ダウンロードボタンの表示
    st.download_button(
        label="Wordファイルをダウンロード",
        data=bio.getvalue(),
        file_name="prepared_document.docx",
        mime="application/vnd.openxmlformats-officedocument.wordprocessingml.document"
    )


    # サンプルデータを作成
    data = {
        '名前': ['Alice', 'Bob', 'Charlie', 'David'],
        '年齢': [25, 30, 35, 40],
        '職業': [
            'エンジニア', 
            'デザイナー', 
            'マネージャー', 
            'アナリスト'
        ],
        '備考': [
            '長い文章の例として、このセルにはとても長い文章を入れています。この文章は通常のセルの内容よりもはるかに長いため、テーブルの表示がどのように変わるかを確認するのに役立ちます。',
            '',  # 2行目は空白
            '',  # 3行目は空白
            ''   # 4行目は空白
        ]
    }

    # プレービュー用にPandasデータフレームに変換
    df = pd.DataFrame(data)




    st.divider()
    st.header('Excel出力')
    with st.expander("Excel出力", expanded=True):

        # サンプルのDataFrameを作成
        df = pd.DataFrame({
            'Column1': [1, 2, 3, 4],
            'Column2': ['A', 'B', 'C', 'D']
        })
        edited_df = st.data_editor(df, num_rows="dynamic")

        # Excel形式でダウンロードするボタン
        def download_excel(data):
            output = BytesIO()
            with pd.ExcelWriter(output, engine='openpyxl') as writer:
                data.to_excel(writer, sheet_name='Sheet1', index=False)
            excel_data = output.getvalue()
            return excel_data

        st.download_button(
            label='ここをクリックしてExcelファイルをダウンロード',
            data= download_excel(edited_df),
            file_name='data.xlsx',
            mime='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        )

            



if __name__ == '__main__':
    main()



```
ElixirでDJコントローラーLチカ

# 前提条件
* DJコントローラー DDJ-FLX4 
* OS Ubuntu22.04 
* portmidiをインストールできる環境（他のOSでもできるかも）

# 環境作成

portmidiのインストール
```
$ sudo apt install libportmidi-dev libportmidi0
```
# コードを書く

完成版はgithubに有ります

https://github.com/ymn-t-yamanashi/ddj-flx4_led

portmidiの設定をする

```diff_elixir:mix.exs
defmodule Hoge.MixProject do
  use Mix.Project

  def project do
    [
      app: :hoge,
      version: "0.1.0",
      elixir: "~> 1.16",
      start_permanent: Mix.env() == :prod,
      deps: deps()
    ]
  end

  # Run "mix help compile.app" to learn about applications.
  def application do
    [
+     extra_applications: [:logger, :portmidi]
    ]
  end

  # Run "mix help deps" to learn about dependencies.
  defp deps do
    [
+      {:portmidi, "~> 5.0"}
      # {:dep_from_hexpm, "~> 0.3.0"},
      # {:dep_from_git, git: "https://github.com/elixir-lang/my_dep.git", tag: "0.1.0"}
    ]
  end
end
```

Lチカの本体

```elixir:lib/hoge.ex
defmodule Hoge do
  @moduledoc """
  Documentation for `Hoge`.
  """


  def hello() do
    # MIDIデバイスの一覧 デバッグ用
    PortMidi.devices
    |> IO.inspect()

    #上記一覧からデバイスを指定してMIDIデバイスを開く　例:"DDJ-FLX4 MIDI 1"
    {_, output} = PortMidi.open(:output, "DDJ-FLX4 MIDI 1")
    |> IO.inspect()
    
    #Lチカを100回繰り返す
    Enum.each(1..100, fn _ -> led(output) end)

    # MIDIデバイスを閉じる
    PortMidi.close(:output, output)

    :world
  end
  
  def led(output) do
    # LチカのMIDIのデータの作成と送信
    ["B0","02", "7f"]
    |> send_midi(output)
    Process.sleep(200)
    ["B0","02", "00"]
    |> send_midi(output)
    Process.sleep(200)
    ["B1","02", "7f"]
    |> send_midi(output)
    Process.sleep(200)
    ["B1","02", "00"]
    |> send_midi(output)
    Process.sleep(200)
  end

  def send_midi(v, output) do
    # 16進数を10進数に変換してMIDIデータを送信

    data = Enum.map(v, fn x ->  h(x)  end)
    |> List.to_tuple()
    |> IO.inspect()
    PortMidi.write(output, data)
  end

  def h(v) do
   # 16進数を10進数に変換
    {a, _} = Integer.parse(v, 16)
    a
  end
end
```

# 動作動画

<iframe width="560" height="315" src="https://www.youtube.com/embed/ks1A2_LG_QA?si=8aDSsaHBucD3Z6U7" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

# 参考資料

https://github.com/lucidstack/ex-portmidi?tab=readme-ov-file

DDJ-FLX4 MIDIメッセージ一覧

https://www.pioneerdj.com/-/media/pioneerdj/software-info/controller/ddj-flx4/ddj-flx4_midi_message_list_j1.pdf
pklを使ってみた　その２

個人的「質はともかく継続する」22日目です

## pklを使ってみた　その２

### 型を付けてみる

pklは多くのプログラミング言語と同様、型の指定ができるようです。

```pkl
name: String = "文字型"
Score: Int = 100
mony: Float = 10.13
Flag: Boolean = False
```

実行してみる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45303/2bde36be-e825-5986-a6c9-3422313c9620.png)

エラーになりました。
どうやらFalseはすべて小文字である必要があるようです。

修正して再度実行します。
```pkl
name: String = "文字型"
Score: Int = 100
mony: Float = 10.13
Flag: Boolean = false
```

ちゃんと変換されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45303/06b3cf77-80db-0e32-37ba-075db2c1576f.png)

型制御が効いているか確認するために、
数値型の項目に文字を入れてみます。

```pkl
name: String = "文字型"
Score: Int = "数値型に文字"
mony: Float = 10.13
Flag: Boolean = false
```

ちゃんとエラーになりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45303/5d82aa1b-0779-9056-9216-2bb6a1890f4b.png)

## まとめ

前回の記事では、業務で使い所が無さそうと書きましたが、
型チェックがあるとなると別です。
設定ファイル群をチェックするのに使えるかも。
Salesforceで「新規Todo」「新規行動」　デフォルトの項目値を変更しよう

Salesforceで「新規Todo」「新規行動」のデフォルト項目の設定をする方法


クイックアクション＞グローバルアクションから「表示ラベル」をクリックします

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/fee33dab-ba38-e0b8-70c6-b1689e08e7ed.png)

「定義済み項目値」で「新規」をクリックします


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/67da20b9-3dab-19b9-95e2-4a81dd5297db.png)

ここでデフォルト値の設定をします
例えばTodoで期日が「今日」に設定したい場合デフォルト値数式を「TODAY()」に設定します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/9f9af61d-9600-e614-7366-6979144a26a4.png)
GoでJSONデータをメモリ効率よく処理する

GoでJSONを扱う場合、"encoding/json"パッケージを使います。

よく使うのは、MarshalとUnmarshalの2つですが、今回は以下のメソッドを使用していきます。

メモリに保存せずストリームとして処理する
- NewEncoder
- NewDecoder

```go
package main

import (
	"encoding/json"
	"os"
)

type User struct {
	Name  string `json:"name"`
	Age   int    `json:"age"`
	Email string `json:"email"`
}

func main() {
	user := User{
		Name:  "Test",
		Age:   25,
		Email: "test@example.com",
	}

	file, err := os.Create("user.json")
	if err != nil {
		panic(err)
	}
	defer file.Close()

    // ストリームとして逐次処理してファイルに書き込む
	encoder := json.NewEncoder(file)
	err = encoder.Encode(user)
	if err != nil {
		panic(err)
	}
}
```

```go
package main

import (
	"encoding/json"
	"fmt"
	"os"
)

type User struct {
	Name  string `json:"name"`
	Age   int    `json:"age"`
	Email string `json:"email"`
}

func main() {
	file, err := os.Open("user.json")
	if err != nil {
		panic(err)
	}

	var user User

    // ファイルから読み込んだJSONデータをそのまま構造体に入れる
	decoder := json.NewDecoder(file)
	err = decoder.Decode(&user)
	if err != nil {
		panic(err)
	}

	fmt.Printf("Name: %s\n", user.Name)
	fmt.Printf("Age: %d\n", user.Age)
	fmt.Printf("Email: %s\n", user.Email)
}
```

このようにNewEncoder、NewDecoderを使用すると、MarshalやUnmarshalを使っていたときのように、構造体をbyteに変換したり、JSON文字列をbyteに変換する必要がなく、メモリに保存しなくていいので、メモリの消費が抑えられます。
会社PCのプロキシ設定を確認する方法

# はじめに
会社PCで、Anaconda等をインストールしてPythonを使いたい！っていうときに厄介なのが、**プロキシ設定**かと思います・・・。
ライブラリをインストールしようとすると、「接続できませんでした」のようなエラーが出るんですよね・・・。

⇒プロキシ設定がわかれば、pip installのときに指定することで、対応できます。

https://qiita.com/LekcentM/items/6e9faf8f8a1ac9b07680

※こちらの記事で、プロキシ設定ありのコードを紹介しています。


じゃあ、肝心のプロキシの値は、どうやって見つけるの？　が今回のテーマです💡

※Windows利用者向けの記事になります＞＜

# WindowsPC向け プロキシ確認方法

・Windowsの検索窓に「プロキシ」と入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3091004/50695d9d-bb75-b980-a3a8-39b1f02708b9.png)

・プロキシの設定　を開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3091004/d459c7f7-f9e6-d13e-ae32-b55ddfccce7b.png)

・自動、手動を確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3091004/79f5fb0e-3126-7df2-c208-bec1a55d49d5.png)

▼パターン１
写真のように、自動・手動ともにグレーで、設定がなければ、そもそもプロキシ設定がないと想定されます。

▼パターン２
**手動**に　アドレス・ポート　が設定されている場合
このまま２つを組み合わせれば、解決すると想定されます。

▼パターン３
**自動**にスクリプトのアドレスが記入されている場合

この場合、.datファイル等に複数パターンのプロキシ設定がまとめて記載されているケースが想定されます。
スクリプトのアドレスをコピーし、任意のブラウザに張り付けてみましょう💡

・ブラウザにアドレス・ポートの組み合わせが表示されるケース
　⇒表示されたプロキシ設定で、順番に試しましょう💡
 
・XXX.datファイルが、自動的にダウンロードされるケース
　⇒ファイルをメモ帳等で開き、記載内容のプロキシ設定で、順番に試しましょう💡

 # 終わりに
 分析作業がしたいのに、その手前で先に進めないのは大変ですよね・・・。
 参考になれば幸いです👹
AWS Amplify JavaScript v5からv6へ変更時、APIキーをエンドポイント毎に設定する方法

Amplify JavaScriptは2023年11月にv6の提供が開始され、バージョンアップによる破壊的変更が含まれています。
v5で複数のREST APIを設定する場合、それぞれのエンドポイントに対してAPIキーを設定できていたのですが、v6への変更でそのままでは設定できなくなっていたので修正方法を紹介します。
v5でのAPIキーを設定する場合、カスタムヘッダーとして記述することで設定できます。
具体的なコードは以下のようになります。（公式ドキュメントを少し修正したものになります）
```typescript:v5.ts
import { Amplify, API, Auth } from 'aws-amplify';

const config = {
  API: {
    endpoints: [
      {
        name: 'MyAPIGatewayAPI',
        endpoint: 'https://1234567890-abcdefgh.amazonaws.com',
        custom_header: async () => {
          return {
            'X-Api-Key': 'ここでエンドポイント毎にAPIキーを設定可能',
          };
        },
      },
      {
        name: 'MyCustomCloudFrontApi',
        endpoint: 'https://api.my-custom-cloudfront-domain.com',
        custom_header: async () => {
          return {
            'X-Api-Key': 'ここでエンドポイント毎にAPIキーを設定可能',
          };
        },
      }
    ]
  }
}

Amplify.configure(config); // configureで設定する引数は１つ
```
次にv6で設定する場合ですが、Amplify.configure()の設定方法が変更されており、resourceConfigとlibraryOptions、それぞれに設定を記述する必要があります。
APIキーの設定はlibraryOptionsに設定する必要がありますが、エンドポイント毎の記述となるresourceConfigとは違い、エンドポイント毎にプロパティを設定することができません。
```typescript:
const resourceConfig = {
	API: {
		REST: {
			MyAPIGatewayAPI: {
				endpoint: 'https://1234567890-abcdefgh.amazonaws.com',
			},
			MyCustomCloudFrontApi: {
				endpoint: 'https://api.my-custom-cloudfront-domain.com',
			},
		},
	},
};

const libraryOptions = {
  API: {
    REST: {
      headers: async () => {
        return { 'X-Api-Key': apiKey }; // ここでAPI全てに対してのAPIキーが設定可能
      }
    }
  }
}
Amplify.configure(resourceConfig, libraryOptions); // configureで設定する引数は2つ
```
エンドポイント毎に別々のAPIキーを設定している場合、このままでは利用できないので、if文やswitch文などを使ってエンドポイント毎に判定してやる必要があります。
今回は以下のように修正することで対応しました。
```typescript: v6.ts
import { Amplify } from "aws-amplify";
const resourceConfig = {
	API: {
		REST: {
			MyAPIGatewayAPI: {
				endpoint: 'https://1234567890-abcdefgh.amazonaws.com',
			},
			MyCustomCloudFrontApi: {
				endpoint: 'https://api.my-custom-cloudfront-domain.com',
			},
		},
	},
};
const libraryOptions = {
	API: {
		REST: {
			headers: async (options: {
				apiName: string;
			}): Promise<{ [keyName: string]: string }> => {
				switch (options.apiName) {
					case "MyAPIGatewayAPI":
						return {
							"X-Api-Key": 'ここでエンドポイント毎にAPIキーを設定可能',
						};
					case "MyCustomCloudFrontApi":
						return {
							"X-Api-Key": 'ここでエンドポイント毎にAPIキーを設定可能',
						};
					default:
						return {};
				}
			},
		},
	},
};

Amplify.configure(resourceConfig, libraryOptions);
```
v5では個別に設定出来ていたのにどうして...
[備忘録]　フリーランスエンジニアが社会的信用を得るには

# はじめに
こんにちは，Umamusume22です．最近，フリーランスエンジニアに関する記事ばっか投稿しています．今回もまたフリーランスエンジニアの記事です．フリーランスは会社員より社会的信用度が低いと思います．そこで，フリーランスが社会的信用を得るにはどうしたら良いのか調査しました

# 社会的信用を得るためにわかったこと[1,2,3]
- 確定申告を慎重に行う
    - フリーランスが住宅ローンを契約する場合，過去3年分程度の確定申告書類が要求される
    - 注意点として節税のために経費計上し過ぎないこと<br><br>
- 預金額を増やす
- 滞納しない
- 開業届を提出して屋号を持つ
- 家を借りるのは難易度が高い
    - 配偶者が正社員であれば家を借りることが可能[2]
- 収入を証明することが大事[3]
    - 確定申告書の他にも収入を証明する必要がある
        - 住民税課税証明書
        - 納税証明書
        - 所得税納税証明書

# さいごに
備忘録の内容が短いのは申し訳ありません．フリーランスエンジニアが社会的信用を得るにあたってわかったことは収入を得て税金を納めることですね(これが一番)．それでも，家を借りる時に大家さんが家を貸してくれないことがあるそうです．こんな時は配偶者の名義で借りるのが良さそうです．
フリーランスが社会的信用を得るのはまだまだ大変ですね．

# 参考文献
[1]"【フリーランスエンジニアは社会的信用が低い！】社会的信用って本当に必要？"
https://freelance-life-partners.jp/1624/

[2]"【独立して6年】フリーランスの社会的信用の実態【対策と経験談】"
https://inovativeworks.com/socialcredit/

[3]"フリーランスの社会信用性はどこまであるのか"
https://projectbase.jp/media/%E3%83%95%E3%83%AA%E3%83%BC%E3%83%A9%E3%83%B3%E3%82%B9%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE%E3%82%A4%E3%83%B3%E3%83%97%E3%83%83%E3%83%88/18002/
Salesforceで見える「新規Todo」「新規行動」の表示項目の変更方法

よくSalesforceで
・レコードページに見える「新規Todo」や「新規行動」の表示項目はどこで変えるのか？
という話が出ます

よく標準で設定されている

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/95415003-2862-c961-1850-c0ac3b2b2e4c.png)

右側の部分ですね


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/8e83d87c-ff0c-8aa6-a6de-20efb0735f80.png)

　こちらについては「クイックアクション」で検索し
 編集させたいアクションの「レイアウト」ボタンをクリックしましょう


 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/5e5ca065-fd38-090f-d7e6-ac60fe957979.png)


 こちらが先ほどの画面の編集場所なので編集をしてレイアウトの「保存」をしましょう

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/edcbd20f-5d74-8e98-90ab-af164fab3f18.png)

こちらで設定完了です
お疲れ様でした！
Figmaでボタンを作ってみる

本日よりFigmaの勉強を始めます。自分の学習記録用。まずは手始めにマウスオーバーでカラーが変化するボタンのアニメーションを作ってみました。
Figmaでアプリのシュミレーターのようなことが行えるのは本当に素晴らしい機能です。

# 1.フレームを挿入する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2138087/3cc5da29-a27d-9d16-44de-6953bedeeeca.png)

画面左上のアイコンからフレームを挿入します。（ショートカットFキー）

# 2.テキストを挿入する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2138087/9dc76f19-a06e-a58b-373a-a17434229e85.png)
同じく画面上の「T」アイコンからテキストを挿入することができます。
# 3.フレームの中央にテキストを配置する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2138087/f0403cd1-8af4-a9a0-65ad-a946b32cd111.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2138087/0b91fbf9-ade3-eee7-4845-e9424cc63cf7.png)
ここと、ここで中央に配置します。
# 4.フレームの角を丸くする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2138087/d34a76d2-2b36-2d40-2e35-be9e0459e5d9.png)
# 5.背景色をつける
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2138087/d6a85f97-0d5d-ecd4-720e-4511c62e2982.png)
塗りで背景色をつける
# 6.複製する
追記：コンポーネントで複製する　画面中央上アイコン→プラスが出たらさらに押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2138087/9b36a6e3-46e5-a9c6-7ff3-18086e94aa55.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2138087/38867666-a69f-1de6-ac1d-58f19260176b.png)
# 7.プロトタイプタブを選択して「＋」アイコンをボタン２に繋ぐ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2138087/2630c0d9-6d4e-5859-c864-0ea1d7d98548.png)
# マウスオーバーを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2138087/b5199b2b-f3c5-f0d9-bbba-7dbf2a913d37.png)
# 右上「▶️」をクリック！　完成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2138087/6397ab36-f478-1112-5cc9-d603a7647f8e.png)
pip install に、任意の文字列を設定する方法

# はじめに
プロキシ設定のあるPCで、Pythonのライブラリをインストールするのって、いろいろと手間ですよね・・・
プロキシ設定が変わるごとに、pip installの時に指定するプロキシ名称を変更するのが手間だったので、なんとかならないものかと思い立ったのです。

# pip install ＊　プロキシ設定あり

```Python
!pip install selenium --proxy=XXX@XXX:8080
```

こんな感じで、--proxyオプションをつけて、ネットワークのプロキシとポート番号を指定してあげるとpip installができますね！

今回は、--proxy=XXX@XXX:8080　の　**XXX@XXX:8080** の部分を、文字列として指定することをご紹介します。

# こんな感じ
```Python
proxy_str = "XXX@XXX:8080"
!pip install selenium --proxy=$proxy_str
```
・proxy_strに、文字列としてプロキシ設定を入力します。
・'$'を使ってPythonの変数をコマンド内に挿入します。

# 終わりに
とても簡単ですね！
いろんなPCのライブラリ環境をまとめて整えたいとき等に、使えますよ✨
2024年の 実践Moddable 補足

## はじめに

日本語でModdableを解説している技術書である[実践Moddable](https://tatsu-zine.com/books/moddable-iot)が発売されてから4年が経過しようとしています。
内容としては概ね現在読んでも問題が内容ではありませんが、現在までのModdableはアップデートし続けおり、本記事ではそれに伴う補足について記載していきます。

これから実践Moddableを読んでModdableでの開発を始めようとする方の参考になれば幸いです。

発売当時から現在までのModdableのアップデート内容全般はボリュームが多くなりすぎるため、実践Moddableで取り扱う項目をベースに触れていくことはご了承ください。

## 発売当時はどんな時

ベースとして紹介されているコミットは[79b50f5](https://github.com/Moddable-OpenSource/moddable/tree/79b50f509666d3694a908ea59c1866d68733943a)です。その時点でのコミット数は2632です(現時点では8100コミット)

差異については以降で触れていきます

また、デバイスとしては本文中にも触れられてますが、M5stack core2が発売される少し前ごろで、ESP32で対応しているデバイスはM5stack、M5stick-cなど10種類程度です。

## 1. Moddable 概説

* TC53が正式に勧告され、Ecma-419に。仕様は以下で公開されています
    * https://419.ecma-international.org/ 
* 情報源として、2024年4月に[日本語翻訳プロジェクト](https://github.com/Moddable-OpenSource/moddable-jp)が開始され、現在も翻訳作業は進んでいます

## 2. Moddableをはじめよう

* 環境構築手順は、Moddableのリポジトリから最新のものを参照しましょう
* [xs-dev](https://xs-dev.js.org/)というModdableおよびESP-IDFなどのツールチェインまで自動的にセットアップするCLIツールが誕生したので、それを使えば環境構築はすぐに完了するようになりました

* `mcconfig`実行時に`env ESPBAUD=1500000 DEBUGGER_SPEED=1500000` を指定していますが、これらは各デバイスごとの`manifest.json` で指定されるようなったため付与は不要になります
    * 例）M5stick-cの[manifest.json](https://github.com/Moddable-OpenSource/moddable/blob/public/build/devices/esp32/targets/m5stick_c/manifest.json)

## 3. サンプルで理解するModdable

* 3.2でM5Stackのディスプレイ色反転問題の処置方法がありますが、これは自動的に判別して正しい色となるように修正されているため、現在では起きない問題です
* 3.2末の起動音鳴らさないについては、`manifest.json` で制御できるようになっています。`config.startupSound`を空文字にしましょう
    * core2の起動時のバイブレーションも同様に `config.startupVibration`を`0`にすると無効になります
* 3.6、3.7でドライバーを実装していますが、最近では[Ecma-419準拠で実装する](https://github.com/Moddable-OpenSource/moddable/tree/public/modules/drivers/sensors)ことが多いです
* 3.8、3.9のネットワークス関連機能もEcma-419のものが使えますが、特にHttpリクエストでは`fetch`が使えるようになっています

## 付録A

* JavaScriptで開発できるIotプラットフォームでは、[DeviceScript](https://microsoft.github.io/devicescript/)や[Edison.js](https://github.com/edison-js/Edison)が誕生しています。私はどちらも触ったことがないですが、認識としては遠隔操作方式に該当します

## 付録B

* npmを使った外部パッケージの追加は、[mcpack](https://github.com/Moddable-OpenSource/moddable/blob/3bf520227129bd7f4445f2422b18335346294db5/examples/packages/readme.md)という新しく追加されたコマンドを使うとできるようになります
    * とは言えAPI互換性の問題やコードサイズやメモリ使用量といった課題があることには変わらずです
    * Moddableに特化した外部パッケージをnpm経由で追加することもできますが、現時点でそういったモジュールを開発している事例はほとんど見たことがありません
    * また、外部モジュールを利用する仕組みとしては、マニフェストファイルに[対象gitリポジトリのURLとマニフェストファイルパスを指定する方法](https://github.com/Moddable-OpenSource/moddable/blob/3bf520227129bd7f4445f2422b18335346294db5/documentation/tools/manifest.md#including-git-repositories)も追加されています

## おわりに

出版から今までの大きなトピックとしては、著者であるししかわさんが手のひらサイズロボットの[ｽﾀｯｸﾁｬﾝ](https://github.com/stack-chan/stack-chan/)の開発が始まります。TypeScriptメインでの実装やModdableの機能をふんだんに盛り込んだソフト構成となっており、ｽﾀｯｸﾁｬﾝ駆動でModdableへコントリビューションすることもしばしば。一方で、ｽﾀｯｸﾁｬﾝからModdableに入門したもののキャッチアップする事項が多いことも課題となっており、そこで、[アールティ版ｽﾀｯｸﾁｬﾝで始めるModdable入門](https://qiita.com/stc1988/items/e1124049976e2324809b)という駆け足気味の入門記事を書いたりもしましたので、もし興味があればご参照ください。
Lambdaでrequestsモジュールを使おうとしたときに発生したエラーと対処法

# はじめに
Lambdaでrequestsモジュールを使おうとしたところ下記のエラーが発生。
エラー対象の備忘録も兼ねて本記事を作成。

```:error
"Unable to import module 'lambda_function': No module named 'requests'"
```

# 原因
Layerを追加できてないかったから。

# 環境
- windows
- python 3.12

# やったこと
ローカルでpythonフォルダを作成しライブラリをインストール。
zip化したpythonフォルダをLambdaのLayerに追加する。


## pythonフォルダを作成

フォルダを作成します。

```
mkdir python
```

:::note warn

フォルダ名は`python`とすることに注意。
参考：https://soypocket.com/it/aws-lambda-python-error-no-module-named/

:::


## モジュールのインストール

requests モジュールをインストールします。

```
pip install -t python requests
```
https://pypi.org/project/requests/


# zipファイル化

対象のpythonフォルダをzip化します。
GUI操作でzipファイル化したのでコマンドは省略します。


# レイヤーの作成

Lambda > レイヤー > レイヤーの作成 からzipファイルをアップロードします。
項目は以下の内容で設定。

- 互換性のあるランタイム：python3.12
- 互換性のあるアーキテクチャ：x86_64

# レイヤーの選択 & 実行

対象のLambda関数の「レイヤーの選択」から作成したレイヤーを選択します。
ここまでできたらLambdaを実行してエラー出ないことを確認できました。

# 参考

https://soypocket.com/it/aws-lambda-python-error-no-module-named/

https://qiita.com/afukuma/items/b7191025700a7829967c
3.4.ChromeDriverの更新、バージョン確認


**3.4.ChromeDriverの更新、バージョン確認**

ChromeDriverの更新方法、バージョンの確認方法についてまとめます。


・目次
3.4.1.ChromeDriverの更新方法
3.4.2.ChromeDriverのバージョン確認方法


<br>
<br>
<br>
<br>

**3.4.1.ChromeDriverの更新方法**
ChromeDriverを更新するには以下の通りがある。

①以下からChromeDriverをダウンロードする
　メリット：バージョンの指定できる
　・3.3.ChromeDriverのインストール
 
https://qiita.com/BubbleBubble/items/d792505582b966bf4941

②コマンドプロンプトにて以下コマンドを実行する。
　メリット：バージョンを指定せず自動で更新できる

```コマンドプロンプト.
>pip install chromedriver-binary-auto
```
※pipが古い場合、pipを更新する必要あり。

<br>
<br>
<br>

**3.4.2.ChromeDriverのバージョン確認方法**
ChromeDriverの格納先を開き、chromedriver.exeをダブルクリックすることでコマンドウィンドウが表示される。
赤枠にバージョンの記載あり。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476538/f43f0f4f-72eb-303b-8ee1-95f7ffb3dbcc.png)


ChromeDriverの格納先を調べるには、以下のサイトを参照し、タスクマネージャーからChromeDriver.exeを開くことで格納場所を開くことができる。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476538/61dfeb5f-d0c9-4a72-8c41-f18154695640.png)


https://prtn-life.com/blog/chromedriver-dir#toc6


<br>
<br>
<br>

以上！
Markdown原稿をRe:VIEW原稿に書き換える手順

Markdownで書いた原稿をRe:VIEW形式に書き換えたい時がたま〜にあるので手順をメモ📝
参考: [Re:VIEW フォーマットガイド](https://github.com/kmuto/review/blob/master/doc/format.ja.md)

# 1. 改ページの記述を削除

```
検索: <div style="page-break-before:always"></div>
置換:
```

2行以上の空行は正規表現で空行に置き換え

```
検索: ^\n{2,}
置換: \n
```

# 2. 見出しを置き換え

シャープ3つはイコール3つ、シャープ2つはイコール2つ、シャープ1つはイコール1つに置き換え

```
検索: ### 
置換: === 
```

# 3. インラインコードの置き換え

```
検索: `(.+?)`
置換: @<code>{$1}
```

# 4. コードの置き換え

置き換え範囲や改行箇所、コードの言語に注意
javascriptのコードの場合:

```
検索: ^`{3}javascript$\n([\s\S]*?)\n`{3}$
置換: //listnum[識別子][キャプション][js]{\n$1\n//}
```

# 5. 画像用記述の置き換え

これはほとんど自分用メモ
画像掲載用のimgタグとキャプション用のpタグを書いているので、これを画像のパスとキャプションに転用
パスの構成が変わる場合は注意
あとパスに拡張子は不要なので先に `.png` などを検索して消しておくといいかも

```
元の記載はこんな感じ
<img src="/path/image.png">
<p>キャプション</p>

検索: <img src="([^"]+)">\n<p>(.*?)<\/p>
置換: //image[$1][$2]
```

# 6. 太字の置き換え

```
検索: \*\*(.*?)\*\*
置換: @<strong>{$1}
```

# 7. リンクの置き換え
リンクタイトルとリンクURLを分解していい感じに配置

```
検索: \[(.*?)\]\((.*?)\)
置換: $1 @<href>{$2}

例
置換前: [Qiita](https://qiita.com/)
置換後: Qiita @<href>{https://qiita.com/}
```

# 8. 箇条書きの修正
Markdownの箇条書きの行頭にスペースをひとつ足す
入れ子を記法にそって修正

```
* 箇条書き1
* 箇条書き2
  * 箇条書き2-1
  * 箇条書き2-2
↓
 * 箇条書き1
 * 箇条書き2
 ** 箇条書き2-1
 ** 箇条書き2-2
```
Python Tkinterとラズパイで自分専用のダッシュボードアプリを作ってみる #4 室内の温湿度を計測する

# 概要
デジタルダッシュボード作成 第四弾。
温度と湿度を測定するDHT22を購入したので、ラズパイと接続させ動作するのか確認します。

この記事はそのメモやまとめです。
すでに設定済みの項目がいくつかある。
試行錯誤しながらやったので、手順として不要かもしれない。**あくまでメモ用。**

# 実装したい内容とか整理
ここでは
・温度
・湿度
をラズパイ上できちんと計測してくれるかまでやります。

## 測定準備
https://zenn.dev/hasegawasatoshi/articles/f4708b23077cf7

の記事を参考にしました。
DHT22の接続は＋/OUT/－になっているので、これをラズパイの2(5v)/7(GPIO4)/9(GND)に接続しました。

ラズパイ側の準備をします。
```
# 必要となるパッケージインストール
sudo apt-get install libgpiod2

# 仮想環境の作成
python -m venv .venv
. .venv/bin/activate

# adafruit-circuitpython-dht をインストール
pip install adafruit-circuitpython-dht
```

測定用のコードを準備します。  
基本的にはそのままですが、board.D4と自分の環境に合わせたボード番号に変更しています。

```python:sample.py
import time
import board
import adafruit_dht

dhtDevice = adafruit_dht.DHT22(board.D4)

while True:
    try:
        # Print the values to the serial port
        temperature_c = dhtDevice.temperature
        temperature_f = temperature_c * (9 / 5) + 32
        humidity = dhtDevice.humidity
        print(
            "Temp: {:.1f} F / {:.1f} C    Humidity: {}% ".format(
                temperature_f, temperature_c, humidity
            )
        )

    except RuntimeError as error:
        # Errors happen fairly often, DHT's are hard to read, just keep going
        print(error.args[0])
        time.sleep(2.0)
        continue
    except Exception as error:
        dhtDevice.exit()
        raise error

    time.sleep(2.0)
```

## 測定
準備ができたので実際に動かしてみます。
```
. .venv/bin/activate

python sample.py

 $ python sample.py
Temp: 79.3 F / 26.3 C    Humidity: 55.3%
Temp: 79.3 F / 26.3 C    Humidity: 55.5%
Temp: 79.3 F / 26.3 C    Humidity: 55.6%
Temp: 79.3 F / 26.3 C    Humidity: 55.7%
Temp: 79.3 F / 26.3 C    Humidity: 55.5%
Temp: 79.3 F / 26.3 C    Humidity: 55.4%
Temp: 79.3 F / 26.3 C    Humidity: 55.5%
Temp: 79.3 F / 26.3 C    Humidity: 58.4%
Temp: 79.5 F / 26.4 C    Humidity: 69.2%
Temp: 79.5 F / 26.4 C    Humidity: 77.7%
Temp: 79.7 F / 26.5 C    Humidity: 79.2%
Temp: 79.7 F / 26.5 C    Humidity: 71.9%
Temp: 79.9 F / 26.6 C    Humidity: 66.1%
Temp: 79.9 F / 26.6 C    Humidity: 61.9%
Temp: 79.9 F / 26.6 C    Humidity: 59.6%
Temp: 80.1 F / 26.7 C    Humidity: 57.9%
Temp: 80.1 F / 26.7 C    Humidity: 56.8%
....
```
いい感じに取れてそうです！  
今自室にある温度計と湿度計は  
温度：26.5  
湿度：50％  
でした。  
そもそもこの２つのデバイスの位置がだいぶ離れているので数値が違っているようですが、温度についてはほぼほぼ同じ値でした。

# 次やりたいこと
- 上記の測定結果を利用してダッシュボードに反映させる
- ラズパイ1台で完結するタイプと計測結果をWindowsに転送してWindows上でダッシュボード表示させる2つのパターンを考えたい
【超難問】絶対に解けないJavaScriptクイズ8選

## はじめに

以下のクイズのコードの実行結果をそれぞれ考えてみてください。
一番最後にスライドもあります。

## Q1

```js
console.log(018 - 015);
```

<details><summary>解答</summary>

```txt:実行結果
5
```

</details>

<details><summary>解説</summary>

JavaScript では、先頭に `0` が付いた数字は8進数とみなされます。
しかし、`018`は無効な8進数なので、10進数とみなされる。`015`は8進数となり、13となります。
ゆえに、`018-015 = 18-13 = 5`となります。

</details>

## Q2

```js
const isTrue = true == []; 
const isFalse = true == ![]; 

console.log ( isTrue + isFalse);
```

<details><summary>解答</summary>

```txt:実行結果
0
```

</details>

<details><summary>解説</summary>

まず、1行目を解説します。`true`と`[]`は型が違うので、数値へと変換されます。`Number(true)`と`Number([])`が最初に評価されて、それぞれ`1`、`0`となります。`1==0`となるので `const isTrue = false`となります。

2行目も同様かと思うのですが、`true`と`![]`は両方ともブール値なので、数字に変換されません。また、`[]`は*true*と解釈されるので、`![]`はfalseになります。
ゆえに、`const isFalse = true == false`となり、`const isFalse = false`となります。

以上から最後の行`console.log ( isTrue + isFalse);`は`console.log ( false + false);`となる。 *false*が数値に変化され、`console.log (0 + 0);` 
したがって、`0`が答えとなる。
 
</details>

## Q3

```js
console.log(3 > 2 > 1);
```

<details><summary>解答</summary>

```txt:実行結果
false
```

</details>

<details><summary>解説</summary>

まず、`3 > 2`が*true*と評価されます。
次に`true > 1`ですが、`>`演算子の場合は両方数値型に変換されます。

`Number(true) > Number(1)` => `1 > 1`となるので答えは*false*になります。

</details>

## Q4

```js
console.log(typeof typeof 1);
```

<details><summary>解答</summary>

```txt:実行結果
string
```

</details>

<details><summary>解説</summary>

最初に`typeof 1`が評価され、`number`となります。
`typeof 'number'`は string となるので、string が出力されます。

</details>

## Q5

```js
console.log(('b' + 'a' + + 'a' + 'a').toLowerCase());
```

<details><summary>解答</summary>

```txt:実行結果
banana
```

</details>

<details><summary>解説</summary>

`'ba' + + 'a'`は `'ba' + NaN`になります。
`+ 'a'` の `+` はプレフィックス演算子となり、`Number('a')`と等しいです。
ゆえに以下のように評価されます。

```txt
'b' + 'a' -> 'ba'
'ba' + + 'a' -> 'ba' + NaN -> 'baNaN'
'baNaN' + 'a' -> 'baNaNa'
'baNaNa'.toLowerCase() -> 'banana'
```

</details>

## Q6

```js
console.log(typeof NaN);
```

<details><summary>解答</summary>

```txt:実行結果
number
```

</details>

<details><summary>解説</summary>

NaNの型は **number** (数値型) です。

</details>

## Q7

```js
console.log(0.1 + 0.2 == 0.3);
```

<details><summary>解答</summary>

```txt:実行結果
false
```

</details>

<details><summary>解説</summary>

`0.1 + 0.2`は **0.30000000000000004** となります。
なので、`console.log(0.30000000000000004  == 0.3);`　となり、答えは *false*となります。

</details>

## Q8

```js
const numbers = [33, 2, 8];
numbers.sort();
console.log(numbers[1])
```

<details><summary>解答</summary>

```txt:実行結果
33
```

</details>

<details><summary>解説</summary>

JavaScript では以下のような配列も可能である。

```js
const array = ["1", true, 55, 1.421, "foo", {}];
```

`Array.prototype.sort`では、配列を一度stringにしてからソートする。

上記の問題の場合だと、ソート時に`["33", "2", "8"];`とみなされる。
string だと 2 → 3 → 8 の順になるので`numbers.sort()`は`["2", "33", "8"]`となる。よって、答えは33となる。

</details>

## スライド

<script defer class="speakerdeck-embed" data-id="c70ce9c4d6a84c6aa72ebd25ccefa486" data-ratio="1.7777777777777777" src="//speakerdeck.com/assets/embed.js"></script>

## 元ネタ

https://javascriptquiz.com/

さて8問中何問解けましたか？
もし全問解けたらコメントください！(何もないけど)
アプリ起動時間を改善するための高度なテクニック

アプリの起動時間は、ユーザーエクスペリエンスにおいて重要な要素です。起動が遅いとユーザーをイライラさせ、ネガティブなレビューにつながる可能性があります。以下に、iOS開発においてアプリの起動時間を改善するための高度なテクニックを示します：

#### 1. **アプリバンドルサイズの最適化**
   - **未使用のアセットを削除:** 定期的にプロジェクトを監査し、使用されていない画像、音声、その他のリソースを削除します。
   - **画像の圧縮:** ImageOptimなどのツールを使用して、品質を損なうことなく画像を圧縮します。
   - **アセットカタログ:** 画像アセットにアセットカタログを使用し、iOSがデバイスに適した解像度を選択できるようにします。
   - **Bitcode:** Bitcodeを有効にして、App Storeが異なるデバイス向けにバイナリを最適化できるようにします。

#### 2. **遅延読み込み（Lazy Loading）**
   - **リソースの遅延読み込み:** アプリ起動時にリソースを読み込むのではなく、必要な時にのみリソースを読み込みます。
   - **遅延初期化:** オブジェクトを遅延初期化し、必要な時にのみ作成されるようにします。

#### 3. **動的フレームワークの削減**
   - **フレームワークの最小化:** 動的フレームワークの数を制限します。各フレームワークは起動時間を増加させるためです。
   - **静的ライブラリ:** 可能な場合は、動的フレームワークではなく静的ライブラリを優先します。

#### 4. **App Delegateの最適化**
   - **最小限の初期化:** `application(_:didFinishLaunchingWithOptions:)` メソッドをできるだけ軽量に保ちます。
   - **非同期操作:** 重要な初期化タスク以外はバックグラウンドスレッドにオフロードします。

#### 5. **Swiftの並行処理機能を活用する**
   - **Async/Await:** Swiftのasync/awaitを使用して、非同期タスクをより効率的に管理します。
   - **Actors:** 並行処理に安全な方法で状態を管理するために、アクターを使用します。

#### 6. **Instrumentsを使用したプロファイリング**
   - **タイムプロファイラ:** タイムプロファイラを使用して、起動時間がどこで消費されているかを測定し、理解します。
   - **アクティビティモニタ:** CPUとメモリの使用状況を追跡し、ボトルネックを特定します。

#### 7. **キャッシュの事前ウォームアップ**
   - **データの事前読み込み:** アプリのインストール時や更新時に重要なデータを事前に読み込みます。
   - **メモリ内キャッシュ:** 頻繁にアクセスされるデータに対して、メモリ内キャッシュを使用します。

#### 8. **StoryboardとXIBの最適化**
   - **Storyboardの分割:** 1つの大きなStoryboardではなく、複数の小さなStoryboardを使用します。
   - **Autolayoutの削減:** Autolayoutの制約を簡素化するか、静的レイアウトにはフレームを使用します。

#### 9. **起動時のI/Oを削減**
   - **データベースの最適化:** 起動時のデータベースアクセスとクエリを最適化します。
   - **ファイルアクセス:** 起動時のファイルの読み書きを最小限に抑えます。

#### 10. **バックグラウンドフェッチを使用**
   - **バックグラウンドでのフェッチ:** バックグラウンドフェッチを活用して、ユーザーがアプリを開く前にコンテンツを更新します。
   - **プッシュ通知:** サイレントプッシュ通知を使用して、データを最新の状態に保ちます。

#### 11. **Swiftコードの最適化**
   - **ビルド構成:** パフォーマンスのためにReleaseビルド構成を使用します。
   - **Swiftコンパイラフラグ:** パフォーマンスのためにSwiftコンパイラの設定を最適化します。
   - 
#### 12. **依存性注入のオーバーヘッドを最小化**
   - **積極的な注入:** 重要な依存関係に対しては、遅延を避けるために積極的な注入を検討します。
   - **依存グラフの最適化:** 初期化時間を削減するために、依存グラフを最適化します。

### 結論
アプリの起動時間を改善するには、リソースの最適化、初期化の最小化、並行処理機能の活用を組み合わせる必要があります。定期的なプロファイリングとパフォーマンステストは、ボトルネックを特定し、対処するために不可欠です。これらの高度なテクニックを実装することで、アプリユーザーにとってより高速でスムーズな体験を確保できます。