Monaca新機能第三弾。ーモナカプレス技術情報Monaca新機能第三弾。「ターミナル機能」を使ってSassを導入してみようMonaca新機能第三弾。中津川篤司Twitter6Facebook26はてブPocket2LINEHTML5モバイルアプリでは、ページ数が多くなるほどCSSのメンテナンス性を高める必要が出てきます。そこで便利なのがSassをはじめとしたCSSプリプロセッサです。プリプロセッサの導入によりCSSの中で変数や制御構文などが使えるようになり、開発生産性が大幅に向上します。今回新しくなったMonacaのクラウドIDEにはLinuxコンテナが搭載されており、ターミナル機能からアクセスすることでプロジェクトをLinuxコマンドで操作することができます。ようなコマンドも使えますので、非常に自由度の高い環境構築が可能です。今回は、プロジェクトにSassを組み込んで開発する方法をご紹介します。ターミナルを起動するまだ新IDEに切り替えていない方は、右上のリンクから切り替えてください。あとで旧IDEに戻ることもできますので安心してください。新IDEが立ち上がったら、ターミナルを開きます。中央下部にあるプラスアイコンをクリックしてターミナルを追加してください。ここでは通常のLinuxコマンドがそのまま使えます。ディストリビューションはDebian、バージョンは9.4です(執筆時)。ターミナルが起動したら、以下のコマンドを実行します。--save-devこれでNode.jsを使ってSassを扱うライブラリと、監視ライブラリがインストールされます。プロパティを追記します。build\""}}各エイリアスコマンドは、以下のシェルスクリプトを実行するように指定しています。コマンドを自動実行します。ファイルを作成するつづいてSCSSファイルを作成します。これもターミナルから行うと簡単です。scss/style.scss左側のファイル一覧を更新すると、フォルダとファイルができあがっているはずです。ファイルをエディターで開き、例えば以下のように編集します。white;}}コマンドを実行するファイルを編集したら以下のコマンドをターミナルで実行します。buildプレビューの内容が更新されたら成功です。コマンドを叩かなければなりません。コマンドを使ってファイルの変更を監視、さらに変換作業まで自動で実行できるようにします。watchこのコマンドを一度実行すると以降はファイルの監視が行われ続けて、SCSSファイルを編集するとプレビューにも自動反映されるようになります。まとめSassを使うことで、アプリ全体で使う共通のテーマを一括で管理するといったことが簡単にできるようになります。ターミナル機能の活用によって、編集したファイルをプレビューに反映する作業まですべて自動化できます。今回はSassを利用しましたがこれはあくまで一例で、ターミナル機能によって他にも様々なツールをインストールすることが可能です。中津川篤司プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。2004年、まだ情報が少なかったオープンソースソフトの技術ブログ『MOONGIFT』を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶエバンジェリスト業「DevRel」活動をスタートした。Monaca新機能第二弾。