There is a pernicious belief in our society that having a good idea is the hardest part of meaningful innovation. That is not my experience. I have far more good ideas at my disposal than I do the ability to execute against them. A good strategy is always wasted if the work is bad but I have sometimes seen bad strategies saved by good work. I’ve written about Mission, Strategy, and Tactics often b

バックエンドエンジニアの松尾です。 2024 年 5 月 11 日に開催された日本最大級の TypeScript をテーマとした技術カンファレンス TSKaigi 2024 に参加しました。 本記事では弊社からの登壇内容やスポンサーブースの様子をお伝えします。 登壇内容まとめ 弊社からは下記の LT で 2 名のエンジニアが登壇しました。 TypeScript で使いやすい OpenAPI の書き方 speakerdeck.com yukimochi さんからは OpenAPI の書き方について紹介しました。 変更に強く、ドメインモデルを正確に表現する書き方にすることで、TypeScript で使いやすいコードを生成できるとのことでした。 筆者は最近 OpenAPI spec を書くことは無いのですが、Union を用いた定義は非常に同意するところであり、今後の開発で活用していきたいと思い

どうやら僕にとって絵文字リアクションは過ぎた代物でしかなかったらしい。もうすぐそれが通用しない場所に出戻ってしまうけれど、かつて僕の投稿を可愛いアイコンで彩ってくれた人々に感謝の意を表したい。なにしろこれから絵文字リアクションをぶっ叩く持論を展開するので、まずそう言っておかなければならない。 AP実装で初めて絵文字リアクションに触れた場所は言わずもがな、Misskeyの旗艦インスタンスであるmisskey.ioだった。当時、絵文字リアクションがもたらす広範な表現様式に魅了されたのは確かであったし、ioのデータ消失事件をきっかけに移住を余儀なくされた後も「絵文字リアクション対応」は僕の中で常に一定のプライオリティを保っていた。 絵文字リアクションはハートやスターでは表しきれない多様な文脈をアイコン一つで伝達することができる。なにかと直接リプライを送り合う気勢に乏しい我々の文化圏においてこれは

モーダルダイアログのようなUIには、それが出現している間はダイアログの外の領域が操作不能になっているという慣習があります。ダイアログが取り扱うタスクだけにユーザーを集中させるために、あえてダイアログ以外の操作ができないようになっています。 またモーダルダイアログをはじめとしてディスクロージャーなど、ユーザーの操作に応じて表示と非表示が切り替わるUIもあります。こうしたUIは視覚的には隠れているようでも、実装としては、つねにDOM上に存在しているHTML要素の属性だけを書き換えてレンダリング結果を制御するのが一般的です。 こうしたケースでは、特定の領域を操作できないように実装を行う必要があります。CSSでdisplay:noneかvisibility:hiddenが指定されたHTML要素はそれだけで操作できない状態になりますが、それ以外の方法で非表示になったHTML要素は、利用状況によっては

ブラックボックス化しがちな「目標設定」のナレッジ。組織の上位方針と個人の衝動をミートさせ、「物語」を駆動させるには？ 新年度のバタバタが落ち着いて、組織やチームとして新たに設定した目標に向かって走り出しているところかと思います。1年間のチームの歩みに影響を与えるという点で、非常に重要な意味を持つ目標設定と、その伝え方。 しかし、そのナレッジはブラックボックスになりがちであり、「うまくいかない」と相談を受けることも多くあります。 相談の詳細を尋ねると、多くのマネージャーが、上から降ってきた目標をそのままチームに下ろしていることで、さまざまな問題が生じていると感じます。この"伝言ゲーム方式"の目標伝達では、メンバーのやる気が引き出されることはまずありません。 一方で、上から降ってきた戦略やロードマップなどの「上位方針」と、一人ひとりのメンバーの「衝動」をミートさせることができれば、目標はチーム

はじめに 先日開催されたTSKaigi 2024にて配信チームとして、オンライン配信のスタッフをしていました。 当日の各トラックの配信運営や総合的な環境構築などは他のメンバーを中心に行っていただきましたが、自分は配信画面のデザインや配信に乗せる情報管理用のシステムをコツコツ作っていたのでその紹介をさせていただきます。 情報管理用のシステムといってもローカルマシン上で動く簡単なもので、NodeCGと呼ばれるNode.js向けの配信画面管理用のフレームワークを利用しました。 NodeCGとは NodeCGは先ほど紹介したようにNode.jsとブラウザ技術で動的な配信画面を作成したり、管理画面を提供してくれるフレームワークです。 配信レイアウトとダッシュボードはブラウザ上で動作し、ダッシュボードで編集した情報を配信レイアウト側にWebSocketでリアルタイムに反映したり、WebSocketサー

赤ブーのイベントで男性サークルが現れたことに対する毒マシュマロが投げつけられた件が燃えている。 はてブでこんなブコメがあった。 https://b.hatena.ne.jp/entry/s/marshmallow-qa.com/messages/8b7eb932-aaa8-4d0f-af41-f73914b475de?utm_medium=twitter&utm_source=answer 「男性の描いた本は想像してしまう」とは何を想像してしまうことを指しているの？男性だと、何だから嫌だと言っているのかわからず。 毒マロを本人に投げつけた行為はその後の反発を読めない愚かな行為だが、その心情は理解できるので解説します。 BL漫画…いわゆる二次元、また三次元であっても遠くから見るだけのナマモノに求めるのは、スラッとして清潔でいい匂いがしてムダ毛は生えておらず女に生々しい性欲を向けることもない、

はじめに こんにちは。ドワンゴ教育事業でエンジニアをしているユーンです。 N予備校アプリケーションやその他複数のプロジェクトで pnpm を採用しました。pnpm とは何か、npm とどう違うのかというのを node_modules の構造を追いながら理解しつつ、教育事業での採用した結果についてお話します。 pnpm とは pnpm とは、npm や yarn とレイヤーを同じくするパッケージマネージャであり、サードパーティのものです。 pnpm.io pnpm は他のツールと比較して高速でありディスク効率が良いと謳っています。 その pnpm の最大の特徴は、 node_modules の構造にあります。 例えば npm では v3 からフラットな node_modules を使うようになっております。yarn もデフォルトでは同様にフラットな node_modules を提供しています

Intro IETF の httpbis で、 Reverse HTTP Transport という仕様が提案されている。 Reverse HTTP Transport https://www.ietf.org/archive/id/draft-bt-httpbis-reverse-http-01.html この仕様は、 Origin サーバの前に何かしら Intermediaries (Loadbalancer, Reverse Proxy, CDN etc)があるのが一般的な現代の Web サービス構成において、非常に革新的なアイデアを取り入れたプロトコルと言える。 まだ v01 という初期段階ではあるが、発想が非常に面白かったので、読書メモを残す。 登場人物 ベースとして HTTP の話にはなるが、登場人物が多いため Client/Server という「相対的な役割」で話をすると、紛

２０２４年５月５日。私は生まれて初めてとなるデートをしてきました。 ８時に起きるつもりが６時頃に目が覚めてしまった。 眠りにつけたのがおそらく４時頃なので２時間しか眠れていない。 それはまずいと思って眠りにつこうとするも案の定、無理だった。 ここ最近、ずっとそんな感じで１日平均３～４時間しか眠れていない。 でも今日がデート当日となれば、そんなことは関係なかった。 ドーパミン出まくり、覚醒状態である。 行きの車 予定通り９時半に家を出て同期の家の前にぴったり１０時到着。 なんだかんだで今年に入って同期の家に行くのは４回目である。(飲み会の帰り、いちご狩りの行き帰り、今日) しかし、４回目でもドキドキしてしまう。 ＬＩＮＥで「着いたよ」と送ると、すぐさまスタンプが送られてきて玄関から同期が出てきた。 驚愕した。今日は暑い。５月初旬とは思えないくらい暑い。暑すぎるとはいえ、、、 短パンにＴシャツ

[2024年4月25日 追記] Safariの動作について考慮漏れがありましたので、一部追記・編集しました。 新宿にオフィスのあるClassiは、岡山在住の私のような地方在住者だけでなく、いわゆる通勤圏内に在住していてもリモートワークで働いている人が多い会社です。必然的にミーティングはいわゆるオンラインミーティングとなり、主にGoogle Meetが利用されています。 そのGoogle Meetのチャット機能、ここ1週間ぐらい「IMEで日本語に変換のために押すエンターキーで送信されてしまう」という現象が発生しています。このエントリーを読まれている時点では対応しているかも知れませんが、2024年4月22日17時時点ではその現象は続いています（Windowsでは再現しないという情報もあります）。 入力開始 変換して確定のエンターキーを押すと 送信される エンターキーに頼らない日本語入力を頑張り

Intro CSRF という古の攻撃がある。この攻撃を「古(いにしえ)」のものにすることができたプラットフォームの進化の背景を、「Cookie が SameSite Lax by Default になったからだ」という解説を見ることがある。 確かに、現実的にそれによって攻撃の成立は難しくなり、救われているサービスもある。しかし、それはプラットフォームが用意した対策の本質から言うと、解釈が少しずれていると言えるだろう。 今回は、「CSRF がどうして成立していたのか」を振り返ることで、本当にプラットフォームに足りていなかったものと、それを補っていった経緯、本当にすべき対策は何であるかを解説していく。 結果として見えてくるのは、今サービスを実装する上での「ベース」(not ベスト)となるプラクティスだと筆者は考えている。 CSRF 成立の条件 例えば、攻撃者が用意した attack.examp

株式会社ドワンゴは2024年5月11日に開催される日本最大級のTypeScriptをテーマとした技術カンファレンス TSKaigi 2024 にプラチナスポンサーとして協賛いたします。 TSKaigi 2024 当日は弊社教育事業エンジニアが複数名参加します。スポンサーブースをいただいていますので、現地で参加される方は是非お気軽にお越しください。 スポンサーブースではN予備校内にあるTypeScriptの教材を触れる他、限定ノベルティもご用意しております！ ドワンゴの教育事業とは？ 私たちは、未来の「当たり前」の教育をつくるため、生徒・学生や教職員の「学ぶ」「教える」体験の最大化を日々目指しています。 日本発の本格的なオンライン大学「ZEN大学(仮称)(設置認可申請中)」や、2万名を超え日本最大の生徒数であるネットの高校「N高等学校・S高等学校」と連携し、ネットの時代に合わせた教育関連のサ

背が高く華奢で、小さな顔をマスクで隠したその女性は、声優の駒形友梨さん。ご挨拶をさせて頂くと、90度に近い角度で深くお辞儀をして下さいました。その様子は、真面目さと丁寧さを感じさせます。 駒形さんは、声優さんではありますが、歌手としていくつもCDを出しています。 お芝居と歌と、どちらに対しても同じくらいの情熱と、少し種類の違う想いとを持ちながら活動される駒形さん。 お花の話も交えながら、ファンの方へのお気持ちや、仕事への姿勢をお話して頂きました。 ＊ 駒形さんが声優という職業を知ったのは小学生の時。声優・林原めぐみさんの歌声を聞いて、その姿に憧れるようになりました。 その時生まれた「声優さんになりたい」という言葉は当時、まだ重みを持たないものだったそう。ただ、駒形さんの中で、“声優”に対する気持ちはそれからずっと続いていきます。 中学に上がると、駒形さんは一層歌を好きになりました。カラオケ

コンテナクエリ（@container）とは、親コンテナ要素に基づいてスタイルを定義できる CSS の機能です。メディアクエリ（@media）では画面全体の幅に応じてスタイルを変更する必要がありましたが、コンテナクエリでは任意の要素に基づいたスタイルを適用できるため、より柔軟なレイアウトの実現が可能です。 .card { display: grid; grid-template-columns: 1fr; } @container (min-width: 600px) { /* カードの親要素の幅が 600px 以上の場合、2 列に変更 */ .card { display: grid; grid-template-columns: 1fr 1fr; } } コンテナクエリを使用してスタイルを適用する場合、コンテナクエリ単位を使用できます。コンテナクエリ単位は、親コンテナ要素に対する相対的な

あの頃の俺に伝えたい内容を雑に書く。 本を読め お前が困ってることはたいてい先人の知恵によって体系化されている。経験から学ぶことも大事だが、歴史から学ぶことを常に継続しろ。 他社のマネージャーと話せ 社内のことで手一杯なのはわかるが、思った以上に視野が狭くなっているぞ。社外の人間と話すとそれに気づくはずだ。緊張を乗り越えて直接声をかけたりイベントに出向いたりしてみるといい。思考が整理され、きっと解決の種が育つ。 引き出しを増やせ マネジメントは成長がわかりづらい。不安になったらマネジメントの引き出しを増やすことに集中しろ。メンバーへの物事の伝え方、意思決定の前の整理の仕方、やり方は無数にある。何個違うやり方にチャレンジできたかを数えてみるといい。 どこで成果を出すかを決めろ 自分の期待は自分で合わせろ。やること、やらないこと、頼りたいことを明文化しないと全てが自分の責任のようにすれば感じて

自分が会社員だった時の転職活動、必ずしも毎回全部できていたわけではないけど、一応こういうステップを意識していたなぁ、というノウハウのシェア。 ①1度に1社だけを受ける。エージェントではなくリファラルで紹介者を見つける。2社以上を同時に受けるのはちょっと大変かなと考えていた。 ②紹介者に社内の課題を聞いて、イシュー度（本当に解く価値があるか？）やCan（自分のスキルや経歴に合う領域か？）とのマッチングを確認する。 ③カジュアル面談やリファラル食事会で社内課題やカルチャーをヒアリングする。なるべく違う立場のメンバーに来てもらって、見え方や意見のズレを探り、正確な状況を把握する。必要に応じて事前にNDAを締結する。 ④外部事例をリサーチしてその会社にマッチする解決案を考え、提案資料にまとめて送る。入社後に期待される動きの1つを先に実施し、③の参加者が投下した時間コストはこの成果物でお返しとする。

意思決定の場にいない人に対して決定事項を共有する際、いくつか気をつけておくといいなぁと考えていたことを雑にまとめておきたい。 決定する前から進捗をちょっとずつ共有しておく 決定前の話なので後の祭りかもしれないが、いきなり結果をドーンだと相手を戸惑わせることがあるので事前に議事録を共有したり中間で説明する機会を作ったりするとよい 背景と前提条件を伝える なぜやるのかわからないまま結果だけ共有すると納得してもらいにくい。決定する上での前提条件を知らないと余計な反発をうむこともあるので注意が必要。それまでずっと考えてきた当事者は気づきにくいが、びっくりするくらい前提知識が違うことがある。相手は何も知らないものとして、イチから説明した方がよい 決定までの経緯を伝える 結論より経緯の伝え方が重要。どのような議論があってそんな決定になったか、完結に伝えましょう 捨ててきた選択肢も伝える 結果に至るまで