tag:blogger.com,1999:blog-16470898425015824842024-02-21T19:54:33.180+09:00Google Apps Script コピペ屋Google Apps Script のポテンシャルはものすごい高いと思う件。
なのでそれを確かめてみようかと。jinlingrenhttp://www.blogger.com/profile/00780490075308368309noreply@blogger.comBlogger10125tag:blogger.com,1999:blog-1647089842501582484.post-61215082604345465042012-03-16T19:21:00.000+09:002012-03-16T23:05:38.467+09:00グリッドパネル? Grid<br />
縦横格子状に自在に並べるにはグリッドパネルを使う。<br />
createGridでグリッドパネルを作り出し、そこに色々配置してみる。<br />
<br />
<pre class="brush:js">var app = UiApp.createApplication();
var grid = app.createGrid(4, 2);
grid.setWidget(0, 0, app.createLabel('Name'));
grid.setWidget(0, 1, app.createTextBox());
grid.setWidget(1, 0, app.createLabel('Address'));
grid.setWidget(1, 1, app.createTextBox());
grid.setWidget(2, 0, app.createLabel('Tel'));
grid.setWidget(2, 1, app.createTextBox());
grid.setWidget(3, 1, app.createButton('Submit'));
app.add(grid);</pre>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjabpAh-dXkYyEoTzoj37UrNvPx32ZraBNMrfNN9tV1527ttZfgcZPzLWV3z5YEbb7qDfbK1HsrB46OytJKvdwQrI7WpzN8qASc325XA4nVKVxbrIuvw07k2kRVshWOiqhDkW1W4oi9gwM/s1600/grid.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjabpAh-dXkYyEoTzoj37UrNvPx32ZraBNMrfNN9tV1527ttZfgcZPzLWV3z5YEbb7qDfbK1HsrB46OytJKvdwQrI7WpzN8qASc325XA4nVKVxbrIuvw07k2kRVshWOiqhDkW1W4oi9gwM/s1600/grid.jpg" style="border: 1px solid #333333;" /></a></div>
<br />
<br />
かなりフォームらしくできます。<br />
これはかなりの表現をカバーできそうです。<br />
<br />
<br />
でも、グリッドパネルとか言ったけど、これパネルじゃないね。jinlingrenhttp://www.blogger.com/profile/00780490075308368309noreply@blogger.com0tag:blogger.com,1999:blog-1647089842501582484.post-85559770074876826322012-03-16T12:02:00.001+09:002012-03-16T23:05:44.853+09:00垂直パネル Vertical Panelコンポーネントを縦に並べるには垂直パネルを使う。<br />
<br />
createVerticalPanelで垂直パネルを作り出し、そこにbuttonを3つaddしてみる。<br />
<br />
<pre class="brush:js">var app = UiApp.createApplication();
var vp = app.createVerticalPanel();
vp.add(app.createButton('Submit'));
vp.add(app.createButton('Submit'));
vp.add(app.createButton('Submit'));
app.add(vp);</pre>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjejDmz3bpUIJx3QFyIhjZlm6JlePxOrpRSKWlx1CjIm8_loU30WgCZlJ30Ry9vHDiAqcNemBJnlBpsSJwBFTl_OWPNIWZZBPMdbJGkEcluAaCLqTlz9zKrBG-GHwVUb8pyOh8B5Qd1kas/s1600/verticalpanel.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjejDmz3bpUIJx3QFyIhjZlm6JlePxOrpRSKWlx1CjIm8_loU30WgCZlJ30Ry9vHDiAqcNemBJnlBpsSJwBFTl_OWPNIWZZBPMdbJGkEcluAaCLqTlz9zKrBG-GHwVUb8pyOh8B5Qd1kas/s1600/verticalpanel.jpg" style="border: 1px solid #333333;" /></a></div>
<br />
<br />
UiAppにダイレクトにaddした場合にはbuttonなら横に並んだが、垂直パネルに入れるときちんと縦に並ぶのが確認できる。jinlingrenhttp://www.blogger.com/profile/00780490075308368309noreply@blogger.com0tag:blogger.com,1999:blog-1647089842501582484.post-56313739722005445732012-03-16T00:57:00.000+09:002012-03-16T23:05:50.919+09:00水平パネル Horizontal Panelコンポーネントを横に並べるには水平パネルを使う。<br />
createHorizontalPanelで水平パネルを作り出し、そこにlabelを3つaddしてみる。<br />
<br />
<pre class="brush:js">var app = UiApp.createApplication();
var hp = app.createHorizontalPanel();
hp.add(app.createLabel('Label'));
hp.add(app.createLabel('Label'));
hp.add(app.createLabel('Label'));
app.add(hp);</pre>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSRpPwsKSG3loV5rZec5j-U4gW6rISF6cj9kY-BmKKGrROOW10zXyDeoo3L5m1l7mgYk3OMLtTtjCYm0sOEqsWYkeA4Ulfr-pemAg4mTy8Ip0D57sb9bbV3V5i3S7khUhkhFRYZeepk58/s1600/horizontalpanel.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSRpPwsKSG3loV5rZec5j-U4gW6rISF6cj9kY-BmKKGrROOW10zXyDeoo3L5m1l7mgYk3OMLtTtjCYm0sOEqsWYkeA4Ulfr-pemAg4mTy8Ip0D57sb9bbV3V5i3S7khUhkhFRYZeepk58/s1600/horizontalpanel.jpg" style="border: 1px solid #333333;" /></a></div>
<br />
<br />
UiAppにダイレクトにaddした場合にはlabelなら縦に並んだが、水平パネルに入れるときちんと横に並ぶのが確認できる。jinlingrenhttp://www.blogger.com/profile/00780490075308368309noreply@blogger.com0tag:blogger.com,1999:blog-1647089842501582484.post-18479312340623302072012-03-16T00:27:00.000+09:002012-03-16T23:05:56.798+09:00ダイレクトパネルダイレクトパネル・・・<br />
そんな名前のパネルはないんですが、UiAppに直接つっこむと、垂直に雑然と並ぶとのこと。<br />
<br />
ボタンを3つほどaddしてみる。<br />
縦に並ぶはずだが・・・<br />
<br />
<pre class="brush:js">var app = UiApp.createApplication();
app.add(app.createButton('Submit'));
app.add(app.createButton('Submit'));
app.add(app.createButton('Submit'));</pre>
<br />
横に並ぶじゃねぇか、話が違う。<br />
<br />
では、ラベルを3つほどaddしてみる。 <br />
<br />
<pre class="brush:js">var app = UiApp.createApplication();
app.add(app.createLabel('Label'));
app.add(app.createLabel('Label'));
app.add(app.createLabel('Label'));</pre>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1B-7cPYnHXExiaEav1Wz_qzuwpB-ymyvTku3kQV6PP5khzUuxc28o2swORgJg35Se_l7aMCAX1LLpzzumT-k4eYAJjmPWQ6nMNrq0C5n_cQ8exxFMzde1lMMdh3bNwecftnvBrYndZMo/s1600/directpanel.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1B-7cPYnHXExiaEav1Wz_qzuwpB-ymyvTku3kQV6PP5khzUuxc28o2swORgJg35Se_l7aMCAX1LLpzzumT-k4eYAJjmPWQ6nMNrq0C5n_cQ8exxFMzde1lMMdh3bNwecftnvBrYndZMo/s1600/directpanel.jpg" style="border: 1px solid #333333;" /></a></div>
<br />
<br />
今度はちゃんと?縦に並んだ。<br />
よくわからないが、どうやらHTMLとよく似た挙動に見える。<br />
つまりはbuttonはインラインだが、labelはブロック。<br />
<br />jinlingrenhttp://www.blogger.com/profile/00780490075308368309noreply@blogger.com0tag:blogger.com,1999:blog-1647089842501582484.post-51489709986792665242012-03-10T10:00:00.002+09:002012-03-16T11:46:55.962+09:00UIコンポーネントの配置<br />
UiAppキャンパスに色々な部品が配置出来るのはわかった。<br />
だけど配置を制御できなきゃダメだ。<br />
<br />
配置について学ぶ。<br />
次のことができるらしい。<br />
<br />
・単に縦に並べる→直接UiAppにaddする<br />
・createHorizontalPanelという水平パネルを作って横に並べる→水平パネルにaddして水平パネルはUiAppにaddする<br />
・createGridという格子状パネルを作って縦横自在に並べる→格子状パネルにaddして格子状パネルはUiAppにaddする<br />
<br />
まぁ図にするとこんな感じ<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRaEZeptFTy80gc2QITTHoLefZEjvhe60skm72Hb94za6u-NOayVkPEUjheThkYyxjzOnYa8Pps0C0Xm4WAH-GiNRelxfsFXGc-r6g_TkaoeOfkz5ifkJta-ECxuy9lP2M_0_876if2Fg/s1600/haichi.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRaEZeptFTy80gc2QITTHoLefZEjvhe60skm72Hb94za6u-NOayVkPEUjheThkYyxjzOnYa8Pps0C0Xm4WAH-GiNRelxfsFXGc-r6g_TkaoeOfkz5ifkJta-ECxuy9lP2M_0_876if2Fg/s1600/haichi.jpg" /></a></div>
<br />
以下が代表的なパネル。<br />
<br />・Form Panel<br />・Horizontal Panel<br />・Vertical Panel<br />・Flow Panel<br /><br />いまはこれぐらいでOK。<br />jinlingrenhttp://www.blogger.com/profile/00780490075308368309noreply@blogger.com1tag:blogger.com,1999:blog-1647089842501582484.post-4410774191679106272012-03-10T02:15:00.001+09:002012-03-10T02:18:26.448+09:00UIコンポーネントいろいろキャンパスことUiAppインスタンスにつっこむUIコンポーネントいろいろ<br />
<br />
var app = UiApp.createApplication();<br />
<br />
■ラベル<br />
app.add(app.createLabel('First My Label'));<br />
<br />
■ボタン<br />
app.add(app.createButton('クリック'));<br />
<br />
■サブミットボタン<br />
app.add(app.createSubmitButton('送信する'));<br />
<br />
■テキストボックス<br />
app.add(app.createTextBox());<br />
<br />
■テキストエリアボックス<br />
app.add(app.createTextArea());<br />
<br />
などなど。<br />
<br />
もちろんもっとあってこれらの他にもまだまだある。<br />
要はHTMLでいうところのフォーム一式のパーツが全てあるという感じ?<br />
<br />
はっきり言って、こいつらは書けば描画される。ただそれだけのこと。<br />
重要だけど、それだけでは何の価値もない。<br />
<br />
そう、こいつらは使われて、イジられてなんぼなのだ。<br />
<br />
ということは?いずれは対峙せねばならんイベントハンドラーというわけか。<br />
<br />jinlingrenhttp://www.blogger.com/profile/00780490075308368309noreply@blogger.com2tag:blogger.com,1999:blog-1647089842501582484.post-56302383787129756882012-03-10T00:37:00.000+09:002012-03-10T01:47:07.859+09:00UI は UiApp でつくるUIはUiAppでつくるとのこと。<br />
白いキャンパスを用意するようなものか。<br />
<br />
<pre class="brush:js">var app = UiApp.createApplication();</pre><br />
<br />
感覚的には、このappに色々なUI部品をつっこんでいくということか。<br />
<br />
<pre class="brush:js">var button = app.createButton('Submit');
app.add(button);</pre><br />
<br />
こんな風に。<br />
ボタンを生成して、そいつをキャンパスにつっこんだ。jinlingrenhttp://www.blogger.com/profile/00780490075308368309noreply@blogger.com0tag:blogger.com,1999:blog-1647089842501582484.post-13697327226499668702012-03-10T00:21:00.001+09:002012-03-10T02:21:03.464+09:00doGet ではじめるGoogleサイトにガジェットとして貼り付けるにせよ、スタンドアローンで実行させるにせよ、<br />
基本は「doGet」ではじめる。<br />
<br />
<pre class="brush:js">function doGet(e) {
// UiAppインスタンスの生成
var app = UiApp.createApplication();
return app;
}</pre>
<br />
最後は必ずreturnすることは忘れるな。<br />
何も返さんと何もしてはくれない。<br />
<br />
<b>doGet</b>は予約関数<br />
他には<br />
<b>doGet</b><br />
<b>doPost</b><br />
<b>onEdit</b><br />
<b>onInstall</b><br />
<b>onOpen</b><br />
などがあるらしい。詳しくは知らない。<br />
<br />jinlingrenhttp://www.blogger.com/profile/00780490075308368309noreply@blogger.com0tag:blogger.com,1999:blog-1647089842501582484.post-68453298617982571702012-03-09T23:37:00.001+09:002012-03-10T00:08:25.822+09:00Google Apps Script でやりたいことやりたいこと。<br />
<br />
・GUIを使わずにスクリプトのみでUiAppである程度自由自在に作れるようになること<br />
・そのインターフェイスからある程度自由自在にスプレッドシートから出し入れできるようになること<br />
<br />
これらができれば、<br />
<br />
・スプレッドシートに並べたデータを自由にGoogleサイトに配置したり<br />
・GoogleサイトからUIを通してデータををつっこんだり<br />
<br />
ということが出来るようになるはず。<br />
<br />
結果、既存機能では実現できないことが実装可能になるはず。<br />
多分。<br />
<br />
そうじゃないと、<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaFybvaQ5dkDtwK8KEdYSkKVsZBJN52AYloqGjULcHloKdGWxKLqZaOA4vri-EcVmdGRymns19pQPqeQXWChb51IYA-8KVHOY9AhKr_tUBSPQseyeStkjXHmF4jnurYs5t2nvYi1i7Hh8/s1600/haratetsuo.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaFybvaQ5dkDtwK8KEdYSkKVsZBJN52AYloqGjULcHloKdGWxKLqZaOA4vri-EcVmdGRymns19pQPqeQXWChb51IYA-8KVHOY9AhKr_tUBSPQseyeStkjXHmF4jnurYs5t2nvYi1i7Hh8/s1600/haratetsuo.jpg" /></a></div>
<br />jinlingrenhttp://www.blogger.com/profile/00780490075308368309noreply@blogger.com1tag:blogger.com,1999:blog-1647089842501582484.post-42340915654135084302012-03-09T23:21:00.000+09:002012-03-10T00:08:08.500+09:00Google Apps Script は面白い正直に言おう。<br />
Google Apps Script は面白い。<br />
それだけで十分である。<br />
取り組むには。<br />
<br />
さて、作りたいものがある。<br />
だが、レベル不足でどうやればいいかがさっぱりわからない。<br />
なので、ちょっとずつ勉強しながらピースを埋めてみようと思う。<br />
<br />
今のレベルを告白しておく。<br />
・何ができるのかの一部を知っている<br />
・詳細はわからないがうっすら全体像はわかる<br />
・フォームからスプレッドシートに流れてきたら自動でメールを飛ばす程度は作ったことがある<br />
つまりは初心者だ。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjt9MNSX0Zs9fGYX937tGMkOTBkdcpStjoQ6elX9JpDoEK2R2OozogBWcGeelqmKbzONd-ONU9TRqO28VYCN83eLMHzG7VN46J8m9BUgN86311EHKZgFCrSwI_qB7l7oPka40B0pgQ7yE/s1600/s20100906a061.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="177" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjt9MNSX0Zs9fGYX937tGMkOTBkdcpStjoQ6elX9JpDoEK2R2OozogBWcGeelqmKbzONd-ONU9TRqO28VYCN83eLMHzG7VN46J8m9BUgN86311EHKZgFCrSwI_qB7l7oPka40B0pgQ7yE/s320/s20100906a061.jpg" width="320" /></a></div>
<br />jinlingrenhttp://www.blogger.com/profile/00780490075308368309noreply@blogger.com0