PhoneGap Buildで作るスマートフォン用メモ帳アプリ

端末の高さに併せたレイアウトの調整

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
アプリを動作させる端末の高さに応じて、メモ帳の本文入力部分の高さを、JavaScriptを使って調節する方法について解説致します。
講師:
04:16

字幕

このレッスンでは アプリを 動作させる端末の高さに応じて メモ帳の本文入力部分の高さを JavaScript を使って調節する 方法について解説致します まずは ダウンロードしてきた こちらの adjust_height の フォルダの中に入っている この js フォルダの中の app.js ファイル そして css フォルダの中の index.css ファイル こちらをエディタで開いてください そして これがそれらの ファイルを開いた状態です これらのファイルを使って 今回の レッスンの解説を進めていきたいと思います それでは早速レッスンを 始めていきましょう まずこちらに表示されている index.html ですが 現在はメモ一覧画面が 表示されているので これをメモの詳細画面に変更しましょう 先ほど開いた index.css ファイル こちらの中の display の値を それぞれ変更します まず id list が ついた section の display を none そしてさらに下のほうにある こちらの id detail がついた section の display に対して block を指定してあげます そしてブラウザを更新すると このように詳細画面が出てきましたね それでは app.js ファイルに戻ります さて今回は こちらのメモの個別詳細画面の このテキストエリアの部分 このテキストエリアの部分を 端末の高さに応じて 調節する方法について見ていきます この部分の実装がこちらの JavaScript ファイルの この部分となります それではどのように実装しているか 確認していきたいと思います まずは 変数を一つ作ってあげます その変数の名前は ここでは memoBodyHeight としています そしてイコールと書いて その次にまずは $ マークの window の height と書いていますね これをすることによって 端末の高さを取得することができます その端末の高さからマイナスのその次 この pageDetail は このメモの個別詳細画面を 定義している変数ですね そのメモの個別詳細画面の中の find p クラスの memoTitle 要するにこちらの部分 こちらの部分の height を マイナスで引いてあげています そしてさらにマイナスが続いて 同じよう変数 pageDetail の中の footer 要するにこの部分です この部分の height 高さを さらに引いてあげて そしてさらに 50 を引いてあげています これは 50 ピクセルという意味で 微調整をしています このようにすることでこちらの 変数 memoBodyHeight には 端末の高さから こちらのタイトル部分 そして footer 部分 そして微調整分の高さを 引いた部分が代入されます 要するにこちらの部分の高さの値です では ここで求めた高さを実際に こちらのテキストエリアに代入していきます それがこちらの部分です 変数 pageDetail の find その中にあるテキストエリア 要するにこちらの部分ですね こちらの部分の height 高さを ( ) の中 この中に memoBodyHeight を 入れることによって こちらのテキストエリアに対して 先ほど求めた高さの値が 設定されるようになります 以上でレッスンは終了です 今回はアプリを動作させる 端末の高さに応じて メモ帳の本文入力部分の高さを JavaScript を使って調節する 方法について解説致しました 以降のレッスンからは メモ帳アプリ内の メモ一覧画面の中のさまざまな機能を JavaScript で実装 していく方法について 解説致しますのでそちらも 合わせてご覧ください

PhoneGap Buildで作るスマートフォン用メモ帳アプリ

PhoneGap Buildを使えば、HTMLやCSS、JavaScriptを使って作成したコンテンツを簡単にモバイル用アプリに変換することができます。このコースではPhoneGap Buildを使ってiOSやAndroid端末に対応したメモ帳アプリを作る方法を学びます。アプリのビルドや実機端末へのインストール、各種機能の実装などについても説明します。

1時間38分 (24 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2015年03月23日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。