シングルサインオンでユーザーの認証情報をまとめて管理

はじめに

こんにちは、Ryo です。本記事では、弊社サービスの GROWI.cloud でマネージドサービスとして提供している Keycloak と 情報共有ツール GROWI との連携方法について、シングルサインオンや SAML の認証フローも交えて解説します。

GROWI をご利用中の方で SAML 認証の設定にお悩みの方や、情報共有ツールをシングルサインオンの機能も込みで導入したいと検討されている方はぜひこの記事をご覧ください。

続きを読む

【GROWI ファン向け】GROWI の開発に参加する方法

GROWI Logo

皆さんこんにちは!WESEEK ソフトウェアエンジニアの 増山 です。

今回のブログでは、WESEEK で絶賛開発中の OSS Wiki システム GROWI の開発に参加する方法を解説していきたいと思います。

参加する目的別に主に5種類の方法が存在するので、それら全てについて説明します。

続きを読む

[GCP]VM インスタンス内でDockerコンテナを起動して、ブラウザからアクセスする

こんにちは、システムエンジニアの Kota です。以前の記事で、 AWS に EC2 を構築して、Docker を install し、Hello world! と表示させました。今回は、同じことを Google Cloud Platform ( GCP ) で実践したいと思います。

  • 対象の読者
    • 開発環境で Docker を使っているけど、デプロイにも使いたい方
    • Docker、GCP に触れてみたい方
    • AWS は触ったことあるけど、GCP は触ったことがない方
    • インフラに興味がある方

続きを読む

【webpack】GROWIにおけるwebpackの設定について

はじめに

こんにちは、インターン生の手塚です。

今回はGROWIにおけるwebpackの設定について、調べてみたので記事にします。この記事はGROWIにおけるwebpackの設定に着目しているのでwebpackの基礎知識や、使い方の詳細は説明していません。webpackについてある程度の知識がある人に、プロジェクトへの活用例として参考にしてもらえればなと思っております。

webpackは設定が複雑で、そのため「webpack職人」と呼ばれる人たちが存在します。本当は、誰もが簡単に設定できるのが理想であり、Next.jsなどでは一部を自動的にやってくれたりもしています。ですが、まだwebpackがweb開発におけるモジュールバンドラーとして多く用いられているのは事実であり、webpackの知識は持っていて損はないでしょう。ということを先輩に言われたのでそういう思いで勉強しました。

続きを読む

React&SWRでレンダリング時のチラつきを撲滅する3つのテクニック

UI flickering はイケてない

WESEEK エンジニアの武井です。

みなさん、フロントエンドプログラミングやってますか?
今回のネタは「UI flickering」。React の初回レンダリングやステートを更新した際、こんな感じの挙動してないでしょうか。

react-ui-flickering-when-state-updated

出典: https://stackoverflow.com/questions/55032136/react-ui-flickering-when-state-updated

この一瞬今描画しているアイテム消えてパッと次のアイテムが出てくるまでの一瞬の間が見える現象、こちらが「UI flickering」です。

和製英語だと「UIフリッカー」とか言われる事もありますがあまり一般的ではなく、「カクつき」「チラつき」みたいな表現の方が馴染みがあるかもしれません。

UI flickering は、普通に React で Backend/DB からデータ取ってきて更新するコンポーネントを何も考えずに書くと大体起こってしまいます。UI/UX が壊滅的に悪くなるものではないのでプロダクト・実装箇所によっては許容されるかもしれませんが、イケてるかイケてないかで言えばやっぱりあんまりイケてない部類に入ります。

今回はそれを撲滅するための3つの Tips を紹介します。

続きを読む

semver(Node.jsライブラリ)のチートシートと実例紹介

はじめに(執筆の動機)

GROWI.cloud は、弊社が主に開発し、 OSS として GitHub に公開されている GROWI を、 SaaS としてクラウド版提供するサービスです。
本サービスでは、サービス上で立ち上げる GROWI のバージョンを適切にコントロールするために npm で公開されている semver ライブラリを利用しています。
実装の際に調べてみたところ、https://devhints.io/semver など semver の概念のチートシートはありましたが、Node.js の semver ライブラリの日本語版で分かりやすいチートシートや参考記事が少ないなと感じたため、今後の誰かのためになるならと思い執筆しました。
ご参考になれば幸いです。

続きを読む

Chromeの検索エンジン設定を活用して検索を素早く行う

はじめに

こんにちは。 takayuki です。

今回は、 Google Chrome の検索エンジンの設定をして、素早く Google 英語版検索を行えるようにしたいと思います。

今回の記事は、 Google Chrome のみが対象です。 Firefox を始めとするその他のブラウザでは検証していません。執筆時に確認した Google Chrome のバージョンは、 102.0.5005.62 です。

続きを読む

kubie ctxでコンテキストを切り替え、より安全にk8sでの作業を行おう

はじめに

こんにちは WESEEK でわりと何でもやっている haruhikonyan です。
今やデファクトとなりつつある kubernetes(以下k8s) ですが読者の皆様は k8s のオペレーションをする際のコンテキスト切り替えにはどういったものを使っていますでしょうか。
以下のようなものがあると思います。

  • デフォルトの kubectl config use-context
  • 割と使っている人が多そうな kubectx
  • そして今回紹介する kubie を入れて kubie ctx
    • すでにこれを使ってる人にはこの記事は必要ないかも

もちろん他にも選択肢はあるかと思います。

コンテキスト切り替えと言えば、本番とステージングやテスト、開発でコンテキストを分けて運用をしているシステムは多くあるのかなと思います。
その中でステージングとかの設定を変更する際に、現状の本番の設定を確認するためにコンテキストを一時的に切り替えて設定を確認した後、またステージングにコンテキストを戻して作業を続けるという経験あるのではないでしょうか。

続きを読む