Cloudflare Appsはどれも簡単に使えますので、紹介します!
Cloudflare Appsとは
こちらのドキュメントによると
クラウドフレアのネットワーク上にある900万ものウェブサイトのいずれかにインストールできるソフトウェアです。Cloudflareアプリを構築する場合、ユーザーは当社のネットワーク上のあらゆるウェブサイトの所有者となります。ここでは簡略化のため、これらのウェブサイトの所有者を「ユーザー」または「顧客」と呼ぶことにします。 開発者は、ユーザーのサイトのリクエストやコンテンツを変更することで、サービスやSaaS製品、ツールを共有することができます。これは、非常に強力な可能性を持っています。JS/HTML/CSSインジェクション、DNSなどのCloudflareの機能の変更などです。ライブプレビューでは、Webサイトの所有者は、ニーズに合わせてアプリをカスタマイズするためのオプションをインストールできます。 (DeepLによる翻訳)
「ウェブサイトにインストールできるソフトウェア」ということなのですが、難しいインストール作業が必要なわけではなく、Cloudflareの管理画面で有効化するだけで利用できます。(すごい!)
私が使用したCloudflare Apps
私が使用したCloudflare Appsを3つ紹介します。
- AddToAny Share Buttons
- Back To Top Button
- PACE
1. AddToAny Share Buttons
各種SNSのシェアボタンを表示することができます。画面左中央に表示されている3つのアイコンがCloudflare Appsで実現しています。
すごいことに、スマホで見た場合は画面下部に並びます。
これが自分のブログサイト上には一切手を入れずに実現できています!(すごい!)
とても簡単にシェアボタンの実装ができました
2. Back To Top Button
次はページの最上段にスクロールしてくれるボタンです。画面右下のボタンです。
ページ最上段表示中にはボタンは表示されず、少し画面がスクロールしてから表示されます!(すごい!)
人のサイトにも導入したいぐらい便利です(笑)
3. PACE
最後のPACEはページ読み込み中に最上部にプログレスバーを表示してくれます。 キャプチャが上手に取れませんでした。。実際に画面遷移してお試しくださいm(_ _)m
特になくても困りませんがつけてみました
以上の3つが私のブログで使用しているCloudflare Appsです。自力で実装すれば実現できそうなミニ機能ではありますが、これを後付けで追加できるのがCloudflare Appsのいいところです。
Cloudflare Appsの使い方
画面キャプチャを使用して解説していきます。 まず、Cloudflareの管理画面を開き、左メニューのAppsを選択します。
ここでAppsを探します。今回は、「Welcome Bar」というAppsを選択しました。
iPhoneのApp StoreやAndroidのGoogle Playストアのように開発者やサポート連絡先の情報もあります。このAppsはCloudflareが作ったもののようです。
アプリをインストールする前に、まず「プレビュー」ボタンを押して、自分のサイトにお試しで適用することができます。 右側に私のブログが表示され、ページ上段に「We just launched an amaging new product! MORE INFO >」と表示されています。この部分がAppsで実現されています。左ペインを見ると無料プラント有料プランが有り、表示するメッセージなどもカスタマイズができます。
カスタマイズが終わったら、画面下段の「Install on all pages」のボタンをクリックするとインストール(全ページに適用)が実施されます。 どうですか、簡単でしょ!(すごい!)
インストールもとても簡単にできました
使ってないけど良さそうなAppsの紹介
PayPal
PayPalで入金(送金?)ができるようになります。なにか売るものがあればどんどん売っちゃいましょう。
Facebook Comments
Facebookのコメントが追加できます。 (何故か韓国語だし、フッターよりも下に表示されて残念な感じ。。) ※挿入場所はカスタマイズが可能です。
Countdown
指定した日付までのカウントダウンを表示してくれます。ワクワクしてサイトに来てもらえそうですね
Google Translate
Google翻訳を追加できます。最近はブラウザの機能で翻訳ができるので、あまり活用の必要はないかもしれません。
Cover Message
モーダルでメッセージが表示できます。メールアドレスの入力を要求するものから、単純なメッセージ表示までできます。メールアドレスを入力して貰う場合は、登録した管理者のメールアドレス宛に収集したメールアドレレスが送信される仕組みのようです。
どのAppも一切自分のサイトにコードを追加しなくても導入できるってすごいですね
以上、Cloudflare Appsの紹介でした。