webサイトや印刷物のデザインを制作する際に、様々な方のサムネイルを並べて掲載することがしばしば発生するかと思います。 少量であれば手作業で作成しても良いですが、大量に作成する場合にトリミングや顔の大きさを揃えて書き出しを行っていくのも少々手間になります。 今回はOpenCVを用いてそのあたりの作業を自動化してみようかと思います。



<h2>下準備</h2>



OpenCVを利用するためにPhythonとOpenCVをインストールします。 自分の環境はMacでPhythonはプリインストールされているため、OpenCVのみをインストールしました。



OpenCVのインストールに関してはhomebrewを利用しています。 以下のURLを参考に行いました。 <a href="https://qiita.com/makki_maki04/items/f62c5e4e68709d9b3b89">参考サイト</a>



<h2>取りあえず動くソースコード</h2>



以下はとりあえず動くソースコードになります。 書き出し画像サイズや顔の面積の割合等は任意の値に書き換え可能です。 また、このソースコードを利用するためには顔認識に必要なOpenCV用のカスケード識別器の学習済みファイルが必要になります。以下からダウンロードを行ってください。 <a href="https://github.com/opencv/opencv/tree/master/data/haarcascades">学習済みファイルはこちら</a>



<h3>ソースコード</h3>



<div class="code-toolbar"><pre class="wp-block-code language-phython" tabindex="0"><code class="language-phython">import cv2
import glob
import numpy

#カスケード型分類器を読み込み
face_cascade = cv2.CascadeClassifier('haarcascade_frontalface_alt.xml')

# ファイルを開く
files = glob.glob("origin_images/*")

# 書き出し画像サイズ
dist_image_width = 500
dist_image_height = 600

# 画像サイズに対する顔の面積
face_area_ratio = 0.5

for n in range(len(files)):
 # 画像をロード
 image = cv2.imread(files[n])

 # 元画像のサイズを取得
 height, width = image.shape[:2]

 # 顔情報を検出
 faces = face_cascade.detectMultiScale(image, 1.1, 3)

 # 取得した顔情報をもとに処理
 for (x, y, w, h) in faces:
 # 顔の縮小率を取得
 image_scale_ratio = dist_image_width / w

 # 色々計算して画像の中心に顔が来るように調整
 mv_mat = numpy.float32([[1, 0, -x + (w * face_area_ratio)], [0, 1, -y + (h * face_area_ratio)]])
 afin_image = cv2.warpAffine(image, mv_mat, (width, height))
 afin_image = afin_image[0: int((h / face_area_ratio) * (dist_image_height / dist_image_width)), 0: int(w / face_area_ratio)]
 afin_image = cv2.resize(afin_image, dsize = (dist_image_width, dist_image_height))

 # 保存
 cv2.imwrite('dist_images/' + str(n + 1) + '.png', afin_image)
</code></pre><div class="toolbar"><div class="toolbar-item">Phython</div></div></div>



<h3>ディレクトリ構成</h3>



<figure class="wp-block-image size-large"><img src="https://api.romantist.jp/wp-content/uploads/2022/11/image.png" alt="" class="wp-image-311"></figure>



<ul><li>main.pyは上記のソースコードになります</li><li>haarcascade_frontalface_alt.xmlは学習済みファイルです</li><li>origin_imagesは処理を行いたい画像を格納するディレクトリです</li><li>dist_imagesは処理後の画像を保存するためのディレクトリです</li></ul>



<h3>処理の実行</h3>



以下のコマンドで処理を実行してください。



<pre class="wp-block-code"><code>python main.py</code></pre>



<h2>主力結果</h2>



実際に今回のソースコードで出力した結果になります。



<h3>加工前の画像</h3>



<figure class="wp-block-gallery columns-3"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="https://api.romantist.jp/wp-content/uploads/2022/11/origin-1-1024x683.jpg" alt="" data-id="312" class="wp-image-312"></figure></li><li class="blocks-gallery-item"><figure><img src="https://api.romantist.jp/wp-content/uploads/2022/11/origin-2-2-683x1024.jpg" alt="" data-id="317" data-link="https://api.romantist.jp/?attachment_id=317" class="wp-image-317"></figure></li><li class="blocks-gallery-item"><figure><img src="https://api.romantist.jp/wp-content/uploads/2022/11/origin-3-2-1024x683.jpg" alt="" data-id="318" data-full-url="https://api.romantist.jp/wp-content/uploads/2022/11/origin-3-2-scaled.jpg" data-link="https://api.romantist.jp/?attachment_id=318" class="wp-image-318"></figure></li></ul></figure>



<h3>加工後の画像</h3>



<figure class="wp-block-gallery columns-3"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="https://api.romantist.jp/wp-content/uploads/2022/11/1.png" alt="" data-id="319" class="wp-image-319"></figure></li><li class="blocks-gallery-item"><figure><img src="https://api.romantist.jp/wp-content/uploads/2022/11/2.png" alt="" data-id="320" data-link="https://api.romantist.jp/?attachment_id=320" class="wp-image-320"></figure></li><li class="blocks-gallery-item"><figure><img src="https://api.romantist.jp/wp-content/uploads/2022/11/3.png" alt="" data-id="321" data-full-url="https://api.romantist.jp/wp-content/uploads/2022/11/3.png" data-link="https://api.romantist.jp/?attachment_id=321" class="wp-image-321"></figure></li></ul></figure>



<h2>所感</h2>



しっかりと指定した画像のサイズにトリミングされ、顔自体もその枠内に収まっているものの、顔の大きさがしっかりと揃っていないところが気になります。 加工前の画像の顔の角度等がもう少し揃っているとそこらへんの精度はもう少し高くなるかもしれません。

OpenCV で人物の顔の大きさを揃えたサムネイルを出力する

AIによる画像生成が話題となる昨今、最新のAdobe Sensei（AI支援）でどのくらい人物や髪の毛の切り抜きが楽になるかを検証してみたいと思います。







<h2>Photoshopのバージョン</h2>



<figure class="wp-block-image size-large"><img src="https://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-01.png" alt="" class="wp-image-263"></figure>



<figure class="wp-block-image size-large"><img src="https://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-02.png" alt="" class="wp-image-264"></figure>



<ul><li>Adobe 2023（24.0.0）</li></ul>



2022/11/04(金) 現在で最新バージョンを使用します。







<h2>写真素材準備（切り抜き対象）</h2>



<figure class="wp-block-gallery columns-1 is-cropped"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="https://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-12-699x1024.jpg" alt="" data-id="275" data-full-url="https://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-12.jpg" data-link="https://api.romantist.jp/?attachment_id=275" class="wp-image-275"></figure></li></ul></figure>



<ul><li><a href="https://unsplash.com/ja/%E5%86%99%E7%9C%9F/m663zRzRe40">庭の前で花を持つ女性の写真 – Unsplashで見つける女性の無料写真</a></li></ul>



<a href="https://unsplash.com/ja">Unsplash</a> から無料写真をダウンロード。 こちらを素材に人物の切り抜きをしていきます。







<h2>切り抜き検証</h2>







<h3>以下の3つのパターンで検証</h3>



<ul><li>【検証1】「選択範囲 → 被写体を選択」でそのまま切り抜き</li><li>【検証2】「被写体を選択」をベースに「選択とマスク」で微調整</li><li>【検証3】「検証1・2」をベースに5分程度手動調整</li></ul>







<h3>【検証1】「選択範囲 → 被写体を選択」でそのまま切り抜き</h3>



<figure class="wp-block-image size-large"><img src="https://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-03-1-1024x864.png" alt="" class="wp-image-269"></figure>



<h4>作業手順</h4>



<ol><li> 写真を開き「選択範囲」 メニュー から「被写体を選択」 を選ぶ</li><li>レイヤーに選択範囲でマスクをかける</li></ol>



<figure class="wp-block-image size-large"><img src="https://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-04.png" alt="" class="wp-image-270"></figure>



<figure class="wp-block-image size-large"><img src="https://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-05.png" alt="" class="wp-image-271"></figure>



シンプルに「被写体を選択」だけでどのくらい正確に人物を切り抜けるかを検証。 仮にこの操作のみで完結するのであれば相当な時短を実現できると思われます。







<h4>検証1 - 結果</h4>



<figure class="wp-block-image size-large"><img src="https://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-06-1-699x1024.jpg" alt="" class="wp-image-276"></figure>



<figure class="wp-block-image size-large"><img src="https://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-07.png" alt="" class="wp-image-273"></figure>



結構抜きが甘かったり余分なもの入っていたり削れてしまってたり。。 写真的に人物と背景の境目が曖昧な部分・人物より前に何かが写ってしまってたりはするけど、手放しでこのまま良し！とは出来ない仕上がりでした。。







<h3>【検証2】「被写体を選択」をベースに「選択とマスク」で微調整</h3>



<figure class="wp-block-image size-large"><img src="https://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-08-1024x867.png" alt="" class="wp-image-277"></figure>



<h4>作業手順</h4>



<ol><li> 写真を開き「選択範囲」 メニュー から「被写体を選択」 を選ぶ</li><li>「選択範囲」 メニュー から「選択とマスク」 を選び、編集画面を開く<ol><li> 画面上部の「髪の毛を調整」を実行</li><li> 属性パネルで「エッジを検出 - 半径: 10px」に設定</li><li> 属性パネルで「エッジをシフト: -30%」に設定</li></ol></li></ol>



<figure class="wp-block-image size-large"><img src="https://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-09.png" alt="" class="wp-image-278"></figure>



「被写体を選択」にプラスアルファで調整を加えます。 大まかには「髪の毛を重点的に調整・切り抜きの境目を調整」という処理を行っています。



今回行った選択とマスク編集画面での設定は仮のものになりますが、実際に編集する写真群に最適な設定を見出した後にPhotoshop機能の「アクション」や「ドロップレット」と組み合わせれば複数の素材に対して一括処理を行うことも可能です。



<figure class="wp-block-image size-large"><img src="https://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-10-1024x867.gif" alt="" class="wp-image-279"><figcaption>「被写体を選択 ＋ プラスアルファ処理」の Before/After の比較イメージ</figcaption></figure>



<h4> 検証2 - 結果 </h4>



<figure class="wp-block-image size-large"><img src="https://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-11-699x1024.jpg" alt="" class="wp-image-280"></figure>



検証1よりは多少髪の毛周りや人物の境目の白い境界部分が滑らかになったけど、根本的な過不足問題は解決していません。







<h3>【検証3】「検証1・2」をベースに5分程度手動調整</h3>



<figure class="wp-block-image size-large"><img src="https://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-13-1024x815.png" alt="" class="wp-image-281"></figure>



<h4> 作業手順 </h4>



 （特定の手順は存在しないが例として下記調整を行う） 



<ul><li>選択とマスク編集画面の「境界線調整ブラシツール」を使う </li><li>マスクを塗る<ul><li>クイック選択ツール ＋ 境界をぼかす - ぼかしの半径： 5pixel</li><li>ブラシツール</li></ul></li></ul>



目視での作業になるため時間をかけるほどクオリティは高くなると思いますが、今回は「被写体を選択」＋ 約5分の手作業 でどの程度までできるかの検証になります。



<h4> 検証3 - 結果 </h4>



<figure class="wp-block-image size-large"><img src="https://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-14-699x1024.jpg" alt="" class="wp-image-282"></figure>



素材次第で「被写体を選択」の結果も変わるかと思いますが、5分の手作業を加えれば最低限の下処理に近い段階くらいまでは持っていけそうです。







<h2>検証後の所感</h2>



<figure class="wp-block-gallery columns-2 is-cropped"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="http://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-12-699x1024.jpg" alt="" data-id="275" data-full-url="http://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-12.jpg" data-link="http://api.romantist.jp/?attachment_id=275" class="wp-image-275"><figcaption class="blocks-gallery-item__caption">Original</figcaption></figure></li><li class="blocks-gallery-item"><figure><img src="http://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-06-1-699x1024.jpg" alt="" data-id="276" data-full-url="http://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-06-1.jpg" data-link="http://api.romantist.jp/?attachment_id=276" class="wp-image-276"><figcaption class="blocks-gallery-item__caption">検証1</figcaption></figure></li><li class="blocks-gallery-item"><figure><img src="http://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-11-699x1024.jpg" alt="" data-id="280" data-full-url="http://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-11.jpg" data-link="http://api.romantist.jp/?attachment_id=280" class="wp-image-280"><figcaption class="blocks-gallery-item__caption">検証2</figcaption></figure></li><li class="blocks-gallery-item"><figure><img src="http://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-14-699x1024.jpg" alt="" data-id="282" data-full-url="http://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-14.jpg" data-link="http://api.romantist.jp/?attachment_id=282" class="wp-image-282"><figcaption class="blocks-gallery-item__caption">検証3</figcaption></figure></li></ul></figure>



Adobe Sensei と「被写体を選択」機能登場初期から比べれば切り抜き精度は上がってきているので、確実に作業を時短してくれる頼もしい味方と思える一方で、まだまだ手放しでは完結できないなぁ。。というのが正直な感想でした。



今後も大幅アップデートがあるときは随時検証していきたいと思います。







<h2>他の写真素材での検証結果一覧</h2>







<h3>他の写真素材1</h3>



<figure class="wp-block-gallery columns-2 is-cropped"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="https://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-15-1024x682.jpg" alt="" data-id="287" data-full-url="https://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-15.jpg" data-link="https://api.romantist.jp/?attachment_id=287" class="wp-image-287"><figcaption class="blocks-gallery-item__caption">Original</figcaption></figure></li><li class="blocks-gallery-item"><figure><img src="https://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-16-1024x682.jpg" alt="" data-id="284" data-full-url="https://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-16.jpg" data-link="https://api.romantist.jp/?attachment_id=284" class="wp-image-284"><figcaption class="blocks-gallery-item__caption">検証1</figcaption></figure></li><li class="blocks-gallery-item"><figure><img src="https://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-17-1024x682.jpg" alt="" data-id="285" data-full-url="https://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-17.jpg" data-link="https://api.romantist.jp/?attachment_id=285" class="wp-image-285"><figcaption class="blocks-gallery-item__caption"> 検証2</figcaption></figure></li><li class="blocks-gallery-item"><figure><img src="https://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-18-1024x682.jpg" alt="" data-id="286" data-full-url="https://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-18.jpg" data-link="https://api.romantist.jp/?attachment_id=286" class="wp-image-286"><figcaption class="blocks-gallery-item__caption"> 検証3</figcaption></figure></li></ul><figcaption class="blocks-gallery-caption"><a href="https://unsplash.com/ja/%E5%86%99%E7%9C%9F/FC4z3l4sUYc">ジャンプショット写真をしている人々のグループの写真 – Unsplashの無料写真</a></figcaption></figure>



大分仕上がりが荒く、手作業5分でも下処理完了までいけませんでした。。







<h3> 他の写真素材2 </h3>



<figure class="wp-block-gallery columns-2 is-cropped"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="https://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-19-768x1024.jpg" alt="" data-id="288" data-link="https://api.romantist.jp/?attachment_id=288" class="wp-image-288"><figcaption class="blocks-gallery-item__caption">Original</figcaption></figure></li><li class="blocks-gallery-item"><figure><img src="https://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-20-768x1024.jpg" alt="" data-id="291" data-full-url="https://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-20.jpg" data-link="https://api.romantist.jp/?attachment_id=291" class="wp-image-291"><figcaption class="blocks-gallery-item__caption"> 検証1</figcaption></figure></li><li class="blocks-gallery-item"><figure><img src="https://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-21-768x1024.jpg" alt="" data-id="289" data-full-url="https://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-21.jpg" data-link="https://api.romantist.jp/?attachment_id=289" class="wp-image-289"><figcaption class="blocks-gallery-item__caption"> 検証2</figcaption></figure></li><li class="blocks-gallery-item"><figure><img src="https://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-22-768x1024.jpg" alt="" data-id="290" data-full-url="https://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-22.jpg" data-link="https://api.romantist.jp/?attachment_id=290" class="wp-image-290"><figcaption class="blocks-gallery-item__caption"> 検証3</figcaption></figure></li></ul><figcaption class="blocks-gallery-caption"><a href="https://unsplash.com/ja/%E5%86%99%E7%9C%9F/4Bj89jzXhDU">巻き毛の女性のグレースケール写真の写真 – Unsplashで見つけるグレーの無料写真</a></figcaption></figure>



「被写体を選択」からの調整は難しそうだったので、検証3での大まかな切り抜きは「色域選択 - 背景の白選択 → 選択範囲を反転 → マスク」というやり方を採用しました。







<h3> 他の写真素材3 </h3>



<figure class="wp-block-gallery columns-2 is-cropped"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="https://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-23-1024x768.jpg" alt="" data-id="292" data-full-url="https://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-23.jpg" data-link="https://api.romantist.jp/?attachment_id=292" class="wp-image-292"><figcaption class="blocks-gallery-item__caption"> Original </figcaption></figure></li><li class="blocks-gallery-item"><figure><img src="https://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-24-1024x768.jpg" alt="" data-id="293" data-full-url="https://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-24.jpg" data-link="https://api.romantist.jp/?attachment_id=293" class="wp-image-293"><figcaption class="blocks-gallery-item__caption">検証1</figcaption></figure></li><li class="blocks-gallery-item"><figure><img src="https://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-25-1024x768.jpg" alt="" data-id="294" data-full-url="https://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-25.jpg" data-link="https://api.romantist.jp/?attachment_id=294" class="wp-image-294"><figcaption class="blocks-gallery-item__caption"> 検証2</figcaption></figure></li><li class="blocks-gallery-item"><figure><img src="https://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-26-1024x768.jpg" alt="" data-id="295" data-full-url="https://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-26.jpg" data-link="https://api.romantist.jp/?attachment_id=295" class="wp-image-295"><figcaption class="blocks-gallery-item__caption"> 検証3</figcaption></figure></li></ul><figcaption class="blocks-gallery-caption"><a href="https://unsplash.com/ja/%E5%86%99%E7%9C%9F/zXn5qinCDKg">昼間に緑の芝生のフィールドでサッカーをしている人々のグループの写真 – Unsplashの無料写真</a></figcaption></figure>



こちらも割と取りこぼしが多かったので下処理完了ならず。。







<h3> 他の写真素材4 </h3>



<figure class="wp-block-gallery columns-2 is-cropped"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="https://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-27-682x1024.jpg" alt="" data-id="296" data-full-url="https://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-27.jpg" data-link="https://api.romantist.jp/?attachment_id=296" class="wp-image-296"><figcaption class="blocks-gallery-item__caption"> Original </figcaption></figure></li><li class="blocks-gallery-item"><figure><img src="https://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-28-682x1024.jpg" alt="" data-id="297" data-full-url="https://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-28.jpg" data-link="https://api.romantist.jp/?attachment_id=297" class="wp-image-297"><figcaption class="blocks-gallery-item__caption"> 検証1</figcaption></figure></li><li class="blocks-gallery-item"><figure><img src="https://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-29-682x1024.jpg" alt="" data-id="298" data-full-url="https://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-29.jpg" data-link="https://api.romantist.jp/?attachment_id=298" class="wp-image-298"><figcaption class="blocks-gallery-item__caption"> 検証2</figcaption></figure></li><li class="blocks-gallery-item"><figure><img src="https://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-30-682x1024.jpg" alt="" data-id="299" data-full-url="https://api.romantist.jp/wp-content/uploads/2022/11/ps-2023-clipping-30.jpg" data-link="https://api.romantist.jp/?attachment_id=299" class="wp-image-299"><figcaption class="blocks-gallery-item__caption"> 検証3</figcaption></figure></li></ul><figcaption class="blocks-gallery-caption"><a href="https://unsplash.com/ja/%E5%86%99%E7%9C%9F/HGfGrLRhVIA">昼間に道路に立っている黒の長袖シャツの女性の写真 – Unsplashの無料写真</a></figcaption></figure>



こちらは検証1で良い感じになったので、検証3では1・2の良い部分をつなぎ合わせて微調整を行いました。

Photoshop2023の「被写体を選択」精度検証

WordPress で Jamstack

一応タイトルは「Photoshop データセットで大量の差分イメージを作る方法」とつけましたが、具体的には、たとえばバナーを作成したとして、一部文言を変更し大量に書き出したいときなどにこの方法を使うと効率的にデータを作成することができます。



で、上記の用なことはだいたい“Photoshop データセット”でググれば詳細の記事が出てくるのかと思うのですが、自分自身がこの機能を初めて利用したのはソーシャルゲームのカード画像を大量に作成しなければならないときでした。なのでちょっとそこら辺を題材にして解説してみようかと思います。



思い返せば10年近く前の話ですが、ソーシャルゲームのデザイン(UI、各種ページ部材等)を担当したときの話です。ソーシャルゲームはwebサービスでもあるので、各機能のUIを考えるのもなかなかに大変なことだと思うのですが、さらに切っても切れないのが大量のカードを作成しなければいけないということです。例えば作成するカードの構成要素が以下だったとして、



<figure class="wp-block-image size-large"><img src="https://api.romantist.jp/wp-content/uploads/2022/01/2.jpg" alt=""></figure>



これらを手作業でフォーマットにそって画像を作成していこうとすると・・・・



1.作成するキャラクターのレア度を確認しそれに応じたpsdを開く



<figure class="wp-block-image size-large"><img src="https://api.romantist.jp/wp-content/uploads/2022/01/4.jpg" alt=""></figure>



2.キャラクターのイラストを配置



<figure class="wp-block-image size-large"><img src="https://api.romantist.jp/wp-content/uploads/2022/01/5-1.jpg" alt=""></figure>



3.キャラクター名のテキストレイヤーに、配置したキャラクターの名前をコピペ



<figure class="wp-block-image size-large"><img src="https://api.romantist.jp/wp-content/uploads/2022/01/6.jpg" alt=""></figure>



という作業が必要になってきます。



10枚かそこらの数だったら上記の方法でもまったく構わないと思うのですが、1000枚以上のカードが必要になることなどザラなので、手作業なんかでやってられません。ミスも恐いですしね。1000枚もあれば確実にコピペミスなどやらかしちゃいます。



当時、どうしようかと絶望にひしがれながら何か良い方がないかとグーグル先生にいろいろ聞いたところ、データセットで書き出しなるものを発見。



これは使える！！と思い実際につかってみることにしました。経緯などつらつら書きましたが以下から手順になります。



<h2>1.フォーマットになるpsdのレイヤーを整理する</h2>



フォーマットのpsdをもとに大量のデータが作成されるため、レイヤーの統合などをしっかりと行い不必要なレイヤーは残らないようにします。



最下層レイヤーにはファイル名を保持しておくテキストレイヤーを用意しましょう(詳細は後述)。このテキストはデザインには一切関係ないため、フォントサイズは最小にし不透明度も0%にしておきます。



<figure class="wp-block-image size-large"><img src="https://api.romantist.jp/wp-content/uploads/2022/01/9.jpg" alt=""></figure>



<h2>2.各レイヤーに変数名をつける</h2>



テキストを差し替えたいレイヤーや、イメージを差し替えたいレイヤーに、変数名をつけてあげます。



変数名付け方は、つけたいレイヤーを選択し



イメージ　＞　変数　＞　定義



現れたダイアログの以下の部分を任意の名前に変更。



(例：キャラクターレイヤーの名前だったらchrとか)



イメージレイヤーのみにある置き換え方法はものによっては変更なしの方が良いかも知れません。



［イメージレイヤーのダイアログ］



<figure class="wp-block-image size-large"><img src="https://api.romantist.jp/wp-content/uploads/2022/01/7.jpg" alt=""></figure>



［テキストレイヤーのダイアログ］



<figure class="wp-block-image size-large"><img src="https://api.romantist.jp/wp-content/uploads/2022/01/8.jpg" alt=""></figure>



差し替えたいと思うレイヤーにすべてこの作業をしていきます。



<h2>3.変数に代入する値の情報が記載しているCSVを用意する</h2>



一応CSVの解説は以下になります。



<a href="https://ja.wikipedia.org/wiki/Comma-Separated_Values">https://ja.wikipedia.org/wiki/Comma-Separated_Values</a>



カンマ区切りで表を表現してるみたいな感じですかね。 CSVファイルを作成するときはExcel等で作成可能です。 ※もちろんテキストエディタとかでも作成できます。



以下ではExcelを使用して作成方法を解説します。



まず、一番上の行にはpsdで設定した変数名をそれぞれ記述しておきます。



ここに記載した変数名の数と、psdで設定した変数名の数に差異があるとエラーがでてしまうので要注意です。







そして各列に必要な情報を記載していきます。テキストレイヤーの列には代入したいテキストを、イメージレイヤーには差し替えたいイメージのファイル名(ファイルパス)を記載していきます。



<figure class="wp-block-image size-large"><img src="https://api.romantist.jp/wp-content/uploads/2022/01/11.jpg" alt=""></figure>



これでデータの記述は完了です。



最後にファイルを保存する際に.csv形式を選択し保存します。



<h2>4.psdにCSVファイルを読み込ませる</h2>



各レイヤーに変数名を設定したフォーマットのpsdを開きます。



そしてイメージ　＞　変数　＞　データセット



を選択すると以下のようなダイアログが出てきます。



<figure class="wp-block-image size-large"><img src="https://api.romantist.jp/wp-content/uploads/2022/01/12.jpg" alt=""></figure>



そして、読み込みを選択すると次のようなダイアログがでてきます。



<figure class="wp-block-image size-large"><img src="https://api.romantist.jp/wp-content/uploads/2022/01/13.jpg" alt=""></figure>



ここでは「最初の列をデータセット名として使用」にチェックを入れるようにしましょう。



先ほど作成したCSVの最初の列、つまりfile_nameの列がデータセット名となり、ファイルを書き出す際のファイル名にすることができます。



レイヤーにファイル名というレイヤーを用意した理由は、psdで設定した変数の数と、CSVの変数の数に差異があるとエラーがでてしまうため、無理やり代入するレイヤーを作って対応している感じです。



無事にCSVの読み込みが完了すると以下のように読み込まれた情報が表示されます。



<figure class="wp-block-image size-large"><img src="https://api.romantist.jp/wp-content/uploads/2022/01/141-1.jpg" alt=""></figure>



このときエラーが出た場合ポップアップで通知されます。



エラがー出た場合まず疑わしいのはpsdで設定した変数の数とCSVで記載してある変数の数の差異です。



そこも間違っていないようなときは、CSV作成時に余計な要素が入ってしまった可能性もあるので、既存のCSVの必要な範囲をコピーし、新たなファイルに貼り付け保存し再読込するとエラーがでなくなるケースがよくあったので、理由がわからないような時はためしてみるといいかもしれません。



ここまできたら後は書き出すのみです。



ファイル　＞　書き出し　＞　データセットからファイルを書き出し



を選択し、ファイル名の付け方を以下のようにデータセットのみにします。



<figure class="wp-block-image size-large"><img src="https://api.romantist.jp/wp-content/uploads/2022/01/15.jpg" alt=""></figure>



あとは書き出し先のディレクトリを選択して書き出すのみです。あっという間に複製されたpsdが指定のディレクトリに追加されていきます。



結果は以下のようになります。



<figure class="wp-block-image size-large"><img src="https://api.romantist.jp/wp-content/uploads/2022/01/16.jpg" alt=""></figure>



長々となりましたが、今回はソーシャルゲームのカードを題材にPhotoshopのデータセットについて解説してみました。



それ以外にも使いどころはあったりすると思うので、覚えておけばどこかで作業の効率をぐんとあげられるかもしれません。



またもっと複雑な処理を行いたい場合はJavasSriptなどを用いて処理をさせる必要がでてきます。



こちらのやり方もどこかで解説できればと思います。

Photoshop データセットで大量の差分イメージを作る方法

あけましておめでとうございます。2022年もよろしくおねがいいたします。



2020年に会社を設立し、いろいろな方にご支援をいただき2022年の1月7日に3期目を迎えることができました。お世話になった方々には心より御礼申し上げます。



3期目となり少しづつ会社も落ち着いてきたので、全く更新ができていない自社サイトに関しても実績やブログ等を少しずつ更新していければと思います。



<h2>2020・2021年の振り返り</h2>



ありがたいことに様々な企業様からご依頼をいただき、2020〜2021年は忙しくすごさせていただくことができました。様々なご依頼をいただけたことで、自分たちのデザイナーとしての強みと、今後注力して行くべき点が少しずつではありますが見えてきたと感じています。



<h2>2022年の抱負</h2>



冒頭でも述べたように、実績やブログ等の手段を用いて多くの方に私達のことを知っていただくことと、デザイナーとしての強みをより伸ばしていくための施策を考え実行に移していくことができればと考えています。



<h2>さいごに</h2>



まだまだ会社として至らないところもあるかと思いますが、より多くの企業様のお力になれるように精進してまいります。



本年もよろしくお願いいたします。

2020・2021年の振り返りと2022年の抱負

<h2>はじめに</h2>



標題のままなのですがPhotoshop上のフォルダ内のレイヤーを、それぞれのレイヤー名をファイル名として個別に書き出すJSX(ExtendScript)を作成してみました。



レイヤーごとの個別の書き出しは、レイヤーを選択して「書き出し形式...」を選択すれば個別書き出しは可能なのですが、下記のレイヤー構造のように画像に“重ねる透かしは共通のレイヤーを利用したいが、フォルダー内の画像はそれぞれ書き出したい”のようなときに便利です。



<figure class="wp-block-image size-large"><img src="https://api.romantist.jp/wp-content/uploads/2022/01/jsx_1-1024x607.jpg" alt=""></figure>



<h2>使い方</h2>



以下のスクリプトの２ヶ所を書き換えて保存すればすぐに利用することができます。 まずは以下のスクリプトを適当なテキストエディタにコピペしてください。



<div class="code-toolbar"><pre class="wp-block-code language-js" tabindex="0"><code class="language-js">/*
 * 以下は自分の環境に合わせて書き換える
 */
// 書き出したいレイヤーが格納されているPhotoshopのフォルダ名
var LAYER_SET_NAME = 'photoshop-folder';
// 書き出し先のディレクトリのパス。ここに書き出されたjpgが保存される
var EXPORT_DIRECTORY = '/Users/username/Desktop/export';

/*
 * レイヤーセット内のレイヤーを取得
 */
var layers = activeDocument.layerSets[LAYER_SET_NAME].layers;

/*
 * レイヤーセット内のレイヤーを書き出しのためにすべて非表示にする
 */
for (var i = 0; i &lt; layers.length; i++) {
 layers[i].visible = false;
}

/*
 * レイヤーセット内のレイヤーを１つ１つ表示して書き出す
 */
for (var i = 0; i &lt; layers.length; i++) {
 layers[i].visible = true;
 var fileObj = new File(EXPORT_DIRECTORY + '/' + layers[i].name + '.jpg');
 var jpegOpt = new JPEGSaveOptions();
 jpegOpt.embedColorProfile = true;
 jpegOpt.quality = 10;
 jpegOpt.formatOptions = FormatOptions.PROGRESSIVE;
 jpegOpt.scans = 3;
 jpegOpt.matte = MatteType.NONE;
 activeDocument.saveAs(fileObj, jpegOpt, true, Extension.LOWERCASE);
 layers[i].visible = false;
}
</code></pre><div class="toolbar"><div class="toolbar-item">JavaScript</div></div></div>



コピペが完了したら以下の２ヶ所を書き換えます。



まずはレイヤーが格納されているPhotoshopのフォルダを指定している部分です。 このフォルダーに格納されているレイヤーがそれぞれのレイヤー名で保存されます。 現在photoshop-folderとなっている部分を任意のフォルダ名に書き換えてください。



<div class="code-toolbar"><pre class="wp-block-code language-js" tabindex="0"><code class="language-js">var LAYER_SET_NAME = 'photoshop-folder';</code></pre><div class="toolbar"><div class="toolbar-item">JavaScript</div></div></div>



次に画像の書き出し先を指定している部分です。 画像を保存したいマシンのディレクトリのパスを指定してください。 現在/Users/username/Desktop/exportとなっている部分を任意のパスに書き換えてもらえればおｋです。



<div class="code-toolbar"><pre class="wp-block-code language-js" tabindex="0"><code class="language-js">var EXPORT_DIRECTORY = '/Users/username/Desktop/export';</code></pre><div class="toolbar"><div class="toolbar-item">JavaScript</div></div></div>



書き換えが完了したら適当な場所に適当なファイル名(拡張子は.jsx)で保存してください。



例)folder_export.jsx



保存が完了したら目的のpsdデータを開いてから、上部メニューの



ファイル &gt; スクリプト &gt; 参照



を選択して開いたダイアログから先程保存した.jsxのファイルを選択すれば処理が実行されます。 エラーのalertが表示されなければ処理成功です。



上記のレイヤー構造で処理を実行するとこのような形で書き出されます。



<figure class="wp-block-image size-large"><img src="https://api.romantist.jp/wp-content/uploads/2022/01/jsx_2-1024x645.jpg" alt=""></figure>

Photoshop の特定のフォルダ内の複数のレイヤーを、それぞれ個別のJPEGで書き出す JSX

<h2>はじめに</h2>



ポップな表現をしたいときによく使用される袋文字ですが、CSSで表現する場合outlineかtext-shadowを用いることがほとんどだと思います。 text-shadowを利用する方が簡単で自由度も高い印象ですがtext-shadowはbox-shadowと違い広がりの距離を指定することができず、シャープなアウトラインを実現するために値を複数回指定してぼかしをなくすという方法がよく取られると思います。



<div class="code-toolbar"><pre class="wp-block-code language-css" tabindex="0"><code class="language-css">.outline-text {
 text-shadow:
 0 0 8px #000,
 0 0 8px #000,
 0 0 8px #000,
 0 0 8px #000,
 0 0 8px #000,
 0 0 8px #000;
}</code></pre><div class="toolbar"><div class="toolbar-item">CSS</div></div></div>



でもこんな指定毎回やるのはだいぶめんどくさいので簡単に値を出力できるSCSSの関数を作成してみました。



<h2>関数の使い方</h2>



関数の内容は以下になります。



<div class="code-toolbar"><pre class="wp-block-code language-js" tabindex="0"><code class="language-js">@function outlineText($color, $borderWidth, $strength) {
 $values: null;
 @for $i from 0 through $strength {
 $values: append($values, 0 0 $borderWidth $color, comma)
 }
 @return $values;
}</code></pre><div class="toolbar"><div class="toolbar-item">JavaScript</div></div></div>



利用方法は第一引数に色、第二引数に太さ、第三引きそうに強さを指定すると値が出力されます。強さはtext-shadowの値を重ねる回数です。



<iframe width="100%" height="480" src="https://codepen.io/Romantist/embed/gNowBb?default-tab=html%2Cresult" allowfullscreen=""></iframe>



複数の色を重ねたい袋文字でも以下のような指定の仕方で実現できます。



<iframe width="100%" height="480" src="https://codepen.io/Romantist/embed/Zdvpwr?default-tab=html%2Cresult" allowfullscreen=""></iframe>



ただどんなに値を重ねてもシャープにはなりきらないのがイマイチなところです。 何か他にいい方法があればいいのに。

袋文字を簡単に作れる SCSS の関数

<h2>はじめに</h2>


図形の描画機能が弱い印象のXDですがついに先日のアップデートで多角形の描画がサポートされました。 以前多角形を描画できるプラグインを作成したのですがお役御免になりそうです。


しかしまだ星型やギザギザのシェイプを描画することができないようなので新たにそれらを描画できるプラグインを作成しました。



<h2>使い方</h2>



XDの上部メニューの　プラグイン &gt; プラグインを参照... から star shape で検索しインストールて下さい。



あとは&nbsp;XDのヘッダーメニューから プラグイン &gt; star shape を選択。



<figure class="wp-block-image size-large"><img src="https://api.romantist.jp/wp-content/uploads/2022/01/ss_1-2-1024x363.jpg" alt=""></figure>



すると頂点の数と外側の半径と内側の半径を入力するダイアログが表示されるので値を入力します。



<figure class="wp-block-image size-large"><img src="https://api.romantist.jp/wp-content/uploads/2022/01/ss_2-1-1024x623.jpg" alt=""></figure>



OKを押すとアクティブになっているアートボードに星型のシェイプが描画されます。



<figure class="wp-block-image size-large"><img src="https://api.romantist.jp/wp-content/uploads/2022/01/ss_3-1-1024x623.jpg" alt=""></figure>



以上が使い方になります。

Adobe XD で星型・ギザギザを描画できるプラグイン

<h2>はじめに</h2>


動作も軽く手軽にプロトタイピングを行えてかなり重宝しているXDですがいくつかの不満があります。 そのうちの一つに描画できる図形が円か矩形しかないこと。


三角だったり、六角形とかたまに使いたくなることがあるので、XDのプラグインとして正多角形を描画できるツールを作成してみました。



<h2>使い方</h2>



XDの上部メニューの　プラグイン &gt; プラグインを参照... から regular-polygon で検索しインストールて下さい。



あとは&nbsp;XDのヘッダーメニューから プラグイン &gt; Regular Polygon を選択。



<figure class="wp-block-image size-large"><img src="https://api.romantist.jp/wp-content/uploads/2022/01/rp_2-1024x640.jpg" alt=""></figure>



すると頂点の数と半径を入力するダイアログが表示されるので値を入力します。



<figure class="wp-block-image size-large"><img src="https://api.romantist.jp/wp-content/uploads/2022/01/rp_2-1024x640.jpg" alt=""></figure>



OKを押すとアクティブになっているアートボードに多角形が描画されます。



<figure class="wp-block-image size-large"><img src="https://api.romantist.jp/wp-content/uploads/2022/01/rp_3-1024x640.jpg" alt=""></figure>



以上が使い方になります。まぁでも多角形ツールくらいネイティブで実装されるといいけどなぁ。

Adobe XD で 三角形や多角形を描画できるプラグイン

<h2>はじめに</h2>



あまり需要はないと思いますが描画されているDOM要素のテキストをクリップボードにコピーしたい事象があったので作成しました。



<h2>実際の処理</h2>



サンプルのソースはこちらから



<h3 id="html">html は以下</h3>



<div class="code-toolbar"><pre class="wp-block-code language-html" tabindex="0"><code class="language-html">&lt;button id="js-button"&gt;クリップボードにコピー&lt;/button&gt;
&lt;table&gt;
 &lt;thead&gt;
 &lt;tr&gt;
 &lt;th&gt;id&lt;/th&gt;&lt;th&gt;名前&lt;/th&gt;&lt;th&gt;性別&lt;/th&gt;&lt;th&gt;年齢&lt;/th&gt;
 &lt;/tr&gt;
 &lt;/thead&gt;
 &lt;tbody id="js-tbody"&gt;&lt;!-- 今回はbodyの中身だけをコピーする --&gt;
 &lt;tr&gt;
 &lt;td&gt;1&lt;/td&gt;&lt;td&gt;佐藤&lt;/td&gt;&lt;td&gt;男&lt;/td&gt;&lt;td&gt;43&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;2&lt;/td&gt;&lt;td&gt;鈴木&lt;/td&gt;&lt;td&gt;女&lt;/td&gt;&lt;td&gt;32&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;3&lt;/td&gt;&lt;td&gt;高橋&lt;/td&gt;&lt;td&gt;男&lt;/td&gt;&lt;td&gt;25&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/tbody&gt;
&lt;/table&gt;</code></pre><div class="toolbar"><div class="toolbar-item">HTML</div></div></div>



<h3 id="javascript">JavaScript は以下</h3>



<div class="code-toolbar"><pre class="wp-block-code language-js" tabindex="0"><code class="language-js">
// 要素を取得
var $button = document.getElementById('js-button');
var $tbody = document.getElementById('js-tbody');

$button.addEventListener('click', () =&gt; {
 // 選択エリアを定義
 var range = document.createRange();
 range.selectNodeContents($tbody);

 // 選択
 window.getSelection().addRange(range);

 // クリップボードにコピー
 document.execCommand('copy');

 // 選択解除
 window.getSelection().removeRange(range);
});
</code></pre><div class="toolbar"><div class="toolbar-item">JavaScript</div></div></div>



処理の流れとしてはコピーしたいテキストを含む要素を取得して、選択のエリアを定義します。 その後getSelection().addRange()で選択を行いその状態をクリップボードにコピーします。 選択解除はなくてもよいけど、行わないとテキストが反転選択された状態が残ってしまうので一応入れています。



以上でクリップボードへのコピーは完了です。

JavaScript で table の内容を clipboard にコピー

<h2>概要</h2>



Railsのassetsファイルはどこに配置するべきかについて記載します。



<h2 id="3">3つの配置場所について</h2>



<a href="https://railsguides.jp/asset_pipeline.html#%E3%82%A2%E3%82%BB%E3%83%83%E3%83%88%E3%81%AE%E7%B7%A8%E6%88%90">Rails Guid</a>によると、以下3つの配置がユースケースと共に用意されています。



<ul><li>app/assetsは、カスタム画像ファイル、JavaScript、スタイルシートなど、アプリケーション自身が保有するアセットの置き場所です。</li><li>lib/assetsは、1つのアプリケーションの範疇に収まらないライブラリのコードや、複数のアプリケーションで共有されるライブラリのコードを置く場所です。</li><li>vendor/assetsは、JavaScriptプラグインやCSSフレームワークなど、外部の団体などによって所有されているアセットの置き場所です。</li></ul>



<h2>どのように動作するか</h2>



例えばhoge.jsというファイルがある場合を想定してみます。 application.jsで読み込む場合は以下のように参照します。



<div class="code-toolbar"><pre class="wp-block-code language-ruby" tabindex="0"><code class="language-ruby">//= require hoge</code></pre><div class="toolbar"><div class="toolbar-item">Ruby</div></div></div>



このファイルはAssetPipelineによって以下のように検索されます。



<ol><li>app/assets/javascripts/hoge.js</li><li>lib/assets/javascripts/hoge.js</li><li>vendor/assets/javascripts/hoge.js</li></ol>



<h2>困る点</h2>



application.jsでは、ディレクトリ配下のファイルを再帰的に読み込むように以下のようにデフォルトで設定されているかと思います。



<div class="code-toolbar"><pre class="wp-block-code language-ruby" tabindex="0"><code class="language-ruby">//= require_tree .</code></pre><div class="toolbar"><div class="toolbar-item">Ruby</div></div></div>



この場合、アプリケーションコードとは別にライブラリなどは事前に読み込んでおきたかったりします。app/assets/javascripts/libなどに配置して以下のように読み込むこともできなくはないですが、あまり美しくありません。



<div class="code-toolbar"><pre class="wp-block-code language-ruby" tabindex="0"><code class="language-ruby">//= require lib/hoge</code></pre><div class="toolbar"><div class="toolbar-item">Ruby</div></div></div>



<h2>まとめ</h2>



同じ書き方で、自作した場合と外部で持ってきたライブラリを読み込むことができます。 ただ、配置する場所はlibになるのかvendorになるのかきちんと分けて切り分けて使えるようにするといいかと思います。



<div class="code-toolbar"><pre class="wp-block-code language-ruby" tabindex="0"><code class="language-ruby">//= reuqire hoge</code></pre><div class="toolbar"><div class="toolbar-item">Ruby</div></div></div>



<ul><li>アプリケーション固有のコードの場合はapp/assets</li><li>プロジェクト内でもライブラリ的に扱う場合はlib/assets</li><li>外部から持ってきたライブラリの場合はvendor/assets</li></ul>

Railsのassetsファイルを配置する場所について

<h2>概要</h2>



Railsのdevelopment環境で開発をしている際に、表題のタイトルのエラーが発生したため調査をしました。



<h2 id="development">development環境でなぜ発生するのか</h2>



development環境のみで発生するのは以下の設定が要因です。



<div class="code-toolbar"><pre class="wp-block-code language-python" tabindex="0"><code class="language-python">config.cache_classes = false</code></pre><div class="toolbar"><div class="toolbar-item">Python</div></div></div>



この設定は、アプリケーション・サーバーを再起動せずにコードの変更を反映させることができるようになります。変更対象のソースコードは予めconfig.autoload_pathsに追加しておいたパスのものが監視されています。



<h2>発生する条件は？</h2>



発生条件は以下のようなケースです。



<div class="code-toolbar"><pre class="wp-block-code language-python" tabindex="0"><code class="language-python">class Hoge
 def fuga
 Fuga.new
 end
end</code></pre><div class="toolbar"><div class="toolbar-item">Python</div></div></div>



<div class="code-toolbar"><pre class="wp-block-code language-python" tabindex="0"><code class="language-python">hoge = Hoge.new
ActiveSupport::Dependencies.clear # ソースコード変更を検知してreloadが実行されたと仮定
hoge.fuga # ここで発生</code></pre><div class="toolbar"><div class="toolbar-item">Python</div></div></div>



<h2 id="reload">reloadの仕組みは？</h2>



rubyのクラスは定数として管理されています。クラス名を参照するということは、rubyにおいては定数を参照しているということになります。 そして、初回起動時に全てのクラスが読み込まれますが、reload時には全ては読み込まれません。reloadが発生すると定数が全てクリアされ、アクセスしたクラスを再度loadし直すという挙動になっています。 ActiveSupport::Dependencies.clearが呼び出されると、All or Nothingで定数がクリアされるので、reload後はアクセスした度に読み込み直していくことになります。



<h2>なぜ発生するのか</h2>



<ol><li>reloadによってクラスの定数がクリアされたのでhoge.fugaを呼び出した際にFugaクラスがconst_missingを発生</li><li>Fugaクラスを探しに行く際にselfの名前解決を行う</li><li>通常はObjectが返却されるが、この場合だとHogeが返される。</li><li>reload前後のHogeクラスのobject_idが比較され異なると例外発生</li></ol>



<h2>解決方法の考察</h2>



上記の通り、問題は2点存在します。



<ol><li>Hogeクラスがreload前後でobject_idが変わっている</li><li>Fugaクラスの呼び出しがそもそもconst_missingになっている</li></ol>



この場合、1. のケースを防ぐならunloadableというメソッドをクラスにつけることで回避することができるはず。 …①



また、2.を防ぐためには、以下2通りの方法が考えられます。



<ol><li>クラス名の前にコロンを2つ繋いで::Fugaのようにする…②</li><li>ActionDispatch::Reloader.to_prepareなどでreload発生タイミングをフックにFugaクラスをloadし直す…③</li></ol>



<h2>解決方法の実施</h2>



解決方法を3つ提示しました。ので整理して実際に順に試してみます。



<h4 id="unloadableobject_id">①unloadableでobject_idを変えない</h4>



<ul><li>効果あり</li><li>ただ、発生する可能性のある箇所すべてに埋め込まないといけない &amp; リロードが効かなくなるため断念</li></ul>



<h4 id="fuga">②::Fugaのようにトップレベル定義に変更</h4>



<ul><li>効果あり</li><li>ただ、発生する可能性のある箇所すべてに埋め込まないといけないため断念</li></ul>



<h4 id="reload">③reload発生タイミングで再定義</h4>



<ul><li>効果あり</li><li>requireではなく、ActiveSupportの提供するrequire_dependencyによって変更のあった場合も再読込するようにする（<a href="https://qiita.com/omega999/items/1964cc684d320160ec2b">参考</a>）</li></ul>



<h2>注意点</h2>



<ul><li>const_missingの挙動などはActiveSupport:::ModuleConstMissingによってRails用に拡張されています。</li></ul>

Fix of 'A copy of XXX has been removed from the module tree but is still active!'

<h2 id="python">Pythonのバージョンについて</h2>



Pythonの実行環境としては大きく2つのバージョンが存在しています。 それぞれ2系とPython3系で別れており最新のバージョンはPython3系です。 特別な事情がない限りは、Python3系の最新のバージョンを使用するのが良いと思います。



<h2>環境構築について</h2>



Pythonの環境構築するために最低限必要なものとしては、pyenvを用意するのが良いかと思います。これは、rubyにおけるrbenvのようなものでpyenvを通して必要なバージョンをマシンにインストールし適宜切り替えることが可能なツールです。



まずは、homebrew経由でpyenvをインストールします。



<div class="code-toolbar"><pre class="wp-block-code language-python" tabindex="0"><code class="language-python">brew install pyenv</code></pre><div class="toolbar"><div class="toolbar-item">Python</div></div></div>



.bash_profileにpyenvのパスが通るようにします。



<div class="code-toolbar"><pre class="wp-block-code language-python" tabindex="0"><code class="language-python">vi ~/.bash_profile</code></pre><div class="toolbar"><div class="toolbar-item">Python</div></div></div>



<div class="code-toolbar"><pre class="wp-block-code language-python" tabindex="0"><code class="language-python">export PYENV_ROOT="$HOME/.pyenv"
export PATH="$PYENV_ROOT/bin:$PATH"
eval "$(pyenv init -)"</code></pre><div class="toolbar"><div class="toolbar-item">Python</div></div></div>



仮に、Pythonのバージョン2.7をインストールしたい場合は、pyenvのinstallコマンドを利用します。



<div class="code-toolbar"><pre class="wp-block-code language-python" tabindex="0"><code class="language-python">pyenv install 2.7</code></pre><div class="toolbar"><div class="toolbar-item">Python</div></div></div>



pyenvで実行したいバージョンがインストールできたら、それをどの粒度で実行するかをpyenvに伝えます。実行粒度は以下のように3パターン存在します。



<ol><li>system
<ul>
<li>pyenvを経由してインストールしていない元々入っていたPythonを利用する場合</li>
</ul>
</li><li>global
<ul>
<li>pyenv経由でインストールしたバージョンをdefaultとして利用する場合</li>
</ul>
</li><li>local
<ul>
<li>pyenv経由でインストールしたバージョンをディレクトリごとに切り替えたい場合</li>
</ul>
</li></ol>



先程インストールしたPython2.7はinstallしただけでは利用することはできず、例えば現在のディレクトリのみで実行したい場合は、以下のようにpyenv localコマンドを実行します。



<div class="code-toolbar"><pre class="wp-block-code language-python" tabindex="0"><code class="language-python">pyenv local 2.7</code></pre><div class="toolbar"><div class="toolbar-item">Python</div></div></div>



実行すると、実行したディレクトリに.Python-versionというファイルが作成され指定したバージョンが記載されています。このファイルがあるディレクトリはファイルに記載されたバージョンがpyenvによって呼び出されることになります。このコマンドによって、ディレクトリ毎に違うバージョンで実行することが可能になります。



<h2>ライブラリ管理について</h2>



Pythonをインストールするとpipというrubyでいうところのgemのようなライブラリ管理ツールも同時にインストールされます。pipはPythonバージョンごとに独立しており、



<div class="code-toolbar"><pre class="wp-block-code language-python" tabindex="0"><code class="language-python">pip install XXX</code></pre><div class="toolbar"><div class="toolbar-item">Python</div></div></div>



というinstallコマンドでpipに登録されている3rdパーティのライブラリをインストールすることができます。



もしも、任意のライブラリの存在を確認したい場合は、



<div class="code-toolbar"><pre class="wp-block-code language-python" tabindex="0"><code class="language-python">pip search XXX</code></pre><div class="toolbar"><div class="toolbar-item">Python</div></div></div>



というような形でpipに登録されているか確認することが可能です。



ただ、複数人で開発していたり、CI上で適切なライブラリをインストールできるようにしたいという要望がでてくるとプロジェクト内で使用するライブラリを個別にpipでインストールしていくのは手間がかかります。



rubyではbundlerとGemfile, Gemfile.lockという仕組みでそのプロジェクト内のライブラリを一括管理してくれますが、Pythonにも同様の仕組みが存在しています。pipenvというライブラリがあるので、pip経由でインストールします。rubyの



<div class="code-toolbar"><pre class="wp-block-code language-python" tabindex="0"><code class="language-python">gem install bundler</code></pre><div class="toolbar"><div class="toolbar-item">Python</div></div></div>



に相当します。



<div class="code-toolbar"><pre class="wp-block-code language-python" tabindex="0"><code class="language-python">pip install pipenv</code></pre><div class="toolbar"><div class="toolbar-item">Python</div></div></div>



pipenvがインストールできたらinstallコマンドでGemfile, Gemfile.lock相当のPipfile, Pipfile.lockを作成します。



<div class="code-toolbar"><pre class="wp-block-code language-python" tabindex="0"><code class="language-python">pipenv install</code></pre><div class="toolbar"><div class="toolbar-item">Python</div></div></div>



Pipfileにライブラリを追記したい場合は、pipenvのinstallコマンドに追加したいライブラリ名を入れて実行します。



<div class="code-toolbar"><pre class="wp-block-code language-python" tabindex="0"><code class="language-python">pipenv install boto3</code></pre><div class="toolbar"><div class="toolbar-item">Python</div></div></div>



そうすると、Pipfile, Pipfile.lockが更新されます。ライブラリのバージョン指定などもできるのでプロジェクト内で必要なライブラリをpipenv経由でインストールすれば、複数人で開発する際やCIで環境を作りたい場合に同様の実行環境を簡単に構築することができます。



<h2>まとめ</h2>



以上で、Pythonで開発をするための最低限の環境が構築できるようになっているはずです。 pyenvはPython自体のバージョン管理で、pipenvはvirtualenvのwrapperなので、正確にはvirtualenvを使うことにはなるのですが、virtualenvの利用をrubyのbundler, Gemfile, Gemfile.lockっぽい感じでいい感じに管理することができます。 この辺とっかかりのときほんとにわかりにくいですよね。

Pythonで開発する前の基礎知識

<h2>はじめに</h2>



HTML5 Form Validation は HTML5からサポートされているフロント側のバリデーション機能で、特にJavaScriptのライブラリを使用しなくても input element の属性に応じてフロント側のバリデーションを行ってくれます。



<h2>動作イメージ</h2>



<iframe width="100%" height="480" src="https://codepen.io/Romantist/embed/bvbGMg?default-tab=html%2Cresult" allowfullscreen=""></iframe>



<h2>警告バルーンのカスタマイズ</h2>



実際にスタイルの変更を行っていきたいと思います。警告メッセージの上書きもできるようですが、ブラウザが出力してくれるメッセージで全く問題ないことも多いと思うので今回は割愛します。



スタイルのカスタマイズの方法としてはCSSのみでの変更は難しく、JavaScriptを用いてデフォルトの警告の表示を出ないようにし、submit イベントが発生したときに invalid な input elemet を取得。 その input elemet の兄弟要素として予め配置しておいたballonの要素に警告メッセージを追加して表示する、 のような流れで実装してみたいと思います。



<h3>htmlは以下のような感じ</h3>



<div class="code-toolbar"><pre class="wp-block-code language-html" tabindex="0"><code class="language-html">&lt;form class="form" method="post" action="/"&gt;
 &lt;div class="form-item"&gt;
 &lt;input type="text" required="" minlength="10"&gt;
 &lt;p class="error-message"&gt;&lt;/p&gt;
 &lt;/div&gt;
 &lt;div class="form-item"&gt;
 &lt;select required=""&gt;
 &lt;option value=""&gt;選択して下さい&lt;/option&gt;
 &lt;option value="1"&gt;選択肢1&lt;/option&gt;
 &lt;option value="2"&gt;選択肢2&lt;/option&gt;
 &lt;/select&gt;
 &lt;p class="error-message"&gt;&lt;/p&gt;
 &lt;/div&gt;
 &lt;div class="form-item"&gt;
 &lt;button class="submit-button"&gt;実行&lt;/button&gt;
 &lt;/div&gt;
&lt;/form&gt;</code></pre><div class="toolbar"><div class="toolbar-item">HTML</div></div></div>



<h3 id="css">cssは以下のような感じ</h3>



<div class="code-toolbar"><pre class="wp-block-code language-css" tabindex="0"><code class="language-css">.form-item {
 width: 320px;
}
.error-message {
 background-color: #e12350;
 color: #fff; 
 font-size: 12px;
 padding: 4px;
 display: none;
}
.error-message.-show {
 display: block;
}</code></pre><div class="toolbar"><div class="toolbar-item">CSS</div></div></div>



<h3 id="js">jsは以下</h3>



<div class="code-toolbar"><pre class="wp-block-code language-js" tabindex="0"><code class="language-js">var form = document.querySelector('.form');
var submitButton = document.querySelector('.submit-button');

submitButton.addEventListener('click', function (e) {
 var invalids = form.querySelectorAll(':invalid');
 if (0 &lt; invalids.length) {
 e.preventDefault();
 for (var i = 0; i &lt; invalids.length; i++) {
 (function (idx) {
 var invalid = invalids[idx];
 var errorMessage = invalid.parentNode.querySelector('.error-message');
 errorMessage.innerText = invalid.validationMessage;
 errorMessage.classList.add('-show');
 invalid.addEventListener('change', function f() {
 this.removeEventListener('change', f);
 errorMessage.classList.remove('-show');
 });
 })(i);
 }
 }
});
</code></pre><div class="toolbar"><div class="toolbar-item">JavaScript</div></div></div>



<h3>完成イメージ</h3>



<iframe width="100%" height="480" src="https://codepen.io/Romantist/embed/gewLRE?default-tab=html%2Cresult" allowfullscreen=""></iframe>



submitボタンををクリックしたときに、form内のinvalidな要素を取得して一つでもあれば妥当性がないとみなします。 妥当性がなかった場合はprevendDefaultでまずブラウザの実装によって処理される既定のアクションをとめてデフォルトで表示される警告のバルーンなどを出ないようにします。 その後にinvalidな要素を取得してinvalidな要素に対しては、validationMessageを取得後兄弟要素のバルーンを表示するようにします。 さらにchangeイベントも追加してinput elementの変更を検知。変更があればバルーンを非表示にする。 このような処理で最低限のバルーンの動きは実装できるかと思います。



<h2>まとめ</h2>



バルーンのスタイル変更の最低限の動作は以上のような形で実現できるかと思います。 後はより良い使いやすさを各自で拡張していければと。

HTML5 Form Validation の ballooon をカスタマイズ

本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文

タイトルタイトルタイトルタイトルタイトルタイトルタイトル

やったこととか、担当してるところとか。。

Sun*の業務委託

セールスカンパニーとして著名なセレブリックス様が開催するJSC2022の集客・告知サイトを作成させていただきました。
ロゴ制作などを通してイベントのトーンをご提案した後、webサイト制作の方も担当させていただきました。
これからの営業に求められる効率性や、情熱的かつスマートな課題解決を静かに燃える青い炎になぞらえ全体のトーンを構築しました。

営業職を目指す学生に送る トップセールスたちのスペシャルセッション

株式会社セブン&アイ・ホールディングス様とお取引のある株式会社SHA様より、セブンプレミアムサイトのLPの制作をご依頼いただきました。
現在は定期的なLP制作のご依頼があり、コーディング/フロントエンド部分をメインで担当させていただいております。

セブンプレミアムサイトのLP

デジマじの集客・告知サイト

athlecicsの集客・告知サイト

ソーシャルライブコマースLive Shop!

クラウド活用と生産性向上の専門サイト

運ぶの課題をワンストップで解決し 物流DXを支援するアプリケーション群

日本最大級の営業エンターテイメントJSC2022の集客・告知サイト

やったこととか、担当してるところとか。

Romantist inc.

SERVICE

UI Design

UIデザイン制作

Web Site

webサイト制作

Graphic Design

グラフィックデザイン制作

WORK

BLOG

CONTACT