paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。

logo

ITエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。

Notionドキュメントに埋め込むだけ!ミニアプリで機能強化できる「Apption」を使ってみた!

f:id:paiza:20201209121753j:plain
どうも、まさとらん(@0310lan)です!

今回は、万能ドキュメントサービスの「Notion」に埋め込み可能なミニアプリやツールなどを提供してくれるサービスをご紹介します。

「Notion」は自由度の高いドキュメント作成が可能ですが、手軽にネット上へ公開できるのでWebサイトやブログのような使い方もできることで知られています。そこでNotionドキュメントにメールフォーム、コメント、チャート、決済…など、さまざまな機能を埋め込んで機能強化をしてみましょう。

これからNotionを活用したい人も含めて、ぜひ参考にしてみてください!

Apption

f:id:paiza:20201209122012j:plain

「Apption」はドキュメントサービスの「Notion」と連携して利用するサービスになります。

「Notion」がどのようなサービスで、どんな使い方ができるのかについては以下の記事で詳しく解説していますので合わせて参考にしてみてください。

paiza.hatenablog.com

■「Apption」の使い方

それでは、「Apption」をどのように使えばいいのか詳しく見ていきましょう。

まずはサイトのトップページ上部にある【sign in】をクリックして無料のユーザー登録を済ませておきます。

f:id:paiza:20201209122105j:plain


ログイン画面が表示されたら【New user?】と書かれたリンクをクリックします。

f:id:paiza:20201209122127j:plain


ユーザー登録フォームが表示されるので、メールアドレスやパスワードなどを設定しましょう。

f:id:paiza:20201209122141j:plain


登録後にサイトのトップページに戻ったら、画面上部に表示されている自分のユーザー名をクリックしてください。

f:id:paiza:20201209122154j:plain


すると、専用のダッシュボードが表示されます!

f:id:paiza:20201209122211j:plain

この画面からNotionに埋め込んだツールの管理ができるようになっています。

■Notionにメールフォームを埋め込む

それでは「Apption」を利用して、さまざまな機能をNotionに追加できるアプリを試してみましょう!

まずは、シンプルなメールフォームをNotionドキュメントに埋め込んでみます。今回は簡単なメルマガ登録フォームを作ってみましょう。


最初にNotionから新規のドキュメントを作成して、そのURLをコピーしておきましょう。

f:id:paiza:20201209122238j:plain


次に「Apption」のダッシュボードから、【MailForm】を選択して【Create New】ボタンをクリックします。

f:id:paiza:20201209122329j:plain


さきほどコピーしておいたNotionドキュメントのURLを一番上に貼り付けます。

f:id:paiza:20201209122342j:plain

他にもタイトルなどの必要事項を入力したら画面下部の【Create】ボタンをクリックします。


埋め込み用のURLが自動生成されるのでコピーしておきます。

f:id:paiza:20201209122356j:plain


Notionのドキュメントに戻り、さきほどコピーしたURLを貼り付けて【Create embed】を選択しましょう。

f:id:paiza:20201209122409j:plain


すると、メールフォーム(メルマガ登録フォーム)が表示されます!

f:id:paiza:20201209122435j:plain


あとは、Notionの【Share】ボタンからこのドキュメントをネット上に公開すればOK!

f:id:paiza:20201209122446j:plain

これで不特定多数の人がメルマガに登録できるようになったわけです。


ちなみに、このメールフォームを利用して登録されたユーザーは「Apption」のダッシュボードから確認できます。

【See all】ボタンをクリックしてみましょう!

f:id:paiza:20201209122503j:plain


登録されたユーザーの情報がリストで表示されます。

f:id:paiza:20201209122623j:plain

CSV形式のファイルとして書き出すこともできるので便利です。

■ユーザー参加型のコメント機能を埋め込む

さきほどと同じ要領で、今度は誰でも投稿できるコメント機能をNotionドキュメントに埋め込んでみましょう。

「Apption」のダッシュボードから【Post(Comment)】を選択して【Create New】ボタンをクリックします。

f:id:paiza:20201209122642j:plain


コメント機能を埋め込むNotionドキュメントのURLを貼り付けて【Create】ボタンをクリックします。

f:id:paiza:20201209122652j:plain


埋め込み用のURLが自動生成されるのでコピーしましょう。

f:id:paiza:20201209122731j:plain


NotionのドキュメントにURLを貼り付けて【Create embed】を選択します。

f:id:paiza:20201209122741j:plain


すると、誰でも書き込めるコメント機能が作成できます!

f:id:paiza:20201209122752j:plain


この機能は、たとえばNotionドキュメントでブログのような記事を作成して公開する際に、訪問ユーザーが気軽にコメントするようなケースでも使えるでしょう。

f:id:paiza:20201209122808j:plain

書き込まれたコメントについては、「Apption」のダッシュボードから個別に削除することも可能です。


ちなみに、テーマカラーも選択可能で以下のように「light」「dark」を選ぶこともできます。

f:id:paiza:20201209122821j:plain

他にも「Apption」を使うと、自作のHTMLをNotionドキュメントに埋め込むような機能もあります。

■さまざまなWebアプリ・サービスを埋め込む

「Apption」には、独自のミニアプリ以外にもさまざまなサードパーティのアプリ・サービスが一緒に公開されています。

f:id:paiza:20201209122842j:plain

これらの多彩なサービスが提供する機能をNotionドキュメントに埋め込む方法も解説されているので、どのようなものがあるのか合わせてご紹介しておきます。


たとえば、「24 timezones」を使うとNotionドキュメントにインタラクティブな時計を埋め込むことができます。

f:id:paiza:20201209122859j:plain

複数の時計を設置可能なので、世界中の現在時刻を一覧表示するような使い方もできます。


「WeatherWidget」を使うと、1週間分の天気予報を可視化できるボードを埋め込めます。

f:id:paiza:20201209122927j:plain


「Notion Charts」を使うと、好きなグラフ・チャートをNotionドキュメントに埋め込めるので便利です。

f:id:paiza:20201209122942j:plain

データはGoogleスプレッドシートと連携可能なので、グラフ・チャートの編集・更新も手軽におこなえます。


また、人気のWebサービスを使うことも可能で、たとえば「Paypal」を利用して決済ボタンをNotionドキュメントに埋め込むことができます。

f:id:paiza:20201209122955j:plain


「Airtable」を利用すれば、独自にデータベース化したテーブルをNotionドキュメントの記事と一緒に埋め込むことも可能です。

f:id:paiza:20201209123010j:plain

他にも、Spotify、YouTube、CodePen、Intercom、各種SNSの投稿…など、非常に幅広いサービスが提供する機能をNotionドキュメントに埋め込むことができます。

これらの機能をうまく活用することで、Notionは単純なドキュメントページだけでなく、本格的なWebサイトとしてネット上に公開できるようになるでしょう。

■動画&ゲームでプログラミングが学べるpaizaラーニング


動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。

Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。

また、paizaでは『コードクロニクル』をはじめゲームで楽しくプログラミングを学べるコンテンツもご用意しています。ぜひプレイしてみてください!


■まとめ

今回はドキュメントサービスの「Notion」に埋め込み可能なミニアプリやツールを提供するサービスについてご紹介しました。

最近はNotionドキュメントにさまざまな機能を埋め込むのが海外では人気になっており、多彩なアイコンであったり、Googleアナリティクスによる分析であったり、インタラクティブなマインドマップなども埋め込み可能です。

Notionを使ったドキュメント作成はもちろんですが、Webサイトやブログの代わりとして、みなさんも独自の情報発信ツールを構築してみてはいかがでしょうか。


<参考リンク>




paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら
paizaラーニング

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら
paizaのスキルチェック

paizaのおすすめコンテンツ

Webセキュリティ入門 ハッカー入門 Webセキュリティ講座がスタート!CVは内田真礼さん! Python✕AI 機械学習入門講座 CVに上坂すみれさんを起用!人気の機械学習講座を公開中!
paiza転職 paiza新卒 EN:TRY paizaラーニング 記事内に記載している情報は、記事公開時点でのものとなります。 Copyright Paiza, Inc, All rights reserved.