タグ

ブックマーク / ascii.jp (78)

  • グーグルの支配が終わる GDPRで変わる世界 (1/4)

    :D 欧州連合(EU)が現地時間5月25日に施行した一般データ保護規則(GDPR)は、企業の個人情報利用を規制するものだ。違反企業には最大2000万ユーロ(約25億9000万円)または全売上高の4%という巨額の制裁金を課す。GDPRは欧州だけの話ではなく、グーグルやアマゾン、フェイスブックなど巨大資の支配状態にあったインターネット業界が大きく変わっていくはじまりだとする見方がある。情報インフラに詳しいIT企業プラネットウェイの平尾憲映代表が語る。 ●GDPRでインターネット市場は拡大する GDPR施行初日、グーグルとフェイスブック、同社傘下のインスタグラムとワッツアップが提訴されました。新しいプライバシーポリシーに同意するよう利用者に強制したという理由で、認められれば合計9000億円規模の制裁金が課されます。GDPRは欧州が対象ですが、今後同様の考え方は世界標準になるでしょう。 GDPR

    グーグルの支配が終わる GDPRで変わる世界 (1/4)
  • Googleモバイルファーストインデックス、導入は早くても2018年以降か

    Googleウェブマスタートレンドアナリストの Gary Illyes氏は2017年6月13日、モバイルファーストインデックス(Mobile First Index, 以下 MFI)の導入は早くても2018年以降との見解を示した。米国シアトルで開催中の検索マーケティングのカンファレンス・SMX Advanced のセッションで答えた。 モバイルファーストインデックスとは MFI は検索仕様の大きな変更の1つとして昨年発表された。現在の Google検索は、パソコン版ページの情報をもとに検索順位を決めているが、MFI はスマートフォン版ページの情報をもとに検索順位を決めるようになる。同社創業から2000年代はパソコンが主要な検索デバイスだったが、2017年現在は検索の過半数がモバイル端末から行われている。世界がモバイルに移行したことに伴い、Google の検索も「モバイルファースト」、つまり

    Googleモバイルファーストインデックス、導入は早くても2018年以降か
  • JSのデバッグにはconsole.log()ではなくNodeのデバッガーを使いなさい

    JavaScriptのデバッグに苦労しているなら、Nodeのデバッガーを試してみてはどうでしょうか。Visual Studio Codeならさらに手軽です。 袋小路です! 何時間も費やしていろいろ試してみたけれどもうまくいきません。コードをじっと吟味してもエラーになりそうなところはありません。2、3回ロジックを見直して、何度も実行しています。単体テストも助けにはならず、同じく失敗してしまいます。もはやどうしていいか分からず、虚空を見つめたくなります。ひとり闇の中にいるように感じて、だんだん腹が立ってきます。 こんなときの自然な反応は、コードの品質を落とし、邪魔なものを全部捨て去ることです。コードのあちこちにprintをちりばめて、なにかうまくいくことを祈るわけです。これでは暗闇で的を狙うようなもので、望み薄なことが分かるでしょう。 よくある話だと感じたのではないでしょうか。今までに数行以上

    JSのデバッグにはconsole.log()ではなくNodeのデバッガーを使いなさい
  • アクセシビリティ対応が捗る自動チェックツール「aXe」って知ってる?

    最近作成したWebサイトをデザインしたとき、特別なニーズや障害のある人にとってサイトがアクセシブルになるためにどのくらいの時間と労力を使いましたか。たぶん、多くの答えは「なにもしていない」だと思います。しかし、インターネットユーザーの中には、色を区別したり、テキストを読んだり、マウスを使ったり、あるいは、単にWebサイト構造が複雑でナビゲートするのに問題があるために、サイトのアクセスに苦労する人がたくさんいることを否定する人はいないと思います。 アクセシビリティへの配慮は、チェックしたり、解決策を実装したりするのに労力がかかるので、無視されがちです。Web開発者は根となる基準を知っておくだけでなく、その基準が満たされているか常にチェックしなければなりません。自動的に基準をチェックして、もっと簡単にアクセシブルなWebサイトをつくれないでしょうか。 この記事では、作成するサイトやアプリケー

    アクセシビリティ対応が捗る自動チェックツール「aXe」って知ってる?
  • それでもやっぱりSEOが必要な理由と初心者がやるべきことまとめ

    SEOは検索エンジンやユーザーをだましてトラフィックを運んでくるテクニック。そんなふうに思っていませんか? SEOが必要な質的な理由とその基ステップをコンパクトにまとめました。 SEOとはなにか? 検索エンジンへの最適化はWebサイトへのトラフィックを増やし、検索エンジンの検索結果ページ(SERPs)で上位に表示されるようにするための一連の戦略や手法を意味します。これがGoogleで「SEOとは?」と調べると出てくる短い説明ですが、この定義で十分とは言えません。 より適切な定義としては、コンバージョンや閲覧数を増やすためにターゲットカスタマーが使うキーワードを使って検索エンジンの検索結果において高順位に表示されるようにする戦略や手法を意味します。 たとえば、こう考えてください。近隣でピザレストランを経営しており、ピザに関連したキーワードを使ってWebサイトの最適化に取り組んだとします。

    それでもやっぱりSEOが必要な理由と初心者がやるべきことまとめ
  • 意外と知らないES5の新機能でJavaScriptのコードをメンテナブルに書き直す方法

    時代はECMAScript 2015(ES6)とはいえ、実はまだES5も追いかけられていない、使いこなせていない…という開発者も意外と多いのでは?  ES5のArrayメソッドを使ってメンテナンスしやすいコードを書く実例を紹介。 JavaScriptのメリットは多様なプログラミングスタイルを選べることです。オブジェクト指向、命令型、関数型のプログラミングもできます。さらに、必要性、好み、チームの意向に応じて、スタイルの切り替えもできます。 JavaScriptは関数型の書き方をサポートしてはいるものの、HaskellやScalaといった言語のように純粋な関数型プログラミングには最適化されていません。JavaScriptのプログラムを100%関数型にはできませんが、関数型プログラミングのコンセプトを使うと、コードがきれいになるだけでなく、簡単に再利用でき、テストしやすくバグを減らしやすいコー

    意外と知らないES5の新機能でJavaScriptのコードをメンテナブルに書き直す方法
  • なぜAmazonですらUXデザインの「ダークパターン」でユーザーを騙すのか

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

    なぜAmazonですらUXデザインの「ダークパターン」でユーザーを騙すのか
  • UXデザインの現場でこそ、アクセス解析をもっと活用すべき理由

    UXデザインの現場ではユーザーリサーチが重視されますが、アクセス解析(分析、アナリティクス)のデータは活用できているでしょうか? 英国のUXコンサルタントであるLukeは、ユーザーリサーチのベースとして分析データの活用を勧めます。 残念ながら、Webサイトやアプリの分析(アナリティクス)は、UXデザインにおいてしばしば見落とされます。もちろん、Webサイトやアプリの分析はUXリサーチに代わるものではありませんが、分析をUXリサーチに加えると、定量的データと定性的データの両方を調査対象範囲に入れられます。Webサイトで起こっていることを把握するためにWebサイトの分析データを利用するUX開発者もいますが、Webサイトの分析データをユーザーリサーチのベースとして利用する人はほとんどいません。 この記事ではWebサイトやアプリの分析がユーザーリサーチのプロセスにどのように役立つかを説明します。

    UXデザインの現場でこそ、アクセス解析をもっと活用すべき理由
  • フロントエンド開発の現場で役立つJavaScriptの知恵10選

    どんどん複雑化するJavaScript開発。KADOKAWAが運営するオンラインメディア「WPJ」から、チームで仕事をするときの「ちょっとしたお作法」や、デバッグを効率化する方法など、JavaScriptのコードを書くときに役立つ10の記事をお届けします。

    フロントエンド開発の現場で役立つJavaScriptの知恵10選
  • ReactとAngularのいいとこ取り? 2017年こそ学びたいVue.jsの始め方

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

    ReactとAngularのいいとこ取り? 2017年こそ学びたいVue.jsの始め方
  • RWDが真のレスポンシブではない理由とアダプティブデザインとの違い

    すっかりおなじみになった「レスポンシブWebデザイン(RWD)」。その言葉の定義は(提唱者であるEthan Marcotteの来の定義は別として)日でもたびたび議論になりますが、海の向こうでも再び盛り上がっているようです。 「レスポンシブ(Responsive)デザイン」は、いまではとてもなじみがある言葉です。しかし、その正確な意味と印象は、当に一致しているのでしょうか。「レスポンシブ(Adaptive)デザイン」が、すべてのデバイスおよびスクリーンサイズで正常に表示されるようなWebサイトデザインを意味する言葉であることを知ってはいますが、一方で「アダプティブデザイン」のほうがその概念に近いという人がいます。 当に「アダプティブデザイン」のほうが意味が近いのか。あるいは、「アダプティブデザイン」と「レスポンシブデザイン」は同じものなのか? または、「アダプティブデザイン」にはまっ

    RWDが真のレスポンシブではない理由とアダプティブデザインとの違い
  • 2016年大流行した「シネマグラフ」 をWebデザインで効果的に使う方法

    2016年のWebデザインのトレンドの1つは「シネマグラフ」。静止画の一部が動く表現は、Instagram広告などでもよく見かけました。なぜ注目されたのか、振り返ってみましょう。 なぜスノードームはこんなにも魅力的なのでしょうか? 正直なところ、中の小さなプラスチックの景色はたいてい雑に組み立てられ、おおざっぱに色が塗られています。スノードームはポストカードよりもはるかにリアリティに欠けています。 しかし、どういうわけか、きらびやかに作られたポストカードを見るよりもはるかに長い間、その小さな雪の渦をじっとのぞき込んでしまうのです。なぜでしょうか? それは動きによるものだと考えられます。個々の雪片は重要ではありませんが、その不規則に渦巻いた雲は、脳の中に場所や立体的な空間の感覚を生み出すようです。小さなパーツの集まりですが、全体では大きな力を発揮します。 スノードームは小さな「ブレインハック

    2016年大流行した「シネマグラフ」 をWebデザインで効果的に使う方法
  • ソフト開発に「かんばん方式」を導入すべき理由とスクラムとの違い

    プロジェクト管理方法としての「かんばん方式」について聞いたことはあっても、その詳細については知らないという人は多いかもしれません。かんばん方式は、スクラム(Scrum)などほかのアジャイル方式や、ガントチャートなどのツールとはどのように違うのでしょうか。また、かんばん方式はどのような目的で使われているのでしょうか。 かんばん方式の由来を説明しながらこのような疑問に回答し、実践でどのように使われているのかを解説します。 かんばん方式の基原則 日発祥の「かんばん」という言葉はトヨタの生産システムから生み出されたことは、業界周辺では良く知られています。その存在と基原則を知っていれば、利益を受ける人は多くなると見込まれています。かんばん方式の基原則とは、リーン生産方式、継続開発、カスタマーオリエンテーションなどです。すべてトヨタの元副社長、大野耐一氏の著書『トヨタ生産方式―脱規模の経営を目

    ソフト開発に「かんばん方式」を導入すべき理由とスクラムとの違い
  • もっと早く教えてほしかった!WordPress開発のデバッグが捗る11のヒント

    WordPressのテーマやプラグインを開発するときに絶対必要なデバッグの知識。知っているときっと役立つ、デバッグのTipsとツールをお届けします。 デバッグのスキルはどのような開発者にも不可欠です。この記事では、WordPressPHPのエラーをデバッグする際のパワフルな11の方法を紹介します。 最初に有名な「WP_Debug」を取り上げ、そのあとさらに高度な方法へと進みます。 PHPでの一般的なエラーの種類を説明しておきます。 A –Notice(注意):PHPで表示されるもっとも重要度の低いエラーメッセージ。必ずしも問題があることを示すわけではないが、改善可能な点が提案される 例:文字列を待ち受ける関数にnull要素が渡されている B – Warning(警告):Noticeより深刻なエラーではあるが、スクリプトの停止には至らない 例:存在しないファイルが「include()」に与

    もっと早く教えてほしかった!WordPress開発のデバッグが捗る11のヒント
  • ヒトの集中時間が「金魚」以下の時代にWebビジネスを加速させる方法

    現代は、新しいビジネスを始める時代としては、ある意味ではもっとも適していて、ある意味ではもっとも適していません。 現代が、新しいビジネスを始めることにもっとも適している理由は、インターネットのおかげで世界中の人にサービスを届けられるからです。現代が、新しいビジネスを始めることにもっとも適していない理由は、人にリーチする沢山の機会や方法があっても、注目が得られないことが増えてきているからです。実際、さまざまな調査で、人の注意力が持続する時間が歴史上、もっとも短くなっており、いまもなお減少し続けていることが明らかになっています。 2015年、テクノロジーの影響を見つけるためにマイクロソフトが実施した調査で人の注意力持続時間が明らかになっています。2000人を対象に調査をし、さらに112人の脳波を監視しました。その結果は衝撃的なものでした。人が平均的に注意力を持続できる時間は8秒だったのです。2

    ヒトの集中時間が「金魚」以下の時代にWebビジネスを加速させる方法
  • WordPressでSVGを扱いたい! アップから表示まで完全対応する工程まとめ

    いろいろなサイトで使われるようになったSVG。でも、WordPressはなぜかSVGファイルをサポートしていません。その理由と、メディアライブラリを拡張して対応する方法を徹底的に解説します。 ベクターイメージはWebの世界でますます一般的になりつつあります。SVGは標準的なイメージに代わる、スケーラブルでレスポンシブかつ高速な代替手段を提供します。SVGの主なメリットは、どのデバイスからでもくっきり鮮明に見え、通常はファイルサイズを小さく抑えられるという点です。 いまやSVGは特定のブラウザーに依存せず、サポートは広範囲であり、すべてのモダンブラウザーはイメージタグで指定されたSVGや、CSSのbackgroundプロパティの一部として指定されたSVGをサポートしています。 WordPressを使用しているなら、メディアライブラリーがどのようにメディアアセットの中央リポジトリとして動作する

    WordPressでSVGを扱いたい! アップから表示まで完全対応する工程まとめ
  • SVGをもっと使いこなすために知っておきたい、HTML DOMとSVG座標の相互変換

    Web制作でもよく使うようになったSVG。インタラクションなどを作るときにハマるのが座標に関する理解です。HTMLと組み合わせて使うときの座標の変換方法について解説します。 クールな人はもれなくSVGを使います。ただ、すばらしいSVGも、DOMやベクターインタラクションと一緒に使おうとすると複雑になります。 SVGは独自の座標系を持っており、viewbox属性を介して定義されます。たとえば、viewbox="0 0 800 600"とすると、幅800ユニット、高さ600ユニット、初期位置(0, 0)と設定されます。このSVGを800 x 600ピクセルの領域に置く場合、各SVGユニットは画面のピクセルに直接マッピングされます。 しかし、ベクター画像は美しさを保ったまま任意のサイズに拡大縮小できます。SVGは400 x 300の領域にも縮小でき、100 x 1200の領域に大きく形を変えて引

    SVGをもっと使いこなすために知っておきたい、HTML DOMとSVG座標の相互変換
  • 便利すぎてしびれた!あなたが知らないCSS関数トリック8選

    どんどん進化するCSSの中でも、意外と知られていないのがCSS関数。アイデア次第で実用的で応用の効くCSS関数を、もっと使ってみませんか? CSSはWeb開発者が思っているよりもっとたくさんの可能性を持っています。スタイルシート言語は年々大きく進化を続け、JavaScriptなしでもブラウザーでさまざまな機能をさせるまでになっています。この記事では、JavaScriptをまったく使わない8つのCSS関数の賢いトリックに注目します。 1.軽量CSSツールチップ たくさんのWebサイトがツールチップを実装するのにまだJavaScriptを使っていますが、実はCSSのほうが簡単です。一番シンプルなのはツールチップテキストをHTMLコード内のデータ属性に記述する方法です(例:data-tooltip="…")。このマークアップを使って、次のコードをCSSに記述すれば、attr()関数に与えられた値

    便利すぎてしびれた!あなたが知らないCSS関数トリック8選
  • セミコロンは省略?人気スタイルガイドに学ぶJavaScriptのコーディング規則

    インデントにタブとスペースのどちらを使うのがいい? JavaScriptにセミコロンは付けるべき? JavaScript Standard Styleを使えばそんな論争にけりがつくかもしれません。 最近、注目を集めている@ferossのJavaScriptスタイルガイド、JavaScript Standard Styleを紹介します。チーム内での開発が円滑になり、プログラミングがより楽しくなります。 JavaScriptスタイルガイドのコーディング規約は、タブとスペースのどちらが良いかといった不毛な議論を無くし、コードに一貫性を持たせてくれます。JSLintやJSHint、ESLintといったLinterで使用できる多くのスタイルガイドのうちの1つです。 もしLinterが分からなければ、SitePointの記事『A Comparison of JavaScript Linting Too

    セミコロンは省略?人気スタイルガイドに学ぶJavaScriptのコーディング規則
  • トレンドに振り回されないために知っておきたい、UXデザインで大切な4つのこと

    UXについて考えるのはストレス? よいUXを提供しようと必死になってデザイントレンドを追いかけたり、専門書を読み込んだりしていると、やることが多すぎて大変……。まずはこの4つを押さえてみては? ユーザーエクスペリエンスデザイン(UXデザイン)についてざっとGoogle検索してみると、その検索結果は、記事、ブログ投稿、書籍など、何千件とは言わないまでも、何百件にものぼります。これにはちゃんとした理由があります。それは、UXデザインが複雑で成長を続けている分野であり、一定の技術的および創造的な困難を伴うということです。 ベストなUXを提供するには長期的な視野が必要ですが、デザインのトレンドは刻々と変化し続けているため、乗り遅れないようにするにはとても骨が折れます。次に実施するプロジェクトに関するヒントやコツについて情報を知りすぎていると、やることが多すぎて圧倒されるかもしれません。 できる限り

    トレンドに振り回されないために知っておきたい、UXデザインで大切な4つのこと