マンガを1話だけ完成させてみた

漫画を1話だけ完成させてみました。ページ数的には、1話くらいの分量ですね。物語的にも一区切り付きました。絵を書くのって大変で、セリフとか背景とか時間がかかります。週間連載の漫画家は、バケモンじゃないかと思いました。

漫画のページはvue.jsで構築しています。次のページボタンと画像URLのリンクを生成。

ここから技術的な話

昔は、gitbookを使ってみたことがあったのですが、シンプルじゃないと思ったので、vueで作りました。

vue 2.x + webpack 4.x 系でenvを使うのにハマったのでメモ。

結論としてdotenv-webpackを使えばいけました。

$ echo "page=4" >> .env
$ yarn add dotenv-webpack

webpack.config.js

const Dotenv = require('dotenv-webpack');

module.exports = {
  plugins: [
    new Dotenv('./.env')
    ]
}

src/main.js

var app = new Vue({
  data: {
    products: [...Array(Number(process.env.page)).keys()]
  }
})

package.json

"scripts": {
  "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
}

以上、漫画の宣伝をqiitaでもやってみたという話でした。