OmniAICreator/Qiita-1.07M huggingface dataset:
border-radius が効かなかったのを直した

## 概要

他のスタイルが優先されていた状態ではなく、 `border-radius` が効かなかったので紹介しようと思います。

## 問題のコード

```vue
<div>
    <div :class="$style.plan">
        <p>お菓子</p>
        <p>美味しいお菓子</p>
        <p>綺麗なお菓子</p>
        <p>温かいお菓子</p>
    </div>
    <div :class="$style.plan">
        <p>和服</p>
        <p>美味しい和服</p>
        <p>綺麗な和服</p>
        <p>温かい和服</p>
    </div>
    <div :class="$style.plan">
        <p>緑茶</p>
        <p>美味しい緑茶</p>
        <p>綺麗な緑茶</p>
        <p>温かい緑茶</p>
    </div>
</div>
```

```scss
.plan {
  padding: 50px;
  background-clip: content-box;
  border-radius: 5px;
}
```

## 解決したコード

```scss
.plan {
  margin: 50px;
  border-radius: 5px;
}
```

上記のように `background-clip` を使用していると `border-radius` が使えませんでした。

Tips: `background-clip` による要素の境界の指定を無くしてしまったので表示が崩れてしまいましたが、 `padding`を `margin` に変えたことで対処できました。

以上参考になりましたら幸いです。
【Excel VBA】ワークシートに対するActivateとSelectの違い

## イントロダクション
Excel VBAでコーディングする際、似たような効果のある書き方というのはたくさんあります。

その中で今回はWorksheetオブジェクトにある Activate と Select に注目しました。

## Worksheet の Activate と Select
`Worksheets("Sheet1").Activate` と `Worksheets("Sheet1").Select` が混在しているソースコードはよく見かけます。
両方ともそのシートを手前に表示させる効果がありますが、細かい仕様は当然違いがあります。
そして、その違いをはっきりと言える人は少ないのではないでしょうか？

私が認識している範囲で違いを以下に書き出します。

## Activate
* アクティベート：活性化
* 表示させたいワークブックが一番手前に表示されていなくても、ワークブックごと一番手前に表示します。
* 一番手前に表示できるのは一つのシートのみ
* 複数シートに対して実行はできない（Worksheetsコレクションには存在しない）
* 単純に手前に表示したい場合はこちらの記述

### 使用例

Sheet1を前面に表示する
```VB
Worksheets("Sheet1").Activate
```
 この書き方はエラー
```VB
Worksheets(Array("Sheet1", "Sheet2")).Activate
```
 次の場合は最終的にBook2が手前に表示される
```VB
Workbooks("Book1.xlsx").Activate
Workbooks("Book2.xlsx").Worksheets("Sheet2").Activate
```


## Select
* セレクト：選択
* ワークシートを選択します。
* おまけで、そのシートを表示させます。
* 複数シートの選択ができます
* 複数シートに対して同じ操作を行う必要がある場合に使用します。
* 複数のワークブックが立ち上がっている状態で、`Select`したシートの親ワークブックが裏に隠れている（最前面ではない）場合、エラーになります
* 上記エラーの恐れがあるため、表示だけの場合は`Activate`を使用するほうが良い

### 記載例
Sheet1を前面に表示する
```VB
 Worksheets("Sheet1").Select
```

Sheet1とSheet2を選択する（+ 追加処理）
```VB
Worksheets(Array("Sheet1", "Sheet2")).Select
Selection.Copy            ' 2つのシート間で関数が参照されている場合、計算式の変化がない
Selection.PrintOut        ' まとめて印刷：ページ番号が共通になる
```

ただし下記の書き方ができるため、シートに対しSelectする機会は少ない
```VB
Worksheets(Array("Sheet1", "Sheet2")).Copy
Worksheets(Array("Sheet1", "Sheet2")).PrintOut

' 複数の処理を同時に行うなら下記
With Worksheets(Array("Sheet1", "Sheet2"))
    .Copy
    .PrintOut
End With
```
次の場合はBook2.xlsxのところでエラーになる
```VB
 Workbooks("Book1.xlsx").Activate
 Workbooks("Book2.xlsx").Worksheets("Sheet2").Select
```

## 結論
* 基本的にはActivateを使用
* 複数選択する場合のみSelectが有効
Google gasでYoutubeの再生リストに自動で動画を追加するプログラムを作った

## ①はじめに

好きなYoutuberのすべての動画を再生リストに入れて、流しっぱなしにして見ていました。
そのYoutuberは毎日更新をしているので毎日再生リストに追加するのがめんどくさかったので自動で追加できるプログラムを作成しました。

今回は、google gasで実装しました。

## ②環境
* Google App Script
* Youtube API v3
* Windows 10

## ③仕様
* 再生リストに毎日20:00~21:00にその日にアップロードされた動画を追加する
* 重複削除処理はなし（今後追加予定）
* 追加できなかった場合は、メールで通知が届く

## ④流れ
* Youtube API の認証を通す
* コード内の「⑤値の入れ替え」を行う
* コード実行後、「Gmail のすべてのメールの閲覧、作成、送信、完全な削除」の認証を通す
* トリガの設定

## ⑤値の入れ替え
[⑥コード]内に記載しているidやメールアドレスは自身のものに変えて実行する
* [⑥コード]7行目の「'追加したいyoutuberのchannelIdを記載する'」は以下idを入れる
  * 追加したいyoutuberの画面のurlに記載しているid

* [⑥コード]31行目の「'追加したい再生リストのid'」は以下idを入れる
  * youtube再生リスト画面のurlに記載しているid

* [⑥コード]47行目の「'sample@example.com'」
  * エラー通知を受け取るメールアドレスを入れる


## ⑥コード
```javascript:sampleCode
  /* youtube 再生リストに自動追加
   * 最新動画1件のみ
  */
function addmovieplaylist() {
  try{
    const results = YouTube.Search.list('snippet', {
      channelId: '追加したいyoutuberのchannelIdを記載する',
      order: "date",
      maxResults: 5
    });
    var today = new Date();
    var todayStr = Utilities.formatDate(today, 'JST', 'yyyy-MM-dd');
    // 取得した動画idを設定
    for(let i = 0; i < results.items.length; i++){
      var resvideodate = results.items[i].snippet.publishTime
      var videodate = resvideodate.slice(0,10)
      if(videodate == todayStr){
        Logger.log('再生リストに追加するの動画→→' + results.items[i].snippet.title)
        Logger.log('再生リストに追加するの動画id→→' + results.items[i].id.videoId)
        var videoId = results.items[i].id.videoId
      }
    }
    // 自分の再生リストを取得
    const channel = YouTube.Channels.list(["snippet"], {
      "mine": true
    })["items"][0];
    const playlists = YouTube.Playlists.list(["snippet"], {
      "mine": true
    });
    for(let i = 0; i < playlists.items.length; i++){
       if(playlists.items[i].id == '追加したい再生リストのid'){
        var playlistId = playlists.items[i].id;
       }
    }
    const requestData = {
      "snippet": {
        "playlistId": playlistId,
        "resourceId": {
          "kind": "youtube#video",
          "videoId": videoId
        }
      }
    };
    //再生リストに追加する処理
    const response = YouTube.PlaylistItems.insert(requestData, ["snippet"]);
  }catch{
    const address = 'sample@example.com'; // エラー通知を受け取るメールアドレス
    const subject = '再生リストエラー通知'; // メールの件名
    const body = '本日アップロードされた○○の動画が再生リストに追加できませんでした。';
    GmailApp.sendEmail(address, subject, body);
  }
}
```
[React] DesktopDatePickerにアスタリスク(*)をつける方法

## 結論
`slotProps`属性を追記する

```typescript
<DesktopDatePicker
    {...register("deadline")}
    label="LIMIT"
    minDate={new Date()}
    maxDate={addDays(new Date(), 10)}
    value={value}
    onChange={onChange}
    slotProps={{ textField: { required: true } }} // ← 追記！
/>
```

以上！
VSCode - ポートフォリオ制作、コーディング完成(2023/10/16)

2023/10/16 VScode - ポートフォリオ制作、コーディング

・デザインカンプの縦横比
・レスポンシブデザインのブレイクポイントについて
	PC (960) : 950~1200px
	タブレット(520) : 600~834px
	スマホ (320) : 375~414px

・ファーストビューの大きさについて
	↪︎ファーストビューの幅は1000〜1200px、
	　高さは550〜650px

・iphone / ipad 主要な端末の画面サイズ、ピクセル数について
・ブレイクポイントを最初に定める

・Photoshop

——————
mainvisual : 
1800*1000 / 1280*720(PC) / 900*850(ipad air) / 430*780(iphone 15) 画像切り替わり
business : 980 / 縦並び 
company :  900 / 文字を中央配置 
header : 900 / ハンバーガーメニュー
news list : 900 / 縦並
footer : 900 / フッター文字サイズ *トップボタンを押し易い
about : 640 / 文章
business : 640 / タイトルのmargin-top増やす
mainvisual p : 600 / 430
about : 414 / 文章 *文章が美しく見える改行、レイアウト

お問合せクリックでメール起動

<変更>
company -  枠線あり
footer - 配置変更
FlaskアプリでPostgreSQLにデータを追加する際に起こったエラーについて

FlaskアプリでHerokuにデプロイしたときにPostgreSQLのテーブルにBcryptでハッシュ化した値を含んだデータを登録するとエラーとなりました。
テーブルの登録対象の列はtext型で設定していました。

ハッシュ値は例えば「b'$2b$12$lTLKTJSPOXhrygXuvjYFeuY70kiSGpn8ONByngc/uSFCoJnMddVCT'」のような形となりますが、これはバイナリ型のデータですので、テーブルの列と型が一致していないためエラーとなったようです。

対応策としては以下が考えられれますが、(1)ではなぜかうまくいかなかったため、(2)で対応し解決しました。
(1)テーブルの該当の列をバイナリ型に変更して登録処理をやり直す。
(2)ハッシュ値をバイナリ型から文字列型に変換（decode()メソッドで変換）して登録処理をやり直す。

ご参考になれば幸いです。
【Unity】Editor拡張でSpriteRendererに影を落とすかの設定項目を付け足す

# 拡張結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/608797/198223dc-b84f-6af5-ce7d-a8478e9796a2.png)
赤い丸のところが増えます。
# ソースコード
https://github.com/ayaha401/SpriteRendererInspector
# 作ったわけ
2DのSpriteに影を落とすShaderを書いてもUnityのインスペクターのモードを`Normal`から`Debug`に変更して`CastShadows`を変更しないとSpriteは影を落としてくれません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/608797/cd0bf83f-c0f5-9c7b-76df-8a3a47a2fbb4.png)
Debugモードに切り替えて…
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/608797/2f43ffaa-8926-eb23-cdb7-8a9e4e4b06b3.png)
`CastShadows`を変更する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/608797/20a4c79f-6849-e362-0c7f-489bce2fbc02.png)
そしてどうせNormalに戻します。

何回も設定するのめんどくさいのでSpriteRendererから設定できるようにした方が楽だと思いました。
# 参考
https://nagomi0132.hateblo.jp/entry/2022/03/12/221122

コードの8割はここにあります。
```C#
using (new EditorGUILayout.HorizontalScope())
{
    EditorGUILayout.LabelField("Sprite Cast Shadow");
    shadowCastingMode = (ShadowCastingMode)EditorGUILayout.EnumPopup(spriteRenderer?.shadowCastingMode);
    spriteRenderer.shadowCastingMode = shadowCastingMode;
}
```
見た目をいい感じにするために`using (new EditorGUILayout.HorizontalScope())`で要素を横にそろえて`LabelField`で文字、`EnumPopup`でEnumを作って終わりです。
オンプレ環境の Kubernetes に MetalLB を使って Load Balancer Type の Service を使えるようにしてみる。

今回は自宅の **Kubernetes クラスター** に **MetalLB** を導入してみました。

# 環境

今回の環境は下記のとおりです。

## 開発端末

- **OS**： Windows 11 Pro
- **CPU**： Intel Core i7-9750H
- **メモリ**： 64GB
- **GPU**： NVIDIA GeForce RTX 2070 Max-Q

## Kubernetes クラスター

- **Master Node**：Raspberry Pi 4 (8GB) x3
- **Worker Node**：Raspberry Pi 4 (8GB) ×3
- **Worker Node**：Raspberry Pi 400 (4GB) ×1
- **Load Balancer**：MetalLB
- **Helm**：v3.12.3
- **NFS Server**：Raspberry Pi 4 (4GB)
- **ルーター**： NanoPi R5C（OS：FriendlyWrt）

※NanoPi R5C および FriendlyWrt については下記を参考にしてください。

https://qiita.com/IoriGunji/items/c94cf84cafffdcd947cc

# MetalLB の導入

**MetalLB** を導入するにあたって、 **Helm** を利用しています。
なお、 **Raspberry Pi** へ **Helm** を導入する方法については、下記の記事を参考にしてください。

https://qiita.com/IoriGunji/items/e6753e36b227a90ab592

## root ユーザーに昇格

事前に root ユーザーに昇格しておきます。

```shell
su root
```

## ARP の許可設定

変更前の確認を行い、異なる箇所を出力します。

```shell
kubectl get configmap kube-proxy -n kube-system -o yaml | \
sed -e ""s/strictARP: false/strictARP: true/"" | \
kubectl diff -f - -n kube-system
```

変更を適用します。

```shell
kubectl get configmap kube-proxy -n kube-system -o yaml | \
sed -e ""s/strictARP: false/strictARP: true/"" | \
kubectl apply -f - -n kube-system
```

## 作業ユーザーに戻る

```shell
exit
```

## リポジトリの追加

リポジトリの追加を行います。

```shell
sudo helm repo add metallb https://metallb.github.io/metallb
```

## Helm チャートリポジトリの更新

リポジトリの追加を行ったので、チャートリポジトリの最新情報を取得するために更新を行います。

```shell
sudo helm repo update
```

## MetalLB のインストール

`helm install` コマンドを利用して、 **MetalLB** のインストールを行います。

```shell
sudo helm install metallb metallb/metallb -n metallb-system \
    --namespace metallb-system --create-namespace
```

## 定義ファイル保存ディレクトリの作成

IPアドレスプールの定義ファイルを保存するためのディレクトリを作成します。

```shell
mkdir -p ~/kubernetes/metallb
```

## IPアドレスプールの定義ファイルの作成

IPアドレスプールの定義ファイルを作成します。


```shell
sudo nano ~/kubernetes/metallb/ipaddresspool.yml
```

```ipaddresspool.yml
apiVersion: metallb.io/v1beta1
kind: IPAddressPool
metadata:
  name: default
  namespace: metallb-system
spec:
  addresses:
  - 192.168.10.200-192.168.10.254
  autoAssign: true
---
apiVersion: metallb.io/v1beta1
kind: L2Advertisement
metadata:
  name: default
  namespace: metallb-system
spec:
  ipAddressPools:
  - default
```

`addresses` の `192.168.10.200-192.168.10.255` の部分はご自身のネットワーク環境にあわせて変更してください。

## IPアドレスプールのデプロイ	

IPアドレスプールの定義ファイルを作成したら、デプロイします。

```shell
sudo kubectl apply -f ~/kubernetes/metallb/ipaddresspool.yml	
```

# 参考文献

下記のサイトを参考にさせて頂きました。

https://blog.tsuchinokometal.com/2023/wordpress_k3s_raspberrypi/

https://metallb.universe.tf/installation/

https://metallb.universe.tf/configuration/

<!-- EOF -->
【Next.js】Imageで外部URLを使用するための設定


Imageで外部URLを使用するには`next.config.js`に以下のように設定を記述する必要があります。

```next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 's3.amazonaws.com',
        port: '',
        pathname: '/my-bucket/**',
      },
    ],
  },
}
```
形式記述言語VDM++の制御構文（ブロック文）をJava C# Re:Mind(自作言語)と比較

# はじめに

要求仕様記述段階での使用が主に想定されている数学的形式手法VDM(Vienna Development Method)[^1]のオブジェクト指向拡張言語VDM++ですが、ロジックの実装も記述できる構文が用意されています。本記事ではVDM++の制御構文（ブロック文）をJavaとC#そして自作言語のRe:Mind[^2] と比較してみます。

## この記事内容の作業目的
VDM++の下記の制御構文[^3][^4]についていくつかの記事に分割して比較検討します。

・**ブロック文**　←本記事対象
・コメント文
・代入文
・条件文
・ループ文
・call文
・return文
・例外処理

VDM++はオブジェクト指向言語的な言語要素を持ち、数学的形式手法言語の中では一般のプログラミング言語のオブジェクト指向言語に近い面があります。また、Re:MindはJavaやC#の経験者向けに設計された日本語プログラミング言語の一種で、自然言語の日本語で記述するよりは厳密な構造的な記述が可能です。クラスの定義構文の比較についてはこちらの記事[^5]を参照することができます。


## この記事内容の保証
各言語で書かれた引用ソースの妥当性は保証されません。また、本記事に開示された自作言語の仕様は、開発中の仕様のため予告なく変更される場合があります。

# 構文比較
## VDM++
```vdm:VDM++
    doAnything: () ==> ()
    doAnything() ==
    (
       --todo1
       --todo2
    )
```
VDM++のブロック文は()で囲われた範囲となります。
## Java
```java:Java
    void doAnything()
    {
       //todo1
       //todo2
    }
```
Javaのブロック文は{}で囲われた範囲となります。
## C#
```cs:C#
    void doAnything()
    {
       //todo1
       //todo2
    }
```
C#のブロック文は{}で囲われた範囲となります。
```mind:Re:Mind
    ▽void doAnything()
        //todo1
        //todo2
    △
```
Re:Mindのブロック文は▽の定義行の末尾から△で囲われた範囲となります

# おわりに
VDMのような数学的形式手法を使わない場合は、一般的に自然言語の日本語で要求仕様が記述されているものと推察されます。本記事では数学的形式手法と自然言語の日本語記述とのはざまで、構造化された日本語が要求仕様記述に使えないか模索しています。

[^1]: IBMのウィーン研究所で1960年代から70年代にかけて開発された形式手法。その実装には1996年にISO標準（ISO_IEC_13817-1）となったVDM-SLと、そのオブジェクト指向拡張のVDM++がある。
[^2]: Qiita [オープンな設計言語仕様 日本語ロジック仕様記述言語 Re:Mind（リマインド）](https://qiita.com/mylifewithviolin/items/52f806777e6ea031de94) 参照
[^3]: FMVDM　[VDMTools 付属文書](http://fmvdm.org/doc/index-ja.h
[^4]: FMVDM-> github [[PDF] VDMTools VDM 言語マニュアル VDM++](https://github.com/vdmtools/vdmtools/raw/stable/doc-jp/lang-man/langmanpp_a4J.pdf)
[^5]: Qiita [要求仕様 形式記述言語VDM++ との構文比較 ロジック仕様記述言語 Re:Mind（リマインド）](https://qiita.com/mylifewithviolin/items/2a8c6dc66cead04536a8)
LangChainを使用して会話履歴を踏まえストリーミングで応答を得る

[Chat Completions APIで会話履歴を踏まえストリーミングで応答を得るAPIリクエスト](https://qiita.com/horiday/items/8a221dc29e78df8ef7dd)で実装した処理を、LangChainで置き換える。

## ライブラリインストール
```
pip install langchain openai
```

## ソースコード

```
from langchain.chains import ConversationChain
from langchain.memory import ConversationBufferMemory
from langchain.callbacks.streaming_stdout import StreamingStdOutCallbackHandler
from langchain.chat_models import ChatOpenAI
from langchain.schema import AIMessage, HumanMessage, SystemMessage

chat = ChatOpenAI(
    model="gpt-3.5-turbo",
    streaming=True,
    callbacks=[StreamingStdOutCallbackHandler()]
)

conversation = ConversationChain(
    llm=chat,
    memory=ConversationBufferMemory()
)

while True:
    user_message = input("You: ")
    conversation.run(input=user_message)
```

## 解説
- ストリーミング処理には、```streaming=True```とした上で、callback関数に```StreamingStdOutCallbackHandler()```を指定する
- 会話履歴には```ConversationBufferMemory()```を指定する
    - 他にも会話履歴の持ち方の違いで[色々種類](https://python.langchain.com/docs/modules/memory/types/)がある
- 会話は```ConversationChain```というChainで（処理をつなげる機能）会話をwhileの無限ループで繋いでいる
マラソンから学んだ、成長機会の作り方

# はじめに
本日、山形県天童市で開催された[天童ラ・フランスマラソン2023](https://www.lafrance-marathon.com/)に参加してきました。
人生初のハーフマラソンでしたが、なんとか完走できました！
![スクリーンショット 2023-11-05 21.38.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731275/0d544e58-331f-4016-f206-e3bf9be530de.png)

21kmというと、ざっくり東京駅から三鷹駅までくらいの距離です。
実際に走ってみると思った以上に遠く感じ、またコースの勾配にも体力を奪われました。
もう限界、、と思ったのは10km地点くらい。足が上がらず、頭痛もひどい。
が、結果的にその限界を突破し、走り切ることができました。

走りながら考えていたことが、**マラソンと仕事って似てるなー**ということでした。
自分が自身の中で定めていた限界を突破できた理由を考えると、今後の自己成長やチームメンバーの育成などに活かせるのではないか、と思い
この記事の執筆に至りました。

# マラソンから学ぶ、成長機会の作り方
本題です。
振り返ってみると、6つのポイントにまとまられるかなと思います。

### 1. 明確なゴールを設ける
当然、マラソンには明確なゴールがあります。
何よりもまず、達成したいゴール（目標）を定めることが必要です。
成長を促すという側面では、「できるかどうか分からない」というレベルの、チャレンジングなゴールを設定すると良いと思います。

（例）2024年4月のITサービスマネージャ試験（SM）を受験し、合格する。

### 2. チェックポイントを設ける
マラソンには「関門地点」というものがいくつか設けられています。
ある地点をいつまでに通過できなかったら失格になる、というものです。
ゴールに向かう途中にチェックポイントを設けることで、今目指している方向が正しいのか、自分にそのゴールを目指すための地力が備わっているかなどを確認することができます。
関門をクリアできなかったら、ゴールを見直すか、練習して地力を付けてから再チャレンジすることが必要になります。

（例）2023年2月時点でSMの過去問を解いてみて、午前Ⅱと午後Ⅰで6割取る。

### 3. 給水所を設ける
おやつ、大事。
今回の大会では給水ポイントでラ・フランスを食べられたのですが、本当においしかった、、笑
ただし、食べすぎると脇腹が痛くなるので注意です。

（例）この問題正解できたらチョコレート食べる！

### 4. 一緒に走ってくれる人たち
自分一人で走っていたら、完走はできなかったと思います。
自分と同じ目標を持っている人たちがいて、その人たちと励まし合うことで、辛い局面も乗り越えられる。

チームメンバーの育成の側面で考えると、誰か特定の個人を育てるより、意図的に複数人まとめて対象にした方が、効果が出るのかもしれません。
※その人の個性によるかも

### 5. 沿道で応援してくれる人たち
マラソン中は子供からお年寄りまで、多くの方に応援していただきました。
応援って本当に力になるなあと思いました。

振り返ると、私自身、最近は「頑張れ」と言われるより「無理しないで」と言われることの方が多いように思います。
最近は「頑張れ」と、軽々しく人に言うのは憚られるのかもしれません。
生きてるだけで既に頑張ってる！偉い！ それもまた事実だと思います。
そんな世の中だからこそ、いざゴールに向かって必死に何か頑張っている人がいれば、大きな声で「頑張れ」と言ってあげたい。

チームメンバーの育成の側面で考えると、人によって「頑張れ」の言い方は考えたほうがいいんだろうと思いますが、
何にせよ、周囲を巻き込んで、頑張ってる人たちを応援してもらう雰囲気を作ることが大切だと思います。

### 6. メディカルランナー・救護所の人たち
最悪ぶっ倒れても助けてもらえる、という安心感は、限界突破のためにはなくてはならないものでした。
「心理的安全性」という言葉が叫ばれて久しいですが、似たようなニュアンスかなと思います。
万全のサポート体制を整えること、あるいはそれを周りに求めることは、安心してゴールを目指す上で大切だと思いました。


# 終わりに
今回のマラソン大会は私にとって非常に貴重な体験でした。
皆さんもぜひ、マラソン大会参加してみて下さい！！

※今年のre:Inventでも"5K run"あるみたいですよ！！

https://dev.classmethod.jp/articles/reinvent-2022-5k-run/
[Go]httpサーバーを起動して、リクエストがキャンセルされる様子を確認する

# サーバーの準備
```golang:main.go
package main

import (
	"log"
	"net/http"
	"time"
)

func main() {
	http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
		ctx := r.Context()

		// 擬似的な長い処理を実行
		log.Println("processing request")
		select {
		case <-time.After(5 * time.Second): // 5秒後に処理が完了するとする
			// リクエストが成功したらレスポンスを返す
			w.Write([]byte("Request processed"))
		case <-ctx.Done():
			// contextがキャンセルされたらエラーをログに出力
			err := ctx.Err()
			log.Println("request cancelled:", err)
			http.Error(w, err.Error(), http.StatusInternalServerError)
		}
	})

	// サーバーを8080ポートで起動
	log.Println("server started")
	http.ListenAndServe(":8080", nil)
}

```
httpサーバーを起動させます。
```shell: Server side
$ go run main.go 
2023/11/05 22:49:46 server started
```

# リクエストを送信する
**キャンセルされるリクエストの送信**
curlでサーバーで指定されているポート番号8080に対してリクエストを送り、1秒後にキャンセルするコマンドを打ちます。
```shell: Client side
$ curl http://localhost:8080 & PID=$!; sleep 1; kill $PID
[1] 91299
[1]  + terminated  curl http://localhost:8080 
```

そうすると、以下のようにキャンセルされることがわかりました。
```shell: Server side
2023/11/05 22:53:37 processing request
2023/11/05 22:53:38 request cancelled: context canceled
```
**キャンセルされないリクエストの送信**
ちなみに、クライアントサイドで5秒より多く待つことで、サーバー側でキャンセルされないことも確認できます。
```shell: Client side
$ curl http://localhost:8080 & PID=$!; sleep 6           
[1] 91373
Request processed[1]  + done       curl http://localhost:8080
```

# おまけ　curlの解説
`curl http://localhost:8080 & PID=$!; sleep 1; kill $PID`

このコマンドは、`curl`を用いて`http://localhost:8080`にHTTPリクエストを送信し、1秒後にそのプロセスを終了（kill）させます。

1. **`curl http://localhost:8080 &`**:
   - `curl`で、指定されたURL（この場合は`http://localhost:8080`）に対してHTTPリクエストを送信します。
   - `&`はこのコマンドをバックグラウンドで実行するためのものです。つまり、`curl`コマンドは新しいバックグラウンドプロセスとして開始されます。

2. **`PID=$!`**:
   - `$!`は最後にバックグラウンドで実行されたプロセスのプロセスID（PID）を表します。
   - `PID=$!`はこのPIDを変数`PID`に代入しています。これにより、後でこのプロセスを特定し終了させることができます。

3. **`sleep 1`**:
   - `sleep 1`は、コマンドが1秒間待機するようにします。これは`curl`コマンドに少し時間を与えてサーバーにリクエストを送信するためのものです。

4. **`kill $PID`**:
   - `kill`コマンドは指定されたPIDのプロセスを終了します。
   - `kill $PID`は、先ほど`curl`コマンドによって生成されたバックグラウンドプロセスを終了させます。
Jetpack Comopseで通知設定画面への遷移処理を書く

# はじめに
今回は、JetpackCompose実装時にCompose関数内で通知設定画面を開くための処理を紹介していきます
### 本文
早速ですが、コードは下記になります。
SingleTaskを設定することで二重で開かれることを阻止することができます。
```kotlin
val intent = Intent()
                intent.flags = Intent.FLAG_ACTIVITY_NEW_TASK
                intent.action = Settings.ACTION_APP_NOTIFICATION_SETTINGS
                intent.putExtra(Settings.EXTRA_APP_PACKAGE, context.packageName)
                context.startActivity(intent)
```
### 最後に
今回は、備忘録としての役割が強いですがJetpackCompose内でアプリの通知設定画面を開く方法を紹介していきました
どなたかのお役に立てれば幸いです
簡単にスケジュールが確認したい！癒しが欲しい！そんな願望実現させたLINE Botに初心者が挑戦！

# このLINE Botをつくろうと考えた理由
私は普段、出社前にスマホで当日のスケジュールを確認しますが、その確認過程がとにかく面倒です。というのもスケジュールは、(皆がわかるよう)社内グループウェアで管理しており、外部からそのシステムにアクセスする為に多くの手間を要します。
そこで、**簡単にスケジュール確認ができればいいのに！**と考えていたのと、どうせなら**仕事前に癒しもほしい！**(完全私的)と、LINE Botに挑戦してみました。


# できたもの

日付を送ると、以下を返してくれます👇
 　・スケジュール　＝「本日のタスク」
 　・癒し　　　　　＝　子供の「成長記録」と「写真」

**LINE Botの動作**　※写真はフリー素材のサンプルです。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">初心者ながらLinebot作ってみました。<br>※タスクはダミーデータで、画像はフリー素材です。 <a href="https://t.co/PJ7S6B35LQ">pic.twitter.com/PJ7S6B35LQ</a></p>&mdash; Ka4128 (@Ka4128_1) <a href="https://twitter.com/Ka4128_1/status/1721160282624679978?ref_src=twsrc%5Etfw">November 5, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


本当に手探りで何度も挑戦し、やっと動いてくれました💦(長かった)

スケジュールが簡単に確認できるだけでなく、
詰まった予定で荒んだパパの心も癒してくれる～👏　
(今日も成長したね👶)
未来日付を送れば、そのスケジュールも返してくれるのも良い所。

**Makeシナリオ**
![スクリーンショット (13).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575594/55ab9c2d-a1cf-0c31-eeb4-298a42f4a799.png)

MAKEを利用しましたが、後ほどの修正やアップデートの事を考え、
できるだけシンプルにシナリオを作れるよう考えながら作成しました。

# 作成方法

**Google Sheets**
社内グループウェアよりスケジュールをGoogle Sheetsに掃き出し、Google sheetsモジュール(Search Rows)を介して使用しました。
成長記録も同様です。

参照元にしたGoogle Sheets　※ダミーデータです。
![スクリーンショット (29).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575594/577daadc-9915-f8f6-14ce-037513f25dd9.png)


Google sheetsモジュール(Search Rows)抜粋
![スクリーンショット (32)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575594/e18f7d5c-db52-c8d9-b18e-0e2f3be75ddd.jpeg)


ただ、スケジュールに関しては元々、Messaging APIとGoogle Apps Script(以降、GAS)を利用して、Google カレンダーの予定を連携させようと考えていました。
GASのコード実行まではうまくいき、これで実装できる！と喜んでいたのも束の間、LINE DevelopersのWebhook指定が(MAKEで利用しているため)できない事に気づきました。
色々調べましたが対処法を見つけられず、今回は断念し、Google Sheetsに切り替えました。


作成したGAS画面
![スクリーンショット (17)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575594/c409a789-a00a-3d7f-dbcf-64c0a3f02a01.jpeg)
※@zhaoshiboさんの[LineBotでGoogleカレンダーの予定を通知する](https://qiita.com/zhaoshibo/items/811a167b17901409588b) を参考させて作らせていただきました。とてもわかりやすかったです。


**Pexels**
   画像APIが生成できるサイトです。指定画像をアップデートさせ、作成されたデータをJavaScriptに変換し、API化し連携しました。
参考：[Pexels HP](https://www.pexels.com/ja-jp/) 
   また、サイト自体にもフリー画像が大量にあり、画像選びに困ったときはここを使用するのがオススメです。


最後に**Router モジュール**を使用し、‟メッセージと日付がある” 場合と ‟テキストメッセージがない、または、日付がない” 場合でおこなう返答を条件分岐させました。

# 作ってみての感想
とにかく、作るのが楽しかったです。
今まで、デジタルでものを作るという事がなく、コードもきちんと書けないのに、本当に作れるのかなと不安でいっぱいでした。
ただ結果は、作れちゃいました。

知識はまだまだ足りませんが、
今後も少しづつグレードアップしたものを作っていこうと思います。

# 反省点
LINE Botは何となく作れてしまい、使ってはいるがその使う意味を本当に理解していない点が多く、応用していくにもまだまだ知識が足りないなと感じています。
上記を忘れず今後の課題として、もっと良いLINE Botにチャレンジしていこうと思います。
【Android】レイアウトを比率で大きさを指定する

# はじめに
今回は XML内で面白いものはないかと遊んでいた所見つけた　比率で大きさ指定をする方法を記事に残しておきます。
# 実践

widthのサイズを基準にheightのサイズに合わせるか、逆にheightのサイズを基準にwidthのサイズに合わせるかを指定でき、widthの**w** か　heightの**h**で指定する　その後ろに,で区切り比率を数字で指定する。
```
android:layout_width="100dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="h,1:1"
```
上の例では widthをheightに合わせて1:1にするのでどちらも１００dpになる。


注意としてConstraintsLayout内でしか使えないということがあげられます。
`amplify push`時に以下のようなエラーが出て困った（ "The runtime parameter of nodejs12.x is no longer supported for creating or updating AWS Lambda functions. We recommend you use the new runtime (nodejs18.x) while creating or updating functions.）（※注：未解決です-->解決した）

これを試そうとした

> https://aws.amazon.com/jp/builders-flash/202111/amplify-geo-map/?awsf.filter-name=*all

`amplify push`時に以下のようなエラーが出て困った（※注：未解決です）

```
AWS::Lambda::Function      Sun Nov 05 2023 19:46:19 GMT+0900 (日本標準時) Resource handler returned message: "The runtime parameter of nodejs12.x is no longer supported for creating or updating AWS Lambda functions. We recommend you use the new runtime (nodejs18.x) while creating or updating functions. (Service: Lambda, Status Code: 400, Request ID: d5a7765b-9a8c-41d5-b98d-e99b5f954a98)" (RequestToken: c1e3fd90-0507-47fe-f9d7-184d2959af6d, HandlerErrorCode: InvalidRequest)
```

error内容

> The runtime parameter of nodejs12.x is no longer supported for creating or updating AWS Lambda functions while using AwsCustomResource


これを試したが効果がなかった

> https://qiita.com/jre233kei/items/b30e2795e975311cb936


```
npm install -g @aws-amplify/cli
```

これも試したが効果がなかった

> https://github.com/aws-amplify/amplify-category-api/issues/1520

```
npm i -g @aws-amplify/cli@12.1.0-rc.2def814808.0
```

これも試したが効果がなかった

> https://github.com/aws-amplify/amplify-category-api/issues/1520#issuecomment-1652277797

```
npm i -g @aws-amplify/cli@rest-api-july-temp
```

どうすればいいのか、、、

（追記）

これを信じて、

> Closing this issue, since this should have been mitigated since Amplify CLI version 12.3.0 and up.
> https://github.com/aws-amplify/amplify-category-api/issues/1520

> https://aws.amazon.com/jp/builders-flash/202111/amplify-geo-map/?awsf.filter-name=*all

version指定せず最新(12.3以降)にして最初からやり直したら解決した

```
npm install -g @aws-amplify/cli
```

おそらく、`npm install`,`amplify configure`,`amplify init`,`amplify add geo`のどこかで解決している気がしている

# 参考

https://qiita.com/jre233kei/items/b30e2795e975311cb936

https://forum.serverless.com/t/aws-lambda-nodejs12-x-is-no-longer-supported/19174

https://stackoverflow.com/questions/76347015/the-runtime-parameter-of-nodejs12-x-is-no-longer-supported-for-creating-or-updat
マングリングとは

# はじめに
毎週1本様々な技術に関する記事を投稿しています。
もし興味のある方は下のリンクから他の記事も見ていただければ幸いです。
 [@7_inai_](https://qiita.com/7_inai_)


# マングリングとは
`マングリング(名前修飾)とは、コンパイラが関数や変数の名前を変更し一意にすること`を指します。
マングリングは、c++のようなコンパイル言語で使用されることが一般的です。

# なぜマングリングが必要なの？
### ①名前空間の解決
プログラムが複数のモジュールやライブラリを持つ場合、__同じ名前の関数や変数が使用されていても、マングリングにより区別__ できるようになります。

### ②関数のオーバーロード
同じ名前の関数が異なる引数リストを持つ場合、コンパイラはそれらの関数を区別するために引数の型情報を含めた名前を生成します。これにより、関数オーバーロードが可能になります。
例)
- マングリング前（c++）
`void MyClass::myMethod(int, double)`
- マングリング後
`_ZN8MyClass9myMethodEid`
_ZN: グローバル修飾子
8MyClass: クラス名
9myMethod: 関数名
E: 引数の型
i: int型
d: double型

※グローバル修飾子：
C++では、異なるスコープ内で同じ名前の関数や変数を区別するために、名前に修飾子を追加します。この修飾子は、クラス名や名前空間を含むグローバルスコープ（大域スコープ）を表すものです。

### ③テンプレートの特殊化
テンプレートクラスや関数の特殊化において、テンプレートの特殊化を識別し、正確に対応する具体的な型を選択します。


# 終わりに
マングリングは一般的にプログラムの内部の実装の詳細であるため、開発者が常に意識する必要はありません。ただし、特にライブラリの開発、外部ライブラリの使用、リンク処理、デバッグ、およびプロファイリングの段階で、マングリングに対する基本的な理解が役立つことがあるので、頭の片隅に覚えておくと良いでしょう。

最後までお付き合いくださりありがとうございました。
アプリケーション開発には「モデリング」と「ユースケース実装」というプロセスが存在する

## 初めに
ソフトウェア開発には「モデリング」と「ユースケース実装」という二つのプロセスが存在します。
この二つのプロセスについて最近説明をすることが多いため、記事としてまとめてみました。

## アプリケーションとは
アプリケーションとは、特定の目的を達成するために設計されたソフトウェアです。
アプリケーションは正味プログラムさえできれば開発することは可能ですが、今日紹介する「モデリング」と「ユースケース実装」
という大きく二つのプロセス/アーキテクチャを採用して作られることが大半です。
アプリケーション開発においてよく使われるような以下のようなアーキテクチャは全てこの「モデリング」「ユースケース実装」
考え方を基に作られています。

- レイヤードアーキテクチャ
- MVC
- クリーンアーキテクチャ
- オニオンアーキテクチャ

## モデリングとは
モデリングとは、アプリケーションで扱う概念（ドメイン）を定義、実装していくプロセスになります。
アプリケーションは基本的に何かしらの目的を達成するために作られています。
目的という表現をより噛み砕いた表現にすると、「コンピュータ上で何かしらの物/ことを実行可能・エミュレート可能にすること」です。
例えば「Qiita」というサービスは「コンピュータ上で記事を扱えるようにする」サービスです。
コンピュータ上でしか表現できない概念ももちろん存在しますが、人がインターフェースを返して何かしらインテラクションが取れる以上、アプリケーションは感覚として手に取れるような、輪郭のあるものやことを扱うことが大半のケースになります。
この感覚は普段使っているアプリなどを想像するとすぐ腑に落ちるのではないでしょうか。

モデリングとはつまり、この「アプリケーションで扱う概念」をコードとして落とし込んでいくプロセスになります。
モデリングを行う段階では、基本的に動くものはできあがりません。
このプロセスで実装していくものは、それぞれのモデルに存在するルールやアクションの定義（メソッド定義）になっていきます。
このモデリングを経て、実際の動くアプリケーションを作り上げていくための「ユースケース実装」のプロセスへと向かうことができます。

このモデリングとは、それぞれのアーキテクチャで呼び方はいろいろありますが、往々にして一番内側/下側のレイヤーの実装に関わるプロセスになります。

定義したモデルは、基本的に大きな変更などが入りにくい性質を持ちます。
モデルとは概念をベースに実装されるもの、つまり比較的普遍に近いものに依存しているため、コードの変更が起こりにくいのです。
基本的にソフトウェアは「変更の起こりやすいものが変更が起こりにくいものに依存する」というアプローチが取られることが多いため、このモデリングのプロセスで実装されるコードが一番内側、つまり一番依存されやすいコードになるのです。

それぞれのアーキテクチャで言うと、以下のレイヤーがモデリングのプロセスに対応してきます。

- レイヤードアーキテクチャ: ドメイン層
- MVC: Model
- クリーンアーキテクチャ: Entities
- オニオンアーキテクチャ: Domain Model, Domain Service

## ユースケース実装とは
前項で、アプリケーションとは、「コンピュータ上で何かしらの物/ことを実行可能・エミュレート可能にすること」と説明しました。
モデリングの段階では「コンピュータ上で扱いたい物の定義」までの段階までで終わっています。
この定義したものを用いて「コンピュータ上で実現したいことを実現していく」プロセスがこのユースケース実装になります。

モデリングのプロセスで作られた概念が同じでも、実現したいことが異なれば実装する機能やインターフェースなどは大きく異なっていきます。
「ユースケース実装」のプロセスでは、この「アプリケーションで実現したいこと」を定義していくことになります。

例えばQiitaでは「ユーザーがエディタから記事を投稿する」際、以下のような体験を提供するための実装を行なっています。

- 記事投稿時、Organizationに紐づけることができる
- 記事投稿時、記事投稿キャンペーンに紐付けができる

これらの実装は、Qiitaが体験として提供したいものであり、ユースケース層の処理として実装を行なっています。

このユースケース実装のプロセスもそれぞれのアーキテクチャのレイヤーに対応しています。

- レイヤードアーキテクチャ: アプリケーション層
- MVC: Model/Controller
- クリーンアーキテクチャ: Use Cases
- オニオンアーキテクチャ: Application Service

## なぜこのようなアプローチを採用するのか
以上のように、アプリケーション開発は大きく「モデリング」「ユースケース実装」というプロセスで開発ができることが多く、それぞれのアーキテクチャでもそれらの考え方を採用しているという紹介をしてきました。

最後に、なぜこのようなプロセスを取る必要性があるのかについて説明を行います。
理論上、今回紹介したような考えを持っていなかったとしても、アプリケーションは開発可能です。
プログラミングを勉強してきた方であれば、一度はオレオレコードでとりあえず動くような形でアプリケーションを作った経験はあるのではないでしょうか。

そしてそのような経験がある方であれば、いかにモデリングを行わずにアプリケーションの機能を作っていくことが大変なのかを理解している方も多いのではないでしょうか。

モデリングというプロセスが威力を発揮するのは初めに機能を作り始めるタイミングではなく、どちらかというと自分以外の誰かが開発を引き継いだり、機能の追加や変更などを行う必要が出てきたタイミングになります。

何も考えずに作られた機能は依存関係が複雑になることが多いです。そしてそれらの依存されているコードの変更頻度は異なるため、全体のコード同士がひきつるような状態になります。

概念を定義することができれば、コードの実装時もその概念を用いて人とコミュニケーションが取れたり、思考を行うことが容易になります。そして概念から作られたコードは比較的変更頻度も低く、安定しています。

このような変更頻度とコードとしての扱いやすさを踏まえると、まずはモデリングをしていくことが重要だ、ということが今までのエンジニアリングの歴史の中のプラクティスとして現代まで継承されています。

以上から、モデリング、そしてモデリングで実装されたコードを用いたユースケースの実装、というプロセスが主流になったのだと考えています。

## 参考
https://ja.wikipedia.org/wiki/Model_View_Controller
https://gist.github.com/mpppk/609d592f25cab9312654b39f1b357c60
https://little-hands.hatenablog.com/entry/2019/07/26/domain-knowledge
Pillowを使って画像ファイルからフェードエフェクトを適用したスライドショー動画を作成する

# 概要
複数の画像ファイルからスライドショーの動画を作成するのは `ffmpeg` 等で簡単に可能ですが、単に画像を結合した場合では以下のようにやや味気ないスライドショーになってしまいます。

![フェードなしスライドショー](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591150/19959843-1e7d-b4d9-9a8d-713a41742a88.gif)

そこで、以下のようなフェードエフェクトを導入することで、ややリッチな動画になります。

![フェードありスライドショー](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591150/ceeb44de-c16b-6e54-145a-303b49a49eb3.gif)

`ffmpeg` でもフェードの導入は可能ですが、入力ファイルの数が多いとコマンドが煩雑になるため、ここでは Python で実装する方法を紹介します。

# 入力画像
入力する画像は何でも良いですが、ここでは例として CC0 ライセンスで利用可能な Pixabay の画像を利用します。

https://pixabay.com/

以下の5枚をダウンロードし、`./img/` に保存します。

- https://pixabay.com/photos/dandelion-flower-close-up-macro-8318529/
- https://pixabay.com/photos/duck-mallard-lake-pond-waterbird-8297668/
- https://pixabay.com/photos/european-shorthair-cat-kitten-8267220/
- https://pixabay.com/photos/fox-animal-mammal-canine-wildlife-8308116/
- https://pixabay.com/photos/gosling-chick-bird-baby-goose-7938451/

# Pythonによる実装
Pythonを使ってフェードエフェクトを導入した動画を作成します。Pillow の `Image.blend` で連続する2枚の画像をブレンドしたフレームを生成し、 OpenCV の `cv2.VideoWriter` を用いて動画を出力するという内容になっています。

```python
import pathlib

import cv2
import numpy as np
from PIL import Image


def main():
    fps = 10  # 出力する動画のフレームレート
    fade_frames = 20  # 入力画像1枚に対するフェード適用後のフレーム数

    img_dir = pathlib.Path("./img/")
    imgs = [Image.open(img_file) for img_file in img_dir.glob("*.jpg")]

    deltas = np.linspace(0.0, 1.0, fade_frames, endpoint=False)  # フェード適用時のフレーム割り

    fourcc = cv2.VideoWriter_fourcc(*"H264")
    video = cv2.VideoWriter("video.mp4", fourcc, fps, imgs[0].size)

    for i in range(len(imgs) - 1):
        for delta in deltas:
            alpha = (1 - np.cos(delta * np.pi)) / 2  # 三角関数で滑らかに補間する
            img_blended = Image.blend(imgs[i], imgs[i + 1], alpha)  # delta=0(alpha=0)では元画像が使われる
            video.write(cv2.cvtColor(np.asarray(img_blended), cv2.COLOR_RGB2BGR))
    video.write(cv2.cvtColor(np.asarray(imgs[-1]), cv2.COLOR_RGB2BGR))  # 最後の元画像のフレームも追加

    video.release()


if __name__ == "__main__":
    main()
```

実行すると、 `video.mp4` に以下の動画が出力されます。（記事上では別途出力したgif動画を貼り付けています。）

![フェードありスライドショー](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591150/ceeb44de-c16b-6e54-145a-303b49a49eb3.gif)

# `Image.blend` の引数 `alpha` の算出方法の違いによる差異
上記実装の22行目では `alpha = (1 - np.cos(delta * np.pi)) / 2` として、三角関数を使った補間をしていますが、`Image.blend` の引数 `alpha` は0~1の数値であれば良いので、 `alpha = delta` としても問題はありません。以下は `alpha = delta` とした場合と `alpha = (1 - np.cos(delta * np.pi)) / 2` とした場合の比較です。

![alphaによる差異の比較](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591150/7ccb9cf2-c710-28ce-75b8-bf2f003ba15d.gif)

**左**： `alpha = delta`
**右**： `alpha = (1 - np.cos(delta * np.pi)) / 2`

好みのレベルですが、三角関数で補間した右の方がややメリハリが効いた遷移に見えます。
阪神リーグ優勝の法則

## はじめに
まず、この記事を書く前に、2023年11月5日に京セラドーム大阪で行われた、オリックス・バファローズ 対 阪神タイガース戦、阪神タイガースがオリックス・バファローズに、4勝3敗で、38年ぶりの日本一に輝きました。

阪神タイガース優勝おめでとうございます。🎉
59年ぶりの関西対決、阪神タイガース、38年ぶりの日本一、何かと話題の多い日本シリーズでした。

さて、過去の阪神タイガースのリーグ優勝と日本一から、どのような法則があるかみてみましょう。[（阪神タイガースがリーグ優勝した年）](https://ja.wikipedia.org/wiki/%E9%98%AA%E7%A5%9E%E3%82%BF%E3%82%A4%E3%82%AC%E3%83%BC%E3%82%B9)はこちら。
まずは、阪神タイガースがリーグ優勝した年を下記に示します。

## 阪神タイガースがリーグ優勝した年

|リーグ優勝した年|日本シリーズ|前回優勝した年からの経過|
|:-:|:-:|:-:|
|1962年|敗退|　|
|　|　|2年ぶり|
|1964年|敗退|　|
|　|　|21年ぶり|
|1985年|日本一|　|
|　|　|18年ぶり|
|2003年|敗退|　|
|　|　|2年ぶり|
|2005年|敗退|　|
|　|　|18年ぶり|
|2023年|日本一|　|
|　|　|?|
|?|?|　|

### 注：2014年、クライマックスシリーズを制して、日本シリーズに進出した年はカウントしていません。

## 阪神タイガースがリーグ優勝した年を考察
* 初めてか久しぶり(18年ぶり)にリーグ優勝して、日本シリーズ敗退した場合(1962年、2003年)、その2年後リーグ優勝を果たす。しかし、 いずれも日本シリーズでは敗退。(1964年、2005年)
* 前回のリーグ優勝から2年ぶりにリーグ優勝を果たした場合(1964年、2005年)、その後リーグ優勝は遠のくが、その後、久しぶり(21年ぶりか18年ぶり)にリーグ優勝すると、日本シリーズを制し、日本一に輝く。(1985年、2023年)
* リーグ優勝を果たし、日本シリーズも制すると、その後リーグ優勝が遠のく。(1985年〜2003年)

## 最後に
18年ぶりに阪神タイガースがリーグ優勝をして、38年ぶりに日本シリーズを制し日本一に輝くました。🎊
さて、次回リーグ優勝、さらには日本一に輝くのはいつになるのか？
過去の法則は関係なく、阪神タイガースの黄金期を築けるか？
それとも、過去の法則通り、再び暗黒時代に突入してしまうのか？
最後まで、この記事を読んでいただき、ありがとうございました。
【Chrome拡張機能】Webページにクレヨンしんちゃんを！

<h1><font color="#800080">クレヨンしんちゃんの拡張機能だゾ！</font> </h1>
Chrome拡張でWebページに可愛いクレヨンしんちゃんを追加することができるツールです。

※ネタ要素が豊富の拡張機能です。
&emsp;
完成物：

https://github.com/renrenbatabata/kureyonsintyan

## 4種類のしんちゃんを！
このツールには4種類の機能が搭載されています。
順にご説明します。
&emsp;
### １．見出しの語尾が全部「だゾ」になるゾ！
&emsp;
しんちゃんの特徴的な口癖をつけることができます。

![si.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3593749/c9c23969-4014-b566-d0d6-f476a022db87.png)

&emsp;
### ２．見出し周辺にケツだけ星人が出現！
&emsp;
大抵、母・みさえや他の大人たちをからかうシーンで登場するお馴染みの動き！
&emsp;
「ぶりぶりー」と左右に動くドット絵のケツだけ星人を追加することができます。


![FireShot Capture 017 - ドラえもん - Google 検索 - www.google.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3593749/22e17696-c409-8454-445f-981669f7f4e7.png)
&emsp;
### ３．画像は全部ケツだけ星人に変えちゃう！

ウェブ上の画像をすべてケツだけ星人に置き換えることができます！
&emsp;
どこまでスクロールしても全て置き換わるので存分に眺められます！
&emsp;
![image２.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3593749/7da5a0bb-cf30-dca3-4d99-125fbf019998.png)
&emsp;
### ４．見出しにマウスをあわせると色が変わり、音が鳴るカモ！？ ※音量注意！！
&emsp;
見出しをホバーすると色がオレンジ色に変わります。
&emsp;
ホバーやクリック時に、クレヨンしんちゃんの気まぐれで音楽が流れるかもしれない機能を追加できます。
&emsp;
※突然流れるのでくれぐれも音量にはご注意を…
&emsp;
<blockquote class="twitter-tweet"><p lang="zxx" dir="ltr"><a href="https://t.co/79PcXda9Rp">pic.twitter.com/79PcXda9Rp</a></p>&mdash; れんれん (@renrenbatabata) <a href="https://twitter.com/renrenbatabata/status/1721131440279310435?ref_src=twsrc%5Etfw">November 5, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## まとめ
この機能は、 **Progate Pathのコミュニティ内で企画してくださった初心者向けの 「第一回おためしハッカソン」** に参加した際に制作しました。
開発メンバー三名（haruさん、まっさんさん、れんれん）とつよつよメンターさん（よつさん、Akira_0809さん、Sekibuuunさん、たく坊さん）のサポートにより11/4～11/5の2日間で完成させることができました。
 
当記事は、機能説明のみですが実装過程の記事も随時作成致します！
最後まで読んでいただきありがとうございました。
読者の皆さんがこの記事からクレヨンしんちゃんの拡張機能で遊んでくださると嬉しいです！

<h3><font color="#0000ff">DONE👋</font></h3>
Python 自作でモジュールをimportする　補足


読み込みファイルが関数で記述されていない場合は
インポートした時点でそのファイル内容が実行される。

関数が記述されている場合、importしたファイルに記述されている関数が実行ファイル内に入るイメージで、実行される。

つまり、

main.py
　import test
　print('main.py')
　test.test()

test .py
　print('関数外')
　def test_b():
　    print('テスト')

main.pyを実行した結果は、以下となる。
　関数外
　main.py
　テスト

また、関数以外も記述しているファイルでimport時に実行せず関数だけを取り出したい場合は、
import対象のファイルで関数に囲まれていない処理を
if __name__ == "__main__":の下に記述するよう書き換えると実行されない。


他にも
asを使うとモジュールや関数などに別名をつけられる。
from math import pi as PI


モジュールの種類によって以下の順番でグループ分けしてインポートするのが推奨されている。
グループ間は空白行で区切る。

　標準ライブラリ
　サードパーティライブラリ（NumPyなど）
　ローカルライブラリ（自作のライブラリ）


fromを使って一部の関数や変数、クラスなどを複数指定してインポートする場合は、カンマで区切ることも可能である。
from <モジュール名> import <識別子名>

例えば、
from math import pi, radians


importでよく起こるエラーとしては、ValueErrorがある。
関数の引数に間違った型を渡した場合に起きるエラー。
例、数値データ(int 型や float 型)を引数に取るものに対して関数が処理できない値を渡した場合に発生する。
Minecraft マルチプレイサーバーを建てる方法

:::note warn
この記事の内容は、JAVAを導入した状態でないとできません。
あと少しパソコンの知識も要ります。
:::

Minecraftのマルチプレイサーバー(java版)を作る方法を書いておきます
## ダウンロード(バニラ)

まずはサーバーをダウンロードします
ランチャーを起動し、起動構成を選択します
![スクリーンショット 2023-11-05 19.34.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3611904/60ccec25-27c7-1707-ad2c-875a53a77ccc.png)
新規追加を押し、バージョンの横にあるサーバーを押します。
![スクリーンショット 2023-11-05 19.36.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3611904/ad73fab2-44f9-99d7-db29-28c2febb73aa.png)
そうすると、ページが開かれ、ダウンロードされます。
![スクリーンショット 2023-11-05 19.40.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3611904/623a6988-fa19-c278-3a42-a4d476e23388.png)
## 準備
そして`server`というフォルダを作ります
その中にさっきダウンロードした`.jarファイル`を入れます。
コマンドプロンプト(ターミナル)を開き、
```html:コマンドプロンプト(Macの場合)
cd /Users/※ユーザー名/Desktop/server/

```
:::note alert
これはMacの場合です。
Windowsの場合は、パスをcdに続いて入力してください。
※英数スペースも忘れずに
:::
入力したら、
```html:コマンドプロンプト
java -Xmx1024M -Xms1024M -jar ファイルの名前.jar nogui
```
を入力します。ファイルの名前はダウンロードたファイルの名前をコピペしてください
実行するとファイルが生成され、エラーが発生します。
```:コマンドプロンプト
Failed to load eula.txt
````
それの下のに英語で
```:コマンドプロンプト
You need to agree to the EULA in order to run the server. Go to eula.txt for more info.
```
と書いています。これは日本語で

:::note info
サーバーを実行するには、EULA に同意する必要があります。 詳細については、eula.txt を参照してください。
:::
と書いています。
なので、フォルダの中のeula.txtを開きましょう。
その中は、
```:eula.txt
#By changing the setting below to TRUE you are indicating your agreement to our EULA (https://aka.ms/MinecraftEULA).
#Sun Nov 05 21:24:29 JST 2023
eula=false
```
となっています
eula.txtの4行目`eula=false`を`eula=true`に変えましょう。
## 起動
```html:コマンドプロンプト
java -Xmx1024M -Xms1024M -jar ファイルの名前.jar nogui
```
で起動できます。
そうすると、worldフォルダや色々なフォルダが作成され、サーバーが起動します。
## 接続
マイクラを起動し、マイクラ側から、マルチプレイを押し、ダイレクト接続から
`localhost`と入力すると入れます。
![スクリーンショット 2023-11-06 14.41.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3611904/44552c94-7ddc-1c4b-0c60-8e387c58aefb.png)

## 終わり

最後まで読んでいただいてありがとうございます！
不具合についての記事はこちらになります

https://qiita.com/ikatakoch/items/87fa00d3b3f5e4d80ab9

ぜひこちらもお読みください！
【PaizaC⇒Bレベルアップ問題集】構造体の作成

結構書くのが久しぶりだが、今までクラウド資格の勉強に費やしてきたので
（おかげでGCPとAWSのアシスタント資格は全取得できた）
コードを書く練習を再開しようと考えた。
出始めに、PaizaのphpのBランクのスキルチェックがとんと検討がつかないレベルで敗北したので、レベルアップ問題集をつかってスキルアップを目指す。

スキルチェックテストはだめだが、レベルアップ問題集についてはコードを公開したりしても大丈夫らしいので、Qiitaを使って問題演習をやってみることにした

---
今回の問題はこれ
https://paiza.jp/works/mondai/class_primer/class_primer__make

//問題
N
n_1 o_1 b_1 s_1
...
n_N o_N b_N s_N

・ 1 行目では、paiza君のクラスの人数 N 
・ 続く N 行のうち i 行目 (1 ≦ i ≦ N) では、 i 番の生徒の名前・年齢・誕生日・出身地を表す整数・文字列 n_i ,o_i ,b_i , s_i が順に半角スペース区切りで与えられます。


構造体・・・って聞いた覚えがあるけど全く覚えてなかった（ヤバイ）
ぐぐってみると
どうやら、データ型の１つで、単数or複数の値をまとめて格納できる型らしい。
配列に似ているが、Wikiによると、配列と比べてそれぞれのメンバー（フィールド）に名前が付いている点、またメンバーの型が異なっていてもよい点が異なるらしい。
ちなみに、VBAだと``type``、C言語だと``struct``。

**<font color="red">※phpには存在しない。</font>**

そう、存在しないのである。
phpをマスターする前はマクロ屋だったこともあり、typeは流石に覚えてた。
そうか、typeってあれか。。。と。振り返ってみれば仕事でも使ってたわ。たしかに。

構造体を構成する要素を**メンバ**というが、たとえば今回の問題でいうと、

```
User{
nickname : 名前
old : 年齢
birth : 誕生日
state : 出身地
}
```
名前・年齢・誕生日・出身地がメンバということになる。
おや？こいつはもしや。クラスを使えばいけるんじゃないか。
Userクラスに、各メンバーをprivateで型を指定して、
入力が名前 年齢 誕生日 出身地ってなってるので、加工して
クラスに突っ込んで出力が問題の形になるようにメソッドを作ってやればいけるんでは？
やってみましょう。

```
//Userクラス
class User{
    private string $nickname;
    private int $old;
    private string $birth;
    private string $state;

    public function __construct($nickname,$old, $birth, $state) {
          $this->nickname = $nickname;
          $this->old = $old;
          $this->birth = $birth;
          $this->state = $state;
    }
    public function getOutput(){
        $output = "User{" . "\n";
        $output = $output ."nickname : " .$this->nickname. "\n";
        $output = $output ."old : " .$this->old. "\n";
        $output = $output ."birth : " .$this->birth. "\n";
        $output = $output ."state : " .$this->state. "\n";
        $output = $output ."}" . "\n";
        return $output;
    }
}
```

上はクラスでここから本編

```

//まず1行目はpaizaくんのクラスの人数となっているのでこれを元にループ作成
$num = trim(fgets(STDIN));

for($i=0; $i<$num; $i++){
    //次の標準出力ゲット
    $s = trim(fgets(STDIN));
    //改行を除去（Win／Mac両方対応）
    $s = str_replace(array("\r\n","\r","\n"), '', $s);
    //半スペで区切って配列に
    $array = explode(" ", $s);
    //それぞれ変数に代入
    $nickname = $array[0];
    $old = $array[1];
    $birth = $array[2];
    $state = $array[3];
    //クラスをインスタンス化して変数をつっこむ
    $member = new User($nickname, $old, $birth, $state);
    echo $member->getOutput();
}

```
はい、これでいけました。
上の2つのコードは本来1つのコードに書くべきですが、
わかりやすくするために２つにわけました。
※コードを書く順番はクラス・本編どっちからでも構いません。

まあ、でも、そもそもこの問題、クラス使わなくても配列でもいけましたね。。。

でも今後構造体を積み重ねてデータ検索してみたいなことをやるみたいなので、クラスじゃないとだめかな？
もうちょっと研究しよう
KAGOYA VPSで運用しているRedmine（Docker）のバックアップをWindowsのローカルにダウンロード

VPS初心者です。簡単なことで躓いております。今日はリモートサーバからのデータのダウンロードに躓きました。

KAGOYA VPSのマニュアルに、SSH接続方法としてPuTTYの設定方法の記載があります。
https://support.kagoya.jp/vps/manual/index.php?action=show&cat=27

1. PuTTYをインストール。
1. 事前にPuTTYgenを使って秘密鍵を用意する。
1. ファイルコピーにはPuTTY本体ではなく、一緒にインストールされるpscpコマンドを使う。

```
pscp -i ログイン用認証キーファイル名.ppk root@サーバーIPアドレス:ファイル名 保存先ファイル名 
```
FlutterのNavigatorの仕組み

### 自己紹介
初めまして、アウトプット太郎といいます。
Flutterに精通したエンジニアになるため、インプットをしていましたが、
身につけるにはアウトプットするのが良いと思い、基本的なことからになりますが、投稿していきたいと思います。


### 背景
アプリで画面遷移をする際、Navigatorを使っていたんですが、
その仕組みを理解したくまとめてみました。


### routeとは
Flutterでの画面遷移はルート(route)という単位で管理されます。
そして一つの画面は一つのルートとして扱われます。

例えば画面Aから画面Bに遷移した時、
内部では[画面A,画面B]という形でrouteがスタックされます。
横で並んでいるとどっちが新しいかわかりにくいですが、
お皿Aの上にお皿Bが乗っているイメージです。

そしてそのrouteを管理するウィジェットがNavigatorになります。

### Navigatorの持つメソッド
push: 新しいルートをスタックの上に追加する。
→新しい画面へ遷移する。

pop: 現在のルートをスタックから削除する。
→前の画面へ戻る。

pushReplacement: 現在のルートを新しいルートで置き換える。
→新しくスタックを作り直し、新しい画面へ遷移する。

pushNamed: 名前付きルートを使用して新しいルートをスタックの上に追加する。
→予めmain.dartなどでrouteを作っておき、以降はその定義を呼び出して画面遷移する。

```
void main() {
  runApp(MaterialApp(
    // 名前付きルートを定義
    routes: {
      '/': (context) => HomeScreen(),  // ホーム画面
      '/second': (context) => SecondScreen(),  // 2番目の画面
      '/third': (context) => ThirdScreen(),  // 3番目の画面
    },
    initialRoute: '/', // 初期のルート
  ));
}
```

popUntil: 指定したルートまでスタックからルートを削除する。
→指定した画面まで戻り、その間のスタックを削除する。

### その他のNavigatorメソッド
canPop:true or falseを返し、popできるかを判定できる。
→canPopで検証しtrueであれば戻るボタンを出すなどの制御ができる。
swiftでカウントダウンを実装してみる

# はじめに
swiftの勉強をしていて、タイマーのカウントダウンについて勉強をしたので、
備忘録として簡単にまとめていきたいと思います。


# 公式ドキュメントを読み解く

https://developer.apple.com/documentation/foundation/timer/1412416-scheduledtimer

> Creates a timer and schedules it on the current run loop in the default mode.

上記メソッドを用いれば、タイマーの機能が使えそうなので、さらに読み進める。

```swift
class func scheduledTimer(
    timeInterval ti: TimeInterval,
    target aTarget: Any,
    selector aSelector: Selector,
    userInfo: Any?,
    repeats yesOrNo: Bool
) -> Timer
```

`timeInterval`にインターバルの時間を、`target`にタイマーが経過した際のターゲットを、`selector`にタイマーが経過した際に呼び出すセレクタを、`userInfo`には`nil`を、
`repeates`には繰り返すかをbool値で設定する模様。

というわけで、1秒毎に`updateTimer`関数を呼び出す処理は、以下のようになります。
```swift
Timer.scheduledTimer(timeInterval: 1.0, target: self,
                selector: #selector(updateTimer), userInfo: nil, repeats: true )
```




# 実装例
以下、1秒毎にカウントダウンをする処理となります。

```swift:ViewController.swift
import UIKit

class ViewController: UIViewController {
    var counter = 10
    var timer = Timer()

    override func viewDidLoad() {
        super.viewDidLoad()

        timer = Timer.scheduledTimer(timeInterval: 1.0, target: self,
                selector: #selector(updateTimer), userInfo: nil, repeats: true )
    }

    @objc func updateTimer() {
        if counter > 0 {
            counter -= 1
        } else {
            timer.invalidate()
        }
    }
}
```
1秒毎に`updateTimer`関数を呼び出し、
`counter`が0以上であればcounterをデクリメントし、0以下であればタイマーを無効化します。
このように実装することで、カウントダウン機能を実現することができます。

# まとめ
カウントダウン機能をswiftで実装する場合は、`scheduledTimer`を使用する。

# 参考文献
https://developer.apple.com/documentation/foundation/timer/1412416-scheduledtimer

https://stackoverflow.com/questions/29374553/how-can-i-make-a-countdown-with-nstimer
AWSでAPI Gatewayをkinesis変換でLambdaする場合のCORS解消

CORSひっかかったのでメモ

```        
POST https://...amazonaws.com/kinesis 500 (Internal Server Error)
```

|レスポンスキー|変更するパラメータ|変更タイプ|値|
|---|---|---|---|
|200|header.Content-Type|追加|'x-amz-json-1.1'|

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/5a8f2ec3-5766-1253-9846-a2b6687302b3.png)

### 参考URL

https://qiita.com/daisukeArk/items/c6bcc6e1548c00e4b9a6
【Ruby on rails】日時を日本時間で表示する

# はじめに
プログラミングを勉強して2か月半ほどです。
プログラミングスクールを卒業し、現在就職活動をしています。

今回はオリジナルアプリの中で、日時を日本時間で表示してみたので共有したいと思います。

※@jnchito(Junichi Ito)さんの投稿を参考にさせて頂きました。
　とても分かりやすく参考になりました。
　ありがとうございます。

# Let's start!!!
## 時間を表示する
時間を表示するときは、表示したいモデルの`created_at`カラムを取得します。
```index.html.erb
<%= destination.created_at %>
```
しかし、これでは以下のように少し見づらい表示になります。
![271ECEB5-ED00-45CF-BDBA-562AF0CF3B23_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3564879/2e1e3f68-a7c5-4228-d37e-11cbeb538484.jpeg)

この世界基準表記を変えていきましょう。

## タイムゾーンを日本時間に変更する
config/application.rbに以下の設定をします。
```config/application.rb
module HermitPurple
  class Application < Rails::Application
    #中略
    config.time_zone = 'Tokyo'

  end
end
```
上記の記述で日本時間に変更します。

## 日本のフォーマットに変更
config/application.rbに以下の設定をします。
```config/application.rb
module HermitPurple
  class Application < Rails::Application
    #中略
    config.i18n.default_locale = :ja

  end
end
```
次に、config/locales/ja.ymlというファイルを作成します。
このファイルに以下のような設定を記述します。
```config/locales/ja.yml
ja:
  time:
    formats:
      default: "%Y/%m/%d %H:%M:%S"
```

## lメソッドの記述

最後にviewファイルの記述を変更します。
```index.html.erb
<%= l destination.created_at %>
```
railsにはlメソッドというものがあります。
lメソッドは、`config/locales/ja.yml`ファイルの表示形式を呼び出します。

この記述後にサーバーを再起動すると表示形式が以下のように変更されます。
![DA23D713-A3D4-4B54-8784-6862BEBFCF5D_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3564879/a2db0a38-1e32-9da5-8296-e8ae278e0b86.jpeg)

# 終わりに
今回は日本時間表示について共有させて頂きました。
みなさんのお役に立てていれば幸いです。

最後まで読んでいただきありがとうございました！
【バッチファイル】自動フォルダ作成バッチファイルの作成手順


### 自動フォルダ作成バッチファイルの作成手順

こんにちは、Mottyです。今回の記事はWindowsのバッチファイルを使用して、現在の日付に基づいてフォルダを作成する手法についてご紹介します。

### 目的と用途
 下記に紹介するバッチファイルでは、PowerShellを使用して現在の日付を取得し、「yyyyMM」および「yyyyMMdd」の形式でフォルダ名を作成し、その名前のフォルダを作成します。フォルダの中に現在の日付を含むサブフォルダを作成します。例えば2023年11月5日だったら、"202311"というフォルダを作成し、更に中身にも"20231105"というフォルダを作成します。
日付別にファイル管理したい場合に有効に使えるでしょう。

```Make_Daily_Folder.bat
@echo off

REM 日付情報を取得
for /F "delims=" %%i in ('powershell -Command "(Get-Date).ToString('yyyyMM')"') do set "YYYYMM=%%i"
for /F "delims=" %%j in ('powershell -Command "(Get-Date).ToString('yyyyMMdd')"') do set "YYYYMMDD=%%j"

set "folderName=%YYYYMM%\%YYYYMMDD%"
REM フォルダ作成
mkdir "%CD%\%folderName%"

```

 ### 手順
 
 1.現在の日付を取得する: PowerShellのGet-Dateコマンドを使用して、現在の日付を "yyyyMM" および "yyyyMMdd" の形式で取得します。
 
 2.フォルダ名を作成: 取得した日付を使ってフォルダ名を作成します。これは YYYYMM と YYYYMMDD という変数にそれぞれ格納されます。
 
 3.フォルダを作成: 作成したフォルダ名を使って、新しいフォルダを作成します。

![SNip2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302420/01fe7227-a39e-64dc-d8e3-ba9138f28808.png)


![snip.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302420/01980583-ca99-208e-4094-6b46be649db0.png)

できていますね！

### 備考
タスクスケジューラーに登録しておくと、PCを起動した段階でフォルダを作成してくれます。
ピクチャフォルダなどに仕込んでおくと、スクリーンショットの保存先を日付で仕分けされたフォルダ先に保存することができて便利です。

![qisnip3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302420/25dc4823-3d07-eb3a-aab7-bc7caae6318e.png)


### 終わりに

日付をPowershellの実行結果から取得しましたが、バッチコマンドからも取得できます。Powershellのほうが構文が簡単なので起用させてもらったまでです。
（ちなみにバッチで行ったほうがやや早いです。）

このバッチファイルを使うことで、手動でフォルダを作成する手間を省き、効率的にフォルダを作成できるかと思います。
質問等やコメントなどあれば、お待ちしております。
【Webデザイン】Webサイト制作って結局どうやって勉強すれば良いのか？おすすめの本を紹介！

## はじめに

Webサイト制作を始めようと思っている方、始めたばかりの方のプラスになればと思って記事を書きました。Webサイト制作のためにどうやって勉強していけば良いのか、何を使って勉強すれば良いのか、勉強始めたばかりの方は迷ってしまうと思います。本記事では、おすすめの本をいくつか紹介します。その他にも、WordPressを使えば良いのか、HTMLやCSSを使えば良いのかわからないなど、自分自身もはじめの頃に感じた疑問についても拾っていきます。ぜひ、最後まで記事を読んでみてください。

## 勉強方法

まず、Webサイト制作の勉強方法について説明します。私は本や動画、Web記事など様々な方法で知識を獲得してきましたが、一番の近道は、実績のある入門書を順に読んでいくのが早いかなと今では思っております。Web記事や動画にも様々な利点がありますが、情報収集や知識の整理が意外と大変で、最初から情報が整理されてまとまった、実績のある入門書を繰り返し読んで、自分のものにする事が、私的にはWebサイト制作を学びやすい方法かなと思います。この記事では、これを読んでおけば、自分のイメージしたWebサイトが制作できるレベルになるという本を紹介します。以下の6冊の本ですが、WebcreatorboxのManaさんが書いた4冊と、動くWebデザインアイディア帳（2冊）になります。

![Webデザインにおすすめの本6選.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674933/900db8e9-f22e-b8dd-bf3b-f8006b15ed2c.jpeg)

Webサイト制作を学ぶ手順として、以下の順序で進めるのが良いと思います。
1. HTML/CSSを学ぶ
2. WordPressを学ぶ
3. JavaScriptを学ぶ
4. 動くデザインのアイディアを学ぶ

### 1. HTML/CSSを学ぶ
まず、Webサイトを作る基礎であるHTMLとCSSについて、以下の2冊を読みながら、実際にWebサイトを作りながら学んでいくのが良いです。繰り返し本に出てくるWebサイトを真似して作り、HTMLとCSSでWebサイトを作れるようになりましょう。

- 1冊ですべて身につくHTML&CSSとWebデザイン入門講座
- 1冊ですべて身につくHTML&CSSとWebデザイン実践講座

### 2. WordPressを学ぶ
HTMLとCSSを学んだら、次にWordPressについて学びましょう。HTMLとCSSを触らずともデザインのテンプレートを使って簡単にWebサイトを制作できる事を実感しましょう。WordPressでは、様々なデザインのテンプレートが用意されており、テンプレートを用いる事で、よく見かけるWebサイトを簡単に作成する事ができます。しかし、テンプレートを使って必ずしも自分が思い描く独創的なWebサイトを作れるとは限りません。そこで大切なのがHTML/CSSの知識になります。WordPressでは、自分自身で作成したHTML/CSSのデザインをテンプレート化できる機能が用意されています。これを用いる事で、どんなWebサイトも制作可能です。WordPressはWebサイトを効率的に制作・運用する様々な機能が用意されていますので、最終的にはWordPressでWebサイトを制作するのが良いです。以下の1冊を読みながら、WordPressの知識をつけつつWebサイト制作を行いましょう。

- 1冊ですべて身につくWordPress入門講座

### 3. JavaScriptを学ぶ

HTML/CSS・WordPressを使ってWebサイトを制作できるようになったら、次に挑戦するのは動的なWebサイトの作成です。Webサイトには静的な部分、動的な部分があり、JavaScriptでは動的な部分を制御する事ができます。例えば、お問合せやログインフォーム、デザインのアニメーション、その他にも様々な機能がJavaScriptで実現できます。以下の1冊を読みながら、JavaScriptの知識をつけつつWebサイト制作を行いましょう。

- 1冊ですべて身につくWordPress入門講座

### 4. 動くデザインのアイディアを学ぶ

最後に、JavaScriptで作る事ができる動的な部品（デザインのアニメーション等）のバリエーションを増やしましょう。最近のWebサイトでは、様々なアニメーションが使われており、どうやって作れば良いのか、全くイメージがつかないのではないでしょうか。以下の2冊を読む事で、よく使われている動的な部品の作り方を学ぶ事ができます。その知識を応用して、自分独自のデザインを作れるようになっていきましょう。

- 動くWebデザインアイディア帳
- 動くWebデザインアイディア帳実践編

## おわりに

今回、Webサイト制作の勉強の仕方について、自分なりに書きつつ、おすすめの本を6冊ピックアップしてみました。学び方は賛否両論ありますが、少しでも自分の経験が様々な人の学びに役立ってほしいという思いです。最後まで読んでいただきありがとうございました！