週刊Webテク通信

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

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

ネットで見かけた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向けアイコンも作れるジェネレーター

今週の気になるWebネタ

画像

「Dropbox Pro」が1Tバイトに増量 新機能も追加 - ITmedia ニュース http://www.itmedia.co.jp/news/articles/1408/28/news052.html

Dropboxの個人向け有料プラン「Dropboxプロ」の容量が,従来の100Gバイトから1T(1,000G)バイトに増量しました。わたしもプロユーザーなのですが,このニュースを知る前に,容量が1TBに増えたというメッセージが突然出たため驚きました。

Dropboxはあくまでも自分のハードディスクと同期させて使うものなので,1TBもあればほとんどのユーザーは当面事足りるのではないでしょうか。1TBもあれば外付けハードディスク感覚で使いたいという人も多そうですが,パソコンと同期しないという使い方もアリなのかもしれません。

共有ファイルにパスワードを設定できるようになったのは嬉しい機能強化です。これもプロユーザーしか使えないので,プロにする理由が増えましたね。とはいえ,Google ドライブ,Amazon Zocaloなどライバルは多いですし,AppleのiCloudもiCloud DriveとなってMacからマウントできるようになるため,争いはますます熾烈になりそうです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入