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

このブログ（D3ブログモジュール）に記事を書くときは、基本的にhtmlを直接書く機能を使って書いています。 そのため、phpやjavascriptのコードを掲載するときには、適宜文字を実体参照で書く必要があります。

そのための方法として、以前はこんなやり方をしていました。

• 記事として、「<>&"'」の変換をしたい部分だけ書く
• オプション「HTMLを有効にする」のチェックを外す
• 「プレビュー」ボタンを押す
• プレビュー表示部分を選択して、選択した部分のソースを表示する（ブラウザFirefoxの機能）
• 必要なところをコピーしてソース表示を閉じる
• 元の記事フォームに貼り付ける
• オプション「HTMLを有効にする」のチェックを入れる
• 記事を仕上げる
• 送信する

この方法はまったくダメとは言いませんが、もっとうまいやり方があるはずです。 いやあるはずということはなくて、実際にもっといい方法を知っているのに、やっていませんでした。 こういった無意味な労力を割くことは、自分としては「悪」と考えています。

そこでこれをブックマークレットで解決することにしました。 検索して調べてみるといくつか高機能なものもあるようでしたが、私は次の記事にあるシンプルなものを使うことにしました。

テキストエリア内の選択文字列を簡単に実体参照化するブックマークレット - エブログ

ただ、'（シングルクォーテーション）を変換できていないようでしたので、その分だけ修正したものを使っています。

選択範囲をhtmlescape

<a href="java script:(function(){var%20d=document;function%20r(s){%20return%20s.replace(/&amp;/g,'&amp;amp;').replace(/([<>\&quot;\'])/g,function(m0,m1){return%20{'<':'&amp;lt;','>':'&amp;gt;','\&quot;':'&amp;quot;','\'':'&amp;#39;'}[m1];});}%20if(d.selection){d.selection.createRange().text%20=%20r(d.selection.createRange().text);}else{var%20ta=d.getElementsByTagName('TEXTAREA');%20for(var%20i=0;i<ta.length;i++){if(ta[i].value){var%20s=ta[i].selectionStart;var%20e=ta[i].selectionEnd;var%20v=ta[i].value;var%20t=v.slice(s,e);if(t){ta[i].value=v.slice(0,s)+r(t)+v.slice(e);}}}}})();">選択範囲をhtmlescape</a>

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

イベントビューアで見ることができるシステムのログから、毎日の始まりと終わりの時間を抽出するスクリプトを書きました。 タイムカードの打ち忘れの時にちょと使うためです。

スタート→すべてのプログラム→管理ツールー→イベント ビューア
操作→一覧のエクスポート
テキスト（タブ区切り）

で書き出したファイルをフォームから食わせて、結果をCSVファイルでダウンロードできるようにしました。

こういうコードは基本は書き捨てなのですが、弊社のリポジトリにある「雑多なコードを入れるところ」にも置きました。 今日はそのコードをここに晒しておしまいにしようかとも思ったのですが、面白みに欠けるので別の話題にします。

例1 ファイルアップロード用のフォーム

その作業の中でPHPマニュアルを参照していたのですが、気になる点があったので書いておきます。

POST メソッドによるアップロード
/[cvs]/phpdoc-ja/features/file-upload.xml

$ diff -urN file-upload.xml.1.38 file-upload.xml
--- file-upload.xml.1.38 2009-05-07 18:57:10.000000000 +0900
+++ file-upload.xml 2009-05-07 19:06:47.000000000 +0900
@@ -53,7 +53,7 @@
 <![CDATA[
 <!-- データのエンコード方式である enctype は、必ず以下のようにしなければなりません -->
 <form enctype="multipart/form-data" action="__URL__" method="POST">
-    <!-- MAX_FILE_SIZE はファイルフィールド用に必須です -->
+    <!-- MAX_FILE_SIZE はinput フィールド file の前に置く必要があります -->
     <input type="hidden" name="MAX_FILE_SIZE" value="30000" />
     <!-- input 要素の名前が $_FILES 配列での名前となります -->
     このファイルをアップロード: <input name="userfile" type="file" />

初めはまったく気に留めていなかったのですが、MAX_FILE_SIZEなんて普段書かずに済むことの方が多いのに、必須って何だろうと思い、まわりのひとと雑談をする中でここは誤訳なのではないかということになって、それで気づいた次第です。

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

今月末に、会社の健康診断を受けることになりました。 もちろん社内でではなく、都内某所に行ってそこで受ける手筈になっています。

実は私は通常の健康診断は好きなほうです。 身長体重、視力に聴力、血液検査とか。

数年前のある時から健康に気をつけるようになったのですが、ここのところ不摂生や不規則がちな生活が気になっています。 健康診断の日だけに限らず、まずはできるところから改善です。 これは仕事も含めて開発のノウハウにも通じるところがあるのではないでしょうか。

なおとです。

桜の話題をしたいと思います。 前回も書いたのですが、私は退社後に散歩をしています。 東京の桜の開花が発表されてからは、お花見のつもりでいくつか見て回りました。

毎年このシーズンはお花見写真をいろいろ撮っているのですが、今年の現時点でのベストショットがこれです。

場所は神田川沿い、江戸川橋から早稲田方面へ行く途中です。

近くの江戸川橋公園は平日にも拘らずなかなかの人出で、会社帰りに宴会などしているようでした。 ほかにも家族連れやカップルも多く、散策や、私のように携帯やカメラで撮影をしている方々も多かったです。

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

弊社では昨年の夏から、 フライデーフリー制度というものを行っています。

その後内容の見直しなどをして、名称を一新、「フライデーラボ」として再スタートすることになりました。

実は名称変更は既に今年していたのですが、先月あたりの一時期は受託している業務に集中的に取り組む期間として、中断していました。

それが明日から、先に書いたように再開するということになったのです。

弊社のメンバーは各自で目標を立てているようです。 私もなにかモジュールなど作っていこうと思っています。

今考えているのはまだ構想だけなのでお伝えできるほどの内容はないのですが、suinさんに倣って小さなモジュールにしたいと考えています。

今後もこのブログなどに注目していただけたらと思います。

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

このごろ一番気にしていることは、健康についてです。 キーワードはいわゆる「メタボ」と「ストレス解消法」です。

食事に気をつかうようにしています。

てんぷらやコロッケのような揚げ物、ハンバーグは避けます。 おいしいけど高カロリーな食事は、計画的に月1回とかにするようにしています。

甘いものを止められたらいいのですが、減らしてはいますが、負けています。

お昼は外食の割合が多いのですが、たいてい「ごはん半分でお願いします」と言って、炭水化物も適量を心がけます。 いっぽうで野菜は多く摂りたいのですが、このごろまったく不足しています。

飲み物は基本的に無糖のお茶です。 それでもたまに野菜ジュースや栄養ドリンク、気になる新発売の飲料も選びます。

自宅では体脂肪計付きの体重計を使っているのですが、ちょっと前に乾電池が切れて使えなくなっていました。 それまでほぼ毎日計測していたのですが、それがおろそかになっていました。 先日乾電池を交換して量ってみたらびっくり、いやなんとなく気づいてはいたのですが、結構増えていました。

そうなると運動をするという話になるのですが、休みの日には寝て過ごすことが多く、思うように体をつかうこともままならず……。

ほかには毎日の通勤時間に運動を意識しています。 だらだらと歩かずに、きびきびとします。 そして帰りは、歩いています。

会社の近く、昌平橋から後楽園駅までだと約2.4km、茗荷谷駅まで行くと約4km、池袋までだと約7kmです。 池袋までは稀ですが、たいてい茗荷谷まで、1時間半かけて歩いています。

ただどうもこの程度歩いても、運動としてはそれほど効果が上がっていないのかなと思います。 それでも、ストレス解消のためにはなくてはならない時間となっています。

また途中、東京ドームシティ近辺、ラクーアなどを通り、買い物などするのが楽しみです。

本郷あたりを通ってみたり、飯田橋や神楽坂を経由したり、いろいろなコースを試しています。 道すがらの景色、とはいっても夜の風景ですが、そういったものにも趣があって楽しいですよ。

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

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

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がアイコン画像のファイル名です。

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

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

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

なおとです。

先週、毎日の仕事に使っているPCのハードディスクを入れ換えました。

いままで、毎分5,400回転のディスクだったのですが、プライベート含めて初の7,200回転になりました。

もっと騒々しいものを想像していたのですが、オフィスで使う分にはまったく静かであるといえます。

いままではディスクIOがボトルネックだったため、動作速度の改善も体感として、感じます。 特にシャットダウンが素晴らしく速くなりました。

ついでにメモリーも増やしました。 「ついでに」といえるほど、メモリーの価格は去年の半分程度かというほどまで下がっていて、これで増設しなければなんの苦行かと思います。 もっとも会社の経費ですが。

ディスク入れ換えに伴ってOSを更からインストールし、自動更新や各種アプリのインストールもしました。 開発環境の中心はVM Ware PlayerのなかのUbuntu Linuxなので、移行はスムーズです。

これで快適度がアップしたと喜んでいます。 そうは言っても、同僚のargonさんが使っているマシンに比べたらまだまだですけどね。

なおとです。

秋葉原の無印良品で、「組み立て携帯箸」を購入しました。 それに合わせて，箸袋も作ってみました。

お昼はたいてい、近隣で外食しています。 いままで会社には短い箸を入れた箸箱があったのですが，ちょっと持ち歩くようなものではなかったので、ほとんど活躍の機会がありませんでした。

今週から、この箸を持ち歩いています。 初日はカレーだったので、使ったのは火曜日からです。 ちょっと手にかけた自分の箸を使っていることで、気分よく食事できます。

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

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">

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