アプリケーション開発チュートリアル </a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ja/tutorials/app_tutorial.html#the-goal" class="sidebar-link">目標 </a></li><li class="sidebar-sub-header"><a href="/ja/tutorials/app_tutorial.html#part-1-the-environment" class="sidebar-link">パート1：環境 </a></li><li class="sidebar-sub-header"><a href="/ja/tutorials/app_tutorial.html#part-2-contract" class="sidebar-link">パート2：スマートコントラクト </a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ja/tutorials/app_tutorial.html#creator-account" class="sidebar-link">作成者アカウント </a></li><li class="sidebar-sub-header"><a href="/ja/tutorials/app_tutorial.html#new-application" class="sidebar-link">新規アプリケーション </a></li><li class="sidebar-sub-header"><a href="/ja/tutorials/app_tutorial.html#new-database-table" class="sidebar-link">新しいデータベーステーブル </a></li><li class="sidebar-sub-header"><a href="/ja/tutorials/app_tutorial.html#new-contract" class="sidebar-link">新しいスマートコントラクト </a></li></ul></li><li class="sidebar-sub-header"><a href="/ja/tutorials/app_tutorial.html#part-3-page" class="sidebar-link">パート3：ページ </a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ja/tutorials/app_tutorial.html#new-field" class="sidebar-link">新しいフィールド </a></li><li class="sidebar-sub-header"><a href="/ja/tutorials/app_tutorial.html#update-the-contract" class="sidebar-link">スマートコントラクトの更新 </a></li><li class="sidebar-sub-header"><a href="/ja/tutorials/app_tutorial.html#page" class="sidebar-link">ページ </a></li></ul></li><li class="sidebar-sub-header"><a href="/ja/tutorials/app_tutorial.html#part-4-application" class="sidebar-link">パート4：アプリケーション </a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ja/tutorials/app_tutorial.html#menu" class="sidebar-link">メニュー </a></li><li class="sidebar-sub-header"><a href="/ja/tutorials/app_tutorial.html#send-a-message" class="sidebar-link">メッセージの送信 </a></li><li class="sidebar-sub-header"><a href="/ja/tutorials/app_tutorial.html#form-navigation" class="sidebar-link">フォームのナビゲーション </a></li></ul></li><li class="sidebar-sub-header"><a href="/ja/tutorials/app_tutorial.html#conclusions" class="sidebar-link">結論 </a></li></ul></li><li><a href="/ja/tutorials/tutorial.html" class="sidebar-link">IBAX 開発チュートリアル </a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="tutorial-for-application-development"><a href="#tutorial-for-application-development" class="header-anchor">#</a> アプリケーション開発チュートリアル </h1> <p>このセクションでは、IBAXネットワーク上でシンプルなアプリケーションを開発する方法を説明します。</p> <ul><li><a href="#the-goal">目標</a></li> <li><a href="#part-1-the-environment">パート1：環境</a></li> <li><a href="#part-2-contract">パート2：スマートコントラクト</a> <ul><li><a href="#creator-account">作成者アカウント</a></li> <li><a href="#new-application">新規アプリケーション</a></li> <li><a href="#new-database-table">新規データベーステーブル</a></li> <li><a href="#new-contract">新規スマートコントラクト</a> <ul><li><a href="#contract-code">スマートコントラクトコード</a></li> <li><a href="#create-a-contract">スマートコントラクトの作成</a></li> <li><a href="#contract-name">スマートコントラクト名</a></li> <li><a href="#data">データ</a></li> <li><a href="#conditions">条件</a></li> <li><a href="#action">アクション</a></li> <li><a href="#full-contract-code">完全なスマートコントラクトコード</a></li> <li><a href="#save-and-run">保存して実行</a></li></ul></li></ul></li> <li><a href="#part-3-page">パート3：ページ</a> <ul><li><a href="#new-field">新規フィールド</a></li> <li><a href="#update-the-contract">スマートコントラクトの更新</a></li> <li><a href="#page">ページ</a> <ul><li><a href="#designer-views">デザイナービュー</a></li> <li><a href="#developer-view">開発者ビュー</a></li> <li><a href="#fetch-data-from-the-database-table">データベーステーブルからのデータの取得</a></li></ul></li> <li><a href="#full-page-code-1">ページの全体コード</a> <ul><li><a href="#save-the-page">ページの保存</a></li></ul></li></ul></li> <li><a href="#part-4-application">パート4：アプリケーション</a> <ul><li><a href="#menu">メニュー</a> <ul><li><a href="#add-a-menu-item">メニューアイテムの追加</a></li> <li><a href="#test-the-new-menu-item">新しいメニューアイテムのテスト</a></li></ul></li> <li><a href="#send-a-message">メッセージの送信</a> <ul><li><a href="#form">フォーム</a></li></ul></li> <li><a href="#form-navigation">フォームのナビゲーション</a> <ul><li><a href="#navigation-buttons">ナビゲーションボタン</a></li> <li><a href="#variables">変数</a></li> <li><a href="#entry-count">エントリ数</a></li> <li><a href="#table-offset">テーブルオフセット</a></li> <li><a href="#button-code">ボタンコード</a></li> <li><a href="#page-refreshing">ページのリフレッシュ</a></li></ul></li> <li><a href="#full-page-code-2">ページ全体のコード</a></li></ul></li> <li><a href="#conclusions">結論</a></li></ul> <h2 id="the-goal"><a href="#the-goal" class="header-anchor">#</a> 目標 </h2> <p>チュートリアルでは、最初はシンプルな機能から始めて、徐々に複雑さを増していきます。</p> <p>アプリケーションの最終バージョンでは、いくつかのシンプルなメッセージ（文字列）がデータベーステーブルに格納されます。このテーブルには、送信者のタイムスタンプとアカウント識別子も含まれます。ユーザーはメッセージの一覧を表示し、エコシステムのメニューからアクセスできるアプリケーションページから新しいメッセージを追加することができます。</p> <h2 id="part-1-the-environment"><a href="#part-1-the-environment" class="header-anchor">#</a> パート1：環境 </h2> <p><strong>Weaver</strong></p> <p>WeaverはIBAXの唯一のクライアントであり、すべてのユーザーとエコシステムの役割に対して機能を提供します。アプリケーション開発者は、Weaverを使用してアプリケーションを開発およびテストできます。エコシステムの管理者はエコシステムを管理し、ユーザーはエコシステムと対話できます。</p> <p>このチュートリアルでは、Weaverを使用してスマートコントラクトのコーディングやページテンプレートの作成など、すべての操作を行います。Weaverはスマートコントラクトコードの復元、保存、実行、データ構造（データベーステーブル）の管理、アクセス許可の割り当て、アプリケーションの作成などもサポートしています。</p> <p>各ノードには独自のWeaverインスタンスがあります。</p> <h2 id="part-2-contract"><a href="#part-2-contract" class="header-anchor">#</a> パート2：スマートコントラクト </h2> <p>最初のシンプルなアプリケーションは "Hello, World!" です。</p> <blockquote><p>注意</p> <p>このアプリケーションでは、文字列はデータベーステーブルに格納され、ユーザーページはありません。</p></blockquote> <h3 id="creator-account"><a href="#creator-account" class="header-anchor">#</a> 作成者アカウント </h3> <p>開発者の役割を持つアカウントには、エコシステムの<code>root</code>特権が割り当てられます。デフォルトでは、この役割はすべてのアクションにアクセスできます。新しいエコシステムでは、作成者アカウントには管理者の役割が割り当てられます。作成者アカウントを使用して、新しいアプリケーションやデータベーステーブルなど、エコシステムの重要な変更を行う必要があります。</p> <p>作成者アカウントでエコシステムにログインします。</p> <h3 id="new-application"><a href="#new-application" class="header-anchor">#</a> 新規アプリケーション </h3> <p>エコシステムの作成者としてログインしたら、新しいアプリケーションを作成できます。</p> <p>新しいアプリケーションを作成します：</p> <ol><li><p>開発者タブに移動してください。</p></li> <li><p>左側のメニューで「アプリケーション」を選択してください。</p></li> <li><p>アプリケーションページで「新規作成」を選択してください。</p></li> <li><p>「名前」フィールドにアプリケーション名を指定してください。</p></li> <li><p>条件を<code>true</code>に設定してください。</p></li></ol> <p><code>true</code>は、誰でもアプリケーションに変更を加えることができることを意味します。</p> <p>もう一つのオプションは<code>ContractConditions("MainCondition")</code>で、これは作成者以外はアプリケーションに変更を加えることができません。</p> <ol start="6"><li>特定のアプリケーションの「名前」フィールドをクリックしてアクティブにします。</li></ol> <blockquote><p>注意</p> <p>デベロッパータブのアプリケーションをクリックすると、関連するリソースにアクセスできますが、エコシステムには影響しません。どのアプリケーションを選んでも、エコシステムのすべてのアプリケーションにアクセスできます。</p></blockquote> <h3 id="new-database-table"><a href="#new-database-table" class="header-anchor">#</a> 新しいデータベーステーブル </h3> <p>データを保存するために、Weaverでアプリケーションのためのデータベーステーブルを作成します。</p> <p>データベーステーブルを作成する手順：</p> <ol><li>デベロッパータブで、「アプリケーション - 名前 > データベーステーブル」を選択します。</li></ol> <p>選択したアプリケーションに関連するすべてのデータベーステーブルが表示されます。リストが空の場合は、まだアプリケーションにデータベーステーブルが作成されていません。</p> <ol start="2"><li>「新規」をクリックします。</li></ol> <p>Weaverは、新しいデータベーステーブルを作成するためのページを表示します。</p> <ol start="3"><li>「名前」フィールドに名前を指定します。</li></ol> <p>このチュートリアルでは、データベーステーブルの名前は<code>apptable</code>とします。</p> <ol start="4"><li><code>message</code>列を追加し、そのタイプを<code>Text</code>に設定します。</li></ol> <p>このテーブルには、<code>id</code>（事前定義済み）と<code>message</code>の2つの列が必要です。後でさらに列を追加します。</p> <ol start="5"><li>読み取りと書き込みの権限について、各フィールドを<code>true</code>に設定します。</li></ol> <p>これにより、誰でもデータベーステーブルにエントリを挿入、更新、列を追加し、エントリデータを読み取ることができます。</p> <p>オプションとして、読み取りと書き込みの権限を作成者アカウントに予約することもできます。その場合は、このフィールドを<code>ContractConditions("MainCondition")</code>に設定します。</p> <h3 id="new-contract"><a href="#new-contract" class="header-anchor">#</a> 新しいスマートコントラクト </h3> <h4 id="contract-code"><a href="#contract-code" class="header-anchor">#</a> スマートコントラクトコード </h4> <p>各スマートコントラクトには3つのパートがあります。詳細については、<a href="/ja/topics/script.html#contract-structure">スマートコントラクトの構造</a>をご覧ください。</p> <h4 id="create-a-contract"><a href="#create-a-contract" class="header-anchor">#</a> スマートコントラクトの作成 </h4> <ol><li>デベロッパータブで、「アプリケーション - 名前 > スマートコントラクト」を選択します。</li></ol> <p>アプリケーションに関連するすべてのスマートコントラクトがここに表示されます。新しいアプリケーションの場合は、リストは空です。</p> <ol start="2"><li>「新規」をクリックします。</li></ol> <p>エディタに新しいスマートコントラクトのテンプレートが表示されます。</p> <p>以下は空のスマートコントラクトテンプレートの例です：</p> <div class="language- extra-class"><pre class="language-text"><code>contract ... { data { } conditions { } action { } } </code></pre></div><h4 id="contract-name"><a href="#contract-name" class="header-anchor">#</a> スマートコントラクト名 </h4> <p>まず、スマートコントラクト名を指定してください。</p> <div class="language- extra-class"><pre class="language-text"><code> contract AppContract { } </code></pre></div><h4 id="data"><a href="#data" class="header-anchor">#</a> データ </h4> <p><code>data</code>セクションを入力してください。</p> <p>以下の例では、<code>Message</code>は変数名を表し、<code>string</code>は変数の型を表しています。</p> <div class="language- extra-class"><pre class="language-text"><code> data { Message string } </code></pre></div><h4 id="conditions"><a href="#conditions" class="header-anchor">#</a> 条件 </h4> <p><code>conditions</code>セクションを入力してください。空の文字列を回避するための簡単な検証条件を設定します。もし<code>Message</code>の長さが<code>0</code>の場合、スマートコントラクトを実装する際に予め定義された警告メッセージがトリガーされます。</p> <div class="language- extra-class"><pre class="language-text"><code>conditions { // avoid writing empty strings if Size($Message) == 0 { error "Message is empty" } } </code></pre></div><h4 id="action"><a href="#action" class="header-anchor">#</a> アクション </h4> <p><code>action</code>セクションを入力してください。簡単なアクションとして、<code>Message</code>をデータテーブルに書き込むことがあります。</p> <div class="language- extra-class"><pre class="language-text"><code> action { DBInsert("apptable", {message: $Message}) } </code></pre></div><h4 id="full-contract-code"><a href="#full-contract-code" class="header-anchor">#</a> フルコントラクトコード </h4> <p>以下にフルコントラクトコードを示します。</p> <p>IBAXの全てのスマートコントラクトは、<code>data</code>、<code>conditions</code>、<code>action</code>のセクションを含めてこのように構築されます。</p> <div class="language- extra-class"><pre class="language-text"><code>contract AppContract { data { Message string } conditions { // avoid writing empty strings if Size($Message) == 0 { error "Message is empty" } } action { DBInsert("apptable", {message: $Message}) } } </code></pre></div><h4 id="save-and-run"><a href="#save-and-run" class="header-anchor">#</a> 保存して実行 </h4> <p>以下の手順でスマートコントラクトのテストを準備します：</p> <ol><li>エディタのメニューで「保存」をクリックしてください；</li></ol> <p>これにより、スマートコントラクトコードが更新され、更新されたバージョンがすべてのネットワークノードで利用可能になります。</p> <ol start="2"><li>エディタのメニューで「実行」をクリックしてください；</li></ol> <p>これにより、スマートコントラクトを実行するページが表示されます。</p> <ol start="3"><li>「スマートコントラクトを実行する」ページで、スマートコントラクトの入力パラメータを入力してください；</li></ol> <p>このスマートコントラクトはパラメータ <code>Message</code> を持っているため、Keyフィールドに <code>Message</code> を、Valueフィールドに <code>Hello, World</code> を設定してください。</p> <ol start="4"><li>「実行」をクリックしてください。</li></ol> <p>結果は右側に表示されます。</p> <p>もし文字列を正常に追加できた場合、結果にはトランザクションの変更を示すブロックIDと結果コードが含まれます。</p> <div class="language- extra-class"><pre class="language-text"><code>{ "block": "31", "result": null } </code></pre></div><h2 id="part-3-page"><a href="#part-3-page" class="header-anchor">#</a> パート3：ページ </h2> <p>スマートコントラクトが有効になったら、それを何か有用なものに拡張する時が来ました。このパートでは、UIやその他の機能を実装します。</p> <p>注意</p> <p>このアプリケーションでは、文字列はログのエントリのようにデータベーステーブルに保存されます。各文字列には著者とタイムスタンプがあります。</p> <p>ユーザーはアプリケーションページで保存されている文字列のリストを表示できます。これは単純なフォームとして表示されます。</p> <h3 id="new-field"><a href="#new-field" class="header-anchor">#</a> 新しいフィールド </h3> <p>前と同様に、データベーステーブルを編集します。開発者タブ > アプリケーション - 名前 > データベーステーブルページに移動してください。</p> <p>以下のフィールドを <code>apptable</code> に追加してください：</p> <ul><li><code>author</code>、フィールドタイプは <code>Number</code>、Changeを <code>true</code> に設定してください。</li></ul> <p>このフィールドには著者アカウントの識別子が格納されます。</p> <ul><li><code>timestamp</code>、フィールドタイプは <code>Date/Time</code>、Changeを <code>true</code> に設定してください。</li></ul> <h3 id="update-the-contract"><a href="#update-the-contract" class="header-anchor">#</a> スマートコントラクトの更新 </h3> <p>スマートコントラクトコードを更新して、著者IDとタイムスタンプを処理します。</p> <p>著者IDはエコシステムのアカウントIDです。タイムスタンプはスマートコントラクトの実行日時をUnix時間形式で表します。</p> <p>両方の値は<a href="/ja/topics/script.html#variables">事前定義された変数</a>によって提供され、入力や検証の必要はないため、アクションの部分でのみ更新されます。</p> <p>スマートコントラクトを更新して、メッセージを追加する際に著者IDとタイムスタンプをデータベーステーブルに書き込むようにしてください。著者IDは <code>$key_id</code> で定義され、タイムスタンプは <code>$time</code> で定義されます。</p> <div class="language- extra-class"><pre class="language-text"><code>action { DBInsert("apptable", {message: $Message, author: $key_id, timestamp: $time}) } </code></pre></div><h3 id="page"><a href="#page" class="header-anchor">#</a> ページ </h3> <p>アプリケーションページは、データベーステーブルに保存されたメッセージが表示されるシンプルなページです。</p> <p>他のリソースと同様に、WeaverでUIページを作成できます。</p> <ol><li><p>開発者タブに移動し、アプリケーション - 名前 > ページをクリックしてください。</p></li> <li><p>「新規作成」をクリックしてください。ビジュアルデザイナーが新しいタブで開かれます。</p></li></ol> <h4 id="designer-views"><a href="#designer-views" class="header-anchor">#</a> デザイナービュー </h4> <p>デフォルトのページは空です。事前に定義された構造を使用してページを素早く埋めることができます。</p> <p>基本的なテーブルを作成します。</p> <ol><li><p>右側のビューセレクターで「デザイナー」をクリックしてください。ビューがビジュアルデザイナーに切り替わります。</p></li> <li><p>左側のメニューで「ヘッダー付きテーブル」を選択し、ページにドラッグします。複数の要素を含むテーブルがページに表示されます。</p></li></ol> <h4 id="developer-view"><a href="#developer-view" class="header-anchor">#</a> 開発者ビュー </h4> <p>IBAXのユーザーページは<a href="/ja/topics/templates2.html">テンプレート言語</a>でコード化されているため、ページコードを記述する際には開発者ビューに切り替えてください。</p> <p>開発者ビューに切り替えてください。</p> <ol><li>右側のビューセレクターで「開発者」をクリックしてください。ページコードを保持するタブがあるエディタに切り替わります。</li></ol> <h4 id="fetch-data-from-the-database-table"><a href="#fetch-data-from-the-database-table" class="header-anchor">#</a> データベーステーブルからデータを取得する </h4> <p>現時点では、ページテンプレートには何も行われていません。次に、コードを更新してページが<code>apptable</code>からデータを表示できるようにします。</p> <ol><li><p><a href="/ja/topics/script.html#dbfind">DBFind</a>関数を使用してデータベーステーブルからデータを取得してください。</p> <p>以下の例では、この関数呼び出しは<code>apptable</code>からデータを取得します。データは<code>src_table</code>に配置され、タイムスタンプフィールドでソートされます。<code>src_table</code>は後でテーブルビューのページのデータソースとして使用されます。</p></li></ol> <div class="language- extra-class"><pre class="language-text"><code> DBFind(Name: apptable, Source: src_table).Columns(Columns: "author,timestamp,message").Order(timestamp) </code></pre></div><ol start="2"><li><code>src_table</code> からのデータを表示するには、<code>Table</code> 関数のデータソースおよびヘッダーとして指定します。</li></ol> <div class="language- extra-class"><pre class="language-text"><code> Table(Columns: "AUTHOR=author,TIME=timestamp,MESSAGE=message", Source: src_table) </code></pre></div><ol start="3"><li>右側のビューセレクターで「プレビュー」をクリックして、データが正しく表示されるか確認してください。</li></ol> <h4 id="full-page-code-1"><a href="#full-page-code-1" class="header-anchor">#</a> ページの全体コード </h4> <p>以下はこのパートの完全なページコードです。この基本的なページは後で拡張されます。</p> <div class="language- extra-class"><pre class="language-text"><code>DBFind(Name: apptable, Source: src_table).Columns(Columns: "author,timestamp,message").Order(timestamp) Div(Class: panel panel-primary) { Div(Class: panel-heading, Body: Table block) Table(Columns: "AUTHOR=author,TIME=timestamp,MESSAGE=message", Source: src_table) Div(Class: panel-footer text-right) { Button(Class: btn btn-primary, Contract: ContractName, Body: More) } } </code></pre></div><h4 id="save-the-page"><a href="#save-the-page" class="header-anchor">#</a> ページを保存する </h4> <p>ページを保存するには、保存をクリックしてください：</p> <ol><li><p>「ページ名」フィールドに<code>AppPage</code>または任意の名前を指定してください。</p></li> <li><p>メニューで<code>default_menu</code>を選択してください。</p></li> <li><p>条件を<code>true</code>に設定してください。</p></li> <li><p>OKをクリックしてください。</p></li></ol> <h2 id="part-4-application"><a href="#part-4-application" class="header-anchor">#</a> パート4：アプリケーション </h2> <p>前のセクションでは、スマートコントラクトを作成し、データを保存するためのテーブルを作成し、そのデータを表示するための基本的なUIページを作成しました。</p> <p>このパートでは、アプリケーションを最終的に完成させ、外観や動作が実際のアプリケーションに類似するようにします。</p> <h3 id="menu"><a href="#menu" class="header-anchor">#</a> メニュー </h3> <p>ページはメニューにリンクする必要があります。たとえば、ホームタブに表示される<code>default_page</code>は、デフォルトのエコシステムメニュー<code>default_menu</code>にリンクされています。</p> <p>このアプリケーションチュートリアルは非常にシンプルです（1つのページしかないため）、それに個別のメニューを作成する必要はありません。デフォルトメニューの新しいメニューアイテムで十分です。</p> <blockquote><p>注意</p> <p>ページのプロパティを編集して、ページメニューを定義することもできます。開発者タブ > アプリケーション - 名前 > ページでページのプロパティを編集します。たとえば、アプリに複数のページがある場合、これらのページ間を移動するためのメニューを作成し、それをアプリのすべてのページに割り当てる必要があります。</p></blockquote> <h4 id="add-a-menu-item"><a href="#add-a-menu-item" class="header-anchor">#</a> メニューアイテムの追加 </h4> <p>他のリソースと同様に、メニューはWeaverで作成および編集できます：</p> <ol><li><p>開発者タブに移動し、メニューをクリックしてください。</p></li> <li><p><code>default_menu</code>のエントリの「名前」をクリックしてください。エディタに新しいタブが開きます。</p></li> <li><p>テンプレートの末尾に新しいメニューアイテムを追加してください。このメニューアイテムは、アプリケーションページを開くためのリンクと、そのアイコンは<a href="https://fontawesome.com/icons" target="_blank" rel="noopener noreferrer">FontAwesome<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>アイコンセットから取得されます。</p></li></ol> <div class="language- extra-class"><pre class="language-text"><code> MenuItem(Title:Messages, Page:AppPage, Icon:"fa fa-envelope") </code></pre></div><ol start="4"><li>保存をクリックしてください。</li></ol> <h4 id="test-the-new-menu-item"><a href="#test-the-new-menu-item" class="header-anchor">#</a> 新しいメニューアイテムのテスト </h4> <p>新しいメニューアイテムが有効かどうかを確認してください：</p> <ol><li><p>ホームタブを開いてください。</p></li> <li><p>メニューで「更新」をクリックしてください。「メッセージ」のヘッダーが表示されます。</p></li> <li><p>「メッセージ」をクリックしてください。アプリケーションページが開かれます。</p></li></ol> <h3 id="send-a-message"><a href="#send-a-message" class="header-anchor">#</a> メッセージの送信 </h3> <p>Logicorのボタンは、パラメータに応じてスマートコントラクトを実行したりページを開いたりするために使用できます。</p> <p><a href="/ja/topics/templates2.html#button">Button</a>関数には2つのスマートコントラクトパラメータがあります：</p> <ul><li><p><code>Contract</code></p> <p>有効化されたスマートコントラクトの名前。</p></li> <li><p><code>Params</code></p> <p>コントラクトのパラメータを入力します。</p></li></ul> <h4 id="form"><a href="#form" class="header-anchor">#</a> フォーム </h4> <p>スマートコントラクトにデータを送信するために、アプリケーションページにフォームを追加します。このフォームには、メッセージ用の入力フィールドとスマートコントラクトAppContractをアクティブにするためのボタンが必要です。</p> <p>以下はこの種のフォームの例です。これは独自の<a href="/ja/topics/templates2.html#div">Div</a>内にネストされています。フォームビューを含むDiv要素の後に配置されており、<a href="/ja/topics/templates2.html#input">Input</a>フィールドには事前に定義された名前<code>message_input</code>が設定されています。ボタンはこの名前を使用して<code>Message</code>の値をスマートコントラクトに送信します。最後に、<a href="/ja/topics/templates2.html#calling-contracts">Val</a>関数を使用して入力フィールドの値を取得します。</p> <div class="language- extra-class"><pre class="language-text"><code>Div(Class: panel panel-primary) { Form() { Input(Name: message_input, Class: form-control, Type: text, Placeholder: "Write a message...", ) Button(Class: btn btn-primary, Body: Send, Contract: AppContract, Params: "Message=Val(message_input)") } } </code></pre></div><p>実際にメッセージを送信してこの新機能をテストすると、フォームがリフレッシュされないことに気付くかもしれません。これについては<a href="#page-refreshing">ページのリフレッシュ</a>で説明します。</p> <h3 id="form-navigation"><a href="#form-navigation" class="header-anchor">#</a> フォームのナビゲーション </h3> <p>デフォルトのビューでは、ページ上のフォームは最初のページで25のエントリしか表示できません。そのため、いくつかのシンプルなボタンを追加して、ユーザーをすべてのフォームエントリにナビゲートできるようにします。</p> <h4 id="navigation-buttons"><a href="#navigation-buttons" class="header-anchor">#</a> ナビゲーションボタン </h4> <p>2つのナビゲーションボタンがあり、それぞれがアプリケーションページをリロードしてパラメータを渡すことができます。</p> <ul><li><p>「前へ」ボタンは最初の25のエントリを表示します。他のエントリがない場合、ボタンは表示されません。</p></li> <li><p>「次へ」ボタンは次の25のエントリを表示します。他のエントリがない場合、ボタンは表示されません。</p></li></ul> <h4 id="variables"><a href="#variables" class="header-anchor">#</a> 変数 </h4> <p>ナビゲーションボタンには、テーブルビューの状態を格納するための2つの変数が必要です：</p> <ul><li><code>#table_view_offset#</code></li></ul> <p>この変数は現在のテーブルビューのオフセットを格納します。</p> <p>ナビゲーションボタンは、ページがリロードされる際にこの変数をパラメータとして渡します。</p> <ul><li><code>#record_count#</code></li></ul> <p>この変数はテーブル内のエントリの総数を格納します。</p> <p>値は計算されます。</p> <h4 id="entry-count"><a href="#entry-count" class="header-anchor">#</a> エントリ数のカウント </h4> <p><code>#record_count#</code>をカウントするために、既存の<a href="/ja/topics/script.html#dbfind">DBFind</a>関数呼び出しを修正してください。<code>.count()</code>呼び出しで指定された変数にエントリ数が格納されます。</p> <div class="language- extra-class"><pre class="language-text"><code>DBFind(Name: apptable, Source: src_table).Columns(Columns: "author,timestamp,message").Order(timestamp).Count(record_count) </code></pre></div><h4 id="table-offset"><a href="#table-offset" class="header-anchor">#</a> テーブルオフセット </h4> <p>テーブルビューのオフセットは、ページが開かれる際にページに渡す必要があります。<code>#table_view_offset#</code>に値が設定されない場合は、0に設定してください。</p> <p>以下のコードをページの先頭に追加してください。</p> <div class="language- extra-class"><pre class="language-text"><code>If(GetVar(table_view_offset)){ }.Else{ SetVar(table_view_offset, 0) } </code></pre></div><p><a href="/ja/topics/script.html#dbfind">DBFind</a> 関数呼び出しを再度変更します。今回は、新しいテーブルビューオフセットを使用する必要があります。</p> <div class="language- extra-class"><pre class="language-text"><code>DBFind(Name: apptable, Source: src_table).Columns(Columns: "author,timestamp,message").Order(timestamp).Count(record_count).Offset(#table_view_offset#) </code></pre></div><h4 id="button-code"><a href="#button-code" class="header-anchor">#</a> ボタンのコード </h4> <p>フッターを定義する<a href="/ja/topics/templates2.html#div">Div</a>関数呼び出し<code>Div(Class:panel-footer text-right)</code>を見つけてください。その中にボタンのコードを追加してください。</p> <div class="language- extra-class"><pre class="language-text"><code>Div(Class: panel-footer text-right) { } </code></pre></div><p><em>Previous</em> ボタンは、返す次へが少なくとも 1 つある場合にのみ表示されます。ボタンを追加すると、ページの新しいテーブルビューオフセット <code>offset_previous</code> が計算されます。パラメータは、再度開かれたページの <code>PageParams</code> に渡されます。</p> <div class="language- extra-class"><pre class="language-text"><code>If(#table_view_offset# >= 25) { SetVar(offset_previous, Calculate(#table_view_offset# - 25)) Button(Class: btn btn-primary, Body: Previous, Page: AppPage, PageParams:"table_view_offset=#offset_previous#") } </code></pre></div><p>「次へ」ボタンは、レコードの総数がページに表示されている数より大きい場合にのみ表示されます。ボタンが追加されると、ページの新しいテーブルビューオフセット <code>offset_next</code> が計算されます。パラメータは、再度開かれたページの <code>PageParams</code> に渡されます。</p> <div class="language- extra-class"><pre class="language-text"><code>If(#record_count# >= Calculate(#table_view_offset# + 25)) { SetVar(offset_next, Calculate(#table_view_offset# + 25)) Button(Class: btn btn-primary, Body: Next, Page: AppPage, PageParams:"table_view_offset=#offset_next#") } </code></pre></div><p>これらのボタンを追加した後、ページを保存し、ホーム > メッセージのメニューアイテムからテストしてください。</p> <h4 id="page-refreshing"><a href="#page-refreshing" class="header-anchor">#</a> ページのリフレッシュ </h4> <p>実装する最後の機能は、ページ上のテーブルを自動的に更新することです。ユーザーが新しいメッセージを送信すると、テーブルに表示される必要があります。</p> <p>スマートコントラクトの実装に加えて、同じ効果を得るためにSendボタンを使用して現在のページを再オープンすることもできます。<code>#table_view_offset#</code>は変更せずにページに渡す必要があります。</p> <p>Sendボタンに<code>Page</code>と<code>PageParams</code>を追加し、コードは次のようになります：</p> <div class="language- extra-class"><pre class="language-text"><code>Button(Class: btn btn-primary, Body: Send, Contract: AppContract, Params: "Message=Val(message_input)", Page:AppPage, PageParams:"table_view_offset=#table_view_offset#") </code></pre></div><h4 id="full-page-code-2"><a href="#full-page-code-2" class="header-anchor">#</a> ページ全体のコード </h4> <p>このパートでは、アプリケーションページに多くの変更が加えられます。以下はアプリケーションページの完全なコードです。</p> <div class="language- extra-class"><pre class="language-text"><code>If(GetVar(table_view_offset)){ }.Else{ SetVar(table_view_offset, 0) } DBFind(Name: apptable, Source: src_table).Columns(Columns: "author,timestamp,message").Order(timestamp).Count(record_count).Offset(#table_view_offset#) Div(Class: panel panel-primary) { Div(Class: panel-heading, Body: Table block) Table(Columns: "AUTHOR=author,TIME=timestamp,MESSAGE=message", Source: src_table) Div(Class: panel-footer text-right) { If(#table_view_offset# >= 25) { SetVar(offset_previous, Calculate(#table_view_offset# - 25)) Button(Class: btn btn-primary, Body: Previous, Page: AppPage, PageParams:"table_view_offset=#offset_previous#") } If(#record_count# >= Calculate(#table_view_offset# + 25)) { SetVar(offset_next, Calculate(#table_view_offset# + 25)) Button(Class: btn btn-primary, Body: Next, Page: AppPage, PageParams:"table_view_offset=#offset_next#") } } } Div(Class: panel panel-primary) { Form() { Input(Name: message_input, Class: form-control, Type: text, Placeholder: "Write a message...", ) Button(Class: btn btn-primary, Body: Send, Contract: AppContract, Params: "Message=Val(message_input)", Page:AppPage, PageParams:"table_view_offset=#table_view_offset#") } } </code></pre></div><h2 id="conclusions"><a href="#conclusions" class="header-anchor">#</a> 結論 </h2> <p>このチュートリアルでは、レイアウトスタイル、アクセス権限管理、アプリケーションとリソースの相互作用など、アプリケーション開発者にとって重要な他のトピックについては説明しませんでした。これはエコシステム向けの基本的なアプリケーションの作成方法を紹介しています。これらの高度なトピックに関する詳細な情報については、他の関連文書を参照してください。</p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/IBAX-io/documentation/edit/master/docs/ja/tutorials/app_tutorial.md" target="_blank" rel="noopener noreferrer">GitHubでこのページを編集する</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">最終更新:</span> <span class="time">2023/7/6 18:59:03</span></div></footer> <div class="page-nav"><p class="inner"> <span class="next"><a href="/ja/tutorials/tutorial.html"> IBAX 開発チュートリアル </a> → </span></p></div> </main></div><div class="global-ui"></div></div> <script src="/assets/js/app.d049f7ab.js" defer></script><script src="/assets/js/2.8d94a0db.js" defer></script><script src="/assets/js/102.614f82f0.js" defer></script> </body> </html>