甘翼

進捗「甘翼作品紹介資料」

概要

甘翼作品を紹介する簡単な資料を制作しています。

八月二十三日から二十五日まで開催されるイベント「関係性自論5」での頒布を予定しております。

制作経緯について

甘翼作品には長編が多く、またゲームなどはダウンロードする工程などが挟まるため、気軽にはできません。
そんな中で、気軽に甘翼作品について知ってもらえる資料が欲しいと思い、制作しています。

気軽に手に取っていただきたいので、資料は無料で公開します。
紹介する作品は、八月二十三日時点で公開されている三種、『となりのクラスの知らないあの子は天使になったんだ』『愛とはあなたを破壊する魔法』『悪魔の正しい死に方』に加えて、構想中の作品一種を予定しております。

制作手法について

資料はvivliostyleで組版をしています。
資料内にある関係図は別途HTML、CSS、Javascriptで作成しています。Javascriptでは、以下二種のフレームワーク・ライブラリを使用しております。

• Vue
• LeaderLine

VueはHTML要素のコンポーネント化、LeaderLineは矢印の描画に使用しています。
Vueに関しては、ざっくりと「独自HTML要素作成」と捉えていただくこともできます。

Vueの使い方に関して知りたい方は公式ドキュメントをご参照ください。

LeaderLineについて知りたい方は公式ドキュメントをご参照ください。

この規模のプログラムであればVueのようなフレームワークは必要無いのですが、要素の簡略化がしたかったこと、Vueの学習がしたかったことから、Vueを用いて制作しています。
Vueを使えば、以下の量のHTMLが、たった一行の要素に収まってしまうので、大変重宝しております。

<div class="chara" :id="chara_id">
    <div class="thumb">
        <div class="icon">
            <div class="wrapper">
                <img :src="src">
            </div>
        </div>
    </div>
    <div class="description">
        <div class="name">
            <ruby>
                <rb>{{ name }}</rb>
                <rt>{{ ruby }}</rt>
            </ruby>
        </div>
        <ul class="attribute">
            <li class="gender">{{ gender }}</li>
            <li class="age">{{ age }}</li>
            <li class="height">{{ height }}</li>
        </ul>
        <div class="catch">
            {{ catch_copy }}
        </div>
    </div>
</div>

<chara chara_id="kt" src="./img/kt.png" name="九十九" ruby="くとうひさし" gender="男" age="16" height="150" catch_copy="菩薩系不思議ちゃん異生物" ></chara>

今後について

他の作業の片手間に制作を進めようと思います。基本的な枠組みは完成したため、後は素材を用意して組み込むだけです。
もう少しデザインにこだわれたらとも思いますが、とりあえず出すことを目標にしたいです。
引き続きがんばります。