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

タグ: Web

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"ボタンを押下すればすべてのコードを同時に実行=再生します。…
エントリを表示

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を公開しています。…
エントリを表示

PowerShellで自己署名証明書を発行して証明書ストアのルート証明書にコピーする方法

公開:
Webアプリケーションの開発では自己署名証明書が使いたくなることがあります。サーバーがWindows + Internet Information Service(IIS)であれば作成は次の方法で行えます。IISマネージャーで作成PowerShellのコマンドレットで作成手軽なのはIISマネージャーでの作成ですが小回りが利きません。一方PowerShellコマンドレットでの作成はこまかい指定が可能ですがIIS向けの証明書ストア登録が十分ではありません。Webを検索するとMicrosoft管理コンソール(MMC)のスナップインで証明書ストアにアクセスして手動でルート証明書にコピーするやりかたが散見されます。…
エントリを表示

live tone v0.2.0リリース

公開:
Tone.jsを使えばブラウザでライブコーディングできるのでは?と年の初めに手を付け始めたlive tone、肝心のTone.jsの使いかたがいまひとつわからず最低限実装したところでほったらかしていましたが、情報にそれとなく触れる中でようやく使いかたがすこしわかってきたので、機能をすこし追加してv0.2.0としました。追加機能は次。スケールやコードのサポート配列やイテレーション操作用のユーティリティを追加コード編集要素をAce(React Ace)に変更コードエディタコンポーネントの導入で見た目もそれっぽくなり使えそうな感じが出てきたのではないかと思います。次のアップデートのアイディアも思いついたので、そこまではなんとか開発したいところ。とはいえ大きめのトピックなので時間がかかりそうですし、そもそも実現できるか不明………
エントリを表示

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

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

ブラウザライブコーディングアプリ"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アノテーション…
エントリを表示

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 ページをいくつか目にしました。たとえば次。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…
エントリを表示

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

Eleventyに移行

公開:
本ブログの構築・稼働環境をBoothCMSonMicrosoft Azure App Service Web AppsからEleventyonMicrosoft Azure Blob Storageに移行しました。機能の確認は行いましたが、無駄に長期間運用しているサイト故思わぬ問題が潜んでいるやもしれません。おかしな点に気づかれました方はお知らせいただければたいへんありがたいです。今回フラットファイル CMS から静的サイトジェネレーター(SSG)に移行した理由は次になります。マイクロソフトが PHP バイナリの提供を終了し、手厚いサポートの期待が薄れたマイクロソフト、スクリプト言語「PHP 8.0」以降の正式サポートを中止 - ZDNet Japan…
エントリを表示

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

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

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

公開:
こちらではお知らせしていませんでしたが、先日working-time-aroundにSlackへの投稿機能を追加しました。外部アプリからの投稿は削除できないのでより強固な証跡が残せます……というのはともかく、実装にあたってちょっととまどったのが投稿に必要な情報の作成方法。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 の…
エントリを表示

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

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

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 7IIS ExpressPHPURL書き換え設定ありサーバー変数"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に移行しました。いやあ、テンプレート書き換えたりコンテンツファイルを変換したりたいへんだったんですよ……って、単になまけていただけですが。ご覧になる方には違いはほとんどないように見えると思いますが、今後使い勝手などを向上させていきたいと思いますので、のんびりとお付きあいいただければ幸いです。また表示や挙動におかしな点がありましたらお知らせいただければありがたいです。引き続きよろしくお願いします。2022 年 9 月 10 日追記:…
エントリを表示

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

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

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

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

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

公開: / 最終更新日:
既報のとおり、本サイトの稼働環境をDTIのServersMan@VPSからMicrosoft Azure App Service Web Appsに変更しました。OSがLinux(CentOS)からWindowsに変わりましたが、マイクロソフト他もちょっと前からPHPの稼動に力を入れているので特に問題はありません。手間がかかったのはやはりドメインの移管。利用していた、これもDTIの提供するUbicNameはDTIのサービス専用で他社サービスとは連携できません。かろうじて解約することでお名前.comへの移管が可能。このあたりはこちらではどうにもなりませんので、粛々と手続きを進めるしかありません。その結果がどうだったかといいますと………
エントリを表示

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

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

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

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

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関数を呼びだす)前に句読点のうしろに空白を挿入するようにしました。…
エントリを表示

Picoに移行

公開: / 最終更新日:
このところしばらく開発の停滞したppBlogを使い続けたものかどうかぼんやりと考えておりました。ウェブログの夢は儚く消えかけ、ブログサイト構築用のソフトはどれもずいぶん影が薄くなり、移行するにもいい手がないなあと思っていたのですが、先日ふとしたきっかけで軽量 CMS の世界はまだまだ豊かであることを知り、思い切って移行を決意。目先の変わったことをやりたかったという話もありますが。移行対象 CMS として採用したのはPico。Markdown 書式の採用、コンテンツの更新はファイルアップロード形式とシステムから外部化してしまう割り切りの潔さ、プラグインが比較的充実、といったあたりが採用の決め手になりました。もっとも似たようなコンセプトの 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で指定するようになった。FastCGIの設定をconf.d/fastcgi.confで指定するようになった。…
エントリを表示

ppBlog on lighttpd

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

Pick up work

最近のエントリ

アーカイブ

ブログ情報