cocoen は2枚の画像をスライダーで比較するできるようにするJavaScriptライブラリ。

早い話がこれ↓だよこれ↓。 スマホの人は画面を横向きにすると操作しやすいと思う。

こういう同じ構図だけどフォーカスが違う写真とか、 RAW現像のbefore/after的な表示がやりたかったのだ❗ これでできるようになったぞ❗

以下、やり方などは記事続きから〜。

手順

landscape themeが前提なので、それ以外のを使ってる人は適宜読み替えてね。

1. cocoen.min.css の最新をDLして、↓に配置。
   • themes/landscape/source/css/cocoen/cocoen.min.css
2. cocoen.min.js の最新をDLして、↓に配置。
   • themes/landscape/source/css/js/cocoen/cocoen.min.js

続き。head.ejsの</head>の直前に↓を追加。 これでcssが全ページでlinkされるようになる。

<!-- support cocoen.js: <https://github.com/koenoe/cocoen> -->
<%- css('css/cocoen/cocoen.min') %>

after-footer.ejsの<%- js('js/script') %>の直前に↓を追加。 <%- js('js/script') %>よりあとに追加すると動作しないので注意。

<!-- support cocoen.js: <https://github.com/koenoe/cocoen> -->
<!-- You must place `cocoen.min.js` before `script.js` -->
<%- js('js/cocoen/cocoen.min') %>

landscape/source/js/script.jsでjQueryのfayncyboxがcocoen用の画像を除外するようにする。 後でcocoen用の画像はcocoen classを持った<div>で囲まれるのが前提。

  // Caption
  $('.article-entry').each(function(i){
    $(this).find('img').each(function(){
      if ($(this).parent().hasClass('fancybox')) return;

      // ↓これを追加。
      if ($(this).parent().hasClass('cocoen')) {
        return;
      }

これで準備完了。 あとは記事本編中で↓のように指定すれば良い。

markdownほげほげ。

<div class="cocoen">
  <img src="./images/figures/prisma_klangfest_chloe_35.webp" alt="美遊ちゃんフォーカス">
  <img src="./images/figures/prisma_klangfest_chloe_36.webp" alt="クロエちゃんフォーカス">
</div>

markdownふがふが。

解説と蛇足

webpは使える?

使える。 というより、気にしてなさそう。 <img> tagが使えるものならなんでもいけるんじゃなかろうか。

cocoenのホスティングはcdnを使わないのか?

使わない。4[KB]しかないので自前でホスティングしちゃったほうが早い。 最近、googleのspeedテストで「外部リソースのloadがなげえよ💢」って怒られてるのもある。

cocoenはnpmでバージョン管理しないの?

やる方法がわからなかった。

hexo generateするときにnode_modules以下のファイルを拾ってくる方法が分からん。 webpackとか使ってるならできるのかも。

あと、npm scriptでコピーしても良かったが、あんまりスマートに思えなかった。

hexoのtagプラグイン化はしないの

やれたらやる〜(やらない)。

tagプラグイン化って、markdownに↓みたいなのを書くと、いい感じにhtml作ってくれるやつね。

{% cocoen miyu.webp chloe.webp %}

実は、 cocoenじゃなくjQueryのtwentytwentyで実現してる人は既にいる ( demoはご本人様のブログ記事 )。 この方の方法を真似すればできそう。