まだプログラマーですが何か?

プログラマーネタとアスリートネタ中心。たまに作成したウェブサービス関連の話も http://twitter.com/dotnsf

2021/01

Node.js + Express の環境でウェブアプリケーションを開発していると、いくつかの方法で URL のパラメータを受け取る方法があります:
6dnng3pre04xxdebia1g


例えば、 "/xxx?name0=value0&name1=value1" というパス /xxx への GET アクセス時に URL パラメータである name0 及び name1 の値(それぞれ "value0" と "value1" に相当する部分)を取得するには以下のように req.query オブジェクトから取り出すという処理で実現できます:
var express = express();
var app = express();

app.get( '/xxx', function( req, res ){
  var name0 = req.query.name0;
  var name1 = req.query.name1;
    :
});

  :
  :

また、"/yyy/name2" というパスへの GET アクセス時における "name2" 部分を可変にしたい(例えば "/yyy/1" にアクセスした場合は name2 = "1" で、"yyy/2" にアクセスした場合は name2 = "2" として取り出したい)場合は、以下のように req.params オブジェクトから取り出すことで実現できます:
var express = express();
var app = express();

app.get( '/yyy/:name2', function( req, res ){
  var name2 = req.params.name2;
    :
});

  :
  :

ここまでは express の標準機能として実装されています。


で、今回挑戦したいのは "/zzz/name0/name1/name2/.../name9" というパスへの GET アクセス時における name0, name1, name2, ..., name9 の値を取り出すことです。この例ではパラメータが10個ですが、実際にはいくつ存在しているかわからないものとします(1個かもしれないし、10個以上かもしれない)。つまり "/zzz/" で始まるパスへの GET アクセス時に "/zzz" 以降のパス部分をまとめてパラメータ化して取得したい、という要望実現への挑戦です。

パラメータの個数が固定であれば(例えば3つであれば)、上述の "/yyy/:name2" の時の応用で、"/zzz/:name0/:name1/:name2/" のハンドリングを行って、req.params.name0, req.params.name1, req.params.name2 の値をそれぞれ取り出すことで実現できます。ただ今回はこのパラメータの数を可変にしたい場合の実現方法を考えたいのです。

その実現例の1つがこちらです:
var express = express();
var app = express();

app.use( function( req, res, next ){
  if( req.url.startsWith( '/zzz/' ) ){
    // '/zzz/' で始まるパスへのアクセスだった場合は、5文字目以降をパラメータとして取り出し、
// '/zzz?params=' の後ろに URL パラメータとしてくっつけてリダイレクトする var params = req.url.substr( 4 ); res.redirect( '/zzz?params=' + params ); }else{
// '/zzz/' で始まらないパスへのアクセスだった場合はそのまま処理する next(); } });
app.get( '/zzz', function( req, res ){ // params URL パラメータの値を取り出して、'/' で分割する var params = req.query.params.split( '/' );

// params[0] に "name0" が、params[1] に "name1" が、・・それぞれ格納されている : }); : :

可変階層のパスをハンドリングすることはできないので、該当部分を URL パラメータ(params)として処理するようにしています。そして /zzz/ で始まるパスへのアクセスがあった場合は app.use() による前処理として5文字目(2つ目の '/')以降を取り出して params パラメータの値に指定してリダイレクトするようにしています。こうすることで /zzz/name0/name1/name2/../name9 へのアクセスは /zzz?params=name0/name1/../name9 へアクセスするようリダイレクトされ、リダイレクトされた先で元のパラメータを残さず処理することができるようになります。

リダイレクトしての処理なので、ずるい(?)やり方ではあるんですが、一応これなら /zzz/name0/name1/name2/... へのアクセス全般を可変階層でも(リダイレクト先で)処理できそうです。


1台程度のマシンで、小規模な k8s(Kubernetes) 環境を構築できる MicroK8s をラズベリーパイ(以下「ラズパイ」)に導入する手順を確認してみました。MicroK8s は Ubuntu を開発&提供している Canonical 社が開発する k8s パッケージです:
MicroK8s_logo


まずラズパイ本体を用意します。後述しますが k8s はスワップメモリを無効にして稼働させる必要があるため、ラズパイ3以前のメモリ 1GB 環境だと少し厳しいかもしれません。今回はメモリ 4GB モデルのラズパイ4を使って確認しました。

次に 64bit 版ラズパイ OS をインストールします(MicroK8s は 64bit OS 向けに提供されています)。64bit 版のラズパイ OS は 2021/01/08 の時点では正式リリースされているわけではありませんが、こちらからテスト版をダウンロードすることができます:
http://downloads.raspberrypi.org/raspios_arm64/images/

2021010801


私は 2020-08-24 という日付が入ったモジュールをダウンロードしました(この記事を記述している時点では最新の 64bit モジュールです。公式の 32bit 版と比べるとたまに知らない間に再起動してたりして、少し不安定な印象はあります)。ダウンロード後に展開してマイクロ SD カードに書き込みます(このあたりは通常の手順と同様)。そしてラズパイ(4)にセットして初期セットアップを済ませておきます。

この後に MicroK8s をインストールするのですが、その前に準備作業を2つほどしておきます。まず k8s はスワップメモリが存在していると正しく動作しないため、まずはスワップを無効にします:
$ sudo swapoff -a

続けて、これも通常の k8s を導入する際にも行う必要のある手順ですが、cgroups のメモリーサブシステムを利用するため、/boot/cmdline.txt に記述されている内容の(同じ行の)最後に以下の赤字部分を追記して保存し、この段階で一度リブートします:
console=serial0,115200 console=tty1 root=PARTUUID=a3ba36bd-02 rootfstype=ext4 elevator=deadline fsck.repair=yes rootwait quiet splash plymouth.ignore-serial-consoles cgroup_enable=memory cgroup_memory=1

これで k8s を導入するための準備が完了しました。続けて MicroK8s をインストールします。今回は公式サイトでも紹介されている、Snapd を利用する方法でインストールします。まずは Snapd (とこの後で使う iptables-persistent)をインストールして一度リブートします:
$ sudo apt install snapd iptables-persistent 

$ sudo reboot

再起動後に再度ログインし、改めて Snap を使って MicroK8s をインストールします(この手順で少し時間がかかります):
$ sudo snap install microk8s --classic

MicroK8s のインストールが完了したら以下の3つのコマンドを実行後に(一度 exit してから)再ログインします:
$ sudo usermod -a -G microk8s $USER

$ sudo chown -f -R $USER ~/.kube

$ sudo iptables -P FORWARD ACCEPT

ここまでの作業で MicroK8s がインストールされて、MicroK8s が起動されているはずです。 以下の "get nodes" コマンドを実行して STATUS 欄が "Ready" と表示されることを確認します:
$ microk8s.kubectl get nodes

NAME          STATUS   ROLES    AGE     VERSION
raspberrypi   Ready    <none>   7h25m   v1.20.0-37+6252d1e153c00f

またサービスの一覧は "get services" コマンドで確認できます:
$ microk8s.kubectl get services

NAME         TYPE        CLUSTER-IP     EXTERNAL-IP   PORT(S)   AGE
kubernetes   ClusterIP   10.152.183.1   <none>        443/TCP   9h

なお、MicroK8s の起動/終了のコマンドはそれぞれ以下の通りです:
$ microk8s start  (起動)

$ microk8s stop  (終了)

Snap パッケージになっているので、インストール時の手間が非常に簡略化されている印象でした。一方で、(これは MicroK8s というよりも 64bit OS の問題なのかもしれませんが)全体的に不安定な挙動が見受けられるように感じました。"microk8s.kubectl get nodes" コマンドの結果が READY ではなく NotReady になることがあったり、システムがいつの間にか再起動していたりして、イマイチ安定していないような気もします。

2021 年、あけましておめでとうございます。昨年は人の集まりを自粛する機会が多く、不便に感じることも多くありましたが、一方で「オンライン」や「オフライン」であることを強く意識しながら自分のエンジニアとしてのスキルアップを考える機会も多くありました。今年は考えたり勉強したりしたことを色々な形でアウトプットできるよう心がけていこうと思っています。本年もよろしくおねがいします。


さて、そんな新年最初のブログエントリですが、簡易的な HTML プレビューワーを作ってみました。自分はウェブ関連の技術を紹介する機会が公私で多くあるのですが、そこで本当に紹介したい内容を話す際に HTML や CSS, JavaScript といったフロントエンドの基礎技術は理解しているという前提で紹介することがほとんどです。でも実際にはこの前提を満たしていない人に紹介するケースもあります。

考えようによっては「これから色んなことを勉強していきたい」という強い意志を持った人であって、そういう人が自分の話に興味を持ってもらえることは光栄でもあるのですが、とはいえこれらの基礎技術を理解できていない人にフロントエンドのコードを見せても(しかもここは理解している前提なので、詳しい解説を加えるのは別の部分)おそらくちゃんとは理解できないと思っています。願わくば、そのまま基礎技術にも興味を持ち続けて、自分で勉強も続けていただくことで、いつか理解の点と点がつながる日がやってくることが期待できるとも言えます。が、やはり前提を理解している人向けの説明では本来の難易度以上に難しく聞こえてしまうのか、説明している私からも手応えを感じにくい結果となってしまうことがほとんどです。

で、そういった人向けに、ある程度はその場でも(必要以上のツールのインストールなどをしなくても)HTML などの最低限のフロントエンド基礎をオンラインで独習したり、ある程度理解している人であればライブデモのようなことができるようなものを作ってみました。必要なものはオンラインのネット環境とブラウザだけで、オンラインミーティングとの併用でハンズオンを行う場合の相性がいいと思っています。ただテキスト編集の要素もあるツールなので、UI はスマホやレスポンシブではなく PC からの利用を想定しています(タブレットであればまあなんとか・・かも)。


【サービスの URL】
このツールは GitHub Pages を使って公開しています。URL はこちらです:
https://dotnsf.github.io/jch/


PC のブラウザからアクセスすると下のような4つの列からなる画面が表示されます:
2021010501


画面内の4つの列は左から JavaScript, CSS(スタイルシート), HTML, そしてこれらをまとめたプレビューです。左3つが編集エリアになっていて、その編集内容に応じて右のプレビュー結果が変わるようになっています。JavaScript や CSS に外部ライブラリを追加することはできませんが、jQuery だけは初めから使えるようにロード済みです。

初期状態はそれぞれ以下のようになっています:
JavaScript
2021010502

jquery.js をロードしています。そして $(function(){ と }); の間がテキストエリアになっていて JavaScript を記述できるようになっています(初期状態では空です)。ロード済みなので jQuery のセレクタを使った記述も可能です。

変更を加えてから "JavaScript" ボタンをクリックすると、変更内容がプレビューに反映されます。


CSS
2021010503

<style> と </style> の間がテキストエリアになっていて、スタイルシートの指定を自由に記述することができるようになっています(初期状態では空です)。

変更を加えてから "HTML" ボタンをクリックすると、変更内容がプレビューに反映されます。


HTML
2021010504

ベースとなる HTML が記述されています。初期状態では <h2> の見出しが1つと、<div> に囲われたリスト(<ul>~</ul>)が1つ記述されています。

変更を加えてから "HTML" ボタンをクリックすると、変更内容がプレビューに反映されます。


プレビュー結果
2021010505

上述の JavaScript, CSS, HTML の内容をすべて反映した結果がここに表示されます。初期状態では JavaScript と CSS が実質的に空なので、HTML に記述された内容(<h2> の見出しと <ul> のリスト)がそのまま表示されています。

ではこの初期状態を改良すべく、少しずつ編集してみましょう。まずは HTML に以下の赤字の行を加えてみます:
<h2> 50音 </h2>
<div id="xxx">
<ul>
<li id="li1" class="li">あいうえお</li>
<li id="li2" class="li">かきくけこ</li>
<li id="li3" class="li">さしすせそ</li>
<li id="li4" class="li">たちつてと</li>
<li id="li5" class="li">なにぬねの</li>
<li id="li6" class="li">はひふへほ</li>
<li id="li7" class="li">まみむめも</li>
</ul>
</div>

そして上部の "HTML" と書かれたボタンをクリックします。すると追加した2行のぶんが反映されて、プレビュー結果は以下のように変わります:
2021010506


次は CSS を追加してみます。初期状態では空だった <style> と </style> の間のスタイルシート編集部分に以下を追加します:
h2{
  font-size: 50px;
  color: 'blue';
}
#li3{
  color: '#f0f';
}

見出しである <h2> タグのフォントサイズ(50px)と色(青)を指定し、id="li3" の要素(さしすせそ)のみ紫色になるよう指定しています。そして最後に上部の "CSS" ボタンをクリックして、指定通りのプレビュー結果になることを確認します(下図では HTML 列は表示していません):
2021010507


続けて JavaScript も編集してみましょう。こちらも空だったテキストエリア内に以下を追加します:
$('#xxx').css( 'background', 'yellow' );
$('#li4').css( 'color', 'green' );

リストをラップしている <div id="xxx"> タグの背景色(黃)を指定し、id="li4" の要素(たちつてと)のみ緑色になるよう指定しています。そして最後に上部の "JavaScript" ボタンをクリックして、指定通りのプレビュー結果になることを確認します(下図では CSS 列と HTML 列は表示していません):
2021010508


HTML, CSS, JavaScript すべての変更が反映されたプレビュー結果が表示されることを確認できました。もちろんこのまま HTML, CSS, JavaScript に(順番関係なく)変更を追加していく都度、プレビューを確認することができます:
2021010509


このサービスを使うことで、最小限の準備作業で HTML や CSS, JavaScript といったフロントエンドの基礎技術を実際に編集しては結果を確認しながら学んでいくことができるようになると思っています。


【ツールのソースコード】
このサービスは上述のように GitHub Pages を使って公開していますが、実はページそのものもフロントエンドだけで作られています(アイコン画像などは別ファイルですが、サーバーサイドのバックエンド技術は使っていません)。要するにこのサービスも1枚の HTML とその中に記述された CSS, JavaScript だけで実現しています。

このサービスのソースコードも公開しているので、興味ある方は参照ください:
https://github.com/dotnsf/jch


特に該当 HTML ページのソースコードはこちらから参照できます:
https://github.com/dotnsf/jch/blob/main/index.html

このページのトップヘ