そろそろ Facebook の 2 段階認証の導入

すっかりブログから遠ざかり気味で 1 か月に 1 記事という具合になっていますが、以前からあった Facebook なりすましアカウントからの友達申請が周辺でも最近になってさらに目立ってきているので、メモとして残しておきます。
Facebook の 2 段階認証はしばらく前から実装がされていた様に思うのですが、まだ設定をされていない方も多いかと思います。
なりすまし申請は防げませんが、なりすましの最終目的は僕らのアカウントの様なので、万が一、乗っ取られて被害に遭う前に 2 段階認証の導入をします。
特に会社や店舗等の Facebook ページの開設をしている場合は、仕事にも大きく関わってしまうことがあるかもしれません。

Google の 2 段階認証に関しては以前、こちらの記事で触れましたので、ご参考にどうぞ。
※以下の方法では Mac、または PC、および Facebook アプリを使用可能なスマートフォンが必要になります

1. 携帯電話番号の登録

2 段階認証というくらいなので、パスワード以外に信頼に値するものの設定をしなくてはなりません。それが携帯電話になります。

  1. Mac、または PC のブラウザーより Facebook を開き、右上にある歯車のアイコンをクリックし [アカウント設定] を選択します。
  2. 左側にある [モバイル] を選択します。
  3. そこにある [携帯電話番号を追加] をクリックし、指示に沿って携帯電話番号の入力を完了後、すぐに携帯電話あてに SMS (メッセージ) が届きます。
  4. SMS にある 6 桁の番号を先ほどのページ右側 [確認用コード] に入力をします。

以上で携帯電話が承認済みとなります。

2. ログイン承認の設定 (2 段階認証の設定)

以降の設定は引き続きブラウザーにて行っても構わないのですが、ここでは何かの合間に設定をしたい場合があるかもしれませんので、iOS の Facebook アプリでの設定を取り上げます。
Android アプリ、Mac、PC のブラウザーでも同様の項目にて設定を行います。

  1. Facebook アプリの左上、3 本線のアイコンをタップし [アカウント設定] を選択します。
  2. 次に上から 2 つめの [セキュリティ] を選択します。
  3. そこにある [ログイン承認オン] をタップすることで設定が開始されます。
  4. ここでも「1. 携帯電話番号の登録と同様」に指示に従っていくことで SMS にコードが送られてきます。
    Mac、PC での設定の場合では、後ほど触れる [コードジェネレータ] を確認する様にプッシュ通知があります。
  5. 最後の画面で名前を付ける (例: iPhone 5 (xxxx) 等) ことで次回より、コードの確認なしに利用をすることができます。

以上で設定は終了になります。

3. Mac、PC からのログイン

ここまでの設定で、新たにログインをしようとするブラウザーにはすべてセキュリティコードの要求をすることになります。
仮に同一の Mac 上でもブラウザーが異なればすべて必要になります。
この際、認証済み携帯電話の Facebook アプリよりコードジェネレータを確認する様にプッシュ通知がありますので、そこにある 6 桁の数字を入力します。
もし、携帯電話がつながらない状況にも対応ができる様「ログイン承認コード」が別途、用意されていますので、あらかじめ「2. ログイン承認の設定」で触れた [ログイン承認オン] の下にある [ログイン承認コード] を控えておくと困らないでしょう。
設定をしておくことで、仮に不審なログインがあった場合でもそこで歯止めとなりえるので、おすすめをします。
携帯電話を紛失した場合の対処方法もありますが、酔ってどこかに置いてきたということだけは、2 段階認証が主流になってきて、本当に避けたいものです。

プラグインを使用せずに Send to Kindle ボタンの設置 [WordPress]

Amazon よりウェブサイト用の「Send to Kindle ボタン」が公開されました。
早速、問い合わせをいただきましたので、設置を試してみました。

WordPress 用にプラグインが用意されているのですが、試してみたところ、ウェブサイト上で生成をしてしまった方が手っ取り早かったので、こちらの方法をメモとして残します。

まず注意点ですが、現時点では Amazon.co.jp のアカウントでは Kindle に送信をすることができませんので、Amazon.com のアカウントが動作検証のために必要になります (まだ、用途が限られるということですね)
僕はこの 2 つのアカウントの統合は行っていないので、以前に使用をしていた iPhone 4 を英語環境にし、Kindle アプリにて確認をしています。

以下は、Amazon.com: Send to Kindle Button にて設定を行います。

ボタンスタイルの指定

「Choose your button style」にあるプルダウンメニューとチェックボックスより任意の項目を選択することで見た目の指定を行います。
この記事の下に表示をしていますが、以下の指定としています。

Text Kindle
Font Sans Serif
Icon Color Light
Icon Size Small
Theme Light
Border チェック

タイトル、作者、公開日時の指定

「How do you mark the title, author, and publication date on your pages ?」部分ですが、Facebook の Like Button や Like Box の設置をしていれば Open Graph protocol (OGP) の記述はあるかと思います。
このブログの場合も記述済みですので [Open Graph] を選択します。
ここで必要なものは以下の 3 つになります。

[php]<meta property="og:title" content="<?php the_title(); ?> | <?php bloginfo(‘name’); ?>" />
<meta property="og:article:author" content="<?php the_author(); ?>" />
<meta property="og:article:published_time" content="<?php the_time(__(‘Y-m-d’)) ?>" />[/php]

実際はもっと多くの OGP の記述がありますが、ここでは割愛をします。
気になる方は HTML をご覧ください。

表示をさせるコンテンツの指定

「How do you mark the main body of content on your pages ?」の部分になります。
このブログは Wpshower の「Blogum」というテーマを使用していますが、コンテンツ部分の CSS セレクタが「post_content」で、その中に記事のタイトルが含まれる構造となっており、うまく抽出をできませんでした。
構造の変更をする余裕がありませんので [Custom CSS Selectors] の使用は見送り [schema.org] に準じて Microdata のプロパティの記述をします。
この部分のみで気持ちが悪いのですが、いずれ対応をするということにしたいと思います。
記事であれば single.php、ページであれば page.php のコンテンツ表示部分を以下の様に「articleBody」の指定をすることにより抽出されます。

[php]<div itemprop="articleBody"><?php the_content(); ?></div>[/php]

Kindle ストアで定期刊行物の販売をしているかの指定

「Do you sell a periodicals subscription on Kindle ?」の部分ですが、多くの方は当てはまらないと思いますので [No] にて問題は無いでしょう。

ウェブサイトへの設置と動作の確認

以上で設定は終了となりますので [Generate widget code] をクリックし、コードを取得します。
「Step 1」を footer.php にある </body> タグの直前に記述します。
「Step 2」は表示をさせたい任意の位置に記述します。ずらずらと style がありますので、カスタマイズも可能ですね。
以下が表示結果になります。

最初は左側の設定画面が表示されますが、次回からは右側の画面が直接、表示される様になります。
この右側の画面にて [Send] をクリックすることで指定の Kindle デバイス、またはアプリに送信されます。
受信をした Kindle アプリでの表示が以下になります。
CSS の問題かもしれませんが、表示にズレが見られます。
今後、当然の様に設置されるボタンになった場合は、Kindle での表示確認も検証項目に含まれるかもしれません。

後ほど読むためのクリップとしての用途が多いかとは思いますが、普段は Pocket を利用していますので、使い分けはどうなっていくでしょうか。
持ち歩いている Kindle は Paperwhite なので転送はしないでしょうが、Fire 等のタブレット端末とは相性の良いボタンかと思います。

圏外の場所で 2 段階認証プロセスを利用する Google Authenticator

昨年末辺りから Gmail 等で Google アカウントを乗っ取られたという情報がニュースをにぎわせていることもあり、2 段階認証プロセスという言葉が少しだけ浸透をしてきたのではないでしょうか。
ただ、コードを受け取る方法が基本的に携帯電話のメールアドレスのため、圏外の場合に利用ができないという質問が知人からありましたので、それを可能にする Google Authenticator について、簡単に触れたいと思います。
以下は 2 段階認証プロセスの設定が完了をしていることが前提となります。
2 段階認証プロセスはこちらより設定ができます。
仕組み – Google アカウント ヘルプ Continue reading “圏外の場所で 2 段階認証プロセスを利用する Google Authenticator”

エンブックス ウェブサイトリニューアルと WordPress プラグイン

エンブックス ウェブサイト
連絡を頂いて、上島珈琲店 高円寺北口店で話をしたのは昨年の夏でした。
合間、合間で少しずつ進めてきたのですが、ちょうど最初の絵本「こわくないもん」が発売されてから 1 年、4 月 20 日の公開となりました。
ペーパーバック絵本のレーベル エンブックス主宰の西川 さんとはもう数年前に高円寺にあるバール タッチョモにて出会ったのですが、これも「エン」ですね。 Continue reading “エンブックス ウェブサイトリニューアルと WordPress プラグイン”

アメーバブログの RSS フィードを取得、PR の削除、記事内容の抜粋をする [WordPress]

アメーバブログ (アメブロ) の投稿記事の一部を抜粋し、WordPress の固定ページに一覧表示をさせる機会がありましたので、メモとして残しておきます。
今回は WordPress 3.0 から非推奨となった rss.php を使用せず、/wp-include/class-simplepie.php を使用して外部 RSS フィードの取得を行うこととし、それに当たって以下のウェブサイトを参考にしました。
外部 RSS フィードの取得・表示 2: WordPress | FindxFine -Web 制作に関するメモ-
紹介されている内容に加えた処理は、以下の通りです。 Continue reading “アメーバブログの RSS フィードを取得、PR の削除、記事内容の抜粋をする [WordPress]”

モバイルデバイス用のウェブページ確認ツール Adobe Shadow Labs Release 1 を試す

Adobe Shadow Labs Release 1
モバイルデバイス用のウェブページ確認ツール Adobe Shadow Labs Release 1 が公開されましたので、試しました。
このソフトウエアはデバイスをシミュレートするものでは無く、Mac または Windows の Google Chrome とペアリング済みの iOS、Android 端末に Mac、PC 側の操作のみで同じページを表示させるものです。ページの移動やタブの切り替えをするとモバイルデバイス側の表示も自動的に変わります。
常時、表示中のページが同期されていると考えると分かりやすいと思います。
当ブログの様にプラグイン (WPtouch Pro) にて制御をしている場合はあまり必要は無いと思いますが、レスポンシブデザインの場合は威力を発揮します。 Continue reading “モバイルデバイス用のウェブページ確認ツール Adobe Shadow Labs Release 1 を試す”

モリサワのクラウドフォントサービス TypeSquare を試す

モリサワ クラウドフォントサービス TypeSquare UD 新ゴ R スクリーンショット
本日 2012 年 2 月 22 日 (猫の日等々)、モリサワのクラウドフォントサービス TypeSquare がサービスを開始したので早速試しました。
12 月 31 日までは「オープン記念 ¥0 キャンペーン」期間となり、PV の上限なく無料にて利用が可能になっています。
正式入会は 12 月 1 日からとなり、キャンペーン期間終了日まで申込みがない場合は退会となります。
利用者が集中することで、何らかの不具合が発生することを想定してのキャンペーン期間でしょうか。 Continue reading “モリサワのクラウドフォントサービス TypeSquare を試す”

Twitter の新しいフォローボタンの設置、簡単にボタン、文字色を変更する

2011 年 5 月 31 日、米 Twitter が新しい Follow Button を発表しました。
ウェブサイトから Twitter に遷移することなく、フォローが可能となります。
当サイトも試しに早速設置しました。
設置するための HTML は設定ページより簡単に取得することができます。
背景に使用する色の選択 (明るい、暗い) ができる様になっており「暗い」を選択した場合、HTML に以下の 3 つの項目が追加されます。

  1. data-button=”grey”
  2. data-text-color=”#FFFFFF”
  3. data-link-color=”#00AEFF”

Continue reading “Twitter の新しいフォローボタンの設置、簡単にボタン、文字色を変更する”

最近に見た映画 (6) 〜「ソーシャル・ネットワーク」

1 月に「ソーシャル・ネットワーク」を見ようと新宿付近に向かったのですが、その時はなぜか「冷たい熱帯魚」を見に行って、でんでん さんの演技に圧倒されて帰ってきました。
iTunes Store にてレンタルが開始されていましたので、早速 (?)
最初の彼女との場面に関してはすんなりと入り込めるでしょうが、その後は IT 関連業界に携わった経験があり、ある程度の人物を把握していないと難しいのかなと感じました。
僕は Napstar を利用していたこともあり、今でもウェブサイト制作に携わることがありますので飲みこめますが、どうなのでしょうか。
彼女との場面以後、早速 Apache 等々の専門用語が発せられます。それでも総じて平たく言葉の選択は行われているのかもしれません。
早口で進む小気味の良さと、裁判と絡めた現実味のある展開は楽しめました。 Continue reading “最近に見た映画 (6) 〜「ソーシャル・ネットワーク」”

ソーシャルサービスのボタンの追加 (mixi チェック)

ソーシャルサービスのボタンを追加することにしました (使用される可能性に関しては気にせず)
今回は 2 つ。Facebook の Like Button も考えましたが、デザインを考えるとどうにも収まりの悪いボタンなので見送ります。
使用するためには mixi Developer Center への登録が必要ですが、複雑な手続きは必要ありません。
携帯電話のメールアドレス入力後、リンクをクリックして認証をする必要がありますが、iPhone は Safari が起動しますので、ここでダメ…、相変わらずですね。久々に au MEDIA SKIN が役立ちました。 Continue reading “ソーシャルサービスのボタンの追加 (mixi チェック)”