iPhoneアプリのporterでヘッダーを上部に固定する
Cosenseを扱うブラウザがSafari以外ならヘッダー位置を調整する。なのでおそらくSafari以外のブラウザを使うと変な挙動になると思われる。
code:script.js
// ====== Choiyaki 用 Cosense UserScript（header: .row + Safari判定） ======
(() => {
'use strict';
// Safari純正ブラウザかどうか判定
function isSafari() {
const ua = navigator.userAgent;
return /Safari/.test(ua) && /Version\//.test(ua);
}
// Safariなら何もしない
if (isSafari()) {
console.log('UserScript Safari detected → 補正スクリプト無効化'); return;
}
const headerSelector = '.navbar'; // ヘッダー要素のクラス
let header = null;
function findHeader() {
if (!document.body) return null;
return document.querySelector(headerSelector);
}
function adjustHeaderStyles(el) {
el.style.position = 'fixed';
el.style.top = '0';
el.style.left = '0';
el.style.right = '0';
el.style.zIndex = '10000';
el.style.transition = 'transform 150ms ease-out';
}
function updateHeaderOnKeyboard() {
const vv = window.visualViewport;
if (!vv) {
header.style.transform = '';
return;
}
const offsetTop = vv.offsetTop || 0;
const translateY = Math.max(0, offsetTop);
header.style.transform = translateY(${translateY}px);
}
function onFocusIn(event) {
const t = event.target;
if (!t) return;
const tag = t.tagName;
const isInput = (tag === 'INPUT' || tag === 'TEXTAREA' || t.isContentEditable === true);
if (!isInput) return;
window.requestAnimationFrame(updateHeaderOnKeyboard);
}
function onFocusOut(event) {
window.requestAnimationFrame(() => {
if (header) header.style.transform = '';
});
}
function init() {
header = findHeader();
if (!header) {
console.warn('UserScript header element (.row) not found.'); return;
}
adjustHeaderStyles(header);
if (window.visualViewport) {
window.visualViewport.addEventListener('resize', updateHeaderOnKeyboard, { passive: true });
window.visualViewport.addEventListener('scroll', updateHeaderOnKeyboard, { passive: true });
} else {
window.addEventListener('resize', updateHeaderOnKeyboard, { passive: true });
}
document.addEventListener('focusin', onFocusIn, true);
document.addEventListener('focusout', onFocusOut, true);
}
if (document.readyState === 'complete' || document.readyState === 'interactive') {
setTimeout(init, 50);
} else {
document.addEventListener('DOMContentLoaded', () => setTimeout(init, 50));
}
})();