気づけばより使いやすくなっていました。
グローバルモデルはキャリアやモデルが複数あるものが多いので間違って買ってしまうようなことも減りそうです。
hetemlで本日(2012/4/25)より、モリサワフォントをWebサイトで使えるようにする「TypeSquare」のサービスが12月31日まで無料で使えるということでcdbk.net CREATIVES.で早速導入してみました。
下が使用前のサイト(Mac/Chrome)の表示。
そして、下がTypeSquare適用後。
使用しているUDフォントによって可読性があがりました。
Web fontもだいぶ普及してきたのでこういった技術を使い、よりよいサイトを作っていきたいです。
昨年末から本格的にDropBoxを使い始め、Web制作で何かと便利な代物だということに気づいてしばらく、Webページで使うjQueryなどの動作確認にDropBoxのPublicフォルダを活用してみることにしました。
DropBox Automatorというツールを使えば、自動的にアップすることもできるのですが、常に更新されるわけではないので、難しいことは一切せず、デフォルト機能のpublicフォルダに制作しているページと使っているデータ一式をコピペ。あとはコピペしたページを右クリック→DropBox→「パブリックリンクのコピー」。
そしてアドレスバーに貼り付ければ確認することができます。
CSSなどで絶対パスを使っていると同じディレクトリ構成にしないといけないので見れない場合もありますが、jQueryなどでデザイン、レイアウトを整形している場合などに活躍してくれます。
余談ですが、DropBoxに日ごろ入れているのは、
デザインは大画面のデスクトップですることがほとんどですが、コードはラップトップでやることが多くなり、記事のまとめなどはほとんどEvernoteでするようになりました。
Dropbox ×Evernote があれば外出先や移動中でもラップトップがあれば作業できるので重宝しています。ちなみにドコモのスマホユーザーならEvernoteのプレミアムプランが1年間無料で使えます。
http://db.tt/Jcjoz049 このアドレスからDropboxを登録してもらうともれなく2GB+250MBの容量で始めることができるのでこれからという人はぜひ!
最近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の画像表示のようなエフェクトを追加する方法”
jQueryを使ってページ内に簡単にRSSの一覧を表示するサンプル。
<head>内にjqueryを読み込んだあとに以下のコードを記載。
今回はページ読み込み時ではなくボタンなどを押すと表示されるようにしたものです。
RSSはTwitterのログ。
以下サンプルコード
$(document).ready(function () {
$(“.xmlrss”).click(xmlrss);
});
function xmlrss(){
$.ajax({
type: “GET”,
url: “RSSのURL”,
dataType: “xml”,
success: xmlP
});
};
function xmlP(xml) {
$(“item”,xml).each(function (i) {
$(“表示したいクラスもしくはID名”).append(‘<a href=”‘+$(this).find(” target=”_blank”>’ + $(this).find(“title”).text() + ‘</a>’);
return(i!=5);
});
}
のような形で表示件数は return(i!=5); の数値で設定。
jQueryをつかったTipsなどのバルーン表示を行う「Bubbletip」。
使い方
リンクのタグなどにIDを設定し、その後に表示したいバルーンの内容を記載。
<a id=”a1_up” href=”#”>above</a>
表示したいバルーンは予め「display:none」を設定。
<div id=”tip1_up” style=”display: none;”>
<pre class=”tip”>{ deltaDirection: ‘up’ }</pre>
</div>
そしてヘッダー部などにJavaScriptを以下のような形で記載。
<script type=”text/javascript”>// <![CDATA[
$(window).bind(‘load’, function() {
$(‘#a1_up’).bubbletip($(‘#tip1_up’));
});
// ]]></script>
バルーンを消すスクリプト
$(‘#a1_up’).removeBubbletip();
特定のバルーンを消す場合
$(‘#a1_up’).removeBubbletip([$(‘#tip1_up’), …]);
といった形で使います。
ブログやTipsサイトのちょっとした説明など様々な用途で使えそうです。
http://code.google.com/p/bubbletip/
今回紹介するアプリがJailBreak必須なので導入、利用は自己責任にて。
iPhoneやiPod touchの画面をMacのデスクトップ上で表示できれば、Ustreamなどで画面を見せたい場合、CamTwistを使うことでフレームのコマ落ちはしてしまうものの、別途Webcamを用意して、固定してといった煩わしい準備をせずに、綺麗な画質で見せることができる。
使うアプリは「ScreenSpliter」とMac上に表示するための「DemoGod」。
Macと端末間の接続は無線LANが必須となります。