//tips
//smart contract
Codementorでのやり取りの続き。
繰り返しメッセージを送ってくる方にはお断りなどを送り、現在進行中の方については質問の受け答えとdemo imageを共有。
Thank you for your interest in this request. After careful consideration, I regret to inform you that you have not been selected for this position.Thank you for your understanding.
希望の人がうまくmentorになってくれればいいのだが。
事前にAPIの接続処理について調べていく。
twitterのapiについて調べてみるとdeveloper申請が必要で承認されないといけないとのこと。
Twitterのタイムラインのページへの導入について確認していく。
https://help.twitter.com/ja/using-twitter/embed-twitter-feed
https://news.mynavi.jp/article/20210614-1904235/2
シンプルに自身のwebサイトに埋め込むのは下記のサイトから発行されるcodeをhtmlに貼り付けるだけでできた。
https://publish.twitter.com/#
<body>
Hello World
<a class="twitter-timeline" href="https://twitter.com/naki_road?ref_src=twsrc%5Etfw">Tweets by naki_road</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</body>
</html>
タイムライン表示自体は難しくないよう。問題なのはuser認証の方かもしれない。userがpageに自身のtwitterとの連動を許可する必要がある。
探してみると3レッグ認証OAuthが該当するよう。
これでユーザーに代わってタイムタインコードの貼り付けを行えるようにできる。
https://developer.twitter.com/ja/docs/authentication/oauth-1-0a/obtaining-user-access-tokens
ただ、タイムラインコードであれば3レッグ認証OAuthは必要ないような記述も見つけたので、
https://zenn.dev/nekoshita/articles/3c24c302a6a5ee
https://github.com/nekoshita/twitter-api-example-by-golang/tree/master/no-user-context-api
GET statuses/user_timelineでいけそうな気がする。その際にはuser名などの情報をボタンを押したらポップアップするようにし、入力したら指定範囲にタイムライン表示という形にしたい。
https://developer.twitter.com/en/docs/twitter-api/v1/tweets/timelines/api-reference/get-statuses-user_timeline
http://westplain.sakuraweb.com/translate/twitter/Documentation/REST-APIs/Public-API/GET-statuses-user_timeline.cgi
https://syncer.jp/Web/API/Twitter/REST_API/GET/statuses/user_timeline/
一旦htmlで入力フォームの作成。
<body>
<h1>Twitter</h1>
<form action="#" method="post">
<p>name：<br>
<input type="text" name="name"></p>
<p><input type="submit" value="submit"></p>
</form>
</body>
</html>
クリック時に動作させたいのでphpで対応しようかとxamppを起動したが、よく考えるとjsでのonclickでも同様の動作ができたかと思うので今回はjsでの実装方法を模索する。
https://proengineer.internous.co.jp/content/columnfeature/3941#23
https://developer.mozilla.org/ja/docs/Learn/Forms/Sending_forms_through_JavaScript
https://www.javadrive.jp/javascript/form/index1.html#section1
シンプルなフォーム入力部分へJsを組み込んでページ表示を行う。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Twitter</title>
</head>
<body>
<p>
<label>user_name @：<input type="text" id="nameText"></label>
<input type="button" value="Check" id="checkButton">
</p>
<p id="msg"></p>
<script>
function butotnClick(){
msg.innerText = 'お名前は' + nameText.value + 'さんですね';
}
let nameText = document.getElementById('nameText');
nameText.value = '名前';
let msg = document.getElementById('msg');
let checkButton = document.getElementById('checkButton');
checkButton.addEventListener('click', butotnClick);
</script>
</body>
</html>
Twitterのtimelineコードを確認すると一部を書き換えることで対応できそうなことがわかる。
<a class="twitter-timeline" href="https://twitter.com/naki_road?ref_src=twsrc%5Etfw">Tweets by naki_road</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
witter.com/naki_road?を書き換えれば良いはず。Tweets by naki_roadは変数を参照させる。
下記のような参考例を見つけたのでトライ。
https://teratail.com/questions/155284
取得したURLをhrefに埋め込む処理がうまくいかない。方法を模索中。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Twitter</title>
</head>
<body>
<p>
<label>user_name @：<input type="text" id="nameText"></label>
<input type="button" value="Check" id="checkButton">
</p>
<p id="msg"></p>
<p id="tmsg"></p>
<script>
function butotnClick(){
msg.innerText = 'お名前は' + nameText.value + 'さんですね';
tmsg.innerText = 'https://twitter.com/' + nameText.value + '?ref_src=twsrc%5Etfw';
}
let nameText = document.getElementById('nameText');
nameText.value = '名前';
let msg = document.getElementById('msg');
let tmsg = document.getElementById('tmsg');
let TURL=tmsg.innerText;
let checkButton = document.getElementById('checkButton');
checkButton.addEventListener('click', butotnClick);
</script>
</body>
</html>
