これまで、Web制作の作業で、お問い合わせにGoogleBloggerを使って、サーバーでのメール送信などしなくてもいいし、
サーバー自体も、ほぼ0円で運用できる（しかも独自ドメインで）、
ニュース更新やそれぞれのページ更新に関しても、GoogleBloggerを使って、まるでWordPressのように管理して運用できる方法を解説してきましたが、
（興味あるけど知らない人は、過去記事参照してみてください。）
GoogleBloggerのFeed取得のみ、Javascript + fetch（または、XMLHttpRequest）で処理した時に、CORSセキュリティエラーで、想定した取得ができなかったので、
PHPなどのサーバーサイドスクリプト経由で行っていましたが、この度、JavascriptのみでGoogleBloggerを便利に取得して、まるでサイト内の記事として扱うことができるようになる方法（裏技？）を見つけたので、惜しみなくブログで解説したいと思います。
安価Webサイトについての知識
とりあえず、これまで、このブログで解説してきた、安価なホームページ構築について、簡単にまとめてみます。
サーバーセキュリティの注意点
GoogleBloggerは、ブログを書くシステムとして、一昔前にGoogleが公開して、世界中で使われていますが、WordPressの方が圧倒的に利用ユーザーが多いのが現実です。
だって、管理画面もあるし、プラグインも豊富だし、そもそもWeb制作会社に相談したら99%ぐらいの確率でWordPressを薦められるからなんです。
でも、WordPressはPHPが動作するサーバーを準備するために、どこかしらのWebサーバーレンタルをするしかありません。
大規模なサイトを立ち上げるにせよ、小さくて安価なサイトを立ち上げるにせよ、WordPressという選択肢は個人的にはあまりオススメしません。
何故なら脆弱性がハンパないからです。
サーバー0円の便利技
そして、なんとGoogleBloggerは、独自ドメインの切り替えも自由にできる上、どんだけ利用しても、0円という無課金ユーザーにはヨダレが出るサービスだったのです。
もちろん、WordPressと比べて、圧倒的に設置難易度が高く、十分にコントロールできるエンジニアは日本でおそらく数人しかいないでしょう。
でも、0円で運用ができるので、制作費にお金を掛けることも可能になるので、数少ないWeb制作会社に頼むほうがいいかもしれませんね。
ちなみに、エンジニアリングとして勉強してみたい人は、このブログの過去記事
過去記事一覧 :
カンタンBlogger
電子書籍でも販売しています。
お問い合わせの便利技
企業のWebサイトを作る時に結構面倒くさいのが、お問い合わせフォームです。
メール送信機能を設けるために、それ相応のサーバーを準備しなければいけません。
残念ながら、GoogleBloggerには、メール送信機能などはありません。
でも、GoogleFormを使えばメール送信機能など無しに、データ管理をしてくれるし、スプレッドシートでのログ管理から、GASを使ってのメール送信など、想定のことはほぼ行えてしまいます。
ただ、IFRAMEでページ内にGoogleFormを埋め込む程度しか知らないWeb制作会社も多い中、デザインを独自仕様で構築できる方法を過去にこのブログで何度か紹介してきました。
過去記事 :
これは便利、CGIを一切使わずにformデータが収集できる、Google form活用方法
CGIが使えない静的Webサイトで管理画面を保つ方法
GoogleBloggerには、BloggerAPIという機能が備え付けられており、このブログを書いている時点でver3.0です。
ver1.0とver2.0は、すでに終了しているため、サービスとしても使えない状態なので、ネットで検索すると、これらの情報ばかりでうんざりします。
そして、お察しの通り、ver3.0も寿命があるのではないかと推測しているので、このAPIは使わないほうが良さそうというのが、個人的見解です。
ではどうやってHTMlページとBloggerをつなぎ合わせるのかと言うと、RSSのFEEDアクセスという方法でデータを取得します。
ヒントは、APIのリファレンスページにありました。
Blogger API: スタートガイド
ここに書かれているコードを実行すると、Bloggerのデータが得られます。
<html>
<head>
<title>Blogger API Example</title>
</head>
<body>
<div id="content"></div>
<script>
function handleResponse(response) {
document.getElementById("content").innerHTML += "<h1>" + response.title + "</h1>" + response.content;
}
</script>
<script
src="https://www.googleapis.com/blogger/v3/blogs/3213900/posts/8398240586497962757?callback=handleResponse&key=YOUR-API-KEY"></script>
</body>
</html>
でも、API-KEYが無いとデータが取得できません。
この方式は、JSONPという方式でかなり昔からJavascriptで実装できる裏技のような機能ですが、れっきとしたWebAPIとしても利用できます。
実際にFacebookなどは、こうした独自のAPIの塊で動いているサイトでもありますからね。
話が逸れましたが、上記のリファレンスコードのURL部分をFEEDのURLに変えると、ちゃんとページ内にデータがエラー無しで読み込まれることは確認できました。
そこで気がついたのは、
callback=というGETクエリがURLについていて、これはGoogleは、ほとんどのURLアクセスでこのcallback機能を設けているのではないかと推測して、FEEDのURLにcallbackを付けて上記と似たテストコードを書いてみました。
すると・・・なんということでしょう・・・見事callback関数に、FEEDデータが受け流されてくるではありませんか・・・
OMG!!!
という事で、FEEDのURLの仕組みをりかいできれば、GoogleBloggerをまるでページのデータベースのように使うことができるようになります。
ちなみに、このブログページへのFEEDアクセスしたい場合は以下のように書きます。
<html>
<head>
<title>Blogger API Example</title>
</head>
<body>
<div id="content"></div>
<script>
function res(res) {
console.log(res)
}
</script>
<script
src="https://blog.myntinc.com/feeds/posts/default?alt=json"></script>
</body>
</html>
どうです？カンタンでしょ？
自身のソースコードの関数をコールバックに与えれば良いんですが、class内の関数の場合は、グローバル関数を経由して処理を継続する必要があるので、少しテクニックが必要になる場合もありますが、さほど難しくないでしょう。
※どうしてもううまくいかない人は、ご連絡いただければサポートさせていただきます。
Bloggerをデータベースのように使うコツ
今回は具体的なコードは書きませんが、使い方ポイントを列挙したいと思います。
ちなみに、以下の情報は全てFEEDで個別に取得することが可能です。
Webサイトの小階層ページの構築
GoogleBloggerのページ機能を使って、ページ内容のみをBlogger記事で構築する。
ページのヘッダとフッタは、サイト側のHTMLで記述しておいて、内部のコンテンツ部分のみを切り替えれば、Webサイトはそれっぽく構築できます。
よほど独自の仕様で小階層ページを作るのでなければ、Blogger管理の小階層が非常に扱いやすくなることは容易に理解できると思います。
ニュース記事の登録
Bloggerのブログ記事で、ラベルにnewsとつけることで、ラベル検索にて一覧取得することができます。
注意点としては、上限が150件までしか読み込めないので、多くのリストが想定される場合は、ページ送りするとか、コンティニューロードのような処理をすることで対応は可能です。
（BloggerのクエリオプションとURLを理解できると、1回の取得上限が無くなるようです。）
JSONデータなどの格納
ニュースと同じ原理ですが、ラベルにjsonと付けて、個別（または検索）で呼び込むことで、任意のjsonデータをBlogger上で保管管理することができます。
本来なら、スプレッドシートを使いたいところですが、この点はまだ調査中なので、まだ手を出さないようにしています。
カレンダー表示
イベントサイトなどを作る時は、Googleカレンダーをiframeで埋め込んで、リアルタイムな情報を提供することができます。
でも、これも、デザイン変更が今のところ難しいので、裏技見つけて対応したいと考えていますので、期待して待っていてください。
ユーザーの入力情報の保持
お問い合わせフォームと同じ方法で、GoogleFormを使って、いろいろなデータをスプレッドシートに格納することができます。
あとがき
今回、FEEDの読み込みができるようになったことで、実際に仕事で大口のWebサイト制作をすることができました。
その会社のサイトでは、セキュリティとして、CGIが一切使えないいわゆる、HTMLだけのWebサイトだったのです。
ニュースをどうやって埋め込むのかサーバー管理者に聞いたところ、「インラインフレーム(iframe）で埋め込めばいいじゃん」と言われたので、「クソが！！」と思いつつ、「別の方法を試します」という事で、今回のFEED読み込み機能で対応することができました。
でも、今回紹介した、安価なホームページは、あくまで小規模なサイトまたは、今後大規模になるかもしれないスタート時点でのモックアップサイト程度で使うのが望ましいでしょう。
それぞれのAPIには、上限値というのがあるので、大規模サイトでこれらのWebサイト構築をしたら、途端にサービス停止になるか、バンされてしまう可能性があります。
それぞれのリファレンスを読み込む必要もあるので、こうした点はめんどくさがらずにやるのがエンジニアですよ。
そんなわけで、まだ課題はありますが、一通りのWeb構築が今回できたというご報告でした。
0 件のコメント:
コメントを投稿