WebアニメーションはLottieがオススメ！基本の使い方完全ガイド【2020年版】
最近のウェブサイト制作では、アニメーションがますます重要になってきています。 この記事は、Lottieの使い方をまとめた基本ガイドです。Lottieの魅力はもちろん、After EffectsへのAiファイルの読み込みやアニメーション作成、プラグインを利用したJSONファイルの書き出し、Webサイトでのアニメーション表示まで一連の流れをまとめています。 Lottieを利用すれば、手軽にそして軽量に動画を貼り付けることができるので、これまでアニメーションを試したことのないひとにもオススメです。 コンテンツ目次 1. Lottie（ロッティー）って何？ 2. Lottieを利用するメリットは？ 3. Lottieアニメーション作成手順ガイド 4. After EffectsへのAiファイルの読み込み 5. After Effectsでアニメーション作成 6. Lottie JSONファイルでア
jQueryを使用して指定したハッシュタグのつぶやきを取得する
Posted: 2010.12.11 / Category: javascript / Tag: jQuery, json, Twitter, 正規表現 Twitterのつぶやきを表示しているWebサイトがだいぶ多くなってきた昨今。イベントサイトなどでは特定のハッシュタグのつぶやきを表示するといった使い方もされているようです。 ということでこの記事ではjQueryを使用して指定したハッシュタグのつぶやきを取得して表示してみます。 Twitterのハッシュタグを検索し取得するURI Twitterからはさまざまな形式でデータを取得できますが、jQueryを使用するならjson形式が便利です。 ハッシュタグを取得するURIは下記です。 http://search.twitter.com/search.json?q=%23[ハッシュタグ名] [ハッシュタグ名]は取得したいハッシュタグ名に置き換え
JSONデータをHTMLにマッピングできるjQueryプラグイン「JSON2HTML」
JSONデータをHTMLにマッピングできるjQueryプラグイン「JSON2HTML」を紹介します。 JSON2HTML １．概要 「JSON2HTML」はJSONデータをHTMLにマッピングするためのHTMLテンプレートエンジンです。 次のようなJSONデータがあるとします。 var data = [ { 'name': 'A', 'value': 10 }, { 'name': 'B', 'value': 20 }, { 'name': 'C', 'value': 30 } ]; たとえば、このJSONデータから次のようなHTMLを出力することができます。 <ul> <li>A (10)</li> <li>B (20)</li> <li>C (30)</li> </ul> jQueryプラグインとnode.jsパッケージの2種類が配布されています。 ２．ダウンロード JSON2HTML
TwitterのAPI 1.1で取得したユーザーのJSONデータからAtomフィードを作成する
Twitter API 1.1で取得した、任意のユーザーのタイムライン（JSONデータ）からAtomフィードを作成する方法を紹介します。 Twitter API 1.1で取得したJSONをAtomに変換したサンプル １．Twitterアプリケーションの作成 Twitterアプリケーション開発のページを開き、Twitterのアカウントでサインイン。 右上にある「Create a new application」をクリック。 「Application Details」のName、Description、Websiteを設定。Callback URLの設定は不要です。 下の方にある「Yes, I agree」をチェックし、CAPTHCAを入力して「Create your Twitter application」をクリック。 次の画面の下にある「Create my access token」をクリ
様々なフォーマットにも対応可能な、美しい年表コンテンツを実装できるjQueryプラグイン・Timeline - かちびと.net
珍しいので一応メモ。年表を作れる jQueryプラグインです。見た目も 綺麗なんですが、スプレッドシート や、JSON形式にも対応出来るので どこかで使えるかも、と思いました。 機能も申し分ありません。 多用するようなものでもありませんが、スプレッドシートの情報を読み込むのは面白いですね。 綺麗です。上にコンテンツ、下に年表があって、ツールチップ形式でタイムラインが形成されます。ツールチップをクリックするとスライドが動く、というインターフェース。 年表は伸縮できますので見難い、というストレスも感じさせません。また、広がる時のアニメーションもスムーズで気持ちいいです。 全画面にしたり、GoogleスプレッドシートやJSON形式のデータを読み込んでタイムライン化する事も可能みたいです。この点は結構便利では無いかと。 Sample コード<script type='text/javascript
様々な時系列グラフを描画できるJavaScriptライブラリ「Rickshaw」:phpspot開発日誌
RickShaw 様々な時系列グラフを描画できるJavaScriptライブラリ「Rickshaw」。 カーソルを合わせるとインタラクティブにデータが表示されたりするグラフを描画出来ます。 デザイン性もなかなか良い感じ。 グラフの描画をリアルタイムに変更したりすることも可能。 カラースキームなんかも色々と選べるようです AjaxやJSONPによるデータ取得と描画も可能。 関連エントリ シネマグラフGIFアニメで驚きの効果を作成するPhotoshopチュートリアル 様々なインタラクティブ要素のあるグラフが描画できるJSライブラリ「Elycharts」 tableデータをグラフに置き換えてくれるjQueryプラグイン「Chartify」 HTML5のcanvasタグで描くグラフ描画ライブラリ「AwesomeChartJS」
綺麗なツリービューが実装できるｊQueryプラグイン「jsTree」:phpspot開発日誌
jsTree Examples 綺麗なツリービューが実装できるｊQueryプラグイン「jsTree」 次のようなWindowsのツリービューっぽいUIが実装できます。JSONやXMLデータをツリーとして表示することが可能です。 アプリケーションで使い慣れた機能をWEBでも簡単に使えるのはいいですね クリックでアイテムの選択も可能です。 実装は最低限次のコードで実現できます $("#demo1").tree(); 関連エントリ WindowsアプリのツリービューっぽいUIをWEB上で簡単実装できるjQueryプラグイン「jquery.dynatree」 折り畳み可能なシンプルツリーメニュー実装jQueryプラグイン「Simple Tree Menu」
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
