φ(..)メモとして残しておこう… -13ページ目
Amebaホームピグアメブロ
芸能人ブログ人気ブログ
新規登録
ログイン

ブログ画像一覧を見る

このブログをフォローする

<< 前のページへ最新 | 11 | 12 | 13 | 14 | 15 | 最初次のページへ >>

eccube 2.11.x 商品一覧ページの商品ソート（並べ替え）について


EC-CUBE Product list page, add the item to sort products.



eccube 2.11系の商品一覧ページでの商品のソート追加は、とても簡単です。

基本的には data/Smarty/templates/default/products/list.tpl の


<div class="change">
                <!--{if $orderby != 'price'}-->
                    <a href="javascript:fnChangeOrderby('price');">価格順</a>
                <!--{else}-->
                    <strong>価格順</strong>
                <!--{/if}--> 
                <!--{if $orderby != "date"}-->
                        <a href="javascript:fnChangeOrderby('date');">新着</a>
                <!--{else}-->
                    <strong>新着順</strong>
                <!--{/if}-->


の部分に、お好みのソート条件を追加して、
data/class/pages/products/LC_Page_Products_List.php のfunction lfGetProductsList()のswitch部分にcaseを追加するだけです。


switch ($this->orderby) {
    // 販売価格が安い順
    case 'price':
    $objProduct->setProductsOrder('price02', 'dtb_products_class', 'ASC');
    break;
    ・
    ・
    ・
    ・


つまり、商品価格の高い順番に並べる…ということであれば
data/Smarty/templates/default/products/list.tplの<div class="change">の部分に


<div class="change">
                <!--{if $orderby != 'price'}-->
                    <a href="javascript:fnChangeOrderby('price');">価格順</a>
                <!--{else}-->
                    <strong>価格順</strong>
                <!--{/if}--> 
                <!--{if $orderby != 'price_h'}-->
                    <a href="javascript:fnChangeOrderby('price_h');">価格順（高い順）</a>
                <!--{else}-->
                    <strong>価格順(高い順)</strong>
                <!--{/if}--> 
                <!--{if $orderby != "date"}-->
                        <a href="javascript:fnChangeOrderby('date');">新着</a>
                <!--{else}-->
                    <strong>新着順</strong>
                <!--{/if}-->


とやってあげて、
data/class/pages/products/LC_Page_Products_List.php のfunction lfGetProductsList()のswitch部分には


switch ($this->orderby) {
    // 販売価格が安い順
    case 'price':
    $objProduct->setProductsOrder('price02', 'dtb_products_class', 'ASC');
    break;
    // 販売価格が高い順
    case 'price_h':
    $objProduct->setProductsOrder('price02', 'dtb_products_class', 'DESC');
    break;
    ・
    ・
    ・
    ・

とcaseに条件を追加してあげるだけで( ｀д´)b ｵｯｹｰ!


setProductsOrder('ソートするカラム名', 'テーブル名', '昇順か降順か（ASCかDESCか）');


を設定すればいいだけなのですが…。
（ただし指定できるテーブルはproduct_idを持っているテーブルであることが必要.
by SC_product.php Line 54 ）


実際に、自分の環境では問題なく動作しました。
なのに、ある環境ではそれが反映されない。
他の部分のカスタマイズが影響しているとしか考えられないので、今回弄った２つのファイルだけではなんとも…という感じです。

やれやれ…。

買うしかないのか…？




豆腐そば

今日の晩ご飯は豆腐そば（沖縄そば）です。

ふうぅ…
作業をしよう。
photo:01





iPhoneからの投稿

Google Swiffyオブジェクトを指定要素内に配置したい


Specify the element you want to put Google Swiffy object




デフォルトの状態では、「swiffyobject」はHTML ドキュメントのBODY タグの中に埋め込まれるようになっています。

In the default state, "swiffyobject" is to be embedded in an HTML document the BODY tag.

<body>
    <div> ここに埋め込まれます</div>
</body>


上記のように、<body> ～ </body> タグの中に<div> ～ </div> タグが作られて、そこに埋め込まれるのですが、

As mentioned above, in the<body> ~ </ body> tag <div> ~ </ div> tag is made, but there is embedded,

<body>
    <div id=” test” >
        <div> ここに埋め込まれます</div>
    </div>
</body>


こんな感じで、指定した要素の中にオブジェクトを配置したい場合には、ちょっとコードを変更する必要があります。

Like this, if you want to place an object in a given element, there is little need to change the code.

<script>var stage = new swiffy.Stage(document.body, swiffyobject);</script>

▲こんな感じのコードの赤字部分を
▼こんな感じに変更しちゃいます。
var test = document.getElementById("test");
var stage = new swiffy.Stage(test, swiffyobject);


こう変更することで、「id=” test”」が設定されている要素の中に埋め込むことができます。
初期状態ではdocument.body（HTML ドキュメントの<body> タグの中）にコード再生の<div> 要素が生成
されるようになっていますが、変更後のコードでは
var test = document.getElementById("test");

で、変数「test」の中に、html ドキュメント内のid=” test” でセレクトしたものを取得して
var stage = new swiffy.Stage(test, swiffyobject);

その要素の中にStage（<div> 要素）を生成するという感じです。



おまけ。
var elem = document.createElement('DIV');
elem.id = "obj";
var stage = new swiffy.Stage(document.body.appendChild(elem), swiffyobject);

という感じで、Div要素を作っちゃうって手もあります。
上のように書くと
<body>
    <div id="obj" >
        <div> ここにHTML5 が再生されます</div>
    </div>
</body>

こうなります。



「var test = document.getElementById("CSSセレクタ名");」で変数testに取得出来る。
そう覚えておけばいいでしょう。


PDFにまとめてみたので、是非。


スマホの人は、アクセスしてみてください。（Webkitブラウザのみ）

Google Swiffy Extensionを使ってみる。


Try using Google Swiffy Extension.


Very easy.
Very easy to use.
There is no need to worry about file size.


まずは、ダウンロード。


http://www.google.com/doubleclick/studio/swiffy/extension.html
上記のページに行って、「Download Swiffy Extension for Flash Professional」ボタンを押してFlash Professional用のmxpファイルをダウンロードします。




インストール。


ダウンロードしてきたファイルをダブルクリックすると、勝手にエクステンションマネージャーが立ち上がってダウンロードが開始されます。








こんな感じ。
とりあえず、これだけで終了です。

試してみる


あとは、Flash Professionalをたちあげて、なにか作成してみましょう。
作成が終わったら「コマンド」メニューから「Export as HTML5(Swiffy)」を選ぶと、htmlファイルが書き出され、ブラウザが勝手に立ち上がって実行されます。




実際の実行画面はこんな感じです。






めっちゃ簡単です。
是非、お試しあれ。


書き出された文字列は、外部ファイル化しておきましょう。
<script> swiffyobject = {"tags":[{"… </script>
の、中身がそうです。

アメブロでjQuery lightBox を使う。

需要があるみたいなんで、書いておきます。

まずは、「jquery.lightbox-0.5.js」のセッティング部分をこんな感じに書きなおしてます。
実際はファイル名が長いので「lightbox.js」とかに変更してありますが。


$.fn.lightBox = function(settings) { 
    settings = jQuery.extend({
    overlayBgColor:'#000',
    overlayOpacity:0.8,
    fixedNavigation:false,
    imageLoading:'http://webmage.pro/plugin/lightbox/lightbox-ico-loading.gif',
    imageBtnPrev:'http://webmage.pro/plugin/lightbox/lightbox-btn-prev.gif',
    imageBtnNext:'http://webmage.pro/plugin/lightbox/lightbox-btn-next.gif',
    imageBtnClose:'http://webmage.pro/plugin/lightbox/lightbox-btn-close.gif',
    imageBlank:'http://webmage.pro/plugin/lightbox/lightbox-blank.gif',
    containerBorderSize:10,
    containerResizeSpeed:400,
    txtImage:'Image',
    txtOf:'of',
    keyToClose:'c',
    keyToPrev:'p',
    keyToNext:'n',
    imageArray:[],
    activeImage:0
    },settings);


要は、「imageLoading」～「imageBlank」の画像をフルパス指定している、というわけです。

僕はCSSとかJSとかフォルダを作るのがめんどくさかったのでルートの下に「lightbox」ってフォルダを作って、全部そこに入れちゃってます。
フツーに解凍して出来るフォルダ構造を使うなら「http://サイトURL/lightbox/images/****.gif」とかになりますね。


あとは、フリープラグインで読み込みと設定を行います。


<link href="http://webmage.pro/plugin/lightbox/lightbox.css" type="text/css" rel="stylesheet" media="screen" />
<script type="text/javascript" src="http://webmage.pro/plugin/lightbox/lightbox.js"></script>
<script type="text/javascript">
$(function(){
//アンカータグのリンクが[.jpg][.gif][.png]の場合、lightBoxで表示
$('a[href$=.jpg], a[href$=.gif], a[href$=.png]').lightBox();
});
</script>


僕の場合はこんな感じです。
とりあえずフリープラグインに上記コードを張り付ければ、ブログ内に下記のように書けば動くと思います。


<a href="http://webmage.pro/blog_img/20111219-1.jpg">
    <img src="http://webmage.pro/blog_img/20111219-1s.jpg">
</a>


あんまり僕の借りてるサーバーにリンクを貼るのはどうかと思いますが、まずはやってみて上手くいくようだったら
「http://webmage.pro/plugin/lightbox/」からデータ落として、自前サーバーにうpしてみてください。


あ、jQueryは読み込まなくていいみたいです。
http://stat100.ameba.jp/blog/js/apm001.js
で読み込まれてるみたいなんで。




「Google Swiffy」でFLASHをHTML5化してみた。（いまさらですが…）


Convert SWF files to HTML5



まずはこのページを見てください。


上記のページはGoogle Swiffyで、FLASHをHTML5化したものです。

ｶﾞ━━(;ﾟДﾟ)━━ﾝ!!
めちゃくちゃスゴイんですけど…。


Swiffy currently supports a subset of SWF 8 and ActionScript 2.0, and the output works in all Webkit browsers such as Chrome and Mobile Safari.


ということで、Webkit環境にしか対応していないみたいですが、それにしても凄い。

基本的にActionScript2.0erの僕としては、これはもう開発に使わない手はないなと思うわけで。


http://www.google.com/doubleclick/studio/swiffy/extension.html
　　▲
ここから、Flash Professional用のエクステンションもDL出来ます。

頑張れば、FLASHゲーム作ってHTML5化してサービスとかアリですよね。

これは、ネットで拾った「PACMAN」のFLASHをHTML5化したものをiFrameで表示しています。
　　▼


まさか！…という方はhttp://webmage.pro/blog_img/pacman.htmlを見てみてください。
ソースを表示してみたら、SWFファイルが読み込まれていないことに気がつくでしょう。

ちなみに…。
Google SwiffyはWebkit(SafariとChrome)にしか対応してません。
他のブラウザでは、途中までしか表示できないか、もしくは表示されないかのどちらかです。

オンラインでチャートやダイヤグラムとか作れちゃう「lucidchart」がすごい。

フローチャートやダイアグラムを作成するなら、MicroSoftのVisioを使うって人も多いのではないでしょうか。
SEやってる人であれば、ぜひ試して欲しいサービスが、こちら。

「LUCIDCHART」

作成できるのは

・フローチャート
・（サイト）ワイヤーフレーム
・UMLダイアグラム
・ネットワークダイアグラム
・iPad,iPhoneのモックアップ（表示画面）
・ビジネスプロセス（チャート）
・マインドマップ
・サイトマップ
・ORGチャート
・VENNダイアグラム

と、たくさんあります。

ちなみに、iPhoneのモックアップ作成画面はこんな感じ。





興味のあるかたは、是非試してみてください。

とりあえず、授業に取り入れてみようかな。

DW CS5.5 + jQuery-Mobile でのスマホサイトの作り方。その１


Getting started with jQuery Mobile and Adobe Dreamweaver CS5.5



by Ryan Stewart

As people continue to migrate to smartphones, it has become critical to think about how web applications will behave on those devices.
And users have come to expect that mobile applications will have some default behaviors and features that can be difficult to structure and code.
You may have heard of jQuery before, and in fact, you may be using it to add some basic interactivity to your websites.
jQuery also has a project dedicated specifically to solving some of these mobile application development problems: jQuery Mobile.
And Adobe has been working very closely with the jQuery Mobile team to make sure that Adobe Dreamweaver CS5.5 has full support for jQuery Mobile, including templates and code completion.

One of the best things about jQuery Mobile is that it makes a lot of the basic mobile paradigms easily accessible for web developers.
Using typical
tags and links, you can build an application that uses screens, automatically provides navigation, and lets you build applications that can run on almost any mobile device.


まずは新規作成







まずは新規作成画面で、詳細情報のところをクリック。
いろいろと選べる画面（下の画像）に進むと思います。



CDNでサイト作成







画面が変わったら「サンプルから作成」→「モバイルスターター」→「jQuery-mobile (CDN)」を選択。
「作成」ボタンをクリックします。
CDNは「<a href="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"」みたいな感じで、コードを置いてあるサーバーに直接読み込みに行く方法です。
ローカルにファイルがないので、それを直接編集できないというデメリットはありますが、とりあえず今はCDNにしておいたほうが無難です。

なにやら、jQuery-Mobileが正式版になったとき（つい先月の話です）、アイコンの位置の差し替えが行われたようで、ローカルのDWの中に入っているやつは古いデータかもです。

実際にサーバーにアップしてみたらアイコンがおかしく表示されたりしたので、今のところはCDNでリンクすることをおすすめします。



なんだかよくわからないけど、とりあえず…






作成を押すと、あら不思議。
訳のわからないうちにサンプルサイトが作成出来ます。

コードを見てみると、とても簡単な構造であることに気がつきます。


<div data-role="page" id="page">

    <div data-role="header">
    ヘッダーコンテンツ
    </div>

    <div data-role="content">
    コンテンツ
    </div>

    <div data-role="footer">
    フッターコンテンツ
    </div>

</div>


このような構造になっていて、「data-role="page"」で囲まれた<Div>の中に、
data-role="header"
data-role="content"
data-role="footer"
の順番で並んでいるだけです。




ライブビューで実際の表示を見ながら編集







基本的に、jQuery-mobileのサイト作成は全て「data-*****="****"」というカタチでマークアップするだけで出来るのですが、デザインビューにはすれが反映されません。
実際にどのように表示されるのかは「ライブビュー」をクリックして確認しながら編集しましょう。

ま、アマゾンでこいつを購入するって手もありますが、やっぱり翻訳本。
この本に掲載されている内容のほとんどはWebで探すことができます。

jQuery Mobile

新品価格
￥1,995から
(2012/1/8 05:07時点)




ちなみに、ようやくこのブログも「LightBox対応」しました。
ブログパーツでLightBoxが提供されているので、そっちを使っちゃおうかな…とも思ったのですが、やっぱりエンジニアなので自分で導入することにしました。

かちびと.netさんのこの記事には賛同できない理由

ちょっと古い記事なんですが、かちびと.netさんのこの記事には賛同出来ないという件。

アメーバピグのスタッフブログのコメント欄が酷い


重くてフリーズ、落ちる





アクセスが集中すれば重くなるのは仕方ありません。サーバーを増強すれば
いいんですけど、基本的に収益化が目的。ピグでアメブロユーザーを増やして
それを元に広告を募ったり、ピグ内で買い物をするためのアメゴールド（アメG）
を購入してもらう事で収益を得るわけですから「金ばっか使わせて」とか
「バグやエラーの改善をしてよ！」と言う前に収益に貢献すればサーバー増強
しやすいだろうに。


文句を言っている人間の大半が、その収益化に貢献している人間なんだよ。
収益化についても、何もわかってない。
サーバー増強したいのであれば、エンジェル（投資家）に金を出してもらうべきで、不完全なモノをリリースしておいて、それで収益をあげようなんざ考え方がおかしい。

お金が無くて、開発が進みません…というのであれば、オープンソースプロジェクトのように、寄付を募れよ、寄付を。

サイバーエージェントは、サービスに対してお金をこれ以上投資できませんので、開発費を寄付によって集めます。

とやればいい。


また、環境は仕方ないにしても、重いならPC内をダイエットさせたり、使用するブラウザを変える。
なぜ「もしかしたら自分の環境にも問題が？」と思えないのか。全て人のせい。


クロスブラウザ…という言葉をかちびと.netで検索すると、あら不思議。
大量のページがヒットするわけですが、君ってもしかしてクロスブラウザの意味わかってない？

クロスブラウザ対応…なんて記事を書いておきながら「ブラウザ変更すれば」とか…





バグやエラーが多い




バグやエラーは無いに越した事は無いけど、それは現状はほぼ不可能。
どんなシステムにもバグやエラーとの闘いな訳ですよね。
「システム完璧にしてから次行け」とか「プログラマー辞めちまえ！」とか
言うならシステム、プログラムの事を理解してから言うべき。
確かにバグは見られるし、改善する点だけど、社内の少人数でバグの有無を
調べるのは不可能だから、ユーザーに使ってもらって適切なフィードバックを
得るのが理想ですが、コメント欄を見る限り有益なエラー報告は皆無に等しい。


いやいや…。
収益化が目的のサービスに、金を払って、それで尚且つ有益なエラー報告までしなくちゃならないの？
お前は、自分がどれだけ馬鹿なことを言っているのかわかっていないのか？

たしかに、クロームやFFのように「無料で公開・提供」されているものであれば、当然ユーザーからのフィードバックが必要でしょう。
無料のモノを使っておいて、ああだこうだ言うのは違うと思うし。
FFFTPの時もそうだったけど…。

ただし。

ピグは「収益化」が目的のサービスな訳だから、それをきちんとしたカタチでリリースできなかった担当者は無能と言われてもしかたないかも…。

でも、プログラマ批判はダメ。
そんな状態でリリースさせた担当者に、すべての責任があります。
プログラマは悪くないよ。

でも「システム、プログラムの事を理解してから言うべき」というのは共感できない。
それって政治家が「政治のことを理解してから政治に口を出せ」というのと同じことなわけで。
おいおい、政治は誰のためのモノだ、国民のためのモノだろう…ってなっちゃうでしょ。

プログラムは、プログラマのためのものではなく、それを使う全ユーザーのためのものです。
たとえ、自分が一人で書いたコードであったとしても。



社長謝罪しろ！！！




なぜ謝罪ｗｗｗｗなんかもう無茶苦茶言ってます。訴訟でも起せばいい。
謝罪させるからには被害を被ったからなんでしょうけど、じゃあその被害
といえば「エラーが出てアメーバピグの部屋に入れなかった！どうしてくれる！」
と言うこと。その内容で訴訟起せばいいんじゃないでしょうか。
120円～130円程度で遠くまで運んでくれる電車も1分でも遅れようものなら
金返せとか、取引に遅れたから謝罪しろとか、凄い国ですね。日本。


いやいや。
アメリカの方がもっと凄いから。

かちびと.netさんは、インターネットを使って情報発信をしているくせに、情報に疎いんですね。

謝罪させるからには被害を被ったから

全てがそうではないのでは？
記者会見で謝罪…というのがよくあるけど、本当に被害があった人間はほとんどいないでしょ。


・重いならPC内をダイエットさせたり、使用するブラウザを変えろ
・文句言う前に収益に貢献しろ
・文句言うならシステム、プログラムの事を理解してから言え

なぜこうなるｗｗｗｗなんかもう無茶苦茶言ってます。

まあ、そう言えるだけの収益・技術力がある人だから言えるんでしょうね、きっと。
Google,Appleですら言わないようなことを言えるのだから、きっとすごい人なんだろうと思います。


で、結局のところそういう凄い人なので尊敬してますってことで。

jQueryMobileの各ブラウザ対応について。





上記が、jQueryMobileの各ブラウザ対応表です。
<< 前のページへ最新 | 11 | 12 | 13 | 14 | 15 | 最初次のページへ >>

ブログ画像一覧を見る

このブログをフォローする