1728282018
2024-10-07 04:03:30
インスタント HTML プレビュー ブックマークレット
このブックマークレットが役立つ理由
ChatGPT は最近、構造化コンテンツの生成と表示に最適なキャンバス機能をリリースしました。ただし、現時点では HTML または SVG コードの直接プレビューを生成する機能がありません。このブックマークレットは、ブラウザで HTML コンテンツを直接すばやくプレビューできるようにすることで、そのギャップを埋めます。コードを IDE にコピーし、ファイルを保存し、ページを更新する代わりに、これらの手順をすべてスキップして、すぐにコンテンツをライブで表示できます。 ChatGPT または Claude インターフェースの「クリップボードにコピー」ボタンを使用し、このブックマークレットをクリックするだけで、完全な HTML ページとしてレンダリングされたコンテンツがすぐに表示されます。 SVG グラフィックスにも使用できるため、Web 開発やデザインのタスクに多用途に使用できます。
ブックマークレットコード
縮小(ブックマークレットに使用します)
javascript:(function(){try{navigator.clipboard.readText().then(function(clipboardText){if(clipboardText){var newWindow=window.open("","_blank","width=800,height=600");newWindow.document.open();newWindow.document.write(clipboardText);newWindow.document.close();}else{alert('Clipboard is empty. Please copy some text to the clipboard first.');}}).catch(function(err){console.error('Failed to read clipboard contents: ',err);alert('An error occurred while trying to access the clipboard. Please ensure your browser allows clipboard access.');});}catch(e){console.error('An error occurred:',e);alert('An error occurred while trying to open the new window with the clipboard content.');}})();
縮小されていません
javascript:(function() {
try {
// Read the text from the clipboard
navigator.clipboard.readText()
.then(function(clipboardText) {
// Check if there is any content in the clipboard
if (clipboardText) {
// Open a new window with specified width and height
var newWindow = window.open("", "_blank", "width=800,height=600");
// Open the document in the new window and write the clipboard content to it
newWindow.document.open();
newWindow.document.write(clipboardText);
newWindow.document.close();
} else {
// Alert the user if the clipboard is empty
alert('Clipboard is empty. Please copy some text to the clipboard first.');
}
})
.catch(function(err) {
// Handle any errors that occur while reading from the clipboard
console.error('Failed to read clipboard contents: ', err);
alert('An error occurred while trying to access the clipboard. Please ensure your browser allows clipboard access.');
});
} catch (e) {
// Handle any other unexpected errors
console.error('An error occurred:', e);
alert('An error occurred while trying to open the new window with the clipboard content.');
}
})();
ブックマークレットを保存する方法
- 縮小されたブックマークレットのコードをコピーする その上。
- ブックマークバーを開く Chrome (または別のブラウザ) で。
- ブックマークバーを右クリックします をクリックし、「ページを追加…」または「ブックマークを追加」を選択します。
- で URLフィールド、ブックマークレット コードを貼り付けます (必ず次で始まるようにしてください)
javascript:)。 - ブックマークに名前を付けます (例: 「HTMLプレビューア」)をクリックしてください “保存”。
使用方法
- HTML コンテンツがクリップボードにコピーされていることを確認してください。
- をクリックするだけです HTML プレビューア ブックマークバーにブックマークを追加します。
- 新しいタブが開き、HTML コンテンツが即座に表示されます。
利点
- 時間を節約する IDE を開いたり、ファイルを保存したり、ブラウザを更新したりするプロセスをスキップします。
- 変更を即座にプレビュー 追加のツールを必要とせずに、HTML に追加できます。
このブックマークレットを使用すると、開発プロセスを合理化し、HTML コンテンツに関するフィードバックを迅速に得ることができます。ワンクリックでシームレスな即時プレビューをお楽しみください。
#Clipboard.url #からの #rmtbbChatGPT #Canvas #HTML #レンダラー