#daiizメモ

ときどきいいことを書きます

金曜日

夜空に咲き乱れる花火の光とその光の軌跡が生み出す、躍動感あふれるバネの花火を作って!

バネの花火

独自のGoLinksを実装して運用している

GoLinksについてはすでに世の中に多数の運用例があり、例えばこれらの記事が参考になります。自分や組織だけのShort URLを作れるシステムです。ウェブブラウザのアドレスバーにgo/blogと入力したらこのブログにリダイレクトさせたりできます。

また、GitHubを探せばOSSプロジェクトもたくさんあるでしょう。Webサービスも見つかります。

今回は、これを自作した話です。車輪の再発明ではありますが、完全に自分好みの仕様で設計できたり、突然のサービス終了リスクに身構える必要がなくなります。また、今の時代はこの手の小さなツールはほとんどをClaude Codeが書くので再発明のコスト自体も小さくなりつつあります。

ということで、できました。ここ一週間くらい毎日使っています。これのおかげでブラウザのブックマークバーがすっきりして、次になんとかしたいのはブックマークレットだ、という感じになっています。生活に密着していていい調子です。

  • http://go/の解決はChrome拡張機能で行う
    • background.jsで chrome.declarativeNetRequest という技術を使ってリクエストを横取りしている
    • popup.htmlでの操作をトリガーとして、chrome.declarativeNetRequest.updateDynamicRules が実行され、拡張機能内部でのリダイレクトルールが書き換えられる。リダイレクトのマッピングはすべてここで事前登録されるため、アクセス時には無駄な処理は走らない。
    • Image from Gyazo
  • Short URLの名前とリダイレクト定義はCosenseで行う
    • コードブロック記法でタブ区切りで書いてテキストファイルとして配信する。今回はCosenseを使うことでサーバーを用意する手間が省けた。(任意のサーバーでテキストファイルを配信できればよいので自由度が高い)
    • 例: https://scrapbox.io/api/code/daiiz/GoLinks/redirects.txt
  • 存在しないShort URLにアクセスしたときは定義用のCosenseページを開く
    • その場で新規登録できる
    • 厳密にはリダイレクト定義ファイルで 404 の遷移先を指定できるようにしてある

パブリック系のリソースに割り当てたgo/の他にも、TeamJ用のj/や、自分限定の d/*1 などもあります。go系はgo/tenbyo*2go/code*3 など、出先でMacBookでデモするときにシュッと開けて嬉しいものを登録しています。クエリパラメータにも対応しているので、go/blog?q=京都のようにこのブロクの記事検索画面に誘導することもできて便利です。

アドレスバーに入力するだけでなく、aタグでの遷移も問題なく動きます。

Image from Gyazo

プライベートな用途では、j/wikiでTeamJ専用のCosenseを開いたり、d/moneyでマネーフォワードの特定の画面を開いたりできます。また、手書きのノートにd/Phonnod/snapshotsと書くだけでどのプロジェクトの話をしているのかが明確になります。

さらに、ファンとして応援している櫻坂46関連のコンテンツにすぐに辿り着けるのも最高です。これらは配信サービス名と番組名の組で覚える必要があるため、嬉しい悲鳴ではありますが、追いかけるものが増えるほど厳しくなっていきます。このように普段の呼び方で登録しておけばOKです。

Image from Gyazo

自分が欲しいアプリを自給自足できる世界、いいですね!

*1:daiizの"d"です。

*2:点描画変換ツール

*3:GitHubのリポジトリリストページ

最近知ったこと

年末なのでブログの下書きの大掃除を始めます.
最近知ったことについて,書きかけだったので完成させました.

Chromeのブックマークバーについて、最近知ったこと

ブックマークバーのアイコンに矢印カーソル乗せて,マウスホイールを押すと新しいタブでページが開く. いままでは右クリックメニューで「新しいタブで開く」を実行していたので,かなりラクになる.さらに試してみると,Chromeで表示されているウェブページ内のリンクに対しても同様のことが効いた.

macOSのFinderについて、最近知ったこと

MacのFinderで簡単にプレビューできそうなファイルをクリック選択して,スペースキーを押すとファイルのプレビュー画面が開く.テキストファイルで試すした場合,いきなりテキストエディタで開かれるのではなく,とりあえず見るだけのパネルみたなものが開かれる.Pythonのソースファイルなども Atom や XCode は起動しないので素早く中身を確認できる.もちろん画像ファイルもOK.ESCキーで終了できる点も便利だと思う.

Quiet tone

Googleドライブの容量追加購入の手順

Gmailの受信ボックスの上部に突然このような警告が出てきた.遂にGoogleドライブの無料枠を超過してしまった.そういえばこの前,容量が危ないですというようなメールがグーグルから来ていたような気がする.

f:id:daiiz:20161114231819j:plain

原因を調べてみると,Chromebookを買ったときに貰ったドライブ容量サービス(たしか +100GB)が期限切れになってしまったようだ.ということで,通常通りに戻すためには次のどちらかをやらないといけない.

  • ゴミ箱を空にしたり,不要なメールやファイルを削除する
  • 容量を追加購入する

まずは前者を試みようと思い,いまどれだけ使用しているのか確認した.Googleドライブ,Gmail,Google フォトで使用している容量を調べるためには このページ に行けばよい.

f:id:daiiz:20161114232549p:plain

無料枠 17GB(15GB + キャンペーンボーナス2GB) に対して,約44GB もある....ファイルを少し消せばなんとかなる量ではないので,容量を追加購入することにした.同じ画面で幾つかのプランの中から購入する容量を選べる.現時点では以下のようなプランが用意されている.

  • 100GB 250円 / 月
  • 1TB 1,300円 / 月
  • 10TB 13,000円 / 月
  • 20TB 26,000円 / 月
  • 30TB 39,000円 / 月

どれかのプランのボタンを押すと Android アプリを購入するときのように支払い方法について聞かれるので,クレジットカードを選択する.これで毎月請求が来るようになるらしい.

f:id:daiiz:20161114233056p:plain
プランを選択

f:id:daiiz:20161114233118p:plain
支払い方法を選択

f:id:daiiz:20161114233505p:plain
容量チャージ!!!!!

1TBにグレードアップする日が来ないように気を付けます.

ウェブ広告について少し考えた

Google AdSense の仕組みや使い方に慣れてきたところで,AdSenseを含めたウェブ広告について少し考えてみた.

基本的なこと

Google AdSense のようなウェブ広告サービスでは,ウェブページの作者が予めページに広告枠を仕込んでおくことで,そのページの内容や読者さんの興味関心に合った広告を枠内に掲載してくれる.表示される広告の商品や企業にネガティブな印象を与えてはいけないので,ページ内に広告枠を設けるにあたっていくつかルールが定められている.

難しさポイント

難しいと思ったこと

  • 広告数多すぎとかデザイン崩れで広告重なってしまっているというようなミスが起きていないか気になるけれど,完璧には確認できない
  • 広告枠数の調節.どれくらいが適量なのだろうか.
  • 自作のウェブサービスに埋め込む場合(まだ検討中で埋め込んでいない)
    • 例えば,Instagramのようなユーザーが写真を投稿するウェブサービスの写真プレビューページに Adsense を表示させることを考えてみる.プレビューページを構成するUIパーツなどは僕が作って確認しているため不適切なコンテンツは無いけれど,ユーザーが投稿した写真の適切さまでは分からない.
    • このような場合は,Cloud Vision API などで不適切画像判定を行った後に広告枠を有効化しないといけないのか.
    • 小説投稿サイトだったらどうするのか.全文解析は難しそう.
    • このような用途向けの広告プランが別途用意されているのかもしれない.

考えたこと

上に挙げたような難しさポイントを解決できるかもしれないアイデア.既に導入されているけど僕が気付いていなかったり,既に効果がないのことが確かめられて導入されていないことかもしれないけれど書いておく.

  • 広告配信サービス側(AdSense側)でページ内の任意個数の枠を消せるようにする.

    • ページに合った内容の広告を挿入できるということは,ページ内容をおおまかには把握できているはずなので,その内容が広告に相応しくないのであれば iframe 枠のCSSを display: node として不可視化したり,まるごと除去したりして,広告枠を消してもらっても良い気がする.
    • 他の競合記事と比較して広告枠数が記事の分量に見合わないと判断されたなら,相応しい量になるように増減してもらうのも良いかもしれない.ページの作者はこれまで通り自分なりに考えた枠数を設置すればOK.
    • 万が一変なところに表示されてしまって,ミスクリックが発生しそうなのであれば,付近の適切な位置に移動してくれる機能もあればありがたい.
  • 役割が増えてしまったのでブラウザにページ広告管理の機能を任せる.

    • ページ作者は使用したい広告サービスと希望する広告枠数をHTMLに記述しておき,これに基いてブラウザが適切な位置にオークション制で適量の広告を差し込むというアイデア.
f:id:daiiz:20161113013416p:plain