昨日、PIXIV TECH FESで登壇させていただいたときに発表したスライドの内容になります。 当日、来れなかった方はぜひこちらをご覧ください！ そして、当日お越し下さった皆さま本当にありがとうございました！ Twitterで「CSSアニメーション」「CSSヤクザ」というワードがたくさん飛び交って、とても嬉しいです。 これからもCSSと共に新しい表現を模索していきますのでぜひお楽しみに！

Web上でアニメーションを表示するなら「Lottie」がおすすめ！特徴と使い方など Webサイト上でアニメーションを実装する場合、簡易なアニメーションはCSSやJavaScriptで手軽に作ることができますが、リッチなアニメーションを作ろうと思ったらコード量も結構なボリュームになってしまいます。 そんな時におすすめなのが「Lottie」です。LottieはAfter Effectsで作成したアニメーションを簡単にWebやアプリで表示することができ、パフォーマンスにも優れています。 今回は、Lottieの特徴や使用するメリット、使い方などをご紹介したいと思います。 Lottieとは LottieはAirbnbが公開しているアニメーションを表示するためのライブラリです。スマホなどのネイティブアプリがメインのようですが、Webサイト上でも高クオリティのアニメーションを簡単に表示することができ、非

とても個人的な話ですが、ここ最近で自分自身のプライバシー意識の高まりを感じて、ブラウザの設定を見直す機会がありました。見直したのはCookieの設定で、許可したドメインにしかCookieを記憶しないようにしました。設定変更によるある程度の不便は覚悟していました。とはいえ、ま〜せいぜい、初回アクセスの時のモーダルが何度も出るようになるとか、ログインできなくなるとか、そのくらいかなと思っていました。 しかし実際は、悪い意味で期待を裏切られることになりました。 Cookieが無効なだけで、“全く”動かなくなってしまうウェブサイトやウェブアプリが、本当にたくさんあることに気づいたのです。 全く動かなくなってしまう原因は単純（後述）だったのですが、ちょっとした対処で簡単に直せることなのに、サイト全体が一切使い物にならなくなってて、もったいない！！　と思いました。 フロントエンドの想定外 ウェブサイト

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形式で記述したりなどプロジェクトによって

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? ReactやVueなどコンポーネントベースで作っていくViewのライブラリが普及したことで、コンポーネント指向での開発が一般化してきた昨今のフロントエンドですが、このコンポーネントの設計に悩まれる方も多いのではないでしょうか。 コンポーネントをどの粒度、どんな状態で分割するのが良いのか、などなど、特にチームで開発する時に認識が揃っていないとカオスになりがちな部分であると思うので、自分なりの設計をする際の指針を言語化しようというのが本記事の目的です。同じように悩まれている方にも何らか示唆を提供することができたら嬉しいです。 想定読者 「コ

注）本文中の「コンテナ」「アイテム」について 本文中でいう「コンテナ」「アイテム」は、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年1月に IE 8 のサポートが終了しました。 html5shiv.js の読み込みが不要になった SVGが（PNGによる代替画像を用意することなく）使えるようになった video要素、audio要素が使えるようになった ::before, ::after 擬似要素をダブルコロンで書けるようになった :not 擬似クラスが使えるようになり、例えば一行テキストエリアのセレクターが input:not([type]), input[type="text"] で正確に表せるようになった addEventListener(), getElementsByClassName(), String.prototype.trim, Arr

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と言えば、「Google Apps Script」のGASです。 「Apps Script Execution API」という新しいAPIが使えるようになったそうなので、このAPIを使って、外部環境からGASの関数を実行するというサンプルをご紹介します。 特にスプレッドシートをクラウド型の簡易データベースのように使えることも想定して、 とりあえず表からJSON出力して、「Execution API」で外部のNode.jsから実行するという内容をやってみました。 以下は実装のイメージです。 要は外部から実行する上で「認証」のあたりが重要なポイントで、この「Execution API」を使う事でOAuth認証で気軽に外部からGASにアクセスが可能となります。 今回はGASでスプレッドシートにアクセスしていますが、もちろんGASはカレンダーとか他のアプリケーションの操作もできます。

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

「デザイナーがデザインしたものを開発者がコードを書いて実装する」、一言で表すと簡単そうなフローですが、デザインと開発の分業による従来のWeb制作フローではお互いが相手の作業を理解する機会が生まれない限り、Webにおいて再現不可能なデザインが入稿されてしまったり、開発者へデザイン趣意が伝わらず、意図したデザインに仕上がらないなどの問題が発生し、制作フロー上のボトルネックになる可能性が多くありました。 しかし、昨今ではデザインを行う制作環境の幅は広がっており、Sketchを用いたデザインからCSSを書き出したり、インタラクティブ表現ができるプロトタイプツールから基盤となるデザインを決めることができるようになるなど、開発者にも関連のある環境になってきています。 また、各種ベンダーブラウザにおけるデベロッパーツールの進化によりインブラウザデザインが発達し、デザイン・開発者両者にとっての垣根は徐々に

以前投稿したAMP対応でモバイルユーザーを獲得するという記事で、AMP対応においてサイトの機能性やデザインの再現性への影響が大きいと思われる制約の一つとして、「AMP JS以外のJavaScriptの記述と読み込みの禁止」という項目があることをご紹介しました。今回はそれを補うための手段をご紹介します。 AMP JS以外のJavaScriptの記述や、読み込みが禁止されていることによる影響の大きさはサイトによって様々ですが、jQueryやlodashなどのライブラリやフレームワーク、スクラッチで開発したJavaScriptファイルを読み込むこと、script要素を用いてHTMLソース内にJavaScriptソースを記述することも禁止されています。 AMP HTMLでカルーセルやアコーディオンメニュー等の機能を実装するためには、AMPコンポーネントを使用します。 AMPコンポーネントとは、外部

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ベースで動かす方法、コマンドラインで使う

This page features an old UI, updated version coming soon. Check out our latest flexbox lesson Meet the first visual flexbox builderEasily build flexible, responsive layouts—without writing code. Only in Webflow.

[対象: 上級] この記事では、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か月近くも待たせたくありませ

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対策をしているウェブサービスのエンジニアなら、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とは何か？　自動化のメリットはどこにあるのか概観。インストールから簡単なタスクを走らせてみます。 はじめに このシリーズでは、JavaScriptで書かれたビルドシステムであるgulp（ガルプ）について、導入から使い方など、基本的な部分を解説します。 なお、記事執筆時点のgulpのバージョンは3.8.7です。 第1回目では、まず、なぜgulpのようなツールが必要なのか、ツールの背景に触れます。さらにgulpの概要と、環境設定を中心に解説します。 gulpとは gulpはNode.jsをベースとしたビルドシステムヘルパーです。以前CodeGridでも紹介したGruntと似た目的を持って作られたツールで、gulpを使えばさまざまな作業を自動化することができ