未経験者が触る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 {htm
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
PolymerでFirebaseのリアルタイムデータベースとデータのやり取りをする - Qiita
データベースを有効にする Firebaseにアクセス こちら Databaseをクリック Realtime Databaseからデータベースを作成をクリック ロックモード テストモード から、テストモードを選択して、有効にするをクリック Polymerでデータ送信用のエレメントをつくる コンポーネントのインストール paper-input paper-inputは こちら DOWNLOADのコマンドをクリックしてコピー ターミナルにペーストしてインストール paper-button paper-buttonは こちら DOWNLOADのコマンドをクリックしてコピー ターミナルにペーストしてインストール テキスト入力欄と送信ボタンを作成 ダウンロードしたpaper-inputとpaper-buttonを src/my-view1.htmlにインポート
Aurelia入門の軌跡 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに JavaScriptは昔少し触っただけなのですが、Webアプリが作りたくなり、Aureliaに手を出し始めました。 早速つまづき始めているので、その記録を含め、書いていきたいと思います。 前提として、この記事は以下のような人が以下のような環境で試しながら書いています。 人: C++、C#あたりは詳しいがJavaScriptは初心者。Haskellは好き OS: OS X El Capitan ブラウザ: Firefox 43.0.3 なぜAureliaか ちょっと作りたいアプリがあり、Webアプリが適しているだろうと思い、一発
Aurelii-cliをcloud9で - Qiita
aureliaって流行ってない？まだまだこれから？流行らなかった？ あまり情報出てこないのはさておいてcloud9で試した際のメモ aurelia-cliについて 何も設定せず au run --env dev とかして起動するとport9000で立ち上がるのがデフォルト。 package.jsonやaurelia_project以下をみる限り、ビルド周りのツールは Gulp Karma BrowserSync といったあたりをラップしているのがaurelia-cliらしい cloud9での実行 準備 以下workspaceはBlankで作成。 ターミナル上で au new --here した環境。 設定 echo $PORT してポート番号を確認。 au helpしても特にポート設定は無いようなので、以下のファイルを開いて直接変更 （TypeScriptを選択しない場合はrun.jsなの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Polymer2 で <input>の値をバインドする - Qiita
Polymer2 で <input>の値を「親エレメントの値と」バインドする - Qiita
Aurelia + Webpack で Jade 使う - Qiita