アプリケーションのプロジェクトを作成します。名前は「qml-example」とします。「ファイル(F)」メニューの「ファイル/プロジェクトの新規作成(N)...」を選びます。アプリケーション」を選択して「選択(C)...」をクリックします。プロジェクト」ダイアログが表示され、パスの入力が促されます。「名前:」欄と「パス:」欄にそれぞれプロジェクトの名前とパスを入力してください。今回のプロジェクト名は「qml-example」にしました。パスはスペースを含まない任意のパスを指定してください。入力したら「続き」をクリックしてください。「プロジェクト管理」の画面ではそのまま「終了」をクリックしてください。作成した「qml-example」プロジェクトとそこに含まれる「qml-example.qml」が編集用に開かれます。ファイルの内容は前回作成した「helloqml.qml」と同じ以下のような内容になります(一行目のコメントは説明のために追加したものです)。「//」の場合はそこから行末までが、「/*」と「*/」で囲った場合にはその間がコメントとして無視されます。World」とのみ表示されるアプリケーションが起動します。下に移動させてスペースを確保しましょう。後で利用しますので、削除しないでください。デザイナに移動します。World」をドラッグしてそのまま枠の下側まで移動させてください。要素の位置を変更できます。お好きな方法で編集してください。あたりを目安にしてください。値が変更されていることを確認してみてください。下側に移動させたら、画像を上側に表示してみましょう。要素をドラッグして、中央のアプリケーションのウィンドウにドロップします。場所は左上に近いところにしてください。続いて、表示する画像を指定します。要素が選択された状態になっていると思いますので、右側の「プロパティ」ペインの「Image」タブを選択し、「画像」の「ソース」を変更してください。そのままコピーするか、適当なディレクトリにダウンロードして、「...」ボタンでそのファイルを選択してください。100×100になっていますので、表示が少し横に間延びしています。「プロパティ」ペインの「ジオメトリ」タグの「サイズ」「W」をリセットして画像の幅に合わせます。このポップアップメニューは「サイズ」プロパティの「W」と「100.0」の間にある○印をクリックすると出てきます。同様に「H」についてもリセットしてください。要素のサイズはソースに指定された画像のサイズと同じになります。それぞれ削除されます。エディタに戻って確認してみます。形式のコメントで示しています。要素が追加されています。要素の各プロパティの説明を以下に記載します。要素で画像を表示します。要素を参照する際に使用します。要素のプロパティです。e=item])を指定しています。要素が表示する画像のソースを指定します。エディタで直接記述する際には、「"」でくくるのを忘れないようにしてください。形式でネットワーク上の画像ファイルを指定していますが、ローカルのファイルシステムにあるファイルを相対/絶対パスで指定することも可能です。画像が表示できたら、今度はボタンを作成して、マウスを使用してみましょう。ようなボタンそのものの要素は存在しません。要素を組み合わせて使用します。要素をマウスに対応させてボタンとします。要素の文字列をボタンらしく「Click」に変更しましょう。デザイナでの編集方法を記載しておきます。デザイナに移行します。要素をクリックして選択して、「プロパティ」ペインの「Text」タブをクリックして表示します。World」と表示された「テキスト」要素がありますので、ここをクリックして「Click」に編集します。要素をマウスに対応させます。要素を置く必要があります。Interaction」にある「MouseArea」をウィンドウの適当な位置に置いてください。要素は小さいためにうまくいきません。そのため、左上の「ナビゲータ」ペインを使用します。「ナビゲータ」ペインの「mouse_area1」をドラッグして、その上にある「Text」に重ねてドロップしてください。うまく「mouse_area1」が「Text」の子要素になったら、次は「mouse_area1」と「Text」の座標を一致させます。「Text」全体をボタンとするため、まずは「mouse_area1」が選択されている状態で「プロパティ」ペインの「ジオメトリ」タブをクリックして表示させます。「ジオメトリ」が表示されたら、その中の「レイアウト」の下の「アンカー」ボタンの中で真ん中付近の四方を囲まれているボタンを押してください。下記の図のように「Click」と同じ座標、サイズに「mouse_area1」が変更されます。これで「Click」でクリックなどのマウスの操作を取得することができるようになります。今回はクリックを検出してログにメッセージを出力させてみましょう。エディタに戻ってください。console.log("Clicked")」という行を追加してください。修正後のソースは以下のようになります。リストBから変更した箇所を[c番号]形式のコメントでマークしました。要素のプロパティです。レイアウトに関しては後日説明する予定です。クリックされたときのアクションを指定します。使用してメッセージ”Clicked"を出力しています。シームレスに使用して様々なアクションを行うことができます。アプリケーションの編集が終わったら、セーブして実行してみてください。ウィンドウが表示されたら「Click」をクリックして、「アプリケーション出力」ペインに「Clicked」と表示されることを確認してみてください。上の画像をそのまま指定している場合、アプリケーションの実行から画像の表示までに時間がかかることがあります。表示させたい場合にはローカルにファイルをコピーしてそちらを指定してください。要素を使ってみましたが、いかがでしたでしょうか。使用してボタンを作っているところは手間に思われる方もいらっしゃるかと思います。いうプロジェクトで整備を開始しています。(再)紹介」を参照してください。これらのコンポーネントをインポートすればもっと簡易にボタン等を作成することができるようになると思われます。次回は今回作成したボタンを使用して画像の移動を行ってみようと考えています。