私と私の猫の他は誰でも隠し事を持っている

野良プログラマ発、日々のアウトプット

Chrome 拡張機能 ModHeader で HTTP ヘッダを自在に書き換える

ウェブ開発も最近は Node.js 一辺倒になってしまった在宅野良ブログラマ Mariyudu です。プログラム内で URL のオリジンを参照してごにょごにょしたりすることがたまにあるんですが、curl -H "Host: my-web-develop.net" http://localhost:3000/ 的なことを Chrome にさせたいと思ったら意外に情報が無かったので、今回使ってみた ModHeader の話を。

ModHeader は HTTP ヘッダの内容を操作する Chrome 拡張機能です。つまり、上記ユースケースのように http://localhost:3000/ へのリクエストの際に任意の値をセットした Host ヘッダを付与できるということです。以下、今回行った手順です。

  1. Chrome ウェブストアから ModHeader をインストール。
  2. デフォルトだと他のウィンドウ・タブでも Host ヘッダが書き換えられてしまい嬉しくないので、設定から「サイトへのアクセス」を「クリックされた場合のみ」にしておく。>
    f:id:mariyudu:20210409154149p:plain
    ModHeader 設定
  3. URL バーの ModHeader アイコンをクリックして、本ユースケース用のプロファイルを作成。といっても下図のようにプロファイル名とリクエストヘッダの Host をセットしておくだけ。>
    f:id:mariyudu:20210409160632p:plain
    プロファイル作成
  4. 開発中のウェブプログラムを起動しておいて、Chrome にて新しいウィンドウ(またはタブ)を開いて、URL に http://localhost:3000/ を入力してアクセスします。この時点では未だ Host ヘッダ設定は効いていません。
  5. そのウィンドウで、URL バーの ModHeader アイコンをクリックするとページをリロードしちゃいなよユー、って言っているので言う通りにすると、設定した Host ヘッダが適用されるようになります。それ以降はそのウィンドウからのアクセスでは、Host ヘッダ書き換えが適用され続けます。>
    f:id:mariyudu:20210409154334p:plain
    プロファイルを適用させる

便利です。これで Vue.js や Express でのローカル開発はもちろん、リモートホスト開発での hosts を書き換えてテストしてたような案件もラクラクだにゃー。

Amplify プログラムで、Storage (S3) に保存したファイルを複製する

AWS Amplify 上でウェブアプリ(Vue.js 製)を開発しているのですが、バックエンドの Storage API を使って S3 に保存したファイルを複製しようとして、「あれ? StorageClass にゃコピー用メソッド無いねぇ。どうするん?」ってなった時の話です。

結果、別途 aws-sdk の S3 クライアント使えってことらしいです(当たり前か)。本件ユースケースは、マルチユーザ型(Cognito で認証・認可管理)のフォトアルバムサービスのようなサービスの開発をイメージして頂ければわかり易いかと。なので、Auth API で得たクレジデンシャルを S3 クライアント生成時に与えてやるのがミソですな。Vue.js の単一ファイルコンポーネント内で処理を行う場合は、こんな感じです。

<script>
import aws_exports from '@/aws-exports'
import { Auth } from "aws-amplify"
import AWS from 'aws-sdk'

export default {
(中略)
  methods: {
    // S3 上のファイル src を dst にコピーする
    duplicateS3File: async function (src, dst) {
      try {
        const credentials = await Auth.currentUserCredentials();
        const s3 = new AWS.S3({
          apiVersion: '2006-03-01',
          region: 'ap-northeast-1',
          accessKeyId: credentials['accessKeyId'],
          secretAccessKey: credentials['secretAccessKey'],
          sessionToken: credentials['sessionToken']
        })
        const params = {
          CopySource: `${aws_exports.aws_user_files_s3_bucket}/public/${src}`,
          Bucket: aws_exports.aws_user_files_s3_bucket,
          Key: `public/${dst}`
        }
        await s3.copyObject(params).promise()
        return true
      }
      catch (error) {
        return false
      }
    },
(後略)
  }
}
</script>

S3.copyObject() のパラメタは何だか分かりづらいですが、これは以前 PHP プログラムで同様のことをやって経験済みだったので悩まずに済みました。

【Spotify】 Covers of "Crystal Silence" by Chick Corea on Acoustic Guitar

ジャズの巨星、チック・コリア氏が去る2月9日に79歳で亡くなったとのこと。私の年齢では、フュージョン・ブームの頃に「リターン・トゥ・フォーエヴァー」あたりの名盤から入り、追ってマイルス・バンド時代を追体験したり、というコースでした。

アコギ好きとしては、ラリー・コリエルを始めとした多くの名ギタリストがカバーしている「スペイン」が直ぐに思い浮かぶのですが、ふと上記「リターン〜」収録の名曲「クリスタル・サイレンス」もアコギに合いそうなのに、カバーは聴いたことが無いなぁ、と。そう思いながら Spotify で探してみたら、それなりの数があったのでプレイリストに集めてみました。

デヴィッド・グリスマン&マーティン・テイラーのデュオ以外は初めて聞く名前のプレイヤーばかり。多くの名曲・名演を残してくれただけでなく、こんなふうに未知の音楽に出会えるきっかけまでもらっちゃって、ありがとう、チック・コリア。どうか安らかに。

EC2 で WordPress サイト立ち上げるなら Bitnami AMI が手っ取り早い

仕事で「ウェブサイトをいっこ作るのでサーバセットアップよろ〜、WordPress 付きで」な流れになり、「WordPress すか… そろそろ SSG にしません?」等と言いたいのをぐっと飲み込んで、AWS コンソールにログイン。従来は「チュートリアル: Amazon Linux による WordPress ブログのホスティング」 あたりの手順に従って、手作業でいちからインストールや設定を行ってたのですが、Btinami 提供の WordPress 入り AMI が無料で使えることを知ったので、それを試してみることにしました。結果、とても使い勝手が良く、作業時間を大幅に短縮できました。

手順は Btinami サイトの「Get Started With Bitnami AMIs From The AWS Console」で説明されていますが、現状と食い違う箇所も少しあったので、当方で行った作業手順を備忘録的に記しておきます。

まず、予め AWS コンソールにログインしてから(もちろん EC2 でインスタンス生成できる権限のユーザで)、Btinami サイトにある各リージョン毎の AMI 一覧にアクセス。

f:id:mariyudu:20201212140644p:plain

ここから、アジアパシフィック(東京)の AMI ID をクリックすると、EC2 コンソールのインスタンス生成ページに遷移するので、あとは普段のようにインスタンス生成を行います。後でリモートログインして細かい設定等したい人は、セキュリティグループ設定で ssh ポートのインバウンドを忘れずに。

インスタンス起動が完了したら、ブラウザで http://<このインスタンスのパブリックIP>/ にアクセスして、WordPress 画面が表示されるのを確認。

f:id:mariyudu:20201212140822p:plain

ん? なんか Btinami の説明ページと違う画面だけどまいっか(ランダムに違うテーマが適用されるんですかね?) さらに http://<このインスタンスのパブリックIP>/wp-admin アクセスで、WordPress 管理画面が表示されるのも確認。

f:id:mariyudu:20201212140941p:plain

管理画面でログインするには、インスタンス起動時のシステムログからアカウント情報を得る必要があります。EC2 コンソールにて当該インスタンスについて、アクション > モニタリングとトラブルシューティング > システムログを取得 と進んで末尾付近にある下図のような箇所を探します。

f:id:mariyudu:20201212141414p:plain

ここで明示されているユーザ名とパスワード(上図だとユーザ名:user, パスワード:n********4)で、管理画面からログインできるのを確認します。

さて、WordPress の設定はサイト運営者の仕事なのでここまでにしておいて、カスタマイズ時に PHP ファイル等の書き換えや転送が出来るよう、ssh 周りの確認を。インスタンス生成時に指定したキーペアを使って、ssh ログインできるのを確認。ユーザ名は bitnami 固定です。

$ ssh -i my-keypair.pem bitnami@xxx.xxx.xxx.xxx
(中略)
Debian GNU/Linux comes with ABSOLUTELY NO WARRANTY, to the extent
permitted by applicable law.
       ___ _ _                   _
      | _ |_) |_ _ _  __ _ _ __ (_)
      | _ \ |  _| ' \/ _` | '  \| |
      |___/_|\__|_|_|\__,_|_|_|_|_|
  
  *** Welcome to the Bitnami WordPress 5.6-0                       ***
  *** Documentation:  https://docs.bitnami.com/aws/apps/wordpress/ ***
  ***                 https://docs.bitnami.com/aws/                ***
  *** Bitnami Forums: https://community.bitnami.com/               ***
(後略)

ログインできました。ストレージのサイズはデフォルトの10GBで十分だったみたい。

$ df -h
Filesystem      Size  Used Avail Use% Mounted on
(中略)
/dev/xvda1      9.7G  2.9G  6.4G  32% /
(後略)

ホームディレクトリはこんな構成。

$ ls -l
total 4
lrwxrwxrwx 1 bitnami bitnami  17 Dec 10 14:16 apps -> /opt/bitnami/apps
-r-------- 1 bitnami bitnami 424 Dec 12 03:35 bitnami_credentials
lrwxrwxrwx 1 bitnami bitnami  27 Dec 10 14:16 htdocs -> /opt/bitnami/apache2/htdocs
lrwxrwxrwx 1 bitnami bitnami  12 Dec 10 14:16 stack -> /opt/bitnami

WordPress カスタマイズ時には ~/apps/wordpress/htdocs/ 以下をいじれば良さそう。

$ ls -l apps/wordpress/htdocs/
total 220
-rw-rw-r--  1 bitnami daemon   405 Feb  6  2020 index.php
-rw-rw-r--  1 bitnami daemon 19915 Feb 12  2020 license.txt
-rw-rw-r--  1 bitnami daemon  7278 Jun 26 13:58 readme.html
-rw-rw-r--  1 bitnami daemon  7101 Jul 28 17:20 wp-activate.php
drwxrwxr-x  9 bitnami daemon  4096 Dec 10 14:14 wp-admin
-rw-rw-r--  1 bitnami daemon   351 Feb  6  2020 wp-blog-header.php
-rw-rw-r--  1 bitnami daemon  2328 Oct  8 21:15 wp-comments-post.php
-rw-r-----  1 bitnami daemon  4268 Dec 12 03:34 wp-config.php
(後略)

~/apps/ に phpmyadmin というディレクトリがあったので、調べたら(↓) phpMyAdmin も ready-to-use で、ポートフォワード経由でちゃんと使えました。すごいなぁ。DB アカウントは wp-config.php を参照。

docs.bitnami.com

そんな訳で、WordPress サイトを30分程で用意することができました。今回は調査に時間を費やしたので、次回からは10分以内でできちゃうかと。こうまで便利だと他のアプリコンテナ版も試してみたくなりますな。

尚、AWS には Lightsail という、この手順以上に簡単に WordPress サイトを作れるサービスがあるのですが、ネットワーキングまわりで既存リソース(ELB とか)を共有する等の小回りが効かない部分があり、「さてどうしようか…」と調べていて、この AMI を見つけたことも付記しておきます。

懲りずに情報発信サービスを目論んで一週間で撤退した件

細かく説明するのもかったるいので、経緯をかいつまむとこういうことです↓。

  1. Spotify の特定ジャンルの曲を毎日ツイッターで紹介するサービスをやってみようかと思い立つ。
  2. リアルタイムに発信するのは大変なので、一定量を書き溜めながら API 経由で自動配信するスタイルとしてサービス設計。
  3. バックヤードシステムをざっくりプロトタイピングして、専用ツイッターアカウントで11月1日から配信開始。
  4. 50回ぶん程のツイートをストックしたところで、思っていたより負担の大きな作業であることに気づく。
  5. 過去の失敗をなぞっている雰囲気が濃厚なので、早々に中止を決定。

最後の「過去の失敗」とは、以前個人サイトやブログ形式で、やはり音楽に関するテキストコンテンツを配信し始めたものの、次第に負担を感じるようになって継続できずに休止状態になってしまった黒歴史です。ツイッターなら1回の発信量が短いし、普段から個人アカウントでやっている砕けたスタイルでなら負担でもないだろうと高をくくってた訳ですが、実際やってみると独立したサービスとしての情報発信は、内容のわかり易さ・訴求力・全体のバランス等をどうしても意識しながら書かねばならず、いち個人が気ままにするそれとは大きく違っていました。

ちなみにこのサービス用に作ったツイッターアカウントはこんなやつです↓。既に非公開にしてあり、そのうち削除しますが。

f:id:mariyudu:20201108145327p:plain

これが、コンテンツをストックおよび自動配信する為のバックエンド・システム↓。NuxtJS + Vuetify 製です(ここ1年で習得中の Vue.js を使ってみたいというのも本件の動機の一端ではありました)。

f:id:mariyudu:20201108145435p:plain

そんな訳で、サービスの構想は白紙に戻しますが、日常生活の延長で継続的に情報発信する欲求は消えていないので、仕切り直して別の楽しいやり方が無いか考え中です。せっかく作ったシステムももうちょっと育ててみたいし。以上、書き留めておかないとまた数年後に同じ事をやっていそうなので、備忘録としてw

Vue.js で SVG.js を使って動的に画像生成する

以前に作った SVG.js でベクタ作画する処理を、Vue.js 製のウェブアプリに組み込もうとしてるのですが、npm モジュールが少し古いようなのでひと手間加えることになったというお話です。

SVG.js はコンパクトに纏まっており、他のリッチ志向なライブラリに比べて学習コストも低く、質実剛健さが好きなプロダクトです。最新版は ver.3.0.16 ですが、npm モジュールの方は3年前の ver.2.6 系とバージョンが乖離しているので、CDN の最新バージョンを scriptjs で読み込むことにしました。作画機能を Vue プラグインにして無理やり Vue プログラミング感を出してみましたw ○△□ボタンクリックで div 要素内に svg ノードを追加、削除ボタンクリックで全部削除という簡単なサンプルです↓。

codesandbox.io

この手の処理は昔ながらに DOM を直接いじるやり方のままなんですが、他にリアクティブ志向なやり方ってあるんですかね? どなたかご存知でしたらご教示を。

【Spotify】NEMS Record Shop

去る10月9日は、ジョン・レノン生誕80年の誕生日だったのですが、それにちなんでという訳でもなくビートルズ小ネタを。公式アルバム(「プリーズ・プリーズ・ミー」〜「レット・イット・ビー」および「パスト・マスターズ」)の中でカバーしているロックンロールや R&B の数々を集めてみたらちょうど1時間程なので、Spotify でプレイリスト化してみました。

題して「NEMS Record Shop」。NEMS ってのは、ブライアン・エプスタインがビートルズのマネージャーになる以前にリバプールで経営していたレコード屋(正確には家具雑貨屋の一角にレコード・コーナーを設けていたとか)の屋号です。おそらく、ビートルズの面々もここに通っては上記プレイリストにあるようなアメリカン・ポップスに触れていたのではないかと想像できます。ちなみにそのお店、当時の面影はこんな様子だったようです↓。

www.britishrecordshoparchive.org

住所を調べて Google Street Map で散策してみたら、今はこんな感じ。60年の歳月は残酷ですな。

www.google.com

去年は映画「イエスタデイ」が話題になったし、今年にはブライアン・エプスタイン伝記映画制作の報も入って来ていて、相変わらず話題提供が尽きないビートルズ界隈です。という訳で、前回に続いて Spotify プレイリストづくりでした。楽しいなぁw