OmniAICreator/Qiita-1.07M huggingface dataset:
【3分でできる】Wixでサイトのアクセス数を通知する方法

# Wixでサイトのアクセス数を通知する方法

1. Wixのサイトを開いて`アクセス解析 -> レポート`を開く
1. 通知したい指標（ここでは一定期間のトラフィック）を選択する
![Wix_レポート.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3249502/7bfe6f45-889c-492a-7013-acf0dd3f09dd.png)
1. 定期配信を選択してダイアログに従い設定をする
![スクリーンショット 2023-05-08 16.21.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3249502/ec843bf2-18a4-f006-0832-4c3504f07386.png)
![スクリーンショット 2023-05-08 16.22.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3249502/6d07a9ac-45c1-7c11-a516-0ec108f9d4d0.png)

これで毎日、指定した日時に指標情報を通知してくれます。
スラックに通知をして欲しかったのですが、そのようなオプションはないようです。

# さいごに
私はバーチャルコミュニケーションアプリのピクセルトークを開発しています。
よければどのようなアプリかホームページを見てみてください。
どうぞよろしくお願いします。

https://www.pixeltalk.app/
√x+1の逆関数「2023公立千歳科学技術大学中期【１】(7)」をWolframAlphaとsympyでやってみたい。


~~WolframAlphaとsympyのグラフがでます。~~
WolframAlphaだけグラフがでました。

オリジナル

https://mathmathmass.exblog.jp/33245373/

上と同じです。大学入試数学問題集成＞テキスト 中期【１】(7)

https://mathexamtest.web.fc2.com/2023/202311025/2023110250200mj.html#top-0207

# WolframAlphaで
わかりませんでした。2回にわけました。
グラフがでます。

https://www.wolframalpha.com/input?i=inversefunction%28sqrt%5Bx%5D%2B1%29&lang=ja

https://www.wolframalpha.com/input?i=sqrt%5Bx%5D%2B1%3Dx%5E2+-+2+x+%2B+1&lang=ja

# sympyで
(2023/05/17)
わかりませんでした。
```python
from sympy import *
x, y = symbols('x y')
def myFinv(f):
    return (solve(Eq(y, f), x)[0]).subs({y:x}).expand()
f=sqrt(x) + 1
print("#",f,"--->",myFinv(f))
plot(myFinv(f),f,x,(x,0,5))
# sqrt(x) + 1 ---> x**2 - 2*x + 1
```

solvesetのIntervalが必要だと思います。
plotコマンドは、縦横比が異なります。

![0png.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109698/81f51223-4004-53ec-798d-0d211f1ad8d9.png)

# 参考

https://qiita.com/mrrclb48z/items/e0b60e417f905b49cd2f

https://stackoverflow.com/questions/60854658/finding-the-inverse-of-a-function-in-python-possibly-using-sympy
Prisma　TypeScript環境でnpx prisma db seedがうまくいかない時

package.jsonに以下を記入すれば動くと書いているが、エラーが出たときの対処法

```package.json
  "prisma": {
    "seed": "ts-node prisma/seed.ts"
  }
```

```sh
❯ npx prisma db seed
Environment variables loaded from .env
Running seed command `ts-node  prisma/seed.ts` ...
(node:337002) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
```

いろいろ試してみましたが、package.jsonのスクリプトを書き換えるのが一番シンプルで良かったです。

```package.json
  "prisma": {
    "seed": "ts-node --compiler-options {\"module\":\"CommonJS\"} prisma/seed.ts"
  }
```

## 参考

https://github.com/prisma/prisma/issues/7053
【SwiftUI】混ぜるな危険

親Viewで検索バーを使う
　　＋
子Viewの`navigationBarTitleDisplayMode`を`.inline`にする
　　＋
子Viewの`toolbarBackground`を`.hidden`
　　＋
親Viewで何かしら検索をかけた状態で、子Viewに遷移する
　　↓
遷移した先でスワイプで戻ろうとして、やっぱやめたってすると、一生戻れなくなる

![画面収録_2023-05-08_15_59_59_AdobeExpress.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648522/d65e15be-fef3-aeac-c447-54be864284c7.gif)

```swift
struct HogeView: View {
    @State var text: String = ""
    
    var body: some View {
        NavigationStack {
            ScrollView {
                NavigationLink {
                    Text("Detail View")
                        .toolbarBackground(.hidden, for: .navigationBar)
                        .navigationBarTitleDisplayMode(.inline)
                } label: {
                    Text("navigate")
                }
            }
            .searchable(text: $text)
        }
    }
}
```
SAP for Meのノート表示がデフォルト日本語になってしまう

先月よりSAP One Support LaunchpadからSAP for Meへの切り替えが行われています。
個人的に抵抗なく移行、利用していたのですが、ノートを開くたびに日本語で開くので困っていました。

調べたところ、SAP for Me Online Helpに以下のように記載があり、、ブラウザの言語設定から引っ張ってきてしまうとのことです。ヘルプにはChrome, Edge, Firefox, Safariの変更方法も書いてあります。
>SAP for Me is available in multiple languages. Based on your browser settings, SAP for Me is displayed in English, French, German, Japanese, Portuguese, Simplified Chinese, or Spanish. If your browser’s language is not included in this list, by default SAP for Me will be shown in English.
https://support.sap.com/content/s4m/help/language.html

これ、ノートのデフォルト言語だけではなく、SAP for Me全体の言語が変わっちゃうんですよね。
しょうがないか。
Reactのイベントハンドラ入門


Reactでよく使われるイベントハンドラを初心者にもわかりやすく解説し、コードの例を交えて紹介します。

## 1. イベントハンドラとは

イベントハンドラは、ユーザーアクションやデータ変更など、特定のイベントが発生したときに実行される関数です。Reactでは、イベントハンドラを使ってコンポーネントのインタラクションを制御します。

## 2. イベントハンドラの使い方

Reactでは、イベントハンドラはcamelCaseで記述し、JSX要素の属性として指定します。関数を定義し、イベントハンドラとして要素に紐付けます。

### 例: ボタンクリックイベント

```javascript
import React from 'react';

function handleClick() {
  alert('ボタンがクリックされました！');
}

function App() {
  return (
    <button onClick={handleClick}>
      クリックしてね！
    </button>
  );
}

export default App;


```

上記の例では、`handleClick`関数がイベントハンドラとして定義され、`onClick`属性でボタン要素に紐付けられています。

## 3. よく使われるイベントハンドラ

### 3.1. `onClick`

`onClick`は、クリックイベントを検出するイベントハンドラです。ボタンやリンクなど、要素がクリックされたときに実行されます。

### 3.2. `onChange`

`onChange`は、入力要素の値が変更されたときに発火するイベントハンドラです。テキストボックスやチェックボックスなどで使われます。

```javascript
import React, { useState } from 'react';

function App() {
  const [text, setText] = useState('');

  function handleChange(event) {
    setText(event.target.value);
  }

  return (
    <input type="text" value={text} onChange={handleChange} />
  );
}

export default App;

```


### 3.3. `onSubmit`

`onSubmit`は、フォームが送信されたときに発火するイベントハンドラです。フォームの送信処理を制御する場合に使用します。

```javascript
import React, { useState } from 'react';

function App() {
  const [text, setText] = useState('');

  function handleSubmit(event) {
    event.preventDefault();
    alert(`送信内容: ${text}`);
    setText('');
  }

  function handleChange(event) {
    setText(event.target.value);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={text} onChange={handleChange} />
      <button type="submit">送信</button> </form> ); }

export default App;

```


上記の例では、`handleSubmit`関数が`onSubmit`イベントハンドラとして定義されており、フォームが送信されると実行されます。`event.preventDefault()`を使って、デフォルトの送信処理をキャンセルしています。

## まとめ

Reactのイベントハンドラは、コンポーネントのインタラクションを制御するために使用されます。よく使われるイベントハンドラには、`onClick`（クリックイベント）、`onChange`（入力要素の値変更イベント）、`onSubmit`（フォーム送信イベント）などがあります。これらのイベントハンドラを使いこなすことで、様々なユーザーアクションに対応したアプリケーションを開発することができます。
java初心者が行く～継承1～

# はじめに
java初心者が備忘録的に書いています

# 継承のキホン
javaの醍醐味ともいえる継承。書き方自体は簡単。今回は基本的な継承について書いていく。
結論から言うと書き方は以下のようである。

```java
public class hoge extends 継承元クラス {
    public void sample(){
        //処理内容
        //super.親クラスのメソッド名　これで親クラスのメソッドを使用できる
    }
}
```

子クラスは「super.親クラスのメソッド名」とかくことで親クラスのメソッドを使用できる。
もっとわかりやすく具体例を挙げてみる。

```java:Parents.java
public class Parents {

    public void parents(){
        System.out.print("親クラスだよ");
    }
}
```

```java:Child.java
public class Child extends Parents {

	public void child() {
		super.parents();
	}
}

```
Childクラス内のchildメソッドを呼び出すと親クラスの「親クラスだよ」が出力される。

# 継承のコンストラクタ
次は親クラスがコンストラクタを持つ場合の継承の書き方。
まず先ほどと同じように書いてみる。

```java:Child.java
public class Child extends Parents {
	public void child() {
		super.parents();
	}
}
```

```java:Child.java
public class Parents {
	String str;

    public Parents(String a){
    	str = a;
    }

    public void parents() {
    	System.out.println(str);
    }
}
```
先ほどと同じように書いてみた。しかしこのままではコンパイルエラーが起きてしまう。
```:コンパイルエラー
暗黙的スーパー・コンストラクター Parents() は、デフォルト・コンストラクターについては未定義です。
明示的コンストラクターを定義する必要があります
```
このコードとエラー文をよくよく見てみると親クラスであるParentsのコンストラクタが未定義なことがわかる。
では子クラスから親クラスのコンストラクタを行うにはどうしたらよいのか。ここで登場するのがsuperである。（さきほどでてきたsuper.親クラスのメソッド名の使い方とは別なので混同しないように）

書き方としては以下のようである。

```java:Child.java
public class Child extends Parents {

	public Child() {
		super("親クラスだよ");//コンストラクタを用いて初期化
	}
	public void child() {
		super.parents();
	}
}

```
このように書くことで親クラスのコンストラクタを行うことができる。

# 少し踏み入った話～super～
実は子クラスで継承を行うとき必ず親クラスのコンストラクタが行われているのである。
継承のキホンで説明したコードを例に挙げてみる。

```java:Parents.java
public class Parents {

    public void parents(){
        System.out.print("親クラスだよ");
    }
}
```

```java:Child.java
public class Child extends Parents {

	public void child() {
		super.parents();
	}
}

```
この親クラスはコンストラクタが行われていない。そのため子クラスでsuper();と記述はしていない。
しかしコンパイラがコードを読むときにかってに以下のように解釈しているのである。

```java:Child.java
public class Child extends Parents {

//---じつはここが追加されている---
	public Child(){
		super();
	}
//-------------------------------
	public void child() {
		super.parents();
	}
}
```
このため親クラスがコンストラクタを持っている場合は「引数のないコンストラクタをおこなっている（コンストラクタは引数が必要なのに、、、）」ためエラーがでるのである。

# 最後に
継承自体を使うことはすぐ慣れるが、なにを親クラスとして何を子クラスとするのかなど設計が難しいと感じた
【初心者でも簡単】たった2ステップでSlackとGitHubを連携してIssueやマージした時にスラック通知する

# スラックとGitHubを連携させる方法

以下の手順に従って、SlackとGitHubの連携を行います。

## 1. SlackでGitHubアプリをインストール
アプリを開いて左下の"アプリを追加する"からGitHubアプリを追加します
![SlackにGithubアプリを追加.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3249502/9f6b14ed-7c09-3df8-cc12-28de315652b5.png)


## 2. Slackでリポジトリを購読する

1. 連携させたいSlackチャンネルにアクセスします。チャンネルがない場合は新規作成します。
2. 以下のコマンドを入力してGitHubリポジトリを購読します。
`/github subscribe owner/repo`
ここで、`owner`にはリポジトリのオーナー名、`repo`にはリポジトリ名を入力してください。

要はリポジトリにアクセスした時の左上に表示されるこれです。
このリポジトリの例では以下のようになります。
ownerはflutter
repoはengine
![GitHubのオーナー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3249502/2fd67bd9-4456-e95c-774d-1f470dc34ebf.png)


# 設定完了
これで、SlackとGitHubの連携が完了しました。リポジトリでイベントが発生した際に、指定したSlackチャンネルに通知が届くようになります。

# さいごに
私はバーチャルコミュニケーションアプリのピクセルトークを開発しています。
よければどのようなアプリかホームページを見てみてください。
どうぞよろしくお願いします。

https://www.pixeltalk.app/
Vanilla.js チートシート

ネイティブのJavaScriptを記述する際に個人的によく確認するもののチートシート

## 要素の指定
### id
```
document.getElementById('idName')
```
### class
```
document.getElementsByClassName('className')
```
### 要素
```
document.querySelector('selectorName')
document.querySelectorAll('selectorName')
```
### 絞り込み

```
document.getElementById('idName').getElementsByClassName('className')
```

### 親要素
```
function onClickItem(e) {
  const target = e.target;
  const parent = target.parentNode;
}
```
```
function onClickItem(e) {
  const target = e.target;
  const parent = target.closest('selectorName');
}
```

## スクロール位置
```
const scroll = {};
scroll.x = window.scrollX || window.pageXOffset || document.documentElement.scrollLeft;
scroll.y = window.scrollY || window.pageYOffset || document.documentElement.scrollTop;
console.log({ scroll });
```

## 要素の大きさ・位置
```
const target = {};
function getTargetPosition(element) {
  const clientRect = element.getBoundingClientRect();
  target.height = element.offsetHeight;
  target.width = element.offsetWidth;
  target.x = clientRect.left;
  target.y = clientRect.top;
}
getTargetPosition(document.getElementById('idName'));
console.log({ target });
```

## footer要素が見えている時はhtml要素に .view-footer を付与
```
const footerElement = document.getElementById('js-footer');
const ioFooter = new IntersectionObserver((entries) => {
  if (entries[0].isIntersecting) {
    // console.log('footer view');
    document.documentElement.classList.add('view-footer');
  } else {
    // console.log('footer leave');
    if (document.documentElement.classList.contains('view-footer')) {
      document.documentElement.classList.remove('view-footer');
    }
  }
});
ioFooter.observe(footerElement);
```

## .c-observeItem 要素が見えたら .is-view を付与
```
const observeElements = document.getElementsByClassName('c-observeItem');
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      if (!entry.target.classList.contains('is-view')) {
        entry.target.classList.add('is-view');
      }
    }
  });
}, {
  root: null,
  rootMargin: `-${window.innerHeight / 5}px 0px`, // ウィンドウの下から20%で発火
  threshold: [0]
});
if (observeElements) {
  for (let i = 0; i < observeElements.length; i += 1) {
    observer.observe(observeElements[i]);
  }
}
```
LambdaにFastAPIのDockerイメージを参照して発行した関数URLからCORSエラーが生じる

下記のようにFastAPIのapp.pyファイルにてadd_middlewareのCORS設定にてワイルドカードのアスタリスク指定をしているのですがCORSエラーが返ってきます。

```app.py
"""サーバー立ち上げ"""
from fastapi import FastAPI, File, UploadFile
from fastapi.middleware.cors import CORSMiddleware
from fastapi.responses import JSONResponse
import uvicorn
import os
from mangum import Mangum

app = FastAPI()

app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_origin_regex="https?://.*",
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)
handler = Mangum(app)


def hello_world(text: str):
    return "hello world" + text


@app.get("/")
def my_function():
    """ハローワールドtest"""
    greed = hello_world("test")
    return JSONResponse({"text": greed})
```

## 検索してみるとAWS API Gatewayと連携した際のエラー対処法が出てくる
AWSはAPI Gatewayというサービスの中でLambdaを立てることができるのですがその使い方でInternal Server 500エラーが生じやすいそうです。

しかし今回はLambda単体で生じているため解決策にはなりませんでした。

## Lambda側でcors設定ができた
そもそもFastAPI側でCORS設定するのではなくLambda側で設定する必要がありました。
そういえばチュートリアルで設定したことがあったのですが忘れていました。

![スクリーンショット 2023-05-08 15.08.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651103/494dca02-68cb-0c12-f9dc-26096a4bf2c7.png)

![スクリーンショット 2023-05-08 15.10.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651103/dc25528d-0cab-7ab7-b93a-95c8b61d4192.png)

このページの編集画面で適当に編集すればCORSを有効化して使えるようになります。
![スクリーンショット 2023-05-08 15.11.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651103/a749f188-82e3-1df3-3bc6-465c5e5120ca.png)

適当に許可オリジンを決めれば解消します。
もっともその後に発生した違うエラーに苦しんでいる現在ですが。

![スクリーンショット 2023-05-08 15.13.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651103/6dcc1004-71c6-c42c-b4a3-b0a24cb9b9ff.png)
Yellowfin 行動履歴を Google Analytics に転送

## はじめに
WEB サイトのアクセス行動を分析するために、Google Analytics にデータを転送している企業はとても多いはず。もちろん、Yellowfin での行動に関するデータも Google Analytics に転送して分析することが可能です。[カスタムヘッダー](https://wiki.yellowfin.co.jp/pages/viewpage.action?pageId=2294346)と呼ばれる領域にタグを埋め込むだけで、Yellowfin 全体に対するアクセス状況のデータを Google Analytics に転送します。

## 1. Google アカウントの作成と GoogleAnalytics サービスの開始
Google Analytics を利用するための第一歩として、アカウントの作成とサービスの開始が必要です。と言っても、それほど手間のかかる作業ではありません。MOLTS さんの[『Google アナリティクスの導入方法』](https://moltsinc.co.jp/access-analysis/6311/#lwptoc20) の説明が分かりやすいので是非参考にしてみて下さい。なお、手順の途中で入力が求められるウェブサイトの URL は、DNS の名前形式でないとエラーではじかれてしまいます。ただ、ここで入力する情報は、特に後の処理には関係してきません。なので、http://localhost:8080 で Yellowfin にアクセスしている時などは、適当にエラーにならない URL (eg.http://localhost.com) を入力しておいてください。

上記の手順でサービスを開始すると、「ウェブサイトのトラッキング」 のページで、グローバルサイトタグ (gtag.js) が発行されます。この内容をテキストデータとして保管しておいて、後ほど Yellowfin のカスタムヘッダーに埋め込みます。

## 2. Yellowfin の設定
#### 2-1. JSP ファイル
まずは JSP ファイルを作成します。下記がそのサンプルで、既定の Yellowfin のヘッダーデザインをそのまま踏襲したものに、先の手順で取得したグローバルサイトタグを埋め込んでいます。
‘G-XXXXXXXXXX' の ID を自社あるいは自分の ID に変更してください。
```html:header.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<html>
<div class="headerbg" style="width: 100%;">
<div>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tbody><tr>
    <td class="i4sidenav_width header_logo" valign="bottom"><img src="images/logo.svg" alt="" border="0" style="display: block;"></td>
    <td style="background: url(images/header_middle_bkg.gif) repeat-x bottom;">
      <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tbody>
	  <tr>
            <td align="right" nowrap="">
              <span class="i4header_userinfo"></span>
              <div onclick="on_submit('topNavLogoff');" style="padding-left:25px; padding-right:25px;" class="dashButton" id="logoffBtn">ログアウト</div>
            </td>
          </tr>
        </tbody>
      </table>
    </td>
    <td class="i4header_rsidewidth" style="background: url(images/header_end_bkg.gif) repeat-x bottom;" nowrap="">&nbsp;</td>
  </tr>
</tbody></table>
</div>
</div>
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>
</head>
</td>
```

#### 2-2. JSP ファイルの配置
header.jsp を以下のディレクトリに配置します。
<Yellowfin>/appserver/webapps/ROOT/

#### 2-3. 管理画面からの設定
Yellowfin [管理] > [システム構成] > [インテグレーション] > [ページヘッダー] から、以下を設定すれば、Yellowfin 側の設定は完了です。
表示：カスタム
URL：header.jsp
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2128512/4115b368-08a1-bcd7-f49c-540045ea06a2.png)
特にサービスの再起動などは必要ありません。設定後、直ぐにデータが転送され始めます。

## 3． 動作確認
リアルタイムレポートの画面を開くと、リアルタイムでデータが転送されていることが分かります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2128512/1ab07386-e65a-ecf5-20f4-42143f272101.png)

## 最後に
実は、私も今回初めて Google Analytics を使ってみました。なかなか便利な機能ですね。一方で、様々な情報が Google に集約されている現実も垣間見えます。Google の人工知能は学習するデータがたくさんあって、賢くなりそう、、、
何はともあれ、皆様良いデータ分析を! Cheers!!
Lambdaの関数URLから500 (Internal Server Error) が返ってきたらCloudWatch Logsを確認する

フロントエンドの知識がメインなので普段はawsなどをあまり触らないという立場で書いています。

LambdaにFastAPIのDockerイメージをアップロードして発行された関数URLをAPI的に使うような用途でLambdaを利用しています。
アプリケーション開発でインスタンス代を節約する目的で使用しています。

しかしローカル上では問題ないのですがいざアップロードすると500 (Internal Server Error) が返ってきます。何度もローカル上のフォルダを確認したのですが原因がわかりませんでした。

ですが表題の通りCloudWatch Logsを見ればエラーログが出力されていたので原因を突き止めることができました。

## CloudWatchのLogStreamを確認する
![スクリーンショット 2023-05-08 14.39.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651103/651488cb-9607-7e23-e724-6165947ab28f.png)

![スクリーンショット 2023-05-08 14.40.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651103/7ddc79a8-0781-d7a9-db3d-7e3f16e5ccb3.png)

CloudWatch Logsのページ自体は確認していたのですがエラー時のログは表示されていなかったので気づかなかったのですがLogStreamの方にログ詳細が見れました。

![スクリーンショット 2023-05-08 14.43.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651103/ccd4e6ce-bdfa-707f-fea8-35609d6df65f.png)

リクエストでLambdaで 500 (Internal Server Error) が返ってくる場合はこの通り、エラーログが確認できます。
Mac Teminalでたまに実行するものメモ

## ローカルサーバーを起動

対象ディレクトリをテーミナルで開き、下記を実行
```
python -m SimpleHTTPServer 8888
```

## htpasswdを生成
`ID`・`PASSWORD` 箇所には指定したい文字列に置き換える
出力された文字列を htpasswd にペースト
```
htpasswd -nb ID PASSWORD
```
未経験からWebエンジニア目指してみた

# 自己紹介
はじめまして！
未経験からエンジニアを目指して勉強中のShuと申します。
Qiitaは主に学習内容のアウトプットや、技術関連の備忘録として使っていきたいと思います。
よろしくお願いいたします。

# スペック
- 20代後半 フリーター
- 文系&プログラミング経験なし
- 学習形態：独学（6月から職業訓練受講予定 ▶ 🆕 5/29 選考に落ちたので独学継続……！）
- 学習中：HTML&CSS, Sass, JavaScript, Python, Django, 基本情報技術者試験 etc.
ICOS上のアーカイブされたファイルをまとめて復元する（高速アーカイブの場合）

### はじめに

[別の記事](https://qiita.com/hirokuda/items/b2244464ba6fc459267c)で記載したICOS上のアーカイブされたオブジェクトの復元について、高速アーカイブの場合についても確認してみました。

### 確認した環境

+ アーカイブ・ルールが設定されたICOSバケット
    + 高速アーカイブを設定
    + ライター以上の権限を持つ資格情報のAPIキー
+ (Python実行環境としての) Watson Studio
    + Python 3.10

### アーカイブされたオブジェクトの状態

通常のアーカイブされたオブジェクトの属性を見ると、`StorageClass`が`GLACIER`となっていましたが、高速アーカイブされたオブジェクトは、ここが`ACCELERATED`となっていて、通常のアーカイブされたオブジェクトを復元させたのと同じリクエストではエラーになってしまいました。

### 対応方法

こちらに解決策が記載されていました。

[Archiving and accessing cold data - Using the REST API and SDKs - Temporarily restore an archived object](https://cloud.ibm.com/docs/cloud-object-storage?topic=cloud-object-storage-archive#archive-api-restore)

### 復元ツール改善版

[別の記事](https://qiita.com/hirokuda/items/b2244464ba6fc459267c)に記載したツールについて、最後のセルを以下のように修正することで、通常と高速の双方のアーカイブに対応出来るようになりました。

```python
# 取得した一覧のアーカイブを復旧
for item in contents:
    print(item['Key'])
    # StorageClassがGLACIERの場合、通常アーカイブされていると見なして復旧実施 （復旧済みの場合は期限が延長される）
    if item['StorageClass'] == 'GLACIER':
        try:
            print(cosclient.restore_object(Bucket=bucket, Key=item['Key'], RestoreRequest={'Days': duration_days, 'GlacierJobParameters': {'Tier': 'Bulk'}}))
        except Exception as e:
            print(str(e))
    # StorageClassがACCELERATEDの場合、高速アーカイブされていると見なして復旧実施 （復旧済みの場合は期限が延長される）
    elif item['StorageClass'] == 'ACCELERATED':
        try:
            print(cosclient.restore_object(Bucket=bucket, Key=item['Key'], RestoreRequest={'Days': duration_days, 'GlacierJobParameters': {'Tier': 'Accelerated'}}))
        except Exception as e:
            print(str(e))
    else:
        print('Not archived')
```
[チュートリアル]Azure で静的 HTML Web アプリを作成する

### はじめに

勉強も兼ねてWebサイト運営をAzureでサーバーレスでやってみようと思い、調べた結果をまとめていきます。今回は[こちらのチュートリアル](https://learn.microsoft.com/Ja-JP/azure/app-service/quickstart-html)によるAzure App ServiceによるHello Worldからです。

### サンプルをダウンロードする

以下のコマンドでサンプルをダウンロードします。
```
git clone https://github.com/Azure-Samples/html-docs-hello-world.git
```

### サンプルWebアプリを作成する

`az webapp up`コマンドを使ってローカルワークスペースからアプリをデプロイします。
![CreateHelloWebApp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3322105/c8dc7506-46db-8029-10bf-bd61e5d0b863.png)

リソースグループおよびApp Service Plan、App Serviceが作成されたことがわかります。
![ResourceHelloWebApp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3322105/e530d582-cc53-c8c8-9677-6eefc9c1a842.png)


### ブラウザにアクセスする

ブラウザにアクセスするとちゃんとサンプルのWebページが公開できていることが確認できます。
![HelloWebApp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3322105/2778e154-6827-e9f5-6041-08ecbada7e08.png)

### まとめ

サンプルWebアプリを作成しました。一人で触る程度であれば無料でサーバーレスでできそうなのはありがたいです。今後はWebの中身の高度化、App Serviceの機能をもっと掘り下げる、CI/CDを組み込むなど少しずつ幅を広げていきたいです。
DockerでPostgresql環境を作成し、Windowsから接続

# Docker環境の構築
* こちらを参照
[Docker Desktopを使用せずにWSL2でdocker環境を構築](https://qiita.com/bonny_d/items/e2d53fd9e46ab69946bd)

# Postgresqlのコンテナを起動
* 起動コマンド
```
docker run --name postgres -e POSTGRES_PASSWORD=pswd -p 5432:5432 -d postgres
```
* 確認
```
$ docker ps -a
CONTAINER ID   IMAGE      COMMAND                  CREATED       STATUS       PORTS                                       NAMES
2b90e6852821   postgres   "docker-entrypoint.s…"   2 hours ago   Up 2 hours   0.0.0.0:5432->5432/tcp, :::5432->5432/tcp   postgres
```


## 起動コマンドの詳細説明
### --name postgres
* 起動するコンテナに名前をつける
* 上記コマンドの場合"postgres"という名前でコンテナを作起動する
* ```docker ps -a```コマンドだと、"NAMES"に表示される
### -e POSTGRES_PASSWORD=pswd
* -e :環境変数の設定
* POSTGRES_PASSWORD：postgresユーザのパスワードを設定
### -p 5432:5432
* ポートの公開
* コンテナのポート5432を5432として公開
### -d
* デタッチドモードで起動
### postgres
* 起動するイメージ

# Windowsから接続するために、psqlをインストール
## Windowsにpsqlをインストール
* 以下からダウンロード
https://www.enterprisedb.com/downloads/postgres-postgresql-downloads
* インストーラを実行
* 「次へ」で進めて行き、"Select Components"画面で"Command Line Tools"だけを選択する
## 環境変数の設定
* psqlのインストールパスを環境変数に設定する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281492/30469f0b-3635-18f3-b15f-e7fdabd8c9b5.png)

## 確認
* powershellを起動し、psqlを入力してenter　→　エラーにならなければOK
```
> psql
Password for user USER:
```


# Windowsからpsqlで接続
* powershellから下記で接続
```
psql -h localhost -U postgres -d postgres
Password for user postgres: [コンテナ起動時にPOSTGRES_PASSWORDに指定したパスワード]
```
※-U ユーザの指定
※-d データベースの指定
キャンペーン評価の手法  - 評価測定ケースの考察 - 3 

:::note
この本書は2017年4月1日にTeradata Japanのブログに掲載された内容を、再掲載したものです。
掲載内容の正確性・完全性・信頼性・最新性を保証するものではございません。
また、修正が必要な箇所や、ご要望についてはコメントをよろしくお願いします。
:::


著者 山本 泰史 （やまもと やすし）


# 評価測定ケースの考察 - 3

今回、キャンペーン評価の例としてご紹介する最後のケースは、事前段階における必要なレスポンス率の推定、そして実施後における実際の評価と原因の分析例です。

<img width="700" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2768546/996d6e2b-6423-6893-3cba-a9728d43d2f6.png">

5つめのケースは、既存顧客に対して実施するダイレクトメールでのクロスセリングを想定します。採用/棄却の基準は利益率ベースで150％、利益金額ベースで 1億円(100M)以上となっています。また固定経費として 1,000万円(10M)、案内する顧客あたりの変動経費として 1,000円(0.001M)、レスポンスが有り購入した顧客あたりの売上金額が 5万円(0.05M)、粗利金額が 2万5千円(0.025M)で、固定で 100,000名に案内するとします。 この場合、レスポンス率が確定すれば、購入顧客数が確定し、順にキャンペーンの売上金額、粗利金額、経費合計が算出されますので利益金額と利益率が自動的に確定することになります。表計算ソフト等を用いてこのレスポンスを推移させていくと、採用/棄却基準である利益率150％、利益金額 1億円(100M)以上の基準を両方満たすには11％のレスポンスを 100,000名の顧客から獲得すれば良いということは容易に判断できることでしょう。

<img width="700" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2768546/c55b61a3-0821-a2ee-3fda-450e5d25d5bd.png">

これに対して幾つかのセグメンテーション変数を用いて11％のレスポンスを得られるであろう 100,000名のターゲット顧客を選定しました。そしてキャンペーン実施後、実施前の想定と比較して、乖離が発生した部分を分析していきます。 まず何よりも、利益率の結果が必要基準を満たしていません( A )。この理由の一つとしては、( B )固定経費が多少増加していることが分かります。例えば理由が作成したクリエイティブに直前修正が入り、余計な経費がかかってしまった等、原因がシンプルかつオペレーショナルな要因であれば以後気をつければ良いこととして結論付けることが可能でしょう。 これに対して( C )はレスポンス率が予定の11％より低くなってしまったことを示しています。更にこれがキャンペーンにおける購入顧客数、売上金額、粗利金額の低下をもたらしていることが見て取れます。レスポンス率が悪かったということは、発したメッセージに訴求力がなかったか、ターゲティングした顧客が適切でなかったことが想定され、更に原因を深く見ていく必要が有ります。


<img width="700" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2768546/7a3b4b8f-cd7e-b8b2-6307-4cdf57ac75c3.png">

実際に幾つかの分析をしていく中で、最終的に年齢層毎に見た際に大きな結果の乖離があったことが判明したとしましょう。30歳を基準としてレスポンスが大きく下がっていることが分かります。 ダイレクトメールの内容やクロスセリングの商品が若年層向けであったとすればうなずける結果であるということができます。メッセージやクロスセル商品を31歳以上に対してのみ変更し、2パターンにするだけでも効果が有るかもしれません。またターゲティングという観点からはもう一つ注目するべき事実が導き出されます。もし仮に年齢層で絞り込んでおり、30歳以下に絞り込んでいれば、十分な利益率を得られただけでなく、固定経費 1,000万円(10M)を差し引いても利益金額が十分であったことが伺えます。


ここでは分かりやすくするために、非常に素朴な年齢という属性を用いており、改善アクションとしてはダイレクトメールの内容を2種類にするという方法を選定していますが、実際には絞込みのための変数をより複雑に( = 顧客の多様性に合わせて)適用させることによっても、ダイレクトメールをパーソナライズさせることによっても(多少コストは上がるかもしれませんが)レスポンス率の改善を期待することはできるでしょう。 重要な点は、このような形で最初の仮説/想定と実際の結果を比較すること、これらを分解した形で把握することによって、何が悪かったのかを理解することが分かるようになることです。そしてこれらを分析し、悪かった原因を突きとめることによって、次回以降のキャンペーンに活かすことが可能となります。




#### Teradata Vantageへのお問合せ
[Teradata Vantage へのお問合せ](https://www.teradata.jp/About-Us/Contact)
[firebase] ドキュメントの追加

# ドキュメントの追加

## ドキュメントIDを指定して追加(全上書き)
```jsx:App.jsx
import { db } from '../firebase';
import { doc, setDoc } from 'firebase/firestore';

const docRef = await setDoc(doc(db, "コレクション名", "ドキュメント名"), data);
    } catch (e) {
        console.error(e);
    }
```

* dataはオブジェクトを格納できる
```jsx
const docRef = await setDoc(doc(db, "コレクション名", "ドキュメント名"), {
            data1: "",
            data2: "",
        });
```

## IDを指定しないで追加（全上書き）
```jsx:App.jsx
import { db } from '../firebase';
import { doc, setDoc } from 'firebase/firestore';

const docRef = await setDoc(doc(db, "コレクション名"), data);
    } catch (e) {
        console.error(e);
    }
```

* 該当するコレクションやドキュメントがあれば上書き、なければ新規作成される

## データをネストしたい場合（全上書き）
* 例えば「都道府県」というデータの中に「市町村区」というドキュメントを格納しその中にフィールドを作成したい場合
```jsx:App.jsx
import { db } from '../firebase';
import { doc, setDoc } from 'firebase/firestore';

const docRef = await setDoc(doc(db, "都道府県", "東京", "市町村区", "新宿区"), data);
    } catch (e) {
        console.error(e);
    }
```
* なおsetDocの引数は必ずdb + (コレクション + ドキュメント)となるため必ず奇数にしなければならない

## データの一部を更新したい場合
```jsx:App.jsx
import { db } from '../firebase';
import { doc, setDoc } from 'firebase/firestore';

const docRef = await updateDoc(doc(db, "コレクション名", "ドキュメント名"), data);
    } catch (e) {
        console.error(e);
    }
```
ChatGPTを音声入力できる拡張機能（Google Chrome）

# Google拡張機能をインストールする
https://chrome.google.com/webstore/detail/voice-control-for-chatgpt/eollffkcakegifhacjnlnegohfdlidhn?hl=ja

# ChatGPTを確認し、音声ツールが反映されていることを確認する
**【反映前】**
![スクリーンショット 2023-05-08 11.50.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079289/be519b62-2365-52fd-26c3-f9922cad0538.png)

**【反映後】**
![スクリーンショット 2023-05-08 11.51.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079289/755255fd-248c-68c7-28db-ba9870a746f1.png)

# 使用方法
マイクボタンを押し続けることで、音声入力することができるようになります。またはテキストにカーソルを選択しない状態で、スペースキーを押し続けることでも、音声入力することができるようになります。
![スクリーンショット 2023-05-08 11.59.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079289/c0dfa2aa-e651-7f3e-3024-57c3f6bf1942.png)

# 注意事項
- この機能を使用する際は、マイクの機能を使用する必要があるため、ChatGPT上でマイクの使用許可を設定する必要があります。

# この記事は誰向けの記事か？
- ChatGPTを音声入力したいと考えている人

# 環境
- OS：macOS 13.3.1（22E261）
- ブラウザ：Google Chrome 112.0.5615.137（Official Build） （arm64）

# 本記事における注意事項
- 本記事は、備忘録としてまとめたものになります。
- 他の方の参考になる可能性も踏まえて、一般公開も行なっております。
- また記載内容はすべて、正しい内容が記載されているとは限りません。
- 誤った内容を見つけた場合は、ご指摘をお願いいたします。
フリーランスになるときのまとめ


フリーランスになる際の手続きと注意点を詳しくわかりやすくまとめました。

## 1. 必須の手続き

### 1.1 国民健康保険への加入、または任意継続制度の利用

会社の健康保険から国民健康保険に切り替える必要があります。任意継続制度を利用することもできますが、手続きの詳細は担当窓口で確認しましょう。国民健康保険は、市区町村が運営し、医療費の一部を補助する制度です。

### 1.2 国民年金への加入

会社の年金から国民年金に切り替える必要があります。市役所や区役所で手続きができます。国民年金は、老後の生活費を補助するための制度で、加入者全員が加入することが義務付けられています。

### 1.3 開業届けの提出と青色申告手続き

税務署に開業届けを提出し、税金のメリットを得るために青色申告を行いましょう。開業後1ヶ月以内に手続きが必要です。青色申告は、確定申告の際に利用できる制度で、一定額の損金控除が受けられます。

## 2. 便利な環境整備

### 2.1 事業用の銀行口座とカードの作成

確定申告を楽にするために、事業用の銀行口座とカードを作成し、個人用と分けて管理しましょう。これにより、事業に関連する収入や支出を一元管理でき、確定申告時の書類作成がスムーズになります。

### 2.2 会計ソフトの導入

確定申告に役立つ会計ソフトを導入しましょう。有名なものにはfreee会計やMoney Forwardがあります。これらのソフトウェアは、収入や支出の記録や整理、税金計算などを効率的に行えるように設計されています。

### 2.3 経費にできるものの整理

課税対象額を減らすために、経費として申告できるものを整理しましょう。具体的な項目については税理士や専門家に相談しましょう。交通費、通信費、広告宣伝費など、事業運営に必要な費用は経費として計上できますが、適切な証明書類を保管しておくことも重要です。

### 2.4 確定申告を税理士に依頼するか自分で行うかの選択

確定申告を税理士に依頼する場合は、早めに依頼しましょう。税理士に依頼することで、専門家のアドバイスを受けられるほか、確定申告の手間やミスが減ります。一方で、自分で行う場合は、無料の申告支援ソフトや税務署の窓口での相談を活用しましょう。

### 2.5 idecoや小規模企業共済への加入検討

退職金代わりのidecoや小規模企業共済への加入を検討しましょう。税制上のメリットもありますが、専門家に相談してから決めましょう。これらの制度は、将来の老後資金や安定した収入のために、積立を行うものです。

### 2.6 クレジットカードやローンを組んでおく

フリーランスになると、新たにクレジットカードを作成したり、ローンを組むことが難しくなることがあります。そのため、予定があれば会社員のときに手続きを済ませておくことが良いと言われています。また、信用情報の管理にも注意しましょう。

これらの手続きや環境整備を行うことで、フリーランスとしてスムーズに仕事ができるようになります。専門家に相談しながら、自分に合った環境を整えていきましょう。
[React] 関数の外だしと使用

# 関数を外だししてどのファイルでも使えるようにしたい

## export defaultを使用
```jsx:export.js
export default async function export() {
    // 処理
    }
    return null;
}

```
* export defaultは1ファイル1つしか使用できないので注意

```jsx:import.js
import export from 'path';

function import(){
    export();
}

```

## 関数で処理したデータを他のコンポーネントで使用
* ログイン情報などを共通で取得し、取得した値を他のコンポーネントで使用したい場合
```jsx:export.jsx
import { getAuth } from 'firebase/auth';

export function getCurrentUser() {
    // ログインユーザーを取得
    const auth = getAuth();
  return auth.currentUser;
}
```

```jsx:import.jsx
import { getCurrentUser } from '../action/Auth.jsx';

import.jsx(){
    const currentUser = getCurrentUser();
}
```
* この場合export default とはしない。
Laravelでいろんなフラッシュメッセージを出す！

# フラッシュメッセージとは
ログインした時や削除した時に「ログインしました」や「削除しました」などの表示が出てきます。
これがフラッシュメッセージです。

![スクリーンショット 2023-05-08 12.42.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/e0d3fa0e-4c44-0786-1fa8-4b006b40ff7d.png)


# ユーザー退会時のフラッシュメッセージ
都合によりコードは一部省略します。

```UsersController.php
public function destroy($id)
    {
        #省略
        {
            $user->delete();
        } 
        return redirect('/')->with('alertMessage', '退会が完了しました');　//ここを追記
    }
```
```show.blade.php
@if (session('alertMessage'))
  <div class="alert alert-danger text-center w-25 mx-auto">
    {{ session('alertMessage') }}
  </div> 
@endif
```
表示したい箇所に以下のコードを書きました。このようなフラッシュメッセージができました。

![スクリーンショット 2023-05-08 12.50.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/3c80eb93-c21d-3e46-10d1-9cd48f15a1e6.png)


# ユーザー更新時のフラッシュメッセージ
ユーザーデータが更新された時のフラッシュメッセージです。

```UsersController.php
 public function update(UserRequest $request, $id)
    {
        #省略
        return redirect()->route('users.show', $user->id)->with('successMessage','ユーザー情報を更新しました。');
    }
```
コントローラーに上のようにsuccessMessageを追記しました。


```show.blade.php
@if (session('alertMessage'))
    <div class="alert alert-danger text-center w-75 mx-auto">
        {{ session('alertMessage') }}
    </div> 
@elseif (session('successMessage'))
    <div class="alert alert-success text-center w-75 mx-auto ">
        {{ session('successMessage') }}
    </div>
```
***alertMessageの後をif文でsuccessMessageを追記しました。***
表示したい箇所に実装します。show.blade.phpに追記しました。

これでみたいな表示が出ました。

![スクリーンショット 2023-05-08 13.02.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/71b391bb-1b1c-5425-b686-a124a26e0b22.png)


# ユーザ新規登録が完了時のフラッシュメッセージ
RegisterControllerで実装するので注意してください。

```Auth/RegisterController.php
#省略
use Illuminate\Http\Request;

#省略

 protected function registered(Request $request,$user)
    {
        session()->flash('successMessage','ユーザー登録が完了しました。');
        return redirect('/');
    }
```
これで実装ができました。show.blade.phpは使い回しができたので新しく実装はしなかったです。

![スクリーンショット 2023-05-08 13.17.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/d2bbdb4e-3304-33fb-b918-516b765ccabe.png)



# ユーザーログイン時のフラッシュメッセージ
これも実装箇所がユーザー退会の時と違うので注意してください。

```Auth/LoginController.php
#省略
use Illuminate\Http\Request;

#省略

protected function authenticated(Request $request,$user)
    {
        session()->flash('successMessage','ログインしました');
        return redirect('/');
    }
```

これで出力されました。show.blade.phpは使い回しができたので新しく実装はしなかったです。


![スクリーンショット 2023-05-08 12.42.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/e0d3fa0e-4c44-0786-1fa8-4b006b40ff7d.png)



# 資料

https://www.kamome-susume.com/laravel-flash-message/
正三角形の中に、傾いた正五角形(角度)。高校入試「2023京都府高校入試数学【１】(8)」をWolframAlphaとsympyでやってみたい。勉強中?

教えて下さい。
まず、「2023京都府高校入試数学」の**問題を見てから、私の疑問を見てもらうと助かります。** 
私の疑問は、ページ後半にあります。
(大学入試問題で)改題を出題されたらどうしよう状態です。

# 問題【１】(8)
問題は,pdfの2ページ目の下部にあります。(8)です。
https://sabotensabo.com/wp-content/uploads/m2023kyoto1.pdf#page=2

# youtubeの解説。２通り

方法①EFを延長して,交点(新点)を作る。解説は、広告後18:38にジャンプします。

https://www.youtube.com/live/De-HAitGRMI?feature=share&t=1118

方法②BFに補助線を追加した。解説は、広告後5:35にジャンプします。

https://youtu.be/yzdfqcWKWSY?t=335

https://www.wolframalpha.com/input?i=Solve%5B%28180-a-108%29%2B60%2B%28180-x-108%29%3D108%2Cx%5D&lang=ja

結果
x = 96 - a


# (追加)申し訳ありません。自己解決しそうです。
**「右の図のように」** 
「問題文をよく読めよ。」でした。ありがとうございました。

# 疑問
教えて下さい。
気になった？のは、正五角形の辺の長さです。
**改題1.AEの長さが短いと、正五角形ができないと思います。**
**改題2.最小,最大の正五角形を求めよ。問題として成立しますか？**
アドバイス、過去問を紹介してもらうと助かります。
よろしくお願いします。


# ?sympyで
勉強中。
まじめに？いつの日にか
sympyの座標の成分表示でやってみたい。

# 参考

https://qiita.com/mrrclb48z/items/b7742bd57151dc35fdf6
AWS MFAとは？ 利点や設定手順を解説


  
AWSを利用する際に重要なセキュリティ対策の一つ、MFAデバイスの設定方法をわかりやすく解説します。初心者でも手軽に実践できる方法をご紹介するので、ぜひ参考にしてみてください。

# 1. はじめに

## 1.1. AWS MFAデバイスの重要性

AWSを利用する際、アカウントのセキュリティが大変重要です。MFAデバイスはアカウントへのアクセスをより安全にし、不正アクセスを防ぐための効果的な方法です。

## 1.2. 本記事の目的

本記事では、初心者でも簡単に理解できるように、AWSのMFAデバイスの設定方法を解説します。

# 2. MFAの概要

## 2.1. MFAとは何か？

MFA（Multi-Factor Authentication）とは、アカウントへのログイン時にパスワードだけでなく、別の認証方法を追加することで、セキュリティを強化する方法です。

## 2.2. MFAの利点

MFAを使用することで、もしパスワードが漏洩しても、第二の認証があるため不正アクセスを防ぐことができます。

# 3. AWS MFAデバイスの種類

## 3.1. 仮想MFAデバイス

仮想MFAデバイスは、スマートフォンにインストールした認証アプリを使用して、一定時間ごとに変わる認証コードを生成します。

## 3.2. U2Fセキュリティキー

U2Fセキュリティキーは、専用のハードウェアデバイスをUSBポートに接続して、物理的な認証を行います。

## 3.3. それぞれの違いと選択のポイント

仮想MFAデバイスはスマートフォンがあればすぐに利用でき、手軽です。一方、U2Fセキュリティキーは専用デバイスが必要ですが、より強固なセキュリティを提供します。それぞれのニーズや状況に応じて選択しましょう。

# 4. 仮想MFAデバイスの設定方法

## 4.1. 対応する認証アプリの選択とインストール

まず、スマートフォンにGoogle AuthenticatorやAuthyなどの認証アプリをインストールしましょう。

## 4.2. AWS Management ConsoleでのMFAデバイス有効化手順

1.  AWS Management Consoleにサインインします。
2.  アカウント名またはアカウントIDの隣にあるドロップダウンメニューをクリックし、「My Security Credentials」を選択します。
3.  "Multi-Factor Authentication (MFA)" セクションを展開し、"Activate MFA" をクリックします。

## 4.3. QRコードのスキャンとアプリの設定

1.  「仮想MFAデバイス」を選択し、表示されるQRコードをスキャンしてアプリにアカウントを追加します。
2.  アプリから生成された二つの連続するMFAコードを入力し、「Activate MFA」をクリックして、MFAデバイスを有効化します。

# 5. U2Fセキュリティキーの設定方法

## 5.1. セキュリティキーの選択

U2Fセキュリティキーを利用する場合は、互換性のあるセキュリティキーを購入しましょう。

## 5.2. AWS Management ConsoleでのMFAデバイス有効化手順

1.  AWS Management Consoleにサインインします。
2.  アカウント名またはアカウントIDの隣にあるドロップダウンメニューをクリックし、「My Security Credentials」を選択します。
3.  "Multi-Factor Authentication (MFA)" セクションを展開し、"Activate MFA" をクリックします。

## 5.3. セキュリティキーの登録と有効化

1.  「U2Fセキュリティキー」を選択し、セキュリティキーをUSBポートに接続します。
2.  表示される指示に従って、セキュリティキーを登録し、有効化します。

# 6. MFAデバイスを使用したログイン方法

## 6.1. 仮想MFAデバイスでのログイン

ログイン時に、パスワードの入力後、認証アプリで生成されたMFAコードを入力してログインします。

## 6.2. U2Fセキュリティキーでのログイン

ログイン時に、パスワードの入力後、セキュリティキーをUSBポートに接続し、表示される指示に従って認証を行います。

# 7. MFAデバイスのトラブルシューティング

## 7.1. MFAデバイスの紛失や変更

MFAデバイスを紛失した場合や新しいデバイスを登録する場合は、AWSサポートに連絡して対応してもらいましょう。また、予めリカバリーコードをメモしておくことで、自分で対処することができます。

## 7.2. MFAコードが機能しない場合の対処法

MFAコードが機能しない場合は、以下の対処法があります。

1.  時刻同期: スマートフォンの時刻が正しいか確認し、必要に応じて修正してください。
2.  再スキャン: QRコードを再度スキャンして、アカウントを認証アプリに再登録してください。
3.  AWSサポートに連絡: 上記方法で解決しない場合は、AWSサポートに問い合わせて対応を依頼しましょう。

# 8. まとめ

## 8.1. AWS MFAデバイスの重要性の再確認

本記事では、AWSのMFAデバイスの設定方法を初心者向けに解説しました。MFAデバイスは、AWSアカウントのセキュリティを向上させるための重要な要素です。

## 8.2. 今後のセキュリティ対策への意識の向上

MFAデバイスの設定だけでなく、パスワードの強化や定期的なセキュリティチェックなど、さまざまなセキュリティ対策を総合的に行うことが重要です。今後もセキュリティに対する意識を高め、安全なAWS利用を心がけましょう。
Laravelでブラウザのタブなどに表示されるアイコン(ファビコン)作成方法

# ファビコンとは
***ブラウザのタブなどに表示されるWebサイトのアイコン***です。

ex) 
Youtube ChatGpt GitHub のようなアイコンです。
![スクリーンショット 2023-05-08 12.13.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/520bafb3-764f-0f75-76b3-4050e698328b.png)


# 画像作成
ファビコンジェネレーターでまずは画像を作成しました。

https://favicon-generator.mintsu-dev.com/

自分は野球ボールのアイコンを作成しました。このサイトからダウンロードしました。

![baseball.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/05c9fe7e-799c-84e1-d783-66602bea9665.png)

作成方法はいろんなやり方あるみたいなので調べてください。




# imagesを作成
***public配下にimagesフォルダを作成してその中に上でダウンロードした野球ボールの画像をペースト***してきました。

![スクリーンショット 2023-05-08 12.16.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/fa7ae437-5c4e-7fa7-1062-c1733eea6b82.png)
!


# app.blade.phpに追記
Laravelフレームワークのビューの1つであり、アプリケーションの共通レイアウトを定義するために使うのがapp.blade.phpです。ここに追記していきます。

```app.blade.php
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>野球好きの掲示板</title>
       #都合により省略
        <link rel="shortcut icon" href="{{ asset('images/baseball.png') }}">　//このコードを追記
    </head>
```

```<link rel="shortcut icon" href="{{ asset('') }}">```は人によって内容が違うのでこれを実装してみてください。

こうして野球ボールがアイコンになりました。右側のアイコンです。
サイトの中のどのページに移動してもこのアイコンは表示されます。

![スクリーンショット 2023-05-08 12.25.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/dfa34136-a198-911e-735e-a8d81a512e02.png)



# 資料

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

https://ramble.impl.co.jp/3503/#toc3

https://qiita.com/Towatowa/items/700e74f4751f3f21f8af
スタティック ルート、アグリゲート ルート、生成ルート

https://qiita.com/virazoor/items/2607649857b982f3b515

# アグリゲートルート
アグリゲートルート（AE）は、複数の物理インターフェースを束ねて1つの論理インターフェースとして扱う技術です。この技術を使用することで、冗長性や負荷分散を実現することができます。

### アグリゲートルートの構成要素
アグリゲートルートは、複数の物理インターフェースと1つの論理インターフェース（AEインターフェース）から構成されます。また、AEインターフェースには、モードやプロトコルなどの設定を行う必要があります。

## アグリゲートルートの設定
アグリゲートルートを設定するには、以下の手順が必要です。
	1. AEインターフェースの作成
	2.物理インターフェースの設定
	3.AEインターフェースのプロトコルの設定
	4. AEインターフェースのリンクの確認

## アグリゲートルートの動作
アグリゲートルートは、**Active/Passive**モードまたは**Active/Active**モードで動作することができます。また、アグリゲートルートの負荷分散には、**リンクごとの負荷分散**と、**LACP（Link Aggregation Control Protocol)** による負荷分散の2つの方法があります。


# スタティックルート
スタティックルートは、手動で構成されたネットワークルートであり、ルーティングプロトコルによって自動的に学習されるルートとは対照的です。スタティックルートは、常に同じネクストホップアドレスまたはインターフェースを使用するため、ルーティングテーブルが動的に更新される必要がないため、ルーティングテーブルの効率的な使用に役立ちます。

#### 注意点
スタティックルートは、ルーティングプロトコルが使用できない状況で有用です。たとえば、ネットワークの特定の部分に障害が発生した場合、スタティックルートを使用して、その部分をバイパスし、ネットワークトラフィックを別の経路に転送することができます。


# 生成ルート
生成ルートとは、手動で設定された静的な経路であり、ルーティングテーブルに存在しない特定のネットワークへのルートを作成するために使用されます。これは、ルーティングプロトコルによって自動的に学習されたルートを上書きすることができます。生成ルートは、特定のトラフィックがどのような方向に送信されるかを指定するために使用されます。

#### 注意点
生成ルートは、構成が簡単で、適切に使用することでネットワークのパフォーマンスを向上させることができます。ただし、手動で設定するため、ネットワークの変更があった場合には、生成ルートの更新が必要になります。

Juniperルータで生成ルートを設定するには、
以下の手順に従います。
1.生成ルートを設定するネットワークを決定する
2.生成ルートのネクストホップ（次のホップ）を決定する
3.生成ルートを設定する
4.設定が正しいことを確認する

これらの手順に従って、生成ルートを正しく設定することができます。生成ルートを使用することで、より柔軟なネットワーク設計を実現し、特定のトラフィックが必要な方向に送信されるようにすることができます。
[Git] 動作を試す 実行例16：checkoutで履歴中の前後のコミット位置へ移動する

Gitの動作を理解するために、Gitのコマンドを実際に試して、結果を見てみました。

1つの記事内で一連のGitコマンドが完結しているので、これら一連のコマンドを順に実行させて結果を見ることで、一連のGitの動作を実際に体感でき、一通り独習することが可能です。

※前回記事のリポジトリ状態からの続きになっています。
| [前回記事へ](https://qiita.com/dl_from_scratch/items/74c938554af8dc8f5acc) | [目次へ：Git関連記事のまとめページ](https://qiita.com/dl_from_scratch/items/597bc28a4787a7901d21) | [次回記事へ](https://qiita.com/dl_from_scratch/items/17d2906d768a1ddee427) |
|:-:|:-:|:-:|

# 実行例

```
(※始めに内容を確認)
type test1.txt
↓
結果: 
Sample-Added-11
Sample-Added-12
Sample-Added-13
Sample-Added-14

(※始めにコミットSHA値を調べる)
git log --oneline
↓
結果: 
94996a0 (HEAD -> master) message4
20bbab7 message3
00cad71 message2
4ace194 message1

git checkout 20bbab7
↓
結果: 
Note: switching to '20bbab7'.

You are in 'detached HEAD' state. You can look around, make experimental
changes and commit them, and you can discard any commits you make in this
state without impacting any branches by switching back to a branch.

If you want to create a new branch to retain commits you create, you may
do so (now or later) by using -c with the switch command. Example:

  git switch -c <new-branch-name>

Or undo this operation with:

  git switch -

Turn off this advice by setting config variable advice.detachedHead to false

HEAD is now at 20bbab7 message3

type test1.txt
↓
結果: 
Sample-Added-11
Sample-Added-12
Sample-Added-13

git log --oneline
↓
結果: 
20bbab7 (HEAD) message3
00cad71 message2
4ace194 message1

-----

git checkout master
↓
結果: 
Previous HEAD position was 20bbab7 message3
Switched to branch 'master'

type test1.txt
↓
結果: 
Sample-Added-11
Sample-Added-12
Sample-Added-13
Sample-Added-14

git log --oneline
↓
結果: 
94996a0 (HEAD -> master) message4
20bbab7 message3
00cad71 message2
4ace194 message1

-----

※untrackedなファイルがある場合に移動すると、そのまま引き継がれて残る。
echo Sample-Added-11 > test101.txt
git checkout 00cad71
↓
結果: 
Previous HEAD position was 94996a0 message4
HEAD is now at 00cad71 message2

dir /b
↓
結果: 
test1.txt
test101.txt
test2.txt

-----

※untrackedなファイルと移動先のファイルで名前が同じになる場合に移動すると、移動中止になる。
echo Sample-Added-**41 > test4.txt
git checkout 94996a0
↓
結果: 
error: The following untracked working tree files would be overwritten by checkout:
        test4.txt
Please move or remove them before you switch branches.
Aborting

git log --oneline
↓
結果: 
00cad71 (HEAD) message2
4ace194 message1

※untrackedなファイルを全て削除。
git clean -f
↓
結果: 
Removing test101.txt
Removing test4.txt

git checkout 94996a0
↓
結果: 
Previous HEAD position was 00cad71 message2
HEAD is now at 94996a0 message4

git log --oneline
↓
結果: 
94996a0 (HEAD, master) message4
20bbab7 message3
00cad71 message2
4ace194 message1

dir /b
↓
結果: 
test1.txt
test2.txt
test4.txt
```

# 環境

Windows 10、PortableGit-2.40.0-64-bitを使用、全てローカルPC上で実施、GitHub等は不使用。
[Git] 動作を試す 実行例15：configで設定して日本語ファイル名を表示する

Gitの動作を理解するために、Gitのコマンドを実際に試して、結果を見てみました。

1つの記事内で一連のGitコマンドが完結しているので、これら一連のコマンドを順に実行させて結果を見ることで、一連のGitの動作を実際に体感でき、一通り独習することが可能です。

※前回記事のリポジトリ状態からの続きになっています。
| [前回記事へ](https://qiita.com/dl_from_scratch/items/1e36862ba67bf424a764) | [目次へ：Git関連記事のまとめページ](https://qiita.com/dl_from_scratch/items/597bc28a4787a7901d21) | [次回記事へ](https://qiita.com/dl_from_scratch/items/08536939844317c6959c) |
|:-:|:-:|:-:|

# 実行例

```
echo Sample-Added-あいう●🔴 > testあいう●🔴.txt
git status
↓
結果: 
On branch master
Untracked files:
  (use "git add <file>..." to include in what will be committed)
        "test\343\201\202\343\201\204\343\201\206\342\227\217\360\237\224\264.txt"

※gitで日本語ファイル名を表示する
git config --global core.quotepath false

(※以降は内容確認用のコマンド実行)
git status
↓
結果: 
On branch master
Untracked files:
  (use "git add <file>..." to include in what will be committed)
        testあいう●🔴.txt

git add .
git diff --staged
↓
結果: 
diff --git a/testあいう●🔴.txt b/testあいう●🔴.txt
new file mode 100644
index 0000000..ee87692
--- /dev/null
+++ b/testあいう●🔴.txt
@@ -0,0 +1 @@
+Sample-Added-<82><A0><82><A2><82><A4><81><9C>??

git restore --staged .
git clean -f
↓
結果: 
Removing testあいう●🔴.txt
```

# 環境

Windows 10、PortableGit-2.40.0-64-bitを使用、全てローカルPC上で実施、GitHub等は不使用。
[Git] 動作を試す 実行例14：.gitignoreでバージョン管理から外す

Gitの動作を理解するために、Gitのコマンドを実際に試して、結果を見てみました。

1つの記事内で一連のGitコマンドが完結しているので、これら一連のコマンドを順に実行させて結果を見ることで、一連のGitの動作を実際に体感でき、一通り独習することが可能です。

※前回記事のリポジトリ状態からの続きになっています。
| [前回記事へ](https://qiita.com/dl_from_scratch/items/a56a161c6654240cb0b4) | [目次へ：Git関連記事のまとめページ](https://qiita.com/dl_from_scratch/items/597bc28a4787a7901d21) | [次回記事へ](https://qiita.com/dl_from_scratch/items/74c938554af8dc8f5acc) |
|:-:|:-:|:-:|

# 実行例

.gitignoreファイルやGitコマンドでバージョン管理から外す方法
https://engineer-lifestyle-blog.com/code/gitignore-file-and-command-to-exclude/

```
.gitignoreの配置: 
├.git/
└.gitignore

.gitignoreの内容例: 
│# comment
│abc.log
│bin/
│# comment
│/abc.log
│/bin/
│# comment
│.vs/
│*.pyc
│/**/*.o
└# comment

-----

(※ひとまず適当にファイルを作成)
echo Test-Ignore1 > test1.test-ignore
mkdir test-ignore
echo Test-Ignore2 > test-ignore/test2.test-ignore

dir /b
↓
結果: 
test-ignore
test1.test-ignore
test1.txt
test2.txt
test4.txt

git status
↓
結果: 
On branch master
Untracked files:
  (use "git add <file>..." to include in what will be committed)
        test-ignore/
        test1.test-ignore

-----

※.gitignoreでバージョン管理から外す
echo *.test-ignore > .gitignore

git status
↓
結果: 
On branch master
Untracked files:
  (use "git add <file>..." to include in what will be committed)
        .gitignore

-----

echo /*.test-ignore > .gitignore

git status
↓
結果: 
On branch master
Untracked files:
  (use "git add <file>..." to include in what will be committed)
        .gitignore
        test-ignore/

echo / *.test-ignore > .gitignore

git status
↓
結果: 
On branch master
Untracked files:
  (use "git add <file>..." to include in what will be committed)
        .gitignore
        test-ignore/
        test1.test-ignore

-----

echo *-ignore/ > .gitignore

git status
↓
結果: 
On branch master
Untracked files:
  (use "git add <file>..." to include in what will be committed)
        .gitignore
        test1.test-ignore

-----

(※始めの状態に戻す)
del .gitignore
git clean -f -df

git status
↓
結果: 
On branch master
nothing to commit, working tree clean
```

# 環境

Windows 10、PortableGit-2.40.0-64-bitを使用、全てローカルPC上で実施、GitHub等は不使用。
【個人開発】喜び、楽しみを見つけるアプリ「O・KI・RAKU（お喜楽）」

# はじめに
　2023年1月から4ヶ月ディープロ（旧dive into code）で学習していた@rrkrgftです。
　卒業制作として作成したアプリのOKIRAKUについてのご紹介です。

【アプリのリンク】
　https://okiraku.website/top

【GitHubのリンク】
　https://github.com/rrkrgft/okiraku

# アプリOKIRAKUとは
　アプリOKIRAKUは、自分の「喜び、楽しみ」を見つけるお手伝いをするアプリです。

# アプリ開発の経緯
　自分の人生で悩んでいた時に、「どういう人生を送りたいか。」、その答えを探していた中で「喜びの多い人生、楽しい人生」を送りたいと言う答えは見つかりました。ただ、自分にとっての喜び、楽しい人生とは何なのかがすぐにはわかりませんでした。
　そのため、自分の喜び、楽しいものは何なのかを見つけるために、自分は楽しいことなどがあった時にノートに書き溜めたり、面白そうなことを積極的に経験するようにしました。そうすることで、少し自分の喜び、楽しいことが何かを見つけることができました。
　ただ、自分は一人でノートに書いたりするだけしかできなかったのですが、アプリであれば、もっと色々なことができると思い開発しました。

# OKIRAKUの特徴
アプリOKIRAKUは喜び、楽しみを見つけるために、以下の機能をつけました。
- 楽しいこと、嬉しいことの投稿ができる機能
- 他の人の投稿で、自分が興味を持った投稿に対してのお気に入り機能
- 楽しいこと、嬉しいことの投稿や他の人の投稿を利用した分析機能

## 楽しいこと、嬉しいことの投稿ができる機能
　画像のように楽しいこと、嬉しいことの投稿ができます。
　![b2ee44cfcca6559281f0e75828ad35bc.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3119768/2924a212-c58a-326f-b86c-055c7d05cb4d.png)
投稿できるところでは以下の特徴があります。
- 詳細（非公開）
あまり他の人には見られたくない内容についても書けるようにして、自分の本当の気持ちを書けるようにしました。

- 深掘り
詳細に書いた内容に対して、どこに幸せを感じたのかを振り返れるようにしました。（どこに幸せを感じるかは人によって違うので、そこを深掘りできるようにしました）例えば、パフェを友達に行った場合に、「美味しいパフェを食べられて、それを作ってくれた人に感謝の気持ちができた」や、「美味しいものを仲の良い人と食べに行けて嬉しかった」など人により何に楽しいと思うかが違うので、そこを深掘りできるようにしました。

- 深掘りの非公開
深掘りについても人に見られたくないと思う内容も安心して書けるように非公開ボタンをつけています。

- 嬉しい度
嬉しいと感じた度合いについても振り返ることができるようにしています。

- ラベル
ラベルで内容の概要がつけられます。（ラベルについては、初期に自動で登録されるのと、個人に合わせて追加が可能）

## 他の人の投稿で、自分が興味を持った投稿に対してのお気に入り機能
　他の人の投稿で楽しそうだと思ったものをお気に入り登録ができます。
![1cab9a086748b3692ea11ef57da72088.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3119768/d07746ad-b6d9-1fbe-7e3b-841af9e99a7d.png)

## 楽しいこと、嬉しいことの投稿や他の人の投稿を利用した分析機能
 自分の投稿のページから分析機能を使用可能です。ChatGPTを使用した分析かChatGPTを使用しない分析機能を選べます。（ChatGPTによる分析をする場合は画面遷移に時間を要するため分けています）
![e9e19a1e28c05e184150cf712b629bbd.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3119768/72c559b8-e47d-bba6-895b-559ec8f93da8.png)

分析ボタンを押すと下記のような形で分析結果を出してくれる。
- 自分の投稿、お気に入りした投稿のラベル個数を表に出してくれる。
→ 自分の投稿のラベルの傾向とお気に入りの投稿のラベルの傾向を見れることでどのようなことを自分が好きかの傾向を見ることができます。
- 自分の投稿のラベルを嬉しい度によって重み付をして円グラフで出してくれる。
→ 自分の投稿のラベルと嬉しい度の重み付により、より嬉しいと思ったラベルの割合が大きくなり、個数と合わせて傾向が見ることができます。
- 自分の投稿から文字を抜き出し多く出てきた言葉を視覚的に見える。
→ 投稿の際に多く出てきた単語を見ることで、どのようなことを楽しいと思ったかが視覚的にわかる。
- ChatGPTによるアドバイスをもらえる。
→ ChatGPTによるアドバイスで自分の楽しいと思うことのアドバイスをもらえる。

![80f48bf330ac6cadcc363ead24b8b779.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3119768/261794bd-0bb1-4bdc-46b4-611d626c5fc1.png)
![6efe67ad5ce3de30710ae69a48f17f4a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3119768/41a142f4-0955-e8f6-c19d-2599a59e3f37.png)

# 使用したGEMなど
　devise ログイン機能
　cancancan　管理者権限
　ransack　検索、並び替え
　LazyHighCharts　グラフなど（JavaScriptで読み込み）
　MeCab　形態素解析（文字の抽出）（インストール）
　Natto　MeCabを簡単にRubyで使う
　ruby-openai　ChatGPTを使用するため
　AWSの実装　（EC2、S3、Route53、SESを使用）

# さいごに
　最後までご覧いただきありがとうございます。
　これからも技術を伸ばしていき、役に立つアプリを作成できればと思っております。