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なの
Aurelia に Quill を導入する - Qiita
Aurelia を使った社内向けシステムの開発中に Quill 導入したので、手順とサンプルを載せてみる。 Quill とは Your powerful, rich text editor. 要するに WYSIWYG エディタ。 見た目がモダンっぽくて良い感じなので、これを Aurelia アプリに組み込む。 TL;DR Quill はモダンで導入も楽チンだよ 簡単な設置までの手順を書いたよ ちょっと実用的な「記事」の表示・編集サンプルも書いたよ 対象読者 Aurelia に Quill の導入を考えている人。 前提環境 Aurelia 1.1.2 jspm 0.16.53 導入するもの Quill 1.3.2 導入手順 jspm を使ってインストール 入れるのは一つだけで良いから楽チン。
aureliaのdocsページのGetting startを単一ファイルにまとめた - Qiita
始まり jQueryとかReactとかVueとかriotとかえとせとら、htmlファイルにcdnからjsファイルを読み込んで実行することのできるフレームワークがある中、世界的にまだまだマイナーなaureliaというフレームワークは「ビルドしてね」と公式でrecommentされているため、どうしても気楽ではない。 だがcdnとか使えてライブラリ読んでデモ作ったらもっとアピールできないか？ というissueがaureliaのGitHubリポジトリに投げ込まれているのも確認した。 なので。 単一ファイルでaureliaを実装できるかやってみた。 準備 必要なファイルはだいたいCDNにある。 aurelia-core https://cdnjs.cloudflare.com/ajax/libs/aurelia/1.0.2/aurelia-core.min.js aureliaのフレームワークファイ
Aurelia の Setup with Webpack をやってみる - Qiita
セットアップ済みの Aurelia は触ったことはあるけど、自分でセットアップしたことない。 英語もちんぷんかんぷんだけど、まあやれば分かるべーってことで、やってみる。（2017年10月16日時点） 環境 OS X El Capitan 10.11.6 npm v8.7.0 やること Setup with Webpack やってみた Configuring Your Environment npm 使うから Node.js を入れておいてね、って内容。 上記の環境に書いた通り、既に入れているのでパス。 Setting up the Project Structure and Build 最新版をダウンロードして、その中から必要なものをアプリケーションのスケルトンにしてね、って内容かな。 今回は「ESNext Skeletons」の Webpack を使えるやつにします。 ダウンロード 「D
Aurelia Custom Attributes を使って bootstrap-tooltip を楽に使う - Qiita
bootstrap-tooltip を使う時、必ず js で初期化メソッド呼び出しをしないといけないのが面倒。 しかも Aurelia のように bind ありきだとすんごく面倒。 なので、簡単に bootstrap-tooltip を使うために Custom Attributes を使って部品化してみた。 対象読者 Aurelia で bootstrap-tooltip を楽に使いたい人。 公式ドキュメントの この辺 を読んですんなり理解できる人には要らないかも。 環境 OS X El Capitan 10.11.6 npm v8.7.0 aurelia-skeleton-navigation-webpack 1.1.2 Bootstrap v3.3.7 （上記 skeleton に入っていたやつ） Aurelia の Setup with Webpack をやってみる で作った初期環境
Aurelia の two-way bind で反映されるタイミングはちょっと遅い - Qiita
Aurelia には Custom Attributes/Elements の機能があります。 これには双方向で変数の値を bind する two-way bind の機能があって、とても便利。 けど、その two-way bind が呼び出し元に反映されるまで、ちょっと遅いことが分かりました。 環境 OS X El Capitan 10.11.6 npm v8.7.0 aurelia-skeleton-navigation-webpack 1.1.2 Bootstrap v3.3.7 （上記 skeleton に入っていたやつ） two-way bind って？ ここに書いてあるやつです。 http://aurelia.io/docs/fundamentals/cheat-sheet#databinding .two-way - Flows data both ways: from vi
D3 軸と軸ラベル の微調整テク - Qiita
// input const sc = d3.scaleLinear().domain([0,100]).range([0, width-80]); const ax = d3.axisBottom().scale(sc); const ax2 = d3.axisBottom().scale(sc).ticks(4); const ax3 = d3.axisBottom().scale(sc).tickValues([0,20, 40, 80]); const ax4 = d3.axisBottom().scale(sc).tickFormat((val) => { return val === 30 ? '' : val.toString() }); const ax5 = d3.axisBottom().scale(sc).tickSize(10) // output const x
Aurelia で Date Range Picker を使う - Qiita
今回は Aurelia で Date Range Picker を使う方法について書いていきます。 最終的に、下図の「Expiry Period」のようになります。 日付を範囲選択したい場合に便利ですので、宜しければご覧ください。 また、解説不要な人のために GitHub リポジトリの URL を載せておきますね。 https://github.com/phayacell/aurelia-daterangepicker 該当のコミットはこちら。 https://github.com/phayacell/aurelia-daterangepicker/commit/23643928914ce9e98958e04f5ec20c5907092b74 Date Range Picker とは A JavaScript component for choosing date ranges, date
d3.js v5 で、x軸に日付を入れた折れ線グラフを作る - Qiita
v5の簡単なサンプルが少ない 2018年4月現在、簡単なサンプルが少ないです。 やりたいことは単に「x軸に日付・y軸に値」を取ったシンプルなグラフを書きたいことだけなんですが、v3かv4向けだったり、あるいは最初のステップとしては読解が難しいサンプルだったりして、作成に時間が掛かってしまいました。 最終的に欲しかったのは、下のようなやつだったので残しておきます。 (TODO: かなり参考にさせてもらったサイトがあったのに、リンクを消失してしまったので再発見したら貼る) 折れ線グラフのサンプル <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=
d3.jsで地図をぬるっとアニメーションさせる。 - Qiita
前回、d3で気象庁降灰予報を描画しましたが、 https://qiita.com/miyawa-tarou/items/f101f0248cdc5744302d 地図の中心緯度経度やズームなどは一度描画した後でも変えることができます。 また単に変えるのではなく、ぬるっとスムーズにアニメーションしながら動かすことができます。 完成版はこちら：https://miyawa-tarou.github.io/d3_nuru_map/ 基本は前回のコードをもとに説明します。今回の説明に邪魔なので桜島に置いた丸は消しています。 https://github.com/miyawa-tarou/d3_nuru_map/tree/01.setting 1.クリックしたらズームするようにする やることは、初めに設定した svg.selectAll("path") // おまじない。というか理解できてない .d
IEでsvgタグ内のimageが表示されない - Qiita
<!DOCTYPE html> <html lang="ja" > # ライブラリ読込などは省略 <head> <meta charset="UTF-8" /> </head> <body> <div class="test" ></div> </body> <script> var svg = d3.select(".test").selectAll("svg").remove(); svg = d3.select(".test").append("svg") .attr("width", 300).attr("height", 300) .attr("stroke-width", 2).attr("xmlns","http://www.w3.org/2000/svg"); svg.append('image').attr({ 'x' : careerCX, 'y' : sides -
D3.js V4 forceSimulation のノード動的更新(追加・削除) - Qiita
D3.js とは D3.js は Data-Driven Documents ということらしいですが、これだと良く分からんのでもう少し分かり易く言うと要素の座標を指定されたレイアウトで計算し、計算結果を DOM に反映させるアクセッサを提供する ライブラリです。実際の描画には何(svg や canvas など)を使うかはユーザ側で選択できます。 ちなみに svg は、 XML ベースのベクタ系画像フォーマットです。 D3.js の公式 HP (https://d3js.org/)は、オープンソースライブラリの中でもかなりの充実ぶりで多くのサンプルもあり、自分の実現したいことがサンプルと同じであればデータを変えるだけで実現できます。サンプルに無くても、ドキュメントを読めば大抵のことは実現可能でしょう。 とはいえ充実しているからこそ、それを読むのも大変な訳で。 そんな訳で多くの方は web で
D3 で九九の表ならぬ FFの表をつくる - Qiita
<html> <head> <script src="https://d3js.org/d3.v4.js"></script> <script src="https://d3js.org/d3-color.v1.min.js"></script> <script src="https://d3js.org/d3-interpolate.v1.min.js"></script> <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> </head> <body> <div id="hoge"></div> <script> // constants const canvas = [600, 600]; const margin = {top: 30, right: 15, bottom: 15, left:
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Aurelia + Webpack で Jade 使う - Qiita
ember ガイド - Qiita
ホールデムポーカ simulation & visualization ～ハンドの勝利確率とプレイ人数に非依存な特徴的なハンドの存在示唆～ - Qiita
