- はじめに：若手の努力の結晶（HTML）を守りたい
はじめまして。関東地方の老舗金属加工メーカーで、1人部署の生産管理を担当しています。この春に派遣から正社員になり、QC検定3級も取得して意気込んでいるところですが、社内にはIT専任の担当者がいません。
本来、システムの運用などは総務部の管轄なのですが、ITの知識不足ゆえに、少し知識がある私へたまに「お鉢が回ってくる」という立ち位置で働いています。
事の発端は、営業部長の主導で「高卒向けの求人ページ作成」を皮切りに、自社ホームページをリニューアルするプロジェクトが立ち上がったことでした。
優秀な若手社員が、一生懸命に現代的で綺麗なホームページ（HTML/CSS）を作り上げてくれたのですが、総務部だけでは技術的なフォローやインフラ周りの対応が難しかったため、いつものごとく私にお鉢が回り、若手のフォロー役として参画することになりました。
そこで「運用どうするの問題」が勃発します。
ニュース更新を担当する社員は、WordをPDFにすることはできても、HTMLを直接編集することはできません。タグを一つ消せば、若手が作ってくれた美しいレイアウトが崩壊してしまいます。
そこで、「担当者はPDFを上げてスプレッドシートに記入するだけ」という、生産管理の視点で極限までポカヨケ（エラー防止）を徹底した自動更新システムを構築しました。
- システムの全体像（超ローテク・ハイリターン）
構成は非常にシンプルです。
運用担当者の作業
作成したニュースのPDFを、サーバーの所定フォルダにアップロード。
Googleスプレッドシートを開き、新しい行に「日付」「カテゴリ（プルダウン選択）」「URL」を入力する。
※URLは「上の行をコピペして、末尾のPDFファイル名だけ書き換える」運用ルールにし、入力ミスを防止。
バックエンド（GAS）
スプレッドシートのデータをGoogle Apps Script（GAS）でJSON形式の簡易APIとして出力。
フロントエンド（JavaScript）
若手が作ったHTML側でJavaScript（Fetch API）を動かし、GASからデータを非同期で取得して一覧を自動生成。
▼GAS側のサンプルコード（概要）
JavaScript
function doGet() {
const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
const data = sheet.getDataRange().getValues();
let newsList = [];
// 1行目（ヘッダー）を飛ばして2行目からループ
for (let i = 1; i < data.length; i++) {
newsList.push({
date: data[i][0], // 日付
category: data[i][1], // カテゴリ
url: data[i][2] // PDFのURL
});
}
return ContentService.createTextOutput(JSON.stringify(newsList))
.setMimeType(ContentService.MimeType.JSON);
}
▼HTML側の読み込み処理（概要）
JavaScript
const gasUrl = "デプロイしたGASのURL";
fetch(gasUrl)
.then(response => response.json())
.then(data => {
const listElement = document.getElementById('news-list');
data.forEach(item => {
listElement.innerHTML += `<li><span class="date">${item.date}</span><span class="category">${item.category}</span><a href="${item.url}" target="_blank">PDFを開く</a></li>`;
});
});
- 最大の壁：XREAサーバーの罠と、深夜のチャットサポート
システム自体はすんなり出来たのですが、最大の障壁は今回利用したサーバー（XREA）の「常時SSL化（https）」設定でした。
コントロールパネルの「無料SSL」のラジオボタンを押しても一向に反映されません。
設定画面を彷徨った結果、XREA特有の「メインドメインとサブドメインの仕様」にぶち当たりました。「先にサブドメインに『同期化設定』を入れてからでないと、SSLのラジオボタンが機能しない」という初見殺しのトラップだったのです。
自力で解決する前に公式のチャットサポートにも問い合わせていたのですが、実際のレスポンスはメール並みのスピード。ようやく返ってきたと思ったら、見事なまでの定型文でした。文章の語尾が「〜設定が必要で」など、明らかに途中でぶった切れているコピペ返信を見たとき、「あ、これは現場の人間（自分）が汗をかいてなんとかするしかないやつだ」と腹を括ったのも、今となっては良い思い出です。
- 応用編：生産管理の基本「水平展開（ヨコテン）」
生産管理や品質管理の世界には「水平展開（通称：ヨコテン）」という言葉があります。今回構築した「スプレッドシート × GAS」のアーキテクチャは非常に汎用性が高く、現在、社内の他の課題解決にもこの仕組みをヨコテンしています。
① 新人向け安全教育アプリ（〇×ゲーム）
うちの部署の部長が社内の「安全担当トップ」でもあるため、今期の改善活動のテーマとしてプロトタイプを開発し、係長まで報告を通しました。
社員番号・氏名・部署をプルダウンで選び、10問の〇×クイズに回答。回答後にJavaScriptで5項目のレーダーチャートを表示し、自身の弱点を可視化します。同時に、回答日時と結果がGAS経由でスプレッドシートに蓄積されます。
② 現場の出来高（日報）吸い上げシステム
自分自身の業務を簡略化するため、現場の作業実績を直接吸い上げる仕組みも構築中です。ライン作業には対応できそうですが、製造業特有の「小ロット（多品種少量）」になると途端に入力UIが使いづらくなるため、現場がストレスなく入力できる画面を絶賛改善中です。
- おわりに：技術は「共に働く仲間」のために
ついでに若手が作ってくれた問い合わせフォームのHTMLもPHPに改造し、総務の運用担当者のメールアドレスに直接届くように設定して、新ホームページは無事に稼働を開始しました。
営業部長の号令で始まり、若手社員の頑張りで作られた今回のリニューアル。私はお鉢が回ってきてその裏側を少し手伝ったに過ぎません。まだシステムを完全に総務部へ引き継げたわけではなく、運用に乗せている過渡期であり、今後も1人部署からのサポートは続いていくでしょう。
高度なアーキテクチャを導入するのではなく、「現場のITリテラシーに合わせて、一番壊れにくい仕組みをそっと提供する」こと。まだまだ手探りですが、これこそが非IT企業における身の丈に合ったDXへの第一歩ではないかと、生産管理マンは思うのです。