Blogブログ記事

Automator で SimplyStatics をもっと便利に！

経緯 このWebサイトは以下のように運用しています。 手元にあるWordPressをCMSとして使う Simply Statics(WordPressプラグイン)でHTMLファイル群をZipでダウンロード Zipを展開して、S3の静的サイトホスティングにアップロード SimplyStaticsに年間1.5万円くらい払えば、直接S3にアップロードする機能も使えるみた

2024.10.2 19:30

memo化したのに再レンダリングされてしまった話 – React.memo

経緯 フリーランスになってから早2年。前のプロジェクトが解散となり、新しくReact JSのプロジェクトに参画しました。Reactに関してはほぼ初めてでしたが、最近慣れてきたので、ぼちぼちReactに関する記事も書いていこうかと思います。 React.memo を使ったときにうまく働いていなさそうだったので、調べたことをまとめました。 React.memo とは？ 通常、R

2024.10.1 20:08

WordPressの移行【ドメイン変更あり】

さくらインターネットのレンタルサーバーを借りてWordPressを運用していたのですが、動かしたいプラグインが遅すぎて使い物にならないという現象に見舞われました。 調べると、2022年2月16日にさくらインターネット社から新しいサーバーが登場し、私が契約していた第一世代(2018年4月17日以前)のサーバーよりも5倍も早くなったようなので、移行することに決めました。 さくらのレンタルサ

2022.03.17 00:36

Moment.jsで時刻をユーザーのTime Zoneに合わせて表示する

Webシステムで多言語対応をするとき、サーバー側でTimeZoneを変換して、レンダーしてもいいのですが、ユーザーのTimeZoneをあらかじめ保存するなど、何かしらの方法でサーバーにTimeZoneを伝える必要があり、大変です。 そんなとき、ユーザーのクライアントのLocaleを利用すると便利です。 Moment.jsを利用して、それを表現する方法をご紹介します。 Moment

2022.03.15 23:53

[RSpec] ActionMailerのメール送信に関するrequests specまとめ

今や電子メールを持っていて当たり前の時代で、メールを送らないサービスはほとんどありません。 Railsでは、ActionMailerというメールを送る機能が標準で備わっています。 今回はActionMailerを使ったメール送信のテストについて書き方をまとめていきます。 ちなみに、ActionMailerでは同期処理で送るパターンと非同期処理で送るパターンの2種類があるので、2種

2022.03.15 01:36

MacでDocker環境を構築する【初心者向け】

今やエンジニアの界隈でスタンダードになったDockerですが、慣れるまでは概念が分かりにくいかもしれません。 初めて触るものは概念を完璧に理解しようとするよりも、あまり正確ではなくても、概念をはっきり理解することが重要だと思います。 この記事ではDockerの導入と基本の操作方法について解説します。 Dockerとは？ DockerはDocker社が開発している仮想化技術で

2022.03.14 00:45

Highlighting Code Blockが静的ホスティングしたとき上手く動作しなかったときの対処【Simply Static + AWS S3】

(2022.07.14 追記) Highlighting Code Blockのアップデートで問題が修正されたようです！ Highlighting Code Blockは記事内のソースコードを読みやすくするために非常に便利なプラグインです。しかしながら、Highlighting Code Block v1.5.5では、Simply Static + AWS S3で静的ホスティングする際、上手

2022.02.28 15:13

[JavaScript] 論理演算子をもうちょっと調べてみる

経緯 先日後輩のJSについての相談を受けていたとき、以下のような書き方をみて「こんな感じに書けるんですねー」と言われました。 window.hoge = default_hoge || {}; 結構、普段から使ったりはしていますが、なぜ、これが「default_hogeがundefinedやnilだったら{}にする」という意味になるのか、明確に答えられなかったので、そのことについ

2016.08.2 10:00

サーバー負荷が少ないインクリメンタルサーチの作り方

キーワード検索するとき、検索ボタンを押さなくとも、入力された時点で自動的に検索結果が表示されるインクリメンタルサーチは今や多くのWebサイトで利用されています。 インクリメンタルサーチを実装するにはいくつかの方法がありますが、changeイベントは一度フォーカスをはずさないと発火しないので、keyupでやることが多いと思います。 しかしながらこの実装方法では、入力キーが押される度、通信

2016.07.21 10:00

横並びのレイアウトを作るためにinline-blockを利用してはいけない

経緯 display: inline-block;を指定するとあたかもinlineでの表示のように振る舞いながら、heightや上下のpaddingを指定することができてすごく便利です。4列のデータ一覧を作りたいとき、これを使うとレイアウトが崩れてしまったので、そのメモ書き。 不具合がおきるサンプル 以下がサンプルです。4列に画像を並べたいときのHTML/CSSを想定しています。

2016.07.19 10:00