[JS]ユーザーが快適に操作できることにこだわった、タッチデバイスにも対応のスライダーを実装するスクリプト -Flickity
デモページ: ナビゲーション Flickityの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 ※jQueryのプラグインとして利用する時は、jquery.jsを加えます。 <head> ... <link rel="stylesheet" href="/path/to/flickity.css" media="screen"> <script src="/path/to/flickity.pkgd.min.js"></script> </head> Step 2: HTML 各スライドをdiv要素などで実装し、ラッパーで内包します。 <div id="main-gallery"> <div class="gallery-cell">...</div> <div class="gallery-cell">...</div> <div cl
![[JS]ユーザーが快適に操作できることにこだわった、タッチデバイスにも対応のスライダーを実装するスクリプト -Flickity](https://cdn-ak-scissors.b.st-hatena.com/image/square/bf5475b2160c621bb7e866a6e614ec3326ad2769/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015012901.png)
スマホWebサイト/ハイブリッドアプリ開発を高速化するJavaScriptフレームワークまとめ | BACKEND AS A SERVICE mbaas BLOG
デスクトップ向けのWebサイト開発ではjQuery/Backbone.js/AngularJS/Ember.jsなどを採用するケースが多いのかなと思います。しかしスマートフォン、タブレット向けのWebサイトとなるとまた勝手が違います。特にUI周りの取り回しであったり、タッチ/マルチタッチイベント、スマートフォン特有のAPIなどを適切に扱えなければなりません。何よりハードウェアの性能がデスクトップより低いので高速にストレスなく動作させるためには軽量でなければなりません。そこで今回はスマートフォン、タブレット向けのWebサイトを構築したり、HTML5によるハイブリッドアプリを開発するのに使えるJavaScriptフレームワークを紹介します。ぜひ皆さんの開発に役立ててください。mBaaSお役立ちブログ トップ> ブログ> Tips> スマホWebサイト/ハイブリッドアプリ開発を高速化するJava
Tumblrの省メモリーな無限スクロール - 記録
無限スクロールまたはauto pagingと呼ばれるUIには、読み終えたコンテンツがどんどん画面の上のほうに溜まっていってメモリーを食い潰すという問題がある。 なかでもTumblrは画像などのコンテンツが多いため、ダッシュボードダイバーたちは無限Tumblrユーザースクリプトなどのユーザースクリプトをインストールして、読み終えたコンテンツを定期的にページ上から自動削除するといった対策を講じていた。 ところが最近のTumblrのダッシュボードでは、ポストが画面外に出るとその中の要素が一時的にページから削除され、画面内に表示されると要素が再度復元されるようになっている。どうやらこれによって無限スクロールによるメモリーの圧迫が抑えられているらしい。 関連するコードはhttps://secure.assets.tumblr.com/assets/scripts/dashboard.jsの/*! s
あなたが読むべきJavaScript Promises | JSer.info
はじめに この記事は、 JavaScript/ES6 promisesについてを理解するために読んだ方がよいと思われる記事やスライド等を紹介しています。 PromisesやDeferredといった言葉を非同期処理の話などで聞いた事があるかもしれませんが、 現在Promisesは次のECMAScriptの言語仕様として策定が進められています。 ECMAScript Language Specification ECMA-262 6th Edition – DRAFT domenic/promises-unwrapping まだES6は策定段階ですが、既にPromisesについてはpolyfillとして利用できるライブラリ等もあり、また他のライブラリ内でもjQuery.Deferred()やAngularの$q等類似する実装が存在します。 そのため、Generators等に比べると今すぐ使える
入力フォームをユーザーフレンドリーにする便利なJSプラグイン4つ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れ様です、デザイナーのモモコです。 私がメンバー写真に使っている(｀・ω・´)クッションが思った以上に縦に細くて個人的にツボった今日この頃です。 今回は入力フォームを実装する際に入れておくとちょっと便利になるJavaScriptのプラグインを4つご紹介します。 jQuery Label Better http://www.thepetedesign.com/demos/label_better_demo.html form部品にフォーカスを当てるとplaceholderがふわっと上に移動するプラグイン。 全体的に動きのあるWebサイトを作るときには活躍してくれそうです。 formatter.js http://firstopinion.github.io/formatter.js/ 電話番号やクレジットカード番号など、パターンのある数列を1つのform部品内で扱えるようになるプラグイン
jQuery：チェックされたら or 入力されたら送信可能にするボタンを実装する方法 - NxWorld
割と頻繁に使うので備忘録。 jQueryを使用して「チェックボックスにチェックされたら送信可能にするボタン」と「文字が入力されたら送信可能にするボタン」をそれぞれ実装する方法です。 特にチェックボックスの方は利用規約などに同意してもらったかの部分で用いたりと使う場面が多いのではないかと思います。 チェックボックスにチェックされたら送信可能にするボタン ページが表示された際はイメージ左のようにボタンにはdisabledが指定されて送信できない状態になっています。 それを「利用規約に同意します」というテキスト横にあるチェックボックスにチェックが入ったら、ボタンに指定してあるdisabledを解除して送信可能にするというものです。 実装にはjQueryを使用するので予め読み込ませおき、それぞれ下記のように記述をします。 <input type="checkbox" id="check" /><l
クリエイティブな動きがデザインが実装できる フリーjQueryプラグイン「30 Free jQuery Plugins for February 2014」
TOP > plugin > クリエイティブな動きがデザインが実装できる フリーjQueryプラグイン「30 Free jQuery Plugins for February 2014」 魅力的なwebサイトを実現させるためには、他にはないデザインや動きを取り入れることで、より理想に近づけることができます。今回はそんな魅力的な動きを実装できるフリーjQueryプラグイン「30 Free jQuery Plugins for February 2014」を紹介したいと思います。 （Drop） そのまま利用しても、自分のデザインと組み合わせて使っても、クリエイティブなwebサイトを作り出せるプラグインがまとめられています。 詳しくは以下 scrollReveal.js スクロールするとバーの動きを楽しむことができるプラグイン。個性的なデザインのサイトに仕上げたい時におすすめ。 leas
『JavaScriptテンプレートエンジン「JsRender」のすすめ』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは。フロントエンドエンジニアをしている清水です。 私は今、スマートフォン向けブラウザゲーム「天下統一クロニクル」を開発・運用しています。 本記事では、天下統一クロニクルで利用しているJsRenderというJavaScriptテンプレートエンジンの基本的な使い方とちょっとしたTIPSを紹介しようと思います。 JsRenderとは？JsRenderとは、テンプレートエンジンの一種です。 jQuery Templatesの作者でもあるBorisMoore氏が、同ライブラリの後継として作成しているライブラリです。 jQuery Templatesの後
WebページをRetina対応させるテクニック～基礎知識編
WebページをRetina対応させるテクニック～基礎知識編：jQuery×HTML5×CSS3を真面目に勉強（4）（1/2 ページ） iPhoneのRetinaディスプレイは、Webページの制作フローにも大きな変化をもたらした。WebページをRetina対応させるにはどうすればいいのだろうか。 はじめに 2010年6月に登場したアップルのiPhone 4には「Retinaディスプレイ」と呼ばれる、それまでの常識を覆した高精細なディスプレイが搭載されました。それ以降、スマートフォンやタブレットといったモバイル端末のディスプレイはより解像度の高いものへと進化していき、2013年の初めにはサムスン電子のGALAXY S4やソニーモバイルのXperia Zなど、フルHD画質対応（1920×1080ピクセル）のディスプレイを搭載したスマートフォンが登場するまでになりました。 高精細ディスプレイの登場
要素を天地左右中央に配置できる簡単超軽量スクリプト -Midway.js | コリス
デスクトップやスマフォ・タブレットのレスポンシブ対応で、画像やテキストなどを天地左右の中央に簡単に配置できる超軽量（1KB）のスクリプトを紹介します。 作業は、HTMLに2つ追加するだけです。 Midway.js Midway.jsのデモ Midway.jsの使い方 Midway.jsのデモ 天地左右中央配置は表示サイズを変更しても、変わらずに天地左右中央配置になります。 デモは、ブルーの矩形の中に、ホワイトの要素を天地左右中央配置にしています。 まずは、デスクトップサイズから。 デモページ：IE7モードで表示 Midway.jsの使い方 使い方は簡単で、ステップは2つです。 Step 1: 外部ファイル head内に、スクリプトを外部ファイルとして記述します。 <head> <script src="http://code.jquery.com/jquery-latest.js"></s
jQuery 2.0.1とjQuery 1.10.0が同時リリース。jQueryの2バージョン並行リリースが開始
jQuery 2.0.1とjQuery 1.10.0が同時リリース。jQueryの2バージョン並行リリースが開始 jQueryは、モダンブラウザに最適化し、Internet Explorer 6/7/8のサポートを廃止したjQuery 2.x系と、過去のブラウザも幅広くサポートするjQuery 1.x系の2つのバージョンがあります。基本的には機能はどちらのバージョンも同じで、互換性があります。 この2バージョン体制になったのは、4月にjQuery 2.0の正式版がリリースされたときからです。今後jQuery 2.0にはjQuery 1.10が、jQuery 2.1にはjQuery 1.11が相互に対応するバージョンとしてペアでリリースされることが発表されていました。 そして5月24日付けで、初めてjQuery 2.x系とjQuery 1.x系の並行リリースが行われました。jQuery 2.
いい加減、<script src="http://.. と書くのはやめましょう - DQNEO起業日記
外部サイトのJSファイルを読み込むときに、こういう書き方するのはやめましょう。 <script src="http://example.com/js/jquery.js"></script> 理由 あなたのサイトが、いつの日かSSLに対応することになったとき、そのscriptタグがバグの原因になります。 ご覧のとおり、HTTPSページの中でHTTP要素を読み込もうとすると、ブラウザによっては安全装置が働いて読み込んでくれないのです。 上の例ではjQueryの読み込みに失敗していますが、エラーメッセージ「Uncaught ReferenceError: jQuery is not defined 」を見てもHTTPS/HTTPのプロトコルが原因だとはすぐ気づかないので、わかりにくいバグになってしまいます。 結論 JSファイル(とかCSSとか画像とか)を読み込むときは、"http:"の部分を省
TypeScript0.9alphaをNode+Gruntで使うよ
Swift is the best programming language you should learn and make your dream app easily. Swift programming is a powerful yet easy-to-learn coding language created by Apple. It's frequently used for developing iOS and macOS applications, as well as tvOS and watchOS apps. While you can use other languages to create Apple apps, Swift is the preferred language, and it's recommended because its code is
jQueryでループして画像などコンテンツ要素をスライドさせる無限ループスライダーの作成方法｜BLACKFLAG
Webサイト上でバナーや商品のサムネイル画像などの見せ方として、並べられた画像（コンテンツ要素）を一定のスピードで自動でスライドして、無限ループさせているものをたまに見かけます。 そんなビューアー的役割のコンテンツ無限ループスライダーを作ってみたので紹介してみます。 まずは動作のサンプルから。 jQuery LOOPSLIDER【SAMPLE】 10個並べてある画像が自動でスライドし、無限にループしています。 この動作の全体構成について、HTMLから。 ◆HTML <div id="loopslider"> <ul> <li><a href="#"><img src="img/photo01.jpg" width="100" height="100" alt="" /></a></li> <li><a href="#"><img src="img/photo02.jpg" width="1
なんとWordPressプラグインまである。多彩なエフェクトでレスポンシブなフリーのjQueryスライドショー『Camera』 / Maka-Veli .com
なんだか話題になってるみたいですね？『Camera』というスライドショー。 特徴としては レスポンシブ 多機能、ハイクオリティ 多彩なエフェクト スキンも多数用意 WordPressで管理できる という感じなのですが、WordPressプラグインは本当にびっくりしました。 ウィンドウリサイズするとちゃんとレスポンシブ WordPressプラグイン。管理画面もしっかり用意されている 管理画面上でエフェクト等が細かく設定可能 他にも多数機能あり フリーなんですが、サポート（寄付）してね、というスタンスなのでもしよければ寄付して使ってみてはいかがでしょうか Camera http://www.pixedelic.com/plugins/camera/ WordPressはこちらから http://wordpress.org/extend/plugins/camera-sli
HTML5アプリで簡単にジェスチャーを実装できるライブラリ QUOjs 【18日目】 | DevelopersIO
モバイルHTMLシリーズ HTML5で追加されたinput要素のタイプはiPhone、Androidでどのくらい使えるのか おすすめ iPhone、Androidで使える！撮ったその場で画像編集できるHTML5アプリを作ってみよう iOS6のSafariでサポートされるHTML5の機能 HTML5で使えるスマートフォンの機能 スマートフォンサイトのパフォーマンスチューニング スマートフォンサイト用の軽量ライブラリ QUOjs HTML5のWebアプリで使えるジェスチャーにはどんなものがあるのか調べていたら、QUOjsというライブラリを見つけたので試してみました。 サイズが16KBと軽量なライブラリですが、簡単にイベント処理を実装できるので便利です。今回使ったバージョンは2.2.0 になります。 以下のサイトからダウンロードできます。 QuoJS 英語ですが以下のページに使い方が書いてあり
スマートフォン向けのイベントを簡単に実装できる「QUOjs」
スマートフォン独自のタッチイベントは多数有り、スワイプ、タッチによるドラッグなど様々なものがありますが、今日紹介するのはスマートフォン向けのイベント簡単に実装できる「QUOjs」です。 このjs一つで、様々なイベントに対応してくれます。現状、対応しているイベントは以下の通りです。 詳しくは以下 Comingsoonとしてローテート、ピンチイン、ピンチアウト等の動きも今後対応予定とアナウンスされています。 このライブラリはモバイルでの利用が見越されて設計されており、非常に軽量となっています。jQueryと似た構造となっていますので、jQueryに慣れている方にとっては実装も簡単です。またデバイスの環境を取得できるように作られており、オンラインか否かなども取得する事ができます。 詳しい実装方法、jsのダウンロードは「QUOjs – Micro JavaScript Library」からどうぞ。
Webベースのダイナミックでクールなプレゼンテーションを実装する為のJavaScriptフレームワーク・Mosho - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 Web上でプレゼンする為のJavaScript フレームワーク、Moshoのご紹介です。 impress.jsライクなダイナミックな 動きのプレゼンテーションをHTMLで 実装する事が可能です。シンプルで 良かったのでお勧め。 この手のは色々出ていますので探せばいくらでも見つかると思いますが、MoshoはjQueryやmootoolsなどのライブラリに依存しないスクリプトですので覚えておいて損は無いかも。 よくあるプレゼンのやつ。HTML5/CSS3/JavaScriptで作ります。サイズは非圧縮版で15KBほど。 以下にサンプル用意しました。矢印キーで操作します。 Sample data属性で指定する スライドごとの動きはimpress.js同様、カスタムデータ属
スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」:phpspot開発日誌
QUOjs - Micro JavaScript Library スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」 タップ、ダブルタップ、ホールド、スワイプ、スワイプ上下左右、ドラッグといったイベントを実装するのに使えそう モバイルということで3G回線にも配慮した13KBは嬉しい。 今後はローテートやピンチイン・アウトにも対応予定だそう 実装はjQueryライクで超簡単。 関連エントリ たった2KBで動作するスマホ用マルチタッチジェスチャーライブラリ「Hammer.js」 スマートフォンでの指ジェスチャの説明に使えるアイコンセット「Cue」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://solidstate.jp/ImageDisplay/slideshow/script_122.html