📷
画像
画像エレメントとは、写真やイラストなどを表示させるためのエレメントである。
使用できる画像の種類は、拡張子がjpg,png,gifのものである。
目次
PC内にある画像を表示させるデータベースから表示させるURLから画像を表示させる1)URLを直接埋め込む方法2)データベースにURLを保存して表示させる方法3)データベースに保存されている画像型の写真やイラストのURLを指定して表示させる
サンプルアプリ
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」を選択する。
プレビューを開き、動作確認を行う。