ブロックエディタ | Webサイトに必要なことと道具 https://xn--ecka7j.biz セキュリティ対策、最適化、ツール、工作 Wed, 28 May 2025 06:23:42 +0000 ja hourly 1 https://wordpress.org/?v=6.9.4 https://xn--ecka7j.biz/wp-content/uploads/2020/02/cropped-ogt-512-512-024-068-32x32.png ブロックエディタ | Webサイトに必要なことと道具 https://xn--ecka7j.biz 32 32 ハマった！Webサイト公開直前の落とし穴 – Geminiと挑んだ原因不明エラー解決記 https://xn--ecka7j.biz/toolboox/chatgpt/12001/ Wed, 28 May 2025 03:45:18 +0000 https://xn--ecka7j.biz/?p=12001 Webサイト公開目前、最後の詰めで突如現れた謎のConsoleエラー。

頼みの綱として生成AI「Gemini」に助けを求め、共に原因究明に奔走するも、その道のりは決して平坦ではありませんでした。プログラミングの鉄則を疑い、目を凝らしても見つからないエラーの正体は、まさに「想定外」。Geminiとの対話を通して、AIの可能性と限界、そして最終的に問題解決へと導いた驚きの真相を、赤裸々にお伝えします。

衝撃

ローカルのPCの開発環境では、うまく機能して操作できていた。
本環境にそのまま、コピペしただけなのにプレビュー段階で全く機能しない。

Color_Palette_Explorer
カラーパレットの色が表示されていなく、RGBスライダーも数値入力も機能しない

なぜ、何が問題？

何も変更することなく、ローカルのPCで開発した内容を、HTML部分とScript部分を別々に、カスタムHTMLブロック２つに分け、１番目のHTMLブロックにはHTML部分をそのまま貼り付け、次のHTMLブロックには<script></script>記載した上で、間にScript文を貼り付けただけなのに。

公開目前！最後の難関：突如現れたエラーの影

ローカル環境では完璧に動作していた自慢のカラーピッカー。意気揚々と公開準備を進めるも、本環境でのプレビュー表示でまさかのトラブル発生。プレビュー表示でカラーパレットが真っ白になり、操作は一切受け付けないという事態に直面。

原因究明の開始

内容を一切変えることなく、HTMLとScriptを使う定義をカスタムHTMLブロックに書いただけなので、本環境でなぜ動かないのか？原因を突き止めるにも限界で、ここは生成AIの手を借りることから始めることにした。

藁にもすがる思いで：AIの知恵を借りる

FirefoxでもChromeでも同じ状況。
打つ手なしの状況なので、藁にもすがる思いで生成AI「Gemini」に 助けを求める。果たしてAIは、この難局を打破するヒントを与えてくれるのか？

Geminiとの対話：エラー情報の収集と解析の始まり

Geminiからの最初の指示は、ブラウザの開発者ツールに表示されるConsoleエラーの提供。果たして、そこに解決の糸口は隠されているのか？

本環境での不具合の発生と状況をGeminiに伝え、対応策を尋ねます。

Webページに記載して下書き状態でプレビューしたところ、大きな問題が発生しています（Localでは何も問題ありません）

1. 最初から、カラーパレットが真っ白です。操作をしても変わりません

2. RGBのスライダーの動きも、RGBの数値入力も何も反映されませんし、スライダーにも連動しません。

3. 選択された色も変わりませんし、カラー情報も白のままです。

Geminiの回答

ご報告ありがとうございます。ローカル環境では問題がないのに、Webページに公開した途端に問題が発生するとのこと、それは非常によくあるケースで、原因もいくつか考えられます。
問題を解決するために、以下の手順で確認を進めてください。【重要な確認事項】
ブラウザの開発者ツール（デベロッパーツール）の確認:

　公開されているWebページを開き、ブラウザの開発者ツールを起動してください。（通常は右クリックして「検証」や「要素を調査」を選択するか、F12キーを押すと開きます）

　開発者ツールの「コンソール」タブを開き、赤い文字で表示されているエラーメッセージがないか確認してください。もしエラーメッセージがあれば、それが問題の原因を示している可能性が高いです。エラー内容を教えていただけると、さらに具体的なアドバイスができます。

  • Chromeで確認したConsoleエラーをGeminiに報告するも、そのエラー行数は膨大※ かつ止まることなく吐き出されている。一体、何が原因でこんなにもエラーが出ているのか？

（※.ChromeのConsoleエラーはStopすることなく大量に出力され続ける。最初の100行あまり、2画面スクロール分位をコピーして報告。Geminiにもその旨を伝える）

操作はすべて無効で、ChromeでのConsole Errorが。大量に出ていますし、繰り返し出力され止まりません。エラー画面２スクロール分ほどのメッセージを添付します。これで何かわかるでしょうか？

Uncaught SyntaxError: Invalid or unexpected　tokenUnderstand this errorxn--ecka7j.biz/:2154 Uncaught SyntaxError:Unexpected token ‘+’Understand this errorxn--ecka7j.biz/:1 Uncheckedruntime.lastError: The message port closedbefore a response wasreceived.Understand this errorxn--ecka7j.biz/:1 Uncheckedruntime.lastError: The message port closed before a response was received.Understandthis errorxn--ecka7j.biz/:1 Uncheckedruntime.lastError: The message port closed before a response wasreceived.Understand this errorxn--ecka7j.biz/:1 Uncheckedruntime.lastError: The message port closed before a response wasreceived.Understand this error total.js:1 Uncaught TypeError: Cannot readproperties of undefined (reading ‘1’)atCn (total.js:1:33944) at　Mn (total.js:1:34081)at　yr (total.js:1:21068)at　Gn (total.js:1:34478)at　Object.jn [as goTo] (total.js:1:35325)at total.js:1:55615at　total.js:1:60250　at　Array.forEach (<anonymous>)　at　t.value (total.js:1:60229)at t.startFn (total.js:1:54995)Cn @ total.js:1Mn @ total.js:1yr @ total.js:1Gn @ total.js:1jn @ total.js:1(anonymous) @ total.js:1(anonymous) @ total.js:1value @ total.js:1startFn @ total.js:1(anonymous) @ total.js:19Understand thiserror8Attestation check for Protected Audience on<URL> failed.Understand this errorxn--ecka7j.biz/:1 Attestation check forTopics on https://cdn.mediago.io/ failed.Understand this errorxn--ecka7j.biz/:1 Attestation check forTopics on https://cdn.mediago.io/ failed.Understand this error

※実際に添付したものは、もっと多量で改行表示されているもの。ここでは記事の都合で省略しています、

Chromeの悲鳴：大量のエラーメッセージに翻弄される

本環境でのエラー報告ありがとうございます。大量のコンソールエラーが発生しており、特に SyntaxError: Invalid or unexpected token と SyntaxError: Unexpected token '+' が出ていることは、JavaScriptファイル自体に何らかの問題があることを示唆しています。

これらのエラーは、JavaScriptの文法として正しくない文字が含まれている場合や、ファイルのエンコーディングが間違っている場合などに発生します。ローカル環境では問題がないのに、本環境で発生するということは、ファイルのアップロードまたは保存の過程で問題が発生した可能性が考えられます。

以下の点について確認してみてください。

  1. JavaScriptファイルの再アップロード: colorPicker_Gemini-Script7.js を再度、Webサーバーにアップロードしてみてください。アップロードが中断されたり、不完全な状態でアップロードされた可能性があります。FTPクライアントなどを使用している場合は、転送モード（バイナリまたはテキスト）の設定が適切かどうかも確認してください。一般的にはJavaScriptファイルはテキストモードで転送することが推奨されます。
  2. ファイルのエンコーディング: JavaScriptファイルのエンコーディングが、Webサーバーで想定されているエンコーディング（通常はUTF-8）と一致しているか確認してください。テキストエディタでファイルを開き、エンコーディングの設定を確認・変更できます。
  3. ファイル内容の確認: もし可能であれば、本環境にアップロードされた colorPicker_Gemini-Script7.js の内容を直接確認してみてください。予期しない文字が混入していたり、途中でファイルが途切れていないかなどをチェックします。
  4. 他のJavaScriptエラーの確認: total.js という別のファイルでもエラーが発生しているようです。もしこのファイルがカラーピッカーの動作に依存している場合、このエラーが影響を与えている可能性も考えられます。カラーピッカーの動作に必要なJavaScriptファイルが全て正常に読み込まれているか、開発者ツールの「ネットワーク」タブで確認してください。

まずは上記の点を確認し、JavaScriptファイルが正しく本環境にデプロイされているかどうかを確かめてください。SyntaxError が解消されれば、カラーピッカーが正常に動作する可能性が高いです。

　➡　Geminiによる解析は難航を極める。

.jsはアップロードしたわけでなく、カスタムHTMLブロックで、HTML部分の下に、別途カスタムHTMLブロックを配置し、<script></script>内に、ペーストしたもので、全文選択したものなので間違えようがないものです。

承知いたしました。.js ファイルをアップロードしたのではなく、HTMLブロックに直接ペーストしているとのこと、了解いたしました。その場合、コードの誤りである可能性が高まります。

先ほどのエラーメッセージをもう一度確認すると、xn--ecka7j.biz/:2154 Uncaught SyntaxError: Unexpected token '+' というエラーが出ています。これは、2154行目に予期しない + 記号があることを示唆しています。

以下の手順で、HTMLブロックにペーストしたJavaScriptコードを確認してみてください。

  1. 本環境のコードの確認:
    • 公開されているWebページの該当箇所（拡張HTMLブロック）のコードを直接確認してください。ブラウザの開発者ツールの「要素」タブで、<script> タグの中身を確認できます。
    • ローカル環境で正常に動作しているJavaScriptコードと、本環境にペーストしたコードを行ごとに注意深く比較してください。特に2154行目付近に、意図しない + 記号がないか確認してください。また、タイプミスや文字抜けなども見落とさないように確認してください。
  2. コメントアウトの確認:
    • JavaScriptのコメントアウト (// や /* ... */) が正しく記述されているか確認してください。誤ったコメントアウトは、予期しないトークンエラーを引き起こすことがあります。
  3. テンプレートリテラルの確認:
    • コピー機能の部分でバッククォート (`) を使用しているテンプレートリテラルがありますが、これが正しく記述されているか確認してください。特に、文字列内で変数を埋め込む ${} の部分に誤りがないか注意してください。
  4. 他のJavaScriptコードとの競合:
    • もしページ内に他のJavaScriptコードが存在する場合、それらのコードと変数名や関数名が衝突している可能性もわずかに考えられます。ただし、今回のエラーメッセージはSyntaxErrorなので、まずはコード自体の文法エラーを疑うべきです。

エラーメッセージの行番号(:2154) は、コードの行数が非常に多いことを示唆しています。 ペーストしたJavaScriptコードだけでなく、そのHTMLブロック全体や、その前後のHTML要素なども含めて、意図しない + 記号がないか確認してみるのも良いかもしれません。

お手数ですが、上記の手順でコードの確認と修正を試してみてください。SyntaxError が解消されれば、他の問題も解決に向かう可能性があります。

ペースト前の.jsは、全選択しても419 Lineですが、2154行目とはHTML部分を含むということでしょうか？

その通りです。ブラウザの開発者ツールが示す行番号は、HTMLファイル全体の行数を基準にしています。したがって、2154行目というエラー表示は、ペーストしたJavaScriptコードだけでなく、そのJavaScriptコードが埋め込まれているHTMLブロックや、それ以前のHTML構造の行数も全て含んだ上での行番号となります。

エラー箇所を特定するには、以下の手順で確認してみてください。

  1. 公開ページのHTMLソースコードを表示する:
    • ブラウザで公開ページを開き、右クリックして「ページのソースを表示」または同様のオプションを選択します。
  2. <script> タグを探す:
    • 表示されたHTMLソースコードの中で、カラーピッカーのJavaScriptコードをペーストした <script> タグの位置を探します。
  3. 行数を数える:
    • HTMLソースコードの最初から数えて、2154行目付近に何が記述されているかを確認してください。<script> タグの中であれば、ペーストしたJavaScriptコードのエラーの可能性がありますし、もし <script> タグの外であれば、HTML構造に問題があるかもしれません。
  4. エラーの可能性のある箇所を特定する:
    • 2154行目付近のコードに、エラーメッセージで指摘されている + 記号がないか、または文法的に不自然な記述がないか確認してください。

この方法で、エラーが発生している正確な位置を特定できるはずです。もし特定できたら、その部分のコードを再度確認し、修正を試みてください。

今回追加したScriptは、ソースから確認する限りLine：742から1164までであり、エラーの出た2154行目ではありません。

ご指摘ありがとうございます。ソースコードの行数が合わないとのこと、承知いたしました。

その場合、エラーが発生している2154行目付近には、別のJavaScriptコードが存在するか、または何らかの理由でHTML構造の一部がJavaScriptとして誤認識されている可能性があります。

以下の手順で、2154行目付近のコードを確認してみてください。

  1. 公開ページのHTMLソースコードを再度表示します。
  2. ソースコードを2154行目付近までスクロールします。
  3. その行に何が記述されているか確認します。
    • もし <script> タグで囲まれたJavaScriptコードであれば、その部分に + 記号が不適切に使われていないか、文法的な誤りがないかを確認してください。
    • もし HTML タグやその他のコンテンツであれば、それが JavaScript の文脈で解釈されようとしてエラーになっている可能性があります。例えば、閉じタグが不足していたり、コメントアウトが正しく行われていないなどの理由で、意図しない部分が <script> 要素として扱われることがあります。
  4. 2154行目よりも少し前の行（例えば2100行目あたりから）も確認し、JavaScriptの<script>タグが適切に開始・終了しているかを確認してください。 もし、どこかの <script> タグが閉じられていない場合、それ以降のHTMLコードがJavaScriptとして解釈され、エラーを引き起こすことがあります。

エラーメッセージは Unexpected token '+' ですので、2154行目付近で + 記号がどのように使われているか、文脈と照らし合わせて確認することが重要です。

もし、ご自身で原因を特定するのが難しい場合は、その2154行目付近のコード（可能であれば、その数行前後のコードも含む）を共有していただければ、私も一緒に確認してみることができます。

実際の2154行目付近の<script></script>を貼り付けて共有：すごく長大なScript文なので、ここでは割愛(省略)します。

奥の手：Webページ全体のソースコードを提供

ご提供ありがとうございます。2154行目は外部のJavaScriptライブラリのコードの一部であるようです。これは、ご自身の記述されたカラーピッカーのコード（742行目から1164行目）とは異なる場所でエラーが発生していることを意味します。

このような場合、考えられる原因はいくつかあります。

  1. ご自身のカラーピッカーのコードの潜在的なエラー: カラーピッカーのコードに、直接的なSyntaxErrorではないものの、実行時に問題を引き起こし、その影響が他のJavaScriptコードの解析に及んでいる可能性があります。例えば、変数名や関数のスペルミス、予期しない値が渡されることによるエラーなどが考えられます。
  2. 外部ライブラリの破損または不完全な読み込み: 何らかの原因で、この外部ライブラリのコードが完全に読み込まれていないか、破損している可能性があります。ただし、HTMLに直接記述しているとのことなので、この可能性は低いかもしれません。
  3. HTML構造の誤り: カラーピッカーのJavaScriptコードが記述されている場所のHTML構造に誤りがあり、それが外部ライブラリの解析に影響を与えている可能性も考えられます。例えば、<script> タグの閉じ忘れなどです。

トラブルシューティングとして、以下の点について再度確認をお願いできますでしょうか。

  • ご自身のカラーピッカーのJavaScriptコードをもう一度、注意深く見直してください。 特に、最近変更を加えた部分や、イベントリスナーの設定、関数呼び出しなどに誤りがないか確認してください。セミコロンの抜けなどもエラーの原因となることがあります。
  • カラーピッカーのJavaScriptコードを囲んでいる<script>タグが正しく閉じられているか確認してください。 また、その<script>タグがHTMLの適切な場所に配置されているか（通常は</body>タグの直前が推奨されます）も確認してください。
  • もし他にJavaScriptコードを記述している<script>タグがあれば、それらのコードにもエラーがないか確認してみてください。

エラーメッセージが特定の外部ライブラリの行数を示しているとはいえ、根本的な原因がご自身のコードにある可能性も考慮して、今一度コード全体を見直してみてください。

完全な手詰まり状態

新たな視点：Firefoxのエラー情報に光明が？

別のブラウザであるFirefoxでConsoleエラーを採取し、Chromeとの違いを報告。エラーメッセージの内容や件数の違いから、何らかの手がかりが得られるかもしれない。（FirefoxのConsoleエラーは数行で内容もシンプル）

FirefoxのConsoleエラーLogで判ったこと

この例の場合、Chromeのものではダメだったこと、
結果的にFirefoxのconsoleエラーLogが、この場合のヒントになった。
（全ての場合に当てはまるものでは無いと思うが、複数のブラウザで確認することの大事さを改めて感じさせられた。）

本環境のHTMLソースコードを確認しました。➡　 Chromeで開いた場合のソースでも、Firefoxで開いた場合のソースでも、先頭から50Line位までに「HTMLの構造が正しくない場合や、予期しない文字がHTMLファイルの先頭に存在」は、見つからない。
但し、SyntaxErrorは、Firefoxで開いた場合は、内容が全く異なる様です。FireFoxでの表示は、以下です。
UncaughtSyntaxError: ‘#‘
not followed by identifier xn--ecka7j.biz:818:30
https://xn--ecka7j.biz/?p=11979&preview=true&_thumbnail_id=11977　
Error: Incorrect contents fetched, please　reload.

Webページ全体のSourceの全文を貼り付けます。なにか見つかるでしょうか？

「ソースコード」を貼り付け

※．この記事では、分かり易さを求め818は、意図的に赤文字にしています。
（FirefoxのConsoleエラー表示は、シンプルであるが　’#‘やプレビューであることの?p=11979&preview=true&_thumbnail_id=11977　が、あり利用者にとって非常に分かり易いと思うのは自分だけ？でしょうか？）

ソースコード解析の結果：Geminiもお手上げ？

提供したソースコードに対し、Geminiは、ChromeでのConsoleエラーの「#」に関連する不審な点を見つけられなかったと回答。早くも暗雲が立ち込める。

ご提供いただいたHTMLソースコードを確認しましたが、Firefoxのエラーメッセージ UncaughtSyntaxError: '#' not followed by identifier xn--ecka7j.biz:818:30 が示す818行目付近には、直接的に問題となる # は見当たりませんでした。

ただし、Firefoxのエラーメッセージは、Chromeとは異なる場合があります。Chromeで表示されているエラー Uncaught SyntaxError: Invalid or unexpected token が依然として気になります。

つきましては、以下の点について、再度HTMLソースコード全体をご確認いただけますでしょうか。

  1. Firefoxのエラー箇所（818行目付近）の確認:
    • その行に直接 # がない場合でも、その行のコードがJavaScriptの文脈で解釈された結果、そのようなエラーが出ている可能性があります。周囲のコード（特にJavaScript関連のコード）に問題がないか確認してください。
  2. Chromeのエラー箇所（HTMLの先頭）の確認:
    • HTMLファイルの先頭から、特に <script> タグが始まるまでの間に、意図しない文字（不可視文字なども含む）や文法的に正しくない記述がないか、もう一度注意深く確認してください。
    • 稀に、サーバー側の処理や、コピー＆ペーストの際に予期しない文字がHTMLの先頭に混入することがあります。
  3. JavaScriptコードの全体的な確認:
    • コメントアウト以外の不要な文字や記号が混入していないか、念のためJavaScriptコード全体を再確認してください。

もし、これらの確認をしても問題が特定できない場合は、大変お手数ですが、可能であれば、公開されているWebページのURLを共有していただけますでしょうか？実際にWebページを拝見することで、より具体的な原因を特定できるかもしれません。

再度全ソースを共有。更に元々の追加したScriptの一部分をSublime Textに貼り付けCheck250525.jsとした上で共有

Script Source
元々のScript Sourceの117行目：　if (r >= 0 && r <= 255 && g >= 0 && g <= 255 && b >= 0 && b <= 255) {

Firefoxによる深掘り：Scriptエラーの発見と詳細調査

GeminiはFirefoxのエラーからScriptエラーを発見し、発生位置を特定。問題のコードの再確認を指示される。

コードを拝見しました。

まず、122行目の条件式で、JavaScriptの論理AND演算子である && が、HTMLエンティティの &#038;&#038; と記述されています。これはJavaScriptとしては解釈されず、意図しない動作を引き起こす可能性がありますので、&& に修正してください。

何故か？117 Lineを122行目と言ってくるが、、、、

 Firefoxのエラー箇所（818行目付近）の確認ですが、今一度、実Sourceで確認したところ、Line 819が、文字化けしています。
if (r >= 0 && r <= 255 &#038;&#038; g >= 0 && g <= 255 &#038;&#038; b >= 0 && b <= 255) {
ここは、どうして文字化けするのでしょうか？
.jsのソースの該当箇所は以下の通りです。
  if (r >= 0 && r <= 255 && g >= 0 && g <= 255 && b >= 0 && b <= 255) {
しかも全ての＆＆が文字化けしている訳でもないので･･･どの様な理由ならそうなるのか???

コードは正常、しかし現実は…：繰り返される問題

問題箇所とされるコードは正常にしか見えず、編集画面でも問題なし。念のため、Scriptを再度上書き更新するも状況は変わらず。エラー解決への道は依然として見えない。

展開されたSourceのの文字化け部分（819 Line）

if (r >= 0 && r <= 255 &#038;&#038; g >= 0 && g <= 255 &#038;&#038; b >= 0 && b <= 255) {

そう、余計な文字：#038;　が、&&の間に数か所に挟まっている。
（でも全部の＆＆の間が文字化けしている訳ではない。･･･これも不思議！）(ここがRGBの数値の範囲チェックの部分･･･➡ここのif文が機能しないための不具合。Firefoxのconsoleエラーが示す’#‘もここにある。)

そして、実際のコーディングでは、以下の様に問題なく（文字化けの「#038;」もない）（　colorPicker_Gemini-Script7.jsの　117 Line）

if (r >= 0 && r <= 255 && g >= 0 && g <= 255 && b >= 0 && b <= 255) {

元々の「colorPicker_Gemini-Script7.js」

Script Source
元々のScript Sourceの117行目：”if (r >= 0 && r <= 255 && g >= 0 && g <= 255 && b >= 0 && b <= 255) {“

であるし、改めて、編集画面で見てみても同じ

カスタムHTMLブロック
カスタムHTMLブロック　･･････マーク部分、元々のSourceと同じです。

でも、現実は不具合発生だし、Firefoxのconsoleエラーはここを指している
（よく見てみるとChromeのConsoleエラーとSourceコードのGemini解析で指し示した「#」は、#038;の先頭にある）

プレビュー画面のSourceの該当箇所付近は、下の画像キャプチャ通り
SourceをSublime Textに貼り付け、Check250525.htmlで保存した後、VS Codeで開いて「if (r >= 0」で検索 ➡ Firefoxのエラー箇所（818行目付近）で合致する819 Line（VS Codeは文字化け部分を~~~~ ~~~~で示してくれている。こんなCode無いぞ!!!と）➡ 　該当箇所近辺をキャプチャ

Source
プレビュー時のソースの文字化け部分 819Line &&の一部が文字化け、 &&

環境要因の可能性：GeminiからのURL開示要求

Geminiは、ソースコードと実行環境の間に生じる不整合、特に文字化けの可能性を指摘し、実際のWebページのURLの開示を求める。

原因がまた一つ特定できましたね！&#038;&#038; がまだ残っていたとは、驚きです。

Localで修正してアップロードしたのに、本環境で文字化けが戻ってしまう原因としては、以下の可能性が考えられます。

  1. キャッシュ: ブラウザのキャッシュだけでなく、WebサーバーやCDN（コンテンツ配信ネットワーク）のキャッシュが古いバージョンのファイルを配信している可能性があります。スーパーリロード（Ctrl+Shift+R または Cmd+Shift+R）を試すだけでなく、もしCDNを利用している場合は、CDNのキャッシュクリアも試してみてください。
  2. 保存またはアップロードの失敗: 編集したHTMLブロックが正しく保存または公開されていない可能性があります。Webサイトの編集画面で、変更を保存し、公開する手順を確実に行ってください。
  3. 複数の場所でコードを編集している: もし、複数の場所で同じコードを編集している場合、誤って古いバージョンのコードを上書きしてしまっている可能性があります。
  4. プラットフォームの自動変換: ご利用のWebサイトプラットフォームによっては、特定の文字や記号を自動的に変換する機能があるかもしれません。もしそういった機能があれば、設定を確認してみてください。

まずは、Webサイトの編集画面で、該当のHTMLブロックの内容が最新の修正済みコードになっていることを確認してください。その後、キャッシュクリアを徹底的に行ってみてください。

もしそれでも問題が解決しない場合は、ご利用のWebサイトプラットフォーム名などを教えていただければ、何か情報が見つかるかもしれません。

非公開とプレビューの壁：もどかしい状況

問題解決のためURLを開示したい気持ちはあるものの、ページは未公開。下書きプレビューでの状況を伝え、一時公開も検討することを伝える。

このページは、エラーが発生している為、未だ公開していません。
そのため、下書き状態です。
下書きであるため、毎回更新時は「下書き保存」して、その後プレビュー表示で確認しています。
改めて、編集画面で該当の個所を確認すると、
if (r >= 0 && r <= 255 && g >= 0 && g <= 255 && b >= 0 && b <= 255) {
となっていて、見た目の文字化けはありません。
念のため、再度上書き保存しても、プレビューで正しく動作しません。
下書き状態の為、URL共有は出来ませんし、
それとも、先頭に「工事中」を大きく記載して、一旦公開したうえで、URL共有した方がイイでしょうか？

下書き保存とプレビュー表示で確認しても正しく動作しないとのこと、承知いたしました。編集画面でコードが正しく表示されているにも関わらず問題が解決しない場合、以下の可能性を試してみてください。

  1. プレビュー画面のハードリロード: プレビュー画面が古いキャッシュを読み込んでいる可能性があります。プレビュー表示の状態で、強制的に再読み込み（ハードリロード）を試してみてください。通常、Ctrl+Shift+R（Windows/Linux）、Cmd+Shift+R（Mac）で行えます。
  2. プレビュー画面の開発者ツール（コンソール）の確認: プレビュー表示でも、ブラウザの開発者ツールを開いて（通常はF12キー）、コンソールにエラーメッセージが表示されていないか確認してください。表示がおかしくても、JavaScriptのエラーが出ている場合があります。
  3. プラットフォームのプレビュー機能の特性: ご利用のWebサイトプラットフォームのプレビュー機能が、公開時と異なる動作をする場合があります。もし可能であれば、プラットフォームのヘルプなどを確認し、プレビューの制限事項などを調べてみてください。

上記を試しても解決しない場合は、一旦「工事中」などの表示をして公開し、URLを共有していただく方が、私も実際のWebページの状態を確認できるため、より具体的なアドバイスができるかもしれません。もし公開に抵抗がなければ、その方法もご検討ください。

１.も２.も、今までにやってきたことで、ずっとスーパーリロード「Ctrl] ＋「F5]をやってきた結果です。仕方ないので一旦、工事中にして一旦公開してからURL共有しますので、しばし猶予を

承知いたしました。公開後、URLを共有いただければ、すぐに確認させていただきます。引き続きサポートさせていただきますので、よろしくお願いいたします。

Geminiの期待：公開後のURL分析に託す

URL共有します。
“https://xn--ecka7j.biz/site-operation/design/11979/ “

承知いたしました。URLをありがとうございます。

早速、拝見して状況を確認いたします。少々お時間をください。

ページを「工事中」として公開し、URLをGeminiに託す。AIによる分析に、一縷の望みをかける。

AIも時間が必要：分析結果を待つ焦燥感

Geminiから分析に時間を要する旨の連絡。焦りを感じながらも、AIの判断を待つ。

Geminiの回答を待つ間に

まさかの自己解決：閃きが生んだ解決策

Geminiからの返信を待つ間に、何気なくScriptの記述場所を変更してみたところ、嘘のようにエラーが解消！信じられない結末を迎える。

Custom_HTML_Block
カスタムHTMLブロックに書いたScript部分を抜き出したところ
customJavaScript
カスタムJavaScriptテキストボックスに[Script]を移動

Scriptの移動後、不要となった部分のカスタムHTMLブロックを削除して更新したら正常に動作した

Geminiに報告：解決したことと変更点を

代替案２つの内、１つ目で解決しました。

1つは、（カスタムJavaScript）欄に、カスタムHTMLブロックからScriptを移動させることで解決しました。

２つ目の、.jsファイルとしてアップロードして、外部参照でScriptを実行する案は実施しなくて済みました。（理由は、該当のscriptは汎用的なものでなく、当記事だけのものであった為）

解決のご報告ありがとうございます！テーマの機能であるカスタムJavaScript欄に移動させることで解決されたとのこと、素晴らしいですね。

当初、HTMLブロックに直接記述されていたことが原因だったのですね。テーマの機能を利用することで、JavaScriptの実行環境が適切になり、問題が解消されたと考えられます。

カラーピッカーが無事に動作するようになったとのこと、大変嬉しく思います。他に何かお手伝いできることがございましたら、お気軽にお知らせください。

Geminiの誤解：AIにも得意不得意がある？

解決を報告するも、Geminiは原因を誤解。AIも万能ではないのか？

真実の共有：依然として残る謎

Geminiの誤解を訂正し、自己解決に至った経緯と、根本的な原因が依然として不明であることを伝える。

「HTMLブロックに直接記述されていたことが原因だった」のではありません。

文字化けが原因です（文字化けする根本原因は解明できていませんが、）

というのは、他の記事で「HTMLブロックに直接scriptを記述して、うまく動作しているものもありますから」

Geminiの反省と今後の課題：文字化けという難題

Geminiは自身の誤解を謝罪し、文字化けという問題の複雑さについて言及する。

ご指摘ありがとうございます。私の認識が誤っており、申し訳ございません。「HTMLブロックに直接記述されていたことが原因」ではなく、文字化けが根本的な原因だったのですね。

文字化けの原因は特定できていないとのこと、承知いたしました。文字化けは、ファイルの保存形式、Webページのエンコーディング設定、サーバー側の設定など、様々な要因で発生するため、原因特定が難しい場合がありますね。

今回のケースでは、テーマのカスタムJavaScript欄に移動したことで、結果的に文字化けの問題も解消された、または影響を受けなくなった、と理解いたしました。

引き続き、何かご不明な点やお困りのことがございましたら、お気軽にお知らせください。

まとめ

Webサイト公開直前、予期せぬConsoleエラーに見舞われた顛末記。生成AI「Gemini」との対話を通じて問題解決を試みるも、最終的な原因はコードの一部で発生した不可解な文字化けだった。AIの力を借りながらも、人の目による確認と環境に合わせた調整の重要性を痛感した記録。

対象となった記事は、以下のブログカードのクリックで、ご覧いただけます。

Color Palette Explorer: あなただけの特別な色を作ろう・見つけよう！
洗練されたカラーピッカー - Webデザイン、イラスト制作に。RGBスライダー、カラーパレットで直感的に色を見つけ、HEX/RGBコード、和色名も表示。選択した色はHTMLテーブル形式で保存。Webサイトに最適な色を簡単選択。色の表現が豊かに。
イイネ.biz
2026.04.09
]]> WordPress 6.5.3メンテナンスリリース https://xn--ecka7j.biz/site-operation/wordpress/9776/ Fri, 10 May 2024 02:43:41 +0000 https://xn--ecka7j.biz/?p=9776 Maintenance

このマイナーリリースには、
コアの12件のバグフィックスと
ブロックエディターの9件のバグフィックスが含まれます。

Core

　Update：2024/05/10
C Ticket 内容 Component Version
01 #60754 ブロックフックの設定時に、間違った情報が渡されていた問題を修正
Block Hooks: Incorrect context passed when setting ignored hooked blocks metadata		 General 6.5
02 #60827 パターンメニューの項目に関するバグを修正
Patterns menu item		 I18N ※ 6.5
03 #60862 wp_localize_script() 関数が login_enqueue_scripts フックで使用する際の動作を変更
wp_localize_script() on login_enqueue_scripts hook change in behavior		 Script Loader 6.5
04 #60865 一部の PHPUnit テストが失敗する問題を修正
Some PHPUnit Tests are failing		 Build/Test Tools 6.5
05 #60876 precommit:css Grunt タスクを実行した際に、src/wp-admin/css/media.css ファイルで Autoprefixer に関する警告が発生する問題を修正
Autoprefixer warning in `src/wp-admin/css/media.css` when running `precommit:css` Grunt task		 Media 6.3
06 #60888 WP_Translation_Controller::load_file() 関数に文字列以外のデータを渡すと、エラーが発生する問題を修正
Fatal error when passing non-strings to `WP_Translation_Controller::load_file()`		 I18N ※ –
07 #60909 theme.json ファイルを持つクラシックテーマが、本来読み込まないはずのテンプレートをロードしようとする問題を修正
Classic Theme with theme.json attempts to load templates		 Themes 6.5
08 #60936 レイアウトのベースルール出力が、クラシックテーマでのブロックのワイド配置と干渉する問題を修正
Layout: Output of base layout rules conflicts with wide alignment of blocks in classic themes		 Editor trunk ※
09 #60980 class-avif-info.php ファイル内の get_item_features() 関数にバグがあり、修正
Fix get_item_features() in class-avif-info.php		 Media 6.5
10 #60981 WordPress 6.5 で、クラシックテーマに対して誤った場所に “is-layout-constrained” クラスが追加される問題を修正
6.5 adds the “is-layout-constrained” class to the wrong place for classic themes		 trunk ※ trunk ※
11 #60992 AJAX によるプラグイン有効化処理に問題があり、修正
Plugin management: AJAX plugin activation consequences		 Plugins 6.5
12 #61129 WordPress 6.5.3 で修正されたバグを取り込んだ、最新の npm パッケージに更新
Update npm packages with bugfixes for 6.5.3		 Editor –

I18N ※: WordPressのI18Nは、国際化（Internationalization）の略称

trunk ※: WordPressコアの開発ブランチ（trunk ブランチは、最も新しい開発コードが格納されているブランチ）

Block editor

　Update：2024/05/10
CTicket内容
1 #60489 レイアウトのサイズ設定がない場合、不要なベースレイアウトルールが出力されないように修正
Layout: Skip outputting base layout rules that reference content or wide sizes if no layout sizes exist
2 #60620 ブロック挿入ツールの、パターンのページネーション機能でフォーカスが失われる問題を修正
Fix inserter pattern pagination focus loss
3 #60608 静的な投稿ページの設定で、解決済みのテンプレートが参照される問題を修正
Fix static posts page setting resolved template
4 #60641 フォントライブラリのモーダルウィンドウで、スクロールバーが動作しない問題を修正
Font Library: Fix modal scrollbar
5 #60661 data-wp-on 属性を使用して、同じタイプのイベントに対して複数のイベントハンドラーを登録できるように修正
Interactivity API: Allow multiple event handlers for the same type with data-wp-on.
6 #60668 レイアウト要素に、常に意味を伝えるクラス (セマンティッククラス) を追加するように修正
Layout: Always add semantic classes
7 #60845 Firefox で、深く入れ子になったリストを操作中に、リストビューのドラッグモードが解除できない問題を修正
List View: Fix stuck dragging mode in UI in Firefox when dealing with deeply nested lists
8 #60764 theme.json ファイルを持たないテーマに対しては、不要なレイアウトルールが出力されないように修正
Don’t output base flow and constrained layout rules on themes without theme.json
9 #60686 PHP ユニットテストのワークフロー: CI テストが通過するように 7.0 と 7.1 の削除を試みる CI (継続
PHP unit test workflow: Try removing 7.0 and 7.1 to get CI tests passing
]]> ウェブサイトは道具・道具としてのウェブサイトを作る https://xn--ecka7j.biz/toolboox/1448/ Tue, 30 Mar 2021 07:26:31 +0000 https://xn--ecka7j.biz/?p=1448 Concrete CMS – concrete5

このサイト（当サイト）の、この記事は、WordPressで制作していますが、

今回はエンタープライズCMSのconcrete5で制作したサイトをご紹介します。
(2021/08 concrete5は、Concrete CMS へ)

　もし、あなたが、

タップでスグに電話をかけられるサイトをお探しなら、

これ(Concrete CMS)は、あなたのサイトにも有用なはずです。

あなたのサイトにも、導入できるCMSです。

さらに、カスタマイズで、

  • ページのどこにいても、
  • どのページにいても、
  • スマホからタップでスグに電話できる。

「ホームページが欲しい人は、ほかにいませんか？」

  • ライバルを表示しないGoogleマップが欲しい人は他にいませんか？

ご覧いただいて、お分かり戴けたでしょうか？

この、スマホで「タップで電話できます」ボタンは、

タップで電話
スマホからタップで電話をかけることができる

どのページでも、ページの最下部に表示されます。

また、上下にスクロールしても、常にそのページの最下部に表示されますので、

あなたのサイトに訪れた、あなたのお客様になってくれるかも知れない人たちに便利です。

わざわざ、電話番号を入力しなくても、

電話発信ができるページを探さなくても良いのですから。

エンタープライズCMS ？

concrete5は、

その前身である、Concrete-CMSとして、

2003年に、

  • 　簡単に – マイクロソフトのWordを使いこなせる人なら、簡単にサイト運用が出来る事。
  • 　柔軟に – 数々の大手代理店の下で働いて来た彼らは、
    従来のCMSが、広告代理店が要求する柔軟性に対応する事が出来なかったことを
    知っています。
    それらの技術的な限界をなくし、
    クライアントが自由に意思決定とサイト運営が出来るようにすること。
  • 　堅固に – AdCouncilは、全米でテレビコマーシャルを放映する予定で、
    サイトは秒間1万人ほどの訪問者が来ると予想されました。

をコンセプトに誕生しました。

今では、アメリカ陸軍も採用(2018年）するほど、堅牢でセキュリティ対策に優れたCMS（concrete5 2008年～）となっています。

特徴

  • 　　管理画面を介さずに、直接ページを編集
  • 　　コンクリートブロックを積み上げるようにサイトを構築
    （これが、名称の由来となっています）
  • 　　自由自在にレイアウトを変えられる
  • 　　ユーザごとに編集や公開権限の設定が可能

concrete5 の主な機能　ｖ5.3.0（2009/04/20）

  • 　　画像を直接編集(picnik.com のサービスを利用)
  • 　　グループ編集・権限機能
  • 　　ファイル履歴管理機能
  • 　　簡単スライドショー作成機能
  • 　　YouTube ビデオ
  • 　　アンケート機能
  • 　　RSS 表示

尚、　最新バージョンは、V8.5.5（2021/03/18）で、より高機能となっています。

concrete5
concrete5

なぜ、エンタープライズCMSを必要とする日本企業が concrete5 を選択するのか。

機能紹介

  • 　ブロックやスタック※の、ドラッグ＆ドロップで直感的にページを組み立てられる「編集モード」(動画あり)で、HTMLの知識なしで更新可能
  • 　　表示や編集の権限を詳細に設定できる「上級権限モード」
  • 　　会員制サイトをクリック操作で構築できてしまう「マイアカウント機能」
  • 　　コンテンツの更新と承認を分けられる「ワークフロー機能」
  • 　　商品情報などの管理に使える本格的な「データベース機能」（導入企業例）

この他にも400以上の豊富な機能をプラグインの導入無しで、完全無料でお使いいただけます。

※．スタック：スタックは、ブロックやブロックの組み合わせをサイト内の複数の箇所で使いまわすための機能です。　

それでは、concrete5で制作した各ページをご紹介して行きたいと思います。

タブレット縦表示
タブレット縦表示

ここで、ご紹介する各ページは、

WordPressテーマのCocoonのブログカード・ブロックで作成していますので、

「ブログカード・ブロック」のクリック（タップ）でそのまま、concrete5サイトの各ページにジャンプすることができます。

「ブログカード・ブロック」でご紹介するサイトは、

元祖ブロック・エディタのconcrete5で制作しています。

もちろん

  • 　RWD※で
  • 　MFT※テスト合格の
  • 　MFI※のページです。

そして、カスタマイズ後の、一番の特徴は、

「ページのどこからでも・どのページからでも、スマホからタップでスグ電話できる」ことです。

※．RWD：レスポンシブ ウェブ デザイン

レスポンシブ ウェブ デザインを導入するサイトが増えるにつれて、
ウェブマスターの方々の間で、モバイル用に別途設定する URLから

レスポンシブ ウェブ デザインの利用の同一のURLに移行することへの関心が高まっています。

レスポンシブ ウェブ デザインは、サーバーからどのデバイスに対しても常に同じ HTMLコードを配信しつつ、
CSS を使用して各デバイスでのページのレンダリングを変更する設定方法です。

ここでは、あなたのサイトが Google の検索結果でよいパフォーマンスが出せるよう、
別々の URL から 1 つのレスポンシブ URL へ移行する際のおすすめの方法をいくつかご紹介しています。

Googlebot にわかりやすい形でレスポンシブ サイトに移行する
出典：Googleウェブマスター向け公式ブログ　2019/09/15

※．MFT：モバイル フレンドリー テスト

　モバイル デバイスでのページの使いやすさをテストします。モバイルに対応する理由は、モバイル デバイスからのウェブへのアクセス数は増加しています。

モバイルによって世界は変わりつつあります。
今日では、誰もがスマートフォンを持ち歩き、常にコミュニケーションをとったり情報を探したりしています。

多くの国で、スマートフォンの数がパソコンの数を上回っており、
モバイル フレンドリーなウェブサイトは、オンラインでの存在感を高めるうえで欠かせないものとなってきました。
出典：Google検索セントラル

※．MFI：モバイル ファースト インデックス

Google がモバイル ファースト インデックス登録（スマートフォン用 Googlebot を使用したウェブのクロール）に取り組み始めてから数年がたちました。

分析を行ったところ、検索結果に表示されるサイトのほとんどはモバイル ファースト インデックス登録に対応しており、70% はすでに移行済みでした。

これを踏まえ、2020年9月より、簡素化のためすべてのウェブサイトをモバイル ファースト インデックス登録に移行します。

それまでの間も、システムによりモバイル ファースト インデックス登録に対応済みと判断されたサイトについては、引き続き移行していきます。

モバイルによって世界は変わりつつあります。
出典：Googleウェブマスター向け公式ブログ　2020/03/31

concrete5ウェブサイトのご紹介

Topページ

Topページ

タップで電話がすぐできるスマホ最適サイト制作横浜
来店型地域ビジネスに最適なホームページを ご提供。スマホ最適サイトが選ばれる理由①分かりやすい②使いやすい③見やすい④利用者のベネフィットがある⑤利便性がある⑥利用者が見つけやすい⑦安心できる・安心して個人情報を入れられる。ライバルを表示し...
a-itc.info

ポートフォリオ

ポートフォリオ

最適な探しやすさ見やすさ操作しやすいホームページ横浜スマホサイト
スマホ最適サイトは24時間あなたの味方ですパソコンでもタブレットでも最適表示と操作性実現。スマホで誰でもがネットにつなぎ検索する今、スマホページのどこにいても・どのページにいてもタップですぐに電話できるはとても大事な機能の一つです素早い対応...
www.a-itc.info

ウェブサイトの姿

ウェブサイトの姿

ホームページのあるべき姿スマホ対応は必須です。横浜スマホ最適　
あなた以上にあなたのサービスを知る人はいません。あなたのビジネスホームページのご支援を横浜からどの様に実現できるかを記載しています。ウェブサイトはお客様のために見やすく使いやすくお客様の目的が探しやすいものでなければなりません。その為に店舗...
www.a-itc.info

24時間あなたの味方

24時間あなたの味方
24時間あなたの味方です　横浜スマホ最適ホームページ制作
横浜のスマホ最適化ホームページ制作は、基本的なSEO対策を当たり前にしています。ウェブサイトはいつでもあなたのビジネスの強力な味方になるべきものです。あなたが寝ていても・どこかにお出かけしていても、また他の用事で忙しい時でも、あなたに代わっ...
www.a-itc.info

スマホ最適サイト

スマホ最適サイト
スマホ最適は画面の大小に左右されず最適な表示と操作性を提供する
タップでスグに電話をかけられる。ライバルを表示しないグーグルマップでご案内。ページのどこにいても電話できる。ページスクロールしても、どこからでも電話できる。ほかのページにいても問い合わせページに戻ることなく電話できる。他のページにジャンプし...
www.a-itc.info

スマホの普及がつなぐ

スマホの普及がつなぐ
スマホがつなぐインターネットに縁がなかった人たちを横浜スマホ最適
スマホ最適ホームページの利点はスマホの普及が今までインターネットに縁がなかった人たちにモタラシタことを、あなたのビジネスにをにつなぐことで、あなたの有利になることです。スマホHPが効果的な地域ビジネスには特に必須の機能です。横浜川崎東京のビ...
www.a-itc.info

自然なかたちで

自然なかたちで
柔軟な編集最適表示と操作性あなたのホームページを自然な形で制作
コンテンツの投稿差替え変更が柔軟にできあなたのホームページから自然な形でマーケティングできます。最適な表示と操作性であなたのお客様にアピールできるオウンドメディアのホームページは地域ビジネスに最適です。売り込みではなく自然な形で・あなたのお...
www.a-itc.info

ようこそ（about）

ようこそ（about）
ITシステム化の経験知識でホームページを応援します横浜ITC
経済産業省推進資格ITコーディネータが、ビジネスのIT化プロジェクトの様々な30数年に及ぶ経験と知識を踏まえ、あなたのビジネスのホームページ制作をご支援させて戴きます。個人情報保護法・マイナンバー法などのプライバシー・セキュリティ面でのサポ...
www.a-itc.info

よくあるご質問

よくあるご質問

　お問い合わせ戴いた内容を基に、FAQ集としてまとめています。

よくあるご質問もあなたのマーケテイングに有効です横浜スマホ最適
よく戴くご質問につきましてできるだけ記載していくように努めております。このページでお客様の「問題」が解決できない場合は、お問い合わせページより「お問合せ」願います。「サイト内検索」も合わせてご利用ください。サイト内ブログも含め全ページ対象で...
www.a-itc.info
  • 　スマホ最適化について
  • 　スマホ最適化のホームページについて（他と、どう違うか ？）
  • 　常時SSL化について
  • 　Googleマップについて（ライバルを表示しない）
  • 　そのほかの、ご質問（セキュリティ対策）

サービス

サービス
ビジネスのホームページにスマホ最適サイトは必然by横浜サイト制作
地域ビジネスのホームページはスマホ最適対応が必然となりました60％以上の人たちがスマホでのインターネットですウェブマーケティング「スマホ最適サイト」であなたのビジネスをご支援お客様になってくれるかも知れない人たちに焦点したSEO対策折込済。...
www.a-itc.info

費用について

費用について
ホームページにかかった費用に納得していますか？
ホームページにかかる費用としましては、ホームページそのものを制作することにかかる費用（製作費）と、　ホームページを運用するためにかかる費用（運営費：ランニングコスト）がございます。あなたのサイト、費用をかけただけのホームページになっていませ...
www.a-itc.info

無料で問い合わせ

無料で問い合わせ

入力の簡素化で、利用者の負荷を低減

最適化問合せフォームはあなたのビジネスの味方 横浜スマホ最適
横浜のスマホ最適化ホームページ制作は、あなたの労力を軽減します。スマホでも入力しやすい最適化（FEO）された無料メールフォームからお問合せください。あなたのお手数を省く為にポートフォリオ・よくあるご質問・サイト内検索が利用できます入力が面倒...
www.a-itc.info

例えば、

  • 　用件は、チェックボックスのクリックで（✅）
  • 　メッセージ：（ご用件の[ v ]チェックだけで十分な場合は記入不要です）
  • 　メールアドレス（ご連絡に使用します。未記入の場合は電話番号の記入をお願いします）
  • 　姓名（名字だけでも構いません。必須入力です）必須
  • 　連絡先電話番号（任意ですが、メールアドレス未記入の場合は必須で記入ください）

※．迷惑メール（スパム）防止の為、「reCAPTCHA」の確認※のみお願いしています。

※．「私はロボットではありません」に✅をお願いします。

簡易 予約

簡易 予約

複雑な予約システムや、有償の予約システムとの契約は不要です。

予約
予約専用ページ。予約希望日時を第一希望から第三希望まで選択形式で記載できます。問い合わせと同様に24時間以内に予約確認完了をメールで返信します
www.a-itc.info

サイト内簡易予約で、お客様とのやり取りはメールでの確認・確定となります。

入力の簡素化で、利用者の負荷を低減

例えば、

  • 　ご希望日時（カレンダーからの選択と、時刻はプルダウン選択で入力の手間を軽減）

　　訪問希望の場合、ご都合の良い日時を第三希望までご指定願います。(記入日当日を含まない翌日以降でお願いいたします。)

　　希望欄のクリック（タップ）でカレンダーが表示されますので、希望日付を選択クリックしてください。

　　希望時刻は▼クリックで希望時刻を表示・選択クリックしてください。

  • 　第三希望までご指定願います。
  • 　メッセージ（住所（任意）・連絡事項など）ご自由にご記入願います。
  • 　メールアドレス（ご連絡用に使用しますので、できる限り記入願います）
  • 　お名前（名字だけでも構いません）必須
  • 　連絡先電話番号(任意ですが、メールアドレス未記入の場合は必須でお願いします）

※．迷惑メール（スパム）防止の為、「reCAPTCHA」の確認※のみお願いしています。

※．「私はロボットではありません」に✅をお願いします。

お役立ち情報

お役立ち情報
お役立ち情報はマーケテイングに最適オウンドメディア横浜スマホ最適
お役立ちブログでお伝えするオウンドメディアです。あなたのサイトに訪れた・あなたのお客様になってくれるかも知れない人たちを、外部のブログサービスへ離脱させてしまうのはマーケティング観点からも非常にもったいないことです。サイト内ブログであなたの...
www.a-itc.info

サイト内検索

サイト内検索

お客様の「知りたい」に、お答えする。

サイト内検索はマーケテイングにも有効な手段スマホ最適サイト横浜
横浜のスマホ最適化ホームページ制作はこの様なサイト内全ページの検索ができます。あなたがお探しのものに関連するキーワードを入力して検索してみてください。この様なサービスはきっと・あなたのウェブサイトでも有効で・あなたのビジネスのお客様になって...
a-itc.info

サイト内を、任意のキーワードで検索して戴くことで、お客様のニーズに合わせたページをご案内できます。

サイト内の情報検索はあなたの味方です。

ベネフィットは、

お客様に便利であること（利便性）

◎　タップでスグに電話できる

◎　ライバルを表示しないGoogleマップで、ご案内

◎　簡単入力・問合せフォーム

◎　簡易予約フォーム

ページのどこにいても、どのページにいても、スマホからタップでスグに電話できる。「ホームページが欲しい人は、ほかにいませんか？」

]]> wordpress 5.7 ブロックエディタの進化 https://xn--ecka7j.biz/site-operation/wordpress/1386/ Thu, 11 Mar 2021 06:22:30 +0000 https://xn--ecka7j.biz/?p=1386

WordPress

ブロックエディタの進化

WordPress5.7「新機能ドラッグ＆ドロップで、直接 設置したい場所に
ブロックやブロックパターンを置ける様になった。」　vs concrete5

　WordPress5.7のブロックエディタの機能が増えたので試してみました。

  WordPress 5で実装されたブロックエディタは、期待外れでした。
 元祖プロックエディタのconcrete５で作成したサイトと比較して散々でした。

　今回の 5.7はconcrete5とまではいかないまでも、機能が充実してきた様です。

　同様の機能をconcrete5でも試して、WordPress5.7と比較します。
concrete5の方のサイトは、本番サイトではなく
Local（MAMP）のテスト用なので、WordPressのサイトとのスピード比較は除外して見てください。

両方のブログ投稿を、画面の動画キャプチャで動画にしてYoutubeにアップしました。

WordPress 5.7でのブログサイトはこちら
https://イイネ.net/wordpress/new/post-1568/

concrete5のサイトはこちら
https://a-itc.info/

WordPress 5.7 ブロック・エディタ（新機能）テスト投稿

インサーター(左のブロック一覧)から
ドラッグ&ドロップで、直接 設置したい場所に
ブロックやブロックパターンを置ける様になりました。
（これは、益々concrete5に似てきました。）

Youtube動画は

WordPressを5.7にアップデートする所から（録画）5.6.2から5.7へ

録画

  • WordPressを5.7にアップデート
  • 見出しブロックをドラック＆ドロップし、編集します。
  • テキストブロックの文書の編集します。
  • 画像ブロックをドラック＆ドロップし、画像の挿入します。
  • Youtubeブロックをドラック＆ドロップし、Youtube動画のURLを指定します。
    （既にYoutubeに上げている動画の URLを使用）
  • ブログの公開
  • 公開した記事の確認をします。

記事の編集（公開後の記事の再編集をします）

concrete5での投稿

同様に、concrete5でも行って録画したもの

  • 見出しブロックをドラック＆ドロップし、編集します。
  • テキストブロックはそのまま、文書の編集をします。画像ブロックは、テキストブロック内で、画像の挿入します。（もちろん、単独の画像ブロックをドラック＆ドロップし、画像挿入もできます）
  • アンカーポイントブロックは、ドラック＆ドロップのみです。
  • Youtubeブロックをドラック＆ドロップし、Youtube動画の
    URLを指定します。
    （concrete5では、画面比率や、自動再生・ループ再生などの指定もできます。）
  • ブログの公開
  • 公開した記事の確認をします。

まとめ

「比較」してみて決定的な違いは、

  1. ブロックエディターは改良されたが
  2. ブロックのドラック可能な場所で、

    3. concrete5の場合はドラック可能な設置場所の全てが、
    事前に、グリーンのラインで境界が示される
    （いつでも設置したい好きなところにドロップできる）のに対して、
    WordPress5.7では、ドラッグしてみるまで、
    境界（設置可能場所：こちらは青い太線で表現）が分からないこと。
    このことは、WordPress5.7投稿の動画の始めの方で、
    何度も、
    ドラック＆ドロップを繰り返しているのに、
    上手く行っていないところで、お分かりいただけると思います。
    慣れの問題もあるのでしょうが、設置可能場所が分かりにくいです。

  3. concrete5の方が、圧倒的にブロックが多い

  4. concrete5の方は、ブロックやブロックパターンだけでなく、

    5. スタックという（既にコンテンツを格納した複数のブロックをまとめた）ものもドラック＆ドロップできる。
    （これにより、ページ間で共通のコンテンツをページ毎に作成する必要が無くなり、
    共通のコンテンツをスタック化して置いて、必要なページにスタックをドロップするだけで済む）
    スタックは、再利用ブロックやブロックパターンとも異なるもの。

  5. ほか、

    6. スタックのイメージ例としては、
    モバイルサイトで、フッター位置に常に固定表示させる「電話発信ボタン」
    問い合わせページに遷移せずに、ページの特定位置に設置する「問い合わせフォーム」や、
    「簡易予約フォーム」
    ページの特定位置に設置する「Googleマップ」で、通常のマップの他に、離れた位置にある駐車場のマップ
    など

　５.７ブランチ最新???

WordPressは常に脆弱性対応でバージョンアップしています。

あなたの使っているバージョンが最新かどうか？

5.7ブランチの最新版確認はここからどうぞ

WordPress 脆弱性とバージョン推移 v.6.9.1
WordPress 6.9.1 あなたのホームページがワードプレスで作られていて 何も対策をしていないと改ざんされたり・危険です。ホームページに訪れてあなたのお客さんになってくれるかも知れない人たちに不安を抱かれてしまいます。（あなたのホームページが何で作られているか？な人はお問い合わせください） WordPressは、積極的に保守されていますか？ WordPress.orgでは、「積極的に保守されている5.n系統の最新版以外の以下のバージョンは、安全に使用することはできません。」と公式に表明しています。以下に、WordPressの、脆弱性とバージョンの推移をお知らせします。
イイネ.biz
2026.02.05
]]>