JavaScriptカスタマイズ

Webpackを使ってkintoneモバイルカスタマイズにCSSを入れる

kintoneのモバイルカスタマイズでは、JavaScriptの適用は設定画面にインポート箇所がありますが、CSSにはそれがありません。つまり、スタイルをあてるにはJavaScript経由で適用することになります。jQueryの$().css()を利用する、text/cssタイプのscriptタグを無理やり入れ込むか等のやや無理のある方法や、ライブラリ・フレームワークであればURL参照で外部ファイルとして読み込むといった方法が取られているかと思います。

最後に示したURL参照で読み込む方法はカスタマイズの適用方法としては現実的ではあるものの、URL参照というだけあってCDN提供されていないCSSファイルに対してはホスト先を要するという敷居が低くないままでした。

今回狙いはWebpackを使ってCSSファイルをJS化し、kintoneのモバイルカスタマイズでのCSS適用の敷居を下げようと言うものです。Webpackはkintone界隈でも使っている方がいらっしゃると思いますが、詳しい説明はここでは割愛します。

ファイルパッケージング

Webpack等のインストール

Node.jsとnpmは、インストール済みとします。なお、今回はWebpack等のモジュールは作業ディレクトリにクローズにインストールして作業を進めたいと思います。

今回の作業用ディレクトリをmobile-customizeとして、作成します。

$ mkdir mobile-customize
$ cd mobile-customize

次に、早速モジュール類をインストールします。webpack、style-loader、css-loaderの3種類です。

$ npm install --save-dev webpack style-loader css-loader

パッケージング定義ファイル

Webpackによるファイルパッケージングの定義ファイルを準備します。webpack.config.js として、次の内容を保存します。

/*
* webpack.config.js
*/
module.exports = {
  entry: "./entryStyle.js",
  output: {
    path: __dirname,
    filename: "style.js"
  },
  module: {
    loaders: [{
      test: /\.css$/,
      loader: "style!css"
    }]
  }
};

ここでは、entryStyle.jsを元にパッケージングして得られるファイルがstyle.jsだということ部分だけ押さえておきましょう。

パッケージング対象のCSSファイル

今回は51-current-default.cssとSweetAlertのCSSファイルsweetalert.cssを取り込めるようにしたいと思いますので、作業ディレクトリ配下に保存しておきます。

エントリファイル

パッケージング元になるエントリファイルentryStyle.jsを準備します。それを実現するための記述は次のようになります。

/*
* entryStyle.js
*/
require("!style-loader!css-loader!./51-current-default.css");
require("!style-loader!css-loader!./sweetalert.css");

パッケージング

この時点でのファイル構造を押さえておきましょう。次のようになっているはずです。

mobile-customize
├── webpack.config.js
├── entryStyle.js
├── 51-current-default.css
├── sweetalert.css
└── node_modules/

準備が整ったら、パッケージングします。

$ `npm bin`/webpack
Hash: 97a115dc834007d255c3
Version: webpack 2.2.1
Time: 2732ms
   Asset   Size  Chunks             Chunk Names
style.js  79 kB       0  [emitted]  main
   [0] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
   [1] ./~/style-loader/addStyles.js 7.15 kB {0} [built]
   [2] ./~/style-loader!./~/css-loader!./51-current-default.css 934 bytes {0} [built]
   [3] ./~/style-loader!./~/css-loader!./sweetalert.css 910 bytes {0} [built]
   [4] ./~/css-loader!./51-current-default.css 41.7 kB {0} [built]
   [5] ./~/css-loader!./sweetalert.css 24 kB {0} [built]
   [6] ./entryStyle.js 139 bytes {0} [built]

カスタマイズ適用

PC用のカスタマイズとモバイル用のカスタマイズに適用してみます。

style.js（イメージ中はstyle.min.js）を読み込むことで、51-current-default.cssとsweetalert.cssのスタイルが取り込まれます。

カスタマイズの実態ファイルcustomize.jsを見ていきましょう。kintoneのスタイルが適用されたことと、SweetAlertが使えることを確認する内容です。

jQuery.noConflict();

(function($) {
  'use strict';

  kintone.events.on([
    'app.record.index.show',
    'mobile.app.record.index.show'
  ], function(event) {
    // PC/モバイルのヘッダにappendするパーツ
    var $parts = [
      $('<span>').text('プロジェクト '),
      $('<div>').addClass('kintoneplugin-select-outer').append(
        $('<div>').addClass('kintoneplugin-select').append(
          $('<select>').prop({
            id: 'project-select'
          })
        )
      ),
      $('<button>').prop({
        id: 'regist-button'
      }).addClass('kintoneplugin-button-dialog-ok').text('登録')
    ];

    var $menu;
    if (event.type === 'app.record.index.show') { // PCビュー
      $menu = $('<span>').append($parts);
      // スタイル調整
      $menu.children().css({
        'vertical-align': 'top'
      });
      // kintoneにappend
      $(kintone.app.getHeaderMenuSpaceElement()).append(
        $menu
      );
    } else if (event.type === 'mobile.app.record.index.show') { // モバイルビュー
      $menu = $('<span>').append(
        $('<table>').append(
          $('<tbody>').prop({
            id: 'menu-tbody'
          }).append(
            $('<tr>').append(
              $('<td>').append(
                $parts[1]
              ).attr({
                align: 'center'
              }),
              $('<td>').append(
                $parts[2]
              )
            )
          )
        )
      );
      // kintoneにappend
      $(kintone.mobile.app.getHeaderSpaceElement()).append(
        $menu
      );
    }

    // ボタンクリックイベント
    $('#regist-button').click(function(){
      swal({
        title: '処理完了',
        text: '',
        type: 'success'
      }, function() {
        return;
      });
    });

    return event;
  });
})(jQuery);

モバイル画面を確認してみましょう。

kintoneのスタイルもSweetAlertも上手く適用されていることがわかります。

考察・まとめ

kintoneのスタイルとSweetAlertの適用を例に、Webpackを用いたCSSのJSによる適用方法を見てきました。CSSをJSで適用できるとは何とも便利な方法ですが、ひとつ課題が残ります。この仕組は最終的にひとつのJavaScriptにまとめられます（「バンドル」と言われます）ので、大きめのCSSフレームワークや多数のCSSをまとめるのにはkintoneにアップロードできるファイルサイズ制限に達してしまうことがありえますので、注意が必要です。

最後に、今回はkintoneのモバイルカスタマイズへのCSS適用という観点からWebpackを利用しましたが、WebpackはJavaScriptやCSSを用いた開発の効率化に寄与してくれるツールですので、他にも便利な使い方がりますし、kintoneの開発でも有用なケースがりますので興味を持ってもらった方は是非トライしてみてください。

 

同じカテゴリーの記事