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

おはようございます。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 で書きかえたソースコードです。

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

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

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 jQuery Network Distribution 配布URL変更のお知らせ

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

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 の視点で調べてみました

おはようございます。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 ...&c=wavecom.google.gadgets.auth.AuthTokenException: Failure for container wave

Wave は Contact ベースの関係のようですので、OpenSocial に対応するなら iGoogle モデルになるのかなという印象です。もうできてたりして。

といったところを調べてみました。結果、現状の OpenSocial jQuery のまま gadgets.* API なら使えることが把握できました。役に立ちそうであれば使ってみてください。

メッセージの表示に加え、明示的もしくは自動的にメッセージを閉じる強化をした OpenSocial jQuery Mini Message プラグインを公開しました

おはようございます。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 で自動化する方法

こんばんは。しゃっくりが止まらなくなって、丸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 プラグインを公開しました。

おはようございます。ちょっと体調のすぐれない 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 スクリーンキャプチャの追加

OpenSocial jQuery autoHeight 1.0.0 is available

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 で、確実に !? ガジェットの高さを自動調整する方法

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

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が動作する様子を動画にしました。文章のフォントサイズを変更すると、その変化に応じて、ガジェットの高さが自動調整されることが見て分かります。