スクロールアニメーションを実現！Intersection Observer APIの使い方 デモあり
他のサイトで紹介されているのを見て､「なんで読み込むプラグイン書いてないの？不親切だな｡」ってなりましたが､読み込まなくていいんです｡ jsプラグインをいろいろ使っている人のほうが最初驚くと思います｡ ブラウザがデフォルトで持っている機能だそうです｡ ただ､IEには対応していないので､IE対応が必要な場合はpolifillを読み込む必要はあります｡ 以下をfooterに貼り付けてください｡ //HTMLの場合 <script src="https://cdn.jsdelivr.net/npm/intersection-observer@0.9.0/intersection-observer.js"></script> //PHPが使える場合 (IEのときだけ読み込む) <?php // ブラウザ取得判定するのに小文字にする $browser = strtolower($_SERVER['H
JavaScriptのIntersectionObserverを使って可視領域に入った要素をふわっと表示させる | ブログ | 静岡県のホームページ制作 | 6666666 セブンシックス
セブンシックスのダイチです。画面をスクロールして可視領域に入ると、要素がフワッと出てくるやつ、ありますよね。それを、JavaScriptのIntersection Observer APIを使ってやってみよう！というのが今回のお話です。 あらすじ 私はこれまで、要素をふわっと出すやつには「Emergence.js」というライブラリを好んで使っていました。軽量かつjQuery不要のライブラリです。Emergence.jsに不便は感じていなかったのですが、心情的にスクロールイベントよりもIntersection Observer APIを使いたかったので、代替ライブラリを探すことにしました。良さそうなライブラリが見つからないまま、ヒットしたJavaScriptの解説記事ばかり読んでるうちに、自分で書いたほうが早いということに気が付きました。おい。 やりたいこと スクロールして要素が画面内に入っ
フロントエンドエンジニアにとっての2019年。アンケート結果から分析するイマドキのウェブ制作 - ICS MEDIA
ウェブ業界の当たり前だと思っていることでも、同業他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・ この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載第5回目となる本記事ではウェブ業界の「フロントエンドエンジニアにとっての2019年」と題してアンケート結果を紹介します。 JSでブラウザ挙動をどうやって防ぐ？ ウェブページでインタラクションを作るときに、ブラウザのデフォルト挙動が邪魔になることがあります。たとえば、aタグのリンクはJavaScriptでキャンセルでき、自前の処理に置き換えることができます。 ブラウザ挙動のキャンセルのやり方にはさまざまな手段があるのですが、主流のやり方はどれでしょうか？ addEventListener()メソッドやonclick属性のイベントについて質問しました。 187票の回答があり「ret
Angular&Firebase を使ってがっつりサーバーレスな Web サービスを作ってみた - Qiita
はじめに 「Angular」と「Firebase」を使ってサーバーレスなWEBサービスの開発・運用したノウハウを紹介します。 この記事では詳細な技術的なことにはあまり触れず、「どんな技術を使用してWEBサービスを作ろうか」を検討している人向けに記載しています。 みなさんのサービス開発時の検討材料になれば幸いです。 Angularとは Googleによって開発が進められているJavaScript(TypeScript)フレームワークです。SPA(シングルページアプリケーション)が容易に作成できます。 Firebaseとは Googleによって開発が進められているWEBサービスやモバイルアプリに必要なサーバー処理を提供するmBaasサービスです。 要件 以下の要件を満たせるものを目指しました。 No. 要件 実現方法
Lazy Load(画像の遅延読み込み)を実装する方法
レイジーロード(遅延読み込み)とは、その名の通り、画像を遅れて読み込ませるテクニックのことです。具体的には、ユーザーがスクロールをして、目的の画像が画面内に映るタイミングで、初めて読み込みを実行します。「遅れて」というよりは、「適切なタイミングで」と言った方が正確でしょうか。さて、このことはどのような意味を持つでしょうか？ 転送量の節約ユーザーは訪れたページの全てを見るわけではありません。あなたにも、あるページを訪問して「やっぱ止めた」とすぐに戻るボタンをクリックして帰った経験はありますよね。基本的に、ブラウザは訪れた時点で、ページの全ての画像を読み込みます。 このページに、仮に100枚の画像が掲載されていたとしたらどうでしょうか。ちょこっと訪問されるだけで、毎回、見られてもいない大量の画像の転送が発生してしまいます。余計な転送が発生することで、運営者側にとってはサーバーコストが増える、閲
Amazonの商品拡大画像の実装をマネる - Qiita
商品画像の実装をマネルと書いたが実際にはライブラリを使って表現してみたッて感じです！ そのとき調べたことを議事録的にまとめたもの。 Maginifierについて 使用するライブラリ mark-rolich/Magnifier.js 公式のサンプルサイト Magnifier.js demo 他にも同じようなライブラリがあったが 一番使いやすそうだった Amazonの動きと一番近かった サンプルがわかりやすく充実をしていた ので、Magnifierを採用。 簡単なサンプル サンプルサイトに記述してあることの反復である。 使用するのはファイルは3つで、githubからDownloadしてくる。 Magnifier.js Event.js magnifier.css 一番単純な使い方 <html> <head> <title>Magnifier Sample</title> <script typ
javascriptからAndroidを呼び出す/Androidからjavascriptを呼び出す - 明日の鍵（跡地）
javascript→Android javascript interfaceを用意 適当なjavaオブジェクトでおっけー 今回はToastを表示するオブジェクト作りました import android.content.Context; import android.widget.Toast; public class Toaster { private Context context; public Toaster(Context context) { this.context = context; } public void show(String text) { Toast.makeText(context, text, Toast.LENGTH_SHORT).show(); } } WebViewにjavascript interfaceを追加する WebViewのインスタンスを取
WebViewにJavascriptでAndroidのAPIをたたけるインタフェースを追加する - あられねこのめも
WebViewで表示するコンテンツからjavascript経由で、AndroidのAPIをたたけるようにするJavascriptインタフェースの追加方法について。 HTML,Javascript,css3でAndroidのアプリが作れるフレームワークのJavascriptプラグインを拡張する方法でもあります。 PhoneGap(android版)やjsWaffleなどのWebViewベースのフレームワークで端末のAPIを呼び出すために行っている方法です。Titaniumもandroid版はまだWebViewがメインだったような・・・。 PhoneGap http://www.phonegap.com/ jsWaffle http://d.aoikujira.com/jsWaffle/wiki/index.php? Titanium Mobile http://www.appcelerato
Android アプリの WebView 連携 - アカベコマイリ
この前 iOS アプリの UIWebView 連携という記事を書いたが、その対となるものとして Android アプリにおける WebView 連携についてまとめてみる。 はじめに Android SDK は WebView という Web ブラウザ コントロールを提供している。これは iOS における UIWebView に相当し、ページ表示とアプリ連携をサポートしている。本記事では iOS の UIWebView 連携で実装したサンプルを Android に移植しながら WebView 連携の実装手順や考察をまとめる。 ローカル HTML と assets Android アプリ内にローカル HTML を組み込む場合、assets を利用することになる。Eclipse + ADT を利用した Android プロジェクトの場合、その直下に assets というディレクトリが用意されてい
[Android] JavaScript との連携 - WebView - marunomaruno-memo
[Android] JavaScript との連携 - WebView ================================================================================ WebView を使うことで、レイアウトの中で、HTML を表示することができる。 自分のアプリケーションから独立しているブラウザーでは、アプリケーションから HTML を制御することはできないが、アプリケーション内の WeｂView を使えば、アプリケーシ ョンから HTML の制御は可能になる。たとえば、JavaScript と Java のプログラムとを 連携させることができる。 JavaScript との連携方法としては次の 2 つがある。 (1) JavaScript から Java のメソッド呼び出し (2) Java から JavaScript
![[Android] JavaScript との連携 - WebView - marunomaruno-memo](https://cdn-ak-scissors.b.st-hatena.com/image/square/df3a50c14b465108d37d0f484920317dd74971fb/height=288;version=1;width=512/http%3A%2F%2Fu.xgoo.jp%2Fimg%2Fsns%2Fblog.png)
HTML5 Canvasで画像のリサイズするならコレ！「JS-Image-Resizer」
クライアントサイドでのHTML5での画像のリサイズは普通Canvasを使うだろう。 しかし、実際にCanvasのリサイズをやってみて、そのクオリティーの低さに驚いた。 1. Canvasでリサイズ これがMacのPreviewでリサイズしたもの。 ジャギジャギしてて画像としての価値は大きく下がってしまう。 Flashなんかだと、デフォルトでまあまあのクオリティーのスムージングがかかるのであまり気にすることはなかったが、こりゃダメダメだ。 2. Lanczosアルゴリズムでリサイズ そこで、もっとハイクオリティにリサイズする方法は無いかと調べた。まずあたったのはこちら。 javascript - Resizing an image in an HTML5 canvas - Stack Overflow これはLanczosアルゴリズムでリサイズする方法だ。 ハンガリーの人「Cornelius
新JavaScript例文辞典
説明 File APIで選択されたファイルの容量(サイズ)を取得するにはファイルオブジェクトのsizeプロパティを参照します。値はバイト(byte)になります。 サンプルプログラム 【HTML】 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Sample</title> <link rel="stylesheet" href="css/main.css" type="text/css" media="all"> <script type="text/javascript" src="js/sample.js"></script> </head> <body> <h1>選択されたファイルのファイルサイズを調べる</h1> <form> <input type="file" id="sFiles" m
カタカナ⇔ひらがな/全角⇔半角変換(カタカナ対応) - Thousand Years
最新版はこちら http://code.google.com/p/kanaxs/ ひらがな⇒カタカナ String.prototype.toKatakanaCase = function() { var i, c, a = []; for(i=this.length-1;0<=i;i--) { c = this.charCodeAt(i); a[i] = (0x3041 <= c && c <= 0x3096) ? c + 0x0060 : c; }; return String.fromCharCode.apply(null, a); }; "ぁぃぅぇぉあいうえお".toKatakanaCase(); // ァィゥェォアイウエオ カタカナ⇒ひらがな String.prototype.toHirakanaCase = function() { var i, c, a = []; for(i
Javascript の 全角数字、半角数字変換 | Think IT!
Javascriptの全角数字を半角数字に変換しようと思って グーグル先生に聞いてみたけどあまりにも冗長なコードが多すぎるのでちょこっと自作 function cast_num(a) { return a.replace(/[０１２３４５６７８９]/g , function(a){ var b = "０１２３４５６７８９".indexOf(a); return (b !== -1)? b:a; } ); } まー、たったこれだけ、一行で書けるレベルなんですけどピッタリのものがなかったので とりあえず、メモ あ、関数名は適当 ZenNum2HanNum とかいう関数名はいまいち嫌い（笑 ところで、こういった単純なスニペットの需要はないかと思って書かな方んですが、意外と需要あるもんですかね？ あ、思いついた時に上げていきたいと思います (^^)/
全角文字、あるいは半角文字が含まれているかチェックする | JavaScript Tips
Tips というより開発時に調べた Script 等を忘れないように書き留めた覚え書きです。 最近はここに書き留めておくことも忘れている始末で、我ながら情けなく思う今日この頃です。 ということで、不定期更新というか最近更新していませんが、JavaScript や VBScript などを紹介していきますのでご参考になれば幸いです。 全角文字、あるいは半角文字が含まれているかチェックする 文字のバイト数をカウントするスクリプトの応用です。 文字列を１文字ずつチェックし、全角（半角）文字の場合そこで処理を中止し、true（真）を返します。 １文字も含まれていない場合は、false（偽）を返します。 /**************************************************************** * 全角/半角文字判定 * * 引数 ： str チェックする文字
XMLHttpRequestオブジェクトとは
Ajax を使ったデータの通信を行うために使用されるのが XMLHttpRequest オブジェクトです。を使用します。 XMLHttpRequest オブジェクトを作成したあと、サーバとの間で通信を行い、データの受信が完了したらコールバック関数を使って受信したデータの処理を行います。ここでは XMLHttpRequest オブジェクトのコンストラクタ、および XMLHttpRequest オブジェクトで用意されていメソッドやプロパティについて解説します。
jqueryで画像のロード完了後に実行 - downstairs lab
jqueryで以下のように書いたら画像の読み込み完了後に読み込まれると思っていたら、 ieは正しく動作せず。どうやら、ブラウザによって挙動が異なる模様。 http://api.jquery.com/load-event/ $("#photo img").load( function(){ //ロード完了後の処理 } そこでimagesLoadedプラグインを使用するとieでも画像の完了後の処理が可能になります。 https://gist.github.com/268257 $("#photo img").imagesLoaded( function(){ //ロード完了後の処理 }); 画像のロード完了処理の際はお気を付けください。
404 Blog Not Found:javascript - 勝手に添削 - JavaScript入門
2007年04月12日23:30 カテゴリLightweight Languages javascript - 勝手に添削 - JavaScript入門 釈迦に説法を承知で。 IT戦記 - 社内勉強会資料 amachang - JavaScript 入門Object.prototype = { /* ... */ }は避けるべし みにくいのでオブジェクトを入れ替える方式に Box.prototype = { speed: 4, move: function() { this.left += this.speed; this.element.style.left = this.left + 'px'; if (this.left > 400) clearInterval(this.id); }, start: function() { var self = this; this.id = s
[JavaScript] 画像の実際のサイズを取得する (jQuery使用) | 1000g
imgタグのwidth/height要素を指定していない場合、イメージがどう表示されるかはブラウザによって異なる。 すべてのブラウザで画像オリジナルのwidth/heightを取得しようとしても、ブラウザ毎にパラメータやメソッドが異なる jQueryを利用すると、下記コードで画像の実際のサイズを取得できる /* * 画像の実際のサイズを取得する * * @param string image img要素 */ function getActualDimension(image) { var run, mem, w, h, key = "actual"; // for Firefox, Safari, Google Chrome if ("naturalWidth" in image) { return {width: image.naturalWidth, height: image.na
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Chart.js
