😽

サーバー不要。共有フォルダを「社内ポータル」に変えるための設計思想と技術的トレードオフ

に公開
JavaScript
個人開発
生産性
業務効率化
設計思想
tech

1. 現場に潜む「デジタル化の隙間」

多くの企業でSaaSの導入が進んでいますが、現場の最前線では依然として　「ローカルの共有フォルダ（NAS）」　が情報の中心です。そこにWebベースのポータルを導入しようとすると、意外な壁にぶつかります。

  • インフラの壁： 「サーバーを立てるには情シスの許可と予算が必要」
  • 運用の壁： 「管理画面が難しくて、結局特定のエンジニアしか更新できない」
  • セキュリティの壁： 「社外秘のリンクをクラウドに置くのは抵抗がある」

これらの隙間を埋めるために、 「サーバーサイド完全不要」「共有フォルダに置くだけ」 で完結する社内ポータルキットを開発しました。

2. アーキテクチャ：なぜ「枯れた構成」を選んだのか

モダンなSPA（Single Page Application）ではなく、あえてVanilla JSと静的ファイルというシンプルな構成を採用しました。

「Zero-Server」の実現

バックエンドを一切持たず、クライアントサイドのJavaScriptだけで全ての機能を完結させています。これにより、以下の「No-Ops」な環境が整います。

  • 環境構築コストゼロ： ZIPを解凍して共有フォルダへドラッグ＆ドロップするだけでデプロイ完了
  • メンテナンスコストゼロ： サーバーの死活監視やOSアップデート、DBのバックアップから解放

データ永続化の仕組み：擬似CMS化

DBがない環境で「ユーザーによる更新」を可能にするため、以下のデータフローを設計しました。

  1. 読み込み： portal.html が外部の data.js を script タグとして読み込み、グローバル変数（オブジェクト）を展開
  2. 編集： edit.html 上のGUIでデータを変更
  3. 書き出し： Blob API を利用し、最新のデータを保持した data.js をブラウザから直接ダウンロード
  4. 保存： ユーザーが共有フォルダ上の旧ファイルを上書き
JavaScript
// data.js を書き出すコアロジック
const exportData = `const PORTAL_DATA = ${JSON.stringify(currentData, null, 2)};`;
const blob = new Blob([exportData], { type: 'text/javascript' });
const url = URL.createObjectURL(blob);

const a = document.createElement('a');
a.href = url;
a.download = 'data.js';
a.click();
URL.revokeObjectURL(url);

LocalStorageではなくファイル形式を採用したのは、　「共有フォルダにアクセスできる全員が、常に同じ最新データを見られる状態」　を、サーバーなしで実現するための唯一解だったからです。

3. UI/UXの設計：現場の「使い勝手」を最優先に

エンジニアではない現場の担当者が、日常的にメンテナンスを続けられるように工夫しました。

  • 直感的な編集画面
    JSONを直接編集させるのではなく、フォームベースのUIを構築。入力した内容が即座にプレビューされるようにしています。
  • スマホ対応（レスポンシブ）
    現場でのタブレット利用を想定し、CSS GridとFlexboxを用いて、どの端末からでも情報にリーチできるレイアウトを徹底しました。
  • 視覚的な整理
    「うしろぽっけ」というブランドが大切にしている、清潔感と安心感のあるデザイン。余白を適切に取り、毎日の業務の邪魔にならない静かなトーンに整えています。

4. あえて「切り捨てた」機能とその理由

プロダクトをシンプルに保ち、現場での「迷い」をなくすために、あえて実装しなかった機能があります。

  • 同時編集排他制御
    ファイル上書きという仕組み上、2人同時の更新はできません。しかし、多くの現場では「ポータルを更新する担当者は決まっている」ため、システムを複雑化させてまで実装する必要はないと判断しました。
  • ログイン・権限管理
    ID/パスワードの管理は、現場にとって「ログインできない」という別のストレスを生みます。「共有フォルダにアクセスできる＝権限がある」という既存の権限管理に乗っかることで、運用をシンプルにしました。

5. セキュリティとプライバシー

企業が最も気にする「データ流出」のリスクを、構造的に排除しています。

  • 完全ローカル動作
    外部APIとの通信を一切行いません。社内リンクやマニュアルの所在が外部に漏れることはありません。
  • ノー・トラッキング
    利用状況の解析（GAなど）もあえて入れていません。現場のプライバシーを完全に守ります。

6. おわりに

「最新の技術スタック」を使うことよりも、「現場にある道具だけで、いかに課題を解決するか」を突き詰めた結果、この形にたどり着きました。

『うしろぽっけポータルキット』は、主役ではありません。 でも、誰かがファイルを探して迷っているとき、サッと取り出して道を示せる「後ろポケットのハンカチ」のような存在になれたら、開発者としてこれほど嬉しいことはありません。

詳細な使い方は以下の配布ページにまとめています。

▼ うしろぽっけポータルキット｜公式サイト https://ushiro-pocke.com/lpportal-kit

Discussion

ログインするとコメントできます