新規投稿
フォローする

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

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文字の制限というのは、どうにもならないものなのでしょうか?

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

0

5件のコメント

Avatar
落合 雄一

平井建丸様
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でビルドして1つのJavaScriptファイルを生成します。
kintoneにアップロードするファイルは、ビルドされたファイルだけになります。

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

npm install

してください。

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

2
Avatar
平井建丸

落合様

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

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

0
Avatar
落合 雄一

平井建丸様

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

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

0
Avatar
平井建丸

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

HTML

<body>
<replaced-parts/>
</body>

javascript

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

0
Avatar
落合 雄一

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

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

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