GitHub 上のソースコードの一部を Gist のように埋め込む Cloudflare Workers

本記事は Cloudflare Advent Calendar 2024 25日目の記事だ。
空いていたので埋めちゃおう。

TL;DR

gist-it が動かなくなっちゃったので、 Cloudflare Workers で実装してみた話

ブログに GitHub 上のコードを埋め込みたい

ブログでコードの解説記事を書いていると、 GitHub 上のコードの一部を GitHub Gist のように埋め込んで表示したくなることがよくある。

以前は Gist-It というサービスを利用させていただいていたのだが、 ホストしている Google App Engine で Python 2.7 がサ終した 1 せいか、動作しなくなってしまっている。

欲しい機能は、処理内容は GitHub のソースコード取ってきて、 <pre> タグに書き込んでシンタックスハイライトを適用するような、割と単純でステートレスなもの。
このため、 Cloudflare Workers で実装してみた。

使い方

続きを読む

Power Automate で key-value Array ⇔ Object (Dictionary) を相互変換して Office Script の呼び出しを節約する

本記事は、 Microsoft Power Automate - Qiita Advent Calendar 2024 - Qiita シリーズ3 の 21日目 の記事だ。
…本当は、 シリーズ1 の 19日目 に投稿しようとしてたのだけれど、諸事情で記事更新ができず、代理投稿されてしまったので、改めて投稿し直している。

今回は、 Power Automate に於いて、連想配列の形で情報を持たせた Object と、 key-value Array の間を相互変換する方法を解説する。

Premium コネクタやループ処理などは使用せず、 O(1) オーダーのなるべく少ないステップ数で Object ⇔ Array 配列の相互変換させよう。

昨年の Power Automate Advent Calendar 2023 と同様、ステップ数を節約するテクニックの話題だ。

key-value Array ⇔ Object の変換目的

Array から Object に変換すると、 Power Automate の数式で variables('val-name')['property-name'] とアクセスできる。
このため、ループ処理で一旦統計したデータを後から参照させる場合などで都合が良い。

一方で Object から Array にしておくと、 選択アクション を使って 1ステップ で反復処理が行えるため、処理ステップ数を節約できる。

ほか活躍できる具体例として、Array にすることで Office Script との間での辞書型の情報の受け渡しが可能になることが挙げられる。

Office Script との引数・戻り値の受け渡しには key-value Array がよい

スクリプトのユーザー入力を取得する - Office Scripts#入力の制限 にあるように、 Office Script の入出力に設定する『型』は、リテラル型とそれらによる配列・オブジェクト型に限られる。
TypeScript で言う Indexシグネチャで表現できるディクショナリパターン の型を、 Office Script の main 関数のパラメータに使おうとすると、 Type literal contains invalid type 'Unrecognized' エラーになってしまうのだ。 1

function main(
  workbook: ExcelScript.Workbook,
  arg1: { [key: string]: { prop1: string, prop2: string } }
) { // <- Parameter type error for parameter 'arg1: TypeLiteral': Type literal contains invalid type 'Unrecognized'.
    const val: { [key: string]: { prop1: string, prop2: string } } = {}; // <- ok
}

幸い引数に object 型を設定することはできるが、型情報が綺麗サッパリ消えてしまうので、型アサーションに頼る必要が出てくる。
加えて、それでも返り値には object 型を設定できない。

function main(
  workbook: ExcelScript.Workbook,
  arg1: object
) {
  for (const key of Object.keys(arg1)) {
    const t = arg1[key] as { prop1: string, prop2: string };
  }
  return arg1; // <- Return type error: 'Object' is not supported. Try using an interface or type literal instead
}

つまり、 HTTP 要求トリガーbody('HTTP_要求').inputs.headers のような、任意のプロパティ名のオブジェクトで渡されるような情報を、 Office Script で処理して返しづらい。

このため代わりに、 { key: string, value: TYPE }[] な key-value 配列に変換して受け渡すことで、型情報を維持したまま Office Script との間で辞書型の情報を受け渡せるわけだ。

function main(
  workbook: ExcelScript.Workbook,
  arg1: { key: string, value: { prop1: string, prop2: string } }[]
): { key: string, value: { prop1: string, prop2: string } }[] { // <- ok
  return arg1; // <- ok
}

Power Automate からの Office Script の呼び出しには 3回/10秒 という制限があるので、 Power Automate の同一フロー中に何度も呼び出したり、ましてのフロー内のループ中に呼び出す事はできない。
このため、 key-value Array を引数に Office Script を 1回 呼び出してその中でまとめて処理をし、 Power Automate 側で key-value Array から辞書型のオブジェクトに戻すのが良いだろう。

相互変換の実装

続きを読む

JavaScript で TOTP を計算する

TOTP: Time-Based One-Time Password Algorithm とは、二要素認証でよく見る Google Authenticator 等で QRコード を読み込ませたりして、一定時間毎に替わる 6桁 くらいの数字を入力するアレだ。

RFC 6238 に詳しい仕様が書かれている。
コイツを TOTP をブラウザ上で生成したい。

幸い近年の Web API には、バイナリ操作やクリプトまわりの機能が出揃っているので、わりかし簡単に実装できそうだ。
…とまぁ、そんな愚生が思いつくような話など既に、偉大なる先人たちによる多くのサンプルが残されている。

せっかく自分で実装するなら、最新の ES 仕様や Web API を活用して簡潔に、それでいて汎用的な仕様で書いてみよう。

実装

続きを読む

D&DしたQRコード画像をブラウザ上でデコードする

ブラウザ上にドラッグ&ドロップ (D&D) されたQRコードの画像を、読み込んでデコードするUIを作りたい。

Pure JavaScript で動作する、QR コードデコーダー(パーサー) cozmo/jsQR が有名なので、これを使ってみよう。

jsQR は、 png や jpg といった画像コンテナの解凍機能も、 HTML や DOM, Web 周りに特化した機能も一切無いため、読み込ませた画像は何らかの方法で Uint8ClampedArray な RAW 画像に変換して渡す必要がある。

ちょっと遠回りにはなるが、

  1. D&D されたファイルの File API を読み取る
  2. FileReader API を使って、ファイルを DataURI として読み込ませ、 img タグに表示させる
  3. OffscreenCanvasOffscreenCanvasRenderingContext2D を経由して ImageData を作成する
  4. jsQR に処理を投げる

といった処理になるだろうか。

早速実装してみよう。

実装

続きを読む

Power Automate で少ないステップ数でコレクションを操作するコツ

本記事は、 Microsoft Power Automate Advent Calendar 2023 - シリーズ2 の5日目の記事だ。

"シリーズ1" の4日目は、 @inaho3517 氏の 本でPower Automateを勉強してみた だ。
ちょっとAmazonで検索しただけでも、 めっちゃ本が出てる のね…
知らなかった。
シリーズ2はまだまだ空きがあるので、ぜひご参加を。


実行ステップ数を節約したい

さて、 Power Automate を含め Microsoft Power Platform には、プラン毎に最大要求数の制限がある。
例えば、多くの人が使っているだろう Office 365, Microsoft 365 F3/E3/E5 に含まれる Power Automate の場合、 24時間ごとの 6,000 要求数が上限だ。

Power Automate では、実行されたトリガー・アクションひとつひとつが、結果の成否にかかわらずこの「要求数」を消費する。
大きな数のループや、2重ループなどを行うと、意外と簡単に 6,000 要求数に達してしまう。

時々妥当な範囲で上限を超える程度なら、即時実行をブロックされることはない ものの、設計の段階では超えない事に越したことはない。

唐突だが、アルゴリズムなどの計算量の効率を示す指標として、オーダー表記というものがある。

雑に説明すると、N件のデータを処理するのにどれくらいの勢いで計算コストが増えていくかと言ったもので、例えば単純なループ処理なら O(N), 2重ループとかになると O(N2) といった書き方をするのを、一度は目にしたことがあるのではないだろうか?

ということで、ループによってアクション要求数(ステップ数)が増えがちな Power Automate のコレクションの処理を例に、ループ処理を排除し O(1)定数時間で処理する方法を紹介する。

とりあえず Office Script?

続きを読む

ブラウザ操作中の通信の内容をローカルファイルに自動で保存する

本記事は JavaScript Advent Calendar 2023 の4日目の記事だ。

3日目は @feo52 氏の 最初のレンダリング直前に起動するpagerevealイベント #JavaScript だった。
Window インターフェース に最初のレンダリング直前に呼ばれる pagereveal イベントを追加する提案の実装を Chrome で試してみる内容だ。これは確かに便利そうなイベントに感じる。
令和の IE こと Safari の存在のせいでなかなか Web 標準に組み込まれる敷居が高いものの、是非ワーキンググループでの議論が進んでいただきたいモノだ。
ところで、こういうのって CSS のワーキンググループでドラフトに載ったりするのね。詳しい流れはよく知らんけども。


いにしえの自分の回答がわかりにくい

さて、ブラウザが裏で呼んでいる API の内容をファイルに書き出したかったのだけれども、ファイルサイズが大きいからか開発者ツール経由ではうまく保存できなかった。
そこで、ブラウザ操作中の通信の内容をローカルファイルに自動で保存する方法がなにか無いかな~と探していたら、偶然にも以前に自分自身がスタック・オーバーフローで回答した puppeteer を使った方法についての内容がヒットしてしまった。

すっかり忘れていたのだが、今見返すとちょっとこのままだと使いづらそうなので、もうちょい使いやすくまとめてみる。

基本的には以前に書いた以下の記事と同じ考え方で、 Chrome DevTools ProtocolFetch Domain を直叩きして、特定の通信の内容を横取りしてローカルに保存している。

実際のコード

続きを読む

個人用 Clipchamp から組織ユーザーへプロジェクトを無理やり移行する

この記事では、 個人アカウント用 Clipchamp から組織(法人)ユーザーの Clipchamp へプロジェクトを移行する方法、およびその応用で、個人用から別の個人用ユーザーに Clipchamp プロジェクトを移行(コピー)する方法を説明する。


去る7月31日に、 動画編集アプリ Clipchamp が組織アカウントに対応し、ビジネス向け Microsoft 365 に加わることが発表された。

これにより、 Microsoft での買収以降どのプランが商用利用可能なのか曖昧だった Clipchamp が、組織アカウント上で安心して商用利用できる事になる。
北米時間の 2023年10月15日 に Clipchamp が商用ユーザーで利用可能になったことが発表 され、 Microsoft 365 の対象プランのライセンスを持つ全てのユーザーに対し Clipchamp が一般公開された。

さて、 Clipchamp が組織アカウントに対応したことで、旧来の個人アカウント用 Clipchamp アカウントで作成していたプロジェクトを、組織アカウントに移行したくなる場合もあるだろう。

しかし FAQ などをみると、

職場アカウントで Microsoft Clipchamp にアクセスする方法 - Microsoft サポート

個人アカウント用に Clipchamp で作成されたプロジェクトを作業バージョンに移動できますか?

いいえ。

無慈悲。

仕事向けの Clipchamp - clipchamp.com

個人用アカウントの Clipchamp で作成したプロジェクトを職場アカウントに移行できますか?

現時点では、個人用アカウントで作成したプロジェクトを職場アカウントに移行することはできません。

こちらは、もうちょいマイルドだ。

将来的にやる気があるのかはわからんが、少なくとも現時点では、個人アカウントのデータの組織アカウントへの移行は、公式的にはできないらしい。

ところで、実際に組織アカウントで Clipchamp を使ってみると、プロジェクトファイルが OneDrive for Bussiness の <ルート>\動画\Clipchamp\<プロジェクト名>\ あたりの、 *.clipchamp という、 JSON が実体のファイルとして保存されていることに気づく。

個人用 Clipchamp の動作を思い出してみると、画像や音声などのアセットはローカルにキャッシュや保存されているものが参照されているだけで、別 PC でプロジェクトを開こうとすると、改めてアセットファイルを紐づける必要があった。

このため、 個人用 Clipchamp のプロジェクトも、この JSON ファイル程度の情報しかサーバーで管理されていないのではと推測できる。

つまり、何らかの方法でこの JSON ファイル相当の情報を個人用 Clipchamp から抜き出せれば、組織アカウントに移行できるかもしれない。

試行錯誤してみたところ、どうやら上手くいったようなので、その方法を紹介しよう。

続きを読む

GNS3 に VyOS 仮想ルーターを追加する長い道のり④ 応用編

本記事は 【アットホームな現場です】🎄★☆ネットワーク系エンジニア★☆アレコレアウトプット★☆🎄 Advent Calendar 2022 25日目の記事だ。
ごめんなさい、色々書いてたら結局分量が多くなって期限内に書き切れなかった。

GNS3 という OSS のネットワークエミュレータを、 Cisco の IOS などの取得なしに、無料のライセンス内で利用できるようにしようという話。

今回は最終回の応用編。
以前の投稿はこちら。



目指すゴール


今回は、上記の図のように、 ルーターを 2台 置いて、 ルーターを跨いだ端末間 (tmp-net-tools-1, -2) で通信ができるように構成していく。

続きを読む

GNS3 に VyOS 仮想ルーターを追加する長い道のり③ 実践編

本記事は 【アットホームな現場です】🎄★☆ネットワーク系エンジニア★☆アレコレアウトプット★☆🎄 Advent Calendar 2022 17日目の記事だ。

GNS3 という OSS のネットワークエミュレータを、 Cisco の IOS などの取得なしに、無料のライセンス内で利用できるようにしようという話。

環境導入編、イメージ準備編に続く実践編。
以前の投稿はこちら。


実際に、 GNS3 上で VyOS を使ってみよう。

GNS3 プロジェクトを作成

GNS3 を開き、適当なプロジェクトを新規作成(ないし開く)する。

平行して、 GNN3 VM が起動するまで待とう。

VyOS の起動

GNS3 GUI 上で、テンプレート一覧から VyOS のデバイスをドラッグ&ドロップして、プロジェクトに追加する。

続きを読む

GNS3 に VyOS 仮想ルーターを追加する長い道のり② イメージ準備編

本記事は 【アットホームな現場です】🎄★☆ネットワーク系エンジニア★☆アレコレアウトプット★☆🎄 Advent Calendar 2022 15日目の記事だ。 (空いていたので埋め)

GNS3 という OSS のネットワークエミュレータを、 Cisco の IOS などの取得なしに、無料のライセンス内で利用できるようにしようという話。

前回の環境導入編に続く第2回。

GNS3 のインストールと GNS3 VM へのアタッチが完了している状態から始める。

VyOS イメージの取得

続きを読む