注文の多いXOOPS屋

スタッフブログ

  • 最新配信
  • RSS

Zend_ProgressBarでプログレスバー

 : 技術全般 2009/3/23 11:02

Blogger's Avatar

satoです。

重い処理の進捗を視覚的に表示したい場合、例えばXOOPS Cubeのインストーラのように、進捗を随時表示するようなケースがあります。
Cubeのインストーラのように、文字をそのまま流すだけであれば、出力を随時flush()してあげればよいのですが、例えばプログレスバーのように視覚的に表示したい場合は何かと面倒だったりします。

Zend FrameworkにはZend_ProgressBarという、そのものを行うためのライブラリがあります。
今回はこれとjQuery UIを使ってプログレスバーを実現してみたいと思います。

PHP側（progress.php）は

<?php

require_once('Zend/ProgressBar.php');
require_once('Zend/ProgressBar/Adapter/JsPush.php');

// 処理だと思われる何か
$items = array('データ新規作成', 'データ更新', 'データ削除', '後処理');

$adapter     = new Zend_ProgressBar_Adapter_JsPush(array('updateMethodName' => 'Zend_ProgressBar_Update', 'finishMethodName' => 'Zend_ProgressBar_Finish'));
$progressBar = new Zend_ProgressBar($adapter, 0, count($items));

foreach($items as $key=>$item) {
    // 処理を行っていると思われる部分
    $progressBar->update($key + 1); // 進捗の度合いを指定する
    sleep(2); // テスト用
}

$progressBar->finish();


HTML側は

<html>
<head>
<script type="text/JavaScript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/JavaScript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
<link type="text/css" href="css/smoothness/jquery-ui-1.7.1.custom.css" rel="stylesheet" />

<script type="text/JavaScript">
<!--
$(function() {
    $('#progressbar').progressbar({
        value: 0
    });
});

function Zend_ProgressBar_Update(data)
{
    $('#progressbar').progressbar('value', data.percent);
}
function Zend_ProgressBar_Finish()
{
    alert('更新が完了しました！');
}
-->
</script>

</head>
<body>

<div id="progressbar"></div>

<iframe src="progress.php" style="left: -1000px; top: -1000px: width: 1px; height: 1px; position: absolute;"></iframe>

</body>
</html>


このようになります。
これだけでプログレスバーが実装できます。

原理としては、iframeでPHP側を読み込むと、PHP側が随時進捗のJavaScriptコードを吐き出すので、それに応じてプログレスバーを動かすことによって、進捗状況を表示しています。

時間のかかる処理をWeb上から行うようなケースには是非使用してみてください。

ゲストブロガーによる北海道のススメ

 : その他 2009/3/19 20:15

Blogger's Avatar

花粉症でマスクが手放せないgusagiです
今日は、会社見学に来ているriafさんにお願いして、ゲストブロガーとなって頂きました。
ということで、ここからはriafさんによる「北海道のススメ」を楽しんで下さい！

北海道のススメ


riaf(http://riaf.jp)です！北海道から1週間くらい就職活動（いちおう！）で東京に出てきてます。来週の月曜日までいるので、飲みでも何でも誘ってください。

** 北海道には花粉症がない！
ブログ当番を僕に丸投げしたgusagiさんは今マスクをつけています。花粉症ですって。
僕は花粉症の辛さをしりません。なぜなら北海道には花粉症が無いんです。（厳密には花粉症の人も居るらしいですが）
なので、花粉症に苦しんでいる人はぜひ北海道に来てください！gusagiさんも北海道に引っ越しませんか！

** 北海道には梅雨がない！
じめじめしてイヤーなイメージがある梅雨も、北海道にはありません。RYUSも北海道に移転するべきですね。

** 北海道はひろい！
僕の実家は北海道の釧路町という、北海道の東側にある街にあります。そこはだいたい札幌と300km以上離れている場所で、東京から仙台くらいの距離があります。
そのために、恐ろしい看板もたくさんあったりしますよ！
http://blog.livedoor.jp/dqnplus/archives/742659.html

** OSC北海道あるよ
6/20（土） に札幌で、OSC北海道が開催されます。
北海道のOSCは他県のOSCとはひと味ちがいます（らしいです。僕は北海道しか知りません）
LOCAL Developer Day という、イベントも併催という形で開催されるので、こちらも要チェックです！


というわけで、みなさんぜひ北海道に遊びにきてくださいね！
そして、北海道に来た際にはぜひぜひ連絡をください！

riafさん、ありがとうございました！
自分も、北海道には機会があれば行ってみたいと思っているので、北海道のイベントをターゲットに計画を立ててみようと思います

XOOPSお手軽(?)プリントアウト対応

Ryuji : XOOPS » TIPS小ネタ 2009/3/18 22:07

Blogger's Avatar

XOOPSのニュースモジュールには印刷用ページを表示する機能がありますが、多くのモジュールは印刷用ページというのをもっていません。

そんな印刷用ページをもっていないモジュールでも印刷用に余計なブロックやヘッダを排除してプリントアウトできるように、ちょっとテーマをいじる方法をご紹介します。



こちらは、RYUSの社内情報共有用のXOOPSサイトです。
今このxpWikiのページを印刷すると次のように印刷されるようにしています。



利用したのは、印刷用のスタイルシートを読み込む仕組みです。

theme.htmlのhead部分に次のような行を追加しています。
<link rel="stylesheet" type="text/css" media="print"
 href="<{$xoops_url}>/themes/trump_color3/print.css" />
media="print"としておくと印刷時に指定されたスタイルシートファイルが読み込まれるようになります。
ここで読み込まれるprint.cssには、次のようにヘッダ、フッタやブロックを非表示にするように指定しています。
div#header{
    display:none;
}
#leftcolumn{
    display:none;
}
#centerBlock{
    display:none;
}
#rightcolumn{
    display:none;
}
#footerbar{
    display:none;
}
各ブロックにどんなidが割り振られているかは、テーマによって違いますので、利用されるテーマにあわせてくださいね。

で、さらにwpWikiもそうですが、モジュール内にも新規登録や編集のためのリンクなどがありますので、それらも印刷時には非表示になるように追記します。
/*xpWiki*/
.footer{
    display:none;
}
.counter{
        display:none;
}
.toolbar{
        display:none;
}
.navigator_page{
        display:none;
}
ここもモジュールに合わせて指定しましょう。
非表示にしたい箇所にid指定もclass指定も無い場合がありますが、その場合はそのモジュールのテンプレートを修正して対応します。

テンプレートまで手を入れだすと利用するモジュールが多い場合は結構大変かもしれませんが、テーマへの修正だけでもしておくと、ちょっと印刷して見たいなぁというときには重宝すると思います。

d3blogを使って個別対応窓口?ユーザーサポートページを作る

mik : XOOPS » モジュール 2009/3/17 17:36

Blogger's Avatar

なんか追い詰められると思ってもない力が出るときがあるなぁ、と感じることが多い今日この頃です。

プログラム的にはお客様に全く新しい機能をリクエストされて、実は既存のモジュールをちょっといじるだけで実現できたり、ということがありました。

そうこうするうちに、「割とみんなが知っている普通のモジュールや機能を使って、全く別のことに利用できる！」ということを発見しました。

今日発行のメルマガにも書いたのですが、XOOPSに備わっているサイト閉鎖機能を使って違うことに利用してみたりもできます。

例えば会社なら社員だけがログインできるためのサイトを「閉鎖機能」を使ってログイン画面だけ出しておくとか。

SNSや会員制サイトを作りたいと思ったときにmixiみたいなログイン画面（画像があって、ログイン部分だけがあって）を作ることも閉鎖中のhtmlをちょっといじるだけでできます。

まだ考えているだけですが、ダウンロード用のモジュール（d3downloads）を使ってファイルの受渡専用のビジネスっぽい使い方もできそうですし、d3blogを使ってmixiの様に公開範囲を限定した日記を書くということもできそうです。

ハックせずに機能や設定だけでできるところもありますが、あとちょっとだけハックしてみるだけでまるでそのものの機能が作れそうです。

既にある機能とほんのちょっと機能をプラスして、既存のモジュールの面白い使い方を発見して、ご報告したいと思ってます。

目薬

 : その他 2009/3/16 13:00

Blogger's Avatar

こんにちは。

「デザイナーのUbuntu体験記」の続きを書かないといけないと思うのですが、なかなかネタの仕込みができないargonです。

ということで、今回は愛用の目薬について書いてみようと思います。

目が疲れやすい自分はだいたい、持ち歩きように鞄に1つ、予備などに会社に1つ、そしてベッドサイドに寝る前に差す用に1つ目薬を用意してあります。
持ち歩き用と会社置き用は、それほどこだわりもなく薬局でパッケージを観て気に入ったものを買っているのですが、寝る前に差す目薬は決めていてロート製薬の「養潤水」です。

ロート養潤水 | 解眼新書シリーズ - ロート製薬株式会社

他の目薬と比較したわけではないのですが、「ロート養潤水は、そんな休眼時間の修復メカニズムに着目した目薬です」と、うたっているように就寝前に差す目薬としては最適なのではと思って使っています。
目が疲れやすい目が疲れているという方は、一度試してみてはいかがでしょうか？

openpearの旅 第3回:Image_Colorful

 : 技術全般 2009/3/13 17:30

Blogger's Avatar

今日はオシャレな画像が簡単に作れるImage_Colorfulを紹介します．
どんな風にオシャレかというと，以下のような感じです．



サイトには明記されていませんが，動作にはGDが必要なようです．インストールは，いつも通り

sudo pear install openpear/Image_Colorful

でいけます．openpearをはじめて利用する人はpear channel-discover openpear.orgしてください．

インストールしたら，以下のコードを書くだけです．

require_once 'Image/Image_Colorful.php';

$image = new Image_Colorful(400,100,175,1);
$image->addColors(150,150,150);

$font_path = '/usr/share/fonts/truetype/kochi/kochi-gothic.ttf';

$image->addTexts(
    '株式会社RYUS',
    $font_path,
    '30',
    '10',
    '10',
    array(0,0,0),
    'CENTER'
);

$image->getGenerateImage('png');

$font_pathには，フォントの場所を指定してください．WindowsかLinuxでフォントの場所が違うので
，自分の環境にあわせて変更する必要があります．

リロードするとわかるのですが，背景のデザインは毎回変わるので，自分だけのユニークな画像を作
る事ができます．Image_ColorfulでおしゃれなWeb素材作成してみませんか？

FCKEditor 2系 プラグイン作成ガイド入門 日本語版

naoto : ツール 2009/3/12 20:21

Blogger's Avatar

こんにちは。なおとです。さっそく本題に入ります。

配布元が公開している以下のドキュメントが、情報源になります。

Plug-ins http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Customization/Plug-ins

これを参考にしつつ、私の体験談を交えながらサラッと書いておこうかと思います。

FCKEditorは「FCKEditor for XOOPS」を利用することを前提にします。 ただし基本的にFCKEditorならば、他のウェブアプリの場合でもほとんど変わらないはずです。

プラグインを書く

Findreplaceプラグインを書く場合、編集するファイルは、以下のようなファイル名になります。

  • html/common/fckeditor/editor/plugins/findreplace/fckplugin.js
  • html/common/fckeditor/editor/plugins/findreplace/lang/en.js
  • html/common/fckeditor/editor/plugins/findreplace/lang/ja.js
  • html/common/fckeditor/editor/plugins/findreplace/fck_findreplace.html
  • html/common/fckeditor/editor/plugins/findreplace/findreplace.gif

fckplugin.js

プラグインとして動作するのに必須なのは、このファイルだけです。 ファイル名は固定です。

具体的な実装は外部において、それを読み込むようなことも可能です。

私もまだ肝心の中身をあまり把握できていないのですが、標準添付のPlaceholderプラグインをベースに手を入れていく方法で学習しました。

lang/en.js

言語ファイル（英語用）です。 なくても構わないかもしれません。

lang/ja.js

言語ファイル（日本語用）です。 サイトのページ（html）のエンコーディング指定によらず、UTF-8にするとよいかと思います。 （いろいろやりようはあるかもしれません。）

//パネルのアイコンのツールチップ表示に使われます
FCKLang.FindreplaceBtn      = '検索/置換';

//ダイアログの表題と、同ウインドウのタイトル
FCKLang.FindreplaceDlgTitle = '検索および置換をします';

fck_findreplace.html

ダイアログのhtmlファイルです。文字コードはUTF-8ということになっています。 しかし具体的なメッセージは言語ファイルを使うことにして、こちらには日本語は使わず、US-ASCII相当の文字のみを使うとよいかと思います。

findreplace.gif

パネルに配置するアイコン（ボタン）の画像です。 パネルに配置しないのであれば不要です。 ファイル名は任意です。

大きさはタテヨコそれぞれ16ピクセル、背景は透過にしておくとよいでしょう。

プラグインの動作設定

プラグインが出来上がったとして、設定ファイルを編集します。

  • html/common/fckeditor/fckconfig.js

プラグインディレクトリの指定

fckconfig.jsに既に書いてありました。 これはあえて変更する必要はないでしょう。

FCKConfig.PluginsPath = FCKConfig.BasePath + 'plugins/';

プラグインの有効化

公式のドキュメントの通りにします。

FCKConfig.Plugins.Add('findreplace', 'en,ja');

言語ファイルを使わない時は、次のような書き方になります。

FCKConfig.Plugins.Add('samples');

重要な点として、大文字小文字の区別があります。 findreplaceはプラグインディレクトリ配下のパス名として使われるので、パス名が小文字ならこの指定も小文字になります。 プラグインの名前を先頭大文字などにしている場合は注意が必要です。

パネルのカスタマイズ

公式のPlug-insページには、この先がほとんど書かれていません。 しかし上記のように書いてプラグインを有効化しても、勝手にパネルにボタンが増えたりしません。

そのことも設定しなくてはならないのですが、慣れないとこういったことも分からずに、右往左往してしまうものです。（私のことです）

パネルのカスタマイズについては、グーグルなどの検索でいくつか情報が見つかります。 ですので詳しく説明しませんが、プラグイン名を「Findreplace」として作成していたなら、次のような感じになります。

FCKConfig.ToolbarSets["Basic"] = [
    ['Bold','Italic','-','Findreplace','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']
];

FCKConfig.ToolbarSets["Default"]にも追加しておきます。

スタイルシート

必要に応じて、編集エリアのCSSを定義しているファイルを編集します。

  • html/common/fckeditor/editor/css/fck_editorarea.css

fckplugins.jsの書き方

標準添付のPlaceholderプラグインを参考に作った「Findreplace」プラグインというものを想定して、プラグインの実装のうち、共通処理の冒頭部分だけ説明します。

// Register the related command.
FCKCommands.RegisterCommand(
    'Findreplace',
    new FCKDialogCommand(
        'Findreplace',
        FCKLang.FindreplaceDlgTitle,
        FCKPlugins.Items['findreplace'].Path + 'fck_findreplace.html',
        340, 240
    )
);

'Findreplace'のように、プラグイン名を決めています。この名前を使ってパネルに登録したり、スクリプトから実行するなどできます。

いっぽう、FCKPlugins.Items['findreplace'].Pathという記述が見えます。 fckconfig.jsでの設定などから導かれるので、'findreplace'と小文字になっています。 この違いは先ほど説明したように、パス名に由来するためです。

// Create toolbar button.
var oFindreplaceItem = new FCKToolbarButton('Findreplace', FCKLang.FindreplaceBtn);
oFindreplaceItem.IconPath = FCKPlugins.Items['findreplace'].Path + 'findreplace.gif';

FCKToolbarItems.RegisterItem('Findreplace', oFindreplaceItem);

この部分がパネルに配置できるようにする部分です。 findreplace.gifがアイコン画像のファイル名です。

この先は実際にプラグインの動きを書くことになるのですが、まだまだ紆余曲折が待っています。

しかし冒頭でも書いたように、正直に言って私もまだ勉強中のため、割愛させていただきます。 なにか参考情報がありましたら教えていただけるとうれしいです。

以上で説明は終わります。

LaunchyでCHMファイルをキーワードで一発で開く

 : ツール 2009/3/11 10:53

Blogger's Avatar

satoです。

今回は、以前紹介したLaunchyで、CHMヘルプファイルをキーワード付きで簡単に呼び出せるようにしたいと思います。
とは言っても非常に簡単で、saitou155･プログラム技術のページで公開されているhhh.exeを使うだけです。

通常のCHMヘルプファイルは、hh.exeというプログラムが読み込んで表示するのですが、hh.exeはコマンドラインオプションでキーワードを渡して開く機能がありません。
そこで、hhh.exeを代わりに使用します。

設定自体は簡単で、Runnerプラグインで、
Name：呼び出す時に使う名前
Program：hhh.exeのパス
Arguments：[CHMファイルのパス] $$
と指定しておけば、「[Name][Tab][キーワード]」と入力するとCHMファイルの指定キーワード部分が開きます。
ただしCHMファイルによって挙動がまちまちで、キーワード検索に文字が入っているだけのものもあれば、該当ページまで自動的に開くものもあるようです。原因は不明です。

以前紹介した通り、CHMファイルは非常に便利だと思うのですが、開くのが面倒という難点がありました。
これにより、多少難点があるものの、どの状況でもキーワード検索が簡単に呼び出せるようになるので、CHMファイルを更に有効活用できるようになります。是非お試しください。

XCL2.1.7が出るようです&XCL2.2について少し

 : XOOPS » 総合的な情報 2009/3/10 23:40

Blogger's Avatar

先週にまた一つ年齢が上がったせいか、週の前半からバテ気味のgusagiです


さて、こちらでminahitoさんが書いていますが、近いうちにXCL2.1.7が出るようです。

前述のフォーラム内、minahitoさんの投稿から引用：
今後は 2.1.x 系で可能なフィーチャーリクエストの消化と、新しいデリゲートの導入、 v2.2.0 レベルのコンフィグレーション解釈の適用（デリゲートマネージャなども選択可能）を行い、 3/14 〜 3/15 あたりに RC アーカイブを作成する予定です。

バグFIXなどが中心のマイナーアップデートで、HD1.0.3で適用されたパッチなども取り込まれる予定です。

今のところ月内にはRC版がリリースされるようですので、興味と余力のある方は、2.1.7RCがリリースされたらテストに参加してみては如何でしょうか？

また、XCL2.2の開発も、gigamasterさんとkilicaさん中心で着実に進んでいるようです。
こちらについても、XCL2.2 Profileモジュールのプロトタイプが先日公開されています。
こちらは、まだ公開サーバに導入するのは難しいようですが、今のうちにXCL2.2の雰囲気を味わってみたい方は試してみるのも良いかも知れませんね

コンピュータシステム化する前に、紙で運用するフォームをつくる

Ryuji : ツール 2009/3/9 21:00

Blogger's Avatar

最近、時間をつくって社内で利用するフォームをつくっています。
フォームといってもWebアプリケーションで等のコンピュータシステム用のフォームでなく、印刷してペンで書き込む紙ベースのフォーム（記入用紙）です。

多くの会社では、このようなフォーム（記入用紙）は既にいくつも作ってあって運用されてると思います。
RYUSは設立時は二人だけだったので、ほとんどの用事は口頭で片付き、決まったフォームの必要性が低かったので、整備しないままきてしまってたんですね。ここ1年強で、急に人が増えてしまったので最近になって必要性を感じてつくってるわけです。

フォームの作成にはエクセルや iWorkなどのソフトを使うときもありますし、イメージが固まらないときは、A4のコピー用紙に手書きでざっくりと作成してコピーして使ってみることもあります。

こういう紙ベースのフォームの良さは、不完全でも利用できてしまうところにあります。
記入する欄が用意されていなくても、その気になれば余白に記入してカバーすることも可能です。

記入した内容を一覧したくなったら、ひとまずデスク上にバァッと広げてしまえば、一覧性も確保できます（数に限りはありますが）

また、フォームを作成する時間コストが非常に少ないというのも利点です。思いつきでパッとつくれますし、運用して不満な点があってフォームを修正するのも短時間で済みます。

ただ紙だと検索性が悪く、同時に別々の席で複数の人が参照することはできないなど不便な点もありますので、ある程度運用してみて、コンピュータシステム化した方が良さそうだと感じたら、XOOPSのモジュールとして作成して、社内ポータルサイトへ組み込もうと思っています。

もし社内の業務をシステム化することを考えているなら、まず紙のフォームを新たに作ったり、今あるオームを改良することから考えてみてはどうでしょうか？

紙のフォームをどんなに改良しても運用コストが高くつくという結論になってから、コンピュータシステム化を考えてみても良いと思います。そのときは是非ご相談くださいね。

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

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

Copyright(c) 2012 RYUS.All Rights Reserved.