OmniAICreator/Qiita-1.07M huggingface dataset:
Windows10 を使用していて突然キーが無反応になる（原因究明）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44540/10dca8c3-9ff1-04dc-d91d-abc8c5669ee6.png)

# Windows10 を使用していて突然キーが無反応になる症状
表題のとおりですが、突然キーが無反応になるのです。症状としては以下となります。
　・マウス、矢印キー、エンターなどは反応があるが、'a'や'0'などの英数字入力が無反応となる。
　・再起動すれば、通常に使用できる。
　・１日に３，４回発生するときもあれば、数か月発生しないときもある。

# 原因と対応方法（通常使用時）
原因として「カスペルスキー セキュリティ」が悪さをしていたようです。ですので終了すれば無反応になる症状が改善されます。
※終了したら、再度セキュリティソフトを起動しておきましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44540/71c5f3cd-f328-2eae-e811-0db2577e786e.png)

どのタイミングでこの症状になるのか不明ですが、突然キーが無反応になる対応方法がわかって安心

# ログイン時にキーが無反応の場合
この場合は、ログインできないので厄介です。スクリーンキーボードを使ってログインしましょう。
そして上記同様に「カスペルスキー セキュリティ」を終了すれば無反応になる症状が改善されます。

> [Windows10 – キーボードを使わずにログインする方法（スクリーンキーボード）](https://pc-karuma.net/windows-10-sign-in-screen-keyboard/)

# 他にも
キーが無反応になる対応は、他にもあるようです。難しいですね。
Next.js next/imageをnext exportで使えるようにする

Next.jsで作ったWebサイトのホスティング先をvercelからCloudflare Pagesに移しました。

Cloudflare Pagesは現行、next exportで静的にエクスポートされたHTMLのみホストできます。

そうなると、next/imageがそのままでは使えないので、設定を直して使えるようにしました。


## 1. TL;DR

next.config.jsに`images : {loader : 'custom'}`を設定する。

```js:next.config.js
/**
 * @type { import('next').NextConfig}
 */

module.exports = {
  images: {
    loader: 'custom',
  },
};
```

next/imageコンポーネントを使用する際に、loaderを設定する。

```tsx
import Image from 'next/image';
import { imageLoader } from 'lib/imageLoader';
.
.
.
<Image
  loader={imageLoader}
  alt={...}
  src={...}
  height={...}
  width={...}
  layout="..."
/>
```


## 2. loaderの設定


### 2-1. 外部の画像最適化APIを利用する場合

例えばContentfulやGraphCMSなどのヘッドレスCMSは画像最適化のAPIがあります。

その場合、loaderを使用して、画像のsrcからsrcsetを生成して返すことができます。

ここでは、imageLoader関数を作成してsrcsetを返す例を紹介します。

作成した後は、next/imageで、`loader={imageLoader}`を指定してください。

#### 例1: Contentfulの場合

```tsx:imageLoader.tsx
type PropTypes = {
  src: string;
  width: number;
};

export const imageLoader = (props: PropTypes) => {
  const { src, width } = props;
  const MAX_WIDTH = 640;
  const resizeWidth = width > MAX_WIDTH ? MAX_WIDTH : width;

  return `${src}?w=${resizeWidth}&q=75&fm=webp`;
};

export default imageLoader;

```

下記の変更を加えたsrcsetを返しています。

- next/imageに指定したwidthを元にリサイズ(最大幅は640に設定)
- フォーマットをWebPに変換
- クオリティは75%に

#### 例2: GraphCMSの場合

```tsx:imageLoader.tsx
type PropTypes = {
  src: string;
  width: number;
};

export const imageLoader = (props: PropTypes) => {
  const { src, width } = props;
  const relativeSrc = (targetSrc: string) =>
    targetSrc.split('/').pop();

  return `https://media.graphassets.com/resize=width:${width}/output=format:webp/${relativeSrc(
    src
  )}`;
};

export default imageLoader;

```

下記の変更を加えたsrcsetを返しています。

- next/imageに指定したwidthを元にリサイズ
- フォーマットをWebPに変換

### 2-2. 特に変更が必要ない場合

```tsx
import Image from 'next/image';
.
.
.
<Image
  loader={({ src }) => src}
  alt={...}
  src={...}
  height={...}
  width={...}
  layout="..."
/>
```

srcをそのまま返します。

参考：[reactjs - Getting public image asset in Next.js project folder when loader configuration path is set - Stack Overflow](https://stackoverflow.com/questions/70429040/getting-public-image-asset-in-next-js-project-folder-when-loader-configuration-p)

## 99. おわりに

next exportが使えるとホスティング先の選択肢が増えて便利です。
neosでlogix その72

# 概要
neosでlogixやってみる。
Type Deltaノード
Index Of Stringノードを使ってみた。


# 写真


![2022-05-06 22.27.13.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/49bd73ea-9d47-65f7-0679-05c5f3ac15df.jpeg)



# Type Delta
```

Inputs
Outputs
 	String	*
```

# Index Of String

```
Inputs
 	String	Str
 	String	Part
 	Int	StartIndex
 	Bool	SearchFromEnd
Outputs
 	Int	*

```

# 手順

- logixtooltipを装着。
- ノードブラウザを表示。
- Input Device>Keyboard>Type Deltaをスポーン。
- String>Index Of Stringをスポーン。
- Demultiplexをスポーン。
- つなぐ。


以上。
AWS公式資料で挑むMLS認定(3)-深層学習(ディープラーニング)

##### [前回] [AWS公式資料で挑むMLS認定(2)-AI/機械学習(ML)の基本](https://qiita.com/mingchun_zhao/items/7daeda4ffaf38b416d7e)

## はじめに

前回は、AI/機械学習の基本を取り上げました、
今回は、少し深い学習手法`深層学習`を理解します。

## 深層学習(DL: Deep Learning)とは

- 深層学習(ディープラーニング)とは
    - 機械学習の一種で、人間の脳の学習と情報処理をシミュレートし、データから複雑な概念や関係を抽出
        - 深層学習モデルは、画像/テキスト/音声データにおける複雑なパターン認識により予測精度を上げる
    - 対象の全体像から細部までの各々の粒度の概念を階層構造として関連させて学習
        - 従来の機械学習で、基本的な回帰アルゴリズムなどは、説明可能な一連のリレーションシップしか作成できなかった
        - 深層学習では、非線形アルゴリズムの階層を利用し、相互作用する一連の要素に対し、分散表現と予測を作成できる
    - `ニューラルネットワーク`というネットワーク構造が使用される
        - プログラムコードでは表現できない、人間が理解さえできないリレーションシップを特定できる
        - 階層化アルゴリズムを使用し、複雑なデータの予測や解釈が可能

## ニューラルネットワークのネットワーク構造

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/89a2d56f-5a8b-5875-4da2-1dd52630cbff.png)

- 3層構造
    - 入力層
    - 中間層
    - 出力層
- 各層に`重み`を設定
    - 学習しながら`重み`を調整することで、より精度の高い予測を行なう
- 多層人工ニューラルネットワーク(DNN: Deep Neural Network)
    - 中間層が複数層となり、深いネットワーク構造
    - DNNを用いる学習を深層学習(ディープラーニング)と呼ぶ

## AI/機械学習/深層学習の関係

- AI(ルールベース)
    - 機械学習
        - 深層学習(ニューラルネットワーク)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/c2930a52-5e25-c8d5-a920-f320b7c927ea.png)

## 深層学習のユースケース

コンピュータが自律的に学習を行い、管理を必要としないため、
幅広い人工知能のユースケースに適している。

- 画像や動画の分類と区分け
    - 畳み込みニューラルネットワークは、対象分類や顔認識など視覚的タスクにおいて、人間を上回る
    - 写真ストレージサービスに、深層学習による顔認識機能が使用される
    - Amazonサービス: Amazon Rekognition
- 音声認識
    - 仮想アシスタントがリクエストを認識し応答を返すように設計
    - 深層学習により、発話とその意味を簡単に判断できる
        - 人間のアクセントや音声パターンは変化するため、伝統的な数学やコンピュータサイエンスを利用して音声認識を行うことは困難
    - Amazonサービス: Amazon Transcribe
- 自然言語処理
    - システムが人間の言語、語調、文脈を理解できるように設計
        - 感情や皮肉などのより難しい概念を識別できる
    - ユーザーからの問い合わせを解読し応答を行う音声/テキストボットで顧客サービスを自動化
    - Amazonサービス: Amazon Lex
- レコメンデーション(推奨)エンジン
    - オンラインショッピングで購入したいアイテムに関連する、パーソナライズされたコンテンツを推奨
    - ユーザー行動を追跡し、多数ユーザーの行動を総合的に比較することで、ユーザーが興味を持つ新しいアイテムを特定
    - Amazonサービス: Apache MXNet

## クラウドでの深層学習の利点

- スピード
    - 深層学習アルゴリズムは、短期間で学習できるように設計されている
    - 複雑な行列演算にGPUやCPUのクラスタを使用し、深層学習モデルのトレーニング期間を短縮
    - 構築したモデルを使用し大量データを処理可能で、精度の高い結果を出すことが可能
    - 分散ネットワークを活用し、深層学習アプリケーションを短期間で設計、開発、トレーニングできる

- スケーラビリティ
    - ニューラルネットワークで、複数プロセッサをシームレスかつ効率的に活用し、ワークロードを分散
    - 幅広いリソースをオンデマンドで利用でき、あらゆる規模の深層学習モデルに、リソースを無制限にデプロイ可能 
    - 大規模データセットの取り込み、管理が可能

- 柔軟性
    - パッケージ化されたライブラリから、ウェブ/モバイル/接続デバイスなどユースケースに適した深層学習アルゴリズムを選択できる
    - クラウドで実行できる深層学習フレームワーク
        - Apache MXNet
        - TensorFlow
        - Microsoft Cognitive Toolkit
        - Caffe
        - Caffe2
        - Theano
        - Torch
        - Keras

## おわりに

機械学習手法である`深層学習`の基本を勉強しました。
次回はもう一つの学習手法`強化学習`です、お楽しみに。

##### [次回] [AWS公式資料で挑むMLS認定(4)-強化学習(Reinforcement Learning)](https://qiita.com/mingchun_zhao/items/baf9e15e11506eb053fa)
挫折せずに新しいプログラミング言語を習得するための５箇条

# はじめに
何事においても事を成すためには継続することです。たとえ、記憶力がよく物わかり良い優秀な頭脳を持っていても、継続する能力を持っていなければいけません。俗に言う、器用貧乏なタイプの人を想像すると分かり易いかと思います。

プログラミングは`継続できる能力`とパソコンとネット環境がありさえすれば習得可能です。`覚えようとせず、とにかくググる`、コピペOKですが、必ずデバッグして動作を理解することです。

まず、`自分がなぜプログラミング言語を習得したいのか？`という習得目標を明確にします。ここが曖昧だと、５箇条をきちんと守って実行したとしても最後の最後でやめてしまう（目的を失う）でしょう。`習得過程で何かやりたいことが見つかるんじゃないの？`といった中途半端な気持ちは絶対にダメです。

しかし、ゴールが決まれば、あとは`なんとなく`やってきましょう！

なぜなら、普通、モチベーションなんて維持できませんから！

モチベーションなんていう崇高な言葉忘れましょう！

`なんとなく`でいいのです！

ぜったいに突っ走らないで！！！

楽な気持ちがないと９９％挫折します！

`なんとなく`でもそれなりのものがつくれるようになりますし、ある程度のお金を稼げるようになります。

# 到達技術レベル
中級レベル
(プログラマー経験者求人募集案件 最低合格レベル)

# ５箇条

０. 習得目標（ゴール）を明確にする（ここは徹底する）
１．手を動かして言語に`慣れる` (チュートリアルを適当にやる)
２．使える`機能を知る`（覚える必要はない）
３．Githubのスター数が多いレポジトリを見てコードの`書き方を知る`（覚える必要はない）
４．デバッグして`動作を理解する`
５．フレームワークなどに手を加えたり、別の方法で`１から実装する`

# 総論
機能が（なんとなく）分かって、書き方が（なんとなく）分かって、動作のメカニズムが（なんとなく）分かれば、何かを（なんとなく）作れる

世の中で動いているシステムだって、`なんとなく`作られて、`なんとなく`運用されている

ほとんどのプログラミング言語は常に変化し続けているため、完全に理解しようとするのでなく、`なんとなく`やっていけば、`なんとなく`うまくいく

どんな事でも初めから完璧にやろうとすると挫折する

`なんとなくでいいや`の精神で継続しましょう

継続は力なりです
Google Cloud PlatformでCloud Vision APIによる画像テキスト解析

今回のテーマは特殊なプリンター出力の画像解析により、テキスト化をGCPのAPIにより行ってみました。
GCPのアカウントは既に取得済みという設定です。
参考サイト：https://syncer.jp/cloud-vision-api
![スクリーンショット 2022-05-06 15.49.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101462/b3244fb7-4de1-509b-cb1a-ba4fc473d337.png)
Databricksジョブの「リペアおよびリラン」によるデータ&MLワークフローの時間とコストの節約

[How to Save Time and Money on Data and ML Workflows With “Repair and Rerun” \- The Databricks Blog](https://databricks.com/blog/2022/05/06/save-time-and-money-on-data-and-ml-workflows-with-repair-and-rerun.html)の翻訳です。

:::note warn
本書は抄訳であり内容の正確性を保証するものではありません。正確な内容に関しては原文を参照ください。
:::

[Databricksジョブ](https://qiita.com/taka_yayoi/items/bc77fbcf1dc30d8ff742)は皆様のデータ、分析、AI全てに対する完全にマネージドなオーケストレーターです。全てのユーザーは複数のタスクから構成されるワークフローを簡単に作成することができ、タスク間の依存関係を定義することができます。これによって、コードのモジュール化、迅速なテスト、より効率的なリソースの利用を実現し、トラブルシュートを容易にします。背後のレイクハウスプラットフォームとの密なインテグレーションによって、包括的なモニタリング、スケーラビリティを提供しつつもプロダクションにおける信頼性を実現します。

現実世界のデータと機械学習のユースケースをサポートするために、企業はデータの取り込みからETL、MLモデルのトレーニング、サービングに至る多くの異なるタスクと依存関係を持つ洗練されたワークフローを構築する必要があります。これらのそれぞれのタスクは特定の順序で実行される必要があります。

しかし、ワークフローの重要なタスクが失敗した場合、関連している後段のタスク全てにインパクトがあります。ワークフローを復旧するには、インパクトを受けるタスク全てを理解し、最初からパイプラインを再実行することなしにどのように処理するのかを知っている必要があります。Databricksジョブの新たな「リペアおよびリラン」の機能は、まさにこの問題に取り組むために設計されました。

APIからバスの停留場に関する情報を取得し、別のAPIからリアルタイムで停留場の気候情報を取得しようとする以下の例を考えてみます。これら全てのAPI呼び出しの結果は取り込まれ、変換され、[Delta Live Tables](https://databricks.com/product/delta-live-tables)のタスクによって集約されます。
![](https://databricks.com/wp-content/uploads/2022/05/db-156-repair-rerun-img-1-1024x683.jpg)

このワークフローの通常のオペレーションでは、最初から最後まで問題なく動作します。しかし、タスクが気候データの取得に失敗したら何が起きるのでしょうか？何かしらの理由で気候APIが一時的に利用できなかったのかもしれません。この場合、前段の依存関係が失敗したのでDelta Live Tablesのタスクはスキップされることでしょう。当たり前ですが、ワークフローを再実行する必要がありますが、最初からプロセス全体を起動することは、station_informationデータを再度処理することになり、時間とリソースの無駄となります。
![](https://databricks.com/wp-content/uploads/2022/05/db-156-repair-rerun-img-2-1024x883.jpg)

新たに導入された「リペアおよびリラン」の機能は、お使いのジョブでエラーが起きた箇所を表示するだけではなく、インパクトを受けた全てのタスクを再実行することができます。これによって、すでに成功しているタスクを再実行する必要がなくなるので、時間とコストを劇的に節約することができます。

ジョブの実行が失敗した場合、リランを実行するには**Repair run**をクリックします。実行される残りのタスクを表示するポップアップ画面が表示されます。
![](https://databricks.com/wp-content/uploads/2022/05/db-156-repair-rerun-img-3-300x75.jpg)
![](https://databricks.com/wp-content/uploads/2022/05/db-156-repair-rerun-img-4.jpg)

新たなジョブ実行には、失敗した親のジョブ実行と関連づけられるユニークなバージョン番号が割り当てられるので、過去の失敗を確認し分析することが容易となります。
![](https://databricks.com/wp-content/uploads/2022/05/db-156-repair-rerun-img-5.jpg)

タスクが失敗した際、Databricksジョブの「リペアおよびリラン」は、お使いのプロダクションのパイプラインを迅速に修正するお役に立ちます。直感的なUIでは、どのタスクがインパクトを受けているのかを正確に表示するので、フロー全体を再実行することなしに問題を修正することができます。これによって、将来的に発生する問題を低減するための深い洞察を得つつも、時間と工数を削減することができます。

「リペアおよびリラン」は、最近提供された[クラスターの再利用機能](https://qiita.com/taka_yayoi/items/555a5e94e75eb2843c0a)に続いて正式提供(GA)となっています。

# 次のステップ

ロードマップに従い提供される新機能を楽しみにしており、[皆様からのフィードバック](http://ideas.databricks.com/)を心待ちにしています。


### Databricks 無料トライアル

[Databricks 無料トライアル](https://databricks.com/jp/try-databricks)
Androidのビュー部品(8)Google／Legacyパレット

# はじめに

Androidアプリの開発のために、パレットとビュー部品についての理解を整理します。
この記事で取り扱う環境は、Android Studio＋Windows10です。

:::note info
真新しい情報ではありません。体系立てて理解を整理するために、自分が理解しやすい枠組みでまとめるものです。
:::

## ひとつ前

https://qiita.com/w2mjra555/items/fea8d7b0c1d3b353a6bc

## 1.レイアウトファイル(activity_main.xml)

デザインビューで見るとこんなかんじです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2515319/60db1f75-f50e-6f5d-cd56-4ca234735668.png)

## 1.パレットとビュー部品

| No | パレット || No | パレット || No | パレット |
|-----------:|:-----------|:-----------|-----------:|:-----------|:-----------|-----------:|:-----------|
| 1 | Common || 4 | Widgets || 7 | Helper |
| 2 | Text || 5 | Layouts || 8 | Google |
| 3 | Buttons || 6 | Containers || 9 | Legacy |

### 1.8.Googleパレット

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2515319/f086667d-9785-1bcc-0b39-1484bc6c6e69.png)

| No | ビュー部品 | 説明 |
|-----------:|:-----------|:------------|
| 1 | AdView | バナー広告 |
| 2 | MapView | 地図 |

### 1.9.Legacyパレット

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2515319/08fe2372-305f-a3e7-19dd-435b250b74ac.png)

| No | ビュー部品 | 説明 |
|-----------:|:-----------|:------------|
| 1 | GridLayout | グリッドレイアウト |
| 2 | ListView | リスト |
| 3 | TabHost | タブホスト |
| 4 | RelativeLayout | 相対レイアウト |
| 5 | GripView | グリッドビュー |
Androidのビュー部品(7)Helperパレット 

# はじめに

Androidアプリの開発のために、パレットとビュー部品についての理解を整理します。
この記事で取り扱う環境は、Android Studio＋Windows10です。

:::note info
真新しい情報ではありません。体系立てて理解を整理するために、自分が理解しやすい枠組みでまとめるものです。
:::

## ひとつ前

https://qiita.com/w2mjra555/items/1fe17da75e1d23da3a6c

## ひとつ先

https://qiita.com/w2mjra555/items/ccb049c5565e76c8a9a1

## 1.レイアウトファイル(activity_main.xml)

デザインビューで見るとこんなかんじです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2515319/60db1f75-f50e-6f5d-cd56-4ca234735668.png)

## 1.パレットとビュー部品

| No | パレット || No | パレット || No | パレット |
|-----------:|:-----------|:-----------|-----------:|:-----------|:-----------|-----------:|:-----------|
| 1 | Common || 4 | Widgets || 7 | Helper |
| 2 | Text || 5 | Layouts || 8 | Google |
| 3 | Buttons || 6 | Containers || 9 | Legacy |

### 1.7.Helperパレット

主に制約レイアウト用のヘルパーが定義されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2515319/74b590f2-cb42-69ae-2b9f-a13cb75606d0.png)

| No | ビュー部品 | 説明 |
|-----------:|:-----------|:------------|
| 1 | Group | グループ |
| 2 | Barrier(Horizontal) | 水平バリア |
| 3 | Barrier(Vartical) | 垂直バリア |
| 4 | Flow | フロー |
| 5 | Gideline(Horizontal) | 水平ガイドライン |
| 6 | Gideline(Vartical) | 垂直ガイドライン |
| 7 | Layer | レイヤー  |
| 8 | ImageFilterView | 画像フィルタビュー |
| 9 | ImageFilterButton | 画像フィルタボタン  |
| 10 | MockView | モックビュー |
Androidのビュー部品(6)Containersパレット

# はじめに

Androidアプリの開発のために、パレットとビュー部品についての理解を整理します。
この記事で取り扱う環境は、Android Studio＋Windows10です。

:::note info
真新しい情報ではありません。体系立てて理解を整理するために、自分が理解しやすい枠組みでまとめるものです。
:::

## ひとつ前

https://qiita.com/w2mjra555/items/c905fa364541dc0d6a0d

## ひとつ先

https://qiita.com/w2mjra555/items/fea8d7b0c1d3b353a6bc

## 1.レイアウトファイル(activity_main.xml)

デザインビューで見るとこんなかんじです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2515319/60db1f75-f50e-6f5d-cd56-4ca234735668.png)

## 1.パレットとビュー部品

| No | パレット || No | パレット || No | パレット |
|-----------:|:-----------|:-----------|-----------:|:-----------|:-----------|-----------:|:-----------|
| 1 | Common || 4 | Widgets || 7 | Helper |
| 2 | Text || 5 | Layouts || 8 | Google |
| 3 | Buttons || 6 | Containers || 9 | Legacy |

### 1.6.Containersパレット

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2515319/532b77d8-7a6b-47b7-a7e2-d7b046d496b8.png)


| No | ビュー部品 | 説明 |
|-----------:|:-----------|:------------|
| 1 | Spinner | スピナー(プルダウン) |
| 2 | RecyclerView | メモリ使用量を抑え大規模なデータを扱う  |
| 3 | ScrollView | スクロール  |
| 4 | HorizontalScrollView | 横スクロール  |
| 5 | NestedScrollView | ネストしたスクロール |
| 6 | ViewPager2 | ページャ(画面スライド) |
| 7 | CardView | スイッチ形式のボタン |
| 8 | AppBarLayout | アプリバー |
| 9 | BottomAppBar | 下部アプリバー |
| 10 | NavigationView | ナビゲーション |
| 11 | BottomNavigationView | 下部ナビゲーション |
| 12 | Toolbar | ツールバー |
| 13 | TabLayout | タブレイアウト |
| 14 | TabItem | タブアイテム |
| 15 | ViewStub | 読み込みを先送りする |
| 16 | `<include>` | レイアウトを使いまわすタグ |
| 17 | FragmentContainerView | アクティビティ内でフラグメントを扱うコンテナ |
| 18 | NavHostFragment | ナビゲーションホストフラグメント |
| 19 | `<View>` | ビュータグ |
| 20 | `<requestFocus>` | フォーカスをあてるタグ |
【AWS】Lambda Function URLsを使用したLineBot運用に切り替えた所感

こちらの技術ブログへ移行しました。

https://aki-website.tech/lambda-function-urls-linebot/

## はじめに
今までLambdaにエンドポイントを追加する際はAPI Gateway等を使用することが必要でしたが、
2022年4月6日よりLambda内でエンドポイントを追加できる「Lambda Function URLs」が公開されたため切り替えて試してみました。

DBデータを参照するLineBotにLambdaを使用して運用しているため、実際の使用感についても後述しています！

## 対象者
この記事は下記のような人を対象にしています。

- AWSに興味がある方
- API Gateway + Lambdaの構成で開発している方
- Lambdaにてエンドポイントを追加したい方

## 所感
1. 設定に関して

   設定した手ごたえが無いくらい簡単に設定ができました。
   手順調査の方が時間が掛かり切り替えに手を動かしたのは5分程です！

2. 実際に運用しているLineBotでの使用感

   一定時間Lambdaへのアクセスが無い場合、API Gateway + Lambdaで運用していた頃よりもほんの少しタイムラグがある印象ですが、それほど気にならないくらいのレスポンスでした。

## 設定手順

Lambda管理画面から「関数の作成」ボタンを押下

「基本的な情報」欄を設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2345364/aae2181a-71b0-3af5-e3f0-31f5cfd5c8c9.png)

画面下部の「詳細設定」欄の「関数URLを有効化 - 新規」にチェック
今回は「NONE」を選択し「関数の作成」を押下

:::note 
「NONE」を選択した場合、URLを入手すれば**誰でもアクセスできる状態**となります。
:::
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2345364/244535e1-a592-fd21-278f-daf68eeb07a0.png)

関数が作成されたことを確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2345364/b5276fea-3815-1ca1-915b-800bd2f546d8.png)

URLの確認は画面右上の「関数URL」もしくは
「設定」→「関数URL - 新規」を選択後「関数URL」できます！(オレンジの網掛け箇所)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2345364/43ad5349-2750-cd20-b714-88aa633fb966.png)


## 参考サイト
- AWS公式ブログ

https://aws.amazon.com/jp/blogs/news/announcing-aws-lambda-function-urls-built-in-https-endpoints-for-single-function-microservices/

- DevelopersIOブログ

https://dev.classmethod.jp/articles/try-aws-lambda-function-urls/

## おわりに
Lambda Function URLsについての実際の設定手順および所感をまとめました。

レスポンスにタイムラグがある様に感じましたが、体感的に苦にならない程で「言われればほんのり遅いかも？」くらいでした。

Herokuの無料プランで運用していたときはスタンバイステータスからのレスポンスは1分程掛かっていたので、より良いサービスが出るまではLambda Function URLsでの運用をしたいと思います！
Render.com にRailsアプリをデプロイ /　設定でつまったところ紹介

## はじめに

　さくらVPSヘのデプロイは中止した。非常にややこしいことになってきたためだ。また別記事にまとめる。もっと簡単にデプロイする場所を探して、最近流行りつつあるRender.comを使った。

## Render.comとは

https://render.com/

　PaaSのひとつで、Herokuよりも価格が安く柔軟に対応できるらしい。Renderの公式サイトで以下のような挑戦的な記事があった。

https://render.com/render-vs-heroku-comparison

　どちらも無料でつかえるプランがあるし、速度については比較してみないと違いがよくわからない。


## 設定でつまったところ

　ちょー簡単にデプロイまでできるのだが、すこしつまったところがあった。Render.comでは「Build Script」というスクリプトを書いて、デプロイの際にそれが実行されるようにしている。

https://render.com/docs/deploy-rails#create-a-build-script

ただ、私の場合はなぜかそれが反映されなかった。（無料プランのため？）そのため設定の「Build Command」を編集しないといけなかった。

変更前
```
bundle install 
```

変更後
```
bundle install && yarn install && bundle exec rake assets:precompile && bundle exec rake assets:clean && bundle exec rails webpacker:compile && bundle exec rake db:migrate
```

Build Commandの入力欄は1行だったので、&&でコマンドをつなげた。


## 各種エラーの記録

　何度もデプロイしてはだめ、を繰り返した。ちょっとしんどかった。エラーも記録しておく。

### エラー1: application.css is not present in the asset pipeline

```
 ActionView::Template::Error (The asset "application.css" is not present in the asset pipeline.
```

　application.cssがアセットパイプラインというところになかった。これは`config/environment/production.rb`　を以下のように修正した。

```config/environment/production.rb
# 略
config.assets.compile = true　　#falseからtrueへ変更
# 略
```

これは動的コンパイルと呼ばれる手法らしく、以下に説明があった。
なぜこれをするとエラーが直るのか。調べないといけない。

https://railsguides.jp/asset_pipeline.html#%E5%8B%95%E7%9A%84%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB


### エラー2: File to import not found   - bootstrap

```
(Error: File to import not found or unreadable: bootstrap/scss/bootstrap.
   on line 110:1 of app/assets/stylesheets/application.scss
 >> @import "bootstrap/scss/bootstrap";
```

 bootstrapが見つからないというエラーだったが、これはRender.comのサーバーにbootstrapが入っていないためだった。最初のデプロイ時に`yarn install`をすると、ローカルのyarnのlistに沿ってダウンロードしてくれる。

### エラー3 : Webpacker can't find


```
ActionView::Template::Error (Webpacker can't find application in /opt/render/project/src/public/packs/manifest.json. 
```

webpackerが入っていないだけだった。これもデプロイ時に以下のコマンドを追加して治った。
`bundle exec rails webpacker:compile`


# おわりに

　やっとWebサービスをデプロイすることができた。はやく運用までもっていけるように、細々とした修正をやっていこう。


参考：

https://zenn.dev/katsumanarisawa/articles/c9da48652f399d

https://zenn.dev/mc_chinju/articles/compare_render_and_heroku

https://qiita.com/koki_73/items/60b327a586129d157f38
Androidのビュー部品(5)Layoutsパレット

# はじめに

Androidアプリの開発のために、パレットとビュー部品についての理解を整理します。
この記事で取り扱う環境は、Android Studio＋Windows10です。

:::note info
真新しい情報ではありません。体系立てて理解を整理するために、自分が理解しやすい枠組みでまとめるものです。
:::

## ひとつ前

https://qiita.com/w2mjra555/items/47aee6e2b1be2a09fc54

## ひとつ先
https://qiita.com/w2mjra555/items/1fe17da75e1d23da3a6c

## 1.レイアウトファイル(activity_main.xml)

デザインビューで見るとこんなかんじです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2515319/60db1f75-f50e-6f5d-cd56-4ca234735668.png)

## 1.パレットとビュー部品

| No | パレット || No | パレット || No | パレット |
|-----------:|:-----------|:-----------|-----------:|:-----------|:-----------|-----------:|:-----------|
| 1 | Common || 4 | Widgets || 7 | Helper |
| 2 | Text || 5 | Layouts || 8 | Google |
| 3 | Buttons || 6 | Containers || 9 | Legacy |

### 1.5.Layoutsパレット

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2515319/9cb10249-cc3c-a913-51ac-32ce25917991.png)

| No | ビュー部品 | 説明 |
|-----------:|:-----------|:------------|
| 1 | ConstraintLayout | 制約によるレスポンシブなレイアウト |
| 2 | LinearLayout(horizontal) | 水平リニアレイアウト |
| 3 | LinearLayout(vertical) | 垂直リニアレイアウト |
| 4 | FrameLayout | パーツを一つだけ配置して使用するフレームレイアウト |
| 5 | TableLayout | テーブルレイアウト |
| 6 | TableRow | テーブル行  |
| 7 | Space | 余白 |
Androidのビュー部品(4)Widgetsパレット

# はじめに

Androidアプリの開発のために、パレットとビュー部品についての理解を整理します。
この記事で取り扱う環境は、Android Studio＋Windows10です。

:::note info
真新しい情報ではありません。体系立てて理解を整理するために、自分が理解しやすい枠組みでまとめるものです。
:::

## ひとつ前

https://qiita.com/w2mjra555/items/e87d10a64d2e32347aa2

## ひとつ先

https://qiita.com/w2mjra555/items/c905fa364541dc0d6a0d

## 1.レイアウトファイル(activity_main.xml)

デザインビューで見るとこんなかんじです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2515319/60db1f75-f50e-6f5d-cd56-4ca234735668.png)

## 1.パレットとビュー部品

| No | パレット || No | パレット || No | パレット |
|-----------:|:-----------|:-----------|-----------:|:-----------|:-----------|-----------:|:-----------|
| 1 | Common || 4 | Widgets || 7 | Helper |
| 2 | Text || 5 | Layouts || 8 | Google |
| 3 | Buttons || 6 | Containers || 9 | Legacy |

### 1.4.Widgetsパレット

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2515319/f8336ffc-eec4-dbee-29de-19403f4e2d4c.png)


| No | ビュー部品 | 説明 |
|-----------:|:-----------|:------------|
| 1 | View | ビュー |
| 2 | ImageView | 画像を表示 |
| 3 | WebView | Webを表示 |
| 4 | VideoView | 動画を表示 |
| 5 | CalenderView | カレンダーを表示 |
| 6 | ProgressBar | プログレスバー |
| 7 | ProgressBar(Horizontal) | 水平プログレスバー |
| 8 | SeekBar | シークバー(ボリューム調節ツマミ、スライダー) |
| 9 | SeekBar(Discrete) | 分離したシークバー(ボリューム調節ツマミ、スライダー) |
| 10 | RatingBar | レーティングバー |
| 11 | SearchView | 検索窓を表示 |
| 12 | TextureView | API 24 以降では、TextureView の代わりに SurfaceView を実装することが推奨されているらしい |
| 13 | SurfaceView | 階層内に追加の複合レイヤを埋め込める(高速描画が必要なときに使用) |
| 14 | Horizontal Divider | 水平の分割線 |
| 15 | Vertical Divider | 垂直の分割線 |
Androidのビュー部品(3)Buttonsパレット

# はじめに

Androidアプリの開発のために、パレットとビュー部品についての理解を整理します。
この記事で取り扱う環境は、Android Studio＋Windows10です。

:::note info
真新しい情報ではありません。体系立てて理解を整理するために、自分が理解しやすい枠組みでまとめるものです。
:::

## ひとつ前

https://qiita.com/w2mjra555/items/b7caea7ff5d1b506c73f


## ひとつ先
https://qiita.com/w2mjra555/items/47aee6e2b1be2a09fc54

## 1.レイアウトファイル(activity_main.xml)

デザインビューで見るとこんなかんじです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2515319/60db1f75-f50e-6f5d-cd56-4ca234735668.png)

## 1.パレットとビュー部品

| No | パレット || No | パレット || No | パレット |
|-----------:|:-----------|:-----------|-----------:|:-----------|:-----------|-----------:|:-----------|
| 1 | Common || 4 | Widgets || 7 | Helper |
| 2 | Text || 5 | Layouts || 8 | Google |
| 3 | Buttons || 6 | Containers || 9 | Legacy |

### 1.3.Buttonsパレット

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2515319/8bb1427b-d73d-bc48-6b59-745620e06d7f.png)

| No | ビュー部品 | 説明 |
|-----------:|:-----------|:------------|
| 1 | Button | 通常のボタン |
| 2 | ImageButton | 画像ボタン |
| 3 | ChipGroup | チップグループ |
| 4 | Chip | チップ |
| 5 | CheckBox | チェックボックス |
| 6 | RadioGroup | ラジオボタンのグループ  |
| 7 | RadioButton | ラジオボタン |
| 8 | ToggleButton | トグルボタン |
| 9 | Switch | スイッチ |
| 10 | FloatingActionButton | フローティングアクションボタン(マテリアルデザインにおいて、画面上で最も重要な要素に割り当てる) |
Corepackを使用する方法【npm】【yarn】【pnpm】

## Corepackとは
yarnやnpmなどのパッケージマネージャーを管理するツールです。

https://nodejs.org/api/corepack.html#supported-package-managers

## Corepackの使用方法
### Corepackを有効化する
Corepackはデフォルトでは有効でないため、有効化する必要があります。
有効化するには以下のコマンドを実行します。

```:ターミナル
$ corepack enable
```

### `package.json`を編集する
`package.json`に` "packageManager"`を追記します。
```package.json
{
  "packageManager": "yarn@3.2.0"
}
```
上記のように記述した場合にはそのプロジェクトではyarnの`3.2.0`が使用されるようになり、pnpmを使用すると以下のようなエラーが出ます。

```:ターミナル
$ yarn -v
3.2.0

$ pnpm
Usage Error: This project is configured to use yarn
```


しかし、npmの場合にはエラーが出ません。
```:ターミナル
$ npm
npm <command>

Usage:

npm install        install all the dependencies in your project
npm install <foo>  add the <foo> dependency to your project
npm test           run this project's tests
npm run <foo>      run the script named <foo>
npm <command> -h   quick help on <command>
npm -l             display usage info for all commands
npm help <term>    search for help on <term>
npm help npm       more involved overview

All commands:

    access, adduser, audit, bin, bugs, cache, ci,
    completion, config, dedupe, deprecate, diff,
    dist-tag, docs, doctor, edit, exec, explain,
    explore, find-dupes, fund, get, help, hook, init,
    install, install-ci-test, install-test, link, ll,
    login, logout, ls, org, outdated, owner, pack,
    ping, pkg, prefix, profile, prune, publish,
    rebuild, repo, restart, root, run-script, search,
    set, set-script, shrinkwrap, star, stars, start,
    stop, team, test, token, uninstall, unpublish,
    unstar, update, version, view, whoami

Specify configs in the ini-formatted file:
    /home/myuser/.npmrc
or on the command line via: npm <command> --key=value

More configuration info: npm help config
Configuration fields: npm help 7 config

npm@8.5.0 /usr/local/lib/node_modules/npm
```

### npmをCorepackで管理する
npmにおいてもエラーを出すには以下のように`corepack enable npm`する必要があります。
```:ターミナル
$ corepack enable npm
```
再度npmを使用するとエラーが出ます。
```:ターミナル¡¡
$ npm
Usage Error: This project is configured to use yarn
```
またバージョンの管理もできるようになります。
```package.json
{
  "packageManager": "npm@8.5.5"
}
```
```:ターミナル
$ npm -v
8.5.5
```
Tera Term タブ化 + ショートカットキー設定変更

Tera Termをタブ化する手順をまとめます。

初めに結論ですが、
やりたいことすべての実現はできませんでした、、、
Collector(タブ化アプリ)の[問題点](#問題点)が大丈夫という方だけご覧ください。

# Tera Termインストール + タブ化準備

Tera Termインストール時にCollecterも併せてチェックすれば準備OK
(インストール方法は[参考文献](#参考文献)を確認してください)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2515183/2ae87c97-d256-eef8-d010-930fab7a9d26.png)

# タブ化したTera Termの起動
Tera Termを起動する前にCollector.exeを起動します。
Collectorは常駐型のアプリでTera Termの起動に合わせてタブ化(コレクション)を開始します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2515183/6d21fd8e-c924-4f92-fd1d-913866d8b7fa.png)

# タブ移動のショートカット変更
Collectorのタブ移動のデフォルトがAlt+Jで気に入らなかったので、
Ctrl+PageUp,Ctrl+PageDownに変更しました。

ショートカットの設定変更は、
Collectorバーを右クリック > Configuration > Configurate > Hot keyから設定可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2515183/543eb336-c3c9-e52e-515b-b083482a7d18.png)

ここでCtrl+PageUp/Downに変更できれば良いのですが、
キー入力が別のタブ(Group,Auto exist)に取られてしまい入力できません。

そのため、各ユーザーのAppData下に生成されるcollector.iniを編集して無理やりキー設定を変更します。
※編集前に[注意事項](#注意事項)を確認してください
※デフォルトは下記パスにiniが生成されていました。
\<C:\Users\xxxx\AppData\Local\VirtualStore\Program Files (x86)\teraterm\Collector>
・collector.ini

各キーのIDは連番のようで、以下の対応でした。
|キー|ID|
|:--|:--|
|Ctrl + Page Up|2593|
|Ctrl + Page Down|2594|

```diff_ini:collector.ini
- HotkeyNext=1098
+ HotkeyNext=2594
- HotkeyPrev=1099
+ HotkeyPrev=2593
```

設定が反映されタブ移動のショートカットが変更されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2515183/e85c5b42-4eb9-f777-a7ae-ea1a39e2cc3e.png)

### 【!】注意事項
Collectorはプロセス終了時？？にcollector.iniを現在の設定で上書きするようです。
そのため、編集する前にタスクマネージャ等でCollector.exeのプロセスを終了してからiniファイルを編集してください。

# 問題点
Collectorは常駐アプリでショートカットキーを監視しており、
その他アプリへのキー入力も無効にするようです。

例えば、
上記設定でCtrl+PageUpを設定するとChromeやVSCodeのタブ移動ができなくなります。

ショートカットキーを被らないように設定する必要が出てきて、
これが致命的でCollectorの使用を諦めました、、、

# まとめ
タブ化はできて多少便利になりましたが、
ショートカットキーの変更などかゆいところに手が届かなく残念でした。

少し歴史をたどると
CollectorはIEをタブ化することを目的に作られたアプリで、
Tera Term専用というわけではないようでした。
まぁこれなら仕方ないという感じです。
http://www4.point.ne.jp/hiro/Collector/collector.html

Tera Term便利なのでメインの端末として使おうかと思いましたが、
Cygwinをタブ化するfattyを使ったほうが良いかなと思い始めています。


# 参考文献
[【ゼロからわかる】Teratermのインストールと使い方](https://eng-entrance.com/teraterm-install)
[TeraTermをタブ化させるには？](https://choo.hatenablog.jp/entry/20090609/1262749525#:~:text=%E3%80%8CCollecter%E3%80%8D%E3%81%A8%E3%81%84%E3%81%86%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2%E3%81%A7%E3%80%81,%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%AA%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82&text=%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%AE%E4%B8%AD,%E3%82%92%E5%85%A5%E3%82%8C%E3%82%8B%E3%81%A0%E3%81%91%E3%81%A7OK%EF%BC%81)
インストールとダウンロードの違いについて

# はじめに



毎日学習を進めながら、Twitterで、


日々の学習を投稿している初学者の方は多いと思います。私もそうです。


そんな中でなんとなくTwitterのタイムラインを見ていて、


ハッとしたツイートきっかけに今回の記事を書いています。


私自身いきなり「インストールとダウンロードの違いはなんですか？」と


訊かれても答えられないなと思ったので


今回は勉強がてらまとめてみた記事です。



# 具体的な内容



前提としてインストールとは何かとか、ダウンロードとは何か、


というようなことまで書いてしまうと長くなってしまうので、


ここでは書きません。


結論から言うとまず**順番が違います。**


まずダウンロードをします。それからインストール。


一部の特殊なケースを除いて、**基本的には順番は変わりません。**


そして２つ目の違いはファイルの種類です。


カンタンに言うとインストールするのはアプリだけです。


それ以外、画像（写真）・動画・音楽・テキスト・PDF文書などのファイルは


ダウンロードです。


だからパッと見て、インストールと書いてあったら、そのファイルはアプリということになります。



# まとめ


とりあえず、インストールするのはアプリだけで、


ダウンロードはファイルを保存するんだなと覚えていればいいかと思います。
個人的によく間違うスパコン関連の用語

# スパコンの用語まとめ
物理学徒が、スパコン関連の用語についてよく混乱していたので、メモをした記事です。不正確な用語などありましたら、ご指摘いただけますと幸いです。

## スパコンについて
- スパコンとは、複数のパソコンが繋がれているシステムである。

- 総ノード数は、スパコンを構成要素であるパソコンの数のことである。

- プロセッサ数とは、その一台のパソコンに搭載されたCPUの数のことである。

- コア数とは、１つのCPUの中にあるコア（CPU内部にある演算回路）
の数である。

- スレッド数は、同時に実行できる作業の数のことである。



## 例：Oakbridge-CXスーパーコンピュータシステム
例えば、Oakbridge-CXスーパーコンピュータシステムを例にする。
（https://www.cc.u-tokyo.ac.jp/supercomputer/obcx/system.php）

トータルで
- 1368ノード
- 1368 * 2 CPU
- 1368 * 2 * 28 コア

あると言える。上記３つの言い方はいずれも正しい。

## 余談：速度について
スパコンでプログラムを並列化した場合、並列化の数に対して多項式的にプログラムが速くなるわけではない。
全体の速度は、並列化できない部分が全体のボトルネックになってしまう。

https://ja.wikipedia.org/wiki/アムダールの法則

# まとめ
物理学徒がスパコン関連の用語について整理しました。
WSUSでクライアントOSに必要そうな更新プログラムを調べてみた

WSUSを構成するうえでどの製品を選ぶか手順がさらりと書いてあることが多いですが、Windowsの更新プログラムのみに触れられており、それ以外の項目は気になったので調べてみました。
本記事では、クライアントOSをターゲットにしています。
また、追加のソフトウェアについては一切考慮していないため、記載のカテゴリー以外で該当する製品を使用している場合は、調査・検討してください。

:::note info
WSUSの分類でお困りの方は、まずは Japan Microsoft Endpoint Manager Support Blog を参照してください。
https://jpmem.github.io/blog/wsus/2018-06-19_01/
:::

# WSUSのデータベースを見たうえでの考察

:::note warn
あくまで考察であるため、最終的な判断は自己責任にてお願いします。
:::

## Windows
バージョンに合わせて選択。

- Windows 11
- Windows 10, version 1903 and later
- Windows 10 LTSB
- Windows 8.1
- Microsoft Edge
- Microsoft Defender Antivirus
- OOBE ZDP (マスターイメージからWSUSを参照するようにしている場合は入れると、OOBEで更新ができるようになりそう。現地でキッティング中に動作されるのは悩ましいが…)
- Windows Security platform (Microsoft.SecHealthUIの更新らしい https://prod.support.services.microsoft.com/ja-jp/topic/a6ac7d2e-b1bf-44c0-a028-41720a242da3 や https://go.microsoft.com/fwlink/?LinkId=52661 参照)

::: note info
Windows 10 バージョン 1809 以降では、動的更新は既定で有効であり、WSUSを参照せずにインターネットに接続されます。
https://jpwinsup.github.io/blog/2022/04/01/WindowsUpdate/FU/FU_DynamicUpdate_QA/
クライアントがインターネットにアクセスできない場合にのみWSUSを参照できるようですので、環境に合わせて追加で設定してください。
:::

- Windows 11 Dynamic Update
- Windows 11 GDR-DU
- Windows 10 Dynamic Update
- Windows 10 GDR-DU
- Windows Safe OS Dynamic Update (Windows RE環境の更新)
- Windows 8.1 Dynamic Update (最終更新は2015/5/12)
- Windows GDR-Dynamic Update (Windows 8.1用? 最終更新は2015/5/12)

::: note warn
Windows 10 バージョン 1809 以降では、言語パックはWSUSではホストできないようになっているようです。
https://docs.microsoft.com/ja-jp/windows/deployment/update/fod-and-lang-packs

よって、LTSB/LTSC以外のPro/Enterprise/Education等をターゲットにする場合は、FOD/LP系は含めなくてよさそうです。(最終更新も2018/4/30ですしね)
- Windows 10 GDR-DU FOD
- Windows 10 GDR-DU LP
- Windows 10 Language Interface Packs
- Windows 10 Language Packs
- Windows 10 Feature On Demand
:::

# Office
バージョンに合わせて選択。
- "Dictionary Updates for Microsoft IMEs" は、IME2010用のためサポート終了

# Developer Tools, Runtimes, and Redistributables
ソフトウェアと一緒にインストールされることのある、` Microsoft Visual C++ **** 再頒布可能パッケージ ` の更新は、各 Visual Studio のバージョンを選択する必要あり。
また、 ` .NET 5.0 ` からはWindowsの更新から分離されたため、使用する場合は選択が必要。
- .NET Core 3.1
- .NET 5.0
- .NET 6.0

# SQL Server
バージョンに合わせて選択。


# ここからは、取得した際のメモになります。

# WSUSのデータベースを見る
同期する項目が多くなるにつれて、訪れるこの画面。
![WSUS connection error.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667945/9a639a0c-f3ae-6b53-5d30-af504e1384de.png)
Japan Microsoft Endpoint Manager Support Blog でも言及されていますが、WSUSには必要最小限の更新プログラムの選択・更新プログラムの拒否などのメンテナンスが必要です。

WSUSのデータベースはSQL Management Studioでも見れますが、テーブルが多く素人には判別できません。
今回はPowerShellでCSVに書き出すのが良いと判断しました。
ただし、PowerShellでもおそらく管理コンソール同様3分程度?のタイムアウトが設けられているようですので工夫が必要です。
かしこい方法ではありませんが、検索条件を絞るために月ごとで検索をするようにしてみました。

https://github.com/rin309/Get-WsusLatestUpdateAndOldestUpdatePerProduct/blob/main/Get-WsusLatestUpdateAndOldestUpdatePerProduct.ps1

:::note warn
動作保証はしません。
負荷がかかるため、本番環境では実行しないでください。
:::

:::note info
上記スクリプトを使用してさらに詳しく調べてみました。
https://note.com/rin309/n/n0a8d54c92d35
:::
Hugoのdate部分はタイム部分まで指定しないと時差で表示されないので注意

# あらすじ

_Hugo_ で記事を書きおわり、気持ちよくPushしたけど、

デプロイされたサイトにはその記事はかけらもありませんでした。

# 試行錯誤

最初は _GithubActions_ がうまく動いてないのかと思い、ローカルで `hugo` してみました。

しかし、やはり新しく書いたばかりの記事だけが表示されない。

次にテーマを疑いました。自作のテーマだったからです。

ページネーターあたりの理解が怪しかったので、そこを疑いましたが特に問題はない。

（確かめの過程でページネーターにちょっと詳しくなりました）

試しに適当な別の記事を作ってみると、そちらは表示される。

何が違うのか？　消したり戻したりするうちにどうやら _frontmatter_ だということが分かりました。

# 怪奇現象

dateに **2022-05-07** が指定されていると表示されなくなる。

怪奇現象です。

# 解決

Hugoのコミュニティに質問を投げるところでしたが、危なく踏みとどまりました。

**2022-05-07** はたまたま **今日** です。

そしておそらく、この指定だと **2022-05-07T00:00:00+09:00** という意味になってしまいます。

午前9時までは、この記事は「未来に書かれた記事」という扱いになってしまうのではないか。

Hugoは未来のdateを予約投稿的に扱うようなので、自分が書いた記事が（おそらく9時まで）表示されないのはりっぱに仕様でした。

この過ちを防ぐには、dateをタイム部分まで含めて指定することです。

デフォルトではそうなってます。デフォルトは偉大。

編集のついでに変えたんだと思います自分のバカバカ。
【Docker】Dockerとは

# Dockerとは
仮想化サービス。
データやプログラム（サーバー）を隔離できる仕組み。
Dockerとはコンテナの格納する箱で、コンテナとはデータやプログラムを隔離した仮想環境のこと。
Linux上でのみ動作する。
Dockerとはコンテナを管理するもの。
Dockerのコンテナには「使っては捨てる」という性質がある。
コンテナのライフサイクルは、「作る」→「起動する」→「停止する」→「破棄する」→「作る」...の流れ。

<br>

## Dockerと仮想化技術の違い
・仮想化技術は物理的なマシンを仮想的に用意している。
CPU、メモリなどの物理的な部品をソフトウェアで補っていて、OSは何を入れても大丈夫。
ホストマシンの機能を利用していないのでホストマシンに依存していない。

・DockerはOS（Linux）機能の一部を持ったもので、足りない他の機能を物理的なホストマシンのOSの機能に頼っている。
頼っている物理的なマシンにもLinuxが必要で、コンテナにもLinuxが必要。
ホストマシンの機能の一部を利用しているのでホストマシンに依存している。

## Dockerのメリット
複数の同じ環境を作れる。
サーバーのバージョン管理などがしやすい。
サーバーに詳しくなくても扱える。
カーネルを共有しているのでリソースを節約できる。
イメージを読み込めば開発環境の再構築が容易。
Qiita始めました

ドキュメントを書く機会があったのでとりあえずアカウントだけでもってことで作ってみました。
気ままにやってみたことを投稿していきたいなと思います。

普段はマインクラフトやValorantなどで遊んでいて、マイクラの方ではBDSXサーバーのnodeモジュールを書いてます。
あとはGametestなども手をつけているので興味深いことがあれば上げていきます。
NHKプラスがFirefoxで視聴不可になることの問題点

2022年05月02日、[ITmediaの記事](https://www.itmedia.co.jp/news/articles/2205/02/news124.html)で、NHKプラスの動作環境が変更されると同時に、これまでサポート対象外だが利用できていたFirefoxでの動画の再生ができなくなると報じられた。この変化が適用されるのは5月23日以降だというが、これでいいのだろうか。最近ではPayPay銀行もFirefoxを推奨環境から外すなどの動きがあったたが、ここではメジャーなサイトでFirefoxがサポートされなくなることの問題点を挙げていこうと思う。

# ブラウザの寡占化
現在、世界のデスクトップブラウザのシェアはGoogle Chromeが約66%を占め、次いでMicrosoft EdgeとSafariが各10%、Mozilla Firefoxが約8%となっている(出典:statcounter Desktop Browser Market Share Worldwide Apr 2021 - Apr 2022)。モバイルも含めた全体シェアではSafariとEdgeの順位が逆転し、Firefoxのシェアがさらに少なくなっているが、やはりChromeが圧倒的なシェアを占めている。
この状況でFirefoxのサポートを切った場合、SafariはMacOSやiOSでしか使えないので、WindowsユーザーはChromeかEdgeを使わなくてはならなくなる。この2つはChromiumベースでありレンダリングエンジンも共通なので、Chromium系の独占が一層進むことになってしまう。
これの何が問題なのかは「腐っても豆腐のいろいろチャンネル」さんが[動画](https://youtu.be/kF8swk82zCk?t=632)で解説されているので見てみることをおすすめする。

# シームレスなユーザー経験の阻害
ChromeやFirefoxなど主要なブラウザはパスワードやブックマークの同期機能を持っており、同じブラウザを複数端末で使っていれば同じサービスにすぐログインできたり、よく使うサイトをすぐ開けたりして便利である。今までFirefoxをメインで使ってきたユーザーが、Firefoxで利用できないサイトにアクセスするためだけにブラウザを使い分けたり新しいブラウザに乗り換えたりするのは面倒であり、利便性を損なってしまう。

# UbuntuなどのLinuxユーザーの軽視
UbuntuなどのLinuxディストリビューションの多くはFirefoxをデフォルトブラウザとしてプリインストールしており、これを使うユーザーが多い。Chromeと中身がほぼ同じChromiumブラウザをインストールすることもできるが、上記の通りFirefoxで使えないサイトがある場合、利便性を損なってしまう。

# NHKの公益性という観点からの疑問
NHKは「公共放送」であり、少数派への配慮や多様性の担保を考慮した運営が必要であると考えられる。そのためFirefoxをメインとして使用するユーザーに不便を強いるサポート切りには疑問を感じる。

# 国が懸念するOSの寡占状態の助長
最近、国はOSの寡占状態について懸念の声を上げているが、ブラウザはOSとの結びつきが強く、各OSにはOS開発元が開発したブラウザがプリインストールされていることが多い。例えばAndroidにはChrome、WindowsにはEdge、iPhoneやiPadやMacにはSafariと言った具合だ。そして多くのユーザーはOS標準のブラウザを使うのでOSの寡占はブラウザの寡占ともつながっている。Firefoxのサポートを外すことはブラウザの寡占状態の助長につながるため、国の考える寡占解消に逆行することになってしまうと考える。

# まとめ
以上の観点から、私はNHKがサポート環境からFirefoxを外したのは懸命な判断ではないと考えている。では我々には何ができるだろう。NHKは「[NHKや番組についてのご意見・お問い合わせ](https://www.nhk.or.jp/css/contact/)」から意見を募集している。ここにFirefoxをサポートしてほしいという要望を多くの人が送れば、あるいは状況が変わるかもしれない。ぜひやってほしいと思う。
Flaskについてまとめ5　url_forで関数を使って　指定したEndpointの値を確認

過去の記事はこちらです

https://qiita.com/TaichiEndoh/items/ca306560b928eddfc222

https://qiita.com/TaichiEndoh/items/7b7f82134a0333f8c8b9

https://qiita.com/TaichiEndoh/items/2d010ce586fc07c0a212

https://qiita.com/TaichiEndoh/items/a99dd39060b2345ca4cd

ubuntu でpython仮想環境を利用し
アプリケーションルートがflaskbook
になるように変化しました

その後テンプレートエンジンを利用しました
テンプレートエンジンはテンプレートと呼ばれる　ひな形
と　データを合成して成果ドキュメントを出力するソフトウェアです

テンプレートエンジンの　if 　と　for文　の使い方について記載していきます

### 変数の値を出力する

変数の値を表示するには{{ }}を使います
render_templateの第2引数以降で
設定したキーワード引数または辞書オブジェクトで指定した
変数名が利用できます

Flaskのテンプレートエンジンは、Jinja2です

Jinja2では、{% set %}ブロックを使用することで、クライアントサイドで変数を定義したり、サーバーサイドから受け取った変数を再定義することが出来ます。

{% set 変数 = 値 %}

https://tanuhack.com/jinja2-block/

### 条件式if文を利用する

条件式if文を利用するには{%  %}を使います
右のように

テンプレート内でif文を利用するには、以下のように記述すればよいです

ifで条件を記述する

{% if color == 'red' %}<# colorがredかどうか #>
  <p>colorはredです</p>
{% elif color == 'blue' %}
  <p>colorはblueです</p>
{% elif color == 'yellow' %}
  <p>colorはyellowです</p>
{% else %}
  <p>colorはその他の色です</p>
{% endif %}

https://www.nblog09.com/w/2020/12/13/flask-for-if/

### 繰り返しfor文の使い方
繰り返しfor文を利用するときも　if文のように{%  %}を使います

Fraskに標準で装備されているJinja2テンプレートエンジンを使用した場合
htmlの中に for文を書くことができます

{% for 変数 in 繰り返す範囲 %}
繰り返す内容
{% endofor %}

｛％ %}と{% endfor %}
を使用することで、htmlにfor文を書くことができます

### EndpointのURLに　url_for関数を使う

Endpointは通常は、APIにアクセスするためのURI　のことを指します
FlaskではURIと紐付けられた関数名または関数につけた名前　のことを指します

EndpointのURLを利用するには
url_for関数を使うと便利です
通常、HTMLファイルやViewファイルに記述しているURLを変更する必要がなくなります

app.py 
```
# flask クラスをimport
from statistics import mean

from flask import Flask, render_template, url_for

# Flask クラスをインスタンス化する
app = Flask(__name__)

# URLと実行する関数をマッピングする
@app.route("/")
def index():
    return "Hello, Flask book like CEML"


# ルーティング
@app.route("/hello/<name>", methods=["GET"], endpoint="hello-endpoint")

# endpoint を指定しない場合は　関数名がendpoint 名となる
# 許可するHTTPメソッドをGETとPOSTにする場合
# methods=["GET","POST"]となる


def hello(name):
    # python3.6から導入されたf-stringで文字列を定義
    return f"Hello world,{name}!!!!!"


def hello_world():
    return "Hello world"


# show_name エンドポイントを作成する
@app.route("/name/<name>")
def show_name(name):
    # 変数をテンプレートエンジンに渡す
    return render_template("index.html", name=name)


with app.test_request_context():
    # /
    print(url_for("index"))
    # /hello/world
    print(url_for("hello-endpoint", name="world"))
    # /name/ichiro?page=ichiro
    print(url_for("show_name", name="ichiro", page="1"))
```

flask run コマンドを実行すると　
url_forで指定したエンドポイントの値を確認できます
【Rails】deviseのviewsをカスタマイズする方法


Rails6で`$ rails generate devise:views`をして得たデフォルトのviewsをカスタマイズしようとしたらうまくいかなかったです。

[deviseのgithub](https://github.com/heartcombo/devise#configuring-views)をみてみると下記の文が書いていました。

>If you have more than one Devise model in your application (such as User and Admin), you will notice that Devise uses the same views for all models. Fortunately, Devise offers an easy way to customize views. All you need to do is set `config.scoped_views = true` inside the `config/initializers/devise.rb` file.

和訳すると。

>一つ以上のDevise modelを持っている場合、Deviseは複数のmodelに対し、同じviewsを使用するが、Deviseはviewsをカスタマイズする簡単な方法を提供している。下記のようにコードを変更するだけ！
```config/initializers/devise.rb
config.scoped_views = true
```

上記のようにコード変更を行なって、`views/devise/registrations`に`show.html.slim`を追加して、routes.rbも下記のように変更しましたが、エラーになりました。

```routes.rb
# エラーになったrouting
 get 'user/show', to: 'sessions/users#show' 
```


#### Routing エラー
エラーの詳細は下記になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2350392/44b58cc5-7490-4915-db33-4fbf268a7584.png)



## エラー対応

対応策はエラー詳細に書いていますが、詳しく知るために、もう1度[deviseのgithub](https://github.com/heartcombo/devise#configuring-routes)をみました。
下記の文がありまね。なるほど、deviseのやり方があるみたいですね。

>If you have the need for more deep customization, for instance to also allow "/sign_in" besides "/users/sign_in", all you need to do is create your routes normally and wrap them in a devise_scope block in the router:

和訳すると。

>もっとroutingをカスタマイズしたいのであれば、routesを下記のようにdevise_scope　blockに入れる必要がある。
コード例は下記↓

```route.rb
devise_scope :user do
  get 'sign_in', to: 'devise/sessions#new'
end
```
>Please note: You will still need to add devise_for in your routes in order to use helper methods such as current_user.

そして注意すべきところを和訳すると、
>current_userのようなメソッドを使うためには`route.rb`に`devise for`を追加しとく必要がある。

説明通り、下記のようにコードを変更したらエラーが消えまて、routingも問題なくできましたし、`current_user`のメソッドも使うことができました。
```routes.rb
Rails.application.routes.draw do

  devise_for :users
  devise_scope :user do
    get "/user/show" => "sessions/users#show"
    end
```



ご指摘等ございましたら、教えてください。
読んでくださってありがとうございました。
DirectXTK DDSファイル読み込み

# DDSファイルを読み込もう！
DDSファイルとは、DirectXで使用できる圧縮テクスチャファイルです。
ゲームのモデルに色や模様をつけるためにPNGやJPEG、TRGなどの画像フォーマットを扱います。
画像のフォーマットを表でまとめてみました。
|フォーマット|圧縮タイプ |特徴|
|---|---|---|
|.bmp  |無圧縮  |綺麗/データ大きい  |
|.tiff |無圧縮 |綺麗/データ大きい  |
|.tga|無圧縮/可逆圧縮|綺麗/データ大きい/解凍早い |
|.png|可逆圧縮|綺麗/データ小さい/解凍遅い |
|.jpg|非可逆圧縮|汚い/データすごく小さい/解凍遅い |
|.dds|非可逆圧縮|綺麗～汚い/データ大～小/解凍なし |

各フォーマットにはメリットデメリットがあります。
それぞれの利点を生かせるように、対応したファイルがあれば読み込めるようにします

:::note warn
C++17以上の実装になります。
実装にはソリューションエクスプローラーのプロパティページからC++17にしましょう。
:::
:::note warn
DirectXTexのライブラリが必要です。
:::

* わかりやすいサイト

https://vfxlog.com/dds/
# メリット
ファイルを読み込むときのメモリを削減できる
描画パフォーマンスの向上
読み込み、展開処理の高速化

# DDSファイルの作り方
2020年3月22日にNVIDEAがDDS変換ツールをリリースしました。
このツールを使って他の画像形式からDDSファイルに変換できます。
他にはキューブマップや法線マップなどを作ることが出来ます。

* ダウンロード先

https://developer.nvidia.com/nvidia-texture-tools-exporter
# 準備
* **Githubからライブラリをとってきます。**

https://github.com/Microsoft/DirectXTK

ソリューションと同じディレクトリにこのファイルがあるとします。

ファイルの中にある、自分が実装したいプラットフォームのDirectXTKのソリューションを開いてビルドします。
Binのファイルが作られて、対応したプラットフォームのライブラリが作られます。
DirectXTexのライブラリの読み込みに使います。
* **DDSTextureLoader.hを読み込めるようにします。**
ソリューションエクスプローラーのプロパティページ>C/C++>全般>追加のインクルードディレクトリ
.\DirectXTK-main\Inc
.\DirectXTK-main\Src

* **DirectXTexのライブラリを読み込みます**
ソリューションエクスプローラーのプロパティページ>リンカー>全般>追加のライブラリディレクトリ
.\DirectXTK-main\Bin\Desktop_2019\x64\Debug
Desktop_2019以降は各プラットフォームに合わせてください
ソリューションエクスプローラーのプロパティページ>リンカー>入力>追加の依存ファイル
DirectXTK.lib

# 実装
```:TextureLoader.cpp
#include <filesystem>
#include <WICTextureLoader.h>
#include <DDSTextureLoader.h>
#include "TextureLoader.h"

std::filesystem::path dds_filename(filename);
dds_filename.replace_extension("dds");
if (std::filesystem::exists(dds_filename.c_str()))
{
	HRESULT hr = DirectX::CreateDDSTextureFromFile(device, dds_filename.c_str(),
				resource.GetAddressOf(), shader_resource_view.GetAddressOf()); 
}
else
{
    HRESULT hr = DirectX::CreateWICTextureFromFile(device, wfilename, resource.GetAddressOf(), shader_resource_view.GetAddressOf());
}
```
```:TextureLoader.h
#include <wrl.h>
#include <d3d11.h>
#include <DirectXMath.h>

	Microsoft::WRL::ComPtr<ID3D11Device>			device;
	Microsoft::WRL::ComPtr<ID3D11ShaderResourceView> shader_resource_view;
	Microsoft::WRL::ComPtr<ID3D11Resource> resource;
```

# 変数説明
const char*　filename:テクスチャを読み見込む時のファイルパスです。
wchar_t*　wfilename:ワイド文字に変換したファイルパスです。

# コード説明
dds_filenameという変数でDDS用のファイルパスを作ります。
ファイルフォーマットでddsがつくファイルを探して、該当すれば読み込みます。
読み込まなかったらWICで読み込むかダミーテクスチャを作りましょう。
あとは、関数の引数通りに設定していきます。

# おわり
最近DirectXTKのファイル名がDirectXTK-masterから、DirectXTK-mainに変わりました。
forとEnum.with_indexを巧みに使って、文字列からマップを楽しく作る（Elixir）


**大江山いく野の道の遠ければまだふみも見ずあまの橋立**

Advent Calendar 2022 112日目[^1]の記事です。
I'm looking forward to 12/25,2022 :santa::santa_tone1::santa_tone2::santa_tone3::santa_tone4::santa_tone5:
私の[Advent Calendar 2022 一覧](https://docs.google.com/spreadsheets/d/1HQvFjagQLRPjOYAjDVzWp9S4b8dKixxvvaz_TtbZWto/edit#gid=1723448955)。

[^1]: @kaizen_nagoya さんの「[「@e99h2121 アドベントカレンダーではありますまいか Advent Calendar 2020」の改訂版ではありますまいか Advent Calendar 2022 １日目　Most Breakthrough Generator](https://qiita.com/kaizen_nagoya/items/49ebebee3a0377f3b59b)」から着想を得て、模倣いたしました。 

---



# はじめに

[Elixir](https://elixir-lang.org/)を楽しんでいますか:bangbang::bangbang::bangbang:

こういう文字列があったときに

```elixir
input = """
2199943210
3987894921
9856789892
8767896789
9899965678
"""
```

次のようなマップを作りたいとおもいます。

```elixir
%{
  {0,0} => 2,
  {0,1} => 1,
  {0,2} => 9,
  ...
  {4,8} => 7,
  {4,9} => 8
}
```

マップですので、順番はこの通りにはならなくてよいです[^3]。
要は、左上が`{0, 0}`、右下が`{4, 9}`の座標という具合です。

[^3]: マップですので、順番はこの通りにはなりません。


どうするとよいでしょうか。

# 答え

答えは畳んでおきますのでお時間のある方は考えてみてください。
タイトルの通り、[for/1](https://hexdocs.pm/elixir/Kernel.SpecialForms.html#for/1)と[Enum.with_index/2](https://hexdocs.pm/elixir/Enum.html#with_index/2)を使うとよいです。


<details><summary>お手本</summary>

```elixir
grid =
  for {line, row} <- Enum.with_index(input |> String.split("\n", trim: true)),
      {number, col} <- Enum.with_index(line |> String.to_charlist()),
      into: %{} do
    {{row, col}, number - ?0}
  end
```

どうでしょうか！
[for/1](https://hexdocs.pm/elixir/Kernel.SpecialForms.html#for/1)と[Enum.with_index/2](https://hexdocs.pm/elixir/Enum.html#with_index/2)が巧みに利用されているように私には見えます！

</details>



# 種明かし

https://adventofcode.com/2021/day/9

上記の問題を[José Valim](https://twitter.com/josevalim)[^2]さんが解いている動画があります。
インプットの読み取りと下準備に関する[José Valim](https://twitter.com/josevalim)[^2]さんのコードをみて、私は「**格好いい！**」「**カッチョいい！**」とおもいました。
そこで、ここだけ切り出して記事にしておきました。

[^2]: ご存知の通り、そうです！ [Elixir](https://elixir-lang.org/)の作者です:bangbang:


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



---

# Wrapping up :lgtm::lgtm::lgtm::lgtm::lgtm:



Enjoy [Elixir](https://elixir-lang.org/):bangbang::bangbang::bangbang:
<font color="purple">$\huge{Enjoy\ Elixir🚀}$</font>



以上です。





---



I organize [autoracex](https://autoracex.connpass.com/).
And I take part in [NervesJP](https://nerves-jp.connpass.com/), [fukuoka.ex](https://fukuokaex.connpass.com/), [EDI](https://fukuokaex.connpass.com/), [tokyo.ex](https://beam-lang.connpass.com/), [Pelemay](https://pelemay.connpass.com/).
I hope someday you'll join us.

[We Are The Alchemists, my friends!](https://www.youtube.com/watch?v=04854XqcfCY)
mPDFでA4タテヨコ混在状態で出力する


# はじめに
仕事で帳票を取り扱っているが、繁忙期で忙殺されているときにタテヨコ混在状態で出力できない壁にぶつかったことがあった。Acrobat reader とかで一瞬で回転できるのに、んなアホなって思ったけど当時は押し切った。時間が経って、研究できる時間ができた。仕事場のライブラリとは違うがいちおうできることを確認できた

# インストール
```json:compser.json
{
      :
    "require": {
          :
        "mpdf/mpdf": "^8.1",
          :
    },
      :
}
```

# source
てきとーにコントローラから処理実行する（ほんとは libraries に入れたほうがいいね）
```php:app/Config/Routes.php
$routes->get('home/rotate_pdf', 'HomeController::rotatePdf', ['as' => 'home_rotate_pdf']);
```
```php:app/Controllers/HomeController.php
class HomeController extends BaseController
{
    public function rotatePdf(): string
    {
        // 基本、タテA4の枠組みで出力
        $config = [
            'fontDir' => __DIR__.'/../../public/assets/font/IPA',
            'fontdata' => [
                'ipafont-m' => [  // htmlで指定するフォントファミリ名1（任意名）
                    'R' => 'ipamp.ttf',  // regular
                ],
                'ipafont-g' => [  // htmlで指定するフォントファミリ名2（任意名）
                    'R' => 'ipagp.ttf',  // regular
                ],
            ],
            'mode' => 'ja+aCJK',
            'format' => 'A4-P', // or 'A4-L'
        ];
        $mPdf = new mPDF($config);
        
        $data = [
            'name' => '十文字学園（大坂）'
        ];
        
        // 1ページ目はtemplateからのparse
        $parser = Services::parser();
        $html = $parser->setData($data)->render('home/rotatePdf');
        $mPdf->WriteHTML($html);
        
        // 2ページ目はヨコA4の枠組みで出力
        $mPdf->AddPage('L');
        $mPdf->WriteHTML('Hello page 2');
        
        // pdfとして出力
        $mPdf->Output('estimate.pdf', 'D');
        
        // もとのページに戻る
        return view('home/index');
    }
}
```

# フォントを置く
- publicフォルダに配置
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/bc2e36ea-e540-1c6b-444b-917035bd75a1.png)

# html
```html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <title>Document</title>
</head>
<body style="font-size: 40px;">
<p style="font-family: ipafont-m">卒業証明書 {name}</p>
<p style="font-family: ipafont-g">卒業証明書 {name}</p>
</body>
</html>
```

# 確認
## 出力されたPDF
おー、いいじゃんいいじゃん
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/496cdb77-fceb-c0fe-5493-3c5fcc00ed3a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/7ec9ee3c-2418-d96e-dbbf-bfa4176b39a3.png)