パララックス効果を再現するjQueryプラグイン「jquery.parallax」 - Qiita
新しく使いやすく作り直しました。 スクロールによってCSSを変更し、パララックス効果を実現するjQueryプラグイン この記事のものとは使い方が少し異なりますが、同じ機能をもっています。 site: http://develo.org/2014/04/21/0227.html GitHub: https://github.com/kamem/jquery.parallax 仕事でパララックス効果を使ったサイト作る機会があり、 使い勝手のいいプラグインないかなぁーと思って探していたのですが。 なかなか見つかりませんでした・・。 パララックスの仕組みってそれほど難しくないんだねぇーと思いながら作り始めたのですが・・。 なかなかいろいろな機能を組み込みだすとなかなか大変な感じで； 結構前に作った奴は自分だけ使えればいいやーと思い、プラグイン化していなかったのですが、最近ようやくプラグイン化しまし
Spring Boot で WebSocket を使ったサンプルアプリケーションの作成 | PGColony
pom.xml<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.example</groupId> <artifactId>springboot</artifactId> <version>0.0.1-SNAPSHOT</version> <!-- Inherit defaults from Spring Boot --> <parent>
jQueryプラグイン「pjax」でスムーズにページ遷移するサイトの作り方 | Neganin(ネガニン)
「pjax」とは「Ajax」と「pushState」を組み合わせたもので、非同期通信をしながらURLを変更することができる「jQueryプラグイン」です。 各ページの差分だけ読み込み、描画するので、転送量削減ができ時間短縮を図れますし、ページ遷移時のエフェクトも追加できたり、カスタマイズ性に優れています。検索エンジンからのマイナス点もない非常に優秀なプラグインです。 「Ajax」と「pushState」が何なのかというと・・・ Ajax ページを遷移せずにサーバーからデータだけを非同期でとり、サイトに描画する仕組みのことで、「Google Maps」などに使用されています。 pushState 「HTML5」で導入されたURL操作のAPIで「Ajax」を使用して非同期なサイトを作る時などにアドレスが変更されない問題を解消してくれます。 1. デモ 前置きが長くなりましたが、実際に「pjax
Struts後時代のJava EE／Javaモダン開発はどうあるべきか～JJUG CCC 2014 Springまとめリポート（前編） - ＠IT
日本Javaユーザーグループは2014年5月18日、「JJUG Cross Community Conference 2014 Spring」を開催した。「JJUG Cross Community Conference」（以下、JJUG CCC）は毎年春と秋に開催されるカンファレンス。初心者向けからエキスパート向けまで、Java／JVMに少しでも関連すればいいという広いテーマでさまざまな講演が行われている。 今年は4トラック同時進行、合計25ものセッション、ハンズオンセミナーという規模で大いににぎわった。 そして最新仕様であるJava EE 7に準拠しているのは2014年5月現在「GlassFish」「WildFly」のみで、主流は多種多様なアプリケーションサーバーが対応しているJava EE 6とのことだ（楽天はGlassFishを活用していることでも有名）。 エンタープライズ分野でJa
jquery 1.xと2.x の違い、さらに動作を高速にするための設定 | まとめーたー
photoBy: http://www.jose-aguilar.com/blog/wp-content/uploa…まずは jquery 1.x と 2.x の違い 1.x 系は IE8 以前をサポートするが遅い、重い 2.x 系は IE8 以前のサポートは捨てて、いるが軽い、早い アイルトン・セナじゃあるまいしそんなに早くしてどうすんの？Webページがたった1秒高速化するだけでECサイトなんか、売上が10％向上した事例もあります。 使い分ける対応していないIE8以下には古いjqueryを読み込ませます <!--[if lt IE 9]> <script src="jquery-1.9.1.js"></script> <![endif]--> <!--[if gte IE 9]><!--> <script src="jquery-2.0.0.js"></script> <script s
CORSリクエストでクレデンシャル(≒クッキー)を必要とする場合の注意点 - Qiita
クレデンシャルの送信 クロスオリジンのAJAXリクエストでクレデンシャル（クッキーの送信またはBASIC認証）を必要とする場合は、それを許可するオプションをフロント側Javascriptで付けておく必要があります。デフォルトではCORSリクエストでクッキーは送信されませんし、BASIC認証は送れません。 Fetch API の場合 fetch(url, { mode: 'cors', //クロスオリジンリクエストをするのでCORSモードにする credentials: 'include' //クレデンシャルを含める指定 })
BootStrap使っているんだったら、Loadingもglyphicon使っちゃえ！ | jlamp
Loading.js (function($) { $.extend({ LoadingImg: function(action) { // デフォルトパラメータ var param = { icon: 'glyphicon' , prefix: 'loading' }; if ('start' === action) { if (0 === $('#' + param.prefix + '-layer').length) { $('body').append('<div id="' + param.prefix + '-layer"> </div>'); $('#' + param.prefix + '-layer').after('<div id="' + param.prefix + '-content" class="text-center"></div>'); $('#' + p
Twitter Bootstrapのカルーセルをキーボードとスワイプで操作 - ZeBeVogue別館
Twitter Bootstrapはレスポンシブレイアウトに対応しています。ですので、PC用とモバイル用のサイトを兼用で作るのが非常に楽です。 ですが、その際に気をつけないといけないのがユーザビリティです。 当然PCとモバイルでは使われるアクションが異なる為、異なるユーザビリティの向上が必要になります。モバイルであればスワイプやタップ、PCではキーボードもしくはマウスが主体の操作になります。 ２つのライブラリを使って、カルーセルのアクションを制御させてみました。 カルーセルの基本的な使い方は公式サイトを見てください。 キーボード・スワイプで使うライブラリは以下になります。 jwerty touchSwipe jwerty キーボードショートカットが簡単に設定できるライブラリです。 基本的な使い方は以下の通りです。 jwerty.key('ctrl+shift+P', function ()
初心者でも分かる！モーダルウィンドウの作り方
特にスマホで活躍する、ダイアログのように浮かび上がるモーダルウィンドウ。初心者でも1から作れるよう、解説します。
CORS(Cross-Origin Resource Sharing)について整理してみた | DevelopersIO
ブラウザからAmazon S3に直接ファイルをアップロードしたい 先日、Amazon S3にファイルをアップロードするWebアプリを作ろうとして色々調べていたところ、S3にCORSという仕様のクロスドメインアクセスの設定をすることによって、ブラウザから直接S3にアップロードをする方法にたどり着きました。ただ、この方法を使うにあたってはCORSというクロスドメインアクセスの仕様をきちんと理解しておいた方が良さそうでしたので、まずはCORSについて自分なりに整理してみました。 なお、弊社の横田がCORSとS3についての記事を以前書いていますので、S3のCORSサポートに関する概要を知りたい方はそちらをご覧下さい。 CORS(Cross-Origin Resource Sharing)によるクロスドメイン通信の傾向と対策 CORS ブラウザでAjax通信を行う際には、同一生成元ポリシー(Same
Maplace.js - 軽量なjQuery × Googleマップライブラリ MOONGIFT
Googleマップをプログラマブルに組み込むのに良さそうです。 GoogleマップはAPIの多彩さ、機能の柔軟さもあって様々なサービスで使われています。位置情報や地図を扱おうと思ったら一番に考えるのではないでしょうか。 そんなGoogleマップをさらに手軽に使えるようにしてくれるライブラリがMaplace.jsです。機能は限られますが広範囲に利用できそうです。 まずは簡単なデモ。地図の表示を行います。コードとしてはたった数行です。 // JavaScript var maplace = new Maplace(); maplace.Load(); // or new Maplace().Load(); // HTML <div id="gmap"></div> その結果は次のようになります。 シンプルな地図表示。 次はドロップダウンやリストを使ったマーカーのデモ。マーカーは自動的に中央に表
Selectors API の querySelector/querySelectorAll を使ってみよう | TM Life
Selectors API の querySelector/querySelectorAll を使ってみよう. querySelector/querySelectorAll とは, CSS セレクタを指定して要素を取得できるメソッドです. 今後, getElementById や getElementsByClassName に代わる重要なメソッドとなるでしょう. とても便利なのになかなか普及しないんだよなぁ～. 知名度も低くいみたいなのでざっくりまとめてみました. About querySelector/querySelectorAll とは CSS セレクタがマッチする要素をチャチャっと取得する便利な API です. 例) document.querySelector("#hoge"); // id が hoge の要素を取得 document.querySelector("secti
クライアントワークでよくお世話になっているjQueryプラグインいろいろ
私が仕事で Web制作をする時に、よく利用させてもらっている jQuery のプラグインをまとめてみました。ライセンスは MIT、GPL のものばかりです。デザイン、レイアウト的に汎用性のあるものになっています。また、IE 特有のバグ（透過PNGの黒ずみなど）対策についても少し触れてみました。 Webサイトを作る時に、何かとお世話になっている jQuery のプラグイン。HTML と CSS だけでは表現できないことも、Javascript を使うことでいろいろできるようになりますよね！インターネットを見ていると、本当にたくさんの jQuery のプラグインが公開されています。feed を読んでいても、1日一個くらいは新しい jQuery のプラグインに出会います。どれを使ったらいいか迷うくらい … 。 今回は、そんな数ある jQuery のプラグインの中から、 私がクライアントワーク（仕
[jQuery Mobile] PhotoSwipeプラグイン
jQuery用プラグイン “PhotoSwipe” を、jQuery Mobileに適用したサンプルを試してみました。 これは、jQueryを使ってタッチデバイス上でスタイリッシュなイメージギャラリーを作るためのプラグインです。jQuery Mobileに特化したものではないですが、親和性は高いはずなので、組み合わせてみます。 PhotoSwipeの基本的な機能は、アンカーで参照した先にある複数の画像を、インターフェースのついたスライドとして見せてくれるものです。今回は提供されているサンプルを踏襲して、3×3のサムネイル画面をつくり、サムネイルがクリックされるとスライドショーが開始されるようにしたいと思います。ただし、サンプルにはjQuery Mobile的にまずい点があるので、その辺の修正コードも含むようにしています。 さておき、簡単な実装方法とデモを用意してみました。 デモ 簡易的なデ
![[jQuery Mobile] PhotoSwipeプラグイン](https://cdn-ak-scissors.b.st-hatena.com/image/square/fea767e2ea01a50fd866602e922b75c9ee0f3b69/height=288;version=1;width=512/https%3A%2F%2Fscrew-axis.com%2Fwp-content%2Fuploads%2F2011%2F12%2Fjqm-photoswipe.jpg)
jQueryを使ってスマートフォン用のイベントを扱ってみた - SUSH-i LOG
スマートフォン用のサイトを作る場合は、jQuery Mobileやら、jQTouchやら、Sencha Touchやら色々ありますが、ちょっとそこまで必要ないときに、スマートフォン特有のイベントをjQueryを使って扱えないか触ってみました。 スマホ特有のイベント スマホ特有のイベントは幾つかありますが、今回は特に使われるであろうタッチ、スライド、ピンチイン、ピンチアウトに重点を置いて調べてみました。 上記操作に必要なイベントは以下の通りです。 touchstart touchmove touchend touchcancel gesturestart gesturechange gestureend 「touch***」というイベントが画面に指でタッチした、している時のイベント、「gesture***」というイベントが「二本指以上」の操作（ピンチイン、ピンチアウト、回転等）を行っている時
jQuery Mobileページの基本構造を理解しよう（1/3） - ＠IT
これらのフレームワーク／ライブラリを利用することで、デバイスの違いを（全くでないにせよ）あまり開発者に意識させることなく、標準的な枠組みでスマートフォン対応のアプリケーションを開発できるようになる。 スマートフォン対応のフレームワークは歴史も浅く、まだまだデファクト・スタンダードといえるものはないものの、現時点で最有力候補の一角と目されるのが、本連載のテーマでもある「jQuery Mobile」だ。 ■jQuery Mobileとは？ jQueryそのものについては本稿の読者諸氏であれば、すでに既にご存じであろう――JavaScriptライブラリのデファクト・スタンダードだ。「Write Less, Do More（よりシンプルなコードで、より多くの処理を）」をモットーに、シンプルな構文でありながら機能性も高いことから、近年急速にユーザー数を増やしている。何千、何万にも及ぶプラグインによっ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
