「動き」のあるWebサイトを支えるCSSアニメーション技術｜yui540昨日、PIXIV TECH FESで登壇させていただいたときに発表したスライドの内容になります。 当日、来れなかった方はぜひこちらをご覧ください！ そして、当日お越し下さった皆さま本当にありがとうございました！ Twitterで「CSSアニメーション」「CSSヤクザ」というワードがたくさん飛び交って、とても嬉しいです。 これからもCSSと共に新しい表現を模索していきますのでぜひお楽しみに！
Web上でアニメーションを表示するなら「Lottie」がおすすめ！特徴や使い方など | Web Design Trends
Web上でアニメーションを表示するなら「Lottie」がおすすめ！特徴と使い方など Webサイト上でアニメーションを実装する場合、簡易なアニメーションはCSSやJavaScriptで手軽に作ることができますが、リッチなアニメーションを作ろうと思ったらコード量も結構なボリュームになってしまいます。 そんな時におすすめなのが「Lottie」です。LottieはAfter Effectsで作成したアニメーションを簡単にWebやアプリで表示することができ、パフォーマンスにも優れています。 今回は、Lottieの特徴や使用するメリット、使い方などをご紹介したいと思います。 Lottieとは LottieはAirbnbが公開しているアニメーションを表示するためのライブラリです。スマホなどのネイティブアプリがメインのようですが、Webサイト上でも高クオリティのアニメーションを簡単に表示することができ、非
フロントエンドの「想定外」に対応する考え方とTipsいくつか
とても個人的な話ですが、ここ最近で自分自身のプライバシー意識の高まりを感じて、ブラウザの設定を見直す機会がありました。見直したのはCookieの設定で、許可したドメインにしかCookieを記憶しないようにしました。設定変更によるある程度の不便は覚悟していました。とはいえ、ま〜せいぜい、初回アクセスの時のモーダルが何度も出るようになるとか、ログインできなくなるとか、そのくらいかなと思っていました。 しかし実際は、悪い意味で期待を裏切られることになりました。 Cookieが無効なだけで、“全く”動かなくなってしまうウェブサイトやウェブアプリが、本当にたくさんあることに気づいたのです。 全く動かなくなってしまう原因は単純（後述）だったのですが、ちょっとした対処で簡単に直せることなのに、サイト全体が一切使い物にならなくなってて、もったいない！！ と思いました。 フロントエンドの想定外 ウェブサイト
swaggerでAPIドキュメントを書いたらめっちゃはかどった話 - kaz29
Swaggerは、REST APIの仕様とそれに関連するツール群の総称です。REST APIの仕様を定義したJSONファイル(Swagger Spec)を軸に以下のようなツールから構成されています。 Swagger UI - Swagger Spec から動的にAPIドキュメントを生成するツール Swagger Editor - Swagger Specのエディタ Swagger Codegen - Swagger Specからクライアントのコードを生成するツール 最近では、Open API InitiativeがAPIの記述のためにSwaggerを採用して話題になりました。 www.publickey1.jp APIドキュメントのメンテは結構面倒 一般的にAPIの仕様書は、古くはExcel/Wordなどを使ったり、最近ではWikiやMarkdown形式で記述したりなどプロジェクトによって
フロントエンドのコンポーネント設計に立ち向かう - Qiita
ReactやVueなどコンポーネントベースで作っていくViewのライブラリが普及したことで、コンポーネント指向での開発が一般化してきた昨今のフロントエンドですが、このコンポーネントの設計に悩まれる方も多いのではないでしょうか。 コンポーネントをどの粒度、どんな状態で分割するのが良いのか、などなど、特にチームで開発する時に認識が揃っていないとカオスになりがちな部分であると思うので、自分なりの設計をする際の指針を言語化しようというのが本記事の目的です。同じように悩まれている方にも何らか示唆を提供することができたら嬉しいです。 想定読者 「コンポーネント設計？なにそれ？おいしいの？」という方 初めてコンポーネント設計でアプリ作ってみたけど、本当にこれでいいのか自信の無い方 はじめに: "コンポーネント"とは まず最初に"コンポーネント"という言葉についてですが、ここでは「GUIのパーツをモジュー
flexboxのバグに立ち向かう（flexboxバグまとめ） - Qiita
注）本文中の「コンテナ」「アイテム」について 本文中でいう「コンテナ」「アイテム」は、flexコンテナとflexアイテムのことを指しています。 コンテナ display: flexや、wrap指定などをする 複数のアイテムを含む アイテム flex: 1 0 0%などの指定をする 1. アイテム潰れる問題（Safari） Chrome Safari 潰れてますね。 起きる条件 Safari なぜ コンテンツの最小サイズを尊重してくれない模様 どうすればいいのか flex-shrinkに0を指定 flex-basisにautoを指定（デフォ値なので、指定がなければそのままでOK） Safari10にて修正済み（つまり、SierraとiOS 10以降では対応不要） 2. align-items:center はみ出す問題 Chrome IE11 はみ出てますね。 起きる条件 IE10-11 f
2016年を振り返って、 HTML, CSS, JavaScript の書き方を変えたところ
2016年のブラウザ事情の進展に伴い、実務で HTML, CSS, JavaScript の書き方が変化した部分を列挙してみます。あくまで代表的なもののみです。 ブラウザのサポートバージョン変化環境面の変化まとめ ブラウザのサポートバージョン変化§ IE 8 サポート終了§ 2016年1月に IE 8 のサポートが終了しました。 html5shiv.js の読み込みが不要になったSVGが（PNGによる代替画像を用意することなく）使えるようになったvideo要素、audio要素が使えるようになった::before, ::after 擬似要素をダブルコロンで書けるようになった:not 擬似クラスが使えるようになり、例えば一行テキストエリアのセレクターが input:not([type]), input[type="text"] で正確に表せるようになったaddEventListener(),
picture要素やsrcset属性による画像のレスポンシブ、高解像度対応 | フロントエンドBlog | ミツエーリンクス
2016年12月22日 picture要素やsrcset属性による画像のレスポンシブ、高解像度対応 UI開発者 宇賀 数多の画面サイズ、従来に比べて2～3倍あるいはそれ以上の解像度を誇るディスプレイなど、日々Webサイトが閲覧される環境の種類は着実に増えています。そんな中Webサイトを制作していく上で、やはり画像のレスポンシブ対応や高解像度対応などが課題となることがあります。 picture要素やsrcset属性を用いることで、画像についてのそうした課題を解決することができます。 ※ この記事に登場するサンプルは、次のリンクでサポート状況が確認できます。サポート外の環境では正常に表示されません。 picture要素のサポート状況（Can I use） srcset属性のサポート状況（Can I use） 画像のレスポンシブ対応 通常、以下のように画面幅に応じて画像を拡縮させる対応方法が主だ
node.jsのいろいろなモジュール51 – OAuth2認証形式でGoogleスプレッドシートにアクセス | DevelopersIO
node.jsでGoogle Spread Sheetにアクセスその２ OAuth2でGoogle Spreadsheetにアクセスする 前回はサービスアカウント形式の認証とシート共有を使ってGoogleスプレッドシートにAPIでアクセスしました。 しかし、この方法の場合、セキュリティによりシート共有を制限している場合などには使用できません。 Googleでは他にもいくつか認証方法があり、今回はOAuth2を使用してスプレッドシートにアクセスする方法について紹介します。 環境構築方法 今回使用した動作環境は以下のとおりです。 OS : MacOS X 10.10.5 Node : v4.1.2 データとAPIを使用する準備 1.シートの用意とGoogle Developer コンソールにてAPI許可 前回と同じシートを使用します。 Drive APIの許可をしてないなら、許可しておきましょ
【GAS】スプレッドシートのデータをJSON出力する関数をExecution APIで外部のNode.jsから実行する - Qiita
概要 GASと言えば、「Google Apps Script」のGASです。 「Apps Script Execution API」という新しいAPIが使えるようになったそうなので、このAPIを使って、外部環境からGASの関数を実行するというサンプルをご紹介します。 特にスプレッドシートをクラウド型の簡易データベースのように使えることも想定して、 とりあえず表からJSON出力して、「Execution API」で外部のNode.jsから実行するという内容をやってみました。 以下は実装のイメージです。 要は外部から実行する上で「認証」のあたりが重要なポイントで、この「Execution API」を使う事でOAuth認証で気軽に外部からGASにアクセスが可能となります。 今回はGASでスプレッドシートにアクセスしていますが、もちろんGASはカレンダーとか他のアプリケーションの操作もできます。
Gulpを使ったSVGスプライトのアイコンシステムとワークフローの作り方
SVGスプライトって、なんか複雑なイメージがありませんか？ 僕はそうでした。なんか、面倒くさそう。。。どこから始めて良いかわからない。。。といった感じでずっと手をつけられずにいました。 でも、今回やってみて思ったんですが、一度ワークフローを確立してしまえばアイコン管理がかなり便利になります。CSSスプライトの時よりも管理が楽になりますし、表示サイズや今後の高解像度対応を気にしなくて良くなるのも嬉しいですね。 SVGスプライトについての英語のリソースはあるのですが、説明が多く、とっつきにくいものも多い印象なので、ここではできるだけシンプルに必要なことだけをまとめてみたいと思います。 では、SVGスプライト・アイコンシステムのGulpを使ったワークフローの構築、始めましょう！ 目次 達成したいこと デモページ SVGスプライトの仕組み ブラウザサポート 用意するもの 導入ステップ 最後に 達成
2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA
HTML・CSSコーディングを取り巻く状況は、数年前と大きく変わっています。最近では、2016年11月にHTML 5.1が勧告されたり、2015年8月頃にChromeのブラウザーシェアがInternet Explorerを抜いたりといったニュースがありました。また、2017年4月にはWindows Vistaのサポートも終了するため、今後対応すべきはWindows 7のIE 11以降となります（※）。当たり前だと思っていたコーディング技術を今一度見直す時期にきているのではないでしょうか。本記事では2016年に見直した、今の時代に即したコーディング技術を紹介します。 ※ 参考記事「Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft」 1. meta keywords設定は検索順位に関係がない ウェブコンテンツのキーワードを指定するmeta keyw
デザイン・開発間での作業効率を高める幾つかの方法 | フロントエンドBlog | ミツエーリンクス
「デザイナーがデザインしたものを開発者がコードを書いて実装する」、一言で表すと簡単そうなフローですが、デザインと開発の分業による従来のWeb制作フローではお互いが相手の作業を理解する機会が生まれない限り、Webにおいて再現不可能なデザインが入稿されてしまったり、開発者へデザイン趣意が伝わらず、意図したデザインに仕上がらないなどの問題が発生し、制作フロー上のボトルネックになる可能性が多くありました。 しかし、昨今ではデザインを行う制作環境の幅は広がっており、Sketchを用いたデザインからCSSを書き出したり、インタラクティブ表現ができるプロトタイプツールから基盤となるデザインを決めることができるようになるなど、開発者にも関連のある環境になってきています。 また、各種ベンダーブラウザにおけるデベロッパーツールの進化によりインブラウザデザインが発達し、デザイン・開発者両者にとっての垣根は徐々に
AMPコンポーネントの使用方法とその効果 | フロントエンドBlog | ミツエーリンクス
以前投稿したAMP対応でモバイルユーザーを獲得するという記事で、AMP対応においてサイトの機能性やデザインの再現性への影響が大きいと思われる制約の一つとして、「AMP JS以外のJavaScriptの記述と読み込みの禁止」という項目があることをご紹介しました。今回はそれを補うための手段をご紹介します。 AMP JS以外のJavaScriptの記述や、読み込みが禁止されていることによる影響の大きさはサイトによって様々ですが、jQueryやlodashなどのライブラリやフレームワーク、スクラッチで開発したJavaScriptファイルを読み込むこと、script要素を用いてHTMLソース内にJavaScriptソースを記述することも禁止されています。 AMP HTMLでカルーセルやアコーディオンメニュー等の機能を実装するためには、AMPコンポーネントを使用します。 AMPコンポーネントとは、外部
W3CのNu Html CheckerとCSS Validatorをローカルで動かす - CLOVER🍀
HTMLやCSSのチェックに使われる、Nu Html CheckerとCSS Validatorというものがあります。 こういうやつですね。 Ready to check - Nu Html Checker The W3C CSS Validation Service それぞれURLを指定したり、ファイルをアップロードしたり、対象を直接テキストで入力してチェックすることができるサービスです。 これらのローカル環境での構築手順が公開されているので、ちょっと試してみたいと思います。 Nu Html Checker Nu Html Checkerでは、以下のページの「How to to run your own copy of the Nu Html Checker」の部分に概要が書かれています。 About the Nu Html Checker Webベースで動かす方法、コマンドラインで使う
【徹底解説】JSON-LDを使ったschema.orgの記述方法
[対象: 上級] この記事では、JSON-LDをシンタックスに用いたschema.orgの記述方法について詳しく解説します。 CSS Niteで講演 2014年9月20日（土）に、CSS Nite LP36 powered by In-house SEO Meetup 「ビジネスに活用できる2014年SEOトレンド」がベルサール神田 イベントホールで開催されました。 僕は出演者として登壇し、セマンティック検索と構造化データ、schema.orgをテーマに公演しました。 このなかで、JSON-LDの使い方についても説明しました。 [撮影：飯田昌之] 参加者には録画した動画とスライドが提供されています。 年内には（無償で）一般公開される予定です。 ですが、JSON-LDを使ったschema.orgをもっともっと多くのサイト管理者に使ってもらうことが僕の希望です。 3か月近くも待たせたくありませ
JSON-LDでschema.orgの構造化データ導入をより簡単に
Updated 2015.06.16 / Published 2015.04.24 構造化データは、Webサイトのコンテンツを構造的に把握できるように提示するもので、代表例としてGoogleやBingの検索サービスが構造化データを機械的に抽出・利用しています。Googleではリッチスニペットの名称で、検索結果画面上にイベント、レシピ、レビューなどのメタデータが表示でき、人目を引けることで注目しているWeb制作者も多くいることでしょう。その構造化データの記述方法にはMicrodata、RDFa、JSON-LDの3つが存在し、中でもGoogleが推奨するJSONベースのデータ形式で記述できるJSON-LDであればより簡単に導入することができます。 各構造を表す語彙を定義するschema.org 構造化データにおいてGoogleやBingの検索サービスがサポートしている各構造を表す語彙を定義して
エンジニア必見！SEOのための構造化データ記述にこれからはJSON-LDがおすすめ - カカドゥ開発者ブログ
こんにちは！カカドゥの増田です。 SEO対策をしているウェブサービスのエンジニアなら、SEO対策としてパンくずや、レビュー(口コミ)の評点に、MicrodataやRDFaを使って構造化データ(メタデータ)をつける作業を依頼されたことのある人は、少なくないんじゃないでしょうか。 構造化データを記述する方法としては、従来からMicrodataやRDFaなどが使われていましたが、2014年頃からJSON-LDというのも使えるようになっています。 構造化データに関する変遷はJSON-LDでschema.orgの構造化データ導入をより簡単にが詳しいです JSON-LDについては【徹底解説】JSON-LDを使ったschema.orgの記述方法 | 海外SEO情報ブログが詳しいです 僕自身が最近、新規サイトの構築にあたって初めてJSON-LDを使い、JSON-LDは従来の方法のデメリットを解決するとても
現場で使えるgulp入門 | 第1回 gulpとは何か
現場で使えるgulp入門 第1回 gulpとは何か さまざまな作業を自動化するビルドシステムgulpの基礎を解説します。第1回目は、gulpとは何か？ 自動化のメリットはどこにあるのか概観。インストールから簡単なタスクを走らせてみます。 はじめに このシリーズでは、JavaScriptで書かれたビルドシステムであるgulp（ガルプ）について、導入から使い方など、基本的な部分を解説します。 なお、記事執筆時点のgulpのバージョンは3.8.7です。 第1回目では、まず、なぜgulpのようなツールが必要なのか、ツールの背景に触れます。さらにgulpの概要と、環境設定を中心に解説します。 gulpとは gulpはNode.jsをベースとしたビルドシステムヘルパーです。以前CodeGridでも紹介したGruntと似た目的を持って作られたツールで、gulpを使えばさまざまな作業を自動化することができ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Visual CSS flexbox builder | Webflow
