Web上でアニメーションを表示するなら「Lottie」がおすすめ！特徴や使い方など | Web Design Trends
Web上でアニメーションを表示するなら「Lottie」がおすすめ！特徴と使い方など Webサイト上でアニメーションを実装する場合、簡易なアニメーションはCSSやJavaScriptで手軽に作ることができますが、リッチなアニメーションを作ろうと思ったらコード量も結構なボリュームになってしまいます。 そんな時におすすめなのが「Lottie」です。LottieはAfter Effectsで作成したアニメーションを簡単にWebやアプリで表示することができ、パフォーマンスにも優れています。 今回は、Lottieの特徴や使用するメリット、使い方などをご紹介したいと思います。 Lottieとは LottieはAirbnbが公開しているアニメーションを表示するためのライブラリです。スマホなどのネイティブアプリがメインのようですが、Webサイト上でも高クオリティのアニメーションを簡単に表示することができ、非
[JS]タッチ操作にも対応した快適なスライダー・カルーセルを実装する軽量スクリプト -Glide.js
jQueryなどのスクリプトやアニメーションのCSSに依存せずに、レスポンシブ対応の快適なスライダー・カルーセルを実装する軽量のスクリプトを紹介します。 スライダーは最後を表示した際に1枚目に巻き戻し、カルーセルは最後を表示した際に巻き戻さずにそのまま1枚目を表示します。 Glide.js Glide.js -GitHub Glide.jsの特徴 Glide.jsのデモ Glide.jsの使い方 Glide.jsの特徴 Glide.jsは他のスクリプトに依存性がないJavaScript ES6で実装されたスライダー・カルーセルです。軽量で快適に動作し、カスタマイズ性にも優れています。 依存性はなし スライダー・カルーセルに必要なものはすべて含まれています。 超軽量 22kb（gzip: 7kb)にすべての機能が搭載されています。 モジュール式 スクリプトはモジュール式。必要のない機能を削除
![[JS]タッチ操作にも対応した快適なスライダー・カルーセルを実装する軽量スクリプト -Glide.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/ff1d16e9316c76742c63906c5f9dd35a2bf6ab85/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201802%2F2018041501.png)
JavaScriptでの日付の処理が超便利になる「Moment.js」:phpspot開発日誌
Moment.js - A lightweight javascript date library JavaScriptでの日付の処理が超便利になる「Moment.js」 以下にできることをまとめてみます 文字列からパースして日付オブジェクトを生成 UNIXのタイムスタンプから日付オブジェクトを生成 「Dec 25, 1995」みたいな文字列から日付オブジェクトを生成 日付オブジェクトに時間を簡単に を加算・減算 指定日時からの経過時間を取得 オブジェクトをベースにフォーマットして出力する moment(date).format("dddd, MMMM Do YYYY, h:mm:ss a"); phpにもdateという関数やstrtotimeという関数があったりしますが、そういう便利機能をJSでも使うことが出来るようなものです。 日付をヘビーに使うようなプロダクトで使えそうですね。 サイ
WEBサービスで使えるPEAR以外で有名なPHPモジュール総まとめ:phpspot開発日誌
WEBサービスで使えるPEAR以外で有名なPHPモジュール総まとめ 「WEBサービスを作るなら最低限覚えておきたいPHPのPEARモジュールまとめ」というエントリで先日PEARの便利ライブラリについてまとめたのですが、今回はPEAR以外でも有名なライブラリをご紹介。 PEAR以外で挙げていくときりがありませんが、とりあえず有名どころや、私の知っている物、過去に当ブログで紹介したものをまとめてみます。 他にも便利な物や定番の物がありましたら、@phpspot_kj までTwitterなんかで教えてください。 グラフ描画 JpGraph ありとあらゆるグラフを描画してくれる有名なグラフライブラリ。 pChart グラフにデザイン性を求める場合に使えるクールなグラフ描画ライブラリ PHP/SWF Charts PHPでグラフをFlashで描画出来るライブラリ。グラフに動きを出してインタラクティブ
GSkinnerの作ったJavaScriptライブラリが素敵すぎる件 | fladdict
Flash界のコーディングゴッドGSkinnerがJavaScriptのCanvasをFlashライクに使うライブラリを作った。 この人、確か僕と同い年ぐらいかちょい下なんだよね。。。会う度に超へこむ。 画期的というか、確実にかゆいところに手が届くライブラリで、下みたいなのがサクサクJSでいける。あいかわらずソースは美しいし、ドキュメントも完備。 game sparkles rollover localToGlobal globalToLocal sprite sheets ざっと見た感じFlashでいうところの、Stage, MovieClip, Sprite, Bitmap, Matrix, Stage, EnterFrameとキーフレームアニメがサポートされてる感じ。これは素敵。 このライブラリそのものもスゴいんだけどポイントは、GSkinnerがJSやりだしたってことは、365日以
uupaa.js と jQuery を機能を中心にざっくりと比較 - latest log
Classの継承についてサンプルを追記しました。 jQuery の特徴的な構文を uupaa.js で表現する方法を追記しました。 デバッグ支援機能について追記しました。 特徴 uupaa.js jQuery 初版 version 0.1 (2008-06-07) version 1.0 (2006-10-27) 最新版 version 0.8 (2010年末を予定) version 1.4.2 (2010-02-19) ライブラリの目標 WebOSのフロントエンド 不明 本来の用途 WebOS / WebApp DOMの操作とサイトの装飾 使われ方 導入実績なし 小〜中規模サイト / ポータルサイト等 想定されるコアユーザ層 エンジニア デザイナー / コーダー / エンジニア 名前空間 uu (1つ) jQuery と $ (2つ) ライブラリによる識別子プリフィクスの予約 uu また
JavaScriptを使わずにmixiアプリを作る！·mist.js MOONGIFT
mist.jsはJavaScript製/jQueryを使ったオープンソース・ソフトウェア。OpenSocialによってSNS上で実行できるアプリケーション環境が増えてきた。日本ではmixiやGooが有名なプレーヤになるだろう。実際に作ってみたいと考えている企業、個人も多いはずだ。 サンプルより。マイミクを取得する アイディアはあっても、プログラミングが苦手で参加を躊躇してしまっている…という人がいるかも知れない。そんな方はまずはmist.jsからはじめてみてはいかがだろう。mist.jsはなんとJavaScriptすら使わずにmixiアプリが開発できるフレームワークだ。 タネを言えばJavaScriptの代わりにmist.jsが定義する方式に則って記述することで、データの取得周りを隠蔽できるということだ。とはいえ取れるデータは多い。OWNER/VIEWER、マイミク、IDで指定してユーザ情
グーグルのJavaScriptツール集大成「Google Closure Tools」
2009年11月5日，Googleは自社サービス製品であるGmail，Google Maps，Google Docsなどの開発に使用しているJavaScriptアプリ開発ツール群「Google Closure Tools」を一般公開しました。 "Closure"は一般的に，閉鎖や閉店といった意味で使われます。ツールの命名としては少しネガティブなニュアンスを感じますが，Google Closure Toolsの場合は，終結といった意味で，開発プロジェクトにおける最終ステップの仕上げ用ツール。すなわち“栓”という意味で中身があふれ出さないようにキッチリ閉めておくものといった意味合いから命名されているようです。 Ultimate（究極）に近い意味でGoogleの自信の表れと受け取った方がいいかもしれません。Googleで新規公開になったプロジェクトとしては珍しく，ベータ版の表記もありません（Go
Yahoo! UI Library 3（YUI3）の基本
「Yahoo! User Interface Library Ver.3」（YUI3）はYahoo!が開発した、Webのページを作成するための汎用ツールライブラリーです。オープンソースで無償で提供されており、アニメーション効果やドラッグ＆ドロップ、データ取得やイベントの応答など、多岐にわたる機能がサポートされています。今回はまずYUI3の全体像を紹介します。 はじめに Yahoo!は、米国時間9月29日に「Yahoo! User Interface Library Ver.3」（YUI3）をリリースしました。YUI3はJavaScriptやCSS（Cascading Style Sheet）で書かれた、Ajaxライブラリーです。 Yahoo!は今まで、インターネットによる情報提供のためのさまざまなツールを作成してきました。開発したツールの中でも、Webのページを作成するのに汎用的に使えるツ
PHPライブラリ「Imagick」で携帯の機種に応じた画像を表示する
はじめに 画像処理を行うライブラリの1つにImageMagickがあります。 ImageMagickとは ImageMagick Studio LLC が開発する画像操作のためのソフトウェアで、GIF、JPEG、JPEG 2000、PNG、PDF、PhotoCD、TIFF、DPXなどの幅広いファイルフォーマットに対応しています。GPL互換性のあるライセンスで提供されています。 そして、ImageMagickの機能をPHPで利用するための拡張インターフェースがImagickです。PHPでこのImagickを使うと簡単なコードでImageMagickの機能を利用できます。 本記事ではImagickを利用して、アクセスしてきた携帯電話の機種に応じて画像を表示させる仕組みの構築例について説明します。 対象読者 PHPでのWebアプリケーション開発について基本的なことを理解している方 動作環境と開発
【ハウツー】jQuery on iPhone - jQTouchを使ったWebアプリ開発 (1) jQTouchとは | エンタープライズ | マイコミジャーナル
iPhone向けWebアプリケーションの開発において、jQuery使いなら見逃せないプロダクト「jQTouch」のベータ版がリリースされた。同プラグインを使用すれば、ネイティブアニメーションを伴うWebアプリケーションでも簡単に開発できるようになる。jQueryベースのため、強力なAjaxアプリケーションだって可能だ。本稿ではjQTouchを使ったWebアプリ開発方法を紹介しよう。 David Kaneda氏は8月30日(米国時間)、jQTouchの最新版であるjQTouch 1.0(beta)をリリースした。jQTouchはThe MIT Licenseのもとで公開されている、iPhone上で動作するWebアプリケーション開発に特化したjQueryプラグイン。デベロッパはjQTouchを使用することで、テーマやネイティブアニメーションをともなうiPhone用Webアプリケーションを簡単に
[JS]一つの機能に特化したシンプルなJavaScriptのライブラリ集
jQuery, Prototype, MooToolsのように多機能ではなく、一つの機能に特化したシンプルなJavaScirptのライブラリをSmashing Magazineからいくつか紹介します。
SVGをプラグインレスで表示するJavaScriptライブラリ「SIE」の開発者に聞く | スラド
SourceForge.JPでは、同サイトを利用するオープンソース・プロジェクトを毎月1つピックアップし、その開発者にインタビューする「今月のプロジェクト」というコーナーを設けています。今回は、SVG画像を表示するためのJavaScriptライブラリ「SIE」の作者dhrnameさんにお話を伺いました。 プロジェクトの概要 プロジェクト名: SIE 登録日: 2008-01-16 20:38 URL: http://sie.osdn.jp/ プロジェクトホーム: http://osdn.jp/projects/sie/ 動作環境: その他環境, Win32 (MS Windows) ライセンス: Mozilla Public License 1.1 主要対話語: 日本語 プログラム言語: JavaScript プロジェクト管理者: dhrname SIEとはハイパーテキスト形式の画像をブラ
JavaScript 内で無圧縮 ZIP を作って Data URI を生成するライブラリを作りました - IT戦記
ちょっと思うところあって JavaScript 内で、複数のファイル情報を作って Zip で固めて、 Data URI を生成するライブラリを作ってみました。 ソースは以下の zip.js です。 http://svn.coderepos.org/share/lang/javascript/Zip/ 使うには 以下の base64.js が必要です。 http://svn.coderepos.org/share/lang/javascript/Base64/trunk/ この base64.js は弾さんが作ったものです。 今回 Zip で使うように、ちょっとチューニングさせていただきました。 こんなことができます // zip オブジェクトを作る var zip = new Zip; // 文字列をファイルとして追加する zip.addString('Hello, world!!', '
MJL ― MITSUE-LINKS JavaScript Library | 制作／開発 | ミツエーリンクス
概要 MJL (MITSUE-LINKS JavaScript Library)は、ミツエーリンクスで標準利用されるJavaScriptライブラリです。 MJLは弊社内における業務効率を改善するために、統一された設計思想、利便性の向上を念頭においた上で設計・開発されました。 MJLは他のJavaScriptライブラリ群とは異なる設計思想により、独特の特徴を持ちながらも他のライブラリと補完しあえるものを目指しました。 MJLはコピーレフトライセンスであるGNU GPLに基づく自由ソフトウェア（フリーソフトウェア）です。弊社は GNU GPLに則り、本ページにてMJLの全ソースコードを公開します。 ライセンス MJLはGNU GPL Version 3（参考邦訳）のもとに提供されます。 詳細はMJL本体ファイル内のライセンス告知をご覧ください。 ダウンロード MJL本体（圧縮版） mjl.js
Qdsmtp-Simple SMTP Mailer for PHP
hal456トップページ Qd Simple SMTPとは PHPにおいて標準のmail()関数が使用できない環境であっても、手軽にメールを送れるようにするライブラリです。 具体的には、外部SMTPサーバーに接続してメールを送ります。 またSMTP送信の方が一般的には、mail()関数よりも高速動作します。 ウィンドウズ(Windows)でPHPを使用している場合でも、SMTPサーバーをインストールしなくても、このQdsmtpを使えば、mail関数ライクにメールを送信することができます。 mail関数が使えなくても、SMTP送信であれば汎用性があり、開発と運用とでコードをわける必要がほとんどありません。 特徴 PHP4,PHP5の両方に対応 1ファイルをインクルートするだけのお手軽構成 mail関数風に手軽にSMTPでのメール送信が可能 SMTPのデータ形式でも送信可能（当たり前） POP
MOONGIFT: » 要チェック！テーブルからグラフを生成するJavaScriptライブラリ「Bluff」:オープンソースを毎日紹介
※ 画像は公式サイトのデモより これは面白い発想だ。Web上でグラフを作成、表示するライブラリは数多く存在する。その際に使う方式としては、基準になる点をXY軸それぞれに対して追加し、描画するという方式だ。これはプログラム言語にとっては簡単な方式かも知れない。 JavaScriptだけで画像グラフを生成する だが、使い慣れている表計算ソフトウェアの場合はどうだろう。はじめに表があり、そこからデータを読み取ってグラフを描くようになっている。その慣れた方式を使えるのがこちらのライブラリだ。 今回紹介するオープンソース・ソフトウェアはBluff、グラフ描画ライブラリだ。 BluffはJavaScriptのライブラリで、画像形式（PNG）のグラフを生成する。棒グラフ、円グラフ、エリアグラフ、折れ線グラフなど様々なグラフ形式をサポートしている。背景色を変えたり、複数のデータを描画できるなど多機能なライ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「Processing.js 0.6.0」リリース WebGLベースの3Dサポートを追加
Yahoo! UI Library3（YUI3）のコア機能（ノード・イベント）
Posts by Year | kvz.io
