[Web制作効率化] 静的WebサイトにNEWSなどの動的機能を入れる方法

兼ねてから、企業のホームページ依頼は静的ページで納品しています。 静的ホームページというのは、基本的にHTML、CSS、Javascriptのみで構築されたWebページで、CGIなどのサーバーサイドプログラムを伴わない非常に効率的かつ、無駄な脆弱性などが発生しないセキュアなページで運用できます。 また、修正したい場合は、HTMLや、JSONファイルなどのテキストファイルのタグや文字列を変更するだけで簡単に更新作業などができてしまいます。 ローテクですが、HTMLのコーディングぐらいならプログラミングよりも学習コストが低いので、結構クライアントさんから気に入られています。 お問い合わせなどのページは、サーバーに情報を送ってそこからメール送信などを行わないといけないので、CGIを使わないといけないと思っている人いますよね。 ソレ、GoogleFormをAPI的に使うことで、GoogleのSpreadSheetとの組み合わせで、サイト側ではCGIなどは一切使わなくて実現できます。 参考記事 : これは便利、CGIを一切使わずにformデータが収集できる、Google form活用方法 でも、ニュース機能や事例紹介などの、運用で項目を追加していくような場合に、JSONファイルをJavascriptでAjax読み込みして、動的に見せるようにしてデータベースを使わなくても更新できるようにしていましたが、JSONファイルの生成や更新は、CGIを使う必要がありました。 良く考えたらそんな内容、SNSをAPIで表示しちゃえばいいじゃん！ということで、これまで発生していたCMS的な管理画面が不要になる方法を考えてみました。

SNSを利用した静的Webページについての考察

よくよく考えると、ニュースや事例紹介などは、SNSにそれだけアップしていてもそれなりに内容が成り立ちます。 そして、大体のSNSには、APIなるディベロッパ用のツールが設置されているので、それを使うのは非合法でもなんでもありません。 もちろん、パケット経由するので、読み込み遅延は発生しがちですが、簡易なWebサイトであれば、そのまま遅延読み込み方式で問題ないでしょう。 もしアクセス頻度が高い場合は、CDNを利用するか、独自でキャッシュシステムをサーバー側に構築することで、SNS側にも迷惑をかけない仕組みは作れそうです。 でも、今回は単純方式だけでシンプルに考えてみたいと思います。

メリット

SNSを使ったWebページのメリットはいくつかあります。 ・SEOに有利 SNSは、バズるためのツールと言ってもいいほど、SEOに優位に働きます。 単純にその恩恵に乗っかれるのは、とてつもないメリットでしょう。 サーバー負荷軽減 当たり前ですが、ニュース記事などのタイムラインは、SNSが用意してくれるので、自分の運用するサーバーには負荷がかかりません。 無駄なCMSがいらない 更新はクライアントができると考えられているWordpressでも、使い方を知らないと運用できません。 また独自で作ったCMSなどは、運用担当者の人のITリテラシレベルによって、まるで使いこなせない場合も多く、サポート電話が頻繁に掛かってくる場合もよくあります。 SNSの更新であれば、おそらく誰でもできてしまえるほど楽に運用できるのは明確ですね。

デメリット

もちろん、デメリットもあるので、これらもしっかりと把握しておきましょう。 SNSアカウントが必要 会社ホームページであれば、会社用アカウントを作って運用しなければいけません。 それ以前にすでに運用しているものがある場合は、それをそのまま流用すればいいので楽なのですが、無い場合は作って運用をするのはクライアント側で負担に感じてしまう可能性も高いです。 ※運用負荷は、CMSでも同じですが、定期的にブログを書くようなものです。 デフォルトのデザインがショボい iframeでの表示や、決まった並びの表示で、SNSタイムラインです！という主張が強いデザインになりがちなので、この点をちゃんとページデザインに合わせて構築できるかどうかがコーディングスキルに掛かってきます。 iframeなどの場合は、デザイン変更は不可なので、そうならないAPIを選ぶ必要もあります。 SNSの仕様が変わりがち 最近だと会社ごと大きく変わった、Twitter -> Xは、それまで便利に使えていたAPIもログインをしていないと表示できないという制限がついてしまいました。（2024年7月現在） 他にも、数年前に大きな個人情報漏洩をなんどかやらかしてしまったFacebookは、Instagramも含めてAPIの制限を強めて、使いづらくなったし、 時代のセキュリティ犯罪に従って、APIは変化していくモノだという事を認識しておく必要があります。 ビジネス製品でのSNS連携ツールというのはありますが、便利なライブラリでのツールは今のところ無いようです。（自分が知らないだけかも）

SNSの種類について考える

たくさんあるSNSの中でどれを選ぶかというのも、一つWeb制作の大きな山場になります。 SNSの選別は次の表を参考にしてみてください。

X(旧Twitter)	140字という長文が苦手ですが、ニュース記事などに向いています。
Facebook	ビジネスアカウントとして使っている人も多く、比較的年齢を問わないメジャーSNS。ビジネスアカウントもあるので、運用はやりやすいかもしれません。
Instagram	女性が多く、画像を得意としているSNS、ポートフォリオなどで利用すると相乗効果が生まれるかも。
LinkedIn	日本国外のアカウントが圧倒的に多いのが特徴で、マルチ言語などのサイトには向いているかもしれません。
Pinterest	イラストや写真をシェアするサービスなので、デザインを売りにするWebサイトでの事例集などに向いています。
TikToc	比較的年齢層が低いユーザーの多いショート動画SNS。更新頻度が高い動画発信ができる場合にいいかもです。
Youtube	言わずとしれた、動画化け物サイト。セミナーや、解説をするマニュアル動画的なサイトで使うと効果的です。

他にもLINEや、WhatsUpなどのメジャーなSNSがたくさんありますが、データの取得方法でAPIが使えるか、スクレイピングなどやってもいいか、などのルールはそれぞれのサービスごとに違います。 事前にちゃんと規約を読んでおかないと、とんでもないしっぺ返しを喰らうかもしれないので、要注意です。

あとがき

今回は、今後のWebサイト制作で役立つかもしれないと思って、ブログにまとめて書いてみました。 具体的にどういうコードで書くのが効率的かというのを、対応可能なSNSに対して行っていく必要があるので、うまくできたSNSは随時ブログで紹介していきたいと思います。 ちなみに、これまで便利とされていたX(旧Twitter)は、ブラウザでログインをしていないと、2023年から読み込めなくなってしまったので、ホームページのお知らせでは使えなくなってしまいました。 ※裏技を見つけたら再検討したいと思いますが、X以外のSNSを使うしかなさそうですね。 最後にもう一つ考えたのは、独自でSNS的なAPIサービスを作るというのも考えましたが、APIの運用が裏でやるコストが発生するので、なんとも悩ましいところですね。 何にせよ、実践向けのコードを作ることが先決だと分かった今日のブログでした。