メインコンテンツまでスキップ

おすすめのCloudflare Appsを紹介します!

· 約7分
moritalous

Cloudflare Appsはどれも簡単に使えますので、紹介します!

Cloudflare Appsとは

こちらのドキュメントによると

クラウドフレアのネットワーク上にある900万ものウェブサイトのいずれかにインストールできるソフトウェアです。Cloudflareアプリを構築する場合、ユーザーは当社のネットワーク上のあらゆるウェブサイトの所有者となります。ここでは簡略化のため、これらのウェブサイトの所有者を「ユーザー」または「顧客」と呼ぶことにします。 開発者は、ユーザーのサイトのリクエストやコンテンツを変更することで、サービスやSaaS製品、ツールを共有することができます。これは、非常に強力な可能性を持っています。JS/HTML/CSSインジェクション、DNSなどのCloudflareの機能の変更などです。ライブプレビューでは、Webサイトの所有者は、ニーズに合わせてアプリをカスタマイズするためのオプションをインストールできます。 (DeepLによる翻訳)

「ウェブサイトにインストールできるソフトウェア」ということなのですが、難しいインストール作業が必要なわけではなく、Cloudflareの管理画面で有効化するだけで利用できます。(すごい!)

私が使用したCloudflare Apps

私が使用したCloudflare Appsを3つ紹介します。

  1. AddToAny Share Buttons
  2. Back To Top Button
  3. PACE

1. AddToAny Share Buttons

各種SNSのシェアボタンを表示することができます。画面左中央に表示されている3つのアイコンがCloudflare Appsで実現しています。

image.png

すごいことに、スマホで見た場合は画面下部に並びます。

image.png

これが自分のブログサイト上には一切手を入れずに実現できています!(すごい!)

注記

とても簡単にシェアボタンの実装ができました

2. Back To Top Button

次はページの最上段にスクロールしてくれるボタンです。画面右下のボタンです。

image.png

ページ最上段表示中にはボタンは表示されず、少し画面がスクロールしてから表示されます!(すごい!)

注記

人のサイトにも導入したいぐらい便利です(笑)

3. PACE

最後のPACEはページ読み込み中に最上部にプログレスバーを表示してくれます。 キャプチャが上手に取れませんでした。。実際に画面遷移してお試しくださいm(_ _)m

注記

特になくても困りませんがつけてみました

以上の3つが私のブログで使用しているCloudflare Appsです。自力で実装すれば実現できそうなミニ機能ではありますが、これを後付けで追加できるのがCloudflare Appsのいいところです。

Cloudflare Appsの使い方

画面キャプチャを使用して解説していきます。 まず、Cloudflareの管理画面を開き、左メニューのAppsを選択します。

image.png

ここでAppsを探します。今回は、「Welcome Bar」というAppsを選択しました。

image.png

iPhoneのApp StoreやAndroidのGoogle Playストアのように開発者やサポート連絡先の情報もあります。このAppsはCloudflareが作ったもののようです。

image.png

アプリをインストールする前に、まず「プレビュー」ボタンを押して、自分のサイトにお試しで適用することができます。 右側に私のブログが表示され、ページ上段に「We just launched an amaging new product! MORE INFO >」と表示されています。この部分がAppsで実現されています。左ペインを見ると無料プラント有料プランが有り、表示するメッセージなどもカスタマイズができます。

image.png

カスタマイズが終わったら、画面下段の「Install on all pages」のボタンをクリックするとインストール(全ページに適用)が実施されます。 どうですか、簡単でしょ!(すごい!)

注記

インストールもとても簡単にできました

使ってないけど良さそうなAppsの紹介

PayPal

PayPalで入金(送金?)ができるようになります。なにか売るものがあればどんどん売っちゃいましょう。

image.png

Facebook Comments

Facebookのコメントが追加できます。 (何故か韓国語だし、フッターよりも下に表示されて残念な感じ。。) ※挿入場所はカスタマイズが可能です。

image.png

Countdown

指定した日付までのカウントダウンを表示してくれます。ワクワクしてサイトに来てもらえそうですね

image.png

Google Translate

Google翻訳を追加できます。最近はブラウザの機能で翻訳ができるので、あまり活用の必要はないかもしれません。

image.png

Cover Message

モーダルでメッセージが表示できます。メールアドレスの入力を要求するものから、単純なメッセージ表示までできます。メールアドレスを入力して貰う場合は、登録した管理者のメールアドレス宛に収集したメールアドレレスが送信される仕組みのようです。

image.png

注記

どのAppも一切自分のサイトにコードを追加しなくても導入できるってすごいですね

以上、Cloudflare Appsの紹介でした。