Next.js App Router での MPA フロントエンド刷新JSConf JP 2023
開発チーム作成ガイドを公開します - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。シニアスクラムマスターの天野 @ama_ch です。 サイボウズの開発組織において、今後の成長を加速させるためには、組織の基本単位をスクラムチームのような自律的な小さなチームにしてスケールさせることが非常に大切だと考えています。サイボウズは比較的スクラムが普及している組織ではありますが、組織内のすべてのチームがスクラムを採用しているわけではありません。 フレームワークとしてスクラムを採用するかどうかはチームの自由です。しかし、健全なチーム環境を整えることはすべてのチームにとって重要です。チームやチームワークに関する情報は巷に多く存在しますが、我々のようにすでにある程度の規模で活動しているプロダクト開発組織で、チーム環境を整えるために実践的に使える情報がないことが悩みでした。 そこで、これまでのチームに関する学びと実践を踏まえ、サイボウズの開発組織の文脈において、スクラムを実践し
フロントエンド刷新プロジェクトの開発サイクルを加速するデプロイパイプラインの改善 - Cybozu Inside Out | サイボウズエンジニアのブログ
フロントエンド刷新プロジェクトの開発サイクルを加速するデプロイパイプラインの改善 この記事は Cybozu Advent Calendar 2022 の 19 日目の記事です。 18 日目はこちら → チームメトリクスと感情データを活用した「ふりかえり」の手引き 20 日目はこちら → エンジニアとの距離が近くなっていいことたくさんだったQAの話 こんにちは！！ kintone フロントエンドリアーキテクチャプロジェクト (フロリア)のAppShell チームでプロダクトオーナーをしている tasshi です。 kintone フロントエンドリアーキテクチャプロジェクト (フロリア)、およびAppShellチームについてはこちらの記事をご覧ください。 今回はフロリアの開発で利用しているテスト環境へのデプロイパイプラインを紹介します。 目次 フロントエンド刷新プロジェクトの開発サイクルを加速
フロントエンド刷新プロジェクトを成功に導くためのテスト手法の紹介 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、フロリアでQAエンジニアをやっている中園です。 現在サイボウズではkintoneのフロントエンドリアーキテクチャプロジェクト（フロリア）と称して、Closure Tools から React へと置き換えるプロジェクトが進行中です。 今回は、フロリアのチームの1つであるMiraチームのテスト手法について紹介します。 フロリアの詳細については次の記事をご覧ください。 フロリアについて フロリアでは、次のような構成でそれぞれのチームがオーナーシップを持って活動しており、テストの方針はチームごとに決めています。 プロダクトオーナー: 1名 エンジニア: 3-4名 QA: 1名 スクラムマスター: 1名 フロリアのチーム構成 チームのミッションに合わせたテストの目的 Miraチームでは、kintoneのデザインやふるまいを変えずに、利用者に気づかれない形でReactに置き換えるというミ
実装例から見る React のテストの書き方 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは！フロントエンドエキスパートチームの@nus3_です。 kintone のフロントエンド刷新プロジェクト（フロリア）では、品質を保ったまま開発を加速させるためにフロントエンドのテストを積極的に行っています。 今回はそんなフロントエンドのテストの実装例をいくつか紹介します。この記事がフロントエンドのテストを行う上での参考になれば幸いです。 テストに使用する主なパッケージ コンポーネントのテスト 補足: Testing Library の記法をチェックしてくれるeslint-plugin-testing-library カスタムフックのテスト 補足: React v18 では @testing-library/react の renderHook を使う 参考リンク 色々なテスト事例 setTimeout を使うコンポーネントのテスト 補足: Storybook の story を使
最速でフロントエンドを刷新するための開発フロー - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、フロリアでQAエンジニアをやっている中園です。 現在サイボウズでは kintone のフロントエンドリアーキテクチャプロジェクト（フロリア）と称して、Closure Tools から React へと置き換えるプロジェクトが進行中です。 フロリアの詳細については 次の記事をご覧ください。 今回は、フロリアのチームの一つで、利用者に気づかれない形で React への置き換えを行っている Mira チーム1の開発・テストフローの紹介をします。 "最速で" React に置き換えたい Mira チームはただ React に置き換えるのではなく「最速で React に置き換える」という目標があります。 フロリアの各チームはそれぞれのチームごとにオーナーシップを持っており、チームごとに意思決定を行っています。Mira チームでは「最速で置き換える」という目標に向かって、開発スピードを向上
kintoneのアクセシビリティ改善とESLintルールの整備 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。Poca11y（ポカリ）チームのSUGI(@blindsoup2p1)と小林(@sukoyakarizumu)です。 わたしたちPoca11yチームは「kintone」のアクセシビリティ改善活動に参加しています。この記事ではkintoneのアクセシビリティを改善するチーム体制について解説します。さらにPoca11yチームとkintone開発チームが協力して整備したアクセシビリティを強化するためのESLintルールについても解説します。 Poca11y（アクセシビリティ）チームとkintoneのアクセシビリティ改善 Poca11yチームとは Poca11yチームはサイボウズ全体の「アクセシビリティ」向上を目的としたチームです。Poca11yチームでは主に以下3種類の活動を行なっています。 社内啓発：アクセシビリティの社内研修・勉強会・ガイドライン作成などを行います。 製品改善：サ
kintone フロントエンドリアーキテクチャプロジェクトで大切にしていること - Cybozu Inside Out | サイボウズエンジニアのブログ
kintone フロントエンドリアーキテクチャプロジェクトリーダーの @koba04です。 昨年末から、kintone フロントエンドリアーキテクチャをプロジェクト（フロリア）として再構成してスタートさせました。フロリアという名前は社内での公募により決定しました。 今回はプロジェクトで目指していることについて紹介します。本プロジェクトの開始前に Cybozu Meetup で話したスライドや動画も公開されているのでよければ見てください。 speakerdeck.com www.youtube.com これまでの取り組みについては下記の記事にて紹介しています。 blog.cybozu.io 3 行まとめ フロリアのゴール 全てのページが React によって表示されている 現状 今後 フロントエンドが技術的にもチーム的にも分割されている モノリスな構成からの脱却 アーキテクチャとチーム（
「動画で助かる」「IT基礎知識が一通り学べる」──各社が公開した新人エンジニア向けの研修資料が話題に 人気資料まとめ
IT企業が社内の新人エンジニアに向けた研修資料や動画を無償公開し、話題になっている。学べる内容はIT業界の文化からゲームエンジン「Unity」を使ったゲーム開発までさまざまで、中には150ページ超のスライドや5時間超の動画もある。 ネット上では「初心者（エンジニア）の指針になる」「IT基礎知識の一通りのことが身につく」「動画があって助かる」などと評判だ。改めて公開内容と目的をまとめた。 サイボウズ、新人ITエンジニア向けに「IT業界文化」など サイボウズが7月20日に公式ブログで、4月から6月にかけて行った研修の資料を公開した。7月30日時点でブログへの「はてなブックマーク」（以下、はてブ）は約1950件、Facebookの「いいね」は約590件付いている。同社は“駆け出しエンジニア”向けとしている。 （関連記事：サイボウズの“駆け出しエンジニア”向け研修資料が話題 Webアプリ開発やIT
2021年のエンジニア新人研修の講義資料を公開しました - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。開発本部 オンボーディングチームの酒井（@sakay_y）です。社内のオンボーディングコンテンツを、どんどん社外へ公開することを夢見ています。 2021年もエンジニア新人研修を行いましたので、軽い紹介と、講義資料および一部講義動画（New!）を公開いたします。 2021年のエンジニア研修について 講義資料公開 Webアプリケーション基礎 HTTP/DNS ソフトウェアライセンス ソフトウェアテスト テスト自動化 アクセシビリティ Docker Chrome Developer Toolsの使い方 サイボウズのアジャイル・クオリティ デザインの役割と関わりかた データベース CI/CD セキュリティ モブに早く慣れたい人のためのガイド ITコミュニティ文化と情報発信に共通する成長と貢献の要素 正規表現 Kubernetesを使った開発入門 モニタリング入門 gRPC入門 日本語話
styled-componentsの採用と既存資産を捨てた理由 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。フロントエンドエキスパートチームの@nakajmgです。 私が所属しているフロントエンドエキスパートチームでは、現在 kintone の脱レガシーの一環として React + TypeScript 化に取り組んでいます。この取組の中で Scss で定義されている既存のスタイルを styled-components で書き直していくという決定をしました。 今回は styled-components の採用を決定するまでの過程や、既存の Scss ファイルの扱いについて検討した内容などを紹介します。 スタイル定義方法の検討 kintone にはユーザーが JavaScript でカスタマイズできる機能があり、ユーザーが行っているカスタマイズの中には、DOM 構造や CSS のクラス名に依存しているものもあります。このようなカスタマイズはサポートの対象外ではありますが、ユーザーにでき
プロダクト支援チームでkintoneのStorybookをホスティングした話 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。生産性向上チーム&フロントエンドエキスパートチームです。 今回は私たちプロダクト支援チームが普段どのようにプロダクトチームを支援しているかの一例として、kintoneのStorybookを社内からいつでも確認できるようにホスティングするまでの流れを紹介します。 支援チームとプロダクトチームの関わり まずは私たち支援チームとプロダクトチームが社内でどのように関わり、開発しているのかを紹介します。 プロダクト支援チームはプロダクトチームに属しておらず、さまざまなプロダクトの課題解決のために動いています。 例えば、プロダクトチームが手の回っていない最新技術への追従や開発体験の改善を行っています。 生産性向上チームとフロントエンドエキスパートチームの詳細については、それぞれ以下の紹介記事を参照してください。 生産性向上チームの紹介 フロントエンドエキスパートチームの紹介 今回はその支援
効果的な静的解析の CI導入パターンを求めて / Great static analysis with CI
PHP Conference Japan 2020 での発表資料です。 https://phpcon.php.gr.jp/2020/ https://fortee.jp/phpcon-2020/proposal/e0fba818-b475-452d-9bae-b7eb6c80b889 ref. 静的解析の育て方: https://speakerdeck.com/oogfranz/how-to-make-your-static-analysis-strong Using Feedback Loops to Boost Development Lifecycles: https://www.agileconnection.com/article/using-feedback-loops-boost-development-lifecycles Psalm: https://psalm.dev/
2020年のエンジニア新人研修の講義資料を公開しました - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。コネクト支援チームの@tignyaxです。 みなさま、夏はどう過ごされたでしょうか？ 私は、夏が好きなのに今年は夏らしいことが出来なくて寂しいなぁとなっています。。。 さて、今年2020年もエンジニア新人研修を行いましたので、その紹介と講義資料を公開いたします。 2020年のエンジニア新人研修について 基本的には2019年と同じ形*1での実施となりました。 最初の1週間で必修講義をしたあと、新人の皆さんには2週間ずつ3チームを体験してもらいました。 チーム体験のコンセプトは、新人に「興味のあるチームで実際に業務を体験し、配属希望を決める参考になった。」と言ってもらうことです。 各チーム体験では座学や研修を中心にするのではなく、業務体験が中心です。 チーム体験を通して、配属先を検討する材料にしたり、いろんなチーム/人/業務を知ってもらえる機会となります。 必修講義 誰に: 開発/
サマーインターンサイトのアクセシビリティ対応の裏話 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、デザイングループ所属の小林です。サイボウズのサービスや製品に関するアクセシビリティ対応をしています。 先日、サイボウズはサマーインターンのWebサイトを公開しました。 このサイト、実はWebアクセシビリティについて、さまざまな配慮をしながらデザインやマークアップを行なっています。今回はその制作裏話をしようと思います。 なぜアクセシビリティ対応？ サイボウズでは、アクセシビリティを「ユーザがチームにアクセスできる能力」と定義してアクセシビリティの取り組みを進めています。 理想的には、サイボウズが制作しているすべてのWebサイトや製品、サービスについてアクセシビリティの配慮が行われることが望ましいですが、いきなり規模の大きい既存のWebサイトのアクセシビリティを改善するのは大きなコストがかかります。また、デザイナーやエンジニアのアクセシビリティに関するスキルも、一朝一夕に身につくも
「我が社を副業にする人材求む」、サイボウズが採用開始
サイボウズは2017年1月17日、サイボウズでの仕事を副業とする人材を募集する「複業採用」を開始した。他社または個人事業主で既に仕事を持っている人材を対象とする。 サイボウズは2012年から社員に対して副業を認めていた。「個人の自立と多様な働き方の実現を目指す取り組みの一環」（広報）として、同社で初めて、サイボウズの業務を“副”と位置付ける人材の採用を開始した。 募集職種はエンジニア職が開発／運用関連職種のWebアプリケーションエンジニア、品質保証関連職種のセキュリティエンジニア、QA（品質保証）エンジニア、テストエンジニア。ビジネス職はプロモーション関連職種の製品プロモーション、Webディレクターである。 採用予定人数は「具体的にはない」（広報）。募集職種は空いたポジションがあるという意味ではなく、「副業として就業できるだろうという職種」（広報）を挙げたものだ。本人のスキルによっては異な
そのコードに価値はあるか？kintone開発チームでスクラムトレーニングを受講しました - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。kintone開発チームの天野(@ama_ch)です。3ヶ月ほど前からスクラムマスターを始めました。 10/18(金)に@ryuzeeさんにサイボウズ東京オフィスにお越しいただき、kintone開発チームのメンバーでスクラムトレーニングを受講しました。 きっかけ 私が開発しているkintoneはクラウドサービスですが、サイボウズはパッケージ製品の開発でスタートした歴史があり、開発プロセスにもパッケージ時代の習慣が強く残っていました。 長大な要件リスト 実装と試験工程の分断 開発後期での手戻り etc... もちろんこれまで手をこまねいていた訳ではなく、開発チーム内では次のような活動に取り組んできました。 タイムボックス(イテレーション)を区切った開発 テスト自動化の推進 ビルドパイプラインの構築 開発者環境への継続的デリバリー ふりかえり KAIZEN DAY, KAIZEN合
kintoneのJSユニットテスト最新事情 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。kintone開発チームの天野 (@ama_ch) です。 最近はJavaScriptのテストツールが著しく進歩し、日々新しいツールが登場しています。kintoneの開発もこれらのツールによって支えられています。 kintone開発チームでは、昨年末頃からテスト環境の改善に取り組み、モダンなツールセットに乗り換えました。今回は、現在のkintoneのJSユニットテスト環境について紹介します。 kintoneとJSユニットテスト 数年前からユニットテストと自動化の仕組みはあったのですが、ごく一部のユーティリティ関数に書かれているのみで、普段の開発には活用されていませんでした。 ここ1,2年ほどで テストスケルトンを生成するジェネレータスクリプトを作る テストの書き方をまとめたドキュメントを用意する MTGで「ユニットテストを書かなくていいのは小学生まで」などと煽る コードレビュー
Webアクセシビリティに必要なのは「理想への翻訳」 - FRONTEND CONFERENCE 2016参加報告 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、kintone開発チームの小林です。3月5日に大阪で開催されたFRONTEND CONFERENCE 2016に登壇しました。発表内容は、私がWebアクセシビリティの重要性をサイボウズ社内で伝えていった取り組みについてです。 資料はこちらです： あなたの言葉で伝えるWebアクセシビリティ from Kobayashi Daisuke www.slideshare.net 発表中のツイートをTogetterにまとめました： 「あなたの言葉で伝えるWebアクセシビリティ」への反応 - Togetter Webアクセシビリティの重要性が理解されない！ 「Webアクセシビリティとは、障がい者・高齢者対応のことだ」と言われることがあります。しかし、これは正しい解釈ではありません。Webアクセシビリティとは、障がい者や高齢者も含めて、「すべての人」がWebにアクセスできることです。 例えば
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
テクニカルライティングの基本