OmniAICreator/Qiita-1.07M huggingface dataset:
巡回セールスマン問題をDPで解くプログラム





# 巡回セールスマン問題

atcoder abc301 E問題の解説を聞いたのを参考にしてなるべくコンパクトに巡回セールスマン問題をDPでとくプログラムをpython3で書いてみました。

以下が使ったデータです。
点０から出発してすべての点を通って０にもどることを考えています。

4
0 3 4 7
3 0 5 4
4 5 0 3
7 4 3 0
![スクリーンショット 2023-05-26 131530.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663576/4996c7d6-26c6-6c8b-836f-eeefbcef0978.png)



終わったときのｄｐは
[[0, 100, 100, 100], 
 [0, 100, 100, 100],
 [100, 3, 100, 100],
 [6, 3, 100, 100], 
 [100, 100, 4, 100],
 [8, 100, 4, 100],
 [100, 9, 8, 100],
 [12, 9, 8, 100],
 [100, 100, 100, 7],
 [14, 100, 100, 7],
 [100, 11, 100, 7],
 [14, 11, 100, 7],
 [100, 100, 10, 7],
 [14, 100, 10, 7],
 [100, 11, 10, 11],
 [14, 11, 10, 11]]
となっています。

## プログラム

```python:tsp.py
n=int(input())
dist=[[int(i) for i in input().split()] for _ in range(n)]
print(n,dist)
inf=100
n2=1<<n
dp=[[inf]*n for _ in range(n2)]
dp[0][0]=0
#print(dp)
for s in range(n2):        # sでビット全探索
  for u in range(n):       # uが始点
    if dp[s][u]==inf:      # uが有限値ではないとき
      continue
    for v in range(n):     # vが終点
      if ~s>>v&1:          # vがsに含まれないとき
        dp[s|1<<v][v]=min(dp[s|1<<v][v],dp[s][u]+dist[u][v])
print(dp)

```
大学2年生が2週間で統計検定2級に合格した話

よく統計検定の合格体験記を目にするので僕もそのビッグウェーブに乗ろうと思う．
この記事では，統計知識ほぼ0だった僕が2週間で統計検定2級に合格した話をリアルに書こうと思う．

まずは統計検定を勉強する前の僕を紹介
* 私立理系単科大学 学部2年生
* 大学では情報工学専攻
* 統計に関する知識は **ほぼ0**（高校生で習う確率計算はできた）

では，さっそく本題に入ろう！

# 統計検定2級とは
大学生学部1~2年生修了レベルの統計知識に相当する．しっかりとした統計学における基礎部分．機械学習を学びたい学生にとっては必須レベルの知識

## 難易度
公式問題集によれば，CBT方式でなく公開受験の場合，合格率はおよそ3~4割．しっかり対策すれば十分突破できる．

## 合格ライン
全体で60%以上の正答率．一問あたりの点数は示されてはいないけど，およそ3点と考えて大丈夫だと思う．

## 対策期間
基本的には1ヶ月（約30時間）と言われている．

## 試験形式，問題について
僕はCBT方式という形式で，近くのパソコン教室で受験した(**4~5択の選択式**). 受験日の予約さえ埋まっていなければ，基本的にはいつでも受験可能．結果はCBT方式ならその場で確認できる．
時間は90分で問題数は30問強．たぶん余裕をもって取り組めるはず．また，電卓は必須なので必ず準備しよう．ただし複雑な関数電卓は使用禁止．

# 学習スケジュール等

## 使用した教材
 <dt><a href='https://bellcurve.jp/statistics/course/'>・統計学の時間</a></dt>
誰もが通る王道の勉強サイト．とにかく強い．特に自分みたいなコストを低くしたい学生にとって無料で使用できるのがありがたい．
僕はStep.1の基礎編だけを1周，わからないところは3周取り組んだ．

 <dt><a href='https://www.amazon.co.jp/%E6%97%A5%E6%9C%AC%E7%B5%B1%E8%A8%88%E5%AD%A6%E4%BC%9A%E5%85%AC%E5%BC%8F%E8%AA%8D%E5%AE%9A-%E7%B5%B1%E8%A8%88%E6%A4%9C%E5%AE%9A-2%E7%B4%9A-%E5%85%AC%E5%BC%8F%E5%95%8F%E9%A1%8C%E9%9B%86-2018%E3%80%9C2021%E5%B9%B4/dp/4788925559/ref=sr_1_2?keywords=%E7%B5%B1%E8%A8%88%E6%A4%9C%E5%AE%9A2%E7%B4%9A&qid=1684993305&sprefix=toukei%2Caps%2C218&sr=8-2'>・統計検定2級公式問題集</a></dt>
これも王道の公式問題集．CBT方式版も売られているけど，特に内容に差はないと思う．しいて言うなら，こっちの方がCBT方式より安い．そして問題数が多かった気がする．
<dd>
　　
</dd>
この2つは特別，統計学が得意であったり，大学で十分に学んでいない限りは購入する最低限の参考資料，問題集だと思う．周囲にどんなに優秀な人でも，この2つは使っていた．


## 詳細スケジュール
<dl>
  <dt>2023年4月中旬</dt>
  <dd>統計検定2級の受験を2週間後に予約，同時に勉強開始．</dd>
  <dt>勉強開始から最初の1週間</dt>
  <dd>1日およそ1~2時間で「統計学の時間」を進める．</dd>
  <dd>進め方は説明を読む，章末問題を解く，この2つだけ．</dd>
  <dt>ラスト1週間</dt>
  <dd>過去問を解く．まとまった時間は大学やサークルが忙しかったので取れなかった．</dd>
  <dd>ただ，絶対に1日に過去問1回分は解き，答え合わせをして，解説を読んだ．</dd>
  <dt>受験日まで残り2日</dt>
  <dd>今までの間違えた問題を総点検．悩んだら，ほかのサイトを見たりした．</dd>
  <dd>特に検定に関しては1つずつ丁寧に取り組んだ．</dd>
  <dt>受験日当日</dt>
  <dd>66/100でギリギリ合格．</dd>
</dl>

以上が僕の詳細スケジュールだ．1日あたりの学習時間はおよそ2時間．確かに，前述した対策時間30時間ぐらいだった．

## 最後に
たくさんの記事の中から，読んでいただきありがとうございます．
注意してほしいのは，これはよくある「余裕で合格！」，「統計検定の合格必須メソッド」などとは違います．
**統計検定に2週間で合格するための最低限の学習**です．なので，ぜひこの記事を読んで，「統計検定ヨユーじゃん！」とは思わず，**絶対に合格するぞ**というモチベーションで謙虚に取り組んで頂けたらと思います．
少しでもお役に立てれば幸いです．
関数コンポーネントのライフサイクル

## :triangular_flag_on_post:　目的
関数コンポーネントを使用しており、あまりライフサイクルを意識していなかったので、今一度ライフサイクルを理解しアウトプットする為記事を書いています。

## :recycle:　Componentライフサイクル
下記のリンクは、クラスコンポーネントのライフサイクルになります。
現在、コンポーネントをクラスではなく、関数として定義することが推奨されていますが、コンポーネントが生まれて死ぬまでの流れはこれを理解していた方がいいかもです。

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/


#### ライフサイクルメソッド
関数コンポーネントには、クラスコンポーネントのような明示的なライフサイクルメソッドがなく、関数コンポーネント内で、`componentDidMount`、`componentDidUpdate`、`componentWillUnmount`のようなライフサイクルメソッドを使いたい場合、**`useEffectフック`** を使用します。これを[**副作用 (effect) フック**](https://ja.legacy.reactjs.org/docs/hooks-effect.html)といいます。
※ フックについては、別の記事にまとめます。

:::note info
**副作用とは？**
> 数学的関数は本来計算結果を返すことが目的ですが、その過程で周囲の状態を変化させてしまうことを指します。このような状態の変化はバグに繋がる可能性があるため、副作用という名で呼ばれています。（引用：[副作用](https://gimo.jp/glossary/details/side_effect.html)）

Reactの副作用には、**クリーンアップコード**を`必要としない副作用`と、`必要とする副作用`の2種類があります。
:::


#### Render and Commit
コンポーネントが画面に表示されるまでに、下記の3つの工程が行われます。
①　renderをトリガーする
②　コンポーネントをレンダリングする
③　DOMにコミットする

---

##### ①　renderをトリガーする
コンポーネントがレンダリングされるタイミングは下記の時です。
- コンポーネントの初期レンダリング時
- コンポーネント（またはその祖先）の状態の更新時

##### ② コンポーネントをレンダリングする
> renderをトリガーした後、Reactはコンポーネントを呼び出し、画面に何を表示するかを決定します。
「レンダリング」とは、Reactがコンポーネントを呼び出すことです。
> (引用：[Render and Commit](https://react.dev/learn/render-and-commit#epilogue-browser-paint))

下記のようなコンポーネントがある時、
```typescript: gallery.js
export default function Gallery() {
  return (
    <section>
      <h1>Inspiring Sculptures</h1>
      <Image />
      <Image />
      <Image />
    </section>
  );
}

function Image() {
  return (
    <img
      src="https://i.imgur.com/ZF6s192.jpg"
      alt="'Floralis Genérica' by Eduardo Catalano: a gigantic metallic flower sculpture with reflective petals"
    />
  );
}
```

1番最初のレンダリングの場合、`<section>`、`<h1>`、`<img>`の全てのDOMノードを作成します。
2回目以降の再レンダリングの場合、前回のレンダリングから変更されたプロパティがあれば、それを計算します。
※　ここではDOMの変更は行われません。

##### ③　DOMにコミットする
コンポーネントをレンダリング（呼び出し）した後、DOMを変更します。
1番最初のレンダリングの場合、`appendChild()DOM API`を使用して、作成したすべての DOM ノードを画面上に配置します。
2回目以降の再レンダリングの場合、 差がある時のみDOM情報を変更します。

③までの工程が終了した後、ブラウザは画面を再描画します。

> このプロセスは「ブラウザレンダリング」として知られていますが、ドキュメント全体で混乱を避けるために「ペイント」と呼ぶことにします。(引用)


## :mortar_board:　参考
https://zenn.dev/yodaka/articles/7c3dca006eba7d

https://react.dev/learn/render-and-commit#epilogue-browser-paint
【Paiza問題集】標準出力メニュー/行によって長さが違う二次元配列の表示

# Paiza問題集
Pythonで回答
## 標準出力メニュー/行によって長さが違う二次元配列の表示

### Step01 N個の文字を半分ずつ出力
```Python:Step01
"""
N個の文字を半分ずつ出力
https://paiza.jp/works/mondai/stdout_primer/stdout_primer__variable_array_step1
"""

# 数字を受け取る
num = int(input())

# 文字を半分ずつ出力
for i in range(1, num + 1):
    if i % (num//2) == 0:
        print(i)
    else:
        print(i, end=' ')
```

### Step02 数値を異なる長さで2行出力
```Python:Step02
"""
数値を異なる長さで2行出力
 https://paiza.jp/works/mondai/stdout_primer/stdout_primer__variable_array_step2
"""

# 数字を受け取る
numbers = input().split(' ')
num1 = int(numbers[0])
num2 = int(numbers[1])

# num1の数字を表示
for i in range(1, num1 + 1):
    if i == num1:
        print(i)
    else:
        print(i, end=' ')

# num2の数字を表示
for i in range(1, num2 + 1):
    if i == num2:
        print(i)
    else:
        print(i, end=' ')
```

### Step03 直角三角形の出力
```Python:Step03
"""
直角三角形の出力
https://paiza.jp/works/mondai/stdout_primer/stdout_primer__variable_array_step3
"""

# 数字を受け取る
num = int(input())

# 数字の表示
for i in range(1, num+1):
    for j in range(1, i+1):
        if j == i:
            print(j)
        else:
            print(j, end=' ')
```

### Step04 すべての行の長さが不定な 2 次元配列の出力
```Python:Step04
"""
すべての行の長さが不定な 2 次元配列の出力
https://paiza.jp/works/mondai/stdout_primer/stdout_primer__variable_array_step4
"""

# 数字を受け取る
num = int(input())

# 数行を受け取る
numbers = input().split(' ')

# 配列を作成する
number = [0]*num

# 配列に数字をintで格納する
for i in range(num):
    number[i] = int(numbers[i])

# 数字を表示する
for i in range(num):
    for j in range(1, number[i]+1):
        if j == number[i]:
            print(j)
        else:
            print(j, end=' ')
```

### Final問題 【行によって長さが違う二次元配列の表示】すべての行の長さと値が不定な2次元配列の出力
```Python:Final問題
"""
【行によって長さが違う二次元配列の表示】すべての行の長さと値が不定な2次元配列の出力
https://paiza.jp/works/mondai/stdout_primer/stdout_primer__variable_array_boss
"""

# 配列の長さN，配列の区切る回数M
N, M = map(int, (input().split(' ')))

# 配列を作成
A = [0]*N
# 数行を受け取る
num = input().split(' ')
# 配列に格納する
for i in range(N):
    A[i] = int(num[i])

# 配列の作成
B = [0]*M
# 区切りの数字
sep = input().split(' ')
# 配列に格納する
for i in range(M):
    B[i] = int(sep[i])

# 配列の出力
first = 0
for i in B:
    for j in range(i):
        if j == i-1:
            print(A[first])
        else:
            print(A[first], end=' ')
        first += 1
```
.NET MAUIのXAML忘備録その２

## ListViewなどでListViewには表データをバインディングしている場合において（バインディングしている表データではない）ViewModelのプロパティをバインディングするには

例）
ListDataにはこんな形でViewModel内のプロパティとして入っているとします。

```csharp
ObservableCollection<dataClass> ListData = 
new ObservableCollection<dataClass>()
            {
                new dataClass("data1"),
                new dataClass("data2"),
                new dataClass("data3"),
            };

private string viewModelsProperty;
public string ViewModelsProperty
{
    get => viewModelsProperty; 
    set
    {
        viewModelsProperty = value;
        OnPropertyChanged(nameof(ViewModelsProperty));
    }
}
```

### そのまま👇のようにしても表示できません
```xml
<ListView 
    ItemsSource="{Binding ListData}"/> 
    <ListView.ItemTemplate>
        <DataTemplate>
            <Label Text="{Binding ViewModelsProperty"/>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>
```
dataClassのViewModelsPropertyというプロパティであれば表示されます

### 👇のようにSource={RelativeSource AncestorType=・・・}として指定します
```xml
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamlSamples.HelloXamlPage"
             xmlns:ViewModels="clr-namespace:AppNameSpace.ViewModels"
             Title="Hello XAML Page">

--省略--
<ListView 
    ItemsSource="{Binding ListData}"/> 
    <ListView.ItemTemplate>
        <DataTemplate>
            <Label Text="{Binding ViewModelsProperty, 
                     Source={RelativeSource AncestorType={x:Type ViewModels:ThisViewModel}}}"/>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>
```
:::note warn
サンプルコードの検証が出来ていません
不具合・修正要望などありましたらコメントお願いします
:::

:::note
参考
:::
https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/data-binding/relative-bindings
:::
Microsoft Build 2023 Labの感想

# はじめに
MSBuild Day2 も濃密でしたね！　KeyNote で繰り返し語られていた、「WindowsはAI技術を民主化しAIアプリの開発をエンカレッジするプラットフォームなんだ、MSが全部サポートするんだ、だからお前らはどんどん作れ」、というメッセージには知らず胸が熱くなるものがありました。それはそれとして、現地参加の特権ということで Microsoft Build の Lab セッションにもいくつか参加してみたところ、運営面が予想とだいぶ違ってて面白かったので、会場の雰囲気を共有したいと思います。

# Labs
Lab はいわゆるハンズオン型のセッションで、チューターの指導を受けながら各自がインストラクションに従って課題を突破することを目指します。部屋には下記の写真のように、端末がすでに用意されているので、自前のラップトップを持参する必要はありませんでした。

![P_20230525_090746.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3361516/9f4b7bd5-fa21-5128-e712-09a7b128689c.jpeg)


「ここから始めましょう」的なボタンをクリックすると Lab 用の仮想環境が起動し、仮想環境内では課題に応じたセットアップが既に済んだ状態になっているので、そこから画面右側に表示されるインストラクションに従って課題を進めていくことになります。仮想環境は閉じれば消えるので、手順をミスって詰まったときは一旦閉じて最初からクリーンにやり直すこともできます。

![P_20230525_091112.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3361516/cbfad309-e9f3-c6a8-4f97-b7c78966d72a.jpeg)


私は [PWA](https://build.microsoft.com/en-US/sessions/e9d400c5-cb64-4ba2-a949-72258436190f) 、[CloudDevelopment](https://build.microsoft.com/en-US/sessions/0da2f92e-993a-46f7-b0f1-4fa39b0e0010) 、 [TeamsApp](https://build.microsoft.com/en-US/sessions/feb547f4-5787-4005-8fb2-f909c089ac46) の3個に参加しました。上述のとおり環境と骨子は既にできていて、そこからインストラクションに従ってコードを少しずつ改変していくようなイメージで、まあ言ってしまえばそう大したことはやらないのですが、そうは言ってもハンズオンで 1h というのはいかにも短く、かなりの駆け足で進んでいきます。講師の方もそれぞれ一家言あって、単に手順をなぞるだけではなく、講座のメリットというか、それぞれの技術がどう有益で、何を学んでほしくて、それがあなたをどうエンパワーするのか、みたいなところまで熱く語ってくださるのですが、それでますます時間が足りないというか、一部では片耳で聞きながら片目でハンズオンを進めるみたいな形にもなり、ちょっと消化不良に感じた部分もありました。私の場合は「For Beginners」と謳われていたはずの PWA の Lab すら最後まで行けませんでした（汗）。ただそこは講師の方もある意味、織り込み済みではあったようで、私が参加した３つのLabはどれも github のリンクを持ち帰れるようになっていて（下記）、終わらなかった人も後日自宅で継続できるよう配慮されていました。ただし画面右側に表示されるインストラクションは持ち帰れず、 Lab 中は無料で使えた Azure Subscription も自己負担することにはなります。

https://github.com/pwa-builder/pwa-starter

https://github.com/Azure-Samples/PetSpotR

https://github.com/microsoft/teams-ai


# おわりに
あっという間に明日は最終日、Day3 です。帰国便の都合上、私からの速報はこれが最後になりますが、QiitaのトレンドにはMSBuildの新情報が ([link](https://qiita.com/yangjiayi/items/605d9679e1e35d391a1a)) 続々と ([link](https://qiita.com/nohanaga/items/c3e92c9adeca7c84a8d5)) 上がって ([link](https://qiita.com/kumukai/items/3d4ff6a00aa05c3a7e71)) きて ([link](https://qiita.com/kane_sss/items/9abac6192c608282ca66)) います ([link](https://qiita.com/yugoes1021/items/9427f70fdab5a73e351a)) ので、皆様ぜひ引き続きウォッチしてみてください！
Ruby silver 模擬問題解説1

初投稿です！！！
アウトプットをすべく、Ruby silverの模擬問題を抜粋して解説をしていきます。

下記コードの出力を4択から選ぶ問題になっています。

```
Curry = "udon"
Curry << "rice"
p Curry
```
1.警告は出ず、”udonrice”と出力される。
2.Curryは定数のため、”udon”と出力される。
3.Curryは定数のため警告が出るが、”rice”と出力される。
4.Curryは定数のため警告が出るが、”udonrice”と出力される


まず、1行目ですが"udon"という文字列をCurryという変数に代入しています。
```
Curry = "udon"
```
2行目で、Curryという変数に"rice"という文字列を追加しています。　<<　記法は末尾に追加をする意味をしてます。
```
Curry << "rice"
```
最終行で、Curryという変数を出力するように指示してます。
```
p Curry
```
苦手なコードを言語化する練習にはとてもよい！！！
Azureで3層アーキテクチャの環境構築やってみた

# はじめに
AzureでLaravelシステムの環境構築を行ったので、その手順を紹介していきます

# 環境構築のゴール
環境構築のゴールは以下のように設定しました。

* 仮想マシンを1つ用意し、Webサーバ + PHPの環境を構築
* マネージドなデータベースを1つ用意する
* WebサーバにHTTPリクエストを投げ、データベースの情報を返す

# アーキテクチャの選定
上記ゴールを実現するためのアーキテクチャを選定します。
| 構成要素 | 製品名 | 選定理由 |
| :-- | :-- | :-- |
| OS | Debian | Azureで無料で利用可能なメジャーOSのため選定しました |
| Webサーバ | Apache | PHPを利用したシステム構築が楽なため(Apache自体にPHPの実行環境がビルドインされているため)選定しました |
| DB | PostgreSQL | PHPのビルドインモジュールに含まれているDBの1つのため選定しました |

# Azureでのシステム構成
以上から構築する要素は以下となりました。
- アプリケーションサーバ
    - Debian
    - Apache
    - PHPの実行環境(Laravel)
- DBサーバ
    - PostgreSQL

# 構築作業
別記事にまとめましたので、以下をご覧ください。

- #### [Microsoft AzureでAP+DB環境を構築する](https://qiita.com/ot-kazuo-watanabe/items/4305054d2b6fb4ba90cc)
- #### [Debian に Apache＋PHP Laravel＋Node.js 環境を構築する](https://qiita.com/ot-mikami/items/57c7c3d22b336f0302a0)
- #### 【Laravel】インストールからBladeでDB情報を表示するまで(作成中)

# 終わりに
Azureを用いた環境構築は初めてでしたが、AWSの知識や構成要素を理解していると、比較的構築しやすい印象でした。
Nuxt.jsでオブジェクトのプロパティを動的に参照する方法

# はじめに
日々の開発の中で、JavaScriptやNuxt.jsでオブジェクトのプロパティを動的に参照するという状況に遭遇することはよくある。この記事では、その一例として、数値型のキーを持つオブジェクトから特定のプロパティを動的に取得しようとした際に遭遇した問題とその解決策を共有する。

# 問題の詳細
例えば、以下のようなオブジェクトがある。

```javascript:javascript
let items = {
  units: { "1": "cm", "2": "m" }
};
```

また、以下のようなフォームデータがあるとする。

```javascript:javascript
let formData = {
  unit: 1  // または 2
};
```
ここで、Nuxt.jsのテンプレートで {{ items.units[formData.unit] }} のように、値を参照して表示しようとした時、「cm」の表示を期待したが、されなかった。

### 問題解析
JavaScriptでは、オブジェクトのキーは文字列として扱われる。しかし、数値をキーとして使用すると、JavaScriptが内部で数値を文字列に自動的に変換する。このため、私のコードでは数値型の formData.unit が文字列型のキーを持つ items.units オブジェクトに対して正しく参照されなかったようだ。

### 解決策
ここで、Number() を使用して formData.unit を明示的に数値に変換し、その後プロパティにアクセスしてみた。

```html:html
{{ items.units[Number(formData.unit)] }}
```
このコードでは、formData.capacityUnit を明示的に数値に変換してからプロパティへのアクセスを行っている。

### まとめ
この記事では、JavaScriptとNuxt.jsで数値型のキーを持つオブジェクトのプロパティを動的に参照する際の問題とその解決策について解説した。暗黙の型変換が期待通りに動作しない場合、明示的な型変換を試みることで問題が解決する可能性がある。これはJavaScriptの動的型付けによる特性を理解し、適切に対応するための一例かなと思う。

・JavaScriptのオブジェクトのキーは文字列として扱われる。
・数値をキーとして使用すると、JavaScriptは内部で自動的に文字列に変換する。
・暗黙の型変換は常に期待通りの結果を生むわけではない。
・明示的な型変換を行うことで問題を解決することができる。
ChatGPTのプラグイン「Show Me」を実際に使ってみて感激したのでまとめました

## Show Meとは

Show Meは、入力した指示をもとに円グラフやガントチャートなどの図を作成できるプラグインです。
ChatGPT上でグラフやチャートの指示を行うことで自動でグラフを作成してくれます。

基本形
フローチャート
シーケンス図
ガントチャート
クラス図
Gitグラフ
ER図
ユーザージャーニー図
ステータス図
円グラフ
要件図

現在対応しているのは上記のようで、さまざまな図の作成を自動で行えるのでエンジニアに限らず、ビジネスマンにとってとても助けられるプラグインです。

今回は、エンジニアの私が今後便利そう〜〜と思った使い方がありましたのでご共有します。


## Show Meの活用方法①コードの図解
こちらは、別途WebPilotというプラグインも必要なのですが、githubのコードから自動でコードの構成図が作成できるのが驚きました。
![スクリーンショット 2023-05-25 13.23.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3456084/bfed7759-2648-29c2-dc86-62947d4b02a4.png)

## Show Meの活用方法②フローチャートの作成

システム開発のフローチャートを作成してください。と指示を出すと以下のようにテキスト等での説明を行ってくれた後にフローチャートを作成してくれます。
![スクリーンショット 2023-05-25 12.55.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3456084/5cfd96f8-740d-c1c1-cdb7-531c2840d69c.png)
![スクリーンショット 2023-05-25 12.56.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3456084/2d5f42cb-e9f7-cc77-bd9e-0e3a93fd19df.png)

まだまだ精度が甘い部分もありますが、システムの種類に応じてチャートを作成してくれるので活用できそうだなと思っています。

## Show Meの活用方法③相関図の作成

Show Meは、フローチャートだけではなく相関図などを作成することも可能です。
試しに名探偵コナンの主要なキャラクターの相関図作成を行ってみると以下のような相関図が自動生成されます。
![スクリーンショット 2023-05-25 12.58.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3456084/32e7d7c1-d0b5-f9bb-e8e1-98202735ad7e.png)

開発時の活用方法としては、プロジェクトの体制図などを事前にしっかりと把握しておきたい際などは有効的かもしれません。
作成した相関図は、ウェブ上で編集もできるのでとても便利でした。
[![Image from Gyazo](https://i.gyazo.com/e194c0997e17601e2a6ae6d65f94aad3.gif)](https://gyazo.com/e194c0997e17601e2a6ae6d65f94aad3)
▼こちらの記事で詳しく記載されているので詳細は割愛します。
https://qiita.com/ot12/items/6b6b15c71c7676a683d5


## Show Meの活用方法④ガントチャートの作成

Show Meで助けられたことにガントチャート作成がありました。
![スクリーンショット 2023-05-25 13.32.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3456084/2273a3de-b3e8-6e03-8136-ce5d3c727fc2.png)

オンラインで編集できるので急ぎで流れが必要な際に試しに使ってみて助けられています。。。
![スクリーンショット 2023-05-25 13.34.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3456084/c9f2cc35-045e-5fa8-de64-881b769e886f.png)


今回は、実際に活用してみた部分のみをご紹介しました。
今後も活用していきながら紹介できればと思います〜〜！

最後に弊社ではエンジニア向けのプラットフォームを運営しているのでぜひ活用してみてください〜〜！
https://i-ssue.com/users/signup
vbsの作法 その69

# 概要
vbsの作法、調べてみた。
練習問題、やってみた。

# 練習問題
wgetを実装せよ。

# サンプルコード

```


Function Wget(url)
	Set WshShell = CreateObject("WScript.Shell")
	FileName = Mid(url, InStrRev(url, "/") + 1)
	SamAgent = "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)"
	hts = ""
	Set objHTTP = CreateObject("Microsoft.XMLHTTP")
	objHTTP.Open "GET", url, False
	objHTTP.SetRequestHeader "User-Agent", SamAgent
	objHTTP.Send
	Set objStream = CreateObject("ADODB.Stream")
	objStream.Type = 1
	objStream.Open
	objStream.Write objHTTP.responseBody
	objStream.Position = 0
	objStream.Type = 2
	objStream.Charset = "Shift_JIS"
	http_source = objStream.ReadText
	objStream.Close
	hts = hts & http_source & vbCrLf
	Set fs = CreateObject("Scripting.FileSystemObject")
	FileName = fs.BuildPath(WshShell.SpecialFolders("Desktop"), FileName)
	MsgBox FileName
	Set file = fs.CreateTextFile(FileName, True)
	file.Write(hts)
	file.Close
	MsgBox "ok"
	Set file = Nothing
	Set fs = Nothing
	Set objHTTP = Nothing
	Set objStream = Nothing
End Function

Wget("https://resolvenet.org/modules/contrib/webform/tests/files/sample.json")


```


以上。
vbsの作法 その68

# 概要
vbsの作法、調べてみた。
練習問題、やってみた。

# 練習問題
qiitaページをスクレイピングせよ。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/d8f1468b-611e-171c-100c-34bc0d2c956d.png)


# サンプルコード

```

Function Scraping(url)
	SamAgent = "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)"
	Set objHTTP = CreateObject("Microsoft.XMLHTTP")
	objHTTP.Open "GET", url, False
	objHTTP.SetRequestHeader "User-Agent", SamAgent
	objHTTP.Send
	Set objStream = CreateObject("ADODB.Stream")
	objStream.Type = 1
	objStream.Open
	objStream.Write objHTTP.responseBody
	objStream.Position = 0
	objStream.Type = 2
	objStream.Charset = "utf-8"
	http_source = objStream.ReadText
	objStream.Close
	'MsgBox http_source
	Set re = New RegExp
	re.Ignorecase = False
	re.Global = True
	re.Pattern = "<script[^>]*>[^<]+"
	res = re.Replace(http_source, "<***>")
	'MsgBox res
	re.Pattern = "<(""[^""]*""|'[^']*'|[^'"">])*>"
	res = re.Replace(res, "")
	MsgBox res
	Set re = Nothing
	Set objHTTP = Nothing
	Set objStream = Nothing
End Function

Scraping("https://blog.qiita.com/")




```


以上。
Docker + React + TypeScript の 環境構築方法

# はじめに
### DockerでReactとTypeScriptの環境構築を行ってみました。

# Docker各種ファイル作成
### １．Dockerfile
:::note info
**Dockerfile：** Dockerコンテナのビルド時や起動時の作業を一つの設定ファイルにまとめたもの
:::
#### プロジェクトフォルダを作成し、その中にDockerfileを作成し、内容を以下にする。
```Dockerfile
FROM node:18.16.0-alpine
WORKDIR /usr/src/app
```
:::note info
**FROM：** 元となるイメージ
　　　コロンの後にタグを指定
　　　タグなしの場合、latest(最新)が選択される。

**WORKDIR：** 命令を実行するディレクトリを指定
:::
### ２．docker-compose.yml
:::note info
**docker-compose.yml：** Dockerアプリケーションのためのツールで、
　　　　　　　　　　複数のコンテナを定義し実行するためのYAML（ヤムル）ファイル。
　　　　　　　　　　Docker-composeを使って、Dockerコンテナの起動や
　　　　　　　　　　コンテナ起動時の設定などを行うことができます。
:::
#### プロジェクトフォルダの中にdocker-compose.ymlを作成し、内容を以下にする。
```docker-compose.yml
version: '3'
services:
  frontend:
    build: .
    environment:
      - NODE_ENV=development
    volumes:
      - ./:/usr/src/app
    command: sh -c 'cd todo-react && yarn start'
    ports:
      - 8000:3000
    tty: true
```
**version：** docker-composeで使用するバージョンを定義する
　　　　バージョンによって,docker-compose.ymlの書き方が変わる

**service：** アプリケーションを動かすためのそれぞれの要素のこと
　　　　frontend(services名は自由に決めていい)はアプリケーションを動かす
　　　　一つの要素であると定義される。

**build：** イメージの構成をDockerfileに記述して、自動でビルドしてベースイメージに指定する。
　　　buildには、Dockerfileのファイルパスを指定する。
　　　今回は同一フォルダ内にDockerfileが存在するため　. 　となる。

**environment：** コンテナ内の環境変数を指定する。
　　　　　　　Node.jsのグローバル変数: 開発用途なのでdevelopmentを指定します。

**volumes：** コンテナにボリュームをマウントするときにマウントする設定ファイルのパスを指定する。
　　　　ホスト側でマウントするパスを指定するには、
　　　　「ホストのディレクトリパス：コンテナのディレクトリパス」を指定する。

**command：** コンテナ内で動かすコマンドを指定する。
　　　　今回はシェルスクリプトでtodo-reactフォルダに移動してyarn startコマンドを実行します。
　　　　yarn startコマンドは、
　　　　Reactアプリケーションを開始するために必要なすべての依存関係をインストールし
　　　　ローカルサーバーを起動します。

**ports:** コンテナが公開するポートは、portsで指定する。
　　　「ホストマシンのポート番号:コンテナのポート番号」で指定します。
　　　今回はホスト8000：コンテナ3000となります。

**tty：** 仮想端末を配置するコマンドで、コンテナが正常終了するのを防ぐことができます。
　　true時、コンテナが起動し続けるようになります。
# React＋TypeScriptでプロジェクトを作成
以下のコマンドをターミナルで実行することでReactプロジェクトが出来上がります。
```
docker-compose run --rm frontend sh -c 'npx create-react-app プロジェクト名 --template typescript'
```
:::note info
プロジェクト名は任意でOK（例　todo-react）
--template typescriptを付けることでtypeScriptが使えるようになります。
:::
# イメージの構築
Dockerイメージを構築するためのコマンド
```
docker-compose build
```
:::note alert
build コマンドは、イメージを構築します。コンテナは作成しません。
:::
# コンテナの作成と起動
```
docker-compose up –d
```
:::note info
up コマンドは、キャッシュがある場合は
それを使ってイメージの構築から、コンテナの構築・起動まで行います。
-d　をつけることでバックグラウンドで実行します。
:::
# 停止
```
docker-compose stop
```
# ローカルホストに接続
コンテナが起動している状態で、Webブラウザを開いて「 http://localhost:8000/ 」にアクセスし
Reactの初期画面が表示されれば完了です。

:::note info
今回はdocker-compose.yml内のportsでホスト8000：コンテナ3000で指定しているため
localhost:8000になります。
:::

# 一括消去
```
docker-compose down
```
:::note warn
docker-composeで作られた、コンテナ、イメージ、ボリューム、ネットワーク
そして未定義コンテナ、全てを一括消去するコマンドです。
:::

以上になります。
# 最後に
最後まで読んでいただきまして、ありがとうございました。
vbsの作法 その67

# 概要
vbsの作法、調べてみた。
練習問題、やってみた。

# 練習問題
じゃんけんを実装せよ。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/bf13548c-9e4f-376d-4934-fefd22685798.png)

# サンプルコード

```



Dim str
Do While True
	Randomize
	str = "じゃんけん　　0, グー 1, チョキ  2, パー"
	v = InputBox(str , "ジャンケン", "0")
	If v = "" Then
		WScript.Quit
	End If
	a = Cint(v)
	b = Int(Rnd * 3)
	Select Case a
	Case 0
		Select Case b
		Case 0
			str = "グーとグーで、あいこ"
		Case 1
			str = "グーとチョキで、あなたの勝ち"
		Case 2
			str = "グーとパーで、あなたの負け"
		End Select
	Case 1
		Select Case b
		Case 0
			str = "チョキとグーで、あなたの負け"
		Case 1
			str = "チョキとチョキで、あいこ"
		Case 2
			str = "チョキとパーで、あなたの勝ち"
		End Select
	Case 2
		Select Case b
		Case 0
			str = "パーとグーで、あなたの勝ち"
		Case 1
			str = "パーとチョキで、あなたの負け"
		Case 2
			str = "パーとパーで、あいこ"
		End Select
	End Select
	msgbox str
Loop







```

以上。
Windows Server 2022 の構築をコマンド(powershell)で実施する

## 前提
- Windwos Server 2022 Standard で動作確認済み
- 下記内容を.ps1ファイルを作成するなどして、複数サーバで実施することを想定 (構築時間短縮のため)

## PowerShell command

#### Windowsファイアーウォールの無効化

```powershell
# すべてのプロファイルの状態を「無効」にする
netsh advfirewall set allprofiles state off
# すべてのプロファイルの状態を確認する
netsh advfirewall show allprofiles
```
※こちらは、別途ファイアーウォールの導入が前提なので注意

#### IP/DNSサーバの設定
```powershell
# Ethernet0 のIP設定
netsh interface ip set address Ethernet0 static <IP> <MASK> <DefaultGateway>
# Ethernet0 へのDNSサーバの設定
netsh interface ip set dns Ethernet0 static <DNS IP> primary
# Ethernet0 へのDNSサーバの設定 (secondary 必要に応じて)
netsh interface ip add dns Ethernet0 <DNS IP>
# Ethernet0 へのDNSサフィックス設定 (必要に応じて)
Set-DnsClient "Ethernet0" -ConnectionSpecificSuffix <DNS Suffix>
# IP情報を確認する
ipconfig /all
```

#### コンピュータ名の変更
```powershell
# コンピュータ名の変更 (反映にはOS再起動が必要)
Rename-Computer -NewName <新しいコンピュータ名>
# コンピュータ名の確認
(Get-ComputerInfo).CSName
```

#### Administratorユーザのパスワード変更とアカウント追加
```powershell
# Administratorユーザのパスワード変更
net user Administrator <新しいパスワード>
# アカウントの追加
net user <アカウント名> <パスワード> /add /FULLNAME:"<フルネーム>" /COMMENT:"<コメント>"
# 追加したアカウントのパスワード無期限化
wmic useraccount where "Name='<アカウント名>'" set PasswordExpires=FALSE
# 追加したアカウントのAdministratorsグループへの追加
net localgroup Administrators <アカウント名> /add
```

#### Windowsライセンスアクティベート
```powershell
# ライセンスキー登録
cscript C:\Windows\System32\slmgr.vbs /ipk <ライセンスキー>
# ライセンス認証
cscript C:\Windows\System32\slmgr.vbs /ato
```

#### 自動WindowsUpdateの無効化
レジストリを編集する方法であればコマンド化でるが、その場合はグループポリシー上には反映されない。
（グループポリシー上は「未構成」というステータスだが、レジストリ上では「無効」という状態になる）
→ のちのちサーバの現状を把握する上で問題になりそうなので、これはやらないほうが良いと思う。

#### 主要なソフトウェアのインストール
WinGetをインストールして使うと良いみたいですね。ここでは割愛します。
> winget ツールを使用したアプリケーションのインストールと管理
> https://learn.microsoft.com/ja-jp/windows/package-manager/winget/



## 参照
> Windows のコマンド
> https://learn.microsoft.com/ja-jp/windows-server/administration/windows-commands/windows-commands

> PowerShell Module Browser
> https://learn.microsoft.com/en-us/powershell/module/?view=windowsserver2022-ps

> ボリューム ライセンス認証情報を取得するための Slmgr.vbs オプション
> https://learn.microsoft.com/ja-jp/windows-server/get-started/activation-slmgr-vbs-options
シンプル: Mautic アップデート方法 (Ver.4系)


オープンソースマーケティングオートメーションツール Mautic のシンプルなアップデート方法です。

# バックアップ

アップデートを行う前は、かならず、DB とファイルをバックアップし、失敗した際は元に戻せるようにしましょう。

```
## DB を mysqldump
cd [バックアップ保存先]
mysqldump -h [DBホスト名] -u [DBユーザー] --password="[DBパスワード]" --single-transaction --no-tablespaces [DB名前] | gzip > mautic_v2.16.5_$(date +%Y%m%d%H%M%S).sql.gz

## ファイルのバックアップ

tar -cvzf mautic_v2.16.5_$(date +%Y%m%d%H%M%S).tar.gz -C [Mautic ルート] [Mautic ルート]
```

# Mautic アップデート

Mac 標準のアプリ、のターミナルや、TerraTerm などのソフトを使って、SSH にログインし、サーバー上でコマンドを実行しきていきます。

## アップデートのチェック

```
cd [Mautic ルート]
php bin/console mautic:update:find
```


例: 4.4.8 にアップデート可能という表示が出ます

```
% php bin/console mautic:update:find                       
Version 4.4.8 of Mautic is available for download. Please visit https://github.com/mautic/mautic/releases/tag/4.4.8 for more information.
To update, you can run 'php bin/console mautic:update:apply' from the command line.
```

※サーバーによっては、最初の `php` ではなく、`/usr/local/bin/php` などPHPへのフルパスを指定したり、SSH ユーザーではなく、apache/nginx ユーザーとして sudo による実行が必要になる可能性があります。



## アップデートの実行

```
php bin/console mautic:update:apply
```

データベーススキーマ変更をするためにもう一度同じコマンドに「--finish」オプションをつけて実行
します。

```
php bin/console mautic:update:apply --finish
```

しかし、僕の場合は、なぜかエラーがでたので、もう一度、 `mautic:update:apply --finish` を実行したら完了しました。

実際のログは以下の通りです。


```
% php bin/console mautic:update:find                       
Version 4.4.8 of Mautic is available for download. Please visit https://github.com/mautic/mautic/releases/tag/4.4.8 for more information.
To update, you can run 'php bin/console mautic:update:apply' from the command line.
% php bin/console mautic:update:apply

Are you sure you wish to update Mautic to the latest version? y
Step    6 [------>---------------------] Clearing the cache

<warning>IMPORTANT: Run the same command again with --finish. For example 'php bin/console mautic:update:apply --finish'</warning>
katz@Eden git.mautic % php bin/console mautic:update:apply --finish
Step    1 [>---------------------------] Migrating database schema...

An error occurred while updating the database. Check log for more details.
% php bin/console mautic:update:apply --finish
Step    2 [============================] Success! You are now running version 4.4.8 of Mautic.
```

これで、Mautic のアップデートは完了です。



関連記事

- [Mautic 2.x から 4 まで一気にアップデート](https://qiita.com/katzueno/items/cb5311b61c6586a65d91)
[python] urwidで表示内容を単位時間で更新する方法

## 経緯
PythonでTUIアプリケーションを作る際に、urwidでメインループを開始後に一定時間経過する度に画面の表示内容を更新する処理を実装しようとして、一瞬詰まった＋日本語の情報が殆どなかった　ので備忘録代わりに投稿。

## 実装方法

RAMの使用率を毎秒更新して表示するプログラムを例に示す。

```python
import urwid

def update(main_loop_obj,user_data):
    mem = psutil.virtual_memory() # get RAM infomation
    txt.set_text(f'{mem.percent}') # set new text to txt 
    loop.set_alarm_in(1,refresh) 

txt = urwid.Text('text', align='center')

fill = urwid.Filler(txt, 'top')
loop = urwid.MainLoop(fill)
loop.set_alarm_in(1,update) 
loop.run()
```

urwid.MainLoop.set_alarm_in()を用いる。
> set_alarm_in( sec , callback , user_data=None )
　Schedule an alarm at tm time that will call callback from the within the run() function. Returns 
　a handle that may be passed to remove_alarm().
>>Parameters: 
tm (float) – time to call callback e.g. time.time() + 5
callback (callable) – function to call with two parameters: this main loop object and user_dataa

set_alarm_in()で指定秒数後にコールバック関数を呼び出すことが出来る。

loop.set_alarm_inで時間毎に処理したい関数を指定して呼び出し、その関数内で自分自身をまた指定して呼び出すことで、ループが続く限り指定秒数毎に関数が無限に実行される。
関数内で、urwid.Text.set_text()を用いてテキストの内容を更新している。


## 参考
- [MainLoop and Event Loops &#8212; Urwid 2.1.2](https://urwid.org/reference/main_loop.html)
PayPayの利用履歴の内訳を集計するアプリをリリースした

`履歴出力 for PayPay`アプリで出力した履歴を集計できます。



https://play.google.com/store/apps/details?id=app.tsumuchan.exporter&hl=ja&gl=US

選択した項目の合計を表示できます。無駄な出費がないか確認しましょう

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435735/688989b3-29cc-1b8d-a6b8-371fc8d3523c.png)


<p class="codepen" data-height="720" data-default-tab="result" data-slug-hash="xxyBwPy" data-user="04" style="height: 720px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/04/pen/xxyBwPy">
  PayPay Landscape</a> by John Doe (<a href="https://codepen.io/04">@04</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


大画面で表示したい方はこちら
https://codepen.io/04/full/xxyBwPy

ホバーすると店舗名まで確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435735/241611f3-3690-b901-87a4-bd63f3e70fa2.png)
ABC302 - D - Impartial Gift 自己解法

# 問題

https://atcoder.jp/contests/abc302/tasks/abc302_d

# 考察
条件を満たし、かつ価値の和が最大となる贈り物の組み合わせを求めるという問題です。$N,M≦10^5$であることから、すべてのパターンを調べようとしても間に合わないことが予想されます。そこで計算量を落とすことができないか考えていきます。

もし、青木君への贈り物を1つ固定したとき、小さい計算量ですぬけ君への贈り物を決めることができるかを考えてみることにします。固定した青木君の贈り物の価値が$a$だとすると、すぬけ君への贈り物の価値は、$$a-D≦(すぬけ君への贈り物)≦a+D$$を満たす必要があります。
さらに考察を進めやすくするため$$(すぬけ君への贈り物)≦a+D \cdots (\*)$$と条件を緩くした式で考えていきます。なくした不等号については後でつじつまを合わせればいいです。
ところで、すぬけ君への贈り物はできるだけ価値が大きいもののほうが良いはずです。なぜなら求めたいものは価値の和が最大のものであるためです。
ここまでの話から、すぬけ君への贈り物候補は$(\*)$の条件式を満たし、その中で価値が最大のものとなります。これは二分探索を使えば$O(log M)$と小さい計算量で調べることができます。二分探索のアルゴリズムを実装してもよいですが、今回はC++の場合`lower_bound`や`upper_bound`という関数を使用する方法もあります。
二分探索を使ってすぬけ君への贈り物候補を調べました。この後は、緩くした条件のつじつまを合わせるために$$a-D≦(すぬけ君への贈り物)$$を満たしているかも調べましょう。もしすぬけ君への贈り物を調べている間に下記2点のいずれかに当てはまった場合、固定した青木君への贈り物についてはすぬけ君への贈り物として該当するものがないということになります。

- $(\*)$を満たすものが1つもなかった。
- つじつま合わせの条件を満たさない。

これで青木君への贈り物を1つ固定したとき、小さい計算量ですぬけ君の贈り物を決めることができました。あとは青木君の贈り物全てですぬけ君への贈り物を調べてそれぞれの価値の和を比較していきます。そうすると計算量$O(NlogM)$で求めることができます。実行時間制限に十分間に合いそうです。

# 提出コード(コンテスト後)

https://atcoder.jp/contests/abc302/submissions/41678555

ご不明点などがあれば教えていただけると幸いです。
initializeメソッドとは？

initializeメソッド
---
`initialize`と言う名前が付けられたメソッドは特別なメソッドで、オブジェクトが新しく生成されるときに自動的に initialize メソッドが呼び出されます。
~~~initialize1.rb
class Drink
 def initialize   #iniitializeメソッドを定義-----①
  puts "新しいオブジェクト"
 end
end

Drink.new         #initializeメソッドが自動で呼ばれる-----②
#=> 新しいオブジェクト
~~~
①で`initialize`メソッドを定義します。②で`new`メソッドが呼ばれるとオブジェクトが作られますが、その際に`initialize`メソッドが自動で呼ばれます。

インスタンス変数の初期値を設定する
---
initializeメソッドが便利な場面の例として、**「インスタンス変数の初期値を設定する」** があります。
~~~initialize2.rb
class Drink
 def initialize()
  @name = "カフェラテ"  # @newにを代入-----①
 end
 def name
  @name 
 end
end

drink = Drink.new    #classをnewメソッドを使ってインスタンス化----②
puts drink.new       #nameメソッドを呼び出す----③
#=> カフェラテ
~~~
②で`Drink.new`してオブジェクトが作られるときに`initialize`メソッドが呼ばれ、①でインスタンス変数`@name`に"カフェラテ"が代入されます。③で`name`メソッドを呼ぶと、戻り値は①で代入した"カフェラテ"になっています。

 initializeメソッドに引数を渡す
---
先ほどのプログラムで、`Drink`クラスのオブジェクトを作ると`@name`には初期値として”カフェラテ”が代入されるようになりました。では、この初期値を”カフェラテ”以外にも自由に設定するためにはどうしたらいいでしょうか？これは、**`initialize`メソッドに引数を渡せるようにすることで解決できます。**
　
`initialize`メソッドに引数を受け取るように定義して、`new`メソッドを呼び出す時にオブジェクトを渡すと、`initialize`メソッドで引数として受け取ることができます。
~~~initialize3.rb
class Drink
 def initialize(name)     #initializeメソッドに引数を受け取るように定義-----①
  @name = name            #引数で受け取ったオブジェクトを@nameに代入-----②  
 end
 def name
  @name 
 end
end

drink = Drink.new("モカ")  #newメソッドに”モカ”を渡す-----③
puts drink.name            #-----④
#=> モカ
~~~
①で`initialize`メソッドに引数を受け東洋に定義しています。③で`new`メソッドを呼び出し、”モカ”を渡しています。`initialize`メソッドが呼ばれるときに、引数として変数`name`に”モカ”が渡ってきます。②で引数で受け取ったオブジェクトを`@name`へ代入します。④で`@name`変数の中身を表示させると、③で渡した”モカ”になっています。

まとめ
---
<ul>
 <li>initializeメソッドで定義しておくとオブジェクトが作られるときに自動で呼び出されて実行される
　<li>initialzieメソッドに引数を受け取るように定義しておくと、newメソッドを呼び出すときに引数を渡すことで、initializeメソッドで引数として受け取ることができる。

参考
---
[ゼロからわかるRuby超入門]
[initializeメソッドの使い方](https://www.javadrive.jp/ruby/class/index5.html)
【データサイエンス】人工知能

# ０．はじめに																					
大学でデータサイエンスの講義を受講している者です。
あまりにも広範囲な分野であるため"広く浅く"情報整理したいため投稿。
内容のレベルは超入門編、個人的な感情も少し入り混じった備忘録。
（齟齬がある場合はご指摘いただけると助かります。）	
	
#### データサイエンス学習全体像
[【データサイエンス】概要](https://qiita.com/AkihideKato/items/9dbce22bd87a9c8a3989)
[【データサイエンス】人工知能](https://qiita.com/AkihideKato/items/6381dd320ead9f893577)
[【データサイエンス】機械学習](https://qiita.com/AkihideKato/items/1db3312e8038bd75e89b)
[【データサイエンス】ディープラーニング](https://qiita.com/AkihideKato/items/92b0fb83b35ec08c4e02)
[【データサイエンス】分析の分類・確率分布](https://qiita.com/AkihideKato/items/6fdca6e22f03f0b9f17c)
[【データサイエンス】探索的データ分析](https://qiita.com/AkihideKato/items/9485e3f9803b1e8fe785)
[【データサイエンス】統計的検定](https://qiita.com/AkihideKato/items/8ff1b9bada50491b017c)
[【データサイエンス】予測モデリング](https://qiita.com/AkihideKato/items/ce8e697546d0424bea46)
[【データサイエンス】自然言語処理](https://qiita.com/AkihideKato/items/e545f36e268605fce9a6)
[【アルゴリズム】パーセプトロン](https://qiita.com/AkihideKato/items/fc9a8205154fe9b3090f)
[【データサイエンス】機械学習における関数](https://qiita.com/AkihideKato/items/6ec3b59ff581e7e3c4ad)
[【データサイエンス】確率](https://qiita.com/AkihideKato/items/c099772dfca7546a6802)
							
# １．人工知能全体図
普段耳にする "AI" というのが人工知能の事である
大きく分けて3つの分野に分かれている

- **人工知能（AI）**
機械学習を含んでいる
- **機械学習**
AIの一部
- **ディープラーニング**
機械学習の手法の1つ
![スクリーンショット 2023-05-25 122204.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581998/0b5ca2ad-c20a-7581-769b-0431784f3cf1.png)

# ２．人工知能とは
### 2-1.概要
人間の介入なしで処理が可能
AIツールChatGPT：文章作成コード生成など高速で処理しユーザ間との質疑応答が可能
今後のテクノロジー分野発展のキーとなる最も重要な分野

### 2-2.メリット・デメリット
業務効率の向上
検知パターン化処理の自動化による生産性の向上
倫理観問題が目立つ
- ``なんでも自動化ってどうなの勢による意見``
- ``フィリッパ・フット：トロッコ問題``
- ``マサチューセッツ工科大：Moral Machine``

### 2-3.手法
大きく2つの手法から成り立つ分野
- ##### ルールベースの手法
ルール・条件を元に問題解決を行う
シーケンス制御のようなもの

- ##### 機械学習の手法
学習をさせ検証結果から調整をし予測や判断をさせてあげる

### 2-4.分類
AIは2つの種類に分類することができる

- ##### 特化型人工知能
**``弱いAI``**
ひとつの作業に特化したAIのこと
>例：画像認識、音声認識など


- ##### 凡用人工知能
**``強いAI``**
複数の作業を行うAIのこと
指示された情報をもとに自ら考えそれを応用する
ほぼ人間と同じ思考回路
>例：アンドロイド、ドラえもんなど
「技術書」の読書術 を読んで個人的に使っていきたいTips

## はじめに

「技術書」の読書術　という書籍を読んだので個人的に真似したくなった「読書術」を共有したいと思います。

### 書籍のAmazonリンクはこちら:

[https://www.amazon.co.jp/「技術書」の読書術-達人が教える選び方・読み方・情報発信-共有のコツとテクニック-IPUSIRON/dp/4798171549](https://www.amazon.co.jp/%E3%80%8C%E6%8A%80%E8%A1%93%E6%9B%B8%E3%80%8D%E3%81%AE%E8%AA%AD%E6%9B%B8%E8%A1%93-%E9%81%94%E4%BA%BA%E3%81%8C%E6%95%99%E3%81%88%E3%82%8B%E9%81%B8%E3%81%B3%E6%96%B9%E3%83%BB%E8%AA%AD%E3%81%BF%E6%96%B9%E3%83%BB%E6%83%85%E5%A0%B1%E7%99%BA%E4%BF%A1-%E5%85%B1%E6%9C%89%E3%81%AE%E3%82%B3%E3%83%84%E3%81%A8%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF-IPUSIRON/dp/4798171549)

### この書籍を読み始めた理由:

私はエンジニアとして働き始めて2年目になり、自分の技術力にコンプレックスがあります。それを原動力に勉強していますが、より効率的な方法があれば取り入れたいと思ってこの本を手に取りました。

## **使えそうな手法の抜粋**

### **レベル感のあった本を読む**

一般的に良書とされている本も自分のスキルや読書能力にマッチしていなければ効果的に学習できません。

普段phpを使っている私がReactとnext.jsに入門する際に手を取った本が、まさにらこのマッチしていない例でした。本の最初の章はTypeScriptやReactの基礎から説明されていたので十分入門書といて勉強できると思っていましたが、全くフロントエンド知識がない私にはなかなか理解が進まず、途中で読むのを諦めたことがあります。

理解できるレベル感まで下げて(私の場合はTypeScriptの基礎から)取り組むべきだったということでしょう。余計な時間を使わないように「レベル感のあった本を読む」は実践するべき方法だと思いました。

### 本を読むときに価値を考える

本を読むためにかかる時間を考えて自給換算のような発想を取り入れる。例えばレベル感が合わなくて時間がかかりすぎる本を読むことや逆に今の自分にとっては簡単すぎる場合がある。

難しくて時間がかかりすぎるようなら今の自分には早いと判断して時間をおいてから読み直すのもあり。

### 同じ本を3回読む

1回目は目でなぞる。このときに自分が今読むべき本か考える。レベル感があっているか？など。

2回目は手を動かしてコードを実行して動くことを確かめる。動かなかったら自分で調べて試行錯誤する。

3回目は要点をノートなどに整理する。時間がかかるのでまとめるだけの価値があるかはよく考えること。なんでもかんでもまとめて時間をかければいいわけではない。

### 毎年少なくとも1つのプログラミング言語を習得する

達人プログラマーでも紹介されている。

似ている言語を学べばプログラミングの基本的な考え方が理解でき、そのうえで言語間の違いを考えることができる。

PHPやRubyのようなインタプリタ型のものやJavaのようなオブジェクト指向型など

実務レベルではなくてもかまわない。考え方の違いを知ることが大事。

### 昔読み終えた本の再読

ほんの内容を自分なりに再構成できるようになる。あまり時間がかからない。成長が実感できる。

### 読書記録をとる

アプリなど手段は何でもいいが、記録をとることが重要。

進捗の数値ができ、目標設定にもいい影響がでる。

### 技術習得におすすめの読書法

- 限定的な対象を絞りこむ
- 関連する技術書を20冊以上読む
- 再読を基本とする
- アウトプットまでやる

## 最後に

有名な本のようで、私以外にも様々な方が記事を書かれていらっしゃいます。違う視点があって面白いです。

https://qiita.com/Suntory_N_Water/items/3e860755360a3ae42f95

https://qiita.com/sugeta10/items/6ba136f67a2264d7ee03
Jaxrs 

●jaxrs-cxf
Apache CXFを利用したサーバー側の言語でJavaを使用しています。REST（REpresentational State Transfer）を実装しRESTfulなWebサービスを構築するためのオープンソース・フレームワークです。JAX-RSスタイルのサービスを作成し、HTTPを介してXMLやJSONといった形式の汎用データ言語を使ってスマートなクライアントと間でデータを交換できます。

●jaxrs-cxf-cdi
CDI（Contexts and Dependency Injection）をサポートする形式のサーバー側の言語で、Java EEの仕様を採用します。CDIはインターネットアプリケーションの状態を管理するための仕組みを提供します。これらの仕組みを利用して、廃れたサービスやステートレスなサービスからのデータのやり取りを行うことができます。

●jaxrs-cxf-extended
JAX-RSを拡張した形式のサーバー側の言語で、Apache CXFを利用しています。Webサービス開発を行う場合、この言語を利用することにより、利用対象となるスマートなクライアントとのデータをXMLやJSONといった形式の汎用データ言語を用いて交換できます。

●jaxrs-jersey
Jerseyを利用したサーバー側の言語です。JAX-RSをベースとしたサービスの作成を支援するライブラリであり、RESTFulなWebアプリケーションを実行できます。HTTPを介してClientからXMLやJSONを受け取ってデータを取り扱うことができます。

●jaxrs-resteasy
RedHat JBoss製のオープンソース・フレームワークであるRESTEasyを利用したサーバー側の言語です。Apitestなどのモジュールを採用し、RESTFulなWebアプリケーション開発を支援します。HTTPを介してClientからJSONやXMLなどの汎用データ言語を受け取り処理することができます。

●jaxrs-resteasy-eap
RedHat JBoss Enterprise Application Platform（EAP）を利用したサーバー側の言語で、RESTEasyを採用しています。RESTEasyを利用することにより、RESTFulなWebアプリケーション開発を行うことが可能です。HTTPを介してXMLやJSONなどの汎用データ言語を受け取り処理することができます。

●jaxrs-spec
JAX-RSの公式規格をサポートするサーバー側の言語で、Javaを使用しています。RESTは、Webアプリケーションを表現するためのアプローチであり、RESTfulなWebサービスを実装するためのJAX-RSスタイルのサーブレットを作成することができます。HTTPを介してXMLやJSONなどなどの汎用データ言語を受け取り処理することができます。
【Docker】macOSにDocker Desktopをインストールする方法

システムの開発環境の構築にも使われることがあるDocker Desktopのインストール方法について記載します。

なお正確な情報や詳細な情報は[公式ドキュメント](https://docs.docker.com/)も参照してください。

# 環境

このページの作業は、以下の環境で確認しました。

- MacBook Air (M1, 2020)

- macOS Ventura

- Docker Desktop 4.19.0

# インストール手順

1. [公式サイト](https://www.docker.com/)からDocker Desktopをダウンロードします。

   私の使用しているMacはM1チップが搭載されているため`Apple Chip`からダウンロードしました。

   ![docker-download.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327708/73b5cc60-34c8-3368-6ec6-440ad57ed9db.png)

2. ダウンロードした`Docker.dmg`ファイルを開きます。

   ![docker-install-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327708/707bd5fc-53d2-3079-1be8-b7af2216b49f.png)

3. `Docker.app`ファイルを`Applications`にドラッグ＆ドロップします。

   ![docker-install-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327708/160c448a-3e69-af6b-1983-074fac84413e.png)

4. アプリケーションフォルダから`Docker.app`を起動します。

   ![applications-docker.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327708/4e9199c8-c0e6-5e68-3ac2-e9f712d33755.png)

5. 初回は開いてよいか聞かれるので問題ない場合は`開く`で開きます。

   ![launced-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327708/7059b601-bf78-3933-85f2-d35a2c939e58.png)

6. 利用規約の確認が表示されるのでよく読み、問題ない場合は`Accept`で許諾します。

   記載時点では、個人利用や教育、非営利なオープンソースプロジェクト、スモールビジネスなどは無料となっていますが、そうでない場合支払いが必要になるようです。

   仕事で使う場合は、システム管理者などに確認を取り、個人判断で使用することはしないことをおすすめします。

   ![docker-terms.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327708/c9367e03-d256-7f78-84e0-f5dfb9a649f7.png)

7. ここではおすすめの設定を使用し設定を完了します。

   ![finish-setting.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327708/79dfb4ff-dba7-9ffb-bd8a-85b3410934a0.png)

8. 認証を求められるので問題なければ認証します。（以下はTouch ID使用した場合）

   ![finish-setting-auth.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327708/a7a451f3-b446-4238-6b6e-be8abf11de60.png)

9. アプリが起動されます。役割や用途を聞かれるので回答するか、`Skip`で完了させます。

   ![docker-q.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327708/41b03d5b-f510-022c-9e7b-f96adde2c226.png)

10. 以下の画面になり使用可能になります。

    ![docker-app.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327708/ae71809d-8e24-9ecc-e228-f2302f2e364d.png)

    また、設定の過程でバックグラウンド項目の通知が表示されます。

    ![notification-docker.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327708/4f0ffbb9-1ea5-4abd-d9e3-c527423ca946.png)

11. 動作状況の確認をします。

    正常に起動している場合はメニューバーに以下のようなアイコンが表示されます。

    ![docker-menubar-icon.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327708/93b787c6-e095-023b-36c1-2e1588669736.png)

    またターミナルからも`docker`コマンドが使用可能になっています。`ターミナル.app`などの使用しているターミナルアプリを起動して確認できます。

    ```sh
    $ docker --version
    Docker version 23.0.5, build bc4487a
    ```
いにしえのテンプレートエンジンを処した話

# はじめに

弊社のとあるシステムでは(超)マイナーテンプレートエンジンを使って開発を行っていたのだが、

* 機能がとにかく少ない
* ドキュメントがほぼ無い
* バグがそこかしこに埋まっている
* 拡張性に乏しい

などの様々な問題を抱えていたため、数か月間かけてTwigへのリプレイスを行った。

特殊過ぎてどこにも需要は無さそうだけど、万一こんな謎作業に従事することになった人がいたら少しでも参考になればと思う。

元のテンプレートエンジンはDjangoの[Template](https://docs.djangoproject.com/ja/2.0/topics/templates/)を参考に作られていたので、本記事では勝手にTELD（Template engine like Django's one）と呼称する。[^1]

[^1]: OSSではあるが、こんな記事なので名前を出す勇気が出なかった。

# 実際にやったこと

一度のリリースで完全に移行するのは非常にデメリットが大きかった[^2]ため、
以下のように手順を細かく分けて作業を行った。

[^2]: 移行完了まで他メンバーが一切リリースできなくなる、万一なにか対応漏れがあったとしても気づくことが困難。等

1. TELDとTwigの相違点調査
1. TELDの書式をTwigに寄せる
1. 【TELDにあってTwigに無い機能】をTELDから削減
1. 【両方にあるけど微妙に挙動が違う機能】についてTELDを修正
1. 【TELDにあってTwigに無い機能】をTwig拡張として実装
1. TELDとTwigをプロダクト環境で同時に動かして差分チェック
1. プロダクト環境をTwigへ完全に切り替え

TELDを修正する場合、万全を期すため以下のようにさらに細かく段階を踏んで作業を行った。

1. TELDをTwigと同じ書き方で動くようにする
1. TELD本来の書き方を非推奨化（ログを出力させる）してリリース
1. Twigの書き方でのみ動くように修正して再度リリース

ゆえにリプレイス完了までに実際は10回以上リリースを行っている。

## 1. TELDとTwigの相違点調査

DjangoのTemplateとTwigが微妙に似ているおかげで、タグや変数の基本的な書き方については問題なかった。[^3]
[^3]: というか一番差が少ないであろうTwigをあえて選んだというのが正確。

ただやはり完全に一緒ということは無く、以下のように細かい部分で違いが多数あった。

| 対象項目 | TELD | Twig |
|---|---|---|
| フィルタ引数の書式 | `{{ my_date\|date:"Y-m-d" }}` | `{{ my_date\|date("Y-m-d") }}` |
| 不正なフィルタの扱い<br>例) `{{ var\|\|escape }}` | なぜか動く（無視される） | エラーになる |
| 変数名として使える文字 | `-`や`~`などの記号も使える | `-`や`~`は演算子として解釈される |
| フィルタ名称<br>例) URLエンコード | urlencode | url_encode |
| フィルタ挙動<br>例) `{{ 20230102\|date("Y/m/d") }}` | 人間的な解釈（`2023年1月2日`） | UNIXタイムスタンプとして解釈 |
| if系タグの種類 | if, ifequal, ifnotequal等 | ifのみ |
| forタグ内のループ変数 | forloop.counter等 | loop.index等 |
| コメントアウト方法 | `{# ~ #}`と`{% comment %}~{% endcomment %}` | `{# ~ #}`のみ |
| タグ直後の改行文字の扱い | 削除されない | 削除される[^4] |
| includeタグの参照パス | includeタグが記載されたテンプレートからの相対パス | ルートパスを基準とした絶対パス |

[^4]: scriptタグ（JavaScript）内の改行って大事だよね……。

## 2. TELDの書式をTwigに寄せる

`フィルタ引数の書式`や`変数名として使える文字`等の差異はTwigの拡張で対応できないため、
Twig同様の書式でも動くようにTELDを修正し、テンプレート内の該当箇所は正規表現で一括置換した。

ようするに力業で解決。

## 3. 【TELDにあってTwigに無い機能】をTELDから削減

【TELDにあってTwigに無い機能】は、テンプレート内での使用頻度によって対応を分けた。

* テンプレート内で全く使われていないタグ、フィルタ、関数
→TELDから削除し、新規利用を抑止

* テンプレート内で少しだけ使われているタグ、フィルタ、関数
→もし本当に必要ならTwigと同じ書き方ができるようにTELDを修正。無くても何とかなるなら削除
例）ifforwardmatchとかいう謎タグを`if ~ starts with`に置き換えた、等

* テンプレート内で多数使われているタグ、フィルタ、関数
→Twigの拡張で対応することにしたので後述
例）ifequalタグ、commentタグ等

## 4. 【両方にあるけど微妙に挙動が違う機能】についてTELDを修正

* `forタグ内のループ変数`/`フィルタ名称`の差異
→Twigと同じ書き方ができるようTELDを修正し、テンプレート内の該当箇所を一括置換

* `フィルタ挙動`の差異
→問題となるような使い方をしていたらログを出すように修正。該当箇所が見つかったら適宜修正

* `includeタグの参照パス`の差異
→こちらもTwigの拡張で対応することにしたので後述

## 5. 【TELDにあってTwigに無い機能】をTwig拡張として実装

* ifequalタグ、ifnotequalタグ等
→組み込みのIfTokenParserをほぼコピペして専用のTokenParserを実装

* commentタグ
→本来ならLexerで何とかすべきなのかもしれないが、TokenParserとして無理やり実装

* 相対パス対応のincludeタグ
→専用のTokenParser、Node、Loaderを実装して無理やり実現

## 6. TELDとTwigをプロダクト環境で同時に動かして差分チェック

TELDの裏側でTwigによるレンダリングも行えるように魔改造を施し、

* レンダリング結果に差分があったらログ出力
* いずれかがエラーになった場合はもう片方のレンダリング結果を表示

とすることで、普通の調査では分からなかった細かい違いをあぶり出した。

TELDのforタグにarray以外を渡すと勝手にarrayでラップしてくれる（文字列とかもループできる）仕様になってたけど、こんなの実際に差分取らなきゃ気付けなるわけないよね。

## 7. プロダクト環境をTwigへ完全に切り替え

TELDの実行関数をTwigの呼び出しにそっくり挿げ替えて終わり！
今のところ特にエラーもお問い合わせも来ていないのでセーフ！！

# おわりに

Twigになってコーディングが格段にやりやすくなったと思うので、今はがんばった自分をほめてあげたい。
週一でPython勉強会やってみる⑥

前回の続き

https://qiita.com/Waddy675/items/053a6c85bc5a70c55897

週一と言ったな。あれは嘘だ。
人が集まらなかったので先週は流局しました。
裏でLambdaをポチポチしながら可能性を探ってました。
CSSとかJSを直接持ってくるのはAPIGWとLambdaで作れないんですかね・・・
CSSとして認識されてないor読み込みタイミングが合ってないのかなという感じでしたが。
開発者モードにしてCSS内の適当な箇所でエンター押すと反映されるという。

## エクセルを作る
教科書には今回利用するライブラリのインストールからやっているが、我々はColaboratoryを使うので割愛。
openpyxlというライブラリを使って、まずはA1セルに「hello」を入力しエクセルを保存する。

```py
import openpyxl as excel

book = excel.Workbook()

sheet = book.active

sheet["A1"] = "hello"

book.save("ばなな.xlsx")
```
簡単にできた。
前回はGAS勉強会をしていたこともあり、エクセルの中の、シートの中のセルという関係性はすんなり理解できていた様子。

## エクセルを読み込む/書き込む
エクセルがある前提なので、対象のエクセルがあるかどうかは別途確認する必要がある。
セルの取得方法もセル名を直接入力する方法や、行と列で指定する方法がある。
対象セルのvalueに設定してbookをsaveすれば完成。
セルのcoordinateでセル名を取得可能。

```py
import openpyxl as excel

# チェックしたいならこれ
#import os
#path = 'ばな.xlsx'
#is_file = os.path.isfile(path)
#if is_file:
#  print("apple")
#else:
#  print("banana")
#  exit

book = excel.load_workbook("ばなな.xlsx")

sheet = book.worksheets[0]
# sheet = book.worksheets["Sheet"]はできないようだ
print(sheet.title)

cell = sheet["A1"]
cordinate = cell.coordinate # A1

sheet.cell(row=2, column=1, value="apple")

cell = sheet.cell(row=3, column=1)
cell.value  = "melon"

book.save("ばなな.xlsx")
```

## 九九の表を作る
rangeでループ回数を設定している。
range(1,10)で1からスタートすることも可能。

```py
import openpyxl as excel

book = excel.Workbook()

sheet = book.active

for y in range(1,10):
  for x in range(1,10):
    cell = sheet.cell(row=y, column=x)
    cell.value = x * y

book.save("calc.xlsx")
```

## まとめ
簡単にエクセルを弄れるようになった。（気がする
ライブラリによって使い方が変わるのかなど分からないので要調査。
次回は操作に慣れるために問題を解く予定。
【翻訳】Do’s and Don’t for UI Design【Part 2】

### 1.色彩心理学
色は、UIデザインに不可欠な要素です。色彩は、ユーザーをウェブサイトやモバイルアプリケーションに結びつける感情を呼び起こします。色を賢く使うことで、UIはより豊かで合理的に見えるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359201/d2130bee-1af8-456a-28e1-f35f1dc2a33a.png)

### 2.シングルカラムルールで勢いを維持する
コンテンツは1カラムで表示することで、読みやすくなります。アプリやウェブサイトに大量の情報を掲載する場合は、縦に並べると勢いが保たれます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359201/de0b9d37-02c8-5146-0dea-3ef4de6f276c.png)

### 3.ソーシャルメディア優先
ユーザーのログインやサインアップを促進するために、ソーシャルメディアへのログインを優先させましょう。そうすることで、フォームに入力する際の余分な認知負荷や時間消費を避けることができます。ソーシャルメディアを最初に使うことで、CTRを高めることができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359201/c96ffada-9b33-bb45-f1b0-12024cf6e0f9.png)

### 4.選択とナビゲーション
ナビゲーションバーには、選択したコンテンツやタブを明確に描写する必要があります。選択中に色が曖昧になると、認知負荷が高まります。色の使用を最小限に抑え、アクションを明確にすることで、UIとUXはユーザーにとって心地よいものになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359201/92cf4c65-32ce-be78-746d-07fdb3ab39fa.png)

### 5.S P A C E でブレイク
情報と情報の間に区切りをつけるには、スペースを使うのが一番です。ブレークポイントとして線を加えることで、画面上に余分な要素を追加することができます。スペースは、UIをより風通しの良い、クリーンなものにします。

TwitterやMediumのようなコンテンツが多いプラットフォームでは、改行が適しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359201/339c5bb4-e8eb-76bf-195b-c979debae8f6.png)

### 6.一貫性
デザインに一貫性を持たせることで、複雑さを軽減し、迅速な意思決定を可能にします。一貫性があることで、ユーザーはパターンに慣れることができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359201/b0c5d31e-5acc-10a3-f10f-1dfea1a11c79.png)

### 7.検索入力
検索入力バーに適切なプレースホルダーを追加することで、そのプラットフォームで何が検索できるのか、何が見つかるのか、ユーザーにヒントを与えることができます。そうすることで、ユーザーのエンゲージメントが高まり、良い体験ができるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359201/d821e2cd-4eb7-debe-519f-69bb7a01920e.png)

以上、デジタル製品のエクスペリエンスデザインを行う際に守るべき7つの基本的な「やるべきこと」と「やってはいけないこと」を紹介しました。UIデザインの基本を理解するのに役立つことを願っています！

## 《参考記事》 Do’s and Don’t for UI Design-Part 2 Exploring more do’s and don’t that will help you create better user experience.
https://bootcamp.uxdesign.cc/dos-and-don-t-for-ui-design-part-2-8f56dcd66b4