前の関連記事：Blogger：リンクのコピー(2)Make Link:%tiltle%には何が入る？
(2018.3.18追記。この記事の方法はうまくいかなくなったので、Blogger：リンクのコピー(5)Firefox QuantumではFoxy Gesturesを使うの方を使うことにしました。)
Format Linkでリンクをコピーする
Format Linkをインストールするとアドレスバーの右側に鉛筆リンクアイコンがでてきます。
これをクリックしてHTMLを選択します。
リンクをコピーしたいページで右クリック→Format Link as HTML。
<a href="https://www.yahoo.co.jp/">Yahoo! JAPAN</a>
しかし、Bloggerの作成モードにペーストするとこのようにHTMLソースで表示されてしまいます。
なので、わざわざHTMLモードに切り替えてペーストしないといけません。
これの対策を考えます。
Bloggerのエディタは何を元に判断しているか
解決したい問題はBlogger：リンクのコピー(1)Make LInk:Firefoxアドオンで簡単にの「Create linkはBlogger投稿エディタにリンクをうまくペーストできない」と全く同じ問題です。
そのときはFirefoxのMake Linkでは問題がなく、ChromeのCreate Linkで問題が起こっていました。
ChromeのCreate Linkはその後、問題点が改善されました。
現在もCreate Linkでは問題は再発していません。
なので、ペーストを受けるBloggerのエディタの方が、クリップボードのデータを区別していることが推測されました。
まずクリップボードの中身を確認するために、Create Linkでコピーしたときと、Format Linkでコピーしたものを、メモ帳にペーストして比較してみましたが、それは全く同じ文字列でした。
Create Linkでコピーした場合でも、VirtualBoxのゲストOSからホストOSにペーストしたときはHTMLソースになってしまいます。
ウェブブラウザに表示しているリンクのついた文字列をコピーしたときは、Bloggerのエディタではリンクの付いた文字列としてペーストされます。
ところがVirtaulBoxのゲストOSのウェブブラウザからリンクの付いた文字列をコピーして、ホストOSのBloggerのエディタにペーストするとHTMLソースになってしまいます。
このことからクリップボードに入っている文字列の問題ではなく、それ以外についてくる情報が原因であることにようやく気が付きました。
Create Linkのコピーのやり方をみる
クリップボードに入っている情報が原因ならば、コピーするときの違いが問題のはずです。
ソースをみてCreate LinkとFromat Linkのコピーしている部分を比較してみます。
Create Linkのソースのダウンロードサイトは見つけられなかったので、Chromeのインストールされているコードを探します。
Chromeの拡張機能のインストール先はWhere does Chrome store extensions? - Stack Overflowに解説がありました。
%userprofile%\AppData\Local\Google\Chrome\User Data\Default\Extensions
Windows10ではこのパスをエクスプローラーに入れるとChromeにインストールされた拡張機能が入っているフォルダが開きます、、、
ここからが大変です。
拡張機能名はでてこないので、バージョン番号を頼りにCreate Linkのソースを探します。
Create Linkのバージョンは0.4.1なので、それを頼りにようやく探り当てました。
Create Linkのフォルダかどうかはそこに入っているアイコンの画像で確認できます。
copyToClipboard(text) {
const backgroundPage = chrome.extension.getBackgroundPage()
let textarea = document.getElementById('clipboard_object');
if (!textarea) {
textarea = backgroundPage.document.createElement('textarea')
textarea.setAttribute('id', 'clipboard_object')
backgroundPage.document.body.appendChild(textarea)
}
textarea.value = text;
textarea.select();
document.execCommand("copy");
}
background.jsのこの部分がコピーしているところだと思われました。コピーするためのページを作って、そこにtextarea要素を追加して、それを選択して、copyコマンドを実行しています。
(2018.3.18追記。嘘でした。これだけではhtml/textではペーストされませんでした。
ku/CreateLink: Make Link alternative to chrome
Create Linkのソースを見つけました。
background.js
ここをみるとコピー操作にイベントリスナーを追加して、クリップボードにtext/html形式のデータをセットしていました。
initialize() {
document.addEventListener('copy', (ev) => {
ev.preventDefault();
const proxy = chrome.extension.getBackgroundPage().document.getElementById('clipboard_object')
var text = proxy.value;
ev.clipboardData.setData("text/plain", text);
ev.clipboardData.setData("text/html", text);
}, true);
}
この部分がないとhtml/text形式でペーストできません。)Format Linkのコピーのやり方をみる
GitHub - hnakamur/FormatLink-Firefox: A Firefox web-extension to copy the URL and the title or the selected text to clipboard
Format LinkのソースはGitHubにありました。
function copyToClipboard(text) {
function oncopy(event) {
document.removeEventListener("copy", oncopy, true);
// Hide the event from the page to prevent tampering.
event.stopImmediatePropagation();
// Overwrite the clipboard content.
event.preventDefault();
event.clipboardData.setData("text/plain", text);
}
document.addEventListener("copy", oncopy, true);
// Requires the clipboardWrite permission, or a user gesture:
document.execCommand("copy");
}
clipboard-helper.jsにコピーしている部分がありました。copyコマンドでコピーしている点はCreate Linkと同じですが、コピー元がウェブドキュメントではなく、setData()メソッドでテキストを入れたオブジェクトになっています。
DataTransfer.setData() - Web API インターフェイス | MDN
オブジェクトに入れるデータはこのsetData()メソッドを使っていると思われます。
第一引数のformatは入れるデータの型を指定するようですが、Format Linkではtext/plainになっています。
formatにはMIME タイプを指定するようです。
そこでtext/plainをtext/htmlにしてみます。
Format Linkのtext/plainをtext/htmlにして動作確認する
(2017.11.20追記。編集したアドオンの動作確認はFirefox Developer Editionでやった方が簡単で、動作も安定しています。Firefox Quantum Developer Editionのインストール参照。)
何もツールをインストールしなくても、ソースとFirefoxがあれば簡単に動作確認できました。
Releases · hnakamur/FormatLink-Firefox · GitHubから2.1.2をzipファイルをダウンロードして展開しました。
clipboard-helper.jsのtext/plainをtext/htmlに書き換えて保存しました。
あとはFirefoxに読み込むだけで動作確認できます。
すでにFormat Linkをインストールしてあっても、後で読み込んだ方が使われるようです。
about:Debugging
FirefoxのアドレスバーにこのURLを入力して移動します。
「一時的なアドオンを読み込む」をクリック。
先ほど編集したFormat Linkのソースがあるフォルダ内のファイルのどれかを選択して開くと、そのソースのアドオンが読み込まれます。
ツール→アドオン、でみるとFormat Linkが表示されています。
Yahoo! JAPAN
(2018.3.18追記。text/htmlに書き換える方法では動作しなくなりました。)
この方法は一時的な読み込みなので、Firefoxを再起動すると使えなくなります。
これをやったせいか、このあとなぜか拡張機能の検索でFormat Linkが出てこなくなってしまいました。
再インストールするときはFormat Link – Firefox 向けアドオンからインストールできます。
プルリクエストして変更をお願いする
GitHubでプルリクエストして作者さんに変更をお願いします。
【GitHub】Pull Requestの手順 - Qiita
この手順に従いました。
なので、上の解説ページのステップ2から5はGitHub上で操作しました。
「Branch: master」ボタンをクリックして出てくる枠に新しいブランチ名を入力すると新規ブランチを作成できました。
GitHub上ではコメントなしでコミットできてしまいますね。
変更してコミットしたら変更したブランチでプルリクエストします。
あとは作者さんの対応待ちです。
ローカルのアドオンファイルを編集すると使えなくなる
リンクのコピーはこのブログを書くのに高頻度で使うので、とりあえずローカルのPCのみtext/htmlでコピーできるようにしようと思いましたがうまくできませんでした。
なので、対応されるまでは、「一時的なアドオンを読み込む」で応急手当するしかなさそうです。
ローカルのアドオンファイルを編集した方法だけ書いておきます。
Format Link – Firefox 向けアドオン
まず普通にここからFormat Linkをインストールします。
アドオンのインストール先の手がかりを探すために、Firefoxのアドレスバーにabout:supportと入力して移動します。
拡張機能の表の「名前」のFormat Linkの行をみるとIDがわかります。
これがインストール先でのファイル名になっています。
プロファイル | Firefox ヘルプ
%APPDATA%\Mozilla\Firefox\Profiles\
(2017.11.20追記。URLバーにabout:supportと入力して出てくる表の「プロファイルフォルダー」にある「フォルダーを開く」ボタンをクリックするやり方の方が確実です。)
ここからextensionsフォルダに入っていきます。
このフォルダ内に先ほどのIDのxpiファイルがあるはずです。
LibreOffice(39)7-ZipのGUIで楽にPythonマクロをドキュメントに埋め込むでインストールした7-Zipでxpiファイルを開いて、その中のclipboard-helper.jsを右クリック→編集、でtext/plainをtext/htmlに書き換えて保存します。
xpiファイルの操作をするときはFirefoxは終了しておかないと書き換えができません。
これでうまくいくと思いましたが、Firefoxを再起動すると「Format LinkはFirefoxでの使用が検証できないために無効化されています。」と表示されて使えませんでした。
アドオン画面から削除してもextensionsフォルダ内のsatagedフォルダに移動するだけなので、その移動したファイルも削除しました。
参考にしたサイト
Format Link – Firefox 向けアドオン
Firefox Quantumで使えるリンクコピーツール。
Where does Chrome store extensions? - Stack Overflow
Chromeの拡張機能のインストール先。
GitHub - hnakamur/FormatLink-Firefox: A Firefox web-extension to copy the URL and the title or the selected text to clipboard
Format LinkのGitHubリポジトリ。
DataTransfer.setData() - Web API インターフェイス | MDN
Format Linkでクリップボードにコピーするのに使っているメソッド。
MIME タイプ - HTTP | MDN
setData()メソッドの引数に使える型。
【GitHub】Pull Requestの手順 - Qiita
GitHubでプルリクエストする方法。
プロファイル | Firefox ヘルプ
Firefoxのプロファイルへのパス。
0 件のコメント:
コメントを投稿