サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
大谷翔平
developer.cybozu.io
(著者:江田 篤史) はじめに kintoneは、カスタマイズによってレコードの表示方法を変更できるため非常に便利です。 レコードに入力されたマークアップテキストやマークダウンテキストを解析して表示することも可能です。 しかし、セキュリティ面を意識しないと、悪意を持ったユーザーからサイバー攻撃を受ける可能性があります。 今回はkintoneアプリで想定されるサイバー攻撃の例と、DOMPurifyを使った対策をご紹介します。 DOMPurifyはCybozu CDNにてサポートされているのでご利用ください。 DOMPurifyのメリット 単純に正規表現で置き換えたりしようとすると回避されてXSSを埋め込まれる可能性があり、 innerHTMLやjQueryのhtml()などで出力する前にDOMPurify.sanitize() しておくことで、 より安全にHTMLタグを許容することができます
アプリIDをメモしておいてください。後ほどコード内で指定します。 例)https://{subdomain}.cybozu.com/k/xxx/ ←アプリIDはxxxの部分の数字です。 APIトークンを生成してください。アクセス権は、「レコード閲覧」と「レコード追加」にチェックを入れます。こちらも後ほどコード内で指定するので、メモしておいてください。 APIトークンの生成方法は、こちらをご参照ください。 これにてkintoneの設定は完了です。 Google Home アプリのインストールと設定 次は、Google Homeを使うための初期設定です。 電源ケーブルをGoogle Homeに差し込みます 電源アダプターをコンセントに差し込みます スマートフォンやタブレットでGoogle Homeアプリをダウンロードして実行します 公式サイトやレビューサイトにも手順が載っているので、参考にしな
サブドメイン名をメモしておきます。(後ほどコード内で記述します) 例)https://〇〇〇.bozu.com/k/xxx/ ←サブドメイン名は〇〇〇の部分です。 これで一旦kintone側の下準備は完了です。 Mapboxの設定 次にMapboxへの地図スタイル読み込みを行います。因みにMapboxには、下のギャラリーやChoose a mapにあるように、様々なスタイルの地図が用意されています。 これらのテンプレートの地図を利用することもできますが、初期設定では日本語表記に対応していないので、少し加工したスタイルを読み込んでいただきます。 (ご自身で編集することも可能ですが、ここではその方法の紹介は割愛します) 今回はシンプルな「Streets」というスタイルを使います。それでは早速Mapboxにログインして作業していきましょう! Mapboxにログインして、スタイルを作成します。まず
kintone、Garoonのカスタマイズ開発を行っている技術者同士で、困りごとや悩みを具体的に相談、解決していくことを目的とするコミュニティです。
閲覧者を格納するフィールド「閲覧者」にフィールドタイプ: 作成者を利用している事に注目してください。これは、ログを仕掛けた別アプリを閲覧しているユーザー=APIを通して本アプリへデータ作成するユーザーとなるためです。また同様に「閲覧日時」も同じ理由です。 注意点として、このアプリのアクセス権でEveryoneに追加権限を設定しておく事を忘れずに。作成できたら、アプリIDは後で使うので控えておいてください。φ( ̄ー ̄ )メモメモ 反映する値の取得 このアプリに格納する値として、以下2つはデータ挿入時にkintoneによって自動で適切な値が差し込まれるため、こちらで何かする事はありません。 閲覧者(作成者) 閲覧日時(作成日時) 残る「閲覧アプリID」と「閲覧レコード番号」ですが、これらはレコード詳細画面が表示された時のイベント のeventオブジェクトのプロパティに入っているのでこれを使いま
(※以下の結果画面は違うフィールドも多数入っていますが) それらを満たしkintoneにカスタマイズを加えると、以下のように詳細画面にAmazonからの呼び出し結果が表示できるようになります♪ Amazonで必要な情報の取得 今回作成するサンプルに必要な、Access Key ID と Secret Access Key、トラッキングIDの3種類の情報を取得しましょう。 取得方法については、今回割愛させていただきます。 phpを利用したAmazonへのパラメーターの生成方法について 最初に一言申し添えておかねばなりません。 なぜkintoneからAmazonの情報を取得するのにphpを介さなければならないか、について。 このTipsをご覧の皆様は、すでに有識者の皆様が執筆された、秀逸なTipsの数々にも目を通されたことでしょう。 Tipsの中には 外部APIの同期処理をつかってみよう! 他
(著者:サイボウズ kintone開発チーム 天野 祐介) kintoneはJavaScriptを使って自由にカスタマイズすることができます。 カスタマイズにより独自のリッチなUIを構築したり、新しい機能を追加したりできるようになりますが、セキュアなコーディングをしないとクロスサイトスクリプティング脆弱性を作り込んでしまう危険性があります。 この記事では、JavaScriptでセキュアなコーディングをするための基本的な点を解説します。 主な原因 脆弱性を作り込む主な原因になるコードは、要素の動的な生成です。特に、レコード情報などのユーザーが入力した値を使って要素を生成するときに脆弱性が発生しやすくなります。 対策 document.write()やelement.innerHTMLを使って要素を生成するときは、コンテンツとなる文字列をかならずHTMLエスケープするようにしましょう。 以下は
(著者:サイボウズ KADOYA Ryo) kintoneのJavaScriptカスタマイズを行うときに、デバッグをかんたんに行う方法を紹介します。 JavaScriptファイルはkintoneか外部の公開サーバーにアップロードする必要があるため、kintoneの動作を確認しながらデバッグを行いたいときは、いちいちアップロードする手間がかかります。 そこで、クラウドのオンラインストレージサービスを利用します。ストレージサービスの中には、手作業でアップロードしなくても、自動的にローカルファイルとシンクしてくれるものがあります。 kintoneのJavaScriptカスタマイズで利用するためには、SSLが利用できることと、サービスが適切なContent-Typeを返すことが条件となります。ここではDropboxを利用した例を紹介します。Google Driveなど他のサービスでも基本的な手順は
年に一度のお祭り「kintone hack 2020」 予選会への挑戦状を受付開始しました。 今年は、チーム参加解禁です! kintone を舞台に、皆さんで力を合わせて、 1つのわくわくするアイデアを生み出してください。 もちろん、「いや、1人で挑戦だ!」という勇者も大歓迎! 皆様からのわくわくするような挑戦状、お待ちしております! kintone hack 2020 特設サイトへ
このページを最初にブックマークしてみませんか?
『developer.cybozu.io』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く