まるでゲームのような豪華で楽しい3Dマップをブラウザー上に手軽に表示できるWebサービスAPIの登場です。現時点では日本地図は対応していませんが、とてもわくわくするサービスですね。 eegeo.jsは、人気の地図ライブラリーLeafletをベースにしたオープンソースの3DマップAPIです。 シンプルな2Dマップを埋め込んだり、作成したりできる地図ライブラリーはたくさんあります。特に有名なのはGoogle Maps、Bing Maps、HERE、Mapbox、OpenStreetMapです。また、地図抽象化ライブラリーとして人気の高いOpenLayersやLeafletなどでは、アプリケーションの仕組みはそのままで、地図の「ベースレイヤー」を変更できます。 Google Earth APIの使用がNPAPIのセキュリティを理由に非推奨になったことで、3DマップAPIの選択肢は限られてしまいま

次々とリリースされるJavaScriptライブラリーにフレームワーク、進化を続けるCSSモジュール……と、変化の激しいフロントエンド開発界隈。いま開発者たちに実際に使われているのはどんなツール？ 開発経験は2年以上ありますか？ 高度なCSSスキルとしてSassやAutoprefixerの使用も含まれていますか？ JavaScriptの知識は十分にあり、Gulp、nmp、jQueryを使いこなせていますか？ そうであれば一般的な開発者だそうです。Ashley Nolan氏によるフロントエンド開発ツールのアンケート調査によれば。 気になる結果を見る前に…… この種のアンケート調査は新たなツールを見つけたり、知識不足の分野の把握に役立ちます。執筆時点で5254件の回答が寄せられていて、アンケート調査としてはかなりのサンプル数です。ただ、結果を疑いようのない真実だと受け取るには慎重になるべきです。

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

2017年のWebはどう変わる？ Web開発者歴20年を超えるコンサルタント／テクノロジーライターであるCraigが、2016年を振り返りながら予測します。 ここ何年かの間、私はその年の予測を立てています。外れることも多いのですが、今年も発表しましょう。 2016年の結果を振り返る 2015年に私が立てた10の予測で、あたったのは3.5でした。では2016年の予測はどうだったでしょうか。結果を振り返ってみます。 1. 大手企業でハッキング被害が起こる 本当にとんでもないことに、1月からハッキング事件のニュースが相次ぎました。名指しは良くないかもしれませんが、Yahoo!、米国司法省、Snapchat、Verizon、 LinkedIn、Oracle、Dropboxなどです。ただし、これらはほんの一部で、おそらく安全だった企業を挙げるほうが簡単かもしれません。 悔しいことに、複雑な攻撃はめっ

Webアニメーションの実装方法として海外でいまもっとも話題なのが、anime.jsでしょう。日本の「アニメ」が語源の注目のDOMアニメーションライブラリーの使い方を詳しく。 もし速くて軽いアニメーションのライブラリーを探しているなら、Julian Garnierが考案したanime.jsを検討してみてはどうでしょうか。 この記事は、SVG画像を含む動的なDOMアニメーションに関する解説です。記事では、canvas-WebGLやSVGに特化したアニメーションライブラリーに触れるつもりはありません。ただし、WebページのHTML要素（理想的にはSVG画像も）のアニメーションに適していれば、別の機会に紹介するかもしれません。 記事の目的はライブラリーを分析してコードを掘り下げることではありません。主にCSSを使う人が、DOMのアニメーションのためにJavaScriptでなにができるかを追及する、

古いやり方や面倒な作業を一気に変えてくれそうな最新のWordPressプラグインを厳選して紹介。WordPressユーザーなら要チェックです！ プラグインが好きな人もそうでない人も、たくさんの魅力的なプラグインがWordPressにたくさんあることを認めざるを得ないでしょう。豊富な機能を備えたEコマースWebサイトの構築からWebサイトへの小さな変更の追加に至るまで、Webサイト作成者にとってWordPressのプラグインは非常に役立つものです。 WordPressの人気は堅調なので、毎日のように新しいプラグインが開発・ローンチされています。しかし、常にこれらのプラグインを最新の状態に保つのは大変です。この記事ではWebサイトのトラフィックや売上を急増できる新しいプラグインを紹介します。 1. Duplicate Page 似たようなページや投稿を作成する時間を短縮する方法を探していません

iPadにキーボードをつないでアプリを入れたら、PHPの開発環境に早変わり。iPadだけでどこまで仕事ができるのでしょうか？ 結構本気です。 個人的にiPadが大好きです。 iPadはメディアを見たりやゲームをしたりするのにぴったりのガジェットで、電子書籍リーダーとしてもうまく機能します。ただ問題は、それほど使用する機会がないことです。Netflix、Twitch、YouTubeなどのメディアを利用するほとんどの時間、私は並行してコーディングをしています。 メディアの並行利用はMacBookではできますが、iPadではできた試しがありませんでした。しかし、次の2つのことによって可能になったのです。 最近、iOSには「ピクチャ・イン・ピクチャ」機能が追加された。ほかのことをしながらビデオアプリの再生ができるということ DraftCodeやWorking Copyのようなすばらしいアプリを使え

LINE BLOGが一般の人も使えるようにリリースされました。 見てみて、あまりにも設計が秀逸で、LINEって本当にすごいな、ぶち抜けているな・・・と思ったので、投稿してみたいと思います。キーワードは、「ネットワーク化」です。 ブログプラットホームの問題 まず、ブログプラットフォームの問題というのがあります。これは何か。 Bloggerという、ブログというものを広めたサービスがあります。これは、Twitterの創業者でもあるエヴァン・ウイリアムズが作ったサービスで、Googleがはじめた買収したサービスとしても有名です。 これはみなさんが考えているブログサービスとほぼ同じようなもので、自分の考えとかを記事にして公開できるというものでした。瞬く間にヒットをし、いろいろな人がWeb上で記事を書くようになりました。 しかし、そのあと、苦しい戦いになります。なぜかというと、ブログプラットフォームと

CSS AnimationsやTranstions、Canvas、JavaScriptによるDOM操作など、Webアニメーションの実装にはさまざまな手法がありますが、決定版となる新しいJavaScript APIの策定が進んでいます。CSSアニメーションのスペシャリストであり、the new codeを運営するDudley Storeyさんによる特別寄稿です。 従来のWebアニメーションの問題を解決するAPI Webにおけるアニメーションは、性質のまったく異なる4つのグループに分けられます。 CSS TransitionsとAnimationsはパフォーマンスに優れ、キーフレームを提供しているが、構築に膨大な時間を必要とし、基本的な開始と終了の制御のみをCSSとJavaScriptで提供している。UIの応答、ループ、ページ読み込みなどのシンプルなアニメーションに利用される傾向がある SMI

とても便利なJavaScript APIが登場しました。要素の表示状態を検出できるIntersectionObserver APIを使えば、無限スクロールを手軽に実装できます。 Webプラットホームに最近、注目の新しいクライアントサイドJavaScript API「IntersectionObserver API」が登場しました。 軽量でしかも使い勝手の良いこのAPIは、特定のDOM要素の表示状態、つまり要素が（ブラウザーウィンドウか要素の）ビューポートに入っているかどうかを効率的に監視する手段を提供しています。要素がビューポイントと重なり合う領域の割合を指定すれば、要素の表示状態を正確に定義できます。 この機能の一般的な用途としては、次のものが挙げられます。 コンテンツの遅延ロード 無限スクロール 広告表示 スクロールでトリガーされるアニメーション（注：用途としては本来おすすめできない。

Web開発者が初めてゲームを作るときに戸惑うのが、「ゲームループ」という考え方。普通のWebアプリを作るのとどう違うのか、シンプルなゲームのプログラム構造に触れてみましょう。 「ゲームループ」は、時間をかけて状態を変化させることでアニメーションやゲームをレンダリングするために使う技術につけられた名前です。本来は、ユーザー入力を受け取り、経過時間の状態を更新してからフレームをできるだけ多くの回数描く関数です。 この短い記事では、基本的な技術がどう機能するかを説明します。基本的な技術が分かれば、ブラウザベースのゲームやアニメーションの制作を始められます。 ゲームループは、JavaScriptでは次のようになります。 function update(progress) { // Update the state of the world for the elapsed time since la

「フルスタックエンジニアよりもデュアルスタックエンジニアのほうが必要」と呼びかけるのが、「えふしん」こと藤川真一さん。Twitterクライアント『モバツイ』の開発者であり、現在はBASE株式会社CTOとして長年Web業界をリードしてきた同氏が考える、いま現場に求められる「デュアルスタック」の考え方とは？ フルスタックは「専門職に失礼」 ——藤川さんが提唱されているデュアルスタックエンジニアの話に入る前に、藤川さんが考えるフルスタックエンジニアの定義について教えていただけますか？ 一時期、流行りましたよね、フルスタックエンジニア。要は、「自分が思いつく範囲のことを全部やりましょう」という話だったと思います。とはいえ、フルスタックと言っておきながら、実は全然フルスタックじゃないんですよね。デザインをやるわけでもないし、そもそもフルスタックエンジニアの役割にマネジメントは含まれていませんから。

Webサイトの高速化といえば、フロントエンドやバックエンドのテクニカルな改善の話になりがちですが、「体感速度」の視点で考えると、UXデザイナーにもできることがあります。 もしWebデザインの「最優先事項」がUXだったら、「スピード」が一番重要ではないでしょうか。ユーザーは素早く操作していて、ロードもすぐに終わることを期待しています。私たちはミリ秒単位の世界に身を置いているのです。 しかし、おもしろいいことに、「実際のロード時間は長くないのに、体感スピードが遅いことがある」という調査結果があります。 ユーザーはロード時間をストップウォッチで測るのではなく、あくまでも感覚で測っています。つまり、Webサイトを実際よりも速く感じさせる方法もあるということです。逆に言えば、実際よりも遅く感じさせてしまう可能性もあります。もちろんそれは避けたいことです。 コンバージョン後のことも忘れないでください。

「え？こんなものまで？」と驚くほどたくさん、それも親しみやすいタッチで統一されたイラストが揃うフリー素材サイト「いらすとや」が大人気。「日本が「いらすとや」だらけになってる」「イラストレーターの仕事を奪っているのでは？」との声が上がるほど、あちこちで使われています。 実際、「いらすとや」はWebデザインでも使い勝手がよく、とても便利。でも、案件によっては「競合サイトとイラストがかぶってしまう」「別のタッチのイラストが使いたい」といったこともありますよね。そこで、使い勝手のいいイラスト素材サイトを厳選して、各サイトの特徴をまとめてみました。 なお、商用利用可能なサイトの場合でも、グッズや再配布、販売目的での利用は禁止されていることがほとんどです。必ず各サイトの利用規約を確認してください。 「いらすとや」の作者が運営するゆるかわサイト『いらすとん』 http://www.irasuton.co

「購入ボタンは緑色がいいって専門家が言っている」「いや、Amazonのオレンジだ」なんて不毛な議論をしていませんか？ ディレクターやエンジニアにも役立つ、Webデザインで使える心理学のルールを3つ紹介します。 『ノンデザイナーこそ知っておきたい！デザインでセンスより大切な心理学のルール』では、Webサイトの成果を大幅に改善してくれる4つの有名な心理学ルールについて説明しました。今回は、色や人間の注意力持続時間、反応を研究したさらに3つの心理学ルールを紹介します。そして、ルールに沿ってWebサイトを改善し、より大きな成功を得る方法について説明します。 では、始めます。 ルール1：人間が注意力を持続できる時間は、毎年短くなっている 2015年、Microsoftは2000人の被験者を対象とする調査を実行し（調査結果PDF）、脳波記録装置を使って112人以上の人びとの脳活用をモニタリングしました