PhotoShopのテキストレイヤーに小学校で習わない漢字が含まれるかチェックする

2021年1月9日 11:22

スクリーンショット 2021-01-07 17.57.27

子ども向けのインスタレーションやアプリを作ることが多いのですが、PhotoShopデータ内に小学生が習わない漢字が入ってるかチェックしたい！というデザイナーからの要望がありまして、去年末にお試しでJSX書いてみました。

小学校での学習漢字について

・文部省の学習指導要領
https://www.mext.go.jp/a_menu/shotou/new-cs/index.htm

・漢字一覧（平成20,21年改訂）
https://www.mext.go.jp/a_menu/shotou/new-cs/youryou/syo/koku/001.htm

・2020年度から一部漢字が変更されたらしい
https://ieben.net/syou-kanji/2020list-zen/
https://www.mext.go.jp/component/a_menu/education/micro_detail/__icsFiles/afieldfile/2019/03/18/1387017_002.pdf
https://ja.wikipedia.org/wiki/%E5%AD%A6%E5%B9%B4%E5%88%A5%E6%BC%A2%E5%AD%97%E9%85%8D%E5%BD%93%E8%A1%A8

まずは漢字一覧を調べてみる。
以下が（2020年度更新された）小学校で習う漢字一覧。
※コピペミスもあるかもなので、正しくは学習指導要領を見てね。

小学校一年生

一右雨円王音下火花貝学気九休玉金空月犬見五口校左三山子四糸字耳七車手十出女小上森人水正生青夕石赤千川先早草足村大男竹中虫町天田土二日入年白八百文木本名目立力林六

小学校二年生

引羽雲園遠何科夏家歌画回会海絵外角楽活間丸岩顔汽記帰弓牛魚京強教近兄形計元言原戸古午後語工公広交光考行高黄合谷国黒今才細作算止市矢姉思紙寺自時室社弱首秋週春書少場色食心新親図数西声星晴切雪船線前組走多太体台地池知茶昼長鳥朝直通弟店点電刀冬当東答頭同道読内南肉馬売買麦半番父風分聞米歩母方北毎妹万明鳴毛門夜野友用曜来里理話

小学校三年生

悪安暗医委意育員院飲運泳駅央横屋温化荷界開階寒感漢館岸起期客究急級宮球去橋業曲局銀区苦具君係軽血決研県庫湖向幸港号根祭皿仕死使始指歯詩次事持式実写者主守取酒受州拾終習集住重宿所暑助昭消商章勝乗植申身神真深進世整昔全相送想息速族他打対待代第題炭短談着注柱丁帳調追定庭笛鉄転都度投豆島湯登等動童農波配倍箱畑発反坂板皮悲美鼻筆氷表秒病品負部服福物平返勉放味命面問役薬由油有遊予羊洋葉陽様落流旅両緑礼列練路和

小学校四年生

愛案以衣位茨印英栄媛塩岡億加果貨課芽賀改械害街各覚潟完官管関観願岐希季旗器機議求泣給挙漁共協鏡競極熊訓軍郡群径景芸欠結建健験固功好香候康佐差菜最埼材崎昨札刷察参産散残氏司試児治滋辞鹿失借種周祝順初松笑唱焼照城縄臣信井成省清静席積折節説浅戦選然争倉巣束側続卒孫帯隊達単置仲沖兆低底的典伝徒努灯働特徳栃奈梨熱念敗梅博阪飯飛必票標不夫付府阜富副兵別辺変便包法望牧末満未民無約勇要養浴利陸良料量輪類令冷例連老労録

小学校五年生

圧囲移因永営衛易益液演応往桜可仮価河過快解格確額刊幹慣眼紀基寄規喜技義逆久旧救居許境均禁句型経潔件険検限現減故個護効厚耕航鉱構興講告混査再災妻採際在財罪殺雑酸賛士支史志枝師資飼示似識質舎謝授修述術準序招証象賞条状常情織職制性政勢精製税責績接設絶祖素総造像増則測属率損貸態団断築貯張停提程適統堂銅導得毒独任燃能破犯判版比肥非費備評貧布婦武復複仏粉編弁保墓報豊防貿暴脈務夢迷綿輸余容略留領歴

小学校六年生

胃異遺域宇映延沿恩我灰拡革閣割株干巻看簡危机揮貴疑吸供胸郷勤筋系敬警劇激穴券絹権憲源厳己呼誤后孝皇紅降鋼刻穀骨困砂座済裁策冊蚕至私姿視詞誌磁射捨尺若樹収宗就衆従縦縮熟純処署諸除承将傷障蒸針仁垂推寸盛聖誠舌宣専泉洗染銭善奏窓創装層操蔵臓存尊退宅担探誕段暖値宙忠著庁頂腸潮賃痛敵展討党糖届難乳認納脳派拝背肺俳班晩否批秘俵腹奮並陛閉片補暮宝訪亡忘棒枚幕密盟模訳郵優預幼欲翌乱卵覧裏律臨朗論

操作手順から考える

漢字がわかったので、これを配列に入れて、テキストレイヤーの文字取得して、その中から漢字だけ抽出して照らし合わせたらできそうだなーてなことで、先に操作の流れを確認する。

・テキストレイヤーを選択する（→レイヤー情報を取得する方法）
・メニューを選ぶ（→PSを拡張するためのJSXファイル置き場所）
・ポップアップが開いて、小学校で習わない漢字が含まれている場合は明示する（→ウインドウとUIの作り方）
・OK で閉じる

VSCodeでJSXを書く準備

書き始めるにあたって、JSXを編集する→PhotoShopの「ファイル」＞「スクリプト」＞「参照」→動作確認→JSX編集・・・は心が折れてしまうので、ちょっとでも開発しやすいようにVSCodeの「ExtendScript Debugger」というアドオンを入れてみた。
ターゲットアプリケーションにPhotoshopを指定して、デバッグを実行すると自動でPhotoshopが開いてJSXを実行してくれる。なんでもあるなあ。詳しくは以下のサイトなど見てください。
https://liquidjumper.com/photoshop/photoshopcc-visual-studio-code-extendscript-debugger

選択したテキストレイヤーの文字を取得する

app.activeDocument.activeLayerで、いま選択してるレイヤーを取得できる。ちゃんとこのレイヤーがテキストレイヤーかどうか調べてからテキスト情報取得してください。ごめんなさいごめんなさい。
以下、参考記事。参考というか、ほぼこの記事から。

var activeText = app.activeDocument.activeLayer.textItem.contents;

文字の中から漢字だけを抽出する

やる度に忘れるもの第一位、正規表現。
ぐわっと関連記事をググってコピペです。
※どこまでが漢字か、みたいなとこで完全な網羅は難しいらしいので、現実的な範囲で漢字取得ということでご理解ください。フワッとした予防線張っとく。

・ひらがな、カタカナ、漢字を抽出
https://pisuke-code.com/js-check-hira-kana-kanzi/

・regexpでマッチした文字列だけ返す
http://www.tohoho-web.com/js/regexp.htm

・基本的な正規表現一覧
https://murashun.jp/blog/20190215-01.html

・JavaScriptで漢字を表す正規表現
https://stabucky.com/wp/archives/7594

var activeText = "ほげほげ国の王様が来日"
var regexp = /[\u4E00-\u9FFF]/gi;
var txt = activeText.match(regexp)
// 国,王,様,来,日

UIを生成する

UIパーツのつくりかた。こちらもぐわっとググる。
あとは実際PhotoShopの設定画面を眺めて、どんな感じで配置すればそれっぽいかなーというのを見て真似すれば良いと思う。

https://liquidjumper.com/photoshop/photoshop-javascript-gui_01
https://liquidjumper.com/photoshop/photoshop-javascript-gui-images-list
https://dtpscriptin.com/statictext/

JSXの配置方法

よし、できた（めっちゃ説明端折った）。
Macの場合は、以下のディレクトリにJSXファイルを入れる。
すると、PhotoShopから、ファイル＞スクリプト＞小学校学習漢字_選択テキスト てな感じでメニューに組み込まれる。

Applications/Adobe Photoshop 2020/Presets/Scripts/

できたJSXがこれ

テキストレイヤーを選択して、JSX実行すると検索できます。
テキストレイヤー選択してないとエラー出ます。ごめんなさいごめんなさいごめんなさい知らんがなごめんなさい本当に使うときは各々修正したらええがなごめんなさい。
動作してる様子をキャプチャしてみました。

全てのテキストレイヤーから検索する

スクリーンショット 2021-01-09 9.39.42

使ってみてもらったら、フィードバックがきた。たしかにたしかに。
ということで、レイヤーを選択せずにいきなりJSX実行したら全テキストから検索する流れに修正。

全レイヤーを取得する
app.activeDocument.layersで全レイヤーを取得できる。

var layers = app.activeDocument.layers;

フォルダかどうか
レイヤーの入れ子を探ってくためにフォルダかどうか調べる方法。

if ( layers[ i ].typename == "LayerSet" )

テキストレイヤーかどうか
取得したレイヤーがテキストレイヤーかどうかはこんな感じ。
あとの処理はだいたい一緒。

if ( layers[ i ].kind == "LayerKind.TEXT" )

できたjsxがこれ

いきなりJSXを走らせたら検索できるバージョンです。
テキストレイヤーがなかったらエラー出るかも。ごめんなさいごめんなさいごめんなさい知らんがなごめんなさい参考まで参考までにしてあとは自己責任やろそんなもんごめんなさい。
動作してる様子を再びキャプチャしてみました。

てなことで

「ん？」って引っかかることがあったらとりあえず作ってみる心の余裕を持っていたいですねー。
興味本位の調査なので、ほんとに使うときは自己責任＆さらに修正加えて＆ちゃんと学習指導要領で確認してね。

ということでよろしくお願いしますー。