画像圧縮やオートコンプリートなどWeb開発を簡単にするJavaScriptライブラリ厳選まとめ！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、Webアプリやサービスなどを開発する際に簡単な記述でさまざまな機能を組み込めるJavaScriptライブラリをご紹介します。 画像、ファイル、音楽、オートコンプリート機能など、高度な技術をできるだけ簡単に実現してくれるJavaScriptライブラリを厳選し、その基本的な使い方も合わせて解説しているのでぜひ参考にしてみてください！ なお、JavaScriptはpaizaラーニングの「JavaScript入門編」で学ぶことができます。そちらも合わせてチェックしてみてください。 ■画像の圧縮機能を組み込めるライブラリ！ 【 Compressor.js 】 ブラウザに標準で提供されているtoBlob()を応用して、カスタマイズ可能な非可逆圧縮を手軽にWebページへ組み込めるJavaScriptライブラリです。 さまざまなフレームワークにも組み込
[JS]画像の拡大表示をシンプルなコードで実装し、スマホ時のクロップ表示にも対応しているスクリプト -enhance.js
Mediumで採用されているような画像拡大のエフェクトに、より使いやすくなるように工夫が加えられたスクリプトを紹介します。 アニメーションがより洗練され、スマホなどの小さいサイズではクロップして画像を表示します。 enhance.js -GitHub enhance.jsの特徴とデモ enhance.jsの使い方 enhance.jsの特徴とデモ 「enhance.js」は「zoom.js」にアニメーションのエフェクトと画像のクロップを加えたもので、img要素にdata属性を加えるだけで簡単に画像拡大のエフェクトが実装できます。 参考: 画像を拡大表示するシンプルなスクリプト -Zoom.js
![[JS]画像の拡大表示をシンプルなコードで実装し、スマホ時のクロップ表示にも対応しているスクリプト -enhance.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/c6f13e423847497c453413dde2a0e4cb770e6e56/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016022902.gif)
クールな画像拡大jQueryライブラリ「lity.js」、レスポンシブにも対応！ | SHINGO IRIE
クリックで画像が拡大されるライブラリはlightboxなど数多くありますが、その中でもデザインの邪魔をせず、実装もかんたんなライブラリ、それがlity.jsです。 使い方公式サイトから一式ダウンロード。 ダウンロードしたファイルの中で使うのはdistフォルダ内のlity.js、lity.cssのみ。 jQueryの後に読み込ませます。 <link href="lity.css" rel="stylesheet"> <script src="jquery.js"></script> <script src="lity.js"></script> あとは、 <a href="http://image.jpg" data-lity>Image</a> のようにdata-lity属性をつけるだけで動きます。かんたんですね。下がlity.jsの表示サンプルです。 WordPressへの組み込みWor
画像の遅延ロードでイライラを解消 TADAプラグイン
「TADA」は、画像の遅延ローディングを手軽に実装するプラグインです。ページを読み込んだときではなく、画像が見える位置までスクロールしたタイミングで読み込むので、ページを開いたときの待ち時間を短縮できます。 TADAプラグインはGoogle ChromeなどのモダンブラウザーとInternet Explorer 8以降、iOS／Androidのスマートフォンに対応しています。 ライセンスはMITです。ライセンスに従って著作権表示は削除せずに利用しましょう。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、 TADAをGithubからダウンロードします。ページ右下の「Download ZIP」ボタンからダウンロードできます。 利用するWebページのbodyの閉じタグ直前で、jQuery本体と、ダウンロードした「jquery.tada.min.js
Caffeで手軽に画像分類
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。システム統括本部 データソリューション本部の宮崎です。 最近ディープラーニングと呼ばれる技術の話題を耳にすることが増えてきました。 この記事ではディープラーニングの手法を実装し画像認識系の用途で便利に使えるCaffeというツールの使い方を紹介します。 Caffeの概要 Caffeは、C++で実装されGPUに対応した高速なディープラーニングのライブラリです。 大規模画像認識のコンテストILSVRCで2012年にトップとなった畳込みニューラルネットワークの画像分類モデル[1]がすぐに利用できるようになっています。 Caffeは、カリフォルニア大学バークレー校のコンピュータビジョンおよび機械学習に関する研究センターであるBV
[JS]Lightboxの進化形！クリックでもタップでも快適動作の画像を拡大表示させる超軽量スクリプト -Intense Images
サムネイル真ん中の風景写真は縦長 Intense Imagesの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 ※jQueryなど他のスクリプトは必要ありません。 <head> ... <script src='../intense.js'></script> </head> Step 2: HTML 画像は2種類の配置方法があります。 img要素はサムネイルと拡大時の画像を兼用し、data-image属性は拡大時に高解像度の画像を利用することができます。 <img src="./img/awesome-source.jpg" /> <!-- OR --> <div class="anything" data-image="./img/awesome-source.jpg" /> data-imageを使用する時は、サムネイルはCSSで背景画像として指定
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
