Blog Geo Program

情報を集約!! ちょっと便利なkintoneポータルを作ってみた

2019年7月にリリースされた「kintoneポータルカスタマイズ」をアレンジしてみました。

 

Maptomoでは、「地図とともに、新しい発見を」をコンセプトにして活動しているので、このようにGoogle Mapをiframe埋め込んでみました。しかし、これだとブラウザのセキュリティポリシーに警告、エラーとなるので画面キャプチャーだけ紹介します。

 

 

ポイント

  • 3つのポータルを切り替えられるタブを用意
  • 標準のポータルとカスタマイズしたリンクポータルをタブで切り替え
  • Standardタブ(初期表示)
    - 標準のウィジェットをクラス名で取得し表示(kintoneの仕様が変わると影響あり)
  • Linkタブ
    - アプリに登録されたリンクや表示を一覧でポータルに表示
    - 画像はURL指定
    - リンク先は、同一ホストの場合にはそのまま移動して表示、別サイトなら別タブで表示
  • Yourselfタブは、ご自身のカスタマイズ用
  • Mapタブは、上記の理由により保留

 

よくありそうなポータルの使い方ですが、HTMLやJavaScriptの知識がない方でもアプリにレコードを追加、編集、削除するだけでポータルリンク集のメンテナンスができるのがメリットになるのかと思います。

 

設定を始める前に

  • kintone APIを利用したカスタマイズになるので、kintone スタンダードコースが必要です。
  • Mac+Chrome, Mac+Firefox, iPhone X+Safari の組み合わせで動きました。
  • ブラウザから読み取ったクラス名を利用しており、kintoneのアップデート、仕様変更で動作できなくなることが可能性があるため、ご自身の判断の上ご活用ください。

 

設定方法1 (タブ)

step
1
ファイルをダウンロードする

MT-KINPORTAL から、次のファイルをダウンロードしてPCに保存します。

 

step
2
ファイルをkintoneにアップロードする

ダウンロードしたファイルを、kintoneシステム管理 > JavaScript / CSSでカスタマイズ画面で各々アップロードします。
※ この操作は、kintoneシステム管理権限が必要になります。

 

step
3
kintoneホームに移動する

タブ表示と、標準機能のポータル画面が表示されます。

 

設定方法2(リンク集)

step
1
アプリテンプレートファイルをダウンロードする

MT-KINPORTAL から、次のファイルをダウンロードしてPCに保存します。

 

step
2
アプリテンプレートファイルをkintoneのテンプレートに読み込む

kintoneシステム管理 > アプリテンプレート画面から、アプリテンプレートファイルを読み込みます。

※ この操作は、kintoneシステム管理権限が必要です。

 

step
3
アプリを作成する

kintone アプリストア > 登録済みのテンプレートからアプリを作成画面から、アプリを作成します。

後ほど、アプリIDを使いますので、作成したアプリに移動してID(数字)を控えてください。番号はURLからわかります。例)htttps://{サブドメイン}.cybozu.com/k/{アプリID}

初期はデータがないので、レコードを数件登録してみてください。

  • サイトリンクには、アプリ番号(半角数字)を入れると同じドメインのアプリに移動します。
  • 同じリンク先が並ばないように、リンクフィールドを重複禁止にしています。

 

設定方法3(コード編集)

もう少しです!JavaScriptと呼ばれるプログラムを一部変更します。

step
1
Chrome拡張をダウンロードする

次の kintone Portal Designer をChromeブラウザにインストールしてください。

 

step
2
ポータルファイルをカスタマイズする

kintoneのトップページにあるカスタマイズアイコンをクリックします。※赤枠のアイコン

 

step
3
ポータルファイルをカスタマイズする

kintone Portal Designer の Import をクリックして、次のファイルをダウンロードして読み込みます

 

step
3
アプリIDを変更する

変数名 query にある、アプリIDを先ほど控えておいたものに書き換えて、保存(Saveボタン)します。

[javascript highlight="2" firstline="146"]

var query = {
'app': 20, //appID
'query': 'order by Update_day desc',
'size': 100 //max 500
};

[/javascript]

step
3
JavaScriptファイルをエクスポートする

kintone Portal Designer の Export から、Desktop, Mobile 用のJavaScriptをエクスポートします。

 

step
4
システム管理に保存する

設定方法1 の Step2 と同様にシステム管理のJavaScript / CSSでカスタマイズ画面で各々アップロードすると、リンク集が表示されると思います。表示する件数や、条件はこちらの developer network を参考に変更してみてください。

 

 

設定へのステップがたくさんありましたが、慣れてくると便利な ポータルカスタマイズ、kintone Portal Designer なのかなと思いました。ぜひこの機会に、あなたオリジナルのポータルデザインを作成してみてはいかがでしょうか。わたしは、地図を組み込められなかったのに悔やまれます。Map API を使ってということになりそうです。

 

参考情報

-Blog, Geo, Program

Copyright© Maptomo , 2020 All Rights Reserved.