ぺんちゃん日記

食と歴史と IT と。 Web の旅人ぺんじろうが好奇心赴くままに彷徨います 。

はてなブログにGitHubページのソースコードを一部だけコピペ引用する【AutoHotkey】。

IT 調べてみた RPA

f:id:yasushiito:20190403184928p:plain

もっと読みやすくしたい。

以前のスクリプトによってGitHubにあげたソースコードをブログで参照できるようになりました。
これはこれで便利なのですが、ちょうだいなソースコードになると本文が分断されて非常に読みづらいと思うのです。
特に部分的に修正を加えたり、注目すべき要素に言及するなど、限定的に欲しい時にとても使いづらい。
f:id:yasushiito:20190627071447p:plain


今更ですけどね。

対策を考える。

GitHubからコードの一部を引用するショートカットを用意しても良いのですが、あまりにボタンが増えるのも使いづらいので、可能であれば既存のボタンに追加機能として実装したいです。
f:id:yasushiito:20190627071843p:plain
ここにボタンを追加するか、ボタンの機能を複数に分けるか。
上から3段目左から2番目のボタンが編集フォームに埋め込みリンクを差し込むためのボタン。
三段目の右端がとハーブのソースコードを編集フォームに差し込むためのボタン。

GitHubのページを表示してボタンをクリックしたときにテキスト選択していたらソースコードの引用とするようにしたらどうでしょうか。
GitHubのページを表示しているかどうかは URL を取得してみれば、ある程度は判断できますが、ソースコードの一部を選択しているかどうかまで Auto HOT key から判断できるのでしょうか?ここは少し不安があります。

はてなブログでソースコードを引用する場合はスーパー pre 記法となります。
スーパー pre 記法を使う場合は シンタックスハイライトのための言語を指定できるので、何言語のコードを引用しようとしているのかを判別できた方がかっこいいです。

次のような画面の状態でボタンをクリックされたら
f:id:yasushiito:20190627071447p:plain

次のようなタグが編集フォームに挿入される。

>|autohotkey|
    ;入力ボックスからフォーカスが外れることが時々あるのでクリックする。
    ;作業ディレクトリからの相対パスで探すので作業ディレクトリをバックアップして書き換える。
    wd := A_WorkingDir
    SetWorkingDir, %A_ScriptDir%
||<

やりたいモヤモヤがピックアップされてきました。

モヤモヤをまとめる。

漠然とした やりたいことの詳細を詰めていきます。

差し込みタイプの判定。

一つのボタンを二つの機能が共有するので、どちらのタイプで記事にコンテンツを差し込むのかを判定しなければなりません。
defaultでは 表示中の Web ページの URL を埋め込み表示形式で差し込むようになっています。
それを少し変更して、表示中の Web ページの URL のドメインがGitHubだったらソースコードの引用として機能するようにします。
URL のドメイン部分の判定はGitHubのタブを探す処理で既に 経験しているので問題ないはずです。

引用スタイル。

スーパー pre 記法で引用することにします。
完全なるコピペなので元のソースコードが編集されてもブログには反映されません。
引用は特定部分を解説したい時にするものなので内容が変わらない方が好都合です。

引用有り無しの判定。

あらかじめクリップボードを空にしておいて、 Ctrl + C でクリップボードにコピーすると、テキスト選択されている場合はそれがコピーされ、何も選択されてなければコピーされることなくクリップボードが空になっているはずです。
これでクリップボードの中身を調べることによって引用部分の取り出しとテキスト選択有り無しの判定ができるかと思います(できればいいな)。

リポジトリへの誘導。

スーパー pre 記法で引用した直後にファイル名(タイトル)からリポジトリにジャンプできるようにします。
URL とタイトルが分かるので、引用元への誘導が可能です。
こんな感じのtagを挿入してみてはどうでしょうか。

<cite><a href="https://github.com/yasushiito/myahk/blob/v01/lib/portmessenger.ahk">myahk/portmessenger.ahk</a></cite>

シンタックスハイライトの対応。

GitHubで表示されているソースコードのページの URL を使って判定する以外ありません。
URL の末尾がファイル名の拡張子なので、これが.ahkで終わっていれば AutoHotkey のスクリプトを表示しています。

うまくいかなかった場合。

想定通りに実装できなかった場合、 Visual Studio Code から引用することになります。
既存のショートカットとは全く違う機能だから、ボタンは新規が作成しなければなりません。
eltestにボタンを追加するのは結構面倒なんですよね。

f:id:yasushiito:20190627093403p:plain


Visual Studio CODE のウィンドウタイトルを確認してみましたが、開いている言語の種類である AutoHotkey が含まれています。
最悪の場合は Visual Studio CODE のウィンドウをアクティブにして、ウィンドウタイトルからAutoHotkeyであることを判定して、左端からファイル名を取得、テキストの選択部分をクリップボードにコピーして引用することになります。
この手法ではGitHubリポジトリにリンクできないのでソースコード全体がわかりません。
うまくいかなかった時の保険なので細かいところまで考えなくても良いかなと思います。

今日はここまで。

さすがにこれだけの機能変更を1日で行うのは無理なので、実装は次回に回します。