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

タグ: プログラミング

TanStack Routerの単体テストで警告を出さない方法を確認する

公開:
構想を温めていた小品の新作自作Webアプリに手を付け始めました。新作はクライアントサイドでルーティングを行うのでルーティング用ライブラリが必要です。定番は古くからあり私も別アプリで使っているReact Routerかと思いますが、次の理由から今回は見送り。breaking changeにたびたび巻き込まれてあまりいい印象がないRemixとの統合を果たすv7のリリースが間近で安定するまで少し時間がかかりそう代わりに世評の高いTanStack Routerを試してみることにしました。TanStack RouterはFile-Based Routing推奨とのことなので素直に従ってみたところ、型推論や補完が強力に働いて感心することしきり。しかしルーティングってそんなに変わるものでもないので、労力のかけかたは少し疑問に思わないでもないです。…
エントリを表示

ブラウザライブコーディングアプリ"live tone(PoC)"v0.3.0リリース

公開:
Tone.jsを利用したブラウザライブコーディングアプリ"live tone(PoC)"のv0.3.0をリリースしました。https://github.com/DBC-Works/live-tone/releases/tag/v0.3.0今回の目玉はコード共有機能の実装。アクセスURLを発行できるWebSocketサーバーを使えるなら(私はフリープランのあるAzure Web PubSubを使いました)、URLを発行して"WebSocket server URL"にペースト、識別用のタグも指定してからの"Connect"ボタン押下でWebSocketサーバーに接続します。接続中は"Share"ボタンを押下するたびに自分のコードを同じく接続している他のユーザーに送信、他のユーザーの送信したコードも随時受信します。コードを受信するとそのユーザーの指定したタグ名のタブが増え、そのタブの選択で受信コードを閲覧できます(読み取り専用です)。"Run"ボタンを押下すればすべてのコードを同時に実行=再生します。…
エントリを表示

JavaでECDH-ES指定JWEの暗号化と復号を行う方法

公開: / 最終更新日:
暗号化データのフォーマットをJSONベースで規定したJSON Web Encryption(JWE)JSON Web Token(JWT)の一部として取りあつかわれることが多く明示的に処理する機会は少ないと思われますが、仕様としてはJWTとは独立なので単独での使用も可能です。最近業務でアルゴリズムにECDH-ESを指定したJWE暗号化データの復号処理をJavaで実装することになったのですが、まとまった参考になる情報がなかなか見あたらず難儀しました。同じように苦労される方がいそうなので、暗号化も含めメモとして残しておきます。

ECDH-ESとは?

ECDH-ESはElliptic Curve Diffie-Hellman Ephemeral Staticの略で楕円曲線Diffie-Hellman鍵共有の一種、ECDHE(一時的楕円曲線Diffie-Hellman鍵共有)にカテゴライズされるものです。ハイフン以降のESが鍵の管理方法を示していて、Ephemeralは暗号化側の鍵が一時的であること、Staticは復号側の鍵の管理が永続的であることを示します。…
エントリを表示

Azure Web PubSubはWebSocketサーバーとして利用可能、ただすこし注意が必要

公開:
このところMicrosoft Azureの製品の一つであるAzure Web PubSubをいろいろ試していて、普通のWebSocketサーバーとして使えることを確認できたので気づいた点をメモとして残しておきます。2024年9月現在の話です。

公開されているJavaScript用ライブラリはNode.js用

ブラウザとAzure Web PubSubの通信はWebSocket APIで行えるため専用のライブラリは必要ありません。Azure Web PubSubのJavaScript用クライアントライブラリとしてマイクロソフトはWeb PubSub client library for JavaScriptを公開しています。…
エントリを表示

ちょっと楽するLINQの書きかた

公開: / 最終更新日:
最近他の人の書いたメソッド構文のLINQを読む機会が増えて、もっとシンプルに書けるのになあと思うことがしばしば。典型的には、LINQで絞り込んだIEnumerable<T>に対してEnumerable.ToList<TSource>(IEnumerable<TSource>) メソッドを呼び出してList<T>クラスのインスタンスを生成、その後List<T>.ForEach(Action<T>) メソッドで取り出した各要素を別のリストにList<T>.Add(T) メソッドで追加したりするような処理です。LINQの処理はイテレーターをベースにしています。一方Listクラスは要素をオンメモリで管理します。そのためイテレーターで処理できるデータ(LINQ to Entitiesでアクセスしたデータなど)はなるべく…
エントリを表示

React AceをTesting Libraryでテストするときはフォーカスを明示設定すること

公開:
Tone.jsをベースにブラウザでのライブコーディングを可能にするlive tone、使えなくもないという感じにまではできそうなのでコード編集要素を標準のtextareaから高機能なコードエディタに変えることにしました。代表的なコード編集用コンポーネントと言えばCodeMirrorAceMonaco Editorあたりかと思いますが、今回は機能とサイズのバランスからAceを採用。React用のラッパーライブラリReact-Aceを使うことでtextareaからの置き換えも次を調整するだけで済みました。onchangeイベントハンドラの引数が標準と異なるので対応する幅と高さをwidthheight…
エントリを表示

『良いコード/悪いコードで学ぶ設計入門』を読むにあたり気をつけたいこと

公開:
諸事情あってITエンジニア本大賞2023技術書部門大賞受賞作の『良いコード/悪いコードで学ぶ設計入門』(仙塲大也、技術評論社)にいまごろになって目を通しました。「設計」にかぎらない幅広いトピックをあつかう点で看板に偽りありですが、その手広さが支持された一因なのでしょう。ステップアップを図りたい初級者にとって有用なアドバイスが得られる本であることは確かだと思います。一方で個人的には見過ごせない記述もまま見られ、手放しでお勧めできる本でもないというのが率直な評価です。いくつかメモします。(用語は同書を踏襲します)

不変をめぐって

同書の強い主張の一つに「クラスは原則として不変にすること」があります。基本的には同意しますが、その主張のしかたには疑問があります。…
エントリを表示

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

公開:
ライブコーディングの情報をすこし収集してみようかとふと思い、『演奏するプログラミング、ライブコーディングの思想と実践』に目を通したりして、これはいまならブラウザでも実現できるのではないかという気がしたのでちょっとプロジェクトを作ってみました。ウェブオーディオAPIのラッパーであるTone.jsを呼び出すコードをブラウザ上で入力・実行できます。https://github.com/DBC-Works/live-tone……しかし自分で作っておいてなんですが、Tone.jsのAPIがおよそライブコーディングに向かないため、実用性にははなはだ疑問が残ります。Tone.jsの挙動も個人的にはいまいちよくわかりません(ドキュメントにも誤りがあったりして)。まあProof of Concept、概念実装ということで大目に見ていただければ。…
エントリを表示

Spring小ネタ2題

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

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

公開:
React+vite+vitest(+Happy DOM)のフロントエンドプロジェクトに初挑戦、SVGの参照にReactコンポーネントとしてのインポートを可能にするvite用プラグインvite-plugin-svgr(実体はSVGR)を利用したところ、vitest実行で次の警告が報告されました。(…)実害はありませんがノイズではあるので、解消を試みて次で解決できました。ユニットテスト実行時の置き換え用ダミーコンポーネント定義を任意の場所(jestのマナーに従うならsrc/__mock__/あたり)に保存します(…)SVGの参照をダミーコンポーネントに置き換えるエイリアスをvitestの設定で定義します…
エントリを表示

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

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

気づかなかったLinuxシリアル通信プログラミングチェックポイント

公開: / 最終更新日:
2023-12-17(Sun)追記:「送受信データが変換される」を追加しました。またLinux manページのリンク先をDebianのそれに変更しました(OSDNが安定しないため)。USB-シリアル変換ケーブルで接続するデバイスからデータを受信するLinuxアプリを業務で作成することになりました。Webエンジニアなのに。そもそもシリアル通信もLinuxアプリもやったことのない人間にそんなタスクをアサインするのはどうかと思うのですが、まあそこはそれ、いろいろ調べてなんとかかたちにするところまで持っていきました。その過程で気づいた、Webにある情報では気づきにくかった、あるいは見当たらなかった情報をいくつかメモとして残しておきます。ちょっとどこまで一般化できるかわからないのですが………
エントリを表示

pytest+motoでセットアップを共有する方法

公開:
Python初心者かつAWS初心者の私がAWS Lambdaの開発をはじめて半年強、ようやくpytestを使って単体テストを本格的に書けるようになってきました。motoというAWSのモックサービスを使うとローカルであることをほぼ意識せずに単体テストが書けることも学習。ただしmotoのもっとも手軽な使用法であるデコレータでの指定だとせっかくのAWSモックセットアップがテストケース間で共有できません。テストケースをクラスでグループ化してクラスにデコレータで指定しても駄目。まあそんなものかと思っていたのですが、「共通化できるのでは?」との声があがったので本腰を入れて調べて、無事解決に至ったのでメモとして残しておきます。…
エントリを表示

日時の秒未満精度のプログラミング言語による違い(2023年9月現在)

公開:
プログラミング言語によって日時の秒未満の精度が異なる点を意識しなければならないケースに先日見舞われ、せっかくなので思いあたるプログラミング言語の秒未満精度をざっと追いかけてみました。親しみのないものも多く誤りがあるのではないかと思いますが、取り急ぎの結果は次のとおり。言語精度補足JavaScriptミリ秒ナノ秒対応の標準ライブラリ(Temporal)がリリース待ちPHPマイクロ秒Pythonマイクロ秒Swiftミリ秒?sub-millisecond precisionとの表記あり.NET(C#他)ナノ秒書式化の精度は7桁までC++ナノ秒Goナノ秒Javaナノ秒(LocalDateTime)Java 8より前は…
エントリを表示

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

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

ロートルプログラマのC++再訪記

公開:
あんなに親しかったC++と疎遠になって早や十数年。次にネイティブのプログラムを作るならRustを使いたいなあと思っていたところ、何の因果かふたたびC++と相まみえることになりました。疎遠になっていたとはいえ噂話は耳にする間柄、いまどきのC++(いわゆるModern C++)がかつてとは異なる様相を呈していることくらいまでは把握していましたが、細部に目を凝らしたりまでは当然しておらず、何がどうなっているかは浦島太郎状態。しかしC++を舐めてかかると痛い目にあうことは過去の経験で叩き込まれています。これはまずいと必死になってキャッチアップ、なんとか一息付くところまでたどり着いたので、せっかくですからまとめておきます。…
エントリを表示

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

公開:
必要に迫られてAWS SDK for Python (Boto3)を使った S3 へのファイルアップロード機能について調べたところ、クライアント API のupload_fileではオブジェクトメタデータは設定できないとする Web ページをいくつか目にしました。たとえば次。python で S3 にメタデータをつけてファイルをアップする - たそらぼAWS S3 オブジェクトの Metadata 管理 - public note実際にはUploading files - Boto3 1.28.14 documentation の The ExtraArgs parameterで説明されているとおり、upload_file でもメタデータは設定できます。…
エントリを表示

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

公開:
Lit、というかウェブコンポーネントには子要素を指定位置に再配置するためのslot 要素という機能があります。これはシャドウ DOM用のため、thisを返すcreateRenderRootメソッドを定義するなどして普通に DOM にレンダリングするようにしたLitElementでは機能しません……そのままでは。しかし考えてみれば普通に DOM にレンダリングしたのですから普通に DOM として操作すればよいだけの話です。幸いなことにその実現を容易にするライフサイクルメソッドをLitElementクラスは定義可能です。レンダリング前に呼び出されるconnectedCallbackメソッドで子要素を参照できます…
エントリを表示

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

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

URL 指定で直接アクセスしたとき

エントリを表示

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

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

RMWCとminifyの組みあわせでMDCのCSSが失われたときの対応方法

公開:
こんな現象に遭遇するのは私くらいかなあと思いながらメモ。個人用勤怠記録 Web アプリWorking time aroundは次のサードパーティーライブラリ・ツールを利用しています。UI キットにRMWC。React で Google 謹製 Web 向け Material Design CSS フレームワークMaterial Components for Web(以下 MDC)を利用可能にするコンポーネントライブラリで、MDC に依存もともと使っていた Google 謹製のMDC Reactの開発が終了してしまったのでやむを得ず乗り換えたもの(乗り換えの顛末)バンドラーにParcel先日ライブデモ
エントリを表示

Processing製フォント一覧表示ユーティリティ `ProcessingFontScape` 公開

公開:
自分の中で必要性が高まったので、以前作成した Processing のフォントカタログの機能をすこし強化してあらためて GitHub リポジトリとして公開しました。DBC-Works/ProcessingFontScape: A small utility that draws a list of fonts available in Processing.ささやかなユーティリティですが、お役に立てば幸いです。なおREADMEでも触れましたが、Windows 10 以降の環境では Processing はすべてのユーザー用にインストールしたフォントしか利用できません。にもかかわらず `PFont.list()の戻り値にはログインユーザーでのみ利用可能なフォント名も含まれます。皆様お気をつけを。…
エントリを表示

『リアルタイムグラフィックスの数学』サンプルコードを Processing で動かすハードルは高かった

公開:
巴山竜来『リアルタイムグラフィックスの数学』は数学観点からノイズやレイマーチングを解説する薄いながらも内容の濃い本で、濃い故に私のような数学に馴染みのない者にとっては容易に読み進められる内容ではなく、また掲載されているサンプルコードからの抜粋と書籍用に編集された図版とではうまく擦りあわされていないと感じる点もあり、理解には別途配布されているサンプルコードの入手は必須です。このサンプルコードが Processing でも使えるか気になるのは Processing 使いとしては当然。そこで余裕が出たタイミングでまず何も考えずにPShaderで読み込んでみたところ、次の無慈悲なメッセージに遭遇する羽目になりました。…
エントリを表示

Processing 4.0 と Java のあいだ

公開:
2022 年 8 月にリリースされたProcessing 4、二年半ぶりの待望のメジャーバージョンアップはベースとなる Java も 8 から 17 にアップデートされ、Java モードで使える文法が最新の Java により近づきました。過去のエントリ使えない Java の機能を知る / Processing と Java のあいだ(その 2)は更新しましたが、記載しなかった機能についても簡単に確認したのでメモしておきます。

使える機能

var 識別子(ローカル変数の型推論)テキストブロック(Programmer's Guide to Text Blocks)ラムダ式(Lambda Expressions (The Java™ Tutorials > Learning the Java Language > Classes and Objects)
エントリを表示

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

公開: / 最終更新日:
Lit + Deno + Packup でお手軽に Web Components 定義で記した通りLitのコンポーネントが開発できるようになったので、前回の更新ではブログ部分のVue.js 2コンポーネントを Lit コンポーネントに置き換えて Vus.js 依存を解消しました。Lit の使いかたがすこしわかってきたので、把握した注意点をメモとして残しておきます。以下すべて Lit v2.3.1 時点の話となります。また理解不足により誤りを記しているかもしれません。ご容赦を。

CSS フレームワークとの併用ではシャドウ DOM は使わない

Lit のコンポーネントはシャドウ DOMへのアタッチを標準的な利用と想定して定義されています。CSS in JS でコンポーネントのスタイリングを完結させるケースにおいては望ましい想定ですが、既存の CSS フレームワークの利用などスタイルを HTML 全体で定義・利用するケースではシャドウ DOM へのアタッチはスタイルが反映しないため使えません。…
エントリを表示

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

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

Deno をインストール

まず Deno をインストールしていなければインストールします。Windows ならWindows パッケージ マネージャー(winget)でインストールできればお手軽なのですが、残念ながらまだ存在しません(Release Builds on WinGet Pkgs · Issue #5640 · denoland/deno
エントリを表示

Gradleを実行するGitHub Actionsワークフローの初心者向けメモ

公開:
先日Processing用動作生成ライブラリFrameRecorderに音声指定機能を追加した際、あわせてGitHubのリポジトリにビルドのワークフローも追加しました。追加の際はGitHubの提供するWebページ「GradleでのJavaのビルドとテスト - GitHub Docs」を参考にしたのですが、当然のことながら記述内容はGitHub ActionsGradleの理解が前提。GitHub Actions初挑戦かつGradle初心者の私には少々情報が足りなかったため、別途Webを検索するなどして補完、無事成功するワークフローを作成できました。せっかくなので調べた情報をまとめておきます。
エントリを表示

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

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

TL;DR

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

HTTPの仕様としては?

HTTP/1.0を規定するRFC 1945、HTTP/1.1を規定していたRFCのうちRFC 2068
エントリを表示

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

公開:
Parcel は便利、でも Jest を使うなら……の続き。バージョン 2 リリースまで長い停滞期間のあったParcel、最近は開発が活性化しています。バージョン 2 になって取りあつかいがおおきく変わったのがBabelの設定。presetsでの@babel/preset-envや@babel/preset-typescript、@babel/preset-reactの指定は Babel の設定としては定番ですが、Parcel はこの指定があるとしつこく警告します。(…)(…)(…)公式ドキュメントの解説によると次の通り。However, if you're only using `@babel/preset-env`, `@babel/preset-typescript`, and `@babel/preset-react`, Babel may no longer be necessary. Parcel supports all of these features automatically without a Babel config, and Parcel's default transpiler is much faster than Babel.
エントリを表示

Visual Studio CodeでJavaScriptの型チェック機能を網羅的に利用するには?(2022年版)

公開:
Visual Studio Codeには編集しているJavaScriptの型チェック機能があります。TypeScriptの機能の援用ですが、TypeScriptを利用しないプロジェクトでも利用できます。……という知識はあったのですが、あらためて使ってみようとしたところなかなかたしかな情報にたどりつけずけっこう手間取ったのでまとめておきます。作業自体は簡単です。次のとおり。「ファイル」-「ユーザー設定」-「設定」(Windowsの場合)を選択「設定」タブが開くので、次をチェック(「ユーザー」にするか「ワークスペース」にするかはお好みで):JavaScript > Validate: Enable
エントリを表示

Visual Studio CodeでProcessing(2021年版)

公開:
Visual Studio CodeでProcessing(2018年版)」を公開してから早や数年。ひさしぶりに読みかえしたところ内容がいささか古びていることに気づきましたので、現時点での最新版をあらためて公開します。手順の概要は次のとおり。ProcessingおよびVisual Studio Codeのインストールprocessing-javaのインストール(Macのみ)拡張機能のインストール実行用設定ファイルtask.jsonの作成

ProcessingおよびVisual Studio Codeのインストール

ProcessingおよびVisual Studio Codeをインストールしていなければインストールします。どちらのインストールについてもくわしい解説記事が多数存在しますので本稿では割愛します。…
エントリを表示

Processing 3用動画作成サポートライブラリ"FrameRecorder"公開

公開: / 最終更新日:
Processing 3用の簡単な動画作成サポートライブラリ"FrameRecorder"を公開しました。夏季休暇の自由研究です。FrameRecorder先日サイトのアナリティクスをGoogle アナリティクス4に移行したのでアナリティクスレポートをいつもよりすこし注意して見ていたところ、ProcessingライブラリVideo Exportを試すのアクセスがけっこうあることを確認、Processingでの動画作成サポートライブラリには需要があるとのことかと思いましたので、OneShotMovieWorkbenchであらかた作っていたものを切り出し、Javaに書き換えライブラリとして独立させてみました。…
エントリを表示

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

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

TL;DR

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

HTTPの仕様としては?

HTTP/1.0を規定するRFC 1945、HTTP/1.1を規定していたRFC 2068およびRFC 2616
エントリを表示

Deno用契約プログラミングユーティリティ"Code Contract Deno"公開

公開:
Deno向けのささやかな契約プログラミングユーティリティ、"Code Contract Deno"をGitHubに公開しました。code-contract-denoコードを見ていただければおわかりかと思いますが、Proof of Conceptというかネタです。JavaScriptなら契約プログラミングを関数のラップで実現できるのでは?と思いついたので試してみたもの。記述が冗長になるので全面適用には向かないなと自分でも思いますが、重要な関数だけ厳しく検証したいときには十分使えるのではないかと作ってみて思いました。よろしければどうぞ。……とはいえDenoで何かするという人はまだ多くはないかもしれません。ターゲットを…
エントリを表示

RMWCでMDC Reactを置き換える

公開:
地味に間欠的に開発を続けている個人用勤怠記録 Web アプリWorking time around開発の停止した Material Component for React(MDC React)をいつまでも使い続けるのもなあ、ということでMDC Web on other frameworksで紹介されているRMWC: React Material Web Componentsに置き換えました。RMWC の日本語の情報はほとんど見かけないのでちょっとメモ。グリッド関連のコンポーネント、一行のときは行(GridRowコンポーネント)を省略して列(GridCellコンポーネント)を直接書けるようになっているのですが、そのせいで複数行のとき…
エントリを表示

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

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

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

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

MDC React v0.15の全面採用は時期尚早(追記あり)

公開: / 最終更新日:
2020-01-19(Sun)追記:昨年 11 月にMDC-React is no longer under active developmentと宣言されていました。アップデートされないと思ったらそういうことだったのか……working-time-aroundでは UI ライブラリとしてMaterial Component for React(MDC React)を採用しました。バージョンは v0.15 とまだメジャーバージョンはリリースされていませんが、ベースとなるMaterial Component for the Webが今年二月に v1.0.0 リリース後 v3.2.0 まで順調に版を重ねているので問題なかろうと判断してのこと。しかしこれはちょっと時期尚早で、まだまだ気軽に使うというわけにはいきませんでした。以下覚え書き。…
エントリを表示

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

公開:
主に個人の勤怠記録を目的とした Web アプリケーション、"Working time around"を GitHub に公開しました。working-time-aroundWeb アプリケーションといいながらサーバーサイドの処理をまったく行わずデータはブラウザに保存する Single Page Application(SPA)なのでビルドを適当なホスティングサービスに置けばそれだけで動きます。ライブデモを Azure Storage に用意したのでどんなものかはそちらでおたしかめください。Working time aroundいまどきの Web アプリにもかかわらずスタンドアローンという点からもおわかりのように、本アプリは実用を目的したものというよりは私個人の学習成果のアウトプットという性格の強いものです。最近業務ではフロントエンドへのコミットばっかりなのですが、派生開発のシステムで動きの速いフロントエンドの最先端の動向を取りこんでいくのは容易ではなく、学習の成果はなかなか反映させられません。そんな中でスマートフォン用の勤怠システムやアプリの情報を収集する機会があり、アップデートされてないクライアントの数々を目にして、これくらいなら作っちゃえばいいのでは?と思ったのが開発のきっかけ。せっかくなので使いたい技術やパッケージをここぞとばかりに次のとおりぶち込んでみました。…
エントリを表示

Processing製GLSLホストプログラム、SoundVisualShaderBase公開

公開:
主にインストの拙作のYouTube公開用動画生成に用いることを想定したProcessingプロジェクト、SoundVisualShaderBaseをGitHubで公開しました。SoundVisualShaderBase先のエントリにあるとおり最近GLSLでの映像生成に手を出しはじめたので、SoundPotentialFrameからGLSLのホスティングに必要な機能を抜き出したみたいなプログラムです。コードを読めばわかるとおり、GLSLファイルを読みこんで音声を再生、再生時の各種の値をGLSLに渡して描画、くらいしかしてません。GLSLのホスティングとかいいながらフラグメントシェーダーにだけ対応、バーテックスシェーダーには未対応で、ライブローディングもできないので、何のためのプログラムなのかと思われる方もいらっしゃるかと思いますが、複数フィルターを取りあつかえるようにしたので再生中にそれらを抜き差しするだけでもそれなりに楽しめます。動画生成用の静止画出力も可能です。実用的に使うには強力なマシンスペックが必要ですが………
エントリを表示

あまり知られていない様子のYAMLのあれとかこれとか

公開:
各種設定ファイルのフォーマットとしていまやすっかり定着した感のあるYAMLですが、単なるフォーマットの一種としてしか思われていない節もあり比較的初期から注目していた人間としては残念なかぎり。そこで知っていると役にたつかもしれないトピックをいくつかあげてみます。

YAML⊇JSON

Webでは「JSONではなくYAML」みたいな表現をよく見かけますが、実はJSONはYAMLです(JSON is YAML)……という表現は使われなくなりましたが、YAMLはJSONの自然なスーパーセットで、すべてのJSONファイルは有効なYAMLファイルでもあります。「どこが?」と思われるかもしれませんが、YAMLは書式としてブロックスタイルとフロースタイルという二つのスタイルを仕様で定めていて、フロースタイルだとJSON相当の記述となるのです。ブロックスタイルのほうが可読性が高いので自然とそちらが多用され、フロースタイルのYAMLは見かける機会がないわけですね。「YAMLのフロースタイルではなくブロックスタイル」と表現すると通に見られる、かもしれません(通に見られたからなんだ、というのはなしで)。…
エントリを表示

Processingでフォントカタログを表示する

公開: / 最終更新日:
GIMPのテキストツールフォント選択インターフェースの見づらさ、Windows コントロールパネルのフォントサンプルの見づらさに以前から不満を募らせていたのですが、「Processing ならフォントサンプルの一覧を簡単に表示できるのでは?」と突然ひらめいたのでさくっと作成してみました。マウスホイールで一覧スクロール、コントロールキーを押しながらのマウスホイールでフォントサイズ変更(16 から 48 まで)です。テキストは適当に変えてください。私の環境ではスクロールしているとときどきまったく応答しない状態になることがありますが、これはどうやらフォント作成に時間がかかるためのようです。すこしするとまた反応するようになるので、のんびり使ってもらえればと思います。…
エントリを表示

Date, C.J.『標準SQL 改訂第2版 JIS/ANSI/ISO準拠』 - ソフトウェア技術書温故知新(その3)

公開:
ソフトウェア技術書温故知新、第三回は1990年に邦訳が刊行されたC.J.デイト『標準SQL 改訂第2版 JIS/ANSI/ISO準拠』(トッパン)。https://www.amazon.co.jp/標準SQL―JIS-ANSI-ISO準拠-アジソン-ウェスレイ・トッパン情報科学シリーズ/dp/4810180190ああ憧れの第四世代言語(4GL)……と言う表現が適切だったのかはいまとなってはよくわかりませんが、Webアプリケーション普及前、クライアント / サーバーシステムのクライアントとしてWindowsマシンが用いられるようになった時代のほんの一時期、GUIをドラッグ&ドロップで簡単に作成できるRAD(Rapid Application Development)と呼ばれるプログラミング言語・環境が普及の兆しを見せたことがありました。Windows用としてはSQL WindowsやPower Builderといったあたりが有名どころと記憶していますが、Delphiや.NET化以前のVisual Basicもその文脈で使われた側面がありました。…
エントリを表示

Alexandrescu, Andrei『Modern C++ Design』 - ソフトウェア技術書温故知新(その2)

公開:
ソフトウェア技術書温故知新、第二回は2001年に邦訳が刊行されたアンドレイ アレキサンドレスク『Modern C++ Design』(ピアソンエデュケーション)。https://www.amazon.co.jp/Modern-C-Design―ジェネリック・プログラミングおよびデザイン・パターンを利用するための究極のテンプレート活用術-‐Depth/dp/4894714353かつてオブジェクト指向プログラミング言語としてC++が圧倒的な存在感を放っていた時期、多くの人に重宝された書籍が人類には早すぎたC++をなんとか安全に取りあつかうための手引書であることは論を俟ちません。もっとも代表的なのは『…
エントリを表示

久野靖『入門JavaScript(My UNIX Series)』 - ソフトウェア技術書温故知新(その1)

公開: / 最終更新日:
諸般の事情により業務の学習で購入した書籍を整理することになり、けっこうな量をチャリポン経由で処分しました。しかし中には内容が out of date になっていても愛着があって手放せないものもあります。またそれらを見ていたら以前処分した本のことなどもいろいろ思いだしたりしました。そこでせっかくなのでいくつかを何回かに分けて紹介したいと思います。題してソフトウェア技術書温故知新、第一回はこちら、2001 年に出版された久野靖『入門 JavaScript(My UNIX Series)』(株式会社アスキー)。https://www.amazon.co.jp/入門-JavaScript-My-UNIX-久野/dp/4756138713
エントリを表示

Visual Studio CodeでProcessing(2018年版)

公開: / 最終更新日:
2021-09-26(Sun)追記:本稿の記載内容がいささか古びたため、内容を更新したVisual Studio CodeでProcessing(2021年版)を別途公開しました。設定方法につきましてはそちらをご覧いただければ幸いです。SoundPotentialFrame開発でjsonやらGLSLやらPDEでは取りあつかえない形式のファイルをプロジェクトで利用するようになったので、Visual Studio CodeでのProcessing開発を試してみました。各所で紹介されているとおり、手順は次のとおり:MacでProcessingを使っている人はprocessing-javaをインストールします(PDEのメニュー"Tools"にある'Install "processing-java"'を選択)…
エントリを表示

ProcessingでOpenGLシェーダーを使う(2018年版)

公開:
SoundPotentialFrameの開発で簡単にできそうだったのでOpenGLシェーダーのフィルター利用機能実装を試みてみました。しかし Web で簡単に入手できる情報には古いものも多く、見よう見まねで適用するだけでは使えなかったりで動くようになるまで四苦八苦。Processing で OpenGL シェーダーが利用可能になったのはバージョン 2.0 で、その後 Processing も OpenGL も(シェーダ記述言語GLSLも)バージョンアップを重ねているため、いろいろ情報に齟齬が生じている模様です。いや、Processing 公式の説明をちゃんと読めって話なわけですが。具体的には次のあたりで引っかかっりました:…
エントリを表示

サウンドビジュアライザープログラム、SoundPotentialFrame公開

公開:
主にインストの拙作のYouTube公開用動画生成に用いているProcessingプロジェクト、SoundPotentialFrameをGitHubで公開しました。SoundPotentialFrame自作のサウンドビジュアライザーとしては三代目。初代はProcessing 1.5.x用で、当時標準で存在していたMovieMakerクラスで動画を生成していました。おそらくはQuickTimeのWindowsサポート終了の影響でProcessing 2.0ではMovieMakerクラスが削除されたので(PDEの「ツール」メニューにある「ムービーメーカー」はその代替で別の機能)、それではとリアルタイム操作への対応を試みたのが…
エントリを表示

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 です。…
エントリを表示

治具あるいは型枠としてのユニットテスト――ベック『テスト駆動開発』雑感

公開: / 最終更新日:
昨年秋に発売されたベック『テスト駆動開発』新訳版の存在に今年7月になってようやく気づき、購入・再読して以来、ユニットテストについてぼんやりと考えています。初版発売時はその存在に気づかず、しばらくしてから図書館で見つけたのがこの本との最初の出会い。借りて読んで大事なことが書かれていると思いつつ再読もせず、その後偶然入手する機会もあったのですがそのときも再読までは至りませんでした。今回あらためて読みかえす気になったのは、訳が新しくなったということもありますが、なんといっても訳者によって付け加えられた付録C「訳者解説: テスト駆動開発の現在」の存在。原著初版出版(2003年)後のテスト駆動開発にまつわるトピックが手際よくまとめられていて、経過した時間を補って余りあります。…
エントリを表示

Javaの機能の利用を控える / ProcessingとJavaのあいだ(その3)

公開: / 最終更新日:
前回はProcessingで利用できないJavaの機能の話でした。最後はProcessingでも使えなくはないけど無理して使うことのない機能の話で締めましょう。

Java Stream API

Java SE 8の目玉機能のひとつ、Java Stream APIはProcessingでもクラスライブラリとしては使えます。使えますが、ラムダ式の使えないProcessingでは述語を匿名クラスで記述しなければならず、実用に耐えるとはとても言えません。 関数 / メソッドがFirst class objectではない言語の悲哀です。ラムダ式が使えるようになるまでは無理して使うこともないでしょう。

列挙型でのGenericsクラス名の解決

エントリを表示

使えないJavaの機能を知る / ProcessingとJavaのあいだ(その2)

公開: / 最終更新日:
前回は Processing で利用できる便利な Java の機能を紹介しました。他にも利用できるとうれしい Java の機能はあるのですが、残念ながらさまざまな事情で利用できない機能もあります。今回はそのうちのいくつかをご紹介。

static キーワード

Java は static というキーワードの指定でインスタンスに関連づかないメソッドやフィールドを定義できます。適切に利用すれば便利な機能ですが、Processing では利用できません。この制限は Processing の実現方法と密接に関連しているのでおそらく将来も解消されないでしょう。

ラムダ式

Java SE 8 で利用できるようになったラムダ式。うまく使うとコードを簡潔に記述でき、あたらしいクラスライブラリなどはラムダ式の利用を前提としているものも少なくないのですが、残念ながら PDE は 3.4 の段階ではラムダ式に対応していません。構文解析の見直し等が必要なので対応が容易でないのはわかりますが、ここはなんとか対応してほしいところです。…
エントリを表示

便利なJavaの機能を使う / ProcessingとJavaのあいだ(その1)

公開: / 最終更新日:
ProcessingのベースがJavaというプログラミング言語だということは多くの方がご存知でしょうが、その具体的な関係についてはよく知らない方も多いのではないでしょうか。Javaの機能の多くはProcessingでも利用可能で、有効に活用すればクリエイティブ・コーディングを強力にサポートします。一方残念ながらProcessingでは使えないJavaの機能もあります。そのあたりの事情について触れている記事はあまりないようなので、今回から何回かに分けて関連するトピックを取りあげてみます。なお対象環境はPDEとします。Eclipse等で利用されている方はJavaの機能に精通されているでしょうし、制約にまつわるあれこれはPDEにかぎられた話になります。…
エントリを表示

cebe/markdownのHTMLフラグメント解析不具合

公開: / 最終更新日:
BoothCMSではMarkdownのパーサーにcebe/markdownを採用していましたが、本ブログの移行作業の過程で空要素を含む HTML フラグメントの解析に問題を確認しました。確認したのはバージョン 1.2.1 です。問題になるのは、たとえばこんな感じ(マークアップは現象確認用に編集したものです)。(…)変換することこんなふうに余計な p 要素が入ってしまいます。(…)空要素単体だと問題ないので、深い階層の取りあつかいに難がある模様。要素の解析をきちんとやっていないのかもしれません(正規表現でタグを取りあつかったときなどにありがち)。個人的に非常にこまる現象なので、ライブラリをParsedown
エントリを表示

Processingリアルタイム動画生成の妥協点を探る

公開: / 最終更新日:
ProcessingライブラリVideo Exportを試すの続き。リアルタイム動画生成目的ではライブラリには頼れそうにないので、あらためて処理を検証してみました。Processingで保存可能な静止画の形式はリファレンスによれば次になります:TIFF(.tif)TGA(.tga)JPEG(.jpg)PNG(.png)JPEGだけ非可逆圧縮、他は可逆圧縮ですね。このうちTIFFはサイズがおおきくなりすぎて大量画像の取りあつかいには向きません。PNGは保存に時間がかかりすぎてリアルタイム動画生成目的には不向き。JPEGは非可逆圧縮の上にPNGほどではないにせよ時間がかかるのでできれば避けたいところ。となると残るはTGAのみ………
エントリを表示

ProcessingライブラリVideo Exportを試す

公開: / 最終更新日:
ひさしぶりにProcessingネタ。“Between breeze and calm”制作でパフォーマンスの低さに悲しくなったので、最近アップデートされた動画生成ライブラリVideo Exportを試してみました。Video ExportVideo ExportはFFmpegのラッパーなので別途FFmpegの準備が必要ですが、それさえできていれば利用は簡単です。こんな感じ:setupメソッドでインスタンス生成、VideoExport#startMovieメソッドを呼びだして初期化drawメソッドで描画終了後VideoExport#saveFrameメソッドを呼びだして保存stopメソッドで動画用画像描画が終わったら…
エントリを表示

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

公開: / 最終更新日:
PHPで作成したフラットファイルCMS"BoothCMS"の初回プレビューリリースをGitHubで公開しました。https://github.com/DBC-Works/BoothCMSBoothCMSはPico(特に初期バージョン)の強い影響下にあります。管理機能はなく、コンテンツはファイルとして作成してWebサーバーに反映させることで公開します。標準状態のPicoにない特徴は次になります:テンプレートをコンテンツごとに指定可能一覧表示制御機能組み込みのFeed(Atom Syndication Format) /Sitemapsサポートサーバーサイドとクライアントサイドのハイブリッドレンダリング(これで一覧の追加読み込みを実現しています)…
エントリを表示

Processingで坂本龍一"async"ジャケット風画像を生成する

公開: / 最終更新日:
8 年ぶりということで話題になっている坂本龍一氏のアルバム"async"、いまとなってはファンというわけでもないので私は聴いていませんが、ジャケット風の画像は作れそうな気がしたのでちょっと試してみました。コードは次:結果はこんな感じ:……えー、つまり元の写真のセンスが大事ということですね、これは。とほほ。また"async"のジャケット画像作成に用いられている高谷史郎氏の toposcan という技法は、こんな簡単なコードでは再現できない複雑な処理をやっている、のでしょう。たぶん。2018-04-01(Sun)追記:コードをGitHubGistに移動しました。
エントリを表示

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

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

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

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

Processing 3D study based on boids...? - iKaossilator"Vigilance Activities"

公開: / 最終更新日:
ときどきお送りしているProcessing 3D Study 。今回はBoidsを試すつもりではじめて、最後にはなぜかこんなことに。Vigilance Activities(Processing sound visualization study)菊池先生のツイートでBoidsのことを思いだし、Webで検索したら実装サンプルが見つかったので手を出してみたわけです。主に参考にしたのは次:JavaScript, HTML5で『群れ』をシミュレーションするレシピ (ボイド)Unity で簡単な Boids の群れモデルを実現するしかし音楽にあわせて手を入れていくあいだにBoidsの面影は徐々に薄れ、結局そう言っても気づかれないようなものに。まあそういうこともあるさ。これまでとは傾向の違うビジュアライザーになったのでよしとしましょう。…
エントリを表示

Stereo sound visualizer using Processing 1.5

公開: / 最終更新日:
Slanted Spiral Staircase”や“Unfocused Illusion”、“Frozen Shore”の動画作成に用いたProcessingのコードを整理してGitHubで公開してみました。StereoSoundVisualizer業務のプログラミングだともっとがちがちなコードを書くのですが、Processingを好んで使う層にはわかりやすさを優先したほうがよい気がしたので割とベタに書いてます。むずかしいことや複雑なことはやっていないので読めばわかるコードを書いた、つもり。Settingsと書いたあたりをいろいろ変えて試していただければだいたい様子はわかると思います。どなたかの役にたてばいいなと考えての公開ですが、はたしてそのようなことはあるでしょうか。そのうち自分でもさらに手を入れるつもりです。…
エントリを表示

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

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

Pico Tags Pluginを効率化する

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

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

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

excerptの簡易日本語対応

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

ジェネラティブ・アート手習い(その3)

公開: / 最終更新日:
いちいち書いたりはしていませんが、けっこうひんぱんにProcessingでいろいろ試したりしています。しかし基礎のない人間の悲しさ、イメージどおりいかないことも多く、イメージどおりいったと思ってもぜんぜんだめだったりということがほとんどだったりします。とほほ。そんな中でこれはなかなかうまくいったほうではないかと。Echo under the ground(Processing Study)はじめは箸にも棒にもかからない感じだったのですが、なんとなくあきらめがつかず粘っていたらここまできました。三角関数で周期性を与えるやりかたについてはすこしつかめてきたような気がします。しかし三次元までは遠いなあ……
エントリを表示

TimelapseMovieMaker

公開: / 最終更新日:
もしかしたら参考になる人がいるかもしれないと思い、Curious Wind Blows(Timelapse Movie Study #1)作成に使ったタイムラプスムービー作成プログラムをダウンロードできるようにしておきます。次のリンクからダウンロードしてください。TimelapseMovieMaker.zip使いかたはこんな感じ。適当なディレクトリ(フォルダ)を作成し、タイムラプスムービーの元になる画像をコピーします。作成したディレクトリには元になる画像だけを置いてください。プログラム先頭の各変数にそれぞれの情報を設定してください:screenWidthムービーの幅screenHeightムービーの高さ…
エントリを表示

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ファイルをダウンロードできます。…
エントリを表示

ジェネラティブ・アート手習い(その2)

公開: / 最終更新日:
パーリンノイズと三角関数をこねくりまわしてたらなんとなく見られるものになったので動画にしてみました。If you find a seed of emotion(Processing Study #8)彩度とアルファチャンネルでごまかしているような気もしますが、まあそれはそれということで。なんと言いますか、はてしなくいじっているとそのうち偶然作品っぽいものに到達するという感じでまだまだ効率が悪くてしかたがありません。ある程度不自由なく操れるようになるまでどれだけかかることやら。Processing.js版はHTML 5化した上にjQuery Mobileを使って全面的に書き換えた(2024-04-28注記:jQuery Mobileの使用はだいぶ前にやめました)「はりぼてミュージアム」でご覧になれます。…
エントリを表示

はじめてのジェネラティブ・アー……ト?

公開: / 最終更新日:
function getProcessingSketchId () { return 'Processing-Triangle'; }この年末年始は『ジェネラティブ・アート - Processingによる実践ガイド』という本を読んでました。なかなか興味深い内容だったので、早速腕試しをひとつ。Your browser does not support the canvas tag.JavaScript is required to view the contents of this page.Source code:Triangleブラウザ上で簡単に動かすためにProcessing2.0βを使って…
エントリを表示

Processing Study #6: Pajamas Party

公開: / 最終更新日:
ちょっと思いついたのでぱっと作ってみました。楽しげな雰囲気が出せていたならおなぐさみ。Pajamas Party(Processing Study #6)偶然性なし、入力変換なし、ということで言えばSwaying Heartsに近いものと言えます。Swaying Hearts(Processing Study #2)この手のものはアイディア勝負なので思いついたらまたなにかやるかもしれません。
エントリを表示

初挑戦その二

公開: / 最終更新日:
009 RE:CYBORG』公開記念(<-適当なことを言ってみる)。Processingで3Dグラフィックスを取りあつかってみました。Little Dramatic Corner(Processing Study #5)座標系だけでライトとか反射とかぜんぜん触れてないので世間のイメージするところの3Dグラフィックスには遠く及びませんが、なんとなくCGぽくなったと言えなくもないのではないかと……そんなことないか。画面の左右をそれぞれのチャンネルに見立て、縦軸を周波数に、横軸をデシベルの音量に、奥行き方向を時間軸にして各ポイントを塗りつぶしてます。塗りつぶしているはずなのに空きが見えるのは再生バッファがちいさいためですが、理由はよくわかりません。まあ思いがけない表現になったので結果オーライということで。あとは色相を八小節単位で循環、彩度を曲全体通して徐々に増加、明度は時間軸方向で減少、という感じで計算。意外に見られるものになったなあ、というのが個人的な印象です。…
エントリを表示

Create movie using Processing on 64bit Windows 7

公開: / 最終更新日:
「遠い傷痕」のムービークリップ、クリップそのものは思いついてしまえば比較的スムーズに作成できましたが、64ビット版Windows 7に切り替えてからはじめての作業だったので思わぬところでトラブルに巻きこまれました。MovieMakerクラスでムービーを作成しようとすると例外が発生するのです。NoClassDefFoundErrorだのUnsatisfiedLinkErrorだのが乱れ飛ぶ中、いろいろ調べてなんとか解決。要するにこういうことでした。QuickTimeが32ビット版しかないので、Javaも32ビット版を用意する。QuickTime for Javaの設定情報を確実に反映させるため、JavaをインストールしたあとにQuickTimeをインストール(インストール済みのときは再インストール)する。…
エントリを表示

Processing Study #4: Accelerated City Wanderer

公開: / 最終更新日:
ちょっと思いついたのでぱっと作ってみました。Accelerated City Wanderer(Processing Study #4)描画フレーム時点の音の波形を高速フーリエ変換で周波数スペクトラムに変換し、その中の22.5Hz(A1)から1320Hz(A7)までを取りだして、常用対数スケールにした値をHSV色空間の彩度にマッピングした色で矩形を描画しています……何のことかわからないかもしれませんが、大丈夫、書いている本人もよくわかっているわけではありません(<-おい)。今回はIn Closed Blue Roomの反省を元に、再生しながら描画するのではなく、一度必要な情報を記録して、動画を作成するときは再生音楽に頼るのではなく記録した情報を元に描画するようにしてみました。描画量が少ないことも奏功してか、これで720P(1280*720)で15フレーム/秒の動画作成に成功。ずれてるような気もしますがまあ細かいことは気にしないにかぎります。…
エントリを表示

Processing Study #3: In Closed Blue Room

公開: / 最終更新日:
ひさしぶりにProcessingをいじってたらちょっと簡単にできそうなネタを思いついたのでさくっと試してみました。In Closed Blue Room(Processing Study #3)元の曲は「部屋向けの音楽……か? 」で公開したものです。ネタを明かせばフレーム描画時の再生音声の波を縦軸分だけ表示するだけの単純な処理ですが、色のつけかたと履歴の取りあつかいでちょっとかたちになっているかな、と。しかしやっぱり試してみるもので、最後は予期せぬ展開になって自分でも楽しめました。入力や偶然を生かした方向もおもしろそうだと認識した次第。とはいえ動画作成には苦労しまして、リアルタイムだと720P(1280*720)でもほぼ問題ないのに、Processing標準の動画作成機能だと遅れが顕著に……。あんまり高解像度を追求してもしょうがないので縦横を半分にして作成し、SONARで曲とあわせたときに倍にして720Pに戻しました。ちょっとぼけて見えるのはそのせいです。このへんは今後の課題だなあ。…
エントリを表示

Process Processing with Eclipse

公開: / 最終更新日:
Processingの標準開発環境(sketchbookと言うそうな)はコンパクトながら構文の色分け表示など必要最小限の機能は備えていてそんなに悪くはないのですが、いかんせん近頃の至れり尽くせりの統合開発環境になれた身にはちょっと厳しいものがあります。またコードの共有が原則的には考慮されていない点もオブジェクト指向屋としてはマイナスポイント。というわけでEclipseでの開発環境を整備して前作のコードを整理しながらもう一本習作を作ってみました。Swaying Hearts(Processing Study #2)開発環境を整備するとは言っても基本的にはProcessingのJARファイルを外部ライブラリとしてがんがん追加するだけのことです。参照関係を最小にしようと思うと多少試行錯誤が必要ですが、普通の人は全部利用可能にしておけばよいのではないかと思います。…
エントリを表示

Talk about Processing's MovieMaker class

公開: / 最終更新日:
2024-10-27(Sun)追記:本エントリで言及しているMovieMakerクラスはProcessing 3より前に存在したクラスで、最新のProcessingには存在しません。過去の記録として注意してお読みください。グラフィックプログラミング環境としてはお手軽なProcessingですが、リファレンスはお世辞にも充実しているとは言えません。MovieMakerクラスのリファレンスを参照して途方に暮れた人は少なからずいるのではないでしょうか。Parametersのtypeとqualityに定数が列挙してあるだけというのはいまどき信じられない手抜きっぷりです。こういうところこそ普段プログラミングに縁のない人向けに充実させたほうがいいのに………
エントリを表示

I'm processing "Processing"

公開: / 最終更新日:
某イベントに足を運んだときに“Processing”という単語を目にしまして、聞いたことあるけどどんなんだったけなあとちっと調べてみました。http://processing.org/http://processing.jp/http://ja.wikipedia.org/wiki/Processingふむふむ、Javaアプレットをベースに独自の統合開発環境を用意することでオブジェクト指向やクラスの概念の隠蔽しグラフィカルな表現の容易な実現を図っているわけですな。動画も簡単に作れますよ、と。なるほど。というわけで簡単に習作を作ってみました。Current Floating Twilight(Processing Study #1)
エントリを表示

Pick up work

最近のエントリ

アーカイブ

ブログ情報