gihyo.jpサイトのロゴ

週刊Webテク通信

2014年12月第4週号1位は、HTML5で作るハイブリッドなアプリ開発のヒント、気になるネタは、iPadをMacのセカンドモニタ化するアプリDuet Display、有線接続で低遅延

2014-12-25

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

1. The Do's and Don'ts of Building HTML5 Hybrid Appshttp://speckyboy.com/2014/12/18/dos-donts-building-html5-hybrid-apps/

HTML5＆CSS＆JavaScriptで作る、ハイブリッドなアプリ開発についてのヒントをまとめています。

気をつけること
  1. 重たいライブラリ、フレームワーク、プラグインを使わない
  2. 多目的なアプリや複雑なアプリには向いていない
  3. 全ての要素を一度に読み込まない
  4. アニメーションや画像の多いアプリには向いていない
  5. 最初からiOSとAndroid両方で完璧に動くことを期待しない
    6. やるべきこと
  • AngularJSのようなJavaScripe MVCフレームワークを使う
  • IonicのようなUIライブラリの仕様を検討する
  • パフォーマンスを改善するためHTML／CSS／JSのファイルサイズを減らす
  • 全ての画像を軽量化する
  • パフォーマンスのテストをする
  • Chrome Canaryのエミュレーター機能を使う
  • ローカルストレージを活用する
  • ハイブリッドアプリ開発用のフレームワークの学習を検討する

    • Webサイト制作の延長線上でできそうなHTML5によるアプリ開発ですが、気をつけることも多いようです。

    図1　HTML5で作るハイブリッドなアプリ開発のヒント
    図1　HTML5で作るハイブリッドなアプリ開発のヒント

    2. CSS Animation for Beginnershttp://robots.thoughtbot.com/css-animation-for-beginners

    CSS3のanimationプロパティと@keyframesを使ってアニメーションを作る方法を、ビギナー向けに解説した記事です。

    シンプルながらも、使いどころのありそうな作例が多く、使ってみたくなりますね。

    図2　CSSによるアニメーションの作り方
    図2　CSSによるアニメーションの作り方

    3. Creating Responsive Images with CSShttp://sixrevisions.com/css/responsive-images/

    レスポンシブに画像を処理するためのCSSテクニックを紹介した記事です。

    レスポンシブなCSSフレームワークを使うと、グリッドからはみ出さないように画像サイズが可変しますが、それをCSSで記述する方法を解説しています。

    図3　レスポンシブに画像を処理するためのCSSテクニック
    図3　レスポンシブに画像を処理するためのCSSテクニック

    4. Best Illustrated Websites 2014 | Web Design | Graphic Design Junctionhttp://graphicdesignjunction.com/2014/09/illustrated-websites-2014/

    イラストを使用したWebデザインのギャラリーです。

    マンガ風のもの、アイコン的なもの、3Dグラフィックなど、イラストといっても様々な種類のものが使われていました。

    図4　イラストを使用したWebデザインのギャラリー
    図4　イラストを使用したWebデザインのギャラリー

    5. Muzli and Panda: Free Daily Visual Design Inspiration on the Go - noupehttp://www.noupe.com/essentials/muzli-and-panda-free-daily-visual-design-inspiration-on-the-go-86447.html

    デザインのヒントになりそうな作品やニュースを閲覧できる、MuzliとPandaの2つのサービスを紹介しています。Chrome機能拡張やWebアプリとして提供されています。

    Pandaは最近バージョンアップしたようで、「⁠スタートページにピッタリなPandaがバージョンアップしてさらに便利に - Webクリエイターズニュース」という記事も出ていました。

    図5　デザイン作品やニュースを閲覧できるサービス2つ
    図5　デザイン作品やニュースを閲覧できるサービス2つ

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

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

    Material Design Color Palette Generator - Material Palettehttp://www.materialpalette.com/

    マテリアルデザインのカラーパレットを作成するWebサービスです。あらかじめ用意されている色から2色選ぶだけで、8色のカラーパレットが生成されます。そのパレットを使ったマテリアルデザインでのデザイン例がプレビューされるのもいい感じです。

    作ったパレットはダウンロードできるのですが、その際、CSS、SASS、LESS、SVG、XML、PNGと豊富なフォーマットから選べるのがうれしいところです。

    ベースの2色は19色からしか選べませんが、マテリアルデザインに合わせた色ということもあるでしょうし、制限がある分シンプルでうまくまとまっていると感じました。

    図6　マテリアルデザインのカラーパレットジェネレーター
    図6　マテリアルデザインのカラーパレットジェネレーター

    おすすめ記事

    記事・ニュース一覧