目次
- Googlebotの三段階の旅
- サーバーサイドレンダリング（SSR）またはプリレンダリング
- ダイナミックレンダリングの実装
- レンダリングパスの最適化
- ポリフィルと差分提供の使用
- 意味のあるHTTPステータスコード
- ソフト404エラーの回避
- 正しいカノニカルタグの使用
- ロボットメタタグの効果的な使用
- タイトルとメタディスクリプションの強化
はじめに
JavaScript技術を使用して美しくインタラクティブなウェブサイトを開発するのに無数の時間を投資した結果、検索エンジンがコンテンツを効果的にインデックスできないことを発見したと想像してみてください。JavaScriptがウェブ体験をダイナミックにする一方で、SEO（検索エンジン最適化）には課題をもたらし、あなたのコンテンツの発見とランク付けを妨げる可能性があります。JavaScriptコンテンツがクロール可能であることを確保することは、あなたのウェブサイトがその潜在能力を最大限に引き出すために不可欠です。
JavaScriptはウェブサイトの構築方法を変革し、ウェブをよりインタラクティブで魅力的にする強力な機能を提供しています。しかし、この柔軟性には代償が伴います。検索エンジンはコンテンツを理解するためにJavaScriptを処理する必要がありますが、それはリソースを大量に消費し、時には問題が発生することがあります。したがって、JavaScriptコンテンツがクロール可能であることを確保することは、サイトの可視性を維持し、より広いオーディエンスが提供物にアクセスできるようにするための重要なステップです。
このブログでは、JavaScriptコンテンツが検索エンジンにアクセス可能であることを確保するための迷路を案内します。関与するプロセスを解き明かし、実行可能な戦略を探求し、検索エンジンの可視性を最適化するためのベストプラクティスを強調します。この投稿の終わりまでには、JavaScript駆動のウェブサイトのSEOを強化するための実用的な洞察と実行可能なステップを持つことができるようになります。それでは、始めましょう！
JavaScript SEOの基本を理解する
JavaScriptはダイナミックで魅力的なウェブ体験を作成するための無限の可能性を提供します。しかし、SEOにおいては独自の課題があります。JavaScriptに依存するウェブアプリケーションを発見可能にすることは、Googleなどの検索エンジンを通じてユーザーを引き付け保持するために不可欠です。GooglebotがJavaScriptとどのように対話するかを理解することは、JavaScriptコンテンツをクロール可能にするための第一歩です。
Googlebotの三段階の旅
-
クローリング: Googlebotはページを取得します。最初にrobots.txtファイルを読み取り、ページをクロールできるか確認します。許可されている場合、次に進みます。重要なJavaScriptファイルをrobots.txtでブロックすると、Googleがあなたのコンテンツをレンダリングしてインデックスすることを妨げる可能性があります。
-
レンダリングのためのキューイング: 初期のクローリングの後、ページはレンダリングのためにキューに入れられます。この段階は、Googleのリソースによって数秒から長くかかることがあります。
-
レンダリングとインデックス: Chromiumのエバーグリーンバージョンによってレンダリングされると、GooglebotはJavaScriptを実行し、HTMLを解析し、最終的にレンダリングされたコンテンツからURLをキューに入れてさらなるクローリングを行い、すべてのダイナミックコンテンツが適切に表示され、インデックスされることを確保します。
この理解は、検索の可視性のためにJavaScriptを最適化する基盤を築きます。
クロール可能性を確保するためのヒントとベストプラクティス
サーバーサイドレンダリング（SSR）またはプリレンダリング
これらのオプションは、コンテンツがクライアントに到達する前にサーバー側でレンダリングされるため、検索エンジンがコンテンツをより効率的にクロールできるようにします。サーバーサイドレンダリングにより、検索エンジンは完全にレンダリングされたHTMLファイルを受け取ることができ、クロールとインデックスが容易になります。Next.jsのような人気のあるフレームワークは、SEOを向上させるためにサーバーサイドレンダリングを活用しています。
ダイナミックレンダリングの実装
クライアントサイドに留まる必要があるサイトでは、ダイナミックレンダリングが代替手段となります。これは、クローラーに静的なHTMLバージョンを提供し、ユーザーにはダイナミックな体験を提供することを含みます。Googleはクライアントサイドのレンダリングをサポートしていますが、JavaScriptに大きく依存するとレンダリングが遅延し、クロール可能性に影響を及ぼすことがあります。FlyRankのAI駆動のコンテンツエンジンは、レンダリング戦略を効率的に補完する最適化されたコンテンツを生成するのに役立ちます。私たちのコンテンツ機能の詳細はこちら。
レンダリングパスの最適化
ウェブサイトの初期HTMLが目に見えるアクセス可能なコンテンツを迅速に認識できるようにすることを確保してください。これは、効率的なレンダリング戦略を採用し、重要なリソースを検索エンジンからすぐにアクセスできるようにすることで達成されます。重要なコンポーネントのためにクライアントサイドのJavaScriptを最小化することなどの作業が、レンダリング時間を短縮し、コンテンツへのボットのアクセスを向上させることができます。
ポリフィルと差分提供の使用
JSフレームワークは急速に進化していますが、すべての機能がGoogleによって包括的にレンダリングされるわけではありません。ポリフィルを統合することで、機能がさまざまなブラウザ環境で正常に動作することを確保します。差分提供は特定のブラウザに機能を供給し、クロール可能性に影響を与えることなく最適な表示と機能を確保します。
意味のあるHTTPステータスコード
Googlebotのインデックス作成アクションを導くために明確なHTTPステータスコードを提供し、存在しないページに対しては404エラーを使用するなど、コンテンツが移動された場合には301リダイレクトを使用して、サイト内のスムーズなナビゲーションとインデックスを確保します。
ソフト404エラーの回避
シングルページアプリケーション（SPA）では、ビュー間を移動するためにフラグメントの代わりにHistory APIを使用し、ソフト404のような落とし穴を避けて、URLが検索エンジンによってインデックスされるためにアクセス可能かつ明確であることを確保します。
正しいカノニカルタグの使用
カノニカルタグが適切に構成されていることを確認し、検索エンジンがインデックス用の正しいURLを特定できるようにします。JavaScriptはこれらのタグを注入できますが、可能な限りサーバーサイドの手法を使用することが、クライアントレベルでの設定の問題を避けるためには理想的です。
ロボットメタタグの効果的な使用
ロボットメタタグを慎重に使用して、重要なページを誤ってブロックすることなくインデックス作成の挙動を制御します。適切なJavaScript注入技術により、ダイナミックコンテンツがアクセス可能でありながら、検索エンジンへの可視性の管理が可能です。
タイトルとメタディスクリプションの強化
JavaScriptは、ページのコンテキストに意味のあるメタディスクリプションやタイトルを動的に生成できます。ユニークで記述的な
とメタディスクリプションは、ユーザーと検索エンジンの両方があなたのコンテンツをよりよく解釈するのに役立ちます。</p>
<h2>実際の例とケーススタディ</h2>
<p>これらの原則の成功した適用を示すために、FlyRankのさまざまなビジネスとのコラボレーションによりSEOの成果に驚くべき改善が得られました。</p>
<ul>
<li><p>「<a href="https://flyrank.com/blogs/case-studies/hulkapps">HulkAppsケーススタディ</a>」では、FlyRankはレンダリングの最適化と構造化コンテンツの実装を含む戦略を通じて、オーガニックトラフィックを10倍に増加させるのに成功しました。</p>
</li>
<li><p>同様に、<a href="https://flyrank.com/blogs/case-studies/releasit">Releasit</a>のために、FlyRankはウェブプレゼンスを洗練させ、エンゲージメントと可視性を大幅に向上させました。</p>
</li>
</ul>
<p>これらの例は、JavaScriptコンテンツの可視性を管理するために最先端の戦術を採用することの効果を強調し、その結果、インデックス作成とパフォーマンスの向上につながります。</p>
<h2>アクセシビリティの役割</h2>
<p>ウェブサイトはすべてのユーザー、特にJavaScriptを実行しないブラウザを使用するユーザーにとってナビゲーション可能で使用可能である必要があります。重要なコンテンツがJavaScriptへの大きな依存なしに利用可能になることを確認してください。テキストモードでの表示レンダリングやツールを使用してのテストは、コンテンツが期待通りに表示されることを確認するための実用的な戦略です。</p>
<h2>結論</h2>
<p>JavaScriptコンテンツのクロール可能性は、ウェブサイトの検索ランキングにおける成功を左右する重要な要素です。レンダリング技術とSEO原則の戦略的使用が強力な役割を果たす一方で、SEOの進化する性質に常に適応することも同様に重要です。</p>
<p>検索エンジンとのJavaScriptインタラクションの核心を理解し、サーバーサイドレンダリングや意味のあるメタ実装などの証明されたSEOプラクティスを採用することで、あなたのサイトは可視性、関連性、競争力を維持できます。FlyRankのデータ駆動の戦略を活用することで、あなたのダイナミックコンテンツがより広範で関与したオーディエンスに届くようにサイトのデジタルフットプリントを効果的に強化できます。<a href="https://flyrank.com/pages/our-approach">私たちのアプローチ</a>。</p>
<p>ウェブアプリケーションのSEOをさらに洗練させるために、FlyRankのローカライズコンテンツ提供を活用して、国際市場への参入を自然にスケールし維持できます。<a href="https://flyrank.com/pages/localization">ローカリゼーションサービス</a>。</p>
<h2>よくある質問</h2>
<p><strong>Q1: メタタグ（説明やカノニカルURLなど）を設定するためにJavaScriptを使用できますか？</strong><br>はい、JavaScriptはカノニカルURLや説明を含むメタタグを動的に設定できます。しかし、堅牢なSEOのためには、できるだけサーバーサイドにこれらを配置することを検討してください。いくつかの検索エンジンはJavaScriptを包括的に実行しないかもしれません。</p>
<p><strong>Q2: サーバーサイドレンダリングはJavaScriptが重いウェブサイトのSEOをどのように改善しますか？</strong><br>サーバーサイドレンダリング（SSR）は、検索エンジンボットに事前にレンダリングされたHTMLページを提供し、追加のJavaScriptを実行せずにコンテンツに直接アクセスさせることで、クローリングとインデックス作成プロセスを簡素化します。</p>
<p><strong>Q3: 古いブラウザとの互換性のためにJavaScript機能をテストする必要がありますか？</strong><br>はい、ポリフィルを利用して古いブラウザでJavaScript機能が正しく動作することを保証し、ユーザーエクスペリエンスとSEOのクロール可能性を向上させます。</p>
<p><strong>Q4: FlyRankは国際的なコンテンツのリーチをどのように向上させますか？</strong><br>FlyRankの<a href="https://flyrank.com/pages/localization">ローカリゼーションサービス</a>は、さまざまな言語と文化に合わせてあなたのサイトを適応させ、国際オーディエンスへの最適な配信とコンテキストの関連性を保証し、その結果、リーチとエンゲージメントを広げます。</p>
<p>FlyRankによって提供される主要なSEO戦略に沿って進化し続けることで、現在のコンプライアンスを保証し、検索エンジン技術の将来の進歩に備えます。</p>
</div>
<div class="lg:w-1/3 text-gray mt-16 sticky top-[112px] lg:h-screen">
<div class="bg-white text-center p-5 rounded-lg mb-8">
<img
src="https://cdn.shopify.com/s/files/1/0609/8023/2259/files/envelope-icon.svg?v=1732181353"
alt="Envelope Icon"
class="mx-auto"
>
<div class="text-dark font-extrabold mb-5 uppercase text-xl">Enjoy content like this?</div>
<div class="text-dark text-xl mb-3">Join our newsletter and 20,000 enthusiasts</div>
<div class="sidebar-newsletter opacity-0 transition-opacity duration-500 h-[129px]">
<div id="shopify-block-AOFJqZjlUdWtqOXZib__forms_inline_9wMQFJ" class="shopify-block shopify-app-block"><div
id='AOFJqZjlUdWtqOXZib__forms_inline_9wMQFJ'
data-form-root='true'
data-forms-id='forms-root-254557'
data-forms-text-color='#0f1217'
data-forms-button-background-color='#0f1217'
data-forms-button-label-color='#ffffff'
data-forms-links-color='#1878b9'
data-forms-errors-color='#e02229'
data-forms-text-alignment='center'
data-forms-alignment='center'
data-forms-padding-top='5'
data-forms-padding-right='0'
data-forms-padding-bottom='0'
data-forms-padding-left='0'
></div>
<script>
window['ShopifyForms'] = {
...window['ShopifyForms'],
currentPageType: "article"
};
</script>
</div>
</div>
</div>
<div class="bg-dark-800 text-center p-5 rounded-lg">
<img
src="https://cdn.shopify.com/s/files/1/0609/8023/2259/files/download-icon.svg?v=1732109891"
alt="Download Icon"
class="mx-auto mb-3"
>
<div class="text-xl mb-8">
<span class="font-bold">DOWNLOAD FREE</span><br>
BACKLINK DIRECTORY
</div>
<a
href="/cart/41940050214979:1?checkout&attributes[first_visit]=%2Fja%2Fblogs%2Fseo-hub%2Fhow-to-ensure-javascript-content-is-crawlable"
class="btn btn-green w-full"
>
Download
</a>
</div>
</div>
</div>
</div>
</div>
<style>
table tr:first-child {
background-color: #86628d;
}
table th:first-child,
table td:first-child {
font-weight: bold;
}
th,
td {
border: 1px solid #ccc;
padding: 10px;
text-align: left;
}
</style>
</section><div id="shopify-section-template--16867507732547__demo_promo_K9myJY" class="shopify-section demo"><div class=" px-6 md:px-8 py-12 lg:py-32 bg-green">
<div class="container text-dark text-center">
<div class="w-full md:w-8/12 mx-auto">
<h2 class="mb-8 text-4xl sm:text-5xl">あなたのブランドを新たな高みへと押し上げましょう</h2>
<div class="mb-5"><p>音の中を打破し、オンラインで持続的な影響を与える準備ができたら、FlyRankと力を合わせる時です。今日、ご連絡ください。あなたのブランドをデジタル支配の道に乗せましょう。</p></div>
<div class="flex flex-col">
<div>
<a class="btn btn-dark text-gray mt-8" href="/ja/pages/%E9%80%A3%E7%B5%A1">
デモをリクエストする
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer id="shopify-section-footer" class="shopify-section footer"><div class="footer-container px-6 md:px-8 py-16 md:py-24 overflow-hidden relative">
<img
src="https://cdn.shopify.com/s/files/1/0609/8023/2259/files/footer-background.png?v=1730813000"
alt="Image Background"
class="object-contain absolute w-full z-0 bottom-0 2xl:bottom-auto 2xl:top-1/3"
>
<div class="container flex flex-col-reverse md:flex-row z-10 relative flex-wrap">
<div class="w-full md:w-1/2 text-gray mt-16 md:mt-0">
<div>
<img
src="https://cdn.shopify.com/s/files/1/0609/8023/2259/files/flyrank-logo-large.svg?v=1730983842"
alt="logo"
>
</div>
<div class="w-full md:w-2/3 my-12"><p>オンラインでの影響を与える準備ができたら、FlyRankと力を合わせる時です。</p></div>
<div class="flex">
<a
href="https://x.com/flyrank_ai"
target="_blank"
class="bg-green w-[50px] h-[50px] inline-block flex justify-center items-center mr-3 rounded-full hover:opacity-[0.8] transition-all"
><img
src="https://cdn.shopify.com/s/files/1/0609/8023/2259/files/icon-twitter.svg?v=1729166778"
alt="twitter"
></a>
<a
href="https://www.facebook.com/people/FlyRank/61566930002846/"
target="_blank"
class="bg-green w-[50px] h-[50px] inline-block flex justify-center items-center mr-3 rounded-full hover:opacity-[0.8] transition-all"
><img
src="https://cdn.shopify.com/s/files/1/0609/8023/2259/files/icon-facebook.svg?v=1729166777"
alt="facebook"
></a>
<a
href="https://www.instagram.com/flyrank.ai/"
target="_blank"
class="bg-green w-[50px] h-[50px] inline-block flex justify-center items-center mr-3 rounded-full hover:opacity-[0.8] transition-all"
><img
src="https://cdn.shopify.com/s/files/1/0609/8023/2259/files/icon-instagram.svg?v=1729166777"
alt="instagram"
></a>
</div>
</div>
<div class="w-full md:w-1/2 grid gap-4 grid-cols-2 sm:grid-cols-3">
<div class="">
<div class="text-dark-100 mb-5 sm:mb-12 uppercase font-medium">会社</div>
<ul>
<li class="mb-3">
<a href="/ja/pages/%E7%B4%84" class="text-gray-50 capitalize">
私たちについて
</a>
</li>
<li class="mb-3">
<a href="/ja/pages/%E7%A7%81%E3%81%9F%E3%81%A1%E3%81%AE%E3%82%A2%E3%83%97%E3%83%AD%E3%83%BC%E3%83%81" class="text-gray-50 capitalize">
私たちのアプローチ
</a>
</li>
<li class="mb-3">
<a href="/ja/pages/%E5%8F%82%E7%85%A7" class="text-gray-50 capitalize">
リファーラル
</a>
</li>
<li class="mb-3">
<a href="https://www.flyrank.com/pages/contact?utm_source=website&utm_medium=footer" class="text-gray-50 capitalize">
お問い合わせ
</a>
</li>
</ul>
</div>
<div class="">
<div class="text-dark-100 mb-5 sm:mb-12 uppercase font-medium">探索する</div>
<ul>
<li class="mb-3">
<a href="/ja/pages/%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84" class="text-gray-50 capitalize">
記事
</a>
</li>
<li class="mb-3">
<a href="/ja/blogs/%E3%82%B1%E3%83%BC%E3%82%B9%E3%82%B9%E3%82%BF%E3%83%87%E3%82%A3" class="text-gray-50 capitalize">
ケーススタディ
</a>
</li>
<li class="mb-3">
<a href="/ja/pages/%E3%83%97%E3%83%A9%E3%82%A4%E3%82%B7%E3%83%B3%E3%82%B0" class="text-gray-50 capitalize">
プライシング
</a>
</li>
<li class="mb-3">
<a href="/ja/pages/%E3%82%88%E3%81%8F%E3%81%82%E3%82%8B%E8%B3%AA%E5%95%8F" class="text-gray-50 capitalize">
よくある質問
</a>
</li>
</ul>
</div>
<div class="mt-5 sm:mt-0">
<div class="text-dark-100 mb-5 sm:mb-12 uppercase font-medium">法的</div>
<ul>
<li class="mb-3">
<a href="/ja/policies/terms-of-service" class="text-gray-50 capitalize">
利用規約
</a>
</li>
<li class="mb-3">
<a href="/ja/policies/privacy-policy" class="text-gray-50 capitalize">
プライバシーポリシー
</a>
</li>
<li class="mb-3">
<a href="/ja/policies/refund-policy" class="text-gray-50 capitalize">
マネーバック保証
</a>
</li>
<li class="mb-3">
<a href="https://calendly.com/flyrank/30min?utm_source=website&utm_medium=footer" class="text-gray-50 capitalize">
デモをリクエストする
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="text-gray w-full mt-24 text-sm">© 2025 FlyRank - All Rights Reserved</div>
</div>
</div>
</footer>
<div
class="minicart-wrapper"
x-data
x-show="$store.global.isMinicartVisible"
x-on:click.outside="$store.global.isMinicartVisible = false"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="off-screen-right"
x-transition:enter-end="right-50"
x-transition:leave="transition ease-in duration-300"
x-transition:leave-start="right-50"
x-transition:leave-end="off-screen-right"
x-cloak
:aria-hidden="$store.global.isMinicartVisible ? 'false' : 'true'"
aria-modal="true"
role="dialog"
>
<div id="shopify-section-minicart" class="shopify-section"><div
class="minicart"
data-ajax-cart-section
x-cloak>
<div class="title-row">
<h2 id="minicart-label" class="text-cloud-burst-500">
Cart
</h2>
<button @click="$store.global.isMinicartVisible = false">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"/>
</svg>
</button>
</div>
<div class="item-count-message">
You have
<span
class="count"
style="font-weight: 600"
x-data>0
</span>
<span x-data></span>
in your cart!
</div>
<hr/>
<ul class="items-list" data-ajax-cart-section-scroll>
</ul>
<hr/>
<div class="subtotal">
<p class="title">Subtotal
</p>
<p class="amount">$0.00
</p>
</div>
<a class="view-cart-details-link" href="/ja/cart">
View Cart Details
</a>
</div>
<style>
/* Animation classes */
.transition {
transition-property: all;
}
.duration-300 {
transition-duration: 300ms;
}
.ease-out {
transition-timing-function: ease-out;
}
.ease-in {
transition-timing-function: ease-in;
}
.off-screen-right {
right: -100px;
transform: translateX(120%);
}
.right-50 {
right: 50px;
transform: translateX(0%);
}
@media(max-width: 576px) {
.right-50 {
right: 20px;
transform: translateX(0%);
}
}
/* Main styles */
.minicart-wrapper {
position: fixed;
top: 50px;
right: 50px;
z-index: 100;
}
@media(max-width: 576px) {
.minicart-wrapper {
right: 20px;
}
}
.minicart {
width: 288px;
height: auto;
padding: 20px;
background: #fff;
border-radius: 6px;
box-shadow: 0 30px 130px -8px rgba(0, 0, 0, 0.25);
}
.minicart .view-cart-details-link {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
width: 100%;
height: 43px;
font-weight: 600;
background: white;
border: 2px solid black;
outline: none;
text-decoration: none;
}
.minicart .view-cart-details-link:hover {
cursor: pointer;
color: white;
background: black;
}
.minicart hr {
margin-bottom: 20px;
}
.minicart .title-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.minicart .title-row h2 {
margin: 0;
}
.minicart .title-row button {
border: none;
background: transparent;
cursor: pointer;
}
.minicart .title-row button svg {
display: block;
height: 16px;
}
.minicart .items-list {
list-style: none;
padding-left: 0;
max-height: 300px;
overflow: auto;
}
.minicart .item-count-message {
margin-bottom: 10px;
font-size: 0.8em;
}
.minicart .item-count-message .minicart--item-count {
font-weight: 600;
}
.minicart .item {
display: flex;
margin-bottom: 10px;
width: 100%;
}
.minicart .item .product-thumb-wrapper {
width: 100px;
height: 120px;
position: relative;
flex: 0 0 100px;
}
.minicart .item .product-thumb-wrapper img {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
height: 100%;
width: 100%;
object-fit: cover;
object-position: center;
}
.minicart .item .item-details {
margin-left: 10px;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.minicart .item .item-details p {
margin: 0;
}
.minicart .item .item-details .option-label {
font-weight: 600;
}
.minicart .item .item-details .title {
font-size: 0.9em;
font-weight: 600;
margin-top: 0;
margin-bottom: 6px;
}
.minicart .item .item-details .options {
margin-bottom: 2px 0;
}
.minicart .item .item-details .option {
margin: 0 0 2px;
font-size: 0.8rem;
}
.minicart .item .item-details .quantity-row {
margin: 2px 0;
}
.minicart .item .item-details .quantity-row span {
margin: 0 0 2px;
font-size: 0.8rem;
}
.minicart .item .item-details .option:last-of-type {
margin-bottom: 0;
}
.minicart .item .item-details .price {
margin-top: auto;
}
.minicart .item .item-details .remove {
font-size: 0.6em;
margin-top: auto;
}
.minicart .subtotal {
margin: 20px 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.minicart .subtotal .title {
height: 16px;
margin: 0;
}
.minicart .subtotal .amount {
font-weight: 600;
font-size: 1.2em;
margin: 0;
}
.minicart a {
color: black;
text-decoration: none;
}
.minicart a:hover {
text-decoration: underline;
}
</style></div>
</div>
<div id="shopify-section-predictive-search-main" class="shopify-section site-header w-full shadow-md p-shell fixed top-0 z-30 bg-white">
<script src="//www.flyrank.com/cdn/shop/t/34/assets/predictive-search.js?v=82854867885586265471741865223" defer="defer"></script>
<predictive-search
x-data
x-cloak
id="predictive-search"
x-show="$store.global.isPredictiveSearchVisible"
x-trap.inert="$store.global.isPredictiveSearchVisible"
x-transition.opacity
aria-modal="true"
@keyup.escape="$store.global.isPredictiveSearchVisible = false"
>
<div
id="predictive-search-form-wrapper"
class="w-full bg-white fixed inset-x-0 top-0 z-40 pt-8 pb-14 shadow-md"
>
<h2 class="text-base !font-normal max-w-max mx-auto font-palatino mb-3">
お探しのものは何ですか？
</h2>
<form
action="/ja/search"
method="get"
role="search"
class="w-full max-w-[422px] mx-auto"
@click.outside="$store.global.isPredictiveSearchVisible = false"
>
<div class="flex gap-x-3 w-full relative">
<input
id="predictive-search-input"
class="slayed-input w-full"
type="search"
name="q"
value=""
role="combobox"
aria-expanded="false"
aria-owns="predictive-search-results"
aria-controls="predictive-search-results"
aria-haspopup="listbox"
aria-autocomplete="list"
>
<label for="predictive-search-input" class="sr-only"> Search </label>
<button
for="predictive-search-input"
class="pill-button"
>
Search
</button>
<button
type="button"
class="absolute -right-[15px] top-1/2 -translate-y-1/2 translate-x-full"
@click="$store.global.isPredictiveSearchVisible = false"
>
<span class="sr-only">Close</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"/>
</svg>
</button>
</div>
<input name="options[prefix]" type="hidden" value="last">
<div id="predictive-search-target" tabindex="-1"></div>
</form>
</div>
</predictive-search>
</div>
<div id="shopify-section-modal" class="shopify-section section-modal">
<dialog
id="dialog-modal-example"
x-data="modal"
x-init="init($el)"
class="max-w-md rounded-md"
@click="close($event)"
>
<form action="" class="p-12">
<div class="prose">
<h1>モーダルタイトル</h1>
<p><p>モーダルの説明。ロレム・イプサムは、コンセンサスに関するエリートたちの著名な課題についてのものです。運命的な愛がしばしば欠落してしまうことに疑問を持たれています。このような場合、情熱的な責任感を持った一歩を踏み出すことは可能でしょうか？</p></p>
<button type="button" @click="open = false" class="btn rounded-none">
Close
</button>
</div>
</form>
</dialog>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('modal', () => ({
componentElement: document.querySelector('#dialog-modal-example'),
open: false,
init(dialog) {
if (!dialog) {
return
}
Alpine.effect(() => {
if (this.open) {
dialog.showModal()
document.querySelectorAll('body > *:not(#shopify-section-modal)').forEach((element) => {
element.setAttribute('aria-hidden', 'true')
element.setAttribute('inert', '')
})
document.querySelector('body').classList.add('overflow-hidden')
} else {
dialog.close()
document.querySelectorAll('body > *:not(#shopify-section-modal)').forEach((element) => {
element.removeAttribute('aria-hidden')
element.removeAttribute('inert')
})
document.querySelector('body').classList.remove('overflow-hidden')
}
})
document.addEventListener('show-modal', () => {
this.open = true
})
document.addEventListener('close-modal', () => {
this.open = false
})
},
toggle() {
this.open = !this.open
},
close(event) {
if (event.target === this.componentElement) {
if (this.open) {
this.open = false
}
}
}
}))
})
</script>
<style>
#dialog-modal-example::backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
</style></div>
<script type="application/json" data-ajax-cart-initial-state>
{"note":null,"attributes":{},"original_total_price":0,"total_price":0,"total_discount":0,"total_weight":0.0,"item_count":0,"items":[],"requires_shipping":false,"currency":"USD","items_subtotal_price":0,"cart_level_discount_applications":[],"checkout_charge_amount":0}
</script>
<div id="shopify-block-AZFd6aGFnS21FS1hVa__13768625480086291342" class="shopify-block shopify-app-block"><script>
window['ShopifyForms'] = {
...window['ShopifyForms'],
currentPageType: "article"
};
</script>
</div><div id="shopify-block-Aajk0TllTV2lJZTdoT__15683396631634586217" class="shopify-block shopify-app-block"><script
id="chat-button-container"
data-horizontal-position=bottom_right
data-vertical-position=lowest
data-icon=chat_bubble
data-text=no_text
data-color=#89608e
data-secondary-color=#ffffff
data-ternary-color=#6a6a6a
data-domain=www.flyrank.com
data-shop-domain=www.flyrank.com
data-external-identifier=5QqDPyGbw2L4LPYPH2LFgD67SjacIZkJCvvcz866Sws
>
</script>
</div></body>
</html>
