イベントハンドラの関数名についての雑記 - Qiita

2024/01/26 13 users イベントハンドラ Qiita onclick 雑記 関数名

今日のXでは、イベントハンドラの関数名についての話題を見ました。元の投稿はこちらです。要するに、次のhandleClickのようなhandleイベント名という命名は良くないということです。 const handleClick = () => { ... }; <button type="button" onClick={handleClick} /> これについて少し考えたので、せっかくなのでア... 続きを読む

<button>とかのスタイルを消して書き直すときに考えることの備忘録

2024/01/01 12 users unset 備忘録 アクセシビリティ 分岐 Chrome

all: unset; などを使ってUAスタイルシートを消してまっさらな場所からスタイルを当てるのは気持ちがいいですが、アクセシビリティ等の観点から重要な分岐が見落とされる可能性があります。 ここではChromeのUAスタイルシートを参考に、検討しておいたほうがいい状態をいくつかリストします。 (もちろん、既存のUIコンポ... 続きを読む

なぜ Server Actions を使うのか

2023/11/12 82 users Server Actions Slug ミーム バイナリ 反響

Next.js 14 の Server Actions の stable リリースに発表は大きな反響を呼びました。 特に <button> の formAction 属性内で直接 SQL クエリを実行するコードは多くの人に衝撃を与えていました。"use server;" の部分を PHP やバイナリに置き換えると行った多くのミームも生まれました。 function Bookmark({ slug }) { ... 続きを読む

【CSS】まだホバー時のスタイルを :hover だけで指定してるの？

2023/08/07 267 users hover enabled Summary where CSS

はじめに結論から ホバースタイルは、 :hover だけで指定するのではなく、次のように指定しましょう！ @media (hover: hover) { /* リンクの場合 */ a:any-link:hover { } /* ボタンの場合 */ button:enabled:hover { } /* 特定できない場合 */ .button:where(:any-link, :enabled, summary):hover { } } ポイント 1 マ... 続きを読む

Ionic 7.2リリース！Buttonのテキストが折り返される新機能が追加

2023/07/26 6 users angular ionic Sea 統合 テキスト

7月26日に、Ionicは最新バージョンであるIonic 7.2のリリースを発表しました。 このリリースでは、Button、Searchbar、およびAngularの統合が更新されます。 以下では、主な変更点について詳しく説明します。 7月26日に、Ionicは最新バージョンであるIonic 7.2のリリースを発表しました。 このリリースでは、Button、Sea... 続きを読む

divはボタンではない、ボタンの実装について知っておくべきすべてのこと

2023/02/09 160 users div 実装 buttonタグ divタグ HTML

クリックできるボタンを実装するとき、HTMLの何をよく使用しますか？ buttonタグ、もしくはdivタグ？ divを使用してはいけない理由、buttonを使用するときの注意点、場合によってはaがよい理由を紹介します。 Everything you didn’t know you need to know about buttons by Steve Sewell 下記は各ポイントを意訳したも... 続きを読む

React大好き侍が、「もうSolidJSでいいじゃん...//」ってなったワケ。 - Qiita

2022/05/30 202 users Qiita const Prev div ＡＤＤ

const Counter = () => { const [count, setCount] = createSignal(0) createEffect(() => { console.log(`Count: ${count()}`) }) //第２引数はありません。SolidJSが勝手に依存している状態を感知してくれます。 return ( <div> <div>{count()}</div> <button onClick={() => setCount(prev => prev + 1)}>Add</button... 続きを読む

Androidのアーキテクチャガイドから学ぶ、UIの状態管理手法

2022/03/22 17 users Android text アプリ 状態 2021年末頃

2021年末頃にAndroid公式ドキュメントにある アーキテクチャガイド が大幅にアップデートされました。 今回はその中でも UI Layerについての章 を取り上げて、アプリにおいてUIの状態をどのように管理するのが適切かについてまとめます。 UIとは？ そもそも UI とは、TextやButtonのような視覚的に表現される UI Element... 続きを読む

エラーは出ないけど…何か変？？Vue.jsでやりがちな「サイレント・ミス」（ロジック編） - ICS MEDIA

2020/07/16 355 users ICS MEDIA Vue.js エラー Props CLI

Vue.jsは初学者にもとても手厚いサポートを提供してくれるフレームワークです。 たとえば、以下のコードで「リセット」ボタンを押すと「propsのcountは子コンポーネントから変更すべきではない」とわかりやすくエラーを表示してくれます。 <template> <div class="CountViewComponent"> カウント={{count}} <button @cli... 続きを読む

[CSS] button要素のスタイルシート、最新テクニックを徹底解説 | コリス

2020/03/19 152 users コリス モーダル インタラクション button要素 CSS

<button></button>は最も使用されている要素の一つです。フォームの送信、モーダルを開く時、データを表示する時など、インタラクションのトリガーとして使用されています。button要素の詳細とすべてのブラウザで機能するようにスタイルを完璧に定義する方法について紹介します。 さらに、よく使用されるボタンのスタイ... 続きを読む

当たり判定が狭い広告の判定を検証してみた - Qiita

2018/12/24 185 users Qiita 判定 当たり判定 ネットサーフィン 日々

はじめまして。とょしんです。 Qiitaへの記事の投稿は初めてなのですが、 今日はAdvent Calendar15日目の記事として投稿させていただきます。 いや絶対押してんじゃん さて、ネットサーフィンをいていると時折遭遇するのが✗の小さすぎる広告。あの当たり判定の小さすぎるButtonにとって私は日々苦しめられています。あの... 続きを読む

GoでDialogsを使ったSlack Appを作る - shiimaxx's blog

2018/12/12 29 users textarea Slack text select MENU

このエントリは Go Advent Calendar 2018 12日目の記事です。 SlackにはInteractive frameworkという仕組みがあります。これによりButtonやMenuなどのインターフェースをユーザに提供することができます。 このInteractive frameworkのひとつとしてDialogsがあります。Dialogsは、Text、TextArea、Selectの要素からなる... 続きを読む

“ダッシュボタン”作れるデバイス、ソラコムが発売　省電力「LTE-M」を利用 - ITmedia NEWS

2018/07/04 70 users LTE-M ソラコム デバイス 省電力 ダッシュボタン

ソラコムが、「AWS IoT 1-Click」に対応するボタン型デバイスの提供を始める。Amazon Dash Buttonのように、商品の発注や、メッセージ通知などに使うボタンを開発できる。省電力の通信規格「LTE-M」を利用する。 ソラコムは7月4日、「Amazon Dash Button」のように、通知を送れるAmazon Web Service（AWS）のサービス 「... 続きを読む

Chromeでボタンをクリックしたときのフォーカスリング - fragmentary

2018/04/09 29 users GeckoTang fragmentary Chrome

2018 - 04 - 09 Chromeでボタンをクリックしたときのフォーカスリング geckotang が「 Chrome でボタンをマウスでクリックしたときにフォーカスリングが出たり出なかったりするのなんで」と言っていて、なんかお前調べろよ的な感じだったので調べることにした。 使うのは cs.chromium.org 。 <button> なので"HTMLButtonElement"で検索し... 続きを読む

<a>か<button>か - hitode909の日記

2017/12/07 91 users submit Form input type 観点 画面遷移

2017 - 12 - 07 <a>か<button>か クリックできるものがあって， <a> にするか <button> にするか，という話をしていて，いろんな観点があるなと思ったのでメモ． 単なる画面遷移なら <a> 単にformを送信したいときは， <input type="submit"> や <button> <button> はdisabled属性を使って無効状態にできるので，押せない... 続きを読む

Reactビギナーズガイド読んでよかったところ - hitode909の日記

2017/04/08 33 users Reactビギナーズガイド jsx class テクニック

2017 - 04 - 08 Reactビギナーズガイド読んでよかったところ 最初はJSXも使わず平易にスタートして，最終的にはワインを管理するアプリケーションを作る例が載っている． ビギナーズ向けだけど，おすすめテクニックが紹介されていて参考になった． よかったところ コンポーネント に コンポーネント 名のクラスを付与する Button コンポーネント ならclass="Button"をつけて... 続きを読む

Amazon Dash Button.push(GetWild) - Qiita

2016/12/10 19 users Qiita GetWild Amazon Dash アレ 背景

Get Wild Advent Calendar 2016 の11日目です。 tl;dr Amazon Dash Buttonを押したらGet Wildが流れるぞ Node.js初挑戦だったけど意外といけたぞ 動作環境 MacBook Pro OS X 10.11.6 Xcode 8.1 node.js v6.2.0 内容 背景 Amazon Dash Buttonって出たじゃないですか。 アレを... 続きを読む

【Unity3】uGUIでタイトルとゲームオーバー画面作成(前編)！Text, Button, Rect Transform【コインプッシャー5】 - Unity5(C#)初心者・入門者向けチュートリアル ひよこのたまご

2015/09/09 29 users uGUI text チュートリアル ひよこ たまご

2015-05-03 【Unity3】uGUIでタイトルとゲームオーバー画面作成(前編)！Text, Button, Rect Transform【コインプッシャー5】 Unity コインプッシャー uGUI チュートリアル いつもひよこのたまごをご利用下さいましてありがとうございます！ おかげ様でチュートリアル数も10ゲーム目となりました！ チュートリアル一覧は こちら からどうぞ！ スポンサー... 続きを読む

決済業界の人間なら読むべし：Andreessen HorowitzのWeChatの考察 » Finance Startups

2015/08/14 96 users WeChat Andreessen Horowitz 考察

久々の投稿です。 これからは、備忘録も含めて、もっとカジュアルに投稿していこうかと。 ButtonのMike DudasのTweetが最近大変勉強になるのですが、彼が決済業界の人間なら読むべし、と書いてるAndreessen HorowitzのWeChatに関するポストを読んだメモ。 “How WeChat works #2: Payments as a portal to a brave new... 続きを読む

オススメのXperiaテーマ20選 | orefolder.net

2014/10/11 45 users orefolder.net おすすめ ナビゲーションバー

Android4.3以上のXperiaはテーマ機能に対応しています。各テーマはapkファイルでPlayストアやその他で公開されています。これをインストールすると壁紙やアイコンはもちろん、設定画面の配色やbuttonなど、そして通知領域やナビゲーションバーのアイコンまでも変わるものがあります。 というわけで、オススメの物をまとめてみました。 ※公開されているテーマの中にはroot権限がないと壁紙以外... 続きを読む

こんな書き方できたんだ!? - griffin-stewieのブログ

2013/08/20 32 users griffin-stewie NSLog 書き方 コード 以下

2013-08-20 こんな書き方できたんだ!? 今日貯めてた Reading List を見てたらこんな記事が。 New thing I do in code 例 以下のようなコードが動きます。 self.downloadButton = ({ UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect]; NSLog(... 続きを読む

HTML5のさまざまなform要素があなたのブラウザでどのように見えるかのまとめ -Native form elements | コリス

2013/04/16 101 users コリス textarea Disable Option 装飾

HTML5のform要素、input, textarea, select, option, fieldset, legend, label, buttonの各要素とさまざまなタイプをまとめたサイトを紹介します Native form elements 各要素は余計な装飾がない状態で、上がデフォルト、下が入力不可のdisableです。 下記は、Chrome26 for OS XでのHTML5の各フォ... 続きを読む

js で利用する DOM の名前をどうやってつけたらよいのか - willnet.in

2013/03/03 238 users DOM update value class 名前

js で DOM をゴニョゴニョしたい時、きっと皆さんは id や class で DOM に名前を付けて、その名前を利用して js の処理を書いていると思います。 例えば<input type="button" class="update" value="更新" />のようなボタンがあったとして、 js 側で更新処理を書くときには下記のように書きます。 $('.update').on('clic... 続きを読む

面倒なシャドウもグラデも簡単に作成できるCSS3のボタンを作成するジェネレーター -CSS Button Generator | コリス

2013/01/15 206 users コリス ジェネレーター グラデ Shadow ブラー

ボタンのカラー、グラデーション、角丸、ブラー、テキストシャドウ、ボックスシャドウなど、さまざまなスタイルを簡単に適用できるCSS3のボタンを作成できるオンラインツールを紹介します。 CSS Button Generator 使い方は簡単です。 ボタンのColor, Size, Shadow(text), Shadow(button)のスライダーを変更すると、リアルタイムにボタンにデザインが反映され... 続きを読む

ALUMINUM HOME BUTTON: ｢カチッ｣となる音が最高に気持ちいい、アルミ製ホームボタンシール。 - たのしいiPhone！ AppBank

2012/11/01 47 users iPhone kazuend AppBank ライター 製品

ALUMINUM HOME BUTTON: ｢カチッ｣となる音が最高に気持ちいい、アルミ製ホームボタンシール。 カテゴリ: iPhone/iPadアクセサリレビュー | ライター: kazuend アルミ製ホームボタンシール、ALUMINUM HOME BUTTONの紹介です。 ALUMINUM HOME BUTTON を動画でチェック♪ @kazuendです。 こちらの製品を動画で解説しました。... 続きを読む