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

エントリを表示...

IE サポート終了でWeb Componentsもいよいよ実用フェーズかと Web Components 開発用ライブラリLitのドキュメントに目を通していて、これはDenoを使えばお手軽なのでは?とひらめき試してみたところあっけなく成功したので共有。 Deno をインストール まず Deno をインストールしていなければインストールします。Windows なら Windows Package Manager(winget)でインストールできればお手軽なのですが、残念ながらまだ存在しません(Release Builds on WinGet Pkgs · Issue #5640 ·…

エントリを表示...

本ブログの構築・稼働環境をBoothCMS on Microsoft Azure App Service Web AppsからEleventy on Microsoft Azure Blob Storageに移行しました。機能の確認は行いましたが、無駄に長期間運用しているサイト故思わぬ問題が潜んでいるやもしれません。おかしな点に気づかれました方はお知らせいただければたいへんありがたいです。 今回フラットファイル CMS から静的サイトジェネレーター(SSG)に移行した理由は次になります。 マイクロソフトが PHP バイナリの提供を終了し、手厚いサポートの期待が薄れた…

エントリを表示...

本稿はHTTP GETリクエストにボディを指定できないのはなぜか?(初版)の改稿版です。変更点は稿末の「改稿の詳細」をご覧ください。 ブラウザで動くJavaScriptから、GETメソッドを指定したHTTPリクエストでメッセージボディを指定できないのはなぜか?という話題を見かけまして、指定できないのは知っていましたが理由はたしかめてなかったので追いかけてみました。 TL;DR HTTPの仕様としては規定されず、実装依存で拒否される可能性ありとの記述あり ブラウザのクライアントでは指定不可 HTTPの仕様としては? HTTP/1.0を規定するRFC…

エントリを表示...

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

エントリを表示...

2022-07-28(Thu)追記: 記述に不足を認めたのであらためて改稿版を公開しました。そちらをご覧いただければ幸いです。 ブラウザで動くJavaScriptから、GETメソッドを指定したHTTPリクエストでメッセージボディを指定できないのはなぜか?という話題を見かけまして、指定できないのは知っていましたが理由はたしかめてなかったので追いかけてみました。 TL;DR HTTPの仕様としては規定されず、実装依存で拒否される可能性ありとの記述あり ブラウザのクライアントでは指定不可 HTTPの仕様としては? HTTP/1.0を規定するRFC 1945、HTTP/1.1を規定していたRFC…

エントリを表示...

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

エントリを表示...

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

エントリを表示...

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

エントリを表示...

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…

エントリを表示...

日本語の情報がほとんどないようなのでメモ。次の環境で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…

エントリを表示...

ブログ環境をppBlogからPicoに移行してから早四年、移行目的でBoothCMS を開発・公開してから早五ヶ月。ようやく気まぐれメモランダムを Pico からBoothCMSに移行しました。いやあ、テンプレート書き換えたりコンテンツファイルを変換したりたいへんだったんですよ……って、単になまけていただけですが。 ご覧になる方には違いはほとんどないように見えると思いますが、今後使い勝手などを向上させていきたいと思いますので、のんびりとお付きあいいただければ幸いです。また表示や挙動におかしな点がありましたらお知らせいただければありがたいです。引き続きよろしくお願いします。 2022 年 9 月…

エントリを表示...

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

エントリを表示...

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

エントリを表示...

既報のとおり、本サイトの稼働環境をDTIの[email protected]からMicrosoft Azure App Service Web Appsに変更しました。OSがLinux(CentOS)からWindowsに変わりましたが、マイクロソフト他もちょっと前からPHPの稼動に力を入れているので特に問題はありません。…

エントリを表示...

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

エントリを表示...

なんかいろいろやりはじめてサイト更新が止まらなくなりましたが、たぶんこれで打ち止め。Pico Tagsに手を加えてタグクラウド用の情報を生成させてみます。やりかたはかんたん。ただ事前に「Pico Tags Pluginを効率化する」で説明した効率化対応を行っておいてください。 まず集計を保持するメンバー変数を定義します: private $tag_counter; 次に、get_pagesメンバー関数の末尾に次のコードを追加します: $this->tag_counter = array(); foreach ($pages as $page) { $tags = $page['tags'];…

エントリを表示...

このブログで採用した軽量CMSPicoのソースを眺めていたら、タグ付けに使用しているプラグイン、Pico Tagsの処理を大幅に効率化できることに気づきました。プラグイン側でファイルを読みこんでヘッダーを解析していますが、わざわざそんなことをする必要はないのです。ただしPico側に少々手を加えなければなりません。以下その作業内容。 まず /lib/pico.php の248行に次を追加します: 'tags' => isset($page_meta['tags']) ? $page_meta['tags'] : '', 次に /plugin/pico_tags.php に次の関数を追加します:…

エントリを表示...

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

エントリを表示...

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

エントリを表示...

ネイティブアプリケーション風の処理を実現するためにjQuery Mobileがいろいろと世話を焼いていることは興味のある方はご承知かと存じます。中でもページ内アンカーの処理がそのままだと行われないことにとまどいを覚える方は少なくないに違いありません。…

エントリを表示...

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

エントリを表示...

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

エントリを表示...

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

エントリを表示...