ハダノ元教頭が GIGAスクール と DX人材育成 について考えるブログ
全校ぬりえ自動化システム「ヌルパ」を作ってみた
「今年の文化祭、コロナ禍で制限多いけど、全校ぬりえに挑戦してみようか？」
「すべてフリーソフトでだれでもできるって本当なのかな？」
「ヌルパでどうやって自動化できるの？」
そんなあなたに、全校ぬりえ自動化システム「ヌルパ」の使い方を紹介します。壁画づくり・自動化の技術的な話もします。
民間企業では働き方改革の切り札として、RPAなどによる自動化が求められています。ヌルパをきっかけに教員の働き方改革を前進させてみませんか。
nuRpa(ヌルパ)は、ぬりえ変換を自動化するＲＰＡシステム
全校ぬりえの取組紹介には、「すべてフリーソフトでだれでもできる」と書きましたが、数種類のソフトをいちいちマウスで操作していくのは、やはり骨が折れるものです。
そこで、アプリのショートカットと原画をフォルダに入れ、nuRpa.wsfをダブルクリックするだけで、全校ぬりえに必要なファイルが自動的にできあがる仕組みを作りました。
※ Windows10,Windows11のPCで動作確認済み。
※ Windows11では、右クリック-その他のオプションを表示 で、従来のWindows10の右クリックメニューが出るように変更されたので注意！
ヌルパの使い方
1) nurpa.zipをダウンロードする
すべて展開し、nurpaフォルダをドキュメントフォルダなどに移動します。
2) スムーズ化などの調整をし、PNG形式で保存した原画ファイルをnurpaフォルダに入れる
A3用紙1枚の絵は、横26cm：縦39cm = 2：3 となります。横何枚×縦何枚になるか計算して原画の横：縦の比を決め、1000ピクセルをあまり超えない程度におさめてください。
photoscape などの画像編集ソフトで、スムーズ化などの調整を加えてください。ベクトル化したときにきれいに仕上がります。
原画は、jpg や bmp ではなく、必ず png ファイルとして保存してください。
動作確認用のサンプルとして、yell0.png を入れてあります。
3) Javaバージョンを確認する
https://java.com/ja/download/uninstalltool.jsp
もしJavaが入っていなければ、インストールします。P2VJを動かすのに必要です。
Cドライブで javaw.exe を検索します。
見つかったものをコピーし、nurpaフォルダでショートカットの貼り付けをします。
※ Windows11では、右クリック-その他のオプションを表示-ショートカットの貼り付け をする。
例：javaw.exe - ショートカット リンク先→"C:\Program Files\Java\jre1.8.0_271\bin\javaw.exe"
4) P2VJをダウンロードする
http://sesamecake.sakura.ne.jp/p2vj/
すべて展開し、p2vj_1.3フォルダをドキュメントなどにコピーします。
P2VJ.jarをコピーし、nurpaフォルダでショートカットの貼り付けをします。
例：P2VJ.jar - ショートカット リンク先→"C:\Users\BOKUser\Documents\p2vj_1.3\p2vj_1.3\P2VJ.jar"
5) Inkscapeをダウンロードする
https://inkscape.org/ja/release/1.0.1/windows/
できるだけ最新版をインストールします。
Ver1.0以降は、出力命令が変更されているので要注意です。
https://lookbackmargin.blog/2020/07/31/inkscape-o-instead-of-e/
インストールしたくない場合は、32-bitのPortable版をダウンロードし、インストール先（実際は展開のみ）をドキュメントなどにして使用します。
デスクトップのInkscapeのショートカットをコピーし、nurpaフォルダで貼り付けをします。
例：Inkscape リンク先→"C:\Program Files\Inkscape\bin\inkscape.exe"
または、InkscapePortable.exeをコピーし、nurpaフォルダでショートカットの貼り付けをします。
例：InkscapePortable.exe - ショートカット リンク先→C:\Users\BOKUser\Documents\InkscapePortable\InkscapePortable.exe
6) PosteRazorをダウンロードする
https://www.jimakudaio.com/post-9637
最新版をダウンロード・インストールします。
デスクトップのPosteRazorのショートカットをコピーし、nurpaフォルダで貼り付けをします。
例：PosteRazor.exe - ショートカット リンク先→"C:\Program Files (x86)\PosteRazor\PosteRazor.exe"
7) nuRpaを実行する
nurpaフォルダの nuRpa.wsf をダブルクリックして実行します。
処理内容を変更したいときは、 nuriemaker.js をテキストエディタ（Mery など）で編集します。
2)で計算した枚数で //////★横分割数 の RoboKey("数"); を打ち換えて変更できます。縦分割数は、画像のサイズと横分割数から自動計算されます。「手本」と「ぬりえ」それぞれ指定できます。
※ nuriemaker.js を直接ダブルクリックしないこと。
nuRpaでは、次の4段階で処理が進んでゆきます。
①原画をSVGに変換、②完成画とぬりえのSVGを作成、③SVGをPNGに変換、④分割印刷用PDFを作成。
（それぞれ、①P2VJ、②JScriptでテキスト置換、③Inkscape、④PosteRazor を使って実行）
②のぬりえ化については、「塗色を透明に」→「塗色を白色に」とアルゴリズムを改良しました。これにより、不要な線が透けることなく、塗りやすくなりました。
8) 個人手本とぬりえを分割印刷する
nuRpaで作成された分割印刷用PDF（～tr.pdfと～trp.pdf）に pdf_as でページ番号を付加します。
Acrobat Reader DC で、印刷します。
壁画づくりの技術的な話
「大きな壁画を分割して共同制作したい」というハダノの夢は、PCを使えば実現できそうでした。
「PL学園の人文字のマスを2cmぐらいにしたら、写真クオリティの壁画ができないか」と思いついて、1993年に横16m × 縦10mの巨大壁画を作ってみました。県都の大きな中学校の3年生8クラスの文化祭作品です。「夢を現実に」をスローガンに体育大会の感動を表現しました。体育大会の写真をスキャンし、8色の色コードをBASICのpoint関数で読み取りました。生徒はその数字の表を見ながら、模造紙のマス目をポスターカラーで塗りました。壁画は話題となり、地元の新聞にも載りました。「ドット壁画」の誕生です。
その後、「ドット壁画の作り方を教えてほしい」と自宅に人が来るようになりました。高校に行った教え子が高校ではやらせ、転任した同僚がその学校ではやらせ、しだいに文化祭や卒業式のステージ画の定番となりました。
しかし、ドット壁画はあくまでも実験でした。原画を作ってしまえば、あとは単純作業です。一人ひとりの生徒に創意工夫の余地はありません。数年後、ハダノは自分の手でドット壁画を封印しました。
田舎の学校に移っていたハダノは、専門の理科以外に数・技・美などを持たされていました。美術を教えていたとき、あることに気づきました。絵の苦手な生徒は、見た通りの形ではなく、言葉の影響を受けたシンボルを描こうとするのです。試しに上下さかさまにした絵を模写させると、みんな上手に描けます。言葉を使うことができないからです。
立体感が苦手な生徒は、見た通りの色ではなく、頭の中で信じた色を塗ろうとするのです。試しに真っ白のトイレットペーパーをスケッチさせるとき、明るさを4段階に処理した写真を見せたあとは、もうだれも「トイレットペーパーは白一色だから描けない」とは言いません。
共同制作では、形が狂うと貼り合わせられません。色は自由な発想の余地があります。こうして、「ぬりえ」にたどりつきました。2000年代は Paint Shop Pro を使い、効果-アーティスティック効果-ポスタリゼーション で減色後、 効果-エッジ効果-輪郭検出 で輪郭線を得て、画像分割もPythonマクロでやっていました。できばえはよかったものの、フリーソフトではなかったため、はやらせるのは無理がありました。
2010年代になると、画面の高解像度化に伴い、ベクトル画像が脚光を浴びるようになりました。Web標準技術の一つとして、SVGというベクトル画像の規格が普及してきました。HTMLのようなテキストでベクトル画像が描画できるという画期的なものです。SVG編集ソフトでは、Adobe Illustratorが有名ですが、Inkscape という優秀なフリーソフトが現われました。
ぬりえ制作では、ビットマップ画像より、ベクトル画像の方が適しています。問題は、写真のようなビットマップをベクトルにきれいに変換するのはたいへんということです。Inkscape にもトレースという機能がありますが、変換精度は今一つです。そんなとき、P2VJというフリーソフトを知りました。ビットマップ→ベクトル変換に特化していて、きれいにやってくれます。あとは、SVGの中のテキストをいじって輪郭線を灰色にしたり、塗色を抜いたりするだけでぬりえの完成です。
画像分割は、自分でもVisualBasicで作ったことがあります。大量の画像ファイルができて管理がたいへんでした。PosteRazor は、１つのPDFファイルにしてくれます。生徒が描き損じても、ページ指定で目的の分割画像だけ印刷することができるのです。
●●中全校ぬりえの技術的な話
2020年度●●中学校文化祭テーマ「YELL～感謝・希望・笑顔～」
原画① 紅葉の背景を！
色が地味すぎる、もっとカラフルにしないと。紅葉の背景画像を探そう！
※ 360度背景画像と３Dモデルを探し、Blenderで合成。Gifアニメは、画面キャプチャツール「窓フォト」で作成。軽量化してからWebにアップロード。
原画② どこまでも伸びる木を！
原画③ みんなを笑顔にした集団行動
体育大会全校種目「集団行動」
原画④ 今ここにしかない音楽を！
リコーダーで小鳥のさえずりを創作
原画⑤ YELLが伝わる応援グッズ？
文化祭テーマのYELLがはっきりわかるには、小道具が必要。カラフルな応援グッズと言えば…？
※ SVGモーフィングアニメーションは、flubberで作成。
原画⑥ ファイト！オー！
力感がない、がっかりだ。撮り直そう！
原画⑦ よし、合体だ！
※ このアニメーションは、Wick Editor で作成。フリーのWebアプリで、クリックやキーボード入力を受け付けて動作を変えることもできるので、簡単な教材やゲームが作れ、プログラミングの入門にも役立ちそう。
- パラパラ漫画アニメーションをプログラムで制御できる「Wick Editor」を使ってみた！
- Wick - Webベースのアニメーション作成エンジン
Wick Editor は、学校のiPadでも動き、登録不要・インストール不要で使え、Web標準技術に沿っているので学習したことが無駄にならない。パラパラ漫画式でもTween補間でもとにかくビジュアルにアニメが作れ、GIFやmp4で出力できるので、いろんな環境で見ることができる。まだ、日本語の資料が少ないが、動画編集の経験があれば、迷わずに使える。 アドビのプレミアなどの動画編集ソフトでは、mp4に変換しなくてもそのままGIFアニメを動画クリップとして読み込むことができて便利。
ベクトル化 → ぬりえ に
すべてフリーソフトでだれでもできる。
nuRpa（ヌルパ）で自動実行すれば、さらに楽ちん！
自動化の技術的な話
教員の働き方改革のためにもRPA（ロボティック・プロセス・オートメーション）などで自動化することが求められています。
マウスやタッチでの直感的な操作（GUI）は、初心者にはやさしいが、熟練者やコンピュータには扱いづらいものです。キーボードでコマンドをテキスト入力する操作（CUI）の方が、動作が軽く、記録・共有しやすいので処理を自動化しやすいといえます。デザイナーとプログラマーの間の溝もこれが原因でしょう。
『コマンドラインで実行→キーボードで操作→マウスで操作』の順に自動化が難しくなります。操作対象を特定するためには、オブジェクト認識、画像認識、さらにはAI活用も必要になってきます。
現在のruRpaでは、「①原画をSVGに変換、②完成画とぬりえのSVGを作成、③SVGをPNGに変換」は、コマンドラインで実行し、「④分割印刷用PDFを作成」は、キーボード操作を自動化しています。プログラムの行数を比較すると、①～③の平均16行に対し、④は158行で10倍ものコード量となっているのです。
モダンな開発環境（VS Code、Node.js、Python、…）は、セキュリティの関係でPCにインストールできない学校が多いのが現状です。しばらくはWSHなどレガシーな技術で何とかするしかないでしょう。
などにより、ぬりえ変換以外にも広く業務の自動化に取り組んでいきたいと考えています。
特に、「Robotクラス」には、2000年公開の自作ライブラリ「TieUp（タイアップ）」と共通する方向性を感じます。
https://www.vector.co.jp/soft/win95/util/se099345.html
nuRpa.wsf 実行例（画面出力をコピペ）
nuRpa (ヌルパ) は、ぬりえ変換を自動化するＲＰＡシステムです。
natadeさんのSenkoWSH.js（WSH JScript用の汎用ライブラリ）を読み込んで使用しています。
まず、 nurpa フォルダ内のショートカットを調べます。
javaw.exe - ショートカット.lnk
P2VJ.jar - ショートカット.lnk
inkscape.exe - ショートカット.lnk
PosteRazor.exe - ショートカット.lnk
もし、？がついていれば、そのショートカットを nurpa フォルダ内にコピーしてから再び実行してください。誤作動を防ぐため、不 要なウィンドウは、終了・最小化してください。
0 :ここで処理を終了
1 :原画を P2VJ でSVGファイルに変換（要 java、要 P2VJ）
2 :完成画svgとぬりえsvgを作成
3 :Inkscape でPNG画像にエクスポート（要 Inkscape）
4 :PosteRazor で分割印刷用PDF作成（要 PosteRazor）
どこまで処理するかを、半角数字とEnterキーで！
4
4 番の処理まで実行します。処理が完全に終わるまで、手を触れないでください。
yell0.png を
yell0.svg に変換します。
処理が終わるまで数分かかります。辛抱強くお待ちください、、、
"C:\\Users\\k***8\\AppData\\Local\\JDownloader 2.0\\jre\\bin\\javaw.exe" -jar C:\\Users\\k***8\\OneDrive\\ドキュメント\\OLS\\p2vj_1.3\\p2vj_1.3\\P2VJ.jar -i yell0.png -o yell0.svg -posterize 256
1番「P2VJによるベクトル化」が終わりました。
2番「完成画（～tr.svg）とぬりえ（～trp.svg）のベクトル画像作成」が終わりました。
"C:\\Program Files\\Inkscape\\bin\\inkscape.exe" -z yell0tr.svg -o yell0tr.png -d 320
"C:\\Program Files\\Inkscape\\bin\\inkscape.exe" -z yell0trp.svg -o yell0trp.png -d 320
3番「完成画（～tr.png）とぬりえ（～trp.png）のビットマップ画像作成」が終わりました。
yell0tr.pdf を一旦開いて閉じてから削除します。
.
"C:\\Program Files (x86)\\PosteRazor\\PosteRazor.exe" D:\\dev\\nurpa\\yell0tr.png
..
"C:\\Program Files (x86)\\PosteRazor\\PosteRazor.exe" D:\\dev\\nurpa\\yell0trp.png
..
4番「個人手本（～tr.pdf）とぬりえ（～trp.pdf）の分割印刷用PDF作成」が終わりました。
自動的に終了します。
DX人材育成へ
「DXに本気で取り組まないと2025年の崖を乗り越えられない」は、大企業だけの問題ではありません。
自動車にしてもOAにしても機械を導入すれば自動化されて楽になるというのは幻想です。機械の操作に追われて終わりでしょう。「自動車→自動運転車」に相当するのが「OA→RPA」です。
大企業では、「COBOL・自社運用→JAVA・クラウド」へと転換しようとしていますが、これはせいぜい「MTガソリン車→運転支援付きATハイブリッド車」ぐらいの変化です。完全な自動化のためには、「認知」「判断」「操作」、そして「学習」し改良し続けるAI技術が必要です。AI人材育成に向けて教育も変わらなければなりません。
GIGAスクールの一人１台タブレット導入に向けて準備する中で、マウスやタッチでのGUIしか知らない人がUNIX文化で積み上げられたCUIの世界に踏み込むのはかなり困難と確信しました。
今やデザイナーでさえ、作品をGitで管理する時代です。Gitコマンドを使いこなせないと他のデザイナーやエンジニアと連携できないはずです。どんな映画も、原作本や台本などのテキストをもとにみんなが協働して制作されます。プログラミングは、台本やマニュアルや指導案のようなテキストを書く作業です。
未来を生きる子どもたちには、読解力・表現力・論理的思考力が必要です。小学校にプログラミング教育が入ったものの、ビジュアルプログラミング体験のみで、中学校のテキストプログラミングにつながっていません。
AIリテラシーの前にICTリテラシーが必要です。スマホやタブレットで各種アプリやサービスを便利に使いこなすことより、テキストベースのコマンドやファイルの取り扱い・タッチタイピングを基礎教養として重視すべきです。
nuRpaの開発でも、ぬりえ化アルゴリズムの改良は、「正規表現」を使うことで簡単に実現できると気づきました。こういう基礎的な部分をGUIでオブラートに包んでブラックボックス化してはいけないとも感じています。ガラパゴス化する日本の中で、世界の集合知を高めるためにどんな貢献ができるか、考えていきたいものです。
※ SVGは、拡大縮小・変形しても美しい、XMLベースのWeb標準画像フォーマットです。
スマホのSVG対応も進み、今後ますます利用がふくらむSVGの基礎から応用までをわかりやすく解説しています。
ハダノは、この本のおかげでヌルパを作ることができました。
Q大理学部生物学科数理生物学研究室にて分子進化学権威の宮田隆氏のもとFORTRANでDNA解析に没頭。F社のSEに内定していたが、科学のおもしろさを教えるため中学校理科教員を選択。新任のころから、「答えのない問題を追求させたい」「団結力と文化的な力を集団づくりで」「教育研究をもっと科学的に」「教育の情報化が必要」「チョーク＆トークの注入式授業からアクティブラーニングへ」「教科横断的なSTEAM教育で生涯学習・SDGsへ」という思いを持ちつつ、4市10校にて勤務。
9年間の教頭時代、さまざまな不条理・矛盾に悩み、ICTによる働き方改革を推進。2021年3月定年退職。「特定の学校だけでなく、広く人材育成を」「日本陥没をDXで食い止めたい」「元教員の自分にできることを」と、教育DX研究の道へ。
おおいたAIテクノロジーセンター会員。デジタル人材育成学会・日本STEM教育学会・日本情報教育学会・データサイエンティスト協会・日本RPA協会の会員。JDLA G検定 2022 #1 合格者。