Node.js で HTML ファイルからレンダリングするのは難しいことではありませんが、Python + Flask のときと同じ感じで書いたらはまりました。
WordPress の DDoS 攻撃対策
WordPress を使い始めて二年半になりますが、Jetpack からよく「ダウンしています」と通知が来ます。たぶん前にも書きましたね。毎度 CPU 使用率とディスク I/O が高まり、とうとうさくらの VPS が CPU リソース制限を受けるまでになってしまいました。
そこで調べたところ、いくつかのファイルを無効化すると改善される可能性がありそうなので、これを行って様子見することにしました。
Bootstrap でサイト構築の高速化
Bootstrap v4.0 を使ってホームページを作り直しました。コンテンツが大したことないためにメリットを最大限に活かしきれてないのが悲しいですが、これはめちゃいいです。
HTML の記述で謎に思ったこと 8 選
HTML を始めて書いた頃には、なぜどんなときに必要なのか、どうしてそう書いてるのかがわからないような記述がたくさんありました。今でもありますが。
基本的なことばかりですが、ざっとまとめてみたので軽く読み流してください。
CSSで鉛直方向に位置を調整する
CSS で左右中央にする場合は margin, width や text-align を指定すればいいですが、上下中央にする場合は height を指定しても何も起きません。
いつも padding で頑張っていたのですが、Facebook の SNS ボタンをいじってて初めて気づきました。そんなことする必要なかったのではと。
Firebaseを利用したログインシステムの実装
Google の BaaS である Firebase を使うと、自分でサーバ上にデータベースを構築することなく簡単に会員サイトのログインシステムが作れます。
今回は Firebase Authentication と Cloud Firestore を利用します。
WebサイトをPWAに対応させてみた
ユーザーエクスペリエンスを向上させる方法の一つとして、Progressive Web Apps の導入が考えられます。つい最近知ったのですが面白そうだったので、開発中の Web アプリに適用してみました。
Chrome DevToolsを用いて実機のAndroidスマホでデバッグする
Google Chrome には開発者ツールが付いているのをご存知の方はたくさんいると思いますが、スマホサイトのデバッグをしようと思ったら、このツールにある疑似的なエミュレータで済ませる人も多いのではないでしょうか。
私も普段はそうですが、Chrome で作って公開し、いざスマホの Chrome for Android で確認してみると予想と違うデザインになっていたり、iOS では全然違ってしまっていたり。
最近注目されている PWA も、実機を接続してデバッグすればスマホでの動作を確認できるというメリットもあります。(これ結構大きいと思う)
formからPOST送信したデータをPythonで受け取る
POST メソッドで自サイトに向けて送信したフォームデータを Python 3.6 で取得するとき、Flask を使っているとかなり簡単に処理を行うことができます。
blocked by CORS policyで読み込めないときの対策
AWS EC2 インスタンス上に Web サーバを立てて独自ドメインからその Web サイトに接続できるように設定したら、よくわからないエラーで一部リソースが読み込めなくなっていたので、とりあえずの対策を施しました。