タグ: 表示

Web サイトのフォント表示を綺麗にできる「TypeSquare」を導入しました。

blog.cdbk.net

hetemlで本日(2012/4/25)より、モリサワフォントをWebサイトで使えるようにする「TypeSquare」のサービスが12月31日まで無料で使えるということでcdbk.net CREATIVES.で早速導入してみました。

下が使用前のサイト(Mac/Chrome)の表示。

Web before

 そして、下がTypeSquare適用後。

使用しているUDフォントによって可読性があがりました。

Web after

Web fontもだいぶ普及してきたのでこういった技術を使い、よりよいサイトを作っていきたいです。

 

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

blog.cdbk.net

Dropbox

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

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

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

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

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

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

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

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

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

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

blog.cdbk.net


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の画像表示のようなエフェクトを追加する方法”

jQueryを使ってRSSをテキストで表示

blog.cdbk.net


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); の数値で設定。

ページにTipsなどをバルーンで表示できるbubbletip

blog.cdbk.net


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/

iPhone / iPod touchの画面をMac上で表示するアプリ

blog.cdbk.net


今回紹介するアプリがJailBreak必須なので導入、利用は自己責任にて。
iPhoneやiPod touchの画面をMacのデスクトップ上で表示できれば、Ustreamなどで画面を見せたい場合、CamTwistを使うことでフレームのコマ落ちはしてしまうものの、別途Webcamを用意して、固定してといった煩わしい準備をせずに、綺麗な画質で見せることができる。
使うアプリは「ScreenSpliter」とMac上に表示するための「DemoGod」。
Macと端末間の接続は無線LANが必須となります。