動的コンテンツを画像化できるJSライブラリ "html2canvas" を使おう - KAYAC engineers' blog
こんにちは、HTMLファイ部新卒の石崎です。 今回は、Webページを画像化できるJavaScriptライブラリ、html2canvas について紹介します。 html2canvasを上手に活用することで、Webサイト側で表示ページのキャプチャを用意して処理したり、ユーザに提供したり出来るため、作れるWebサービスの幅がきっと広がります。 スクリーンショットを撮る html2canvasを使うとWebページのキャプチャを作れますが、そもそもスクリーンショットを得る方法は他にいくつもあります。 Webページの見えている部分のキャプチャをユーザが撮る Mac command + shift + 4 + space Windows Alt + PrintScreen このコマンドで、Webページのウィンドウに表示されている部分のキャプチャを撮ることができます。 スマートフォンであれば、端末の電源ボ
たった一行で重いスクロールが軽快に！will-change属性を付けるとFPSが上がる理由 - Qiita
HTMLやCSSのパフォーマンスチューニングを皆さん普段意識されているでしょうか？ フロントエンドはJavaScriptの進化と共にアプリケーションが年々複雑化してきたこともあり、パフォーマンスチューニングのトピックを目にする機会が増えました。 しかしHTMLやCSSも同様にレンダリングの仕組みを少し知り、それに応じた実装することでパフォーマンスを大きく上げることも可能です。 今回は最もシンプルかつ分かりやすい事例として、will-changeプロパティについて紹介したいと思います。 サンプルを使ってFPSを実際に測定してみる 今回はサンプルとして、TwitterのツイートにあたるHTML構造と同じものを4000個縦に並べ、高さ400pxでスクロールできる領域を用意し、スクロール時のFPS(Frame Per Second)を測定してみました。 // この実装は実質たった3行！ const
【2017年度版】いざというときに活躍するJavaScriptチャートライブラリ15選
高度情報化社会やビッグデータ時代と呼ばれている現代において、データビジュアライゼーション(データの視覚化)は注目されている分野の一つです。 アプリだけでなくWebサイトにおいても、ダッシュボード画面などで、大量のデータの中から意味のある情報を、分かりやすいUIを使って表示する機会が増えています。 ホームページにこのようなデータを表示するときに役立つのが、JavaScriptベースのチャート・グラフライブラリです。 操作性が優れていたり、さまざまな種類のチャートやグラフを表示したり、レスポンシブ対応していたりと、さまざまな機能を持つチャートライブラリが存在します。 今回は、2017年に試してみたい、いざという時に活躍するJavaScriptライブラリを集めました。 ほどんどのライブラリが商用利用も可能で、汎用性があります。 次のプロジェクトで採用できそうなライブラリをぜひ探してみてください。
【JavaScript】３大フレームワーク Angular, React, Vue.jsを比べてみよう (2018年4月) - Rのつく財団入り口
JavaScriptフレームワークを比較してみよう (2018年4月) トレンドの移り変わりが激しいWebフロントエンド。2017-2018年現在、JSフレームワークで最も有力な3強がAngular/React/Vue.jsの３つと言われています。他に日本で比較的聞くのはRiot.js、Ember.js、Hyperappなどがありますね。 ちょいとFW選定の技術調査でいろいろ調べたりしたので、このエントリでは初学者なりに比較を整理してまとめてみたいと思います。 なお最後にも書いてありますが、実際に使ったりして得られた知見もあれば、入門レベルだと確かめようがないので本やネットの情報や意見の中で多いものの受け売り的になっているところもあります。フレームワークって結局どれがいいのという話は混乱したり場合によっては荒れがちですが、最終的には情報は各自の判断でご利用ください。フレームワークは開発をよ
初夏のJavaScript祭(2017) 資料まとめ - Qiita
概要 JavaScript祭に参加してきたので発表資料や内容をまとめます。 間違いや追記などあればご指摘お願いします 初夏のJavaScript祭 in mixi twitter #jsfes 講演内容 講演資料 JSのエラーチェックツールを作ろうとした話 資料：https://www.slideshare.net/keisukeimura/javascript-76398722 ツイート:https://togetter.com/li/1115447 WW checkerを作った話 jsエラーやリンク切れなどを自動でチェックするツール 本日β版の事前登録開始！ Draft.jsによる 統制のとれたテキスト編集の世界 資料：https://speakerdeck.com/potato4d/draft-dot-jsniyoru-tong-zhi-falsetoretatekisutobian
僕なりのフロントエンド開発環境2017年版 - Qiita
2016年版を書いてからもう1年もたってさらに古くなってきたので、今の環境に合わせてバージョンアップ 僕なりのフロントエンド開発環境2016年版 - Qiita 僕なりのフロントエンド開発環境2016年版v2 - Qiita https://github.com/koh110/minjsapp 2016年版からのバージョンアップ点 webpackをv2に vendor.jsの切り出しかたをgulpからwebpackに gulpfileにあったwebpackのconfigをwebpack.config.jsに切り出し 環境変数にパスを切り出し webpackをv2に webpackのv2がついにリリースされたので移行。 古い環境はどんどんとおいていかれるのでなるべく早めにやったほうが最終的な移行コストは低くなると思います。 vendor.jsの切り出し方をgulpからwebpackに 今まで
JavaScript初級者が調べるInternet Explorer特有の仕様いろいろ
JavaScript ( != jQuery ) を勉強してます 最近、jQueryからJavaScriptに改宗を企てています。node.jsとかTitaniumとかやってみたいので、JavaScriptとして勉強し直しです。ブラウザやDOMのことを省いたらシンプルな言語ですし、柔軟で楽しい言語ですよね。 さて、業務でその取り組みを強行しようとしたところ、案の定Internet Explorer特有の仕様に悩まされたので、簡単なところで違いをまとめてみました。 Internet Explorerのことを教えていただいたり var elm = evt.target || evt.srcElement;も RT: @ahomu var evt = e || window.event;Thu Jan 27 06:19:29 via webYoshiaki Sugimoto sugimoto19
フロントエンド開発の現場で役立つJavaScriptの知恵10選
どんどん複雑化するJavaScript開発。KADOKAWAが運営するオンラインメディア「WPJ」から、チームで仕事をするときの「ちょっとしたお作法」や、デバッグを効率化する方法など、JavaScriptのコードを書くときに役立つ10本の記事をお届けします。
JavaScript初級者のためのコーディングガイド - Qiita
JavaScriptは大変難しい言語です。Rubyの難易度を2、Cの難易度を5、C++の難易度を8にすると、JavaScriptの難易度は12ぐらいあると思います。このコーディングガイドはそんなJavaScriptの深みに嵌まらないようにするためのJavaScriptの書き方を規定したものです。初級者1のための物ですので、わかってやっている人に好きにやってください。 このコーディングガイドは絶対に従わなければならないものではありません。私は一切強制はしませんし、初級者が従わなければならないという義務もありません。採用するしないはみなさんの自由です。 禁止編 JavaScriptには安易に使用してはいけない機能があります。下記の機能は、それぞれの機能を使っても良い、または、使うべきであるという理由を説明できない限り、使用してはいけません。 ==、!= ==と!=を使用してはいけません。代わり
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
IEの古いバージョンをサポートしつつ、モダンブラウザ用のサイトを制作する時の20のアドバイス
Microsoft公式のIEのデベロッパサイト「modern.IE」から、古いブラウザをサポートしつつモダンブラウザ用のサイトを制作する時に役立つアドバイスをクロスブラウザの観点や、HTML, CSS, JavaScriptの実装時ごとに紹介します。 20 tips for building modern sites while supporting old versions of IE 下記は、各ポイントを意訳したものです。 クロスブラウザ HTML CSS JavaScript クロスブラウザ ウェブサイトはすべてのブラウザで同じように見える必要はありません。 例えば、最新のブラウザではよりリッチなUIを提供し、古いブラウザではソリッドに機能させます。 開発をシンプルにするために、堅実なテンプレートを利用しましょう。 動作が安定しているスタンダードにフォーカスを合わせて制作する。 スタ
window.showModalDialog( url, arguments )メソッド - JavaScript（ジャバスクリプト）リファレンス
引数 url モーダルダイアログとして表示するHTMLファイルのURLを指定。 arguments モーダルダイアログに渡す引数。 モーダルダイアログ内で、window.dialogArgumentsプロパティを使い取得できる。 第３引数で、モーダルダイアログのサイズなどを指定することもできる。 詳しくは、window.showModalDialog( url, arguments, options )メソッドのページへ。 戻り値 モーダルダイアログを閉じるときにwindow.returnValueプロパティに設定してある値を返す。 サンプル１ モーダルダイアログを呼び出す サンプル１の動作について 「モーダルダイアログを呼び出す」ボタンをクリックすると、モーダルダイアログが現れる。 モーダルダイアログを閉じるまで、ブラウザ上の他の操作はできない。 モーダルダイアログを閉じると、「モーダル
Googleの新言語「Dart」、ECMAが標準化を開始
Googleが、JavaScriptよりも優れたWeb言語として開発中の「Dart」。このDartの標準化をECMA Internationalが開始したと、The Chromium Blogのエントリ「Ecma forms TC52 for Dart Standardization」で報告されました。 Dartは先月、最初の正式版となる「Dart 1.0」がリリースされたばかり。 ECMA InternationalはJavaScriptの標準化を行っている団体でもあり（JavaScriptは正式にはECMAScriptという名称）、DartはGoogle独自の言語から標準化された言語へと最初のステップを踏み出したことになります。ECMAは他にもC#の標準化も行っています。 WebブラウザにDartVMを搭載することを目指して 昨年の10月にGoogleがDartを発表したとき、Java
JavaScriptのメモリリーク検出ツール - 日常メモ
探してみた。 後で読もう ・JavaScript Memory Leak Detector (v2) http://blogs.msdn.com/b/gpde/archive/2009/08/03/javascript-memory-leak-detector-v2.aspx ・leak-finder-for-javascript https://code.google.com/p/leak-finder-for-javascript/ ・Leak Monitor。Firefoxの拡張機能。 http://phpspot.org/blog/archives/2006/10/javascriptfiref.html
簡単に別ドメインからAjax対応する方法
こんばんは、笹亀です。 最近は、もっぱらjavascriptとsymfony漬けです。 普段よく使用するAjaxですが、Ajaxを実装する際の問題点について悩まされました。 「クロスドメイン」という問題です。 Ajaxのクロスドメイン対策について、難しいことやめんどくさいことが苦手な私は、簡単で手軽に実装する方法がないものかと調べました。 調べている中、私にぴったりな手軽にクロスドメインのAjaxを実装する方法がありましたので紹介したいと思います。 Ajaxを使用する際に、しばしば別ドメインのスクリプトを呼び出して使用したいことがあると思います。しかし、通常のAjaxで使用されるXMLHttpRequestなどはセキュリティ上の理由で使用しているページ以外のドメインに対してリクエストを送ることができません。使用しているページ以外のドメインではAjaxに限らず、使用しているページのJavas
jQueryで開閉メニュー＆ボタンのテキストを切り替える
ブログWEB制作に関する技術情報やサンプルコードからエクセルや パワーポイントのお役立ち情報まで幅広くご紹介しています。 開閉メニューのサンプルコードは、よく目にしますが、”ボタンのテキストを切り替える機能が付いた”サンプルコードは見つからなかったので自身のコピペ用に作成しました。 スマートフォン用サイトには重宝するかも。 > サンプル javascript<script type="text/javascript"> $(document).ready(function(){ $("#menu").hide(); var flg = "close"; $("#btn").click(function(){ $("#menu").slideToggle(); if(flg == "close"){ $(this).text("× メニューを閉じる"); flg = "open"; }els
画像のズーム効果、画像の一部を拡大表示｜jQuery plugin｜Ajax｜PHP & JavaScript Room
jQueryを使用して、簡単に画像にズーム効果を付ける方法が掲載されています。 使用する画像は原寸大の画像1枚。 img要素のwidth/height属性にサムネイル表示時のサイズを指定しておきます。 サムネイル画像にマウスがのった時に、画像をサムネイル表示時よりCSSで画像サイズを25%大きくするアニメーションを行い、z-indexをあげて他の要素より上に表示するようにしています。 マウスが離れた時に、CSSで画像サイズを元のサイズに戻すアニメーションを行い、z-indexを元に戻す方法がとられています。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w
簡単で高機能！デザイナー必見の汎用性が高いjQueryプラグイン7選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 最近、いろんな先輩方から「お前服だっせえな」と言わるので、ファッションの傾向を泣く泣く変えました。嵐の相葉君をお手本にこれまで頑張って参りましたが、相葉君には近づけませんでした。無念。 さて、今回はさまざまなシーンで活用できる、汎用性の高いjQueryプラグインを7つほどご紹介させていただきます。簡単＆シンプルで優れた機能のものばかりなので、ぜひご覧ください。ダウンロードできる本家サイトのほかに、日本語で分かり易く解説してくださっているサイト様のURLも合わせて載せておきます。 1.世界一使いやすいスライダー”bxslider.js” カスタマイズ豊富で、設置の仕方も超簡単！弊社CTOづやさんのオススメでもあります。 フリック、スワイプも対応しています。最強すぎます。 ダウンロード：bxslider様
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Moment Timezoneを使って日付をJSTに変換する - Qiita
http://indigonote.com/2011/06/23/google-feed-api-pluralfeed/