カーソルエディタ
Windows OSやWebサイトで使用される「マウスカーソル」(*.cur)を作成 & 編集する事ができる無料のWebアプリケーションです。
アイコンファイルも読み込めますのでアイコンをカーソルに変換する事も可能です。
このWebアプリケーションは「HTML5」「JavaScript」のみで動作しますので最新のブラウザがあればどなたでもご利用可能です。
カーソルファイルの各種変換は「あなたのブラウザ」で実行します。ですのでサーバーにファイルをアップロードする事はありませんのでご安心して下さい。
姉妹アプリ: 「アイコンエディタ」 「アニメカーソルの作成」
目次
1. 使い方
2. 機能
3. 推奨ブラウザ
4. 動作確認
5. バージョン
6. FAQ
7. その他のWebアプリケーション
8. 運営者のブログ
<よくある質問>
カーソルファイルの保存方法
WindowsやWebサイトでのカーソルの設定方法
1. 使い方
データを残したい場合は必ず「カーソルの作成」でファイルを作成して下さい。
※左上にあるカーソルエディタのバナーをクリックでも可能です。
1.1 新規作成
カーソルを新規作成するには画面左上にある「カーソルの新規作成」でカーソルのサイズと色数を指定して「新規作成」ボタンを押します。
1.2 既存のファイルを読み込む
画面左上にある「カーソルの読み込み」のボタンから行います。
※画面上にカーソルファイルをドロップすることでも読み込めます。
1.3 基本操作
描画
青い枠で囲まれたキャンバスの上でマウスのボタンをクリックすると絵を描画する事ができます。連続して描画する時はマウスのボタンを押しながらマウスを移動します。
カーソルの作成
左メニューの左下にある「カーソルを作成」ボタンでカーソルファイルを作成する事ができます。保存方法がわからない方は「カーソルファイルの保存方法」を確認して下さい。
ファイルの圧縮オプションには「全て無圧縮(標準)」「256x256のみPNG圧縮」「全てPNG圧縮」の3種類がありますが、通常は「全て無圧縮」で保存してください。
※カーソルの仕様ではPNG圧縮は非推奨のオプションです。PNG圧縮で保存するとカーソルの反転色は無効となり、色深度は32bitとなりますので注意してください。
パレット - 描画色/透明色/反転色
左上にある「パレット」の「描画色」「透明色」「反転色」はクリックすることによって上図のように切り替える事ができます。
[描画色]
描画色はキャンバスへ描画する色です。
描画色の色を変更するにはカラーパレットの任意の色を選択します。また、RGBのスライダーでは選択されている色を変更する事が可能です。
[透明色]
透明色はカーソルファイルとして設定されている時に透明となります。
[反転色]
反転色はカーソルファイルとして設定されている時に、背景の色を反転にします。例えば背景が白色ならば反転色の部分が黒色になります。逆に背景が黒色ならば白色になります。
※反転色はWinodws、IE、Edgeで対応しています。(Chrome/FireFoxは未対応)
※反転色はカーソルフォーマットの仕様で色数が32bitの場合は利用できません。
パレット - RGB
RGBのスライダーは描画する色の成分を変更する事ができます。Red(赤)、Green(緑)、Blue(青)は各0-255までを自由に設定可能です。RGB(wikipedeia)
32bitのカーソルではRGBの他に「A」(alpha)が表示されます。このAはアルファチャンネルと呼ばれ不透明度(0-255)を設定できます。0の場合が透明で、128が半透明、255が不透明となります。アルファチャンネル(wikipedeia)
パレット - カラーパレット
カーソルの色数が2色の場合は2色のカラーパレット、16色は16色、256色は256色のカラーパレットを使用できます。24bitの場合は1677万色を使用可能です。
256色カラーパレットは基本16色に加えて12色の色相を元にHLS色空間(wikipedeia)での輝度を分布したパレットになっています。24bitと32bitはHSL色空間の色相と輝度を分布させたものです。
カーソルのホットスポット
ホットスポットとは「マウスの照準」となる場所です。X座標とY座標で指定します。座標はキャンバスの左下に表示されていますので「カーソル毎」に任意の地点を登録してください。
(例1)矢印カーソルは矢印の先端にあわせます。
(例2)十字カーソルは十字の中心地点にあわせます。
※範囲外の座標を設定した場合はXY座標共に0となります。
カーソルの管理
複数のカーソルを切り替えたり、並び替え、選択しているカーソルを削除する事ができます。並び替えはカーソルが2枚以上ある場合に使用可能となります。
カーソルの追加
新規のカーソルを追加する事ができます。
ファイルから追加
既存のカーソルを追加する事ができます。
ツールバー
ツールバーはキャンバスに関する操作を行います。左から順に「点を描画、塗りつぶし、色の取得、表示倍率の縮小、表示倍率の拡大、元に戻す、やり直し、クリア」となります。
※色の取得モードの場合でも透明色/反転色は取得できません。
※表示倍率は最大3段階となります。サイズが128x128以降は2段階または1段階です。
2. 機能
・ マウスカーソルファイルの作成 & 編集
・ 複数のカーソルサイズに対応
・ 複数枚のカーソルに対応
・ 無制限のUNDO/REDO機能(元に戻す/やり直し)
・ カーソル/アイコンファイルの読み込み
・ PNGファイルでの出力
| 対応 | 内容 |
|---|---|
| ファイルの読込 | 全てのサイズ(1x1 ～ 256x256) |
| ファイルの作成 | 主要なサイズに対応 16x16 , 20x20 , 24x24 32x32 , 40x40 , 48x48 64x64 , 96x96 , 128x128 , 256x256 |
| 色数 | 2色 , 16色 , 256色 , 1677万色(24bit) , 1677万色(32bit) ※65535色(16bit)はテストデータが見つかりませんので未対応 |
※読み込み、作成ともに無圧縮、PNG圧縮に対応しています。
3. 推奨ブラウザ
Chrome / FireFoxの最新版
各ブラウザのWebページの表示速度、キャンバスの描画速度は次のようになります。
| ブラウザ | 表示速度 | 描画速度 | 備考 |
|---|---|---|---|
| Chrome | 高速 | 高速 | ファイルの保存が手軽です。 |
| FireFox | 高速 | 高速 | |
| Internet Explorer | 普通 | 低速 | |
| Microsoft Edge | 低速 | 低速 | Webページの表示速度が非常に遅いです。 |
※2016年6月の段階の結果です。Edgeはアップデートで早くなる可能性があります。
4. 動作確認
・ Internet Explorer 11(32bit/64bit)
・ Microsoft Edge(32bit)
・ Chrome / FireFoxの最新版
※タブレット、スマートフォンは未対応です。
※HTML5に対応していればその他のブラウザも動作すると思います。
5. バージョン
v1.00(2016年6月10日版)
6. FAQ
Q1 WindowsやWebサイトでのカーソルの設定について
作成したマウスカーソルをWindowsやWebサイトで設定する方法です。
[Windows]
「Winメニュー」から「コントロールパネル」の「マウス」を実行すると「マウスのプロパティ」が表示されますので「ポインター」タブで変更する事が可能です。
[Webサイト]
カーソルを設定するにはCSSで「cursor: url(yourcursor.cur),default;」のように記述します。「yourcursor.cur」はあなたのカーソルのファイル名です。HTMLと異なるフォルダにカーソルを置いた場合はパスも一緒に記述します。また、「,default」はカーソルが読み込めない場合のHTML標準の「デフォルト」カーソルを指定しています。
次のコードはカーソルの反転色を確認するサンプルです。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.TestArea{
cursor: url(yourcursor.cur),default;
}
.TestArea div{
margin:5px;
width:100px;
height:100px;
float:left;
border: 1px solid #1e90ff;
}
</style>
</head>
<body>
<div class="TestArea">
<div style="background:#000;"></div>
<div style="background:#333;"></div>
<div style="background:#fff;"></div>
</div>
<div style="clear:both;"></div>
<p></p>
上記の3つの上にマウスを移動すると反転色の変化がわかります。<br>
※カーソルの反転色はIE/Edgeのみ対応しています。
</body>
</html>
このサンプルの実行画面です。
反転色はIE/Edgeのみ対応しています。Chrome/FireFoxなどのブラウザは対応していません。特にFireFoxでは反転色が含まれるカーソルは読み込みませんので注意してください。
※HTMLで標準定義されているカーソルの反転色は全ブラウザで対応しているようです。オリジナルカーソルの反転色のみ非対応となります。
Q2 機能を追加して欲しいです。
このカーソルエディタは一般ユーザー向けとして開発されています。ペンの種類の追加やHSL色空間、レイヤーなどの機能はProfessional版(無料)で追加予定です。
Q3 作成したカーソルファイルの著作権について
このWebアプリケーションで作成したオリジナルのカーソルファイルは作成した方に著作権が付与されます。オリジナルのカーソル以外は他者の著作等になる場合があります。
Q4 大きいカーソル(256x256など)を編集する時に動作が重くなります。
パソコンのメモリやビデオカード(グラフィックボード)のメモリが少ないと、大きなカーソルを編集すると動作が重くなったり画像が乱れたりする場合があります。
開発する際には2万円ぐらいのスペックが低いパソコンでも動作するように設計していますが、そのような環境の場合は、使用するブラウザをChromeまたはFireFoxに変更すると表示速度が2倍から5倍ぐらい速くなります。
※メモリが少ない方は頻繁にカーソルを作成してパソコンに保存してください。
Q5 32bitのアルファチャンネルがキャンバスに表示されません。
ご使用のブラウザが「Internet Explorer(IE)」または「Microsoft Edge」の場合はキャンバスにアルファチャンネルが表示(適用)されなくRGBの色のみ表示される仕様です。それ以外のブラウザでは正常に表示されます。
「IE/Edge」の場合は、キャンバスに表示されないだけで内部的にはアルファチャンネルを保持していますので32bitカーソルの読み込みと保存は可能です。また、キャンバスの左下にある画像サイズが小さいプレビュー画像にはアルファチャンネルが表示されます。
※開発段階では「IE/Edge」でも表示可能でしたが、アルファブレンドによる画像処理の速度がとても遅く実用的ではない為にキャンバスへの「表示」を切り捨てました。
Q6 反転色について
[マウスカーソルの仕様]
色数が32bitの場合は反転色を使用する事はできません。また、2色、16色、256色の場合でカラーパレットに「白色」が無い場合は反転色が無効になります。その他にファイルをPNG圧縮する場合も反転色が無効となります。
[対応OS,ブラウザ]
反転色はWindowsのOSとIE、Edgeのブラウザのみ対応しています。Chrome/FireFoxなどその他のブラウザでは対応していません。
※WindowsのOSとIEで反転色があるカーソルが読み込めても、Edgeでは読み込めない場合があるようです。Edgeは開発途上ですのでいずれ修正されると思います。
7. その他のWebアプリケーション
プチラボ
https://www.petitmonte.com/labo/
50種類以上の便利なツールを無料で公開しています。(フリーソフト)
8. 運営者のブログ
プチモンテ
https://www.petitmonte.com/
スポンサーリンク
