てぃぐれのプログラマwiki

ワクワクに従う

インスタンスの振る舞い【C#】

経緯

インスタンスメソッド、クラスメソッド、メソッドのあり方について考えてみた。

 

 

よく曖昧になるのだが、これらの使い方がたまに曖昧になる。

この中でインスタンスメソッドはその名の通り、インスタンスの振る舞いである。

これはオブジェクト指向において大事なポイントであろう。

別にインスタンスに振る舞いを書かなくても、そのインスタンスを外部からメソッドを呼べばいいではないか。

一番はオブジェクト指向的な設計になっているかどうかで考えるべきなのだろう。

犬というクラスに歩くというインスタンスメソッドは理解しやすい。

では犬というオブジェクトを作った後に、同じ内容の振る舞いを書いたとしたらどうなるのか。

1、プロパティがカプセル化できていない。

  →プロパティを外部で利用することで保守箇所が増える。

   めちゃ探さないといけない。

   →ソースの管理がしづらくなる。

2、概念が異なってくる

  →犬は歩くのか、犬は歩かすことができるのか

   a dog walks なのか it makes dog work なのか。

  主語の一致、文章性の統一を考えるのであれば、前者が良さそう。

  文学的なコードは書きたくない。そうプロ グラマーならね。

  

 

しかし、最近はもうインスタンス変数を使わずにプロパティを使うことによって、インスタンス変数とプロパティがごっちゃになっているのではないか。その点の、熟考はまたにしよう。

 

 

SupplyParameterFromQueryが動かない【Blazor】

経緯

BlazorでURLからパラメーターを取得したい。

SupplyParameterFromQueryでいい感じに取得できるということなので、使ってみたい。のに使えなかった。

 

原因

Mainlayoutでページ遷移のため@Bodyを表記している。ある理由があって、ここに@Bodyの代わりに直接ページを埋め込み、parameterを渡してあげる。

そして、SupplyParameterFromQueryを使ってみる。動かない。。初期値が入っている。。。

@Bodyに変えてみる。動いた!!うーむ。

@Bodyにメリットあまりなくないかって思ってたがここにトラップがあった。

HEIC EXIF 位置情報をJSで取得する

経緯

Blazorでiphoneの画像から位置情報を取得したい。iphoneの画像データがHEICになって取得の仕方が変わったようだ。

こちらのjsで取得したかったが取れない。さあ、どうしよう。

GitHub - exif-js/exif-js: JavaScript library for reading EXIF image metadata

 

やってみる

使用したのはこちらのライブラリ

GitHub - exif-heic-js/exif-heic-js: JavaScript library for reading EXIF image metadata from HEIC files

 

特に何と解説することはないが、とりあえず取得することはできた。

緯度経度の情報は度分秒の形式で出ているので計算して、自分が使いたいように切り替えてあげる必要がありそうだ。

 

画像に位置情報がついていない場合はもちろん取得できないが、位置情報がついていなものにあとで付与してあげても取得することはできた。

 

iphoneの設定

iphone側で位置サービスの利用がオフになっている可能性があるので、プライバシー設定から切り替えてあげる可能性がある。

 

後記

iphoneからairdropmacにもらってたから、heicであげることができたが、iphoneからだと厳しいとのこと。

 

 

メモ化 APIのコール数を減らす

経緯

サーバーに画像を取りにいく場合、そのキーをDBからとりにいく。大量の同じ画像をとるのであれば、メモ化しておきたい。

ディクショナリー型

キーをディクショナリー型のキーにしておいて、キーがある場合は、APIを呼ばない。キーがない場合は、APIを呼ぶようにするとAPIのコール数を減らすことができる。

メモ化のいろんな方法を知りたい。というかディクショナリーの奥深さを噛み締めている。

 

AdvancedMarkerViewをBlazorでやりたいんですが【Blazor】

経緯

マーカーにhtmlを使いたいとずっと思っていた。ふと見るとgoogleがAdvancedMarkerViewというベータ版の機能を提供しているではないか。

以前だとこれを実現しようとするとRichMarkerと巷で言われているoverlayviewを派生させて無理やり?作っていた。しかし、今回、Googleが正式に提供してくれることで、本来のマーカーの利用しやすくなった。というかGoogleが提供してくれるようになった。

RichMarkerをたくさん描画すると圧倒的にマーカーより思いこともあり、AdvancedMakrerViewに期待できないかと思っている。

 

とりあえずJSでやってみる

Advanced Markers (beta)  |  Maps JavaScript API  |  Google Developers

できた。ソースはおいおい載せる。

 

Blazorでやってみる

ライブラリはここのを利用する

GitHub - rungwiroon/BlazorGoogleMaps: Blazor interop for GoogleMap library

しかし、AdvancedMarkerViewのライブラリはまだない。

頑張って自作する。

だがうまくいかない。 AdvancedMarkerViewを呼ぶことはできる。

しかし、contentのプロパティに値を渡すことができない。contentに値をセットしないとデフォルトで値が渡るのでマーカーの設置はできるのだ。

contentのプロパティはelement型なのだが、C#にそのようなプロパティはない?

ElementReferenceがあるじゃないかと思ったが、うまくいかない。

 

後記

githubのやり取りを見るとやはり、このライブラリを作ってくれというやりとりはあるようだが、2022/11/19現在では、まだ実装はされていない。作者も忙しいとのことだった。

AdvancedMarkerViewはクラスタリングに対応がまだできていない。Google側が提供をまだできていないといったほうが正しいだろう。頑張れば自作できるっぽい。

下記がyoutubeのコメントでgoogleが返信を返していた内容だ。

Announcing: Advanced Markers - YouTube

The js-markerclusterer utility library currently uses Marker class to construct and render the cluster icon, so it doesn't support the marker.AdvanceMarkerView class features. You can see a sample of the js-markerclusterer's default renderer implementation here: https://googlemaps.github.io/js-markerclusterer/classes/DefaultRenderer.html

 

誰か、elementをC#から渡して、AdvancedMarkerViewを使える方法を教えてください。

 

 

 

 

 

??演算子 【C#】

経緯

??の使い方についてこんがらがるのでみていく。

??  NULL合体演算子 null-coalescing-operator

??= NULL合体代入演算子

 

 

コード

string y = null;

Console.WriteLine(y ?? "test null"); // test null

int? i = 2;

i ??= -1; //iがnullなら-1をいれる

Console.WriteLine(i); //2

画像の縦横比をいい感じにする object-fit【css】

経緯

デザインで特定の枠に画像を収めたいというときはよくあるであろう。

縦固定でwidth100%にするのか、はたまたその逆か。どちらにせよ、どちらかに大きな値が来た場合くしゃってひしゃげてしまう。

 

大きいほうを基準に小さいほうをそろえる

何かの枠に収めたいとき、その枠を最大値としたい。そのため、その画像の大きいほうを最大値にしてあげて、小さいほうをその拡大した%に合わせてあげたい。

そうすることで、縦長が来ても、横長が来ても対応ができるのである。

これはレターボックスという映像技術らしい。

レターボックス (映像技術) - Wikipedia

 

 

CSSでの書き方

object-fit - CSS: カスケーディングスタイルシート | MDN

これを条件分岐みたいにCSSで書くのは難しそうだなあとおもっていたところ、object-fitというスタイルがあった。まさに、欲しかったものであり、しかも中央ぞろえにまでしてくれるというすぐれものである。

1段目が無理やり入れようとしたことでつぶれている画像であり、2段目の画像の縦横比が本来正しい。

1段目は縦横どちらかを固定しもう片方にautoをかけている。

2段目はobject-fit:contain;を利用している。

とても便利である。

 

 

コード

<div class="wrapper">
    <div class="container">
        <img class="img-size-w-auto"
    </div>
    <div class="container">
        <img class="img-size-h-auto"
    </div>
    <div class="container">
        <img class="img-size-w-auto"
    </div>
    <div class="container">
        <img class="img-size-h-auto"
    </div>
</div>
<div class="wrapper">
    <div class="container">
        <img class="img-size-fit"
    </div>
    <div class="container">
        <img class="img-size-fit"
    </div>
</div>
<style>
.wrapper{
    display: flex;
}    
.container{
    height: 500px;
    width: 500px;
    background-color: aqua;
    border:solid 5px crimson;
}
.img-size-w-auto{
    height: 500px;
    width: 100%;
}

.img-size-h-auto{
    height: 100%;
    width: 500px;
}
.img-size-fit{
    height:500px;
    width:500px;
    object-fit:contain;
}

</style>