Webページのテスト表示にDropBoxをつかう

Dropbox

昨年末から本格的にDropBoxを使い始め、Web制作で何かと便利な代物だということに気づいてしばらく、Webページで使うjQueryなどの動作確認にDropBoxのPublicフォルダを活用してみることにしました。

DropBox Automatorというツールを使えば、自動的にアップすることもできるのですが、常に更新されるわけではないので、難しいことは一切せず、デフォルト機能のpublicフォルダに制作しているページと使っているデータ一式をコピペ。あとはコピペしたページを右クリック→DropBox→「パブリックリンクのコピー」。

そしてアドレスバーに貼り付ければ確認することができます。

CSSなどで絶対パスを使っていると同じディレクトリ構成にしないといけないので見れない場合もありますが、jQueryなどでデザイン、レイアウトを整形している場合などに活躍してくれます。

余談ですが、DropBoxに日ごろ入れているのは、

  • 複数の端末で使いたいダウンロードファイル
  • 制作中の制作データ
  • 制作、更新が必要なWebサイトのデータ
  • HTML5ベースのテンプレート(HTML5,js,cssのセット)
  • 外出先で使うこまごまとしたデータや画像(地図やQRコードなど)
  • スマホで使う着信用の音楽データ など

デザインは大画面のデスクトップですることがほとんどですが、コードはラップトップでやることが多くなり、記事のまとめなどはほとんどEvernoteでするようになりました。

Dropbox ×Evernote があれば外出先や移動中でもラップトップがあれば作業できるので重宝しています。ちなみにドコモのスマホユーザーならEvernoteのプレミアムプランが1年間無料で使えます。

http://db.tt/Jcjoz049 このアドレスからDropboxを登録してもらうともれなく2GB+250MBの容量で始めることができるのでこれからという人はぜひ!

2011年のWebデザイン関連ブックマークまとめのまとめ。

2011年のWebデザイン関連で役立ちそうな記事やブックマークを集めたサイトをいくつか見たのでブックマーク的に記事にしました。
今後も見つけ次第、時折更新すると思います。
2011年総まとめ:ウェブ制作に役立つエントリーBest 20(coliss)
2011年・個人的に参考になったWeb制作向けの国内記事リスト(かちびと.net)
2011年よくブックマークされた15のエントリー(Webpark)
ツイッター9月~12月のつぶやき まとめ 9/1 ~ 12/31 2011(Web Design RECIPES)


合間で見つけたので取り急ぎ。
Google Readerにはてブのタグ検索結果を登録しておくとトレンド的な記事はつかみやすいと思います。
このほかにもこんな記事あるよ!といったところはコメントorこの記事のTweetにRTでコメントなどしていただければと思います。
 

WebサイトでjQueryを使ってTwittelatorの画像表示のようなエフェクトを追加する方法


Caps

最近UIが一新され、新たなアプリケーションのインターフェイスを形にして切れた「Twittelator」。
そのインターフェースの中で自分が一番気になった画像表示のエフェクトをjQueryを使ってcdbk.net CREATIVESのshowcaseで形にしました。
使うのはjQuery.js(今回は1.4.2)とイージングのエフェクトを簡単に追加できるjQuery.easing.js(1.3)のみ。
エフェクトを施したい画像を<span class=”jumpin”></span>で囲みcssでdisplay:block,overflow:hiddenを指定。
JavaScriptはjQuery、easingを<head>内に追加したあとに下記を追記。

//初期表示設定
function jumpin_set(){
	$(".jumpin").each(function(){			//指定するクラス
		var img_w = $(this).width();		//デフォルトの画像幅取得
		var img_h = $(this).height();		//デフォルトの画像高取得
		$(this).attr({"data-h":img_h});		//デフォルトの画像高を属性として保存
		$(this).animate({opacity:0.5,"box-shadow":"0 0 2px #111",width:img_w,height:(img_h/4)},100); //画像の高さを縮小
	});
}
$(document).ready(function(){
	$(window).load(function(){
		setTimeout(function(){
		jumpin_set();
                }, 100);
	});
	$(".jumpin").hover(function(){//マウスオーバー時の動作
		var img_w = $(this).width();
		var img_h = $(this).height();
		var next_h = $(this).attr("data-h");
		if(next_h){
		$(this).animate({opacity:1,"box-shadow":"none",width:img_w,height:next_h},1000,"easeOutElastic");
		$("img",this).animate({height:img_h},100).animate({height:next_h},100);
		$(this).removeAttr("data-h");
		}
	});
	$(".jumpin").mouseout(function(){//マウスアウト時の動作
		var img_w = $(this).width();
		var img_h = $(this).height();
		$(this).attr({"data-h":img_h});
		$(this).animate({opacity:0.5,"box-shadow":"0 0 2px #111",width:img_w,height:(img_h/4)},1000,"easeOutElastic");
	});
});

サンプルスクリプト
上記でスクリプトやCSSがバッティングしていなければ動作すると思います。
続きを読む “WebサイトでjQueryを使ってTwittelatorの画像表示のようなエフェクトを追加する方法”

Chrome web storeでアプリケーション、OSのあり方は変わる。


使用感はAdobe AIRのような感じですが、Google Chromeがインストールされている端末であれば使えます。
TweetdeckやGmail、GoogleCalendarを試しにインストールして使っています。
エクステンションはブラウジングに付随、アプリケーションは単独のソフトウェアとしての機能を網羅しているような感じ。
今までパソコンにダウンロードしてインストールしてと少し面倒な作業が必要だったものがChromeではインストール+ログインなどで完了、しかも占有している端末全てに。
ChromeOSが待ち遠しいですが、その前から一足早くユーザー体験ができるので気になる方はChromeをはじめて見てはどうでしょうか?

絵画とWeb

昨日は恩師の個展へ行き、お茶してきました。
担任の先生はどうしてるとか、自分は今何をしているなどといった話などなど
イベントや個展の告知をする方法としてホームページは効果的。でもなかなか自分では・・・というのがいろいろ話をしていると見えてきた。
このブログのようなものをつかえば、記事の追加などはワープロ感覚でできてしまうので、ホームページもしくはブログと興味のある人が多くいる、例えばソーシャルネットワークのコミュニティへの参加をすれば、今までと違った客層の人たちにも作品を知ってもらえる機会が見込める。
大きな実際の作品とWebで見る小さな作品では迫力も見え方も違うけれど、きっかけとしてWebをつかうのはとても大事な事。

Web^xよりGraphic+Web

この1年でWebや紙など媒体にとらわれない仕事が増えてきた。
Webデザイン、CG、映像、Flash、DTP、その他印刷(モノ系)など、好き放題?している。
グラフィックに回帰したかと思えばFlashも仕事上しなくてはならず・・・

こんなものをプログラムのみで作ったり。
と思えば、自社採用、コーポレートのVIなども・・・
そろそろポートフォリオにまとめ始めないと・・・