文系プログラマによるTIPSブログスマートフォン用の表示で見る文系プログラマによるTIPSブログ文系プログラマ脳の私が開発現場で学んだ事やプログラミングのTIPSをまとめています。pluginでcss・jsをinclude!【framework】TwitterGooglePocketGrailsシリーズ第二弾です。今回のお題はcssのincludejsのincludeです。cssの読み込みは対して手間がかかりませんが、jsはそうもいきません。jsには依存関係が発生するため、このjsを動作させるにはあのライブラリが必要、という状況が発生します。<head>内でjsを読み込まず、</body>直前でjsを読み込む事で、jsのロード中にhtmlのレンダリングをブロックさせないように、include位置も気にする必要があります。pluginでそれらを一元管理・読み込み位置の統一・依存関係の定義、ができ、コンパイル時に自動的にcombineしてくれるという優れものなのです。pluginはデフォルトで有効なので、設定は不要です。layout.gspsitemeshを使ったレイアウトの内容は以下の通りです。今回はbootstrapを使っています。/></body></html>layout.gsp内ではjsは読み込みません。pluginの機能を使い、layout.gspを継承したgsp内で読み込みます。cssは全画面共通で読み込むものをlayout内でincludeしておきます。pluginは使いません。特定のページにだけ特定のcssをincludeしたい場合、以下のようにします。'XXX.css')}"></head>このXXX.cssは、全cssのロード後に読み込みたいファイルです。このgspは以下のようにレンダリングされます。href="/tree-cooking-videos/css/XXX.css"></head>bootstrap.min.cssapp.cssXXX.cssという順番に描画されましたね。XXX.cssが読み込まれる位置は、layout.gspの以下の部分によって決まります。これはsitemeshの機能です。cssだけでなく、<meta>や<link>も同様の位置に挿入する事ができます。Javascriptのインクルードさあ問題のjsです。目標は、特定のページにのみ特定のjsを依存関係を解決した状態でincludeする、です。ダメな書き方まず、layout.gsp内でjsをincludeしてはいけません。/></body>layoutはこうなっています。layout.gspを継承したgspをmovie.gsp(以降movie.gspと呼ぶ)とすると、movie.gspで「masonry.pkgd.min」と「moviesList.js」を読み込みたい場合、movie.gspの</body>直前に両者のincludeを書きます。すると、以下のようにhtmlが描画されてしまいます。></script><footer>・・・略・・・</footer></body>topnaviとfooterの間にjsが描画されてしまいます。jqueryのincludeutil.jsのincludeapplication.jsのincludemasonry.pkgd.min.jsmovie.jsという順に描画させたいのですが、このままだとjquery等を先に読み込まさせようとすると、どんなに頑張ってもtopnaviの直前になりますが、これだとhtmlの病が途中でjqueryのincludeが開始され、ブラウザによってはjsのロード完了までhtmlの描画がブロックされます。最初に図解をご覧下さい。こんな感じの構造になります。クリックすると拡大して表示されます。pluginを使うproject/Configuration/ApplicationResources.groovyでjsの管理を行います。中身は以下のようになっています。pluginは、グループ名を付けてgsp内でグループ名を指定してjsを読み込むのです。dependsOnでグループ同士依存関係を設定する事ができます。movilesListはjqueryが先にloadされている事が前提なので、coreグループに依存させています。dependsOnはカンマ区切りで複数指定でき、書いた順番によって依存関係が決まります。書くと、1をload、2をload、3をload、という順にloadされます。movie.gspは以下のようにしてjsを読み込んでいます。/></body>たった1行です。これなら開発者によって読み込み方がバラバラになる事もありません。movie.gspは以下のようなhtmlとして描画されました。></script></body>見に覚えの無いjsが2つincludeされていますね。これは、Grailsがjsのグループ毎にjsをcombineして依存f関係順にincludeしてくれているのです。bundle-bundle_core_defer.jsの内訳は、jquery-2.0.3.min.js、bootstrap.min.js、util.js、application.js」で、bundle-bundle_movilesList_defer.jsの内訳は、masonry.pkgd.min.js、moviesList.jsです。これで目標通り、依存関係を解決した状態で、ページ毎に読み込むjsを変える事ができました!!このモジュール機能は恐ろしく便利で、以下のようなメリットがあります。開発者毎にjsのincludeの書式が変わるのを防ぐ。開発者毎にincludeする位置が変わるのを防ぐ。フォルダ構成変更によるjsのincludeパスがApplicationResources.groovy1ファイルの変更で済む。依存関係の変更が容易。jqueryをzeptoに変更するのも容易。jsをグループ毎にcombineしてくれるので、httpリクエスト数を減らせる。jsのcombineですが、なんとローカル環境でもcombineされるのです。combineをリアルタイムにしてくれるようです。combine、等という事も可能です。コンパイル時に自動で行われるので、開発者はminifyとcombineの処理を記述する必要が無くなります。bootで静的リソースにキャッシュ回避のための「?xxx=xxx」を自動追加するできるんだな、これが。週間)昔は業務系SIer、今はベンチャー企業でプログラムを書いています。INFILEを実行できるようにするmacのAutomatorでhomebrewのコマンドをFinderのサービスから実行できるようにするReactオススメ書籍React自体の基礎、AtomicDesignの適用、CSSの運用手法の歴史的な経緯とメリットデメリット、Reduxの基礎、redux-sagaによる非同期処理、サーバサイドレンダリング、テスト、lint、を学ぶ事ができます。単行本(ソフトカバー)この商品を含むブログを見るAngularオススメ書籍Angularを学ぶなら絶対以下がおすすめです!バインディング、ディレクティブ、パイプ、フォーム、コンポーネント、サービス、ルーティング、httpClientによる非同期httpリクエスト、テスト、angular-cli、を非常に丁寧な説明で網羅的に解説しています。大型本この商品を含むブログを見るSEOオススメ書籍SEOを学ぶなら絶対以下がおすすめです!クローラに対して何をどうすればサイトの巡回効率・速度を上げる事ができるのか、どういったマークアップをする事が標準仕様なのか。巷に溢れる業者による経験則に基づくオレオレSEO情報は一切無く、全てGoogle等のオフィシャルな情報に基づいて何をすべきか、どんな手段があるのかを解説されています。プログラマな私が業務で行った施策が多く書かれており、プログラマ寄りで高度な内容となっており、巷のビギナー向けの曖昧な情報集とは一線を画しています。Amazonアソシエイト・プログラムの参加者です。reserved.スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。