EC-CUBE 長すぎる文字列の省略を実装してみた。

2014年04月26日 18時00分 正午の月齢:26.7  月名:二十七日月  潮汐:中潮 月齢:26.7[二十七日月] 潮汐:中潮
(最終更新日:2019年09月02日)
12年前に投稿 | ウェブ・IT関係 | コメントはありません

5分ぐらいで読めます。

最近ふたたびEC-CUBEをいじっています。ただ、テンプレートのことや運用の都合で2.12系を使い続けていて、まだ2.13系には手を出していないのですが…。ソースコードをチラ見したところ2.13系のほうが好きなんですけどね。

さて、商品名ってどうしてもある程度長いものになる傾向があって、それはそれで一向に構わないのですが、何とかしたいナと思うことがあります。たとえば、

truncate-off

このように「よく一緒に購入されている商品」「最近チェックした商品」など、リストを横に並べるタイプのプラグイン。

商品名が長くなると文字列が折り返されるので、商品名の長さにばらつきがあると販売価格の表示が上下してちょっと美しくない。これを何とかしたかったのです。そんなわけで探したのが「EC-CUBEの小技:長すぎる商品名を…で省略する方法」。もうそのまんまです。ここには、

まず、情報参照元がこちら

Smarty研究(2)マルチバイト文字に対応した truncate 修飾子を作る

こちらの情報どおりに

modifier.mb_truncate.php ファイルを作り

/data/module/Smarty/libs/pluginsにアップロードするだけ。

使用するときは以下のように。

例として商品名を省略します。

<!--{$arrProduct.name|mb_truncate:18:"..."}-->

これで、日本語18文字目より後の文字は「...」で省略されます。

と書かれています。

引用の中のハイパーリンク「Smarty研究(2)マルチバイト文字に対応した truncate 修飾子を作る」を見てみました。

truncate は、文字列を指定の文字数までで切ってくれます。切った後につける文字列も指定できるので、

たとえば

$smarty->assign('string', 'abcdefghijklmnopqrstuvwxyz');

として

{$string|truncate:5:"..."}

などとすれば、文字列は 5 つめで切り捨てられ

abcde...

と表示されます。

しかしこの修飾子、文字列判定にはバイト数を使用しており、マルチバイト文字列で使用すると文字化けを起こしてしまう可能性があるのです。

なんだよちくしょー、と Smarty のプラグインディレクトリの中の「modifier.truncate.php」を開いてみたら、単に文字数取得に使われている関数が「strlen」、文字列切り出しの関数に「substr」を利用しているだけの事です。

となれば、ここをマルチバイト対応にすればよいのではないか?

てことで作った修飾子がこちらです。

function smarty_modifier_mb_truncate($string, $length = 80, $etc = '...') {
if ($length == 0) {return '';}
if (mb_strlen($string) > $length) {
return mb_substr($string, 0, $length).$etc;
} else {
return $string;
}
}

文字数を取得する部分には「mb_strlen」を、文字列切り出しには「mb_substr」を利用しています。

日本語には必要ないと思われる第4、第5引数はバッサリカットして見た目もスッキリ。

これを「modifier.mb_truncate.php」という名前で保存し、「smarty/libs/plugins」の中に放り込めば、テンプレート内で

{$string|mb_truncate:5:"..."}

このように使用できます。

ということで、マルチバイトに対応してくれています。まさに理想的。恩恵を受けているだけではアレなので、PHPファイルにしてzip圧縮したものを置いておきますネ。

ところで、このファイルを入れる場所ですが、今までの記事を見ると/data/module/Smarty/libs/pluginsと書かれています。今まで考えたことなかったのですが、この機会にEC-CUBEの構造を調べてみました。

で、これらを読むと、「Smarty」に入れるよりも「smarty_extends」のほうがよりふさわしいのかなと思って、smarty_extendsに入れてみます。

truncate-on

商品名等を表示している部分、

<p><a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrCheckItems[cnt].product_id}-->"><!--{$arrCheckItems[cnt].name}--></a></p>

<p><a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrCheckItems[cnt].product_id}-->"><!--{$arrCheckItems[cnt].name|mb_truncate:8:"..."}--></a></p>

に変更することで、このようにすっきりと表示されましたー。やったー!!

WordPressテーマの配色と初音ミクカラーパレットの関係

2014年03月30日 18時00分 正午の月齢:29.2  月名:月隠  潮汐:大潮 月齢:29.2[月隠] 潮汐:大潮
(最終更新日:2019年09月02日)
12年前に投稿 | WordPress | コメントはありません

2分ぐらいで読めます。

2週間くらい前に変更したWordPress自作テーマ。今回のテーマに使った配色をカラーパレットにしてみました。

susu03_7color

左から順に、

  • #333333 (51,51,51)
  • #666666 (102,102,102)
  • #F8F8F8 (248,248,248)
  • #FFFF99 (255,255,153)
  • #99CCCC (153,204,204)
  • #00CCCC (0,204,204)
  • #FF0099 (255,0,153)

です。

この他にも、bodyの基本背景色として#FFFFFFなどいろいろと設定はしているのですが、7色に限定するなら上記のコードになるかな、って思います。

さて、この色設定に関して参考にしたのが、初音ミクのカラーパレット。

miku_7color

左から順に、

  • #373B3E (55,59,62)
  • #BEC8D1 (190,200,209)
  • #FFFEEC (255,254,236)
  • #C3E5E7 (195,229,231)
  • #86CECB (134,206,203)
  • #137A7F (19,122,127)
  • #E12885 (225,40,233)

となっています。

もちろんこの色は、実際に使われている画像から抽出されたものなので間違っているわけではないのですが、このまま使ってしまうと全体的にちょっと緑がキツい感じ。なので薄い黄色(#FFFF99)を入れてみました。

初音ミクってよく「緑髪」なんて言われますが、緑色か水色かどっちだ? ということで意見が分かれるみたい。でも、いわゆる緑ということは考えられなくて、個人的には水色に近い気がします。波長で表現するなら500nmくらいかな。本当に緑色と青色の中間。

実際に分析してみると、R:G:Bが1:2:2くらいで、ウェブセーフカラーで最も近いのは#66CCCC (102,204,204)あたりのようです。実際にはグラデーションがかかっていたり、使われる面積によって感じ方が変わったりして、何色かわからないですケド。

●←#66CCCCってこんな色。

しかし、テーマにはあえて#66CCCCを使わず、広い面積(ヘッダー等)には#99CCCC、狭い面積(A要素の文字)には#00CCCCにして、周囲の色とのバランスを取りました。ヘッダーに#66CCCCだと、彩度が高くて。

拡張子.mtsのAVCHDファイルを、AviUtl経由TMPGEncでmpeg2にする。

2014年03月20日 18時00分 正午の月齢:19.2  月名:更待月  潮汐:中潮 月齢:19.2[更待月] 潮汐:中潮
(最終更新日:2019年09月02日)
12年前に投稿 | ウェブ・IT関係 | コメントはありません

2分ぐらいで読めます。

メイン機を変更して、ようやくほぼ元の環境にできました。しばらく放置していたビデオから抜き取ったAVCHDファイルをmpeg2にする続きです。

かなり前には別の方法で行っていたのですが、最近はAviUtlにAVCHDファイル(.mts)を読ませ、そのプロジェクトファイル(.aup)をTMPGEncでエンコードしています。ところが機種変更してから初めてのエンコードに挑んだところ、まずAviUtlがAVCHDを読んでくれない…。というわけで、そのあたりの解決策の備忘録。

最初はAviUtlのバージョンのせいかなと思い、version1.00からversion0.99mにしてみたものの変化なし。そんな中参考にしたのが「AviUtlでMP4(H.264)エンコードするためのインストールと設定方法」。ただこの中で「Nero AAC Codec」と「MPEG-2 VIDEO VFAPI Plug-In」は、最近のバージョンだとWindows2000ではエラーが出て働いてくれず、あきらめて削除しました。

結局のところ、

  1. x264.exe(32bit 8bit-depth)
  2. 拡張x264出力(GUI)Ex(x264guiEx)
  3. MP4Box(MP4Box-0.4.6-rev2080.zip)
  4. DirectShow File Reader プラグイン for AviUtl
  5. Libav-SMASH Exporter

このあたりをなんとなく突っ込んだら、読み込めるようになったみたい。本当に必要なものとそうでないものの特定ができないんですけどね。

tmpgenc

他には、

も参考にしました。あとはTMPGEncにaviutl.vfpを設定するのも忘れずに。

テーマをフルモデルチェンジしてみた。

2014年03月13日 18時00分 正午の月齢:12.2  月名:十三夜  潮汐:中潮 月齢:12.2[十三夜] 潮汐:中潮
(最終更新日:2014年03月17日)
12年前に投稿 | WordPress | コメントはありません

2分ぐらいで読めます。

久しぶりの投稿ですが、とにかく私生活がバタバタだったんです。気がついたら3月も1/3ほど経ってしまっています。さてさて、そんな忙しいときにもかかわらず、3年ぶりにテーマファイルを一新してみました。

screenshot

ここ最近流行のフラットデザインっぽく、ベタ塗りでまとめています。2カラム、右メニュー、本文リキッドレイアウトは以前と変わらないのですが、画面幅が500px以下になればサイドメニューが消えるレスポンシブデザインを取り入れてみました。

コンセプトは、まぁ色を見ればバレバレな気もしますが、初音ミク色なわけでして。あとはできる限りウェブセーフカラーで構成し、どうしても出せない淡い色のみ、妥協しています。このご時勢に216色にこだわる必要はほとんど無意味なんでしょうけど、何ていうか、昔からの習性みたいなものかなー。

さて、今までの当サイトのテーマを振り返ってみましょう。

screenshot01

これが初代のテーマのスクリーンショット。「鉄道ブログ」な感じをムンムンと押し出しています。途中マイナーチェンジを何度か加えましたが、基本的には白いままでした。

screenshot02

これが昨日まで使っていた2代目テーマファイル。明るめの緑色をメインにしてみました。基本的にはほとんど初代のテーマのままで、スタイルシートや画像だけを変えたくらいかな。

で、3代目のテーマですが、元になるファイル群が別物でして、余計な記述はできる限り省きました。一応Internet Explorer6でも崩れずに表示されるんですよ。あ、そうそう。相変わらずXHTML1.0です。HTML5で書く気が起きないので。html lintなどのチェックも全然していないのがちょっと心配。でもFirefox27・12、IE6・8で表示されているし大丈夫だよきっと、うん。と自分に言い聞かせて。

5年くらいはこれでいけるかなって思っているんですケド。

Satellite J50にWindows2000を新規インストール。

2014年02月18日 18時00分 正午の月齢:18.6  月名:寝待月  潮汐:中潮 月齢:18.6[寝待月] 潮汐:中潮
(最終更新日:2019年09月02日)
12年前に投稿 | ウェブ・IT関係 | コメントはありません

2分ぐらいで読めます。

「4人の子供にそれぞれパソコンを与えよう」という、パソコン1人1台計画のために増備した東芝Satellite J50。いつものようにヤフーオークションで落札した格安&頑丈なJシリーズです。

いつもと違ったのは画面の解像度。大きさは15インチのままですが、1024*768ではなく1400*1050という、今まで我が家に存在しなかったモノ。子供に使わせるのはもったいない!!

ということで、これを自分のマシンにしてしまいましょう。そのためにはWindows2000を載せる必要があります。(いや別にWindows XP proで全然問題ないっていうか、むしろそのほうがそのまま使えてラクなんですけど、Windows2000を使い続ける意地のようなものがありまして…。XPのサポートがそろそろ終わるこの時期、2000の方が安全(狙われにくいという意味では)なんて思いもあって、Windows2000を入れないと気がすまないんですよ。)

そのかわりに、今まで使っていたJ60にはSSDとWindows7を入れて子供用にしてあげる予定なのです。

さて、実際にWindows2000を入れてみたわけですが、当然まったく問題なくインストールできました。ドライバも元々入っていたXP用のものが使えます。今までと異なる点は、AVGのかわりにAVIRAを入れ、ZoneAlarmを入れ、無線LANが内蔵でなくなったので古い802.11bのカードを使ったあたり。ホントはGW-USNano2を使いたいのですけど、Windows2000では使えないのです。とほほ。

画面の解像度がもたらす使い勝手はすばらしく、画像の編集はとても快適。たまにバックライトがちらつくことがあるのが唯一の心配点といったところでしょうか。

公衆無線LANをいくつか登録してみた。

2014年01月26日 06時00分 正午の月齢:25.0  月名:二十六夜  潮汐:若潮 月齢:25.0[二十六夜] 潮汐:若潮
(最終更新日:2019年09月02日)
12年前に投稿 | ウェブ・IT関係 | コメントはありません

3分ぐらいで読めます。

んー、久しぶりの投稿。毎年1月はいろいろと忙しくて、ゆっくり腰をすえて文章書いている時間がないなぁ。さて…

nexus7を入手して1ヵ月。最初の1週間くらいは自宅の無線LAN経由で遊んでいましたがどうしても物足りない…。

そんなわけで、公衆無線LANを使うことにしましたー。

FREESPOT」はほとんど野良みたいな印象が強く、使えるエリアもどうも自分の行動パターンに合わなくてとても使う気になれなかったので、見送ります。

セキュリティについては、最低でもWEPが使われていないと不安という気持ちがあって、いやまあWEPもすぐに突破されるらしいですけど何もないよりかはマシかなと。そんなわけでとりあえず登録したのが、スターバックスとセブンイレブン。どちらも無料で使うことができるし、特にセブンイレブンはあちこちにあるし、登録しておいて損はないかなと思います。実際のところ、スターバックスは高くて不味いので使うことないんですケド。

その次に考えたのが、eoの公衆無線LANサービス「eoモバイル Wi-Fiスポット」。自宅にeoを引いているからなのですが、月額315円というのはかなりいい感じ。京都・大阪・神戸をウロウロするような日常においては、悪くはなさそう。

もっといいサービスはないかなーと探していたところ見つかったのが「Wi2 300」。月額380円とeoよりほんの少し高いのですが、とにかく利用できるエリアが多いのが最大の魅力。もうあちこちでSSIDを拾うことができます。ということで、早速登録してみました。

スターバックスやセブンイレブンのサービスは、接続後にブラウザで認証する必要があるのですが、Wi2 300はMACアドレスを登録しておけば勝手に認証してくれるので、電波をつかんでいたらすぐに使える操作感が超きもちいいっ! 操作が1つ減るだけでこんなに快適だなんて。

気を付けるべき点はとしては、Wi2premiumやWi2_clubやWi2premium_clubやwifi_squareといろいろなSSIDを拾う中で、「_club」がついたSSIDに接続すること。これらはWPA/WPA2 PSKで暗号化されますが、Wi2premiumなんか一見プレミアムな感じが漂っているけれど実は暗号化されていないというシロモノ。何かの事情でこれしか使えないって時しか使わないほうが良さそうです。

3Gと違って、いくらつないでいても通信料を気にする必要がないところが嬉しいですね。3Gスマートフォンのユーザーが「通信料が高い。」とよくボヤいています。そのかわりにどこでもつながるってちょっとうらやましいケド。

ところでWi2 300の読み方は…ワイトゥースリーハンドレッドなのか、ワイニサンビャクなのか。どっちが正しいんでしょ。Windows8.1もウィンドウズエイトポイントワンなのかウィンドウズハッテンイチなのかよくわからない。まぁWindowsについては、7=ナナ、8=ハチと読んでいるので、8.1=ハッテンイチとしか読まないつもり。

Translate »