braingate — あたらしいつくり方ラボ

自作プロンプトサンプル集を公開する方法

2025-01-04T00:00:00+09:00

生成AI用のプロンプト集を社内教育や外部セミナー等での教材として使ってもらいたい場合、参加者にコピーペーストしてもらって、生成AIサービスに貼り付けて、という作業は、講習のスピードを下げる要因になりかねません。生成AI講座は、時としてコンピューター初心者を対象とすることも多く、また、実習を伴う場合、参加者の環境がPCだったり、スマホだったり、タブレットPCだったりと様々です。

こんな状態の中、講師が「このプロンプトを手入力してください」や「Webサイト上にプロンプトのサンプルを置いてあるのでコピーペーストをしてください」と声を掛けようものなら、日本語変換はどうやるんだとか、スマホに至ってはコピーペーストの方法がOSや機種によって異なったりし、むしろコピーペースト講座の様相を呈します。

そんな中、全て解決ではないですが、そんな苦労をある程度軽減するためのソリューションを3つ提示します。基本的には、Webサイト上にサンプル集を置いておき、それを参加者がコピーペーストをしやすくするしくみを、主催者側が用意する方法になります。

独自WebサイトによるJavascriptによるコピーボタンの設置

JavaScriptでnavigator.clipboard.writeText()にて実装します。

詳細は別途掲載します。

WordPressのコードブロックでの実現

プラグインを各種試してみました。

標準コードブロック

学習におけるモチベーション維持のコツについて、500文字程度の記事を書いてください。具体例を交えて、読み手がすぐ実践できる内容でお願いします。

メリット: 何もしなくても入っている。
デメリット: クリップボードへのコピー機能無し、ワードラップ機能無し

Highlighing Code Block プラグイン

学習におけるモチベーション維持のコツについて、500文字程度の記事を書いてください。具体例を交えて、読み手がすぐ実践できる内容でお願いします。

メリット: クリップボードへのコピー機能あり（PC、スマホとも動作）
デメリット: ワードラップ機能無し

Codemirror Block プラグイン

学習におけるモチベーション維持のコツについて、500文字程度の記事を書いてください。具体例を交えて、読み手がすぐ実践できる内容でお願いします。

メリット: クリップボードへのコピー機能あり（PC、スマホ）、ワードラップ機能あり
デメリット: 初回表示時に表示されないことがある。（キャッシュ系機能と相性悪いか）

Enlighter Sourcecode プラグイン

学習におけるモチベーション維持のコツについて、500文字程度の記事を書いてください。具体例を交えて、読み手がすぐ実践できる内容でお願いします。

メリット: クリップボードへのコピー機能あり（PCのみ）、ワードラップ機能あり。
デメリット: デフォルトのコード表示の文字が小さい。別途cssを記述する必要あり。

Notionでのコードブロックによる実現

NotionのWeb公開機能を使って、ページをWeb公開することで、コピー用のWebサイトが簡単に作れます。

Notionでプロンプト集のページを作ります。

ページ内のプロンプトを入れるブロックを「コードブロック」にします。

言語の設定は「Markdown」が良いでしょう。プロンプトでは良くMarkdown風の記述が使われるため。

Notionでの見え方

ページ上部の「共有」をクリック。

「Webで公開」を選択。
「共有」にすると、Notionのアカウントを持っている人向けの共有になります。
この画像ではサンプル用に新規ページで公開の例を示しています。

Web公開のリンクを参加者などに伝えればOKです。QRコードにしてあげるとスマホの方は便利かもしれませんね。

外部サイトとしてブラウザから見るとこのような感じです。Notionで記事編集に集中できるのは大きいですね。
PCの場合、マウスカーソルのホバーでコピーボタンが表示されます。この挙動は変更できません。

有料版だと、URLのカスタマイズやアクセス解析などもできるようです。

メリット: クリップボードへのコピー機能あり（PCのみ）、ワードラップ機能無し、無料版でも使える
デメリット: スマホではクリップボードへコピーボタンが出現しない

検討はしたものの実現に至らなかったもの

Googleスプレッドシートで、特定のセルをクリックしたときに、クリップボードに値がコピーされるスクリプトは検討はしてみたのですが、機能上の制約もあり、実現には至っていません。

所感

自分の中の順位を付けるならば、以下のような順番になります。

WordPress+Codemirror Block
WordPress+Enlighter Sourcecode
Notion
独自コードによるHTML制作

スマホを対象とした講習も多いので、スマホでコードコピーボタンが出ないのは痛いので、Notionは順位を下げました。

ただし、独自にコードを書くより、CMSやNotionを使った方が早く、毎回同じ内容のデバッグをしなくて済んだり、見た目はそれぞれのシステムが良いように作ってくれるので、講師側はプロンプト生成に集中できて良いと思います。

自分のWordpress環境がない人はNotionかなとは思います。（スマホの人は手作業でのコピペにはなりますが）

「ひとりでブレインストーミング」公開

2023-04-16T00:00:00+09:00

ChatGPTを使ってブレインストーミングの仮想実施が行える「ひとりでブレインストーミング」を公開しました。

ひとりでブレインストーミング

特徴

ブレインストーミング風の会話出力にチューニングされたプロンプトを生成します。
各専門家に登場してもらい、それぞれの立場からアイデアを出してもらいます。（自分の知識の範疇外の方から意見をもらえる仮想体験ができます。）
1人または多人数でアイデア出しをする際の、アイデア出しの予行演習ができます。
ジェネレータで生成されたプロンプトは、テキストですので、新たな専門家を追加するなど、微調整が行えます。
最終的にまとめ出力がされますので、短時間でアイデアの要約を得ることができます。

使い方

画面に従いｍブレインストーミングのテーマや参加する人などを設定して、プロンプトを生成します。
生成されたプロンプトをChatGPTの入力欄に貼り付けると、ChatGPT上でブレインストーミングが始まります。
1回の返答で収まらない場合「続き」と入力して、継続してください。
ChatGPT上での出力は実行する度に異なります。書式も微妙に異なったり、ルールを誤解して進める場合がありますので、ご注意ください。

対応AI

ChatGPT（GPT-3.5および4）
BingAIは不可

注意事項

ChatGPT全般に言えることですが、ChatGPTからの出力内容は無保証です。
このジェネレータによる出力結果もまた全くの無保証です。それによってChatGPTが生成した結果も保証されません。
本ツールの使用は完全な自己責任の下、ご使用ください。

考察

これはChatGPT用に制作はしましたが、人間に物事を説明する際に、前提条件の一致がない場合の説明方法としても用いることができると思います。個別の事象ではなく、上位概念で捉える事の重要性の理解が深まったと同時に、事象を整理して伝達することがいかに大切か知ることができました。

Render.comをしばらく使ってみて

2023-02-27T00:00:00+09:00

はじめに

Render.comをここ数ヶ月使ってみて良い点、注意点など見えてきたので整理します。とは言え、Renderは大変多機能かつ、幅の広いプラットフォームなので、その一部だけしか使用していない前提であるとご理解ください。また、自分自身、Webアプリ開発にそんなに慣れているわけではないので、ひょっとしたら思い違い等あるかもしれません。

Render公式サイト

Cloud Application Hosting for Developers | Render

自分の用途と環境

半公開型のWebサービス開発。クリエイター向けのグラフィックを動的に生成する。
サーバサイド: Python、Flask、SQLlite
クライアントサイド: Javascript、p5.js、Bootstrap
開発環境: Anaconda、VSCode

無料でどこまでできるか

Renderも初めのうちはどこまでできるか分からなかったので、無料の範囲でどこまでできるかトライしてみました。

結論として、結構、無料の範囲で使えるなあという印象です。

無料の範囲でできること概要

項目	無料でできること
インスタンスの実行時間（1ヶ月あたり）	750時間（31.25日）
ビルド時間（1ヶ月あたり）	500時間（20.83日）
一時的なファイル保存	1GB
CPU	共有（遅い）
Github連携	必須
使える環境、言語	Python、PHP、Node.js、Go、Rubyなど多数。標準でPostgreSQL、SQLiteサポートなど。※
静的Webサイトの作成	無料

※Python、SQLite以外試していないので、公式サイトからの受け売りです。PostgreSQLは90日間無料。この内容は後述します。

Python環境（2023/2/27現在）

デフォルトPythonバージョン: 3.7.10
pipバージョン: 20.1.1
- 必要なモジュールはrequirements.txtに記述して、デプロイ時にpipからインストールする。

それぞれ工夫でアップグレード可能（参考）

無料ゆえの制約

PostgreSQLのデータ保持は最初の90日間のみ。90日経つとお知らせメールが来た後に、データも全てバッサリと削除される（らしい）
プログラムで生成したファイル、ユーザーがアップロードしたファイルなどは永続的でない。
15分間アクセスがないと、サーバーはリブートされる。そのために、上記項目で記したファイルは削除される。
リブートからの復帰には数分かかる。もしくはもっとかかる場合もある。そのため、過疎なWebサービスの場合、ユーザーを大分待たせる。
この制約のため、SQLiteでのデータファイルも中身が削除される。（そのため、PostgreSQLも含めてDBは長期的には使えない。お試しの範囲と考えた方が良い。）
- 参考: Python & SQLite3 – General – Render
CPUが共有のため、デプロイ時間が遅い。速くて3分。遅いときは1時間以上かかる。時間帯によって異なる。その分、月あたりのデプロイ時間が消費される。
筆者環境では、26日間で363h消費。（無料分は500h）
シェルが使えない
ログが長期間保存されない

所感

ある程度制約があるものの、無料の範囲で技術的トライアルを行うには十分な環境であると感じます。
その先の有料プランでも、$7/monthからの設定なので、かなり良心的ではあります。
ぎりぎり無料で試せるけれど、あと一歩、のところで有料が必要になる絶妙な無料の範囲設定です。
まだ試せていないのですが、最も安い有料プランであるStarterは、「最大$7」で、さらにその中に細かく料金設定があり、使用した分だけの課金なので、もっと安く済む可能性があります。
費用的な面で安心できるのも魅力ですが、サーバーサイドの環境をすぐ作れるのは、心理的安全性が高いです。もちろん、普段から環境構築に慣れていたりすればよいのですが、なかなかそうもいきません。また、その環境の維持やアップデートもあり、なかなかのストレスと工数を要します。
そんな中、Render.comは、環境構築に良い意味で独自機能が少なく、将来どこかに移行するにも簡単にできそうで、様々な言語環境に対応しているのがとても良いです。
UIも洗練されていて、シンプルでストレスが少ないです。
比較的安価な環境で技術的実験、サービスプロトタイプまで作り込んで、そこから本番環境に移行できるのはとても便利だなあと感じます。

少し課題を感じるのは、Renderというサービス名は、レンダリングなどの一般名称と紛れるので、情報検索が難しいところですね。

renderでFlask環境を構築してみる

2023-01-04T00:00:00+09:00

herokuが無料アカウントサービスを停止することになり、移転先の有力候補として注目されているPaaSのひとつとして、renderがあります。

Cloud Application Hosting for Developers | Render

今回は、このrenderを使って、Flask（Python）環境を構築してみました。とりあえず今回の作業は無料の範囲内で全てできます。アクセス頻度の高くない個人的勉強には十分な無料範囲です。

手順

準備物

Githubアカウントと適当なリポジトリ
renderアカウント
以下のファイル3つ（今回は環境構築を目的とするので中身には触れません）
index.htmlはtemplatesフォルダの中に入れてください。

requirements.txt

Flask
Gunicorn

templates/index.html

<html>
<head>
    <title>Flaskテスト</title>
</head>
<body>

<h2>名前は {{ name }} です。<br>age is {{ age }}</h2>

<ul>
    <li><a href="/index">index</a></li>
    <li><a href="/viewname">viewname</a></li>
    <li><a href="/">index</a></li>
</ul>

<form method="get" action="/register">
    名前<input type="text" name="person" id="person">
    <br>
    年齢<input type="text" name="age" id="age">
    <input type="submit">
</form>
</body>
</html>

app.py

from flask import Flask, render_template, request
app = Flask(__name__)

@app.route('/')
def hello_world():
    return 'Hello, World!'

@app.route('/viewname')
def viewname():
    name = '山田'
    age = 12
    return render_template('index.html', name=name, age = age) # nameとageを変数としてテンプレートに渡す

@app.route('/index')
def index():
    return render_template('index.html') # templatesフォルダ内のindex.htmlを表示する

@app.route('/register', methods=['GET', 'POST'])
def register():
    if request.method == 'GET':
        name = request.args.get("person","")
        age = request.args.get("age","")
        return render_template('index.html', name=name, age = age) # nameとageを変数としてテンプレートに渡す

if __name__ == '__main__':
    app.debug = True  # デバッグモード有効化
    app.run(debug=True)

これらファイルをGithubのリポジトリに下記構成のように配置してください。

renderでの操作

renderのDASHBOARDから、右の「New+」の青いボタンを押して、「Web Service」を選択してください。

青いConnectボタンを押すと、GitHubのリポジトリ選択画面が出ますので、先ほどアップしたリポジトリを選択してください。

アプリの設定項目入力

下記の画面に必要事項を入力してください。

記述が必要なところ

Name: アプリ名を手入力（URLのサブドメインになります。半角英数字が良いと思われます。）
Region: とりあえずOregonで
Environment: Python3
Build Command: そのままで。先ほど記述したrequirement.txtがデプロイ時に読み込まれ、Pythonのライブラリ等が読み込まれます。なので、Flaskなどのライブラリ・フレームワークを用いたい場合はこのrequirement.txtに記述しておきます。
Start Command: gunicorn app:app

入力画終わったら、画面下の青い「Create Web Service」ボタンを押します。

環境構築開始

自動的に環境構築が始まります。体感で5分くらいかかります。

環境設定中のログがずらずらっと表示されます。（終了時の画面はキャプチャしていなかったのですが、終わった旨のメッセージが黒いログ文字列の中に出てきます。）

初期デプロイ

右の「・・・」が波打ったように動いている最中は、デプロイ中で、まだ完了していません。

終わったら、こんな感じで緑色の雲のマークになります。

もし、環境構築に失敗したら、requirement.txt等に誤りがある可能性がありますので、右上の青いボタンの「Manual Deploy」からもう一度デプロイしてみてください。

ブラウザでアクセス

画面左上の地球儀マークのところのURLが、作成したWebアプリのURLです。Webブラウザでアクセスしてください。

サンプルアプリ

そのままだと、以下の画面になります。ルーティングで「/」の場合の処理が効いています。

（URL）/index へアクセス

変数に値が入っていない様子が確認できます。

フォームに値を入力して「submit」

フォームからの入力値がhtmlに反映されました。

以上です。一通り、Flaskの機能を使った処理が実現できています。

まとめ

今回は、renderでのFlask環境構築を目的に、少々雑なサンプルアプリで実験してみました。
Pythonのライブラリとして、Flask、 render_template,、requestを使用して、ルーティング、テンプレート、Formからの入力処理を実現しました。
無料でWebアプリ環境が構築でき、ニーズが高まってきたら有料にステップアップしていけるのは良いですね。
DBはPostgreSQLは90日間無料で使えるようです。SQLiteが無料の範囲でどこまで使えるかは調べ切れていません。

Conoha WingでFlaskを使う方法

2023-01-03T00:00:00+09:00

はじめに

FlaskはPythonの軽量Webフレームワークとして人気です。Djangoがフルスタックフレームワークとして有名ですが、ちょっとしたサーバサイド処理をしたい際や、インストールできる環境が限られている場合など、Flaskで十分なことも多いかと思います。
そこで、そこで、高速さで人気のレンタルWebサーバであるConoha WingでFlask環境を構築してみました。

Flaskのインストール方法

Conoha Wingのコマンドラインから、以下のコマンドを打ちます。
Conoha Wingにはあらかじめ、pipがインストールされていて、ユーザーが使うことができます。

pip install flask

なお、pipのバージョン、pythonのバージョンも必要に応じて調べておくと良いでしょう。
それぞれ以下のコマンドで調べられます。

python -V

pip -V

実行までに必要なファイルの編集

アプリのファイル群は、public_htmlの中にappというフォルダを作ってそこに入れます。
index.cgiに最初の処理を任せるよう、.htaccessを編集します。ファイルがない場合は新規に作成します。
なお、このサンプルでは、ルーティングとテンプレート変数の挿入まで行います。

.htaccess

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ /app/index.cgi/$1 [QSA,L]
<Files ~ "\.py$">
  deny from all
</Files>

index.cgi

パーミッションを755にすること。

#! /opt/alt/python36/bin/python3.6
import cgitb
cgitb.enable()

from wsgiref.handlers import CGIHandler
from flask import Flask
from app import app
from sys import path

path.insert(0, '/public_html/app/')# index.cgiのパス

class ProxyFix(object):
  def __init__(self, app):
      self.app = app
  def __call__(self, environ, start_response):
      environ['SERVER_NAME'] = "wwwNNN.conoha.ne.jp"# ← ホスト名
      environ['SERVER_PORT'] = "NNNN"# ← ポート番号
      environ['REQUEST_METHOD'] = "GET"
      environ['SERVER_PROTOCOL'] = "HTTP/1.1"
      return self.app(environ, start_response)
if __name__ == '__main__':
   app.wsgi_app = ProxyFix(app.wsgi_app)
   CGIHandler().run(app)

なお、下記コードの中のホスト名「wwwNNN.conoha.ne.jp」、ポート番号「NNNN」は各自の環境に応じて書き換えてください。

Conoha Wingのホスト名、ポート番号の調べ方

コントロールパネルの「サーバー管理」→「SSH」に行くと、表示されます。

app.py

#!/opt/alt/python36/bin/python3.6

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    name = 'Yamada'
    age = 20
    html = render_template('index.html', name=name, age = age)
    return html

@app.route('/hello')
def hello():
    name = 'Jiro'
    age = 14
    html = render_template('index.html', name=name, age = age)
    return html

@app.route('/thanks')
def thanks():
    return 'Thanks!'

if __name__ == "__main__":
   app.run()

templates/index.html

appフォルダの中に、templatesフォルダを作成し、その中に、テンプレートとなるindex.htmlファイルを作成します。
template「s」の複数形なので、間違えないようにします。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>こんにちは</title>
</head>
<body>
    <h2>名前: {{ name }} </h2>
    <h2>年齢: {{ age }}</h2>
    <p>よろしくお願いします</p>
</body>
</html>

改行コードに注意【重要】

index.cgi、app.pyの改行コードは「LF」にしておきましょう。これは見落としがちですが、大事です。
改行コードがCRLFのままだとエラーが発生します。

VS Codeの場合の改行コード変更方法

画面の右下から「LF」もしくは「CRLF」と表示してあるところをクリック。

画面上に、「LF」と「CRLF」の選択肢が表示されるので、「LF」を選択。

ファイルを保存。

実行

Webブラウザでファイルを置いた場所のURLを開きます。

https://（サーバ名）/index.cgi

index.cgiだけだと、Yamadaが表示されます。index.cgi/hello、index.cgi/thanksでそれぞれ表示がかわります。ルーティングと変数で処理が変わっていることが確認できます。

まとめ

Conoha WingはWordpressに重きを置いたWebページ用のサーバですが、Pythonも動きますし、pipでライブラリのインストールもできます。Pythonはデフォルトではバージョンが3.6ですが、3.8まではインストールされているようです。
今回はとりあえずFlaskを動かす事に重きを置いたので深掘りしていません。また、コードの中身も解説はしていませんが、これはFlaskの解説を読むと良いでしょう。

エラー発生時のチェックリスト

自分がはまったところをチェックリストにします。

改行コードはLFになっていますか？
先頭行の#で書いてある先に、Pythonの実行ファイルがありますか？
Content-typeの出力の後に、もう一つ改行を出力していますか？
cgiファイルのパーミッションは755ですか？

はじめてのp5.js

2022-10-09T00:00:00+09:00

p5.jsを初めて学ぶ方のための勉強会資料を公開しました。
レベル設定として、「初めてのプログラミング」的な内容も含む構成にしています。
プログラム初学者に、プログラムの楽しさを知ってもらう第一歩として見てもらえたら幸いです。

誤り等ありましたらお知らせ下さい。

スライド内で用いているファイル

p5js_study ダウンロード

サーバ移行時のつぶやき

2022-03-06T00:00:00+09:00

いま、あるドメインのコンテンツをConohaに移設しているのですが、サーバ移設は毎回ヒヤヒヤします。
単なるブログではなく、Webアプリ的なものも複数含むので、動作確認などあれこれとテスト項目が発生します。

ネームサーバにドメインが浸透するまで3時間くらいかかるので、それ以前にSSLの準備やコンテンツの準備をして、素振りを何回もして、操作のシミュレーションをして、何もすることがなくなったと確信を持って、DNS設定情報を変更していよいよ切り替え！としても、その反映まで最低3時間はかかるので、自分のシミュレーションのどこかに誤りがなかったか、反映までの間にドキドキが続くのです。SSL証明書の準備も有効化までに最低30分かかるので、このラグもヒヤヒヤを増幅させます。コンテンツの移行だけでも作業が結構あるのですが、ネームサーバ変更に伴い、ステージングから本番に上げたときのURL変更に伴う最終チェックも含めて気の休まらない時間の連続ですね。この文章もその作業中に書いているのですが、今、最終段階に来ていて、コンテンツのリンク切れをチェックしたら、うまくいかなかったので、もう一度やり直しです。

以前、社会インフラ系の極めて大規模なシステムに関わったときは、結合試験まで1週間くらいあったのですが、1週間もあると逆に吹っ切れるもので、後先問題が出ようが、今リラックスするしかないと努めていました。とは言え、その間には別の仕事が待っているので、休まらない期間に変わりはないのですが。そして、一体どれだけの人数が関わっているか分からない規模のソースがマージされて、結合試験が始まってバグが発見されると土日も深夜も関係なくデバッグに追われるので、本当の修羅場が始まります。大規模なシステムなので、テスト機も大規模なもので使用時間割があるのですが、みんな同じ時期にデバッグのために使うため、深夜2時からの予約になったりと、なかなかヘビーなものです。

と書いていたら、コンテンツの移行が一部うまく行ったようです。

ですが、まだ完全ではありません。
地味な作業ですが、こつこつと不具合を潰していく作業は続きます。

miroで蔵書管理の試行

2022-02-13T00:00:00+09:00

miroで蔵書管理をしてみました。単なる試行です。
自分のニーズとしては以下の通りです。完全に自分事なのでご了承下さい。

自分ニーズ

書籍間は何らかのつながりが可視化されていてほしい。
- 調べ物をしたいときなどに、関連的に他の書籍を見たいときに使いたい。
- その本を買ったときの気持ちが思い出されるので、活動のモチベーションになる。
表紙画像が印象に残っているので、画像を重視したい。
- タイトルと表紙では表紙のイメージが強い。
何らかの弱い属性は付けたい。
- タグのようなものがあるとよい。
- フォルダ分けのような強い分類は不要。
買いたい本の候補も置いておきたい。

既存のサービスへの思うこと

よくある蔵書管理サービスは、オンライン本棚が四角で無機質で、連携性がわかりにくい。
- 知識のマップを作るような感覚で、自由配置したい。
- 本棚のメタファーって必要？
マウスで直感的に操作したい。

やってみた

とりあえず、手元にあった60冊くらいを、Amazonで画像検索してそれを貼り付けて配置してみました。
今回は試行なので、電子書籍は今回は入れていません。また、雑誌や何巻も出ている単行本などは1枚にしています。
ドラッグアンドドロップで画像が次々入れられるので入力操作は楽です。

雑感

単なる画像を置いて、適当に線や背景色を付けてみただけですが、自由配置できる利便性は得られました。
しかし、貼り付けているのが画像だけなので、タイトルのテキストが必要であれば自分で別途入力する必要があります。また属性が付けられなかったり、画像クリックでAmazonなどの販売サイトで詳細情報が見られなかったりと、活用性には難があるので、この目的での継続的な使用はしないと思います。miroが劣っているのではなく、miroの指向性と使い方がマッチしていないのだと思います。（これが分かっただけでも収穫でした。）
使うとすれば、特定の物事に対し、思考整理をしたいときに、都度並べてみるという感じかと思います。操作性は抜群なので、すぐ作れる強みを活かして、インスタント書籍マップ化ツールといったところでしょうか。
自分ニーズを満たせるかというと、そうでは無かったのが実際なので、自分で作ってみるのも手かと思いました。

Grasshopperで曲面の法線方向にオブジェクトを生成する

2022-02-05T00:00:00+09:00

初のGrasshopper記事です。
タイトルそのままの曲面の各法線方向にオブジェクトを生成するサンプルプログラムを書いてみました。

行っている事は、以下の通りです。

乱数を用いて曲面を生成
曲面を等分割
分割点での法線方向に平面を生成
各分割点で法線方向に球とコーンを生成
生成する球はGraph Mapperにてグラデーション的に可変

Grasshopperでの記述

結果

APIの動作を手軽に確認できるPostman

2022-01-23T00:00:00+09:00

外部APIを利用したいとき、レスポンスの中身を手軽に見てみたい、と思うときがあるかと思います。
そんなときに、Postmanは、ベースとなるURLやKeyをGUI上で指定してAPI呼び出し結果を得ることができるサービスです。

Postmanへの登録

Postman API Platform

https://www.postman.com

Webアプリ版とクライアントアプリ版があるようですが、今回はWebアプリ版で試してみました。
なお、ユーザ登録が必要と思い、登録はしましたが、Team機能を利用しない場合は登録しなくとも使えるようです。
一時的にAPIをテストしたい時は、普通にURLを文字列で書き起こした方が早い場合もあるので、自分のAPIテストが再利用できる利点を生かすためにもユーザ登録はした方がPostmanを使う意味があるのかなと思います。

YahooデベロッパーネットワークのAPIで試してみる

さて、サンプルとして、日本のYahooAPIで形態素解析を試してみました。
なお、API仕様や画面は今後変更や廃止となる場合がありますのでご注意下さい。（本記事は2022年1月時点のものです。）

APIドキュメント – Yahoo!デベロッパーネットワーク

テスト用開発アプリケーションの登録

Yahoo IDが必要になるので、持っていない方は、YahooIDを登録して下さい。
また、今回は例としてYahoo APIを使っているだけなので、他のAPIを使う場合、読み流すだけで大丈夫です。

右上にある「アプリケーションの管理」の赤いボタンから、新たに作るアプリケーションを登録します。

画面の中央あたりにある「新しいアプリケーションを開発」ボタンを押します。

今回は、外部サービスを使った初期的なテストなので、「クライアントサイド」を選択しました。
自分で管理できるサーバからのアクセスであれば「サーバサイド」が良いのでしょう。
Postmanからも秘密鍵を配備してアクセスできるのかもしれませんが、呼び出し元URLが固定されてしまうので、今回のように、返り値を見るためだけのテストには不向きだと思ったのもあり、「クライアントサイド」にしています。

画面の指示に従って登録を進めていくと、Client IDが表示されますので、それをテキストエディタなどにコピーしておきます。

Yahoo Japanのデベロッパーネットワークの公開APIサイトから「テキスト解析」→「日本語形態素解析」と進みます。

日本語形態素解析のリクエストパラメータ

リクエストURLとリクエストパラメータが示されます。

リクエストURL

https://jlp.yahooapis.jp/MAService/V1/parse

リクエストパラメータ（必須項目のみ）

パラメータ	値
appid	string
sentence	string
results	string: ma, uniq
解析結果の種類をコンマで区切って指定します。
“ma”: 形態素解析の結果を ma_result に返します。
“uniq”: 出現頻度情報を uniq_result に返します。
無指定の場合は “ma” になります。

必須項目以外にもパラメータはいろいろありますが、必要に応じて設定するとして、今回はパスします。

Postman側でのリクエストURLの生成

ワークスペースの作成

Workspaces→Myworkspace→「New」もしくは「＋」で、新しいWorkspace作成。

「HTTP Request」を選択。

APIコールするURLを生成します。ベースURLと各パラメータを入力していくと、URLが生成されていきます。

GETの欄には、形態素解析のリクエストURL「 https://jlp.yahooapis.jp/MAService/V1/parse 」を記入。
KEYとVALUEの欄はクリックすると、値が入力できますので、下記の通り入力します。
1行目のKEYには、「appid」、VALUEには、先ほどYahooデベロッパーネットワークで取得したClient IDを入力。
2行目のKEYは「sentence」、VALUEには解析したい日本語。
3行目のKEYは「results」、VALUEには「uniq」としておきます。

そして、右上の青い「Send」ボタンを押すと、ウインドウの下部に以下のような結果が出てきます。
もし、エラーメッセージ的な内容が表示されたら、Client IDの入力ミスやURL記載ミスなどが考えられますので、確認して下さい。

結果がxmlで返ってきました。
後は、APIの値を利用したそれを受け取るアプリを自分で書くことができます。

他のAPIでもKEYとVALUEを渡すだけなので、同様のAPI呼び出しが可能ですね。

おわりに

こうした返り値の結果は、APIドキュメントにサンプルとして載っていますが、自分の手を動かして結果を得てみることで、内容の理解が深まります。
また、テキストでURL生成しようとすると、その事前準備がいろいろと必要だったりしますが、このPostmanはWebサービスとして提供されているので、APIの動作をさっと試すことができます。

Pythonの出力をWordPressのショートコードで表示

2022-01-08T00:00:00+09:00

WordPressのショートコードは、フロントエンドで可変パラメータを渡してリアルタイムに動的コンテンツを生成できる便利な機能です。
そこで、Wordpressのショートコードでパラメータを与え、それを元にPythonプログラムを呼び出して、その結果をショートコードの出力にできたら利便性が上がると考え、試してみました。併せて、一連の処理をレンタルサーバのConoHa Wingで実現できそうだったので試してみました。

初めから結果

ConoHa Wingのサーバ上で動かしたWordpressで、独自のショートコードを作成し、その中でPythonプログラムを呼び出して、出力をショートコードに渡してWordpressからの出力ができました。その結果、ショートコードからPythonに自由にパラメータも渡せるので、Pythonプログラムではアルゴリズム開発に特化でき、Wordpress側では出力に特化できるので、表示に関してはWordpressの機能を全面的に用いることができ、大変楽です。
WordPressテーマとの親和性やレイアウトの自由度など、デザイナーとの分業が可能になります。

環境

サーバ: ConoHa Wing（グレードはいろいろありますがどれでも大丈夫でしょう）
サーバ環境：
- ConoHa Wing標準のWordpress環境
- ConoHa Wing標準の Python 3.6.11（2022/01/08現在）

Python側準備

ConoHaサーバのhomeディレクトリ以下に適当なディレクトリを作り、pyファイルを置きます。
今回は例として、
/home/xxxxx/yyyyy/python/test.py
とします。

test.py

import sys
args = sys.argv
index = 0

# output normal strings
print('Output by Python')

# output args
for arg in args:
    print('args[' + str(index) + '] = ' + arg)
    if index == 1:
        amount = int(arg)
    if index == 2:
        price = int(arg)
    index += 1

# output result calculation
print('calc: ', amount*price )

# for loop sample
for i in range(5):
    print(i)

解説

引数を2個受け取り、数量と価格の変数に入れて、かけ算結果を出力する。
サンプルとして、固定文字列と引数一覧、ループ処理の結果も出力した。
コマンドラインから以下のように打ち込み、Pythonレベルでエラーのないことを確認する。

コマンドプロンプトでの実行

python test.py 5 40

WordPress側での準備

functions.phpへの記載

functions.phpは使っているテーマフォルダの中にあります。
具体的には、以下の通り。ユーザー名、ドメイン名、テーマ名はそれぞれの環境に読み替えてください。

functions.phpの場所

/home/[ユーザー名]/public_html/[ドメイン名]/wp-content/themes/[テーマ名]/functions.php

子テーマを作って、子テーマのfunctions.phpを編集すると、テーマがアップデートされたときに泣かなくて済むので、子テーマは必須ですね。なので、上記のテーマ名のところは、子テーマ名にすると良いでしょう。

functions.php

function python_func( $atts ) {
	$pythonexe = 'python ';
	$pythonscriptpath = '/home/xxxxx/yyyyy/python/';
	$pythonscript = 'test.py';
	$atts = shortcode_atts(
			array(
					'amount' => '1',
					'price' => '100'
			), $atts);
	$pythonarg = ' '. $atts['amount'].' '.$atts['price'];
	$pythoncommand = $pythonexe.$pythonscriptpath.$pythonscript.$pythonarg;

	exec($pythoncommand, $py_output);

	$str = str_replace(array("\r\n", "\r", "\n"), "\n", $py_output);
	$output = implode("<br>\n", $str);
	return $output;

}
add_shortcode( 'pytest', 'python_func' );

解説

ショートコードから2つのパラメータ（amountとprice）を取得しphpのexec関数でのコマンド文字列に引数として渡す。
exec関数は、osのコマンドを叩くだけの機能なので、文字列としてパラメータを渡す。
コマンドライン文字列などが冗長なのは、練習用として把握しやすくするためなので、適当に短くしても良い。
exec関数からの出力は、配列に入ってくるので、最終的にはimplodeで
を入れるなどしてhtmlの文字列化する。

add_shortcode( 'pytest', 'python_func' );

にて、ショートコードとして登録します。pytestはショートコード名。python_funcはショートコードが指定されたときにから呼び出される関数名。それぞれ任意。
処理内容や名称がイケてないのはご了承下さい。全体の実験を最優先しました。

ショートコードでの記載

WordPressの投稿または固定ページから、任意の位置にショートコードブロックを挿入します。

記載するショートコードは以下の通り。

[pytest amount='3' price='120']

amontやpriceの引数の数値は適当に変えてください。

実行結果

WordPressでの出力結果

Output by Python
args[0] = /home/xxxxx/yyyyy/python/test.py
args[1] = 3
args[2] = 120
calc: 360
0
1
2
3
4

calc:のところは、ショートコードのパラメータがPythonに渡され、その結果、Pythonが計算処理を行ってphpに返した結果を出力しています。
冒頭でも書いたとおり、単なるショートコードの出力なので、全体のレイアウトはWordpressの機能やテーマに委ねることができます。

残された課題の検討

実行結果は、単なる文字列で扱いづらいので、json等でPython側からphpに値を返して、php側で出力の整形をするのが良いでしょう。
また、Python側では演算のコアに特化したほうが得意分野の棲み分けができるので、両者の良さが発揮できるでしょう。
execコマンドは、OSのコマンドを実行できてしまうコマンドなので、取り扱いには注意が必要です。今回は、練習のためショートコードからの引数をダイレクトにPython側に渡していますが、適切なエスケープや変換処理が必要でしょう。
また、都度、プロセスが起動されるので多くのアクセスには弱いと思われます。今回はConoha Wingのレンタルサーバ上で行いましたが、高負荷が予想される場合には自前サーバや演算性能の高いサーバで行った方が良いでしょう。

終わりに

課題はいろいろあるものの、Pythonからの出力をWordpressに渡して、ショートコードで呼び出せるようになったので、例えば、4半期の売り上げ集計なども、ブラウザからWordpressのショートコードをいじるだけで期を変えて出力でき、プログラマが都度いじる必要がなくなりました。ショートコードをまとめてグループ化したり、表示レイアウトも実に多彩になり、再利用性が高くなります。
ショートコード化できたことで、社内や工場内でのIoT機器からの出力集計など、プログラマではない人が、見たいパラメータをWordpressだけで各自パラメータを変えることができるので、新規ページにパラメータを変えたショートコードを埋め込むなどすれば、自由に必要な動的ページが作れることになります。
現実的には、社内などで何かセンサーなどの大量データを監視するための自動分析ツールを呼び出すなど、調査・研究用途に向いているのではないかと思います。
あとは、定型的な統計処理をして、社内の定期レポートとして見せる場合などでしょうか。
そして、実はこれがConoHa Wingの標準環境でできた事も大きいです。ライブラリは何があるか調査はしていないのですが、pipでインストールもできるようです。
おそらく、RaspberryPi上でも同様のことができるでしょう。
まずは今回、ショートコードからPythonを呼び出す処理は実現できたので、今回は終了とします。

参考

WordPressにPythonを埋め込む方法 – みやびのどっとぴーわい (miyabikno-jobs.com)

【WordPress】便利なショートコードの基本的な書き方と使い方 | KERENOR { ケレンオール }

RaspberryPi4での外付けSSDへのバックアップ

2021-11-21T00:00:00+09:00

RaspberryPi4＋Ubuntuで、バックアップをUSB接続の外部SSDに保存しようと思い取り組んだが、いろいろ躓きがあり、それを解決できたのでメモ。
対象は、Wordpressを運用するWebサーバ。究極的には、Wordpressのデータバックアップと復元が実現できれば目的は達する。ただし、できる限り無料環境で行いたいという条件でいろいろ試した。

環境

RaspberryPi4 メモリ4GB
Ubuntu Desktop 21.04
USB外付けSSD
WordPressが動くWebサーバ環境

最初に結論

RaspberryPi4に外付けSSDを用いる場合は、RaspberryPiからのUSB電力供給が足りなくなる場合があるので、セルフパワーのUSBハブを用いてSSDを接続するのがよい。

バックアップ方式

使用ツール

All-in-One WP Migration
BackWPup
Timeshift

運用管理が複数人になり、かつそのスキル差がある場合、できる限りGUIでかつ設定が簡単な方式がよい。
WordPressでのバックアップは、WordpressのプラグインであるAll-in-One WP Migrationを用いることとした。これは、サイト開発時に開発環境とステージング環境、本番環境を行ったり来たりするのでできる限りその移行の手間を軽減するために、Wordpressの環境をフルバックアップできる環境が必要だったので使用することとした。このプラグインは実にお手軽。
ただし、この All-in-One WP Migration は、バックアップファイルが512MBを超えると、有料版でないと復元できない。（小分けにするなどいろいろ回避策はあるが、限界もあるし、何より手間が増える。）また、無料版は手動バックアップのみと制限がある。
負荷は増えるが、他のプラグイン「BackWPup」により自動バックアップも併用することとした。
それに加えて、システムイメージ全体のバックアップとしてTimeshiftで行うこととした。

参考

第588回　TimeShiftでUbuntuをホットバックアップする 2019年版：Ubuntu Weekly Recipe｜gihyo.jp … 技術評論社

Timeshiftのインストールと実行

sudo apt install timeshift

おそらく、Ubuntu20.04移行は公式レボジトリに入っているので、上記コマンドのみで行ける。それ以前のバージョンだと別途レポジトリ追加が必要だった。このコマンドだけですぐ終わる。
Timeshiftの詳しい説明は他のサイトを参照してください。
このTimeshiftのバックアップ先は、ext4形式でフォーマットされた外部ドライブが必要になる。

第1のはまりポイント「ext4フォーマットができない」

このフォーマットを行う際に、UbuntuのGUIから、ユーティリティ→ディスクを用いて、ext4フォーマットを行おうとした。
この時点で、SSDへのUSB供給電力量が足りないとは思わず、普通にバスパワー接続でフォーマットを試みた。しかし、フォーマット途中で致命的エラーを出して止まる。そして、何度かしているうちに、セクターエラーなど様々なドライブエラーが発生し、Windowsからも認識できないドライブになってしまった。「ディスクの管理」でも認識できない状況。

第1のはまりポイントに対する解決

とりあえずMacでドライブをフォーマットしたらできたので、それで一旦SSDとして認識できるようにした。
その後、他のRaspberryPi環境などでext4フォーマットできたので、それを用いることにした。（これはたまたまだと思う。）

第2のはまりポイント「バックアップからの復元ができない」

Timeshifでバックアップも何とか外付けSSDに行うことができたが、復元の練習もしておこうと思い、Timeshiftのバックアップから復元を試みた。ただ、これも復元がうまくいく場合もあれば、途中でTimeshiftが落ちたりする場合もあり、不安定だった。ゆっくり操作すればうまくいく確率が多かった気がして、ゆっくり操作するべしなどと自分の中で変なジンクスを作ったりしていた。

余談

RaspberryPi4をゆくゆくはSSD起動にさせてたいと思っており、下記のケースを入手していた。そして、SSDをUSB経由だが内蔵させてシステムドライブとし、さらに外付けSSDでバックアップを行う構想であった。

M.2 SSDが搭載できるRaspberry Pi 4用ケース「Argon One M.2」 – AKIBA PC Hotline! (impress.co.jp)

だが、このケースでのSSDによるバックアップと復元は、ほぼ100%失敗した。今考えると、SSDをUSBで2台もつないでいるので電力供給が全く足りていなかったと思われる。後段に、この解決顛末と課題も記した。

第2のはまりポイントに対する解決

このころから、SSDへの電力供給が足りていないのではないかと疑問を持ち始める。ネット検索などしながらSSDはセルフパワーのハブ経由で接続した方が良いなどの情報を得る。
そこで、セルフパワーのハブ経由で一通りの手順を再度行ってみた。結果、フォーマットも難なくでき、Timeshiftでのバックアップと復元も問題なく行えた。ほっとした脱力だったが、とりあえず解決。
RaspberryPi4では、電力供給にそもそも余裕がないので、USB接続のデバイスは、セルフパワーのハブで電源を共有しよう。

Argon One M.2での解決と課題

以前は失敗率100%だったが、セルフパワーUSBハブを介することで、外付けSSDの動作問題は解決した。外付けSSDから、内蔵SSDへのTimeshiftによるイメージ復元も成功し、問題なく使えている。
しかし、擬似的に内蔵しているSSDはその実USB接続である。そのため、内蔵SSDに対して将来こうした電力問題が発生しないとも限らない。もし発生した場合、コの字型になっているケース付属のUSBコネクタを使用せずに、一旦USBハブを介して、オスオスのUSBケーブルで内蔵SSDに引き戻してあげれば良いのだろう。
少し、負荷をかけるなどの様子見は必要そうだと思った。

このほかにもいろいろなパターンを試したが、やはり電力供給が解決されると、たちどころに全ての問題が解決した。

Amazon Lightsailの特徴

2021-09-04T00:00:00+09:00

AWSのLightsailは、よく使われるEC2より、シンプルな料金体系で、比較的コンパクトなサーバ運用に向いているAWSのサービスの一つです。サービス開始されてから4年ほどたっているのですが、今回、初めて使ってみました。
結論から言うと、とても良いという印象です。

Lightsailが向いている用途

個人ブログ、テスト環境、小規模企業サイト、変動しすぎる使用料が望ましくない場合

Lightsailの特徴的なところ

（AWS全般の特徴と一部かぶります）

Webサーバ運営に必要な機能がワンパッケージになっている

lightsailの説明ページによると、上記のような特徴があり、Webサーバを開設するには十分な機能がありそうです。それでいて監視機能やSSDストレージ運用で、保守面やスピードでも安心できます。

料金体系がシンプル

月あたり最低$3.5（約400円）から運用ができます。あまりアクセスのない個人ブログや企業Webサイトサーバであれば必要最低限の運用から始められるのは気軽です。アクセスが増えてきたら上位のプランにアップグレードすれば大丈夫です。しかし、アップグレードの際は、何らかの形でイメージのバックアップを取って、新しい環境でリストアする作業が必要になるため、ひと手間はかかります。

また、Lightsail使用開始から3ヶ月間はLinuxプラン、Windowsプランともに最低スペックのプラン使用料（750時間/月の使用時間分）が無料です。

サーバアプリケーション環境入りのインスタンスイメージが利用できる

インスタンスイメージとは、そのサーバ環境丸ごとのディスクイメージです。
このイメージには、素のOSだけが入っているもの、またはWordpressなどのWebアプリケーションが入っているものなど、多様なインスタンスイメージから初期的にインストールされる環境を選べます。

Amazon Lightsail インスタンスのイメージの選択

https://lightsail.aws.amazon.com/ls/docs/ja_jp/articles/compare-options-choose-lightsail-instance-image

具体的には、Ubuntu、CentOS、Amazon Linux、Windows ServerなどのOS、WordpressやDrupalなどのCMSまで入っているイメージなど様々あります。例えばWordpressのイメージは、データベースの設定からすべて設定済みで提供されていますので、ユーザーは固定IPアドレスにWebブラウザでアクセスするだけで、すぐにWordpressの管理画面に行くことができます。（Wordpressのパスワード設定などは別ページに記します。）
データベースを全く意識する必要がないというのは、サーバ管理者が不在の環境でもとりあえず運用できる点で、優れていると思いました。

VPSである

上記のように、Wordpressのインストールまでほぼマウスクリックのみで済んでしまう手軽さでありながら、実態はVPS（Virtual Private Server、仮想専用サーバー）です。そのため、SSHでログインして別なサーバアプリケーションを入れたり、ファイアウォールの管理もできるので、適切なポートの開閉やアクセス元の制限など、状況に応じた設定が可能です。
他のレンタルサーバでもシェルログインができるWebサーバサービスはありますが、基本的にアプリのインストールには制限があったりするため、自由度はやや下がります。つまり、表面的には簡便さの特徴を持ちつつ、柔軟な設定もできる二面性があるところが優れています。

それなりに速い

ある有名なレンタルサーバとの体感比較ですが、同じようなWordpressの運用をしても、レスポンスが速い、と感じます。
あくまで比較対象が「レンタルサーバ」なので、VPSではなく、何年か前に契約しているものであるなどの点から純粋な比較ではないのですが、Wordpressの管理画面でのレスポンスも含めてきびきびと反応します。極端かもしれませんが、10倍くらいの感覚で速いです。
もしこのLightsailでも遅くなってきたと感じたら、Lightsail内でアップグレードの検討をすればよいでしょう。

デメリット

用語が難しいかもしれない

国内レンタルサーバは、比較的国内で使われる技術用語をさらに平易にしてサービスを提供しているように思います。一方、AWS全般も含めてLightsailは技術用語がダイレクトに翻訳されて表示されるので、専門的な人でない場合、理解が難しいかもしれません。

ドメイン名の設定がやや難しい

AWSのRoute53に操作に慣れていれば楽なのかもしれません。個人的なことかもしれませんが、いつも操作に悩みます。

管理UIがAWSから独立していて独自

独立している分、他の機能と干渉せずに管理できる明快さがある反面、新たなUIに慣れる必要があります。また、国内レンタルサーバなどでは、ドメイン設定やサーバの設定などもブラウザ上のコントロールパネルからかなり親切なUIで操作できますが、LightsailのUIは、EC2より簡素化されている分簡便ではありますが、上記の技術用語のダイレクトさもあって、初心者には難しいところがあるかもしれません。しかし、ユーザ数の多いAWSに慣れておくことは、活用範囲が広がるので、この際覚えてしまうというのが良いのでしょう。

まとめ

特徴のところに書いた、速いというのは結構メリットであると感じています。レスポンスが良いと作りこみのストレスが減るので、生産性が上がります。ある程度知識があって運用する分には、小規模向けにとても良いサーバだと思いました。
また、料金も手軽なうえに、自由度が高いので、他でいくつか借りているサーバの移転も検討したくなります。

思考整理ツールとしてのmiro

2021-08-15T00:00:00+09:00

miroは良い意味で、捉えどころのないWebツールと言えます。多人数での創造的な作業の可視化に向いているツールです。
Webツールなのに、ここまでできるの？と思う機能が盛り込まれていて、実によくできていると感じます。

miroは多機能なので、自分が使っている範疇で、このツールの輪郭を表すならば以下の通りです。

ベクターグラフィックソフトウェア
プレゼンテーションソフトウェア
オンラインホワイトボード
付せん
Webキャプチャとスクラップブック
フローチャート記述ソフトウェア
ビデオミーティングソフトウェア

そして、これらの機能が、多人数とリアルタイムにオンラインで使えるメリットがあります。

簡単な画面説明

（表示内容はサンプルとしてテンプレートの内容そのままです。）

左側には画面内での描画ツールなどのツールボタン類があります。
画面下部には、プレゼンテーションモードでの画面送りや、画面共有の機能など、主に参加者同士のコラボレーションに関係する機能があります。

そして、初期表示のテンプレートが豊富にあることも初期的なとっつきやすさの点では、良いかもしれません。
ただし、見た目上の額縁が初期的に作られるだけで、インタラクティブな仕掛けはほとんどありません。そのため、いろいろなアイデア創出や問題解決のフレームワークを利用してみたいけど、初めから枠線を書くのが面倒という場合の利用になると思います。とは言え、ディスカッションのフレームワークカタログのようになっているので、議論の目的に合いそうなフレームワークを探す際にも便利です。

創造的な用途での使い方

アイデアを書き留める際に、肝心なのは鮮度良く記録できるスピードです。
miroにはスピーディにアイデアを書き留めるツール類が多数そろっています。

アイデアを出すときによく使う代表的なのが「付せん」ですね。
miroではカラフルな「付せん」が簡単に貼れるようになっていて、デジタルツールの良さを生かして、複製や更新も直感的な操作で行えます。
移動することや、矢印を付けたりアイコンを付けたりすることも簡単に行うことができ、工夫次第で使い方が広がります。

グラフィック描画機能は、専門ソフトであるIllustratorやPhotoshopには及びません。Powerpointの方が、塗りや線種が豊富だったりしますが、豊富なアイコンがあらかじめ用意されていて、着想をそれを素早く可視化できる点では、miroに分があります。
操作の直感性とスピーディさは、アイデアを素早く書き留めて、メンバーとアイデアの粘土を練って形を具現化してくかのような感覚があります。

ここでは全ての機能を紹介はしませんが、アイデアを出すためにこの機能は作られたのだなということや、操作の複雑性を感じるところはあえて排除したのだろうな、と思われる開発者の思想を感じます。
多人数のコラボレーションにおいては、操作の複雑さは、時に、操作の未習熟によるアイデア出しのスピード低下にもつながりかねません。そうした考慮があるのだろうと思います。

アイデア出しに実際に使っています

コラボレーションだけでなく、自分自身の思考整理にもよく使います。ぼんやりと考え始めたことをまずは図にしてみると、全体像が見えやすくなることがあります。

手書きのスピードより圧倒的に速く、改変や、再利用も可能で、思考のスピードに操作が追いつきます。

何かをWebで調べたときにその画像やスクリーンショットなども簡単に貼れます。そのため、アイデア出しの前のスクラップブック的な使い方もよく行います。

日本語の扱い

miroは英語圏のツールなので、日本語の取り扱いはすこし弱いところはあります。

表示するフォントは、プルダウンから選べるのですが、日本語フォントは2種類しかありません。しかもほとんど変化がありません。
ボールド（太字）だけは使えますので、それで変化を付けることになります。

画面表示上の文字

PDF化したときにはフォントはさらに減ってどの日本語でも同じフォントになります。ボールドだけは有効です。

PDF化した文字

補足ですが、PDF化するときには、frameをつくってPDF化する領域を囲う必要があります。そして、高品質PDF出力が可能なのは、有料ユーザーだけになります。

このPDF書き出しですが、以前は中国語フォントに置き換えられてしまったので、違和感がありましたが、最近のアップデートで日本語フォントで出力されるようになりました。また、frameを作る機能も細かな機能がたくさんあり、使いこなすと、miroによってできることが広がる気がします。プレゼンテーションを行うときにも、このframeを用います。

まとめ

miroは、多機能だけれども、アイデアを出して、コラボレーションすることに機能を特化しており、多機能を奥に秘めたシンプルなツールという不思議なツールです。
オンラインによるコラボレーション会議が増えてきた昨今、miroを使うと、対面より創造性が促進される時も多いと感じます。
多人数の使用でも、個人でも、思考整理ツールとしておすすめです。

WebMSXで簡単なBASIC

2021-08-14T00:00:00+09:00

WebMSXで簡単なBASICプログラム書いてみました。

WebMSXサイト
https://webmsx.org/

日本語キーボードを使っている場合、キーマップが異なるので、右下の歯車マークから、「Select Machine」を選択し、Japanと記載のある機種を選択すると良いでしょう。

初めに、下記のように画面を設定すると入力しやすいでしょう。

screen0:color 15,0

多次元配列も簡単に記述できます。

こんな感じでサクサクと書いてみます。
コピーペーストができないので、似たような記述は行番号を上書きして行を複製したりして、タイプ量を減らすことができます。

リハビリも兼ねて大分冗長に書いています。詰めればこの内容は1/2～1/3くらいに減らせると思います。

実行してみます。

ゆっくりスクロールしながら、配列の内容を表示していきます。

処理内容に意味はありません。指ならしです。

たまに、MSX-BASICの事を思い出したら、ブラウザから簡単に扱えるので触ってみたいと思います。

追記

三角関数で擬似的にCIRCLE命令を代替するプログラムを書いてみました。

最後のtan命令は、ウェイト用です。

結果

dokuwikiを導入してみる

2021-08-13T00:00:00+09:00

複数人での情報共有にwiki的なツールを使いたいところがあったので、いろいろ調べてみたところ、dokuwikiがカスタマイズ性も高く、インストールも簡単そうだったので試しに導入してみることとしました。

公式サイト

dokuwiki [DokuWiki]

DB不要で、PHPが動いていれば、フォルダ一式をコピーするだけで配備完了です。

プラグインによる機能拡張、テーマによるデザイン変更も可能なので、必要性に応じてカスタマイズできそうです。
これまで、様々な情報共有ツール導入を試みた例からすると、情報共有は、各利用者が情報を書き込むようになってこそ、共有が図られます。そのために、かゆいところに手が届く系のプラグイン（マニアック系）は、初期的にはインストールしない方が無難だと思っています。ダイナミックに機能追加がなされるもの、操作感が直感的なものに限ってインストールするのが良さそうです。特に、メンバー間にITリテラシに差がある場合には、注意深く選定する必要があります。

そう考えると、テーマも、初期テーマは必ずしも初心者フレンドリーではないので、カスタマイズする必要があります。全体的に文字が小さく、行間や余白の設定など、今風でない感じがします。テーマライブラリから探して見るも、なかなか気に入るものに巡り会えていません。

作るしかないのかと思案中です。

UIFlowでThingspeakにデータを飛ばす

2021-07-11T00:00:00+09:00

M5StickC+UIFlow＋Thingspeakで、センサーで取得した値をクラウドサーバに記録するフローができたのでメモ。

準備と環境

準備：Thingspeakのアカウント。とりあえずは無料版で試してみます。
環境：M5StickC、UIFlow デスクトップ版1.7.4、ENVIIセンサーユニット

UIFlowブロック

注意点

httpsではなく、httpで。
URLの文字列は頑張って自分で生成する。
&以降に送りたい変数を指定する。

field1=値&field2=値....

となる文字列を作る。
今回は、3つのセンサーの値を取得しているため、以下のようになるように文字列を結合した。

http://api.thingspeak.com/update?api_key=●●●●●●●●&field1=▲▲&field2=▲▲&field3=▲▲

結合した文字列をどこかに表示すれば間違いがなくなるのだろうけれど、M5StickCの画面は小さいし、今回は諦めました。

API Keyの取得

説明が前後しましたが、Thingspeakのチャンネル管理画面でAPI Keyが記載されたURLが取得できます。

「API Keys」のタブの中の右側の「Write a Channel Feed」の中です。
このURLはサンプルとしてfield1=0の値が入っていますので、前項の方法を用いて、変数を追加するなど、プログラム中で文字列を生成します。

結果

このように表示できました。

Thingspeakの無料版は、データの最短送信間隔が15秒なので、UIFlow上でも15秒以上のウェイトを入れると良いでしょう。

すこしはまったところ

httpsだとうまくいかないようだ。多分、M5StickCに証明書を入れるなどの設定が必要になるのだろう。
初めのうちはM5StickCからののHttp Clientアクセスが安定しなかった。（原因不明）
MQTTも試そうとしたが、Thingspeakの無料版では対応していないようだ。

書評「アフターデジタル2 UXと自由」

2021-06-20T00:00:00+09:00

Amazon で見る

著：藤井保文

中国などのオンラインビジネスに豊富な経験を持つ著者によるデジタル社会の今後を強いメッセージ性と多くの調査、リアルなビジネス経験談にて構成されている。全体として、中国企業の圧倒的なチャレンジ精神、スピード感、規模間で進める戦略が克明に描かれている。消費者行動、心理を観察、分析し、必要なビジネスを立ち上げていく緻密さとダイナミックさは日本は到底追いつけないレベルに達している感じがした。

自分は、細やかな分析は日本人や日本企業が得意、と思っていたが、本書に登場する企業群は、膨大なデータ基盤を構築し、そこから新たにビジネスを立ち上げていくスピード感に長けており、また、既存のデータプラットフォームの上で何ができるかを冷静に見ている。
日本人にありがちな思想として、「デジタルに頼りすぎると、人間味がなくなる」という考えを持つ人がいるが、本書に登場する主に中国の企業は、人々の生活がより便利になり、ゆとりの時間が生まれ、人とのコミュニケーションがより円滑になるサービスを提供している。コーヒーだったり、金融だったり、宅配だったり業種は様々だ。
そして、それらがプラットフォーム化され、さらにそのプラットフォームの経済圏の上で動くミニアプリと呼ばれるサードパーティーのサービス開発が盛んだという。
少なくとも、そうしたサービス提供をダメもとでもチャレンジはしてみて、そこから良いも悪いも結果を吸収して次につなげていっている。やる前から懸念事項だけ並べて何もやらない体質とは大違いだ。この実務を通して得られる経験値の差は、今後の国別の産業成長力に大きく響いてくる危機感を覚えた。

世界の産業の収益のレイヤー構造がまた一段上がった気がした。エネルギーだったり、製造業だったり、ソフトウェア、OSなど産業構造のレイヤーが積み重なっていくが、おそらく最上位の消費者意思決定レイヤーは、サービス上のサービスになりつつある気がした。日本は大きくこの世界的競争に乗り遅れている。巨大なプラットフォームを有している企業は数えるほどしかなく、それが他社との連携がなされているオープンプラットフォームかというと、そうでもない。
IaaSのクラウド基盤の多くは、海外企業が活躍し、PaaS、SaaSも多くが海外企業だ。その海外プラットフォームの上で、多くの日本のサービスが群雄割拠している。
もっともっと我々はチャレンジとアイデア、そして本質的な他者理解を深めなければならないと感じた。

中国はてっきり掃除機のようにデータを吸い上げてビジネスをしているのかと思ったら、意外とそうでもない。コストと効果を天秤にかけて不必要なデータ収集はしないし、データ収集した以上は顧客に還元できるサービス提供をしないと、顧客離反を招いてしまうとのこと。
本書で印象に残ったのは、以下の文章。

中国では民間企業も大量のデータを保有していますが、そうした企業は社会的責任としてのハイレベルな精神を持っています。以下に示すのは、ある中国企業の幹部と話していたときのことです。

「日本では、使いもしない情報をユーザーに入力させ、そのデータをアップセル・クロスセルにしか使わない企業もまだまだ多いんだ」
「それは、ユーザーに不義理だよね。ユーザーは君たちにデータを提供してくれているのに、君たちはそれを自社の利益のためにしか使っていないということでしょう？　それでは、企業とユーザーの取引関係が成り立っていない。ユーザーから信任されず、愛想をつかされてしまうよ。重要なのは、いかにユーザーに価値を提供し、ユーザーに愛され、使い続けてもらえるかだよ」

2%あたりの位置より

「藤井さんが考えている、データエコシステムとか、データの売買という考えは、すべて幻想だよ」
（中略）
「しかも藤井さんが言っているのは生体データだから、買った・買ってないのような単純なイエス・ノーのデータではなくて、波形データだよね？　そうすると、そんな生データをもらったところで、誰も解釈ができないよ。皆、そのデータが何に使えるのかというベネフィットが分からないと、わざわざデータを買ったり使ったりしてくれないし、ベネフィットが分かってもデータの値付けはかなり難しいよ。というか、単一のデータではあまり意味がないので、とても安いものにしかならない。
（後略）

51%あたりの位置より

確かに、その通りだなと思った。
例えば、IoT機器からの収集データをいくら集めたところで、そこからソリューションをセットで作らないと、波形データには何の意味もない。
つまり、「データをたくさん集めました。すごいでしょう。」の前にそれをどう活用するか、分析の仮説が少なくとも必要だということ。
コロナ感染拡大の中、いろいろと一層の発想の転換が必要と気づかされる内容であった。

NFCカードリーダーでイベント参加管理

2021-06-19T00:00:00+09:00

社内や仲間内、学校での会議やイベントを行う際に、出席管理をNFCカードリーダーで非接触自動名簿化ができるしくみをExcelのVBAで構築してみました。
各参加者が手持ちのカードをカードリーダーにかざすだけで、出席扱いになるので、非常に便利です。
社員証や学生証など各参加者がNFC（Felica）のIDカードを持っている事が前提ですが、NFCであれば何でも良いので、各自のSuicaやnanacoなどでも大丈夫です。（ただし、マイナンバーや運転免許証などはIDmがランダムになるので不可です。）
また、読み込んでいるのはカード内のIDm（固有ID）だけなので、簡易な出席管理などに最適です。

一般的には、NFCカードリーダーシステムは、大学の出欠管理や、カードキーなどとしてシステム化はされていますが、システムに組み込まれているため、気軽な応用ができません。しかし、このしくみは、Excelファイル単体だけでさっと使えるので、イベント管理以外にも、蔵書管理や、在庫・製品管理など、小グループや家庭でもちょっとした時にすぐ使えるのがメリットです。

開発環境

カードリーダーソニー製RC-S380
NFCポートソフトウェアダウンロード (sony.co.jp)
Sheep Smart Card Dll (eclip.jp)

この開発でお世話になったのは、ひつじかいの雑記帳さんのSheep Smart Card Dllです
これはWindows専用ではありますが、VBやExcel VBAで使用可能なdllで、Excelで手軽にカードリーダーが使えるようになる優れものです。
IDmしか取得しないので、suica等の残高や履歴などは一切読み取れませんが、NFCカードの一意性だけを利用する用途であれば、むしろこの簡便さが便利です。
そして、ひつじかいさんのページには、サンプルコードもありますので、それを参考にすれば、とりあえずすぐ動くExcelファイルが作れます。

VBAでの記述

宣言部分は、使用しているWindowsとExcelのビット数（64ビットか32ビットか）によってコメントアウトする箇所を変更します。
Sheep Smart Card Dllのサンプルコードより。

'OSのビット数（32bit/64bit）及びExcelのビット数に応じて、以下の部分を書き換えて下さい

'(a) OS、Excelいずれも64bitのケース（SheepSmartCard64.dllをC:\Windows\System32に置いて下さい）

Private Declare PtrSafe Function GetSmartCardUID Lib "SheepSmartCard64.dll" (ByVal SCardUID As String) As Integer

'(b) OSは64bit、Excelは32bitのケース（SheepSmartCard32.dllをC:\Windows\SysWOW64に置いて下さい）
'Private Declare Function GetSmartCardUID Lib "SheepSmartCard32.dll" (ByVal SCardUID As String) As Integer

'(c) OS、Excelいずれも32bitのケース（SheepSmartCard32.dllをC:\Windows\System32に置いて下さい）
'Private Declare Function GetSmartCardUID Lib "SheepSmartCard32.dll" (ByVal SCardUID As String) As Integer

'dllをシステムフォルダ以外に置く場合は上記のSheepSmartCard64.dll（SheepSmartCard32.dll）の部分をフルパスで記述して下さい

開発環境は、Windowsは64ビット、Excelも64ビットでしたが、実行環境はWindows64ビット、Excel32ビットだったのでコメントアウトの箇所を変える必要がありました。宣言部以外のプログラムそのものは同一でOKです。

サンプルコードを参考に、以下のコードでIDmを取得します。

ret = GetSmartCardUID(strCardUID)

strCardUIDは、引数ですが、GetSmartCardUID関数を呼んだ後、IDmの結果が帰って来ますので、これを、別途、イベント参加者の登録事前登録表や、参加受付表と紐付ければ参加管理ができます。
このあたりのUIの作り込みは、イベントという瞬発力の必要な参加者管理なので、キー操作なしで、連続的にカードを読み取れるUIを作る必要があると思います。
そこで、下記のような自動読み取りモードのボタンを押すと、自動読み取り終了が押されるまで、ずっと連続的に読み取り可能なループを回すことにしました。

この機能を持たせることで、初回のみ参加者との紐づけ登録が必要になりますが、2回目以降はsuicaで改札口を通る感覚で、参加者受付ができます。
・未登録のIDmが来たら、登録を促す。
・登録済みのIDmなら参加受付とする。
という単純な機能だけにしたので、使い勝手良く、いろいろな応用が利きそうです。
そのミドルウェアとしてdllを公開してくれたひつじかいさんに感謝です。

ToFセンサーで距離計測

2021-03-18T00:00:00+09:00

M5StickCをのToF（Time of Flight）センサーで距離を計測。
今回は、Hatではなく、Unitでのセンサーをしています。
というのも、今後、湿度の高い環境もしくは、水濡れする可能性のある環境で、ある距離を計る練習とするためです。Hatだと、M5StickC本体に直付けのため、本体保護の湿度対策が取りにくいため、ケーブルが伸ばせるI2C通信のユニットでの計測としました。
開発環境は、UI Flowです。

結論「難なくできた」

接続した様子

UI FlowでUNITからToFを追加。

UI FlowのUNIT追加画面

UI Flowでブロックでコードを書く。

一応、1秒のウェイトを入れました。

計測はできることが分かったので、Ambientにアップするなり、表示を工夫するなり、防水対策をするなり、応用に入れます。
本当に、このUI Flowは着想から結果までが圧倒的に速いデバイスと開発環境です。いろいろ試して、だめならすぐ次の着想に移れます。
ただし、ややパソコン側とM5StickCとの接続が不安定。1度接続すれば問題ないのですが。