iRemoconの「UIデザイナー」を試す 〜その3〜

ボタン画像を取り込んで利用する

今度はボタンに画像を貼付けて、ボタンらしくすることにする。
ボタンをレイアウトにセットしたら、「ボタン プロパティ」ウインドウから、画像「登録」ボタンをクリックする。UIデザイナー | iRemocon

すると、「メディアストレージ」ウインドウが表示される。このウインドウから、初めから用意されているボタン類や、ユーザーオリジナルのボタン類の登録・読み込みといった作業を行うことができる。
UIデザイナー | iRemocon-26

既に用意されているボタンを読み込んでみる事にする。左下の枠内には「プリインストール」と書かれたフォルダがあるので、その配下のボタン画像/モノトーン/iPadのフォルダを選ぶ。すると登録済みのボタンイメージが表示される。その中のひとつをクリックして画像を選ぶ。UIデザイナー | iRemocon

すると、ボタンに選んだ画像が張り付く。おっと失礼。先に設定した背景色では暗くてわかりにくいので、背景色を白に戻してみる。UIデザイナー | iRemocon

このように、登録済みの画像を呼び出してもいいが、ネットや自作の画像を登録して使う事も出来る。
UIデザイナー画面の左下にある、「ボタンアイコンを探す」とクリックすると、さまざまなボタンアイコンが表示されるのでそれを利用してもいい。(実際は、”button icon”というキーワードによるgoogle画像検索結果がブラウザに表示されるしくみだ)UIデザイナー | iRemocon
googleの画像検索結果では、いろんなボタン画像がでてくる。button icon - Google 検索

今回は、別途用意したボタン画像を利用する事にする。
自作やネットで入手した画像は「メディアストレージ」に登録してから使用する。

「メディアストレージ」ウインドウのユーザーデータ/ボタン画像を選択すると、最初は何も登録されていないので、フォルダの中は空になっている。 この中に、使用したいボタンをどんどん登録して使用するのだ。UIデザイナー | iRemocon-36
「メディアストレージ」ウインドウの左上にある、「画像登録」ボタンをクリックする。UIデザイナー | iRemocon

すると、Finderウインドウが表示されるので、用意しておいた画像を選んで「開く」をクリックする。i-remocon.com でアップロードするファイルを選択します

「メディアストレージ」のボタン画像フォルダに画像が登録された事がわかる。UIデザイナー | iRemoconこうして、使用したい画像を先にどんどん登録しておいてもいいし、ボタンを作成するつど登録してもいい。
次回はこの登録した画像を使って、どんどんボタンを作成していくことにする。



iRemoconの「UIデザイナー」を試す 〜その2〜

Glamo 【自宅や外出先から、お使いの家電をコントロールできる学習リモコンの決定版! 】 iRemocon(アイリモコン) IRM-01L

 真っ白なレイアウトにボタンを配置していく

前回「UIデザイナー」のレイアウト一覧画面からiPad用の縦画面を選ぶところまでを紹介した。今回はいよいよボタンを配置してみる。だが、その前に、背景色をいったん真っ黒にしておくことにする。
「ページプロパティ」ウインドウで「背景色」をクリックする。UIデザイナー | iRemocon-7-2
カラー選択画面がでてくるので、黒を選択する。すると、iPadレイアウト画面もそれにあわせて黒くなる。UIデザイナー | iRemocon-18
ここからボタンを配置する。「コンポーネント」ウインドウの一番上の四角い枠、これがボタンとなる。これをレイアウトにドラッグ&ドロップするとボタンが配置される。実に簡単。UIデザイナー | iRemocon-19
ボタンのサイズはドラッグで自在に変更できる。「ボタン プロパティ」ウインドウから数値を入力してサイズを変更することも出来る。また、ボタン左上の×印をクリックすることでボタンが削除できる。
UIデザイナー | iRemocon-20ボタン内にテキストを入力することが出来る。
UIデザイナー | iRemocon-21

また、文字サイズや文字色も自由に変更できる。
UIデザイナー | iRemocon-22 ボタンの透明度を変更することも出来る。「ボタン プロパティ」の「ボタン透明度」の数値を0.1〜1の間で0.1単位に増減することで変更される。「1」が完全な不透明で、数値を減らすごとに透明度が増していく。UIデザイナー | iRemocon-23 ざっとここまでボタンの配置方法を紹介したが、このままではダサいので、次回はボタン画像を読み込んで利用することにする。

 


iRemoconの「UIデザイナー」を試す 〜その1〜

Glamo 【自宅や外出先から、お使いの家電をコントロールできる学習リモコンの決定版! 】 iRemocon(アイリモコン) IRM-01L

「UIデザイナー」にログインしてリモコン作成をはじめる

いよいよ「UIデザイナー」にログインしてみる。
iRemoconのログイン画面から、ユーザー登録をすませたメールアドレスとパスワードでログインする。
ログイン-1-2-3ログインすると最初はこのようなレイアウト一覧画面が出てくる。
UIデザイナー | iRemoconリモコンデザインのサンプルがいくつも登録されていることがわかる。
UIデザイナー | iRemocon-1iPhone用やAndroid用、カスタムサイズの画面サンプルなどがある。モノトーン調やクリア調、宇宙をイメージしたサンプルが見つかる。

なかには、オトナリモコン、ギャルリモコン、萌リモコンといったサンプルもある。
UIデザイナー | iRemocon-2

今回は、タブレット(iPad)でどこまで使い勝手がいいかを探るのが目的なので、iPad用のサンプル画面をひらいてみる。
UIデザイナー | iRemocon-2-1「iPad(1024 x 768)モノトーン(iPad専用)」デザインを開くと、このような画面になる。「コンポーネント」「ページ プロパティ」の各ウインドウや、「ツールヒント」ウインドウも開かれている。
サンプル画面できあがったサンプル画面から修正していく方法もあるが、今回は1から画面を作り上げていくことにする。レイアウト一覧画面にもどり、左上の「+」をクリックする。
UIデザイナー | iRemocon-1-1機器選択ウインドウが表示されるので、「iPad」を選択する。
UIデザイナー | iRemocon-4

次のような画面になる。
UIデザイナー | iRemocon-5縦向きか横向きかを選択できる。今回は「縦向き」を選んで、縦型のリモコン画面をつくることにする。
「この内容でレイアウト画面を新規作成」をクリックする。
UIデザイナー | iRemocon-6真っ白なレイアウトがでてきた。ここからリモコンを作り上げていくのである。
UIデザイナー | iRemocon-7次回から、ボタンを実際に作っていくことにする。