OmniAICreator/Qiita-1.07M huggingface dataset:
PCではテキストを1行目で三点リーダーを表示して、SPでは2行目で表示する方法

## 今回の背景
要件によってはPCでテキストを一行だけで改行せずに三点リーダーを表示し、SPでは二行目以降で改行せずに三点リーダーを表示することがあります。自身が少し時間をかけてしまったので、アウトプットで投稿しようと思いました。

## 前回の投稿で
一行で簡単に三点リーダーを表示する記事を投稿しました。
https://qiita.com/naofunky/items/53121855c1d6c376c687

## 前回と異なるポイント
SPのレスポンシブの時の記述に追加するプロパティと書き換えるものがあります。

```index.html
//基本html構造
<div class="mod" style="width: 300px">
        <p class="text">
          ああああああああああああああああああああああああああああああああああああああああああああああああああ
        </p>
      </div>
```
こちらが二行で三点リーダーを表示するCSSになります。
```style.css
.text {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
```
前回の一行で三点リーダー表示は下記のようなCSSになります。
```style.css
.text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
```
複数行で三点リーダーにしたい場合は上記のようにします。今回のようにPCでは一行でSPでは2行のようにしたい場合、下記のようにします。

```style.scss
.text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .text {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: auto;
  }
}
```
変更点は`white-space:nowrap;`から`white-space:auto;`に変更するだけです。
是非、参考にしてください。

## 参考サイト
https://and-ha.com/coding/clamp/
ウェブサイト模写：HTML、CSS、JavaScriptを活用した学習方法

ウェブ開発を学び始めると、すぐにHTML、CSS、JavaScriptという三つの核心的な技術に出会います。この三つを理解し、それらをどのように組み合わせて使うかを学ぶことが、ウェブ開発の基礎となります。この記事では、実際のウェブサイトの模写を通じてこれらの技術を学ぶ方法について解説します。

## ウェブサイトの模写とは

ウェブサイトの模写は、既存のウェブサイトのデザインと機能を再現しようとする学習方法です。これにより、HTML、CSS、JavaScriptの構文と使用方法だけでなく、ウェブ開発における一般的なパターンやプラクティスも学ぶことができます。

## 模写のコツ

1. 複製しやすいサイトを選ぶ: 初めて模写を行う際は、シンプルなレイアウトと構造を持つサイトから始めることをお勧めします。これにより、基本的なHTMLとCSSの使用方法を学び、徐々に複雑なサイトへと進んでいくことが可能です。

2. 段階的に進む: サイト全体を一度に模写しようとせず、まずは一部分から始めましょう。例えば、ナビゲーションバーやヘッダー、フッターなどのセクションから始めると良いでしょう。

3. 開発者ツールを活用: ブラウザの開発者ツールを活用することで、元のウェブサイトのHTML、CSS、JavaScriptのコードを確認できます。これにより、特定のスタイルや動作がどのように実現されているかを理解することができます。

## 模写を通じて学べること

1.コーディングスキルの向上: 模写は、HTML、CSS、JavaScriptのコーディングスキルを直接的に向上させるのに役立ちます。また、ブートストラップやjQueryといったライブラリやフレームワークの使用方法も学ぶことができます。

2.デザインパターンの理解: 実際のウェブサイトを模写することで、一般的なデザインパターンやユーザーエクスペリエンスのベストプラクティスを学ぶことができます。

3.問題解決スキルの養成: 模写中には必ず問題や難問に直面します。その都度解決策を見つけ出すことで、問題解決スキルを養成することができます。

ウェブサイトの模写は、ウェブ開発のスキルを効果的に向上させる素晴らしい方法です。初めての方でも、小さなステップから始めて徐々に挑戦的なプロジェクトに取り組むことで、ウェブ開発の世界を探索する楽しさと充実感を味わうことができます。
モーダルウィンドウの意図しない挙動をバブリングを止めて修正した話

## この記事について
今回は、Webページの模写の一環でモーダルウィンドウを実装しようとした際に起きた予期せぬ挙動とその解決方法を備忘録として残しておこうと思います。

## やりたいこと、前提条件・環境など
実装したかったのは以下の2点です。
- ページ上の「ひらく」ボタンをクリックしたらウィンドウが出てくる
- ウィンドウの「とじる」ボタンかウィンドウ以外灰色の部分をクリックするとウィンドウを閉じる

使用言語はHTML、CSS、JavaScriptです。
ブラウザはGoogle Chromeを利用し、VSCodeの拡張機能であるLive Serverを利用して動作確認をしました。

## やったこと
まず以下のコードを実行し動作を確認しました。
<p class="codepen" data-height="300" data-default-tab="js,result" data-slug-hash="mdzNvMV" data-user="junpei314" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/junpei314/pen/mdzNvMV">
  Untitled</a> by junpei osano (<a href="https://codepen.io/junpei314">@junpei314</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 結果
意図した通りに動いた点
- 「ひらく」ボタンをクリックするとウィンドウが表示される
- ウィンドウが表示されている際にウィンドウ以外をカバーしている灰色の部分をクリックするとウィンドウが閉じる

意図しない挙動をした点
- ウィンドウ自体をクリックするとウィンドウが閉じる
- 「とじる」ボタンをクリックしてもウィンドウが閉じない

## 結果を踏まえて試したこと
上記の結果を踏まえ以下のようにコードを変更したところ、うまく動作するようになりました。
<p class="codepen" data-height="300" data-default-tab="js,result" data-slug-hash="qBJegwE" data-user="junpei314" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/junpei314/pen/qBJegwE">
  Untitled</a> by junpei osano (<a href="https://codepen.io/junpei314">@junpei314</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## エラーの原因
結論としては意図しない挙動の２点ともバブリングが原因だということがわかりました。
- 「ウィンドウ自体をクリックするとウィンドウが閉じる」の原因
    - 表示されるウィンドウの親要素に対してクリックイベントが設定されていたため、バブリングが発生しウィンドウが非表示になった
- 「とじるボタンをクリックしてもウィンドウが閉じない」の原因
    - 「とじる」ボタンとその親要素にクリックイベントとして`toggle()`が設定されていた。toggle()は要素の表示と非表示を切り替えるメソッドである。「とじる」ボタンを押した際にクリックイベントのtoggle()が実行され、バブリングにより親要素のtoggle()も実行されていたため、ウィンドウが非表示にならなかった

上記の原因を解消するために以下の変更を行いました。
-  「とじる」ボタンとウィンドウをクリックした際のバブリングを止めるために、`e.stopPropagation();`を追加した
-  `toggle()`を使用せずに表示させたい要素のクリックイベントには`show()`を、非表示にしたい要素のクリックイベントには`hide()`を使用した


## まとめ
今回はバブリングが原因の意図しない挙動について紹介しました。
今回はイベントの伝播を止める形でモーダルウィンドウを実装しましたが、バブリングを止めることで起きる悪影響もあるみたいなのでバブリングを止めずに実装できる方法を模索してみようと思います。


## 参考文献・URL
[バブリング と キャプチャリング](https://ja.javascript.info/bubbling-and-capturing)
[イベントの伝搬をキャンセルする](https://www.javadrive.jp/javascript/event/index11.html)
[DOMイベントのキャプチャ/バブリングを整理する 〜 JSおくのほそ道 #017](https://qiita.com/hosomichi/items/49500fea5fdf43f59c58)
Azureのアクセス、リソース利用に関する制限と事前設定について

Azureだけではなく、パブリッククラウドを利用する際にそれぞれ固有のアクセス方法や利用制限などの事項があります。

Azureに関する該当内容をこの記事でまとめたいと思います。
また、最初は内容が少ないが、随時追加/更新をします。
※内容をすべてベタ打ちで記載するではなく、箇条書きでリンクを記載する形となります。

---
### <事前設定・関連URL>
##### ■ Azure Portal URL
※ログインするにはAzureのユーザアカウントが必要です。

https://ms.portal.azure.com/#home

##### ■ファイアウォールまたはプロキシ サーバーで Azure portal の URL を許可する設定
※FWまたはProxy Serv経由でAzure Portalにアクセスする場合は必要なURLを許可する必要があります。詳細は下記リンクを確認してください。

https://learn.microsoft.com/ja-jp/azure/azure-portal/azure-portal-safelist-urls?tabs=public-cloud

---
---
### <各種制限>

##### ■サブスクリプションにおける各サービスの制限、制約
※Azureにおける管理単位はいくつありますが、各サービスに関するクオータ等の制限、制約はサブスクリプション単位で決められています。

https://learn.microsoft.com/ja-jp/azure/azure-resource-manager/management/azure-subscription-service-limits?toc=%2Fazure%2Fvirtual-network%2Ftoc.json#managing-limits

---
---
### <各種ツール>

##### ■ Azure リソースの料金計算ツール
※ご利用予定のAzureリソースを選択し、リージョンやSKU等の設定値を入力したら、指定期間におけるコスト（料金）は自動的に算出できます。

※各リソースの料金表は別に存在するが、リソースごとにリンクが違うし、リソースによっては設定値別に料金が細かく分かれているのもあり、計算するのは一苦労します。下記ツールを利用すれば計算は簡単かつ楽になります。

https://azure.microsoft.com/ja-jp/pricing/calculator/


今後も随時情報を追加しますので、よろしくお願いいたします。
プログラミング入門コース　１週目

この記事は自分の整理用のメモとして必要な個所や覚えておきたいことなどを忘備録として記載していくことにする。

<h2>1週間の振り返り</h2>
基本的に日中帯と夜間は仕事だったりで、まともに勉強の時間を割くための時間は深夜帯だったりと
時間を確保するのに苦労した。動画の内容や、操作などはそこまで難しくなくわかりやすかった。

<h2>1週間で学んだこと</h2>

HTMLとCSSの基本的な役割について学んだ。また、HTMLでの構築の際に必ずh1の見出しを入れないとWebページなどの検索で引っかからないとかは知らなかったので、聞けて良かった。以下は私が覚えておきたい各コードなどを記載していく。

- CSS
余白調整するとき(外側はmarginを使用内側はpaddingを使用すること)
```index.html
  margin: 20px auto 20px auto;
  padding: 20px 20px 20px 20px;
```

整理するとき
```index.html
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
```
画像を背景として挿入するとき
```index.html
background-image: url('画像のURLを添付する');
background-position: center;
background-size: cover;
```
- [Bootstrap](https://getbootstrap.com/docs/5.0/getting-started/introduction/)
デザインがいいCSSをあらかじめ集めておいたもの
このツールを使用し必要な場所に設置及び編集を行うと簡単にWebサイトを装飾することができる

- [Github](https://github.com/)を使用したWebページ配布
事前にアカウントの作成が必要だが、ローカル環境で作成したWebページをGithubを使用し配布することができる。
    <b>Github pageを使用する上での補足事項</b>
　　　・ファイルをアップロードするときには必ずファイル名は
        　　　　「index.html」でないといけない
　　　・コードの編集を行う際には「code」→「Edit this fale」編集を行う
　　　・若干変更後の反映までに少し時間がかかるため即時反映ではない

<h3>今週の課題提出</h3>

[作成した課題](https://yukisuprta.github.io/mypage/)

<h3>来週の目標</h3>

もう少し勉強時間を増やせるようにほかの仕事を調整したい。
課題を行う時間が短すぎたのでその時間分くらいは確保できるように頑張ります。
外部エンティティを含むxmlファイルを読み込みたい

# 結論

外部エンティティを含むxmlファイルを読み込む際、FileNotFoundExceptionが発生する場合はsystemIdにXMLファイルのパスを設定すると問題が解消します。

# 詳細

employees.xmlは従業員情報を記録したファイルです。このemployees.xmlは外部エンティティとしてemployee1.xmlとemployee2.xmlを参照しています。

```employees.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE employees [
  <!ENTITY employee1 SYSTEM "./employee1.xml">
  <!ENTITY employee2 SYSTEM "./employee2.xml">
]>

<employees>
  <employee>
    <name>山田</name>
    <role>社長</role>
  </employee>

  &employee1;
  &employee2;
</employees>
```

```employee1.xml
<employee>
  <name>鈴木</name>
  <role>営業</role>
</employee>
```

```employee2.xml
<employee>
  <name>佐藤</name>
  <role>経理</role>
</employee>
<employee>
  <name>田中</name>
  <role>人事</role>
</employee>
```

このemployees.xmlを読み込むことを考えて、以下のようなコードを作成&実行したところjava.io.FileNotFoundExceptionが発生しました。

```java
String xmlFile = "D:\\tmp\\employees.xml";
try (InputStream inputStream = Files.newInputStream(Paths.get(xmlFile))) {
    Document document = DocumentBuilderFactory.newInstance()
                                              .newDocumentBuilder()
                                              .parse(inputStream);
    // Do Something
} catch (IOException | ParserConfigurationException | SAXException e) {
    e.printStackTrace();
}
```

これはemployees.xmlの中にある外部エンティティの相対パスがうまく解決できていないことが原因です。そこで、この相対パスを解決するためのベースであるsystemIdにemployees.xmlのパスを設定します。ここでは[DocumentBuilderクラスのparseメソッド](https://docs.oracle.com/javase/jp/8/docs/api/javax/xml/parsers/DocumentBuilder.html#parse-java.io.InputStream-java.lang.String-)の引数としてsystemIdにemployees.xmlのパスを設定したところ、java.io.FileNotFoundExceptionは発生せず、想定通りにxmlファイルの読み込みができました。

```java
String xmlFile = "D:\\tmp\\employees.xml";
try (InputStream inputStream = Files.newInputStream(Paths.get(xmlFile))) {
    Document document = DocumentBuilderFactory.newInstance()
                                              .newDocumentBuilder()
                                              .parse(inputStream, xmlFile); // ★
    // Do Something
} catch (IOException | ParserConfigurationException | SAXException e) {
    e.printStackTrace();
}
```

# 環境

```
D:\>java -version
openjdk version "17.0.3" 2022-04-19
OpenJDK Runtime Environment Temurin-17.0.3+7 (build 17.0.3+7)
OpenJDK 64-Bit Server VM Temurin-17.0.3+7 (build 17.0.3+7, mixed mode, sharing)

D:\>javac -version
javac 17.0.3
```
【PHP】セキュリティを強化する、csrf対策トークンの実装

# 目次
1. はじめに
2. CSRFの対策
3. ワンタイムトークンの生成 
4. リンク先での整合性の確認

# 1. はじめに
CSRFとはクロスサイトリクエストフォージェリ（cross site request forgery）の略です。
簡単に説明しますと、フォームでデータを送信する際、Webアプリケーション利用者が意図しない処理を実行してしまう脆弱性、または攻撃手法のことです。

下の記事が脆弱性について詳しいので、参考にしていただけたらと思います。

https://qiita.com/wanko5296/items/142b5b82485b0196a2da

# 2. CSRFの対策
CSRFの対策として、現在ベストプラクティスの一つとされているのがワンタイムトークンを利用した方法になります。
流れとしては、入力フォームのあるサイトを表示する際、サーバがクライアントに対してランダムな文字列（トークン）を発行します。
データを送信した際に、このトークンがリクエストに入っていなかったり、整合性が取れなかったりすれば、処理を終了することで不正なリクエストを防ぎます。

Laravelフレームワークにおいては「@csrf」によって簡単にトークンが生成されますが、今回は仕組みを知るためにコードを一つ一つ書いていきます。

# 3. ワンタイムトークンの生成
フォームのあるページの最初にトークンを生成するコードを、フォーム内にトークンをhiddenで埋め込みます。

2023/6/4追記：
　ランダムバイトの生成は「openssl_random_pseudo_bytes()」がPHP5.3以降、「random_bytes()」がPHP7以降で使用可能です。
　「openssl_random_pseudo_bytes()」は疑似ランダムコードであり、「random_bytes()」は公式の説明で「Get cryptographically secure random bytes（暗号的に安全なランダムバイトを取得）」とあり、特別の理由がない限り、「random_bytes()」が推奨されるようです。

```form.php
<?php
// セッションの開始
session_start();

// ワンタイムトークンの生成
$toke_byte = random_bytes(16);
$csrf_token = bin2hex($toke_byte);

// トークンをセッションに保存
$_SESSION['csrf_token'] = $csrf_token;
?>

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>フォーム</title>
</head>
<body>
  <form method="POST" action="target.php">

　// hiddenで生成したトークンを埋め込む
  <input type="hidden" name="csrf_token" value="<?= $csrf_token; ?>">
  ...
</form>
<!-- 以下略 -->
```

# 4. リンク先での整合性の確認
POSTでcsrf_tokenのパラメーターが送信されていなかったり、送信されていればその値がセッションに保存された値と一致しなかったりしたときにexitで処理を中止します。

```target.php
<?php
if (!isset($_POST["csrf_token"]) 
 || $_POST["csrf_token"] != $_SESSION['csrf_token']) {
  echo "不正なリクエストです";
  exit();
}
// 以下、処理続行
```
【Neuralangelo】3Dモデリングの未来

# 

こんにちは、3Dモデリングに興味はありますか？もしあなたが3Dモデリングの初心者であったとしても心配は無用です。今日は、NVIDIAが開発した最新の技術、Neuralangeloについて簡単に解説します。

## Neuralangeloって何？

Neuralangeloとは、スマートフォンなどで撮影した動画を3Dモデルに変換するというすごい技術です。まるで彫刻家ミケランジェロが創り出す彫刻のように、細かなディテールとテクスチャまで再現することが可能なんです！

![maxresdefault.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/987057/26252f1a-3735-f9de-e5c5-28d5e1b326c5.jpeg)


## どうやって動くの？

ユーザーがスマートフォンで撮影した動画をアップロードするだけ。後はNeuralangeloが自動で処理を行ってくれます。その過程で、撮影されたビデオの各フレームから3Dモデルを作り上げ、それを基に詳細な形状を削り出すんです。

このプロセスはNVIDIAのグラフィックスカード「RTX」のAIとクラウドを使って行われ、その結果、高度な3Dモデリングが実現されます。そして、最終的には、小さな彫像から巨大な建物まで、詳細な3Dモデルを作成し、それらをビデオゲームや産業用デジタルツインの仮想環境にインポートすることが可能になります。

　

<iframe width="560" height="315" src="https://www.youtube.com/embed/PQMNCXR-WF8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

## なぜこれがすごいの？

それは、Neuralangeloが現在の3Dモデリングのワークフローを大幅に改善する可能性があるからです。従来は高価な3Dスキャナーが必要だったり、専門的な知識が必要だったりと、3Dモデリングは敷居が高いと感じられることが多かったですよね。しかし、Neuralangeloを使用すれば、専門的な知識や機器がなくても、誰でも簡単に3Dモデルを作成できるようになるのです。

このように、Neuralangeloは3Dモデリングのアクセシビリティを向上させ、より多くの人々が3Dモデリングを楽しむことを可能にします。これからの進化が楽しみですね！
最も基本的なNavigationSplitViewのサンプルコード　使い方

## 宣伝

アプリ作っているので入れてみてください！！
よろしくお願いいたします！！

https://apps.apple.com/app/6446189340


https://apps.apple.com/jp/app/meime/id6446994707?l=ja


## 本題



画面の移動はListの
List(selection:
Selectionと、
 NavigationLink(value: 1){
NavigationLinkのValueを使って行います。

クリックされたvalueの値がselectionのバインドされている変数に入るイメージです。

では以下がサンプルコードです。

```Swift
import SwiftUI
import CoreData

struct ContentView: View {

    @State var selected:Int?
    @State var selected2:Int?
    var body: some View {
        NavigationSplitView {

            List(selection: $selected){
                NavigationLink(value: 1){
                    Text("A")
                }
                NavigationLink(value: 2){
                    Text("B")
                }
                NavigationLink(value: 3){
                    Text("C")
                }
            }
        } content: {
            if let selected = selected {
               Text(String(selected))

                List(selection: $selected2){
                    NavigationLink(value: 1){
                        Text("A")
                    }
                    NavigationLink(value: 2){
                        Text("B")
                    }
                    NavigationLink(value: 3){
                        Text("C")
                    }
                }
            } else {
                Text("No Selected")
            }
        } detail: {
            Text("Hi")
            if let selected2 = selected2 {
                Text(String(selected2))
            }else{
                Text("No Selected")
            }

        }

    }


}

```
ネストされたオブジェクトのキーをinputタグのname属性に入れる方法

### ネストされたオブジェクトのキーをinputタグのname属性に入れる場合、キーをドット（.）で連結する方法が一般的です。以下に例を示します。

```javascript:App.js
    const [form, setForm] = useState({
      personalInfo: {
        firstName: "",
        lastName: "",
      },
      contactInfo: {
        email: "",
      },
    });
    
    const handleFormChange = (e) => {
      const { name, value } = e.target;
      const [parentKey, childKey] = name.split("."); // ドットでキーを分割
      setForm((prev) => ({
        ...prev,
        [parentKey]: {
          ...prev[parentKey],
          [childKey]: value,
        },
      }));
    };
    
    return (
      <form>
        <input
          type="text"
          name="personalInfo.firstName"
          value={form.personalInfo.firstName}
          onChange={handleFormChange}
        />
        <input
          type="text"
          name="personalInfo.lastName"
          value={form.personalInfo.lastName}
          onChange={handleFormChange}
        />
        <input
          type="text"
          name="contactInfo.email"
          value={form.contactInfo.email}
          onChange={handleFormChange}
        />
      </form>
    );
```

### 上記の例では、ネストされたオブジェクトのキーをドットで連結してname属性に設定しています。handleFormChange関数では、name属性からドットで分割して親キーと子キーを取得し、正しい場所に値を更新しています。

### このようにすることで、ネストされたオブジェクトの値を正しく更新することができます。
Python(Flask)アプリをGitHubとHerokuでデプロイする

# はじめに
Pythonの軽量なWebフレームワークであるFlaskを使ってWebアプリを作成した時、それをGitHubに保存し、Herokuにデプロイする方法はどうすれば良いのでしょうか。今回はその全手順をご紹介します。

# 1.Python(Flask)アプリをGitHubに保存
まず、作成したPython(Flask)アプリをGitHubに保存します。まずはローカルリポジトリを作成し、そのリポジトリをGitHubにプッシュします。以下のコマンドを実行します。
```bash
# GitHubのリポジトリをクローン
git clone https://github.com/username/myapp.git

# ディレクトリに移動
cd myapp

# ファイルをステージングエリアに追加
git add .

# コミット
git commit -m "Initial commit"

# GitHubにプッシュ
git push origin main
```
# 2. Herokuにデプロイ
次に、Herokuにアプリをデプロイします。まず、Heroku CLIを使ってHerokuにログインします。その後、Herokuに新しいアプリを作成し、作成したアプリに対してGitHubのリポジトリをプッシュします。
```bash
# Herokuにログイン
heroku login

# 新しいHerokuアプリを作成
heroku create myapp

# Herokuにプッシュ
git push heroku main

```

# 3. Pythonパッケージを管理
Pythonのパッケージは、requirements.txtによって管理されます。PCに入っているPythonパッケージをすべて見る方法は以下の通りです。
```bash
pip freeze
```
また、Pythonパッケージをアップグレードするには以下のコマンドを使用します。
```bash
pip install --upgrade package-name
```
プロジェクトに必要なパッケージだけ含め、不必要なパッケージを含めないように requirements.txt ファイルを手動で作成することも可能です。例えば、以下のように記述します。
```bash
flask==2.3.2
gunicorn==20.1.0
```
# 4. GitHubにコードを更新
Pythonコードに変更があった場合、その変更をGitHubに反映させるには、変更をコミットし、そのコミットをGitHubにプッシュします。
```bash# ファイルをステージングエリアに追加
git add .

# コミット
git commit -m "Your message"

# GitHubにプッシュ
git push origin main
```
# 5. Pythonコードの変更をHerokuに反映
Pythonコードに変更があった場合、その変更をHerokuに反映させるには、再度Herokuにプッシュします。
```bash# Herokuにプッシュ
git push heroku main
```
# まとめ
以上、Python(Flask)アプリをGitHubに保存し、Herokuにデプロイする方法をご紹介しました。また、次回以降Pythonコードに変更があった際に、GitHubに保存したコードをアップデートし、その変更をHerokuに反映させる方法も解説しました。また、Pythonパッケージの管理方法についても触れました。これらの手順を通じて、独学でPythonを学び、業務に活用する一助となれば幸いです。
また、更にスキルを深めるためには、[こちら](https://qiita.com/yutut/items/143cfd496a8eef299699)のリンクから学べるAIの各種技術や学び方について調べることをお勧めします。
ABC304といた

[ABC304](https://atcoder.jp/contests/abc304)参加しました unratedは悲しいけどしかたないね
ざっくり感想をば

## A

`min_element`で取得したアドレスで分割代入してつなぎ合わせて出力

## B

文字列でみて3文字出力してあと0で

## C

愚直にやると爆発するので､Union-Findを使いました
memo: `power(A, p)`を使おうな

## D~

わからんので撤退

## 感想

久しぶり(3年)の参加で､意外と楽しかったけど､やり方がわかっているのにWAになるの悔しいのでもっと考察ちゃんとできるようになりたいです｡
GormのMySQLでTLSを用いた接続をしたい

# はじめに

Gormを使って、MySQLに接続したのですが、TLS接続について悩んだのでまとめます

# 問題

DBとして[PlanetScale](https://planetscale.com/sign-up?utm_key=20230010771-153656356230-660654197168&utm_campaign_id=20230010771&utm_source=google&utm_medium=cpc&utm_campaign=&utm_term=planetscale&hsa_acc=5896372272&hsa_cam=20230010771&hsa_grp=153656356230&hsa_ad=660654197168&hsa_src=g&hsa_tgt=kwd-1186727993269&hsa_kw=planetscale&hsa_mt=e&hsa_net=adwords&hsa_ver=3&gclid=CjwKCAjwyeujBhA5EiwA5WD7_XeDPXyAUrn7ewchGRDs-DHaStcZ4IqoRzrPl7lWTNVZtbt2M0U_gxoCvUUQAvD_BwE)を利用しました

PlanetScaleのDSNは以下のようになっています

`${USER}:${PASSWORD}@tcp(aws.connect.psdb.cloud)/${DB_NAME}?tls=true`

Gormで接続してみるとTLSのエラーが出ていました

Gormを調べてもMySQLでTLSが使える感じがしませんでした

# おわりに

ベタ書きでDSNを書いてデバックしたところつながったことからわかりました
そういうでばっくもだいじだとおもいました

# 解決方法

そもそもの話、USERとPASSWORDが間違っており、DSNに`?tls=true`をつければGormにTLSの設定をする必要はなかったです

USERとPASSWORDを正しい値にしたところ動きました

# 参考

https://planetscale.com/sign-up?utm_key=20230010771-153656356230-660654197168&utm_campaign_id=20230010771&utm_source=google&utm_medium=cpc&utm_campaign=&utm_term=planetscale&hsa_acc=5896372272&hsa_cam=20230010771&hsa_grp=153656356230&hsa_ad=660654197168&hsa_src=g&hsa_tgt=kwd-1186727993269&hsa_kw=planetscale&hsa_mt=e&hsa_net=adwords&hsa_ver=3&gclid=CjwKCAjwyeujBhA5EiwA5WD7_XeDPXyAUrn7ewchGRDs-DHaStcZ4IqoRzrPl7lWTNVZtbt2M0U_gxoCvUUQAvD_BwE
GCPのArtifact RegistryにPushするのにus-west-1を使うのに苦戦した

# はじめに

DockerイメージをはじめてGCPにPushしたのですが、全然できずに困ったのでまとめます

# 問題

以下の方法でやったところ、エラーが発生してPushができませんでした

1. レポジトリをGUIで作成する

2. gcloudの設定をする

```
$ gcloud auth login
$ gcloud config set project PROJECT_ID
$ gcloud auth configure-docker
```

3. イメージのビルドとプッシュ

```
$ docker build -t us-west-1-docker.pkg.dev/プロジェクト名/リポジトリ名/api-image .
$ docker push us-west-1-docker.pkg.dev/プロジェクトID/レポジトリ名/api-image
```

すると以下のエラーが出ます

```
error parsing HTTP 404 response body: invalid character '<' looking for beginning of value: "<!DOCTYPE html>\n<html lang=en>\n  <meta charset=utf-8>\n  <meta name=viewport content=\"initial-scale=1, minimum-scale=1, width=device-width\">\n  <title>Error 404 (Not Found)!!1</title>\n  <style>\n    *{margin:0;padding:0}html,code{font:15px/22px arial,sans-serif}html{background:#fff;color:#222;padding:15px}body{margin:7% auto 0;max-width:390px;min-height:180px;padding:30px 0 15px}* > body{background:url(//www.google.com/images/errors/robot.png) 100% 5px no-repeat;padding-right:205px}p{margin:11px 0 22px;overflow:hidden}ins{color:#777;text-decoration:none}a img{border:0}@media screen and (max-width:772px){body{background:none;margin-top:0;max-width:none;padding-right:0}}#logo{background:url(//www.google.com/images/branding/googlelogo/1x/googlelogo_color_150x54dp.png) no-repeat;margin-left:-5px}@media only screen and (min-resolution:192dpi){#logo{background:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) no-repeat 0% 0%/100% 100%;-moz-border-image:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) 0}}@media only screen and (-webkit-min-device-pixel-ratio:2){#logo{background:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) no-repeat;-webkit-background-size:100% 100%}}#logo{display:inline-block;height:54px;width:150px}\n  </style>\n  <a href=//www.google.com/><span id=logo aria-label=Google></span></a>\n  <p><b>404.</b> <ins>That’s an error.</ins>\n  <p>The requested URL <code>/v2/lightning-neko-talk/lt-api/api-image/blobs/uploads/</code> was not found on this server.  <ins>That’s all we know.</ins>\n"
```

# 解決方法

イメージ名のリージョンが間違っていました

**us-west-1**としていましたが**us-west1**とする必要があります
また、pushにはタグは絶対指定する必要があります

```
$ docker build -t us-west1-docker.pkg.dev/プロジェクト名/リポジトリ名/api-image:latest .
$ docker push us-west1-docker.pkg.dev/プロジェクト名/リポジトリ名/api-image:latest
```

# おわりに

なかなかPushできなくてつらかったです。AWSはけっこう簡単だなと思ってしまいました
Pushコマンドを載せてほしい、、

# 参考

https://zenn.dev/sasakiki/articles/57c833fbcf7fea
jsでオブジェクトを配列に変換する

# はじめに
　サーバー側で受け取ったオブジェクトを配列に変換する方法の備忘録です。
　mapメソッドを使用するにあたり配列にしろと怒られたので心当たりのある方は是非

# 結論
`Object.entries`メソッド
`Object.keys`メソッド
`Object.values`メソッド
を用途によって使い分ける

## Object.entriesメソッド
`Object.entries`メソッドはkeysとvaluesの両方を配列化することができる

```javascript:
let fruit = { 
              "apple": "りんご",
              "orange": "オレンジ",
              "banana": "バナナ" 
            }

console.log(Object.entries(fruit));
```
#### 結果
```javascript:
[
  ["apple","りんご"],
  ["orange","オレンジ"],
  ["banana","バナナ"]
]
```
このようにkeyとvalueの両方を出力できる

## Object.keysメソッド
`Object.keys`メソッドはkeysのみを配列化することができる

```javascript:
let fruit = { "apple": "りんご",
              "orange": "オレンジ",
              "banana": "バナナ" 
            }

console.log(Object.keys(fruit));
```
#### 結果
```javascript:
[
  ["apple"],
  ["orange"],
  ["banana"]
]
```

## Object.valuesメソッド
`Object.values`メソッドはvalueのみを配列化することができる

```javascript:
let fruit = { "apple": "りんご",
              "orange": "オレンジ",
              "banana": "バナナ" 
            }

console.log(Object.values(fruit));
```
#### 結果
```javascript:
[
  ["りんご"],
  ["オレンジ"],
  ["バナナ"]
]
```
## 最後に
jsは状態管理がすべて
オブジェクトの中身を見て適切なメソッドを使用する必要がある
MediaPipe HandsでDMX照明機器を操作してみた。

# はじめに

現実空間の人の動き(画像認識)に合わせてムービングライトを動かすことを目標に、Art-Net経由でDMX照明機器を制御してみます。

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f37323437392f62663837383538332d623639342d366364612d326563392d6430653761386539363665632e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/08cf3238-ea50-0b82-df4e-08c3206cb551.png)

前回はNode-REDからArt-Netを使用しましたが、今回はブラウザでJavascript版MediaPipeを使用して人の手の動きに合わせてDMX照明機器を操作してみます。
ブラウザでは直接Art-Netを使用できないので、MQTT over WebSocketを使用します。
Node-REDでMQTT over WebSocketからArt-Netへ変換することでDMX照明機器を制御します。

![スクリーンショット 2023-06-03 20.24.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/8ffed09b-62f5-3433-abff-b2e6b9ba68fe.png)

### 参考

https://qiita.com/kitazaki/items/e8515a0b430197296bc1

# p5.js + mediapipe hands

p5.js Web Editorを使用して、Javascript版MediaPipe Handsを実行します。

### 完成版

https://editor.p5js.org/kitazaki-languid/sketches/0-yD3LbQq

### 解説

人の手を認識し、人差し指の位置(横軸方向の値)によってDMX照明機器の色を指定します。
MediaPipe Handsは手の位置を画像サイズに対して0.0〜1.0の相対位置で返します。
画像の左1/3で認識した場合は赤、中央1/3で認識した場合は緑、右1/3で認識した場合は青にします。
人の手を認識した場合は、人差し指の位置によって色の情報をMQTT over WebSocketで送信します。
人の手を認識しなかった場合は、照明を消すため黒色の情報をMQTT over WebSocketで送信します。

![スクリーンショット 2023-06-03 23.40.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/cd67d050-1763-bd90-ea86-991390a08db7.png)

### 参考

https://qiita.com/youtoy/items/70571c7066d41729c2bd

https://qiita.com/youtoy/items/7c58de69b4b20543a5b5

# Node-RED

Node-REDのサンプルフローです。

![スクリーンショット 2023-06-03 23.28.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/0ff8bbc2-845d-636a-4afc-fd2085457891.png)

サンプルファイル(flows.json)はこちらです。

https://github.com/kitazaki/ArtNet_DMX/blob/master/20230603_mqtt_websocket_artnet_dmx_flows.json

# 完成形

### 動画デモ

https://youtu.be/H11ODAsWkvk
CloudRunでSecretを設定するとバリデーションエラーになる

# はじめに

CloudRunを初めて利用したのですが、そこでSecretを設定するのにかなり時間がかかったのでまとめます

# 問題

CloudRunにシークレットを設定します

そして「完了」を押すと以下のエラーが出ます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/a5b56000-d05e-2274-717c-440252a396c7.png)

どうやったらシークレットを追加できるのか悩みました

# 解決方法

「完了」を1度も押さずにCloudRunを作成するとうまく行きました

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/512cff5c-899c-7c14-0014-08e4aa89ccf2.png)

この状態でCloudRunを作成

# おわりに

これはどんな仕様なのか、バグなのかよくわかりませんでした
認証局を作って遊んでみよう。その①：検証環境を用意しよう

## 認証局を作って遊んでみる

とあるOSSのWebシステムは複数のAPIサーバがお話しながら機能を提供する。この時、**httpは認められずhttpsだけがサポートされるという状態であった。** オレオレ証明書を用いてやればいい。OpenSSLがあれば可能さ。。**そう思っていた時期が僕にもありました** 実際にはうまくいかずはまる結果に・・・

そこで、**ありものパッケージを使って、自己認証局を作ったほうがうまくいくのでは？** と考え実行した結果、難なく実現できたのでその手順と得た知識をまとめようと思います。

## 記事構成

こんな記事構成で進めてい効く予定です。お楽しみに

|No.|記事|概要|
|--|--|--|
|1.|その①：検証環境を用意しよう|NGINXを用意してHTTPS待ち受けを開始するまで|
|2.|その②：HTTPS(HTTP over SSL/TSL)の概要とCAの役割|HTTPSってなんだっけ？のおさらいとCAの役割|
|3.|その③：CAを作ってみよう|Easy-rsaを使った認証局の構築(=設定)|
|4.|その④：Webサーバに証明書を導入してみkよう。|3の認証局で作ったサーバ証明書を用いてHTTPS通信をしてみる。|

## 環境準備

### 論理構成

今回「認証局=(CA)」が発行する証明書を使ってHTTPSをやってみようというテーマなので、次の図に示すような登場人物が出てきます。

![CA構成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837176/4d9dbe48-14fd-cece-ad0b-b232525b6ce3.png)

#### Blowser
HTTPサーバと通信をして何らかの情報をやり取りする。例えば、決済データなどなど

#### HTTP Server
Blowserと通信をして何らかの情報をやり取りする。また、クライアントからの情報を元に何らかの処理をする。(今回は、「通信」にフォーカスしています)

#### 認証局
通信相手の身元を保証する。「通信レベル」ってのが大事

### 今回の物理構成
本来、前述の構成にして一つ一つ別の仮想サーバにするのが理想なんでしょうが、リソースの無駄なので認証局とHTTPサーバを同一の仮想マシンに実装します。

![物理構成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837176/3bd0ece0-c825-7e63-97e4-9b5c624570bd.png)




### 導入ソフト一覧

|No.|実装箇所|導入ソフト|概要|
|--|--|--|--|
|1.|WSL|Ubuntu 22.04|WSL上で動作するLinuxディストリビューション|
|2.|WSL|NGINX|Webサーバ|
|3.|WSL|easy-rsa|CAユーティリティ|



### 1. OS

[この記事](https://www.osarusystem.com/misc/windows11_wsl_ubuntu2204.html)を参照して導入する

### 2. Nginx

1.aptのリポジトリ情報を最新化する
```bash
sudo apt-get update
```
2.nginxを導入する
```bash
sudo apt-get install -y nginx
```
3.疎通確認する
```bash
curl http://localhost/

<コマンド実行結果>
<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
<style>
    body {
        width: 35em;
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
    }
</style>
</head>
<body>
<h1>Welcome to nginx!</h1>
<p>If you see this page, the nginx web server is successfully installed and
working. Further configuration is required.</p>

<p>For online documentation and support please refer to
<a href="http://nginx.org/">nginx.org</a>.<br/>
Commercial support is available at
<a href="http://nginx.com/">nginx.com</a>.</p>

<p><em>Thank you for using nginx.</em></p>
</body>
</html>

```

### 3.easy-rsa
1.aptのリポジトリ情報を最新化する
(すでにnginx導入時にやっていれば不要)
```bash
sudo apt-get update
```
2.easy-rsaを導入する
```bash
sudo apt-get install -y easy-rsa
```

以上で必要ソフトウェアの導入が終了しました

## 疎通確認
すでにnginxは起動していますので(インストール時にサービスとして起動している)ホストOS(Windows)でブラウザを立ち上げて、接続してみましょう

まずはubuntuで以下のコマンドでIPアドレスを確認します。

```
ip address show
```

出力される画面から192で始まるIPアドレスを確認します。

![アドレス確認.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837176/d677da5d-88e0-5ac8-306f-43d918f40c91.jpeg)

このアドレスをそのままブラウザのアドレス欄に入力します**http://192.168.55.42(この場合)**

![ブラウザ確認.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837176/cc04c170-2360-b43d-46f2-1205beadfe92.jpeg)

ここまでで、各種ソフトウェアの追加作業は終了です。

次回はまずTSL/SSLの概要の説明をしたいと思います。

[次の記事＞＞](https://qiita.com/shupeluter/items/a8ed36503600f106f1bc)
DockerでPythonのDjangoを起動させる方法

# やりたいこと
DockerでPythonのフレームワークであるDjangoを起動させる
### 参考にした記事
https://docs.docker.jp/compose/django.html
https://it-dxblog.com/django-docker/

## 前提条件
Dockerインストール済み
docker-compose コマンドを利用できること

## 開発端末
MacBook Air M2チップ(macos Ventura 13.4)

## コード
ソースコードをGitHubにアップロードしておりますので、ご参照ください。
https://github.com/kazunobu2022/docker-django-sample

## Dockerfileの作成
適当なディレクトリを作成し、その配下にDockerfileを作成します。

```:Dockerfile
FROM python:3
ENV PYTHONUNBUFFERED 1
RUN mkdir /code
WORKDIR /code

RUN pip install --upgrade pip
RUN pip install Django

# 依存パッケージをrequirements.txtに記述
ADD requirements.txt /code/
RUN pip install -r requirements.txt
COPY . /code/
```

## requirements.txtの作成
Dockerfileと同じとこに、requirements.txtを作成
このファイルは Dockerfile 内の RUN pip install -r requirements.txt というコマンドにおいて利用されます。
ファイル中に必要なソフトウェアを記述します。Djangoのバージョンもここで指定出来ます。今回は最新バージョンがインストールされます。
```:requirements.txt
Django
```

## docker-compose.ymlの作成
Dockerfileと同じとこに、docker-compose.ymlを作成
このファイルは、Docker Composeを使用するための設定ファイルで、複数のコンテナ間の関係や環境変数などが記述されます。
```:docker-compose.yml
version: '3'

services:
  web:
    build: .
    command: python manage.py runserver 0.0.0.0:8000
    volumes:
      - .:/code
    ports:
      - "8000:8000"
```

## コマンド実行
コンテナを起動させ、bashでコンテナの中に入ります
```
docker compose run --rm web bash
```

コンテナの中でDjangoプロジェクトを作成します。
```
django-admin startproject config .
```
こんな感じになります。
![スクリーンショット 2023-06-03 23.16.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2983197/0427eba9-0f58-248f-aabf-bbbe74d47774.png)

最後にこのコマンドが成功したら終了です
```
docker-compose up
```
成功したらこんな感じの出力がされます。
![スクリーンショット 2023-06-03 23.19.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2983197/87b1b637-3d36-43dc-f939-29e10f49a69e.png)

## アクセス確認
`http://localhost:8000/`にアクセスして次のように表示されれば成功です。

![スクリーンショット 2023-06-03 23.21.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2983197/16b4c6e9-23b0-9e4d-1741-c0d8e4a9e788.png)


# お疲れ様でした！！！
React Datepicker の記述覚書

React Datepicker を利用して複数の入力フォームを作成したところ、日付フォームが他の Datepicker の裏に　(z-index に負けて)　隠れてしまうのを回避する策を考える前に、別の方法で実装してしまった。

とはいえ、React Datepciker の設定に苦労したので、備忘録として記述を残しておく。

```typescript
import {useState} from 'react';
import DatePicker, { registerLocale }  from "react-datepicker";
import ja from 'date-fns/locale/ja'
import "react-datepicker/dist/react-datepicker.css"

...

export default const Home = () => {
    // React Datepciker の表示を日本語化する
    registerLocale('ja', ja)

    const today = new Date();
    const [formDate, setFormDate] = useState(today);

    return (
        <form>
            <label htmlFor="datepicker">日程</label>
            <DatePicker
                id="datepicker"
                locale="ja"
                name="selected-date"
                className="your-css-selector"
                dateFormat="yyyy/MM/dd"
                selected={formDate}
                minDate={today}
                onChange={(selectedDate) => {setFormDate(selectedDate || today)}}
            />
        </form>
    );
}
```
【SwiftUI】省略せずにTextを絶対にn行で収めたい時の必殺技

# はじめに
アプリを作っているとデザイン的にどうしても1行で収めたい！
とかよくありますよね。

省略させずに全文表示させるために自動でフォントサイズを調整してくれる機能があります。
今回はそれを記事にしようと思います。

# 実装
```diff_swift
import SwiftUI

struct ContentView: View {
    @State private var text = ""
    
    var body: some View {
        VStack(spacing: 50) {
            Text(text)
                .font(.system(size: 30))
+               .lineLimit(1)
+               .minimumScaleFactor(0.1)
            
            TextField("", text: $text)
                .textFieldStyle(.roundedBorder)
        }
        .padding(20)
    }
}
```

# 動画
文字数に応じてフォントサイズが小さくなっていきます。
どんなに文字数が多くなっても2行になることはありません。
![Simulator Screen Recording - iPhone 14 - 2023-06-03 at 22.51.05.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/6439c64e-7b33-11d4-1ad9-ad8132c690c2.gif)

# おわり
UIKitでいう`adjustsFontSizeToFitWidth`かなと思います
k8s Failed to pull image 403 Forbidden

GKE の Pod で private repo の GHCR から docker image を pull する時にエラーが発生
```
Failed to pull image "ghcr.io/organization/repository:pr-1": rpc error: code = Unknown desc = failed to pull and unpack image "ghcr.io/organization/repository:pr-1": failed to resolve reference "ghcr.io/organization/repository:pr-1": pulling from host ghcr.io failed with status code [manifests pr-1]: 403 Forbidden
```

imagePullSecretsなどは合っているはずだったがpullできず苦戦
organizationのPersonal access tokensの設定でPersonal access token (classic)がRestrict access via personal access tokens (classic)になっていた...
【環境構築】AnacondaでStreamlitを実行

# Anaconda Promptを起動

Anacondaフォルダ内にあるAnaconda Promptを起動します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784589/a535bac6-ab07-592a-751b-39cfa5f359a9.png)

# 仮想環境の作成

仮想環境の一覧表示
```
conda info -e
```

仮想環境の作成
```
conda create in 仮想環境名
```

# 作成した仮想環境への切り替え
```
conda activate 仮想環境名
```

# ライブラリのインストール

※必要の応じてインストールしてください。
```
conda install -c conda-forge streamlit -y
conda install -c conda-forge opencv -y
```

# 仮想環境を起動
```
streamlit hello
```
ブラウザ上で自動的に以下のページが表示されれば完了です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784589/99d189f0-b481-b2ae-ff47-d6a099392059.png)
【Error】Anacondaでの環境構築中に「ImportError: DLL load failed while importing _imaging」

AnacondaでStreamlitの環境構築中にエラーがでました。
```
ImportError: DLL load failed while importing _imaging: 指定されたモジュールが見つかりません。
```

# 対処法

仮想環境をアクティベートします。
```
conda activate 仮想環境名
```

Pillowパッケージ(PILのフォーク)をアンインストール
```
pip uninstall Pillow
```
Pillowを再インストール
```
pip uninstall Pillow
```
鳩の巣原理を使って2個のヒューズ探し問題を解く

### 鳩の巣原理

鳩の巣原理は非常に単純な原理ですが以下のリンクでも紹介されているように多くの応用が可能です。

> [鳩ノ巣原理の意味と例（身近な例から超難問まで）](https://manabitimes.jp/math/692)

ここではその応用の1つをを紹介します。

### 2個のヒューズ探し問題

**[問題]** 壊れた回路を直すためにヒューズが2個必要です、N個のヒューズがありますがその内、壊れていないのは$m$だけです。見た目には違いは分かりません。2個を装着して初めて2個とも機能することが分かります。少なくとも何回試せば機能する2個のヒューズを見つけることが出来るでしょう？

### N=3, m=2の時

この場合3個の内2個はOKと分かっているので、すべての組み合わせ$\Large \binom {3}{2}$を試せば良いので答えは3回となります。

一般に$m=2$の時には$\Large \binom {N}{2}$回試せば良いことになります。


これを元にすると**いくつかのグループに分解して少なくとも1つのグループは$m=2$となれば**よさそうに見えます。

### 鳩の巣原理を使う

鳩の巣原理を使ってこれを実現するためには以下の手順で行います。

* すべてのヒューズを$(m-1)$のグループに分ければ少なくとも1つは動くヒューズを2個含む
* この各グループごとにすべての2個の組み合わせを試せば2個含むグループで動く組み合わせを見つけることが出来る。

### N=10, m=4の時

$(m-1)=3$なので3つのグループになるべく公平に分けます。このとき鳩の巣原理によりどれがのグループはOKを2個含んでいる（この場合はグループ３）ので、各グループごとにすべての2個の組み合わせを試せば必ず見つかることになります。

|グループ| 1| 2| 3|
|:---:|:---:|:---:|:---:|
|ヒューズの数 | 3| 3| 4|
|OK の数| 1| 1| 2|

この場合の試行回数$T$は以下のように求まります。

```math 
T = 2 \times \binom {3}{2} + 1 \times \binom {4}{2} \\
= 2*3 + 6 = 12

```

### 一般解

これを元に一般解は以下のようになります。

```math 
N = (m-1) \times q + r とすると \\
ヒューズの数が(q+1)個のグループはr個 \\
ヒューズの数がq個のグループは(m-1-r)個 \\
なので、\\
T = (m-1-r) \times \binom {q}{2} + r \times \binom {q+1}{2} \\
=  (m-1-r) q(q-1)/2 + r(q+1)q/2 \\
= q ((m-1)(q-1) + 2r)/2
```

N=10の時の$2 \le m \le 10$の時の結果は以下のようになります。
|m | m-1| q | r | T |
|:---:|:---:|:---:|:---:|:---:|
|2 | 1| 10 |0 | 45 |
|3 | 2| 5 |0 | 20 |
|4 | 3| 3 |1 | 12 |
|5 | 4| 2 |2 | 8 |
|6 | 5| 2 |0 | 5 |
|7 | 6| 1 |4 | 4 |
|8 | 7| 1 |3 | 3 |
|9 | 8| 1 |2 | 2 |
|10 | 9| 1 |1 | 1 |


この考え方はProject Euler Problem 713: Turán's water heating systemを解くのに役に立ちます。
【Flutter・Android】ブラウザを開く際「ERR_CLEARTEXT_NOT_ PERMITTED」が出たときの対処法

# 問題
FlutterやKotlinでAndroidアプリを開発した際、ブラウザを開こうとすると以下のような<b>「ERR_CLEARTEXT_NOT_ PERMITTED」</b>というエラーが出ることがある。

![clear.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1925070/bb533b94-a80d-f8bb-e9b7-5db3bb7a0363.gif)


# 対処法
<b>AndroidManifest.xmlにandroid:usesCleartextTraffic="true"を設定する。</b>

```xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.sample.url">
   <uses-permission android:name="android.permission.INTERNET"/>
   <application
        android:label="url"

        android:usesCleartextTraffic="true" ←これ

        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">
        <activity
            android:name=".MainActivity"
```

すると以下のように、ブラウザを開くことができる。

![http.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1925070/7f3fd3fb-4e53-593b-e9d7-ccc1cb6b0bbd.gif)


# 補足
このエラーはHTTP通信(URLがhttpsではなくhttpから始まる)ときに起こる。<br>
なので、httpsから始まるURLなら上のような修正をしなくてもブラウザを開くことができる。
![https.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1925070/3cba476f-a532-08aa-7673-c0b4a88ba113.gif)
JavaScriptのアロー関数について

アロー関数とは、下記のようなコードのうち、(arg1, arg2)から}までの関数の部分を指します。

```.js
const arrowFunction = (arg1, arg2) => {
    console.log("処理を開始します");
    return arg1 + arg2;
}
```

またアロー関数を使うメリットとしては、関数式による関数宣言を行うよりも、処理を簡潔に記述できる点があります。

例えば、同じ意味の処理をする記述が一行で済む場合には、関数式による関数宣言では複数行のコードが必要なのに対し、アロー関数を用いると一行で済みます。
下記のnormalFunctionとarrowFunctionは共に、引数arg1とarg2を受け取り、その和(arg1+arg2)を返しますが、前者は三行の記述が必要なことに対し、後者は一行で済むことがわかります。

```normalFunction.js
const normalFunction = function(arg1, arg2) {
    return arg1 + arg2
}
```

```arrowFunction.js
const arrowFunction = (arg1, arg2) => arg1 + arg2;
```

一方、本文が複数行のときは、{}は省略できません。
```multiRowArrowFunction.js
const multiRowArrowFunction = arg => {
    console.log(arg);
    return arg * 2;
}

console.log(multiRowArrowFunction(9)); //18が表示される。
```

最後にオブジェクトを戻り値として返したい場合は、丸括弧()の中にオブジェクトリテラル{}を記述する。
```returnObjFunction.js
const returnObjFunction = arg => ({result: arg * 2});

console.log(returnObjFunction(9)); //{result: 18}が表示される。
```
この例ではresultというプロパティを持ったオブジェクトが、関数の実行結果として返却されます。
JavaScriptとJinja2の組合わせは意外に相性が良い事例

### 本記事の背景
JavaScriptとJinja2の組合わせの記事が少なくて、明示している記事があまり見かけない。
本日は簡単でかつ便利の事例を紹介する

### 本記事の前提条件
・Pythonの基本文法を理解している
・Flaskのチュートリアルを理解している
・Jinja2の触ったことがある
・JavaScriptの基本文法を理解している

### まずはサーバー側から
サーバー側からFlaskのRenderTemplateを使用して、以下のデータをフロント側に渡す
```python
@app.get('/')
def index():
	d_x = [80, 50, 90]
	d_y = [30, 40, 50]
	return render_template('index.html', d = zip(d_x, d_y))
```
### HTML側
```HTML
<div class="card-title">graph: 1</div>
      <div>
        <canvas id="ScatterChart" width="400" height="350">
        <script>
          function ScatterChart(){
            var ctx = document.getElementById("ScatterChart");
            var myScatterChart = new Chart(ctx, {
            type: 'scatter', 
            data: { 
              datasets: [
                {
                  label: 'Label test',
                  data: [
                  {% for x,y in dd %}
                    {x: {{ x }}, y: {{ y }}},
                    {% endfor %}
                  ],
                  backgroundColor: 'RGBA(225,95,150, 1)',
                }]
              },
              options: {
              responsive: false
              }
          });
        }
        ScatterChart()
        </script>
        </canvas>
      </div>
```
上記のHTMLの中でとりわけ下記の部分が、今回の重点要素です。
```HTML
 data: [
          {% for x,y in dd %}
          {x: {{ x }}, y: {{ y }}},
          {% endfor %}
       ]
```
{{x}}と{{y}}がJinja2要素をセットしている。
data:[{x:y}]はJavaScriptの要素

### 表示結果

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576081/da09a9da-ccd0-1707-5ded-7f8f0c79b409.png)

### 参考文献
https://qiita.com/Haruka-Ogawa/items/59facd24f2a8bdb6d369


### 制限事項
HTML本体にJavaScriptを記述しないと表示されない。別のJavaScriptファイルに切り出した場合は、Jinjaの変数を使う場合は別途、渡す工夫が必要。完全JavaScriptの文法で行わないといけないと思われます。理由は（JinjaのTemplate RenderingはHTMLどまりだと思われます）ほかにこのあたりの情報を知っていたら教えてください。
[Javascript備忘録] Array(times)と[..Array(times)]の違い

`Array(times)`は`times`を要素数の上限とした配列を作る。あくまで上限の話なので、実際の要素数は0個。
```
Array(4) [ <4 empty slots> ]
　　length: 4
```

`[...Array(times)]`は`times`個の要素を実際に持った配列を作る
```
Array(4) [ undefined, undefined, undefined, undefined ]
　　0: undefined
　　1: undefined
　　2: undefined
　　3: undefined
　　length: 4
```

したがって
`Array(times).map()`は0回ループ
`[...Array(times)].map()`は`times`回ループ
部分テンプレートでcollection、localsを使用する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457284/579390b4-e393-61bf-d582-7049649356dd.png)
１：renderメソッドにcollectionオプションを使う。
　部分テンプレートで一覧表示したい場合、collectionオプションを指定する。
例：<%= render partial: "prototype", collection: @prototypes %>

２：renderメソッドにlocalsオプションを付ける。
　eachメソッドを使用して、１つずつ表示したい場合に、renderメソッドにlocalsオプションを付ける。
例：<%= render partial: "form", locals: { prototype: @prototype } %>
[Python]数値に関して

数値に関していろいろ書こうと思います。雑記。

# 数字の0埋めをする
```python
#数字設定
num = 1

#0埋めする
fill = str(num).zfill(4) #()の中は桁数

#表示する
print(fill) #0001
```

# 数値 ⇔ 文字列
##### ☆数値 ⇒ 文字列
```python
#数値を設定
num = 1

#文字列に
mojii = str(num)
```

##### ☆文字列 ⇒ 数値
```python
#文字列(数)を設定
num = "1"

#数値に
sujii = int(num)
```

# 数字を足す
```python
#数値を設定
num = 1
num_2 = 2

#+1する
num += 1
num_2 += 1000

#表示する
print(num) #2
print(num_2) #1001
```

# 日付を取得
```python
import datetime

date = datetime.timedelta(hours=9)
JST = datetime.timezone(date, 'JST')
now = datetime.datetime.now(JST)
time = now.strftime('%Y/%m/%d %H:%M')
print(time) #YYYY/mm/dd HH:MM
```

# 数値とループ処理
```python
#数字を設定
num = 1

#ループ処理 - 10になるまで繰り返す
while num < 10:
    #処理
    print(num)
    
    #numに+1する
    numm += 1
```

# x秒待機
```python
import time

time.sleep(10) #10秒待機
```

暇と気力があれば付け足します。
【メモ】要素数が同一の2つの配列からオブジェクトに変換

## 最終的に作りたいオブジェクト
```js
// obj
{
  "1": "a",
  "2": "b",
}
```

## 配列を用意し、そこからObjectに変換していく処理
```js
// 要素数が同じ2つの配列をそれぞれ定義
const firstArr = ["1", "2"]
const secondArr = ["a", "b"]

// 空のオブジェクトを定義
const obj = {}

for (let i = 0; i < firstArr.length; i++) {
  // 条件が一致しない場合、早期return
  if (firstArr.length !== secondArr.length) return

  // キー、バリューを定数に代入
  const key = firstArr[i]
  const value = secondArr[i]

  // obj[key]の結果は存在しないはずだが、valueを代入するコードの時点で勝手にキーとして設置してくれる
  obj[key] = value
}
console.log(obj)
// {
//    "1": "a",
//    "2": "b",
// }
```

無事、配列からObjectに変換できました。
スリープモードによるM5Stackの省電力化

# はじめに
M5Stackなどのマイコンの省電力化方法はいくつかあります．例えばスリープモードの活用やクロックの最適化，プログラムの最適化などです．今回はそれらの中でも比較的実装しやすいスリープモードの活用について紹介します．

本記事では以下の環境で実行します．
・M5Stack GRAY（ボード選択 → M5Stack-Core2）
・ArduinoIDE

# 目次

[1.はじめに](#はじめに)
[2.スリープモードの紹介](#スリープモードの紹介)
[3.esp_deep_sleep_start()の使用例](#esp_deep_sleep_startの使用例)
[3.おわりに](#おわりに)


# スリープモードの紹介
### "ディープスリープ" と "ライトスリープ"

・**ディープスリープ**：本体機能をほぼ停止させることで電力消費を大幅に抑えます．
復帰時に再起動されvoid setup()から実行されます．

・**ライトスリープ**：ディープスリープより電力消費は大きくなりますが，復帰時にスリープした行からプログラムが再開されます．

スリープモードには2種類あり，**ディープスリープ**（deepSleep）と**ライトスリープ**（lightSleep）が存在します．ここでは，より電力消費を抑えることができるディープスリープについてプログラム例を示します．

また，M5Stackではスリープモードを実行するための関数が2つ（私が確認範囲では）用意されています．以下に例を示します．

##### 1.`esp_deep_sleep_start()`
```c
void sleep(){
    // スリープ時間を設定
    esp_sleep_enable_timer_wakeup(SLEEP_MIN(time));
    // スリープ開始
    esp_deep_sleep_start();
}
```
##### 2.`M5.Power.deepsleep()`
```c
void sleep(){
    // スリープ実行
    M5.Power.deepSleep(SLEEP_MIN(time));
}
```

2つの関数を比較すると，後者の方では1行で書くことができます．
M5Stackライブラリの中身を見ると **`M5.Power.deepSleep()`** 関数内では`esp_sleep_enable_timer_wakeup()`，**`esp_deep_sleep_start()`** を実行していると分かります．さらに，**`M5.Power.deepSleep()`** 関数内ではディスプレイのオンオフ（`M5.Lcd.setBrightness()`）まで行っているので，コードを省略できます．

ですが，ここでは **`esp_deep_sleep_start()`** を使用した例を掲載します．

# esp_deep_sleep_start()の使用例

**`esp_deep_sleep_start()`** は `esp_sleep_enable_timer_wakeup()`
とセットで使用します．
`esp_sleep_enable_timer_wakeup()`により復帰する時間を設定し，**`esp_deep_sleep_start()`** によりスリープを開始します．また，電力消費を抑える観点からスリープ時と復帰時には画面をオンオフする必要があるため，それらの記述（`M5.Lcd.setBrightness()`）も必要になります．

### esp_deep_sleep_start()の使用例

```c
#include <M5Stack.h>

// スリープ実行関数
void enable_deep_sleep(int time){
    // 画面を消す（スリープに入るだけでは画面は点灯したままになるため）
    M5.Lcd.setBrightness(0); //バックライトの明るさを0（消灯）～255（点灯）で制御
    //スリープ復帰時間を設定
    esp_sleep_enable_timer_wakeup(SLEEP_MIN(time));
    //スリープ開始
    esp_deep_sleep_start();
}

void setup(){
    Serial.begin(115200);
    M5.begin();
    // スリープ復帰時に画面を点灯する
    M5.Lcd.setBrightness(200); //バックライトの明るさを0（消灯）～255（点灯）で制御
}

void loop(){
    M5.update();
    // ボタンAを押したときにスリープを実行する
    if(M5.BtnA.wasPressed()){
        // スリープ開始（1分設定）
        enable_deep_sleep(1);
    }
}
```
上記の例は，`enable_deep_sleep()` 関数を作成し，Aボタンを押すとスリープが実行されるプログラムです．また，スリープ前に画面を消灯し，復帰時には点灯するように初期設定としてsetup()で画面の点灯処理を行っています．



# おわりに

上記ではディーブスリープの例を掲載しましたが，最後に全スリープのコードも載せておきます．

`esp_light_sleep_start()` // ライトスリープ
`esp_deep_sleep_start()` // ディープスリープ

`M5.Power.deepSleep()` // ライトスリープ
`M5.Power.lightSleep()` // ディープスリープ


おわり
[UE5]C++プロジェクトでのフォルダの作り方

C++でフォルダ作る方法をメモしておく


## 1.エクスプローラーでフォルダを作る

以下のパスに用意したいフォルダを作成。
```
プロジェクト名/Source/プロジェクト名
```

（ここではプロジェクト名をCppTest、フォルダ名をFunctionLibraryにして作成）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2818152/bd558f6a-3c46-de3b-e7e6-a8f0e3eacbc9.png)

## 2.C++クラスを作成

フォルダに入れたいC++クラスを「New C++ Class」から作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2818152/2e648eb1-8d4e-9255-e716-73a723fcc491.png)

今回は「BlueprintFunctionLibrary」を作成
選んだらPathのところを先ほど作成したフォルダにしてあげる。

（作成してフォルダにある状態）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2818152/f2807dad-3bc2-4c6d-9d32-3360feba58a9.png)

そしたら作成したクラスのcppファイルの中身こんな風に書き換える。
```
// Fill out your copyright notice in the Description page of Project Settings.


//	#include "FunctionLibrary/BPFLibrary.h"
//			作ったフォルダ名を削除！！
	#include "BPFLibrary.h"

//          こちらのほうがいいかも
#include "../FunctionLibrary/BPFLibrary.h"

```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2818152/95695514-24d3-88e7-9eec-6d880db5e763.png)


これがかけたらコンパイル！！（ライブコーディングでも大丈夫）

これでフォルダ登場
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2818152/162e3e90-ff26-9fde-f23e-7d188db69cb1.png)
Fortigate_NAT

送信元NATと宛先NATを用いて10.180.198.0/24のセグメントに属している端末からpcに通信出来るようにします。

## 環境
* Fortigate60D v6.0.7
* Cisco WS-C3560CG-8PC-S 12.2(55)EX3（10.180.198.0/24のセグメント内の端末）
* PC端末 windows11

# イメージ図
<img width="400" alt="FortiGateルーティングNAT.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2929519/5adf5ce0-775d-a3dd-d142-547fae523685.jpeg">

# Fortigate設定
ネットワークセグメントのアドレスとi/f、PC側のI/fをそれぞれ準備
<img width="700" alt="修正後排除.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2929519/3b11965a-040c-3069-a509-f23ca5e45244.png">

<img width="700" alt="fortigate@nat2PNG.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2929519/d8a27cd7-4314-de9c-f620-fdf718ccc215.png">

### 宛先NATの設定
VIPで設定。
外部IpアドレスがNAT変換前でマップされたIPアドレスがNAT変換後。
<img width="500" alt="fortigate@nat4.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2929519/23d019d6-7aa9-bca2-7393-dd8b52fe59df.png">

ネットワークからPCに通信したいので、入力I/Fと送信元をネットワークセグメントに属す。
出力I/fはPC側のセグメントに属しているinternal3で、宛先は先ほど設定したVIPを指定。
ファイアーウォール/ネットワークオプションのNATを有効にすることも忘れず。送信元NATのon/off
※送信元NATのみで設定を行う場合、デフォルトゲートとスタティックルートの設定が必要。
<img width="500" alt="fortigate@nat5.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2929519/bf85eb43-602c-4393-f127-a5d3d13ebded.png">

# パケットキャプチャ
10.180.198.0/24のセグメントに属している端末からネットワーク側のI/F(10.180.198.68)を指定してpingしたときの通信フロー。送信元/先が172.16.30.254、172.16.30.10と交互になっているのが確認出来る。pingで指定した宛先がVIPによってPC端末のIPに変換された。
<img width="700" alt="スクリーンショット (4).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2929519/2151b856-2f22-eb51-ec59-73781b8a9084.png">

以下は送信元NATをOFFにして、上と同様にネットワーク側のI/F(10.180.198.68)を指定してpingしたときの通信フロー。上の通信フローと比較して、送信元/先のIPに変化がないので(10.180.198.x のセグメントに属しているいくつかの端末使用)、PC端末に届いてからの戻りのパケットが発生していないのが確認出来る。pingを打った送信元ノードは request time out が出力される。
<img width="700" alt="スクリーンショット (3).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2929519/4706b35f-6aea-c73a-32e6-60d06c9eff7c.png">


## WindowsPCにPINGが通らない場合
https://itmemo123.net/windows/1063/