吹き出し量産計画

挨拶とか吹き出し量産計画が始まったきっかけ

みなさんこんにちは、なおこです。

半年ぐらい間、空き時間にデジタルイラストの勉強をしていたのですよ。

今日あたりに、成果をイラストとして公開する予定でしたが間に合わなかったので違うネタを用意しました！

理想は今日仕上げたかったでも間に合わないという現実　AC写真素材ほんと何でもある。

話は変わりマンガをLinuxで描こうとすると素材を用意する必要があるんですよ。

例えば、吹き出しやトーン、効果やコマ割りとか、、、、

スムーズに始めるにはそういうのがあったほうが良いなと思うことはよくあります。

Windowsであれば素材がすでに、マンガを描くソフトなどに用意されていることがあります。

Windowsに素材があるのに、わざわざLinuxでマンガ描くのか？

という疑問は封印してまあロマンということで。

マンガの素材作りをしてみることに

ただ吹き出しを描いたりするのはネタ的には単純すぎるような気がしたので量産が可能なことと自分の技術できて楽しいこと。

今自分がやって楽しいことは

WEB関連のこと
デジタルイラスト
料理

お、これって

WEB関連とデジタルイラスト組み合わせることできるんじゃねって！

以前、吹き出しをウェブサイトの制作で作ったことがあるのでその知識も活かせるかも？

まずは吹き出しを量産することにした

吹き出しについて調べているとすでにフキダシデザインという素材サイトがあるみたい。

ふきだし素材専門サイト「フキダシデザイン」 – フキダシ素材が1000以上集まるサイト

デザイン向けふきだし素材を配布するサイト

あっこれ使えばよくねって思った気持ちを抑えて吹き出しを量産する方法を考えます。

吹き出しと大きな括りにしたが吹き出しにも様々な種類があるみたい。

丸い吹き出しやかくかくした吹き出しや四角い吹き出し、トゲトゲしてる吹き出し

簡単そうなのが四角いのと丸いフキダシこれを応用ができる形で作っていこうと思う。

角丸吹き出しを作ってみる

webの技術で単純に吹き出しを作るだけであれば疑似要素とdivタグを応用すればできそう！

ですが、画像化するためにhtml2canvasを使用します。

html2canvasを使用する場合、疑似要素は不具合が起きやすかったので今回は疑似要素を使わずにdivタグを多用していきたいと思う。

そして即席で作った吹き出し↓

ソースコードを表示する

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
    <link rel="stylesheet" href="/css/style.css">
    <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.5/dist/html2canvas.min.js"></script>
</head>
<body>
    <div id="img" class="blowoff">
        <div class="square rl ">〇〇さん、<br>こんにちわ！</div>
        <div class="top"></div>
        <div class="right"></div>
        <div class="bottom"></div>
        <div class="left"></div>
    </div>
    <a id="download" href="#" download="test.png" onclick="handleDownload()">ダウンロード</a>
    <script>
        
        html2canvas(document.getElementById("img"),{
            backgroundColor:'#00000000'
        }).then(function(canvas) {
            document.body.appendChild(canvas);
            document.getElementById("download").href=canvas.toDataURL('image/png');
        });
    </script>
</body>
</html>

body{
    background-color: #555;
}
$w:40vw;
$h:40vw;
$font:16px;
$padding:22px;
$arrow:16px;
$radius:.5rem;
$c1:#fff;
$c2:#000;
$fu:5px;
.rl{
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}
.blowoff{
    display: inline-block;
    position: relative;
    left: 0;
    top: 0;   
    padding: $arrow*2;
    font-size: 0;
    .square{
        display: inline-block;
        color: $c1;
        line-height: 1.7;
        letter-spacing:2px;
        border-radius: $radius;
        font-size: $font;
        transform-origin: center;
        padding: $padding;
        background-color: $c2;
    }
    .top,.left,.right,.bottom{

        border: $arrow solid transparent;
        position: absolute;
        width: 1px;
    }
    .top{
        top: 1px;
        left: 0;
        right: 0;
        margin: 0 auto;
        border-bottom: $arrow solid $c2;
    }
    .bottom{
        bottom: 1px;
        left: 0;
        right: 0;
        margin: 0 auto;
        border-top: $arrow solid $c2;
    }
    .left{
        top: 50%;
        left: 1px;
        margin-top: -$arrow;
        border-right: $arrow solid $c2;
    }
    .right{
        top: 50%;
        right: 1px;
        margin-top: -$arrow;
        border-left: $arrow solid $c2;
    }
}

body {
  background-color: #555; }

.rl {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl; }

.blowoff {
  display: inline-block;
  position: relative;
  left: 0;
  top: 0;
  padding: 32px;
  font-size: 0; }
  .blowoff .square {
    display: inline-block;
    color: #fff;
    line-height: 1.7;
    letter-spacing: 2px;
    border-radius: 0.5rem;
    font-size: 16px;
    transform-origin: center;
    padding: 22px;
    background-color: #000; }
  .blowoff .top, .blowoff .left, .blowoff .right, .blowoff .bottom {
    border: 16px solid transparent;
    position: absolute;
    width: 1px; }
  .blowoff .top {
    top: 1px;
    left: 0;
    right: 0;
    margin: 0 auto;
    border-bottom: 16px solid #000; }
  .blowoff .bottom {
    bottom: 1px;
    left: 0;
    right: 0;
    margin: 0 auto;
    border-top: 16px solid #000; }
  .blowoff .left {
    top: 50%;
    left: 1px;
    margin-top: -16px;
    border-right: 16px solid #000; }
  .blowoff .right {
    top: 50%;
    right: 1px;
    margin-top: -16px;
    border-left: 16px solid #000; }

/*# sourceMappingURL=style.css.map */

Document

左側がHTMLやCSS描画しているもので右側がそのデータを素にキャンバス化したやつ。ダウンロードボタンを押すとキャンバスデータをダウンロードできるよ〜

ソースコードの軽い説明

吹き出し部分

HTMLはdivタグのblowoffクラスでラップしてその中にテキストが入る部分と右側▼の部分を指定する感じ。


    <div id="img" class="blowoff">
        <div class="square rl ">〇〇さん、<br>こんにちわ！</div>
        <div class="right"></div>
    </div>

これぐらいだったらCSSで書いたほうが良いがあとあと応用したいのでSCSSで書いておく

あとあといじりやすいように変数化しておく良い。

日本特有の縦読みを再現するのにCSS3のwriting-modeなども使っています。

▲部分はborderで作っていると言うも面白いところですね。

$font:16px;
$padding:22px;
$arrow:16px;
$radius:.5rem;
$c1:#fff;
$c2:#000;
$fu:5px;
.rl{
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}
.blowoff{
    display: inline-block;
    position: relative;
    left: 0;
    top: 0;   
    padding: $arrow*2;
    font-size: 0;
    .square{
        display: inline-block;
        color: $c1;
        line-height: 1.7;
        letter-spacing:2px;
        border-radius: $radius;
        font-size: $font;
        transform-origin: center;
        padding: $padding;
        background-color: $c2;
    }
    .right{
        border: $arrow solid transparent;
        position: absolute;
        width: 1px;
        top: 50%;
        right: 1px;
        margin-top: -$arrow;
        border-left: $arrow solid $c2;
    }
}

.rl {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}

.blowoff {
  display: inline-block;
  position: relative;
  left: 0;
  top: 0;
  padding: 32px;
  font-size: 0;
}
.blowoff .square {
  display: inline-block;
  color: #fff;
  line-height: 1.7;
  letter-spacing: 2px;
  border-radius: 0.5rem;
  font-size: 16px;
  transform-origin: center;
  padding: 22px;
  background-color: #000;
}
.blowoff .right {
  border: 16px solid transparent;
  position: absolute;
  width: 1px;
  top: 50%;
  right: 1px;
  margin-top: -16px;
  border-left: 16px solid #000;
}

最後に

とりあえず吹き出しを作るっというのは成功

今後はUIとか作ってユーザーの操作に合わせて様々吹き出しを作れるようにしたりとか

事前に大量に作って素材配布サイトとか

PWAあたりでソフトぽいの作ってクリップボードあたりをうまく使って吹き出し選びの補助ツールとか

いろいろ夢広がりますね！

それでは！

The post 吹き出し量産計画 first appeared on FascodeNetwork Blog.

TechWatch