HTMLDialogElement: showModal() はHTMLの長年の課題を解決する期待の星かと思ったら実際はだめな子｜TechRacho by BPS株式会社
2024.09.05 HTMLDialogElement: showModal() はHTMLの長年の課題を解決する期待の星かと思ったら実際はだめな子 <dialog> 要素の showModal() は全てのモダンブラウザで実装され、そろそろ使っても良いかなという方も多いと思います。しかし実際に使ってみると（主にChromium系ブラウザで）重大な落とし穴があり、適用できるケースは限定的なことがわかりました。 背景 HTMLでモーダルダイアログを表示するとき、伝統的には以下のような実装をしていました。 <aside class="backdrop"> <div class="dialog"> ダイアログの中身 </div> </aside> .backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.3); displa
2024年のファビコンを極める: 本当に必要なファイルはほぼ6つ（翻訳）｜TechRacho by BPS株式会社
はじめに モダンブラウザで使われるファビコンの作り方を見直して、今こそアイコン生成であくせくするのを終わりにしましょう。昨今のフロントエンド開発者は、ブラウザタブやらタッチ画面やらにWebサイトの小さなロゴを表示する、ただそれだけのためだけに静的なPNGファイルを20個以上扱わなければなりません。よりスマートな方法で、現代のニーズに合う最小限のアイコンセットを使う方法を紹介します。 ファビコンは見かけよりもずっと幅広く奥深いトピックで、実は誰もがファビコンについてしっかり学びたいと思っていることもわかってきました。本記事全体の内容を実質わずか2行のスニペットに凝縮したものも紹介していますので、今ファビコンで苦しんでいる方は（正確な使い方をご存知なら）そちらをお使いいただけますが、そこをぐっとこらえて記事を最後までお読みいただくことをおすすめいたします。 🔗 忙しい人向け: ウルトラショー
Ajax: 非同期通信でページのローディング時間を短くした｜TechRacho by BPS株式会社
BPSの福岡拠点として一緒にお仕事をさせていただいています、株式会社ウイングドアのヤマウラです。 今回は、筆者がローカルで構築している練習用サイト(WordPress)にて、ページの表示に時間がかかっている箇所があったので、 その際に対応した内容をご紹介したいと思います。 ※本記事は、データ取得のロジックの変更によってページの表示速度を早められるようにした記事ではなく、HTMLの表示をAjaxにて書き換える内容の記事になります。また、JavaScriptの説明等は含まれておりませんので、あらかじめご理解いただけますと幸いです。 目次 現状・課題 結論・最終的にやったこと Ajaxとは 外部から大量に取得してる値の処理が原因 実際に変更 感想 現状・課題 ローカルの環境にて、外部から持ってきた情報を表示するという簡素なページを作成していたのですが、 どうにもページの読み込みが遅い、という問題
HTML5のLocal Storageを使ってはいけない（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Randall Degges - Please Stop Using Local Storage 原文公開日: 2018/01/26 著者: Randall Degges 日本語タイトルは内容に即したものにしました。 画像は元記事からの引用です。 初版公開: 2019/10/19 追記更新: 2024/04/05 -- リンク情報を記事末尾に移動しました 本気で申し上げます。local storageを使わないでください。 local storageにセッション情報を保存する開発者がこれほど多い理由について、私にはさっぱり見当がつきません。しかしどんな理由であれ、その手法は地上から消えてなくなってもらう必要がありますが、明らかに手に負えなくなりつつあります。 私は毎日のように、重要なユーザー情報をlocal storageに保存す
AndroidのTextViewへHTMLマークアップによるスタイル設定（文字列装飾）を行う｜TechRacho by BPS株式会社
Androidの記事が少なすぎるのでなんとかしてくれ、と言われたので3年振り(!?)に記事を書いてみます。 皆さんレイアウトリソース上のTextViewや汎用ダイアログクラスのメッセージ表示(AlertDialog.Builder.setMessageなど)で文字列の装飾を行いたくなることがあるかと思います。 そんな時に使えるのがHTMLマークアップによるスタイル設定（文字列装飾）です。 基礎的なことは上記公式サイトに説明が載っているのですが、詳細な仕様やまとめ的な情報があまり載っていません。 なので今回はそれらについて記事を書いてみたいと思います。 ※1つのTextViewで以下のような表示が可能になります。以下のサンプル画像の表示に使用したテキストは記事末尾に記載してあります。 文字列のスタイル設定についての基本事項 まず基本的な事項として、文字列のスタイル設定について軽く説明しておき
WebサイトをPWA（Progressive Web App）に変える簡単な手順（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: The easy way to turn a website into a Progressive Web App 原文公開日: 2017/11/21 著者: Alexandre Plennevaux Webサイトを簡単にPWA（Progressive Web App）に変える方法（翻訳） Progressive Web Appって何？ PWAは基本的にWebサイトの一種で、モバイルでアクセスするときにユーザーのデバイスに保存可能で、ネイティブアプリと同じように振る舞います。読み込み画面を備えていて、ChromeのUIを非表示にでき、接続が切れてもコンテンツが表示されます。最大のメリットはユーザーのエンゲージメント（engagement）を促進することです。AndroidのChromeブラウザ（他のモバイル用ブラウザについてはわか
CSS GridがBootstrapよりレイアウト作成に向いている理由（翻訳）
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Why CSS Grid is better than Bootstrap for creating layouts 原文公開日: 2017/12/03 著者: Per Harald Borgen CSS GridはWebレイアウト作成の新しい手法です。ブラウザでネイティブに動作するまともなレイアウトシステムが登場したのはこれが初めてです。 CSS Gridのメリットは、かの有名なBootstrapと比較することでいっそう際立ちます。以前ならJavaScriptを導入しなければ到底不可能だったレイアウトを作れるようになっただけではなく、コードのわかりやすさやメンテのしやすさも向上します。 本記事でその理由を解説します。 筆者は現在無料のCSS Grid上級編講座の準備も進めており、12月中に立ち上げを予定しています。 今のうちに講
いまさら聞けないBootstrap3の便利クラス｜TechRacho by BPS株式会社
morimorihogeです。最近アズールレーンをはじめました。Flashでないというだけでこれだけプレイする機会が楽に作れるんだなーと思う日々です。 今回はBootstrap3の便利なのにあまり使われているのを見ないクラスたちについて、もっと使われればいいのにということで啓蒙したいと思います。Railsの話は出てこないので、バックエンド依存のない内容になります。 Bootstrap3系を使っているのにBootstrapにある機能を独自CSSクラスを実装してしまっている人は、CSSをより他のエンジニアにもわかりやすく記述できるように利用を検討してみると良いのではないかと思います。 ちなみに、僕はCSSフレームワークを採用する最大のメリットはクラス名・機能に関する共通概念をプロジェクトを横断して共有することで個別ルール学習のコストを減らすことだと思っているので、フレームワークを使うなら極力フ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
