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

こんにちは。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 のガジェットは HTML5 で動作することを Pacman で確認してみた

こんばんは。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 をゲームやエンタメのプラットフォームとして使うことも十分考えられますね。

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

こんにちは。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 くらいの感覚で利用できるようになればと考えています。

opensocial-jquery と Google Gadget Editor を使って iGoogle production でガジェットを開発しよう

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

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 OpenSocial ガジェット向けにカスタマイズした jQuery とそのプラグインです

おはようございます。なかじまんです。opensocial-jquery 0.1.0 をリリースしました。

opensocial-jquery は、OpenSocial ガジェット (アプリケーション) 向けにカスタマイズした jQuery とそのプラグインです。opensocial-jquery を使うと、OpenSocial API と Gadgets API をほとんど意識することなく、jQuery を使ってウェブサイトを開発するノリで OpenSocial ガジェットを開発できます。

実例

まずは、サンプルのソースコードを紹介します。ガジェットのソースコードですが、jQuery を使ってウェブサイトを開発するのと変わらないでしょ?



<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="jQuery.getJSON - samples - opensocial-jquery">
<Require feature="dynamic-height" />
<Require feature="settitle" />
</ModulePrefs>
<UserPref name="tag" default_value="dog" required="true" />
<Content type="html"><![CDATA[
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.gadgets.js"></script>
<script type="text/javascript">
jQuery(function($) {

// Retrieves a preference as a string.
var tag = $.pref('tag');

// Sets the gadget title.
$(window).title(tag + ' - YouTube');

// Fetches content from the YouTube that content into the callback function.
var url = 'http://gdata.youtube.com/feeds/videos';
var data = { vq: tag, 'max-results': 21, alt: 'json' };

$.getJSON(url, data, function(json) {

$.each(json.feed.entry, function() {

var img = $('<img width="80" heieht="60" />')
.attr('src', this.media$group.media$thumbnail[0].url);

$('<a target="_blank" />')
.attr('href', this.media$group.media$player[0].url)
.append(img)
.appendTo('#videos');
});

// Adjusts the gadget height.
$(window).adjustHeight();
});

});
</script>
<style type="text/css">
<!--
#videos img {
border: 0;
margin: 2px;
width: 80px;
height: 60px;
}
-->
</style>
<div id="videos"></div>
]]></Content>
</Module>

opensocial-jquery は jQuery 本体の改良とプラグインから構成しています。

jQuery 本体

(1) jQuery.ajax

jQuery.ajax を介したリクエストは、すべて gadgets.io.makeRequest に橋渡しします。すべてのリクエストがガジェットサーバのプロキシで中継されます。そのため、クロスドメインリクエストの制約がありません。

text, html, xml, json, jsonp, script すべての dataType が使えます。jsonp や script であっても Gadgets サーバのプロキシで中継します。もちろん jQuery.ajax のショートカットである jQuery.fn.load, jQuery.get, jQuery.post, jQuery.getJSON, jQuery.getScript も使えます。

(2) dataType="feed" と jQuery.getFeed

jQuery.ajax の dateType として feed を追加しました。gadgets.io.makeRequest でgadgets.io.ContentType.FEED を指定したのと同じです。ショートカットとして jQuery.getFeed が使えます。

(3) jQuery(function() {}) と jQuery.ready

ガジェットコンテナのライフサイクルを尊重し、gadgets.util.registerOnLoadHandler のタイミングで ready イベントが起こるようにしています。

jQuery プラグイン

(4) jQuery(window).title

ガジェットのタイトルを変更できます。gadgets.window.setTitle に橋渡ししています。

(5) jQuery(window).adjustHeight

ガジェットの高さを自動調整します。高さを指定することもできます。gadgets.window.adjustHeight に橋渡ししています。

(6) jQuery.pref

ガジェットのユーザ設定を取得します。gadgets.Prefs.getString に橋渡ししています。

Shindig feature

opensocial-jquery は Shindig feature 形式でアーカイブしています。Shindig の feature として追加すると、次のように Require要素で opensocial-jquery の JavaScript 群をインポートできます。そのため script タグは不要です。

<ModulePrefs title="jQuery.getJSON - samples - opensocial-jquery">
<Require feature="opensocial-jquery" />
</ModulePrefs>

今後の予定

(a) jQuery.ajax を OAuth に対応することを検討しています。OAuth やその手続きをなるべく意識せずに使えればベストです。OAuth の深い知識が必要かな。やっぱり。

(b) gadgets.* を jQuery ライクに取り込んでいきます。よく使うと思われるものから優先的に取り組みます。はじめは gadgets.views が候補です。canvas ビューなど、複数のビューを使うことをサポートします。

(c) 各 opensocial.DataRequest を jQuery ライクに取り込みます。jQuery.getData を追加して "/people/@me/@friends" のように OpenSocial RESTful Protocol や RPC Protocol 的に条件指定できることを検討しています。各 opensocial.request* は jQuery.postData として追加することを検討しています。

opensocial-jquery を通じて、OpenSocial ガジェットの開発に貢献できればと願っています。以上、リリースのお知らせでした。

自作の Google ガジェットが Google ディレクトリに登録されました

郵便番号から住所を検索する Google ガジェットを作ってみました

入力した郵便番号の住所、フリガナ、緯度経度を表示する Google ガジェットを作ってみました。Add to Google ボタンをクリックして、あなたの iGoogle に追加できます。

↑以前に自作した Google ガジェットが Google ディレクトリに登録されました。今後は、みなさんの iGoogle のコンテンツを追加リンクをたどって、この Google ガジェットを追加できます。

ここでは、自作の Google ガジェットを Google ディレクトリに登録する手順を紹介します。

Google ガジェットをただ動かすだけなら、ごく限られたメタ情報だけ指定すればよいのですが、Google ディレクトリに公開するには、より多くのメタ情報 を付与する必要があります。

自作した Google ガジェットのメタ情報(ModulePrefs 要素)は、次のとおりです。実際にこのメタ情報で Google ディレクトリに登録できましたので、これから登録しようとするときのテンプレートとして使えると思います。

<ModulePrefs 
  title="郵便番号から住所を検索する"
  description="指定した郵便番号の住所、フリガナ、緯度経度を表示するガジェットです。"
  author="nakajiman"
  author_email="nakajiman(at)lrlab.to"
  screenshot="http://developmentor.lrlab.to/postal/gadgets/lookup_screenshot.gif"
  thumbnail="http://developmentor.lrlab.to/postal/gadgets/lookup_thumbnail.gif"
  author_location="Yokohama, Kanagawa, Japan"
  author_affiliation="LEARNING RESOURCE LAB"
  title_url="http://developmentor.lrlab.to/postal/"
>
</ModulePrefs>

Google ディレクトリに登録すると、一般に広く公開することになるからでしょうか、作者に関するメタ情報を要求します。といっても、その作者が実在するかどうかを確認するステップはありませんので、個人を特定できるような情報までは付与する必要はないようです。

特に作者のメールアドレスについては Google 自身が 任意の電子メール システムを使用できますが、スパム対策のため個人用の電子メール アドレスは使用しないでください。 といった説明をしているくらいです。ですので、何かあったときに連絡がとれるようなヒントになっていればよいわけで、私の場合は、メールアドレスの @ を (at) と表記しています。

あとは Google ガジェット自体の XML ファイル以外に、Google ガジェットを紹介するページに表示するスクリーンショット画像と、Google ディレクトリの一覧に表示するサムネイル画像を要求します。その画像が表示される様子は、後述のスクリーンキャプチャを参考にしてください。

準備ができたら、自作した Google ガジェットを Google ディレクトリに登録するための申請をします。といっても簡単で、Google ガジェットの XML ファイルの URL を Google に送信する だけです。これでおしまいです。

申請してから 5日ほどで、次のように Google ディレクトリに登録されて、閲覧できるようになしました。ただし、この時点ではまだ iGoogle のコンテンツを追加のリンクからたどることはできませんでした。



申請してから 7日ほど(Google ディレクトリに登録されてから 2日後)で、次のように iGoogle のコンテンツを追加のリンクからたどったり、検索できるようになりました。



Google のサービスは、基本的に機械処理するとよく聞いていますので、その中で 1週間という期間はかなり長いですね。もしかすると、Google ガジェットの申請手続きの一部は、人手が介入しているような気にもさせます。

といったように、自作した Google ガジェットは、簡単な手続きで Google ディレクトリに公開できます。一般に広く見てもらえ、使ってもらえるこれ以上のチャネルはないと思いますので、Google ガジェットを作ったなら、Google ディレクトリに公開してみてはどうでしょうか。

そうそう。忘れていました。ここでは Google ガジェットがどういうもので、どう作るのか紹介しませんでした。Google ガジェットの XML ファイル を見ると、その雰囲気がつかめると思います。

Vista、Google、Yahoo! 対応 ガジェットプログラミングのためのJavaScript入門 アスキー書籍編集部 by G-Tools

郵便番号から住所を検索する Google ガジェットを作ってみました

入力した郵便番号の住所、フリガナ、緯度経度を表示する Google ガジェットを作ってみました。Add to Google ボタンをクリックして、あなたの iGoogle に追加できます。




7桁の郵便番号を入力すると、その郵便番号の住所、フリガナ、緯度経度の検索をはじめます。検索ボタンは使えますがオマケです。検索結果の住所、フリガナ、緯度経度は、テキストエリアに表示して選択状態になりますので、そのままコピーして素早く使えます。

この Google ガジェットは Postal Search Ajax API を使って実現しています。その仕組みやソースコードに関心がありましたら、郵便番号から住所を検索するガジェット を見てくださいね。

今年はこの投稿が最後になりそうです。では、良いお年を！

Vista、Google、Yahoo! 対応 ガジェットプログラミングのためのJavaScript入門 アスキー書籍編集部 by G-Tools

Google Gadgets の高さを自動調整する方法

たぶん1年くらい前だったと思います。その頃の Google Gadgets は、その表示する内容に応じて高さ height を自動調整する方法がなく(見つからず)、固定しかできないと諦めていました。

久々に Google Gadgets を作る機会があり、ドキュメントを読み直してみると、Google Gadgets API Reference の JavaScript Libraries の中に、高さを自動調整してくれるライブラリがあるではないですか！

次のように Require 要素を使って dynamic-height ライブラリをインポートして、

<ModulePrefs 
  title="郵便番号から住所を検索する"
>
<Require feature="dynamic-height" />
</ModulePrefs>

ページをロードしたときに _IG_AdjustIFrameHeight を呼び出します。

jQuery(function($) {
  _IG_AdjustIFrameHeight();
    ･･･
});

これだけで、コンテンツの内容に応じて、Google Gadgets の高さが自動調整されます。

ただし、表示した後に高さを調整するため、高さの初期値を変えるものではありません。ですので、あらかじめ高さを決められるなら ModulePrefs 要素の height 属性を使うべきですね。

Googleガジェットプログラミング入門 井上 章 by G-Tools

Google Gadgets の meta@name=viewport と iPhone/iPod touch の関係は？

iGoogle に追加した Google Gadgets の iframe を覗くと、その head 要素に、次のような meta 要素があることに気が付きました。

<meta id="iphone-viewport" content="width=320;
  maximum-scale=1.0;
  minimum-scale=1.0;
  initial-scale=1.0;
  user-scalable=no"
name="viewport"/>

これは iPhone と iPod touch の Safari から見たときに、自動的に拡大(縮小)を無効にして画面一杯に表示するという指示を意味します。

この meta 要素を使う入口ってどこにあるのでしょうか。ちょっと考えたり、振り返ったりしても思い当たりませんでした。iPhone と iPod touch に関係があるハズなんですが・・・。

iPhoneショック ケータイビジネスまで変える驚異のアップル流ものづくり 林 信行 by G-Tools