[ 投稿リスト / 投稿リストスライダー / タブ /スライダー ] 編集画面の環境がiframeであるかないか関わらずエラーが出たり機能が安定して動作するよう修正

[mtdkei]

チケットへのリンク / 変更の理由（元のissueがあればリンクを貼り付ければOK）

#2457

どういう変更をしたか？

• 原因: iframe を使用する環境でしか動作しない問題が発生していました。主な原因は iframeでない場合の DOM 取得処理が不足していたためです。
• 対策: iframe の有無を動的に判定し、iframe.contentWindow.document または通常の document を適切に使用するロジックを実装しました。また、MutationObserver の監視対象も iframe 環境か否かをそれぞれ考慮するよう改善しました。これにより、iframe 環境の有無に関わらずでも安定してスライダーとタブ切り替え機能が動作するようになりました。

対象ブロック

• 投稿リスト
• 投稿リストスライダー
• タブ
• スライダー

スクリーンショットまたは動画

変更前 Before

投稿リスト

投稿リストスライダー

タブ

スライダー

変更後 After

実装者の確認事項

実装者はレビュワーに回す前に以下の事を確認してチェックをつけてください。

• 複数の意図の変更 （ 機能の不具合修正 + 別の機能追加など ） を含んでいないか？
• Files changed (変更ファイル)の内容は目視で確認したか？
• readme.txt に変更内容は書いたか？
• readme.txt に記載の変更内容はエンドユーザーが見て変更の概要がわかるように書かれているか？
• 本当にちゃんと確認をしたか？

プログラムの変更の場合

• 書けそうなテストは書いたか？ → editor上のみのためスキップ

変更内容について何を確認したか、どういう方法で確認をしたかなど

1. VKBLOCKS、VKBlocks Layoutのブロックを全て固定ページに配置し保存。
2. git checkout 8454579をし、inc/vk-blocks/build/blocks/alert/block.jsonで"apiVersion": 3の数字を2にしてnpm run buildを実行。
3. 1の固定ページを開くと該当のブロックが「変更前 Before」の状態になっていることを確認。
4. git checkout fix/apiVersion3/iframeとnpm run buildを実行。
5. 1の固定ページを開くと該当のブロックが「変更後 After」の状態になっていることを確認。フロントエンドでの状態が正常であることを確認。
6. 2で"apiVersion": 2にしていた数字を3にしてnpm run buildを実行。
7. 1の固定ページを開くと該当のブロックが「変更後 After」の状態になっていることを確認。フロントエンドでの状態が正常であることを確認。

レビュワーに回す前の確認事項

• 実装者はこのテンプレートのチェック項目をちゃんと確認してチェックしたか？

レビュワー確認方法・確認内容など

1. 以下のブロックを固定ページに配置し保存。

• 投稿リスト: そのまま。
• 投稿リストスライダー: そのまま。
• タブ: タブ01の中身に適当なテキストを入れる。
• スライダー: スライダーアイテムを一つ増やし、どちらかのスライダーアイテムの中に適当なテキストを入れ、「プレビュー」モードに変更。

2. git checkout 8454579をし、inc/vk-blocks/build/blocks/alert/block.jsonで"apiVersion": 3の数字を2にしてnpm run buildを実行してください。
3. 1の固定ページを開くと該当のブロックが「変更前 Before」の状態になっていることをクリックやブロックを動かして確認してください。
4. git checkout fix/apiVersion3/iframeとnpm run buildを実行してください。
5. 1の固定ページを開くと該当のブロックが「変更後 After」の状態になっていることをクリックやブロックを動かして確認してください。フロントエンドでの状態が正常であることも確認してください。
6. 2で"apiVersion": 2にしていた数字を3にしてnpm run buildを実行してください。
7. 1の固定ページを開くと該当のブロックが「変更後 After」の状態になっていることをクリックやブロックを動かして確認してください。フロントエンドでの状態が正常であることも確認してください。

その他気になることがあれば適宜ご確認ください。

---

レビュワー向け

レビュワーが確認して変更が反映されていない場合の確認事項

レビューしてみて意図した動作をしない場合は再度ビルドするなど以下の項目を確認してください。

• プルしたか？
• ビルドしたか？
• ビルドしたディレクトリは正しいか（別の開発環境のディレクトリを見ていないか）？
• npm install したか？
• composer install したか？
• キャッシュをクリアして確認したか？

[goutetsuguma]

@mtdkei

git checkout 8454579をし、inc/vk-blocks/build/blocks/alert/block.jsonで"apiVersion": 3の数字を2にしてnpm run buildを実行。
1の固定ページを開くと該当のブロックが「変更前 Before」の状態になっていることを確認。

こちらの手順を試したのですが、"apiVersion": 3 を 2 に変更して npm run build を実行すると、再度 3 に書き戻されてしまい、「変更前 Before」の状態を確認することができませんでした（現状では変更後の状態になっているようです）。

"apiVersion": 2 のままビルドする方法があれば教えていただけますでしょうか？
私の環境依存の可能性もあるため、他のレビュワーの方にも確認していただいた方がよいかもしれません。
いったん【確認待ち】に戻します。

すみませんが、ご確認よろしくお願いします。

[mtdkei]

@goutetsuguma
ご確認ありがとうございます。
それではこの確認の時だけプラグイン Highlighting Code Block を入れてみてもらえますか？こちらは"apiVersion": 2でした。

[mtdkei]

@goutetsuguma
調整してみました。何度もすみませんがよろしくお願いいたします。

[goutetsuguma]

@mtdkei
調整ありがとうございます！
「Highlighting Code Block」の有効化をして確認しまして、問題なさそうに見えました。

少し気になるところは、もともとわたしのLocalが重たすぎるのでそのせいかもしれませんが、「スライダー」ブロックの「編集モード」を「プレビュー（スライド）」から「編集（縦積み配置）」に切り替えた時に、切り替わるまでに数秒かかるようでした。たまにページが固まることもあります。
その逆で、「編集（縦積み配置）」から「プレビュー（スライド）」にするときは、早く切り替わります。

いったん2人め確認待ちにします。
↑ この辺りも踏まえまして、2人目の方、確認をしていただければと思います🙇

[mtdkei]

@goutetsuguma
ありがとうございます。昨日はそんなことなかったのですが、先ほどご指摘部分を改めて確認したらそのような感じでした。
(何かキャッシュが残ってたのかもしれません。)
調整してみます！

[mtdkei]

モード切り替えの時に切り替えが遅い現象について対応しました。

[goutetsuguma]

@mtdkei 調整ありがとうございます！
確認しまして、「スライダー」ブロックの「編集モード」の切り替え問題ないようでした。
「Highlighting Code Block」の有効化/無効化で確認して、そのほかも問題ないようでしたので、【2人目確認待ち】にします

[akito-38]

@mtdkei
こちら「Highlighting Code Block」をインストールして指定いただいた手順で確認いたしました。
動作は問題無いように思います。
ただ一点、先祖階層からのページリストブロックでエラーが発生していました。
ブロックを配置するとtんプ画像のエラーが表示されると思います。
このプルリクとは別問題な気がしますが、対応はどうしましょう？

[mtdkei]

@akito-38
確認してみたのですが、エラーが再現できませんでした。
おで数ですが、何か特定の時だけそうなるかもしれませんので、よろしければエラーが起きているページをコードエディターに切り替えていただき、そのhtmlを確認させていただけたらと思います。
また、テーマや特筆することがございましたらご連絡いただけますと幸いです。

[akito-38]

@mtdkei
確認ありがとうございます。
htmlはブロックを配置するだけなので必要無いかと思いました。
代わりに、動画を撮りましたので確認してみていただけるでしょうか。
また、確認した時の環境も以下に記述しておきます。

ブランチ:fix/apiVersion3/iframe,develop
テーマ:Lightning
ブラウザ:edge,chrome

default.mp4

[mtdkei]

@akito-38
動画をありがとうございます。設定を合わせてみたのですが、私の環境ではまだ再現できませんでした。
おそらくこの現象はdevelopでも起こるのですよね？その場合は別のissueにしていただけたらと思います。

[akito-38]

@mtdkei
そうなんですね。
私の環境だけなのでしょうか？
この現象はdevelopでも起こります。
後で改めて確認してやっぱりエラーがでるようであればissueに上げておきますね。

ではこのプルリクは問題ないと思いますので承認しておきます。