著者：飯尾 淳

本連載では「Pythonを昔から使っているものの、それほど使いこなしてはいない」という筆者が、いろいろな日常業務をPythonで処理することで、立派な「蛇使い」に育つことを目指します。その過程を温かく見守ってください。皆さんと共に勉強していきましょう。第27回では、異文化間交流教育プロジェクトで得られたオンライン交流データを分析する、筆者の研究例を紹介します。

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

図2　必要なライブラリをインポートするコード

import pandas as pd
import numpy as np
import matplotlib.pyplot as plt
import japanize_matplotlib
import re, os, math
from graphviz import Graph
from IPython.display import Image, display, display_png
from sklearn.linear_model import LinearRegression

図4　mk_relations()関数を定義するコード

def mk_relations(df):
  # 関係性を抽出する
  prev = []
  relations = {}
  f = df.columns
  for i, row in df.iterrows():
    # 発言文字数が「0」ではない発言者を抽出
    d = dict(zip(f, list(row)))
    speakers = list(filter(lambda k: d[k] != 0, d.keys()))
    # 前行のスピーカーと今の行のスピーカーの関係を抽出
    # どちらかもしくは両方が空行のときはスキップ
    if len(prev)*len(speakers) > 0:
      for p_speaker in prev:
        for n_speaker in speakers:
          r = tuple(sorted([p_speaker, n_speaker]))
          if r not in relations.keys():
            relations[r] = 1
          else:
            relations[r] += 1
    prev = speakers
  return relations

図5　ファイルからターンテイキングの状況を抽出するコード

filename = 'data/file00.xlsx'
df = pd.read_excel(filename).drop(['Unnamed: 0'], axis=1)
d = mk_relations(df)
d

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

def conv_dict(d):
  v = d.values()
  return dict(zip(d.keys(), map(lambda x: x/max(v), v)))

図9　count_talk()関数を定義するコード

def count_talk(df):
  retvar = {}
  for (name, col) in df.T.iterrows():
    retvar[name] = len(list(filter(lambda x: x > 0, col)))
  return retvar

図11　render_graph()関数を定義するコード

def render_graph(filename):
  print(f'[source] {filename}')
  (basename, extention) = re.match(r'(.*)\.(.*)', filename).groups()
  pathname = 'data/'+filename
  outputfile = f'graphs/{basename}'
  # データフレームの準備
  df = pd.read_excel(pathname).drop(['Unnamed: 0'], axis=1)
  names = df.columns
  # 発言の関係性と発言回数の抽出
  relations = conv_dict(mk_relations(df))
  talk_counts = count_talk(df)
  talks = conv_dict(talk_counts)
  # グラフ描画に関する定数など
  ARROW_WIDTH = 3
  colors     = ['white', 'azure', 'lavender', 'slateblue', 'navy']
  textcolors = ['black', 'black', 'black',    'white',     'white']
  # dot属性の準備
  dot = Graph(format='png')
  dot.attr('node', shape='ellipse')
  dot.attr('node', fontname='Arial')
  # ノードの追加
  for n in talks.keys():
    idx = int(talks[n]*(len(colors)-1))
    dot.node(n, f'{n} ({talks[n]:4.2f})',
      style='filled', fillcolor=colors[idx], fontcolor=textcolors[idx])
  # エッジの追加
  for e in relations.keys():
    (src, dst) = e
    dot.edge(src, dst, penwidth=f'{relations[e]*ARROW_WIDTH:5.3f}')
  # サマリー表の作成
  df_summary = pd.DataFrame({'ID': talk_counts.keys(),
                             '発言回数': talk_counts.values()})
  # レンダリング
  display(df_summary)
  dot.render(outputfile)
  display_png(Image(f’graphs/{basename}.png'))

図15　calc_num_cv()関数を定義するコード

def calc_num_cv(filename):
  print(f'[source] {filename}')
  (basename, extention) = re.match(r'(.*)\.(.*)', filename).groups()
  pathname = 'data/'+filename
  # データフレームの準備
  df = pd.read_excel(pathname).drop(['Unnamed: 0'], axis=1)
  names = df.columns
  num = len(names)
  # 発言回数の抽出
  talk_counts = count_talk(df)
  # サマリー表の作成
  df_summary = pd.DataFrame({'ID': talk_counts.keys(),
                             '発話回数': talk_counts.values()})
  # 平均・標準偏差・変動係数の計算
  mu = sum(df_summary['発話回数'])/num # 平均値
  sd = math.sqrt(sum((df_summary['発話回数'] - mu) *
         (df_summary['発話回数'] - mu))/(num-1)) # 不偏標準偏差
  print(f'参加者数 = {num}')
  print(f'平均 = {mu:4.2f}')
  print(f'不偏標準偏差 = {sd:4.2f}')
  print(f'変動係数 = {(sd/mu):6.4f}')
  return num, sd/mu

図16　すべてのデータから参加者数と変動係数を計算するコード

files = sorted(os.listdir('data'))
table = []
Xlabel = '参加者数'
Ylabel = '変動係数'
for filename in files:
  num, cv = calc_num_cv(filename)
  table.append({ 'Name': filename, Xlabel: num, Ylabel: cv })

筆者：米田 聡

本連載では、人気のマイコンボード「Raspberry Pi Pico/Pico 2」シリーズを活用していきます。同ボードは、無線LANやBluetoothの通信機能を搭載するモデルもあり、入手しやすく価格も手頃なので、IoT機器を自作するのに最適なハードウエアです。今回は、前回Raspberry Pi Pico 2に取り付けた小型LCDに画像を表示するプログラムを紹介します。

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

図1　RGB565の非圧縮ビットマップ画像に変換するPythonプログラム（rgb565.py）

#!/usr/bin/python3

import sys
import argparse
from PIL import Image

def rgb565_convert(image_path, output_path ,order='little'):
    """
    画像をRGB565形式に変換し、バイナリファイルに保存します。

    Args:
        image_path: 入力画像のパス
        output_path: 出力バイナリファイルのパス
    """
    try:
        img = Image.open(image_path).convert("RGB")  # RGBに変換
    except FileNotFoundError:
        print(f"Error: 画像ファイル '{image_path}' が見つかりません。")
        return
    except Exception as e:
        print(f"Error: 画像を開く際にエラーが発生しました: {e}")
        return

    width, height = img.size

    with open(output_path, "wb") as f:
        for y in range(height):
            for x in range(width):
                r, g, b = img.getpixel((x, y))

                # RGB565に変換
                r5 = r >> 3  # 上位5ビット
                g6 = g >> 2  # 上位6ビット
                b5 = b >> 3  # 上位5ビット

                rgb565 = (r5 << 11) | (g6 << 5) | b5

                # バイナリ書き込み (リトルエンディアン)
                f.write(rgb565.to_bytes(2, byteorder=order))

    print(f"画像 '{image_path}' をRGB565形式に変換し、'{output_path}' に保存しました。")

if __name__=="__main__":

    parser = argparse.ArgumentParser()
    parser.add_argument("files",type=str,nargs="*")
    parser.add_argument("--order", type=str, choices=['little', 'big'], default="little")

    args = parser.parse_args()
    files = args.files
    order = args.order

    if len(files) != 2:
        print("Usage: rgb565.py infile outfile [--order little | big ]")
    else:
        rgb565_convert(files[0], files[1], order)

図2　sample.binをLCDに表示するC++プログラム（main.cpp）

#include <Arduino.h>
#include <Adafruit_GFX.h>
#include <Adafruit_ST7735.h>
#include <Adafruit_ST7789.h>
#include <SPI.h>

// 以下がPico SDKのヘッダーファイル
#include "hardware/dma.h"
#include "hardware/spi.h"
#include "pico/stdlib.h"

#define TFT_CS         17
#define TFT_RST        21
#define TFT_DC         20

// サンプル画像を埋め込む
__asm(\
  ".section \".rodata\" \n"\
  ".balign 4\n"\

  ".global _sample_picture\n"\
  ".global _picture_size\n"\

  "_sample_picture:\n"\
  ".incbin \"include/sample.bin\"\n"\
  ".set _picture_size, . - _sample_picture\n"\
  ".section \".text\"\n"\
);

extern const uint16_t _sample_picture[];
extern uint32_t _picture_size[];

// Adafruit ST77xxを初期化生成
Adafruit_ST7789 tft = Adafruit_ST7789(TFT_CS, TFT_DC, TFT_RST);

void setup() {
  Serial1.begin(115200);  // USBシリアルを使用する場合はSerialに変更、以下同じ

  // SPIクロック100MHz
  tft.setSPISpeed(100*000*000);
  // 解像度240×240、SPIモード3
  tft.init(240, 240, SPI_MODE3);
  // 黒で消去
  tft.fillScreen(ST77XX_BLACK);

  // 空いているDMAチャンネルを得る
  int dma_ch = dma_claim_unused_channel(true);
  // DMA設定を取得
  dma_channel_config c = dma_channel_get_default_config(dma_ch);
  // データ転送単位：DMA_SIZE_8＝8iビット
  channel_config_set_transfer_data_size(&c, DMA_SIZE_8);
  // 読み出し側アドレスのインクリメントを有効
  channel_config_set_read_increment(&c, true);
  // 書き込み側アドレスのインクリメントは行わない
  channel_config_set_write_increment(&c, false);
  // spi0送信FIFOのデータ要求を使用する
  channel_config_set_dreq(&c, DREQ_SPI0_TX);
  // DMAにパラメータを設定する
  dma_channel_configure(
    dma_ch,                 // DMAチャンネル
    &c,                     // 設定
    &spi_get_hw(spi0)->dr,  // 書き込み先：SPI FIFOデータレジスタ（SSPDR）
    _sample_picture,        // 読み出し元アドレス
    (uint)_picture_size,    // 転送するデータカウント数
    false                   // 今すぐ開始するか（しない）
  );
  // LCDディスプレイメモリーの書き込み矩形を設定
  tft.setAddrWindow(0, 0, tft.width(), tft.height());
  
  ulong starttime = micros();
  tft.startWrite();                                   // 書き込み開始
  dma_channel_start(dma_ch);                          // DMA開始
  dma_channel_wait_for_finish_blocking(dma_ch);       // DMA終了待ち
  tft.endWrite();                                     // 書き込み終了
  ulong elapsed = micros() - starttime;
  // 描画に費やした時間を表示
  Serial1.printf("elapsed time = %lu\n", elapsed);
}

void loop() {
}

図4　埋め込んだアセンブリ言語のリスト

    .section ".rodata"
    .balign 4

    .global _sample_picture
    .global _picture_size

_sample_picture:
    .incbin "include/sample.bin"
    .set _picture_size, . - _sample_picture

    .section ".text

筆者：藤原 由来

本連載では文書の装飾・構造付けを手軽に行える記法であるMarkdownを用いて、さまざまな文書や成果物を作成する方法を紹介します。前回に引き続き、文書変換ツール「Pandoc」を扱います。今回は、Pandocの概要と基本的な使い方について説明します。

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

図3　Markdownテキストファイル（sample.md）の内容

# カレーの作り方

おいしいカレーを作りましょう。

## 材料

- 牛肉
- 玉ねぎ
- にんじん
- カレールー
- 水

図9　数式を用いたMarkdown記法

インライン数式 $f(x) = ax^2 + bx + c$ です。

## ブロック数式

$$
e^{i \theta} = \cos \theta + i \sin \theta
$$

著者：大津 真

JavaScriptフレームワークの中でも、学びやすさと柔軟さで人気を集めている「Vue.js」。本連載では、Vue.jsの基礎から実践的な使い方までを、分かりやすく丁寧に解説していきます。一緒にフロントエンド開発の楽しさを体験してみましょう。第2回では、テンプレート構文において、各要素に特別な動作を与えるための機能であるディレクティブの基礎について説明します。

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

図1　オブジェクトリテラルの例

{
    name: name,
    age: age,
    scores: { math: [40, 50], eng: [70, 60] },  
    sayHello: function() {
        console.log('こんにちは');
    }
}

図2　シンプルなVueアプリ「sample1.html」の主要部分のコード

<script type="module">
    import { createApp, ref } from 'vue'
    createApp({
        setup() {
        const msg = ref('ハローVue')
            const person = ref({name:'大津真', age: 35})
            return {
                msg, person
            }
        }
    }).mount('#app')
</script>
<div id="app">
    <h1>{{ msg }}</h1>
    <p>{{ person  }}</p>
</div>

図3　ボタンクリックで値を増減させるVueアプリ「counter1.html」のコード（抜粋）

<script type="module">
    import { createApp, ref } from 'vue'
    createApp({
        setup() {
            // counterをリアクティブな変数として定義
            const counter = ref(0) 
            // counterを「1」増やす
            function increment() {  
                counter.value++
            }
            // counterを「1」減らす
            function decrement() {
                counter.value--
            }
            return {
                counter,
                increment,
                decrement   
            }
        }
    }).mount('#app')
</script>
<div id="app">
    <h1>カウント: {{ counter }}</h1>
    <button v-on:click="increment">+</button>
    <button v-on:click="decrement">-</button>
</div>

図4　図3のアプリをインラインイベントハンドラを用いて書き換えた「counter2.html」のコード（抜粋）

<script type="module">
    import { createApp, ref } from 'vue'
    createApp({
        setup() {
            // counterをリアクティブな変数として定義
            const counter = ref(0)
            return {
                counter,
            }
        }
    }).mount('#app')
</script>
<div id="app">
    <h1>カウント: {{ counter }}</h1>
    <button @click="counter += 1">+</button>
    <button @click="counter -= 1">-</button>
</div>

図5　図4のアプリに「3倍にする」ボタンを追加した「counter3.html」のコード（抜粋）

<script type="module">
    import { createApp, ref } from 'vue'
    createApp({
        setup() {
            // counterをリアクティブな変数として定義
            const counter = ref(0)
            const multiplier = ref(3)
            // counterをn倍にする
            function multiply(n) {
                counter.value *= n
             }
            return {
                counter,
                multiply,
                multiplier
            }
        }
    }).mount('#app')
</script>
<div id="app">
    <h1>カウント: {{ counter }}</h1>
    <button @click="counter += 1">+</button>
    <button @click="counter -= 1">-</button>
    <button @click="multiply(multiplier)">
        {{ multiplier }}倍にする</button>
</div>

図6　マスタッシュ構文とv-htmlの違いを示す「v-html1.html」のコード（抜粋）

<script type="module">
    import { createApp } from 'vue'
    createApp({
        setup() {
            const msg1 = 'msg1:\
                          <span style="font-size:3em;color: red;">\
                          ハローVue</span>'
            return { msg1 }
        }
    }).mount('#app')
</script>
<div id="app">
    <p>{{ msg1 }}</p>
    <p v-html="msg1"></p>
</div>

図9　おみくじアプリ「omikuji1.html」のコード（抜粋）

<script type="module">
    import { createApp, ref } from 'vue'
    createApp({
        setup() {
            // おみくじの画像ファイル名を配列で定義
            const kujis = ["daikichi.png", "chukichi.png", "syokichi.png", "kyo.png"]
            // 初期画像を設定
            const kuji = ref('default.png')
            // おみくじを引く関数
            function changeKuji() {
                const randomIndex = Math.floor(Math.random() * kujis.length)
                kuji.value = kujis[randomIndex] 
            }
            return {
                kuji,
                changeKuji
            }
        }
    }).mount('#app')
</script>
<div id="app">
    <h1>おみくじ</h1>
    <div>
        <button @click="changeKuji">おみくじを引く</button>
    </div>
    <img :src="'figs/' + kuji" alt="おみくじ" @click="changeKuji">
</div>

図11　「style1.html」のコード（抜粋）

<script type="module">
    import { createApp, ref } from 'vue'
    createApp({
        setup() {
            const fcolor = 'red'
            const size   = '4em'
            const align  = ref('left')
            function setAlign(value) {
                align.value = value
            }
            return {
                fcolor, align, size, setAlign           
            }
        }
    }).mount('#app')
</script>
<div id="app">
    <div>
        <button @click="setAlign('left')">左寄せ</button>
        <button @click="setAlign('center')">中央寄せ</button>
        <button @click="setAlign('right')">右寄せ</button>
        <p :style="{color:fcolor, textAlign:align, fontSize:size}">Vue.js</p>
    </div>
</div>

図12　「style2.html」のコード（抜粋）

<script type="module">
    import { createApp, ref } from 'vue'
    createApp({
        setup() {
            const styleAll = ref({
                color:    'red'
                fontSize: '4em'
                textAlign: 'left'
            })
            function setAlign(value) {
                styleALL.value.textAlign = value
            }
            return {
                styleAll, setAlign           
            }
        }
    }).mount('#app')
</script>
<div id="app">
    <div>
        <button @click="setAlign('left')">左寄せ</button>
        <button @click="setAlign('center')">中央寄せ</button>
        <button @click="setAlign('right')">右寄せ</button>
        <p :style="styleAll">Vue.js</p>   ←③
    </div>
</div>

図13　「style3.html」のコード（抜粋）

<script type="module">
    import { createApp, ref } from 'vue'
    createApp({
        setup() {
            const styleAll = ref({
                color:    'red'
                fontSize: '4em'
                textAlign: 'left'
            })
            const styleAdd = ref({
                color: 'blue',
                backgroundColor: 'yellow',
            })
（略）
            return {
                styleAll, styleAdd, setAlign           
            }        }
    }).mount('#app')
</script>
<div id="app">
    <div>
 （略）
        <p :style="[styleAll, styleAdd]">Vue.js</p>
    </div>
</div>

図17　「class1.html」のコード（抜粋）

<style>
    .class1 {
        text-align: center;
        color: blue;
    }
    .class2 {
        font-size: 4em;
        color: red;
    }
</style>
（略）
<script type="module">
    import { createApp, ref } from 'vue'
    createApp({
        setup() {
            const enableClass2 = ref(false)
            return {
                enableClass2
            }
        }
    }).mount('#app')
</script>
<div id="app">
    <button @click="enableClass2=!enableClass2">class2を有効/無効</button>
    <p :class="{class1:true, class2:enableClass2}">Vue.jsの世界</p>
</div>

004　レポート　WSL2版Red Hat Enterprise Linux公開
005　レポート　KubeCon + CloudNativeCon Japan開催
006　製品レビュー　PC「ThinkPad X1 Carbon Gen 13」
007　NEWS FLASH
008　特集1　Red Hat OpenShift Virtualization/宇都宮卓也、田中司恩
019　インタビュー　デジサート・ジャパン/二宮要氏
020　特集2　OCIクラウドネイティブアプリ開発/曽川宥輝
034　作りながら学ぶVue.js入門/大津真　コード掲載
041　Markdownを活用する/藤原由来　コード掲載
050　Raspberry Pi Pico W/WHで始める電子工作/米田聡　コード掲載
056　Pythonあれこれ/飯尾淳　コード掲載
064　中小企業手作りIT化奮戦記/菅雄一
070　知っておきたいシェル関連技術/麻生二郎
074　Techパズル/gori.sh
075　コラム「意識教育」/シェル魔人

連載　作りながら学ぶVue.js入門

記事で紹介したサンプルコードの完全版（ZIPで圧縮）は、ここからダウンロードできます。

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