一枚の画像からパラパラ漫画を生成する


今回作ったものは以下。ブックマークするならこちらをどうぞ。
CSSパラパラ漫画メーカー


はじめに

世の中には頭のいい人がたくさんいるもので、先日「CSSスプライト」と呼ばれる技術を知りました。

Webページ上でたくさんの画像を参照する処理を減らすべく、事前に必要な画像を一枚にまとめて、ブラウザ上では「その一枚の画像の特定の領域のみCSSで制御して表示させる」というもの。
確かに画像を読み込む回数が減る……なるほどって感じ。

今回はこの技術を用いて以下のような「複数のコマを横につなげた画像」からパラパラ漫画を作るツールを作ってみました。透過画像も利用可能。画像の種別はWebページに利用可能なものであれば行けるはず。
(※GIF画像作ってるわけじゃないよ)

何が起きるか説明するより見た方が早いので デモページ を見て。
……まぁ上記画像が一枚ずつコマ送りにされるだけです。

ツールの実態はPHPで作られたページでして、画像やらアニメーションの情報はURLから変数で渡してあげます。僕一人が使うだけならこのままでもいいのですが、利便性向上と他の人に使ってもらいたいなぁって時の為に必要な情報からURLを生成するフォームを作りました。

利用場面は正直分かんないですが、生成されたURLをOBSのブラウザソースに渡してあげれば配信画面なんかでも表示できたりするので、画面のにぎやかしくらいにはなるかもです。(元となる画像の用意は手間ですが……)

ではツールの簡単な説明だけ。

使い方

フォームは以下のような具合です。

各項目の解説は以下の通り。(そこまで説明することない)

  • 画像URL:利用する画像のURL
  • 1コマの横幅:画像全体ではなく、1コマあたりの横幅。(画像全体の横幅をコマ数で割った長さ)
  • 縦幅:画像の縦幅。めっちゃ長くしても元画像の縦幅以上にはならない
  • コマ数:何コマ分再生するかの指定
  • 1周/秒:全コマ分再生し終えるまでの時間
  • ループしない:これをチェックすると最後のコマで停止する。デフォルトはループする

「生成」ボタンを押したらURLが出てきます。
後はこのURLを好きに使ってくださいまし。

さいごに

今回参考にさせて頂いたのは以下のサイト。欲しい情報がピンポイントで見つかった。嬉しい。(粉蜜柑)

本記事はツールの紹介が出来ればそれでいいので、PHPやstyle要素の解説はせんでおきます。前述の通り作った本人でさえ使い道はよくわかりません故、ちょっとしたオモチャだと思ってくださいまし。

それでは、以上。

Discordで喋ってる人を分かり易くするカスタムCSS


(2019/09/01追記)本記事の内容はこちらにてツール化してます。画像URL・DiscordのユーザID取得、配信ツールへの設定方法が理解できた方はツールの方をブックマークした方が楽になるかもしれません。


Discordのストリームキットで配信ツール上に表示される発言者を分かり易くするという手法はメジャーなものかと思いますが、それをさらにカスタムCSSで「アイコン」から「立ち絵」に改造できたのでご紹介。

以下の右側(発言毎に跳ねる魔理沙ちゃん)のような動きをするカスタムCSSを例に設定手順を掲載します。

目次

  1. ボイスウィジェット取得
  2. 立ち絵・ユーザ情報取得
  3. カスタムCSS作成
  4. 配信ツールへ取り込み(OBSの場合)

ボイスウィジェット取得

① [Discord Streamkit Overlay]へアクセス。

② お使いの環境に合わせて[OBS]か[XSplit]を選択

③ [VOICE WIDGET]>[該当のサーバ]>[該当のボイスチャンネル]選択してウィジェットのURL取得(URL控え)

立ち絵・ユーザ情報取得

④ ディスコードのチャットに、使用したい立ち絵画像をD&Dでアップロード
※URL参照できる場所であればディスコード外でも可

⑤ 「」でアップロードした画像を右クリックして[リンクをコピー]選択(URL控え)

⑥ ディスコードサーバーのメンバーから立ち絵を適用するユーザを右クリックして[IDをコピー]選択(ID控え)


(2019/11/11追記)IDのコピーはDiscordで「開発者モード」を有効にしていないと実行できません。開発者モードは[ユーザー設定]>[アプリの設定]>[テーマ]で有効にできます。
教えてくれた鎌足さん( @kamatari_san )、ありがとうございます!


カスタムCSS作成

⑦ 以下のソースを編集([⑥で控えたID]、[⑤で控えた画像URL]の二か所修正)

li.voice-state:not([data-reactid*="⑥で控えたID"]) { display:none; }
.avatar {
  content:url(⑤で控えた画像URL);
  height:auto !important;
  width:auto !important;
  border-radius:0% !important;
}

.speaking {
  border-color:rgba(0,0,0,0) !important;
  position:relative;
  animation-name: speak-now;
  animation-duration: 1s;
  animation-fill-mode:forwards;
}

@keyframes speak-now {
  0% { bottom:0px;  }
  15% { bottom:10px;  }
  30% { bottom:0px;  }
}

li.voice-state{ position: static; }
div.user{ position: absolute; left:40%; bottom:5%; }

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

配信ツールへ取り込み(OBSの場合)

⑧ ソースから[ブラウザソース]選択(ソース名は任意)

⑨ URLに「」で控えたURLを指定

⑩ カスタムCSSに「」で編集したソースを貼り付け


手順は以上。

対象のユーザがDiscord通話に参加していれば動く立ち絵が表示されるはずです。
ちょっと手間ですがコラボなんかの際は上記手順を人数分実施します。

因みに最初に紹介した動画の左側(発言毎に明るくなる霊夢ちゃん)のような挙動をさせる場合は⑦で編集するCSSを以下に差し替えればできます。

li.voice-state:not([data-reactid*="⑥で控えたID"]) { display:none; }
.avatar {
  content:url(⑤で控えた画像URL);
  height:auto !important;
  width:auto !important;
  border-radius:0% !important;
  filter: brightness(50%);
}

.speaking {
  border-color:rgba(0,0,0,0) !important;
  filter: brightness(100%);
}

li.voice-state{ position: static; }
div.user{ position: absolute; left:40%; bottom:5%; }

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

明るさ変わる方が分かり易そうだけど、雑音とか拾って発話状態繰り返したら画面チカチカしないか心配。。。


なんとなく想像つくかもしれませんが、「.avatar」が通常時の立ち絵に関する設定で「.speaking」がしゃべってる最中の表示に関する設定です。

細かい解説は本記事では省きますが、弄る場所さえ分かっていればあとは使えるCSSを増やすだけ。
もっと上手な書き方ある気がしますが、取り合えずこれで動作するのでヨシとします。

演出のバリエーションが増えたら使いやすい形で配布とか生成ツールの作成をしたいと考えてます故、気長にお待ちくださいまし。

是非お試しいただき、配信活動にお役立てください。

それでは、以上。