ログインの先にあるページを Figma に取り込む
Figma に持っていきたいページは、たいていリンクを貼れないページです。URL を貼るとなぜログインフォームが返るのか、それを越えるツールで何を確かめるべきか。
Figma に本当に持っていきたいページは、たいていリンクを貼れないページです。社内の管理ツール、ログインして初めてデータが埋まるダッシュボード、まだ公開していないステージング環境。変換ツールに URL を貼ると、ログイン画面が返ってきます。向こうが実際に見たのがそれだからです。
回避する方法はありますが、裏技ではなく構造が違うだけです。URL 方式がここで止まる理由、代替手段が実際に何をしているのか、非公開ページをどのツールに通すにせよ何を確かめるべきかを整理します。
URL を貼る方式が成立しない理由
ツールが URL を求めるとき、その URL を開くのはツール側の何かです。サーバーか、サーバー上で動くヘッドレスブラウザ。その機械は自分のネットワーク位置と、自分の空の Cookie 入れを持っています。あなたではありません。
ですから匿名の訪問者としてダッシュボードに着き、匿名の訪問者が受け取るものを正確に受け取ります。ログインフォームです。何度やり直しても変わりません。足りないのはあなたのセッションで、セッションはあなたのブラウザの中にあるからです。
この失敗がこれほど一貫している理由もそこにあります。誰かが直せるバグではありません。サーバーは、あなたであることを要求するページを見られないのです。
うまくいかない回避策
- セッション Cookie をツールに貼る。 ヘッダーを受け付けるツールもあります。セッショントークンを第三者に渡す居心地の悪さは措くとしても、最近の認証は寿命が短く Cookie ひとつに縛られていないので、たいてい失敗します。
- ページを一時的に公開にする。 ステージングならたまに可能です。実運用中のものではまず無理ですし、ページがレンダリングする内容自体が変わります。
- スクリーンショットを撮ってなぞる。 絵が手に入ります。Figma に取り込む理由が編集できるレイヤーなのに、スクリーンショットにはそれがありません。
成立する方法：すでに入っているブラウザの中で取り込む
変換が自分のタブの中で起きるなら、セッションの問題は消えます。解決したのではなく、そもそも発生しないのです。ページはすでに目の前にレンダリングされています。ログイン済みで、データが読み込まれ、メニューは自分が開いたままの状態で。そこで動く変換器は、あなたが見ているものを読みます。
ブラウザ拡張型のインポーターがこの方式で、いまは複数のツールが拡張を出しています。はっきり書いておきます。ログイン済みページを取り込めること自体は、特定のツールだけの能力ではありません。 html.to.design もログインや VPN の先のページ向けに拡張を出していますし、ほかにもあります。ここで独占的な能力を主張しているページを見かけたら、確かめてください。
ツールごとに分かれるのは、取り込んだあとに何が起きるかです。
代わりに問うべきこと：取り込んだものはどこへ行くのか
ブラウザがページを読んだあと、そのデータは Figma まで届かなければなりません。経路はふたつあり、この違いのほうが取り込みの段階より重要です。
サーバーを経由する経路。 拡張がキャプチャをアップロードし、Figma プラグインがダウンロードします。便利です。そして非公開ページの中身、つまりテキストも顧客名もダッシュボードの数字も、自分が管理していないインフラを通るということでもあります。この方式のツールはたいてい、ローカルファイルの選択肢も用意しています。キャプチャを自分でダウンロードしてプラグインに渡す方式です。ただしそれが既定であることは少なく、存在を知っていないと選べません。
サーバーをまったく経由しない経路。 キャプチャはクリップボードかディスクへ行き、Figma プラグインがそこから読みます。アップロードする先がないのでアップロードされません。
NDA のかかったページ、顧客データが載っているページ、規制のある環境の画面を扱うなら、セキュリティ担当が気にするのはこの区別です。「ログインページに対応しているか」ではなく、この分野はどれも対応しているので、「中身が端末を出るのか、それを検証できるのか」です。
主張を信じる代わりに、自分で確かめる
ふたつあり、どちらもすぐ終わります。
Figma プラグインの manifest を読む
Figma のプラグインはすべて manifest でネットワークアクセスを宣言し、Figma がその宣言を強制します。なしと宣言したプラグインは、コードが何を試みようと通信できません。Snapture Import はこう宣言しています。
"networkAccess": { "allowedDomains": ["none"] }誰かが守ると約束した方針ではなく、プラグインが持っていない能力です。インストール済みのプラグインなら、どれでも manifest を読めます。
ネットワークタブを見る
DevTools を開いて Network に切り替え、キャプチャを実行します。拡張が出すリクエストが見えます。Snapture ならページ自身の画像と、有料プランならライセンス確認がひとつ。ページの中身をアップロードしているツールなら、ここで分かります。
何が来て、何が来ないか
レンダリングされたページを取り込むと、いま見ている状態がそのまま手に入ります。URL 方式では公開ページでも届かないものまで含めて。
- 開いたメニュー、モーダル、ポップオーバーは開いたまま入ります。読み込み直すのではなく、現在の DOM を読むからです。
- ログインして初めて存在するデータが本物のテキストとして来ます。表の行、チャートの値、隅にある自分の名前まで。
- パスワード欄はツールが取り込む時点で伏せるべきです。Snapture は値を点に置き換えてから書き出します。何か入力したフォームを取り込む前に、使うツールが同じことをするか確かめてください。
どのツールでもレイヤーとして来ないものがあります。WebGL キャンバス、別オリジンの iframe、動画のフレームです。ピクセルが DOM で説明されていないので、何をもってしてもベクターにはできません。妥当な挙動は灰色のプレースホルダーではなくその領域ぴったりの鮮明なスクリーンショットを入れることで、Snapture はそうしています。
社内ダッシュボードを取り込む実際の手順
- ログインして、欲しい状態にします。取り込みたいパネルやモーダルがあれば開いておきます。
- いちばん下まで一度スクロールして戻ります。ダッシュボードは行やチャートを遅延読み込みするので、描画されていないものは取り込めません。
- ページ全体を取り込むか、パネルひとつでいいなら範囲をドラッグします。
- Figma に貼り付けます。フォントが代替されたら、そのページが使っていたフォントを入れて取り込み直してください。代替フォントはテキストを測り直させ、その後ろがすべてずれます。
ダッシュボードがとても大きいなら、全体ではなく必要な区画だけを取り込んでください。どのツールにも上限があり、欲しい部分を範囲で取り込むほうが、途中で上限に当たった全ページより速く正確です。
まとめると
URL 方式の変換ツールはログインの先を見られず、これは誰かが埋める隙間ではなく構造です。ブラウザ拡張で取り込めば解決し、それを提供するツールは複数あります。問う価値があるのはログインページに対応しているかではなく、そのあとページの中身が自分の端末を出るのかどうかで、それは一分ほどで自分で確かめられます。
自分のページで試す 無料キャプチャ5回、全機能つき。カードも会員登録も不要です。English · 한국어 · 日本語 · 简体中文 · 繁體中文 · Español · Português · Français · Deutsch · Русский · Italiano · Bahasa Indonesia