Jekyll2026-11-04T15:11:53+00:00https://github.com/blog/feed.xmlexpr-1782のブログです。 今後はnoteではなく、こちらで記事を書いていこうと思います。expr-17822026-11-04T08:30:00+00:002026-11-04T08:30:00+00:00https://github.com/blog/%E9%89%84%E9%81%93/%E6%97%A5%E6%AF%94%E8%B0%B7%E9%A7%85%E7%99%BA%E8%BB%8A%E3%83%A1%E3%83%AD%E3%83%87%E3%82%A3<p class="notice--info"><strong>千代田線は収録環境が悪く、公開できていません。ご了承ください。</strong></p> <p>日比谷線 日比谷駅の旧発車メロディを収録したので公開します。 新発車メロディは今後公開予定です。</p> <h2 id="旧発車メロディ">旧発車メロディ</h2> <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/wDg3DIxwem0?si=sgGNUk9d9bIzVRu4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen=""></iframe>expr-1782

千代田線は収録環境が悪く、公開できていません。ご了承ください。

2026-11-04T05:30:00+00:002026-11-04T05:30:00+00:00https://github.com/blog/it/%E4%B8%8D%E8%A6%AA%E5%88%87%E3%81%AA%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3%E7%94%BB%E9%9D%A2%E3%81%AE%E6%84%8F%E5%91%B3<h2 id="ログイン画面でこんなことはありませんか">ログイン画面で、こんなことはありませんか？</h2> <p><img src="/blog/assets/images/ログイン.png" alt="ログイン画面" /> これ、地味に不便ですよね。でもこれは、ユーザーを守るための仕組みなんです。</p> <h2 id="なぜこの画面なのか">なぜこの画面なのか</h2> <p>なぜかというと、フィッシング詐欺や迷惑メールなどから守るためです。</p> <p>「メールアドレスとパスワードどちらが違うか」を正確に教えると、 悪質な業者にとって、ログイン画面は、「そのメールアドレスで登録されたアカウントが存在するかどうか確認するためのサイト」になってしまいます。</p> <p>このような目的でログイン画面を使わせないため、あえてぼかしているのです。</p> <h2 id="裏のログを解析して除くことはできる">裏のログを解析して除くことはできる？</h2> <p>これも不可能です。先ほど紹介した対策を施しているサイトの大半は、「成功」「失敗」の2パターンのログしか出力しません。 <img src="/blog/assets/images/ログイン2.png" alt="サーバーからのログについて" /></p> <h2 id="おわりに">おわりに</h2> <p>曖昧なログイン画面は、地味だけど優秀な対策ということがわかりましたね。それではこの記事は以上です。</p>expr-1782

ログイン画面で、こんなことはありませんか？ これ、地味に不便ですよね。でもこれは、ユーザーを守るための仕組みなんです。 なぜこの画面なのか なぜかというと、フィッシング詐欺や迷惑メールなどから守るためです。

2026-11-02T06:00:00+00:002026-11-02T06:00:00+00:00https://github.com/blog/%E9%96%8B%E7%99%BA/%E7%8B%AC%E8%87%AA%E3%81%AE%E3%80%81RSS%E3%83%AA%E3%83%BC%E3%83%80%E3%83%BC%E3%82%92%E4%BD%9C%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F%20copy<p class="notice--info"><strong>※この記事はnoteからの移行となります。</strong></p> <p>今回は、「RSSリーダー + α」のWebアプリを大きく作り変えて、ほぼ完成形になったので、その紹介とこだわりポイントについて書いてみようと思います。</p> <h2 id="どんなアプリを作ったの">どんなアプリを作ったの？</h2> <p>一言で言うと、<strong>「個人情報をサーバーに預けず、ブラウザだけで完結する軽量RSSリーダー」</strong>です。</p> <p>シンプルにニュースやブログをチェックできるだけでなく、ヘッダーに現在の天気情報がちょこんと表示される機能を＋αとして搭載しています。</p> <h3 id="主な特徴">主な特徴</h3> <ul> <li><strong>完全ローカル完結（Local-First）</strong> <ul> <li>アカウント登録や外部サーバーへのデータ保存は一切なし。</li> <li>フィード情報や設定はすべて自分のブラウザ（<code class="language-plaintext highlighter-rouge">localStorage</code>）に安全に保存されます。</li> </ul> </li> <li><strong>BYOK（Bring Your Own Key）方式</strong> <ul> <li>天気データなどの外部API利用には、ユーザー自身が取得したAPIキーを入力する仕組みを採用。</li> <li>サーバー維持費ゼロ・セキュリティリスクゼロを実現しています。</li> </ul> </li> <li><strong>スマホアプリ風の洗練されたUI</strong> <ul> <li>Tailwind CSSとFlowbiteを使用しています。</li> </ul> </li> </ul> <h2 id="なぜ作ったのか開発の背景">なぜ作ったのか？（開発の背景）</h2> <p>既存のRSSリーダーは高機能で便利な反面、以下の点が少し気になっていました。</p> <ol> <li>アカウント管理の手間</li> <li>サーバー側に自分の閲覧傾向などのデータが残るプライバシー上の懸念</li> <li>有料プランはできるだけ避けたい人がいること</li> </ol> <p>そこで、「データも権限もすべてユーザー自身が所有し、無駄な中継サーバーを挟まない仕組みにすれば、一生無料で安全に使い続けられるのでは？」と考え、JavaScript（Vanilla JS）とTailwind CSS（初期はMaterializeで開発）で一から構築しました。</p> <h2 id="こだわりのポイント">こだわりのポイント</h2> <h3 id="ユーザー主導のアプリであること">ユーザー主導のアプリであること</h3> <p>天気情報の取得にはOpenWeatherMapのAPIを利用していますが、アプリ側で共有のキーを持たず、ユーザーに自身のキーを入れてもらう構成にしました。</p> <ul> <li><strong>メリット</strong> <ul> <li>運営コストを抑えられる</li> <li>APIキーへの不正アクセスの心配がほぼ不要</li> </ul> </li> <li><strong>デメリット</strong> <ul> <li>最初の登録に少し手間がある（後ほど解説）</li> </ul> </li> </ul> <h3 id="天候によって表情を変えるui">天候によって表情を変えるUI</h3> <p>天気の詳細モーダルは、その時の天候（晴れ・夜・雨・雪など）に合わせて背景のテーマカラーが動的に変化します。RSSチェックのついでに、少しワクワクするような体験を目指しました。</p> <p>天気の都市は、世界各地の主要都市（日本だと東京や大阪、名古屋、札幌など、アメリカだとクパティーノやニューヨークなど、シンガポール、モスクワ、パリなど）に対応しています。</p> <h2 id="大変だった点">大変だった点</h2> <h3 id="基礎を一度作り変えた">基礎を一度作り変えた</h3> <p>ここが開発中で最も大変なポイントでした……！</p> <p>最初は Materialize CSS を使って構築していたのですが、作っていくうちにデザインの拡張性やカスタマイズ性に限界を感じ、Tailwind CSS + Flowbite への移行を決断。</p> <p>コードを一度バラバラにして作り直す作業となり、生成AI（AIアシスタント）と共にコードの移行を進めたものの、途中でAIが想定外の書き換えをしたりハルシネーションを起こしたりと悪戦苦闘。それでも粘り強くデバッグを重ね、なんとか理想の完成形まで持ち込むことができました！</p> <hr /> <h2 id="openweathermapの無料apiキー取得方法">OpenWeatherMapの無料APIキー取得方法</h2> <p>このRSSリーダーの天気表示機能を使うには、OpenWeatherMap（無料）のAPIキーが必要です。数分で簡単に取得できるので、以下の手順でお試しください。</p> <h3 id="step-1-無料アカウントを作成する">Step 1: 無料アカウントを作成する</h3> <ol> <li>OpenWeatherMap 公式サイトにアクセスします。</li> <li>以下の項目を入力してアカウントを作成します。 <ul> <li><strong>Username:</strong> ユーザー名（英数字）</li> <li><strong>Email:</strong> メールアドレス</li> <li><strong>Password:</strong> パスワード</li> </ul> </li> <li>いくつかあるチェックボックスすべてにチェックを入れます。</li> <li>「Create Account」ボタンをクリックします。</li> </ol> <h3 id="step-2-メール認証を完了させる">Step 2: メール認証を完了させる</h3> <ol> <li>登録したメールアドレス宛に OpenWeatherMap から確認メールが届きます。</li> <li>メール内の <code class="language-plaintext highlighter-rouge">Verify your email</code> ボタン（または認証リンク）をクリックして認証を完了させます。</li> </ol> <h3 id="step-3-apiキーを取得コピーする">Step 3: APIキーを取得・コピーする</h3> <ol> <li>ログイン後、画面右上のユーザー名をクリックし、メニューから <strong>「My API keys」</strong> を選択します。</li> <li><strong>「Key」</strong> の欄に長めのアルファベットと数字の文字列（例: <code class="language-plaintext highlighter-rouge">a1b2c3d4e5...</code>）が表示されているので、これをコピーします。</li> </ol> <p class="notice">※自分で新しいキーを発行したい場合は、右側の <code class="language-plaintext highlighter-rouge">Create key</code> から新しい名前をつけて生成することもできます。</p> <h3 id="step-4-rssリーダーアプリに入力する">Step 4: RSSリーダーアプリに入力する</h3> <ol> <li>サイドバーから、<strong>設定 &gt; 天気設定</strong> にアクセスします。</li> <li>コピーしたAPIキーを「API Key」入力欄に貼り付けて「保存する」を押します。</li> <li>お好みで地域名（例: <code class="language-plaintext highlighter-rouge">Tokyo</code> や <code class="language-plaintext highlighter-rouge">Osaka</code>）を設定すれば、ヘッダーに現在の天気が自動で表示されます！</li> </ol> <p class="notice--warning"><strong>注意：</strong> アカウントを作成したばかりの初期キーは、登録直後だと <strong>キー無効（401エラー）</strong> になることがあります。有効化されるまで20分ほどかかる場合があるため、うまく表示されない場合は少し時間をおいてから再度お試しください。</p> <hr /> <h2 id="まとめと今後の展望">まとめと今後の展望</h2> <p>今回のアプリは一般公開しています。「サーバーに頼らずブラウザの力で自律して動かす」という設計思想（Local-First）の快適さを改めて実感しました。</p>expr-1782

※この記事はnoteからの移行となります。