クラウド/SaaS

2016年12月27日 (火)

UDP双方向通信を実装しやすくなったソラコムBeam

エンジニアの佐藤です。こんにちは。

今回は12月22日にソラコムBeamに追加された機能「SORACOM Beam のUDP、TCP エントリポイントでステータスコードを返さないオプション」についてです。

ソラコムBeamはSIMからUDP(HTTPやTCP、MQTTもある)で発信したデータをHTTPSリクエストに変換してくれるサービスです。(前回投稿「ソラコムBeamでUDP通信機器の暗号化を実装」を参照)

たいへん便利なサービスなのですが、今回のリリースによりさらに便利になったと思います。

今回の機能追加ではソラコムBeamの設定で「ステータスコードを省略」の設定ができるようになりましたが、さらにBeamから来たHTTPリクエストのレスポンスでHTTPヘッダに「Content-Type: application/octet-stream」を指定することにより、レスポンスBODYをSIM側へUDPでそのまま返信することができます。

この機能がなぜ重要なのか。筆者の知っているIoTデバイスは、いずれもUDPリモートコントロール機能を備えています。IoTデバイスは遠方に配置されるケースが多く、サーバーからUDPパケットを送信してデバイスの設定変更などを行う機能は、広範囲に実装されている定番機能なのです。そしてたいていの場合、そのパケットフォーマットはバイナリー形式で定義されています。

この類のデバイスをクラウドサービスにインテグレーションする場合は、通常SIM側のIPアドレスを固定し、回線全体をインターネットから隔離する「閉域ネットワーク」を用いることが考えられます。(そして事前登録されたIPアドレスに向かってサーバーからUDPパケットを投げる。)しかしながらこの方式の場合は回線費用が高く、相当の収益が見込めないと設置できないのが実情ではないでしょうか。

ソラコムBeamを使うと、小規模案件を安価に実装できます。IoTデバイスはサーバーへデータ送信する場合がほとんどでしょう。(そしてソラコムBeamを設定するとこのデータ送信はHTTPSリクエストに変換される。)サーバーはこのHTTPSリクエストに対し、Content-Typeをapplication/octet-streamに設定して今度は「デバイスを設定するUDPパケット」をHTTPレスポンスBODYに貼り付けて返信します。すると今度はbeam.soracom.io(のIPアドレスプールのどれか)からデバイスに向かってUDPパケットが送信され、デバイス設定が実行されます。

デバイスとソラコムBeamの間は秘密回線ですので、第三者がデータを見ることはできません。閉域ネットワークは不要。わずかなソラコムBeam料金とWebサーバーで、UDP双方向通信を実現できます。

ソラコムサンタよ、ありがとう。

Cloudblog20161227_01_2 図. ソラコムBeamからのHTTPリクエストに対して、デバイスに送信するバイナリデータ(青網掛け部分)を返信する。

2015年5月28日 (木)

MESHとIFTTTを組み合わせて30分お手軽IoTクッキング

こんにちは。IoTチームエンジニアの小川(mitsuruog)です。フレクトには5月からお世話になってます。

先日、出社するとこんなものが・・・

Img_20150520_123417

そう、SONYが開発した電子ブロック「MESH」です。

MESHには加速度、スイッチ、LED、GPIOの4種のセンサーモジュールと、iPad上でこれらのモジュールを簡単に接続できるアプリのがセットになっています。
MESHのモジュールとアプリはBluetoothで相互接続されます。

今まで、IoTのプロトタイプを作成する際は、いちいちデバイスを準備したり、回路を設計したりする手間がありましたが、MESHをレゴブロックのように組み合わせることで、簡単なIoTのプロトタイプを作成することができます。

こ、これは!素晴らしい未来が待っているかもしれません!!

動かしてみる

早速ですが、MESHの加速度センサーモジュールを入り口のドアノブに取り付けて、ドアが開いた瞬間に少し離れたところにあるiPadにて入ってきた人を撮影できるか試してみした。

Img_20150520_122516

MESHセンサーはドアノブに対して少し斜めに取り付けるのがミソです。

Img_20150520_123030

撮影はドアから2mほど離れた場所で行いました。

MESHのアプリキャンバスはこちらです。

May_20_2015_at_0131pm


非常にシンプルですね。

では、実験開始。

ガチャ(ドアが開く音)



(しばしの沈黙)



カシャ(シャッター音)

現状、MESHからデバイスのカメラを起動させて、写真を撮るまでは少しタイムラグがあるようです。
(ということで・・・社員の方には、ドアの前で少し待機するように指示)

May_20_2015_at_1225pm

タイミング調整はこれでばっちりです。

繋げてみる

MESHにて来訪者を撮影することができましたので、これをクラウドサービスに連携してみましょう。
ここはIFTTTを利用します。IFTTTはデバイスやクラウドサービス同士を簡単に連携することができるWebサービスです。

ここでは、シンプルにiPad上に新しい写真が撮られたら、SalesforceのChatter上にある、特定のグループに誰かが入ってきたことをFeed投稿します。

全体的なシステム構成は次の通りです。

System001

完成!!

では、実際にChatterのFeed投稿されるか試してみます。

Mesh


無事、ChatterにFeed投稿されました!
(実際には、IFTTTの連携にタイムラグがあるので、リアルタイムではないです。)

まとめ

最近、MESHなど簡単にプロトタイプできるデバイスが登場してきたことで、フィジカル(物理)とデジタルを繋ぐ敷居が下がってきたように感じます。

アイデア出しからプロトタイプ作成まで、正味30分。
昼休みの時間にこれだけの遊べるものができるのは嬉しいです。

MESHはまだまだできることが少ないのが現状ですが、将来のロードマップを見ると、WebAPIや他のデバイスとの連携についも視野に入れているようです。
WebAPIと連携するようになると、かなりできることが増えそうで楽しみです。

フレクトではIoTのプロトタイプやなどやってますのでお気軽にお問い合わせください。
ではではー。

続きを読む "MESHとIFTTTを組み合わせて30分お手軽IoTクッキング" »

2015年4月14日 (火)

Microsoft Surface 2でクラウド開発

こんにちは。エンジニアの佐藤です。 新しいオフィスになって気を良くしているのですが、ところで筆者はMS Surface 2 を使っています。Surface Proではありません。少し趣味的ではありますが、今回はこの話題をお届けしたいと思います。

Surface 2、この恐ろしく制約に満ちた環境

ご存知のとおり、このモデルは、既に製造中止になった「終わった」商品です。Surface 2のOSはWindows RTですから、Windows 8.1の標準機能とOffice 2013、それにわずかな「Windowsストアアプリ」しか使えません。EclipseやIntellij IDEAのようなIDEはおろか、GitもSubversionもNodeもPHPもありません。

突破口は1時間約1円のクラウドインスタンス

ですが、私は移動時間中にはSurface 2でソフト開発をやっていますし、一日これしか使わない日もあります。 突破口は、クラウドインスタンスです。筆者が使っているのはGoogle Compute Engine (GCE)の「f1-micro」Ubuntuインスタンスで、利用料金は1時間あたり0.009USドルから0.012USドル(使用量によって変わります)。1か月上げっ放しでも千円ぐらいです。このインスタンスを、「SSH+SFTP+WebDAV+Web」サーバーとして設定します。 (後述の「WindowsエクスプローラをWebDAVにつなぐ」参照) GitやSubversionなどが必要な場合は、これらもインストールします。(こちらについてはネット上に手順が豊富に紹介されていますので、割愛します。) こうすることで、ファイル管理ツール(Windowsエクスプローラ)とバージョン管理ツール(Git/Subversion)、ブラウザ(IE11)とMS Officeが使えるようになりました。あと少しです。

貴重な2つのWindowsストア無料アプリ

次はWindowsストアで以下のアプリをインストールします。いずれも無料です。
ソースコードエディタ:Actipro Software社 「Code Writer」
SSHクライアント:Stefan Podskubka氏「Remote Terminal」
Windowsストアアプリは残念ながら未だに充実とは言いがたい状態ですが、この2つは実用的だと思いました。欲を言えば、日本語入力に対応してほしいですが、現バージョンでも日本語の表示・貼り付けはできます。

Pic01

<図1:Code WriteとRemote Terminalの画面例>

ついに本格的作業環境へ

これで、一通りの作業ができるようになりました。SSHクライアントでUbuntuインスタンスにログインし、PHPとMySQLをインストールしてLAMP開発を開始できます。 よくあるパターンでは、PowerPointの提案書を見て実装要件を確認し、エディタでコード記述。ブラウザで動作確認してOKだったらGitレポジトリにコミット、といった手順です。 ポイントは、画面を縦にすることです。縦にすると、スクリーンキーボードを表示してもアプリケーションの表示スペースが十分に取れます。ソースコードの見通しも良くなりますし、スクリーンキーボードが片手で打ちやすいサイズになります。

Salesforce開発は「Force.com CLI」を使用

通常のWeb開発はこれでなんとかなりますが、Salesforce開発を行う場合は、Ubuntuインスタンス側に追加でForce.com CLIをインストールします。 Force.com CLI はGitHubで「heroku/force」として公開されています。こちらは日本語情報が不足しているので少し解説したいと思います。 最初はUbuntuインスタンスにSSHでログインします。次にSalesforce環境にログインしますが、このときコマンドラインオプションでユーザー名とパスワードを指定します。
$ force login -u username@organization.com -p pa_ssword
ログインしたら、以下のコマンドでメタデータ(ApexクラスやVisualforceページなど)一式をダウンロードします。
$ force export
あとはテキストエディタでコード記述などを行い、以下のコマンドでSalesforceにアップロードします。
Apexクラスをアップロードする場合:
$ force push -n SomeClassName -t ApexClass
Visualforceページをアップロードする場合:
$ force push -n SomeVisualforcePage -t ApexPage
テスト実行は以下のコマンドです。
$ force test SomeTestClass
Salesforceには標準機能としてApexやVisualforceコードの記述をWebブラウザ上で行う機能があります。しかしソースコードをGitやSubversionのレポジトリなどで管理したい場合が多いですし、ソースコードエディタの操作性は、やはりネイティブアプリの方が優れています。

キーボード・マウスが使える場合は「CodeAnywhere」を利用

とは言っても、机がある環境ではキーボードとマウスを使った方が効率が高いのも事実です。前述「Code Writer」はタブレット向けUIのため、よくやる「広いディスプレイの左右のウィンドウに2ファイル同時表示」ができません。かと言って、Surface 2に「デスクトップ版」エディタの類はありません。 この問題を解決するのが、ブラウザ版IDEの「CodeAnywhere」です。(他にもいろいろありますが、筆者はこれが気に入っています。) サインインして、先ほどのUbuntuインスタンスにSFTPで接続するように設定します。

Codeanywheresettings

<図2:CodeAnywhere接続例>
IDEの操作性は十分実用に耐えるもので、先ほどの「広いディスプレイの左右のウィンドウに2ファイル同時表示」も、もちろん可能です。日本語入力もできます。SFTPで1サーバー接続するだけなら、無料です。 CodeAnywhereは米国にホストがありますので、Ubuntuインスタンスも米国リージョンのものを選んだ方が操作は快適です。

Codeanywhere

<図3:CodeAnywhere縦スプリット画面例>

WindowsエクスプローラをApache WebDAVにつなぐ場合の特別設定

ApacheをWebDAVとして設定する方法はネット上に豊富に紹介されていますので割愛したいと思いますが、筆者が引っかかったのは以下の設定です。
BrowserMatch "^Microsoft-WebDAV-MiniRedir/" redirect-carefully
この設定はWindowsエクスプローラをApacheのWebDAVに接続するための特別設定です。 Apacheの設定ファイル(部分)は以下のようになりました。

ServerName server03
ServerAdmin webmaster@localhost
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined

<IfModule mod_ssl.c>
    <VirtualHost _default_:4443>
        DocumentRoot /webdav

        SSLEngine on
        SSLCertificateFile  /home/sato/CA/server03_crt.pem
        SSLCertificateKeyFile   /home/sato/CA/server03_key.pem

        AddDefaultCharset utf-8

        BrowserMatch "MSIE [2-6]" \
                nokeepalive ssl-unclean-shutdown \
                downgrade-1.0 force-response-1.0
        BrowserMatch "MSIE [17-9]" ssl-unclean-shutdown
        BrowserMatch "^Microsoft-WebDAV-MiniRedir/" redirect-carefully
        DAVLockDB      /home/sato/DAVLock

        <Location />
            SSLRequireSSL
            Options Indexes MultiViews FollowSymLinks
            AllowOverride None
            DAV On
            AuthType Basic
            AuthName "sato's WebDAV"
            AuthUserFile /home/sato/passwd.dav
            Require valid-user
        </Location>
    </VirtualHost>
</IfModule>

後はこのWebDAVにネットワークドライブとして接続します。

Explorerdav01

Explorerdav02

筆者が低スペックタブレットにこだわる理由

筆者がここまでタブレットにこだわるのは、第一に通勤時間を有効活用したいからです。 首都圏で勤務する筆者にとって、往復2時間を超える通勤時間の過ごし方は重要な問題です。この間はまず座れないのでノートパソコンは使えませんし、スマホの画面サイズでは辛いものがあります。 もう一つは、経済的合理性です。 クラウドコンピューティングの発達により、手元にハイスペックの環境を用意する必要性は減少しています。リソースはなるべくクラウドで利用し、手元のコンピュータは軽く薄くした方が、荷物も軽くなりますし、出費や生活空間の圧迫が小さく済みます。 今回ご紹介した手法はOSを問わず適用できます。テキストエディタとWebDAVクライアント、ファイルマネージャ、SSHクライアントがあれば、AndroidでもiOSでも容易に適用可能でしょう。

続きを読む "Microsoft Surface 2でクラウド開発" »

2014年12月30日 (火)

DockerでLinux仮想デスクトップサーバをつくる話

こんにちは。エンジニアの佐藤です。2014年も残すところわずかとなりましたが、今回は再びDockerの話題を取り上げさせていただきたいと思います。(前回のDockerでLAMPサーバをつくる話も合わせてご覧ください。)今回ご紹介したいのは、DockerでLinux仮想デスクトップサーバーを作成する方法です。

仮想デスクトップとは

ものすごく簡単に言うと、ネットワーク経由でデスクトップ画面を配信する機能です。Windowsでは「ターミナルサービス」や「リモートデスクトップサービス」などと呼ばれています。サーバ上で仮想デスクトップサーバなるサービスを実行して接続を待ちます。クライアントはビューワーアプリで接続してデスクトップを表示し、リモートコンピュータを操作します。

何の役に立つの?

仮想デスクトップの主な用途は 1)データセンターに格納されたサーバマシンを遠隔で管理する。2)一台のアプリケーションサーバを安価なシンクライアント経由で共有する。の2つです。

なぜDockerで仮想デスクトップ?

他の環境への引っ越しが非常に楽になります。つまり手元のパソコンで調整した開発環境をわずかなコマンド実行で隣のコンピュータに移すことができます。仮想デスクトップですので、物理的な画面を持たないクラウドインスタンスなどへも全く同じ手順で引っ越すことが可能です。例えばAWS EC2の開発環境をGoogle Compute Engineへ乗せ換える、というようなことが可能になります。Dockerなしでは、こういうことは難しいと思います。

仮想デスクトップサーバ「コンテナ」の作成

それでは実際の手順ですが、以下のような手順で実行可能です。

  1. Dockerのインストール
  2. Dockerのストレージを「devicemapper」に設定
  3. Ubuntuの最新イメージをDocker hubからpull
  4. /bin/bashでスタート
  5. Linuxデスクトップのセットアップ
  6. 仮想デスクトップのセットアップ
  7. 起動スクリプトを書く
  8. イメージを保存して、docker run
  9. クライアントからの接続

前回のDockerでLAMPサーバをつくる話と基本的には同様です。ただしいくつか注意する点があります。

1. Dockerのインストール

今どきのLinuxディストリビューションでは、コマンド一発です。

# apt-get install docker.io

2. Dockerのストレージを「devicemapper」に設定

いきなり「?」な内容ですが、この手順を実行しないまま既定のAUFSでDockerを実行すると一部のコマンド実行が失敗してしまいます。(この点については後述します。)

# vi /etc/default/docker
(以下の行を設定)
DOCKER_OPTS="-s=\"devicemapper\""
# service docker restart

3. Ubuntuの最新イメージをDocker hubからpull

これはコマンド一発です。

# docker pull ubuntu:latest

4. /bin/bashでスタート

次に「bash」コマンドを指定してコンテナをスタートします。この時「-i -t」オプションを指定し、コンテナ内で起動したbashの標準入力と標準出力を、今まさにdockerコマンドを打っているターミナルに接続します。

# docker images | grep ubuntu  <-- UbuntuのイメージIDを確認
ubuntu              latest              5506de2b643b        9 weeks ago         197.8 MB
# docker run -i -t 5506 /bin/bash <-- bashを指定してコンテナを起動。イメージIDは前方一致で指定できる。
bash-4.1# whoami <-- コンテナ内のbashのプロンプト
root

5. Linuxデスクトップのセットアップ

ここが結構難所でした。今どきのデスクトップ(Gnomeなど)はUX改善のためGPUを活用していることが多く、これがDockerとぶつかります。また、仮想デスクトップはネットワーク経由でデスクトップ画像を送信するので、派手なUXでは転送容量が膨張して足かせです。そこで数あるLinuxデスクトップの中から、LXDEを選びます。日本語入力にはGoogle日本語入力のLinux版であるMozcを選びました。

# apt-get install openssh-server lxde mozc-server uim uim-mozc fonts-takao
# locale-gen en_US.UTF.8

このインストールは800MBほどのダウンロードになるので結構時間がかかります。 注意する必要があるのが、2行目のコマンドでロケールを作成するところです。このコマンドを実行しないと、ターミナル上で日本語表示ができなくなります。

6. 仮想デスクトップのセットアップ

Linuxの仮想デスクトップソフトはいろいろありますが、筆者がおすすめなのはTigerVNCです。Fedoraにも収録されており、MacOS X、Windows、Linuxに対応しています。ここでは現時点の最新版1.4.0のLinux版をダウンロードします。ダウンロードしたらアーカイブを展開し、ファイルをコピーしてインストールします。

# tar xzf tigervnc-Linux-x86_64-1.4.0.tar.gz
# cp -rf usr/bin /usr
# cp -rf usr/lib64 /usr
# cp -rf usr/share /share

次に仮想デスクトップをスタートするときのスクリプトを作成し、これにLXDEデスクトップを起動するコマンドを追加します。

# adduser hoge <= 実際にデスクトップにログインするユーザを作成
(中略)
# su hoge
$ vncserver <= 既定の起動スクリプト作成のため一回起動
(パスワードを求められるので適当に設定)
$ vncserver -kill :1 <= 起動スクリプトが生成するので、一旦終了
$ vi ~/.vnc/xstartup
(以下のようにxstartupファイルを修正)
# xterm -geometry 80x24+10+10 -ls -title "$VNCDESKTOP Desktop" & <= コメントアウト
# twm & <= コメントアウト
startlxde & <= 追加

7. 起動スクリプトを書く

コンテナが起動した時に仮想デスクトップサーバが起動するように、以下のように作成します。(起動スクリプトについては前回のDockerでLAMPサーバをつくる話5. 最後に起動スクリプトを書く も合わせてご覧ください。)

# vi /root/start.sh
#! /bin/bash
export LC_ALL=en_US.UTF-8
export LANG=en_US.UTF-8
export LANGUAGE=en_US.UTF-8

service rsyslog start
service ssh     start
sudo -u hoge -H vncserver

term() {
    sudo -u hoge -H vncserver -kill :1
    service ssh     stop
    service rsyslog stop
}

trap "term; exit" SIGHUP SIGINT SIGTERM

while true; do
    sleep 1
done

8. イメージを保存して、docker run

セットアップ作業が終わったコンテナを終了し、イメージを作成します。

# exit  <-- コンテナを終了
exit
# docker ps -l <-- コンテナのIDを確認
CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS                     PORTS               NAMES 
ad8596fad31e        ubuntu:latest      "/bin/bash"         51 minutes ago      Exited (1) 3 seconds ago
# docker commit ad85 vncserver01 <-- イメージを作成

いよいよ起動ですが、ここで2点注意することがあります。

  1. 「--privilege=true」オプションを指定する。(このオプションを設定しないと、日本語入力のMozcが動きません。) ※1
  2. 仮想デスクトップ接続用ポート5901番をホストに接続する。

実際のコマンドは以下のようになります。

# docker run --privileged=true -p 5901:5901 vncserver01 /root/start.sh

すべてがうまく行けば、これでサーバは仮想デスクトップの接続待機となったはずです。

9. クライアントからの接続

ここでではWindows 8.1マシンから接続してみます。 先ほどのTigerVNCのダウンロードサイトから、今度はWindows版をダウンロードします。ダウンロードした実行ファイルを実行するとインストーラが開始されます(ここではTigerVNCをサービスとして登録するオプションは設定しません。) インストーラが終了したら、「TigerVNC Viewer」を起動します。 接続先を問われるので、ホスト名:ポート番号形式で指定し、Connectをクリックします。パスワードを聞かれますので入力すると、LXDEデスクトップが表示されるはずです。 ここまで来れば、あとはほとんど通常のLinuxデスクトップと同様に使えます。

未解決の問題

「ほとんど通常のLinuxデスクトップと同様に使えます」とは言ったものの、実は問題点もあります。筆者が直面した問題をいくつか上げておきたいと思います。

Google Chromeが起動後しばらくするとクラッシュ(回避方法あり ※2)

これが一番困っている問題です。巷のサイトにはChromeの起動オプション「--no-sandbox」を設定する方法が紹介されていますが、このオプションを設定しても回避できません。 (なお、Firefoxは問題なく実行できます。)

tcpdumpが実行できない(回避方法あり)

tcpdumpとは、コマンドで実行できるパケットキャプチャツールです。便利なのですが、Dockerのストレージが既定の「aufs」のままだと起動できません。ストレージに「devicemapper」を指定することで回避できます。

コンテナ内の/etc/hostsが変更できない(回避方法あり)

これはDockerの制約です。(最新のDockerでは回避されているかもしれません。)回避方法は少々複雑です。

  1. Dockerを実行するLinux(Dockerホスト)にdnsmasqをインストールして起動
  2. docker runで仮想デスクトップサーバのコンテナを実行するとき、オプション「--dns="172.17.42.1"」を追加する。
  3. コンテナ内の/etc/hostsに名前を追加する代わりに、Dockerホストの/etc/hostsを修正してdnsmasqを再起動

まとめ

一般的にDockerは、サービスの実装インフラ技術として取り上げられることがほとんどだと思いますが、今回ご紹介したようにデスクトップ環境を実装することも可能です。 こんなことをして何の役に立つのか?と思われる方も多いと思いますが、この技術を使うと、ソフト開発作業などのいわゆる「パソコン仕事」をほとんどすべてクラウドに収容することができます。Dockerですので、手元のパソコンからクラウドインスタンスへの移行は相当に省力化されます。 筆者の勝手な見解かもしれませんが、もはや手元にハイパフォーマンスのコンピュータを用意する時代は、終わったような気がします。

2016-06追記

※1: 2016-06現在は、Mozcの実行に--privilege=trueは不要になっています。 ※2: docker runの時にオプション「-v /dev/shm:/dev/shm」を付けると回避できます。元ネタはこちら

2012年1月22日 (日)

Panda Streamを使ってWEBサイトに動画アップロード&エンコード&再生機能を作る

こんにちは、大橋です。
ひさしぶりの記事投稿になります。

今日はPanda Streamという動画アップロード、エンコード(変換)および再生機能を自分のサイトに組み込めるサービスを使ってみたので記事にしてみます。Panda Streamの公式サイトは以下です、あわせて見てみてください。

http://www.pandastream.com/


<Panda Stream概要&特徴>

Panda Streamを使うと、Youtubeみたいに動画ファイルをブラウザからアップロードして、アップロードしたファイルをブラウザ上で再生できる機能を簡単に既存Webサイトに組み込むことができます。特徴は以下です。

  1. すべての機能がREST API形式で提供されていて、Ruby, Python, PHPなどAPIを簡単にコールするライブラリも用意されている
  2. ブラウザからのアップロードはpandaのサーバ側に直接送信されるので、自前のサーバで動画アップ用にインフラ/ミドルなど構築をしなくてよい
  3. データのストア先はAmazon S3を使うので、ストレージを自前で用意する必要なし
  4. アップロード、再生するときのJavaScript, HTML,などサンプルが一通り用意されている。
  5. 多様なInputフォーマットからFLV, MP4(H.264), WebMなど主要な再生環境向けへの変化に対応。

名前はなんだかかわいいですが、できることはけっこうすごいですね。なにかと難しい、動画アップ、変換、が簡単にできちゃいます。HerokuのAdd-onにもなっているので、Herokuを使うときにも便利(←一部の人だけの恩恵かもですが・・・)。

<動画機能を利用するための流れ>

早速使っている前に、大まかな手順を確認しましょう。Panda Streamを使ってWebサイトに動画アップロード&再生機能を埋め込む手順は以下のようになります。

  1. Amazon Web Services(AWS)にサインアップしてAmazon S3を利用できるようにしておきます。
  2. PandaにSign Upします。
  3. CloudというS3のバケットに1対1で対応したエンコーディングした動画を管理するグループを作成。
  4. Panda StreamのAPI Access用のキーとCloud IDを取得。
  5. ここから本番。実際にWebサイトに組み込むためのプログラミングをします。


<実際にWebサイトに組み込むための前準備>

手順(1)〜(4)のCloud作成までは簡単なのでさらっと説明します。

まず、Amazon S3を用意しましょう。AWSのアカウントがなければ以下から申し込んで、Amazon S3を使えるようにしましょう。アップロードした動画やエンコード後の動画、および動画から抽出されたサムネイル画像はAmazon S3上に保存されます。

http://aws.amazon.com/jp/

次にPanda Streamのサイトへいってサインアップしましょう。

http://www.pandastream.com/

サインアップしたら、Home画面のメニューに「API Access」という項目があるので、そのリンクをたどると以下のような画面になります。

Pandaapikey

ここで、
 ・Access Key
 ・Secret Key
 ・API URL(api.pandastream.com)

があることを確認しましょう。これはPanda StreamのAPIを使うときに必要になります。

次にメニューの「Clouds」というメニューがありますのでここをたどり、「Create new cloud」をクリックし、Cloudを作成します。Cloudの名前とパーミッションおよびS3のバケット、Access Key、Secret Keyを設定します。すると、以下の画面のようにCloudが作成されるので、作成後に左上に表示されているIDがCloud IDというもので、この後、APIアクセスで使うので控えておきましょう。

Cloud_id

いろいろサインアップするものがあって大変ですが、これで準備完了です。


<WEBサイトに動画アップロード機能を埋め込む>

Panda Streamのサイトにサンプルコードがアップされているので、それを見たり、動かしたりするのが入門にはちょうどよいです。

http://www.pandastream.com/docs/sample_apps

ここでは、その中のエッセンスだけ抜き出して、アップロードから再生までどんなコードを書けばよいか解説していきます。

まず、アップロード画面のHTML/JavaScript側を準備します。
HTMLは以下のように記述します。actionの遷移先は適当に変えてください。
最初のhiddenはこのあと説明するJavaScriptによりアップロードに成功後に動画のIDが埋め込まれ、次の画面に遷移するときのパラメータになります。

 

   

   

 

JavaScriptはPandaが提供しているJavaScriptライブラリ、jquery.panda-uploaderを使います。jQuery本体を先に読み込んで、Pandaのアップローダーライブラリを読み込みます。

  
  

  


アップローダーの読み込み後、前準備で取得したPanda Stream用のaccess_key、cloud_idなどともにsignatureを書く必要があります。これはサーバサイドで値を作成します。サーバサイド用にはいろいろな言語用にクライアントライブラリがあるので、言語ごとのPandaライブラリを使うことで、signatureを取得できます。ライブラリは以下にあります。

http://www.pandastream.com/docs/client_libs

Ruby, PHP, Pythonなどのライブラリがあります。環境が整っていてよいですが、Java版やPerl版がなかったりもします。
たとえば、Pythonならば以下のような処理でJSON形式でsignatureなど取得できますので、JavaScriptに埋めてください。

panda = Panda(
    api_host='api.pandastream.com',
    cloud_id='Cloud ID',
    access_key='Panda API用のAccess Key',
    secret_key='Panda API用のSecret Key',
    )
python_access_details = panda.signed_params('POST', '/videos.json')
# 以下のようなJSONが取得できます。
#{'access_key': 'xxxxxxxxxxxxxxx', 'timestamp': '2012-01-19T15:01:43.268760+00:00', 'cloud_id': 'xxxxxxxxxxxxxxxxxxxx', 'signature': 'U8OOrnBlYekV3FjyyAIZj1H0kVZlAATn8O/uI07mEMI='}

ここまでのHTML, JavaScript, サーバサイドの処理を組み合わせて、アップロード処理が作れます。説明したパーツを組み合わせると以下のようにプログレスバーが出てくる動画アップロード機能が作れます。

Upload_progress

 アップロードが終わるとコンテンツはS3に登録され、Panda Streamのサーバ側でエンコーディング処理が始まります。同時に、HTMLにhiddenでpanda_video_idとしたところに、動画再生のためのIDがセットされ、フォームのアクション先にpanda_video_idがパラメータとなり画面遷移します。

アップロードされた動画はPanda Streamの画面でも以下のように作成したCloudのDashboardでエンコード中の動画が確認できます。

Dashboard


<WEBサイトで動画を再生する>

さて、アップロードされた動画はエンコードに多少時間がかかります。エンコードのフォーマットはPandaに作成したCloudごとにプロファイルを作成できます。デフォルトはmp4/h.264です。PandaのAPIを使ってエンコードの進捗が何パーセントかも取得できますが、それについては今日は省きます。

動画のエンコードが終わったら、PandaStreamのDashboard上でも再生できますが、アップロード時に取得できたpanda_video_idをパラメータにencodings APIを呼び出し、エンコードされたS3上のファイルパスを取得します。エンコーディングのプロファイルごとにファイルパスや拡張子、スクリーンショットのパスが取得できます。Pythonだと以下のようなコードで取得できます。

    # panda_video_idはアップロード時に取得したID。pandaはPandaクラスのインスタンス
    panda_encodings = json.loads(panda.get("/videos/%s/encodings.json" % panda_video_id))

    encoding = None
 
 # エンコーディングのプロファイルごとに取得できる
    for panda_encoding in panda_encodings:
        if panda_encoding['extname'] == '.mp4' and panda_encoding['status'] == 'success':
            encoding = {
                'id'     : panda_encoding['id'],
                'width'  : panda_encoding['width'],
                'height' : panda_encoding['height'],
                # 以下のようにすると動画のURLやスクリーンショットのjpegのURLが取得できる
                'url'    : "http://%s.s3.amazonaws.com/%s%s" % (’S3のバケット名', panda_encoding['id'], panda_encoding['extname']),
                'screenshot_url' : "http://%s.s3.amazonaws.com/%s_4.jpg" % ('S3のバケット名', panda_encoding['id']),
            }

取得したurlやscreenshot_urlをHTML上で以下のように埋め込みます。ここではHTML5で再生する例を示します。

サーバ側で取得したスクリーンショットのURLや動画ファイルのURLをそれぞれ埋め込めば再生できると思います。もちろん、エンコードが終わってからですが。

かんたんな使い方は以上になります。Panda StreamのDocumentにいろいろな情報があるので、ここから先はそちらを見るようお願いします。


<気になる価格体系>

そういえば、価格について触れないといけないですね。以下のページに記載がありますが、同時に処理できるエンコーダの数により価格が決まります。

http://www.pandastream.com/pricing_and_signup

フリー版はエンコーダは他の人とシェア、ファイルサイズの上限が10MBです。有料版は1つの専用のエンコーダ(dedicated encoder)あたり月間99ドルです。たとえば、3つのエンコーダならば397ドルです。エンコーダの数は同時にエンコードできる動画の数と考えてください。実際には占有できるCPU coreのようです。あと有料版はファイルサイズの上限が5GBのファイルの動画までエンコードできます。


<PaaS上でのプログラミング>

今回はPanda Streamという動画アップロード、エンコード、再生を実現するためのサービスの紹介をしましたが、こういった特定の機能を提供するサービスは動画のエンコードだけでもZencoder(http://zencoder.com/ )など他のサービスがあります。他にも画像変換、メール、PDF生成など、スクラッチで作ると手がかかる機能の実現が最近は外部サービスを使うことで可能になってきているようですね。

Heroku、DotCloudなどのPaaSにより、簡単にアプリケーションをクラウド上にデプロイできるようになりましたが、動画処理やサムネイル生成など特別な機能の実現をしようというときにこれまでと同じやり方ではできないものもあり、少し頭を悩ます部分です。

そういった問題への解決策がPanda Streamのようにアプリケーションの特定の機能を提供するサービス群なのかな、と思います。

クラウド環境でのプログラミングは主にWEB、アプリケーションサーバ用のCPU/DBを提供するHerokuなどのPaaSとその周辺を補強するサービス群を使いこなすことがポイントになるんだろうと思い始めています。

PaaSを使ったアプリケーション構築スタイルをこれから追求しないといけない分野ですね。


<まとめ>

Panda Streamという動画アップロード、エンコード、再生機能を簡単にWebサイトに組み込めます。

こういったサービスは他にもたくさんあるので、今後もたくさん試してみてこのブログ上で共有していきたいと思います。

採用情報

株式会社フレクトでは、事業拡大のため、
・Salesforce/Force.comのアプリケーション開発
・HerokuやAWSなどのクラウドプラットフォーム上での
Webアプリケーション開発
エンジニア、マネージャーを募集中です。

未経験でも、これからクラウドをやってみたい方、
是非ご応募下さい。

フレクト採用ページへ

会社紹介

株式会社フレクトは、
認定コンサルタント
認定上級デベロッパー
認定デベロッパー
が在籍している、セールスフォースパートナーです。
また、heroku partnersにも登録されています。
herokuパートナー
株式会社フレクトのSalesforce/Force.com
導入支援サービス
弊社の認定プロフェッショナルが支援致します。
・Visualforce/Apexによるアプリ開発
・Salesforceと連携するWebアプリ開発
も承っております。
セールスフォースご検討の際は、
お気軽にお問合せください。

2017年12月

          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            
ブログ powered by TypePad