週刊Webテク通信

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

Webテク, Webデザイン, Web広告, HTML5, CSS, JavaScript, iOS, Mac

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

ネットで見かけた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　マテリアルデザインのカラーパレットジェネレーター

    今週の気になるWebネタ

    iPadをMacのセカンドモニタ化するアプリDuet Display，有線接続で低遅延 - Engadget Japanesehttp://japanese.engadget.com/2014/12/21/ipad-mac-duet-display/

    MacとケーブルでつないだiOS端末を，外部モニタとして使えるソリューションが登場し話題となっています。WiFi経由で外部モニタ化するものはこれまでもありましたが，ケーブルで繋ぐというのは初めてのようです。

    わたしもiPhone 5sとiPad 2で試してみました。LightningケーブルではないiPadでも一応使えましたが，接続までが妙に遅いのと，iPad側の画面タッチでの操作ができないようでした。iPhone 5sは画面は小さいですが問題なく使え，iPhone画面側でのタッチ操作もできました。

    わたしのは古いマシンばかりですが，新しいiPadでの使い勝手については，ブログなどにいろいろレポートが出ているので探してみてください。Appストアのレビューを見ても，環境を選ぶようでまだまだ発展途上な感じですが，今後に期待したいと思います。なお，Windowsにも対応予定というニュースも出ていました。

    Webテク, Webデザイン, Web広告, HTML5, CSS, JavaScript, iOS, Mac

    著者プロフィール

    アシカガコウジ

    フリーのWebデザイナー＆ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール（ソフトウェア）の案内，デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

    http://bit.ly/ashikaganote