フォームのテキストエリアにCSSのfield-sizingとlh単位を使用すると便利、入力された文字量に合わせてサイズを自動変更

2024/08/20 21 users content CSS JavaScript フォーム 文字量

CSSはどんどん便利になっていますね！ これまではJavaScriptを使用しないとできなかったことがCSSで簡単に実装できるようになっています。 CSSのfield-sizing: content;でフォームのテキストエリアのサイズを入力された文字量に合わせて自動変更したり、テキストエリアの高さを行の高さで設定するlh単位を使ったCSSのテ... 続きを読む

Aceでテキストエリアをエディタ化する

2024/06/17 7 users Ace ネイ ネイティブアド 題材 GMO NIKKO

はじめに こんにちは。 GMO NIKKOのKONCEです。 今回はJS製エディタのAceについて調べる機会があったのでブログの題材にしてみます。 使用するケースはかなり限られてくると思いますがよければご覧ください 背景 ネイティブアドの取り扱い 僕の担当しているプロダクトGMOSSPではネイティブアドを取り扱っています。 ネイ... 続きを読む

Macで毎分スクリーンショットを撮って手元に貯めておくスクリプト - hitode909の日記

2023/12/03 106 users スクリプト SQL Mac hitode909 スクショ

書いてたテキストエリアがどっかいく、みたいなことがたびたびあって、スクショを定期的に取っていればこんなことにならないのに…と思っていた。 先日、Redash用に、がんばって書いたSQLがどっかいってしまい、ものすごく悲しい、という出来事があったのであ、あまりに悲しさに、重い腰を上げてスクリプトを書いた。 き... 続きを読む

ファイルアップロードではNFC/NFD問題に気をつけろ！~MacファイルシステムにおけるUnicode正規化の闇~

2023/08/29 21 users ＮＦＣ NFD 半濁音 NFD問題 UTF-8

NFCではそのまま「パ」として表されますが、NFDでは「ハ」（基底文字）と「゜」（結合文字）の組み合わせとしての「パ(UTF-8でe3 83 8f e3 82 9a)」（合成文字）で表されます。試しにNFDで正規化された「パ(e3 83 8f e3 82 9a)」を任意のテキストエリアに貼り付けて削除してみると、半濁音のみが取れて「ハ」のみになる... 続きを読む

iOS版pixivアプリにおける、URL表示の一時機能制限について

2023/08/03 16 users pixivアプリ pixiv事務局 皆さま 通り URL

pixiv事務局です。 2023年8月3日より、iOS版pixivアプリの一部ページにおいて、URLを含むテキストエリアの表示を一時的に制限いたします。 ユーザーの皆さまがpixivアプリを継続的にご利用いただく上で必要な取り組みとなりますので、恐れ入りますがご理解のほどよろしくお願いいたします。 変更内容の詳細は以下の通り... 続きを読む

EmacsやVimなど好きなエディタを利用してブラウザのテキストエリアに入力することができる「GhostText」のVS Code用機能拡張がリリース。

2023/03/26 6 users emacs GhostText vim エディタ イタリア

EmacsやVimなど好みのエディタを利用してブラウザ入力することができる「GhostText」のVS Code用機能拡張がリリースされています。詳細は以下から。 　GhostTextはイタリアのFederico Br The post EmacsやVimなど好きなエディタを利用してブラウザのテキストエリアに入力することができる「GhostText」のVS Code用機能拡... 続きを読む

テキストエリアを入力値によって動的に変化させる

2022/12/11 5 users 入力値

この記事は GMOアドマーケティング Advent Calendar 2022 12日目の記事です。 こんにちは、22新卒のGMOアドマーケティングの天河です。 さっそく本題の結論を言っちゃいましょう。 結論 HTML <textarea class="auto-adjust-sample-textarea"></textarea> CSS .auto-adjust-sample-textarea { width: 100%; resize: none;... 続きを読む

ブラウザのテキストエリアでNeovimを使う ｜ Developers.IO

2019/11/03 117 users Neovim terminal vim カーソル ペースト

はじめに 皆さんNeovim使っていますか！！ Vimキーバインドに慣れるとブラウザのテキストエリアにカーソルを入れて、iボタンを押したとき世の中の非情さに涙を流します。なので仕方なく、「Terminalに戻りVimを起動して文章書いてコピー」→「ブラウザのテキストエリアにペースト」という生産的なのかよく分からない行動... 続きを読む

住所入力フォームにテキストエリアを使うべき理由 | UX MILK

2019/02/14 35 users UX MILK 住所入力フォーム 理由

作家でありUX Movement社の創設者。技術が誤作動すると不満に感じます。インターネットをよりインタラクティブでユーザーにやさしいものにするためにこのブログを立ち上げました。 Webフォームで住所を記入する際に戸惑ってしまうことはありませんか？　ある調査によると、30％のユーザーが「住所欄２」に入ったときに困... 続きを読む

Vue.js で始めるシングルページアプリケーションの開発 - HDE BLOG

2018/03/05 580 users Vue.js HDE BLOG 開発 ウェブアプリケーション

2018 - 03 - 05 Vue.js で始めるシングルページアプリケーションの開発 Vue.js は JavaScript フレームワークです。 ウェブアプリケーションのユーザーインターフェイス開発を支援する様々な仕組みを提供します。 管理画面はもちろん、HTMLエディタのようにユーザの入力に対して即応性が必要なアプリケーションを簡単に作ることができます。 例えば、テキストエリアに文字を入力... 続きを読む

[Alexa] SkillBuilder(Betaリリース)を使用してDialogモデルを使ってみた ｜ Developers.IO

2017/07/15 10 users JSON alexa Skill Builder 手動 従来

1 はじめに Amazonの開発者コンソールで作業する Custom Skill の作成では、 Interaction Model で、 Skill Builder(Betaリリース) を使用することができます。 Skill Builder では、従来、テキストエリアにJSONを手動入力することで行なっていた作業を、美しいGUIから行えるようになります。 Interaction Model の設定... 続きを読む

自分に関係するGitHub Issueを一覧できるアプリを書いた | Web Scratch

2015/07/31 38 users Github Issue Web scratch アプリ

github-issue-teevという自分に関連するIssueを一覧するアプリをNW.jsで書きました。 機能 自分がAssignedされてるIssue一覧を表示 アプリ内でお気に入り登録したリポジトリのIssue一覧を表示 サイドバーにそのIssue内にある- [ ]のタスク一覧を表示 テキストエリアをCodeMirrorのエディタにすり替える機能 Cmd+e でトグルできます。 テキストエリ... 続きを読む

記事編集画面（PC版）をリニューアルしました。広いテキストエリアと、スッキリした編集サイドバーで執筆に集中できます - はてなブログ開発ブログ

2015/07/27 75 users 執筆 編集サイドバー PC版 特徴 デザイン

2015-07-27 記事編集画面（PC版）をリニューアルしました。広いテキストエリアと、スッキリした編集サイドバーで執筆に集中できます 新機能 機能変更 はてなブログでは、PC版の記事編集画面をリニューアルしました。広々としたテキストエリアを中心にすっきりしたデザインで、記事を書くことに集中できます。 はてなブログの新しい記事編集画面（PC版） 新しい記事編集画面の特徴 ―― 広いテキストエリア... 続きを読む

transchat | 日本語⇔英語を翻訳する音声入力チャット

2014/10/19 19 users Step 音声入力 日本語キーボード 英語 日本語

STEP 1 まず、テキストエリアをタップします。 日本語キーボードの音声入力より、日本語を入力しましょう。 完了したらOKを押してください。 続きを読む

記事編集画面に「下書きに戻す」ボタンを追加しました。公開済みのエントリーを下書き状態にできます - はてなブログ開発ブログ

2014/09/19 56 users 下書き 下書き状態 エントリー 該当 画面

2014-09-19 記事編集画面に「下書きに戻す」ボタンを追加しました。公開済みのエントリーを下書き状態にできます 新機能 はてなブログでは、記事編集画面に「下書きに戻す」ボタンを追加しました。公開済みのエントリーを非公開に戻して、下書き状態にできます。公開済みの記事を取り下げるには、その場編集や「記事の管理」画面から該当の記事の編集画面を開きます。テキストエリアの下に「記事を更新する」ボタンと... 続きを読む

年に1回ブログ作りたくなったときに考えること - ✘╹◡╹✘

2014/08/14 25 users ライブラリ ユーザ プレビュー画面 しま 左右

2014-08-15 年に1回ブログ作りたくなったときに考えること 最近HTML上の要素を直接編集できるようにするライブラリをつくってからというもの、どうしてブログの記事を編集するときに記事ページを直接編集できないんだろうとか、どうしてユーザに表示されるのと同じデザインを見ながら編集できないんだろう、プレビュー画面とテキストエリアを左右に並べて見比べているんだろう、とか色々な考えに取り憑かれてしま... 続きを読む

jQuery.selection - テキストの選択範囲を自由自在に扱えるjQueryプラグイン|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ

2014/01/07 43 users jQueryプラグイン エンジニア ソフトウェア テキスト

おお、これはかなり使えそう！ テキストボックスやテキストエリアに入力された文字列に対して何らかの処理を行いたいと思うことは良くあります。さらにキャレットのある場所や選択されている文字に対して処理を行うのも良くある処理ではないかと思います。 例えばWYSIWYGエディタを作ったり、選択文字を別なサービスに飛ばしたりといった使い方が考えられます。意外と選択範囲を取り出すというのは面倒な処理なのですがj... 続きを読む

UIが変わる度に文句いう人 - 良いあそなすちゃん

2013/10/10 290 users 文句 Twitter iOS 良いあそなすちゃん お前

2013-10-11 UIが変わる度に文句いう人 iOSを始め最近あちこちのWebサービスでUIが変わり始めていますね。UIが変わる度に主にTwitterで文句を垂れる人がいるけど、じゃあ、お前の中でどうなったら最適なUIなのかをブログにかいてくれよ。って僕はいつも思ってる。UIが変わる度に条件反射でTwitter開いて「クソUI」の4文字をテキストエリアに叩きこむ余裕があるなら、UIが変わった理... 続きを読む

テキストエリアをフルスクリーン表示して操作できるjQueryプラグイン『jQuery Fullscreen Editor』 - あのねノート。

2013/09/17 14 users jQueryプラグイン アニメーション デモ アイコン ノート

2013-09-17 テキストエリアをフルスクリーン表示して操作できるjQueryプラグイン『jQuery Fullscreen Editor』 WEB jQuery Fullscreen Editorは@buraksonさんによって作られたテキストエリアをフルスクリーン表示にできるjQueryプラグインです。 デモのアニメーション テキストエリアの右上のアイコンをクリックすると最大化されます。 ... 続きを読む

覚えておくと便利！ Macで入力し終えた文字を再変換する方法 : ライフハッカー［日本版］

2013/09/11 33 users ライフハッカー Mac MacOS ビジネスガジェット 文字

Apple , MacOS , ビジネスガジェット 覚えておくと便利！ Macで入力し終えた文字を再変換する方法 2013.09.12 08:00 文字を入力したあと、再変換したいときはありませんか。Macでは選択した文字を再変換するための便利なショートカットが用意されています。覚えておくと役に立ちますよ。 まずテキストエリアなどに文字を入力します。そして再変換したい文字列を選択します。その後、「... 続きを読む

Facebookライクにテキストエリアを強調する方法 | Backlogブログ

2013/06/19 52 users Facebookライク Facebook エントリ 強調 染田

こんにちは、染田です。 Facebook にハッシュタグが登場しましたね。まだ私の周りではそこまで目にしませんが、皆様は活用してますでしょうか？ さて、このハッシュタグを入力するフォーム、一見すると通常のテキストエリアですが、入力した後にハッシュタグの所に強調がかかり、とても分かりやすくなっています。このエントリではこの強調がどうやって実現されているかを紹介したいと思います。 まず全体の構造はとて... 続きを読む

テキストエリアをフルスクリーンにして超編集しやすくできるJS「WideArea」:phpspot開発日誌

2013/06/07 44 users phpspot開発日誌 発想 フルスクリーン かなり

テキストエリアをフルスクリーンにして超編集しやすくできるJS「WideArea」 2013年06月07日- WideArea - Better Textarea テキストエリアをフルスクリーンにして超編集しやすくできるJS「WideArea」 テキストエリアを自動伸縮するものが多いですが、発想を変えて、フルスクリーンボタンでテキストエリアをフルスクリーン化してしまうものです。 これがかなり便利で、... 続きを読む

プログラミングコードをHTML内に埋め込む形に変換「HTMLify」|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ

2013/05/27 19 users 改行 エスケープ処理 MIT License ソフトウェア

HTMLifyはJavaScript製のオープンソース・ソフトウェア（MIT License）です。ブログやソフトウェアのプロジェクトページにプログラミングコードを貼付ける際、素のままでは改行やHTMLタグのエスケープ処理が行われずに変な表示になってしまいます。そこで使ってみたいのがHTMLifyです。 トップページです。上のテキストエリアにコードを入力します。 入力が終わったらHTMLifyボタ... 続きを読む

Bootstrapのテキストエリアを拡張する、WYSIWYGエディター | IDEA*IDEA

2013/04/08 49 users WYSIWYGエディター Bootstrap IDEA 機能

Bootstrapに対応したWYSIWYGエディターですな。音声入力にも対応している点が素晴らしいですな。 ↑ 必要十分な機能が揃っていますね。 テキストエリアを拡張したいときに覚えておきたいのでメモ的にエントリーしておきます。 » Tiny, opensource, Bootstrap WYSIWYG rich text editor from MindMup 続きを読む

三点リーダが真ん中に表示されない理由: 小粋空間

2013/02/26 114 users 小粋空間 語尾 余韻 記号 真ん中

三点リーダ「…」が「…」という風に真ん中に表示されない問題について調べてみました。 １．三点リーダとは 説明するまでもありませんが、点を3つ横に並べた形をした記号のことで、語尾を省略したり、言葉の余韻を残すときに使う「…」です。 ２．問題点 たとえばブログを書いているときに、記事編集画面のテキストエリアでは「…」と表示されているのに、公開したページでは「…」となることがあります。 ３．原因 三点リ... 続きを読む