Qiita に画像を貼る方法

Python で ファイルを OSファイルマネージャで開く

PNG に編集ソースファイルを埋め込んで再編集可能にする その1
https://qiita.com/nanbuwks/items/1af5b5ec87ebbe2a7712

では、 Qiita に貼る PNG 画像ファイルに作成ソースファイルを埋め込んで再編集可能にしました。

Qiita に画像を貼る方法として、

1. ファイルドラッグ&ドロップ
2. ファイルコピー&ペースト
3. 画像コピー&ペースト

があります。

再編集可能な PNG 画像ファイルを扱うにあたり、Qiita への画像を貼る方法を調べてみました。

環境

Ubuntu 20.04 LTS

1. ファイルドラッグ&ドロップ

ファイルマネージャなどでファイルを表示して、

ドラッグドロップするやりかた。

2.ファイルコピー&ペースト

同様にファイルマネージャなどでファイルを表示してコピー&ペーストするやりかたです。

3.画像コピー&ペースト

例えば Twitter などから画像をコピー&ペーストします。

上のようにしてコピーしたものをQiita に貼ったものが以下になります。

LibreOffice などでもこのようにしてコピーして

Qiita に貼り付けすると以下のようになります。

段階 形式
LibreOffice 表
クリップボード ビットマップとテキストの複合
画像としての貼り付け先 ビットマップとテキスト

現在は、ヘルパーを実行する必要がありますが、ヘルパーを実行するとファイルが表示されるので、

これを Qiita に貼ります。

これは、先のファイルのコピー&ペーストとは異なり、ディスプレイに表示された画像をコピー&ペーストするものです。ローカルPC でなくとも、Web サービス上でのコピー&ペーストがファイルレスで行うことができます。
ディスプレイ画面キャプチャー&貼り付けも、これと同じとみなすことができます。

画像コピー&ペーストでは、元画像が jpg だったとしても Qiita に貼ると PNG 形式になるようです。

画像ファイルの属性情報を保持しながら Qiita に画像を貼る

jpg ファイルには EXIF 情報などが含まれます。
PNG にもチャンクとして独自情報を含むことができ、再編集可能な PNG ファイルはそのようにして作成しています。

以下は編集ソースが含まれている PNG ファイルですが、上記の コピー&ペースト で情報は保持されるでしょうか?

結論から言うと、上記 1.,2.のやりかたでは保持されて、3.のやりかたでは情報は失われてしまいました。

クリップボードを使って画像を格納、Qiita に貼る仕組み

1.,2. のやりかたは以下の資料から推察するに、ウィンドウマネージャの機能としてクリップボードにファイルパスとファイル属性が格納されるようです。
https://devpress.csdn.net/ubuntu/6304cea17e6682346619cbb8.html

一方、3. のやりかたではクリップボードにビットマップデータが格納されるようです。
https://learn.microsoft.com/ja-jp/dotnet/api/system.windows.clipboard.setimage?view=windowsdesktop-7.0

Webブラウザはクリップボードから画像を貼るのは、以下のメソッドを使ってデータを取得していると推測します。
https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard

画像ドラッグ&ドロップのように見えてファイルドラッグ&ドロップ

Ubuntu の標準画像ビューア「eog」にて画像を表示させている状態から、画像を右クリックでコピー&ペーストしたり、マウスでドラッグ&ドロップでも画像ファイル属性情報は保持されました。

ここでは eog からウィンドウマネージャの機能を使って、クリップボードにファイル情報を格納している、すなわち 1.,および 2. と同じやり方なのだろうと思います。

Qiita に再編集可能な PNG を貼る方法を考える

再編集可能な PNG を属性を失わずに貼るには、再編集可能な PNG を OS 上のファイルとして作成し、 1. または 2. のやりかたでコピー元をクリップボードに登録し、 Webブラウザで Qiita に貼る必要があります。

このためには、以下の手順を行います。

1. ツールで 再編集可能な PNG ファイルを OS のファイルシステム上に作成する
2. それをクリップボードにファイルとして格納する
3. クリップボードのファイル属性データを Webブラウザ上の Qiita に貼る

いちいち手でそれをするのは利便性が悪いので、これを自動化してみます。

ツールで 再編集可能な PNG ファイルを OS のファイルシステム上に作成する

汎用ツールを作成してしまえば、すべての png ファイルに どのようなデータを格納もできますが、利便性を高めるためには画像描画ツールに 再編集可能PNG を作る機能を含めてしまうべきでしょう。
LibreOffice については以下のように、現在開発中です。

「PNG に編集ソースファイルを埋め込んで再編集可能にする その1」
https://qiita.com/nanbuwks/items/1af5b5ec87ebbe2a7712

クリップボードにファイルとして格納する

上の画像描画ツール上の機能で作成したファイルをクリップボードに格納するのを自動化しようと考えましたが改めました。
これは、Linux 上だと環境の違いにより動かなくなるリスクが高いからです。
次善の策として、OS 上のファイルマネージャなどで以下のように作成したファイルを表示し、それをコピペやドラッグドロップを手動でする方法にしました。

コマンドで画像ファイルを Qiita に貼る?

こちらも先のコピペやドラッグドロップを手動でするという前提で、ここは自動化しないことにしました。

ファイルを OS のファイルマネージャで開く

ファイル /tmp/embeddedpng 中に embeddedpng.png ファイルだけを作成しそれをファイルマネージャで表示します。

Ubuntu Linux の場合

import subprocess
subprocess.Popen(['nautilus','/tmp/embeddedpng'])

または

import subprocess
subprocess.Popen(['xdg-open','/tmp/embeddedpng'])

または

import subprocess
subprocess.Popen(['open','/tmp/embeddedpng'])

また、他の OS だと以下のようになるそうです(未検証)。

MS-Windows の場合

import subprocess
subprocess.Popen(["explorer",  r"\tmp\embeddedpng"], shell=True)

または

import subprocess
subprocess.Popen(["start",  r"\tmp\embeddedpng"], shell=True)

または

import subprocess
subprocess.Popen("\tmp\embeddedpng", shell=True)

mac OSX の場合

import subprocess
subprocess.Popen(["open",  "\tmp/embeddedpng"])

ファイルを OS 上で関連付けられている画像ビューアで開く

OS 標準の画像ビューア上だと、画面表示のイメージをコピペないしドラッグドロップでファイルとしてクリップボード操作が行われるようです。
なおユーザによってはクリップボード操作が期待するものでない設定になっていることもあるでしょう。上記のファイルマネージャで開くやりかたと併用が望ましいでしょう。

Python を使った例です。

Ubuntu Linux の場合

Python を使った例です。

import subprocess
subprocess.Popen(['xdg-open','/tmp/embeddedpng/embeddedpng.png'])

または

import subprocess
subprocess.Popen(['open','/tmp/embeddedpng/embeddedpng.png'])

また、他の OS だと以下のようになるそうです(未検証)。

MS-Windows の場合

import subprocess
subprocess.Popen(["start",  r"\tmp\embeddedpng\embeddedpng.png"], shell=True)

mac OSX の場合

import subprocess
subprocess.Popen(["open",  "\tmp/embeddedpng/embeddedpng.png"])