サブビュー入れ替えツール

サブビューをよく使うクリスタユーザーの皆さんこんにちは。
サブビューを長く使っていると、入れ替えたくなりませんか。
資料を表示したり、スポイドで色を拾えたりと便利なツールですが、順番を入れ替えたり、指定のページへ一気に飛んだりする機能がまだありません。
地味に待ってますが、まだありません。
最近追加したファイルと最初の頃追加したファイルを行ったり来たりするのが面倒！ということで、
クリスタのサブビューの設定ファイルを書き換えて、表示順を並び替えるWEBアプリを作りました。

CLIP STUDIO PAINTのサブビューを並び替えるツール

今現在出来るのは並び替えるだけで、削除や追加は出来ません。
後お約束ですが、編集するdefault.psvファイルはバックアップをとってからお使いください。

このWEBツールはお手元のPC内で処理が完結します。

ですので、サブビューの中身がどこかに送信されることはありません。大丈夫です。

動作について

一通りのメジャーどころのブラウザで動くはずです。
ただしiPad版のクリスタでは動かないと思います。
ファイル形式には問題ないのですが、iPadのブラウザからiPadのクリスタの設定ファイルまでたどり着けないのが原因です。

技術的なことを少し

サブビューの定義ファイルはsqliteなファイルです。
このファイルをローカルPCで処理が完結するために、JavaScriptだけでsqliteファイルを読んでSQLで書き換えて書き出しが出来という神ライブラリsql.jsを使っています。
sql.js、なんでもCで描かれたSqliteのコードを、EmscriptenでJavaScriptに変換しているという。そんなこと出来るんだーの世界です。
GUIはReactでサクッと、あとはwebpackとかを使ってます。

この記事は2012-07-04に掲載したFC2時代のブログの転載した記事です。

　クリペ正式版ことCLIP STUDIO PAINT PRO(おそらくEXも)にはイラスタからの機能でサブビューというパレットがあります。
　簡単に言えば資料や色を拾いたい画像表示用のパレットの事で、複数枚の画像をストックできて、終了後も保存されるのでいろいろと重宝しています。
　ただイラスタと同じくストックしている画像の順番を入れ替えるなどの編集が出来ないのがちょっと不便でした。
　今回のクリスタは主なデータのやりとりに、SQLite形式というすでにある形式を採用したため、先人たちの便利な編集ツールが使えます。
　ということで編集ツールをつかって無理矢理気味にリストの順番を入れ替えてみようというネタです。

　まずお断りです。
　この記事は編集ツールの都合でWin版を元にして書いています。
　Macは標準でコマンドラインSQLiteツールが入っていたり、SQLite managerでCSVに書き出して取り込んで～とかすれば出来るのですが、別の機会か他の詳しいかたお願い致します。
　あとクリスタ以外のツールを使ってクリスタの設定を書き換えるので、自己責任でお願いします。

　まず用意する物は、pupSQLiteというツールをダウンロードして使用可能な状態にしておきます。

　1.クリスタを終了します。

　2.ドキュメントフォルダ内にあるクリスタの設定フォルダの中から\subview\というフォルダを探して、その中にあるdefault.psvというファイルを見つけます。
　　このdefault.psvファイルをpupSQLiteで開きます。

　3.左側のペインのtebles一覧から「subviewimagecategory」をダブルクリックします。

　4.右側のペインに内容がエクセルのような画面が表示されます。
　　subviewfilepathという列がサブビューで表示される画像ファイルのパスですね。その次が拡大率、表示位置x,yの情報と並びます。



　5.画像のようにPW_ID列以外を選択して、CTRL+Cを押します。
　　これでこの範囲がテキスト形式でクリップボードにコピーされました。
　　選択範囲はそのままで次へ進みます。


　6.そのままメモ帳なり適当なテキストエディタを開いて、貼り付けます。
　　後は、このテキストを行単位で並び替えます。
　　並び替え終わったらこのテキストを選択してコピーします。


　7.pupSQLiteの画面に戻り、ctrl+Vつまり貼り付けをします。
　　どうでしょうか。並び変わっていないでしょうか。
　　あとはこのままこのpsvファイルを保存してクリスタを起動して並び替えが出来ていれば成功です。

　若干面倒ですが慣れればそうでもないような、気がします。
　リストファイルを個別に保存しておけば、プリセット的に切り替える、と言うことも出来るかもしれませんが、やっぱり公式で編集機能があったら楽ですね。

iPad Proなどでお絵描きをするとき、資料を見ながら描きたいな、というときのやり方を私なりに模索したものを書いた記事になります。
最初に資料を表示する方法は3パターン思いつきました。

• スマホに表示する
• アプリ内で表示する
• Split Viewに表示する

クリスタを使っていてパレットの配置に悩むことありませんか。

※この記事は「資料画像表示ソフト「Pureref」のあれこれ」を大幅に加筆修正したものです。

PureRef

イラストなどのリファレンス画像を表示するのに特化した画像ビューアことPureref。
リファレンスを平たく日本語にすると参照や引用という意味で、イラストを描く人的に言えば何かを描くのに参考にする画像、資料用の画像ですね。
3Dだとビューの背面や板ポリに表示してモデリングのガイドにする下書きもそう呼ばれたりします。
「（作りたいものに対して）基準になる画像」的なニュアンスなんだと思います。
そんなPureRefはWin/Linux /Mac対応のドネーションウェアです。
ダウンロード時に金額は0から任意の金額が入力出来ます。気に入ったり開発を応援してくれるなら好きな金額を払ってね、という仕組みです。デフォルトは5です。
例えば0を入れるとそのままダウンロードへ移行します。それ以外ならPaypalの支払画面へと移行します。
アカウント的なものはありません。

対応形式は、BMP / DDS / GIF / ICNS / ICO / JPEG / JP2(JPEG2000) / MNG / PBM / PGM / PNG / PNM / PPM / PSD / TIFF / WEBP / XBM /XPM / TGA です。
Xnviewほどではありませんが、WEBPやJP2にも対応しているので必要十分だと思います。
（強いて言えばJPEG XRの姿がありませんが、普及度的に、まあいいかな、と）

メリット

PureRefは画像ビューアの中ではわりと特異なUI/UX を持っています。
大量の画像を素早く切り替えたり並べて表示することに特化しています。
前回作業終了時の環境をすぐに再現できること、というのも特徴です。

素早くグレイスケール表示が出来るというのもポイントが高いです。
グレイスケール化にあたっては、RGBに重みを付けてくれています。詳しい説明はここでは省きますが、「RGBの数値的には同じ明るさでも、青は暗めに見えよね、とか黄色は明るめに見えるよね、というのを考慮しますよ」という意味です。
色に惑わされずにシルエットや凹凸を見るのに使われます。

クリスタやPhotoshopで同じ結果を得るには、黒のレイヤーを上にのせてレイヤーモードをカラーにするか、クリスタの場合はレイヤーモードを「グレー」にする必要がありますので、ボタン1つで出来るのは便利です。

元画像

重き付け無し

重き付け有り

資料は描いているところと出来るだけ近いところのほうが、目線移動が少なくて便利です。
クリスタには資料表示用にサブビューというパレットがあります。
資料を表示したり、色を拾えたりと、とても便利な機能で最近だと反転機能も追加されました。
ただ、サブビューは画像に切替が「進む」「戻る」しかなく、画像の量が増えてくると切替が面倒になってきます。
（このあたり昔、リストで選べたり順番を入れ替えできたりしないかなと要望を出してみたのですが、わりとおまけ感がある機能なので優先度はかなり低そうです）

特徴

キャンバス

いわゆるWinのMassigraやMacのプレビューと大きく違うのは画像の表示の仕方だと思います。PureRefは１枚１枚の画像をページをめくるように表示するのではなく、大きなキャンバスにペタペタ貼り付けたように表示します。
キャンバスは画像が端に行くと自動的に拡張されます。

画像データ

異なるサイズの画像を自動で並べる機能があります。
そのとき、画像がリサイズされますがオリジナルのデータは保持されています。
なのでリサイズされたからといって画像の縮小されてディティールが飛ぶということはありません。
このあたりの操作感は「Mischief 」に似ています。

デフォルトでは設定ファイルpurに画像データが埋め込まれます。
なのでpurファイルをコピーするだけでwinやmacとOSや環境が変わってもデータを正しく再現出来ます。

多彩な機能

出来る機能を現在でざっくり列挙すると以下の通りです。（バージョン1.90）

• 自由な画像配置
• オリジナルを保持した拡大縮小、回転、反転が可能
• 画像の指定箇所を切り抜き、後から範囲を変更可能
• 画像単体、キャンバス全体をグレイスケール化
• 選択画像を縦幅、横幅、全体サイズを基準にして自動で揃える
• 選択画像を名前順、追加順、形状に応じて並べるタイリング
• クリック位置のカラーコードを取得
• 画像キャンバスの透明度を変更
• マウスイベントを透過する機能
• 他準起動可能
• 複数の設定で起動可能
• アプリがフォーカスされていなくても有効になるグローバルショートカットを割り当て可能

主要機能を挙動面を含めて意訳すると以下のような感じです。

機能	名称
-Action-
すべての画像を並べてキャンバス範囲を最適化	Pack All and Optimize
マウスやペンの情報を無視（透過）	Transparent To Mouse
選択画像を画面一杯に表示(オーバーレイ)	Overlay selection
ウィンドウのサイズを選択画像に合わせる	Resize To Selection
ウィンドウの位置を固定	Lock Window
カメラ（ズームや位置）をリセット	Reset Camera
カメラのズームだけをリセット	Reset Camera Zoom
キャンバス内の画像のロック	Lock Canvas
キャンバスのグレイスケール化	Grayscale
元の画像を開く	Open Souce
画像の拡縮アルゴリズムをバイリニアに切り替え	Toggle Bilinear Sampling
最適な方法で配置	Arrange Optimal
名前で配置	Arrange by Name
追加順で配置	Arrange By Addition
左方向に整列	Align Left
右方向に整列	Align Right
上方向に整列	Allign Top
下方向に整列	Allign Bottom
重ねる	Stack
高さで画像サイズを揃える	Normalize Height
幅で画像サイズを揃える	Normalize Width
幅高さで画像サイズを揃える	Normalize Size
-Controls-
画像移動	Pan
カラーコードを表示	Show Color code
画像座標を表示	show Image Coordinate
連続選択	Continuous Select
画像移動	Move Item
縦横軸にスナップして画像を移動	Axis Snapped Move Item
近くの画像にスナップして画像を移動	Neighbour Snapped Move Item
回転	Rotate
一定角度で回転	Snapped Rotate
拡縮	Scale
反転	Flip
画像の透明度を変更	Change Opacity
切り抜き	Crop Selection
切り抜き範囲を移動	Pan Cropping
切り抜き範囲を拡縮	Zoom Cropping
画像を表示枠一杯に表示	Focus Image
次の画像をウィンドウ一杯に表示	Focus Next Image
前の画像をウィンドウ一杯に表示	Focus Previous Image
背面に送る	Send To Back
前面に送る	Send To Front
画像をキャンバスから削除	delete

TIPS的ななにか

調子に乗って画像を突っ込みすぎて、メモリを5GBも使うPurファイルを運用していた私が送る毎度好例のTIPS的なものです。
（さすがに今は1GB未満にしています）

画像を一気に敷き詰めたい/並べたい

Pack All and Optimizeを使います。
ショートカットは「Ctrl+Shift+P」 です。

並べた画像を一覧したい

いくつか方法があります。

• ctrl+aの後にダブルクリック。（ロック中ならロックを解除してから）
• Camera Resetを使う（ただし画像を拡縮してたりすると上手くいかないことも）
• ホイールなどでズームアウトする

特定の画像だけ整列したい

画像を複数選択後にAlignかArrange。

Optimizeってなに？

拡縮や回転はどうするの？

特定のショートカットを押しながら画像をドラッグ

特定の画像を素早く見たい

画像をダブルクリック。ロック中でもオッケーです。

ブラウザで表示中の画像を読み込みたい

ブラウザから対象画像をD&D。
Pureref自体に画像ダウンロード機能があります。(HTTPS対応)
ブラウザから読み込まれた画像は、自動でpurファイル埋め込み扱いになります。

またはブラウザ上で画像のコンテキストメニューを出して「画像をコピー」、その後にPureRef上でペーストしてもオッケーです。

PureRefキャンバスを画像として出力したい

PureRefを起動しているとストロークが途切れる時がある

オートセーブ機能が有効になってると、オートセーブ間隔で一瞬アクティブアプリが切り替わります。

画像の色を拾いたい

Sキーを押すとカラーピッカーが表示されます。
表示されたからコードはPhotoshopなどにコピペすればオッケーです。

黒枠が邪魔

customizeにあるpresetをglassにすると背景色が透明になります。

グリッドを表示したい

PureRefの画像にグリッドを表示する方法

ロックはしたほうがいい？

正直、好き好きだと思います。
ロックをしない状態だとスクロール時にスペースバーを押す必要がありますが、よく見る画像を並べるとかクロップ・回転などが手軽にできるので便利、という見方も出来ます。

メモリを食いすぎる

大きな画像を大量に読み込んでいると、必然的にメモリ消費も増えます。
解決策としては

• 大きな画像は縮小して読み込む
• Purファイルを分割する
• UNDO回数を減らす

という方法があります。縮小に当たってはSettingのところに「Auto downscale large image」というのがあります。これはD&D時に指定以上のサイズの画像を自動でリサイズしてくれる機能です。

Purファイルの分割は、用途別に画像を分けておく、というスタンダードな方法です。
またPureRefは複数起動が出来ますので、それらを組み褪せて使うという方法もあります。
Windowsの場合は、タスクバーにあるアイコンを中クリックすればいいですが、Macの場合は「open -n -a “PureRef”」で開く必要があります。

Undo回数を減らすと、長時間使っている間の増えるメモリを抑制することが出来ますが、固定値的なメモリ消費は変わりません。

設定ファイルはどこ？

windowsなら%appdata%\PureRef.iniです。
Macは…わかりません。~\library\preferences\の中にあるファイルかと思ったのですが、どうも違うみたいです。

異なる設定で起動

コマンドラインオプションで「-s 設定ファイルのパス」と指定すると、その設定ファイルで起動します。
パスはファイル名まで入れると、そのファイル名が使われます。

Purファイルが大きい

PureRefは画像は内部でPNGとして持ちます。
なのでPurファイルに画像を埋め込む際にJPGもPNG形式で保存されます。そのため、JPGのように高圧縮ファイルを配置していても、サイズが大きくなる傾向があります。
将来元の形式のまま保存する計画があるみたいですが、現時点では仕様みたいです。

Purファイルが壊れたら

コマンドラインオプション「----brute-force」を付けて起動すると、壊れた部分を無視して強制的に読み込みます。
そこで一旦画像をExportしてPurファイルを作り直すのが良いでしょう。

Export時のファイル名

キャンバス内の画像を一気に書き出すことが出来ます。
その際に、ファイル名規則を指定できます。
連番とオリジナルファイル名を組み合わせることが出来るのですが、どうも%0と%1は両方使用しないと正しく動作しないみたいです。重複上書き防止なのでしょうね。（%1単独だと連番になってしまいます）

商用利用していいの？

金額0でダウンロードしても、現時点では商用利用しても構わないそうです。（フォーラム）
ですが、継続的な開発のために支援して欲しいとのことなので、気に入ったら寄付を検討して上げて下さい。
（将来的にはダウンロード販売をするプランはあるみたいです）

キーバインドにあるShortcut Contextって？

ショートカットを割り当てるときにある、Shortcut Contextというのは、そのショートカットが有効になる状況を指定するところです。
ApplicationはPurerefがアクティブになっているときに有効になります。
GlobalはPurerefがアクティブであるとなかろうと有効になります。
windowは現在アクティブになっているPurerefウィンドウのみに有効になります。多重起動時用です。

オススメのショートカット設定

普段使いのペイントソフトとキャンバス操作のショートカットを合わせておくと、混乱が少なくて良い感じだと思います。
例えばクリスタに合わせる場合は、Panを「Space+LMB」、Zoomに「Ctrl+Space+LMB」を追加で割り当てます。
なおショートカットは右の方にある＋をクリックすると割り当てを追加できます。

最後に

今回も、画像じゃなくてアナログな本の資料を見るとき便利な書見台で私が使っているのをペタリを貼っておきます。

これ厚手の大判のものでもしっかり止まるので重宝しています。
あと、同メーカーと思われるアームスタンド付きのものも見つけたので合わせて貼っておきます。

actto BST-02 ブックスタンド(OEM品番:EDH-004) 価格：￥ 1,480

Readaeer ブックスタンド 筆記台 書見台 本立て 6段階調整 竹製 価格：￥ 1,480

モルフォ人体デッサン 形態学による人体を描くための新テクニック ￥ 2,160

　Mac OS X　10.11ことel capitanさんが公開になりました。
　パフォーマンスの向上を謳っていたりしており、気になったので入れてみた話です。

　el capitanさんはbetaのときに実はインストールをしていたのですが、beta3のころにアップデートが失敗するようになり（アップデートのプログレスバー1/3くらいで止まってしまう）、betaに付き合うのをやめてしまいました。
　その時の感触ではyosemiteよりはクリスタのペン遅延が軽いという印象でした。
　プリインストールされているmountain lionよりは遅いのですが、対応しないソフトが出始めているので新しくしたい、と正式なel capitanには期待をしていました。

　betaのアップデート失敗で起動不能になったため、mountain lionに戻って２ヶ月ほど、ついにel capitanさんが正式版を迎えました。
　早速アップデートして、Time Machineやspotlightの処理が終わりさてクリスタはどうだと起動してみたら、これが遅延がひどい。
　Mac版のクリスタはペンの遅延はよく出る話題で、セルシス側もドライバの優先度などを調整する設定がMac版だけには搭載されています。
　ここを変えるとペンの挙動が変わるのは知っていたので、色々変えては再起動を繰り返しましたが、大きな変化はなし。
　（セルシスが公開している対処法も同じもの）
　他のソフトは問題ないところをみると、どうもクリスタとの相性ぽい。
　
　ちょうど、同様の挙動の人が動画にとってアップしていました。こんな感じです。


　円をぐるぐる描くと半周どころではなく遅れて来ます。
　さらにペンを付けた状態で動きを止めると、描画追いつくわけでもなく、半周ほどずれた位置で止まる、という感じ。でペンを上げると残りがギュッと描かれる。

　一通りいじってみたのですが治らず、結局mountain lionに戻ってしまいました。
　いつまでも古いOSを使ってるわけにはいかないし、最近のadobeのソフトは動かないし、買い換えるにしても4コアなMac miniは出ないしと悩ましいところですが、mountain lionのピタッとペン先に描画がついてくる感触には勝てずです。

　Macの世代で大きく改善するのならいいのですがねー。
　PCはプリインストールされたOSが一番快適、ということなんでしょうか。

　すっぽ抜け現象

　私がMacクリスタを使っていると、数ストロークごとにストロークが反映されないという現象が起きていました。
　具体的には１ストロークを描いた後、素早く２ストローク目を描くとそれが無反応になる、というものです。少し間(0.5秒くらい？)を時間を置いて描くと問題なく描けるので一見処理落ちっぽく見えます。
　これを個人的に「すっぽ抜け現象」と読んでいました。
　この現象を認識しだしたのは少なくとも１年以上も前の話です。
　タブレットの不具合なのかな、とも思っていたのですがソフトを変えればそんなことはなく、クリスタの挙動の癖なのかなと思ってやり過ごしていました。

　ちなみになぜ解決したのは、今でもよくわかっていません。
　具体的にピンポイントな説明が出来ません。
　なので解決までの過程をダラダラ書きたいと思います。

　きっかけ

　解決のきっかけは何の目的で作ったのはわからないサブツールが増えすぎたので、いっそのことサブツールを出荷時に戻そうと思ったことです。
　サブツールやその他の項目を出荷時に戻すにはシフトキーを押して起動をすれば、初期化出来る項目を選ぶダイアログが開くので、そこで戻したいのだけチェックを入れて進めばさくっと戻ります。

　これでさくっと戻した時、もしかしてすっぽ抜け現象も治らないかと思ったのですが残念ながら戻らず。でも一度気にするとなんか治したくなってしまって、いちど初期化を実行したこともあり、設定をリセットするのにも気が大きくなちゃって、あちこち初期化してみることに。

　「環境設定をクリア」ダメ。
　「タブレットドライバのダブルクリック距離をOFFに」ダメ。
　「はらいを０に」ダメ。
　「UNDO回数を減らす」ダメ。
　「一つのUNDOとみなす時間を上下」ダメ。

　解決

 　ここまでしてみて後はもう「設定フォルダを一旦削除しよう」というものでした。
　設定フォルダというのはMacの場合は「~/Documents/celsys」というフォルダのこと。
　windowsだと「%USERPROFILE%\Documents\celsys」フォルダですね。
　クリスタを終了した状態でこのフォルダを一旦適当にリネーム。そしてクリスタを起動！
　素材の初期化などが入って無事起動したので、さてどうかとキャンバスに描いてみると…治ってる！
 　素早く線をカツカツと描いてみてもちゃんと描けてる！
　なんかあっさり治りました。
　設定ファイルのどれかが原因だったみたいです。

　素材の書き戻し

　ただこのままだと過去の素材が全部クリアされてしまっています。
　これらをまた登録するのは結構大変ということで、新しく出来たCLIPStudioCommonを削除、そしてリネームバックアップしたフォルダから「CLIPStudioCommon」フォルダをコピーしてきます。
　 CLIPStudioCommonを削除したのは、これはない状態で起動すればまた書き戻されるためです。
　さて、これで素材が前の状態に戻るはずです。
　結果はというと、この状態で起動しても線は普通に描けました。
　すっぽ抜け現象は素材の量や内容のせいではないようです。

　結局なんだったの？

　理由は「なんかダメだったぽい」というふんわりした感じの答えに落ち着けることにしました。下手にいじってまた再発しても困りますし。
　ただ、思えばLabsだったりした頃からの付き合いで、クリスタと名前が変わった時に設定をクリアしていますが、なんだかんだと初期バージョンから使い続けており、設定フォルダも引き継いで使っていました。
　この長い年月で何処かに不整合ができていたのかもしれないですね。
　以上、すっぽ抜け現象が解決した話でした。
　不具合スレッドにもたまに同様の現象が書き込まれているので、もし同種の問題で悩まれている人がいましたら、何かの手助けになればと思います。

 vivotabみたいなワコムのタブレットが発売されたり、Cintiq-13HD touchが発売されたりと、タッチパネルな液タブPCなどででお絵描きするのが身近になりました。
　そこで気になるのがパームリジェクション問題。いわゆるタッチ誤爆です。
　絵を書いていると、手のひらがあたっていたところにチョロチョロと髭みたいな線が書かれたりする誤爆は困りもので、中にはタッチ無効にして対応している人もいます。
　でもCLIP STUDIO PAINTはタッチ対応なのでせっかく出来るピンチなどのジェスチャーでキャンバス操作ができなくなるのはもったいない。
　ということで指でのタッチの時の描画を無効する方法をちょっとご提案です。

　方法は至ってシンプルです。
　CLIP STUDIO PAINT（以後クリスタ）には指での操作は「シングルスワイプ」といって別のツールが割り当て出来ます。
　ここに何も設定されていないと、タッチはマウスのドラッグと同じ筆圧100％のストロークとして扱われます。
　本来はここはぼかしツールなどを割り当てて、指で擦るとにじむ、とかそういうのを想定していたみたいですが、ここを無害なツールんに割り当てて、タッチ操作で誤爆な線がキャンバスに書き込まれるのを防ぎます。

　具体的な方法ですが、以下の手順で行います。

１．無効なサブツールを作成する

まずサブツールのメニューから「カスタムサブツールの作成」を選び、以下のように設定します。
　ツールアイコンは今回はオブジェクトにしましたが、これはなんでも構いません。
　アイコンの色も適当に設定して下さい。

　２．無効なサブツールを設定する

　こうすることで、何もしないツールになりました。

３．タッチ操作に割り当てる、おしまい

作成したツールをタッチ操作に割り当てます。
　タッチ操作の割り当ては「修飾キー設定」の一番下にあります。
　内容を「ツールを一時変更」として、作成した無効なツールを選びます。
 　左上に適用範囲を全ツール使用時共通か、個別か選べますが、今回は共通にしています。
　


あとはコマンドバーで「タッチ操作の切り替え」 をオンにします。



これでシングルタッチ操作でキャンバスに何も起きないようになりました。
ピンチや日本指スワイプは有効ですので、キャンバスの移動回転拡大はタッチで操作出来ます。

この状態だとツールパレットも操作出来ます。なので手のひらの下にツールパレットがあると勝手に切り替わる可能性があります。
　その対応は…右利きの方ならば、右にツールパレットを置かない、スクロールバーを表示しない、で対応かなぁと思います。

　以上、タブPCでクリスタを使うときの小ネタでした。