週刊Webテク通信

2011年11月第1週号 1位は,jQueryでつくる,動きのあるWebページ,気になるネタは,アドビ,iOSとMacで利用できる写真用クラウドサービス「Carousel」提供開始

この記事を読むのに必要な時間:およそ 2 分

ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から,Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は,2011年10月31日~11月6日の間に見つけた記事のベスト5です。

1. jQueryでつくる,動きのあるWebページ | yoppa orghttp://yoppa.org/taumedia11/3302.html

jQueryを使った動きのあるWebページの作り方をレクチャーしたスライドです。

これからjQueryを始める初心者向けの内容ですが,jQueryプラグインはよく使うけどイチから自分で書くことはないという人にも,基本を学ぶ上で参考になりそうです。

将来的には,アニメーションの効果自体はCSS3で設定することが主流になっていくと思います。だからこそ,jQueryを利用してちょっとしたJavaScriptが書ければ,CSS3アニメーションとの組み合わせで面白い効果を実装しやすくなるはずです。

図1 jQueryを使った動きのあるWebページの作り方のスライド

図1 jQueryを使った動きのあるWebページの作り方のスライド

2. 知識0からのjQuery Mobileを使ったサイト制作に役立ったサイト | Design Spicehttp://design-spice.com/2011/11/02/jquery-mobile/

リファレンスや入門記事など,jQuery Mobileを使う上での情報源となるサイトを多数紹介した記事です。

jQuery Mobileを使ったサイト制作は簡単ではあるものの,凝った使い方をしようと思うとやはり技術的な部分を学ぶ必要があるとのことでした。

図2 jQuery Mobileに関する情報を得られるサイト

図2 jQuery Mobileに関する情報を得られるサイト

3. CSS3アニメーションの基本的な実装例のまとめ | コリスhttp://coliss.com/articles/build-websites/operation/css/css3-animation-demo-site-animatable.html

CSS3アニメーションの様々なサンプルをまとめたページを紹介した記事です。いくつかのアニメーションについて,解説もしています。

アニメーションのアイデア集として面白いですね。実際のデモページでは,ロールオーバーでアニメーションを確認できるほか,クリックすると具体的な設定された数値が表示されます。

図3 CSS3アニメーションの様々なサンプルの紹介

図3 CSS3アニメーションの様々なサンプルの紹介

4. 作業効率が10倍アップする Chrome Developer Tools の使い方 - テックノート@ama-chhttp://d.hatena.ne.jp/ama-ch/20111103/1320318302

Chrome Developer Toolsの使い方のスライドを紹介しています。たまたま最近スライドの紹介が多くなっていますが,こういったスライドをシェアしてもらえるのはありがたいですね。

デベロッパーツールはChromeに標準で搭載されている開発者向けツールで,Firebugと同じようなことができます。同じWebKit系のSafariにも基本的には同じ開発者向けツールが用意されています。

JavaScriptのデバッグなどプログラマー向けの内容がメインですが,どのようなことができるかだけでも参考になると思います。

図4 Chromeのデベロッパーツールの使い方のスライド

図4 Chromeのデベロッパーツールの使い方のスライド

5. フリーランスのための全国Webサイト制作料金表まとめ25個 - W3Qhttp://w3q.jp/t/137

Web制作プロダクション各社の料金表をまとめています。かなりバラバラですし,ページ単価いくらという考え方は現実的じゃないと実感している人も多いと思いますが,参考になりそうです。

前回も取り上げた,⁠Web制作者のためのQ&Aとまとめサービス」W3Qの記事です。

図5 Webサイト制作料金表のまとめ

図5 Webサイト制作料金表のまとめ

そのほか,先週の記事の中から,jQuery関連の記事を3つ紹介します。

先週の気になるWebサービス

timekiwi ― create beautiful timelineshttp://timekiwi.com/

「timekiwi」は,TwitterやFacebookなどの投稿内容を年表のように時系列に並べて表示するサービスです。

対応しているサービスは,Twitter,Instagram,Flickr,Facebook,Tumblrで,RSSも読み込ませることができます。

各サービスを設定すると,自分の投稿が年表のようにきれいに並んで表示されます。縦軸が時間で縦スクロールで過去にさかのぼっていくのですが,回転させて時間を横軸にすることも可能です。

Facebookのタイムラインを意識したのかもしれませんが,こういった「タイムライン表示」は今後のトレンドになっていきそうです。

図6 ソーシャルメディアの投稿をタイムライン表示するサービス

図6 ソーシャルメディアの投稿をタイムライン表示するサービス

今週の気になるWebネタ

アドビ,iOSとMacで利用できる写真用クラウドサービス「Carousel」提供開始 | クリエイティブ | マイコミジャーナルhttp://journal.mycom.co.jp/news/2011/10/31/029/index.html

Adobeが写真の参照,編集,共有のためのサービス「Carousel」の提供を開始しました。基本的には有料のサービスなのですが,30日間無償で試用することができます。

オンラインアルバムのサービスとしてはFlickr,Picasaが競合するサービスでしょう。また,iPhoneの写真を手軽に共有するにはiCloud,AndroidならPicasaと純正とも言えるサービスがある中,どう差別化していくのか期待したいですね。

写真を共有した場合,受け取る側もCarouselのアプリケーションをインストールする必要があります。運動会の写真をクラスメイト何人かと共有するような,一時的な配布目的にはあまり向かないようですね。

子供の写真を家族でシェアするような,継続的な共有の方が威力を発揮しそうです。家族のiPhoneやiPadにアプリをインストールしてアカウントの設定をしておけば,新しく登録した写真がどんどん自動で追加されていくので便利なはずです。

Windows,Android用のアプリケーションは,2012年上半期中にリリースされる予定とのことです。

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/

コメント

コメントの記入