embed.ly が提供しているのは、REST 形式で URL を送ると、その URL のコンテンツを埋め込むための HTML を JSON/JSONP で返してくれる API です。embed.ly の API を使うと自サイトへのコンテンツ埋め込みが簡単に行えます。

四の五の説明するよりも実例見てもらった方が早いと思いますのでそうします。

まず embed.ly を使って YouTube ビデオクリップを埋め込んでみます。

次は Twitter を埋め込んだ例です。

embed.ly を使ってコンテンツを埋め込むには、http://api.embed.ly/v1/api/oembed?url=URL にアクセスすると JSON/JSONP 形式でコンテンツに関するデータが返ってきますので、返ってきたデータの html プロパティをそのまま HTML に埋め込めば出来上がりです。

コンテンツのサイズを制御する場合は、maxwidth や maxheight パラメータを付けて API を呼び出すと指定の幅／高さに収まるようにコンテンツの大きさを調整してくれます。

この記事では WordPress にライブラリを取り込むのが面倒だったので使いませんでしたが、Python、PHP、Ruby、JavaScript (jQuery) のライブラリも用意されていますのですぐ組み込めると思います。

現在 embed.ly では YouTube、Flickr、Amazon、CNN、GitHub 等112 種類のコンテンツの埋め込みをサポートしています。

embed.ly は海外のサービスですのでニコニコ動画などの国内サービスはサポートしていないようですが、YouTube や UStream、Facebook に MySpace などなど海外の主要サービスはほとんどサポートしていますので、コンテンツ埋め込みが必要なウェブサイトを作る際はとりあえず抑えとけばよろしいんじゃないでしょうか。

で、この前売ったなんちゃらHACKが棚に並んでいたのでちょっと値札見たら2,000円とか…えらいボッタくってるなーって感じで。

運ぶ手間考えたらゴミ収集車に持っていってもらった方がお得な気がする今日この頃ですた。

1. mysql をインスコする

mysql は yum のパッケージを使います。root から mysql.x86_64、mysql-devel.x86_64、mysql-server.x86_64 あたりをインスコしてください。

# yum install mysql.x86_64 mysql-devel.x86_64 mysql-server.x86_64

rc スクリプトが /etc/rc.d/init.d/mysqld に作成されますので起動します。

# /etc/rc.d/init.d/mysqld start

chkconfig でリブート時に mysqld が起動するように設定して mysql のインスコは終わりす。データベースの設定は後でします。

checkconfig --level 345 mysqld

2. PHP を mysql モジュール付きでインスコしなおす

前の記事書いたときは、WordPress 使うとか考えて無かったので mysql モジュールを PHP に付けてコンパイルしてなかったので、configure からやり直します。また WordPress を動かすには zlib も必要ですので一緒に configure しなおします。

mysql-devel.x86_64 パッケージをインスコした後で、以下のようにリビルドしてください。

$ ./configure --with-libdir=lib64 --with-apxs2=/usr/sbin/apxs \
--with-mysql --with-mysqli --with-zlib-dir
# make
# make install

3. WordPress 用にデータベースを作る

共用鯖じゃないのでデータベースは WordPress 用に作ります。root で mysql にログインして以下のコマンドを実行します。

# mysql
mysql> create database DBNAME default charset utf8;
mysql> grant all on DBNAME.* to ''@localhost;
mysql> revoke ALTER on DBNAME.* from  ''@localhost;

コマンドを実行する際は、DBNAME にはちゃんとしたデータベース名を指定してください。

この例では、新しく作ったデータベースには localhost からなら誰でもユーザー／パスワード無しでログインできるようにしています。mysqld 自体を外部から mysql に直接接続できるよう設定していませんし、前の記事で設定したパケットフィルタが mysql のポートを閉じてますので、ssh 等でシェルアカウントでログインしない限りデータベースにも入れませんので（アプリのバグとか除く）、通常これで問題無いと思います。

よりセキュアに仕上げたい方はユーザー／パスワード設定する等ご自由にどぞ。

4. WordPress をインスコする

WordPress のインスコ自体は普通ですので、公式サイトとか見てください。

やった作業は、パケットフィルタ（iptables）の設定、Apache2 のインスコと設定、Python-2.6.5 をソースからインスコ、PHP-5.2.14 をソースからインスコ、とそれに付随する作業です。

1. まずぶっ壊れたときにどうしたら良いか調べる

VPS とか言っても、普通に全権限があるリモートサーバですので、設定とか間違ったときにどこまで対処できるか調べとかないと色々まずいす。

とりあえずさくらインターネットから来たメールには、

《VPSコントロールパネルについて》

VPSコントロールパネルでは、仮想サーバのリセットやリモート
コンソールでの接続、OSの再インストールを行っていただけます。

VPSコントロールパネルは、会員メニュー内リンクからご利用いただけます。

とか書いてあるんですが、会員メニューが重いのもあって VPS コントロールパネルにたどり着くのにちょいちょい時間がかかってしまいましたが、[会員メニュー]→[契約情報]→[無料サービスの確認]から開けます。契約したら有料サービスの確認に移るんでしょうけど。

VPS コンパネはさくらのデフォルトで激重です。普通の鯖のコンパネと違ってちょっと今風デザインになってますが、ぶっちゃけ微妙な感じす。まあコンパネなんでデザインとかどうでもいいすが。

サイドメニューからリモートコンソールを選ぶとシリアル接続でサーバにログインできますので、なんか設定に失敗して ssh とかで外部からログインできなくなったときはここから直せます。ほんでもダメなら最悪 OS の再インストールからやり直すことになります。

2. ログイン用ユーザーを作って ssh から root ログインできなくする

root ログインできるままですとクラッキングの良い対象になりますので、外からログインする用のユーザーを作ります。

# useradd -m USER
# passwd USER

実際にコマンド入力するときは、USER 部分をユーザー名にしてください。

ユーザーを追加したら、そのユーザーで外部から ssh でログインできるか確認します。ログインできたら root で外部からログインできなくします。/etc/ssh/sshd_config に以下の設定を加えます。

PermitRootLogin no

コメントアウトされた PermitRootLogin が元からありますのでその辺に追加します。追加したら sshd をリスタートします。

# cd /etc/init.d/sshd restart

リスタートした時点で root で ssh にログインすることはできなくなりますので、設定漏れとかパスワードちゃんと控えたかとか確認してからリスタートした方が無難です。

後から設定間違ってたとか気づいたら VPS コンパネから root でログインしてください。（コンパネは ssh じゃありませんので、ここまでした設定には影響されません。）

ちなみにログイン用ユーザー作っただけですとセキュリティ的にはちょっと弱いですので、もっとセキュアにしたい方は ssh のパスワード認証を無効にして秘密鍵認証のみ有効にした方が良いと思います。説明面倒くさいのでその辺については割愛しますが、興味ある人は ggrks です。

最後に sudo 経由で root としてコマンド実行できるようにします。まず /etc/sudores の以下の行がコメントアウトされていると思いますので、コメント（#）を外します。visudo コマンドは入ってないっぽいので直接 vi で編集です。

%wheel  ALL=(ALL)       ALL

んでから /etc/group を開いて wheel グループに追加したユーザーを足します。usermod コマンドとかでいじくってもいいですが面倒なのでこっちも vi で直接編集しますた。

wheel:x:10:root,USER

なお以下の説明では、通常ユーザーでの作業のプロンプトを $、root での作業を # で書いています。前後に su とか sudo 入れて書いてませんが、実際にコマンド実行する時は必要ですのであしからず。

3. パケットフィルタを設定する

不要な攻撃受けたく無いのでパケットフィルタを設定します。（今んとこ大したデータ置くつもりも無いのでそんなセキュアにするつもりないですが一応。）

まず root でログインして（ログイン用ユーザーでログインしてから root に su して）、iptables コマンドでパケットフィルタの状態を確認します。デフォルトだとこんな感じになってると思います。

# iptables -L
Chain INPUT (policy ACCEPT)
target     prot opt source               destination         

Chain FORWARD (policy ACCEPT)
target     prot opt source               destination         

Chain OUTPUT (policy ACCEPT)
target     prot opt source               destination

今回のサーバは Web サーバとしてしか使うつもり無いので、パケットフィルタで 22番 (ssh) と 80番 (http) 以外のポートは外からは閉じます。（ssl を使う場合は 443 番ポートも開ける必要があります。）

まず iptables 初期化用のスクリプトを作ります。

#!/bin/sh

iptables -F
iptables -X

iptables -P INPUT DROP
iptables -P OUTPUT ACCEPT
iptables -P FORWARD DROP

iptables -A INPUT -i lo -j ACCEPT
iptables -A OUTPUT -o lo -j ACCEPT

iptables -A INPUT -s 10.0.0.0/8 -j DROP
iptables -A INPUT -s 172.16.0.0/12 -j DROP
iptables -A INPUT -s 192.168.0.0/16 -j DROP

# iptables -A INPUT -p icmp --icmp-type echo-request -j ACCEPT

iptables -A INPUT -p tcp --dport 22 -j ACCEPT
iptables -A INPUT -p tcp --dport 80 -j ACCEPT

iptables -A INPUT -m state --state ESTABLISHED,RELATED -j ACCEPT

このスクリプトでは icmp パケットに応答しないように設定しています。ping 通したい人はコメントアウトしてるそれ用に設定してください。

スクリプトができたらおもむろに実行します。スクリプトとして実行しないと（上のスクリプトを全部直接コマンド入力した場合） iptables -P INPUT DROP を実行した時点でサーバへの入力がすべてパケットフィルタにひっかかっちゃってにっちもさっちもいかなくなりますのでご注意ください。

とりあえず上のスクリプトを iptables-init.sh として保存したということで話を進めます。スクリプトに続けて iptables -L を実行し、パケットフィルタの状態を確認します。

# sh iptables-init.sh
# iptables -L
Chain INPUT (policy DROP)
target     prot opt source               destination
ACCEPT     all  --  anywhere             anywhere
DROP       all  --  10.0.0.0/8           anywhere
DROP       all  --  172.16.0.0/12        anywhere
DROP       all  --  192.168.0.0/16       anywhere
ACCEPT     tcp  --  anywhere             anywhere            tcp dpt:ssh
ACCEPT     tcp  --  anywhere             anywhere            tcp dpt:http
ACCEPT     all  --  anywhere             anywhere            state RELATED,ESTABLISHED 

Chain FORWARD (policy DROP)
target     prot opt source               destination         

Chain OUTPUT (policy ACCEPT)
target     prot opt source               destination
ACCEPT     all  --  anywhere             anywhere

確認できたら、現在のフィルタがシステムリブート時に同じ設定で有効になるように iptables-save コマンドを使って /etc/sysconfig/iptables に保存します。

# iptables-save > /etc/sysconfig/iptables

保存したら、保存した内容でパケットフィルタが有効になるように iptables スクリプトをリスタートします。

# /etc/rc.d/init.d/iptables restart

最後に chkconfig でリブート時に iptables が起動するように設定します。（たぶんこの設定はデフォルトで有効になってると思うんですが、作業始める前にその辺確認するの忘れてたのでよく分かりません＞＜暇だったら自分で調べてね、とw）

# chkconfig --level 2345 iptables on

4. Apache2 をインスコする

まず yum で Apache がインスコ済みか確認します。

# yum list installed | httpd

何も表示されんと思います。表示されたらインスコ済みです。yum list でインストール可能なパッケージの一覧表示、yum list installed でインストール済みのパッケージ一覧表示です。

インスコされてない前提で話進めます。

# yum install httpd.x86_64

で、インスコされました。Apache を動かします。

# /etc/rc.d/init.d/httpd start

ブラウザから IP アドレス指定で VPS にアクセスすると Apache 2 Test Page が表示されると思います。

表示できるのを確認したら、リブート時に起動するように chkconfig します。

chkconfig --level 345 httpd on

5. Python-2.6 をインスコする

とりあえずポックンは Pythonistan なので Python 入れます。

元から Python は入っているのですが、バージョン 2.4.3 とか使い物にならんぐらい古い感じなので（だから Cent OS 嫌いやねん(*´・ω・)(・ω・｀*)ﾌﾞｰ） Python-2.6 をソースからビルドしてインスコします。（stable は 2.7 なんすが、テスト環境と合わんのでw）

まずソースを wget でダウンロードします。

$ wget 'http://www.python.org/ftp/python/2.6.5/Python-2.6.5.tgz'

てけとーにビルドします。特に問題無く終わると思います。

$ tar xvzf Python-2.6.5.tgz
$ ./configure
$ make
# make install

で、/usr/local/bin/python に 2.6 がインスコされます。あとで mod_python 入れる予定ですが今日はパスしますたw

6. PHP をインスコする

あった方が便利なので PHP もインスコします。yum からインスコしても良いのですが、バージョン古いので Python と同じくソースからインスコします。なお PHP はデフォルトでは入っていません。

ということでソースをダウンロードします。

$ wget 'http://www.php.net/distributions/php-5.2.14.tar.gz'

当然 Apache の SAPI として動かしますので、apxs が入ってるか先に調べます。

$ ls /usr/sbin/apxs*
ls: /usr/sbin/apxs*: No such file or directory

無さそうですので先に httpd-devel をインスコします。

# yum install httpd-devel.x86_64

ビルドします。

$ tar xvzf php-5.2.14.tar.gz
$ cd php-5.2.14
$ ./configure --with-apxs2=/usr/sbin/apxs
...
configure: error: xml2-config not found. Please check your libxml2 installation.

おおっとエラーだ。インド人を右に！！

とりあえず libxml2 が無いっぽいので、libxml2-devel.x86_64 をインスコします。

# yum install libxml2-devel.x86_64

再度 php の configure を実行します。

$ ./configure --with-apxs2=/usr/sbin/apxs
...
Thank you for using PHP.

おkのようですのでビルドしてからインスコします。

$ make
# make install

SAPI モジュールは /usr/lib64/httpd/modules/libphp5.so にインスコされます。/etc/httpd/conf/httpd.conf はインスコ時にかってに更新されますので Apache をリブートしたら有効になります。

# /etc/rc.d/init.d/httpd restart

なんか PHP のモジュールが色々足らん気もしますが、その辺は適当に足してください。

おしまい

disable_twitter_recommended_users.user.js

そんだけー

申し込みしてから30分ぐらいで仮登録完了メールが来ましたので、早速ログインしてみました。

SAKURA Internet [Virtual Private Server SERVICE]

# uname  -srmo
Linux 2.6.18-194.8.1.el5 x86_64 GNU/Linux

ということで i386/64Bit Linux (Cent OS) のようです。（キャプチャ取った方が良さげすが面倒なのでコピペでサーセン）

ちょうど作りたいものがあったので、できたらお知らせします。ほんでわ。

google_analytics_top_contents_and_title.user.js

インスコすると、サイドバーのタイトル別のコンテンツの下に Top contents + title というメニューが追加されます。

追加されたメニューをおもむろにクリックすると、「Google AnalyticsでURLとページタイトルを同時に表示させる方法」で表示します。

おしまい

プロが教える Google Analytics 実践テクニック 大角 誠之,阿部 圭司 ソーテック社 売り上げランキング : 1086 おすすめ平均 : Amazonで詳しく見る by AZlink

• ヤフーとグーグルが提携、アルゴリズム検索技術にGoogleを採用::SEM R
• ヤフー株式会社がGoogleとの提携を正式発表【湯川】 : TechWave

グーグルからのアクセスなんか
ほとんどねーんじゃボケェ！！！

ということで
Amazon アソシエイトリンク作る人は AZlink
SEO する人は SEOチェキ！
ここテスト出るから覚えとくように！！！

とりあえずソースとかは http://sakuratan.biz/jquery/zencoding/ に置いてます。オリジナルの Zen Coding と同じで MIT ライセンスです。

使い方

var obj = $.zenCoding('div#page>div.logo+ul#navigation>li*5>a');

で、Zen Coding を展開した jQuery オブジェクトを返します。上の例ですと、

<div id="page">
  <div class="logo"></div>
  <ul id="navigation">
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
  </ul>
</div>

の構造を持った jQuery オブジェクトが返ってきます。jQuery オブジェクトってのは $(‘#id’) とか呼び出した時に返ってくるやつのことす。$.zenCoding の戻り値を他の jQuery オブジェクトにそのまま引っ付けることができるって意味す。

var obj = $.zenCoding('div#page>div.logo+ul#navigation>li*5>a');
$('#replace').append(obj);

$('#replace').zenCoding('div#page>div.logo+ul#navigation>li*5>a');

alert($.zenCoding('div#page>div.logo+ul#navigation>li*5>a',
      { resultType: 'text' }));

ほかの例

もう少しややこしい感じのですと、ツイッターのタイムラインに埋め込むツイート部分を Zen Coding で書くとこんな感じになります。面倒くさくなってきたので ul の中身省略してます、サーセンw

$.zenCoding('li.status>(span.thumb.vcard.author>a.tweet-url>img)+(span.status-body>(span.status-content>(strong+span.entry-content))+span.meta.entry-meta>(a.entry-data+span))+ul.actions-hover+ul.meta-data.clearfix');

で、できあがるのはこんな感じの HTML。

<li class="status">
  <span class="thumb vcard author">
    <a class="tweet-url"><img src="" alt=""></a>
  </span>
  <span class="status-body">
    <span class="status-content">
      <strong></strong>
      <span class="entry-content"></span>
    </span>
    <span class="meta entry-meta">
      <a class="entry-data"></a>
      <span></span>
    </span>
  </span>
  <ul class="actions-hover"></ul>
  <ul class="meta-data clearfix"></ul>
</li>

元の Zen Coding が長ったらしいんでかえってややこしい気がしますwww
という感じですので、もうちょい小分けに使った方がよろしいんでは無いでしょうか。

Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL) 西畑 一馬 アスキー・メディアワークス 売り上げランキング : 69729 おすすめ平均 : Amazonで詳しく見る by AZlink

アクションサイト「IZANAGI」 （Flash は音でます）

タイトルがアクションサイト「IZANAGI」だったりクズTVだったりリーマンドリームだったりする辺はオリジナルコンテンツに忠実ですw

制作にあたり効果音源様とMusMus様のフリー音源素材を利用させていただきました。画像は wikipedia と wikimedia から問題無さそうなやつを利用しています。どもありがとうございます。

てゆうか、クズTVの番組表によるとコンテンツをさらに23個作る予定みたいなんだけど。
ﾏﾀﾞｧ-? （･∀･ ）っ/凵⌒☆ﾁﾝﾁﾝ

YAGI 地上デジタルアンテナ ブラック UWPA(B) 八木アンテナ 売り上げランキング : 259 おすすめ平均 : Amazonで詳しく見る by AZlink