javascript

ブログ更新ってめんどくさい ブログ更新は面倒くさい。 そんなこと分かり切っている。 なかでも面倒なことの1つにアイキャッチ画像の選定がある。 面倒なことを楽にできるのがエンジニアの特権だ。 ということでアイキャッチ画像を簡単に作れるようにした。 作成されるアイキャッチ画像 本ツールを作成できるアイキャッチ画像はこんな感じ。 「本ツールを作成できるアイキャッチ画像」の部分を簡単に変更できる。 作成するうえでの考え方 JavaScriptのCanvasに背景画像を描画する その上にCanvas で文字を書く 作成したコード <div id="creatEyeCatch"> <div class="input"> <input type="text" id="input" placeholder="記事タイトルを記入する"> </div> <canvas class="canvas" id="canvas--background" width="788px" height="486px"></canvas> <div class="operation"> <button id="deleteTitle">タイトルを削除</button> </div> </div> <script> // var const deleteTitle = document.getElementById('deleteTitle') // 背景CANVASの作成 const canvasGround = document.getElementById('canvas--background') const ctxGround = canvasGround.getContext('2d') const nove = new Image(); nove.src = '画像のパス'; ctxGround.drawImage(nove, 0, 0, canvasGround.width, canvasGround.height); // 入力されたタイトルを描画する関数 const drawFont = (el) => { ctxGround....

記事に目次をつけよう 目次があれば、結末まですぐに飛ぶことができる。 時間に追われる現代人にはなくてはならない機能である。 そこで本サイトに目次を導入した。 プラグインは使いたくないよう 個人的にプラグインには頼りたくない。 理由はシンプルで楽しくないからである。 どうせ作るなら自分自身の力で作成したい。 なので今回も自作した。 目次を挿入するための考え方 やりたいことはページが開かれた時に記事に目次を挿入する。 で、対象はh2タグとh3タグとする。 つまり、記事内にh2タグとh3タグがあるかを判定し、あればそれに対応する目次を挿入する。 実現コードはこちら // 目次を生成 let secondIdCount = 1 let ThirdIdCount = 1 const headingSecond = document.querySelector('.article-detail')?.querySelectorAll('h2') const headingThird = document.querySelector('.article-detail')?.querySelectorAll('h3') if (headingSecond !== undefined || headingThird !== undefined) { headingSecond.forEach(el => { el.id = `tocSecond-${secondIdCount}` secondIdCount++ }); headingThird.forEach(el => { el.id = `tocThird-${ThirdIdCount}` ThirdIdCount++ }); const target = document.querySelectorAll(`[id^='toc']`) const insertTarget = document.querySelector('.article-table-of-contents-insert') if (target.length === 0) { document....