紹介と使い方
HoloCard は、1 枚の写真をインタラクティブなレイヤー付きキラカードにします。写真をアップロードすると、サーバーが画面を手前・中間・奥のレイヤーに自動で分け、レイヤーごとに異なるホイルを割り当てます。ページ上でカードを傾けると、角度に応じてホイルが変化します。公開サイト:https://holocard.longsizhuo.com。
ホイルの効果と操作感は pokemon-cards-css(Simon Goellner、GPL-3.0)から移植しています。同プロジェクトでは、カードごとにホイルが見える範囲を示すマスク画像を作者が手作業で用意する必要があります。HoloCard はこのマスクをレイヤー分割アルゴリズムで自動生成するため、どんな写真でもキラカードにできます。HoloCard も GPL-3.0 で公開しています。
画面は中国語・英語・日本語に対応しており、ページ上部で切り替えられます。
カードの構成
構成は実物のキラカードの印刷方法に対応しています。台紙はホイルで、主役は不透明インクで覆われるためマット、覆われない背景が光ります。
| 構成要素 | 範囲 | 視差で動くか | 見えるとき |
|---|---|---|---|
| 奥行きレイヤー | 各レイヤー自身の画像 | はい(レイヤーごとに量が異なる) | 常に |
| レイヤーごとのホイル | そのレイヤーの形の内側のみ | はい(所属レイヤーと一緒に) | カードを傾けたとき |
| カード全体のハロー | カード面全体 | いいえ | 特定の傾きでのみ、淡い虹色として浮かぶ |
| カード全体のグレア | カード面全体 | いいえ | ポインターに追従 |
レイヤーと奥行き
サーバーは写真の奥行きを推定し、内容に応じて奥から手前へ 2〜4 枚のレイヤーに分けます。人物や動物などはっきりした主役がある場合、主役は独立した一番手前のレイヤーになります。各レイヤーは元画像と同じサイズで透明チャンネルを持つ画像で、奥から順に重ねると元画像と一致します。手前のレイヤーに隠れていた部分は補完済みのため、手前のレイヤーが動いたときに見えるのは奥のレイヤーの続きです。
視差
カードを傾けると、各レイヤーはそれぞれの視差係数に応じた量だけ移動します。手前のレイヤーは外側へ、奥のレイヤーは内側へ動き、立体感が生まれます。端に余白が出ないよう、全レイヤーを同じ倍率でわずかに拡大します。視差はオフにでき、オフにするとカードは平面の画像になります。
ホイル
各レイヤーのホイルはそのレイヤーの形の内側にのみ表示され、レイヤーと一緒に動きます。次の 4 種類から選べます。
| ホイル | 画面上の名前 | 効果 |
|---|---|---|
none | マット(ホイルなし) | ホイルなし |
holo | クラシックホロ | 斜めの虹、細い走査線、縦の格子 |
sunpillar | サンピラー | 斜めのサンピラー状の虹と金属粒子 |
rainbow | レインボーラメ | ラメと多色グラデーション |
既定の割り当ては、一番奥(背景)がサンピラー、中間レイヤーがクラシックホロ(強さ 0.8)、一番手前(主役)がマットです。レイヤーが 1 枚のみの場合はサンピラーです。
ハローとグレア
カード全体のハローはカード面全体を覆い、視差には参加しません。光源を視線方向へ反射する角度までカードを傾けたときにのみ現れ、それ以外の角度ではほとんど見えません。グレアはポインターに追従する鏡面反射です。白に近い部分ではホイル・ハロー・グレアが自動的に弱まり、白い服や毛並みなどの質感が保たれます。
使い方
アップロードと処理
ページ上のアップロードボタン(ツールチップ「写真をアップロード」)をクリックして画像を選ぶか、画像をそこへドラッグします。
- 対応形式は JPEG、PNG、WebP、AVIF、HEIC で、1 枚 16MB までです。15MB を超える画像はアップロード前にブラウザ内で長辺 4096 ピクセルまで縮小され、その際に EXIF(位置情報を含む)も削除されます。
- 同じ IP からの送信は 10 分あたり最大 10 回です。
- 処理はサーバーで行われ、ブラウザがモデルをダウンロードすることはありません。進捗バーには現在の段階(順番待ち、主役の認識、奥行きの推定、レイヤー分割と穴埋めなど)と残り時間の目安が表示されます。
- デプロイにレイヤー分割サーバーがまったくない場合(静的ファイルのみのセルフホストなど)に限り、ブラウザ内で処理します。初回は約 50MB のモデルをダウンロードします。ブラウザで作ったカードはサーバーに保存されないため、共有や書き出しはできません。
パックを開ける
アップロードすると、カードデッキの右端にまずカードパックが現れ、処理が終わると光ります(表示:「なぞって開ける、またはタップ」)。
- パック上部の封を横になぞると開きます。6 割ほどなぞって指を離すと、封が丸ごと破り取られます。
- またはパックをタップすると、パックが揺れてはじけます。
新しいカードがパックの口から出てきて、1 回転して登場します。開封時には効果音が鳴ります。パックがある間はデッキ右下に「開封の効果音」ボタンが表示され、オフにでき、設定は端末に保存されます。システムの「視差効果を減らす」がオンの場合はアニメーションを再生せず、そのままカードを表示します。
他の人が共有したカードも、その端末で初めて開くときはパックとして表示されます。一度開けた後は直接カードが表示されます。
デッキの切り替え
トップページのメインステージはカードデッキで、今回の訪問で作ったカードが並び、最新のものが右端です。カードの両側にある「前のカード」「次のカード」ボタン、またはキーボードの ← → で切り替えます。新しいカードの処理中に前のカードへ戻ることもできます。新しいカードができたとき別のカードを表示していると、「次のカード」ボタンに小さな点が付きます。
デッキは現在のタブに保存され、再読み込みしても残り、タブを閉じると消えます。作ったカードは「マイアルバム」でいつでも見られます。
効果の調整
カードの横のパネルで、表示中のカードを調整します。
| コントロール | 役割 | 範囲 |
|---|---|---|
| レイヤーごとの行:ドロップダウン | そのレイヤーのホイルの種類 | 上のホイル表を参照 |
| レイヤーごとの行:スライダー(「このレイヤーのホイルの強さ」) | ホイルの強さ。マットのレイヤーでは無効 | 0〜1 |
| 「立体視差」スイッチ | 視差のオン・オフ | オン / オフ |
| 「奥行きとハロー」→「視差の強さ」 | 視差の振幅(カード幅に対する割合) | 0〜16%、既定 2% |
| 「奥行きとハロー」→「ハローの強さ」 | カード全体のハローの強さ。0 でオフ | 0〜1、既定 0.35 |
| 「奥行きとハロー」→「角度の鋭さ」 | ハローが現れる傾きの範囲。大きいほど狭い | 10〜400、既定 120 |
| 「奥行きとハロー」→「現在のハロー」 | 読み取り専用。現在のハローの実際の明るさ | — |
スライダーを動かしたりホイルを変えたりすると、変化が見えるようにカードがハローの最も明るい角度まで傾き、しばらくすると元に戻ります。
カードの持ち主による調整は、操作を止めてから約 1 秒後にサーバーへ自動保存されます。共有ページ、共有プレビュー画像、書き出したアニメーションはすべて保存された設定で表示されます。他の人のカードで調整した内容はこの端末の表示にのみ反映され、保存されません。「立体視差」スイッチの選択は端末にも保存され、視差設定がまだ保存されていないカードに使われます。
共有
カードが完成すると共有リンクが自動で作成され、パネルに表示されます。「コピー」でコピーできます。自動作成に失敗した場合は「共有リンクを作成」ボタンがパネルに残り、手動で作成できます。
- リンクは
https://holocard.longsizhuo.com/c/<id>の形式です。英語・日本語の画面で作成したリンクには?lang=enまたは?lang=jaが付き、チャットアプリに表示されるタイトル、説明、プレビュー画像は共有した人の言語になります。 - 共有できるのはカードの持ち主だけです。持ち主とは、そのカードの削除キーを保存している端末、またはカードが属するログイン中のアカウントです。
- 持ち主が自分の共有リンクを開くと、引き続き調整・共有・削除ができます。他の人はカードを傾けたり書き出したりできますが、調整は保存されません。
- 共有後の保存期間はアクセス数に応じて延長されます。下の「保存期間」を参照してください。
アニメーションの書き出し
パネルの書き出しボタンは、端末の写真ライブラリへそのまま保存できる形式を提示します。ファイルはカードに保存された設定に従ってサーバーで生成されます。
| 端末 | ボタン | 形式 | 保存方法 |
|---|---|---|---|
| iPhone / iPad | 「GIF として保存」 | GIF | 生成後にボタンが「写真に保存」に変わります。もう一度タップすると共有シートが開くので「画像を保存」を選びます。ファイル共有に対応していない古いシステムでは「ファイル」App にダウンロードされます |
| Android | 「モーションフォトとして保存」 | モーションフォト(末尾に動画を付けた JPEG) | そのままダウンロード |
| パソコン | 「アニメーション画像をダウンロード」 | APNG(拡張子 .png) | そのままダウンロード |
書き出しは持ち主に限らず、他の人が共有したカードでも行えます。WeChat や QQ のアプリ内ブラウザはダウンロードを許可しないため、右上の「···」からシステムのブラウザで開いてから書き出してください。
削除
持ち主がパネルの「このカードを削除」をクリックして確認すると、サーバー上のレイヤーファイルとプレビュー画像がすぐに削除され、共有済みのリンクも無効になります。元に戻すことはできません。
ログインしていない場合、削除の権限はこの端末のブラウザに保存された削除キーに依存します。ブラウザのデータを消去すると、その端末では以前作ったカードを削除・共有できなくなります。カードをアカウントに入れておけばこの問題を避けられます。
ジャイロ
スマートフォンでは、カードは端末の傾きに追従します。左右に約 16°、前後に約 18° 傾けると最大の角度になります。iOS では許可が必要で、デッキを初めてタップしたときにシステムが確認を表示します。拒否した場合も指でカードを動かせます。
カードの基準姿勢は端末の現在の姿勢にゆっくり追従します。端末を動かさずにいると数秒でカードが正面に戻り、傾けた瞬間の動きだけが効果を生みます。指で操作している間は指の操作が優先されます。
アルバムとログイン
マイアルバム
アルバムには、作ったカードが新しい順にグリッドで並びます。手動で追加する必要はありません。アルバムはアカウント画面から開きます。ページ上部右側の「ログイン」(ログイン後はアバターと名前)をクリックしてアカウント画面を開き、「アルバムを開く」をクリックします。ログイン機能のないデプロイでは、ページ上部のボタンが「マイアルバム」になり、直接アルバムが開きます。サムネイルをクリックするとそのカードのページが開き、共有・書き出し・削除ができます。期限切れまたは削除済みのカードには「期限切れ」と表示されます。
ログインしていない場合、アルバムは端末内の記録です。この端末のブラウザに保存された削除キーから作られ、この端末でのみ表示されます。
ログイン
HoloCard には involutionhell アカウントでログインできます。ログインは任意で、ログインしなくてもすべての機能を使えます。ログインはアカウント画面(ページ上部右側の「ログイン」ボタン)、またはアルバム上部の「involutionhell アカウントでログイン」から行います。HoloCard が受け取るのはアカウントの ID、名前、アバターのみで、メールアドレスは受け取りません。
ログインすると次のようになります。
- アルバムのタイトルが「オンラインアルバム」になり、アカウントのカードと、この端末でまだアカウントに入れていないカードが表示されます。
- ログイン中に作ったカードはそのままアカウントに入り、どの端末からでもログインすれば表示・共有・削除できます。
- アカウントのカードは期限切れになりません。
この端末のカードをアカウントに入れる
ログイン後、この端末にアカウントへ入れていないカードがあると、アルバム上部に「この端末に、まだアカウントに入れていないカードが N 枚あります」とサムネイルが表示され、既定ですべてチェックされています。共用パソコンなどで自分のものではないカードのチェックを外し、「アカウントに入れる」をクリックします。
アカウントに入れたカードは期限切れにならず、この端末にあった削除キーは無効になり、以後はアカウントが持ち主になります。削除済み・期限切れのカードは入れられません。
アカウント画面
ページ上部右側のボタンをクリックすると「アカウント」が開きます。ページ上部には「ドキュメント」もあり、ページの現在の言語でこのドキュメントサイトを開きます。
ログインしていない場合、アカウント画面にはログインの入口と「マイアルバム」(この端末のカード数と「アルバムを開く」)があります。
ログイン中はページ上部のボタンにアバターと名前が表示され、アカウント画面には次の項目があります。
- アカウント情報と「ログアウト」
- 「オンラインアルバム」:アカウントのカード数。「アルバムを開く」でアルバムを表示します
- 「外部 API」:API ドキュメントへのリンク、直近 24 時間の使用量、アカウントのキー。「API キーを申請」で新しいキーを発行します。キーは一度しか表示されません。1 アカウントにつき同時に 10 個まで持てて、上限はすべてのキーで共通です。手元のキーが分からなくなったら新しく申請すればよく、使わないキーは「無効にする」をクリックします。使い方は API ドキュメント、API で作ったカードを Web ページに表示する方法はプレーヤーを参照してください。
カードマスク
カードマスクはトレーディングカード向けの独立したツールで、/masks から開きます(トップページにはリンクを置いていません)。完成した平面のカード画像をアップロードすると、外縁・枠・文字・キャラクター・エフェクト・背景の重ならない 6 枚のホイル用マスクができ、組み合わせごとのホイルの効果をプレビューできます。詳しくはカードマスクを参照してください。
保存期間
カードのファイルはサーバーに保存され、期限が来ると削除されます。公開サイトの既定値は次のとおりです。
| カード | 保存期間 | 起点 |
|---|---|---|
| 共有していないカード | 7 日 | 作成時 |
| 共有したカード | 7 日から、アクセス数に応じて延長、最長 112 日 | 最後のアクセス |
| アカウントのカード(ログイン中に作成、またはアカウントに入れたもの) | 期限なし | — |
| API で作ったカード | 24 時間 | 送信時 |
共有したカードは累計アクセス数で段階が決まります。
| 累計アクセス数 | 最後のアクセスからの保存期間 |
|---|---|
| 0〜1 | 7 日 |
| 2〜3 | 14 日 |
| 4〜7 | 28 日 |
| 8〜15 | 56 日 |
| 16 以上 | 112 日 |
- アクセスとは共有リンク(
/c/<id>ページ)を開くことです。同じ IP から同じカードへのアクセスは 1 時間に 1 回だけ数えます。 - 共有する操作自体も 1 回のアクセスとして扱われ、起点がリセットされます。
- カードは完成時に自動で共有されるため、Web サイトで作ったカードは通常「共有した」状態です。自動共有に失敗し、手動でも共有していない場合のみ「共有していない」扱いになります。
- 削除したカードは上の表にかかわらず即座に削除されます。
- セルフホストでは環境変数
HOLOCARD_TTL_MSで基本の保存期間(既定 7 日)を変更できます。