AngularJSを使ってオリジナルのビューをつくる方法

フォローする

(著者:サイボウズ KADOYA Ryo

AngularJSは、Googleとコミュニティによって開発されているオープンソースのJavaScriptフレームワークです。AngularJSをkintoneに組み込むことで、MVCアーキテクチャーを使ったビューのカスタマイズが可能です。

以下にその方法を説明します。

AngularJSのダウンロード

AngularJSは以下のサイトからダウンロードできます。
http://angularjs.org/

アプリの作成

ここでは、レコード番号と氏名だけのシンプルな名簿アプリを作ってみます。

フィールド名 フィールドコード
レコード番号 rec_no
氏名 name

 

一覧の設定で、「カスタマイズ」を選択します。

カスタマイズ形式のビューを作成するには、kintoneの管理権限が必要です。

  • このページに表示されている一覧IDを覚えておく(下記記載のサンプルコード内で使用します)
  • 「ページ切り替えを表示する」にチェック
  • 絞込み条件:すべてのレコード
  • ソート:作成日時(降順)

HTML欄に以下を入力して、保存します。

次に、詳細設定から「JavaScript / CSSでカスタマイズ」を開き、以下の順番でJavaScriptファイルを読み込ませます。

  • AngularJSのJavaScriptファイル
  • 以下のように記述したJavaScriptファイル

ビューの確認

作成されたビューは、通常の一覧画面と同じようにレコードの並び替えや絞込みを行うことができます。

 

このTipsは、2014年4月版で確認したものになります。

コメント

Avatar
marron

お世話になっております。

こちらのサンプルを再現しようとしたところ、

Uncaught TypeError: Cannot read property '$apply' of undefined

というエラーが出てビューが表示されませんでした。

 

AngularJSは、Cybozu CDNの https://js.cybozu.com/angularjs/v1.6.0/angular.min.js を入れています。

この問題の解決方法を教えていただきたいです。

宜しくお願い致します。

Avatar
cybozu Development team

marron 様

確認したところ、この記事の内容はAngularJSの古いバージョン(v1.2.x)のみで動作するようです。暫定回避策として古いバージョンでお試しいただけますでしょうか。最新バージョン対応については修正を検討いたします。

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

Avatar
cybozu Development team

marron 様

HTMLとJavaScriptを修正し、https://js.cybozu.com/angularjs/v1.6.0/angular.min.js でも動作するように変更いたしました。問題が改善するか試していただけますでしょうか。

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

Avatar
marron

cybozu Development team 様

お世話になっております。

修正して頂いたものを試してみたところ、エラーは検出されずビューも表示されました。

クリックした際のアラートも出てきました。

 

迅速なご対応ありがとうございます!

これからもよろしくお願いします!

ログインしてコメントを残してください。
Powered by Zendesk