<form>の外側に送信ボタンを配置する
Web アプリなどの UI でよくあるのですが、フォームの外側に送信ボタンがあるようなデザインのときに HTML だけで解決する方法があるので紹介します。 form 属性で紐付け <input> 要素の form 属性に <form> 要素の id 属性値を指定することで、フォームと送信ボタンを関連づけられます。 <form id="signin"> <label> メールアドレス <input type="email"> </label> <label> パスワード <input type="password"> </label> </form> <input type="submit" form="signin" value="サインイン">
Internet Archive、Flashコンテンツをアーカイブ プラグインなしで21年以降も閲覧可能に
またFlashのswf形式ファイルを持っているクリエイターに対し、コンテンツを提供するよう呼び掛けた。Ruffleは開発途中のため、コンテンツのアップロードはテスト環境で試してから行うよう促している。 Internet Archiveは過去10年間、古いソフトウェアをWebブラウザで動作させるプロジェクト「The Emularity」を実施。その活動の一環として、今回のFlashコンテンツのアーカイブを行ったという。 関連記事 Microsoft、公式WebブラウザでのFlash終了について説明 Adobeが年末に予定している「Adobe Flash」終了に合わせ、Microsoftが自社のWebブラウザ（Internet Explore、Microsoft Edge Legacy、Chromiumベースの新しいMicrosoft Edge）でのサポート終了について説明した。 「さようなら
確定申告e-Taxがくそすぎる。
皆様におかれましても、今年の確定申告に向けて申告書を鋭意作成中のことと思います。 すでに散々論じられていることとは思いますが、この度マイナポータル、e-Taxを使用して本当にストレスで禿げそうだったので備忘録と同様の辛さを味わう方を救いたいという目的でこれを残しておきます。 スマホアプリ「マイナポータル」がただのバナーである 普通アプリとして存在してたらアプリ内で操作してると思うよね！残念！Sarafiでした！ スマホアプリ「マイナポータル」のQR"読取り"の位置が非常に分かりにくい 通常使用するユーザーの99%はそのままログインしてしまうのでは？"アプリ内(実際はブラウザだが)"をいくら探してもQR読取りマークがみつからない。ログインする前の起動画面の下にひっそりあるので探してみてください。 スマホで作成できると謳いながら、PC用画面で操作をさせられ続ける これは何かの試練ですか？お年寄
「JavaScriptで要素をドラッグして移動する簡単な方法」という記事が初耳だらけだった件 - Qiita
はじめに まず↓の記事を見てない方はぜひ見てください！ 自分にとってはこの記事には「えっ、ナニコレ！」なテクニックが多く、特に解説もなかったのでいろいろ調べてたら休日が消えてました... なのでその時間の供養もかねて、自分が知らなかった部分を中心に、僭越ながら元記事の解説を書いてみたいと思います。 ちなみに、以下が元記事のコードそのままを実装したものです。たしかに掲載コードだけで要素がグリグリ動きますね。 See the Pen js-drag-move-original by www-tacos (@www-tacos) on CodePen. 初耳1: $img まずコードのここ <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove
VSCode + WSL makes Windows awesome for web development
I’m kinda shocked. Windows actually got good for web developers. Between VSCode, WSL, and Intel’s latest desktop chips, I’ve been living with a PC for over a week that runs my programming tests faster than an M3 Max, ships with an excellent window manager out-the-box, and generally feels like a completely viable alternative to macOS for working with the web. Hell, not just viable, but better in ma
リツイート固有のIDを取得してリツイート独自のURLを把握する方法 – iC弁護士 齋藤理央 BLog
ツイッターで知ったのですが、リツイートには固有のID番号（SortIndex、id_sor）が振られており、そのリツイート固有のID番号を調べることができ、さらに、ツイート固有のID番号をURLに入れて検索すると、独自のウェブページで閲覧できるということです。 詳しい方法は、下記のリンク先のNOTEで、記事にしてくださっています。 実際にリツイートの固有IDを調べてみた結果 そこで、NOTEで紹介されている方法で実際にリツイート固有のIDを調べてみました。NOTEでも注記されていますがJSON（JavaScript Object Notation）ファイルのファイル名はツイッターを利用している環境でも異なるようです。 そこで、ツイッターのタイムラインを開いて、Google ChromeのデベロッパーツールでNetWorkに表示されるJSONファイルをひたすら確認します。 かなりのファイルの
Google、検索結果からキャッシュへのリンクを削除 「cache:」も近い将来廃止へ
Googleが検索結果から、キャッシュされたページへのリンクを削除しました。 検索結果からキャッシュへのリンクがなくなっている 数日前から削除されていると指摘 Google検索ではこれまで、検索結果にキャッシュへのリンクが添えられていました。キャッシュされたページは、当該ページが見られない場合や、当該ページの古いバージョンを見たい場合に利用されていました。 数日前から、検索結果からキャッシュへのリンクがなくなっていると一部で指摘されていました。Googleは公式X（Twitter）アカウントで、ユーザーから「検索結果からキャッシュのリンクはなくなったのか」との問い合わせに、「削除されました」と回答。 「悲しいことです。Googleの最古の機能の1つでした。しかし、キャッシュのリンクはページを表示できないことが多かったときに、ページにアクセスするのを助けるためのものでした。今では大幅に改善さ
プログラミング言語 HTML 入門
はじめに 以前 uhyo さんにより「HTML はプログラミング言語である」と示されたことは記憶に新しいところですが、昨年末の HTML, The Programming Language の登場により、その主張はより強固なものとなりました。現代ではもはや、HTML は立派なプログラミング言語であるということは疑いようがありません。 この記事では、プログラミング言語 HTML, The Programming Language について、その概要と基本的な文法について説明します。そして最後に、HTML プログラミングの応用例として FizzBuzz やフィボナッチ数列の実装例を見ていきます。 HTML, The Programming Language HTML, The Programming Language (以下 HTML と略します) は、HTMX を開発していることで有名な B
もうjsなんていらない！世界で流行っているHTMXについてまとめてみた - Qiita
HTMXとは HTMXは、JavaScript を記述せずに、Ajax通信や高度なUXを実現できるライブラリ。 軽量 で 高速 で、既存のサーバーサイドのフレームワークとシームレスなやり取りができる。また、AJAX通信の発火、フォームの送信処理、DOMの更新などを既存のHTML要素を拡張するだけで可能とする。WebSocketやSSEにも対応しているので、チャットアプリなどにも適している。 2023 JavaScript Rising Starsでは、 フロントエンド・フレームワーク部門で見事2位に輝いた！(一位はReact、全部門だとshadcn/ui) 似たような機能として、Ruby on RailsのHotWireがあるらしい。 2024年はHTMXがくると言われているぐらい世界で騒がれているのだが、あまり日本では流行っていない。以下はGoogleトレンドで調べた結果である。 アメリ
慶應義塾 塾員（卒業生）ホームページ
2024/03/08 2024年3月卒業の皆様へのお知らせ（卒業後の住所変更等） 2024/02/22 2024年3月の社中交歓萬來舎の営業に関して 2024/02/09 2024年2月入試期間中の社中交歓萬來舎の営業に関して 2024/02/02 2024年度春学期 公開講座慶應外語(オンライン講座) 2/14受講生募集開始 2024/01/24 卒業25年・50年塾員招待会について （1999(平成11)年・1974(昭和49)年ご卒業の方対象） お知らせ一覧へ 慶應義塾公式ウェブサイト ご支援をお考えの皆様 （寄付・基金・維持会） 慶應義塾公式グッズ 慶應義塾大学病院 慶應連合三田会
NHK独自記事がインターネットから消される？ この新聞社の圧力がすごい【2024年版追記あり】 - フジイユウジ::ドットネット
ちゃんと裏取りされたニュースや丁寧につくられたインターネットコンテンツが読める時代の終わりが来るかもしれない。 正直、もう手遅れだとは思うけど、いまからでも「えっこんなことになっていたの」と思って動く人がいれば少しは何かが起きるかもしれないので書く。 ■すべてがわかる要約 NHKと総務省「震災やコロナで、ラジオとテレビだけじゃダメとわかった。国民に必要な情報を届けるにはWebやアプリやSNS、様々な経路をもつ公共メディアが必要なんや」 新聞各社「NHKは放送だけやれや!! ネットの特集とか気合入れたコンテンツやめろ!!!!」 総務省「それもそやな。NHKくん、ネット情報はテレビラジオ関連だけにしてもろて」 NHK「……日本に必要な取り組みだけど、逆らえないよ(´・ω・`)」 ぼく「まさか現代でメディアのネット活動を制限するわけない………えっ本当に制限するの!?!?インターネットがゴミ情報だ
WebAssembly の過去・現在・未来 - Qiita
はじめに WebAssembly (略して Wasm) では WASI や WIT、 Component Model など様々な仕様があります。 それぞれが登場した背景、モチベーションなどを理解することでなんとなく概要を掴んでいくことができるのではないかと考えたため、過去・現在・未来と時間軸で整理してみました。 まず Wasm とその特徴に関して簡単に紹介した後、Wasm の過去として生まれた背景やモチベーションを紹介します。 そして現在の Wasm がなぜ注目を集めているのか、そして現在策定中の仕様と目指している未来について紹介します。 WebAssembly とはなにか WebAssembly はスタックベースの仮想マシン用バイナリ命令フォーマットの仕様です。Wasm と略されます。 Wasm ファイル(Wasm モジュール)は一般に .wasm という拡張子で表されるバイナリファイル
「キナ臭い」「裏がある」 公安調査庁HPから消えた国際テロ組織情報 担当者に真意を直接聞いてみた | 上毛新聞社のニュースサイト
「ミャンマーの項目が消えたぞい」「PKKのページがない？」―。公安調査庁がホームページなどで公表する「国際テロリズム要覧」で「テロ組織」として挙げていた情報が大幅に削除され、X（旧ツイッター）で憶測を呼んでいる。同庁によると、11月24日にウェブ版を更新したことで、複数の「テロ組織」に関する情報がなくなったという。世界各地で紛争が相次ぐこのタイミングでなぜなのか。ミャンマーの少数民族ロヒンギャの取材を続ける上毛新聞も同国の治安情勢を注視しており、広報担当者に真意を尋ねた。 国際テロリズム要覧は、国際テロリズムの潮流や組織の実態を把握し整理するため、公安調査庁が1993年から発刊している。今年9月下旬、通算で第20版となる2023年版を発行した。24日に更新されたのがこのウェブ版だ。 最新版の内容を22年版と比較すると、「主な国際テロ組織等の概要及び最近の動向」と題した項目では、トルコでクル
CSSの進化がすごすぎる！ 2つの画像を比較するスライダーは数行のコードで実装できるようになりました
2つの画像を重ねて表示し、画像を比較できるスライダーを実装するには、今まではJavaScriptのライブラリなどを使用していたかもしれません。 ほんの少しのJavaScriptと、あとはシンプルなHTMLとCSSで2つの画像を比較するスライダーを実装するテクニックを紹介します。 まずは、実際の動作をデモページでご覧ください。縦線のレンジバーをマウスでドラッグすると、2つの画像を比較できます。 See the Pen Easy comparison slider by coliss (@coliss) on CodePen. HTMLはシンプルです。2つの画像をsectionで内包し、縦線のレンジバーをinput type="range"で実装します。 <div class="compare"> <section class="before"> <img src="Runner.svg" a
なぜ HTML の form は PUT / DELETE をサポートしないのか? | blog.jxck.io
Intro 10 年ほど前に同じことを調べたことがある。 なぜ html の form は PUT / DELETE をサポートしないのか? - Block Rockin' Codes https://jxck.hatenablog.com/entry/why-form-dosent-support-put-delete 当時は全くの素人で、素人なりに調査はしたが、ほとんどが推測の域を出ない結論だった。 この問題についてあらためて記す。 仕様策定の経緯 表題の通り、 <form> の method には GET と POST しかサポートされていない。 HTTP には他にも PUT や DELETE といったメソッドもあるのに、なぜサポートされていないのかという疑問から始まった。 仕様が決定した経緯は、以下に残っている。 Status: Rejected Change Descriptio
【朗報】著作権訴訟で広告ブロッカーが勝訴
Adblock Plusを運営するeyeo社は、ドイツの出版社アクセル・シュプリンガー（Axel Springer）との長期にわたる法廷闘争でまたもや勝利を収めました。 ハンブルクの裁判所は、「広告をブロックするためにウェブサイトのHTMLコードを変更することで広告ブロッカーは著作権を侵害する」と主張する出版社側の訴えを退けた。 もし裁判所が出版社側の味方をしていれば、広告をブロックしたり、アクセシビリティのためにウェブページの配色を変更したりするなど、ウェブサイトのコードを変更しようとする試みは著作権侵害とみなされ、ウェブサイトの所有者から停止命令を受ける可能性があったかもしれない。 （参考までに、HTMLはウェブの95%を構成している。） eyeoはブログ記事で、拡張機能開発者やブラウザだけでなく、一般のインターネットユーザーも影響を受け、損害賠償の支払いを余儀なくされる可能性があった
“危険走行”電動キックボードで死亡事故も…運営するサービス事業者を直撃した | 日刊SPA!
道路交通法の改正によって、7月1日から規制が緩和された電動キックボード。16歳以上なら免許不要・ヘルメットなし（努力義務）で乗れるようになり、一定条件下での歩道走行も可能になった。 これ以降、SNSなどでは信号無視などの危険走行を撮影した写真や映像が散見されており、かねてより指摘されていた危険性が現実化している。 電動キックボードの危険性については様々な意見がある。例えば7月25日に国土交通省と警視庁が渋谷で実施した取り締りでは、取り締まった電動キックボードのうち保安基準不適合などの問題があったのは個人所有の3台のみで、シェアリングサービス事業者の13台にはいずれも問題がなかったとしている。一方で、9月1日の警察庁の発表では、7月中の全国での信号無視などによる摘発は406件あり、事故は7件発生したとしている。 このデータだけでは危険か否かを即断することはできない。ただ、街頭のみならずSNS
Apple storeの「まもなくです」は、実は「503」エラーである - CLAYPIER
2020年11月06日 22:59 情報が古くなっている場合があります。 Apple storeの「まもなくです」は、実は「503」エラーである 今日の午後10時から iPhone Pro Max と Mini がようやく予約注文可能となり、まだかまだかと10時になった瞬間、更新ボタンを押すと「まもなくです」と黒い画面が表示されて、10分経ってもまったく変わらなという経験をされた方も多いのではないだろうか。 今までは「まぁ、色々準備してるのかな～」ぐらいに思っていたのだが、実はこれ、外見からはまったく分からないが「503」エラーなのである。 503エラーとは、サーバーにアクセスが集中しすぎて処理しきれなくなったときに表示されるものだ。 Google Chrome のコンソールを見ると、たしかに503と表示されている。 Apple はエラー画面もオシャレ。 ストアに繋がるかは運次第！！ Go
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ヘッドレスCMSの使い分け
JavaScriptでconsole.logを使用してませんか？
