nkjmkzk.net

powered by Kazuki Nakajima

Archive for the ‘heroku’ tag

ブログをherokuに移行。

このサイトは自宅サーバで3年ほど、その後AWS EC2に移行して2年半ほど運用してきました。

これまではOSからMySQL, Nginx, php, WordPressとすべて面倒をみてきたわけですが、めっきりサーバソフトを触る機会が減りメンテナンスがおろそかにもほどがある状態になってきたのでブログはherokuに移行することにしました。

移行にあたって3点ほど懸念事項がありました。

  1. JapanインスタンスからUSインスタンスになることによるレスポンス悪化。
  2. WordPressは写真等のメディアをファイルシステムに保存する。herokuで動的にファイルシステムを変更するのは原則NG。これまでのメディア、これからのメディアをどうするか。
  3. herokuはIPアドレスを公開しておらず、xxx.herokuapp.comのドメインをCNAMEで指定することで独自ドメイン設定をおこなうが、このサイトのようにwwwなどがつかない「Naked Domain」とよばれるドメインではDNSの仕様上CNAME設定をおこなってはならないとされている。

1については、レスポンスが低下したのは間違いないですがブログサイトとしてはまず問題ないレベル。逆に、もしこのサイトがうっかり大人気になりすぎたときはherokuの恩恵を受けて即座にスケールアウトできるというメリットがあります。

2については、heroku wordpressで検索すればすぐに先人の知恵がわんさか出てきました。検索トップででてきた下記のブログではビルドパックやメディアのハンドリングをファイルシステムベースからAWS S3ベースに透過的にスイッチする方法を含む網羅的なセットアップ方法がカバーされています。

http://blog.mah-lab.com/2013/05/01/wordpress-on-heroku/

3についは最終的には「サブドメインつけるべき」だと判断しました。DNSimpleやCLOUDFLAREであればNaked DomainでCNAME設定できそうなのですが、アングラな予感がするので。下記サイトの指南通りにNaked Domain、つまりnkjmkzk.netへのアクセスはS3のStatic Web Hostingを利用してwww.nkjmkzk.netにリダクレクトし、www.nkjmkzk.netはCNAMEでherokuのドメインにマップしました。

https://devcenter.heroku.com/articles/route-53

これで一応すべての課題をクリア。herokuのアプリ側ではClearDBのpunchを契約。MySQLに格納されている記事データは久しぶりのmysqldumpコマンドでエクスポート&インポートし、無事に移行を完了することができました。

なんかすっきりしたーー。

without comments

Written by 中嶋 一樹

10月 5th, 2013 at 10:33 pm

Posted in Uncategorized

Tagged with ,

Facebookのソーシャル・チャネルを利用した広告アプリをForce.comで構築

私はFacebookが持つ機能の中で、企業活動につなげることができるパワーを次の3つに分類しています。

  • Social Profile(ソーシャル・プロファイル)
  • Social Channel(ソーシャル・チャネル)
  • Engagement

この中のソーシャル・チャネルに注目した広告アプリをForce.com上に構築し、それをひとつのデモにまとめました。ソーシャル・チャネルとは、Facebookの友達間をLikeやComment、Shareといった機能によって情報がねずみ講式に広がっていく伝播を意図しています。

このデモのユースケースは、下記の通りです。

  • 店舗マネージャはあらかじめ商品情報を広告アプリの管理画面から登録しておく。
  • とある小売店に訪れた消費者が商品を購入する際、店員が「もしFacebookでこの商品を購入したことを共有していただいたら10% 割引しますよ」とオファーする。
  • 消費者は自身のスマートフォンを用いて広告アプリのMobile Webサイトにアクセスする。
  • 消費者は自身が購入する商品をタップし、それだけでFacebookへの共有(広告)が完了する。

そのデモがこちらです。

このデモで技術的にキーとなる箇所は下記の2点です。

  • 登録した商品情報から、消費者がスマートフォンでアクセスするMobile WebサイトのHTMLを生成する
  • Mobile WebサイトからFacebookのAPIを呼び出してワンタッチで消費者のFacebook Wallに「この商品を買いました」というエントリーを投稿する

HTMLを生成する部分は、実際にはHeroku上で稼働するPHPアプリケーションがForce.comのREST APIにアクセスし、必要な商品情報を取得、jQuery Mobileでデザインされたレイアウトにその商品情報を並べるという仕組みで実装しています。

Facebookへの連携部分は、Mobile WebサイトでFacebookのJavascript用SDKをインポートし、Facebook Wallへ投稿をおこなうダイアログの表示ファンクションをfbPublishStoryとして下記のように定義しておきます。

<!-- Load facebook sdk -->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
    FB.init({
        appId      : 'あなたのApp ID', // App ID
        status     : true, // check login status
        cookie     : true, // enable cookies to allow the server to access the session
        xfbml      : true  // parse XFBML
    });
};

// Load the SDK Asynchronously
(function(d){
    var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
    if (d.getElementById(id)) {return;}
        js = d.createElement('script'); js.id = id; js.async = true;
        js.src = "//connect.facebook.net/ja_JP/all.js";
        ref.parentNode.insertBefore(js, ref);
    }(document)
);

function fbPublishStory(product_name, photo_url, shop_url) {
    discountCode = code;
    FB.ui({
        method: 'feed',
        name: product_name + 'を買いました。',
        link: shop_url,
        picture: photo_url
    }
    return false;
}
</script>

そしてあらかじめ取得しておいた商品情報からリストを作成し、そのリストのonclickイベントに前述のFacebookのダイアログ表示のファンクションを紐付けます。

<div data-role="page" id="page_product_list" data-theme="d">
    <div data-role="header" data-backbtn="false" data-theme="d">
        <h1><?php echo LABEL_PRODUCT_LIST; ?></h1>
    </div>
    <div data-role="content">
        <ul data-role="listview" data-inset="false" data-filter="true" data-split-icon="gear" id="list_product">
        <?php
        if (is_array($sugoid_product_list['records'])){
            foreach ($sugoid_product_list['records'] as $k => $v){
                ?>
                <li>
                    <a onclick="fbPublishStory(
                                    '<?php echo addslashes($v['Name']); ?>',
                                    '<?php echo addslashes($v['sugoidiscount__discount_rate__c']); ?>',
                                    '<?php echo addslashes($v['sugoidiscount__code__c']); ?>',
                                    '<?php echo addslashes($v['sugoidiscount__description__c']); ?>',
                                    '<?php echo addslashes($v['sugoidiscount__photo_url__c']); ?>',
                                    '<?php echo addslashes($v['sugoidiscount__url_to_buy__c']); ?>'
                                );" class="product_button" id="<?php echo $v['Id']; ?>" href="#">
                        <img src=" <?php echo $v['sugoidiscount__photo_url__c']; ?>" />
                        <h3><?php echo htmlspecialchars($v['Name']); ?></h3>
                        <p>通常価格<?php echo $v['sugoidiscount__price__c']; ?>円から<?php echo $v['sugoidiscount__discount_rate__c']; ?>% OFF</p>
                    </a>
                </li>
                <?php
            }
        }
        ?>
        </ul>
    </div>
</div>

このデモのポイントは、下記の通りです。

  • ソーシャル・チャネルで関心度の高い広告を伝播していくことができる(一般的な広告より、知り合いが購入したアイテムというのは関心度が高いと考えられる)
  • コードを書くのはMobile Webサイトだけ。アプリケーションへのサインアップ、ライセンス管理、商品登録、APIといった部分はForce.comが提供するフレームワークをそのまま利用して開発をスキップできる
  • さらに、Mobile WebサイトはHerokuを使うことで無料でスタートできる

最小限の労力でソーシャルパワーを装填したアプリを開発する。そんなデモでした。

without comments

Written by 中嶋 一樹

10月 11th, 2012 at 5:37 pm

Herokuを使って1分でスタートできるFacebookアプリ

FacebookアプリとはFacebookの機能を取り込んだアプリケーションであり、下記の3つのタイプがあります。

on Facebookは下図のような外観で、FacebookのWebインターフェース中のキャンバスと呼ばれるエリアにiframeでアプリケーションを表示させ、Facebookサイトと一体化した形でユーザーに提供されます。このキャンバスに読み込むアプリは別途外部Webサーバーで稼働させておく必要があります。

このタイプのFacebookアプリでは、ユーザーとのEngagement(ユーザーが繰り返しアプリを使う可能性)を高めることができるのが特徴です。

一般的にFacebookユーザーはあなたのアプリを使うという意図がなくても定期的にFacebookサイトを訪問します。その際に、Notification, Counter, BookmarkといったFacebookならではの通知機能でユーザーの目をひきつけ、ユーザーがすぐアクセスできる状態でアプリへのアクセスを促すことができ、スムースにユーザーを誘導できます。

他にもFacebookのSDKを組み込んでAPIにアクセスすることで、様々なFacebookの情報を活用することができます。

そのようなon Facebookのアプリは、実は1分で作成することができます。

まずは自身のFacebookアカウントでログインし、https://developers.facebook.com/appsにアクセスします。

*まだDeveloper登録していない場合はこの後に登録プロセスがあります

右上のCreate New Appボタンをクリックします。

App Nameにアプリの名前、App NamespaceにURLの一部に使われる名前空間を入力します。そして重要なのが、Web Hostingのチェックボックスです。このチェックボックスにチェックを入れることで、アプリのホスティング環境としてHeroku上のアプリが連動して作成されます。もしすでにHerokuのアカウントを持っており、登録EmailアドレスがFacebookとHerokuで同じであれば、既存のアカウントにアプリが追加されます。もしまだHeroku のアカウントがない場合は自動的に作成されます。

captchaで認証をおこなった後に、プログラミング環境としてどのプラットフォームを選択するかが表示されます。2012年10月時点での選択肢はPHP, Ruby, Python, node.jsです。

数秒するとプロビジョニングが完了し、Go to Appボタンをクリックすることで作成されたばかりのFacebookアプリを表示させることができます。Facebookアプリはサンプルコードとともに作成されています。Log Inボタンをクリックすることで自身のアカウントでこのアプリを認可し、サイトがどのようにパーソナライズ出来得るのかという例を見ることができます。

ただしこのときはHeroku上のアプリに直接アクセスするため、on Facebookのような外観ではありません。Facebookのアプリの設定画面にもどり、Canvas PageのURLを確認し、このURLにアクセスすれば、Facebookのフレーム内にHeroku上で稼働するアプリが埋め込まれて表示されます。

作成されたアプリはHerokuのダッシュボードですぐに確認することができます。

Heroku上で稼働するアプリはHerokuのDynoベースのアーキテクチャーの恩恵を受け、インジケーターひとつで簡単にスケールアウト・インすることができます。デフォルトの1Dynoだとホスティング料は無料です。

あとはHeroku上のアプリにgitでアクセスし、コードをコミットすることでアプリを自在に更新することができます。

without comments

Written by 中嶋 一樹

10月 10th, 2012 at 4:02 pm

php on heroku

愛して止まないphpをherokuで走らせるQuick Tutorial。(phpサポートは非公式です。)

前提条件

  • heroku CLIがインストールされていること

セットアップ手順

まずはローカルで適当なディレクトリを作成し、gitレポジトリを初期化。

$ mkdir myapp
$ cd myapp/
$ git init

index.phpを作成し(色気を出してtest.phpとか他のファイル名にしてはならない)、テストに適した王道スクリプトを記述。

$ vi index.php
<?php echo "Hello Salesforce.com!!"; ?>

gitレポジトリにコミット。

$ git add .
$ git commit -m 'my first commit'

heroku上にアプリを新規登録。stackにはcedarを指定。

$ heroku create --stack cedar
Creating growing-ice-9956... done, stack is cedar
http://growing-ice-9956.herokuapp.com/ | git@heroku.com:growing-ice-9956.git
Git remote heroku added

作成したアプリにレポジトリをプッシュ(アップロード)。

$ git push heroku master
Counting objects: 3, done.
Writing objects: 100% (3/3), 261 bytes, done.
Total 3 (delta 0), reused 0 (delta 0)

-----> Heroku receiving push
-----> PHP app detected
-----> Bundling Apache v2.2.19
-----> Bundling PHP v5.3.6
-----> Discovering process types
       Procfile declares types -> (none)
       Default types for PHP   -> web
-----> Compiled slug size is 21.5MB
-----> Launching... done, v4
       http://growing-ice-9956.herokuapp.com deployed to Heroku

To git@heroku.com:growing-ice-9956.git
 * [new branch]      master -> master

これだけ。ランダムに割り当てられたherokuapp.comサブドメインであなたのphpが動いています。今回だとhttp://growing-ice-9956.herokuapp.comですね。

herokuの管理画面ではこんな感じ。

 

まだ試してないですがWordpress on herokuとかもありますね。

https://github.com/mhoofman/wordpress-heroku

without comments

Written by 中嶋 一樹

2月 13th, 2012 at 10:03 pm

Posted in Uncategorized

Tagged with ,