タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
styled-componentsの採用と既存資産を捨てた理由 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。フロントエンドエキスパートチームの@nakajmgです。 私が所属しているフロントエンドエキスパートチームでは、現在 kintone の脱レガシーの一環として React + TypeScript 化に取り組んでいます。この取組の中で Scss で定義されている既存のスタイルを styled-components で書き直していくという決定をしました。 今回は styled-components の採用を決定するまでの過程や、既存の Scss ファイルの扱いについて検討した内容などを紹介します。 スタイル定義方法の検討 kintone にはユーザーが JavaScript でカスタマイズできる機能があり、ユーザーが行っているカスタマイズの中には、DOM 構造や CSS のクラス名に依存しているものもあります。このようなカスタマイズはサポートの対象外ではありますが、ユーザーにでき
styled-components（CSS in JS）をやめた理由と、不完全なCSS Modulesを愛する方法 - Qiita
styled-components 画像は styled-components ツライっていう顔です。 Angularのようにスタイリングまで面倒を見てくれるUIフレームワークならまだしも、Reactの場合はコンポーネントのスタイリング方法も自身で選択しなければいけません。CSSのスタイリング方法/設計はいくつか存在しますが、どれも一長一短で、やはり銀の弾丸は存在しません。スタイリング方法を選択可能なUIフレームワークは、この混沌とした選択肢の中から価値を見出す必要があるわけです。 僕はBEMによる人力CSS管理（Sass/Less/Stylus）から、 { fontSize: 14 } のようなJSオブジェクト形式のCSS in JS、 styled-components のようなTemplate Stringsを利用したCSS in JS、そしてCSS Modulesまで幅広く公私とも
今回は styled-components を試してみたい と思います。 ついでに、色を操作できるライブラリ chroma.js も試してみたいと思います。 styled-components と chroma.js の詳細については、以下のページを参照してください。 それでは早速、styled-components と chroma.js を試していきたいと思います。 目次 目次 Reactセットアップ 必要なパッケージのインストール 「 styled-components 」と「 chroma-js 」を試してみる src/index.tsx src/packages/Sandbox.tsx src/packages/SampleButton.tsx 実際に動かしてみる まとめ Reactセットアップ TypeScript が慣れているので、惰性で typescript テンプレートを
【脱ランタイムCSS in JS】styled-componentsを別のCSS in JSに自動置換するCLIツールの開発
1.はじめに 本記事はサイボウズの夏インターン(2022年)で取り組んだ内容の紹介を行います。インターンでは、サイボウズのフロントエンド領域における横断的組織であるフロントエンドエキスパートチームに配属されました。5日間のインターン期間でstyled-componentsを別のCSS in JSに自動置換するCLIツール・extract-styledの開発に取り組みました。 2. extract-styledの紹介 実装したextract-styledは、以下のようなCLI経由の実行を通して、styled-componentsで定義されたReactコンポーネントをtargetに指定した任意のCSS in JSに変換することができます。(現時点では変換先としてlinaria・vanilla-extractに対応) $ extract-styled \\ --path ./src/compon
今の職場で既に組まれたシステムが既にstyled-componentsにべったり依存していて、別に積極的に入れ替える理由もないので普通に使っているけれども、やっぱりこれ微妙だなと思った話。 そもそもとして、ビルドシステムへの介入が多くて不必要にロックインになったり、提示されてる手法がだいたいイマイチで普通にCSSとかSCSSを書く以上の意義が見出せないので、僕は基本的に「JS中にCSSを書いたり、ES Moduleのimportを使ってCSSを読み込むタイプのアプローチ（以下CSS-in-JS）」がそんなに好きではない・大人しくCSS書く方が好きではあるんだけど。色々あった理由はこちら: https://saneyukis.hatenablog.com/entry/2019/02/28/022750 https://saneyukis.hatenablog.com/entry/2019/0
弊社では現在UIコンポーネントのスタイルを当てるために、CSS-in-JSライブラリのひとつであるstyled-componentsを使っています。 styled-componentsで高度な使い方をしたときにスタイルが意図した優先度で当たらない現象の調査のためにstyled-componentsの仕組みを調べたので、覚え書きとして残しておきます。 前提知識styled-componentsについて: CSS-in-JS はスタイル定義をJavaScript内に書く手法の総称です。スタイルのコンポーネント間の結合を下げ、単一コンポーネント内の振舞いとスタイルの凝集を上げる狙いがあり、特に振舞いに依存して動的にスタイルが変わるようなケースでJSとスタイル定義をシームレスに結合させることができます。実際の実現方法はライブラリによってまちまちです。styled-componentsは比較的オーソ
When I first started using styled-components, it seemed like magic ✨. Somehow, using an obscure half-string-half-function syntax, the tool was able to take some arbitrary CSS and assign it to a React component, bypassing the CSS selectors we've always used. Like so many devs, I learned how to use styled-components, but without really understanding what was going on under the hood. Knowing how it w
SassからCSS Modules、そしてstyled-componentsに乗り換えた話｜食べログ フロントエンドエンジニアブログ
この記事は食べログアドベントカレンダー2020の2日目の記事です。 こんにちは。食べログFE（フロントエンド）チームの金野です。 以前の記事でもご紹介しました通り、現在食べログは、jQuery+Railsだったフロントエンド環境をReact/TypeScriptに置き換えるリプレースを進めています。 CSSもSassからCSS Modulesを経てstyled-componentsに移行中です。 今回は、「どうしてその技術を選んだか」という技術選定の経緯や、どのような規約で運用しているかをご紹介します！ なぜリプレースを始めたのかまず、CSSの技術選定について触れる前に、リプレースの目的について話さなくてはいけません。 食べログは今年で開設から15年となるサービスです。システムも組織も巨大で、且つ複雑な機能が多くあります。 特にフロントエンドは場当たり的な実装も多く、技術的負債が開発時のボ
styled-components と csstype で型安全な Chakra UI っぽいコンポーネントを作る | suzukalight.com
3 行まとめ css mixin を使うことで、複数のコンポーネントで使い回せるスタイルヘルパを作成できるcsstype を使って、Typography, Space, Color などの型付き props を作ることができる基礎コンポーネントに型付き props を混ぜて受けられるようにし、mixin で受けてスタイリングさせることで、Chakra UI のような型安全なスタイル記述ができるようになる何がしたかったかこういう Chakra UI みたいな書き方がしたかったので、styled-components でやれるかを試したのが今回の記事の主題です。 export default function App() { return ( <VStack spacing={4} w="100vw" h="100vh" px={4} py={8} bgColor={palette.white
この記事はStyled Componentsの微細な好みに関するものであり、Styled Componentsで構成されたプロジェクトをリファクタリングすべき等の考えはありません。 Styled ComponentsはCSS in JSの先駆けとなり、この手のツールではトップクラスの人気である覚えがあります。ですが、実のところあまり濫用されて欲しくない気持ちを抱いています。 特記事項 CSSやReactの初学者向けではありません。 この記事は以下の是非を問うものではありません。 CSS in JS / Plain CSS CSSファイルを分離する / 分離しない テンプレートリテラル / Object Style CSSコードのスタイル はじめに Styled Componentsについて Styled Componentsというライブラリは、styled.div...のようなAPIを持つ
styled-components の 入れ子の中で使う記号(&>+~)や、擬似要素 before/after, 擬似クラス hover, さらには & & といった書き方、これがいつも分からなくなるのが最近の悩みです。 きっと CSS を習得するより先に React の勉強を始めた方は同じような悩みを持っているのではないでしょうか。 僕はいつもこの記号がわからなくなるので、ちゃんと調べてメモすることにしました。 その結果、基本的には styled-components の中で SCSS の記法が使えるだけっていう風に覚えておけばいいことがわかりましたが、一部そうでないものもありました。 それについて順を追って説明していきます。 (TIPS: >+~についてググるとき直接記号を入れると検索されにくいですが、これらは隣接セレクタと呼ばれておりその言葉で検索すると比較的ヒットします。) CSS
styled-componentsの使い方(パッとわかりやすく、色々なパターンを説明することを目指しています)
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
EJ: Updated January 13, 2020 with the formal v5 release. We are very excited to announce that the styled-components v5 is here! There are no breaking changes*, as long as your app is running the latest version of React, styled-components v5 should just work. ✨(*however we did remove the deprecated “subfunctions on attrs” API) Please try the release in your apps and let us know if you encounter any
GitHub - ben-rogerson/twin.macro: 🦹♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, solid-styled-components, stitches and goober) at build time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Material-UI と styled-components を組み合わせて、React のサイトを怠惰にスタイリングする。 - Qiita
※ input, check は状態の変数、handleChange は状態変化のハンドラーメソッドだと思ってください。 たぶん React の書籍をみたら、利用方法が紹介されていることが多いですし、知っている人も多いかと思います。 ということで、各コンポーネントの説明はそちらに譲ります。 （どこか手頃な記事がどこかに転がってないか軽く調べてみましたけど、見当たりませんね……。Material-UI に関する詳しい使いかたの説明記事欲しい人、言ってくださったら書くかもしれません） React Hooks を利用したスタイリング - useStyles Material-UI のコンポーネントだけでもかなり見た目を整えることができますが、微調整するためにはやはり CSS の記述が必要です。 React の CSS の記述方法には、素の CSS、CSS Module、CSS in JS（数多の
styled-componentsによる抽象コンポーネント作成のすゝめ | メルカリエンジニアリング
この記事は MERPAY TECH OPENNESS MONTH の 11 日目の記事です。 こんにちは、メルペイのフロントエンドエンジニアの @sawa-zen です。本記事では React ベースのプロジェクトでのコンポーネント作成をちょっと楽するテクニックをご紹介します。 課題：コンポーネントのスタイル重複問題 サービスやツールの開発をしていると多くのコンポーネントを実装することになります。その際に同じようなスタイルを何度も記述することになりイライラした経験ありませんか？ 例えば margin: 0; や padding: 0; 、box-sizing: border-box; などなど。プロジェクトが大きくなればなるほどこの面倒な作業が増えていきます。 解決策 1 ：グローバルへリセット CSS を定義する グローバルへリセット CSS を定義して一掃してしまうのも一つの手です。例
The styled-components Happy PathMy personal suite of “best practices” For a few years now, my #1 favourite tool for managing CSS in React apps has been 💅 styled-components. It's a wonderful tool. In many ways, it's changed how I think about CSS architecture, and has helped me keep my codebase clean and modular, just like React! It shares something else in common with React: developers often disli
GitHub - danielbayerlein/dashboard: 📺 Create your own team dashboard with custom widgets. Built with Next.js, React, styled-components and polished.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
Follow on FacebookWhen working with multiple developers on one React application, it's always good to align the team on a common set of best practices. This holds also true for styling React components. Over the past years, I was fortunate to work with many React freelance developers on different applications where we had to align the best practices throughout the project. While there were certain
styled-components の theme、使っていますか？styled-components には、ThemeProviderという、装飾などに関する規定値を提供する仕組みがあります。この様な構成になっているとします（通常 ThemeProvider は SPA ルーティングの上あたりに位置しますが、説明のため簡易な構成としています） const Component: React.FC = () => ( <ThemeProvider theme={theme}> <RedButton>RedButton</RedButton> <GreenButton>GreenButton</GreenButton> <BlueButton>BlueButton</BlueButton> </ThemeProvider> )
GitHub - styled-icons/styled-icons: 💅 Popular icon packs like Font Awesome, Material Design, and Octicons, available as React Styled Components
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
I like working with styled-components. They allow you write CSS in your JavaScript, keeping your CSS in very close proximity to your JavaScript for a single component. As a front-end developer who loves to dissect a web page and break it down into reusable components, the idea of styled-components brings me joy. The approach is clean and modular and I don’t have to go digging in some gigantic CSS
Naming Styled Components
Context At Inturn we spend a lot of time debating and crafting best practices around common patterns. Recently, after converting our styling system to emotion (a styled component library), we ran into a question: “How should we name these things?” Problem The issue we were running into mostly stemmed from our styled container components. Traditionally, when using classes, you would give the root e
Sometimes the libraries that we use daily can seem a little bit like magic. By taking the time to understand the fundamental JavaScript features that make these libraries possible, we become better equipped to improve our use of those libraries, applying their functionality in unique and relevant ways. Sometimes the libraries that we use daily can seem a little bit like magic. By taking the time t
[TailwindCSS] Next.js+TypeScript+styled-componentsの環境にTailwindCSSを導入する - Qiita
// postcss.config.js const purgecss = [ '@fullhuman/postcss-purgecss', { content: ['./components/**/*.js', './pages/**/*.js'], defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [], }, ] module.exports = { plugins: [ 'postcss-import', require('tailwindcss')('./tailwindcss-config.js'), 'autoprefixer', ...(process.env.NODE_ENV === 'production' ? [purgecss] : []), ], }
![[TailwindCSS] Next.js+TypeScript+styled-componentsの環境にTailwindCSSを導入する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/35f69ed9a89ddebe41dd0f95dec45b03ace302bd/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCVGFpbHdpbmRDU1MlNUQlMjBOZXh0LmpzJTJCVHlwZVNjcmlwdCUyQnN0eWxlZC1jb21wb25lbnRzJUUzJTgxJUFFJUU3JTkyJUIwJUU1JUEyJTgzJUUzJTgxJUFCVGFpbHdpbmRDU1MlRTMlODIlOTIlRTUlQjAlOEUlRTUlODUlQTUlRTMlODElOTklRTMlODIlOEImdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTNhNTMxMDRlMGU3ZWQ1NTEwNmNkMGYxMmMyNGMxYTFl%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBtYWNvbG9saWRvbGwmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTRkM2I4NDA2ZjhkM2ZjOWVjMDA2NzEzY2Q0MTMzNmJk%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D5dbc9531b2844cc437440563d0d55949)
Strongly typed theme property · Issue #1589 · styled-components/styled-components
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community. Pick a username Email Address Password Sign up for GitHub By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails. Already on GitHub? Sign in to your account
styled-componentsの基礎知識 第1回 styled-componentsの前提知識 このシリーズではCSS in JS用のライブラリであるstyled-componentsについて解説します。第1回目はCSS in JSの予備知識と、styled-componentsの使いどころや、基本機能について解説します。 はじめに styled-componentsは、ReactコンポーネントにCSSのスタイルをどのように当てるかという課題をきっかけに作られたCSS in JSのライブラリです。 CSS in JSは読んで字のごとく、JavaScriptの中にCSSの記述を取り込んでしまう手法のことで、styled-componentsのほかにもglamorous、Emotion、Linariaなどのライブラリが存在します。 次の図はstyled-components、glamoro
Release v6.0.0 · styled-components/styled-components
Changed in this version fix(types): prevent prop bleed on styling properties (fixes #4053, c0f8015) feat(types): ship csstype via "CSS" namespace (e6c4f0a) chore: bump stylis to 4.3 (fixes #4007, fa58875) reduced some sources of unnecessary branching logic Breaking changes in v6 Migration guide → https://styled-components.com/docs/faqs#what-do-i-need-to-do-to-migrate-to-v6 now using stylis v4 (if
Posted: 2019.12.17 / Category: javascript / Tag: React React.jsの基本的なスタイルを設定方法と、Components Styled というライブラリを使用したスタイルの設定方法を解説します。 環境は React 16.12 のTypeScriptでお送りします。 インラインスタイルで設定する方法 一つ目はHTMLタグのスタイル属性に直接書くインラインスタイルの設定方法です。 通常のHTMLコーディングはちょっと邪道っぽくてあまり使わないかもしれませんが、Reactアプリケーションのサンプルとかには結構使われています。 JSXでインラインスタイルを設定する場合は、JavaScriptのオブジェクト形式で記述します。 JSXで式や変数を表示する場合は波括弧（{}）で囲み、スタイルはオブジェクトで記述するのでさらに波括弧で囲みます。
styled-components: Basics
Motivation styled-components is the result of wondering how we could enhance CSS for styling React component systems. By focusing on a single use case we managed to optimize the experience for developers as well as the output for end users. Apart from the improved experience for developers, styled-components provides: Automatic critical CSS: styled-components keeps track of which components are re
styled-components v6 リリースなど: Cybozu Frontend Weekly (2023-07-04号)
styled-components v6 リリースなど: Cybozu Frontend Weekly (2023-07-04号) はじめに こんにちは！サイボウズ株式会社フロントエンドエキスパートチームの BaHo です。 サイボウズでは毎週火曜日に Frontend Weekly という「1 週間の間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2023/07/04 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 Boshen/oxc Linter Roadmap oxc の linter 実装についてのロードマップです。 bike-shedding になりがちな style や convention 以外のルールにフォーカスして、この２ヶ月で実装していくそうです。 プラグインは GraphQL のような
How we migrated 541 components from Styled Components to Emotion with zero bugs
Refactoring CSS is one of the most challenging tasks as a frontend developer. You need to improve the code without altering the look and feel of the UI. But it's tricky to catch visual changes as you refactor an entire production codebase across multiple repos. Moreover, dealing with global styles, overrides, pseudo-states and browser quirks makes the job extra complicated. Last quarter we migrate
【React】流行りのstyled-componentsとは？
Reactでスタイリングする際に人気のライブラリーはstyled-componentsなのではないでしょうか。 事実、githubでは31.8kものStarをもらっています。しかし、まだまだ使ったことないという人が多いのが現実です。 styled-componentsについて知らない方も多いので、使うメリットや基本的な使い方について見ていきましょう。 styled-componentsとは？ CSS in JSのライブラリの一つです。CSS in JSとはその名の通りJSの中にスタイルを記述する方法。 このCSS in JSを使うことでReact思想のコンポーネント単位での管理がスタイルにも可能になります。従来はJSとCSSで分けられていたものが、CSS in JSで統合できたためです。 styled-componentsを使うメリット styled-componentsを使うメリットは主
華麗なるGatsby.jsの実践(styled-components/headの編集/404ページ/画像の使用) - Qiita
以前 gatsbyの公式チュートリアルを意訳しつつやったので、今回は、実際に業務で使用するにあたって 使いそうな機能について公式のドキュメント等を調べてみました。 この記事のタイトルをつけた後に気づいたんですが、 公式で上記の画像を発見しました。 華麗なるギャツビーがやはり由来なんでしょうか。 お品書き 実際業務で使いそうな機能をピックアップしたところ、以下のようになりました。 - styled-componentsを使いたい - head修正できるようにしたい - 404ページをカスタマイズしたい - gatsbyでの画像の扱いを知りたい 今回はhttps://www.gatsbyjs.org/starters/gatsbyjs/gatsby-starter-default/ このスターターを使って進めます。 スターターを使用するために、以下のコマンドを実行します。 $ gatsby n
styled-componentsに独自のpropsを生やして値を渡したら怒られたときのメモ - ひと夏の技術
2行 独自に生やしたpropsをまるごと渡してはいけない 分割代入でdomのattributesに定義がないpropsを間引く エラーメッセージ なんかこういう2種類のやつを言われる React does not recognize the `isAvailable` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `isAvailable` instead. If you accidentally passed it from a parent component, remove it from the DOM element. Received `false` for a non-boolean at
概要 styled-components では <ThemeProvider> を用いることで、プロジェクト全体で使用するカラーコードの Theme を取り扱うことができます。 https://www.styled-components.com/docs/advanced#theming この記事ではこの Theme に対して独自の型を定義する方法を紹介します。 環境 react@16.9.0 typescript@3.5.3 styled-components@4.3.2 @types/styled-components@4.1.18 リポジトリ 方法 styled-components モジュール内部の DefaultTheme という interface に対して型をつけることで目的を達成できます。 この方法は @types/styled-components のコメントで言及されて
GitHub - tvillarete/ipod-classic-js: An iPod Classic emulator that connects to Apple Music and Spotify. Built with React & Styled Components
Before the days of streaming services, we relied on physical devices to store our limited libraries of music. Now with the streaming age, we no longer rely on physical storage and have endless hours of songs at our disposal. This project is an homage to the good 'ol days. A mix of the old and new. Experience the iPod Classic you used to own that now connects to Spotify and Apple Music — the two mo
GitHub - styled-components/awesome-styled-components: A curated list of awesome styled-components resources 💅
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
React + Typescriptプロジェクトでplugin-styled-componentsを使うときの設定 - じまろぐ
styled-components使ってる env !== "production" のときにクラス名にファイル名が入るようにしたい デバッグのため babel-plugin-styled-componentsがある TypeScriptだとこのプラグインは効かない ts-loaderでトランスパイルしてるから storybookでも使いたい という感じで、ts-loaderを使ってるのでTypeScriptプロジェクトの場合は typescript-plugin-styled-components を使う必要がある。babelでやってる場合は babel-plugin-styled-components で大丈夫なはず。 設定 webpack.config.js で ts-loaderのoptionを設定する。 const path = require("path"); const cr
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【React】styled-components を試してみる！ - mlog
styled-componentsへの最近の感想 - saneyuki_s log
styled-componentsの仕組みについての覚え書き | Wantedly Engineer Blog
Demystifying styled-components
Styled Componentsを無闇に使わないで
styled-components の :&>before(記号) まとめ
Announcing styled-components v5: Beast Mode 💪🔥
The styled-components Happy Path
Styled Components Best Practices
styled-components の theme型定義 - Qiita
DRY-ing up styled-components | CSS-Tricks
Styled Components, Styled Systems and How They Work
styled-componentsの基礎知識 | 第1回 styled-componentsの前提知識
React.jsのスタイル設定の基礎とStyled Componentsの使い方
TypeScript + styled-components で Theme に型をつける - Qiita
www.musicman.co.jp
speeddata.jp
www.nikkei.com
www.tetsutyler.com
www.itmedia.co.jp
news.yahoo.co.jp