皆さんこんにちは！Cybozu Days2022はいかがだったでしょうか。1日目の最後には、kintone show+case unlimitedが開催されましたね！弊社トヨクモからは、昨年チャンピオンの江田さんがゲストとして登場しました！
そこで本記事では、kintone show+case unlimitedの冒頭で江田さんが披露したkintoneでホームページを作る方法をご紹介をしたいと思います！kintoneとkViewerを活用した事例になります！
kViewerは、kintoneライセンスを持たない外部ユーザーに、kintone内の情報を公開できるサービスです。
「kViewerって具体的に何ができるの？」という方は、以下記事で詳しく解説しているので、ぜひ合わせてご覧ください。
kViewer（ケイビューワー）とは、kintoneライセンスを持たないアルバイトや取引先の方に、kintoneの情報を共有するkintone連携サービスです。 「kViewerって何ができるの？」「導入するメリットは？」などの疑問に[…]
それでは早速みていきましょう。
kintoneでホームページを作ろう！
kintoneのレコードを利用したホームページ作成ができるツール「HomepageCreator」を使って、kintoneでホームページを簡単作成する方法をご紹介します。
今回は例として「kintoneの事例管理アプリを更新すれば、自動でWebサイトにも反映される」といった仕組みの設定を行います。
しかし、Webサイトを構築するには、HTMLやCSS、APIサーバーの構築やJavaScriptなどが必要となります。
そこで、kintone×kViewer×HomepageCreatorを組み合わせて、ノーコードで誰でもホームページをかんたん作成・管理できるようにします。
通常kintoneは、組織内の人だけが情報を閲覧することが可能ですが、kintone連携サービスのkViewerを利用することで、誰でもホームページを閲覧できるようになります。
ホームページの作成手順は以下の通りです。
- HomepageCreatorをインストール
- kintoneで新しいアプリを作成しHomepageCreatorを追加
- kintoneでホームページのデザインを設定
- テンプレートを書き出してkViewerにインポート
- 公開
順に解説していきます。
※本記事の設定は、サポート対象外とさせていただいております。あらかじめご了承ください。
HomepageCreatorをインストール
まず、HomepageCreatorをダウンロードします。（テンプレートはこちら）
テンプレート左上の「無料ダウンロード」をクリックします。
次に、GitHubの画面に遷移するので、下にスクロールして下記キャプチャの「プラグイン」をクリックし「plugin.zip」をダウンロードします。
kintoneで新しいアプリを作成しHomepageCreatorを追加
次に、kintoneで空のアプリを作成します。kintoneユーザーであればもうお馴染みですね。
アプリを追加できたら、kintoneアプリ>設定>プラグインより、HomepageCreatorをkintoneに追加します。
kintoneでホームページのデザインを設定
次に、ホームページの見た目を作っていきます。
デザインの設定方法は動画でも解説しているので、ぜひ参考にしてみてください。
背景画像の設定や、画像の上にテキストやリンクを配置するなど、直感的な操作で簡単に編集ができます。
江田さん曰く、このページを作るのにかかった時間は5分程度だったそうです。（めちゃくちゃ早い）
テンプレートを書き出してkViewerにインポート
HomepageCreatorの編集が完了したら、テンプレートを出力してkViewerにインポートします。（kViewer操作ガイドはこちら）
kViewerの管理画面で、ビューの作成>インポートして作成を選択し、kintoneアプリの情報を入力します。
公開
テンプレートをインポートすると、あっという間にkViewerのビューに反映されます。
また、kViewerではkintoneのレコード追加、編集のタイミングで、ビューがリアルタイムで更新されるのが特徴です。
上記の設定動画02:30〜02:50のように、kintoneで採用サイトを追加すると、kViewer側でも採用サイトのコンテンツが反映され、kintoneで簡単に管理できるサイトを作成できました！
【kintone hack元チャンピオンに聞いた】設定を考える際に工夫したポイント
kintone show+case unlimitedにゲストとして登場した江田さんに、kintoneでホームページを作る設定を考える際に工夫したポイントをお伺いしました！
作成から管理までをかんたんに、という部分にこだわりました。
サンプルサイトの見た目がカッコ悪いのは、美術の5段階評価が毎回2だった江田が作ったせいです。使う人が使えば、素敵なホームページも作れるはずです。
まとめ
本記事では、kintone×kViewer×HomepageCreatorでホームページを作成する方法をご紹介しました！
kViewerは、30日間の無料お試しが何度でも可能です。今回のようなホームページ作成だけでなく、kintoneで管理しているマニュアルやFAQなどをkintoneライセンスを持たない方へ気軽に公開ができます。
kViewerに興味を持った方は、ぜひお気軽にお試し環境で触ってみてくださいね。
