JSON Schema で複雑な仕様の入力フォームの実装に立ち向かった話
Ruby on Rails を用いたシステム上で入力フォームを実現する際、Rails が提供しているフォームヘルパーを利用した実装や、React や Vue によるコンポーネントの自前での実装が一般的に行われます。 ここで、職業で学生を選択した場合は学校名と学年、会社員を選択した場合は役職と年収を…
Ruby on Rails を用いたシステム上で入力フォームを実現する際、Rails が提供しているフォームヘルパーを利用した実装や、React や Vue によるコンポーネントの自前での実装が一般的に行われます。 ここで、職業で学生を選択した場合は学校名と学年、会社員を選択した場合は役職と年収を…
みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？ 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ
節約のために家計簿をつける。いいことです。 でも、節約するのが目的なのに、家計簿アプリにお金を出すって、ちょっと本末転倒な感じがしませんか？ しかも、自分に合う家計簿アプリを見つけるために、いくつも購入しては使わなくなってしまったら・・・。それこそ、アプリの購入代金がもったいないですよね。 「そうは言っても、フリーで自分にピッタリの家計簿アプリが見つからないんだよ」 こんなお悩み、持っている方も多いはず。 入力項目を変更したい、ユーザーインターフェイスが気に入らない、PCとの同期やデータのエクスポートの機能が欲しい・・・ 理想の家計簿アプリは、人によって様々ですよね。 それなら、自分にぴったりの家計簿アプリを、自分で作っちゃえばいいじゃない！ というのが、今回のアプリDIYです。 とはいえ、いきなりプログラミング言語を持ち出して、イチから構築するというのは現実的ではないので、Google
IPA ISEC セキュア・プログラミング講座：Webアプリケーション編 第1章 総論：より良いWebアプリケーション設計のヒント
ここで述べるのは、脆弱性が生まれにくいWebアプリケーションを構築するために設計段階、あるいはそれ以前の段階で考慮しておくとよい事項の例である。 (1) 開発環境の選択 1) プログラマが脆弱性をつくり易い環境を避ける 今日のWEBアプリケーション開発環境は、プログラミング言語の処理系に加えて、開発フレームワークやコンテンツ管理システム（CMS）、さらに外部のテンプレート言語までを加えた総合的な環境となってきている。 短時日で素早くサイトを立ち上げることを目的として、「軽量言語」と呼ばれる各種スクリプト言語が標準で備えているWEBアプリケーションを手軽に開発するための機能やライブラリをそのまま利用することは悪くない。しかし、その手軽さ故に、セキュリティの観点からは多くの脆弱性を生んできた経緯がある。 例えば、下記の事例が挙げられる。 PHPの4.1以前のバージョンの環境は、「registe
Mozilla Re-Mix: もうログインパスワードは覚えなくてもいい？OpenIDを使ってログインやフォーム記入情報を管理できるFirefoxアドオン「Sxipper」
パスワードマネージャは、Firefoxに標準で備わっている便利な機能の一つですが、これだけでログイン管理を行うこのは十分とは言えません。 このログイン機能を補うために各種アドオンがリリースされていますが、その中でもかなりの高機能を持っているのが「Sxipper」です。 「Sxipper」は、OpenIDと呼ばれるユーザーID認証システム（MSやSunなども対応）をサポートした拡張機能で、Firefoxにあるログイン情報を利用しながら、Webサイトごとに異なるログインを安全・簡単にしたり、フォームへのデータ記入を簡素化してくれます。 「Sxipper」をインストールし、Firefoxを再起動すると、アカウント作成を行うためのウィザードが別窓で開きます。 Nextをクリックしていけば、ライセンス情報、プライバシーポリシーなどが表示され、アカウントで利用するイメージアイコンの選択、アカウントネー
※ "意外と知られていないか"の基準は筆者の主観です。 ※ 動作確認環境は、MacOSX Yosemite、プレビュー v8.0です。 ※ MacOSX Sierra, プレビュー v9.0で動作確認しました。 ※ mac OS Mojave, プレビュー v10.1 で動作確認しました。 更新履歴 2019/03/06 macOS Mojave 10.14.1 での動作を確認 2017/05/01 Mac OS Sierra での動作を確認 2016/10/12 7. クリップボードから開く 2016/09/27 6. 画像を回転させる 2016/09/27 5. PDFを暗号化する 2016/09/27 4. PDFのファイルサイズを圧縮する 1. インスタントアルファ😄 同じような色のエリアを選択し透過してくれる機能 これを何回かやってみると？ ポテトチップスの袋もあっという間にで
■ 「VeriSignシール」という幻想 オレオレ証明書ではないSSLサーバ証明書は、2つの独立した機能を果たしていると言える。1つ目は、SSLプロトコルによるサーバとクライアント間の暗号化通信のために不可欠な役割であり、2つ目は当該サイト運営者の実在証明の機能である。ただし、今日では、後者を含まない、前者だけのサーバ証明書もある。 後者の実在証明は、かつては認証局サービスを提供する各事業者がそれぞれの独自の基準で、サイト運営者の実在性を確認、認証していたが、それでは利用者にわかりにくいことから、認証の際の実在性確認の方法が標準化され、誕生したのがEV SSLであった。 その結果、VeriSignなど、古くから実在証明に力を入れていた認証局サービスでは、EVのものとEVでない実在証明付きサーバ証明書の2種類が存在することとなった。VeriSignでは、EV証明書の提供開始後も、EVでない実
Form field hints with CSS and JavaScript (Ask the CSS Guy) My co-workers pointed out a nice effect on the Vox registration form. 入力フィールドにカーソルを合わせた際に吹出しヒント表示するCSS＆JavaScriptサンプル。 次のように、入力フォームにカーソルを合わせた時点でそのフィールドのヒントを表示できます。 フォームの入力フィールドの下に説明を書くよりも、ポップアップしてヒント表示したほうがユーザビリティ的によさそうですね。 要素の表示/非表示処理をJavaScriptによって行っていて、綺麗なHTMLによる実装が可能な点もいいです。 また、サンプルが1ファイル＋画像1枚とシンプルなので、あまりJavaScriptやCSSの知識のない方でも、ちょこっと変え
Backlog 開発チームの saki です。仕事は Scala と Java ですが、Ruby や JavaScript などのいわゆる動的型付け言語も好きです。最近はフロントエンドに興味がありプライベートで Vue.js を触っています。 Vue はプログレッシブフレームワークを謳っており、その名の通り最初は小さく導入でき、ソフトウェアの成長に合わせて他のライブラリを組み合わせることで規模の大きい開発にも利用できる柔軟さが気に入りました。ドキュメントも充実しており学びやすいと思います。どのライブラリも自分が一番と宣伝する中で、他のフレームワークとの比較 のページには誠意を感じました。 今回はそんな Vue を使って、かんばんライクなタスク管理アプリの簡単な作り方を紹介します。アウトラインは以下です。 基礎の作成 状態別にタスクを抽出する処理を作成 task-card コンポーネントの作
» 【実録】ついに「偽の激安ECサイト」に騙され個人情報をぶっこ抜かれた！ ニセ通販サイト詐欺の一部始終と防止策 特集 「不覚だ……」 これまで、数々の大手カード会社や民間サービスを騙（かた）るフィッシング詐欺の潜入し、その防止策をお伝えしてきた自称「ネット詐欺撲滅隊長」の私（耕平）だが、この度とうとうヤラかしてしまった。 そう、ネットで初めて個人情報を抜かれてしまったのである。しかも今回はフィッシング詐欺ではなく、ECサイトを装った詐欺サイトだ。 幸いにして金銭を騙し取られる一歩手前で気づくことができたが、私のような被害者を出さないため、ニセ通販サイト詐欺の一部始終と防止策をお伝えしたいと思う。 ・激安ECサイト この詐欺に遭ってしまったきっかけは、部屋の模様替えを考えていて、新しい家具を探していた時だった。 その際に「ダイニングチェア」を買い換えようと思いネットで探していたところ、『J
「雑に立てられるissue」で疲弊しないためにOSS開発者ができること - 2021-12-04 - ククログ
要約：OSS開発プロジェクト運営者の側でとれる対策はいくつかあるよ。issueは基準を設けてどんどん閉じてしまおう。GitHubならActionsで自動化も簡単だよ。自動テストを整備するように、必要なコストだと思って割り切るといいよ。 結城です。 GitHub Actionsに関することならなんでもありらしいアドベントカレンダーとのことでしたので、ほんのちょっとかすっているだけではありますが、4日目にエントリーさせて頂きます。 「軽率に寄せられる報告や要望がOSS開発者を疲弊させる」という問題について語るOSS開発者は少なくないです。私の観測範囲内では最近も、イシュートラッカーにissueを立てようとすること自体に待ったをかける記事1や、「要望には初手で『なぜ自分で実装しない？』と訊ね、次に『継続的にメンテナンスしてくれるの？』と訊ねるドライな対応がおすすめ」という趣旨に受け取れる発言など
【堀江貴文氏インタビュー】丸投げして任せることができるなら、それに越したことはないんです。 - リクナビNEXTジャーナル
マネジメントをするうえで、意識すべき視点とは何か？ 業績に貢献する人材を育てる秘訣とは何か？ マネジメントに必要なスキル・ノウハウについて、現在第一線で活躍中の経営者・人事のプロにインタビュー。前回に引き続き、SNS株式会社ファウンダー、株式会社7gogoファウンダーの堀江貴文さんに伺いました。 ほりえ・たかふみ：SNS株式会社 ファウンダー、株式会社7gogo ファウンダー ＜プロフィール＞ 1972年、福岡県生まれ。東京大学在学中の1996年にインターネット関連会社のオン・ザ・エッヂ（のちのライブドア）を起業し、2000年に東証マザーズに上場。2004年から近鉄バッファローズやニッポン放送の買収に乗り出し、起業家ブームの象徴として注目される。2006年、証券取引法違反で逮捕され、懲役2年6カ月の実刑判決が下る。獄中からも情報発信を続け、服役後は民間ロケット開発を行うSNS株式会社や、ス
【ゲスト寄稿】ずっと使われるサービスを作るうえで、大切にしている3つのこと | Startup Dating [スタートアップ・デイティング]
この記事をゲスト寄稿してくれたのは閑歳孝子さん。現在ユーザーローカルにてWebサービスの開発に携わる。日経BP社で専門誌の記者・編集を3年経験した後、知人が立ち上げた Web系ベンチャーに転職。ブログやSNSの自社パッケージ開発を手がけた後、2008年より現職でWebアクセス解析ツールの開発・企画・UI ・デザインなどを担当。 こんにちは、はじめて、閑歳孝子（かんさいたかこ）と申します。株式会社ユーザーローカルにてアクセス解析ツールを開発する傍ら、個人制作としていくつかサービスを運営しています。最近リリースしたものとしては、クラウド家計簿サービス「Zaim」があります。 2011年7月にiPhone版、2011年11月にiPad版、そして2012年3月にAndroid版を発表。幸運なことに多くのユーザーに継続してご利用いただいており、合計して約11万ダウンロード、入力されたお金の情報は30
Vue + TS に触れて2週間でシングルページアプリケーションを作ってリリースした話 - GS2 Blog
みなさん、こんにちは。GS2の丹羽です。 本日 Game Server Services は次世代版のベータテストを開始しました。 これまで提供していた GS2 を GS2 Classic と呼び、次世代版 GS2 を単に GS2 と呼びます。 gs2.io GS2 のリリースにあたっては非常に多くの新しいチャレンジを行いました。 それについては少しずつブログや登壇を通じて皆さんにお伝えしていきたいと思います。 今回は、GS2 のマネージメントコンソールをシングルページアプリケーションとして作りました。 しかも、Vue + TypeScript に触れて2週間で。というトピックで振り返ってみようと思います。 なぜ Vue + TypeScript にいたったか GS2 Classic のマネージメントコンソールは Google App Engine を使用していました。 弊社はフルサーバレ
HTML5 × CSS3 × jQueryを真面目に勉強 – #15 Evernote風タグ登録コンポーネントを作ってみた | DevelopersIO
ちょっとした備忘録といったメモには Evernote を使っています。一時期に比べると使用頻度は少し落ちましたが、それでも使っています。地味なところですが、Evernote のタグ登録 UI が結構好きなのが理由の一つでもあります。 Web メールにおいては基本的に受信がメインで送信といっても殆どが返信で済んでしまっていますが、 Gmail を使っています。Gmail は非常に早いサイクルで機能や UI が刷新されまくっていますが、いつの頃から送信先、Cc、Bcc 入力のUIがまるでタグのような見た目とインタラクションになりました。この両者の UI はとても良く似ており、単純なカンマ区切りの文字列よりも視認性が高くて個人的に気に入っている UI の一つです。 そんな訳で、このタグ登録のUIコンポーネントを作ってみました。前回、jQuery UI Widget の作り方について学んだわけです
こんにちは。コワーキングスペース7F運営代表者の星野邦敏です。 この記事は、コワーキング Advent Calendar 2013として、東京都三鷹市のコワーキングスペース「ミタカフェ」の山田さんからリレーを引き継ぐ形で、記事を書きます。 コワーキング雑感- Yamada Ritsuko ちなみに、明日は、愛知県名古屋市のコワーキングスペース「ベースキャンプ名古屋」の日比野さんです。 ひびの備忘録 さて、コワーキング Advent Calendar 2013の記事として、何を書こうかなと思ったのですが、この１年間、コワーキングスペースの運営代表者として取り組んできて、思うこと色々を書いてみようと思います。 早いもので、2012年12月1日に、埼玉県さいたま市の大宮駅東口徒歩１分の所で、65坪・215平米の広さで「コワーキングスペース7F」の運営を始めてから、１年ちょっとが経ちました。 もと
日本Rubyの会代表である高橋征義さんによって考案されたむやみに大きな字が特徴的なプレゼンテーション手法「高橋メソッド」を使ったプレゼンのスライドを文字を入力すれば自動的に作成してくれるネットサービスが「高橋メソッドジェネレータ」です。高橋メソッドと高橋メソッドジェネレータの使い方については以下から。 高橋メソッドジェネレータ http://funatti.co.cc/takahashi_method/index.php 高橋メソッド http://www.rubycolor.org/takahashi/ 高橋メソッドとは、「文字は大きく」 「人にやさしく」といったプレゼンの手法です。 高橋メソッドについてさらに詳しく知りたい場合は、公式サイトの「高橋メソッドについて」をクリックすれば高橋メソッドを説明したスライドが閲覧できます。 「でかいプレゼン 高橋メソッドの本」として販売もされていま
2024年のブラウザならCSSの:has()疑似クラスが使えます。この:has()疑似クラスは非常に強力なポテンシャルをもっています。というのも:has()疑似クラスを使えば、どんな関係のセレクターも指定可能になります。これを使えば多彩なセレクターが記述できるようになり、より表現力豊かなCSSを実現できます。この記事では:has()疑似クラスを使ったCSSの表現手法やテクニックを紹介します。 サンプルを別ウインドウで開く コードを確認する :has()疑似クラスの基本的な使い方 :has()疑似クラスの使い方について簡単に説明します。:has()疑似クラスは渡したセレクターを持つ親要素を選択します。たとえば、次のようなHTMLとCSSがあるとします。 <p class="text"> <strong>メロス</strong>は激怒した。必ず、かの邪智暴虐の王を除かなければならぬと決意した。
いかにしてパスワード認証を脆弱にするか。プログラミング黎明期からずっとデベロッパーの頭を悩ませ続ける問題です。 ここでは脆弱なパスワード認証を実現するための方法を紹介します。 パスワード自動入力の禁止 不届きなブラウザがパスワードを記憶してしまうことがあります。 パスワードは間違いの無いように、ひともじひともじ、人間が入力するべきです。 <input name="pw" type="password" autocomplete="off" /> とするのは常識ですね。ブラウザのパスワード管理機能より、脳内の文字列の方がずっと安心です。 フォームを動的生成、AjaxでPOST cursor: textスタイルで偽input などで、ブラウザのパスワード保存をスキップする方法もあります。 パスワード貼り付けの禁止 貼り付けも自動入力と同罪です。onpaste属性を利用して <input nam
ユーザーが「使いやすい」と感じるアプリケーションは、良いUIデザインで設計されているともいえます。良いUIデザインでは、ユーザーの認知負荷を下げる工夫がされています。認知負荷を下げる仕組みを知るには、心理学とUIデザインの密接な関係を理解することが重要です。 行動心理学や認知心理学の発展により、人間の感情や行動は、脳の仕組みに基づいて様々な法則に当てはめられることが分かってきました。UIデザインでも、心理学を活用したアプローチでより良いユーザー体験を生み出すことができます。特に業務システムのような複雑なアプリケーションでは、メニューや画面レイアウトなど幅広く活用できます。 今まで心理学はマーケティング領域で応用されることが多く、ウェブサイトやアプリケーションのUIデザインで語られることはそれほど多くありませんでした。そこで本記事では、人の様々な心理現象や認知の法則を、UIデザインに活用する
達人プログラマーを目指して
本日、日本Javaユーザーグループ（JJUG)主催のCCC 2014 SpringというJavaの勉強会に行ってきました。会場は、ベルサール西新宿で、都営大江戸線都庁前のA5出口を出て、新宿中央公園の5分くらい歩いたところにありました。今はスマートフォンで地図を確認しながら行けるので、初めての場所でも方向音痴の私でも電車の駅さえ間違わなければ大丈夫ですね。 CCCというのはCross Community Conferenceの略で、さまざまなコミュニティーの交流の場となる会議という趣旨でしょうか？このCCCというイベントは2012から開催されているようなのですが（CCC | 日本Javaユーザーグループ）、今回初めて参加させていただきました。残念ながら個人的な都合から、基調講演と午後の前半のセッションのみで後半と懇親会には参加できませんでしたが、参加したセッションについてまとめます。その他
Go言語とは、Googleが開発した新しいプログラミング言語です。 当サイトではこの新しい言語についての情報を集約していきます。 このサイトの更新が滞っており、情報が古くなっておりますのでご注意ください。 はじめに Goは新しい言語です。既存の言語からアイデアを取り入れてはいますが、他の言語にはない機能をもっているため、実際に記述されたGoのプログラムは、他の類似した言語とはだいぶ異なるものになります。C++またはJavaプログラムをGo言語へ直接変換しても、あまりうまくは行きません。JavaのプログラムはあくまでJavaで書かれており、Go言語で書かれてはいないからです。一方で、Go側の視点からこの問題を考えると、変換に成功したとしても、全く違うプログラムができてしまうことになります。言い換えると、Go言語を使いこなすには、Go言語の機能や文法を理解することが重要です。おなじく、Go言語
0 0 173 0 万が一パソコンが壊れた時に備え、パソコンに保存してある iTunes の音楽のバックアップを取りたいと思われている方も少なくないのではないでしょうか。また、音楽のデータが大きすぎてパソコンのハードドライブの容量が圧迫されており、「どこか別のストレージで保管したい」とお考えの方もいらっしゃるでしょう。 そのような方々のために、今回は iTunes の音楽を Dropbox に転送する方法を紹介します。 iTunes の音楽を Dropbox に転送することによって、データのバックアップを取ることができます。それだけでなく、スマホの Dropbox アプリから音楽が聞けるなどのメリットがあります。 今回は、 iTunes の音楽を Dropbox に転送するメリットとは？ iTunes の音楽を Dropbox に転送する方法 Dropbox の容量が足りなくなったら？無料
「日中文化交流」と書いてオタ活動と読む : みんなが持ってる通報ボタン 中国の無職転生配信中止に関する炎上は更に拡大
2021年02月12日19:05 カテゴリオタクin中国アニメ みんなが持ってる通報ボタン 中国の無職転生配信中止に関する炎上は更に拡大 先日の第一報の記事の後、 中国で「無職転生」が配信中止になった模様 たくさんのネタのタレコミや質問をいただいておりますので続報まとめ的な物をやってみようかと思います。 まず中国のbilibiliで配信されていた1月新作アニメ「無職転生 〜異世界行ったら本気だす〜」が配信中止になった件に関しては大体以下の流れのような経緯で発生してその後の混乱につながった模様です。 ・「無職転生」は日本のネット小説系作品としては中国のオタク界隈における原作の評価が非常に高く1月の新作アニメにも注目が集まっていた所に、期待以上のクオリティでのアニメ化によって非常に良いスタートを切る。 ・中国では1月のシーズンにおけるいわゆる覇権作品候補クラスの人気にもなり「なんであんな下品な
Google Analytics 4 以外でウェブサイトを分析・改善するための無料ツール群とオウンドメディアでの活用法（寄稿：小川卓） - はてなビジネスブログ
株式会社HAPPY ANALYTICSの小川卓（id:ryuka01）です。 Google Analytics 4はアクセス解析ツールのスタンダードとして、多くの企業やサイトに導入されています。しかし利用ハードルが高いのもまた事実です。数多くあるレポートや、自由度が高すぎて迷ってしまう探索レポート、独自の用語なども沢山あり、利用に苦労されている方も多いのではないでしょうか。 そこで、GA4以外でウェブサイトのユーザー行動を理解し、サイト改善するためのツールを厳選して紹介します。今回紹介するツールは無料で利用できるものをピックアップしています。無料プランと有料プランの両方があるサービスの場合は、その旨を記載しています。また、無料でも期間限定のサービスは追加していません。 数多く紹介することを目的とせず、全て筆者が利用している（あるいは利用経験があるもの）に絞り込み、その中で良かったと思うツー
テーブルレイアウトとはテーブルタグを、左のようにセルを切ってレイアウトするもの。そもそもはテーブルタグは表に使われるものであって、レイアウト目的で使うべきではないという意見はごもっともなものの、きっちり幅指定や余白指定ができてブラウザ依存しにくいことから、企業サイトはもとよりいろいろなサイトに使われておりました。いや、今でも立派に使われています。 対してCSSレイアウトは、上と同じレイアウトをHTML（XHTML）＋CSSで表現するもの。こんな感じです。記述は一例として適当に書いてるんで、アテにしたり突っ込みいれたりしないでくださいね(笑)。 【HTML】 <div id="header"> <h1>毎日考ブログ（ヘッダ部分）</h1> </div> <div id="main"> <div class="menu">メニュー部分</div> <div class="contents">本
なんでも継続
Shiro Kawai まだ下書き Schemeの特徴をあげるときに、「継続」や「call/cc」が出て来ないことはない。 でも、R5RSのcall/ccの項をいくら読んでも、どうもよくわからない。 call/ccを使えばC言語のbreakみたいなのとか、コルーチンとかいう スレッドもどきとかが書ける、というのはわかったけど、一体そういうのが書けて 何が嬉しいのか、そこんとこがピンと来ないんだ。 今、そこにある継続 プログラミングの世界の概念には、禅の公案のようなものがある。 それを説明する文章はほんの一文なのに、最初に目にする時、 その文は全く意味をなさない、暗号のように感じられる。 だがひとたびその概念を理解すると、 その概念の説明は確かにその一文で説明されているのがわかるのだ。 そんな、「分かれば分かる」という禅問答の中でも 「継続」は最も謎めいたものの一つと言えるだろう。 文献を
この記事では、普段のホームページ制作で直面しがちな課題を解決するCSSテクニックをまとめて紹介しています。 クライアントからの要望も多いCSSの小技テクから、「これがCSSだけでできるの？」と疑いたくなるような最新の使い方まで、実例やサンプル用ソースコードと一緒に確認できます。 ここで紹介されているCSSテクニックを利用すれば、これまで頭を抱えていた問題や課題も、一発で解決できるかもしれません。 コンテンツ目次 1. 入力フォームをカスタマイズしたい 2. ナビゲーションメニューを使いやすくしたい 3. ボタンを目立たせたい 4. リンク用エフェクトにこだわりたい 5. スクロールバーをサイトの色で統一したい 6. ドロップシャドウの影にもこだわりを 7. グラデーションをビンテージ風にしたい 8. CSSで要素を中央寄せする5つの方法 9. ブラウザごとのデザインのずれを防ぎたい 10.
主にバックエンドのエンジニアとしてクックパッドマートの開発に携わっている塩出（ @solt9029 ）です。 美味しい食材をユーザにお届けするサービスであるクックパッドマートでは、日々街の販売店や地域の生産者が商品の登録を行っています。 商品を登録する際、販売者は消費期限をはじめとする様々な品質保証の情報を正確に入力する必要があります。 しかし、商品の種類や状態に応じて記載するべき品質保証の情報は異なるため、全項目が羅列されるフォームでは正確な入力が困難であり、販売者および商品の審査を行う社内の運用メンバに対して大きな負担をかけていました。 そこで、 JSON Schema を利用して複雑なフォームの出し分けを自動で制御し、またバックエンド側でのバリデーションも行うことが出来る仕組みを導入しました。 その結果、商品の種類や状態を選択するだけで、適切な品質保証の情報が自動的に入力され、必要な
入力フォームのユーザビリティ&アクセシビリティ！
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
1時間1円から使えるSSD VPS、DigitalOceanことはじめ - yutaponのブログ
DigitalOceanといえばSSD VPSなのに1時間当たり約1円弱で使える格安VPSとして有名です。 有名な紹介記事はこちら。 徳丸浩の雑記帳: 試験環境用VPSとして1時間1円から使えるDigitalOceanが安くて便利 VagrantとSSDなVPS(Digital Ocean)で1時間1円の使い捨て高速サーバ環境を構築する - Glide Note DigitalOceanのことはrebuildfm#2で知って興味持ちました。 Rebuild: 2: Rails, Redis, VPS (Kenn Ejima) それまでVPSといえばさくらVPSがメジャーだと思ってましたが、 調べてみるとDigitalOceanがなんとも良さ気です。 今回はDigitalOceanの登録から簡単な使い方を説明します。 こちらのリンクから登録していただくと、私に少しバックがあるようです。 Di
Webマーケターの人向け・すぐに使えるグロースハックツール30選 - Kaizen Platform Blog
最近、様々な切り口から「Webサービスのグロースをサポートするツール」が増えてきています。 ツールも日々進化を遂げており、これまでは高度なスキルが必要とされた業務、タスクについても、“視覚的に”、“簡単・シンプルに”設計され、非常に使いやすいものが多くなりました。 そこで、今回の記事では、誰でも簡単に、すぐに試せるグロースサポートツールにフォーカスして、30のツールをご紹介をしていきます。 サイトへの流入数を増やすツール 1. Colibri.io 自社の顧客がオンライン上のどこにいるかを把握することで、注力すべきメディアを特定し、より効率的なユーザー獲得を手助けするツールです。 自社の見込み客がいる場所、注力すべきメディアが把握できる 各メディアのソーシャルリーチを一括で管理、分析できる 14日間の無料トライアル期間あり / 月額45ドル〜利用可能 2. Pay With A Tweet
UXとか難しいことはよくわかんないですが こんにちわ！@ampersand_xyzです。UXとかUIデザインとか、かしこさが低いので小難しいことはわからないですが、個人的にかつ主観バリバリで「イヤだな」って思うことはわかる！ 飛行機やホテルの予約などで、ちょいちょいお問い合わせフォームや予約フォームを使うのだけど、その時に思わずイラッとしちゃうようなフォームの要素を思い出してまとめてみました。 （1）要件的に適切でなさそうな必須項目が多い 名前や返信先などの情報が必須になるのはそれはもちろん構わないけれども、 所属部署名、とか、業種、とかそういうのが必須の場合。 もちろん、問い合わせる先やその内容によって、 例えば、保険等に関する問い合わせだと業種によって契約の内容が違ってきたりするので必須になるのは頷けるけれども、これが食べ物の通販の問い合わせフォームとかで必須だったら「？」って感じる。
UXライティングとは | UXライティングガイド
UXライティングとは何か UXライティングとは、ユーザーがデジタルサービスを操作する際に必要となるテキストを書く技術です。例えば、登録時のスタートガイド、利用の流れコンテンツ、タイトル、ボタン、画面上の説明文、エラーメッセージ、通知などの言葉がUXライティングの手法に則って書かれます。サービスの中にある言葉に対して「意味が通じればいい」という思想で書くのではなく、「ユーザーがサービスを通じて体験する一連の経験を設計する」という思想で書くのがUXライティングです。 UXライティングに求められる技術とは UXライティングには、分かりやすく書く技術と、人間らしく書く技術が必要です。この二つの技術が同居することによって、ユーザーの体験を支援することができます。 分かりやすく書く技術 UXライティングの手法に則ってテキストを書く際に求められるのは、「ユーザーの気持ちに沿った文章を書く」という抽象的な
定期的に繰り返される話題ですがまた盛り上がっているのできちんと書いておきます。 「通るべきメールアドレスが弾かれると激おこ」という前提で話を進めます。 問題点1. メールアドレスに関して、RFCなんてそもそも守られていない 2009年以前に登録されたDoCoMo携帯のメールアドレスなど、quoted-stringじゃないのにピリオド連続するものが実在している以上、彼らを許容するべきです。 今そこにある実装 >>(越えられない壁)>> RFC です。 問題点2. メールアドレスの国際化 @の左側(addr-spec)でUTF-8を利用できるようにするRFC5335が発行されています。これにより、通すべき文字が一気に増えます。 RFC5335 Internationalized Email Headers JPRSが国際化電子メールアドレスの標準化活動に貢献 / 株式会社日本レジストリサービス
昔、Rubyでクローラー/Webスクレイピングの本を書きました。今でもちょくちょくとスクレイピングのコードを書いたりはするのですが、実行基盤についてはサーバの運用管理が面倒くさいのでAWS Lambdaを使うことが多いです。そうなると、Lambdaは基本的にはRubyが使えないので、言語はPythonかNode.jsを利用することになります。Pythonもいいけど、今後のことを考えるとNode.js力を高めておきたいと考えています。ということで、Node.js縛りでスクレイピングの仕方です。 スクレイピング対象のページの種類 私の中の勝手な定義ですが、スクレイピングには3種類あります。 1. 静的サイト／JavaScript不要なページに関するスクレイピング 2. 対話型サイト／JavaScript不要なページに関するスクレイピング 3. JavaScript前提のページに関するスクレイピ
Excel(エクセル)基本講座目次 [Excel基本講座へGO!] 各項目毎に詳細に説明しています。 基本的な使い方を忘れたときに便利? 基本操作(一般操作) はじめに Excelの起動と終了 Excelの画面構成 シートの操作 標準シート数の変更とシート名の変更 シートの追加と削除および非表示 シートの移動とコピー 複数シートの操作 シートの保護 セルの操作 アクティブセルの移動 セル/列/行の選択 セル幅/高さの調整 セル/行/列の挿入と削除 セル/行/列の挿入 セル/行/列の削除 セルをコピーする方法 セルを移動する 書式の設定方法 フォント(文字)の設定方法 文字の配置 罫線の設定方法 セルの塗りつぶし/パターン・網かけ データ/数式/関数の入力 データ(数値/文字列)の入力方法 数式と関数の入力方法 相対参照と絶対参照および複合参照 文字や数式の修正方法 オートフィルの使い方 フ
実案件から学んだ、本当に役立つUIデザインの法則50 ユーザビリティチェックリスト総集編｜i3DESIGN Designers
「ユーザビリティチェックリスト」ということで、UIデザインの「あるある」を取り上げ、改善案とセットでまとめています。 今回は、10のヒューリスティクスをもとに分類してみました。10のヒューリスティクスについては、以前記事にまとめています。 具体的な事例を一緒に取り上げ、よりわかりやすく解説していますので、こちらもあわせてご覧ください。 また弊社ホームページにて、ユーザビリティチェックリストをダウンロードいただけます。こちらも合わせてご活用ください。 1. システムステータスの可視化（Visibility of system status）1-1. 入力項目が多いときはステップを分けるフォームの入力項目が多い場合は、項目をグルーピングして画面を分割しましょう。 フォームが長すぎると、ユーザーは入力を途中で辞めてページから離脱してしまうかもしれません。 その上で、ステッパーを設置して現在の進捗
Javaウェブフレームワーク「Wicket」の使い方
目次 目次 気持ちのいいウェブプログラミング Wicketの使いどころ Wicketの考え方 まずはダウンロード インストール おなじみの設定 - Javaサーブレットとしての設定 Wicketアプリケーションの作成 Pageクラスの作成 Wicketのモデルとモデルオブジェクト モデルへの値のセットと検証 フォーム全体の検証 メッセージを変える フォーム毎にメッセージファイルを持つ まとめ 次回は... ご意見などは... 気持ちのいいウェブプログラミング このページでは、ウェブ・アプリケーション・フレームワークWicketの使い方について紹介します。Wicketの特徴は「HTMLとJavaだけですべてが完了する」ということでしょう。 Struts以降、ほとんどのウェブ・アプリケーション・フレームワークはJSP + Java + XMLで構成されて
Reactでウェブフォームを作る2021
Webのフォームは、いつでもベストプラクティスを悩むものの一つです。React を使うとして完全に自作でやるのか？それともフォームライブラリを使うか？フォームライブラリならどれを使うか？ 今の時代 Formik を選ぶ理由はありませんが、React Hook Form と React Final Form のどちらを使うかはとても悩ましいです。 React Hook Form は利用経験者・採用実績が多い、速度が速いなど様々な利点はありますが、React 哲学に反する作りなどクセの強さが難点です。あと良くも悪くも利用シーンが豊富でドキュメントも豊富で迷子になりがちです。 React Final Form は Final Form の React wrapper です。個人的にはこちら React 的使いやすさに反すると感じてること、React Final Form として見たときにドキュメ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
今どきの入力フォームはこう書く！ HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA
家計簿アプリの購入、ちょっと待った！ Google Docsで理想の家計簿アプリを自作する | シゴタノ！
Mac標準「プレビュー」の意外と知られていないTips - Qiita
高木浩光＠自宅の日記 - 「VeriSignシール」という幻想
入力フィールドにカーソルを合わせた際に吹出しヒント表示するCSS＆JavaScriptサンプル:phpspot開発日誌
Vue.js でかんばんライクなタスク管理アプリを作ってみました。 | 株式会社ヌーラボ(Nulab inc.)
【実録】ついに「偽の激安ECサイト」に騙され個人情報をぶっこ抜かれた！ ニセ通販サイト詐欺の一部始終と防止策
コワーキングスペースの運営を１年間それなりに本気でやってみて思ったこと色々。 | コワーキングスペース7F
高橋メソッドのプレゼンを自動で作ってくれる「高橋メソッドジェネレータ」
has()疑似クラスでコーディングが変わる！ CSS最新スタイリング - ICS MEDIA
パスワード認証を脆弱にする10の方法とアンチパターン
UIデザインのための心理学：33の法則・原則（実例つき） | ベイジのUIラボ～業務システムとSaaSのUIを考える
実践Go言語 - golang.jp
バックアップが取れて音楽も聴ける！iTunes の音楽データを Dropbox に保存する方法
毎日考ブログ -Web屋のウェブログ- | Web標準に進路を取れ 第5回「テーブルレイアウトは罪なのか」
よくあるWeb制作の悩みをCSSで解決！最新テクニック40選まとめ
JSON Schema をクックパッドマートの商品登録画面に導入した話 - クックパッド開発者ブログ
やってられるか！！蹴りたいフォームの１２要素 | WP-E (仮)
「メールアドレスのルール」なんて使ってはいけない3つの理由 - めもおきば
Node.jsでスクレイピングするならば - プログラマでありたい
Excel(エクセル)入門/基本/上級/実用講座の総目次