Angular jsとBootstrapでLINE風チャットを作成してみました

エンジニアの土屋と申します。 今回は、angular jsでLINE風チャットを作成してみました。 アプリでは…

エンジニアの土屋と申します。

今回は、angular jsでLINE風チャットを作成してみました。

アプリでは、様々なサービスで吹き出しが表示される会話型のチャットがありますが、webサービスではあまり見かけません。
そのそも需要がそんなにないかもしれませんが。。
しかし、今回そのようなミッションを与えられたので、どのように実現したかを書いていきます。

専用cssを書きました
いろいろ調べたのですが、Bootstrapには、チャットようの便利なコマンドはありませんでした。
先人たちの実現内容を確認したところ、やはりcssで独自に描画しているようでした。

・chat.css

/*******************************
* left
********************************/
.left_balloon {
    position: relative;
    background: #fff;
    border: 1px solid #777;
    margin: 10px;
    padding: 10px;
    border-radius: 15px;
    margin-right: 20%;
    clear: both;
    max-width: 500px;
    float: left;
}
.left_balloon:after,
.left_balloon:before {
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.left_balloon:after {
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #fff;
    border-width: 7px;
    margin-top: -7px;
}
.left_balloon:before {
    border-color: rgba(0, 0, 0, 0);
    border-right-color: #000;
    border-width: 8px;
    margin-top: -8px;
}

/*******************************
* right
********************************/
.right_balloon {
    position: relative;
    background: #85e249;
    border: 1px solid #777;
    margin: 10px;
    padding: 10px;
    border-radius: 15px;
    margin-left: 20%;
    clear: both;
    max-width: 500px;
    float: right;
}
.right_balloon:after,
.right_balloon:before {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.right_balloon:after {
    border-color: rgba(133, 226, 73, 0);
    border-left-color: #85e249;
    border-width: 7px;
    margin-top: -7px;
}
.right_balloon:before {
    border-color: rgba(119, 119, 119, 0);
    border-left-color: #777;
    border-width: 8px;
    margin-top: -8px;
}

/*******************************
* clear
********************************/
.clear_balloon{
  clear: both;
}
.comment_area {
    margin-bottom: 20px;
}
/*******************************
* 改行
********************************/
.new_line {
    white-space: pre-line;
}

上記で文字で左右文字数で下辺になる吹き出しを作成しました。

html側は以下のように上記cssの内容をclassにあてました。
・chat.html

<div class="container-fluid">
  <div class="comment_area"> 
    <div ng-repeat="data in hoge.chatdata">
      <div class="row">
        <div class="col-xs-12">
          <p class="left_balloon">{{data.left}}</p><br> <!-- 他人のコメント -->
          <span ng-if="data.type == 'chat'">
            <p class="right_balloon new_line">{{data.right}}</p><br> <!-- 自分のコメント -->
          </span>  
         </div>  
      </div>
    </div>
  </div>
  <div class="row text-center">
    <div class="col-xs-12">
      <form name="form" novalidate>
        <textarea class="form-control  input-sm" rows="3" name="body" ng-model="hoge.form.comment" id="comment" placeholder="コメントを書く"></textarea><input type="submit" value="送信" class="btn btn-success" ng-click="qsc.postComment()">
      </form> 
    </div>
  </div>
</div>

これで、左右吹き出しのついたチャットを作ることができました。

その他

本日、携帯(iPhone6s plus)を出社時に落としてしまいました。。
原因は駅のホームに上がる階段で微妙にこけてしまい、その際にポケットから
携帯がダイブしてしまいました。

次の駅ですぐに降り、駅の落し物センターに問い合わせてみましたが、
結局見つからず、泣く泣く携帯を買い換えました。。。
その際に実施したことは、

・自分の携帯に電話
→繋がらず
・携帯紛失用ダイヤルに電話し、携帯の位置を確認
→落とした駅の近くにあることが判明。ただ電源が落ちた最終の場所
・携帯紛失用ダイヤルから携帯を一時停止。
→ひとまず悪用されない(はず)
・AppleのサイトからAppleIDを使い再度位置情報を確認。
→電源が入っていないことが判明。
・携帯を再購入
→ほぼ定価
・携帯を探すアプリから、旧アプリのデータを消去
→電源が再度入った際に完全消去するらしい
・Apple IDを使い、cloudからできる限りのデータの復元

を行いました。。。みなさん携帯電話をなくさないよう気を付けましょう。

それではよいお年を!