OmniAICreator/Qiita-1.07M huggingface dataset:
【jQuery】アコーディオンとは

# アコーディオンとは
アコーディオン（Accordion）は、Webページ上で項目を開いたり閉じたりすることができる、よく使用されるUI（ユーザーインターフェース）パターンの1つです。一般的に、複数の項目がリスト形式で表示され、各項目をクリックすると、その項目の詳細情報が表示されたり非表示になったりします。

アコーディオンは、情報を整理し、スペースを節約するのに役立ちます。また、ユーザーが興味を持っている情報にすばやくアクセスできるようにします。

jQuery UIプラグインには、アコーディオンを簡単に実装できる機能が含まれています。以下は、jQuery UIのアコーディオンの基本的な使用例です。

HTML:
```html
<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>This is the content of section 1.</p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>This is the content of section 2.</p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>This is the content of section 3.</p>
  </div>
</div>
```
JavaScript:
```js
$( function() {
  $( "#accordion" ).accordion();
} );
```
この例では、`<div id="accordion">`内の各`<h3>`要素がセクションの見出しであり、それに続く`<div>`要素がそのセクションの内容を含んでいます。JavaScriptの`accordion`メソッドは、指定された要素（この場合は`#accordion`）をアコーディオンとして初期化します。ユーザーが見出しをクリックすると、対応する内容が開いたり閉じたりします。

アコーディオンは、jQuery UIや他のライブラリを使用して簡単にカスタマイズできます。たとえば、アニメーションのスピードやエフェクト、見出しや内容のスタイルなどを調整することができます。
モジュールとは

# モジュールとは
モジュールは、プログラムを構成する部品の1つであり、関連する機能やコードをまとめたものです。モジュールは、コードの再利用性や保守性を向上させるために使用されます。一般的に、モジュールは特定の機能や目的を持つ関数やクラスの集合体です。

# 特徴
モジュールの主な特徴は次のとおりです。

1\. **機能のまとまり** : モジュールは特定の機能や目的に関連するコードをまとめたものです。これにより、関連する機能を理解しやすくし、コードをより構造化しやすくします。

2\. **再利用性** : モジュールは、他のプログラムやプロジェクトで再利用することができます。これにより、同じ機能を複数の場所で実装する必要がなくなり、コードの重複を減らすことができます。

3\. **名前空間の提供** : モジュールは、グローバルな名前空間を汚染せずに関連する関数やクラスを定義するための手段を提供します。これにより、異なるモジュールで同じ名前の関数やクラスを定義しても衝突することがありません。

4\. **分割されたコードベース** : 大規模なプロジェクトでは、モジュールを使用してコードを論理的に分割することが一般的です。これにより、コードベース全体を管理しやすくし、複数の開発者が同時に作業することが容易になります。

# まとめ
プログラミング言語やフレームワークによって、モジュールの実装方法や機能は異なります。例えば、Pythonではモジュールは単一のファイルで構成され、関数やクラスの定義を含むことができます。JavaScriptでは、モジュールはES6以降の構文を使用して定義され、他のファイルからインポートおよびエクスポートされることが一般的です。
【jQuery】モーダルとは

# モーダルとは
モーダル（Modal）は、Webページ上でポップアップするダイアログやウィンドウのことを指します。モーダルは、ユーザーに対して情報を表示したり、重要な操作を行うためのコンポーネントとして広く使用されています。

一般的なモーダルウィンドウには、以下の特徴があります。

1\. **ポップアップ** : モーダルは通常、ユーザーの操作に応じてポップアップします。たとえば、ボタンのクリックやページの読み込みなどのイベントによって表示されます。

2\. **オーバーレイ** : モーダルが表示されると、背景に暗いオーバーレイが表示され、モーダルが他のコンテンツと区別されます。オーバーレイは、モーダル以外の部分が操作できないようにするための視覚的な効果もあります。

3\. **閉じるボタン** : モーダルには通常、閉じるためのボタンが含まれています。これにより、ユーザーは必要に応じてモーダルを閉じることができます。

4\. **コンテンツ** : モーダルには、通常、テキスト、画像、フォーム、または他のウィジェットなどのコンテンツが含まれます。これにより、ユーザーに情報を表示したり、操作を行ったりすることができます。

jQueryを使用してモーダルを実装する場合、通常はCSSとJavaScriptを組み合わせてモーダルをスタイリングし、表示および非表示を制御します。一般的な手法には、jQueryの`fadeIn()`や`fadeOut()`メソッドを使用してモーダルを表示および非表示にする方法が含まれます。また、`click()`イベントハンドラーを使用して、モーダルを表示するトリガー（たとえばボタン）に対してクリックイベントを設定する方法もあります。
【jQuery】offsetメソッドとは

# offsetメソッドとは
`offset`メソッドは、要素の現在位置をページ全体に対する絶対座標で取得します。要素の左上隅がページの左上隅からどれだけ離れているかを示すオブジェクトを返します。

このメソッドは、要素が現在のビューポート内にあるかどうか、あるいはスクロールされたページのどの位置にあるかを判断するのに便利です。

基本的な構文は次のとおりです。
javascript:
```js
$(selector).offset()
```
`selector`には、対象となる要素を指定するセレクターを入力します。

返されるオブジェクトは、以下のプロパティを含みます。

`top`: 要素の上端がページの上端からのピクセル数を示します。
`left`: 要素の左端がページの左端からのピクセル数を示します。

例えば、要素の現在の位置を取得するために以下のように使用します。
javascript:
```js
var position = $('#myElement').offset();
console.log('Top:', position.top, 'Left:', position.left);
```
これにより、要素`#myElement`の現在の位置がページ上でどこにあるかが取得されます。
【jQuery】attrメソッドとは

# attrメソッドとは
`attr`メソッドは、指定した要素の属性を取得または設定するためのメソッドです。このメソッドを使用すると、HTML要素の属性を取得したり、新しい値を設定したりすることができます。

`attr`メソッドの基本的な構文は次の通りです。
```js
$(selector).attr(attributeName)       // 属性の値を取得する
$(selector).attr(attributeName, value) // 属性の値を設定する
```
- selector: 属性を取得または設定する対象の要素を指定するセレクター。
- attributeName: 取得または設定したい属性の名前。
- value: 設定したい属性の値。

例えば、以下のように使用することができます。
html:
```html
<button id="myButton" class="btn" disabled>Click me</button>
```
javascript:
```js
// disabled属性の値を取得する
var isDisabled = $('#myButton').attr('disabled');
console.log(isDisabled); // true

// disabled属性の値を設定する
$('#myButton').attr('disabled', 'disabled');

// クラス属性(class)の値を取得する
var classes = $('#myButton').attr('class');
console.log(classes); // btn

// クラス属性(class)の値を設定する
$('#myButton').attr('class', 'btn btn-primary');
```
`attr`メソッドは、要素の任意の属性に対して取得および設定を行うことができます。これにより、動的なコンテンツの生成やDOMの操作など、さまざまなシナリオで便利に使用することができます。
ReactでLottiefilesを使ってアニメーションをサクッと実装してみた

## はじめに
自分のポートフォリオや個人開発やらで、
ちょっとした時にサクッとアニメーションが実装できたらなーと思う時が
もしかしたらあるかと思います。

今回は、そんな時に便利なLottiefilesを使って、
アニメーションをサクッと実装する方法を解説していきたいと思います。

## バージョン
React @18.2.0
Typescript @4.8.2

## Lottieアニメーションとは？

公式によると、

>Lottieは、JSONベースのアニメーションファイル形式です。 これを使うと、静止画アセットを配信するのと同じくらい簡単に、アニメーションをあらゆるプラットフォームに配信できます。

つまりこのJSONファイルをプログラムで呼び出して、アニメーションを流すという感じになります。
もちろん呼び出す時に、さまざまな条件でアニメーションを再生することが可能です。

## アニメーションを用意する

まずは以下のURLから再生したいアニメーションのJSONファイルをダウンロードします。

https://lottiefiles.com/jp/

右上のアニメーション検索で探してみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392337/dd1a1235-9456-9743-bbee-751e8e8e57d3.png)

気に入ったアニメーションが見つかったら早速ダウンロードしてみます。
今回はお試しなので、lottiefilesが提供しているLikeのアニメーションを選んでみました。
ワークスペースに保存するように促されるので、そのままボタンを押下します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392337/9eb02fb3-9c73-c2d1-5139-7a0ee9907a9f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392337/b7118ad1-5941-727d-4269-e833e48f8f98.png)

以下のようなページに遷移するので、右上あたり「Download & export」から「Lottie JSON」を選択してダウンロードしましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392337/b4a44871-af8b-5b86-7a69-f087c0ae236b.png)

ダウンロードが完了したらこのファイルを呼び出したいプロジェクトに配置しておきます。

以下のような感じでファイル名は適宜変えていただくのがいいかと思います。
```
src/
├─ App.tsx 
├─ animation.json 
```


## コードからアニメーションを再生する

まず、プロジェクトに@lottiefiles/react-lottie-playerをインストールします。
ターミナル(コマンドライン)で以下のコマンドを実行してください。

```
yarn add @lottiefiles/react-lottie-player
```
もしくは
```
npm install @lottiefiles/react-lottie-player
```

問題なくインストールできたら、次はコードでreact-lottie-playerを呼び出します。
※今回はサクッと試したかったので、create-react-appで作ったAppファイルをそのまま修正してます。

``` App.tsx
import React from "react";
import "./App.css";
import { Player } from "@lottiefiles/react-lottie-player";
import Animation from "./animation.json";

function App() {
  return (
    <div className="App">
      <Player
        autoplay
        loop
        src={Animation}
        style={{
          position: "fixed",
          top: "50%",
          left: "50%",
          transform: "translate(-50%, -50%)",
          height: "200px",
          width: "200px",
          zIndex: 1,
          pointerEvents: "none",
        }}
      />
    </div>
  );
}

export default App;

```

このコードでは、Player コンポーネントを使ってLottieアニメーションを表示しています。
とりあえずautoplayとloopプロパティをtrueに設定しているので、ページがロードされるとアニメーションが自動的に再生されて無限ループします。

srcプロパティには、表示したいアニメーションのURLを設定してください。
上記のコードではimportしたJSONファイルを指定して渡して実行しています。

もちろんstyleをあてることも可能で、今回は見やすいように中央に配置しています。
zIndexとかpointerEventsは結構使うかと思います。

## 実行した結果

![148a3240289f72eb43c09e78e72823c0.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392337/faf7cc3b-5a83-310d-3309-8013814c90ae.gif)

# まとめ

めちゃめちゃ簡単でしたね。
gifなのでちょっとカクついてますが、実際に試してもらえると滑らかに表示されると思います。

lottiefilesはアニメーションも大量にあるので、眺めるだけでも面白いと思います。
今回は紹介しませんでしたがワークスペースでアニメーションを色々と触れるので、
興味がある方は、良かったら試してみてください！

## 参考
https://docs.lottiefiles.com/lottie-player/components/lottie-react

https://lottiefiles.com/jp/what-is-lottie
【爆速入力】VSCodeでスニペットを登録して作業効率アップ

スニペットとは？
入力途中でワードを補完してくれるあの機能です。

VSCodeでスニペットを登録して入力効率をアップさせましょう。

例えば「f」って入れたら
```php:php
foreach($ as $value){
}
```
が入力候補に出てきてくれたら便利ですよね。

# 登録方法
### 1.「ファイル」→「ユーザー設定」→「ユーザースニペットの構成」

![スクリーンショット 2024-02-13 050137.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3686263/fbca1b8f-d84f-bcad-8306-2e0dbf1a7c7d.jpeg)

### 2.言語を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3686263/f0e804aa-e48d-8ef9-d030-f9dcc7aab8c6.png)
今回はPHPを選択しました。

### 2.スニペットを登録
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3686263/47615604-d0f4-f16c-c7d5-d62802cc60ba.png)

# 入力例
```php:php.json
{
	"foreach": { 		//スニペット名
		"prefix": "f", 	//入力
		"body": [ 		//補完
		  "foreach($${1:} as $${2:value}){",
		  "}",
		],
	  },
}
```
・＄+スーペースor＄　＝　「＄」
・＄+{数字:初期値}　＝　数字の順番にカーソルが当たる。tabで次の数字へ。
・＄+初期値　＝　＄+{数字:初期値}の省略形。

# テスト
「f」と入力すると候補で出てきます。
右側出てくるスニペット名で確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3686263/b10405b9-3c46-418b-ffdb-9a1ad31c124c.png)

enterでスニペットが入力されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3686263/f52aee80-d643-72fd-0dc7-eb76e9edce20.png)

これは便利😀

# 自分が登録しているスニペット

```php:php.json
{
	"foreach": {
		"prefix": "f",
		"body": [
		  "foreach($${1:} as $${2:}){",
		  "}",
		],
	  },

	"key=>": { //foreachにkeyを足す
	  "prefix": "k",
	  "body": [
		"key =>",
	  ],
	},

	"dd=>": {
		"prefix": "d",
		"body": [
		  "dd(${1:});",
		],
	  },
  
	"for=>": {
		"prefix": "fo",
		"body": [
		  "for($$i; $$i<${1:}; $$i++){",
		  "}",
		],
	  },
  
	"if=>": {
		"prefix": "i",
		"body": [
		  "if(${1:})",
		],
	  },

	  "return=>": {
		"prefix": "r",
		"body": [
		  "return ",
		],
	  },

	  "arrrow=>": {
		"prefix": "a",
		"body": [
		  "->",
		],
	  },
  }
```

あと便利なのがbladeのスニペットです。
「新しいスニペット」でblade.phpと入力すると
bladeで適用されるスニペットを作成できます。

```php:blade.php.code-snippets
{
	"@if=>": {
		"prefix": "i",
		"body": [
			"@if(${1:})",
			"@endif",
		],
	},

	"@elseif=>": {
		"prefix": "e",
		"body": [
			"@elseif(${1:})",
		],
	},

	"@foreach=>": {
		"prefix": "f",
		"body": [
			"@foreach(${1:} as $ )",
			"@endforeach",
		],
	},

	"key=>": { //foreachにkeyを足す
	  "prefix": "k",
	  "body": [
		"key =>",
	  ],
	},
}
```
一回登録してしまえばずっと便利に使えるオススメ機能です。
スニペット登録で是非快適なコーディングライフを☺
バックエンドエンジニア、異世界転生してフロントエンドエンジニアになる！第二話「作戦」

バックエンドやってる期間が長くて「まあ基本こんなAPIあればフロントどうにかなるやろ？」という第六感(？？？)が働いてバックエンドのコードはスッラスラ書けるけど、フロントエンドは実は全部デザインが反映されたコードにAPIだったりtRPCを後でぶち込むくらいのことしかやったことがないので、vimを前に唖然としてしまう。
それもそのはず、サイトが取るべき大体のノード構造は把握できるけどどうすれば上手く見せられるかが謎。そして、サイトの見た目と挙動を同時に考えて一気にフロントを実装するとなると流石に俺の浮世離れしたスーパー脳みそでもどうにもならない。
### ※エンジニアの活きる知恵:
他の人に話すときも、自分でコードを書くときも基本的に自分は「圧倒的な才能と知能を持っている」って考えよう。異世界転生してきたチート主人公に自分を重ねて、それでもブチ当たる壁だと考えれば、自分のやっていることが常人には出来ないことだということに気づく。
実際、そうである。みんなは地獄から這い上がってきた鬼畜(狂人としても良い。実際、私を含めた経営陣は皆バケモノとしか言いようが無い)を上司に抱えているので、普通に取り掛かろうとしたら絶望する内容であるのは決まってる。
そこでみんなが正気を保ちながら生きるためには、うまく仕事をこなす為の工夫をすることが必要になる。私達が振った仕事をそのままコードにするなんて到底不可能なのである。
プログラム書き始めたばかりの社員にもアドバイスしたのでみんなにもアドバイスすると、「コード書けないな、と思ったらまずなんのコードを書けばいいかわかるまでペンを握って振られた仕事を処理可能なステップに分けて見ると良い」。またさらに言うと、僕の机の隣に置いてある本を何でもいいから手にとって見てパーッと見てみたり、公式のドキュメンテーションをラテでも飲みながらゆっくり読んでみると良い。そこに答えはないけど、答えにたどり着くヒントはどこかに隠されていることが多い。
### ここに書いた知恵を活かすと、まずすべきなのは　「フロントエンドをどうするか決める」ことである。
ここに関しては天才デザイナーマンがfigmaを丁寧に作ってくれてるので、どうやるかはさておき終わったことにする。詳しくは彼に聞いてくれ。俺は一生figmaイジるのに時間を使いたくない。
### 次は「フロントエンドに関する決定に基づいて適当にノード構造をはっきりさせておく」ことだ。
IDEはエラーを吐きまくるけど、コンポーネントなども後で実装するつもりでとりあえず「こんな感じのコンポーネント入れるだろうな」というガバガバの想定でいいし、もはやインポート先も架空のものでいいのでとりあえず書いておく。こうしてると、とりあえずコンポーネントで何を実装しないといけないのかがハッキリわかるし、そこになんのロジックを組むかもだいたいこの時点でよく分かってくる。無論ここでUIデザインを参考にして「多分ここらへんにdiv置いて箱みたいなの書くんだろうな」
### 次は「とりあえず今の時点で分かってる挙動やロジックなどをデザイン無視で実装」する。
デザインなんてのは正直後付でいいものだ。テストを回すときも結局挙動やロジックがしっかりしてればエラー出ないし、実装環境で何かがバグることも少なぐなる。
### 最後に「見た目を良くする」である。
この作業は基本、マジでダルい。というのも私はあくまでエンジニアであり、顧客に便利なサービスを提供したいという動機はあってもその見た目がいいとかどうでもいいのである。一体誰が見た目の良さを必要としているのか知らないけど、流石に阿部寛みたいな見た目のプロダクトを顧客に納品したくはない。ただし、逆に何が良いのかもわからないのでかなり行き詰まると思う。逆にこういうの向いているフロントエンドのことやりたがる人に任せればいいと思います。
とりあえずこんな感じに分けて、今は「ノード構造をはっきりさせておく」作業に取り掛かろうかな。今日はそれを終わらせることをゴールにしよう
### ※エンジニアの活きる知恵:
毎日ダラダラコード書いていてもつまらないので、「今日はここまでやる」というのを決めてそれを時間内にクリアできるかどうかを考えてからタスクに取り組むといい。「とりあえずやればいっか」ではなんとなく退勤時に虚無感をすごい感じることになるので、あまりおすすめではない。
毎日「今日はオフィスに行ってこれを終わらせるんだ！」とはっきりとオフィスに来る自分の動機づけがしっかりしていると、退勤時がめちゃくちゃ気持がいい。というか、僕はその達成感があまりに好きなのでプライベートそっちのけで友達との予定をブッチしても目標達成に動く。逆にその達成感を感じてしまうと「今日は終わり！！！」ってなるのでそこからは働かないし、もう一つ目標を設定してそれを達成できるほどの時間がないと判断したらすぐ帰ってしまうことが多い。毎日働いていく中で自分がどれくらいの作業を一日でこなせるのか、現実的な目標設定はどんな感じになるかを（もはや感覚ベースでいいので）掴んでいこう。プロジェクトマネジメントやプリセールスに必須な「第六感」だよね。 プロジェクトの見積もりの席にいても、紙さえあれば大体自分一人で実装して何がどれくらいで終わるか、チームに任せたら自分がやるよりもどれくらいの時間がかかるかが分かってくるのでとても仕事が楽になる。
バックエンドエンジニア、異世界転生してフロントエンドエンジニアになる！第一話「React気持ち悪い！」

変数がページの形態と連携する(useState)という、一見スマートに見えるReactの仕様。しかしページに複数の形態をもたせることで、二つの仕様について「二つのページに分けるべきなのか」「二つの形態を持った一つのページで良いのか」という疑問が発生する。これはファイルストラクチャ（フォルダとファイルを使った情報格納）に基づいてページが生成されるというReactの特徴に真っ向から歯向かうような設計である。更に、この設計が故にページに表示される内容に関わる変数は「変数」ではなく「固定数」であり、その内容を変えるためにはページを完全に再生成する関数を使用しなければならない、というギミックじみた仕様になっている。
Reactのフレームワーク外に関する処理（ビデオプレイヤーなど）やDOMエレメントに対する働きは専用のuseEffectやuseRefという関数や変数（というかタグ？アトリビュート？）を使用して行うことにも違和感がある。というのも、もしReactがフレームワークなのであれば、フレームワーク外の処理を行うことは極めて稀なことであるべきだ。JSX記法が主流になりつつある今、純粋なReactのフレームワークの外にあるものに対してはReactフレームワーク内にそれと連携するインターフェイスくらい準備していてもいいと思うのだが、全くその方向で考えずにuseEffectやuseRefという「フレームワークからエスケープしてコードを実行する」方向性でuseEventEffectなどを実装し始めているのを見ていると設計思想を疑わざるを得ない。
こういった特徴を持ちながらもドキュメンテーションでは「従来のJavascriptとは違い、宣言型プログラミングが可能」と謳っているのがさらなる混乱を招く。上にも書いたが、ページに形態が存在し、それがユーザーの入力またはサーバー側のロジックによって変わる、というのはまさしくそのページを使用することによるプログラム全体への「副作用」があるということになり、宣言型プログラミングから逸脱することになる。確かにuseStateやuseEffect, useRefを使わなければほぼ宣言型になるのだろうが、現実的にそれが不可能（トグルを一つ加えただけでuseStateを使わないといけなくなる）のは設計としてどうなんだろうか。
例えば、仮に「ダークモードとライトモードを実装する」となった時に、トグルボタンとuseStateのような実装をせずに、クッキーにダークモードまたはライトモードの情報を書き加え、ページをリロードし、クッキーの情報をもとにサイトが生成されれば良いのではないか。またそれをもっとreactiveにしたいのであれば、別に宣言型プログラミングのパラダイムから逸脱してuseStateなど使わずにページに対して必要な変更をまとめて加える関数を呼び出すボタンとして実装すれば良い。
ということで、あまりに設計として納得が行かないのでフロントエンドの開発をするにあたって余計なステートを加えないように注意して行きたいと思う。
今年読んだ本をエクセルのフォーム機能を使って登録する

今年読んだ本をエクセルのフォーム機能を使って登録するマクロ(VBA)を作りました。

****①ユーザーフォーム****
![Userform.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1055346/d1b0e0a9-39d8-35f2-bda3-b2d5e2e1bfe8.jpeg)

***VBAのソースコード***

```
Option Explicit
'読書管理VBA
'新規作成 2024/2/13
'作成者  乃木坂好きのITエンジニア


Private Sub CommandButton1_Click()
    '最終行の変数定義、最終行の取得
    Dim N As Integer
    N = Cells(Rows.Count, 2).End(xlUp).Row
    '本のタイトルと作者名の変数定義(必須)
    Dim title, name As String
    '価格の変数定義(BookOFF、Amazon等クーポンで購入したものもあるため、データ型をStringにしている。任意)
    Dim price As String
    '書籍評価(任意)
    Dim aval As String
    
    'ワークブック、ワークシートの定義
    Dim wb As Workbook
    Dim ws As Worksheet
    Set wb = ThisWorkbook
    Set ws = Worksheets("書籍")
    'エラー配列
    Dim Array1(1) As Variant
    'エラーメッセージの定義
    Dim msg1, msg2 As String
    msg1 = "本のタイトルが入力されていません"
    msg2 = "本の作者名が入力されていません"
    Dim emsg1 As String
    emsg1 = ""
    '配列の要素取り出し先変数の定義
    Dim Value As Variant
    
    Dim i As Integer
    i = 0
    Dim j As Integer
    j = 0
    '配列を初期化
    Erase Array1
    
    '本のタイトルの未入力チェック
    title = TextBox1.Value
    If title = "" Then
        
        Array1(0) = msg1
    Else
        Array1(0) = "OK"
    End If
    '作者名の未入力チェック
    name = TextBox2.Value
    If name = "" Then
        Array1(1) = msg2
    Else
        Array1(1) = "OK"
    End If
    
    '配列の要素を取り出し、未入力項目をチェック
    For Each Value In Array1
        If Value = "OK" Then
            j = j + 1
        Else
            If i = 0 Then
                emsg1 = emsg1 + msg1 + vbCrLf
            ElseIf i = 1 Then
                emsg1 = emsg1 + msg2 + vbCrLf
            End If
        End If
        i = i + 1
    Next
    
    'エラーメッセージがNULLの時、セルに書き込む。エラーメッセージがある場合は、メッセージボックスにエラー内容を表示
    If emsg1 = "" Then
        Cells(N + 1, 2) = TextBox1.Value
        Cells(N + 1, 3) = TextBox2.Value
        Cells(N + 1, 4) = TextBox3.Value
        Cells(N + 1, 5) = TextBox4.Value
        TextBox1.Value = ""
        TextBox2.Value = ""
        TextBox3.Value = ""
        TextBox4.Value = ""
    Else
        MsgBox emsg1
        
    End If

End Sub
```

出力結果
![output.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1055346/da239e8a-7ef5-a69f-9aa7-cfc9cff91486.jpeg)


Qiitaで初めてVBAの記事を投稿しました。
おすすめ「エラーが怖くなくなる本」

# はじめに

[コードが動かないので帰れません！ 新人プログラマーのためのエラーが怖くなくなる本](https://www.amazon.co.jp/%E3%82%B3%E3%83%BC%E3%83%89%E3%81%8C%E5%8B%95%E3%81%8B%E3%81%AA%E3%81%84%E3%81%AE%E3%81%A7%E5%B8%B0%E3%82%8C%E3%81%BE%E3%81%9B%E3%82%93%EF%BC%81-%E6%96%B0%E4%BA%BA%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9E%E3%83%BC%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%8C%E6%80%96%E3%81%8F%E3%81%AA%E3%81%8F%E3%81%AA%E3%82%8B%E6%9C%AC-%E6%A1%9C%E5%BA%AD-%E6%B4%8B%E4%B9%8B-ebook/dp/B0CCD7S9VM/ref=tmm_kin_swatch_0?_encoding=UTF8&qid=&sr=)

買いました！読みました！

読みやすい本でした。ということでオススメポイントを書いていきます。
<br>
# <font color="Gainsboro">ポイント①「エラーの頻出英単語リスト」</font>

導入では、簡単なJSエラーを例に「エラーを読むメリット」を教えてくれます。

いいなと思ったのは、

<font color="LightGreen" size=3>「エラーに登場しやすい単語リスト」</font>と<font color="LightGreen" size=3>「プログラミング特有の意味を持つ単語リスト」</font>

それぞれ、<font color= "LightGreen">13項目</font>と<font color="LightGreen">10項目</font>あるのですが、<font color="LightPink">どれも重要度が高い！！</font>

「`valid` ⇔ `invalid`」など、対義語は一緒に紹介されているのも👍。
体系的な理解ができます。

数も多くないので、覚えるのもすぐです。
<br>
## ポイント②「エラーを構成する要素は３つだけ」

<font color="LightGreen">「エラーを構成するのは『〇〇』と『✕✕』と『△△』」</font>

と、説明するの、意外と難しい。

この本はその説明をしてくれます。
<br>
特に初学者の<font color="LightGreen">「エラーという得体のしれないもの」</font>という苦手意識をなくすにはピッタリです。
<br>
## ポイント③「エラーとの付き合い方ベストプラクティス」

デバッグの心得から、ググり方、<font color="LightGreen">Githubを使ったデバッグ</font>など。

先輩方の経験の積み重ねから生まれた知識は、なかなか知ることのできない貴重な知識です。

中級者以上の方も、改めて「そうだよな」と省みることができると思います。
<br>
## ポイント④「実例写真を用いたデバッグ」

<font color="LightGreen">「ブレークポイント」「ステップ実行」「条件付きブレークポイント」「変数の監視」</font>・・・

これらのデバッグ方法を、<font color="LightPink">実例写真付き</font>・ステップバイステップでわかりやすく解説してくれます。

辞書的にも使える！
<br>
## ポイント⑤「そもそもエラーを起こさないために」

もちろん、エラーを起こさないためのコーディング方法も教えてくれます。

近年、関数型プログラミングが人気になってきた理由でもあり、一読の価値ありです。
<br>
# おわりに

[コードが動かないので帰れません！ 新人プログラマーのためのエラーが怖くなくなる本](https://www.amazon.co.jp/%E3%82%B3%E3%83%BC%E3%83%89%E3%81%8C%E5%8B%95%E3%81%8B%E3%81%AA%E3%81%84%E3%81%AE%E3%81%A7%E5%B8%B0%E3%82%8C%E3%81%BE%E3%81%9B%E3%82%93%EF%BC%81-%E6%96%B0%E4%BA%BA%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9E%E3%83%BC%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%8C%E6%80%96%E3%81%8F%E3%81%AA%E3%81%8F%E3%81%AA%E3%82%8B%E6%9C%AC-%E6%A1%9C%E5%BA%AD-%E6%B4%8B%E4%B9%8B-ebook/dp/B0CCD7S9VM/ref=tmm_kin_swatch_0?_encoding=UTF8&qid=&sr=)

改めて、オススメです。

※この本が売れても私に利益はありません。念のため。
EBSのスナップショット削除のコマンド

### はじめに

CI/CDでEC2を自動デプロイ時にEBSのスナップショットが作成されるのですが、ケアしないとこれが溜まり続けてしまいます。
記事作成時点では東京リージョンで0.05USD/GB*1ヶ月です。
（料金はこちら：https://aws.amazon.com/jp/ebs/pricing/）

例えば20GBのEBSを使用している場合は1つのスナップショットあたり毎月1USDかかります。
開発環境でdevelopにPRがマージされるごとにデプロイされると毎日のようにこれが加算されていきます。
ケアしないと年間でかなりの額になります。

### 前提：EBSスナップショットとAMI

EC2インスタンス作成時にはAMIが作成されます。
AMIはOSやアプリを記録したテンプレートで、インスタンス起動時にこのテンプレートがEBSにコピーされます。
さらに、AMIにはEBSのスナップショットも含まれています。
そのため、EBSスナップショットを削除する際には関連するAMIを先に削除しておかなければエラーになります。
一方、AMIだけ削除してもEBSは削除してくれないので注意が必要です。
また、AMI自体にはコストはかからないのですがEBSスナップショットの方にコストがかかります。
この辺りの料金体系は複雑ですね。
AMIとEBSの関係についてはこちらの記事がわかりやすかったです：[AMIとEBS、スナップショットの関係がよくわかっていなかった話](https://endok.hatenablog.com/entry/2014/06/15/193137)


### 削除スクリプト

諸所の要望に応えるため下記の仕様にしました。

- AMIと対応するEBSスナップショットを削除します
- 削除するAMI名のプリフィックスが含まれるグループを指定できます(("")の場合はすべてが対象)
- 指定した数だけグループ内で最新のAMIを残すことができます
- aws-vaultを使用しています

```sh
#!/bin/bash

# profileを指定
PROFILE="dev" # aws-vaultで指定するprofile
# dry-runを指定。テストが終わったらコメントアウトする
DRY_RUN="--dry-run"
# 削除するAMI名のプリフィックスが含まれるグループを指定(""の場合はすべて対象)
GROUPS=("aaa" "bbb")
# 保持する数量
NUMBER_TO_KEEP=2

# 各グループに対してループ
for group in "${GROUPS[@]}"
do
  echo "+++Deleting $group"
  # グループ名を含むAMI IDとスナップショットIDを取得し、作成日時でソート
  sorted_ids=$(aws-vault exec $PROFILE -- aws ec2 describe-images --filters Name=tag:Name,Values="$group*" --query "Images[].[CreationDate,ImageId,BlockDeviceMappings[0].Ebs.SnapshotId,Name]" --output text | sort -k1)
  # 規定数以下の場合、削除しない
  if [ $(echo "$sorted_ids" | wc -l) -le $NUMBER_TO_KEEP ]
  then
    echo "Nothing to delete for $group"
    continue
  fi

  # 総数を取得
  id_count=$(echo "$sorted_ids" | wc -l)
  echo "id_count: $id_count"

  # 最新の残す数を除いた数を取得
  delete_count=$((id_count-$NUMBER_TO_KEEP))
  echo "delete_count: $delete_count"

  # 最新の残す数を除くすべてのスナップショットIDを取得
  delete_ids=$(echo "$sorted_ids" | awk '{print $2,$3,$4 }' | head -n $delete_count)

  # 古いAMIとスナップショットを削除
  # delete_idsを一行ずつ読み込んでループ
  echo "$delete_ids" | while read ids
  do
    # 分かりやすいように区切りを表示
    echo "Deleting $(echo $ids | awk '{print $3}')-------------------"
    # AMI削除
    ami_id=$(echo $ids | awk '{print $1}')
    echo "Deleting $ami_id"
    aws-vault exec $PROFILE -- aws ec2 deregister-image --image-id $ami_id $DRY_RUN

    # スナップショット削除
    snapshot_id=$(echo $ids | awk '{print $2}')
    echo "Deleting $snapshot_id"
    aws-vault exec $PROFILE -- aws ec2 delete-snapshot --snapshot-id $snapshot_id $DRY_RUN
  done
done
```

### 補足

溜まってしまったEBSのスナップショットは上記のスクリプトで一掃できますが、溜まらないようにする仕組みがあればコストの無駄がなくなります。
例えば削除スクリプトを定期実行する、デプロイ時に古いスナップショットを削除するなどがあります。
また、Amazon Data Lifecycle Managerというサービスがあり、古いバックアップを自動で削除できます。
[Amazon Data Lifecycle Manager](https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/snapshot-lifecycle.html)

### おわりに

EBSスナップショットの概要と削除スクリプトをまとめました。
普段からコストエクスプローラーをチェックして不要なコストがかからないように気をつけたいですね。
Assume Roleとは 学習記録

Assume Role
通常はアクセスできないAWSリソースへのアクセスに使用できる一時的なセキュリティ認証情報のセットを取得する権利を付与

わかりそうでわからないため、色々整理したく

ポリシーとは
以下の基本となIAMポリシーの要素をJSON形式で記述またはビジュアルで、アクセス制御を実現する
|No|IAMポリシー要素 
|:--:|:--:|
|1|誰が|
|2|どのAWSサービスへ|
|3|どんな操作を|
|4|許可する/許可しない
|5|どんなとき

<br></br>

|No|ポリシーのアタッチ先 
|:--:|:--:|
|1|ユーザー|
|2|グループ|
|3|ロール|

|No|各種のアイデンティティベースのポリシー|説明| 
|:--:|:--:|:--:|
|1|AWS マネージドポリシー|AWS 管理ポリシーは、ユーザー、グループおよびロールに適切な権限を割り当てるのに適している。ただし、AWS 管理ポリシーで定義されているアクセス許可は変更できない。アタッチ先は、|
|2|カスタマー管理ポリシー|これらのカスタマー管理ポリシーは、特定の目的に合わせてポリシーを作成し、何度でも変更および更新が可能です。|
|3|インラインポリシー|カスタマーポリシーとほぼ同じであるが、大きな違いとして使いまわしは不可|

```
#アイデンティティベース
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Statement1",
            "Effect": "Allow",
            "Action": [
                "s3:List*",
                "s3:Get*"
            ],
            "Resource": "arn:aws:s3:::xxxxxxxxx/*"
        }
    ]
}
```


```
#リソースベースポリシー
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Statement1",
            "Effect": "Allow",
            "Action": [
                "s3:List*",
                "s3:Get*"
            ],
            "Resource": "arn:aws:s3:::xxxxxxxxx/*"
        }
    ]
}
```
```
#リソースベースポリシー
#信頼されたエンティティ
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": {
                "Service": "ec2.amazonaws.com"
            },
            "Action": "sts:AssumeRole"
        }
    ]
}
```
違いについて
#アイデンティティベース
IAM ユーザー、グループ、ロールにアタッチするポリシー
どのAWSサービスへ、どんな動作を、許可する/許可しないをポリシーに定義する

#リソースベースポリシー
誰が、どのAWSサービスへ、どんな操作を許可する/許可しないをポリシーに定義する
また、ロールにポリシーをアタッチ後にAWSサービスへロールをアタッチする必要がある

#信頼されたエンティティ
AWSリソースにアクションを要求できるIAMユーザー、ロール、フェデレーションユーザー、またはアプリケーションを指し、「誰が」という要素になり、Principalは、リソースまたはAWSアカウントが対象となる

JSONで見ると、Principalは、ec2.amazonaws.comになり、「誰が」を指す。
本題のAssume Roleのsts:AssumeRoleがアクションとして認可されている。
つまり、エンティティのEC2がSTSのAssumeRoleを使用して、認可されているリソースベースポリシーのポリシーを使用していることになります。
認可されていますが、認証されていないため、sts:AssumeRoleを使用する必要があります

stsとは
一時的な認証情報を生成するAWSサービスです
EC2に一時的な認証情報を生成することで、認可された操作を実行できます

備考
認証・認可を必要とするエンティティ側(アクセスする側)にロールを作成し、ポリシーをアタッチするだけで使用できることがわかりました
そのため、アカウントIDなどをAssumeroleとして指定することがあるため、違和感は感じましたがパスワード、ワンタイムパスワード等で認証後にアカウントIDを確認できるため、セキュリティ的に問題ないと個人的に整理できました
AWSサービスの裏側が少し気になります
Flutter - ChoiceChipを選択しても切り替わらない問題の解決方法

Flutterでアプリ開発中，この問題に直面して調べていたのですが，
日本語で解決方法を載せている方が見当たらなかったため作成しました．
## 問題
showModalBottomSheet上に配置したChoiceChipを選択しても更新されない．
showModalBottomSheetを動かすとChoiceChipが更新されるため，変数の代入が問題ではない．

![example_1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3709560/87614400-f9f5-027b-021e-b532cc038908.gif)

## 解決方法
ChoiceChipをStatefulBuilderで囲むと解決します．
### Code
```diff:example.dart
...
  Future<void> showBottomSheet(BuildContext context) {
    int choiceIndex = 0;
    return showModalBottomSheet<dynamic>(
      context: context,
      builder: (BuildContext context) {
        return SizedBox(
          height: 844,
          child: Column(
            children: [
+             StatefulBuilder(
+               builder: (BuildContext context, StateSetter setState) {
+                 return 
                  Container(
                    padding: const EdgeInsets.only(top: 20),
                    child: Wrap(
                      spacing: 20,
                      children: [
                        ChoiceChip(
                          label: const Text("選択 1"),
                          selected: choiceIndex == 0,
                          backgroundColor: Colors.grey[700],
                          selectedColor: Colors.white,
                          onSelected: (_) {
                            setState(() {
                              choiceIndex = 0;
                            });
                          },
                        ),
                        ChoiceChip(
                          label: const Text("選択 2"),
                          selected: choiceIndex == 1,
                          backgroundColor: Colors.grey[700],
                          selectedColor: Colors.white,
                          onSelected: (_) {
                            setState(() {
                              choiceIndex = 1;
                            });
                          },
                        ),
                      ],
                    ),
                  );
+               },
+             ),
              SizedBox(
                  height: 300,
                  child: CupertinoDatePicker(
                    use24hFormat: true,
                    initialDateTime: DateTime.now(),
                    mode: CupertinoDatePickerMode.time,
                    onDateTimeChanged: (time) {},
                  )),
            ],
          ),
        );
      },
    );
  }
...
```
#### 動作例
![example_2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3709560/5eea243d-c886-eb4b-164c-726e5800fbfc.gif)

## 参考
[解決した時のStack OverFlow](https://stackoverflow.com/questions/76885867/)
opensslに依存したRustプロジェクトを`docker init`で生成したDockerfileでbuildできない

# 環境
* M1 Mac
* Docker Version: 25.0.2
# 問題
`openssl`に依存しているRustのプロジェクトのDocker Imageを作成しようとしてた。　　
`docker init`後に`docker build　--platform linux/amd64 .`したら以下のようなエラーがでた。
```terminal
error:failed to run custom build command for `openssl-sys v0.9.98`
```
# 解決策
`cargo build`をしている行の前で以下の命令を走らせると解決した
```dockerfile
RUN apk update && apk add alpine-sdk
```
Bluesky 企業アカウント予備知識とDeveloper適度なリンク

Blueskyのサービス登録が招待制からオープンになりました。

https://bsky.app/

です。

日本語資料は　

https://scrapbox.io/Bluesky/

などから辿ることができます。

企業アカウントが登録する際の注意点など。

## アカウントとアプリとサーバ

bsky.app で見えているものは公式アプリ的な位置づけです。
サーバサイドは登録時に選択することができ、公式から個人などで建てた非公式サーバに登録、接続することもできます。

bsky.app 以外のBlueskyクライアントやサイトなどでも同じアカウントで利用することができます。アプリ別のパスワードが発行できるので、そちらを使うことをお勧めします。

サーバ間は現在未接続なので個別の登録が必要です。同じ管理サーバを利用していれば共通IDで利用できる形になるのかもしれません。

## ハンドル
Blueskyのアカウントは2種類あり、恒久的に利用されるのはw3cのdidで変更できません。見える形のものはハンドルで変更可能です。

ハンドルは基本的にサーバ名のサブドメインのような形で割り振られますが、自由に割り振ることもできます。

現在の bsky.app のサーバのハンドルは bsky.social がつく形になっています。

将来的には複数サーバに分散される形になるので、bsky.social のアカウントをおさえるのはそれほど重要なことではないのかもしれません。必要ならなりすまし防止程度に取っておくこともできますが、有名アカウントはあらかじめ運営側で管理する形になっているので該当企業なら連絡してみてもよいでしょう。

## なりすまし防止

個人ならこのままでもよいのですが、ドメインで企業であるとわかる形にするにはドメイン認証を利用して企業ドメインまたはサブドメインに変更することをおすすめします。サブドメインを利用することで複数アカウントをわかりやすくすることもできます。

公開済みのサイトからリンクを張ることも初段のなりすまし防止には必要です。

## ハンドルの変更

BlueskyのWeb画面から設定画面を開くと「高度な設定」の中に「ハンドルを変更」があります。

「自分のドメインを持っています」を開きます。

@ の後ろにドメイン名、またはサーバ名を入力します。

- DNS Panel
- No DNS Panel

2つの選択肢があります。DNSを触れる場合はDNS Panel、触れない場合は No DNS Panel でWebサイトに認証情報を追加する形になります。認証に使うdidはBlueskyのIDです。公開しても問題ありません。

### DNS Panel ドメイン認証
アカウントごとに所有するドメインから自由に振ることができます。
複数アカウントを想定している場合はサブドメインなどで運用します。
国際化ドメイン名には対応していないかもしれません。

使いたいドメインの下に _atproto という名前を追加し、TXT レコードに表示されているdidを記述します。

例:
Host:
_atproto
Type:
TXT
Value:
did=did:plc:6u57tson3qso6kedjywa4mie

_atproto.okome.dev.jp の TXT レコードに　"did=did:plc:6u57tson3qso6kedjywa4mie" を追加します。Aレコードなどはなくていいです。

DNSに追加後、Verify DNS Record で確認します。変更前に押すといろいろ遅れるのでやめたほうがいいです。失敗した場合はキャッシュ保持時間経過後に再度確認してみるのがよいかもしれません。

### No DND Panel Webサーバに登録する

Webサーバの場合も基本的に同じで指定したURLの場所にdidを記入したファイルを配置します。
サブドメイン/サーバ名を利用したい場合はサブドメインのURLでアクセスできるWebサーバが必要です。

# AT Protocol

BlueskyのAPIは AT Protocol という形で公開されています。

https://atproto.com
https://docs.bsky.app

atproto.com が以前からある方で、 docs.bsky.app が新しい方かな GitHub でもコードが公開されています。
[Linux]コマンド等の絶対パスを調べる方法

## 要　旨
Linuxにおいてコマンド等の絶対パスを調べる方法について記述します。
## 実施要領
次のように調べることができる。
```LINUX
which [調べたいコマンド等]
```
例を示す。
```linux
which screen
```
すると以下のように返ってくる。
```linux
/usr/bin/screen
```
## 結　言
今回は、Linuxにおいてコマンド等の絶対パスを調べる方法について記述しました。
2024/2/13主にITとかセキュリティの記事

電動歯ブラシがサイバー攻撃？ 誤報に至った経緯とは(2/11)
https://news.mynavi.jp/techplus/article/20240211-2880672/

出会い系アプリやロマンス詐欺に注意、これら脅威から身を守るには(2/11)
https://news.mynavi.jp/techplus/article/20240211-2879351/

子供達の72%がサイバー脅威に遭遇、求められる対策は(2/11)
https://news.mynavi.jp/techplus/article/20240211-2870318/

マルウェア「Raspberry Robin」が進化、USBメモリからDiscordで拡散(2/11)
https://news.mynavi.jp/techplus/article/20240211-2880015/

昔はイケイケだった、あの会社。30周年の今は(2/11)
https://www.gizmodo.jp/2024/02/yahoo-30th-birthday.html
https://news.livedoor.com/article/detail/25860290/
https://news.yahoo.co.jp/articles/6828086b311b9ec60116617a5f53f1a545414877

Eメールはもうオワコンなのか？(2/11)
https://agora-web.jp/archives/240209215044.html

初心者でもCVE番号を取れるかもしれないガイド(2/11)
https://qiita.com/yousukezan/items/7d48b7e3f43def57c407

FortiOSの脆弱性 CVE-2024-21762 についてまとめてみた(2/11)
https://piyolog.hatenadiary.jp/entry/2024/02/11/024613

多くの日本人がAIを学ぶことに関心がない理由(2/9)
https://dime.jp/genre/1731936/

暗号資産の「ラグプル」とは【基礎知識】(2/11)
https://www.coindeskjapan.com/218020/

北朝鮮が関与したとみられる58件のサイバー攻撃を専門家が調査　被害額は約30億ドルに(2/11)
https://www.arabnews.jp/article/business/article_111694/

約8割が「また利用したい」と回答も…「オンライン診療」が日本で一向に普及しないワケ(2/11)
https://news.nicovideo.jp/watch/nw14332913

第45回：小沢コージが聞いた大規模改良型「ロードスター」で「990S」廃止の真相　敵はハッカーだった！(2/9)
https://www.webcg.net/articles/-/49724

米議会などの圧力で同国国内から中国製電池を排除、業界からは批判の声(2/11)
https://nordot.app/1129337925483397964

米軍を蝕む2つのアキレス腱、造船能力で中国に負け、肥満で兵士の人材不足(2/11)
https://news.yahoo.co.jp/articles/54426d77ccbaa47f50b665a5a29817986611aed4

チェコ外相、欧州の結束訴え　訪日前にサイバー協力期待(2/11)
https://news.yahoo.co.jp/articles/646a888dbe43c87d0e7d4c166b671d759836484b
SeleniumでChrome driverを立ち上げた際にすぐにクラッシュしてしまった時の対処法

# はじめに
こんばんは、ダンです。
以前乃木坂46のライブを自動で応募するシステムを作ったのですが、
記事URL：https://qiita.com/dandan5656/items/d1fe82d2d7594ebb5fa1
その際にSeleniumでChrome driverを立ち上げた際にすぐにクラッシュしてしまい、3-4時間ほど躓いてしまったので、対処法を共有したいと思います。

# 状況
スクレイピングに必要なSeleniumとブラウザを立ち上げるためにChrome driverをインストールし、
```python
pip3 install selenium
brew install chromedriver
```
ブラウザを立ち上げました。
```python
from selenium import webdriver
browser = webdriver.Chrome()
```
その際にターミナルにエラー分は表示されないのですが、Chromeがすぐに閉じてしまったり、クラッシュしたりしてしまいました。

# 解決法
Chrome Driverを通すためのパスが正しく通っていなかったため、クラッシュしていたみたいです。
以下のように直接ChromeDriverのパスを直接指定すると解決しました。
```python
from selenium import webdriver
from selenium.webdriver.chrome.service import Service as ChromeService

# ChromeDriverのパスを指定
chrome_driver_path = '/usr/local/bin/chromedriver'

# ChromeDriverの初期化（Serviceオブジェクトを使用）
service = ChromeService(executable_path=chrome_driver_path)
browser = webdriver.Chrome(service=service)

# ウェブページを開くなどの操作を追加

# ブラウザを閉じる
browser.quit()
```

# まとめ
ChromeDriverへのパスが間違っていて、Seleniumが正しくブラウザを制御できず、エラーが発生してクラッシュしていたと考察します。
パスを正しく設定することで、Seleniumが必要なファイルにアクセスできるようになり、ブラウザの制御が正常に行われるようになりました！
ネットで調べても全然解決法が出て来ず苦戦してしまっていたので、誰かの役に立てば幸いです！
スリープを多用するPCでVirtualBox上のCentOS7の時計がズレまくる時の対策

chronyを使用する方法。
まずは``timedatectl``コマンドでNTP syncronizedのyes/noを確認する。
```
$ timedatectl
      Local time: 月 2024-02-12 18:16:48 JST
  Universal time: 月 2024-02-12 09:16:48 UTC
        RTC time: 月 2024-02-12 09:16:48
       Time zone: Asia/Tokyo (JST, +0900)
     NTP enabled: yes
NTP synchronized: no　←コイツ！！
 RTC in local TZ: no
      DST active: n/a
```
noになっているのでchronyでyesにする必要がある。
``systemctl start chronyd``とコマンド入力するとパスワードを求められるので入力する。
```
==== AUTHENTICATING FOR org.freedesktop.systemd1.manage-units ===
Authentication is required to manage system services or units.
Authenticating as: root
Password:
==== AUTHENTICATION COMPLETE ===
```
再起動しないとyesにならないので``systemctl restart chronyd``と入力する。再度パスを求められる。
chronyを再起動したら``timedatectl``で時刻とNTP synchronizedのyesを確認して
#
お終いと思ったが時刻調整の方式がとても遅い方式なのでうんたらかんたら…。
というわけで``/etc/chrony.conf``をviで開いて編集する必要がある。
```
# Use public servers from the pool.ntp.org project.
# Please consider joining the pool (http://www.pool.ntp.org/join.html).
server 0.centos.pool.ntp.org iburst
server 1.centos.pool.ntp.org iburst
server 2.centos.pool.ntp.org iburst
server 3.centos.pool.ntp.org iburst

# Record the rate at which the system clock gains/losses time.
driftfile /var/lib/chrony/drift

# Allow the system clock to be stepped in the first three updates
# if its offset is larger than 1 second.
makestep 1.0 3　←コレ
        （略）
```
``makestep 1.0 3``を``makestep 1.0 -1``に変更すれば時刻調整がstepという早い調整方法にて行われるようになる。
<strong>ただし急激な時間変動によりアプリのエラーやログの出力がバグることがあるので注意したほうが良いとのこと。</strong>
TelegramBotでbotterとしてのポテンシャルを高めたい

# 趣旨
テレグラムでサーバーから通知があれば便利だと思ったので最も基本的なテレグラムBotの構築方法を紹介します。
応用すれば色々使い道はあると思うので私としては備忘録として再利用するつもりです。

今回の例ではPythonからテレグラムの自分のアカウントに対してメッセージを送るだけですが、自分のアカウントからテレグラムBotにメッセージを送って、そのメッセージの内容に応じてPythonプログラムを起動させることも多分簡単にできます。

# ステップ1： Telegramボットを作成する
Telegramアプリで@BotFatherを検索し、チャットを開始します。
新しいボットを作成する：BotFatherに/newbotコマンドを送信し、指示に従います。
ボットの名前とユーザーネームを選択する必要があります。
ボットの作成後、BotFatherがAPIトークンを提供してくれます。

# ステップ2： チャットIDを見つける
Telegramでボットのユーザーネームを検索し、チャットを開始します。
ボットにメッセージを送信し、ブラウザで`https://api.telegram.org/bot<YourBOTToken>/getUpdates`にアクセスしてください。
ただし<YourBOTToken>の部分をボットのAPIトークンに置き換えます。
JSONレスポンスで"chat":{"id":の部分を探します。
これがチャットIDです。

# ステップ3： メッセージをPythonからテレグラムに送る
ライブラリをインストールします。
```
pip install python-telegram-bot
```
端的に説明するとbotのインスタンスを作って、send_telegram_message（）関数を呼び出すときにセットした引数をテレグラムに送信する、という流れです。
```
from telegram import Bot

token = 'YOUR_BOT_TOKEN' // APIキーを入力します。
chat_id = 'YOUR_CHAT_ID' //　ChatIDを入力します。
bot = Bot(token)

def send_telegram_message(message):
    bot.send_message(chat_id=chat_id, text=message)

# Example usage
send_telegram_message('Hello from Python!')
```
php.iniファイルが作成できない(Mac)

あるPHP講座でphp.iniファイルの作成をするところで沼ってしまったので、備忘録として対処法を書いておきます。
<hr>

- ### やりたかったこと
**php.ini（PHPの環境設定ができるファイル）をターミナルで作成したい。**

動作環境はMacです。<br>Macに標準搭載されたPHPにはphp.iniファイルが作成されていないため、``/etc/php.ini.default``を``sudo cpコマンド``でコピーしてやります。<br>念のためまずは、``lsコマンド``でphp.iniファイルが作成されていないことを確認しました。
```
$ ls /etc/php.ini
ls: /etc/php.ini: No such file or directory
```
↑No such fileと出ていれば大丈夫です。

:::note warn
/etcフォルダ以下の編集では管理者権限が必要なので``sudoコマンド``を使います。
:::

- ### 問題点
**php.iniファイルが作成できない！**

``cpコマンド``に2つの引数（コピー元・コピー先）を渡しパスワードを入力して実行したところ

```
$ sudo cp /etc/php.ini.default /etc/php.ini
Password:
cp: /etc/php.ini.default: No such file or directory
```
ファイルがありません！？
講座の手順通りにやっているのになぜ？としばらく詰まっていました。

- ### 原因
**標準のPHPではなくHomeBrewからインストールしたPHPを使っていた**

そもそもphp.iniファイルの指定場所を間違えているのでは？と思い、``|(パイプ) grepコマンド``で調べてみると・・・

```
$ php -i | grep php.ini
Configuration File (php.ini) Path => /opt/homebrew/etc/php/8.3
```
↑なんと/homebrew/にありました。
この辺は詳しく分かりませんが、macOSをMontereyにアプデすると標準搭載のPHPはアンストされるそうです。そのためHomeBrewからPHPをインストールしていたんですね。それをすっかり忘れていました。笑

:::note warn
**PHPのインストール方法によってphp.iniの配置場所が変わる**ため、コピー元の指定には注意が必要です。
:::

- ### 対処法
php.iniファイルの場所がわかればあとは簡単です。<br>先ほど調べたファイルの場所を、``cpコマンド``の1つ目の引数（コピー元）に渡します。
```
sudo cp /opt/homebrew/etc/php/8.3/php.ini /etc/php.ini
Password:
 ls /etc/php.ini　 /*念のためlsコマンドで調べてみる*/
/etc/php.ini
```
これでphp.iniファイルが作成できました！
Basic認証情報のクリア方法

Webアプリケーションの開発やテスト中に、ベーシック認証の確認を行うことがあります。
しかし、一度認証を通過すると、その情報はブラウザに保存され、次回のアクセス時に自動的に認証情報が使用されます。
この挙動は便利な反面、認証情報をリセットしたいときには手間がかかります。

## 認証情報はどこに保存されている？
ベーシック認証情報は、ブラウザのセッション中にメモリ内に一時的に保存され、HTTP リクエストの `Authorization` ヘッダーにエンコードされた形で送信されます。この情報は、ユーザー名とパスワードをコロン（`:`）で結合し、Base64 でエンコードしたものです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276999/99732034-ca12-f824-24d5-6e2e63407c18.png)
(`hoge:hoge` の場合)

ベーシック認証情報はクッキーとは独立して管理されているため、クッキーを削除しても認証情報は残ります。また、ハードリロード（キャッシュのクリアとページの再読み込み）では、ページデータは新しくなりますが、認証情報には影響しません。

## 認証情報のクリア方法

### 1. ブラウザの再起動
ブラウザを完全に閉じてから再開します。これにより、ブラウザのセッションが終了し、メモリ内の認証情報がクリアされます。

### 2. シークレットモードの利用
シークレットモードでは、ブラウザが新しいセッションを開始し、ウィンドウを閉じるとすべてのセッションデータがクリアされます。認証情報もこれに含まれるため、テストのために一時的に情報をリセットしたい場合に便利です。

### 3. URLハックを利用した認証情報の上書き
URL にユーザー名とパスワードを含めることで、ブラウザに保存されている認証情報を上書きします。要するに、わざと認証に失敗するということです。
形式は `ユーザー名:パスワード@サイトのURL` です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276999/38994fad-f9a5-c0bd-5da0-0f40a78a940d.png)

ユーザー名: `hoge`, パスワード: `hoge` のサイトに
ユーザー名: `fuga`, パスワード: `fuga` でログインを試みたので失敗
React.jsやNext.jsのenvファイルがundefinedになるときの対応 @yukilulu0229

## React.jsの場合

参考: @NaokiHaba

https://qiita.com/NaokiHaba/items/44a8a88b639827c861b8

REACT_APP_xxxxと変数名を持つ

```.env
REACT_APP_DEMO_API_KEY="xxxxhoge"
```

```app.tsx
 process.env.REACT_APP_DEMO_API_KEY
```

## Next.jsの場合

参考: @Sicut_study

https://qiita.com/Sicut_study/items/f85314f34ec7c247b938

NEXT_PUBLIC_xxxxxと変数名を持つ

```.env
NEXT_PUBLIC_APP_ID="xxxxx"
```

```app.tsx
appId: process.env.NEXT_PUBLIC_APP_ID
```
開発2年目がリーダブルコードを読んでみた

# はじめに
2年弱Flutterで開発を続けてきた私が、今更ながらリーダブルコードを読んでみた。
「リーダブルコードを読んでみるといいよ」という話を、憧れの先輩から聞いてきてはいたが、あの教科書じみた表紙のせいだと思う。と、言い訳だけ書いておく。

この記事では、Flutterという日本ではまだ開発人材が少ない言語で開発を進めている自分が、リーダブルコードを読んでみた感想を率直に書いてみます。

# 対象の読者
* 言語問わずプログラミング初学者の方
* 若手エンジニア
* 4月からIT業界で働く人

# 読んでみた感想

### 「答え合わせ」という感覚
私が読んでみた感想としては、一言で表すと「答え合わせ」という感覚だった。
変数や関数の命名、条件式の使い方やコメントアウトの使い方など、今まで開発を進める上で、「可読性」という言葉は耳にしながらも、何が可読性の高いコードなのかはわからない。
そんな状況で探り探り進めていたことの解答をくれた感覚だった。

あながち、使い方としては間違えていないのではないかと思う。
経験と知識のどちらが先行していた方がいいかは、人によって変わってくると思うけれど、
前提としてこの本は、「どうすればより良いコードになるか？」を説いている。
そのため、ある程度の経験を積んだエンジニア読んだ方が、まず言語を習得しないといけない未経験エンジニアよりも効果がある読み物であると私は思う。

### 例を出すと

実際に、答え合わせと感じたところで言うと、if文の使い方だった。

```dart
String Sample(){
    if(条件式１){
        if(条件式２){
            return "2つの条件式がTrue";
        }
        return "条件式1がTrue";
    }
    return "条件式1もしくは条件式2がFalse";
}
```
こういうif文を実際に実装したことがあるし、読んだこともある。
インデントが揃っているかつ、if文内の処理が短ければあまり気にしないコードになると思う。
ただ、こうすることで可読性が一気に上がるのは経験が浅くてもわかると思う。

```dart
String Sample(){
    if(!条件式1) {
        return "条件式1がFalse"
    };

    if(条件式2){
        return "2つの条件式がTrue";
    }
    return "条件式2がFalse";
}
```

こうすることでif文がネストすることはなく、条件1がfalseのパターンが早めに除外されるため、2つ目のif文を読む中で条件1を気にしなくて良くなる。

ある程度の開発経験を持ったエンジニアが読むと効果がありそうと前述したのは、このレベルの答え合わせが詰まっていた感覚だったからです。

### 自分だけの世界に入ってはいけない

複雑な処理を短いコードで実装できることは、エンジニアとしての実力を証明することの1つとなる。
ただし、それが周りを考えた可読性の高いコードになっているかは、必ずしもイコール関係になると言えば、それは違う。

「やったぜ」「俺すげえわ」

そんなことを感じる喜びはあくまで自己満の範疇にとどめておいて、多少処理は長くなろうと、読みやすいコードである方がエンジニアとしての実力の証明になる。

短いけど難しいコード or 長いけれど簡単で読みやすいコード

この2択で迷った時は、後者を選ぶ方が良いらしい。

### 欠点を言えば

前述した通り、2年間Flutterに関わってきたエンジニアなので、理解に時間がかかるところは多かった。
本の前書きにもあるとおり、C++, JavaScript, Python, Javaを使って説明をしている。それぞれの言語の中でも比較的簡単な処理(多分)で紹介されているため、時間をかければ理解できるが、読む気は失せていく。

この本が2週間前後で読み終わる想定でまとめられているため、それをいちいち理解しながら進めようとすると苦になってくるのは間違いないと思う。

そのため、1周で概要を理解していって、2回目以降に細かいところを読み解いていくのをお勧めする。(もはやこれも著者の想定を外れそうだけど。)

### 結論

強引なまとめ形になるが、結論面白かった。
浅はかなことを言っているわけではなく、今までコードを書く上で迷っていたことを、聞いたわけでもないのに全て答えを教えてくれたみたいで、読み終わってスッキリした。

それだけではなく、気に求めてなかったところの効率的な使い方なんかもプラスアルファ教えてくれた。

この本に対する賛否両論を集めて聞いたわけではないけれど、読んでみて悪いことはないと思う。

# 以上

最後まで読んでいただきありがとうございました。
何か別の感想ありましたらコメント欄まで。
Arduino Uno R4のGeneral Purpose Timer(GPT)を使ったPWM出力

# 要約
Arduino Uno R4(以下R4) のレジスタを操作してPWM出力を行う方法を記載します。

下記はMinimaでもWifiでも同様ですが、出力ピンに対する内部ピン(pinout)が2種で異なることに注意して下さい。

実施することは3点です。
+ ピンの選定と設定
+ GPT(General Purpose Timer)の初期設定
+ 周期とdutyの設定

## ピンの選定と設定
### GPTのビット数の選定
GPTは32bitが2つ、16bitが6つ用意されています。32bitが優位であるものの、16bitで十分な用途ではそちらを選択するべきです。

どちらを使うべきかはPWMのdutyの分解能で決まります。
もしdutyを0.1%=1/1000刻みで変えたい場合、カウンタは1周期の中で1000カウントアップする必要があります。16bitは65536なので十分に余裕があり、実用的には16bitを使えば十分です。

また、分解能はPWM周波数とトレードオフです。Arduino Uno R4は48MHzで動作します。PWMの1周期で必要なカウント数をNとすると、1周期はどんなに短くてもN/48[us]必要です。この逆数の48/N[MHz]が最大PWM周波数なので、Nが1000であればPWM周波数の上限は48kHzです。Nが16bit最大値の65536では732Hzまで遅くなるため、用途によりますが32bitタイマは不適のことが多いでしょう。

なお、delay()やdelayMicroseconds()はAGTという別のタイマを利用するため、ここで考慮する必要はありません。

# 内部ピンの選定
16bitタイマはGPT162からGPT167という名前がついています。ここではGPT162を使うと仮定します。この時「Renesas RA4M1グループユーザーズマニュアル ハードウェア編」(以下マニュアル)を見ると、対応する出力機能がGTIOC2AおよびGTIOC2Bであること、そのうちGTIOC2AはP103およびP113,P500に割り当てられていることがわかります。

このうちR4 MinimaではP113はD4ピンに割り当てられていますのでこれを利用します。P113はマニュアルでm=1, n=13としてPmnPFSレジスタでピン設定が可能です。
```cpp
  const int timerPinM = 1;
  const int timerPinN = 13;
  R_PFS->PORT[timerPinM].PIN[timerPinN].PmnPFS_b.PDR = 1;
  R_PFS->PORT[timerPinM].PIN[timerPinN].PmnPFS_b.PSEL = 0b00011;
  R_PFS->PORT[timerPinM].PIN[timerPinN].PmnPFS_b.PMR = 1;
```
ピンはPDRでデジタル出力として設定します。Arduinoらしくpinmodeなどを使っても大丈夫です。その場合はPSELレジスタの設定を忘れずに実施してください。

## GPTの初期設定
まず初期設定のためのレジスタを設定します。この部分はPWMの周波数やdutyと関係がありません。
```cpp
  R_MSTP->MSTPCRD_b.MSTPD6 = 0;
  R_GPT2->GTCR_b.CST = 0;
  R_GPT2->GTIOR_b.OAE = 1;
  R_GPT2->GTIOR_b.GTIOA = 0b11001;
  R_GPT2->GTBER_b.CCRA = 0b01;
```
MSTPD6は16bitGPTモジュールの省電力機能を解除し、モジュールに通電させる指令です。CSTは初期設定のためのモジュール停止を、0AEはGTIOC2Aを有効にする命令です。OBEはGTIOC2Bを有効にします(以下同様です)。GTIOAの設定は、「初期出力HIGH」「周期の終わり(リセット)でHIGH」「コンペアマッチ時LOW」を表します。詳細は次の周期設定で記述します。CCRAはバッファリングの設定で、dutyに関係するGTCCRレジスタをバッファリングします。これによりリセットタイミングとdutyタイミングの関係を切り離せます。

## 周期とduty
### レジスタ値の計算
仮にPWMの希望する分解能0.1%とします。先ほど述べたように分解能の逆数が最大カウント数なので、次に述べるgptrCountを1000に設定します。また、希望する出力%を10倍した値を次に述べるgtccrCountに設定します。50%出力をしたい場合、1000カウントのうち500カウントはHIGH出力、500カウントはLOW出力をするということです。PWM周波数は元クロックが48MHzの場合48kHz、元クロックを分周した場合それに応じて周波数が低くなります。

逆に所望の周波数を得たい場合もあります。X[kHz]のPWM出力を得たい場合、48000/X カウントで1周期になるような設定とすればいいです。10kHzの信号が得たければ、gtccrCountは4800です。0.732kHzより遅い信号(1Hzとか)が欲しければ分周するか32bitのレジスタを使いましょう。

### レジスタへの書き込み
最後に周期およびdutyに関わる設定を行い、出力を開始します。
```cpp
  R_GPT2->GTCNT = 0;
  R_GPT2->GTPR = gptrCount - 1; // gptrCountはカウンタの周期
  R_GPT2->GTCCR[0] = gtccrCount;
  R_GPT2->GTCCR[2] = gtccrCount;
  R_GPT2->GTCR_b.CST = 1;
```
GTCNTはカウンタの値を保持するレジスタで、最初に0に初期化します。GTPRはカウンタの最大値であり、この値を超えるタイミングが「周期の終わり」で、そのタイミングでGTPRは1にリセットされます。そのため、想定する周期よりもカウンタのリセットは１クロック遅く、逆に設定する値は1を減じる必要があります。
GTCCR[0]はこの値と一致した時(コンペアマッチ)に出力を変更する値で、GTIOAの設定により出力がLOWに変わります。GTCCR[2]に設定した値はカウンタリセットのタイミングでGTCCR[0]にコピーされるため、初期設定では同じ値を入れておく必要があります。
最後にCSTを1にすると出力が開始されます。

# 最後に
R4は12bitのD/Aを持つため従来よりPWMの重要度は低くなりました。ライブラリを介さずにPWMを使うことはあまりないかもしれませんが、何かに役に立てば幸いです。
Iterm2でコマンドを実行させるカスタムウィンドを保存する

iTerm2でカスタムウィンドを保存する方法について記載。


### カスタムウィンドウを保存（Tabも同様）

1.iTerm2を開いて好きなレイアウトにウィンドウを配置する

2.Window > Save Window Arrangement
で適当な名前で保存


### カスタムウィンドウを呼び出し

1.Window > Restore Window Arrangement
から呼び出したいカスタムウィンドウを選択


### 各Tabごとにコマンドを実行させる

1.Iterm2 > settings > profile からPereferencesを開く

2.Pereferencesのprofileから左下「+」を選択して新しいprofileを作成する

3.作成したprofileを選択し、Nameを指定し、
Commandのsend text at start:の箇所に実行したいコマンドを入力する。

4.コマンド入力画面上で右クリック、New TabからTabに設定したいコマンドのPereferenceを選択する

5.上記を繰り返して、好きなTab、コマンドを設定したらWindow > Save Window Arrangementで全体を保存する。
これで、Window設定を開くだけで複数のTab上で指定したコマンドを実行することができる


### 各Windowごとにコマンドを実行させる

1.上記「各Tabごとにコマンドを実行させる」と同じ方法でprofileを作成

2.コマンド入力画面上で右クリック、New Windowから設定したいコマンドのPereferenceを選択する

3.別Windowで開くので、同じWindow内でsplit表示にしたい場合は、
右クリック Move Session to Split Paneで移動先をまとめたいWindowを選択する

※splitする際にprofile設定できればスマートに設定できそうだけど現状はできないっぽい。



以上
CpawCTF Q16.[Network+Forensic]HTTP Traffic

## CpawCTF Q16.[Network+Forensic]HTTP Traffic
問題にある.pcapファイルをダウンロードします。
WireSharkで解析していきます。
ファイル>オブジェクトを抽出>HTTP...
![スクリーンショット 2024-02-12 222404.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3685661/1eeb9478-d368-d2c1-df99-7a9348e79458.png)
をすると以下のような画面が表示されます。
![スクリーンショット 2024-02-12 222423.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3685661/9b787cba-8ff8-5dd9-1833-f0545f89a12f.png)
すべて保存して
network(1)の中身を見てみるとhtmlであることがわかるので、拡張子を.htmlで名前変更しWebで開いてみると以下のような画面になります。
![スクリーンショット 2024-02-12 222210.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3685661/2e98f179-40c4-7ede-b511-e161a0fed8aa.png)
これだと何もできないので、htmlの中身を確認して、img,css,js,icoをそれぞれディレクトリに入れると以下のようになり、ボタンをクリックするとFLAGが表示される。
![スクリーンショット 2024-02-12 222046.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3685661/7850ee0f-1737-ca59-4226-6e2dcd42671c.png)
![スクリーンショット 2024-02-12 223013.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3685661/51338d31-d764-22ba-1818-10e79da0aa68.png)
よって答えはcpaw{Y0u_r3st0r3d_7his_p4ge}
CpawCTF Q15.[Web] Redirect

## CpawCTF Q15.[Web] Redirect
http://q15.ctf.cpaw.site
開発者用ツールでこのurlにアクセスするネットワーク活動を記録します。
すると、以下のようになり、FLAGが見つかります。
![スクリーンショット 2024-02-12 214855.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3685661/15a28791-3d0e-8272-b527-8f42e2cf55de.png)
X-FLAGのところにcpaw{4re_y0u_1ook1ng_http_h3ader?}とあります。
CpawCTF Q14.[PPC]並べ替えろ!

## CpawCTF Q14.[PPC]並べ替えろ!
[15,1,93,52,66,31,87,0,42,77,46,24,99,10,19,36,27,4,58,76,2,81,50,102,33,94,20,14,80,82,49,41,12,143,121,7,111,100,60,55,108,34,150,103,109,130,25,54,57,159,136,110,3,167,119,72,18,151,105,171,160,144,85,201,193,188,190,146,210,211,63,207]
これを並び替えるプログラムをC言語で書きます。
```c++:Sort_Ascending.cpp
#include<stdio.h>

int main() {
	int b[] = { 15,1,93,52,66,31,87,0,42,77,46,24,99,10,19,36,27,4,58,76,2,81,50,102,33,94,20,14,80,82,49,41,12,143,121,7,111,100,60,55,108,34,150,103,109,130,25,54,57,159,136,110,3,167,119,72,18,151,105,171,160,144,85,201,193,188,190,146,210,211,63,2077 };
	int N = sizeof(b)/sizeof(b[0]); //要素数を求める
	int a,i,n;
	printf("cpaw{");
	for (n = 0; n < N - 1; n++) {
		for (i = 0; i < N - n - 1; i++) {
			if (b[i] > b[i + 1]) {
				a = b[i + 1];
				b[i + 1] = b[i];
				b[i] = a;
			}
		}
		printf("%d", b[n]);
	}
	printf("}\n");
	return 0;
}
```
実行結果は以下のようになります。
```text:ans.txt
cpaw{115310422410364363642421442414274649345052525455555757586066727677778081828587939499100102103105108109110111119121130136143144146150151159160167171188190193201210211}
```
CpawCTF Q13.[Stego]隠されたフラグ

画像の左上と右下にモールス信号があるので下のサイトで解読します。
https://morse.ariafloat.com/en/
結果は以下膿瘍になります。
![スクリーンショット 2024-02-12 213629.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3685661/c389d3c3-800c-bc5c-06fd-dd1d250afa4e.png)
よって答えはcpaw{HIDDEN_MESSAGE}
CpawCTF Q12.[Crypto]HashHashHash!

## CpawCTF Q12.[Crypto]HashHashHash!
SHA-1をデコードしてみましょう。以下のサイトでデコードできます。
https://md5decrypt.net/en/Sha1/
![スクリーンショット 2024-02-12 203905.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3685661/ec3c8767-0c1d-947c-7410-0334a82a4bbf.png)
デコード結果は、Shalです。
なので、答えは、capw{Shal}です。

## 参考文献
SHA-1->https://qiita.com/Uma_adn/items/e1826117daddd99fad94
CpawCTF Q11.[Network]pcap

## CpawCTF Q11.[Network]pcap
問題にあるpcapファイルをWireSharkで解析していきます。
WireSharkでこのファイルを開くと以下のような画面になります。
![スクリーンショット 2024-02-12 202606.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3685661/cec7cbcb-bb02-d6f8-c1e1-8fb35b61822c.png)
No.2のパケットを確認すれば
cpaw{gochi_usa_kami}と答えが書いています。
Cpawctf Q9 [Web] HTML Page

## Cpawctf q9 [Web] HTML Page
まず、問題にあるurl　(http://q9.ctf.cpaw.site)　
にアクセスしてみましょう。
開発者ツールで調べると
![スクリーンショット 2024-02-12 161520.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3685661/2cd0b34a-d20b-3848-479a-303433486eba.png)
```html:ans.html
<meta name="description" content="flag is cpaw{9216ddf84851f15a46662eb04759d2bebacac666}">
```
と書いてあるので答えは cpaw{9216ddf84851f15a46662eb04759d2bebacac666}です。
spawctf Q8.[Misc] Can you open this file 

## spawctf Q8.[Misc] Can you open this file 
とりあえず、問題にあるopen_meファイルをダウンロードして、Linux Ubuntuで解析していきます。
fileコマンドで解析していきます。
```terminal:file.ub
>file open_me
open_me: Composite Document File V2 Document, Little Endian, Os: Windows, Version 10.0, Code page: 932, Author: v, Template: Normal.dotm, Last Saved By: v, Revision Number: 1, Name of Creating Application: Microsoft Office Word, Total Editing Time: 28:00, Create Time/Date: Mon Oct 12 04:27:00 2015, Last Saved Time/Date: Mon Oct 12 04:55:00 2015, Number of Pages: 1, Number of Words: 3, Number of Characters: 23, Security: 0
```
Name of Creating Application: Microsoft Office Wordと書いてあるのでopen_meの拡張子を.docに変更してみます。
```terminal:reaname.ub
>mv open_me open_me.doc
```
これでopen_me->open_me.docとなったので開いてみましょう。
![スクリーンショット 2024-02-12 145751.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3685661/a05b6681-7861-e73b-680b-ae0de9043d7a.png)
よって答えはcpaw{Th1s_f1le_c0uld_be_0p3n3f}とわかります。
## 参考文献
file->https://qiita.com/Uma_adn/items/e0a506c7df141c6c7a36
mv->https://qiita.com/Uma_adn/items/7e26458411727dde922b
SHA-1とは

## SHA-1とは
SHA-1とは、任意の長さの原文を元に160ビット（20バイト）の規則性のない値を生成するハッシュ関数の一つです。

## 利用場面
ハッシュ関数は、任意長のデータから一定の計算手順で固定長のデータを算出する関数で、同じ原文からは必ず同じ値が得られる一方、少しでも異なる原文からはまったく違う値が得られます。SHA-1を含む「暗号学的ハッシュ関数」は情報セキュリティ用途で用いることを想定した関数で、原文とハッシュ値、ハッシュ値と別のハッシュ値の間に規則性が現れないよう計算手順が工夫されています。データの伝送や複製を行なう際に、入力側と出力側でハッシュ値を求め一致すれば、途中で改ざんや欠落などが起こっていないことを確認することができます。暗号や認証、デジタル署名などの要素技術として様々な場面で利用されています.

## 歴史
SHA-1はNSA（米国家安全保障局）が考案し、1995年にNIST（米国標準技術局）によって連邦情報処理標準の一つ（FIPS 180-1）として標準化されました。しかし、2005年頃から効率的に攻撃する手法がいくつか発見され、十分な安全性が保たれなくなったため、近年では2001年に制定された後継のSHA-2規格や2015年に制定されたSHA-3規格への移行が推奨されています。