モバイル端末でのウェブアプリのデバッグ方法、Safari on iOS/Chrome on Android
iOSのSafari、AndroidのChromeはそれぞれPCと連携してウェブアプリケーションをデバッグできます。 PCのSafariのWeb Inspector、ChromeのDevToolsと連携すれば、コンソールログやネットワーク、デバッガーなども利用できます。 スマホと繋いでWebサイトをデバッグする方法をまとめたページが見つけられなかったので、メモです。 ネットワークで繋いでデバッグもできたりするので、結構便利です。 Mobile Safari on iOS iOSのSafariは、macOSのSafariと接続してログやネットワークの通信などを見るデバッグが可能です ドキュメント: Inspecting iOS and iPadOS | Apple Developer Documentation iOSのSafariとmacOSのSafariを接続する 初回は次の設定が必要で
Safari 17.4 が input type=checkbox の switch 属性に対応したので簡単に試してみる
Safari 17.4 が input type=checkbox の switch 属性に対応したのでテスト用のページを作って、実際にどのように表示されるのかを確認してみました。 先日、WebKit の開発者向け Blog で、input type=checkbox の switch 属性、つまり <input type=checkbox switch> みたいな記述に、Safari 17.4 で対応しますよという記事が公開されました。 An HTML Switch Control - WebKit Safari 17.4 で `<input type=checkbox switch>` に対応したってさ （まだ HTML Standard には含まれていないけど） / "An HTML Switch Control" (8 users) https://t.co/TAksKUDzsp
これでSafariにも実装できる！ スクロールをトリガーにしたアニメーションのポリフィル -Scroll-timeline Polyfill
先日の記事で、CSSでの実装が大きく変わる！ Scroll-driven Animations スクロールをトリガーにしたアニメーションを実装する方法を紹介しました。Chrome 115から実装された新機能ですが、ネックはSafariのサポートだと思います。 Scroll-driven Animationsの仕様で定義されているScrollTimelineとViewTimelineのポリフィルがリリースされ、これでSafariでも動作します。 Scroll-timeline Polyfill -GitHub まずは、Scroll-driven Animationsの簡単な紹介を。 スクロールをトリガーにしたアニメーションは、最近のWebサイトでよく見かけます。Appleの新製品ページもスクロールをトリガーに要素をアニメーションで表示しますね。 実装にはJavaScriptを使用したり、かな
SafariのデベロッパーツールとiOS SimulatorでWebサイトやアプリをデバッグ | Free Style
Web開発しているとデバッグは欠かせないのですが、スマホの確認、デバッグとなるとGoogle ChromeやFire Foxのデベロッパーツールがある。 ある日、Google Chromeのデベロッパーツールは問題ないのに実機ではうまくいっていないことがあった。もしやと思いiOS Simulatorを立ち上げて確認するとうまくいっていない。 やはりスマートフォン表示はスマートフォン専用のシミュレーターで確認しないと、Webブラウザでは正確に表示・デバッグは出来ないですよね。 iOS Simulatorはアプリ開発のデバッグしか出来ないの？と思ってしまいますが、Webサイトも表示できますし、Safariブラウザを使うことでデバッグも可能です。 iOS Simulatorとは iOS Simulatorとは、Xcodeに付属されていてアプリケーションのテストができるもの。MacはApp Sto
iPhoneのsafariで日本語に翻訳する方法
iPhoneのsafariで日本語に翻訳する方法を紹介します。 １．翻訳手順 設定の前に翻訳手順を示します。 任意の海外サイトを開いて、URL欄をタップ。 お気に入りの一覧が表示されるので「Google翻訳」をタップ。 これで翻訳されました。 ということで、2枚目のスクリーンショットに表示された「Google翻訳」の設定方法を次項で紹介します。 ２．設定方法 まず「Google翻訳」の元になるページを「お気に入り」へ設定します。ここではGoogle検索のページを開き、下にある真ん中のアイコンをタップ。 「お気に入りに追加」をタップ。 右上の「保存」をタップ。 次に、保存したページをGoogle翻訳用の内容に変更します。下にある「ブックマーク」アイコンをタップ ブックマーク一覧画面が表示されるので、右下の「編集」をタップ。 保存した「Google」が一番下に表示されているので、それをタップ。
iOSのSafariのWebインスペクタを使ってみる ｜ Tips Note by TAM
SafariのWebインスペクタ for MAC ウェブページの制作を行う際、iPhoneでどのように表示されるか・動作するかをチェックする際に便利な機能があるのをご存知でしょうか？ Safariには「Webインスペクタ」という開発者向けツールが標準で搭載されており、この「Webインスペクタ」で要素の検証や、デバックなどがPCから調査できる!という機能です。 ご利用の手順 まず、iPhone側の準備としては以下の通りになります。 ホーム画面から、「設定」→「Safari」を開きます。 画面一番下の「詳細」を開き、「Webインスペクタ」をONにします。 次に、PC側の設定。 MacからSafariを立ち上げます。 Safariのメニューから「環境設定」を開きます。 「詳細」タブから「メニューバーに"開発"メニューを表示」にチェックをいれます。 メニューバーに「開発」が追加されていることを確認
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ChromeとSafariのuser agent stylesheet
safari a:visited border color automatically on div?