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を接続する 初回は次の設定が必要で
iPhoneのWebインスペクタを有効化iPhoneには実機でデベロッパーツールを使えるようにする「Webインスペクタ」という機能があります。まずはこれを有効化しましょう。 iPhoneの設定から「Safari→詳細→Webインスペクタ」を有効化します。iPhone側の設定はこれだけ。 そうしたらiPhoneとMacをケーブルで繋げてください。 なお、iPhoneの充電器（Lightningケーブル）を使ってMacを接続するにはUSB変換ハブが必要になります。Macユーザーはいつか必ず必要になるので、1つくらいは持っておくといいですね。 安くてコスパがいいものならRampow USB Type C to USB 3.0あたりがおすすめです。2個セットなのもありがたい。
Webサイト制作者・スマホアプリ開発者向け、Appleデバイスのスクリーンサイズ、各サイズを採用しているモデル、解像度、PPI、表示タイプ、比率、最後にサポートされたOS、セーフエリア、サイズクラス、ウィジェットのサイズ情報など、実装時に役立つ情報がまとめられたScreen Sizesを紹介します。 先週ローンチされたばかりのサイトで、2021年最新モデルのiPad Proから、2007年のiPhoneまで、最新機種から初代までのデバイスのサイズが網羅されています。 Screen Sizes サイトを利用するのは簡単、登録など面倒なことは一切不要です。 サイドバーからデバイスを選択し、スクリーンサイズあるいはモデルを選択します。 私が使用しているiPhone 12 Proを見てみました。 サイトはキーボードショートカットも用意されており、shiftキーを押すとショートカットの一覧が表示・非
CSSのみ：height 100vhとiPhone safariメニューバーの問題は-webkit-fill-availableで解決 こんにちは、このカテゴリでは初めての投稿となります、vow.design代表/デザイナーのTomo Shiotani (塩谷 朋広)です。 今まで多くのWEBデザイナーさん、コーダーさんを悩ませ続けてきた問題、画面高さいっぱいまで表示させるCSS記述 height:100vhと、iPhone safariのメニューバーとの冷戦をついに解決させにまいりました。 この記事を読めば、もうこの問題に時間を割かれることはありません！ もちろん、CSSのみで解決できます！height:100%をつけたらいいなんてオチもありませんので、ご安心を笑 これで、iPhone メニューバー問題とおさらばしましょう！ CSS height:100vhでは何が起こるのか .menu
iPhoneをはじめ、PixelやGalaxyのAndroidスマホ、iPadやGalaxyのタブレット、ラップトップ、ワイドスクリーンなど各モデルのサイズでWebページを表示して確認ができるChromeの機能拡張を紹介します。 デベロッパーツールのデバイスモード（command+shift+M）で各デバイスの表示を確認できますが、モバイルシミュレーターはさらに多くのデバイス、スクリーンショット・動画撮影など機能も充実しています。また、モバイルシミュレーターでデベロッパーツールを使用することも可能です。 無料で、多くのデバイスをサポートしているのがいいですね。 WinでもMacでも、ツールバーと右クリックから1クリックで簡単に起動できます！ Mobile FIRST レスポンシブの確認を簡単にできます。 スクロール・スワイプなどの操作をはじめ、リンクをクリックしてのページ移動もできます。
ここ数年の間に、スマホは単なる電話以上に多くの機能を持つようになりました。スマホはさまざまな目的のために使用され、わたし達の日常のアシスタントをこなしています。 そんな便利なスマホアプリのユーザーインターフェイスに注目し、最近のUXデザインにおけるクリエイティブなすごいコンセプトを紹介します。 15 Creative UX Design Concepts for Everyday Needs by Tubik Studio 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 植物の水やりを管理するアプリ 安眠アプリ ハンバーガーショップのアプリ TODOアプリ 料理のレシピアプリ ベジタリアン用のレシピアプリ アラームアプリ 家電操作アプリ 家計簿アプリ 名刺管理アプリ バランスアプリ ファイナンスアプリ フィットネスアプリ カレン
ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. 「AMPってなに？導入したらSEOに効果があるの？」 サイト運営の初心者の中には、こんな疑問を持つ人がいるのではないだろうか。 AMP（アンプ）とは、モバイルページを高速表示させるためのフレームワークのこと。 モバイルページを瞬時に表示させ、ユーザーの利便性を高めるために用いられる。 かつてはGoogleがAMP化しているサイトを高く評価するという優遇措置を取っていたため、多くのWebサイトがSEO対策のために導入を検討したが、2021年6月その優遇措置が終了した。 この記事では、AMPの仕組みやSEO効果、優遇措置終了後のメリットとデメリットを、初心者にもわかりやすく解説する。
[JS]面白いスクリプトが登場！スマホのDeviceMotionイベントをサポートし、傾きを感知できる -Shiny
![[JS]面白いスクリプトが登場！スマホのDeviceMotionイベントをサポートし、傾きを感知できる -Shiny](https://cdn-ak-scissors.b.st-hatena.com/image/square/95e28eebf0596a7ba67bec80b26b3d4e01b6cc91/height=288;version=1;width=512/https%3A%2F%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttps%2Fcoliss.com%2Fwp-content%2Fuploads-201901%2F2019011910.png)
モバイル幅で作成されたWebサイトの特徴と作例モバイルは幅が狭く、デスクトップは幅が広いので、それぞれのデバイスにあわせてWebサイトの幅も可変させたりしますよね。しかし最近、デスクトップで見てもモバイル幅のまま表示させている国内のWebサイトをちょこちょこ見かけます。今回はそんなモバイル幅のWebサイトを見ていこうと思います。 モバイル幅 Web サイトの特徴デスクトップで見ても狭いコンテンツの幅よくある Web サイトでは、コンテンツ部分の枠がデバイスの幅によって変化します。例えばモバイルサイズでは幅が狭くなり、デスクトップサイズでは幅が広がって画面中央に表示されます。このブログでもそうですよね。しかし、昨今見られるようになったレイアウトでは、デスクトップサイズで見てもコンテンツ枠の幅は狭いままで表示されています。画面中央に表示されるものが多いのですが、中には右側に配置されているものも
備忘録 Mac Chrome上でAndroid ChromeのDeveloper Toolsを表示する方法 準備 Macの設定 「Chome」→メニュー→「ツール」→「デバイスを検証」(chrome://inspect/#devices) 「Discover USB devices」をチェックします。 Androidの設定 「設定」→「開発者向けオプション」 「USBデバッグ」をオンにします。 使用手順 1. AndroidとMacをUSBケーブルで接続します。 2. USBデバッグを許可しますか？ 「OK」を押します。 煩わしければ、「このパソコンからのUSBデバッグを常に許可する」にチェックをいれる。 3. 「Chome」→メニュー→「ツール」→「デバイスを検証」(chrome://inspect/#devices) 開いているページの一覧が表示されています。 表示されていない場合は、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
