Twitter @Twitter 5時間前
ツイッター風トーク画面メーカー
文章はクリックで編集できます アイコン画像はクリックで編集できます twitter.com 記事タイトル 記事概要はクリックで編集できます 記事サムネイル画像はクリックで編集できます xで削除できます
Twitter @Twitter 5時間前
RTツイート
文章はクリックで編集できます xで削除できます 9,999 9,99万 9,99万

Twitter

Bluesky

Threads

タイッツー

view source

JavaScript

document.title = 'ツイッター風トーク画面メーカー';


$(function(){
  $('name,date,at,text,newstitle,domain,summary,n').attr({contentEditable:'true'});
  var post = $('post').eq(0).clone();
  $('post imagewrap').remove();
  $('post news').remove();
  $('post retweet').remove();

  $('#addPost').on('click', function(e){
    $('timeline').append(post.clone());
  });
  $('#addCopy').on('click', function(e){
    var postCopy = $('post').eq(-1).clone();
    $('timeline').append(postCopy.clone());
  });
  $(document).on('click', '#randomNum', function(e){
    randomNum();
  });
  $(document).on('click', '#randomName', function(e){
    randomName();
  });
  $(document).on('click', '#addBadge', function(e){
    $img = $('<img>',{src:'tw-badge.png'}).addClass('badge');
    $('badge').empty();
    $('badge').append($img);
    $('.icon').addClass('badge-on');
  });

  $(document).on('click', '#addMosaic', function(e){
    $('.icon,name,at').each(function(){
      var ele = $(this);
      if(ele.hasClass('mosaic')){
        ele.removeClass('mosaic');
      } else {
        ele.addClass('mosaic');
      }
    });
  });

  $(document).on('click', '.icons img', function(e){
    var src = $(this).attr('src');
    $('timeline .icon').attr({src:src});
  });
  $(document).on('change', '#iconURL', function(e){
    var url = $(this).val();
    if(!url.match(/^http/)){return;}
    url = encodeURI(url);
    var src = bc.convertImgDataURL(url);
    $('timeline .icon').attr({src:src});
  });

  $(document).on('click', '.badge', function(e){
    var src = $(this).attr('src');
    var post = $(this).parent().parent().parent().parent();
    post.find('.icon').removeClass('badge-on');
    if(src.match(/blue/)){
      $(this).remove();
    } else {
      src = src.replace(/.png/,'-blue.png');
      $(this).attr({src:src});
    }
  });
  function randomNum(){
    $('n').each(function(){
      var name = $(this).attr('name');
      var max = 9999;
      if(name==='comment'){
        max = 999;
      }
      if(name==='rt'){
        max = 19999;
      }
      if(name==='like'){
        max = 999999;
      }
      var r = Math.floor(Math.random()*max);
      var rText = r.toLocaleString();
      var rMan = Math.floor(r/10000);
      if(r>9999){
        rText = rText.slice(0,rText.length-5) + '万';
      }
      $(this).text(rText);
    });
  }

  function randomText(lang='en'){
    var str = '';
    var l = 9;
    var charStart = 97;
    var charLen = 25;
    if(lang==='ja'){
      l = Math.floor(Math.random()*3 + 3);
      charStart = 12354;
      charLen = 80;
    }
    for(i=0;i<l;i++){
      var charcode = Math.floor(Math.random()*charLen + charStart);
      var c = String.fromCharCode(charcode);
      str += c;
    }
    return str;
  }

  function randomName(){
    $('name').each(function(){
      $(this).text(randomText('ja'));
    });
    $('at').each(function(){
      $(this).text('@'+randomText());
    });
  }

  $(document).on('change', '#textarea', function(e){
    var text = $(this).val();
    var tAry = text.split('\n');
    $('name').eq(0).text(tAry[0]);
    $('at').eq(0).text(tAry[1]);
    $('date').eq(0).text(tAry[3]);
    $('text').eq(0).text(tAry[4]);
  });

  $(document).on('dblclick', 'options',function(e){
    var img = $('<img>').attr({src:'threads-options.png'}).css({height:'22px'});
    $(this).empty().append(img);
  });

  $(document).on('click', 'close',function(e){
    $(this).parent().remove();
  });
  $(document).on('change', '.file', function(e){
    var ele = $(this);
    var img = ele.parent().find('img');
    var event = e.originalEvent;
    console.log(event);
    var file = event.target.files[0];
    if (!file.type.match('image.*')){
        return;
    }
    console.log(file);
    var reader = new FileReader();
    reader.onload = function(){
      var dataURL = reader.result;
      console.log(dataURL);
      var newImage = new Image();
      newImage.src = dataURL;
      newImage.onload = function(){
        img[0].src = newImage.src;
      }
    }
    reader.readAsDataURL(file);
  });
});



$(function(){
  $('#toImg').on('click', function(){
    html2canvas(document.querySelector("#target")).then(canvas => {
      console.log(canvas);
      document.querySelector("#screenshot").textContent = '';
      document.querySelector("#screenshot").appendChild(canvas)
    });
  });

  $(document).on('click', '#screenshot canvas', function(){
    var canvas = $(this);
    var data = canvas[0].toDataURL('image/png');
    var name = $('name').eq(0).text();
    var a = $('<a>', {href:data,download:'twitter-talk-'+name});
    a[0].click();
  });


});

CSS

#demo{
  display:block;
  width:100%;
  max-width:480px;
  margin:0 auto;
}

timeline{
  display:block;
  width:100%;
  max-width:480px;
  margin:0 auto;
  font-family: "Segoe UI",Meiryo,system-ui;
}

post{
  display:block;
  width:100%;
  margin:0 auto;
  font-size:15px;
  line-height:20px;
  color: rgb(15, 20, 25);
  border:1px solid rgb(239, 243, 244);
  border-top:none;
  position:relative;
  top:0;
  left:0;
}
post img{
  vertical-align:bottom;
}
post-in{
  display:block;
  padding:8px 16px;
  display: flex;
}

header{
  display:block;
  position:relative;
  top:0;
  left:0;
  font-size:15px;
  color: rgb(83, 100, 113);
  vertical-align:bottom;
}

icon{
  width:48px;
  margin-right:16px;
}
img.icon{
  width:48px;
  height:48px;
  border-radius:50%;
}
img.icon.badge-on{
  border-radius:4px;
}
badge{
  display:inline-block;
}
.badge{
  width:18px;
  height:18px;
  margin-bottom:2px;
}

main{
  display:block;
  width:100%;
  justify-content: center;
  padding-bottom: 12px;
}
name{
  font-weight:700;
  color: rgb(0, 0, 0);
}
text{
  display:block;
  color: rgb(0, 0, 0);
}

imagewrap,
retweet,
news{
  display:block;
  margin:12px auto;
  border:1px solid rgb(207, 217, 222);
  border-radius: 16px;
  overflow:hidden;
  position:relative;
  top:0;
  left:0;
}
imagewrap img,
news img{
  width:100%;
}
newstitle{
  display:block;
}
newstext{
  display:block;
  padding:12px;
  text-overflow: ellipsis;
}
domain{
  display:block;
  color: rgb(83, 100, 113);
}
summary{
}

news .img-area{
  display:block;
  width:100%;
  padding-bottom:52%;
  position:relative;
  top:0;
  left:0;
}

news .img-area img{
  position:absolute;
  top:0;
  left:0;
  width:100%;
}

retweet header,
retweet text{
  padding:12px;
}
retweet text{
  padding-top:2px;
}

retweet icon{
  width:20px;
  margin-right:0;
}
retweet .icon{
  width:18px;
  height:18px;
}

options{
  padding:4px 4px;
  padding-top:12px;
  display: flex;
  color: rgb(83, 100, 113);
  font-size:13px;
  vertical-align:bottom;
  position:relative;
  top:0;
  left:0;
}
opt img{
  width:18px;
  height:18px;
  margin:2px;
}

opt{
  width:30%;
  display: flex;
}
opt:nth-child(4){
  width:10%;
}

opt n{
  display:inline-block;
  padding:0 10px;
}

input[type="file"]{
  display:none;
}

.mosaic{
	filter: blur(3px);
}

close{
  position:absolute;
  top:2px;
  left:2px;
  display:none;
  z-index:3;
  width:8px;
  height:8px;
  cursor:pointer;
}

*:hover>close{
  display:inline-block;
  opacity:0.5;
}
.icons{
  display: flex;
}
.icons img{
  width:60px;
}
input[type="text"]{
  width:100%;
}
textarea{
  width:100%;
  height:6em;
}

button{
  display:block;
  width:320px;
  padding:10px;
  margin:8px auto;
}
#screenshot{
  background-color:#000;
  text-align:center;
}
#code{
  display:none;
}

HTML

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-talk-twitter/

ABOUT

hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。