サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1.HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
「とほほのWWW入門」管理人の杜甫々氏が、これまでの経歴と、「とほほのWWW入門」執筆時に気を付けていること、自身の趣味について話しました。全2回。前回はこちらから。 今まで勉強してきた言語杜甫々：今日はYAPC、Perl（のイベント）なので、プログラミングに関してのことをちょっとしゃべります。 （スライドを示して）今までこんな言語の勉強だけしてきました。よく使う言語はC言語が最初で、C++、そこから掲示板を作っていた頃はPerl。そこからPHPに移って、今はPython、JavaScriptが多いですかね。あとはたまにAWKをまだ使っています。Perlの好きなところ、今後サポートしてほしいところ（スライドを切り替えて）えっとー…。謝ります（笑）。 （会場拍手） ずいぶん昔にPerl入門を書いたんですが、ほったらかしになっていて。今回このお話をいただきまして「それじゃあ、やはりいかんだろ
ウェブページ上には「クレジットカード番号」「郵便番号」「電話番号」といった数値の入力欄が存在することがありますが、実装方法によってはブラウザの挙動によって入力内容が変化してしまったり、テンキーでの入力を受けつけなくなってしまったりします。そこで、数値入力欄の実装時に気を付けるべき点をまとめてみました。KeyboardEvent - WebAPI | MDN https://developer.mozilla.org/ja/docs/Web/API/KeyboardEvent Why theGOV.UK Design System team changed the input type for numbers –Technology ingovernment https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-desig
本ハンドブックは、 すべての利用者がウェブサイトを利用できるようにするために、開発者の視点から WCAG 2.0（JIS X 8341-3:2016）の達成基準を 「概要、実践すべきこと、運用者への注意、開発者への注意」に分けて、要点をシンプルにまとめています。 アクセシビリティの最初の一歩として ウェブアクセシビリティを向上させるための第一歩として、以下の2点を確認することをお勧めします。 キーボードのみでサイトを操作できるか？ サイト内をタブキーで移動でき、重要なボタンやリンクにフォーカスが当たるかを確認しましょう。 スクリーンリーダーで正しく読み上げられるか？ NVDAやVoiceOverなどのスクリーンリーダーを使用して、コンテンツが自然に読み上げられ、必要な情報が漏れていないかを確認してください。 まずはこれらの点を確認し、その後のステップとして「運用時のウェブアクセシビリティの
見えない人はWebをどう閲覧？ 本紙サイトの課題にがくぜん、求められる「不十分と認める勇気」【動画も】
Webサイトを運営していると、引用・参考などでリンクを設置する場面があります。 リンクは常に有効というわけではなく、何らかの原因でリンク切れになってしまう可能性があります。リンク切れを放置しておくと、ユーザビリティが下がるだけでなくSEOでも不利になりかねないので、対策が必要になります。 今回は、リンク切れチェックツールの中でおすすめのものをご紹介します。全てのリンクを手動でチェックするのは膨大な手間が作業です。リンク切れを一括でチェックできるツールを利用しましょう。 リンク切れのチェックにはツールがおすすめ 一般的に、リンク切れとはリンク先のページに「404 not found」と表示される状態で、表示するべきページデータが見つからない状態を指します。 リンク切れは、リンク先サイト自体の削除やページの削除など様々な原因で発生します。リンク切れを放置する問題点は以下の2つです。 ユーザビリ
テキストサイト風なウェブサイト 以前からはてなブログ以外の個人サイトを作ろうと思っていたのですが、 ようやく"クラフトインターネット的"なウェブサイトを 独自ドメインでひとつ作ってみました。 ・・・とりあえずは1年限定で公開しようと思います。 nejimaki.me ドメインはシンプルに「nejimaki.me」。 外観デザインはこんな感じで、海外のテキストサイトみたいなイメージ。 ここからは、 「マイクロブログでねじを巻け」に載せている内容を軽く紹介しようかと。TOP10リスト ねじまきの好きなバンドや 好きな食べ物、 好きなアスリート、都道府県、海外 など、 いろんなものの「トップ10リスト」を公開してます。 (恥ずかしいやつだけど、こういうのが個人サイト的なんだよね) これからも追加していく予定なのでよければたまに見てやってください。Fediverse(ActivityPub)
追記 作者のcatnose99さんがより詳細を解説してくださいましたzenn.dev /追記 ポエム特化のZenn2との噂の「しずかなインターネット」を使いはじめたので、ユーザーとしてどんな技術が使われているのかを確認していく。 sizu.me おもむろにbuiltwith.comにかけてみる。 builtwith.com ここで分かる情報はブラウザのDevTools眺めてても得られるのであまり収穫はない。 前段にCloudflareのCDNサーバーがいてNext.jsで生成されたレスポンスを返している ことがわかる。 この時点ではキャッシュのみCloudflareなのか、Pages/WorkersでNext.jsのSSRごと動かしているのかは判断できない。 認証 Set-Cookie: __Secure-next-auth.session-token=が含まれているのでNextAut
こんにちは。伊原 力也（@magi1125）と申します。業務アプリケーションのデザイナー、デザインチームのマネージャー、アクセシビリティ関連のコンサルタントなどをやっています。 ウェブアクセシビリティを普及啓発する活動を始めて10年が経ちました。おかげさまで興味を持ってくれる人はかなり増えたと感じています。しかし、人が増えると声は届きにくくなります。「アクセシビリティをどこから学び始めていいかわからない」という意見も目にするようになってきました。 また、私はこれまでにアクセシビリティに関する書籍を何冊か書いていますが、専門書ってちょっと高いので、興味があるぐらいの段階で本を買うのはちょっと……という気持ちもわかります。 ということで、これまで自分が発信したり関わったりしたコンテンツのうち、ウェブアクセシビリティの理解の助けになりそうものをベストアルバム的に一度まとめてみることにしました。
今回、個人開発で1年もの歳月をかけて mosya というコーディング学習サービスを開発しました。 主なターゲットはWeb制作者を目指している方 で、Progateの次の学習に悩んでいる方や一からWeb制作を学びたい方、企業のWeb担当者の方などを想定しています。 どんなサービスか 模写を通してWeb制作の基礎を学ぶmosyaというサービスを開発しました。 専用のエディター内蔵で実際に手を動かして見本を参考にしながら模写をすることで、 体系的にWeb制作を学ぶことができます。 操作感がわかりやすいように動画を用意しましたので、ぜひご覧ください。 なぜ作ったのか 動画だけではなく手を動かして体系的に学べるサービスを作りたいWeb制作を学ぶ上ですでにたくさんの教材はあるのですが、部分的な知識を学ぶに過ぎない教材が多く、実際に見本のサイトを完成させられるようになるまでには至らないと感じていまし
ChatGPTを使用するとWeb制作で困ったときやプログラミングの勉強をしていて知らないことが出てきた時に素早く調べることができる…はずでした。 なぜ「できます」ではなく「できるはずでした」と記載しているのかと言うと、高品質な回答を得るためには質問文に毎回さまざまな定型文を記載しなければならない、回答が表示されるまでに時間がかかるなど、意外と面倒なことが多いからです。ChatGPTで高品質な回答を得るために たとえばWeb制作全般に関して質問するときは「あなたは世界最高のWeb制作者です。」と質問文の先頭につけると良いです。 あるいは、質問する方がプログラミングを学びたての初心者の方であれば「プログラミング初心者でも理解できるようにわかりやすく解説してください」と質問文の最後につけると良いです。 さらに重要なのが「英語で調べて日本語で回答してください」と最後に付け加えることです。 これは
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフーTechBlog こんにちは、広告エンジニアの中山です。 唐突ですが、みなさまの Web アプリケーションに User-Agent 文字列を参照する処理はありますか？ User-Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko)Chrome/93.0.1234.56 Safari/537.36例えば User-Agent 文字列を解析して内容に応じて制御を分岐させたり、機械学習の特徴量として用いたり、さらには一般に悪しきユースケースとされていますが IP アドレスと組み合わせて fingerprinting に活用する … と
はじめに こんにちは。弁護士ドットコムUXエンジニアの白井です。社名にもなっている弁護士ドットコム というサービスを運営する専門家プラットフォーム事業本部に所属し、普段は開発業務やユーザーリサーチに携わっています。 この記事では、デザイナーとエンジニアが日々の開発を行ううえで課題となっていたHTML テンプレートの実装方法について、どのようなプロセスを通じて改善していったのかについて詳しくご紹介します。 はじめにHTML テンプレートとはHTML テンプレートを扱う仕組みHTML テンプレート開発上の課題 なぜHTML テンプレートが重要か (1)HTML マークアップの品質に悪影響がある (2) 開発効率への影響が大きい "Tech Focus Day" のテーマとして改善活動を開始 いきなりのピボット。そして本当に必要だったもの あらためて問題定義HTMLテンプレー
最近はCloudflare Workers ばっかりいじってて、フレームワークまで作ってるのですが、これ、ちゃんとやればそれなりの立派な Web サイトができるので、紹介します。 できたサイト 「家系ラーメン食べたい！」というサイトを作りました。 管理者の僕が家系ラーメンを登録できて、トップでは一覧で見れて、 詳細ページに行くと写真と紹介文が見れます。 質素に見えますが、 コンテンツ（ラーメン屋）をどんどん追加できる。 プロパティを追加することも可能。 画像はリサイズされる。 速い。OGP ちゃんと設定している。 favicon.icon もやってる。 と、「ちゃんと」してます。そう、ちゃんとしてます。 では、どう作っていくか。Cloudflare WorkersCloudflare Workers 、そのユースケースについて。 CDN のエッジで実行される、ということでスクリプト
Google検索で情報を探そうとして、検索結果に並ぶページのタイトルが不自然な途切れ方をしていたり、省略されて内容がよく分からなくなったりしているのを目にしたことがある人は多いはず。Googleはよくページのタイトルを勝手に書き換えるので、コンテンツの制作者が意図したものとは違ったタイトルが検索結果に表示されることがしばしば発生します。そんなGoogleによるタイトルの書き換え対策について、検索エンジン最適化(SEO)対策ソフトウェアを手がけるZyppyのサイラス・シェパードCEOが解説しました。 We Studied 81,000 Page Titles -Google Rewrote 61% Of Them https://zyppy.com/blog/google-search-title-rewrite-study/ ページのタイトルは、Google検索をしたユーザーの目に最初に
QRコードリーダーの開発などを手掛けるメディアシークは1月11日、アクセス先Webサイトの引っ越しなどでドメインが変わっても常に目的のページに誘導できるQRコード生成サービスを開発したと発表した。このサービスで生成したQRコードであれば、パンフレットやポスターなどに印刷され古くなったQRコードからでも正しいWebサイトにアクセスさせられる。 サービスの管理画面であらかじめ指定した情報やWebサイトを表示できる。情報やドメインの変更時に登録情報を更新することで、同じQRコードでも常に最新の情報に案内できる。QRコードの読み取りに専用の機器やアプリは不要。 自治体や企業がWebサイトを引っ越す際に、悪意のある第三者に引っ越し前のドメインを取得され、詐欺サイトなどに作り替えられるケースもある。古いQRコードを放置していると、ユーザーが知らずに詐欺サイトにアクセスし、被害に遭ってしまう。正しい遷移
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフーTechBlog こんにちは。Yahoo!ニュース を担当しているエンジニアの喜楽です。 今回は、Yahoo!ニュースが取り組んでいるブラウザバック時の表示最適化手法について紹介します。 なぜブラウザバック時の挙動に注目するのか ユーザーがYahoo!ニュースのページを閲覧し、別のページに遷移する方法は大きく分けて以下の2つが考えられます。 （A） リンクをたどってページを遷移する （B） ブラウザーのナビゲーションボタンまたはスワイプ操作によって遷移する 「戻る」による遷移（ブラウザバック） 「進む」による遷移（ブラウザフォワード）Yahoo!ニュースでは総PVのうち一定程度が(B)のブラウザバックまたはブラウザフォワードによるページ遷移時のも
おひさしぶりです。この記事はクソアプリ Advent Calendar 2021の13日目です 突然ですが皆さんは「スクロールに合わせてふわっと出てくるwebページ」ってどう思います？ 最近多いですよね、あれ。 確かにオシャレだし楽しいしゲームとか作家さんのギャラリーサイトとかなら全然OK。でも情報が欲しくてアクセスしてるページで「ふわっ」ってされるとちょっとイラッとする。 ちょっと？...イラッと？...いや、 許さない、絶対 よろしい、ならば粉砕だ よそ様のサイトを粉砕する都合上、今回の実装はChrome機能拡張です。機能拡張はViteにChrome機能拡張用のプラグインvite-plugin-chrome-extensionを入れて作りました。今回は解説しないけど、これ超楽。フレームワークは無し、言語はTypeScriptです。 とは言え、クソアプリのためにChromeに機能拡張をイ
Intro 筆者は、Web のセマンティクスに対する実装の方針として、大きく Push 型の実装 と Pull 型の実装 があると考えている。 もっと言えば、それは実装方法という具体的な話よりも、開発者のセマンティクスに対する態度を表現することができる。 この話は「Push よりも Pull が良い」などと簡単に切り分けられる話ではない。 「自分は今 Push で実装しているのか、Pull で実装しているのか」この観点を意識するかしないかによって、セマンティクスに対する視野が広くなり、その応用として、たとえば今自分が行っている実装が、将来の Web においてどのような互換性の問題を生じるかなどを想像できるようになるだろう。最近問題になる Ossification を、こうした視点の欠如の結果とみることもできる。 (本エントリでの Ossification は、一般に言われている Proto
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
