OmniAICreator/Qiita-1.07M huggingface dataset:
Flutter 〜画像の表示とScrollbar、SingleChildScrollView〜

①プロジェクト内に画像保存用フォルダを作成
→とりあえずassets/imagesとする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3743467/774e6b51-c9fb-e88f-9e5b-68723b4b452e.png)

②表示したい画像をimagesフォルダに格納する。

③pubspec.yamlを編集する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3743467/bfe8369d-d975-2100-c5da-55c8107a6743.png)

④Imageウィジェットを変数に設定し、Columnウィジェットに追加
```
import 'package:flutter/material.dart';
void main(){
  final img1 =  Image.asset(
    'assets/images/face.png'
  ,);
  final img2 =  Image.asset(
    'assets/images/body.png'
  ,);
  final a = MaterialApp(
    home: Scaffold(
      body: Column(
        children: [ 
          Center(
            child: img1,
          ),
          Center(
            child: img2,
          )
        ]
      ),
    ) 
  );
  runApp(a);
}
```

⑤画像のサイズが大きい場合、途中で切れてしまうのでスクロールバーを出す
```
import 'package:flutter/material.dart';
void main() {
  final img1 = Image.asset(
    'assets/images/face.png',
  );
  final img2 = Image.asset(
    'assets/images/body.png',
  );
  final a = MaterialApp(
    home: Scaffold(
      // Scrollbarウィジェットを追加して、スクロールバーを表示
      body: Scrollbar(
        // SingleChildScrollViewウィジェットを使用して、子ウィジェットをスクロール可能に
        child: SingleChildScrollView(
          // ここでColumnウィジェットを使用しているため、縦方向にスクロール可能
          child: Column(
            children: [
              Center(
                child: img1,
              ),
              Center(
                child: img2,
              )
            ],
          ),
        ),
      ),
    ),
  );
  runApp(a);
}

```

表示結果。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3743467/816d6996-8a25-436c-144b-a1b4f71c00f8.png)
【初学者向け】Cod歴2年目時点のHTML・CSS実装の個人的実装方針

# はじめに
コーダー歴2年目で、HTML・CSS実装について現状固まっている指針を明文化しようとしたものです。

## 記事の対象　読者の対象レベル
・HTMLが多少かけるようになった
・HTML5、セマンティックHTML手を出している、興味がある
・現場に配属された新人Cod
・監修する立場にある人（Dir）

## HTML
例
```
<body>
  <header>

  </header>

  <main>
    <!-- <h1>はメイン内に配置 -->
    <h1></h1>

    <!-- <section>を使う場合 -->
    <section>
      <h2></h2>
    </section>
    <section>
      <h2></h2>
      <section>
        <h3></h3>
      </section>
    </section>
    
    <!-- 使わない場合 -->
    <div class="sect">
      <h2></h2>
      <div class="subsect">
        <h3></h3>
      </div>
    </div>

  </main>

  <footer>

  </footer>
</body>
```
業務で実装する場合、新規作成か更新かで多少方針が変わる。
新規で作るのであれば、`<section>`タグと`<h1>`~`<h6>`タグでセクションを作る。
更新（一部新規要素の追加）の場合、そのページのHTMLの雰囲気に合わせた実装をする。
(当然だが、`<ul>`、`<ol>`、`<li>`、`<dl>`、`<dt>`、`<dd>`を必要に応じて適切に使用する。)
### ポイント
・HTML5の要素によるセマンティックな実装
・妥協

### HTML5の要素によるセマンティックな実装
・`<h1>`はメイン内に配置
チームの実装方針にもよるだろうが、基本的に`<h1>`は`<main>`内の最初のほうで、そのページの実質的なタイトルに当たる文章を指定する。
（ヘッダーのロゴに`<h1>`を指定するのは、アウトラインで考えたときに違和感がある。）

・`<section>`を使える場合は、`<section>`で区切って実装する
・`<section>`を使わない場合は、
　`<section>`に当たる`<div>`にsectionのようなニュアンスのクラスを指定する。
構造的・視覚的に理解しやすくする。

:::note warn
HTMLはHTMLだけで成立するように記述すべきであるため、`<section>`の範囲はデザイン（見た目）と乖離する場合がある。
:::

### 妥協
元の造りから乖離しないように実装する。

・いつでも改修できるわけでもない。
・結局納期に間に合わせるのが大事。
・直せと言われた場所以外を修正すると、その分確認事項が増える。

加えて、以下のような状況で、自分だけがセマンティックHTMLに改修しようとしても意味が薄い。
・厳密なコーディングルールがなく、コーダーがそれぞれの解釈で制作している。
　（製作チーム内にセマンティックHTMLが定着していない）
・クライアントがアクセシビリティやSEOに力を入れていない。
・コードをレビュー（口出し）できる、レベルの高い人間がいない。


## CSS
### 命名法則
個人的に採用している命名法則はPDFLOCSS（FLOCSSの派生型）
参考：明日から使えるCSS設計【PDFLOCSS】
https://zenn.dev/wagashi_osushi/books/94efd21a66ccaa

メリット
・SCSSで実装しやすい。（階層が深くならない）
・詳細度を気にしなくていい。（基本的にセレクタがクラスを1つ指定するだけ）
・命名基準がわかりやすい。
デメリット
・複数人で作業する場合は、共通認識が持てていないとただの難解な命名になる。
・クラス名が長くなりがちで、コードが横に長くなる。
・現場で採用されている可能性は低い。

### セレクタ
・HTMLの要素は基本的にすべてクラスをつける。
・基本的にクラス名で指定する。
・要素名で指定しない。
・スコープをしっかり意識して実装する。←何よりも大切


## 終わりに
今の案件でDirチェックがaltやデザインの確認がメインで、コーディングチェックは行わない（＝それができるほどHTMLなどを理解していない）ため、コーディング面ではコーダーの私に裁量・責任があるためです。
（というより歴の長いCodがいない）
この記事の対象にDirを含めたのは、そういう理由です。

まだ明文化できていない項目がありますが、自分の中で明確に基準ができたら別の記事で書こうと思います。
オープンソースとプロプライエタリ・ソフトウェアの共存：バランスを取る

<font color="Grey">*[The Coexistence of Open Source and Proprietary Software: Striking the Balance](https://aiven.io/blog/the-coexistence-of-open-source-and-proprietary-software)の翻訳です。*</font>

2024年3月14日

# オープンソースとプロプライエタリ・ソフトウェアの共存：バランスを取る

オープンソースとプロプライエタリ・ソフトウェアの両方の長所を引き出す技術基盤の構築方法を紹介する。

オープンソース・ソフトウェア（OSS）とプロプライエタリ・ソフトウェアの共存に関する議論は、両者が存在する限り続いてきた。自由なアクセスと利用を目的に設計されたOSSと、その対極にあるプロプライエタリ・ソフトウェアは、テクノロジーの分野ではしばしば対立するものとして位置づけられてきた。


しかし、現実はこのどちらか一方という力学からはかけ離れている。ほぼすべての企業が、意図的かどうかにかかわらず、OSSとプロプライエタリ・ソフトウェアの両方を混在させて利用している。実際、コードベースの最大98％が何らかの形でOSSを組み込んでいると[推定](https://www.synopsys.com/software-integrity/resources/analyst-reports/open-source-security-risk-analysis.html)されている。


このような技術、認識、採用の進歩にもかかわらず、多くの企業はいまだに、両方の利点を効果的に活用するインフラの構築に苦戦している。


## バランシング・アクトOSSの可能性を引き出す


OSSとプロプライエタリ・ソフトウェアのどちらを選択するかは、ビジネスの成功に直接影響するため、重要な意味を持つ。どちらの選択肢にも利点と欠点がありますが、プロプライエタリなソフトウェアをデフォルトとすることは、開発、革新、進歩を阻害する可能性があります。


企業はしばしば岐路に立たされ、プロプライエタリ・ベンダーの専門的な（しかししばしばコストのかかる）テクニカル・サポートに妥協することなく、OSSの可能性をどのように解き放てばよいのかわからなくなる。


## 緊張を乗り越える


このジレンマは、相反するアプローチから生じている。企業は差別化のためのイノベーションの重要性を理解しながらも、従来の路線から逸脱することのリスクを警戒している。


OSS開発者は、商業的採用へのゲートウェイとして機能するプロジェクトを立ち上げることで、この緊張に対応してきた。これらのプロジェクトは、膨大なユーザーベースの認知度を高め、一部のユーザーが有料顧客になることを期待している。さらに、OSSは、プロプライエタリ・ソフトウェアの制限の多い学習プロセスとは異なり、コミュニティ内でリソースを共有しているため、学習によりアクセスしやすい傾向がある。


しかし、企業はOSSをプロジェクト・レベルでしか採用せず、より広範な利用にコミットすることを躊躇することもある。このようなOSSとプロプライエタリ・ソフトウェアの間の緊張関係は、アプローチの根本的な転換がない限り続くだろう。


## オープンなガバナンスの役割


成功したOSSプロジェクトは、[Apache Software Foundation](https://www.apache.org/)に見られるように、オープンなガバナンスの下で成功することが多い。この民主的なアプローチにより、プロジェクトの開発や戦略的方向性に幅広い参加が可能になり、開発者や業界関係者を惹きつける。


[GitHubオープンソースガイド](https://opensource.guide/leadership-and-governance/)は、オープンガバナンスの良い概要を提供している。OSSの非中央集権的な性質を反映したフレームワークは、OSSの成功を強化し、企業レベルでプロプライエタリなソフトウェアと並ぶ成長に貢献することができる。


## フリーローダーへの対応


OSS企業もプロプライエタリ・ソフトウェア企業も、よりバランスの取れたエコシステムのために行動を変えなければならない。OSSは、不注意にプロプライエタリになるのを防ぐために、効果的なガバナンスモデルを確立すべきである。同様に、プロプライエタリ・ソフトウェア企業もOSSプロジェクトに貢献すべきである。この傾向は、我々の[独自調査](https://techmonitor.ai/technology/software/google-open-source-projects-microsoft-amazon-github#:~:text=Tech%20giants%20Microsoft%2C%20Google%20and,in%20the%20past%20years)によれば、徐々に勢いを増している。


Aivenでは、このバランスの重要性を認識しているため、専用のオープンソースプログラムオフィス（OSPO）を設けています。OSPOは、コードへの貢献だけでなく、ドキュメンテーション、フィードバック、コミュニティ活動を通じて、OSSコミュニティとのエンゲージメントを促進しています。


貢献せずにOSSから利益を得る「フリーローダー」の蔓延は、変革の必要性を強調している。企業は、技術者がOSSツールに貢献できるような仕組みに投資しなければならない。あるいは、OSSプロジェクトの持続可能性を保証する組織と提携することは、自社のテクノロジー・スタックを将来にわたって維持するために極めて重要である。


結論として、OSSとプロプライエタリ・ソフトウェアの共存は、企業にとって課題と機会の両方をもたらす。適切なバランスを取るには、関係者全員の考え方と行動の転換が必要だ。そうして初めて、デジタル環境におけるイノベーションと進歩の推進において、オープンソース・テクノロジーの可能性を十分に発揮することができるのだ。
DBeaverでMySQLに接続したけどデータベースが表示されない問題

# 問題
DBeaverでMySQLに接続したがデータベースが何も表示されない。

![Screenshot 2024-03-15 at 4.38.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2599663/a2bac2ac-1c98-e1e0-c27a-229ae65a6ef9.png)

# 解決方法

表示したい接続を右クリックして「Edit Connection」を選択。

![Screenshot 2024-03-15 at 4.39.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2599663/09b6c71d-9c4e-e147-e8b6-73a75a492ca0.png)

「General」タブを選択し、「Navigator view」の「Customize...」をクリック。

![Screenshot 2024-03-15 at 4.52.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2599663/b87eedc0-24e3-bf0d-073d-57f63f1cd57c.png)

「Navigator Settings」という画面が表示され、この画面で表示するものを選択することができます。

![Screenshot 2024-03-15 at 4.50.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2599663/786a90cd-dfdf-c67a-eca9-640530e847f3.png)
DBeaverでDBに接続したけど何も表示されない問題

# 新規のDB接続

まずは新規のDB接続の方法から確認します。
接続方法が分かる方はスキップしてください。


新規の接続は下記画像の矢印で示したボタンから行います。

![Screenshot 2024-03-15 at 4.04.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2599663/241c2036-9a81-a560-531f-dbe766b62f86.png)

DBの接続テストは下記矢印で示した「Test Connection」から行えます。

![Screenshot 2024-03-15 at 4.12.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2599663/8266a8aa-5f63-bfa6-d517-f664926de21c.png)


下記画像のように「Connected」となっていれば接続成功です。

![Screenshot 2024-03-15 at 4.13.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2599663/ba5ddd20-d9a3-3a07-e2c9-01698a7dcf9d.png)

最後に「Finish」ボタンから接続完了できます。

![Screenshot 2024-03-15 at 4.21.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2599663/42aec458-fce5-f8cb-3ddc-12a0c34bd254.png)

# 接続後DBの情報が表示されない場合

接続が完了しても画面に接続したデータベース情報が表示されない場合があります。
この場合はWindowタブの「Database Navigator」をクリックしてチェックを入れます。

![Screenshot 2024-03-15 at 4.05.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2599663/eba215c2-456e-08dd-6657-ebeafc8f7ea3.png)

チェックが入ると下記画像のように接続済みDBが一覧されます。

![Screenshot 2024-03-15 at 4.05.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2599663/169e49eb-131f-7780-ec58-1b44446404ce.png)
Laravel11アップデート内容①【アプリケーション構造】

Laravel11がリリースされたので、
どんな変更点があるのか[Release Notes](https://laravel.com/docs/11.x/releases)や[LaravelDaily](https://laraveldaily.com/)の情報を元にまとめてみます。

第一弾です。

## 基本情報

Laravel 11.x には、最小 PHP バージョン 8.2 が必要

## 構成のスリム化

>新しいアプリケーション構造は、Laravel 開発者がすでによく知っている概念の多くを保持しながら、より無駄がなく、より現代的なエクスペリエンスを提供することを目的としています。

というように、以下のようにフォルダ構成をスリムにしたようですね。

```
app/
├── Http/
│   └── Controllers/
│       └── Controller.php
├── Models/
│   └── User.php
└── Providers/
    └── AppServiceProvider.php
bootstrap/
├── app.php
└── providers.php
config
```

削除されたフォルダは以下

- `app/Console`
- `app/Exceptions`
- `app/Http/Middleware`


## Bootstrap Fileが重要

ここが結構変わりましたね。
`bootstrap/app.php`からアプリケーションのルーティング、ミドルウェア、サービスプロバイダー、例外処理のカスタマイズができるとのこと。
今まで色んな場所に散らばっていたコアなファイルを統合できる、っていうのが「より無駄がない」っていうところにも繋がってくるのかなと思いました。

```
return Application::configure(basePath: dirname(__DIR__))
    ->withRouting(
        web: __DIR__.'/../routes/web.php',
        commands: __DIR__.'/../routes/console.php',
        health: '/up',
    )
    ->withMiddleware(function (Middleware $middleware) {
        //
    })
    ->withExceptions(function (Exceptions $exceptions) {
        //
    })->create();
 ```

### Service Providers

今まで5ファイル存在したServiceProviderが`AppServiceProvider`のみとなり、
削除されたファイルの機能は`bootstrap/app.php`に組み込まれたようです。

ServiceProviderを作成したら、手動で`config/app.php`に追加していましたが、Laravel11では`bootstrap/app.php`に追加することになるようです。

makeコマンドで作ったら自動で追加されるのでコマンドを使ったほうがいいですね。

```
// makeコマンド例
php artisan make:provider SampleServiceProvider
```

### Routing

こちらも他と同様に`routes/channel.php`と`routes/api.php`ファイルが削除されています。
ただ、artisanコマンドを用意してくれているので作りたかったらサクッと作れます。

```
php artisan install:api
php artisan install:broadcasting
```

### Middleware

今までは9つのMiddlewareが存在していましたが、これらはフレームワーク自体に移動されているようで、
スリム化を実現できたようですね。
設定自体は今までのものを使えるようになっているとのこと。すごいや。

[src/Illuminate/Foundation/Configuration/Middleware.php](https://github.com/laravel/framework/blob/11.x/src/Illuminate/Foundation/Configuration/Middleware.php)置いておきます。

独自で作成したものは今まで`Kernel.php`に登録していましたが、こちらも`bootstrap/app.php`に登録します。

```
->withMiddleware(function (Middleware $middleware) {
    $middleware->validateCsrfTokens(
        except: ['stripe/*']
    );

    $middleware->web(append: [
        EnsureUserIsSubscribed::class,
    ])
})
```

## Controller


Laravel10は以下

```text:Laravel10
<?php

namespace App\Http\Controllers;

use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
use Illuminate\Foundation\Validation\ValidatesRequests;
use Illuminate\Routing\Controller as BaseController;

class Controller extends BaseController
{
    use AuthorizesRequests, ValidatesRequests;
}

```

Laravel11では

```text:laravel11
<?php

namespace App\Http\Controllers;

abstract class Controller
{
    //
}
```

何も継承してない、、、！！

`AuthorizesRequests`と`ValidatesRequests`がなくなったので、
`$this->authorize()`などを利用したい場合は、コントローラーに手動で`AuthorizesRequests`を追加すればいけるみたい。

結構使ってたから知れてよかった。。。



では、今回はここまでにします！
【Ren’Py】テキストファイルを開く

:::note info
2024年3月15日時点Ren'Py ver.8.6.0の初心者の覚書。
変なところやもっと効率的な部分があったら教えてください。
:::
この記事で確認できる実装内容は以下です。
1. サブプロセスを使ってテキストファイルを開く


```完成図.rpy
    import subprocess
    import os
    def open_file(path=""):
        #開くファイルの完全パスを取得する
        txt_path = os.path.join(config.gamedir,path) 
        subprocess.Popen(txt_path, shell=True)
```
参考URL:https://stackoverflow.com/questions/54681519/why-is-subprocess-module-giving-me-winerror193



詰まったところ
1. os.path.join()の第二引数のパスがUTF-8だからSHIFT-JISだかの規格の関係でエラーが出た。最終的に私の環境は「f'ディレクトリ名\\\\{path}'」でうまくいった
1. アプリケーションではなくテキストファイルを渡しているので、「shell=True」を追加しないと 「OSError: [WinError 193] %1 は有効な Win32 アプリケーションではありません。」で落ちる
WSL Ubuntuにnodenvにinstallする方法

# WSL Ubuntuにnodenvにinstallする方法

WSL Ubuntuに[nodenv](https://github.com/nodenv/nodenv)をinstallする方法

## updateとupgrade

```bash
sudo apt update && sudo apt upgrade -y
```

## nodenvのinstall

```bash
git clone https://github.com/nodenv/nodenv.git ~/.nodenv
cd ~/.nodenv && src/configure && make -C src
# 環境変数の設定
echo 'export PATH="$HOME/.nodenv/bin:$PATH"' >> ~/.bashrc
echo 'export PATH="$HOME/.nodenv/bin:$PATH"' >> ~/.bash_profile
echo 'eval "$(nodenv init -)"' >> ~/.bashrc
```

## pluginのinstall

```bash
cd ~/.nodenv
mkdir plugins
cd plugins
git clone https://github.com/nodenv/node-build.git
# SHELLを再起動
exec $SHELL
```

## nodeをinstall

```bash
# nodeのinstall可能なバージョンをリスト表示
nodenv install --list
# nodeの特定のバージョンをinstall
nodenv install 18.12.1
# グローバルで有効化
nodenv global 18.12.1
# ローカルで有効化
nodenv local 18.12.1 # .node-versionにバージョン情報が書き出される
```

以上。上から順番に実行するだけ。
WSL Ubuntuにpyenvをinstallする方法

# WSL Ubuntuにpyenvをinstallする方法

WSL(Ubuntu)に[pyenv](https://github.com/pyenv/pyenv)をインストールする方法を自分用にまとめておく。

## Python build環境のinstall

`pyenv`の公式Wikiにビルド推奨環境として次のコマンドが用意されている

```bash
sudo apt update; sudo apt install build-essential libssl-dev zlib1g-dev \
libbz2-dev libreadline-dev libsqlite3-dev curl \
libncursesw5-dev xz-utils tk-dev libxml2-dev libxmlsec1-dev libffi-dev liblzma-dev
```

引用：https://github.com/pyenv/pyenv/wiki#suggested-build-environment

## pyenvのinstall

```bash
curl https://pyenv.run | bash
```

## 環境変数を設定

### bash

```bash
# 環境変数等の設定
echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.bashrc
echo 'command -v pyenv >/dev/null || export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.bashrc
echo 'eval "$(pyenv init -)"' >> ~/.bashrc
source ~/.bashrc
```

### zsh

```zsh
# 環境変数等の設定
echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.zshrc
echo 'command -v pyenv >/dev/null || export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.zshrc
echo 'eval "$(pyenv init -)"' >> ~/.zshrc
source ~/.bashrc
```

## Pythonをinstall

```bash
# バージョンのリスト表示
pyenv install --list
# 特定バージョンのinstall
pyenv install 3.11.6
# installしているバージョンのリスト表示
pyenv versions
# グローバルでバージョンを有効化
pyenv global 3.11.6
# ローカルでバージョンを有効化
pyenv local 3.11.6 # .python-versionにバージョン情報が書き出される
```

以上。上から順番に実行するだけ。
multipass 入門

最近, m2 macbook proを買いubuntuの環境をローカルに作りたい思いました。
そこで、調べているとmultipassというものに出会いました。
どうやら簡単に準備できるようなのでやってみようと思います。

#### 実行環境
- m2 MacBook Pro
- macOS Sonoma 14.4
- HomeBrew 4.2.11

※HomeBrewがinstallされていることを前提としています。

----

#### install 実行コマンド
```
% brew install --cask multipass
```
https://formulae.brew.sh/cask/multipass


#### 使用するコマンド

- 使用できるイメージの一覧を表示する
`% multipass find`

- 環境作成
`% multipass launch`

cloud-initを使用しても環境作成できます。

- そのほかのコマンド
```
// ログイン
% multipass shwll 環境名

// 一覧
% multipass list

// 起動
% multipass start 環境名

// 停止
% multipass stop 環境名

// 削除
% multipass delete 環境名
```

詳しくは、
https://github.com/canonical/multipass/


以上で簡単な紹介ですが、multipass入門でした。
とにかく動かしたい時は、HomeBrew で install した後、`multipass launch` とコマンド実行するだけでubuntuが立ち上がるので是非！
自分用Gitコマンドシート

今までsource treeを使ってGit操作をしてましたが、Gitをコマンドで扱う機会ができたので、自分用によく使うコマンドをまとめました。
オプションとかも今よく使うものを設定してます。
（取り急ぎ作ったので誤りとかは適宜修正予定。。）

#### 現在選択されてるブランチ確認（*がついてる）

```bash
git branch
```

#### ブランチ名修正

※変えたいブランチが選択されていることを前提

``` bash
git branch -m 変えたい名前
```

#### ブランチ削除

```bash
git branch -d 削除ブランチ
```

#### fetch

```bash
git fetch -p 特定のリポジトリ
```

※-p : リモートに存在しなくなったリモート追跡参照を削除する

#### pull rebase

```bash
git pull --rebase 対象リポジトリ ブランチ
```

#### コミットをまとめる

```bash
git rebase -i まとめるコミット※
```

※ex) HEAD~~（2つ分）  
※ex) ``git log --oneline``でログが見ることができるので、そこからまとめたいコミットの一つ前のコミットを指定したり

#### Push

※pushするブランチを選択状態である前提

```bash
git push -f 対象リポジトリ
```
※-f: 強制push

#### コミットの取り消し

```bash
git reset オプション※ HEAD^
```

※ --soft, ---mixed, --hard

#### チェックアウト+ブランチ作成

```bash
git checkout --no-track -b 新しいブランチ名　チェックアウト元
```

### スタッシュ

```bash
git stash -u
```
※-u:notrack（新規作成したファイルとか）のファイルもスタッシュに退避
GitとGithubのCLIでのコマンド簡単メモ（Gitレポジトリの新規作成・クローン・プッシュ・プルの基本）


前提１：Gitのインストール済み
前提２：Githubのアカウント作成済み

### ・準備（Personal access tokens(classic)をつかう方式）

①パーソナルアクセストークン
SSH接続とHTTPS接続があるが、こちらはパーソナルアクセストークンを使ったHTTPS接続でGitHubと通信する場合の準備。

GithubのGitレポジトリにHTTPSでアクセスするためにはPersonal access tokens が 必要

`ブラウザでGithubにログイン → 右上のユーザーアイコン → 開いたメニューバーの下の方にある「Settings」 → 左側のメニューバーの一番下にある「Developer Settings」 → Personal Access Token →「Tokens (classic)」→　「Generate New Token 」→　「Generate New Token (classic)」から作成できる。expire(有効期限)を決めて repo にチェック `

`表示されたパーソナルアクセストークンは再表示できないのでメモしておこう。忘れてしまった場合は削除してもう一度作り直せば大丈夫`

②Githubプロジェクトの作成
Githubにてリモートレポジトリを作成しておこう。



---
##  ・Gitレポジトリの新規作成　(新規に作成したプロジェクトのディレクトリ内でGitを設定する場合はこちら。)

```
//Gitレポジトリを新規に作成したいプロジェクトのディレクトリ内にて
$ git init       //隠しディレクトリ「.git」がプロジェクトのディレクトリ内にできる。

//「.git」が作成されていることを確認したい場合
$ ls -a　　　　　 //ls はディレクトリ内の確認 -a は隠しディレクトリを確認するオプション。
```
※「.git」はGit関連のデータの保存場所である。

※この操作はGithubのGitレポジトリにアクセスしないのでパーソナルアクセストークンは求められません。

---

## ・リモート (Github上に作成したプロジェクトとGitを接続する。クローン、プル、プッシュ前の下準備)
```
//プロジェクトのディレクトリ内にて
$  git remote add origin https://github.com/ユーザーネーム/リモートレポジトリ名.git   　　
```
---

## ・クローン (GithubのGitレポジトリにある既存のプロジェクトをコピーしてプロジェクトを作成する場合はこちら。)
```
//プロジェクトを作成したいディレクトリ内にて
$ git clone https://github.com/ユーザー名/プロジェクト名　　　//コピーされたプロジェクトのディレクトリが作成される。

//ユーザー名の入力をもとめられる
Username for 'https://github.com':

//パーソナルアクセストークンの入力を求められる（ログインパスワードじゃないよ。紛らわしい）
Password for 'https://ユーザー名@github.com':
```

※Gitレポジトリの新規作成と同様プロジェクトのディレクトリ内には「.git」ディレクトリが存在している。

---
## ・プッシュ （手元のGitレポジトリのコピーでGithubのGitレポジトリを新規作成または更新）
```
//プロジェクトのディレクトリ内にて
$ git add .　　　　　　　　　　　　　　　　　　　　　  //手元のGitレポジトリに更新したいディレクトリとファイルを選択。ここでは「.」でディレクトリ内部のすべてのディレクトリとファイルが対象。

$ git commit -m "コメント"　　　　　　　　　　　　　  //手元のGitレポジトリを更新

$ git push -u origin ブランチ名(例：main)            //手元のGitレポジトリのコピーでGithubのGitレポジトリを新規作成または更新

//ユーザー名の入力をもとめられる
Username for 'https://github.com':

//パーソナルアクセストークンの入力を求められる（ログインパスワードじゃないよ。紛らわしい）
Password for 'https://ユーザー名@github.com':

```
---
## ・プル（GithubのGitレポジトリのコピーで手元のGitレポジトリを更新）
```
//プロジェクトのディレクトリ内にて
$ git pull https://github.com/ユーザー名/プロジェクト名

//ユーザー名の入力をもとめられる
Username for 'https://github.com':

//パーソナルアクセストークンの入力を求められる（ログインパスワードじゃないよ。紛らわしい）
Password for 'https://ユーザー名@github.com':

```
Newwave Solutions Japanのサービス: エンジニア単価とブリッジSEの重要性

Newwave Solutions Japan（ニューウェーブソリューションズジャパン）は、優れたエンジニアリングサービスと専門的なブリッジSEを提供しています。エンジニアの単価とブリッジSEの役割は、弊社のサービスにおいて特に重要です。
1. エンジニア 単価
[エンジニア 単価](https://newwave-solutions.co.jp/brse-cost/)は、プロジェクトの成否に直接影響を与える重要な要素の一つです。高品質のエンジニアを雇用することは、プロジェクトの成功に不可欠ですが、そのためには高い単価が必要です。ニューウェーブソリューションズジャパンでは、優秀なエンジニアを適正な単価で提供し、クライアントのニーズに最適な解決策を提供します。
![what-is-brse-avt.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3031688/48878089-4ed6-b5b8-f66d-a01075637a1a.jpeg)

2. ブリッジSE とは
[ブリッジSEとは](https://newwave-solutions.co.jp/what-is-brse/)、エンジニアリングチームとクライアントとの間に立つ専門家のことを指します。彼らは技術的な専門知識を持ちながらも、クライアントの要求を理解し、コミュニケーションを円滑にする役割を果たします。ブリッジSEの存在は、プロジェクトの進行をスムーズにし、エンジニアリングチームとクライアントとの間のコミュニケーションを円滑にします。
ニューウェーブソリューションズジャパンのサービスでは、エンジニアの単価とブリッジSEの役割を最適に組み合わせ、クライアントのプロジェクトを成功に導きます。高品質のエンジニアを適正な単価で提供し、ブリッジSEの効果的なコミュニケーションを通じて、クライアントのニーズを的確に把握し、最適なソリューションを提供します。
ニューウェーブソリューションズジャパンは、クライアントとのパートナーシップを大切にし、エンジニアリングプロジェクトの成功に全力を注ぎます。エンジニアの単価とブリッジSEの役割を最大限に活用し、クライアントのビジネスの発展に貢献します。
PyO3依存のパッケージをGitHub Actionsでテストする

[PyO3](https://github.com/PyO3/pyo3)はRustで書いたプログラムをPythonで動かせる大変優れたものです。しかしGitHub Actionsでテストしようとしたら少し詰まったのでメモ。

# pyproject.toml

`maturin`でビルドするので、こんな感じで始まっているはずです。

```toml
[build-system]
requires = ["maturin>=0.14,<0.15"]
build-backend = "maturin"
```

その下の方に、テスト用のoptional dependenciesを加えておきます。

```toml

[project.optional-dependencies]
testing = [
    "pytest",
    # その他諸々 ...
    "maturin",  # <----- ここにも加える
]
```

これで `pip install .[testing]` をしたときにここに書かれたパッケージもインストールされます。

# test.yml

テスト用のCIはこんな感じになります。

```yaml
jobs:
  test:
    name: ${{ matrix.platform }} (${{ matrix.python-version }})
    runs-on: ${{ matrix.platform }}
    strategy:
      fail-fast: false
      matrix:
        python-version: ["3.10", "3.11", "3.12"]
        platform: [ubuntu-latest, macos-latest, windows-latest]

    steps:
      - name: Cancel Previous Runs
        uses: styfle/cancel-workflow-action@0.11.0
        with:
          access_token: ${{ github.token }}

      - uses: actions/checkout@v3
      - name: Set up Python ${{ matrix.python-version }}
        uses: actions/setup-python@v4
        with:
          python-version: ${{ matrix.python-version }}

      - name: Create virtual environment
        env:
          BIN: ${{ matrix.os == 'windows-latest' && 'Scripts' || 'bin' }}
        run: |
          python -m venv .venv
          echo "$GITHUB_WORKSPACE/.venv/$BIN" >> $GITHUB_PATH

      - name: Install dependencies
        run: python -m pip install .[testing]

      - name: Build
        run: maturin develop --release

      - name: Test
        with:
          run: python -m pytest
```

ここで重要なのが、

- `maturin`でビルドするときに仮想環境が必須なので、"Create virtual environment"で`venv`を適切な場所に作ること。
- "Install dependencies"で先ほど用意した"testing"を指定してインストールすること。
- "Build" でmaturinによるビルドを行うこと。

これで走るはずです。
Scala3だとelseのないif式は値を返さない

という挙動でバグらせたので、みなさんもご注意ください。

# Scala2.13だと

`else`を持たないif式、なかなか面白い挙動をします。

```scala
val a = if (true) "a"
```

これ、`a`は`Any`に推論されます。どういうことかというと`else ()`が省略されたような挙動になります[^1]。`String`と`Unit`の和を取って`Any`に推論される、という挙動です。`println`させると、実行時型に応じて出力されます。

```scala
val a: Any = if (true) "a"

println(a) // output: a
```

https://scastie.scala-lang.org/cNZonlgORBKr3yW1iNyugw

# Scala3だと

`else`を持たないif式は一律`Unit`として扱われます。

```scala
val a = if (true) a // Warning: A pure expression does nothing in statement position; you may be omitting necessary parentheses


println(a) // output: ()
```

https://scastie.scala-lang.org/LMcEiUGqToid9e3jhKXHUQ

警告文はかいつまんで言うと「`else ()`を忘れてんじゃないの？」と言ってます。実際、`else ()`を追加するとScala2.13のときと同じ挙動を示します。下記のような意見もあるので、else句のないif式は副作用の型すなわち`Unit`として扱われるのは一理あります。

https://x.com/gakuzzzz/status/1480197834721067010 

# 問題は

このScala2と3の挙動の差がわかりにくいことに加え、条件によってはScala3の警告が発生しないことです。その例としてXMLリテラル内のif式があります。

```scala
val a = <a>{if (true) <b/>}</a> // nothing warnings!!!

println(a) // case Scala2 => <a><b/></a>
           // case Scala3 => <a></a>
```

つまり、既存コードに似たような物があると、警告なく異なるXMLが実行時に吐き出される、ということです。地獄ですね🔥。しかし今は令和の時代、そういうif式を見つけるscalafixがあるので皆さんは安心してマイグレーションできます。やったね！

https://xuwei-k.hatenablog.com/entry/2022/02/11/160802#:~:text=x%3A%20Int)%20%3D%3E%20x%20%7D-,NoElse,-https%3A//github.com

[^1]: より正確に言うと、`String`と`Unit`の和は`AnyVal`ですが、`if (true) "a"`は`Any`に、`if (true) "a" else ()`は`AnyVal`に推論されるようです。
PHP try catchのcatch内部でreturnしてもfinallyの処理は必ず実行されるらしい

## 概要

try catch finallyにてcatch内部でreturnを行っても、必ずfinallyは実行されるらしいことを恥ずかしながら初めて知ったので簡単にまとめる。

## 内容

PHPの公式ドキュメントには下記のように書かれている

:::note
 return 文が try や catch ブロックの内部に存在した場合でも、 finally ブロックは実行されます。 
:::

catchで例外を再度スローしてもfinallyが実行されることは知っていたが、returnでもfinallyが実行されることは知らなかった。

例えば下記のような処理があったとして、例外をキャッチしたとする。当該の例外がHogeExceptionだった場合、エラーメッセージがreturnされている。このとき一見catchの中でreturnしているので処理は終わりかと思うが、finallyがある場合、必ず実行されるらしい。

```php
try {
    // DBへの書き込み処理などなど
} catch (Exception $e) {

    if ($e instanceof HogeException) {
        return $e->getMessage();
    }
    
    throw $e;
} finally {
    // クリーンアップなどの後始末処理
}
```



## 参考文献

https://www.php.net/manual/ja/language.exceptions.php
Newwave Solutions Japan: オフショア開発における成功の秘訣

オフショア開発は、多くの企業にとって魅力的なオプションですが、時には失敗に終わることもあります。特に、ベトナムのオフショア開発会社を選択する場合、失敗のリスクが高まることがあります。しかし、Newwave Solutions Japanが提供するサービスを利用することで、オフショア開発における成功の秘訣を見つけることができます。
1. オフショア 開発 失敗
[オフショア開発](https://newwave-solutions.co.jp/offshore-development-failure/)プロジェクトが失敗する原因の一つは、コミュニケーションの不足です。タイムゾーンの違いや文化の違いによって、プロジェクトの進行が滞ることがあります。また、技術的な課題や品質の問題も、オフショア開発プロジェクトを失敗に導く要因となります。
2. オフショア 開発 ベトナム
ベトナムは、アジアで最も有望なオフショア開発の目的地の一つです。安価な人件費と高い技術力を兼ね備えており、多くの企業がベトナムの開発会社を選択しています。しかし、ベトナムのオフショア開発会社とのコミュニケーションや品質管理において問題が生じることもあります。
続きを見る: [オフショア 開発 ベトナム](https://newwave-solutions.co.jp/vietnam-demerit/)
3. ベトナム オフショア 会社
ベトナムのオフショア開発会社を選ぶ際に重要なポイントは、信頼性と透明性です。信頼できるパートナーとの良好な関係を築くことが、プロジェクトの成功に不可欠です。また、透明性のあるプロセスとコミュニケーションが、プロジェクトの効率性と品質を確保するために重要です。
続きを見る: [ベトナム オフショア 会社](https://newwave-solutions.co.jp/top-vietnam-offshore-companies/)
Newwave Solutions Japanは、ベトナムのオフショア開発において、信頼性と透明性を重視したサービスを提供しています。私たちは、豊富な経験と専門知識を活かし、クライアントのニーズに合わせた最適なソリューションを提供します。オフショア開発における失敗のリスクを最小限に抑え、プロジェクトの成功を支援することが、私たちの使命です。
#1【勉強メモ】エヴァンス本からざっくり理解するDDD

## 目標
・ふわっとした理解のDDDについて[エヴァンス本](https://www.amazon.co.jp/%E3%82%A8%E3%83%AA%E3%83%83%E3%82%AF%E3%83%BB%E3%82%A8%E3%83%B4%E3%82%A1%E3%83%B3%E3%82%B9%E3%81%AE%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E9%A7%86%E5%8B%95%E8%A8%AD%E8%A8%88-Architects%E2%80%99Archive-%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2%E9%96%8B%E7%99%BA%E3%81%AE%E5%AE%9F%E8%B7%B5-%E3%82%A8%E3%83%AA%E3%83%83%E3%82%AF%E3%83%BB%E3%82%A8%E3%83%B4%E3%82%A1%E3%83%B3%E3%82%B9/dp/4798121967/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=17W0M5YAY0R9Z&dib=eyJ2IjoiMSJ9.qtIEGNumTF4Fq3OG4r7BcgPPpMccQaiAMFjoQiYsRfAUl2LJ3kucBAwXJG1pE1-9MMyozf_R6XnUk8kwhpkIPyRMzsu94DrC82a2cWHXn2TDjembTcFwG0z4uuYeu7EY_VF_p_KcGaJhu-sFQP2IfF8BXdAN9RWcUsZLGOA8hIhkuAKrptA3cagpPrF5ZoxXjjZ9ctVxNzHN-qanc6enklCzFiHeCY1UpXho238Cgd4eMsXlRTbQ5u_T9ZSbUOj5EOjKzf1jx0xSJbTwFJrRetDuJaorGcsbbNpAuJkvNAs.F3zE4YfUXPLj7DRzsSV4wM07EgTKoLqmpU491uMjIhw&dib_tag=se&keywords=%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E9%A7%86%E5%8B%95%E8%A8%AD%E8%A8%88&qid=1710421495&sprefix=%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E9%A7%86%E5%8B%95%E8%A8%AD%E8%A8%88%2Caps%2C279&sr=8-1)を通して体系的に学習する
・各章の要約をアウトプットすることで知識を定着させる

## DDDとは？
> ドメイン駆動設計とは...
> 
> 「システムの対象とする業務領域にフォーカスした手法。 ビジネス側・開発側が協力し、共通の言語を用いて背景の認識を合わせながらドメインモデルを作成し、それを基にコードに落とし込んでいくことで、より効果的に課題解決を達成する設計手法」

⚫︎参考文献

https://qiita.com/yu-saito-ceres/items/f73262cedcdd6e8e75c8

## 【第1部】 ドメインモデルを機能させる
##### ・モデル
問題解決のため対象を抽象化したもの。**現実に対する1つの解釈** 。
例)地図⇨客観視するために詳細を省いた世界のモデル

##### ・ドメイン
プログラムを適用する対象領域。
例)会計システム⇨金銭や財務がドメイン

##### ・ドメインエキスパート
ドメインの活動に関係する体系的な知識を持っている人。
例)そのソフトウェアのユーザーや、そのビジネス領域に精通している人

##### ・ドメインモデル
ドメインエキスパートが持つ知識を、厳密に構成し選び抜き抽象化させたもの。
ドメインに関する現実の概要を表現したもの。

### `ドメイン駆動設計におけるモデルの有用性`
##### 1. モデルと実装が相互に結びつく
保守や継続的な開発に有効。例えばモデルに変更があったとしてもソースコードの修正範囲は限定される。

##### 2. モデルがチーム内の言語基盤となる
ドメインエキスパートだけでなく、エンジニアチーム内でもモデルの概念をベースとしたコミュニケーションを取ることができる。
自然言語を使ったモデルの改良も期待できる。

##### 3. モデリングプロセスへの適用
上記1,2により得た知識がフィードバックとしてモデルの品質向上を継続させる。

### `ソフトウェアの革新`
ドメインに関係するビジネス課題をユーザーのために解決すること。
ソフトウェアの革新にあるドメインの複雑性に立ち向かい、明快なモデルを作り出すことで
エンジニアはさらに価値ある存在になれる。

## 【第1章】 知識を噛み砕く
### `効果的なモデリングの要素`
##### 1. モデルと実装を結びつける
イテレーションを通して結びつきを維持する。

##### 2. モデルベースの言語の洗練
モデルから用語を取り出し矛盾なくコミュニケーションできるようにする。

##### 3. 知識豊富なモデルの開発
モデルの要素である、ふるまいと、守るべきルールに関する知識を多角的に捉える。

##### 4. モデルの蒸留
不要な概念を取り除き、モデルの品質を向上させる。

##### 5. ブレインストーミングと実験
スケッチや会話を通してドメインエキスパートとモデルの有用性を検証する。

### `知識の噛み砕き`
ドメインに関する膨大な知識を、ビジネスの詳細を解明するような概念知識(ビジネスの真の原理)として抽象化させること。
「効果的なモデリング」と同義？

### `継続的学習`
ドメインモデリングだけでなく、技術的な知識も同様に向上させることで、
知識の噛み砕きを促進させモデリングのフィードバックループを回すことに繋がる。

### `知識豊富な設計`
知識を噛み砕くことで多角的なドメイン知識を反映したモデルを作ることができる。
名詞を見つけるだけでなく、ふるまいや、ルールをモデルとして表現できるようになる。

### `深いモデル`
最初は役立つモデルでなくても、モデリングのフィードバックループを回すことで問題の核心をつくようなモデルに繋がる。

## 【まとめ】
DDDの核となる概念の理解や、モデリングの概要を知ることができた。
第2章ではコミュニケーションと言語の使い方について学んでいく。

https://qiita.com/kotemendo2819/items/c990d60210259f2ad44a

参考になったらいいねやコメントおまちしています！！
📦 macOS向けpkgインストーラーのpostinstallの謎の仕様に関するメモ

# 問題発生の背景
macOSアプリがあり、昔から`pkgbuild`や`productbuild`を使ってpkgインストーラーを作っています。
そのインストーラーは作成する際にpostinstallスクリプトの設定をしており、長い間、動いていました。中身は

```sh
#!/bin/sh

; postinstall.sh

; Script path
; echo　Script path: "$0"
; Package path
; echo $1
; Target location
; echo $2
; Target volume
; echo $3

SHORTCUT_NAME="hogefuga"

; ショートカットが既に存在しているとエラーになってインストール失敗するので消す
if [ -r ~/Desktop/"$SHORTCUT_NAME" ]; then
    rm ~/Desktop/"$SHORTCUT_NAME"
fi

ln -s $2 ~/Desktop/"$SHORTCUT_NAME"
```

こんな感じの、アプリをインストールした後に、`.app`ファイルへのショートカットをデスクトップ画面に出すという、Windows文化圏のアレです。macOS文化圏だとあんま主流じゃないと思うんですけど、Windowsと揃えておきたいということでこういう仕様になっています。

ちなみにpkgインストーラー作り慣れてる方だと、「は？postinstallの`$2`って（インストール先変更しない限り）普通`/Applications`でしょ。ディレクトリへのリンク張ってどうすんだ」と思われるかもしれませんが、**実は条件次第で.appのショートカットが張れます。**

# 問題発生
ある日、新しくインストーラーを作ったら、インストールした`.app`へのシンボリックリンクではなく、`Applications`ディレクトリへのシンボリックリンクが張られるようになってしまいました。

# 結論
呼び出すスクリプトファイル名の**拡張子(.sh)の有無で挙動が変わります。**

## 拡張子ありの場合
postinstallは普通に1回実行され、**$2には.appファイルのパスが入る。**
前述した条件であり、これまで長いこと利用してきたパターンになります。

## 拡張子なしの場合
**何故かpostinstallが2回実行される。** しかも1回目は$2に.appファイルのパスが入るものの、**2回目は/Applicationsが渡される**ため、上述のスクリプトだと1回目で作成したショートカットが消され、2回目で作られた`/Applications`のショートカットが残る形になります。

# 感想
という訳で、「『CLIから実行するShellファイルには拡張子つけない』という慣習を長年無視してたけど、最近気になり拡張子を取っちゃった」らこの仕様を踏んづけたという次第でございます。自分はフロントよりのWebアプリ屋兼クロスプラットフォームアプリ屋なのでOS周りとか低レイヤーの知識が無いせいもあるんですが、本気で意味が分からん……。

いやーそれにしても条件を探すのにかなり手こずりました。あの見づらい`/var/log/install.log`とずっとにらめっこして、仕様について気付くの結構時間かかりましたし。OSのバグの線からパーミッションやら思いつく限り調べても原因というかこの現象の仕組みは分からなかったのですが、途中一つ気になることがあったので書いときます。
拡張子有り無しで`pkgbuild`コマンド打って出力ログを比較していたんですが、一行気になる文が差分として出てきたんですよ。

```
//ファイル名に拡張子無し（問題発生時）
pkgbuild: Adding top-level postinstall script
```
これ見る限り、どうやら内部的にtop-levelとして判定されているか否かがこの挙動の違いを生んでいるようです。
Wiresharkセットアップします

仕事がらネットワーク関連の知識が必要になってきたので、手始めにWiresharkをインストールするところから始めてみました。(思考停止)

◇PCスペック
 -メーカ:DELL
 -機種名:Inspiron5575
 -OS:Windows 10 Home
 -CPU:AMD Ryzen 3 2200U with Radeon Vega Mobile Gfx  2.50 GHz
 -RAM:16GB
 -ROM:SSD 1TB
デフォルトはRAMが8GB,ROM、HDD 1TBでしたが、「OSの起動に5分かかる」「頻繁にフリーズ」で使いもにならない状態だったので
メモリとストレージ換装しています。

Wiresharkのリンクからインストーラをダウンロードします。

Wiresharkリンク
https://www.wireshark.org/download.html

Windows x64 Installer(バージョン4.2.3)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3745465/a961ba5e-2fe4-58ba-cf28-41b455d881bb.png)

ダウンロードしたらインストーラを起動。
基本すべて”Next”を選択してインストール。
(CreateShortcutはチェックを入れて、デスクトップにショートカットが表示されるようにした。)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3745465/389bfe1b-5e90-58bd-efde-09e9e6a39dcb.png)

途中でNpcapのインストールが求められる。インストール。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3745465/bccf34c2-6dc1-a8f4-1a8c-37b41fedecb7.png)

インストールできました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3745465/c80fe11c-f839-a624-8903-0849ab84afb3.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3745465/97659761-227d-6361-85b2-5bf431bcd3e4.png)
macでマルチディスプレイのときにウィンドウを1つのディスプレイに集める

# 実現できること

- マルチディスプレイ利用時にウィンドウを1つのディスプレイに集める(移動する)

# 作った動機

- 昔存在していた `ウィンドウを集める` が無くなっていた
- 既存のアプリケーションで目的を満たすものが見つからなかった

# 主な用途

以下のように使い分けたい時に使う。

- 外部ディスプレイを共有用/投影用
- 内蔵ディスプレイを自分のメモ/隠したい情報

# 動作確認環境

- macOS Sonoma 14.2
- Intel or AppleSilicon

# 使うもの

- AppleScript
- Automator
- キーボードショートカット
- アクセシビリティの設定


# スクリプト

※改善を繰り返してるので最終形のみ見たい方は最後の方までスキップしてください。

## 段階1 単一のアプリケーションを指定の位置に移動

```AppleScript
tell application "System Events"
    set theWindows to every window of application process "Slack"
    repeat with aWindow in theWindows
        set thePosition to position of aWindow
        set position of aWindow to {0, 0}
    end repeat
end tell
```

- `... application process "xxxxx"` の部分でアプリケーションのプロセス名を指定する
    - アプリケーション名はアクティビティモニタ等で確認できる `プロセス名` を指定
- 移動先は　`{0, 0}` を変えることで変更可能


## 段階2 指定したプロセス名が存在しないときにエラーを無視する

```AppleScript
tell application "System Events"
	try
		set theWindows to every window of application process "Slack"
		repeat with aWindow in theWindows
			set thePosition to position of aWindow
			set position of aWindow to {0, 0}
		end repeat
	end try
end tell
```

- tryで括る
- catchを記載してないのでエラーを無視するだけ

## 段階3 複数のアプリケーションを対象とする

```AppleScript
tell application "System Events"
	try
		set theWindows to every window of application process "Slack"
		repeat with aWindow in theWindows
			set thePosition to position of aWindow
			set position of aWindow to {0, 0}
		end repeat
	end try
end tell

tell application "System Events"
	try
		set theWindows to every window of application process "Google Chrome"
		repeat with aWindow in theWindows
			set thePosition to position of aWindow
			set position of aWindow to {0, 0}
		end repeat
	end try
end tell
```

- コピペしてプロセス名の変更を行っただけ

## 段階4 まとめる

```AppleScript
set appList to {"Slack", "Google Chrome", "Finder", "MacVim"}

repeat with a in appList
	log a
	moveWindowToDisplay(a)
end repeat

on moveWindowToDisplay(appName)	
	tell application "System Events"
		try
			set theWindows to every window of application process appName
			repeat with aWindow in theWindows
				set thePosition to position of aWindow
				set position of aWindow to {0, 0}
			end repeat
		end try
	end tell
end moveWindowToDisplay
```

## 余裕があるなら改善したい部分

- プロセス名の自動取得
- 移動先の動的変更
  - ディスプレイの配置次第で `{0, 0}` が必ず内蔵ディスプレイの左上になるわけではない

# 使い方

1. Automatorのクイックアクションでスクリプトを登録
    1. ワークフローは`AppleScriptを実行`のみ
    1. スクリプトの中身に上記のスクリプトを記載
    1. `▶` で動作確認
        1. Automatorに対してアクセシビリティの許可をするためのダイアログが出るので許可する
    1. 任意の名称で保存
1. キーボードショートカットでキーを登録
    1. キーボードショートカット -> サービス -> 一般 のところにAutomatorで保存した名前があるので、それに対してショートカットキーを設定する
1. ショートカットキーを発動させたいアプリケーションに対してアクセシビリティを許可する
    1. ショートカットキーを発動した時のアクティブなアプリケーションに対してアクセシビリティの許可が必要
    1. Finderとかターミナルとかお好みで
    1. 最初の実行時に確認が出るのでこの手順はスキップしても問題なし
Newwave Solutions Japan: Python 画像認識の最新技術を活用する

Newwave Solutions Japan（ニューウェーブソリューションズジャパン）は、最新の AI 技術を駆使し、画像認識の分野で革新的なソリューションを提供しています。特に、Python 画像認識技術の活用において、弊社は常に最新の技術を追求しています。
![what-is-onsite.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3031688/5c8a6de6-b2c6-ac44-ceec-60afcbb98bbf.png)

1. 画像 認識
[画像 認識](https://newwave-solutions.co.jp/ai-image-recognition/)は、現代のデジタル時代において極めて重要な役割を果たしています。これは、コンピューターが画像を分析し、パターンを識別する能力を指します。ニューウェーブソリューションズジャパンでは、この技術を活用して、顧客のビジネスニーズに合った効率的なソリューションを提供しています。
2. Python 画像 認識
[Python 画像 認識](https://newwave-solutions.co.jp/python-image-recognition/)は、弊社が専門とする分野の一つです。Pythonは優れたプログラミング言語であり、その豊富なライブラリやフレームワークを活用することで、高度な画像認識アルゴリズムを実装することが可能です。ニューウェーブソリューションズジャパンのエンジニアは、Pythonを駆使して、顧客の課題に対する最適な解決策を提供しています。
3. AI 技術 最新
[AI 技術 最新](https://newwave-solutions.co.jp/lastest-ai-technology/)動向に常に注目しているのが、ニューウェーブソリューションズジャパンの特徴です。AI 技術の進化は驚くべきものであり、我々は常に最新の研究成果や技術動向を追跡し、それを顧客のプロジェクトに活かしています。最新の AI 技術を取り入れることで、顧客はより効率的で革新的なソリューションを享受することができます。
Newwave Solutions Japanは、常に顧客のニーズに合った最先端の技術を提供することにコミットしています。Python 画像認識や最新の AI 技術を活用することで、お客様のビジネスに革新をもたらすお手伝いを致します。
初投稿で自己紹介

## はじめまして
40代IT未経験でエンジニアを目指している、あまねです。

職業訓練校でJava, SQL, Python勉強中です。
今のところSQL(MySQL)が楽しいので、データベース系の求人を検索してニヤニヤしている
ちょっと怪しい中年だったりするんだけど大目に見て欲しい。

アウトプットが好きなので、Qiitaに登録しました。

## 今までの仕事
大学を卒業してからはずーーーーーーーーーーーっと事務。
営業事務が多かったけど、単純に飽きた。
現場にオペレーション変える意識ないから新鮮味に欠けるのよね。
なんなら事務は異動が少ないから、地縛霊かって思うくらい環境に執着してる人もいる。
こっちからしたら信じられん。

途中で2年くらい日本を出てふらふらしてたけど
今となってはいい思い出。

複数の会社で勤めたけど
エクセル、パワポ、ワードはだいたい使えるからよい経験はしてきたと思う。
OJTもやったし、新規取引先の受注フローとか確立しちゃったし結構仕事してた気がする。

IT業界の人からみたら、MS Office系のものなんてできて当たり前だと思うけど
世間一般はエクセルでVLOOKUPできるだけで **「神！！！」** となるんだよね。

あとはフリーランスで生きていきたいって思って
アフィリエイトブログ3年やってたけど、Wordpressの使い方に詳しくなってwebライターでお小遣い稼げる程度で終わってる。

アフィリエイトブログは再開したいけど、画像作ったり記事の下調べが結構大変なので
ちゃんとITでお仕事できるようになったら改めて考えるとしよう。

Wordpress使えるのってエンジニアに有利なんですかね？
HTML, CSSはもともとあるデザインを使っていたから一から書いたりはできないんだよね。

## なんでITに行きたいか
簡単に言うと親の介護。
でも、自分はフルで働けるから一般的に考えられている「在宅介護 = フルで働けない」は違うんだけど
介護ってかなりマネジメント感がすごくて自分のリソースが100%仕事にできなくなったから
通勤時間を削ってワークライフバランスを大事にしたいって思ったのね。
かと言って収入も欲しい。
だからITに転職するため職業訓練校に通っているのです。

ITの求人を検索していたら、医療・介護の組み込み系とかあってすごい興味ある。
親の介護を通してIT × 福祉って本当に必要だと思うし、実際自分が助かっているから
そういう道も憧れているよ。

職業訓練校に通って毎日楽しいから正解だったと思う。

## 今後の計画
ビジョンはいくらでもあるんだけど、現実的なものからかなえていきたいね。

### 資格取る
OracleのJava Bronze取りたいですね。
未経験ならBronze取ったらウリになるかな？
Silverじゃないと通用しない？

ITパスポートは。。。。
まぁ気が向いたら取ろうかな。
勉強はしたんだけど、プログラム関係ないから優先順位下げちゃったよ。

DBの初学者向けの資格探したけど、良いものを見つけられなかったので
ご存じだったら教えて欲しいです。

### ポートフォリオ作る
訓練校でGitHubの勉強しないから、独学中です。
フリーのライターやってた手前、ポートフォリオがないと落ち着かないから作るよ。
おススメのポートフォリオあったら教えて欲しいです。
今のところ、SQLは家計簿作る予定。

Javaはミニゲームを作ろうと思ってるんだ。
今は知識や技術もないけど、スマホのメモになんちゃって仕様書書いてるから
そのうち清書したい。

### マイクラのMOD作る
いきなりゲームかよって思う？
未経験者がマイクラのJava版でMOD作ったら、実務に近いことできるのでは？って思って
楽しく経験が積める方法としてはいいかな？なんて甘いこと考えてます。
単純にマイクラ好きだし。

こちらもYouTube動画とかで独学中。


### もちろん就職する
けっこうYouTubeとかで「SEとは」みたいな職種系の動画見てるんだけど
全然イメージわかないなう。

研修長めの求人に魅かれているけど採用してくれるなら
そこでがんばるから、どなたか自分と一緒に働きませんか？

## まとめ
初投稿なので、ざっくり思いついたことをつらつらと書いてみました。
これからは勉強方法とか、就活の状況とか書いていこうかな

最後まで読んでくれてありがとうございました:relaxed:
【React】要素を指定してPropsの型を取得する方法【TypeScript】

## ComponentProps

`ComponentProps`を使用すると指定したコンポーネントが受け取るpropsの型を取得できます。

`ref`を除外した場合には`React.ComponentPropsWithoutRef`を使用します。

```ts

type Props = React.ComponentPropsWithoutRef<'button'>

const MyComponent = (props: Props) => {
  return <button {...props} />
}

```

`ref`を明示的に含めたい場合には`React.ComponentPropsWithRef`を使用します。


```ts

type Props = React.ComponentPropsWithRef<'button'>

const MyComponent = (props: Props) => {
  return <button {...props} />
}

```
【個人開発】実務経験1年3ヶ月が個人開発してみた！

# はじめに
実務経験1年3ヶ月のWebエンジニアです！
昔思い描いていたサービスをリリースすることができました！
個人開発の広告を兼ねて投稿します！
※5分で読めます。

# サービス概要
## ガルバとキャバ
https://girlsbar-cabalet.com

![opengraph-image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1798471/2e1856f2-051d-6c01-7bdf-fff07bb5af00.png)
※詳細はサイト見てね

## なぜそのサービスを作ろうと思ったのか
大学4年の頃、同じサークルの友人がキャバクラで働いており、「こんなサービスあったらいいなー」という話をしていたのを聞いていました。エンジニアになって8ヶ月ぐらい経った頃、ふと思い出して作り出しました。

## 主な機能
### 検索機能
現在地から近い順にキャストを検索することができます。
その他にも、県名、最寄駅、金額、店舗の種類、営業しているかどうかなどの任意項目があります。
現在地から10km以内でキャストを検索するため、[geocorder](https://github.com/alexreisner/geocoder)というライブラリを使用しました。
![検索機能.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1798471/d1593f92-1368-dc63-1e2e-2bf534b81104.gif)

### トーク機能
LI●Eとほぼ同じUIで、キャストとユーザーがトークすることができます。
リアルタイムで送った内容が反映されるよう、[Action Cable](https://railsguides.jp/action_cable_overview.html)を使いました。Websocketは実務で経験していなかった部分なので、個人開発で実装できてよかったです。
![トークまでの流れ.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1798471/b6be1bf6-52db-457a-9574-9198b747cc05.gif)


# 技術スタック
| カテゴリ     | 技術                                                |
|----------|---------------------------------------------------|
| フロントエンド | Next.js 14.1.3 / React 18 / TypeScript 5   |
| バックエンド   | Ruby 3.2.2 / Ruby on Rails 7.0.4（APIモード）       |
| データベース   | PostgreSQL 15.5                                    |
| セッションストレージ | redis                 |
| 環境構築     | Docker                   |
| インフラ     | Vercel / Render / AWS S3  /  AWS SES                    |
| その他    | Tailwind / shadcnUI/ rubocop / devise / alba / Actioncable等 |

### インフラ構成図
![あ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1798471/5e9fe6af-fd4c-e150-869b-eba7d1cadae8.png)

## 選定理由
### バックエンド
最初Go言語で作ろうとしましたが、JWT認証作ったところでリリースに1年ぐらいかかりそうだったので、実務で使用しているRailsに乗り換えました。
個人開発ならRailsが１番だなと作り終わって思いました。

### フロント
実務でVueを使っていますが、流行りのNextjsに興味があったので使いました！
Vueとは違って、調べるとすぐに求めている情報が出てくるので助かりました！
CSSフレームワークは初め、ChakuraUIを使っていましたがカスタマイズが思うようにいかずshadcnUIに乗り換えました。
英断でした。これ以外使う気になりません！YES!ゼロランタイム!!

### インフラ
Nextjsを使っている以上自分の中ではvercel以外選択肢がありませんでした。初めてのデプロイも、画面表示するまでに1日かかりませんでした。サイコー！！
APIはFly.ioとRenderで悩みましたが、「CLIよりGUIや！！」と使いやすさで選びました。ただ、RenderはDBが3ヶ月で無料プランが切れるのに対して、Fly.ioは3GB(?)ぐらいまで無料だったので時間があるときに乗り換えるかもしれません。


### 外部サービス
画像の格納先にAWS S3を選びました！過去に実装したことがあったので使いました！
メールについては当初SendGridを使う予定でしたが、最近法人しか使えないよう仕様が変わったみたいです。
泣く泣くAWS SESにしましたが案外簡単に実装できてよかったです。

### その他
Google アナリティクスも入れて、どれぐらいの人がサイト見てくれているか監視しています👁
今後、どうやったらユーザーが増えるかも学んでいきたいです。

## 最後に
実務経験1年3ヶ月で学んだ技術力とプライベートの時間をフルに使い、構想に2ヶ月、実装に3~4ヶ月でリリースすることができました👏
Push通知などの機能実装したいため本番リリースはまだですが、基本機能リリースできただけですごい達成感...😭
未経験のとき、「実務に入ったたら、どのくらいのサービスが作れるようになるのかなー」と思っていました。
PRUMで1年ちょっと経験を積むと、これぐらいのサービスが作れるようになります。
気になった方は、「[ガルバとキャバ](https://girlsbar-cabalet.com/)」と「[PRUM](https://www.wantedly.com/companies/company_8173074)」で調べてみてください！！！
ここまで読んでいただき、ありがとうございました🙌
Azure Container Apps JobsのジョブをCLIから起動する際に環境変数を正しく設定する

## はじめに

Azureのドキュメントには、下記のような形でAzure Container Apps JobsのジョブをCLIから起動できることが説明されています。

```sh
az containerapp job start [--args]
                          [--command]
                          [--container-name]
                          [--cpu]
                          [--env-vars]
                          [--ids]
                          [--image]
                          [--memory]
                          [--name]
                          [--no-wait]
                          [--registry-identity]
                          [--resource-group]
                          [--subscription]
                          [--yaml]
```

https://learn.microsoft.com/en-us/cli/azure/containerapp/job?view=azure-cli-latest#az-containerapp-job-start

実際に、下記のような形でジョブを実行することができます。

```sh
az containerapp job start -g $RG_NAME -n $JOB_NAME
```

また、ドキュメントには`--env-vars`パラメータについて下記のような記載があるため、このパラメータを指定することで実行時の環境変数を指定できるように見えます。

> A list of environment variable(s) for the container. Space-separated values in 'key=value' format. Empty string to clear existing values. Prefix value with 'secretref:' to reference a secret.

しかし、実際には下記の内容を実行しても意図通りの挙動にはならず、環境変数の指定が無視されて実行されてしまいます。

```sh
az containerapp job start -g $RG_NAME -n $JOB_NAME --env-vars FOO=BAR
```

## 環境変数を正しく指定する方法

ドキュメントには一切の記載がありませんが、`--env-vars`パラメータは`--image`パラメータを指定した場合にのみ有効になるという隠れた仕様があります。

つまり、正しく環境変数を指定するには下記のようにします。

```sh
az containerapp job start -g $RG_NAME -n $JOB_NAME --image $IMAGE_NAME --env-vars FOO=BAR
```

## 複数の環境変数を正しく指定する方法

ドキュメントにも「Space-separated values」と記載されている通り、空白で区切ることで複数の環境変数を指定することができます。ただし、ここでの空白区切りとは「複数の引数として指定する」という意味であり、「空白を含んだ単一の引数を指定する」という意味ではありません。

つまり、下記のような形は正しくありません。

```sh:正しくない例
az containerapp job start \
    -g $RG_NAME \
    -n $JOB_NAME \
    --image $IMAGE_NAME \
    --env-vars "FOO=BAR BAZ=QUX"
```

正しくは下記のようにします。

```sh:正しい例
az containerapp job start \
    -g $RG_NAME \
    -n $JOB_NAME \
    --image $IMAGE_NAME \
    --env-vars "FOO=BAR" "BAZ=QUX"
```
Moodle 4.3 (Bitnami LMS) を Docker で起動する【2024年4月最新版】

## はじめに

Moodle 4.3 を Docker で起動します

Google 検索で以下の記事がヒットしたのですが、すでに紹介されている方法が使えなかったため、2024年4月時点で実行可能な方法を残しておきます

https://qiita.com/akahide77/items/fcb0e4078d8f3fa6dffc

:::note warn
あくまでも手元で Moodle を使ってみる場合の簡易的な手順です

本番環境として運用する場合はもっと色々検討、設定しましょう
:::

## 使用するアプリケーションについて

### Moodle とは

オープンソースの LMS = Learning Management System = 学習管理システムです

開発、保守は Moodle HQ (Headuarters = 本部) と Moodle コミュニティが行っています

https://moodle.org/

教師は資料などの教材、小テスト、課題を Moodle 上で管理することができます

学生は Moodle から教材の閲覧、小テストや課題の提出を行うことができます

教師と学生間でのコミュニケーション（質問と回答）にも利用できます

### Bitnami とは

Bitnami は様々な OSS アプリケーションをすぐ使えるようパッケージ化したソリューションです

2019 年に VMware が買収しています

https://bitnami.com/

### Bitnami LMS とは

Bitnami LMS は Moodle LMS をワンクリックでインストール、実行できるようにしたソリューションです

https://bitnami.com/stack/moodle

GitHub の Bitnami コンテナ ライブラリ、 Docker Hub でコンテナイメージが公開されています

https://github.com/bitnami/containers/tree/main/bitnami/moodle

https://hub.docker.com/r/bitnami/moodle/

## コンテナの起動手順

### docker-compose.yml の取得

GitHub 上に Bitnami LMS 用の docker-compose.yml が公開されています

https://github.com/bitnami/containers/blob/main/bitnami/moodle/docker-compose.yml

ブラウザからダウンロードして取得できます

![スクリーンショット 2024-04-03 23.49.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/a046a7a0-5a55-b8be-558e-466efc414b0b.png)

以下のコマンドでダウンロードすることも可能です（wget を使う場合）

```sh
wget https://raw.githubusercontent.com/bitnami/containers/main/bitnami/moodle/docker-compose.yml
```

### コンテナの起動

:::note warn
初期設定だと 80 番ポートを使います

80 番ポートを使っているアプリケーションがないか確認しましょう

もし 80 番ポートがすでに使われている場合、 docker-compose.yml の以下の箇所を変更しましょう

```yml
    ports:
      - '80:8080'  # `80` の部分を空いているポート番号に変更する
```
:::

以下のコマンドでコンテナを起動します

```sh
docker compose up
```

実行すると、以下のようなログが流れます

```
moodle 14:07:21.47 INFO  ==> 
moodle 14:07:21.47 INFO  ==> Welcome to the Bitnami moodle container
...
moodle 14:07:29.88 INFO  ==> Running Moodle install script
```

ここで Moodle のインストールが開始され、完了まで少し時間がかかります

以下のように表示されればインストール完了です

```
moodle 14:08:42.67 INFO  ==> Persisting Moodle installation
moodle 14:08:55.06 INFO  ==> ** Moodle setup finished! **
moodle 14:08:55.07 INFO  ==> ** Starting cron **
moodle 14:08:55.10 INFO  ==> ** Starting Apache **
```

## 初回ログイン

ブラウザで <http://localhost/> にアクセスします

:::note warn
ポート番号を変えている場合は `http://localhost:<ポート番号>/`
:::

以下のような画面が表示されます

右上の Log in をクリックしてください

![スクリーンショット 2024-04-03 23.59.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/db6cf210-535e-d75b-aa5e-5d57112dd7b8.png)

ログインフォームが表示されるので `user` `bitnami` と入力して Log in をクリックします

:::note warn
あくまでもお試し用なので、コンテナで定義されたデフォルトのパスワードです
:::

![スクリーンショット 2024-04-04 0.01.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/64310c56-a53c-4e01-1a34-5449aa43de05.png)

Admin としてログインできました

![スクリーンショット 2024-04-04 0.02.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/d9ff0194-ee65-06bc-9f98-2bfc6f69874e.png)

## まとめ

Moodle 4.3 を Docker で起動することができました

Bitnami を利用することで `docker compose up` のワンコマンドだけで起動でき、非常に楽です

日本語化、授業の登録などは次回以降の記事に書いていきます

https://qiita.com/RyoWakabayashi/private/f5c3b49b9148623d74b5
[Linux] find とxargs の使い方いつも忘れるので整理


ワンライナーのコマンドを使うときってxargsとかfindとか多く使用するかと思います。忘れがちなので、整理してみたいと思います。

## xargs のユースケース

私が一番よく使うのは、パイプで渡されたファイルやディレクトリを削除するという使い道です。一気に何かをしたいときには、find コマンドと併用したりして、使います


## xargs を使って削除していこう

```
# 削除するディレクトリ一覧
find /var/tmp/nginx/ -type d

/var/tmp/nginx/
/var/tmp/nginx/test
/var/tmp/nginx/test/log
/var/tmp/nginx/test/ttt
/var/tmp/nginx/umask-test
/var/tmp/nginx/permit-dir
/var/tmp/nginx/permit-dir2
/var/tmp/nginx/permit-dir2/permit-2
/var/tmp/nginx/permit-dir2/permit-2/permit-3
```

現状、一覧がこれらです。

実際に消してみます。

```
find /var/tmp/nginx/ -type d | xargs rm -rf
```
と削除コマンドをいきなり打ってもいいんですが、ちょっと対象が間違っていたらどうしようとおもうこともあると思います。そんなあなたに朗報です。xargs にはドライランの機能があります。

xargs の後ろに-p オプションをつけてみてください。

```
find /var/tmp/nginx/ -type d | xargs -p rm -rf

# 削除対象になるディレクトリ一覧
rm -rf /var/tmp/nginx/ /var/tmp/nginx/test /var/tmp/nginx/test/log /var/tmp/nginx/test/ttt /var/tmp/nginx/umask-test /var/tmp/nginx/permit-dir /var/tmp/nginx/permit-dir2 /var/tmp/nginx/permit-dir2/permit-2 /var/tmp/nginx/permit-dir2/permit-2/permit-3 ?...
```

これで削除対象が合っているかの確認ができます。対象が多くなると確認しづらいというデメリットがあるとは思いますが。ドライランオプションで確認が取れたら、実際にコマンドを実行してみましょう

```
find /var/tmp/nginx/ -type d | xargs rm -rf
```

削除されたことを確認してみて、削除されていたら成功です。


## 他にも使い方(find との組み合わせ方)

ファイルを削除する場合
```
find /var/tmp/nginx/ -type f | xargs rm -rf
```

一日分のみ(今日が4/1 14:00とするとそこから一日前まで取得する)
timestamp を見るので、ファイルの日付とかと違うことが大いにあり得るので、注意してください
```
find /var/tmp/nginx/ -type f -mtime -1 
```

## xargs を使わないで引数だけ渡す方法とか
xargs って結構未知の部分が多い、コマンドになります。(少なくとも僕にとっては)ですので、いくら上手くやってもxargs 以下のコマンドに引数が上手く渡らないなっていう時があると思います。

そんな時に使えるのが、-exec オプションです。

```
find /var/tmp/nginx/ -type f -exec chmod 600 {} \;
```
みたいな感じです。やっていることは、find コマンドで取得したファイルを chmod の後の {} に渡している形になります。-exec <command> でそのコマンドを実行する意味です
```
find /var/tmp/nginx/ -type f
```

## まとめ
xargs とか -exec とかってなかなか使ってみないと挙動がわからなかったりすることも少なくないのかなと思います。find も file だけとかdirectory だけとか、permission とかも絞ったりして取得できるので、結構便利です。xargs find などを使って効率よくしていきましょ～～～
#8  色調整

今回の課題では、スライダーを使用して、私のお気に入りのバイク、Honda monkey125とロゴの背景色と透明度を動的に変更します。以下のような成果です：

![１.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3703986/b5a601a0-7b48-5cde-3756-5807eee08df2.gif)

インターフェースには、画像を表示するための2つのUIImageViewと、赤、綠、青の色値と透明度を調整するための4つのUISliderが含まれています。また、対応するスライダーを有効または無効にするための4つのUISwitchもあります。全ての設定を初期状態に戻すためのリセットボタンもあります。

背景色の調整
ユーザーがいずれかのスライダーを動かすたびに、changeBackgroundメソッドがトリガーされ、スライダーの値に基づいてUIImageViewの背景色が動的に変更されます。

```
@IBAction func changeBackground(_ sender: UISlider) {
    monkeyImage.backgroundColor = UIColor(red: CGFloat(redSlider.value), green: CGFloat(greenSlider.value), blue: CGFloat(blueSlider.value), alpha: CGFloat(opacitySlider.value))
    logoImage.backgroundColor = UIColor(red: CGFloat(redSlider.value), green: CGFloat(greenSlider.value), blue: CGFloat(blueSlider.value), alpha: CGFloat(opacitySlider.value))
}
```

スライダーの有効/無効化
ユーザーがUISwitchを切り替えると、対応するスライダーが有効または無効になります。これはsliderControlメソッドによって実現されます。

![２.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3703986/7458bb4c-e110-5775-526c-ba3aef61b760.gif)

```
@IBAction func sliderControl(_ sender: UISwitch) {
    redSlider.isEnabled = redSwitch.isOn
    greenSlider.isEnabled = greenSwitch.isOn
    blueSlider.isEnabled = blueSwitch.isOn
    opacitySlider.isEnabled = opacitySwitch.isOn
}
```

リセット機能
最後に、ユーザーがリセットボタンをクリックすると、全てのスライダーが最小値に設定され、画像の背景も透明になります。

![３.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3703986/5362e67c-ce24-63a8-5570-96f253ce922e.gif)

```
@IBAction func reset(_ sender: UIButton) {
    redSlider.value = redSlider.minimumValue
    greenSlider.value = greenSlider.minimumValue
    blueSlider.value = blueSlider.minimumValue
    opacitySlider.value = opacitySlider.minimumValue
    monkeyImage.backgroundColor = UIColor(red: CGFloat(0), green: CGFloat(0), blue: CGFloat(0), alpha: CGFloat(0))
    logoImage.backgroundColor = UIColor(red: CGFloat(0), green: CGFloat(0), blue: CGFloat(0), alpha: CGFloat(0))
}
```

https://github.com/liyoway/changeColor?source=post_page-----51aac3af999b--------------------------------