Webページの特定テキストへ直接ジャンプしてハイライトするリンクの作り方／「Chrome」「Edge」は標準機能で、「Firefox」は「Link to Text Fragment」拡張機能で【レビュー】
タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
Intro ページ内の特定の位置へのスクロールは、 URL フラグメントと HTML の ID 属性を用いて行われていた。 しかし、 ID を持たない要素へのスクロールというユースケースをカバーするために、フラグメントの拡張仕様が提案されている。 Chrome がフラグ付きで実装しているため、この仕様の特徴について解説する。 id 属性とフラグメント 従来の仕様では、 HTML 内にある ID 属性を URL フラグメントに付与することで、その要素まで自動でスクロールするという仕様になっていた。 https://html.spec.whatwg.org/multipage/browsing-the-web.html#try-to-scroll-to-the-fragment https://html.spec.whatwg.org/multipage/browsing-the-web.ht
GraphQL の Fragment でコンポーネントの見通しがよくなった話 - vivit engineering blog
vivit株式会社でフロントエンドエンジニアをしている関です。 新型コロナウイルス感染症(COVID-19)への対策として発出された緊急事態宣言の影響で、弊社も2ヶ月ほどリモートワークとなり、私も駆け足で自宅に作業環境を構築しました。買っちゃいましたL字デスク。 さて、弊社ではいくつかのプロダクトのフロントエンドに React(Next.js) + TypeScript を採用しており、バックエンドとの通信には GraphQL(Apollo) を採用しています。 今回はその中で、コンポーネント分割をする際の GraphQL Query の定義と取得したデータの受け渡しについて話をします。 ここからは GitHub GraphQL API v4 を使って説明していきます。 developer.github.com アジェンダ pages から components へのデータの受け渡し方法に
Fragment をコンポーネントのトップに置くな「Fragment をコンポーネントにトップに置く」というのは下のようなコンポーネントを作成することを指します。 export const MyComponent = () => { return ( <> <h1>This is a sample code.</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Dui
GraphQLのFragment活用テクニック: colocationとmasking - ドワンゴ教育サービス開発者ブログ
GraphQLのFragment活用テクニック: colocationとmasking こんにちは。N 予備校 Webフロントエンド開発チームの中村です。 現在開発中のZEN CompassではGraphQLを採用しました。我々のチームでは（そして私個人としても）GraphQLを採用したのは初めてだったのですが、実際に設計を進めていくうちに色々と知見を得ることができました。今回はその中でも特に重要だと思った、GraphQLのFragmentという仕様を活用したコンポーネント設計のテクニックについてお話ししようと思います。GraphQLを使用したWebアプリケーションに興味がある方にとって何か参考になりましたら幸いです。 【ZEN Compass】 学習者を導く先生方などが利用するコーチング支援Webサービスです。 LMS(Learning Management System)として学習状況
Exploring the Implementation of “t.Run”, “t.Parallel”, and “t.Cleanup”
GraphQL の Fragment Colocation を導入したら依存関係がスッキリしてクエリもコンポーネントも書きやすくなった
この記事は Money Forward Engineering 1 Advent Calendar 2022 11 日目の投稿です 🎄 昨日 10 日目は cabossoldir さんによる 『コードレビューのとき、私は何をレビューしているのか？』 でした。 🙈 TL;DR Fragment Colocation とは、コンポーネントが必要とするデータを Fragment にまとめてコンポーネントと同じ場所に配置 (co-locate) すること Fragment Colocation を導入することで、「Query や Mutation を実行するコンポーネント」と、「それらの結果を必要とするコンポーネント」との関心の分離ができる Query, Mutation, Fragment はそれを実行するあるいは必要とするコンポーネントと同じファイル内に宣言すると依存関係が見やすく、変更が
この辺りは Android 初学者を混乱させる存在なのだけれど、人に説明していて結構骨が折れた＆いい資料があるといいなと思ったので。 事実誤認とかあるかもです。鵜呑みにしないでね。 TL;DR AndroidX を入れる AppCompatActivity を継承して Activity を実装する Theme.AppCompat.NoActionBar や Theme.MaterialComponents.NoActionBar など、NoActionBar 系のテーマを、アプリケーションのテーマの parent に指定する Layout XML 上で、androidx.appcompat.widget.Toolbar を配置する setSupportActionBar() で Toolbar を ActionBar として設定する Android にはこのような お作法 があり、新しくプ
FragmentでViewの参照を持つとメモリリークする話と実装 Updated at Sat, Jan 18, 2020 View Bindingのドキュメントが更新され、onDestroyViewのタイミングで保持しているBindingの参照を解放する節が追記されました。 Use view binding in fragments Fragment自体のライフサイクルのほうが、FragmentのViewのライフサイクルより長いので、FragmentでBindingの参照を保持するとリークしてしまうためです。 この記事では、メモリリークをしないために、どのような実装が考えられるかを紹介していきます。 1. onDestoryViewで解放する 公式ドキュメントに載っている方法です。 // onCreatedViewで初期化 private var _binding: ResultProf
UseCaseの凝集度を高める Goのpackage戦略 / Go packaging strategy to increase use case cohesion
Intro Scroll to Text Fragment のユースケースとして、本サイトにサイト内検索を実装した。 Scroll to Text Fragment Scroll to Text Fragment(以下 S2TF) は Chrome 80 で Ship され、 Finch で展開されている。 まだ降りてきてない場合は、 Flag による有効化が必要だ。 詳細は以前このブログでも書いている。 Scroll To Text Fragment と :~:text | blog.jxck.io この機能の使い道の一つとして、検索結果の Deep Link への適用があると考え、 PoC として実装した。 検索結果への適用 このサイトを CSP というキーワードで検索した場合を考える。 検索対象は、記事の本文とすると、例えば以下の一文がヒットする。 Feature Policy のモ
超リアルUE5製サバイバルホラー『LOST FRAGMENT - 失われた欠片』発表。実写と見紛う日本の廃病院映像が注目を集める - AUTOMATON
デベロッパーのNIHIL INANE STUDIOは8月30日、『LOST FRAGMENT – 失われた欠片』を発表した。開発にはUnreal Engine 5が採用されており、公開された動画を見たX（旧Twitter）ユーザーを中心に注目を集めているようだ。 『LOST FRAGMENT – 失われた欠片』は、サバイバルホラーゲームだ。公開された動画は荒廃した病院が舞台となっており、「ナースステーション」といった表記から日本の病院と見られる。動画は拳銃を片手に病院の内部を散策する主人公の視点で描かれている。動画の前半では日が差し込んでいた風景も、後半では一変。突如として闇が包み込み、不穏な物音が周囲から聞こえるようになる。動揺する主人公が音を発していた物体の正体を突き止めようとするところで、動画は終わっている。 本動画は、公開後すぐさまXユーザーからの注目を集めているようだ。ユーザーの
Browser extension that allows for linking to arbitrary text on a page. Update: Chrome now has a built-in feature ("Copy Link to Highlight" in the context menu) to copy text fragment links. The extension has an additional feature that allows you to also copy rich links. You can activate this feature in the options. This extension allows for easily creating a special link to the currently selected t
ep.53 Vue 3 Study 『Vue.js にもやってくる Fragment』 | UIT INSIDE
@spring_raining が @potato4d に、 Vue 3 の Fragment について聞いてみました。 ゲスト @potato4d フロントエンド開発センター フロントエンドエンジニア UIT で行っている Vue 3 についての勉強会 Vue 3 の RFC を読みながら新しい機能を紹介 Vue 3 Fragment Vue 3 で導入される、実際には描画されない DOM 要素のようなもの Web 標準に DocumentFragment があり、それを Vue で表現している https://developer.mozilla.org/ja/docs/Web/API/DocumentFragment React には React.Fragment あるいは <></> として既に導入されている https://ja.reactjs.org/docs/fragments
TL;DR 考え方 コンポーネントとセットで、そのコンポーネントが必要なデータを Fragment で宣言する、React の宣言的 UI に合わせた宣言的データ取得（declarative data-fetching）という考え方 Component Scopedに取得データを宣言することで「そのコンポーネントで必要なデータはなにか」を管理しやすくなることで、under-fetching / over-fetching が抑制でき、変更にも強くなる お悩みポイント Fragment-scoped な変数を定義するための標準機構がない Relay は directive を利用した独自の機構を持つ 便利そうなライブラリ graphql-anywhere クエリ結果を Fragment の形に整形する not actively support apollo-link-fragment-arg
Fragment-based in silico創薬とは？ Fragment-based 創薬（フラグメントベースの薬剤開発（FBDD）)とは、コンピュータを使って新しい薬剤を設計・開発する手法の一つです。この手法では、小さな分子の断片（フラグメント）もしくは既存のリガンドの断片を使用して、断片を伸ばしたりして、薬剤の設計や最適化を行います。このようなフラグメントベースのアプローチは、複雑な分子間相互作用を解析し、既知の薬剤からさらに活性のある新しい薬剤の設計を効率的かつ費用対効果の高い方法で行うことができます。また、実験的なスクリーニングや化学合成の手間や費用を削減することができるため、創薬のスピードや効率を向上させるのに役立ちます。 ACFIS2.0とは？ ACFIS（Auto Core Fragment in silico Screening）サーバーは、FBDDにおいて潜在的な薬剤
Navigation 2.3.0-alpha02 からNavControllerに currentBackStackEntry と previousBackStackEntry が追加され、これらを使ってFragmentの戻り値を処理することが可能になりました。 内部的には各BackStackで SavedStateHandle と ViewModel を使ってるようです。 呼び出し元Fragment 呼び出し元のFragmentでは、 currentBackStackEntry の SavedStateHandle からLiveDataを取得して、それをobserveしておきます。 遷移後のFragmentで値が設定された場合にこの画面が再び表示されると、ここに通知されます。 値を返すFragment 値を返すには previousBackStackEntry の SavedStateH
Fragment が SavedStateHandle で保存したオブジェクトを2重に保持してしまう問題の発見と解決までの道のり - Giftmall Inside Blog
こんにちは。@KeithYokoma です。今回はこれまでの投稿からは少し話題を変え、AndroidX Fragment ライブラリに関する問題の発見と解決にまつわることを解説しようと思います。 画面の状態を保存する時に TransactionTooLargeException が多発し始める 以前の記事でも紹介しましたが、ギフトモールアプリでは次のような構成で画面を実装しています。この構成で Unidirectional なデータフローを作ることが第一の目的ですが、SavedStateHandle を組み合わせることによって ViewModel の状態の保存と復帰も実現しています。ギフトモールアプリでは ViewState で ViewModel の状態を表現しているため、ViewState の保存と復帰を共通化しています。 // 共通のベースとなるインタフェースと ViewModel
Apollo ClientのキャッシュでInterfaceやUnionを利用する (WARNING: heuristic fragment matching going on!) - Qiita
Apollo ClientのキャッシュでInterfaceやUnionを利用する (WARNING: heuristic fragment matching going on!)JavaScriptGraphQLapollo Apollo Clientのキャッシュ機能は便利で特に設定をせずにそのまま使えてたのですが、UnionやInterfaceを利用する際に工夫が必要だったのでご紹介します。 問題 Apollo ClientでUnionやInterfaceを含んだクエリを扱うと以下のようなWarningが出ました。 これはFragment MatcherというApollo Clientのキャッシュ機構に使われているもので、デフォルトのものだとInterfaceやUnionには対応できないため警告がでています。 これを解決するためにはサーバーで定義されたスキーマに対応したFragment
【ACFIS 2.0】Fragment-Based Drug Discovery Using ACFIS 2.0 【In Silico Drug Discovery】 - LabCode
This article introduces the in silico drug discovery technique called Fragment-based Drug Design (FBDD). It explains how to use the FBDD software ACFIS 2.0 to discover drugs for Parkinson’s disease on your own computer and also provides specific compounds as examples. By learning about it, you can understand the latest drug discovery technology, ACFIS 2.0, and experience drug discovery on your own
FragmentManager.popBackStack()で、ひとつ前の画面へ戻すことができますが、いくつか飛ばして、最初の画面に戻したいことがあります。 結論から言うと以下の対応で可能です。 //ルート画面に戻る val rootEntry = parentFragmentManager.getBackStackEntryAt(0) parentFragmentManager.popBackStack( rootEntry.id, FragmentManager.POP_BACK_STACK_INCLUSIVE ) なお、それまでの画面遷移の際には、以下のようにBackStackに追加している前提です。 parentFragmentManager.commit { addToBackStack(null) replace(R.id.container, nextFragment) }
Activity/Fragment単位でVisual Regression Testingを実行する
大規模UIKitベースアプリへのTCAの段階的導入/gradual-adoption-of-tca-in-a-large-scale-uikit-based-app
日本のストリートカルチャー黎明期から、 現代のラグジュアリーブランドとの協業に至るまで。 様々なブームやヒットプロダクトを生み出し続けてきた。 その背景にあったのは、 本人も「まったく意識していなかった」と語る嗅覚とセンス。 いわゆるマーケティング論とは無縁。 むしろ、それらに逆行して生きてきた。 独自のインプット術、発想術、コラボ術、 それらを「非言語マーケティング」と題し体系化。 自ら教壇に立ち、半年間かけて伝えていく。 2023年秋。前例のない講義がはじまる。 FRAGMENT UNIVERSITY 事務局 受講者へのメッセージ僕が「教えること」は何もないと思うんですが、 皆さんが「学べること」はあるのかもしれません。 見てきた景色、経験したこと、ざっくばらんにお話しします。 過去から今へと繋がる様々な出来事を、 フラグメント大学のスタッフと共に解き明かしていきたいと考えています。
“ ウェブページ内の特定テキスト ” をリンク先とした URL を生成できるようにする Chrome 拡張機能＆ Firefox アドオン「Link to Text Fragment」
「Link to Text Fragment」は、ウェブページ内の特定箇所へリンクを張れるようにするブラウザ拡張機能です。 “ ウェブページ内の特定テキスト ” をリンク先とした URL を一発生成できるようにし、選択したテキストのある場所へとすぐにジャンプできるようにしてくれます。 （また、生成された URL を開くと、リンク先として指定されているテキストが強調して表示される） 操作は、テキスト選択時の右クリックメニュー、あるいはホットキーから実行することができ、生成された URL に関しては、「Link to Text Fragment」をインストールしていないブラウザ上でも有効に使えるようになっています※1。 （私の環境では、ホットキーが正常に動作しませんでした） ※1 ただし、旧 Microsoft Edge、Internet Explorer、Waterfox Classic な
Photo by krakenimages on UnsplashA solid understanding of how Fragment works is essential when one working with Android Development. However, Fragment is still a complicated subject, and one can commonly miss out on something.
はじめに この記事では GraphQL の Fragment Colocation という考え方を紹介します。 REST を使用していた頃から不満に感じていたものの、解決が難しいと感じていた課題が Fragment Colocation で見事に解決されたため GraphQL を使用している場合必ず知っておいた方が良い概念だなと思います。 また、前提としてこの記事では Apollo（もしくは Urql 等のデータフェッチライブラリ）を使用していることを想定しており、サンプルコードはReactで記述しています。 Relay を使用している場合フェッチデータの宣言をデータを使用するコンポーネントで記述することが強制されるため、自然と Fragment Colocation を使用した実装になります。 この記事で書くこと Fragment Colocationの紹介・基本概念の説明 この記事で書
Przemo Plewiński on Twitter: "Fragment filmu wrzuconego przez ruskich. Czy tylko mi się wydaje, że ten operator kamery jest wyjątkowo odważny i i… https://t.co/Bw9hSfbYFB"
Fragment filmu wrzuconego przez ruskich. Czy tylko mi się wydaje, że ten operator kamery jest wyjątkowo odważny i i… https://t.co/Bw9hSfbYFB
コンポーネントとGraphQLクエリの管理にFragment Colocactionを導入したら素晴らしかった件 - Uzabase for Engineers
はじめまして、NewsPicks Web Product Unitのじゆんきち(@junkisai)です。 弊チームでは、ここ1年間くらいWeb 版のNewsPicksを新しい基盤に置き換えるプロジェクト（以降、リアーキプロジェクト）を進めています。 新 Web 基盤のフロントエンドはReact (Next.js)+TypeScriptを採用しており、バックエンドとの通信にはGraphQL(Apollo) を採用しています。 今回はFragment Colocationという考え方を導入したら、これまで抱えていた技術的な課題が解消され、開発スピードが向上したお話をしようと思います。 導入前の課題 課題1. BFFとの通信回数が多い 課題2. クエリを書く際に必要な項目が漏れていたり、不要な項目が残ったままになる 課題3. ドメイン知識をもったコンポーネントの振り分けルールが曖昧 そこでFr
viewLifecycleOwnerLiveData を使って Fragment の onDestroyView() で自動で null がセットされる ViewBinding 用の property delegates を作る
viewLifecycleOwnerLiveData を使って Fragment の onDestroyView() で自動で null がセットされる ViewBinding 用の property delegates を作る ViewBinding のドキュメントでは Fragment で使う時の実装はこのようになっています。 class LoginFragment : Fragment() { private var _binding: FragmentLoginBinding? = null private val binding: FragmentLoginBinding get() = _binding!! override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInsta
[ViewLifecycleProperty] Fragment でプロパティを Not Null で省メモリで onDestroyView でアクセスしても安全な AutoClearedValue に｜wada811
[ViewLifecycleProperty] Fragment でプロパティを Not Null で省メモリで onDestroyView でアクセスしても安全な AutoClearedValue にする方法 Fragment でプロパティの生存期間を View の生存期間と一致させる方法はいくつかあります。しかし、満たしたい要件に応じて適切な方法を選択するためには Fragment のことを良く知っている必要があります。 ここでは、そのようなプロパティが満たしたい要件と定義する方法を整理し、すべての要件を満たす ViewLifecycleProperty を紹介します。 TL;DRそれぞれの方法の比較表は以下の通りです。 ViewLifecycleProperty がすべての要件を満たしていてオススメです。 # プロパティが満たしたい要件 ## 再初期化: View のライフサイクル
![[ViewLifecycleProperty] Fragment でプロパティを Not Null で省メモリで onDestroyView でアクセスしても安全な AutoClearedValue に｜wada811](https://cdn-ak-scissors.b.st-hatena.com/image/square/6a30f1fabc90383f17230fc4916ccddc7e5970f1/height=288;version=1;width=512/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F29718862%2Frectangle_large_type_2_1eb1e9b55e5edd22dbd078ab26b4a187.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280)
大口注文に関するお問い合わせ 製品への名入れのご依頼 製品のお取り扱い・協業のご相談 Anker Store に関するご相談
androidx.fragment:fragment:1.1.0-alpha07 で userVisibleHint は deprecated になりました
androidx.fragment:fragment:1.1.0-alpha07 で userVisibleHint は deprecated になりました 「ViewPager + FragmentPagerAdapter での setVisibleUserHint の挙動」の冒頭で軽く言及しましたが、androidx.fragment:fragment:1.1.0-alpha07 で FragmentPagerAdapter および FragmentStatePagerAdapter に変更が入っています。 1.1.0-alpha08 でも変更が入っており、以下の挙動は 1.1.0-rc01 で確認しています。 今まで FragmentPagerAdapter および FragmentStatePagerAdapter のコンストラクタでは FragmentManager だけを渡して
GitHub - WICG/scroll-to-text-fragment: Proposal to allow specifying a text snippet in a URL fragment
To enable users to easily link to specific content in a web page, we propose adding support for specifying a text snippet in the URL. When navigating to such a URL, the browser understands more precisely what the user is interested in on the destination page. It may then provide an improved experience, for example: visually emphasizing the text or automatically bringing it into view or allowing th
GitHub - github/include-fragment-element: A client-side includes tag.
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
You are using the simple (heuristic) fragment matcher, but your queries contain union or interface types. Apollo Client will not be able to accurately map fragments. To make this error go away, use the IntrospectionFragmentMatcher as described in the docs: https://www.apollographql.com/docs/react/recipes/fragment-matching.html
GraphQLのFragmentについての話
GraphQL における Fragment とは GraphQL におけるFragmentとは、複数のqueryやmutationの間で共有することができるロジックのことです。 Fragmentを単体で定義すると下記のように書けます。 Fragmentには関連付けされたタイプに属するフィールドが含まれます。 上記の例だと Person 型は NameParts フラグメントが有効であるため、 firstName フィールドと lastName フィールドを宣言する必要があります。 そして、Person型のオブジェクトを取得するqueryを定義するときは下記のように書くことができます。Fragmentはスプレッド構文で記載できます。 実際にはfirstName,lastNameが展開されてフィールドにアクセス可能になっています。
Good components are reusable. And reusable components don't make assumptions about where they will be used. This means a few things: 1. Components should not have an effect outside of their boundaries. This is well explained in “Margins and Composability in CSS” by @giuseppegurgone and “Margins considered harmful” by @mxstbr. 2. Components should not implicitly rely on their context. Recently, dur
gql-tag-operations-preset を使った GraphQL の Fragment Colocation
普段 GraphQL を使ったフロントエンド開発をしています。最近 GraphQL Code Generator の設定を見直しており、いくつかの plugin や preset を採用したり削除したのですが、その中でも gql-tag-operations-preset がとても良かったので、もともとの構成と gql-tag-operations-preset を導入した後の構成を比較して記事に残しておきます。 また、 gql-tag-operations-preset を導入することで、 Relay 以外の GraphQL Client でも Fragment Colocation が扱いやすくなります。 私は Apollo ユーザーなので Relay の Fragment Colocation を原則とした開発体験を羨ましく思っていたのですが、 Apollo でも少し近づいた開発体験
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Scroll To Text Fragment と :~:text | blog.jxck.io
Fragment をコンポーネントのトップに置くのはアンチパターンではないかと考える | stin's Blog
![エリートの、エリートによる、エリートのための“反民主主義”――とその解毒薬 | p2ptk[.]org](https://cdn-ak-scissors.b.st-hatena.com/image/square/a6372461faa955f5542d8de3768208198e687392/height=288;version=1;width=512/https%3A%2F%2Fp2ptk.org%2Fwp-content%2Fuploads%2F2024%2F05%2Fscientific-deliberation.jpg)
「Microsoft Edge」にいつの間にか追加された［強調表示するリンクのコピー］コマンドって？／Google検索でも活用されているText Fragment/Scroll to Text Fragment【やじうまの杜】
Fragment Composition of GraphQL
Fragment と Toolbar の歴史の話 - Qiita
FragmentでViewの参照を持つとメモリリークする話と実装
最新のFragment事情 / Fragment new features
Scroll to Text Fragment を用いたサイト内検索の実装 | blog.jxck.io
Link to Text Fragment
【ミニレビュー】8mmフィルム風に撮れるムービーカメラ「Fragment 8 Retro Camera」
GraphQL の Fragment Colocation について
【ACFIS2.0】ACFIS2.0を用いたfragment-based 創薬【in silico創薬】 - LabCode
NavigationでFragmentの戻り値を扱う
【Android】ルートのFragmentに戻す方法
FRAGMENT UNIVERSITY | 非言語マーケティング 藤原ヒロシの特殊講義
7 Common Mistakes Easily Made with Android Fragment
GraphQLのFragment Colocationのススメ
FRAGMENT / ANKER | プロが選ぶ、充電器。
ApolloClient におけるFragment Matcher - tasuwo's notes
Avoid React.Fragment in reusable components
news.infoseek.co.jp
mainichi.jp
www.tokiwa.or.jp
drhitsuji.com
riho.ub.geo.jp
forbesjapan.com