これだけは押さえよう！住所フォームの作り方 - ケンオールブログ
まとめ 住所フォームの作り方 住所フォームを作るときには以下の4つを押さえましょう。 オートコンプリート機能に最適化する 郵便番号フィールドは1フィールドにしてハイフン有無どちらも対応する モバイルUX優先なら郵便番号が入力されたら即座に補完。精度優先なら郵便番号補完ボタンを設置 住所フィールドは「都道府県」「市区町村」「町名以下」の3フィールドが基本。「建物」フィールドはオプション 本文 地域SNSのユーザー登録、ECサイトの配送先入力、資料請求、自治体サイトでの電子申請など、ウェブサービスを活用する上で住所入力は欠かすことができません。 住所入力をシンプルかつ正確に行えるような入力インタフェース（住所フォーム）は、離脱率を減らし、コンバージョン率を向上させる上で重要です。 郵便番号を入力すると対応する住所を自動入力する機能（郵便番号による住所補完）は、住所フォームの改善方法として最も効
マイクロサービスにおけるWeb APIスキーマの管理 ─ GraphQL、gRPC、OpenAPIの特徴と使いどころ｜ハイクラス転職・求人情報サイト AMBI（アンビ）
マイクロサービスにおけるWeb APIスキーマの管理 ─ GraphQL、gRPC、OpenAPIの特徴と使いどころ マイクロサービスにおける通信方式の選択について、おおた（ota42y）さんが、GraphQL・gRPC・OpenAPIといった主なWeb APIスキーマの管理の利点と使い分けを解説します。 近年流行しているマイクロサービスアーキテクチャにおいては、「どういった通信方式を選ぶか」が開発の効率やサービスの信頼性、パフォーマンスを大きく左右します。この記事では、GraphQL・gRPC・OpenAPIそれぞれの利点と適切な使い分けについて解説します。 マイクロサービスにおけるWeb API管理の重要性 Schema First DevelopmentとWeb API 人ではなくプログラムが処理できるよう管理する Web APIのインタフェース定義手法の比較 OpenAPI ─ R
保存版！デザインツールの総まとめ -200種類以上の定番ツールから最近リリースされた注目のツールまで
Webサイト、スマホアプリの制作・開発に携わるすべての人に役立つ、200種類以上の有料・無料のデザインツールを紹介します。 定番ツールから最近リリースされた注目のツールまで、便利なツールが揃っています。 Awesome Design Tools -GitHub 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 アクセシビリティのツール アニメーションのツール AR（拡張現実）のツール コラボレーションのツール カラーピッカーのツール デザインのフィードバックツール デザインのハンドオフツール デザインパターンとインスピレーションのツール デザインシステムのツール デザインをコードにするツール エクスペリエンスのモニタリングツール フォントのツール スクリーンショットのツール アイコンのツール イラストのツール 情報アーキテクチャの
Web Developer Roadmap 2018が2019年版になっていたので比較してみる - Qiita
偉大なるリポジトリ 昨年に引き続き、Webエンジニアのためのロードマップが2019年版へ更新されています。2018年の間に大きく様変わりしていて、他の投稿者による翻訳記事がQiitaにもあがっているので詳しくはそちらをご覧ください。 この記事では2018年版と2019年版を比較して、技術トレンドの推移をそれなりに把握する事を目的としています。また、技術選択の際に迷った時も指針として活用していただければ幸いです。前回書いた記事はこちら 内容が充実しすぎていることもあり、すべてに触れたくても触れられません。一部ピックアップをしながら進めていきます。 ではさっそく見ていきましょう！疲れるので今回はあまりふざけません。 🚀Introduction 2018 2019 Choose your path に変化はないですが、左右の四角に変化があります。2019年版にはlicenseやSOLID,KI
負荷試験のためのノウハウと Webフレームワークの負荷試験 (Python,Node,Go,PHP) - Qiita
この記事はRetty Advent Calendar 2017 における 22日目の記事です。 昨日は @saku さんの swiftで丸画像をパフォーマンス高く表示する方法 でした。 はじめに 趣味のBot開発から気づけばWebフレームワークの負荷試験を行なっていました。 Software Engineerの@tkngueです。普段業務としては、Data Engineer/Web Service開発/データ分析やってます 「速さは正義」 とは皆の共通の認識で、言うまでもないことだと思うのですが 本記事では、速さってなんだろうって考えてみます。 TL;DR 負荷試験における 速さは面で捉えよう: 品質を50%'ile - 90%'ile - 99%'ile ... で定義する 品質を評価する手段にも気をつかおう: Coordinated Omission は大きな測定誤差を生みます Goも
3rd party Cookie いただきます | TECHSCORE BLOG | TECHSCORE BLOG
こんにちは、中山です（写真は私ではありません）。 以前は Cookie 終焉論的な記事をよく見かけたのですが、最近あまり見かけなくなりましたね。 結局のところ、相も変わらず Cookie は元気に活用され続けているようです。 そこで、今回はトラッキングで話題になりがちな 3rd party Cookie について考察してみましょう。 なお調査に利用したブラウザは以下の通りです。 （iOS と Android の標準ブラウザについてはまたの機会に） Firefox 47.0 Chrome 51.0.2704.103 m Internet Explorer 11.0.32 3rd party Cookie ブロックの動作（ブラウザ目線） ブラウザ目線での 3rd party Cookie とは、ユーザーが閲覧しているページのドメインとは異なるドメインから HTTP Set-Cookie Hea
反則スレスレ !? Super Cookie とは | TECHSCORE BLOG | TECHSCORE BLOG
（Eugene Onischenko / Shutterstock.com） こんにちは、中山です（写真は私ではありません）。 以前の 3rd party Cookie いただきます にて Parasite Cookie の場合、クロスドメインでトラッキングできないことが（業者側の）課題です。 しかし Super Cookie と呼ばれる方法ならばクロスドメインでのトラッキングも可能です。 こちらについては別途ご紹介します。 と結びました。 そこで、今回は Super Cookie と呼ばれる技術についてご紹介したいと思います。 例えばこんな Super Cookie Super Cookie とは、各種擬似 Cookie 技術の総称で、Flash の LSO を利用したシンプルな実装から、ブラウザの閲覧履歴（参考 : css history knocker）や Criteo の ITP
スタイルガイドジェネレーターの「Fractal」がかなり良さそう
ずっと自分好みのスタイルガイドジェネレーターを探していたんですが、ようやく見つけました！「Fractal 」というツールで、かなり良さそうなのでご紹介します。 初級編、中級編の2回に分けて、初級編ではインストールと初級設定からウェブUIの起動までを、中級編ではコンポーネントのより細かい設定などについてご紹介します。公式ドキュメントは初めてだとわかりづらいところもあったので、その辺を補う形でまとめてみたいと思います。 ※先日、スタイルガイドとパターンライブラリの違いについてまとめましたが、スタイルガイドやパターンライブラリを自動生成するツールは「スタイルガイドジェネレーター」というのが一般的なようです。「パターンライブラリジェネレーター」とは呼ばないみたいですね。 では早速、「Fractalのはじめの一歩」的な感じで行ってみましょう！ Fractalとは まずは、ざっくりとFractalをご
ダミー画像はPlacehold.itだけじゃない！写真を読み込めるUnsplash.itもイイ
ダミー画像のWebサービスといえばPlacehold.itが有名ですが、Unsplash.itという良さそうなサービスがあったのでメモっておきます。Placehold.it はシンプルなグレーのボックスの表示に、Unsplash.it は写真の表示にといったように、目的別に使い分けたら便利そうです。 ちなみに、Unsplash.itで使われている画像について、「さいごに」で注意点を書いています。Unsplash.itを利用する際は注意点を十分に理解した上で利用することをおすすめします。 Placehold.it > シンプルなダミー画像の表示 グレーボックスでシンプルにダミー画像を挿入したい場合などに最適。 たとえば、初期段階のプロトタイプ制作でレイアウト・デザインを確定させたい場合など、余計なところに気を向けさせないように画像などの要素は極力シンプルに表現した方が良い場合があります。そう
HTML5でファイルアップロードを多機能にしてくれるライブラリ×9選
HTML5で表現力が豊かになり、APIが多数追加されたとあってもそれを活かすコードを書かなければ従来のWebと何ら変わりません。特にフォーム周りは多数の機能が追加されています。これらを使うこなすことでユーザビリティの高いフォーム機能が実現します。 今回はファイルアップロードに注目して役立つライブラリを紹介します。 JeremyFagis/dropify: Override your input files with style — Demo here : http://jeremyfagis.github.io/dropify ファイルをローカルコンピュータからドラッグ&ドロップしてアップロードできます。画像の場合、サムネイルを表示します。マウスオーバーするとアニメーションがかかったりするのでユーザがファイルをドロップする場所を迷わないで済みます。 JeremyFagis/dropify:
OAuth 2.0 全フローの図解と動画 - Qiita
RFC 6749 (The OAuth 2.0 Authorization Framework) で定義されている 4 つの認可フロー、および、リフレッシュトークンを用いてアクセストークンの再発行を受けるフローの図解及び動画です。動画は YouTube へのリンクとなっています。 English version: Diagrams And Movies Of All The OAuth 2.0 Flows 追記 (2019-07-02) 認可決定エンドポイントからクライアントに認可コードやアクセストークンを渡す方法については、別記事『OAuth 2.0 の認可レスポンスとリダイレクトに関する説明』で解説していますので、ご参照ください。 追記（2020-03-20） この記事の内容を含む、筆者本人による『OAuth & OIDC 入門編』解説動画を公開しました！ 1. 認可コードフロー RF
【2017年度版】Webエンジニアでも最低限押さえておきたい、SEO施策のまとめと実装 - Qiita
Webエンジニアでも最低限のSEO知識を持っておきたい ferretやferretOneといったウェブマーケティングのメディア、ツールを開発、運営している株式会社ベーシックで働いており、近々ECサイトphocaseにて本格的にSEO施策を行うので、勉強がてらエンジニアが覚えておくべきだと思ったSEO周りの知識をまとめました。 この記事も書いていたら長くなってしまったので知らない部分をピックアップして読んでいただければと思います。 実装方法やSEO施策の詳細は貼ってあるリンクだけではなく、 別途Googleで検索するなどして複数の意見をインプットすることをおすすめします。 ###★この記事を読むとどうなるか マーケター、ディレクターとのやりとりがスムーズになる。 意図せず検索順位を下げてしまうコードに気づける様になる。 エンジニア側だけで動けるSEO施策を提案できる様になる。 なんとなくSE
CookieSyncを試してみる - adtech周辺に興味がある人の四方山話
ここまでDMPに関して、特にデータの収集面に関しての概要をまとめてきました。 CookieSyncについて オンラインデータの収集について オフラインデータの収集について ここまで来るとだんだん自分でも実装したくなってきます。実装方法は色々あるとは思いますが、CookieSyncを実際に試してみたいと思ったので、ものすごくシンプルな構成でCookieSyncを実装してみました。 構成とシナリオ 構成というほど大したものでは無いですが、以下の構成及びユーザーの動きを想定しました。 構成 siteA：DMPとCookieSyncを行いたいWebサイト ユーザー DMP：siteAのCookieSync相手 シナリオ siteAにはCookieSync用の1x1pixelの画像を仕込む ユーザーがsiteAに来訪 ユーザーにはsiteAのCookieがセットされる siteAからDMPに画像のリ
サーバーレスにWebビーコンをつくってみる。 - Qiita
まずおまじない置いておきます。 投稿内容は私個人の意見であり、所属企業・部門見解を代表するものではありません。 はじめに ネタ的には今更感あると思いますが、アクセス解析とかしたときにサーバーレスにつくってみたので 設定からDWHに突っ込むまでをまとめてみました。 Webビーコンとは？ Webビーコン型とは、サイトの各ページにJSや特殊なイメージ(縦横1pxの透明なgif画像など)を貼り付けておいて、貼り付けたページがブラウザで表示されるたびに、サーバーにユーザーがアクセスしたページの情報を送る仕組みのアクセスログ解析です。 Google Analyticsもこの手法が使われてたりしますね。 今回やること 各AWSサービスの設定からDBにアクセスログを貯めるところまでをまとめています。 構成は上記の図のようにいたってシンプルな構成です。 AWS CloudFront キャッシュさせてログとる
自社分析基盤の開発 - クライアントサイド編
はじめまして。リブセンスAnalyticsグループのエンジニアの小林と申します。 この記事は、以前ご紹介致しました「アクセス単位の分析を可能にする自社分析基盤開発の取組み」の続編となります。 弊社はもともとアクセス分析基盤としてGoogle Analyticsの無料版を使用しておりましたが、ユーザーのアクセス単位での分析を行おうとした場合、データがサンプリングされる問題やユーザーアクセス単位でのデータが取得できないという問題を抱えておりました。 この問題の解決方法として、Google Analytics Premium + BigQueryを採用するなど、いくつかの選択肢を検討いたしましたが、コスト面でスモールスタート出来ないため、自社開発することにいたしました。 アクセスログの収集方法としてはクリックイベントなどの機能拡張を踏まえ、Webビーコン型を採用しました。 今回の記事では、この自
第18回 HTML5で家計簿アプリを作る 設計と基本機能の実装
前回までは、日報アプリケーションを題材に解説をしました。 特に「入力系」のアプリケーション開発の際に役立つ フォーム要素について解説するとともに、 実装に役立つツールを紹介してきました。 第9回 HTML5で日報アプリを作る 実装編［1］ 画面の構造を定義する 第10回 HTML5で日報アプリを作る 実装編［2］ 画面のレイアウトを定義する 第11回 HTML5で日報アプリを作る 実装編［3］ 操作や処理を定義する 第12回 HTML5で日報アプリを作る 解説編［1］ HTML5の入力補助部品を使う 第13回 HTML5で日報アプリを作る 解説編［2］ レスポンシブWebデザインとBootstrapを使う 第14回 HTML5で日報アプリを作る 解説編［3］ 非同期処理とCSS Animationを使う 第15回 HTML5で日報アプリを作る ツール編［1］ 開発者ツールで生産性を向上する
クローラーとインデクサの制御 – 低価値のURLを除外するSEO
サイト運営者がクローラーとインデクサを制御する指示を出すことで、検索結果に表示されたとしても検索者に対してそれほど価値を提供しないページやファイルについて、あらかじめ検索結果に表示されることがないようにしておくことができます。これは検索者の体験を阻害しないようにするとともに、検索エンジンから低評価を受けないようにするための対策です。 クローラーとインデクサを制御する理由クローラーの制御とは、特定のURLをクローラーからブロックしたり、またはクロールはさせても検索結果に表示させないようにするなど、サイト内のコンテンツを検索エンジンがどのように取り扱うべきかの指示を明示的に行うことをいいます。 現在のクローラーは非常に高いクロール能力を持っており、検索対象としてインデックスするかどうかを別にすれば、公開されているほとんどすべてのURLをクロールすることができます。このことがSEOにとって不利に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Tondemodesign.com
PlaceIMG
IBM Developer
