WEBサイト
　 サポート

少し用意したツールを紹介しよう。まずは、会員登録したら使える「管理サイト」機能 このサイトでは、WEBディレクターが本当に使える、役立てるツールを、現場目線で用意することをポリシーにしている。少しづつ紹介してゆきたいが、最初に、会員登録していただくと使ってもらえる「管理サイト」機能を。 これは、WEBツールというページにではなく、トップページに用意した3つ目のタブ「管理サイト」で用意されている。 会員登録してサインイン（ログイン）していただき、管理サイトを登録するとご利用いただける。 会員登録（もちろん、無料）して、マイページで管理するサイトを登録 サイトのURLアドレスをセットして、下部にある [ 更新 ] ボタンをクリックしてください。 ちなみに、おまけみたいな機能ではありますが、1日1回、サイト生存確認できる機能も用意してますよ。 登録後、トップページの「管理サイト」のタブを開いてみてください サイトのURLアドレスをセットして、下部にある [ 更新 ] ボタンをクリックしてください。ここからもゆけます。 最初、初回のクロール走査を行います。少しお時間かかると思うので、何か他のことをされてお待ちください。 管理サイトの基本的な状態を確認してください [基本情報]・[パフォーマンス]・[コンテンツ]・[リンク]・[SEO] の５つの視点から、簡易的ではありますが、サイトの状態をスキャンしてスコア付けされます。   スクリーンキャプチャ PC（デスクトップ）、mobile（スマホ）のスクリーンショットを配置 ５つの視点でのスコア 下にある数値は　エラー/警告(Warning)。自分で創ったシステムではありますが、このサイトの今、ひどいもんですねぇ ちょっと厳しすぎるかも。（変更するかもです）。まぁ、スコア・表示はほんとご参考程度で、それよりも提示している各要件に注視、どんどん対応してゆきましょう・・・私もやりまーす。 クリックで詳細な情報が表示されます 重要指標 [読込スピード]・[サイズ]・[重さ]・[リンク]・[OGタグ廻り] 優先改善事項 さぁ、何やりましょってことですね。どんどんつぶしてゆきましょう パフォーマンス、コンテンツ、リンク、SEO の スキャン詳細 なるべくシンプルに気にしなければならないところを端的にまとめています 再走査する　ボタンで再スキャンしますので、確認して（大事！）、対応して、スキャン・確認の PDCAの始まりですね！！ いまの WEBサイトサポート・・・ひどい状態だということはわかりました では、これからこれを　どんどん改善してゆく様子も、またオープンに公開したいと思います。 ぜひ、みなさんも管理サイト登録してチェック、サイトをよりよくするためにお役立てくださいね なお、この WEBサイトサポートでは、基本的にみなさんの詳細な情報を保存することはありませんが、この「管理サイト」は、この後の追加機能で、検査したものを時系列に把握でき、何をやった同良くなった・・・を把握できる機能を予定しており、ここのスキャンデータだけは保持しています。（退会されれば抹消されます）。暗号化して保存しています。ご了承ください。 今日はここまで。またお目にかかりましょう。

しれっとオープンしてから数日。引き続きずっと触ってます。成長させる。 このサイトでは、今もいくつかのツールを提供してて、さらに今後も、サイト運営の現場で役に立つツールを、どんどん用意したい。 安心して使ってもらうためにも、このサイトを長く利用してもらうためにも、セキュリティ対策が必要だ。こんな小さなサイト、誰が狙うか、とも思うけども、最低限はしておかなくてはね。あ、どこかのハッカーさん、狙ってやろうなんて思わないでね、お金も得るものもは何もないから。 で、こうやってその事も書き留めておけば、誰かの目に留まり役に立つかもしれない・・・   "うちには関係ないよ" は　関係ない 「この規模のサイトが、狙われるわけないでしょ」・・・実は、ネットの攻撃は無差別に“自動”で仕掛けられるものが大半。たとえば放置しているWordPressの管理画面に、世界中からブルートフォース（総当たり）アタックが日常的に来るのは、実際によくある話。だから「最低限」だけでも、しておかないとだめなんだよね。サーバ委に対する、権限とかが影響して、できることにはもちろん限りもあるけどね。   セキュリティ対策の考え方 専門的な技術的な説明ではなく、なるべくわかりやすく記録しておく。 インターネットにおけるセキュリティ対策は、どこの時点で、何から守るかを明確に定義して、それに粛々と対応してゆくことが大事だと思っている。 何層かにわけた図とかよくあるけど、要に次の３つに分けられると思う。 一番外側　フロントと呼ばれるブラウザで直接アクセスするところ アクセスしたあと、プログラムなどの仕組みが動いているところ 大元のアクセスする基本部分 言い換えるね。 フロント（入口） 　└ サイトを見に来た“誰でも触れる部分” 　　→ ログイン画面、フォームなど 仕組み（中身） 　└ サイトを動かしているプログラム部分 　　→ CMS（WordPress等）、各種プラグイン、APIなど 土台（基盤） 　└ サーバやOS、データベース、ネットワーク設定 じゃ　実践記録を。 フロント（入口） .htaccess というサイトにおいて色々な設定ができるファイル。最近は、rootという権限を持っていないサーバーでも、レンタルサーバーでも設定できるようになってきているね。 # ======================================== # リスト表示させない # ======================================== Options -Indexes # ======================================== # ファイル保護 # ======================================== <Files ".htaccess"> Order Deny,Allow Deny from all </Files> <Files ".htpasswd"> Order Deny,Allow Deny from all </Files> # ======================================== # アップロードファイル保護 # ======================================== # ログ・設定ファイル保護 <Files "*.log"> Order Deny,Allow Deny from all </Files> <Files "*.ini"> Order Deny,Allow Deny from all </Files> <Files "*.conf"> Order Deny,Allow Deny from all </Files> # バックアップファイル保護 <Files "*.bak"> Order Deny,Allow Deny from all </Files> <Files "*.backup"> Order Deny,Allow Deny from all </Files> <Files "*.old"> Order Deny,Allow Deny from all </Files> <Files "*.tmp"> Order Deny,Allow Deny from all </Files> # ======================================== # 著名な攻撃への基礎対策 # ======================================== # SQLインジェクション対策 RewriteCond %{QUERY_STRING} (union|select|insert|delete|update|drop|create|alter|exec|script) [NC] RewriteRule ^(.*)$ - [F,L] # XSS対策 RewriteCond %{QUERY_STRING} (<script|<iframe|<object|<embed|javascript:|vbscript:|onload|onerror) [NC] RewriteRule ^(.*)$ - [F,L] # パストラバーサル対策 RewriteCond %{REQUEST_URI} (\.\.\/|\.\.\\|%2e%2e%2f|%2e%2e\\) [NC] RewriteRule ^(.*)$ - [F,L] # 不正なユーザーエージェント対策 RewriteCond %{HTTP_USER_AGENT} ^$ [OR] RewriteCond %{HTTP_USER_AGENT} (sqlmap|nmap|nikto|w3af|acunetix|nessus|openvas) [NC] RewriteRule ^(.*)$ - [F,L] # ======================================== # セキュリティヘッダー強化 # ======================================== <IfModule mod_headers.c> # XSS Protection Header always set X-XSS-Protection "1; mode=block" # Content Type Options Header always set X-Content-Type-Options "nosniff" # Frame Options Header always set X-Frame-Options "SAMEORIGIN" # Referrer Policy Header always set Referrer-Policy "strict-origin-when-cross-origin" # サーバー情報隠蔽 Header unset Server Header unset X-Powered-By </IfModule> 少し説明、付けておきますね。 リスト表示させない ディレクトリの中身が丸見えだと、地味に危ない。見えなくしておくのが吉。 Options -Indexes ファイル保護 設定とかログとか、大事なファイルは外から見えないようにガード。 <Files ~ "\.(env|git|htpasswd|htaccess|ini|log|sh|bak)$"> Order Deny,Allow Deny from all </Files> アップロードファイル保護 もしもユーザーに変なファイルを上げられても、実行させなければとりあえずセーフ。 <FilesMatch "\.(php|cgi|pl|py|exe|sh)$"> Order Deny,Allow Deny from all </FilesMatch> バックアップファイル保護 消し忘れたバックアップ、意外と多い。ここも一応ブロック。 <FilesMatch "\.(bak|old|save|orig)$"> Order Deny,Allow Deny from all </FilesMatch> SQLインジェクション対策 URLに怪しいSQLキーワードが入ってたら強制シャットアウト。ざっくりだけど結構効く。 RewriteCond %{QUERY_STRING} (union|select|insert|delete|update|drop|create|alter|exec|script) [NC] RewriteRule ^(.*)$ - [F,L] XSS対策などHTTPヘッダー追加 サーバーやブラウザに一声かけておくだけで守れる部分は結構ある。 Header always set X-XSS-Protection "1; mode=block" Header always set X-Content-Type-Options "nosniff" Header always set X-Frame-Options "SAMEORIGIN" Header always set Referrer-Policy "strict-origin-when-cross-origin" Header unset Server Header unset X-Powered-By ほんと、シンプルな基本だけど、ひとまず・・・ Google reCaptcha フォームにはこれだね。いまは Version3(V3)。私はロボットじゃない　とか　バイクのある写真選べ　とかなくなって使いやすくなった。閾値をセットして、アクセスがロボットかどうかを判断してくれる。完全、100%とは言えないだろうけど、最低限、ね。ありがとうございます。 １. API KEy の取得 https://developers.google.com/recaptcha?hl=ja こちらで　まずはキーを取得。サイトキー　と　シークレットキー   ２.フロント側 {サイトkey) には取得したサイトキーをセット。 <script src="https://www.google.com/recaptcha/api.js?render={サイトkey)"></script> <script> grecaptcha.ready(function() { grecaptcha.execute('{サイトkey)', {action: 'submit'}).then(function(token) { var recaptchaResponse = document.getElementById('recaptchaResponse'); recaptchaResponse.value = token; }); }); </script> 送信フォームにこれを追加しておく recaptcha の値を格納するところ。 <input type="hidden" name="recaptcha_response" id="recaptchaResponse">   ３.サーバー側 これは phpサイトでの一例。 $_val は送られてくる Recaptcha の値。$_sid はシークレットキー、ね。 public function ckRecaptcha($_val,$_sid) { $_rt = null; if( (!empty($_val)) ){ $recaptcha_secret = $_sid; $recaptch_url = 'https://www.google.com/recaptcha/api/siteverify'; $recaptcha_params = [ 'secret' => $recaptcha_secret, 'response' => $_val, ]; $recaptcha = json_decode(file_get_contents($recaptch_url . '?' . http_build_query($recaptcha_params))); if(!( (!empty($recaptcha)) &&(!empty($recaptcha->score)) )){ $_rt = false; }else{ if ($recaptcha->score >= 0.6) { $_rt = true; } else { $_rt = false; } } } return $_rt; } こういう関数を用意してチェック。でも実際は、サーバーの様々な理由から簡単に導入できず数日悩むこともあるんだよね・・・まぁ、それに泥臭く対応するのが仕事なんだけど。 今日はここまで。本当はもっと　フロント側やったことあるので、また、ここに追記しておきます。 後日、 仕組み（中身） 土台（基盤） でやったことも公開しておきます。お役に立てれば・・・

AIが隆盛し、生成AIに振り回されてない？　今こそ確かな羅針盤が必要だ AIは確かに凄い。面白い、気にするのも知識を習得するのも必要、いや必須な時代になっていた。 でも、知識や情報が増えれば増えるほど、自分でできる範囲が拡がるほど、混沌として、結局なにもなせないことはよくある。 ずっとサイト運営の現場でお手伝いさせてきて、今も色々と相談や仕事を頼まれ、ずっと感じてること。 そんなに凄い事ではないのに、制作会社や代理店がひしめき、いくつものマージンでとんでもないコストが必要になる AIの拡がりもあり、にわかに自身で色々とできるようになってきて、何をなすべきかわからなくなってきている 一番のも目的は　サイトの繁栄により、本業や会社、お店に益をもたらすことなのに、運営や創ることが目的になっている 私自身の振り返りも含め、じゃぁ、そう思うなら、自分でそういうWEB運営現場のディレクターが本当に喜ぶ、役に立つサイト 創ってみろよ・・・内なる声に悩まされて数年。 ・・・やっと、始めました・・・ ずっと usersupports というドメインを所有していて、ネットの仕事を始めて30年弱、やっと使える。 とにかく、 ・情報をならべるだけでなく、得るため、理解するためのものすること ・できうるかぎり　無償で（私自身はたいしたことしていない、ほとんどが世の中に多く存在するオープンソースの世界を創ってきた方々の恩恵だ。 ・本当にオープンに、だめなことも課題もそのまま盛り込んで、同じような状況に陥った人の役にも立ちたい ・で、楽しく運営して（リアル　サイト運営バラエティ　的な）、面白がりながらサイトを育ててみよう と　オープンしました。 WEBサイトサポート https://website.usersupports.com/ まだまだ、準備終えてないものが未搭載　だし、ごたごたですが、公開してからこそ経験して伝えることもあると思うので　オープーン。 気になることやご意見、ありがたく頂戴させてください。（お問い合わせから） なるべく煩雑に更新してゆくので、どうぞ　またお越しください。 読んでいただき、ありがとうございました。 運営：株式会社ツクルン 池田南美夫 https://www.tsukurun.co.jp/  

ふと、思った。日本にインターネットが入ってきてから、ずっーと制作を続けてきた。 　すでに齢60半ば。数えきれないほどのプログラムを書いて、お客様からの仕事をひとつづつ、泥臭く動いて対応してきた。 　頭の中や身体に染み付いた情報や経験はあるけれど、なんも残ってないなぁ・・・ 　この歳でなお、お仕事させてくれてるお客様もまだまだいるけれど・・・なんかなぁ 　もちろんそれはとても有難く、一生懸命努めるんだけど。 　・・・そうだ。 　今まで創ってきたものを形に残るものにして、使いたい人に使ってもらおう。 　私もずいぶん、多くのツールや情報に助けられてきた。 　広告なんていれないで、ただただ　利用してもらえるサイトを創ろう。 　決めごと　用意しなきゃな。 　小難しいことはなるべくなく、簡単に使えるものにしよう 　WEBサイトを運営するディレクターが喜ぶものにしよう 　すでにあるツールもまとめてここにすべて用意しよう テーマは・・・実際に運営者のスタンスで、役に立つものを創る、だ。 よし、ツールが10個できたら　サイトを公開するぞ・・・ ・・・で、だ。どうせなら　楽しみながらサイト運営の実践も効果も全部公開したいなぁ。 よく　「恋愛バラエティ」とかあるよね。それほど面白くならないとは思うけど、「運営バラエティ」やろうかな。 だめなところも試行錯誤もずべて公開して。 楽しみが増えてきたな・・・ ２０２５年４月１日　エイプリールフール　じゃないよ。