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) オンラインエディタ(
未経験者が触る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
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Polymerチームによって公式に提供されるCustom Elementsの一つiron-elemnetsについて公式ドキュメントの説明を抄訳し紹介します。 iron-elementとは アプリケーションを作成するための基本的な構成要素です。iron elemmetsの多くは、PolymerがDeveloper Previewバージョンであった頃はcore elementsと呼ばれていたものです。 iron-a11y-announcer スクリーンリーダーを利用しテキストの読み上げをサポートするためのエレメント iron-a11y-an
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についてで
Polymer.co-edo '18 計画 - Qiita
さて今日は私とPolymerコミュニティにとって記念すべき1年後です。 Polymer.co-edo 第0回を開催しました というブログを書いたのが、2016/12/18。 そうちょうど一年前。 そのときボッチだったPolymer.co-edoも大人気とは言えませんが、参加者のみなさまに支えられ１年を乗り越えることができました。 今年は Polymer そのものにも大きな動きがたくさんあって、Meetupネタにも欠きませんでした。 本日はPolymer.co-edo ゆく年くる年というイベント（LT大会＆忘年会）をやりますので、Polymer興味ある方、単純に飲みたい方(w)などの参加をお待ちしております。 ゆく年 まずは くる年 の前に今年のふりかえりを。 回 日時 内容 参加人数
reflectToAttribute - Qiita
static get properties () { return { raised: { type: Boolean, reflectToAttribute: true, value: false, observer: '_calculateElevation' } }; } _calculateElevation() { this.raised = false; } raisedプロパティに値が渡させれると、observer: '_calculateElevation'として設定している_calculateElevationメソッドが発火して、raisedの値をfalseにします。 さて本題のreflectToAttribute: trueについてですが、公式サイトによると以下のように説明されています。 ある特定のケースにおいては、HTMLの属性値とプロパティ値を同期させておくと便利か
PRPL パターン実装の具体例調査と比較 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? PRPL パターンとは Google I/O 2016 で提案されたものですが、詳しくはこちらの記事がとても分かりやすいです。 上の記事から一部を以下に引用します。 PRPL は、Progressive Web App（PWA）を構築および配信するためのパターンで、アプリの配信と起動時のパフォーマンスに重点を置いています。 PRPL は次の言葉を表しています。 Push: 最初の URL ルートに不可欠なリソースを Push（プッシュ）する。 Render: 最初のルートを Render（レンダリング）する。 Pre-cache: 残り
Polymer + Firebase + Stripe で寄付コンポーネント - Qiita
Polymer Cafe #1でのLT資料です。ちなみに制限時間5分で2-3ページ分しかしゃべれませんでした、、、 自己紹介 ニックネーム: howking 開発環境: Chromebook + Emacs 元々サーバサイドエンジニアで、フロントエンド(Polymer)歴は2年半ぐらい Polymer-jp.orgのサイト構築のお手伝いしてます。 QiitaにちょこちょこPolymerネタを書いてます。 Polymer サンプルコード (1) 〜 (6) Web Componentsを公開しよう! Polymer-jp.orgを支える技術 等 今日の資料もQiitaにアップ予定、ソースコードは Polymer-Japan/polymer-jp.org#30 概要 Polymer-jp.orgにStripeで寄付ボタンを設置してみた Polymer-jp.orgとは 100% pure Po
Polymerで作ったWeb Componentで string 型以外の属性を使う場合のTIPS - Qiita
先日 Web Components に関して、 @aggre さんの “Web Componentsだけ” で新サービスを実装して見えたこと という記事が投稿されました。 これすごい良い内容なんで、ぜひ読んで欲しいです。 で、そのサービス Double O に以下のような質問が入っていました（質問したのは私ではないです)。 まだ埋め込み対応はされていないので、画像で貼り付けます。 「Polymerは使わないんですか？」実際のページ 良い質問と回答だなーと。 でもちょっとコメントしたい string 型以外の属性( attributes )を渡せるかどうか？になると思います。ドメイン依存の排除を考えるとそもそも string 型以外を渡すシチュエーションは避けるべきなので、結果的に Polymer を使う必然性がなくなった その通りなのですが、では Polymer で Web Compone
Firebase&PolymerでWebアプリを始める - Qiita
Polymerのインストール Polymer CLIのインストール node.jsのバージョンを確認 node --version ※node.jsが入っていない場合は、こちらからインストール npmを最新版をインストール npm install npm@latest -g gitのバージョンを確認 git --version ※gitが入っていない場合は、こちらからインストール Bowerの最新版をインストール npm install -g bower Polymer CLIをインストール npm install -g polymer-cli ※Polymer CLIのインストール時にエラーが出る場合は、node.jsのバージョンを落としてから再度試す。過去バージョンのインストールはこちら Polymer本体のインストール Polymerをインストールするフォルダを作成 mkdir po
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
私が初めて作ったWebComponentsのご紹介 - Qiita
Polymer2 で <input>の値をバインドする - Qiita
Polymer2 で <input>の値を「親エレメントの値と」バインドする - Qiita