About splash-screens - Appscope
Custom Splash Screen on iOS To make your Progressive Web App even more native-like on iOS devices, you may add a custom splash screen that is displayed when users launch your app. This is a feature that has been documented in Apple's Safari Web Content Guide for a long time, but that has turned out to be more challenging to implement than they have made it seem. In fact, it appears to not have wor
iPhoneのSafariでページを拡大縮小させない方法
iPhoneのiOSが10になってから、Webページを拡大縮小させない指定の「user-scalable=no」が使えなくなってしまいました。そこで代替方法を紹介したいと思います。 HOME About this site Mail Last update 2018-08-13 5:54 am iOS10から、iPhoneではページの拡大・縮小を禁止する「user-scalable=no」が無効化されてしまいました。が、ゲームページや使い勝手上、拡大縮小を禁止させたい場合も多々あると思います。 そこで今回はiPhoneのiOS10以降のSafariでも、「ピンチイン・ピンチアウト」「ダブルタップ」「文字の入力時」の3つのパターンの拡大・縮小を禁止する方法を紹介します。 ※注意 独学で学んだレベルの技術しかないので、おかしい所があればコメントください(本職はトラックドライバーです(笑)) S
iOSでも100vhをいい具合に調整して画面の高さいっぱいに要素を表示させる
TAK(@tak_dcxi)です。今回もCSSに関する投稿です。 以前このようなツイートをしました。 メインビジュアルなど、画面いっぱいに要素を表示するためにheightやmin-heightに100vhを指定する。そして、iOSで表示確認した時に以下のような問題が起こるわけです…。 iOSのSafariでの100vhが気に食わない問題 iOSのSafariでは100vhの計算にアドレスバーが考慮されていないため、アドレスバー分押し出されて格好悪く表示されます。ちなみにiOSのGoogle Chromeは中身SafariなのであれもSafariです。 この問題に立ち向かうために、実装者はJavaScriptを利用して高さを指定したり、height: 100%;のバケツリレーを行ってアドレスバーまで考慮した画面いっぱいの表示を実現するために頑張ってきたわけです。 そんな中、先程のツイートから
Flutter入門 - 簡単なアプリを作ってUI宣言やホットリロードなど便利機能の使い方を理解しよう｜ハイクラス転職・求人情報サイト AMBI（アンビ）
Flutter入門 - 簡単なアプリを作ってUI宣言やホットリロードなど便利機能の使い方を理解しよう モバイル向けアプリケーションのフレームワーク・Flutterを使って簡単なアプリケーションを作成する基本的な開発について、FlutterのGoogle Developers Expertである上田哲広さんに解説していただきました。 こんにちは。上田哲広（@najeira）です。FlutterのGoogle Developers Expertとして活動しています。 Flutterは、Googleが中心となってGitHub上でオープンソースなプロジェクトとして開発されている、モバイル向けアプリケーションのフレームワークです。AndroidとiOSのアプリを単一のコードベースで開発できます。 GitHub - flutter/flutter: Flutter makes it easy and
iOSアプリ開発用証明書（.cer形式ファイルと、.p12形式ファイル）の取得 - モーリーのメモ
『Cocosドキュメント』の『Chapter 2: General Project Workflow』-『Package and Runtime Environment Settings』の中で、『.cerファイル』と『.p12』ファイルを要求されるので、入手方法をまとめました。 目次 目次 Apple Developer Program iOSアプリ開発用証明書（.p12ファイル）の取得 『キーチェーンアクセス（Macの標準アプリ）』での作業 CSRファイル（CertificateSigningRequest.certSigningRequest）の作成 『Apple Developer』サイトでの作業 CERファイル（証明書ファイル）の取得 『キーチェーンアクセス』での作業 証明書の登録 『.p12』ファイルの書き出し あとがき Apple Developer Program 証明書を
PWA 入門 〜iOS SafariでPWAを体験するまで〜 2019年7月更新 - Qiita
What's PWA ? Progressive Web Apps （プログレッシブ ウェブ アップス）の略 Googleが推進している、モバイルユーザーの体験（UX）向上を目的とするプロジェクト・技術のこと PWAは、わざわざApple StoreやGoogle Play Storeからインストールする必要はありません 不安定なネットワークでも迅速に起動し、関連性の高いプッシュ通知を送信することができます。 ホーム画面にアイコンを表示することができ、トップレベルの全画面表示で読み込むことができます。 ▼このように、Webサイトを直接ホームに追加することでアプリケーション化されます 導入事例 大手WEBサイトからで導入がはじまりつつあります コンバージョンアップにも効果的です Trivago https://www.trivago.com Twitter Lite https://mobi
モバイルサイトでセレクトボックスを作る際はoptgroup要素を使わないほうがいいかもしれない - Qiita
枕 今日はモバイルサイトでセレクトボックスを作る際はoptgroup要素を使わないほうがいいかもしれないと思った話を書きます。 主観も混じっていますのであしからず。 本題 さて、本題に入ります。formでセレクトボックスを作るときには、下記のようにselect要素内のoption要素をoptgroup要素によってグルーピングすることがあります。 <select name="pref"> <optgroup label="tohoku"> <option value="1" > 北海道 </option> <option value="2" > 青森県 </option> <option value="3" > 岩手県 </option> <option value="4" > 宮城県 </option> <option value="5" > 秋田県 </option> <option v
iOSのMobile Safari上でのfocus()が妙な件を調べてみた - mixi engineer blog
こんにちは。ミクシィUX統括部にて、mixi Touchの開発を担当しております戸高です。 JavaScriptでの開発を行う事が多いのですが、iOSのブラウザ（Mobile Safari）のfocusの挙動について少しクセがあり、 調べてみましたので、お知らせいたします。 通常、<textarea>や<input type=”text”>等のフォーム要素に対して、フォーカスを与えたい場合、focus()メソッドを使用します。 iOSのブラウザ（以下、Mobile Safari）にて、以下のコードを実行してみます。 （分かりやすい様にjQueryを使用させて頂きました） なお、検証端末にはiPhone4S iOS5.0(9A334)を使用しています。 HTML <!DOCTYPE html> <html> <head> <meta http-equiv=”Content-Type” con
Download iOS Firmware for iPhone, iPad, iPod Touch, Apple Watch, Apple TV, HomePod and Vision Pro / IPSW Downloads
All information on these pages is auto updated at least every minute. When you click on any Apple Software link on the site, you are redirected to an Apple server. We do not (and never will) mirror these files. "Apple", "iOS", "iPadOS", "watchOS", "tvOS", "audioOS", "macOS", "visionOS", "iPhone", "iPad", "Apple Watch", "iPod Touch", "Apple TV", "HomePod", "Mac" and "iTunes" are trademarks of Apple
コピペでOK。iOS9のAdBlockが有効な場合にページの表示を無効にするサンプル:phpspot開発日誌
CSS3でブロックで組み上げたような文字グラフィックをつくれる「ISO-BLO... 次の記事 ≫：AppStoreでのスクリーンショットを一括作成できるPSDファイル sitexw/FuckAdBlock GitHub iOS9のAdBlockerが話題となっていますが、FuckAdBlockを使うことでAdBlockerがインストールされているかどうかの検出が可能です。 iOS9のAdBlockが有効な場合にページの内容を無効にするサンプルを、非プログラマの方でもコピペで簡単に使えるように書いてみました。 現状、有料アプリで１位となっているため、サイトの利用者層によっては、これから売上等に影響が出てくるのかもしれません。 有効・無効によってUserAgent等が書き換わらないため、こういったライブラリはイタチごっことなるのかもしれませんが、便利に使えるようでした。 <script ty
iOS9のコンテンツブロッカー - Toyship.org
WWDCで新しいiOS9の機能がいろいろと発表されましたが、Safariでの表示項目を制限することが 「コンテンツブロッカー」機能については、Web業界の方はちょっと気になるのではないでしょうか。 さっそく調べてみました。 （なお、この記事はAppleが一般に公開している情報を元に書いています） コンテンツブロッカー コンテンツブロッカーとはiOSやMacでSafariに表示する項目を、自動的に制限してくれる機能です。 iOSでは、コンテンツブロッカーは、Today WidgetやShare ExtensionのようにApp Extensionとして提供されます。 Mobile Safariでwebを見る時に、cssで指定された特定の要素を非表示にしたり、特定のファイルを読み込まないようにすることができます。 Safari以外のブラウザ（Chromeなど）には影響がありません。 また、iO
[CSS]iOS で滑らかなスクロールを実現する「-webkit-overflow-scrolling」プロパティの使い方｜CSSスニペット｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」
overflow で要素内をスクロールさせると、iPhone やiPad などのiOS で見た場合にスクロールがぎこちなくなります。 そんな時は、iOS 5.0 より実装されたSafari CSS の -webkit-overflow-scrolling プロパティを使うことで、iOS でもスムーズなスクロール（慣性スクロール）を実現できるようになります。 -webkit-overflow-scrolling の指定 -webkit-overflow-scrolling に指定する値は「auto」と「touch」の2 つです。 「auto」はデフォルトで、慣性スクロールしません。 指定した高さの要素内をoverflow: scroll でスクロールさせる際に、以下のように .content { height: 200px; overflow: scroll; -webkit-overflo
![[CSS]iOS で滑らかなスクロールを実現する「-webkit-overflow-scrolling」プロパティの使い方｜CSSスニペット｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」](https://cdn-ak-scissors.b.st-hatena.com/image/square/08b792dc919b5df541e06c5e157286ce8e586603/height=288;version=1;width=512/https%3A%2F%2Fwww.webantena.net%2Fwp-content%2Fuploads%2F2014%2F02%2Fios.png)
プッシュ通知の許可とアプリのレビュー依頼を上手に行う方法 - 小さなごちそう
スマホアプリにおいて、プッシュ通知は重要な再ログイントリガーだ。 iOSではプッシュ通知を送るために、確認ダイアログを表示してユーザーに明示的に送信を許可してもらう必要がある。ここで「許可しない」を選択されると、アプリから再度プッシュ通知のためのデバイストークンを取得できず、iOSの設定画面を開いて「通知」の設定を変更する必要がある。 Facebookアプリでは、通知不許可を選択したユーザーに下記のようなヘルプ画面を表示して通知設定の変更を促している。 ただ、ヘルプをわかりやすくしても、そもそも手順が面倒なので実際に設定変更をしてくれるユーザーは限られそうだ。なんとか工夫してプッシュ通知を拒否される確率を低くしたい。 下記の記事では、プッシュ通知の許可を上手に求める方法が紹介されている。 The Right Way to Ask Users for iOS Permissions — Me
これはハマった！スマホサイトのコーディング時に悩んだバグと仕様4選【iOS8情報あり】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 先月LIGブログがリニューアルされました。僕はメインでコーディングを担当していたのですが、いつものようにスマホでの不具合には悩まされました。 とくに今回焦ったのは、直前でiOS8がリリースされたことでした。まだ情報がない中で、こいつで起きた不具合を解明するのには手こずりました（’ー’） そこで今回は、スマホのコーディングで僕が詰まったポイントとその解決方法について、実例を踏まえながら紹介していきたいと思います！ 1. iOS8でz-indexを使っている要素をJSで操作すると、重なり順がおかしくなる こちらのページ（SP）では、社員の写真要素をスワイプすると画像が反転する、という動きを実装しています。 position:absoluteで表の写真、裏の写真を重ね、z-indexで重なり順を設定していた
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Blog - iOS PWAでSplash Screen定義できるようになってた | Ohoshi.me
https://spyweb.media/2017/09/21/modal-window-fixed-background-also-support-ios/
Customizing Style Sheets
CSSでテキストエリアをリサイズ不可にしたり任意の要素をリサイズ可能にする
https://www.matsuaz.com/matsumotojs/2011/09/27/1317120760853.html
【アプリアイコン制作】必要なアイコンサイズまとめ＆気をつけたいこと：※ iPhone 6 Plus追加 | 日本VTR実験室