製品 コミュニケーション メッセージング マルチチャネルのテキストメッセージとメディアメッセージの送受信を180か国以上で
先日Twitterで「大学生がスマートフォンでレポートを書いている」というツイートが話題になっており、それに対して反応している方達もほぼ全員が「スマートフォンでレポートを書くのは効率が悪い」という前提で話をしていることに大変違和感を覚えました。 なぜなら私はこのブログはもちろん、技術書を執筆するときでさえ主にスマートフォンで下書きをしているからです。 PCを使うのは、ほぼスクリーンショットの撮影と最後の仕上げだけです。 その方が、最初からPCで文字入力するのに比べて圧倒的に効率が良いです。 この記事では、iPhoneとAndroidそれぞれで音声入力を効率よくおこなう方法について解説します。 iPhone・iPadの場合 先に結論から申し上げると、iPhone・iPad・Macの日本語音声入力は、AndroidのGoogle音声入力に比べて認識精度が低く、認識できる単語が少ないです。 仕事
大島堅一 @kenichioshima 今の学生さん、10年くらい前は良かったのですが、ここ数年でキーボード入力、ブラインドタッチができない人がめっちゃ増えました。いくらフリックが速いといっても、結局鈍行ですから、キーボードブラインドタッチの特急には負けますし、しょぼいです。 リンク NEWSポストセブン 若者のPC離れ、キーボードよりフリックが速く上司嘆く 今春、男性新入社員が部下となった、大手商社勤務の30代会社員が嘆く。「配属直後、翌日の会議で使う資料を作るように指示したところ、左手でスマホを持ち、フリック入力でパパッと調べもの… 2 users 西郷達彦 @tsaigoh @kenichioshima @sunegebohbohman 学部1年生の情報処理の授業を担当し、タッチタイプを課題としています。 5月に4回で合計で30分くらいの講習をして、あとは7月末にテストをします。レベ
とにかく最近の私のマイブームはフットスイッチです。こちらにブログを書いたところやけにバズりました。 katsumakazuyo.hatenablog.com 実はこの時点からさらにTABキーを増やしたかったので、もうひとつだけ買い足して7つになっています。 今7つはそれぞれ左からこのような形で、キーがアサインされています。 Googleドキュメント音声入力トグル(Shift+CTRL+S) 改行 TAB BS 、 。 Google Chrome VoiceIn音声入力トグル (Shift+CTRL+9) そしてこれを入れたら本当にびっくりするぐらい仕事が早く終わるようになりました。なぜそんなに早く終わるようになったかということを考えたのですが、結局これまでは その1 安定しているけれども句読点があまり上手に入らない Google 音声入力 その2 不安定だけれども句読点はそこそこちゃんと入
Webエンジニアを始めて丸2年が経ちました。 複数プロジェクトを進める中で、CSSコーディングを行うときの「こうしておくと便利」「このほうが管理しやすい」といった知見が溜まってきたのでまとめます。 はじめに 長くなってしまった細かい説明はところどころ折りたたんでいます。概要だけで理解できたら飛ばしていただき、詳しい話が気になったら開いて読んでください。 これらは「自分がよく取り入れている手法」であって、必ずしもどのプロジェクトにも当てはまるものではないと思います。 各項目について、自分がその判断に至った 「理由」 を説明していますので、 理由を読んだ上で自分のプロジェクトに取り入れるか判断いただくと良いと思います。 この記事は、すでにCSSコーディングをしていてアイデアがほしい人に向けた記事で、 CSSをこれから学び始めるような 初学者向けではない ことご了承ください。 一般的と思われるキ
HTMLだけでスマホやタブレットのカメラにアクセスできる、HTMLのcapture属性を紹介します。 私はこの属性を知らなかったのですが、実際にiPhoneとiPadで試してみたところ、前面カメラにも背面カメラにもアクセスできました。JavaScriptなどは必要なく、簡単なHTMLでできます。 You Can Access A User’s Camera with Just HTML by Austin Gil (@heyAustinGil) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLのcapture属性とは capture属性のサポート状況 終わりに はじめに 私は先日、今までに見たことがないHTMLの属性、captureに出会いました。capture属性は非常にクールなので、動画と記事を書くことにし
モダンブラウザをターゲットにしたWeb制作では、リセットCSS自体が必要ないかもしれません。とは言っても、設定しておきたいスタイルや一部のブラウザ用に設定しておきたいスタイルがあります。 現在のWeb制作に合わせて制作されたリセットCSSを紹介します。なぜそうするのか、なぜそれを使用しないのか、CSSの知見やテクニックも満載です! A (more) Modern CSS Reset by Andy Bell 他のリセットCSSが気になる人は、こちらも注目です。 A (more) Modern CSS Resetの前のバージョンも解説しています。 2023年、現在の環境に適したリセットCSSのまとめ 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに モダンブラウザに適切なデフォルトのリセットCSS 各リセットCSSの解説
検索フォームなど、button要素とinput要素を並べて配置した際に、それらのテキスト(アイコンも)を垂直方向に美しく揃えて配置するスタイルシートのテクニックを紹介します。 ボタンと入力フォームの高さは自由に変更でき、デザインも普通に変更できるので、スニペットとして登録しておくと便利です。 button要素とinput要素のテキストを揃える インタラクティブな要素のコンテンツを垂直方向に揃えるのに苦労したことはありませんか? あなたは仲間です、多くの人が経験していると思います。 この記事では、line-height, padding, flexboxを使用して、button要素とinput要素のコンテンツを中央に配置する方法について解説します。 まず、ゴールを明確にしておきましょう。 button要素とinput要素のコンテンツは完璧に揃えます。 button要素とinput要素の高さは
はじめに デジタル庁が公開したデザインシステムがよさそうなデザインでしたので、適当に遊ぼうかと思いました。 html/cssで公開してくれればすぐに使いやすいと思ったんですが、どうやらFigmaでしか配っていない。。 ということでhtml/cssに落とし込んでみました。 注意事項 趣味程度に作ったものを、使いたい人がいればどうぞというものです。 細かい部分は間違っていることもあるかと思います。(ラジオボタン難しかったので、何とか再現した感じです。) 自分用に目的もなくつくっていましたので、命名等のポリシーもめちゃくちゃです。許してください。 大変つかれましたので、厳しいコメントは受け付けません。 気が向いたら、もう少しきれいにするかもしれません。 ソースコード 以下、に載せています。 完成概要 ページとしてはこんな感じ
WebサイトやアプリのUIで、スイッチを実装するのはなかなか面倒です。CSSで書くと、なかなかのボリュームになってしまいます。 そんなスイッチがHTMLだけで実装できるようになります。 Release Notes for Safari TP 185によると、HTMLの新機能としてswitch属性がサポートされました。これにより、スイッチUIがHTMLで簡単に実装できるようになります。 switchについては、かなり前から実装についてGitHubで議論されていました。スイッチは人気のあるUIコントロールだけど、CSSで実装するのは簡単じゃないよね、簡単に実装できるようにしよう。という感じです。 スイッチUIを実装するHTMLは、下記の通りです。
input[type="file"] な要素を装飾する方法を検索したときに、次のような間違った label 要素の使い方を紹介する記事ばかりヒットするのが気になったので書きました。label 要素を使っても問題ない場合もありますが、間違った使い方をしている(しようとしている)人に届きやすいようにこのような表題にしています。 何が問題か 上記の方法は input 要素を display: none で非表示にし、label 要素を使ってヒット領域を拡大させて「ファイルを選択」ボタンを表現するという方法ですが、この方法ではフォーカスが当たりません。また、tabindex 属性に非負の値を設定しフォーカスを当てられるようにしても label は clickable な要素ではないので Space / Enter キーで click イベントを発火することができません。 どうするべきか butto
フォーム送信中にinput要素やbutton要素をdisableにしてデータが帰って来たら有効に戻すというのは多分よくやっていると思いますが、fieldset 要素一つで一括でdisabledにできる方法を最近知ったので、シェアしておきたいと思います。 普段👇 <div> <input disabled={loading} type="email" name="name" /> </div> <div> <input disabled={loading} type="password" name="password" /> </div> <div> <input disabled={loading} type="submit" value="submit" name="button" /> </div> <fieldset disabled={loading}> <div> <input
この拙攻さんの記事を読めば、アラビア文字の概要が分かる。デイリーポータルZの英知の結集だ。上記記事から大事な点を抜粋・要約する。 まず、アラビア文字は28文字からなる ”アルファベット” で、ABCの遠い親戚である。 アラビア書道 体験講座用テキスト(日本アラビア書道協会編)より これを見て気になるのは、語頭形、語中形、語尾形、独立形というパターンだ。アラビア文字では基本的に一単語を続け字で書くという決まりがあるため、位置によって文字の形を変えることで、繋げて書けるようになっているのだ。覚える手間が大変そうだ。 でも、たぶんこれはキーボード入力では気にしなくもいいと予想する。おそらくパソコンが自動的に適切な形で表示してくれるはずだ。 これはアラビア語で太陽を表す言葉。シャムスと読む。 さきほどのアルファベット表と見比べ、解釈するとこうなる。 アラビア語は右から左に読む。右からsh、m、s。
入力欄のプレースホルダーの話をします。プレースホルダーというのは、フォームの入力欄で、ユーザーが入力するまでの間に表示されているテキストのことです。 書籍「Webアプリケーションアクセシビリティ1」では、「3.1 ラベルと説明」のところで、紙版にして約1.5ページの分量を割いて、フォーム入力欄のプレースホルダー(<input> 要素や<textarea> 要素の <placeholder> 属性)の問題点を指摘しています。 この本で指摘されているプレースホルダーの問題点は以下の3つです。 プレースホルダーの色が薄く視認しづらい プレースホルダーとフォームコントロールの値との区別がつかない フォームコントロールに値を入力したときにプレースホルダーの値が見えなくなってしまう Webアプリケーションアクセシビリティ さらに、Nielsen Norman Groupによる「Placeholders
モダンCSSの機能を使用して、フォームのラジオボタン・チェックボックス・トグルスイッチなどを独自のスタイルで実装するテクニックを紹介します。以前まではdivやspanなど追加のHTMLやJavaScriptが必要でしたが、一切必要ありません。 こういった実装はできないものと思っていたので、驚きました。 Custom Styling Form Inputs With Modern CSS Features 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 モダンCSSの機能を使用した入力フォーム 実装は以前より簡単になりました HTMLは非常にシンプル CSSで入力フォームのスタイルを定義 入力フォームの完成 モダンCSSの機能を使用した入力フォーム 最近ではセマンティックとアクセシビリティの両方を維持したまま、独自のチェックボック
スマホでNintendo Switchを操作する 〜 USB GadgetでPro Controllerをシミュレート 〜 Mzyy94 Game 19 Mar, 2020 あつまれ どうぶつの森の配信が開始されましたね。いくつか積みゲーが増え始めたNintendo Switchも、また新たにゲームが増えて稼働時間が伸びる一方です。 物をよくなくす身として、ゲームがしたいときにコントローラーが見つからないことは日常茶飯事です。 テレビやエアコンのリモコンもよく消えるので、スマートフォンから操作できるようにしています。スマート家電、文明の利器ですね。 コントローラーが見つからないとき、スマートフォンから操作はできないのでゲームはお預けです。 家電はスマホでスマートに操作できるのに、ゲームはレガシーなコントローラーを探さなきゃいけないなんて、なんてスマートじゃないのでしょう。 どうぶつたちの住
印刷する メールで送る テキスト HTML 電子書籍 PDF ダウンロード テキスト 電子書籍 PDF クリップした記事をMyページから読むことができます 日本のスマートフォン世代の中には、PCのキーボード入力が苦手な人もいるという。一方で、中国の今どきの学生は、さまざまな入力方法が用意される中でも、フルキーボードを好むことが多く、慣れていないと恥ずかしいようだ。今回はその「なぜ」を考察したい。 中国語には文字入力の方法が多数あり、入力方式エディター(IME)をはじめとしたツールは「輸入法」と呼ばれる。例えば、PCでは日本語のローマ字入力のような「ピンイン」入力と、各キーに割り当てられた漢字の部首から入力する「五筆」入力がある。また漢字が多くて入力が難しい高齢者向けには、手書き入力用の外部入力機器やソフトウェアが用意されている。 スマートフォンではピンインと五筆が入力できるフルキーボードに
Attributes and properties are fundamentally different things. You can have an attribute and property of the same name set to different values. For example: <div foo="bar">…</div> <script> const div = document.querySelector('div[foo=bar]'); console.log(div.getAttribute('foo')); // 'bar' console.log(div.foo); // undefined div.foo = 'hello world'; console.log(div.getAttribute('foo')); // 'bar' consol
We’re very excited to introduce a new HTML form control as part of Safari 17.4: a switch. Two switches as seen on iOS, with the second switch using a custom CSS accent-color. The HTML for this example looks roughly like this: <style> .special { accent-color: papayawhip } </style> <input type=checkbox switch checked> <input type=checkbox switch checked class=special> Switches are a popular control
ラジオボタンとラベルの間にクリックしても反応しない謎スペースができてしまったことはありませんか? 通常であれば、フォームコントロールとラベルの関連付けが機能し、クリックするとラジオボタンが選択されますが、謎スペースは無反応です。なぜ謎スペースができてしまったのか、そしてこの問題を解決する方法を紹介します。 Sanding UI by Jim Nielsen 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ラジオボタンとラベルの間にある謎スペース はじめに UIを実装する時に私が好む方法の一つは、何かを構築し、何度もあちこちをクリックし、微調整を加え、さらにクリックして、微調整を加え、さらにクリックしてといったことを繰り返し、最終的に完成したと判断するまで続けることです。 このクリックするというのが重要な部分です。ページ
Most inputs have something in common — they are happiest with a companion label! And the happiness doesn’t stop there. Forms with proper inputs and labels are much easier for people to use and that makes people happy too. A happy label and input pair In this post, I want to focus on situations where the lack of a semantic label and input combination makes it much harder for all sorts of people to
https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/ To provide users with a good service, government organisations usually need to collect data. Lots of data. The GOV.UK Design System team publishes patterns and components that let users enter their data in an easy and accessible way. The last thing we want to do is create barriers to use
「日付入力フォームを作ってほしい」 あなたはそう言われたら、どうやって実装しますか? HTML5になって追加された「input[type=date]」を使うでしょうか。それともプラグインを使うのでしょうか。 どちらにも一長一短があり、設置するサイトの目的に応じて柔軟に対応することが求められます。 だがしかし!この日付入力フォームのカスタマイズはなかなか曲者でして、苦戦している方も少なくないでしょう。 Chromeではうまく表示されても、IEでうまくいなかったり、ちょっと見た目をいじったら動かなくなってしまったり。 今回はそんな悩める日付入力難民の皆様のために、日付入力フォームをどんな端末から見ても同じ見た目・動きになるようカスタマイズする方法について書きました。少しでもお役に立てればなによりでございます。 ※結論から言うと「日付入力フォームのカスタマイズなら、プラグイン(datepicke
ふつうにvalueを書くことができない<input type="file">ですが、ブラウザによっては動的な設定もほぼ自由に行えることが判明しました。 <input type="file">へ値を設定する 入力するものがファイルである以上、<input type="file">に対してvalueは(空にするvalue = ''を除けば)使えないのですが、別ルートとしてfilesというプロパティがあります(MDN)。ここには選択したファイルのリスト(multipleでなければ1つだけ)が入ったFileListオブジェクトが入っていて、また代入することで設定が可能です。 FileListって、何? ところが、filesに代入するものもFileListオブジェクトでなければならず、代わりにFileの配列を持ってきてもエラーになります。しかも、new FileListも動かないため、一見すると他の
Unity2020のリリースと同時にverifiedとなった新しいInput Systemの使い方をざっとまとめます。 全体感を把握することを目的としているので細かい部分の説明は割愛します。 インストール 基本的な入力の受け取り方(UI以外) Input Actionアセットを作る Input Actionを制御するスクリプトを自動生成する 入力を受け取る 入力イベントの色々な受け取り方 インタフェースを実装する コールバックを登録する ポーリングする より手軽に入力を受け取れるPlayerInput ActionやActionMapをMonoBehaviourに直接シリアライズする uGUIとの連携 参考 Unity2020.1 Input System 1.0.0 インストール Input SystemのインストールはPackage Managerから行います。 (PackageMan
HTML チュートリアル HTML の基本 HTML 入門 HTML 入門の概要 HTML を始めよう ヘッド部には何が入る? HTML のメタデータ HTML テキストの基礎 ハイパーリンクの作成 高度なテキスト整形 文書とウェブサイトの構造 HTML のデバッグ 評価課題: 手紙のマークアップ 評価課題: コンテンツのページの構造化 マルチメディアとその埋め込み マルチメディアとその埋め込みの概要 HTML の画像 動画と音声のコンテンツ object から iframe まで — その他の埋め込み技術 ウェブへのベクターグラフィックの追加 レスポンシブ画像 評価課題: Mozilla のスプラッシュページ HTML の表 HTML の表の概要 HTML の表の基本 HTML 表の高度な機能とアクセシビリティ 評価課題: 太陽系の惑星データの構造化 リファレンス HTML 要素 <a>
こんにちは、Ryohei(@ityryohei)です! 本記事では、ファイルをアップロードする際に使用する「input type="file"」を好みのデザインにカスタマイズする方法をご紹介しています。 端末のスペックやインターネットの速度が上がるにつれて、画像や動画のようなメディアファイルを取り扱うサイトやWebアプリケーションが随分と増えてきました。大手SNSはもちろん、個人開発のサービスにおいても顕著です。今後は5Gの普及に伴い、メディア、特に動画のような大容量のファイルを取り扱うことが増えていくと予想されます。そのためファイル処理を構築する機会も増えていくのかな、と考えています。 本記事でご紹介するのは、ファイルのアップロードに使用する「input type="file"」のボタンデザインをカスタマイズする方法です。デフォルトの状態ではグレー背景のデザイン性がない見た目をしているた
Features get and set value and unmasked value easily no external dependencies supports overwrite mode supports all major browsers supports web components supports contenteditable RegExp mask Function mask Number mask (integer and decimal support) Date mask (with various format support and autofix mode) Dynamic/on-the-fly mask Pattern mask show placeholder always or when needed unmasked value can c
🌼 はじめに フロントエンドエンジニアなら誰でも一回はボタンコンポーネントを作ったこと、もしくは使ったことがあるのではないかと思います。私もUI実装のときよく触ってました。 最近 <input type="button" value="保存" /> のようなボタンコンポーネントを見かけて、「なんで buttonじゃないんだろう、てかなんでボタン作る要素が button と input の2つあるわけ?」という気持ちになりました。 気になったら調べるしかないので、今から調査結果を共有します。 1. input要素とbutton要素は似てる さっそくフォームの中にinput要素とbutton要素でボタンを作ってみました。 <form action=""> <label> 好きな食べ物は? <input type="text" /> </label><br /> <div class="but
Unityの新しいInputSystemの機能であるEnhancedTouchという機能を使って手軽に端末のタッチ入力が処理できたのでメモです。 はじめに 本記事では新しいInputSystemの機能の説明や、導入手順などは省略します。 以下のリンク先が大変参考になりましたので、確認していただけると幸いです。(一番下のリンク先が公式ドキュメントになりますので、情報が多いです。) 【Unity】新しいInput System入門 - 従来のUnityEngine.Inputに代わる高機能な入力管理システム - LIGHT11 Unityの新しい入力システムInputSystemを使ってみる | Unityを使った3Dゲームの作り方(かめくめ) Namespace UnityEngine.InputSystem | Input System | 1.0.2 検証しているツールとパッケージのバー
はじめに 本稿は Vue 2.x が対象になります。Vue 3 に関する記事はこちらを参照ください。 Vue.js のコンポーネント間のデータのやりとりについて、親コンポーネントから子コンポーネントへデータを渡すには、v-bind 属性と props オプションを利用します。これにより親コンポーネント側でデータを変更すれば、子コンポーネントの props 経由で渡されたデータも変更されます。しかし、子コンポーネント側で props 経由で渡されたデータを直接変更することは非推奨です。しかし、子コンポーネントの変更を親コンポーネントへ反映したい場合があります。たとえば、再利用性のある入力フォームのコンポーネントを親子間でやりとりするケースです。この問題を解決するには v-model を正しく理解する必要があります。本稿で紹介するコードは CodeSandbox にて共有します。 サンプルコー
小ネタである。 昔よりは便利になったとはいえ、Gmailのメールとか掲示板の投稿とかをウェブブラウザ上で書くのはめんどくさい。Emacs上で書きたいのである。というか、Emacs以前に「メール」とか「掲示板」とかいう時点ですでに老害感が横溢しており我ながらびびった。 それはさておき、そういうとき一昔前だとウェブブラウザ側にEdit with Emacsというアドイン、Emacs側に edit-server.el というのを入れて使っていたのだが、設定が複雑で何かとうまく行かなかった覚えがある。これが最近だと、ブラウザ側はGhostTextアドイン、Emacs側にatomic-chromeを入れれば楽に実現できる。名前がatomでchromeって大丈夫なのかねという感じだが(Atomはディスコンになってしまったし)、AtomやChromeだけではなくEmacsにもMozilla Firefo
NTTドコモのモバイル社会研究所は、スマートフォンにおける「フリック入力」の利用実態について調査した結果を公表した。15~24歳の女性は約半数がフリック入力を利用しており、職業別に比較すると、学生は43%と他属性と比べて利用率が顕著に高いことが分かった。 NTTドコモのモバイル社会研究所は11月9日、スマートフォンの文字入力における「フリック入力」の利用状況を調査した結果を発表した。今回の調査では、「スマートフォンの操作」について尋ね、選択肢から「フリック入力を使っている」を選択したユーザーを「フリック入力利用者」として集計している。 若年層ほど「フリック入力」 ただし男女差あり 調査によると、男女共に若年層ほどフリック入力を利用している割合が高い傾向にあり、特に15~24歳の女性は、約半数がフリック入力を利用していた。この年代は他の年代と比べて利用率の男女差も大きく、男性は14ポイントほ
あんにょんはせよ 韓国語入力中 キーボードで한/영変換する場合 なーーんも考えず クリックして変換してたんだけど この度キーボードで 変換しなくてはならない事がありまして 「んな時は右Altキー押すんだっけなー」とパソコンを見たら 右Altキーがないではないか!! 「んなパソコンあるんかいなー」 と調べてみたところ 右Altキーは出番が少ないからとかで ないものもあるそーだ 諦めの早い私 右Altなしでもなんとかする 方法探しの旅に出た 使ってないキーを 右Altにできるってのが出てきたので それをダウンロードしてみたが 上手く作動してくれないので 諦めの早い私 何だかてきとーにいじくってたら できちゃったのでございます 素晴らしー機能なのでご紹介 右Altキーなくてもケンチャナ♡ Hangul/English Toggle を切り替える術。 はじまりはじまり~ ↓ ↓ ↓ ↓
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く