はじめに
「複数のニュースサイトを開いて、それぞれログインして、タブを切り替えて…」
ニュースを比較しながら見るだけなのに、なぜこんなに面倒なのでしょうか。
しかも、YouTubeでニュースを見ようとすると、視聴者コメントが同時に表示されてしまい、それが集中の妨げになる。別のニュース局に移ろうとすると、また一から探さなければならない。
「もっとシンプルに、ストレスなくニュースを見たい」
その願いを実現するために、複数のテレビ局のYouTubeニュースチャンネルを、ワンクリックで切り替えて視聴できるWebアプリケーションを開発しました。
今回は、実際の開発動機から技術的なポイント、そして同様のシステムをご希望の方への提案まで、詳しくお伝えします。
これまでのニュース視聴の課題
huluでの日テレ24視聴の限界
約1年間、huluで日テレ24を視聴していましたが、いくつかの問題がありました：
| 課題 | 詳細 | ストレス度 |
|---|---|---|
| ❌ 頻繁なログイン要求 | 数日おきにログインを求められる | 高 |
| ❌ VPN接続時の不安定さ | VPN使用時に通信が途切れる | 高 |
| ❌ チャンネルの制約 | 日テレ24しか見られない | 中 |
| ❌ 月額料金 | 継続的なコスト負担 | 中 |
特に、VPN接続中の不安定さは深刻でした。セキュリティのためVPNは常時接続したいのに、動画視聴のたびに切断しなければならない。これは本末転倒です。
YouTubeでの視聴を試した結果
「それなら、YouTubeで見ればいいじゃないか」
そう思って試してみました。
各テレビ局は、YouTubeでニュースのライブ配信や最新動画を公開しています。無料ですし、ログインも不要です。
しかし、YouTubeにも新たな問題がありました：
| 課題 | 詳細 | ストレス度 |
|---|---|---|
| ❌ 視聴者コメントの表示 | ライブ配信時、リアルタイムコメント欄が常に表示される | 非常に高 |
| ❌ チャンネル間の移動が不便 | 別の局を見るには、検索→探す→開く、の手順が必要 | 高 |
| ❌ おすすめ動画の誘惑 | 関係ない動画が推薦され、集中を乱される | 中 |
| ❌ 広告の挿入 | ニュース視聴中に広告が入る（無料なので仕方ないが） | 低 |
特に視聴者コメントの表示は、私にとって致命的でした。
ニュースを客観的に見たいのに、リアルタイムで流れるコメントが視界に入ると、どうしてもそちらに意識が向いてしまう。感情的な意見や偏った見方に引きずられてしまう。
「コメント非表示にできないのか？」
YouTubeのライブ配信では、埋め込みプレーヤーを使わない限り、コメント欄を完全に非表示にすることはできません。
既存サービスでは解決できなかった
他のニュースアプリやサービスも調べてみました：
- ニュースアプリ：記事中心で、動画は補助的
- 各局の公式アプリ：その局しか見られない
- ポータルサイト：ニュース動画は一部のみ
結局、私が求めているものを満たすサービスは存在しませんでした。
必要だった7つの要件
既存のサービスでは満たされない。それなら、自分で作ればいい。
私が本当に欲しかったのは、以下の7つの要件をすべて満たすシステムでした：
1. ✅ ログイン不要
アカウント作成やログインの手間をなくしたい
2. ✅ VPN接続でも安定動作
セキュリティを犠牲にしたくない
3. ✅ 複数局への簡単アクセス
日テレ、TBS、テレ朝、フジ、ABEMA、NHK、テレ東を自由に選べる
4. ✅ ワンクリックでチャンネル切替
別の局のニュースを見たくなったら、即座に切り替えられる
5. ✅ 視聴者コメントの排除
ニュース視聴に集中できる環境
6. ✅ ライブ配信の自動検出
今まさにライブ配信中のニュースがあれば、それを優先表示
7. ✅ シンプルなUI
余計な機能は一切なし。ニュースを見ることだけに特化
これらすべてを満たすアプリ。それが、今回開発した「ニュースアプリ」です。
開発したニュースアプリ
アプリの概要
開発したアプリは、極めてシンプルです：
- チャンネル選択ボタン：7つのテレビ局から選択
- 動画再生エリア：選択したチャンネルの映像を表示
- 前へ/次へボタン：キーボードの矢印キーでも操作可能
- テーマ切替：ライトモード/ダークモードの切り替え
これだけです。
「シンプルすぎるのでは？」
いいえ。これが理想なのです。
ニュースを見るという目的に対して、必要な機能だけを実装する。余計なものは一切排除する。
実際の画面イメージ
起動すると、こんな画面が表示されます：
+------------------------------------------+
| ニュースアプリ [テーマ切替] |
+------------------------------------------+
| チャンネル選択 |
| [日テレ][TBS][テレ朝][FNN][ABEMA][NHK][テレ東] |
+------------------------------------------+
| 現在視聴中: 日テレNEWS [LIVE] [←][→] |
+------------------------------------------+
| |
| YouTube埋め込みプレーヤー |
| |
+------------------------------------------+
操作は3ステップ：
- ボタンをクリック（または矢印キー）
- チャンネルが切り替わる
- 視聴開始
たったこれだけです。
主な機能
1. インテリジェントな動画選択
YouTube Data APIを使って、以下の優先順位で動画を選択します：
- ✅ ライブ配信中の動画がある → それを表示（「LIVE」バッジ付き）
- ✅ ライブ配信がない → 最新の投稿動画を表示（「最新動画」バッジ付き）
- ✅ APIエラー時 → チャンネルページへのリンクを表示（フォールバック）
ユーザーは何も考える必要がありません。常に「今見るべき動画」が自動で表示されます。
2. YouTube埋め込みプレーヤー
標準のYouTube埋め込みプレーヤーを使用することで：
- ✅ コメント欄が表示されない（埋め込み専用UI）
- ✅ おすすめ動画が表示されない（rel=0パラメータ）
- ✅ 自動再生（autoplay=1パラメータ）
YouTubeの煩わしさを完全に排除しました。
3. キーボードショートカット
マウスを使わなくても操作できます：
- ← キー：前のチャンネルへ
- → キー：次のチャンネルへ
リモコン感覚で操作できます。
4. テーマ切替機能
画面の明るさを切り替えられます：
- ライトモード：明るい背景で昼間向き
- ダークモード：暗い背景で夜間向き
選択したテーマは自動保存され、次回アクセス時にも反映されます。
5. レスポンシブ対応
PC、タブレット、スマートフォン、どのデバイスでも快適に使えます。
技術的なポイント（非エンジニア向け解説）
開発には、以下のような技術を使いました。
YouTube Data API連携
YouTube Data APIとは、YouTubeの動画情報を取得するための仕組みです。
例えば：
「日テレNEWSのチャンネルで、今ライブ配信している動画はありますか？」
「なければ、最新の投稿動画を教えてください」
このような問い合わせを、プログラムから自動で行えます。
メリット：
* ✅ リアルタイムで最新情報を取得
* ✅ ライブ配信の有無を自動判定
* ✅ ユーザーは何も考えずに「今見るべき動画」を視聴できる
クラスベースの設計
JavaScriptの「クラス」という仕組みを使って、コードを整理しました。
なぜこれが重要か？
将来、機能を追加したり、別のプロジェクトで再利用したりする際に、とても楽になります。
例えば：
「ニュースアプリを気に入ったので、今度は複数のYouTuberチャンネルを切り替えるアプリも作ってほしい」
そんなご要望があった場合、同じ設計を使って素早く開発できます。
localStorage活用
localStorageとは、ブラウザにデータを保存する仕組みです。
このアプリでは、テーマ設定（ライト/ダーク）を保存しています。
ユーザーにとってのメリット：
* ✅ 毎回テーマを選び直す必要がない
* ✅ 次回開いたときも、前回の設定が復元される
レスポンシブデザイン
Bootstrap 5というフレームワークを使い、あらゆる画面サイズに対応しました。
- PC（1920px）→ 大きな画面で快適に
- タブレット（768px）→ ボタンサイズを調整
- スマートフォン（375px）→ 縦並びレイアウトに自動変更
ユーザーは何も設定する必要がありません。デバイスに応じて、自動で最適な表示になります。
使用した技術スタック
| カテゴリ | 技術 | 説明 |
|---|---|---|
| フロントエンド | HTML5/CSS3/JavaScript | Webアプリの基本 |
| CSSフレームワーク | Bootstrap 5 | レスポンシブ対応 |
| アイコン | Font Awesome | 視覚的に分かりやすいアイコン |
| 外部API | YouTube Data API v3 | 動画情報の取得 |
これらの技術を組み合わせることで、高速で安定したアプリケーションを実現しました。
実際の使用感
開発後、約2週間ほど実際に使ってみました。
当初の7つの要件は満たされたか？
結果から言うと、完璧に満たされました：
| 要件 | 結果 | 評価 |
|---|---|---|
| ✅ ログイン不要 | ブラウザで開くだけ | ◎ |
| ✅ VPN接続でも安定 | 一度も途切れなし | ◎ |
| ✅ 複数局へのアクセス | 7局をワンクリックで切替 | ◎ |
| ✅ チャンネル切替 | 1秒以内に切り替わる | ◎ |
| ✅ コメント非表示 | 完全に排除 | ◎ |
| ✅ ライブ自動検出 | 常に最新の配信を表示 | ◎ |
| ✅ シンプルUI | 迷うことが一切ない | ◎ |
予想外のメリット
開発前には想定していなかった、嬉しい副次効果もありました：
1. ニュース比較が容易に
「この事件、各局でどう報じているんだろう？」
そんな疑問が湧いたとき、矢印キーを押すだけで、即座に別の局のニュースに切り替えられます。
結果：
複数の視点からニュースを見る習慣がついた。偏った情報に惑わされにくくなった。
2. 視聴時間の短縮
YouTubeで直接見ていたときは、関係ない動画に誘惑されて時間を浪費していました。
このアプリでは、ニュース以外の誘惑が一切ありません。
結果：
必要な情報だけを効率的に取得できるようになった。1日あたり30分ほど時間が浮いた。
3. 精神的なストレス軽減
視聴者コメントを見ないことで、余計な感情に振り回されることがなくなりました。
結果：
ニュースを「情報」として冷静に受け止められるようになった。
ユーザー第一号としての感想
私自身が最初のユーザーとして、このアプリを毎日使っています。
「自分が本当に欲しいものを作る」
これが、最高のプロダクトを生み出す秘訣だと、改めて実感しました。
お客様への提案
御社専用の情報集約アプリを開発します
「社内で複数の情報源を効率的にチェックしたい」
「業界ニュースをまとめて閲覧できるダッシュボードが欲しい」
「特定のYouTubeチャンネルを社員に見せたいが、余計な動画に誘惑されたくない」
そのようなご要望がございましたら、3万円から御社専用のニュース集約アプリを開発いたします。
提供するもの
基本パッケージ（3万円〜）：
- ✅ 7チャンネル対応版（今回開発したもの）
- ✅ セットアップ手順書
- ✅ 基本的な使い方サポート
- ✅ テーマ切替機能
- ✅ レスポンシブ対応（PC/タブレット/スマホ）
カスタム開発（5万円〜）：
- ✅ チャンネル自由設定（御社が選ぶチャンネルに変更可能）
- ✅ UIカスタマイズ（色、ロゴ、レイアウト等）
- ✅ YouTube API設定代行
- ✅ 独自ドメイン設定サポート
- ✅ 追加機能実装（例：お気に入り機能、視聴履歴等）
エンタープライズ（10万円〜）：
- ✅ 完全オーダーメイド開発
- ✅ 社内システム連携（SharePoint、Slack等）
- ✅ アクセス制限機能（社内限定公開）
- ✅ ダッシュボード機能（複数の情報源を統合）
- ✅ 継続サポート・保守契約付き
他社との違い
私の強みは、単なる「開発」ではなく、実際に使う人の視点に立った設計ができることです：
独自の価値：
- 自分自身がヘビーユーザー：実際に毎日使っている
- 課題の本質を理解：表面的な要望ではなく、根本的な問題を解決
- シンプルさへのこだわり：余計な機能は一切排除
- 25年の会社員経験：企業の情報収集業務を深く理解
- Coconala 720件の実績：確かな開発スキルと顧客満足度
開発の流れ
- ヒアリング：どのような情報を、どのように見たいかをお聞かせください
- 要件定義：御社に最適な機能と仕様を一緒に考えます
- 開発：迅速な開発（基本パッケージなら3日以内に納品可能）
- テスト・納品：実際に使っていただきながら調整
- 運用サポート：安心してご利用いただけるようサポートします
スピード感を持った開発が可能ですので、お気軽にご相談ください。
活用事例のアイデア
企業の情報収集担当者様
課題：
毎朝、複数のニュースサイトをチェックする必要があるが、ログインやタブ切り替えが面倒
解決策：
ブックマークから一発で起動し、7つのニュース局をワンクリックで切り替え
→ 情報収集時間が半分に短縮
効果：
朝のニュースチェック 60分 → 30分に短縮
浮いた時間を分析業務に充てられる
メディア研究者・学生様
課題：
複数の報道機関の報道内容を比較研究したいが、各サイトを行き来するのが大変
解決策：
同じトピックに対する各局の報道を、矢印キーで瞬時に切り替えて比較
→ 研究効率が大幅に向上
効果：
報道比較分析の時間が短縮
より多くのサンプルを分析可能に
広報・PR担当者様
課題：
自社の報道状況を複数局で確認したいが、YouTubeのコメント欄は業務には不要
解決策：
コメント欄のない環境で、各局の報道を効率的にモニタリング
→ 業務に集中できる
効果：
報道モニタリング業務の効率化
余計な情報に惑わされない
高齢者向けデイサービス様
課題：
利用者にニュースを見せたいが、YouTubeの操作は難しい。余計な動画も避けたい
解決策：
大きなボタンで簡単にチャンネル切り替え。シンプルなUIで誰でも操作可能
→ スタッフの負担軽減、利用者満足度向上
効果：
操作説明の時間が不要に
安心して利用者に操作を任せられる
英語教室・学習塾様
課題：
NHK WORLD-JAPANで英語ニュースを見せたいが、他の動画に気が散ってしまう
解決策：
NHK WORLDボタンを押すだけで、すぐに英語ニュースを視聴開始
→ 学習に集中できる環境
効果：
生徒の集中力向上
余計なコンテンツに誘惑されない
個人投資家様
課題：
経済ニュースを複数のソースから確認したいが、ログインや広告が煩わしい
解決策：
テレ東BIZ、日テレ、FNNを瞬時に切り替えて経済ニュースを比較
→ 投資判断の質が向上
効果：
情報収集の効率化
多角的な視点で市況を把握
このシステムの応用可能性
このニュースアプリの仕組みは、ニュース以外にも応用できます。
YouTubeチャンネル集約システムとしての展開
例1：企業向け教育動画ポータル
複数の社内研修チャンネル、外部セミナー、業界情報チャンネルを統合。
社員が効率的に学習できる環境を構築。
例2：趣味・エンタメチャンネルハブ
お気に入りのYouTuberやバンド、料理チャンネルなどを一箇所に集約。
個人の情報収集・娯楽体験を最適化。
例3：教育機関向け学習プラットフォーム
教科ごとに選定した教育系YouTubeチャンネルを統合。
生徒が余計な動画に誘惑されない学習環境を提供。
他の動画プラットフォームへの対応
YouTubeだけでなく、以下のような対応も可能です：
- Vimeo：プロフェッショナル向けポートフォリオ集約
- ニコニコ動画：特定ジャンルの動画まとめ
- 複数プラットフォーム統合：YouTube + Vimeo + 自社動画サーバー
重要なのは、「情報を効率的に取得したい」というニーズです。
そのニーズがある限り、このシステムの応用範囲は無限大です。
おわりに
「ニュースを見るだけなのに、なぜこんなに面倒なのか」
その小さな不満から始まったこのプロジェクトは、結果として私の日常を大きく変えました。
毎朝のニュースチェックは、もはやストレスではなく、効率的な情報収集の時間になりました。
「自分が欲しいものを、自分で作る」
これは、システムエンジニアとしての特権です。
しかし同時に、同じような課題を抱える方々にも、この解決策を提供したいという思いがあります。
もし御社や個人で、以下のようなお悩みがございましたら：
- 複数の情報源を効率的にチェックしたい
- 特定のYouTubeチャンネルを社員・家族に見せたいが、余計な誘惑を排除したい
- シンプルで使いやすい動画閲覧環境が欲しい
ぜひお気軽にご相談ください。
実際に毎日使っているからこそ分かる、本当に必要な機能だけを備えたシステムをご提供いたします。
お問い合わせ
ニュース集約アプリ、または類似システムの開発に関するご相談は、お気軽にお問い合わせください。
ご連絡をお待ちしております。