サードパーティJavaScriptの最適化 - 一休.com Developers Blog
本記事は、一休.com Advent Calendar 2018の4日目の記事です。 qiita.com 宇都宮です。宿泊事業本部でWebフロントエンドの開発をしています。 今日は、パフォーマンス改善に取り組むフロントエンドエンジニアの多くが頭を悩ませているであろう、サードパーティスクリプト(3rd Party JavaScript)について書きます。 サードパーティスクリプトとは サードパーティスクリプトとは、外部のドメインから読み込むJavaScriptのことです。典型的には、Google Analytics等のスクリプトが、サードパーティスクリプトに該当します。 一休.comでは、サードパーティスクリプトを、アクセス解析・広告のリターゲティング・A/Bテスト等、様々な用途に使用しています。これらのスクリプトは、一つ一つは小さなものであるため、画面表示のスピードに対するインパクトは意識
[JS]スマホに最適化された優れもの！さまざまなチャートやグラフを実装できるCanvasベースのライブラリ -F2
チャートやグラフは、さまざまなスマホアプリで見かけます。 スマホのデバイスに対してデザイン、インタラクション、パフォーマンスに最適化されたチャートやグラフを実装するHTML5 Canvasベースのライブラリを紹介します。 Node.js、React Nativeなどに互換性もあり、50種類以上のチャートやグラフを簡単に利用できます。 スマホ向けのデザイン デザインはスマホに最適化されており、軽快なインタラクションでデータをより自然に表示します。 スマホに最適化されたパフォーマンス 軽量で、素晴らしいレンダリングのパフォーマンスを実現。 互換性 HTML5のCanvasベースで実装されており、Node.js、React Nativeで実行することもできます。 ライセンス MITライセンスで、個人でも商用でも無料で利用できます。 F2のデモ まずはスマホのアプリでよく見かける、美しいデザインと
![[JS]スマホに最適化された優れもの！さまざまなチャートやグラフを実装できるCanvasベースのライブラリ -F2](https://cdn-ak-scissors.b.st-hatena.com/image/square/6a56da3d1045880413d87cd90dc7f8b998c77d99/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018083111.png)
UltraDate.js
UltraDate.jsはJavaScriptの「Dateオブジェクト」の上位互換オブジェクトです。 「Date.prototype」をマージしているので「Date」としているところを「UltraDate」と置き換えるだけ！ 特徴 「UltraDate.js」ファイル読み込み時に「Date.prototype」をマージするので 「Date.prototype」を拡張する他のライブラリのメソッドも利用可能です 「Date」を「UltraDate」に書き換えるだけで現在のプロジェクトにすぐ適用できます （下記注意事項もご参照ください） format関数で日付のフォーマットを行うことができます add○○関数で増減したい日数や、○○時間後等を設定することができます set○○関数で翌月末や第3月曜日といったこれまで計算してセットしていた日付を簡単に設定できます get○○関数で翌月末や第3月曜日
タスク、プロジェクト管理の表示に便利なガントチャートライブラリまとめ
業務システムでは各人員のタスク管理が重要になります。単発のタスクだけでなく、グルーピングしたり、さらにあるタスクの成果物が他のタスクに関連したりしていると必要になってくるのがガントチャートです。 今回はWebベース、HTML5で作られたガントチャートライブラリをまとめて紹介します。自社システムに組み込む際にぜひ参考にしてください。 Twproject Gantt Webサービスのガントチャートも提供していますが、オープンソース（MIT License）で取得もできます。チャート内での変種機能、クリティカルパス設定、リサイズ、スクロール、SVGによるドロー、ドラッグ&ドロップによる移動などの機能がサポートされています。 Twproject Gantt jQuery.ganttView シンプルな色合いのガントチャートです。ドラッグ&ドロップ、スクロール、イベントのハンドリングなどの機能があり
History.js ではまったこと - Qiita
History.js は，ブラウザヒストリ・ステート用 API (pushState 等) のブラウザ間非互換性を解消したり，(IE 9 以下など) pushState に対応していないブラウザでも hash を利用して擬似的に state の遷移ができるようにしたり，と便利なライブラリです。 ですが，いろいろとはまったことがありました。 IE (等，エミュレーション実装) で戻った時にステートが反映されない まず，以下のような状況で困りました。 History.js を利用したページ (A) をロード pushState(B) pushState(C) リンク等により History.js を利用していないページ (D) に遷移 ブラウザの「戻る」ボタン等で戻る 正しい挙動はステート C になること (で，もちろん Chrome や Firefox ではそうなる) なのですが，IE 9
KUTE.js Core Engine Examples | Javascript Animation Engine
KUTE.js core engine can animate by itself a great deal of CSS properties as well as scroll. You can do it all with native Javascript without libraries like jQuery, but before we head over to the more advanced examples, let's have a quick look at these two basic examples here. Note: the examples are posted on codepen. Basic Native Javascript Example When developing with native Javascript, a very ba
PDF.js で遊んでみた (ページの描画，テキスト・注釈の表示など) - きちぽよ〜
修士論文の予備審査が終わって一段落した seikichi です．卒業できるといいなぁ……． PDF.js は HTML5 とJavaScript を利用してPDFを描画するライブラリです． PDF.js を利用するとWebブラウザ上でPDFファイルを描画することができます． つい最近，このライブラリを利用して遊んでみた ので，そのときに得た知識とかを適当に書いてみます． このエントリでは主に以下の内容について解説します． PDF.js の取得，ビルド ページの描画 テキストを選択可能な形式で描画 注釈 (リンク等) を取り扱う PDF.js の各種オプション 動作環境 PDF.js は Canvas や TypedArray など割とモダン(?)な技術を利用しています． 利用しているWebブラウザが，PDF.js の要求を満たしているかどうかは， このページ で確認できます． 正直なところ
初心者のための Node.jsプログラミング入門 - libro
※ページが正常に表示されない場合 AddBlockなどの広告ブロックツールがONになっていると、ページの一部が表示されないことがあります。これらのツールをOFFにしてみてください。
Discover Meteor
この本は「Discover Meteor」の日本語版です。 Discover Meteorコミュニティによって翻訳され、クリエイティブ・コモンズ 表示-非営利 ライセンスのもとで無料で提供されています。 目次 紹介 (97%) 1 Getting Started (100%) 2 Deployment (100%) 2.5 Templates (100%) 3 Using Git & GitHub (100%) 3.5 Collections (100%) 4 パブリケーションとサブスクリプション (100%) 4.5 Routing (100%) 5 The Session (100%) 5.5 Adding Users (92%) 6 Reactivity (100%) 6.5 Creating Posts (100%) 7 Latency Compensation (0%) 7.5
Node : 今更ながらに、connect を読んでる。 : typeOf 'aki_mana'
Nodeネタも幾つか書いてきたのだけど、最近、真剣に express のフレームワークをマスターしておくべきだと感じたので、「expressやるなら connect.js 読んでおけ！」 といわれてる事もあって、connect読んでます。 これまでは、オレオレフレームワークとか言いながら、Nodeの基本にのみ従って書いてきたサーバー(FreeStyle Wiki のフレームワークを移植してたのが実際だけど)。 最近では、「レスポンスヘッダに Etag を使いたいよな」とか、色々と考えるところがあって、自分しか知らないオレオレフレームワークよりも nodeの開発元 joynet が公開する express を使う方向に軌道修正すべきと感じた次第。 ここで、「connect.js 読んでおけ！と言われる理由」をば。 sencha labs が開発した Node JSでサーバーを書く時の接続周り
ブラウザ、Node.jsの両方で使えるJavaScriptの書き方 - Qiita
（2014/12/31追記）この記事は古いです。@kaiinuiさんの記事『最近の行儀のよい JavaScript の書き方』がよりモダンな書き方なのでそちらを参照するべきでしょう。この記事は記録のために残します。 最近MEANアプリケーションを書いています。サーバー側はNode.js + Express、ブラウザ上ではAngularJS、永続化にはMongoDBというやつです。 これらは全てJavaScript単一言語なので、これまでサーバーサイド言語とJavaScript間では不可能だったコード、ロジックの共有が可能です。ただし一工夫が必要です。 共通化に一工夫が必要になる理由 Node.jsでは他JSファイルを読み込む際var Foo = require('Foo');といった宣言が必要になります。一方でクライアントサイド（以下「ブラウザ上」という）ではこういった概念はなく、主にHT
いまアツいJavaScript！ゼロから始めるNode.js入門〜5分で環境構築編〜
こんにちは、エンジニアなのにダンクができないのびすけです。今月から記事を書かせていただきます。 さてみなさん「Node.js」って知っていますか？ 僕も最近Node.jsの勉強を始めたので「Node.jsを使ったことがないけど使ってみたい」と思っている人に向けて、Node.jsの入門的な内容を紹介したいと思います。 ▼2020年最新版はこちら！ Node.jsとは 一言で言うとアツいJavaScriptです。 通常、JavaScriptはユーザーのブラウザで動作するプログラミング言語ですが、Node.jsはサーバー側で動作するJavaScriptであり、Web業界ではかなり注目されています。大量の処理に対応するために、ノンブロッキングI/Oというモデルを採用しています。 例えば、データベースから大量の情報を取得してWebページ上に表示をする処理をおこなう場合、通常はデータベースへアクセスし
pdf.jsをつかってPDFの内容をcanvasにレンダリングする - みかづきブログ その3
github.com すごいライブラリですね。さすがMozilla。 つかいかた 1. ライブラリをダウンロードして解凍 https://mozilla.github.io/pdf.js/getting_started/#download からライブラリをダウンロード 2. ソースを編集 viewer.htmlにアクセスした際、デフォルトではcompressed.tracemonkey-pldi-09.pdfを開くようになっているのですが、 web/viewr.js の28行目を編集することでデフォルトで開くPDFを変更できます。 3. サーバにアップ buildフォルダもwebフォルダもまとめてアップしましょう。 4. viewer.htmlにアクセス http://kimizuka.github.io/pdfjs/web/viewer.html PDFの内容がレンダリングされています。
D3.jsの使い方とグラフを作成するサンプル ｜ Tips Note by TAM
javascriptのライブラリ「D3.js」について調べてみました。 ■ 公式 D3.js - Data-Driven Documents ■ 日本語訳 D3.js - 日本語ドキュメント D3（Data Driven Document）.jsとは D3.jsとは、JSON、XML、CSV、タブ区切りテキスト、javascriptの配列などの 様々な形式のデータを可視化する時に便利なライブラリで、下記のような特徴があります。 ・データに基づいてドキュメントを操作する。 ＝データドリブン（データ駆動） ・データの表現に必要な変換は行うが、表現そのものは直接行わない。 ⇒表現は制作者に委ねられていますが、そのために複雑な表現が可能になっています。 ⇒表現には主にSVGを使用します。 ・モダンブラウザでの動作を前提としている。 ⇒標準では古いブラウザはサポートしない。（IEは9以上） ・jQu
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Site is undergoing maintenance
ServiceWorkerとCache APIを使ってオフラインでも動くWebアプリを作る - Qiita
3行のソースコードを入れるだけで機械学習できると噂のindicoをNode.jsで使って機械学習入門してみる - Qiita
fact-of-life.com
http://bouncejs.com/
http://heyadem.github.io/stackgrid/