河原志乃 / shino.kawahara

2022/7/10 17:522023/3/26 9:31

タグ

Frontend

写真

54c1bdb7-b56b-459f-9f99-a205c60d21b1_vuK%253B.jpg

Twitter

https://twitter.com/shinobear01

Facebook

https://www.facebook.com/profile.php?id=100023728773093

Instagram

https://www.instagram.com/shinobear01/

Date

自己紹介

千葉県出身のしーちゃんこと河原志乃です。 Voicyではフロントエンドエンジニアをしています。趣味は、音声を聞くこととダンスです。

Voicyの好きなところ

同じゴールに向かって頑張る組織と仲間が大好きです！

好きなVoicyパーソナリティ

Voicyテック部「voi-chord by Voicyエンジニア」/ Voicy - 音声プラットフォーム

voi-chord（ボイコード）へようこそ！このチャンネルは、テックを愛するVoicy社員がテクノロジーやエンジニアリングといったテーマを中心に、自由に語り合う"ゆるふわ"チャンネルです！ Voicyのプロダクトの裏側、プロダクトチームの文化もお伝えしますので、ぜひフォローをお願いいたします！

https://voicy.jp/channel/1305

私が思う「声で未来をつくる」

河原志乃：同志と強く生き抜け | 株式会社Voicyのメンバー「#声で未来を変える」/ Voicy - 音声プラットフォーム

音声放送チャンネル「株式会社Voicyのメンバー」の「河原志乃：同志と強く生き抜け(2022年7月13日放送）」。Voicy - 音声プラットフォーム

https://voicy.jp/channel/3056/353138

カジュアルに話してみる

Webフロントの開発についてカジュアルにお話しします！

株式会社Voicyの中の人はじめまして！ VoicyでWebフロントエンジニアをしている河原志乃です。新卒で入った受託開発中心の会社から、自社でアプリを開発しているVoicyに転職しました。以下のトピックについてお話ししませんか？・エンジニアの転職活動について・サービス「Voicy」について( https://voicy.jp/) ・株式会社Voicyについて( https://corp.voicy.jp/) ・Voicyでの開発について・Webフロントについてぜひ、気軽にお話ししたいです！こんな人と話したい・アプリ「Voicy」を使っている・Webフロントに興味がある・常に挑戦していきたい・わいわい仕事がしたい面談時間タグ

https://meety.net/matches/qJKoYXutKkoi

ピックアップコンテンツ

Angularでセレクト部品のオプションをカスタムする - voicy tech blog

こんにちは！株式会社VoicyでWebフロントエンジニアをしているしーちゃんです。今回は、Angular Materialを使ったセレクト部品のオプションのカスタム方法について書きます。今回、デザインをもとに新たにセレクト部品を作る必要がありました。デザインを見て、セレクト部品について調べたところ、 HTMLのデフォルトのオプション部品をカスタムするのは難しいと書いてあったので、諦めかけました。しかし、いろいろ試行錯誤した結果、指定のデザインを実現できたので記録しておきます！セレクト部分(リストを表示するトリガー)とオプション部分(リスト表示)が重ならないセレクト部分の右端に、オプション部分が開いているかどうかを示す矢印を表示するオプション部分を選択すると文字が強調される、かつ、右端に指定の画像を表示するまず結論から言うと、今回Angular Materialから使用した部品はMenuだけです。セレクト部品を1から自分で作成するのは大変なので、今回はカスタムするとしても、何かしらのもとになる部品をAngular Materialから持ってくるという方針で進めました。候補に挙げた部品には以下があります。 Selectは、単体で見ると名前の通り動作が一番理想系に近かったのですが、セレクト部分とオプション部分がつながっているまたは重なっているデザインでした。Menuにある、 overlapTrigger のプロパティがあれば、セレクト部分とオプション部分を重ねるかどうかを指定できるのですが、Selectにはこのプロパティはなく実現できそうにありませんでした。 1.セレクト部分とオプション部分が重ならないこちらは、1を満たしていました。しかし、2, 3が実現できません。 2.セレクト部分の右端に、オプション部分が開いているかどうかを示す矢印を表示する 3.オプション部分を選択すると文字が強調される、かつ、右端に指定の画像を表示する 3.オプション部分を選択すると文字が強調される、かつ、右端に指定の画像を表示するその結果、Menuのオプション部分は自分で作成することにしました。次に、どのようにカスタマイズしたか書きます。そこで::ng-deep を使います。Angularには::ng-deepを使用しないとカスタムできないスタイルが指定されていることがあります。しかし、単純に::ng-deepだけを使用すると、他のコンポーネントで使っているスタイルに影響が出る可能性があります。そこで今回は、::ng-deepを指定するクラスを絞るために、 MatMenuの機能である MatMenuContentの backdropClassを使用しました。 backdropClassに適当なクラスを指定して、::ng-deepと指定したクラス名で絞り込みすると、クラスを付与したコンポーネントだけでそのスタイルが適応されます。ちなみに、通常よく行うようにMatMenuに class="select-mat-menu"を指定した場合、 CSSにおいて.select-mat-menu で絞り込みを行ってもスタイルが適応されません。これは、以下の図を見てもらうとわかると思います。 MatMenuのオプション部分は、 cdk-overlay-containerという上部の層に表示されます。MatMenuを表示するmat-menuタグにクラスをつけても階層が異なり、絞り込みが行えません。そこで、 backdropClassにクラスを指定することで cdk-overlay-container直下の cdk-overlay-backdrop にクラスを追加します。こうすることで、以下のように今まで直接いじれなかった mat-menu-panelや mat-menu-contentを指定した.select-mat-menu の任意のクラスで絞って上書きすることができます。 ::ng-deep { .select-mat-menu { + * .cdk-overlay-pane > div.mat-menu-panel { border-radius: 8px !important; box-shadow: none !important; border: 1px solid #dbdada !important; margin-top: 8px !important; min-height: max-content !important; max-width: 100% !important; ...

https://tech-blog.voicy.jp/entry/2022/11/17/121801

テキストアウトプット

voicy tech blog

voicy tech blog

https://tech-blog.voicy.jp/