// urlapi.me — SP APP // Top nav with hamburger, scroll-triggered sticky CTA, Tweaks (hero copy variants). const { useState: spaUS, useEffect: spaUE } = React; // ── viewport hook ───────────────────────────────────── function useIsMobile(breakpoint = 768) { const [isM, setIsM] = spaUS(() => typeof window !== "undefined" && window.matchMedia(`(max-width: ${breakpoint}px)`).matches ); spaUE(() => { const mq = window.matchMedia(`(max-width: ${breakpoint}px)`); const fn = () => setIsM(mq.matches); fn(); if (mq.addEventListener) mq.addEventListener("change", fn); else mq.addListener(fn); return () => { if (mq.removeEventListener) mq.removeEventListener("change", fn); else mq.removeListener(fn); }; }, [breakpoint]); return isM; } // ── tweak defaults (HOST PARSES THIS BLOCK) ─────────── const SP_TWEAKS = /*EDITMODE-BEGIN*/{ "heroCopy": "asset" }/*EDITMODE-END*/; // ── Top Nav with hamburger ──────────────────────────── function SPNav({ onOpenMenu }) { const [scrolled, setScrolled] = spaUS(false); spaUE(() => { const fn = () => setScrolled(window.scrollY > 6); fn(); window.addEventListener("scroll", fn, { passive: true }); return () => window.removeEventListener("scroll", fn); }, []); return ( ); } // ── Hamburger overlay (full-screen) ─────────────────── function SPMenu({ open, onClose }) { spaUE(() => { if (open) { document.body.style.overflow = "hidden"; } else { document.body.style.overflow = ""; } return () => { document.body.style.overflow = ""; }; }, [open]); const links = [ ["機能", "#features"], ["3つの武器", "#pillars"], ["API / MCP", "#developer"], ["料金", "#pricing"], ["FAQ", "#faq"], ["TQO 白書", "/tqo"], ["Docs", "/docs/"], ["Status", "/status"], ]; return (
{/* backdrop */}
{/* drawer */}
{/* header */}
urlapi.me
{/* links */}
    {links.map(([l, h], i) => (
  • {l}
    • ))}
{/* footer block */}
{/* lang */}
JP EN
{/* primary CTA */} 無料ではじめる

© 2026 株式会社9lick.me
AIで完結する、トラッキング & データ分析。

); } // ── Sticky bottom CTA (appears after scroll) ────────── function SPStickyCTA() { const [show, setShow] = spaUS(false); spaUE(() => { const fn = () => { // show after scrolling 1 viewport, hide near final CTA & footer const y = window.scrollY; const docH = document.documentElement.scrollHeight; const vh = window.innerHeight; const nearBottom = y + vh > docH - 360; setShow(y > vh * 0.9 && !nearBottom); }; fn(); window.addEventListener("scroll", fn, { passive: true }); window.addEventListener("resize", fn); return () => { window.removeEventListener("scroll", fn); window.removeEventListener("resize", fn); }; }, []); return (
); } // ── SP Tweaks panel (hero copy only) ────────────────── function SPTweaks() { const [active, setActive] = spaUS(false); const [tweaks, setTweaks] = spaUS(SP_TWEAKS); spaUE(() => { const onMsg = (e) => { const d = e.data || {}; if (d.type === '__activate_edit_mode') setActive(true); else if (d.type === '__deactivate_edit_mode') setActive(false); }; window.addEventListener('message', onMsg); window.parent.postMessage({ type: '__edit_mode_available' }, '*'); return () => window.removeEventListener('message', onMsg); }, []); // expose to app spaUE(() => { window.__SP_TWEAKS = tweaks; window.dispatchEvent(new CustomEvent('sp-tweaks-changed')); }, [tweaks]); const set = (k, v) => { setTweaks(t => { const n = { ...t, [k]: v }; window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*'); return n; }); }; if (!active) return null; const options = [ { k: "asset", l: "データ資産", sub: "デフォルト" }, { k: "ai", l: "AIに任せろ", sub: "AI主役" }, { k: "api", l: "広告運用を取り戻す", sub: "API主役" }, ]; return (
Tweaks · Hero copy
{options.map(o => { const sel = tweaks.heroCopy === o.k; return ( ); })}
); } // ── tweak subscription hook ─────────────────────────── function useSPTweaks() { const [tweaks, setTweaks] = spaUS(() => window.__SP_TWEAKS || SP_TWEAKS); spaUE(() => { const fn = () => setTweaks({ ...window.__SP_TWEAKS }); window.addEventListener('sp-tweaks-changed', fn); return () => window.removeEventListener('sp-tweaks-changed', fn); }, []); return tweaks; } // ── SP App (root) ───────────────────────────────────── function SPApp() { const [menuOpen, setMenuOpen] = spaUS(false); const tweaks = useSPTweaks(); // ensure __SP_TWEAKS exists at first render so Hero gets the right copy spaUE(() => { if (!window.__SP_TWEAKS) window.__SP_TWEAKS = SP_TWEAKS; }, []); return ( <> setMenuOpen(true)} /> setMenuOpen(false)} /> {window.AboutTabs && }
); } window.SPApp = SPApp; window.useIsMobile = useIsMobile;