JavaScript chobi

【駆け出しエンジニア用】素のJavaScriptで簡単ツイート生成サービス

はじめに

1か月ほど前にTwitterAPIに申請しましたが通りませんでした。。。笑

諦めきれず、ためしにAPIなしでどこまでできるのかJSの勉強がてら試してみました。

最初に！今回の制作物はこちら。

✅環境
Windows

最初に作ったやつ

ベースとしてこれができている状態で改良していく過程を書いていこうと思います。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>TweetShare</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>TweetShare</h1>
    <p>ツイートしたい内容を書いてね</p>
    <textarea type="text" id="input" name="input"></textarea>
    <div>
      <input type="button" id="btn" value="作成">
    </div>
    <p>ツイートする内容を確認</p>
    <div>
      <textarea type="text" id="result" readonly></textarea>
    </div>
    <button>
      <a id="tweet" target="_blank">ツイートする</a>
    </button>
    <script src="index.js"></script>
  </body>
</html>

index.js

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('btn').addEventListener('click', function() {
    let input = document.getElementById('input');
    console.log(input.value)
    let result = document.getElementById('result');
    let tweet = document.getElementById('tweet');
    let tweet_url = "https://twitter.com/intent/tweet?text="+ input.value;
    result.value = input.value;
    tweet.href = tweet_url;
  }, false);
}, false);

style.css

h1 {
  color: aqua;
}
textarea {
  resize: none;
  width:300px;
  height:200px;
}

こんな感じ

✅使い方

ツイートしたい内容をテキストエリアに記入して作成ボタン
⇒下のテキストエリアに内容が表示される
⇒ツイートするボタンを押すと入力内容を保持した状態でツイート画面に遷移。

✅課題

ツイート画面に遷移した際に、改行がされない

※特に記載しておりませんが地味にCSSも弄りながら修正しています。

Twitterのパラメータの仕組みを調べる

まずはTwitterのパラメータの仕組みについて調べました。これができなきゃ元も子もないので。

参考：今の時代必ず知っておくべき！！Twitterツイートボタンの設置・実装方法まとめ

以下のようなaタグの生成方法は理解。

<a href="http://twitter.com/share?url=[シェアするURL]&text=[ツイート内テキスト]&via=[ツイート内に含むユーザ名]&related=[ツイート後に表示されるユーザー]&hashtags=[ハッシュタグ]" target="_blank">ツイート</a>

参考：ASCII文字とURLエンコードの対応表

スペースは%20

#は%23

改行は%0a

👇ためしにURLにベタ打ちして確認してみた

🙄これをHTML&JSでどう作るかですね！

HTML&JSで改行できるツイートURLを生成する

まずは基本的な部分から勉強していきます。

✅HTMLファイル上で改行する場合

参考：[HTML]フォームの type=submit のvalue 属性の文字列を改行させる方法

以下を差し込む

&#13;&#10;

textareaタグの場合

<textarea type="text" value="test">改行&#13;&#10;してみる</textarea>

inputタグのボタンの場合(※Windowsだと改行されない)

<input type="submit" id="btn" value="作成&#13;&#10;改行">

buttonタグの場合

<button type="submit" name="submit" value="code">改行<br>してみる</button>

※inputタグのテキストは改行非対応

🙄textareaの改行は初期値に使えそう。

ってことでこんな感じで実装。

<textarea type="text" id="input" name="input" placeholder="ツイートしたい内容を書いてね！&#13;&#10;作成を押すとツイートボタンが表示されるよ◎>

✅jsで改行して表示する

※これまた実装以前の基礎知識を学習していきます。

参考：JavaScriptでtextareaに改行を入れる方法を現役エンジニアが解説【初心者向け】

以下を入力時に加えることで改行される。

\n

index.jsを編集

result.value = '改行\nしてみる';

改行された。

ブラウザ上のテキストエリアから\nを入力しても反映はされない(コンソールにもまんま出力。)

ついでにツイッターにはこのURLだとアクセスできなくなることが判明。

✅テキストエリアで入力された改行を取得できるようにする

参考：Textareaで保存したテキストの改行を表示させる方法（\n \r とは？）

現状、テキストエリアで改行した部分のデータがhtml上などで<br>など表示されていないにもかかわらず改行されます。

どうやらHTML Entities という特別な文字の形式で保存されているとのこと。

🙄いろいろ試しましたが、JSでは上手く取得できず。。。pタグで改行を出力すると半角スペースで表示されるのがわかったのでとりあえずこれを利用してみようと思います。

参考：【JavaScript入門】replaceの文字列置換・正規表現の使い方まとめ！

参考：JavaScript 正規表現まとめ

replaceメソッド+正規表現を使って半角スペースを表現します。

replaceメソッドでは最初の1つしか変更が適用されないので、正規表現のgフラグで複数指定する。

基本的な正規表現の使い方

 var str = /正規表現/オプション;

※スラッシュは正規表現パターンの開始と終了を表す予約文字。正規表現パターンに「/」を含むものには、「\/」でエスケープする必要あり。

index.jsを編集

let replacedText = input.value.replace(/\s+/g, '');

gフラグで複数の空白に適用します。上記で試したところ改行が無事消えた！！

ためしに以下で改行を入れてみる。

let replacedText = input.value.replace(/\s+/g, '\n');

HTMLだと改行は2つ入れても半角スペース1つとして適用されてぽい。。。

2回改行したい場合は改行+aで対応してみる

let replacedText = input.value.replace(/\s+/g, '\n');
replacedText = replacedText.replace(/a/g, '\n');

🙄反映されたもののなんとも言えない実装ですね～

参考：正規表現：エスケープが必要な文字、まとめ

ずっと避けてきた正規表現の勉強がてら\nで改行されるように実装してみます。

正規表現では、特殊文字を文字として認識させたい時、バックスラッシュを使ってエスケープ行う。

let replacedText = input.value.replace(/\s+/g, '\n');
replacedText = replacedText.replace(/\\n/g, '');

これで動作しました◎※\nを削除することで上手く処理できました。\nを第2引数に指定すると2回改行しちゃうので注意！！

👇こんな感じでnとバックスラッシュを個別に入力した場合はちゃんと表示されるので一旦よしとしよう。

✅テキストエリアで入力したデータを元にURLを生成する

一通り仕様がわかったので後はTwitterにうまくパラメータで送ればOKですね！！

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>TweetShare ver2</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>TweetShare ver2</h1>
    <textarea type="text" id="input" name="input" placeholder="ツイートしたい内容を書いてね！&#13;&#10;作成を押すとツイートボタンが表示されるよ◎&#13;&#10;&#13;&#10;※改行でスペースを作りたい場合※&#13;&#10;改行した後に\nを記載すると1行分のスペースが作成できます。"></textarea>
    <div>
      <button id="btn">作成</button>
    </div>
    <div>
      <textarea type="text" id="check" placeholder="ツイートする内容は、&NewLine;ここで確認できるよ！" readonly></textarea>
    </div>
    <button id="button" class="display-none">
      <a id="tweet" target="_blank">ツイート</a>
    </button>
    <script src="index.js"></script>
  </body>
</html>

index.js

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('btn').addEventListener('click', function() {
    let input = document.getElementById('input');
    let check = document.getElementById('check');
    let tweet = document.getElementById('tweet');
    let button = document.getElementById('button');
    let replacedText = input.value.replace(/\s+/g, '\n');
    replacedText = replacedText.replace(/\\n/g, '');
    check.textContent = replacedText;
    let tweetText = input.value.replace(/\s+/g, '%0a');
    tweetText = tweetText.replace(/\\n/g, '');
    let tweet_url = "https://twitter.com/intent/tweet?text="+ tweetText;
    button.className = "a_button";
    tweet.href = tweet_url;
    console.log(tweetText);
  }, false);
}, false);

style.css

h1 {
  color: aqua;
}

textarea {
  resize: none;
  width:300px;
  height:200px;
  font-family: "Arial";
}

.a_button {
  padding: 0;
}

a {
  text-decoration:none;
  display: block;
  height: 100%;
  padding: 0 5px;
  color: black;
}

a:visited {
  color:black;
}

div {
  padding-bottom: 10px;
}

.display-none {
  display: none;
  color: black;
}

こんな感じになりました。

🙄正直、ここまでの機能ならTwitter上でやったほうが便利ですね笑

✅課題

こっちを使うメリットがない！笑

ハッシュタグを付けられるようにする

基本的に上記の内容を駆使すればだいたいできそうな感じだったので、追加で調べた内容のみ残しておきます。

buttonでsubmitさせない方法

formタグ内ではtype=”button”で明示しないとsubmitと解釈されてリロードされる。

JavaScriptでフォームの入力内容をリセットする方法を現役エンジニアが解説【初心者向け】

結局formタグは使わず変数に空の値を代入する形で実装しました。

JavaScriptでフォームのボタンを無効にする方法を現役エンジニアが解説【初心者向け】

button.disabled = true

これは初めて知りました！

【CSS】スマホで Media Queries が効かないときの対処法

地味にハマりました。記述は合っていたのに適用されず30分くらいハマりました。。。

キャッシュの問題だったのかな？？

👇完成品

リポジトリ

おわりに

久しぶりに簡易的ではありますが、人目に触れるサービスを作った気がします。

思いついた際は簡単そうに思いましたが、想像以上に難しかったです。笑

ただ、調べていく中で正規表現を使ってみる機会にもなったのでよかったです。

思った以上にスクリプトが冗長になってしまったので、もうちょっとブラッシュアップ兼ねてPugとか使ってみようかな。

Pugをちょっと使ったときはLaravelのBlade知っていれば十分とか思ったけど、こういう簡易的なページにはメリットありそうですね！！

✅その他参考

addEventListenerの第3引数の意味

入力できないフォームを設定する

その他備忘録

✅バックスラッシュに関して

参考：バックスラッシュを入力したい

バックスラッシュは日本語のフォントには含まれていない記号らしい。

スタイルシートでtextareaのフォントを明示的に(Arialに)変更で表示されるようになった。

textarea {
  resize: none;
  width:300px;
  height:200px;
  font-family: "Arial";
}

✅formタグ内のパラメータに関して

参考：[HTML] GET メソッドの form で URL のクエリパラメータが消えてしまう

W3Cの仕様で消えてしまうとのこと。。。

✅aタグのクリック範囲に関して

参考：【HTML/CSS】aタグのクリック範囲を親要素のサイズに合わせる

コメントを残す

RECOMMENDこちらの記事も人気です。