山手線を徒歩で一周する人のための記録アプリ「YamaNotes」をリリースしました - すずかのプログラミング勉強記
はじめに 山手線を徒歩で一周する人のための記録アプリ「YamaNotes」をリリースしました。 この記事では「YamaNotes」の使い方や、開発過程で苦労したことなどをまとめます。 6/14追記：東京の気温が高くなることが予想されています。熱中症予防のため、涼しくなってからの挑戦をおすすめします。 サービスURL www.yamanotes.com リポジトリ github.com はじめに 自己紹介 アプリの概要 山手線徒歩一周チャレンジとは？ 使い方 ログインする 初期設定をする 進捗を確認する 到着する 履歴を確認する 開発に至る経緯 技術スタック 技術選定の理由 短期間で必要な機能を作るため、Rails7とHotwireで実装 コストを抑えて作るため、APIやデプロイ先を調査 地図の表示と描画にLeaflet + OpenStreetMapを使用 Render.com + Sup
これは簡単で便利！ レスポンシブ対応のフォントサイズをCSSのclamp()関数で定義できるツール -Type Fluidity
フォントサイズをレスポンシブ対応にするときに、最近よく使用されている実装方法はclamp()関数による流体タイポグラフィです。CSSのclamp()関数を使用するとフォントサイズの最小値と最大値を定義してその間の値を流動的にすることができ、デバイスのスクリーンサイズが増えた現在に欠かせないテクニックです。 CSSでレスポンシブ対応のフォントサイズを超簡単に定義できるオンラインツールを紹介します。 Type Fluidity -GitHub Type Fluidityの特徴 Type Fluidityの使い方 Type Fluidityの特徴 流体タイポグラフィ（Fluid Typography）は、フォントサイズをレスポンシブ対応にする最新テクニックです。さまざまなスクリーンサイズに応じて固定値を定義する代わりに、CSSで単一の流体値を定義して、フォントの最小値と最大値の中でスクリーンサイ
インストールが完了したらアドレスバーに chrome://flags と入力して設定画面を開きます。以下の 2 つのフラグを設定します。 Enables optimization guide on device: Enabled BypassPerfRequirement Prompt API for Gemini Nano: Enabled また、あらかじめ Gemini Nano のモデルをダウンロードしておく必要があります。アドレスバーに chrome://components/ と入力して Optimization Guide On Device Model の「アップデートを確認」をクリックします。 Gemini Nano を使ってみる それでは、Gemini Nano を使ってみましょう。以下のコードをコンソールに貼り付けて実行します。 const canCreate = aw
前回の記事『2024年版 HTMLで作るフォームバリデーション』ではHTMLの機能を駆使したフォームバリデーションの実装について解説しました。HTMLのみでも高機能なフォームを作成できるのは解説したとおりですが、HTMLに加えてJavaScriptを組み合わせることでより高機能なフォームを作成できます。それに加えて、開発者体験の向上も期待できます。 本記事では3つのライブラリを使用して実践的なフォームを作成する方法を解説します。 UIライブラリ「React」 フォーム向けライブラリ「React Hook Form」 型システムと相性の良いスキーマバリデーションライブラリ「Zod」 また、静的型付け言語であるTypeScriptもこれらのライブラリと同時に使用し、堅牢なフォームの実装を目指します。 本記事を読むことで以下の知識が身につきます。 フォーム画面のユーザー体験（UX）と、フォーム実
シンプルなHTMLで、レスポンシブとライト・ダークモード対応のモダンなWebページを簡単に作成できる超軽量CSSライブラリ -matcha.css
シンプルなHTMLを使用して、レスポンシブ対応、ライト・ダークモード対応のモダンなWebページを簡単に作成できる超軽量CSSライブラリを紹介します。 シンプルなWebページやポートフォリオ、プロトタイプなどをすばやく作成したい時に便利で、ベースにしてリセットCSSの拡張版としても利用できます。 matcha.css matcha.css -GitHub matcha.cssの特徴 matcha.cssの使い方 matcha.cssのデモ matcha.cssの特徴 matcha.cssは、classレスでHTMLのあらゆる要素にシンプルで読みやすいスタイルを設定するように設計されたCSSライブラリです。ライト・ダークモード対応で、テキストはユーザー設定が尊重された適切なスペースで配置され、ナビゲーションやフォームなども非常に見栄えがします。 matcha.css HTMLで作成された静的ペ
Googleのチームが開発したPython用のUIフレームワーク「Mesop」の特徴や使い方について、開発チームがブログに投稿しています。 Why Mesop? - Mesop https://google.github.io/mesop/blog/2024/05/13/why-mesop/ 多くのPython用UIフレームワークは簡単に使い始められるものの、標準的な使用方法を超えてカスタマイズを行おうとするとJavaScriptやCSS、HTMLの詳しい知識が必要です。MesopはPython内で動作を完結させることでよりPython開発者にとって扱いやすいUIフレームワークになっています。 MesopはコンポーネントベースのUIフレームワークで、UI全体がコンポーネントと呼ばれるブロックを積み重ねて作成されています。Pythonの関数を呼び出すのと同じ要領でMesopのコンポーネントを
メルカリ ハロ Webフロントエンドの開発スピードと品質両立の取り組み | メルカリエンジニアリング
こんにちは。メルカリのSoftware Engineerの@tanashoです。連載：Mercari Hallo, world! -メルカリ ハロ 開発の裏側-の6回目を担当させていただきます。 メルカリ ハロのWebアプリケーションは複数存在し、Webフロントエンドチームが横断的に開発をしています。本記事では、その前提を踏まえ、スピードと品質をどのように両立させて開発しているかを紹介します。 プロジェクトの概要とWebフロントエンドの担当領域 メルカリ ハロは「あたらしい出会いを繋ぎ、信頼と機会をひろげる」がミッションで、いますぐ働き手が欲しいパートナー (事業者) と、いますぐ働きたいクルー(働き手)を繋げるサービスです。クルーは自身のスキルや時間を活用して働くことができます。 メルカリ ハロは複数のアプリケーションが存在し、そのなかでWebフロントエンドが関わる領域として以下の3つが
SVG アイコンの表示に mask-image CSS プロパティを使用する 2024.06.15 mask-image プロパティは CSS でマスキングを行うためのプロパティであり、SVG アイコンを表示する際に有用です。mask-image プロパティを使用することで、外部の SVG ファイルを読み込みつつ、アイコンの色を CSS で指定することが可能になります。 HTML でロゴやアイコンを表示する時、SVG はよく使われるフォーマットです。SVG はベクター形式で記述されるため、拡大・縮小しても画質が劣化しないという特徴があります。SVG を HTML で表示する場合、以下のような方法が使われていました。 <img> 要素の src 属性に SVG ファイルのパスを指定する <svg> 要素を直接記述する svg スプライトを使用する それぞれの方法にはメリット・デメリットが存在
今さら？個人サイトを作りました - 誰がログ
はじめに 経緯と作った理由 Googleに見つけてもらえなくても良い このブログとの関係（今後の方針） おまけ：Wordpress雑感 おわりに はじめに 新たに個人サイトを作りました。 ttagawa-dlit.info さいきんこういうニュースを定期的に見るようになりましたので今さら感があると思いますが、 Googleからウェブサイトへのトラフィックがゼロになる日 – WirelessWire News むしろこういう状況だから作ろうかなと思ったというところがあります。 経緯と作った理由 元々別のドメインで個人サイトを持っていたのですが、ドメインの更新をミスって（期限の勘違い）なくなってしまいました。 しばらくは、このはてなブログとTwitterでwebでのつながりはほとんどカバーできているのでもう一度新しく作ることもないかなと思っていたのですけれど、研究に関する情報公開の場としてはな
これなに？ モチベーション 使った技術 工夫ポイント 配布形式をどうするか GoでGoogleライクな検索クエリで文字列マッチするような関数を作った 取得したフィードを一瞬だけキャッシュする バイナリにviewを同梱する 最近のエコシステムに乗っかる 2024/06/14 13:28 追記：ブコメレス これなに？ RSSフィードを任意のキーワードで絞り込んだ結果をさらに別のフィードとして返すためのproxy的なウェブアプリです。 github.com モチベーション 僕はSlackで色々なRSSフィードを購読しています。 YouTubeのチャンネルにもRSSフィードが存在しているのでSlackで購読しています。 例えば 東映アニメーション公式YouTubeチャンネル - YouTube にはプリキュアをはじめとして様々な動画が公開されています。その中でプリキュアに関係する動画だけをSlac
CSSのメディアクエリでcalc()が使用できるの知ってた？
CSSのメディアクエリでcalc()が使用できるのを知ってましたか？ これは6/6,7に開催されたCSS Day 2024で共有されたときに、多くのビジターが驚いたとのことで、私も知りませんでした。 メディアクエリは比較...記事の続きを読む
こんにちは！ Chrome 111からView Transitions APIが利用可能になりましたが、今まで試す機会がありませんでした。 今回満を持して試してみたところ非常に面白かったので、この記事で共有したいと思います。 また、2024年6月11日にリリースされたChrome 126からView Transitions APIが強化されましたので、その点についても触れてみたいと思います。 View Transitions APIとは View Transitions APIは一言で言うと、 異なる DOM 状態間のアニメーション遷移を簡単に作成する仕組み だそうです。 ほう...？？🤔 百聞は一見にしかずということで、以下のサイトにView Transitions APIを使ったデモがわかりやすくまとまっており、イメージがつきやすいので触ってみてください！ View Transiti
ブログサービスは結構な数が存在します。中には完全に無料で使用できるものも存在しますが、無料なだけあって制限というものもあります。 今回の記事では、ブログを新しく始めてみたいという人向けに簡単な解説を交えて使用感を述べていきます。 無料で使った場合のブログサービス はてなブログ FC2ブログ(爆速テンプレート) ライブドアブログ Blogger まとめ 無料で使った場合のブログサービス はてなブログ 良い点 編集画面が書きやすい レイアウト編集がしやすい 利用者が多く専用のコミュニティがある はてなドメインでAdSense申請可能 はてなドメインが検索に強い 悪い点 独自ドメインが使えない 広告が多い 重い AdSenseとの相性が悪い まずはこのブログでもお世話になっているはてなブログから。記事およびレイアウトの編集が比較的簡単、そして専用コミュニティのおかげで拡散が簡単という初心者にまず
はじめに 前回初めて記事を書かせていただきましたが沢山の方々が見てくださり、いいねやストックしていただき本当にありがとうございました。 ［前回の記事はこちら］ 今回も未経験の方が参考になればいいなと思いながら記事作成いたしましたので読んでいただけたら嬉しいです。 私のエンジニア経歴 まず、はじめに私のエンジニアの経歴を紹介いたします。 ①大手通信キャリア向けデータセンター運用・保守 オペレーターとして従事 ②事業者向け給付金BPO業務 スーパーバイザーとして従事 ③飲食業向けPOSシステムコールセンター業務 サブスーパーバイザーとして従事 ④Webサイト運用監視業務 メンバーとして従事 ⑤OS社向けヘルプデスク オペレーターとして従事 これが私の過去のエンジニアの経歴です。 私は色々な現場に行き色々な経験をさせていただきましたが、その中で楽しかった現場や辛かった現場もあり現場によって環境は
Aceでテキストエリアをエディタ化する
はじめに こんにちは。 GMO NIKKOのKONCEです。 今回はJS製エディタのAceについて調べる機会があったのでブログの題材にしてみます。 使用するケースはかなり限られてくると思いますがよければご覧ください 背景 ネイティブアドの取り扱い 僕の担当しているプロダクトGMOSSPではネイティブアドを取り扱っています。 ネイティブアドはデマンド側のサービスに対して広告素材を要求してGMOSSPでデザインを当てていきます。そのため、管理画面からデザインを登録更新できるフォームを用意しています。 運用面の課題 基本的には担当者がHTML/CSS/JavaScript のタグを登録/編集して運用しています。その中で通常のテキストエリアを使用してきましたが、 タグの不備 全角の混入 画面上での操作性 など課題がありました。不備などはバックエンドのバリデーションでケアできればベストだと思いますが
The last year has been a great one for WebKit. After unveiling Safari 17 beta at WWDC23, we’ve shipped six releases of Safari 17.x with a total of 200 new web technologies. And we’ve been hard at work on multiple architectural improvement projects that strengthen WebKit for the long-term. Now, we are pleased to announce WebKit for Safari 18 beta. It adds another 48 web platform features, as well a
Re: HTMLのルート要素ではcolorとbackground-colorをセットで指定すべき - 水底の血
ちょっと間が空いて、亀リプっぽくなっちゃいましたけど、HTML のルート要素では color と background-color をセットで指定すべきというお話について。 昔からブラウザには配色設定があり、テキスト色と背景色をユーザーが任意に指定できます。 ……という話は Web アクセシビリティとフェイルセーフの記事に以前書いたのでその詳細は省略しますが、WCAG 2.2 達成方法集の F24(W3C) において達成基準 1.4.3（レベルAA）などの失敗事例として掲載されているにも関わらず、このことは世間ではなぜか認知が薄いようです。 認知も薄いというか、私も言われるまで気づかなかったあたり、まあそういうことなんじゃないかなと*1。……という話だけはあまりにもアレなので、ざっくりとですが、ほんのちょっと深掘りしてみましょう。 WCAG 2.1 達成方法集のF24のタイトルは、「達成基
CSS Grid で repeat auto-fit や minmax を使って可変サイズを実現しても余白は固定なのかあ……待てよ？ - Qiita
この記事の概要 CSS Grid を使うと、スクリーンの幅にあわせて列数や列サイズを可変させて、簡単にレスポンシブな実装ができます。 しかし、margin や padding、gap といった余白関連のプロパティは固定値です。 そのアンバランスさを解消すべく記事を書きました。
Why Mesop? - Mesop
Home Getting Started Guides Components API FAQ Demo Gallery 🔗 Blog Contributing Why Mesop? Mesop is a new UI framework that enables Python developers to quickly build delightful web apps in a scalable way. Many Python UI frameworks are easy to get started with, but customizing beyond the defaults often requires diving into JavaScript, CSS, and HTML — a steep learning curve for many developers. Me
新しい HTML <permission>> 要素のオリジン トライアル | Blog | Chrome for Developers
ウェブアプリでの位置情報へのアクセスなどの強力な機能の使用許可を求めるには、いくつかの命令型の方法があります。こうした方法にはいくつかの課題が伴うため、Chrome 権限チームは新しい宣言型の方法、専用の HTML <permission> 要素をテストしています。この要素は Chrome 126 以降、オリジン トライアルの対象であり、最終的には標準化したいと考えています。 権限をリクエストするための命令型の方法 ウェブアプリで強力な機能にアクセスする必要がある場合は、権限をリクエストする必要があります。たとえば、Google マップが Geolocation API を使用してユーザーの位置情報を必要とする場合、ブラウザはユーザーにプロンプトを表示し、多くの場合、その決定を保存するオプションを表示します。これは、権限の仕様で明確に定義されたコンセプトです。 初回使用時に暗黙のうちに要求
【JS体操】第2問「画像の横長具合を比較しよう」〜正攻法＆ハック部門の解説〜 - KAYAC engineers' blog
こんにちは！ カヤック面白プロデュース事業部のおばらです。 普段は受託案件のデザイン・フロントエンド開発などを担当しています。 さて、『JS体操』第2問 いかがでしたでしょうか？ 今回初めての方々 第1問に引き続きの方々 複数のアプローチで何通りも回答してくださった方々 普段業務で JavaScript をバリバリ書いているであろう方々 JavaScript を学んでいる学生の方々 などたくさんの方々が挑戦してくださいました。 とても嬉しいです。ありがとうございます！ 『JS体操』とは？ 『JS体操』とはカヤックが主催する JavaScript のコードゴルフ大会です。 もともとは社内の勉強会として始めた施策です。 その詳細は以下のブログ記事を御覧ください！ techblog.kayac.com 第2問の詳細はこちら https://hubspot.kayac.com/js-taiso-0
This is Part 1 of our series on “The Future of Astro” covering three major new features we have planned for Astro in 2024. This post introduces an update to the View Transitions API that Astro can now leverage for native, app-like page navigation without a single line of JavaScript required. The View Transitions API is a set of new platform APIs that unlock native browser transitions between pages
【便利】自宅からのアクセスの場合、特定のcssセレクターを除外するタグを配信して、一部の人間から広告を削除する - かずきち。の日記
今回は広告ブロッカーを使わない広告削除のお話をします 広告は新聞、テレビ、ラジオ、バス、タクシーなどに多く掲載されています。 広告主は見込み客を得るために広告を打つのが前提です。 フジテレビはコマーシャルを流して、多くの視聴者が見ていますが… フジテレビ社員がその広告を見ることは広告掲載主にとってコンバージョンに繋がっているでしょうか？ 媒体に掲載した広告は、媒体の管理者に見られても広告費の無駄になるのです 自サイトに掲載されているサードパーティーの広告を消したい 以前、こんな相談をされました。 ブログに掲載されている広告が嫌だ という相談です。 基本的にブログに掲載されている広告はブログ運営母体の収益源になります。 なので無料ブログの広告を全削除するのは運営元に規約に反します。 でも自宅からのアクセスの場合のみjavascriptのセレクターを使って広告を削除すればいいのでは？ 私が最近
An origin trial for a new HTML <permission> element | Blog | Chrome for Developers
There are a number of imperative methods for asking for permission to use powerful features like location access in web apps. These methods come with a number of challenges, which is why the Chrome permissions team is experimenting with a new declarative method: a dedicated HTML <permission> element. This element is in origin trial from Chrome 126, and ultimately we hope to standardize it. Imperat
ウェブブラウザ「Google Chrome」の最新安定版であるバージョン126がリリースされました。同一サイト内のページへ移動する際にアニメーションを行う仕組みや、ブラウザ上で動作するゲームからコントローラーを振動させる機能が追加されています。 New in Chrome 126 | Blog | Chrome for Developers https://developer.chrome.com/blog/new-in-chrome-126 New in Chrome 126: Cross-document view transitions, CloseWatcher API re-enabled and more - YouTube ◆ページ移動の際にビュートランジションAPIを利用したアニメーションが可能に 同一オリジン内の別ページへ移動する際に、ビュートランジションAPIを
Building a faster, smarter, Chromebook experience with the best of Google technologies
$200K 1 10th birthday 4 abusive ads 1 abusive notifications 2 accessibility 3 ad blockers 1 ad blocking 2 advanced capabilities 1 android 2 anti abuse 1 anti-deception 1 background periodic sync 1 badging 1 benchmarks 1 beta 83 better ads standards 1 billing 1 birthday 4 blink 2 browser 2 browser interoperability 1 bundles 1 capabilities 6 capable web 1 cds 1 cds18 2 cds2018 1 chrome 35 chrome 81
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Chrome の 組み込み AI Gemini Nano を試してみる
ReactとZodで作る堅牢なフォームバリデーション - ICS MEDIA
Googleが開発したPythonのUIフレームワーク「Mesop」の特徴を開発チームが解説
SVG アイコンの表示に mask-image CSS プロパティを使用する
feed_squeezerを作った - くりにっき
【Chome126】View Transitions APIで滑らかな画面遷移を実装する
完全無料で使った場合の各種ブログサービスを触ってみた。簡単な解説付き - 格安ガジェットブログ
今後のエンジニアライフプランについて - Qiita
News from WWDC24: WebKit in Safari 18 beta
Zero-JavaScript View Transitions | Astro
「Google Chrome 126」安定版リリース、ブラウザゲームでコントローラーの振動機能を利用可能に