ハクソク

世界を動かす技術を、日本語で。

「Reshaped」がオープンソースになりました

256日前原文(reshaped.so)

概要

  • Reshaped は、ReactとFigma向けのコンポーネントライブラリとして開発
  • 最初は有料モデルを採用し、徐々に無料化とオープンソース化を進行
  • デザインとエンジニアリングの連携を重視した設計思想
  • 今後は高度なプレミアムコンポーネントの展開も検討
  • コミュニティへの還元と新機能の共有に意欲

Reshaped開発の背景と目的

  • Reshaped の開発は約5年前、自身のプロジェクトニーズから開始
  • ReactとFigma両対応のコンポーネントライブラリの必要性
  • 10年以上のデザインシステム経験を活かした設計思想
  • ウェブの約80%をカバーするコアデザインプラクティスへの着目
  • 残り20%は柔軟なローレベルユーティリティで対応

こだわりの設計と機能

  • アクセシビリティ や デザイン のみに偏らない全体最適重視
  • デザインとエンジニアリングの「アラインメント」重視
  • テーマ切り替え、ダークモード、マイクロアニメーションなどのUI課題解決
  • 個人向けワンタイムライセンス、大規模チーム向けソースコードライセンスによる収益化
  • 小規模コミュニティへの深いサポート体制

オープンソース化への道のり

  • 経済的・精神的なモチベーション維持のため有料化を選択
  • 将来的な無償提供を目標に段階的な無料化を実施
  • 2年前にReactパッケージを無料化し、npm経由での利用を解放
  • 本日、 Reshaped 全体を完全オープンソース化
    • Reactライブラリは GitHub で公開
    • Figmaライブラリは Figma Community で公開

今後の展望とコミュニティへのメッセージ

  • デザインとエンジニアリング双方のベストプラクティス共有を促進
  • 新機能や他ツール連携時の実装過程を公開予定
  • 既存購入者には今後もアップデートとサポートを継続
  • コアライブラリ上に、より複雑かつ意見の強いプレミアムコンポーネントの開発を検討
    • 高度なCSSやReactロジックを必要とする先進的コンポーネント
  • 5年間のクローズド開発からの大きな転換
  • コミュニティへの還元と、今後の挑戦・楽しみへの期待

Hackerたちの意見

これ、すごくしっかりしたライブラリだね。しかもたくさんのコードが無料で使えるなんて。Dmitryさんとチームに感謝！

└

ありがとう！

ちょっと余談だけど、完全にデザインされて開発されたマイクロインタラクション用のフレームワーク/UIライブラリを探してるんだ。どんなに良いものでも、バグみたいなジャンプがある感じがする。

└

どんな改善や追加を望んでるか、具体例ある？今、マイクロインタラクションをもっと提供できるコンポーネントのセットを作ってるところなんだ。

ここがすごく気になるんだけど、ウェブサイトに価格や支払いの呼びかけ、寄付のオプションが見当たらないんだ。つまり、オープンソースで、もうお金をもらうことには興味がないってこと？

└

記事の最後に書いてあったね：>「Reshapedをさらに進化させるために、コアライブラリの上にもっと複雑で意見が反映されたプレミアムコンポーネントを導入したいと思っています。『50のランディングページレイアウト』ではなく、洗練されたCSSとReactロジックを必要とする高度なコンポーネントです。」

└

こんにちは、私はこのライブラリを過去5年間売っていて、稼いだお金には満足してるから、手が届かない人たちのためにもっとアクセスしやすくしようと思ったんだ（価格もチーム向けだったし）。おそらく、プラスライセンスの下でいくつかの追加コンポーネントを出すけど、コアのReactとFigmaライブラリは無料でオープンソースのままにするよ。

すごくクリーンだね！作ってくれてありがとう。ただ、ドキュメンテーションページでタブを切り替えたりナビゲートしたりすると、サイトが数ミリ秒フリーズしちゃうんだ。俺はManjaro LinuxでLibreWolf v135を使ってるよ。

└

AndroidのFennecブラウザ使ってるけど、ドキュメントのDocumentationタブとPropertiesタブの切り替えが半秒くらいかかるね。実際にフリーズしてるかは分からないけど、アニメーションの小数点がずれてるのかも？

└

彼らのNext JSサーバーは、静的コンテンツをレンダリングするのに約半秒かかるよ。 https://i.imgur.com/qFH0ZlK.png

└

ありがとう！遅いナビゲーションは確かに問題だね、調べてみるよ。今は、どのmdxファイルが使えるかをスキャンするサーバーロジックがあって、すごく基本的な認証もあってサーバーを使わざるを得なかったんだ。OSSに移行すれば、今は静的ウェブサイトのエクスポートに切り替えられるよ。

すごくいい感じ！今はMantineをたくさん使ってて、すごく満足してるけど、これも頭に入れておくよ。誰かがReactNative用に同じくらいのクオリティのものを作ってくれたらいいのに。知ってる既存のソリューションは、どれも比較にならないくらいダメだし。

└

前に見たとき、mantineにはいくつかのアクセシビリティの問題があったんだけど、誰かそれでアクセシビリティのコンプライアンスチェックを受けた人いる？

READMEの「はじめに」は、スタートガイドじゃなくてチェンジログに飛ぶんだね。

└

ありがとう、PR作ったよ！: https://github.com/reshaped-ui/reshaped/pull/426

すごくいいね！オートコンプリートでのバックスペースが壊れてるみたい：何も起こらない（OSX Safari & Chrome）。

└

ごめん、今日ドキュメントを再展開するね。最新のパッチで既に修正済みだから。

美しいコンポーネントだね、しかもすごく大胆な決断！今までの成功おめでとう！これが君（とエコシステムの皆）にとってさらに大きな成果につながるといいな！