Webページのレイアウト、一昔前まではfloat、最近のプロジェクトではFlexboxが主流だと思います。CSS Gridはどうでしょうか？ CSS Gridは主要なすべてのブラウザにサポートされ、採用を検討している、また既に導入している人も少なくないでしょう。 注意しておきたいのが、CSS GridがあればFlexboxはいらないという考え方です。 これからのレイアウトは、FlexboxとCSS Gridを一緒に使用することで、それらの性能を効果的に利用できます。 Flexbox and Grids, your layout’s best friends by Eva Ferreira 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 FlexboxとCSS Gridは一緒に使用することでパワーを発揮する 神話は崩された Fri

HTMLやCSSでホームページのデザインを行うことを、一般的には「プログラミング」とは言わずに「コーディング」と言います。 論理的なバックエンドでの実行処理を考えるプログラミングとは違い、HTMLやCSSは「見え方」や「見た目」の部分に責任を持つことが多く、コードによって「組み立てる」イメージからそのように呼ぶのでしょう。 しかしながら、CSSは通常プロパティと値をセットで指定していきますが、*「CSS関数」*と呼ばれる便利な関数も用意されています。 これらの関数を使うことで、計算を実行したり、条件を指定したり、特定の値を別のフォーマットに変形したりすることができます。 そこで本稿では、*コーディング初心者こそ知っておきたい便利な「CSS関数」*を5つ紹介していきます。 普段業務などであまりCSS関数を活用していない方にこそ、CSS関数のよさを知って、使えそうな場面でぜひ活用していただきた

コンピュータに過去のデータを分析させ、未来のデータを予測させる機械学習。商品のレコメンドシステムや写真の顔検出など、身近なところに機械学習は広く活用されています。また、Microsoftの「Azure Machine Learning」、Amazonの「Amazon Machine Learning」、Googleの「Cloud Machine Learning」、といったクラウド機械学習サービスが公開されたことで、機械学習を専門としないエンジニアでも活用できるようになりました。 そこで今回は、「機械学習でどんなことができるか」をつかんでもらうために、機械学習にはどんな手法があるのかをざっくり把握できるスライドをまとめました。機械学習に興味をお持ちの方はぜひご参照ください。 機械学習の案件を提案してもらう

シリコンバレーの有名大学であるスタンフォード大学で、Andrew Ng先生の教える機械学習の講義が人気を集めている。この講義は形を変え、courseraという無料のWeb上オンラインコースとしても受講でき、ここ日本でも機械学習の勉強がしたい人達の間でも人気の講義となっている。 [Machine Learning by Stanford University] https://www.coursera.org/learn/machine-learning/ 人気の秘密 Andrew Ng先生の講義は内容が非常に実用的であることが人気の理由の1つとして挙げられるだろう。Andrew Ng先生はシリコンバレーの企業を相手に機械学習の指導をしている。おそらくその経験から、理論に走りすぎず、機械学習を適用するプロジェクトにおいて本当に有意義な内容に強くフォーカスしていることが感じられるのだ。Andr

お初にお目にかかります。新人のsagaraです。高校２年の夏、 物理部の部室でパソコンを前に「猫でもわかるC言語」を読んでいましたが、 剣道部で一番人気の美人の先輩の恋人役をするアルバイトに誘われるようなことはありませんでした。 今回はGoogle Maps APIについてのお話をさせていただきます。 Googleマップ(以下マップ)を用いたページを作成していた時、 「あれ？地図が出なくなった！」ということが何度かあったので、 ぶつかった場面と原因を振り返っていきたいと思います。 【前提】 マップの利用にはAPIキーを取得する必要がある Googleマップを利用する場合は、Google Maps APIを利用する必要があります。 ユースケースによって、いくつかのAPIが用意されていますが、 今回対象となるのは、自由度の高いGoogle Maps JavaScript APIです(*1)。

この話については、僕が専門としているWebサービス関連の業界におけるお話だと思って下さい。ただ個人的には、もう少し広範囲でも適用できる話なのではないかなとも思っています。 ということで、早速アウトプットすることのメリットから簡単に今の現状をまとめて今後エンジニアはどういう心構えで取り組んでいけば良いか、その中で、社外発表することのメリット、その社外発表の頻度を高める事の副次的効果についてまとめていきます。 アウトプットすることのメリット アウトプットする事やOSS化する事のメリットは、自分も含めて最近随分と語られるようになってきております。ここではそれについてあまり詳細に語る事は省略して、メリットを箇条書きでまとめると、 自分の技術が整理され、振り返りも容易になる フィードバックが得られる 自分の技術とその他社外のエンジニアと技術を足しあわせての技術検討（開発）が可能になる 自社だけでなく

Googleの「AMP（アンプ：Accelerated Mobile Page）」でのページ閲覧数あたりの収益が、自社サイトでの同収益より低くなっていると、Googleを怖れて匿名を条件に答えてくれたパブリッシャー6社が述べている。理由はAMPでは広告の読み込みがコンテンツと比べて遅いからだという。 Webページの読み込み速度が、収益化における悩みのタネになっている人たちがいる。 Googleの「AMP（アンプ：Accelerated Mobile Page）」でのページ閲覧数あたりの収益が、自社サイトでの同収益より低くなっていると、Googleを怖れて匿名を条件に答えてくれたパブリッシャー6社が述べている。理由はAMPでは広告の読み込みがコンテンツと比べて遅いからだという。たとえばAMPの1ページあたりの収益は、パブリッシャー自身が保有し運用しているサイトでの同収益とくらべると半分以下だ

数週間前に、JavaScriptが実際どのように動いているかを掘り下げて紹介する記事の連載を始めました。JavaScriptがどのような機能で構成されていてそれらがどのように組み合わさって機能していくのかを知ることによって、さらに良いコードやアプリケーションを作ることができるのではないかと思ったからです。 連載の1回目では 、エンジンやランタイム、コールスタックについての概要を紹介しました。2回目となる今回は、Google V8 JavaScriptエンジンについて細かく説明していきます。また、より良いJavaScriptコードの書き方、すなわち私たちの開発チーム SessionStack がプロダクトを開発する際に意識しているベストプラクティスについても併せて紹介します。 概要 JavaScriptエンジン とはJavaScriptコードを実行するプログラムまたはインタプリタのことです。

文字や画像をぽんっと配置するだけで、そのコンテンツが映えるApple風の美しいグラデーションの背景49種類をまとめたスタイルシートを紹介します。 コピペで簡単に利用できるので、CSSのスニペットに登録しておくと便利ですね。 HUE.css HUE.css -GitHub HUE.cssを使うと、簡単に美しい背景を作りだすことができます。 Appleのプレゼンテーションスタイルで、Hueを背景に使用したものです。 画像: Free Promo Backdrops and Gradients HUE.cssは上記のHueの背景画像にインスパイアされたもので、これらの美しいグラデーションの背景がCSSで簡単に利用できます。 元の画像は上記ページの下部から、.sketch, .png形式でダウンロードできます。 HUE.cssの使い方 使い方は、簡単です。 「hue.css」をダウンロードし、外部

ページのレイアウト、アニメーションをはじめ、エフェクトやフィルターなど、ここ数年でCSSでできる表現の幅がかなり広がりました。 Web制作に携わる人がチェックしておきたい、これからどんどん取り入れていきたいCSSのライブラリを紹介します。 Driveaway -GitHub デモページ レスポンシブ対応のMasonryレイアウトをスクリプト無し、CSSで簡単に実装できます。CSSアニメーションを使ったインタラクションも豊富に用意されており、パネルが回転する「Flip」、パネルにフォーカスがあたる「Focus」、鼓動のように動く「Pulse」など、楽しませてくれます。

米Yahoo!のフロントエンド エンジニア: Thierry Koblentz氏から、シンプルなスタイルシートで書かれたモダンブラウザ用のclearfix最新版を紹介します。 The very latest clearfix reloaded clearfixとは おさらい: micro clerafix(IE6+) モダンブラウザ用のclearfix最新版 clearfixとは 「clearfix」とはフロートした要素が親要素からはみ出してしまう、親要素の背景が表示されないなどを回避するもので、当サイトでもいくつか紹介してきました。 おさらい: micro clerafix(IE6+) まずは、おさらい。 micro clearfixは、normalize.cssのNicolas Gallagher氏によるもので、2011年にリリースされました。

スマホやタブレットなど、人気の高いモバイルデバイスでWebページがどのように見えるか簡単に確認できるChromeの機能拡張を紹介します。 レスポンシブの確認ツールでよくあるのが、iframeで単にサイズを変更して見るだけのやつ。当ツールはサイズだけでなく、各モバイルデバイスと同じ方法でレンダリングして表示、外部ネットワークだけでなくローカルにも対応しています。

例えばリストの各アイテムの区切りにボーダーをつける時、まずはli要素にボーダーを指定し、最後のli要素にだけボーダー無しを上書きで指定する、そんなスタイルシートも「:not」を使うと簡単に指定することができます。 否定疑似クラス「:not」の便利な使い方と使う時の注意点（特に優先順位）を紹介します。 On :not and Specificity 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 「:not」の便利な使い方 CSSセレクタの優先順位 101 「:not」を含む優先順位 「:not」を使う時の注意点 まずは、「:not」の各ブラウザのサポート状況。 2016年現在、どの環境でも特に問題なく、利用できると思います。 :not などセレクタの各ブラウザのサポート状況 「:not」の便利な使い方 否定疑似クラス「:not」は使い

JavaScriptでよく使われるコード片に即時関数というものがあります。無名関数を宣言して即実行することで、ブロックスコープの存在しないJavaScriptにおいて擬似的にブロックスコープを再現します。 var a = "global"; (function(){ var a = "local"; alert(a); //local })(); alert(a); //global 一番有名なのはこの(function(){ ... })()の形式なのですが、なぜfunctionの外側にカッコが必要なのか不思議に思ったことはないでしょうか？　ためしにfunction(){ ... }()と書いてみると、Syntax Errorが発生します。 なぜfunction(){ ... }()はSyntax Errorなのか JavaScriptにはfunction文とfunction式があって、

JavaScriptのthisは同じソースコードでも呼び出し元次第で意味が違ったりして複雑だと思われがちだけど、一回覚えてしまえば簡単だ。 JavaScriptにはthisが4種類ある これだけをしっかり覚えておけば、後は必要な時に 4種類って何があるんだっけ？ と考えれば容易に思い出せる。 ちなみに、下記のコードはブラウザ上で実行することを想定している。(なのでwindowを使う) トップレベルのthis グローバルオブジェクトを指す。 var hoge = "fuga"; window.foo = "bar"; // fuga+bar と表示される console.log(this.hoge + "+" + this.foo); (function(){ // 同じくfuga+bar と表示される console.log(this.hoge + "+" + this.foo); })(