May 19 2013

[PHP解説編] Jawbone UP のログから画像を生成して Facebook に投稿するよ

Version : Jawbone UP App 2.5
73549

前回紹介した Jawbone UP のログを IFTTT 経由で Facebook に画像つきでポストする方法の続きです。今回は自前の PHP スクリプトで画像を動的に作っている部分をご紹介します。


Pocket

今回は、前回の続きです。IFTTT って何? 何をしようとしてるの? という方は前回の記事を読んでから先に進んでください m(_ _)m

さて、前回の解説では IFTTT だけでは Facebook へのポスト方法に限界があるので、自前でスクリプトを用意して画像を動的に生成して Facebook にポストするという方法を提案しました。

jawbone_IFTTT_facebook

今回は、前回触れなかった PHP スクリプト部分について書こうと思います。

 

まずは IFTTT の web からトリガーとアクションを設定しておく必要があります。

IFTTT を使って2つのサービスを連携させるために、まずは トリガー側である Jawbone UP の発火条件として「New daily movement」を選びます。これは Jawbone UP とスマホを同期してその日のアクティビティが登録されたときにトリガーがかかります。ですので、毎日同期すると1日1回トリガーがかかります。特に設定などはないのでトリガー側はこれでおしまいです。

スクリーンショット_2013_05_19_0_11

次に、アクション側である Facebook ですが、アクションとして「Upload a photo from URL」を選びます。これは、画像 URL と文章を指定してポストすると、画像 URL の写真が文章とともに Facebook のアルバムに登録されます。画像は Facebook 側にコピーされるので、PHP で画像を作ったものを自分のサーバに保存しておく必要はありません。

スクリーンショット_2013_05_19_0_05

このアクションを選ぶと下図のような入力フィールドが現れます。

スクリーンショット_2013_05_19_0_24

ここが今回のミソです。固定の画像 URL を渡すのではなく、下のような PHP にパラメータを渡す形で自前のサーバに画像を要求しています。この URL の中で {{…}} で囲われている部分は実際には Jawbone UP のトリガーから渡されてくる値に置換されます。

IFTTT の設定画面上で {{…}} はグレーの四角で囲われています。

 

http://miyadi.net/test/jawbone_up/activity_graph.php?target=10000&steps={{TotalSteps}}&calories={{TotalCaloriesBurned}}&distance={{DistanceCoveredKM}}&unit=Km&date={{DateOfActivity}}

ここから先は PHP 側の処理になるのでちょっと先に他のパラメータの解説をしておきます。

画像に付ける文章です。ここにも Jawbone UP トリガー側から送られてくるパラメータを入れることができます。

Facebook に保存するときのアルバム名を指定します。ここでは 「Jawbone UP logs」というアルバム名にして普通の写真と混ざらないように別の名前で分かりやすくしています。

 

Facebook の投稿設定で指定した画像 URL の先にある PHP スクリプトを用意します。このファイルはレンタルサーバや自前のサーバなどに置いて動かします。僕の場合はナウでヤングなロリポップサーバを使っています。家計にも優しいので。ロリポップのステマではありませぬ。

処理全体のおおまかな流れは下図の通りです。オレンジ色の部分が実際に画像を生成しています。といっても大したことはしておらず、ベースとなる画像に達成度に応じた顔マークとグラフを置いて、文字を描画しているだけです。フォントは Fonts2U から Decker というフリーの書体を選びました。イメージファイルや フォントファイルは PHP を置いたフォルダの下にサブフォルダを作って置きました。

jawbone_PHP_flow

 

まず、渡された URL から各種パラメータを取得して、変数に格納しておきます。各パラメータが存在するかのチェックはここでは省いてあります。

ターゲット歩数 $target と 実績歩数 $steps から達成率 $percent も計算しておきます。

ざっくり図にすると次のようになります。

jawbone_PHP_flow_createimage

コードを載せます。

7〜10行目で人型グラフを生成してベース画像に部分的に重ねます。それ以降は、達成率に合わせて達成マーク画像を読み込んでベース画像に合成しています。

あとはレイアウトに従って文字列を1つずつ描画しています。フォント設定と達成率の描画部分を下に示します。

すべての文字列を描画すると下図のような画像ができて完成です。

972236_10200703543404643_806476349_n

フォントはフリーの DeckerB.ttf を利用しました。また、文字列に将来日本語を使うことも考えてテキストの文字コード変換をかませてから表示しています。

たいした行数ではないので、全コードを載せておきます。

 

Pocket

コメントを残す