ボタンタグ

ボタンタグ

お知らせ:当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

<button>

<button> タグはボタンを定義します。

Parent tag : <pc>
Child tag : --

属性

1. text

Thetext属性は、ボタンのラベルを定義します。

指定可能な値
  • 文字列

構文 <ボタンのテキスト='詳細はこちら'/>
出力  

 メモ:

  • text 属性は省略可能です。
  • text はデータ元属性として機能します。つまり、size、bold、italic、fontFamily および color といった属性は、ボタンのラベルに対するスタイル属性であり、textが指定されている場合にのみ適用されます。

2. size

The size属性は、ボタンのラベルのフォントサイズを定義します。

指定可能な値
  • 1〜9 の数値

構文 <ボタンのテキスト='詳細はこちら' size='5'/>
出力  

メモ:

  • size 属性は省略可能です。値が指定されている場合にのみ適用されます。

3. bold

The bold 属性は、ボタンのラベルに太字のフォントスタイルを適用します。

指定可能な値
  • true
  • false

初期設定値

  • false

構文 <ボタンのテキスト='詳細はこちら' bold='真'/>
出力  

 メモ:

  • bold 属性は省略可能です。値が指定されている場合にのみ適用されます。

4. italic

italic 属性は、ボタンのラベルのフォントをイタリック体にします。

指定可能な値
  • 無効

初期設定値

  • 無効

構文 <ボタンのテキスト='詳細はこちら' italic='真'/>
出力  

 メモ:

  • italic 属性は省略可能です。値が指定されている場合にのみ適用されます。

5. fontFamily

fontFamily 属性は、ボタンのラベルに使用するフォントの種類を指定します。

指定可能な値
  • Arial
  • Georgia
  • Lato
  • Proxima nova
  • Roboto
  • Roboto slab

構文 <ボタンのテキスト='詳細はこちら' fontFamily='Georgia'/>
出力  

 メモ:

  • fontFamily 属性は任意です。値が指定された場合にのみ適用されます。
  • あるに対してfontFamilyが指定されていない場合、テキストにはアプリケーションテーマのfontFamilyが適用されます。アプリケーションテーマごとに使用される fontFamily は異なります。

6. color

このcolor 属性は、ボタンのラベルのフォントカラーを指定します。

指定可能な値
  • 16 進数カラー値。16 進数カラーコードについては、このページを参照してください。

構文 <ボタンのテキスト='詳細はこちら' color='#000000'/>
出力  

 メモ:

  • color 属性は任意です。値が指定された場合にのみ適用されます。

7. bgColor

このbgColor 属性は、ボタンの背景色を指定します。

指定可能な値
  • 16 進数カラー値。16 進数カラーコードについては、このページを参照してください。

構文 <ボタンのテキスト='詳細はこちら' bgColor='#047B33'/>
出力  

 メモ:

  • bgColor 属性は任意です。値が指定された場合にのみ適用されます。

8. 種類

この種類 属性は、ボタンの形状を定義します。

指定可能な値
  • 定額
  • rounded

初期設定 値

  • 定額

構文 <ボタンのテキスト='詳細はこちら' 種類='rounded'/>
出力  

 メモ:

  • 種類 属性は省略可能です。

8. cornerRadius

cornerRadius 属性は、ボタンの角の半径を定義します。

指定可能な値
  • ピクセル単位の数値

構文 <ボタンのテキスト='詳細はこちら' cornerRadius='10px'/>
出力  

 メモ:

  • cornerRadius 属性は省略可能です。

9. margin

margin 属性は、ボタン要素とその親コンテナの四辺すべての間に、指定した余白を生成します。

指定可能な値
  • ピクセル単位の数値

構文 <ボタンのテキスト='詳細はこちら' margin='50px'/>
出力  

 メモ:

  • margin 属性は省略可能です。

10. marginTop

marginTop 属性は、ボタンの上辺と親コンテナとの間に、指定した余白を生成します。

指定可能な値
  • ピクセル単位の数値

構文 <ボタンのテキスト='詳細はこちら' marginTop='50px'/>
出力  

 メモ:

  • marginTop 属性は省略可能です

11. marginRight

marginRight 属性は、ボタンの右側とその親コンテナとの間に指定した量の余白を生成します。

指定可能な値
  • ピクセル単位の数値

構文 <ボタンのテキスト='詳細はこちら' marginRight='400px'/>
出力  

 メモ:

  • marginRight 属性は省略可能です

12. marginBottom

marginBottom 属性は、ボタンの下側とその親コンテナとの間に指定した量の余白を生成します。

指定可能な値
  • ピクセル単位の数値

構文 <ボタンのテキスト='詳細はこちら' marginBottom='50px'/>
出力  

 メモ:

  • marginBottom 属性は省略可能です

13. marginLeft

marginLeft 属性は、ボタンの左側とその親コンテナとの間に指定した量の余白を生成します。

指定可能な値
  • ピクセル単位の数値

構文 <ボタンのテキスト='詳細はこちら' marginLeft='400px'/>
出力  

 メモ:

  • marginLeft 属性は省略可能です。

14. 操作

操作 属性は、ボタンをクリックしたときに実行される操作を指定します。

指定可能な値
  • リンク
  • フォーム
  • レポート
  • ページ
  • Function

操作 構文

リンク

<ボタンのテキスト='ボタンのラベル' 操作='リンク' url='開くURL'/>*

フォーム

<ボタンのテキスト='ボタンのラベル' 操作='Form' componentLinkName='開くZoho Creatorフォームのlinkname' appLinkName='そのフォームが属するZoho Creatorアプリケーションのlinkname' />*
レポート <ボタンのテキスト='ボタンのラベル' 操作='レポート' componentLinkName='開くZoho Creatorレポートのlinkname' appLinkName='そのレポートが属するZoho Creatorアプリケーションのlinkname' />*
ページ <ボタンのテキスト='ボタンのラベル' 操作='Page' componentLinkName='開くZoho Creatorページのlinkname' appLinkName='そのページが属するZoho Creatorアプリケーションのlinkname' />*
Function <ボタンのテキスト='ボタンのラベル' 操作='Function' functionName='実行するカスタム関数の名前' />*

* 各操作タイプの詳細は、この後のセクションを参照してください。

 メモ:

  • 操作属性は省略可能です。
  • 操作属性はデータソース属性として機能します。つまり、次のいずれかまたは複数の属性、url, componentLinkName, appLinkName, functionName, パラメーター, successMsg, target, popupWidthおよびpopupHeightは、操作が指定されている場合にのみ適用されます。

15. url

url 属性は、ボタンをクリックしたときに開くリソースの場所を指定します。

指定可能な値
  • 別のWebサイトを指すurl
  • 自分のZoho Creatorアカウント内のコンポーネントを指すurl

メモ:

  • url属性は省略可能です。 
  • この属性が適用されるのは、<操作='リンク'> の場合のみです。

16. componentLinkName

componentLinkName 属性は、ボタンをクリックしたときに開く Zoho Creator コンポーネントのリンク名を指定します。

指定可能な値
  • 開く Zoho Creator アプリケーションコンポーネントのリンク名。Zoho Creator アカウント内のすべてのアプリケーションにあるすべてのコンポーネントのリンク名については、こちらのページを参照してください。

操作 構文
フォーム <button 操作='Form' componentLinkName='User_Details'/>
レポート <button 操作='レポート' componentLinkName='User_Details_Report'/
ページ <button 操作='Page' componentLinkName='User_Dashboard'/>

 メモ:

  • componentLinkName属性は省略可能です。 
  • この属性が適用されるのは、<操作='Form'/'レポート'/'Page'> の場合のみです。

17. appLinkName

appLinkName 属性は、関連付けられているコンポーネントが属する Zoho Creator アプリケーションの名前を指定します。

指定可能な値
  • 開く Zoho Creator アプリケーションのリンク名。Zoho Creator アカウント内のすべてのアプリケーションのリンク名については、こちらのページを参照してください。

操作 構文
フォーム <button 操作='Form' componentLinkName='User_Details' appLinkName='Resource_management'/>
レポート <button 操作='レポート' componentLinkName='User_Details_Report' appLinkName='Resource_management'/>
ページ <button 操作='Page' componentLinkName='User_Dashboard' appLinkName='Resource_management'/>

 メモ:

  • appLinkName属性は省略可能です。 関連付けるコンポーネントが、現在操作しているアプリケーションと同じアプリケーションに属している場合は、appLinkName を指定する必要はありません。
  • この属性が適用されるのは、<操作='Form'/'レポート'/'Page'/'Function'> の場合のみです。

18. functionName

この functionName 属性は、ボタンをクリックしたときに実行されるカスタム関数の名前を指定します。

指定可能な値
  • 任意の Zoho Creator アプリケーションで定義されているカスタム関数。アプリケーション内のカスタム関数の一覧を取得するには、[設定]->[拡張機能]->[カスタム関数]に移動します。

  • <button 操作='Function' functionName='send_email'/>

メモ:

  • この functionName は、デフォルト名前空間またはカスタム名前空間のいずれかに属することができます。
  • 関数がカスタム名前空間に属する場合 : <functionName='namespace_name.function_name'>
  • functionName属性は省略可能です。
  • これは <操作='Function'> の場合にのみ適用され、その際は関数名を指定する必要があります。

19. パラメーター

この パラメーター 属性は、操作に関連付けるパラメーターを指定します。

指定可能な値
  • <操作='Form' / 'レポート' / 'Page'> の場合、パラメーターは、該当コンポーネントのパーマリンクに付加されるクエリ文字列を指します。フォーム、レポート、ページのパーマリンクでクエリ文字列を使用する方法については、こちらのページを参照してください。
  • <操作='Function'> の場合、パラメーターは、選択したカスタム関数の引数を指します。

操作 構文

Form

<ボタンのテキスト='ボタンのラベル' 操作='Form' componentLinkName='User_Details' appLinkName='Resource_management'  パラメーター='App_name=${名前}'/>

または

<ボタンのテキスト='ボタンのラベル' 操作='Form' componentLinkName='User_Details' appLinkName='Resource_management' パラメーター='App_name=Zoho Creator'/>

レポート

<ボタンのテキスト='ボタンのラベル' 操作='レポート' componentLinkName='User_Details' appLinkName='Resource_management' パラメーター='App_name=${名前}' />

または

<ボタンのテキスト='ボタンのラベル' 操作='Form' componentLinkName='User_Details' appLinkName='Resource_management' パラメーター='User_Name='Rob'/>

 

Page <ボタンのテキスト='ボタンのラベル' 操作='Page' componentLinkName='開く Zoho Creator ページのリンク名' appLinkName='そのページが属する Zoho Creator アプリケーションのリンク名' パラメーター='App_name=${名前}' />*

 メモ:

  • parameter 属性は省略可能です。
  • これは <操作='Form'/'レポート'/'Page'/'Function'> の場合にのみ適用されます。
  • パラメーターには、名前='Rob' のような静的な値、またはページパラメーターを指定できます。
  • ページパラメーターは App_name=${名前} のように指定します。ここで、名前 はページパラメーターです。

20. successMsg

この successMsg 属性は、関連付けられた関数が正常に実行されたときに表示されるメッセージを指定します。

指定可能な値
  • 文字列

  • <button 操作='Function' functionName='send_email' successMsg='送信に成功しました!'/>

メモ:

  • successMsg 属性は省略可能です。
  • この属性が適用されるのは、<操作='Function'> の場合のみです。

21. executeWorkflow

executeWorkflow 属性を使用すると、同じ操作についてユーザーの確認を得た後に、その操作を実行するよう指定できます。 confirmationMsg 属性では、操作の実行前に表示して、操作リクエストを確定するためのメッセージを指定します。

指定可能な値
  • 文字列

  • <button 操作='Function' functionName='send_email' executeWorkflow='afterConfirmation' confirmationMsg='この操作を実行してもよろしいですか?' confirmButtonText='はい' cancelButtonText='いいえ'/>

メモ:

  • confirmationMsg 属性は省略可能です。
  • この属性が適用されるのは、<操作='Function'> の場合のみです。

22. target

target 属性は、ボタンをクリックしたときにリンク先の操作をどこに表示するかを指定します。

指定可能な値
  • 新規-window
  • same-window
  • popup

初期設定 値

  • 新規-window

メモ:

  • この属性が適用されるのは、<操作='リンク'/'Form'/'レポート'/'Page'> の場合のみです。

23. popupWidth

popupWidth 属性は、リンクを開くポップアップウィンドウの幅を指定します。

指定可能な値
  • パーセンテージ(%)またはピクセル単位の数値

24. popupHeight

popupHeight 属性は、リンクを開くポップアップウィンドウの高さを指定します。

指定可能な値
  • パーセンテージ(%)またはピクセル単位の数値