画像の表示についてNo.35426
keke さん 16/11/27 10:21
 
本来のエディタの領分で無いのは分かっておりますので「無理」という一言で終わる
かと思いますが(その場合は今後のネタにでもしてください)、何かいいお知恵を持
ってる方がいらっしゃればと思い質問させて頂きます。


秀丸エディタでブログの下書きをしています。
で、問題になるのが、画像の表示です。

下書き中は画像を入れる場所にhogehoge.pngみたいに書くだけで、WordPressに投稿
してから画像の確認をします。

つまり下書き中に正しい画像かどうか、文章と画像が合っているかどうか確認しでき
ないのです。
もちろん画像ファイルを直接開けばいいんですけど、ちょっと面倒だなと。

秀丸エディタの中(もしくはプレビュー画面)で見られればいいなぁと思っています。

HTMLファイルとしてブラウザで見ればいいじゃんと言われるでしょうが、brタグを使
わないためまともには見られません。

やはり秀丸エディタの中で見られるのが一番いいのです。


で、質問ですが、


秀丸エディタの中(orプレビュー画面の類のもの or アウトプット枠)で画面を見る
事はできないでしょうか?

またはそういうマクロは無いでしょうか?



ちょっとトリッキーな質問ですみません。
宜しくお願いします。


※こうやるといいよという、良いお知恵をお持ちの方がいらっしゃればぜひ教えてく
ださい。

[ ]
RE:35426 画像の表示についてNo.35427
でるもんたいいじま さん 16/11/27 15:01
 
でるもんた・いいじま@秀丸ユーザ です。

> 下書き中は画像を入れる場所にhogehoge.pngみたいに書くだけで、
> WordPressに投稿してから画像の確認をします。
>
> つまり下書き中に正しい画像かどうか、文章と画像が合っているか
> どうか確認しできないのです。

> 『
> 秀丸エディタの中(orプレビュー画面の類のもの or アウトプット枠)で
> 画面を見る事はできないでしょうか?
> またはそういうマクロは無いでしょうか?
> 』

> ※こうやるといいよという、良いお知恵をお持ちの方がいらっしゃれば
> ぜひ教えてください。

というわけで、いくつか検討してみます。結論から言うと、私の考えでは
「マクロを書いて外部のビューワを呼び出すのが手っ取り早い」という
ことになりました。

というわけで、もし他の方にマクロの作成をお願いする予定でしたら、
マクロを作ってもらうために色々と状況の特定が必要ですので、次の
各質問にお答えください。
(かなり細かく訊いていますが、色々な例外の可能性まで考えていると、
 これだけの分量になってしまいました。)

Q1.メモ中に書かれている画像ファイルのファイル名は「ASCII文字のうち、
 半角スペースと % を除いたもの」だけに限られていますか?
Q2.半角スペース、半角 %、あるいは、ASCII文字以外が含まれる場合、
 メモの中ではどのように書いていますか?
 具体的には、%XX や %uXXXX にしていますか、それともそのままですか?
Q3.スペースを使っていて、%20にはしていない場合、どんな書式で
 「ここからここまでがファイル名」と示していますか?
 (回答例 [green apple.gif])
Q4.想定している画像の拡張子は何と何ですか? 大文字は使いますか?
 (回答例 gif/jpg/png のみ・小文字に統一・jpeやjpegは使わない)
Q5.メモ中に書いてあるパス名はどのようなっていますか?
 (回答例 パス名なしで apple.gif、/images/icons/apple.gif、
  https://images.xxx.com/xxx/apple.gif など)
Q6.上記のパスに対応するWindows上での実際のパスはどうなりますか?
 (回答例 C:\Users\xxx\Documents\www.xxx.com\images\icons\apple.gif、
  C:\Users\xxx\Pictures\site1\icons\apple.gif など。複数のサイトが
  ある場合は、2つ以上のサイトのフォルダを例示してください。
  なお、ユーザ名の部分や実際のホスト名は伏字で結構です。)
Q7.ローカルのディスクに保管していない画像、つまり、ブラウザを
 起動して http(s) で取ってこないといけない画像も観られるように
 したいですか? その場合、その画像のフォルダ名は。
 (回答例 自分のサイトと同じサーバの /images/common/、
  http://www.yyy.jp/photo/ など)
Q8.本文のテキストデータを置いているフォルダはどこですか?
 (回答例 C:\Users\xxx\Documents\www.xxx.com\text\1234.utf.txt
  など。こちらもユーザ名やホスト名は伏字で結構ですが、テキストと
  画像が別々のユーザのホームディレクトリ中にある場合は、その旨
  お書き添えください。)
Q9.Windows上で、上記の各拡張子はどのアプリに関連付けられていますか?
 言い換えれば、Explorer上で画像ファイルをダブルクリックしたら
 何が起動するようになっていますか?
 (回答例 Windowsの画像ビューワで表示される、Photoshopで開く、
  ImageMagickのビューワで開く など)
Q10.Windows上の画像ファイルのフルパス(ユーザ名を含む)に、
 Shift_JISの範囲外の文字が含まれる可能性はありますか?
Q11.同様に、画像ファイルのフルパス(ユーザ名を含む)に半角の % が
 含まれる可能性はありますか?

質問は以上となります。

☆ ☆ ☆

以下はマクロを作る方のためのメモです。

[1] DLLを自分で作って、それをマクロから呼び出せば、秀丸のエディタ枠の
内側に画像を表示することも不可能ではありません(Emacsには標準でこの
機能があるようです)。しかしながら、DLLを作るのはちょっと面倒ですし、
特に、自分で作れずに誰か他の人に作ってもらった場合には、何かトラブルが
あったときにたちまち立ち往生してしまいますので、お勧めしません。

☆ ☆ ☆

[2] 秀丸の組み込みコマンドに「...を開く」があります。
標準では右クリックメニューの中にあるようです。これを使うと、
カーソル位置のファイル名をExplorerに渡して、関連付けに従って
開いてくれます。

ただしこれは、次の2つの条件を満たしていることが必要です。

i) テキスト中に記載している画像ファイルのパス名が、Windowsでの
パス名と一致していること。このため、たとえば、テキスト中では
WordPressに <img src="/images/apple.gif" /> と流し込むという
前提で /images/apple.gif と書いてある場合には、画像は x:\images
に置く必要があります。
(x: は本文データを保存しているドライブ名。C:\images を使うのは
 望ましくありませんが、USBメモリやSDカード、外付けハードディスク
 等を使えば、そのドライブの \images が利用可能です。)

ii) テキスト中にはパス名を「/」で区切って記載してして、しかるに
関連付け先のアプリが「/」でのパス区切りを受け付けない場合には、
この方法は利用できません。

☆ ☆ ☆

[3]というわけで、マクロで外部プログラムを呼び出すことを考えます。

「ファイル名の位置にカーソルを置いて何かキーを押す、あるいは
ファイル名をダブルクリックする」という操作をトリガーにして、
「外部アプリで当該画像を開く、またはExplorerで関連付けされている
アプリを起動する」、ということであれば、マクロでできそうです。

以下、その前提で処理手順を記載します。

i) まず、秀丸マクロには colorcode というキーワードがあります。
(colorcode & 0x400)!=0 で、カーソル位置の文字が「...を開く」の対象、
(具体的にはURL・メールアドレス・ファイル名)を構成する文字として
認識されているかどうかがわかります。

ii) 次に、カーソル位置を含む単語を選択するには、selectword または
selectword2 が使えます。(私は使ったことがないので、どちらが
今回の場合にベターなのかはわかりません。)

#スペースの入ったファイル名をそのまま書く可能性があって、
#[Sample Picture.png] や "today's photo.jpg" のように記入
#している、という場合は一工夫が必要です。

iii) 範囲を選択すると、seltopx、seltopy、selendx、selendy、gettext
(もしかしたらgettext2かも)を使ってその範囲の文字列、つまり
URL・メールアドレス・ファイル名を取得することができます。

iv) 取得したファイル名に、次のような加工・修正を施します。

  a) ファイル名から拡張子を取得(たとえば strrstr($selection, ".")
  で取得した数値を利用する)し、画像ファイルとして想定している
  拡張子かどうかをチェックします。もしそれに該当しなければ、
  当該マクロの対象ではないので、その時点でマクロ打ち切りです。

  なお、この段階で、
  「拡張子は小文字で統一する」
  「.jpe や .jpeg は使わず、.jpg で統一する」
  といったローカルルールのチェックが可能です。

  ※ テキスト中に拡張子を大文字で記入する可能性がある場合は、
  適宜 tolower() を使います。

  b) 必要ならば、自分のサイト内の画像かどうかをチェックします。
  たとえば、別サーバにのみ保管されている画像を参照していてそれを
  http(s):// から記載している場合には、c) 以降の処理は不要で、
  openbyshell や runsync2 などでブラウザを呼び出すだけです。
  (run、runex を使うと "%" の処理が面倒なので、デフォルトの
   ブラウザでよければopenbyshell、他の軽量なブラウザを使い
   たければ runsync2 が無難でしょう。なお、runsync2 の場合、
   ブラウザを閉じるまで秀丸に復帰しないので、それが嫌なら "%"
   の処理を頑張って run/runex にするか、それともデフォルトの
   ブラウザをopenbyshellで呼び出すかです。)

  あるいは、同じWebサーバでも別の人が管理していて手元に画像がない
  場合も、http(s):// から始まるURLに加工して同様に呼び出します。

  以下は、画像がローカルマシンに保管されている(もしくは、Windowsの
  ファイル共有機能でアクセスできる)場合について検討します。

  c) ファイル名から取得したURL用のパス名(たとえば /images/)を
  ハードディスク上のパス名(たとえば ..\images\)に変換します。
  最終的に起動したい画像ビューワがフルパスのファイル名しか受け
  付けないない場合(例:Windows標準の画像ビューワ)は、この段階で
  フルパスにします。

  ※ b) 後段のケースとは逆に「画像はWordPressとは別のサーバに
  置くことになっているため本文中には http(s):// から記載している
  けど、手元では両者を同じマシンからアクセス可能」という場合は、
  そのパス名の架け替えもこの段階で処理します。

  <ちょっと手の込んだ話>
  ・複数のWordPresssサイトのデータを別々のフォルダに置いている
   場合で、マクロでどのサイトなのかを判別したい場合、あるいは
   画像のファイル名をフルパスにする場合は、マクロの directory
   キーワードが利用可能です。
  ・画像を「ピクチャ」フォルダに置いている場合、ホームディレクトリを
   取得するには getenv("USERPROFILE") が使えますが、Windows XPの
   「My Pictures」とVista以降の「Pictures」とを自動判別するには
   もう一工夫が必要です。
  </ちょっと手の込んだ話>

  d) 本文中に「%nn」または「%uXXXX」の形で特殊文字をエスケープした
  ものがあり、それを解除しなければアプリや関連付けに渡せない場合
  には、そのデコードを行います。

  e) Shift_JISの範囲外の文字を % でエンコードせずにビューワに
  渡すには runex コマンドを使って UTF-16 で呼び出す必要があり、
  その runex では "%" という文字が特別な意味を持つので、もし
  「Shift_JISの範囲外の文字が含まれる可能性」と「"%" が含まれる
  可能性」の両方がある場合には、d) でデコードした結果に含まれる
  "%" をすべて "%%" に置き換えます。

  f) 以上の結果、半角スペースが出てきた場合には、必要に応じて
  ダブルクォートでくくります。次の v) で呼び出す先によっては
  ダブルクォートをつけてはいけない場合もあるので、注意が必要です。

v) 画像ファイルへの関連付けが画像ビューワの類になっている場合は、
そのまま上記のファイル名(フルパス、ダブルクォートあり)を
openbyshell に渡します。関連付けがPhotoshop等になっている場合は、
別途適宜の方法で画像ビューワを呼び出します。

たとえば、 Windows XP で試した限りでは、次のようなマクロを実行
すると、標準の「Windows 画像と FAX ビューア」が開きます。
runsync2 "rundll32 shimgvw.dll,ImageView_Fullscreen " +
    getenv("USERPROFILE")+ @"\My Documents\My Pictures\WP\xxx.gif";

rundll32.exe に文字列を渡す場合、ダブルクォートでくくってはいけません。
また、このshimgvw.dll を使う場合には、デスクトップ以外のファイルは
絶対パスで指定する必要があります。

なお、rundll32.exe を使わずにdllfuncw() で直接このDLLを呼び出そうとも
してみたのですが、ちょっと試した限りではうまくいきませんでした。
もしこれが可能であれば上記の e) f) が省けるので、どなたか、その方法を
ご存知でしたら教えてください。

--
でるもんた・いいじま

[ ]
RE:35427 画像の表示についてNo.35428
keke さん 16/11/27 16:47
 
ありがとうございます。

書いて頂いている質問にはのちほど回答を書かせて頂きます。

[ ]
RE:35426 画像の表示についてNo.35429
keke さん 16/11/27 16:47
 
画像を開くマクロがありました。
メモのため書いておきます。

http://hide.maruo.co.jp/lib/macro/openby103.html

[ ]
RE:35429 画像の表示についてNo.35430
でるもんたいいじま さん 16/11/27 17:23
 
でるもんた・いいじまです。

> 画像を開くマクロがありました。
...
> http://hide.maruo.co.jp/lib/macro/openby103.html

拝見しました。
ユーザがカスタマイズしやすいように分かりやすく書いてあるとは
思いますが、ちょっと読んだ限り、次のような問題があります。

・クリップボードヒストリやUNDO-REDOヒストリを破壊してしまう。
・取得したファイル名をぜんぶ小文字にしてから後の処理をするので、
 Webサーバがファイル名の大文字・小文字を区別する仕様の場合、
 大文字を含むURLを開けない。
・同じ理由で、テキスト中のファイル名とディスク上の実際のファイルの
 ファイル名とで大文字・小文字の食い違いがあっても警告を出せない。
 (そもそも出すことを想定していない。)

このマクロで大丈夫ならそれでいいのですが、ご不満があるようならば、
Webへのアップロード用を前提に新しく書き直したほうがよさそうですね。

#この新しく書いたものは画像以外、たとえば音声や動画にも拡張できると
#思います。JavaScriptとスタイルシートはブラウザで動かさないといけない
#のでプレビューは無理ですが、テキストファイルなので、編集用に秀丸で
#開くことは可能です。

[ ]
RE:35430 画像の表示についてNo.35431
keke さん 16/11/27 23:09
 
かなり詳しい解説ありがとうございます。

ちょっと使ってみましたがこれでは満足できる内容ではないため、このマクロを使う
にしても大幅な改造が必要かと思います。



> (Emacsには標準での機能があるようです)

↑このコメントから調べてみましたが、Emacsはorg-modeで画像のインライン表示が
できるそうですね。(他にも方法はあるみたいですが)



前述のマクロと、Emacsでのインライン表示の両方を見てみましたが、ローカルの画
像でいいのでエディタ内にインラインで表示されるのがいいなぁという感想を持ちま
した。
インライン表示はさすがに秀丸エディタ本体が対応する必要があるでしょうけど、無
理そうかな・・・


[ ]
RE:35427 画像の表示についてNo.35432
でるもんたいいじま さん 16/11/28 09:49
 
でるもんた・いいじまです。

すいません、少し追記。

☆ ☆ ☆

> というわけで、もし他の方にマクロの作成をお願いする予定でしたら、
> マクロを作ってもらうために色々と状況の特定が必要ですので、次の
> 各質問にお答えください。
> (かなり細かく訊いていますが、色々な例外の可能性まで考えていると、
>  これだけの分量になってしまいました。)
(Q1〜Q11略)

もう一つ忘れていたことに気づきました。

Q12.「大きなファイルをgzip等で圧縮しておいたもの」を想定しますか?
その場合、ローカルに保管されている圧縮済データのファイル名と、
WordPress に流し込むテキストに記載するファイル名は。
(回答例 手元のファイル名は ..\images\xxx.bmp.gz で、WordPress には
 /images/gz/xxx.bmp と記入する。)

これはどういうことかというと、http(s)では、テキストや画像などのデータを
サーバ上でgzip等で圧縮しておいて、こんな感じのHTTP Response Headerを
返すと、ブラウザが自動的に解凍して表示してくれる、という仕組みがあります。

HTTP/1.1 200 OK
Content-Encoding: gzip  ← これがキーです
Content-Type: text/html; charset=euc-jp
             ← 空行
◇◆◇◆…        ← gzipで圧縮したバイナリデータ

JPEGやPNGの画像をさらに圧縮してもあまり意味がないのですが、次のような
場合には圧縮が大きな効果を発揮します。
1.無圧縮画像、たとえは .bmp 形式や .ppm 形式の画像を使う場合
2.GIF形式がLZW圧縮法の特許問題で使いにくくなり、PNG形式がまだそれほど
 普及していなかった時代に、無圧縮のGIFファイルをCGI等で生成する場合
 (もうこの特許は切れたので、今はLZW圧縮した普通のGIF画像を作れます)
3.テキストデータ(HTMLやCSVなど)を大量に配信する場合で、回線容量を
 節約したい場合。この例としては2ch.netが有名です。

これを使う場合には、通常の画像ビューワは圧縮された画像ファイルには
対応していないので、少し処理を追加する必要が出てきます。

☆ ☆ ☆

> たとえば、 Windows XP で試した限りでは、次のようなマクロを実行
> すると、標準の「Windows 画像と FAX ビューア」が開きます。
> runsync2 "rundll32 shimgvw.dll,ImageView_Fullscreen " +
>    getenv("USERPROFILE")+ @"\My Documents\My Pictures\WP\xxx.gif";

> なお、rundll32.exe を使わずにdllfuncw() で直接このDLLを呼び出そうとも
> してみたのですが、ちょっと試した限りではうまくいきませんでした。
> もしこれが可能であれば上記の e) f) が省けるので、どなたか、その方法を
> ご存知でしたら教えてください。

考えてみたら、これは無理なのでした。
というのは、rundll32 で呼び出せるDLL関数はWINAPI(=stdcall)規約なのに
対して、秀丸の dllfunc 系関数はWINAPIV(=cdecl)規約で呼び出すからです。

まだ試していませんが、64bit版のWindowsでrundll64.exeを使うケースなら、
もしかしたら秀丸から呼び出せるかもしれません。

[ ]
RE:35431 画像の表示についてNo.35435
でるもんたいいじま さん 16/11/28 10:07
 
でるもんた・いいじまです。

> かなり詳しい解説ありがとうございます。

恐れ入ります。

> ちょっと使ってみましたがこれでは満足できる内容ではないため、
> このマクロを使うにしても大幅な改造が必要かと思います。

ですね。

> Emacsはorg-modeで画像のインライン表示ができるそうですね。
> (他にも方法はあるみたいですが)

これですが、私は最近のEmacsをGUI環境で使ったことがないので、
詳しいことは分かりません。申し訳ありません。

> 前述のマクロと、Emacsでのインライン表示の両方を見てみましたが、
> ローカルの画像でいいのでエディタ内にインラインで表示されるのが
> いいなぁという感想を持ちました。
> インライン表示はさすがに秀丸エディタ本体が対応する必要があるで
> しょうけど、無理そうかな・・・

単に画像を表示するだけなら、秀丸本体に手を入れなくても、DLLをひとつ
作るだけでできます。Windowsの仕組み上、各ウィンドウを識別するための
「ウィンドウハンドル」という数値が分かれば、たとえ他のプロセスが保有
しているウィンドウであっても、内容を読み書きできます。

…が、これはお勧めしません。理由は下記の通りです。

1.画像を表示した際に、同じ位置にテキストが配置されないようにするための
 仕組みを考える必要がある。
2.画像の幅・高さがウィンドウのサイズを超えた場合にどう処理するのかを
 決めておく必要がある。その取り決めによっては、秀丸のスクロールバーの
 処理に手を入れてもらう必要がある。
3.もしDLLを他の人に作ってもらう場合、不具合が発生したときに困る。
 不具合の内容によっては、編集中に秀丸がハングアップしてデータが失われる
 可能性がある。

なので、外部の画像ビューワを別ウィンドウで開くようにすべきだと思います。
今回はWordPressを使うのですから、画像が正しいレイアウトになっているか
どうかについては、箇条書きやテーブル、目次などのレイアウト確認と一緒に
ブラウザで確認することになるはずです。

(…とここまで書いてきてふと気づいたのですが、kekeさんがいまお作りなのは、
 「同じレイアウトで、画像と文面だけがそれぞれ異なる」というページが大量に
 存在する、写真集の類のサイトでしょうか?)

[ ]
RE:35435 画像の表示についてNo.35436
秀丸担当 さん 16/11/28 14:04
 

秀丸エディタのテキスト本文のところに画像をインラインで表示させることはで
きないです。テキストエディタである限りは今後もできるようになる可能性も低
いと思います。
ファイルマネージャ枠やアウトプット枠のように表示させるのは、今後のネタと
して参考にさせていただきます。

現状でやるとしたら、でるもんたいいじまさんの言われるように、マクロやDLL
を作成して外部ウィンドウとして表示させる方法も考えられると思います。

現状でマクロ等や作成せずにやるとしたら、「...を開く」コマンドを実行する
と簡単です。(キー割り当てでファイル系のコマンド)
例えばtest.jpgと書いてあるとき、範囲選択をして「...を開く」コマンド実行
で開きます。
フルパスでなければ現在のフォルダにあるファイルを開きます。
[その他]→[ファイルタイプ別の設定]→[デザイン]→[表示]の「ファイル名と思
わしき場所のカラー表示」をONにすると、標準ではアルファベットと拡張子と思
わしいところに色がついて、範囲選択せずに「...を開く」ができます。

[ ]