週刊Webテク通信

2014年9月第1週号1位は、モバイルブラウザのためのHTML5テクニック、気になるネタは、「Dropbox Pro」1Tバイトに増量 新機能も追加

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

1. 12 HTML5 tricks for mobile | Web design | Creative Bloq http://www.creativebloq.com/html5/12-html5-tricks-mobile-81412803

モバイルブラウザのためのHTML5テクニックをまとめた記事です。

以下のようなテクニックが紹介されています。

  1. フルスクリーンにする
  2. ホームスクリーンにアプリとして登録されるときのアイコンなどの設定
  3. CanvasイメージをRetina対応の高解像度にする
  4. テキストフィールドで数字だけが入力できるようにする
  5. Windows 8向けのレスポンシブ対応
  6. 日時を簡単に入力できるようにする
  7. ページ上でリッチエディターを使えるようにする
  8. SafariのUI部分に色をつける
  9. ホームスクリーンにアプリとして登録されるときの名前について
  10. Windows Phoneのライブタイルのための設定
  11. アクティブになっていないタブでも裏で実行させ続ける(スクリプトでタブの名前を変えたり、ダイアログを出したりできる)
  12. これらのテクニックは注意して使う
図1 モバイルブラウザのためのHTML5テクニック
図1 モバイルブラウザのためのHTML5テクニック

2. 9 Tools to Use Instead of Adobe Fireworks l BytesWire http://www.byteswire.com/9-tools-use-instead-of-adobe-fireworks/

Fireworksの代わりとなりそうなツールを9つ紹介した記事です。

おなじみSketchのほか、最近登場したGravit、Affinity Designerといったベクターデザインツールなどが掲載されています。

図2 Fireworksの代わりとなりそうなツール9選
図2 Fireworksの代わりとなりそうなツール9選

3. Kite http://hiloki.github.io/kitecss/

フレキシブルなレイアウトのためのCSSライブラリで、水平方向や垂直方向の揃えをコントロールできます。

任意の幅の中に要素を均等に並べたり、複数の要素を幅一杯になるよう配置できるところが便利そうです。

図3 フレキシブルなレイアウトのためのCSSライブラリ
図3 フレキシブルなレイアウトのためのCSSライブラリ

4. Creating Responsive and Interactive Animations with Raphael.js http://speckyboy.com/2014/08/27/creating-responsive-interactive-animations-raphael-js-2/

Raphael.jsというJavaScriptライブラリを使って、インタラクティブなSVGアニメーションを作るチュートリアル記事です。

SVGで作ったベクター形式の風車が、ボタンを押すと回ります。

図4 インタラクティブなSVGアニメーションの作り方
図4 インタラクティブなSVGアニメーションの作り方

5. Email Design Workflow http://www.leemunroe.com/email-design-workflow/

HTMLメールを作成するワークフローを紹介しています。

デザイン/コーディング/表示テストといった流れとバックエンドの技術について、簡潔に解説してあります。具体的なツール名も多数出てきて参考になります。

図5 HTMLメールを作成するワークフロー
図5 HTMLメールを作成するワークフロー

そのほか、最近の記事の中から、気になるニュース記事を3つ紹介します。

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

Favicon Generator - Generate favicon pictures and HTML http://realfavicongenerator.net/

Favicon Generatorは、FaviconだけでなくiOSやAndroid向けのアイコンも作れるWebサービスです。

アップロードした画像を元に、デスクトップブラウザ用のFavicon、iOS/Androidのホームスクリーン用アイコン、Windows 8のタイル、Windowsのタスクバー用アイコンが作れます。

モバイルデバイスでのホームスクリーン用アイコンとWindows 8のタイルを作る際には、このジェネレーター上で背景色などを設定できるため、素材は透過PNGで作っておけばいいですね。

Faviconやアイコンを設定するためのHTMLタグも生成してくれますし、そのときのアイコンへのパスを設定できるなど、細かいところまで配慮されたサービスです。

図6 FaviconやiOSやAndroid向けアイコンも作れるジェネレーター
図6 FaviconやiOSやAndroid向けアイコンも作れるジェネレーター

おすすめ記事

記事・ニュース一覧