OmniAICreator/Qiita-1.07M huggingface dataset:
[HTML]gridかflexでレスポンシブなメインコンテンツの左右の余白を別の背景にする

# 完成系
**以下のようなイメージ**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/647020/37292529-259e-4237-0195-3e51a1a62ba1.png)
**レスポンシブのため左右の余白は調整される**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/647020/f4f256bd-8822-7c94-05ec-a3c517879be4.png)

# メモ書き
* よくあるパターン
* 今回は背景色のみを別々のものしたが、具体的なコンテンツを配置することも可能
* HTML、CSSでは以下を実現する方法はたくさんあるらしいが、とりあえずレイアウトでメジャーなgridとflexの両パターンで実装

# gridで実装するパターン

* minmaxで真ん中のコンテンツは可変幅を制限している
* 親から子の幅を指定でき、gridは分かりやすい
```css:gridのcss
.grid-parent {
  display: grid;
  height: 200px;
  /* 真ん中の中心コンテンツは幅制限 */
  grid-template-columns: 1fr minmax(300px, 350px) 1fr;
  margin-top: 1em;
}

.main-content {
  background-color: #b0c4de;
}

.left-background {
  background-color: #ffffe0;
}

.right-background {
  background-color: #faf0e6;
}
```
```html:html
    <div class="grid-parent">
      <div class="left-background">左の余白</div>
      <div class="main-content">メインコンテンツ</div>
      <div class="right-background">右の余白</div>
    </div>
```

# flexで実装するパターン
* flexではflex(flex-grow, flex-shrink, flex-basis)のショートハンドで余白の扱い を指定
* min-widthとmax-widthで可変幅制限
* もっと複雑な構造の場合 or gridが非対応のブラウザをケアする場合に便利

```css:flexのcss
.flex-parent {
  display: flex;
  height: 200px;
  margin-top: 1em;
}

.flex-main-content {
  flex-grow: 10;
  min-width: 300px;
  max-width: 350px;
}

.flex-left-background {
  width: 1em;
  flex: 1;
}

.flex-right-background {
  width: 1em;
  flex: 1;
}
```
htmlではgridと同様の色のcssも指定
```html:flexのhtml
    <div class="flex-parent">
      <div class="left-background flex-left-background">左の余白</div>
      <div class="main-content flex-main-content">メインコンテンツ</div>
      <div class="right-background flex-right-background">右の余白</div>
    </div>
```
# ソースコード全文確認
https://codesandbox.io/embed/grid-flex-responsive-margin-626ggt?fontsize=14&hidenavigation=1&theme=dark

# あとがき
gridと微妙に縮小伸長タイミングが異なってしまうので同じ挙動にする方法があれば教えてほしいです
iOSでSafariからVLCを起動してストリーミング再生する

# きっかけ
iOSでSafariからVLCでストリーミング再生できないという話を見た。
よく見ると、URLencodeされたURLだと、VLCでは再生できない模様。
[Wikipediaによると、パーセントエンコードと言う](https://ja.wikipedia.org/wiki/%E3%83%91%E3%83%BC%E3%82%BB%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0)んですね、知らなかった。
Infuseというアプリだと、再生できる。

# x-callback-url
iOSではx-callback-urlという仕組みをつかってアプリ間連携している。これまた知らなかった。
x-callback-urlは、http://x-callback-url.com/ にて仕様がまとめられている。

# InfuseとVLCの違い
例えば、
```
 infuse://x-callback-url/play?url=PROTOCOL://ADDRESS
```
で再生できたものを、
```
 vlc-x-callback://x-callback-url/play?url=PROTOCOL://ADDRESS
```
としても、再生できない。

# VLC-iOSのURLの扱い

色々さまよい、VLC-iOSのソースを見ることに。
[こちらのcommit](https://code.videolan.org/videolan/vlc-ios/-/commit/8341da11559fa32e16d3df237f094df6963bd8fd)によると、
```
if (value.range(of: "%3A%2F%2F", options: NSString.CompareOptions.caseInsensitive, range: value.startIndex..<end, locale: nil) == nil) {
```
とあり、URLに`%3A%2F%2F`を含んでいるかで挙動が別れそう。
URLに`%3A%2F%2F`を含ませれば、パーセントエンコードされていると判定され、再生できるのではと想像し、
```
vlc-x-callback://x-callback-url/play?url=PROTOCOL%3A%2F%2FADDRESS
```
としたところ、再生できるようになった。…が、ダウンロードか再生の選択ポップアップが表示される。

# VLC-iOSのx-call-back-urlのアクション
[VLCのページ](https://wiki.videolan.org/Documentation:IOS/#x-callback-url)によると、Actionsとして、

> stream: VLC plays the stream provided by the URL parameter

が挙げられている。再生はこれだと思い、
```
vlc-x-callback://x-callback-url/stream?url=PROTOCOL%3A%2F%2FADDRESS
```
としたところ、 ポップアップ無しで再生。わーい！
他に、ダウンロードや、再生完了時のアクションなども書けそうで、色々使えそう。

# オチ
ここまで調べた結論的な内容が、掲示板に書かれていました…敗北。
Windows/Mac/Linux対応のウインドウタイトルを設定する関数を作る

タイトルバーに表示する文字列を設定する関数です。
Windowsならコマンドプロンプト・PowerShell、Mac・Linuxならターミナル(端末)のウインドウ上部のタイトルバーに表示されている文字列をいじります。

私の調べる限りだとタイトルを設定する関数がおそらく存在しないっぽいので、自分で作ってやろうって感じです。

## 環境
- Python - すべて3.10.xに統一

今回は以下の4つのOSで動作検証を行いました。

- Windows - Windows11 Pro 22H2
- Mac - macOS Ventura 13.0
- Linux - Ubuntu 22.04.1 LTS / Fedora Linux 36

## ソースコード
```python:Title.py
import os

def title(text):
    # OSの種類を判別する
    # Windows
	if os.name == 'nt':
		os.system(f'title {text}')
    # Mac / Linux
	elif os.name == 'posix':
		print(f'\x1b]2;{text}\x07', end='', flush=True)
```
想像してたより結構シンプルに仕上がりました。内容としては

1. OSの種類を判別する
1. それぞれのOSに合ったタイトルを設定する命令を実行する

この2ステップのみです。

## 動かしてみた
### Windows
Windows11 Pro 22H2
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1185453/6eb73570-c0e2-aa72-55ef-d64b09a5fdb9.png)

### Mac
macOS Ventura 13.0
![スクリーンショット 2022-10-29 14.38.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1185453/91a8fb52-b2e5-9faf-439c-6a9659e6345b.png)

### Linux
Ubuntu 22.04.1 LTS
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1185453/a4184712-a142-68b4-6a48-e26cbd59dea9.png)

Fedora Linux 36
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1185453/e6cfa1cc-0677-016e-903e-0c096528e01d.png)

## 参考にさせていただいたサイト
https://www.atsumitakeshi.com/python/py_os_discrim.html

https://stackoverflow.com/questions/2330393/how-to-set-the-program-title-in-python
【Script SetUp】検索機能を実装するよ！【VUEX】【TypeScript】

# 始めに
簡単な検索機能の実装を目指します。

やることはたった2つ！
* 事前準備(データを作っておく)
* 検索機能実装

# 開発環境
* MacBook Air (M1, 2020)
* npm 8.18.0
* "vue": "^3.2.13"


# 事前準備
検索機能を実装する前にやることが2つあります。
①型定義
②検索するデータの設定。

# 型定義
使用する型を作りましょう。
```typescript:src/types/index.ts
export type State = {
  todos: todo[];
};

export type Todo = {
  id: number;
  description: string;
  date: Date;
};
```
## 検索するデータの設定。
以下のコードでは2つのことをします。
* 取得するデータ設定
* ゲッターでデータを取得するコードを定義
```typescript:src/store/index.ts
import { InjectionKey } from 'vue';
import { createStore, Store, useStore as baseUseStore } from "vuex";
import { State } from '../types'

export const key: InjectionKey<Store<State>> = Symbol();

export const store = createStore<State>({
  //データの設定
 state: {
    todos: [
        {
            id:1,
            description: 'プログラミング'
            date: '2022-10-29'
        },
        {
            id:2,
            description: '散歩'
            date: '2022-10-28'
        },
        {
            id:3,
            description: '筋トレ'
            date: '2022-10-30'
        }
    ],
  },
    //データ取得するゲッターの定義
  getters: {
     getTodos: state => state.todos
  },
  mutations: {
  },
  actions: {
  }
});

export const useStore = () => {
  return baseUseStore(key);
}
```

# 検索機能実装！
```vue: src/views/TodosView.vue
<script setup lang="ts">
import { ref, computed } from 'vue'
import { useStore } from '../store'
import { Todo } from '../types'

//リアクティブなデータを作成
const todoFilter = ref('')

const store = useStore()
//打ち込んだものを含むデータを取ってくるようにする。
const todos = computed<Todo[]>(()=>{
    return store.getters['getTodos'].filter((element: Todo)=> 
        element.description.includes(todoFilter.value)|| 
        //includesはDate型だと使えないので、string型に変える。
        element.date.toString().includes(todoFilter.value)
    )
})

</script>
<template>
    <div>
        <h2>タスク一覧</h2>
        <form>
            <label>
                検索したいキーワードを入力してください<br>
                <input type="text" v-model="todoFilter"/>
            </label>
        </form>
        <hr />
        <table>
            <thead>
                <th>タスク</th>
                <th>日時</th>
            </thead>
            <tbody>
                <tr v-for="todo in todos" :key="todo.id">
                    <td>{{todo.description}}</td>
                    <td>{{todo.date}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
```
# 終わり
検索機能は意外と簡単に実装できちゃいます。
includes()メソッドは結構使えるのでぜひ覚えて帰っちゃってください！
Hybrid drives, ボッシュ自動車handbook 11版(80) p.990

Electrification of the drive, Hybrid drives, ボッシュ自動車handbook 11版(79)

人生で影響を受けた本100冊。
https://qiita.com/kaizen_nagoya/items/16af53acbb147a94172e

に掲載した本のうち、「新人プログラマ応援」企画で「私の推薦書３３冊」として３３冊紹介した。

新人プログラマ応援　私の推薦書３３冊
http://qiita.com/kaizen_nagoya/items/98c62f051dbdb4f8aca2
残りの６７冊から、順に過去の読書感想を引用し、新たな読書感想文を追記する。

 <この項は書きかけです。順次追記します。>


# ボッシュ自動車ハンドブック version 11, 2022

Automotive Handbook  May 2, 2022

https://www.amazon.co.jp/dp/1119911907/

ボッシュ自動車handbook(英語)11版(0)＜エンジニア夏休み企画>【読書感想文】

https://qiita.com/kaizen_nagoya/items/dfa35aa6f669e5df983e
# Contents
Motor vehicle, 28
Basic principles, 32
Mathematics and methods, 204
Materials, 258
Machine parts, 354
Joining and bonding techniques, 426
Vehicle physics, 462
Operating fluids, 538
Refrigerants for air-conditioning systems, 591
Drivetrain(駆動系), 594
Internal-combustion engines(内燃機関),642
Management for spark-ignition engines,800
Gasoline-engine operation with alternative fuels, 886
Management for diesel engines, 906
Electrification of the drive, 970


# Hybrid drives,
p.990
## Motivation
## Functionalities of hybrid drievs
## Classification of hybrid drievs
## Classification based on drive structure,
## Incorporating the transmission in the hybrid drive

# Reference
[1] Directive 2007/46/EC/  of the European Parliament and of the Council of 5 September 2007 establishing a framework for the approval of motor vehicles and their trailers, and of systems, components and separate technical units intended for such vehicles (Framework Directive) 

https://eur-lex.europa.eu/legal-content/EN/TXT/PDF/?uri=CELEX:32007L0046&from=EN

各国語版
https://eur-lex.europa.eu/legal-content/EN/TXT/?uri=CELEX:32007L0046

全体
https://single-market-economy.ec.europa.eu/sectors/automotive-industry/legislation/motor-vehicles-trailers/directive-200746ec-framework-directive_en

[2] M. Uhl: 3rd international conference Automotive 48V Power Supply Systems 24-26, November 2015 Dusseldorf

[3] H.Tschoke, P. Gutzmer, T. Phrid(Editors), Die Elektrifizierung des Antriebsstrangs, 1st Edition, ebook, Verlag Springer Vieweg, 2019

# 自己参考資料(self reference)

ボッシュ自動車ハンドブック 

https://qiita.com/kaizen_nagoya/items/8e330ce57880f04d71d9
ボッシュ自動車handbook(英語)10版　目次

https://qiita.com/kaizen_nagoya/items/57c799ff544c96efdea9

自動車工学とBosch Vehicle Handbook

https://qiita.com/kaizen_nagoya/items/d13ff6b0e4d7c8907c0d

 ＜この記事は個人の過去の経験に基づく個人の感想です。現在所属する組織、業務とは関係がありません。＞

# 文書履歴(document history)
ver. 0.01 初稿 20221029

### 最後までおよみいただきありがとうございました。
いいね　💚、フォローをお願いします。
####  Thank you very much for reading to the last sentence.
Please press the like icon 💚　and follow me for your happy life.
Metal 3.0 を使うには，macOS Ventura 13 にアップグレードするだけではなく，Xcode 14.1 にする必要がある

タイトルで言いたいことはほぼ表せました！

`MTLCompileOptions`( https://developer.apple.com/documentation/metal/mtlcompileoptions )で，`MTLLanguageVersion`( https://developer.apple.com/documentation/metal/mtllanguageversion )というのが指定できます．これによって，MetalをコンパイルするときのMetalのバージョン番号を指定することができます．

今回得た知見は，Objective-Cで `MTLLanguageVersion3_0`，Swiftで `MTLLanguageVersion.version3_0`を含むコードをエラーなしでコンパイルするためには，macOS Ventura 13にアップグレードするだけでは足りず，Xcode 14.1 にする必要があるということです．

またObjective-Cで`MTLLanguageVersion3_0`はマクロとして宣言されているので，`#ifdef`を用いることで，定義されているかどうかを判別できることもわかりました．

20221103 追記: macOS Monterey 12.6.1 で Xcode 14.1 をインストールできたので試したのですが，`MTLLanguageVersion3_0` を含めると，下記ウォーニングが出ます．

```
warning: 'MTLLanguageVersion3_0' is only available on macOS 13.0 or newer [-Wunguarded-availability-new]
```

また，[`MTLDevice.newLibraryWithSource:options:error:`](https://developer.apple.com/documentation/metal/mtldevice/1433431-newlibrarywithsource?changes=_5)メソッドでエラーになって実行できないということも確認できました．

20221103 追記その2: Xcode 14.1の正式リリースが出ました．macOS Ventura 13 + Xcode 14.1 の組み合わせで動作確認できました．
DjangoのSuperUserをターミナルからの変更と削除

Django標準のUserモデルを使用の場合が対象ですが、シェルより
下記コマンドでパスワードの変更ができます。
```
> python3 manage.py shell

>>> from django.contrib.auth.models import User
>>> users = User.objects.all()
>>> user = users[0]
>>> user
<User: hogehoge>
>>> user.set_password('hpge1234')
>>> user.save()
>>>

// control + D
```
スーパーユーザーをシェルから削除する場合はこちらです。
```
> python3 manage.py shell

>>> from django.contrib.auth.models import User
>>> User.objects.get(username="hogehoge", is_superuser=True).delete()
(1, {'auth.User': 1})
>>> 

// control + D
```
VSCodeでPowerShellスクリプトを有効にする

`Ctrl` + `,`で設定画面を開き右上の`設定(JSON)を開く`アイコンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263584/56ccf205-b187-f54e-ad15-7a708c06ec23.png)
 
開いた画面で以下を追加
```json
"terminal.integrated.env.windows": {
    "PSExecutionPolicyPreference": "RemoteSigned"
}
```
TensorFlow Decision Forestsを使ってみた

## はじめに

　少し前にKaggleで見かけたTensorFlow Decision ForestsなるTensorFlowライブラリが気になったので、ちょっと調べて使ってみました。記事書いてる人も少なそうだったので、投稿してみます。

https://www.tensorflow.org/decision_forests

## 実行環境

　どうやらまだWindows、Macは未対応みたいなので、ここではgoogle Colab を使用します。データセットは私の過去の記事でも使っているscikit-learnデータセットの乳がん患者を使用したいと思います。

## インストール

　TensorFlow Decision Forestsのインストール

```python
!pip install tensorflow_decision_forests
```

## インポート

　使用するライブラリはnumpy, pandas, データセットに scikit-learn, そして TensorFlow Decision Forestsです。

```python
import numpy as np
import pandas as pd
from sklearn.datasets import load_breast_cancer
import tensorflow_decision_forests as tfdf
```

## データセットの読み込み

　使用するデータセットはscikit-learnデータセットの乳がん患者データセットを使います。

```python
cancer = load_breast_cancer()
cancer_data = pd.DataFrame(cancer.data, columns = cancer.feature_names).assign(malignant=np.array(cancer.target))
```

## 訓練用データセットとテスト用データセットへの分割

　8:2で訓練用データセットとテスト用データセットに分割

```python
def split_dataset(dataset, test_ratio=0.2):
    test_indices = np.random.rand(len(dataset)) < test_ratio
    return dataset[~test_indices], dataset[test_indices]

train_ds_pd, test_ds_pd = split_dataset(cancer_data)
```

## データセットをtensorflow用のデータセットに変換

　このときに従属変数をlabelで指定します。

```python
train_ds = tfdf.keras.pd_dataframe_to_tf_dataset(train_ds_pd, label='malignant')
test_ds = tfdf.keras.pd_dataframe_to_tf_dataset(test_ds_pd, label='malignant')
```

## モデルの訓練

　後で見れるようにcompileでmetricsにaccuracyを指定しておきます。

```python
model = tfdf.keras.RandomForestModel()
model.compile(metrics=["accuracy"])
model.fit(train_ds)
```

## モデルのサマリーを確認

　出力は省略しますが、summaryでモデルの概要、独立変数の重要度、訓練時のログなどが確認できます。

```python
model.summary()
```

## テスト用データセットを使っての推論

　accuracy:1.0となかなかの好結果が出ました。

```python
model.evaluate(test_ds)
```

```出力結果
1/1 [==============================] - 1s 1s/step - loss: 0.0000e+00 - accuracy: 1.0000
[0.0, 1.0]
```

## その他

　決定木の出力

```python
tfdf.model_plotter.plot_model_in_colab(model)
```

　出力
![qiita_20221028_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350321/02a605d5-a05e-11bd-723a-371b3496a35e.png)


　訓練ログのプロット

```python
import matplotlib.pyplot as plt

logs = model.make_inspector().training_logs()

plt.figure(figsize=(12, 4))

plt.subplot(1, 2, 1)
plt.plot([log.num_trees for log in logs], [log.evaluation.accuracy for log in logs])
plt.xlabel("Number of trees")
plt.ylabel("Accuracy (out-of-bag)")

plt.subplot(1, 2, 2)
plt.plot([log.num_trees for log in logs], [log.evaluation.loss for log in logs])
plt.xlabel("Number of trees")
plt.ylabel("Logloss (out-of-bag)")

plt.show()
```

　出力
![qiita_20221028_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350321/1e6faa52-45dc-ea61-e4dd-42461e366514.png)


## おわりに

　使い勝手としてはscikit-learnと同じようにお手軽に使える感じで、決定木の中身や学習ログが簡単に見れるのはTensorFlowっぽいですね。モデルはランダムフォレスト以外にも交配ブースティングなども使えるようです。
Jetson Nano で電源ボタンOFFができなくなった件

# 電源ボタン OFF とは

Jetson　Nano には電源ボタンがないが、ショートさせることで電源ボタンとして機能するピンが存在する。
参考：
[電源ボタンを追加-Jetson Nano](https://wotani.jimdo.com/%E9%9B%BB%E5%AD%90%E5%88%B6%E4%BD%9C/jetson-nano/%E9%9B%BB%E6%BA%90%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E8%BF%BD%E5%8A%A0-jetson-nano/)
[「Jetson Nano」を“まとも”に使えるようにする](https://monoist.itmedia.co.jp/mn/articles/1907/01/news037.html)

電力を供給した状態でボタンを押すと電源が ON され、起動中に押すとシャットダウンされる。
正確には実行する行動を尋ねてきたのち、十数秒後に自動でシャットダウンされる。


# 起きたこと

ある日電源ボタンを押してもメッセージが出るだけでシャットダウンされない状態になってしまった。


# 原因と解決策
TeamViewerをインストールしたことによって、自動シャットダウンができなくなった模様。
以下のコマンドで TeamViewer を削除すると、正常に戻った。
```shell
dpkg -r teamviewer-host
```

# 最後に
私はこれで一日溶かしたので、どなたかの参考になれば。
デスクトップ版Teamsでダウンロードしたファイル名が文字化ける場合の暫定対応と注意点

:::note warn
2022年10月29日時点の情報です。
同じ症状で対応中の方へ向けの『参考情報と注意喚起』の為に記事を作成しました。

今後のアップデートによって文字化けは解消される可能性があります。
また、注意点の内容が当てはまる環境とそうでない環境があるかと思います。
:::

:::note warn
2022年11月12日に下記環境にて動作確認したところ、文字化けが解消されていました。

Windows 10 Pro 21H2 OSビルド 19045.2251
Microsoft Teams バージョン 1.5.00.31168 (64 ビット)
:::

# 現象

1. デスクトップ版Teamsで1ファイルをダウンロード。
1. ダウンロードした手順は、ファイル名で右クリック ⇒ 『ダウンロード』のリンククリック 。
1. ファイル名が文字化け。
1. xlsxについて、ダウンロードするとファイル名は文字化けするが、ファイルの中身（セルの値）は文字化けしていない。
1. Teamsのバージョンは1.5.00.28567 (64 ビット)
1. Windows 10 Pro 21H2 OSビルド 19044.2130

# 原因

Teamsのアップデートによるようです。

あたいの環境で下記を行いましたが、解消できませんでした。

* Windows10のアップデート（最新化する）
* Teamsのアップデート（最新化する）
* Windows10の設定変更（後述の注意点の内容）

# 暫定対応

1. 複数ファイルを選択してファイル名右クリック ⇒ ダウンロード 。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/b5ad8211-ad01-f710-e268-c8755faf2d4a.png)
2. 『OneDrive_1_2022-10-29.zip』のようなzipがダウンロードされる。
2. zipの中身のファイル名は文字化けしていない。

下記の手間が無視できるのであれば、この方法をユーザーに伝えることで一旦解決。

* ダウンロードしたzipを解凍してファイルを取り出し
* 1ファイルだけダウンロードしたい時は、適当に選択した片方の不要ファイルを捨てないといけない


# 注意点

**『ベータ: ワールドワイド言語サポートでUnicode UTF-8を使用』** という設定は変更しても『Teamsのダウンロードファイル名文字化け問題』は解消しませんでした。

それどころか全く関係無い別ソフトの障害になってしまいました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/b0cab6f3-dd42-25f7-bc04-e74f84a384f4.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/acf1973f-7920-01b4-7961-27fcdc2c5df1.png)

下記はもともとチェックが入っていませんでした。
試しにチェックを入れて再起動（設定反映）したところ、Teamsとは全く無関係のエクセルファイルのVBAで例外が発生していしまいました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/f5f23806-d4f0-501e-6a13-72af1cd7205e.png)

# 蛇足

Teamsを使っているということはMocrosoft365のソフトやVBAも使っている場合が多いかと思います。

VBAは思わぬところでクライアントPC（Windows10）の環境設定の影響を受けてしまいます。
設定を変更する時は注意。

# 参考サイトさん

https://www.itsc.ynu.ac.jp/news/20221026.html

# バージョン

Windows 10 Pro 21H2 OSビルド 19044.2130
Microsoft Teams バージョン 1.5.00.28567 (64 ビット)
Microsoft Excel for Microsoft 365 MSO (バージョン 2209 ビルド 16.0.15629.20196) 32 ビット
tkinterのWindow表示

## tkinterのimport
```py
 import tkinter as tk
```
:::message
as tk とは　tkinterを略してtkと呼ぶ　　
ということを定義するものです。
:::

-----------------------
## Window表示
```
Windowの名前　= tk.Tk()
```
とすることでWindowを作れます。
##### 例　　
```py
 import tkinter as tk
 root = tk.Tk()
```
----------------------
## Windowにタイトルを設定
```
Window名.title(タイトル名)
```
のようにするとWindowのタイトルを設定できます。
##### 例
```py
 import tkinter as tk
 root = tk.Tk()
 root.title("ここにタイトルを入力")
```
---------------
## Windowのサイズ指定
```
Window名.geometry("横x縦")
```
とするとWindowのサイズを指定できます。
```py
 import tkinter as tk
 root = tk.Tk()
 root.title("ここにタイトルを入力")
 root.geometry("300x200")
```

:::note warn
「" "」を忘れないように
:::
:::note warn
「横x縦」のxは英語の「エックス」
:::
EC2×2台S3なし環境にて、WordPressの管理画面アクセスを片方のサーバに集中させる

## やりたいこと
AWSでWordPressのEC2サーバ2台の冗長構成を構築したとする。WordPress経由でコンテンツをアップロードする際に、ロードバランサ経由でアップロードすることになるため、アップロードデータの通信も分散されてしまい、ファイルが片方のサーバにしかアップロードされないといった問題が起こります。
そのため、まずはアップロードするデータが全て片方のサーバに行くように、ALBにてルールを設定したいと思います。
サーバAからBへのサーバ間ファイル同期については別で記事を書きました。
https://qiita.com/benny3333/items/93de67d047e3725102bc
![WordPressのアクセスを一台によせる.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1879925/f9f3a38d-0cb5-623b-50e6-a1bc0fc9b6d1.png)

## ターゲットグループを作成する
wordpressのアクセスを集中させたい方のサーバを一つのみ入れておく。
Protocol Version(基本HTTP1)に注意すること、EC2側が対応しているものにすること。

## ALBにルールを作成する
```:パスベースのルール
IF
パス：/wp-admin/*または/wp-login.php*の場合
THEN
転送：作成したターゲットグループ
```
※/wp-login.php*の方はいらないかもしれません。ご存じの方いたら教えて下さい。

## WordPressへのアクセスが片方のEC2に集中しているか確認する
両サーバにSSH接続を行い、ウィンドウを左右に並べる。
その後以下コマンドを実行する。
```:
tail -f /var/log/httpd/access_log | grep wp-admin
```
この状態でWordPressに管理画面にログインし、画面の更新や、管理画面内のボタンをクリックし、アクセスログが片側のサーバだけで流れていればOK。
python tkinterのボタンを使う

## 準備
まず初めに**tkinter**
をimportします
```py
 import tkinter as tk
```
次にbuttonを表示するためのWindowを作成します
```py
 import tkinter as tk
 root = tk.Tk()
```
これで準備は終了です

## コードを書こう！
ではコードを書いていこうと思います
ボタンを作るには
```
ボタン名　= tk.Button(表示数Window名, text="表示するテキスト, command = ボタンが押されたとき実行する関数名).pack
```
とすればボタンを作成することができます
#### 例
```py
 import tkinter as tk
 
 def ok():
     print("OK！")
 
 root = tk.Tk()
 button = tk.Button(root, text ="OK", command =  ok).pack()
```
:::note warn
 buttonの最後に”.pack“とありますが
 pack以外にも gridや placeもあります
:::
Amazon EKSでAWS Load Balancer ControllerにAWS Certificate Managerを利用する

# はじめに
Amazon EKSで[AWS Load Balancer Controller](https://kubernetes-sigs.github.io/aws-load-balancer-controller/v2.4/)にAWS Certificate Managerを設定する方法をまとめます。
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.  ArgoCDの設定
[Amazon EKSでArgoCDを利用する](https://qiita.com/miyabiz/items/4022b0aba372a8f2c292)を参考にしてください。

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

# 環境設定
1. Route53でカスタムドメインを取得します。

1. AWS Certificate Managerを取得します。

1.  `akane-ingress.yaml` を作成する
    ※[SSL](https://kubernetes-sigs.github.io/aws-load-balancer-controller/v2.2/guide/ingress/annotations/#certificate-arn)を参考にしてください。
    ※`ACMのARN`を設定する

    ```yaml:akane-ingress.yaml
    apiVersion: networking.k8s.io/v1
    kind: Ingress
    metadata:
      annotations:
        kubernetes.io/ingress.class: alb
        alb.ingress.kubernetes.io/scheme: internet-facing
        alb.ingress.kubernetes.io/target-type: ip
        alb.ingress.kubernetes.io/certificate-arn: ${ACMのARN}
      name: guestbook-ui
      namespace: akane
    spec:
      rules:
      - http:
          paths:
          - path: /
            pathType: Prefix
            backend:
              service:
                name: guestbook-ui
                port:
                  number: 3000
    ```

1.  クラスターに適用する

    ```sh
    kubectl apply -f akane-ingress.yaml
    ```

# クリーンアップ

1.  クラスターから削除する

    ```sh
    kubectl delete -f akane-ingress.yaml
    ```
SalesforceのTrailblazer.meで[連絡希望] ボタンを追加してみた

今回の内容は動画でも紹介されています

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


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


こんにちは

今回は2022年10月26日ごろ、
SalesforceのTrailblazer.meで[連絡希望] ボタンがTrailblazer.meで表示されたのはご存じでしょうか。

![連絡01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/0f44c57d-6620-3c90-3e6b-4fc420c9ff8b.png)

こちらをクリックすれば

連絡希望　にチェックを入れられます

![連絡希望02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/f7fe2ec4-38a6-2277-c4ed-11ddbcd1e59b.png)



こちらを設定すれば

「連絡希望」ボタンを削除
という表示になります

![連絡03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/9b6898b7-5785-5748-19cf-23ff97021db4.png)

これで設定完了です

自分以外の人がプロファイルをみるとこのように表示されます


![連絡希望03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/022e5395-5bc8-8aa9-1988-45ac13976230.png)

こちらで表示すれば
このような定型文を送ることが可能です


![連絡004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/df560c54-4f6a-99f5-3913-c9626d6e28be.png)


文章はこのようになります


○○様

Trailblazer.me のプロファイルを拝見させていただき、Salesforce に関する高い技能と深い専門知識をお持ちであると感じ、ご連絡させていただきました。


求人の連絡を希望されておられるようですので、弊社の求人に関して一度お話をさせていただければと存じます。

ご興味がございましたらお返事をいただけますと幸いです。

この
SalesforceのTrailblazer.meで[連絡希望] ボタンを活用すればコミュニケーションが円滑に進みますね
Control of electric drive, ボッシュ自動車handbook 11版(79) p.984

Electrification of the drive, Control of electric drive, ボッシュ自動車handbook 11版(79)

人生で影響を受けた本100冊。
https://qiita.com/kaizen_nagoya/items/16af53acbb147a94172e

に掲載した本のうち、「新人プログラマ応援」企画で「私の推薦書３３冊」として３３冊紹介した。

新人プログラマ応援　私の推薦書３３冊
http://qiita.com/kaizen_nagoya/items/98c62f051dbdb4f8aca2
残りの６７冊から、順に過去の読書感想を引用し、新たな読書感想文を追記する。

 <この項は書きかけです。順次追記します。>


# ボッシュ自動車ハンドブック version 11, 2022

Automotive Handbook  May 2, 2022

https://www.amazon.co.jp/dp/1119911907/

ボッシュ自動車handbook(英語)11版(0)＜エンジニア夏休み企画>【読書感想文】

https://qiita.com/kaizen_nagoya/items/dfa35aa6f669e5df983e
# Contents
Motor vehicle, 28
Basic principles, 32
Mathematics and methods, 204
Materials, 258
Machine parts, 354
Joining and bonding techniques, 426
Vehicle physics, 462
Operating fluids, 538
Refrigerants for air-conditioning systems, 591
Drivetrain(駆動系), 594
Internal-combustion engines(内燃機関),642
Management for spark-ignition engines,800
Gasoline-engine operation with alternative fuels, 886
Management for diesel engines, 906
Electrification of the drive, 970


# Control of electric drive
p.970
## Drivetrain of an electric vehicle
VCU: vehicle control unit

## Vehicle control unit for electric vehicles
## Further applications of the VCU for electric vehicle

# Reference
参照なし

# 自己参考資料(self reference)

ボッシュ自動車ハンドブック 

https://qiita.com/kaizen_nagoya/items/8e330ce57880f04d71d9
ボッシュ自動車handbook(英語)10版　目次

https://qiita.com/kaizen_nagoya/items/57c799ff544c96efdea9

自動車工学とBosch Vehicle Handbook

https://qiita.com/kaizen_nagoya/items/d13ff6b0e4d7c8907c0d

 ＜この記事は個人の過去の経験に基づく個人の感想です。現在所属する組織、業務とは関係がありません。＞

# 文書履歴(document history)
ver. 0.01 初稿 20221029

### 最後までおよみいただきありがとうございました。
いいね　💚、フォローをお願いします。
####  Thank you very much for reading to the last sentence.
Please press the like icon 💚　and follow me for your happy life.
数日に１回Herokuアプリのメモリが溢れてサーバーが落ちる原因がGoogleのクローラだった

RailsアプリをHerokuのHobby Dynosでデプロイしていて、数日に１回くらいのペースで急激にメモリがオーバーしてトラフィックをさばき切れていない問題が今まで起きていて、気になっていた。
![1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628412/bff55559-d3e1-c1fb-bdce-9408cf5ba5ee.jpeg)

これは自分のコーディングスキルが低くてなんか変なデータの呼び方をしてしまっているんだろうなと思っていたが、ログを追ってみると特定のユーザー（クライアントID）が複数ページにまたがる、とあるデータを片っ端からリクエストしていることが判明。それも３秒に１回くらいのペースなので、人間がやっているとしたら故意にサーバーに負荷をかけようとしているに違いないような挙動だった。
![２.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628412/99d763da-a086-c9a2-ccc0-8fa97baddc47.jpeg)

いたずらかなぁ、と思いながらこの特定のクライアントIDだけのログを見てみると、一番最初にアクセスしているパスがrobots.txtだった・・・
![３.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628412/40c76e15-aa44-7a58-689c-d848b133b295.jpeg)

つまりGoogleのインデックスクローラが最初にサイトのrobots.txtを参照して、そこでアクセス禁止されていないページを巡回しようとして、大量のデータページを片っ端からリクエストしていたわけっぽい。
別にGoogleにインデックスを作ってもらう必要もないデータページなので、クローラアクセスを禁止して様子を見てみることにしよう。
Copilotで得するPHPプログラミング#1

# Copilotで得するPHPプログラミング


この半年くらいGitHubが提供するCopilotを便利使っている。
こいつナシの考えられないくらい依存する体質になってしまった。

というわけで、Copilotをどう便利に使っているかを説明する。

## 実践例

作りたい処理をコメントに入力する

![ss 18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6384/9bd32d8c-83c1-f40d-4467-58cbd48899ae.png)

Copilotが候補をいくつか出してくるので、選択する。

![ss 19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6384/5ce95db5-3bd7-f650-0fcb-5b8a8e26a3f1.png)


そのままだと動かないので、直してあげる。
![ss 20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6384/8cab8b33-d763-4d0c-9de5-70142b42dd6f.png)


ちゃんと動く
すばらしいCopilot。

![ss 21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6384/a80b1060-8e37-cc57-bdd5-4827f9f35771.png)

注意すべきなのは、正解にみえてぜんぜん違うコードを提示することがあること。気づかずに実装すると危険。この例はいずれ記事に書くかも。

以上「PHP強化月間」の記事でした。

白猫仮面

# 追記Ansibleのロールを作成


作りたい処理のコメントを書く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6384/9230f7f1-af11-544a-4fa5-94fcea30a2d0.png)

Copilotが候補を提示するので Tabキーを叩いて決定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6384/ba2dd1bf-ee3f-9dfc-2611-2cf14108e72d.png)

いい感じのコードが自動生成される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6384/bf7d3dd1-f82e-3fd1-3f48-9c4b5bd982d8.png)
UXを学ぶ(2).まずはユーザビリティから

ユーザビリティは、<b>ユーザー像、ユーザーの使用目的、ユーザーが使用する状況</b>を明確に想定して考えなければ具体的な成果につながりにくい。

企画段階で、具体的なケース（使う人、使われる場所、使用する媒体、使用する時間帯、一人か複数か、使い捨てなのか複数回使うのか、使用者の趣味嗜好、ライフスタイル、経済的な事情、季節、あるとないでユーザーのライフはどう変わるのかなど）を想定してユーザビリティの基準<b>（有効さ、効率、満足度）</b>を満たすものになりうるか検討する。
つまり、複数のケースからあえて抽象化して総体を言語化する「概念化」を得意になること。

<b>ユーザビリティの志向にも２種！</b>
<dl>
  <dt>マイナスをゼロへ志向のユーザビリティ</dt>
  <dd>使えないものを使えるものにする</dd>
  <dt>ゼロからプラスへ志向のユーザビリティ</dt>
  <dd>使えるものをより便利にする </dd>
</dl>
AndroidのJetpack Composeアニメーションを触ってみる（AnimatedVisibility）その２

前回同様Jetpack Composeアニメーション使用して動かしてみようと思います。

今回は高レベル アニメーション API　の　AnimatedVisibilityについてやっていこうと思います。

https://developer.android.com/jetpack/compose/animation?hl=ja#animatedvisibility

# 前回

https://qiita.com/yuta317/items/8bb18e146e872b8f2c14

前回はアニメーションさせる方法で終わりました。今回はEnterTransition と ExitTransitionを設定をしてみようと思います。

`fadeIn` `fadeOut`　`slideIn`　`slideOut`　を今回は実装していきます。

# 表示非表示のアニメーションカスタム
詳しいコードは前回を見てください。
※今回は`AnimatedVisibility`からしか記載しません。

fadeIn fadeOut
こちらは透明からだんだんと見えるようになり、だんだん透明になって消えていく方法です。
追加で秒数指定をしております。1000ミリ表でアニメーションをするようになっております。

![透明アニメション.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274615/c10e4f86-a444-093c-72f0-dd2424a0caac.gif)


```AnimatedVisibilityView.kt
AnimatedVisibility(
    isExtended,
    enter = fadeIn(
        animationSpec = tween(durationMillis = 1000)
    ),
    exit = fadeOut(
        animationSpec = tween(durationMillis = 1000)
    )
) {
    Text(
        text = name,
        Modifier
            .padding(start = 8.dp, end = 12.dp)
            .background(Color.Red)
    )
}
```

slideIn slideOut
こちらは横から見えるように動きます。横へ動いて消えていく方法です。
追加で秒数指定とアニメーションの速度を指定してます`tween(1000, easing = LinearOutSlowInEasing)`をしております。1000ミリ表でアニメーションをするようになっております。
`IntOffset(fullSize.width, fullSize.height)`はズラす位置です。今回はTextの大きさ分右下にズレてます。

![横ズラしアニメーション.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274615/43aaa6b9-d270-b748-0042-a00688af48af.gif)


```AnimatedVisibilityView.kt
AnimatedVisibility(
    isExtended,
    enter = slideIn(tween(1000, easing = LinearOutSlowInEasing)) { fullSize ->
        IntOffset(fullSize.width, fullSize.height)
    },
    exit = slideOut(tween(1000, easing = LinearOutSlowInEasing)) { fullSize ->
        IntOffset(fullSize.width, fullSize.height)
    },
) {
    Text(
        text = name,
        Modifier
            .background(Color.Red)
    )
}
```

以上です。
paizaラーニング データセット選択メニュー 文字列の配列 Java 解答

# STEP: 5 とても大きな数値の入力
## 問題
https://paiza.jp/works/mondai/data_structure/data_structure__string_step1

## 解答

```java:step5.java
import java.util.*;


public class Main {
    public static void main(String[] args) {
        Scanner sc = new Scanner(System.in);
        String line = sc.nextLine();
        System.out.println(line);
    }
}
```

## 結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2918186/b2007783-df4b-9169-b8bf-29abde587e3b.png)

# STEP: 6 とても小さな数値の入力
## 問題
https://paiza.jp/works/mondai/data_structure/data_structure__string_step2

## 解答
```java:step6.java
import java.util.*;


public class Main {
    public static void main(String[] args) {
        Scanner sc = new Scanner(System.in);
        String line = sc.nextLine();
        System.out.println(line);
    }
}
```
## 結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2918186/a7df8468-3058-e2b6-9634-d386b9a2d480.png)

# FINAL問題 文字列の配列
## 問題
https://paiza.jp/works/mondai/data_structure/data_structure__string_boss

## 解答
```java:final.java
import java.util.*;


public class Main {
    
    private static final String YES = "Yes";
    private static final String NO = "No";
    private static final String WALL = "#";
    private static final String ROAD = ".";
    
    public static void main(String[] args) {
        Scanner sc = new Scanner(System.in);
        int h = sc.nextInt();
        int w = sc.nextInt();
        int r = sc.nextInt() -1;
        int c = sc.nextInt() -1;
        
        // 改行
        sc.nextLine();
        
        String[][] map = new String[h][w];
        for(int i = 0; i < h; i++){
            String line = sc.nextLine();
            String[] array = line.split("");
            map[i] = array;
        }
        
        if(Objects.equals(map[r][c], WALL)) {
            System.out.println(YES);
        } else {
            System.out.println(NO);
        }
        
    }
}
```
## 結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2918186/aebdbc22-dbe7-a65b-9ccc-5cb0ebd4ce7f.png)
Slim は死なず

[Slim](https://rubygems.org/gems/slim) という Ruby 製テンプレートエンジンのお世話になっている人も少なくないと思う。私も愛用している。

GitHub リポジトリーはこちら：

https://github.com/slim-template/slim

Rails などで HTML の生成に使われることが多いと思うが，HTML のほか XML の生成にも適しており，私は SVG なんかも Slim で書いている。

# もしかしてメンテ停止？

Slim の最新版は 2020 年 5 月 8 日にリリースされた 4.1.0 で，2 年ほど新しいバージョンが出ていない。
とはいえ，Slim は私の印象では完成度が高く，2 年くらい新しいのが出てなくてもとくに不安にはならなかった。

ところが，ちょっとした改善要望（後述）を issue にしようとリポジトリーを訪れて，「えっ？」と思った。
最後のコミットが 2020 年 10 月 20 日だったのだ。
新版のリリースは無くても，たいがい細かいコミットはあったりするものだ。それが 2 年ほど無いとは？
各 issue に対するメンテナーさんたちのコメントもしばらく無いようだ。

gem のオーナーは [stonean](https://github.com/stonean) さん，[minad](https://github.com/minad) さん，[fredwu](https://github.com/fredwu) さんらしい。
stonean さんは GitHub 上ではほとんど活動されていないようだ。他のお二人は Slim 以外のプロジェクトでは活動されている。
https://github.com/slim-template/slim/graphs/contributors

不安は的中した。
GitHub のページのほかに，Slim は専用のウェブサイトを持っていたが，それが [消えたんである](https://github.com/slim-template/slim/issues/890)。

これはさすがにヤバいのでは。

開発が年単位で停滞するのはよくあることだが，サイトまで消滅してそのまま，ということは完全なる放棄を意味するのではないか？

バージョン 4.1.0 のままでも数年くらいは使い続けられる気がする（根拠不明）が，もっと先のことを考えると，Slim を手放すことも検討しなければならないかもしれない。ひょえ〜。

# 動きあり！

そんななか，久しぶりに動きがあった。
2022 年 10 月 26 日，2 年ぶりのコミットが入ったのだ。
https://github.com/slim-template/slim/commits/master

おお，Slim は死んでいない！

この先どうなるか分からないけど，光が見えた。

# スポンサー募集

さらに，これと同じくらいのタイミングで，GitHub の仕組みを使ったスポンサー募集が始まった。
https://github.com/sponsors/slim-template

定期（月ごと）あるいは 1 回きりのどちらかで，金額を自由に設定してスポンサーになることができる。
私も（少額かつ 1 回きりだけど）謝意をお金で伝えた[^yen]。

[^yen]: 金額はドルで設定するのだが，ものすごい円安を実感した。


**Slim に世話になっている個人や企業さんは検討してみられては？**

# おまけ（私が困っていたのは）

現状（バージョン 4.1.0）の Slim でもほとんど不満はないのだけれど，一つだけ困っていたのがこれ：
[Embedded sass: won’t work with sass-embedded · Issue #889 · slim-template/slim](https://github.com/slim-template/slim/issues/889)

Slim テンプレートでは，たとえば

```
doctype html
meta charset="utf-8"
title test sass: in Slim
sass:
  body
    background: orange
h1 Hello
```

の 4〜6 行目のように，`sass:` という記述で Sass コードを埋め込むことができる。

これは，[sassc](https://rubygems.org/gems/sassc) と組み合わせて使うぶんにはいいのだが，この gem は既に終わっている。
今なら [sass-embedded](https://rubygems.org/gems/sass-embedded) を使いたいが，現状の Slim と sass-embedded を組み合わせると，`sass:` を処理するところでエラーが出てしまうのだ。

原因からすると Slim 側で修正するのが筋だと思うので上記 issue を立てたのだが，今のところ省みられていない（3 ヶ月経過）。

sass-embedded のほうに [相談した](https://github.com/ntkme/sass-embedded-host-ruby/issues/61) ところ，`Slim::Embedded::SassEngine` にパッチを当てる対処方法を教えてくださった。
sass-embedded の作者さん（ntkme さん）はさらに，[Tilt 側でどうにかするプルリクエスト](https://github.com/rtomayko/tilt/pull/383) を Tilt に提案してくださったのだが，これはあえなく却下。

Slim 側で直すのは（たぶん）簡単なので，開発が本格的に再開すればいずれ解決すると思っている。
気長に待ちたい。

# 追記（2023-01-29）Slim は生きている！

2023 年 1 月 23 日に Slim 5.0.0 がリリースされた。今後も継続的に保守・開発が行われると期待できる。よかった。

ただ，私がどうにかしてほしかった sass-embedded との相性問題は，今回は解決されなかった。これは技術的に困難だからではなく，Slim, Tilt, sass-embedded のどれがどのように問題を解決すべきかについて合意が得られていないということのようだ（間違ってたらすいません）。

ところで，上にも書いた Slim のスポンサー募集だが，あまりスポンサーが集まっていない。
Slim を活用している企業はたくさんあると思うんだけどな（チラッ）。

# 追記（2023-11-11）sass-embedded に対応した！

「おまけ」の節に書いた問題は本日リリースされた slim 5.2.0 で直ったようだ。
以下の記事に書いた。
[Slim 5.2.0 で再び sass: が使えるようになった #Ruby - Qiita](https://qiita.com/scivola/items/735137a34d8ed81d7060)
Viteで環境変数を使用する

Viteで.envファイルに入れた環境変数を使用するのに少し手間取ったので備忘録としてメモをしておきます。
```
環境
vite@3.1.8
vue@3.2.41
```

## vueのやり方で試してみる
以下のやり方で試してみた

```.env
TESTKEY=1234
```

```APP.vue
console.log(process.env.TESTKEY)
```

これをするとエラーになった。どうやら通常のvueのやり方は使えないらしい

## マニュアルを読んでみた
Viteの公式マニュアルを読むと以下のようなやり方でできた。
（初めから読めよという話、、、）

・公式マニュアル
https://vitejs.dev/guide/env-and-mode.html#env-variables-and-modes

```APP.vue
console.log(import.meta.env.TESTKEY) 
```

viteで立ち上げるとvueのコマンドが使えなくなることがるみたいです。
（コンパイルの方法が違う←全然違っていたらすいません）
vue初心者の私にはそこらへんがわかっておらず混乱しました。
※ちなみに@vueuse/headも使えませんでした
PowerShellにはhistoryが足りないしlessもない

## 答え

```
cat  (Get-PSReadlineOption).HistorySavePath
```

これでヒストリがみれる。

## 背景

PowerShellのhistoryコマンドはセッション中のコマンド履歴しか表示してくれない。historyコマンドは、先週やったことを思い出したいから使うのであって、用途とあってない。

ヒストリ自体は` (Get-PSReadlineOption).HistorySavePath`ファイルに保存されている。それをみればいいのだが、

```
PS C:\Users\yugoy> less  (Get-PSReadlineOption).HistorySavePath
less: The term 'less' is not recognized as a name of a cmdlet, function, script file, or executable program.
Check the spelling of the name, or if a path was included, verify that the path is correct and try again.
```

less コマンドはないとのこと。なるほどじゃぁmoreかなと思ったけど先頭行を見せるコマンドであって後ろから見る用途ではない。ということでcatで表示するのが期待に叶う。本当はlessでスクロールしたり検索したりしたいけど、PowerShellにはそれに相当するコマンドがない。そもそも標準のエディタがない。

別解としては

```
code  (Get-PSReadlineOption).HistorySavePath
```

でVSCodeでヒストリを眺めることができる。こうなるとPowerShellでファイルを扱ってるという感じじゃない。あれこれ探したけど、どうもvim,nano,lessに相当するものがPowerShellにはない。いやvimもnanoもlessもLinux上では単品の実行ファイルなのだから、Windowsにもコマンドとしてインストールすればいい。がそこまでやらないしVSCodeでいい。
レビューにも一定の作業品質を

## なぜレビューに注目するのか
同じ成果物をレビューしてもらったとして、｢レビュアーによって指摘事項が違うな｣と思ったことはありませんか？
どうやら、レビュアーによって観点(目の付け所)は違うようです。
(レビューに限ったことではないですが)
だとしたら、体系化されたレビュー観点があれば、Aさんのような経験がなくても、Bさんのような知識がなくても、彼らと同じ指摘が自分にも出来るかもしれない。
という夢のようなことを思いつきました。

…で、実はかなり前からそれについて[SQiP分科会](https://www.juse.or.jp/sqip/workshop/outline/index.html#kenkyu2)で検討されていることを最近になって知りました。

## この記事のスコープ
[JaSST Review'22](https://www.jasst.jp/symposium/jasstreview22.html)に参加し、しっかり考えたことのなかったレビュー観点に出会ったので、簡単にまとめてみました。
いろいろと調べるうちにJaSST Tokyo 22で行われた[ワークショップ](https://www.jasst.jp/symposium/jasst22tokyo/details.html#F6)の資料に行きつきましたので、そこでも取り上げられたらしき手法も合わせて簡単にまとめました。
 - SQiPのレビュー分科会で検討されているらしい手法のうち、ごく一部のご紹介となります

### 作成者コンテキストアプローチ
 - 誰がどういう状況で作った成果物か
   - 徹夜明けとか、類似プロダクトをかけ持ちしてるとか
     - 類似プロダクトのコピペで、今回には関係ない記述がないか
     - 異常系まで検討されているか
   - このアプローチは、個人攻撃になる可能性があるのであまり使いたくない

### 利害関係者の関心事アプローチ
SAKE法(Stakeholder Action KanshingotoExtraction)
 - ステークホルダーのアクションに着目したレビュー観点導出手法
   - 保守運用フェーズで不都合が生じないか…etc,
   - ｢運用でカバー｣は本当に実現可能か

### 対象成果物に求められることアプローチ
SBR法(Stealth Based Review)
 - プロジェクト特性によるステルス潜在事項推測手法
   - 成果物に記載されていないが、前提との齟齬がないか確認する
   - ｢記載されていないこと｣を明示する

### 対象成果物によくある欠陥アプローチ
DCC法(Defect Chain Chart)
 - 欠陥知識（欠陥連鎖チャート）を有効活用したレビュー方法
   - 類似プロダクトで検出された指摘事項について、該当プロダクトではどうなっているか

### プロダクトリスクアプローチ
RDT法(Risk Defect Tree)
 - リスクに着目したリスク欠陥ツリーによるレビューポイント導出方法
   - 発生したら影響の大きい問題に対して、どんな手を打っているか

### 利用シナリオアプローチ
HDR法(Hypothesis Driven Review)
 - 仮説駆動型レビュー手法
   - ユーザーがどのような流れで利用するか想像する
   - 正常系だけではないことに注意する

### CR法(手法というよりレビュー戦略：レビュー観点を用いた手法を適用する)
 - 重大欠陥を効率よく検出する観点の段階的設定によるレビュー実践手法
   - 複数人がアドホック的にレビューした場合、指摘が重複するのを防ぐ
   - 漫然と成果物を読み、アドホック的に思いつきで指摘することを防ぐ
   - あらかじめレビュアーの観点を指定することで、検出したい指摘を狙い撃ちできる


## まとめ
つらつらとレビュー観点を記載しました。
賢明なる読者諸氏の中には｢おや？｣と思われた方も多いと思います。
(こう書かれた時に｢おや？｣と思ったことのない私です)
そうです、
#### レビュー観点はテスト観点としても充分に使える
逆に、テスト観点をレビュー観点にしても充分に使えそうです。
要件定義や仕様ドキュメント(wikiやBacklogでもいい)を、上述の観点で眺める。
それはもう立派な**静的テスト**です。
JSTQB FLのシラバスにもレビュー＝テスト手法として記載されています。

レビュー観点を自分のものにすれば、プロダクトだろうがドキュメントだろうが、同じ質でチェックできるようになりますね。
こうした共有知を自分のものにできれば、ベテランとの数十年の差を縮めることができます！(かもしれない)

あと、レビュー後にレビュアー同士で感想戦をしましょう。
きっと別の新たなプロジェクトリスクへの気づきがあるはず！
技術ブログは新規記事ではなく過去記事を更新すべし！



# 詳細

https://techblog.short-tips.info/blog/main.md


# この記事の内容:オウンドメディアの伸ばし方

これに参加してきましたので、その備忘録です。

https://siteengine.doorkeeper.jp/events/144543

<img src="https://doorkeeper.jp/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBNjg5QlE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--9a43336c98769e65103a3f99f1da714930d57e86/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RkhKbGMybDZaVjkwYjE5c2FXMXBkRnNIYVFMb0F6QT0iLCJleHAiOm51bGwsInB1ciI6InZhcmlhdGlvbiJ9fQ==--91839951a073aea8822f6907dc8d81559a890706/3937690add3598778ce0fd1a0421d5a1.png">


このブログの目的は主に三つ。

- オウンドメディア運営の目的を明確にし

- 取り組む優先順位付け

- PDCAを回せるようになる

正直セミナーについてはあまりいい先入観はなかったのですが、ブログやSEOやオウンドメディアについては本による学習よりも体型的な知識の吸収率がいいです。




## ユーザー数とセッション数を伸ばしたい場合:過去記事を見直すこと！！！

ブログの記事を直す場合、そのターゲットは二つになる。

1.新しいコンテンツを追加する

- ページが増える

- インデックスされるキーワードが増加する

- 流入数が増える

2.既存ページの改良

- 過去記事を見直して、大きく改善する

- 検索順位が改善される

- 表示回数が増える or クリックされる可能性が増える

- 流入数が増える

この1と2を比べた時に、**2の既存ページの改良の方が遥かに大切**

なぜならば、

- アクセス数は偏りがある（ほとんどのサイトは、一部のページに依存してることが多い）

- アクセス数が多いページに絞って改善を行うことで、**低いコストで高い成果**を得ることができる

- サイトの規模が大きければ大きいほど、新規の記事が占める割合は減少する

よって、**最も依存度の高い、一部のページの過去記事の見直しで、大きく改善される可能性がある**




## 感想：個人の範囲で見れないものが見れるのがセミナーの良さ

techplayから参加させていただきました。

zoomへのリンクが見当たらなかったため参加までに時間がかかってしまいましたが、改めて貴社サイトからアドレスを登録し参加できました。

盲点だったのは、**「過去の記事を更新する方が効率が良い」**という考え方です。

考えて見れば当たり前のことですが、個人の範囲ではなかなか思いつかず、目新しさにのみ追いかけていた状態でした。

本セミナー参加してよかったです。

またどうぞよろしくお願いします。


## さらに詳しい内容

https://techblog.short-tips.info/blog/main.md

セミナーに参加できない場合もあると思うので、セミナーの一部改善内容を追記いたしました。
Gitの基本コマンド集

# はじめに
こんにちは，来海くるみ（@walnut-pro）です．
仕事でソースコード管理に使うGitのコマンドをまとめました．

# ブランチの確認 - git branch
全てのブランチを確認するときには，こちら
```bash
git branch

#   develop
#   feature/modify-component
# * master
```
現在のブランチだけを確認したいときには，こちら
```
git rev-parse --abbrev-ref HEAD
```
ブランチが多くて最後まで表示されないときには，Enterかqキーを押す
Enterを押すと，「：」より次の行が表示され，qキーを押すとブランチの表示が終了する
```bash
git branch

#  develop
#  feature/modify-component
#  feature/modify-A
#  feature/modify-B
#  feature/modify-C
#  feature/modify-D
#  feature/modify-E
#  feature/modify-F
#  feature/modify-G
#  feature/modify-H
#  :
```
# ブランチの作成&移動 - git checkout
ブランチを移動するときには，こちら
```
git checkout feature/modify-component
```
新規ブランチを作成&移動するときには，こちら
```
git checkout -b feature/modify-J
```
ブランチを作成するだけのときには，こちら
```
git branch feature/modify-J
```

# ブランチを最新の状態にする - git pull
既にリモートリポジトリに存在するブランチをもとに，ローカルのブランチを最新の状態にするときには，こちら
```
git pull origin feature/modify-J
```

# リポジトリに上げる - git add/commit/push
ブランチ（feature/modify-J）に移動した後に，作業内容をリポジトリに上げるには，こちら
originがGithub側のリモートリポジトリのブランチを指している
```
git add .
git commit -m "Jコンポーネントの修正"
git push origin feature/modify-J
```
addとcommitを一緒にやってしまいたいときには，こちら
```
git commit -am "Jコンポーネントの修正"
```
# コンフリクトが起きたときの対応
リモートリポジトリのブランチの最新の状態と競合している箇所があるため，まずはpullをする
```
git pull origin feature/modify-J
```
続いてステータスの確認
```
git status
```
```bash
On branch feature/modify-J
You have unmerged paths.
  (fix conflicts and run "git commit")
  (use "git merge --abort" to abort the merge)

Unmerged paths:
  (use "git add <file>..." to mark resolution)
    both modified:   test_conflict.js

no changes added to commit (use "git add" and/or "git commit -a")
```
コンフリクトを起こしているファイルの中身（test_conflict.js）を見る
HEAD から feature/modify-Jの間が実際にコンフリクトしている部分となる
```js
<<<<<<< HEAD
// 今チェックアウトしているブランチ（feature/modify-J）での変更内容
・・・
=======
// 元のブランチでの変更内容
・・・
>>>>>>> feature/modify-J
```

コンフリクトしているソースコードを修正する
```
<<<<<<< HEADから=======の間か，=======から>>>>>>> feature/modify-Jの間のどちらかを残す
```
# 上記の手順でコンフリクトが解消できない場合
リモートリポジトリのブランチの最新の状態に合わせてリセットする（ローカルでの変更分が消えてしまうので，注意）
```
git reset --hard origin/feature/modify-J
```

# 変更を残したまま，別のブランチに移動する - git stash
変更を残したまま，作業ブランチを移動したいとき，そのまま移動するとこのようなエラーが出る
```bash
# Please move or remove them before you can switch branches.
# Aborting
```
変更内容を一時退避させたい場合には，こちら
```
git stash save "modify-Jの変更"
git checkout feature/modify-A
```
stashできたか確認するときには，こちら
```bash
git stash list

# stash@{0}: On feature/modify-J: "modify-Jの変更"
```
作業ブランチに戻ってstashを復元したいときには，こちら
```
git stash pop stash@{0}
```
stashを削除したいときには，こちら
```
git stash drop stash@{0}
```
stashせずに変更内容を消去して，ブランチの移動を行いたいときには，こちら
```
git checkout .
git checkout feature/modify-A
```
# リモートリポジトリの特定のコミットまで状態を戻す -git revert
既存のコミットを取り消したいときには，こちら
＜commit＞の部分にコミットidを指定します．
```
git revert <commit>
```
revertコマンドを使うとcommitまで行われるが，コミットしたくない場合には，こちら
```
git revert <commit> --no-commit
```
# gitのブランチを操作する - git merge/rebase

こちらに詳しく図解されています．

https://git-scm.com/book/ja/v2/Git-%E3%81%AE%E3%83%96%E3%83%A9%E3%83%B3%E3%83%81%E6%A9%9F%E8%83%BD-%E3%83%AA%E3%83%99%E3%83%BC%E3%82%B9

# 終わりに
他にも記事を書いていますので，よかったらご覧ください！

https://qiita.com/walnut-pro/items/d97e6293bc9964d0da45
【IPFS】IPFS/IPFS Cluster デーモンのサービス化【systemd でサービス起動】

> Ubuntu などの Debian 系 Linux OS で IPFS および IPFS Cluster を systemd でサービス起動したい。
> 簡単に。

つまり、IPFS 用の `systemd` の設定ファイルをコピペピピックしたいのです。

## TL; DR <sub><sup>（今北産業）</sup></sub>

1. 以下のサービス設定ファイルをピーコピーコして、お好きなエディタで作成する。（ユーザー、パスや IP などは適宜変更してください）
    ```ini:ipfs.service
    [Unit]
    Description=IPFS daemon
    After=network.target
    [Service]
    User=myuser
    WorkingDirectory=/home/myuser/
    ExecStart=/usr/local/bin/ipfs daemon --enable-gc --migrate
    Restart=on-failure
    [Install]
    WantedBy=multi-user.target
    ```
    ```ini:
    [Unit]
    Description=IPFS-Cluster daemon
    After=network.target ipfs
    [Service]
    User=myuser
    WorkingDirectory=/home/myuser/
    ExecStart=/usr/local/bin/ipfs-cluster-service daemon --bootstrap /ip4/<IP of your bootstrap>/tcp/9096/p2p/<NodeID>
    Restart=on-failure
    [Install]
    WantedBy=multi-user.target
    ```
1. 設定ファイルを `/etc/systemd/system` に設置する。

    ```bash
    cp ./ipfs.service /etc/systemd/system/ipfs.service
    cp ./ipfs-cluster.service /etc/systemd/system/ipfs-cluster.service
    ```
1. サービスを登録して起動させる。
    ```bash
    sudo systemctl --system daemon-reload
    sudo systemctl enable ipfs ipfs-cluster
    sudo systemctl start ipfs ipfs-cluster
    ```

## 参考文献

- [Linux の任意のスクリプトをサービス登録し OS 起動時に自動起動させる [init.d/SystemD 編]](https://qiita.com/KEINOS/items/f3e6b3064b0cbe35fd03#systemd-%E3%81%A7%E8%B5%B7%E5%8B%95%E6%99%82%E3%81%AB%E4%BB%BB%E6%84%8F%E3%81%AE%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%88%E3%82%92%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E5%AE%9F%E8%A1%8C%E3%81%99%E3%82%8B) @ Qiita
- [Simple "systemd" example to run IPFS and IPFS-Cluster as a service.](https://gist.github.com/KEINOS/bc0e44d42debd817f823eeff20e1e1a8) | Gist @ GitHub
[AWS Batch] CannotStartContainerError: executable file not found in $PATH で AWS Batch が動かない時の対策

# 症状

- `AWS Batch > ジョブ > 詳細`を確認すると、結果がFailedになっていた
- 同ページ内の、`コンテナ`と書かれたカードの理由欄に以下のようなエラーが吐き出されていた。

```bash
CannotStartContainerError: Error response from daemon: OCI runtime create failed: container_linux.go:348: starting container process caused "exec: \"which python\": executable file not found in $PATH": unknown
```

`AWS Batch > ジョブ > 詳細`ページは以下のような感じになっている。

![2022-10-28_19h00_39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/327407/5a8525e2-2321-3ed3-e48e-dd501009ebb0.png)

`&& ls`は気にしないで...debugしたかったの...。


# 原因

原因は簡単で、serverless frameworkの`Command`の記載方法が間違っていた。

```yaml:serverless.ymlの一部
Resources:
  TrialJobDefinition:
    Type: AWS::Batch::JobDefinition
    Properties:
      JobDefinitionName: ${self:custom.job_definition_name}
      Type: container
      ContainerProperties:
        Image: !Sub '${AWS::AccountId}.dkr.ecr.${AWS::Region}.amazonaws.com/${self:custom.image_name}:latest'
        Memory: 512
        Vcpus: 1
        Command:
          - python main.py  # <--- ダメ
```


# 対策

`Command`部分を以下のように直したところ、正常に動作した。

```yaml:serverless.ymlの一部
Resources:
  TrialJobDefinition:
    Type: AWS::Batch::JobDefinition
    Properties:
      JobDefinitionName: ${self:custom.job_definition_name}
      Type: container
      ContainerProperties:
        Image: !Sub '${AWS::AccountId}.dkr.ecr.${AWS::Region}.amazonaws.com/${self:custom.image_name}:latest'
        Memory: 512
        Vcpus: 1
        Command: ["python", "main.py"]  # <--- OK
```

Dockerfileの`CMD`と同じ書き方をしないといけないらしい。