📷

画像

画像エレメントとは、写真やイラストなどを表示させるためのエレメントである。 使用できる画像の種類は、拡張子がjpg,png,gifのものである。
目次
サンプルアプリ

PC内にある画像を表示させる

画像エレメントをページに配置する。
 
画像ソースを「アップロードする」に変更する。
 
画像をアップロードする。 アップロードをクリックし、PC内に保存されている写真や画像を選択する。
 
プレビューを開き動作を確認する。

データベースから表示させる

データベースに移動し、画像を保存するためのテーブルを作成する。
 
デフォルトで作成される「Name」の項目名を変更する。
 
 
「項目を追加」から画像タイプの項目を作成する。
 
「レコードを追加」をクリックし、データを追加する。
 
キャンバス画面に戻り、新規ページを作成する。
 
新規ページにベーシックリストを配置し、右ウインドウ「ベーシック」タブの「データベースの選択」にて先ほど作成したテーブルを選択する。 また、サブタイトル、サブタイトル2、左セクションのスイッチをオフにする。
 
「タイトル」タブを開き、カスタムテキストから「Current 画像リスト >画像タイトル」を選択する。
 
右ウインドウ「ClickFlow」タブを選択し、「リスト」タブの ClickFlow を追加する。「+ ClickFlowの追加」をクリックし「ページ移動 > 新規ページ」を選択する。
 
新規ページに画像エレメントを配置し、画像ソース を「データベース > Current 画像リスト > 画像」を選択する。
 
プレビューを開き、動作確認を行う。

URLから画像を表示させる

1)URLを直接埋め込む方法

新規ページを作成する。
 
画像エレメントを配置する。
 
画像ソースをURLに変更し、URL入力欄に画像URL を入力する。
 
プレビューを開き、動作確認を行う。

2)データベースにURLを保存して表示させる方法

データベースを開き、画像リスト テーブルにURLを保存するための項目をテキストタイプで追加する。
 
「レコードの追加」から画像タイトルと画像URLを追加する。
 
キャンバス画面に戻り、新規ページを作成しベーシックリストを配置する。
 
右ウインドウ「ベーシック」タブを開き、データベースの選択をする。サブタイトル、サブタイトル2、左セクションのスイッチをオフにする。
 
「タイトル」タブを開き、カスタムテキストから「Current 画像リスト > 画像タイトル」を選択する。
 
右ウインドウ「ClickFlow」タブを選択し、「リスト」タブの ClickFlow を追加する。「+ ClickFlowの追加」をクリックし「ページ移動 > 新規ページ」を選択する。
 
新しく作成したページに画像エレメントを配置する。
 
「画像ソース」にURLを選択し、URLにはカスタムテキストから「Current 画像リスト > URL」を設定する。
 
プレビューを開き、動作確認を行う。
 

3)データベースに保存されている画像型の写真やイラストのURLを指定して表示させる

新規ページを作成する
 
新しく作成したページにベーシックリストを配置する。
 
右ウインドウ「ベーシック」タブを開き、画像リストテーブルを選択する。また、サブタイトル、サブタイトル2、左セクションのスイッチを外す。
 
「タイトル」タブを開き、「カスタムリスト」から「Current 画像リスト > 画像タイトル」を選択する。
 
「ClickFlow」に移動し、「リスト」タブからClickFlowの追加を行う。「ページの移動 > 新規ページ」を選択する。
 
新規ページに画像エレメントを配置する。
 
画像エレメントを選択し、「画像ソース」をURLに変更する。
 
URL入力欄のカスタムテキストから「Current 画像リスト > 画像 > URL」を選択する。
 
プレビューを開き、動作確認を行う。