around design http://aroun-d.com 大阪在住フリーランスのWebディレクター／デザイナー／エンジニアのブログ。写真、読書、技術メモなど。 Tue, 15 May 2012 08:07:36 +0000 ja hourly 1 [jQuery] 画像をフェードしながら順番に表示 http://aroun-d.com/2012/05/14/3868/ http://aroun-d.com/2012/05/14/3868/#comments Mon, 14 May 2012 14:56:48 +0000 nishi http://aroun-d.com/?p=3868 画像の一覧をページが表示されたときに、順番にフェードしながら表示するjQuery。
あんまりやりすぎるとくどくなったりもするのですが、
イメージを打ち出したいポートレート系のサイトなどではいい感じになると思います。


delay()メソッドを使用しているので、jQueryは1.4以上が必要になります。
jQueryだけのお手軽コードで動くのもかなりうれしいですね。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#imagelist li').hide();
$('#imagelist li').each(function (i) {
$(this).delay(i * 100).fadeIn(1000);
});
});
</script>

参考サイト
http://depthcode.com/2010/11/fadebox.html

]]> http://aroun-d.com/2012/05/14/3868/feed/ 0 [Mac] Xcodeのインストールでアプリ開発環境がようやく完成！ http://aroun-d.com/2012/05/08/3865/ http://aroun-d.com/2012/05/08/3865/#comments Tue, 08 May 2012 13:45:48 +0000 nishi http://aroun-d.com/?p=3865 iOS SDK

先日OSをLionにアップデートできたので、今度はXcodeのインストールです。
他のサイトなどをいろいろ見ていると、Xcodeは有料という記事も多くありますが、
Lionになってからは無料になっているようで、App Storeからダウンロードしてインストールしました。
相変わらずダウンロードにはまあまあ時間がかかりましたが。


そして、本などの情報ではiOS SDKはDeveloperフォルダにインストールされるとありましたが、
これも仕様が変わって、普通にアプリケーションのフォルダにインストールされます。
アプリケーションフォルダのXcodeをクリックして起動！

ところが、本とかを見る限りでは、Welcomeのラウンチ画面が表示されるようなのですが、
どうもそれらしい画面が出てこない。。
何かインストールがうまくいっていないのだろうか？？など調べてみてもピンとくるものがなく、
とりあえずでメニューのFile＞New＞Project とやってみると、
問題なくプロジェクトを作る画面が表示され、無事にアプリ開発の画面になりました。

インストールだけで長い道のりだったのでちょい感動です。
といっても本当はAndroidも一緒に開発できるTitaniumを使おうかと思っていたのです。
これをまたインストール・設定するのかと思うとちょい腰が重たかったり、、
とりあえずはObjective-Cでちょこちょこ勉強しようと思います。

]]> http://aroun-d.com/2012/05/08/3865/feed/ 0 [Google] サイトの表示速度を改善すればSEO効果もアップ。Chrome拡張機能「Page Speed」 http://aroun-d.com/2012/05/06/3861/ http://aroun-d.com/2012/05/06/3861/#comments Sun, 06 May 2012 13:21:59 +0000 nishi http://aroun-d.com/?p=3861 Google
WordPressを使っているとどうしても気になるのがサイトの表示速度。
サイトを見る人のストレスもそうですが、Googleの検索順位に表示速度も影響があるとされています。

まずなんといっても表示スピードの測定ですが、これはGoogleのウェブマスターツールや、
そのほかにも表示速度測定ができるサイトがいくつかあります。


Googleウェブマスターツール
サイト表示スピード測定 | サーバレスポンス時間測定

そしてどういったところを改善すればよいのか教えてくれるChrome拡張機能が
Page Speedです。（Firefoxのアドオンもあるようです）

改善点はすべてがすべて実行できるものではないですが、
点数が低い場合には、ちょっとでも改善していく必要があるのではないかと思います。

参考サイト
http://blog.livedoor.jp/mintoa/archives/5419972.html


また英語のサイトになりますが、下記にて紹介されているサイトも使いやすそうです。
http://kachibito.net/web-service/pingdom-tools.html

]]> http://aroun-d.com/2012/05/06/3861/feed/ 0 [Mac] Lionをインストール http://aroun-d.com/2012/05/03/3856/ http://aroun-d.com/2012/05/03/3856/#comments Thu, 03 May 2012 14:15:42 +0000 nishi http://aroun-d.com/?p=3856 Lionインストール

ついにLionをMacにインストールすることにしました。
これまで特にLionにしたいという決め手がなかったのですが、
（iCloudもそれほど必要でなかったので）
XcodeのSnowLeopard版がいくらやってもエラーでインストールできなかったので、
あきらめてLionを入れることにした次第。
まあ価格的が2,600円ということで大した金額でもないのでそこは安心です。


しかしLionにしてもXcodeにしても、ダウンロードやらインストールやらに
すごい時間かかるんですよねー。
夜から作業を始めると朝まで放っておくかって感じになるのがちょい面倒です。

そして！噂には聞いていましたが、マウスのスクロール方向が逆になったのは
違和感たっぷりです。
こういった基本操作の部分を変更するというのは大きな決断ですし、
ブーイングもかなりありそうですが、そのあたりはAppleならではという感じでしょうか。

とりあえず、これでようやくiOS SDKを使うことができます。
本買ってからめっちゃ時間たってしまってますが。。

]]> http://aroun-d.com/2012/05/03/3856/feed/ 0 [読書] ドミノ http://aroun-d.com/2012/04/27/3848/ http://aroun-d.com/2012/04/27/3848/#comments Fri, 27 Apr 2012 14:20:03 +0000 nishi http://aroun-d.com/?p=3848 ドミノ

恩田 陸さんは実に多彩な小説を書かれますね。
この「ドミノ」はタイトルの通りに最初のドミノがひとつ倒れたら次々に倒れていくような
怒涛な展開が楽しめるドタバタストーリー。
気負うことなく気楽に小説を楽しみたいときにオススメです。


舞台は東京駅なのですが、まあ実際に東京駅を知らなくても十分楽しめます。
また最初にある登場人物の一言も、興味をかなりそそりますが、
登場人物の数がちょっと多いので、こちらも最初はさらっと読み流し、
すべて読み終わった後や、ある程度読んだときに、戻りつつ読んでも楽しいです。

特に登場人物のだれかに共感した！とか、あの場面が印象的といったこともないですが、
本当に単純にストーリーを楽しめる1冊ではないかと思います。

「ドミノ」
恩田 陸
角川文庫
★★★★☆（4点）

]]> http://aroun-d.com/2012/04/27/3848/feed/ 0 [jQuery] ブラウザサイズを変えたときにdivの幅などを変更 http://aroun-d.com/2012/04/25/3839/ http://aroun-d.com/2012/04/25/3839/#comments Wed, 25 Apr 2012 13:07:43 +0000 nishi http://aroun-d.com/?p=3839 ブラウザいっぱいに画像を使うといったサイトはよくあると思うのですが、
縦幅をブラウザにあわせようと思うと、画像以外の部分の幅は
ブラウザサイズを変えるたびに可変になります。

単純にパーセントで幅が指定できれば問題ないのかもしれませんが、
jQueryを使って結構簡単に実現できるのでメモです。


<script type=”text/javascript”>
<!–
function resizeEvent() {
//ブラウザサイズを変更したときに行う処理
$(“#content”).css(“width”, ($(window).width()-$(window).height()*1600/2200)+”px”);
};

var resizeTimer = null;
$(window).bind(‘resize’, function() {
if (resizeTimer) clearTimeout(resizeTimer);
resizeTimer = setTimeout(resizeEvent, 10);
});
–>
</script>

ちなみに1600、2200という数字は使用する画像の幅、高さです。
#contentというのが画像以外の部分で、
ブラウザの全体幅（$(window).width()）から
高さが100％の画像の幅（$(window).height()*1600/2200）をマイナスします。

そしてタイマー処理を使用して、ブラウザサイズを変更したときに
resizeEvent()内の処理を実行します。
なお、bodyのonLoadでもresizeEvent()を実行しておきましょう。

]]> http://aroun-d.com/2012/04/25/3839/feed/ 0 [jQuery] ページが表示されて少し後にふわっとレイヤーを表示 http://aroun-d.com/2012/04/23/3842/ http://aroun-d.com/2012/04/23/3842/#comments Mon, 23 Apr 2012 14:27:39 +0000 nishi http://aroun-d.com/?p=3842 ページが表示されたら一瞬遅れで、ポップアップのようなレイヤーを表示するjQueryです。
ポップアップを出すのはイヤがられることもありますが、
ちょっと興味を引かせたり、どうしても見てほしい案内を出すときには
やっぱり便利ではないかなと思います。


出しっぱなしではなく、クローズボタンをつけたり、
何秒か表示させたら消すといったこともできるので、そういう工夫もいいかもしれませんね。


<script type=”text/javascript”>
$(window).load(function() {
setTimeout(function () {
$(“#popup”).animate({opacity:’show’, bottom:”55″}, {duration:500, easing:’swing’})
}, 1000);
});
</script>

この例ではページの下のほうに表示するようにしています。
CSSで#popupにdisplay:none;bottom:50px;を指定しています。

]]> http://aroun-d.com/2012/04/23/3842/feed/ 0 [MySQL] エラーメッセージを表示 http://aroun-d.com/2012/04/20/3845/ http://aroun-d.com/2012/04/20/3845/#comments Fri, 20 Apr 2012 14:01:28 +0000 nishi http://aroun-d.com/?p=3845 相変わらず基礎の基礎をメモっていきますが、、
クエリーの実行がエラーだった場合にエラーメッセージを表示する方法です。

mysql_query($query)
or die(mysql_errno($link) . “: ” . mysql_error($link) . “\n”);

mysql_errnoがエラーナンバーを出力、mysql_errorがエラーメッセージを出力します。
$linkはデータベースの接続（mysql_connect）の戻り値の接続IDになります。

]]> http://aroun-d.com/2012/04/20/3845/feed/ 0 [WordPress] RSSにカスタム投稿タイプのカスタムフィールドを反映 http://aroun-d.com/2012/04/17/3829/ http://aroun-d.com/2012/04/17/3829/#comments Tue, 17 Apr 2012 14:44:44 +0000 nishi http://aroun-d.com/?p=3829
先の記事「カスタム投稿タイプでの投稿をRSSに反映」のやり方で、カスタム投稿タイプの記事をRSSに反映させると、
カスタムフィールドを使用していたため、タイトルしかうまく表示されていませんでした。

その中でカスタムフィールドの値を表示させるにはfunction.phpに下記のコードを書きます。
ついでに画像も表示させています。


function my_feeds($content) {
global $post;
//指定したカスタム投稿タイプのときのみ、カスタムフィールドの値を取得
if (get_post_type() === 'カスタム投稿タイプ名') {
//画像の取得
$imagefield = get_imagefield('画像のカスタムフィールド名');
$medium_url = wp_get_attachment_image_src($imagefield['id'],'medium');
//先頭に画像、通常の記事（content）の後に、カスタムフィールドの値を追加
$content = "<p><img src=\"" . $medium_url[0] . "\" /></p>" . $content . get_post_meta($post->ID, 'テキストのカスタムフィールド名', true);
}
return $content;
}
add_filter('the_excerpt_rss', 'my_feeds');
add_filter('the_content_feed', 'my_feeds');


ちなみにRSSを確認していて、ChromeやFirefoxでRSSをリロードしても変更内容が反映されず、
上記のコードがうまくいっていないのかと悩みました。
どうやらキャッシュなんですかね。設定はあるのかもしれませんが。
ちなみにIE9でRSSを見ると毎回リロードで変更できたので、
何度も変更して確認するのには便利でした。

]]> http://aroun-d.com/2012/04/17/3829/feed/ 0 [WordPress] カスタム投稿タイプでの投稿をRSSに反映 http://aroun-d.com/2012/04/17/3819/ http://aroun-d.com/2012/04/17/3819/#comments Tue, 17 Apr 2012 13:58:13 +0000 nishi http://aroun-d.com/?p=3819
カスタム投稿タイプを使用して記事を投稿すると、通常ではRSSに反映してくれません。
そこで、function.phpに下記のコードを追加することで、反映してくれるようになります。


// Custom Post Types for RSS
function my_get_posts( $query ) {
if ( is_feed() ) {
$query->set( 'post_type', array('post', 'カスタム投稿タイプA', 'カスタム投稿タイプB', 'カスタム投稿タイプC'));
return $query;
}
}
add_filter( 'pre_get_posts', 'my_get_posts' );

$query->set( ‘post_type’, array(‘post’, ‘カスタム投稿タイプA’, ‘カスタム投稿タイプB’, ‘カスタム投稿タイプC’));
array配列の最初の「post」が通常の投稿です。
カスタム投稿タイプA、B、Cにはカスタム投稿タイプ名を入れます。

もしカスタム投稿タイプAのみ使用していて、通常の投稿を使用していない場合は上記を
$query->set( ‘post_type’, ‘カスタム投稿タイプA’);
と変更します。


参考サイト
http://www.greenwich.co.jp/blog-archives/p/961

]]> http://aroun-d.com/2012/04/17/3819/feed/ 0