任意に告白してもらう話

3
いいね
0
コメント

kzbandai

2016年12月15日に投稿

最初に

この記事はカノジョできないエンジニア Advent Calendar 2016 15日目の記事です
察して下さい

告白してくれる相手を作れるようにする

告白してくれる相手を任意に作ることが出来るフォームを淡々と作りましょう

header

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

ruby-Sinatra

post '/create' do
    Girlfriend.create(name: params[:name], url: params[:url], script: params[:script])
    redirect '/'
end

submit-form

  <div class="container-fluid">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">好みの相手を追加する</h3>
      </div>
      <div class="panel-body">
        <form action="/create" method="post" id="frm">
        <p><label for="url">写真のURL</label>　<input type="url" name="url" id="url"></p>
        <p><label for="name">名前</label>　<input type="text" name="name" id="name"></p>
        <p><label for="name">しゃべってほしいテキスト</label>　<input type="text" name="script" id="script"></p>
        <input type="submit" value="追加" name="commit" class="btn btn-primary"></input>
        </form>
      </div>
    </div>
  </div>

告白してくれる相手を表示する

淡々と告白してくれる相手を表示するリストを作っていきましょう

ruby-Sinatra

get '/' do
    @girlfriends = Girlfriend.all
    erb :index
end

girlfriends-list

  <div class="container-fluid">
    <% @girlfriends.each do |girlfriend| %>
    <div class="col-sm-3" style="height: auto;">
      <div class="thumbnail" style="background-color: #F8F8F8; text-align: center;">
        <br />
        <img src="<%= girlfriend.url %>" alt="" class="img-thumbnail" style="height: 200px; width: auto;"/>
        <div class="caption">
          <h3><%=girlfriend.name %></h3>
          <br />
          <button class="kokuhaku btn btn-primary">告白してもらう！</button>
          <input type="hidden" name="script" value="<%= girlfriend.script %>">
        </div>
      </div>
    </div>
    <% end %>
  </div>

告白してくれる相手に声を宿す

「Web Speech API」を使って実際の声で告白してもらいます
- 気になる人はSpeechSynthesisUtterance とかでググって下さい

header

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

love-with-you

  <script>
    $('.kokuhaku').click(function(){
      var msg = new SpeechSynthesisUtterance($(this).next().val());

      msg.lang = "ja-JP";
      msg.rate = 1.2;
      msg.volume = 0.8;
      msg.pitch = 1.5;

      window.speechSynthesis.speak(msg);
    });
  </script>

ムードを作る

淡々と背景を設置します

<body style="background-image: url('/path/to/love.gif')">

告白してもらう相手を作る

きっとこのようなものが貴方の目の前に出来ているはずです

告白してほしい相手とセリフを淡々と入力します

この作業を淡々と繰り返します

告白してもらう

後は「告白してもらう！」ボタンを淡々と押すだけです
淡々と連打するとしばらく愛を囁いてくれます
- 飢えている人におすすめです

その他

DBなどは淡々とセットアップしてあげて下さい
画像upload機能を作る気力がなかったので画像のurlを保存という実装にしました
- それ故、画像直リンクになってしまうのでデモは公開してません
- 本当にサービスとして走らせたいなら画像upload機能を付けましょう
Mac以外では「Web Speech API」が上手く動くか確認していません
たったこれだけでアプリっぽくなるRuby:Sinatraは最高だと思いますが、僕が普段書いているのはPHPです

最後に

クリスマス　今年も彼女が　二次の中

## 最初に
- この記事は[カノジョできないエンジニア Advent Calendar 2016](http://qiita.com/advent-calendar/2016/no-girlfriend) 15日目の記事です
- 察して下さい

## 告白してくれる相手を作れるようにする

- 告白してくれる相手を任意に作ることが出来るフォームを淡々と作りましょう

```html:header
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
```

```ruby:ruby-Sinatra
post '/create' do
    Girlfriend.create(name: params[:name], url: params[:url], script: params[:script])
    redirect '/'
end
```

```html:submit-form
  <div class="container-fluid">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">好みの相手を追加する</h3>
      </div>
      <div class="panel-body">
        <form action="/create" method="post" id="frm">
        <p><label for="url">写真のURL</label>　<input type="url" name="url" id="url"></p>
        <p><label for="name">名前</label>　<input type="text" name="name" id="name"></p>
        <p><label for="name">しゃべってほしいテキスト</label>　<input type="text" name="script" id="script"></p>
        <input type="submit" value="追加" name="commit" class="btn btn-primary"></input>
        </form>
      </div>
    </div>
  </div>
```

## 告白してくれる相手を表示する

- 淡々と告白してくれる相手を表示するリストを作っていきましょう

```ruby:ruby-Sinatra
get '/' do
    @girlfriends = Girlfriend.all
    erb :index
end
```

```html+erb:girlfriends-list
  <div class="container-fluid">
    <% @girlfriends.each do |girlfriend| %>
    <div class="col-sm-3" style="height: auto;">
      <div class="thumbnail" style="background-color: #F8F8F8; text-align: center;">
        <br />
        <img src="<%= girlfriend.url %>" alt="" class="img-thumbnail" style="height: 200px; width: auto;"/>
        <div class="caption">
          <h3><%=girlfriend.name %></h3>
          <br />
          <button class="kokuhaku btn btn-primary">告白してもらう！</button>
          <input type="hidden" name="script" value="<%= girlfriend.script %>">
        </div>
      </div>
    </div>
    <% end %>
  </div>
```

## 告白してくれる相手に声を宿す
- 「Web Speech API」を使って実際の声で告白してもらいます
    - 気になる人は`SpeechSynthesisUtterance` とかでググって下さい

```html:header
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
```

```html:love-with-you
  <script>
    $('.kokuhaku').click(function(){
      var msg = new SpeechSynthesisUtterance($(this).next().val());

msg.lang = "ja-JP";
      msg.rate = 1.2;
      msg.volume = 0.8;
      msg.pitch = 1.5;

window.speechSynthesis.speak(msg);
    });
  </script>
```

## ムードを作る
- 淡々と背景を設置します

```html
<body style="background-image: url('/path/to/love.gif')">
```

## 告白してもらう相手を作る
- きっとこのようなものが貴方の目の前に出来ているはずです

![スクリーンショット 2016-12-05 1.36.18.png](https://qiita-image-store.s3.amazonaws.com/0/47258/a1c5b017-1c03-45c0-ed0f-1ed4429caf38.png)

- 告白してほしい相手とセリフを淡々と入力します

![スクリーンショット 2016-12-05 1.36.37.png](https://qiita-image-store.s3.amazonaws.com/0/47258/dd9c8965-17f8-5667-fffb-f7abadece1dd.png)

- この作業を淡々と繰り返します

## 告白してもらう

![スクリーンショット 2016-12-05 1.37.46.png](https://qiita-image-store.s3.amazonaws.com/0/47258/739b2365-8486-b1cf-9c95-25814e3444a9.png)

- 後は「告白してもらう！」ボタンを淡々と押すだけです
- 淡々と連打するとしばらく愛を囁いてくれます
    - 飢えている人におすすめです

## その他
- DBなどは淡々とセットアップしてあげて下さい
- 画像upload機能を作る気力がなかったので画像のurlを保存という実装にしました
    - それ故、画像直リンクになってしまうのでデモは公開してません
    - 本当にサービスとして走らせたいなら画像upload機能を付けましょう
- Mac以外では「Web Speech API」が上手く動くか確認していません
- たったこれだけでアプリっぽくなるRuby:Sinatraは最高だと思いますが、僕が普段書いているのはPHPです

## 最後に
- クリスマス　今年も彼女が　二次の中

kzbandai

96Contribution