ブログ更新ってめんどくさい ブログ更新は面倒くさい。 そんなこと分かり切っている。 なかでも面倒なことの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....

Wordpressのタグがひっちゃかめっちゃかになった過去 かつて、タグに翻弄されていたことがある。 カテゴリはチェックボックスで過去に設定したカテゴリを投稿画面で見ることができるのだが、タグはなぜかそれができない。 例えば、「HTML」と過去に投稿したことがあったのだが、次に書くときは「html」と書いてしまうかもしれない。 その時点で2つは別になってしまうのである。 そこでタグもチェックボックスにしようと思いついた。 タグをチェックボックスにする実現コードはこちら //タグをチェックボックス表示に function re_register_post_tag_taxonomy() { global $wp_rewrite; $rewrite = array( 'slug' => get_option('tag_base') ? get_option('tag_base') : 'tag', 'with_front' => !get_option('tag_base') || $wp_rewrite->using_index_permalinks(), 'ep_mask' => EP_TAGS, ); $labels = array( 'name' => _x('Tags', 'taxonomy general name'), 'singular_name' => _x('Tag', 'taxonomy singular name'), 'search_items' => __('Search Tags'), 'popular_items' => __('Popular Tags'), 'all_items' => __('All Tags'), 'parent_item' => null, 'parent_item_colon' => null, 'edit_item' => __('Edit Tag'), 'view_item' => __('View Tag'), 'update_item' => __('Update Tag'), 'add_new_item' => __('Add New Tag'), 'new_item_name' => __('New Tag Name'), 'separate_items_with_commas' => __('Separate tags with commas'), 'add_or_remove_items' => __('Add or remove tags'), 'choose_from_most_used' => __('Choose from the most used tags'), 'not_found' => __('No tags found....

記事に目次をつけよう 目次があれば、結末まですぐに飛ぶことができる。 時間に追われる現代人にはなくてはならない機能である。 そこで本サイトに目次を導入した。 プラグインは使いたくないよう 個人的にプラグインには頼りたくない。 理由はシンプルで楽しくないからである。 どうせ作るなら自分自身の力で作成したい。 なので今回も自作した。 目次を挿入するための考え方 やりたいことはページが開かれた時に記事に目次を挿入する。 で、対象は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....

FTPでファイルをアップロードするのが面倒くさい 今まで多くの人がそうであるように、 サイト作成 Githubに最新バージョンをプッシュ FileZillaをしようしてサーバーにデプロイ 修正 Githubに最新バージョンをプッシュ FileZillaをしようしてサーバーにデプロイ というフローを踏んでサイトを運用してきた。 が、これが面倒でしかたない。 どうせGithubにあげたものをデプロイするのであれば、プッシュと同時にデプロイができればいいのに…！ レンタルサーバーでもできるのか？ Firebase Hosting、Netlify …、などを使えばできることは知っている。 しかしレンタルサーバーでもできるのか？ 正直レンタルサーバーは上記サーバーに比べて劣るイメージがある。 エックスサーバーで簡単にできた まずはエックスサーバー万歳三唱🙌🙌🙌 本サイトはエックスサーバーを作っているのだが、エックスサーバーならGithub Action と連携できることを知った。 これで今までのフローとストレスと労力が半減された。 さらには常に最新バージョンがデプロイされるという先祖返りの危機もなくなった。 最後にエックスサーバー万歳三唱🙌🙌🙌 [sc name=“exserver_all_unlimited” ][/sc] どうやって実現するのか すごく簡単なので、特に考えすぎずに実行してほしい。 エックスサーバー側の設定 特にないけれど、エックスサーバーのサーバーパネルで ftpサーバのホスト ftpサーバのアカウント名 ftpサーバのパスワード を確認してメモをしておく。 参考：FTPソフトの設定 | レンタルサーバーならエックスサーバー Github側の設定 対象リポジトリのSettings > Secrets に下記情報を入力する。 FTP_PASSWORD → ftpサーバのホスト FTP_SERVER → ftpサーバのアカウント名 FTP_USERNAME → ftpサーバのパスワード deploy.ymlの作成 対象リポジトリ直下に.github/workflows/ディレクトリを作成し、その下にdeploy.ymlファイルを設置する。 そこに下記情報を入力すれば完了。 on: push: branches: - main name: Deploy jobs: FTP-Deploy-Action: name: FTP-Deploy-Action runs-on: ubuntu-latest steps: - uses: actions/checkout@main - name: FTP-Deploy-Action uses: SamKirkland/FTP-Deploy-Action@2....