iPhone SafariでBasic認証画面が表示されなかった原因

Posted on

先日、Basic認証下のページにiPhoneのSafariでアクセスすると、真っ白い画面で認証ダイアログすら表示されない現象に悩まされました。

iOSのバージョンは7.1.2です。

MacやWindowsなどPCのブラウザ(Safari, Chrome, Firefox)では問題ありません。また同じiPhoneでもChromeでは問題ありません。

前日にBasic認証のIDとパスワードを変更したためかと思い、iPhone Safariのキャッシュを削除しても同じです。

ページ構成は、まず公開ページにボタンを設置し、そのボタンからBasic認証下のページにリンクしていました。また公開ページのボタンのa要素には、target="_blank"で別ウィンドウ(タブ)が開くようにしていました。その理由は、Google Analyticsでクリックイベントの計測漏れを防ぐためです。

色々試した結果、target="_blank"を削除すると認証ダイアログが表示され、ログインできるようになりました。技術的な原因は不明ですが・・・とりあえず解決!

Yukawa

iPad上のSafariで幅100%のVIDEOタグの高さを取得できない

Posted on

ディスプレイの幅に合わせてレイアウトが変化するレスポンシブデザインのページに、幅が可変の動画を配置するため以下のCSSを指定しました。

video { width: 100%; max-width: 100%; height: auto; }

モダンブラウザやAndroidのデフォルトブラウザでは、意図したとおりウィンドウサイズに合わせて動画のサイズが縮小されます。

しかし、iPadやiPhoneでは、動画のサイズが小さくなり、動画の左右に黒く塗りつぶしたボックスが表示されてしまいます。

仕様は確認できませんでしたが、iOSのSafariではVideoのデフォルトサイズが300×150に設定されているそうです。

VIDEO要素に高さが指定されていない場合や「auto」になっている場合は、このデフォルトの高さが使用され、小さく表示されるようです。

幅に合わせて、高さが変更されるブロックを作成できれば良いのですが、「height」を相対指定して、幅に合わせて高さが変更されるブロックを作成することはできません。

「width」はパーセンテージで指定すると親要素(またはBody要素)の幅が基準になり、「height」もまた親要素の高さが基準になるためです。

解決方法

paddingやmarginは、パーセンテージで指定すると「包括要素の」が基準となります。

この包括要素の幅が基準になるという性質を利用すると、幅に合わせて高さが変化するブロックを作成できます。

動画の幅を100とすると高さは75になるので、DIV要素に「width: 100%」、「padding-top: 75%」を指定すると、幅に合わせて高さが変化するDIV要素を作成できます。

このDIV要素を、VIDEO要素の親要素になるように配置します。

そしてVIDEO要素に対して、「position: absolute; top: 0;」として絶対位置指定にし、親要素と同じ幅・高さにするため、「width: 100%; height: 100%」を指定します。

また、VIDEO要素の絶対位置の基準になるように、親要素(DIV要素)に「position: relative」を指定します。

以上で、幅にあわせて高さが変化するVIDEO要素を作成できました。

HTML

<div id="video_wrap">
    <video src="" width="720" height="540"></video>
</div>

CSS

#video_wrap {
    position: relative;
    width: 100%;
    padding-top: 75%;

}
#video_wrap > video {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}

 

参考リンク

 

Hayashi

iPhoneアプリ「Google Authenticator」をアップデートして設定が初期化された場合の対処方法

Posted on

2013年9月4日の午後、iPhone用のGoogle2段階認証アプリ「Google Authenticator」をアップデートすると、設定が初期化され、認証用コードが発行できなくなりました。

どうやら同様のユーザーが続出しているようです。
Touch Lab
「【注意】iPhone向け2段階認証アプリ『Google Authenticator』をアップデートすると設定が初期化される模様」 
http://touchlab.jp/2013/09/google_authenticator_update_with_caution/ 

再設定は以下の方法で出来ました。

再設定の方法

  1. Googleアカウントの「セキュリティ」をクリックします。
  2. 「2段階認証プロセス」の「編集」をクリックします。
  3. Googleのログイン画面が表示された場合は、パスワードを入力します。
  4.  「モバイルアプリケーション」に既に登録されている端末の「別の携帯端末に移動」をクリックします。
  5.  以下のウィンドウが表示されるので、「iPhone」が選択された状態で[次へ]をクリックします。
  6.  「Google認証システムの設定」ウィンドウが表示されるので、iPhoneの「Google Authenticator」を起動します。
  7.  Google Authenticatorの「入力を追加」画面で「バーコードをスキャン」をタップし、上記のQRコードを読み取ります。

以上で再設定ができました。 

Yukawa.

iPhone 3GSをiOS4にアップデートしたら、再起動(あるいはリセット)しよう

Posted on

iPhone 4の発売に先立ち、iPhone 3GSでのiOS4へのアップデートが配布されたので、さっそくアップグレードしました。

アップデートは問題なく行われたものの、アプリを起動しようとしても失敗することが何度かあり、タップやフリックといった操作を行ったときの反応も悪くなった気がします。

そんなとき、iPhoneの電源を完全に切って再度電源を入れると改善したので、その方法を紹介します。

続きを読む

VNCでMac/Windows/iPhoneからリモート操作

Posted on

以前使用していたMac miniをファイルサーバとして使用していますが、そのメンテナンスなどでいちいちその場に行って作業するのは面倒。ということでリモート操作できるようにしました。
その考えは以前からあったのですが、Mac miniのOSは10.4 Tiger。
リモートで操作するには別途Apple Remote Desktopが必要だと思い込んでいたのですが、サーバ機能はあってクライアント機能が無いだけだったんですね。

インターネット経由ではなくローカルで遠隔操作環境の構築を試みました。

サーバ(遠隔操作されるマシン):
Mac mini OS X 10.4 Tiger

クライアント(遠隔操作するマシン):
・Windows XP + VNC Free Edition
・iMac Mac OS X 10.6.2 Snow Leopard
・iPhone 3GS

続きを読む

Google SyncでGoogleカレンダーとiPhoneのスケジュールの同期

Posted on

これまでGoogleカレンダーとiPhoneのスケジュールの同期は、いったんGoogleカレンダーとMacのiCalを同期させ、iCalとiPhoneのスケジュールを同期させていました。
ただこの場合、まずiCalを立ち上げてGoogleカレンダーと同期し、次にiPhoneをMacに接続しなければならず、面倒でした。

他にいい方法があるだろうと調べたところ、手軽に、無線で、しかも双方向で同期できる方法がありました。
Google Syncです。

私はGoogleカレンダーを10個ぐらい作成していますが、そのすべてで同期が可能です。

設定方法は下記のサイトをご覧ください。
ASCII.jp:iPhoneとカレンダーを同期 Google Syncを試す

iPhoneグッズ

Posted on

iPhone購入後、まず最初に買ったグッズはタッチパネルの保護フィルムとネックストラップです。

保護ケース(ジャケット)も買おうかと思ったのですが、せっかくの美しい筐体を隠すのはもったいないし、直接触れないのでは宝の持ち腐れのような気がするので、保護フィルムのみにしました。

続きを読む

iPhoneで仕事メールの受信はGmail経由

Posted on

iPhone購入の動機の一つ、というか最大の目的は、仕事で使っているメールアドレスをiPhoneでも受信送信したいから。
このアカウントの設定をするのは結構面倒やなーと思っていたら、MacとiPhoneを最初に接続したとき、メールのアカウント情報もすべて同期してくれました。
これには感激!ただ使い始めると気になる問題が・・・

続きを読む

iPhoneへのアドレス帳転送

Posted on

2009年9月10日、iPhone 3G Sを購入しました。
10年間使っていたドコモからの乗り換えです。

まずはMacに接続してユーザー登録や各種同期を行ったのですが、つまずいたのは、ドコモの携帯に登録していたアドレス帳をiPhoneに転送する作業。
ソフトバンクの「電話帳かんたんコピー」をiTunes経由でインストールして実行しても、エラーコード300あるいは202が出て、何度やっても転送できません。
らちがあかないので別の方法を考えました。
ドコモの携帯を使っているときは、リュードの携帯シンクでバックアップを取っていたので、これを転送することにしました。

携帯シンクの電話帳を立ち上げて、どのようにバックアップデータを取り込むのか最初は分かりませんでしたが、何のことはない、バックアップデータをダブルクリックするだけ。
次にCSVか何かで書き出そうと思ったら、[ファイル]ー[エクスポート]メニューに「アドレスブックへ」があるではないですか!
これは便利!
Macのアドレスブックに「ケイタイ」というグループを作って一括転送したのですが、よく考えたらドコモの携帯で作ったグループとアドレスブックのグループもだいたい同じ。であればグループ毎に転送して整理するほうが効率的かなと考え直して、やり直しました。

同じ名前で複数のカードが出来たりしましたが、これは少しずつ整理することに。

あとはMacとiPhoneを接続して同期すれば完了。
簡単でした。

ページトップに戻る