OmniAICreator/Qiita-1.07M huggingface dataset:
Google ColabでJapanese Stable Diffusionを実行し、日本語の文章から画像を生成してみる

## 1. 背景
日本語の文章から画像を生成する、いわゆるジェネレーティブAIのJapanese Stable Diffusionが公開されたので、Colabで実行してみました。

https://prtimes.jp/main/html/rd/p/000000035.000070041.html

## 2. アクセストークンの取得
以下サイトの「アクセストークンの取得」項から「モデルのライセンス条項等に同意する」項までを行い、トークンを取得します。トークンはコピーしておきましょう。

https://axross-recipe.com/recipes/614

## 3. Colabにコードを記述
Colabに以下のコードを記載していきます。

※注意：Colabの環境は、GPUに設定してください
（ランタイム→ランタイムのタイプを変更から設定できます）

```python
# Google Drive との連携
from google.colab import drive
drive.mount('/content/gdrive')

# japanese-stable-diffusionのinstall
! pip install git+https://github.com/rinnakk/japanese-stable-diffusion
```
ついで、以下のコードを記述します。先ほど取得したトークンを入力します。
```python
import torch
from torch import autocast
from diffusers import LMSDiscreteScheduler
from japanese_stable_diffusion import JapaneseStableDiffusionPipeline
 
MODEL_ID = "rinna/japanese-stable-diffusion"
DEVICE = "cuda"
YOUR_TOKEN = #取得したトークンを入力#
 
# Use the K-LMS scheduler here instead
scheduler = LMSDiscreteScheduler(beta_start=0.00085, beta_end=0.012, beta_schedule="scaled_linear",
                                 num_train_timesteps=1000)
 
pipe = JapaneseStableDiffusionPipeline.from_pretrained(MODEL_ID, torch_dtype=torch.float32, scheduler=scheduler, use_auth_token=YOUR_TOKEN)
pipe = pipe.to(DEVICE)
```
ここまでで準備完了です。
最後に以下を入力します。image_numberの枚数だけ、指定したGoogleDriveのフォルダに生成した画像を格納します。なお、PROMPTは入力する文章になります。

```python
PROMPT = '入力する文章'
image_number=4

for i in range(image_number):
 with autocast("cuda"):
    image = pipe(PROMPT, guidance_scale=7.5).images[0]
 image.save('/content/gdrive/MyDrive/image'+str(i)+'.png') #画像の保存先は適宜設定
```
### 参考
他のサイトなどを見ると、上記6行目が
```python
    image = pipe(PROMPT, guidance_scale=7.5)["sample"][0]
```
となっていることがあります。上記で実行すると
```
KeyError: 'sample'
```
というエラーが出てしまいますので、
```python
    image = pipe(PROMPT, guidance_scale=7.5).images[0]
```
とします。

## 4. 実行結果
今回はお題は PROMPT = "馬に乗る自由の女神の絵" として画像を作ってみました。
![image0 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193530/a0599f9a-dab1-cba8-681b-fd848a560634.png)
![image1 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193530/93e7effd-5de5-b69a-43f5-ee214c920d38.png)
![image1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193530/664edb6d-05c2-5935-e317-a4515e8d6be5.png)
![image3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193530/bb5ebde7-765e-0a4a-95ef-7c5c2ba1513b.png)

いずれもお題に合っているものを作ってくれています！
他にもお題に沿った画像を作ってくれました！

"山登りをする夫婦"
![image2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193530/20655151-8752-fd26-05ec-73d671c3813f.png)

"スノーボードを楽しむ若者"
![image2 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193530/b95d9616-74e6-d56a-39c5-aab1f6ab9db2.png)

"公園で遊ぶ家族"
![image2 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193530/0d3cb974-7a29-86aa-38a2-ecb9507b2381.png)

"ゲームの戦士のキャラクターデザイン"
![image2 (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193530/0a85fbbd-48eb-bb3b-0fdf-33b8b062be96.png)

## ５. まとめ
Japanese Stable Diffusionを使って、文章からさまざまな画像を作ってみました！日本語入力でここまでの画像を作れるとは・・・。rinna、恐るべしです。
Web版PowerPointの印刷時に警告を出す

# Web版PowerPointの罠
PowerPointのWeb版から印刷して紙をよく無駄にするので対策を考えてみた

# スタイル崩壊
PC版PowerPointで印刷した時とスタイルが変わってしまい、思っていたデザインにならず、無駄な紙が量産されてしまう

Officeにログインしようとするとエラーを出す共有PCを使う機会が多いため、Web版を使うが、印刷の時だけはPC版を利用しないといけないのをよく忘れる

どうせまたやらかすので拡張機能で対策することにした

# 方法と結果
1. Buttonで発火
2. ポップアップで発火
3. ダウンロードしたら実行

## 1.Buttonで発火
印刷ボタンのidをイベントリスナーで監視する

上手くいかない
Web版Officeのページが動的すぎるため？
（単純に技術不足）

## 2.ポップアップで発火
印刷時に出てくるポップアップのclassの出現を監視する

上手くいかない
Buttonで発火と同じ理由？

## 3.ダウンロードしたら実行
印刷するPDFデータをダウンロードしているか監視する

通信を監視し続けて、
https://jpc-powerpoint.officeapps.live.com/pods/printhandler.ashx
から始まるアドレスからGETしたら実行させたら上手くいった

https://qiita.com/keiskimu/items/42e74aa46cb3c70d341f

ここからコードを拝借


# 印刷時に警告を出してみる
```javascript:content.js
window.alert();
```

なぜかWeb版Officeのページだけalertが出ない
開発者ツールを見るとエラーが出ていたので別の方法にする

# デスクトップ通知
```javascript:background.js
chrome.notifications.create(Notification, {
		"type": "basic",
		"title": "タイトル",
		"iconUrl": "128.png",
		"message": "メッセージ"
	});
```
上手く動いたのでOK

# 最終形態
```
folder
├ manifest.json
├ background.js
└ images
   ├ pptx16.png
   ├ pptx48.png
   └ pptx128.png
```

```json:manifest.json
{
  "manifest_version": 3,
  "name": "PawapoPrintStopper",
  "version": "1.0.0",
  "description": "ブラウザ版パワポで印刷するときに通知を送信します",
  "icons": {
    "16": "images/pptx16.png",
    "48": "images/pptx48.png",
    "128": "images/pptx128.png"
  },
  "permissions": [
    "webRequest",
    "tabs",
    "notifications"
  ],
  "host_permissions": [
    "https://*/*"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
     "default_icon": "images/pptx16.png"
  }
}
```

```javascript:background.js
var Notification = "notification"

chrome.webRequest.onBeforeRequest.addListener(
  function (details) {
    var string  = details.url;
    var pattern = 'https://jpc-powerpoint.officeapps.live.com/pods/printhandler.ashx';
    if(string.indexOf(pattern) === 0){
	chrome.notifications.create(Notification, {
		"type": "basic",
		"title": "印刷はちょっと待って！",
		"iconUrl": "images/pptx128.png",
		"message": "ブラウザ版で印刷するとスタイルが崩れるよ！ダウンロードしてからPC版で開こう！"
	});

    }
  },
  {urls: ['<all_urls>']},
  []
);
```

アイコン素材を拝借　ありがとうございます
https://icooon-mono.com/12063-pptx（パワーポイント）アイコン/

# まとめ
とりあえず動く拡張機能を作ることができた
ところで共有PCのchromeって拡張機能保持してくれるのか？

# 最後に
沢山の記事を参考にさせていただきました
chromeの拡張機能を作るのは初めてだったのですが、参考にさせてもらったページが分かりやすく、二日で完成させることが出来ました！

ありがとうございました！

# 参考文献
https://qiita.com/RyBB/items/32b2a7b879f21b3edefc

https://qiita.com/querykuma/items/b41cd108e5df25ebbfda

https://qiita.com/aqril_1132/items/9f69575bfbcf24bdf7b5#%E5%89%8D%E6%96%B9%E4%B8%80%E8%87%B4

https://qiita.com/keiskimu/items/42e74aa46cb3c70d341f

https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/API/notifications/create

https://icooon-mono.com/12063-pptx%ef%bc%88%e3%83%91%e3%83%af%e3%83%bc%e3%83%9d%e3%82%a4%e3%83%b3%e3%83%88%ef%bc%89%e3%82%a2%e3%82%a4%e3%82%b3%e3%83%b3/
Photoshopのアクションで名前を変えて画像を保存する

アクションを作成する際、気をつけないとファイル名の定義がはいった状態でアクションが作成されてしまう。
以下の通りでアクションを作成する。

① 表示レイヤーを統合する。(ファイル名に"コピー"をつけないようにする)
② 別名で保存、を選択する。
③ 事前に保存するフォルダを作成しておき、そのフォルダを指定する。
④ 指定する画像形式で保存する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631482/e2592d9d-3d70-c657-105c-5e1728260fe7.png)
Accessでフォームを開いてる間に一定間隔で繰り返し処理（タイマー）

# やり方

フォームのイベントの『タイマー時』で設定できる。
『タイマー間隔』の単位はミリ秒。
下記の場合、フォームを開いている間、1秒間隔で処理が行われる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/3ef17b7c-0544-518d-76ae-222f22cd5ed1.png)

```vb:タイマー時のサンプル
Private Sub Form_Timer()
    Debug.Print Now()
End Sub
```

# 繰り返しの初回実行タイミングに注意

『タイマー間隔』が300000（5分間間隔）の場合、 **フォームを開いてから5分後に** Form_Timer()の **初回** が実行される。

フォームを開いたタイミングで初回が実行される訳ではないので注意。

# タイマー間隔が0以下の場合

タイマー間隔は0以下に設定することもできる。
その場合、Form_Timer()は全く実行されない。
（≒ 繰り返し処理を止めている状態）

# タイマー間隔のコントロール

フォームには ```TimerInterval``` という名前の変数がある。
この値を書き換えてあげれば、繰り返しの停止 or 再開、繰り返し間隔の変更などができる。

```vb
'繰り返し処理を止めたい時はこう
Me.TimerInterval = 0 

'繰り返し処理を1秒間隔で再開 or 繰り返し間隔を1秒に変更したい時はこう
Me.TimerInterval = 1000
```

# バージョン

Windows 10 Pro 21H2 OSビルド 19044.2130
Microsoft Access for Microsoft 365 MSO (バージョン 2209 ビルド 16.0.15726.20068) 32 ビット
マイグレーションで、useCurrentOnUpdate();を使う方法

## ◎分かること
Laravelのマイグレーションで、
属性に`ON UPDATE CURRENT_TIMESTAMP()`が付与された
カラムを作成する方法が分かる。

## ◎結論
```
$table->timestamp('updated_at')->useCurrent()->useCurrentOnUpdate();
```
これで
属性が`ON UPDATE CURRENT_TIMESTAMP()`なカラム「updated_at」が作れる。


### 詳細


```diff_php
<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('articles', function (Blueprint $table) {
            $table->increments('id');
            $table->integer('author_id');
            $table->string('title');
            $table->text('body');
            $table->string('thumbnail_path')->nullable(true);
            $table->timestamp('created_at')->useCurrent();
-           $table->timestamp('updated_at')->useCurrent();
+           $table->timestamp('updated_at')->useCurrent()->useCurrentOnUpdate();
            $table->timestamp('published_at')->nullable(true);
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('articles');
    }
};
```

このまま
`php artisan migrate`を実行してOK。

↓phpMyAdminで見たらしっかり属性が付与されてるのが分かる。
![7860be4ce98261439c95daa9602d4b39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512411/e552fe60-1377-461e-2de9-7a2707c8d9ed.png)
MKDocsとGithub DesktopでGitHub Pagesを作る


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565043/a41cd967-f549-8677-1efa-2e99bf69518d.png" align="top" /> MkDocsて結局、何をするやつだっけ？



# GitHub Pagesをなるべくラクにつくりたい
作業をすすめるうちに、githubにアップしたソフトウェアの情報をとりまとめていく必要が出てきました。
githubのwikiを使おうかpagesを使おうか迷っていたところ、MkDocsで作成したというサイトの雛形をいただいたので、続きを作るべく使い方を調べてみることにしました。

使い方や機能の概要、また更新作業について、忘れそうなので自分向けのメモにまとめました。設定や機能の詳細については、別のサイトをご参照ください。

# MkDocsは変換ツール
MkDocsは一体何をどこまでしてくれるアプリでしょうか？
ズバリ、以下のことができます。

- マークダウン形式で書かれた.mdファイル群を、よき感じにWEBサイト用のファイルに変換してくれる。
- テンプレートでデザインを選べる。
- 変換結果はすぐに手元のブラウザで確認できる。
- .mdファイルの書き換えると、同時にブラウザの表示も即時更新される。
- 完成したファイルをgithubにアップロードする機能もある。

といった感じです。.mdのルールで書いていくので、ページ数が多い場合などに効率的にサイト更新を行うことができます。
導入方法などの概要は下記などが参考になります。

https://miyashinblog.com/mkdocs/

アプリのコードがpythonで書かれているのも特徴のひとつです。どの機種でも使うことができます。

# MkDocsの作業の流れ
おおむね以下のような作業行程があります。

① mdで書かれたファイル群を準備する。
② **$ mkdocs new ＜任意のパッケージ名＞** のコマンドでプロジェクトを作成する。
③ docsフォルダの中に、mdファイル群を入れる。
④ 変換設定などが書かれたyamlを編集する。
⑤ index.htmlを編集する。
⑥ **$ mkdocs build** でファイルを変換する。
⑦ **$ mkdocs server** のあとブラウザで結果を確認する。
⑧ 変換結果はsiteフォルダに入る。
⑨ ブラウザを見ながらmdを書き換えて更新し、微調整する。
⑩ 改めてbuildを行い、結果をgithubにアップする。

.mdファイルを書き換えただけで、サイト用の変換結果がすぐに確認できるところが便利です。　　
作業はノートPCで、表示結果をHDMIで接続したPCモニタにしたりすると作業がしやすいかもしれません。
一度アップロードした後の情報更新については、⑨⑩の行程を繰り返して作業することになると思います。

# GitHub Desktopでアップロードする
MkDocs自体にもGithubにアップロードする機能がありますが、
今回はGUIで作業しやすいように、GitHub Desktopでアップロードします。

### GUIでのアップロード手順
① GitHub DesktopにGitHub Pages用のリポジトリをクローンする。 
② MkDogsのbuildによって生成されたsiteフォルダ内のファイルを、クローンしたリポジトリにコピペする。
③ GitHub Desktopでプッシュすればアップロード完了。

# Github Pagesでチェック
Github Pagesのサイト名は「https：//名前.github.io/リポジトリ名」という形になります。Github Pagesをアクティブにするには、下記が参考になります。  

https://docs.github.com/ja/pages/getting-started-with-github-pages/creating-a-github-pages-site

# なかなか便利でした

内容の分量が多いサイトを作る場合などに、とてもよい方法だと感じました。
細かい点でわからない部分も多々ありますが、ブラウザ上での情報更新が可能なwikiと比べても、こちらの方がサイトの画面がスッキリしている分よさそうです。
最近の画像フォーマット HEIC, WebP, AVIF について軽く調べたことをまとめた

# きっかけ

iPhone で写真を撮ると、デフォルトの画像形式が HEIC たるものに。で、このフォーマットをふと調べてみたところ、HEIF というコンテナがなんとやら･･･。

(新しいだけあって圧縮率は良いみたいだが、互換性のが欲しいからすぐ JPG に設定変えたけど･･･。)

せっかく調べてみたので、改めて最近の画像フォーマットについてまとめることにしました。(本当に全部正しい情報かどうかは保証できませんので、その点はご注意ください。)

**\[2022/11/07 編集\]**
よく調べたら AVIF も割と注目されてるっぽい？ので、記事内容の構成を変更。

# (前提知識) コーデックとコンテナの話

画像や動画などのメディアにおいては、一言にフォーマットと言っても「コーデック」と「コンテナ」に分けられます。

* コンテナ
  * ファイルへの**格納方法**を定義したもの
  * これ自体は圧縮方式などについて定義されていない
* コーデック
  * データの**表現方法を**定義したもの
  * データの圧縮方法も指すが、必ずしも「コーデック = 圧縮」ではなく、非圧縮でのデータ表現方法も一つのコーデックと言う

# HEIF について

MPEG によって策定された、コンテナフォーマットです。英語の Wikipedia を見ると、以下のコーデックに対応しているみたいです。

* HEVC (H.265) ... 後述の HEIC
* AVC (H.264)
* AV1 (AOMedia Video 1) ... 後述の AVIF
* JPEG

(AVC と JPEG はあまり使用されていない様子？)

HEVC、AVC、AV1、いずれも動画の圧縮方式 (コーデック) で、それが静止画に応用された形です。

https://en.wikipedia.org/wiki/High_Efficiency_Image_File_Format

# HEIC について

ISO、IEC、ITU-T によって策定された、HEVC (H.265) 動画コーデックを応用した画像フォーマットです。

iPhone のカメラにて、デフォルトの形式でコレが採用されています。

https://e-words.jp/w/HEIC.html

# AVIF について

非営利団体の AOMedia Video 1 によって開発された、AV1 動画コーデックを応用した画像フォーマットです。

AOMedia Video 1 は業界団体で、オープンでロイヤリティフリーのコーデック開発を目的としているみたいです。もちろん、この AV1 もフリーです。

https://e-words.jp/w/AV1.html

https://e-words.jp/w/AVIF.html

# Webp について

Google によって開発された、RIFF コンテナ、VP8 コーデックを採用した画像フォーマットです。

圧縮効率を高めてネットワークのトラフィックを削減し、Web の動作をより向上させることが目標のようです。また、PNG のような輪郭のクッキリした画像にも、JPEG のような複雑な色彩の画像にも対応した設計だとか。

https://e-words.jp/w/WebP.html

# ライセンスについての話

HEVC (H.265) は、いくつかの特許技術を用いて作られており、対応するソフトの作成にはライセンス料を支払う必要が出てきます。また、各特許の所有は 1組織にまとまっておらず、手続きが煩雑だとか。

それを良しとしないか、Google は HEIF/HEIC の普及にあまり積極的でない様子。かわりに、WebP はライセンスフリーで提供されています。AVIF (AV1) も、同じくライセンスフリーで公開されています。

https://e-words.jp/w/H.265.html

# 付録: 昔からあるフォーマットをおさらい

**\[2022/11/11 編集\]**
本タイトルとほぼ関係無い話だったので折りたたみました。

<details><summary>表示</summary>

(ここで、昔/新しいというのは、2022/11/06 記事執筆時点から見た体感です。)

| フォーマット | 概要 |
| --- | --- |
| JPEG | **非可逆圧縮 - ラスタ**<br>主にカメラで撮影した写真の保存に向いている。特性上 JPEG ノイズが生じるが、カメラ映像では基本気にならない。 |
| PNG | **可逆圧縮 - ラスタ**<br>ペイントソフトで描いた図形などに向いている。JPEG ノイズのようなものは生じない。 |
| GIF | **可逆圧縮 - ラスタ**<br>複数レイヤを保存でき、アニメーション表示できる。古い規格で、1画像で 256色までしか対応していない。(現在は 256\*256\*256色対応が普通) |
| BMP | **非圧縮 - ラスタ**<br>圧縮が無いので復元に負荷がかからない。非圧縮なので、当然ファイルサイズは大きい。 |
| SVG | **非圧縮 - ベクタ**<br>アイコンやロゴなどに使われる。拡大・縮小しても、輪郭がクッキリ表示される。 |

::: note warn
ちなみに、GIF アニメーション表示と同様の機能は、実は PNG にも策定されている。ただ、サポートしている所はかなり少ない模様。
:::

* ラスタ
  * 点の集まりで画像を表現する方法
  * 解像度 (鮮明さ) に応じて、データサイズは指数関数的に上がる
* ベクタ
  * 線や面の図形情報で画像を表現する方法
  * 表現できる画に限りはあるが、理論上解像度は無限になる

</details>

# 余談

iPhone で HEIC フォーマットに始めて出会ったとき、「あんだよ Apple の独自規格かよぉ！？」とか思ったんですが、独自規格ではなかったっていう。悪口言ってゴメンね Apple･･･。

でも、Windows や Adobe は、HEIC の普及にあまり積極的じゃなさそう。Windows だと、有料の拡張機能のインストールが必要だとか。Linux でもフリーのライブラリは出ていますが、~~読み込みのみで書き込み非対応だとか。~~ (読み書き対応されてたらしい。) ブラウザも対応している所は多くなさそう。

ライセンスを気にせず安心して使えるあたり、WebP は有利。(実際、主要ブラウザは WebP 表示対応済み。) ~~PNG や JPEG の使い分けを気にする必要が無くなるなら、これも高得点。Web アプリなんかで、入力された画像を処理するとなったとき、何も考えず放り込んで WebP にしてしまえば良いなら、開発も楽になります。~~ 可逆と非可逆と選ぶらしいので、多分配慮必要。まだまた調べが甘かった･･･。

あ、ちなみに JPEG 画像は、最適化をすることによって、場合によっては品質を変えることなくファイルサイズを縮めることができます。個人的オススメは mozjpeg です。(Google の guetzli も良さそう。) mozilla 製でオープンソースのフリー。~~あれ？HEIC 要らんくね？~~
パワーワードをバトルさせ勝敗を決定するアプリを作成してみた

### パワーワードを戦わせ勝敗を決っていするアプリを作成してみた

### 1.パワーワードとは
この記事を読んでいる方はどんなパワーワードが好きですか？
あるいは、**「これは！」** と思うようなパワーワードはありますか？
世の中はパワーワードにあふれています。
Wikipediaの記載によると **「力のあることば」「強い印象のあることば」**、あるいは
  **「表現が異様で強烈な印象のあることば」** と記載されています。
個人的な体感ではありますが、私は後者の意味で使用することが多いです。

[パワーワード-wiki](https://ja.wikipedia.org/wiki/%E3%83%91%E3%83%AF%E3%83%BC%E3%83%AF%E3%83%BC%E3%83%89)

そんな世の中にあふれているパワーワードを戦わせるアプリを作成してみました。

### 2.「ぱわーわーどばとる」
作成したアプリは以下に公開しています。
見た目はいまいちですがさわっていただけると嬉しいです。

https://moonlit-duckanoo-caad22.netlify.app/

|<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">説明文を足してみました <a href="https://t.co/U0Hjezx0tj">pic.twitter.com/U0Hjezx0tj</a></p>&mdash; きく (@AYE7WvdouqRwaNp) <a href="https://twitter.com/AYE7WvdouqRwaNp/status/1589166733486870528?ref_src=twsrc%5Etfw">November 6, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2885686/39ede987-922f-63c0-d7ce-795a8d49ce8f.png)
|

シンプルなアプリです。
上の入力欄と下の入力欄に戦わせたいパワーワードを入力し、「たたかわせる」ボタンを押すと
下にパワーワード力を数値で表示します。
また、数値の高い方が勝者です。

### 3.環境
Netlify
Anime.js
Bootstrap

### 4.ソースコード
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="oNyzbez" data-user="kanakiku" 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/kanakiku/pen/oNyzbez">
  Simple campfire5</a> by kana_xedge (<a href="https://codepen.io/kanakiku">@kanakiku</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### 5.解説
作りはシンプルです(でも苦戦しました)
入力のテキストを文字単位でencodeし、合計します。
それぞれの文字列の合計値を比較し、文字数の多い方を勝者とします。

文字と入力欄の装飾はBootstrapを使用し、プチバトル感を出す焚火はAnime.jsを使用しました。

### 6.まとめ
アプリの企画を考えた際、Vue.jsで構築する予定でしたが、Vue.jsで入力した文字列をencodeする方法が分からず、
実現方法に苦戦しました。
そもそも、HTMLとCSSの知識が乏しいため、画面内の表示位置の制御が難しかく、
こちらも苦戦しました。


今回、はじめてWebアプリを作成しました。
このアプリは「パワーワード」ってよく見聞きするけど、
どれが本当に「パワー」のあるワードなのかという、しょうもない思いから生まれました。
文字コード変換なら簡単かなぁと思い、このアプリを企画しましたが、
HTML・CSS・JavaScriptのスキルが足りず、苦戦しました。
サンプルはいくつかありましたが、サンプルのどこを見ていいのか分からず、
ひたすらサンプルを探すことを続けていました。

今回のアプリ作成を通して、HTML・CSS・JavaScriptのスキルに対する理解は少し深められました。
ただ、まだ始めたばかりなので、これから勉強してスキルを強化していきたいと思います。
HTTPURLConnection で Jenkins を shutdown する

https://qiita.com/nururuv/items/b269af6ac5ac472ceab1
https://qiita.com/satosystems/items/ad49cefa837e80c5083b
https://qiita.com/naginx/items/21e77c67f02a1ae65a29
HttpURLConnection timeout settings
https://stackoverflow.com/questions/2799938/httpurlconnection-timeout-settings

```java
URL url = new URL("http://example.com");
URLConnection conn = url.openConnection();
conn.setRequestProperty("Authorization", "Basic " + Base64.encodeToString("username:password".getBytes(), Base64.NO_WRAP));
// conn.setRequestProperty("Authorization", "Basic " + Base64.getEncoder().encodeToString("username:password".getBytes()));
conn.setConnectTimeout(5000); //set timeout to 5 seconds
InputStream is = conn.getInputStream();
```

Jenkins に関して

https://wiki.jenkins-ci.org/display/JENKINS/Administering+Jenkins

http://[jenkins-server]/[command]
exit shutdown jenkins
restart restart jenkins
reload to reload the configuration
プロジェクトのフルパスに括弧が含まれていると、vscodeのnode.jsでソースマップが効かなくなる

windows＆vscode＆node.jsで確認。

https://github.com/microsoft/vscode/issues/165452
https://github.com/TypeStrong/ts-node/issues/1905
ts-nodeで発見して、ts-nodeにissueを立てたら「ts-node使わなくても再現した」って言われて、tscを使わずにvscodeだけで再現する事を確認してvscodeにissueを立てた。

|フォルダ名|可否|
|--|--|
|`[`|問題なし|
|`[a`|問題なし|
|`[a]`|問題なし|
|`[a]+`|sourcemap効かない|
|`[a-`|問題なし|
|`[a-b`|問題なし|
|`[a-b]`|sourcemap効かない|
|`(`|sourcemap効かない|
|`(a`|sourcemap効かない|
|`(a-`|sourcemap効かない|
|`(a)`|sourcemap効かない|
|`(a-b`|sourcemap効かない|
|`(a-b)`|sourcemap効かない|

他にも確認したら、jsのファイル名に`^`が入っているとデバッグ実行すら出来ない。
`^`は特殊文字って認識があるから使わないけど、括弧は普通に使っていた。

`[a]`が問題なしで`[a]+`が問題ありなのが理解に苦しむ。もしかしてどっかで正規表現扱いされてるのだろうか。
どこかでダブルクオートが抜けてるのかと思って`(a )`と半角スペースを入れても効果なし。
全角の`（a）`にしたら当然だけど解消された(解消されたとは言えない)
FungusをInputSystemに対応させるメモ

2022年11月現在のUnityでは、入力を従来の [InputManager](https://docs.unity3d.com/ja/2021.3/Manual/class-InputManager.html) ではなく、 [InputSystem](https://docs.unity3d.com/ja/2019.4/Manual/com.unity.inputsystem.html) で扱うのがお行儀が良いとされています。

そして、会話シーンを作成する補助のアセットとして [Fungus](https://fungusgames.com/) というものがあります。
ですがこれはInputManager用に作られており、そのままではInputSystemに対応してくれません。
# 手順1. Input Actionを作って、クラスを生成する
これはググればすぐ出てきます。
[これ](https://nekojara.city/unity-input-system-actions#Input%20Action%E3%81%AE%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%89%E7%94%9F%E6%88%90)とか。
# 手順2. FungusのasmdefにUnityEngine.InputSystemの参照を追加する
プロジェクトビューからAssets > Fungus > Fungus.asmdefを選択し、インスペクタの「Assembly Defnition References」に「Unity.InputSystem」を追加します。
# 手順3. DialogInput.csを書き換える
```csharp:DialogInput.cs
if (Input.GetButtonDown(currentStandaloneInputModule.submitButton) ||
(cancelEnabled && Input.GetButton(currentStandaloneInputModule.cancelButton)))
{
    SetNextLineFlag();
}
```
これを、
```csharp:DialogInput.cs
if (_actions.UI.Submit.WasPerformedThisFrame() || (cancelEnabled && _actions.UI.Cancel.IsPressed()))
{
    SetNextLineFlag();
}
```
こういう感じにしてあげれば上手く行きます。
pythonを使ってyoutubeをダウンロードする

## 検証動画
<iframe width="560" height="315" src="https://www.youtube.com/embed/jVjwXtgNVRA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## ライブラリのインストール
```
pip install yt-dlp
```
## コーディング
```
from yt_dlp import YoutubeDL

ydl_opts = {'format': 'best'}
with YoutubeDL(ydl_opts) as ydl:
    ydl.download(['https://www.youtube.com/watch?v=47Jl-_0wQHM&t=1s'])
```
## 実行結果
```
[youtube] 47Jl-_0wQHM: Downloading webpage
[youtube] 47Jl-_0wQHM: Downloading android player API JSON
[info] 47Jl-_0wQHM: Downloading 1 format(s): 22
[download] Destination: Pythonを用いて自動で新垣結衣の画像を収集してみた [47Jl-_0wQHM].mp4
[download] 100% of   11.41MiB in 00:00:01 at 6.54MiB/s
0
```
mp4でダウンロードできましたね。
音声だけ抽出する場合は、フォーマットで「bestaudio」を選択することでできます。

## 実行結果
```
[youtube] 47Jl-_0wQHM: Downloading webpage
[youtube] 47Jl-_0wQHM: Downloading android player API JSON
[info] 47Jl-_0wQHM: Downloading 1 format(s): 258
[download] Destination: Pythonを用いて自動で新垣結衣の画像を収集してみた [47Jl-_0wQHM].m4a
[download] 100% of    9.69MiB in 00:00:04 at 2.13MiB/s
WARNING: 47Jl-_0wQHM: writing DASH m4a. Only some players support this container. Install ffmpeg to fix this automatically
0
```
m4a形式の音声ファイルをダウンロードできていることが確認できましたね。

## Github

https://github.com/yt-dlp/yt-dlp
はじめまして

<h1>内容</h1>
コンピュータ初心者がweb系エンジニアになるまで、もしくは挫折するまでのの足跡

<h3>学習中言語など</h3>
Pyton

Django
<h3>使用教材</h3>
コンピュータの基本:

基本情報技術者

python:
現役シリコンバレーエンジニアが教えるPython 3 入門 + 応用 +アメリカのシリコンバレー流コードスタイル
https://www.udemy.com/course/python-beginner/

Django:

djangoチュートリアル
https://www.youtube.com/watch?v=nS41IkL13QE&list=PLuCS8p0T7ozK4Ne1e5eAVG2R5Gbs1naix
[python] 簡単にJSON形式でファイルの使用記録を残す



# はじめに
自分が作ったプログラムの使用記録を残したい
よって簡単で扱いやすい形式で保存しておきたい
よって今回JSON形式で使用記録、すなわちLogを記録しておく

# 環境 
windows 10
python version: 3.7.8

# Code
```python
import json
import datetime
import os
import getpass


def Save_Log():
    data = {
        'name': getpass.getuser(),
        'date': str(datetime.datetime.now().strftime('%Y/%m/%d %H:%M:%S')),
    }

    log_json = ""
    if os.path.exists('./log.json'):
        try:
            json_file = open('./log.json', 'r')
            log_json = json.load(json_file)
            log_json["count"] += 1
            log_json["log"][log_json["count"]] = data
            json_file.close()
        except Exception as e:
            print(e)
    else:
        log_json = {"log": {
            "1": data
        },
            "count": 1}

    # print(log_json)
    json_write = open('./log.json', 'w')
    json.dump(log_json, json_write, indent=4,  separators=(',', ': '))

    json_write.close()


if __name__ == '__main__':
    Save_Log()

```

```json: log.json
{
    "log": {
        "1": {
            "name": "tanaka",
            "date": "2022/11/05 22:43:02"
        },
        "2": {
            "name": "tanaka",
            "date": "2022/11/05 22:43:36"
        },
        "3": {
            "name": "tanaka",
            "date": "2022/11/05 22:43:37"
        },
        "4": {
            "name": "tanaka",
            "date": "2022/11/05 22:44:30"
        },
        "5": {
            "name": "tanaka",
            "date": "2022/11/05 22:44:31"
        }
    },
    "count": 5
}
```

ファイルの実行の度に実行者の名前と時間が記録される
情報のuid的な存在は今回はcountとして順番に番号をつけた。
従業員番号もしくは`uuid`などをつけても良さそう
# まとめ

プログラムを実行するときに一緒に実行するようにセットした。JSONファイルは普通の人なら開こうと思わないので、自分用の簡易データとしては扱いやすい。
`os`などのモジュールを利用すると、より個人的なパソコン情報を保存に活かせる（あまりいいことではないですが、、、）

# 関連

https://qiita.com/junzai/items/e24391445ae07878a0e5
Pythonのbool値で躓いた話

# 目次

- 躓いたポイント
- 解決方法
- まとめに
- bool値についての補足(追記)

※ 2022/11/06 追記
変数が大文字になってたので修正
補足を追記
その他コメントでして指摘のあったものを修正

# 躓いたポイント
正規表現(re)を勉強していたある日のこと
>マッチオブジェクトのブール値は常に `True` です。 
>match() および search() はマッチがないとき `None` を返すので、マッチがあるか単純な if 文で判定できます。

こりゃ便利だ。早速試してみよう
```python:test.py
import re

truestring = "aaa"
pattern = re.compile(r"aaa")

trueresult = pattern.match(truestring)
if trueresult == True:
    print("Matched!")
else:
    print("Not matched...")
```

```terminal:result
Not matched...
```
アレ？
# 解決方法
```python
if Trueresult:
    print("Matched!")
else:
    print("Not matched...")
```

```terminal:result
Matched!
```
当たり前だがbool値が`True`なのであって値そのものが`True`な訳ではない。
イコールでつないだら`False`と出力される。

`is` を使って比較したらどうか試してみたが
```python
if trueresult is True:
    print("Matched!")
else:
    print("Not matched...")
```

```terminal:result
Not matched...
```
ダメだった。
# まとめに
分かりやすいかもという理由でboolを安易にイコールでつなぐと碌なことにならない。
pythonは簡潔にコードが記述できるが脳死でコードを書くとハマるので一行一行噛みしめてコードを書くべき。
また、基礎的なものほど公式ドキュメントを適宜参照し仕様も確認すべき。
# bool値についての補足(追記)
コメントで触れられていたため、[公式文書](https://docs.python.org/ja/3/library/stdtypes.html#truth-value-testing)を確認したところ
>どのようなオブジェクトでも真理値として判定でき、 if や while の条件あるいは以下のブール演算の被演算子として使えます。
>
> オブジェクトは、デフォルトでは真と判定されます。ただしそのクラスが \_\_bool__() メソッドを定義していて、それが `False` を返す場合、または \_\_len__() メソッドを定義していて、それが 0 を返す場合は偽と判定されます。主な組み込みオブジェクトで偽と判定されるものを次に示します:
> - 偽であると定義されている定数: `None` と `False`
> - 数値型におけるゼロ: `0`, `0.0`, `0j`, `Decimal(0)`, `Fraction(0, 1)`
> - 空のシーケンスまたはコレクション: `''`, `()`, `[]`, `{}`, `set()`, `range(0)`

とあった。

`None`以外にも偽と判定されるものは多い。
例として空白の文字列を判定するときはわざわざ空の文字列を用意して比較せずとも、真理値の判定に掛けることで判別できる。
Dockerのコマンド

### コマンド

| コマンド | 内容 |
|:-----------|:------------|
| docker ps | 起動中のコンテナを確認 |
| docker ps -a | 全てのコンテナ(停止中も含む)を確認 |
| docker logs -f ${コンテナID or コンテナ名} | コンテナのログを確認する |
| docker volume ls | 作成済みボリュームを確認する |
| docker volume rm ${ボリューム名} | 作成済みボリュームを削除する |
【OutSystems】 期限がすぎたら色を塗りつぶす

## やることリストを作り期限が過ぎた行の色を塗りつぶす
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691264/0ee40daa-c225-e657-7eb1-09bdd6d02ffe.png)
エンティティ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691264/153b5a4a-47e8-ce0d-d7e6-341683b808df.png)

## セルのプロパティを設定する
![キャプチャ.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691264/cb947a82-8752-96b4-23b4-85e16c5502a7.jpeg)
``If(GetTasks.List.Current.Task.DueDate < CurrDateTime(),"background:#FFC0CB;","")``
期限が現在の日付よりも前ならば、ピンク(#FFC0CB)に塗りつぶす、そうでなければ""(空)=何色にもしない
macOSをVenturaにアップグレードしてネットワークが不安定になった時の対処

# 概要
macOSを早速Venturaにアップグレードしたら、ネットワークが不安定になり速度が出ない、WIFIに接続できたり出来なかったり困ったので解消した手順を残しておきます。ただ、決定的に何に効果があったのかは分かってないので一通りのチェック項目として利用。
決定打は掴めてませんが、参考までに。

## 発生していた現象
- WIFIに繋がるが、「インターネット未接続になる」
- WIFIに繋がり、インターネット接続もできるが、速度が１０分の１程度しかでない
- WIFIに繋がらなくてびっくりマーク（！）になる
## 環境
- MacBook Air Applie M1
- macOS Ventura 13.9
- プロバイダー　NURO
- ルーター　F660A
- WIFI 2.4G/5.0G 両方で発生
- ウィルス対策　カスペルスキー
## やったことと多分効果があったこと
- WIFIのオフ→オン：効果なし
- OSの再起動：効果なし
- OSのシャットダウン（６０秒後に再起動）：効果なし
- ルーターの再起動：効果なし
- WIFIの設定削除→再作成：効果なし
- ネットワーク設定の「IPアドレスのトラッキングを制限」をOFF：効果なし
- Appのアップデート：効果なし
- カスペルスキーに出ていたエラー対処（内容忘れました・・・）：多分これで復活！！
AccessのVBAで一定時間待つ処理

# やり方

```vb
'AccessにはWaitのような機能（関数）が無いので、kernel32.dllの力を借りる。
'ここでWindowsAPIのkernel32.dllに含まれているSleepという機能を参照して、
'VBA内で使えるように宣言している。
Private Declare Sub Sleep Lib "kernel32" (ByVal sleep_milli_second As Long)

Private Function Tester()
    Debug.Print Now()
    Sleep 5 * 1000 '5秒待つ
    Debug.Print Now()
End Function
```

# バージョン

Windows 10 Pro 21H2 OSビルド 19044.2130
Microsoft Access for Microsoft 365 MSO (バージョン 2209 ビルド 16.0.15726.20068) 32 ビット
TypeScriptのObject.keysの型はなぜstringの配列なのか

# 疑問
TypeScriptでObject.keysを使う際keyの型がなぜstringの配列になってしまうのか気になったのでまとめました。

`Object.keys`でobjectのkey名を取り出したいとき
次のようなコードを書くとkeysの型は`string[]`になってしまいます。

``` typescript
const object = {
    hoge: 'hoge',
    fuga: 'fuga',
};
// keysの型は("hoge"|"fuga")[]ではなくstring[]
const keys = Object.keys(object);
```

よって次のようなコードは型エラーになってしまいます。
```typescript
// 型エラーになってしまう
const temp = object[keys[0]];
```

# 暫定的解決策

これを回避するためには`(keyof T)[] `を返す関数を作ってそれを利用する。もしくはasを使って型を強制的に決めてしまうことで対処できます。

```typescript
function getStrictKeys<T extends Record<string, any>>(object: T): (keyof T)[] {
    return Object.keys(object);
}
// keysの型は ("hoge" | "fuga")[]
const keys = getStrictKeys(object);

// 型エラーなし
const temp = object[keys[0]];
```


```typescript
// keys[0]の型を無理矢理つける
const temp = object[keys[0] as keyof typeof object];
```

最初から`Object.keys`の型を`(keyof object)[]`にしてくれれば良いのにと思ったのですが

なぜこのような仕様になっているかというと、objectが拡張された時に型安全性が失われてしまうからという理由があるためです。

# Object.Keysの型を厳密にすることで発生する問題

具体的には次のような型を考えます
```typescript
type ObjectType = {
    hoge: string;
    fuga: string;
};
```

次のような関数を考えます

```typescript
function printObjectKeys(object: ObjectType) {
    getStrictKeys(object).forEach((key) => {
        // 型補完でkeyの型はhoge|fuga
        if (key !== 'hoge' && key !== 'fuga') {
            throw new Error(`keyがhogeでもfugaでもありません:${key}`);
        }
        console.log(key);
    });
}
```

この関数はObjectTypeのkeyを出力するだけでkeyの型がhoge|fuga
なので型安全性が保たれていればif文の中には入らないように思えます。

しかし、次のような`ObjectType`を拡張したようなobjectを用意し

```typescript
const extendObject = {
    hoge: 'hoge',
    fuga: 'fuga',
    piyo: 'piyo',
};
```
`printObjectKeys`関数に引数として渡すとなんの静的エラーも出ず実行されてしまいます。
そしてif文の中に入りエラーが発生してしまいます。

```typescript
// Error: keyがhogeでもfugaでもありません:piyo
printObjectKeys(extendObject);
```


このように`Object.keys`の型を厳格に付けてしまうとかえって静的エラーが出ずtypescriptの良さが失われてしまいます。

# 所感

`Object.keys`の型を厳密にする関数の使用や`as`による型アサーションはtypescriptの型安全性を失わせる可能性があるのでobjectが拡張される可能性がないと言い切れる時など注意して使う必要があります。
古いMacでDiffusersを使う（CPUで使用する）

初めに私の使っているMACの性能をお伝えします。
```
MacBook Air (11-inch, Early 2015)
プロセッサ：1.6 GHz デュアルコアIntel Core i5
メモリ：4 GB 1600 MHz DDR3
グラフィックス：Intel HD Graphics 6000 1536 MB
```
新しいMacを買えよ。というツッコミは置いといてこのMacで流行りのDiffusersを使う際にした紆余曲折を書きたいと思います。
なおこのMacだと文字から1枚の画像を作るだけで数時間かかるので、忙しい人はお勧めしません。（そもそも私と同じように古いMACを使っている人はいるのか？）
また本記事はpoetryを使用しておりますので、pip等を使っている方は置き換えが必要になります。

## 試したプログラム
公式ドキュメント等を参考に基本的な文字から画像を作成するプログラムになります。
前述の通り一枚作るだけでかなりの時間がかかるためfor文を使用しておりますが、作る画像は一枚だけになります。
Googleコラボラトリではこの記述で使えたのでローカルでも試しました。

```app.py
from diffusers import StableDiffusionPipeline
import torch
import matplotlib.pyplot as plt

# アクセストークンの設定
access_tokens = "****"

model = StableDiffusionPipeline.from_pretrained("CompVis/stable-diffusion-v1-4",use_auth_token = access_tokens)
#　ここを最終的に変えています
model.to("cuda")

prompt = "Girl Janapnese Highschool smaile"

import re
filename = re.sub(r'[\\/:*?"<>|,]+','',prompt).replace(' ','_')

num = 1

for i in range(num):
  image = model(prompt,num_inderence_steps = 50)['sample'][0]
  outputfile = f'{filename}_{i:02}.png'
  image.save(f"./outputfile/{outputfile}")

for i in range(num):
  outputfile = f'{filename}_{i:02}.png'
  plt.imshow(plt.imread(f"./outputfile/{outputfile}"))
  plt.axis('off')
```

## poetryで必要なライブラリをインストール
```
poetry add diffusers transformers scipy ftfy matplotlib
```

この際torch torchvisionがエラーになったのでこの記事を参考に
pyproject.tomlにインストールする記述を記載しました。
もしかしたらGPUを使えるようにすればよかったのかもしれませんが、色々調べたのですが分からず、以下の方法でtorch等をインストールようにしました。
出たエラー：
AssertionError: Torch not compiled with CUDA enabled

https://stackoverflow.com/questions/59158044/poetry-and-pytorch

```pyproject.toml
[tool.poetry.dependencies]
python = "^3.10"
poethepoet = "^0.10.0"

[tool.poe.tasks]
force-cuda11 = "python -m pip install torch==1.11.0 torchvision==0.12.0 -f https://download.pytorch.org/whl/torch_stable.html"
```

以下のコマンドで反映させます
```
poetry install
poe force-cuda11
```

これでtorchをインストールできた。よし実行！
と思ったらまたエラーが出た。
エラー文はメモを忘れてしまいましたが、
nvidia-cuda-nvrtc-cu11のRuntimeErrorだったような気がします。
nvidia-cuda-nvrtc-cu11を調べるとGPU関係のライブラリらしい。
色々調べた結果以下の記述に変更してGPUだけではなくCPUを使うことにしました。（良いこは真似しないでください）

```
# 以下のように記述を変更
model.to("cuda")　 ⇨ model.to("cpu")
```

これで無事画像を作ることが出来ました。
かなり時間がかかりますので、普通の方には役に立たないと思いますが、私のように古いMACを使っている方のお役に立てば幸いです。
もしこれ以外に良い方法があれば教えていただきたいです！
[Python] DataFrame型の引数を関数内で変更した時の挙動について

## 背景
C言語上がりのプログラマであり、DataFrame型を引数渡しした時の挙動について調査したい。

## 1次調査結
・pythonでは参照渡しで関数に引き渡されるが、引数に指定したオブジェクトがイミュータブル（変更できない）なオブジェクトなのかミュータブル（変更できる）なオブジェクトなのかによって呼び出し元の変数も更新されるか挙動が異なる
→ DataFrame型で実際に試してみる。

＜参考＞
https://www.javadrive.jp/python/userfunc/index3.html

## 2次調査結果
### ソースコード
```Python
import pandas as pd

def add_height(master_df):
    master_df['Height'] = [170, 171, 175]
    print(master_df)

data = { 'Name':['Shota','Akebono','Yamaoto'],
         'Weight':[60,99,55] }
df = pd.DataFrame(data)
print(df)
add_height(df)
print(df)
```

### 出力結果
~~~
      Name  Weight
0    Shota      60
1  Akebono      99
2  Yamaoto      55
      Name  Weight  Height
0    Shota      60     170
1  Akebono      99     171
2  Yamaoto      55     175
      Name  Weight  Height
0    Shota      60     170
1  Akebono      99     171
2  Yamaoto      55     175
~~~
### 結論
DataFrame型を引数渡しした時、呼び出し元の変数も更新された。
（ミュータブルなオブジェクトだと思われる。）
【初学者】mapメソッドの繰り返し処理の中で、SWRに渡したparamsが異なるにも関わらず、同じデータが返ってくる事象の対処

### 事象
以下のような外部webサイトの情報をまとめたカードを複数作成するために、SWRを使用して、APIに渡したURLのOGP情報を取得するような処理を書いていました。しかし、mapメソッドで繰り返し作成したコンポーネントごとに渡したurlは異なるはずなのに、作成されるカード(SWRで取得したデータ)が全て同じになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710784/91c0cd72-e6dd-1059-b2ba-3ee5349f3e25.png)
### 原因
おそらく、SWRに渡す値を変えず、切り出したfecherに直接取得したいURLのパラーメータを渡してしまっていた結果、fetcherの中の値は異なるにも関わらず、SWR側では同じリクエストと判断してしまったため、キャッシュ(?)を使用して、同じデータが返ってきてしまったと思われます。
### 対処
fetcherに与えていたurlのパラメータを、SWRの引数として渡した結果、うまくいきました。
### 実際のコード
```diff_typescript
export const useURLData = (url: string) => {
-  const fetcher = async (apiURL: string) => {
+  const fetcher = async (apiURL: string, url: string) => {
-    const res = await axios.get(apiURL, { params: { url: url } });
+    const res = await axios.get(apiURL, { params: { url } });
    return res.data;
  };
- const { data, error } = useSWR('http://localhost:9000/api/ogp', fetcher);
+ const { data, error } = useSWR(['http://localhost:9000/api/ogp', url], fetcher);
  return {
    urlData: data,
    isLoading: !error && !data,
    isError: error,
  };
};
```
【参考にした記事】

https://swr.vercel.app/ja/docs/arguments

https://swr.vercel.app/ja/docs/options
Got permission denied while trying to connect to the Docker daemon socket at 解決方法

・エラー内容
```
Got permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock: Get "http://%2Fvar%2Frun%2Fdocker.sock/v1.24/containers/json": dial unix /var/run/docker.sock: connect: permission denied
```
・解決方法
以下のコマンドを実行する。
```
sudo chmod 666 /var/run/docker.sock
```

解決できたかどうかの確認で何らかの docker コマンドを実行する。
```
docker ps
```

以下のように表示されエラーが出なければ解決できた。
```
ubuntu:~$ docker ps
CONTAINER ID   IMAGE     COMMAND   CREATED   STATUS    PORTS     NAMES
```

・参考サイト

https://newbedev.com/got-permission-denied-while-trying-to-connect-to-the-docker-daemon-socket-at-unix-var-run-docker-sock-get-http-2fvar-2frun-2fdocker-sock-v1-24-containers-json-dial-unix-var-run-docker-sock-connect-permission-denied-docker-code-example
【意外と知られていない】ピボットの自動更新

今日は意外と知られていない、
ピボットの自動更新についてかく。

みんな、こんな経験したことはないだろうか。
例えば下記のような図1のようなデータがあって、
図2のようなピボットを作ったとしよう。
このとき図1のデータが増えるたびにピボットの範囲を変える必要がある、めんどくさいことになったことはないだろうか。
その解決策をここでは書きたいとおもう。

＜図１＞
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2898306/b8b8a9b2-3c2c-fe9a-816e-ec51870fc048.png)

＜図２＞
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2898306/e11f7cfb-b3ab-fa2b-f129-6efeaed9ee41.png)

###### ■具体的な解決方法
1. まず名前定義というものを利用して、ピボットする範囲をあらかじめ決めておく。

操作としては、「数式」→「名前の定義」より、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2898306/d8ba3728-861c-368e-f623-c9d272fb1920.png)

「名前」を好きな名前（画像では「PVT範囲」）
「範囲」をピボットしたいシート名、
「参照範囲」は表範囲を指定する訳だが
画像のように計算式、
を設定する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2898306/41fedb2c-597d-0964-4a15-686769017bfa.png)

ここで参照範囲に設定した数式を簡単に説明しておく。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2898306/7f28627c-3831-1fcd-86af-ee0e8f1f55b7.png)

上記で名前定義した後に、
ピボットをつくりたい場所にセルのカーソルを移動し、
「挿入」→「ピボットテーブル」→「テーブルまたは範囲から」を選択する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2898306/7dc57bc5-a3c4-5c18-b024-eba9f6e13e21.png)

表示されたダイアログ内で
「テーブル/範囲」に先ほど名前定義した「PVT範囲」を
入力してピボット作成する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2898306/aa2ba7c0-c3b2-50b2-54f4-75a598cb16df.png)

これで、データが増えたとしても
自動的にピボットが範囲を広げてくれる。

一件落着。
AndroidのChromeでGoogle Drive上のファイルがアップロードできない件


JSからAndroidのChromeでGoogle Drive上のファイルをアップロードしようとすると以下のエラーが出る。

```
net::ERR_UPLOAD_FILE_CHANGED
```

ブラウザのバグだが長いこと解決されていない。
https://bugs.chromium.org/p/chromium/issues/detail?id=1063576

一度arrayBufferとしてコピーすることで避けることができる。

```
const buffer = await file.arrayBuffer();
const blob = new File([buffer], file.name, { type: file.type });
```

しかしarrayBufferのコピーが有効ではないことがあり


```
NG Uncaught (in promise) DOMException: The requested file could not be read, typically due to permission problems that have occurred after a reference to a file was acquired.
```

のようなエラーが出ることがある。例えばsetTimeoutの中でコピーするとNGのようだ。この場合はコードの書き方を変えるしかないようだ。
IntelliJでspring bootプロジェクトを作成する方法

Spring initializrで作成し、intelliJの開くで開く。
https://start.spring.io

<h1>参考サイト</h1>

https://multimineral-tech.com/entry/2020/12/18/190701#Spring-Initializr-でプロジェクト生成

<h1>疑問</h1>

https://pleiades.io/help/idea/spring-boot.html

IntelliJ公式ページに、プロジェクト新規作成時に、左ペインにspring boot作成ウィザードあるって書いてあるけど、無い。

https://www.aruse.net/entry/2019/08/03/040855

上記サイトに、communityでは作れないって書いてある。
Ulutimateじゃないとないのかな？
Pythonを勉強してみる（１日目：環境構築）

# これはなに？
+ 主目的
    - 誰かに読んでもらう！というより自分なりのアウトプットとして残すこと
+ 付加価値
    - 自分以外にも勉強するぞ！という人がいた時の参考になればこれ幸い
    - 詳しい方にコメントいただけたらうれしい

この投稿によりQiita投稿童貞を卒業するので
Qiitaベースでアウトプットしていけたらと思っている

# 作業環境
+ MacBook Pro (Retina, 13-inch, Late 2013)
+ プロセッサ：2.4 GHz デュアルコアIntel Core i5
+ メモリ：4GB 1600 MHz DDR3
+ OS MacOS BigSur 11.7.1を使用する
-> 構成がぐちゃぐちゃだったので工場出荷状態にした

約10年前のモデルなのにわたしのプライベートな要件を満たしてくれるスゲーやつ。
Python勉強しているうちに逝かれてしまったらしっかり供養したうえで
M1MAXチップのMacBookProにシフトしようと思う。

IDEは慣れているVisual Studio Codeを利用する。

# Homebrew install
ターミナルで以下のコマンドを叩く。結構時間がかかる。
そして２回ほどサインインパスワードを聞かれた。

```bash
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 
```
インストールが終わって以下のパスがかえってくればOK！
```bash
$ which brew
/usr/local/bin/brew
```


# Pyenv install
```bash
brew install pyenv
```


# .bash_profile
工場出荷状態だとファイルが存在しないので、作る
```bash
touch /.bash_profile
```
/Users/（アカウント名）のなかに作られているので、ファイルに以下を書く
```
export PYENV_ROOT="$HOME/.pyenv"
export PATH="$PYENV_ROOT/bin:$PATH"
eval "$(pyenv init --path)"
eval "$(pyenv init -)"
```


# python install
お待ちかねのpythonのインストールである。
Pyenvをつかう。今回は3.10.8をインストールしてみた。
```bash
brew install 3.10.8
```
…インストールできると思っていたらなんかエラー吐いた。
どうやらSierra以上のOSでは以下の対処が必要らしい。
```bash
brew install readline openssl xz
```
からの
```
$ vi ~/.env-exporter
```
からの　
```
export CFLAGS="-I$(xcrun --show-sdk-path)/usr/include"
export CFLAGS="-I$(brew --prefix readline)/include $CFLAGS"
export LDFLAGS="-L$(brew --prefix readline)/lib $LDFLAGS"
export CFLAGS="-I$(brew --prefix openssl)/include $CFLAGS"
export LDFLAGS="-L$(brew --prefix openssl)/lib $LDFLAGS"
export CFLAGS="-I$(brew --prefix sqlite)/include $CFLAGS"
export LDFLAGS="-L$(brew --prefix sqlite)/lib $LDFLAGS"
```
（exit => return => q = returnで編集終了）からの
```
$ source ~/.env-exporter
```
で再度インストールコマンドを実行
```bash
$ pyenv versions
* system (set by /Users/ayumu/.pyenv/version)
  3.10.8
```
できた！
systemに✳︎がついてるのでインストールしたバージョンに設定する
```bash
$ pyenv local 3.10.8
$ pyenv versions
  system
* 3.10.8 (set by /Users/ayumu/.python-version)
```
今日はここまで！！（まとめ含めて２時間くらいかかった）
明日から何かテーマを決めて学習を進めていきたいと思います。

# Special Thanks!!
+ https://www.webdesignleaves.com/pr/plugins/mac_terminal_basics_03.html
+ https://zenn.dev/kenghaya/articles/9f07914156fab5

# 所感
+ シェルスクリプトの内容は100%Special ThanksのURLを参考にさせていただいたので意味があまりよくわかっていない。
１行ずつ何を意味しているのか整理した上で次のステップに進みたいと思いました。
+ 諸事情でWindows用の外付けキーボードで作業したが、やりにくいのなんの。
Apple信者の私としては会社支給のPCがmacになる世界になればいいのになーと思う
Google Calender便利機能まとめ

# Google Calender便利機能まとめ
※自分用メモ（なんかあれば随時追加していく予定）

・祝日情報が載ったiCalenderをエクスポートする方法
GoogleCalender→設定→他のカレンダーの設定 日本の祝日→iCal形式の公開URL

ブラウザ上に↑のiCal形式の公開URLをコピペするとiCalenderのファイルがダウンロードされる。

※iCalenderの見方について下記を参考
https://www.fenet.jp/salesforce/column/%E6%8A%80%E8%A1%93/186/
Could not get lock /var/lib/dpkg/lock-frontend. It is held by process 10913 (unattended-upgr) 解決方法


環境：ubuntu

・解決できた方法
以下のコマンドを実行

cd /etc/apt/apt.conf.d

nano 20auto-upgrades

1 という数字を全て 0 に書き換える。

再起動する。




参考サイト

https://qiita.com/nanbuwks/items/9402b7927c98283f1241
Junit4 で どうしても アノテーションなしでテストしたい場合 (Maven, Gradle などは未使用)

## JUnit4 でどうしてもアノテーションなしでテストしたい場合
ここでは、Maven や Gradle なしで 素のJava で、アノテーションなしで Junit を使うコードを書きます。
Junit4 の内部構造を知る上で、ライブラリの使い方が載っていなかったので、記事にしました（コメントを読めば分かるんですが・・・）。

まずは、[Junit4 の src/main/java](https://github.com/junit-team/junit4/tree/main/src/main/java) の下の `junit` フォルダをプロジェクトの配下に置きます。
そして、テストを行いたいファイルで まず TestCase を継承したテストクラスを作成します。

```java
import junit.framework.Assert;
import junit.framework.TestCase;
import junit.framework.TestResult;

public class Hoge {
  public static class HogeTest extends TestCase {
    protected double someValue1;
    protected double someValue2;

    protected void setup() {
      someValue1 = 1.0;
      someValue2 = 2.0;
    }
  }
}
```

ここに、テストケースを検証するメソッドを追加します。

```java
    protected void setup() {
      someValue1 = 1.0;
      someValue2 = 2.0;
    }

    public void testAdd() {
      double result = someValue1 + someValue2;
      Assert.assertTrue(result == 3.0);
    }
```

Assert の種類は、[Assert.java](https://github.com/junit-team/junit4/blob/main/src/main/java/junit/framework/Assert.java) を参照にしてみて下さい。

そして、このテストを動かすコードを書きます。

```java
    public void testAdd() {
      double result = someValue1 + someValue2;
      Assert.assertTrue(result == 3.0);
    }
    public void main(String[] args) {
      TestCase test = new MathTest() {
        public void runTest() {
          setup();
          testAdd();
        }
      }
      TestResult testResult = test.run();
      /* Test Result */
      int totalTest = testResult.runCount();
      int failureCount = testResult.failureCount();
      int errorCount = testResult.errorCount();
      int successCount = totalTest - failureCount - errorCount;
      System.out.println("Success Count : " + successCount);
      System.out.println("Failure Count : " + failureCount);
      System.out.println("Error Count : " + errorCount);
    }
```

ここまでで、テストの結果が表示できます。
また、[TestResult.java](https://github.com/junit-team/junit4/blob/main/src/main/java/junit/framework/TestResult.java) に以下のような `toString()` を追加することで `System.out.println(testResult);` で結果を表示することもできます。

```java
    @Override
    public String toString() {
        int fSuccesses = this.fRunTests - this.fFailures.size() - this.fErrors.size();
        return  "Total " + this.fRunTests + " tests run.\n-----\n"
            +   "Success " + fSuccesses + " tests\n"
            +   "Failures " + this.fFailures.size() + " tests\n"
            +   "Errors " + this.fErrors.size() + " tests";
    }
```

以下、全コード

```java
import junit.framework.Assert;
import junit.framework.TestCase;
import junit.framework.TestResult;

public class Sample {

	public static class MathTest extends TestCase {
		protected double fValue1;
		protected double fValue2;

		protected void setup() {
			fValue1 = 2.0;
			fValue2 = 3.0;
		}

		public void testAdd() {
			double result = fValue1 + fValue2;
			Assert.assertTrue(result == 5.0);
		}
	}

	public static void main(String[] args) {
		TestCase test = new MathTest() {
			public void runTest() {
				setup();
				testAdd();
			}
		};
		TestResult testResult = test.run();
		System.out.println(testResult);
	}
}
```
入力した約数を全部列挙するプログラム　線形探索と改良版の2パターン（Java）

最近約数を全部列挙するプログラムをjavaで書く方法を2通り思いついたのでそれを書いていきたいと思います。（今後自分が競プロとか参加した時にどこかで使う機会もありそうだなと思ったのでメモとしての役割もありますが）
# そもそも約数って何？(一一")
数学において整数 N の約数とは、N を割り切る整数またはそれらの集合のことである。（wikipediaより）

https://ja.wikipedia.org/wiki/%E7%B4%84%E6%95%B0

約数って何？って聞かれたときにこう答えられたらかっこいいですね。僕は「6÷2って整数で割り切れるよね？じゃこの時2は6の約数なんよね」といったノリで答えてしまいそうな気がします。
プログラム的には、数字a,b(0 < aかつ0 < b <= a)があり、a%b == 0 になる時bはaの約数と言えますね。
これを頭に入れてとりあえず組んでいきます。
# パターン1：とりあえず線形探索

```Java:Divisor.java
import java.util.*;

public class Divisor {
	public static void main(String[] args) {
        System.out.println("数字を入力して下さい");
    	Scanner sc = new Scanner(System.in);
		long N = sc.nextLong();
		for(long i = 1; i <= N; i++){
			if(N % i == 0 && i == N) System.out.print(i);
			else if(N % i == 0)  System.out.print(i + ",");
		}
	}
}

```

出力結果
①Nに123を入れた時

```
1,3,41,123
```
②Nに23456を入れた時
```
1,2,4,8,16,32,733,1466,2932,5864,11728,23456
```

③Nに6を入れた時

```
1,2,3,6
```

大丈夫そうですね。
でもこのプログラム、もっと改良できそうですね。
例えば28の約数を求める際に1が求まった際、同時に28も求まりそうですね。
同様に2が求まった際、14も求まりそうですね。
同様に4が求まったら7も求まりますね。
ということはこの時6まで求まればわざわざ7以降は調べる必要ないですね。
（ここまで求めた数字の中で求まった数字以外で自然数を掛け合わせて28にならないからです。）
64の約数を考えた時も8まで求めてしまえば9以降は調べる必要もなさそうです。

そうです。これ√Nまで求めてしまえばそれ以降調べなくてもいいのです。
ではこれをプログラムにしていきましょう。

# パターン1：√Nまで求めるパターン

```Java:Divisor.java
import java.util.*;

public class Divisor {
	public static void main(String[] args) {
		System.out.println("数字を入力して下さい");
    	Scanner sc = new Scanner(System.in);
		long N = sc.nextLong();
		double rootN = Math.sqrt(N);
		long NN = (long)rootN;
		ArrayList<Long> divisors = new ArrayList<>();
		for(long i = 1; i <= NN; i++){
			if(N % i == 0){
				if(N/i != i){
					divisors.add(i);
					divisors.add(N/i);
				}
				else {
					divisors.add(i);
				}
			}
		}
		Collections.sort(divisors); //ソート
		String Ans = "";
		for(Long num : divisors){
			Ans += num + ",";
		}
		System.out.println(Ans.substring(0,Ans.length() - 1));//最後の","を省く
	}
}
```
といった感じで√Nまで求めた場合でもプログラムが完成しました。

AtCoderのテストコードで試しにN = 100000000を計算させてみたところ
①の線形探索では
実行時間:2658 ms
②の改良版では
実行時間:264 ms

でした。なんと計算時間が10倍も違いますね。

# まとめ
今回は約数を求めるという簡単な問題ですが、簡単な問題でもこういった数学的な工夫を凝らせるのはプログラムの実装の面白い所ですね。例えば1から100まで求める際もfor文を使っていちいち足す必要が無く、シグマ計算でn(n + 1)/2にn = 100を代入すれば計算量1で済みますもんね。
「できるだけ計算量を減らすにはどうしたらよいか」、そういった思考をこれからも続けていくためにも数学の勉強も頑張ろうと思いました。
JSの最近の書き方

最近の書き方

- バッククォートで囲むと文字列の変数をうめこむことができる。改行をすることも可能。
`This is ${name}`

- objectのキーの省略可
変数名とオブジェクトのキーが同じ場合は省力可能
const name = 'taro';
const obj = {name};
// {name : 'taro'}

- 桁埋めはpadStart
- ネストされた配列をフラットにする　flat
- オプショナルチェイニング（エラーにならず最後までみてくれる）
obj.device?.normal?.id
→undefined
- null undfinedだったら右を返す
null ?? 1
undefined ?? 1
→1
false ?? 1
→false
0 ?? 1
→0
- 全部置換する　replaceAll
【どハマり】Nuxt generateで動的ルーティングする時は必ずパスの最初にスラッシュをつけよう

## 結論
### OK
```nuxt.config.js
  generate: {
    async routes() {
      const pages = await axios
        .get(
          //APIリクエスト
        )
        .then((res) =>
          res.data.contents.map((content) => ({
            route: `/${content.id}`,
            payload: content,
          }))
        );
      return pages;
    },
  },
```
### NG
```nuxt.config.js
  generate: {
    async routes() {
      const pages = await axios
        .get(
          //APIリクエスト
        )
        .then((res) =>
          res.data.contents.map((content) => ({
            //スラッシュが。。。ない。。。（便宜上、無意味なテンプレートリテラルを使っています）
            route: `${content.id}`,
            payload: content,
          }))
        );
      return pages;
    },
  },
```

これで1週間くらい悩んだお話。

## 何が起きたのか
なんてことのない凡ミスなのですが、ここが原因と気づくのにかなり悩みました。

上記コードの通り、nuxtとheadless CMSの組み合わせで開発をしており、nuxt generateの設定で動的ルーティングの記述をしていました。

サンプルコードですが、実際の記事ページを以下のようなコードだと想定します。

```/pages/_id/index.vue
<template>
  <div class="article">
    <p>{{ content.title }}</p>
  </div>
</template>

<script>
export default {
  name: "",
  async asyncData({ payload }) {
    if (payload) {
      return {
        content: payload,
      };
    }
  },
};
</script>
<style lang="scss">
</style>

```

そして、実際にnuxt generateしてページにアクセスした画面が以下のような感じです。

![スクリーンショット 2022-11-05 15.10.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255971/3d606d1a-cd7e-70d7-32a5-1345c931bfdc.png)

画面上には正しくcontent.titleが表示されているにも関わらず、コンソールにJSエラーが出ており、contentが未定義だと怒られています。

これ、説明できる方がいらしたらぜひコメントいただきたいのですが、とても不可解でした。

「generateのルーティング設定でパスの頭にスラッシュの記述を忘れると、ブラウザ上でvueのデータが再評価されてエラーを出力する」という現象だと思うのですが、理論的に原因が説明できません。。。

今回はカルーセルといったJavaScriptコードが動かなくなってしまい、解消に苦戦しました。

同じところでつまづいた方が少しでも楽に解決できればと、もやもやを残しながら投稿させていただきました。

以上です。