麻生二郎 « shell-mag

香川大学SLPからお届け！（Vol.93掲載）

投稿日：2024.11.25　｜　カテゴリー：　コード

著者：原口莉奈

　私は最近、RPG（Role-Playing Game）の戦闘シーンをC++言語で作成しました。作成には、無償で利用できるゲーム開発用ライブラリ「DXライブラリ」（https://dxlib.xsrv.jp/）を用いています。今回は、その一部であるコマンド選択画面の実装について紹介します。

シェルスクリプトマガジン Vol.93は以下のリンク先でご購入できます。

図2　ビルド用のバッチファイル「build.bat」に記述する内容

g++ -c Main.cpp -DDX_GCC_COMPILE -I"DxLib"
g++ -o game.exe Main.o -L"DxLib" -lgcc -lDxLib -lDxUseCLib ^
 -lDxDrawFunc -ljpeg -lpng -lzlib -ltiff -ltheora_static ^
 -lvorbis_static -lvorbisfile_static -logg_static ^
 -lbulletdynamics -lbulletcollision -lbulletmath -lopusfile ^
 -lopus -lsilk_common -lcelt

1

2

3

4

5

6

g++ -c Main.cpp -DDX_GCC_COMPILE -I"DxLib"

g++ -o game.exe Main.o -L"DxLib" -lgcc -lDxLib -lDxUseCLib ^

-lDxDrawFunc -ljpeg -lpng -lzlib -ltiff -ltheora_static ^

-lvorbis_static -lvorbisfile_static -logg_static ^

-lbulletdynamics -lbulletcollision -lbulletmath -lopusfile ^

-lopus -lsilk_common -lcelt

図3　「Main.cpp」ファイルに記述するコード

#define WIN_X 256 
#define WIN_Y 224

#include <DxLib.h>

int WINAPI WinMain(
  _In_ HINSTANCE hInstance,
  _In_opt_ HINSTANCE hPrevInstance,
  _In_ LPSTR IpCmdLine,
  _In_ int nShowCmd)
{
  ChangeWindowMode(TRUE);
  DxLib_Init();

  // ウィンドウ初期化
  SetWindowText("game"); // タイトル
  SetGraphMode(WIN_X, WIN_Y, 32); // 解像度と色深度
  SetBackgroundColor(255, 255, 255); // 背景色

  WaitKey();
  DxLib_End();
  return 0;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

#define WIN_X 256

#define WIN_Y 224

#include <DxLib.h>

int WINAPI WinMain(

_In_ HINSTANCE hInstance,

_In_opt_ HINSTANCE hPrevInstance,

_In_ LPSTR IpCmdLine,

_In_ int nShowCmd)

{

ChangeWindowMode(TRUE);

DxLib_Init();

// ウィンドウ初期化

SetWindowText("game"); // タイトル

SetGraphMode(WIN_X, WIN_Y, 32); // 解像度と色深度

SetBackgroundColor(255, 255, 255); // 背景色

WaitKey();

DxLib_End();

return 0;

}

図5　「Main.cpp」ファイルに記述するコード

#define WIN_X 256
#define WIN_Y 224

#include <DxLib.h>
#include "Status.h"
#include "Battle.h"

int WINAPI WinMain(
  _In_ HINSTANCE hInstance,
  _In_opt_ HINSTANCE hPrevInstance,
  _In_ LPSTR IpCmdLine,
  _In_ int nShowCmd)
{
  ChangeWindowMode(TRUE);
  DxLib_Init();

  SetWindowText("game");
  SetGraphMode(WIN_X, WIN_Y, 32);
  SetBackgroundColor(255, 255, 255);
  SetDrawScreen(DX_SCREEN_BACK); // 裏画面描画
  SetWindowSize(1024, 960); // ウィンドウサイズ

  Battle.materialLoad();
  while (ProcessMessage() == 0)
  {
    SetBackgroundColor(0, 0, 0);
    Battle.BattleDraw();
  }
  DxLib_End();
  return 0;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

#define WIN_X 256

#define WIN_Y 224

#include <DxLib.h>

#include "Status.h"

#include "Battle.h"

int WINAPI WinMain(

_In_ HINSTANCE hInstance,

_In_opt_ HINSTANCE hPrevInstance,

_In_ LPSTR IpCmdLine,

_In_ int nShowCmd)

{

ChangeWindowMode(TRUE);

DxLib_Init();

SetWindowText("game");

SetGraphMode(WIN_X, WIN_Y, 32);

SetBackgroundColor(255, 255, 255);

SetDrawScreen(DX_SCREEN_BACK); // 裏画面描画

SetWindowSize(1024, 960); // ウィンドウサイズ

Battle.materialLoad();

while (ProcessMessage() == 0)

{

SetBackgroundColor(0, 0, 0);

Battle.BattleDraw();

}

DxLib_End();

return 0;

}

図6　「Status.h」ファイルに記述するコード

class BATTLE {
public:
  struct Status {
    char name[50];
    int HP, ATK, DEF; //体力、攻撃力、防御力
  };
  struct Status player = { "player",30, 10, 5 };
  struct Status villain = { "villain",30, 7, 5 };
  struct Status* Player = &player;
  const char* str[4] = { "たたかう", "まもる",
                         "どうぐ", "にげる" };
  const char* item[1] = { "回復" };
  int firstsym = 80;
  int sym = firstsym;
  int sym_limit = firstsym + (4 - 1) * 17;
  int symbol = -1, symnext = 0;
  int pattern = 1;
  int firstarrow = 80;
  int arrow = firstarrow;
  int limit; // firstarrow + (num - 1) * 17
  int a_posi = -1;
  int re = 0;
  int black, white, ms;
  void materialLoad();
  void BattleDraw();
  void one();
  void two();
  void Choices(int x, const char* str[], int n);
private:
};

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

class BATTLE {

public:

struct Status {

char name[50];

int HP, ATK, DEF; //体力、攻撃力、防御力

};

struct Status player = { "player",30, 10, 5 };

struct Status villain = { "villain",30, 7, 5 };

struct Status* Player = &player;

const char* str[4] = { "たたかう", "まもる",

"どうぐ", "にげる" };

const char* item[1] = { "回復" };

int firstsym = 80;

int sym = firstsym;

int sym_limit = firstsym + (4 - 1) * 17;

int symbol = -1, symnext = 0;

int pattern = 1;

int firstarrow = 80;

int arrow = firstarrow;

int limit; // firstarrow + (num - 1) * 17

int a_posi = -1;

int re = 0;

int black, white, ms;

void materialLoad();

void BattleDraw();

void one();

void two();

void Choices(int x, const char* str[], int n);

private:

};

図7　「Battle.h」ファイルに記述するコード

BATTLE Battle;
void BATTLE::materialLoad() {
  black = GetColor(0, 0, 0);
  white = GetColor(255, 255, 255);
  ms = CreateFontToHandle("ＭＳ ゴシック", 10, 6,
                          DX_FONTTYPE_ANTIALIASING_4X4);
}
void BATTLE::Choices(int x, const char* str[], int n) {
  int w = 0;
  for (int i = 0; i < n; i++) {
    DrawBox(x, firstarrow + w,
            x + 80, firstarrow + 16 + w, white, TRUE);
    DrawFormatStringToHandle(x + 5, firstarrow + 5 + w,
                             black, ms, str[i]);
    w += 17;
  }
}
// 初期表示
void BATTLE::one() {
  sym = firstsym;
  pattern = 2;
}
// 矢印の移動
void BATTLE::two() {
  if (symnext == 0) {
    switch (WaitKey()) {
      case KEY_INPUT_DOWN:
        if (sym != sym_limit) sym += 17;
        break;
      case KEY_INPUT_UP:
        if (sym != firstsym)  sym -= 17;
        break;
      case KEY_INPUT_ESCAPE:
        DxLib_End();
        break;	
    }
    if (symbol != -1) symnext++;
  }
}

void BATTLE::BattleDraw() {
  SetDrawScreen(DX_SCREEN_BACK);
  ClearDrawScreen();
  switch(pattern):
  if (pattern == 1) one();
  else if (pattern == 2) two();
  Choices(160, str, 4);
  DrawFormatStringToHandle(144, sym, white, ms, "→");
  ScreenFlip();
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

BATTLE Battle;

void BATTLE::materialLoad() {

black = GetColor(0, 0, 0);

white = GetColor(255, 255, 255);

ms = CreateFontToHandle("ＭＳゴシック", 10, 6,

DX_FONTTYPE_ANTIALIASING_4X4);

}

void BATTLE::Choices(int x, const char* str[], int n) {

int w = 0;

for (int i = 0; i < n; i++) {

DrawBox(x, firstarrow + w,

x + 80, firstarrow + 16 + w, white, TRUE);

DrawFormatStringToHandle(x + 5, firstarrow + 5 + w,

black, ms, str[i]);

w += 17;

}

// 初期表示

void BATTLE::one() {

sym = firstsym;

pattern = 2;

}

// 矢印の移動

void BATTLE::two() {

if (symnext == 0) {

switch (WaitKey()) {

case KEY_INPUT_DOWN:

if (sym != sym_limit) sym += 17;

break;

case KEY_INPUT_UP:

if (sym != firstsym) sym -= 17;

break;

case KEY_INPUT_ESCAPE:

DxLib_End();

break;

}

if (symbol != -1) symnext++;

}

void BATTLE::BattleDraw() {

SetDrawScreen(DX_SCREEN_BACK);

ClearDrawScreen();

switch(pattern):

if (pattern == 1) one();

else if (pattern == 2) two();

Choices(160, str, 4);

DrawFormatStringToHandle(144, sym, white, ms, "→");

ScreenFlip();

}

図9　「Status.h」ファイルにHpDraw()関数の記述を追加

（略）
  void HpDraw();
  void BattleDraw();
（略）

1

2

3

4

（略）

void HpDraw();

void BattleDraw();

（略）

図10　「Battle.h」ファイルのBattleDraw()関数定義部分をこのように書き換える

（略）void BATTLE::HpDraw() {
  DrawBox(180, 160, 250, 184, white, FALSE);
  DrawBox(180, 186, 250, 210, white, FALSE);
  DrawFormatStringToHandle(182, 162, white, ms,
                           "villain\nHP: %d", villain.HP);
  DrawFormatStringToHandle(182, 188, white, ms,
                           "player\nHP:%d", player.HP);
}
void BATTLE::BattleDraw() {
  SetDrawScreen(DX_SCREEN_BACK);
  ClearDrawScreen();
  switch(pattern):
  if (pattern == 1) one();
  else if (pattern == 2) two();
  Choices(160, str, 4);
  DrawFormatStringToHandle(144, sym, white, ms, "→");
  HpDraw();
  ScreenFlip();
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

（略）void BATTLE::HpDraw() {

DrawBox(180, 160, 250, 184, white, FALSE);

DrawBox(180, 186, 250, 210, white, FALSE);

DrawFormatStringToHandle(182, 162, white, ms,

"villain\nHP: %d", villain.HP);

DrawFormatStringToHandle(182, 188, white, ms,

"player\nHP:%d", player.HP);

}

void BATTLE::BattleDraw() {

SetDrawScreen(DX_SCREEN_BACK);

ClearDrawScreen();

switch(pattern):

if (pattern == 1) one();

else if (pattern == 2) two();

Choices(160, str, 4);

DrawFormatStringToHandle(144, sym, white, ms, "→");

HpDraw();

ScreenFlip();

}

Markdownを活用する（Vol.93掲載）

投稿日：2024.11.25　｜　カテゴリー：　コード

著者：藤原由来

本連載では文書の装飾・構造付けを手軽に行える記法であるMarkdownを用いて、さまざまな文書や成果物を作成する方法を紹介します。今回は、プレゼンテーション用のスライドを作成するためのプレゼンテーションアプリ「Marp」について解説します。

シェルスクリプトマガジン Vol.93は以下のリンク先でご購入できます。

図1　Marp用にMarkdownで記述したテキストの例

---
marp: true
---

# 美味しいカレーの作り方  

シェル花子

---

# 材料

- 玉ねぎ
- にんじん
- じゃがいも
- 肉
- カレールー
- 水

---

# 作り方

1. 材料を切る
2. 肉を炒める
3. 野菜を加える
4. 水を加えて煮る
5. カレールーを入れる

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

---

marp: true

---

# 美味しいカレーの作り方

シェル花子

---

# 材料

- 玉ねぎ

- にんじん

- じゃがいも

- 肉

- カレールー

- 水

---

# 作り方

1. 材料を切る

2. 肉を炒める

3. 野菜を加える

4. 水を加えて煮る

5. カレールーを入れる

図8　見出しレベル1をスライドの区切りにしたMarkdown形式のテキスト例

---
marp: true
headingDivider: 1
---

# 美味しいカレーの作り方  

## シェル花子

# 材料

## ここに
### 材料を書く

# 作り方

## 適当に作る

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

---

marp: true

headingDivider: 1

---

# 美味しいカレーの作り方

## シェル花子

# 材料

## ここに

### 材料を書く

# 作り方

## 適当に作る

図11　スライドの背景や文字色を変更したMarkdown形式のテキスト例

---
marp: true
---

# 通常のスライド

---

<!-- 
_backgroundColor: black
_color: white
-->

# 背景が黒く文字が白いスライド

---

<!-- 
_backgroundImage: "linear-gradient(to bottom, #67b8e3, #0288d1)" 
_color: white
-->

# 背景が青いグラデーションのスライド

---

<!-- 
_backgroundImage: url('cat1.png')
-->

# 背景が画像のスライド

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

---

marp: true

---

# 通常のスライド

---

<!--

_backgroundColor: black

_color: white

-->

# 背景が黒く文字が白いスライド

---

<!--

_backgroundImage: "linear-gradient(to bottom, #67b8e3, #0288d1)"

_color: white

-->

# 背景が青いグラデーションのスライド

---

<!--

_backgroundImage: url('cat1.png')

-->

# 背景が画像のスライド

図13　背景画像表示とぼかしフィルタ適用のMarkdown形式のテキスト例

---
marp: true
---

# 背景画像を表示する

![bg cover](cat1.png)

---

# 背景画像にぼかしを入れる

![blur bg cover](cat1.png)

1

2

3

4

5

6

7

8

9

10

11

12

13

---

marp: true

---

# 背景画像を表示する

![bg cover](cat1.png)

---

# 背景画像にぼかしを入れる

![blur bg cover](cat1.png)

図15　背景画像の横並びと縦並びのMarkdown形式のテキスト例

---
marp: true
---

# 背景に横並びに配置

![bg](cat1.png)
![bg](cat1.png)
![bg](cat1.png)

---

# 背景に縦並びに配置

![bg vertical](cat1.png)
![bg](cat1.png)
![bg](cat1.png)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

---

marp: true

---

# 背景に横並びに配置

![bg](cat1.png)

---

# 背景に縦並びに配置

![bg vertical](cat1.png)

![bg](cat1.png)

図20　ChatGPTが生成したMarkdown形式のテキスト

---
marp: true
theme: default
paginate: true
backgroundColor: #f0f0f0
---

# 知られざるインドカレー
### シェル花子

---

# 目次
1. 北インド: パニール・バターマサラ  
2. 南インド: チェッティナード・チキンカレー  
3. 西インド: ゴア・フィッシュカレー  
4. 東インド: コサ・マンシャ  
5. 中央インド: ダールバーフライ  
6. 北東インド: アクホニカレー  

---

# 1. 北インド: パニール・バターマサラ

- クリーミーで濃厚なグレイビー
- トマト、バター、クリームを使用
- パニール（カッテージチーズ）入り
- パンジャーブ地方で有名
- ナンやバスマティライスと食べる

---

（略）

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

---

marp: true

theme: default

paginate: true

backgroundColor: #f0f0f0

---

# 知られざるインドカレー

### シェル花子

---

# 目次

1. 北インド: パニール・バターマサラ

2. 南インド: チェッティナード・チキンカレー

3. 西インド: ゴア・フィッシュカレー

4. 東インド: コサ・マンシャ

5. 中央インド: ダールバーフライ

6. 北東インド: アクホニカレー

---

# 1. 北インド: パニール・バターマサラ

- クリーミーで濃厚なグレイビー

- トマト、バター、クリームを使用

- パニール（カッテージチーズ）入り

- パンジャーブ地方で有名

- ナンやバスマティライスと食べる

---

（略）

本連載では「Pythonを昔から使っているものの、それほど使いこなしてはいない」という筆者が、いろいろな日常業務をPythonで処理することで、立派な「蛇使い」に育つことを目指します。その過程を温かく見守ってください。皆さんと共に勉強していきましょう。第23回では、機械学習ライブラリ「scikit-learn」で何ができるのかを紹介した上で、データを二つのクラスに分類するPythonプログラムを作成します。

シェルスクリプトマガジン Vol.93は以下のリンク先でご購入できます。

図9　テストデータを作成するPythonコード

import pandas as pd
from sklearn.datasets import make_classification
(data, label) = make_classification(n_samples=1000, 
                                    n_features=2, n_classes=2, 
                                    n_informative=2,
                                    n_redundant=0,
                                    random_state=133)
df = pd.DataFrame({'x1':[d[0] for d in data], 
                   'x2':[d[1] for d in data],
                   'label':label})
df.plot.scatter(x='x1', y='x2', 
                c=df['label'].map({0:'blue', 1:'red'}), s=5)

1

2

3

4

5

6

7

8

9

10

11

12

import pandas as pd

from sklearn.datasets import make_classification

(data, label) = make_classification(n_samples=1000,

n_features=2, n_classes=2,

n_informative=2,

n_redundant=0,

random_state=133)

df = pd.DataFrame({'x1':[d[0] for d in data],

'x2':[d[1] for d in data],

'label':label})

df.plot.scatter(x='x1', y='x2',

c=df['label'].map({0:'blue', 1:'red'}), s=5)

図10　LinearSVCを用いて学習と分類をするPythonコード

from sklearn.svm import LinearSVC
from sklearn.metrics import accuracy_score
clf = LinearSVC(random_state=0, dual='auto', tol=1e-5)
clf.fit(data, label)
accuracy_score(clf.predict(data), label)

1

2

3

4

5

from sklearn.svm import LinearSVC

from sklearn.metrics import accuracy_score

clf = LinearSVC(random_state=0, dual='auto', tol=1e-5)

clf.fit(data, label)

accuracy_score(clf.predict(data), label)

図11　分離面を描画するPythonコード

from mlxtend.plotting import plot_decision_regions
plot_decision_regions(data, label, clf=clf)

1 2	from mlxtend.plotting import plot_decision_regions plot_decision_regions(data, label, clf=clf)

図13　NuSVCを用いて学習と分類をするPythonコード

from sklearn.svm import NuSVC
clf = NuSVC(nu=0.1, random_state=0)
clf.fit(data, label)
accuracy_score(clf.predict(data), label)

1

2

3

4

from sklearn.svm import NuSVC

clf = NuSVC(nu=0.1, random_state=0)

clf.fit(data, label)

accuracy_score(clf.predict(data), label)

図15　SVCを用いて学習と分類をするPythonコード（その1）

from sklearn.svm import SVC
clf = SVC(gamma=0.1, random_state=0)
clf.fit(data, label)
accuracy_score(clf.predict(data), label)

1

2

3

4

from sklearn.svm import SVC

clf = SVC(gamma=0.1, random_state=0)

clf.fit(data, label)

accuracy_score(clf.predict(data), label)

図17　SVCを用いて学習と分類をするPythonコード（その2）

from sklearn.svm import SVC
clf = SVC(gamma=0.1, random_state=0)
clf.fit(data, label)
accuracy_score(clf.predict(data), label)

1

2

3

4

from sklearn.svm import SVC

clf = SVC(gamma=0.1, random_state=0)

clf.fit(data, label)

accuracy_score(clf.predict(data), label)

特集1　Streamlitで作るデータ分析Webアプリ（Vol.93記載）

投稿日：2024.11.25　｜　カテゴリー：　コード

著者：邑川真也

「Streamlit」は、OSS（オープンソースソフトウエア）のPython向けフレームワーク（ライブラリ）です。データの可視化機能や分析機能、ダッシュボードなどを備えるWebアプリケーションを、Pythonを使って迅速かつ容易に作成できます。本特集では、さまざまなWebアプリケーションを実際に作成しながら、基本的なデータの可視化方法から、ノーコードでデータ分析を実現する方法まで、Streamlitのさまざまな活用方法を紹介します。

シェルスクリプトマガジン Vol.93は以下のリンク先でご購入できます。

図2　HTMLとCSS、JavaScriptを用いて棒グラフを描くコードの例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
  <title>Bar Chart Example</title>
  <style>
    .chart-container {
      width: 70%;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div class="chart-container">
    <canvas id="myBarChart"></canvas>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script>
    var ctx = document.getElementById('myBarChart').getContext('2d');
    var myBarChart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['January', 'February', 'March',
                 'April', 'May', 'June', 'July'],
        datasets: [{
          label: 'Sample Data',
          data: [65, 59, 80, 81, 56, 55, 40],
          backgroundColor: 'rgba(54, 162, 235, 0.2)',
          borderColor: 'rgba(54, 162, 235, 1)',
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  </script>
</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

<!DOCTYPE html>

<head>

content="width=device-width, initial-scale=1.0">

<title>Bar Chart Example</title>

<style>

.chart-container {

width: 70%;

margin: 0 auto;

}

</style>

</head>

<body>

</div>

var ctx = document.getElementById('myBarChart').getContext('2d');

var myBarChart = new Chart(ctx, {

type: 'bar',

data: {

labels: ['January', 'February', 'March',

'April', 'May', 'June', 'July'],

datasets: [{

label: 'Sample Data',

data: [65, 59, 80, 81, 56, 55, 40],

backgroundColor: 'rgba(54, 162, 235, 0.2)',

borderColor: 'rgba(54, 162, 235, 1)',

borderWidth: 1

}]

},

options: {

scales: {

y: {

beginAtZero: true

}

});

</script>

</body>

</html>

図3　Streamlitを用いて棒グラフを描くコードの例

import streamlit as st
import pandas as pd
import altair as alt

data = pd.DataFrame({
    'Month': ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    'Value': [65, 59, 80, 81, 56, 55, 40]
})
chart = alt.Chart(data).mark_bar().encode(
    x='Month',
    y='Value',
    color=alt.value('steelblue')
)
st.title('Bar Chart Example')
st.altair_chart(chart, use_container_width=True)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

import streamlit as st

import pandas as pd

import altair as alt

data = pd.DataFrame({

'Month': ['January', 'February', 'March', 'April', 'May', 'June', 'July'],

'Value': [65, 59, 80, 81, 56, 55, 40]

})

chart = alt.Chart(data).mark_bar().encode(

x='Month',

y='Value',

color=alt.value('steelblue')

)

st.title('Bar Chart Example')

st.altair_chart(chart, use_container_width=True)

図6　シンプルなWebアプリケーションのコード

import streamlit as st

# タイトルを表示
st.title("シェルスクリプトマガジン")

1

2

3

4

import streamlit as st

# タイトルを表示

st.title("シェルスクリプトマガジン")

図9　架空の株価データを生成して表示するコード

import streamlit as st
import pandas as pd
import numpy as np
from datetime import datetime, timedelta

# 株価データを生成（仮のデータ）
dates = [datetime.today() - timedelta(days=i) for i in range(14)]
dates.reverse()
data = {
  'Date': dates,
  'Google': np.random.uniform(2700, 3000, 14),
  'Apple': np.random.uniform(140, 160, 14),
  'Meta': np.random.uniform(320, 350, 14),
  'Amazon': np.random.uniform(3300, 3500, 14)
}
# データフレームに変換
df = pd.DataFrame(data)
df.set_index('Date', inplace=True)
# タイトルを表示
st.title("株価データの可視化")
# データフレームの表示
st.dataframe(df)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

import streamlit as st

import pandas as pd

import numpy as np

from datetime import datetime, timedelta

# 株価データを生成（仮のデータ）

dates = [datetime.today() - timedelta(days=i) for i in range(14)]

dates.reverse()

data = {

'Date': dates,

'Google': np.random.uniform(2700, 3000, 14),

'Apple': np.random.uniform(140, 160, 14),

'Meta': np.random.uniform(320, 350, 14),

'Amazon': np.random.uniform(3300, 3500, 14)

}

# データフレームに変換

df = pd.DataFrame(data)

df.set_index('Date', inplace=True)

# タイトルを表示

st.title("株価データの可視化")

# データフレームの表示

st.dataframe(df)

図14　「data.csv」ファイルに記述するデータ（抜粋）

Case ID,Company,Inquiry Summary,Status,Start Date,Severity
1,Acme Corp,大規模データセットに対するクエリの最適化について,Open,2024-05-19,Sev4
2,Globex Inc,DWHのベストプラクティスについて,Open,2024-05-26,Sev3
3,Globex Inc,データロード時のエラー,Open,2024-05-21,Sev3
4,Soylent Corp,新機能の有効化について,Open,2024-05-22,Sev2
5,Soylent Corp,レプリケートに失敗しています,Open,2024-05-22,Sev3
（略）

1

2

3

4

5

6

7

Case ID,Company,Inquiry Summary,Status,Start Date,Severity

1,Acme Corp,大規模データセットに対するクエリの最適化について,Open,2024-05-19,Sev4

2,Globex Inc,DWHのベストプラクティスについて,Open,2024-05-26,Sev3

3,Globex Inc,データロード時のエラー,Open,2024-05-21,Sev3

4,Soylent Corp,新機能の有効化について,Open,2024-05-22,Sev2

5,Soylent Corp,レプリケートに失敗しています,Open,2024-05-22,Sev3

（略）

図15　ダッシュボードアプリのコード

import streamlit as st
import pandas as pd
import numpy as np
import matplotlib.pyplot as plt

# ページ設定
st.set_page_config(
  page_title="サポートデスクダッシュボード",
  initial_sidebar_state="expanded",
  layout="wide"
)
st.title("サポートデスクダッシュボード")
# チケット一覧を表示
st.subheader("チケット一覧")
# データ読み込み
df = pd.read_csv("data.csv")

with st.container(border=True, height=100):
  filter1, filter2 = st.columns(2)
with filter1:
  # ステータスによるフィルタ
  status_list = df['Status'].unique()
  selected_status = st.multiselect("ステータス",
                                   options=status_list,
                                   default=status_list)
with filter2:
  # 重要度によるフィルタ
  severity_list = df['Severity'].unique()
  selected_severity = st.multiselect("重要度",
                                     options=severity_list,
                                     default=severity_list)
# フィルタを適用
if selected_status or selected_severity:
  df = df[(df['Status'].isin(selected_status) &
           df['Severity'].isin(selected_severity))]

# データを表示
st.dataframe(df, use_container_width=True)
# グラフを横並びに表示するレイアウトを作成
st.markdown("")
col1, col2  = st.columns(2)
# 縦棒グラフでステータスの数を表示
with col1:
  st.subheader("チケットごとのステータス集計")
  fig, ax = plt.subplots()
  status_counts = df["Status"].value_counts()
  ax.bar(status_counts.index, status_counts.values,
         color="skyblue")
  ax.set_xlabel("Status")
  ax.set_ylabel("Count")
  ax.set_title("Tickets by Status")
  with st.container(border=True):
    st.pyplot(fig)
# 縦棒グラフで重要度の数を表示
with col2:
  st.subheader("チケットごとの重要度集計")
  severity_counts = df["Severity"].value_counts()
  fig, ax = plt.subplots()
  ax.bar(severity_counts.index, severity_counts.values, color="coral")
  ax.set_xlabel("Severity")
  ax.set_ylabel("Count")
  ax.set_title("Tickets by Severity")
  with st.container(border=True):
    st.pyplot(fig)

# CSVダウンロード
csv = df.to_csv(index=False)
st.download_button(
  label="Download CSV",
  data=csv,
  file_name='sample_data.csv',
  mime='text/csv'
)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

import streamlit as st

import pandas as pd

import numpy as np

import matplotlib.pyplot as plt

# ページ設定

st.set_page_config(

page_title="サポートデスクダッシュボード",

initial_sidebar_state="expanded",

layout="wide"

)

st.title("サポートデスクダッシュボード")

# チケット一覧を表示

st.subheader("チケット一覧")

# データ読み込み

df = pd.read_csv("data.csv")

with st.container(border=True, height=100):

filter1, filter2 = st.columns(2)

with filter1:

# ステータスによるフィルタ

status_list = df['Status'].unique()

selected_status = st.multiselect("ステータス",

options=status_list,

default=status_list)

with filter2:

# 重要度によるフィルタ

severity_list = df['Severity'].unique()

selected_severity = st.multiselect("重要度",

options=severity_list,

default=severity_list)

# フィルタを適用

if selected_status or selected_severity:

df = df[(df['Status'].isin(selected_status) &

df['Severity'].isin(selected_severity))]

# データを表示

st.dataframe(df, use_container_width=True)

# グラフを横並びに表示するレイアウトを作成

st.markdown("")

col1, col2 = st.columns(2)

# 縦棒グラフでステータスの数を表示

with col1:

st.subheader("チケットごとのステータス集計")

fig, ax = plt.subplots()

status_counts = df["Status"].value_counts()

ax.bar(status_counts.index, status_counts.values,

color="skyblue")

ax.set_xlabel("Status")

ax.set_ylabel("Count")

ax.set_title("Tickets by Status")

with st.container(border=True):

st.pyplot(fig)

# 縦棒グラフで重要度の数を表示

with col2:

st.subheader("チケットごとの重要度集計")

severity_counts = df["Severity"].value_counts()

fig, ax = plt.subplots()

ax.bar(severity_counts.index, severity_counts.values, color="coral")

ax.set_xlabel("Severity")

ax.set_ylabel("Count")

ax.set_title("Tickets by Severity")

with st.container(border=True):

st.pyplot(fig)

# CSVダウンロード

csv = df.to_csv(index=False)

st.download_button(

label="Download CSV",

data=csv,

file_name='sample_data.csv',

mime='text/csv'

)

図17　「config.toml」ファイルに記述するテーマ設定の例

[theme]
primaryColor = "#F14143"              # プライマリカラー
backgroundColor = "#101216"           # 背景色
secondaryBackgroundColor = "#191B20"  # セカンダリ背景色
textColor = "#F9F9F9"                 # テキストカラー
font = "sans serif"                   # フォント

1

2

3

4

5

6

[theme]

primaryColor = "#F14143" # プライマリカラー

backgroundColor = "#101216" # 背景色

secondaryBackgroundColor = "#191B20" # セカンダリ背景色

textColor = "#F9F9F9" # テキストカラー

font = "sans serif" # フォント

図18　「pygw_test.py」ファイルに記述するコード

from pygwalker.api.streamlit import StreamlitRenderer
import pandas as pd
import streamlit as st

# Streamlitの画面幅を調整
st.set_page_config(
  page_title="Use Pygwalker In Streamlit",
  layout="wide"
)
# データの取得
df = pd.read_csv("https://kanaries-app.s3.ap-northeast-1.amazonaws.com/public-datasets/bike_sharing_dc.csv")
# PYGWalkerによる可視化 
pyg_app = StreamlitRenderer(df)
pyg_app.explorer()

1

2

3

4

5

6

7

8

9

10

11

12

13

14

from pygwalker.api.streamlit import StreamlitRenderer

import pandas as pd

import streamlit as st

# Streamlitの画面幅を調整

st.set_page_config(

page_title="Use Pygwalker In Streamlit",

layout="wide"

)

# データの取得

df = pd.read_csv("https://kanaries-app.s3.ap-northeast-1.amazonaws.com/public-datasets/bike_sharing_dc.csv")

# PYGWalkerによる可視化

pyg_app = StreamlitRenderer(df)

pyg_app.explorer()

レポート1（Vol.93掲載）

投稿日：2024.11.25　｜　カテゴリー：　コード

著者：末安泰三

クジラ飛行机氏は2024年11月7日、手軽にGUIを作成可能なPythonライブラリ「TkEasyGUI」のバージョン1.0系列をリリースした。バージョン1.0系列では、複数項目を入力できるフォームダイアログが追加されるなどの機能拡充やバグ修正が施されている。

シェルスクリプトマガジン Vol.93は以下のリンク先でご購入できます。

図1　個人情報を入力させるウィンドウを作成するコードの例

import TkEasyGUI as eg

layout = [
  [eg.Text('氏名', size=(15, 1)), eg.InputText()],
  [eg.Text('住所', size=(15, 1)), eg.InputText()],
  [eg.Text('電話番号', size=(15, 1)), eg.InputText()],
  [eg.Text()],
  [eg.Button('OK'), eg.Button('Cancel')]
]
with eg.Window('個人情報を入力', layout) as window:
  for event in window.event_iter():
    pass

1

2

3

4

5

6

7

8

9

10

11

12

import TkEasyGUI as eg

layout = [

[eg.Text('氏名', size=(15, 1)), eg.InputText()],

[eg.Text('住所', size=(15, 1)), eg.InputText()],

[eg.Text('電話番号', size=(15, 1)), eg.InputText()],

[eg.Text()],

[eg.Button('OK'), eg.Button('Cancel')]

]

with eg.Window('個人情報を入力', layout) as window:

for event in window.event_iter():

pass

図3　フォームダイアログを表示するコードの例

iimport TkEasyGUI as eg

form = eg.popup_get_form(["氏名", "住所", "電話番号"],
                         title="個人情報の入力")

1

2

3

4

iimport TkEasyGUI as eg

form = eg.popup_get_form(["氏名", "住所", "電話番号"],

title="個人情報の入力")

シェルスクリプトマガジンvol.93 Web掲載記事まとめ

投稿日：2024.11.25　｜　カテゴリー：　コード

004　レポート　Python用の国産GUIライブラリ公開　コード掲載
005　レポート　Open Source Summit + AI_dev開催
製品レビュー　組み込み機器「ラズパイ AI HAT+」
007　NEWS FLASH
008　特集1　Streamlitで作るデータ分析Webアプリ/邑川真也　コード掲載
018　特集2　Oracleデータベース入門/宮本拓弥、百木和美、武井菜々子、北村海人
034　イベントレポート「第35回　プロコン」/塩田哲也
036　Raspberry Pi Pico W/WHで始める電子工作/米田聡
040　Pythonあれこれ/飯尾淳　コード掲載
046　Markdownを活用する/藤原由来　コード掲載
056　中小企業手作りIT化奮戦記/菅雄一
062　香川大学SLPからお届け！/原口莉奈　コード掲載
068　これだけは覚えておきたいLinuxコマンド/大津真
076　Techパズル/gori.sh
077　コラム「仕組みを作るSE」/シェル魔人

Vol.93

投稿日：2024.11.25　｜　カテゴリー：　バックナンバー

　産業界のDX（デジタルトランスフォーメーション）が叫ばれている現在、さまざまなデータの価値に注目が集まっています。それらのデータをグラフなどで可視化できるオープンソースのPythonフレームワーク（ライブラリ）が「Streamlit」です。特集1では、初心者にも分かりやすいように、実際に手を動かすという形で、Streamlitによるグラフ作成方法を紹介しています。
　特集2では、オラクルのクラウドサービス「Oracle Cloud Infrastructure」（OCI）上で動作するデータベース管理システム「Oracleデータベース」を解説しています。OCI上でもOracleデータベースの全機能が利用できます。さらに「Autonomous Database」というサービスを利用すれば、日常的な運用管理を自動化できます。
　このほか、連載「Pythonあれこれ」では、機械学習ライブラリ「scikit-learn」について紹介しています。また、イベントレポートとして「第35回全国高等専門学校プログラミングコンテスト」も掲載しています。
　今回も読み応え十分のシェルスクリプトマガジン Vol.93。お見逃しなく!

※記事掲載のコードはこちら。記事の補足情報はこちら

※読者アンケートはこちら

Vol.93 補足情報

投稿日：2024.11.20　｜　カテゴリー：　コード

特集1　Streamlitで作るデータ分析Webアプリ

p.13の図15で示したコードで使用するデータファイル「data.csv」をここからダウンロードできます。

連載　香川大学SLPからお届け！

記事で紹介したコードを拡張して、コンピュータとの簡単な対戦ができるゲームを作成しました。ソースコードをまとめたアーカイブファイルはここからダウンロードできます。

情報は随時更新致します。

香川大学SLPからお届け！（Vol.92掲載）

投稿日：2024.09.25　｜　カテゴリー：　コード

著者：池内稜來斗

各都道府県の都道府県庁所在地を尋ねるクイズを出題するWebサイトをPHPで作成しました。今回は、そのWebサイトの概要や作成手順などを紹介します。PHPの実行環境や、各種サーバーソフトウエアは、「XAMPP」（https://www.apachefriends.org/）を使ってインストールします。

シェルスクリプトマガジン Vol.92は以下のリンク先でご購入できます。

図2　「db.sql」ファイルに記述するSQL文

use pref_capitals_quiz;
insert into pref_capitals
  (id, name_p, name_c, image_p) values
(1, '北海道', '札幌市', 'img/hokkaidou.png'),
(2, '青森県', '青森市', 'img/aomori.png'),
(3, '岩手県', '盛岡市', 'img/iwate.png'),
(4, '秋田県', '秋田市', 'img/akita.png'),
(5, '宮城県', '仙台市', 'img/miyagi.png'),
(6, '山形県', '山形市', 'img/yamagata.png'),
(7, '福島県', '福島市', 'img/fukushima.png'),
(8, '茨城県', '水戸市', 'img/ibaraki.png'),
(9, '栃木県', '宇都宮市', 'img/tochigi.png'),
(10, '群馬県', '前橋市', 'img/gunma.png'),
(11, '埼玉県', 'さいたま市', 'img/saitama.png'),
(12, '千葉県', '千葉市', 'img/chiba.png'),
(13, '東京都', '東京', 'img/tokyo.png'),
（略）
(47, '沖縄県', '那覇市', 'img/okinawa.png');
commit;

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

use pref_capitals_quiz;

insert into pref_capitals

(id, name_p, name_c, image_p) values

(1, '北海道', '札幌市', 'img/hokkaidou.png'),

(2, '青森県', '青森市', 'img/aomori.png'),

(3, '岩手県', '盛岡市', 'img/iwate.png'),

(4, '秋田県', '秋田市', 'img/akita.png'),

(5, '宮城県', '仙台市', 'img/miyagi.png'),

(6, '山形県', '山形市', 'img/yamagata.png'),

(7, '福島県', '福島市', 'img/fukushima.png'),

(8, '茨城県', '水戸市', 'img/ibaraki.png'),

(9, '栃木県', '宇都宮市', 'img/tochigi.png'),

(10, '群馬県', '前橋市', 'img/gunma.png'),

(11, '埼玉県', 'さいたま市', 'img/saitama.png'),

(12, '千葉県', '千葉市', 'img/chiba.png'),

(13, '東京都', '東京', 'img/tokyo.png'),

（略）

(47, '沖縄県', '那覇市', 'img/okinawa.png');

commit;

図3　「index.html」ファイルに記述するコード

<html lang=ja>
<head>
  <meta charset="utf-8">
  <title>都道府県庁所在地クイズ!!</title>
</head>
<body>
  <h1>都道府県庁所在地クイズ!!</h1>
  <p>表示された都道府県の都道府県庁所在地を回答してください。<br>
  東京都の場合は、区名と地域名のどちらで回答しても構いません。<br>
  すべての都道府県について回答したら終了です。
  </p>
  <button type="button"
          onclick="location.href='question.php'">
  クイズを始める
  </button>
</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<head>

<title>都道府県庁所在地クイズ!!</title>

</head>

<body>

<h1>都道府県庁所在地クイズ!!</h1>

<p>表示された都道府県の都道府県庁所在地を回答してください。<br>

東京都の場合は、区名と地域名のどちらで回答しても構いません。<br>

すべての都道府県について回答したら終了です。

</p>

<button type="button"

onclick="location.href='question.php'">

クイズを始める

</button>

</body>

</html>

図4　「question.php」ファイルに記述するコード

<?php
  session_start();
  if (!isset($_SESSION['times'])) {
    $_SESSION['times'] = 0;
    $_SESSION['right'] = 0;
  }
  if ($_SESSION['times'] == 0) {
    $r = new \Random\Randomizer();
    $order = $r->shuffleArray(range(1, 47));
    $_SESSION['order'] = $order;
  }
  $order = $_SESSION['order'];
  $times = $_SESSION['times'];
  $pref = $order[$times];
?>

<html lang=ja>
<head>
  <meta charset="UTF-8">
  <title>都道府県庁所在地クイズ!!</title>
</head>
<body>

<?php
  $link = mysqli_connect('localhost','root','',
                         'pref_capitals_quiz');
  mysqli_set_charset($link,'utf8');
  $sql = "SELECT id, name_p, name_c, image_p " .
         "FROM pref_capitals WHERE id = $pref";
  $result = mysqli_query($link, $sql);
  $row = mysqli_fetch_assoc($result);
  $path = $row['image_p'];
  echo "<br>";
  echo "問題", $times + 1;
  echo '<img src="' . $path .
       '" alt="' . $row['name_p'] . 'の地図">';
  print('  '.$row['name_p']);
?>

<form method="POST" class="form" action="answer.php">
  <input type="text" name="Answer" class="input">
  <p>
    <input type="submit" value="回答" class="submit">
  </p>
</form>
</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

<?php

session_start();

if (!isset($_SESSION['times'])) {

$_SESSION['times'] = 0;

$_SESSION['right'] = 0;

}

if ($_SESSION['times'] == 0) {

$r = new \Random\Randomizer();

$order = $r->shuffleArray(range(1, 47));

$_SESSION['order'] = $order;

}

$order = $_SESSION['order'];

$times = $_SESSION['times'];

$pref = $order[$times];

?>

<head>

<title>都道府県庁所在地クイズ!!</title>

</head>

<body>

<?php

$link = mysqli_connect('localhost','root','',

'pref_capitals_quiz');

mysqli_set_charset($link,'utf8');

$sql = "SELECT id, name_p, name_c, image_p " .

"FROM pref_capitals WHERE id = $pref";

$result = mysqli_query($link, $sql);

$row = mysqli_fetch_assoc($result);

$path = $row['image_p'];

echo "<br>";

echo "問題", $times + 1;

echo '<img src="' . $path .

'" alt="' . $row['name_p'] . 'の地図">';

print(' '.$row['name_p']);

?>

<p>

</p>

</form>

</body>

</html>

図5　「answer.php」ファイルに記述するコード

<?php
  session_start();
  $times = $_SESSION['times'];
  $order = $_SESSION['order'];
  $right = $_SESSION['right'];
  $pref = $order[$times];
?>

<html lang=ja>
<head>
  <meta charset="UTF-8">
  <title>都道府県庁所在地クイズ!!</title>
</head>
<body>

<?php
  $received_Answer = $_POST['Answer'];
  $link = mysqli_connect('localhost','root','',
                         'pref_capitals_quiz');
  mysqli_set_charset($link,'utf8');
  $sql = "SELECT id, name_p, name_c, image_p " .
         "FROM pref_capitals WHERE id = $pref";
  $result = mysqli_query($link, $sql);
  $row = mysqli_fetch_assoc($result);
  // 東京都かどうか
  if ($row['id'] == 13) {
    if (($received_Answer == $row['name_c']) ||
      ($received_Answer == '新宿区')) {
      echo "正解\n";
      $right++;
    }
  } else if (($received_Answer == $row['name_c']) ||
    (($received_Answer . "市") == $row['name_c'])) {
    echo "正解\n";
    $right++;
  } else {
    echo "不正解\n";
  }
  $_SESSION['times'] = ++$times;
  $_SESSION['right'] = $right;
  echo "<br>";
  echo "問題{$times} {$row['name_p']} の答え";
  echo "<br>";
  echo $row['name_c'];

  if ($times != 47) {
    echo '
    <form method="POST" class="form" action="question.php">
      <button type="submit">次の問題</button>
    </form>';
  }
?>

  <form method="POST" class="form" action="result.php">
    <button type="submit">回答終了</button>
  </form>
</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

<?php

session_start();

$times = $_SESSION['times'];

$order = $_SESSION['order'];

$right = $_SESSION['right'];

$pref = $order[$times];

?>

<head>

<title>都道府県庁所在地クイズ!!</title>

</head>

<body>

<?php

$received_Answer = $_POST['Answer'];

$link = mysqli_connect('localhost','root','',

'pref_capitals_quiz');

mysqli_set_charset($link,'utf8');

$sql = "SELECT id, name_p, name_c, image_p " .

"FROM pref_capitals WHERE id = $pref";

$result = mysqli_query($link, $sql);

$row = mysqli_fetch_assoc($result);

// 東京都かどうか

if ($row['id'] == 13) {

if (($received_Answer == $row['name_c']) ||

($received_Answer == '新宿区')) {

echo "正解\n";

$right++;

}

} else if (($received_Answer == $row['name_c']) ||

(($received_Answer . "市") == $row['name_c'])) {

echo "正解\n";

$right++;

} else {

echo "不正解\n";

}

$_SESSION['times'] = ++$times;

$_SESSION['right'] = $right;

echo "<br>";

echo "問題{$times} {$row['name_p']} の答え";

echo "<br>";

echo $row['name_c'];

if ($times != 47) {

echo '

</form>';

}

?>

</form>

</body>

</html>

図6　「result.php」ファイルに記述するコード

<?php
  session_start();
  if (isset($_POST['reset'])) {
    $_SESSION['times'] = 0;
    $_SESSION['right'] = 0;
    header("Location: index.html");
  }
?>

<html lang=ja>
<head>
  <meta charset="UTF-8">
  <title>都道府県庁所在地クイズ!!</title>
</head>
<body>

<?php
  echo "今回の正答数は<br>";
  echo $_SESSION['times'], "問中",
       $_SESSION['right'], "問";
  echo "<br>";
  echo "お疲れさまでした<br>";
?>

  <form method="POST" action="result.php">
    <input type="submit"
           value="トップページに戻る"
           name="reset">
  </form>
</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

<?php

session_start();

if (isset($_POST['reset'])) {

$_SESSION['times'] = 0;

$_SESSION['right'] = 0;

header("Location: index.html");

}

?>

<head>

<title>都道府県庁所在地クイズ!!</title>

</head>

<body>

<?php

echo "今回の正答数は<br>";

echo $_SESSION['times'], "問中",

$_SESSION['right'], "問";

echo "<br>";

echo "お疲れさまでした<br>";

?>

<input type="submit"

value="トップページに戻る"

name="reset">

</form>

</body>

</html>

Markdownを活用する（Vol.92掲載）

投稿日：2024.09.25　｜　カテゴリー：　コード

著者：藤原由来

本連載では文書の装飾・構造付けを手軽に行える記法であるMarkdownを用いて、さまざまな文書や成果物を作成する方法を紹介します。今回は前回に引き続き、Markdownを用いて書籍を制作できる組版アプリ「Vivliostyle」について解説します。特に、技術同人誌の制作方法と、印刷所へ入稿する際の注意
点について説明します。　

シェルスクリプトマガジン Vol.92は以下のリンク先でご購入できます。

図7　書き換えたVivliostyleの設定ファイル

module.exports = {
  title: 'sample-book-kagakunofushigi', 
  author: 'アンリイ・ファブル（大杉栄、伊藤野枝訳）', 
  language: 'ja',
  size: 'JIS-B5',
  theme: '@vivliostyle/theme-techbook@^1.0.1', 
  entryContext: './manuscripts',
  entry: [
   'index.md',
   '01.md',
   '02.md',
   '03.md',
   '04.md',
   '05.md',
   '06.md',
   '07.md',
   '08.md',
   '09.md',
   'colophon.md',
  ],
  workspaceDir: '.vivliostyle',
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

module.exports = {

title: 'sample-book-kagakunofushigi',

author: 'アンリイ・ファブル（大杉栄、伊藤野枝訳）',

language: 'ja',

size: 'JIS-B5',

theme: '@vivliostyle/theme-techbook@^1.0.1',

entryContext: './manuscripts',

entry: [

'index.md',

'01.md',

'02.md',

'03.md',

'04.md',

'05.md',

'06.md',

'07.md',

'08.md',

'09.md',

'colophon.md',

],

workspaceDir: '.vivliostyle',

}

図8　扉のindex.mdファイル

# 科学の不思議
アンリイ・ファブル（大杉栄、伊藤野枝訳）

© 某サークル, 20xx

1

2

3

4

# 科学の不思議

アンリイ・ファブル（大杉栄、伊藤野枝訳）

図9　奥付のcolophon.mdファイル

## 科学の不思議

20xx年x月x日　初版発行

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

- 発行　某サークル
- 著者　アンリイ・ファブル
- 翻訳　大杉栄、伊藤野枝
- 編集　シェル花子
- 連絡先 foo@example.com
- 印刷　サンプル印刷

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

底本は青空文庫から転載・改変しました。

- ファーブル ジャン・アンリ『科学の不思議』（大杉 栄、伊藤 野枝 訳）

© 某サークル, 20xx

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

## 科学の不思議

20xx年x月x日　初版発行

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

- 発行　某サークル

- 著者　アンリイ・ファブル

- 翻訳　大杉栄、伊藤野枝

- 編集　シェル花子

- 連絡先 foo@example.com

- 印刷　サンプル印刷

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

底本は青空文庫から転載・改変しました。

- ファーブルジャン・アンリ『科学の不思議』（大杉栄、伊藤野枝訳）

図11　my-theme.cssファイル内のCSSを反映する設定

  theme: [
    '@vivliostyle/theme-techbook@^1.0.1',
    'themes/my-theme.css',
  ],

1

2

3

4

theme: [

'@vivliostyle/theme-techbook@^1.0.1',

'themes/my-theme.css',

],

図12　扉と奥付用のCSS

/* 扉 */
section#title-page {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 50vh;
  margin: 0;
}

/* 奥付 */
section#colophon {
  position: relative;
  float-reference: page;
  float: bottom;
  margin-bottom: 0;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

/* 扉 */

section#title-page {

display: flex;

justify-content: center;

align-items: center;

text-align: center;

height: 50vh;

margin: 0;

}

/* 奥付 */

section#colophon {

position: relative;

float-reference: page;

float: bottom;

margin-bottom: 0;

}

図13　扉のindex.mdファイルの変更

<section id="title-page">

# 科学の不思議

アンリイ・ファブル（大杉栄、伊藤野枝訳）

© 某サークル, 20xx

</section>

1

2

3

4

5

6

7

8

9

# 科学の不思議

アンリイ・ファブル（大杉栄、伊藤野枝訳）

</section>

図14　奥付のcolophon.mdファイルの変更

<section id="colophon" role="doc-colophon">

## 科学の不思議

20xx年x月x日　初版発行

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

- 発行　某サークル
- 著者　アンリイ・ファブル
- 翻訳　大杉栄、伊藤野枝
- 編集　シェル花子
- 連絡先 foo@example.com
- 印刷　サンプル印刷

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

底本は青空文庫から転載・改変しました。

- ファーブル ジャン・アンリ『科学の不思議』（大杉 栄、伊藤 野枝 訳）

© 某サークル, 20xx

</section>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

## 科学の不思議

20xx年x月x日　初版発行

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

- 発行　某サークル

- 著者　アンリイ・ファブル

- 翻訳　大杉栄、伊藤野枝

- 編集　シェル花子

- 連絡先 foo@example.com

- 印刷　サンプル印刷

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

底本は青空文庫から転載・改変しました。

- ファーブルジャン・アンリ『科学の不思議』（大杉栄、伊藤野枝訳）

</section>

図17　目次を自動設定する設定

（略）
  entryContext: './manuscripts',
  toc: {
    htmlPath: 'toc.html', 
    title: '目次',
  },
  entry: [
   'index.md',
    { rel: 'contents' },
   '01.md',
（略）

1

2

3

4

5

6

7

8

9

10

11

（略）

entryContext: './manuscripts',

toc: {

htmlPath: 'toc.html',

title: '目次',

},

entry: [

'index.md',

{ rel: 'contents' },

'01.md',

（略）

Pythonあれこれ（Vol.92掲載）

投稿日：2024.09.25　｜　カテゴリー：　コード

著者：飯尾淳

本連載では「Pythonを昔から使っているものの、それほど使いこなしてはいない」という筆者が、いろいろな日常業務をPythonで処理することで、立派な「蛇使い」に育つことを目指します。その過程を温かく見守ってください。皆さんと共に勉強していきましょう。第22回では、機械学習ライブラリ「PyTorch」を使って、画像内の、歩行者が写っている領域を自動認識するPythonプログラムを作成します。

シェルスクリプトマガジン Vol.92は以下のリンク先でご購入できます。

図3　47番のデータを確認するPythonコード

import matplotlib.pyplot as plt
from torchvision.io import read_image

image =read_image(
    "data/PennFudanPed/PNGImages/FudanPed00047.png")
mask = read_image(
    "data/PennFudanPed/PedMasks/FudanPed00047_mask.png")
plt.figure(figsize=(16, 8))
plt.subplot(121)
plt.title("Image")
plt.imshow(image.permute(1, 2, 0))
plt.subplot(122)
plt.title("Mask")
plt.imshow(mask.permute(1, 2, 0))

1

2

3

4

5

6

7

8

9

10

11

12

13

14

import matplotlib.pyplot as plt

from torchvision.io import read_image

image =read_image(

"data/PennFudanPed/PNGImages/FudanPed00047.png")

mask = read_image(

"data/PennFudanPed/PedMasks/FudanPed00047_mask.png")

plt.figure(figsize=(16, 8))

plt.subplot(121)

plt.title("Image")

plt.imshow(image.permute(1, 2, 0))

plt.subplot(122)

plt.title("Mask")

plt.imshow(mask.permute(1, 2, 0))

図5　PennFudanDataSetクラスを定義するPythonコード

import os
import torch
from torchvision.io import read_image
from torchvision.ops.boxes import masks_to_boxes
from torchvision import tv_tensors
from torchvision.transforms.v2 import functional as F

class PennFudanDataset(torch.utils.data.Dataset):
  def __init__(self, root, transforms):
    self.root = root
    self.transforms = transforms
    # イメージデータとマスクデータをロードし、ソートして並べておく
    self.imgs = \
      list(sorted(os.listdir(os.path.join(root, "PNGImages"))))
    self.masks = \
      list(sorted(os.listdir(os.path.join(root, "PedMasks"))))

  def __getitem__(self, idx):
    # イメージとマスクのロード
    img_path = \
      os.path.join(self.root, "PNGImages", self.imgs[idx])
    mask_path = \
      os.path.join(self.root, "PedMasks", self.masks[idx])
    img = read_image(img_path)
    mask = read_image(mask_path)
    # インスタンスは色別にエンコードされていて……
    obj_ids = torch.unique(mask)
    # 最初のIDは背景色なので削除
    obj_ids = obj_ids[1:]
    num_objs = len(obj_ids)
    # 色別にエンコードされているマスクを2値マスクに分ける
    masks = \
      (mask == obj_ids[:, None, None]).to(dtype=torch.uint8)
    # マスクデータに対してバウンディングボックスを求める
    boxes = masks_to_boxes(masks)
    labels = torch.ones((num_objs,), dtype=torch.int64)
    image_id = idx
    area = (boxes[:, 3] - boxes[:, 1]) * (boxes[:, 2] - boxes[:, 0])
    # 群衆でないと仮定
    iscrowd = torch.zeros((num_objs,), dtype=torch.int64)
    # tv_tensorsイメージに変換する
    img = tv_tensors.Image(img)
    target = {}
    target["boxes"] = \
      tv_tensors.BoundingBoxes(boxes,
        format="XYXY", canvas_size=F.get_size(img))
    target["masks"] = tv_tensors.Mask(masks)
    target["labels"] = labels
    target["image_id"] = image_id
    target["area"] = area
    target["iscrowd"] = iscrowd

    if self.transforms is not None:
      img, target = self.transforms(img, target)

    return img, target

  def __len__(self):
    return len(self.imgs)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

import os

import torch

from torchvision.io import read_image

from torchvision.ops.boxes import masks_to_boxes

from torchvision import tv_tensors

from torchvision.transforms.v2 import functional as F

class PennFudanDataset(torch.utils.data.Dataset):

def __init__(self, root, transforms):

self.root = root

self.transforms = transforms

# イメージデータとマスクデータをロードし、ソートして並べておく

self.imgs = \

list(sorted(os.listdir(os.path.join(root, "PNGImages"))))

self.masks = \

list(sorted(os.listdir(os.path.join(root, "PedMasks"))))

def __getitem__(self, idx):

# イメージとマスクのロード

img_path = \

os.path.join(self.root, "PNGImages", self.imgs[idx])

mask_path = \

os.path.join(self.root, "PedMasks", self.masks[idx])

img = read_image(img_path)

mask = read_image(mask_path)

# インスタンスは色別にエンコードされていて……

obj_ids = torch.unique(mask)

# 最初のIDは背景色なので削除

obj_ids = obj_ids[1:]

num_objs = len(obj_ids)

# 色別にエンコードされているマスクを2値マスクに分ける

masks = \

(mask == obj_ids[:, None, None]).to(dtype=torch.uint8)

# マスクデータに対してバウンディングボックスを求める

boxes = masks_to_boxes(masks)

labels = torch.ones((num_objs,), dtype=torch.int64)

image_id = idx

area = (boxes[:, 3] - boxes[:, 1]) * (boxes[:, 2] - boxes[:, 0])

# 群衆でないと仮定

iscrowd = torch.zeros((num_objs,), dtype=torch.int64)

# tv_tensorsイメージに変換する

img = tv_tensors.Image(img)

target = {}

target["boxes"] = \

tv_tensors.BoundingBoxes(boxes,

format="XYXY", canvas_size=F.get_size(img))

target["masks"] = tv_tensors.Mask(masks)

target["labels"] = labels

target["image_id"] = image_id

target["area"] = area

target["iscrowd"] = iscrowd

if self.transforms is not None:

img, target = self.transforms(img, target)

return img, target

def __len__(self):

return len(self.imgs)

図6　get_model_instance_segmentation()関数を定義するPythonコード

import torchvision
from torchvision.models.detection.faster_rcnn \
  import FastRCNNPredictor
from torchvision.models.detection.mask_rcnn \
  import MaskRCNNPredictor

def get_model_instance_segmentation(num_classes):
  # COCOで事前学習済みのモデルデータをロードする
  model = torchvision.models.detection.maskrcnn_resnet50_fpn(
            weights="DEFAULT")
  # 入力特徴量
  in_features = \
    model.roi_heads.box_predictor.cls_score.in_features
  # num_classesで指定するクラスの分類器をセット（今回は2クラス）
  model.roi_heads.box_predictor = \
    FastRCNNPredictor(in_features, num_classes)
  # マスク判別器も同様に設定
  in_features_mask = \
    model.roi_heads.mask_predictor.conv5_mask.in_channels
  hidden_layer = 256
  model.roi_heads.mask_predictor = MaskRCNNPredictor(
    in_features_mask,
    hidden_layer,
    num_classes
  )
  return model

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

import torchvision

from torchvision.models.detection.faster_rcnn \

import FastRCNNPredictor

from torchvision.models.detection.mask_rcnn \

import MaskRCNNPredictor

def get_model_instance_segmentation(num_classes):

# COCOで事前学習済みのモデルデータをロードする

model = torchvision.models.detection.maskrcnn_resnet50_fpn(

weights="DEFAULT")

# 入力特徴量

in_features = \

model.roi_heads.box_predictor.cls_score.in_features

# num_classesで指定するクラスの分類器をセット（今回は2クラス）

model.roi_heads.box_predictor = \

FastRCNNPredictor(in_features, num_classes)

# マスク判別器も同様に設定

in_features_mask = \

model.roi_heads.mask_predictor.conv5_mask.in_channels

hidden_layer = 256

model.roi_heads.mask_predictor = MaskRCNNPredictor(

in_features_mask,

hidden_layer,

num_classes

)

return model

図7　get_transform()関数を定義するPythonコード

from torchvision.transforms import v2 as T

def get_transform(train):
  transforms = []
  if train:
    transforms.append(T.RandomHorizontalFlip(0.5))
  transforms.append(T.ToDtype(torch.float, scale=True))
  transforms.append(T.ToPureTensor())
  return T.Compose(transforms)

1

2

3

4

5

6

7

8

9

from torchvision.transforms import v2 as T

def get_transform(train):

transforms = []

if train:

transforms.append(T.RandomHorizontalFlip(0.5))

transforms.append(T.ToDtype(torch.float, scale=True))

transforms.append(T.ToPureTensor())

return T.Compose(transforms)

図8　追加学習の準備をするためのPythonコード

import utils
from engine import train_one_epoch, evaluate

device = torch.device('cuda') \
  if torch.cuda.is_available() else torch.device('cpu')
# 背景と人物の2クラス判別器を作成する
num_classes = 2
# データセットはすでにロード済みのものを用いる
dataset = \
  PennFudanDataset('data/PennFudanPed',
                   get_transform(train=True))
dataset_test = \
  PennFudanDataset('data/PennFudanPed',
                   get_transform(train=False))
# データセットを学習用とテスト用に分ける
indices = torch.randperm(len(dataset)).tolist()
dataset = torch.utils.data.Subset(dataset, indices[:-50])
dataset_test = torch.utils.data.Subset(
                 dataset_test, indices[-50:])
# 学習と評価用のデータローダを定義
data_loader = torch.utils.data.DataLoader(
  dataset,
  batch_size=2,
  shuffle=True,
  num_workers=4,
  collate_fn=utils.collate_fn
)
data_loader_test = torch.utils.data.DataLoader(
  dataset_test,
  batch_size=1,
  shuffle=False,
  num_workers=4,
  collate_fn=utils.collate_fn
)
# 先ほど定義したヘルパーファンクションを用いてモデルを用意
model = get_model_instance_segmentation(num_classes)
# モデルをデバイスに結び付ける
model.to(device)
# 最適化器を作成
params = [p for p in model.parameters() if p.requires_grad]
optimizer = torch.optim.SGD(
  params,
  lr=0.005,
  momentum=0.9,
  weight_decay=0.0005
)
# 学習レートのスケジューラを設定
lr_scheduler = torch.optim.lr_scheduler.StepLR(
  optimizer,
  step_size=3,
  gamma=0.1
)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

import utils

from engine import train_one_epoch, evaluate

device = torch.device('cuda') \

if torch.cuda.is_available() else torch.device('cpu')

# 背景と人物の2クラス判別器を作成する

num_classes = 2

# データセットはすでにロード済みのものを用いる

dataset = \

PennFudanDataset('data/PennFudanPed',

get_transform(train=True))

dataset_test = \

PennFudanDataset('data/PennFudanPed',

get_transform(train=False))

# データセットを学習用とテスト用に分ける

indices = torch.randperm(len(dataset)).tolist()

dataset = torch.utils.data.Subset(dataset, indices[:-50])

dataset_test = torch.utils.data.Subset(

dataset_test, indices[-50:])

# 学習と評価用のデータローダを定義

data_loader = torch.utils.data.DataLoader(

dataset,

batch_size=2,

shuffle=True,

num_workers=4,

collate_fn=utils.collate_fn

)

data_loader_test = torch.utils.data.DataLoader(

dataset_test,

batch_size=1,

shuffle=False,

num_workers=4,

collate_fn=utils.collate_fn

)

# 先ほど定義したヘルパーファンクションを用いてモデルを用意

model = get_model_instance_segmentation(num_classes)

# モデルをデバイスに結び付ける

model.to(device)

# 最適化器を作成

params = [p for p in model.parameters() if p.requires_grad]

optimizer = torch.optim.SGD(

params,

lr=0.005,

momentum=0.9,

weight_decay=0.0005

)

# 学習レートのスケジューラを設定

lr_scheduler = torch.optim.lr_scheduler.StepLR(

optimizer,

step_size=3,

gamma=0.1

)

図9　物体認識と領域セグメンテーションを実施するPythonコード

import matplotlib.pyplot as plt
from torchvision.utils \
  import draw_bounding_boxes, draw_segmentation_masks

image = \
  read_image("data/PennFudanPed/PNGImages/FudanPed00047.png")
eval_transform = get_transform(train=False)
model.eval()
with torch.no_grad():
  x = eval_transform(image)
  # RGBA -> RGBにコンバートしてデバイスにひも付ける
  x = x[:3, ...].to(device)
  predictions = model([x, ])
  pred = predictions[0]
image = (255.0 * (image - image.min()) / 
        (image.max() - image.min())).to(torch.uint8)
image = image[:3, ...]
pred_labels = [f"pedestrian: {score:.3f}" for label, \
               score in zip(pred["labels"], pred["scores"])]
pred_boxes = pred["boxes"].long()
output_image = draw_bounding_boxes(image, 
                 pred_boxes, pred_labels, colors="red")
masks = (pred["masks"] > 0.7).squeeze(1)
output_image = draw_segmentation_masks(output_image, 
                 masks, alpha=0.5, colors="blue")
plt.figure(figsize=(12, 12))
plt.imshow(output_image.permute(1, 2, 0))

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

import matplotlib.pyplot as plt

from torchvision.utils \

import draw_bounding_boxes, draw_segmentation_masks

image = \

read_image("data/PennFudanPed/PNGImages/FudanPed00047.png")

eval_transform = get_transform(train=False)

model.eval()

with torch.no_grad():

x = eval_transform(image)

# RGBA -> RGBにコンバートしてデバイスにひも付ける

x = x[:3, ...].to(device)

predictions = model([x, ])

pred = predictions[0]

image = (255.0 * (image - image.min()) /

(image.max() - image.min())).to(torch.uint8)

image = image[:3, ...]

pred_labels = [f"pedestrian: {score:.3f}" for label, \

score in zip(pred["labels"], pred["scores"])]

pred_boxes = pred["boxes"].long()

output_image = draw_bounding_boxes(image,

pred_boxes, pred_labels, colors="red")

masks = (pred["masks"] > 0.7).squeeze(1)

output_image = draw_segmentation_masks(output_image,

masks, alpha=0.5, colors="blue")

plt.figure(figsize=(12, 12))

plt.imshow(output_image.permute(1, 2, 0))

図11　Penn-Fudanデータセットを用いて追加学習するPythonコード

# 2エポックだけ学習させてみる
num_epochs = 2
for epoch in range(num_epochs):
  # 10回ごとに表示させながら1エポックの学習を実行
  train_one_epoch(model, optimizer, data_loader, 
                  device, epoch, print_freq=10)
  # 学習レートをアップデート
  lr_scheduler.step()
  # テストデータで評価
  evaluate(model, data_loader_test, device=device)

1

2

3

4

5

6

7

8

9

10

# 2エポックだけ学習させてみる

num_epochs = 2

for epoch in range(num_epochs):

# 10回ごとに表示させながら1エポックの学習を実行

train_one_epoch(model, optimizer, data_loader,

device, epoch, print_freq=10)

# 学習レートをアップデート

lr_scheduler.step()

# テストデータで評価

evaluate(model, data_loader_test, device=device)

特別企画　イノシシ撃退機を作る　ソフト作成編（Vol.92記載）

投稿日：2024.09.25　｜　カテゴリー：　コード

著者：米田聡

「Interface」「CQ ham radio」「トランジスタ技術」などの雑誌を出版するCQ出版社の電子部品セット「イノシシ撃退機部品セットVer.1」を組み立て、ソフトウエアに一工夫を加えてイノシシ撃退機を作ります。今回は完成したハードウエア向けにソフトウエアを作成します。

シェルスクリプトマガジン Vol.92は以下のリンク先でご購入できます。

図18　PWM機能の初期化

（略）
#define PWM_PIN 20
（略）
#define PWM_SLICE_NUM pwm_gpio_to_slice_num(PWM_PIN)
（略）
void pwm_gpio_init() {
（略）
    gpio_set_function(PWM_PIN, GPIO_FUNC_PWM);
    pwm_set_wrap(PWM_SLICE_NUM, 4095);
    pwm_set_clkdiv(PWM_SLICE_NUM, 2);
    pwm_set_irq_enabled(PWM_SLICE_NUM, true);

    irq_set_exclusive_handler(PWM_IRQ_WRAP, on_pwm_wrap);
    irq_set_enabled(PWM_IRQ_WRAP, true);
（略）
}
（略）

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

（略）

#define PWM_PIN 20

（略）

#define PWM_SLICE_NUM pwm_gpio_to_slice_num(PWM_PIN)

（略）

void pwm_gpio_init() {

（略）

gpio_set_function(PWM_PIN, GPIO_FUNC_PWM);

pwm_set_wrap(PWM_SLICE_NUM, 4095);

pwm_set_clkdiv(PWM_SLICE_NUM, 2);

pwm_set_irq_enabled(PWM_SLICE_NUM, true);

irq_set_exclusive_handler(PWM_IRQ_WRAP, on_pwm_wrap);

irq_set_enabled(PWM_IRQ_WRAP, true);

（略）

}

（略）

図20　割り込みハンドラ

void on_pwm_wrap() {
    pwm_clear_irq(PWM_SLICE_NUM);
（略）
    uint16_t duty = convert_flash_data_to_duty(spi_rx_buf[flash_data_index], spi_rx_buf[flash_data_index + 1]);
    pwm_set_chan_level(PWM_SLICE_NUM, PWM_CHAN_A, duty);
    flash_data_index += 2;
    if (flash_data_index >= 256) {
        flash_data_index = 0;
    }
（略）
}

1

2

3

4

5

6

7

8

9

10

11

void on_pwm_wrap() {

pwm_clear_irq(PWM_SLICE_NUM);

（略）

uint16_t duty = convert_flash_data_to_duty(spi_rx_buf[flash_data_index], spi_rx_buf[flash_data_index + 1]);

pwm_set_chan_level(PWM_SLICE_NUM, PWM_CHAN_A, duty);

flash_data_index += 2;

if (flash_data_index >= 256) {

flash_data_index = 0;

}

（略）

}

図21　ダブルバッファを使用する修正

■34～37行目の修正コード
#ifdef FLASH_DATA_TO_DUTY
// ダブルバッファ化
uint8_t spi_rx_buf[2][256];
volatile uint32_t flash_data_index = 0;
#endif

■45～54行目の修正コード
// バッファ選択
volatile uint32_t buf_flip = 0;

void on_pwm_wrap() {
    pwm_clear_irq(PWM_SLICE_NUM);

    #ifdef FLASH_DATA_TO_DUTY
    uint16_t duty = convert_flash_data_to_duty(spi_rx_buf[buf_flip][flash_data_index], spi_rx_buf[buf_flip][flash_data_index + 1]);
    pwm_set_chan_level(PWM_SLICE_NUM, PWM_CHAN_A, duty);
    flash_data_index += 2;
    if (flash_data_index >= 256) {
        // バッファ切り替え
        buf_flip ^= 1;
        flash_data_index = 0;
    }
}

■87～105行目の修正コード
void play_sound() {
    // バッファ切り替え（ローカル）
    int flip = 0;

    flash_data_index = 0;
    buf_flip = 0;
    pwm_set_enabled(PWM_SLICE_NUM, true);	//mu0918

    for(uint32_t address = 0; address < FLASH_SIZE; address += 256) {
        gpio_put(PICO_DEFAULT_SPI_SSEL_PIN, 0);  // Set the CS pin to active LOW
        
        // Send the read command
        uint8_t spi_tx_buf[] = {0x03, (address >> 16) & 0xFF, (address >> 8) & 0xFF, address & 0xFF};
        spi_write_blocking(spi, spi_tx_buf, 4);

        // Read the data
        spi_read_blocking(spi, 0, spi_rx_buf[flip], 256);
        // バッファ切り替え
        flip ^= 1;
        
        gpio_put(PICO_DEFAULT_SPI_SSEL_PIN, 1);  // Set the CS pin to non-active HIGH
    }
    pwm_set_enabled(PWM_SLICE_NUM, false);	//mu0918
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

■34～37行目の修正コード

#ifdef FLASH_DATA_TO_DUTY

// ダブルバッファ化

uint8_t spi_rx_buf[2][256];

volatile uint32_t flash_data_index = 0;

#endif

■45～54行目の修正コード

// バッファ選択

volatile uint32_t buf_flip = 0;

void on_pwm_wrap() {

pwm_clear_irq(PWM_SLICE_NUM);

#ifdef FLASH_DATA_TO_DUTY

uint16_t duty = convert_flash_data_to_duty(spi_rx_buf[buf_flip][flash_data_index], spi_rx_buf[buf_flip][flash_data_index + 1]);

pwm_set_chan_level(PWM_SLICE_NUM, PWM_CHAN_A, duty);

flash_data_index += 2;

if (flash_data_index >= 256) {

// バッファ切り替え

buf_flip ^= 1;

flash_data_index = 0;

}

■87～105行目の修正コード

void play_sound() {

// バッファ切り替え（ローカル）

int flip = 0;

flash_data_index = 0;

buf_flip = 0;

pwm_set_enabled(PWM_SLICE_NUM, true); //mu0918

for(uint32_t address = 0; address < FLASH_SIZE; address += 256) {

gpio_put(PICO_DEFAULT_SPI_SSEL_PIN, 0); // Set the CS pin to active LOW

// Send the read command

uint8_t spi_tx_buf[] = {0x03, (address >> 16) & 0xFF, (address >> 8) & 0xFF, address & 0xFF};

spi_write_blocking(spi, spi_tx_buf, 4);

// Read the data

spi_read_blocking(spi, 0, spi_rx_buf[flip], 256);

// バッファ切り替え

flip ^= 1;

gpio_put(PICO_DEFAULT_SPI_SSEL_PIN, 1); // Set the CS pin to non-active HIGH

}

pwm_set_enabled(PWM_SLICE_NUM, false); //mu0918

}

シェルスクリプトマガジンvol.92 Web掲載記事まとめ

投稿日：2024.09.25　｜　カテゴリー：　コード

004　レポート　仮想化ソフト「VirtualBox」の新版リリース
005　レポート　マイコンボード「Raspberry Pi Pico 2」登場
006　製品レビュー　組み込み機器「CH32V003ボード」
007　NEWS FLASH
008　特集1　古いRaspberry Piを復活させる/麻生二郎
016　特集2　統合運用管理ソフトウエア Hinemos入門/倉田晃次、加藤達也
026　特別企画　イノシシ撃退機を作る　ソフト作成編/米田聡　コード掲載
036　特別企画　Rocky Linux 9のインストール/麻生二郎
042　Pythonあれこれ/飯尾淳　コード掲載
048　Markdownを活用する/藤原由来　コード掲載
058　中小企業手作りIT化奮戦記/菅雄一
062　香川大学SLPからお届け！/池内稜來斗　コード掲載
068　これだけは覚えておきたいLinuxコマンド/大津真
078　Techパズル/gori.sh
079　コラム「SEの働き方の新しい仕組みを作る」/シェル魔人　

Vol.92

投稿日：2024.09.25　｜　カテゴリー：　バックナンバー

　小型コンピュータボード「Raspberry Pi」が登場して約12年が過ぎました。現在では、AI（人工知能）処理ができ、パソコン並みの性能を持つものに進化しています。ただ、センサーなどの制御、液晶や有機ELなどのパネルへの出力といった分野では、初期のRaspberry Piでも十分活躍できます。特集1では、初期のRaspberry Piを復活する方法を紹介しています。具体的には、無線通信機能を付加して使い勝手を向上します。
　特集2では、NTTデータ最先端技術が開発する統合運用管理ソフトウエア「Hinemos」を解説しています。同ソフトウエアは、オープンソースであり、誰でも無料で利用できます。サーバーやネットワークなどのシステムの監視やジョブ管理、運用の自動化を実現します。
い。
　特別企画では、前号に引き続きイノシシ撃退機、加えてCentOS Linuxの代替となるLinuxディストリビューション「Rocky Linux」を扱っています。
　このほか、連載「Pythonあれこれ」では機械学習ライブラリ「PyTorch」でAIによる歩行者認識の実現方法を紹介しています。
　今回も読み応え十分のシェルスクリプトマガジン Vol.92。お見逃しなく!

※記事掲載のコードはこちら。記事の補足情報はこちら

※読者アンケートはこちら

Vol.92 補足情報

投稿日：2024.09.19　｜　カテゴリー：　コード

連載　香川大学SLPからお届け！

記事中で作成したクイズWebサイト用のコードや、データベースへのデータ入力用のファイルをまとめたアーカイブファイルがここからダウンロードできます。

情報は随時更新致します。

これだけは覚えておきたいLinuxコマンド（Vol.91掲載）

投稿日：2024.07.25　｜　カテゴリー：　コード

著者：大津真

本連載では、Linuxの初心者に覚えておいてほしいコマンドを紹介していきます。ここで紹介するコマンドさえ押さえておけば、基本的な操作に困ることはなくなるでしょう。第2回では、主にテキストファイルを処理するための基本コマンドについて解説します。

シェルスクリプトマガジン Vol.91は以下のリンク先でご購入できます。

図6　「members.csv」ファイルの内容

<code>001,大津一郎,男,43,東京
002,江南直子,女,8,埼玉
003,唐木田信ー,男,43,福岡
004,森岡一郎,男,41,東京
005,秋山敬一郎,男,44,秋田
006,山田謙一,男,9,福岡
007,山田一郎,男,45,東京
009,福岡花子,女,35,東京
010,白戸二郎,男,39,北海道</code>

1

2

3

4

5

6

7

8

9

<code>001,大津一郎,男,43,東京

002,江南直子,女,8,埼玉

003,唐木田信ー,男,43,福岡

004,森岡一郎,男,41,東京

005,秋山敬一郎,男,44,秋田

006,山田謙一,男,9,福岡

007,山田一郎,男,45,東京

009,福岡花子,女,35,東京

010,白戸二郎,男,39,北海道</code>

中小企業手作りIT化奮戦記（Vol.91掲載）

投稿日：2024.07.25　｜　カテゴリー：　コード

著者：佐藤楓真

今回は、「焼きなまし法」と呼ばれる手法で、すべての都市を1回訪問して出発地点に帰るまでの最短経路を求める「巡回セールスマン問題」を近似的に解いてみます。焼きなまし法のベースとなる「山登り法」についても解説します。使用するプログラミング言語は、C++です。

シェルスクリプトマガジン Vol.91は以下のリンク先でご購入できます。

図3　図1の巡回セールスマン問題を山登り法で解くC++プログラムの例

#include <iostream>
#include <algorithm>
using namespace std;
#define TL 3  //制限時間
#define N 4

int d[N][N] = {{0, 2, 10, 5},
               {2, 0, 5, 3},
               {10, 5, 0, 4},
               {5, 3, 4, 0}};
int ans[N+1] = {0, 1, 3, 2, 0};
int rand_num(void) {
  return rand() % N + 1;
}
int calc_dist(void) {
  int sum = 0;
  for (int i = 0; i < N; i++) {
      sum += d[ans[i]][ans[i+1]];
  }
  return sum;
}
int main(void) {
  srand((unsigned)time(NULL));
  int st_time = clock();
  while ((clock() - st_time) / CLOCKS_PER_SEC < TL) {
    int L = rand_num(), R = rand_num();
    if (L > R) swap(L, R);
    int bf_dist = calc_dist();
    reverse(ans + L, ans + R);
    int af_dist = calc_dist();
    if (bf_dist < af_dist) reverse(ans + L, ans + R);
  }
  for (int i = 0; i < N+1; i++) {
    cout << ans[i] + 1 << " ";
  }
  cout << endl << calc_dist() << endl;
  return 0;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

#include <iostream>

#include <algorithm>

using namespace std;

#define TL 3 //制限時間

#define N 4

int d[N][N] = {{0, 2, 10, 5},

{2, 0, 5, 3},

{10, 5, 0, 4},

{5, 3, 4, 0}};

int ans[N+1] = {0, 1, 3, 2, 0};

int rand_num(void) {

return rand() % N + 1;

}

int calc_dist(void) {

int sum = 0;

for (int i = 0; i < N; i++) {

sum += d[ans[i]][ans[i+1]];

}

return sum;

}

int main(void) {

srand((unsigned)time(NULL));

int st_time = clock();

while ((clock() - st_time) / CLOCKS_PER_SEC < TL) {

int L = rand_num(), R = rand_num();

if (L > R) swap(L, R);

int bf_dist = calc_dist();

reverse(ans + L, ans + R);

int af_dist = calc_dist();

if (bf_dist < af_dist) reverse(ans + L, ans + R);

}

for (int i = 0; i < N+1; i++) {

cout << ans[i] + 1 << " ";

}

cout << endl << calc_dist() << endl;

return 0;

}

図4　都市数「5000」のテスト用データを作成するC++プログラム

#include <iostream>
#include <vector>
#include <fstream>
#include <string>
using namespace std;
#define N 5000

int main(void) {
  srand((unsigned)time(NULL));
  for (int num = 1; num <= 100; num++) {
    vector<vector<int>> d(N, vector<int>(N));
    for (int i = 0; i < N; i++) {
      for (int j = i; j < N; j++) {
        if (i == j) {
          d[i][j] = 0;
        } else {
          d[i][j] = rand() % 5000 + 1;
        }
      }
    }
    for (int i = 0; i < N; i++) {
      for (int j = 0; j < i; j++) {
        d[i][j] = d[j][i];
      }
    }
    string name = "case" + to_string(num) + ".txt";
    ofstream out(name);
    out << N << endl;
    for (int i = 0; i < N; i++) {
      for (int j = 0; j < N; j++) {
        out << d[i][j] << " ";
      }
        out << endl;
    }
  }
  return 0;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

#include <iostream>

#include <vector>

#include <fstream>

#include <string>

using namespace std;

#define N 5000

int main(void) {

srand((unsigned)time(NULL));

for (int num = 1; num <= 100; num++) {

vector<vector<int>> d(N, vector<int>(N));

for (int i = 0; i < N; i++) {

for (int j = i; j < N; j++) {

if (i == j) {

d[i][j] = 0;

} else {

d[i][j] = rand() % 5000 + 1;

}

for (int i = 0; i < N; i++) {

for (int j = 0; j < i; j++) {

d[i][j] = d[j][i];

}

string name = "case" + to_string(num) + ".txt";

ofstream out(name);

out << N << endl;

for (int i = 0; i < N; i++) {

for (int j = 0; j < N; j++) {

out << d[i][j] << " ";

}

out << endl;

}

return 0;

}

図5　テスト用データに基づく巡回セールスマン問題を山登り法で解くC++プログラムの例

#include <iostream>
#include <algorithm>
#include <vector>
#include <string>
#include <fstream>
using namespace std;
#define TL 3  //制限時間

int calc_dist(vector<vector<int>>& dist, vector<int>& ans, int N) {
  int sum = 0;
  for (int i = 0; i < N; i++) {
    sum += dist[ans[i]][ans[i+1]];
  }
  return sum;
}
int rand_num(int N){
  return rand() % N + 1;
}
int main(void) {
  long long ave = 0;
  for (int num = 1; num <= 100; num++) {
    srand((unsigned)time(NULL));
    string name = "case" + to_string(num) + ".txt";
    ifstream infile(name);
    int N;
    infile >> N;
    vector<vector<int>> d(N, vector<int>(N));
    for (int i = 0; i < N; i++) {
      for (int j = 0; j < N; j++) {
        infile >> d[i][j];
      }
    }
    vector<int> ans(N + 1);
    for (int i = 0; i < N; i++) ans[i] = i;
    ans[N] = 0;
    int st_time = clock();
    while ((clock() - st_time) / CLOCKS_PER_SEC < TL) {
      int bf_dist = calc_dist(d, ans, N);
      int L = rand_num(N), R = rand_num(N);
      if (L > R) swap(L, R);
      reverse(ans.begin() + L, ans.begin() + R);
      int af_dist = calc_dist(d, ans, N);
      if (af_dist > bf_dist) reverse(ans.begin() + L, ans.begin() + R);
    }
    ave += calc_dist(d, ans, N);
  }
  cout << ave / 100.0 << endl;
  return 0;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

#include <iostream>

#include <algorithm>

#include <vector>

#include <string>

#include <fstream>

using namespace std;

#define TL 3 //制限時間

int calc_dist(vector<vector<int>>& dist, vector<int>& ans, int N) {

int sum = 0;

for (int i = 0; i < N; i++) {

sum += dist[ans[i]][ans[i+1]];

}

return sum;

}

int rand_num(int N){

return rand() % N + 1;

}

int main(void) {

long long ave = 0;

for (int num = 1; num <= 100; num++) {

srand((unsigned)time(NULL));

string name = "case" + to_string(num) + ".txt";

ifstream infile(name);

int N;

infile >> N;

vector<vector<int>> d(N, vector<int>(N));

for (int i = 0; i < N; i++) {

for (int j = 0; j < N; j++) {

infile >> d[i][j];

}

vector<int> ans(N + 1);

for (int i = 0; i < N; i++) ans[i] = i;

ans[N] = 0;

int st_time = clock();

while ((clock() - st_time) / CLOCKS_PER_SEC < TL) {

int bf_dist = calc_dist(d, ans, N);

int L = rand_num(N), R = rand_num(N);

if (L > R) swap(L, R);

reverse(ans.begin() + L, ans.begin() + R);

int af_dist = calc_dist(d, ans, N);

if (af_dist > bf_dist) reverse(ans.begin() + L, ans.begin() + R);

}

ave += calc_dist(d, ans, N);

}

cout << ave / 100.0 << endl;

return 0;

}

図7　テスト用データに基づく巡回セールスマン問題を焼きなまし法で解くC++プログラムの例

#include <iostream>
#include <algorithm>
#include <vector>
#include <string>
#include <fstream>
#include <cmath>
using namespace std;
#define MAX_TMP 100.0  //初期温度
#define TL 3  //制限時間

int calc_dist(vector<vector<int>>& dist, vector<int>& ans, int N) {
  int sum = 0;
  for (int i = 0; i < N; i++) {
    sum += dist[ans[i]][ans[i+1]];
  }
  return sum;
}
int rand_num(int N) {
  return rand() % N + 1;
}
double rand_p(void) {
  return (double)rand() / RAND_MAX;
}
int main(void) {
  srand((unsigned)time(NULL));
  long long ave = 0;
  for (int num = 1; num <= 100; num++) {
    string name = "case" + to_string(num) + ".txt";
    ifstream infile(name);
    int N;
    infile >> N;
    vector<vector<int>> d(N, vector<int>(N));
    for (int i = 0; i < N; i++) {
      for (int j = 0; j < N; j++) {
        infile >> d[i][j];
      }
    }
    vector<int> ans(N + 1);
    for (int i = 0; i < N; i++) ans[i] = i;
    ans[N] = 0;
    int st_time = clock();  //焼きなまし開始時間
    while ((clock() - st_time) / CLOCKS_PER_SEC < TL ) {
      int bf_dist = calc_dist(d, ans, N);
      int L = rand_num(N), R = rand_num(N);
      if (L > R) swap(L, R);
      reverse(ans.begin() + L, ans.begin() + R);
      int af_dist = calc_dist(d, ans, N);
      double t = (double)(clock() - st_time) / CLOCKS_PER_SEC;  //経過時間
      double tmp = MAX_TMP - MAX_TMP * (t / TL);  //現在の温度
      double p = exp((bf_dist - af_dist) / tmp);  //採用確率
      if (rand_p() > p) reverse(ans.begin() + L, ans.begin() + R);
    }
    ave += calc_dist(d, ans, N);
  }
  cout << ave / 100.0 <<endl;
  return 0;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

#include <iostream>

#include <algorithm>

#include <vector>

#include <string>

#include <fstream>

#include <cmath>

using namespace std;

#define MAX_TMP 100.0 //初期温度

#define TL 3 //制限時間

int calc_dist(vector<vector<int>>& dist, vector<int>& ans, int N) {

int sum = 0;

for (int i = 0; i < N; i++) {

sum += dist[ans[i]][ans[i+1]];

}

return sum;

}

int rand_num(int N) {

return rand() % N + 1;

}

double rand_p(void) {

return (double)rand() / RAND_MAX;

}

int main(void) {

srand((unsigned)time(NULL));

long long ave = 0;

for (int num = 1; num <= 100; num++) {

string name = "case" + to_string(num) + ".txt";

ifstream infile(name);

int N;

infile >> N;

vector<vector<int>> d(N, vector<int>(N));

for (int i = 0; i < N; i++) {

for (int j = 0; j < N; j++) {

infile >> d[i][j];

}

vector<int> ans(N + 1);

for (int i = 0; i < N; i++) ans[i] = i;

ans[N] = 0;

int st_time = clock(); //焼きなまし開始時間

while ((clock() - st_time) / CLOCKS_PER_SEC < TL ) {

int bf_dist = calc_dist(d, ans, N);

int L = rand_num(N), R = rand_num(N);

if (L > R) swap(L, R);

reverse(ans.begin() + L, ans.begin() + R);

int af_dist = calc_dist(d, ans, N);

double t = (double)(clock() - st_time) / CLOCKS_PER_SEC; //経過時間

double tmp = MAX_TMP - MAX_TMP * (t / TL); //現在の温度

double p = exp((bf_dist - af_dist) / tmp); //採用確率

if (rand_p() > p) reverse(ans.begin() + L, ans.begin() + R);

}

ave += calc_dist(d, ans, N);

}

cout << ave / 100.0 <<endl;

return 0;

}

Markdownを活用する（Vol.91掲載）

投稿日：2024.07.25　｜　カテゴリー：　コード

著者：藤原由来

本連載では文書の装飾・構造付けを手軽に行える記法であるMarkdownを用いて、さまざまな文書や成果物を作成する方法を紹介します。今回は、Markdownを用いて書籍を制作できる組版アプリ「Vivliostyle」の導入と、書籍作成の基本について説明します。

シェルスクリプトマガジン Vol.91は以下のリンク先でご購入できます。

図11　chap1.mdファイルの内容

# 後注と脚注の例

これは後注[^1]の例です。
インラインで後注^[これも章の後ろに表示される]もできます。

[^1]: 各章の後部にまとめて出力されるタイプの注釈

こちらは脚注<span class="footnote">ページ直下に表示される</span>です。

1

2

3

4

5

6

7

8

# 後注と脚注の例

これは後注[^1]の例です。

インラインで後注^[これも章の後ろに表示される]もできます。

[^1]: 各章の後部にまとめて出力されるタイプの注釈

こちらは脚注<span class="footnote">ページ直下に表示される</span>です。

図12　chap2.mdファイルの内容

# {吾輩|わがはい}は猫である。

{吾輩|わがはい}は猫である。名前はまだ無い。

1

2

3

# {吾輩|わがはい}は猫である。

{吾輩|わがはい}は猫である。名前はまだ無い。

Pythonあれこれ（Vol.91掲載）

投稿日：2024.07.25　｜　カテゴリー：　コード

著者：飯尾淳

本連載では「Pythonを昔から使っているものの、それほど使いこなしてはいない」という筆者が、いろいろな日常業務をPythonで処理することで、立派な「蛇使い」に育つことを目指します。その過程を温かく見守ってください。皆さんと共に勉強していきましょう。第21回では、「ハノイの塔」の解法「GDHP（Gniibe Distributed Hanoi Protocol）」の手順をアニメーションで表示するPythonアプリを作成します。

シェルスクリプトマガジン Vol.91は以下のリンク先でご購入できます。

図2　GDHPの手順をアニメーションで表示するJavaScriptコード

const COLORS = [ 'crimson', 'forestgreen', 'yellow', 'royalblue',
                 'saddlebrown', 'hotpink', 'darkorange', 'darkmagenta' ];
const NUM_OF_DISKS = COLORS.length;
const BASE_LENGTH = 200;
const C_WIDTH  = 3.732 * BASE_LENGTH;
const C_HEIGHT = 3.500 * BASE_LENGTH;
const DISK_R = 0.9 * BASE_LENGTH;
const POLE_R = 15;
const POSITIONS = { 'Source'      : [0.268, 0.714],
                    'Auxiliary'   : [0.500, 0.286],
                    'Destination' : [0.732, 0.714] };
const FLASHING_COUNTER = 20;
const STEPS = 30;

class Vector {
  constructor(x,y) {
    this.x = x;
    this.y = y;
  }
}
class Position extends Vector {
  constructor(x,y) { super(x,y); }
  move(vec) {
    this.x += vec.x;
    this.y += vec.y;
  }
}
class Disk {
  constructor(level) {
    this.level = level;
    this.color = COLORS[level];
    this.r = (DISK_R-POLE_R)*(NUM_OF_DISKS-level)/NUM_OF_DISKS + POLE_R;
  }
}
class MovingDisk extends Disk {
  constructor(level,from,to) {
    super(level); 
    [sx,sy] = [from.pos.x,from.pos.y];
    [dx,dy] = [to.pos.x,  to.pos.y];
    this.pos = new Position(sx,sy);
    this.mvec = new Vector((dx-sx)/STEPS,(dy-sy)/STEPS);
    this.move_ctr = 0;
    this.from = from;
    this.to = to;
  }
  step_forward() {
    this.pos.move(this.mvec);
    this.move_ctr++;
  }
  finish_p() {
    var ret_flag = false;
    if (ret_flag = (this.move_ctr == STEPS)) {
      this.to.disks.push(new Disk(this.level));
    }
    return ret_flag;
  }
}
class Tower {
  constructor(name, disks, direction=null) {
    this.name = name;
    this.disks = [];
    for (var i = 0; i < disks; i++) {
      this.disks.push(new Disk(i));
    }
    this.direction = direction;
    this.moving = false;
    this.flash_ctr = 0;
  }
  get toplevel() {
    var l = this.disks.length;
    // '-1' means there is no disk.
    return (l > 0) ? this.disks[l-1].level : -1;
  }
}
var src = new Tower('Source', NUM_OF_DISKS);
var aux = new Tower('Auxiliary',   0, src);
var dst = new Tower('Destination', 0, src);
// In the case of NUM_OF_DISKS is odd, 
// the src must face the src.
// Otherwise, the src faces the aux.
src.direction = (COLORS.length % 2 == 1) ? dst : aux;
// the reference to moving disk is stored to this variable.
var moving_disk = null;

function setup() {
  createCanvas(C_WIDTH, C_HEIGHT);
  frameRate(30);
  [src,aux,dst].forEach(function(t) {
    [rx,ry] = POSITIONS[t.name];
    t.pos = new Position(rx * C_WIDTH, ry * C_HEIGHT);
  })
}
function base_drawing() {
  background('beige');
  [src,aux,dst].forEach(function(t) {
    // draw disks
    t.disks.forEach(function(d) {
      stroke('black');
      fill(d.color);
      ellipse(t.pos.x,t.pos.y,2*d.r);
    })
    // draw a pole
    stroke('brown');
    fill(t.moving & (t.flash_ctr < FLASHING_COUNTER/2) ? 'gold' : 'white');
    ellipse(t.pos.x,t.pos.y,2*POLE_R);
    // draw a direction
    stroke('navy');
    [sx, sy] = [t.pos.x, t.pos.y];
    [dx, dy] = [t.direction.pos.x, t.direction.pos.y];
    r = POLE_R / Math.sqrt((dx-sx)*(dx-sx)+(dy-sy)*(dy-sy));
    [dx, dy] = [(dx-sx)*r+sx, (dy-sy)*r+sy];
    line(sx,sy,dx,dy);
  })
}
function flash_poles() {
  [src,aux,dst].forEach(function(t) {
    t.moving = (t.direction.direction === t);
    t.flash_ctr += 1;
    t.flash_ctr %= FLASHING_COUNTER;
  })
}
function pop_disk(src,aux,dst) {
  var towers = [src,aux,dst].filter(t => t.moving);
  var idx,from,to;
  idx = (towers[0].toplevel > towers[1].toplevel) ? 0 : 1;
  [from, to] = [towers[idx], towers[1-idx]];
  return new MovingDisk(from.disks.pop().level,from,to);
}
function draw_moving_disk() {
  var d = moving_disk;
  d.step_forward();
  stroke('black');
  fill(d.color);
  ellipse(d.pos.x,d.pos.y,2*d.r);
  return d.finish_p();
}
function turn() {
  [moving_disk.from,moving_disk.to].forEach(function(t) {
    t.direction = ([src,aux,dst]
      .filter(x => (x !== t) && (x !== t.direction)))[0];
    t.moving = false;
  })
}
function draw() {
  // base drawing
  base_drawing();
  // find two exchange-towers out of three
  flash_poles();
  // start moving
  if (moving_disk == null) {
    moving_disk = pop_disk(src,aux,dst);
  } else {
    if (draw_moving_disk()) {
      turn();
      moving_disk = null;
    }
  }
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

const COLORS = [ 'crimson', 'forestgreen', 'yellow', 'royalblue',

'saddlebrown', 'hotpink', 'darkorange', 'darkmagenta' ];

const NUM_OF_DISKS = COLORS.length;

const BASE_LENGTH = 200;

const C_WIDTH = 3.732 * BASE_LENGTH;

const C_HEIGHT = 3.500 * BASE_LENGTH;

const DISK_R = 0.9 * BASE_LENGTH;

const POLE_R = 15;

const POSITIONS = { 'Source' : [0.268, 0.714],

'Auxiliary' : [0.500, 0.286],

'Destination' : [0.732, 0.714] };

const FLASHING_COUNTER = 20;

const STEPS = 30;

class Vector {

constructor(x,y) {

this.x = x;

this.y = y;

}

class Position extends Vector {

constructor(x,y) { super(x,y); }

move(vec) {

this.x += vec.x;

this.y += vec.y;

}

class Disk {

constructor(level) {

this.level = level;

this.color = COLORS[level];

this.r = (DISK_R-POLE_R)*(NUM_OF_DISKS-level)/NUM_OF_DISKS + POLE_R;

}

class MovingDisk extends Disk {

constructor(level,from,to) {

super(level);

[sx,sy] = [from.pos.x,from.pos.y];

[dx,dy] = [to.pos.x, to.pos.y];

this.pos = new Position(sx,sy);

this.mvec = new Vector((dx-sx)/STEPS,(dy-sy)/STEPS);

this.move_ctr = 0;

this.from = from;

this.to = to;

}

step_forward() {

this.pos.move(this.mvec);

this.move_ctr++;

}

finish_p() {

var ret_flag = false;

if (ret_flag = (this.move_ctr == STEPS)) {

this.to.disks.push(new Disk(this.level));

}

return ret_flag;

}

class Tower {

constructor(name, disks, direction=null) {

this.name = name;

this.disks = [];

for (var i = 0; i < disks; i++) {

this.disks.push(new Disk(i));

}

this.direction = direction;

this.moving = false;

this.flash_ctr = 0;

}

get toplevel() {

var l = this.disks.length;

// '-1' means there is no disk.

return (l > 0) ? this.disks[l-1].level : -1;

}

var src = new Tower('Source', NUM_OF_DISKS);

var aux = new Tower('Auxiliary', 0, src);

var dst = new Tower('Destination', 0, src);

// In the case of NUM_OF_DISKS is odd,

// the src must face the src.

// Otherwise, the src faces the aux.

src.direction = (COLORS.length % 2 == 1) ? dst : aux;

// the reference to moving disk is stored to this variable.

var moving_disk = null;

function setup() {

createCanvas(C_WIDTH, C_HEIGHT);

frameRate(30);

[src,aux,dst].forEach(function(t) {

[rx,ry] = POSITIONS[t.name];

t.pos = new Position(rx * C_WIDTH, ry * C_HEIGHT);

})

}

function base_drawing() {

background('beige');

[src,aux,dst].forEach(function(t) {

// draw disks

t.disks.forEach(function(d) {

stroke('black');

fill(d.color);

ellipse(t.pos.x,t.pos.y,2*d.r);

})

// draw a pole

stroke('brown');

fill(t.moving & (t.flash_ctr < FLASHING_COUNTER/2) ? 'gold' : 'white');

ellipse(t.pos.x,t.pos.y,2*POLE_R);

// draw a direction

stroke('navy');

[sx, sy] = [t.pos.x, t.pos.y];

[dx, dy] = [t.direction.pos.x, t.direction.pos.y];

r = POLE_R / Math.sqrt((dx-sx)*(dx-sx)+(dy-sy)*(dy-sy));

[dx, dy] = [(dx-sx)*r+sx, (dy-sy)*r+sy];

line(sx,sy,dx,dy);

})

}

function flash_poles() {

[src,aux,dst].forEach(function(t) {

t.moving = (t.direction.direction === t);

t.flash_ctr += 1;

t.flash_ctr %= FLASHING_COUNTER;

})

}

function pop_disk(src,aux,dst) {

var towers = [src,aux,dst].filter(t => t.moving);

var idx,from,to;

idx = (towers[0].toplevel > towers[1].toplevel) ? 0 : 1;

[from, to] = [towers[idx], towers[1-idx]];

return new MovingDisk(from.disks.pop().level,from,to);

}

function draw_moving_disk() {

var d = moving_disk;

d.step_forward();

stroke('black');

fill(d.color);

ellipse(d.pos.x,d.pos.y,2*d.r);

return d.finish_p();

}

function turn() {

[moving_disk.from,moving_disk.to].forEach(function(t) {

t.direction = ([src,aux,dst]

.filter(x => (x !== t) && (x !== t.direction)))[0];

t.moving = false;

})

}

function draw() {

// base drawing

base_drawing();

// find two exchange-towers out of three

flash_poles();

// start moving

if (moving_disk == null) {

moving_disk = pop_disk(src,aux,dst);

} else {

if (draw_moving_disk()) {

turn();

moving_disk = null;

}

図3　Pygameを用いて描画ウィンドウを表示するPythonコード

import pygame

pygame.init()
screen = pygame.display.set_mode((640,480))
pygame.display.set_caption('Pygame Window')

while True:
  for event in pygame.event.get():
    if event.type == pygame.TEXTINPUT and event.text == 'q':
      pygame.quit()
      exit()

  screen.fill('lavender')

  pygame.display.flip()
  pygame.time.delay(30)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

import pygame

pygame.init()

screen = pygame.display.set_mode((640,480))

pygame.display.set_caption('Pygame Window')

while True:

for event in pygame.event.get():

if event.type == pygame.TEXTINPUT and event.text == 'q':

pygame.quit()

exit()

screen.fill('lavender')

pygame.display.flip()

pygame.time.delay(30)

図5　GDHPの手順をアニメーションで表示するPythonコード

import pygame
import math

COLORS = [ 'crimson', 'forestgreen', 'yellow', 'royalblue',
           'saddlebrown', 'hotpink', 'darkorange', 'darkmagenta' ]
NUM_OF_DISKS = len(COLORS)
BASE_LENGTH = 200
C_WIDTH  = 3.732 * BASE_LENGTH
C_HEIGHT = 3.500 * BASE_LENGTH
DISK_R = 0.9 * BASE_LENGTH
POLE_R = 15
POSITIONS = { 'Source'      : [0.268, 0.714],
              'Auxiliary'   : [0.500, 0.286],
              'Destination' : [0.732, 0.714] }
FLASHING_COUNTER = 20
STEPS = 30

class Vector:
  def __init__(self, x, y):
    self.x = x
    self.y = y
class Position(Vector):
  def __init__(self, x, y):
    super().__init__(x, y)
  def move(self, vec):
    self.x += vec.x
    self.y += vec.y
class Disk:
  def __init__(self, level):
    self.level = level
    self.color = COLORS[level]
    self.r = (DISK_R-POLE_R)*(NUM_OF_DISKS-level)/NUM_OF_DISKS + POLE_R
class MovingDisk(Disk):
  def __init__(self, level, frm, to):
    super().__init__(level) 
    [sx, sy] = [frm.pos.x, frm.pos.y]
    [dx, dy] = [to.pos.x,  to.pos.y]
    self.pos = Position(sx,sy)
    self.mvec = Vector((dx-sx)/STEPS,(dy-sy)/STEPS)
    self.move_ctr = 0
    self.frm = frm
    self.to = to
  def step_forward(self):
    self.pos.move(self.mvec)
    self.move_ctr += 1
  def finish_p(self):
    ret_flag = (self.move_ctr == STEPS)
    if ret_flag:
      self.to.disks.append(Disk(self.level))
    return ret_flag
class Tower:
  def __init__(self, name, disks, direction=None):
    self.name = name
    self.disks = []
    for i in range(disks):
      self.disks.append(Disk(i))
    self.direction = direction
    self.moving = False
    self.flash_ctr = 0
  def toplevel(self):
    l = len(self.disks)
    # '-1' means there is no disk.
    return self.disks[l-1].level if l > 0 else -1
def setup():
  pygame.init()
  screen = pygame.display.set_mode((C_WIDTH, C_HEIGHT))
  pygame.display.set_caption('GDHP')
  for t in [src,aux,dst]:
    [rx, ry] = POSITIONS[t.name]
    t.pos = Position(rx * C_WIDTH, ry * C_HEIGHT)
  return screen
def base_drawing():
  screen.fill('beige')
  for t in [src,aux,dst]:
    # draw disks
    for d in t.disks:
      pygame.draw.circle(screen, d.color, (t.pos.x,t.pos.y), d.r)
      pygame.draw.circle(screen, 'black', (t.pos.x,t.pos.y), d.r, 1)
    # draw a pole
    fillcolor = 'gold' \
      if t.moving and t.flash_ctr < FLASHING_COUNTER/2 else 'white' 
    pygame.draw.circle(screen, fillcolor, (t.pos.x,t.pos.y), POLE_R)
    pygame.draw.circle(screen, 'brown', (t.pos.x,t.pos.y), POLE_R, 1)
    # draw a direction
    [sx, sy] = [t.pos.x, t.pos.y]
    [dx, dy] = [t.direction.pos.x, t.direction.pos.y]
    r = POLE_R / math.sqrt((dx-sx)*(dx-sx)+(dy-sy)*(dy-sy))
    [dx, dy] = [(dx-sx)*r+sx, (dy-sy)*r+sy]
    pygame.draw.line(screen, (0,0,128), (sx,sy), (dx,dy), 3)
def flash_poles():
  for t in [src,aux,dst]:
    t.moving = (t.direction.direction == t)
    t.flash_ctr += 1
    t.flash_ctr %= FLASHING_COUNTER
def pop_disk(src,aux,dst):
  towers = list(filter(lambda x: x.moving, [src,aux,dst]))
  idx = 0 if towers[0].toplevel() > towers[1].toplevel() else 1
  [frm, to] = [towers[idx], towers[1-idx]]
  return MovingDisk(frm.disks.pop().level,frm,to) \
           if len(frm.disks) > 0 else None
def draw_moving_disk():
  d = moving_disk
  d.step_forward()
  pygame.draw.circle(screen, d.color, (d.pos.x,d.pos.y), d.r)
  pygame.draw.circle(screen, 'black', (d.pos.x,d.pos.y), d.r, 1)
  return d.finish_p()
def turn():
  for t in [moving_disk.frm,moving_disk.to]:
    t.direction = list(filter(
      lambda x: (x != t) and (x != t.direction), [src,aux,dst]))[0]
    t.moving = False
def draw():
  # base drawing
  base_drawing()
  # find two exchange-towers out of three
  flash_poles()
  # start moving
  finish_p = False
  mdisk = moving_disk
  if mdisk == None:
    mdisk = pop_disk(src,aux,dst)
    if mdisk == None:
      finish_p = True
  else:
    if draw_moving_disk():
      turn()
      mdisk = None
  return mdisk, finish_p
# main routine
if __name__ == '__main__':
  src = Tower('Source', NUM_OF_DISKS)
  aux = Tower('Auxiliary',   0, src)
  dst = Tower('Destination', 0, src)
  # In the case of NUM_OF_DISKS is odd, 
  # the src must face the src.
  # Otherwise, the src faces the aux.
  src.direction = dst if len(COLORS) % 2 == 1 else aux
  # the reference to moving disk is stored to this variable.
  moving_disk = None
  screen = setup()
  while True:
    for event in pygame.event.get():
      if event.type == pygame.TEXTINPUT and event.text == 'q':
        pygame.quit()
        exit()
    moving_disk, finish_p = draw()
    if finish_p:
      pygame.quit()
      exit()
    pygame.display.flip()
    pygame.time.delay(30)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

import pygame

import math

COLORS = [ 'crimson', 'forestgreen', 'yellow', 'royalblue',

'saddlebrown', 'hotpink', 'darkorange', 'darkmagenta' ]

NUM_OF_DISKS = len(COLORS)

BASE_LENGTH = 200

C_WIDTH = 3.732 * BASE_LENGTH

C_HEIGHT = 3.500 * BASE_LENGTH

DISK_R = 0.9 * BASE_LENGTH

POLE_R = 15

POSITIONS = { 'Source' : [0.268, 0.714],

'Auxiliary' : [0.500, 0.286],

'Destination' : [0.732, 0.714] }

FLASHING_COUNTER = 20

STEPS = 30

class Vector:

def __init__(self, x, y):

self.x = x

self.y = y

class Position(Vector):

def __init__(self, x, y):

super().__init__(x, y)

def move(self, vec):

self.x += vec.x

self.y += vec.y

class Disk:

def __init__(self, level):

self.level = level

self.color = COLORS[level]

self.r = (DISK_R-POLE_R)*(NUM_OF_DISKS-level)/NUM_OF_DISKS + POLE_R

class MovingDisk(Disk):

def __init__(self, level, frm, to):

super().__init__(level)

[sx, sy] = [frm.pos.x, frm.pos.y]

[dx, dy] = [to.pos.x, to.pos.y]

self.pos = Position(sx,sy)

self.mvec = Vector((dx-sx)/STEPS,(dy-sy)/STEPS)

self.move_ctr = 0

self.frm = frm

self.to = to

def step_forward(self):

self.pos.move(self.mvec)

self.move_ctr += 1

def finish_p(self):

ret_flag = (self.move_ctr == STEPS)

if ret_flag:

self.to.disks.append(Disk(self.level))

return ret_flag

class Tower:

def __init__(self, name, disks, direction=None):

self.name = name

self.disks = []

for i in range(disks):

self.disks.append(Disk(i))

self.direction = direction

self.moving = False

self.flash_ctr = 0

def toplevel(self):

l = len(self.disks)

# '-1' means there is no disk.

return self.disks[l-1].level if l > 0 else -1

def setup():

pygame.init()

screen = pygame.display.set_mode((C_WIDTH, C_HEIGHT))

pygame.display.set_caption('GDHP')

for t in [src,aux,dst]:

[rx, ry] = POSITIONS[t.name]

t.pos = Position(rx * C_WIDTH, ry * C_HEIGHT)

return screen

def base_drawing():

screen.fill('beige')

for t in [src,aux,dst]:

# draw disks

for d in t.disks:

pygame.draw.circle(screen, d.color, (t.pos.x,t.pos.y), d.r)

pygame.draw.circle(screen, 'black', (t.pos.x,t.pos.y), d.r, 1)

# draw a pole

fillcolor = 'gold' \

if t.moving and t.flash_ctr < FLASHING_COUNTER/2 else 'white'

pygame.draw.circle(screen, fillcolor, (t.pos.x,t.pos.y), POLE_R)

pygame.draw.circle(screen, 'brown', (t.pos.x,t.pos.y), POLE_R, 1)

# draw a direction

[sx, sy] = [t.pos.x, t.pos.y]

[dx, dy] = [t.direction.pos.x, t.direction.pos.y]

r = POLE_R / math.sqrt((dx-sx)*(dx-sx)+(dy-sy)*(dy-sy))

[dx, dy] = [(dx-sx)*r+sx, (dy-sy)*r+sy]

pygame.draw.line(screen, (0,0,128), (sx,sy), (dx,dy), 3)

def flash_poles():

for t in [src,aux,dst]:

t.moving = (t.direction.direction == t)

t.flash_ctr += 1

t.flash_ctr %= FLASHING_COUNTER

def pop_disk(src,aux,dst):

towers = list(filter(lambda x: x.moving, [src,aux,dst]))

idx = 0 if towers[0].toplevel() > towers[1].toplevel() else 1

[frm, to] = [towers[idx], towers[1-idx]]

return MovingDisk(frm.disks.pop().level,frm,to) \

if len(frm.disks) > 0 else None

def draw_moving_disk():

d = moving_disk

d.step_forward()

pygame.draw.circle(screen, d.color, (d.pos.x,d.pos.y), d.r)

pygame.draw.circle(screen, 'black', (d.pos.x,d.pos.y), d.r, 1)

return d.finish_p()

def turn():

for t in [moving_disk.frm,moving_disk.to]:

t.direction = list(filter(

lambda x: (x != t) and (x != t.direction), [src,aux,dst]))[0]

t.moving = False

def draw():

# base drawing

base_drawing()

# find two exchange-towers out of three

flash_poles()

# start moving

finish_p = False

mdisk = moving_disk

if mdisk == None:

mdisk = pop_disk(src,aux,dst)

if mdisk == None:

finish_p = True

else:

if draw_moving_disk():

turn()

mdisk = None

return mdisk, finish_p

# main routine

if __name__ == '__main__':

src = Tower('Source', NUM_OF_DISKS)

aux = Tower('Auxiliary', 0, src)

dst = Tower('Destination', 0, src)

# In the case of NUM_OF_DISKS is odd,

# the src must face the src.

# Otherwise, the src faces the aux.

src.direction = dst if len(COLORS) % 2 == 1 else aux

# the reference to moving disk is stored to this variable.

moving_disk = None

screen = setup()

while True:

for event in pygame.event.get():

if event.type == pygame.TEXTINPUT and event.text == 'q':

pygame.quit()

exit()

moving_disk, finish_p = draw()

if finish_p:

pygame.quit()

exit()

pygame.display.flip()

pygame.time.delay(30)

特集2　ChatGPTで手軽に実現（Vol.91記載）

投稿日：2024.07.25　｜　カテゴリー：　コード

著者：佐藤秀輔

対話型AIサービス「ChatGPT」が注目を集めています。特に、2023年3月に登場した「GPT-4」という大規模言語モデル（LLM）を利用可能になってからは自然言語の理解力が飛躍的に向上し、指示に基づいて、さまざまな処理を自動化できるようになっています。本特集では、ChatGPTを個人で活用する例として、家計簿レビューをさせる方法と、API（Application Programming Interface）を利用してWebスクレイピングをさせる方法を紹介します。

シェルスクリプトマガジン Vol.91は以下のリンク先でご購入できます。

図1　ランダムな家計簿データを生成するPythonスクリプト

import datetime
import random

itemlist = ['食料品', '外食費', '日用品', '家財道具',
            '交通費', '電気代', '水道代', 'ガス代',
            'ガソリン代', 'その他']

for i in range(366):
  basedate = datetime.datetime(2024, 1, 1)
  date = basedate + datetime.timedelta(days=i)
  item = itemlist[random.randrange(10)]
  amount = random.randrange(100) * 100
  print(f"{date.date()},{date.time()},{item},{amount}")

1

2

3

4

5

6

7

8

9

10

11

12

13

import datetime

import random

itemlist = ['食料品', '外食費', '日用品', '家財道具',

'交通費', '電気代', '水道代', 'ガス代',

'ガソリン代', 'その他']

for i in range(366):

basedate = datetime.datetime(2024, 1, 1)

date = basedate + datetime.timedelta(days=i)

item = itemlist[random.randrange(10)]

amount = random.randrange(100) * 100

print(f"{date.date()},{date.time()},{item},{amount}")

図10　Webスクレイピング対象となるWebページの例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプル商品リスト</title>
</head>
<body>
  <h1>商品リスト</h1>
  <div class="product" id="product1">
    <h2>商品名：スニーカー</h2>
    <p>価格：\5000</p>
    <p>評価：4.5 星</p>
  </div>
  <div class="product" id="product2">
    <h2>商品名：バックパック</h2>
    <p>価格：\8000</p>
    <p>評価：4.0 星</p>
  </div>
  <div class="product" id="product3">
    <h2>商品名：水筒</h2>
    <p>価格：\1500</p>
    <p>評価：4.8 星</p>
  </div>
</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

<!DOCTYPE html>

<head>

<title>サンプル商品リスト</title>

</head>

<body>

<h1>商品リスト</h1>

<h2>商品名：スニーカー</h2>

</div>

<h2>商品名：バックパック</h2>

</div>

</div>

</body>

</html>

図11　Webスクレイピング用のPythonスクリプトの例

import json
from bs4 import BeautifulSoup

# HTMLファイルを開く
with open('sample.html', 'r', encoding='utf-8') as file:
  html_content = file.read()
# BeautifulSoupオブジェクトを作成
soup = BeautifulSoup(html_content, 'lxml')
# 商品情報を抽出
products = soup.find_all('div', class_='product')
product_list = []
for product in products:
  product_name = product.find('h2').text.replace('商品名：', '').strip()
  price = product.find_all('p')[0].text.replace('価格：', '').strip()
  rating = product.find_all('p')[1].text.replace('評価：', '').strip()
  # 各商品情報を辞書として追加
  product_list.append({
    '商品名': product_name,
    '価格': price,
    '評価': rating
  })
# JSON形式で結果を出力
json_output = json.dumps(product_list, ensure_ascii=False, indent=4)
print(json_output)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

import json

from bs4 import BeautifulSoup

# HTMLファイルを開く

with open('sample.html', 'r', encoding='utf-8') as file:

html_content = file.read()

# BeautifulSoupオブジェクトを作成

soup = BeautifulSoup(html_content, 'lxml')

# 商品情報を抽出

products = soup.find_all('div', class_='product')

product_list = []

for product in products:

product_name = product.find('h2').text.replace('商品名：', '').strip()

price = product.find_all('p')[0].text.replace('価格：', '').strip()

rating = product.find_all('p')[1].text.replace('評価：', '').strip()

# 各商品情報を辞書として追加

product_list.append({

'商品名': product_name,

'価格': price,

'評価': rating

})

# JSON形式で結果を出力

json_output = json.dumps(product_list, ensure_ascii=False, indent=4)

print(json_output)

シェルスクリプトマガジンvol.91 Web掲載記事まとめ

投稿日：2024.07.25　｜　カテゴリー：　コード

004　レポート　統合開発環境「Theia IDE」正式版リリース
005　レポート　サイバーエージェントがVLM、新LLM公開
006　製品レビュー　パソコン「ASUS Vivobook S 15 S5507QA」
007　NEWS FLASH
008　特集1　Oracle Cloud Infrastructure入門/福島耕平、中村峻大
020　特集2　ChatGPTで手軽に実現/佐藤秀輔　コード掲載
028　特別企画　イノシシ撃退機を作るハード製作編/米田聡
036　Pythonあれこれ/飯尾淳　コード掲載
042　Markdownを活用する/藤原由来　コード掲載
052　香川大学SLPからお届け！/佐藤楓真　コード掲載
058　中小企業手作りIT化奮戦記/菅雄一
064　これだけは覚えておきたいLinuxコマンド/大津真　コード掲載
073　ユニケージレポート/田中湧也
076　Techパズル/gori.sh
077　コラム「要求工学を取り入れる」/シェル魔人

Vol.91

投稿日：2024.07.25　｜　カテゴリー：　バックナンバー

　オラクルといえば、基幹システムでも利用されるリレーショナルデータベース管理システム（RDBMS）製品を開発・販売する企業というイメージがあります。しかし、それだけではありません。「AWS」（Amazon Web Services）や「Microsoft Azure」、「GCP」（Google Cloud Platform）と同等のクラウドサービスとして「Oracle Cloud Infrastructure」（OCI）を提供しています。
　特集1では、このOCIの特徴を分かりやすく解説しています。また、30日間無料で試せる「OCI Cloud Free Tier」を利用してIaaS（Infrastructure as a Service）によるコンピュートインスタンスの立ち上げ方法も紹介しています。実際に触ってみて、データベースだけでないOCIの魅力を感じてください。
　特集2では、生成AIチャット「ChatGPT」の実用例として、支出を分析する「家計簿レビュー」と、Webページから必要な情報を抽出する「Webスクレイピング」の二つを紹介しています。前者は対話形式で分析、後者はAPI（Application Programming Interface）を用いて情報を抽出しています。話題のChatGPTの能力を体験してみてください。
　特別企画では、「Interface」「CQ ham radio」「トランジスタ技術」などの雑誌を出版するCQ出版社の協力を得て、同社が販売する「イノシシ撃退機部品セットVer.1」の組み立て方を紹介しています。農業分野でもITを活用することで、さまざまなメリットが生まれます。このイノシシ撃退機は、イノシシの鳴き声を使うため、安全にイノシシを追い払えます。
　このほか、ユニケージレポートでは、長崎県で2024年6月12～14日に開催された「ソフトウェア・シンポジウム2024」でのユニケージ技術発表と、シェルやシェルスクリプトに関するワークショップを紹介しました。
　今回も読み応え十分のシェルスクリプトマガジン Vol.91。お見逃しなく!

※記事掲載のコードはこちら。記事の補足情報はこちら

※読者アンケートはこちら

Vol.91 補足情報

投稿日：2024.07.19　｜　カテゴリー：　コード

特集2　ChatGPTで手軽に実現

　クラウド型家計簿アプリ「Dr.Wallet」のサンプルデータがここからダウンロードできます。家計簿を付けていない人は、こちらを利用してください。なお、本サンプルデータ中のショップ名、電話番号、住所の情報はすべて架空のものです。実在の企業や事業者とは関係ありません。

情報は随時更新致します。

Pythonあれこれ

投稿日：2024.05.25　｜　カテゴリー：　コード

筆者：飯尾淳

本連載では「Pythonを昔から使っているものの、それほど使いこなしてはいない」という筆者が、いろいろな日常業務をPythonで処理することで、立派な「蛇使い」に育つことを目指します。その過程を温かく見守ってください。皆さんと共に勉強していきましょう。第20回では、データの可視化などにも活用できるWebアプリケーションフレームワーク「Streamlit」の、より進んだ使い方を紹介します。

シェルスクリプトマガジン Vol.90は以下のリンク先でご購入できます。

図4　プルダウンメニューでサブページに移動できるようにしたコード

import streamlit as st

selected = st.selectbox('なに食べる？',
                        ('-', 'ramen', 'curry', 'katsudon'))
pages = {'ramen': 'pages/1_🍜_ramen.py',
         'curry': 'pages/2_🍛_curry.py',
         'katsudon': 'pages/3_🍚_katsudon.py' }
if selected in pages.keys():
  st.switch_page(pages[selected])

1

2

3

4

5

6

7

8

9

import streamlit as st

selected = st.selectbox('なに食べる？',

('-', 'ramen', 'curry', 'katsudon'))

pages = {'ramen': 'pages/1_🍜_ramen.py',

'curry': 'pages/2_🍛_curry.py',

'katsudon': 'pages/3_🍚_katsudon.py' }

if selected in pages.keys():

st.switch_page(pages[selected])

図8　「1_edit.py」ファイルに記述するコード

import streamlit as st
import pandas as pd

df = pd.read_excel('TODO.xlsx')
df = st.data_editor(df)
clicked = st.button('保存', type='primary',
                    on_click=lambda:\
                    df.to_excel('TODO.xlsx', index=False))
if (clicked):
  st.switch_page('index.py')

1

2

3

4

5

6

7

8

9

10

import streamlit as st

import pandas as pd

df = pd.read_excel('TODO.xlsx')

df = st.data_editor(df)

clicked = st.button('保存', type='primary',

on_click=lambda:\

df.to_excel('TODO.xlsx', index=False))

if (clicked):

st.switch_page('index.py')

図11　「2_new.py」ファイルに記述するコード

import streamlit as st
import pandas as pd

df = pd.read_excel('TODO.xlsx')
title = st.text_input(label='タイトル')
memo = st.text_area(label='内容')
date = st.date_input(label='締切')
done = False
def append():
  global df
  df_new = pd.DataFrame({'タイトル': [title],
                         '内容':     [memo], 
                         '締切':     [date],
                         '実施':     [done]})
  df = pd.concat([df, df_new])
  df.to_excel('TODO.xlsx', index=False)
clicked = st.button('登録', type='primary', on_click=append)
if (clicked): 
  st.switch_page('index.py')

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

import streamlit as st

import pandas as pd

df = pd.read_excel('TODO.xlsx')

title = st.text_input(label='タイトル')

memo = st.text_area(label='内容')

date = st.date_input(label='締切')

done = False

def append():

global df

df_new = pd.DataFrame({'タイトル': [title],

'内容': [memo],

'締切': [date],

'実施': [done]})

df = pd.concat([df, df_new])

df.to_excel('TODO.xlsx', index=False)

clicked = st.button('登録', type='primary', on_click=append)

if (clicked):

st.switch_page('index.py')

図11　「2_new.py」ファイルに記述するコード

import streamlit as st
import pandas as pd

df = pd.read_excel('TODO.xlsx')
title = st.text_input(label='タイトル')
memo = st.text_area(label='内容')
date = st.date_input(label='締切')
done = False
def append():
  global df
  df_new = pd.DataFrame({'タイトル': [title],
                         '内容':     [memo], 
                         '締切':     [date],
                         '実施':     [done]})
  df = pd.concat([df, df_new])
  df.to_excel('TODO.xlsx', index=False)
clicked = st.button('登録', type='primary', on_click=append)
if (clicked): 
  st.switch_page('index.py')

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

import streamlit as st

import pandas as pd

df = pd.read_excel('TODO.xlsx')

title = st.text_input(label='タイトル')

memo = st.text_area(label='内容')

date = st.date_input(label='締切')

done = False

def append():

global df

df_new = pd.DataFrame({'タイトル': [title],

'内容': [memo],

'締切': [date],

'実施': [done]})

df = pd.concat([df, df_new])

df.to_excel('TODO.xlsx', index=False)

clicked = st.button('登録', type='primary', on_click=append)

if (clicked):

st.switch_page('index.py')

香川大学SLPからお届け！（Vol.90掲載）

投稿日：2024.05.25　｜　カテゴリー：　コード

特集1 Streamlitで作るデータ分析Webアプリ

連載 香川大学SLPからお届け！

連載 香川大学SLPからお届け！

特集2 ChatGPTで手軽に実現

特集1　Streamlitで作るデータ分析Webアプリ

連載　香川大学SLPからお届け！

連載　香川大学SLPからお届け！

特集2　ChatGPTで手軽に実現