世の中の人は意外とMARQUEE好き

こんにちは！私はプログラミングをたまに教えたりしているような男です。

基本的には毎日リラックスして生きています。

どんなできる人材も手が3本も4本もあるわけではない

実はわたくし自身のプログラミングのピークはIT業界に入る前でした。

その頃の私は何も知識がないので、ただやってみることを繰り返していて、その結果自分にとって役立つアプリをいくつも制作することができていました。

現在の仕事はできる人の横でその人が忙しすぎて着手できない仕事をかわりにやってあげるハイエナのような仕事ぶりを発揮しています。

IT業界に転職し想像をはるかに超えるやりがいのなさに絶望する

私は主にPHPとフロントエンドについて学んできました。

そのほかに学生時代はJavaについても学び、百科事典のように分厚いテキストを片手に様々なアプリの制作に挑戦していました。

実はその頃こそがプログラマとして1番輝いていた時期だったんです。

実際IT業界に転職するとほとんどソースコードを触る機会はありませんでした。

既存のソースコードの修正とテスト実行によるエビデンス貼りの日々でした。

つまり、プログラミングの知識はオタ芸みたいなものです。

IT業界で生きていくためにプログラミング知識はあまり関係ないと私は思います。

営業出身のエンジニアは最強！なぜなら彼らは、、

最近営業出身のエンジニアが増えてきた気がします。

彼らの特徴として、単純ですがコミュニケーション力に優れているということがあげられると思います。

さらに彼らは営業時代に培った残業への耐性がすごいんです。翌日も何事もなかったかのように出社してきます。

私はIT業界に入って20代をほぼ残業、休日出勤なしで過ごしてきました。

週末はJRAという邪教を崇拝していてその儀式にたくさんの時間を使い献金してました。

その間に営業出身のエンジニアはブラック的な企業に働いていたので、私たちが休んでいたり、宗教活動しているときにほかのことには目もくれず業務に必要な調査や勉強を続けていたりするのです。

さらに彼らは週末に、ゴルフという私から見たらもはや貴族の遊びとしか思えない、広大な土地を貸し切って棒を使って小さい球を穴に入れるという都市伝説的なスポーツを楽しんでいます。

そのスポーツは我々からしたら都市伝説的な認識であるため、お金持ちの方が多く興じているそうなのです。

その結果ゴルフを通じて、富裕層と仲良くなることもできているそうです。

話は脱線しまくりましたが、MARQUEEについて

MARQUEEとはよく見る右から左、もしくは左から右に流れる文字のことです。
これは株価の情報や、街にある電子的な看板によく用いられています。

とにかく動いているので潜在的にその情報を受け取ってもらいやすくなります。

いよいよアプリの紹介！MARQUEEにするテキストの色と背景色を指定することもできる！サーバーいらずのHTMLで作りました！

こちらがスクショになります

ここでテキスト、文字色、背景色を指定できます。

Submitボタンを押すとこのように表示されます。

こちらがソースコードです！HTML最強！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Announcement Marquee</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        #inputSection {
            text-align: center;
        }
        input, button {
            margin: 10px;
            padding: 5px;
        }
        #marqueeSection {
            display: none;
            width: 100%;
            overflow: hidden;
        }
        .color-picker-label {
            display: inline-block;
            margin: 10px;
        }
        .scrolling-text {
            white-space: nowrap;
            animation: scroll 20s linear infinite;
            font-size: 36px;
            padding: 20px;
        }
        @keyframes scroll {
            0% { transform: translateX(100%); }
            100% { transform: translateX(-100%); }
        }
    </style>
</head>
<body>
    <div id="inputSection">
        <input type="text" id="announcementText" placeholder="Enter your announcement">
        <div class="color-picker-label">
            <label for="textColor">Text Color:</label>
            <input type="color" id="textColor" value="#000000">
        </div>
        <div class="color-picker-label">
            <label for="backgroundColor">Background Color:</label>
            <input type="color" id="backgroundColor" value="#FFFFFF">
        </div>
        <button onclick="createMarquee()">Submit</button>
    </div>
    <div id="marqueeSection"></div>

    <script>
        function createMarquee() {
            const text = document.getElementById('announcementText').value;
            const textColor = document.getElementById('textColor').value;
            const bgColor = document.getElementById('backgroundColor').value;

            if (text.trim() === '') {
                alert('Please enter an announcement text.');
                return;
            }

            document.getElementById('inputSection').style.display = 'none';
            
            const marqueeSection = document.getElementById('marqueeSection');
            marqueeSection.style.display = 'block';
            marqueeSection.style.backgroundColor = bgColor;

            const scrollingText = document.createElement('div');
            scrollingText.className = 'scrolling-text';
            scrollingText.textContent = text;
            scrollingText.style.color = textColor;

            marqueeSection.appendChild(scrollingText);
        }
    </script>
</body>
</html>