終わらないファイルのコピーが楽しいゲームに一変「Copy Dialog Lunar Lander」／矢印キーでスラスターを操作し、探査船をソフトランディングさせよ！【レビュー】
タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
こんにちは、id:nanto_viです。この記事ははてなエンジニアAdvent Calendarの1日目の分です。 Webアプリケーションでモーダルダイアログを実現しようとして苦戦したことはないでしょうか？ 自前でHTML、CSS、JavaScriptを組み合わせて実装していくと、フォーカスやスクロールの制御が大変ですよね。そんな悩みを解決してくれるのがHTMLのdialog要素、Webブラウザ組み込みのモーダルダイアログ実装が利用できるという優れものです（モードレスダイアログとしても利用できます）。 dialog要素を使うことで、モーダルダイアログに要求されるJavaScript機能をブラウザが肩代わりしてくれるので、アクセシビリティの確保も簡単になります。 2021年12月現在、ChromeやEdgeはすでにdialog要素に対応しています。FirefoxやSafariの開発版でも対応
Intro showModalDialog() は今から考えれば、確かにひどい API だった。 しかし、何か Modal を開き、ユーザにインタラクションをさせ、閉じたらそこで入力された値や選択された結果を取得し、処理を進めたいユースケース自体は、規約への同意取得や、 Cookie バナー、ログインなど多々ある。 そういった場面では、ライブラリなどを用いて実装する必要があったが、 Modal を実装するのは実際にはそんなに簡単ではなかった。 Modal, Dialog, Modal Dialog 最初に、用語を少し整理しておこう。 Modal Dialog Modal Dialog non-Modal Dialog Dialog とは、そもそも「対話」という意味であり、 UI の文脈では入力や選択を求める「対話的な UI」のことを指す。 既に実装されている alert(), confir
Building a dialog component Stay organized with collections Save and categorize content based on your preferences. A foundational overview of how to build color-adaptive, responsive, and accessible mini and mega modals with the <dialog> element. In this post I want to share my thoughts on how to build color-adaptive, responsive, and accessible mini and mega modals with the <dialog> element. Try th
HTML Standardの更新でdialog要素に関する変更があったので、自分の理解の整理のためにもまとめてみます。 Scott O'Hara氏によるdialog initial focus, a proposalという提案の一部が反映された変更で、#8199でマージされました。主な変更差分を見るとわりと大きめの追記がされていることがわかります。 提案されていることがすべて採用されていたり、提案で言及されている問題がすべて解決しているわけではなく、議論が続いているものも多いので、今後dialog要素がどういった方向に変更され、進化していくのかを見守る補助的な記事になればいいなと思います。 autofocus属性ほぼ必須 結論から言うと、autofocus属性がほぼ必須となります。そのautofocus属性はdialog要素自体とは限らず、内包している子孫要素に適切な場合もあります。 <d
dialog要素を使用したアクセシブルなモーダルウィンドウの実装メモです。このブログのハンバーガーメニューで使われている実装と同じものになります。 dialog要素は現在全てのモダンブラウザでサポートされているため、iOS Safariをどこまで対応するかに依りますが実務で使用しても差し支えないでしょう。
Intro 前回までは <dialog> が標準化されるまでの経緯と、 API の概要や関連仕様を解説した。 今回は <dialog> の API としての使い方について、具体的に解説していく。 各要素の使用 open 属性 <dialog> は、デフォルトでは不可視(display: none)な要素となっている。 open 属性が付くと表示される。 <dialog open> <div> <h1>Hello Dialog</h1> </div> </dialog> show()/showModal() しかし、基本的に <dialog> は動的に出てくるため、JS で開くことになるだろう。しかし、 open 属性を動的に付けるのではなく、 show()/showModal() を用いるのが基本だ。 document.querySelector("button.show").addEve
Intro HTML の <dialog> 要素と、 popover 属性、および関連する様々な仕様が標準化され、実装が進められている。 Open UI を中心に進められているこれらの改善は、多くのサイトで共通したユースケースがありながら、長らくミッシングピースとなっていた重要な機能だ。 もし今、同等のユースケースを自前で実装しているのであれば、適切な仕様を用いた実装に刷新することで、従来はほぼ不可能だった UX を提供できるようになる。 今回から、数回の連載形式で、これらの仕様がどのように標準化され、我々開発者はこれをどのように使っていくべきなのかについて解説する。 showModalDialog Modal や Dialog と言われる UI の歴史は Web においても古く、ブラウザでは IE4 くらいのころに独自実装された window.showModalDialog() が最初に
GitHub - nttcslab/japanese-dialog-transformers: Code for evaluating Japanese pretrained models provided by NTT Ltd.
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
2023年8月28日HTML,CSS,JavaScript<dialog> 要素が主要なブラウザすべてに実装され、現実的に使えるようになってきましたが、これをそのまま実際の Web アプリで使うには様々なものが足りません。足りないものを自分で実装していくと、分かりづらい挙動があったり、癖のある実装が必要なことがあります。例えば、<dialog> 要素のデフォルトは中央揃えで、コンテンツに合わせたサイズになりますが、これの位置、サイズ調整やアニメーションをする際に落とし穴があります。 本記事では、以下のアクションシートのようなモーダルを実装する例を通して、<dialog> 要素を使う時の3つの落とし穴を紹介します。 デフォルトのスタイルが分かりづらい #<dialog> 要素にはデフォルトでいくつかのスタイルが設定されていますが、これまでの HTML 要素のデフォルトスタイルと比べると値が特
Introducing the Dialog Element
Although the alert, confirm and prompt JavaScript methods are convenient, they aren’t recommended due to their script-blocking behavior. That’s why we worked with other browser vendors to drive improvements to the <dialog> specification over the last few years. The most important conversations involved accessibility. You can find more complex use-cases, like payment dialogs, on the web. They are c
GitHub - Sanakan8472/copy-dialog-lunar-lander: Play lunar lander in you windows file copy dialog
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
ベン図で表すと以下のようになります。 （あまり一般的でない名称のコンポーネントも便宜上使用しています。） 以降、詳しく解説します。 Modal Modal は、ユーザに特定のアクションを求めるために、ユーザのインタラクション（操作）を中断させる UI コンポーネントです。 難しい表現をするならば、ユーザの操作を「モードに移行」させるコンポーネントと言えます。 もともと、「Modal」という英単語はこちらで言及されているように形容詞です。 そのため、「Modal な〇〇（名詞）」という意味が本来は適切な使い方です。例えば「Modal な Dialog」や「Modal な Drawer」などです。 今日では単に「Modal」だけで使われることが多いので注意が必要です。 Modal はユーザの操作を制限し、ユーザが特定のタスクに集中して対処しなければならない状態を作り出します。 ユーザは「モーダ
モーダルダイアログの未来はdialog要素で幸せになるか
こんにちは、及川です。 今回のテーマはdialog要素です。みなさん、dialog要素はご存知でしょうか？もう現場で使っているでしょうか？ dialog要素はいわゆるダイアログボックスを描画するための実装で、HTML要素の中では比較的新しめの要素です。このdialog要素の仕様を理解し、モーダルダイアログコンポーネントとしてどのように実装するかを学習することが本記事のゴールです。 dialog要素 ってなに？dialog要素はダイアログボックスを表現するためのHTML要素です。 cf) <dialog>: ダイアログ要素 – HTML: ハイパーテキストマークアップ言語 | MDN dialog要素は新しめとは言うものの意外と長い歴史をもっていて、2012年あたりから今の形でHTMLの草案に追加されたり削除されたりを繰り返し、全てのモダンブラウザで動くようになったのが2022年のことです。
モーダルは、ウェブアプリケーションでよく使われる機能であり、実装する事が多い。 便利だし、利用者にとっても見慣れた UI なので導入しやすい。 だが、ブラウザや HTML には、モーダルという要素は用意されていない。 似て非なるものとしてalertがあるが、これはモーダルとして開発者が求めているものとは、多くの面で異なる。 そのためなのか、モーダルを実現するためのライブラリは多数公開されている。 だが個人的な方針として、依存ライブラリはあまり増やしたくない。 かといって自分で開発するのもそれなりに手間がかかる。 そこで、HTML 5.2 で標準化されたdialog要素を使うことにした。 標準化された機能なら、知識やノウハウが陳腐化しにくく、第三者が作ったライブラリより採用しやすい。 そう考え、React アプリのモーダルをdialog要素で実装することにした。 だが、DOM を操作するため
ファイル移動の退屈な待ち時間をゲーム化する「Copy Dialog Lunar Lander」の導入方法を解説＆実際に遊んでみた
サイズの大きなファイルや膨大な量のファイルをコピーする際に生じる「退屈な待ち時間」を持て余す人は多いはず。そんな待ち時間中に表示されるコピーダイアログ上でアクションゲームを遊べるようにする「Copy Dialog Lunar Lander」が登場したので実際に遊んでみました。 Sanakan8472/copy-dialog-lunar-lander: Play lunar lander in you windows file copy dialog https://github.com/Sanakan8472/copy-dialog-lunar-lander 始め方は簡単。まずは「Copy Dialog Lunar Lander」のリリースページから最新のZIPファイル(記事作成時点で「copy-dialog-lunar-lander-v1.0.zip」)をダウンロードし、解凍します。 解
Webページでモーダルウィンドウやダイアログ表示を実装する際はJavaScriptのライブラリやプラグイン等を使って組み込むことが多いですが、HTMLのdialogタグを使うととても簡単に実装することができます。 dialogタグを使用することで、ダイアログを表示させたり非表示にしたりするJavaScript動作をブラウザが処理してくれることになるので、アクセシビリティにもよいと言われています。（dialogタグでも表示するための指示はJavaScriptを使用しますが） IEのサポートも終わり、主要ブラウザでdialog要素がサポートされたことで活用できる機会が増えてきたので実装する方法をいくつかのパターンで紹介してみます。 dialogタグを使ってダイアログ表示 まずは基本的な使用方法として、dialogタグを使った場合のHTMLから。 ダイアログで表示する内容をdialogタグの中に
竹芝にある対話の森にお邪魔しました。今回挑戦したのは、Dialog in the Dark です。視聴障害者の案内により、完全に光を遮断した、純度100%の暗闇の中で視覚以外の様々な感覚やコミュニケーションを楽しむソーシャル・エンターテインメントです。今回は東北地方を旅するという設定でした。百見は一験にしかずです。視覚が全く使えない体験は恐怖でもありました。電車に乗ったり、買い物したり、橋を渡ったり。しかし、他者との協力によって困難を乗り越えていける。ほんの少しの想像力を働かせるだけで、世界わ変わるのかもしれません。日常では得難い経験をすることができました。娘もかなり楽しかったそうです。季節によってシチュエーションは変化するそうなので、また訪れてみたいです。是非、おすすめです。
GitHub - nuxodin/dialog-polyfill: "insert and thats it"-dialog-polyfill
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
この記事の概要 dialog要素、ご存じですか？ その名の通りダイアログ的な振る舞いや役割をする要素です。 モーダルウィンドウと言えばより広く伝わるでしょうか。 簡単なダイアログならライブラリを使わなくても事足りるのですが、スタイルを当てる際に気をつけた方が良さそうなことがあったので記事にしてみました。 注意 Chrome（とEdge）はよっぽど大丈夫ですが、FirefoxとSafariはまだ本番投入してもブラウザが対応していません。 もう少しすれば使えるようになると思うので、今のうちに素振りをしておくのが良いかもと思います。 ポリフィルもあります。 デフォルトのスタイル 2022 年 3 月 4 日現在、ChromeとFirefoxではこのような感じです。 <dialog> <p> 秋も更けて、暁闇がすぐに黄昏となり、暮れてゆく年に憂愁をなげかけるころの、おだやかな、むしろ物さびしいある
大幅な売上増加が見込まれるため、多くの企業がiPhoneのサプライチェーン入りを目指していますが、そこには大きなリスクもあることを知っておいたほうが良いかもしれません。iPhoneのパワーマネジメント集積回路（PMIC）を供給してきた英Dialogは、ようやく最近になってiPhone病（iPhone Disaster）から回復しつつある、と米メディアBloombergが伝えています。 iPhoneサプライヤーになることのリスクとは？ 英企業のDialog Semiconductorは、総売上高に占めるAppleの割合が一時70%を超えるほどの、Appleへの依存度が高い企業として知られていました。 iPhoneのサプライチェーンに入ることで、大幅な売上増加が見込まれる一方、厳しい価格交渉を迫られたり、最悪の場合、Appleが発注していた部品の内製化に乗り出す場合もあります。 売上高の多くを
","naka5":"<!-- BFF501 PC記事下（中⑤企画）パーツ＝1541 -->","naka6":"<!-- BFF486 PC記事下（中⑥デジ編）パーツ＝8826 --><!-- /news/esi/ichikiji/c6/default.htm -->","naka6Sp":"<!-- BFF3053 SP記事下（中⑥デジ編）パーツ＝8826 -->","adcreative72":"<!-- BFF920 広告枠）ADCREATIVE-72 こんな特集も -->\n<!-- Ad BGN -->\n<!-- dfptag ＰＣ誘導枠５行 ★ここから -->\n<div class=\"p_infeed_list_wrapper\" id=\"p_infeed_list1\">\n <div class=\"p_infeed_list\">\n <div class=\"
JSer.info #588 - Lexicalというテキストエディタを作るためのJavaScriptフレームワークが公開されました。 facebook/lexical: Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performance. エディタの状態をdouble-bufferingで管理して、状態の変更をdiff/patchで表示に反映させる仕組みを持っている。 またcontentEditableを使っているが、外部からの変更をMutationObserverで監視し、エディタの状態を更新している。 Lexicalは同じくFacebookが作成しているDraft.jsの後継となるライブラリで、APIの互換性はありませんが、今
Cmd+Shift+A hotkey opens Terminal with "apropos" search instead of the Find Action dialog – IDEs Support (IntelliJ Platform) | JetBrains
Cmd+Shift+A hotkey opens Terminal with "apropos" search instead of the Find Action dialog Follow Symptoms When Cmd+Shift+A hotkey is invoked, Terminal search opens with "appropos" command instead of the Find Action dialog: macOS has been updated to 10.14.4 Cause macOS 10.14.4 adds the new default shortcut for the Search man Page Index in Terminal: Workarounds Disable/change the key binding for the
Dialog component — Vuetify
ダイアログコンポーネントは、特定のタスクについてユーザーに通知し、重要な情報を含む場合や、特定のアクションを取るようにユーザーに要求したりすることができます。
The techniques behind ChatGPT: RLHF, IFT, CoT, Red teaming, and more This article has been translated to Chinese 简体中文. A few weeks ago, ChatGPT emerged and launched the public discourse into a set of obscure acronyms: RLHF, SFT, IFT, CoT, and more, all attributed to the success of ChatGPT. What are these obscure acronyms and why are they so important? We surveyed all the important papers on these
Dialog買収でIoTを強化、「短期間で成果出す」ルネサス：Intersil、IDTに続く大型M＆A ルネサス エレクトロニクス（以下、ルネサス）は2021年2月8日、英Dialog Semiconductor（以下、Dialog）を買収することで合意したと発表した。Dialogの発行済みおよび発行予定の普通株式全てを取得し、完全子会社化する手続きを開始する。1株当たり67.50ユーロで取得する予定で、買収総額は約4886万ユーロ（約6157億円）となる見込みだ。 アナログ／コネクティビティを強化 ルネサス エレクトロニクス（以下、ルネサス）は2021年2月8日、英Dialog Semiconductor（以下、Dialog）を買収することで合意したと発表した。Dialogの発行済みおよび発行予定の普通株式全てを取得し、完全子会社化する手続きを開始する。1株当たり67.50ユーロで取得す
この記事について 2022 年 3 月、Safari15.4で HTML の dialog 要素が標準でサポートされました。 これにより、全ての主要ブラウザ（Chrome, Edge, Safari, Firefox）で dialog 要素が利用可能になり、今まで@react-ariaなどのライブラリに依存していたモーダル実装を見直したいと思っている方も多いのではないでしょうか。 本記事では、HTML の dialog 要素の使い方からアクセシブルなモーダルの要件、それらを全て満たすアクセシブルなモーダルの実装例についてご紹介します 🫡 そもそもアクセシブルなモーダルの要件って何？ そもそもアクセシブルなモーダルの要件とはどのようなものを指すのでしょうか。 Accessible Rich Internet Applications (WAI-ARIA) 1.1やARIA Authorin
Dialog (Modal) Pattern
How to build accessibility semantics into web patterns and widgets About This Pattern A dialog is a window overlaid on either the primary window or another dialog window. Windows under a modal dialog are inert. That is, users cannot interact with content outside an active dialog window. Inert content outside an active dialog is typically visually obscured or dimmed so it is difficult to discern, a
やり抜く力と柔軟さ 金融の世界で 社会貢献でゴールドマン・サックス証券社長・持田昌典さん×朝日新聞DIALOG DIALOG 日本の未来を語ろう：朝日新聞デジタル
やり抜く力と柔軟さ 金融の世界で 社会貢献で ゴールドマン・サックス証券社長・持田昌典さん×朝日新聞DIALOG By 藤崎花美(DIALOG学生記者) 写真：ゴールドマン・サックス社提供 「明日へのLesson」は、次代を担う若者と第一線で活躍する大人が対話するシリーズ。今回は、ゴールドマン・サックス証券社長の持田昌典さん(65)に、外国人材を支援するITベンチャー企業である株式会社LincのCEOの仲思遥さん (29)、 ホームレス支援の認定NPO法人Homedoor理事長の川口加奈さん(29)がオンラインで話を聞きました。 持田さんは、ゴールドマン・サックス日本法人のトップを約20年間務めており、本社経営委員会のメンバーとしてCEO以下、約30人のメンバーに唯一日本人として名を連ねています。そんな持田さんですが、大学まではラグビー漬けの毎日で勉強はせず、英語は全く話せなかったそうです
Replace JavaScript Dialogs With New HTML Dialog | CSS-Tricks
You know how there are JavaScript dialogs for alerting, confirming, and prompting user actions? Say you want to replace JavaScript dialogs with the new HTML dialog element. Let me explain. I recently worked on a project with a lot of API calls and user feedback gathered with JavaScript dialogs. While I was waiting for another developer to code the <Modal /> component, I used alert(), confirm() and
Dialog Components: Go Native HTML or Roll Your Own? | CSS-Tricks
Dialog Components: Go Native HTML or Roll Your Own? As the author of a library called AgnosticUI, I’m always on the lookout for new components. And recently, I decided to dig in and start work on a new dialog (aka modal) component. That’s something many devs like to have in their toolset and my goal was to make the best one possible, with an extra special focus on making it inclusive and accessibl
ScriptUI Dialog Builder
When you take a new snapshot, the import JSON of the current dialog is stored as a separate data point in local storage. This data point is saved in the browser but you can’t export it with the dialog. The only way to export snapshots is to load and export them one by one. When you load a snapshot, it overwrites the current dialog, so be sure to take a new snapshot before loading if you wanna keep
はじめに Modal/Dialog は実際のプロジェクトでもよく使うと思います。 有名な React UI ライブラリのChakra UI や mui にも含まれており大変便利なのですが、 プロジェクト途中からこういったライブラリを導入するのはハードルが非常に高くなってしまいます。 一方、もし自作する場合、普段何気なく使っている Modal/Dialog にも考慮しないといけない仕様も多くわりと大変です。 今回は、自分の中での整理/知識のアップデートもかねて、Dialog を作ってみようと思います。 実装に入る前に 今回ポイントとなる情報を整理します。 Dialog タグ 少し前に追加されたタグで、最近 Safari が対応したことで主なモダンブラウザ全般で利用できるようになりました。 表示/非表示を切り替える showModal / close メソッド、表示状態を表すopen 属性、O
When crafting mobile app interfaces, designers continually encounter the necessity to make decisions. There are numerous ways to convey the same information to users. At times, designers find it challenging to determine which element is most fitting for accomplishing their goals. For instance, how should the information be presented within a given scenario? Should it open on a new screen, a sheet
ページ番号入りの5mm方眼ノート紙は上質紙の代名詞「金菱」。コシがあり、どんな筆記具とも相性が良いです。万年筆も裏抜けしにくいです。
GitHub - megagonlabs/asdc: Accommodation Search Dialog Corpus (宿泊施設探索対話コーパス)
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
a11y-dialog is a lightweight yet flexible script to create accessible dialog windows. Follows the Dialog (Modal) pattern from the ARIA Authoring Practices Guide (APG)Supports alert dialogs as per the WAI-ARIA specificationsSupports nested dialogs (however questionable)Exposes events to react to changesProvides both a DOM and a JavaScript APIPlays nicely with Shadow DOMIs unopinionated with styling
Bot Framework Composer で チャットボットをノンコーディング開発 (2) Dialog (+ユーザー入力、外部 API 利用、条件分岐) - Qiita
Bot Framework Composer で チャットボットをノンコーディング開発 (2) Dialog (+ユーザー入力、外部 API 利用、条件分岐)AzureBotFrameworkAzureBotServiceBotFrameworkComposer Bot Framework Composer は、Bot Framework をベースとしたチャットボットアプリを GUI で作成するツールです。ダイアログの作成や LUIS や QnAMaker を利用した自然言語処理の組み込みをノンコーディングで作成できます。 Bot Framework Composer で チャットボットをノンコーディング開発 シリーズ (1) ひとまず EchoBot 編 (2) Dialog (+ユーザー入力、外部 API 利用、条件分岐) 編 (このページ) (3) Language Understa
純日本企業から世界企業へ進化して、半導体業界での生き残りを狙うルネサス エレクトロクス*1。そのステップに重要な第3の大型買収を2021年2月8日に発表した*2。低電力なPMIC（Power Management IC）や低電力なコネクティビティー（無線通信）ICに強みを持つ、英Dialog Semiconductor（ダイアログセミコンダクター）を約49億ユーロ（約6157億円）で買収する（買収完了は21年中の予定）。同日夕方に開いた報道機関／アナリスト向けオンライン会見で、買収する側、される側のトップが今回の買収への思いを語った。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTMLのdialog要素とフォーム機能 - Hatena Developer Blog
Dialog と Popover #2 | blog.jxck.io
Building a dialog component | Articles | web.dev
<dialog>内でautofocus属性がほぼ必須になる話
dialog要素を使用したモーダルウィンドウの実装例 – TAKLOG
Dialog と Popover #3 | blog.jxck.io
Dialog と Popover #1 | blog.jxck.io
アクションシートの実装から学ぶ <dialog> 要素を使う時の3つの落とし穴 - Katashin .info
これで迷わない！Modal、Dialog、Drawerの違い
React アプリのモーダルを dialog 要素で実装する - 30歳からのプログラミング
HTMLのdialogタグでダイアログ（モーダル）を実装する方法｜BLACKFLAG
【子育て】対話の森 Dialog in the Darkに参加してきました - クマ坊の日記
HTMLのdialog要素をスタイリングするときに気をつけること - Qiita
AppleサプライヤーDialogはどのようにiPhone病を乗り切ったか - iPhone Mania
（明日へのＬｅｓｓｏｎ）第２週：メッセージ マイケル・サンデルさん×朝日新聞ＤＩＡＬＯＧ：朝日新聞デジタル
2022-04-18のJS: Lexical、React Testing Library v13.1.0、Dialog componentの作成
What Makes a Dialog Agent Useful?
Dialog買収でIoTを強化、「短期間で成果出す」ルネサス
dialog要素を使ってアクセシブルなモーダルを作ってみよう
【React/TypeScript】Dialogタグを使ってコンポーネントを作ってみる ver.2022.09
Sheet, dialog, or snackbar — what should a designer go for?
【公式】DIALOG NOTEBOOK｜ページ番号入りの小さな方眼ノート｜ダイアログノート
Introduction | a11y-dialog
脱Apple戦略を評価、世界企業を目指すルネサスがDialogを取得へ
anna3.nm.bex.jp
ameblo.jp/takaman-5918
news.yahoo.co.jp
news.yahoo.co.jp
news.yahoo.co.jp
news.yahoo.co.jp