AIで加速してる人が書く記事の”感じ”、あるよね―皆のci-enまとめvol231

2026年2月13日ci-enの制作話

2012年からDL同人エロゲの感想アフィを続けて来た私(111)ですが、昨今のこの業界は百花繚乱、ますます円熟の道を歩みつつある様に感じられる。
万DLを叩き出すいわゆるトップクリエイター、遊ぶ専門のユーザー、あるいはその狭間にぶらぶらと位置する層。

そこで色んなクリエイターのci-enや制作に役立つ情報を横断し、今の位置を跳び越えよう、それが新しい裾野になるし、もしかしたら一攫千金のチャンスもあるかも? という企画なのだ

今のところ購読してる私のci-en一覧

クリエイターズ申請(1000ptもらえる)目当てにDLチャンネルに投稿したので、審査が降りたらここにリンクを貼る:

最近やってること

秋草ぺぺろん先生の新作単行本をDLsiteで買ったら、これがDLsite play(webで見るやつ)専用。
まあ無理もないのであって、

ご利用環境の変化などを鑑みて、[ 専用ビューア ] サービスを終了することとなりました。

という事が既に決定しているからなのだった。
ふざけやがってよー、俺は秋草ぺぺろん先生の「まだエロ始まってない段階の衣装から乳首透けてるもうてるやん」「エロRPGの立ち絵会話やん」みたいな女性キャラをアップにして、がっぷりよっつの解像度で、スクロールして見たいのによー。
DLsite playじゃあズーム機能がねぇんだよ。
どう、これ? エロ漫画見るのにズームが無いとか信じられる?
でもまぁ

より良い閲覧体験をご提供できるよう

とか書いてあるし、分からんよ? その頃になったら新機能で加わったりしてるのかも。

といった類いの甘い期待は今まで何度も奪われて来たわけで、自分でやれればそれが一番手っ取り早いワケで…。

という事でfirefoxのプラグイン、エクステンションって呼ぶんだっけ? を公開しました。

▲111ちゃんビュワー使用時(拡大してるのでスクロールする)
ちなみにこのページはサンプル範囲

▲元のDLsite playの表示(画面にぴったりオンリー)

完全に自分用のつもりだったけど、なんかfirefoxの場合、自分用でもこうやって公開するのが一番手っ取り早いらしいので。

これは何をする物かというと、エロ漫画とか読もうとしてDLsite playを開くと、今開いてるページを拡大し、まぁ拡大してる分とうぜん画面一杯に入らずスクロールバーが出るわけですが、それをキーボードの上下キー(マウスホイールでも可)、あとキーボードの左右キーでページ送りも出来るって次第。

これで舐め回すように1ページ1ページずつ堪能しながら、片手(キーボード)で画像閲覧が捗るのだ……

まぁ使おうと思った奇特な方に書いておくのですが、きっとそれぞれ独自のオナ・スタイル、あれ欲しいこれ欲しいがあるんでしょうが、111の技術力的に対応できないので済まない。
そもそもfirefoxだけかよ、chromeにも対応せえよとかが一番だろうし。
俺かてAIに聞いて、ギリギリ自分に事足りるツールが出来たって次第なんで、諸氏も不満があったら自力で解決していくのだ……。

一応、ソースコードも置いておく(好きに改造して配布していい)↓
初めは画像拡大するだけやとか舐めて掛かったのだが、毎ページごとにHTML,DOMが作られるわけで当然そんな簡単な話じゃなかった。多重なスクロールバー殺しもきつかった。
AIくんはよく頑張ってくれたと思う。9割方がAIの知恵である。

// すでに自前ビューアがあれば二重起動しない
if (window.__dlsiteExtractorLoaded) {
  console.log("[DLsiteExtractor] already loaded, skipping");
} else {
  window.__dlsiteExtractorLoaded = true;
  initDlsiteExtractor();
}

function initDlsiteExtractor() {
  // EPUB ビューア以外のページでは何もしない(雑だけど十分)
  if (!location.href.includes("play.dlsite.com")) return;

  // 自前ビューアのコンテナを作成
  const viewer = document.createElement("div");
  // フォーカス可能にする
  viewer.tabIndex = 0;
  // 初期フォーカス
  viewer.focus();

  viewer.id = "dlsite-custom-viewer";
  Object.assign(viewer.style, {
    position: "fixed",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)",    
    width: "auto",
    maxWidth : "90%" ,
    height: "100%", 
    zIndex: "999999",
    background: "rgba(0,0,0,0.9)",
    color: "#fff",
    overflowY: "auto",
    overflowX: "hidden",
    padding: "8px",
    boxSizing: "border-box",
    fontSize: "12px",
    fontFamily: "sans-serif"
  });

  const info = document.createElement("div");
  info.id = "dlsite-custom-viewer-headter";
  info.textContent = ""; // "Esc で閉じる / 自前ビューア";
  info.style.opacity = "0.7";

  const list = document.createElement("div");
  list.id = "dlsite-custom-viewer-list";

  viewer.appendChild(info);
  viewer.appendChild(list);
  document.documentElement.appendChild(viewer);

  const wrapper = document.createElement("div");
  wrapper.style.margin = "8px 0";

  const cloned = document.createElement("img");
  cloned.id = "img-erea";
  cloned.src = "";
  Object.assign(cloned.style, {
    width: "100%", // 原寸
    height: "auto",
    display: "block"
  });
  wrapper.appendChild(cloned);
  list.appendChild(wrapper);
  // Esc で閉じる
  document.addEventListener("keydown", (e) => {
    if (e.key === "Escape") {
      viewer.remove();
    }
  });

  function writeImageFromElement(img) {
    const src = img.src;
    if (!src || !src.startsWith("blob:")) return;

    const target_erea = document.querySelector("#img-erea");
    target_erea.src = src;
  }

  function takeImg(){
    const nodes = document.querySelectorAll("._0HxvoG_spread");
    let img;
    if(nodes.length == 2){ // 最初と後ろのページの時のみこれだけど、最後のページの場合は多分[1]であるべきなんだよな…
      img = nodes[0].querySelector("._9cuv1q_page");
    }else{
      img = nodes[1].querySelector("._9cuv1q_page");
    }
    if (img.src && img.src.startsWith("blob:")) {
      writeImageFromElement(img);
    }
  }
  function takePageNumber(){
    const ele = document.querySelector(".rc-slider-handle");
    const page_max = ele.getAttribute("aria-valuemax");
    const page_now = ele.getAttribute("aria-valuenow");
    const header = document.querySelector("#dlsite-custom-viewer-headter");
    header.textContent = `Esc で閉じる / 自前ビューア (${page_now} / ${page_max})`;    
  }

  // DOM 変化を監視して新しい blob 画像を拾う
  const observer = new MutationObserver((mutations) => {
    takeImg();
    takePageNumber();
  });

  // 監視開始(iframe 内で動いている前提)
  observer.observe(document.body, {
    childList: true,
    subtree: true
  });

  // 少し待ってから初期スキャン
  setTimeout(function(){
    window.addEventListener("wheel", (e) => {
      e.stopImmediatePropagation(); // 他のリスナーを完全に止める
    }, { capture: true });
    window.addEventListener("keydown", (e) => {
      if (e.key === "ArrowLeft" || e.key === "ArrowRight") { // ページめくったらスクロールバー一番上にする
        viewer.scrollTop = 0;
      } 
      if (e.key === "ArrowUp" || e.key === "ArrowDown") {
        e.stopImmediatePropagation();  // DLsite のリスナーを完全に止める
        e.preventDefault();            // ページ側の動作も止める
        if (e.key === "ArrowUp") {
          viewer.scrollTop -= 50;
        }
        if (e.key === "ArrowDown") {
          viewer.scrollTop += 50;
        }
      }
    }, { capture: true });    
  }, 2000);
}

んでここからが大事なことだが、ネットの片隅のブログでうだうだ言っても待望の新機能は来やしないんだが、意外や、こういう風に自分でやって公開すると、なぜか慌てたようにDLsiteが実装したりするんだよね。
だったら初めからやっとけっちゅうねん。無駄足や、と思うけども。
まぁ企業なんてそんなモンです。

まぁー自分にとってDLsite playは全然機能が足りないんで(スマホだとちゃんと使えるのかね?)
エロ漫画とか、ここで買った商品が全てコレとか余りにキツイので。
これを作った人は、そういう事を何も分かっていないんじゃないか(宮崎駿風)
DLsiteのケツを叩く為に作りました。
これでDLsiteが機能追加に焦るにせよ、全然気にしないにせよ……、今では快適なオナライフを送れております。

ツール・素材系アフィ

そんな訳でこれを見てる人の多くは、明日の有名クリエイターを目指し、制作を続けておられる方でしょう。
DLsiteで扱ってるツールやら素材のリンクを貼っておきますね……↓
[ACTION GAME MAKER]


[RPG MAKER UNITE]


[RPGツクールMZ]


[SRPG Studio]


[ゲームエフェクト集 Vol1 サファイアソフト素材シリーズ]


[シミュレーションRPGツクール素材集]


[ティラノビルダー PRO]


[フリー素材SE Vol.ABCバンドル (MP3+OGG形式で収録)]


[イラストアイコン素材集Vol.1]


[研究所 タイルセット]


[ねくらレトロフューチャーマップチップ素材集]


[ゴージャス×クラシカル UI&装飾素材セット]


[姫騎士リヨナ]


[A.I.VOICE 琴葉茜・葵]


[立ち絵素材集-ファンタジーヒロインR版-]

ci-enの制作話

Posted by 111