cakephp/wordpress/flash/flex/iPhone/mixiアプリの開発しています。
ドラッグできるスクリプトは知ってる方も多いかもしれませんが、これは知らなかったのでメモ。
「Dragdealer JS」はIE6からiPhoneやAndroidでも軽快にドラッグできるJavaScriptですよ。
クロスブラウザ対応するスクリプトは覚えておいてもよいですよね。
↑横スライダーの位置によってフォントサイズを変更するサンプル
↑赤い部分をドラッグする事でコンテンツをスクロールさせてます。
↑画像をドラッグするサンプル。
範囲外にドラッグすると反発するように戻るようになります。
これらが全てクロスブラウザで動作するので、ドラッグするインターフェースを作る際に良さそうです。
デモ&ダウンロードは下のリンクから確認ください。
最近スマートフォン対応やタブレット対応の案件が増えてきて、スワイプに対応させたいと言われる事が結構多いです。
知ってる人も居るかもしれませんが、スワイプが出来るようになるjQueryプラグインをまとめてみました。
画像ギャラリー専用のものから、ページ全体をスワイプで区切るものまで色々ありますよ。
参考になれば幸いです。
Canvasでストライプ画像を手軽に作れる「cicadaJS」
サイトの背景や、ちょっとしたアクセントに使えそうだったのでご紹介。
要素をストライプで装飾してくれるようになります。
カラフルな見た目で華やかになりますね。
色や帯の幅は調整可能ですよ。
まずは、Canvasを描画するオブジェクトを指定します。
var cancan = document.getElementById('stripes');
次に、ストライプのカラーと帯の幅を指定します。
cancan.cicada([
{
width:53,
color: [ 'rgba(239, 234, 211, 0.5)', 'rgba(191, 169, 124, 0.5)' ],
alignment: 'middle'
}, {
width: 37,
color: 'rgba(145, 0, 42, 0.5)',
alignment: 'left'
}, {
width: 29,
color: [ 'rgba(125, 167, 180, 0.5)', 'rgba(75, 119, 130, 0.5)' ],
alignment: 'left'
}
])
http://matthewlein.com/cicadajs/demos/bg-random.html
↑ランダムにストライプを作成してくれますよ。
手軽にオシャレにしたい場合に良さそうです。
興味のある方は下のリンクからどうぞ。
Google Chartsを拡張してグラフ作成できるJavaScript「Yokul」
Google ChartsはURLにパラメータを指定するだけでグラフを描いてくれるAPIなのですが
グラフのy座標、x座標の値を細かく指定できなかったりするなど微妙に不便な所があります。
その微妙に不便な所を解消できるかも、なライブラリですよ。
Googleができる事よりも多くのグラフを描画できるのと、10,000 × 10000 pxなどの大きなグラフ生成できるのが特徴です。
↑Y座標のラベルを細かくした様子です。
現在の所はGoogle Chartsの全てのグラフには対応してないようなので、
一部グラフが表示できない場合もあるようですね。
詳細&ダウンロードは下のリンクからどうぞ。
無限にドラッグできるインターフェイスをjQueryで作れる「Infinite Drag」
全体をドラッグで移動できるようになっており、タイル毎にHTMLを設定できるようになっています。
各タイルには自由にHTMLを設定したりできるので
フォームを表示したり、画像にしたり、何でもOKのようです。
移動方向を横だけに限定したりもできました。
使い方によっては面白いものができそうですね。
ポートフォリオとかに良いかも。
興味のある方は下のリンクからどうぞ。
WordPressで新規にサイトを構築した際に便利そうだったのでご紹介。
皆さんはサイトを作った後にはウェブマスターツールを使用していますか？
ウェブマスターツールを使うと、
・検索結果の表示状況をキーワードごとに分析できたり
・外部のサイトからのリンクを確認できたり
・クロールエラーを簡単に確認できるようになっていたり
使って無い方は使うとHappyになれるかもしれません。
で、使用するにあたってサイトの管理者かどうかの認証作業が必要になるんですが、
通常はmetaタグに認証用のキーフレーズを設定したり、サイトの直下にHTMLをアップして認証します。
しかし、「Google Site Verification Plugin」を使うと、管理画面からポチッとボタンを押すだけで簡単に登録ができるようになるようです。
↑認証を許可するだけの作業です。
これは便利ですね。サイト構築時の作業がすこしでも楽になるように、覚えておいて損はなさそうです。
有料だけど超クールでかっこいい管理画面用のテンプレートが「35 Premium Admin and CMS interface HTML templates」というエントリーでまとめられていたのでご紹介。
クライアントへのCMS納品時に管理画面のデザイン費用は取れない場合や、
社内の人間しか使わないシステムの場合などなど、
できるだけ手軽に使いやすい画面を構築する際に使えそうです。
ほとんどのテンプレートでJavaScriptが利用されており、
リッチなインターフェイスになっているのが特徴です。
有料とはいえ、ほとんどが1000円〜3000円程度のものでした。
デザインができない、時間を節約したいという方にもおすすめです。
リンク先にはわかりずらいですが、２ページ目もあるので
全部みたいという方はじっくりどうぞ。
Dropboxのようなクラウドストレージとファイル共有アプリが作れる「Syncany」が面白そうだったのでご紹介。
ソースコードはオープンソースで公開されていますので、自分でクラウドサーバーを作ってみたい方や興味が有る方におすすめです。
ただ単にファイルを同期するだけでなく、
データ保存にGoogle StorageやAmazon S3、Picasaなどを使用してクラウドに保存しようとするのが特徴です。
もちろん、自分のサーバで構築してFTPやSSHでアップする事もできますよ。
その他にもファイルマネージャとの統合やバージョン管理、クライアント側の暗号化などのセキリティ対策にも力が入れられているようですね。
↑Growl風の通知も可能。
自分でストレージサービスを作りたい方や、
Dorpboxやsynergyなどの外部サービスにデータを預けるのが心配な場合に使ってみてはいかがですかね。
詳細&ダウンロードは下のリンクからどうぞ。
画像やテキストにグレーフィルタをかけるjavascript「GRAYSCALE.JS」をご紹介。
IE系ではフィルターを適用し、
それ以外のブラウザではCanvasを使用してエフェクトを実装しているようです。
画像、背景画像、テキストカラーがグレースケールで表示されるので、
色がわからなくても情報が伝える事が出来る、ウェブアクセシビリティテストに使えそうですね。
詳細&ダウンロードは下のリンクからどうぞ。
これは便利そう。いつか使うかもしれないので、メモ的にエントリーです。
「jQuery-URL-Parser」を使うと、URLを分解して簡単に値を取得できますよ。
使い方はこんな感じです。
var url = $.url('http://example.com/folder/index.php?item=value');
url.param('item');
こうするとクエリーのitemの値”value”が取得できるというわけです。
他にもホスト名やディレクトリ,#以降のアンカーの値も取得できますよ。
これはいいかも。
詳細＆ダウンロードは以下からどうぞ。
0