webcomponents.org - Discuss & share web components
Hayato.io
Hayato.io This Page Is Under Construction - Coming Soon! Why am I seeing this 'Under Construction' page? Related Searches: Accident Lawyers Top Smart Phones Anti Wrinkle Creams find a tutor Best Mortgage Rates Trademark Free Notice Review our Privacy Policy Service Agreement Legal Notice Privacy Policy|Do Not Sell or Share My Personal Information
X-Tag - Web Components Library
Getting Started The most important method in the X-Tag library is xtag.create(). The create function on the X-Tag object is what you'll use to create new custom element definitions, which can include things like lifecycle callbacks, attribute-linked getters/setters (accessors), and event listeners. Here's what defining a simple custom element looks like with X-Tag: const Frank = xtag.create('x-fra
Web Componentsについて気になること、泉水さんに全部聞いてきました！
Web Componentsについて気になること、泉水さんに全部聞いてきました！ 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されるHTML5 Conference 2017に登壇するエキスパートに、予定しているセッションのトピックを中心に、様々な技術的なお話を伺おうというものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、株式会社サイバーエージェントにお勤めの泉水翔吾さんです。 ▲株式会社サイバーエージェント 泉水翔吾さん 泉水さんのセッションは「The State of Web Components」（ルームA 16:20-17:00）です。 （現在HTML5 Conferenceは定員オーバーの状態ですが、無料イベント
Web Componentsとは何か？ - Qiita
Web componentsは、WebページやWebアプリケーションの中で新たに、再利用可能でカプセル化された独自のHTMLタグを作成するためのWebプラットフォームのAPIです。独自に作成したコンポーネントやウィジェットは、Web componentsの標準をベースに構築されているので、あらゆるモダンブラウザ上で動作するでしょう。また、HTMLと連動して動作するどんなJavascriptライブラリやフレームワークとも併用できます。 Web componentsは、既存のWeb標準をベースにしています。 Web componentsのサポート機能は現在HTMLやDOMの仕様に追加されており、Web開発者はカプセル化されたスタイリングとカスタムの動作を使い新たな要素で簡単にHTMLを拡張できます。 仕様 Webコンポーネントは、主に四つの仕様をベースにしています。： Custom Eleme
<css-doodle />
There's an alternative way to set up the grid by using the @grid property. <css-doodle> :doodle { @grid: 5 / 8em; } background: #60569e; transform: scale(@rand(.2, .9)); </css-doodle> :doodle { @grid: 5; @size: 8em; } background: #60569e; transform: scale(@r(.2, .9)); use Import rules from CSS custom properties (CSS variables). <css-doodle use="var(--rule)"></css-doodle> It's highly recommended to
一休.comレストランのスマートフォン検索ページがSPAになりました - 一休.com Developers Blog
一休.com レストランは今年の 7 月 18 日、スマートフォン向け検索ページのリニューアルを行いました。このエントリーでは、その中身について少し紹介させていただきます。 検索ページの課題 一休.com レストランではスマートフォン向け検索ページに対して「遅い」という課題意識がありました。これは技術面で少しブレイクダウンすると; パーソナライズドを含む複雑な処理を行っているため、サーバーサイド処理が重い。 UI 上無駄な遅延処理を行っているため、クライアントサイドの描画が遅い。 というサーバー側とクライアント側両方の課題がありました。クライアントサイドの「無駄な遅延処理」というのは; 検索結果取得が REST API 化されているにも関わず、再検索の度にページリロードを行い、サーバーサイドの描画からやり直している。 という実装に問題がありました。下図がリニューアル前のページ描画の様子です
Polymerを0.4から1.0に上げてみ（たかったけど挫折し）た - Qiita
つい先日、Polymerがついに1.0になり、Production readyということになりました。webcomponents.jsというpolyfillが必要って時点で本当に Production readyなのか？という疑問は尽きませんが、それでも一つの里程標となったことでしょう。 さて、約1年半ほど前、0.4の時代のPolymerを社内システムとはいえ、プロダクションに適用してみたものの、メンテナンスの煩雑さやそもそもそれを使った機能が使われない（！！）ことから、ほとんどいじることはありませんでした。 その間に、0.5が出て、0.8が出て、ときたわけですが、1.0が来たということなので、ちょっと時間を使って0.4からどれくらい変わっているかを身を以て体験してみました。 Polymerのアップグレード(with Bower) Polymerは推奨通りにBowerでインストールしてまし
Web ComponentsはじめるならPolymerで
次世代のWebを先取りするPolymer Webサイトの制作に関して、UIの部品化というのは非常に重要なテーマです。 一度、自分や他人が作ったUIを再利用することができると、効率性や保守性の観点で大きなメリットがあるからです。 PolymerはWeb UIの作成や再利用を、より簡略化することを目的として、Googleが開発したJavascriptライブラリです。 これまでにUIの部品化に関して、最も成功した例にjQuery UIやTwitter Bootstrapなどがありますが、Polymerがそれらと異なる点は、次世代のWeb標準になることが予定されている、Web UI部品化技術であるWeb componentsを基礎としていることです。 そもそも、Web components自体もGoogleが最初に提唱したことから始まり、現在、W3Cで仕様策定が進められているものです。ただし、We
Polymer-jp.orgを支える技術 - Qiita
Polymer の日本のコミュニティとして立ち上がった Polymer Japanのサイト構築のお手伝いをしました! リポジトリが こちらで突貫作業でしたが、紹介させていただきます。 概要 まだサイトの紹介やイベント、コミニュニティへのリンクぐらいしかコンテンツがなくて10ページ弱です。 100% pure Polymer Library & Toolbox 100% only Firebase Infrastructure PWA (Lighthouse 100点) オフライン対応 プッシュ通知 Chrome, Firefox, Safari, Edge, IE11対応 (一部動かないけど) Material Design (レスポンシブ) SEO, Social friendly (Facebook OGP, Twitter Card) ユーザ認証(Google) オンラインエディタ(
私が初めて作ったWebComponentsのご紹介 - Qiita
Polymerアドベントカレンダー１日目を担当します、川上と申します。 今回は、私が初めて作って公開したWebComponentsを紹介させ頂きます。 split-upload 概要 動画ファイルなど、ファイル容量の大きなファイルをアップロードする際に、一定のサイズで分割してアップロードすることが出来ます。 インストール方法 はじめに、webcomponents.orgにアクセスし、検索BOXでuploadと検索してもらうと、uploadに関連する機能を持ったタグがリストアップされ、その中に、split-uploadがありますので、そちらを選択して下さい。 次に、画面の右パネルにINSTALLED VIA BOWERとありますので、そちらを選択しますと、Bower を使ったインストールコマンドが表示されますので、そのとおりに実行して下さい。 インストール後に、使いたい.htmlファイルを開
未経験者が触るPolymer 3.0 preview - Qiita
Polymer Advent Calendar 2017 6日目の記事です。 webcomponentsの実装がブラウザで進み、かなり現実性を帯びてきたのでPolymerも3.0のpreviewが出たということでこの機会に触ってみることにしました。 Hands-on with the Polymer 3.0 preview ベースとしてはこの記事をなぞっていくことになります。 JavaScriptを多少書ける人間が、Polymerのファーストインプレッションがどうだったかをお届けできればと思います。 シンプルに動かしてみる 私は普段Reactで開発することが多いのですが、いままで自分が行ってきたような開発スタイルからどれくらい離れずに開発ができるのかを注視して触ってみることにしました。 Setup / Import まずは必要なパッケージをインストールします。この辺りは特に変わらずです。
Polymer & Firebase でサイト更新したらプッシュ通知 - Qiita
概要 Polymer Japan のサイトが更新されたら自動でプッシュ通知を送るようにしました。 ユーザはトップページ右上のアイコンをクリックしてプッシュ通知をトグルします。 ※ サイト訪問時にいきなりダイアログで聞かないように (Web Fundamentals: パーミッションの UX) サイト管理者側は、 1. コンテンツを追加、更新したら「PUBLISH」ボタンをクリック → /feed.xmlが更新される 2. TriggerでPubSubHubbub/publish に更新通知を送られ、 3. Callbackがきたら、最新の記事を取得し、/topics/feedにプッシュ通知が送られます だいぶやっつけで作ってしまってますが、稼動しているサイトのソースは こちらです。 全体的な流れ PlantUML プッシュ通知のリクエスト フロントエンド側はPolymerfireを使うと簡
Polymer コミュニティの紹介 - Qiita
Polymer Advent Calendar 2017の9日目です。 昨日は @howking さんの Polymer & Firebase でサイト更新したらプッシュ通知 でした。 今日はこれからPolymerをはじめる人へ、Polymer Japan の @sizuhiko より日本のコミュニティの紹介をします。 Polymer Japan 日本を代表する Polymer コミュニティです。 Polymer Japan サイト 今年の８月に発足したばかりですが、Polymer公式サイトやWeb Components技術情報の翻訳、イベントの開催など積極的な活動を行っています。 So excited we got to meet the leaders of Polymer JP at Google Tokyo! 🇯🇵🎉 pic.twitter.com/n4y0kV5ETW —
Polymer公式エレメントの紹介(iron-element編) - Qiita
Polymerチームによって公式に提供されるCustom Elementsの一つiron-elemnetsについて公式ドキュメントの説明を抄訳し紹介します。 iron-elementとは アプリケーションを作成するための基本的な構成要素です。iron elemmetsの多くは、PolymerがDeveloper Previewバージョンであった頃はcore elementsと呼ばれていたものです。 iron-a11y-announcer スクリーンリーダーを利用しテキストの読み上げをサポートするためのエレメント iron-a11y-announcerは、スクリーンリーダーを通じてオンデマンドの音声読み上げを必要とする機能に、a11yを追加するためのシングルトンのエレメントです。 音声読み上げを利用するには、アナウンスを行うエレメント内でアナウンスの利用可否を確認するのがよいでしょう。 DE
lit-htmlをTODO Exampleを通して紹介する - Qiita
どうも、ヒロと申します。フロントエンドマンです。 Polymer Advent Calendar 2017 7日目の担当です！ 投稿が遅れてしまいすみません、、、汗 今回はlit-htmlの紹介をしたいと思います。 lit-htmlとはPolymerチーム が開発しているView用のライブラリです。 非常に軽量でシンプルなAPIのみ提供しているライブラリです。まだ絶賛開発中なのでプロダクション利用には向いていないと思いますが、今回はこのライブラリについて説明します。 いきなりですが、今回このようなサンプルを用意しました。 はい、TODO Exampleです。 コードはこちらにあります。 では早速コードの説明に入る前に簡単にlit-htmlの使い方の説明！ lit-htmlの主要な機能は二つ、 - html() - render() の二つです。公式のサンプルそのままですが、 import
Web Components FTW - Qiita
この記事は 一休.com Advent Calendar 2017 の 12 日目です。 CTO 室で 一休.com レストラン の開発支援をしています。Web フロントエンドエンジニアの稲尾です。 幸運にも 10 月末に San Francisco で開催された Chrome Dev Summit 2017 に行かせてもらいました。そこで Google の推進する Web Components におおいに感化されて来ました。Web フロントエンドのコンポーネント指向開発フレームワークとして標準化の進む Web Components を、Polymer を交えて、改めて紹介します。 tl;dr コンポーネント指向は web フロントエンド開発の新標準 ページをつくるのではなく、コンポーネントをつくって組み合わせる Polymer は現実的なコンポーネント指向のフレームワーク Web Com
Polymer公式エレメントの紹介(app-element編) - Qiita
Polymerチームによって公式に提供されるCustom Elementsの一つapp-elemnetsについて公式ドキュメントの説明を抜粋して紹介します。 app-layout アプリケーションのレイアウトの構築に便利なエレメントのコレクション 公式サイトのApptoolboxの解説にこれらのエレメントの画像付きの詳細な解説があります。実際にアプリケーションを作成する際は参考にしてください。 また、app-headerとapp-toolbarの各種オプションの実例については、以下のサイトが参考になります。 Test Drive DEMO & API app-box app-boxは各種スクロールエフェクトを備えたコンテナエレメントです。スクロールポジションに応じ視覚的なエフェクトが発生します。 app-drawer app-drawerは、画面の左右でスライドによって開閉されるドロワー型
Metronome By Angular x WebComponents with Polymer - Qiita
この記事では、主にAngularのコントリビューターであるlacoさん主催イベント、ng-sakeで毎回発表させていただいている。メトロノームを使ってAngular x WebComponentsについて書かせて頂きます。 メトロノームについて wikiから引用すると以下の通りになります。 一定の間隔で音を刻み、楽器を演奏あるいは練習する際にテンポを合わせるために使う音楽用具である。 メトロノームを作ったきっかけ 数年前に参加した、ng-japan主催のハッカソンにて「Angularを活かしつつ、会場が沸くサービスを考えていました」、そして思いついたのがメトロノームだったのです。その時に作ったものを、LTをする毎に書き直していきました。数えていませんが既に10近いバージョン違いのメトロノームが存在します。 Web Componentsについて はじめに、WebComponentsについてで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
webcomponents.org - Discuss & share web components