面倒な作業不要で、Webアプリ開発が劇的にはかどる！至高のJavaScriptライブラリ6選 -
どうも、まさとらん（@0310lan）です！ 今回は、Webサービスやアプリ開発などにとても便利なJavaScriptライブラリを厳選してご紹介しようと思います！ 強力な独自機能を簡単に追加できるものやトレンドに合わせたWebデザインを構築できるもの、そのままWebサービスとして利用できるものまで、ピックアップしてみました。 これからWeb開発を始めようという人はもちろんですが、開発ネタに困っている人も何か良いアイデアが発見できるかもしれないので、ぜひ参考にしてみてください！ ■波形表示やプレイヤーも作れる高機能な音楽ライブラリ！ 【 wavesurfer.js 】 音声ファイルを読み込むだけでグラフィカルな波形表示が可能で、多彩なオプションを利用することで自在に音声を制御できるJavaScriptライブラリです。 音声の再生・早送り・巻き戻し・ミュートなどの基本機能はもちろん、音声の書き
Rearchitecting Airbnb’s Frontend
Overview: We recently rethought the architecture for the JavaScript side of our codebase at Airbnb. This post will look at (1) the product drivers that precipitated the changes, (2) the steps we took to move away from our legacy Rails solutions, and (3) some of the key pillars of the new stack. Bonus: We’ll talk about what’s next! Airbnb sees more than 75 million searches each day, which makes the
egjs
egjs is Javascript components group that brings easiest and fastest way to build a web application in your way.
モバイルWebのUIを速くする基本テクニックがわかる──Google I/O 2016 High Performance Web UI
モバイルWebのUIを速くする基本テクニックがわかる──Google I/O 2016 High Performance Web UI 川田寛（ピクシブ株式会社） こんにちは、ふろしきです！ 私はHTML5 Experts.jpで、過去2年ほどGoogle I/Oの情報を発信し、Web技術の変化についてお伝えしてきました。振り返るとGoogleは、2014年にモバイルWebの提唱と技術要素の拡大を図り、2015年からは「RAIL（モバイルWebが目指すべきパフォーマンス指標）」や「Progressive Web Apps（アプリのように振る舞うWeb）」といった、モバイルとの親和性が高いWebを作り出すための”考え方”を推し進めました。今年2016年は、さらにそれを踏み込んでいったという感じがします。 今回のI/Oで取り上げるのもそのひとつ。毎度お馴染みGoogle Developer A
Intersection Observer を用いた要素出現検出の最適化 | blog.jxck.io
Intro スクロールによる DOM 要素の出現などを効率よく検知するため、新しく Intersection Observer という API が追加された。 この API の使い方と、本サイトへの適用について記す。 要素交差(intersection)の検出 ページをスクロールしていく過程で、特定の DOM が画面に出現したことをフックしたいケースがある。 代表例は 画像の遅延読み込み であり、初期ロードでは画像の取得を行わずスクロールしていく過程で順次取得する手法である。 特に画像の多いページでは表示に必要なリソース取得のみに最適化でき、初期画面表示などでは効果が大きいとされる。 これを実装するのに必要なのは、「 <img> 要素が出現しているかどうか」であるが、本質的には「画面外にあった <img> が viewport と交差したか」を取得することになる。 つまり、 要素出現の取得
Intersection Observerが導入されvisibility計算やウェブの高速化が進む？
今年に入ってからポツポツと「Intersection Observer」の話が出てくるようになりました。 まだDraftの仕様ですが、GoogleですとChromeのバージョン51から導入されております。 広告やコンテンツにおけるVisibility評価 コンテンツ読み込みをコンテンツ領域が実際に"表示された"タイミングで開始することでページ読み込みを待つ必要がない 実際のdemoとしてはまだchrome betaかchrome devでしか見れませんが、画像のロードとしてdiv領域が50%に到達した時点で読み込む事を見せている、こちらのページでしょうか。 広告のvisibility評価が正確になるだけでなく、コンテンツ運営側にとっても実際読まれているの？という部分が明確化されるのと同時に、スマートフォンにおけるコンテンツ表示の評価にも役立つものになると思います。 Intersection
IntersectionObserverを使ってlazyload-imageを書き直した - 1000ch.net
IntersectionObserverを使ってlazyload-imageを書き直した 画像をスクロール同期でロードする<lazyload-image>というWeb Componentsの内部処理を、IntersectionObserverで書き直した。 可視領域に要素が入っているかどうかの判定 リライトする前までは、要素それぞれにscrollイベントのリスナを発行して、その中で画面内に要素が表れているかを判定していた。throttleしているとはいえ、それぞれのリスナで以下の処理を行っていたのでややパフォーマンスが気になっていた。 getBoundingClientRect()で要素の矩形を取得する document.documentElement.scrollTopとdocument.documentElement.clientHeightで画面の上下端を取得する 要素が可視領域と交
JSがブラウザを固めてつらいので、新しいAPI「requestIdleCallback」を使うことにした - pixiv inside [archive]
「ピクシブ株式会社 Advent Calendar 2015」の24日目の記事です。こんにちは、今年8月からピクシブに入社した新米の@_furoshikiです。入社直後は、古くなって大変なことになっているJavaScriptのコードを、そーっと触る系エンジニアをやっていました！ 私はピクシブに入る前から、オフィスの一部を借りて「東京Webパフォーマンス」という趣味丸出しなイベントを開催しています。その中で扱ったテーマのひとつである「requestIdleCallback」が、古いJavaScriptのコードにUIをブロックされ、荒んでいた私の心を救ってくれました！ 今回、このrequestIdleCallbackというブラウザの新機能について、pixiv insideのブランド力を信じて、日本に多く広まるよう宣伝してみようかとおもいます！ そもそも、ブラウザのなにが問題なのか？ Windo
![JSがブラウザを固めてつらいので、新しいAPI「requestIdleCallback」を使うことにした - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/9816ce1456c701bc9ca8189c4a1992fe7883d36e/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2Fcf5f8e7e9c0572236d914a69de729574796d371d%2Fbackend%3Dimagemagick%3Bheight%3D1300%3Bversion%3D1%3Bwidth%3D1300%2Fhttp%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fd%252Fdevpixiv%252F20151217%252F20151217010303.jpg)
10年のツケを支払ったフロント界隈におけるJavaScript開発環境（2016年4月現在）。 - 日々、とんは語る。
2015年はCSSが普及した以来となる10年に1度のフロントエンド大変革期で、それまでのツケが一気に回ってきたと個人的に感じていました。目まぐるしく状況が変化していきましたが、2016年になり、個人的にだいぶ落ち着いてきたと感じているので、ここらへんでまとめておきたい思います。 最初に結論を書いておくと、 『React + Redux + react-router + material-ui + axios + ES2015 + Babel + webpack + ESLint + Airbnb JavaScript Style Guide』 という組み合わせが、いま僕の採用しているJavaScriptの環境です。 主要ライブラリは React A JavaScript library for building user interfaces | React 去年、一気に普及したReact
JavaScriptで爆速グラフ・チャートが作成できる「CanvasJS」を使ってみた！ : うえぶはっく
ちょっとしたデータをサクッと「グラフ」や「チャート」にして、Webページに素早く公開したい人に最適なJavaScriptライブラリ「CanvasJS」のご紹介です！ 類似のライブラリはいくつかありますが、「CanvasJS」はわずか数行のコードですぐにグラフが作成でき、なおかつ豊富なパラメータをいじることで驚くほど細かいカスタマイズも実現できるのが特徴的です。 今回は、基本的な使い方を中心にご紹介しようと思います！ 必要なファイルを準備しよう！ 「CanvasJS」の本体ファイルは、サイトのトップページからダウンロードできますが、CDN経由からも利用できるようになっています。 https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js これを、HTMLファイルに読み込みます！ // index.html <!d
こないだ社内の勉強会でwebpackのこととか話したのでまとめた - getalog
webpackとは いろんなファイルをtranspileしてES5のJavaScriptに変換してくれるやつ AMDかCommonJSの形式でファイルをロード(CommonJSならrequire)すると、transpileしたファイルをロードしてくれる クライアント側のjsコードでもrequireを使用することができる assetとしてビルドして配布するイメージ コードが共用の場合、設定を変えることで素のrequireを利用するサーバー用コードと、webpackがpolyfillしたrequireを利用するクライアントコードとを別々に生成できる 全てがJavaScriptになる、画像やCSSも 画像は「Base64かFilePath」に CSSは「headにstyleを挿入するjsコード」に 特定のファイルをどのようにtranspileするかはpathマッチングでプラグイン形式で設定する
フリガナを自動入力する - Qiita
名前、ふりがなが連続しているフォームにおいて、ふりがなを自動入力する機能は、よく要求としてあがってきます。 jquery.autoKana.jsがよく使われているようですが、これはキーイベントを拾って、フリガナを作るので、 Google日本語入力やATOKの予測変換 スマフォのフリック入力 などで、ちゃんとキーイベントが発生しないものは、うまくフリガナを作ることができません。 (参考) https://github.com/harisenbon/autokana http://qiita.com/u-chida/items/6c07d558b3f06c9ed8d8 サーバサイドでフリガナを作る ちょっと考えを変えて、サーバサイドで漢字からフリガナを生成するようにしてみます。 MeCabやKuromojiで形態素解析すると、漢字の"読み"も取得できます。 IPA辞書だと人名が弱いので、NEo
フロントエンドで知っておきたい要素指定の考え方 - アニメイトラボ開発者ブログ
はじめまして、アニメイトラボのフロントエンドエンジニア id:koharusugiura です。 今回は XPathについて書きたいと思います。 HTML 文書から任意の要素を取得する際、多くの場合 jQuery や Selectors API などでセレクターを使いますよね? セレクターは細かい条件の指定はできませんが、簡単に要素が取得でます。しかし細かい条件によって要素の取得を行うことができません。 細かい条件で要素の取得を行う場合は、XPath を使うことで開発が捗ります。 XPathはセレクターよりも少々複雑な仕様となっていますので、まずは比較をしながらご説明したいと思います。 この記事は animateLAB Advent Calendar 2015 23 日目の記事です。 qiita.com ※ この記事でサンプルとして記載しているコードは特筆のない限り ECMAScript
サクッと導入出来るjavascriptを使ったカウントダウンタイマー | Glow-Factory
追記 : 大変申し訳ございませんが、デモサイト等の当サイトのGoogleアナリティクスコードのコピーは避けて下さい。 デモサイトのページを丸ごとコピペすると当サイトのアナリティクスコードまで貼り付けられますので、貼り付けた場合は、削除の方をよろしくお願い致します。 今回は、イベントの告知やタイムセールの告知に使えるjavasriptで作るカウントダウンタイマーの紹介です。 よくネットショップなんかで見るとは思いますが、 【ポイント10倍終了まで : 1時間15分15秒00】 デモページもご用意しましたのでご参考下さい。 デモページ みたいなのです。 最近では、楽天スーパーSALE!!があっているのでカウントダウンタイマーを使われている店舗さんも多いんじゃないんでしょうか？ ネットショップなんかでは販売促進なんかによく利用されているのですが、なかなか時間も無いし・導入方法がわからない。 って
uilang
a minimal, ui-focused programming language for web designers clicking on ".try-it" toggles class "hidden" on ".info-box" Try It Getting Started Insert uilang.js in your page, write some uilang as shown above in a simple <code> element and use CSS to show, hide and animate things. Download 1KB Build Interfaces Create popovers, tabs, galleries, overlays and more using a language specifically designe
Waves
Waves - Click effect inspired by Google Material DesignGetting Started It's easy to use Waves. Download the latest version of Waves from Github repository. Just include waves.css and waves.js to your HTML file. And Waves is ready to use! To put Waves effect on your buttons, wrap it inside a <span> that contain .waves-effect and .waves-button class. Waves support Font Awesome icons, so you can give
Stop using Javascript Tooltips – Hacking UI
Stop using Javascript tooltips. Seriously. Stop. CSS allows us to do almost everything capable with Javascript tooltips, and doesn’t require us to load external libraries, make additional HTTP requests or pollute the DOM. I created SCSS Tooltips, a simple Sass mixin, to make this task even easier. You can download a zip file or check out the code on github. Download “SCSS Tooltips” Are they really
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ページ内にお手軽にExcelスプレッドシート風UIを入れられる「jExcel」:phpspot開発日誌
appgiga.jp
Cleave.js - Format input text content when you are typing