Grunt.jsを使ったWeb制作のワークフロー

mustacheでテンプレートから動的にHTMLをレイアウトする

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
mustacheは、テンプレートからJavaScriptで動的にHTMLの表示を構成します。
講師:
06:17

字幕

このレッスンでは テンプレートから JavaScript で動的に html の表示を構成する Bower のパッケージである mustache をインストールして 設定したいと思います mustache のページを表示するには 先ず Bower の公式サイトである bower.io の Search packages このサーチのフィルドで mustache という 名前を入力すれば良いでしょう mustache.js こちらが先程のプラグインのページです 下の方にスクローズすると 説明やインストールの仕方等が出ています NPM でもインストールできますが 今回は Bower で インストールする事にします ではこれをコピーしてしまいましょう コマンドラインツールの ターミナルを開きました ここで先ずディレクトリを プロジェクトの gruntworkflows ですね ここに切り替えます 切り替えができましたので先程 コピーしておいた Bower のコマンドをペーストします インストールする訳ですけれども --save ですから Bower のjsonfile に mustache が必要だという事を 書き加える事になります これでいいので エンターキーを押しましょう Bower が mustache をインストールしました mustache は 2.2.0 というバージョンの様です bower.jsonfile を開きました そうすると dependency 必要ですよという中に mustache が加わりました これで Bower が mustache を必要とするという事で 必要な CSS だとか 必要な JavaScript のファイルを ここから読み込んで html の後に適用する という事になる訳です そして html ファイル index.html には 実は既に mustache の 設定はしてあります 下のコードの方を スクロールして行きますけれども もうちょっとですかね スクリプトの要素があるんですが その中に 二重の波括弧の抱えた よく分からない mustache をご存知なければ よく分からない記述がありますけれども このタグのような記述 これが mustache の テンプレートの記述です このテンプレートの記述に従って mustache の JavaScript が 自動的に html の 要素を構成してくれる という事なんですね さてこの Speakers on tour という 要素を選びました h1 の要素ですけれども 実はこの下 何もありません というのはテンプレートが 定められているだけで 実際の記述が無いからですね このテンプレートの部分の 要素というのは 動的にサーバー上で設定されます それは JavaScript と jsonfile に基づきます gruntfile.js の方も 特に手を加える必要はありません mustache は別に Grunt のタスクを構成する ファイルではないからです html の レイアウトを作るという部分 そして この gruntfile の方では既に Bower が依存する html に対して JavaScript や CSS を 生成する訳ですけれども その CSS や JavaScript のファイルは 自動的に grunt-wiredep で 作ってそして更に grunt-bower-concat で そのファイルをまとめて JavaScript や CSS のフォルダの方に 出力をしてくれます そしてその依存する 要素コンポーネントの中に mustache が含まれていますから このタスクを実行しさえすれば 自動的に mustache が 表示を変えてくれるという事になるんです ではターミナルで Grunt のデフォルトのタスクを 実行しましょう grunt エンターです 特にエラーがなくタスクが行われました ではブラウザの方で確かめてみましょう プロジェクトとフォルダの中の ビルドされた index.html を開きました そして一番下までスクロールしてみましょう Speakers on tour これより下が無いんですね 実は jsonfile を使って動的に ページを構成するのが mustache です ですから今 本当にローカルからファイルを開いています これでは動的に生成する jsonfile がきちんと読め無いんですね とういう事なので Grunt のタスクの中にはローカルに サーバーを立ててくれる そういう設定が入っていますので このまま ではローカルホストに繋いでしまいましょう そうするとサーバーとして この index.html 同じファイルがもう一度読み直されます ではまた一番下まで行くと 先程とは表示が違いますね 人の顔と 名前らしきものそれから 経歴らしきものが出ています 上の方にスクロールすると 入れすぎちゃいましたね Speakers on tour とあり 先程までなかったこの下の表示ができています この下の表示は 先程お見せした 二重の波括弧とタブで作った あのテンプレートに従って mustache が JavaScript で生成してくれたんです とういうことでちゃんとサーバーで見れば mustache が動いたという事です このレッスンでは テンプレートから JavaScript へ動的に html のページを構成してくれる Bower のパッケージである mustache をインストールしました 既に mustache のテンプレートの設定が index.html の方に やってありましたので bower.json の方に インストールをして 依存するファイルとして加えたら それでもうページが 構成できてしまったという事です

Grunt.jsを使ったWeb制作のワークフロー

Gruntは開発におけるコンパイルやビルドを自動化するツールです。これを使えば煩わしい作業の繰り返しから解放されます。このコースではGruntのインストールや定義ファイルの作り方、JavaScriptファイルの連結やSASSによるスタイルシートの生成などを実際に使いながら説明します。またフロントエンド用のパッケージマネージャBowerについても紹介します。

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

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

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

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