(佐賀→熊本)マークアップエンジニアのググる生活

地方のWEB制作会社で働く、フロントエンドエンジニア。
HTML、CSS、JavaScript(jQuery)、PHP、Smary、EC-CUBE、WordPress、Movable Type等々で解らない時に、Googleで検索したら解決した話や、「閃いた!」などをほとんど自分用にメモとして残すブログです。

※URLがあったら元記事を参照推奨です!
※ほとんどの事は検証はしていますが、あくまでも参考程度にお願い致します!
※記載が不正確であったことにより生じたいかなる損害に関しても、当ブログは責任を負いかねます。自己責任でよろしくおねがいいたします。

2017年11月

検索してもテキストかテキストエリアの拡張のみしか見当たらないあたり、
あまり需要がないのでしょうか…?

PDFを商品ごとにアップする必要がある案件を担当するにあたり、
右往左往しましたが、
ほとんど画像のアップロードを増やす要領で実現できたので、
メモします!

まずは、文字列(PDFファイル名)を保存する為の枠を作ります。
商品ページへの基本的な項目の追加は下記の記事がとてもわかり易いです。
[EC-CUBE] 2.13 商品詳細ページの項目追加(MySQL)
http://digipoke.com/archives/1668


・625行目辺り「商品詳細の SQL を取得する」に追加
までは上記の手順でちゃちゃっと済ませておきます。

追加の項目名が不明だと分かりづらいので、
以降は manual と表現します。

次に、商品登録ページに入力欄を設置しますが、
ここはテキストではなく、input[type="file"] 形式にします。
一覧-メイン画像の tr を複製し利用します。

<tr>
    <!--{assign var=key value="main_list_image"}-->
    <th>一覧-メイン画像<br />[<!--{$smarty.const.SMALL_IMAGE_WIDTH}-->×<!--{$smarty.const.SMALL_IMAGE_HEIGHT}-->]</th>
    <td>
        <a name="<!--{$key}-->"></a>
        <a name="main_image"></a> // ←ここは削除
        <a name="main_large_image"></a> // ←ここは削除
        <span class="attention"><!--{$arrErr[$key]}--></span>
        <!--{if $arrForm.arrFile[$key].filepath != ""}-->
        <img src="<!--{$arrForm.arrFile[$key].filepath}-->" alt="<!--{$arrForm.name|h}-->" /> <a href="" onclick="selectAll('category_id'); eccube.setModeAndSubmit('delete_image', 'image_key', '<!--{$key}-->'); return false;">[画像の取り消し]</a><br />
        <!--{/if}-->
        <input type="file" name="main_list_image" size="40" style="<!--{$arrErr[$key]|sfGetErrorColor}-->" />
        <a class="btn-normal" href="javascript:;" name="btn" onclick="selectAll('category_id'); eccube.setModeAndSubmit('upload_image', 'image_key', '<!--{$key}-->'); return false;">アップロード</a>
    </td>
</tr>

上のようなテンプレートの記述です。
・// ←ここは削除 は必要ないので削除。
・th の名前を変更
・名前下の画像の縦x横は .pdf のみなどアップロードできる拡張子を明記しておくと良いともいます。
・main_list_image を manual(先程作った枠の項目名)に置き換え(2箇所)

入力欄はこれで完成です。


次に、商品ページ(LC_Page_Admin_Products_Product.php)の機能を拡張します。
・lfInitFormParam()
・lfInitFile()
の関数にそれぞれ付け加えます。


lfInitFormParam() は、上の記事でも作業を行ったところですね。

// こういうのを追加していた場合
$objFormParam->addParam('取扱説明書', 'manual', STEXT_LEN, 'KVa', array('SPTAB_CHECK', 'MAX_LENGTH_CHECK'));

// 下記2行を追加(データの受け渡し用で使用)
$objFormParam->addParam('temp_manual', 'temp_manual', '', '', array());
$objFormParam->addParam('save_manual', 'save_manual', '', '', array());


lfInitFile() はアップロードファイルパラメーター情報の初期化する関数です。
アップロードファイルをプログラムに送りつける前に事前に枠を置いておくような感覚でしょうか。

$objUpFile->addFile('取扱説明書', 'manual', array('pdf'), IMAGE_SIZE, false, 0, 0, false);


これで、完了です。


実際に、PDFを選択し、アップロードすると、
/upload/temp_image/ フォルダに保存されます。
そのまま商品ページを保存すると、
/upload/save_image/ フォルダに保存されます。

また、データベース上でも確認してみると、
manual(先程作った枠の項目名)のところにPDFファイル名が入力されているはずです。


アップロードの機能は画像の仕組みをそのまま利用できるので、
非常に少ない追記で行うことができました。
途中でサムネイル生成の判定が入りますが、
main_image 系のみ反応するようなので、特に作業の必要がなく回避できるのはありがたかったです。


IMAGE_SIZE はシステム設定>パラメーター設定にあります。
初期値が 1MB だと思います。普通に足りないと思うので、
10MB ぐらいにしておくと、無難かと思われます。
また PDF だけ 10MB にしたい場合は、
引数の IMAGE_SIZE を 10000 にするとOKです。


確認や実際の表示は Aタグで開くようにしてあげると良いでしょう。





2017/11/24 追記
特に不具合は無かったのですが、
商品を複製する際に、「イメージの形式が不明です。」とエラーが出て処理が止まるようになってしまいました。
アップロード時のサムネイル生成は key 名で判定が入るので、カスタマイズ不要でしたが、
複製の際は別途機能を使うみたいなので、次のように追記する必要がありました。

/data/module/gdthumb.php

/*
* サムネイル画像の作成
* string $path
* integer $width
* integer $height
*/
function Main($path, $width, $height, $dst_file, $header = false) {
  // 追記
  if(strpos($path, '.pdf') !== false || strpos($path, '.PDF') !== false) {
    return array(1, false);
  }

  ~元々の処理~
}


検索でヒットしなかったので、稀な現象なのでしょうか?
version 56 で確認しています。

メインブラウザを Firefox にしてますが、
ときどき新しいページを開いたときに応答なし(いわゆるプチフリ?)になるときがありました。

なんでかなーっで、ずっと思考停止してましたが、、、
不意に SNS ボタン(ソーシャルボタン)の読み込みが原因なのでは!?と思い、
広告をブロックするアドオンの uBlock Origin をインストール。

アドオンの管理画面→外部フィルター→Fanboy’s Social Blocking List に
チェックを入れて、右上の適用ボタンを押す。

これで完了です!

まだ長い時間経過を観察してないので、
別の問題かもしれませんが、今のところ結構改善されました。

Adblock Plus でも出来るみたいです。

このページのトップヘ