Aldebaranな人のブログスマートフォン用の表示で見るAldebaranな人のブログこの広告は、90日以上更新していないブログに表示しています。Pi関連のトピックへのアクセスが多いようで、嬉しい限りです。ご覧頂いている皆さま、ありがとうございます。今回はサイボウズスタートアップスさんからリリースされているkintone連携サービス「kViewer」のカスタマイズ例をご紹介したいと思います。kViewerは、kintoneのデータやグラフを外部に公開できるサービスです。kintoneと同じように30日間の無料トライアルも可能です。(公式サイトより)完全公開から、アクセス制限(パスワード認証、IPアドレス)、公開期間等の設定に加え、kintoneと同じようにJavaScriptやCSSの埋め込みによるカスタマイズまでできるようになっています。CMS、掲示板的な使い方が向いているように感じますが、見た目等は自在に作り込むことが出来ます。APIを用いたkViewerカスタマイズをご紹介したいと思います。Café」の開催情報を利用し、地図上の開催地にピンを立てていきたいと思います。対応するkintoneアプリもこちらに公開させてもらっています。出来上がりイメージです。従来のkViewerの画面は、kintoneの通常の画面に似たようなものですね。【After:JavaScriptとCSSによるカスタマイズ】(実際の公開ページはこちら)やはり、地図が入ると豪華に見えますね。今回はピンをクリックするとバルーンが出るオマケをつけています。サンプルコードは次の通りです(GitHubで公開中)。JavaScriptCSSJavaScriptもベタに書くことになりますが、kintoneでJavaScriptカスタマイズをやったことがある方は、同じ要領でカスタマイズできると思います。kViewerならではのポイントを挙げるとすれば、ページやライブラリの読み込みを待つ処理を入れる必要があるところだと思います。サンプルではよく使うjQueryを取込んでいますが、今回は使っていません。ちなみに手こずったのは、データバインドです。kViewerでは現状kintoneのようにデータバインドする関数・APIがありませんので、表から取り出すことにしました。ここでクロスブラウザ(innerTextとtextContent)に紐つく問題の顕在化です。getElementText()で項目名前後の改行と空白を取り除くようにして解決しています。最後に、kViewerはホームページへ埋め込むためのiframeタグのコードを発行してくれます。このブログの横幅の制約上、ちょっと苦しい配置ですが実際に張り込んでみました。長くなりましたが、kViewerでのページカスタマイズを考えられている方の参考になれば幸いです(サンプルのご利用に際しては自己責任でお願い致します)。(1)月別アーカイブ検索リンクはてなブログブログをはじめる週刊はてなブログはてなブログProアクセス解析はてなブログをはじめよう!yamaryu0508さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。