Sassyブログ

埼玉県在住のシステムエンジニアです。多ジャンルなブログですが、基本的にはIT関連の内容を中心に他のちょいちょい他ジャンルの記事も発信していきます。

IT・ソフトウェア

【ブログ運営者必見】記事校正に使える?校正サービスShodo(ショドー)を使ってみた

始めに どうもSassyです! 皆さんはブログの採取チェックにどれだけ時間をかけていますか? 私はサラッと目を通して気になったところは直して、後は気にせずそのままリリースしてしまっています。 そんな雑なチェックの為後々見返したときに、誤字や脱字が多…

TweepyでTwitterAPIを利用し始めた時に遭遇しそうなエラーの対処法

始めに 前提 453 - You currently have Essential access which includes access to Twitter API v2 endpoints only.・・・省略 1. In English, please describe how you plan to use Twitter data and/or APIs. The more detailed the response, the easier…

【JavaScript】pintoraを使ってテキストでダイアグラムを書いてみる

最初に 今回はpintoraというJavaScriptライブラリを使用してテキストでダイアグラムを書いてみようと思います! pintoraはブラウザとNode.jsで動作する拡張可能なJavaScriptライブラリです。 執筆時点ではActivity Diagram、Component Diagram、Entity Relat…

JavaScriptでのダミーデータ作成にはfalsoが便利!

Jser.infoというJavaScriptの最新情報を紹介するブログにてfalsoというダミーデータを生成してくれるライブラリが紹介されていたので手元で簡単に使ってみました。 falsoについてはこちら github.com githubのサンプルコードを使ってどんなデータが作れるの…

Jestでイベントリスナーのコールバック関数を検証する

画面のテストコードを書いている時に、画面を閉じた時やスリープした時に発生するイベントのコールバック関数の動作をテストしたい時があるかと思います。 そんな時にどうテストを書いたら良いかを以下にサンプルコードを交えながら備忘録として残していきま…

StorybookでknobsからControlsに書き換える

Storybook上でPropsの値を変更して表示などの確認を行う際にはaddon-knobsをインポートして使っていましたが、今後廃止予定となるため今後はControlsを使って実装するようになっていくかと思います。 既にaddon-knobsは deprecated となっています。 www.npm…

【React】useRouteMatchが返す戻り値をuseEffectの依存関係に含めない方がよい

react-router-dom に用意されている useRouteMatch というhooksを使って2種類のURLをマッチングして、パスパラメータを取得し数値に変換してからオブジェクトを生成してStateに保存するカスタムフックを作成しました。 このカスタムフックは特定の画面で使用…

画面幅を縮めたり広げたりすることで要素がカクカク左右や上下にずれる問題はマージンの自動算出による小数pxが原因

問題 これはコンテンツ部分の左右マージンにmargin: 0 auto;をしており、画面幅を変えてもコンテンツが中央に配置されるようにしていた。 コンテンツ内にはSVGで描画した円の中心にアイコンを配置していたのだけど、画面幅を変更するとSVGで描画した円が左右…

SES会社を見極めたい!見分けるポイントからメリットデメリットまでを解説します!

対象読者 まず始めに SESとは? SES会社を見分けるポイント 1. 勤務地があいまい 2. 資本金に対して社員が異様に多い 3. 「未経験OK」と求人情報に記載がある SESってそんなにヤバいの? SESのメリット/デメリット メリット 派遣により1つの企業で働くわけで…

【備忘録】error: insufficient permission for adding an object to repository database .git/objects でgit pullできないときの対処法

問題 AWS上で運用しているボットのリポジトリを最新化しようとしてgit pull したときに以下のようなエラーが発生していた。 ちょいちょい頻発するのだけど、毎回どう解消したっけ?ってなるので備忘録として残しておきます。 error: insufficient permission…

解決できない問題に悩む時は「テディベア効果」を試してみよう

どうもSassyです! 駆け出しエンジニアの皆さん!「テディベア効果」というものをご存じでしょうか? どなたでも当てはまりますが今回はITエンジニアをベースに説明させていただければと思います。 「テディベア効果」というのは物事に行き詰った時に誰かに…

stylelint v13 → v14へマイグレーションしました

先々週から開発タスクをやりながらstylelint v14へのマイグレーションを少しづつ行なっていました。 SCSSを使っている方なら手順書にサンプルが記載されているのですんなり移行できるのではないかなと思いますが、 私の場合ですとCSS-in-JSで開発をしており…

【最新版slackアプリ開発】久しぶりにslackアプリを作った時にslackbotライブラリでは使えなかったのでBoltに移行した

始めに Slackアプリの作成と設定手順 Slackアプリを作成します ImcomingWebhooksを有効化します WebSocketを有効化します Event Subcriptionsを有効化します アプリを起動して動作確認する 最後に 始めに もう1年半前くらいに作ったSlackアプリを久々に動か…

RxJSで実装したretry処理のretry回数を検証する方法

今回はエラーの種別ごとに最大リトライ回数を取得して指定回数分リトライかける実装のテストコードを書いた時に、苦戦したのでその解決策を残そうと思います。 世の中に同じ思いをしている方はいるのですが、アンサーを見てもあまりピンとこなかったので、メ…

【備忘録】MariaDBでパスワードやユーザー名、権限を変更するコマンド

WordPressでDBを構築する時ついつい忘れがちなのでメモとして残します。 ※[ ]で囲っている部分は置き換えて下さい。 ※MariaDBで動作確認済み パスワード変更コマンド データベースを切り替える use mysql パスワードを変更する update user set password=PAS…

【Wordpress】デモサイト用に立てたAWS EC2からロリポップへWordpressのデータ移行する際の手順と注意点

始めに 準備 Wordpress本体をAWSからダウンロードする DBデータをエクスポートする 手順 ロリポップへwordpressをアップロードする DB作成 DBデータをインポートする wp-config.phpを編集する 公開設定を行う 最後に 始めに WordPress制作のお仕事をいただい…

HTMLVideoElementのイベントハンドラの悪夢

イベントハンドラとは? 仕様が複雑化するとイベントハンドラにロジックを書くのはバグの温床になりやすい 解決方法はあるのか? 最後に 参考 最近JavaScriptでHTMLVideoElement周りをゴリゴリ触っています。 そこで得た知見を共有できたらと思い記事として…

LightHouseを使ってサイトのパフォーマンス改善を行った

経緯 LightHouseとは? 品質を計測してみる どのように対応したのか Performance Accesibillity Best Practices SEO 最後に 今回、私が開発・運用しているHiramekiというサービスのパフォーマンスをLightHouseというツールを使って改善した話をしたいと思い…

おススメWordpressプラグイン!【Organize Media Folder】を導入してメディア管理を便利にする方法

今回はWordpressで扱う画像が多くなり、画像や動画ファイルを整理したい時におすすめのプラグインをである【Organize Media Folder】をご紹介します! こちらは【Organize Media Library by Folders】の後継であり、【Organize Media Library by Folders】は…

おススメWordpressプラグイン!【Category Order and Taxonomy Terms Order 】を導入してカテゴリの並び替えをできるようにする方法

背景 インストールから使い方まで AWS環境化にてFTP認証情報を入力せずに突破する方法について プラグインを入れずに順番を変更したい場合について 最後に 今回は【Category Order and Taxonomy Terms Order】というカテゴリの順番を並べ替えできるようにす…

Safariで動画を開いた時に途中から再生できなかった時の対処法

問題 原因 対処方法 問題 ページを開いたときに途中から再生を行う機能を実装したのですが、なぜかSafariでは途中再生がされず最初からの再生となってしまう事象が発生していました。 Chrome、FireFox、Edgeでは等のブラウザではしっかり途中から再生されて…

jest v27.2.0へのアップデートで発生した不具合の回避方法について

問題 2021/9/17時点で確認された不具合 原因 対処方法 問題 仕事先ではRnovateを使用して週1でライブラリのアップデートを行っています。 Renovateって何?って方はこちらから www.whitesourcesoftware.com メジャーバージョンアップ時はその対象のモジュー…

Djangoのフロントエンド環境をWebpackを使ってより良くしてみた

Webpack icon by Icons8 最初に 私自身Webpack使いでもなく、仕事でWebpackを使い倒すということはあまりしてこなく修正程度を行うくらいでしか触ったことがありません。 なのでもっと良い書き方があるかもしれませんが、ネットの情報を見てもDjango+Webpack…

Wordpressの固定ページに記事の一覧を作りたい場合にオススメのプラグイン【Insert PHP Code Snippet】を紹介します

やりたいこと Insert PHP Code Snippetとは 使い方 設定について Sorting of snippets Credit link to author Pagination limit Autoinsert PHP opening tags Enabling automatic exception handling for PHP snippets Premium Version Ads 最後に 最近受託…

Djangoの管理画面のモデルページを見やすくする方法

始めに 手順 動作確認 最後に 始めに 今回は管理画面を見やすくする設定を紹介したいと思います。 初期状態だとデータベースにレコードを登録した際にDjangoの管理画面から見える画面って以下のような感じではないでしょうか? これを以下のように見やすくし…

Djangoの管理画面(/admin)にアクションを追加する方法

始めに 今回はDjangoの管理画面にアクションを追加する方法について書いていきます。 デフォルトではレコードの削除アクションしかないので、それ以外で何かアクションが欲しい場合は自分で作成しなくてはなりません。 それにしてもDjangoの管理画面は拡張性…

【備忘録】.gitignoreへ後から管理対象を追加してgit管理対象外とする方法

これ結構やり方忘れてしまうので備忘録として残します。 .gitignoreファイルに対象外にしたいファイルまたはディレクトリを追加します。 そしたら以下のコマンドを叩いて削除を行います。 git rm --cached [削除対象のファイル名] 「-r」オプションを付ける…

【Python】django-maintenance-modeを使ってメンテナンスモード切替え機能を爆速に開発する

始めに 今回はdjango-maintenance-modeというものを知ったのでDjnagoアプリにインストールして、稼働しているサービスでメンテナンスモード機能を取り込んでみたいと思います。 github.com 動作環境 Windows10 python 3.8 django 3.2 django-maintenance-mod…

TypeScript Compiler APIを使ってimportのモジュールパスを取得する

今回は前回の延長線上でASTからimport宣言のモジュールパスを取得してみようと思います。 前回の記事を見ていない方はこちらをどうぞ www.sassy-blog.com 前回のソースコードから以下のように変更しました。 testTscApi/test.tsではimport文を適当に増やして…

TypeScript Compiler APIを触ってみた

始めに 本記事で話す範囲 TypeScript Compiler APIとは何か? TypeScript Compiler APIを使うと具体的に何ができるのか? ASTによるコード解析を試してみる ASTから元のコードを生成してみる 最後に 始めに 今回はTypeScript Compiler APIというものについて…