- 2026/08/13 Thu
-
コードブロックがある時にスマホからだと意図した表示になっていなかったのをずっと放置していたけどようやっと修正。
…したんだけど、手持ちのスマホで反映されず。
キャッシュのせいか。
仕方ないので、cssのリンクにクエリパラメータを付与。
これいい加減なんとかならんのかね。TweetVault②
アクセス改善
バックエンドへのアクセスが localhost になっていたのをポートフォワードで捻じ曲げていたけど、ポートフォワードなしで動くようにしたい。
frontend/src/lib/api.ts に下記コードがあり、.env に NEXT_PUBLIC_API_URL を定義してやればいいのねと思ったけどダメ。const API_BASE_URL = (process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8080') + '/api';
それならと、この定義を直接書き換えてみたけどダメ。は?
調べてみると、frontend/.next/server/app/page.js で API_BASE_URL が設定されていた。
で、そこの元はどこだと探すと docker-compose.yml。frontend: environment: - NEXT_PUBLIC_API_URL=http://localhost:8080
ここを仮想環境のアドレスに書き換えて解決。データ反映の改善
タグを付与した後、しばらくしないと反映されないのをどうにかしたい。
調べた感じ、- DBには即時反映されている
- APIを直接叩いてみると、単体取得では即時反映されているのに、ページ取得では即時反映されていない
なんでページ取得だと即時反映されないんだと思いながらDBの構造眺めてたらマテリアライズドビューが。
マテリアライズドビュー経由かどうかの差異だなこれ。
以下の対処で解決。- マテリアライズドビューと同じ内容のビューを別名で定義
- 新規ビューから取得するよう向き先を変更
backend/internal/models/materialized_view.go@@ -31,3 +31,3 @@ func (BookmarkView) TableName() string { - return "bookmark_views" + return "bookmark_views_normal" }未整理ブックマークの表示
タグを付与していないデータだけを表示したい。
ダミーのタグを作成し、絞り込み条件でそのタグを指定された場合はタグのないデータを抽出するよう対応。backend/internal/services/bookmark_service.go@@ -202,3 +202,5 @@ // Apply tag filter if provided - if tag != "" { + if tag == "untagged" { + query = query.Where("tags_json::jsonb = ?", "[]") + } else if tag != "" { query = query.Where("tags_json::jsonb @> ?", fmt.Sprintf(`[{"name":"%s"}]`, tag))
これなんでマテリアライズドビュー使ってるんだろと思っていたけど、「1件の投稿に紐づくn件の情報(メディア、タグ)を PostgreSQL の機能を使って JSON 変換、1カラムとして取得」とかしてるからか。
変換のオーバーヘッドを減らすためなんだな。
なるほどーと思ったけど、とんでもないことやってんなw 今、瞬断したな?
- 2026/08/12 Wed
-
Xのブックマークが2500件とかになっていて整理したかったのでアドオンなど見てみる。
Chrome 拡張機能
「X bookmark tag」で検索XSaved — Bookmark Manager for X (Twitter)
- ブックマークタブを独自表示と切り替える形式
- 日本語でタグは付けられるけど、検索できないのが致命的
- タグがマウスオーバー時しか表示されないというのもマイナス
X Bookmark Manager & Exporter (Twitter)
- エクスポートして外部サイトに登録する形式
- UIがカス
XBookmark - Twitter Bookmark Manager
- 別画面を表示する形式
- クソデカ広告が表示されてカス
Favourites.io Search X/Twitter Likes and Bookmarks
- エクスポートして外部サイトに登録する形式
- 有償
X Bookmark Tagging
- サイドパネルを表示する形式
- 国産
- 無償だとタグが3つしか作成できないので実質有償
- そもそも1投稿に対して1つのタグしか付けられないのが致命的
X (Twitter) Bookmark Exporter
- 上の X Bookmark Manager & Exporter と同じ
X Vault - X スマートブックマーク管理
- 別画面を表示する形式
- 無償だとデフォルトのタグしか使用できないので実質有償
Noya — Read Your X Bookmarks
- 「この拡張機能は、セーフブラウジング保護強化機能で信頼されていません」警告がでるので試さず
Xtash
- フロート画面を表示する形式
- タグが付与済みかどうかは視認できるが、クリックしないとなんのタグを付与しているか確認できないのがマイナス
XBookmark Tagger
- 「この拡張機能は、セーフブラウジング保護強化機能で信頼されていません」警告がでるので試さず
TweetVault
- 別画面を表示する形式
- インポート時に投稿内のタグからタグ付けされるのが邪魔。そういうことじゃないんだよ。
- 表示がリスト形式なのもマイナス
サービス
dewey
- インポート時に投稿内容からAIでタグ付けされるのが邪魔。余計なことをするな。
- 無償だとタグ付けできないので実質有償
GitHub
TweetVault
- Chrome 拡張機能に同名のものがあったが別物
- ローカルでWEBアプリを構築する形式
GitHub の方の TweetVault が面白そうだったので別途まとめ。TweetVault
GitHub - helioLJ/TweetVault: A full-stack bookmark manager for Twitter/X posts with tagging, search, and archiving capabilities. Built with Next.js, Go, and PostgreSQL. · GitHub
https://github.com/helioLJ/TweetVaultインストール
Docker の利用が推奨されている。
手持ちの Linux 環境が古いものばかりだったので新規構築しようとしたけど、どうも最近の Ubuntu は Windows Server 2012 の Hyper-V だとカーネルパニックでこける。
仕方ないので、Windows 11 の Hyper-V で構築。
Ubuntu 26.04 Server install image を使用。2026年版:UbuntuへのDocker & Docker Compose 推奨インストール手順 - TUKUMO工房
https://tukumolog.com/ubuntu-docker-compose-install-2026/
を参考に Docker をインストール。
続けてコンテナをビルド。実行
Access the application:
Frontend: http://localhost:3000
Backend API: http://localhost:8080
Database: localhost:5432
マニュアルに従い、仮想環境のポート3000にアクセス。
画面は表示されたが、TypeError: Failed to fetch
といったエラーが表示される。
デバッガで見た感じ、バックエンドへのアクセスが仮想環境ではなく localhost になってしまっている。
設定でどうにかできそうな気がしたけど、いったんターミナルソフトのポートフォワードで localhost に対するアクセスを仮想環境に流す。
エラーは変わらず。
ログを見ると起動途中でバックエンドがFailed to load configuration: error loading .env file: open .env: no such file or directory
を吐いている。
確かに .env ファイルはない。
Docker を利用しない場合のインストール手順に .env ファイルについて記載があったので、そちらに従い配置。
これでエラーは解消。ブックマークのインポート
ブックマークは別ツールでエクスポートしたファイルをインポートする形式なので、そちらのツールの導入から。
Tampermonkey か Violentmonkey が必要ということなので、Violentmonkey をインストール。GitHub - prinsss/twitter-web-exporter: Export tweets, bookmarks, lists and much more from Twitter(X) web app. (推文/书签/收藏/列表导出工具) · GitHub
https://github.com/prinsss/twitter-web-exporter
WebExporter の「データをエクスポート」で JSON ファイルを出力。
続いて TweetVault の「Upload Bookmarks」からアップロードしようとしたところはじかれた。
メディアのエクスポートファイルとセットでアップロードする必要があるらしい。
WebExporter から「メディアをエクスポート」をするにあたり、ブックマーク数がアホみたいにあるのでお試しで数件だけ選択してエクスポート。
ブックマークの JSON ファイルとメディアの ZIP ファイルを両方指定することでアップロードは通った。
表示もOK。
ブックマークは全量あり、画像はメディアをエクスポートした対象だけ表示されている状態。画像の補完
わざわざ画像をインポートさせているのだからその画像を表示しているのかと思いきや、画像は元のアドレスから表示されていた。
テーブルの構造を見た感じ、バイナリは保持しているようだけど、なくてもいけそうな?列名 内容 id 連番 tweet_id JSON内の id type JSON内の media->type url JSON内の media->url thumbnail JSON内の media->thumbnail original JSON内の media->original file_data ZIP内のファイル実体 file_name ZIP内のファイル名 created_at 作成日時 updated_at 更新日時
file_data と file_name を除外した状態でデータを補完してみたところ、問題なく表示された。import json with open('export.json', encoding='utf-8') as fp: obj = json.load(fp) i = 0 for x in obj: for media in x['media']: i += 1 sql = "insert into media (id,tweet_id,type,url,thumbnail,original,created_at,updated_at)" \ " values ({},'{}','{}','{}','{}','{}',current_timestamp,current_timestamp);".format( \ i, \ x['id'], \ media['type'], \ media['url'], \ media['thumbnail'], \ media['original']) print(sql)画像表示のカスタマイズ
画像の縦横サイズが一律になっており、縦長の画像だと中央部分だけの表示になっている。
これをどうにかしたい。
高さを指定している場所が見つからず悩んだけど、幅と縦横比から決定されていて直接指定されてなかった。ああ。
BookmarkCard.tsx の下記を修正して解決。- img タグの親 div に指定されている aspect-video クラスが縦横比の指定なのでこれを外す
- 親 div で高さが決定されなくなると fill で付与される position:absolute が原因で画像が表示されなくなるので fill を外す
- fill を外すと幅と高さを求められるので別途指定
frontend/src/components/bookmarks/BookmarkCard.tsx@@ -342,3 +342,3 @@ key={media.id} - className="relative aspect-video cursor-pointer overflow-hidden rounded-lg w-full" + className="relative cursor-pointer overflow-hidden rounded-lg w-full" onClick={() => setSelectedMedia({ @@ -351,3 +351,5 @@ alt="" - fill + width={0} + height={0} + style={{ width: "100%", height: "auto" }} quality={100}
ブックマークの同期が手動なのは手間だけど、自前でカスタマイズできるってのはいいかなと。 ケンタッキーのウマ娘コラボメニューをアテに飲酒。
- 2026/08/11 Tue
- 賞味期限が8/2の飲むヨーグルトが発掘されたので飲む。 納豆の賞味期限も切れてたので食う。
- 2026/08/10 Mon
-

「永谷園監修 広東風かに玉風味まん」永谷園「広東風かに玉」をイメージしたフィリングを包みました。
「永谷園監修 麻婆春雨まん」永谷園「麻婆春雨」をイメージしたフィリングを包みました。
- 2026/08/09 Sun
-
ブラックニッカ4リットル補充。
ポテチとシソの葉をいっしょに食うやつやってみたけど別にうまくはない。
シソの葉20枚をもさもさ食う。 ワタサバが全話無料になってたのでまとめて読む。
高校教師編の評価が高いのが気になってたんですよね。
本田さん別人になってません?
- 2026/08/08 Sat
-
パスタの多いトルコライス。
16:50 組長 十徳応援いくか
16:51 なや ファイトだよ!(スタンプ
16:52 なや んじゃいくか
16:53 組長 あはっ(スタンプ
というわけで、別館営業中の十徳へ。酒処十徳
http://www.juttoku.com/2026年8/1~8/31まで十徳本店はビルメンテナンスのため休業させていただきます。 この間は、十徳別館で営業を行います(8/4~8/28 定休:日曜・月曜)。


一杯目は写楽。
別館限定メニューの松坂牛肉すき焼き。

お次は栄光冨士。
栄光冨士の本醸造って初めて飲みましたね。
じゃがいもアンチョビソース。

自分が西條鶴、組長が酔鯨 Summer。
まぐろ脳天タタキ。

自分が鍋島ブルーラベル、組長が鳳凰美田。
白オクラ自家製ポンズかけ。

作の和悦。
福耳とうがらしと豚肉のみそ炒め。

すずしな。
カウンターに並んでいる桶はなんだろと思っていたらこれのため。
グラスでの提供もあるってことだったけど、せっかくなので桶でだしてもらう。
うなぎ蒲焼串と旬野菜串揚げ5種盛り合わせ。- 福島 写楽 純米酒
- 山形 栄光冨士 辛口本醸造
- 広島 西條鶴 無濾過純米酒
- 高知 酔鯨 吟麗 Summer
- 佐賀 鍋島 ブルーラベル 愛生
- 栃木 鳳凰美田 限定酒 本吟醸 無濾過生酒
- 三重 作 純米吟醸 和悦
- 秋田 すずしな 生貯蔵酒
オールドバレー (OLD VALLEY) - 新宿/バー | 食べログ
https://tabelog.com/tokyo/A1304/A130401/13095497/
ここのところずっとスコッチだったのでたまにはバーボンをと、ノブクリーク。
ラフロイグ ホグスヘッド。
これは前回も飲んだやつですね。
ワットウイスキー インチガワー。
マスターオブモルト ダルユーイン。 さらにラーメン屋にもなだれ込む。
伍福軒に取って代わられた思ったらほどなくして復活した天一へ。

唐揚げ定食。
- 2026/08/07 Fri
-
明日から夏季休暇に入るので今日は日本酒でも飲もうかなと。
スーパーで刺身買って帰るかと思ったけど、近所の や台寿司が持ち帰りに対応していたなとモバイルオーダーしてみる。
刺し盛にガリ天、タコの唐揚げを注文。
刺し盛はマグロ、イカ、タイ、ハマチ、エビ、ツブ貝、ウニ、カズノコ、イクラと結構な品数。
- 2026/08/06 Thu
- 令和のダラさんのOPをずっと聞いてる。
- 2026/08/05 Wed
-
普段利用しない共用階のトイレの個室を利用したところ、腰を掛けた瞬間にせせらぎの音が。「音姫?!やばい女子トイレだったか?!!」
慌てて出ようと扉を開けたら目の前に小便器。
男子トイレだ。
扉をそっと閉じる。
- 2026/08/04 Tue
-
十徳の古民家営業が今日からのはずなので行ってみる。

開いてる!

両関になめろう。

懐かしい店内。
お次は喜楽町のセカンド。

亀齢にちくわの磯辺揚げ。
会計時、店員さんに古民家久しぶりでしたって話をしたら、「こっちも久しぶりです」って返されて笑った。古民家営業メモ
- 本店で配布していた割引券は古民家用
- 古民家でも割引券を配布しており、こちらは本店用
- 古民家営業中はスタンプ押下なし
- 秋田 両関 純米酒
- 滋賀 喜楽町 純米酒 セカンド
- 広島 亀齢 辛口純米 八拾
< Previous | Next >