気まぐれメモランダム / でたらめフィードバック

タグ: Web

ブラウザライブコーディングアプリ"live tone(PoC)"公開

公開:
ライブコーディングの情報をすこし収集してみようかとふと思い、『演奏するプログラミング、ライブコーディングの思想と実践』に目を通したりして、これはいまならブラウザでも実現できるのではないかという気がしたのでちょっとプロジェクトを作ってみました。ウェブオーディオAPIのラッパーであるTone.jsを呼び出すコードをブラウザ上で入力・実行できます。
エントリを表示

Spring小ネタ2題

公開:
Java製WebアプリケーションフレームワークのSpringを実務で使っていて気づいた小ネタを2点ほど。 SpringのセッションID発行はコード上でのセッションスコープのBeanの参照と連動します。セッションスコープを指定したBeanを定義してDI等でインスタンスを生成すると発行されるようになります。セッションスコープ指定Beanを定義してもインスタンスを生成しなければ発行されません Spring MVCのテストフレームワークであるMockMvcを使った単体テストでモック化した ServletContextインスタンスが必要になったときは…
エントリを表示

React単体テスト実行時のSVGコンポーネント警告解消方法(vite + vitest編)

公開:
React + vite + vitest(+ Happy DOM)のフロントエンドプロジェクトに初挑戦、SVGの参照にReactコンポーネントとしてのインポートを可能にするvite用プラグインvite-plugin-svgr(実体はSVGR)を利用したところ、vitest実行で次の警告が報告されました。…
エントリを表示

Springセッションスコープの単体テストは要Webアプリケーションコンテキスト

公開:
Java製WebアプリケーションフレームワークのSpringに業務で初挑戦することになりまして、Controllerの単体テスト実装で引っかかったのでメモを残しておきます。 SpringにはControllerの単体テスト方法として次の二種類が用意されています。 Spring Bootの組み込みAPサーバーを使う方法 組み込みAPサーバーを使わず、代わりにSpring MVCのテストフレームワークであるMockMvcを使う方法…
エントリを表示

Cognito Authentication Extension Libraryのメソッドはnullを返すことあり(2023年9月現在)

公開:
Amazon CognitoアクセスライブラリとしてAWSが.NET向けに公式に提供するAmazon Cognito Authentication Extension Library。README.mdに掲載されているコード片からだと CognitoUser.StartWithSrpAuthAsync メソッドは null を返すことがないように読めるのですが、実際には確認済みでないCognitoユーザーを指定して呼びだすと null を返すことを確認しました。なんで例外送出でないのかは不明。こういう落とし穴は気づきづらくてこまりますね……。皆様もお気を付けを。…
エントリを表示

daisyUIでサイトリニューアル

公開:
サイトをリニューアルしてしまいました。つい魔がさして。 主目的はCSSフレームワークの変更です。これまで採用してきたMaterial Design Lite(MDL)は重たい上に早々に開発終了したので移行は長年の懸案だったのですが、移行先の第一候補としていたGoogle公式の後継プロジェクトは進捗がはかばかしくなく、一方たまに思いついて情報収集するくらいではよさそうなCSSフレームワークに巡り合えず、でいままで来てしまっていました。しかし最近になって知ったdaisyUIがJavaScriptなしにもかかわらず見た目が今風、リニューアル前にMDLで実現していたことはすべて解決できたので、この機を逃してはなるまいと切り替えに踏み切った次第です(daisyUIがベースとする…
エントリを表示

Boto3 S3 Client APIのupload_file関数はメタデータ設定可能

公開:
必要に迫られてAWS SDK for Python (Boto3)を使った S3 へのファイルアップロード機能について調べたところ、クライアント API のupload_fileではオブジェクトメタデータは設定できないとする Web ページをいくつか目にしました。たとえば次。…
エントリを表示

シャドウDOMを使わないLitElementでslot要素を使う方法

公開:
Lit、というかウェブコンポーネントには子要素を指定位置に再配置するためのslot 要素という機能があります。これはシャドウ DOM用のため、thisを返すcreateRenderRootメソッドを定義するなどして普通に DOM にレンダリングするようにしたLitElementでは機能しません……そのままでは。…
エントリを表示

Amazon Cognito関連のエラー応答を整理する(2023年7月版)

公開:
AWS 提供サービスのご多分に漏れずAmazon Cognitoも求める情報を膨大な公式ドキュメントの中から得るのに骨が折れます。Cognito はユースケースが幅広いこともありその苦労もひとしお。特に苦労したのはエラー応答に関する情報で、まとまっているのを Web ではあまり見かけないように思うので、自分用の整理も兼ねてメモしておきます。 Cognito のエラーハンドリングが必要になるパターンは典型的には次かと思います。 URL 指定で直接アクセスしたとき API Gateway のオーソライザーに設定したとき
エントリを表示

Amazon CognitoはEメール送信数超過でエラーLimitExceededExceptionを返す(2023年7月現在)

公開:
先日見舞われて愕然としたので共有。 AWS の提供する認証サービスAmazon Cognitoはメール他による通知機能を提供しています。このうち E メールに関してはAmazon SESと関連付けないかぎり 24 時間の送信数が最大 50 件になります(Amazon Cognito のクォータ - Amazon Cognitoより)。実運用に耐える数字とは思えませんが、AWS としては SES との関連付けが前提で、関連付けなしは評価用等の想定なのでしょう。…
エントリを表示

LitでVue.js 2.xコンポーネントを置き換えた話

公開: / 最終更新日:
Lit + Deno + Packup でお手軽に Web Components 定義で記した通りLitのコンポーネントが開発できるようになったので、前回の更新ではブログ部分のVue.js 2コンポーネントを Lit コンポーネントに置き換えて Vus.js 依存を解消しました。Lit の使いかたがすこしわかってきたので、把握した注意点をメモとして残しておきます。
エントリを表示

Lit + Deno + Packupでお手軽にWeb Components定義

公開: / 最終更新日:
IE サポート終了Web Componentsもいよいよ実用フェーズかと Web Components 開発用ライブラリLitのドキュメントに目を通していて、これはDenoを使えばお手軽なのでは?とひらめき試してみたところあっけなく成功したので共有。
エントリを表示

Eleventyに移行

公開:
本ブログの構築・稼働環境をBoothCMS on Microsoft Azure App Service Web AppsからEleventy on Microsoft Azure Blob Storageに移行しました。機能の確認は行いましたが、無駄に長期間運用しているサイト故思わぬ問題が潜んでいるやもしれません。おかしな点に気づかれました方はお知らせいただければたいへんありがたいです。…
エントリを表示

HTTP GETリクエストにボディを指定できないのはなぜか?(改稿版)

公開:
本稿はHTTP GETリクエストにボディを指定できないのはなぜか?(初版)の改稿版です。変更点は稿末の「改稿の詳細」をご覧ください。 ブラウザで動くJavaScriptから、GETメソッドを指定したHTTPリクエストでメッセージボディを指定できないのはなぜか?という話題を見かけまして、指定できないのは知っていましたが理由はたしかめてなかったので追いかけてみました。

TL;DR

HTTPの仕様としては規定されず、実装依存で拒否される可能性ありとの記述あり ブラウザのクライアントでは指定不可

HTTPの仕様としては?

エントリを表示

Parcel 2とJestを組みあわせるときはBabelの設定を分離する

公開:
Parcel は便利、でも Jest を使うなら……の続き。 バージョン 2 リリースまで長い停滞期間のあったParcel、最近は開発が活性化しています。 バージョン 2 になって取りあつかいがおおきく変わったのがBabelの設定。 presets での @babel/preset-env や @babel/preset-typescript 、 @babel/preset-react の指定は Babel の設定としては定番ですが、Parcel はこの指定があるとしつこく警告します。…
エントリを表示

HTTP GETリクエストにボディを指定できないのはなぜか?(初版)

公開: / 最終更新日:
2022-07-28(Thu)追記: 記述に不足を認めたのであらためて改稿版を公開しました。そちらをご覧いただければ幸いです。 ブラウザで動くJavaScriptから、GETメソッドを指定したHTTPリクエストでメッセージボディを指定できないのはなぜか?という話題を見かけまして、指定できないのは知っていましたが理由はたしかめてなかったので追いかけてみました。

TL;DR

HTTPの仕様としては規定されず、実装依存で拒否される可能性ありとの記述あり ブラウザのクライアントでは指定不可…
エントリを表示

Slack incoming webhook URLの作成方法(2019年版)

公開:
こちらではお知らせしていませんでしたが、先日working-time-aroundSlackへの投稿機能を追加しました。外部アプリからの投稿は削除できないのでより強固な証跡が残せます……というのはともかく、実装にあたってちょっととまどったのが投稿に必要な情報の作成方法。Webを検索したところどうも最近になって仕様が変わったようで、古い仕様の解説や新旧の仕様の混在した解説が目につきます。人に伝えるにあたり新仕様の手順を整理したので、せっかくなのでこちらにも記録として残しておきます。次のとおり:
エントリを表示

Parcelは便利、でもJestを使うなら……(追記あり)

公開: / 最終更新日:
working-time-aroundではバンドラーにParcelを採用しました。試してみたかった、設定作業はしないに越したことがない、というのがその理由。実際に試してみるとなんにも準備せずに実行できる手軽さは圧倒的ですね。手放しでほめたくなります……が、ちゃんと開発するにあたってはおおきな落とし穴が。 Jest使いはじめて気がついたのですが、Jest はbabelと協調して動くので、Parcel では不要な babel の設定も Jest 用に用意しないといけないのでした……だったら…
エントリを表示

個人用勤怠記録Webアプリ"Working time around"公開

公開:
主に個人の勤怠記録を目的とした Web アプリケーション、"Working time around"を GitHub に公開しました。 working-time-around Web アプリケーションといいながらサーバーサイドの処理をまったく行わずデータはブラウザに保存する Single Page Application(SPA)なのでビルドを適当なホスティングサービスに置けばそれだけで動きます。ライブデモを Azure Storage に用意したのでどんなものかはそちらでおたしかめください。
エントリを表示

Azure App Service認証下のSPAでGraph APIと連携する際はアクセストークンに注意

公開:
業務で拾ったネタをまたひとつ。 Azure Active Directory ログインを使用するよう App Service アプリを構成するで解説されているとおり、Azure App ServiceはAzure Active Directory(AAD)を利用した認証機構が簡単に実現できます(Easy Authと言うらしい)。サーバー側でWebページを生成するタイプのWebアプリケーションでもシングルページアプリケーション(SPA)でも、なんなら静的なHTMLでも分け隔てなく手軽に利用できるのが便利なところ。また、これはさすがに静的なHTMLでは無理ですが、Microsoft Graphとの連携も可能になります。…
エントリを表示

Microsoft Edge Legacyのfetch API実装は2018年10月の時点では問題あり

公開: / 最終更新日:
2022-10-17(Mon)追記: 2018 年公開の本エントリの指摘対象はいわゆる Edge Legacy で Chromium ベースの 2022 年現在の Edge にはあてはまらないため、タイトルを「Microsoft Edge の fetch API 実装は現在のところ問題あり」から変更しました。 ここのところ業務ではしばらく Single Page Application(SPA)と Web API で構成された Web アプリケーションを開発しています。担当は主に SPA 側。最近は SPA も Internet Explorer のようなレガシーブラウザを相手にしなければ特に課題となるようなことはありません……とは残念ながらいかないのがつらいところ。問題になりがちなのはまたしてもマイクロソフト謹製のモダン(なはずの)ブラウザ、Edge です。…
エントリを表示

サーバー変数"REQUEST_URI"の参照はIISでURL書き換えを利用するときは避ける

公開: / 最終更新日:
日本語の情報がほとんどないようなのでメモ。次の環境でWebアプリケーションを動作させているとき: Windows 7 IIS Express PHP URL書き換え設定あり サーバー変数"REQUEST_URI"設定値にURLエンコードされた値が含まれていると、その値はデコードできない値になります。 たとえばURLに「作品("\u4F5C\u54C1)」という文字列を含めたとしましょう。UTF-8でURLエンコードすると次の表現になります: %E4%BD%9C%E5%93%81 しかしサーバー変数"REQUEST_URI"に設定される値は次になります: %8D%EC%95i ……元の値は影もかたちもありません。つまりここからの値の取得は…
エントリを表示

BoothCMSに移行

公開: / 最終更新日:
ブログ環境をppBlogからPicoに移行してから早四年、移行目的でBoothCMS を開発・公開してから早五ヶ月。ようやく気まぐれメモランダムを Pico からBoothCMSに移行しました。いやあ、テンプレート書き換えたりコンテンツファイルを変換したりたいへんだったんですよ……って、単になまけていただけですが。…
エントリを表示

フラットファイルCMS"BoothCMS"公開

公開: / 最終更新日:
PHPで作成したフラットファイルCMS"BoothCMS"の初回プレビューリリースをGitHubで公開しました。 https://github.com/DBC-Works/BoothCMS BoothCMSはPico(特に初期バージョン)の強い影響下にあります。管理機能はなく、コンテンツはファイルとして作成してWebサーバーに反映させることで公開します。標準状態のPicoにない特徴は次になります: テンプレートをコンテンツごとに指定可能
エントリを表示

[保留] Vue.jsコンポーネントは文字列"PathFragment"を含むプロパティ名を使えない

公開: / 最終更新日:
Vue.jsのコンポーネント機能は構文の冗長ささえ我慢すれば現在の標準 JavaScript でも使えて本サイトでも重宝していますが、内部処理とバッティングするのか、プロパティ名に文字列'PathFragment'を含む名前が使えません。値は単に undefined になり、コンソール等にも情報は出力されません。昨日この現象に遭遇して解決に頭を悩ませたので、メモとして記録を残しておきます。 2017-05-08(Mon)追記: 私の実装が誤っていた可能性も高いので保留にしておきます。
エントリを表示

UbicName解約からお名前.com移管までかかった期間は?

公開: / 最終更新日:
既報のとおり、本サイトの稼働環境をDTIServersMan@VPSからMicrosoft Azure App Service Web Appsに変更しました。OSがLinux(CentOS)からWindowsに変わりましたが、マイクロソフト他もちょっと前からPHPの稼動に力を入れているので特に問題はありません。…
エントリを表示

Material Design Liteのiframe処理をecho.jsで最適化する

公開: / 最終更新日:
Material Design Lite(MDL)は画像その他のリソースの有無をチェックし、存在しないときは非参照の表示が表に出ないよう調整します。そもそもこの機能がありがたいかは議論の分かれるところだと思うのですが(指定ミスに気づかない可能性が高まりますし)、対象のひとつである iframe 要素では別の問題も生じます。読みこみが二回発生してしまうのです。iframe 要素の参照先は比較的重いコンテンツになるので、これはありがたくない動作です。本来なら MDL が解決の方策を用意すべきだと思うのですが、残念ながら v1.3.0 の時点ではそうなっていません。
エントリを表示

サイトリニューアルのお知らせ

公開: / 最終更新日:
ご覧のとおり、サイトをリニューアルしました。 目的は通常更新の効率化。リニューアル前は複数のHTMLを手作業でちまちまと編集していたのですが、YouTube動画の参照などをあたりまえにやるようになって手間が増えるようになり、トップページへの最新情報の更新もめんどうだったので、作品データをほとんどJSON化してVue.jsでクライアント側でバインディングするよう変更。ついでにMaterial Design Lite(MDL)適用でデザインも全面的に見直しました。これで前よりも今風になった、はず。99limeのHTML KickStartだとうまく表示されなかったGoogleカスタム検索のコンポーネントも正しく表示されるようになりました。これで…
エントリを表示

Pico Tags Pluginでタグクラウド用の情報を生成する

公開: / 最終更新日:
なんかいろいろやりはじめてサイト更新が止まらなくなりましたが、たぶんこれで打ち止め。Pico Tagsに手を加えてタグクラウド用の情報を生成させてみます。やりかたはかんたん。ただ事前に「Pico Tags Pluginを効率化する」で説明した効率化対応を行っておいてください。 まず集計を保持するメンバー変数を定義します: (…) 次に、get_pagesメンバー関数の末尾に次のコードを追加します:
エントリを表示

Pico Tags Pluginを効率化する

公開: / 最終更新日:
このブログで採用した軽量CMSPicoソースを眺めていたら、タグ付けに使用しているプラグイン、Pico Tagsの処理を大幅に効率化できることに気づきました。プラグイン側でファイルを読みこんでヘッダーを解析していますが、わざわざそんなことをする必要はないのです。ただしPico側に少々手を加えなければなりません。以下その作業内容。…
エントリを表示

Pico移行にまつわるあれこれ

公開: / 最終更新日:
正規表現による置換と使い捨てPowerShellスクリプトと手作業による力技でデータの移行を済ませました。コメントもサルベージして、旧ブログへのリンクも新リンクへのそれに更新。iOSからのアクセスが意外にあるのでなんちゃってレスポンシブ対応も行いました。旧ブログへのアクセスの新ブログへのリダイレクト設定が残っていますが、まあこちはぼちぼちと。 メモとして、移行に際して気づいた点を以下に。

excerptの簡易日本語対応

Picoは一覧表示用にexcerpt(抄録、抜粋)を作成する機能を実装していて、$config['excerpt_length']の設定値で長さを調整できますが、これは空白(U+0020)で区切って数えた要素数の上限の設定なので、そのままでは日本語には向きません(空白が含まれないと全文出てしまう)。処理自体はlib/pico.phpのlimit_words関数で行っているので、対応するにはこの関数を変更します。私は手抜きで空白で分割する(explode関数を呼びだす)前に句読点のうしろに空白を挿入するようにしました。…
エントリを表示

Picoに移行

公開: / 最終更新日:
このところしばらく開発の停滞したppBlogを使い続けたものかどうかぼんやりと考えておりました。ウェブログの夢は儚く消えかけ、ブログサイト構築用のソフトはどれもずいぶん影が薄くなり、移行するにもいい手がないなあと思っていたのですが、先日ふとしたきっかけで軽量 CMS の世界はまだまだ豊かであることを知り、思い切って移行を決意。目先の変わったことをやりたかったという話もありますが。…
エントリを表示

jQuery Mobileでページ読みこみ時にアンカー指定を復元する応急処置

公開: / 最終更新日:
ネイティブアプリケーション風の処理を実現するためにjQuery Mobileがいろいろと世話を焼いていることは興味のある方はご承知かと存じます。中でもページ内アンカーの処理がそのままだと行われないことにとまどいを覚える方は少なくないに違いありません。 幸い一般的な処理に関しては値“external”を指定したrel属性を指定したり値“false”を指定したdata-ajaxを指定するノウハウが周知されつつありますが、残念なことに初回のページロード時にURLに付加されたアンカー指定(#以降の指定、フラグメントやハッシュとも言いますね)を生かす方法は知られていません。それもそのはず、アンカー指定が生きないのはjQuery Mobileが親切にもページ初期表示時にページトップにスクロールしてくれるからです……「小さな親切大きなお世話」という言葉が脳裡をよぎるのはこんなときでしょうか。…
エントリを表示

Easy Image Slide: イメージスライドjQuery plugin for jQuery Mobile

公開: / 最終更新日:
2023-08-08(Tue)追記: 役目を終えたので配布を終了しました。 リニューアル前の「はりぼてミュージアム」ではアルバムジャケットの拡大表示にThickBoxを使っていたのですが、これはjQuery Mobileとの共存が考慮されておらず組みこんでみたところ使えませんでした。かなり古いライブラリなのでしかたがありません。 Webを検索して「jQuery Mobileを使った、タップで拡大するシンプルなイメージギャラリーを構築する際のサンプルコード」などを参考にして自作しましたが、せっかくだからとjQueryプラグイン化したので公開することにします。次のURLからZIPファイルをダウンロードできます。…
エントリを表示

lighttpdバージョンアップの落とし穴

公開: / 最終更新日:
ふと魔がさしてlighttpdのパッケージをアップデートしたら起動しなくなってあわてるはめにおちいりました。調べてみると原因は設定ファイルの構成が大幅に変更されたため。うーん、メジャーバージョンアップでもないのにそんなことしないでほしいなあ。 ちなみにどんなふうに変更されたかといいますと…… 変数定義が増えた。(たぶんこのせいで古いバージョンの設定ファイルでは起動しなくなった) lighttpd.confひとつだった設定ファイルが複数に分割された。たとえばモジュール読みこみ設定はmodules.confで指定するようになった。
エントリを表示

ppBlog on lighttpd

公開: / 最終更新日:
引越し後の「気まぐれメモランダム」はApacheではなくlighttpdで動いております。 なにしろ使うのはじめてなものでけっこう動かない状態を放置していました。アクセス権やCGIの設定はまあApacheとlighttpdの互換性の一般的な注意事項になるのでしょうが、ちょっとこまったのがURL書き換えの設定。けっきょくこれはppBlogパッケージ同梱の.htaccessを参考にlighttpd.confにurl.rewrite-if-not-fileを追加して対応しました。…
エントリを表示

Pick up work

最近のエントリ

アーカイブ

ブログ情報