応募前に見て聞いて欲しいこと
チーム別詳細
🔗募集中求人
応募前に見て聞いて欲しいこと
チーム別詳細
🔗募集中求人
河原 志乃 / shino.kawahara
2022/7/10
17:52
2023/6/2
7:16
職種
Frontend
写真
Twitter
https://twitter.com/shinobear01
Facebook
https://www.facebook.com/profile.php?id=100023728773093
Instagram
https://www.instagram.com/shinobear01/
自己紹介
千葉県出身のしーちゃんこと河原志乃です。 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
創立7年Voicyでの入社1年目若手エンジニアの振り返り|Cちゃん|note
はじめに この一年をひとことで表すと、「保守的」だったと思う。 Voicyの人々は革新的で積極的に動いている。 その上で相対的に見ると、私は保守的な方かもしれない。 2年目の目標は、Voicyで「君は革新的だ」と言われることだ。 そんな1年を振り返る。 今日でVoicyに入社してちょうど1年!言い換えると、365日🎉🎉 嬉しくもあり悲しくもある複雑な気持ち。 1年の振り返り記事を書いてたら、自分自身が成長してることがわかった。他の人との比較はおいておいて、わたし自身は成長したんだ。できることも増えたんだ。 美味しいケー
https://note.com/shinobear01/n/nc0dc23fbe065
放送概要機能のSEO対策について失敗から学んだこと - voicy tech blog
イントロダクション こんにちは!VoicyでフロントエンドエンジニアをしているCちゃん(@shinobear01)です。 今回は、放送概要機能のSEO対策について失敗から学んだことについて書きます。 2023年4月にVoicyのWebの機能として、放送概要をリリースしました。 この機能について、SEO対策が漏れていたと…
https://tech-blog.voicy.jp/entry/2023/05/22/094501
テキストアウトプット
voicy tech blog
voicy tech blog
https://tech-blog.voicy.jp/