JekyllでLive2Dを実装

From: https://s-w-k.top/2019/07/29/2019-07-29-Build-live2d/

Live2D

左下のこの子をどうやって生成したか？この記事で説明する．

2次元のキャラクターに命を吹き込むこの偉大なるプロジェクトはLive2D．しかし，プロジェクトはHexo向けで，作者はJekyllでの実装方法を提供していない，どうしよう？！

Jekyllで実装

私はlazyな人なので，原理を究明してJekyllにコンパイルすることは〜，さすがにしない！ここで「バカ」な方法で解決する．

作者がHexoでの実装方法を提供しているから，いっそうHexoでキャラクターをコンパイルして，キャラクターのコードを直接Jekyllに移植すればいいじゃん？JekyllでもHexoでも静的サイトジェネレータでしょう．最終的に，コンパイルの結果が出る．その結果から，キャラクターのコードを探し出すのは今回の要務．

Hexoをインストール

npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo s

はい！Hexoのウェブページが出たでしょう．オーケー，問題なし，いったんserverを閉じて，次に行こう．

Live2Dをインストール

npm install --save hexo-helper-live2d

次に，以下のコードをHexoで生成したブログの_config.xmlに追加する：

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    use: shizuku
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true

ひとまず，フレームワークは構築できた．Live2Dのファイルをダンロードする必要がある．

git cloneした後，live2d-widget-model-shizuku下のassetsにある内容（assets自体を含まない）を，すべてHexoのblogフォルダ下のlive2d_models/shizukuフォルダ（新規に作って）にコピーする．ファイルのツリーはこうなる：

• blog
  • live2d_models
    • shizuku
      • moc, mtn, shizuku.model.json...

コードを抽出

もう一回hexo sを実行して，shizukuちゃんでたでしょう．

問題なければ，hexo gでブログをコンパイルする．生成されたpublicの中に，live2dwフォルダがあるはず．その後，public下のindex.htmlを開いて，一番したのこの行を見つける：

<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/shizuku.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"log":false});</script>

おめでとう！！！shizukuちゃんの本体をつかめた．最後に，live2dwフォルダをJekyllで生成したブログのフォルダに移動，shizukuちゃんの本体を/_includes/_partials/footer.htmlにコピーする．

終わり〜〜〜！