一覧（カスタマイズ）のHTML文字数制限について

平井建丸

2014年12月12日 11:41

TIPS「AngularJSを使ってオリジナルのビューをつくる方法」（下記URL）と同様の方法で、kintone アプリのHTML+AngularJSでオリジナルの一覧画面を作っています。

https://cybozudev.zendesk.com/hc/ja/articles/201297010-AngularJS%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%82%AA%E3%83%AA%E3%82%B8%E3%83%8A%E3%83%AB%E3%81%AE%E3%83%93%E3%83%A5%E3%83%BC%E3%82%92%E3%81%A4%E3%81%8F%E3%82%8B%E6%96%B9%E6%B3%95

ですが、HTMLの文字数制限 10,000 文字に引っかかってしまい、
機能追加ができなくなってしまいました。

HTML Minifier
http://www.willpeavy.com/minifier/

などのツールを用いて、9900文字以上のHTMLコードを
ギリギリ詰め込んでいるのですが、さらに機能を追加する必要に迫られ
苦慮しています。

10,000文字の制限というのは、どうにもならないものなのでしょうか？

よろしくお願い致します。

5件のコメント

落合　雄一 2014年12月15日 07:02

平井建丸様
cstapの落合です。

ViewをすべてカスタマイズビューのHTMLに記述しているため、文字数制限に引っかかっているのかと思います。

Viewは、カスタマイズビューのHTMLに記述するのではなく、JavaScriptのファイル内に記述してはどうでしょう？

Angularは普段使いしていないので間違っていたら申し訳ありませんが、ルーティングで以下のように設定するとtemplateにHTMLを渡せるかと思います。

angular.module('angularSampleApp', ['ngRoute'])
    .config(function ($routeProvider) {
        $routeProvider
            .when('/', {
                template: '<div>sample</div>',
                controller: 'MainCtrl'
            });
    });

しかし、このままtemplateに文字列としてHTMLを書くのは気持ち悪いですし、JavaScriptも機能別にファイルを分けたほうが管理しやすいでしょう。
こういった際は、私の場合以下の様なツールを利用して開発しています。

パッケージマネージャー：npm
モジュールシステム：Browserify
ビルドシステム：Gulp

Angular界隈では、ビルドシステムにGruntの方がよく使われているイメージはあります。

それぞれのツールの使い方は割愛しますが、ソースのイメージとしては以下の様な感じです。

./index.js

var angular = require('angular');

angular.module('angularSampleApp', ['ngRoute'])
    .config(function ($routeProvider) {
        $routeProvider
            .when('/', {
                template: require('./templates/index.html'),
                controller: 'MainCtrl'
            });
    });

./templates/index.html

<div>sample</div>

これをGulpかGruntでビルドして１つのJavaScriptファイルを生成します。
kintoneにアップロードするファイルは、ビルドされたファイルだけになります。

また、Angularはnpmでインストールします。
必要なパッケージをpackage.jsonに記述して

npm install

してください。

以上、参考になりますでしょうか？

平井建丸 2014年12月15日 07:16

落合様

ありがとうございます。
なるほど、GulpやGruntで、テンプレートHTMLも含めて
ビルドすることが出来るのですね。

ありがとうございました。
大変参考になります。

落合　雄一 2014年12月15日 07:23

平井建丸様

かなり少ない説明で申し訳ありませんm(_ _)m

わからない点がありましたら、またご質問ください！

平井建丸 2014年12月17日 08:50

落合様に提案頂いた、GulpやGruntでtemplateをビルドする方法は改めて試したいのですが、さしあたり手っ取り早い方法として、以下のようにディレクティブを用いることで、実現できましたので共有します。

HTML

javascript

app.directive('replacedParts', function() {
return {
restrict : 'E',
require : '^ngModel',
replace : true,
template: '<span>元のHTML</span>'
};
});

落合　雄一 2014年12月17日 08:56

平井建丸様
共有ありがとうございます！

GulpやBrowserifyなどを利用するとなると少し学習コストもかかるので、簡単なものであれば平井様の方法でも良いかと思います。

サインインしてコメントを残してください。