OmniAICreator/Qiita-1.07M huggingface dataset:
【JavaScript】ESMとCJSの違い

調べた範囲の📝です。マサカリ歓迎しております_(´ཀ`」 ∠)_

# ざっくりと

ESM（Ecma Script Module）：モダン（新しい）。ブラウザはこちらのみ。Node.jsも対応済み。
CJS（Common JS Module）：Node.jsの伝統的なモジュールシステム。
# Node.js において

ファイル名
- `.mjs` ファイル
  - 常にESM（Ecma Script Module）として扱われる
- `.cjs` ファイル
  - 常にCJS（Common JS Module）として扱われる

`package.json`の`"type"`フィールド
- `"type": "module"`
  - そのディレクトリ内の`.js`ファイルがESMとして扱われる
- `"type": "commonjs"`
  - そのディレクトリ内の`.js`ファイルがCJSとして扱われる

モジュールの読み込みメソッド
- `import`
  - 非同期的
  - 拡張子を明示する（`import './module.js'`）
  - ESM・CJSともに読み込みが可能
- `require`
  - 同期的
  - 拡張子を省略できる（`require(./module)`）
  - CJSのみが対象だったが、Node.js 22にてESMも対応開始。現在は特別に宣言した時だけだが、将来的にはデフォルトになる予定

https://nodejs.org/en/blog/announcements/v22-release-announce

# ブラウザにおいて

呼び出しの属性
- `<script type="module">`
  - この呼び出しを行う場合、そのスクリプトはESMとして扱われる

注意事項
- CJSには対応していない
- `require`には対応していない

# その他

ESM
- トップレベルの`await`が使用可能
  ```js
  import { fetchData } from './fetchData.mjs';
  
  const data = await fetchData('https://api.example.com/data');
  console.log(data);
  ```

CJS
- 即時実行（モジュールをインポートした際に、そのモジュールが即時に実行される）
```js:logger.js
// CJSモジュール
console.log('Logger module loaded');
```

```js:app.js
// CJSモジュール
require('./logger'); // "Logger module loaded" と表示される
```

# 参考

https://zenn.dev/ikenohi/scraps/22785193fb63a6
Material React Tableの全選択チェックボックスですべてのページの行を選択できるようにする


## やりたいこと

Material React Tableの全選択チェックボックスですべてのページの行を選択できるようにしたい！

## 背景

Material React Tableの表の全選択チェックボックスでは、特に何もしない限り、表示されているページの行のみ全選択されます。しかし、たまたま表示されていないページも含めて全選択したくなりましたので、なんとかがんばった次第です。

## Material React Table ってなぁに？

https://www.material-react-table.com/

キレイでさらに機能が豊富な表を簡単に作れるReactのコンポーネントのライブラリです。

## 調べたこと

toggleAllRowsSelectedが名前的にそれっぽいので一応調べると、Material React Tableが依存しているパッケージの中で定義されていました。

https://github.com/TanStack/table/blob/41f3e4e7b87aba1cf337c1696fa28e4a59fb80b7/packages/table-core/src/features/RowSelection.ts#L228

↑この部分です。

https://www.material-react-table.com/docs/guides/row-selection

↑によると`muiSelectAllCheckboxProps`は`CheckboxProps | ({ table }) => CheckboxProps`という型です。

https://mui.com/material-ui/api/checkbox/#props

そして↑によると`CheckboxProps`は`Checkbox`のPropsのようです。

https://mui.com/material-ui/react-checkbox/

というわけでさらに↑によると`onChange`というイベントがあるようです。

もうあとは組み合わせるだけです。

## 結論

```typescript
useMaterialReactTable({
    //
    // ここにその他色々な（今回の趣旨とは無関係な）ことがいっぱい
    //
    muiSelectAllCheckboxProps: ({table})=>{
        return {
            onChange(event,checked){
                table.toggleAllRowsSelected();
            },
        };
    },
});
```

このように、`muiSelectAllCheckboxProps`を追記して、全選択チェックボックスが変更された時に、`table.toggleAllRowsSelected`が呼ばれるように配慮します。

やることはこれだけです🎉
【備忘録】GASでAPIキーの非公開設定

# はじめに

GASには「スクリプトプロパティ」という、スクリプト全体で使用できるプロパティを保存するための機能があります。この機能を利用して、APIキーなどの機密情報を保存します。

# スクリプトプロパティの設定

GASを開き、左側の歯車アイコンを選択します。
スクリプトプロパティを設定する画面が表示されるので、プロパティの欄に`API_KEY`、`ID`などのキーを設定し、値の欄に適切な値を入力してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3343142/9db9252a-598b-4649-57e3-722427ca517e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3343142/e2cfb5df-38ef-6b54-bea3-6e52ffc89096.png)

コードから呼び出す場合、このようなプログラムを記述します。

~~~JavaScript:コード.gs
function callApi() {
  var apiKey = PropertiesService.getScriptProperties().getProperty('API_KEY');
  var url = 'https://api.example.com/data?api_key=' + apiKey;
  
  var response = UrlFetchApp.fetch(url);
  var data = JSON.parse(response.getContentText());
  
  Logger.log(data);
}
~~~



値の設定: `PropertiesService.getScriptProperties().setProperty('KEY', 'VALUE')`

値の取得: `PropertiesService.getScriptProperties().getProperty('KEY')`

削除: `PropertiesService.getScriptProperties().deleteProperty('KEY')`
Graph Neural Networkで組み合わせ最適化

### 問題点
1.衛星の信号をスケジューリングを既存のアルゴリズムやメタヒューリスティックでは計算コストが高すぎる。
2.スケールが大きな問題になるとアルゴリズムに高い効率性がなければ問題のサイズが莫大する。
### 提案手法
GNNとメタヒューリスティックのフレームで大規模なスケールのスケジューリングプログラムを管理する。
GNNは静的な制約を設けたpre-solverを用いて、メタヒューリスティックは動的な制約を設ける。GNNは普遍的で効率的な知識を得ることを目的とする。
1.衛星のタスクを分類と関連の制約に基づいてグラフ構造における静的と動的な制約や複数の衛星のタスクを考える
2.Static Constraints(静的制約)を行うGCNと動的な制約を行うメタヒューリスティックを構成する。QUBO（損失関数とする）が複数の要素を組み込み離散最適化から連続最適化へと進む。
3.何千ものタスクにおいて効率的な結果が得られた。

# EOSSPについて
地球観測衛星スケジューリング問題（EOSSP）**は、地球観測衛星の観測スケジュールを最適化する問題です。具体的には、以下の点に焦点を当てています。

### タスクの選択:

衛星は多くの観測タスクを実行できますが、リソース（時間、エネルギー、データストレージ）の制約から、すべてのタスクを実行することはできません。そのため、どのタスクを実行するかを選択する必要があります。
スケジューリング:

選択されたタスクを実行するために、各タスクが開始されるタイミングと順序を決定します。これは、タスクが指定された時間内に完了し、リソースの制約を満たすように計画されなければなりません。
### 制約の管理:

観測タスクには、さまざまな制約があります。例えば、特定の地域の観測は特定の時間帯にのみ可能であったり、衛星のエネルギーやデータストレージの容量に制限があったりします。また、天候や他の衛星の干渉といった動的な要因も考慮する必要があります。
### 最適化の目標:

EOSSPの最適化の目標は、観測タスクの利益を最大化することです。利益は、タスクの重要性や科学的価値、経済的価値によって決まります。したがって、スケジュールの品質は、これらの利益を最大限に引き出すことを目的としています。
### EOSSPの重要性
地球観測衛星は、気象予測、災害監視、環境保護、農業監視など、多くの分野で重要な役割を果たしています。したがって、効率的なスケジューリングは、衛星の運用効率を最大化し、観測データの価値を最大限に引き出すために不可欠です。

### 技術的アプローチ
### ヒューリスティックおよびメタヒューリスティックアルゴリズム:

これらのアルゴリズムは、大規模な組み合わせ最適化問題を解くために使用されます。例として、遺伝的アルゴリズム（GA）、シミュレーテッドアニーリング（SA）、タブーサーチ（TS）などがあります。
グラフ理論とネットワーク解析:

観測タスクの関係をグラフとしてモデル化し、タスク間の競合や依存関係を解析します。
### 機械学習とデータ解析:

タスクの特徴や制約を学習し、スケジューリングの効率を向上させるために利用します。特に、グラフニューラルネットワーク（GNN）が注目されています。
限界までシンプルなお買い物メモが欲しい。

# やりたいこと
限界までシンプルなお買い物メモが欲しい！

日用品の買い出しのため、事前にスマホのメモ帳に買うものリストを作り、いざ買い物に行ったものの買い忘れが…
そんな経験ありませんか？

買う物が多いとリストを目で追うのも大変だし、買い物かごに入れた商品を一つ一つリストから消していくのも大変。結果横着して見落としが…(´；ω；`)ｳｯ…

そんな場面を想定して極限までシンプルなお買い物メモを作りたい。


# 使用環境・ライブラリ
・CodePen
・Vue.js
・axios.js
・Netlify


# アイデア
スマホのメモ帳は自由度が高い分、チェックリストみたいな手軽な使い方に向いていないのではないか？
ペンでチェックを付ける要領で買い物かごに入れた商品をワンタップで消せたら便利に使えそう！

そこで今回はWebアプリとしてチェックリストのような限界までシンプルなメモ帳を作ってみたい。


# 実装①：買い物リストの作成
ひとまず、買いたいものをリスト化するところまで実装してみる。
入力したものが下に足されていくようにタスク追加関数は「push」で書き足すようにしておく。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="MWdrdNB" data-pen-title="Untitled" data-user="k-tanizawa" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/k-tanizawa/pen/MWdrdNB">
  Untitled</a> by zawachin_2024 (<a href="https://codepen.io/k-tanizawa">@k-tanizawa</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# 実装②：お店で活用できるようにレベルアップ
次にリストから一つずつ商品を消していくボタンを追加する。
一番上の商品から買い物かごに入れて消していけるように商品を削除する関数は「shift」指定にしておく。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="MWdrddX" data-pen-title="買いたいものリスト" data-user="k-tanizawa" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/k-tanizawa/pen/MWdrddX">
  買いたいものリスト</a> by zawachin_2024 (<a href="https://codepen.io/k-tanizawa">@k-tanizawa</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


# 実装③：Webアプリっぽくおしゃれにする
実装②のアプリをBootstrapを用いてお洒落で見やすい見た目に改良する。
加えて、急に雨に降られるリスクを回避するべく、天気APIから降水確率だけ表示させておく。
（私は天気予報見るの忘れて外出することが多いので…）
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="rNgpbwL" data-pen-title="シンプルお買い物メモ" data-user="k-tanizawa" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/k-tanizawa/pen/rNgpbwL">
  シンプルお買い物メモ</a> by zawachin_2024 (<a href="https://codepen.io/k-tanizawa">@k-tanizawa</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 実際に作ったWebアプリ
ぜひ使ってみてください！
https://luxury-ganache-8b398c.netlify.app/


# その他のアイデア
今回は「メモした商品をワンタップで消せる」というところにフォーカスしてリストの上から順に消していくだけというシンプルな仕立てにした。日頃通っているスーパーなら、入り口にある商品から順にメモしていけそうだけど、好きなところから消せるともっと実用的になりそう。


# 感想
普段はスマホのメモ帳を使って、買い物かごに入れた商品から一文字ずつ消していっていたので、ワンタップで実現できたのはすごく使えると思った。ただ、肝心のスマホでは見やすい体裁にできなかったため、使用する機器に合わせる重要性を痛感した。


今度はもっとユーザービリティを意識してアプリを作ってみたい。


# 参考資料

https://qiita.com/Qiita/items/edae7417214c8e957f54
【備忘録】SISTEMA ライブラリのダウンロード

# はじめに

SISTEMAは、制御システムの安全性を評価し、機能安全の要求事項に従ってPLを計算するために広く使用されています。

・IFAが無償提供するソフトウェアツール
・計算結果はグラフィカルに表示され、ユーザーがシステムの安全性を直感的に理解できる
・PDF形式でレポートの出力が可能

https://jp.idec.com/idec-jp/ja/JPY/RD/safety/sistema

# ライブラリのリンク集

各メーカーよりSISTEMAのライブラリが提供されており、ユーザー登録をすれば無償で使用する事ができます。

# 三菱電機

https://www.fasupportme.com/portal/en/kb/articles/mitsubishi-library-for-sistema

https://www.mitsubishielectric.co.jp/fa/solutions/competencies/safety/support/download.html

# OMRON

以下のリンク先からダウンロード可能です。

https://www.ia.omron.com/support/sistemalibrary/index_jp.html

# KEYENCE

以下のリンク先からダウンロード可能です。

https://www.keyence.co.jp/support/user/safety/communication/

# IDEC

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3343142/4d4fff58-6be6-3b0f-c525-c615c7971c8a.png)

以下のリンク先からダウンロード可能です。

https://jp.idec.com/idec-jp/ja/JPY/RD/safety/sistema
【Python】マルチスレッド その１ threadingの利用

# 背景
pythonでマルチスレッドが必要になり、使用方法について調査してみました。threadingモジュールを使用するのが一般的なようです。

# 環境
* Macbook Air M1
* macOS Sonoma 14.0
* python 3.11

# コード

ログに各スレッド名を出力するようにしました。

``` main.py
import threading
import time

# Log
def log(str):
    print("[{}] {}".format(threading.current_thread().name, str ))
    
# Sub 
def worker():
    log('Invoked')
    time.sleep(3)
    log('Completed')

# Main
if __name__=="__main__":
    log('Start')

    log('Invoking worker...')
    worker_thread = threading.Thread(target = worker, name = 'workder thread', daemon = True)
    worker_thread.start()
    worker_thread.join()

    # 後処理
    log('End')



```

# 実行結果

```
% python3 main.py
[MainThread] Start
[MainThread] Invoking worker...
[workder thread] Invoked
[workder thread] Completed
[MainThread] End
```
rex0220 項目検証プラグイン 新規・編集時の入力不可制御

[rex0220 項目検証プラグイン](https://qiita.com/rex0220/items/be20fd879f5e1bc9e035)で、新規レコード追加・レコード編集時の入力不可制御を行ってみます。

# 概要

新規レコード追加時と、レコード編集時で入力可能な項目を制御します。
[rex0220 項目検証プラグイン](https://qiita.com/rex0220/items/be20fd879f5e1bc9e035)で、レコードID(\\$id) の有無により、新規レコードと編集レコードを判定することが出来ます。

![2024-06-18_10h10_47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/4ff867a6-920d-a387-329e-1fb316706f1f.png)

# 操作例

![2024-06-18_10h21_31.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/a494f20c-ccaf-9a90-9442-b49552a8b17e.gif)

# 項目検証プラグイン設定

新規レコード追加画面では、レコードID(\$id) が未設定。レコード編集画面では、レコードID($id) が設定済みなので、それを入力不可の判定に利用します。

![2024-06-18_10h23_11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/5f4d8e16-3154-d860-99aa-82dd61c0e365.png)

# ちょっと便利なプラグイン設定

新規レコード追加画面とレコード編集画面をわかりやすくするために、ヘッダースペースに編集モードを表示します。

- 「F14 編集モードを表示」

![2024-06-18_10h11_21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/4609feed-8053-c0ce-afdd-ccd15771bb5c.png)


![2024-06-18_10h26_10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/70e8677b-7fbf-3547-acdb-6ff9c8072e02.png)
すべての商談メモと添付ファイルをアカウントに統合するにはどうすればよいですか?



+ [すべての商談メモと添付ファイルをアカウントに統合するにはどうすればよいですか?](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007cm962SAA)

アカウントに関連する商談のすべての添付ファイルを、アカウントの 1 つの統合された場所に表示する方法はありますか? 基本的に、拡張ごとに新しい注文書 (PDF) に署名していますが、すべて (すべての署名済みドキュメント) を 1 か所で確認でき、2 回 (商談に 1 回、アカウントに 1 回) アップロードする必要がなくなると便利です。

基本的な考え方としてはContentDocumentLinkのトリガーで商談にリンクしているファイルなら、商談からAccountを参照して、ContentDocumentLinkをもう一つ作ることかもしれませんね。

LinkedEntityIdの先頭が006なら商談です。

+ [添付ファイルの名称取得](https://qiita.com/Keiji_otsubo/items/3344ef992a7016a5c5d1)
+ [項目として運用しているメモフィールドを拡張メモとしてセットする](https://qiita.com/Keiji_otsubo/items/7c4448f2d3e6a5fcb991)
+ [ContentDocumentLinkオブジェクト](https://developer.salesforce.com/docs/atlas.ja-jp.object_reference.meta/object_reference/sforce_api_objects_contentdocumentlink.htm)

------------------

こんな感じのApexトリガーで実現できそうです（20分掛かってしまいました...）

```Java
trigger addLinkAccount on ContentDocumentLink (after insert) {
    
    Set<String> oppSet = new Set<String>();
    if (Trigger.IsInsert) {
        for(ContentDocumentLink CDL : Trigger.new) {
            String Lid = CDL.LinkedEntityId;
            System.debug('############ Lid ##################' + Lid);
            if (Lid.Left(3) == '006'){
                oppSet.add(Lid);
            }
        }//end of for
    }//end of if

    
    if (oppSet.size() >0) {
        System.debug('############ oppSet ##################' + oppSet);
        List<Opportunity> oppList = [select Id,AccountId from Opportunity where Id =: oppSet ];
		
        Map<Id,Id> accMap = new Map<Id,Id>();
        for (Opportunity opp : oppList){
            if (opp.AccountId != null){
                accMap.put(opp.Id,opp.AccountId);
            }
        }
 
        List<ContentDocumentLink> insertCDLList = new List<ContentDocumentLink>();
        for(ContentDocumentLink CDL : Trigger.new) {
            String Lid = CDL.LinkedEntityId;
            if (Lid.Left(3) == '006'){
                ContentDocumentLink insCDL = new ContentDocumentLink();
                insCDL.ContentDocumentId = CDL.ContentDocumentId;
                insCDL.LinkedEntityId = (Id)accMap.get(CDL.LinkedEntityId);
                insCDL.ShareType = CDL.ShareType;
                insCDL.Visibility = CDL.Visibility;
                insertCDLList.add(insCDL);
            }
        }

        
    if (insertCDLList.size() > 0) insert insertCDLList;    
    }//end of if
    
        
}
```
AIの数学の基本中の基本


# Aiに必要な数学知識の単元一覧
・微分積分
・線形代数
・統計学


# 微分積分
## 微分
・理解するためによく使われる車の速度の話を読むといい(距離が300kmのA地点からB地点まで車で移動すると、6時間後に到着した場合は時速50km(300÷6)だけど、ずっと時速50kmのスピードで進んではいないよね？途中でカーブとかでスピードが変化し、そういった瞬間的な速度を求めたりできるのが微分)

## 微分の使われ方
・AIでは一般的に、関数の傾き(AIでは傾き=誤差：予測値と正しい値の差)を算出するために使う
・モデルを作る際の手順の、例えば損失関数/lossで使う(入力データに対しての正解データ（教師データ）を用意してやり、損失関数という式を使って予測値が正解ととれだけ離れているかを計算)
・損失関数の誤差を小さくすると良いモデルになる

## 積分
・特に曲線の面積を求めるのが積分の役割
・∫ (インテグラル）という記号を使う

## 積分の使われ方
・確率分布の計算: 確率密度関数を積分することで、特定の範囲内での事象の発生確率を求めることができます。例えば、ある値以下（または以上）のデータポイントが発生する確率を計算する際に使用されます。
・強化学習: 強化学習における期待報酬の計算にも積分が使われます。状態遷移確率や報酬関数を積分することで、ポリシーの良さを評価することができます

# 線形代数
・線形代数は、ベクトルと行列の概念を用いて、直線や平面などの線形の性質を扱う数学の分野
[・線型代数の勉強に特化したサイト](https://linear-algebra.com/)

### 線形代数の使われ方
・AIで使う大量の計算式をわかりやすく表記するために線形代数を使うことで、効率よく大量の知識を学習させることが可能となる
・例えば、Word2VecやBERTなどのモデルは、単語の意味をベクトルとして表現し、これを用いて文脈を理解します


# 統計学
・多変量解析はディープラーニングで活用される

### 統計学の分類
・記述統計
・推測統計
・ベイズ統計

### 推測統計
・限られたデータ（標本）から全体のデータ（母集団）の特性を推定する統計学の分野


### 多変量解析
・ディープラーニングで使われる

### ベイズ理論
・事象が起こる確率を、既に持っている情報や新たに得られたデータを基に更新する方法

### 統計学の使われ方
1. データの前処理
欠損値処理、外れ値検出、正規化などのデータ前処理に統計的手法が用いられます
2. モデル選択と評価
機械学習モデルの選択や評価には、統計的尤度やモデル選択基準(AIC、BICなど)が使われます。交差検証によるモデル評価にも、統計的な考え方が不可欠
3. パラメータ推定
ニューラルネットワークなどのモデルパラメータの推定には、最尤推定や事前分布を用いたベイズ推定の考え方が役立ちます。
4. サンプリングと推論
確率的勾配降下法や近似ベイズ推論(MCMC、変分ベイズなど)では、確率分布からのサンプリングが重要です。
予測時にも、予測分布からのサンプリングが行われることがあります。
5. テスト  
モデルの性能を統計的に検証するため、様々な統計的検定(t検定、カイ二乗検定など)が使われます。
6. データ解釈
機械学習モデルの出力を解釈する際、統計的な信頼区間の推定などが役立ちます。



# その他
・集合位相などetc...

# 参考
https://www.seplus.jp/dokushuzemi/blog/2019/03/remaster_calculus.html
https://toukei-lab.com/ai-math
https://www.seplus.jp/dokushuzemi/blog/2019/03/remaster_calculus.html

<!-- 
# 小学校から高校までの数学

 # 関係ない・習得しなくていい(と思われる)数学知識
筆算・分数

-->
EntraIDで管理されたユーザのプロキシアドレスの削除

# 背景
AzureのEntraIDの機能の中で、登録していたカスタムドメインを削除するにあたって、削除前に対象のドメインを参照しているリソースについて参照を切る必要があります。

* 削除対象のドメイン：xxx.jp
* 削除後にプライマリとして使用するドメイン：xxx.onmicrosoft.com

で、今回はサインインするユーザのユーザプリンシパル名を変える必要がありました。
下記のユーザの例だとこんな感じですね

* 変更前：`demo-user@xxx.jp`
* 変更後：`demo-user@xxx.onmicrosoft.com`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261327/57a9682c-4680-7be5-3f9f-030de3838cf1.png)

このユーザプリンシパルを変更すると、プロパティの項目の中の「メール」に設定されたアドレスが自動で変わります
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261327/ab99d2bf-d773-4086-cdbc-3120879761d0.png)

同時にメールの下にリンクで表示されている「プロキシアドレス」も変わってほしかったのですが、一部のユーザは下記のように新旧のプロキシアドレス両方が設定された状態になりました。（古いほうが残った原因は不明）
この旧ドメインを使用したプロキシアドレスが参照リソースとして引っ掛かっているようだったので、これを削除したかったのですが、ポータルからは削除する術がありません。
Microsoft365のライセンス契約をしているテナントであれば、Exchangeの管理センターでできたようですが、今回はライセンスがないのでそれも使えません
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261327/16504c95-cb2b-4248-df82-dfeee7efc23a.png)
というわけで、これをPowerShellを使って削除することになりました

# PowerShellで削除する
管理者権限でPowerShellを起動する

## Microsoft Graph PowerShell SDKのインストール
Azure AD PowerShell (AzureAD)が2024/3/30をもって非推奨になったのでMicrosoft Graph PowerShell SDK を使用します(Betaモジュールもインストールします

```powershell
Install-module Microsoft.Graph
Install-Module Microsoft.Graph.Beta -AllowClobber
```
## サインインする
下記のコマンドを実行するとサインインの画面が起動するので、EntraIDを操作できるロールを持ったユーザでサインインします。今回はグローバル管理者の特権ロールを持ったユーザでサインインしました
```powershell
Connect-MgGraph -Scopes 'User.ReadWrite.All'
```

## プロキシアドレスを更新する
残したい方のプロキシアドレスを指定してパラメータ用の変数に代入
```powershell
$params=@{proxyAddresses=@("SMTP:demo-user@xxx.onmicrosoft.com")}
```

## ユーザのプロパティを更新する
先ほどのパラメータの変数を使って更新コマンドを実行する
```powershell
Update-MgBetaUser -UserId <ユーザーの ObjectID> -BodyParameter $params
```
ユーザのオブジェクトIDはEntraIDの対象ユーザの概要を確認するとわかります
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261327/f16c0e9a-6e04-ea8f-c375-10bd4690a13e.png)

これを対象ユーザの数だけ繰り返し実行してめでたくドメインの参照を全て切ることが出来ました
スレッドトークンを使用できるオブジェクトの増加 Summer 24


+ [Email to anything?](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007cm8yr)

[スレッドトークンを使用できるオブジェクトの増加](https://help.salesforce.com/s/articleView?id=release-notes.rn_threadingtokens_platform.htm&release=250&type=5)

以前は、スレッドトークンはケースに限定されていました。今回、スレッドトークンはプラットフォーム機能となり、活動の追跡をサポートする任意のオブジェクトでメールへの応答をスレッド化するのに使用できるようになりました。

ケース以外のオブジェクトのトークンベーススレッドを設定するには、Apex メールサービスを作成します。トークンに一致するレコードを見つけるには、EmailMessages.getRecordIdFromEmail 関数を使用します。 

+ [メールサービス](https://help.salesforce.com/s/articleView?id=sf.code_email_services.htm&language=ja&type=5)
+ [Salesforce 開発者ガイド: getRecordIdFromEmail](https://developer.salesforce.com/docs/atlas.en-us.248.0.apexref.meta/apexref/apex_System_EmailMessages_getRecordIdFromEmail.htm)
+ [Salesforce 開発者ガイド: getFormattedThreadingToken(recordId)](https://developer.salesforce.com/docs/atlas.en-us.248.0.apexref.meta/apexref/apex_System_EmailMessages_getFormattedThreadingToken.htm)
PDF 2.0の仕様書をゲットだ、しかも無料でだ！

## PDFの仕様を確認するには？

2022年末から2023年ごろに必要があって
PDFの署名・暗号化処理出来るJavaScriptライブラリを探していたんだけど
あまり数はなく、あってもいくつか問題があって、結局自分で作ったことがあった。

その際参照した仕様書はPDF Version1.7 ExtensionLevel 3。
Adobeが公開しており、無料で入手可能。
といっても2008年公開で、参照した2023年時点でかなり古い仕様。
1.7 ExtensionLevelも8まであるのに手に入らないし
最新のVersion 2.0はISO規格で入手自体は簡単だけど、
結構な金額(日本円にして３万弱)が必要だった。

まあ、そんなこんなで1.7Ext3仕様書＋他のOSSを参照して
1.7Ext8相当には出来てとりあえずは収まった、でも

## わお！ビッグニュース

ひょんなことから、またPDF関連のことを調べていたら
PDF 2.0の仕様書が無料で公開されていた。


https://pdfa.org/sponsored-standards/

中身読むと、
PDF associationや関連企業はPDF 2.0で色々とちゃんとしてISO仕様化したものの
入手にお金がかかることになって、普及が進まないは問題だろうと思ったらしい。
まあ、OSSとかで３万円(しかもライセンス上一人一人買わなくてはいけない)は出せないだろう。


## 余談

といっても、いまのところこの仕様書をもとに何かする予定はないんですけど。
折角なのでPDF操作ライブラリのVersion 2.0対応をやってみたいけど、
ざっと見てもかなり1.7からの修正点がかなり多いので大変そう。
スプレッドシートをAPIなしで読み込む方法



## 🦁<INS>**結論**</INS>🦁
スプレッドシートをAPIなしで読み込むには

***「URLをCSV形式のURLに変換してアクセス」***
すれば可能読み込み可能になる。

ただし、権限を
「URLを知ってる人全員」にする必要がある。


:::note info
押さえておくべき点
* スプレッドシートのURLの構成は通常【https://docs.google.com/spreadsheets/d/】{spreadsheet_id}/edit）
* CSV形式のURLの構成は【https://docs.google.com/spreadsheets/d/{spreadsheet_id}/pub?gid=0&single=true&output=csv】
* 通常のURLは人がデータを編集・閲覧する場合に適している
* CSV形式のURLはプログラムでデータを自動処理する場合に適している
* 
:::  
***

:::note warn
CSV形式のスプシの利用シーン
*  データ分析や機械学習モデルへの入力データとして使用
* 定期的なデータバックアップ
* スクリプトで自動レポート生成
:::  
***

:::note alert
注意点
*  適切なアクセス権限が設定されていないと読込できない。
* CSV形式のURLはプレーンテキストデータ。
:::  

## まとめ✍️
URLをCSV形式に変更することだけで読込ができるので楽ちんですね。
フロントエンドエンジニアの視点から見る生成AI

### ここ1年の生成AIの進化: フロントエンドエンジニアの視点から

ここ1年で生成AI（Generative AI）の分野は驚くべき進化を遂げ、フロントエンドエンジニアの仕事や日常に多大な影響を与えました。特にデザイン、コード生成、ユーザー体験の向上において顕著な変化が見られます。

#### 1. デザイン支援ツールの進化

従来、フロントエンドエンジニアはデザイナーから提供されるデザインをもとにコーディングを行っていました。しかし、最近の生成AIはデザインの自動生成や提案を可能にし、デザイナーとエンジニアのコラボレーションをスムーズにしました。たとえば、FigmaやAdobe XDのプラグインとして提供されるAIツールは、ワイヤーフレームやプロトタイプの自動生成、デザインの最適化を行います。これにより、エンジニアはデザインにかかる時間を大幅に短縮し、よりクリエイティブな作業に集中できるようになりました。

#### 2. コード生成の精度向上

生成AIによるコード生成ツールも飛躍的に進化しました。GitHub CopilotなどのAIアシスタントは、エンジニアが書き始めたコードに対してリアルタイムで補完や提案を行います。これにより、コーディングの効率が劇的に向上し、バグの発生率も低下しました。特に、ReactやVue.jsのようなモダンなフレームワークを使用する際には、AIのサポートが非常に役に立っています。

#### 3. ユーザー体験のパーソナライズ

ユーザー体験の向上も、生成AIの大きな貢献の一つだと考えています。AIはユーザーの行動データをリアルタイムで解析し、個々のユーザーに最適なコンテンツやインターフェースを提供しています。たとえば、ecサイトでは、ユーザーの閲覧履歴や購入履歴に基づいてパーソナライズされた商品推薦を行うことで、コンバージョン率が向上しています。

#### 4. ナチュラルランゲージプロセッシングの進化

生成AIの進化により、ナチュラルランゲージプロセッシング（NLP）技術も飛躍的に進歩しました。これにより、チャットボットやバーチャルアシスタントがより自然な対話を実現し、ユーザーとのコミュニケーションが一層スムーズになりました。特に、カスタマーサポート分野では、24時間体制の対応が可能になり、ユーザー満足度が向上しています。

#### 5. クリエイティブ分野への応用

生成AIは、クリエイティブ分野にも大きな影響を与えています。例えば、音楽やアートの生成、ストーリーの自動生成など、クリエイティブな作業を支援するツールが登場しています。これにより、クリエイターはアイデアのインスピレーションを得やすくなり、プロジェクトのスピードアップが図れます。

### 終わりに

ここ1年で生成AIは驚くべき進化を遂げ、フロントエンドエンジニアの仕事の質と効率を大幅に向上させました。デザイン、コード生成、ユーザー体験のパーソナライズなど、さまざまな分野でAIの恩恵を受けることができるようになりました。今後も生成AIの発展が続く中で、フロントエンドエンジニアとしてその進化をいち早くキャッチし、実践に活かしていくことが求められています。

（*´・ω・｀*）
個人開発のアプリを1ヶ月AWSでホスティングした際の利用料金

個人開発したアプリケーションを1ヶ月AWSでホスティングした際の、おおよその金額感について整理していく。

## AWS使用料金

データは2024年4月のもの。

![スクリーンショット 2024-05-05 16.19.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/684929/3798bdef-64d3-eb77-afdd-2848132c6449.png)

日本円で6947円である。

### コストの割合

ALB, ECS, VPC の3つが主なコスト発生源となっている。

![スクリーンショット 2024-05-05 16.22.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/684929/ce8040ae-d35b-1201-35e7-4c3826544a1f.png)

![スクリーンショット 2024-05-05 16.22.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/684929/a8d0115b-62f5-75a3-c94a-5cb871376011.png)

## サービス毎の利用料金について

上記で発生しているコストについて、東京リージョンのケースで試算してみる。

### ALB

ほぼトラフィックは発生していないため、時間単位での課金が99.98% を占める。

[料金 - Elastic Load Balancing | AWS](https://aws.amazon.com/jp/elasticloadbalancing/pricing/)

- 時間単位での課金
    - USD 0.0243 / per hour

    👉 0.0243 * 720 = **17.496**
    
- 使用量に応じた課金
    - USD 0.008 / LCU 時間
        - 計算方法は複雑なため、詳細を知りたければ↓↓を参照
            
            [AWS ALB LCUコスト確認まとめ - Qiita](https://qiita.com/himorishuhei/items/1066c5c579be6de0441c)
            

### ECS

[料金 - Amazon ECS | AWS](https://aws.amazon.com/jp/ecs/pricing/)

今回使用しているのはFargateなので、以下を参照。

[料金 - AWS Fargate | AWS](https://aws.amazon.com/jp/fargate/pricing/)

vCPU 256MB / mem 512MB の最小構成で稼働。

```jsx
  cpu                      = "256"
  memory                   = "512"
```

0.05056USD / 1 時間あたりの vCPU 単位

0.00553USD / 1 時間あたりの GB 単位

### VPC

[料金 - Amazon VPC | AWS](https://aws.amazon.com/jp/vpc/pricing/)

どこで料金が派生しているのか分からず。IPv4？？

[料金 - Amazon VPC | AWS](https://aws.amazon.com/jp/vpc/pricing/)

## アプリケーションの紹介

シンプルなリダイレクター。

### ドメイン

以下のサイトの中にある、「短縮URL」というアプリケーションが主な費用源となっている。

[Gynga Gateway](https://gateway.gynga.org/)

### リポジトリ

非公開

## 使用コンポーネント

それぞれ、以下のようなコンポーネントを用いている。

### ドメイン

- Route53

### ネットワーク

- VPC
    - ap-northeast-1
        - az-1a
        - az-1c
- ALB

### アプリケーション / サーバーサイド

- ECS / Fargate
    - Golang

### アプリケーション / クライアントサイド

- AWS Amplify

### データ管理

- DynamoDB
    - なぜRDSではなくDynamoDBなのか
        - データ書き込みの内容が単純であるため強い整合性が求められない。アプリケーション上の処理のみで十分データ整合性の担保が可能。

## 所感

- ALB / ECSのコストが思ったよりも高い
- VPCの料金がどこで発生しているのか不明
【PostgreSQL】メタコマンド〜\g〜

## 初めに
Qiita Engineer Festa 2024に参加中。完走目指してます。
他のメタコマンドについては以下から読んでください。

[【PostgreSQL】メタコマンドを纏めていく](https://qiita.com/dai_chi/items/04f5339d54130f070671)

## \gとは

> 現在の問い合わせ入力バッファをサーバに送って実行します。
> 

[\gについて](https://www.postgresql.jp/docs/15/app-psql.html#:~:text=%5Cg%20%5B%20(option%3Dvalue%20%5B...%5D)%20%5D%20%5B%20filename%20%5D%0A%5Cg%20%5B%20(option%3Dvalue%20%5B...%5D)%20%5D%20%5B%20%7Ccommand%20%5D)

## 試してみた

usersの参照結果がselect.txtに出力されている

```bash
select * from users \g select.txt
```

pathの指定もできた

```bash
select * from users \g /tmp/select.txt
```

実行計画の結果もファイルにできる

```bash
EXPLAIN ANALYZE select * from users \g explain.txt
```

パイプの利用もできる

```bash
select * from users \g | less
```

grepも使えた(条件で絞ればいいだけなんだけどね)

```bash
select * from users \g | grep Bob
  2 | Bob     |  25
```

xをつけると縦表示もできる

```bash
select * from users \gx
-[ RECORD 1 ]-
id   | 1
name | Alice
age  | 30
-[ RECORD 2 ]-
id   | 2
name | Bob
age  | 25
-[ RECORD 3 ]-
id   | 3
name | Charlie
age  | 35
-[ RECORD 4 ]-
id   | 4
name | Diana
age  | 30
```

## まとめ

パイプを利用してコマンドに結果を渡せるのは何かできそうと思った。
ファイルに出力するのが割と簡単にできるのでそこでの活用シーンは多そう。
【Figma Plugins】チームライブラリーのコンポーネントを取得する

## これは何？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/f9bea6f8-26fa-0e71-e623-915834ce1004.png)

FigmaのPluginを開発する際、チームライブラリのコンポーネントを取得して、ファイルに生成したいと思ったことはありますか？

Figmaのコンポーネントには、通常のコンポーネントと複数のコンポーネントがまとまっているバリアントコンポーネントの2種類あります。

そのため、この記事では、チームライブラリの2種類のコンポーネントを取得する方法を解説しようと思います。

## チームライブラリーのコンポーネントを取得する
### ① component keyを調べる
コンポーネントを取得するには、**component key** を知る必要があります。
そのためには、以下のように**component key**を調べます。

1. コンポーネントが定義されているファイルを開く
1. コンソールを開く
    - 右クリック → `Plugins > Development > Show/Hide console`
1. 調べたいコンポーネント or バリアントを選択する
1. コンソールで以下のコマンドを入力する
1. コンソールで**component key**が表示される

```console
> figma.currentPage.selection[0].key
```

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/bbc77bfe-e92d-608f-a8a1-bd11b8df319a.png)

### ② コンポーネントを取得する
#### 通常のコンポーネントの場合
`importComponentByKeyAsync()`の引数に**component key**を渡すことで、コンポーネントを取得することができます。

取得したコンポーネントを`createInstance()`することで、コンポーネントのインスタンスを表示させることができます。

```ts
const componentKey = '****************************************'

const createComponent = async () => {
  const component = await figma.importComponentByKeyAsync(componentKey)
  component.createInstance()
}
```

#### バリアントコンポーネントの場合
`importComponentSetByKeyAsync()`の引数に**component key**を渡すことで、バリアントを取得することができます。

`.defaultVariant` でデフォルトのコンポーネントを取得し、`createInstance()`で、コンポーネントのインスタンスを表示させることができます。

```ts
const componentSetKey = '****************************************'

const createComponentSet = async () => {
  const componentSet = await figma.importComponentSetByKeyAsync(componentSetKey) 
  const component = componentSet.defaultVariant
  component.createInstance()
}
```

## 動的にチームライブラリーのコンポーネントを取得する
プラグインを販売したりなどで、チームライブラリーのコンポーネントを動的に取得したい時がると思います。
そんな時は、以下の方法で取得することができます。

+ Figma の REST API を使う
+ プラグインを開いて、component keyを取得する方法
+ 

### Figma の REST API を使う
細かいことはここでは紹介しないですが、以下のリンクから、**component key**を取得することができます。

https://www.figma.com/developers/api?fuid=868373580443581197#library-items-endpoints

### プラグインを開いて、component keyを取得する方法
これは、プラグイン内で**component key**を取得する方法です。
イメージは以下の通りです。

1. メインコンポーネントファイルを開く
1. プラグインを開く
1. コンポーネントを選択する
1. プラグインでイベントを発火させ、**component key**を取得する
1. 取得した**component key**を`clientStorage` に保存する
1. `clientStorage` から 、**component key**を取得し、`importComponentByKeyAsync` でコンポーネントを取得する

```ts
const getComponentKey = () => {
  const componentKey = figma.currentPage.selection[0].key
  figma.clientStorage.setAsync('componentKey', componentKey)
}

const createComponent = async () => {
  const componentKey = await figma.clientStorage.getAsync('componentKey')
  const component = await figma.importComponentByKeyAsync(componentKey)
  component.createInstance()
}
```

https://qiita.com/degudegu2510/items/e6c04cae2b678d409465

## まとめ
この記事では、チームライブラリの2種類のコンポーネントを取得する方法を解説しました。

ぜひこの記事を参考にコンポーネントを取得してみてください。

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。

https://twitter.com/degudegu2510
Serverless Frameworkでデプロイパッケージサイズ削減


Serverless FrameworkでLambdaをいくつか定義してデプロイしていたら、パッケージサイズが`1.3GB`ほどになっていので、削減します。

# コード

```yml
package:
   excludeDevDependencies: false
   patterns:
     - "!.git/**"
     - "!node_modules/**"
     - "!aws/**"
     - "!__pycache__/**"
     - "!.venv/**"
```
`Python`*`Lambda`の構成だったので、`__pycache__/`,`.venv/`が含まれています。
環境に合わせて`patterns`に追記する。文字列の先頭にある`!`が含めないという意味になる。
これによって`1.3G`->`24mb`に🥳

# 参考
https://www.serverless.com/framework/docs-providers-aws-guide-packaging
CMS Workspaceのまとめ

[まとめページに戻る](https://qiita.com/Keiji_otsubo/items/60afc2a8d211b6f7d89f)
[まとめA～M](https://qiita.com/Keiji_otsubo/items/f3ddedee6793bf1576f8)

# API

+ [CMS Enhanced Workspace にアクセスできない API](https://qiita.com/Keiji_otsubo/items/43303ca77d87d02efa3a)


# トレイルヘッド

+ [How do I create a new CMS Workspace in the Digital Experiences app when my playground is currently recognizing the app as having nothing in it?](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007cm5d7)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/57096357-0da2-5ad0-ed95-bbfe95a2d0b4.png)

新しいプレイグランドを使ったらしい
Django transaction.atomicについて

なんかみたことはあるけど理解していなかったため、ちょっと調べました。
間違っていたらご指摘ください。

## TL;DR
短い文で表すと、`transaction.atomic`を使うことで処理の途中でエラーが起きた時DBの変更が戻すことができる。

## `transaction.atomic`について
どういうことかというと、よくある銀行の例で
口座間のお金を移動する処理を書いてみるとする。(本番でこんなコードを書いてはいけない())

```python:sample.py
def money_idou():
   meron_kouza = Kouza.objects.get(name="meron")
   itigo_kouza = Kouza.objects.get(name="itigo")
 
   # `メロン口座`から`いちご口座`へ150円移動する
   itigo_kouza.amount = itigo_kouza.amount - 150
   itigo_kouza.save()
   meron_kouza.amount = meron_kouza.amount + 150
   meron_kouza.save()
```

`name`(口座名)と`amount`(残高)を持った`Kouza`モデルがあるとする。

`メロン口座`は+150円、`いちご口座`は-150円することでお金を移動した。
もし、お金の移動中になにかしらのエラーが発生したとき`いちご口座`から引かれて`メロン口座`に加算される前に処理が終わってしまうなんてことが起きてしまう。
エラーが発生したとき`いちご口座`から引いたものを無かったことにすることができるのが`transaction.atomic`。

## `transaction.atomic`を使う

```diff_python
from django.db import transaction
  
 #ここ
+@transaction.atomic()
 def money_idou():
    meron_kouza = Kouza.objects.get(name="meron")
    itigo_kouza = Kouza.objects.get(name="itigo")
  
    # `メロン口座`から`いちご口座`へ150円移動する
    itigo_kouza.amount = itigo_kouza.amount - 150
    itigo_kouza.save()
    meron_kouza.amount = meron_kouza.amount + 150
    meron_kouza.save()
```

`@transaction.atomic()`を関数のデコレータとしてつけるとその関数全体でトランザクションが効く。
部分的に使用する場合は以下のように記述する。

```diff_python
from django.db import transaction
  
 #ここ
-@transaction.atomic()
 def money_idou():
    meron_kouza = Kouza.objects.get(name="meron")
    itigo_kouza = Kouza.objects.get(name="itigo")
  
    # `メロン口座`から`いちご口座`へ150円移動する
+    with transaction.atomic():
+        itigo_kouza.amount = itigo_kouza.amount - 150
+        itigo_kouza.save()
+        meron_kouza.amount = meron_kouza.amount + 150
+        meron_kouza.save()
```

## まとめ
`transaction.atomic`を使うことで処理の途中でエラーが起きたときにDBの変更をロールバックすることができる。

## 参考
- [Django公式ドキュメント](https://docs.djangoproject.com/ja/5.0/topics/db/transactions/)
プチ話 美術の授業でカラーコードを勝手に使った話

どうもAtsu1209です今回はちょっとした話を書きます。

# 美術の授業
ある日の美術の授業で、**オリジナルの商品をデザインしよう**
という課題がでました。 自分で商品名、デザインなどを考えて
紙に書くというものです。そこで頑張って色を重ねて自分なりのデザインをしました
しかし先生に**もっとわかりやすい色を使ってください**といわれてしまいました。
ですが自分なりに頑張って作ったイメージ図なので色を変えたくありませんでした。

そこで**色をわかりやすく**するために、 16進数のカラーコードを使いました。

これで**わかりやすく**なりましたよね(^^)

# 以上
短くなりましたがこれで終わりです
ではまた次の記事で
picoMini by redpwn writeup caas

## caas (Web Exploitation)

Now presenting cowsay as a service

添付ファイル
・index.js

とりあえず、記載のリンクに飛んでみると、`Make a request to the following URL to cowsay your message:
https://caas.mars.picoctf.net/cowsay/{message}`
と書いてあった。そのままURLにアクセスすると以下のメッセージ付き牛が出てきた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638553/f211030a-02fc-3995-1665-bc31314c1bb0.png)

`{message}`の部分に入力した文字が牛からのメッセージとして出力されるようだ。
index.jsを見てみる。`const { exec } = require('child_process');`でシェルコマンドを実行できるようにし、`/usr/games/cowsay ${req.params.message}`で、入力した{message}を引数としてシェルコマンドを実行しているようだ。;で区切ることによって任意のコマンドを実行させられる。
/usr/games/cowsayとPATHが指定されているため、`;ls`でディレクトリの内容を出力させようとしたが、;の前に何らかの文字を入れる必要があったため、`a;ls`とした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638553/66fc9084-e8da-bcec-1e21-b40c0b81ec45.png)

ディレクトリの中にfalg.txtを発見した。「falg」であって、「flag」ではないことに注意が必要。つい見間違って時間が溶けたので、こういうときはコピペした方が良い。
で、実行コマンドのことであるが、`a;strings%20falg.txt`で可読文字を抜き出そうとしたが、stringsが使えなかったため、ファイル内容を表示させるcatを使い、`a;cat%20falg.txt`とした。URLで空白文字を扱うために、空白をURLエンコードした%20を用いる(普通に空白文字でも良かったらしい)。実行するとフラグが出てきた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638553/7ddf1465-d463-5af8-b11f-c68c4f2430cf.png)

`picoCTF{moooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo0o}`

ちなみに、これはOSコマンドインジェクションというらしい。
いろんなメディア処理をコマンドラインでやってみよう！(ffmpegの使い方)

ビデオ変換ツールなどメディア処理ツールは有名なもののほとんどはGUIでコマンドを使わないものが多い．コマンドでもメディア処理を行うことが可能で，**ffmpeg**が有名なパッケージの一種だろう．実際あまりにもできることが多すぎるのでここに書き残しておこうと思う．

# ffmpegとは
ffmpegは，常に強力で多機能なオープンソースのソフトウェアで，ビデオやオーディオの録画，変換，ストリーミングを行うために広く使用されている．また，ほぼすべてのビデオやオービオフォーマットをサポートしており，多くのプラットフォーム（Windows、Mac、Linuxなど）で利用可能である．本記事ではffmpegの中でメディア処理についてフォーカスする．

# ffmpegのインストール
公式サイトからインストーラーをダウンロード
https://ffmpeg.org/download.html

macなら
```
brew install ffmpeg
```
でインストールできる．

# ファイルの状態を参照
```bash
ffmpeg -i input.mp4
```
ファイルの詳細な情報（ビットレート、コーデック、解像度など）を表示することができる．
このコマンドは `input.mp4` のストリーム情報やメタデータなどを表示する．

# メディア変換の各種コマンド
ここではさまざまなメディア変換コマンドを紹介する．

## ビデオのフォーマット変換
```bash
ffmpeg -i input.mkv -codec:v libx264 -codec:a aac output.mp4
```
入力ファイル `input.mkv` を MP4 フォーマットに変換し，`output.mp4`として出力．ビデオコーデックとして libx264 を，オーディオコーデックとして aac を使用している．

## オーディオファイルの変換
```bash
ffmpeg -i input.wav -codec:a libmp3lame output.mp3
```
WAVフォーマットをMP3フォーマットに変換する.

## オーディオのビットレートを変更
```bash
ffmpeg -i input.mp3 -b:a 128k output.mp3
```
オーディオのビットレートを128 kbpsに設定する．

##  オーディオのノイズリダクション
```bash
ffmpeg -i noisy.mp3 -af "afftdn" cleaned.mp3
```
ノイズリダクションフィルター afftdn を使用して，`noisy.mp3` のノイズを減らし，`cleaned.mp3` として出力する．

## オーディオのループ作成
```bash
ffmpeg -stream_loop 5 -i input.mp3 -c copy output.mp3
```
このコマンドは `input.mp3` を5回繰り返して `output.mp3` を作成する．

## ビデオのリサイズ
```bash
ffmpeg -i input.mp4 -vf "scale=1280:720" output.mp4
```
`input.mp4`のサイズを1280x720に変更し，`output.mp4`を出力する．｀`-vf` はビデオフィルターを指定するオプション．

## ビデオからの静止画の抽出
```bash
ffmpeg -i video.mp4 -ss 00:00:10 -vframes 1 output.png
```
`video.mp4` から10秒の位置のフレームを1枚抽出して `output.png` として保存する．

## ビデオのトリミング
```bash
ffmpeg -i input.mp4 -ss 00:01:00 -to 00:02:00 -c copy output.mp4
```
このコマンドは `input.mp4` の1分から2分の間の部分を `output.mp4` として抽出する．-c copy はすべてのストリームを再エンコードせずにコピーする．

## ビデオのフレームレート変更
```bash
ffmpeg -i input.mp4 -r 30 output.mp4
```
このコマンドは `input.mp4` のフレームレートを30fpsに変更して，`output.mp4` として保存する．

## 複数のビデオの結合
```file.txt
file 'part1.mp4'
file 'part2.mp4'
file 'part3.mp4'
```
同じディレクトリに各動画ファイル(`part1.mp4`,`part2.mp4`,`part3.mp4`)を設置し，同じディレクトリに上記のfile.txtを作成する

```bash
ffmpeg -f concat -safe 0 -i file.txt -c copy output.mp4
```
これで `part1.mp4`, `part2.mp4`, `part3.mp4` が順番に結合され，`output.mp4` として保存される．

# 動画の長さ
```bash
ffprobe -v error -show_entries format=duration -of default=noprint_wrappers=1:nokey=1 input_video.mp4
```
ffprove(FFmpeg プロジェクトの一部)を使えば動画の長さをとってこれる
Bizrobo　Roboserver.logについて

Roboserver.logについて
デフォルトの設定でファイルローテーションがされる設定になっているが
出力されるファイル名の形式が
日付時間_Roboserver.log
となっているため
日付が変わるとファイル名が別になってファイルがローテーションされず
logフォルダ内にファイルが堆積し続ける
長期間使用しているとlogフォルダ内のファイルサイズが大きくなりディスクを圧迫する可能性があるので定期的に削除、移動を実施する必要がある。
Bizrobo!バージョンアップ時の注意点

・既存のMCサーバー上等でバッチ実行等でバージョンアップは不可
　　他の製品では自動またはexe等実行でバージョンアップできる場合が多いのでそう思われることが多い

大まかな流れ
新規サーバー上にMC,RSを新規構築を実施
既存サーバーのMCでバックアップを取得
新規サーバーのMC上でバックアップファイルをリストア

・あくまでバックアップリストアができる内容はMC上の内容
　そのためDB内の情報(過去ログ等)、xmlやiniのファイル上の設定は対象外
・DB,SMTP,プロキシの設定は要確認、DBは外だしでない限りはIPが変更されているため設定変更必要
・DBドライバ設定も移行はされるが、別に特定フォルダ内に配置する必要あり
OACのカスタム・テーマを作成してみる

# はじめに
OAC（**Oracle Analytics Cloud**）では、クラシック・ホームで表示するダッシュボードのスタイルをカスタマイズできます。
カスタマイズ可能な箇所は、左上に表示されているロゴ画像など限定的ですが、OACの管理者が簡単にカスタム・テーマを作成できます。

# クラシック・ホームとは
セキュリティ要件を考慮し、多くのユーザーで共有可能なダッシュボードと、ダッシュボードの一部として提供する各種レポートを作成・編集する起点となるホームページです。
管理者としてOACにログインした後、「クラシック・ホーム」に移動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/beec5d4a-97b4-4281-0c1c-4ccd98edcc80.png)

# テーマの管理
右上の人のマークのアイコンをクリックしてメニューを開き、「管理」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/115070c3-53d7-0eb9-af30-58fff880f90f.png)

管理ページが開きます。
左側の一番下にある「テーマの管理」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/7c29efe4-21f3-0eb8-cfd8-446425dfd3aa.png)

## 新しいテーマの追加
テーマの名前を入力します。ここでは「Custom」としました。
次にロゴを変更するために、「ロゴの選択」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/6f177d54-7f34-73d0-579a-298128f852a8.png)

「参照」をクリックして準備しておいたロゴを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/7c02f12b-1618-7e9f-94c9-a647715ac798.png)

:::note
ロゴサイズは 136px, 28pxです。
今回使用したのは、これです。
![custom logo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/c4e6ffcc-a61d-f187-b101-17bf489128d4.png)
:::

ヘッダーのタイトルとして「Example」と入力しました。
「アクティブ」チェックボックスをオンにして、「保存」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/2ee8c565-0579-c0aa-13ff-f9a667731451.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/a400c1f2-ad07-6136-1fff-1d2becf9da4e.png)
保存されたら、「戻る」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/b17e9f5c-a676-4f07-cdd6-5866fa1ecc39.png)

「ホーム」に移動すると、こんな感じになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/6f80bb85-88ef-2238-7db0-ff08cce356b9.png)

ロゴが表示されて、その右に設定したヘッダータイトルが表示されます。
ただ、よく見てみるとロゴの背景色とヘッダーの背景色が合っていません。

## ヘッダー背景色の指定
先ほどと同じ手順で「テーマの管理」を開きます。
ヘッダー背景色を`#0A1543`にして、「保存」します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/6176b956-b6bb-35ac-892d-48d6ab66cb7b.png)

もう一度、「ホーム」を表示してみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/c4adaff4-4e0d-bc91-da2e-ffa0fcc87ab6.png)

今度は違和感がなくなりました。

# 元のテーマに戻す
デフォルトのテーマに戻したくなったら、「テーマの管理」に移動して「Custom」テーマの「アクティブ」チェックボックスをオフにして「保存」します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/a1a0e00b-177a-5673-a723-b005363433b2.png)

戻りました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/313662f7-b51a-15c7-a97d-00388e084db3.png)

# おわりに
ロゴとヘッダー背景色を変更してみましたが、とても簡単にできました。
テーマの管理でカスタマイズできるのは、クラシック・ホームのみです。セルフサービスのワークブックのスタイルには影響しません。

# 公式ドキュメント
- [カスタムロゴとダッシュボードスタイルの適用](https://docs.oracle.com/en/cloud/paas/analytics-cloud/acabi/apply-custom-logos-and-dashboard-styles.html#GUID-5FBABD70-9F43-4CED-9059-882C7A9FA958)
RESTful APIアクセス練習用サービスを探す

RESTful APIを扱うことは現代のモバイルアプリ開発では必須の技術。

新しい言語や開発環境で APIの呼び方を勉強しようと思ったときにどの API で練習しようか無駄に悩むことがないよう、情報源をまとめたいと思っている。

すでに Qiitaでよくまとめられている方がいるので、そちらへのハブ的にまとめておこうと思う。他にまとめられているページがあったら教えてほしい。

https://qiita.com/danishi/items/42d8adf6291515e62284

https://qiita.com/redshoga/items/1d06c8cda3af77e0c5e8

## おすすめ

### Dog API

https://dog.ceo/dog-api/

イッヌ。 応答が早いので最近はこちらを使いことが多くなっている。 

APIキー不要。

### Yes or No
https://yesno.wtf/

以前はこれをよく使っていた。 ランダムに Yes / No を返してくれるのでちょっとした意思決定アプリを簡単に作ることができる。 アニメーション gif を返してくるので、それをどう表示するかという課題にもなる。 ちょっと応答が遅い。

APIキー不要。

### ユーザー情報

https://randomuser.me/

ユーザー情報をランダムに作ってくれる。複数返すこともできるので、リストの扱いの練習に使える。

APIキー不要。

### プレースホルダー

https://placehold.jp/

大きさを指定できるのが便利。


----

こういうAPIって UCC化したらいいんでは? 🤔
AtCoderで解説ACした問題一覧【随時更新】

趣味で競技プログラミングを解いていますが解説ACをすることがあります。これをわかったというには心苦しいのでこの記事にまとめて定期的にまとめていこうと思います。

## 解説AC とは
解説ACとは、競技プログラミングで解説を見てAC（正解）を出すことです。一般的には「解説を見ながらAC通したけど内容はあまり理解していない状態」をさすことが多いです。

## 履歴
2024/06/18 新規作成

## 解説AC一覧
[AtCoder Beginner Contest 341 B - Foreign Exchange](https://atcoder.jp/contests/abc341/tasks/abc341_b)  
愚直に計算を行うと実行制限時間を超えてしまいます。そのため計算上の工夫をする必要があるのですがその理解ができていない。
商談のカスタム参照関係（取引先責任者）項目の取引先責任者に新規Todo作成時にデフォルトで値がくるように設定する方法

こんにちは。本橋孝昭です


商談のカスタム参照関係（取引先責任者）項目があったとします。
もしもこの取引先責任者に値が入ってるとき、新規商談の「新規Todo」作成時に担当者が自動で付与されていたら効率いいですね。


この設定は商談にアクションを作成しページレイアウトに作成したアクションを表示させれば対応可能です


作成した商談アクションはこのような設定です
![アクション.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/fbdb63d1-75f2-ce58-198c-ed9e542bbc12.png)

参照関係の設定をデフォルトで設定します

![参照関係.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/16d9ae51-122a-f7f1-7b49-998f83ebf37f.png)

あとは商談作成時に参照関係が値がある場合、新規Todo作成時に自動的に取引先責任者が保存されます

（今回の例だと自動的に田中太郎が更新されます）

![作成01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/102b48b9-1541-476a-1066-b29373785a25.png)


![作成02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/ef603a36-6690-dcd2-b0d1-17b5cca02008.png)
闘魂Elixir ーー AtCoder Beginner Contest 339(A)をElixirで楽しむ

<b><font color="red">$\huge{元氣ですかーーーーッ！！！}$</font></b>
<b><font color="red">$\huge{元氣があればなんでもできる！}$</font></b>

<b><font color="red">$\huge{闘魂とは己に打ち克つこと。}$</font></b>
<b><font color="red">$\huge{そして闘いを通じて己の魂を磨いていく}$</font></b>
<b><font color="red">$\huge{ことだと思います}$</font></b>


# はじめに

[AtCoder Beginner Contest 339](https://atcoder.jp/contests/abc339)を[Elixir](https://elixir-lang.org/)で解いてみます。

[AtCoder](https://atcoder.jp/)を解くのが趣味で、休憩時間に解いているという若い人がいて、それってすごい意識の高い休憩時間の過ごし方だと思って、私も真似してみることにしました。


# [AtCoderをElixirでやってみる](https://zenn.dev/torifukukaiou/articles/ac84c87736ceebf4da01)

入力の読み取り方や解答の作り方は、別の記事にまとめています。


https://zenn.dev/torifukukaiou/articles/ac84c87736ceebf4da01

ご参照くださいませ。

[Elixir](https://elixir-lang.org/)で[AtCoder](https://atcoder.jp/)を楽しむためには、エントリポイントを`Main.main/0`にする必要があります。つまり`Main`モジュールを作って、その中に`main/0`関数を定義するわけです。

# [A - TLD](https://atcoder.jp/contests/abc339/tasks/abc339_a)

問題はリンク先をご参照くださいませ。
私の解答を貼っておきます。


<details><summary>私の解答</summary>

_問題文を読んでいることを前提にひとこと解説をしておきます。_

文字列の分割なので[String.split/3](https://hexdocs.pm/elixir/String.html#split/3)を解法の中心にすえるとよいでしょう。リストの末尾の取り出しは、[Enum.at/3](https://hexdocs.pm/elixir/Enum.html#at/3)を使ってインデックスに`-1`を指定すると末尾の要素を取り出せます。


```elixir
defmodule Main do
  def main do
    s = IO.read(:line) |> String.trim()
    
    solve(s)
    |> IO.puts()
  end
  
  def solve(s) do
    s |> String.split(".") |> Enum.at(-1)
  end
end
```




</details>




---

# さいごに

[AtCoder Beginner Contest 339](https://atcoder.jp/contests/abc339)を[Elixir](https://elixir-lang.org/)で解くことを楽しみました。

あなたのお好きなプログラミング言語でお楽しみください。

---


**闘魂**とは、  **「己に打ち克つこと。そして闘いを通じて己の魂を磨いていくことである」** との猪木さんの言葉をそのまま胸に刻み込んでいます。
知っているだけで終わらせることなく、実行する、断行する、一歩を踏み出すことを自らの行動で示していきたいとおもいます。
**アントニオ猪木さんのメッセージから元氣をもらったものとして、それを次代に語り継ぎ、自分自身が「闘魂」を体現するものでありたいとおもいます。**

---

<b><font color="red">$\huge{元氣ですかーーーーッ！！！}$</font></b>
<b><font color="red">$\huge{元氣があればなんでもできる！}$</font></b>
<b><font color="red">$\huge{１、２、３ ぁっダァー！}$</font></b>
Salesforceのフローでスケジュール済みの自動化を確認

Salesforceではスケジュール済みフローがあります

![スケジュールパス設定方法.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/47ba93cd-c2d7-7da9-6f14-c9fd539b293f.png)

スケジュール済みパスを設定すれば特定の日項目は「○日前」「○日後」に自動化の設定が可能です


このスケジュール済みパスは
「時間ベースのワークフロー」で確認できます

こちらでどのレコードがいつ自動化されるのか確認してください

![時間ベースのワークフロー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/3c982366-cd2d-a5ec-8f8f-80962e89571e.png)
【Next.js】Storybookで`Error: invariant expected app router to be mounted`

# はじめに

こんにちは、エンジニアのkeitaMaxです。

Next.jsでStorybookを使用して開発をしていた時に困ったことを備忘録として記載します。


# エラー内容

Storybookで以下のようなエラーが出てしまいました。

```
Error: invariant expected app router to be mounted
  at useQuestionView (/views-QuestionListView-index-stories.iframe.bundle.js:416:74))
  at QuestionListView (/views-QuestionListView-index-stories.iframe.bundle.js:463:81))
  at renderWithHooks (/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_js-node_modules_storyboo-e8168e.iframe.bundle.js:46582:18))
  at updateFunctionComponent (/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_js-node_modules_storyboo-e8168e.iframe.bundle.js:51751:20))
  at updateSimpleMemoComponent (/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_js-node_modules_storyboo-e8168e.iframe.bundle.js:51460:10))
  at updateMemoComponent (/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_js-node_modules_storyboo-e8168e.iframe.bundle.js:51361:14))
  at beginWork$1 (/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_js-node_modules_storyboo-e8168e.iframe.bundle.js:54008:16))
  at beginWork (/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_js-node_modules_storyboo-e8168e.iframe.bundle.js:62388:14))
  at performUnitOfWork (/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_js-node_modules_storyboo-e8168e.iframe.bundle.js:61212:12))
```

# 修正内容

`.storybook/preview.ts`を以下のように修正しました。

```ts:preview.ts
import type { Preview } from '@storybook/react';
import "../src/styles/globals.css";
const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
    // 以下を追加
    nextjs: {
      appDirectory: true,
    },
    //以上を追加
  },
};

export default preview;
```

これを追加することでエラーは出なくなり、
```ts
import { useRouter } from "next/navigation"
```
が使用できるようになりました。


# おわりに

この記事での質問や、間違っている、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。

最後まで読んでいただきありがとうございました！

# 参考

https://github.com/vercel/next.js/discussions/50068
闘魂Elixir ーー AtCoder Beginner Contest 340(B)をElixirで楽しむ

<b><font color="red">$\huge{元氣ですかーーーーッ！！！}$</font></b>
<b><font color="red">$\huge{元氣があればなんでもできる！}$</font></b>

<b><font color="red">$\huge{闘魂とは己に打ち克つこと。}$</font></b>
<b><font color="red">$\huge{そして闘いを通じて己の魂を磨いていく}$</font></b>
<b><font color="red">$\huge{ことだと思います}$</font></b>


# はじめに

[AtCoder Beginner Contest 340](https://atcoder.jp/contests/abc340)を[Elixir](https://elixir-lang.org/)で解いてみます。

[AtCoder](https://atcoder.jp/)を解くのが趣味で、休憩時間に解いているという若い人がいて、それってすごい意識の高い休憩時間の過ごし方だと思って、私も真似してみることにしました。


# [AtCoderをElixirでやってみる](https://zenn.dev/torifukukaiou/articles/ac84c87736ceebf4da01)

入力の読み取り方や解答の作り方は、別の記事にまとめています。


https://zenn.dev/torifukukaiou/articles/ac84c87736ceebf4da01

ご参照くださいませ。

[Elixir](https://elixir-lang.org/)で[AtCoder](https://atcoder.jp/)を楽しむためには、エントリポイントを`Main.main/0`にする必要があります。つまり`Main`モジュールを作って、その中に`main/0`関数を定義するわけです。

# [B - Append](https://atcoder.jp/contests/abc340/tasks/abc340_b)

問題はリンク先をご参照くださいませ。
私の解答を貼っておきます。


<details><summary>私の解答</summary>

_問題文を読んでいることを前提にひとこと解説をしておきます。_

プログラムでは先頭に追加していっています。この問題を解く上では先頭に追加しても末尾に追加しても解けるので、先頭に追加する方が速いという[Elixir](https://elixir-lang.org/)のリストの性質を使っています。リストのインデックスは０オリジンであることを思い出してください。

```elixir
defmodule Main do
  def main do
    q = IO.read(:line) |> String.trim() |> String.to_integer()
    
    queries = for _i <- 1..q do
      IO.read(:line) |> String.trim() |> String.split(" ") |> Enum.map(&String.to_integer/1)
    end
    
    solve(queries)
    |> IO.puts()
  end
  
  def solve(queries) do
    queries
    |> Enum.reduce({[], []}, fn
      [1, x], {a_list, list} -> {[x | a_list], list}
      [2, k], {a_list, list} -> {a_list, [Enum.at(a_list, k - 1) | list]}
    end)
    |> elem(1)
    |> Enum.reverse()
    |> Enum.join("\n")
  end
end
```




</details>




---

# さいごに

[AtCoder Beginner Contest 340](https://atcoder.jp/contests/abc340)を[Elixir](https://elixir-lang.org/)で解くことを楽しみました。

あなたのお好きなプログラミング言語でお楽しみください。

---


**闘魂**とは、  **「己に打ち克つこと。そして闘いを通じて己の魂を磨いていくことである」** との猪木さんの言葉をそのまま胸に刻み込んでいます。
知っているだけで終わらせることなく、実行する、断行する、一歩を踏み出すことを自らの行動で示していきたいとおもいます。
**アントニオ猪木さんのメッセージから元氣をもらったものとして、それを次代に語り継ぎ、自分自身が「闘魂」を体現するものでありたいとおもいます。**

---

<b><font color="red">$\huge{元氣ですかーーーーッ！！！}$</font></b>
<b><font color="red">$\huge{元氣があればなんでもできる！}$</font></b>
<b><font color="red">$\huge{１、２、３ ぁっダァー！}$</font></b>