サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
今年の「かわいい」
blog.cybozu.io
こんにちは。DOGO(どうご)チームのまっつー(@ryo-manba)です。DOGO チームでは、「サイボウズ Office」 のフロントエンド刷新を行っています。この記事では、フロントエンド刷新を進めていく中で取り組んでいるアクセシビリティ改善について紹介します。 ※ この記事は Cybozu Frontend Advent Calendar 2023 の 1日目の記事です。 DOGO とは 刷新前の問題点 アクセシビリティ改善の取り組み 輪読会の実施 OSS をフル活用したコンポーネント実装 改善事例:DatePicker Poca11y チームとの協力 おわりに DOGO とは DOGO は、サイボウズ Office のフロントエンドを刷新するプロジェクトです。独自のスクリプト言語で書かれた MPA(Multi-Page Application)を、Next.js の App Rou
こんにちは、サイボウズでスクラムマスターとして働いている村田です。 2023年8月から kintone の新規機能を開発するチームに移動し、週3日(火水木)勤務で専任スクラムマスターとして活動しています。 それ以前の約1年間は、kintone のヘッダーを React 化するチームでスクラムマスターとエンジニアの役割を兼務していました。 活動紹介 blog.cybozu.io 以前所属していたチームはゴールを達成して現在は解散しています。この活動で得られた学びを Spotify で配信しているので、お時間があればこちらも聞いてみてください。 open.spotify.com 今回は前と今のチームでスクラムマスター兼務と専任両方の経験を通して得た違いを共有したいと思います。 兼務時代 スクラムマスターとエンジニアの兼務を始めた理由 エンジニアとスクラムマスターの兼務を始めたのは今から2年前で
こんにちは。 フロントエンドエキスパートチームの BaHo です 2023 年 10 月 31 日(火)にサイボウズのフロントエンドエンジニア主催で第一回BARフロントえんどうを開催しました。 本記事では、当日の様子やセッションについて紹介します。 BAR フロントえんどうとは BARフロントえんどうは Web フロントエンドのトピックをテーマに、登壇者や参加者の間で情報を共有することで知見を深めてもらおうというコンセプトの勉強会です。 第一回は「フロントエンドリアーキテクト」をテーマとして開催しました。 セッション内容 今回はメインセッションとして Japan Node.js Association の古川さん、株式会社出前館の白石さん、株式会社サイボウズの Nokogiri さんのお三方に発表していただきました。 発表間に設けた質疑応答タイムでは多くの参加者から質問があり、どの発表も盛
ご覧いただきありがとうございます。 涼しくなってきましたが、皆様いかがお過ごしでしょうか? 広告が関係ないシステムはサードパーティクッキーへの影響はないと思っていたので寝耳に水だったのですが、 社内システムにて、サードパーティクッキー規制影響するケースが判明しました。 システムへの影響が大きいことが分かったので、現象および影響についてまとめます。 みなさまの対応状況や誤った記述の指摘など、コメントやSNSコメントなどで教えていただけますと大変参考になります。 サードパーティークッキー概説や規制の経緯はインターネット上に詳しく書かれたものがあるのでそちらを参照してください。 本格化するサードパーティ・クッキー規制 Firefoxではサードパーティクッキー規制がデフォルトでロールアウトされています。 Safariは以前よりサードパーティクッキーを規制していました。Chrome, Edgeでも規
こんにちは、kintoneチームの川向です。 ソースコードハッシュ値計算ツールであるsverを導入してCIの高速化を行ったので、その紹介をさせてください。 この仕組みにより、通常は1時間かかるCIの実行時間が最善のケースでは20分程度に短縮可能になりました。 導入前の課題 解決方法の検討 sverを使ったテストのスキップによるCI高速化 kintoneでのsverの利用方法 sver設定ファイルの書き方 キャシュの保存先(GitHub Actions Cache、Amazon S3) sverを使ったジョブの書き方 sver情報生成ジョブ: ハッシュ生成とキャッシュの存在確認 ビルドジョブ: 依存ファイル以外に依存しないことの確認 テストジョブ: ジョブ成功後にキャッシュ保存 下流ジョブのifの書き方 結果 課題と今後の展開 まとめ 導入前の課題 kintoneのCIの大まかな構成は以下の
こんにちわ。フロントエンドエキスパートチームの@nus3_です。 最近、社内用の npm パッケージを作る必要があり、そのパッケージは依存が少なく、実装もシンプルだったので、npm パッケージの作成には Deno と dnt を採用しました。 dnt とは dnt は Deno で実装したモジュールを CJS、ESM に対応した npm パッケージに変換してくれるビルドツールです。 使い方も簡単で、次のように dnt が提供するbuild関数にエントリーポイントや出力先などの必要な情報を渡すだけです。 import { build } from "https://deno.land/x/dnt@0.38.1/mod.ts"; await build({ entryPoints: ["./mod/index.ts"], // Denoで実装したモジュールのエントリーポイント outDir:
Garoon Hanamiチームの土屋(@tsuchikazu)です。以前、この記事 Garoon開発チームを紹介します! 2023 でGaroonの開発チームの全体について紹介しました。今回は、その中の1つであるHanamiチームについて紹介します。 PHP Conference 2023でもHanamiチームでの取り組みを、チームメンバーが発表しました。そちらもぜひご覧ください。 speakerdeck.com Hanamiチームとは リリースプロセスを改善するチームです。現在、Webエンジニア 4人、QAエンジニア2人の6人(そのうち他チームとの兼務が3人)で構成されています。 Garoonは20年以上前にパッケージ製品からスタートし、その後クラウド版のサービスの提供も開始しました。クラウド版のリリースプロセスも、パッケージ製品時代のプロセスを模倣しており、以下のような課題を抱えてい
DOGOプロジェクトのマスコット こんにちは。サイボウズOffice開発チームの西谷です。 昨年より、私たちは”DOGO”と銘打ち、サイボウズOfficeのフロントエンド部分をNext.js App Routerを用いて刷新しています。 本ブログではこの刷新プロジェクトの概要やこれまでの取り組みについてご紹介します。 プロジェクト発足の背景 刷新の方針 刷新後のサイボウズOfficeを支える技術 アプリケーションフレームワーク モニタリング テスト インフラ CI・CD これまでの取り組み Next.js側で画面のルーティングを制御する リリースパイプラインの構築 全画面共通部分の実装 今後の取り組み メンバー募集しています! プロジェクト発足の背景 サイボウズOfficeはこれまで、パッケージソフトウェアとしていくつものバージョンを重ね、クラウドサービスへ転身し、時代に合わせて様々な形に
こんにちは。サマーインターンシップ2023のKubernetes基盤開発コースに参加した、高橋 (TAK848) と花田 (hanapedia) です。 Necoチーム では現在コンテナレジストリの可用性を高めるため、コンテナレジストリミラーをクラスタ内にデプロイしています。 しかし、クラスタが数百台程度まで大きくなり、レジストリミラーからコンテナイメージを同時に大量にPullするようになりました。 そのため、イメージの取得に数十分もの時間がかかってしまう問題が起きました。 この問題に対処するため、Spegel というステートレスなレジストリミラーの動作検証を行い、PodのイメージのPullのタイミングを制御するカスタムコントローラー cat-gate を開発・検証しました。 その成果を紹介します。 課題 KubernetesではPodを起動する際、コンテナイメージを取得する必要があります
こんにちは! 2023年新卒エンジニアの伴野・谷・和渕です。 サイボウズでは、2023年エンジニア新人研修の集大成として、チームに分かれてソフトウェア開発を行う実践演習が行われました。この記事では、各チームがどんな成果物を作成したのかを、チームごとにご紹介したいと思います。 エンジニア新人研修全体については以下の記事で詳しく紹介されています。ぜひそちらもご覧ください。 blog.cybozu.io 概要 実践演習では3チーム(「チーム gogo!」・「明日から」・「TEMBIN」)に分かれ、それぞれ一つのソフトウェアを2週間で開発しました。「サイボウズ流チーム開発を新メンバーだけで実践できた」「未知見の課題に対してどう行動すればよいか考えるきっかけになった」というコンセプトのもと、自由な発想で取り組みました。 チーム gogo! チーム gogo! では、演習開始時に Mastodon や
こんにちは!kintone フロントエンドリアーキテクチャプロジェクト (フロリア) で、エンジニアとして活動している @nissy_dev です。 以前投稿したチーム紹介記事の中で、コンポーネント単位での共通ヘッダー部分の React 化に取り組んでいることを紹介しました。それから約半年の期間を経て、React 化した共通ヘッダーを全ページへ適用することができました。kintone の7月版のアップデート情報にも記載されています。 今回は、このリリースの流れや技術的な詳細について紹介したいと思います。技術的な内容については、昨年の 12 月にマイクロフロントエンドに挑戦しているという記事を公開しているので、マイクロフロントエンドを実際に適用してみた感想などにも触れたいと思います。 目次 React 化した共通ヘッダーの全ページへの適用 リリースの詳細な流れ Closure Tools に
主催のkoba04による写真 こんにちは、フロントエンドエンジニアの@shisama_です。 6月30日にサイボウズ東京オフィスで開催された「Cybozu Frontend Day 2023」の資料と開催レポートを公開します。 「Cybozu Frontend Day 2023」は、サイボウズのフロントエンドエンジニアが集まりフロントエンドに関する知見を共有する社内イベントです。 発表資料 発表資料は以下の通りです。発表者が公開している一部の資料については、発表者の許可を得て掲載しています。 Pages RouterとApp Routerでのi18n対応の違い 発表者: @nissy_dev zenn.dev 誰でも簡単⁉️👀 絵文字ができるまで😃👍 発表者: @oguemon_com speakerdeck.com Node Streamでメモリ性能改善、そしてWeb Stream
こんにちは。シニアスクラムマスターの天野 @ama_ch です。 サイボウズの開発組織において、今後の成長を加速させるためには、組織の基本単位をスクラムチームのような自律的な小さなチームにしてスケールさせることが非常に大切だと考えています。サイボウズは比較的スクラムが普及している組織ではありますが、組織内のすべてのチームがスクラムを採用しているわけではありません。 フレームワークとしてスクラムを採用するかどうかはチームの自由です。しかし、健全なチーム環境を整えることはすべてのチームにとって重要です。チームやチームワークに関する情報は巷に多く存在しますが、我々のようにすでにある程度の規模で活動しているプロダクト開発組織で、チーム環境を整えるために実践的に使える情報がないことが悩みでした。 そこで、これまでのチームに関する学びと実践を踏まえ、サイボウズの開発組織の文脈において、スクラムを実践し
こんにちは。kintoneチーム所属Androidエンジニアのトニオ(@tonionagauzzi)です。 本日は、社員の誰でも気軽に情報発信できるようにするにはどういった仕組みやマインドがあるとよいのか、一部の社員で話し合ったことを共有します。 背景 話し合った内容 Q&A 意見 おわりに 背景 サイボウズでは、技術ブログの「Inside Out」やコンテンツメディアの「サイボウズ式」など、社員の誰でも積極的な発信ができる環境をさまざまな形で提供しています。 しかし、いざ自分で発信するとなったら、サイボウズの社員にはまだまだ心理的ハードルがあるようです。 私はキャリア入社1年目ですが、前職時代は気軽に個人発信や会社のQiita Organization、技術書典などで発信をしてきました。 もっともっと発信をしたい!という想いを持ってサイボウズにやって来ましたが、数ヶ月経ってみると、会社の
開発本部 People Experienceチーム オンボーディング担当の久宗(@tignyax)です。 2023年もエンジニア新人研修を行いましたので、軽い紹介と、講義資料および一部講義動画を公開いたします。 2023年のエンジニア研修について コンセプト 今年のエンジニア研修のコンセプトは以下です。 (例年のコンセプトからアップデートを行いました。) 『新入社員メンバーに、"自信を持ってチームにジョインできた!" 』 コンセプトを実感できるように、以下のことを学んだり体験してもらえるようなエンジニア研修を設計していきました。 開発・運用本部のチーム/人や体制、風土/文化 これからのチーム活動となる前提、共通の知識 具体的な方法としては以下のコンテンツになります。各コンテンツにもそれぞれコンセプトを設定しました。 学習コンテンツ(リアル講義・動画視聴) チーム体験 配属面談 実践演習 ス
こんにちは、サイボウズの永田です。 私は、サイボウズの開発本部、アジャイル・クオリティで、アジャイルの品質を探求する活動をしています。 この記事では、2023年3月9日、JaSST Tokyo 2023のテクノロジーセッションで発表させていただいた内容を、より解説を入れながら紹介します。 結合テストの自動化にQAはどうかかわっていったか 今回取り上げる事例では、kintoneのフロントエンド刷新プロジェクト(フロリア)で結合テストの自動化を決定した際に、QAメンバーがどのように関与し、困難に直面しながらも、信頼性の高いテストコードを作成するに至るまでの過程をご紹介します。 フロリアについては次のブログをご覧ください。 blog.cybozu.io テストのポリシー ~このミッションにおけるQAのチャレンジ~ フロリア内で新しく3つのチームが立ち上がった際、各チームのテスト戦略の中心を、自動
はじめに こんにちは、モバイルエンジニアのオジマです。 Swiftにはバージョン 5.1からProperty Wrapperという強力な言語機能が追加されています。SwiftUIの@Stateなどでも馴染みが深いのではないでしょうか。 Property Wrapperは@StateなどのすでにAppleが用意しているもの以外にも、自身でオリジナルなProperty Wrapperを作成し利用することができます。私が携わっているプロダクトでも自作のProperty Wrapperを利用しています。 今回、サイボウズのiOSプロダクトで利用している自作のProperty Wrapperのうち2つをOSSとして公開しました。 この記事では、公開したそれぞれのProperty Wrapperの利用方法について紹介します。 CachePropertyKit 概要 CachePropertyKitはi
こんにちは。新規IAMプロダクトでフロントエンドアーキテクトを担当している@shisama_です。 この記事では、開発スピードを上げるためにGitHub Actionsを使ってプルリクエストごとにレビュー用の検証環境をGoogle Cloud Run(以下、Cloud Run)に構築する仕組みについて紹介します。 今回紹介する内容のサンプルのリポジトリはこちらになります。 github.com この仕組みは業務委託でお手伝いいただいていた@chimame_rtさんが考案し設計してくれました 👏 はじめに フロントエンドチームが抱えていた課題 プルリクエストごとに Cloud Run に検証環境を構築する Step 1. プルリクエストにラベルを適用して GitHub Actions を起動 Step 2. Next.js のビルド Step 3. Google Cloud の認証 Ste
サムネイル こんにちは、フロリアでエンジニアとして活動している irico です。 現在 kintone ではフロリアというプロジェクトの中で、Closure Tools から React への移行作業に取り組んでいます。 今回は、そのフロリアのチームの 1 つである Reactone チーム が採用した「Storybook をフル活用したテスト手法」についてお話します。 Storybook によるテストアプローチ Storybook の v6.4 から play 関数が導入され、v6.5 から Interaction tests が可能になりました。 これによって Story 上でテストを実行するだけでなく、実行したテストの動作確認がブラウザ上で可能になりました。 今までは Jest や Vitest 上で Testing Library を利用する際、DOM 操作の視覚的な確認が難しく
こんにちは、Cy-PSIRTの久保です。本記事では報奨金制度の通年実施のご案内と、昨年分の振り返りについてお知らせしたいと思います。 サイボウズ脆弱性報奨金制度とは サイボウズ脆弱性報奨金制度は、弊社サービスに存在する脆弱性を早期に発見・改修することを目的とする制度です。対象製品の脆弱性を報告いただいた方に、謝礼として報奨金をお支払いしています。検証に際して参加者ごとに専用の環境を提供しており、本番環境への影響を気にすることなくご参加いただけます。 cybozu.co.jp 脆弱性報奨金制度 (通年) 期間 2023年4月21日(金) から通年で実施 今年から年度間の休止期間を挟まず、通年での実施となります。 ルール 脆弱性報奨金制度のルールは脆弱性報奨金制度ルールブックおよび、脆弱性認定ガイドラインをご覧ください。また、対象製品はサイボウズ脆弱性報奨金制度の「対象となる製品・サービスおよ
サムネイル こんにちは!kintone のフロントエンド刷新プロジェクト(フロリア)の@nkgrnkgrです。 フロリアでは、kintone のフロントエンドの ClosureToolsで書かれたコードを React に置き換えています。 本記事では フォーム画面の UI の状態管理に使うライブラリを選定する際に、どのような検証と意思決定を行ったかについて紹介します。この記事が UI の状態管理を行う際に何かの参考になれば幸いです。 kintoneのアプリ作成フォーム はじめに アプリ作成フォーム画面 アプリ作成フォーム画面とは? ユーザーの操作と状態管理で考慮すべきこと ライブラリを選ぶ上での前提 今回の選定で考慮したライブラリの種類と特徴 3つのライブラリの特徴 Redux(ReduxToolkit) について Zustand について Jotai について 利用状況とプロダクト要件を
こんにちは。SRE/データストアチーム の飯塚です。 私たちのチームではデータベースを代理で操作したり情報を取得したりするサービスをいくつか作り、それをプロダクトチームが利用できるように gRPC 経由で提供しています。ところで、ある日突然「分散トレーシングを活用していくことになったので、あなたのチームのサービスも対応させてください」とお願いされたらどうすればよいでしょうか?私はこれまでにいろいろなカンファレンスで分散トレーシングや OpenTelemetry についての講演を聞いていたので、理念は理解した、便利そうだ、導入してみたい、と思ったことは何度かありました。しかし実際に導入しようとして SDK のドキュメントを開いてみると、理解しなければいけない(ように見える)概念や、使い方をマスターしないといけない(ように見える)API の数に圧倒されてしまい、後回しにしてしまっていました。
初めに kintoneチームの前田です。 kintoneはサーバーサイドがJavaで書かれていて、最近ではこれが結構な分量になっており開発上の障壁となっています。 その解消のため、kintoneチームではコード分割を進めています。 今回は、コード分割の目的や具体的方針、取り組みをチームでうまく進めていくための工夫、 これまでに得られたことや今後の見通しについてご紹介します。 コード分割とは kintoneがリリースされてから10年経過し、その間に継ぎ足し継ぎ足しでコードが追加されてきました。 最近ではコード行数が35万行を超えてなお増えており、それに伴い複雑性も増している印象があります。 このまま何もしないと、コードの調査や影響範囲を確認するのがどんどん大変になっていったり、 新しくチームに参加した人がコードを把握するのにいままで以上に時間がかかってしまうことが懸念されます。 このような問
こんにちは。シニアスクラムマスターの天野 @ama_ch です。 サイボウズ開発本部では、2022年5月に大規模な組織変更を実施しました。詳細は下記の記事をご覧ください。 blog.cybozu.io 今回の組織変更では、職能ラインと人材マネージャーを整備した結果、新たにスクラムマスター職能が誕生しました。 本記事では、スクラムマスター職能を作った背景や、現在の取り組みを紹介します。 サイボウズ開発本部におけるスクラムマスター職能の定義 サイボウズ開発本部におけるスクラムマスターの責務は、「チームを健全に保つことに責任を持つ役割」と定義しました。2020年版スクラムガイドには、スクラムマスターは「スクラムガイドで定義されたスクラムを確⽴させることの結果に責任を持つ」と書かれていますが、組織のすべての人がスクラムチームに所属しているわけではないため、チームがスクラムをしているかどうかは職責に
開発本部 People Experience チーム内にあるコネクト支援チーム所属の西原 @tomio2480 です。 2023 年が明けてすぐ 1/10(火) から 1/13(金) に開催された「 Regional Scrum Gathering Tokyo 2023 」にサイボウズはシルバースポンサーとして協賛しました。これに関連して Day2 にスポンサーセッションを行いましたので、そのレポートを記します。 サイボウズのスクラムマスター育成・評価事情を語る会 開発本部では昨年末にあった組織体制の変更に伴い、スクラムマスター職能に約 15 名のメンバーが所属することになりました。これにあわせて、スクラムマスターの成長支援や評価の体制を今回登壇する 3 名が整備しました。本セッションは新たに整備された新体制について、対談形式のセッションでした。実際に公開されたセッション概要は、以下 Co
初めに こんにちは! kintone開発チームでソフトウェアエンジニアをしている池田 (@motacapla) です。 今回が初投稿となります、よろしくお願いいたします! kintoneではHTTPリクエストのURLをルールベースで処理して書き換えたり、特定の属性値を設定するため UrlRewriteFilter (以降urlrewriteと呼びます) という機構を利用していました。 しかしながらurlrewrite自体は既に10年以上リリースがなく、複数のルールに当てはまるリクエストも存在しており、メンテナンスや学習のコストが高まっている問題がありました。 このurlrewriteで実現している処理は Spring Frameworkの標準的な機能で代用することが出来るため、有志の方が集まって2022年夏頃から移行作業を進めていました。 移行時の課題と解決策 今回の移行では、主に3つのポ
1. はじめに こんにちは!kintone 開発チーム所属モバイルソフトウェアエンジニアのトニオ(@tonionagauzzi)です。 Cybozu Advent Calendar 2022 の24日目の記事です。 私が所属しているkintoneモバイルチームではモブプログラミングが浸透しており、開発作業の7割以上をオンラインで画面共有するやり方でモブプロしています。 そのモブプロに関する記事ですが、今回は、既にモブプロをやっているkintoneモバイルチームに新人の私が入って感じた抵抗感についてです。 私が9月に入社してから4ヶ月間の抵抗感と乗り越え方について紹介することで、次に来る新人さんを「大丈夫だよ」と後押しできれば幸いです! ※ 本記事におけるモブプロとは、一般的なモブプロではなく、kintoneモバイルチームが採用しているモブプロのことを指します。 2. モブプロの基本 モブプ
この記事は Cybozu Advent Calendar 2022 の20日目の記事です。 はじめまして、QAエンジニアのなかたです。 私はkintoneのフロントエンドリアーキテクチャプロジェクト(フロリア)の共通ヘッダー部分のReact化を担当するAppShellチームに参加しています。 AppShellチームはスクラム開発を採用したクロスファンクショナルなチームです。今回はチームに参加して取り組んだこと、感じたことについてお話ししたいと思います。 フロリアの詳細、AppShellチームの詳細については次の記事をご覧ください。 エンジニアとの距離が遠かったテスター時代 私は以前テスターとして従事し、テストの設計と実施を中心に行っていました。 テスターとエンジニアは拠点が異なり、直接コミュニケーションをとる機会はほとんどありませんでした。 仕様や挙動に関する疑問が出たときのやりとりをテキ
フロントエンド刷新プロジェクトの開発サイクルを加速するデプロイパイプラインの改善 この記事は Cybozu Advent Calendar 2022 の 19 日目の記事です。 18 日目はこちら → チームメトリクスと感情データを活用した「ふりかえり」の手引き 20 日目はこちら → エンジニアとの距離が近くなっていいことたくさんだったQAの話 こんにちは!! kintone フロントエンドリアーキテクチャプロジェクト (フロリア)のAppShell チームでプロダクトオーナーをしている tasshi です。 kintone フロントエンドリアーキテクチャプロジェクト (フロリア)、およびAppShellチームについてはこちらの記事をご覧ください。 今回はフロリアの開発で利用しているテスト環境へのデプロイパイプラインを紹介します。 目次 フロントエンド刷新プロジェクトの開発サイクルを加速
次のページ
このページを最初にブックマークしてみませんか?
『Cybozu Inside Out | サイボウズエンジニアのブログ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く