赤穂屋本館

朝に設置したWPULikeの挙動を無理矢理なんとかしました。
以下がっつりCSSとJavaScriptの話です
■WPULikeの挙動
(No Limitの場合)

🔔きたよ
 :wp_ulike_is_not_liked
 ↓
 ↓クリック
 ↓
🔄ローディング
 :wp_ulike_is_loading
 ↓
🎵きたよ済み
 :wp_ulike_is_not_liked
 ↓
 ↓いいねもう終わってるのに
 ↓なぜかクリックできる
 ↓
🎵きたよ済み
 :wp_ulike_is_already_liked
   +
  wp_ulike_click_is_disabled

という順番にクラス名が変わる。


ログの形式がNo Limitの場合、いいねを押した後のいいね済みボタンを何故かもう一度クリックできる仕様になっているので、JavaScriptでspanの内容を監視させ、「🎵きたよ済み」になったらカーソルをデフォルトにしたり背景をグレーにさせた。

なぜわざわざspanの内容を監視させているのかというと、『buttonのクラスがwp_ulike_is_not_liked【きたよ押す前のクラス】なのにspanの内容が「🎵きたよ済み」である』という状況が何故か確認できたから。


『buttonのクラスがwp_ulike_is_not_liked【きたよ押す前のクラス】なのにspanの内容が「🎵きたよ済み」である』

こいつのせいで、きたよ押したときのアニメーションの条件も『spanの内容が「🔔きたよ」である』にしてる。なんなんだ。


加えてローディング用のクラス:wp_ulike_is_loadingのvisibilityをinitialにするとローディングアニメーションが発生しないので、ローディングが起こることによるもたつきも無くなった。


ログの形式をCookieにしたらいいじゃんと言われそうだけど、一回Cookieにして運用してたとき連打が通ってるっぽいログ(Cookie拒否?)があったのでNo Limitがいいなと思っている。


書いてて自分も意味が分からないので、構築メモ書くときはもっと分かりやすく書きたい。
あとWPULikeの都合上、実際の環境での検証ができていないというか、ブラウザ上でコードを書き換えてから動かしてばかりだったので、実際ちゃんと動いてるのか分からん。▲畳む


JavaScriptのこと何もわからないので今回もAIにコードを書いてもらったけど、コードをぼ~っと見てるとなんとなく輪郭が見えてきたような感じがする。
AIに書いてもらうとコメントアウト付きで返ってくるから、どこで何をしているのかが分かるのがいいかもしれない。

海外ドラマとかで外国語を習得する時ってこんな感じなのかなあ……と思いながら書いてもらったコードをコピペしている。


新しいボタンでもきたよ押してくださりありがとうございます!🍬
いいねボタン・改の運用がうまくいかないので🔔きたよボタンをWPULikeベースに戻してみました。
まだあんまり検証とか動作確認ができてないので変な動きももしかしたらあるかもですが、頑張って調整したので恐らく最低限は動いてくれるのではないでしょうか。
あの押したときのエフェクトも実装してます。多分。自分の環境では動作したから大丈夫なはず。


いつもきたよ押してくださってありがとうございます!
自分のサイトにはアクセスカウンターを設置していないので、WPULikeで上手くいったらそのまま運用して、きたよの数がどんどん増えていくところを見ていけたらいいなぁ……と思っています。
トップのきたよボタン、実は夜0時になってもリセットされなくて、いいねされた記録を集積しているファイルを消さないと上手く動かなくなる。
今は自分が検証がてら手動で消しているけど、もちろんそんなことはしてられないし、データも毎日消えていくのでどうにかしたい……。

そして夜0時になったときの挙動だけがおかしいので、毎日1回しか検証のタイミングが無いのも辛い。
めっちゃサイトいじったし、書きたいこともいっぱいあるのに文章書く気力が全然ねぇぜ!
過去の投稿を編集して、これをしたあれをしたと書いています。

トップページのきたよボタン 最初は紙吹雪が舞うようにしましたがハートが散るようにしました!
かなり可愛いです♡

本当はもっとカスタマイズしたかったけどコードが動かなくて断念🛌


きたよ、Waveありがとうございます🍬💜
サイトのトップページが数時間404だったんですが、直しました!
その間にいらっしゃった皆様すみません🙇ご迷惑をお掛けしました。

📝
✅サイトの絵文字でTwemojiを読み込むようにする。
導入したけど、見慣れた絵文字のほうが良くてすぐ外した……。

✅きたよボタンを押したときにTwitterのいいねみたいなエフェクトを出すようにしたい。
【追記】できた!party.js を使用しました。
きたよボタンを押すと紙吹雪が舞います。押した後は舞わないようにするのが大変でした。
JavaScriptのことは全く分からないのでchatGPTに頑張ってもらいました。

✅バナーをもっとオシャレにしたい……。
【追記】バナー変更しました!
うなりながらデザインした……。
📝サイトに実装したいもの

✅きたよボタンをWPUlikeからいいねボタン改 に変えたい。
今のきたよボタンでもいいけど、押してすぐグレーに変わらない(もう一度押してもう押せない判定を出さないとグレーにならない)のと、ページ移動してもグレーの状態を保持してほしい。
【追記】できた!Wordpressでも導入簡単で助かった~。

✅別館のパスワード認証をBASICからJavascriptを使ったものに変えたい。
BASIC認証ってどうしても無骨になりがちなので、サイトの中にフォームを設置したい。というか当初それを目指していたけど検索しても上手く見つけられず、泣く泣くBASIC認証を設置した。
昨日個人サイトを巡っている最中にてくてく 様にてパスワード認証のJavascriptを見つけ、これを使えばできそうな気がしたので挑戦したい。
(BASIC認証も設置するのに時間かかったけど😭)
【追記】できた!てくてく 様のプログラムをお借りしました。


ただ、どちらもサイト本体がWordpress製なのが足を引っ張って時間がかかりそうだな……と思っている。
Wordpressに他のJavascriptやPHPを設置するのはまだやったことがないから……。

✅Wordpress側のページネーションのスタイルをてがろぐに合わせる。
これは頑張ればいける。頑張れ
【追記】頑張ったのでできました。ついでに現在のページがどこかも分かりやすくしました。


昨日、ページの一番下に前のページに戻るボタンを実装しました。
自分で自分のイラストページを見てた時にあったら便利だなぁと思って追加しました。

あと、最近てがろぐの楽しさに気付いてきたので(ようやく?)てがWA! さんに登録しました。
他の方の日記見るの好きだから……。当サイトも日記・つぶやきだけの閲覧大歓迎! に参加しておりますので、思い出したときにてがろぐだけでも覗いていただけると嬉しいです。


きたよ、Waveありがとうございます👋🍭
てがろぐだけに実装できてるこの右下のメニューを、てがろぐ以外のWordPress部分にも実装させようと思ったけど、PHPが分からなさすぎて諦めることにした😅

また帰ったら調整しよう。
すいません 今てがろぐのメニュー壊れてますが……気持ち的にはすぐ直すつもりです。
【追記】
うお〜〜〜っ できたできた!!
てがろぐのみ右下のメニューの🎨イラストと📚小説の折り畳みができるようになりました!
今日一日、別館のbasic認証とこのメニューのカスタムしてたら終わったな……😄
でもやりたいことができてよかった!
イベントが終わったらWordPressの方も頑張りたいです。phpいじらなあかん……。


タキオンも赤松さんも、行動してから自分の感情に気付くタイプで
デジタルも最原くんも、自分の感情に従って行動するタイプだと気付いた。

基本的にはタキオン/赤松さんからグイグイ引っ張っていくんだけど、あるときデジタル/最原くんからも行動を起こされてタキオン/赤松さんが照れる……みたいなのが好きなんだろうな〜〜!!気付いちゃった!!


Waveありがとうございます!
今日は土曜日だからなのかもしれないですが、Waveをいつもより多くいただけて嬉しいです🙇️
20230909173541-admin.png
メニューの🎨イラストと📚小説を折り畳めるようにしたくて頑張っていますがなかなかうまいこと行きません。

20230909173715-admin.png
ぐぬぬ……


別館の管理をてがろぐ一本にしました。
20230909173905-admin.png
デザインを可愛く出来て満足です。


きたよ、Wave、返信不要のメッセージありがとうございます🙏
てがろぐを改修しました。

📝改修内容
・ハンバーガーメニューの判定がかなりシビアだったので当たり判定の範囲を広げました
・メニューを開くまでにタイムラグがあったので早く開くようにしました
・ページの上の方と下の方を整えました(下の方はまだ改善の余地あり……。)

◎after要素を使った。最初反映されなくて困った
◎fastclick.jsを入れた。本当にクリックが早くなってびっくりした。EASELはどれでこの速度を再現してるんだろう?▲畳む


改修しながら思ったけど、別館をWordPressでの管理じゃなくて一括てがろぐでの管理に切り替えようかなぁ……コンテンツも更新頻度も多くないので……。
そうするとまたやることが増えそうなので、また今度。

☔レインコード/ネタバレ、作りたい本
ヨミー・スワロ・ジルチ本作りたくなってきた。
保安部たちしか出てこないので、倫理観終わってるギャグ4コマが描きたい。
あんまりネタが思いつかないので4ページの折本とかがちょうどいいな。▲畳む



きたよありがとうございます🍭
1日1回までと書いてるにも関わらずたくさん押せるようになっていたみたいです。とりあえず設定を変更してみました。
うまく行ってるかは分からないです。

あと きたよを頂いた時間を見たら思いっきりてがろぐの改装をしてた時間で、崩れまくったてがろぐをお見せしてないか心配になりました。
グチャグチャのときに来られたらすみません……。