注文の多いXOOPS屋

スタッフブログ

  • 最新配信
  • RSS

XOOPSメンバーズの事例紹介！ミタカフェ　三鷹にあるコワーキング

mik : XOOPS » モジュール 2012/10/30 11:32

Blogger's Avatar

先日blogで紹介したXOOPSに登録されているメンバーを表画面で表示するモジュール「XOOPSメンバーズ」

http://ryus.co.jp/modules/d3blog/details.php?bid=358

を使ったページが紹介されました。

ミタカフェ?三鷹にあるコワーキングスペース



ミタカフェメンバー一覧
http://mitacafe.co/modules/xoopsmembers/

明るくて分かりやすいページになってますね！usersの情報だけでなくプロフィールモジュールの情報も掲載できるので、サイトに合わせて内容も色々変えられます。

Facebookやtwitterログイン機能をあなたのサイトに簡単に追加できるモジュール

mik : XOOPS » モジュール 2012/10/11 15:09

Blogger's Avatar

2014/05/19
設定方法が若干変わっています。FacebookとTwitterのkeyとsecretを取得する部分はこちらを参照してください。

TPソーシャルメディアを使ってXOOPS CubeにFacebookログインする
http://ryus.co.jp/blog/tpsocialfacebook/
TPソーシャルメディアを使ってXOOPS CubeにTwitterログインする
http://ryus.co.jp/blog/tpsocialtwitter/


先日行われたXOOPS Cube初心者勉強会で「Facebookとかでログイン機能ってないんですか？」と質問をされました。TOKYOPenではその機能を作ってあったのでXOOPS Cubeで使えるようにしてみました！

SoialMedia説明動画




ダウンロードする


下記のリンクからダウンロードすることができます。

TPソーシャルメディア
ダウンロード

ダウンロードしたら解凍してください。

htmlとxoops_trust_pathフォルダがありますので、インストールしたいサイトの該当するフォルダに中身をコピーします。

サイトの管理画面　互換モジュール＞モジュールのインストール　から　SocialMedia　をインストールします。




FacebookとtwitterのKeyとSecretを取得して設定する


Facebookとtwitterのログイン機能を利用するには「どのサイトにログインさせる機能なのか」を登録してKeyとSecretを取得する必要があります。

別ページでまとめて説明していますので取得に関してはこちらをご覧ください。

Facebookとtwitterのkeyとsecretを取得する
http://ryus.co.jp/socialkeysecret.html

管理画面左ブロックにある　SocialMedia　をクリックします。



FacebookとtwitterのKey,Secretを入力する画面になります。

ここに先ほどの説明で取得したKeyとSecretを入力して[登録する]をクリックします。

Facebookだけtwitterだけでも登録可能です。


ソーシャルログイン機能を使ってみる


ここまで設定できたらログアウトしてサイトを見てください。

左ブロックにソーシャルボタンが表示されています。



[Facebookでログイン]をクリックすると確認画面が２つ出ます。





続行して進むと、設置したサイトに戻ります。

[twitterでログイン]の場合も同様で、このような画面が表示されます。




戻った画面はこのようなになります。



すでにXOOPSユーザー登録してあるIDに結びつけたい場合は左の赤枠の入力域に入力します。
新しくアカウントを作成したい場合は右の緑枠の入力域に入力します。

[登録する]ボタンをクリックするとログインしてサイトに入ることができます。

次回以降は[Facebookでログイン]あるいは[twitterでログイン]をクリックするだけでログインできるようになります。

簡単にログインできるようになりましたね(^^)♪


補足・実際のログインと古いXOOPS Cubeの対応


うさぎにもできるXOOPS Cube入門にインストールしてみましたので「すぐに試してみたい！」という方はこちらで確認してみてください。

http://usadeki.jp

ここにインストールするときに問題が起こりました。管理画面でKeyとSecretを登録する画面のボタンが押してもサブミットされないという状況です。調べてみるとこのボタンはjqueryを使っていましたが、管理画面のテーマではjqueryを読み込んでいなかったために何の反応もなかったようです。

表側のテーマにはjqueryを読み込む部分があったのでその行をコピーしたりして、

\modules\legacy\admin\theme\admin_theme.html

に行を追加しました。



の前あたりにこれらの行を追加すれば、古いxclでも動くかもしれません♪

// 追加したところ






PhpStormをXOOPS CubeのSmartyデリミタ設定に合わせる方法

Ryuji : XOOPS » TIPS小ネタ 2012/10/8 8:50

Blogger's Avatar

Mac版だと
メニューからPhpStrom→Preference
ProjectSettingsでPHPを開く


Smartyを選択してデリミタ設定を "{" から"<{"、"}"から"}>"へ変更


これでXOOPS CubeでのSmartyのデリミタ設定に合わせることができます。

XOOPSメンバーズを使って登録済みのメンバーを表示する

mik : XOOPS » モジュール 2012/10/4 18:22

Blogger's Avatar

このモジュールはXOOPS2.0系の頃にはいっていたものです。最近、会員制サイトなどの中でメンバーがどのぐらいいるかなど表示したいという声を聞きました。

そのお話をしたら、今回nouphetさんが最新のXOOPS Cubeでも使えるように改造してくれましたのでご紹介します！

ダウンロード
https://github.com/nouphet/xoopsmembers/zipball/master

上記のURLからダウンロードします。

解凍すると　nouphet-xoopsmembers-54e427f　のようなフォルダができます。この中にある　htmlフォルダの下のmodulesの下のxoopsmembersというフォルダを使いたいサイトのルートのmodulesの下に入れます。

あとは管理画面からインストールするだけです。

表画面のメインメニューに　登録メンバー一覧　というリンクが表示されるのでクリックすると登録メンバーの一覧を見ることができます。





まだ作ったばかりですので、ご希望などありましたらFacebookの

XOOPS Creators
http://www.facebook.com/groups/xoops.creators/

で書いてみてくださいね

picoのサブメニューはキャッシュされます

Ryuji : XOOPS » TIPS小ネタ 2012/10/2 9:26

Blogger's Avatar

XOOPS Cubeに標準で付属するメインメニューは、各モジュールを開いたときに自動的にそのモジュールが用意しているサブメニューが展開されるようになっています。

HTMLページを作成するpicoモジュールでは、サブメニューにカテゴリなどを自動的に展開する機能があります。

ところが、カテゴリを追加してもサブメニューにカテゴリが追加されないことがありました。

最初は不思議だったのですが、コードを追っかけてたら一定時間サブメニューをキャッシュするつくりになっていたのを発見しました。

XOOPS_TRUST_PATH/modules/pico/xoops_version.php line48
	$_sub_menu_cache = XOOPS_TRUST_PATH . '/cache/'. urlencode(substr(XOOPS_URL, 7)) . '_' . $mydirname . '_' . (is_object(@$GLOBALS['xoopsUser'])? join('-', $GLOBALS['xoopsUser']->getGroups()):XOOPS_GROUP_ANONYMOUS)  . '_' . $GLOBALS['xoopsConfig']['language'] . '.submenu';
	if (is_file($_sub_menu_cache) && time() - 3600 < filemtime($_sub_menu_cache)) {
		$modversion['sub'] = unserialize(file_get_contents($_sub_menu_cache));
	} else {
		require_once dirname(__FILE__).'/include/common_functions.php' ;
		$modversion['sub'] = pico_common_get_submenu( $mydirname ) ;
		file_put_contents($_sub_menu_cache, serialize($modversion['sub']));
	}
上記コードのif文のなか、 is_file($_sub_menu_cache) && time() - 3600 ってのがポイントですね。3600秒＝60分キャッシュされます。

キャッシュされたくなければ、3600を0に書き換えてしまえばキャッシュされなくなります。サイト構築時はキャッシュ無しの方がすぐに表示確認できて便利ですよね。

公開時にはまたキャッシュ数値を大きくすると良いと思います。

9月8日にオープンソースカンファレンス2012 Tokyo/Fall へ行ってきました。

Ryuji : イベント 2012/9/24 15:25

Blogger's Avatar

様々なオープンソース関係者が集まるオープンソースのお祭り「オープンソースカンファレンス（以下OSC）」 9月7日〜8日と明星大学で開催されたオープンソースカンファレンス2012 Tokyo/Fallに1日だけですが参加してきました。

ロードバイクで片道2.5時間

最近すっかりロードバイクにはまってる（くわしくは「40代からのロードバイク」をごらんください）ので、自宅から明星大学日野キャンパスまでロードバイクで移動してみました。

行きは約2.5時間、帰りは約2時間弱だったかな(^^;

軽いトレーニングのつもりで走るにはちょうどよい距離でした。

誰もいないXOOPSブース(^^;

P9081177

いつもこういうイベント出展のときに力がぬけてるXOOPSブースらしく、私が到着した頃には誰もブースにいませんでした(^^;

それと比較するととなりのNetCommonsブースは気合いがはいってましたねぇ

NetCommonsセッション

IMG_3127

XOOPSのセッションは9月7日（金）に開催されていて私の参加した土曜日にはセッションがなかったので、かわりにNetCommonsのセッションを聞いてきました。

・NetCommons

NetCommonsは学校、教育関係での導入実績が豊富です。最近でそれ以外の実績もちょくちょく見かけるようになりましたね。

つい先日お台場で開催された「お台場サイクルフェスティバル」のサイトもNetCommonsで構築されてましたし。

・お台場サイクルフェスティバル

デザインや細かなところを見るとやや時代遅れ感もあるのですが、こういう保守的な見た目の方が良いということもあるので、これはこれでありだろうな思ってます。

それにしても驚いたのが毎月3回セミナーが開催されていること。 入門講座、活用講座、デザインカスタマイズ講座、モジュールカスタマイズ講座、システム運用講座と学びたい内容にあわせて5種類のセミナーが用意してあって毎月いずれか3つが開催されてるようです。 かなり力はいってますね。

夜のOSC

P9081204P9081203P9081195夜は久しぶりにXOOPS関係のみなさんと楽しい食事ができました。

なんだかんだで4，5時間同じ店でしゃべり続けてたような気がします(^^;

Facebookいいね！などのソーシャルボタン設定を簡単に行う

mik : XOOPS » プリロード 2012/9/10 15:03

Blogger's Avatar

Facebookのいいねを始め、twitterやgoogle+のソーシャルボタンを自動的に設定できるプリロードを suinさん が発表しました。大変便利だと思いますのでご紹介します。

ソーシャルボタン全部入りプリロード
https://github.com/suin/xoopscube-preloads/tree/master/TotalSocialButtons


ダウンロードする

上記のページにある

TotalSocialButtons.class.php

という文字リンクをクリックしてページを移動します。

そして「Raw」ボタンを右クリック（Windowsの場合）して「名前を付けてリンク先を保存」でPCにファイルを保存します。






プリロードファイルを設置する

保存したファイルを使いたいXOOPSのルート直下にある preload　フォルダに置きます。

theme.htmlを修正する


利用中のthemeフォルダにあるtheme.htmlを修正します。修正箇所は2カ所あります。

1.ボタンを挿入

theme.htmlでソーシャルボタンを挿入したい箇所に

<{xoops_explaceholder control="TotalSocialButton"}>

と書きます


2.ソーシャルボタンに関連するjavascriptを挿入

順番が大事なのでかならず　theme.html の の直前に下記のタグを書きます。

<{xoops_explaceholder control="TotalSocialButton.JavaScript"}> </body>


Facebookボタン、twitterボタン、google+を設置する例


全部のボタンを出すのではなく、いくつかのボタンを出す例を書きます。

まずFacebookボタンを使うには開発者登録をしてAPPキーを作成する必要があります。簡単にできますので、

https://github.com/suin/xoopscube-preloads/tree/master/TotalSocialButtons

を参照して、キーを取得してください。

使いたいボタンだけを

<{xoops_explaceholder control="TotalSocialButton" use="facebook-like twitter google-plus" fb_app_id="ここには取得したキーをいれます"}>

のように指定します。すると、以下のように選んだキーだけが表示されるようになります。

↓これは画像となります。このページのいいねボタンはこのページのずっと下の方にあります！よろしければポチッとお願いします♪

XOOPS Cube2.2で使えるようになったTPメールフォームの使い方説明

mik : XOOPS » モジュール 2012/8/13 10:37

Blogger's Avatar

XOOPS Cubeで使えるTPメールフォームを先日発表しました。TPメールフォームはドラッグ＆ドロップで簡単に項目の追加ができ、簡単にメールフォームやアンケートを作成することができます。


ダウンロードからインストールまで


ダウンロードはここから
http://ryus.co.jp/modules/d3downloads/index.php?page=singlefile&cid=3&lid=94


tpMailform.zipというファイルがダウンロードされるので任意の場所に保存してください。


解凍すると　tpMailform　というフォルダに

js
modules
preload

というフォルダができるのでこれを丸ごとルートディレクトリにコピーします。

管理画面　モジュールのインストール　で　mailformをインストールします。


企業サイトによくあるお問い合わせを作ってみる



インストールが終わったらメールフォームを作ってみましょう！

コーポレートサイトなどに良くあるお問い合わせを作ってみます。

会社名
氏名
メールアドレス
お問い合わせ区分（見積もり、連絡、その他）
メッセージ

会社名は任意入力項目、それ以外を必須としてみます。


http://XOOPS CubeのURL/modules/mailform/

にアクセスします。



フォーム新規作成

をクリックします。




フォームタイトルをいれる部分に　お問い合わせ　と入力し、確認画面に進み登録します。



登録が終わると自動的に一覧画面に移動します。

今作成したお問い合わせがあります。ので画面設定をクリックします




基本的に使いそうな項目がデフォルトで設定されています。
足りない項目　お問い合わせ区分　会社名　を追加します

項目を追加するには追加したい位置の1行上の項目でクリックし　行を追加する　をクリックします



メールアドレスの下に一行追加されました



ここで新しい行の項目名を　お問い合わせ区分　とします。名称未設定（任意）　とあるところをクリックします



テキストエリアに変わるのでここに「お問い合わせ区分」といれます




お問い合わせ区分は必須にしたいのでこの項目の　（任意）　をクリックすると（必須）に変わります。




次は入力部分を作ります。ラジオボタンにしたいので右側にあるパレットの　ラジオ　をクリックしてドラッグします。





選択肢を設定します

ラジオボタンのところでクリックすると一覧が出ますので　入力欄設定　をクリックします



入力欄設定画面がポップアップされます




選択肢を入力します。初期値は今回は付けないので空欄にしておきます




元画面に戻っても今入力した選択肢が表示されませんが、後ほど確認できますのでここはこのまま進んでください。




次に会社名項目を設定します。ここでは行の移動をお見せしたいのであえて最後に追加します。お問い合わせ内容をクリックして先ほどと同じように会社名をいれます




パレットの　テキストボックス　からドラッグします。会社名の入力欄の下に説明をいれてみます。テキストボックスの下をクリックして、「＊法人の場合はご入力ください」といれてます





あとはこの会社名行をお名前の上に移動します。行の右にある　移動する　ボタンをクリックして移動したい位置までドラッグします




これで全ての項目が終わったので　[画面設定を保存する]　をクリックします。




先ほどは表示されなかったお問い合わせ区分の選択肢も出ていることがわかります。


作ったメールフォームを公開する



公開する前にメールアドレスの設定を確認します。

http://XOOPS CubeサイトのURL/modules/mailform/index.php?controller=form_list

に戻り　基本設定　をクリックします。







内容を確認して修正したい部分があれば修正します。

一覧に戻ります

公開したいと思いますので一覧の　お問い合わせ行　の状況　未公開　をクリックします




[フォームの受付を開始する]をクリックします。

受付を開始するとフォームの修正はできませんので、確認が終わっていればここでもう一度、[フォームの受付を開始する]をクリックします。





これでフォームを作成することができました。


7月26日にCMSインサイドでXOOPS Cubeを紹介してきました。

Ryuji : イベント 2012/8/3 7:51

Blogger's Avatar

そのときに紹介したメールフォームモジュールを当サイトのダウンロードコーナーで公開しております。

フォーム作成方法が簡単になってると思いますので、もしよければお試しください。

CMSインサイド当日に使ったスライドを少しだけ手直ししてSlideShareにもUPしました。
復習等にお使いいただければと思います。

XOOPS Cubeのディストリパッケージ XOOPS X　のデフォルトテーマをカスタマイズしてみる

mik : XOOPS » テーマ/デザイン 2012/7/5 17:28

Blogger's Avatar

XOOPS X(ten)って何


XOOPS Cubeのディストリパッケージとして長年親しまれてきた「ホダ塾ディストリビューション」が更新を停止したのが昨年のことでした。XOOPS Cube本体だけをダウンロードして自分でモジュールを探す、というのもいいのですが何かと面倒ですね。

でもご安心ください、新しいディストリパッケージ「XOOPS-X」ができました。これはXOOPS Cubeコミュニティ有志の皆さんが人気のあるモジュールとXOOPS Cube2.2を組み合わせ、ホダ塾と同じように便利に使えるようにと作られたものです。

XOOPS-X リリース情報
http://www.xugj.org/modules/bulletin/index.php?page=article&storyid=216

ダウンロードはここからできます
http://sourceforge.jp/projects/xoopscube22x/releases/

ダウンロードして解凍　xoopsx(ten)　というフォルダができ、その中の「html」「xoops_trust_path」だけを使って、自分のサイトやローカルPCのxampp\htdocsの下にインストールしてください。

＊インストールは今までどおり行えます。一つ違うのは今まではデフォルトの文字コードがEUCであったのに対して、utf-8がデフォルトとなっています。EUCの文字セット japanese　は解凍したフォルダの　extras\extra_languages　に入っているようです。


レスポンシブルWebデザインのデフォルトテーマを使ってデザインを自サイトに合わせる



ここに入っているデフォルトテーマは「レスポンシブルWebデザイン」と呼ばれるもので、PCだけでなくiPadやiPhone、アンドロイド携帯などで見たときに表示を最適化してくれるとても便利なものです。







そんな便利なテーマなら是非自分のサイトでも使ってみたいですよね！ということで、「うさぎにもできるXOOPS Cube入門♪」の絵を使ってカスタマイズしてみました。


アイコンとトップの画像を替えるだけでだいぶイメージが変わるんじゃないかなぁと思います。

トップに表示される大きな画像3枚は、themesの下にあるデフォルトで使ってるテーマ　pack2011_default　の中にあるimagesフォルダの　main_xoops_picture_01.jpg?main_xoops_picture_03.jpg　のようです。表示したい画像をこの名前でここに置けばなんとかなりそうです。

縦が少し長いと思うので横幅は950のまま縦を250にして画像を3枚用意しました

名前をmain_xoops_picture_01.jpg?main_xoops_picture_03.jpgとして、ブラウザのキャッシュをクリアして、再表示すると新しい画像が3枚入れ替わるようになりました。

ただ、最初に1枚目を表示するときに以前の高さの分まで画像が見えてしまうことに気づきました。



調べてみたら


themes\pack2011_default\css\jquery-jcflick.css

の

#flickMain .flickContainer {
_width: 950px;
max-height: 320px;
_height: 320px;
}

に高さが指定してあったので

#flickMain .flickContainer {
_width: 950px;
max-height: 250px;
_height: 250px;
}

として保存したところ、1枚目の画像の時に2つめの画像が出ないようになりました。


次は左上のアイコンを変えたいと思います。うさでき　という文字にしようとすると今のロゴの幅ではたりないので広げてみます。

こちらは幅を広げた分だけサイトタイトルも右に移動してくれるので幅を変えてもOKですね。




では高さを変えたらどうなるでしょうか



予想通り、文字が下に付いてしまいましたね?。希望としては文字は縦位置の真ん中になって欲しいのでちょっと変更してみます。

theme.htmlを見ると <div id="siteTitle">　で画像とサイトタイトルが囲まれています。css

themes\pack2011_default\css\basic.css

で　siteTitleを見ると

#siteTitle img {
vertical-align: text-bottom;
}

とあるので

#siteTitle img {
vertical-align: middle;
}

としてみました。すると文字は真ん中になったのですが今度はロゴがしたの画像とくっついてしまい。。場合によってはこういうデザインもいいかと思いますが前と同じようにちょっと空けてみたいと思います。



先ほどのcssで

#siteTitle img {
vertical-align: middle;
margin-bottom: 3px;
}

と、画像の下を3pxほど空けます。



いい感じに空きました。

ではiPhoneで表示されたときはどんな感じになるか見てみましょう。




んー、サイト名が折りかえってしまってちょっとみにくいですえぇ

レスポンシブルデザインのために小さい画面用のcssがあるようなのでそちらで対応してみたいと思います。

\themes\pack2011_default_custom\css\small_basic.css

を修正して、サイト名の文字をちょっと小さくして折りかえったときに画像の右側に折りかえるようにします。

cssファイルの一番下に

#siteTitle img {
float: left;
margin-right: 3px;
}
.level1 {
font-size: 150%;
}
.level2 {
font-size: 100%;
border-bottom: solid 1px #666;
}

を付け加えました。これで表示したところ、意図したとおりになりました。




せっかく修正したのでこのテーマでカスタマイズできるようにzipしておいておきます。pngも一緒に置いておきますので文字を入れ替えるなどして試してみてください。

カスタマイズテーマダウンロード
http://ryus.co.jp/modules/d3downloads/index.php?page=singlefile&cid=7&lid=92


これらのカスタマイズを分かりやすい動画にしました。

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

〒104-0061　東京都中央区銀座１丁目３番３号 G1ビル７階

Copyright(c) 2012 RYUS.All Rights Reserved.