OmniAICreator/Qiita-1.07M huggingface dataset:
[Rails]ルーティングのネストとは？

## 背景
Ruby on Rails にてアプリ作成の復習中に躓きましたので
こちらに備忘録として投稿いたします。

## ルーティングのネストとは？
あるコントローラーのルーティングの中に、別のコントローラーのルーティングを記述することです。

例えば、twitterのようなアプリがあったとします。
あるツイートに対して、たくさんのコメントがUPされますが、
どのツイートに対してのコメントかを判別する必要が出てきます。
それを実装するために、ルーティングをネストさせます。

## 具体的な記述の仕方
```ruby
Rails.application.routes.draw do
  resources :親となるコントローラー do
    resources :子となるコントローラー
  end
end
```

```ruby
resources :tweets do
    resources :comments, only: :create
end
```
このように記述することにより、どのツイートに対してのコメントかというルーティングが作成されます。
![ari.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2850786/a6553cad-9aa6-31c0-0901-0e5c0e0b8b25.png)

ルーティングをネストさせる一番の理由は、アソシエーション先のレコードのidをparamsに追加してコントローラーに送るためです。

この:tweet_idの箇所へ、コメントと結びつくツイートのidを記述すると、paramsのなかにtweet_idというキーでパラメーターが追加され、コントローラーで扱うことができます。


## ネストしなかったら？
ネストしなかったら、どのツイートに対するコメントなのかを判別できなくなります。
![nasi.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2850786/4d25fb44-72c0-fd97-e8f3-41fb7d157d68.png)


## まとめ
ルーティングをネストすると・・・
-URLの階層構造ができる(「/tweets/tweet_id/comments」など）
-関係性のあるもの同士を紐づけることができる(あるツイートとそれに対するコメントなど)
【C++】球や直方体を収納出来るボックスを選ぶプログラム

収納するボックスは、縦・横・高さを持つ直方体とします。この中に、球または直方体を入れる事を考えます。入れる物体の候補には３種類を挙げ、それぞれについて収納可能かどうかを調べます。

まず、物体を１つに絞ってプログラムを作りました。
## 球形の場合
球について考える際は、入れる物体の入力情報は半径の１つのみです。
以下、３種類のボックスをそれぞれＡ、Ｂ、Ｃと呼ぶ事にします。


```c++:作成したプログラム
#include <iostream>
using namespace std;
#define N 3

int main(){
	
	int r, box[100][3];   //r：入れる物体の半径, box[][]１個目の[]：A, B, Cのそれぞれ, box[][]２個目の[]：縦・横・高さのそれぞれ
	cin >> r;
	
	for(int k = 0; k < N; k++){
		for(int m = 0; m < 3; m++){
			cin >> box[k][m];
		}
	}
	
	for(int i = 0; i < N; i++){
		for(int j = 0; j < 3; j++){
			cout << i + 1 << "番目の物体について：" << box[i][j] << endl;
			if(box[i][j] < r){
				cout << i + 1 << "番目の物体に長さ" << box[i][j] << "の辺があり、収納不可" << endl;
				break;
			}else{
				
			}
			if(j == 2){
				cout << i + 1 << "番目の物体→収納可能" << endl;
			}
		}
	}
	
}
```

標準入力を次のように設定して実行すると

:::note info
5
1 4 8
8 3 9
7 7 6
:::

![Screenshot 2022_11_05 15_11_16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2610341/3136e263-ccd6-91c7-09cd-4fecf863871f.png)

というように、正しく動きました。

## 直方体の場合
３辺の長さがそれぞれ異なる場合のある直方体は、入れる向き次第で、入らなかった物体も入るようになる事があります。

sides_boxとbox[f]それぞれの配列は小さい順にソートされたところまできたとします。
そこで「まずsides_boxとbox[f]の一番小さいもの同士、次にsides_boxとbox[f]の2番目に小さいもの同士……」といった感じで、二つの同じＮ番目の要素を比較していって、一回でも sides_box > box[f] になればアウトにするプログラムにしてみます。


```c++
		for(int i = 0; i < 3; i++){
			if(sides_box[i] > box[f][i]){
				break;
			}else{
				
			}
			if(i == 3-1){
				cout << f + 1 << "番目の物体→収納可能" << endl;
			}
			
		}
```

## まとめ
ここまでの内容をもとに、(直方体の方を) １つのプログラムにまとめます。

```c++:完成プログラム
#include <iostream>
using namespace std;
#define N 3

int main(){
	
	int box[100][3], sides_box[3];   //sides_box：入れる物体の３辺, box[][]１個目の[]：A, B, Cのそれぞれ, box[][]２個目の[]：A, B, Cのそれぞれの縦・横・高さ
	
	for(int a = 0; a < N; a++){
		cin >> sides_box[a];
	}
	for(int b = 0; b < N; b++){
		for(int c = 0; c < 3; c++){
			cin >> box[b][c];
		}
	}
	
	int d = 0;
	while(d < 3){   //sides_boxの中で大小比較を行い、最も短い辺の長さをsides_box[0]に持ってくる
		int e = 0;
		while(e < 3-1){
			if(sides_box[e] > sides_box[e+1]){
				int value;
				value = sides_box[e];
				sides_box[e] = sides_box[e+1];
				sides_box[e+1] = value;
			}
			e++;
		}
		d++;
	}
	
	for(int f = 0; f < N; f++){   //「ボックスの３辺の大小比較を行い、ボックスそれぞれの最も短い辺の長さを配列の先頭に持ってきて、都度sides_box[0]と比べる」のを１作業として、その作業をボックスの個数分行う
		
		int g = 0;
		while(g < 3){   //box[f]の中で大小比較を行い、最も短い辺の長さをbox[f][0]に持ってくる
			int h =0;
			while(h < 3-1){
				if(box[f][h] > box[f][h+1]){
					int val;
					val = box[f][h];
					box[f][h] = box[f][h+1];
					box[f][h+1] = val;
				}
				h++;
			}
			g++;
		}
		
		
		for(int i = 0; i < 3; i++){
			if(sides_box[i] > box[f][i]){
				break;
			}else{
				
			}
			if(i == 3-1){
				cout << f + 1 << "番目の物体→収納可能" << endl;
			}
			
		}
		
	}
	
}
```


以上
Next.js + MUI v5でGoogleフォントを使用する方法

## 概要

Next.jsでMUIをGoogleフォントを使用する方法の備忘録になります。
CDNからGoogleフォントを追加する方法と、NPMパッケージを追加する方法がありますが
本手順はCDNから追加する方法のみ紹介します。

## 前提条件
Next環境にMUIをインストールしていること。

## 使用手順

1. 使用したいGoogle Fontsを決める。フォントを決めたら、リンクをコピーする。以下は`Train One`を使用する例になる。
    
    ```jsx
    <link href="https://fonts.googleapis.com/css2?family=Poor+Story&family=Train+One&display=swap" rel="stylesheet">
    ```
    
2. `pages/_document.js`を作成し、`Head`タグの中に、先ほどコピーしたリンクを貼り付ける。Next.jsのpagesコンポーネントはデフォルトで`Head`や`body`タグを定義してくれる。このデフォルト設定を変更するのに使用するのが`pages/_document.js`ファイルである。
    
    ```jsx:pages/_document.js
    import { Html, Head, Main, NextScript } from "next/document";
    
    export default function Document() {
      return (
        <Html>
          <Head>
            <link
              href="https://fonts.googleapis.com/css2?family=Train+One&display=swap"
              rel="stylesheet"
            />
          </Head>
          <body>
            <Main />
            <NextScript />
          </body>
        </Html>
      );
    }
    ```
    
3. `pages/_document.js`に、”Trail One”のフォントを使用するよう、`ThemeProvider`を作成する。以下のコードを実装することによって、ページ全体を`Trail One`フォントにすることができる。
    
    ```jsx:pages/_document.js
    import { ThemeProvider } from "@emotion/react";
    import { createTheme } from "@mui/material";
    import "../styles/globals.css";
    
    function MyApp({ Component, pageProps }) {
      const theme = createTheme({
        typography: {
          fontFamily: ["Train One", "cursive"].join(","),
        },
      });
      return (
        <ThemeProvider theme={theme}>
          <Component {...pageProps} />
        </ThemeProvider>
      );
    }
    
    export default MyApp;
    ```
    

## 一部のみ適用したい場合

テーマ全体ではなく、一部のコンポーネントのフォントだけ変更したい場合は、sxプロパティやカスタムコンポーネントでフォントを指定すると楽。

```jsx:pages/index.js
import { Typography } from "@mui/material";
import { styled } from "@mui/system";

export default function Home() {
  const customeMenu = (props) => (
    <Typography {...props} variant="h1">
      {props.children}
    </Typography>
  );
  const H1 = styled(customeMenu)({
    color: "green",
    fontFamily: ["Train One", "cursive"].join(","),
  });

  return (
    <>
      <Typography variant="h1">Welcome to Next.js!</Typography>
      <H1>Custome Component</H1>
      <Typography
        variant="h1"
        color="primary"
        sx={{
          fontFamily: ["Train One", "cursive"].join(","),
        }}
      >
        sx Component
      </Typography>
    </>
  );
}
```
【Linux】特定のコマンドを履歴に残さない方法

## はじめに

BashやZshにおいて特定のコマンドを履歴に残さない方法について記載します。  

## Bash

Bashの場合には`~/.bashrc`に以下を追記します。  

```:~/.bashrc
export HISTCONTROL=ignorespace
```

すると先頭にスペースを入力して実行したコマンドの履歴は`.bash_history`に保存されなくなります。  

## Zsh

Zshの場合には以下を`~/.zshrc`に追記します。  

```:~/.zshrc
setopt HIST_IGNORE_SPACE
```

すると先頭にスペースを入力して実行したコマンドの履歴は`.zsh_history`に保存されなくなります。
UITapGestureRecognizerで値・パラメータを渡す方法

UITapGestureRecognizerでカスタムクラスを作って任意の値を渡す方法。

画像タップ時やUILabelタップ時にsenderに値を渡す際などに使用。

## コード

```swift
let sampleImageView = UIImageView()
let customTapGesture = CustomTapGestureRecognizer(target: self, action: #selector(tapped(_:)))
customTapGesture.passValue = "aaa"
sampleImageView.addGestureRecognizer(customTapGesture)

//タップ時の処理
@objc func tapped(_ sender:CustomTapGestureRecognizer) {
    print("tapped")
    print(sender.passValue)
}

//カスタムクラスの作成
class CustomTapGestureRecognizer:UITapGestureRecognizer {
    var passValue: String?
}

```

## 参考
https://stackoverflow.com/questions/38445262/pass-parameter-with-uitapgesturerecognizer

## Swiftのお役立ち情報

https://wagtechblog.com/programing/swift-iphone-application-school

https://wagtechblog.com/programing/swift-textbook.html
Anti-theft systems,  ボッシュ自動車handbook 11版(114) p.1444

Vehicle security systems, Anti-theft systems ,  ボッシュ自動車handbook 11版(114)

人生で影響を受けた本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-1) 課題と記事一覧new
https://qiita.com/kaizen_nagoya/items/a9d2887bf2a7598dc8e5

# 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
Emission-control and diagnosis legislation, 1042
Chassis systems, 1108
Vehicle bodies,  1310
Comfort and convenience, 1392
Safety systems in the motor vehicle, 1410
Vehicle security systems, 1430
Automotive electrics, 1450
Vehicle electrical systems for hybrid and electric vehicles, 1560
Automotive electronics, 1620
Entertainment 1780
Drive assistance and sensors, 1804
Drive assistance systems 1872
Future of automated driving 1934
Appendics, 1940

# Anti-theft systems, p.1444
## Electronic vehicle immobilizer 
## Theft-alarm system 


# Reference
[1] $14 StVZO, 
[2] $38a StVZO

# 自己参考資料(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 初稿 20221106
STYLY Studio のテストをブラウザ自動操作で効率化する

# STYLY Studio のテストをブラウザ自動操作で効率化する

今回は、 STYLY Studio の GUI テストの自動化の試みについて、ご紹介します。

本記事と同じ内容を、口頭で解説した動画がありますので、動画の方がお好みの方はこちらをご覧ください！

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

※2022 年 10 月 28 日に [XR 勉強会 by STYLY](https://styly.connpass.com/event/261100/) で登壇した際の動画アーカイブです。

# STYLY Studio とは

STYLY Studio は、3D 空間を制作できる Web アプリケーションです。

- https://gallery.styly.cc/

3DCG の描画用に WebGL を利用し、素材集の部分を React で開発しています。

どんな感じのツールか気になる方は、こちらの動画をご覧ください！

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

# GUI テストについて

STYLY Studio の GUI テストの一部は、 Puppeteer と SikuliX という 2 種類のツールを使って自動化しています。

使い分けはこんな感じです。

| ツール    | テスト対象の UI               |
| --------- | ----------------------------- |
| Puppeteer | React 部分の GUI テストに利用 |
| SikuliX   | WebGL 部分の GUI テストに利用 |

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/06e84ef8-7696-44ae-9618-cfbcff11379f.png)

Puppeteer は、WebGL 製の UI を検出することが得意ではないので、そこを SikuliX でカバーするという構成です。

# Puppeteer による GUI テストの自動化

<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/e5d00315-751b-9bb8-7bcf-e50cdebc5370.png" />

React 部分は、Puppeteer で GUI テストを自動化しています。

ライブラリ構成は以下のような感じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/3090d676-d94a-7b77-3450-c4af5e697082.png)

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

```typescript
/**
 * ヘッダー部分のタイトル文字列を検証します
 * @param page ページ
 * @param headerTitle 期待する文字列
 */
export async function assertHeaderTitle(page: Page, headerTitle: string) {
  const $header = await page.$('.header')
  if (!$header) {
    throw Error('class に "header" が指定された要素が見つかりませんでした')
  }

  const value = await $header.evaluate((el) => el.textContent)
  await expect(value).toEqual(headerTitle)
}
```

`.header` のように CSS セレクター風の記述で DOM を指定できるので、Web エンジニアとしては、とても使いやすいです！

ただ、WebGL 系の UI 部品を指定しずらい特徴があります。

# SikuliX による GUI テストの自動化

<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/43399f87-6ba1-93d4-3658-891ff62a1cd1.png" />

WebGL 部分は、 SikuliX で GUI テストを自動化しています。

SikuliX は、ブラウザ操作だけでなく、PC 操作全般を自動化できるツールです。
画像認識で UI 部品を特定します。

これにより、WebGL 製のアプリケーションでも、自動操作ができます！

ただ、画像認識によって UI 部品を特定しますので、UI の見た目が仕様変更されてしまうと、自動操作処理が動かなくなってしまう難点があります。
そのため、メンテナンスコストが非常に高いです。

# 現状の構成

GUI テストの自動化のメンテナンスコストは非常に高いため、仕様変更に比較的強い単体テストを充実させる方針に、現在はしています。

（もっと良い方法があれば、コメント等でご意見・ご指摘よろしくお願いいたします。）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/09162d89-0df1-e8fa-76d9-e3272674e2d8.png)

※WebGL 部分は、Unity で開発しているため、TestRunner を利用しています。

# さいごに

今回紹介した自動 GUI テスト体制を構築するにあたり、 @uechan16 さんと N さんにご協力いただきました。

また、Umiさんに今回の登壇の記事を書いていただきました！
https://note.com/styly_note/n/na13642de55fa

この場を借りてお礼申し上げます。ありがとうございました！
今日着るべき服を教えてくれるアプリを作る

# 動機
室内の快適な温度で生活していると、果たして外が暑いのか寒いのか分からないことが多い。
天気を調べるのも面倒だし、気温を見てもじゃあどの服を着ればよいのか分からない。
今日の天気を取得して、着ていくべき服を教えてくれるアプリを作成した。（いずれはIoTデバイスにして常に表示させておきたい）

# 要件

ユーザーに教えてほしい情報は以下
- 今日の気温
- 今日の天気
- 今日着るべき服

# 構成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581044/04733946-62f0-1a13-b1ea-02dc5494fcc4.png)

Backendでは「OpenWether」というAPIで気温・天気情報を取得。気温を元にその日に着る服を算出する。Node.jsを使用。

FrontendではBackendから気温・天気・着るべき服の情報を受け取って表示する。Reactを使用。


# 実装
## Backend
OpenWetherAPIを使用して天気情報を取得して、気温・天気・服装をFrontendに返却する実装の部分は以下。

```js:controller.js
const getfashion = async (req, res) => {
    try
    {
         // OpenWether呼び出し
        await fetch(process.env.Weather_Heroku_URL || process.env.Weather_URL)
        .then(response => response.json())
        .then((data) => {
            
            temp = data.list[0].main.temp;
            weather = data.list[0].weather[0].main;

            // 気温から服装を割り出し
            fashion = fashioncheck(temp)

            fashioninfo = {
                "temp":temp,
                "weather":weather,
                "fashion":fashion
            }

            return res.status(200).json(fashioninfo);
        });

    }catch(err)
    {
        return res.status(500).json(err)
    }
}

function fashioncheck(temp){

    if(temp >= 30)      return "半袖シャツ";
    else if(temp >= 25) return "半袖・七分袖シャツ";
    else if(temp >= 20) return "長袖・七分袖シャツ";
    else if(temp >= 15) return "カーディガン・長袖シャツ・スウェット";
    else if(temp >= 12) return "セーター";
    else if(temp >= 8)  return "トレンチコート";
    else if(temp >= 5)  return "冬物コート";
    else                return "ダウンコート";
}
```

OpenWetherの使い方は以下を参考にした。

https://dev.classmethod.jp/articles/openweather_-pyowm/

気温ごとの着る服は以下を参考にした。

https://www.descente.co.jp/media/wear/14186/

## frontend
Backendから来たデータをそのまま表示しただけ。

```js:App.js
function App() {
  const [message, setMessage] = useState({});
  useEffect(()=>{
    const fetchGets = async () =>{
      const response = await axios.get('/api/fashion')
      setMessage(response.data);
    }
    fetchGets();
  },[]) 
  console.log(message.date);

  return (
    <div className="App">
    <h1>今日の気温と天気と服装</h1>
    <h1>{message.temp}</h1>
    <h1>{message.weather}</h1>
    <h1>{message.fashion}</h1>
  </div>  
  );
}
```

# 成果物
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581044/a1ada5a4-d63f-1270-4cca-7e94cea938d9.png)

UI頑張りたい。。
Rubyで参照渡しができなくても悲観する必要はなかった

## 環境
Ruby2.6



## はじめに
自分が以前使っていたVBでは、関数での引数の受け渡しには、デフォルトではByValが指定されており、値渡しが基本であった。しかし、引数のパラメータに、ByRefを設定することで、参照渡しができるようになっていた。しかし、Rubyではどうも、参照渡しがそもそもできない仕様になっている。「うーん、これができないのか、使えんなー。」という印象であったが、Rubyには参照渡しができない代わりに、戻り値が複数選択できるようになっていた。思い直した。「なるほど、これはいいかも知れない。」このような仕様になっているのであれば、引数による参照渡しは確かに不要であった。戻り値を複数選択した場合、どのような動きになるのか、確認してみた。

## 動作確認
普通に、戻り値を１つだけ指定する場合です。戻り値でよく使われる、Boolean型を戻り値にしています。メソッド内の処理が正常終了したか、異常終了したか（更新処理で失敗して例外に飛んだなど）を判断するときによく使われるかと思います。
```test.rb
def test_return?(a)
    if a > 1
        return true
    else
        return false
    end
end

puts test_return?(1) ? "OK" : "NG"          # => NG
puts test_return?(2) ? "OK" : "NG"          # => OK
```

次のように、戻り値を複数指定することができます。第一戻り値はBoolean型で返し、第二戻り値は変数で返すといったことができます。つまり、これで参照渡しが実現できています。VBを使っていれば、参照渡しはメソッドの引数を使ってやり取りをするものだと思っていたのですが、固定概念が外れました。
```test.rb
def test_return(a)
    return true, a + 1
end

x, y = test_return(1)
puts "#{x} #{y}"            # => true 2
```

戻り値にはさまざまな型を渡すことができます。
```test.rb
def test_return(a)
    return true, a + 1, a.to_s, a.to_s.to_sym, a.to_s.split
end

a, b, c, d, e = test_return(1)
puts "#{a} #{b} #{c} #{d} #{e}"            # => true 2 1 1 ["1"]
```

戻り値が１つしかないのに、受け取りの変数を複数した場合は、戻り値がない変数にはnilがセットされます。
```test.rb
def test_return(a)
    return a
end

a, b, c = test_return(1)
puts "#{a} #{b} #{c} "            # => 1
puts b.nil? && c.nil?             # true
```

戻り値が複数あるが、受け取る変数が１つしかない場合は、配列で戻ります。
```test.rb
def test_return(a)
    return a, a+1, a+2
end

a = test_return(1)
puts "#{a}"                             # => [1,2,3]
puts "#{a[0]} #{a[1]} #{a[2]}"          # => 1 2 3
```

配列で戻るのであれば、戻り値を配列で渡してやっても、結果的には同じになります。
```test.rb
def test_return(a)
    ary = []
    ary << a << a+1 << a+2
    return ary
end

a = test_return(1)
puts "#{a}"                             # => [1,2,3]
puts "#{a[0]} #{a[1]} #{a[2]}"          # => 1 2 3
```
paiza.ioでelixir その44

# 概要
paiza.ioでelixirやってみた。
文字を数値化してみた。

# サンプルコード

```

str = "999"
result =
	case Integer.parse(str) do
	{n, _} when is_integer(n) -> 
	    n
	:error -> 
	    0
	end
|> IO.puts



```

# 実行結果

```
999
```

# 成果物

https://paiza.io/projects/TZbDjFX0GQHynvQd4hgQ4Q?language=elixir


以上。
paiza.ioでelixir その43

# 概要
paiza.ioでelixirやってみた。
変数のスコープ調べてみた。

# サンプルコード

```
defmodule Main do
	stack = [] 
	stack = stack ++ [5]
	Enum.map(String.split("9 9 - 9 9 / .", " "), fn s ->
		#IO.puts s
		stack = stack ++ [6]
		IO.inspect stack
	end)
	stack = stack ++ [2]
	IO.inspect stack
end

IO.puts ""

defmodule Main do
	stack = [] 
	stack = stack ++ [5]
	s = String.split("9 9 - 9 9 / .", " ")
	n = length(s) - 1
	#IO.puts n
	#IO.inspect s
	for i <- 0..n do 
		#IO.puts Enum.at(s, i)
		stack = stack ++ [6]
		IO.inspect stack
	end
	stack = stack ++ [2]
	IO.inspect stack
end




```

# 実行結果

```
[5, 6]
[5, 6]
[5, 6]
[5, 6]
[5, 6]
[5, 6]
[5, 6]
[5, 2]

[5, 6]
[5, 6]
[5, 6]
[5, 6]
[5, 6]
[5, 6]
[5, 6]
[5, 2]
```

# 成果物

https://paiza.io/projects/06oQrDKZCy3sye23A47eNQ

以上。
Ansible Molecule の入ったコンテナイメージとして、quay.io/ansible/creator-ee が使用可能

備忘
Ansible Molecule の入ったコンテナイメージとして 
- quay.io/ansible/molecule
- quay.io/ansible/toolset

などを使用していたが、無くなってしまったので代替を探した。

# 結論: quay.io/ansible/creator-ee が Ansible Molecule を含む

quay.io/ansible/の下を探したところ、creator-ee (Ansible Creator Execution Environment) が Ansible Molecule などを含んでいた。

```
$ podman run -it --rm quay.io/ansible/creator-ee:v0.10.4
...
bash-5.2# grep PRETTY_NAME /etc/os-release 
PRETTY_NAME="Fedora Linux 36 (Container Image)"

bash-5.2# molecule --version
molecule 4.0.3 using python 3.10 
    ansible:2.14.0rc2
    delegated:4.0.3 from molecule
    podman:2.0.3 from molecule_podman requiring collections: containers.podman>=1.7.0 ansible.posix>=1.3.0

bash-5.2# ansible-lint --version
ansible-lint 6.8.6 using ansible 2.14.0rc2

bash-5.2# ansible --version
ansible [core 2.14.0rc2]
  config file = None
  configured module search path = ['/home/runner/.ansible/plugins/modules', '/usr/share/ansible/plugins/modules']
  ansible python module location = /usr/local/lib/python3.10/site-packages/ansible
  ansible collection location = /home/runner/.ansible/collections:/usr/share/ansible/collections
  executable location = /usr/local/bin/ansible
  python version = 3.10.7 (main, Sep  7 2022, 00:00:00) [GCC 12.2.1 20220819 (Red Hat 12.2.1-1)] (/usr/bin/python3)
  jinja version = 3.1.2
  libyaml = True

bash-5.2# rpm -q git
git-2.37.3-1.fc36.x86_64

bash-5.2# rpm -q openssh
openssh-8.8p1-1.fc36.1.x86_64
```

## 参考

### github上のREADME

https://github.com/ansible/creator-ee#readme

> **Ansible Creator Execution Environment**
> ...
> It includes:
> - ansible-core
> - ansible-lint
> - molecule
> ...

https://github.com/ansible/creator-ee/releases
をみると投稿時点では更新が多いので注意。


### Moleculeドキュメントにおける、Jenkinsからcreator-eeコンテナ上のmoleculeを使用する例

https://molecule.readthedocs.io/en/latest/ci.html#jenkins-pipeline

> The following Jenkinsfile uses the Ansible Creator Execution Environment image.
> ```
> pipeline {
>   agent {
>     docker {
>       image 'quay.io/ansible/creator-ee'
>       args '-v /var/run/docker.sock:/var/run/docker.sock'
>     }
>   }
> ...
> ```
ラストのまほう　第4話『画像の描画』

ドット絵が描けましたので、いよいよそのドット絵をWASM-4で描画してみましょう。画像を出さないことにはゲーム開発が始まった感じがしません。

# WASM-4で画像を読み込む

WASM-4はWASMの１モジュールにゲームのすべてを収めなければならず、ファイルシステムにアクセスすることはできません。外部ファイルの画像を読み込むようなことはできませんから、画像をコードに変換してゲームに組み込みます。

WASM-4にはそのためのコマンドラインツール `w4 png2src`が備わっており、PNG画像を各種のプログラミング言語のソースコードへと変換することができます。Rustの場合は `--rust`オプションを付けて次のように実行します。

```bash
$ w4 png2src --rust player.png
```

こうすると、次のようなソースコードが標準出力に吐き出されます。

```rust
// player
const PLAYER_WIDTH: u32 = 8;
const PLAYER_HEIGHT: u32 = 16;
const PLAYER_FLAGS: u32 = BLIT_2BPP;
const PLAYER: [u8; 32] = [ 0x00,0x00, ... ,0x04,0x10 ];
```

ここでは、`PLAYER`という32バイトの配列に画像データが入っているわけです。1ピクセルが2ビットで、この画像の大きさは8x16ピクセルなので、`2bit * 8 * 16 = 156bit = 32bytes`というわけです。これをコピペして適当なソースファイルに貼り付ければいいわけです。

# テンプレートファイルを使う

画像はたくさんあるので、私は画像ごとに個別のクレートにわけるようにしています。しかし、上記の素のコマンドで生成されるコードでは単なる`const`の変数に値が入っているので、クレートの外部からこのデータにアクセスできません。そんなわけで`pub const`にしたいです。また、画像の幅や高さ、ピクセルデータがバラバラだと`use`が面倒なので、画像の幅や高さの情報もまとめた画像を表すデータ型 `Image`として取り扱いたいです。そんなときは、テンプレートファイルで生成する内容をカスタマイズできます。テンプレートファイルはmustacheです。私は次のように書きました。

```mustache
{{#sprites}}
// {{name}}
use crate::wasm4::*;
use crate::image::Image;

const {{rustName}}_WIDTH: u32 = {{width}};
const {{rustName}}_HEIGHT: u32 = {{height}};
const {{rustName}}_FLAGS: u32 = {{flagsHumanReadable}};
const {{rustName}}: [u8; {{length}}] = [ {{bytes}} ];

pub const {{rustName}}_IMAGE: Image = Image {
    width: {{rustName}}_WIDTH,
    height: {{rustName}}_HEIGHT,
    flags: {{rustName}}_FLAGS,
    data: &{{rustName}},
};
{{/sprites}}
```

# シェルスクリプトでなるべく自動化する

また、実際のゲーム開発では一度描いたドット絵を修正することはよくあります。そのたびに毎回コピーアンドペーストするのは面倒なので、コマンド一発ですべての画像に対して`w4 png2src`を実行するシェルスクリプトで自動化することにしました。こんな感じです。

```bash
#!/bin/bash
for filename in ./image/*.png; do
    base=$(basename "$filename")
    name=${base%.*}
    out="./src/image/${name}.rs"
    w4 png2src --rust "$filename" --template template.mustache > "$out"
done
```

これで、画像を変更したり追加しても、シェルスクリプト一発でクレート化できます。

# 画像を描画する

あとはこの画像データを`blit`関数で描画するだけです。私の場合は、先述の `Image`構造体に `draw`メソッドを生やして、そこで描画するようにしました。

```rust 
impl Image {
    pub fn draw(&self, x: i32, y: i32, flags: u32) {
        wasm4::blit(self.data, x, y, self.width, self.height, self.flags | flags);
    }
}
```

ちなみに、気をつけないといけないのは、描画色はまた別で指定しなければならないことです。画像の各ピクセルは`0`〜`3`のインデックスを持っていますが、これがそのままバッファに書き込まれるわけではありません。`DRAW_COLORS`ポインタの先にには、この`0`から`3`のインデックスの値が、カラーパレットのどの値として描き込まれるかの対応関係が入っています。この描画色の設定をしておかないと、意図したとおりに描画されません。次のような関数を用意しておくと便利です。

```rust
pub fn set_draw_color(idx: u16) {
    unsafe { *wasm4::DRAW_COLORS = idx }
}
```

画像を描画するときは、次のように`set_draw_color`を呼び出してから描画を行います。

```rust
set_draw_color(0x3210);
image.draw(x, y, 0);
```

ここでは、

- 画像のインデックス`0`は`0`(透明色)、
- 画像のインデックス`1`はカラーパレットの`1`
- 画像のインデックス`2`はカラーパレットの`2`
- 画像のインデックス`3`はカラーパレットの`3`

となるように指定していて、つまり画像のインデックス`0`のピクセルは透明色なので実際には描画されません。画像のピクセルは`0`〜`3`の４つの値を取りますが、描画色は`0`(透明色)とカラーパレットの`1`〜`4`までで合計５つの値をとるので、その対応関係をコード上で指定しなければならないわけです。ちょっと面倒ですね……。


# 次回予告

このあたりでざっとWASM-4のAPI全体を眺めてみます。とはいっても関数12個しかないので簡単です。

https://qiita.com/hiruberuto/items/b301488867be13caa8fc
kasumiで辞書登録に失敗する時の対応

# 現象
登録画面を立ち上げて
```
$ kasumi -a
```
単語登録するも
![test.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1857499/a476199f-3559-4cd6-e92c-3c73144f0b96.png)
編集画面に
```
$ kasumi -m
```
単語が出てこない。
![edit.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1857499/901070cb-2ef3-e45b-d5c9-6376faeeb6e0.png)
当然、変換候補にも出てこない。

# 解決策
そもそも単語登録するファイルが無いようなので無理やり作ってあげると
```
$ touch ~/.anthy/private_words_default
```
登録できました。
![after.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1857499/39d072ed-012c-7ea8-1a7f-6be69c54efc6.png)

# 参考サイト
[kasumi で単語辞書登録](https://kobapan.hatenadiary.org/entry/20100207/1265495835)
ラストのまほう　第３話『ドット絵を描く』

テトリスのような抽象的ゲームならともかく、大抵はゲーム画面に何らかの画像を出したいでしょう。画像表示はゲーム開発の序盤でまず試したくなると思います。

# ドット絵を描く

筆者はドット絵を描くのに Aspliteを使っています。私はSteamで2000円くらいで買いました（宣伝）。

https://store.steampowered.com/app/431730/Aseprite/?l=japanese

GIMPのような通常のペイントツールでもいいとは思うのですが、インデックスカラーのPNGというやや特殊な形式で描くことになるので、専用のツールのほうが使いやすいです。あと**AsepriteはUIもドット絵っぽくなっているのが可愛い**です。

インデックスカラーモードで画像を作成するので、画像を作成するときの New Sprite ダイアログでColor ModeにIndexedを選んでください。BackgroundはTransparentでいいでしょう。


# カラーパレットの設定

それから、最初にデフォルトのパレットを自分のゲームのカラーパレットに合わせておくとイメージを掴みやすいと思います。ただし色数は**４色まで**です。キャラクターのドット絵だと１色は透明色として使いたくなるはずなので、**使える色は実質３色**です。厳しい……。

ですがここでグラフィックスに凝りだすとゲームを完成できませんので、いいから先に進むんだ！と自分に言い聞かせます。 パレットの`||`マークをドラッグするとパレットの色数を変えられますので、間違えて5色以上使わないように4色に減らしておくといいと思います。

Asepriteでは、カラーインデックスの最初の色はデフォルトで透明色になっています。キャラクターなどでは背景部分にこの透明色を使いますが、もし透明色を使わず4色すべてを使ってドット絵を描きたい場合は、この透明色が邪魔になります。その場合は、Asepriteのメニューの「Sprite」→「Properties」を開いて Sprite Propertiesダイアログを開くと Transparent Colorの設定項目があり、それを5以上に設定することで4色全部を使うことができます。

# キャンバスのサイズ

キャンバスのサイズは 8 ピクセルを単位として、小さめのオブジェクトは 8x8ピクセル、縦長のキャラクターなどは 8x16ピクセル、大型の看板なんかの物体は16/16ピクセルで描くことにします。あとは思うままにドットを打つだけです。マウスでも描けますが、ペンタブレットがあるとかなり楽です。筆者はWacomのIntuos 5を使ってます。10年くらい前に発売された機種ですがバリバリ現役です。

![ase.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64695/c96273de-c29e-af91-707d-85592131b3ad.png)

私はイラストは専門外なので解説などは割愛します。でも絵を描くのは楽しいので好きです。絵ができたら、メニューから "Export" を選んでPNG画像として出力します。

# アニメーションを描く

Asepriteはアニメーションも描くことができます。今回のような単純なゲームであれば、「右足を出す」「棒立ち」「左足を出す」「棒立ち」の4枚を繰り返すと、最低限走っているように見えるアニメーションになります。この辺はもうセンスと直感と気合です。

![anim.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64695/3bf1def8-def0-5e01-d735-d8c306b234eb.png)

本当は、足を前に出しているときは立ち姿よりも姿勢を低めにするとそれっぽく見えるのですが、何しろ**サイズが8x16ピクセルしかない**のでなかなか調整が難しいです。下手に頭を下げると、ガクガクと頭を揺らしている感じになってしまって余計に不自然です。まあこの辺にこだわると本当にゲーム開発が先に進まないので、ほどほどのところで作業を切り上げたいと思います。

# png2srcコマンド

WASM-4はWASMモジュール単独で動作しなければならず、外部のファイルをリソースとして読み込むようなことは一切できません。つまり画像はプログラムの一部としてコード中に埋め込まなければならないのです。

WASM-4には画像をコードに変換する`w4 png2src`コマンドが用意されています。`--rust`で出力先のコードをRustに設定し、リダイレクトで適当なところに出力させます。

```
$ w4 png2src --rust player.png > out/player.rs
```

これを実行すると、次のようなソースコードが得られます。

```rust
// player
const PLAYER_WIDTH: u32 = 8;
const PLAYER_HEIGHT: u32 = 16;
const PLAYER_FLAGS: u32 = 1; // BLIT_2BPP
const PLAYER: [u8; 32] = [ 0x00,0x00,0x00,0x00,0x01,0x45,0x05,0x15,0x05,0x14,0x04,0x10,0x05,0x50,0x15,0x54,0x17,0x74,0x16,0x64,0x15,0x54,0x3f,0xfc,0x3f,0xfc,0x1f,0xf4,0x05,0x50,0x04,0x10 ];
```

# 次回予告

次回は、`png2src`で生成したこのコードを使って、画像をゲーム画面上に表示したいと思います。

https://qiita.com/hiruberuto/items/2d8dc86bdc04ab363f62
SSHの認証をパスワードから鍵認証に変更する

## 環境
サーバー側の OS : Ubuntu 20.04 LTS
クライアント側の OS : Windows11
使用ソフト : OpenSSH
## 変更の動機
パスワード方式よりも安全そうだったので。
## 手順
### 0,サーバー機へアクセス可能かを確認する
頑張ってください。
(パスワード認証のSSHやリモートデスクトップなど)
### 1,鍵を生成する
OpenSSHが入っていることを確認して、クライアント側のPCで```ssh-keygen```を実行する。

:::note info
`ssh-keygen -t ed25519`とすることでデフォルトのものよりも破られにくい鍵を生成することができる。(推奨)
:::

実行してからパスフレーズの入力などを求められるが、必要でなければ何も入力せずにEnterを押して進む。

### 2,「公開鍵」をコピーする
きちんと鍵が生成されていることを確認(※1)して**拡張子が.pub**になっているファイルの中身(※2)をコピーする。
***
※1 : 保存先を指定せずに鍵を生成すると Windows の場合は`C:\Users\[ユーザー名]\.ssh`配下に保存される。

※2 : .pub が付かない方のファイルは秘密鍵と呼ばれるもので、絶対に流出させてはいけない。
***

### 3,「公開鍵」をサーバーに置く
公開鍵をコピーしたらサーバーに接続して
`/home/[ユーザー名]/.ssh/authorized_keys`にペーストする。
.ssh(ディレクトリ) や authorized_keys(ファイル) が存在しない場合は `mkdir` や `touch` を使って作成する。

この時、.ssh と authorized_keys の所有者、権限を変更しておく。
アクセス権限は .ssh は 700 , authorized_keys は 600 にする。
(700 は所有者のみ読み書きと実行が可能な状態 / 600 は所有者のみ読み書きが可能な状態)

↓権限の変更
`sudo chmod 700 /home/[ユーザー名]/.ssh`
`sudo chmod 600 /home/ユーザー名]/.ssh/authorized_keys`

↓所有者の変更
`sudo chown [ユーザー名] .ssh`
`sudo chown [ユーザー名] authorized_keys`

.ssh ディレクトリの権限と所有者は以下のようになれば良い
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2403016/61fbd67e-c5cf-fbdc-2b0c-6a6e189d1627.png)
authorized_keys の権限と所有者は上の画像で
`drwx------`となっている部分が
`-rw-------`であれば良い。



### 4,sshのデーモンの設定ファイルを書き換える
`/etc/ssh`配下に存在する`sshd_config`の内容を書き換える。
同じディレクトリに`ssh_config`というファイルも存在するがそちらではない。

`PubkeyAuthentication`を yes に変更
`PasswordAuthentication`を  no に変更
`PermitEmptyPasswords`を no にする
`AuthorizedKeysFile`のコメントアウトを外す (先頭の#を消す)

書き換えたら保存する。

### 5,sshdの再起動
`sudo systemctl restart sshd`で sshd を再起動する。
### 6,接続テスト
クライアント(今回はwindows11)で`ssh [ユーザー名]@[サーバーのIPアドレス]`を実行し、接続できれば成功。
(ポートをデフォルトの22から変更している場合はユーザー名の前に`-p [ポート番号]`を入れる)

出来なければ上記の手順をもう一度見直す。

# 終わりに
鍵認証方式を用いることでセキュリティを強固にでき、さらに接続時にパスワードを入力する手間を省くことができる。よほどの事情がない限り鍵認証を用いた方が良いといえる。

# 追記
Ubuntu Server 22.04 でも設定する機会があったのでメモ。

.ssh ディレクトリと authorized_keys ファイルが元から存在していた。
加えて権限も最初からディレクトリが700、ファイルが600に、所有者も設定されていたのでちょっとだけ楽だった。

終わり
WSL2のkali linuxでpingコマンドを動くようにするメモ

Microsoft Store から導入したKali Linuxはそのままだとpingが動かないですが、以下に解決方法が紹介されていました。

https://github.com/microsoft/WSL/issues/5109


これで動くようになりました。

    sudo setcap cap_net_raw+p /bin/ping
判別可能 Union型 (discriminated union)

一息にいいますと、絞り込めるようになるってことです。


```ts
interface Interface01 {
  type: "Interface01";
  Interface01: number;
}

interface Interface02 {
  type: "Interface02";
  Interface02: number;
}

type InterfaceUnion = Interface01 | Interface02;

function interfaceSearch(arg: InterfaceUnion) {
  let typeNumber: number;
  switch (arg.type) {
    case "Interface01":
      typeNumber = arg.Interface01;
      break;
    case "Interface02":
      typeNumber = arg.Interface02;
  }
  console.log("Interface01: " + typeNumber);
}

interfaceSearch({ type: "Interface01", Interface01: 10 });

```
画像投稿機能を改善する（プレビュー機能をつけよう）

完成した某フリマアプリに画像投稿機能の改善をしました。
プレビュー機能と、実際に見た時に画像のサイズがバラバラだったので、画像サイズを統一できるように設定しました。
```javascript
document.addEventListener('DOMContentLoaded', function(){

  const itemForm = document.getElementById('new_item');

  const previewList = document.getElementById('previews');
 
  if (!itemForm) return null;


  const fileField = document.querySelector('input[type="file"][name="item[image]"]');

  fileField.addEventListener('change', function(e){
   
    const alreadyPreview = document.querySelector('.preview');
    if (alreadyPreview) {
      alreadyPreview.remove();
    };
    const file = e.target.files[0];
    const blob = window.URL.createObjectURL(file);

    const previewWrapper = document.createElement('div');
    previewWrapper.setAttribute('class', 'preview');

    const previewImage = document.createElement('img');
    previewImage.setAttribute('class', 'preview-image');
    previewImage.setAttribute('src', blob);
    previewImage.classList.add('preview-size'); ←ここが画像サイズの調整です。

    previewWrapper.appendChild(previewImage);
    previewList.appendChild(previewWrapper);
  });
});
```

さらに、items/newのcssに
```css
.preview-size{
  height: 150px;
  width: auto;
}
```
を足しました。

あとは、
```ruby
<div class="items-sell-contents">
  <header class="items-sell-header">
    <%= link_to image_tag('furima-logo-color.png' , size: '185x50'), new_item_path %>

  </header>
  <div class="items-sell-main">
    <h2 class="items-sell-title">商品の情報を入力</h2>
    <%= form_with model: @item,  id: 'new_item',local: true do |f|%> ←idをつけたし


    <%= render 'shared/error_messages', model: f.object %>

    <%# 商品画像 %>
    <div class="img-upload">
          
      <div class="weight-bold-text">
        商品画像
        <span class="indispensable">必須</span>
      </div>
     
      <div class="click-upload">
        <p>
          クリックしてファイルをアップロード
        </p>
   <div id="previews"></div>　　←この一文をつけたし
        <%= f.file_field :image, id:"item-image" %>
      </div>
    </div>
    <%# /商品画像 %>
```
以上です。
めでたし。
Python 集計関数調査

## 背景
エクセルでデータを分析していたが、pythonの関数で効率化する関数がないか調査する。

##　調査結果
pandasのgroupby()やdescribe()を使用して色々できそう。
https://kino-code.com/pandas_groupby/
https://resanaplaza.com/2021/07/11/%E3%80%90python%E3%80%91pandas-%E3%81%AE%E9%9B%86%E8%A8%88%E3%82%92%E4%BD%93%E7%B3%BB%E5%8C%96%E3%81%97%E3%81%9F%E5%9B%B3%E3%81%A7%E8%A7%A3%E8%AA%ACgroupbyresample/
nuxt3のvite-svg-loaderで読み込んだsvgコンポーネントのviewBoxが消えてしまう問題

`Nuxt 3.0.0-rc.12 with Nitro 0.6.0` での情報です。

`nuxt2` → `nuxt3`のマイグレーションの中で、小物だがややハマったものの備忘。

## 先に結論

最初に結論。 `vite-svg-loader` のオプションに `svg: false` を渡す。

```nuxt.config.ts
// nuxt.config.ts (nuxt3)
import svgLoader from 'vite-svg-loader'
export default defineNuxtConfig({
  // ...
  vite: {
    plugins: [
      svgLoader({ 
+        svgo: false // ←追加
      })
    ],
    // ...
  },
})
```

## nuxt2→nuxt3での svg-loader の対応について

`nuxt-svg-loader` を使い、componentとしてsvgをloadして使っていたnuxt2プロジェクトでのマイグレーションでの話です。
`nuxt-svg-loader` がどうやら使えないようなので、`vite-svg-loader`　に置き換えて対応していた。

### nuxt2での書き方

nuxt2では、`npm i -D nuxt-svg-loader` で入れたモジュールを使って

```nuxt.config.ts
// nuxt.config.ts (nuxt2)
export default {
	// ...
  modules: [
    'nuxt-svg-loader',
  ],
	// ...
}
```

こんな感じで使っていた

```.vue
<template>
  <div>
    <User1 />
    <User2 />
  </div>
</template>

<script>
import Vue from 'vue'
import User1 from '~/static/images/user1.svg'
import User2 from '~/assets/images/user2.svg'

export default Vue.extend({
  components: {
    User1,
    User2,
  }
})
</script>
```

### nuxt3での書き方

nuxt3では `npm i -D vite-svg-loader` を使い、実現できた。

```ts
// nuxt.config.ts (nuxt3)
import svgLoader from 'vite-svg-loader'
export default defineNuxtConfig({
  // ...
  vite: {
    plugins: [svgLoader()],
    // ...
  },
})
```

こんな感じで読み込む。

```.vue
<script setup lang="ts">
import User1 from '~/public/images/user1.svg?component'
import User2 from '~/assets/images/user2.svg?component'
</script>

<template>
  <div>
    <User1 />
    <User2 />
  </div>
</template>
```

これで、読み込み自体はできたのだが、svgの右下が欠けた状態になってしまった。

![bug.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274832/4025ab7a-85c3-1166-cf25-09f48812bd2a.png)



## なぜ?

nuxt2での状態と比較してみると、どうやら svgのコードから `viewBox=""` のプロパティが消えており、この現象が起きている様子。
調べると `vite-svg-loader` の内部で `svgo`が圧縮を行っている。この圧縮で `viewBox=""` を消している。

故に、`vite-svg-loader` のオプションに `svg: false` を渡すことで解決できた。

注意点として、`vite-svg-loader` を storybookやvitest でもloadしている場合に同様の記述を `.storybook/main.js` や `vitest.config.ts` にも対応を忘れずに。
ラズパイ４ buster ROS noetic インストール

ラズパイ4へROS　noeticインストール時の備忘録

ラズパイのターミナルで下記コマンドを順に実行
詳細は下記URLを参照ください ※一部変更箇所有り

参考：https://varhowto.com/install-ros-noetic-raspberry-pi-4/

```
sudo sh -c 'echo "deb http://packages.ros.org/ros/ubuntu buster main" > /etc/apt/sources.list.d/ros-noetic.list'

sudo apt-key adv --keyserver 'hkp://keyserver.ubuntu.com:80' --recv-key C1CF6E31E6BADE8868B172B4F42ED6FBAB17C654

sudo apt update

sudo apt install -y python-rosdep python-rosinstall-generator python-wstool python-rosinstall build-essential cmake

sudo rosdep init

rosdep update

mkdir ~/ros_catkin_ws

cd ~/ros_catkin_ws

#下記コマンドを一部修正済み
rosinstall_generator desktop --rosdistro noetic --deps --wet-only --tar > noetic-desktop-wet.rosinstall

wstool init src noetic-desktop-wet.rosinstall

rosdep install --from-paths ./src --ignore-packages-from-source --rosdistro noetic -y

sudo src/catkin/bin/catkin_make_isolated --install -DCMAKE_BUILD_TYPE=Release --install-space /opt/ros/noetic -j1 -DPYTHON_EXECUTABLE=/usr/bin/python3

echo "source /opt/ros/noetic/setup.bash" >> ~/.bashrc

source ~/.bashrc
```

インストールが成功したか確認

```
roscore
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1040271/f73f7b02-9aed-7941-464d-7d3e39ba14bc.png)

インストール完了までかなり時間かかります。
時間に余裕のあるときに試してください
Excelのカウント関数をPythonで実現するには（初心者向け）

# Excelのカウント関数をPythonで実現するには（初心者向け）　
Excelで使うカウント関数は非常に高機能で、初心者の人でもわかりやすく使えるのがポイントです。しかし、大人気言語PythonではExcelのカウント関数のように簡潔に書くことはできません。これを実現するために、どうするべきなのか。簡単に紹介します。　

## 扱う状況　
pythonのリスト型の変数「customers_list」にデータとして顧客の年齢が[25,40,30,19,32,16,17]として代入されている。
この時、15歳以上、25歳以下の顧客の人数を求めたい。
>注意：エクセルの方法は書きません

## 使う方法や関数
### 1.sum関数
>**Pythonに標準搭載されている関数。引数に渡したリスト内の総和を求める**
**リスト内のデータ型がbool型のみだったときは、Trueの数をカウントしてくれる**　

利用例1
~~~python
test_list = [1,2,3,4,5,6]
sum_result = sum(test_list)
print(sum_result)
~~~ 
結果
~~~python
>>21
~~~
利用例2
~~~python
test_list = [True,False,False,True,True]
sum_result = sum(test_list)
print(sum_result)
~~~ 
結果
~~~python
>>3
~~~
### 2.リスト内包表記　
>**簡潔にいうと「さまざまな要素を持つリストを一行で生成しちゃおう」というもの**　

**例えば[A,B,C,・・・,X,Y,Z]というアルファベットの大文字がAーZまで全て入っているリストを作る時、全ての要素を列挙して定義すると以下のようになります。**
~~~python
alphabets_list=[A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z]
~~~
**しかし、先ほどのリスト内包表記を用いると、**　
~~~python
alphabet_list=[ chr(i) for i in range(65,91)]
~~~
**というふうに記述することができます。pythonのコードを書く上でリスト内包表記は処理も早く、コード量を大幅に減らすことができる場合もあるので、非常に有効な手段でしょう。**
### 3.比較演算子
>**比較演算を行ったときに、比較対象が真であったときにTrueを返し、偽出会った時はFalseを返す、bool型の値を生成する演算子のことを言います**　
**百聞は一見にしかずなので、実際の実行例を見てみましょう。**　
~~~python
a = 30

cul_result = 60 > a

print(cul_result)
~~~ 
**この実行結果はこうなります。**　
~~~python
>>True
~~~
**30は60よりも当然大きいので、結果は真となり、Trueを返します。**　

## それでは実際に作っってみよう。　
色々話す前に、実際のコードを書いていきます。　
~~~python

#顧客の年齢を格納したリスト型の変数を初期化
customers_list=[25,40,30,19,32,16,17]

# 年齢が15歳以上25歳以下ならTrueを返し、それ以外ならFalseを格納したリストを
# リスト内包表記で作成し、それをsum関数でTrueの数を数える。
age_between_15_and_25=sum( [ 15 <= i <= 25 for i in customers_list ] )

# sum関数の結果を表示する。
print(age_between_15_and_25)
~~~
実行すると、しっかりと以下のような結果が出ると思います。　
~~~python
>>4
~~~

基本的なコードの組み合わせなので、解説は省きますが、これで実装することができます。　
もし、必要となる場面があれば、ぜひ使ってみてください。　

最後までお読みいただきありがとうございました。

### 追記（2022年10月1日22:39）
WalfMoon様より、このようなご指摘をいただきました。
>**実際の実行コードにおいて、こちらのほうでもよいのではないか**
~~~python

#顧客の年齢を格納したリスト型の変数を初期化
customers_list=[25,40,30,19,32,16,17]

# 年齢が15歳以上25歳以下なら、新しいリストの要素として追加する。
# それをリスト内包表記で作成し、それをlen関数で要素数を数える。
age_between_15_and_25=len( [ i for i in customers_list if 15 <= i <= 25] )

print(age_between_15_and_25)

~~~
こちらのコードのほうがより直感的でわかりやすい方もいらっしゃるかもしれないので、記事の中に直接記載させていただきます。思慮深いご指摘をくださった、WolfMoon様、ありがとうございました。
***（実際にいただいたコードから、少し編集して、先述した内容に合致するように変更しております。）***
【Linux】ジョブについて

# ジョブって何？
`ジョブ`とは、シェル上で実行したコマンドやプログラム等の処理の単位の事を指します。
例えば、lsコマンドを実行した場合に1ジョブが生成されます。`ll / | grep "tmp"`とターミナル上で実行した場合にプロセスは2つ生成されますが、ジョブは1つ生成されます。(コマンド毎にプロセスが生成されている。)
基本的には、ターミナル上で入力した一行のコマンド等が1つのジョブとなります。

また、シェル単位でジョブ番号は管理されております。

# ジョブの確認
`jobs`コマンドを使用する事で、ジョブの一覧(実行/停止等)を表示する事が出来ます。
ジョブを稼働させていない場合は、特に何も表示されません。

```shell_session:ジョブ使用無
[root@localhost ~]# jobs
[root@localhost ~]#
```

ジョブの状態を確認したいので、sleepコマンドを実行後に`Ctrl + z`で一時停止させます。
再度`jobs`コマンドを実行すると、`停止`となっているジョブが表示されました。
先頭に記載されている`[1]や[2]`は、ジョブ番号となっております。また、その横の`+`は現在のジョブはカレントジョブを表しており、`-`の場合はその前のジョブを表しています。

```shell_session:ジョブを一時停止
[root@localhost ~]# sleep 100
^Z
[1]+  停止                  sleep 100
[root@localhost ~]# jobs
[1]+  停止                  sleep 100


[root@localhost ~]# sleep 1000
^Z
[2]+  停止                  sleep 1000
[root@localhost ~]# jobs
[1]-  停止                  sleep 100
[2]+  停止                  sleep 1000
```

# フォアグラウンドとバックグラウンド
ジョブには、`フォアグラウンド`と`バックグラウンド`があります。
`フォアグラウンド`はユーザの操作対象となっているジョブです。`バックグラウンド`はユーザの操作対象ではないが、処理は継続しているジョブとなります。

コンソール上でコマンドを実行すると、フォアグラウンドで処理されます。
ジョブが終了するまで、他のコマンドは動作出来ません。
処理を継続しつつ、他の作業を行いたい場合等にバックグラウンドでジョブを動作させます。

先程、一時停止したsleepコマンドをフォアグラウンドで動作させます。
ジョブをフォアグラウンドで実行する場合は、`fg`コマンドを使用します。
構文は`fg %[ジョブ番号]`となります。なお、ジョブ番号を省略した場合はカレントジョブがフォアグラウンドになります。

```shell_session:フォアグラウンドに切り替え
[root@localhost ~]# jobs
[1]-  停止                  sleep 100
[2]+  停止                  sleep 1000
[root@localhost ~]# fg %1
sleep 100
```

お次は、バックグラウンドでジョブを動作させます。
ジョブをバックグラウンドで実行する場合は、`bg`コマンドを使用します。
構文は`bg %[ジョブ番号]`となります。なお、ジョブ番号を省略した場合はカレントジョブがバックグラウンドになります。

`sleep 10;echo "10秒経過" >> test.txt"`と記載したスクリプトを作成し、バックグラウンドで動作させます。

```shell_session:バックグラウンドに切り替え
[root@localhost ~]# bash test.sh
^Z
[1]+  停止                  bash test.sh
[root@localhost ~]# jobs
[1]+  停止                  bash test.sh
[root@localhost ~]# bg
[1]+ bash test.sh &
[root@localhost ~]#
[1]+  終了                  bash test.sh
[root@localhost ~]# cat test.txt
10秒経過
```

短い時間で処理が終わる場合は、余り恩恵はないように感じますが、、
長い時間の処理の場合は、他の作業も並行して行える点は便利です。

また、コマンドの末尾に`&`とつけて実行すると、最初からバックグラウンドでジョブを実行できます。

```shell_session:バックグラウンドでジョブ実行
[root@localhost ~]# bash test.sh &
[1] 9407
[root@localhost ~]# jobs
[1]+  実行中               bash test.sh &
```

## 終わりに
バックグラウンドでジョブ実行する事は結構あるので、覚えておいた方が良いです。
私は、`fg`コマンドや`bg`コマンドはあまり使う機会はないです。
JQueryを使ってかわいい顔文字くんを作ってみた

## はじめに
今回は趣味でJsとJQueryを使って動く顔文字くんを作ったので皆さんも暇な時に作ってみて下さい。
環境構築いらないし解説たくさん書いたので初心者の方は是非🥺


### 準備
・適当にディレクトリ(フォルダ)を作ります。
Macなら
```
$ mkdir フォルダ名
```
そしたらそのフォルダをVSCodeで開いて下さい
次に開いたディレクトリの中に下記の３つのファイルを作ります。
（ファイル名はなんでも構いません、もし違う名前にした際は、適宜置き換えて読んでいって下さい）
index(ファイル名).html
style(ファイル名).css
App(ファイル名).js



### 各ファイルの説明

```index(ファイル名).html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JQuery_Sample</title>
　　　　<!--外部からJQueryを読み込む-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <!--CSSを読み込む-->
  <link rel="stylesheet" href="style.css">
  <!--jsファイルを読み込む-->
  <script src="App.js"></script>
</head>

<body>
  <div>
    <p>
      <button id="start-button">スタート！！</button>
    </p>
    <div id="emoji">ヽ( ￣∇￣)ノ</div>
  </div>
</body>

</html>
```


```style(ファイル名).css
#start-button {
  margin: 10px;
}

#emoji {
  text-align: left;
  margin: 10px;
}

```

```App(ファイル名).js
// $(function () {})ここでHTMLが全部読み込まれた後に下記の処理をするようにしている
$(function () {
  // id = 'start-button'を押した時の処理を記述
  $('#start-button').on('click',
    function () {
      if ($('#start-button').text() === "スタート！！") {
        // id = buttonの要素に'disabled', trueを追加する（ここでボタンの制御）
        $('#start-button').prop('disabled', true);
        // id = emojiの要素にε=ヽ(*￣∇￣)ノ文字列を追加している
        $('#emoji').text('ε=ヽ(*￣∇￣)ノ');
        // countに０を代入
        var count = 0;
        // setTimeoutでfunctionを“0.5秒後”に実行
        setTimeout(function progress() {
          // countに１づつたす
          count++;
          // もし、countの値が10以下なら
          if (count <= 10) {
            // ここでid = emojiの要素に文字列ε=を先頭に追加して行っている
            $('#emoji').prepend('ε=');
            // progress関数を実行する
            setTimeout(progress, 500);
          }
        }, 500);
        setTimeout(function () {
          $('#start-button').prop('disabled', false);
          $('#start-button').text('位置について');
        }, 5500);//5500は500を10回処理した後に表示したいから
      }
      else {
        $('#start-button').text('スタート！！');
        $('#emoji').text('ヽ( ￣∇￣)ノ');
      }

    }
  )

})


```
これで完成です。
あとはブラウザで今回作ったindex.htmlファイルを開くだけです。
簡単でしょう！


参考:http://alphasis.info/2012/01/jquery-gyakubiki-emozi-run
今回のソースコード：https://github.com/junichmiyahara/emoji_js

## 最後に
上手く説明できなかったところもあるかもしれませんが、少しでもお役になったら幸いです。
また何かわからないことや間違っていたことなどありましたら、コメントいただけたらと思います。
チェックボックスタグ機能の補足と、ページネーションを付けた場合のエラー解決

# はじめに
この記事はチェックボックスタグ機能を付けている前提で進めています。まだつけていない方は以下の記事を参考に、実装してみて下さい。
[【タグ機能完全版】 ~ Rails](https://qiita.com/MandoNarin/items/5a5610a40c66f77d6c10)

目次
１．補足(一覧ページに投稿したタグを表示する方法)
２．ページネーションを付けている場合のエラー解決

それでは、始めていきましょう。

# １．補足(一覧ページに投稿したタグを表示する方法)
index.html.erb のeach文の中に以下の記述を追加してください。
```erb:index.html.erb
<% @tweets.each do |t| %>
#以下を追記
    <% t.tags.each do |tag| %>
      <%= tag.name %>
    <% end %>
#ここまで
<% end %>
```
このように追加すれば、一覧ページに投稿したタグが表示されるはずです。もし表示されない場合やエラーが出る場合はアソシエーションやコントローラーのprivateメソッドへの記述やeach文で定義されている変数を使えているかなどを確認してみて下さい。

# ２．ページネーションを付けている場合のエラー解決
ページネーションを入れていない場合は、上記の記事通り実装すればエラーなくタグ検索できると思うので、こちらは飛ばして下さい。
しかし、ページネーションを入れている場合は、記事の通り実装してタグ検索すると、以下のようなエラーが出るはずです。今回はAND検索をメインに実装しています。OR検索の例も最後に記載しております。
![タグ検索エラー1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2782795/c2ad9456-97a8-e837-8906-ec5bd4a490b9.png)

これは、ページネーション関係のエラーですね。
ページネーションを導入したということは、コントローラーに以下のような編集を加える必要があります。burgerと書かれてるところは、自分用なので皆さんが作っているプロダクト用に変えてください。
```ruby:burgers_controller.rb
def index
    if params[:tag_ids]
        @burgers = []
        params[:tag_ids].each do |key, value|
            if value == "1"
                tag_burgers = Tag.find_by(name: key).burgers
                @burgers = @burgers.empty? ? tag_burgers : @burgers & tag_burgers
            end
            #以下を追記
            @burgers = @burgers.page(params[:page]).per(3)
            #ここまで
        end
    end
end
```
今回は1つのページあたりに3つのツイートが表示されるようにしています。
このようにしてリロードすると、解決すると思いきやまた以下のような別のエラーが出てしまいました。
![タグ検索エラー2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2782795/c47564ee-6aef-9e2c-5055-882dc936406e.png)
このエラーは以下の記事を参考にすると解決できました。
[NoMethodError - undefined method `page' for #<Array:0x000xxxxxx>](https://haayaaa.hatenablog.com/entry/2019/03/11/215042)
こちらの記事の解決法に記載されている箇所を読めば、納得できると思います。したがって以下のように記述するとエラーは解決するはずです。
```ruby:burgers_controller.rb
def index
    if params[:tag_ids]
        @burgers = []
        params[:tag_ids].each do |key, value|
            if value == "1"
                tag_burgers = Tag.find_by(name: key).burgers
                @burgers = @burgers.empty? ? tag_burgers : @burgers & tag_burgers
            end
            #以下を追記
            @burgers = Kaminari.paginate_array(@burgers).page(params[:page]).per(3)
            #ここまで
        end
    end
end
```
OR検索の場合も同様の考え方で以下のように追記すれば、実装できると思います。
```ruby:burgers_controller.rb
def index
    if params[:tag_ids]
        @burgers = []
        params[:tag_ids].each do |key, value|      
            @burgers += Tag.find_by(name: key).burgers if value == "1"
        end
        @burgers.uniq!
    end
    #以下を追記
    @burgers = Kaminari.paginate_array(@burgers).page(params[:page]).per(3)
    #ここまで
end
```
実装は以上になります。お疲れ様でした。

# さいごに
最後まで読んでいただきありがとうございました。
ページネーションを付けた場合のチェックボックスタグ機能でのエラー解決に困っている方は、是非この記事を参考にしてもらえると嬉しいです。
また、間違いやその他意見など、ありましたらコメントいただけると幸いです。
Node.jsでYahooの校正支援APIを叩いてみる


TextLintなどを調べていて、Yahooの校正支援のAPIがあったので試してみました。

> https://developer.yahoo.co.jp/webapi/jlp/kousei/v2/kousei.html

## Node.jsからアクセスする

Pythonのサンプルをもとに書いてみました。

> https://developer.yahoo.co.jp/webapi/jlp/sample/sample11.html

今回Fetch APIを使ってPOSTしてます。

```js
const BASE_URL = `https://jlp.yahooapis.jp/KouseiService/V2`;
const YAHOO_APPID = `YAHOOディベロッパーの管理画面で取得したAPPID`;

const yahooKosei = async () => {
    const ENDPOINT = `${BASE_URL}/kousei`;

    try {
        const data = {
            id: '1234-1',
            jsonrpc: '2.0',
            method: 'jlp.kouseiservice.kousei',
            params: {
                q: "セキュリティー,食べれる"
            }
        };
        
        const options = {
            headers:{
                'Content-Type': 'application/json',
                'User-Agent': `Yahoo AppID: ${YAHOO_APPID}`
            },
            method: 'POST',
            body: JSON.stringify(data)
        };

        const jsonResponse = await fetch(ENDPOINT, options);
        const jsonData = await jsonResponse.json();

        return jsonData;
    } catch (error) {
        throw new Error(error);
    }
}
```

実行するとこんな感じです。

```js
{
  id: "1234-1",
  jsonrpc: "2.0",
  result: {
    suggestions: [
      {
        length: "7",
        note: "語末が-tyだが昨今のネット上の慣習に準ず",
        offset: "0",
        rule: "用字",
        suggestion: "セキュリティ",
        word: "セキュリティー"
      },
      {
        length: "4",
        note: "",
        offset: "8",
        rule: "ら抜き",
        suggestion: "食べられる",
        word: "食べれる"
      }
    ]
  }
}
```

## FetchのPOST時は文字列にする必要があるっぽい

最初`body: data`と書いていて、文字列化しないとパースエラーっぽい感じになりました。

`body: JSON.stringify(data)`でうまく動いた。