kintoneポータル用PDFプレビューJSの開発裏話

「kintoneのポータルやスペースでもPDFファイルを直接プレビューしたい」

kintoneを利用する中でこのようなことを一度は思ったことはないでしょうか？

アプリの場合、各社から無料・有料でPDFプレビュープラグインが提供されているため、プラグインを入れることで手軽にプレビュー表示を実現することができます。一方、ポータルやスペースの場合、プラグインという形では設定ができないため、PDFファイルのリンクをクリックした際は一度PCにダウンロードしたうえで、ファイルを開く必要があります。

参考：kintone PDFプレビュープラグインガイド｜無料・有料6選の機能比較

ポータル・スペースにおけるPDFプレビュー表示。ちょっとしたことですが、プレビューできないこのわずらわしさをシンプルに解決したいという想いから、私たちは『ポータル用PDFプレビューJS』を開発しました。

ポータル用PDFプレビューJSが提供する3つの価値

ポータル用PDFプレビューJSは、ポータルとスペースでPDFファイルのプレビュー表示を実現するというシンプルなものです。しかし、シンプルだからこそ、業務で発生するちょっとした「不快」を解決できます。

PDFプレビューによる操作性の向上

なぜプレビュー表示をしたいのかというと、一番は「すぐに中身を確認したい」からではないでしょうか。そして、必要な場合のみファイルをダウンロードしたいのではないでしょうか。

通常の操作では、PDFの中身を見るためには

1. リンクをクリックする
2. ファイルがダウンロードされる
3. ファイル開く

という手順が発生します。これが、

1. リンクをクリックする

という1操作だけで行えるようになりますので、操作性は格段にアップします。
特に、ブラウザ側で「ダウンロード前に各ファイルの保存場所を確認する」という設定を行っている場合、ファイルダイアログが毎回表示されてしまいます。ダイアログが表示されずにプレビュー表示されることでストレス軽減！恩恵は大きいのではないかと思います。

1つ1つのクリック操作は数秒程度ですが、これが積み重なるとかなりの時間になりますよね。

不要なファイルダウンロードの削減

PDFファイルのリンクをクリックした際にファイルがダウンロードされるということは、PCに不要なファイルが溜まっていくということにも繋がります。PDFのプレビュー表示が行われることで不要なファイルをPCに保存する必要が無くなり、さらに、ダウンロードに付随する「定期的に不要ファイルを削除する」という手間も減らすことができます。

kintoneにおけるPDFプレビュー表示の統一化

PDFプレビュー表示プラグインをアプリで利用している場合、ポータル用PDFプレビューJSも利用することで、kintoneではどの画面でもPDFファイルはプレビュー表示されるという形を実現することができるようになります。「アプリではプレビュー表示できるが、ポータルとスペースではプレビュー表示できない」という状態が無意識の煩わしさを生む一因にもなりますので、PDFファイルへのリンククリック時の動きを統一化することで、kintone全体としての操作の一体感が生まれます。

ポータル用PDFプレビューJS開発の裏話

開発の背景は前述の通りで、kintoneを利用する中で日々感じていた課題を解決したいという想いからでした。
ここでは、開発の裏話を少しだけ紹介します。

当初はofficeファイルのプレビュー表示プラグインを構想

元々はofficeファイル（Word、Excel、PowerPoint）のプレビュー表示プラグインを構想していましたが、色々と調査をする中で、無料での提供は難しいということで開発を断念しました。有料で提供することも考えましたが、費用をかけてでもプレビュー表示を実現したいというお客様はいないだろうということで、調査段階で中止と判断することとなりました。

代わりのプレビュー表示ということで、ポータル用PDFプレビューを開発することとなりました。

複数ポータル対応に苦慮

ちょうどポータル用プレビュー表示プラグインを提供しようとしたタイミングで、kintoneのアップデートによりポータル画面の複数表示対応がありました。2枚目以降のポータル表示について調査したところ、1枚目のポータルとは違う動きになっていたため、対応に少し時間を要しました。
※2枚目以降のポータルについてもPDFプレビュー表示に対応済みです。

ダウンロード用ボタンを画面右下に追加

PDFプレビュー表示をした際に、標準ではプレビューの上側にダウンロードボタンが表示されますので、そこからファイルのダウンローが可能です。ただ、ここからダウンロードを行うと、ファイル名に見慣れない文字が設定されてしまうことになります。
※これはプレビュー表示を実現して発覚

これではちょっと使いにくい・・・。

そこで、元のファイル名でもダウンロードできるように、プレビュー画面の右下にダウンロードボタンを表示するようにしています。

ポータル用PDFプレビューJS利用時の注意点

規模が大きい会社やガバナンスを効かせているような会社では、セキュリティ等を考慮し、「kintone全体のカスタマイズは利用禁止」というkintone運用方針を取り決めているところもあるかと思います。
ポータル用PDFプレビューJSは「kintone全体のカスタマイズ」に設定する形となるため、そのような場合は利用はお控えください。
※特に、社内のkintone管理者が複数名いる場合で、担当者自身としては利用したいが運用ルールとしての判断がつかないような場合は、まずは社内の運用管理責任者へご確認いただくのが良いかと思います。

kintone標準でPDFプレビュー表示ができない要因（予想）

そもそも、ポータルやスペースでPDFファイルのプレビュー表示ができないのは、大きくは次の要因があると考えられます。

リンクがファイルへの直リンクではない

PC用のkintoneの表示の場合、画像以外のファイルリンクをクリックした際にプレビュー表示するような機能はついていません。これは、リンクがファイルへの直リンクにはなっていないためと想定されます。
※ただし、モバイル用の表示の場合はPDFのプレビュー表示が行われます。そのため、PC用の表示でも同様にプレビュー表示されるのと本来はいいですね・・・

ポータルやスペースに対してのプラグイン設定はない

アプリの場合はプラグインを利用することで機能追加することができますが、ポータルやスペースに対してはプラグインを設定する機能自体がありません。代わりに「kintone全体のカスタマイズ」からJavaScriptファイルを設定することでポータルやスペースに対しての処理を追加することができますが、システム開発経験がない場合は少々ハードルが高く、簡単にはできません。

最近はChatGPTなどの生成AIを用いることでJavaScriptで処理を作ることも可能にはなっています。しかし、AIによって作成したものがどのような処理になっているのかを理解しない状態で、単に動くものができたというだけで「kintone全体のカスタマイズ」にJavaScriptファイルを設定しまうと、思わぬエラーが発生する可能性がある（しかもkintone全体に影響する）ため注意が必要です。

まとめ

kintoneのポータルやスペースでPDFを確認する際の「ダウンロード」というひと手間。

ポータル用PDFプレビューJSは、多くのkintoneユーザーが感じてきたであろう、この日常に潜む小さなストレスを解消するために開発しました。

このシンプルなJavaScriptを導入することで、あなたのkintone環境は次のように変わります。

• クリック一つで中身を即座に確認できる快適さ
• 不要なダウンロードと、それに伴うファイル削除の手間の削減
• PDFにおけるアプリとポータルの操作感を統一し、kintone全体の使いやすさを向上

日々の業務における小さな「不快」は、意識しないうちに私たちの集中力や生産性を少しずつ奪っていきます。

このシンプルな解決策で、あなたのkintone環境をよりスムーズで快適なものにしてみませんか？