SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

作って学ぶ! 新人研修/Windowsストアアプリで電子カタログを作ろう

Windowsストアアプリの画面を作ってみよう

作って学ぶ! 新人研修/Windowsストアアプリで電子カタログを作ろう(3)

  • X ポスト
  • このエントリーをはてなブックマークに追加

画面のレイアウトを決めよう

 新しいプロジェクトが作成できたら、最初にアプリケーションの画面レイアウトを決めます。

 画面レイアウトは、/css/default.cssファイルで指定します。ソリューションエクスプローラで/css/default.cssファイルをダブルクリックすると、コードが表示されます。

 今回のサンプルアプリでは、画面のレイアウトを次のように指定します。

サンプルアプリの画面レイアウト
サンプルアプリの画面レイアウト

 サンプルのレイアウトを定義したCSSファイルは、以下のようになります。

リスト1 スタイルの設定(default.cssの抜粋)
div#container {
    height:100%;
}
div#header {
    background-color:darkred;
    width:100%;
    height:10%;
}
div#main-right {
    background-color:indianred;
    width: 30%;
    height:80%;
    min-height: 80%;
    float: right;
}
div#main-left {
    background-color:white;
    width: 70%;
    height: 80%;
    min-height: 80%;
    float: left;
    position: relative;
} 
div#footer {
    background-color:black;
    width: 100%;
    height: 10%;
    min-height: 10%;
    clear : both;
    text-align: right; 
}

 これを、default.cssの最下行に定義してください。Visual Studioでは画面上で、[Ctrl]+[S]キーを押すと、修正内容が保存されます。

 Windowsストアアプリでのレイアウトの作成は、ホームページなどでHTMLコンテンツを作成する手順と同じです。なお、CSSやHTML5の文法や詳細については、リファレンスマニュアルなどを参照してください。

文字を表示しよう

 画面のレイアウトが定義できたので、早速アプリケーションに文字を表示してみます。アプリケーションが起動したときに最初に開くページはdefault.htmlです。ソリューションエクスプローラでdefault.htmlファイルをダブルクリックすると、コードが表示されます。

 このファイルには、<head>要素の中にWindowストアアプリを起動するために必要な参照が含まれています。具体的には、このアプリで実行するときに読み込まれるJavaScriptファイルやCSSファイルの参照が定義されています。ここの参照部分を変更すると、アプリケーションが正しく動きませんので、変更しないようにしてください。

リスト2 ストアアプリ起動のための参照(default.htmlの抜粋)
<!-- WinJS 参照 -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

<!-- TravelSample 参照 -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>

 Windowsストアアプリで表示するコンテンツは、<body>要素の中に配置します。先ほどCSSファイルで定義した#containerの中に4つの<div>要素を配置します。

リスト3 レイアウトの配置(default.htmlの抜粋)
<div id="container">
 <div id="header">
 </div>
 <div id="main-left">
 </div>    
 <div id="main-right">
 </div>
 <div id="footer">
 </div>
</div>

 この画面の中に必要な情報を入れていきます。はじめに、アプリケーションのタイトルをheader要素の中に入れます。タイトルレベル2の見出し<h2>をつけて表示した例は次のとおりです。

リスト4 文字列の表示例(default.htmlの抜粋)
<div id="header">
<h2>サンプル旅行代理店 ホテルカタログ</h2>
</div>

 <h2>タグ内の文字に任意のタイトルを指定してください。サンプルでは「サンプル旅行代理店 ホテルカタログ」としました。入力が終わったら、[F5]キーを押してWebストアアプリを実行します。指定した文字列が表示されていることが確認できるでしょう。

タイトルの表示
タイトルの表示

次のページ
ボタンやリストを表示しよう

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
作って学ぶ! 新人研修/Windowsストアアプリで電子カタログを作ろう連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト 阿佐 志保(アサ シホ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7327 2013/09/06 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング