[19] KI写真一覧表示(KIshasin-itiran)Ver1.06(2017/06/21)

1.概略
1つのフォルダ内のjpg写真ファイルをWebページに一覧で表示し、その一覧の小写真をクリックで拡大表示
出来ます。また拡大の写真は左クリックで:NEXT、右クリックで:BACK、ダブルクリックで:閉じます。
【図1:Webページに一覧で表示した例】



本マクロで作成したWebページ例は、 長尾白峯作品集-パネル6号にあります。
  この例では1ファイル200KB以下と少容量であり、問題なく43個のファイルを一覧表示してますが、本マクロは小サイズにして
  一覧にしている関係で、1ファイル1MB以上ある大きな写真の一覧はPCの性能によってはスムーズに表示できない事があります。
  (掲載写真のサイズは、1024×700の200KB以下の写真が推奨サイズです)。
 


2.動作環境
   WindowsXP/Windows7 日本語版
   このプログラムはExcelVBAで作成しています。Excelの入っていないPCでは使用不可
   Excel2003、Excel2007、Excel2010で実行できます。



3.操作方法
3−1.ファイルを開く
 本ファイル「KI写真一覧.xls」を開く。
操作シートに各種ボタンがあるので、そのマクロ実行ボタンクリックでマクロを実行する
【図2:操作シートに各種ボタン例】



以下各ボタンの実行内容を説明


3-2 フォルダ内のjpgファイルを取得
「1-1指定フォルダの指定拡張子一覧」ボタンクリックで、ファイル指定のダイアログ(図3参照)が表示
されるので、一覧表作成のファイルを1個選んで「開く」ボタンをクリックする。写真一覧表作成のマクロでは
拡張子jpgファイルを指定すればそのフォルダな内の全jpgファイルがA列に表示されます(図4参照)。
(「1-2指定フォルダの全ファイル一覧」は「3-2ファイル名小文字」のケースで使用で写真一覧では未使用)

【図3:フォルダを選びファイルを一個指定



【図4:フォルダを選びファイルを一個指定




3-3 B列へ写真表示方向を記入
B列は横「0」、縦「1」を記入する。一般的に横広が標準でありデフォルトは「0」にしてあります。
写真を縦長の方向で表示したい場合は、その行のB列に「1」を記入する。1を記入した写真は一覧表示及び
拡大表示で縦写真に表示します。


3-4 C列に各写真のタイトル名を記入(全角の日本語でもOK)(番号は自動的に付加)
C列は写真タイトルの列ですが、本例ではファイル名が写真のタイトルになっていたので、「2-1C列へ各写真タイトル」
ボタンクリックで、A列データからパス情報を省きファイル名のみをC列にコピーペーストしてあります。
通常2-1ボタンクリックで、jpgファイル名がタイトルになります。変更したい場合は書き換えればそれがタイトルになります。

なお、(2-2C列各写真タイトルはK4セルから)ボタンクリックした場合は、C列には(番号)+ 「K4セル内容」と
なります。jpgファイル名でなく撮影したイベント名などにしたい場合は使用して下さい。

【図5:C列に写真のタイトルを記入】




3-5 ファイル名をローマ字にする
【注意】最初にこのマクロ作成したとき、以下に記述のようにファイル名を半角英数字に変換する必要があり
    「3-1ファイル名ローマ字化」の機能を付けました。しかし一般的には画像ファイル名は半角英数字
    であり、この3-1項は不要でありパスする事。特にC列に写真タイトルを手書きで記入した場合、この
    3-1ボタンを実行すると、その写真タイトルが自動的にjpgファイル名に変更されので注意。

「3-1ファイル名ローマ字化」ボタンクリックで、C列の日本語をロ-マ字に転換します。今回頂いたファイル名
は日本語であり、使用させて頂いているサーバー「FC2」では日本語ファイル名は受け付けないので、
C列のファイルをアルファベットに直したD列のファイル名を変えると同時に、フォルダ内の実際のファイル名も
D列のローマ字に変換し、A列ファイル名もD列の名前に変わります。
なお、ローマジに変換した実際のファイル名及びA列ファイル名を元に戻したい場合は「3-1aファイル名元
に戻す」をクリックします。

【図6:ローマ字化したファイル名】


「3-2ファイル名小文字」ボタンは写真一覧マクロと直接関係ありませんが、ファイル名が大文字と小文字が
混ざってると動作しないことがあるので、一部追加で出来るのでついでに「小文字化」の機能を入れました。

日本語のローマ字変換は、本マクロの「変換表」シートの対照表で行っています。このシートは誰でも変更
できるので、期待の文字に変換されていない場合は各自で改善して使用して下さい。


3-6 Webへ表示データをjsファイルにする
「4-1ファイル一覧のデータ(js)ファイル作成」ボタンクリックで、Webへ表示に必要なデータをjsファイル
にまとめ、3-1項で指定したファルダに保存する。データはカンマ区切りで@ファイル名、A写真の縦横情報、
Bコメントの順になっています。なお、データを変えたい場合はこのjsファイルの内容を変更すれば変わります。

【図7:jsファイルの内容




3-7 本マクロのあるフォルダの3ファイルを写真表示フォルダへ移動
「5-1必要ファイル3個貼り付け」ボタンクリックで、本マクロと同じフォルダにある@index.html、Adai.html、
Bkage.gif の3ファイルを3-1項で指定したフォルダへも保存する。上記表題では移動となっていますが、
実際はファイルのコピー&ペーストです。

【図8:必要なファイルを移動させる




3-8 必要に応じてHTMLファイルタグを修正
HTMLファイルは自動的にできるが、以下のタイトルなどはメモ帳等にソースを表示して修正する
必要があります。

@index.html → ファイル名は自由に変更して問題ありません。ただしWebへ表示の時、
  kyoudo/hakuho/panel6/index.html はkyoudo/hakuho/panel6/のようにindex.htmlは省略できるので便利

 ・HTMLソースを開き、箇所を変更のこと
  例:<TITLE>写真一覧表</TITLE> → <TITLE>散歩道の写真</TITLE>

Adai.html → このファイルは写真クリックで拡大表示ようであり、ファイル名「dai」は変更しないこと。
 ・HTMLソースを開き、// ●●下記の縦写真横サイズ*0.68はカメラにより異なります必要に応じ変更●●
  例:yoko2=parseInt(tate * 0.68); → yoko2=parseInt(tate * 0.7); 

Bkage.gif → この画像は一覧表示で、各写真を浮き立つように影を付けるが、無くとも動作上は問題なし。



3-9 index.htmlファイルソースのタイトル部分を書き換え
「6-1 Webページタイトル書き換え」前3-8項に記述のソース開きタイトル変更でOKですが、idex.htmlファイルタグ
 をボタンクリックっだ簡単に変更したいとの依頼があり、Ver0.03からは6-1ボタンクリックで、F13セルへ記述した
 文字がファイルのタイトルになります。なお6-1ボタン未実行の場合は、「写真一覧表」のままです




3-10 必要に応じて旧データ消去
古いデータを表示していても、各実行ボタンクリックで旧データを消して新データに書き換えますが、一度
全テキストデータを削除したい方は、「※ 旧データ削除」ボタンクリックで削除できます。

4.ダウンロード (圧縮ファイルは解凍して使用して下さい)
「KI写真一覧表示」ダウンロ−ド(90kb)

圧縮ファイル名:KIshasin-itiran.zip
解凍でフォルダ内に、KI写真一覧表示.xls、説明書.txt、dai.html、index.html、kage.gif
の5ファイルがあります
(マクロは「McAfee VirusScan 」でウイルス無しチェック済み)


5.その他
[1]このプログラムはExcelVBAで作成しています。Excelの入っていないPCでは使用不可。
[2]Excel2003・Excel2007・Excel2010で実行出来ます
[3]本マクロの使用に起因するいかなる事態も責任を負いません。

【[注意】本マクロで作成したWebページ例は、 長尾白峯作品集-パネル6号にあります。
この例では1ファイル200KB以下と少容量であり、問題なく43個のファイルを一覧表示してますが、本マクロは小サイズにして
  一覧にしている関係で、1ファイル1MB以上ある大きな写真の一覧はPCの性能によってはスムーズに表示できない事があります。
 


【ホーム】