Javascript External Library

ラベル ものづくり の投稿を表示しています。 すべての投稿を表示
ラベル ものづくり の投稿を表示しています。 すべての投稿を表示

2026-06-14

スマホケースを直す

スマホケースのストラップホールが経年劣化で広がってしまいました。

そろそろ切れそう。
スマホは生命線なので普段は買い替えるところですが、半年後にスマホを買い替えるよていがあるので、今回は修理を試みます。

部屋の片隅に眠っていた修理用の革の端材を探してきました。

適当な大きさに切って穴を開けます。

外皮と内皮の間に差し込んで接着剤で止めます。
圧着してしばらく放置します。

固まったことを確認してハトメを施します。

とりあえず、これで凌いでみよう。

2026-02-11

ブログカードの更新

このブログはBloggerというGoogleのサービスを利用しています。このサービスはなにか特定の情報を狙ったサービスではないので私のようにテーマを持たずに記事を載せることには便利なのですが割と機能は乏しいです。欲しい機能がなければ便利なサービスに乗り換えるというのが一般的な考え方でしょうが、エンジニアなので欲しい機能がなければ自前で作るという方向で行きます。

記事内で自分の掲載した他の記事に対してリンクを作るとリンク先の記事が紹介されるそういう機能が欲しい。ないなら作るという精神でできたのがブログカード機能です。

旧ブログカード
このカードには1枚目の画像とタイトルと本文という3つの要素があります。
処理としては
  1. 自分の記事をクロールして自サイト内へのリンクを探す
  2. リンク先内の記事から画像とタイトルと本文を抽出
  3. カード風に描画する
この手順で処理されています。

Bloggerの設定
ブラウザで処理することから言語はJavascriptで記述されています。Bloggerは自前のスクリプトを実行できる枠を用意してくれています。問題は処理を記述したスクリプトの公開場所です。当然のことながらWebサーバが必要なのですが、GoogleのSiteサービスはここまで柔軟な提供はできない。

旧構成
そこでAzureの Azure Web App Service を利用してスクリプトを提供します。
問題点は費用を抑えるためにアプリケーションが普段はスタンバイ状態になっていることです。スクリプトはカードが必要ない記事でも読み込まれるのですが、Azure側がスタンバイ状態になっているとアプリケーションが起動するまでの時間が必要で読み込み開始までタイムラグが生じてしまう点です。

長らく気にしながらも放置していたのですが、ちょっと時間ができたこととAzureのサービスも増えたので構成を見直すことにしました。

新構成
要のスクリプト提供はAzure Static Web Appを利用します。これは最近のFEとBEが分離したWebアプリケーションの構成に合わせてあり、FE部分はAzure Front Doorを自動的に利用できます。これにより高速にスクリプトの取得が可能になります。
BE部分はAzure Functionが担当します。Azure Static Web AppはAzure Front DoorとAzure FunctionがセットになっていてAzure DevOpsやGitHubからの直接デプロイで構築します。これで要は満たすのですが、せっかくなので機能アップすることにします。
Azure Functionでサムネイル画像を生成してAzure Blob Storageに保存します。これによりブログカード用の小サイズ画像の読み込みが可能になります。
さらに記事をAzure AIで要約します。旧構成では本文を抽出して先頭部分だけを表示させていたのですが、これにより全文からの要約を表示することが可能になります。
これらの生成情報はAzure CosmosDBに保存しておき、2回目以降のアクセスはAzure CosmosDBから結果を受け取るだけにします。

新ブログカード
新構成になってできたブログカードがこちらになります。
画像はサムネイルように圧縮しているので比較すると粗さがわかりますが今までも小さく表示していたので粗さがわかるのは比較したときくらいかな。本文が要約されている点がとてもわかり易くなっていますね。
新構成は色々と駆動にお金がかかるのですが、要約部分だけは事前に金額が読みにくいです。いくつかの記事の要約をしてみたところGPT4.1モデルで3~4円かかっていました。Azure AIの課金は入出力のトークン数とモデルの種類で決まります。入出力のトークンはプロンプトに依存するのでGPT4.1を最新のGPT5.2モデルに変更しても1記事あたり3~4円というのは変わらなさそうです。後日問題がないことを確認してモデルの変更もやってみようかと思います。

2023-08-23

Panasonic 洗濯機 NA-VH300L の修理 その2

昨年の8月に修理してもらった洗濯機が再び動かなくなってしまいました。
今回の故障コードはHA0で見たことがないものです。

まずは公式サイトの診断を仰ぎます。

Panasonic 修理診断ナビ
乾燥系の排水がうまくできてないようです。
10年使っているので減価償却2年分の修理費がかかるようです。1年前も故障で修理を頼んだので買い替えが頭によぎったのでとりあえず修理を試みます。

想定される故障は
  1. 排水ポンプが壊れて排水できない。
  2. センサーが故障していて排水できてないと誤認している。
  3. 排水路上に異物があり排水できない。
くらいかな。1や2だと部品交換が必要になるのでかなり難しいです。修理の値段の高さはパーツ代かな。3ならまだ太刀打ちできそう。

乾燥系で排水しそうなのは2系統です。
  1. 内循環の除湿冷却のための冷却水
  2. 内循環から除湿した後の水
エラー発報と戦いながら洗濯と乾燥を繰り返して原因を特定していきます。

乾燥中に排水が行われていることを確認できた。洗濯・すすぎ・脱水・乾燥のいずれの工程でもエラーが出る。このことから冷却水は排水できてそうです。

次に洗濯開始時にポンプの稼働音がします。このことからポンプは排水を試みていると考えます。

となると、センサーか排水路の可能性が高そうです。

前面下部パネル
前面下部のパネルを開けます。開け方は1年前に学びました。

乾燥系排水路
排水のゴミ受けのところに細いプラスチックパイプが見えます。これが乾燥系の排水路です。
色が悪い。汚れが溜まっている感じです。

CPボックス
制御ボックスを取り外して別の角度からも確認します。

排水系
横から確認してみると明らかにトラップより高い位置まで水が入っています。
これはおかしい。
この排水路のトラブルの可能性が高くなりました。

排水管
ストラップであちこち止めてあった排水路をはずすると、トラップの最下部で折れ曲がっていました。
固く変形してしまっているのでペンチで整形してみます。
すると内部の水が抜けていきました。

排水管摘出
狭窄を起こしていてすぐに詰まりそうなのでこの部分を摘出します。

排水管を接続
短くなってしまった排水路をなんかいい感じに接続し直します。

組み上げて干渉を確認
排水路の場所が変わったので干渉していないか確認を行います。

乾燥動作テスト
問題なさそうなので濡らしたタオルをいれて乾燥動作をテストしてみます。
問題なく流れています。

その後、洗濯・すすぎ・脱水・乾燥のフルセットをしてみて動作確認完了です。

なんとか直ってよかった。

2023-03-26

Microsoft.Web.WebView2.NavigateToString の Referer

結論から言うと「about:blank」で Microsoft.Web.WebView2.Source に収納されている。

この情報がなぜ必要になったかというと Microsoft.Web.WebView2 で NavigateToString を使うときに制限としてつけるためです。
Google Maps JavaScript API はAPIキーによる制限とキー単位での課金形態が取られています。キーが中露韓に不正利用される可能性があるのでキー以外にも制限を掛ける必要があります。
Googleが提示する制限は「Webサイト用のReferer制限」と「接続元IP制限」と「Androidアプリのキーによる制限」と「iOSアプリのキーによる制限」となっています。では、「Windowsアプリ」はどうするかというと「Webサイト用のReferer制限」を利用します。

何も指定しない場合で NavigateToString メソッドで NavigateToString を利用した場合は Source プロパティの初期状態である「about:blank」が送信されます。
ただ、「about:blank」では正直なところセキュリティは弱そうなので、他に使えるのは https://developers.google.com/maps/documentation/javascript/get-api-key にある about://, app://, applewebdata://, asset://, chrome://, content://, file://, ftp://, ionic://, local://, ms-appx://, ms-appx-web://, ms-local-stream://, prism://, qrc://, res://, saphtmlp:// を使いたいですね。

2023-03-04

Microsoft.Web.WebView2 で動的文字列を表示させる

public void NavigateToString(string html)
{
    if (WebViewer.CoreWebView2 == null)
    {
        WebViewer.CoreWebView2InitializationCompleted += (sender, _) =>
        {
            if (sender == null) return;
            ((WebView2)sender).NavigateToString(html);
        };
        WebViewer.EnsureCoreWebView2Async();
    }
    else
    {
        WebViewer.NavigateToString(html);
    }
}
Chrome使えばいいのにわざわざアプリ内でChromium使う理由・・・
それはアプリ内のリソースをHTML表示させるためですよね。
Microsoft.Web.WebView2 で文字列を表示させるには NavigateToString(String) メソッドを使えばいいです。ただ、WebView2 自体が Initialize されていても内部の CoreWebView2 が起動しているとは限らない。これが詰まるポイントでした。
WPF の WebView2 には Initialized プロパティがあるのですが、これはあくまでもWPFの初期化状態を示すだけなので CoreWebView2 の存在性を確認します。起動してない場合は EnsureCoreWebView2Async メソッドを呼び明示的に起動させます。EnsureCoreWebView2Async はやや高コストの処理で WebView2 が表示状態でないと処理が完了しないようなので Wait しないでスレッドを進行させます。代わりに CoreWebView2InitializationCompleted イベントを拾って改めて NavigateToString を試みるようにします。

Microsoft は Microsoft.UI.Xaml.Controls.WebView2 になってた。いい加減MAUIしろとMS様がおっしゃっておられる・・・

2022-12-19

ぬいぐるみ(卯)

今年も師走になりあとわずかとなりました。
来年もつつがなくものづくりができるように来年の干支のうさぎを制作することにします。

完成品

キット
今年も変わらずキットを調達しました。これが楽でいいのですが、型紙から自作も挑戦してみたい。CADとかあるんだろうか。

布
布が揃ってるか確認します。

型紙
型紙を切断。

裁断
型紙に従って裁断する。
型紙原型から完成形と縫い代を追加するCADがあれば自作もできそうな気がするんですが、世の中の人はどうやってるんだろうか。

頭部
今回もミシン全開でサクサク縫います

胴体
胴体も縫い合わせたら

合体
頭部と胴体をつなぎます。

あんこ詰め
裏表して中身を詰めます。この作業が一番楽しい。
さて、組み立ては3時間で終わったので、あとはのんびり仕上げ

完成
と思ったら、残りは6時間もかかりました。
今回、飾りの部分がとても時間がかかりました。形もだいぶ歪な感じです。
あとは左右のバランスがいまいちでした。このあたりは精進するしかないのかなあ。

2022-11-23

同じAssembly内のUserControlを参照するとMC3074エラーが生じる

WPFのXAMLはUIデザインを組むうえで非常に便利だが、複雑なデザインになると階層が深くなって可読性が落ちるのが難点です。そのため、特に使い回さないブロックも User Control として同一アセンブリ内に切り出すのだが、マークアップ時のインテリジェンスは有効なのだがコンパイル時にMC3047エラーが生じるようになった。

調べてみるとGitのIssueに同じ問題を提示している人がいたので覚え書き代わりにメモを残しておくことにする。
要約すると.NET 5から.NET 6になったときに仕様が変わったことが原因らしい。プロジェクトファイルで明示的に指示すればコンパイルできるようになる。
<Project Sdk="Microsoft.NET.Sdk">
  <PropertyGroup>
    <IncludePackageReferencesDuringMarkupCompilation>false</IncludePackageReferencesDuringMarkupCompilation>
  </PropertyGroup>
</Project>
解決はするが、この設定はGUIでは表示されない。バグっぽい気もするし、User Control は別プロジェクトにすべきという方針なのかもしれない。

2022-10-05

Microsoft.Web.WebView2 で Web スクレイピング

はじめに

Microsoft Internet Explorer もなくなり、Microsoft Edge も Chromium になって世の中が Chromium 一色となりました。Wpf を使ってWeb Browser を作るときは System.Windows.Controls.WebBrowser でしたが、これは内部がIE7というとんでもない骨董品でした。Wpf で Chromium は扱えなくもないですが、微妙に扱いにくいのでどうしたものかと思っていたら Microsoft が Microsoft.Web.WebView2 を出してくれたのでこれをちょっと触ってみることにします。

XAMLに埋め込む

XAMLに埋め込むのはこんな感じです。
<UserControl x:Class="UserControls.WebBrowser"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
  <Grid>
    <wv2:WebView2
        x:Name="WebViewer" />
  </Grid>
</UserControl>
Microsoft.Web.WebView2 は Nuget から拾ってきます。


URLで画面遷移する

アドレスバーの入力など任意のWebページに遷移するのは Source Property を指定します。
using Microsoft.Web.WebView2.Wpf;
using System;
using System.IO;
using System.Windows;
using System.Windows.Controls;
namespace UserControls.WebBrowser;
public partial class WebBrowser : UserControl
{
    public WebBrowser()
    {
        InitializeComponent();
        
        WebViewer..Source = new Uri(@"https://www.lutheta.jp/");
    }
}

Responseを拾う

Response を拾うには WebResourceResponseReceived を拾えばいいです。ただ、これは Microsoft.Web.WebView2.Wpf.WebView2 の CoreWebView2 Property の Microsoft.Web.WebView2.Core.CoreWebView2 にあるので注意が必要です。
using Microsoft.Web.WebView2.Wpf;
using System;
using System.IO;
using System.Windows;
using System.Windows.Controls;
namespace UserControls.WebBrowser;
public partial class WebBrowser : UserControl
{
    public WebBrowser()
    {
        InitializeComponent();

        WebViewer.CoreWebView2InitializationCompleted += (sender, e) =>
        {
            if (sender != null)
                ((WebView2)sender).CoreWebView2.WebResourceResponseReceived += async (sender, e) =>
                {
                }
        };
    }
}
CoreWebView2 は Component の Initialize 時には Null なので CoreWebView2InitializationCompleted Event で WebResourceResponseReceived Event をセットするようにします。

これを利用して

とりあえず MarineTraffic から航跡を抽出するアプリを作ってみました。

MarinTraffic

なかなか応用幅が広がりそうな感じでです。

2022-08-07

Panasonic 洗濯機 NA-VH300L の修理

9年ほど使っている洗濯機が動かなくなってしまいました。症状はエラーコード「U11」が表示されたまま動作しないというものです。このエラーは排水関係のもので、よくあるのは排水口のホコリ受けの掃除不足による排水不良のときに発生します。しかし、今回はきっちり掃除してもエラーが消えませんでした。
9年ものの家電なので当然保証外です。修理を頼んでも高額な費用がかかる気がするので修理を試みてみます。

何度かエラーの出る様子を確認してみると、このエラーは排水コマンドが入力されてから一定時間以内に洗濯槽内の水が排水されないときに発生するようです。ホコリ受けに水が流れてくる気配がないのでそれよりも上流で問題が発生していることになります。洗濯槽の排水用の水栓の障害を疑います。

作業台(即席)
洗濯機ならば背面パネルを開けるのが常道かな。背面にアクセスするためにホームセンターで売られていた端材を組み合わせて作業台を作成しました。

背面パネル
背面パネルが見えるようになったので外します。

背面から洗濯槽下部
背面から確認してみました。多分これかな。
しかし、乾燥用の循環ダクトが邪魔でアプローチが難しい。

諦めてプロを呼ぶことにしました。残念
販売元のヨドバシカメラに聞くと洗濯機はメーカー修理ということだったのでPanasonicの技術者が来ることになりました。電話連絡しか受付口がないのが難点でしたが、日曜日にヨドバシカメラに連絡しましたが、翌日月曜日にはPanasonicから連絡があって、週末の土曜日には修理に来てくれました。めっさ早い。

プロの修理の仕方をラーニングします。

前面下部パネル
まずは前面のパネルを開けます。前面は隠しねじになっていて3箇所を緩めるとパネルが開けられます。ホコリ受けのところの3箇所目は知らないと難しい。

コンピュータボックス
続いてデンと構える制御箱をやはりネジ3箇所を緩めて外します。

排水用電磁水栓
排水用の水栓が見えてきました。常時閉タイプの水栓でサーボモーターで開くようです。
今回の故障箇所はここで、水栓にホコリが詰まってしまい水栓が開いても排水できない状態になっていました。

水栓に詰まったホコリを取り除くことで修理は完了です。
では、このホコリはどこからやってきたのか?

前面操作パネル
洗剤受けを引き抜くと操作パネルを固定するネジが見えてきます。
このネジを緩めて操作パネルを左にスライドします。

操作パネル裏
スライドすると操作パネルの裏の一角が空いています。

乾燥循環ダクト
この隙間から乾燥用の循環ダクトが見えます。この部分は本体上部からアクセスできるフィルタの手前になります。このダクトにホコリが詰まることがあって、詰まったホコリがまとまって洗濯槽に落ちるとこの様な障害が発生するらしいです。

言われてみると、フィルターの掃除しても乾燥時間が長くなってました。循環路にホコリが詰まっていたんですね。

フィルターのマメな清掃である程度予防できるらしいです。気をつけよう。

今回の修理費は税込み6,600円でした。超お安い(人件費だけで赤字になってそう)。これなら素直に専門家を呼んだほうがいいですね。

2021-12-26

ぬいぐるみ(寅)

そろそろ丑年も終わって次は寅年ですね。
寅を調達してきましょう。

完成品

型紙制作の能力は全然ないので今回もキットを買ってきました。
この完成図がどこまで崩壊していくのか・・・
キット

今回の布はフェルト生地が多めでした。
布と型紙

フェルトの裁断は、型紙に薄くスティックのりを塗って型紙ごと切れという指令でした。
なるほどこういう方法もあるのかと感心したけど、後から考えるとスティックのりよりスプレーのりのほうが良かった気がする。
裁断

今回は縫製にミシンをフル活用してみました。細かい作業が多いので早くなることはあまりないけど、糸の処理は格段に楽になりました。
ちなみに果たしは糸を止めるのが苦手です。
縫製

製作中によくやるミスは「裏と表を間違える」
ダーツと布の継ぎ目を間違えることに起因することが多いような気がします。
裏表を間違える

もう一つあったのが切るべき箇所を切ってない。「切る必要のないのに切ってしまった」よりはマシ
切るべき箇所が切れてない

トラ模様はフェルトをボンドで接着とありましたが、布用ボンドってまともにくっついたことない気がする。使い方を間違えているんだろうか。
指示も仮止めして後で糸で縫うようにありましたが、ボンドでフェルトが硬化してしまって縫いにくかったです。ピン留めとかのほうが良かったのでは?
模様を仮止め

飾りの梅を制作。かろうじて梅に見えなくもない。
ビーズの止め方は指示通りですが、違う止め方にすればよかったかもしれない。
小物(梅)の制作

座布団の制作。これは丑の時と同様のものです。今回はミシンだったのでここは圧倒的に早かった。
小物(座布団)の制作

制作時間は16時間くらいでした。
丑は19時間くらいかかっているので上達したのか、科学力(ミシン)の成果かもしれない。