計測できなかったフォーム遷移をGoogleタグマネージャ（GTM）で計測する方法 | SNBI - アクセス解析/マーケティングを中心に生きた知識をお届け
フォームの入力画面の到達状況や、フォームの各ステップ毎の到達状況や遷移率などを測ることで、「どのステップでユーザーが離脱しているか」を把握することがフォーム分析の第一歩になります。 ですが、入力画面・確認画面とURLが変わらないフォームがよくあります。 その場合、計測タグはURL別でアクセス数を計測するため、入力画面から確認画面に遷移しても2度同じページにアクセスしたことになってしまいフォームの各ステップ毎の到達状況や遷移率などを測ることができません。 今回は、Googleタグマネージャを利用しているフォームでの”仮想ページビュー”という技術を利用して、通常ではブラックボックスになってしまっていたフォームの各ステップ毎の計測を明らかにする方法をご紹介します。
より良い検索フォームのための９つのベストプラクティス
検索ボックスは入力フィールドと送信ボタンの組み合わせです。検索ボックスにデザインは必要ないと考える人もいるかもしれません。たしかに、たった２つの単純な要素でしかありません。しかし、コンテンツが多いサイトでは、検索ボックスは往々にしてもっとも頻繁に使用される要素なのです。 複雑なサイトに遭遇したとき、ユーザーは労力を使わずに素早く最終目的地まで辿り着けるように、すぐに検索ボックスを探します。ですから、検索ボックスのデザインやユーザビリティは重要なのです。 この記事では、ユーザーが目的地に辿り着くための時間を節約するために、検索ボックスをどのように改善できるかを見ていきます。
完璧なテキストフィールドのための14のルール
アプリやウェブアプリケーションは、ユーザーからの入力がなければ何も変化しません。プロダクトデザイナー、開発者、そしてプロダクトマネージャーがそれを理解することはとても重要です。 テキストフィールドは、ユーザーが短いテキストを入力するための基本パーツです。どのようなアプリでも、個人情報の入力を求める小さなテキストフィールドを必ず目にします。 この記事では、テキストフィールドを中心にデータ入力を改善する重要な要素について見ていきたいと思います。ただし、すべてのルールには例外があるということを念頭に置いておいてください。 わかりやすさ わかりやすいテキストラベル ユーザーはどんな種類のデータをフィールドに入力するべきか知りたいと考えます。明確なラベルテキストはユーザーにそれを伝えるメインの手段になります。もちろん、アイコンを頼りにフィールドの意味を理解することもあります。例えば、ユーザーが虫眼鏡
フォーム周りで覚えておくと便利なCSS Snippets - NxWorld
フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ
Mac用のiOSアプリのプロトタイプ作成ツールの決定版「Form」がGoogleパワーで無料解放！！ | ソフトアンテナ
Mac用のiOSアプリのプロトタイプ作成ツールの決定版「Form」がGoogleパワーで無料解放！！ 2014 11/20 Mac用のiOSアプリのプロトタイプ作成ツール「Form」(以前の価格7800円)が無料化されました(iDownloadBlog、9to5Google)。ドラッグ＆ドロップで素早くアプリのプロトタイプを作成することができるツールで、今のところiOSアプリの作成に対応しています We're excited to announce that we're joining Google to continue working on Form! :) http://t.co/JvsloB5ba1 — RelativeWave (@RelativeWave) 2014, 11月 19 公式サイトによると開発チームがGoogleに買収され、その影響で無料化されたそうなので、期間限定
DrupalのSQLインジェクションCVE-2014-3704(Drupageddon)について調べてみた
既に日本でも報道されているように、著名なCMSであるDrupalのバージョン7系にはSQLインジェクション脆弱性があります（通称 Drupageddon; CVE-2014-3704）。この脆弱性について調査した内容を報告します。 ログイン時のSQL文を調べてみる MySQLのクエリログを有効にして、Drupaのログイン時に呼び出されるSQL文を調べてみます。リクエストメッセージは以下となります（一部のヘッダを省略）。 POST /?q=node&destination=node HTTP/1.1 Host: xxxxxxx User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:32.0) Gecko/20100101 Firefox/32.0 Cookie: has_js=1; Drupal.toolbar.collapsed=0 Conn
Linuxのハードウェアに関する詳細情報を取得する『Inxi』コマンド | 俺的備忘録 〜なんかいろいろ〜
今回は、Linuxが搭載されているハードウェアのパーツごと、例えばサウンドボードやマザーボード、ハードディスク等のベンダーや型番といった詳細情報を取得出来るコマンド『Inxi』を紹介する。 1.インストール まずはインストールから。 以下のコマンドを実行しインストールを行う。 Debian/Ubuntu sudo apt-get install inxi RHEL系 sudo yum install inxi --enablerepo=epel 2.コマンドの実行 さて、それでは実際にコマンドを実行してみよう。まずはオプションを付けず、デフォルトの内容を表示してみる。 以下の内容は、実際に自宅で用いてるマシンのデータを表示している。 $ inxi CPU~Quad core Intel Core2 Quad Q9550 (-MCP-) clocked at 2833 Mhz Kernel~
入力フォームのプレースホルダーを使ってはいけない
入力フォームのプレースホルダーテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また、視覚や認知機能に障害のあるユーザーにはさらなる負担となる。 Placeholders in Form Fields Are Harmful by Katie Sherwin on May 11, 2014 日本語版2014年6月17日公開 コンテクストに沿った説明やヒントは、入力フォームのそれぞれに何が入るかを明確にするのに役立つ。その結果、入力が促進され、コンバージョンレートは向上する。ヒントの提供方法はいろいろとある。実装として一般的なのは、入力フォーム内に説明を入れるやり方だ。しかし、残念ながら、入力フォーム内のプレースホルダーはユーザビリティに役立つよりも損なうことのほうが多いことがユーザビリティテストでは繰り返し示されている。 ラベル
IE9以降でもHTMLフォームでファイル名とファイルの中身を外部から指定できる
昨日の日記「IE8以前はHTMLフォームでファイル名とファイルの中身を外部から指定できる」にて、福森大喜さんから教えていただいた内容として、ファイルアップロードのHTMLフォーム（enctype="multipart/form-data"）にて、アップロードするファイル名とファイルの中身を外部から指定できることを報告しました。この際にIE8以前という条件がありましたが、今度は、三井物産セキュアディレクションの望月岳さんから、「それIE9以降でもできるよ」と教えていただきました。既にご存じだったそうです。福森さん、望月さんという日本を代表するバグハンターから「秘伝のたれ」をおすそわけいただいたようで、興奮気味ですw まず、おさらいとして、IE8以前でのパターンは下記の通りでした（要点のみ）。 <form enctype="multipart/form-data" action="pro_ad
IE8以前はHTMLフォームでファイル名とファイルの中身を外部から指定できる
一昨日のエントリ『書籍「気づけばプロ並みPHP」にリモートスクリプト実行の脆弱性』にて、ファイル送信フォームに対するCSRF攻撃の文脈で、私は以下のように書きました。 通常のHTMLフォームを使ったCSRF攻撃では、Content-Typeをmultipart/form-dataにすることまでは可能ですが、ファイルの中身とファイル名を指定する方法がありません。従って、HTMLフォームによる攻撃経路はありません。 大半の方は、「ああ、そうだよね」という感じでお読みいただいたように思いますが、昨日サイバーディフェンス研究所の福森大喜さんから、「それIE8以前ならできるよ」と教えていただきました。福森さんの許可を得て、以下にPoCを公開します。 <form enctype="multipart/form-data" action="pro_add_check.php" method="POST"
Bootstrap用のフォームバリデーター実装jQueryプラグイン「BootstrapValidator」:phpspot開発日誌
Bootstrap用のフォームバリデーター実装jQueryプラグイン「BootstrapValidator」 2014年01月15日- nghuuphuoc/bootstrapvalidator GitHub Bootstrap用のフォームバリデーター実装jQueryプラグイン「BootstrapValidator」 BootstrapなサイトでのJSベースでのフォームバリデーションを実装できます。 Emailやクレジットカード等のよく使いそうなバリデーションや長さチェック等一般的なものまで実装されています。 リアルタイムバリデーションで使い勝手をよくしたい場合の１つの選択肢として覚えておいても良さそう 関連エントリ Bootstrapなサイトで使える星形レーティングプラグイン Bootstrap対応でレスポンシブなWYSIWYGエディタ「Summernote」 フリーで使えるフラットでハ
とほほのJavaScriptリファレンス - とほほのWWW入門
とほほのJavaScriptリファレンス [戻る] [索引] 基本編 JavaScript って何？ JavaScript とは？ JavaScript と Java の関係は？ ECMAScript とは？ JavaScript のバージョン ES5 の新機能 ES5.1 の新機能 ES2015(ES6) の新機能 ES2016(ES7) の新機能 ES2017(ES8) の新機能 ES2018(ES9) の新機能 ES2019(ES10) の新機能 ES2020(ES11) の新機能 ES2021(ES12) の新機能 ES2022(ES13) の新機能 ES2023(ES14) の新機能 まずは始めてみよう 準備するもの 「Hello world!!」と書いてみよう 時刻を表示してみよう 動く時計を表示してみよう JavaScript の書き方 <script>～</script>
無料でここまでできる→日本語を書くのに役立つサイト２０選まとめ
（例文／コーパス） ◯KOTONOHA「現代日本語書き言葉均衡コーパス」 少納言 www.kotonoha.gr.jp/shonagon/search_form 現代の日本語の書き言葉の全体像を把握できるように集められた約１億語収録の『現代日本語書き言葉均衡コーパス』をジャンルを指定したり、前後にくる言葉を指定した上で検索できる。用例を探したいときはまずここを当たる。 ◯コーパス検索ツールNINJAL-LWP for BCCWJ (NLB) nlb.ninjal.ac.jp/ 『現代日本語書き言葉均衡コーパス』を検索するために、国語研とLago言語研究所が共同開発したオンライン検索システム。上の少納言との違いは、名詞や動詞などの内容語の共起関係や文法的振る舞いを網羅的に表示できるところ。 たとえば「タバコ」を検索すると、用例が「タバコ＋助詞＋動詞」や「動詞＋タバコ」＋「タバコ＋助詞＋形容詞
[JS]かっこいいインタラクションを伴ったスマフォに最適な省スペース用フォームのデモ
先月の終わりにdribbbleで公開された時に、うわっかっこいいな！と思いチェックしていたコンセプトにデモとして動作するスクリプトが開発されたので紹介します。 まずは、dribbbleでのコンセプトから。 [GIF] Mobile Form Interaction フォームの入力欄の各ラベルをプレースホルダーテキストとして表示し、タップして入力する時に、アニメーションでそのテキストがふわりと上に移動し小さく表示されます。 これはスマフォでは特に重要な省スペースとしても優れており、また入力後にそれが何の項目であったかユーザーに伝えることができます。 で、そのコンセプトにインスパイアされて開発されたスクリプトが「JVFloat.js」です。 デモのキャプチャ ※デモはダウンロードファイルに含まれています。 アニメーションのブラッシュアップやコードの最適化など宿題があるそうですが、実装はこんな感
jQuery Mobileによる問い合わせフォームの作成 (1/5)
jQuery Mobileによるスマートフォンサイトの制作方法を解説する本連載。前回に続き、簡単な会社案内サイトを作成ながらjQuery Mobileの基本を学びましょう。今回は、jQuery MobileのフォームUIを使って、以下のような「お問い合わせ」ページ（#contact）を作成し、会社案内サイトを完成させます。 フォームUIの課題とjQuery Mobileによる解決 スマートフォンのブラウザーに標準で用意されているフォーム部品はどれもサイズが小さく、そのままでは指による操作に適しません。スマートフォンサイトの制作ではフォームをスマートフォンに最適化することが重要です。 以下は、jQuery Mobileを使わずに作成したお問い合わせページをiPhone/Androidで表示したものです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
http://www.saitolab.org/taiken/
新着記事
AngularJSを使ったシンプルな請求書発行ツール・「Simple Invoicing」
CustomElements.io - Building the Future of the Web, One Custom Element at a Time