回答日： 2017-04-03
質問
いつもお世話になっております。早速、詳細からお尋ねと言うか悩み事を。
「添付ファイル付 ウェブページ更新ツール 大容量版」(カスタマイズ No. 248 PDF/オフィスファイル一覧作成ツール)
日本語 Shift_JIS 版
canonetのホスティングサービス
今回、上記 PDF/オフィスファイル一覧作成ツールを利用させて頂こうと、ダウンロードしレイアウト等の設定を行っているところです。
ですが・・・、以前より格段に内容が濃くなっているように思われます。
よって、どこを触れば自分の作成したレイアウトに沿うようになるのか、レイアウトに沿わせるにはどこを削除していいのか・・・。
また、デモのような動きを残すには、どのファイルが必要なのか、いろいろ中身を見ているのですが、よくわかりません。
現状、レイアウトを作ったところなのですが、サムネイルの画像が表示されません。（添付ファイルへのリンクもされません。）
仕組みが複雑になった分、設定内容も難しくなるのはわかるのですが、以前の方がシンプルで使いやすかったように思います。
ダウンロードしたファイルの相関関係やファイルそれぞれの役割をわかりやすくしていただきたいのですが。
また、外部へリンクしている部分もあるようですが、これは必須なのでしょうか？
CSSも複数ありすぎてよくわかりません。
（どれを削除したら、ここが動かなくなる等。）
と、いうより何からお尋ねしたらいいのかもわからない状況です。
投稿日時： 2017-04-03 13:31
回答
「すぐ使えるCGI」のご利用誠にありがとうございます。製品バージョンアップによって却って使いにくくなったとの事、貴重なご意見ありがとうございます。新規のお客様集客の色気やモバイル用の「レスポンシブWeb」対応など、さまざまな思索の結果現状のサンプルになっているのですが、次回改善の参考にさせていただきます。
さて、ではとりあえずは現状からの解決方法を探りたいと思います。
■機能上の問題の解決
まずは、以下のようにご連絡いただいている点が気になります。
> 現状、レイアウトを作ったところなのですが、サムネイルの画像が表示されません。（添付ファイルへのリンクもされません。）
確認なのですが、管理画面上では動作やリンクに問題ないでしょうか？
また、テンプレートを全く編集しない状態では画像やリンクの表示に問題は無かったでしょうか？
もし、全くテンプレートを編集していない状態でリンクがうまく行っていない場合、最初にディレクトリの配置を変える必要があります。これは下記の問題に該当しますので、これに当らないか、まずはご確認下さい。
「ファイルは書き出せますがブラウザで表示できません （ 500 Internal Server Error）」
http://sugutsukaeru.jp/support/44/
■デザイン調整の方法
次は、デザイン調整の方法です。
> よって、どこを触れば自分の作成したレイアウトに沿うようになるのか、レイアウトに沿わせるにはどこを削除していいのか・・・。
ご希望のデザイン（組み込み先サイトのデザイン）がはっきりしている場合は、「すぐ使えるCGI」の初期設定のデザイン設定は全て捨ててしまう方が簡単です。
まずはダミーデザインページを作り、それをテンプレートファイルにコピー＆ペーストしていく方法です。この方法は、下記ページで基本的な考え方をご説明しています。
「サンプルHTMLファイルをデザインテンプレートに反映する方法」
http://sugutsukaeru.jp/support/43/
○機能の組み込み
この時難しいのが、サンプルにある諸々の機能を、お手元のデザインHTMLファイルに組み込んで行く方法ですね。この点は、サンプルごとに説明を書くつもりが追いついていないのが申し訳ありません。
サムネイル画像のサイズ調整に関しては、ダウンロード元のページに説明がありますので、ご参照下さい。「デザインの変更」の所に記載があります。
http://sugutsukaeru.jp/support/248/#design-change
この方法を採る場合で「この機能が組み込みできない」という点があれば、お手数ですが再度ご質問下さい。
■必要なファイル
> ダウンロードしたファイルの相関関係やファイルそれぞれの役割をわかりやすくしていただきたいのですが。
> また、外部へリンクしている部分もあるようですが、これは必須なのでしょうか？
> CSSも複数ありすぎてよくわかりません。
> （どれを削除したら、ここが動かなくなる等。）
○外部ファイルについて
- 管理画面
まず、外部ファイルの要不要ですが、管理画面（templates/admin/ 配下のファイルからリンクしているもの）については、必ず必要です（CSS およびJavaScript）。管理画面をこのバージョンで使う限り削除しないで下さい。
- 公開ページのCSS
公開ページ側（templates/article/ 配下のテンプレートファイルからリンクしているもの）の外部CSSは、全く独自にCSS等を設定されるのであれば、不要ですので削除して結構です。なお、削除すると、レスポンシブWeb対応なども一気に無くなります。
- 公開ページのJavaScript
公開ページ（templates/article/ 配下のテンプレートファイルからリンクしているもの）から読み込んでいるJavaScriptは画像サイズ調整に使っています。消さないで下さい。なお、jQuery を「すぐ使えるCGI」のサーバから読み込んでいる部分がありますが、これは、お手元にダウンロードしてリンクしたり、既にサイトで jQuery 1.x を使っているのであれば、そのファイルにリンクしても結構です。
-「必要」の意味
なお、上述の jQuery の場合のように、「必要」なファイルであっても、初期設定の様に外部サーバから読み込む事は必須ではありません。適宜ダウンロードして、リンクを貼り直してお使い下さい。
（これらのファイルが読み込めないと管理画面が大きく崩れるため、表示を確実にするために、最近の製品の初期設定では「表示に絶対必要で」「デザインを変更する際には編集する必要がない」ファイルは外部から読み込んでいます。昔は必須なスタイルシート設定を全てテンプレート内に直接記載していましたが、CSSが複雑化・長大化したことによりそれもあまり好ましくない方法になりましたので、この方法を採っています。）
■「すぐ使えるCGI」の初期設定テンプレートを元に編集する場合
さて、様々な事情を考慮して「すぐ使えるCGI」の初期設定を元に編集される事を決めた場合は、2つの事をご案内したいと思います。
○CSS設定を確かめるツール
現在のデザインがどのようにCSS設定されているかを、ブラウザで調べることができます。ちょっとしたデザイン変更であれば、これで調べて変更していただくのが近道です。下記ページをご覧下さい。
「CSSの設定を調べる方法（Web開発者ツールの使い方）」
http://sugutsukaeru.jp/support/407/
○CSSクラス付のルール
お使いの製品のクラス付では、どのクラスが必要か不要かを区別していただく事を企図して、クラス名の付け方に以下のようなルールを設けています。見た目用のクラスは、不要であれば一気に検索を掛けて削除してしまっても構いません。
A .pure-*
CSSフレームワーク Pure で使っている見た目用のクラス。レスポンシブWeb対応もこのクラスで行っています。
B .sugu-*
「すぐ使えるCGI」で設定した見た目用のクラス。
C 上記2つ以外
画像のサイズ調整など、このサンプルの機能上必要なクラス。
この辺りの詳しい解説は、下記の CSS ファイルの冒頭に記載されています。
webdir/parts/css/sugu-admin.css
URLならこちら：
http://sugutsukaeru.jp/sample/248-file-download/webdir/parts/css/sugu-admin.css
■ファイルの役割
最後になりますが、同梱されているファイル、および、外部から読み込んでいるファイルの役割は以下の通りです。
○webdir/icons/ ファイルアイコンディレクトリ
◇ファイル拡張子に応じて、以下のファイルが表示に使われます。
webdir/icons/img.gif
webdir/icons/txt.gif
webdir/icons/pdf.gif
webdir/icons/xls.gif
webdir/icons/general.gif
webdir/icons/zip.gif
webdir/icons/doc.gif
webdir/icons/ppt.gif
◇以下のファイルは、このサンプルのバージョン管理ミスのため含まれていて、使っていません。
webdir/icons/nowprinting.png
webdir/icons/noimage.png
○webdir/parts/css/ CSSファイル
◇公開側のデザインを指定
webdir/parts/css/sugu-site.css
webdir/parts/css/sugu-site-old-ie.css （IE8以下用）
webdir/parts/css/sugu-248-file-download.css
◇管理画面のデザインを指定
webdir/parts/css/sugu-admin-old-ie.css （IE8以下用）
webdir/parts/css/sugu-admin.css
◇以下のファイルは、「すぐ使えるCGI」Ver. 5.0の初期設定（templates.default/）で使われるもので、「PDF/オフィスファイル一覧作成ツール」では使っていません。
webdir/parts/css/jquery-lightbox.css
○webdir/parts/js/ JavaScript ファイル
◇管理画面・公開画面両方で使っている JavaScript。「PDF/オフィスファイル一覧作成ツール」用に特に必要なもの。
webdir/parts/js/sugu-248-file-download.js
◇管理画面用のJavaScript。「すぐ使えるCGI」Ver. 5.0の初期設定（templates.default/）でも、「PDF/オフィスファイル一覧作成ツール」でも共通に必要になるもの。
webdir/parts/js/sugu-admin.js
◇公開画面で使うJavaScript用ファイル（ハコとして設定してあるだけで、このサンプルでは空のままです。）
webdir/parts/js/sugu-site.js
○画像ファイル webdir/parts/img/
◇設定に応じて、サムネイルが無い時の画像として使われます。
webdir/parts/img/nowprinting.png
webdir/parts/img/noimage.png (※ファイル名が間違っていたので 2017-4-3 16:10 に修正しました。)
◇以下のファイルは、「すぐ使えるCGI」Ver. 5.0の初期設定（templates.default/）で使われるもので、「PDF/オフィスファイル一覧作成ツール」では使っていません。
webdir/parts/img/loading.gif
webdir/parts/img/previous.png
webdir/parts/img/next.png
webdir/parts/img/close.png
○外部から読み込んでいるファイル（URLの詳細の記載を省略しています。）
◇CSSフレームワーク Pure 関連ファイル（レスポンシブWeb対応、管理画面全般に使用）
pure-min.css
pure-grids-responsive-old-ie-min.css
pure-grids-responsive-min.css
◇管理画面のアイコンフォント用
font-awesome-4_5_0-min.css
◇動作全般に必要な JavaScriptライブラリ
jquery-1_11_3-min.js
◇管理画面の動作に必要な JavaScript
rightclick2tag.js
以上でお役に立てると良いのですが。
これらを糸口にしてまた分かりにくい所をご質問いただけますか？
回答日： 2017-04-03