paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

1行のコードでWebサイトやブログに音声コメント機能を設置できる「Heyoya」を使ってみた!

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

今回は、自分のWebサイトやブログなどへ誰でも簡単に音声が録音できるボイスコメントを設置できるサービスのご紹介です!

生成される1行のコードをHTMLにコピペするだけなので、初心者でも簡単に導入することができるスグレモノです。

テキストや画像なども追加可能で、通知なども送信できるのでご興味ある方はぜひ参考にしてみてください!

Heyoya

f:id:paiza:20180801114855j:plain

 

■ 「Heyoya」の使い方

それでは、「Heyoya」を実際に使いながらどのようなサービスなのかを見ていきましょう!

まずは、サイトのトップページにアクセスして画面中央のボタンをクリックします。

f:id:paiza:20180801115543j:plain


無料のユーザー登録を済ませておきましょう!

f:id:paiza:20180801115628j:plain

ちなみに、Webサイト作成サービスのWeeblyやWix、WordPressなどを使っている人は画面右側のリンクからさらに簡単な導入が可能です。


ユーザー登録を済ませたら「導入ステップ」の画面が表示されます!

f:id:paiza:20180801115947j:plain

ここから4つのステップを踏むことで、誰でも簡単に自分のWebサイトやブログなどへ「ボイスコメント」を導入できるようになります。

■「ボイスコメント」をサイトに設置してみよう!

早速ですが、Webサイトに「ボイスコメント」を設置していきましょう!

導入ステップでは、最初に「ステップ1」が表示されているはずなので画面左側の項目をクリックします。

f:id:paiza:20180801120300j:plain


次に、「ステップ2」のオプション設定画面が表示されます。

f:id:paiza:20180801120330j:plain

ここで「ボイスコメント」の挙動を編集したりテキストの日本語化などを行えます。

詳細はのちほど解説するので、今はそのまま「CONTINUE」ボタンをクリックして次のステップに進みましょう!


「ステップ3」では、ボイスコメントのUIデザインやテーマカラーなどをカスタマイズできます。

f:id:paiza:20180801120344j:plain

(こちらもそのまま次のステップに進んで構いません…)


そして、最後の「ステップ4」ではWebサイトにボイスコメントを設置するための「埋め込みコード」が表示されるのでコピーしておきましょう!

f:id:paiza:20180801121615j:plain


WebサイトのHTMLファイルを開いて、ボイスコメントを表示したい箇所にコピーしたコードを貼り付けるだけで導入は完了です!

f:id:paiza:20180801120411j:plain


ブラウザで表示してみると、見事にボイスコメントが表示されているのが分かります!

f:id:paiza:20180801120426j:plain

すでに、このまま音声を記録して投稿することが可能な状態になっています!

■「ボイスコメント」を投稿してみよう!

ここからは、音声による「ボイスコメント」の投稿方法について見ていきましょう!

投稿方法はすごくシンプルで「マイク」のアイコンをクリックするだけです。

f:id:paiza:20180801120453j:plain


すぐに録音が始まるので好きなことを話してみましょう!(30秒の録音が可能)

f:id:paiza:20180801120502j:plain

ちなみに、PCはもちろんのことスマホのブラウザにも最適化されているので、マイクに向かって喋るだけでどこでも音声を録音できます。


さらに、音声だけでなく「テキスト」や「画像」などを一緒に追加することも可能です!

f:id:paiza:20180801120516j:plain

実は、「Heyoya」のボイスコメントは音声だけでなく通常のコメント欄のようにテキストだけの投稿でも構わないのが特徴でもあります。


そして、「Continue」ボタンをクリックします。

f:id:paiza:20180801120528j:plain


コメントの「①タイトル」「②名前・メールアドレス」を入力したら、最後に「③Post」ボタンをクリックして投稿完了です!

f:id:paiza:20180801120540j:plain

入力したメールアドレス宛に確認メールが送られてくるので、文章内に記載のリンクをクリックして承認済みにしておきましょう。
(※SNSと連携して簡単に投稿することも可能です…)


最終的に、投稿したコメントは以下のように表示されます!

f:id:paiza:20180801120554j:plain

もちろん、再生ボタンをクリックすれば音声が流れますし、リプライボタンから返信を音声やテキストで投稿することも可能です。


また、生成されたリンクボタンをクリックすると「Heyoya」が提供する専用サイトにアクセスすることも可能です!

f:id:paiza:20180801120608j:plain

このページでは、自分のボイスコメントを再生したりテキスト・画像などを閲覧することができます。

つまり、このリンクを利用すれば自分のボイスコメントだけをシェアすることもできるわけですね。


「Heyoya」のサイト上には、誰でもすぐ利用できるボイスコメントのデモが用意されているので、まずは試してみたいという方はぜひやってみてください!

【 ボイスコメントのサンプルデモ | Heyoya.com 】

 

■「ボイスコメント」を使いやすくカスタマイズしよう!

「Heyoya」はさまざまなカスタマイズオプションを提供しているので、いくつかピックアップしてご紹介しておきます!

まずは、ステップ2の「Settings」タブをクリックします。

f:id:paiza:20180801120647j:plain

ここでは、主にボイスコメントの日本語化を行ってみましょう!


まず、「①言語設定」を日本語にしてから、コメントUIに表示される「②テキスト」などを任意の文字列に置き換えます。

f:id:paiza:20180801120716j:plain

画面右側のプレビューで現在の状態を確認しながら作業すると便利でしょう。


さらに、ボイスコメントの承認設定も可能です!

f:id:paiza:20180801121041j:plain

「①リンク設定」は、コメント内にリンクを記述している場合に自動で投稿可能にするか、管理者が確認をした後に投稿するかを選択することができます。

同じように、「②メール設定」や「③同じ文字列の連続入力」がコメント内に記述されている場合に、自動投稿か確認後に投稿かを選べるようになります。


「Design」タブでは、ボイスコメントの「①背景色・透明度」「②横幅のサイズ」「③テーマカラー」などをカスタマイズできます。

f:id:paiza:20180801121058j:plain

カラー配色に関しては、文字・ボタン・ヘッダー・リンク…など細かい調整が可能なのでサイトのイメージに合わせたボイスコメントを作ることができるでしょう。


以下は、カスタマイズしたサンプル例です。

f:id:paiza:20180801121113j:plain

海外サービスでは珍しくデフォルトで日本語が用意されているのは嬉しいところです。

■その他、便利な機能について!

「Heyoya」では、コメントの運用を便利にするいくつかの機能が用意されているので合わせてご紹介しておきます!

例えば、「Comments」メニューを開くとこれまで投稿された「コメント一覧」がリストで表示されます。

f:id:paiza:20180801121136j:plain

どのようなユーザーからコメントが投稿されているかを把握するのに最適で、コメントの承認待ち状態も確認することができます。

「承認待ち」状態だとコメントは投稿されないので、管理者の判断でいつでもコメントを投稿するかどうかを決定することが可能です。(スパム判定もできます)


また、ユニークな機能としては「Advanced」メニューから「Notifications」を選択すると、任意の通知を送信することができます!

f:id:paiza:20180801121150j:plain

通知したい内容を入力して登録するだけの簡単操作です。


通知が送信されると、ボイスコメントの「通知アイコン」にお知らせが届きます!

f:id:paiza:20180801121208j:plain


クリックすると、入力した内容が表示されるという仕組みです!

f:id:paiza:20180801121224j:plain

リンクを追加したり時間指定による通知にも対応しているので、アイデア次第で活用範囲は広いと言えるでしょう。

■まとめ

今回は、ブログやサイトへ簡単にボイスコメントを設置できるサービス「Heyoya」を駆け足でご紹介しました!

まだ新しいサービスなので、現在も新機能や改善が活発に行われています。また、有料プランに切り替えると30秒から1分間の録音ができたり、コメントのダウンロードや高度な承認設定なども行えます。

自分のブログやサイトにコメント機能を設置しようと考えている人は、ぜひ一度トライしてみてください!


<参考>

■動画でプログラミングが学べるpaizaラーニングPython×AI・機械学習入門編が登場!


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

そしてこのたび、新たに「Python×AI・機械学習入門編」が追加されました。

人気声優の上坂すみれさんによる進行役のスベトラーナ・小百合・ベレフスカヤと一緒に、実際に画像認識技術を使いながら、初心者でも機械学習を体験・学習できるレッスン内容になっています。

Python×AI・機械学習入門編は全編無料でごらんいただけます。詳しくはこちら



 

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

詳しくはこちら

paizaラーニング

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

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

詳しくはこちら

paizaのスキルチェック





※このブログで紹介しているキャンペーンやイベント、およびサイト内の情報については、すべて記事公開時の情報となります。閲覧されたタイミングによっては状況が変わっている場合もございますのでご了承ください。

ITプログラマー・エンジニア転職・就活・学習のpaiza

プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編

エンジニアのためのプログラミング転職サイト|paiza転職

プログラミング スキルチェックエンジニア求人一覧

未経験からエンジニアを目指す人の転職サイト|EN:TRY

プログラミング スキルチェックエンジニア未経験可求人一覧

エンジニアを目指す学生の就活サイト|paiza新卒

プログラミング スキルチェックエンジニア求人一覧

ブラウザを開くだけで エディタ、Webサーバ、DB等の開発環境が整う|PaizaCloud