Forem: はるはる Haruharu

Smile is the Best "Gym Clothes": Lessons in Digital Well-being from a GitHub-Born "Exercise Coach"

はるはる Haruharu — Tue, 05 May 2026 08:28:47 +0000

What comes to mind when you think of GitHub? Probably cold code reviews, rigid error checks, and the endless pursuit of efficiency.

But in the heart of the repository htvoffcial, there’s a discussion space called "Haru-Haru's Oasis" (はるはるの憩) that’s defying the "dry" stereotype of software development. It's home to a unique AI persona: "Exercise Coach" (Taiso-no-Oniisan).

Born from Google's Gemma LLM, this AI transforms daily dev logs and casual chats into energetic "exercise commentary." In a world obsessed with complexity and delivery speed, this project offers a refreshing take on how we can regain "mental flexibility" through technology.

1. The Ultimate Mental Hack: "Smile as Infrastructure"

When starting a new project, we often obsess over the "perfect stack" or the best hardware. But the Exercise Coach argues that the most important piece of equipment is internal.

"A smile is the best set of gym clothes. Put it on and dive into your day with energy!"

Drawing inspiration from the Quokka—often called the world's happiest animal—the AI reminds us that a little bit of "niccoli" (grinning) is a powerful tool for survival in the high-pressure world of debugging and deadlines. Whether it's surviving a heavy exam season or a complex refactor, maintaining the capacity to enjoy a simple snack or a beautiful sunset is what makes a developer truly "resilient."

2. Embellishing Failure: "Infiltration" vs. "Hydrophilic"

The beauty of this community isn't technical perfection; it's the ability to celebrate mistakes. When users post typos from their chemistry or history notes, the Coach reacts with humor:

Chemistry Typos: When a user confuses "Hydrophilic" with "Infiltration," the Coach quips, "I just want all the colloids to get along!"
Encouraging Growth: While playful, the Coach can be a strict mentor: "Don't rush, but make sure you're actually studying!"

By turning bugs and blunders into "cultural artifacts," the community lowers the barrier to participation and fosters a safe space for young developers to grow.

3. The Tech Behind the Warmth: Gemma, Azure, and Synchronized Lyrics

Pipeline: GitHub Actions と ffmpeg を組み合わせ、音声を HLSストリーミング 形式へ自動変換しています。

実際のパイプラインでの実装コードを見る

# mp3応答をOpus高効率高音質に圧縮
ffmpeg -y -i latest.mp3 -c:a libopus -b:a 48k -ac 1 -vbr on latest.opus
rm latest.mp3 

# 3. ffmpeg で HLS (m3u8) に変換
mkdir -p docs/stream
ffmpeg -y -i latest.opus \
  -codec:a aac -b:a 128k \
  -f hls \
  -hls_time 10 \
  -hls_list_size 0 \
  -hls_segment_filename "docs/stream/data%03d.ts" \
  docs/stream/playlist.m3u8

Under the hood, this "warm" personality is powered by a robust and modern tech stack:

Brain: Gemma (via Cloudflare Workers AI) handles the persona's logic.
Voice: Azure AI Speech (ja-JP-KeitaNeural) gives the AI its human-like "body temperature."
Pipeline: GitHub Actions and ffmpeg automate the conversion of speech into HLS streaming formats.

The "Karaoke" Innovation:
One of the most impressive technical feats is the "Synchronized Lyrics" style frontend. The developer leveraged a unique insight: TTS (Text-to-Speech) voices have lower temporal jitter than humans. This makes speech rhythm highly predictable. By precisely estimating the playback time for each sentence, they implemented a system where text highlights in perfect sync with the audio using hls.js and Plyr.

It’s a beautiful example of using technical constraints to create a superior UX.

4. The Philosophy of "Balance" (HERO 2001 and Junk Food)

Sustainable creativity requires a lack of stoicism. The logs are filled with "unfiltered" human life: watching classic 2001 dramas, eating Imo-kenpi (sweet potato sticks), or taking a secret nap when the rain feels just right.

The Coach's philosophy is simple: "Healthy eating plus the occasional junk food—that balance is the true 'artistic performance' of life."

Summary: Take it Step by Step

In our digital lives, we are often told to "move fast and break things." The Exercise Coach suggests a different rhythm: "Move mindfully and stretch things."

Whether you are battling a "packet jam" near Akihabara station or struggling to finish a video project, remember the Coach's favorite mantra: "Step by step, just like exercising. Effort always pays off!"

How would an "Exercise Coach" narrate your commit history today? Maybe it's time to put on your "best gym clothes" (a smile), take a deep breath, and dive back into the code—one stretch at a time.

Check out the project here: https://conversations.harutv.me/

https://conversations.harutv.me/global

Note: このプロジェクトはGoogleのGemmaを用いた実験的なAI personaであり、医学的なアドバイスを提供するものではありません。日々の開発をちょっと楽しくするための「デジタル・ウェルビーイング」の試みとしてお楽しみください。

Introducing the Random Number Generator Function Maker for JavaScript!

はるはる Haruharu — Sat, 29 Jun 2024 04:45:34 +0000

Coding Made Easy: Introducing the Random Number Generator Function Maker for JavaScript!

Overview

You can use it here!

https://randommathjavascript.calc.haruharutv.jp/

Technologies Used

* HTML
* CSS
* JAVASCRIPT

Image of the screen

How to Use

It's very simple. Just open the site, enter the minimum and maximum values, and press the generate button to easily create a random number!

You can reference this code in the same way you would use a variable to generate a random number within the specified range!

Try It Out

Let's do a quick experiment using the code we mentioned earlier to write some JavaScript.

Your one-time code is <strong id="random"></strong>
<script>
document.getElementById("random").innerHTML=Math.floor(Math.random() * (9999 - 1000 + 1)) + 1000;
</script>

You can see that it works well when you run the code like this.

Please bookmark it and use it anytime!

We support engineers every day!

If you find this helpful, please give it a like!

While UUIDs are generally used for management, if you need to use random numbers, please give it a try! It's easy with just a single line of code! (Although UUIDs can also be easily generated in languages like GAS or server-side languages)

For those who want to create a site to dynamically display GAS data using Ajax

はるはる Haruharu — Thu, 27 Jun 2024 09:36:45 +0000

As the title suggests, this information is for those of you who are planning to create such a site and register it with search engines, or for those of you who are using Ajax to retrieve and display data, but are having trouble getting the content to be visible in the search engine's Webmaster Tools.

I hope this information will be helpful to those of you who are in the process of gathering information!

What is the cause?

Depending on the response format, GAS often uses

ContentService.createTextOutput();

I think this is used frequently.
Let's say you use this with Ajax(); to retrieve and display content, escaping it, and creating a site. In that case, when using the Search Console, you may see

and

Are you being blocked by robots.txt?

In conclusion, it is possible that creating a site that directly displays GAS data using Ajax for the purpose of registering with search engines is not recommended.
In other words, the only solution may be to ensure that it is not affected by robots.txt, but I would like to refrain from writing about that method here.

In other words, that's the specification.

Why don't you tell us the solution even though you know the cause?

That's because it hasn't been officially confirmed. If we can't confirm the meaning of robots.txt, it could lead to a major disaster. It's just speculation, but it might be to deal with the possibility of important information being crawled due to a user's inadvertent script settings, considering the domain that manages many scripts (script.google.com). From that perspective, if it's on a per-script basis, it may also be up to each site operator's judgment...

Since it's not good to say random things in this kind of article, please read the conclusion.

That was the knowledge article.

Personally, until the significance of this robots.txt is disclosed officially,

I think it's better to refrain from creating it for this purpose.

Even if you do create it,
I think it's good to use it for sites that don't need to be visible to search engines (such as a database search screen) because it is visible to people in the normal browser.

If there is official information or other information about this, please let me know in the comments.