【kintone hack元チャンピオンが披露】kintoneでホームページを作ろう!

皆さんこんにちは!Cybozu Days2022はいかがだったでしょうか。1日目の最後には、kintone show+case unlimitedが開催されましたね!弊社トヨクモからは、昨年チャンピオンの江田さんがゲストとして登場しました!

そこで本記事では、kintone show+case unlimitedの冒頭で江田さんが披露したkintoneでホームページを作る方法をご紹介をしたいと思います!kintoneとkViewerを活用した事例になります!

kViewerは、kintoneライセンスを持たない外部ユーザーに、kintone内の情報を公開できるサービスです。

kViewerって具体的に何ができるの?」という方は、以下記事で詳しく解説しているので、ぜひ合わせてご覧ください。

あわせて読みたい

皆さんこんにちは!あまりの寒さにベットから出られません、小林です。 今回は「What is 〇〇」シリーズ第4弾ということで、kintoneの情報をkintoneアカウントがない第三者にも公開可能にするkintone連携サービス「kV[…]

それでは早速みていきましょう。

kintoneでホームページを作ろう!

kintoneのレコードを利用したホームページ作成ができるツール「HomepageCreator」を使って、kintoneでホームページを簡単作成する方法をご紹介します。

今回は例として「kintoneの事例管理アプリを更新すれば、自動でWebサイトにも反映される」といった仕組みの設定を行います。

しかし、Webサイトを構築するには、HTMLやCSS、APIサーバーの構築やJavaScriptなどが必要となります。

そこで、kintone×kViewer×HomepageCreatorを組み合わせて、ノーコードで誰でもホームページをかんたん作成・管理できるようにします。

通常kintoneは、組織内の人だけが情報を閲覧することが可能ですが、kintone連携サービスのkViewerを利用することで、誰でもホームページを閲覧できるようになります。

ホームページの作成手順は以下の通りです。

  1. HomepageCreatorをインストール
  2. kintoneで新しいアプリを作成しHomepageCreatorを追加
  3. kintoneでホームページのデザインを設定
  4. テンプレートを書き出してkViewerにインポート
  5. 公開

順に解説していきます。

※本記事の設定は、サポート対象外とさせていただいております。あらかじめご了承ください。

HomepageCreatorをインストール

まず、HomepageCreatorをダウンロードします。(テンプレートはこちら

テンプレート左上の「無料ダウンロード」をクリックします。

次に、GitHubの画面に遷移するので、下にスクロールして下記キャプチャの「プラグイン」をクリックし「plugin.zip」をダウンロードします。

kintoneで新しいアプリを作成しHomepageCreatorを追加

次に、kintoneで空のアプリを作成します。kintoneユーザーであればもうお馴染みですね。

アプリを追加できたら、kintoneアプリ>設定>プラグインより、HomepageCreatorをkintoneに追加します。

kintoneシステム管理をクリック
読み込むをクリックし「plugin.zip」を読み込みます
「プラグインの追加」をクリックし、HomepageCreatorを選択

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連携サービス同様「カンタン・シンプル」をモットーに作られたそうです!(美術は苦手だったみたいですねw)
kintone上でホームページをノーコードで作成できるので、非開発者の方でも気軽にサイトを管理できますね!

まとめ

本記事では、kintone×kViewer×HomepageCreatorでホームページを作成する方法をご紹介しました!

kViewerは、30日間の無料お試しが何度でも可能です。今回のようなホームページ作成だけでなく、kintoneで管理しているマニュアルやFAQなどをkintoneライセンスを持たない方へ気軽に公開ができます。

kViewerに興味を持った方は、ぜひお気軽にお試し環境で触ってみてくださいね。

kintoneの環境をお持ちでない方はこちらから無料お試しをお申込ください。

 

⭐️トヨクモ kintone連携サービスのおすすめポイント⭐️
・30日間の無料お試しは何度でも可能
・kintone標準機能ではできない業務改善を実現
・カンタン・低コストで運用可能
・kintone1ドメインにつき1契約でOK
・9,000契約以上の実績・信頼