「Cloudflare Workers Tech Talks in Tokyo #4」に参加してきました

comilioとCloudflare

@oliver_diaryさん

  • スタートアップの0->1での活用事例
  • なぜCloudflareを選んだか
    • コストが安い
      • 無料でできることが多い
      • データイグレスが無料
    • キャッシュが扱いやすい
      • プログラムから扱える
    • エッジコンピューティングの扱いやすさ
  • 漫画のアプリなので画像が多い
    • キャッシュさせたい
    • 購入してない人が見えないようにしないと
    • workersでアクセスを受けて処理をして返す
  • 管理画面
    • CloudflareAccess
    • すべてのリクエストがCloudflareを経由するようになる
    • 特定の人しか見れない環境を作れる

なぜ、音楽ゲーム「Liminality」はCloudflareを使うのか?

nanosanさん

  • なぜCloudflare
    • コストが安い
      • ゲームのアセットはサイズが大きい
      • AWSなどでは転送量で大きな課金
      • 外向けの料金がかからないのがいい
    • サーバーレス環境の柔軟性
  • リソース分離によるコスト削減
    • pagesとR2の使い分け
    • pagesは静的ファイルのアクセスが無制限
      • 1ファイル25MBで20000ファイルまで
      • 更新するたびにデプロイがいる
      • 基本的に公開
    • R2は1オブジェクト5TBまででS3五感
      • エグレス料金がかからない
  • Workersの制限
    • 容量制限
      • 可能な限りNode標準機能で
    • CPU時間の制限
      • ハッシュ処理の工夫
    • メモリ制限

Codegiantデモ

Rishi Mathurさん

  • Codegiant
    • Cloudflareを使った環境を簡単に作れる
      • D1, KV, R2
    • 監視やCI/CDなどの運用機能も備えている
    • AIでコード生成やデプロイさせる機能もある

Cloudflare Workersを活用したアプリケーション再構築事例

@arisawaさん

  • サービス初期に作ったコードが拡大で耐えられなくなった
    • 新しく作って移行したい
  • Cloudflareでプロキシさせて旧環境にリダイレクトさせたりとかうまくやる

Cloudflareで実現するAIエージェントワークフロー基盤

@kmd_09さん

  • エージェントワークフロー
    • 自動で外界とやりとりしてくれる
    • API連携とか
    • 多段階の実行計画立てたり
  • 指定されたURLの情報を取得して、情報抜き出して、計算して、文章化して、みたいなこともできる
  • エージェントはそれぞれCloudflareWorker

「持っててよかった!!AWS認定資格!」に参加してきました

役員/マネージャー・著者・エンジニアそれぞれの立場から見たAWS認定資格

佐々木拓郎さん(NRIネットコム株式会社)

  • 合格するには
    • 試験ガイドを読んで範囲を把握
    • 基本概念を理解してハンズオンで実践
    • Well-Architected Frameworkの原則に沿って答える
  • 役人/マネージャーから見た価値
    • 対象に対して体系的な知識を持っている(可能性が高い)と思える
    • その分野に一定レベルのスキルを持っている(可能性が高い)と思える
      • 座学だけだったとしても習得できるだろうと思える
    • 試験を受けようという意欲がある
    • 全冠達成者が多くなって特別感はなくなってる
    • どうして受けたかのストーリーが気になる
  • 対策本の著者から見た価値
    • 公式に出ている情報を細かく読んで書いてる
    • FAQを読んで頻出事項をピックアップ
    • 早くて半年くらいはかかる
    • 書籍の寿命が短いのがつらい
      • 試験が廃止になったり改訂されたり
    • 市場が小さい
      • 初心者向けのほうが需要が高いが競合も多い

あなたの人生も変わるかも?AWS認定2つで始まったウソみたいな話

岩本隆史さん(ENECHANGE株式会社)
https://speakerdeck.com/iwamot/two-aws-certs-changed-my-life

エンジニア歴1年未満の初心者が3か月でAWS認定試験を全冠した話

Tanabe Harukoさん(アクセンチュア株式会社)

  • IT初心者から受験した
    • 短期集中で
    • 対策しやすいものから順番に
  • 勉強はCloudLicenseのみ
    • 新しくてコンテンツが少ない時はUdemyで
  • 実務経験が少ない時のアピールとして使えていい
  • 短期で覚えたことは短期で忘れてしまう
  • 座学の知識と実践的なスキルは別物

実体験から語る!AWS全冠で得られた価値と全冠取得の道

若松晃洋さん(株式会社スタディスト)

  • 全冠達成して
    • 市場評価
      • 興味を持ってもらいやすくなる
      • 前年は達成者1200人
      • 事業会社所属だと珍しい
    • 業務で
      • アーキテクチャ選定で役立つ部分も多い
      • 意外な知識が意外な場面で役立つことも
  • 全冠取得に向けて
    • 普通の人は時間がなくて大変
    • 1つ2ヶ月でも2年かかる

「モバイルアプリアクセシビリティLT大会」に参加してきました

感想

  • モバイルアプリのアクセシビリティ事情に詳しくなかったけど、ちゃんとやれてるアプリは多くないようでこれから本やイベントをきっかけに浸透していってほしいと思いました

アクセシビリティのチーム浸透に向けて実施してること

株式会社LIFULL HOME'S事業本部 プロダクトエンジニアリング部 iOSエンジニア 青木孝乃輔さん(@k_awoki)

  • アクセシビリティの浸透
    • 全体への浸透難しい
    • 課題洗い出していっても新機能がどんどん追加されていく
  • アーキテクチャ刷新や新機能の追加のタイミングでは勝手に対応していく
  • OS標準を使えない場合も自然と対応される工夫

アプリチームでの改善事例

株式会社LIFULL HOME'S事業本部 プロダクトエンジニアリング部 iOSエンジニア 佐藤麗奈さん(@reineyo_ov)

  • コントラスト比の改善
    • APCAの基準
  • VoiceOver対応
    • 画像ボタン
    • フォーカス
  • 最低限使えるように
    • 晴眼者が得られる以上の読み上げをしない
      • 補足したくなるなら元のテキストがイマイチなのでは
    • ローターアクションを活用

Abemaブログアプリのa11yの歴史とこれから

株式会社サイバーエージェント あゆさん(@airagu950)

UXライターのライトニングトーク

永井一二三さん(@nagaikazufumi)

  • Web/アプリでのUXライティング
    • テキストの言い回しを考える

Flutter製アプリのアクセシビリティってどうなの?

futaboooさん(@futabooo)
https://www.docswell.com/s/futabooo/53G988-mobile-a11y-2025-01-10

  • Flutterでのアクセシビリティ機能の提供
    • 端末設定のフォントサイズ
      • サイズに応じてgridの列数を変えられたり
    • スクリーンリーダー
      • 視覚的にスクリーンリーダーの利用状況を見ながら開発できる
    • コントラスト比
  • Flutterで作るwebはアクセシビリティ厳しい

視覚障害者の全体概況

西川 隆之さん

  • 視覚障害と言っても見え方は多様
    • 中心しか見えなかったり
  • スマホアプリを利用するうえで
    • 全盲だと
      • スクリーンリーダー
      • 見出しで全体把握してから使う人も
      • 画像の代替テキスト
    • 弱視の人
      • 文字サイズとコントラスト
        • 4.5:1あっても見づらいことも
      • ボタンの視認性、小さすぎてよくわからないとか
        • 大きくタッチしやすいといい
      • 直感的なUIやレイアウトだと予想ができて操作しやすい
  • スクリーンリーダーで読まれてるところが枠着いてるどこ読んでるかわかる
  • 反転すると見えづらい色のアプリ

freeeアモバイルアプリアクセシビリティの歩み

RyoAbeさん めろんさん

「AWSコミュニティHEROと学ぶ!Amazon Bedrock勉強会&事例共有会」に参加してきました

Bedrock入門

みのるんさん(KDDIアジャイル開発センター)
https://speakerdeck.com/minorun365/awsnosheng-cheng-aisabisu-amazon-bedrockru-men-2025nian-1yue-ban

  • クラウド各社生成AIのサービス出してる
    • AWSはBedrock
  • AmazonBedrock
    • サーバーレスで叩いた分だけの課金
    • AWSの他のサービスと組み合わせやすい
    • いろいろなAI企業のモデルを取り入れてる
      • 7社40種類
    • セキュリティ、ガバナンス
      • CloudWatchで監視
      • CloudTrailでトレース
  • モデル
    • テキストはClaude
      • 日本語対応
    • 埋め込みはEmbed
    • 画像生成はStableDiffusion
  • AWSのマネージドコントロール上から簡単に試せる
  • Amazon Bedrockナレッジベース
    • RAGを作れる
    • 画面上からの操作でできる
  • Amazon Bedrockエージェント
    • 自立型AIエージェントを画面上から作れる
    • 目的を持って計画を立てて実行していくということをしてくれる
  • Amazon Bedrockフロー
    • ローコードでLLMアプリを作れる
  • 海外リージョンを活用するといい
    • 東京だと新しい機能が来るのが遅い
    • 東京だと需要が高くてRateLimitにかかることもある
    • クロスリージョン推論で全世界に勝手に分散して空いてるところを使える

re:Invent現地レポート

みのるんさん(KDDIアジャイル開発センター)
あわっちさん(KINTOテクノロジーズ)

  • AWS Heroになると費用全部出してくれる
  • オンラインでもあるので現地行くならそれ以上のことを
    • ハンズオンとかジャムとか
  • 参加者60000人のうち2000人が日本から
    • ブースにも日本人がいたり

re:Invent Bedrock Recap

みのるんさん(KDDIアジャイル開発センター)
https://speakerdeck.com/minorun365/aws-re-invent-2024-amazon-bedrock-atupudetozong-matome

モデルのアップデート

  • RerankAPI
    • RAGの検索結果を関連度順に並べてくれる
  • Amazon Nove
    • Amazon製の新しいモデル
  • モデルの蒸留機能
    • パラメータ数の多いモデルを教師にする
    • それを使って小さいモデルを微調整させる
  • poolside
    • コード生成
  • LumaAPI

推論のアップデート

  • レイテンシー最適化オプション
    • 速度が上がる
  • プロンプトキャッシュ
    • トークンを5分まで再利用できる
  • プロンプトルーティング
    • 複数のモデルをプロンプトの複雑さに応じて振り分ける

RAGのアップデート

  • ナレッジベースの応答ストリーミング出力
    • 応答が少しずつ返ってくる
  • カスタムコネクタと埋め込み差分操作
    • データソースが変わった時に差分だけ取り込める
  • メタデータの自動フィルター
  • データオートメーション(BDA)
    • 非構造化データをテキストに変換してくれる
  • ナレッジベースのマルチモーダルのデータ取り込み対応
  • ナレッジベースの構造化データのクエリ対応
  • ナレッジベースがGraphRAGに対応
  • Amazon KendraにGenAIインデックス
    • 従来のKendraより大幅に安い
  • AuroraServerkessがナレッジベースのクイック作成に対応
    • 使ってない時はスリープしてくれる

エージェントのアップデート

  • マルチエージェント
    • 複数のエージェントを共同させることができるようになった
    • 監督役と協力者

ガードレールのアップデート

  • 自動推論のチェック
  • マルチモーダル毒性検出

評価のアップデート

  • モデルの評価をLLMにやらせる
  • ナレッジベースで生成した応答の品質の評価

Bedrockを使い始める際にやっておいたほうがいいことまとめ

社内ツールcirroの紹介

AWS上でGraphRAGやってみた

Slack + Agents for BedrockでAWSリソースを操作する

生成 AI アプリケーション開発に評価の仕組みを導入して精度向上を実現した話:DB 設計レビュー自動化の取り組み

2024年12月に読んだ本

  • 2024年12月に読んだ本の記録です
  • 今月は3冊
  • 資格受けてみようかなと思って読んだ本も入りました
  • 2024年から毎月記録を残すようにしましたが1年間でちょうど30冊でした

誰のためのアクセシビリティ

littlemore.co.jp

  • 細かい内容を書き始めるときりがないですが、価値観が変わる内容が多くあり読んで良かったと思う本でした
    • エイブリズムの話や障害者にはその人の文化があるという話など
  • 著者の田中さんの価値観をもっとインプットしたいと思えました
  • 前半の方に出てくる車椅子の人しかいない世界の話は障害の社会モデルを理解しやすい例えでいろんな人に伝えたいなと思いました

発想から実践まで デザインの思考法図鑑

www.socym.co.jp

  • 著者であるbtraxのブランドンさんのpodcastを最近よく聴いていて過去回の中で紹介されてたので読んでみました
  • デザイン思考を中心としたデザインをする上での考え方や法則、手法などが紹介されています
  • podcastの中で話されていたこともしっかりまとめられています
  • デザイナーのみならずエンジニアやビジネスマンもターゲットとしているので誰でも読めて活用できる本です
  • 個人的にはアクセシビリティやインクルーシブデザインについてもしっかり触れられてるのが良かったです

人間中心設計入門 HCDライブラリー0巻

www.kindaikagaku.co.jp

  • HCD基礎検定でも受けてみようかなと思って参考書として紹介されてたので読んでみました
  • デザイン思考を中心とした本ですがISOの定義との関連など他の本と比べて固めな内容もあり初めて学ぶことが多くありました

国立西洋美術館の「モネ 睡蓮のとき」に行ってきました

  • 年末暇な時間ができたので一度は見てみたかったモネの睡蓮を見てきました
  • 昼過ぎに行きましたが館外に行列が出来ていてとても混み合って大盛況のようでした

www.ntv.co.jp

  • 一部撮影可でしたが写真だと実物を見た時の感動は伝わらない

「TypeScriptを活用した型安全なチーム開発 2024」に参加してきました

TypeScript開発にモジュラーモノリスを持ち込む

モジュラーモノリス

  • Digitization部
    • アナログ資産をデジタル化
  • アーキテクチャ特性の1つとしてモジュール性
    • モジュール性がないとコードの品質が低下する
    • 技術的負債の量を抑えて開発生産性を維持するために必要なこと
  • モジュラーモノリス
    • 単一プロセスが別々のモジュールで構成される
    • 独立して作業できる
    • デプロイのために結合する必要がある
  • レイヤードアーキテクチャ
    • 技術レイヤーを水平に分割
    • モジュラーモノリスは機能ごとに垂直に分割
  • モジュール分割
    • DBのテーブルもモジュールごとに分割し共有しない
      • 同じテーブルを複数のモジュールからアクセスしてると改修はいるときの複雑さが増す
      • テーブルのjoinが必須だと状況が違うことも
    • モジュールの中をレイヤードアーキテクチャ
      • モジュール外に公開するものだけをエントリーポイントのファイルでexport
    • Lintによって縛る
      • モノレポライブラリなどは使わなかった
      • モジュールが明示的にexportしたものだけをimportするルールが守れればいい
      • ルールは自作した
        • no-restricted-path なんかはあるが

Denoで作るチーム開発生産性向上のためのCLIツール

DenoでCLI

  • Contract One
    • 法人向けの契約データベース
    • 契約書をデータ化構造化して全社で活用できる
  • ちょっとしたスクリプトのコード
    • 個々人が作ったりルールなく量産されることが多い
    • メンテされてなかったりドキュメントもなかったり
  • 共通の実行環境を作って整備した
    • Denoでやった
  • 用途
    • テスト用のデータ準備
    • サンプルPDFを生成
    • 運用作業の自動化
    • AI生成系のコマンド
  • Deno
    • 標準機能が豊富
      • 依存をかなり小さくできる
      • 標準ライブラリもDenoコアメンバーが作ってる
      • 小さい環境で小さくやるのに相性がいい
    • Globalにインストールできる
      • Denoの昨日で任意のコマンドでグローバルにインストールされる
    • TypeScriptで書ける
      • 開発がtsなので

React Routerで実現する型安全なSPAルーティング

React Router

  • Eight
    • 名刺アプリ
    • Sansanで唯一のtoC
    • web版もある
    • 企業向けのサービスもある
  • React Router
    • 宣言的にルーティングを書ける
  • 不正なURLへの遷移
    • 直に書くとtypoとかundefinedの場合とか
    • 型安全にURLを生成できるような関数を作る
      • generatePath()がReact Routerから提供されてるのでそれを使うといい
  • ルーティング変更時の修正量
    • React Routerのv7からRemixが統合される
    • v6.4からloaderとactionの概念が入っていた
    • 機能が増えたこともあってルーティングが変わると影響が大きくなった
    • パスに応じた型の自動生成
      • 各ファイルでそれを読み込むと便利

型情報を用いたLintでコード品質を向上させる

Typed Linting

  • Bill One
    • 請求書を管理するプロダクト
  • Typed Linting
    • 型情報を使って静的解析をする
    • ASTに加えて型情報も使って解析する
    • typescript-eslint
    • 型情報を使うので実行時間は増える
  • Rust製ツールでは
    • BiomeやoxlintではまだTyped Lintingはできない
    • パフォーマンス上の課題は変わらずあるため

「第119回「WEB TOUCH MEETING」年末SP」に参加してきました

感想

  • 4月のアクセシビリティSP以来の2度目の参加でした
  • 前回は日帰りだったのでほとんど会話することなく帰ってしまいましたが、今回は懇親会まで行ってお話しできました
  • 登壇者や運営の方と会話できてまた来たいと思えるコミュニティでした

闇夜の相談所から、ITのよろず屋へ

  • 宮本 森一さん

独学スタートでここまできた!フリーランス1年目のリアル

  • 板倉 友里恵さん

持ち客ゼロで衝動的に起業したらなんだかんだ色々あった話

  • 穴田 弘司さん

SmartReleaseとウェブアクセシビリティ

  • 神森 勉さん株式会社KDDIコミュニケーションズ

KDDIアクセシビリティ

  • KDDIグループのウェブアクセシビリティ方針を出した
    • WCAG2.2のAA
  • KDDIグループ人権方針
  • SmartRelease
    • 共用サーバの機能
    • サーバのデータのバックアップを取ってくれる
    • 歴史があってUIが古いのでリニューアルする
    • WCAG2.2のA準拠を目指す
      • 仕様通りやるだけではグループの指針を満たせるのか?
    • インクルーシブデザイン
      • サービス・プロダクトの品質を上げていく
      • 障害当事者の声を聞いたり

ノンデザイナーのためのUIデザイン入門

  • Manaさん

ノンデザイナーがデザインを学ぶ

  • なぜ学ぶと良いのか
    • 問題解決力
    • 伝える力
    • チーム作業
  • いいデザイン
    • おしゃれとかかっこいいとかだけじゃない
    • 利用者に考えさせないデザイン
  • デザインの要素
  • いいレイアウト
    • 意図が伝わりやすい
    • コンテンツの主役が明確
    • グループごとにまとまってること
      • 余白を使ったグルーピング
      • 囲ったり線を引いたり
    • 規則的に揃える
      • 文章の左揃え/両端揃え/中央揃え
      • 要素の幅やテキストの長さで読みやすいものを選ぶといい
    • 一貫性がある繰り返し
    • メリアリをつける
  • 理論も大事だけど感覚も大切
  • 利用するユーザを考える

「フロントエンドチョットデキル ミニ #01」に参加してきました

感想

  • webフロントエンド開発で誰もが悩むようなテーマが多くて、聞きながら自分のところにどう当てはまるか考えられた話が多かったです

チョットワカルかもしれないReact Router v7

  • n13uさん / chot Inc.

React Router v7

  • ReactRouterは2014年からある
    • routingライブラリ
    • v5からv6で大きく変わった
  • Remix
  • RemixとReactRouterの統合
    • ReactRouterv7でRemixと統合
    • ReactRouterの既存ユーザが多いのでそっちをベースにRemixを統合した
    • もともと近い状態になっていた
      • ReactRouter + Vite = Remix?

ソフトウェア開発ナニモワカラナイ

ソフトウェア開発のテスト

  • テストしやすいコンポーネント
    • ロジックとUIが別れている
    • どういう条件の時に何を出してというのをまとめて書かない

例外処理について考える

例外とエラー

  • 例外とエラー
    • 例外はプログラム側で対処できる問題
    • エラーはシステムレベルを超えた問題
  • 例外のUI
    • 次に何をすればいいか示せると良い
  • エラーログ
    • 何が起きたのか追跡できる状態になってると良い
    • Errorを拡張したクラス作って不足する情報を出せるようにするといい

ナニモワカラナイNext.jsディレクトリ構成

  • okenさん / chot Inc.

ディレクトリ構成

  • featureベース/layerベース
    • layerはレイヤーごとに分けるやつ
      • component
      • hooks
      • api
    • featureは機能ごとに分ける
      • news
      • about
      • blog
  • Container/Presentationalパターン
    • containerにロジックやAPI
    • presentationがUI
  • Colocation
  • 構成
    • app
      • エントリーポイントのpageだけ
    • feature
      • container層
    • component
      • presentation層

「D-Plus Tokyo #9 2024年大忘年会!開発生産性にトライした1年を振り返ろうLT会」に参加してきました

感想

  • 前職の人や現職関連の人たちに意図せず遭遇できて楽しめました
  • findyの顔の広さを感じますね

国境を越えて生産性向上に取り組むためのマインドセット

  • 株式会社Faber Company / 菅原 政行さん

オフショア開発での生産性

  • ベトナムでオフショア開発してる
  • 共通の言葉を使う

2年目のジュニアエンジニアがチームの開発生産性向上Missionを任されたこの1年を振り返る

  • ourly株式会社 / 神本直人さん

1年間での生産性向上

  • 取り組んだこと
    • 目標設定
      • d-plusにいる人たちから情報を得る
    • 振り返り
      • Findy Team+
    • WIP制限
  • 1次情報を取りに行くようにしたのが良かった
    • 手段を先行させずに背景から聞く

メンタル面でもつよつよエンジニアになる

  • 株式会社Hacobu / 井田 献一朗さん

Hacobuの開発生産性

  • 開発生産性に取り組み始めて2年
  • 一番大変だったのは継続すること
  • やったこと
    • Findy Team+をみて振り返り
    • SPACEをやってみる
    • 勉強会に言ってみる
    • 輪読会
    • 記事を書いたり

"定性"から"定量"へ〜時間を制する者が生産性を制す!の巻〜

定量と定性

  • 定性は受け手によって捉え方が違う
  • なるべく早くとかだと認識があってないことがある
  • 定量で明確に認識を揃えることで余計な齟齬を防げる

Findy Team+ Awardを受賞したかった!ベストプラクティス応募内容をふりかえり、開発生産性向上もふりかえる

1年間の開発生産性の取り組み

  • 開発生産性チームがある
  • XP文化ペアプロやペア作業をよくやっている
  • PdMとエンジニアの距離が近く何を作るかから一緒に会話してる
  • 不確実性が高いものはペアプロ/モブプロ
  • 開発生産性チームによるふりかえりの定期実施

リモートでも開発生産性向上!入社一年未満の私が2024年取り組んだこと

  • アソビュー株式会社 / 遠藤想さん

開発生産性の取り組み

  • ドキュメント整理
    • SlackとConfluenceで情報がなかなか見つからない
    • 何をどこに配置するか決まってなかった
    • ポータルページ作って交通整理
  • 小技の共有
    • 社内でLT会やって共有
    • 普段の作業のTipsなど共有

「Stack Nagoya Fes Vol.3」に参加してきました

感想

  • 7月のvol.2に続いて今回も参加しました
  • 名前は知ってるけど話を聞くのは初めての人が多くて面白かったです

斬新な企画発想術

  • Clap 前川さん

イノベーティブな企画術

  • 制作会社
    • 成果にコミットして他社と差別化されるようなイノベーティブなものを求められている
  • ラテラルシンキング
    • 水平思考
    • 既成概念を無視して考えを広げる思考法
    • 前提を疑う
    • ロジカルシンキングは対義語で垂直思考で絞り込んでいく
  • 成果にコミットする必要もある
    • ラテラルに広げてロジカルに落とし込む

熱狂が伝播するチームの作り方

  • 井斉花織(いおり)さん

いいチーム

  • カルチャー
    • 心理的安全性の高さ
    • 各個人がそれぞれの自分にしかない最大価値を発揮する
  • チームで
    • KPTの振り返りであげた項目をvalueと紐づける

良いサービスを作ってくれたのに営業もマーケティングもできなくて悔しかった話

  • 岡崎志保さん

1人営業とマーケティング

  • 技術的な価値を伝える難しさ
    • 技術的な質問に答えられない
    • 商談が機能の羅列で終わってしまう
    • 施策が思いつかない
  • 振り返って
    • 顧客の課題の理解不足
    • 技術的な理解不足
    • 行動量が足りない
  • 取り組み
    • AIを使い倒す
    • 自分技術者じゃないしと切り捨てない
    • 本を読んだ

【ゼロからの挑戦】Web広告代理店で問い合わせ獲得のためにやったこと・やっておけばよかったこと

  • 原銀大さん

マーケティングの取り組み

  • 新規なのでコンテンツがないところからスタート
    • ブログ記事を書いた
      • SEO意識して検索かかるように
    • ホワイトペーパーを作った

プレイングマネージャーの「プレイングの時間」の使い方

  • きよしさん

効率的なプレイング時間の使い方

  • マネジメントをやってるが忙しい時は自身でも作業をしている
    • マネジメント業務をしながらどうこなすか
  • とにかく時短する
    • ゲーミングマウス
      • ボタンがたくさんある
      • 片手でfigmaを操作できるのでもう片手でスマホ見ながらとかできる
    • AI活用
      • 音声入力で空き時間に壁打ち
    • ショートカットを使いこなす
  • うまく段取りする
    • 手戻りの要因を潰す
    • 勝手に進捗報告
    • 自分がやることにこだわらない
      • 自分にしかやれないことに集中する

ほしいテンプレート制作から始めるツール学習のススメ

テンプレート制作

  • studioのテンプレート
    • 審査に通ると出品できる
  • テンプレート作成
  • 出品
    • 特徴やこだわりを記載して出品
    • 審査で細部へ丁寧なフィードバックが来る

その可愛い字形GoogleFontsで使えません!? Figmaとフォントファイルと実装と

  • みらるさん

OpenType機能

  • figma上で指定されたフォントをそのままCSS適用しても反映されない
  • フォントファイルには文字の形以外の情報も入ってる
    • OpenType機能
      • スタイルセットの情報
    • font-feature-settingsでCSSで指定する
    • GoogleFontsのCDNは非対応
    • AdobeFontsだと表示できた
    • GoogleFontsからダウンロードしてwoff生成するといける

htmxって知っていますか?次世代のHTML

  • 長谷川喜洋さん

htmx

  • htmlタグに専用の属性をつけることで機能を拡張できる
    • hx-xx
  • 属性をつけるだけでbuttonなどで非同期通信ができる

静的HTMLを最初に作る制作フローにするなら、どのCMSが良いの?

  • 長谷川広武 (´ ºムº `)さん

CMS

  • WordPress
    • 静的HTMLを作ってWordPressのテーマを作っていた
    • 今はブロックエディタ
  • Jamstack
    • ヘッドレスCMS
    • エンジニアがいないと壁がある
  • MovableType
    • 静的にも書き出せる
    • 高い
    • 覚えるハードル
  • a-blog cms
    • 部分的にも導入しやすい
    • 有料

見た目を再現するデータでなく、データベースとユーザーを接続するインターフェースを作ろう

UIのパターン

  • UIスタック
    • Blank State: データがない状態
    • Loading State: 読み込み中の状態
    • Partial State: 部分的にデータがある状態
    • Error State: エラーが発生した状態
    • Ideal State: 理想的な状態
  • UIのパターンを考慮して設計すると良いというもの
  • それぞれの状態で何を出すべきかユーザ視点で考える

neccoのデザイナー採用課題の話

neccoの採用

  • デザイナー採用強化している
    • 業務拡大
    • 休職予定のメンバー
    • 2年間採用してなかった
  • 募集
    • 自社サイト経由のみ
    • 2024/10/1-31の期間で40人応募
  • 情報発信
    • 制作実績の公開50件超
    • SNS
  • 採用課題
    • 架空の企業の新規サービスサイト作成
      • 1ヶ月かけて
      • PC/スマホなどしっかりと
      • プレゼンしてフィードバックをもらって3稿まで
      • 質問のやり取りとかもするので実際に働く特の想像がつく
      • 40名中5名通過
    • 各種面談して残り3名

映像制作の趣味も全力で? テレビ番組出演にいたった裏話

  • 池田泰延さん

映像制作でのテレビ出演

  • タイムラプス動画
    • 定点で動画を取ってスピードをあげて再生
    • 飛行機が空港に着陸していく様子がバズってテレビにも出ることになった

33,000ページ・編集者720名 - 大規模教育サイトリニューアルの舞台裏

  • カイト(Kite)さん

「Repro Tech Meetup: Webパフォーマンス」に参加してきました

103 Early Hints

  • Tatsuki Sugiuraさん

1xxのstatus code

  • 100番台はリクエストとレスポンスが1:1じゃない
  • 仕様は昔からある
    • 100 Continueとか101 Switching ProtocolsとかはHttp1.1の1997年
    • 103 Early Hintsは2017年
  • 103はserver pushで実現できなかったクライアント手動の先読み
    • server pushはすでに持ってるのを送ったりとかなってた
    • linkのpreloadやpreconnectの対象を返す
  • SPAではないHTMLを返すようなケースではリクエストしてからHTMLを受け取るまでクライアントは暇
    • その間にEarly Hintsを返してそれをもとに必要なリソースをとる
    • レスポンスが多段になる
      • 先に返す103と本体の内容
  • 使うために
    • 103は誰が返すか
      • クライアントから多段に中継されてサーバに届く
      • オリジンが返すのが分かりやすい?
        • フレームワークが対応してるか
        • 中継されるところ全部通して返してくれるか
      • そもそもクライアントは対応してるか
        • モダンブラウザは対応してる
      • 一番手前のCDNで返すなら途中は気にしなくてもいい
        • 返すものを道知るか
        • 対応してるのはCloudFlareくらい?
    • 何をhintsとして返すか
      • LCP画像も送りたいが判断するのは難しい
        • 処理が終わらないと何になるかわからないがそのタイミングでは遅い
      • 決まった最低限のアセットは返す?
      • 機械学習でも使って判断する?
      • 実データ集めて判断する?

CLSの基本のき

  • Ryoma Shindoさん

CLS

  • ユーザが予期しないタイミングでレイアウトシフトする量をスコア化した指標
  • CoreWebVitalsの1つでSEOにも影響あり
    • Lighthouseのスコアだと25%を占める
  • スコア
    • シフトした画面内に占める割合と移動距離でスコアが決まる
  • 計測方法
    • PageSpeedInsight
      • フィールドデータとラボデータを確認できる
    • Layout Instability API
      • PerformanceObserverでデータが見える
      • 割り込んできた要素ではなく動いた要素が取れる
  • 要因
    • 画像に高さや幅がない
      • 固定値指定できないならmin-width/min-heightでも影響を小さくできる
        • メディアクエリを組み合わせるとかも
      • width:100%/height:autoのような時はaspect-ratioで比率を指定するといい
        • うまくいかない時はmin-heightでも
    • jsで要素が後から追加される時
      • 画像のようにwidthなどで高さを確保
      • 差し込まずに重ねて浮かせるとか
      • FVに入らないようにするとか
      • サイズがわからない時は最大最小を確保して影響を小さく
    • Webフォント
      • 使わなくていいなら使わない
      • CLSへの影響は小さいから気にしないとか
      • preloadではやくロード
    • BFCacheをなるべく使う
    • 初期表示を作るまでスプラッシュスクリーンで隠してしまうとか・・?

ウェブフォントとパフォーマンス

  • Masataka Yakuraさん

ウェブフォントは遅い?

  • 遅いと言われる
    • 日本語だと特に
  • どの辺りが遅いのか
    • フォントファイル
      • ファイルを読み込むからその分遅くなる
      • 複雑な字形をど大きくなる
      • グリフ数が多い言語だと大きくなる
    • ダウンロードされるまで
      • CSSに指定する
      • 読み込んですぐダウンロードされるわけじゃない
      • htmlの中にマッチした文字があると始まる
        • ウエイトやスタイルもまっちしないといけない
      • preconnectで事前にコネクションを作る
        • GoogleFontsのレスポンスヘッダーにLinkヘッダーで自動で入ってる
      • preloadで事前によみこむ
        • as="font"で読み込まないとフォントとして使われない
        • crossoriginがないと
        • preloadは強制だから使われない可能性もある
    • ダウンロード
      • fetchpriorityはフォントはもともと高め
    • ダウンロードされた後
      • ブラウザはフォントがダウンロードされるまで少し待ってくれる
      • 待ちきれなくてその後に完了したりすると動きが目立ってしまう

CDNとうまく付き合う

  • Shohei Tanakaさん

CDN

  • なぜCDN
    • アセットの配信効率よく
    • キャッシュして効率よく
    • セキュリティ対策
  • よくある運用
    • 導入度にあまりメトリクスを見てない
    • アラートslack通知してるけど見ない
    • キャッシュのパージ作業はする
    • CDNの障害なんてめったに踏まない
  • CDNのパージ
    • パージは負荷が高い処理
    • ratelimitがある
    • 正規表現でファイルの指定はできないものが多い
    • invalidateで期限切れ状態に
      • 次回再検証が走る
    • deleteでキャッシュを消す
    • 一気にパージしてしまうとオリジンが耐えられなくなるので注意
      • 複数回に分割するとかできるといい
      • キャッシュタグ対応してればで分割パージできる
      • キャッシュタグでグループ化できる
  • CDN障害
    • 小さい障害は割と起きている
    • いろいろなquotaに引っかかってることもあるので問い合わせ前に見ること
    • 問い合わせる時はしっかり体裁を

パフォーマンスを上げる「UXライティング」

  • nagaikazufumiさん

「~Tech-Front Meetup~ 一歩先のフロントエンドへ」に参加してきました

出前館web/bffにおける品質改善の取り組み〜Biomeの導入〜

Biomeの導入

  • 技術スタック
    • FE: Next/Apollo Client/Tailwind
    • BFF: GraphQL/Apollo Server
  • 課題
    • プロジェクトが大きくlintに時間がかかるようになった
    • ESLint v8がEOL
      • FlatConfig対応が必要
    • -> Biomeの検証へ
  • Biome導入
    • ESLint+PrettierをBiomeへ
    • 設定の移行ツールがある
      • 手直しは必要
    • 20秒かかってたのが1秒程度になった
    • ESLintのすべてのルールに対応してるわけではない
    • Tailwindのプラグインが未対応
      • 現状はESLintも共存させてる

フロントエンド設計にモブ設計を導入してみた

モブ設計

  • 個人で設計することの課題
    • イデアの幅が限定的になる
    • 孤独とプレッシャーがある
    • 背景共有の難しさ
  • モブプロを普段やっていた
    • 設計でもモブプロのようにやることを思いついた
  • モブ設計
    • 1つの設計を複数人で
    • モブプロのようにドライバー/ナビゲーター
    • 狙い通りの効果は出た
    • リソースコストとスケジュール調整が難点

フロントエンド開発を変える!ステートマシンによる予測可能なUI設計

  • テックタッチ株式会社 松田さん

ステートマシン

  • 状態とその遷移のモデル
    • 状態に対してどんなアクションを与えるとどんな状態に遷移するか
  • 実装方法
    • useStateだけで実装するとUIの状態とデータの管理が混在していく
      • ありえない組み合わせも存在する
      • どんな状態があるのか予測しづらい
    • useReducerを使ってReduxっぽくやっていく
    • XStateというライブラリを使うと簡略化できる
      • stateをjsonで定義できる
      • VSCode上で図示することもできる
      • 図で修正してコードに反映とかも

複雑性の高いフォーム

  • 株式会社RightTouch 齋藤さん

フォーム

  • React Hook Formを使ってる
  • フォーム個別にuseFormした方が独立してていい
    • でもフォームをまたいだバリデーションなど不便なケースも
  • アプリケーション全体でuseFormで囲う
    • useFormContextを使えばバケツリレーも不要

4年間でのフロントエンドリアーキテクチャの変遷

  • 株式会社ナレッジワーク よしこさん

アーキテクチャの変遷

  • 初期モノリス -> モノリス拡張 -> アプリケーション分割
  • 個人でTODOを日々積み重ねて管理
  • 優先度作ってロードマップ作ってやっていく
  • 機能改修でちょうど負債があるところだったら前段にリファクタリングも置くとか