ラベル iPhone の投稿を表示しています。 すべての投稿を表示
ラベル iPhone の投稿を表示しています。 すべての投稿を表示

2014年11月4日火曜日

Google アカウントに2段階認証プロセスを設定した - 不審なアクセスがあったので即有効化

1. Google アカウントに不審なアクセスがあったのでパスワードを変更

Google のサービスにアクセスしたら、画面上部に赤い警告が表示がされた。内容は Google アカウントに不審なアクセスがあったとのこと。

を確認したら、不明な場所からのアクセスがブロックされていた。

SnapCrab_No-1566

心当たりはないので、すぐにパスワードを変更。

 

2. Google の2 段階認証の特徴

a. 2段階認証設定の必要性を感じていた

最近、Dropbox の 2 段階認証を有効にした。(2014年10月14日)

2 段階認証を設定する必要性を痛感したのは、1年前に以下の記事を読んだとき。

「シリア電子軍」が今度はオバマ大統領のTwitterのURL短縮アプリをハック―急遽Google2段階認証採用へ | TechCrunch Japan(2013年10月29日) によると、

「オバマ大統領のTwitterのアカウント自体は乗っ取られていない。乗っ取られたのはツイート中の一部のリンクだけだ」とオバマ大統領の支援政治キャンペーン組織、Organizngfor Action(OFA)の幹部が認めた。… OFAはこの攻撃の後、急遽Googleの2段階認証を導入したという。

これまで Google アカウントで 2 段階認証を設定してなかった理由は、Dropbox の 2 段階認証 と違い少し手間がかかるため。Google アカウントを 2 段階認証するだけではなく、Google アカウントを利用しているアプリケーションに対して、個別にパスワードをする必要がある。

 

b. 2段階認証の基本

SnapCrab_No-1578 (2)2 段階認証を設定すると、Google アカウントにログインするときに、パスワードと伴に「認証コード」の入力が求められる。

2 段階認証プロセスについて - Google アカウント ヘルプ によると

パスワードと携帯端末の両方を使用してアカウントの不正使用を防止します。

 

c. Google アカウントを利用するアプリごとにパスワードを設定する

ここまでは Dropbox の 2 段階認証 と同じ。しかし、ここからが少しややこしい。

Google の 2 段階認証に対応していないアプリケーションごとに、専用のパスワードを生成し、各アプリごとにパスワードを設定し直す必要がある。

Insider's Eye:Googleアカウントの乗っ取り対策「2段階認証」を導入する (1/2) - @IT によると、

メーラやRSSリーダのように、Webブラウザ以外でGoogleのサービスを利用するアプリケーションでは、2段階認証に対応していないことが多い。こうしたアプリケーションでは2段階認証の導入後、Googleによって生成される「アプリケーション固有のパスワード」(以後「固有パスワード」)を従来のパスワードの代わりに指定する必要がある。

スマートフォン/タブレットを利用していると、メーラやカレンダ、チャット・クライアントなどなど該当アプリケーションは多いので、見落とさないように2段階認証の導入前にリストアップしておくとよいだろう。

あとは、Googleにログインするアプリケーションごとに、固有パスワードを生成・指定していけばよい。1つの固有パスワードをメモしておいて複数のアプリケーションで使い回すことは可能だが、メモから固有パスワードが第三者に漏えいする恐れがある。

むしろ上記の手順で固有パスワードを生成・表示させたら、それを見ながら即座にアプリケーションのパスワードを変更・保存して正常にログインできることを確認した時点で、その固有パスワードを忘れてしまった方がよい。… [完了]ボタンをいったんクリックすると、以後その固有パスワードはまったく表示されなくなる。もしパスワードの再入力が必要になったら、新たに固有パスワードを生成し直せばよい。

 

3. Google の2 段階認証を設定する

では、最初に「 2 段階認証」を有効にする。

セキュリティ - アカウント設定 より、「 2 段階認証プロセス」の「設定」リンクをクリック。

SnapCrab_No-1566 (2)

次に、携帯電話のアドレスを設定し、「テキストメッセージ」としてコードを受けとる方を選択。、「コードを送信」ボタンを押す。このとき、電話番号ではなく、携帯のアドレスであることに注意。

SnapCrab_No-1570

携帯電話に送られた「コード」を入力する。

SnapCrab_No-1571

今、操作している PC は「信頼できる PC」として登録し、ログインの度にコードの入力を求められないようにした。

SnapCrab_No-1572

最後に「確認」ボタンを押して、2 段階認証プロセスを有効にする。

SnapCrab_No-1573

続いて、アプリ パスワードを設定する場合は、「アプリを再接続」ボタンを押す。

SnapCrab_No-1574 (2)

 

4. アプリ パスワードの設定

Google アカウントを利用するアプリケーションで、2 段階認証に対応してないアプリを利用している場合、専用のパスワードを設定する必要がある。

アプリ パスワードでログイン - Google アカウント ヘルプ によると、

アプリ パスワードは、Google アカウントへのアクセス権をアプリや端末に付与する 16 桁のパスコードです。…

2 段階認証プロセスに登録すると、通常は確認コードが届きます。ただし、これらのコードは iPhone や iPad の Gmail、Thunderbird、Outlook など、一部のアプリや端末では動作しません。代わりに、そうしたアプリや端末を使用して Google アカウントに最初にログインする際に、アプリ パスワードを生成して入力することでアプリや端末を認証する必要があります。

 

a. Windows 上のアプリの場合

例えば、Windows 上で使っている Windows Live Writer の設定を行う。

セキュリティ - アカウント設定 より、「 2 段階認証プロセス」の下にある「アプリ パスワード 」リンクをクリック。

SnapCrab_No-1575 (3)

「端末の選択」で「Windows パソコン」を選択し、「アプリを選択」において「その他(名前を入力)」を選択して、`Windows Live Writer’ と入力。

SnapCrab_No-1575 - コピー

生成されたアプリ パスワード画面に「お使いのデバイスのアプリ パスワード」が 16 文字で表示される。この文字列をコピーしておく。

SnapCrab_No-1576

次に Windows Live Writer のアカウント設定において、パスワード欄を上記のアプリ パスワードで置き換える。

SnapCrab_No-1578

 

b. iOS 上のアプリの場合

例えば、iPod touch (iPhone, iPad) の iOS 上で Gmail の設定を行う。

予め、セキュリティ - アカウント設定 より、「 2 段階認証プロセス」の下にある「アプリ パスワード 」リンクをクリック。

「端末の選択」で「iPad」を選択し、「メール」を選択し、「生成」ボタンを押す。

SnapCrab_No-1580

先ほどと同じように、16文字のパスワードが表示される。

iOS 上で、

  • 設定 > メール/連絡先/カレンダ/ > Gmail > アカウント
IMG_0232 IMG_0233

の「パスワード」に、上記で生成されたパスワードを設定する。

ちなみに、Gmail の専用アプリは、既に 2 段階認証に対応しているので、アプリパスワードを設定する必要はない。ログインした後、コードを入力するだけで済む。

 

5. バックアップコードの取得

携帯電話を失くしてコードを受け取れなくなり、アカウントにログインできなくなった場合に備えて、バックアップコードを取得しておく。

バックアップ コードを使用してログインする - Google アカウント ヘルプ によると、

携帯端末を紛失した場合や、SMS、音声通話、Google 認証システムでコードを受け取ることができない場合は、バックアップ コードを使用してログインできます。

より、「印刷またはダウンロード」ボタンをクリック。

SnapCrab_No-1581

 

テキストとして保存

今回は、テキストとしてダウンロードした後、パスワードを管理する KeePass に内容を貼り付けておいた。

KeePass ファイルは Dropbox に保存してある。先日、Dropbox に 2 段階認証した。携帯電話を失くし、同時に 自分の PC も壊れる確率は低いので、とりあえずこの運用にしておく。最悪の場合、Dropbox の2段階認証を無効にして対応する。

心配なら、別のストレージに保存するか、バックアップコードを印刷しておけば良い。

テキストファイルとして一度保存したバックアップコードは、復元できないように IObit Uninstaller のシュレッダー で削除。その後、念のため、ブラウザのキャッシュも削除し、Windows の一時ファイルを Easy Temp File Cleaner で削除した。

 

6. 登録した PC, アプリケーションの解除

a. 信頼した PC を解除したい場合

信頼した PC を解除したい場合、他の PC をから

にアクセスし、設定の変更を行う。

SnapCrab_No-1575 (4)

 

b. アプリケーションの認証を解除したい場合
  1. アプリケーションの認証を解除したい場合、セキュリティ - アカウント設定 より、「 2 段階認証プロセス」の下にある「アプリ パスワード 」リンクをクリック。
  2. アクセスの列の「取り消し」ボタンを押す。

SnapCrab_No-1575 (2)

これでひとまず一安心。 ^^

2014年10月14日火曜日

iOS (iPhone, iPod touch) のカレンダーに、共有した Google カレンダーが表示されない

1. iOS のカレンダーに Google カレンダーを表示

IMG_0228iOS (iPhone, iPod touch) のカレンダーで Google カレンダーを表示している。

Google カレンダーを表示するには、Gmail アカウントを追加する必要がある。。

  • 設定 > メール/連絡先/カレンダー > アカウント

において、「アカウントを追加」。

IMG_0232

IMG_0233

 

2. Google カレンダーで「共有カレンダー」の表示設定をする

しかし、共有している「他人が作ったカレンダー」が表示されていない。

カレンダーアプリにて、

  • カレンダー > Gmail

を確認すると、自分が作成したカレンダーのみ表示されている。

IMG_0230 IMG_0229

これに対して、「カレンダー ヘルプ > カレンダーのインポート、エクスポート、同期 > iOS 端末と Google カレンダーを同期する> 複数のカレンダーを同期する」によると、

  • 携帯端末のブラウザから、https://www.google.com/calendar/syncselect のページにアクセスします。
    • Google Apps ユーザーは次の URL にアクセスしてください: https://m.google.com/sync/settings/
  • 同期するカレンダーを選択して [保存] をクリックします。

選択したカレンダーは、次回の同期時に端末に表示されます。

そこで、PC または iOS 端末のブラウザで Google アカウントにログインし、https://www.google.com/calendar/syncselect にアクセス。「共有カレンダー」から必要なものにチェックを入れ、保存ボタンを押した。

SnapCrab_No-1548

これにより、iOS 側では、一度「カレンダー」を終了し、再び起動しなおすと、上記でチェックした「共有カレンダー」が表示されるようになる。

2014年5月6日火曜日

固定幅のサイトにおける viewport の設定。iPhone で見た場合、横の隙間 (空白) をなくすには。

1. 横の隙間 (空白) をなくしたい

iPhone の画面に最適化されていないサイトを見ると、コンテンツの両脇に隙間 (空白) ができることがある。

例えば、Open Source Web Design - Three Quarters > Three Quarters は、スマートフォンに最適な表示がされない。iPhone で表示すると、左下の画像のように表示される。コンテンツの両脇に不要な空白ができてしまう。

これを右下の画像のように、できるだけコンテンツを表示するように、両脇の隙間を取り除きたい。

IMG_0112 IMG_0117

 

2. このテンプレートにおける HTML の構造

最初にこのテンプレートにおける HTML の構造を把握しておく。

コンテンツを囲む全体の幅は、body タグに対する CSS の指定で 850px の固定幅が指定されている。body タグの背景画像として、コンテンツ部分の白色と、影を含めた両脇に対応した画像が設定されている。

body タグ直下の div タグは 700px の横幅。影を除いた白色の部分の幅を測ると約 750px

SnapCrab_No-1001

両脇に影のあるデザインは古めかしく、簡単な変更で済ますために、予め、デザインをフラットなものに変更した。そのためには、CSS ファイル (screen.css) の body タグに対する背景の画像を削除。そして、背景の色を白に指定。幅を 750px に変更した。

  • body タグに対する CSS の指定
    • background-image を削除
    • width: 750px;
    • background-color: #fff;

これにより、以下のような表示となる。

SnapCrab_No-1002

 

3. Viewport とは表示される領域のこと

iPhone では横幅 980px として表示される

iPhone でサイトを見ると、横に隙間ができる理由は、iPhone に搭載されたブラウザの仕様による。

iPhone ではサイトに何も指定がなければ、PC のブラウザで横幅 980px の領域が表示できるウィンドウの大きさにしたときと同じように見える。iPhone では、PC のブラウザのようにウィンドウの大きさを変更するという操作がないため、横幅が固定されている。

iPhone用にサイトの幅と画面の幅を合わせるには によると、

iPhone4やiPhone4Sは、解像度が横980pxなので、… PC用に作られたPCサイトを表示させると、… 読みにくい表示になるだけでなく、右横に隙間が表示されてしまいます。

たとえば、… 横幅が900pxで作成しているため、80px分の隙間が出来てしまっています。

上例のサイトを PC 上のブラウザで 980px の横幅にして見てみると、以下のように表示される。

SnapCrab_No-1003

PC のブラウザと iPhone での表示を拡大縮小して重ね合わせると、表示されている領域が一致することが確認できる。

SnapCrab_No-1003

 

viewport

このような表示に関する概念として覚えておく言葉は `Viewport’.

viewport とは、現在見ている矩形領域のこと。ブラウザで言えば、ウィンドウ内に表示されている領域に相当する。たとえるなら、覗き窓。

viewport – Wiktionary によると、

(computer graphics) A rectangular region representing the range or area currently being viewed.

iPhone では、画面の解像度と、表示される領域が異なることに注意すること。また、Android では事情が異なってくる。

スマートフォン時代のWebサイト制作 第2回 スマートフォン特有の表示環境を理解する | デベロッパーセンター

例えば、iPhoneではどうでしょうか。結論から言うと、iPhoneでは“何もしなければ”横幅980pxでウェブサイトが表示されます。iPhoneのスクリーンはデスクトップのスクリーンのようには大きくないのに、なぜそのようになるのか不思議に思うかもしれません。ここで理解しないといけないのが「Viewport(ビューポート)」です。…

Viewportとはブラウザーの画面表示領域のことです。もう少し分かりやすく言えば、デスクトップでいうところのブラウザーウィンドウ上の表示サイズです。スマートフォンではデスクトップのようなリサイズできるウィンドウの概念はないため、その機種のスクリーンサイズがブラウザーウィンドウのサイズとなります。この通り素直に考えれば、iPhoneの3.5インチスクリーンの横幅320pxに合わせてViewportも320pxとなると考えてしまうのですが、実際にはこれが980pxとなります。

なぜそのようになっているかというと、スマートフォンブラウザーはデスクトップ向けサイトを閲覧できるのが特徴です。そのため、既存のウェブサイトをちょうど画面に収まるようにするには、Viewportのサイズをデスクトップ相当にしておく必要があります。

ちなみにAndroidの場合は、その機種のスクリーン幅以上のコンテンツでも、スクリーンに収まるように表示されます。

 

4. meta タグの viewport で幅を指定

width=device-width

viewport を指定するには、meta タグを利用する。

これがスマートフォン向けサイトを作るときの viewport 設定3パターンだ - てっく煮ブログ によると、

「スマホ向けにデザインしているよ」と主張するには <head> タグの中に viewport を 1 行追加すればよい。

<meta name="viewport" content="width=device-width">

width=device-width というのは「デバイスの横幅で描画してください」という意味である。

一昔前は iPhone 前提で width=320px と指定すれば十分だったが、解像度がまちまちな Android やタブレット端末が登場したため、width=device-width と指定するのが新常識になった。

HTML5/ページ全般/meta要素 表示領域を設定する - TAG index Webサイト によると、

meta要素name="viewport" を追加すると、文書の表示領域を設定することができます。…

content属性の値には、以下のプロパティを指定することができます。

width= 表示領域の幅 数値 ピクセル数 (20010000 の範囲、初期値は 980
device-width 端末画面の幅に合わせる

これより、viewport に

  • width=device-width

を指定した。その結果、iPhone でコンテンツが納まらなかった。横幅は、PC 上のブラウザで幅 640px を指定したときと同じようだ。

IMG_0119

 

width=[幅をピクセル数で指定]

これに対して、blog.鶯梭庵/links/たぶん、ほとんどの人は viewport meta タグの指定をまちがえてる によると、

先に結論を書いておく。適切な設定は、ページ幅が固定されているウェブページの場合、viewport meta タグを書かないか、

<meta name="viewport" content="width=(幅をピクセル数で指定)">

とする。ページ幅が可変(リキッドレイアウトとか RWD とか)のウェブページの場合、

<meta name="viewport" content="initial-scale=1.0">

とする。

そこで、iPhone に表示する領域として、body タグの幅を viewport の width に指定した。

<meta name="viewport" content="width=750">

これにより、iPhone でコンテンツが隙間なく納まるようになった。

IMG_0117

 

5. スマホサイトにおける viewport の設定に対する考え方

スマホサイトに対する設計には 2 つの考え方がある。

一つは全体を俯瞰し、必要に応じて拡大縮小するタイプ。もう一つは、ユーザによる拡大縮小操作を禁止し、スマホに特化した表示をすること。

それぞれ一長一短があるので、サイトの目的に合わせて最適化するのが良いようだ。

pxt | 考察:Appleはスマホサイトを作らない。 によると、

今まで気づかずにいたが、Appleはスマホ(スマートフォン)向けサイトを作っていない。それは何故か。…

Appleのウェブサイトの裏側をちょっとだけ覗いてみると、viewport に width=1024 が記述されている。これは、iPhoneの小さな画面でも1024px分の幅があるものと仮想してレンダリングされるようにする…

小さな画面でありながらページ上の構成要素の全体を一目で把握して、自分が必要な情報に、直感的なダブルタップの操作でフォーカスできる。興味の順に次々読み進められるし、斜め読みだってできてしまう。

これが、Appleが掲げたモバイルサイトのデザインであり、Mobile Safari のUI設計の本質なのではないだろうか。

スマートフォン時代のWebサイト制作 第2回 スマートフォン特有の表示環境を理解する | デベロッパーセンター によると、

またmeta viewportでは、他にもユーザによる拡大/縮小操作の倍率を指定したり、拡大/縮小操作自体を禁止することもできます。Yahoo! JAPANやlivedoorなどのサイトでは、下記のようにユーザによる拡大/縮小操作ができないようにしています。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">

ケースバイケースではありますが、これらはユーザによる任意の操作を禁止することになるので、筆者としてはあまり好ましい指定と考えてはいません。「ユーザにも親切である」という意図がなければ、この制限のある指定は避けるようにしましょう。

 

参考サイト