Facebook「いいね!」の「コメント入力欄」のポップアップ

Facebook「いいね!」ボタンは、Facebook公式プラグインを使用していますが、使い方によってWordPressのページが壊されてしまっていました。

指摘してくださった方、ありがとうございます。

無事解決しましたので、お礼がてらブログとして記録しておくことにいたしました。

「いいね!」ボタンを押すと

「いいね!」ボタンを押すと

【問題点】

写真のように、右下にある[閉じる]ボタンがきちんと表示されていません。
設定によっては、ボタンが全く表示されないため閉じることができなくなってしまいます。

これは、固定ページや投稿ページの本文中に入れる「いいね!」ボタンを押すと、コメントを入力するポップアップが出てきますが、その横幅の問題です。

横幅をデフォルトのままにすると、iPhoneで見たときにページのデザインが崩れてしまいます(これは、TwitterBootstrapとの絡みもあります)。そのために、横幅を調節したのですが…

横幅が狭いと、「いいね!」ボタンを押すと出てくるコメント入力欄の右下にある[閉じる]ボタンが見えず、コメント入力欄が開きっぱなしになってしまいます(写真の状態)。

【解決方針】

コメント入力欄が出てこないようにする。そのためには、・・・

Facebook プラグインのコードバージョンには、HTML5、XFBML、IFRAME、URL といった種類があります。

これらのうち、コメント欄のポップアップが出てくるのは、
HTML5、XFBML
の二つでした(URL版は一瞬出てきて何故かすぐ消えました)。

IFRAME 版のプラグインを使えば、コメント欄のポップアップは出てきません。

【IFRAME 版のプラグインを選択する方法】

  1. Facebook プラグインの設定項目のうち「Like Button」を選択し、「Like Button Settings」のページへ行きます。
    Facebook [Like Button]

  2. 「Read more… 」と書いてあるリンク先へ飛びます。
    Facebook [readme]

  3. 「URL to Like」の欄に、いいねをしてもらいたいページのアドレスを記入して、レイアウトなどを決めたら、下にある[Get Code]ボタンをクリックします。
    Facebook[Get Code]

  4. 現れたポップアップ内の[IFRAME]ボタンを押します。
    Facebook[IFRAME]

  5. 表示されたコードをコピーして、「いいね!」ボタンを置きたいページの場所に、コードを貼り付けます。
    Facebook[Paste Code]

おわり。

「パスワード認証はやめましょうね」の巻

「パスワード認証はやめましょうね」の巻

外に開いているサーバでsshのポートを開けていると、「/var/log/secure」のログを見ればわかるように、色々な人がsshでログインしようとしていることが伺えます。

ログインができたら、もうそれはサーバーを乗っ取られたということに等しいわけで、危険です。もしかしたらパスワードをランダムでログインしようとして、いつかは成功してしまうかもしれないからです。しかし、秘密鍵やら公開鍵を作った方が良いだろうけれど、面倒なのでパスワード認証でやっている、というサーバもありそうです(今時あまりないでしょうが、開発用の試験サーバのような暫定的な場合は結構ありそうです)。↓はsecureログの例(3秒に1回ぐらいアクセスしている・・・)。

pam_unix(sshd:auth): authentication failure; logname= uid=0 euid=0 tty=ssh ruser= rhost=112.65.244.xxx  user=root

そこで、今回は「ほうら、sshの公開鍵方式はこんなに簡単ですよ」という話をしてみます(iptablesでアクセスできるipを絞るというようなことも可能ですが、ここでは省略)。とりあえず環境的には、ローカルはMacBook Air(Marvericks)、サーバはCentOS6.2(アドレスは「www.yyy.org」)です。

ざっくり、やることは4つだけ
  1. ローカルで公開鍵と秘密鍵を作成する(1コマンド)。
  2. サーバに公開鍵を持っていく(ログインしたいユーザの「~/.ssh/authorized_keys」に追加します(新規の場合は作成します)。
  3. サーバのsshdの「パスワード認証を使えないように」設定を変えて、sshdをリスタートする。
  4. ログインしてみる。

これで終了です。さて、具体的に見ていきます。

ローカル(Mac)でRSA鍵の作成
  1. SSH2では(もう通常はSSH2でしょう)DSAとRSAが使えますが、とりあえずRSAの公開鍵・秘密鍵を作成します。
ssh-keygen -t rsa

をMacターミナル上で上記を実行します。すると、

Enter file in which to save the key (/Users/xxx/.ssh/id_rsa):

と聞いてきます。すでにある場合は上書きされちゃうので変更する必要がありますが(一応上書きするよって聞いてくるので、心配ありません)、初めてなら、そのままリターン。

Enter passphrase (empty for no passphrase):
Enter same passphrase again:

で2度パスフレーズを入れたら、出来上がり。

Your identification has been saved in /Users/xxx/.ssh/id_rsa.
Your public key has been saved in /Users/xxx/.ssh/id_rsa.pub.

が作成されます。上が秘密鍵、下が公開鍵です。

ローカルでは、一応念のため「.ssh/config」に(なかったら新規にファイルを作って)

IdentityFile ~/.ssh/id_rsa

を書き込んでおきます。

サーバに公開鍵を置く

公開鍵なので、あまり神経質になる必要はありませんが、サーバにscpあたりで「id_rsa.pub」を転送しましょう。

scp ~/.ssh/id_rsa.pub xxx@www.yyy.org:/home/xxx

そして、とりあえず今回まではサーバにパスワード認証で入ります。

そして、↑でホームディレクトリに「id_rsa.pub」を転送したので、これを~/.ssh/authorized_keysに追記します(初めてなら新規に作成、今回は初めてなので新規に作ります)。

mkdir .ssh
mv id_rsa.pub .ssh/authorized_keys
chmod 600  .ssh/authorized_keys

そして、ローカルにある「id_rsa.pub」は通常いらないので、削除してしまいましょう。

sshdの設定変更

sshdの設定ファイルは「/etc/ssh/sshd_config」なので、これを修正します。

※「PasswordAuthentication no」は、鍵を使ってログインできることを確認してから、変更した方が無難かもしれません

Protocol 2
PermitRootLogin no #念のため
RSAAuthentication yes
PubkeyAuthentication yes
PermitEmptyPasswords no
PasswordAuthentication no

とします。そしてsshdをリスタート

/etc/init.d/sshd restart
ログイン確認
ssh xxx@www.yyy.org

でログインしようとすると、Macでは下のようなポップアップが出てきます(初めて見たときは驚きます!)。

sshmac

最初に鍵を作ったときのパスフレーズを入力すると、ログインできます。

そして、次からはパスフレーズを聞かれなくなります。

※これだとノートパソコンをどこかに忘れたりすると危険ということもあり、上記の鍵方式に加え、やはり「iptables」でIPアドレスを絞る方が心配ないですね(その分出かけたときに仕事ができませんがw)。

蛇足

この鍵を使ってのsshにすると、コマンドラインでやっている人以外、このままだとscp(WinSCPなど)が使えません。

FileZillaやWinSCPはPuTTY形式では利用できるので、問題なく使えます(FileZillaはFileZilla自身でコンバートしてくれますが、WinSCPは自分で変更する必要がありますので、とりあえずPuTTYをインストールする必要があります)。下のURL等を参考にして下さい。

終わり。

ちく

SoundflowerとQuickTimeで、ドットインストールのまねごと

MacのQuitckTimeとSoundflowerを使って、ドットインストールのような動画を作成する

QuickTimeは動画は撮れるのですが、音声を取り込めません。ですがSoundflowerというソフトを利用すると、QuickTimeで音声を取り込めるようになります(説明の中の図が小さくて見づらい場合は、図をクリックすると大きな画像が見えます)。

Soundflowerのインストール

Soundflowerのダウンロード一覧からダウンロードして、インストールします。私は一番上の新しい1.6.6bをダウンロードしましたが、動いています(最初はMountain Lion、その後Mavericksにしましたが、現状大丈夫そうですw)。

※フリーソフトですので自己責任でお願いします。

Soundflowerの設定

Soundflowerをインストールすると、下のような花がLaunchpadに現れます。

soundflower-icon

これを使って起動すると、Macの画面上上部に以下のようなアイコンが現れます(画面上部にあるアイコンバーの一番左です—小さくて見づらいですが)。

soundflower-icon2

このアイコンをクリックすると、以下のような設定画面が現れます。

soundflower-setting

この中のSoundflower(2ch)「None(off)」を2つ下の「Built-in Output」に変更します。

Macのサウンドの設定

次に、「システム環境設定」→「サウンド」で、「出力」タブ「Soundflower(2ch)」を選択します。

soundsetting

これだけでセッティングは終了です。

実際の撮影

まずはQuickTimeをLaunchpadから立ち上げます(下の図)。

quicktime

立ち上がったら、上のメニューの「ファイル」→「新画面収録」を実行します。

quicktime1

実行すると、下の図のようなコントローラが現れます。

quicktime2

このコントローラの右の方にある「下矢印」をクリックして、録音するデバイスを選択します。私の場合はUSBにつないだヘッドセットのマイクを利用するので、UAB-350を選択します。

quicktime3

そして、音声のスライダーが最低になっているので、ある程度大きくします。あとは真ん中の録画ボタンをクリックします。すると、次のようなメッセージが出ますので、今回は画面全体をキャプチャしないので、範囲をドラッグで指定します。

quicktime4

あとは真ん中に「収録を開始」ボタンがあるので、これをクリックすると録画が始まります。

quicktime5

収録が終わったら、画面上部のアイコンで○の中に■がある(下の図では右から3つ目のアイコン)をクリックすると終わります。

quicktime6
その後、お好みのファイル形式を選んで書き出せば終了です(今回は720を選んで書き出しました)。もちろん、iMovieでタイトルをつけたり、編集することも可能です。

quicktime7

実際の作品

というわけで、今回のデモ用に「ドットインストールもどき」を作成してみました。ただ、もちろん本家に比べれば、めっちゃ話が下手ですし、収録した事務所の隣のビルが現在解体中で、そのクレーンの騒音を拾っていますが、あしからず(今回は書き出した後にflvにコンバートしています)。

ちく