iPhoneサイトを「writing-mode」で縦書きにして「似非電子書籍化」してみた。
Vertical site to your smartphone-site, using CSS3 writing-mode.
like a "Fake e-Books"
http://blog.imagedrive.jp/web/research/2011/01/14/css3-chgov-writing-mode
▲ここ見て最近知ったんですけど、CSSのプロパティに「writing-mode」なるものがあるらしいです。
( ´･∀･`)へｰ…そうなんだ…。
スルーしようと思っていたんですが、もともとDTP（というか雑誌編集業）の業界にいて、そのときの知り合いが「いや、これからは電子書籍だよ！」みたいなことを言ってたんで、チャレンジしてみることにしました。
自分でゴリゴリやろうかと思ったのですが、なんかサンプルないかな～と探していたら、くらげだらけさんのページにそれっぽいのがあったんで、(勝手に)流用することにしました。
いや、ほんとごめんなさい。
自分でやればできるんですょ、ホント。
だってめんどくさ(ry
…。
おかげさまで、サクっと３時間くらいで出来ちゃいました。
(ﾟ∀ﾟ)ｳﾎｰｲ！
いろいろやってみたんだけど、iPhoneを横にしたときに見づらい（つか、縦書きなんで当然）ので、以下のJSコードを入れて、アラートを出すようにしました。
なんか、「縦画面固定」はできないらしいです。
window.onorientationchange = function () {
switch ( window.orientation ) {
case 0:
break;
case 90:
alert('横向きには対応していません');
break;
case -90:
alert('横向きには対応していません');
break;
}
}画面左下の矢印を押したときに、一番最初（一番右側）にスルスルとアニメーションで戻るようにしたかったので（くらげだらけさんのサンプルはjQueryとか使ってなかったので、アニメーションなしです）、以下のようにコードを変更。
function autoScroll (e){
document.getElementById(e).scrollLeft +=document.getElementById(e).scrollWidth;
}
$(document).ready(function(){
autoScroll('auto-scroll');
$(".left").click(function(){
var area = $(".content");
var HashOffset = area.width();
$('#auto-scroll').animate({scrollLeft: HashOffset},2000);
return false;
});
}); とりあえず、CDNでjQuery-mobileも読み込みです。
<script src="http://code.jquery.com/jquery-1.5.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
あ、そだ。
jQuery-MobileはCSSも忘れずに読み込んでね。
僕の場合、くらげだらけさんのように「全画面表示」を使わないUIがよかったので、そこいらへんのコードは削除です。
というより、後々ネイティブアプリで読み込むスタイルにしようとか、広告枠を確保しようとかそういうことを考えてたらめんどくさくなって、いっそのこと外しちゃって最初から全画面に近い感じにしよう…ってことになりました。
もちろん、CSSの方もいらない部分はお掃除しました。
<header>部分もいらないので削除です。
あとは、jQuery-Mobileのお約束なのでメインコンテンツ部分を
<div data-role="page" id="page">～</div>
で囲んで終了。
ネイティブアプリにしたらいらないかな～とは思ったけど、ナビゲーションバーだけは付けておきました。
（Web単体で動かすことも想定しつつ…）
▼で、出来上がったのがこれです。iPhoneの人だけ見てね。
キャプチャはこれです…。
休みの間に、ジュンク堂で長時間立ち読みを行なった結果、Webを読み込んできて表示するくらいのかんたんなアプリなら、FLASHで作れるってことが分かったのでアプリ化してみようと思います。
なんか、MCに読み込んできて表示するだけみたいなんで、わりと簡単そうです。
が、その前にMAC版のAdobe FLASHを入手だなぁ…。
iMac (Late 2006)
MacBook(13-inch, Mid 2010)
MacBook-Air(13-inch, Mid 2011）
と、使っているPCはMACなのに、ほとんどOSXを使わずにBootCampでWIN7なので、AdobeソフトもWin版しかない…。
ｱﾎﾞｰﾝ(´・ｪ・｀)
何かと使う機会も多いし、買うか…。
アカデミック版を。
テーブルの行全体をクリックで子要素のチェックボックス操作（jQuery使用）
http://kachibito.net/snippets/24578/table-tr-check.html
上記のかちびと.netさんの記事をみて、これは親切なUI設計には必要だな…と思って早速授業に取り入れました。
こないだ、古い記事をDisったばかりですが、いつも参考にさせていただいてます。
が、このページのJavaScriptコードだけでは、チェックボックスそのものをクリックしたときに反応がないので、コードを追加して以下のようにしました。
他人のコードをそのままコピペでは…。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function() {
$('input[type=checkbox]').click(function() {
var t = $(this);
if(t.prop('checked'))
t.prop('checked', '');
else
t.prop('checked', 'checked');
});
$('table tr').click(function() {
var c = $(this).children('td').children('input[type=checkbox]');
if(c.prop('checked'))
c.prop('checked', '');
else
c.prop('checked', 'checked');
});
});
</script>
赤字部分が追加した部分です。
これで、チェックボックスそのものに操作をしたときにちゃんと動きます。
行全体をクリックしたときにチェックボックスが連動するのはいいとして、チェックボックスそのものをクリックしたときに何も反応がないんじゃ、「あれ？」ってなっちゃいますから。
これを授業に取り入れた理由は、これからのECはシニアマーケットをどう取り込んでいくかが鍵になると思うからです。
高齢化、過疎化、核家族化の加速。
これら日本が抱える問題は、そっくりそのままECにも関わってきます。
高齢化して外出を控えるようになった過疎地に住むお年寄りが便利なネット通販を利用したいと思うのは当然の流れ。
お年寄り=ネットを使わない
なんて思わないでください。
一線を退いて、自分のための時間はいくらでもある方々が多いわけですから、ネットでモノを買うくらいの操作なんていくらでも覚えられます。
ただ、やっぱりフォーム入力はやりにくい…と。
僕でさえ、疲れている時やメガネをかけていないときはチェックを入れるのが難しいですから。
お年寄りの方であれば尚更…ということを考えると、動作エリアは大きくしたほうがいいわけです。
以下にサンプルを置いておきます。
単体ファイル（jQuery本体はCDNで読み込んでいるので）なので、ソースを見てみてください。
テーブルの行を子要素のチェックボックスに連動させる
ここからは、蛇足です。
ECサイトを利用するとき、フォーム入力などがめんどくさいということで電話で注文したい方も多いと思います。
そうしたことを考えたら、カートページに注文用の電話番号を載せない手はないハズなのですが…。
現在あるほとんどのECサイトのカートページが、電話番号を掲載していません。
カートページだけでなく、トップページにすら掲載していません。
これ、とっても重要ですよ。
フォーム入力ページに
「ご注文内容をお電話でも承ることができます。」
これ、けっこう効くと思います。
さらに言うと、お年寄り以外にも効果はありますよ。
御中元や御歳暮等の大量注文の場合には、１件１件フォームに入力するのがアホらしいので、電話やFAXで注文したいという方も多いです。
今年の夏に、務めている会社の運営するECサイトで御中元用の大量注文をいただきましたが、それも電話でのやりとりの後に送り先をFAXしてもらうという方法でした。
あるいは、送り先一覧のエクセルファイルをフォーム送信できるようにするとかもいいかもしれません。
現在は備考欄に一覧を羅列してもらうという方法が主流（というより、この方法しかない）ですが、いろいろと改善していく余地はまだまだありますね。
アメリカでは、スカイプを使って直接オペレーターとやり取りできるサイトもあるようです。
カートページに商品名と商品番号が一覧で出ていて、電話番号が記載されていたら、僕も電話で注文すると思います。
楽だし、確実だから。
ECサイトって、今回のようなUIや様々な案内というのは重要だと思います。
SEOやマーケティングにうつつを抜かしている暇があるのであれば、こうしたことに重点を置いてサイトの改善を行なったほうがいいです。
ヤコブ・ニールセン博士も、自身のコラム10 High-Profit Redesign Prioritiesの７番目の項目でこう言ってます。
7. Catering to Seniors
Older people are the fastest-growing segment of Internet users. In fact, they are virtually the only remaining growth market in rich countries, where most of the younger people who want to get online already have accounts.
Many senior citizens are rich and have time on their hands. When it becomes difficult for them to get around, the Internet becomes a natural place for them to spend some of their vast piles of money. Seniors are also less into piracy and tend to be more loyal than fad-chasing young people.
Best of all, you can take advantage of the fact that most websites discriminate horribly against older users.
Even government websites that supposedly target retirees are designed according to guidelines for thirty-somethings. Because so many sites are hard for them to use, seniors will shower you with business if you're the honorable exception who acknowledges their special needs.
(And, those needs aren't even that special — it's much easier to make sites usable for seniors than for users with disabilities, plus there are many more seniors and they tend to be richer.)
高齢者層のインターネットユーザが急速に増えています。実際のところ、先進諸国ではマーケット増加の余地が残っているのは高齢者層だけと言ってもいい。なぜなら、若い世代の人であればオンライン（マーケット）に興味がある人はすでにアカウントを持っているからだ。
高齢者の多くは、お金にも時間にも余裕がある。歳をとって動き回るのが難しくなれば、持て余すほどの大金を使う場所としてインターネットに意識が向いてくるのはごく自然なことだ。高齢者はサイトを荒らし回ることもなく、流行を追いかけて様々なサイトを見て回る若い人たちと違って、忠誠心が強い（決まったところで物を買う）という傾向もある。
そうであるなら、ほとんどのウェブサイトが高齢者ユーザをひどく軽視しているという事実を活用（利用）しない手はない。
退職後の高齢者が利用することが前提とされている政府機関のウェブサイトでさえ、30 代くらいの年齢層を基準としたガイドラインにそって設計されている。
高齢者には難しすぎて使えないというウェブサイトがほとんどなのだから、高齢者のニーズを受け止め、使いやすいウェブサイトをあなたが例外的に提供するなら、湯水のようにお金をつぎ込んでくれるだろう。
（ましてや、高齢者のニーズに答えるサイトを提供するということは、ハンディキャップ（障害）を持つユーザーのためにサイトを設計するよりはるかに簡単だ。おまけに、高齢者の数の方がずっと多いわけだし、その多くは若い層よりお金に余裕がある。そして高齢者のニーズは決して特別なものではなく、そのデザインは若い層のユーザーにも受け入れてもらえるのだ。）
僕はちょっと前に、あるNPOの代表から頼まれて行政に提出するための事業計画書を作成するときに、シニアマーケットについての論文をたくさん読んだりしたこともあって、わりとシニアマーケットに関しては他の人より詳しかったりします。
独居老人向け宅配事業ということで、配食や洗濯物の回収と配達などのサービスと、行政による安否確認等のサービスを「官民連携」によって行うというモデルでしたが、そこでも「お年寄りが携帯でいかにサービスの申し込みをしやすいか」をいろいろ考えました。
２４時間スタッフを常駐させるようなモデルではなかったので、夜間は携帯電話によるインターネットからの利用です。
モバイルは画面が小さいので、UI設計はかなり大変そうだな…と思いました。
結局、事業所として使おうとしていた土地・建物が取得できなかったことで計画はお流れになってしまいましたが。
これは裏話ですが、そのNPOの代表が社民党の党首と仲が良くて県議会の承認が得られなかったという政治的な事情があっただけなんですけどね。
僕は一時期、雇止め→ネカフェ難民→ホームレス…という状態になったことがあり、その時にお世話になったNPOなので応援したかったのですが…。
どこの党とつながっているとかどうとかで、ホームレス支援など人の命に関わる活動を行なっているNPOの活動に圧力をかけるなんて、いやはや、沖縄の（自民系）県議会議員は腐ってるなぁと思います。
ま、日本全国似たようなもんだとは思いますけどね。
画像をスワイプでスライドさせる「swipe.js」が使いやすくてスマートフォン向け。
まずはここにスマートフォンでアクセスしてみてください。
サイト上部の写真を左側にスワイプすると、隠れていた画像に切り替わります。
これは「swipe.js」（http://swipejs.com/）というライブラリを使用しています。
読み込みと設定は以下のように行います。
<script src="swipe.js"></script>
<script>
new Swipe(document.getElementById('slider'));
</script>
あとは、ページ内にこんな感じで設置します。
<div id='slider'>
<ul>
<li style='display:block'><img src="/images/top-001.jpg"></li>
<li style='display:none'><img src="/images/top-002.jpg"></li>
<li style='display:none'><img src="/images/top-003.jpg"></li>
</ul>
</div>
簡単すぎて鼻血でそう…(ﾟ∀ﾟ)
一応、縦でも横でも拡大して表示されるようにwidthをパーセント指定してあげたりとか、marginやpaddingなどのCSS設定をしてあげる必要はありますが、ライブラリの組み込み自体はとても簡単です。
本家のデモでは
#position {
text-align:center;
font-size:27px;
line-height:1.3;
color:#697279;
display:block;
position:absolute;
top:0;
left:50%;
margin-left:-75px;
width:150px;
}
#position em {
display:inline-block;
padding:0 3px;
font-style:normal;
text-shadow: 0 -1px 0 rgba(0,0,0,.35);
font-family:sans-serif;
}
#position em.on {
color:#fff;
}
というCSS設定と
<nav>
<a href='#' id='prev' onclick='slider.prev();return false;'><em>prev</em></a>
<span id='position'><em class='on'>＆bull;</em><em>&＆bull;</em><em>＆bull;</em></span>
<a href='#' id='next' onclick='slider.next();return false;'><em>next</em></a>
</nav>
というコードで、マウスクリックによるスライダーとしての機能も持たせてます。
軽量だし、単体で動くのでわりと組み込みやすいんじゃないでしょうか。
ただ、GoogleMAP-APIとの相性がすこぶる悪い。
一緒のページに組み込んだら、反応が鈍くなって大変でした。
一応、Google-MAPを単体で別ページに…という表示方法にして回避しましたが。
サンプルページは個人的にこんな感じの情報サイトがあったらいいな～ということで作成したものです。
今年はこれをベースに、スマホ向けの色々な情報サービスをリリースしていこうかと思ってます。
月額の広告収入モデルということを考えると、まずは客単価の高いマーケットからですかね。
スマホで中古車を検索するかどうかはわかりませんが、やっぱり単価が高いと言えばクルマ。
あとは不動産関係とか。
今回のライブラリはスワイプで室内をぐるりと見渡せる…という使い方ができますね。
飲食店は、夜関係じゃないと客単価が安いので難しそう。
EC-CUBEもスマホ対応しているし、組み合わせることでグルーポンみたいなクーポン系サイトも出来ますね。
今年は（も？）忙しくなりそうな悪寒…(´・ω・)
つか、いまだにスワイプとフリックの違いが納得いかない。
2012
予想どおりの未来がやってきた
ようやく、新年が明けました。
暦の上での新年ではなく、自分の中での新しい年です。
“Information at your finger tips”(全ての指先に情報を)
Windows95を発売した後、マイクロソフト社が掲げたこのスローガンを実現したのは、マイクロソフトではなくAppleだったというのはとても皮肉な話ですが、ようやくそれを実現するための一端を担うサービスの提供ができるベースが整いました。
スマートフォンの普及によって。
この２年は、それを実現するための下準備をしていたようなもんです。
いずれくるWebのスタンダードHTML5やCSS3にJavascript。
LinuxサーバーにApache,MySQLといったオープンソースにPHP等のいわゆる「P言語」というLLの組み合わせ。
全ては、自分の提供したいサービスを自分で作るために学んできたわけです。
AppleがFLASH搭載を拒み、Adobeがモバイル端末向けブラウザのFlashPlayer開発を辞め、HTML5によるコンテンツ開発がWebの中心となっていくこと。
Webアプリケーションをネイティブアプリケーションに変換する技術が確立すること。
このあたりはほとんど予想どおりになったと言ってもいいかもしれません。
問題は、この先。
正直、この先の未来はどうかと言われるとよくわかりません。
でも、僕にはそれがきっと予想出来るはず。
The best way to predict the future is to invent it.
（未来を予測する最良の方法は、それを創ること）
僕には、それを創るためのスキルと情熱があるのだから。
答えはいつもWebにある
Webアプリケーションをネイティブに変換する技術については、いずれ何らかのソフトウェアが出るとは思っていました。
というより、現在使っているiPhoneアプリの殆どがWebアプリと言っても過言ではないくらいで。
iPhoneを持っている人は、試しに「Wi-Fi」を切って「機内モード」をオンにしていろいろなアプリを試してみてください。
そのほとんどが「使えない」ハズです。
結局、スマートフォン向けのアプリのほとんどは「Webに繋がる」ことを前提に作られています。
だからこそ、Webアプリケーションをネイティブ化する技術は需要が高い。
そうであれば、開発する会社もたくさん現れるでしょう。
Adobeは結局「PhoneGap」を買収しましたし。
何を作ればいいのか…という目標の答えは、いつもWebの中にあるような気がします。
Less is More
では、何を作るかを決めたとき、それをどのようなものにするのかということを考えてみましょう。
それも、答えは既に出ているような気がします。
Amazonは「買いに行く手間」を減らすことで成功しました。
Googleは「探す手間」を減らすことで成功しました。
Appleは「操作を覚える手間」を極限まで減らし、直感的に操作できる製品を創って成功しましたし、iPodやiTunesは「買いに行く手間」ばかりでなく「所有スペース」を減らすことで成功しました。
Twitterはダラダラと長い文章ではなく、極限まで減らして「つぶやく」ことで成功しました。
Facebookも「つながる手間」を減らしました。あの友達検索は秀逸だと思います。
LG、SAMSUNGなどの韓国メーカーは、日本メーカーが余計なゴリ押しの機能をゴテゴテと付ける中、余計な機能は減らし必要な機能だけに絞って、安い価格帯で販売数を伸ばすことでブランドを浸透させのし上がってきました。
今流行りのクラウドも、クライアントマシンに置く情報を必要最小限なものだけに減らし、必要なものはその都度クラウドの中に取りに行くという考え方です。
結局、成功している企業、製品、サービスは「減らす」ことで人々を豊かにしています。
様々なモノ、コトを「Less」したのにもかかわらず、僕たちの生活は今までより「More（もっと）」豊かになりました。
以上のことを考えると「どのような」サービスにするのかという答えは「Less is more」だと思います。
さて、何を減らしましょうか…
沖縄の場合だと、やっぱり観光産業が盛んなので観光情報提供サイトを作ってみようかな…ということになります。
で、どんな？…なのですが、例えば【一つサービスを選択すると、付随するサービスの予約の手間が「減らせる」】ものだったりとか、そういうサービスです。
情報を提供するというサービスはもはや当たり前なので、あとはいかに減らせるのかがポイントだと思います。
クーポン系のサービスでも、いまだに「クーポンを印刷して持っていく」なんてことをやっていたりしますが、そのクーポンをQRコードとして画面に表示し、それを店側が読み込むことで消し込みや統計を取るシステムのほうが、使う側も店側も手間が減ります。
技術的に出来ないことではないので、今年はそんなこともやっていこうと考えています。
EC-CUBEをカスタマイズしてグルーポンのようなサービスに転用出来ることが分かったので、ことしはそれを開発してアワードを狙っていこうかと。
とりあえず、今年の前半はスマートフォン向けのサービスを乱発します。
月に２つくらいはリリースしたいのですが…。
何が当たるか分からないので、自分が欲しいと思うサービスをどんどん立ち上げて…という感じでしょうか。
最初にマネタイズ有りきのサービスなんて開発したくもない…というより、自分が欲しいと思わないようなサービスに対して、リソースをつぎ込むようなことはしたくないし。
どれだけリソースをつぎ込んだとしても、日本の企業ではリターンが少ないですし。
そりゃ、青色発行ダイオードの開発者もアメリカに逃げるよね。
正当な対価をもらえる保証がなければ、その会社で自分の貴重なリソースを提供するわけにはいかないし、他にそれをしてくれるところがあるのであればそこに移るという考え方には共感できます。
まあ、自分の信じた道を進むというのが一番なのですが。
auのガラケーだけ、プログラムが動かないとかいう相談がきた。
もういい加減文字コードで四苦八苦したくないというのが開発者の本音かも…
知り合いから「auのガラケーだけプログラムが動かない」って相談がきました。
auだけ動かない…？？？(ﾒ・ん・)？
よくよく話を聞いてみると「MP Form Mail」とかいうCGI版の有料スクリプトを使っているらしい。
調べてみたら、結構高いshareware。
つか、いまどきFORMのメール送信プログラムくらいで金を払うなって。
それはさておき。
どうしてauのガラケーだけプログラムが動かない（正確には、プログラムは動いていてエラーが出る）のか調べてみると、どうやら文字コードが原因らしいということが分かった。
うーん…。
結局、めんどくさいので（つか、perlとかわかんないし）PHPにてプログラムを書き直すことに…。
もうないとは思うけど、auのガラケーサイト用にメモっておく。
//取得データのエンコードを変える。
foreach ($_POST as $key => $val){
$val = mb_convert_encoding($val, 'UTF-8', 'UTF-8,SJIS,EUC-JP');
$val = mb_convert_kana($val, "KV");
$data[$key] = $val;
}
とりあえず「mb_convert_encoding()」で文字のエンコードをUTF-8にして、「mb_convert_kana()」で半角カナを全角に。
「mb_convert_kana()」の第２引数のパラメータ表は以下。
r 「全角」英字を「半角」に変換します。
R 「半角」英字を「全角」に変換します。
n 「全角」数字を「半角」に変換します。
N 「半角」数字を「全角」に変換します。
a 「全角」英数字を「半角」に変換します。
A 「半角」英数字を「全角」に変換します （"a", "A" オプションに含まれる文字は、U+0022, U+0027, U+005C, U+007Eを除く U+0021 - U+007E の範囲）。
s 「全角」スペースを「半角」に変換します（U+3000 -> U+0020）。
S 「半角」スペースを「全角」に変換します（U+0020 -> U+3000）。
k 「全角カタカナ」を「半角カタカナ」に変換します。
K 「半角カタカナ」を「全角カタカナ」に変換します。
h 「全角ひらがな」を「半角カタカナ」に変換します。
H 「半角カタカナ」を「全角ひらがな」に変換します。
c 「全角カタカナ」を「全角ひらがな」に変換します。
C 「全角ひらがな」を「全角カタカナ」に変換します。
V 濁点付きの文字を一文字に変換します。"K", "H" と共に使用。
今回は"KV"、つまり
・「半角カタカナ」を「全角カタカナ」に変換します。
・濁点付きの文字を一文字に変換します。"K", "H" と共に使用。
という操作をしただけ。
あとは…
mb_language("ja");
mb_internal_encoding("UTF-8");
$subject = '件名';
$mailbody = <<<_EOD_
ヒアドキュメントでメール本文を作成
_EOD_;
mb_send_mail("メールアドレス",$subject,$mailbody);
header("Location: ページ移動先");
とかやっちゃえば、おk。
ホントは、入力項目チェックとかしなきゃいけないんだけど（つか、htmlspecialchars()もやってないし）、それを言ったら
「時間がないんで、これで。」
となりました。
スマートフォンのアイコンにはSVGフォントを使いましょう。
The icon of the smartphone's use SVG fonts.
abcdefghijklmnopqrstuvwxyz
▲▲
で、これがSVGフォントです。
さがせば、いろんなSVGフォントが出回ってるんですね…。
svgフォントの使い方はとっても簡単。
@font-face {
font-family:'SvgFont';
src:url('font.svg') format('svg');
}
.svgfont {
font-family:'SvgFont';
}
こんな感じでcssで読み込みと使いたいところのclassを指定。
上のような場合は
<div class="svgfont">
abcdefghijk…
</div>
とやってあげると
<div class="svgfont">abcdefghijk…</div>
こんな感じになります。
アメブロで使う場合は[デザインの変更] > [CSSの編集]から
/*◆◆◆◆◆◆◆◆◆SVGフォント◆◆◆◆◆◆◆◆◆◆◆*/
@font-face {
font-family:'WebSymbolsRegular';
src:url('http://webmage.pro/plugin/regular-webfont.svg') format('svg');
}
.svgfont {
font-family:'WebSymbolsRegular';
font-size: 30px;
}
これを貼り付けてやってみてください。
f = Facebook
g = Google+
t = Twitter
結構わかりやすいですよね。
Chrome、Safariじゃない人にはなんのことやら…でしょうけど。
http://raphaeljs.com/icons/
ここでMITライセンスのSVGアイコンデータが入手出来たりします。
今回使ったのは、ここから入手しました。
http://www.justbenicestudio.com/studio/websymbols/
なにこれ…面白い！
http://www.justbenicestudio.com/
参りました。
その発想はなかった。
とりあえず、リンク先に行ってみてください。
スクロールバーも、JavaScriptで位置を取得出来るわけだし、そういう使い方もあるのか…。
というより、本物のスクロールバーではなく、そう見せているだけ…？
eccube 2.11 Smartyの配列をソートできるようにする
Sorting arrays inside Smarty templates.
昨日、商品一覧ページの商品ソート（並べ替え）について書いたのですが、特定環境下で動かないという問題が発生したので、Smartyの配列データを無理矢理ソートしちゃうという荒業で対応することにしました。
基本的に、昨日書いたコードは
「price」= 「価格の安い順番」
「price_h」=「価格の高い順番」
なんてやる場合には、
「setProductsOrder()」でSQLのORDER BY句を生成して、ASCかDESCかで取得してくるというものです。
基本的にはこれでいいんだろうけど、取得してきたデータをSmartyのテンプレート内でソート処理したい場合はどうするか。
これはもう、Smarty本体のプラグインにそれを追加するしかないわけで…。
実際にSmartyのフォーラムでもそういう機能はないのか？ってやりとりがされてたりします。
Smartyはテンプレートエンジンだから…そういうのは必要ない…と思われてるから実装されていないんでしょうが、やっぱりあると便利な機能なわけで。
公式プラグインになっているのかどうかはさておき、EC-CUBEで使用しているSmartyの中にはそんなもん無いので、自分で実装します…
ｱﾎﾞｰﾝ(´・ｪ・｀)
まずは「/data/module/Smarty/libs/plugins/」以下に、新規ファイル「modifier.sortby.php」を作って以下のコードを書きます。
<?php
function array_sort_by_fields(&$data, $sortby){
static $sort_funcs = array();
if (empty($sort_funcs[$sortby]))
{
$code = "\$c=0;";
foreach (explode(',', $sortby) as $key)
{
$d = '1';
if (substr($key, 0, 1) == '-')
{
$d = '-1';
$key = substr($key, 1);
}
if (substr($key, 0, 1) == '#')
{
$key = substr($key, 1);
$code .= "if ( \$a['$key'] > \$b['$key']) return $d * 1;\n";
$code .= "if ( \$a['$key'] < \$b['$key']) return $d * -1;\n";
}
else
{
$code .= "if ( (\$c = strcasecmp(\$a['$key'],\$b['$key'])) != 0 ) return $d * \$c;\n";
}
}
$code .= 'return $c;';
$sort_func = $sort_funcs[$sortby] = create_function('$a, $b', $code);
}
else
{
$sort_func = $sort_funcs[$sortby];
}
uasort($data, $sort_func);
}
// Modifier: sortby - allows arrays of named arrays to be sorted by a given field
function smarty_modifier_sortby($arrData,$sortfields) {
array_sort_by_fields($arrData,$sortfields);
return $arrData;
}
$smarty->register_modifier( "sortby", "smarty_modifier_sortby" );
?>
これで、Smartyの配列をforeachでループするときとかに、ソート機能が使えるようになります。
使い方はこんな感じ。
例えば、商品一覧ページのテンプレートの場合
商品コード（product_id）でソート
<!--{foreach item=item key=key from=$arrProducts|@sortby:"#product_id"}-->
<!--{$item.product_id}-->-<!--{$item.price02_min}-->
<!--{/foreach}-->
商品価格（price02_min）でソート
<!--{foreach item=item key=key from=$arrProducts|@sortby:"#price02_min"}-->
<!--{$item.product_id}-->-<!--{$item.price02_min}-->
<!--{/foreach}-->
という感じで、値の少ない順にソート出来ます。
では、値の大きい順にソートするには…ですが、
if (substr($key, 0, 1) == '-')
や
if (substr($key, 0, 1) == '#')
というコードを見てもわかるように
商品コード（product_id）でソート
<!--{foreach item=item key=key from=$arrProducts|@sortby:"-product_id"}-->
<!--{$item.product_id}-->-<!--{$item.price02_min}-->
<!--{/foreach}-->
商品価格（price02_min）でソート
<!--{foreach item=item key=key from=$arrProducts|@sortby:"-price02_min"}-->
<!--{$item.product_id}-->-<!--{$item.price02_min}-->
<!--{/foreach}-->
とやってソート出来ます。
スマーティ関係のファイルを作成…ということなので、割とEC-CUBEについて調べとかないとアレかもです。
本とかみるのもいいかも。
 |
 |
 |
eccube 構築したサイトのDBだけを再度セットアップ
html/install 配下のファイルだけを再アップロードしてまたまたインストールを行えばおk。
***.***.***.***というIPアドレスで開発を進めて、いざ本番用のドメインに移行…ってなったときにはこの方法で「弄った（カスタマイズした）ファイルはそのまま」の状態で、DBをクリーンナップ。
configファイルも新ドメインで再度生成されるので。
小ネタだけど、とってお必要なことなので、メモ。
|
新品価格 |
