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/  

サイト運営において、状況を調査・把握することは必須 やりたかったこと 自分が抱えている、運営任されているサイトにおいて テーマとしているキーワードがどれだけ検査されてて どういうサイトが上位表示されてるか・・・ ボタン一つで自動的に調べ上げてくれて、その事自体がやるべきこと、目標にはならないように その結果を踏まえて、どういうページを用意すべきか、それを考えたかったんだよなぁ・・・ ・・・そんなの　いくらでもサービスやツールがあるよ・・・ 知ってる。 （ここで、少しややこしいのは） そういうツールを自分で創ること自体が・・・（私には）楽しいんだよなぁ。 ※調べ上げてくれて、その事自体がやるべきこと、目標にはならないように・・・ 矛盾してるやん・・・そうですね。 でも、世の中のそういうツール、僭越で恐縮して意見言うと、 実際の現場の運営者からすると　使いにくそう（機能豊富過ぎて、本質的な部分だけでいいのに） まぁま、料金もかかりますね ・・・で、ひとまず、（創る事）トライしたわけです。 Google Search API（結局これを試すことになるんです） 自力で、クローラー創るなんて発想はないし、やはり検索サイトの状況調べるには、この API利用は王道。 そんなに　前知識ないところから、まぁやってみようと・・・ いまは、Googleが提供してくれている API は、すべて 「Google Clowd コンソール」で利用手続きを行いますよね。 1：Google Clowd コンソール にアクセスして コンソールに移動。この後の プロダクト作って・・・API-key 発行して、使うAPI有効にして・・・、などは 世に　すぐれた指南ページたくさんあるので、それらをご参照ください。 まず今回の目的のために利用できるAPIは・・・ [API とサービス] > [ライブラリ]で 改めて確認 "search" で検索すると・・・ ※ "Search Researcher Results API" てのが、めちゃくちゃ気になるけど、今回の目的用途を満たすのは、"Google Search Console API" もしくは、"Custom Search API" なのかな。 "結局、Google Search Console API" は、自身の管理している Google Seach Console にアクセスして利用するのが主利用なので、ひと昔「カスタム検索エンジン」てのが流行った（ほんとか？）頃からの、"Custom Search API"を利用するわけです。 ・・・で、使い方自体は、これも　世に丁寧で親切な指南サイト、たくさんあるので、割愛。 今回は python で組もうと思ったので、こんな感じで利用しました。 def google_search(query, api_key, cx, num=10): """Google Search API で検索を実行し、結果を取得""" try: url = f"https://www.googleapis.com/customsearch/v1" params = { "q": query, "key": api_key, "cx": cx, "num": num } response = requests.get(url, params=params) results = response.json() if "items" in results: return [(item["title"], item["snippet"]) for item in results["items"]] return [] except Exception as e: print(e) かなり省略してます。基本部分。 まぁ、シンプルな形なんですが、実は狙いがあって　これを呼ぶ前に、 調べる対象のURLを投げる ページにアクセスし　形態素解析で重要と思われる単語、文字列を検索 上位１０語の（ほかにもいくつか条件あるのですが）、検索サイトでの状況を調べる ってのをやってて、↑の関数呼び出す前はできてて、動かしたんですよ。

サイト保守。それは、サイトの守り人（もりびと）に違いない。 　いまも、多くのお客様のサイトを保守させていただいている。 契約上のことで言えば、お客様によりまちまちではあるが、一定の料金で○○○をやります、というスタイル。 何時間かの作業時間も含まれてて、通常の料金より割安に設定。時には、制限時間を超えることもあるけれど・・・ 基本、定額でWEBサイトの更新や修正、改造を行う ・・・ うーむ。まるで、制作サブスクのようだ。 お客様にとっては、定額で運営を行う作業経費を計算でき、細かい見積のやり取りがなくなり、低コストで安心した運営を続けられる ・・・ ん？安心?割安？。 違うなぁ。 世の中の保守契約とか保守サポートとかの定義とは違うかもだけど、 私は、「サイト保守」ってのは、サイトの守り人（もりびと）になる事、それをやる事 ・・・なんだと思う。 家で例えると、管理人？か。 定期的に設備を見直し、壁がどうしようもなく痛んだらリペイント。ゴミが出てたら、綺麗になるように考える。 いやぁ、それじゃ足らないな。 家は人が住んでいる。毎日誰か（お母さん、か、最近はお父さん、も）掃除をし。痛んだところは直し、より楽しく暮らすために改築をする。 手入れも管理もしなければ。家はボロボロになるばかりだ。朽ちてゆくばかり。 そうだ。侵入者が来ないように戸締りをして、不審なことがあれば、セキュリティ対策をする。 ※・・・そういえば先日、私も庭に侵入された形式があり、しょぼい対応だけど、まずは、人感センサーで光るライトを取り付けた。 だけど、それだけじゃないね、いい日々を送れるように、花を飾り、空気の入れ替えをして・・・ いま稼働している多くのWEBサイト。もちろん、有料で構築された MicoroftのIISやOracleのサーバーもあるだろうけど、かなりの数が、世界中の有志によるオープンソースで用意されたものの集合体だ。プロバイダにサーバーの入れ物代は払うけれど、一番利用させてもらってるのは、中身の細かいプログラム・リソース、サーバーソフトウェアだけでなく、数千数万を超えるオープンソースのファイルの集まり。それら、ほぼ無償。凄い世界だ。 知らない間に、多くの見知らぬ人々（・・・ただただ、技術と好奇心、指名、没入に追われている、もちろん金儲けも野心もあるだろうが）から恩恵受けて、それを忘れてるわけだ。 日々、進化し続ける技術。サイトのあらゆるリソースが改変・拡張・改良続けされ続けている。 しかし、それに対して、何もしなければ、サイトはそのままだ。古いリソースのまま。セキュリティ対策の細かいパッチだって、存在知っていてもあてなければ何もならない。家と同じで、放っておくと、ゴミは貯まる一方。 いずれそんなのも、何にもメンテナンスのいらない完全自動の世の中になるのだろうか？ いや、ならないだろうなぁ。自動てってのは曲者で、効率とリスクを交換しているようなものだ。自動にして、不要なものまでひきとる必要はないし、オープンソースの世界はほんと奥深いからね。様々な手法のせめぎあいだ、相性を考ええてやらないといけないのはいつものこと。時には、意味不明な大量なエラー文字に悩まされ、おそらく、それは（メンテナンスは）無くならないんだろうなぁ・・・ それがまｔ、面白いんだけど。 あぁ、ふと、が長くなってしまった。 でも、「保守」って別にめちゃ凄い技術をもってやっているわけでもない（もちろん、凄い技術持ってる方々もたくさんいますよ）。 基本、誰でもできる。 サイト保守、サーバー保守ってのは、一番は、いつも「気にする」って事なんだと思いますよ。結構大事で本質的なことだから、大変でもあります。 と、ぼやきまくって ・・・さて 本題。 SSHで接続して、簡単なサーバー健康状態を見れる人は見てみよう 　もちろん、今の世ですから・・・お金かければわかりやすいシンプルな管理画面擁した、サーバー管理ソフトウェアなんてのはやまほど。うみほど、ありますよ。 でも、普通に telenet とかでSSHでサーバーに入り、コマンド打って様子見る・・・って、大事だし、面白い。 最近のレンタルサーバーは、ソフトウェア使った SSH接続しなくても、サーバーの管理画面に root権限でのコンソール用意していることも多いから、そこで容易に行えます。 ほら、子供のころにまだ入ったことのない裏の物置小屋に懐中電灯で入り込んだみたいで、楽しいもんです。ちと、不謹慎か。 ・・・おぉ、また　前置きが長くなってしまった。 いつも私が見守っているサイトたちに、どんなコマンド投げて何を見ているかを列記しますね。 何度も言うけど、プログラム書いて自動化だってできますよ。ただ、このあたりは、・・・意外とやらない。 私が、見守ってやんなきゃだからね。自動化って「自動にすることで意識が薄れ形骸化する」ことにもなりますしね。 さ、こっからは、下手な口上は無いですよ。ただただ、列記しますね。プロの方々はわかりきってる、当たり前のことだから参考にも何にもならないだろうから、スルーで。 でも、WEBディレクターになりたてや、好奇心たまらない方々は、こういうこともエンジニアや外注に投げるんじゃなく、自分でやってみると意外と、サイトに愛着・愛情（恐ろしく）湧いてきますよ。 ・・・さて ※なお、紹介するのは、Linuxにおいて広く使われている CentOS というディストリビューションが入っているサーバーです。OSによりコマンドは変わることもあるので、ご留意。 この "CentOS" はサポート期間の終了という課題テーマがあり、いくつかのお客様のサーバーでもその問題に直面してます。また、言えること、書きますね。 ※また、例としてあげているキャプチャは私の管理している自身のサーバーのうちのどれか、です。お客様の情報はあげられませんのでね。 まず把握。どんなことでも、これがファーストステップ 　新しくサイトを預かり、「守人」になった時に行うチェック。 空き容量の確認 # df|grep -v loop ※基本は df -hなんだけど、こうしないと気にしなくていい snapの仕組みが利用している loopデバイスが表示されてしまう。 ※空き容量の確認とディスクのパーティーション構成のチェック。 ※メインパーティーションは "/dev/vda2" で、まだ 14%しか使ってませんね。 CPU・メモリの利用状況 # top ※リアルタイム表示。 ※(Windowsなら) Ctrl+Z で表示止められます。 ※メモリ8MBなので、ずいぶん、swap使ってますね。まだ、全然大丈夫そうだけど。 WEBサーバーチェック # systemctl status httpd ※Apache使っている場合。(nginxなら # systemctl status nginx) ※問題なさそうです。 まれに、最終行に "Notice: journal has been rotated since unit was started, output may be incomplete." とか出ることがあります。 その場合は httpd.service を再起動してみてください。 firewall の基本チェック # systemctl status firewalld ※firewalldが動作しているかどうかを systemctlコマンドにstatusを指定して確認 ※動いています。 firewall の設定チェック # firewall-cmd --get-active-zone<br> # ls /usr/lib/firewalld/zones<br> # cat /usr/lib/firewalld/zones/public.xml<br> ※firewalldの現在設定を確認 ※eth*インターフェースにpublicゾーンが設定してある状態。 ※CentOSのデフォルトの場合、設定ファイルはxml形式で/usr/lib/firewalld/zonesディレクトリに用意。 ※sshとdhcpv6-clientのみ許可。 firewall の現在のゾーンを詳しく見る # firewall-cmd --list-all ※firewall-cmdコマンドに--list-allオプション ※デフォルト状態。 ※実際はここにポート変更やIP制限ほか　必要な設定を加えてゆく。 不正アクセスを監視。チェックもしよう 　どんなサーバーも必ず行われているハックトライ（ハッキング試行） 不正アクセス失敗のIPアドレスチェック # lastb -i | head --lines=-2 | awk '{print $3}' | sort | uniq --count | sort --reverse | less ※lastb コマンドで参照されるアクセス失敗のログで、IPアドレスによるカウント、多い順にソート。 ※この（私の）サーバーは、かなり古いやつですが、恐ろしいもんですね ユーザー別ログインチェック # lastlog ※侵入はされてませんが、これ、失敗はすべてハックトライ。 ※あまりの多さなので、ユーザー名での制限などは無意味です。 あとは、アクセスログ、エラーログ廻りですね。今回は割愛しますが、エラーログは、システムが吐き出すもの、メールやDBそのほかミドルウェアが吐き出すもの、そしてフレームワークやアプリケーションが吐き出すものなど多様です。細かく診なければなりません。そのあたり、実はいくつかは自動化しているのですが、そのあたりはまた今度、紹介します。 お互い、頑張って「守り人」やりましょうね。

サイトを公開。ページを作成。さ、宣伝して集客しなきゃ。 お金あれば・・・ 　（なくても一応考えるけど） Google Adsense ほかの広告 経費をかけての販促対策 最低限 SEO対策（1回で終わらないけど） SNS利用した　投稿・宣伝 効果薄くてもやれる技術的なこと・・・ RSSフィード　や ニュースサイトへの考察とアプローチ 外部サイトでの紹介。リンク誘導 ・・・ほかにもありますけどね。 　でも、その前に、各ページにこれは設置しておきたいよね。と思われるのが・・・ SNSシェアリンク（共有リンク） XやFacebookなどのアイコンボタンをクリックすれば　投稿できる画面が出てくる・・・あれ、ですよ。  もちろん、こういうツール的なものを設置しただけでいい、わけがない。 いいページ、閲覧者に本当に役立つコンテンツを用意して、閲覧者が「あーこれは他で紹介したいなぁ」と思った時に、ストレスなくクリックして投稿、紹介していただける ・・・そのためのツール、ボタンですよね。 で これはWEBツールコーナーに用意しなきゃ、と思い　実は、このサイトで公開するツールとして創り始めたんです。 創り方自体は比較的容易で、とにかく簡単にさっさと使える、いいツールを創ろう、公開しようとしてました。 創ろうとしていた要求仕様はこんな感じ。 サイトのURLアドレスを入れれば、サイト内構造を取得し、全ページのSNSシェアリンクを自動生成する XやFacebookはもちろん、ThreadやBlueSkyなど現在有効なSNSリンクの自動生成 アイコン画像をいくつか用意して（ちゃんと、各SNSのアナウンスしている公式に用意されている画像を使って） アイコン形式かボックスタイプか指定できる 画像は自動的に、画像本体ではなく、SVGコードに変換して、別に画像を用意しなくても使える 少し、製作途中のキャプチャ、お見せますね。（過去のいぶーつ） こんな感じ。 まだ、デザイン要素FIX前なんですが、アイコンとかも、公式画像ダウンロードして　ひとつづつ創っていたわけですよ。 HTMLテキストの生成まで実装終えて 画像からのSVGコード生成も終え、 もう少しだ・・・ ・・・ところが、うまくゆかない事が色々と出てきて、ひとつづつその対応をしていたわけです。 Instagramは知ってたけど、Threadsも外部からのシェアリンクの案内がなく、創れないのかも？ 画像からSVGコードへの変換は、仕組み自体はできたけど、クォリティ低く、使えないレベル 生成される、SVGコードもかなりのチューニングしなくてはならない ・・・なかなか対応がうまく進まず、試行錯誤をしている時、 世の中で公開されている「SNSシェアリンク作成ツール」を参考にするために調べてみようと。 ・・・・・ ・・・・・ ・・・・・ え？ なんだ。こんな凄い、素敵なツールがすでにあるじゃないか？ しかも、Threads にまで対応してる。 これに対抗して、創る理由？　ある？ ないな？ 創るの、途中で止めました。 そうさせたのが AddToAny: Share Buttons by the Universal Sharing Platform https://www.addtoany.com/ 　このページにもすでに貼っている ね、Threads もあるでしょ。 これを簡単に創れる・・・しかも、各ページごとに用意する必要もなく、JavaScriptでページのURLやタイトルを取得して、いい感じのシェアウインドウ開いてくれる。 もういうことないでしょ。 もちろん他にも、WEBツールコーナーに、創って用意したものの中にも、すでに素敵なツールとして同じような公開されているツールありますよ。 ただどれも、もう少しこうならなぁ、こういう機能も欲しいなぁ、とか、有料かぁ、とか・・・・ よし、自分で創ろと思わせられたのですが、このSNSシェアリンク作成ツールに関しては、AddToAny。これでいいでしょ。 会員登録も必要なく、もちろん無料のツール。 しいて言えば、リンクは https://www.addtoany.com/ に飛んで、そこで色々と動くようなので、ビッグデータ集めてるのかなぁ？　とか　セキュリティ的にはどうか、とも思いましたが。 いや、これは　AddToAny。これでいいでしょ。 簡単に説明しますね。 AddToAnyで。簡単に、SNSシェアリンクをつくろう AddToAnyのサイトにアクセス https://www.addtoany.com/ Get the Share Buttonsをクリック Any Websiteをクリック Choose Services…をクリック 左から右に利用するものをセットしてゆきます 右にセットしたものは。ドラッグ＆ドロップで順番を変えられます よく使われる仕組みですが、わかりやすくて直感的でいいUIですねぇ 私は最終的にこうなりました。欲張りだなぁ・・・ [Done]をクリック More Optiosをクリック Language で日本語を選択 Show menu only ... をチェックして [Get Button Code]をクリック 完了 HTMLソースコードがテキストで提示され、あらかじめ選択された状態で表示されます UX考えた、本当によくできたUIですねぇ。勉強になります 取得したソースコード いちお意地。スマホではあまり意味ないけど、PCでマウスオーバーで tipが表示されるよう title属性を追加 これが完成 デフォルトで AddToAny で生成したものは float:left ですが サイトに貼ったものは、順番逆になりますが、float:right に変えてます   var a2a_config = a2a_config || {}; a2a_config.onclick = 1; a2a_config.locale = "ja"; 利用させていただき、ありがとうございます。

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