Sassyブログ

好きなことで暮らしを豊かにするブログ

IT・ソフトウェア

NordVPNの使い方を解説!パソコン・スマホでおすすめの設定方法も紹介!

NordVPNとは NordVPNへのアカウント登録方法 NordVPNのパソコン(Windows・Mac)での使い方 NordVPNのスマホ(Android・iOS)での使い方 NordVPNの導入初期にしておきたいおすすめの設定方法 デバイス起動時にアプリを立ち上げる 自動接続 脅威対策機能 Nord…

レンタルサーバーで運営しているWordPressサイトのDNSをCloudflareに切り替えてパフォーマンス改善を試みる

CloudFlareとは CloudFlareへ切り替えてみた結果 CloudFlareへの切り替え手順と設定 まとめ 現在ロリポップで運用している Campable というアウトドア情報メディアのネームサーバーをCloudFlareへ切り替えて高速化を試みてみました。 経緯としては現在Campab…

Webサイトを最適化し、最高のUXとCore Web Vitalsを実現するツール jampack を試してみた

始めに jampackとは? 特徴 使い方 結果 最後に 始めに 今回は jampack というツールがあることを知り、興味があったので早速私の個人サイトに適用して実際に使ってみたので所感を記事にしたいと思います! jampackのリポジトリとドキュメントは以下になりま…

Cloudflare Pagesを使った際に最初にやった方が良い設定

ランキング参加中テクノロジー Reactで作成したアプリをCloudflare Pagesを使ってデプロイしてみました。 Cloudflare Pages自体は初めて利用するため、色々触ったり調べてみて初期段階で設定した方が良いと感じた設定があったので記事に書きたいと思います。…

SmartHRと連携して人事データを可視化するツールを作ってみた

概要 技術構成 レポート出力結果 テナントIDについて アクセストークンについて ランキング参加中プログラミング 個人開発でSmartHRと連携したレポーティングツールを作成してみました。 simple-hr-reporter.saikicks.net 概要 このツールはSmartHRと連携し…

最初のコミットにgit rebase -iを含める方法

少し前にjser.infoにて取り上げられていたWebContainersを試しています。 クイックスタートのページを見てサンプルプロジェクトを作ってnpm initして~、githubにプッシュして~とやっていたのですが、 チュートリアルのページがあったのでやはりそちらでや…

react-router v6 のサブルートのパスが一致しない

ランキング参加中プログラミング 現在個人プロジェクトでReactを使って開発しています。 その中で react-router v6 を使用しているのですが、v5とは仕様が変わっていて上手く動かなかったので少し内容を記事に書き起こそうと思います。 まずコンソールに表示…

"Error: connect ECONNREFUSED 127.0.0.1:5432" は突然に…

ある日突然運用中のアプリが開け無くなりました… ブラウザのコンソールには以下の表示が… Uncaught (in promise) TypeError: Failed to fetch とりあえずサーバーにログインしてバックエンドのプロセスが起動しているかPSコマンドで確認 プロセス一覧に表示…

PythonでGoogleDriveを操作するのにPyDrive2が便利

始めに 最近DBのバックアップを取るためにバックアップ先のストレージとしてGoogleドライブを利用することとしました。 バックアップは定期的に行いたく、プログラム上でバックアップファイルを収集して、それらをアップロードしようと考えています。 言語は…

FoalTSでDIしているサービスクラスを環境毎に出し分ける

始めに 背景 公式ドキュメントのどこを見たか ハマりポイント 1. 抽象クラスに定義するプロパティの説明がない concreteClassConfigPath concreteClassName defaultConcreteClassPath 2. export時のクラス名を揃える 最後に 始めに FoalTSというTypeScript製…

Udemyの大幅値下げセールを利用してWeb3.0を学ぼう!

今回はUdemyのセールで紹介されていた「【Web3.0アプリ開発入門】ReactとSolidity言語で簡単ブロックチェーンWebアプリ開発を体験してみよう!」という教材に興味があったので受講してみました! 【Web3.0アプリ開発入門】ReactとSolidity言語で簡単ブロック…

WordPressはもう古い?ヘッドレスCMSとは?WordPressとどう違う?JAMStackによる新しいWebサイトの在り方

どうもSassyです! 最近JAMStackについて興味を持っています。 JAMStackを調べていると出てくるのがヘッドレスCMSですね。 CMSと聞くと真っ先に思いつくのがWordPressかなと思います。 CMSとはContentsManagementSystemの略でWebサイトのコンテンツを管理す…

【ブログ運営者必見】記事校正に使える?校正サービス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というツールを使って改善した話をしたいと思い…