CSSのbackground-imageプロパティは背景画像に関するCSSですが、単に背景に画像を表示させるだけでなく、実はアニメーションと組み合わせて多彩な表現ができます。本記事ではbackground-imageの特性を活かしたアニメーション表現について解説します。 サンプルコードもありますので、実際の案件に取り入れてみたりbackground-imageの仕組みについて学んでみたりしてください。※サンプルコードはSass（SCSS）を使用しています。 サンプルを別ウインドウで開く コードを確認する background-imageとアニメーション タイトルと矛盾するようですが、background-imageプロパティ自体はanimationプロパティやtransitionプロパティを用いてアニメーションできません。もしbackground-imageプロパティをアニメーション可能に

画像出典: https://www.ipa.go.jp/files/000017316.pdf こんにちは。株式会社Flatt Security セキュリティエンジニアの奥山です。 本稿では、独立行政法人 情報処理推進機構(以下、IPA)が公開している資料「安全なウェブサイトの作り方」を紹介します。 「安全なウェブサイトの作り方」は、無料で公開されているにも関わらず、Webセキュリティを学ぶ上で非常に有用な資料です。これからWeb開発やセキュリティを勉強したいと考えている方はもちろん、まだ読んだことのない開発者の方々にも、ぜひ一度目を通していただけたらと思います。 一方、「安全なウェブサイトの作り方」では、一部にモダンなアプリケーションには最適化されていない情報や対象としていない範囲が存在します。それらについても本記事で一部、触れていきたいと考えていますので、資料を読む際の参考にしていただ

「FAQにはSEO対策が必要なの？」 「FAQもSEOを意識しなければならないの？」 FAQを導入する際、WebサイトやWebコンテンツ同様にFAQが検索上位に表示されるようSEO対策が必要なのか悩んでいる人は多いのではないでしょうか。 結論から言うと、FAQにもSEO対策は重要です。顧客は問題や悩みを抱えたときに、まずはGoogleなどの検索エンジンを使いキーワード検索をします。 そして検索結果から、問題や悩みを解決できるものはないか探します。つまり、FAQが検索エンジンで上位表示をされていないと、顧客の問題解決に一役買うことは難しいといえます。 FAQを設置しているだけでは、利用者を増やすのは難しいでしょう。FAQは戦略的に適切なSEO対策をして、利用してもらえるような導線づくりをしていくことが大切です。 そこでこの記事では、FAQのSEO対策の必要性や具体的な方法をまとめて解説してい

.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads

ネイティブのタッチ・スワイプ操作に対応したさまざまなスライダーを実装できるJavaScriptライブラリを紹介します。 依存関係は一切なし、IE10を含むすべてのブラウザをサポートしています。

AWSチームのすずきです。 2020年5月末から 日本国内でも 受験が可能となった ピアソンOnVUE を利用した AWS認定資格試験。 OnVUE オンライン監督試験 で案内されている、以下の要件を満たす環境を自宅に準備し、受験する機会がありましたので紹介します。 1人になれる静かな部屋 Webカメラを備えた信頼できる機器 安定したインターネット接続 静かな部屋 自宅は、かつて 二世代住宅、今は 一軒屋となっている 借家です。 以前はキッチン、現在は倉庫となっている部屋に作業用のテーブルと椅子を持ち込みました。 信頼できる機器 以下の端末を利用しました。 MacBook Pro (Retina, 13-inch, Early 2015) OSバージョン 10.15.5 macOS Catalina 公開直後、USB媒体を利用したクリーンインストール済み。 OnVUE オンライン監督試験

しばらくの間、外でネットとか使う時はタブレットを使っていました。しかし業務で外出があるとどうしても会社のPCを持ち歩くことになるんですけど肩にずっしり。辛い… ということ... となると否応なしにフォントが汚いなぁ、おかしい、と気が付くことになるわけです。 でまずはEdgeWindows 10ってことは標準ブラウザはEdge。 Internet Explorerも入ってるくせにEdgeが標準指定されています。使ってる人いるんかいな、と思っていたのですがInternet ExplorerはWebを仕事にしているともれなく大嫌いになっていますから、自分もWindows PCを買ってからはEdgeを標準に使ってます。いまは「シンプルでなかなかいいじゃん」という気持ちにまでなってます。 でこのブログを見てみたら、Webフォントが反映されたりされなかったりする！？ なんやねん、ということでこのへんだ

ここの画面ではメインボタンの「START」を目立たせたいのですが、右上のボタンに目がいってしまいます。 右上に目がいってしまうのは、最後に動く箇所に視線が移動するので不必要に右上に視線が誘導されます。 他にもコントラストや動き量がメインボタンよりも大きく変化しているため、いやでも目についてしまいます。 不必要に待たせている 最後に動かすところに視線が行きますが、視線をメインボタンに向けさせようと最後のアニメーションを長くしてしまった結果、ユーザーがアニメーションによって待たされている状態になってしまいました。 メインボタンはすぐに押してゲームを遊べることが大切になるので、最後にボタンを大きく動かして目立たせてもユーザーは早く押させて欲しいと思ってしまうので、アニメーションは短くサッと出して上げてユーザーが気持ちよく行動できるといいですね。 動き過ぎ、優先順位が曖昧 全てが動き過ぎてしまい、

モダンブラウザでサポートされているCSSの疑似クラスを使えば、JavaScriptでフォーム状態を監視することなく、CSSで状態を検知できるようになりました。また、HTMLのpattern属性を使えば入力バリデーション機能（※）もつけられます。これらを活用することで以前よりも手軽にインタラクティブなフォームを実現できます。 デモを別ウインドウで再生する ソースコードを確認する ※あくまでform要素への入力バリデーションなので、送信される値に対して保証はありません。送信される値をチェックするにはサーバー側のバリデーションが別途必要になります。 さまざまな状態を選択できる疑似クラス 疑似クラス（Pseudo-classes）はCSSで使えるセレクターの一種で特定の状態の要素を指定できます。:hoverも疑似クラスの1つです。::afterは「疑似要素」と呼ばれ、表記は似ていますが呼び名が違う

box-shadowだけじゃない！CSSでできる色々な影の表現と意外に知らない落とし穴 ウェブページのデザインやコーディングをしている人なら、誰でも一度は影をつけたことがあるでしょう。一方でその影にどれほどの表現や技術のバリエーションがあるか、意識したことのある人は少ないかもしれません。 影を付ける方法としてはCSSのbox-shadowが一般ですが、そのほかにもいくつもの技術・手法が存在します。ウェブの世界に限らず、年々変化するデザイントレンドにおいても影の扱いは重要なテーマです。 たとえば少し前に流行したロングシャドウや今年のトレンドとも言われるNeumorphism（ニューモーフィズム）など、ユニークな表現には影のテクニックを活用できるものがたくさんあります。 ▼ CSSで作成したロングシャドウ（画像上部）とニューモーフィズム（画像下部）の例： デモを別ウインドウで表示 デモのソース

2019年9月16、17日、日本最大のPythonの祭典である「PyCon JP 2019」が開催されました。「Python New Era」をキャッチコピーに、日本だけでなく世界各地からPythonエンジニアたちが一堂に会し、さまざまな知見を共有します。プレゼンテーション「Pythonで始めてみよう関数型プログラミング」に登壇したのは、株式会社SQUEEZEの寺嶋哲氏。講演資料はこちら 不変／永続データ構造を提供するパッケージ 寺嶋哲氏：続いて、不変／永続データ構造についてです。 listを操作する関数の問題点について、例題で見ていきましょう。add_mangoは果物名の文字列のlistをとって、mangoをそのlistに足して返します。change_from_apple_to_bananaは、同じようにlistをとってappleを探して、bananaに入れ替えて返します。 その

2019年9月16、17日、日本最大のPythonの祭典である「PyCon JP 2019」が開催されました。「Python New Era」をキャッチコピーに、日本だけでなく世界各地からPythonエンジニアたちが一堂に会し、さまざまな知見を共有します。プレゼンテーション「Pythonで始めてみよう関数型プログラミング」に登壇したのは、株式会社SQUEEZEの寺嶋哲氏。講演資料はこちら なぜ関数型プログラミングを愛するようになったのか 寺嶋哲氏：それでは発表を始めます。まず「おまえ誰よ？」。はい、寺嶋哲といいます。Twitterなどでは「@meganehouser」というIDでやっています。 所属は株式会社SQUEEZE（スクイーズ）で、ふだんはPython、Django、Django REST frameworkでバックエンドを書いて、AngularJS、Angularでフロン

I'm trying to add a class to list blocks (core/list) in Gutenberg. Unfortunately, it looks like because some blocks like lists and paragraphs don't have the standard default class name of wp-block-{name} they can't be renamed using the blocks.getBlockDefaultClassName filter. To get around that, I've used the blocks.getSaveContent.extraProps filter, which seems to enable me to add a class to ALL th

はじめに おはようございます、加藤です。Vue.jsのユニットテスト環境作成の方法をまとめました。もし、このブログが公開から時間が経っているなら情報が古い可能性が高いです、ご注意ください。 なぜわざわざこんな事を言うかというと、私がこのブログを書いた理由は簡単に環境作成できるにも関わらず古い情報にぶつかって無駄に時間を溶かしたからです。。。 tl;dr Vue.jsのユニットテストの導入方法 マウンティングオプションは mount と shallowMount どちらを使うべきか 見るべきドキュメント 環境作成までがメインでユニットテストの作成方法についてはどのドキュメントを何の為に読んだかをまとめています。 ブログを書く経緯 最近Vue.jsの基礎を勉強したので自主4連休中に、Techpitで販売されているVue.js/Vuexを使ってTrello風アプリを作成しよう！を買ってサンプルア

大家好！イマチュウのばやし（@muraba1)です 今日は中国語学習に強力な力を発揮するサイトの紹介です これなら中国語を独学で学習できる 今までいろんな中国語学習サイトやアプリがありましたが、個人的にはダントツでこれがおすすめです 中国政府の教育局との協業サイトとのことでちょっと使えばその力の入れようが分かります 全球中文学習平台 このサイトは普通語を学習者向けのサイトで、地方出身者や外国人が普通語をマスターするためのあらゆるコースがあります。 とにかく完成度が高く、楽しく学習できるように工夫されていますので一度見てみてください。 なかでも日本人が中国語学習に使えるのは主に以下の3つです 1．段階式中国語講座（全43コース） クイズ形式ですすむ中国語レッスン 難易度は初級~中級程度ですが、発音やリスニングもあります。 2．中国語ケーススタディー　1000シーン 生活、学習、旅行に分けてケ

先日Glatchのポートフォリオサイトをリニューアルしました。 前回の記事では妻がポートフォリオの設計・デザインプロセスに関して投稿してくれました。 今回は実装編です。 普段は技術系の記事はテックブログに書いているのですが、ポートフォリオの宣伝も兼ねているので今回はこちらに投稿します。良かったらテックブログも見ていただけると嬉しいです。 さて技術面に関してはせっかくリニューアルするのでこの機会に新しい技術を試したい、でもWordPressで管理してきた資産はできればそのまま活かしたい、という2つの要望が自分の中にありました。 この2つを両立させるためにコンテンツ管理には引き続きWordPressを使用し、フロント部分にモダンなフレームワークを採用することで要望を満たしました。 検討の結果WP REST API + Nuxt.jsというJAMstackな構成で構築することにしました。 本記事

先日、ちょっとしたアイソメトリックなアイテムを作りたいと思い制作方法を調べてみたのですが、変形して回転して3面作ってペンツールでパスをあれこれして色を変えて…、と手順の多い制作方法が多く出てきました。 より簡単に作れる方法がないか調べたところ、3Dエフェクトを使用して簡単に作れる方法があったので紹介します。 アイコンやアルファベットなど単純な図形であれば数クリックでアイソメトリックなイラストが作れます。 アイソメトリックにしたい図を用意 イラストレーターにアイソメトリック化したい図を用意します。 今回は六角形を使おうと思います。（テキストを使いたい場合はアウトライン化しておきます。） 3D「押し出しとベベル」を使う 効果→3D→押し出しとベベルに進みます。 「アイソメトリック法」を選ぶ 「位置」のドロップダウンから、「アイソメトリック法 – 左面」を選びます。 （他に、右面、上面、底面が選

どうもfujiharaです。本日はブラウザJSでエクセルを扱える、SheetJS js-xlsx を紹介します。 背景 あるデータをブラウザ上で表示したいが、スプレッドシート(apiを利用)やCSVファイルを編集(エクスポート)するのは 避けたいということで探していたところ、npmにSheetJS js-xlsxというものがありました。 サンプル 今回はエクセルからHTML, CSV(配列)への変換をします。 npm インストール npm install xlsx csv-parse javascript ※IE11対応の場合の箇所追記しました。 import XLSX from 'xlsx'; import parse from 'csv-parse'; //IE11対応の場合は import parse from 'csv-parse/lib/es5'; fetch( '/data/s

てきとうなJavaScriptを書いたらIEで動かなかった。つうかJavaScriptが動かなくなった。 function aiueo(kakiku = false) { 関数のデフォルト引数はIE等で動かないらしい。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions_and_function_scope/Default_parameters あわてて修正。 function aiueo(kakiku) { if(typeof kakiku === 'undefined') kakiku = false; うまくいったっぽい。