I LOVE YOU, 唇噛んだ

ジャンル問わず色々つらつらと

No.908, No.907, No.906, No.905, No.904, No.903, No.9027件]

どうも、去年くらいに家焼肉がしたくて焼肉用グリルを買っていたんですが、しみじみ買ってて良かったと思ったジョーです。こんにちは!
猛烈に「焼肉食べたいな」と思った時、スーパーで値引きされて1,200円くらいになっていた焼肉用牛カルビ&豚カルビのセットを買い、家でのんびりビール開けながら食べ、トータル1,500円くらいで焼肉晩酌が出来るから最高だな…と感じていました。笑



現在は "details "と "summary "タグを使用すればとっても簡単にアコーディオンが設置出来ますよね。
しかも "details "要素のname属性を付ければ、常に1つのアコーディオンしか開かない(開いていた奴は自動的に閉じる)排他的なアコーディオンの実装まで出来ちゃいます。簡単で素晴らしい~!
と言う訳でうちのサイトも最近色々弄った際に色々アコーディオンにしました。

アコーディオンの開閉アニメーションや挙動について更にJavaScriptを使っていたんですが、初めは "summary" 要素をクリックすると、対応する "accordion" 要素が滑らかに開閉するアニメーションだけを使っていました。

で、確認をしていると、新しい要素を開いて元々の開いていた要素を閉じる際、閉じる要素がはちゃめちゃに長文だとさっきまでスクロールで下りた分はそのままになってしまうので「え?私は何を見ていたんだっけ?」とページ内で迷子になってしまいました。
しょうがないかな~とも思ったんですが、やっぱストレス!!!新しくアコーディオンの要素を開いたらそっちの先頭に戻りたい!と思ったのでJavaScriptを更に追加することに。

調べても全然でてこなかったので、ChatGPTに何度も相談しトライ&エラーを重ねてやっと理想的な動きに辿り着いたので、折角なので残しておきます。コーダーさんでも何でもない奴なのでプロが見たらおかしいことがあるかもしれませんが、動いてるからええ!の勢いです(笑)
7/25からずっとやってました…😂絵を描いてても頭の片隅でずっと考えて気になっていたからやっと落ち着いて他の事に集中できる~。


▼やりたいこと
  • 新しいアコーディオンを開いて元々開いていた要素が閉じる時、元々開いていた要素の分上方向にスクロールする。
  • 既に開いていた要素が閉じる際にスクロール位置を調整する時、新しく開いたアコーディオンの先頭の、更に0.5remだけ上の位置に戻る。(余白なくビッタビタに上がるのがちょっと気持ち悪かったので…)
  • 新しいアコーディオンの中身の高さがページ下部の高さを超える場合は、画面(描画領域)の高さから中身の要素の画面(描画領域)に表示されている部分だけの高さを引いた分だけ上にスクロールするようにする。
  • 初めに開いたアコーディオンの場合、スクロール調整は行わない。



HTMLは上に書いてあることから順に読み込んでいきます。JavaScriptは読み込むのに時間がかかるので、HTMLの最下部に設置して下さいね。</body>の手前がベストです。
例えばこのJavaScriptを『accordion.js』という名前で保存し、自サーバーに上げた場合は↑のHTMLのように入れておけばOKです。

ついでに、現状だとname属性を付けて排他的アコーディオンを作っても全モダンブラウザで正常に動かないので、その辺も全部JavaScriptに入ってます。だから全モダンブラウザで排他的アコーディオンになってます。
↑のCodePenの結果で見るとあんまり正しく動いてない気がするんですが、うちのサイトのプロフィールの嗜好ページとかギャラリーのMPのとこに入れてる峰不二子とオトコ達リストページとか見ると理想的に動いているので多分大丈夫なはずです。

尚、私がアホなのでJavaScriptにコメントアウトを入れまくってますが、消して文章短くした方がオススメです。


document.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll(".details").forEach(function (el) {
    const summary = el.querySelector(".summary");
    const accordion = el.querySelector(".accordion");
    
    summary.addEventListener("click", (event) => {
      event.preventDefault();

      const previouslyOpen = document.querySelector(".details[open]");
      const accordionHeight = accordion.offsetHeight;

      if (el.getAttribute("open") !== null) {
        const closingAnim = accordion.animate(closingAnimation(accordion), animTiming);
        closingAnim.onfinish = () => {
          el.removeAttribute("open");
        };
      } else {
        if (!previouslyOpen) {
          el.setAttribute("open", "true");
          const openingAnim = accordion.animate(openingAnimation(accordion), animTiming);
        } else {
          if (previouslyOpen && previouslyOpen !== el) {
            const prevAccordion = previouslyOpen.querySelector(".accordion");
            const closingAnim = prevAccordion.animate(closingAnimation(prevAccordion), animTiming);
            closingAnim.onfinish = () => {
              previouslyOpen.removeAttribute("open");
              adjustScroll(el, accordionHeight);
            };
          } else {
            adjustScroll(el, accordionHeight);
          }
          el.setAttribute("open", "true");
          const openingAnim = accordion.animate(openingAnimation(accordion), animTiming);
        }
      }
    });
  });
});

const animTiming = {
  duration: 300,
  easing: "ease-in-out",
};

const closingAnimation = (accordion) => [
  {
    height: accordion.offsetHeight + "px",
    opacity: 1,
  },
  {
    height: 0,
    opacity: 0,
  },
];

const openingAnimation = (accordion) => [
  {
    height: 0,
    opacity: 0,
  },
  {
    height: accordion.offsetHeight + "px",
    opacity: 1,
  },
];

function adjustScroll(element, accordionHeight) {
  const summaryTop = element.querySelector(".summary").getBoundingClientRect().top + window.scrollY;
  const halfRem = parseFloat(getComputedStyle(document.documentElement).fontSize) * 0.5;
  const newScrollPosition = summaryTop - halfRem;
  const viewportHeight = window.innerHeight;

  if (accordionHeight + newScrollPosition > document.body.scrollHeight) {
    window.scrollTo({
      top: document.body.scrollHeight - viewportHeight,
      behavior: 'smooth'
    });
  } else {
    window.scrollTo({
      top: newScrollPosition,
      behavior: 'smooth'
    });
  }
}
畳む


こんな感じでJavaScript使って、てがろぐの続きを読むを開いて迷子になる問題も対処できないかな~。まぁやり始めると原稿スケジュール狂いそうなので、考えるとしてもスパーク終わってから考えるようにします。笑
8月6日23時59分まで週コロの漫画全話無料になってる…?!
夏休みだから何かあると思ってました!!!!!
カシバトルとウソツキ!ゴクオーくんを宜しくお願いします!(定期)

カシバは週刊連載『KASHI BATTLE』になってからの新12話からが特に少年漫画として面白いので読んで下さい…私は圧倒的ヤオギンガールですが、多分レモネドさんが刺さる人は多いと思う…🍋


そしていつでも貼っておくこのポスト🌶️

20240729010204-admin.jpg
凭れ掛かり



どうも、バリウム検査の何がしんどいのか分からずにいたんですが、先日会社の健康診断で初めて受けて「もう二度としません」って言ってた後輩が凄く分かりやすく教えてくれて漸く世の人々がどう苦手なのかを理解したジョーです。こんばんは!
私、バリウム検査に対して何の苦手意識もなく、血液検査や視力検査と同じ流れで普通に毎年受けてたんですよ。でも受けた人が悉く「気持ち悪い」「二度と受けない」って言うので「何でそんなに嫌なんだろう?グルグルされるから?」ってずっと分からずにいたんですね。そして今年初めて受けた後輩も全く同じ反応だったので「私、ゲップ我慢するアトラクションみたいで毎年楽しんで受けてるんだけど何がそんなに嫌なの?皆なんでそうなるの?」って聞いたら「ゲロを吐きそうになる直前に近い状態になるのに、それを我慢しなきゃいけない状態でグルグル回されるから気持ちが悪いんですよ」と、とても分かりやすく感想を教えてくれて、成程ー!!そりゃ気持ち悪いし皆嫌ってなる訳だ!!と理解できました。まぁ私自身は全くその気持ち悪さはないんですけど(笑)
自分の中にない感情や価値観みたいな理解できないものはこうして教えて貰うことで視野が広がるので、理解できないことに出くわしたら1回話して教えて欲しいですね。会話って大事。



8月から原稿始めようと思ってるんですが、その前に描きたい絵が2枚あったんですけど、多分1枚は延期しないといつも通り締切に追われるぞ…!!と思ってるので今描いているイラストと、あとウチカニ2に申し込むためにカット用の柿ピーのイラスト描いたらカゲタメ本に着手しようと思っています。
が、それとは別にカゲタメ絵を描きたい!と思ってカッとなって描きました。イチャイチャさせたかったんですが、久しぶりに2人とも顔描きたいなと思った結果こうなりました。イチャつかせようとするとどっちかの顔が横顔か見えなくなりがちなので…!まぁこれで2人とも正面向いてる絵を描けたのでイチャつかせた落描きができるな。笑




▼拍手レスしました
20240715114633-admin.jpg
十王荘で朝から遭遇出来るかもしれない…と思いながら描いたタメイキさん。笑



どうも、返信ページもてがろぐにしたり古いまんまだったテキストページのCSSをギャラリーと揃えたりちょこちょこサイト弄れてて幸せなジョーです。こんにちは!
2019年に『とりあえずレスポンシブ対応』にしてからずっと『仮』状態なんですけど、その『仮』を弄り続けている…!
いや、オフラインページのイベント参加情報や新刊情報や寄稿情報がPCからの閲覧を想定した表のままなので、そことかちゃんとしよう…と思ってるんですが、その表部分を弄ればとりあえず完成するな、と今書きながら気付きました。いよいよ触るか。笑
そこ弄り終わればとりあえず『仮』状態は脱するんですが、ハンバーガーメニューにしたいとかデザインがっつり弄りたいとかあるので、そういうのは次回『改装』として取り組みますかね…。

ちなみに気になっていると言えば、web拍手も自分でどうにか出来ないかな~と思っています。SSL通信じゃないから、見る人によっては表示されなくなるとかそういう問題出てきそうだな~と思っていまして。
web拍手のCGIスクリプトをダウンロードして自サーバーに置くという方法も試みてみたんですが、管理画面が何故か古いバージョンのままだったので、であれば今のアップデートされた後の管理画面を使える無料サービスのままで良いか…となりました。公式も全く動いていないのかと思っていたんですが、去年サーバーメンテナンスも行われていらしたので放置していた訳ではないんだ!と思いましたし。

現在ある類似サービスも色々と見たんですが、お礼画面が10種類ランダムに出るって言うのが絶対に欲しいんですよね…!!!現在お礼1種類しか置いてない奴が何言ってんだ?って話ですが、これが欲しいんだよ…!!!!でもweb拍手以外にない!!!!
とりあえずはお礼画面をカスタマイズしてレイアウトもレスポンシブにしているのでまぁいいか~という感じでいるんですが、先述のSSL通信じゃない問題はある訳です。
HTMLページにJavaScriptでどうにかページ作れそうな気はしてるんですよね。
ランダムリンクとsetTimeoutで1時間に10回までしか押せない、みたいな事は出来そう~と思っています。コメント部分はフォームメーラー使って、アクセス解析埋め込めば拍手の回数みたいなのはアクセス解析から見れる…みたいな感じで。まぁこれも追々試してみたいです。
同人誌同様、無いなら作るしかないからな(笑)



イベント終わってから本当に絵を描いてなかったのでボチボチ机に向かって座るというところからせねばな…と思っていたらスケッチブックに描きかけのタメイキさんがいたので、リハビリにこれを完成させるところから始めるか…と思って仕上げたのが↑になります。
タメイキさんはクールで格好良くて綺麗で深夜アニメのお姉さん枠の色気が無いとダメなんだよな、と原作と𠮷もと先生の話を読んで改めて思ったのでその気持ちを自分に再確認させるために描いたものでした。笑
あと改めてちゃんとタメイキさんの髪の長さについて確認しました。おへその辺りまでの長さでしたね!いつもニュアンスで長さ描きがちだからな。

これを描きつつ「十王荘にいる時、ラフで布薄めな部屋着のタメイキさんと遭遇出来る可能性はある」と思った訳ですが(笑)、マダムにめちゃめちゃ注意されてそうだな。「若い男性たちと一つ屋根の下にいるのにハレンチザマス!!!」みたいな。でも「え…めんど…」しか思わなさそうだな。
もしくはネイターから「お前な…地獄ならまだしも今のお前は人間の女なんだよ。アホな男に簡単に負けちまうんだぞ」って注意されてほしい。私はネイターのことは面倒見の良い兄貴だと思っています…!
人間の女の弱さと煩わしさにストレスを感じるタメイキさん、それはそれでちゃんと天罰下ってるな…って感じもあるし良いな。
あと夜勤明けのリョクがこのタメイキさんとバッタリ遭遇したらしみじみ「あ~家帰った瞬間にこんな美人がいるなら人間も悪くないね♡」つってめっちゃ睨まれて欲しい。笑
20240708002512-admin.jpg
そういえば姫野がアキ「君」って呼ぶときとアキ「くん」って呼ぶ時何か気持ちに違いはあるのか?って話を後書きやペーパーでしようと思ってすっかり忘れていました



とっっっっても遅くなりましたがジュンブラお疲れ様でした!!!ジョーです。
毎度のことながらイベント直前にガッと作業詰め込んで一気に燃え尽きて終わったあと暫く机にじっと座って絵を描く以外のことしかしなくなります。今回も1週間くらいはそんな感じでした😂
計画的にちゃんと描けばそんなことはないんですかね。まぁ性格的に縁がないだろうな。笑



自分で言うのもなんですが、友達が主催だからって原作買って読んでアニメ見て本出したのは我ながらフッ軽でしたね~~~!!!
でも勘違いして頂きたくないのは、飽く迄も私は常に“自分ファースト”なのでちゃんと自分の心が動いて興味が無ければこんなことはしません。
チェンソーマンは本ッッ当に色んな人から「絶対絵柄に合う」とススメられてきたのでタイミングがあれば買おうという気持ちでしたし、アメトーークのチェンソーマン芸人回をたまたま見ていて「絶対私この2人好きやんけ…」と思っていたアキ姫だったし、原作買って読んで「アキ姫で描きたい漫画がある!!本出そう!!」と思えたので、こういう色んな気持ちが重なって参加に至りました。
いや~~プチオンリーって言うのはこういう普段描いてない勢も描く機会を頂けるから良いですね。「プチがある?!参加したい!!○○○の本を出そう!!」ってなりますもん。
普段3~4サークルさんくらいと言われているアキ姫サークルさんがあんなに集結していたのも素晴らしかったですね。プチを盛り上げることにお力添え出来て良かった~!

企画もはちゃめちゃに楽しかったですし、景品やチケット・カードなどのあらゆるデザインからアキ姫の要素や2人へ想いを馳せられるモノになっていて本当に素敵でした。参加してみるのも勿論、見ているだけでも楽しかった~!!素晴らしい!
チケットラリーのチケットの図柄が、アキ君と姫野が2人で見たかもしれない1994~1996年日本公開の映画のパロディチケットになってて本当に凄かったし、映画を愛するちむさんならではで、さっすがァ!!と唸りました。是非見て下さい。

この時代の映画は面白いの多いから最高ですよね…QTファンなので『パルプ・フィクション』があって喜びました(無事にサークルさん回って現物もゲットできた)。
ちなみにうちのサークルは『SPEED』柄を配ってました。『SPEED』大好きなので嬉しかった~!!これきっかけに久しぶりに観たくなりました。


差し入れも有難うございました…!!
20240708010609-admin.jpg
嘘獄以外でもシガレットの駄菓子が差し入れの主流のジャンルってあるんだなって言うのが面白い発見でしたね(笑)
うちはそんな頂いてないんですが、周りのサークルさん見たらココアシガレットがいっぱい置かれてて「そうか…アキ君と姫野と言えばタバコだもんなぁ」とハッとさせられました。
ココアシガレットの弟分「ミニビタCシガレット」が発売されていたということも今回差し入れに頂いたことで知れました。個人的にココア味のラムネは結構不思議だ…とずっと感じていたので、ミニビタC味のラムネなの凄く嬉しい~!


そして気付きましたか…?!

20240708010618-admin.jpg
malie先生が!!!!ゴク天+ネコカラスちゃんを!!!!!描いてくれました!!!!!
ちゃんとブログ載せて良い許可は取っています。笑
見て下さい!!!!!可愛い!!!!!余りにも可愛い!!!!!沖神のスペースでゴク天を描いてくれたの…上手過ぎるし本当に有難う…その場でも何回も言ったけど何回も言う…有難う😭💓
そしてカゲタメもヤオギンさんもいつでもいつまでも待っています。うふ。


イベントはやっぱ活力貰えるから良い~~~~!!!お立ち寄り下さった皆様本当に有難うございました!




▼拍手レスしました
20240629022332-admin.jpg
【Honey Zipee】のスペースは【西2ホール 西ニ28b】です。「JUNE BRIDE FES 2024」内で行われるチェンソーマンのアキ姫アキプチ「夜の満ち欠け」に参加しています!
当日机に乗っている予定のものは以下のとおりです。

▼新刊予定
『夜よ、酔わせてくれ』
表紙:FCジェット印刷、本文:デジタル印刷/A5×32P/¥500
Jozy個人誌。アキ×姫野です。
しょっぱかったり甘かったりする小話3本です。

ペーパーも多分ある…はずです…(これから)
QRコードカード企画のカードも設置させて頂く予定ですので是非取りに来てください~!

12時くらいに買い物行こうかなぁと考えています。

ちなみに今回プチオンリーなので新刊のみ持って行こうと思いますが、もし他ジャンルの本でも在庫あるやつで欲しいんだが…というものがあれば持って行くので拍手などからご連絡下さい。
当日は晴れですね!良かった~!どうぞ宜しくお願いいたします。
どうも、絶賛ペン入れ中のジョーです。こんばんは!
毎度のことながら描きながら入れたいネタが出てきたのでグムム…となっています。とりあえず今描いてる分終わりが見えたら捻じ込む、描く!
今のままだと28ページだからこのままでもまぁいいかって気はするんですが、厚く出来るんだったらちょっとでも厚くしてぇ…!!そして今思い付いてる話を入れた方が話のまとまりとして良くなるから入れたい。頑張ります。土曜の午前までになんとかすっぞ!!!!!(締切)
自分に対して「てめー絶対土曜のAMで入稿しろよ」って脅すために日曜朝一で美容室の予約入れたので何としてでも描きます。笑



『ウソツキ!ゴクオーくん』と『KASHI BATTLE(カシバトル)』がなんと6月19日(水) 23時59分まで全話無料で読めるそうです。
…えッッ??!!明々後日じゃん??!!
19日って来週くらいだと思ってた…が、締切迫ってるんだからそらそーか。
週コロでの再放送による嘘獄の真最終回を迎えたことでトレンド入りしたそうでおめでとうございます!
その影響なのかは謎ですが、金曜からうちの嘘獄本がちょこっと売れてます…感謝…!今の所嘘獄はカゲタメ本しか在庫無いので、兎に角カゲスキとタメイキの組み合わせに対して「アリかもじゃん?」「嫌悪感は無い」という方がいらっしゃるんだな…と有難く噛みしめています。笑


正直どちらも全話読んで下さい…と思っているんですが個人的に騒ぎたいところを厳選して記載しておきます。


▼ウソツキ!ゴクオーくん
【第48話】ttps://www.corocoro.jp/episode/316190247118689478
私が嘘獄二次をやる上でのキッカケというかバイブルみたいな話。そうです、地獄幹部がまるっと天罰受けて人間にさせられている期間の、人間版地獄幹部を味わえる貴重な回です。魔獣ケルベロスのネコカラスちゃんや岩石魔人のゴーレムも余す事なく人間化してるっていう、本当にありがてぇ期間なんですわ…!
皆1つ屋根の下で生活してるの夢しかない。バトラーとタメイキさんが一緒の喫茶店でバイトしていることについては1個ネタがあるのでその内描きたい~~~!!!
あとカゲスキの部屋着がスウェットなんだな、っていうのはこの回で知れて最高です。あんな小さいコマなのに、7巻のプロフィールで急に出されたガタイの良い体があのスウェットの下にはあるんだなって分かるくらいちゃんと体型逆三角形なのを感じられて非常に良い。
あと黒髪で主夫やってるレツくんが最高に好きです♡
この話はシンプルに本筋のネコカラスちゃんが可愛いし人間にされている期間だからこその行動取ってて可愛すぎて涙出る…そしてガマブクロウめっちゃギャル。笑

【第69話】ttps://www.corocoro.jp/episode/4856001361342094269
カゲスキ回ですが終始「カゲスキ、お前そのポジションでいいのか?!」とツッコミたくなる話。笑
この話にはカゲタメの霞みたいな成分が漂っていてずっと吸いながら生きています♡カゲスキが出たすぐ後にタメイキさん出るじゃん?さっきまで一緒におったんか??(霞からこういう妄想をしてはずっと元気でいられる)



▼KASHI BATTLE
【新20話】ttps://www.corocoro.jp/episode/4856001361250040200
ここから新23話までの私の令和最推しの男の活躍をご覧ください………🌶️🌶️🌶️

【新51話】ttps://www.corocoro.jp/episode/2550689798294554007
ここから新53話までぽた子さんに激重感情を抱く二湖鮴さんとの最高のバトルの展開であったり、二湖鮴さんとマッチャスキーの師弟愛がはちゃめちゃに良かったり、柿ピー回であったり、良いんですわ♡

Search this site

Archives