[pdf.js] 手軽にPDFファイルをHTMLに埋め込めるWebComponentを作った - Qiita
PDFファイルを手軽にHTMLに埋め込みたい PDFファイルをHTMLに埋め込む場合、従来だと<iframe>タグを使用するか、pdf.jsを使用する方法、Google Driveのプレビュー用URLを使う方法がありました。 ただし、それぞれ <iframe>タグを使用する方法 → PCのみ埋め込み可、スマホ非対応❌ pdf.jsを使用する方法 → スマホに対応しているが、公式サイトからzipファイルを解凍し自分でサーバーに設置する必要がある（面倒）⚠️ Google Driveのプレビュー用URLを使う方法 → 複数のPDFを埋め込むと挙動が不安定になってしまった＆公式でサポートされているものなのか不明❌ という制限がありました。 詳しくはこちらの記事によくまとめられています。 pdf.jsを使うとしても、できることなら<script>タグを一行差し込むだけで使えたら最高です。 pdf.
![[pdf.js] 手軽にPDFファイルをHTMLに埋め込めるWebComponentを作った - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/a567ad60619ac5a17a3228f4f2c99374a6eeb49c/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCcGRmLmpzJTVEJTIwJUU2JTg5JThCJUU4JUJCJUJEJUUzJTgxJUFCUERGJUUzJTgzJTk1JUUzJTgyJUExJUUzJTgyJUE0JUUzJTgzJUFCJUUzJTgyJTkySFRNTCVFMyU4MSVBQiVFNSU5RiU4QiVFMyU4MiU4MSVFOCVCRSVCQyVFMyU4MiU4MSVFMyU4MiU4QldlYkNvbXBvbmVudCVFMyU4MiU5MiVFNCVCRCU5QyVFMyU4MSVBMyVFMyU4MSU5RiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9NDJiNGRmMmUwMjI0Y2Y2NDZmOGZkOTJhOWQxZjdmOTc%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBhY2Nlc3MzMTUxZnEmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWY1MzU2MmY1NWIyOTk5ZTJlMzQ4MDAwNmY2Nzg4ODA4%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Dda706dfe2b32c55a3178a5fcbf96c470)
WebComponentで始めるUIコンポーネントの共通化 - バイセル Tech Blog
はじめに こちらは バイセルテクノロジーズ Advent Calendar 2022 の 8日目の記事です。 前日の記事は 市田さんの「デプロイ頻度を上げるためにやったこと」でした。 こんにちは。バイセルテクノロジーズ、テクノロジー戦略本部に所属している藤井です。普段はリユースプラットフォームのフロントエンド開発をしています。 リユースプラットフォームは、買取、査定、在庫管理、出品管理など、商品の買取から販売までを一気通貫しておこなうためのものです。前述の通り、リユースプラットフォーム上には様々なアプリケーションが存在し、類似したコンポーネントが複数のアプリケーションで量産されてしまっているという事業課題がありました。 様々な選択肢を考慮した結果、WebComponent を導入する方向で検討を進めています。今回は、WebComponent の導入を検討している背景や、技術調査で分かったこ
Vue CLIのWebComponentビルドをVue3でも使いたい - がらくたツールボックスのウェブログ
Vue CLIには ビルドターゲットとして Web Componentを選択できる機能があり、これを使うとVueのSFC（単一ファイルコンポーネント）をWeb Componentとして書き出してくれます。 cli.vuejs.org このビルドモードには以下の特徴があります。 指定したディレクトリ内のSFCをWebComponentとして使えるようにビルドする（ビルドの過程でSFCのコンポーネントを define するソースコードが入るようになる） SFCごとのjsファイルと、一つのロードスクリプトを出力する（ Async Web Componentモード の場合） ロードスクリプトがページ内に必要なWebComponentを探し出し、必要な分のjsファイルを非同期で取得する（1つのファイルにバンドルしないのでJavaScriptファイルの容量が抑えられる） ところが、Vue CLIでVu
身内の勉強会用の資料です ソースはgithubにおいてあります WebComponentとは？ 説明するよりもデモを見てもらったほうが早いと思うので、code penに簡単な電卓コンポーネント(ks-calc)を作りました。 ソースはgithubにおいてあります See the Pen YMxZwN by KuwabataK (@kuwabatak) on CodePen. コードは以下のような感じ <!DOCTYPE html> <html dir="ltr" lang="en"> <head> <meta charset="utf-8"> <!-- WebComponentを読み込み --> <script src="https://kuwabatak.github.io/Stencil-Calc/mycomponent.js"></script> </head> <body> <!-
「react-to-webcomponent」ライブラリを使用し、vite + ReactでWeb Componentsを作成する - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Stencilを使ってWebComponentを作ってみる - Qiita