WEBサイト
　 サポート

サイト運営において、状況を調査・把握することは必須 やりたかったこと 自分が抱えている、運営任されているサイトにおいて テーマとしているキーワードがどれだけ検査されてて どういうサイトが上位表示されてるか・・・ ボタン一つで自動的に調べ上げてくれて、その事自体がやるべきこと、目標にはならないように その結果を踏まえて、どういうページを用意すべきか、それを考えたかったんだよなぁ・・・ ・・・そんなの　いくらでもサービスやツールがあるよ・・・ 知ってる。 （ここで、少しややこしいのは） そういうツールを自分で創ること自体が・・・（私には）楽しいんだよなぁ。 ※調べ上げてくれて、その事自体がやるべきこと、目標にはならないように・・・ 矛盾してるやん・・・そうですね。 でも、世の中のそういうツール、僭越で恐縮して意見言うと、 実際の現場の運営者からすると　使いにくそう（機能豊富過ぎて、本質的な部分だけでいいのに） まぁま、料金もかかりますね ・・・で、ひとまず、（創る事）トライしたわけです。 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を投げる ページにアクセスし　形態素解析で重要と思われる単語、文字列を検索 上位１０語の（ほかにもいくつか条件あるのですが）、検索サイトでの状況を調べる ってのをやってて、↑の関数呼び出す前はできてて、動かしたんですよ。

サイトを公開。ページを作成。さ、宣伝して集客しなきゃ。 お金あれば・・・ 　（なくても一応考えるけど） 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"; 利用させていただき、ありがとうございます。