HTMLビューア
HTMLファイル、あるいはAIがたった今出力したコードブロックを貼り付けると、実際のページがすぐに見えます。左で編集すると右に即反映。すべてブラウザ内で動き、リンクにするまで何もアップロードされません。
このページをリンクにする
ワンクリックで、今のHTMLがそのまま無料のhdplyアドレスに公開されます。お試しにアカウントは不要。リンクは1時間有効で、無料アカウントを作れば永久に残ります。
このビューアがすること、しないこと
プレビューはサンドボックスのフレームです。HTMLは自身のスクリプトとスタイルで動きますが、隔離されたオリジン内にあるため、このページやCookie、タブ内の他の何も読めません。1行ずつ読んでいないコードを貼り付けても安全な理由です。
ファイル1つから訪問者が受け取るものをそのまま描画します。HTMLが相対パスで参照するもの — styles.css、images/hero.jpg、script.js — はここには存在せず、ファイル1つをアップロードするホストにも存在しません。プレビューにスタイルが当たっていないならそれが原因です。CSSをインラインにするか、絶対URLを使ってください。
スマホ・タブレットの幅は縮小スクリーンショットではなく実際のビューポート幅なので、メディアクエリが実機と同じように効きます。誰かにリンクを送る前にスマホ表示に切り替えて確認を。受け取る人の多くはスマホで開きます。
よくある質問
貼り付けたHTMLはどこかにアップロードされますか?
いいえ。描画はブラウザ内のサンドボックスフレームで行われます。「リンクを取得」ボタンを押すまでこのタブの外には何も出ず、押してもエディタ内のHTMLだけが送られます。
手元のファイルと表示が違うのはなぜ?
ほぼ相対パスが原因です。styles.cssやimages/photo.pngのようなリンクはディスク上でHTMLの隣にあるファイルを指しますが、ビューアには見えません。CSSは<style>タグに入れ、画像はhttps://の完全なURLかdata URIにすれば一致します。
プレビューでJavaScriptは動きますか?
はい。スクリプトはこのページから隔離されたサンドボックス内で実行されるため、インタラクティブなページ、グラフ、小さなアプリが動きます。フレーム自身のCookieやローカルストレージが必要な機能はサンドボックスの制限を受けることがあります。
サイズ制限はありますか?
ビューアにはありません。「リンクを取得」の段階では1ページ1MBまで受け付けます。自己完結したファイルには十分な容量で、大きな画像は外部URLに置いてください。