説明

優先度

期限

担当者

サムネイル

サブアイテム

親アイテム

作成日時

名前

<script src="https://js.supascribe.com/v1/loader/q52w1HFiaKYx6fP23flZlqRwQ6f2.js" async></script>

<p style="text-align:center;font-size:12px;">© Shota Seshimo</p>

<style>
html.bp-switch * { transition: none !important; }
</style>


<script>
/* 常時レイアウト固定フラグ（後勝ち対策の保険） */
(function(){
  function lock(){ document.documentElement.classList.add('layout-locked'); }
  ['load','pageshow','hashchange','popstate'].forEach(evt=>{
    window.addEventListener(evt,()=>{
      lock();
      setTimeout(lock,0);
      setTimeout(lock,200);
    });
  });
  document.addEventListener('click',(e)=>{
    const a=e.target.closest('a[href^="/"], a[href^="#"]');
    if(a){
      setTimeout(lock,50);
      setTimeout(lock,300);
    }
  });
})();
</script>

<script>
(()=>{
  const BRAND_SEL=[
    '.header__logoArea','.header__brand','.siteTitle',
    'header .brand','header .site-name'
  ];
  const SEARCH_SEL=[
    '.header [aria-label*="Search" i]',
    '.header [aria-label*="検索"]',
    '.wraptas-search-btn','.notion-search-button','.notion-search'
  ];
  const HAMBURGER_SEL='.header__menuOpenBtn';

  const all = (sels)=> Array.from(document.querySelectorAll(sels.join(',')));

  function applyFixed(){
    const isMobile = matchMedia('(max-width:1023.98px)').matches;

    const brands  = all(BRAND_SEL);
    const searches= all(SEARCH_SEL);
    const burgers = Array.from(document.querySelectorAll(HAMBURGER_SEL));

    if (isMobile){
      const topY = 'calc(var(--pad-top) + var(--toolbar-nudge))';

      brands.forEach(el=>{
        el.style.setProperty('position','fixed','important');
        el.style.setProperty('left','16px','important');
        el.style.setProperty('top', topY, 'important');     // ← ここでバー内を微調整
        el.style.setProperty('z-index','1000','important');
        el.style.setProperty('margin','0','important');
        el.style.setProperty('padding','0','important');
      });

      searches.forEach(el=>{
        el.style.setProperty('position','fixed','important');
        el.style.setProperty('top', topY, 'important');     // ← 同じ高さ
        el.style.setProperty('right','16px','important');
        el.style.setProperty('left','auto','important');
        el.style.setProperty('bottom','auto','important');
        el.style.setProperty('z-index','1001','important');
        el.style.setProperty('display','inline-flex','important');
        el.style.setProperty('visibility','visible','important');
        el.style.setProperty('transform','none','important');
      });

      burgers.forEach(el=>{
        el.style.setProperty('position','fixed','important');
        el.style.setProperty('top', topY, 'important');     // ← 同じ高さ
        el.style.setProperty('right','56px','important');   // 検索の左
        el.style.setProperty('left','auto','important');
        el.style.setProperty('z-index','1000','important');
        el.style.setProperty('display','inline-flex','important');
      });

    }else{
      // PC幅：モバイルで付けたインラインstyleを確実に除去 → CSSに委ねる
      const reset = el=>{
        ['top','left','right','bottom','transform','display','visibility','z-index','margin','padding','position']
          .forEach(p=> el.style.removeProperty(p));
      };
      [...brands, ...searches, ...burgers].forEach(reset);
    }
  }

  const reapply=()=>{
    applyFixed();
    setTimeout(applyFixed,0);
    setTimeout(applyFixed,120);
    setTimeout(applyFixed,300);
  };

  addEventListener('load',reapply);
  addEventListener('pageshow',reapply);
  addEventListener('hashchange',reapply);
  addEventListener('popstate',reapply);
  addEventListener('resize', ()=>{ clearTimeout(window.__rf); window.__rf=setTimeout(reapply,120); });

  document.addEventListener('click',(e)=>{
    const a=e.target.closest('a');
    if(!a) return;
    const href=a.getAttribute('href')||'';
    if(href.startsWith('/')||href.startsWith('#')||href.startsWith(location.origin)){
      setTimeout(reapply,50);
      setTimeout(reapply,250);
    }
  });

  new MutationObserver(()=>applyFixed())
    .observe(document.documentElement,{childList:true,subtree:true,attributes:true});

  reapply();
})();
</script>


<script>
/* 現在URLと一致/包含するナビ＆ブランドリンクに aria-current="page" を付ける */
(() => {
  const LINK_SELS = [
    '.header__btns a','header nav a','.header nav a','header .globalNav a','header [role="navigation"] a',
    '.header__logoArea a','.header__brand a','.siteTitle a','header .brand a','header .site-name a'
  ];

  const normalize = (u) => {
    try {
      const url = new URL(u, location.origin);
      url.hash = ''; // #は無視
      // 末尾スラッシュ/index.html吸収
      url.pathname = url.pathname
        .replace(/\/index\.html?$/,'')
        .replace(/\/+$/,'/') || '/';
      // トラッキング系を除去（必要なら追加）
      const drop = ['utm_source','utm_medium','utm_campaign','utm_term','utm_content','gclid','fbclid'];
      drop.forEach(k => url.searchParams.delete(k));
      url.search = url.searchParams.toString() ? `?${url.searchParams.toString()}` : '';
      return url.toString();
    } catch { return u; }
  };

  const markCurrent = () => {
    const here = new URL(normalize(location.href));
    document.querySelectorAll(LINK_SELS.join(',')).forEach(a => {
      a.removeAttribute('aria-current');
      const raw = a.getAttribute('href'); if (!raw) return;
      const abs = new URL(normalize(raw), location.origin);

      // 完全一致 もしくは 「/works/」のような親パス一致（root除く）
      const exact = (abs.origin + abs.pathname + abs.search) === (here.origin + here.pathname + here.search);
      const starts = (abs.pathname !== '/' && here.pathname.startsWith(abs.pathname));

      if (exact || starts) a.setAttribute('aria-current','page');
    });
  };

  // 既存の reapply があるならそれにフック。ない場合はイベントで呼ぶ。
  const hook = () => {
    try {
      // 既存 reapply に合流（あなたのファイルの reapply を上で定義しているのであれば）
      const old = window.__wraptasReapply;
      window.__wraptasReapply = () => { old && old(); markCurrent(); };
    } catch {}
    markCurrent();
  };

  // 初回＋画面遷移/描画更新時に反映
  window.addEventListener('load', hook);
  window.addEventListener('pageshow', markCurrent);
  window.addEventListener('hashchange', markCurrent);
  window.addEventListener('popstate', markCurrent);
  new MutationObserver(() => markCurrent()).observe(document.documentElement, {subtree:true, childList:true});
})();
</script>


<script>
/* 画面の空白クリックでハンバーガーメニューを閉じる */
document.addEventListener('click',e=>{
  const menu=document.querySelector('.header__menu');
  const btn=document.querySelector('.header__menuOpenBtn');
  if(!menu||!btn) return;
  if(menu.contains(e.target)||btn.contains(e.target)) return;
  const closeBtn=menu.querySelector('button, .close, .closeBtn');
  if(closeBtn) closeBtn.click();
});
</script>

<script>
  (function () {
    var t;
    window.addEventListener('resize', function () {
      document.documentElement.classList.add('bp-switch');
      clearTimeout(t);
      t = setTimeout(function () {
        document.documentElement.classList.remove('bp-switch');
      }, 200);
    });
    window.addEventListener('orientationchange', function () {
      document.documentElement.classList.add('bp-switch');
      clearTimeout(t);
      t = setTimeout(function () {
        document.documentElement.classList.remove('bp-switch');
      }, 200);
    });
    window.addEventListener('pageshow', function () {
      document.documentElement.classList.remove('bp-switch');
    });
  })();
</script>

<script>
(function(){
  const BP = 1024;
  const Q = 'button[aria-label*="menu" i],button[aria-label*="メニュー" i],.hamburger,.menu-button,.nav__toggle,.header__menu';
  function syncHamburger(){
    const desktop = innerWidth > BP;
    document.querySelectorAll(Q).forEach(el=>{
      if (desktop){
        el.setAttribute('hidden','');
        el.style.display = 'none';
        el.classList.remove('open','is-open','active');
        el.setAttribute('aria-expanded','false');
      } else {
        el.removeAttribute('hidden');
        if (el.style.display === 'none') el.style.display = '';
      }
    });
  }
  addEventListener('load', syncHamburger);
  addEventListener('resize', ()=>{ clearTimeout(window.__hh); window.__hh=setTimeout(syncHamburger,120); });
})();
</script>

<script>
/* ハンバーガー：開いている時にもう一度押したら閉じる（モバイルのみ） */
(() => {
  const mq = matchMedia('(max-width:1023.98px)');
  const MENU_SEL = '.header__menu, .Header__menu, header [class*="menuPanel"], header [class*="MenuPanel"]';
  const isOpen = (m) =>
    m && (m.matches('.open,.is-open,.active,[aria-hidden="false"],[aria-expanded="true"]')
      || (getComputedStyle(m).display !== 'none' && m.getBoundingClientRect().height > 0));

  document.addEventListener('click', (e) => {
    const btn = e.target.closest('.header__menuOpenBtn');
    if (!btn || !mq.matches) return;

    const menu = document.querySelector(MENU_SEL);
    if (!menu) return;

    if (isOpen(menu)) {
      /* 既に開いていたら、開閉ボタンの2度押しで閉じる */
      e.preventDefault(); e.stopPropagation();
      (menu.querySelector('.close, .closeBtn, button[aria-label*="閉じる"], button[aria-label*="close" i]') || menu).click?.();
      menu.classList.remove('open','is-open','active');
      menu.setAttribute('aria-hidden','true');
      btn.setAttribute('aria-expanded','false');
    }
    /* 開いていない時は既存の（Wraptas側の）開く処理に任せる */
  }, true);
})();
</script>

<script>
(() => {
  function rerender(node=document){
    try{
      const i2svg = window.FontAwesome && FontAwesome.dom && FontAwesome.dom.i2svg;
      if (i2svg) i2svg({ node });
    }catch(e){}
  }
  // 初回＋イベントで数回実行（レース対策）
  ['DOMContentLoaded','load','pageshow','hashchange','popstate'].forEach(ev=>{
    addEventListener(ev, () => { setTimeout(rerender, 0); setTimeout(rerender, 200); });
  });
  // DOMに新要素が来たら都度実行
  new MutationObserver(muts=>{
    for (const m of muts) for (const n of m.addedNodes)
      if (n && n.nodeType === 1) rerender(n);
  }).observe(document.body, { childList:true, subtree:true });
})();
</script>

編集者、ディレクター。NPO法人bootopia代表理事。ご連絡、ご相談はお気軽に。

瀬下翔太

FASTFORWARD