[[ /googledocs ドキュメントID ]]
と書くことでウィジェットが動作する。<iframe>
タグを使って埋め込み表示する。[[ /googledocs ... ]]
と書くのは面倒なので、[ウィジェットの挿入/編集] メニューからアイコンで選択できるようにする。display_name=Google Docs Widget description=This plugin lets you put your Google Document in the body text of your article. name=com.traction.googledocs version=1.0.0 buildnum=0
<iframe>...</iframe>
タグを使った埋め込み用の HTML コードが表示されます。<iframe>
タグの src=
で指定する URL は、次のようになることがわかります。https://docs.google.com/a/自社ドメイン名/種類/d/ドキュメントID/pubhtml?widget=true&headers=false
<iframe>...</iframe>
の HTML コードを生成できることになります。[[ /googledocs domain="自社ドメイン" doctype="ドキュメントの種類" docid="ドキュメントのID" ]]
sdl=com.traction.sdl.token.googledocs rskeywords=googledocs,gdocs
sdl=
行で、ウィジェットの HTML レンダリングに使用する SDL ファイル(後述)の場所を指定します。rskeywords=
行は、トークン(ウィジェット)を呼び出すためのラピッドセレクタを指定します。トークンは、記事本文に
[[ /TokenName param1='foo' param2='bar' ... ]]
のように書いて実行する(記事に埋め込む)のですが、このときの「TokenName」として使うキーワードを指定するのがこの rskeywords=
行です。rskeywords=googledocs,gdocs
は、このトークンを
[[ /googledocs ]]
または [[ /gdocs ]]
と書くことで実行できることを意味しています。sdl=
行で指定したものです。<iframe src="https://docs.google.com/a/ドメイン名/種類/d/ドキュメントID/pubhtml?widget=true&headers=false"></iframe>
[[ /googledocs param1="foo" param2="bar" ]]
と実行すると、このパラメーター param1 と param2 は、SDL ファイル内で <property.value name="param1" />
と <property.value name="param2" />
で参照できます。<property.value name="param1" /> <property.value name="param2" />
[[ /googledocs domain="自社ドメイン" doctype="ドキュメントの種類" docid="ドキュメントのID" ]]
として使うので、SDL ファイル内で次のようにしてパラメーターの値を取得できます。<property.value name="domain" /> <property.value name="doctype" /> <property.value name="docid" />
<iframe>
の src= に組み込むと次のようになります。src=
の値がダブルクオーテーション記号で囲まれているため、そこに含まれるローカル変数の名前はシングルクォーテーション記号で囲んでいることに注意してください。(name="変数名"
ではなく name='変数名'
としている)<iframe src="https://docs.google.com/a/<property.value name='domain' />/<property.value name='doctype' />/d/<property.value name='docid' />/pubhtml?widget=true&headers=false"> </iframe>
[[ /googledocs domain="ドメイン名" doctype="spreadsheets" docid="ドキュメントID" ]]
と記入します。<iframe>
に width="<property.value name='width' default='600' />"
と height="<property.value name='height' default='400' />"
を追加して次のようにします。<iframe src="https://docs.google.com/a/<property.value name='domain' />/<property.value name='doctype' />/d/<property.value name='docid' />/pubhtml?widget=true&headers=false" width="<property.value name='width' default='600' />" height="<property.value name='height' default='400' />"> </iframe>
default='NNN'
という既定値を指定していることに注目してください。[[ /googledocs domain="ドメイン名" doctype="spreadsheets" docid="ドキュメントID" width="幅" height="高さ" ]]
と記述します。doctype="spreadsheets"
) でしか動作しません。他の種類(ドキュメントとプレゼンテーション)では <iframe>
の src=
で指定する URL が異なるためです。doctype="spreadsheets"
か doctype="document"
か doctype="presentation"
かに応じて、SDL の URL 生成を変化させる必要があるということです。doctype=
パラメーターの値は、SDL 内で <property.value name="doctype" />
として取得できるので、これに応じた条件分岐を行います。<sdl.function name="関数名">...</sdl.function>
として定義します。関数を呼び出すには <#関数名 />
とします。googledocs.sdl は次のようになります。<iframe src="<#url />" width="<property.value name='width' default='600' />" height="<property.value name='height' default='400' />"> </iframe> <sdl.function name="url"> https://docs.google.com/a/<property.value name='domain' />/<property.value name='doctype' />/d/<property.value name='docid' />/pubhtml?widget=true&headers=false </sdl.function>
<switch>...</switch>
タグを使って <property.value name="doctype" />
の値に応じて マッチする <case>...</case>
へ分岐するようにします。<sdl.function name="url"> <switch value="<property.value name='doctype' />"> <case value="spreadsheets"> https://docs.google.com/a/<property.value name='domain' />/spreadsheets/d/<property.value name='docid' />/pubhtml?widget=true&headers=false </case> <case value="document"> https://docs.google.com/a/<property.value name='domain' />/document/d/<property.value name='docid' />/pub?embedded=true </case> <case value="presentation"> https://docs.google.com/a/<property.value name='domain' />/presentation/d/<property.value name='docid' />/embed?start=false&loop=false&delayms=3000 </case> <case.default> Error! No doctype parameter or unknown doctype :-( </case.default> </switch> </sdl.function>
<compare.equals>...</compare.equals>
を入れ子にして条件分岐をすることもできますが、<switch>...</switch>
を使ったほうが綺麗なコードが書けますね。<sdl.function name="url"> <compare.equals "<property.value name='doctype' />" "spreadsheets"> https://docs.google.com/a/<property.value name='domain' />/spreadsheets/d/<property.value name='docid' />/pubhtml?widget=true&headers=false <else> <compare.equals "<property.value name='doctype' />" "document"> https://docs.google.com/a/<property.value name='domain' />/document/d/<property.value name='docid' />/pub?embedded=true <else> <compare.equals "<property.value name='doctype' />" "presentation"> https://docs.google.com/a/<property.value name='domain' />/presentation/d/<property.value name='docid' />/embed?start=false&loop=false&delayms=3000 <else> Error! No doctype parameter or unknown doctype :-( </compare.equals> </compare.equals> </compare.equals> </sdl.function>
[[ /googledocs domain="ドメイン名" doctype="種類" docid="ドキュメントのID" ]]
を書かなくてはなりません。これは面倒ですね。class=tsi.sdk.token.WidgetForHtmlEdit_ rskeywords=googledocs display_name=Google Docs # Supported tokenattr Settings settings=googledocs_domain,googledocs_docid,googledocs_doctype,googledocs_width,googledocs_height # Required tokenattr Settings requiredsettings=googledocs_domain,googledocs_doctype,googledocs_docid requiredsetting_message_googledocs_domain=Please fill in your domain name for Google Apps. requiredsetting_message_googledocs_doctype=Please select a type of your document. requiredsetting_message_googledocs_docid=Please fill in your document ID. # Setting-Name-to-Attribute-Name Mappings (first attribute name # is also preferred attribute name) googledocs_domain_attributes=domain googledocs_doctype_attributes=doctype googledocs_docid_attributes=docid googledocs_width_attributes=width googledocs_height_attributes=height # Default tokenattr setting values default_googledocs_domain=tractionsoftware.com # Widget Icon icon=/images/widgets/googledocs.png
[[ /googledocs ]]
になります。)_attribute
を続けて、そのオプションをどのようなパラメーターとして埋め込むかを指定します。googledocs_domain_attributes=domain
は、「googledocs_domain オプションに入力された値を、domain="入力値"
としてウィジェットに埋め込む」という意味になります。settings=
で指定したオプション(設定項目)の定義ファイルを、プラグインのフォルダの中に作成した config/settings/props/tokenattr フォルダ階層の中に作成します。class=com.traction.settings.TextInput display_name=Your Document ID description=Fill in your document's ID. tip= sdleditor=com.traction.sdl.admin.settings#textinput_belowlabel size=72 default= usedefault=false
class=com.traction.settings.Select display_name=Document Type description=Select a type of your document. #tip= options=,spreadsheets,document,presentation option_spreadsheets_label=Spreadsheet option_document_label=Document option_presentation_label=Presentation sdleditor=com.traction.sdl.admin.settings#singleselect default= usedefault=false
class=com.traction.settings.TextInput display_name=Domain Name of Your Goodle Apps description=Fill in your Google Apps' domain name, e.g. tractionsoftware.com. tip= sdleditor=com.traction.sdl.admin.settings#textinput_belowlabel size=72 default= usedefault=true
class=com.traction.settings.TextInput display_name=Height description=Fill in the height of this widget if you want to specify it. tip= sdleditor=com.traction.sdl.admin.settings#textinput_belowlabel size=12 default= usedefault=false units=pixels numeric=true min=256 max=
units=
を使います。ここで指定された単位は、テキストボックスに右側に表示されます。numeric=true
を指定します。また、min=
と max=
でそれぞれ最小値と最大値を指定できます。class=com.traction.settings.TextInput display_name=Width description=Fill in the width of this widget if you want to specify it. tip= sdleditor=com.traction.sdl.admin.settings#textinput_belowlabel size=12 default= usedefault=false units=pixels numeric=true min=256 max=
icon=
で指定したパスです。7.7 KB | com.traction.googledocs-1.0.zip | 2015/01/24 | 11:45:51 JST |
このプラグインは、今回のレッスンで作成したものです。その後に改善を加えたものを下記リンク先ページで公開しています。
create_plugin_folder.pngShared Files for DocSDK175
plugin_properties.png
new_plugin.png
create_dirs_props.png
googledocs_properties.png
create_dirs_sdl.png
google_spreadsheet_01.png
google_spreadsheet_02.png
google_spreadsheet_03.png
google_spreadsheet_04.png
test_example1.png
test_example2.png
test_example3.png
test_document.png
test_presentation.png
create_dirs_htmledit.png
token_example1.png
token_example2.png
tokenattr_setting_files.png
put_png.png
test1.png
test2.png
test3.png
test4.png