日本語
（著者：サイボウズ 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月版で確認したものになります。
お世話になっております。
こちらのサンプルを再現しようとしたところ、
Uncaught TypeError: Cannot read property '$apply' of undefined
というエラーが出てビューが表示されませんでした。
AngularJSは、Cybozu CDNの https://js.cybozu.com/angularjs/v1.6.0/angular.min.js を入れています。
この問題の解決方法を教えていただきたいです。
宜しくお願い致します。
marron 様
確認したところ、この記事の内容はAngularJSの古いバージョン（v1.2.x）のみで動作するようです。暫定回避策として古いバージョンでお試しいただけますでしょうか。最新バージョン対応については修正を検討いたします。
よろしくお願いいたします。
marron 様
HTMLとJavaScriptを修正し、https://js.cybozu.com/angularjs/v1.6.0/angular.min.js でも動作するように変更いたしました。問題が改善するか試していただけますでしょうか。
よろしくお願いいたします。
cybozu Development team 様
お世話になっております。
修正して頂いたものを試してみたところ、エラーは検出されずビューも表示されました。
クリックした際のアラートも出てきました。
迅速なご対応ありがとうございます！
これからもよろしくお願いします！
こちらのサンプルを参考にして、ファイル管理アプリをカスタマイズしたいのですが、
フォーム部品の「ファイル」から取得できるJSONデータの配列の中から複数のファイル名を取得して
表のセル内で縦に羅列する方法がどうしてもわかりません。
どのように取得し、htmlに表示すれば良いでしょうか？
また、表に表示したファイル名に、そのファイルへのリンクを貼りたいのですが、
この方法もわかりません。
お手数ですが、教えていただけませんでしょうか？
sasa 様
ご質問ありがとうございます。
１.複数ファイル名を取得して縦に羅列
22～24行のスースコードを次のように変更すると、↓こういう感じになります。（2つレコードから取得した添付ファイル）
for (var i = 0; i < e.records.length; i++) {
var record = e.records[i];
var files = record.file;
for (var j = 0; j < files.value.length; j++){
students.push({'name': files.value[j].name});
}
}
2.リンク
また、添付ファイルをカスタマイズビューに表示して、そのファイルへのリンクを貼るなら、
次のTipsは参考になるかと思います。
https://developer.cybozu.io/hc/ja/articles/203126440
こちらのTipsだと、ファイルをクリックすると、ダウンロードしてしまうので、
クリックしてそのファイルのレコードへリンクしたいのであれば、
aタグのURLをレコード詳細画面のURLに設定することができます。