Yosegakky

このエントリーをはてなブックマークに追加

What's This?

Download

Usage


<script>

var config = {
  "title": "Thanks!!",
  "assets_path": "assets/memories/",
  "line_clamp_class_name": "line-clamp-5",
  "shuffle_message": true,
  "message_chunk_cnt": 4,
  "interval_render_message": 100,
  "overlay_fadeout_time": 1500,
  "memories": [
    {"file_name": "hoge.jpg", "title": "piyopiyo"},
    {"file_name": "piyo.jpg"},
    {"file_name": "fuga.mp4"}
  ]
};

var messages = [
  {
    "userName": "hoge",
    "message": "hoge<br>piyo",
    "img": "dummy.jpg",
　  "video": "dummy.mp4"
  },
  {
    ・
    ・
  }
];

new Yosegakky.App(config).render(messages);

</script>

</body>

Config

  • config
    • title
      • titleの設定
      • デフォルト : "Thanks!!"
    • assets_path
      • 素材配置パス
      • 画像, ビデオなどのファイルは、このパス以下のものを参照します
      • デフォルト : "assets/memories/"
    • line_clamp_class_name
      • メッセージを何行まで表示するか(line-clamp-x のxの数値行まで表示する)
      • 参照:-webkit-line-clamp
      • e.g.) line-clamp-3 の場合、メッセージを3行まで表示する
      • デフォルト : "line-clamp-5"
    • shuffle_message
      • メッセージをランダムで表示するか
      • デフォルト : true
    • message_chunk_cnt
      • メッセージを何個ずつ描画するか(0だとすべてのメッセージを一括で表示する)
      • デフォルト : 4
    • interval_render_message
      • message_chunk_cntで分割させたメッセージを何msの間隔で描画させるか
      • デフォルト : 100
    • overlay_fadeout_time
      • overlay(loading)を何msかけてfadeoutさせるか
      • デフォルト : 1500
    • memories
      • ヘッダーのタイトルクリック時に表示させるスライドショーの内容定義
        • file_name
          • ファイル名
          • ビデオの場合MacとWindows両方を考慮するのであれば、.mp4が無難です
            • ブラウザできちんと表示されるかチェックしたほうがいいです
        • title
          • スライドショーに表示させるタイトル
          • 要素が無い or 空文字の場合、config.titleの値を表示します
      • 何も設定していない場合、ヘッダーのタイトルにスライドショーイベントは設定されません
      • デフォルト : []
  • messages
    • userName
      • ユーザー名
    • message
      • 改行は直接タグ(<br>)を書きます
      • ※エスケープしていません
    • img
      • ユーザー画像ファイル名
      • 要素が無い or 空文字の場合ダミーのアイコンを表示します
    • video
      • ユーザービデオファイル名
      • MacとWindows両方を考慮するのであれば、.mp4が無難です
        • ブラウザできちんと表示されるかチェックしたほうがいいです
      • 要素が無い or 空文字の場合、 (ビデオアイコン) は表示しません

Demo

Supported Browsers

Dependent Libraries

License