OmniAICreator/Qiita-1.07M huggingface dataset:
Sandpack使ってみた

# 概要
* Sandpackというツールキットを少し使ってみました。Hello worldレベルの実験メモです。
* Sandpackとは、次のような良くみかけるコード変更を試せるようなコードサンプルを表示するためのフレームワークです。
* これを使って、技術的なブロクなどでの学習体験を改善できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/345563/181cb444-635b-377a-8985-5de0e20fb84a.png)
* 以下の例は、Viteを用いたReact/TypeScriptアプリで、Reactコードを表示させる例ですが、React/TypeScript, Vue, Svelte, バニラJavaScriptなど多用なコードを表示できます。


# プロジェクトの作成
* ターミナルで次を実行します。
```
$ pnpm create vite sandpack-demo --template react-ts
$ cd sandpack-demo
$ pnpm install
$ pnpm run dev
```

* これで、ブラウザで http://127.0.0.1:5173/ にアクセスするとViteの雛形アプリが表示されます。
* ターミナルで（必要に応じてCtrl + Cで開発サーバーを停止し）、次のパッケージをインストールします。
```
$ pnpm add @codesandbox/sandpack-react
```

# コードの変更
エディタで src\App.tsx を次に変更します。

```
import './App.css'
import { Sandpack } from "@codesandbox/sandpack-react";

function App() {
  return (
    <div className="App">
      <Sandpack template="react" />
      <p>
        自由にコードを変更してください。
      </p>
    </div>
  )
}

export default App
```
開発サーバーを止めていた場合は再度実行します。
```
$ pnpm run dev
```

次のように表示されます。すごいですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/345563/1fde7deb-ddd6-4677-8f29-445a7725bcf0.png)

ここで、Hello Worldでないコードを追加するには次のようにSandpackコンポーネントのfilesというpropsを使用します。

```
import './App.css';
import { Sandpack } from '@codesandbox/sandpack-react';

const files = {
  '/App.js': `
    import { useState } from 'react'

    function App() {
      const [count, setCount] = useState(0)
    
      return (
        <div>
          <h1>Vite + React</h1>
          <div>
            <button onClick={() => setCount((count) => count + 1)}>
              count is {count}
            </button>
          </div>
        </div>
      )
    }
    export default App;
  `,
};

function App() {
  return (
    <div className='App'>
      <Sandpack template='react' files={files} />
      <p>自由にコードを変更してください。</p>
    </div>
  );
}

export default App;
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/345563/1985c11d-c203-7190-321f-a4bfe731bfbe.png)


# 参考
詳細は[こちら](https://www.joshwcomeau.com/react/next-level-playground/)の記事をどうぞ。
GitHub ActionsのWorkflow実行順序制御

GitHub Actionsで複数ジョブを実行する時デフォルトでは並列に実行されますが、順序を制御したい場合はneedsを定義します。

```yml
jobs:
  a:
    ...

  b:
    needs: a # aが終了後に実行される
    ...
```

で、1つのファイルに定義が増えすぎたりしてファイルを分けた場合は他ファイルのworkflowをimportすることができます。
呼ばれる側はworkflow_callを定義しておきます。
```yml
# 呼ばれる側のファイル
on:
  workflow_call:
jobs:
  a:
    ...

# 呼ぶ側のファイル
jobs:
  a:
    uses: ./.github/workflows/[呼ばれる側のファイル名]

  b:
    needs: a
      ...
```

ちなみに呼ばれる側のファイルはworkflow_call以外にも通常の動作条件（PR作成時とかpush時とか）が指定できます。
Luma AIのスキャンシーン和訳

# はじめに
この記事は現在(2022/10/20)TestFlightで配信されている、ベータ版Lumaの記事になります。

https://lumalabs.ai/

ホームページの`waitlist`より、ベータテスターの申し込みができるので、興味のある方はぜひ応募してみてください。

# 内容
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2700137/3489900a-f034-5333-d539-db8bff03a422.png" width=50%>

> Align the crosshair to the object you wish to scan and tap on screen.

スキャンしたい対象物に十字を合わせ、画面上をタップします。

---

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2700137/762fb787-9957-1483-e811-ed46d69aa1fc.png" width=50%>

> Move around the object to another vantage point and recenter the crosshair on the object and tap on screen.

対象物の周囲を移動して別の見晴らしの良い場所に移動し、対象物に十字を合わせ直して、画面上をタップしてください。

---

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2700137/b4aa173e-04a0-9c34-1187-586cfa553cdc.png" width=50%>

> Confirm the object is completely enclosed by the wireframe box. Use the controls overlaid on the box to edit its size and position if needed.

オブジェクトがワイヤーフレームボックスで完全に囲まれていることを確認します。必要に応じて、ボックスにオーバーレイ表示されるコントロールを使って、サイズや位置を編集します。

---

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2700137/e9e073dd-72e4-66dd-abc4-baf5609d0c24.png" width=50%>

> Move around the object in a circle and align your device to face the object’s center and try to trace out the loop around the object with the center dot.

対象物の周りをぐるりと移動し、対象物の中心を向くようにデバイスを合わせ、中心のドットで対象物の周りの輪をなぞってみてください。

---

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2700137/e68203f4-b7d8-ad9e-37a2-525fe2b8b3a1.png" width=50%>

> Please move farther away.

もっと遠くに移動してください。

---

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2700137/92a457e1-6a0c-1334-bbdb-4609e46b4ad9.png" width=50%>

> Orient your device to face the object.

デバイスの向きを被写体に向けてください。

---

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2700137/d42ce9b8-879e-6045-b306-7fee6dca1084.png" width=50%>

> Please move slower around object.

対象物の周りをゆっくり移動してください。

---

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2700137/46d4aa49-acb5-169c-87f6-ed5f42e372fe.png" width=50%>

> Please move closer.

もっと近づいてください。
カーネル


**カーネル = OSの中核的なプログラム**
- コンピュータの資源管理
    - プログラムの起動や終了
    - プロセスの管理、割りこみ処理
    - プロセス間の通信
    - メモリへのアクセス管理
    - 周辺機器のデバイス管理
    - システムコール

**参考になったページ**

https://qiita.com/miyuki_samitani/items/cb3b654add9fa07d6a5e

いつもありがとうございます。
Azure Fundamentals(AZ-900)：Azure の基礎: Azure のアーキテクチャとサービスについて説明する「Azure DNS」

Microsoft Learnを用いたMicrosoft Azure Fundamentals(AZ-900)の試験内容をまとめる投稿です。
この投稿ではMicrosoft Learnで学ぶ内容をできるだけ簡潔にまとめております。
Azureの勉強を一から始める方の参考になれば幸いです。

## 今回の学習内容
**◆「Azure DNS」**
◇対応するMicrosoft Learn ラーニングパス
[Azure の基礎: Azure のアーキテクチャとサービスについて説明する](https://learn.microsoft.com/ja-jp/training/paths/azure-fundamentals-describe-azure-architecture-services/)
◇対応するモジュール
[Azure DNS について説明する](https://learn.microsoft.com/ja-jp/training/modules/describe-azure-compute-networking-services/12-domain-name-system)

※前回の投稿は下記から確認できます。
[Azure Fundamentals(AZ-900)：Azure の基礎: Azure のアーキテクチャとサービスについて説明する「Azure ExpressRoute」](https://qiita.com/fsd-jume/items/ee655b32da790c15ea38)

## Azure DNS(Domain Name System)
**Azureが提供しているDNSサービスで、Azureインフラを使用した名前解決を提供**

**◆Azure DNSの利点**
**◇信頼性とパフォーマンス**
・DNSドメインはAzureのグローバルネットワーク内で分散保存し、回復性と高可用性を提供
・名前解決の際は最も近いDNSと通信を行うため、高速なパフォーマンスを提供

**◇セキュリティ**
・ロールベースのアクセス制御(RBAC)により、アクセスユーザの制御が可能
・アクティビティログにより、ユーザのリソース操作の監視やトラブル時のエラー発見が可能
・リソースのロックにより、ユーザのリソースに対する誤操作防止が可能

**◇使いやすさ**
・AzureサービスのDNSレコード管理や、外部リソースへのDNS提供が可能
・他のAzureサービスと同じ資格情報、サポート契約、課金を使用
・Azure PortalやCLIでドメインとレコードを管理可能
・DNSの自動管理を必要とするアプリは、REST APIやSDKを使用してサービス統合が可能

**◇カスタマイズ可能な仮想ネットワーク**
・VNetのためのDNSサービス(プライベートDNSドメイン)をサポート
・Azureから提供される名前にとらわれず、独自のカスタムドメイン名をVNet内で使用可能

**◇エイリアスレコード**
・AzureパブリックIPアドレス、Azure Traffic Managerなど他のAzureリソースを参照してDNSレコードを自動的に更新可能

## 次の学習内容
**◆Azure ストレージアカウント**

https://qiita.com/fsd-jume/items/8d46b21dec8700e149e8

## 学習内容をまとめたページの一覧

https://qiita.com/fsd-jume/items/e4ec76959adb547ac5e8
コメント投稿、削除機能のajax化

# コメント投稿、削除機能のajax化
## 手順
①commentsコントローラーの修正
②コメント作成、削除機能をajax化
③コメント作成、削除時の動的レンダリング処理を追加

## 1. commentsコントローラーの修正
コメント作成時の redirect_back を削除し、コメント削除処理を追加します。

```app/controllers/comments_controller.rb
class CommentsController < ApplicationController
  def create
    @comment = current_user.comments.build(comment_params)
    @comment.save
  end

  def destroy
    @comment = current_user.comments.find(params[:id])
    @comment.destroy!
  end
```

コメント削除のルートを追加します。

```config/routes.rb
Rails.application.routes.draw do
  resources :boards do
    resources :comments, only: %i[create destroy], shallow: true
    collection do
      get :bookmarks
    end
  end
end
```

## コメント作成、削除機能をajax化
form_with の local: true を削除して非同期処理にします。
form_withはデフォルトでremote: trueなので明示的に記載しなくても良い。

```app/views/comments/_form.html.erb

<div class="row mb-3">
  <div class="col-lg-8 offset-lg-2">
    <%= form_with model: comment, url: [board, comment], id: 'new_comment' do |f| %>
      <%= f.label :body %>
      <%= f.text_area :body, class: 'form-control mb-3', id: 'js-new-comment-body', row: 4, placeholder: Comment.human_attribute_name(:body) %>
      <%= f.submit t('defaults.post'), class: 'btn btn-primary' %>
    <% end %>
  </div>
</div>
```

コメントの削除ボタン link_to に remote: true を追加します。

```app/views/comments/_comment.html.erb
<tr id="comment-<%= comment.id %>">

  # 略

  <% if current_user.own?(comment) %>
    <td class="action">
      <ul class="list-inline justify-content-center" style="float: right;">

        # 略

        <li class="list-inline-item">
          <%= link_to comment_path(comment),
                      class: 'js-delete-comment-button',
                      method: :delete,
                      data: { confirm: t('defaults.message.delete_confirm') },
                      remote: true do %>
            <%= icon 'fa', 'trash' %>
          <% end %>
        </li>
      </ul>
    </td>
  <% end %>
</tr>
```

## コメント作成、削除時の動的レンダリング処理を追加
コメントの追加に成功した場合、追加したコメントをコメント一覧に追加する処理をjavascriptで実装します。
また、コメントの追加に失敗した場合は、エラーメッセージを表示するようにします。

```app/views/comments/create.js.erb

# 既に表示されているエラーメッセージがあった場合は削除する
 $("#error_messages").remove()

 # コメント作成処理の結果によって処理を分岐させる
 <% if @comment.errors.present? %>
   # エラーがある、処理失敗時にはエラーメッセージのパーシャルを表示させる
   $("#new_comment").prepend("<%= j(render('shared/error_messages', object: @comment)) %>")

 <% else %>
   # エラーがない、処理成功時には作成されたコメント内容をHTML要素として追加する
   $("#js-table-comment").prepend("<%= j(render('comments/comment', comment: @comment)) %>")

   # コメント入力フォームのテキストは表示する必要がないので、空文字に置き換えて内容をクリアする
   $("#js-new-comment-body").val('')
 <% end %>
```
「prepend()」メソッドは、指定の要素内に文字列やHTML要素を追加することができるメソッドになります。
一般的な記述方法としては、【 対象要素.prepned( 追加したい要素 ) 】になります。
このようにjQueryのメソッドを使うために各所にidを指定しています。

コメントの追加と同様に、コメントの削除した時にコメントリストから対象のコメントを取り除きます。

```app/views/comments/destroy.js.erb
$("tr#comment-<%= @comment.id %>").remove()
#　こっちでもok
$('#<%= "comment-#{@comment.id}"%>').remove()
```
## 参考元
https://www.sejuku.net/blog/46746
【Python】妻に真夜中のダンスレッスン予約を強要されたので、Webスクレイピングで回避を試みようとしている話 （６．プログラミングの始まり）

前回は、<a href="https://qiita.com/sibulabo/items/943b8b460700da85df15">「５．会員・予約情報の管理」</a>について発信しました。
今回からいよいよプログラミングに突入します。以降を読み進めると、「えっ、こいつこんな初歩の初歩から理解してないの？」と思われるかもしれませんが、はい、そのとおりなんです。初心者がググりまくって「強要」に立ち向かっていく様を、温かい目で閲覧いただければ幸いです。:tired_face:

## 何をどう書いていけば良い？
今回の予約プログラムは、極々小規模なので、上から下に向かってダラダラと記述しても問題ないと思います。でも一応一般的な書き方ってあるのかなと思いググってみました。すると **「これは何をしているのであるか？？？」** というような、Python特有の書き方にぶち当たりました。それが下のようなものです。

```Python
# main関数です。
def main:
    print("main proc")

# 意味不明な部分です。
if __name__ == '__main__':
    main()
```

"def main:" は、main関数を定義している部分で、Cや Javaなども main関数（メソッド）をエントリポイントとしているのでわかりやすいのですが、その下の if文が？？？でした。:flushed:
- 半角アンダーライン２本で囲んだ「\_\_name\_\_」って何なんでしょうか？
- それが 「\_\_main\_\_」だったら、main関数を実行する。というのもわかりません。

でも、すこしググってわかりました。:blush:

## 結論としては、この if文は、
:::note info
importされることを想定してないのに、importされてしまった場合の防止策。
スクリプトとして実行されたときだけ処理するから。
:::
という意味だと理解しました。

## まず、\_\_name\_\_ですが、以下のような感じです。
- \_\_name\_\_は、Python実行時に自動的に作成されるグローバル変数です。
- \_\_name\_\_には、実行しているモジュール名が格納されます。
- 「python test.py」で実行された場合は、"\_\_name\_\_"には "\_\_main\_\_"が格納されてる。
- 別プログラムから importされたときは、"\_\_name\_\_"には自身のモジュール名が格納されてる。

## 具体的に見ていきます。
\_\_name\_\_ の値を表示するだけのプログラム test.py を作成しました。
```test.py
# __name__の値を表示します。
print(__name__)
```
作成した test.pyをパワーシェルで **スクリプトとして実行** してみます。
```
PS C:\> Python test.py
__main__
```
"\_\_main\_\_"と表示されました。
スクリプトとして実行された場合、\_\_name\_\_ には "\_\_main\_\_"が格納されていることがわかります。

次に test.pyを importする proc.py を作成します。
```proc.py
# testをインポートします。
import test
```
作成した proc.pyをパワーシェルで実行してみます。
```
PS C:\> Python proc.py
test1
```
"test1"と表示されました。 **import（モジュールとして実行）された** 場合は、自身のモジュール名が格納されていることがわかります。

そして驚くべきは、 **````「importした時点でそのモジュールは実行される。」````** という事実です。test.pyを importしたときに test.pyの処理が実行されています。importされるべくして作成されたモジュールであれば問題ありませんが、スクリプトとして実行されることを想定してつくられたpyファイルを importしてしまったら、なんだか怖いことが起こりそうです。

なので意味不明な if文は、

:::note info
**スクリプトとして実行された場合だけプログラムを実行し、それ以外は実行できない**  ようにしているのです。
:::

test.pyを書き直します。（proc.pyは変更なし）
```test1.py
# スクリプトとして実行された場合だけ__name__の値を表示して
# 他プログラムに importされたときは実行しないでね。 (* ˊᵕˋㅅ)
if __name__ == '__main__':
    print(__name__)
```
双方パワーシェルで実行してみます。
```
PS C:\> Python test.py
__main__
PS C:\> Python proc.py
PS C:\>
```

なるほどーーーーーーー:heart_eyes:

なぞが解けて心晴れ晴れなのですが、進み具合を考えると、何も考えずに **ググってコピペ** 誘惑に抱きしめられそうになります。ですが、 **急がば回れ！** を信じて頑張ります。:dancer_tone1:クルクルクルクルっ

> 今回は、どうやってプログラムを書き始めるのかがわかりました。
> 次回は、いよいよ main関数の中身を書いていきたいと思います。
Python,Ruby,PHP,Java,JavaScript,PerlのMySQLの比較 | プログラミング言語比較

<a href="https://qiita.com/yuki_kimoto/items/f9c2454e7f9130ddb003">Qiita > プログラミング言語の比較</a>

プログラミング言語Python,Ruby,PHP,Java,JavaScript,PerlのMySQLの比較

# Python

https://qiita.com/ab-boy_ringo/items/f05bb6329f51e1632965

# Ruby

https://qiita.com/hukuro310/items/ec91beaecd11157e0640

# PHP

https://qiita.com/ab-boy_ringo/items/8274c66b6692966fdc55

# Java

https://qiita.com/namari/items/50d9aac0faf6b7e7b314

# JavaScript

https://qiita.com/PianoScoreJP/items/7ed172cd0e7846641e13

# Perl

https://perlzemi.com/blog/20161122147981.html
初心者 flutter_unity_widget 2022.2.0のpub.devを読む ２

# 大きめの展望
　今回、この挑戦をして記事化しようと思った決め手はこのビデオである。初心者には遠き道程だが、ここまでできる技術なのだとわかっていれば、やりがいもある。オープンソースではないのでコードを見られないのが残念だけれど、仕方がない。


https://www.youtube.com/watch?v=y2Zc6jFVcfM

# スモールステップ　
　展望はともかく、初心者はただひたすら、一歩ずつ刻んで行くしかない。公式ドキュメントを読み進めよう。　

## Setup　1

***
これについては、ビデオチュートリアルもありますので、こちらをご覧ください。
***
　こんな親切なことが書いてあったら、喜び勇んで「こちら」のリンクを踏むのは当然だろう。すると、この動画に至る。

https://www.youtube.com/watch?v=exNPmv_7--Q

### なんでこんな古い動画？
　たった４分27秒の動画だ。だから５分後とはいわないまでも、15分ぐらいでうまくいくんじゃないか、と思ったのが、沼の始まりだった。躓きの原因は、今はある程度わかっている。この動画、古いのだ。2019年４月である。たった43日前に更新している公式ドキュメントが、今なお３年以上前の動画を推奨しているのはなんでなんだろう、と思わないでもないが、「変わっているところもある」と知って、それを意識して視聴すれば、確かによくまとまっている。
 
### 前提として知っておくと楽なこと　
　このパッケージが二つのプラットフォームをどう繋ぐのか、最初の段階で私はよく理解していなかった。例えばFlutter x ブロックチェーンでは、異なる言語とはいえ、一つのVisualStudioでコードを書くのだから、あまり不思議に思わず進めた。だが今回は片やAndroidStudio、片やUnity、どう繋ぐのだろう。　
　結論からいってしまえば、UnityのプロジェクトをFlutterのプロジェクトにまるごと埋め込んでしまうのだが、もちろんそのためにいくつかの段階を踏むことになる。ただ、その「入れ子構造」が念頭にあれば、この動画を見て迷うポイントは一つ減るだろう。

### 変更箇所はどこか　
　この動画は、GitHub上のパッケージをまるまるダウンロードしてきて、その中のexampleをちょっと細工してオリジナルに仕上げる、というつくりになっている。が、そもそもそのexample内のDemoAppが３年前と今では違っている。なので、画面を必死に睨んで「同じようにやろう」と固執すると、「見つからない」「違う」「え゛〜(>_<)」ということになる。

- DemoApp内のSampleSceneが違う
    - 動画ではAssetのSceneにSampleSceneが一つだけ入っていて、そこにはCubeがある。これにマテリアルで色を付けているが、それは「自分でやった」という印みたいなものだから、あまり気にしなくていい。
    - 現在のDemoAppでは、Sceneの中にNativeScene、SampleScene、scene_2という三つのfileがあって、どれを開けても動画と同じではない。ここで引っかかることなく、「動画は古いんだ」と思い定めて、次に進まなくてはいけない。この段階でオリジナリティーにこだわる気がなければ、Cubeに色を付ける、という寄り道も特に必要ではない。

- FlutterへのExport画面が違う
    - 動画ではExport AndroidとExport iOSという二つの選択肢しか出ない。
    - 現在はdebugモード、リリースモード、plug-inなど、ずらっと選択肢がドロップダウンで出てくる。「おお、進化してる」と喜んで、とりあえずどちらか好きなdebugモードを選ぼう。

- 出力されるdirectory名が違う
    - 動画では「UnityExport」というdirectoryができていることを確認する。
    - 現在は「unityLibrary」というdirectoryになっている。くれぐれも、「UnityExportがない！」と慌てないように。

- Flutter側での詳細設定が違う
    - 動画ではいくつかの詳細設定をしているが、不要になっているものもある。これは次回以降、現在のドキュメントと比較しながら確認していく。

- できあがるアプリが違う
    - ここまで来れば予想できることだが、動画とは違う画面が出力される。でも、もうそんなことは気にならないはず。

## 次回は実際に手を動かしていこう　

https://qiita.com/dongri727/items/c14072877851119f7a57

https://qiita.com/dongri727/items/ddd91d7d1020fc5446b5
CH340Kで素のLPC812にLチカを書き込む(ロング記事)(2)(ついでにarduino unoにも繋ぐ)(Eも)


x 評価基板を発注予定。


目的
とりま、評価基板を起こす
CH340Eも



とりま　CH340E の部品一覧

ＵＳＢ・シリアル変換ＩＣ　ＣＨ３４０Ｅ　			I-13543
ＭＳＯＰ（１０ピン　０．５ｍｍピッチ）－ＤＩＰ化変換基板	P-06863
基板用リードフレーム　ＳＨＰ－００１				C-14182
丸ピンＩＣソケット　（１６Ｐ）					P-00029
オーディオ用電解コンデンサー１０μＦ３５Ｖ			P-08377
チップ積層セラミックコンデンサー　０．１μＦ２５Ｖ　２０１２	P-00093
基板取付用ＵＳＢコネクタ（Ｂタイプ　メス）			C-07675
ピンソケット（メス）　１×４（４Ｐ）				C-10099
ピンソケット（メス）　１×２（２Ｐ）				C-10097



前の記事


https://qiita.com/caa45040/items/298bf9e0731254cc2901


-111

![o_cop111.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/bae98642-6193-4d02-f2fa-b20b389e106c.jpeg)

-144

![o_cop144.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/f820a905-af22-362e-d8cd-3ca152343f61.jpeg)

-111

![o_cop111.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/bae98642-6193-4d02-f2fa-b20b389e106c.jpeg)


-145

![o_cop145.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/d2bce5d5-309e-5f53-3a64-2085a0c6ed8d.jpeg)

-146

![o_cop146.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/f852becb-4e79-e6d8-3639-0f33eb9ebbae.jpeg)

-147

![o_cop147.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/f1870740-35ae-96bf-5935-140687a68f13.jpeg)

-148

![o_cop148.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/6256faf0-c3d3-f7e5-0d48-fe660eb1faa0.jpeg)

-149

![o_cop149.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/8b3b2470-e443-9f44-b961-6418ba0ffb7a.jpeg)


--------------------------------------------------------

-150

![o_cop150.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/5ce87a1b-ba66-c851-3f87-9173dc326dbb.jpeg)

-151

![o_cop151.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/e372e9b8-15e3-6bfa-9604-efb36dae9880.jpeg)

-152

![o_cop152.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/a82fafee-5621-c32a-c761-8654f0b7ad44.jpeg)

-153

![o_cop153.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/4c4fcb61-8bc8-7b11-655e-aeb4e436ea2c.jpeg)

-154

![o_cop154.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/98e9eece-e909-8106-cabe-bfb9dcc5e4bb.jpeg)

-155

![o_cop155.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/6ae5a0dc-4b0c-348a-19f9-bf2f5dd23409.jpeg)

-156

![o_cop156.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/d8106ec8-361e-1528-eabc-9aa5106ab0b0.jpeg)

-157

![o_cop157.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/1ce2d495-f566-3a42-6993-c77d011f81d0.jpeg)

-158

![o_cop158.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/96566320-6ceb-0167-c58b-ce23ff8ee3aa.jpeg)

-159

![o_cop159.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/8fe05da1-6ea5-9905-2562-481d468baeb9.jpeg)

-160

![o_cop160.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/4ca498b7-d96b-65b0-393e-eb7630e5ee6f.jpeg)
EC2インスタンスのEBSボリュームの拡張


環境
 Amazon Linux等


```
#確認
lsblkとdf -hで確認。

EBSボリュームを変更

#パーティション拡張。1は番号指定。
growpart /dev/xvda 1

#ファイルシステム拡張
xfs_growfs /dev/xvda1

```

詳細は下記を参照

https://engineers.weddingpark.co.jp/ec2-ebs/
DC-DCで正負電源を作ってみた

DC-DCのLT1054を使って±5Vの正負電源を作ってみました。

![写真（2022-10-20 6.19）.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/bc22d7dc-80cc-cb31-7b99-4b4b6caf679c.jpeg)

裏に何かから剥がした、表面実装タイプ(D-PAK)のKA78M05が張り付いてます。

基板は秋月の細長い基板を切って使っています。

ちゃんとDACのOPアンプの電源として使えました。

手持ちの古い電解コンデンサーを使ったので、ちょっとかさばっていますが、小さいのを使えば、よりコンパクトに作れると思います。

LT1054は100mA流せます。

LT1054は私が秋月電子で買った時は350円でしたが、今はなんと800円です。

![写真（2022-10-20 6.19） #2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/0945553b-0f3d-f8c8-30d7-8e217baf5e11.jpeg)
IPFS・Filecoin・Arweaveのざっくりとした概要

## はじめに
分散ファイルシステムについて勉強したため、理解したことをまとめる。
※間違っている情報があれば、ご指摘いただければ幸いです。

## IPFSの概要
InterPlanetary File Systemの略で、分散ファイルシステムのプロトコルである。

従来のインターネットは、IPアドレスによって、データの場所を指定する。
IPFSは、CID（コンテンツアドレス）によって、コンテンツ（データ）自体を指定する。

従来のインターネットでは、特定の場所のデータを取得するため、提供元に障害が発生した場合、データを取得できなくなる。
IPFSは、コンテンツが保存されていれば、IPFSネットワーク内のどのノードからでもデータを取得できる。そのため、単一障害点が発生しにくい。


## 分散型ファイルシステムの比較

#### IPFS
IPFSのネットワーク自体には、ファイルを保存するインセンティブの設計がない。
そのため、一定期間アクセスされなかったデータは、削除される可能性がある。
削除されないようにするには、PinataやInfuraなどの有料サービスを利用し、データをPin止めする必要がある。

#### Filecoin
Filecoinは分散的にファイルを保存できるブロックチェーンである。
ファイルを保存しているノードは、FILという仮想通貨でインセンティブを受け取る。
定期的にFILを支払い続ける限り、ファイルは永遠に保存される。
2020年10月15日にメインネットが公開された。

#### Arweave
Arweaveは分散的にファイルを保存できるブロックチェーンである。
ファイルを保存しているノードは、ARという仮想通貨でインセンティブを受け取る。
1度支払いを行えば、最低200年という長期間ファイルを保存してもらえる。
2018年6月にネットワークがローンチされた。


## まとめ
IPFSに保存すればデータが永遠に保存されると思っていたが、有料サービスを利用しない限り、データが削除される可能性があると分かった。
データの永続性については、1度支払いを行うと200年保存してくれる、Arweaveが一番良いと思った。
Docker上で音声ファイルを再生しようとしたら、"Error opening PCM device"と怒られた話

## 環境

- macOS
- Docker
- Python3.10

## エラー文

```
root@43469b615ba0:/code# /usr/local/bin/python /code/voicevox.py
ALSA lib confmisc.c:767:(parse_card) cannot find card '0'
ALSA lib conf.c:4745:(_snd_config_evaluate) function snd_func_card_driver returned error: No such file or directory
ALSA lib confmisc.c:392:(snd_func_concat) error evaluating strings
ALSA lib conf.c:4745:(_snd_config_evaluate) function snd_func_concat returned error: No such file or directory
ALSA lib confmisc.c:1246:(snd_func_refer) error evaluating name
ALSA lib conf.c:4745:(_snd_config_evaluate) function snd_func_refer returned error: No such file or directory
ALSA lib conf.c:5233:(snd_config_expand) Evaluate error: No such file or directory
ALSA lib pcm.c:2660:(snd_pcm_open_noupdate) Unknown PCM default
Traceback (most recent call last):
  File "/code/voicevox.py", line 69, in <module>
    play_obj = wave_obj.play()
  File "/usr/local/lib/python3.8/site-packages/simpleaudio/shiny.py", line 19, in play
    return play_buffer(self.audio_data, self.num_channels,
  File "/usr/local/lib/python3.8/site-packages/simpleaudio/shiny.py", line 60, in play_buffer
    play_id = _sa._play_buffer(audio_data, num_channels, bytes_per_sample,
_simpleaudio.SimpleaudioError: Error opening PCM device. -- CODE: -2 -- MSG: No such file or directory
```

## エラーの詳細

サウンドインターフェースへアクセスできない  
Dockerは仮想環境であり、その中では再生できないため、ホスト側のサウンドインターフェースを使わせる必要がある。


## 解決方法

https://webty.jp/staffblog/production/post-3288/

macの場合はこの方法で解決した。  
Dockerのメリットとして、ホストに関わらず動く特性がある。今回の方法はmacのみしか動作確認していないため、Windowsでも検証したい。
Spring_web開発でよく使うメソッド

addAttribute(thymeleafで参照するkey, thymeleafに渡したいオブジェクト)
:thymeleafにオブジェクトを渡すことができる。

@PostMappingでreturnする際に、redirect:/〇〇と返すことで、２重サブミット対策としてPRGパターンを実装できる。
要素の大きさは変えずに見える範囲を変えるclip-pathアニメーション

みなさんごきげんよう。shinoです。今回もまた制作をしていて難しいなと思った部分を自分のより深い理解のために書いていきたいと思います。
早速ですがまずは表現したいものがこちらです。丸にカーソルが乗るとだんだん大きくなり、画像の表示される範囲が変わります。
要素自体の大きさが変わるのではなく、要素の見える範囲を変えるというのがポイントです。

うまく説明できないので下に動画を載せておきます。

## 動き
![画面収録-2022-10-19-23.29.58.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710733/3b75a688-4b6c-6c57-538e-bf5002dda298.gif)

## 実際のコード
詳しい説明は下に書いてあります。

```index.html
<!-- html, head は省略 -->
<body>
  <div class="circle">
    <p class="background-image">
      <img src="halloween.png" alt="HappyHalloweenと書かれた画像">
    </p>
  </div>
</body>
```

```style.css
img {
  width: 100%;
}

.background-image {
  width: 500px;
  height: 500px;
}

.circle {
  position: absolute;
  top: 500px;
  left: 500px;
  clip-path: circle(20px at center);
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.circle:hover { 
  animation-duration: 5s;
  animation-name: big;
}

@keyframes big {
  0% {
    transform: translate(-50%, -50%);
    clip-path: circle(20px at center);
  }
  
  100% {
    transform: translate(-50%, -50%);
    clip-path: circle(200px at center);
  }
}
```
## 解説
はじめに丸にカーソルがhoverしたときに大きさを変えるアニメーションを実行したいので`.circle:hover`にアニメーションの実行時間`animation-duration`とアニメーションの名前`animation-name`を書きます。
```css
.circle:hover { 
  animation-duration: 5s;
  animation-name: big;
}
```

つぎに丸の大きさを変えるアニメーションのキーフレームを`@keyframes big`で作り、アニメーション開始時(`0%`)とアニメーション終了時(`100%`)の状態を決めます。要素に対して clip-path で丸く切り抜く範囲を変えます。
切り抜く範囲が最初は小さく、そしてだんだん大きくなっていって欲しいので、`0%`には`clip-path: circle(20px at center)`を、`100%`には`clip-path: circle(200px at center)`を書きます。
```css
@keyframes big {
  0% {
    transform: translate(-50%, -50%);
    clip-path: circle(20px at center);
  }
  
  100% {
    transform: translate(-50%, -50%);
    clip-path: circle(200px at center);
  }
}
```
ここで重要なのは __要素の大きさを変える__ ではなく __要素の見える範囲を変える__ ということです。
私は当初、`transform: scale()`で要素そのものの大きさを変えていたので、理想の動きを実現できませんでした。

*`clip-path`を使うと要素を好きな形に切り抜くことができます。詳しい説明は下記を参照して下さい。
https://developer.mozilla.org/ja/docs/Web/CSS/clip-path

というわけで終わりたいと思います。
参考になれば嬉しいです。
[python] pandasの四捨五入と五捨五入

# はじめに
データでは有効数字の概念がとても大事である
特に誰かにデータを見せる時は桁数を可読性のためにも揃える必要がある
ここでは基本的なpandasの四捨五入と（偶数丸め）と一般的な四捨五入を紹介する

# 環境
window 10
python version:  3.7.8
pandas version:  1.3.5
# Code

## エクセルデータの読み込み
```python
import pandas as pd

df = pd.read_excel('./data.xlsx')
print(df)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821152/42ae60c1-3cd2-a012-bb18-c7df14eab73b.png)

## 小数点第１位になるように五捨五入（偶数丸め）
```python
df = df.round(1)
print(df)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821152/401d9d0e-4d93-2393-637c-7a4eef2c466b.png)

0.05 -> 0.00
0.25 -> 0.20
このようにpandasではなるべく偶数になるように五捨五入が行われる
我々が高校までの教科で勉強したような四捨五入とは異なるが、五捨五入のほうが統計学的には良いとされるらしい

## 小数点第０位（整数）になるように五捨五入（偶数丸め）
```python
df = df.round(0)
print(df)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821152/4ebfb361-188d-c317-e45f-c4357620c266.png)
## １桁（整数）で五捨五入（偶数丸め）
```python
df = df.round(-1)
print(df)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821152/a90b6d18-d56f-8ff1-2de3-a385c009e432.png)
125 -> 120
145 -> 140
floatではない３桁のintでも同じく五捨五入が行われた

## 一般的な四捨五入のための回避方法
pandasは統計のために用いられるライブラリーなので、五捨五入（偶数丸め）が基本である。
しかし、メーカーなどは会社によって基準が異なるので、五捨五入だけを使うわけにはいかない。
よって少しの努力で一般的な四捨五入を再現する。





```python
df = pd.read_excel('./data.xlsx')
def normal_round(df):
    df = df + 0.01
    return df

print('\n before')
print(df)

# 五捨五入（銀行丸め）
print('\n rounding')
print(df.round(1))

# 0.01を加える
df.Point_2 = normal_round(df.Point_2)
df.Point_1 = normal_round(df.Point_1)

# 四捨五入
print('\n normal rounding')
print(df.round(1))
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821152/d2e666fc-16bc-d6aa-0b53-2e58f5743851.png)

小数点第2位で四捨五入した結果
上部は処理前
中間部は偶数丸め
下部は四捨五入  
   
問題なく一般的な四捨五入が行われた

```python
df = pd.read_excel('./data.xlsx')
def normal_round(df):
    df = df + 0.01
    return df

print(df.round(1))
# 五捨五入（銀行丸め）
df.Point_2 = normal_round(df.Point_2)
df.Point_1 = normal_round(df.Point_1)
# 0.01を加える

print(df.round(1))
# 四捨五入
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821152/6c6af143-a62a-1211-b788-7046e3bf832a.png)
１桁目で四捨五入した結果
上部は処理前
中間部は偶数丸め
下部は四捨五入
      
問題なく一般的な四捨五入が行われた
# まとめ

特に問題がなければ統計学的に良いとされる偶数丸めで良いが
業界によって値の決まりがあれば、一般的な四捨五入が必要であると思う
ここでは結果に影響しない程度の値を加えておくことによって意図せぬ五捨五入の発生を防いだ
Amazon EKSでPrometheusを利用する

# はじめに
Amazon EKSで [Prometheus](https://prometheus.io/) を利用する方法をまとめます。
Mac環境を想定しています。

# 実行環境の準備
1.  AWS CLIの設定
[AWS CloudFormationを動かすためのAWS CLIの設定](https://qiita.com/miyabiz/items/fed11796f0ea2b7608f4)を参考にしてください。

1.  EKSクラスタの構築
[Macでeksctlを利用してAmazon EKSのクラスターを構築する](https://qiita.com/miyabiz/items/75f83237795b0b7d52bd)を参考にしてください。

1.  EKSのコンテキストの設定
[MacにてAmazon EKSの設定をする](https://qiita.com/miyabiz/items/b98d145cedb35dab9524)を参考にしてください。

1.  Helmの設定
[Amazon EKSでHelmを利用する](https://qiita.com/miyabiz/items/453361e6af64b324443c)を参考にしてください。


# 環境設定
1.  Prometheus のチャートをHelmでインストールする
    ※事前にKubernetesクラスターのコンテキストの設定をします。

    ```sh
    # Prometheus　チャートリポジトリを追加する
    helm repo add prometheus-community https://prometheus-community.github.io/helm-charts

    # Prometheus のチャートをインストールする
    helm upgrade -i prometheus prometheus-community/prometheus \
        --namespace prometheus \
        --set alertmanager.persistentVolume.storageClass="gp2",server.persistentVolume.storageClass="gp2" \
        --create-namespace

    # Prometheus がインストールされたことを確認する
    helm list -n prometheus
    ```

1.  Prometheus を起動する

    ```sh
    kubectl --namespace=prometheus port-forward deploy/prometheus-server 9090
    ```

1.  Prometheus にアクセスする

    ```sh
    open "http://localhost:9090"
    ```

# クリーンアップ

1.  PrometheusをHelmで削除する

    ```sh
    helm delete prometheus -n prometheus 
    ```

1.  Namespaceを削除する

    ```sh
    kubectl delete ns prometheus
    ```

# 参考
[Prometheus を使用したプレーンメトリクスのコントロール](https://docs.aws.amazon.com/ja_jp/eks/latest/userguide/prometheus.html)
全てのチェックボックスにチェックが入る全選択ボタンを実装する

### はじめに
業務で実装した内容の忘備録として残しております。
これが正解！というものではないので、参考程度にご覧ください。
また、間違っているところ等あればご指摘頂けると幸いです。

### 仕様
HTMLとJQueryを使って「全選択」ボタンを押下することで複数のチェックボックスに一括チェックする。また、再度「全選択」ボタンを押下すると全てのチェックが外れる。

### 実装イメージ
**◉全選択ボタン押下後**
![スクリーンショット 2022-10-20 0.27.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1516225/c57d388a-95dc-6ccc-0a49-f4f29f26bd04.png)
**◉再度全選択ボタンを押下**
![スクリーンショット 2022-10-20 0.29.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1516225/3db61342-93b7-91ca-3905-3b216452aa2c.png)

### 環境
- エディター：CodeSandbox
- HTML：1.0.0
- JQuery：3.6.1

### HTML
**◉全選択ボタンの実装**
``` HTML
<input type="button" id="select-all" value="全選択">
```
**◉テーブル内のチェックボックスの実装**
ポイントは一括でチェックを入れるためにname属性をつけること！
``` HTML
<td>
	<input type="checkbox" name="check">
</td>
```
**◉テーブル部分のコード全体**
```html
<table border="1" style="width: 50%; font-size: 100%; border-collapse: collapse">
		<thead style="background-color: #BDBDB7;">
			<tr align="center">
				<th>更新ステータス<br><input type="button" id="select-all" value="全選択"></th>
				<th>施設名</th>
				<th>場所</th>
				<th>料金</th>
			</tr>
			<tbody>
				<tr align="center">
					<td>
						<input type="checkbox" name="check">
					</td>
					<td>らかんの湯</td>
					<td>佐賀県</td>
					<td>日帰り4,500円</td>
				</tr>
				<tr align="center">
					<td>
						<input type="checkbox" name="check">
					</td>
					<td>ホテルマウント富士</td>
					<td>山梨県</td>
					<td>日帰り2,200円</td>
				</tr>
				<tr align="center">
					<td>
						<input type="checkbox" name="check">
					</td>
					<td>サウナしきじ</td>
					<td>静岡県</td>
					<td>男性：1,400円/女性：900円</td>
				</tr>
			</tbody>	
		</thead>	
	</table>
```

### JavaScript(jQuery)
チェックボックスやラジオボタンの値を取得できる**propメソッド**を使用。
クリックされた回数が2で割り切ることができなければ一括チェック、割り切れた場合はチェックを外す処理を追加。
```jsx
import $ from "jquery";
let clickCount = 0;
$(function () {
  $("#select-all").click(function () {
    clickCount += 1;
    if (clickCount % 2 === 1) {
      $("input[name=check]").prop("checked", true);
    } else {
      $("input[name=check]").prop("checked", false);
    }
  });
});
```
YogaBookバッテリー不具合　回復方法

# YogaBook with window が再起動を繰り返す

　YogaBook with windows(2016年発売)のタブレットとノートPCのあいのこの様なPC（ちょっと古いPCです）ですが、ある日より突然このようになり、電源に繋いでいても使用中に突然シャットダウンするようになり、使用が困難となりました。ネット検索で解決策が上手く見つからず、約3年間程使用していませんでした。改めて2022年3月にネット検索したところ以下のHP
https://porcharsia.blogspot.com/2019/12/yogabook.html
へたどり着き、それをきっかけに無事に回復、再びYogaBookを使用することが出来る様になりました。
　修理の方法は、PCに詳しい方にとっては当たり前のことかもしれませんが、疎い方（私を含め）には難しいと思います。この解決方法の記事は検索しても見つからなかったことから、記事にしようと思いました。同じ不具合でお困りの方の助けになれば幸いです。
　技術的な記事ではないので、本来Qiitaへ掲載するものではないかもしれませんがお許しください。

## １． 解決方法に気づいたきっかけ
【解決】YogaBook が再起動を繰り返す（Porch's Google Blog　ぽーちのブログ）
https://porcharsia.blogspot.com/2019/12/yogabook.html

　上記のブログ内における解決方法はバッテリードライバーを働かなくすることでした。しかしこれであるとバッテリーがモニターできないので不便です。このブログ内をよく読むと「IntelBatteryManagement.sysが原因」「ドライバーの年月日は古い…」との記載があり、それが原因ではないかと疑いました。

## ２．新しいバッテリードライバーが無いかを検索してみた
　Google検索などで「yogabook バッテリードライバー 更新」のキーボードで検索し、以下のLenovoのHPを開きます。
YOGA book (Lenovo YB1-X91F/L)（https://pcsupport.lenovo.com/jp/ja/products/tablets/yoga-series/yoga-book/downloads/ds119812）

　yoga_book_intel_battery_management_201702.zip（バージョン10586.8.1.261	リリース2017年2月22日）をダウンロードし、インストールします。
（PCの元々のバージョンは10586.8.1.260、リリース2015年）

## ３．インストール手順
### （１）ファイルの解凍
　ダウンロードしたファイルを解凍し（4つのファイルが出来る）、適当な場所に置く（私はデスクトップに置きました）。

### （２）インストール方法
「デバイスマネージャー」を開き「バッテリー」の項目を探し左側の「＞」をクリック
→「Intel(R) Battery Management Device」を右クリックし「プロパティ」を開く
→「ドライバー」タグの「ドライバーの更新」を開く
→「コンピューターを参照しドライバーを検索」をクリック
　（上の「ドライバーを自動的に検索」ではドライバーは更新されません）
→「コンピューター上の利用可能なドライバーの一覧から選択します」をクリック
　（上の「コンピューター上のドライバーを参照します」では上手くいきません）
→「ディスク使用」をクリック
→「参照」をクリックしダウンロードしたファイルの場所を開き"IntelBatteryManagement.inf"を指定し開く
→「OK」をクリックしインストールする。
→再起動する。

## ４．確認
 　再起動したら、「Intel(R) Battery Management Device」を右クリック→「プロパティ」→「ドライバー」と開き、バージョンを確認してください。
　バージョンが　10586.8.1.260　→　10586.8.1.261　となっていたら成功です。尚、日付は2015/12/31と変化しませんが、問題は無い様です（バージョン10586.8.1.261は、リリース2017年2月22日　とのことですが）。

　私はこの方法で修復できました。同じ不具合でお困りの方の助けになれば幸いです。

## 余談
　Windows10 →　windows11へアップグレードはこのPCではMicrosoftの要件を満たしておらず通常は出来ませんが、以下のHPの手順通りにやったところ、あっさり出来ました。
（セキュリティーの面からは推奨されないですが）

【画像で解説】Windows11非対応PCを無理やりアップグレードした手順公開
https://lifehacktivist.com/windows11-non-conform-pc-upgrade/

## 参考にしたHP

【解決】YogaBook が再起動を繰り返す（Porch's Google Blog　ぽーちのブログ）
https://porcharsia.blogspot.com/2019/12/yogabook.html

YOGA book (Lenovo YB1-X91F/L)（https://pcsupport.lenovo.com/jp/ja/products/tablets/yoga-series/yoga-book/downloads/ds119812）

【画像で解説】Windows11非対応PCを無理やりアップグレードした手順公開
https://lifehacktivist.com/windows11-non-conform-pc-upgrade/
ブログの画像だけスクレイピングする

# よくあるやつだと思うけど、ブログの中から画像だけスクレイピングしたい
やりたいけど活用法がそんなない。

# 活用法を私は考えた
1. 私の好きすぎる絵日記ブログがついにとうとうアニメ化してしまった
1. アニメという媒体であれば、子供とも楽しめる（布教）
1. しかし原作も知る必要もある(偏見）
1. そうだスクレイピングしよう

# ソース概要を説明する
1. urlは、ブログの新着記事一覧に指定する
1. for文で指定したページ数のループし、記事ごとのurl収集する
1. 記事ごとにsoup獲得して（表現として合ってるのか）、imgタグかつclass名がpictを選択する
1. あとは画像のsrcを取得し、指定フォルダに格納していく

#ソース全文

```Python:img_Blog
from bs4 import BeautifulSoup
import urllib.request as req
import urllib
import os
import time
from urllib.parse import urljoin

pageName = "mamekos"

for page in range(1, 3):
    #新着記事一覧ページ
    url = 'https://XXXXXXXXXXX.blog.jp/?p=' + str(page)
    
    res = req.urlopen(url)
    soup = BeautifulSoup(res, "html.parser")
    titles = soup.find_all("a", itemprop="url")
    for title in titles:
        print(title.get_text())
#        print(title.get("href"))
        res = req.urlopen(title.get("href"))
        soup = BeautifulSoup(res, "html.parser")
        result = soup.find_all("img", class_='pict')
#        print(result)
        link_list =[]
        for link in result:
            href = link.get("src")
            link_list.append(href)
            png_list = [temp for temp in link_list if temp.endswith('png')]
#        print(png_list)
        abs_dbpdf_list = []
        for relative in png_list:
            temp_url = urljoin(url, relative)
            abs_dbpdf_list.append(temp_url)
#        print(abs_dbpdf_list)
        filename_list = []
        for target in abs_dbpdf_list:
            temp_list = target.split("/")
            filename_list.append(temp_list[len(temp_list)-1])
#        print(filename_list)
        target_dir = "./" + pageName

        savepath_list = []
        for filename in filename_list:
            savepath_list.append(os.path.join(target_dir, filename))
        #print(savepath_list)

        for (pdflink, savepath) in zip(abs_dbpdf_list, savepath_list):
            urllib.request.urlretrieve(pdflink, savepath)
            time.sleep(2)
```
`url = 'https://XXXXXXXXXXX.blog.jp/?p=' + str(page)`の部分に好きなブログのurl情報を貼り付けたらいいと思う。

# 使用目的や注意事項
ブログ側に負荷がかからない程度に配慮すること、また個人利用を前提とすることと認識しています。
ブラウザのままで子供に見せると、どうしても他の広告記事にリンクしたりしますし、他のアプリを見上がって、布教西性が出るかと思い、この方法にたどり着いた。

# 作った感想と反省点
最高に楽しかった。
近所の公民館でスクレイピングサークル作りたいくらいだ。
運動会の競技にも、走らず、サンプルソースをもとに、課題のデータを抽出せよ！とか、そういうのがあったらいいのにと思った。
どうしてもブログの絵日記部分だけ抽出したかったが、絵日記部分だけ指定するclassやdivタグを見つけられなかった。


#次の課題
* ショッピングサイトの画像の取得
* 近所で見れる野鳥のリストから簡易図鑑のようなものを生成したい
* スクレイピングをぼちぼち楽しんでいる友だちが欲しい。
ブラウザで使えるTOEICのマークシートを作ってみた

# はじめに
実装などに興味はなく、マークシートを利用したい方は[こちら](https://huwns.github.io/Marksheet/marksheet.html)。
10/19はTOEICの日ということで、[TOEIC公式みんなで模擬受験](https://www.iibc-global.org/toeic/20221019.html)というイベントが行われました。
Youtubeでプレミア公開動画を視聴しながら、オンラインで無料で問題が解ける機会でした。しかし、解答用紙はPDF形式で印刷して利用するものであり、すぐに印刷できる状況ではなかったため、解答を記録して置けるアプリケーションが欲しくなりました。そこで、オンラインでマークシートを検索してみたところ、見当たらなかったため、自分で作ってみることにしました。

# 方針
* ある程度実際の解答用紙に形式を寄せる。
* HTMLとJavaScriptのみでシンプルに実装する。
* 単一のファイルで機能が完結し、オフライン環境でも利用できるようにする。
* 解答結果をテキストとして出力することで、解答結果を保存できるようにする。
* document.writeが非推奨だとか細かいことは気にしない。

# 解答結果の集計
解答結果の集計を行い、テキストとして出力する関数を以下に示します。

```html
<script type="text/javascript">
        function OnButtonClick() {
            const formElements = document.forms[0];
            var answers = [];
            var result_text = "";
            for (i=1;i<=200;i++) {
                    var answer = formElements.elements["q"+i].value
                    answers.push(answer)
                    result_text += i+":"+answer+", "
            }
            document.getElementById("results").value=result_text;
        }
</script>
```

# 利用方法
はじめにの冒頭にも記載しましたが、[こちら](https://huwns.github.io/Marksheet/marksheet.html)から利用できます。
ダウンロードして利用していただいても結構です。

# リンク
[Marksheet](https://huwns.github.io/Marksheet/marksheet.html)
[GitHub - Marksheet](https://github.com/huwns/Marksheet)
[LaTeX/Win11] TikZ+standaloneで可換図式のpngを作る

必要があってLaTeXで書いた図式をpngにする環境を整えたのでメモを残しておきます。


### 環境

* **Windows11** (本日の問題児)
* TexLive (私はLuaHBTeXを使いましたが、これに関してはLaTeXでもpdflatexでもXeTeXでもそんなに大差ないと思います)
* [ImageMagick](https://imagemagick.org/index.php)

後述しますがWindowsでこれをやろうとするとWindows特有の問題が一手間発生します。こういうことを書いていると脳内のLinux至上主義ギークおじさんがニヤニヤしながらこっちを見てきます (被害妄想) が、気にしないことにします。

## 導入手順

### TexLive環境の準備

TexLiveは導入済みとします。今回使うパッケージは
* [pgf](https://www.ctan.org/pkg/pgf)
* [standalone](https://ctan.org/pkg/standalone)

の2つです。単純な可換図式を書くだけなら[tikz-cd](https://ctan.org/pkg/tikz-cd)でもいいんですが、図式を書いてるとすぐに単純じゃない図式も描く羽目になるので (五角図式とか) まあいいでしょう。

### ImageMagickの導入

pngへの出力はImageMagickを使用します。これはstandaloneパッケージがデフォルトで利用している変換ソフトの1つです (もう1つは[Ghostscript](https://www.ghostscript.com/)です)。どちらもOS対応が充実しているうえにchocolateyにも対応しています。控えめに言って神。

ただしGhostscriptはPS→各種出力をするソフトなので、本記事の内容の7割くらいは役に立ちません。必要な場合は別途頑張ってください (丸投げ)。

## 作成手順
### 文書作成
実際のコードが以下のようになります。

```sample.tex
\documentclass[%
  crop,%
  convert={%
    outext=.png,%
    convertexe={magick},%
    command=\unexpanded{{\convertexe\space -density \density\space \infile\space \ifx\size\empty\else -resize \size\fi\space -quality 90\space -alpha\space Remove\space -background\space white\space \outfile}}%
  }%
]{standalone}
\usepackage{tikz}
\begin{document}

\begin{tikzpicture}
%% ここに図式の本体を書く
\end{tikzpicture}

\end{document}
```

standaloneの設定は以下の通りです。
* `crop` (ほぼ必須) tex→pdf→pngの順に変換するので、pdf出力された時点でできる余計な空白を切り落とす必要があります。
* `convert={outext=.png}` 出力形式の指定です。デフォルトで`.png`が指定されているため、基本的には不要だと思います。明示しているのは私の気分です。
* `convert={convertexe={magick}}` (**必須**) Windowsではこれを指定しないとエラーになります。このパラメータは`convert`または`imgconvert`が指定されるのですが、Win版ImageMagickの実行ファイル名は`magick`なのでこれを指定しないといけません。また、`convert`はWindowsにおいて[CONVERTコマンド](https://learn.microsoft.com/ja-jp/windows-server/administration/windows-commands/convert)を叩いてしまうため、忘れずに指定しましょう。

* `convert={command=...}` (ほぼ必須) ImageMagickの起動コマンドを指定します。ただし、commandをわざわざ変更する必要がなければ`convert={imagemagick}`で十分だと思います。ただしその場合、**デフォルトで背景が透過されます**。背景を不透明白色にしたかったため、上記コードではImageMagickに渡す際に`-alpha Remove -background white`オプションを追加で指定しています。

ドキュメントに書いてありますが、`imagemagick`サブオプションは次のサブオプションと等価です
```latex
command=\unexpanded{{\convertexe\space -density \density\space　\infile\space \ifx\size\empty\else　-resize \size\fi\space -quality 90 \outfile}}
```

これをベースにいじればコマンド指定もそんなに怖くないと思います。`\unexpanded{`を落としたりするとエラーになります。また、LaTexにおいて空白文字は大概無視されるので`\space`で空白文字を指定するということを忘れなければ大丈夫です。

### コンパイル
コンパイルは`-shell-escape`さえ忘れなければ普通に実行できます。

```console
> lualatex -shell-escape sample.tex
```

生成された画像の例が以下になります。これはextranatural transformationの公理図式の1つです。
![extranatural1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/494897/02a4a67a-6d83-8415-f731-a0f94f161e98.png)

### 追記

Windows セキュリティで「[コントロールされたフォルダー アクセス](https://learn.microsoft.com/ja-jp/microsoft-365/security/defender-endpoint/controlled-folders?view=o365-worldwide)」を有効にしている場合は、LaTeXやImageMagickを初めとして関連するアプリを忘れずに許可しておきましょう (n敗)。

## 参考リンク

standalone以外の方法もまとまっていて参考になります。(u)pLaTeX+dvipdfmxユーザーなんかはこっちの記事を見た方がいいかもしれません。
* [LaTeX de 余白のない PDF を作って画像に変換 (1)](https://qiita.com/Yarakashi_Kikohshi/items/8a46d2d16cf770b0259e#-%E5%90%84%E7%A8%AE%E8%A8%AD%E5%AE%9A)
[ServiceNow]カスタムプロパティの編集画面を作成したい

## 初めに
寒くなってきましたが、皆さん風邪はひいてないですか？
さて、今回はプロパティ管理画面を作ってみたいと思います！！
## 環境
ServiceNow バージョン：SanDiego

## やりたいこと
インシデントなどOOTBの機能にはプロパティ管理用のメニューがあるかと思います。
新たに追加したカスタムアプリなどにも同じようなプロパティメニューが欲しい！！という事です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448204/1ad6b209-9b62-dd37-2a7a-3c023a493939.png)

## 手順
#### プロパティ設定
まずはプロパティに対する設定を行います。
適当にプロパティ作ります。今回は3つ用意しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448204/db157b40-6797-5273-8d04-0391059190d1.png)

作成したプロパティを一つ開いて、画面下部のNewをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448204/c5d41aea-33a6-f8ca-a906-86ccab5cef7d.png)

プロパティカテゴリというものを作っていきます。
NameとTitleを入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448204/ac52b057-e54f-0588-f6f4-2406be81fc2f.png)

保存し、これで下準備は完了。
他のプロパティも同じように設定していきます。※ちなみに既にあるカテゴリに紐づける場合は「Edit」から可能
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448204/4059729b-7c35-550d-adc7-d660c9a1646d.png)

今回は最終的に3つのプロパティを2つのカテゴリに紐づけて見ました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448204/0a3981b2-7f06-a0cd-d89b-ef71c300294b.png)

#### メニュー設定
次はメニューに対して設定を行います。
追加したいメニューの編集ボタンを開いて～
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448204/a28e5dc1-06db-25f4-63eb-1924e3e00bc4.png)

モジュールをNew!!
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448204/df36dd26-f5a3-fe7c-2dc5-7828e00af6b8.png)

Link TypeタブでURLと下記URL方式に則って指定する。
※sysparm_titleの値はプロパティ上部の画面名になるよ。未指定の場合nullと表示されるよ。
```
system_properties_ui.do?sysparm_title=プロパティ画面&sysparm_category=Sample Qiita1,Sample Qiita2
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448204/7d8d4a5b-60c1-54b0-94b4-3f7d38e6896c.png)

#### 動作チェック
プロパティメニューを選択すると、プロパティ画面が表示された！やったね！！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448204/b8723188-025f-24c1-b4f2-67ce8d260bd7.png)

## さいごに
今回は新たにプロパティカテゴリを作成してみたけど、既存のプロパティカテゴリに追加するのも同じ要領でできます。
※例えば、インシデントプロパティに新たなカスタムプロパティを追加するとか。

よく変更するプロパティなどは、メニューを用意しておくと運用効率もよくなるので、業務改善の一環として皆さんもやってみてね！！
pandasの複数個重複した行を抽出

<h1>pandasである値の個数が指定した個数の行のみを抽出する方法</h1>
(*今回は、自身の競馬データの加工においてメモ用に記載致しますので、分かりにくい点があると思いますがご容赦ください。)


方法は、value_counts()を使って各値の個数を出力してから、指定した個数ある行の値を出力し、その出力した値を含む行を出力すれば良いです。

具体的には、以下のコードを参考にしてください
------------------------------------
データを生成
```python
test_list = ["a", "b", "a", "a", "b", "c", "a"]
test_column = ["column1"]
test_df = pd.DataFrame(test_list, columns=test_column)
print(test_df)

'''
    column
0      a
1      b
2      a
3      a
4      b
5      c
6      a
'''
```

<br>
今回は、4個値が重複している行を探します。

```python
#　各値が4個あるかをboolで返す(pandas.series)
count_4value_series = (test_df["column1"].value_counts()==4)
# 値の個数が4個ある値を返す
count_4value_value = count_4value_series.loc[count_4value_series == True].index
print(count_4value_value)

'''
Index(['a'], dtype='object')
'''
```

<br>
値が4個あるデータを返す

```python
print(test_df[test_df["column1"].isin(count_4value_value)])

'''
  column1
0       a
2       a
3       a
6       a
'''
```


<h2>実装したかったこと</h2>
競馬データは、各レース毎で馬数が異なります。そのため、NNで学習をする際にインプット数が異なるため、全データを使えば学習ができません。
そのため、馬数が同じレースを使って学習をする際に、馬数に同じレースのみを抽出する方法を考えて実装いたしました。


```python
# 馬数が16頭
race_indexes = (data["race_index"].value_counts() == 16)
race_16horse_indexes = race_indexes.loc[race_indexes == True].index
data[data["index"].isin(race_16horse_indexes)]
```
DataSpiderSDKと外部ライブラリの利用

## 外部ライブラリの利用
独自のアダプタを使用するにあたり、他のjarライブラリを使用する場面が考えられます。
外部ライブラリの利用については、コンポーネントSDK 4.2 開発ガイドにも記載※のあるとおりサポートしている旨の記載がありました。
※ 「17. 外部ライブラリの利用について」

### 開発ガイドの記載内容 ※ 一部抜粋
```
17. 外部ライブラリの利用について
DataSpider Servista のライブラリ以外を参照している場合は、
そのライブラリを下記のディレクトリに配置してビルドを実行してください。
　$SDK.HOME/dev/XXX_adapter
上記ディレクトリに置かれたライブラリは、ant install コマンドを実行すると、 
DATASPIDER_HOME/server/plugin/data_processing/modules/XXX_adapter ディレクトリにコピーされます。
```

## 外部ライブラリの配置場所
開発ガイドにある$SDK.HOME/dev/XXX_adapter下にjarファイルを配置すると、ソースコードのツリーが煩雑になるため、プロジェクト直下にlibsフォルダを作成し、その下に各jarファイルを置く設定にを追加し、ビルド後にDataSpiderのアダプタフォルダ下にコピーする設定をします。
DataSpiderSDKに付属のbuild.xmlを編集します。

### 外部jarファイルを置くフォルダの位置
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2849535/0c25e351-9421-76aa-f395-0cf619ce2e6d.png)

### DataSpiderSDKに付属のbuild.xml編集
ビルドする際のjar参照先にlibsフォルダを参照するように修正します。
<!-- compile -->下に以下のタグを追加します。
#### $SDK.HOME\dev\build.xml
```diff_xml
  <!-- compile -->
  <target name="compile" depends="native2ascii">
    <javac
      srcdir="${build.dir.src}"
      includes="**/*.java"
      destdir="${build.dir.classes}" 
      deprecation="on">
      <classpath>
        <fileset dir="${dataspider.dir.common.lib}">
          <include name="*.jar" />
          <include name="*.zip"/>
        </fileset>
        <fileset dir="${dataspider.dir.share.lib}">
          <include name="*.jar" />
          <include name="*.zip"/>
        </fileset>
+        <fileset dir="./libs">
+          <include name="*.jar" />
+        </fileset>
        <fileset dir=".">
          <include name="*.jar" />
          <include name="*.zip"/>
        </fileset>
      </classpath>
    </javac>
  </target>
```
#### $SDK.HOME\dev\build.xml
つづいて、build.xmlファイルの下方向にスクロールし、以下の行を追加します。
```diff_xml
  <!-- install -->
  <target name="install" depends="jar">
    <property name="dir.target" value="${dataspider.dir.modules}/${module}"/>
    <mkdir dir="${dir.target}"/>
    <mkdir dir="${dir.target}/META-INF"/>
    <copy file="${build.jar}" todir="${dir.target}" />
    <copy todir="${dir.target}/META-INF">
      <fileset dir="${dir.meta-inf}">
        <include name="*.icon"/>
        <include name="*.properties"/>
      </fileset>
    </copy>
  	<!-- ライブラリのコピー -->
+    <copy todir="${dir.target}">
+      <fileset dir="./libs">
+        <include name="*.jar"/>
+      </fileset>
+    </copy>
    <copy todir="${dir.target}">
      <fileset dir=".">
        <include name="*.jar"/>
        <include name="*.zip"/>
      </fileset>
    </copy>
  </target>

```
設定は以上です。

:::note warn
$DATASPIDER_HOME\server\plugin\data_processing\share\lib\下にjarファイルを置くことにより、ビルドや実行時にjarファイルが必要に応じて参照されますが、既存のDataSpiderが持っているjarファイルのバージョン差異による衝突が発生する可能性があり、注意が必要です。
:::


## 次回は
ここまでで、DataSpiderSDKを用いた基本的な開発環境について紹介してきました。
次回からは、[ブロックチェーンとNFTアダプタの製造](https://qiita.com/dataspider-fan/items/797dca4dbb1e772984a2)について紹介していきます。
thymeleafでselectedが効かない

thymeleafでドロップダウンリストを実装していると、なぜか初期値が設定できないことがあります。
※前提条件：selectタグで「th:field」を使用している場合

初期値が設定されない例
```sample.html
<select th:field="*{item1}">
    <option
            th:each="t : ${itemList1}"
            th:value="${t.key}"
            th:text="${t.value}"
            th:selected="${t.key == selectedValue1}">
    </option>
</select>
```

初期値が設定される例
```sample.html
<select th:field="*{item1}"/>
    <option
            th:each="t : ${itemList1}"
            th:value="${t.key}"
            th:text="${t.value}"
            th:selected="${t.key == selectedValue1}">
    </option>
</select>
```

どこが違うのかというと、1行目のselectタグに「/」が入っているかどうかということだけ。
意外と見逃してしまいますね。。。
Entropy is NOT a result of std::<RNG>

As in any public key cryptography implementation, everything starts with an entropy, or simply put a large number, but with the very unique characteristics of 
1) being randomly generated, and 
2) has never been generated before, or will ever be in the future, and
3) being 128-256 bits in length

However, be warned that the RNG = random number generator in your programming language's standard library is NOT random enough to be used as an entropy generator.
LaravelでルーティングしたらInvalid route action: [<ActionClassName>].で怒られた

# エラー時の状況

Laravel で ADR の設計で REST API の開発をしているとき、Action を `routes/api.php` にルーティングを設定したら怒られたので備忘録。

```
UnexpectedValueException

Invalid route action: [App\Http\Actions\Todo\GetAction].

`App\Http\Actions\Todo\GetAction` was not found.
Controller class `App\Http\Actions\Todo\GetAction` for one of your routes was not found. Are you sure this controller exists and is imported correctly?
```

エラーログの内容を要約すると以下の通りです。

- Action が無効だよ
- `App\Http\Actions\Todo\GetAction` は存在しないよ、ちゃんとインポートしている?

## 環境

- PHP 8.1.11
- Laravel 9.36.0

# エラーの原因の仮説

エラーログをもとに仮説を立ててみる。

- インポートする namespace のパスが間違っている
- インポートするモジュール名が間違っている。

エラーが関係していそうなファイルをチェックしてみる。

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

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Actions\Todo\GetAction;

Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
    return $request->user();
});

Route::get('/todo', GetAction::class);
```

```php: app/Actions/Todo/GetAction.php
<?php

declare(strict_types=1);

namespace App\Http\Actions\Todo;

use App\Http\Controllers\Controller;
use Todo\Repository\TodoRepository as Repository;
use Doctrine\ORM\EntityManagerInterface as EntityManager;

class GetAction extends Controller
{
    // 省略
}
```

うん、`routes/api.php` で参照している namespace もモジュール名も間違っていなさそう…

いや、まて…  
よくみると、モジュールのディレクトリと namespace が相違しているような。

- ディレクトリ -> `app/Actions/Todo`
- namespace -> `App\Http\Actions\Todo`

`Http` ディレクトリ配下に `Actions` を配置すればエラーは解消されるのでは?

## 仮説を検証してみる

早速、移動してみることに。

- before: `app/Actions/Todo/GetAction.php`
- after: `app/Http/Actions/Todo/GetAction.php`

すると、エラーが解消されました!

# 原因

`namespace` とディレクトリの場所が不一致だったことが原因でした。  
`namespace` は任意に設定していいものだと勝手に思っていましたが、ディレクトリとイコールじゃないとモジュールを参照できないようです。

これで 3 時間ぐらいとけました。  
まぁ、勉強になったし、勘違いも解けなので OK でしょう!

🎉🎉🎉