src="1c.jpg">ファイルを保存します。写真ファイルと同じところ。ファイル名は、photo1.htm。(末尾が.htmまたは.htmlなら何でも構わない)デスクトップにあるphoto1.htmをダブルクリックする。写真が表示されるはず。完成した簡単写真アルバム(バージョン1)自分で作られた方。すると、巨大な写真が表示されたかもしれません。見やすく縮小をしなければなりませんが、これは次回の話題としましょう。HTMLの文法は存在しますがメモ帳に記述したのは、画像を表示しなさいというタグです。「img」はimageの略で、「src」はsourceの略(情報源みたいな意味)と思えば、何となく分かると思います。情報源は「1a.jpg」というファイルであることをいっているわけです。これを写真の枚数分並べてゆけば、写真アルバムの完成です。これではまだ単純すぎて実用性に欠ける面があると思いますが、基礎があっての応用です。これをベースにどんどん発展させていくと良いでしょう。ここに記述したファイルは、正しい文法HTMLではありません。ちなみに省略の無い文法で書こうと思ったら次のようになるでしょう。height="150"></p></body></html>なれないとちょっと面倒です。HTMLが嫌いになるよりは、適当に省略して便利なツールとして役立てた方がいいでしょう。ウェブページとして公開するなら、きちんとした文法を使っていないと、閲覧できない人が困ってしまいますから、正しく書く必要があります。何が正しいのかは、下記のリンクを参考に。[参考サイト]とほほのWWW入門(http://www.tohoho-web.com/)ウェブの入門はここが有名。gateway(http://cetus.sakura.ne.jp/htmllint/htmllint.html)HTML文書の文法をチェックし、採点してくれます。解説が詳しいので、HTMLを知るには最適です。HTMLをきちんと学ばずにチェックすると、相当低い点数がつきます。巨大になったらサイズ指定する何もしないで、デジカメ写真を表示すると、画面一杯に広がる巨大な画像が表示されるかもしれません。サイズ指定くらいは、知っておくと便利でしょう。写真アルバムづくり−前回のおさらい拡張子がjpgのファイルを用意する(例えば1a.jpgをデスクトップに置く)。src="1a.jpg">と書く。メモ帳の内容を「名前を付けて」保存する。保存場所は、画像ファイルと同じデスクトップ。ファイル名には拡張子"htm"を忘れない。photo1.htm。デスクトップ上のphoto1.htmアイコンをダブルクリックする。ウェブブラウザが立ち上がって写真が表示される。前回の内容は、ここまででした。サイズを指定する忠実に実践していただいた方。私の見本とは違い、写真が巨大に表示されていることでしょう。高画質な写真であれば、ウィンドウからはみ出す位のサイズとなるでしょう。ブラウザいっぱいの巨大な表示サイズを小さく表示する方法は2つあります。ひとつは、画像処理ソフトを使ってサイズを小さくする方法です。下の写真は幅200ピクセルに縮小したものです。200ピクセルもうひとつは、タグでサイズを指定する方法です。src="1a.jpg">となっていました。>と、いう風にします。この例では、幅400ピクセル、高さ300ピクセルとなります。サイズ指定によっては、相似形にならず平たくなったり、高くなったりしますので、元のサイズから、同じ割合で小さくする必要が有ります。元のサイズを厳密に調べるのは面倒なら、横4:縦3としておくとたいていのデジカメ画像に対応するでしょう。height="300"」を写真の枚数だけ繰り返して記述するは、何だか無駄な気がします。シンプルにしようと思ったらスタイルシートという機能を利用します。height="300"」が適用されるようにするものです。書き方は1行目をこのように追加するだけです。src="1c.jpg"><続く>「style」というタグに記述します。「img」タグすべては幅400ピクセル、高さ300ピクセルのサイズにしなさい、という意味です。画像データのサイズは変わらない。大きな画像データをサイズ指定しても、データサイズ自体は変わりません。見た目は小さくなりますが、読み込み時間は大きなサイズと同じです。大量の画像を表示する場合は、画像処理ソフトを使ってサイズを小さくした方が良いでしょう。※前回もお断りしたとおり、自分や仲間内の利用のみとしてください。HTMLの文法からみると、省略しすぎています。改行を入れるウェブページでは「改行を入れる」より「段落でひとまとめ」にする方がしっくりきます。小手先の技「改行」もありますが前回までの「写真アルバム」では、画面サイズによっては、写真が横に並んでしまいます。1枚ずつ縦に並べたいのであれば、「改行」しなければなりません。ワープロで改行するために押す「ENTER」にあたるタグが<br>タグです。ここでは、各行の最後に<br>タグを入れて、文字->写真->文字->写真->という風に縦に並ぶようにタグを書いてみます。><br>1枚目の写真2枚目の写真まず段落でひとまとめにするほうがいい出来れば単に改行を入れるだけでなく、段落で分けてやる方が良いのです。これは段落に名前をつけてやり、書式の設定はまとめて出来るというメリットがあるからです。段落とはワープロでもおなじみはずです。段落が集まってページページが集まって文書おそらくたくさんの枚数の報告書をまとめるという機会がないとあまりそれらの機能を使うこともないでしょうが、こんな理屈があるのだと思っておいて下さい。HTMLも同様に段階構成があり、段落にあたるものが<p>だと考えていいでしょう。下は、説明と写真を分けて考え、<p>でそれぞれ分けました。段落は4つということになります。></p>1枚目の写真2枚目の写真インターネットエクスプローラで見ると、タイトルと写真の間に1行挿入されてしまいます。いって<br>に戻す必要はありません。スタイルシートで間隔を狭めることは可能です。下に示したのはスタイルシートで題名と写真の間の隙間を無くした例です。0;">としています。※このページはもともと読みやすくするために改行幅を広く取っています。よって<br>で区切った時と同じ間隔となっているということを確認いただければ結構です。連番の処理が得意なエクセルに作業を分担させるのがいいようです。前回までありきたりなホームページ講座を展開していましたが、まだ実用的とは言い難いでしょう。実際に大量の写真があった場合、異なるファイル名をいちいち手入力するのは大変です。そこで何か自動でできる良い方法が無いかと考えるのです。留意点としては、自動化で節約できる時間をいつも念頭におくことが肝要です。ファイル名を100箇所変えるくらい、数分で終わる仕事ですから、そのために何時間もプログラミングやフリーソフト探しをしているというのは考えものです。この様な「ちょっとした困った事」に役立つのがスプレッドシートです。メーカーのパソコンを買うともれなく、抱き合わせされているエクセルのことです。完全に自動では無いけれど単純作業からは解放されるという半自動が実現されるわけです。エクセルを活用してHTMLを作るという一連の作業を理解すれば、写真アルバムに限らず、結構応用が利くと思うのです。どんなことをしているのかちょっと覗いてみてください。エクセルでHTMLを作る連番を入れるエクセルは連番をつけるのが得意です。オートフィル機能を使う先ずA1セルに1を入力。A2セルに=A1+2を入力。A3セルはA2セルをコピー。いろんなやり方があるでしょう。この辺りは、「誰でも知ってますよ」と、言われそうなので、さらりと流しましょう。A列に連番を入れます。数字をファイル写真ファイル名にするA列に並べた連番を参照しながら、B列に写真ファイル名を含むHTMLの要素を記述していきます。工夫としては以下の様なものです。ちなみに例の写真ファイル名はImg_0001.jpgの様に数字部分が4桁になっているものです。A列を参照しながら文字列は「"」で囲みます。セルに「="000"」と入力すると、「000」と表示されます。文字列と参照するセルを連結するときは&を使います。「="000"&A9」と入力すると、「0002」と表示されます。連番が2桁以上になると「00011」のように4桁を超えてしまいます。そのような場合に備え文字列操作関数「RIGHT」で、右から4文字のみを取り出します。「"」を表示したいときは「"」を2つ書きます。「="""A"""」と入力すると「"A"」と表示されます。ソース全文をB列に表示するHTMLの要素すべてをB列に書いていきます。B列にソース全文が並ぶ黄色は<head>部分です。A6セルに書いた文字を<title>にて表示させるようにしています。<h1>ブロックにA列の文字を代入するとともに、黄色部分に記述したスタイルシートで、文字の大きさと帯の色を決めています。赤は写真表示部分です。写真1枚につき1行を使用し、<div>ブロックに囲まれています。ブロック内では上に連番、下に写真が表示されるようになっています。<div>ブロックもスタイルシートで定義しており、写真同士の離れなどを定義しています。紫は改ページを表現しています。メモ帳に貼り付けるB列を選択してコピーし、メモ帳に貼り付けます。B列の一番上、Bと書かれた枠をクリックすればB列全体選択できます。右クリックするなり、編集メニューから選択するなりしてコピーを実行します。メモ帳を立ち上げて、貼り付けます。メモ帳には、エクセルで表示されていた文字列が貼り付けられます。エクセルの1行に対応するように改行が入っています。メモ帳に貼り付けるメモ帳に貼り付けたら、名前をつけて保存しましょう。デスクトップに、名前は「写真アルバム.html」。任意の名前ですが、最後に「.html」または「.htm」とつけるのはお決まりです。写真アルバム完成メモ帳を閉じたら、保存した「写真アルバム.html」をダブルクリックしましょう。いつも使うブラウザが立ち上がり写真が表示されます。デスクトップに写真ファイルをおいておく必要があります。写真ファイル名にあわせてエクセルの式も変える必要もあります。写真アルバム完成エクセルファイルをゼロから作るのはちょっと面倒でしょうから、エクセルファイルを用意しました。どんな風になるのか試したい方は、こちらからダウンロードしてください。photo.xls[excel形式17KB](右クリックで対象をディスクに保存して下さい)(ref/8013/photo.xls)エクセルは文字列処理の作業スペースこのように、エクセルは表やグラフを書いて印刷するだけが機能ではありません。文字列を加工する作業スペースとしてとらえるといろいろと役だってくれます上記の写真アルバムではHTMLのすべてを作成していますが、ホームページビルダーなどのオーサリングソフトとの連携でも構わないのです。大枠はオーサリングソフトで作っておいて、くり返し部分のみをエクセルで加工し、また戻すのです。冒頭で、エクセルで文字列の処理をするメリットとして時間的な観点を挙げましたが、もうひとつ見通しの良さによるミスの軽減も見逃せません。手入力と自作プログラムの場合、いずれも完成版のチェックを怠るともうチェック機能がありませんが、エクセルでの半自動の作業であれば、セルに文字列が整頓されて並ぶので間違いにも気がつきやすいのです。パラメータを独立したセルに入れるなどして、チェック機能が働く様な工夫で更に見通しが良くなる事でしょう。自動的に写真アルバムを生成するこれも車輪を再発明しているようなものでしょう。車輪を再発明してみる前回(エクセルで連番(8013.html))までの話では、「IMGタグ」をくり返し書くのは大変ということで、エクセルを活用することを思い立ちました。そこでよせばいいのに、もっと楽になるのではないかと、自動化ツールを作ってしまいました(Windows限定です)。個人でソフトウェアを作るときの鉄則は、「作る時間」より「節約できる時間」が短いこと。このソフトは、「作る時間」が「節約できる時間」をはるかに上回るものです。ネットを探せばきっとよく似たものはあるだろうと思われるのですが、探す手間を惜しんだために見つけられずにこうやって作っているのです。こんなことをプログラムを作る人たちは自戒の意味を込め「車輪を再発明する」と呼んでいるのだとか。最初の画面ファイルをダウンロードしていただき、解凍すると、readme.txtとPageViewXXXX.htaの2ファイルが入っています。写真ファイル(jpgかjpeg限定)が入ったホルダーに、PageViewXXXX.hta(XXXXはバージョン番号)を置いてダブルクリックすると、こんな写真アルバムが表示されます。表示されないとすれば、環境が整っていないということです。環境を整えて欲しいと言いたいところなのですが、セキュリティーホールが出来るという評判の悪いシステムなので無理強いは出来ません。このページの最後に説明をしていますのでご参考下さい。写真幅−写真サイズのうち、幅を指定します。(初期値:200ピクセル)写真高さ−写真サイズのうち、高さを指定します。(初期値:150ピクセル)簡単縦横比−写真幅と写真高さの比率が4:3になるようサイズを指定できます。写真番号−12.に表示される番号をどのように表示するか指定します。(初期値:ファイル名)※写真番号を選択すると拡張子抜きのファイル名となります。横方向−画面の横方向に何枚ずつ配置するか指定します。(初期値:3枚ずつ)縦方向−画面の縦方向に何枚ずつ配置するか指定します。(初期値:5枚ずつ)反映−上記の指定を変更した最後にこのボタンを押して表示方法を更新します。印刷−印刷ダイヤログボックスを表示します。保存−今の設定で同じホルダーにHTMLファイルを生成します。※設定を変えたときは「7.反映」ボタンを押して、内容を更新してから、保存して下さい。リセットタイトル欄−保存したHTMLファイルにタイトルを付けることが出来ます(この初期画面ではタイトルを入れられません)。ページにはページ区切りを挿入していますので、ページごとに異なるタイトルを付けられます。写真番号−7.写真番号にて表示方法を変更出来ます。写真−一律同じサイズに縮小表示します。ファイルサイズの小さなサムネイルファイルを生成しているわけではありませんから、大きなデータサイズの写真では操作が重くなります。水色の帯に囲まれた間が1ページになります。ブラウザ上ではページの概念はありませんが、印刷時には帯の直前で改ページが入るようになっています。初期値では印刷時にA4サイズ縦の用紙にだいたいおさまるようになっています。環境によってはこれでははみ出すという方もおられるでしょうから、並べる枚数を減らしたり、写真のサイズを小さくしてみて下さい。設定は反映ボタンを押さないと反映されません。リアルタイムに反映されないので使い勝手が悪いかもしれませんが、写真のサイズや数が多いと再描画に結構時間がかかってしまうので、このような仕様にしました。設定が終わったら、その表示状態をHTMLファイルとして保存しましょう。印刷ボタンを押すと、ブラウザが立ち上がり同じ内容の画面が表示されます。ファイルは同じホルダーに保存されています。画面は最初の画面と異なり設定の部分がなく、タイトル用の水色の帯が一番上にきます。繰り返しますが設定を変えたときは反映ボタンを押して、内容を更新してから、保存ボタンを押して下さい。保存したHTMLは、ちょっと手を加えるだけで、実用性がアップします。インターネットエクスプローラーなら表示(V)->ソース(C)で編集可能となりますから、お試し下さい。タイトルバーの名前を変更するタイトルバー(上図14)の文字は、下図aの部分を書き換えます。各ページのタイトルを変更する各ページのタイトル(上図11)の文字は、下図bの部分を書き換えます。最初は全角の空白文字が入っています。コメントを記入する写真の説明を入れる場所は特に設けていませんが、<td></td>で囲まれた部分であればどこでも構いません。改行マーク<br>を駆使して、試してみて下さい。写真のサイズ横型の写真が多い中、ひとつだけ縦型が入っている場合などは、手作業での入力が必要になります。下図cを書き換えることで変更可能です。HTMLソースを修正するダウンロードLHA形式かZIP形式のいずれかをダウンロードし解凍して下さい。5.52KB)(ref/8014/pageview0_20.zip)使用に際してこのスクリプトはフリーで配布しています。このスクリプトを使用したいかなる損害に対して作者は一切の責任を負いません。バグの報告、改良の要望等ありがたくお受けし、サイト上に紹介させていただきます。対応はお約束できませんのでご了承下さい。再配布または改造は可能です。その際、著作権部分の削除は禁止します。ソフトの出来はまだまだというところもあるでしょう。それでもこのソフトの良さを見いだしてくれる方の中で、改良を加えていただくことは大歓迎です。Host(WSH)を利用したものです。WSHはWindowsのさまざまな機能を引き出せる反面、セキュリティーホールとなる危険性をはらんでいます。ウィルスが流行っていた頃は、HTAを実行不能にするという処置がセキュリティー対策だった時があります。PageView.hta自体に問題があるわけではありませんが、実行出来る事にちょっとした不安があるということを頭の片隅に入れておくとよいでしょう。参考サイトとして、HTAを必要な時にだけ実行することができるソフト「HTASTOP」を紹介しておきます。[参考サイト]HTAStopによるHTAスクリプトの無効化(http://www.higaitaisaku.com/htastop.html)フリーソフトHTASTOPが紹介されています。HTAを実行するために上記にも紹介したとおり、セキュリティーの問題から、HTAが実行出来ない場合があります。READMEファイルに対策を書いておきましたのでご参考下さい。仕事に役に立ててこそ、お役立ち技でしょう。メールで簡単に添付したい前回まで紹介した写真アルバム。今ひとつとっつきにくいという方も多いでしょう。HTML形式のファイルとバラバラの写真ファイルをセットでホルダーに入れるという芸当は煩雑に感じるかもしれません。メールで送信しようとするとLHAやZIP等の圧縮形式でまとめて添付することになります。「どうやって解凍するのか?」というようなパソコン初心者が相手では写真アルバムを渡すだけでもひと苦労というわけです。ワードファイルやPDFファイルを添付して、それをダブルクリックして下さいというのが簡単でいいのです。そこでこのようなワードファイルを作ってみました。ワードで写真アルバム当然の事ながら、手書きで罫線を引いたものを見てくれと言っているわけではありません。前々回のエクセルで連番(8013.html)で取り上げた、エクセルシートを使った大量生産ワザを使って、今度はワードの写真アルバムを作ってみたのです。HTMLをワードで読み込む別に特別なワザがあるわけではありません。ワードを立ち上げ、エクセルで連番(8013.html)の要領で作ったHTMLファイルを指定して開くだけです。ワード文書にしてしまおうというのは、ゲストブックに書き込みをしていただいたnobuuさんの提案によるものです。ワード文書なら仕事にも使えそうです。HTMLの改良ちなみに上記の写真アルバムは、ちょっとアレンジを加えて下の様なHTMLになっています。考:</td></tr></tr></table></body></html>ワードの中では罫線で区切るのが扱いやすいということで、TABLEタグが主体です。罫線を表示させたくない場合も、レイアウトのため、TABLEタグを使うのがいいと思います。スタイルシートもありません。色を付けたりするのは、ワードの仕事と割り切ります。備考のあるセルは、280ピクセルという高さを持たせています。写真の高さより低い任意のサイズを指定して、一段上の番号セルを狭くしたい時に下から罫線を押し上げるような動きをします。3行目の「charset=Shift_JIS」は、ワードを読み込むとき、きちんと日本語にならないときに入れてやって下さい。ソースを生成するエクセルシートを用意しましたのでお試しください。最初は罫線に写真や文字がぴったりサイズでおさまっている状態でワードに読み込まれていますからちょっとした編集が必要です。その準備として、罫線に色をつけるか、編集用に罫線を表示しましょう。表示されたら、罫線をつまんでページいっぱいになるように罫線を適宜移動して広げて下さい。高さ方向についても編集の必要があります。最初は罫線の表が一体になっていますから、ページごとに分けなければなりません。改ページを挿入すれば罫線の表は上下分離してくれますが、ちょっと手間です。手っ取り早く「ページ設定」で上と下の余白の幅を変えてやるのが良いでしょう。私の場合、写真の高さを300ピクセルとし、余白を少し広げてやると、上記のようにA4サイズに3枚入るようになりました。各自好きなように調整してみて下さい。保存このままワードを閉じてしまうと、HTMLファイルのまま保存されます。設定したレイアウトが崩れてしまうので、ワード形式に変更することがポイントです。画像の取り込み写真は単なる画像ファイルへのリンクです。ファイルに画像を保存していない状態なので、編集の操作性が良いのが特徴です。ファイルを持ち運ぶ時、写真ファイルも添付しなければなりませんので、ファイルをひとつにまとめたいときは、ファイルの中に画像を保存してしまいましょう。リンクの解除コマンドで写真ファイルは取り込まれます。この辺のノウハウもnobuuさんにいただきました。リンクの解除こんな感じで、少しは実益を兼ねた「ヒント」になったのではないでしょうか。HintEngineering。