週刊Webテク通信

2010年7月第1週号 1位は,Webデザインスタイルシリーズ完全版,気になるネタは,FirefoxのブックマークなどをiPhoneから参照できる「Firefox Home」

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

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

1. The Complete Web Design Style Series (700 Designs in 14 Categories) - Speckyboy Design Magazinehttp://speckyboy.com/2010/06/27/the-complete-web-design-style-series-700-designs-in-14-categories/

Webデザインのショーケースが14カテゴリ,総数700サイト揃ったということで,まとめて紹介しています。

ブログ,ECサイト,ポートフォリオ,デザイン事務所のサイト,雑誌/新聞風レイアウトなど,いろいろなカテゴリごとに優れたデザインのサイトが並んでいます。

それぞれのカテゴリのショーケースは過去に公開された記事で,このページからリンクされています。

Webデザインギャラリー専門のサイトもありますが,ついついあれこれ探して時間を浪費しがちです。カテゴリ別にそこそこの量がまとまっているこの記事なら,時間のないときでもざっと目を通せて便利だと思います。

図1 Webデザインスタイルシリーズの完全版

図1 Webデザインスタイルシリーズの完全版

2. 50 Powerful Time-Savers For Web Designers - Smashing Magazinehttp://www.smashingmagazine.com/2010/06/28/50-powerful-time-savers-for-web-designers/

Webデザイナーの時間短縮につながるパワフルなツールを多数紹介しています。

便利なチェックリスト,バッチインストーラー,ダミー画像のジェネレーター,ExcelファイルからHTMLへのコンバーターなど,時間短縮につながるツールが50個取り上げられています。

図2 Webデザイナーのための時間短縮ツール

図2 Webデザイナーのための時間短縮ツール

3. The Best Web Development Frameworkshttp://www.webdesignish.com/the-best-web-development-frameworks.html

PHP,CSS,JavaScript,Java,Python,Ruby,Perlの各種フレームワークへのリンク集です。スタンダードなものを中心に,多数のフレームワークが簡単な解説とともに掲載されています。

コメント欄でも,⁠こんなのもあるよ」と多くのフレームワークが紹介されていますね。

図3 Web開発のためのフレームワーク集

図3 Web開発のためのフレームワーク集

4. CSS3 Rounded Image With jQueryhttp://www.webdesignerwall.com/tutorials/css3-rounded-image-with-jquery/

CSS3の角丸とボックスシャドウを画像に対して使う場合のテクニックを紹介しています。

img要素に角丸とボックスシャドウを同時に適用した場合,Safari(Webkit)でもFirefoxでも思い通りの表示にならないようです。画像を背景画像として扱い,その問題を解決する方法が紹介されいます。

画像一つ一つを背景画像に変更する設定をするのは面倒なので,jQueryを使って自動的に処理するスクリプトも掲載されています。

img要素に「.rounded-img」というクラスを付けておけば,このスクリプトで,

  1. img要素から画像ファイルのパス,幅,高さを取得して,背景画像を設定したspan要素を生成
  2. img要素に「opacity:0」を指定して透明に

という処理を行ってくれます。

図4 CSS3による画像の角丸処理のテクニック

図4 CSS3による画像の角丸処理のテクニック

5. iPhone等のWebアプリをHTML5で構築する為のフレームワーク・Sencha Touchを触ってみた - かちびと.nethttp://kachibito.net/software/open-source/sencha-touch.html

HTML5モバイルアプリ用フレームワーク「Sencha Touch」を紹介した記事です。

Sencha Touchは,AndroidおよびアップルのiOS端末に対応したWebアプリケーションを作るためのフレームワークです。タッチ操作,アニメーション,データ管理,Google Mapsとの連携などが実現できます。

Ajaxアプリケーションを構築するためのJavaScriptフレームワークとして有名な,Ext JSの開発元が開発しています。Extという社名の米国の会社だったのですが,Senchaと社名を変更したそうです。なぜSencha(煎茶のこと?)という名前なのかも気になります。

図5 モバイルアプリ用フレームワーク Sencha Touch

図5 モバイルアプリ用フレームワーク Sencha Touch

そのほか先週の記事から,気になるニュース記事を2つ紹介します。

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

iPadZine - 無料の電子書籍投稿サービスhttp://www.ipad-zine.com/

「iPadZine」は,iPadで読める電子書籍の投稿とダウンロードが簡単にできるサービスです。

PDFやEPUB形式のファイル,テキスト/画像ファイルをアップロードするだけで,電子書籍を「出版」することができます。

電子書籍を読むのは,iPadアプリの「i文庫HD」「GoodReader」をターゲットにしています。

作成した電子書籍は,誰でもダウンロードできる「ダウンロード書籍」⁠ツイッターでフォローすると読める「Follow me書籍」⁠パスワードをかけた「パスワード書籍」の3つの形態で配布できます。有料販売もサポートする予定のようです。

iPadの登場で電子書籍関連の動きが激しく,こういったサービスがどんどんスタートしていますね。

「パブー」という電子書籍作成・販売のサービスも登場しています。ブックレビューサイト「ブクログ」の姉妹サイトで,こちらは有料販売も可能です。

図6 iPad向け電子書籍の投稿&ダウンロードサービス iPadZine

図6 iPad向け電子書籍の投稿&ダウンロードサービス iPadZine

今週の気になるWebネタ

FirefoxのブックマークなどをiPhoneから参照できる「Firefox Home」,App Storeに申請 - ITmedia +D モバイルhttp://plusd.itmedia.co.jp/mobile/articles/1007/01/news112.html

FirefoxのアドオンFirefox SyncとiPhoneアプリFirefox Homeの組み合わせで,PC/MacのFirefox のブックマークとタブ,履歴をiPhoneでも見られるようになるとのことです。

なるほど,独自エンジンのWebブラウザはiPhoneアプリとして作れないので,環境の同期に絞ったということですね。Firefoxをメインブラウザとして使っている人にはこれでも十分便利だと思います。同じことがSafariで可能になって,PC/MacとiPhoneの双方向で同期できるようになったら,そっちのほうが便利ですけどね。

開発中というAndroid版のFirefoxなら双方向の同期ができるようですし,アドオンも使えるそうです。これは気になりますね。Android版Firefoxの登場がきっかけで,Androidを使い始める人も増えるかもしれません。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入