この記事は最終更新日から1年以上経過しています。
JPGやPNGの画像をWebPに変換するツール
公開日：
更新日：
こんにちは。田村です。
JPGやPNGの画像をWebPに変換するツールを作成しました。
画像をアップロードするとZIP形式でダウンロードできます。
複数の画像にも対応していますがアップロードできる画像は最大100枚までです。
faviconにsvgを埋め込むジェネレーター
こんにちは。田村です。 faviconにsvgを表示したい場合に使えるジェネレーターを作成しました。 改行・余白の削除: .replace(/\s*\n\s*/g, '')でSVG全体を一行に整形。 エンコード: "を%22に、をそれぞれ%3Cと%3Eに変換。 変換 プレビュー: #preview { width: 100%; height: 400px; margin-top: 40px; background-color: var(--var-color-status-disabled); } function convertToFavicon() { const svgInput = document.getElementById('svgInput').value; if (!svgInput.trim()) { alert("SVGコードを入力してください。"); return; } // SVGを一行に変換 let compressedSVG = svgInput .replace(/\s*\n\s*/g, '') // 改行と余白を削除 .replace(/"/g, '%22') // "を%22に変換 .replace(/をエンコード const faviconLink = ``; // 出力に表示 const output = document.getElementById('output'); output.value = faviconLink; output.focus(); output.select(); // プレビュー用にデコードして表示 const preview = document.getElementById('preview'); const decodedSVG = compressedSVG.replace(/%22/g, '"').replace(/%3C/g, ''); preview.innerHTML = decodedSVG; }
スタッフブログ
アクセシビリティ方針ジェネレーター
こんにちは。田村です。 ウェブアクセシビリティ方針作成時に使えるジェネレーターを作成しました。 このツールを活用することで、ウェブアクセシビリティ方針の作成が効率的に行えるようになります。ぜひご活用ください。 ウェブアクセシビリティ方針策定ガイドライン 『JIS X 8341-3:2016』の要件としては、「対象範囲」と「適合レベル及び対応」を明記する必要があります。 また、要件にはありませんが、次の事項も明記しておくと良いでしょう。 必要に応じて追加してください。 - 目標を達成する期限 - 満たすことのできない達成基準 - 追加で目標とする達成基準 - 担当部署名 - 連絡手段（電話番号、Eメールアドレス等） - 把握している問題点及びその対応に関する考え方 - 試験結果を表示しているページへのリンク このツールでは次の項目を生成することができます。 - 対象範囲 - 目標とする適合レベル及び対応度 - 達成期限 - 例外事項 - お問い合わせ先 弊社でもサンプルページを用意しておりますので、ご参照ください。 ウェブアクセシビリティ方針（サンプル） ツールの使い方 使い方は、次の入力フィールドの項目を入力し、 「出力」ボタンを押すと項目に沿ったアクセシビリティ方針が表示されます。 表示された方針は「contenteditable="true"」が設定されているため、見た目を保持したまま直接修正することが可能です。 その後、「コードを表示」ボタンをクリックすると、HTML形式のアクセシビリティ方針が表示されます。 対象範囲 - ウェブサイトドメイン 目標とする適合レベル WCAG 2.0 WCAG 2.1 WCAG 2.2 目標とするレベル レベルA レベルAA レベルAAA 対応度 準拠 一部準拠 配慮 例外事項を表示する 表示する 達成期限 お問い合わせ部署 電話番号 受付可能時間 お問い合わせフォームURL 出力 ここに方針が表示されます。 コードを表示 const form = document.getElementById('policyForm'); const preview = document.getElementById('policyPreview'); const codeDisplay = document.getElementById('codeDisplay'); function formatDate(dateString) { const date = new Date(dateString); const year = date.getFullYear(); const month = String(date.getMonth() + 1).padStart(2, '0'); // 月は0から始まるので+1 const day = String(date.getDate()).padStart(2, '0'); return `${year}年${month}月${day}日`; } function generatePolicy() { const websiteDomain = form.websiteDomain.value || "『ドメイン』"; const complianceStandard = form.complianceStandard.value || "『目標基準』"; const complianceLevel = form.complianceLevel.value || "『目標レベル』"; const conformance = form.conformance.value || "『対応度』"; const deadline = form.deadline.value ? formatDate(form.deadline.value) : "『達成期限』"; const contactFormUrl = form.contactFormUrl.value; const department = form.department.value || "『お客様相談室』"; const phone = form.phone.value || "『電話番号』"; const businessHours = form.businessHours.value || "『受付可能時間』"; const showExceptions = form.exceptions.checked; // 基本のポリシー HTML テンプレート let policyHTML = ` ウェブアクセシビリティ方針 対象範囲 当社ウェブサイト（${websiteDomain}ドメイン配下にあるウェブサイト）とします。 目標とする適合レベル及び対応度 対象範囲に定義したウェブサイトについて、日本産業規格「JIS X 8341-3:2016 」及び${complianceStandard}、${complianceLevel}に${conformance}を目標としています。 本方針における「準拠・一部準拠・配慮」という対応度の表記は、情報通信アクセス協議会ウェブアクセシビリティ基盤委員会「ウェブコンテンツのJIS X 8341-3:2016 対応度表記ガイドライン – 2021年4月版」で定められた表記によるものです。 `; // 例外事項がオンの場合のみ表示 if (showExceptions) { policyHTML += ` 例外事項 以下は修正対応が困難であるため、目標の対象外とし、代替する手段で内容を説明するよう努めるものとします。 外部から提供されたコンテンツ、ウェブページ、画像、動画、PDF、SVG、表計算や文書作成ソフトで作成したデータ等 `; } policyHTML += ` 目標達成期限 ${deadline} お問い合わせ先 ${department}電話番号：${phone}受付可能時間：${businessHours} `; // お問い合わせフォームの URL が入力されている場合のみ追加 if (contactFormUrl) { policyHTML += ` ウェブアクセシビリティに関するご意見やお気づきの点がございましたら、お問い合わせフォームよりご連絡ください。 `; } preview.innerHTML = policyHTML; } function showCode() { // `policyPreview` の現時点の HTML を取得して `codeDisplay` に表示 codeDisplay.textContent = preview.innerHTML; codeDisplay.style.display = 'block'; // 選択可能にする const range = document.createRange(); range.selectNodeContents(codeDisplay); const selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); }
スタッフブログ