こんにちは!
アインシュタインの「価値のある人間とは、どれだけ人を幸せにしたか。」名言が好きなミーハーです。

ミーハー
ミーハー
今回は、しゃべる名言サイトを製作しましたので、紹介します。

制作概要

制作した目的

  • Webスピーチを使った名言サイトがなかったから。
  • みんなで共有できる名言をまとめたかったから。
  • 聞き流しできる名言を聞きたかったから。

サイトでできること

全ユーザー

  • 管理者が登録した名言の閲覧
  • 名言のWebスピーチ

会員限定

  • しゃべる速さ・声質変更
  • 名言登録・修正・削除
  • みんなが作った名言の閲覧

使用言語

  • HTML
  • SCSS
  • jQuery
  • JavaScript
  • PHP
  • SQL

サイトの説明

トップページ

しゃべる名言サイト

タイトル「しゃべる名言サイト」の下の名言はランダムで出てきます。

今回はイチロー選手の名言が出てきました!!

赤〇の再生ボタンをクリックすると、標記の名言を読み上げ、読み上げ後はランダムで名言が切り替わり、それをまた読み上げます。停止ボタンをクリックするか、ページを切り替えると読み上げが終了します。

進ボタンを押すと名言が切り替わります。読み上げはされません。

音の速さと声質はログインすれば変更可能です。同じ声で聴いてくると飽きてくるんですよね(笑)

検索は、カテゴリーからセレクトもしくは、検索バーに文字を入力後検索ボタンを押してください。

検索ページ

しゃべる名言サイト|プログラマー3

カテゴリーの発明家を選択し、エジソンと入力して検索した画面です。

この画面で再生ボタンを押すと、エジソンだけの名言を繰り返します。

シングルページに移動

しゃべる名言サイト|プログラマー3

任意の名言(青文字)をクリックすると、一つの名言ページに移動します。

ここで再生ボタンを押すと、同じ名言を繰り返し読み上げます。

ログイン後トップページ

しゃべる名言サイト会員ページ

ログインユーザーは、自分だけの名言を作成することができます。左下の私がセレクトされている状態であれば、自分が作成した名言が表示されます。

そのほかに、「みんな」と「デフォルト」を選択し検索すると、前者は、全ユーザーが登録した名言。後者は、ログイン前の名言が表示されます。

名言を登録していない場合は上記画面の通り、「人生楽観的に」が表示されます。

しゃべる名言サイトフッターPC版
しゃべる名言サイトフッタースマホ版

サイトの一番下に表示してあるボタンで登録や修正画面に移動します。

ログイン前にもボタンは表示してありますが、ボタンを押すとホーム画面に戻るシステムになっています。

名言新規登録

しゃべる名言サイト|ミーハー

名言テキストエリアに好きな名言を入力してください。

著名人はユーザー名になっています。修正不可です。ユーザー名はアカウント設定から変更可能です。

共有セレクトは、「しない」と「する」があり、前者は他のユーザーにみられることはありません。後者は全ユーザーが見ることができます。後からでも修正できます。

登録ボタンを押して、登録してください。

修正削除

プログラマー3しゃべる名言サイト

チェックボタンを押し、修正or削除を押してください。

最後に

このサイトをつかって、偉人たちの名言を聞き流ししています。

その名言を聞いて、モチベーションを上げています!

ユーザーが登録した名言を聞くのが楽しみです。

名言登録お願いします(⌒∇⌒)

しゃべる名言サイトはこちら

ミーハー
ミーハー
以上。Webサイト紹介ブログでした。