webcomponentの検索結果1 - 11 件 / 11件

• あとで読む

  WebComponent を Vue コンポーネントツリーの末端として使う - kitak blog

  • 10 users
  • kitak.hatenablog.jp
  • テクノロジー
  • 2018/02/19

  JSフレームワークの末端がWebComponentsになるのか、なれるのか、検証してみた - Qiita の記事を読んで、Vue だとどうなるかな、と思って軽く検証した。自分の手に馴染んているのが Vue というだけの理由で、決して React dis ではないです( React は React で、そのうちいいかんじの仕組みが入るような気がする )。 結論、問題なく使えると思う。 そもそも WebComponent を末端で利用するモチベーションは? 現状、CSS フレームワーク、UI フレームワークがあり、そのフレームワークをラップして View フレームワーク( React, Vue, Angular )のコンポーネントとして提供するライブラリをよく見かける( react-xxx とか vue-xxx みたいなの )。こういったライブラリの組み合わせは、UI フレームワークの数を M

  • あとで読む

  
• あとで読む

  [pdf.js] 手軽にPDFファイルをHTMLに埋め込めるWebComponentを作った - Qiita

  • 3 users
  • qiita.com/access3151fq
  • テクノロジー
  • 2023/02/06

  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
  • スマホ
  • html

  
• あとで読む

  WebComponentで始めるUIコンポーネントの共通化 - バイセル Tech Blog

  • 2 users
  • tech.buysell-technologies.com
  • テクノロジー
  • 2022/12/08

  はじめに こちらは バイセルテクノロジーズ Advent Calendar 2022 の 8日目の記事です。 前日の記事は 市田さんの「デプロイ頻度を上げるためにやったこと」でした。 こんにちは。バイセルテクノロジーズ、テクノロジー戦略本部に所属している藤井です。普段はリユースプラットフォームのフロントエンド開発をしています。 リユースプラットフォームは、買取、査定、在庫管理、出品管理など、商品の買取から販売までを一気通貫しておこなうためのものです。前述の通り、リユースプラットフォーム上には様々なアプリケーションが存在し、類似したコンポーネントが複数のアプリケーションで量産されてしまっているという事業課題がありました。 様々な選択肢を考慮した結果、WebComponent を導入する方向で検討を進めています。今回は、WebComponent の導入を検討している背景や、技術調査で分かったこ

  
• あとで読む

  Webの明るい未来はWebComponentに託された！ - 青空コメントアウト

  • 2 users
  • www.aocomme.com
  • 学び
  • 2016/06/17

  まいどです。 今更だけど、WebComponentのことあんまり知らなかったあろえりーな(@aloerina_)です。しょんぼりです…。 というわけでWebComponentが何なのか調べてきました。先輩！勉強不足ですみませんでした！ということで成果です(メモです)。 そもそも何なのよ？ すごくざっくり言うと画面を構成するための要素を部品化する仕組みです(ざっくりすぎる)。 複雑なWEBアプリケーションをつくるときは、それなりにきちんとした仕組みを作らないとあとでデザイン修正や不具合修正が大変になります、言わずもがな。そうならないために細かい部品に区切ってつくっておいて、あとである部品だけ修正したり、同じ部品を使い回したりできるようにしよう！といういわゆるオブジェクト指向的なモノなのかなと感じました。 最近はWEBでできることが増えてきて、WEBアプリの複雑さもすごいことになってきていて、

  
• あとで読む

  GitHub - klei/gulp-inject: A javascript, stylesheet and webcomponent injection plugin for Gulp

  • 2 users
  • github.com/klei
  • テクノロジー
  • 2015/02/21

  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

  
• あとで読む

  vueでWebComponentを作ったとき、Vue.use({theme})が適用されないからまだ使えない？ - Qiita

  • 1 user
  • qiita.com/Fushihara
  • テクノロジー
  • 2019/05/06

  Vueファイルに対してvue-cli-service build --target wc ./src/App.vueを実行し、作成されたhtmlを開くとコンポーネントの再現が出来ていない箇所がある。 ファイルの概要は以下の通り。 "dependencies": { "vue": "^2.6.10", "vue-class-component": "^7.0.2", "vue-cool-select": "^2.10.2", "vue-property-decorator": "^8.1.0", "vuejs-datepicker": "^1.5.4" }, "devDependencies": { "@vue/cli-plugin-typescript": "^3.7.0", "@vue/cli-service": "^3.7.0", "node-sass": "^4.12.0", "sa

  
• あとで読む

  WebComponent - Google 検索

  • 1 user
  • www.google.co.jp
  • テクノロジー
  • 2018/03/18

  2023/08/27 · WebComponentを簡単に作成するためのライブラリです。litを用いて作成するコンポーネントはリアクティブにする事も可能です。 コンポーネントの実装は ...
• あとで読む

  WebComponentの簡単な使い方（シンプルに第一歩目に） - Qiita

  • 1 user
  • qiita.com/567000
  • テクノロジー
  • 2018/12/31

  なに？ わたしが Vue.js や Riot.js やその他を使う１つの大きな理由はHTMLの部品化にあります。 例えば、ヘッダやフッタなど全ページにまたがるやつの共通化です。 以前はSSI（Server Side Include）使ってましたけど、だんだんサーバ多様化してきてどうにも使い勝手がわるく。 ということで、こうなったらWebComponentsです！！！ WebComponentsとは？ Webコンポーネントは、再利用可能なカプセル化された新しいカスタムタグを作成して、WebページやWebアプリで使用できるようにするためのWebプラットフォームAPIです。 ということで、再利用するために「カスタムタグ」というのを作ることができる技術です。 まだブラウザの実装状況が怪しいところもありますが、今回紹介するもっともシンプルな機能（customElements）であればわたしが見てる限

  
• あとで読む

  「正」の数でオセロするWebComponentを作った - Qiita

  • 1 user
  • qiita.com/KuwabataK
  • テクノロジー
  • 2019/05/26

  元ネタはこれです。 突貫で作ったので見た目はガバガバだし、「正」の数じゃなくて数字が増えてくだけなんですが、 これ以上頑張る気力が沸かなかったので許してくださいなんでもしますから オセロのロジックまわり作るのが一番大変でした 以下のURLで遊べるのでよければ遊んでみてください https://codepen.io/kuwabatak/full/YbLrMa See the Pen counting-othello by KuwabataK (@kuwabatak) on CodePen. 遊び方 見たまんまオセロです。マス目をクリックするとオセロのルール的に置ける場所なら、自分の色でぬり潰されて、周りのマスの色が反転します。 普通のオセロと違うとこはマス目の中に数字が振ってあって、ひっくり返されるごとに1ずつ増えていくとこです。 偶数が青側、奇数が赤側ですね。 なので、青側がクリックしたと

  
• あとで読む

  Vue CLIのWebComponentビルドをVue3でも使いたい - がらくたツールボックスのウェブログ

  • 1 user
  • garakuta-toolbox.hatenablog.com
  • テクノロジー
  • 2024/05/13

  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

  
• あとで読む

  Stencilを使ってWebComponentを作ってみる - Qiita

  • 1 user
  • qiita.com/KuwaK
  • テクノロジー
  • 2022/07/18

  身内の勉強会用の資料です ソースは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> <!-