Nakajiman Software Blog

DotCloudにJenkins+Nexus環境を構築してBitbucketと連携してみたよ（３／３）

2011-09-23T15:27:00.001+09:00

こんにちは！aquilegiaです。

その２の続きになります。今回で最後になりますのでもう少しお付き合いください。

４、Bitbucketの準備
Bitbucketのアカウントを作成して動作確認用プロジェクトのリポジトリを作成します。

４－１、Bitbucketのアカウントを作成してログイン
Bitbucket公式サイトのSign up freeボタンからサインアップしてください。

例ではアカウント名をaquilegiaで登録しています。今後、BItbucket接続URLなどにaquilegiaと出てきた場合は適宜読み替えてください。

４－２、リポジトリを作成
サインアップが完了したらページ上部にあるRepositoriesからcreate repositoryを選択した後、以下の内容で入力してください。

Name: helloworld
Private: チェック有
Language: Java
Description: 動作確認用プロジェクト
Website: （なし）
Project management: （Wiki、Issue trackingはお好みで）

入力が終わったらCreate repositoryボタンを押下してください。これでBitbucketの準備は終わりです。

５、動作確認用プロジェクトの作成
４－２で作成したリポジトリにプッシュするプロジェクトを作成します。動作確認用なので手間をかけずにMavenで作ります。

５－１、プロジェクトを作成
下記コマンドを実行すると

$ cd ~
$ mvn archetype:generate -DarchetypeArtifactId=maven-archetype-quickstart -DgroupId=sample -DartifactId=helloworld -Dversion=0.1-SNAPSHOT
（実行を確認にYと応える）

次の構造のQuickStartプロジェクトが作成されます。

helloworld
├── pom.xml
└── src
    ├── main
    │  └── java
    │      └── sample
    │          └── App.java
    └── test
        └── java
            └── sample
                └── AppTest.java

このままでも動きますが動作確認が目的なので、このプロジェクトが依存しているJUnitを
Nexusから取得するようにpom.xmlにリポジトリ定義を追加します。
</dependencies>の後にDotCloudアカウント名を書き換えたrepositoriesを追加してください。

$ vi helloworld/pom.xml
  <repositories>
    <repository>
      <id>com.dotcloud.nexus</id>
      <url>http://nexus-（DotCloudアカウント名）.dotcloud.com/content/groups/public</url>
    </repository>
  </repositories>

５－２、リポジトリへコミット→プッシュ
作成したプロジェクトをBitbucketへプッシュするためにMercurialをインストールします。

$ sudo yum -y install mercurial
$ hg --help

次に作成したプロジェクトにローカルリポジトリを作成してコミットしてください。

$ cd ~
$ mkdir bitbucket
$ hg clone https://（Bitbucketアカウント名）@bitbucket.org/（Bitbucketアカウント名）/helloworld bitbucket/helloworld
$ mv helloworld/* ./bitbucket/helloworld/
$ rm -rf helloworld
$ cd bitbucket/helloworld
$ hg status
$ hg add
$ hg commit -u （Bitbucketアカウント名） -m '初回コミット'

コミット時にユーザ名を指定しておくとBitbucketにリンク付きで表示されます。Bitbucketに存在しないユーザ名を指定するとデッドリンクになるので取得したアカウント名を指定するのが無難です。
最後にBitbucketへプッシュします。

$ hg push https://（Bitbucketアカウント名）@bitbucket.org/（Bitbucketアカウント名）/helloworld

プッシュが成功すればBitbucketのSourceタブにソースが表示されます。

６、動作確認
６－１、Nexus接続情報を設定
Nexusリポジトリは匿名ユーザではアクセスできないように設定したので、Mavenでビルド時にNexusリポジトリを参照できるよう接続情報を設定したsettings.xmlを作成してください。
またJenkinsがNexusからDLした依存ファイルを保存するローカルリポジトリをjettyユーザが書き込める場所に変更するためlocalRepositoryを指定してください。

$ dotcloud run jenkins.www -- mkdir -p .m2/repository \&\& ls -al
$ dotcloud run jenkins.www -- chmod 775 .m2/repository \&\& ls -l .m2/
$ dotcloud run jenkins.www -- vi .m2/settings.xml
<?xml version="1.0" encoding="UTF-8"?>
<settings>
  <localRepository>/home/dotcloud/.m2/repository</localRepository>
  <servers>
    <server>
      <id>com.dotcloud.nexus</id>
      <username>nexus</username>
      <password>（Nexusパスワード）</password>
    </server>
  </servers>
</settings>

$ dotcloud run jenkins.www -- cat .m2/settings.xml

６－２、動作確認用プロジェクトをビルドするジョブを登録
ブラウザからJenkinsにログインし、左メニューから新規ジョブ作成を選択してください。
以下の内容を入力しOKボタンを押下する

ジョブ名： helloworld
ビルド： フリースタイル・プロジェクトのビルド

ビルドにMaven2/3プロジェクトを指定しないのはsettings.xmlを指定するためです。
次にジョブの細かな設定をします。

ソースコード管理システム： Mercurial
Repository URL： https://（Bitbucketアカウント名）:（Bitbucketパスワード）@bitbucket.org/aquilegia/helloworld/

ビルド手順の追加： Mavenの呼び出し
使用するMaven： maven_2.2.1
ゴール： package
高度な設定
JVMオプション： -Dorg.apache.maven.user-settings=/home/dotcloud/.m2/settings.xml

JVMオプションのsettings.xmlファイルの指定は忘れないようにしてください。

６－３、ジョブを実行
登録したジョブの左メニューにあるビルド実行リンクを押下してジョブを実行してください。
ビルド履歴の日付リンクを押下し、左メニューのコンソール出力リンクから詳細を見ることができます。問題がなければ下のようにBUILD SUCCESSFULと表示されるはずです。

画像はわかりやすくするため何回か実行した後のものになりますが、初回はこれに加えてプラグインや依存のDLログが出力されます。

お疲れ様でした。これでDotCloud上にプライベートビルド環境ができました。Jenkinsのジョブ設定で「SCMをポーリング」を指定すればプッシュした後に変更を検知して自動でビルドすることもできます。また今回は手間を省くために動作確認用プロジェクトの作成にEclipseを使いませんでしたが、EclipseのMercurialEclipseプラグイン（updateサイト）を使うとBitbucketとのやり取りが簡単になります。

また注意点としてJenkinsとNexusはどちらもその機能上ディスクを多く使いますがDotCloudはまだディスクの使用制限がはっきりしていません。そのため過度な利用は避けたほうがよさそうです。

開発に使うツールをクラウド上に置くといつでも作業ができて便利です。他のサービスも組み合わせて快適な開発環境を構築してみてください。それではまた。

DotCloudにJenkins+Nexus環境を構築してBitbucketと連携してみたよ（２／３）

2011-09-23T15:22:00.000+09:00

こんにちは！aquilegiaです。

その１の続きです。今回はDotCloudにJenkinsを構築します。
Jenkinsは少し面倒ですがお付き合いください。

３、DotCloudにJenkinsを構築
３－１、DotCloud用カスタムWARを作成
JenkinsもNexus同様にjettyユーザが書き込めるJENKINS_HOMEディレクトリが必要ですが、DotCloud環境だとJenkinsが提供する外部指定（JNDIや環境変数、システムプロパティなど）が全て利用できません。その為、あまりやりたくありませんがJenkinsのソースを直接変更してJENKINS_HOMEを指定します。

変更後のJENKINS_HOMEは/home/dotcloud/jenkinsとします。

３－１－１、GitHubからJenkinsのソースコードをDL
ローカルにgitがインストールされていない場合は事前にインストールしてください。

$ rpm -qa | grep git
$ sudo yum -y install git

次にカスタムWARを作るために編集対象のソースが含まれるcoreプロジェクトをcloneします。

$ mkdir -p jenkins/src
$ cd jenkins/src
$ git clone git://github.com/jenkinsci/jenkins.git core

最新ソースの状態になっているので安定してるリリースタグをチェックアウト（後でDLするWARファイルとバージョンを合わせておく）

$ cd core
$ git checkout jenkins-1.430

３－１－２、WebAppMain.javaを編集してJENKINS_HOMEを変更
WebAppMain.javaを開き

$ cd core/core/src/main/java/hudson/
$ cp -p WebAppMain.java WebAppMain.java.org
$ vi WebAppMain.java

getHomeDirメソッドの内容を次の２行にしてください。

        File newHome = new File("/home/dotcloud/jenkins");
        return new FileAndDescription(newHome,"/home/dotcloud/jenkins");

３－１－３、ソースをコンパイル
コンパイルはMavenを利用します。JDKも必要になるので無い場合はインストールしてください。

$ wget http://download.oracle.com/otn-pub/java/jdk/6u27-b07/jdk-6u27-linux-x64-rpm.bin
$ mv jdk-6u27-linux-x64-rpm.bin\?e\=1316438935\&h\=38edd1ecfcdb35d6dd0aa91215bb62fb jdk-6u27-linux-x64-rpm.bin
$ chmod u+x jdk-6u27-linux-x64-rpm.bin
$ sudo ./jdk-6u27-linux-x64-rpm.bin
$ java -version

次にMavenをインストールします。インストールはrootで作業します。

$ su -
# wget http://ftp.kddilabs.jp/infosystems/apache//maven/binaries/apache-maven-2.2.1-bin.tar.gz
# tar xzvf apache-maven-2.2.1-bin.tar.gz
# mv apache-maven-2.2.1-bin /opt/maven2
# rm -f apache-maven-2.2.1-bin.tar.gz
# vi /etc/profile.d/maven2.sh
export M2_HOME=/opt/maven2
export PATH=$PATH:$M2_HOME/bin
# exit
$ source /etc/profile
$ mvn -v

最後のmvnコマンドでバージョン情報が表示されればインストール成功です。

coreディレクトリの直下に移動した後、下記コマンドを実行してコンパイルします。（※数分かかります）

$ cd ~/jenkins/src/core/core
$ mvn compile

OpenJDKを使うとcom.sun.toolsが見つからないというエラーでビルドが失敗するかもしれません。その場合はOpenJDKをアンインストール後、OracleのJDKを入れて試してみてください。

３－１－４、JenkinsのWARファイルをDL
MavenでWARまで作っても構いませんが、無難にリリースされたWARファイルを利用します。

$ cd ~/jenkins/
$ wget http://mirrors.jenkins-ci.org/war/latest/jenkins.war

３－１－５、WAR内のclassesに作成したWebAppMain.classを追加

$ mkdir -p WEB-INF/classes/hudson
$ cp -p src/core/core/target/classes/hudson/WebAppMain.class ./WEB-INF/classes/hudson/
$ cp -p jenkins.war jenkins.war.org
$ zip jenkins.war WEB-INF/classes/hudson/WebAppMain.class

３－２、DotCloudにjenkinsアプリケーションを作成
下記コマンドを実行し、jenkinsアプリケーションを作成してください。

$ dotcloud create jenkins

３－４、DotCloudへデプロイ
デプロイはNexusと同様にビルドファイルを作成し、ビルドファイルとWARファイルのみのディレクトリを作成した後にpushコマンドを実行します。

$ cat > dotcloud.yml <<EOF
www:
  type: java
EOF
$ mkdir deploy
$ mv jenkins.war deploy/ROOT.war
$ mv dotcloud.yml deploy/
$ dotcloud push jenkins deploy/
upload deploy/ ssh://dotcloud@uploader.dotcloud.com:443/jenkins
rsync
Pseudo-terminal will not be allocated because stdin is not a terminal.
building file list ... done
./
ROOT.war
dotcloud.yml

sent 45.19M bytes  received 53 bytes  772.50K bytes/sec
total size is 45.37M  speedup is 1.00
Deployment for "jenkins" triggered. Will be available in a few seconds.
2011-09-19 15:39:50 [api] Deploy jenkins scheduled for revision=latest
2011-09-19 15:39:51 [api] Waiting for the build. (It may take a few minutes)
2011-09-19 15:39:51 [www.0] Deploying...
2011-09-19 15:40:12 [www.0] Service booted
2011-09-19 15:40:12 [api] All the services are ready. Beginning the build.
2011-09-19 15:40:13 [www.0] The build started
2011-09-19 15:40:16 [www.0] Fetched code revision rsync-xxxxxxxxxx.xx
2011-09-19 15:40:18 [www.0]  * Stopping Jetty servlet engine (was reachable on http://jenkins-default-www-0:8080/). jetty
2011-09-19 15:40:21 [www.0]  * Jetty servlet engine stopped. jetty
2011-09-19 15:40:21 [www.0]    ...done.
2011-09-19 15:40:21 [www.0]  * Starting Jetty servlet engine. jetty
2011-09-19 15:40:21 [www.0]  * Jetty servlet engine started, reachable on http://jenkins-default-www-0:8080/. jetty
2011-09-19 15:40:26 [www.0]    ...done.
2011-09-19 15:40:26 [www.0] The build finished successfully
2011-09-19 15:40:26 [api] Deploy finished

Deployment finished. Your application is available at the following URLs
www: http://jenkins-aquilegia.dotcloud.com/

この状態ではNexusと同じ理由でまだ正常に動きませんので、ディレクトリを作成する手順を進めてください。

３－５、DotCloudにJENKINS_HOMEを作成
下記コマンドを実行し、jenkinsディレクトリを作成してください。

$ dotcloud run jenkins.www -- mkdir jenkins \&\& ls -l

Nexusと同様にグループに書込権限を付与してください。

$ dotcloud run jenkins.www -- chmod g+w jenkins \&\& ls -l

３－６、Jenkinsを再起動
これでJenkinsを起動するまでの準備が整いました。
別コンソールでログをtailしつつ、Jenkinsを再起動します。

$ dotcloud logs jenkins.www

$ dotcloud restart jenkins.www

ログにスタックとレースが表示されず、最後に以下のログが表示されれば成功です。

INFO: JNLP slave agent listener started on TCP port 58600
Sep 19, 2011 3:48:56 PM hudson.WebAppMain$2 run
INFO: Jenkins is fully up and running

正常に起動すればブラウザでアクセスするとTOPページが表示されます。

３－７、Jenkinsの初期設定
初期状態は外部に公開されている状態なので自分だけが利用できるように設定します。

３－７－１、ログインユーザを作成
Jenkinsにユーザを作成します。

左メニューから「Jenkinsの管理→システム設定」を選択し、システム設定ページを表示
６番目ぐらいにある「セキュリティを有効化」チェックボックスをON
アクセス制御のユーザ情報から「Jenkinsのユーザデータベース」を選択
保存ボタンを押下

保存した後、ページ右上にサインアップリンクが表示されるようになるので
リンクを押下してユーザを作成してください。（例ではjenkinsとします）

ユーザ名： jenkins
パスワード： （パスワードを入力）
パスワードの確認： （パスワードを入力）
フルネーム： jenkins
メールアドレス： （メールアドレスを入力）

サインアップが完了すると作成したユーザでログインした状態になります。
その後はサインアップできないようにします。

左メニューから「Jenkinsの管理→システム設定」を選択し、システム設定ページを表示
アクセス制御のユーザ情報にある「ユーザにサインアップを許可」チェックボックスを外す
保存ボタンを押下

これでページ右上からサインアップリンクが消えたはずです。

３－７－２、権限を設定
Jenkinsを利用できるユーザをログインユーザのみにします。

左メニューから「Jenkinsの管理→システム設定」を選択し、システム設定ページを表示
アクセス制御の管理権限を行列による権限設定に変更
匿名ユーザはそのままでauthenticatedという名前のユーザを追加
全権限を与える（チェックを全て入れる）
保存ボタンを押下

権限のチェックを終えると次のようになります。

これでログアウトするとホームページにログインフォームが表示されます。ログインしなければ何も利用できなくなっているはずです。

３－７－３、Mavenの自動インストール設定
DotCloud上にMavenをインストールするのは手間なのでJenkinsにやってもらいます。
ですがJenkinsがインストールしたMavenではMavenリポジトリに書き込めないという
おなじみの問題が発生するので後で対処します。

左メニューから「Jenkinsの管理→システム設定」を選択し、システム設定ページを表示
ページ中央にあるMeven追加ボタンを押下
名前とバージョンを指定

名前： maven_2.2.1
バージョン： 2.2.1

自動インストールはONのままとしてください。
保存ボタンを押下

また少し下に「利用状況とクラッシュレポートをJenkinsプロジェクトに匿名で報告」という項目がありますが好みで変更してください。

３－７－４、Jenkins Mercurial pluginをインストール
次はBitbucketからソースコードを取得するプラグインをインストールします。

左メニューから「Jenkinsの管理→プラグインの管理」を選択し、プラグインページを表示
利用可能タブから「Mercurial Plugin」を探し、チェックを入れる
ページ下部にあるインストールボタンを押下してインストール

この時「インストール後ジョブがなければ再起動する」にチェックを入れると
DotCloudコマンドで再起動しなくて済むので簡単です。

お疲れ様です。以上でJenkinsの構築が終わりました。
次回は動作確認用プロジェクトを作成して動作確認します。

DotCloudにJenkins+Nexus環境を構築してBitbucketと連携してみたよ（１／３）

2011-09-23T15:13:00.000+09:00

こんにちは！極稀に記事を書くaquilegiaです。

まずは手順を作るために下記ページを参考にさせて頂きました。多謝！
* dotcloud いいね！jenkins 編
* Jenkins Mercurial Pluginでbitbucketにアクセスする

今回は3arrowsやソーシャルから少し離れて、開発者の間で話題？のDotCloudとBitbucketを連携したJavaのコーディング環境を構築する手順をご紹介します。

サービスの詳細は割愛しますが、DotCloudは多くのプログラム言語を実行できるPaaSで無料で２アプリケーションまで作成できます。Bitbucketはプロジェクトホスティングサービスでソースコード管理にMercurialを利用しており、５人までのチームは無料でIssueとWikiがついたプライベートなプロジェクトを無制限に作ることができます。

今回はこの二つを利用して個人向けプライベートビルド環境を作りましょ～というお話になります。手順のアウトラインは次の通りで、少し長いため３回に分けて紹介します。作業はLinux上で行ってだいたい１時間程度かかると思います。

・DotCloudを利用するための準備・DotCloudアカウントを取得	・DotCloudクライアントをインストール・DotCloudにNexusを構築	・NexusのWARファイルをDL	・WARファイルから編集ファイルを抽出	・ベースディレクトリの設定を変更	・編集したファイルをWARファイルに戻す	・DotCloudにnexusアプリケーションを作成	・DotCloudへデプロイ	・DotCloudにベースディレクトリを作成	・Nexusを再起動	・Nexusの初期設定		・ログインユーザを作成		・既存ユーザを無効にする・DotCloudにJenkinsを構築	・DotCloud用カスタムWARを作成		・GitHubからJenkinsのソースコードをDL		・WebAppMain.javaを編集してJENKINS_HOMEを変更		・ソースをコンパイル		・JenkinsのWARファイルをDL		・WAR内のclassesに作成したWebAppMain.classを追加	・DotCloudにjenkinsアプリケーションを作成	・DotCloudへデプロイ	・DotCloudにJENKINS_HOMEを作成	・Jenkinsを再起動	・Jenkinsの初期設定		・ログインユーザを作成		・権限を設定		・Mavenの自動インストール設定		・Jenkins Mercurial pluginをインストール・Bitbucketの準備	・Bitbucketのアカウントを作成してログイン	・リポジトリを作成・動作確認用プロジェクトの作成	・プロジェクトを作成	・リポジトリへコミット→プッシュ・動作確認	・Nexus認証情報を設定	・動作確認用プロジェクトをビルドするジョブを登録	・ジョブを実行

１、DotCloudを利用するための準備
DotCloud公式サイトのホームページにある緑色のSing Up Freeボタンを押下してアカウントを登録してください。

次にインストールマニュアルに従ってCLIをインストールしてください。DotCloudとやりとりする時にこのCLIを使います。
※CLIはWindows以外をお勧めします。というのも最初Windows版をインストールしてみたところ私のCygwin環境が悪かったのか、コマンド実行時に頻繁にエラーが発生しました。エラーを無視して根気よくコマンドを送れば使えますが、ストレスが溜まるのでLinux版へ替えました。

CLIをインストール後は任意のユーザでdotcloudコマンドを実行してください。初回実行時のみAPIキーの入力が求められます。

$ dotcloud
Warning: /home/aquilegia/.dotcloud/dotcloud.conf does not exist.
Enter your api key (You can find it at http://www.dotcloud.com/accounts/settings): （settingsページに表示されるAPIキーを入力する）
error: usage: dotcloud [-h]

                {info,status,stats,run,logs,versions,url,setup,list,rollback,alias,ssh,push,destroy,create,restart,history}
                ...

コンソールに表示されたURL(http://www.dotcloud.com/accounts/settings)へアクセスすればAPIキーが表示されるはずです。引数なしで実行すると上記のようにエラーになりますが問題ありません。

２、DotCloudにNexusを構築
NexusはそのままではDotCloud上で動きません。これはDotCloud上で動いているサーブレットコンテナはJettyでJettyユーザによって実行されていますが、Nexusがファイルを書き出すruntimeとnexus-workディレクトリに書込権限がなくエラーになるためです。

そのため私達が自由に使えるdotcloudユーザのホームディレクトリにnexusディレクトリを作成してそこを使わせるようにします。

２－１、NexusのWARファイルをDL

作業用のディレクトリを作成した後、ここからNexusのWARファイルをDLしてください。

$ mkdir -p nexus
$ cd nexus
$ wget http://nexus.sonatype.org/downloads/nexus-webapp-1.9.2.2.war

２－２、WARファイルから編集ファイルを抽出

WARから編集するファイルのみ展開してください。

$ unzip nexus-webapp-1.9.2.2.war WEB-INF/plexus.properties

２－３、ベースディレクトリの設定を変更
展開したディレクトリ内のWEB-INF/plexus.propertiesをエディタで開いてruntimeとnexus-workが/home/dotcloud/nexus配下になるよう編集してください。
（例はオリジナルからnexus-homeを追加し、runtimeとnexus-workがnexus-homeの子ディレクトリになるよう変更しました）

$ cd WEB-INF
$ cp -p plexus.properties plexus.properties.org
$ vi plexus.properties
nexus-home=/home/dotcloud/nexus
runtime=${nexus-home}/runtime
apps=${runtime}/apps
nexus-work=${nexus-home}/sonatype-work/nexus
nexus-app=${runtime}/apps/nexus
webapp=${runtime}/apps/nexus/webapp
security-xml-file=${nexus-work}/conf/security.xml
application-conf=${nexus-work}/conf
runtime-tmp=${runtime}/tmp

２－４、編集したファイルをWARファイルに戻す

編集したファイルをWARファイルに戻します。

$ cd ../
$ cp -p nexus-webapp-1.9.2.2.war nexus-webapp-1.9.2.2.war.org
$ zip nexus-webapp-1.9.2.2.war WEB-INF/plexus.propertie

２－５、DotCloudにnexusアプリケーションを作成
ここからはDotCloudへのデプロイ作業に移ります。コンソールから下記コマンドを実行し、DotCloudにnexusアプリケーションを作成してください。

$ dotcloud create nexus
Created application "nexus"

２－６、DotCloudへデプロイ
デプロイにはWARファイルとビルドファイルが必要になります。ビルドファイルは以下の内容でdotcloud.ymlという名前で作成してください。wwwはサービス名で任意の文字でかまいません。（ここでは公式ドキュメントと同じwwwとします）

$ cat > dotcloud.yml <<EOF
www:
  type: java
EOF

次に適当な名前のディレクトリ（ここではdeployとします）を作成してWARファイルとビルドファイルと移してください。DotCloudのデプロイは内部でrsyncを使うのですが、指定したディレクトリの全ファイルを同期してしまうので無関係なファイルが送られないようにします。

$ mkdir deploy
$ mv nexus-webapp-1.9.2.2.war deploy/ROOT.war
$ mv dotcloud.yml deploy/

コンテキストルートは/にしたいのでWARファイルは名前をROOT.warに変更しておきます。
最後にコンソールから下記コマンドを実行し、DotCloudにnexusをデプロイする。

$ dotcloud push nexus deploy/
upload deploy/ ssh://dotcloud@uploader.dotcloud.com:443/nexus
rsync
Pseudo-terminal will not be allocated because stdin is not a terminal.
building file list ... done
./
ROOT.war
dotcloud.yml

sent 25.57M bytes  received 53 bytes  616.03K bytes/sec
total size is 25.67M  speedup is 1.00
Deployment for "nexus" triggered. Will be available in a few seconds.
2011-09-19 10:35:32 [api] Deploy nexus scheduled for revision=latest
2011-09-19 10:35:32 [api] Waiting for the build. (It may take a few minutes)
2011-09-19 10:35:32 [www.0] Deploying...
2011-09-19 10:35:57 [www.0] Service booted
2011-09-19 10:35:57 [api] All the services are ready. Beginning the build.
2011-09-19 10:35:57 [www.0] The build started
2011-09-19 10:35:58 [www.0] Fetched code revision rsync-xxxxxxxxx.xx
2011-09-19 10:36:01 [www.0]  * Stopping Jetty servlet engine (was reachable on http://nexus-default-www-0:8080/). jetty
2011-09-19 10:36:03 [www.0]  * Jetty servlet engine stopped. jetty
2011-09-19 10:36:03 [www.0]    ...done.
2011-09-19 10:36:03 [www.0]  * Starting Jetty servlet engine. jetty
2011-09-19 10:36:04 [www.0]  * Jetty servlet engine started, reachable on http://nexus-default-www-0:8080/. jetty
2011-09-19 10:36:09 [www.0]    ...done.
2011-09-19 10:36:09 [www.0] The build finished successfully
2011-09-19 10:36:09 [api] Deploy finished

Deployment finished. Your application is available at the following URLs
www: http://nexus-aquilegia.dotcloud.com/

ここでデプロイ結果を確認したくなりますがもう少し我慢してください。まだこの時点だと/home/dotcloud/nexusディレクトリが無いので正常に動いていません。

２－７、DotCloudにベースディレクトリを作成
コンソールから下記コマンドを実行し、DotCloudにNexusが使うディレクトリを作成してください。

$ dotcloud run nexus.www -- mkdir nexus \&\& ls -l

次にnexusディレクトリにグループ書込権限を追加します。こうすることでjettyユーザで実行されているNexusからディレクトリへファイルを書き込めるようになります。

$ dotcloud run nexus.www -- chmod g+w nexus \&\& ls -l

２－８、Nexusを再起動

今度は正常に起動できるはずなのでログを監視しながら再起動します。別のコンソールで下記コマンドを実行してログをtailしてください。

$ dotcloud logs nexus.www

そしてnexusアプリケーションを再起動してください。

$ dotcloud restart nexus.www

正常に起動すればログにスタックトレース等は出力されずに最終行が

15632 [main] INFO org.mortbay.log - Started SelectChannelConnector@0.0.0.0:8080

となるはずです。

２－８、Nexusの初期設定
初期状態は外部に公開されている状態なので自分だけが利用できるように設定を変更します。

２－８－１、ログインユーザを作成
ダッシュボードでアプリ名の右側に表示されたサービス名をクリックするとデプロイしたNexusが表示されます。URLは"デプロイ名-アカウント名"を第4レベルドメインにしたものなので覚えられると思います。

http://nexus-aquilegia.dotcloud.com/

右上のLog Inリンクを押下し、下記ID/パスで管理者としてログインしてください。ログイン後は左のSecurityからChange Passwordを選択してパスワードを変更してください。

admin
admin123

ユーザの作成はSecurity→Usersから行います。Usersを選択すると右側に一覧が表示されるので上部に表示された緑色のAddボタンを押下し、Nexusユーザを作成してください。

（ここではnexusというIDで作成したとします）

ID: nexus
EMail: （メールアドレスを入力）
Status: Active
New Password: （パスワードを入力）
Confirm Password: （パスワードを入力）

Role Management: Nexus Developer Role

※メールアドレスは必須項目のため設定していますがAdministration → ServerでSMTPサーバや通知設定をしないと実際には送信されません。必要な方は試してみてください。

２－８－２、既存ユーザを無効にする
Usersの一覧にはもとからadmin、deployment、anonymousがありますがdeploymentは不要なので削除してください。またanonymousは非ログイン状態のユーザになり、削除不可ユーザです。今回は個人で利用するのでリポジトリを匿名ユーザに参照されないようStatusをDisabledへ変更してください。変更後のTOPページは以下のようにRespositoriesも参照できなくなります。

お疲れ様です。これでNexus環境ができました。
今回はここまでです。続きは次回ご紹介します。

3arrows の OpenSocial RPC API (2-legged OAuth) で、節電呼びかけでんこちゃん社内 bot を作ってみたよ

2011-04-04T14:45:00.001+09:00

こんにちは。Nobuhiro Nakajima @ YOKOHAMA です。

3arrows - Google Apps アカウントでも使える社内 Twitter
http://www.3arrows.jp/

3arrows は、2-legged OAuth による OpenSocial RPC API を提供しています。2-legged OAuth は mixiアプリなどソーシャルアプリの世界では、標準化されたリクエスト署名方式で、アプリと外部システムの連携に適しています。詳しくは、次のページを参考にしてください。

2-legged OAuth による API アクセス >> mixi Developer Center
http://developer.mixi.co.jp/appli/spec/pc/restful-api-for-pc/2-legged-oauth-api-access

このエントリでは 2-legged OAuth による OpenSocial RPC API を使って、電力使用状況と節電を呼びかけるでんこちゃん社内 bot の作り方を紹介します。

でんこちゃん社内 bot

就業時間中の1時間に1度、でんこちゃん bot がタイムラインに節電を呼びかける投稿をします。このとき、現在の電力使用状況とその日の推移グラフも合わせて投稿します。

①でんこちゃん bot
②東京電力アプリのロゴ
③東京電力アプリのリンク先 http://www.tepco.co.jp/forecast/index-j.html
④電力使用状況
⑤電力使用状況の推移グラフ (クリックすると、次のとおり拡大する)

でんこちゃんユーザの作成

コントロールパネルで、でんこちゃんを表すユーザを作成します。ここでは、メールアドレスを denkochan@lrlab.to とします。

東京電力アプリの作成

コントロールパネルで、東京電力を表すアプリを作成します。

アプリのガジェットXMLは次のとおりです。アプリのタイトルは東京電力とし、アイコンは Twitter 公式アカウントから拝借します。アプリは、コンテンツを持たせず、東京電力サイトにリンクさせます。

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="東京電力" description="東京電力から節電のお願いです">
<Link rel="icon" href="http://a0.twimg.com/profile_images/1276730827/tepco_normal.JPG" />
</ModulePrefs>
<Content type="url" href="http://www.tepco.co.jp/forecast/index-j.html"></Content>
</Module>

コンシューマキーとシークレットの入手

2-legged OAuth のコンシューマキーとシークレットは、コントロールパネルから入手できます。OpenSocial RPC API のエンドポイント (URL) も同様です。

バッチの作成

東京電力から LWP::Simple を使って、電力の使用状況データ (CSV) をダウンロードします。そして、最新の電力使用状況を集計し、Google Chart API を使って、当日の推移グラフを作成します。

use strict;
use warnings;

use LWP::Simple;
use Encode 'decode_utf8';

my $url = 'http://www.tepco.co.jp/forecast/html/images/juyo-j.csv';
my @rows = split(/\r\n/, get($url));

shift @rows;
shift @rows;

# ピーク時供給力(万kW)
my ($cap) = split(/,/, shift @rows); 

shift @rows;
shift @rows;

# 24時間分の当日実績(万kW)
my @hours = map {
    my @cols = split(/,/, $_); $cols[2];
} @rows;

my $latest;

# 最新の当日実績(万kW)
for (reverse(@hours)) {
    last if $latest = $_;
}

# 電力使用率
my $per = sprintf('%.1f', $latest / $cap * 100);

# 当日実績(万kW)の推移グラフ
my $chart = 'http://chart.googleapis.com/chart' . 
    '?chs=400x240' .
    '&cht=bvo' .
    "&chxr=0,0,$cap|1,0,23" .
    '&chxt=y,x' .
    '&chbh=10' . 
    '&chd=t:' . join(',', map { int($_ / $cap * 100) } @hours);

続けて、Activities API を使って、電力使用状況を 3arrows に投稿します。アクティビティの作成を JSON RPC で組み立て、OAuth::Lite::Consumer を使って、リクエストを署名して発行します。

API の Endpoint、Consumer Key、Consumer Secret には、前述のコントロールパネルから入手した値を指定します。また、xoauth_requestor_id には、でんこちゃん(投稿者) を表す denkochan@lrlab.to を指定しています。

アクティビティの作成に成功すると、アクティビティID がレスポンスされます。万が一失敗したときは、JSON RPC のエラーか HTTP ステータスのエラーがレスポンスされます。

use Data::Dumper;
use JSON::XS;
use OAuth::Lite::Consumer;

# アクティビティのタイトル
my $title = <<EOB;
じゃん! 電気を大切にね。
> 電力使用状況 $cap 万kW 中 $latest 万kW ($per%)
> $chart
EOB

# アクティビティの作成を表す JSON RPC
my $content = JSON::XS::encode_json({
    jsonrpc => '2.0',
    method => 'activities.create',
    params => {
        userId => '@viewer',
        group => '@self',
        activity => { title => decode_utf8($title) } # UTF-8 フラグ
    },
    id => 1
});

# API の Endpoint, Consumer Key, Consumer Secret, Viewer
my %options = (
    endpoint => 'http://nakajiman.3arrows.jp/api/rpc/a',
    consumer_key => '{consumer key}',
    consumer_secret => '{consumer secret}',
    requester_id => 'denkochan@lrlab.to',
);

my $consumer = OAuth::Lite::Consumer->new(
    consumer_key => $options{consumer_key},
    consumer_secret => $options{consumer_secret}
);

# リクエストの署名と発行
my $response = $consumer->request(
    method  => 'POST',
    url => $options{endpoint},
    headers => [ 'Content-Type' => 'application/json' ],
    content => $content, 
    params => {
        xoauth_requestor_id => $options{requester_id},
    });

# リクエストの成否
if ($response->is_success) {
    print Dumper(JSON::XS::decode_json($response->decoded_content));
} else {
    warn $response->status_line;
}

1;

バッチの実行

就業時間の 9:00 から 18:00 の間で、1時間に一度、バッチを実行するように cron を登録します。

ダウンロード

でんこちゃん社内 bot のソースコードは、次のページからダウンロードできます。

ダウンロード - 3arrows.jp
https://sites.google.com/a/socialprise.jp/3arrows-jp/downloads

3arrows アップデート！ Google Apps アカウントでログインできるようになりました。

2011-03-30T21:28:00.000+09:00

3月28日（月）、企業やチーム向けのプライベートマイクロブログ、3arrows をアップデートしました。アップデートの主な内容は次の通りです。

Google Apps アカウントでログインできるようになりました！

コントロールパネルの「ユーザーの管理」画面で、「Google Apps アカウントでログインする」のチェックボックスにチェックを入れると、以後、3arrows に Google Apps アカウントでログインできるようになります。

なお、Google Apps for Business をご利用の方は、Google Apps の OpenID の設定を有効にする必要があります。

「ログイン」画面では Google Apps アカウントのドメインを入力してください。

今回の Google Apps アカウントへの対応で、3arrows は個人間のコラボレーション、企業内のコラボレーション、企業間のコラボレーションを支援できるようになりました。

3arrows では、異なるドメインのメールアドレスのユーザー、異なるドメインの Google Apps アカウントのユーザーを、区別せずメンバーとして招待することができます。

全てのアプリケーションの更新をお願いします！

管理者の方は、コントロールパネルのアプリケーションタブから、全てのアプリケーションを更新してください。「更新する」リンクをクリックすると、アプリケーションを更新できます。「最新」と表示されれば更新の完了です。

3arrows では、引き続き α テストのユーザーを募集しています。サインアップの手続きはとても簡単です。数分ですぐに利用を始めることができます。企業や個人等、利用条件に制限はありませんので、この機会にぜひお試しください。

Google Apps Script に続けて Windows Script Host (WSH) で 2-Legged OAuth をやってみました

2011-03-21T16:13:00.002+09:00

こんにちは。なかじまん @ YOKOHAMA です。
東北関東大震災で被災された皆さまには心よりお見舞い申し上げます。

Google Apps Script の UrlFetch Services は 2Legged OAuth に対応してないっぽいので自前でやってみたに続いて、Windows Script Host (WSH) を使って Windows のコマンドラインから 2-Legged OAuth をやってみました。

WSH の場合、いろいろな実装方法を選択できそうなのですが、前述の Google Apps Script の JavaScript をそのまま動かす方法を選択しています。

なので、ソースコードはほとんど同じで、UrlFetch Services ではなく XMLHttpRequest を同期で使っているくらいの違いです。

<job>
<script language="JavaScript" src="sha1.js"></script>
<script language="JavaScript" src="oauth.js"></script>
<script language="JavaScript" src="json2.js"></script>
<script language="JavaScript">

  var endpoint = 'http://nakajiman.3arrows.jp/api/rpc/a';
  var consumerKey = '{Consumer Key}';
  var consumerSecret = '{consumer Secret}';
  var requestor_id = 'nakajiman(at)lrlab.to';

  var message = { method: 'POST', action: endpoint, parameters: {} };

  OAuth.setParameter(message, 'oauth_consumer_key', consumerKey);
  OAuth.setParameter(message, 'oauth_version', '1.0');
  OAuth.setParameter(message, 'oauth_timestamp', OAuth.timestamp());
  OAuth.setParameter(message, 'oauth_nonce', OAuth.nonce(6));
  OAuth.setParameter(message, 'xoauth_requestor_id', requestor_id);

  OAuth.SignatureMethod.sign(message, { consumerSecret: consumerSecret });

  var url = OAuth.addToURL(endpoint, message.parameters);
  var data = JSON.stringify({
      jsonrpc: '2.0',
      method: 'activities.create',
      params: { userId: '@viewer', group: '@self', activity: { title: 'Say hello!' } },
      id: 1
  });
  
  var xhr = WScript.CreateObject('MSXML2.XMLHTTP');
  xhr.open(message.method, url, false);
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.send(data);
  
  if (xhr.status != 200)
    WScript.Echo(xhr.status + ' ' + xhr.statusText);
  else {
    var res = JSON.parse(xhr.responseText);
    WScript.Echo(res.result);
  }

</script>
</job>

ただいま、企業やチーム向けのプライベートマイクロブログ 3arrows では、お客様のシステムやサービスとの連携を目的とした「シングルサインオン」と「2-Legged OAuth ベースの API」に取り組んでいます。

2-Legged OAuth ベースの API 公開により、システムやサービスの統合に加えて、Google Apps Script や Windows Script Host から 3arrows を操作して、ユーリティティの用途としても活用できるようになります。

3arrows アップデート！投稿内容を引用して返信できるようになりました! Gmail や Trac のような明瞭な引用です!

2011-03-07T21:18:00.000+09:00

3月2日(水)、企業やチーム向けのプライベートマイクロブログ、3arrows をアップデートしました。アップデートの主な内容は次の通りです。

ステータスの引用機能の追加

マイクロブログの各ステータスを引用できるようになりました。

Twitter の以前の RT 機能と類似の機能となりますが、引用したステータスがそれと分かるようにスタイリングされ、また、3arrows は Twitter と比較して文字数の制限が緩いため、ステータスを途中で切ることなく引用することができます。

ステータス上でのアプリケーションのアイコンと名前の表示

日報等、各アプリケーションからマイクロブログに通知されたステータスには、それと分かるようにアプリケーションのアイコンと名前を表示するようになりました。

これにより、どのアプリケーションからの通知なのかが一目で分かるようになります。

全てのアプリケーションの更新をお願いします！

管理者の方は、コントロールパネルのアプリケーションタブから、全てのアプリケーションを更新してください。「更新する」リンクをクリックすると、アプリケーションを更新できます。「最新」と表示されれば更新の完了です。

3arrows では、引き続き α テストのユーザーを募集しています。サインアップの手続きはとても簡単です。数分ですぐに利用を始めることができます。企業や個人等、利用条件に制限はありませんので、この機会にぜひお試しください。

Facebook のプロフィール写真をウェブカメラを経由でアップロードしてみた。ウェブカメラから multipart/form-data で静止画をアップロードできるライブラリを探しています。

2011-03-07T14:12:00.000+09:00

こんにちは。Nobuhiro Nakajima です。

Facebook のプロフィール写真は、ウェブカメラを経由してウェブブラウザからアップロードできるらしいので試してみました。

手持ちのウェブカメラはマイクロソフトウェブカメラ LifeCam VX-800 JSD-00006 です。↓これ。今なら 1,000 円くらいで入手できます。

プロフィール写真の設定ページから写真を撮るボタンをクリックすると、ポップアップが開きます。許可をクリックすると、ウェブカメラの映像が移り出すので、カメラボタンをクリックして、写真を撮ります。

すると、次のとおり、ウェブカメラで撮影した静止画がプロフィール写真として掲載されます。

ウェブカメラからの写真の撮影は Flash で実現されています。Flash 内で、ウェブカメラのストリームを扱い撮影のタイミングで静止画にして、サーバにアップロードするという仕組みのようです。

同じことをやってみたくて、ライブラリなどを探していると、いくつか発見できました。例えば、これとか。

jQuery webcam plugin - Website and Application Intelligence

This plugin provides three different modes to access a webcam through a small API directly with JavaScript - or more precisely jQuery.

ただ、今まで見つけたライブラリは、静止画のデータを HTTP POST の raw データとしてアップロードするものでした。これだと AppEngine の Blob Storage に直接アップロードできないのです。

ということで multipart/form-data でウェブカメラから静止画をアップロードできるライブラリを探しています。もしも、ご存じでしたらぜひ教えてください。

3arrows アップデート！無料プラン、独自ドメイン／専用環境プラン、OEM プランを追加しました。

2011-03-03T13:05:00.002+09:00

3 月 1 日（火）、企業やチーム向けのプライベートマイクロブログ、3arrows の料金表を改定しました。改定の主な内容は次の通りです。

無料プランの追加

3arrows を無料で利用できるプランを追加しました。今後、ユーザー数が 5 人以内の場合、3arrows は無料で利用できます。

独自ドメイン／専用環境プランの追加

3arrows を独自ドメイン、専用環境で利用できるプランを追加しました。セキュリティポリシー上、共用環境での利用が難しかったお客様でも、今後は独自ドメイン、専用環境で 3arrows を利用できます。（有料になります。）

OEM プランの追加

3arrows を OEM として、お客様のブランドで提供したり、お客様のサービスに組み込んで提供できるプランを追加しました。3arrows は柔軟で堅牢なアーキテクチャーの元で実装されているため、デザイン、機能ともにフルカスタマイズした上で提供することが可能です。

3arrows では、引き続き α テストのユーザーを募集しています。サインアップの手続きはとても簡単です。数分ですぐに利用を始めることができます。企業や個人等、利用条件に制限はありませんので、この機会にぜひお試しください。

Google Apps Script の UrlFetch Services は 2Legged OAuth に対応してないっぽいので自前でやってみた

2011-03-02T15:21:00.002+09:00

こんにちは。なかじまんです。

Google Apps Script の UrlFetch Services は 2Legged OAuth に対応してないっぽいので自前でやってみた。ちなみに 3Legged OAuth は標準でできるみたいです。

はじめに JavaScript の OAuth ライブラリの内sha1.js と ~~oauth.jp~~ oauth.js を貼り付けます。そして、次のようにリクエストを署名して、UrlFetch Services でエンドポイントを叩きます。

以下の例では、Google Friend Connect の People API を呼び出して、Viewer (xoauth_requestor_id) のプロフィールを取得して、ニックネームを表示しています。

function myFunction() {

  var action = 'http://www.google.com/friendconnect/api/people/@me/@self';
  var accessor = { consumerSecret: '{consumerSecret}' };
  var message = { method: 'GET', action: action, parameters: {}, };

  OAuth.setParameter(message, 'oauth_consumer_key', '{oauth_consumer_key}');
  OAuth.setParameter(message, 'oauth_version', '1.0');
  OAuth.setParameter(message, 'oauth_timestamp', OAuth.timestamp());
  OAuth.setParameter(message, 'oauth_nonce', OAuth.nonce(6));
  OAuth.setParameter(message, 'xoauth_requestor_id', '18200614986198926446');

  OAuth.SignatureMethod.sign(message, accessor);

  var url = OAuth.addToURL(action, message.parameters);

  var response = UrlFetchApp.fetch(url, {method: message.method });
  if (response.getResponseCode() == 200) {
    var res = JSON.parse(response.getContentText());
    Browser.msgBox(res.entry.displayName);
  }
}

今回は Query String で試しましたが Authorization Header でも大丈夫なはず。

ということで Google Apps Script から 2Legged OAuth できちゃいました。

3arrows アップデート！お気に入り機能とダイジェストメール機能を追加しました。

2011-03-02T14:14:00.000+09:00

2 月 25 日（金）、企業やチーム向けのプライベートマイクロブログ、3arrows をアップデートしました。アップデートの主な内容は次の通りです。

お気に入り機能の追加

マイクロブログの各ステータスをお気に入りに追加できるようになりました。

各ステータスの返信、削除と並ぶ「お気に入り」メニューをクリックすると、そのステータスをお気に入りに追加できます。また、自分以外のユーザーがステータスをお気に入りに追加した場合、ステータスの下部にお気に入りの合計人数を表示するようになりました。

なお、追加したお気に入りは上部メニューの「お気に入り」から一覧できます。

ダイジェストメール機能の追加

1 日 1 回、マイクロブログ上のコミュニケーションのダイジェストを、メールで配信するようになりました。今後、みなさまのご利用状況を踏まえ、オプション化等も検討していきます。

不具合の修正

マイクロブログの返信機能の不具合や Picasa Web Albums の https への対応等、いくつかの改修を実施しました。

全てのアプリケーションの更新をお願いします！

管理者の方は、コントロールパネルのアプリケーションタブから、全てのアプリケーションを更新してください。「更新する」リンクをクリックすると、アプリケーションを更新できます。「最新」と表示されれば更新の完了です。

3arrows では、引き続き α テストのユーザーを募集しています。サインアップの手続きはとても簡単です。数分ですぐに利用を始めることができます。企業や個人等、利用条件に制限はありませんので、この機会にぜひお試しください。

Firefox の location.hash は自動デコードにも関わらず、制御コードはデコードしないとか知ってました?

2011-02-27T19:02:00.001+09:00

こんばんは。なかじまんです。

Firefox の location.hash は、他のブラウザと異なり、URI デコードした結果を表すのは、よく知られていると思いますが、なんど制御コードに限ってデコードしない例外があるようです。試しているのは Firefox 3.6 です。

例えば、改行入りのテキストを location.hash で状態を保持しようとすると、改行コードは CR/LF にデコードされず、%0D%0A のままとなってしまいます。なんじゃこれ。何か勘違いしているのかなぁ。

試しに ASCII コードをぜんぶ試してみたところ、

for (var i = 0x0; i <= 0x7f; i++) {
  var hex = Number(i).toString(16);
  var ch = String.fromCharCode(i);
  location.href = '#' + encodeURIComponent(ch);
  console.log('0x' + hex + ': ' + location.hash);
}

制御コードは、デコードされないことを知りました。HTML や DOM の仕様にそぐわないからだろうか。それとも、脆弱性に関するものだろうか。

0x0: #%00
0x1: #%01
0x2: #%02
0x3: #%03
0x4: #%04
0x5: #%05
0x6: #%06
0x7: #%07
0x8: #%08
0x9: #%09
0xa: #%0A
0xb: #%0B
0xc: #%0C
0xd: #%0D
0xe: #%0E
0xf: #%0F
0x10: #%10
0x11: #%11
0x12: #%12
0x13: #%13
0x14: #%14
0x15: #%15
0x16: #%16
0x17: #%17
0x18: #%18
0x19: #%19
0x1a: #%1A
0x1b: #%1B
0x1c: #%1C
0x1d: #%1D
0x1e: #%1E
0x1f: #%1F
0x20: #
0x21: #!
0x22: #"
0x23: ##
0x24: #$
0x25: #%
0x26: #&
0x27: #'
0x28: #(
0x29: #)
0x2a: #*
0x2b: #+
0x2c: #,
0x2d: #-
0x2e: #.
0x2f: #/
0x30: #0
0x31: #1
0x32: #2
0x33: #3
0x34: #4
0x35: #5
0x36: #6
0x37: #7
0x38: #8
0x39: #9
0x3a: #:
0x3b: #;
0x3c: #<
0x3d: #=
0x3e: #>
0x3f: #?
0x40: #@
0x41: #A
0x42: #B
0x43: #C
0x44: #D
0x45: #E
0x46: #F
0x47: #G
0x48: #H
0x49: #I
0x4a: #J
0x4b: #K
0x4c: #L
0x4d: #M
0x4e: #N
0x4f: #O
0x50: #P
0x51: #Q
0x52: #R
0x53: #S
0x54: #T
0x55: #U
0x56: #V
0x57: #W
0x58: #X
0x59: #Y
0x5a: #Z
0x5b: #[
0x5c: #\
0x5d: #]
0x5e: #^
0x5f: #_
0x60: #`
0x61: #a
0x62: #b
0x63: #c
0x64: #d
0x65: #e
0x66: #f
0x67: #g
0x68: #h
0x69: #i
0x6a: #j
0x6b: #k
0x6c: #l
0x6d: #m
0x6e: #n
0x6f: #o
0x70: #p
0x71: #q
0x72: #r
0x73: #s
0x74: #t
0x75: #u
0x76: #v
0x77: #w
0x78: #x
0x79: #y
0x7a: #z
0x7b: #{
0x7c: #|
0x7d: #}
0x7e: #~
0x7f: #%7F

ただ、今日のウェブアプリの作り方からすると、タブや改行コードも含めて状態を保持して欲しいところでもあり、次のように location.href から hash を取り出せば解決しそうな気がするのですが、このようなアプローチをとっている解説が見つからないのはなぜだろう？

window.onhashchange = function() {
  var hash = firefox
    ? (location.href.split('#')[1] || '')
    : location.hash;  
}

参考にした情報などどなど。ただ、Firefox の仕様はどうなっているのかは分かりませんでした。

3arrows アップデート! カレンダーを利用できるようになりました。

2011-02-25T21:52:00.000+09:00

2月16日(水)、企業やチーム向けのプライベートマイクロブログ、3arrows をアップデートしました。アップデートの主な内容は次の通りです。

カレンダーの追加

新しい標準アプリケーションとして、カレンダーを追加しました。

カレンダーの表示画面では、自分のカレンダーの他、フォローしている他のユーザーのカレンダーもまとめて閲覧することができます。

個々のスケジュールの表示画面では、スケジュールの詳細情報を閲覧することができます。スケジュールの詳細情報にはマイクロブログと連携するハッシュタグや、@ 記法によりユーザーへのリンクを含めることもできます。また、スケジュールにはコメントを付けることもできますので、この機能により会議の参加者をコメントで募ったり、会議の議事録をコメントで付けることもできます。（日報のアプリケーションでも同様にハッシュタグや @ 記法を利用することができます。）

また、既に Google カレンダーを利用されている場合には、Google カレンダーをインポートすることもできます。（最大 5 つのカレンダーまで）

次の画像は「IT 勉強会」の Google カレンダーをインポートした例です。

なお、日報のアプリケーションと同様に、カレンダーにおけるスケジュールの作成やスケジュールへのコメント等は、全てマイクロブログに通知されます。そのため、ユーザーはマイクロブログを通じてスケジュールを確認したり、また、マイクロブログを起点として、スケジュールについてのコミュニケーションを取ることができるようになっています。

メニューの整理

アプリケーションの右上のメニューを整理しました。今後もタスク管理やファイル共有等のアプリケーション、マイクロブログの検索機能等の追加を見込んでいますので、段階的にメニューの整理を続けていきます。

全てのアプリケーションの更新をお願いします！

管理者の方は、コントロールパネルのアプリケーションタブから、全てのアプリケーションを更新してください。「更新する」リンクをクリックすると、アプリケーションを更新できます。「最新」と表示されれば更新の完了です。

3arrows では、引き続き α テストのユーザーを募集しています。サインアップの手続きはとても簡単です。数分ですぐに利用を始めることができます。企業や個人等、利用条件に制限はありませんので、この機会にぜひお試しください。

Amazon S3 でウェブサイトがホストできるようになったので移転してみた

2011-02-21T16:30:00.000+09:00

こんにちは。なかじまんです。

ずっととある VPS を利用していて、料金がもったいないなぁと思いつつも、過去に作ったコンテンツを破棄するのもなんだしなーと放置していたウェブサイトがあったのですが、なんと Amazon S3 でウェブサイトがホストできるようになったので、さっそく移転してみました。

移転元のサイト

Postal Search APIs & Solutions
http://developmentor.lrlab.to/postal/

移転で捨てたこと

Perl5 による CGI がいくつかあったのですが、この機会に削除しました。また、Apache 固有の .ht ファイルも削除しました(もちろん不可視であるべきファイルも削除しました)。ので、正しく表示されないページやデッドリンクがありますが、そこはご愛敬で。

バケットの作成と設定

developmentor.lrlab.to という新バケットを作りました。バケット名は CNAME と同じにしないとダメです。ここは今までと同じ。

バケットの設定

AWS Management Console からバケットのプロパティを開くと、Website タブが追加されています。ここで Enable のチェックを ON する。そんで Index Document: index.html、Error Document: 404.html とした。

Index Document には / や /foo/ や /foo/bar/ のときに表示するファイルを指定する。今までは XML が表示されてしまったが、これでウェブサイトっぽくなる。ちなみに /foo/bar など末尾の / を省略したとき bar がフォルダのときは、302 でリダイレクトするあたりもウェブサイトと同じ。

Error Document には、HTTP ステータスコードが 4xx のときに表示するファイルを指定する。指定したファイルはルートに置いておけばよい。Amazon S3 の仕様上は、400, 403, 404 が起こりうるが、ファイルは1つしか指定できない。ちょっと Amazon の手抜きっぽい気はするが、実質は 404 Not Found を表すファイルを追いておけば不自由ない。

ファイルのアップロード

移転元のサイトのファイルをアップロードしました。ここも今までと同じ。

移転先のサイト

Amazon S3 のエンドポイントは、今までと同じ↓と思いきや、これが違うのです。このエンドポイントは、いわゆる S3 として振る舞うもので、Website とは関係ないようです。

http://developmentor.lrlab.to.s3.amazonaws.com/postal/

構成上、そりゃそうかとも思えるし、いっしょにしてよとも思えるし。それで WebSite のエンドポイントは、特別に用意されたものがあり↓、今までと異なりました。しかも、選択した地域によって URL が違います。ありゃりゃ。

http://developmentor.lrlab.to.s3-website-us-east-1.amazonaws.com/postal/

DNS の設定

CNAME developmentor.lrlab.to
    developmentor.lrlab.to.s3-website-us-east-1.amazonaws.com

とすれば、おけ。

さようなら VPS

というわけで、次の更新のときには VPS を解約します。元々のアクセスはそれなりにありますが Amazon S3 の単価のほうが安いでしょう。また、気持ち的に管理主体が、自分から Amazon に移った気持ちになれるので、そこが気楽でいいかな。どうがんばったって第三者が悪さできることもないしね。

ちょう適当メモですが、参考になれば幸いです。

3arrows アップデート! 多数のご要望を受けて、マイクロブログをキーワード検索できるようにしました! ブラウザの検索バーにも対応してます!

2011-02-21T14:08:00.000+09:00

2月18日(金)、会社やチーム向けプライベートマイクロブログ 3arrows をアップデートしました。

マイクロブログのキーワード検索

ユーザーからの多数のご要望を受けて、マイクロブログをキーワード検索できるようにしました。

アプリの検索ボックスから検索

マイクロブログと各アプリの右上メニューに、検索ボックスを配置しました。キーワードを入力して、検索ボタンをクリックすると、マイクロブログを検索できます。

任意のキーワードのほか、ハッシュタグやユーザーID、文中の URL でも検索できます。

キーワード
#ハッシュタグ
@ユーザーID
http(s):// ...

なお、2月18日(金)からの投稿が検索対象になります。

ブラウザの検索バーから検索

Firefox 3、IE8、IE7 の検索バーから 3arrows のマイクロブログを直接検索できます。

アプリケーションのアップデートをお願いします。

管理者の方は、コントロールパネルのアプリケーションタブにアクセスして、各アプリケーションを更新してください。「更新する」リンクをクリックすると、アプリケーションを更新できます。「最新」と表示されれば、アップデートの完了です。

3arrows では αユーザーを募集しています。

3arrows では、αユーザーを募集しています。サインアップの手続きはとても簡単です。数分ですぐに利用を開始できます。会社や個人など利用条件に制限はありませんので、この機会にぜひご利用ください。

3arrows アップデート! ご登録のメールアドレスからメールを送信してマイクロブログに投稿できるようになりました!

2011-02-14T09:56:00.000+09:00

2月11日(金)、会社やチーム向けプライベートマイクロブログ 3arrows をアップデートしました。アップデートの主な内容は、次のとおりです。

メールからマイクロブログへの投稿

ご登録のメールアドレスから、メールを送信してマイクロブログに投稿できるようになりました。

次の例では、Google AdWords から 10,000 円分の無料クーポンが届いたので、そのメールをマイクロブログに投稿して、何か広告を出すかメンバーに聞いています。

投稿先のメールアドレスは、マイクロブログの右上メニューのツールから入手できます。

マイクロブログのリアルタイム性の向上

ブラウザでマイクロブログを開いている間、新着の投稿があれば、順々と表示するようになりました。もう更新の操作は必要ありません。

プラットフォームの性能向上

各アプリケーション (OpenSocial AppData) のデータ格納方法を見直して効率化することで、さらにパフォーマンスが向上しました。

アプリケーションの改善

日報アプリのいくつかの不具合を修正しました。

マイクロブログ、日報アプリのアップデートをお願いします。

管理者の方は、コントロールパネルのアプリケーションタブにアクセスして、各アプリケーションを更新してください。「更新する」リンクをクリックすると、アプリケーションを更新できます。「最新」と表示されれば、アップデートの完了です。

3arrows では、αユーザーを募集しています。サインアップの手続きはとても簡単です。数分ですぐに利用を開始できます。会社や個人など利用条件に制限はありませんので、この機会にぜひご利用ください。

3arrows のマイクロブログと日報アプリを通じて、日報を中心としたコラボレーション、チームの知識や問題意識の共有を促進しよう!

2011-02-10T20:58:00.000+09:00

プライベートマイクロブログ 3arrows は、マイクロブログと連携する日報アプリも提供しています。

日報は、上司への報告、チームへの共有という一方通行な関わりになりがちですが、マイクロブログと日報の組み合わせにより、マイクロブログを通じて、日報を中心とした双方向のコラボレーション、知識や問題意識の共有といった様々な効果が期待できます。

マイクロブログと日報アプリの使い方(使われ方)をご紹介します。

日報を登録する

仕事が終わったら、日報アプリを使って、今日の業務内容や連絡事項を入力して、日報を登録します。

日報を共有する

日報を登録すると、日報の概要がマイクロブログに投稿されます。そして、マイクロブログを通じて、メンバーや上司は、日報の登録があったことを知ります。

日報にコメントする

メンバーや上司は、マイクロブログから日報を開き、日報の詳細を確認します。また、必要に応じて、日報にコメントをします。

日報のコメントを確認する

日報にコメントすると、そのコメントもマイクロブログに投稿されます。コメントの返信先は、日報を登録したユーザになります。ですので、マイクロブログへの返信を確認すれば、日報へのコメントをまとめて把握できます。さらにコメントを返すこともできます。

メールで日報を共有する

日報を登録すると、日報を登録したユーザをフォローしているメンバーや上司に対して、日報の内容をメールで通知します。例えば、上司は、報告を必要とするユーザさえフォローしておけば、マイクロブログを使わずとも、メールにより、日報を受け取ることができます。

3arrows - #日報 #2011/02/09 3arrows のテスト、不具合修正
なかじまんソフトウェア の Nobuhiro Nakajima さんからメッセージが届いています。
-- メッセージここから --
下記の不具合を修正しました。
(1) 日報、コメントの投稿の際にタグをエスケープするようにしました。
(2) コメントの表示順を最新日時順にしました。
(3) いくつかの JavaScript エラーを修正しました。
下記の改善をしました。
(1) 定期的にトークンをリフレッシュして、ログインの有効期限の間 API にアクセスできるようにしました。
出社時刻 10:30、退社時刻 18:00、勤務時間 06:30
-- メッセージここまで --
今後とも 3arrows をどうぞよろしくお願いいたします。
--
3arrows
http://www.3arrows.jp/
メッセージを送信したアプリケーション
http://nakajiman.3arrows.jp/a/@dailyreport

過去の日報を確認する

過去に登録した日報は、後からいつでも再確認できます。日報のコメントも確認できますので、情報がバラバラになることもありません。

いかがでしょうか。3arrows によって、さらに日報を活用してみませんか。

3arrows では、αユーザーを募集しています。サインアップの手続きはとても簡単です。数分ですぐに利用を開始できます。会社や個人など利用条件に制限はありませんので、この機会にぜひご利用ください。

3arrows のマイクロブログで、各メンバーの最新投稿を確認して、出社状況や今日の予定をまとめて把握しよう

2011-02-08T20:08:00.000+09:00

プライベートマイクロブログ 3arrows のマイクロブログは、時系列のタイムライン表示に加えて、各メンバーの最新投稿を確認 できます。

朝の 9:00 過ぎに、各メンバーの最新投稿を確認すると、各メンバーの出社状況や、今日の予定がまとめて確認できるでしょう。また、投稿がなければ寝坊や事件に巻き込まれているのかもしれません。

例えば、次のように表示されます。

この会社では、朝イチにラジオ体操をするようです。ミーティングで客先に直行している社員がいます。今日は、仕事が終わったら、社長がご馳走してくれるようです。

※この会社はフィクションであり、実在の人物・団体等とは一切関係がありません。(^_^;)

プライベートマイクロブログ 3arrows では、αユーザーを募集しています。サインアップの手続きはとても簡単です。数分ですぐに利用を開始できます。会社や個人など利用条件に制限はありませんので、この機会にぜひご利用ください。

3arrows アップデート! ユーザーからの多数のご要望を受けて、オリジナル画像をプロフィールアイコンに設定できるようにしました!

2011-02-05T20:23:00.000+09:00

2月4日(金)、会社やチーム向けマイクロブログ 3arrows をアップデートしました。

オリジナル画像によるプロフィールアイコンの設定

ユーザーからの多数のご要望を受けて、オリジナル画像をプロフィールアイコンに設定できるようにしました。マイクロブログの右メニューの設定リンクをクリックすると、プロフィール編集のページが開きます。

続けて、画像をアップロードするリンクをクリックして、オリジナル画像をアップロードしてください。オリジナル画像は自動リサイズしますが、あらかじめ 48x48 サイズのものをアップロードすることをお勧めします。

なお、3arrows は 管理者があらゆることをコントロールできること を原則に掲げて取り組んでいます。この原則に変わりはなく、管理者の方は、今までどおり、コントロールパネル上で各メンバーのプロフィールアイコンを上書き変更できます。

また、アップロードした画像は、同じ会社やチームのメンバーしか閲覧できないように制限しています。

マイクロブログのサムネイル表示

マイクロブログのサムネイル表示対象を拡大しました。赤字が追加分です。

ドキュメント： PDF, Word, Excel, Power Point, Cacoo, SlideShare, JPEG, GIF, PNG
動画： Ustream, YouTube, Vimeo
写真： Flickr, Picasa, 壁紙.com, フォト蔵, TwitPic, Yfrog
地図： Google Maps
ニュース： Teckwave, Web 担当者 Forum, CNET Japan, ITpro
レビュー： DIME, ブクログ, coneco.net, MonoColle
コラム： ダイヤモンド・オンライン
グルメ： ホットペッパー, ぐるなび, 食べログ
クーポン： ポンパレード, グルーポン, Piku
ファッション： ママ・マーケット, BUYMA, ホットペッパービューティー, ZOZOTOWN
通販： アイテムポスト, カラメル
自動車： グーネット, グーワールド, グーバイク
Q & A： 教えて! goo
ブログ： goo ブログ, Blogger
結婚： ウエディングパーク
コミュニティ： cooboo
エンタメ： 講談社コミックプラス

3arrows は αテストのユーザーを募集しています。サインアップの手続きはとても簡単です。数分ですぐに利用を開始できます。会社や個人など利用条件に制限はありませんので、この機会にぜひご利用ください。

Twitter 上の情報収集、チーム内共有、発信までのワークフローを支援するツイートインアプリをアップデートしました!

2011-02-04T10:59:00.000+09:00

2月2日、マイクロブログ 3arrows の「ツイートイン」アプリをアップデートしました。

「ツイートイン」アプリは、ソーシャルメディア Twitter からの情報収集、チーム内共有、発信までのワークフローを支援することを目的としたアプリケーションです。

アプリケーションの特徴や使い方、導入方法は、ソーシャルメディアの情報収集、チーム内共有、発信までのワークフローを支援するツイートインアプリのご紹介をご覧ください。

アップデートの内容は、次のとおりです。

ウォッチ対象の並び替え

マウスのドラッグ＆ドロップで、ウォッチ対象を並び替えできるようにしました。

重複ハッシュタグの除去

ハッシュタグが重複しないようになりました。ツイートをマイクロブログで共有するとき、ウォッチ条件をハッシュタグとして付与していましたが、すでにツイートにハッシュタグが含まれるときは、付与しないようにしました。

アプリ名ハッシュタグの追加

ツイートをマイクロブログで共有するとき、「#ツイートイン」ハッシュタグを付与するようにしました。

3arrows は αテストのユーザーを募集しています。サインアップの手続きはとても簡単です。数分ですぐに利用を開始できます。会社や個人など利用条件に制限はありませんので、この機会にぜひご利用ください。もちろん、α版の期間中は無料でご利用いただけます。

ソーシャルメディアの情報収集、チーム内共有、発信までのワークフローを支援するツイートインアプリのご紹介

2011-01-29T08:39:00.002+09:00

会社やチーム向けマイクロブログ 3arrows の可能性を証明する活動として、3arrows チーム内では、さまざまなアプリケーションの開発を試みています。

今回はその成果のひとつである「ツイートイン」アプリを紹介します。「ツイートイン」アプリは、ソーシャルメディアの情報収集、チーム内共有、発信までのワークフローを支援することを目的としたアプリケーションです。ソーシャルメディアは Twitter を題材としています。

「ツイートイン」アプリは、様々な条件で Twitter 上のツイートをウォッチできます。ダッシュボードスタイルを採用して、ひとつのページ内でまとめて情報収集できます。次の画面イメージは、Twitter 上の自社ブランドに対するツイートをウォッチしている様子を表しています。

自社ブランドに対する質問や苦情、ファン、有益な情報を見つけたときは、そのツイートを引用する形でマイクロブログに投稿して、社内で情報共有できます。そして、続けてマイクロブログで、そのツイートへの対応をディスカッションして、その結果をマイクロブログから直接 Twitter へ発信できます。

さらに、見つけたツイートのユーザやハッシュタグからマイクロブログを検索して、過去の話題を引き出すこともできます。例えば、あるユーザの自社ブランドに対する発言が、ネガティブからポジティブに変わったといった変化を追跡できる可能性が高まります。

「ツイートイン」アプリは、使えば使うほど (マイクロブログに投稿が蓄積されるほど) 効果が高まる仕組みとなっていますので、ぜひ使ってみてください。ご要望がありましたらぜひフィードバックをお願いします。作者としては公式アプリに格上げしたい意気込みです。

詳しく機能と使い方をご紹介します。

ウォッチ対象の追加

ツイートのウォッチ対象は、①ユーザ、②リスト、③キーワードの 3とおりで、フォームから簡単に追加できます。

ウォッチの内容とマイクロブログでの共有

ウォッチ対象は、緑のボックスで表示し、最新 20件のツイートを表示します。また、新しいツイートが見つかると、メッセージでお知らせします。

① タイトルは、ウォッチ対象を表し、クリックすると Twitter の該当ページを開きます。
② ×アイコンをクリックすると、ウォッチ対象を削除します。
③ (後述)
④ 同じ対象をウォッチしているフォロワーをアイコンで表します。
⑤ (後述)
⑥ ユーザのアイコンをクリックすると、Twitter のプロフィールページを開きます。
⑦ 日時をクリックすると、Twitter のツイートページを開きます。

③ 共通リンクをクリックすると、ツイートの URL と内容をマイクロブログに投稿します。このとき、ウォッチ対象をハッシュタグとして加えます。また、ツイートの内容に URL が含まれるときはサムネイル画像を表示します。

⑤ ユーザ名やハッシュタグをクリックすると、該当ユーザやハッシュタグでマイクロブログを検索します。

ツイートボタンをクリックすると、マイクロブログの投稿内容をそのまま Twitter に投稿できます。

「ツイートイン」アプリは、3arrows の管理者権限があれば、特別な条件なくいつでも導入できます。「ツイートイン」アプリの導入手順は、次のとおりです。

(1) 次のページから tweet-in.xml ファイルをダウンロードしてください。

https://sites.google.com/a/socialprise.jp/3arrows-jp/downloads

(2) 3arrows にログインし、コントロールパネルのアプリケーションタブを選択します。
(3) アプリケーションを追加するボタンをクリックし、テンプレートアプリを作成します。
(4) テンプレートアプリをクリックして、アプリケーションの情報を表示します。
(5) 編集するボタンをクリックして、オンラインエディタを開きます。
(6) tweet-in.xml ファイルの内容をそのまま貼り付けて、保存ボタンをクリックします。
(7) 実行ボタンをクリックすると、「ツイートイン」アプリを実行できます!

導入手順は少し敷居が高くなっています。もしも分からないことがありましたら、お気軽にお問い合わせください。導入をお手伝いします。

本日 (1/28) より 3arrows は、試用キーなしで、どなたでもすぐに試用できるようになりました!

2011-01-28T13:18:00.002+09:00

会社やチーム向けマイクロブログ 3arrows は、α版の提供開始からちょうど 1ヵ月が経過しました。そして、本日 (1/28) より 3arrows は、試用キーなしで、どなたでもすぐに試用できる ようになりました。

サインアップの手続きはとても簡単です。数分ですぐに利用を開始できます。会社や個人など利用条件に制限はありませんので、この機会にぜひご利用ください。もちろん、α版の期間中は無料でご利用いただけます。

3arrows のサインアップは、トップページ右の試用するリンクからお願いします。

http://www.3arrows.jp/

任意のメールアドレスでサインアップできます。後は、ページの案内に従って、手続きをお願いします。

この 1ヵ月の間、多くのフィードバックを頂き、いろいろ学ぶことができました。まだまだ、頂いた要望をすべて実現してお届けできていませんが、1つ1つ丁寧に対応していきますので、今後もご支援よろしくお願いします。

3arrows アップデート! ユーザーからのご要望を受けて、広報活動を支援するツイートボタンの設置、各ユーザによるプロフィールの編集を追加しました

2011-01-28T12:36:00.002+09:00

本日(1/28)、会社やチーム向けマイクロブログ 3arrows をアップデートしました。今回のアップデートでは、ユーザーからのご要望を受けて、2つの機能を追加しました。

(1) 広報活動を支援するツイートボタンの設置

マイクロブログの各投稿にツイートボタンを設置しました。ツイートボタンをクリックすると、マイクロブログの投稿内容をそのまま Twitter に投稿できます。

社内メンバーとマイクロブログを使って Twitter の告知内容をディスカッションしながら下書きを作り、メンバーの承認を得て、ツイートボタンで Twitter へ投稿するといった流れの使い方ができるようになりました。

社内やチームの広報活動にご活用ください。

(2) 各ユーザによるプロフィールの編集

各ユーザが直接プロフィールを編集できるようにしました。マイクロブログの右メニューの設定リンクをクリックすると、自己プロフィールを編集できます。

3arrows は「管理者があらゆることをコントロールできること」を原則に掲げて取り組んでいますが、自己紹介やアイコンという項目は、ユーザの裁量によって決定したいこともあることを学びました。

もちろん、引き続き、管理者による各ユーザのプロフィール編集はサポートしますので、管理者がコントロールできる範囲に変わりはありません。

マイクロブログ、チェックイン、日報アプリのアップデートをお願いします。

管理者の方は、コントロールパネルのアプリケーションタブにアクセスして、各アプリケーションを更新してください。「更新する」リンクをクリックすると、アプリケーションを更新できます。「最新」と表示されれば、アップデートの完了です。

3arrows は αテストのユーザーを募集しています。もちろん、テストの期間中は無料でご利用いただけます。

3arrows アップデート! お客様のドメイン ID をサブドメインとして、よりセキュアな環境でご利用いただけるようになりました!

2011-01-24T10:43:00.002+09:00

1月21日(金)、会社やチームなどプライベート向けマイクロブログ／コラボレーションサービス 3arrows をアップデートしました。

(1) 各ドメイン ID のサブドメイン化

今回のアップデートにより、お客様のドメイン ID がサブドメインとなり、よりセキュアな環境でご利用いただけるようになります。

従来のログイン URL
http://www.3arrows.jp/a/{お客様のドメイン ID}/

新しいログイン URL
http://{お客様のドメイン ID}.3arrows.jp/a/

今回のアップデート以降、従来の URL は新しい URL にリダイレクトされます。そのため、お客様による対応は特に必要ありません。

(2) マイクロブログ、チェックイン、日報アプリの改善

各アプリにおいて、エラー検出とメッセージの内容を見直し、万が一エラーが発生したとき、お客様がそのエラーの内容を把握しやすくなりました。

(3) マイクロブログのサムネイル表示

マイクロブログのサムネイル表示対象を拡大しました。赤字が追加分です。

ドキュメント： PDF, Word, Excel, Power Point, Cacoo, SlideShare, JPEG, GIF, PNG
動画： Ustream, YouTube, Vimeo
写真： Flickr, Picasa, 壁紙.com, フォト蔵, TwitPic, Yfrog
地図： Google Maps
ニュース： Teckwave, Web 担当者 Forum, CNET Japan
レビュー： DIME, ブクログ, coneco.net, MonoColle
コラム： ダイヤモンド・オンライン
グルメ： ホットペッパー, ぐるなび, 食べログ
クーポン： ポンパレード, グルーポン, Piku
ファッション： ママ・マーケット, BUYMA, ホットペッパービューティー, ZOZOTOWN
通販： アイテムポスト, カラメル
自動車： グーネット, グーワールド, グーバイク
Q & A： 教えて! goo
ブログ： goo ブログ, Blogger
結婚： ウエディングパーク
コミュニティ： cooboo
エンタメ： 講談社コミックプラス

マイクロブログ、チェックイン、日報アプリのアップデートとお願いします。 管理者の方は、コントロールパネルのアプリケーションタブにアクセスして、各アプリケーションを更新してください。「更新する」リンクをクリックすると、アプリケーションを更新できます。「最新」と表示されれば、アップデートの完了です。

3arrows では、α版の試用ユーザを幅広く募集しています。試用に特別な条件はありません。ご希望の方に試用キーを発行する形をとっています。試用をご希望の方は 3arrows トップの試用を申し込むからお申し込みください。

3arrows アップデート! ログイン有効期限を設定できます! Google Reader からマイクロブログへの投稿など、マイクロブログと日報アプリを改善しました!

2011-01-12T13:41:00.000+09:00

本日(1/12)、会社やチームなどプライベート向けマイクロブログ／コラボレーションサービス 3arrows をアップデートしました。

(1) ログインの有効期限の指定

ログインの有効期限を指定できるようにしました。1時間、3時間、6時間、12時間、1日、3日、7日から選択できます。初期値は 1日です。コントロールパネルのドメインタブから指定できます。

(2) マイクロブログへ Google Reader からの共有

Google Reader で読んでいるブログ記事を、その場で直接マイクロブログに投稿できるようにしました。マイクロブログの右上のメニューからツールをクリックすると、Google Reader のカスタムリンクの設定が表示されますので、

Google リーダー設定の送信先タブを開いて、3arrows のカスタムリンクを作成してください。

カスタムリンクを作成すると、ブログ記事のメニューの送信先に 3arrows が追加されます。この 3arrows をクリックすると、このブログ記事をマイクロブログに投稿できます。

(3) マイクロブログのサムネイル表示

マイクロブログのサムネイル表示対象を拡大しました。赤字が追加分です。

ドキュメント： PDF, Word, Excel, Power Point, Cacoo, SlideShare, JPEG, GIF, PNG
動画： Ustream, YouTube
写真： Flickr, Picasa, 壁紙.com, フォト蔵, TwitPic, Yfrog
地図： Google Maps
ニュース： Teckwave, Web 担当者 Forum, CNET Japan
レビュー： DIME, ブクログ, coneco.net, MonoColle
コラム： ダイヤモンド・オンライン
グルメ： ホットペッパー, ぐるなび, 食べログ
クーポン： ポンパレード, グルーポン, Piku
ファッション： ママ・マーケット, BUYMA, ホットペッパービューティー, ZOZOTOWN
通販： アイテムポスト, カラメル
自動車： グーネット, グーワールド, グーバイク
Q & A： 教えて! goo
ブログ： goo ブログ, Blogger
結婚： ウエディングパーク
コミュニティ： cooboo
エンタメ： 講談社コミックプラス

(4) 日報の改善

日報のメールに出社時刻、退社時刻、勤務時間を含め、かつ読みやすく改善しました。また、いくつかの不具合を修正しました。

(2) と (4) のアップデートを反映するには、コントロールパネルで、各アプリケーションを更新する必要があります。管理者の方は、コントロールパネルのアプリケーションタブにアクセスして、各アプリケーションを更新してください。「更新する」リンクをクリックすると、アプリケーションを更新できます。「最新」と表示されれば、アップデートの完了です。

3arrows では、α版の試用ユーザを幅広く募集しています。試用に特別な条件はありません。ご希望の方に試用キーを発行する形をとっています。試用をご希望の方は 3arrows トップの試用を申し込むからお申し込みください。

3arrows アップデート! 社内マイクロブログでネットの情報を素早く簡単に視覚的に共有する機能を強化しました!

2011-01-05T17:13:00.000+09:00

本日(1/5)、企業向けマイクロブログ／コラボレーションサービス 3arrows をアップデートし、社内マイクロブログでネットの情報を、素早く、簡単に、視覚的に、共有する機能を強化しました。

今までは、マイクロブログの投稿内容に Google Maps や YouTube の URL を含めると、そのサムネイル画像(小さな画像)を表示できました。今回のアップデートではさらに、このサムネイル画像の表示対象を大きく拡大しました。

サムネイル画像の表示対象は、次のとおりです。マイクロブログの投稿内容に、次のページやコンテンツの URL を含めると、サムネイル画像を表示します。

ドキュメント： PDF, Word, Excel, Power Point, Cacoo, SlideShare
動画： Ustream, YouTube
写真： Flickr, Picasa, 壁紙.com, フォト蔵, TwitPic, Yfrog
地図： Google Maps
ニュース： Teckwave, Web 担当者 Forum
レビュー： DIME, ブクログ, coneco.net, MonoColle
グルメ： ホットペッパー, ぐるなび, 食べログ
クーポン： ポンパレード, グルーポン, Piku
ファッション： ママ・マーケット, BUYMA, ホットペッパービューティー, ZOZOTOWN
通販： アイテムポスト, カラメル
自動車： グーネット, グーワールド, グーバイク
Q & A： 教えて! goo
ブログ： goo ブログ
結婚： ウエディングパーク
コミュニティ： cooboo
エンタメ： 講談社コミックプラス

さらに、ブックマークレットを使うと、社内やチームで、ネットの情報を、素早く、簡単に、視覚的に、共有することができます。

社内やチームで共有したいページを見つけたら、ブラウザのブックマークレット (Share on 3arrows ボタン) をクリックします。すると、マイクロブログの投稿内容に、ページのタイトルと URL が入力された状態になります。続けて、投稿内容を編集して共有するボタンをクリックすると、その投稿内容に加えてサムネイル画像も合わせて共有されます。

ブックマークレットは、マイクロブログのツールメニューから入手できます。ブラウザのブックマークバーやブックマークに登録してご利用ください。

以上のアップデートを反映するには、コントロールパネルで、各アプリケーションを更新する必要があります。管理者の方は、コントロールパネルのアプリケーションタブにアクセスして、各アプリケーションを更新してください。「更新する」リンクをクリックすると、アプリケーションを更新できます。「最新」と表示されれば、アップデートの完了です。

企業向けマイクロブログ／コラボレーションサービス 3arrows では、α版の試用ユーザを幅広く募集しています。試用に特別な条件はありません。ご希望の方に試用キーを発行する形をとっています。試用をご希望の方は 3arrows トップの試用を申し込むからお気軽にお申し込みください。お待ちしています。

Tokyo GTUG Boot Camp 2010 OpenSocial Hands-on (G409) 資料

2010-09-29T07:30:00.000+09:00

おはようございます。Nobuhiro Nakajima です。

Tokyo GTUG Boot Camp 2010 OpenSocial Hands-on (G409) の資料を公開します。

OSDE と OpenSocial jQuery で作る簡単ソーシャルアプリ (1/3)

http://slidesha.re/arIcA6 (スライド)

@yoichiro さんによる OSDE プラグインのインストールから OSDE ウィザードを使った OpenSocial アプリの作成と実行の紹介スライドです。

OSDE と OpenSocial jQuery で作る簡単ソーシャルアプリ (2/3)

http://bit.ly/bootcamp2010_os (スライド)

http://nakajiman.s3.amazonaws.com/bootcamp2010/favorite-books.zip (ソースコード)

@webos_goodies さんによる favorite-books アプリという実例による OpenSocial Java Script API の使い方の紹介スライドとソースコードです。

OSDE と OpenSocial jQuery で作る簡単ソーシャルアプリ (3/3)

http://slidesha.re/bER2EM (スライド)

http://nakajiman.s3.amazonaws.com/bootcamp2010/favorite-books-opensocial-jquery.zip (ソースコード)

@nakajiman による OpenSocial jQuery の紹介スライドと、上記 Favorite-books アプリを OpenSocial jQuery で書きかえたソースコードです。

#MA6 Mashup Caravan - Social Platform Talks の場で必死に作品応募のお願いすることになりました

2010-09-14T19:53:00.000+09:00

こんばんは。Nobuhiro Nakajima です。

Mashup Awards 6 の恒例イベントである Mashup Caravan でお話する機会をいただきました。

2010/9/22(水) #MA6 Mashup Caravan - Social Platform Talks
http://atnd.org/events/7860/

わたしの発表タイトルは「Google Apps を Social にする OpenSocial Pages (；゜○゜) お願いですから応募してください」です。

当社は Mashup Awards 6 の協力会社 (API 提供企業) として OpenSocial Pages というオープンソース製品（テクニカルプレビュー版) を提供しています。が、しかし、超ニッチでマイナーなだけに OpenSocial Pages を使った応募作品が 0件となることを恐れています。あー考えるだけでコワイコワイ。悪夢をみそうです。

ですので、この発表の中で OpenSocial Pages を使って、どんな作品を応募して欲しいかそのお願いをさせてください。また、副賞の候補もお伝えできればと考えています。

また、同じような悩みを抱えている協力会社を(勝手に)代表して、Mashup Awards 5 の結果から協力会社と賞の関係を再確認しつつ、なんらかの賞を受賞するための裏道を探ってみたいと考えています。

続けて Mashup Camp というハッカソン形式のイベントにも参加します。わたしの専門分野である OpenSocial アプリケーションを開発してみたいという方は、ぜひご参加ください。わたしもチューターもしくは開発者として参加します。いっしょに何かを開発してもいいですね。

2010/9/25(土) #MA6 Mashup Camp - Social Platform Day
http://atnd.org/events/7862/

(わたしはともかく)スピーカーたちは、それぞれの分野の第一線で活躍する方々ばかりです。ぜひ Mashup Caravan と Mashup Camp に遊びにきてくださいね。

Mashup Awards 6 は、開発者がチャレンジするイベントともいえますが、裏側では協力会社もチャレンジしています。協力会社としては、作品応募があり、その応募に対して賞をあげたいと願っています。

(；゜○゜) お願いですから応募してください。切実なお願いです。

OpenSocial Pages の最新ソースコード 0.9.3 を公開しました

2010-08-16T11:53:00.000+09:00

こんにちは。Nobuhiro Nakajima です。

OpenSocial Pages の最新ソースコードを公開しました。Downloads から opensocial-pages-0.9.3.zip をダウンロードしてください。

Google Apps Marketplace で公開している OpenSocial Pages for Google Apps と同じソースコードになっています。ですので、次のとおり手を加えて、自分自身の環境で期待どおり動作するように、改造する必要があります。

web.xml

Google Data APIs に 2-Legged OAuth でアクセスするための Consumer Key と Secret を指定してください。Consumer Key と Secret は Google Apps Perimer の Advanced tools か Google Apps Marketplace で手に入ります。

<context-param>
    <param-name>consumerKey</param-name>
    <param-value>(Your Consumer Key)</param-value>
</context-param>
<context-param>
    <param-name>consumerSecret</param-name>
    <param-value>(Your Consumer Secret)</param-value>
</context-param>

PermissionFilter.java

OpenID Federated Login (Google Apps) を UserService を使って実装してあります。Google Apps Perimer で Google Apps と連携するときは、AppEngine の認証を Google Acount に切り替えて、Google Apps ドメインと関連付け、UserService を使っている個所を調整すればよいでしょう。

Google Apps や Google Apps Marketplace 関連の実装の参考になれば幸いです。

OpenSocial Pages は osapi.http に対応しました。gadgets.io.makeRequest 以上の大きなメリットがあります。

2010-08-11T11:02:00.000+09:00

こんにちは。Nobuhiro Nakajima です。

OpenSocial Pages for Google Apps で osapi.http API を使えるようにしました。

osapi.http は gadgets.io.makeRequest メソッドに相当するものです。さらに osapi.http は、バッチリクエストにも対応するため、gadgets.io.makeRequest メソッド以上のメリットがあります。

1回の API 呼び出しで、複数の外部サーバにまとめてリクエストできます
1回の API 呼び出しで、SNS のデータと外部サーバのデータをまとめてリクエストできます

次の例は Viewer のプロフィール情報と YouTube からマイ動画のリストを、まとめて取得するものです。

function init() {
  var batch = new osapi.newBatch()
    .add('viewer', osapi.people.getViewer())
    .add('videos', osapi.http.get({
      href: 'http://gdata.youtube.com/feeds/api/users/nakajiman1/uploads?alt=json',
      format: 'json'
    }));
  batch.execute(function(r) {
    gadgets.log(r.viewer.displayName); // Nobuhiro Nakajima
    gadgets.log(r.videos.status); // 200
    gadgets.log(r.videos.content); //  Object { version="1.0",  more... }
  });
}
gadgets.setLogLevel(gadgets.log.INFO);
gadgets.util.registerOnLoadHandler(init);

従来は Viewer のプロフィール情報は opensocial.newFetchPersonRequest メソッドと gadgets.io.makeRequest メソッドを別々に呼び出して、非同期のコールバックのタイミングを制御して、レスポンスをまとめる必要がありました。

が、osapi.http を使えばそんな必要はなく、Gadgets(=Apps) のソースコードをシンプルにより分かりやすく記述することができます。

OpenSocial Pages がサポートする osapi.http のオプションやフィールドは、OpenSocial Pages ドキュメントの Core Gadgte Spec と Core Data Spec に記載しておきました。

OpenSocial Pages のガジェットは HTML5 で動作することを Pacman で確認してみた

2010-08-02T18:05:00.000+09:00

こんばんは。Nobuhiro Nakajima です。

OpenSocial Pages のガジェット(=アプリ)は HTML5 で動作します。そのことを確認するために HTML5 Pacman を OpenSocial Pages で動かしてみました。もちろん、次の動画のとおり、Audio も含めてバッチリ動きます。

HTML5 Pacman を OpenSocial Pages のガジェットに移植するにあたり、次のことをしました。

index.html と packman.js をガジェットXMLにまとめる
Audio ファイル (ogg and mp3) を Amazon S3 に置く
modernizr-1.5.min.js を OpenSocial Pages の libs を参照する
Audio On/Off の設定を、次のとおり、User Preference 経由にする

var prefs = new gadgets.Prefs();

// return localStorage["soundDisabled"] === "true";
return prefs.getBool("soundDisabled");

// localStorage["soundDisabled"] = !soundDisabled();
prefs.set("soundDisabled", !soundDisabled());

OpenSocial Pages は、ガジェットをフレームウィンドウ(iframe)で表示せず、ウェブページにインラインで直接表示する仕組みを採用しています。そして、そのウェブページのドキュメントタイプは HTML5 としています。

そのため OpenSocial Pages では Flash に加えて、HTML5 Pacman のように HTML5 ベースのリッチなアプリを動かすことができます。また、フレームウィンドウ(iframe)の制約を受けないため、アプリは、キーボードのイベントを活用することができます。

アプリの開発者を絶対的に信頼する(もしくは信頼できると検証できる)なら OpenSocial Pages をゲームやエンタメのプラットフォームとして使うことも十分考えられますね。

OpenSocial Pages ならここまで(まだまだ)できる Status Update Gadget をアップデートしました

2010-08-02T13:42:00.000+09:00

こんにちは。Nobuhiro Nakajima です。

OpenSocial Pages 向けの Status Update Gadget をアップデートしました。

Gadget のソースコードは、Downloads から入手できます。status-update.xml をダウンロードして、OpenSocial Pages の Control Panel から追加すれば、今すぐ動作を体験できます。

OpenSocial Pages を使うと、PC に加えて、iOS や Android のモバイルブラウザで動作する Twitter のようなタイムラインベースのソーシャルアプリを自らの手で、手軽に作成できます。

Status Update Gadget は OpenSocial Pages でここまでできる(まだまだできる)... そのことを証明するための実例です。

Login

OpenSocial Pages は Google Apps の認証を求めます。OpenSocial Pages は Google Apps と連携することで、OpenSocial Gadget (=ソーシャルアプリ) が Google Apps ドメインのユーザとグループをソーシャルグラフとして扱うことができる仕組みとなっています。

Home

Status Update Gadget の Home View です。Viewer と Viewer がフォローしたユーザのアクティビティをタイムラインで表示します。新着の Status があればライムラインにリアルタイム(ポーリング)で表示します。テキストを入力して Share ボタンをクリックすると、アクティビティを送信します。

アクティビティ中のユーザを表す @ と URL を表す http(s):// は、プログラムが解釈して、リンクを自動的に生成します。View のアクティビティは Delete リンクで削除でき、それ以外のアクティビティは Reply リンクで返信できます。

OpenSocial Pages は Viewer の Friends を Following と位置付けます。そのため、フォローしたユーザのアクティビティは、次のように Activities API を使って取得します。

osapi.activities.get({ userId: '@viewer', groupId: '@friends'})

Mentions

Status Update Gadget の Mentions View です。Google Apps ドメインの全ユーザからの返信(または言及)のあったアクティビティをタイムラインで表示します。

OpenSocial Pages は、返信(または言及)を表す取得範囲を定義しています。そのため、Viewer に返信(または言及)したアクティビティは、次のように Activities API を使って取得します。

osapi.activities.get({ userId: '@viewer', groupId: '@mentions' })

Profile

Status Update Gadget の Profile View です。指定したユーザのアクティビティをタイムラインで表示します。Follow ボタン(または Unfollow ボタン)をクリックすると、そのユーザをフォロー(または解除)できます。

OpenSocial Pages は Viewer の Friends を Following と位置付けます。そのため、ユーザをフォロー(または解除)するときは、次のように Peopel API を使います。

osapi.people.create({ userId: '@viewer', groupId: '@friends', person: { id: user.id } })

osapi.people.delete({ userId: '@viewer', groupId: '@friends', person: { id: user.id } })

Following

Status Update Gadget の Following View です。指定したユーザがフォローしているユーザを表示します。このとき、各ユーザの最新のアクティビティも合わせて表示します。

OpenSocial Pages は Viewer の Friends を Following と位置付けます。そのため、指定したユーザをフォローしているユーザは、次のように Peopel API を使って取得します。

osapi.people.get({ userId: user.id, groupId: '@friends' })

Groups

Status Update Gadget は、各 View のヘッダで、Group の選択ボックスを表示し、Groups View に移動するようにしています。

OpenSocial Pages は Google Apps のドメインを Owner、そのグループを Owner の Group に位置付けます。そのため、Google Apps ドメインのグループは、次のように Groups API を使って取得します。

osapi.groups.get({ userId: '@owner' })

Domain

Status Update Gadget の Groups View です。Google Apps ドメインの全ユーザのアクティビティをタイムラインで表示します。

OpenSocial Pages は Google Apps のドメインを Owner、そのユーザを Owner の Friends に位置付けます。そのため、Google Apps ドメインの全ユーザのアクティビティは、次のように Activities API を使って取得します。

osapi.activities.get({ userId: '@owner', groupId: '@friends'})

Domain Members

Status Update Gadget の Members View です。Google Apps ドメインの全ユーザを表示します。このとき、このとき、各ユーザの最新のアクティビティを表示します。また、各ユーザをフォローしているかどうかも合わせて表示します。

OpenSocial Pages は Google Apps のドメインを Owner、そのユーザを Owner の Friends に位置付けます。そのため、Google Apps ドメインの全ユーザは、次のように People API を使って取得します。

osapi.people.get({ userId: '@owner', groupId: '@friends' })

Group

Status Update Gadget の Groups View です。選択したグループに参加するユーザのアクティビティをタイムラインで表示します。

OpenSocial Pages は Google Apps のドメインを Owner、そのグループを Owner の Group に位置付けます。そのため、指定したグループのアクティビティを取得するときは、Activities API に対して、次の取得範囲を指定します。

osapi.activities.get({ userId: '@owner', groupId: group.id })

Group Members

Status Update Gadget の Members View です。選択したグループに参加するユーザを表示します。このとき、各ユーザの最新のアクティビティを表示します。また、各ユーザをフォローしているかどうかも合わせて表示します。

OpenSocial Pages は Google Apps のドメインを Owner、そのユーザを Owner の Friends に位置付けます。そのため、そのため、指定したグループのユーザを取得するときは、People API に対して、次の取得範囲を指定します。

osapi.people.get({ userId: '@owner', groupId: group.id })

OpenSocial Pages は Google Apps (スタンダードも可) をお持ちであれば、何も準備することなしにすぐ使い始めることができます。この機会にぜひお試しください。また OpenSocial Pages の応用にご関心がございましたら Nobuhiro Nakajima までお問い合わせください。熱烈サポートいたします。

Status Update と Check-in アプリの連携で見る OpenSocial Pages の意義

2010-07-12T10:41:00.000+09:00

おはようございます。Nobuhiro Nakajima です。

前のエントリでは、今どんな仕事をしているか？ What are you working on? を Twitter のようなライムラインで共有する OpenSocial Pages 向けの Status Update アプリ (サンプル) を紹介しました。

今回は、さらに一歩進めて、今どこで仕事をしているか？を Foursquare のような位置情報で共有する OpenSocial 向けの Check-in アプリ (サンプル) を紹介します。

Check-in アプリを実行すると、今どこにいるかその位置を検出して地図を表示します。そして、コメントを入力して Check-in ボタンをクリックすると、コメントと位置情報を保存します。保存したコメントと位置情報は、Google Apps のユーザ間で共有され、今どこでどんな仕事をしているか、地図上のマーカーと吹き出しで確認できます。

地図の表示は Google Maps API、位置情報の検出は HTML5 の Geolocation API を使っていますので、多くのスマートフォンで動作しますし、PC でも動作するでしょう。

また Check-in すると、次のように、Status Update アプリのタイムラインに、コメントと位置情報を表示しますので、Check-in の内容に対して、タイムライン上でコミュニケーションすることもできます。

さらに、そのコメントには、Check-in アプリへのリンクも含みます。リンクをクリックすると、Check-in アプリを起動して、そのユーザがコメントした位置の地図を表示しますので、そのユーザに何かをお願いしたり、近くにいるユーザを探すこともできます。

OpenSocial Pages は Google Apps の Gmail と連携した Messages API も備えていますので、メールによる通知を Check-in アプリに追加して、メールの中から Status Update アプリや Check-in アプリを起動するといった使い方もできるでしょう。

このように OpenSocial Pages は、小さなアプリがお互いに連携して、それぞれの機能を補う構成をとれるのが大きな特徴です。多機能なアプリをあらかじめ作るではなく、そのときに必要となったことを、そのときに小さく作る、もう存在する機能は連携して使う、そして小さく改善し続ける... といった今までとは異なる新しいサイクルを生み出す手助けを目標としています。

Check-in アプリのガジェット XML は、次のサイトから入手できます。check-in.xml をダウンロードしてください。

OpenSocial Pages Downloads

http://sites.google.com/a/lrlab.to/opensocial-pages/downloads

OpenSocial Pages は Google Apps MarketPlace から Google Apps に直接インストールできます。OpenSocial Pages を Google Apps にインストールするときは、次のボタンをクリックしてください。

Status Update アプリとスマートフォンから見る OpenSocial Pages の意義、欠点と課題

2010-07-07T17:42:00.000+09:00

こんにちは。Nobuhiro Nakajima です。

OpenSocial Pages 向けの Status Update アプリ (サンプル) をアップデートしました。このアプリは今どんな仕事をしているか？ Twitter のようなタイムラインで共有しようというものです。

先日ご紹介した Tweet アプリ (サンプル) は jQTouch を使用した iPhone 専用のアプリでしたが、Status Update アプリは、PC も含めて iPhone、iPad、Android などのスマートフォンでも動作するようにしました。

Status Update アプリ (サンプル) のガジェットXML は、次のサイトから入手できます。status-update.r146.xml をダウンロードしてください。

OpenSocial Pages Downloads
http://sites.google.com/a/lrlab.to/opensocial-pages/downloads

また OpenSocial Pages for Google Apps をインストールすると、既定のガジェット (=ページ) として追加するようにしました。OpenSocial Pages を Google Apps にインストールするときは、次のボタンをクリックしてください。

Status Update アプリが、各種スマートフォンでどう動くのかスクリーンキャプチャをとりました。

OpenSocial Pages は、他のコンシューマ向け SNS とは異なり、アプリを iframe を使わず、ウェブページとして表示して動かします。つまり、従来のウェブページを OpenSocial アプリとして作成できるということです。

そのため、スクリーンキャプチャのように PC も含めて、iPhone、iPad、Android などのモバイルブラウザでも OpenSocial アプリを快適に動作させることができます。

ただし、モバイルブラウザという性質上、残念ながら今のところ Flash は使えません。が、OpenSocial Pages は、HTML5 でウェブページをレンダリングするようにしていますので、HTML5 のテクノロジを使ったリッチアプリを動作させることはできます。

また、Android は Flash のサポートを表明していますので、近い将来 OpenSocial Pages + Android で Flash ベースの OpenSocial アプリを動作させることもできるようになります。

Status Update アプリは、今どんな仕事をしているか、Twitter でいうところの "つぶやき" を Google Apps ドメインのユーザ間で共有できるアプリです。その "つぶやき" が、他のドメインや公のユーザに公開されることはありません。

OpenSocial Pages は Google Apps のユーザとグループをインポートして、必要に応じて同期できます。つまり、OpenSocial Pages を Google Apps にインストールすると、Google Apps の既存ユーザとグループをソーシャルグラフとして、Google Apps に閉じた OpenSocial アプリを動作させることができるということです。

Status Update アプリは、とても小さく単純なもの(OpenSocial と JavaScript の知識があれば誰でも作れる)ですが、これら OpenSocial Pages の特徴によって、役立つものとなります。

例えば、スマートフォンの特徴と HTML5 の特徴を活かして、"つぶやき" に位置情報を付与するようにして、今どこでどんな仕事をしているか、お互いに共有できるアプリに改善することもできるでしょう。

OpenSocial Pages を使うには OpenSocial と JavaScript の知識が必要で、ウェブ開発者がいないと使えないという欠点があり、大きな問題であると課題として認識しています。

現状は、ウェブ開発者がいて、自らアプリを開発して、仕事の役に立ててもらうというスコープですが、将来は Google Friend Connect Social Gadgets や Facebook Widget、Twitter @anywhere くらいの感覚で利用できるようになればと考えています。

ODataとGDataはAtomPubに合流して、ウェブで誰でも標準手続きでデータを適切に操作できるようになるの?

2010-07-07T12:51:00.000+09:00

こんにちは。Nobuhiro Nakajima です。今回のネタは素人視点の雑感です。

しばらくの間、Open Data Protocol (OData) とは、どういったものか概要を調べてみたのですが、それをどうまとめて紹介すればよいか悩んでいて、書き出しに困っているところです。

OData は、もともと Microsoft の ADO.NET Data Services という実装があって、Microsoft がその仕様部分を OData として提案し、オープンでスタンダードな仕様として採用を促しているものです。そして、現在 Microsoft は ADO.NET Data Services を改めて WCF Data Services として OData の実装を提供しているという図式のようです。

OData は、机上の仕様ありきなものでななく、技術情報も実装(製品も含む)も進んでいるため、ネット上でさまざまな情報を入手できます。次のサイトが、入口として使えそうです。

Open Data Protocol (OData)
http://www.odata.org/

WCF Data Services (formerly ADO.NET Data Services)
http://msdn.microsoft.com/en-us/data/bb931106.aspx

ですので、このエントリでは、OData そのものを紹介するのではなく、OData を調べていて、私なりに気がついたことや、関心をもったことを紹介することにします。*1

OData は、WEB のデータを共有したり、操作するための AtomPub (RFC 5023) ベースのプロトコルです。そのため、Google Data Protocol (GData) と比較されることが多いようですが、(少し乱暴かもしれませんが) OData と GData は AtomPub 拡張方法に違いはあっても、目的や位置付けは同じものという印象を受けました。

Open Data Protocol Q&A にある次の質問と回答が、気になる多くのものごとを表していそうです。

Q: How should I think about OData vs. GData A: There is no OData vs. GData. Both are based on ATOM and JSON. Both protocol support our goal of an open data protocol for the Web. We intend on working with others in the community, including Google, to move the features of OData into future version of AtomPub or other appropriate standards. We encourage Google (GData) to join us in these conversations.

OData も GData も同じ仕様をベースとしていて、目指しているところも同じでしょう。OData の仕様は、将来の AtomPub などの標準仕様に持ち込むつもりなので、Google (GData) も話し合いに参加したほうがいいよ。(超意訳) といったところでしょうか。

OData のライセンスは Microsoft Open Specification Promise (OSP) に基づき、GData のラインセンスは Patent License に基づきます。両者とも条文を読む限りでは、オープンライセンスに見えるのですが、その根本的な違いがどこにあるのか、理解できませんでした。どなたか教えてほしいです。

OData は Microsoft 以外のサードパーティでの採用が進んでいます。OData に基づいて、サービスやデータを提供する者を、OData Producer と呼ぶようで、その OData Producer のリストは、次のサイトで入手できます。

OData producers
http://www.odata.org/producers

OData Producer は、SharePoint や SQL Server、Azure など Microsoft 製品群でサポートが進んでいるようです。これは Google が Google サービスを GData で提供しているのと同じ位置付けに見えます。

OData は、Microsoft 以外にも、IBM WebSphere といったメジャー製品でも採用され、また、Microsoft .NET Framework やオープンソースの Java REST フレームワークである Restlet OData Extention を使って、自らの製品やサービスとして OData Producer を実装できるようです。Facebook も Facebook Insights という OData を使った Preview を Live しています。

さらに Microsoft は、OData Producer がデータを提供できる場として、MarketPlace を立ち上げています。

Microsoft Codename “Dallas”
http://pinpoint.microsoft.com/en-US/Dallas

このサイトは OData Producer のディレクトリを提供していて、OData Consumer (OData の利用者をこう呼ぶ) が OData Producer のサービスを購読するというスタイルをとります。Type Free という項目表記もあるため、将来は、自ら保有するデータで有料で提供して、収益を得るというビジネスモデルも組み込まれているようです。

さらに Microsoft は、政府機関のデータを提供する Open Government Data Initiative (OGDI) というサービスを立ち上げていて、データフォーマットとして OData を採用しています。

Open Government Data Initiative (OSDI)
http://ogdisdk.cloudapp.net/

OData は OData Consumer 向けの製品やクライアントライブラリも提供しています。

OData Consumer
http://www.odata.org/consumers

OData Cousumer は、Data Viewer ものや Excel でサポートされているようで、これから Microsoft のクライアント製品群でのサポートが進んできそうです。また、クライアントライブラリを使って、自らの製品やサービスとして OData Consumer を実装できるようです。これも Google サービスと GData Client Library と同じ位置付けに見えます。

OData は、まず Microsoft とサードパーティの製品で OData をサポートして、すそ野を広げて、データを保有する人を巻き込んで OData Producer を増やすというのが現状でしょうか。これをクリアすると、OData Consumer は、ひとつの方法で、あらゆるデータを利用できるようになり、さらに... というエコシステムの構築が OData の狙いということになりそうです。

OData の仕様には、認証や認可の既定はなく、それぞれのケースで最適な方法があるという立場をとっているようです。

GData 自体も、認証や認可の既定はありませんが、GData は、Google サービスありきのため、各サービスは Google アカウントで認証し、AuthSub や OAuth といった認可の手続きが共通の取り決めとなっています。このことが、GData が Web での利用を現実的にしていて、GData (を実装したサービス) のアドバンテージになっていると強く感じます。

OData はどういった方向性に進んでいくんでしょうか。単なるデータプロトコル仕様だけでは、Web の世界では、全体的な見通しが立たない気がしています。GData と OData の仕様が合流して、新しい AtomPub になったとして、その後、ウェブで誰でも標準手続きで、あらゆるデータを適切に操作できるようになるのでしょうか。

そのあたりのビジョンをガチンコしていけば、なんかエキサイティングなウェブが開けていけそうな気がした OData の紹介でした。

Open Data Protocol を使用してリッチインターネットアプリケーションを構築する

*1 私は WCF Data Services や OData の専門家ではありませんので、もし見識違いや誤りがありましたら、ご指摘いただけますと幸いです。

OpenSocial Pages のタイムラインは AppEngine for Java の Data Store でどのように実現しているか

2010-07-03T14:37:00.000+09:00

こんにちは。Nobuhiro Nakajima です。

OpenSocial Pages for Google Apps は OpenSocial Activities API という Twitter でいうところのタイムライン API を備えています。また Activities は Twitter でいうところの Friends (Following)、Lists、Mentions という人と人の関係(ソーシャルグラフ)で絞り込めるようになっています。

OpenSocial Pages は Google AppEngine for Java でホストしています。そして Activity の格納と検索は Data Store (JDO) で実現していて、エンティティの主な構造は、次のようにしています。

エンティティの構造

Twitter でいうところの User を表すエンティティです。この User が、誰に Follow されているか、どのグループに属するかを保持させています。

public class User {
  private String id;
  private Set<String> followerIds; // 誰に Follow されているか
  private Set<String> groupIds; // どのグループに属するか
}

Twitter でいうところの Lists を表すエンティティです。

public class Group {
  private String id;
}

Twitter でいうところの Status を表すエンティティです。この Activity が誰のもので、誰が関係するのか保持させています。followerIds と groupIds は Person のコピーを保持させています。mentionIds は Twitter でいうところの、テキスト中の @username で引用された User たちを保持させています。

public class Activity {
  private Long id;
  private String userId; // Person#id
  private String title; // テキスト
  private Set<String> followerIds; // Person#followerIds のコピー
  private Set<String> groupIds; // Person#groupIds のコピー
  private Set<String> mentionIds; // テキスト中の @username たち
}

Follow と Unfollow

User A が User B を Follow するとき、User B の followerIds に User A の userId を追加します。また Unfollow するときは、User B の followerIds から User A を除外します。

Group の参加と退会

User が Group に参加するときは、User の groupIds に自身の userId を追加します。また、退会するときは、User の groupIds から自身の userId を除外します。

Activity の送信

送信する User の followerIds と groupIds を Activity の followerIds と groupIds にコピーして格納します。さらに、テキスト中の @username に該当する User の userId を mentionIds に格納します。

検索クエリ

User の Activity を検索するときは、Activity エンティティに対して、次のフィルタを使っています。

Query#setFilter("userId == :userId");

User が Follow している Friends の Activity を検索するときは、次のフィルタを使っています。このときの userId は、自分自身の ID を指定します。

Query#setFilter("followerIds == :userId");

Group に所属している User たちの Activity を検索するときは、次のフィルタを使っています。

Query#setFilter("groupIds == :groupId");

User が関係する Activity を検索するときは、次のフィルタを使っています。

Query#setFilter("mentionIds == :mentionId");

Activity の再構築

User A が User B を Follow したとき、User B の全 Activity (*1) の followerIds に User A の userId を追加します。また Unfollow したときは、followerIds から除外します。

User が Group に参加するときは、User A の全 Activity (*1) の groupIds に Group の groupId を追加します。また、退会したときは、groupIds から除外します。

前者と後者とも Task Queue を使って Activity を更新しています。

利点と欠点、そして課題

まず、基本方針は、シンプルなデータ構造とすること、そして、参照のコストを均一化するの(と削除)を最優先にしました。

この方法は、どんなに User が増えて、どんなに Follow したり、Group に参加したりしても、検索クエリのコストは一定なのが利点です。ただし、Follow/UnFollow、Groupの参加/不参加が発生したとき、過去にさかのぼって Activity を再構築する必要があるのが、大きな欠点です。

Activity がいくら蓄積されようとも、Activity 自体のコピーは保持していないため、Activity の削除は用意というのも利点です。ただ、User 自体を削除したとき、その User の全 Activity を削除する必要がありますが、現状は削除せず、残したままとしています。

*1 Activity はどんどん蓄積されるものなので、時間が経過するにしたがって、全 Activity を更新するのは、現実的に難しくなってきます。そこで OpenSocial Pages では、新しいものの内 n 件分、もしくは n 日分の Activity のみ再構築の対象にするように妥協しています。古い Activity は重要度が低いよねという考え方です。

できれば、古い Activity もすべて再構築したいというのが課題です。古い Activity は即時で再構築することは絶対条件ではないため、バッチ的なものや、無駄な再構築が起こらないようにスケジューリングするとかいった方法でもよさそうです。

何かよいアイディアはないものでしょうか? エンティティグループとか、エンティティのエンティティとかうまく使えば、別の方法があるのかもしれないです。

Google Apps Marketplace で OpenSocial Pages をぽちっと Google Apps にダイレクトインストールできるようにしました

2010-07-02T11:10:00.000+09:00

こんにちは。Nobuhiro Nakajima です。

OpenSocial Pages を Google Apps MarketPlace からぽちっと Google Apps にダイレクトインストールできるようにしてみました。

このエントリでは Google Apps MarketPlace から Google Apps に OpenSocial Pages に登録する流れを紹介します。Google Apps MarketPlace の掲載手順や Google Apps との連携方法など、具体的な話題は、別途エントリで紹介します。

OpenSocial Pages がどんなものか知りたい方は、次の紹介エントリをご覧ください。

* OpenSocial Pages という新しい取り組みの紹介です
* OpenSocial Pages はソーシャルデータ駆動による Social Gadget の消費スタイルを提案するものです

Google Apps MarketPlace は Google が運営するサイトで、サードパーティのベンダが、全世界の Google ユーザに、ビジネス向けの製品やサービスを紹介する場となっています。

Google Apps Marketplace
https://www.google.com/enterprise/marketplace/

The Google Apps Marketplace offers products and services designed for Google users, including installable apps that integrate directly with Google Apps. Installable apps are easy to use because they include single sign-on, Google's universal navigation, and some even include features that integrate with your domain's data.

OpenSocial Pages は、次のとおり Google Apps > Productivity カテゴリに掲載されています。

Google Apps MarketPlace では、ベンダのプロフィールを掲載できます。Nakajiman Software のプロフィールは、次のとおりです。ベンダの基本情報と製品リストを掲載できます。

Vendor Profile: Nakajiman Software Inc.

製品ごとのプロフィールも掲載できます。OpenSocial Pages のプロフィールは、次のとおりです。

OpenSocial Pages for Google Apps

Google Apps MarketPlace は製品の紹介にとどまらず、Single Sign-On (SSO) に対応した製品であれば、Google Apps MarketPlace からその製品を Google Apps に直接インストールできる仕組みを備えています。

OpenSocial Pages も直接インストールできるようにしています。OpenSocial Pages のインストールはとても簡単です。OpenSocial Pages のプロフィールから Add it now ボタンをクリックします。そして、インストール先の Google Apps ドメインを入力して Go ボタンをクリックします。

すると、Google Apps Dashboard に遷移し、OpenSocial Pages の利用規約への同意を求められます。このとき Terms of Service が OpenSocial Pages の利用規約にリンクされています。

利用規約に同意すると、インストールする製品から Google Apps にアクセスする内容を表示し、認可するか求められます。OpenSocial Pages は Google Apps の Uesr と Group をインポートするため、User と Group へのアクセス (Read Only) を求めています。

アクセスを認可して Enable app now ボタンをクリックすると、Google Apps で OpenSocial Pages が使えるようになります。

インストールすると、Google Apps に OpenSocial Pages のリンクが追加されます。

インストールすると、Gmail などのナビゲーションに OpenSocial Pages のリンクが追加されます。

OpenSocial Pages は Google Apps Dashboard から、いつでもアンインストールできます。また、状況に応じて、無効にしたり、アクセスの認可を取り下げることもできます。

OpenSocial Pages にアクセスすると、Google Apps アカウントによるログインを求められます。

OpenSocial Pages にログインすると、既定のページ(=ガジェット)がされます。このページは OpenSocial の People API を使って、ログインユーザの名前を表示するようにしてあります。この名前は Google Apps アカウントからインポートしたものです。

OpenSocial Pages のコントロールパネルにアクセスして、初期のセットアップをします。

あとは OpenSocial Apps や Social Gadgets を開発するノリでページを編集していきます。

Google Apps MarketPlace での露出は、ユーザレビューと評価による基準しかないようです。もしも関心がありましたら OpenSocial Pages をお試しいただき、マイナス面でも構いませんので、レビューや評価を頂けますと幸いです。

mixiアプリ開発 & 運用コンプリートブックの見本誌が届きました

2010-06-16T10:18:00.001+09:00

おはようございます。なかじまんです。

6月19日発売(予定)の mixiアプリ開発 & 運用コンプリートブック - ユーザをつかむソーシャルアプリのつくり方!育て方! の見本誌が届きました。

目次は、次のとおりです。@yoichiro さんの監修で、SAP 各社さんが、実際に世の中に送り出した mixiアプリの開発や運用の事例を解説したり、紹介する構成となっています。

* 序章
* Chapter 01 mixi アプリの基礎
* Chapter 02 『ようこそマイキッチン』の開発・運用事例
* Chapter 03 『セルフィちゃんねる』の開発・運用事例
* Chapter 04 ドリコムのアプリ開発・運用事例
* Chapter 05 『記憶スケッチ』の開発・運用事例
* Chapter 06 外部サーバ
* Chapter 07 OpenSocial jQuery による開発

当社も共著者として「Chapter 07 OpenSocial jQuery による開発」を担当しました。ミニアプリを題材として OpenSocial jQuery の使い方を説明しています。また、完動のソースコードとキャプチャを豊富に掲載して、OpenSocial jQuery を使って mixiアプリでできることを紹介しています。ので、mixiアプリの設計をしたり、コーディングをするときに、手元にあると役立つだろうと期待しています。

SAP 各社さんの Chapter は、次のような、とても興味深い内容になっています(怒られるかもしれませんが、印象を伝えたかったので、写真で紹介します)。

mixiアプリのバックエンドが、どのような構成になっていて、どう運用しているかといった話題もあります。

mixiアプリのトラフィックが、どうなっていて(どういう傾向があって)、それにどう対応したかといった話題もあります。

mixiアプリのプロジェクトが、どう進んで、どんなことをした(している)、どんなツールや文書を使ったといった話題もあります。

以上のとおり、SAP 各社さんしか知るはずのない、外からは見ることのできない話題が盛り込まれています。

広報的な意味はあるかもしれませんが、各社さんとも、自社のノウハウを公開する直接的な理由はないと思えますが、おそらく mixiアプリを含むソーシャルアプリの市場を盛り上げていこうという意思の表れなんじゃないかと思います。素晴らしいなぁ。

Amazo などのオンライン書店では予約も開始しています。ぜひお手元に。よろしくお願いいたします。

OpenSocial Pages はソーシャルデータ駆動による Social Gadget の消費スタイルを提案するものです

2010-06-09T15:44:00.001+09:00

こんにちは。なかじまんです。OpenSocial Pages ネタです。

OpenSocial Pages は、その構成例として、iPhone (iPod touch も) 向けに OpenSocial な機能を持つページ(=ガジェット)を提供できるようにしています。

さっそく OpenSocial Pages を使って iPhone 向けに、さささっと 2時間くらいで、タイムライン上でコミュニケーションするためのサンプルページを作ってみました。ページのソースコード (=ガジェット XML ファイル) は、次のサイトからダウンロードできます。

OpenSocial Pages Downloads
http://sites.google.com/a/lrlab.to/opensocial-pages/downloads

サンプルページといっても、完動品で、実用性を感じられるほどの機能を盛り込んであります。iPod touch で動いている様子を動画にしました。動画を見るとイメージが膨らむと思います。(オーディオは Google CM っぽくしてみましたｗ知らない曲なので、あくまでもイメージです)

OpenSocial Pages のページは iPhone のホーム画面に追加できるようにしてあります。ので、Safari からブックマークしておけば、すぐにページを開くことができます。あと、ホーム画面のアイコンは、ガジェットXML の /ModulePrefs/Link/@rel="icon" で任意のアイコンを指定できます。

ホーム画面のアイコンからページを開くと、ローディング画面を挟むようにしてあります。現状は war/images/apple-touch-startup-image.png 固定ですので、必要に応じて差し替えてください。

認証ドメインの全メンバーのアクティビティをリスト表示しています。緑のハイライトは、タップしたときの効果です。定期的に Activites API をポーリングして、新しいアクティビティを追加しています。OpenSocial Pages の Activites API は UpdatedSince (この日時以降に更新されたもの) パラメータを備えていますので、たんなるポーリングよりもコストは抑えめにできます。

右上の Share ボタンをタップすると、スライドアップして投稿フォームを表示します。メッセージを入力して Send ボタンをクリックすると、そのテキストをアクティビティとして送信します。

タイムラインのメッセージを選択すると、スライドしてメッセージの全文を表示します。

Reply ボタンをタップすると、返信フォームを表示します。

Retweet ボタンをタップすると、RT フォームを表示します。

サンプルページの機能は、以上のとおりです。ぜひ、ページのソースコードと見比べてください。OpenSocial Pages は、ソーシャルグラフとアクティビティストリームの API を持ちます。そのため、この非常に少ないコードだけでも、これだけのソーシャルな機能を持つページが作成できてしまいます。

このように OpenSocial Pages の大きな特徴は、必要な機能を持つページを、その場でインスタントに作成できるということです。つまり、従来のように、多機能かつ汎用的なガジェットを使っていく方向性に加えて、そのときに必要な機能だけを持つガジェット(=ページ)を量産して消費して使い捨てにするという方向性も考慮に入れることができます。また OpenSocial Pages は、ソーシャルグラフとそこから発生したデータは、ページの存在とは無関係 *1 にデータとして保持します。ので、ページよりも、データに重きをおきます。

例えば、紹介したサンプルページは、Twitter のように多機能にしていくことはできますが、特定の人とだけ、タイムラインでコミュニケーションしたいなど、ある目的を持つメンバー向けのページを提供したとして、その後、そのページは使わなくなったとしても、アクティビティはそのまま残り、また別のページから別の使われ方をすることになるでしょう。

*1 ページを削除したときもデータは残りますが、AppData などページの存在が必須であるデータを、どう参照させるかは課題です。

OpenSocial Pages という新しい取り組みの紹介です

2010-06-02T15:42:00.005+09:00

こんにちは。なかじまんです。新しい取り組みのお知らせです。

OpenSocial Pages 0.9.0 を公開します。

OpenSocial Pages は Google App Engine for Java 上で動作する OpenSocial コンテナです。OpenSocial Pages は App Engine 上のアプリケーションに OpenSocial を組み込んだり、OpenSocial の上にアプリケーションを構築する、その元ネタとして提供するものです。

OpenSocial Pages は App Engine 向けに実装した完動品です。ソースコードを提供していますので、手元の環境でソースコードをビルドして App Engine にデプロイするだけで、その動作を確認できます。OpenSocial Page のソースコードは、次のサイトからダウンロードできます。

OpenSocial Pages - Nakajiman Software
http://sites.google.com/a/lrlab.to/opensocial-pages/

OpenSocial Pages は、mixi や gooホームのように、アプリの開発者がいて、SNS のユーザがいて、その間をコンテナが取り持ち、ひとつのサービスを提供するという形態を目指すものではなく、Enterprise OpenSocial Whitepaper などの新しい方向性に触発されて、今ある(これから作る)システムやサービスに OpenSocial をどう取り込んでいくかを意識して取り組もうというものです。

OpenSocial Pages は Google アカウント認証を前提としています。アプリケーションを Google Apps と結び付けることで Google Apps ドメインのアカウントに限定することもできます。つまり、信頼できる限られた範囲のユーザでの利用を想定しています。

OpenSocial Pages は、ウェブページを 1つのガジェットとして扱います。ガジェットは iframe を使って表示するのではなく、ウェブページの HTML ドキュメントにインライン表示します。つまり、ウェブページ全体が Canvas ビューになるといえます。

この特性により、例えば iPhone や iPad といった広い分野で OpenSocial アプリの仕組みを活用できます。実例も兼ねて、OpenSocial Pages のソースコードでは jQTouch を組み込み iPhone 仕様でページを表示するようにしてあります。このページ自体が 1つのガジェットになり、そのガジェットから OpenSocial API が使えます。

OpenSocial Pages は、コントロールパネルという管理機能をあらかじめ持っています。コントロールパネルは、管理者(admin) のみアクセスでき、次のリソースを管理したり、編集できたりします。

* ユーザ
* グループ
* ページ (= ガジェット)
* プロキシ

OpenSocial Pages は、人の関係性を、次のとおり、ユーザとグループで表現します。また、この関係性は、OpenSocial API にも適用しています。

* ユーザは Google アカウントに対応する
* ユーザは、他のユーザを Follow できる (友達関係)
* 管理者は、ドメインのグループを作成できる
* ユーザは、ドメインのグループに参加できる

OpenSocial Pages は、ウェブページをガジェットに見立てていますが、ガジェットの元ネタは、従来どおり、ガジェット XML です。OpenSocial Pages は、オンラインのガジェットエディタを持っていて、編集したガジェット XML は App Engine のデータストアに保持します。

また、ガジェットエディタから iPhone/iPod や iPad を選択して、特定の画面サイズでポップアップして、ウェブページを開けるようにしています。Safari を使えば、実機とほぼ同じように表示できます。

OpenSocial Pages は gadgets.io.makeRequest によるリクエスト中継をホワイトリストで制限します。許可していない URL へのリクエストは中継しません。また、次の中継方法をサポートしています。

* あらかじめ定めた User/Password による基本認証
* あらかじめ定めた User/Password による WSSE 認証
* HMAC-SHA1 による 2-Legged OAuth
* あらかじめ定めた User/Password による Zoho CRM API の呼び出し

OpenSocial Pages は OpenSocial v1.0 仕様に準じて実装を進めていて、次の OpenSocial JavaScript API をサポートしています。v0.9 や v0.8 は捨てています。

* 中継先を管理できる gadgets.io.makeRequest
* 言語選択による Message Bundle
* URLパラメータによる User Preference の適用
* User Perference は Web Storage (localStorage) に格納
* iPhone 向け User Perference エディタ
* ビューの遷移 (Canvas から Canvas のみ)

* People, Groups, Activites, AppData, Messages を JSON-RPC で実装
* People は、取得(friens, group)、更新、削除、Follow、グループ参加を実装
* Groups は、取得、作成、更新、削除
* Activites は、取得(friends, group, mentions)、作成、更新、削除を実装
* Messages は、送信(person, group)を実装

パーミッションモデルは、一般性を保持しつつ、制限を緩いものとしています。

* Viewer は、他人や他アプリも含めて、あらゆるデータを取得できます
* Viewer は、自身のデータを作成、更新、削除できます
* Viewer は、すべての他人や他グループに対して、メッセージを送信できます
* 管理者(Admin)は、他人や他アプリも含めて、あらゆるデータを取得、作成、更新、削除できます

駆け足になってしまいましたが、ざっと概略をお伝えしました。

OpenSocial Pages をきっかけとして、今後、いろいろな分野で OpenSocial が適用できないか... という話題が増えることを期待しています。もし、OpenSocial の適用を検討することがありましたら、特にお役に立てると考えますので、お声掛けいただきたく存じます。

『mixiアプリをつくろう! OpenSocialで学ぶソーシャルアプリ』を献本いただきました

2010-05-09T19:18:00.002+09:00

こんばんは。なかじまんです。

『mixiアプリをつくろう！ OpenSocialで学ぶソーシャルアプリ』を、著者の @rkanbe さんから献本いただきました。ありがとうございます。

この書籍の内容は、↓という、まとめページがありますので、購入前の情報収集に使えそうです。

mixiアプリをつくろう！ OpenSocialで学ぶソーシャルアプリ書籍情報
http://labs.spicebox.jp/mixiappbook2010/

mixiアプリで何かやろうとするとき、mixiアプリは、何ができて、何が必要で、そして、何からはじめればよいか... 入口で戸惑うことが多い印象がありますが、この本は、写真の帯にもあるとおり、mixiアプリの企画から開発、運営、PR まで、網羅的に取り上げていて、この 1冊で、mixiアプリの全体像を把握できるようになっていて、そこがもっとも価値あるところです。

説明に使っているソースコードは具体的で、mixiアプリらしさを盛り込んだ実例も含まれています。そのソースコードがどういった振る舞いをするのか、スクリーンキャプチャや図を使って解説しているので、実際にソースコードを動かさなくても、読み進められるように配慮しています。

ただ、技術的に突っ込んだ解説は、控え目になっています。ですが、技術的なトピックは、それぞれ詳しい立場の人たちが、ブログや勉強会などでアウトプットして充実してきていますので、この本を索引として、ネットの情報を探したり、結びつけたりするのにも、役立つことでしょう。

最後に、この本は、ほぼほぼ OpenSocial jQuery という JavaScript ライブラリを使っての解説となっています。この本を通じて OpenSocial jQuery のよさ!? ... みたいなものが伝わって、mixiアプリをはじめとする OpenSocial アプリ開発のきっかけになってくれればと、期待しています。

そうそう。この本で OpenSocial Hackathon を紹介していますが、その模様の写真に私がいた気がしました。あれは OpenSocial Japan×gooホーム共催のときのやつっぽいですね。なんか懐かしい。

AppEngine Java と JSONIC と OpenSocial OAuth Filter で作る OpenSocial アプリの外部サーバ

2010-04-26T10:22:00.003+09:00

おはようございます。なかじまんです。

AppEngine Java と JSONIC と OpenSocial OAuth Filter を使うと、OpenSocial アプリの外部サーバをお手軽に立てることができますよ ... というおはなしです。ただ、大規模な運用実績はありませんので、その点は割り引いて読んでくださいね。

はじめに、JSONIC というライブラリを使って、AppEngine Java 上に、独自の REST API を構築します。そして、OpenSocial アプリから gadgets.io.makeRequest メソッドを使って、その REST API を呼び出すことにします。JSONIC とは、↓というものです。

JSONIC - simple json encoder/decoder for java

JSONICは、Java用のシンプルかつ高機能なJSONエンコーダー/デコーダーライブラリです。Java用のJSONライブラリはすでに多数存在しますが、JSONICはRFC 4627に従った正式なJSON形式でのデコード/エンコードを行いながらも、プログラミング言語に依存する情報をJSON内に含めることなくPOJO(Plain Old Java Object)と自然な変換を行える点に特徴があります。

次のとおり、REST API のインタフェースを想定します。

* GET http://example.com/api/entries.json?count={count} // エントリ取得
* GET http://example.com/api/entries/{id}.json // エントリ取得
* POST http://example.com/api/entries.json // エントリ投稿
* PUT http://example.com/api/entries/{id}.json // エントリ更新
* DELETE http://example.com/api/entries/{id}.json // エントリ削除

jsonic-1.2.0.jar をビルドパスに追加して、次のとおり、web.xml に JSONIC の REST サーブレットを追記します。このとき、config パラメータの mappings を使って、REST API のインタフェースとクラスの対応を指定します。ここでは、EntryService クラスとします。

<servlet>
  <servlet-name>JSONIC</servlet-name>
  <servlet-class>net.arnx.jsonic.web.RESTServlet</servlet-class>
  <init-param>
    <param-name>config</param-name>
    <param-value>
    {
      "mappings": {
        "/api/entries.json": "com.example.EntryService",
        "/api/entries/{id}.json": "com.example.EntryService"
      }
    }
    </param-value>
  </init-param>
</servlet>
<servlet-mapping>
  <servlet-name>JSONIC</servlet-name>
  <url-pattern>*.json</url-pattern>
</servlet-mapping>

次のとおり、EntryService クラスを記述します。find が GET リクエスト、create が POST、update が PUT、delete が DELETE を表します。リクエストのパラメータは、各メソッドの params に格納されます。また、各メソッドの戻り値が JSON 形式のレスポンスに相当します。

public class EntryService {
  public Map<String,Object> find(Map<String,String> params) {
    Map<String, Object> json = new HashMap<String, Object>();
    json.put("viewer", params.get("opensocial_viewer_id"));
    json.put("id", params.get("id"));
    json.put("count", params.get("count"));
    return json;
  }
  public Map<String,Object> create(Map<String,String> params) {
    ...
  }
  public Map<String,Object> update(Map<String,String> params) {
    ...
  }
  public Map<String,Object> delete(Map<String,String> params) {
    ...
  }
}

次のとおり、OpenSocial アプリから gadgets.io.makeRequest メソッドを使って、その REST API を呼び出します。

var url = 'http://example.com/api/entries/1.json?count=10';
var params = {};
params[gadgets.io.RequestParameters.METHOD] =
  gadgets.io.MethodType.GET;
params[gadgets.io.RequestParameters.AUTHORIZATION] =
  gadgets.io.AuthorizationType.SIGNED;
params[gadgets.io.RequestParameters.CONTENT_TYPE] =
  gadgets.io.ContentType.JSON;
gadgets.io.makeRequest(url, function(res) {
  console.log(res.data.viewer);
  console.log(res.data.id);
  console.log(res.data.count);
}, params);

PUT リクエストと DELETE リクエストが使えないコンテナのときは、リクエストのパラメータに _method=put や _method=delete を指定すると、疑似的に PUT や DELETE リクエストを表現できます。

次に、OpenSocial OAuth Filter というライブラリを使って、構築した REST API に対するリクエストの署名を検証するようにします。 OpenSocial OAuth Filter とは、↓というものです。

OpenSocial OAuth Filter

OpenSocial OAuth Filter is a JavaEE filter to validate OpenSocial requests. This filter blocks illegal requests to prevent spoofing and tampering.

opensocial-oauth-filter-0.7.jar をビルドパスに追加して、次のとおり、web.xml に OpenSocial OAuth Filter のフィルタサーブレットを追記します。このとき、config-class パラメータを使って、公開鍵と検証条件を実装したクラスを指定します。ここでは、MixiRegistryConfigurator クラスとします。

<filter>
  <filter-name>opensocial-oauth-filter</filter-name>
  <filter-class>
    org.hidetake.opensocial.filter.RequestValidationFilter
  </filter-class>
  <init-param>
    <param-name>config-class</param-name>
    <param-value>com.example.MixiRegistryConfigurator</param-value>
  </init-param>
</filter>
<filter-mapping>
  <filter-name>opensocial-oauth-filter</filter-name>
  <url-pattern>*.json</url-pattern>
</filter-mapping>

次のとおり、MixiRegistryConfigurator クラスを記述します。公開鍵とコンシューマキー、アプリID、ガジェットURL を指定します。この条件を満たさないリクエストには、403 Forbidden をレスポンスします。

public class MixiRegistryConfigurator
    implements RegistryConfigurator {
  private static final String cert =
    "-----BEGIN CERTIFICATE-----\n"
    + "MIICdzCCAeCgAwIBAgIJANCWpLIspxwbMA0GCSqGSIb3DQEBBQUAMDIxCzAJBgNV\n"
      ...
    + "IpqnsHwF1pm0bTY=\n"
    + "-----END CERTIFICATE-----";
  @Override
  public void configure(AppRegistry registry)
      throws ConfigurationException {
    registry.register(new OpenSocialApp(
      "16271", "http://example.com/gadgets.xml",
      OpenSocialApp.createOAuthAccessorRSASHA1("mixi.jp", cert)));
  }
  @Override
  public void configure(ExtensionRegistry registry)
      throws ConfigurationException {
    registry.register(new ValidationLogger());
  }
}

最後に、EntryService クラスで、AppEngine のデータストレージを使って、エントリを検索したり、保存したり、削除するように実装すればよいでしょう。

-- 2010-04-28 追記

CREYLE 用 RegistryConfigurator クラスの雛形を置いておきますので、参考にしてください。

CrelyeRegistryConfigurator.java

OpenSocial jQuery Network Distribution 配布URL変更のお知らせ

2010-04-05T17:48:00.000+09:00

こんばんは。なかじまんです。

OpenSocial jQuery Network Distribution の配布先URLを変更します。

4/9(金)までに scripts.lrlab.to から d2hv4ldeur9lfv.cloudfront.net へホスト名
の変更をお願いします。

変更前 -- 4/9(金) まで参照できます

* http://scripts.lrlab.to/opensocial-jquery-1.3.2.5.min.js
* http://scripts.lrlab.to/opensocial-jquery-1.2.6.5.min.js
* http://scripts.lrlab.to/opensocial-jquery.templates-0.1.0.min.js
* http://scripts.lrlab.to/opensocial-jquery.autoHeight-1.0.0.min.js
* http://scripts.lrlab.to/opensocial-jquery.minimessage-1.0.0.min.js
* http://scripts.lrlab.to/opensocial-jquery.mixi-1.0.0.min.js

変更後 -- 今すぐ参照できます

* http://d2hv4ldeur9lfv.cloudfront.net/opensocial-jquery-1.3.2.5.min.js
* http://d2hv4ldeur9lfv.cloudfront.net/opensocial-jquery-1.2.6.5.min.js
* http://d2hv4ldeur9lfv.cloudfront.net/opensocial-jquery.templates-0.1.0.min.js
* http://d2hv4ldeur9lfv.cloudfront.net/opensocial-jquery.autoHeight-1.0.0.min.js
* http://d2hv4ldeur9lfv.cloudfront.net/opensocial-jquery.minimessage-1.0.0.min.js
* http://d2hv4ldeur9lfv.cloudfront.net/opensocial-jquery.mixi-1.0.0.min.js

※scripts.lrlab.to は d2hv4ldeur9lfv.cloudfront.net の CNAME ですので、ファイルの実体は同じものです。

背景としては、ここ半年でアクセス数が伸びてきており、独自ドメインで参照させていると、何かトラブルがあったとき、みなさんへの影響が大きいという判断からです。少なくとも、Amazon のホスト名で、名前を引いた方がより安全(調べてませんがレスポンスもよさそう)であろうということです。

お手数をお掛けしますが、ご協力のほどよろしくお願いします。

Google Wave Gadgets でできることを OpenSocial や Shindig の視点で調べてみました

2009-12-26T10:36:00.002+09:00

おはようございます。Nobuhiro Nakajima です。

OpenSocial jQuery は Google Wave Gadgets でも使えるようになりますか... という質問がありました。現状の OpenSocial jQuery のまま gadgets.* API は使えます。また wave.* API はそもそも考慮していません。が答えです。

実例として公開している YouTube ガジェットがありますが、次のとおり Google Wave Gadgets としてそのまま動きます。このように Google Wave で OpenSocial jQuery はすぐに試せます。

Wave Gadgets も iGoogle や Google Friend Connect (GFC) と同じ Apache Shindig 上で構成していると考えられます。ですので、gadgets.* API の振る舞いも同じであり、OpenSocial jQuery がそのまま使えるということになりそうです。

本当にそうなの... という疑問が残るので、Wave Gadgets を Shindig 視点でいろいろ調べてみました。調べたのは Wave Preview です。Sandbox ではありません。

ガジェットのレンダリング

iframe URL を抜粋します。見てのとおり Shindig の Gadgets Rendering Server です。HTTPS (Secure) プロトコルが特徴的です。ホストは googleusercontent.com で iGoogle や GFC の gmodules.com とは異なるので別系統なのでしょう。container パラメータも wave なので、同系統であったとしても、コンテナのプロファイルは別なのでしょう。

https://lq3n3peeciqdlq351d7pd2pqtuvr30al-a-wave-opensocial.googleusercontent.com/gadgets/ifr
?v=b893d00cffa7bf86acedda54be7a116
&container=wave
&view=canvas&
&lang=en&
&url=http://example.com/gadgets.xml
&country=ALL
&libs=core%3Adynamic-height%3Alocked-domain ...
&mid=5
&nocache=1
&parent=https://wave.google.com ...
#rpctoken=...
&st=...

libs パラメータを観察したところ、ガジェットXML の feature を表すようですので、Google Wave 側もガジェット XML の内容を認知しているのでしょう。

view パラメータは、常に canvas のようです。ガジェットXML で profile や home を指定すると、次のエラーとなりますので、canvas ビューのみサポートするのでしょう。既定のビューが canvas ということになるのかな。

Unable to locate an appropriate view in this gadget. Requested: 'canvas' Available: [home]
Unable to locate an appropriate view in this gadget. Requested: 'canvas' Available: [profile]

nocache パラメータは、常に 1 (キャッシュなし) のようです。iframe のソースコードを見ても concat されていませんので、開発中のキャッシュ制御は気にしなくてもよさそうです。

rpctoken パラメータが付与されてますので、クロスホストなデータ通信は gadgets.rpc なのでしょう。iframe のソースコードを見ると gadgets.rpc と gadgets.rpctx が含まれますので、すべてのブラウザで URL flagment (rpc_relay.html) は使われないでしょう。

st パラメータが付与されてますので、Phone home (gadgets.io.makeRequest)の仕組みも同じでしょう。

setprefs feature

Wave Gadgets のドキュメントでサポートすると記載があります。ガジェットXML の UserPref は認知しており、API でも取得できました。ただ API で設定できますが、(確認した限りは)永続化できませんでした。また、UserPref を編集するための UI も提供されていないようです。本当か。

dynamic-height feature

Wave Gadgets のドキュメントでサポートすると記載があります。実際に API は存在し、期待どおり動作しました。

settitle feature

Wave Gadgets のドキュメントでサポートすると記載があります。実際に API は存在し、呼び出してもエラーにはなりませんが、指定したタイトルがどこで表示されるのか確認できませんでした。

tabs feature

Wave Gadgets のドキュメントでサポートすると記載があります。実際に API は存在し、期待どおり動作しました。

minimessage feature

Wave Gagets のドキュメントでサポートすると記載があります。実際に API は存在し、期待どおり動作しました。

locked-domain feature

Wave Gadgets のドキュメントでサポートすると記載があります。実際に locked-domain なしでガジェットを wave に貼り付け、その後 locked-domain ありとして再表示すると、"Invalid domain" というエラーとなるため、機能しているのでしょう。

view feature

Wave Gadgets のドキュメントでサポートすると記載はありません。が、実際に API は存在しました。ただ、サポートするビューは profile と canvas という結果で、前述の結果とズレがあります。また、ビューの移動は API が無反応でした。

opensocial-0.8 feature

Wave Gadgets のドキュメントで OpenSocial API は未サポートと記載があります。が、実際に API は存在しました。実際に Person の取得を試みたところ、次のエラーとなりました。

Malformed security token ...&amp;c=wavecom.google.gadgets.auth.AuthTokenException: Failure for container wave

Wave は Contact ベースの関係のようですので、OpenSocial に対応するなら iGoogle モデルになるのかなという印象です。もうできてたりして。

といったところを調べてみました。結果、現状の OpenSocial jQuery のまま gadgets.* API なら使えることが把握できました。役に立ちそうであれば使ってみてください。

メッセージの表示に加え、明示的もしくは自動的にメッセージを閉じる強化をした OpenSocial jQuery Mini Message プラグインを公開しました

2009-12-21T07:21:00.000+09:00

おはようございます。Nobuhiro Nakajima です。

OpenSocial jQuery は jQuery.fn.minimessage メソッドで Mini Message を限定的にサポートしてきましたが、このたび OpenSocial jQuery Mini Message としてプラグイン化して、使える機能を強化しました。従来の機能に加えて、明示的もしくは自動的にメッセージを閉じることができるようになりました。

今後、メッセージの表示は OpenSocial jQuery Mini Message プラグインを使ってください。従来の Mini Message は Deprecated 非推奨となり、OpenSocial jQuery 1.3.2.5 以後のバージョンで使えなくなります。

OpenSocial jQuery Mini Message プラグインの使い方は、次のとおりです。質問や要望がありましたら OpenSocial jQuery Discussion までお願いします。

OpenSocial jQuery 本体に続けて、OpenSocial jQuery Mini Message をロードしてください。

<script src="opensocial-jquery.js" type="text/javascript"></script>
<script src="opensocial-jquery.minimessage.js" type="text/javascript"></script>

OpenSocial jQuery Mini Message は minimessage を必要とします。

<Require feature="minimessage" />

閉じるボタン付きのメッセージを表示する

jQuery.fn.minimessage を使って、閉じるボタン付きのメッセージを表示できます。

$('<span/>').text('Say Hello!').minimessage();

また jQuery.fn.minimessage にコールバック関数を指定して、閉じるイベントをハンドリングできます。コールバック関数の戻り値を false とすると、イベントは無効となり、メッセージは閉じません。

$('<span/>').text('Dismissible Message with Callback')
  .minimessage(function() {
    return confirm('Do you close a message?'); // 閉じるかどうか?
  });

メッセージを閉じる

jQuery.fn.remove を使って、メッセージを閉じることができます。

var message = $('<a/>').text('Remove Message')
  .click(function() {
    message.remove(); return false;
  }).minimessage();
});

自動的にメッセージを閉じる

jQuery.fn.minimessage を使って、自動的に閉じるメッセージを表示できます。秒数か fast, normal, slow のいずれかを指定します。

* fast を指定すると、1秒後にメッセージを閉じます。
* normal を指定すると、3秒後にメッセージを閉じます。
* slow を指定すると、5秒後にメッセージを閉じます。

$('<span/>').text('Timer Message')
  .minimessage(3); // 3秒後に閉じる
$('<span/>').text('Timer Message with Predefined Speeds')
  .minimessage('slow');

また jQuery.fn.minimessage にコールバック関数を指定して、閉じるイベントをハンドリングできます。

$('<span/>').text('Timer Message with Callback')
  .minimessage('fast', function() { // 3秒後に閉じる
    alert('The message was closed.');
  });

実例

* OpenSocial jQuery Mini Message Test Suite

mixi.util.requestExternalNavigateTo を使った外部サイトの誘導を jQuery.fn.live で自動化する方法

2009-12-14T22:33:00.003+09:00

こんばんは。しゃっくりが止まらなくなって、丸2日になろうとしてる Nobuhiro Nakajima です。

mixi アプリは jQuery.view (= mixi.util.requestExternalNavigateTo) を使って、ユーザを外部サイトに誘導します。というネタを使って、ちょっとした Tips を紹介します。

次のソースコードは、外部サイトのリンクのクリックイベントを捕捉して jQuery.view を使って外部サイトに誘導するものです。(1) はあらかじめ用意した静的なリンク、(2) は RSS フィードを取得して動的生成したリンクで、それぞれ jQuery.view を使って外部サイトに誘導しています。

// (1) 静的リンク
  $('a[target=_blank]').click(function() {
    $.view(this.href); return false;
  });
  // (2) 動的リンク
  $.getFeed('http://rss.rssad.jp/rss/gihyo/feed/atom', function(feed) {
    $.each(feed.Entry, function(i, entry) {
      var a = $('<a target="_blank">')
        .attr('href', entry.Link)
        .text(entry.Title)
        .click(function() {
          $.view(this.href); return false;
        });
      $('<li/>').append(a).appendTo('ul');
    });
  });
<ul></ul>
Powered by <a href="http://code.google.com/p/opensocial-jquery/"
  target="_blank">OpenSocial jQuery</a>

静的リンクにせよ、動的リンクにせよ、外部サイトに誘導するというコードはまったく同じです。また、動的リンクを頻繁に生成するときは、その都度、クリックイベントと jQuery.view のコードを書くことになります。その結果、コードは冗長になりますし、テストケースも増加します。つまり、不健全です。

これ jQuery.fn.live を使うと、次のように自動化できるんです。ここでは target="_blank" のリンクは、外部サイトのリンクと決まりごとにしています。そして jQuery.fn.live を使って、target="_blank" のリンクにクリックイベントを登録し、外部サイトに誘導するようにしています。

たったこれだけで、静的リンクと動的リンクに関わらず、HTML 中に外部サイトのリンクが生成された時点で(あらかじめ存在するのも含む)、自動的にクリックイベントが登録され、外部サイトに誘導するリンクに早変わりします。live というメソッド名からもイメージできるでしょう?

$('a[target=_blank]').live('click', function() {
    $.view(this.href); return false;
  });
  $.getFeed('http://rss.rssad.jp/rss/gihyo/feed/atom', function(feed) {
    $.each(feed.Entry, function(i, entry) {
      var a = $('<a target="_blank">')
        .attr('href', entry.Link)
        .text(entry.Title); // click イベントを登録してない!?
      $('<li/>').append(a).appendTo('ul');
    });
  });

実際に上のソースコードを動かすと分かりますが、RSS フィードのリンクにクリックイベントを登録していないにも関わらず、jQuery.view で外部サイトに誘導されます。RSS フィードを再取得して再表示しても同様です。

jQuery.fn.live は、いろいろ制約があるので、使えるシーンは限られるのですが、頻繁に HTML を動的生成する中で、コールバック関数外の状態に依存しない定型的なイベントブロックを多用するとき、とても役立つと考えます。その1例が、外部サイトの誘導ということです。

OpenSocial jQuery に mixi Platform 固有の拡張機能を追加する jQuery プラグインを公開しました。

2009-12-09T10:42:00.002+09:00

おはようございます。ちょっと体調のすぐれない Nobuhiro Nakajima です。

OpenSocial jQuery mixi Platform 1.0.0 をリリースしました。
http://code.google.com/p/opensocial-jquery/ -- Downlaod
http://code.google.com/p/opensocial-jquery/wiki/PluginMixi -- Document

OpenSocial jQuery mixi Platform は mixi 固有の拡張機能を OpenSocial jQuery に追加するための jQuery プラグインです。OpenSocial jQuery 本体に続けて、OpenSocial jQuery mixi Platform をロードして使ってください。

<script type="text/javascript" src="opensocial-jquery.js"></script>
<script type="text/javascript" src="opensocial-jquery.mixi.js"></script>

外部サイトに誘導する

jQuery.view を使って、外部サイトに誘導できます。このとき、外部サイトの URL を指定します。また、パラメータを指定すると QUERY_STRING に変換して URL に付与します。

// http://www.google.com/
$.view('http://www.google.com/');

// http://www.google.com/search?q=corgi
$.view('http://www.google.com/search', { q: 'corgi' });

ただし mixi の URL を指定したときは、外部サイトとみなさず、即ページ遷移します。

// http://mixi.co.jp/
$.view('http://mixi.co.jp/');

// http://mixi.jp/show_profile.pl?id=0123456789
$.view('http://mixi.jp/show_profile.pl', { id: '0123456789' });

また、従来どおり、ビューの切り替えや現在のビュー名の取得もできます。

$.view('profile');
$.view('home');
$.view('canvas', { q: 'corgi' });
console.info($.view()); // profile, home, canvas

参加コミュニティを取得する

jQuery.getData を使って、ユーザの参加コミュニティを取得できます。このとき url に /communities からはじまるパスと @viewer, @owner, ユーザID のいずれかを指定します。jQuery.ajax や jQuery.get も同様です。

$.getData('/communities/@viewer/@self').next(function(communities) {
  $.each(communities, function(i, community) {
    console.info(community.id); // コミュニティID
    console.info(community.userId); // ユーザID
    console.info(community.url); // コミュニティURL
    console.info(community.name); // コミュニティ名
    console.info(community.thumbnailUrl); // コミュニティ画像
  });
  console.info(communities.totalResults); // 参加コミュニティ数
}).error(function(e) {
  alert(e+'');
});

学校を選択する

jQuery.getData を使って、VIEWER の母校や在学中の学校を選択できます。このとき url に /schools からはじまるパスと @selected を指定します。jQuery.ajax や jQuery.get も同様です。

$.getData('/schools/@selected').next(function(schools) {
  var school = schools[0];
  console.info(school.token); // 学校トークン
  console.info(school.divisionId); // 学校区分ID
  console.info(school.division); // 学校区分名
});

学校リストを取得する

jQuery.getData を使って、VIEWER の母校や在学中の学校リストを取得できます。このとき url に /schools からはじまるパスと @viewer を指定します。jQuery.ajax や jQuery.get も同様です。

$.getData('/schools/@viewer/@self').next(function(schools) {
  $.each(schools, function(i, school) {
    console.info(school.token); // 学校トークン
    console.info(school.divisionId); // 学校区分ID
    console.info(school.division); // 学校区分名
  }
  console.info(schools.totalResults); // 学校数 = schools.length
}).error(function(e) {
  alert(e+'');
});

マイミクを招待する

jQuery.invite を使って、マイミクを招待できます。このとき @friends を指定します。招待したマイミクのユーザIDリストを取得できます。

$.invite('@friends', function(ids) {
  $.each(ids, function(i, id) { console.log(id) }); // ユーザIDリスト
});

また @friends を省略しても同じことができます。

$.invite(function(ids) {
  $.each(ids, function(i, id) { console.log(id) }); // ユーザIDリスト
});

さらに Deferred チェーンを使っても同じことができます。

$.invite('@friends').next(function(ids) {
  $.each(ids, function(i, id) { console.log(id) }); // ユーザIDリスト
}).error(function(e) {
  alert(e+'');
});

同級生を招待する

jQuery.invite を使って、同級生を招待できます。このとき @classmates を指定します。招待した同級生のユーザIDリストを取得できます。

$.invite('@classmates', function(ids) {
  $.each(ids, function(i, id) { console.log(id) }); // ユーザIDリスト
});

さらに Deferred チェーンを使っても同じことができます。

$.invite('@classmates').next(function(ids) {
  $.each(ids, function(i, id) { console.log(id) }); // ユーザIDリスト
}).error(function(e) {
  alert(e+'');
});

コンテナを判別する

jQuery.container.mixi を使って、コンテナが mixi Platform かどうか判別できます。
他コンテナも含めて 1つの JS ファイルにまとめるときに役立ちます。

if ($.container.mixi) { ... } // mixi Platform

.mixi クラスを使って、コンテナが mixi Platform かどうか判別できます。
他コンテナも含めて 1つの CSS ファイルにまとめるときに役立ちます。

<style type="text/css">
.mixi p { color: red; } /* mixi Platform */
</style>

OpenSocial jQuery に対する質問や要望は Google Group で受け付けています。開発中の最新情報も入手できます。ぜひご参加ください。

OpenSocial jQuery Discussion
http://groups.google.com/group/opensocial-jquery

-- 2009-12-10 スクリーンキャプチャの追加

Golazo MA4 - ここで何する? を閉鎖しました。ソースコードは引き続き提供します。

2009-12-05T11:33:00.000+09:00

おはようございます。Nobuhiro Nakajima です。

Mashup Awards 5 応募者の参考になればと思い、Mashup Awards 4 受賞作品である Golazo MA4 - ここで何する? を公開し続けてきましたが、

Golazo MA4 - ここで何する?
http://golazo.offtheball.jp/
Golazo MA4 は、ウェブページや入力した文章の内容から位置情報を自動抽出し、その内容と位置情報をメモとして、簡単にクリッピングできるサービスです。

本日(12/5)、Mashup Awards 5 の受付終了と受賞者発表に伴い、サイトを閉鎖しました。アカウントの情報とデータもすべて破棄し、バックアップのデータも破棄しました。

Golazo MA4 のソースコードは、引き続き公開していきますので、ご活用ください。

golazo - Project Hosting on Google Code
http://code.google.com/p/golazo/

ありがとうございました。

OpenSocial jQuery autoHeight 1.0.0 is available

2009-11-28T17:01:00.000+09:00

OpenSocial jQuery autoHeight is plugin to adjust height of Gadgets automatically all the time.
http://code.google.com/p/opensocial-jquery/wiki/PluginAutoHeight

Edit the src attribute in the script tag to point to your copy of opensocial-jquery.autoHeight.js. Inside the ready event, add the autoHeight method to window object:

<script type="text/javascript" src="opensocial-jquery.js"></script>
<script type="text/javascript" src="opensocial-jquery.autoHeight.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $(window).autoHeight();
});
</script>

Featured Video

Downloads

You can download it from the featured downloads list.
http://code.google.com/p/opensocial-jquery/downloads/list

gadgets.window.adjustHeight で、確実に !? ガジェットの高さを自動調整する方法

2009-11-28T15:29:00.000+09:00

おはようございます。なかじまんです。

Gadgets API の gadgets.window.adjustHeight を使うと、ガジェットの高さを自動調整できますが、実際のところは、画像のロードタイミングや、ブラウザごとに仕組みの異なる gadgets.rpc が影響して、期待どおりの高さに自動調整されないことが多々あります。

で、今までいろいろ試してきましたが、現在は、次のとおり、周期的に高さを自動調整して、期待する高さを保つという方法がもっとも確実であるという結論です。

setInterval(function() { gadgets.window.adjustHeight(); }, 1000);

また OpenSocial jQuery だと、次のようになります。

setInterval(function() { $(window).adjustHeight(); }, 1000);

1秒間隔で、ガジェットの高さの自動調整を試みています。gadgets.window.adjustHeight のソースコードを調べたところ、ガジェットの高さに変化のないときは、コンテナと RPC 通信せずに何もしないようになっていたので、1秒間隔くらいで gadgets.window.adjustHeight を呼び出しても、それほどコストはかかりません。

1秒間隔なので、高さが自動調整されるのがひと呼吸遅いかなという感じがあったり、頻繁に高さが変わるようなガジェットだと、ペコペコ高さが変わって見苦しいこともありますが、高さが自動調整されないという最悪の結果は回避できます。

-- 2009-11-28 追記

上記のガジェットの高さを自動調整し続ける... をプラグインとして公開しました。公式サイトからダウンロードして使ってください。

OpenSocial jQuery autoHeight 1.0.0 (opensocial-jquery.autoHeight.js)
http://code.google.com/p/opensocial-jquery/

使い方は、次のとおり opensocial-jquery.autoHeight.js をロードして、はじめに1度だけ window オブジェクトに対して autoHeight を呼び出すだけです。

<script type="text/javascript" src="opensocial-jquery.min.js"></script>
<script type="text/javascript" src="opensocial-jquery.autoHeight.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $(window).autoHeight();
});
</script>

ガジェットXMLの実例を用意しました。
http://opensocial-jquery.googlecode.com/svn/trunk/tests/opensocial-jquery.autoHeight.test.xml

ガジェットXMLを gooホームにも登録しましたので、体験してみてください。
http://sandbox.home.goo.ne.jp/gadget/N43bmJWwmt18/detail

ガジェットXMLが動作する様子を動画にしました。文章のフォントサイズを変更すると、その変化に応じて、ガジェットの高さが自動調整されることが見て分かります。

OpenSocial jQuery から OpenSocial Host の外部データベースを操作する基本手順を紹介します

2009-11-25T08:36:00.003+09:00

おはようございます。なかじまんです。

OpenSocial jQuery から OpenSocial Host の Core API を使って、OpenSocial Host の外部データベースを操作する手順とソースコードを紹介します。

OpenSocial Host の外部データベースを使うメリットは、次のとおりです。

* OpenSocial AppData とは異なり、すべてのユーザが同じデータ領域を共有できる
* OpenSocial AppData とは異なり、個々のデータに対して、パーミッションを指定できる
* OpenSocial AppData とは異なり、個々のデータに対して、データ容量の制約がない
* OpenSocial AppData とは異なり、個々のデータに対して、ワード検索できる
* 外部データベースは HeartRails によって、安全、確実にホストされ、負荷対策も期待できる(に違いない)

OpenSocial Host の外部データベースにできなこともあります。

* OpenSocial AppData とは異なり、友達リストのソーシャルグラフが使えない

なので、OpenSocial API と OpenSocial Host の特徴をよく理解して、組み合わせて使うことになるのだろうと考えます。

ユーザの登録

はじめに OpenSocial Host のユーザ登録をしてください。
ユーザ登録は無料です。Open ID を使えば、パスワードを預ける必要はありません。

アプリケーションの登録

次に OpenSocial Host にログインして、新しいアプリケーションを登録してください。
アプリケーションの変更や削除はいつでもできますので、アプリケーション名は仮のものでも構いません。

アプリケーションを登録すると、アプリケーションキーが発行されますので、動作対象とするコンテナのアプリケーションキーを手元に控えてください。

アプリケーションの関連付け

ガジェット XML を用意して、動作対象とするコンテナにガジェット XML を登録してください。ガジェット XML は OpenSocial Host でホストしてもよいですし、自社サーバや Google AppEngine、Amazon S3 など、どこでホストしてもかまいません。

そして、次のように、ガジェット XML から /app/register を呼び出します。
このとき、前述のアプリケーションキーをパラメータとして、リクエストを署名します。
呼び出しが成功すると、OpenSocial Host とガジェット XML が関連付き、これ以降、ガジェット XML から OpenSocial Host の外部データベースが使えるようになります。
なお、関連付いた後は /app/register の呼び出しは不要です。アプリケーションの開発をはじめるとき、1度だけ呼び出してください。

// Register Application
  var url = 'http://opensocialhost.com/app/register';
  var data = { application_key: '( Your Application Key )' };
  
  $.ajax({
    type: 'post', url: url, oauth: 'signed', data: data, dataType: 'json'
  }).next(function(r) {
    if (r.hadError)
      throw r.errorCode; // call error
  }).error(function(e) {
    console.error(e+'');
  });
}}}

データの追加

/data/insert を呼び出して、データを追加できます。このとき、Key-Value 形式のデータとパーミッションをパラメータとして、リクエストを署名します。

* 既存のデータは上書きできます。ただし、パーミッションは上書きできません。パーミッションを変更するときは、データを削除した後、データを再挿入します。
* 読み込みと書き込みのパーミッションは別々です。書き込みは読み込みを兼ねません。
* パーミッションは public, private, specified を指定できます。specified のときは、カンマ区切りで、複数のユーザ ID を指定できます。

// Insert Data
  var url = 'http://opensocialhost.com/data/insert';
  var data = {
    comment: { text: 'Say Hello!', lastModified: new Date().getTime() },
    feeling: 'well',
    footprint: true
  };

  // Object を OpenSocial Host のパラメータに変換する
  // Key はそのまま、Value は JSON (String) に変換する
  var _data = {}, i = 1;
  $.each(data, function(k, v) {
    _data['key'+i] = k;
    _data['value'+i] = gadgets.json.stringify(v);
    i++; 
  });

  // 読み込みパーミッションを指定する
  //_data.read_permission = 'public'; // 誰でも(初期値)
  //_data.read_permission = 'private'; // 自分のみ
  //_data.read_permission = 'specified'; // 特定のユーザのみ
  //_data.read_permission_specified = '( User ID ),( User ID ), ...';  

  // 書き込みパーミッションを指定する  
  //_data.write_permission = 'public'; // 誰でも(初期値)
  //_data.write_permission = 'private'; // 自分のみ
  //_data.write_permission = 'specified'; // 特定のユーザのみ
  //_data.write_permission_specified = '( User ID ),( User ID ), ...';  
  
  $.ajax({
    type: 'post', url: url, oauth: 'signed', data: _data, dataType: 'json'
  }).next(function(r) {
    if (r.hadError)
      throw r.errorCode;
  }).error(function(e) {
    console.error(e+'');
  });

データの更新

/data/update を呼び出して、データを更新できます。このとき、Key-Value 形式のデータをパラメータとして、リクエストを署名します。

// Update Data  
  var url = 'http://opensocialhost.com/data/update';
  var data = { feeling: 'bad', footprint: false };

  // Object を OpenSocial Host のパラメータに変換する
  // Key はそのまま、Value は JSON (String) に変換する
  var _data = {}, i = 1;
  $.each(data, function(k, v) {
    _data['key'+i] = k;
    _data['value'+i] = gadgets.json.stringify(v);
    i++; 
  });

  $.ajax({
    type: 'post', url: url, oauth: 'signed', data: _data, dataType: 'json'
  }).next(function(r) {
    if (r.hadError)
      throw r.errorCode;
  }).error(function(e) {
    console.error(e+'');
  });

データの削除

/data/delete を呼び出して、データを削除できます。このとき、Key をパラメータとして、リクエストを署名します。

// Delete Data  
  var url = 'http://opensocialhost.com/data/delete';
  var data = [ 'comment', 'feeling' ];

  // Array を OpenSocial Host のパラメータに変換する
  var _data = {};
  $.each(data, function(i, v) {
    _data['key'+(i+1)] = v; 
  });

  $.ajax({
    type: 'post', url: url, oauth: 'signed', data: _data, dataType: 'json'
  }).next(function(r) {
    if (r.hadError)
      throw r.errorCode;
  }).error(function(e) {
    console.error(e+'');
  });

データの取得

/data/select を呼び出して、データを取得できます。このとき、Key をパラメータとして、リクエストを署名します。

// Select Data  
  var url = 'http://opensocialhost.com/data/select';
  var data = [ 'comment', 'feeling', 'footprint' ];

  // Array を OpenSocial Host のパラメータに変換する
  var _data = {};
  $.each(data, function(i, v) {
    _data['key'+(i+1)] = v; 
  });

  $.ajax({
    type: 'post', url: url, oauth: 'signed', data: _data, dataType: 'json'
  }).next(function(r) {
    if (r.hadError)
      throw r.errorCode;
    
    // OpenSocial Host のレスポンスを Object に変換する
    // Key はそのまま、Value は JSON (String) から Object に戻す
    var data = {};
    $.each(r.data, function(i, v) {
      data[v.key] = gadgets.json.parse(v.value);
    });   
    return data;
  
  }).next(function(data) {
    console.info(data.comment.text);
    console.info(data.comment.lastModified);
    console.info(data.feeling);
    console.info(data.footprint);
  }).error(function(e) {
    console.error(e+'');
  });

データの検索

/data/search を呼び出して、データを検索できます。このとき、フィルタ条件、ソート条件、ページング条件をパラメータとして、リクエストを署名します。

* 指定した文字列を Key に含むデータを検索できます。部分一致のみです。
* 指定した文字列を Value に含むデータを検索できます。部分一致のみです。
* Key と Value の両方を指定したときは、上記の AND 条件になります。
* page はページ番号です。インデックスではありません。
* sort は asc, desc を指定できます。ソート順はデータの追加日時です。更新日時ではありません。

// Search Data
  var url = 'http://opensocialhost.com/data/search';
  var data = {
    key: 'feeling', value: 'well', page: 1, per_page: 10, sort: 'asc'
  };

  $.ajax({
    type: 'post', url: url, oauth: 'signed', data: data, dataType: 'json'
  }).next(function(r) {
    if (r.hadError)
      throw r.errorCode;

    // OpenSocial Host のレスポンスを Object に変換する
    // Key はそのまま、Value は JSON (String) から Object に戻す    
    $.each(r.data, function(i, v) {
      v.value = gadgets.json.parse(v.value);
    });
    return $.extend(r.data, {
      page: r.page, per_page: r.per_page, total_counts: r.total_counts
    });
  
  }).next(function(data) {
    $.each(data, function(i, v) {
      console.info(v.key, v.value);
    });
    console.info(data.page, data.per_page, data.total_counts);
  }).error(function(e) {
    console.error(e+'');
  });

データのグループ化や階層化

OpenSocial Host の外部データベースは、すべてのユーザで共有して、パーミッションでアクセス件をコントロールします。ですので、どのユーザのデータなのか、どの種類のデータなのかは、次のように Key の文字列を使って表現する必要があります。

// VIEWER ID を使って、どのユーザのデータなのかを区別する
  var key = viewer.id + '$comment';
  var data = { text: 'Say Hello!', lastModified: new Date().getTime() };

データの確認 -- 2009/11/26 追加

OpenSocial Host にログインして、外部データベースの内容を確認できます。

* 指定した文字列を Key または Value に含むデータを検索できます。
* データの Key や Value、パーミッション、作成日時など、詳しく表示できます。
* データを削除できます。

関連リンク

* OpenSocial Host Core API
* OpenSocial Host ユーザフォーラム

Gadgeta GeoNotes - Building Social Mashup Container with OpenStack

2009-11-19T07:55:00.000+09:00

おはようございます。Nobuhiro Nakajima です。

Mashup Awards 5 というマッシュアップをテーマとしたコンテストに、次の作品を応募しました。

Gadgeta GeoNotes - Building Social Mashup Container with OpenStack
http://golazo.aptanacloud.com/

Gadgeta GeoNotes は、位置情報付きのテキストを投稿し、タイムライン風に共有することで、場所や地域を軸とした人の繋がりを作り出すことを目的とした OpenSocial 対応の SNS サイトです。海外への紹介も考慮し、英語サイトにしています。

投稿したテキストから位置情報を自動抽出し、それぞれを関連付けて時系列に保存します。テキストは日本語と英語に対応し、英語なら日本に限らず、世界の国や地域の位置情報も抽出できます。

投稿したテキストに、様々なガジェットを貼り付けできます。ガジェットは位置情報を受け取り、場所や地域に応じた情報を提示できます。ガジェットは OpenSocial に対応し、プロフィールや友達リスト、アクティビティを活用して、相互作用やバイラル効果を促進できます。

Gadgeta GeoNotes は OpenStack を活用した Social Mashup Container です。オープンな仕様、オープンソース、オープンなサービスから構築しています。SNS サイトの主要な特徴を備え、ガジェットの拡張により、他サービスやコンテンツとの融合の可能性を開きます。

デモビデオ

Nobuhiro Nakajima が仮想イベントの開催告知と参加を呼びかける例です。

* イベントの開催内容のテキストを投稿し、新橋付近の位置情報を検出しています。
* 参加者との連絡のために Comments ガジェットを追加しています。
* 参加表明のために Attends ガジェットを追加しています。
* 懇親会の会場を探すために、近所のバーガジェットを追加し、新橋付近のお店をリストアップしています。

まんてんが仮想イベントに参加を表明する例です。

* Friends' Activity からイベントの開催告知を知ります。
* Comments ガジェットを使って、開催者と連絡をとっています。
* Attends ガジェットを使って、参加を表明しています。また、友達の参加状況を確認しています。
* 観光スポットを紹介するために Tokyo's Art and Design Events ガジェットを追加し、新橋付近のアートなイベントをリストアップしています。

デモガジェット

となりのチャンネー
この辺りで見かけたチャンネーを紹介します。気に入った髪型のチャンネーをクリックして投票してね。投票できるチャンネーは全国各地で合計10人までですよ。となりのチャンネーは weboo さんが開発したみんなのチャンネーのアイディアを勝手に借りたものです。ありがとうございます。

Tokyo's Art and Design Events
Tokyo Art Beat is Tokyo's bilingual art & design events guide. Offering event listings, reviews and a shop, the site is updated daily and lists more than 500 current & upcoming art events, at any moment.

近所のバー
BAR-NAVI は、サントリーが提供する日本最大級のバー検索サイトです。バーを楽しむというスタイルを提案しています。エリアやバーのタイプ、特徴、雰囲気で検索できます。自分だけの隠れ家を探したり、珍しいカクテルと出会うことができます。

OpenSocial というと、大きな受け皿としてのコンテナが存在し、その上のアプリケーションという構図で考えがちですが、Gadgeta GeoNotes によって、オリジナルのコンテンツを所有する小中規模のサイトやサービスが、自らソーシャルなマッシュアップコンテナになる(なれる)という可能性を示せたと考えています。

追記です。-- 2009/11/10

SocialWeb Japan 主催 SocialWeb Conference vol.4 〜OpenSocial Night #1〜のライトニングトークの中で Gadgeta GeoNotes を紹介しました。そのときのスライドです。

追記です。-- 2009/11/19

Gadgeta GeoNotes のソースコードを公開しました。
http://golazo.googlecode.com/svn/branches/geonotes/

opensocial-jquery のディスカッショングループを立ち上げました。

2009-10-12T16:01:00.000+09:00

こんにちは。なかじまんです。

Google グループを使って opensocial-jquery のディスカッショングループを立ち上げました。

opensocial-jquery Discussion
http://groups.google.com/group/opensocial-jquery

opensocial-jquery に関係する話題であれば、なんでも OK です。opensocial-jquery を使っている方はもちろんのこと、opensocial-jquery に関心があるという方も歓迎します。

疑問や質問、要望などを受け止める場となることを期待していますので、ぜひ活用してください。

opensocial-jquery based on jQuery 1.3.2 is available

2009-10-12T15:38:00.000+09:00

Hello,

My name is Nobuhiro Nakajima, Japanese programmer.

I'm afraid my expressions may be rude or hard to read, because I'm not so good at English. But please, please be patient! I will try hard to learn English!

opensocial-jquery based on jQuery 1.3.2 is available:
http://code.google.com/p/opensocial-jquery/

opensocial-jquery is jQuery based concise JavaScript Library for rapid OpenSocial Applications development.

opensocial-jquery is designed to change the way that you write OpenSocial Applications When you use it, you can develop OpenSocial Applications by the method of developing the website by jQuery.

Therefore OpenSocial JavaScript API is good, Lightweight JavaScript API is better, and opensocial-jquery is best.

opensocial-jquery 1.3.2.5

* The opensocial-jquery 1.3.2.5 is based on jQuery 1.3.2 (courtesy of @lackac @jonca.rafal)
* The function of this release is the same as opensocial-jquery 1.0.5

opensocial-jquery 1.2.6.5

* The opensocial-jquery 1.2.6.5 is based on jQuery 1.2.6.
* The function of this release is the same as opensocial-jquery 1.0.5.
* This release is supported but is not currently the recommended release for jQuery 1.2.6.

Changelog

* issue #18
* issue #20

Thank you.

お待たせしました。jQuery 1.3.2 ベースの opensocial-jquery をリリースしました。

2009-10-12T15:25:00.000+09:00

こんにちは。なかじまんです。

お待たせしました。jQuery 1.3.2 版の opensocial-jquery をリリースしました。

OpenSocial JavaScript API is good, Lightweight JavaScript API is better, and opensocial-jquery is best.
http://code.google.com/p/opensocial-jquery/

opensocial-jquery 1.3.2.5

jQuery 1.3.2 ベースの opensocial-jquery です。機能は jQuery 1.2.6 ベースである opensocial-jquery 1.0.5 とまったく同じです。

opensocial-jquery 1.2.6.5

jQuery 1.2.6 ベースの opensocial-jquery です。機能は jQuery 1.2.6 ベースである opensocial-jquery 1.0.5 とまったく同じです。

このとおり、バージョン番号の体系を見直して振り直しています。上位 3桁はベースとなる jQuery のバージョンを、末尾 1桁は opensocial-jquery のバージョンを表すようにしました。

今後もしばらくは jQuery 1.3.2 ベースと jQuery 1.2.6 ベースの両方とも提供していく予定ですが、状況によっては jQuery 1.2.6 ベースをサボることも考えています。ですので、何かタイミングがありましたら jQuery 1.3.2 ベースへの移行をおすすめします。

opensocial-jquery 1.3.2.5 は @lackac と @jonca.rafal からソースコードの提供を受けてリリースすることができました。ありがとうございました。

opensocial-jquery templates 0.1.0 is available. It's HTML DOM based JavaScript template library for OpenSocial Application.

2009-09-24T23:19:00.005+09:00

Hello,

My name is Nobuhiro Nakajima, Japanese programmer.

I'm afraid my expressions may be rude or hard to read, because I'm not so good at English. But please, please be patient! I will try hard to learn English!

opensocial-jquery templates 0.1.0 is available.
http://code.google.com/p/opensocial-jquery/

opensocial-jquery templates is HTML DOM based JavaScript template library for OpenSocial Application. It is based on implementation of Apache Shindig and has compatibility with subset of OpenSocial Templates.

opensocial-jquery templates supports the following markup in OSML:

* ${Expr} variables and expressions into a element text and a attribute
* Set of special variables: Top, Cur, Context.index, Context.Count and Msg
* Set of special attributes: if, repeat, and var

This example is fetching and rendering a group of people using Ajax and Template.

The HTML template is as follows:

<div id="wrapper" style="display:none;">
<div repeat="${people}" class="person">
<img alt="${Cur.displayName}" src="${Cur.thumbnailUrl}" />
<a title="${Cur.displayName}" href="${Cur.profileUrl}">${Cur.displayName}</a>
</div>
<div if="${people.length > 0}" class="pager">
Showing friends from ${people.startIndex + 1} 
  to ${people.startIndex + people.length } 
  of ${people.totalResults}
</div>
<div if="${people.length == 0}" class="pager">
There's no friend yet.
</div>
</div>

The JavaScript is as follows:

$.getData('/people/@owner/@friends', function(data) {
  $('#wrapper').render({ people: data }).show();
});

View of the finished source code

opensocial-jquery templates is usable with the container which does
not support OpenSocial v0.9. And different from OpenSocial Templates of the XML base, you can edit opensocial-jquery templates by an HTML authoring tool visually. It will make a programmer and a designer happy.

Thank you.

OpenSocial Templates サブセットの opensocial-jquery templates 0.1.0 をリリースしました

2009-09-22T17:05:00.001+09:00

こんにちは。なかじまんです。

opensocial-jquery の付加機能として opensocial-jquery templates をリリースしました。opensocial-jquery templates は OpenSocial Templates (v0.9) のマークアップ言語である OSML のサブセットとその互換性を提供します。

テンプレートエンジンの中核は Apache Shindig のソースコードを使っています。が、OpenSocial Templates は XML ベースのテンプレートですので、これを HTML ベースになるように書き換えて(かなり苦労してます) jQuery との親和性を高めています。

新しいマークアップ言語を覚える必要はありますが、OpenSocial Templates と互換性があるため、OpenSocial v0.9 時代になっても、その知識や実績が無駄になりにくいと考えていますので、ちょっとした先行投資の意味合いも兼ねて、使ってみて貰えるとうれしいです。

opensocial-jquery templates は、別ファイルにしてありますので、opensocial-jquery に続けて script をロードしてください。

<script src="opensocial-jquery.min.js"></script>
<script src="opensocial-jquery.templates.min.js"></script>

jQuery.getData を使って友達リストを取得し、jQuery.fn.render とテンプレートを使って、その内容を表示する例を紹介します。iGoogle US で実行した結果です。

次の HTML がテンプレートです。友達リストを repeat 属性で繰り返し、サムネイルとニックネームを表示します。また、友達リストの取得位置、1ページあたりの取得件数、総件数を表示します。友達リストが 0件のときは、メッセージを表示します。

<div id="wrapper" style="display:none;">
<div repeat="${people}" class="person">
<img alt="${Cur.displayName}" src="${Cur.thumbnailUrl}" width="30" height="30">
<a title="${Cur.displayName}" href="${Cur.profileUrl || '#'}" 
  target="_top">${Cur.displayName}</a>
</div>
<div if="${people.length > 0}" class="pager">
Showing friends from ${people.startIndex + 1} 
  to ${people.startIndex + people.length } 
  of ${people.totalResults}
</div>
<div if="${people.length == 0}" class="pager">There's no friend yet.</div>
</div>

次は JavaScript です。jQuery.getData を使って OWNER の友達リストを取得します。そして jQuery.fn.render を使って、その友達リストをテンプレートに適用します。

  var url = '/people/@owner/@friends';
  var data = { fields: 'profileUrl' };
  $.getData(url, data, function(data) {
    $('#wrapper').render({ people: data }).show();
  });

詳しくは opensocial-jquery のドキュメントにまとめましたので、参照してください。OpenSocial Templates のサポート範囲や未実装の機能を確認できます。

今のところ opensocial-jquery templates では OpenSocial Templates の全仕様を実装しようとは考えていません。JavaScript のヒアドキュメントの代替として、小さな HTML の組み立てをサポートできるような存在を目的としています。とはいってもまだ発展段階です。何かありましたらコメントください。要望や状況に応じて対応していきます。

opensocial-jquery templates は Apache Shindig の実装を使っているため Apache License 2.0 ライセンスを採用しています。opensocial-jquery 本体とは異なりますので注意してください。今後 opensocial-jquery templates が使えると判断できて opensocial-jquery 本体に組み込むことがあれば、opensocial-jquery 本体も Apache License 2.0 にしたほうがいいのかなと考えています。

opensocial-jquery 1.0.5 をリリースしました。OAuth リクエストと認証、Album と MediaItem の取得、People と AppData の同時取得に対応しました。

2009-09-05T12:26:00.003+09:00

おはようございます。なかじまんです。

opensocial-jquery 1.0.5 をリリースしました。今回のリリースは、OAuth リクエストと認証、アルバムと写真の取得、プロフィールとアプリデータの同時取得という 3つの対応が柱です。

OAuth リクエストと認証

jQuery.ajax を使って、OAuth リクエストを認証して、外部ホストからデータを取得したり送信したりできるようにしました。

gooホームのガジェットから FriendFeed にメッセージを投稿するサンプルのソースコードと解説を用意していますので、ソースコードの雰囲気を体感してみてください。また、このガジェットが動作する様子をキャプチャして動画にしましたので、再生してみてください。

jQuery.ajax を使って、リクエストを OAuth 認証して、外部ホストにデータを送信できます。

  $.ajax({
    type: 'post',
    url: 'http://friendfeed-api.com/v2/entry',
    data: { body: 'Say Hello!' },
    dataType: 'json',
    oauth: 'friendfeed',
    success: function(data, status) {
      console.info(data, status);
    },
    error: function(xhr, status, e) {
      if (status == 'oauth') 
        $('<a href="#signin"/>')
          .text('Sign in with FriendFeed')
          .click(function() {
            $.oauth('friendfeed', function() {});
            return false;
          })
          .minimessage();      
      console.error(xhr, status, e);
    }
  });

このとき、jQuery.ajax の oauth オプションに、ガジェットXML の OAuth/Service@name を指定します。

  <OAuth>
  <Service name="friendfeed">
  <Request url="https://friendfeed.com/account/oauth/request_token"
    param_location="uri-query"/>
  <Authorization url="https://friendfeed.com/account/oauth/authorize"/>
  <Access url="https://friendfeed.com/account/oauth/access_token"
    param_location="uri-query"/>
  </Service>
  </OAuth>

jQuery.ajax は OAuth リクエストの認証を必要とするとき、エラーイベントをコールバックします。このとき status は oauth を表します。続けて jQuery.oauth を使って OAuth リクエストを認証できます。このとき、指定した OAuth/Service@name の認証ページをポップアップウィンドウで開きます。OAuth 認証してポップアップウィンドウを閉じると、コールバックしますので、その中から処理を再開できます。

詳しくは API リファレンスを見てください。なお OAuth リクエストと認証は gooホームでのみ動作確認しています。今後、他のコンテナでも動作確認をしつつ対応を進めていきます。

アルバムリストの取得

jQuery.ajax を使って VIEWER のアルバムリストを取得できます。

  $.ajax({
    url: '/albums/@viewer/@self',
    data: {},
    dataType: 'data',
    success: function(albums) {
      $.each(albums, function(i, album) {
        console.info(album.id);
        console.info(album.title);
        console.info(album.description);
        console.info(album.thumbnailUrl);
        console.info(album.ownerId);
        console.info(album.mediaItemCount);
      });
    },
    error: function(xhr, status, e) {
      console.error(xhr, status, e);
    }
  });

詳しくは API リファレンスを見てください。なお、アルバムリストの取得は orkut 仕様に準じていて orkut のみで動作確認をしています。mixi での動作確認はしていませんので、フィードバックを期待してます。

アルバムの写真リストの取得

jQuery.ajax を使って VIEWER のアルバムの写真リストを取得できます。URL でアルバムID を指定します。

  $.ajax({
    url: '/mediaitems/@viewer/@self/1251149609611',
    data: {},
    dataType: 'data',
    success: function(mediaitems) {
      $.each(mediaitems, function(i, mediaitem) {
        console.info(mediaitem.id);
        console.info(mediaitem.url);
        console.info(mediaitem.title);
        console.info(mediaitem.description);
        console.info(mediaitem.thumbnailUrl);
        console.info(mediaitem.albumId);
      });
    },
    error: function(xhr, status, e) {
      console.error(xhr, status, e);
    }
  });

詳しくは API リファレンスを見てください。なお、写真リストの取得は orkut 仕様に準じていて orkut のみで動作確認をしています。mixi での動作確認はしていませんので、フィードバックを期待してます。

プロフィールとアプリデータの同時取得

プロフィールや友達リストを取得するとき、appData パラメータを指定して、アプリケーションのデータを同時に取得できます。アプリケーションのデータ項目はカンマ区切りで指定します。

今までは、プロフィールや友達リストの取得と、アプリケーションのデータの取得が別々の 2段構えでしたが、これが 1回の jQuery.ajax で取得できるようになりますので、さらにソースコードがシンプルになるのではと期待しています。

  $.ajax({
    url: '/people/@viewer/@self',
    data: { appData: 'comment,feeling' },
    dataType: 'data',
    success: function(people) {
      var person = people[0];
      console.info(person.appData.comment);
      console.info(person.appData.feeling);
    },
    error: function(xhr, status, e) {
      console.error(xhr, status, e);
    }
  });

詳しくは API リファレンスを見てください。

質問や不具合の報告などのフィードバックは大歓迎です。また、修正パッチや拡張コードの提供も歓迎します。

海外の方から opensocial-jquery 1.0.4 や 1.0.5 を jQuery 1.3.2 に書き直したものの提供も受けています。近いうちに公開しますので、もう少しお待ちください。

追記です。jQuery.param のエンコード方法を書き換えました。今までは、空白を + にエンコードしていましたが、これを %20 でエンコードするようにしました。おそらく影響はないと思いますが、お伝えしておきます。

追記です。@datoka さん。フィードバックありがとうございました。

@datoka @nakajiman opensocial jquery v1.0.5 album, mediaitemともmixiで動いております！パラメータ指定は（元々）無視されますが

opensocial-jquery と Google Gadget Editor を使って iGoogle production でガジェットを開発しよう

2009-08-20T07:59:00.002+09:00

おはようございます。なかじまんです。

2009年8月12日米国の iGoogle は OpenSocial に正式対応しました。残念ながら日本はまだですが、近いうちに対応することが予想できます。なので、今後 iGoogle に向けた OpenSocial ガジェット (アプリ) の開発も広がってくるでしょう。

もちろん opensocial-jquery も iGoogle を熱烈サポートしていきます。なんたって最終的には全世界がターゲットになるのですからね。そこで iGoogle を使った opensocial-jquery のチュートリアルを用意しました。Google アカウントさえあれば WEB ブラウザ 1つだけで体験できる構成にしています。

それではチュートリアルをはじめます。

はじめに iGoogle (米国) http://www.google.com/ig?hl=en にログインしてください。

続けて iGoogle に Developer Gadget を追加してください。

続けて iGoogle に Google Gadget Editor を追加してください。そして Hello, world! ガジェットのソースコードが表示されるのを確認してください。

Google Gadget Editor で File メニューから Save を選択してください。続けて playground.xml と入力して OK ボタンをクリックし、Hello, world! ガジェットを保存してください。

playground.xml の URL を確認します。playground.xml のリンクを開いてください。

このときの playground.xml の URL を手元に控えてください。次のような URL になるはずです。数値の部分は各自によって異なります。

http://hosting.gmodules.com/ig/gadgets/file/(数値)/playground.xml

Developer Gadget で、手元に控えた playground.xml の URL を入力して Add ボタンをクリックし、iGoogle にガジェットを登録してください。

iGoogle に playground.xml として保存したガジェットが表示されます。

iGoogle が playground.xml をキャッシュしないように cached チェックボックスを OFF にします。

Google Gadget Editor で playgorund.xml を赤字のとおり修正してください。そして File メニューから Save を選択して、ガジェットを保存してください。

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="hello world example" />
<Content type="html"><![CDATA[
<form name="form">
<input type="text" name="q" />
<select name="c" />
<option value="10">10 results</option>
<option value="20">20 results</option>
<option value="30">30 results</option>
</select>
<input type="submit" value="Search">
</form>
]]></Content>
</Module>

ブラウザの更新ボタンをクリックし、ガジェットをリロードしてください。そして、検索ボックスが表示されるのを確認してください。

※ playground.xml に HTML を記述すると、そのままガジェットで表示されます。

Google Gadget Editor で playgorund.xml を赤字のとおり修正してください。そして File メニューから Save を選択して、ガジェットを保存してください。

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="hello world example" />
<Content type="html"><![CDATA[
<form name="form">
<input type="text" name="q" />
<select name="c" />
<option value="10">10 results</option>
<option value="20">20 results</option>
<option value="30">30 results</option>
</select>
<input type="submit" value="Search">
</form>
<script src="http://scripts.lrlab.to/opensocial-jquery-1.0.4.min.js"></script>
<script>
jQuery(function($) {
  $(document.form).submit(function() {
    alert(this.q.value + ' ' + this.c.value);
    return false;
  });
});
</script>
]]></Content>
</Module>

ブラウザの更新ボタンをクリックし、ガジェットをリロードしてください。そしてSearch ボタンをクリックし、入力内容が alert 表示されるのを確認してください。

※ opensocial-jquery は http://scripts.lrlab.to/opensocial-jquery-1.0.4.min.js のアドレスで配信しています。詳しくは opensocial-jquery on the cloud を見てください。
※ playground.xml に JavaScript を記述すると、そのままガジェットで実行されます。

Google Gadget Editor で playgorund.xml を赤字のとおり修正してください。そして File メニューから Save を選択して、ガジェットを保存してください。

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="hello world example" />
<Content type="html"><![CDATA[
<form name="form">
<input type="text" name="q" />
<select name="c" />
<option value="10">10 results</option>
<option value="20">20 results</option>
<option value="30">30 results</option>
</select>
<input type="submit" value="Search">
</form>
<div id="videos"></div>
<script src="http://scripts.lrlab.to/opensocial-jquery-1.0.4.min.js"></script>
<script>
jQuery(function($) {
  $(document.form).submit(function() {
    var url = 'http://gdata.youtube.com/feeds/videos';
    var data = { alt: 'json',
      vq: this.q.value,
      'max-results': this.c.value
    };
    $.getJSON(url, data, function(json) {
      $.each(json.feed.entry, function() {
        $('<img />')
          .attr('src', this.media$group.media$thumbnail[0].url)
          .appendTo('#videos');
      });
    });
    return false;
  });
});
</script>
]]></Content>
</Module>

ブラウザの更新ボタンをクリックし、ガジェットをリロードしてください。そして Search ボタンをクリックし、入力内容にしたがって YouTube から動画を検索し、サムネイルがリスト表示されるのを確認してください。

※ opensocial-jquery は jQuery の Ajax API をクロスドメイン対応に拡張します。
※ YouTube の動画検索は YouTube Data API を使っています。

Google Gadget Editor で playgorund.xml を赤字のとおり修正してください。そして File メニューから Save を選択して、ガジェットを保存してください。

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="hello world example">
<Require feature="dynamic-height" />
</ModulePrefs>
<Content type="html"><![CDATA[
<form name="form">
<input type="text" name="q" />
<select name="c" />
<option value="10">10 results</option>
<option value="20">20 results</option>
<option value="30">30 results</option>
</select>
<input type="submit" value="Search">
</form>
<div id="videos"></div>
<script src="http://scripts.lrlab.to/opensocial-jquery-1.0.4.min.js"></script>
<script>
jQuery(function($) {
  $(document.form).submit(function() {
    var url = 'http://gdata.youtube.com/feeds/videos';
    var data = { alt: 'json',
      vq: this.q.value,
      'max-results': this.c.value
    };
    $.getJSON(url, data, function(json) {
      $.each(json.feed.entry, function() {
        $('<img />')
          .attr('src', this.media$group.media$thumbnail[0].url)
          .appendTo('#videos');
      });
    });
    $(window).adjustHeight();
    return false;
  });
});
</script>
]]></Content>
</Module>

ブラウザの更新ボタンをクリックし、ガジェットをリロードしてください。そして Search ボタンをクリックし、サムネイルの数に応じて、ガジェットの高さが自動調整されるのを確認してください。

※ playground.xml に <Require feature="dynamic-height"> を記述すると、jQuery.fn.adjustHeight がロードされます。

Google Gadget Editor で playgorund.xml を赤字のとおり修正してください。そして File メニューから Save を選択して、ガジェットを保存してください。

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="hello world example">
<Require feature="dynamic-height" />
</ModulePrefs>
<Content type="html"><![CDATA[
<style>
#videos img { margin: 2px; width: 80px; hegith: 60px; }
</style>
<form name="form">
<input type="text" name="q" />
<select name="c" />
<option value="10">10 results</option>
<option value="20">20 results</option>
<option value="30">30 results</option>
</select>
<input type="submit" value="Search">
</form>
<div id="videos"></div>
<script src="http://scripts.lrlab.to/opensocial-jquery-1.0.4.min.js"></script>
<script>
jQuery(function($) {
  $(document.form).submit(function() {
    var url = 'http://gdata.youtube.com/feeds/videos';
    var data = { alt: 'json',
      vq: this.q.value,
      'max-results': this.c.value
    };
    $.getJSON(url, data, function(json) {
      $.each(json.feed.entry, function() {
        $('<img />')
          .attr('src', this.media$group.media$thumbnail[0].url)
          .appendTo('#videos');
      });
    });
    $(window).adjustHeight();
    return false;
  });
});
</script>
]]></Content>
</Module>

ブラウザの更新ボタンをクリックし、ガジェットをリロードしてください。そして Search タンをクリックし、CSS が適用されるのを確認してください。

※ playground.xml に CSS を記述すると、そのままガジェットで適用されます。

これでチュートリアルはおしまいです。

これ以降は opensocial-jquery のドキュメントを参照してください。その中で質問や要望が出てきましたら、お気軽にコメントください。

opensocial-jquery on the cloud (大げさなタイトルでごめんなさい)

2009-08-19T07:48:00.002+09:00

おはようございます。なかじまんです。

OpenSocial ガジェット (アプリ) を開発するとき、jQuery や Dojo、YUI などメジャーなライブラリを Google AJAX Libraries API からロードしてるのをよく見かけます。

Google AJAX Libraries API を使うと...

* ライブラリをホストする必要がない
* ライブラリのロード効率がロケーションに左右されない
* ライブラリのブラウザ(コンテナ?)キャッシュを共有できる

といったよいことがあり、システム上の都合のみならず、ユーザ体験の向上にもつながる効果が期待できます。

そこで opensocial-jquery でも同じ効果を期待して Amazon CloudFront という CDN サービスを使って opensocial-jquery を配信することにしました。

アドレスは、次のとおりです。特に制限などはしませんので、自由に使ってください。

http://scripts.lrlab.to/opensocial-jquery-1.0.4.min.js

不審な点がありましたら、レスポンスヘッダを参照してください。こんな感じです。

x-amz-id-2: (省略)
x-amz-request-id: (省略)
Date: Fri, 14 Aug 2009 01:54:08 GMT
Expires: Wed, 01 Jan 2020 00:00:00 GMT
Last-Modified: Fri, 14 Aug 2009 01:23:02 GMT
Etag: "1b7460e4035ac8cb3d0f1c4a9e2c1d59"
Content-Type: text/javascript
Content-Length: 73683
Server: AmazonS3
Age: 86386
X-Cache: Hit from cloudfront
Via: 1.0 d8c8b41b52e430ca9dc4842099bfe99a.cloudfront.net:11180 (CloudFront), 1.0 dfd248577076af79b5214034bb864f31.cloudfront.net:11180 (CloudFront)
Connection: keep-alive

Amazon CloudFront は転送量で課金されますが、よっぽど膨大なアクセスがない限り、ちょっとした課金で済みますので、今のところ心配はしていません。もしも高額になったり、負担が増えることがあれば、事前に相談の周知をします。むしろそのくらい使って貰えたらうれしいです。

また Expires ヘッダを使って 2020年1月1日までキャッシュを促すようにしていますので、ブラウザやコンテナがキャッシュ制御してくれれば、思ってるほどアクセスは発生しなかもしれませんね。

opensocial-jquery と Google Gadget Editor を使って gooホーム sandbox でガジェットを開発しよう

2009-08-14T19:37:00.004+09:00

こんばんは。なかじまんです。

opensocial-jquery のチュートリアルを用意しました。Google と goo のアカウントさえあれば、WEB ブラウザ 1つだけで体験できる構成にしています。

opensocial-jquery は jQuery を使って WEB サイトを開発する手法を OpenSocial のガジェットにも持ち込もうという目的ではじめたものです。

ですので、このチュートリアルは、日々 jQuery を使って WEB サイトを開発しているがOpenSocial 環境でガジェットを開発したことがないとか、開発しようとしたが新しいことを覚えるのに抵抗を感じているという方々に体験して貰いたいものです。

まずは OpenSocial のガジェットは特別なもの... という感覚をリセットして、jQuery を使って WEB サイトを開発した経験を opensocial-jquery によって OpenSocial のガジェット開発にも再活用できないか...という視点で再確認してはどうかと提案します。その中で新しい発見があればうれしい限りです。

それではチュートリアルをはじめます。

はじめに Google にログインしてください。

次に Google Gadget Editor を開いてください。そして Hello, world! ガジェットが表示されるのを確認してください。

Hello, world! ガジェットを赤字のとおり修正してください。

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="hello world example"
  description="hello world example" />
<Content type="html" view="profile,home,canvas"><![CDATA[
Hello, world!
]]></Content>
</Module>

File メニューから Save を選択してください。続けて playground.xml と入力して OK ボタンをクリックし、Hello, world! ガジェットを保存してください。

playground.xml の URL を確認します。playground.xml のリンクを開いてください。

このときの playground.xml の URL を手元に控えてください。次のような URL になるはずです。数値の部分は各自によって異なります。

http://hosting.gmodules.com/ig/gadgets/file/(数値)/playground.xml

続けて goo ホーム sandbox にログインしてください。そして、ガジェット開発管理へをクリックしてください。

※ goo ホーム sandbox のアカウントを持っていないときはディベロッパー申請をしてください。数営業日で受理されます。

手元に控えた playground.xml の URL を入力して新規作成ボタンをクリックし、ガジェットを登録してください。

そして、このガジェットを追加ボタンをクリックし、ガジェットをインストールしてください。

ガジェットを追加ボタンをクリックしてください。

このガジェットを見るボタンをクリックしてください。

playground.xml として保存したガジェットが表示されます。

このときのガジェットの URL を手元に控えてください。次のような URL になるはずです。gooID や英数字の部分は各自によって異なります。

http://sandbox.home.goo.ne.jp/gadget/canvas/(gooID)/(英数字)/(英数字)

Google Gadget Editor に戻り、playgorund.xml を赤字のとおり修正してください。そして File メニューから Save を選択して、ガジェットを保存してください。

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="hello world example"
  description="hello world example" />
<Content type="html" view="profile,home,canvas"><![CDATA[
<form name="form">
<input type="text" name="q" />
<select name="c" />
<option value="10">10件</option>
<option value="20">20件</option>
<option value="30">30件</option>
</select>
<input type="submit" value="検索">
</form>
]]></Content>
</Module>

goo ホーム sandbox に戻り、ブラウザの更新ボタンをクリックし、ガジェットをリロードしてください。そして、検索ボックスが表示されるのを確認してください。

※ playground.xml に HTML を記述すると、そのままガジェットで表示されます。

Google Gadget Editor に戻り、playgorund.xml を赤字のとおり修正してください。そして File メニューから Save を選択して、ガジェットを保存してください。

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="hello world example"
  description="hello world example">
<Require feature="opensocial-jquery" />
</ModulePrefs>
<Content type="html" view="profile,home,canvas"><![CDATA[
<form name="form">
<input type="text" name="q" />
<select name="c" />
<option value="10">10件</option>
<option value="20">20件</option>
<option value="30">30件</option>
</select>
<input type="submit" value="検索">
</form>
<script>
jQuery(function($) {
  $(document.form).submit(function() {
    alert(this.q.value + ' ' + this.c.value);
    return false;
  });
});
</script>
]]></Content>
</Module>

goo ホーム sandbox に戻り、ブラウザの更新ボタンをクリックし、ガジェットをリロードしてください。そして、検索ボタンをクリックし、入力内容が alert 表示されるのを確認してください。

※ playground.xml に <Require feature="opensocial-jquery"> を記述すると、opensocial-jquery がロードされます。
※ playground.xml に JavaScript を記述すると、そのままガジェットで実行されます。

Google Gadget Editor に戻り、playgorund.xml を赤字のとおり修正してください。そして File メニューから Save を選択して、ガジェットを保存してください。

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="hello world example"
  description="hello world example">
<Require feature="opensocial-jquery" />
</ModulePrefs>
<Content type="html" view="profile,home,canvas"><![CDATA[
<form name="form">
<input type="text" name="q" />
<select name="c" />
<option value="10">10件</option>
<option value="20">20件</option>
<option value="30">30件</option>
</select>
<input type="submit" value="検索">
</form>
<div id="videos"></div>
<script>
jQuery(function($) {
  $(document.form).submit(function() {
    var url = 'http://gdata.youtube.com/feeds/videos';
    var data = { alt: 'json',
      vq: this.q.value,
      'max-results': this.c.value
    };
    $.getJSON(url, data, function(json) {
      $.each(json.feed.entry, function() {
        $('<img />')
          .attr('src', this.media$group.media$thumbnail[0].url)
          .appendTo('#videos');
      });
    });
    return false;
  });
});
</script>
]]></Content>
</Module>

goo ホーム sandbox に戻り、ブラウザの更新ボタンをクリックし、ガジェットをリロードしてください。そして、検索ボタンをクリックし、入力内容にしたがって YouTube から動画を検索し、サムネイルがリスト表示されるのを確認してください。

※ opensocial-jquery は jQuery の Ajax API をクロスドメイン対応に拡張します。
※ YouTube の動画検索は YouTube Data API を使っています。

Google Gadget Editor に戻り、playgorund.xml を赤字のとおり修正してください。そして File メニューから Save を選択して、ガジェットを保存してください。

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="hello world example"
  description="hello world example">
<Require feature="opensocial-jquery" />
<Require feature="dynamic-height" />
</ModulePrefs>
<Content type="html" view="profile,home,canvas"><![CDATA[
<form name="form">
<input type="text" name="q" />
<select name="c" />
<option value="10">10件</option>
<option value="20">20件</option>
<option value="30">30件</option>
</select>
<input type="submit" value="検索">
</form>
<div id="videos"></div>
<script>
jQuery(function($) {
  $(document.form).submit(function() {
    var url = 'http://gdata.youtube.com/feeds/videos';
    var data = { alt: 'json',
      vq: this.q.value,
      'max-results': this.c.value
    };
    $.getJSON(url, data, function(json) {
      $.each(json.feed.entry, function() {
        $('<img />')
          .attr('src', this.media$group.media$thumbnail[0].url)
          .appendTo('#videos');
      });
    });
    $(window).adjustHeight();
    return false;
  });
});
</script>
]]></Content>
</Module>

goo ホーム sandbox に戻り、ブラウザの更新ボタンをクリックし、ガジェットをリロードしてください。そして、検索ボタンをクリックし、サムネイルの数に応じて、ガジェットの高さが自動調整されるのを確認してください。

※ playground.xml に <Require feature="dynamic-height"> を記述すると、jQuery.fn.adjustHeight がロードされます。

Google Gadget Editor に戻り、playgorund.xml を赤字のとおり修正してください。そして File メニューから Save を選択して、ガジェットを保存してください。

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="hello world example"
  description="hello world example">
<Require feature="opensocial-jquery" />
</ModulePrefs>
<Content type="html" view="profile,home,canvas"><![CDATA[
<style>
#videos img { margin: 2px; width: 80px; hegith: 60px; }
</style>
<form name="form">
<input type="text" name="q" />
<select name="c" />
<option value="10">10件</option>
<option value="20">20件</option>
<option value="30">30件</option>
</select>
<input type="submit" value="検索">
</form>
<div id="videos"></div>
<script>
jQuery(function($) {
  $(document.form).submit(function() {
    var url = 'http://gdata.youtube.com/feeds/videos';
    var data = { alt: 'json',
      vq: this.q.value,
      'max-results': this.c.value
    };
    $.getJSON(url, data, function(json) {
      $.each(json.feed.entry, function() {
        $('<img />')
          .attr('src', this.media$group.media$thumbnail[0].url)
          .appendTo('#videos');
      });
    });
    $(window).adjustHeight();
    return false;
  });
});
</script>
]]></Content>
</Module>

goo ホーム sandbox に戻り、ブラウザの更新ボタンをクリックし、ガジェットをリロードしてください。そして、検索ボタンをクリックし、CSS が適用されるのを確認してください。

※ playground.xml に CSS を記述すると、そのままガジェットで適用されます。

これでチュートリアルはおしまいです。

これ以降は opensocial-jquery のドキュメントを参照してください。その中で質問や要望が出てきましたら、お気軽にコメントください。

opensocial-jquery 1.0.4 をリリースしました

2009-08-13T20:24:00.007+09:00

こんばんは。なかじまんです。opensocial-jquery 1.0.4 をリリースしました。

opensocial-jquery
http://code.google.com/p/opensocial-jquery/

1.0.4 は Google Friend Connect (GFC) 対応の強化とバグ対応です。

言語の選択

jQuery.container.locale を使って、サイトの言語を指定できるようにしました。あらかじめ GFC の管理画面でサイト言語を設定しておけますが、その設定よりも優先します。省略したときは、既定のサイト言語になります。

jQuery.container.locale = 'en';

jQuery.fn.gadget を使って、ガジェットを表示するとき、対象の要素に lang か xml:lang 属性があれば、その言語でガジェットを表示するようにしました。このときjQuery.container.locale より優先します。

<script type="text/javascript">
$('div.gadget').gadget('http://example.com/gadgets.xml');
</script>
<div class="gadget" lang="ja"></div>
<div class="gadget" xml:lang="ja"></div>

キャンバスビュー

jQuery.fn.gadget を使って、ガジェットを表示するとき、対象の要素のクラス名に canvas を含むとき、ガジェットをキャンバスビューで表示するようにしました。

<script type="text/javascript">
$('div.gadget').gadget('http://example.com/gadgets.xml');
</script>
<div class="gadget" class="canvas"></div>

スキン

jQuery.skin を使って、スキンを参照できるようにしました。BG_COLOR といった Gadgets API 形式のほかにも bgColor といった JavaScript ライクなキー名でも参照できるようにしてあります。以下の実例は、同じ結果になります。

$.skin('BG_COLOR');
$.skin('bgColor');

バグ対応

Issue 19: fields.split(',') した後、trim すべきじゃないか。

その他

ガジェットや Google Friend Connect でもない普通のサイトで、普通の jQuery としても使えるようにしました。

デモ

Google Friend Connect In-page integration

Golazo GeoNotes

Golazo GeoNotes is available. It's social web app that integrated with Google Friend Connect highly.

2009-08-12T16:32:00.002+09:00

Hello,

I'm afraid my expressions may be rude or hard to read, because I'm not so good at English. But please, please be patient! I will try hard to learn English!

Thank you very much for the chance to introduce Golazo GeoNotes.

Golazo GeoNotes
http://golazo.aptanacloud.com/

Golazo GeoNotes is the social web application that integrated with Google Friend Connect (GFC) highly. I developed this demo app from the following purpose.

* What kind of a social web application can we build when we use GFC platform and API?

* When we use GFC platform and API, how far we can develop a social Web application effectively?

In this app, you post a geographic text, and can associate a geographic coordinate automatically. And you can share the text with a friend.

This app depends on GFC platform and API for the following social functions.

* With sign-in button of GFC and and two-legged OAuth by fcauth this app authenticate an account and link a profile.

* This app displays Site View, Home View, Profile View, and Canvas View with a social graph of GFC.

* This app displays members, friends, footprints, activities, chat, comment, and recommend with a Social Gadgets in each
view.

* This app depends on Members Gadgets for the management of the profile, a search and the invitation of the friend.

A development environment and the volume of this app are as follows.

* Aptana Cloud (Jaxer, Apache2, MySQL5)
* ActiveJS
* opensocial-jaxer-client
* opensocial-jquery
* jQuery XML to JSON Plugin
* CSS Browser Selector

* 896 lines of JavaScript on client and server.
* 10 pages of HTML
* 2 tables on database
* 9 social gadgets

I want to contribute to the Jaxer, GFC, and OpenSocial with this demo app. Did you think to develop the custom social web application that used Jaxer and GFC?

Thank you.