221


231106~

Twitterの色を少し強化する拡張機能

つくったもの

 

0. 目次

  1. 拡張機能紹介
  2. 導入方法
  3. 色のカスタマイズ方法
  4. ソースコード公開
  5. 没供養

1. 拡張機能紹介　　　　　ここをクリックで表示切替できます

1.1. 機能

次の①と②の二か所の色を好きな色に変更できます。（①と②はそれぞれ独立でなので、新しく選ぶ色は2種類です。）
画像は、①と②の両方を濃い青色に設定した場合です。

  • ①ツイートボタンをホバーした時の色を変えられます

      • ホバー前
    hover前の画像
      • ホバー中
    hover中の画像

  • ②その他細かい部分の色を変えられます

      • 公式バッジ（青のだけ）
    公式バッジの画像
      • 通知欄の 人アイコン, ベルアイコン
    通知欄の人アイコンと通知アイコンの画像
      • ツイート欄の 各アイコン（ホバー時）

1.2. ポップアップ画面

ポップアップ画面も作りました。
ポップアップ画面は、chromeブラウザの右上に表示される拡張機能アイコンをクリックすることで表示されます。 

1.3. 注意点

  • 急に動かなくなる可能性アリ

    Twitter側のアップデートなどにより、html要素に改変が入った場合、指定しているスタイルが外れてしまいます。
    こうなった場合、拡張機能は削除してください
    おそらくもっと技術があれば解決します　　第5.2節で詳細

 

2. 導入方法

2.1. DLページ

2.2. 導入手順

  1. zipを解凍する

  2. 「Colotter_04」フォルダを好きな場所に移す

    • 編集することが前提なので、アクセスしやすい場所がおすすめです

  3. chromeを開く

  4. url欄に「chrome://extensions/」と入力

    • chromeの拡張機能管理画面が開きます

  5. 画面右上の「デベロッパーモード」をONにする

  6. 「Colotter_04」フォルダをブラウザ画面にドラッグアンドドロップ

    • 次のようになれば導入完了！

  7. ついでに設定

    因みに、ブラウザ右上にアイコンを表示させるには...
    右上のパズルピースアイコン→ピン止め

 

3. 色のカスタマイズ方法

本当はpopup画面から直接色を変更できるようにしたかったのですが、どうしてもやり方が分からなくて、面倒な方法になってしまいました

3.1. 手順

  1. 拡張機能がまとまっているフォルダを開く

  2. color_overwrite.cssファイルを開く

    • VSCodeやAtomなどのテキストエディタ推奨ですが、メモ帳でも編集可能です。

  3. コメントアウトに従って①と②の色をそれぞれ設定する

    • CSSの変数機能を利用しています
    • color_1, color_2という変数は選べる色2色分に対応しています（必要があれば入れ替えてください）
    • 仕様上、twitter側で設定した色に応じて書き換える必要がある箇所があります（←Ctrl+/だけで済むようになっています）
    • Twitterの設定で選べる色（水色を除く5色分）のサンプルカラーをrgbで用意しています。

  4. chromeの拡張機能管理画面で更新をかける

  5. 最後にツイッターをリロード

 

4. ソースコード公開

埋め込みが大変だったので、GoogleDocsで公開します
因みにフォルダ構成はこんな感じ

4.1. manifest.jsonを見る↗

4.2. color_overwrite.cssを見る↗

4.3. popup.htmlを見る↗

 

5. 没供養

5.1. ばーじょん数

フォルダ名「Colotter_04」の04はバージョン番号です。今回のバージョンになるまでの流れを紹介します...

  1. バージョン０

    • バージョン１を上書きしたことにより消失

  2. バージョン１

    • ０で見落としていた箇所にも色当て（読み込み中のぐるぐる, 新着通知の背景）
      background.jsを使おうとして失敗など

  3. バージョン２

    • 色の変更をポップアップ画面や、別途設定画面をhtmlとJS（DOM？←わからん）で実装しようとして失敗

  4. バージョン３

    • chromeAPIを利用してみようとして失敗...

5.2. CSS-in-JS

まず、Twitterのhtml要素に当てられているクラス名が暗号すぎる。色改変の拡張機能を作り始めるにあたって、F12の開発者ツールでちまちま調べたのですが、無謀過ぎる。

そして、頑張って全てに色割り当てが完了した！と思ったら、数日後なぜか一部の色が割り当てられていない状態に。
原因はTwitterでは「CSS-in-JS」という技術が使われているからだそうです。
これが使われているWebページは、クラス名が変更されるみたいです

しかし、一部色改変が無効にならなかった部分があり、それがばーじょん４で色を変えられる部分となっています。
つまり、このばーじょん４も予期せず使えなくなることがあるということです

 

諸情報

コメント

最低限の機能を作るのは簡単だったけれど, 実際に使いやすさを意識すると想像以上に奥深く, なにより圧倒的な技術不足で時間が無限にかかりそうでした.

参考（一部）

１）SDK株式会社電算システム Chromeの拡張機能の作り方をわかりやすく解説 URL↗ （参照日：23/11/16）

２）Qiita [Chrome拡張]オプションページを表示する方法 URL↗ （参照日：23/11/18）

３）Zenn Chrome拡張機能開発の始め方 2022 manifest v3 URL↗ （参照日：23/11/18）

更新ログ

231123_22??: 記事書き始め
231124_0517: 記事ほぼ書き終え
231125_1510: 少し修正

 

PythonとAHKで日付を自動入力したい

つくったもの

初記事

衝動的に作成した「日付を自動入力するツール」を紹介します。 

0. 目次

1. 動作の様子

動作の様子です

トリガーとなるキーを押すと
( ..)φ_____が出てきて 消え
日付が入力されます

2. しくみ

2.1. ざっくり説明
  • 事前の準備
    1. 「timegetter.exe」と「data.txt」をローカルの同じ階層に配置
    2. AutoHotKeyのスクリプト「hoge.ahk」を用意する（中身を一部書き換える必要があります[後述]）
  • スタンバイ状態にする（PC起動毎にやる）
    • 「hoge.ahk」を起動する（ﾀﾞﾌﾞﾙｸﾘｯｸ。バックグラウンドで開いた状態になればok）
      ★.ahkのショートカットをデスクトップなどに置いておくと便利です
  • 動作の流れ
    1. トリガーとなるキーを押す
    2. AutoHotKey側が ↑を感知し、Pythonで作った.exeを実行し待機
    3. .exe側で 現在時刻を取得し文字列として整形
    4. .exe側で 文字列をクリップボードにコピー
    5. AutoHotKeyで Ctrl+V ペースト
2.2. Pythonスクリプト

コード全体はこんな感じです


        import datetime as dt
        import pyperclip as ppc
        
        # メイン
        now_source = dt.datetime.now()                  # 現在時刻を取得
        now = "{0:%y%m%d_%H%M}".format(now_source)      # 整形（既にstr型）
        ppc.copy(now)                                   # クリップボードに保存
        
        # データファイルに保存
        with open('data.txt', 'a', encoding='UTF-8') as f:
            f.write(f'{now_source}\n')

これをpipで導入したライブラリのコマンドを使って.exeにします。

2.3. AutoHotKeyスクリプト

コードの一部


        Insert & ^::                ;トリガー
        SetWorkingDir C:\Users\secon\_main\_mytool\230418_2103_timegetter       ; 作業ディレクトリを指定
        RUN C:\Users\secon\_main\_mytool\230418_2103_timegetter\timegetter.exe  ; .exe起動
        Send, ( ..)φ____
        Sleep, 500
        Send, {BackSpace 10}        ; 待機（この間に.exeが現在時刻をクリップボードに保存する）
        Clipboard := ClipboardAll
        Send ^v                     ; 貼り付け
        Return
  • [1行目] トリガーとなるキーを指定
    • ここではInsertキーと、^キーが同時に押された場合をトリガーにしています （僕のノートパソコンではこの2つのキーの組み合わせが入力しやすかった）
  • [2行目] .exeが置かれているパスを指定
  • [3行目] .exeを起動
    • RUN ".exeのパス" で起動することができます
  • [4~6行目] 待機
    • .exeの処理が終わるまで時間を稼ぎます( ..)φ_____
  • [7行目] 現在のクリップボードを取得
    • AHKではトリガーが引かれた時点のｸﾘｯﾌﾟﾎﾞｰﾄﾞが維持されるため、更新する必要がある（らしいです）
  • [8行目] 貼り付け
    • 他の方法を試してみたけれど上手くいかなかったのでごり押しです
2.4. data.txtの中身

トリガーが引かれる度に現在時刻を次のように蓄積されます


        2023-04-18 23:37:44.371601
        2023-04-18 23:37:48.238868
        2023-04-18 23:37:51.370082
        2023-04-18 23:37:53.379307
        2023-04-18 23:37:55.481826
        2023-04-18 23:37:58.398793
        2023-04-18 23:38:00.297054
        2023-04-18 23:38:04.901777
        2023-04-18 23:38:28.884564

 

3. 割と重大な欠点

  1. 結構な確率で前の内容が貼り付けられる
    • AutoHotKey側でクリップボードの処理が上手くいかないのか、時刻ではなく以前コピーした内容がそのままドバッと張り付けられる ということが頻繁に起きます。
    • その場合 Ctrl+Z で一旦戻って、もう一度トリガーを引くと上手く時刻が貼り付けられます。
    • 実質2回トリガーを引くことになりますが、完全手動よりは速いので...

4. DLと導入方法

4.1. DLページ
  1. BOOTHへ↗
    • 折角なので最近BOOTHで頒布しようとおもいます。
4.2. 導入手順
  1. AHKのインストール
    • 割愛します
  2. DLしたフォルダの配置
    • DLしたフォルダ「.zip」を展開します
      →「timegetter.exe」, 「data.txt」, 「hoge.ahk」, 「manual.html」, 「omake.py」が得られます
    • 「timegetter.exe」と「data.txt」をローカルの好きな場所に配置します
      →（注）この2つのファイルは同じ階層に配置してください
    • 「hoge.ahk」をローカルの好きな場所に配置します
  3. hoge.ahkの一部を書き換える
    • 2行目のパスを「timegetter.exe」が置かれているパスに書き換える
      → 例）C:\aaa\bbb\ccc
    • 3行目のパスを「timegetter.exe」のパスに書き換える
      → 例）C:\aaa\bbb\ccc\timegetter.exe
  4. 留意事項
    • このソフトウェアを使用したことによりお使いのPCやデータに何らかの不具合やトラブルが生じたとしても、私はその責任を負いかねますので、使用は自己責任でお願いします
4.3. トリガーのカスタマイズ方法

自身でキー配列をいじってる方や、Insertと^では不便だという場合に

  • 2つのキー同時押しがオススメ
    • AutoHotKeyの特性上、例えばトリガーを "①を押しながら②を押したとき" と設定した場合、①のキーを無効化することができます。（①単体で押しても無反応になる）
      Insertキーは使う機会がないから①に割り当てるとよいかも
  • 同時押しをトリガーにする方法 → & を使う
    • Alt & n:: AltキーとNキーが同時に押されたとき
    • Alt & 2:: Altキーと2が...
    • RCtrl & Numpad5:: 右のCtrlキーとテンキーの5が...（テンキーと普通の数字キー区別できます）
  • 日付の書式を変える

    個人的なこだわりで日付の書式は 231107_0830 にしていますが、.pyの6行目の 0:以降の「書式指定子」 %y%m%d_%H%M をいじることで自分好みの書式にできます。例）

    • %Y年%m月%d日 (%a) %H時%M分 2023年08月13日 (sat) 20時08分
    • %Y/%m/%d %H:%M:%S 2023/11/04 12:34:15

    .pyファイルを一つの.exeにするには別途 pyperclip pyinstaller などが必要なので pip でインストールしてください。

 

今回は.exeを動かしますが、わざわざ.exeにしなくても同じことができるとおもいます。勢いで深く考えずに進めた結果です。ネットで断片的に得た知識しかない素人なので許して下さい