タグ: Web System

１．開発ステップ

大規模な業務用アプリではなく、個人用の業務アプリについてです

１．社協ホームページでNotFound

　リンク先へのURL（赤丸部分）をクリックすると「NotFoundエラー」発生
　　　https://www.kawachinaganoshishakyo.or.jp/shimin/inf003
　　　　　※現在は修正されています

２．原因調査

　表示されている文字を見ても間違いは見当たらない

　htmlの内容を確認する
　　　リンク先のアドレスに１文字「*」（アスタリスク）が有る
　　　１文字が文字化けを起こしている

３．類推

　サイトの担当者がリンクURLを入力・編集する際に
　　　Word や Excel など別のソフトからURLをコピー＆ペーストした

４．サイトの担当者に連絡

　入力方法の見直しをお願いする
　　　・URLやリンクは、コピー元（Word・メール本文など）は
　　　　　そのまま貼り付けず、可能な限り半角英数字のみで手入力するか
　　　　　貼り付け後に「書式なしテキストとして貼り付けを行う
　　　・「①」「㎡」「?」などの機種依存文字が出た場合は選択しない
　　　・保存後は必ず実際にリンクをクリックして遷移確認を行う

５．文字コード種類（参考）

　使用するパソコン機種によって違いが有る
　　　Shift_JIS (シフトジス)
　　　　　日本語用Windowsパソコンで使われる文字コード
　　　　　日本国内で広く使われてきた文字コード
　　　　　　　Word や Excelでは必ずShift_JISコードになる
　　　　　半角英数字を1バイト、全角文字を2バイトで混在させて表現する
　　　　　　　システム間でやり取りすると文字化けが発生しやすい

　　　UTF-8 (Unicode Transformation Format – 8-bit)
　　　　　世界標準（Windows機種以外）の文字コード
　　　　　Webサイトやプログラミング言語で使われている文字コード
　　　　　　　1〜4バイトの可変長で文字を表現する
　　　　　　　　　アルファベットや数字は1バイトで、
　　　　　　　　　日本語などの漢字は3バイトで表現する

　今回のようなエラーが起きないようにするには
　　　サーバーにアップロードする際には「ＦＴＰ」ソフトを使用する
　　　　　ＦＴＰソフトで自動的に文字変換を行えば良い

　　　ＦＴＰソフトを使わない場合には、事前に編集ソフトで文字反感を行う

ホームページ運用に必要な作業内容を9つに分けて詳しく説明する
　　ネット販売者を前提にした記述なので、自分で適宜読み替えて欲しい

１．情報の更新

　Webサイトを常に新鮮で有益な状態に維持する
　　　古い内容を修正する
　　　新しい情報を追加する

　更新作業には、以下のような内容が含まれる
　　　商品・サービス情報の更新
　　　　　商品の価格変更、在庫状況の更新、新サービスの追加等

　　　事例紹介・お客様の声の追加
　　　　　サービス利用者の成功事例や感想を掲載する

　　　FAQの更新
　　　　　ユーザーからの問い合わせを反映し、最新の質問と回答を掲載する

　　　画像や動画の差し替え・追加
　　　　　写真やロゴ、顔写真など、見た目を新しくし、情報を補足する

　CMS（Contents Management System）の使用
　　　CMSを使えば、専門知識がなくても簡単にホームページの更新が可能
　　　CMSを使わないと、HTMLを更新後にアップロードする必要がある

２．新規コンテンツの作成

　新しくページや記事を追加する（ゼロから情報を作り出す作業）が重要
　　　ブログ記事やコラム
　　　最新ニュース
　　　イベント告知ページ　等

　継続的に新規コンテンツを追加することで、
　　　Googleなど検索エンジンからの評価が高まり、
　　　より多くの人にサイトを見つけてもらえるようになる

　新規コンテンツ作成の基本的な流れ
　　　ターゲットを設定する
　　　キーワード選定を行う
　　　コンテンツの構成を作成する
　　　コンテンツを執筆する
　　　読みやすいようにデザインや画像を整える
　　　ホームページ上に公開する
　　　公開後、アクセス数や反応などを分析し、改善する

　サイトの成長と成果を最大化するには、
　　　質の高いコンテンツを継続的に提供し続ける姿勢が欠かせない

　最新のＡＩツールを使えば、SEO対策が施された文章を効率よく作成できる
　　　記事を書く時間がない、何から書けばいいか分からない　にぴったり

３．広告の管理

　多くの人に見てもらうために、「広告の出稿」は非常に効果的
　　　リスティング広告やSNS広告は、短期間で集客を狙う

　　　SEO対策のように成果が出るまでに時間がかかる施策とは異なり、
　　　広告は出稿すればすぐにアクセスや反応が期待できる即効性が強い

　費用が発生するため、管理面の強化が必要
　　　広告プランの立案
　　　　　どんな商品・サービスを誰に向けて宣伝するかを明確にする

　　　広告クリエイティブの作成
　　　　　バナー画像やキャッチコピーなど、目を引く広告素材を作成する

　　　広告の出稿と運用
　　　　　Google広告やSNS広告を使って配信する

　　　効果測定と改善
　　　　　広告のクリック率や成約率を確認し、必要に応じて見直す

　広告管理は市場や競合の動向、利用者の反応を踏まえながら
　　　継続的に分析と改善を重ねる必要がある

　　　解析ツール（GoogleアナリティクスやGoogleサーチコンソール）の使用
　　　　　検索キーワードの確認やクリック数・表示回数のチェックが可能

４．ドメイン・サーバーの管理

　サイトを常にインターネット上で利用可能な状態に保つ
　　　ホームページ運用の基礎ともいえる存在

　ドメイン管理
　　　通常、1年ごとに契約更新が必要
　　　更新を忘れると有効期限が切れ、ホームページが表示されなくなる
　　　失効すると、第三者に取得されてしまう可能性がある

　サーバー管理
　　　契約更新が必要
　　　支払いを忘れるとホームページがアクセス不能になる

　　　バックアップの実施や、ディスク容量の拡張といった対応も含まれる

５．セキュリティ対策

　ホームページの安全性を高め、
　　　利用者が安心してサイトを閲覧・利用できるようにする
　　　怠ると、個人情報の流出やサイト改ざんといったトラブルにつながる

　代表的なセキュリティ対策
　　　SSL/TLS証明書の導入
　　　　　通信を暗号化し、個人情報の盗み見を防止する
　　　　　　　URLが「https」で始まるサイトが対象

　　　CMSのアップデート
　　　　　セキュリティホールを防ぐため、常に最新版を使用する
　　　　　アップデートの放置が原因の被害が増えている

　　　パスワードの強化
　　　　　推測されにくいパスワードを使い、管理画面の乗っ取りを防ぐ

　　　二段階認証の導入
　　　　　パスワードに加えて、スマホなどを使って本人確認を強化する

　　　WAF（Web Application Firewall）の導入
　　　　　攻撃からWebサイトを守るセキュリティフィルターの導入

　　　バックアップの実施
　　　　　万が一のときにデータをすぐ復元できるように備えておく

６．お問い合わせ対応

　ユーザーが、「聞いてみたい」「相談したい」時に使うのが
　　　お問い合わせフォームやメールアドレス

　単に質問に答えるだけではなく
　　　「早く・丁寧に・的確に」応答することで好印象を与えられる

　基本的な対応
　　　定期的にフォームやメールをチェックする
　　　　　返信が遅れないよう、1日1回以上は確認する

　　　内容に合わせて丁寧な返信を行う
　　　　　質問の意図を正しく汲み取り、わかりやすく答える

　　　対応履歴を記録・共有する
　　　　　担当者が不在でもスムーズに引き継げるよう、社内で情報を共有する

　　　要望や意見は改善に活かす
　　　　　サービス向上のヒントがたくさん含まれている

７．社内からの依頼内容の管理

　情報を載せてほしい、ページを修正してほしいといった依頼に対応する
　　　対応が曖昧だと、依頼の抜け漏れ、対応ミス等が起きてしまう

　依頼を正確に処理するには
　　　依頼を受け付け、集約する
　　　　　専用の窓口を設け、担当者が一元管理できるようにする

　　　依頼内容を精査し、優先度を決定する
　　　　　目的や緊急度、リソースとの兼ね合いを考慮し、優先順位をつける

　　　作業を実行する
　　　　　優先順位に基づいて、担当者に作業を割り振る

　　　ページの確認後、公開を行う
　　　　　情報を公開する前に、依頼者と内容に間違いがないかを最終確認する

　　　完了報告を行う
　　　　　依頼した内容がホームページに反映したことを依頼者に報告する

８．トラブル発生時の対応

　トラブルへの対応も重要な業務
　　　予期せぬトラブルは、イメージの低下やユーザー離脱、に直結する

　よくあるトラブルと原因は以下の通り
　　　ホームページが閲覧できない
　　　　　サーバーの障害 、ドメインの有効期限切れ、DNS設定ミス

　　　サイトのデザインが崩れる
　　　　　HTML・CSSの編集ミス、CMSのテーマやプラグインの更新不具合

　　　サイトの見た目が変わる、身に覚えのないファイルが追加される
　　　　　不正アクセスや改ざんの可能性あり

　　　お問い合わせフォームからのメールが届かない
　　　　　メール設定の不具合、サーバー設定の変更

　万が一トラブルが起きた際の対応
　　　バックアップから復元をする
　　　原因となったファイルを削除または修正する
　　　エラーメッセージの確認をする

９．アクセス解析

　サイト利用者の行動や属性を収集・分析し、サイト改善に役立てる取り組み
　　　ユーザーニーズを的確に把握し、ホームページをより効果的に成長させる

　Googleの解析ツールを用いれば、次のようなデータを取得できる
　　　ユーザーに関するデータ
　　　　　訪問者数
　　　　　新規訪問者数とリピーター数
　　　　　利用している地域やデバイス

　　　サイト内での行動に関するデータ
　　　　　ページビュー数
　　　　　平均セッション時間
　　　　　直帰率（1ページだけ見て離れた割合）
　　　　　離脱ページ

　　　サイト流入に関するデータ
　　　　　ユーザーがどこからページに訪れたか（検索エンジン、SNS等）
　　　　　どのような検索キーワードで訪れたか

　アクセス解析は得られたデータを精査し、改善につなげる
　　　直帰率が高いページ → 内容や導線を見直す
　　　よく読まれている人気ページ → 情報を増やして強化
　　　新しい流入経路（SNSや外部サイト） → 効果を測って拡大
　　　コンバージョン（問い合わせ・購入）率 → ボタンや導線を改善

１．「問い合せメール」がエラーになる

　問い合わせメールの送信部分

	<div class="col span-6">
		<div class="contact-box">
    <a href="mailto:●●●●●●@gmail.com?subject=問い合わせ">
    <img src="img/mail.png" alt="Eメール"></img></a>
    		<p>メール作成</p>
		</div>
    </div>

　エラー文言
　　　「このフォームは安全でないため、自動入力をオフにしました」を表示

　エラーの理由
　　　ブラウザは「外部アプリへのデータ引渡し」と見なしている
　　　　　ブラウザが判断し、非推奨としてエラーにしている

２．非推奨になる他の理由

　mailtoが非推奨になる一般的な理由
　　　ユーザ側でメールソフトが設定されていない場合がある
　　　　　メールソフトが起動しなくて、問合せメールが届かない

　　　文字化けを起こす可能性がある
　　　　　様々な環境への配慮が必要となる

　　　迷惑メールの標的になる
　　　　　メールアドレスが悪用される

　　　ユーザビリティに課題がある
　　　　　慣れないと使いにくい

３．webフォームへの書き換え

　Webフォームの設置について
　　　ユーザーの声や情報を取得する窓口として有効な方法
　　　　　Webホームにして「問合せ」内容をサーバーに送る
　　　　　サーバー側でフォーム内容を受けてから
　　　　　mailtoを使ってメール送信を行う
　　　　　　　※ブラウザは感知無くなり、エラーにはならない
　　　
　メリットについて
　　　メールアドレス情報の取得が可能
　　　　　「受付を完了しました」のような定型メールお自動返信が可能

　　　問い合わせ内容の定型化
　　　　　フリーな状態で記述された文章ではなく、ある程度定型化できる

　　　メールソフトの起動より手軽
　　　　　ソフトが起動され入力に取り掛かるより、気軽に作業に入れる

４．対応策

　問い合わせ内容をホストへ送信する部分

<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>お問い合わせフォーム</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background-color: #f4f4f9;
        }
        .container {
            max-width: 600px;
            margin: auto;
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input[type="text"],
        input[type="email"],
        textarea {
            width: 100%;
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box; /* paddingをwidthに含める */
        }
        textarea {
            resize: vertical;
            height: 150px;
        }
        button {
            background-color: #5cb85c;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #4cae4c;
        }
    </style>
</head>
<body>

<div class="container">
    <h2>お問い合わせフォーム</h2>

<form action="receive.php" method="POST">

    <label for="name">お名前 (任意)</label>
    <input type="text" id="name" name="名前" autocomplete="name">
    
    <label for="email">メールアドレス (必須)</label>
    <input type="email" id="email" name="メールアドレス" required autocomplete="email">

    <label for="subject">件名</label>
    <input type="text" id="subject" name="件名">

    <label for="message">お問い合わせ内容 (必須)</label>
    <textarea id="message" name="お問い合わせ内容" required></textarea>

    <button type="submit">送信</button>

</form>
</div>

</body>
</html>

　問合せ内容を受信し、同じ内容をメール返信する

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="Content-Style-Type" content="text/css">
<meta name="GENERATOR" content="JustSystems Homepage Builder Version 17.0.15.0 for Windows">
<title></title>
<body>

<a name="top"></a>

<?php

// エラー報告を有効にする（開発時のみ）
// ini_set('display_errors', 1);
// error_reporting(E_ALL);

// --- 1. 定義（メールの送信先など） ---
// 　 ここをあなたのメールアドレスに変更してください
$to_email = "●●●●●●@gmail.com"; 
$subject_prefix = "【お問い合わせフォーム】"; // 件名に付ける接頭辞
$from_email = "sarnath01@gmail.com"; // 送信元アドレス（サーバーのものを使うのが一般的）

// フォームが POST メソッドで送信されたか確認
if ($_SERVER["REQUEST_METHOD"] == "POST") {

    // --- 2. フォームデータの取得とサニタイズ ---
    // $_POST変数からデータを取得し、安全のために特殊文字をエスケープします
    $name = isset($_POST['名前']) ? htmlspecialchars($_POST['名前'], ENT_QUOTES, 'UTF-8') : '';
    $email = isset($_POST['メールアドレス']) ? htmlspecialchars($_POST['メールアドレス'], ENT_QUOTES, 'UTF-8') : '';
    $subject = isset($_POST['件名']) ? htmlspecialchars($_POST['件名'], ENT_QUOTES, 'UTF-8') : '';
    $message_content = isset($_POST['お問い合わせ内容']) ? htmlspecialchars($_POST['お問い合わせ内容'], ENT_QUOTES, 'UTF-8') : '';

    // --- 3. メールの件名と本文を作成 ---
    $mail_subject = $subject_prefix . $subject;

    $mail_body = "【お問い合わせがありました】\n\n";
    $mail_body .= "--------------------------------------\n";
    $mail_body .= "お名前: " . $name . "\n";
    $mail_body .= "メールアドレス: " . $email . "\n";
    $mail_body .= "件名: " . $subject . "\n";
    $mail_body .= "--------------------------------------\n";
    $mail_body .= "お問い合わせ内容:\n" . $message_content . "\n";
    $mail_body .= "--------------------------------------\n";
    
    // --- 4. メールのヘッダー設定 ---
    $headers = "From: " . $from_email . "\r\n";
    // 差出人の名前としてユーザーのメールアドレスを設定 (オプション)
    $headers .= "Reply-To: " . $email . "\r\n";
    // 日本語のメールが文字化けしないように設定
    $headers .= "Content-Type: text/plain; charset=UTF-8\r\n";

    // --- 5. メール送信実行 ---
    // mail() 関数は、成功すれば TRUE、失敗すれば FALSE を返します
    if (mail($to_email, $mail_subject, $mail_body, $headers)) {
        // 送信成功時の処理
        echo "<h2>? お問い合わせを送信しました。</h2>";
        echo "<p>迅速に対応させていただきます。</p>";
        // 別の「送信完了」ページにリダイレクトすることも可能です
        // header("Location: thank_you.html");
        // exit;

    } else {
        // 送信失敗時の処理
        echo "<h2>? 送信エラー</h2>";
        echo "<p>メールの送信に失敗しました。時間をおいて再度お試しください。</p>";
    }

} else {
    // POST以外でアクセスされた場合の処理
    echo "<h2>アクセスエラー</h2>";
    echo "<p>このページはフォームからのみアクセス可能です。</p>";
}

?>
</body>

５．付録

　参考程度に考えると
　　　非推奨だが一時的な対応として
　　　　　フォーム送信に「autocomplete＝”on”」を追加し
　　　　　ブラウザの自動入力チエックを回避する・・・非推奨

　　　より強力なライブラリーやSMTPサーバー経由の送信方法がある
　　　　　「PHPMailer」の使用
　　　　　　　標準のmail()関数よりも柔軟で高機能であり、
　　　　　　　特にセキュアなメール送信が求められる場合に利用されている

１．デフォルトドキュメントとは

　ディレクトリに対して要求を行った場合に返されるドキュメント
　　　http://www.example.com/ と特定のページを指定しなかった場合
　　　　　http://www.example.com/index.html と表示されたとすれば
　　　　　表示された【index.html】がデフォルトドキュメント

２．デフォルトドキュメントの指定方法

　デフォルトドキュメントの指定方法
　　　【.htaccess】の【DirectoryIndex】を使用して定義する

<Directory>
    DirectoryIndex index.html index.htm index.php
</Directory>

　注意点
　　　２行目にアクセスできるファイルを指定する
　　　　　優先順位は左側が高く、右に向かって低くなる
　　　　　左側のファイルが存在しなければ、順次右側のファイルに移っていく
　　　　　どれも存在しなければ、エラー表示（ 403 Forbidden）される

　　　使う目的
　　　　　拡張子を意識せずにページを作成したい場合に便利
　　　　　　拡張子をどれにするか迷うことが無くなる

３．デフォルトドキュメントの指定を外す方法

　デフォルトドキュメントの指定方法
　　　【.htaccess】の【DirectoryIndex】を使用して定義する

<Directory>
    Options -Indexes
</Directory>

　注意点
　　　２行目のIndexesの前に「マイナス記号」を挿入し
　　　　　Indexesがなくなり一覧表示がされなくなる

　　　もしファイル内容を公開し広くダウンロードさせたい場合には
　　　　　「プラス記号」を挿入しファイル一覧を表示するのが便利

４．重要事項

　【DirectoryIndex】で「Options Indexes」のままだと
　　　存在しないディレクトリにWebブラウザでアクセスすると
　　　Apacheの設定によってはそのディレクトリのファイル一覧を表示する

　　　表示されると、セキュリティー上非常に危険な状態となる
　　　　　他人にファイル構造やファイル属性が丸わかりとなり
　　　　　簡単に情報が盗まれる恐れが発生する

　必ず、デフォルトドキュメントは指定しておき
　　　ドキュメント（Webページ）を作成し忘れても大丈夫な様にしておく

５．注意事項

　【DirectoryIndex】の指定箇所に注意が必要
　　　このパラメータはディレクトリ単位で指定できるので
　　　複数箇所に存在する可能性がある

　　　全て検索して洗い出し、指定し忘れを防ぐ