注文の多いXOOPS屋

スタッフブログ

  • 最新配信
  • RSS

XOOPSのSmartyプラグインとjQuery

naoto : XOOPS » TIPS小ネタ 2009/2/3 19:04

Blogger's Avatar

こんにちわ。なおとです。

XOOPSでjQueryを使うとき、XOOPSのSmartyプラグインとの組み合わせで、ちょっとしたノウハウをご紹介します。

jQueryでセレクタを使うときに（もちろん）idを指定することができます。 そのとき、操作対象の要素のid属性の値に使われる文字種には、注意する必要があります。

大雑把に言うと、特にcssセレクタとして使う場合も考慮するなら、できれば英数字と-（ハイフン）だけの組み合わせを使うのが、一番無難です。

（参考：名前付けの注意点 『The Web KANZAKI ごく簡単なHTMLの説明』より）

jQueryの話に戻りますが、idに「[]（大括弧）」が含まれていると、idセレクタでその要素を「掴む」ことができません。

しかし、XOOPSのSmartyプラグイン「xoops_input」を使うと、いくつかの条件が重なると、idに[]を含む文字列が入ります。 これはハマりどころで、私もこの現象に気づくまで、かなり悩みました。

その問題の条件は、name属性の値に[]を使っていて、php側では配列で値を受け取れるようにしていることと、自動でidをつける（明示的に指定しなければそうなる）ようにしている時、という条件が重なった場合です。

（参考：xoops_input『SourceForge.net: xoopscube » Legacy_Theme_Smarty;ja』より） 

テンプレート
<{xoops_input type=checkbox name="checkbox[]" value="value1" default=$value}>
<{xoops_input type=checkbox name="checkbox[]" value="value2" default=$value}>
<{xoops_input type=checkbox name="checkbox[]" value="value3" default=$value}>
↓
出力
<input name="checkbox[]" id="legacy_xoopsform_checkbox[]_value1" value="value1" type="checkbox">
<input name="checkbox[]" id="legacy_xoopsform_checkbox[]_value2" value="value2" type="checkbox">
<input name="checkbox[]" id="legacy_xoopsform_checkbox[]_value3" value="value3" type="checkbox">

この場合には、明示的にidを指定することによってidの値をある程度コントロールできるので、それで解決できます。 

テンプレート
<{xoops_input type=checkbox name="checkbox[]" value="value1" default=$value id="checkboxvalue1"}>
<{xoops_input type=checkbox name="checkbox[]" value="value2" default=$value id="checkboxvalue2"}>
<{xoops_input type=checkbox name="checkbox[]" value="value3" default=$value id="checkboxvalue3"}>
↓
出力
<input name="checkbox[]" id="checkboxvalue1_value1" value="value1" type="checkbox">
<input name="checkbox[]" id="checkboxvalue2_value2" value="value2" type="checkbox">
<input name="checkbox[]" id="checkboxvalue3_value3" value="value3" type="checkbox">

これでうまく要素を掴めるようになります。

IEのiframe中のスクロールバーの謎の挙動

 : 技術全般 2009/1/30 13:57

Blogger's Avatar

2/14は札幌のLOCAL DEVELOPER DAY '09 /Winterに参加する予定のsatoです。
北海道近辺の技術者の方は是非参加してみてください。

今日は以前発見したIE(6/7)の謎の挙動に関して紹介したいと思います。バグだと思うのですが…。

テストページを用意しました。
まずこちらをIE以外のブラウザでご覧下さい。
[テストページ]

普通にスクロールバーが表示されると思います。

次に、IEで表示させると、スクロールバーが出ないと思います。
しかし、インラインフレームの領域をクリック、あるいは画面内のどこかをクリックしてからインラインフレームにカーソルを当てると、突然スクロールバーが出てきます。

使用したソースは以下になります。
index.html
<html>
<body>
<iframe style="width:20px;" src="scroll.html"></iframe>
</body>
</html>


scroll.html
<html>
<body>
<div style="height: 10000px"></div>
</body>
</html>


どうやら「インラインフレームの幅が20px以下で、インラインフレーム中にスクロールバーが表示される場合」に正常に描画できないようです。
20pxはOSのスクロールバーの設定次第で変わるかもしれません。

通常このようなHTMLを書くことはないと思いますが、もし書くことがあれば注意してください。

Google Adsenseモバイルを使いたい

 : 技術全般 2009/1/29 17:57

Blogger's Avatar

昨日のセミナーで、XOOPSを使い始めた頃を思い出したgusagiです。
今日は、Google AdsenseモバイルをXOOPSで使いたい場合について、少し書かせて頂きます。

個人・企業でユーザ向けサイトを公開している場合、アフィリエイトを導入してみたいと思う方は多いと思います。
携帯でインターネットを利用するユーザ数がここ数年でPCとほぼ同数にまで成長している状況を考えると、せっかく携帯サイトを作るのであれば、これは自然なことだと思います。
実際、携帯アフィリエイトサービスも、ここ数年で数がどんどん増えてきています。
その中で、自分がよく「これに対応していないの？」と聞くのがGoogle Adsenseモバイルです。

サービスの詳細は、上述のリンク先に書いてあるのですが、この導入方法をざっくり書きますと、
----
(1) サービスに申し込み、アカウントを取得する
(2) AdSense設定を行い、広告のタグを出力するPHPコードを生成する
(3) 出力されたPHPコードを自分のサイトに貼る
----
なのですが、レンタルサーバだったりすると上手くいかないことも結構あります。

...続きを読む

「XOOPS」活用＆体験セミナー無事終了！

Ryuji : イベント 2009/1/28 21:02

Blogger's Avatar


RYUS初主催のXOOPSセミナー、本日無事終了いたしました。
参加された皆さんお疲れ様でしたっ！

初主催ということもあって、準備にも時間がかかり、セミナーでもいろいろ不手際があったかと思います。

2時間の予定ではじめたセミナーだったのですが、グループワークでは、様々な質問が飛び出し、結果的に2時間半ぐらいかかってしまいました。
お時間の無かった方には申し訳なかったです。

今後もRYUSでは、様々なXOOPSのセミナーを定期的に開催したいと思っておりますので、皆様よろしくお願いします。

いよいよ明日！RYUS初セミナー開催です♪

mik : イベント 2009/1/27 18:07

Blogger's Avatar

いよいよ明日　CMS「XOOPS」活用＆体験セミナー　が開催されます！

来ていただいた皆さんにより多くの満足を感じていただけるよう、今日になっても「この資料はこうした方が！」とか「これも印刷しましょう」とか色々なアイデアを出して準備しています。

ほぼ、準備も整い、明日の開催を待つばかりとなりました。

今現在まだ「若干」席がございますで、まだお申し込みいただいていない方でも間に合います。この機会にCMSやXOOPSを体験してみませんか？

詳しくは

https://ryus.co.jp/modules/eguide/event.php?eid=1

をご覧ください。お待ちしています♪

HD-1.0.3

 : XOOPS » 総合的な情報 2009/1/26 18:49

Blogger's Avatar

今日は本日未明にアップロードされたHD-1.0.3RCについて書いてみようと思います。

http://www.xugj.org/modules/bulletin/index.php?page=article&storyid=134
引用：
"HD1.0 for XCL2.1" のマイナーアップデートである HD-1.0.3 のリリース候補版が公開されました。

このパッケージでは、XCL-2.1.6ベースとなっています。

今回は、モジュールの「追加」はほとんどありませんが、以前に収録されていたモジュールの機能的な意味で重要な「更新」が数多く含まれています。

大きな変更としては、去年の11月にリリースされたXOOPS本体のバージョンがXCL-2.1.6になった点です。その他にも細々とした修正がなされています。

HDではXCL本体と同じくリリース候補版であるRC版(Release Candidate version = リリース候補版)をまず公開して、それをテストして、そのテストからのフィードバックを修正していき、本番のリリース版を仕上げていく流れになります。
ですので、テストの過程が重要になります。
XAMPPやMAMPなどのローカルでテストできる環境を構築してのテストも良いと思います。

最新版のHDに興味がある方、現在XOOPSをHDで運用している方は是非チェックしてテストして見るとことをお勧めします。

つぶやき jQuery

naoto : 技術全般 2009/1/22 19:10

Blogger's Avatar

jQuery派のなおとです。

今日もjQueryを使った画面表示などをいろいろやっていたのですが、まだまだ使いこなせていない自分にもどかしさを感じています。

キモはやはりセレクタをいかに使いこなせるかでしょうか。

XPathに近いようでいてまた一味違うし、集合の操作などSQL的なところもあったりして、奥深いです。

操作の対象をうまく掴むことができれば、あとは画像の切り替えや、テーブルのある行だけ背景色をハイライトしたり、また色を元に戻したりといった、よくあるような効果を追加するのは、すぐにできます。

まだたいしたことをしていないので、その方面もまだ修行が足りないと思っています。

とはいえやはり、おもしろい！javascriptでありながら独特な書き方があるのが、とても気に入っています。

prototype.js 1.6のクラス機構

 : 技術全般 2009/1/21 11:02

Blogger's Avatar

satoです。

JavaScriptのライブラリでお馴染みのものにPrototype(prototype.js)があります。
このライブラリは、早い段階からJavaScriptでクラス機構を実現するための仕組みが用意されていたのですが、あまり使い勝手がいいと言えるものではありませんでした。

一昨年くらいに1.6がリリースされて、クラス作成周りが一新されたのですが、あまり情報がない（というか、あるのですが古い情報が優先して検索される）ので、ここでも書いておこうと思います。

■クラス作成
・1.5以前

var Animal = Class.create();
Animal.prototype = {
    initialize: function() {
        this.name = 'Animal';
    },
    getName: function() {
        return this.name;
    }
};

alert(new Animal().getName()); // 'Animal'


・1.6

var Animal = Class.create({
    initialize: function() {
        this.name = 'Animal';
    },
    getName: function() {
        return this.name;
    }
});

alert(new Animal().getName()); // 'Animal'


Class.createの中に直接書けるようになりました。ちなみに1.5以前の書き方でも通るようになっていますが、この後の継承などで問題が出ると思うので、1.6の書き方を使うようにしましょう。

■継承
・1.5以前

var Animal = Class.create();
Animal.prototype = {

    initialize: function() {
        this.name = 'Animal';
    },
    getName: function() {
        return this.name;
    }
};
var Cat = Class.create();
Object.extend(Cat.prototype, Animal.prototype);
Object.extend(Cat.prototype, {
    initialize: function() {
        this.name = 'Cat';
    }
});

alert(new Animal().getName()); // 'Animal'
alert(new Cat().getName()); // 'Cat'


・1.6

var Animal = Class.create({
    initialize: function() {
        this.name = 'Animal';
    },
    getName: function() {
        return this.name;
    }
});
var Cat = Class.create(Animal, {
    initialize: function() {
        this.name = 'Cat';
    }
});

alert(new Animal().getName()); // 'Animal'
alert(new Cat().getName()); // 'Cat'



Object.extendを使わなくなったのが大きな違いです。
そもそもObject.extendの実装を見ると、

Object.extend = function(destination, source) {
  for (var property in source) {
    destination[property] = source[property];
  }
  return destination;
}

のように、プロパティをコピーしているだけで、継承と呼ぶには厳しい実装でした。どちらかといえばmixinに近い実装だと思います。

1.6の実装になって何が嬉しいかと言うと、
・書き方がわかりやすい
Object.extendを複数回呼ぶ必要もありませんし、明示的にprototypeを指定する必要もなくなりました。

・親クラスのメンバを呼べるようになった
恐らくこれが一番大きいです。
1.5では、

var Cat = Class.create();
Object.extend(Cat.prototype, Animal.prototype);
Object.extend(Cat.prototype, {
    initialize: function() {
        this.name = 'Cat';
    },
    getName: function() {
        return (Animal.prototype.getName.bind(this))() + 'だよ';
    }
});

alert(new Animal().getName()); // 'Animal'
alert(new Cat().getName()); // 'Catだよ'


のような強引な手法を採るしかありませんでしたが、1.6では、


var Cat = Class.create(Animal, {
    initialize: function() {
        this.name = 'Cat';
    },
    getName: function($super) {
        return $super() + 'だよ';
    }
});

alert(new Animal().getName()); // 'Animal'
alert(new Cat().getName()); // 'Catだよ'


のように、第一引数を$superという名前にすると、そこに親クラスのメソッドが入るようになりました。
ちなみにこの場合、getNameに引数を渡して受け取る場合、第二引数以降に割り当てられます。

getName('hoge') → getName: function($super, hoge) {

みたいな感じです。

■まとめ
そもそもクラスとか定義するのはJavaScriptっぽくない感じはするのですが、単純に慣れているというのと、可読性が向上するという意味で積極的に使うようにしています。
最近はjQuery派とフルスクラッチ派が強い印象がありますが、prototype.jsは基本機能が整っていて、今でも十分実用的に使えるライブラリだと思います。

サービスを作る側の目線で物事を考えてみる

 : XOOPS » 総合的な情報 2009/1/20 23:48

Blogger's Avatar

HD1.0.3のリリース準備やら、OSC2009 Tokyo/Springの準備やらで、オーバーフロー気味なgusagiです
（来週のセミナーの準備をしている弊社のRyujiやhaltの方がもっと忙しいと思いますが^^;）

さて、今日のタイトルですが、何を今更と思われる方も多いかも知れません。
実は、今日の終業後、弊社のなおとやargonと携帯モジュールにこれから必要な機能って何だろう、という話をしていました。
その際に、「確かに、それは必要かも」という機能から「それって、自分としては使わないんだけど、本当に必要？」と思う機能まで、色々とアイデアを貰ったのですが、その際にふと思ったことが「自分がサービスを作る立場だったら、どんな機能が欲しいか」というものでした。

実は、RYUSに入社する前後から、あるサービスのアイデアをプライベートで練っていたりするのですが、その開発にXOOPS CubeとWizMobileの組み合わせを用いてみようと思っていたりします。
サービスを自分で作って運用してみることで、開発者としての目線だけでは思いつくことが出来ないアイデアが浮かべば、と期待していたりします。

もちろん、そこで開発した機能はWizMobileにも反映させて行くつもりですが、「それだったら、こんなサービス作れるの？」などといった関心のある方は、機会がありましたら声をおかけ下さい

来週のセミナー準備ラストスパート中です

Ryuji : イベント 2009/1/19 21:34

Blogger's Avatar

当サイトの左ブロックで告知中のXOOPS体験＆活用セミナーの開催がいよいよ来週にせまってきました。

・XOOPS体験＆活用セミナー

講師として話をするというのは、私も当社haltも、これまでに何回も経験してきたので、それほど心配してないのですが、今回のセミナーの後半の体験グループワークの準備で頭を悩ませてます。

1月28日のXOOPS体験＆活用セミナーのグループワークでは、実際にXOOPSにふれていただき、「これなら、あんなことできそうだなぁ」とか「こういう使い方もできそうだ」という実感をもっていただけたらと思って企画したんですが、このグループワークが「XOOPS使い方講習」みたいにならないように、いかに楽しいセミナーにしようか日々考え続けてます

# さすがに、そろそろスタッフの皆さんに「いいかげんに内容FIXさせてくださいっ」って怒られそうですが(^^;

まだ開催まで1週間ありますので、ギリギリまで「役に立って、なおかつ楽しい」セミナーになるように、考え続けたいと思ってます。

スタッフブログ最新
スタッフブログのトップへ
カテゴリ一覧

〒104-0061　東京都中央区銀座１丁目３番３号 G1ビル７階
お問い合わせ　TEL 03-3524-8860

Copyright(c) 2012 RYUS.All Rights Reserved.