アクセシビリティの改善のために React Aria を活用しています - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは！DOGO プロジェクトでソフトウェアエンジニアとして活動している @nissy_dev です。 DOGO プロジェクトでは、React Aria を活用してアクセシビリティの改善を行っています。 今回の記事では、React Aria を国内にもっと広めて行きたいということで、React Aria を利用することに決めた理由を振り返りつつ、React Aria について簡単に紹介します。 目次 OSS を活用した効率なアクセシビリティの改善 ライブラリの選定 React Aria の概要 Next.js App Router との相性 終わりに OSS を活用した効率なアクセシビリティの改善 DOGO プロジェクトでは、フロントエンドの刷新を進めていく中でアクセシビリティの改善についても取り組んでいます。 具体的な事例などについては、次の記事も参考にしてもらえればと思います。 各
サイボウズ Office のフロントエンド刷新におけるアクセシビリティ改善の取り組み - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。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
開発チーム作成ガイドを公開します - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。シニアスクラムマスターの天野 @ama_ch です。 サイボウズの開発組織において、今後の成長を加速させるためには、組織の基本単位をスクラムチームのような自律的な小さなチームにしてスケールさせることが非常に大切だと考えています。サイボウズは比較的スクラムが普及している組織ではありますが、組織内のすべてのチームがスクラムを採用しているわけではありません。 フレームワークとしてスクラムを採用するかどうかはチームの自由です。しかし、健全なチーム環境を整えることはすべてのチームにとって重要です。チームやチームワークに関する情報は巷に多く存在しますが、我々のようにすでにある程度の規模で活動しているプロダクト開発組織で、チーム環境を整えるために実践的に使える情報がないことが悩みでした。 そこで、これまでのチームに関する学びと実践を踏まえ、サイボウズの開発組織の文脈において、スクラムを実践し
今日から分散トレーシングに対応しないといけなくなった人のための opentelemetry-go 入門 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。SRE/データストアチーム の飯塚です。 私たちのチームではデータベースを代理で操作したり情報を取得したりするサービスをいくつか作り、それをプロダクトチームが利用できるように gRPC 経由で提供しています。ところで、ある日突然「分散トレーシングを活用していくことになったので、あなたのチームのサービスも対応させてください」とお願いされたらどうすればよいでしょうか？私はこれまでにいろいろなカンファレンスで分散トレーシングや OpenTelemetry についての講演を聞いていたので、理念は理解した、便利そうだ、導入してみたい、と思ったことは何度かありました。しかし実際に導入しようとして SDK のドキュメントを開いてみると、理解しなければいけない（ように見える）概念や、使い方をマスターしないといけない（ように見える）API の数に圧倒されてしまい、後回しにしてしまっていました。
フロントエンド刷新プロジェクトを成功に導くためのテスト手法の紹介 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、フロリアでQAエンジニアをやっている中園です。 現在サイボウズではkintoneのフロントエンドリアーキテクチャプロジェクト（フロリア）と称して、Closure Tools から React へと置き換えるプロジェクトが進行中です。 今回は、フロリアのチームの1つであるMiraチームのテスト手法について紹介します。 フロリアの詳細については次の記事をご覧ください。 フロリアについて フロリアでは、次のような構成でそれぞれのチームがオーナーシップを持って活動しており、テストの方針はチームごとに決めています。 プロダクトオーナー: 1名 エンジニア: 3-4名 QA: 1名 スクラムマスター: 1名 フロリアのチーム構成 チームのミッションに合わせたテストの目的 Miraチームでは、kintoneのデザインやふるまいを変えずに、利用者に気づかれない形でReactに置き換えるというミ
フロントエンド刷新のために DevTools を作って開発を捗らせる - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、フロントエンドエキスパートチームの麦島(@mugi_uno)です！ 2021年5月に新しくメンバーとして加わり、富山からフルリモートで働いています。 最近はチームメンバーに誕生日を祝ってもらって嬉しかったです🎉 さて、以前に "kintoneのフロントエンド刷新に向けた取り組み"*1 というエントリでもご紹介しましたが、現在サイボウズ社内では kintone で利用するフロントエンドの技術スタックを刷新する取り組みを進めています。 その一環として、 "Closure Tools DevTools" という Google Chrome 向け拡張機能を作成しました。 作成した DevTools は kintone に限らず利用することができるため、Chrome ウェブストアで公開しています。 chrome.google.com ソースコードも次のリポジトリでご確認いただけます。
kintoneのフロントエンド刷新に向けた取り組み - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。kintone開発チーム Webエンジニアの村田です。 本記事では kintone のフロントエンドの刷新をはじめるに至った経緯と、その取り組みについて紹介します。 はじめに なぜフロントエンドを刷新するのか 小さくはじめる Proof of Concept リリース戦略を考える 移行前と移行後の技術スタック 既存資産の再利用 Closure Library製の複雑なコンポーネントを再利用する E2Eテストを再利用する スタイルを再利用しない 開発体制 フロントエンドエキスパートチームの支援 アクセシビリティチームの支援 生産性向上チームの支援 これからの活動 おわりに はじめに 現在 kintone 開発チームでは、フロントエンドの開発に使用している Closure Tools (Closure Compiler、Closure Library、Closure Templat
魔窟と化した全文検索サーバーとふっかつのじゅもん - Cybozu Inside Out | サイボウズエンジニアのブログ
サイボウズのクラウド黎明期から運用し続けていたSolrサーバーを Elasticsearchに置き換えるプロジェクトが先日完了しました。 プロジェクト完了報告もかねてプロジェクトのあらましを公開したいと思います。 はじめに このプロジェクトの主軸は『魔窟と化したレガシー技術をどう捌くか？』になります。 このプロジェクトの報告をする前に、いくつかエクスキューズをさせていただきます。 クラウド黎明期を支えてくれたSolrには畏敬の念に近い感謝をもっています レガシーな技術に対してマウントやディスリスペクトの意図はありません 魔窟にかかわることになってしまった人に対して負の感情は一切ありません 今回の採用している構成はElasticsearchのあるべきアーキテクチャではありません 今後、Neco 環境への移行を通して継続的に改善していきます サイボウズでのSolrの使い方と用語説明 サイボウズ
styled-componentsの採用と既存資産を捨てた理由 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。フロントエンドエキスパートチームの@nakajmgです。 私が所属しているフロントエンドエキスパートチームでは、現在 kintone の脱レガシーの一環として React + TypeScript 化に取り組んでいます。この取組の中で Scss で定義されている既存のスタイルを styled-components で書き直していくという決定をしました。 今回は styled-components の採用を決定するまでの過程や、既存の Scss ファイルの扱いについて検討した内容などを紹介します。 スタイル定義方法の検討 kintone にはユーザーが JavaScript でカスタマイズできる機能があり、ユーザーが行っているカスタマイズの中には、DOM 構造や CSS のクラス名に依存しているものもあります。このようなカスタマイズはサポートの対象外ではありますが、ユーザーにでき
GitHub Sponsorsを使って「企業」として寄付をした話 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。OSS推進チームの平野（@shisama_）です。 2020年12月にGitHub Sponsorsを利用して企業からOSSや個人へ寄付できるようになりました。 www.publickey1.jp この記事では企業からOSSや開発者へGitHub Sponsorsにて寄付する方法について紹介します。 社外のOSSや開発者を支援するモチベーション サイボウズでは日頃の業務でお世話になっているOSSへの寄付をしています。 tech.cybozu.io サイボウズのプロダクト開発には多くのOSSが利用されており、プロダクトの成長はOSSによって支えられています。そこで、そのOSSのおかげで事業が成長した分を還元していく「フィードバック」として寄付を行い、OSSが持続的に発展できるよう支援しています。 これまでOSSプロジェクトに対してOpen Collectiveなどのプラットフォー
TypeScript による Isomorphic な API Client 開発 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、フロントエンドエキスパートチームの @koba04 です。 本記事では、kintone の REST API を使うためのクライアントである @kintone/rest-api-client (以下 rest-api-client) の構成や工夫した点について紹介します。 本記事は rest-api-client の 1.6.0 のバージョンに基づいています。 @kintone/rest-api-client とは rest-api-client とは、kintone が提供する REST API を利用するためのクライアントライブラリです。 GitHub 上は kintone/js-sdk の Monorepo の 1 パッケージとして開発されています。 kintone/js-sdk での Monorepo 開発については下記の記事を参照してください。 https://blo
ドキュメントの文章校正には、textlintが便利 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは！ 開発部 テクニカルコミュニケーションチーム（以下、TCチーム）の原嶋です。 さてさて。 みなさん、ドキュメントの文章校正（以下、校正）ってどんな風にやっていますか？ 目視チェックでバッチリだぜ！という方も もちろんいると思うのですが、チェックポイントが多いと指摘が漏れてしまいがちですよね。そして、会社の公式文書となれば、チェックポイントはあれもこれもと山のようになります。 TCチームでも長年 校正に頭をかかえていましたが、textlint と＋αのツール を使って、校正の悩みを解決しました。 今回はその経緯をお話させてください。 校正って確認する項目がたくさん TCチームでは、サイボウズ製品のユーザーサポートコンテンツ（ヘルプやリリースノートなど）を作成しているのですが、 それらのコンテンツは会社の公式文書なので、毎回の校正でチェックする項目が多々あるんです。 校正おわったー
LernaとYarn WorkspacesでMonorepo管理 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、フロントエンドエキスパートチームの小林（@koba04）です。 本記事では、Lerna と Yarn Workspaces を使った Monorepo 管理について解説します。 Monorepoとは 本記事では、単一のリポジトリで複数のモジュールやパッケージ（今回の場合は npm パッケージ）を管理する手法を Monorepo と呼んでいます。 有名なところだと、Babel や Jest、Create React App などが後述する Lerna を使い複数パッケージを単一のリポジトリで管理しています。 他にも React も Lerna は使っていませんが単一リポジトリで複数パッケージを管理しています。 また、上記のようなライブラリ以外にも企業で利用している npm パッケージを Monorepo として管理している例もあります。下記は Shopify の例です。 pack
Cookie の SameSite 属性について - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、フロントエンドエキスパートチームの小林（@koba04）です。 フロントエンドエキスパートチームでは、日々の業務としてブラウザやライブラリの更新情報をキャッチアップして社内で共有しています。 例えば先日、CSSのプロパティである image-orientation のデフォルト値が none から from-image に変わったため、画像の Exif 情報の扱いが変更されました。 https://www.fxsitecompat.dev/ja/docs/2020/jpeg-images-are-now-rotated-by-default-according-to-exif-data/ 注： Firefox では COVID-19 の影響により、この変更は延期されました。（Chrome は予定通り 81 で リリースしています） https://blog.chromium.o
Puppeteerで不要なCSSを消す - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。フロントエンドエキスパートチームの穴井（@pirosikick）です。福岡在住で、普段は福岡のweworkで働いています。他のメンバーは皆、東京に居てリモートで仕事をしていますが、モブでわいわい開発していますし、weworkが快適すぎて、毎日楽しいです！ フロントエンドエキスパートチームでは、サイボウズの各プロダクトが抱えるWebフロントエンドの課題を解決するのが仕事の一つです。 blog.cybozu.io 最近の取り組みとして、Puppeteerで不要なCSSを消した事例を紹介します。 このブログは、6/19に福岡で開催した「Google I/O '19のWebをまとめる会」で登壇したときの内容を詳細に説明しつつ、アップデートした部分もあるので、発表見たぞ、スライド見たぞという方も見ていただけますと幸いです。 speakerdeck.com きっかけ とあるプロダクトのCS
安全なKubernetesクラスタのつくりかた 〜ポリシー編〜 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、Necoプロジェクトの池添(@zoetro)です。 今回は、安全なKubernetesクラスタを構築するために、我々がどのようなポリシーを適用しているのかを紹介したいと思います。 Kubernetesクラスタのセキュリティ対策 安全なKubernetesクラスタを構築するためには、非常にたくさんの項目について検討しなければなりません。 ざっと挙げてみただけでも以下のような項目があります。(詳細は Kubernetesの公式ガイド を参照) Role-Based Access Control (RBAC) ネットワークアクセスの制御(Network Policy) コンテナの権限(Pod Security Policy) 通信の暗号化 Secretの暗号化 信頼できるコンテナイメージの利用 安全なコンテナランタイムの利用 ユーザー/グループの管理 API ServerのAudit
Kubernetesアプリケーションの開発、デバッグを高速化するツール、Telepresenceの紹介 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、Necoプロジェクトのsatです。 本記事ではKubernetes(以下K8sと記載)アプリケーション(以降アプリと記載)の開発を高速化するツール、Telepresenceを紹介します。 最初に結論を書いておくと、Telepresenceは次のようなツールです。 ローカルで動くプロセスやコンテナをk8sクラスタの中で動かせる 既存のDeployment内のコンテナを上記ローカルコンテナで置き換えられる テストやデバッグのためにいちいちコンテナイメージをレジストリにpush,そこからpull…とする必要がないので開発速度が上げられる Telepresenceは現在Cloud Native Computing FoundationのSandBoxプロジェクトです。 Telepresence登場の背景 前節において"開発を高速化する"と書きましたが、まずはTelepresenceを使
サイボウズのオープンソースソフトウェアポリシーを紹介します - Cybozu Inside Out | サイボウズエンジニアのブログ
OSS準備室長を務めていた ymmt (@ymmt2005) です。 過去形なのは、OSS準備室は 7 月末で解散したためです。 OSS準備室では、サイボウズ社員がオープンソースソフトウェアに関する活動を行いやすくすることを主な目的として、会社の基本方針を「OSSポリシー」という文書にまとめる作業を行いました。 完成したOSSポリシーはCC0 (いかなる権利も保有しない、いわゆるパブリックドメイン)で広く他の企業の方々にも活用いただけるよう以下で公開しました。本記事ではその内容と、サイボウズにおけるオープンソース活動のこれまでとこれからを紹介いたします。 OSSポリシー(日本語) (GitHub) OSS Policy (English) (GitHub) オープンソースについて オープンソースソフトウェア(Open Source Software, OSS)とは、オープンソースの定義に基
Go言語向けFailure Injectionツール: gofail - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、Necoチームの池添（@zoetro）です。 gofailは、etcdの開発チームがつくったFailure Injectionのためのツールです。 Go言語で書かれたプログラム中に故意にエラーを発生させるポイント(failpoint)を埋め込み、任意のタイミングでプログラムの挙動を変えることができます。 公式ドキュメントに記載されていない項目が多々あるので、詳しい使い方を紹介したいと思います。 なお、本記事は2018年8月時点のソースコードを対象に解説しています。 gofailのインストール gofail をインストールします。 $ go get -u github.com/etcd-io/gofail/... failpointの埋め込み プログラム中にfailpointを埋め込むためには、Go言語のプログラム中に gofail というキーワードから始まるコメントを記述します
Safari 11 Intelligent Tracking Preventionについて - Cybozu Inside Out | サイボウズエンジニアのブログ
はじめまして、開発基盤部フロントエンドエキスパートチームの小林(@koba04)です。 チームメンバーがまだひとりなので、仲間を募集中です！ macOS High Sierra及びiOS11のSafariで導入されたIntelligent Tracking Preventionについて紹介します。 詳細は、下記のWebKitのブログに書かれていますが、Intelligent Tracking Preventionはクロスサイトトラッキングを制限することを目的とした機能です。 Intelligent Tracking Prevention クロスサイトトラッキングとは まず最初にクロスサイトトラッキングとは、複数サイト間でのユーザーの行動をトラッキングすることです。 クロスサイトトラッキングを行うには、トラッキングしたいサイトに、Cookieを設定した共通のリソースを埋め込みます。 これによ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
