漫画はHTMLで作る時代 / Comicgenであなたの漫画を作ろう！

はぁ。。。ブログが読まれない。

やあ！浮かない顔して、今日はいったいどうしたんだい？

ブログのアクセス数が伸びないの。。。

君のブログはわかりづらいからね！
漫画にしてみるなんてどうかな？

そんなこと言ったって・・・
漫画なんてかけないし？

Comicgenを使えば、HTMLだけで漫画がかけるんだよ！

Comicgen〜？

Comicgenとは

ComicgenはHTMLとSVGで漫画をかけるOSSです。 Gramenerというデータ分析事業を行なっている企業が、自社の資料の説明をするために開発しました。

github.com

現在最新版はv0.1.3ですが、表示に不具合がありこのブログについてはv0.1.2を利用しています。

環境構築

Comicgenは2つのファイルを読み込むだけで動かすことが可能です。

CDNの場合

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/comicgen/dist/comicgen.min.css">
<script async src="https://cdn.jsdelivr.net/npm/comicgen"></script>

CDNでv.0.1.2を利用する

<script async src="https://cdn.jsdelivr.net/npm/comicgen@0.1.2"></script>

npm or yarnの場合

$ yarn add comicgen     # Recommended option
$ npm install comicgen  # Alternative, if you prefer npm

<link rel="stylesheet" href="node_modules/comicgen/dist/comicgen.min.css">
<script async src="node_modules/comicgen/dist/comicgen.min.js"></script>

使用方法

基本的な使い方をご紹介します。

人物の表示について

<g class="comicgen" name="dee" angle="straight" emotion="smile" pose="thumbsup" width="290" height="290"></g>

上記のSVGグループ要素のプロパティをいじると人/角度/表情/ポーズが変わります。

<g class="comicgen" name="dee" angle="straight" emotion="angryfrustrated" pose="angryfrustrated" width="290" height="290"></g>

拡大や座標の変更

プロパティにscaleやx,y座標を加えると拡大したり移動したりします。

<g class="comicgen" name="dee" angle="straight" emotion="smile" pose="thumbsup" x="-100" y="-100" scale="1.7" width="290" height="290"></g>

セリフを表示する

<div class="comic-panel">
  <div class="comic-caption-top">Hi! I'm Dee.</div>
  <g class="comicgen" name="dee" angle="straight" emotion="smilehappy" pose="handsfolded" x="-317" y="-119" scale="2.2" width="150" height="200"></g>
</div>

Hi! I'm Omuriceman.

サイズや位置の調整が面倒じゃない？

どうだい？使ってみたくなっただろう？

便利な機能を教えてくれてどうもありがとう！でも数値の調整がとても面倒な気がするんだけど。。。

そんな君のために便利なGUIが用意されているんだよ！

このライブラリーは一見便利なのですが、座標の調整と拡大/縮小はとても面倒です。

そんな面倒な調整は公式サイトのGUIを使用するのがオススメです。

最終的に出来上がったg要素をコピーして貼り付けてください。

gramener.com

他にもこんな機能が？

• レイヤーの順序の変更
• 1コマに複数人配置
• フォントの変更
• JavaScriptで呼び出せる
• 自分の好きなキャラクターを追加

好きなキャラクターを入れられるのは面白そうですね！！

まとめ

• ComicgenはHTMLで簡単に漫画が作れる
• キャラクターやポーズをプロパティで修正
• 座標や拡大率はGUIを使うといい

最後に伝えたい

最後まで読んでいただきありがとうございます！読者登録してください！