Webアプリを作るときに便利なグラフ描画ライブラリ「Chart.js」。最近人気のVue.jsでChart.jsを使うための3つのラッパーをデモを交えて紹介します。 現代のWebサイトとWebアプリにおいてチャートは重要な位置を占めています。チャートは、文字だけでは表せない情報を表現して、理解しづらいデータの意味を分かりやすく表現します。 Chart.jsとVue.jsを用いて、さまざまな型のチャートでデータを表現する方法を解説します。 Chart.jsはシンプルで柔軟性に富んだ開発者、デザイナー向けのJavaScriptのチャート作成ライブラリーです。HTML5のcanvas要素でいろいろな種類のチャートが描けます。Chart.jsを復習するならこちらがオススメです。 Vue.jsはプログレッシブなJavaScriptフレームワークです。ここではChart.jsと一緒にチャートを作成しま

まだ使ったことがないけどいまさら人には聞けない……そんなエンジニアのために、Dockerの基本的な使い方をざっくりと解説。この土日に試してみて。 アプリの構築、依存オブジェクトとサービスのインストール、デプロイの自動化、まだまだありますが、すべてはDockerfileから始まります。Dockerfileの文法を基本から応用まで説明し、Dockerイメージを作成するベストプラクティスを紹介します。 この記事では、配布するアプリケーション向けに最小構成のLinux（ベースイメージ）を選択するようにDockerに指示をするDockerfileを書き、選択したツールと必要な設定を盛り込んで配信する、すなわち、自分のアプリを動かすのに適した専用のLinuxディストリビューションを作成します。 Dockerを選ぶ理由 Dockerなら「ビルドして配信すればどのようなアプリをどこででも」動かせます。つま

Microsoft Wordで「Webページとして保存」したHTMLを使ったことがありますか？ おっと、これはひどい。 考え方は素晴らしかったですが、実際に初めて使ったとき思わずコーヒーを口から吹き出してしまった人もいるかもしれません。常に複雑で長ったらしく、Web向けとしてはとても満足できる品質ではありませんでした。大して珍しいことでもないですが…。 正直なところ、MS Wordのユーザーは、おそらく何がベストなのかを特に意識していないでしょう。むしろ、考えているのは次のようなことではないでしょうか。 ページのロード回数は？ Web画像のフォーマットは？ セマンティックWebやSEOへの対応は？ スクリーンサイズ調整は（柔軟なデザインか）？ 対応フォントは？ 後から考え直して修正する無駄が多い混乱したHTMLは驚くべきこと、というのは明白ですね。 SVGは新たな「Webページとして保存」

いまや Webフロントエンド開発に欠かせなくなったNode.js。併せて使うことが多いnpmの使い方を基礎から学びましょう。 Node.jsは、サーバーでJavaScriptアプリケーションが書けます。V8 JavaScriptランタイムで動作し、C++で書かれているため高速です。当初、アプリケーションにサーバー環境を提供する目的でしたが、ローカル環境のタスク自動化ツールとしても利用されています。Grunt、Gulp、WebpackなどのNode.jsをベースにしたツールによる新たなエコシステムは進化を続け、フロントエンド開発の形を変えるまでに至りました。 Node.jsのツールやパッケージインストールしたり管理したりする方法を、Node.jsのパッケージマネージャーであるnpmが担っています。npmには必要なパッケージをインストールするほか、パッケージを扱うための便利なインターフェイスが

Web Componentsを使った制作アプローチは、レスポンシブWebデザインの常識を変えるかもしれません。 数年前、「Web Components」という言葉がよく聞かれるようになり、当時は私自身もワクワクしていたのですが、一過性のニュースのごとく、いまではまったく忘れられてしまっています。しかし、ここ最近、Web Componentsが再び注目を集めている模様。特に、Web Componentsを使ったレスポンシブWebデザインの構築がかなりシンプルにできるようになるようです。 きっと誰もが疑問に思うことといえば、次の4つでしょう。 Web Componentsは… 最新のWeb環境に対応可能か？ クロスブラウザー環境に対応できるのか？ 落とし込まれたスペース内に適応できるのか？ コードのモジュール化はどこまでできるか？ この記事では、これら4つの質問を検証しながらお答えしたいと思い

デザインしたUIを実装してもらうとき、開発者とはどうやってコミュニケーションしていますか？ SketchとInVision、Craftを使ってワークフローならデザインのやり取りを効率化できます。 デザインのハンドオフとは、デザイナーが作成したWebやアプリのデザインをコード化する開発者に引き継ぐことですが、そう簡単にはいきません。開発者はPhotoshopやSketchなどのデザイン系ソフトを使いこなしているわけではありませんが、デザインについてすべて知っておく必要があるからです。 具体的にどのような色、フォントが使われているのか、要素間のスペースはどのくらいかなど、開発者なら正確に把握しなければなりません。 そこで大活躍するのがInVisionのInspectです。 いまInVisionがデザイナーに熱望される理由 InVisionは共有作業に便利なツールを備えたブラウザーベースのプロト

メディアクエリーのようにビューポートではなく、コンテナの幅に応じてレイアウトを柔軟に調整するテクニックを紹介。calc関数を上手に活用した、マニアックなCSSトリックたちです。 はじめに、タイトルとは裏腹にこの記事は、メディアクエリ不要論を唱えたり、メディアクエリを批判したりするものではないことを伝えておきます。メディアクエリはとても使い勝手が良いので、私はいつもいろいろなことに使っています。とはいえ、メディアクエリでレスポンシブWebデザインにおける課題すべてを解決できるわけではありません。 要素の配置はビューポートではなくコンテナの寸法に基づいて変更するのが望ましい場合がよくあります。この課題を解決するためにエレメントクエリのコンセプトが誕生しました。とはいえエレメントクエリは実際まだ納得のいくものになっていないので、Mat Marquisはこのコンセプトにおける課題を示し、改良してc

デバイス、テクノロジーの進化やユーザー行動の変化は新しいトレンドをもたらします。コンバージョン率（CVR）アップにつながるUXデザインの新しいトレンドをまとめて。 新しい年には新しいものが登場します。Webデザイナーにとってのチャンスと挑戦は、最新のビジュアルトレンドとユーザー体験を取り入れることです。 しかし、Webの専門家なら誰でも知っているように、Webデザインには見た目以上に大事な要素があり、中でもUXはコンバージョンの過程で重要な部分を占めています。だから、私が所属するThe Deep Endもクライアントに好まれるUXの差を生み出す新しいトレンドはなにか、つまり、どの新しいトレンドを取り入れればコンバージョンを押し上げられるかを知りたいのです。 より役に立つ、または今年の売上を増やすツールをクライアントに提供すれば、自分たちが実際に価値を生んでいることになります。そして、高い報

コンバージョン率を上げ、短期的なビジネスゴールを達成するために、UXデザインの「ダークパターン」を採り入れる企業が後を絶ちません。4つの実例をもとにダークパターンの問題点を考えてみましょう。 多くの人もそうだったと思いますが、2016年11月8日、私はスクリーンにくぎづけになっていました。そのとき私が米国大統領選挙戦の結果をめぐって当てにしていたのはThe New York Timesでした。ほかのどのソースよりも信頼していたからです。 The New York TimesのWebページの一番上に、「選挙予想」というダイヤルがありました。 ダイアルが意味していたのは「大統領選に勝つ確率」で、左側に激しく揺れ動いていました。このとき私はすでに不安でいっぱいでしたが、それはどんどん高まっていきました。 New York Timesの記者、Jake Swearingenは次のように語っています。

2016年も進化し続けたフロントエンド開発ツール。Web Tools Weeklyのキュレーター・Louisが1年を振り返り、お気に入りのツールを紹介します。 1年が過ぎ、Webプラットホームでは予想どおり革新、いらだち、疲れとともに、開発者を支援する新しいツールやテクノロジーの大量リリースが爆発的に勢いを増しています。 ReactやAngularといったおなじみのツールがアップデートされた一方、Vue.jsなどの新しいツールも登場し、あっという間に大きな関心を集めました。 私はツールに焦点を当てたウィークリーニュースレターのキュレーションをしているので、調査中に途方もない量のツールに出会います。もちろん人気のツールにはある程度注意を向けますが、あまり注目されていないツールで興味深くかつ実用的なものも評価しています。 そこで昨年と同様、この記事でフロントエンド技術者向けツール分野の2016

Angular、Reactと並んで海外で人気が高まっている「Vue.js」。ReactとAngularの開発経験がある著者がVue.jsをチュートリアルを通じて特徴をまとめました。2017年、新しく学び始めるきっかけにどうぞ。 2016年9月、人気のJavaScriptフレームワークVue.jsがv2をリリースしました。それ以来ぜひ使ってみたい、どのようなものか知りたいと思っていました。AngularとReactを使い慣れた者の1人としては、Vueが似ているところや違うところも知りたかったのです。 Vue.js 2.0はすばらしいパフォーマンスを誇ります。データサイズが比較的小さく（バンドルされるVueのランタイム版は一度最小化してgzip圧縮したら16KBしかありません）、Vueのvuexや、vue-routerのような付属の状態管理ライブラリーもアップデートされました。1つの記事ではと

もはやBootstrapがデファクトになっているCSSフレームワーク界に、ちょっとかわいい期待の新星が登場。 軽くてシンプル、すぐに使えるCutestrapのチュートリアルをいち早くお届けします。 Cutestrapは最新のCSSフレームワークです。この記事ではCutestrapの機能を紹介し、Cutestrapを使って次のような簡単な1ページのHTMLテンプレートを試しに構築してみます。 Cutestrapの特長 たいていの優れたWeb開発ボイラープレートやフレームワークと同様、Cutestrapは開発時間を短縮し、繰り返しタスクを削減します。ドキュメントページのキャッチコピーによると、Tyler ChildsのCutestrapは「小粋（sassy）でしっかり主張するCSSフレームワーク。Bootstrapの小さなかわいい（tiny）交代選手」とのことです。Webサイトとアプリのクイッ

CSSを修正したらデザインがいつの間にか先祖返りしていたり、別の部分に影響して崩れてしまったり…そんなトラブルを防ぐのが、ビジュアルリグレッション（回帰）テスト。変更したらテスト。これからの常識になりそうです。 重要な開発プロジェクトに携わるときに、あなたはテストの重要性に気づくようになるでしょう。経験の度合いによって突然、もしくは時間をかけて徐々にその重要性に気づくかもしれません。テストにはさまざまな方法があり、独立したコードをテストするときのユニットテストから、システムの各パーツがどのように同時に動作するかを確かめるための結合テストや機能テストまであります。 この記事では一般的なテストの概要ではなく、やや特殊で比較的新しい取り組みである「ビジュアルリグレッション（回帰）テスト」について説明します。 ビジュアルリグレッションテストは、Webページをテストする方法の1つです。ある要素やテキ

SVGの概要から基本的な使い方、Web制作での活用方法までをじっくり解説する本連載。前回はSVGができることをおおまかに解説しました。今回は、SVGの仕様をもとに、SVGの書き方、読み方の基礎を学びます。 SVGを描く、そして書く SVGは画像であり、コードを書かずとも、ツールで描けます。例えば、Adobe IllustratorやInkscape、Sketchなどのドローソフトを使えば、画面の操作のみでSVGファイルを作成できます。 ドローソフトを使って用意したSVGファイルは、HTMLでimg要素、あるいはCSSの背景画像などとして読み込むことで、手軽にWebページの一部として表示できます。 <img src="example.svg" alt="" width="600" height="400"> .example{ background: url( example.svg );

フラットデザインやミニマルデザインといった「Webデザインのシンプル化」が進む中、アクセントとなる「ちょっとした動き」を取り入れるWebサイトが増えています。本連載では、ブログ「<a href="http://zxcvbnmnbvcxz.com/">Stronghold</a>」のメンバーが、いま注目のWebサイトを毎回1つピックアップ。特徴的なインタラクション表現を紹介するとともに、CSS3やjQueryを使って実装する方法を解説します。

Googleがウェブマスター向けガイドライン更新、CSSやJavaScriptのクロールをブロックしないよう求める 米Google は2014年10月27日、ウェブマスター向けガイドラインの「技術に関するガイドライン」を更新し、ウェブクローラが正しくサイトを認識するために CSS や JavaScript などのウェブレンダリングに関連するファイルも巡回できるよう配慮することを求めた。 ウェブレンダリングに関連する記述を更新 今回 Google が更新したのは、ウェブマスター向けガイドラインのうちの「技術に関するガイドライン」に記述された、ウェブページのレンダリングに関する箇所。具体的には、次の箇所が更新されている。 従来の技術に関するガイドライン Lynx などのテキスト ブラウザを使用して、サイトを確認します（ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映り

「drawer」は、横からせり出してくる「ドロワーメニュー」をサイトに手軽に実装できるjQueryプラグインです。 ドロワーメニューはスマートフォンやタブレットなどのさまざまな画面サイズに柔軟に対応できる利点があり、GoogleやFacebookのモバイルサイトで利用されています。drawerプラグインは横幅の可変に対応していますので、レスポンシブ Web デザインにも利用できます。 drawerプラグインはGoogle ChromeなどのモダンブラウザーとInternet Explorer 10以降、スマートフォンではiOS 7のSafariとChromeに対応しています。 MITライセンスですので、著作権表示は削除せずに利用しましょう。 drawerは、パッケージマネージャーの「bower」でもインストールできます。bowerを導入している場合は、以下のコマンドですぐに利用できます。

「Lazy Line Painter」 は、最近流行のSVGを使ったパスアニメーションを手軽に作れるプラグインです。自分で描いた線画をSVG形式で読み込み、手で描いたような動きをつけて表示できます。 あまり複雑な動きはできませんが、「Tatenaga GIF」のiPhoneの線画のように、さりげなく取り入れるにはぴったりのプラグインです。 ライセンスはMITです。ライセンスに従って著作権表示は削除せずに利用しましょう。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、Lazy Line PainterをGitHubからダウンロードします。ページ右下の「Download ZIP」ボタンからダウンロードできます。