その昔、旧Lodestoneで、ＳＳからギルドリーヴ風のキャラクターカードを作るのが流行した。
だれが始めたのか正確にはわからないけど、番長はビサイドの弟さんのヤツで知った。
今はマサムネかな？
こんなやつだ。
こんな風なキャラカードを自分のだったり、ＬＳメンバーのだったり作っていたんですよ。
でも、これをつくるのはフォトレタッチソフトとか持ってて使い方ちゃんと分かっている人しかできなかったからそれなりに敷居は高かったんだ。
（画像加工の中では簡単な部類になるけど）
で、最近みつけたWebサイトで、ブラウザ上で画像をトリミングしたりするプログラムのサンプルを見つけた時に思いついてしまった。
「これでキャラカード作れるんじゃない？」
ということで、その他いろいろなところから情報をあつめて、作りました。
ギルドリーヴ風キャラクターカードクリエイター
サーバーで画像処理やると人気が出たらサーバー落ち気にしないといけないのは精神衛生上よくないので、Javascriptだけでブラウザで完結するようにHTML5使っているので、最新のブラウザでないと動作しないのでよろしく。
これでなにが出来るかっていうと、キャラカードができるのだけど、一番おすすめの使い方は、これでLSやFCのメンバー一覧を作ることかなっ！
ほら、今のLodestoneのメンバー一覧って、ヘヴィダークライトアーマーとか着るとわけわかんないじゃない？
昔のLodestoneも、常に下着姿で番長はゴーグルかけられなかったけど・・・
なんで、お手軽に各自で作れるようになれば、ＦＣのフォーラムとかで持ち寄れるじゃない。
特にＳＳだけだと、誰が誰だかわからないけど、キャラカードに名前があれば迷わなくても済むしね。
ということで、我がチョコボスクールのアルバムはこんな感じ。
まだ全部はそろってないのだけど、Googleのアルバムにほいほい上げている（Lodestoneはサーバー側の画像容量がキツいので）。
こんな感じのをみんなで作ると、FF14がもっと楽しくなると思うんだ！
というわけで使い方。
ボツにしたタイトル画像が再利用できたな・・・。
というわけで、みんなのキャラクターをカードにしてしまおう！
動作確認はFirefox24.0,Chrome30.0,Internet Explorer10でやっているけど、IE10はちょっと動作が不安定なので、FirefoxかChromeがオススメだ！
なんかフィードバックがあったらこちらのLodestoneの日記まで！
※[11/10]最初の日記がコメ数限界の100までいったので続きに差し替え
【追記】書体の最後のよめないやつはエオルゼア文字です。オエルゼア文字でEorzeaって書いてあります。
旧フォーラムで有志の方が作ってくれたものをWebフォントにして使えるようにしています。雰囲気は出ますが、他人からは読めなくなりますｗ
【11/6更新】
５．フォントが小さい時に、文字の位置が上目に見えてしまうので、文字の大きさによって位置を若干調整するようにしました。
【11/6更新】
６．上下の文字列のフォントカラーが選べるようになりました。
だれが始めたのか正確にはわからないけど、番長はビサイドの弟さんのヤツで知った。
今はマサムネかな？
こんなやつだ。
こんな風なキャラカードを自分のだったり、ＬＳメンバーのだったり作っていたんですよ。
でも、これをつくるのはフォトレタッチソフトとか持ってて使い方ちゃんと分かっている人しかできなかったからそれなりに敷居は高かったんだ。
（画像加工の中では簡単な部類になるけど）
で、最近みつけたWebサイトで、ブラウザ上で画像をトリミングしたりするプログラムのサンプルを見つけた時に思いついてしまった。
「これでキャラカード作れるんじゃない？」
ということで、その他いろいろなところから情報をあつめて、作りました。
ギルドリーヴ風キャラクターカードクリエイター
サーバーで画像処理やると人気が出たらサーバー落ち気にしないといけないのは精神衛生上よくないので、Javascriptだけでブラウザで完結するようにHTML5使っているので、最新のブラウザでないと動作しないのでよろしく。
これでなにが出来るかっていうと、キャラカードができるのだけど、一番おすすめの使い方は、これでLSやFCのメンバー一覧を作ることかなっ！
ほら、今のLodestoneのメンバー一覧って、ヘヴィダークライトアーマーとか着るとわけわかんないじゃない？
昔のLodestoneも、常に下着姿で番長はゴーグルかけられなかったけど・・・
なんで、お手軽に各自で作れるようになれば、ＦＣのフォーラムとかで持ち寄れるじゃない。
特にＳＳだけだと、誰が誰だかわからないけど、キャラカードに名前があれば迷わなくても済むしね。
ということで、我がチョコボスクールのアルバムはこんな感じ。
まだ全部はそろってないのだけど、Googleのアルバムにほいほい上げている（Lodestoneはサーバー側の画像容量がキツいので）。
こんな感じのをみんなで作ると、FF14がもっと楽しくなると思うんだ！
というわけで使い方。
ボツにしたタイトル画像が再利用できたな・・・。
というわけで、みんなのキャラクターをカードにしてしまおう！
動作確認はFirefox24.0,Chrome30.0,Internet Explorer10でやっているけど、IE10はちょっと動作が不安定なので、FirefoxかChromeがオススメだ！
なんかフィードバックがあったらこちらのLodestoneの日記まで！
※[11/10]最初の日記がコメ数限界の100までいったので続きに差し替え
【追記】書体の最後のよめないやつはエオルゼア文字です。オエルゼア文字でEorzeaって書いてあります。
旧フォーラムで有志の方が作ってくれたものをWebフォントにして使えるようにしています。雰囲気は出ますが、他人からは読めなくなりますｗ
【11/6更新】
プログラムを以下の内容で更新しました。
１．切り抜き領域選択画面の画像サイズを画面の幅に合わせてリサイズするようにしました。
実際に切り抜く元画像はオリジナルのサイズのものなので画質の劣化はありません。
２．著作権表示（スクエニの）を付けるオプションを追加
Lodestoneやブログなどページ全体にフッターなどで著作権表示していれば無くても良いが、外部サイトなどでは付けた方がいいので。
３．画像調整機能を追加
明るさやコントラストの調整、モノクロにしたりセピア色にしたり簡単な画像加工が出来るようにしました。
４．選択した領域より、キャラカードに反映される領域が若干狭かったので調整しました。
５．フォントが小さい時に、文字の位置が上目に見えてしまうので、文字の大きさによって位置を若干調整するようにしました。
【11/6更新】
６．上下の文字列のフォントカラーが選べるようになりました。
※表示が崩れている人は、ブラウザのキャッシュを見ている可能性があるので、一度Shiftを押しながら再読み込みしてみてください。
【11/10更新】
７．画像加工機能にマスク処理ができるようになりました。それに伴い、画像加工処理機能のレイアウトを変更しました。
８．画像加工に「ぼかし」を追加しました。ただし、処理が相当重いので気をつけてください。
９．マスク情報、画像加工した元のイメージを出力する機能を追加しました。出力先のイメージの表示は小さいですが、実際のサイズはオリジナルです。また、出力したマスク情報は次回に読み込むことができます。
10.書体選択のデザインを変更しました。また日本語で使える書体を増やしました。
11.初期設定の文字色を調整しました。
明るさやコントラストなどの画像加工にマスクを入れられるようにしました！
前回、いくつか画像調整機能を入れてみたけど、なんか中途半端だったのでせっかくだからマスクをかけられるにしました。
機能はマスクをかけるのに特化していて、右クリックをおしたらマスク、左クリックを押したら消しゴム、マウスホイールで、その点を中心に拡大・縮小が出来ます。
まぁ、急造なんでアレですが・・・。
※マスクの拡大縮小をくりかえすとちょっと境界がボヤけてしまうようです。
※[11/12 対応をいれました]
お勧めは、コントラストをちょっと強めにかけて、キャラクターをマスクし、背景にぼかしを入れるパターン。
こんなのが、お手軽・・・とはいえないけど、ちょっとの手間で出来ます。
こんな感じで、凝ろうと思えばいろいろできるようになったけど、基本は、お手軽にお友達をガンガンカード化してコレクションしようぜ！ってツールなので、あまりこの方向には発展させない予定。ちょっと自分の勉強がてらやってみた、って感じかな。
あと、テキストに使える日本語フォントを増やしました。
このツールでは、環境に依存しないWebフォントをメインに使っているのだけど、 日本語の書体は容量がデカいので避けてたけど、けっこうみんな日本語使っていたので、もうちょっと増やそうかな、と。
みんなのＯＳに入っている書体ならそのまま使えるのだけど、増やすと選ぶUI作るのが大変なので・・・
もうちょっと考えます。
【11/11更新】
12.マスク処理で、拡大・縮小を繰り返すと境界がぼやける問題に対応しました。だいぶマシになったと思います。
13.マスク編集時の拡大の拡大率を制限しました。大きくすると重くなりすぎていたので。
【11/13更新】
14. IE11で動かなかった問題を対応しました。
※これにともなて、自分の環境ではIE10で検証できなくなりました・・・
15. .マスクの境界ぼやける問題に調整を入れました。またマスク編集時の拡大率を多少上げました。
【11/10更新】
７．画像加工機能にマスク処理ができるようになりました。それに伴い、画像加工処理機能のレイアウトを変更しました。
８．画像加工に「ぼかし」を追加しました。ただし、処理が相当重いので気をつけてください。
９．マスク情報、画像加工した元のイメージを出力する機能を追加しました。出力先のイメージの表示は小さいですが、実際のサイズはオリジナルです。また、出力したマスク情報は次回に読み込むことができます。
10.書体選択のデザインを変更しました。また日本語で使える書体を増やしました。
11.初期設定の文字色を調整しました。
明るさやコントラストなどの画像加工にマスクを入れられるようにしました！
前回、いくつか画像調整機能を入れてみたけど、なんか中途半端だったのでせっかくだからマスクをかけられるにしました。
機能はマスクをかけるのに特化していて、右クリックをおしたらマスク、左クリックを押したら消しゴム、マウスホイールで、その点を中心に拡大・縮小が出来ます。
まぁ、急造なんでアレですが・・・。
※マスクの拡大縮小をくりかえすとちょっと境界がボヤけてしまうようです。
※[11/12 対応をいれました]
お勧めは、コントラストをちょっと強めにかけて、キャラクターをマスクし、背景にぼかしを入れるパターン。
こんなのが、お手軽・・・とはいえないけど、ちょっとの手間で出来ます。
こんな感じで、凝ろうと思えばいろいろできるようになったけど、基本は、お手軽にお友達をガンガンカード化してコレクションしようぜ！ってツールなので、あまりこの方向には発展させない予定。ちょっと自分の勉強がてらやってみた、って感じかな。
あと、テキストに使える日本語フォントを増やしました。
このツールでは、環境に依存しないWebフォントをメインに使っているのだけど、 日本語の書体は容量がデカいので避けてたけど、けっこうみんな日本語使っていたので、もうちょっと増やそうかな、と。
みんなのＯＳに入っている書体ならそのまま使えるのだけど、増やすと選ぶUI作るのが大変なので・・・
もうちょっと考えます。
【11/11更新】
12.マスク処理で、拡大・縮小を繰り返すと境界がぼやける問題に対応しました。だいぶマシになったと思います。
13.マスク編集時の拡大の拡大率を制限しました。大きくすると重くなりすぎていたので。
【11/13更新】
14. IE11で動かなかった問題を対応しました。
※これにともなて、自分の環境ではIE10で検証できなくなりました・・・
15. .マスクの境界ぼやける問題に調整を入れました。またマスク編集時の拡大率を多少上げました。
