<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
  <channel>
    <title>BLOG</title>
    <link>http://www.tom-gs.com/blog/</link>
    <description></description>
    <!-- optional tags -->
    <language>ja</language>           <!-- valid langugae goes here -->
    <generator>Nucleus CMS v3.41</generator>
    <copyright>ｩ</copyright>             <!-- Copyright notice -->
    <category>Weblog</category>
    <docs>http://backend.userland.com/rss</docs>
    <image>
      <url>http://www.tom-gs.com/blog//nucleus/nucleus2.gif</url>
      <title>BLOG</title>
      <link>http://www.tom-gs.com/blog/</link>
    </image>
    <item>
 <title><![CDATA[TinyMCEにCKFinderを実装する（も、完全にはしてない）]]></title>
 <link>http://www.tom-gs.com/blog/index.php?itemid=235</link>
<description><![CDATA[<p>
	WYSIWYGエディタといえばCKEditorとTinyMCEの2つがとても有名です。<br />
	CKEditorはこのブログで何度も紹介させてもらっていますが、CKEditorにはフリーでも使えるファイルブラウザCKFinderがあります。<br />
	これは結構強力なツールなのですが、これをTinyMCEでも実装できないかと思い、1日がんばってみました。</p>
<p>
	結論からいうと、画像を貼り付けるところまではできなかったので、途中までしたことを書いておきます。</p>
<p>
	はじめる前に、、、<br />
	実際はこんな感じまではわりと簡単に持っていくことができます。</p>
<p style="text-align: center; ">
	<a href="/blog/media/blog/20100228001b.png" rel="lightbox"><img alt="TinyMCEにCKFinderを実装した様子" height="230" src="/blog/media/blog/20100228001a.png" width="300" /></a></p>
<p>
	TinyMCEにはTinyMCEで使えるファイル・画像ブラウザ（<a href="http://tinymce.moxiecode.com/plugins_filemanager.php" target="_blank">MCFileManager</a>・<a href="http://tinymce.moxiecode.com/plugins_imagemanager.php" target="_blank">MCImageManager</a>）が有料で提供されており、これらをプラグインとしてインストールすることで、使用することができます。<br />
	どんなものかは<a href="http://tinymce.moxiecode.com/examples/full.php" target="_blank">TinyMCEのデモ</a>をご覧いただければいいと思います。</p>
<p>
	これは購入しなければ設置できなさそうなので（ダウンロードボタンがない！）<a href="http://ckfinder.com/" target="_blank">CKFinder</a>を使ってみることにする。</p>
<p>
	まず何はともあれ、TinyMCEをダウンロードしてみることに。公式からダウンロードして、解凍してそのままウェブ環境にアップロードです。<br />
	tinymceディレクトリの中のexamplesディレクトリの中に既に動くものが設定されています。このディレクトリに直接アクセスして、「Full」バージョンを見てみます。<br />
	これがちゃんと動いていることを確認してから、実装していくことにします。</p>
<p>
	まずCKFinderをダウンロードして、tinymce/examples/にそのままckfinderのディレクトリごと設置、tinymce/examples/ckfinder/config.phpの62行目を適切なパスを設定します。<br />
	わたしの場合、サイトの画像ディレクトリをコピーしてtinymce/examples/に設置し、そのディレクトリをCKFinderに設定しました。</p>
<p>
	で、/tinymce/examples/ckfinder/ckfinder.html?Type=ImagesでCKFinderに直接アクセスして動いているか確認。</p>
<p>
	ここからTinyMCEにCKFinderを実装していきます。<br />
	TinyMCEぐらい大きいツールになると大体この手のこちらがほしい処理というのは既にもっていたりします。何しろ自分ところで作っているファイルブラウザがつかえるんですから。<br />
	ということで、外部のファイルブラウザを実装するためのコードが公式で紹介されています。<br />
	<a href="http://wiki.moxiecode.com/index.php/TinyMCE:Custom_filebrowser" target="_blank">http://wiki.moxiecode.com/index.php/TinyMCE:Custom_filebrowser</a></p>
<p>
	ここに記述されているコードを/tinymce/examples/full.htmlを開きます。<br />
	tinyMCE.init({・・・});に設定を記述しているのですが、ここに以下の記述を追加します。</p>
<pre>tinyMCE.init({
    ・・・

    <span style="color:#f00;">file_browser_callback : &#39;ckfinder&#39;,</span>
   
    ・・・
});
</pre>
<p>
	file_browser_callbackに指定する文字列はグローバル関数名です。この関数名でファイルブラウザをポップアップするための処理を書きます。<br />
	TinyMCEのバージョン2と3で記述方法が違うので注意してください。以下はバージョン3の書き方です。<br />
	ちなみにCKFinder用に少し書き足しています。</p>
<pre>function ckfinder(field_name, url, type, win){
    var cmsURL = &quot;/tinymce/examples/ckfinder/ckfinder.html&quot;;
    var searchString = &quot;?&quot;;

    // Overwrite variable that CKFinder can read
    switch (type) {
        case &quot;file&quot;:
            type = &quot;Files&quot;;
            break;
        case &quot;media&quot;:
            type = &quot;Flash&quot;;
            break;
        case &quot;image&quot;:
            type = &quot;Images&quot;;
            break;
        defaul:
            type = &quot;&quot;;
            break;
    }

    // Create request parameters
    var query = &quot;&quot;;
    if (type.length &gt; 0){
        query = searchString + &quot;Type=&quot; + type;
    }

    // newer writing style of the TinyMCE developers for tinyMCE.openWindow
    tinyMCE.activeEditor.windowManager.open({
        file           : cmsURL + query,
        title          : &quot;CKFinder&quot;,
        width          : 800,
        height         : 400,
        close_previous : &quot;no&quot;
    }, {
        window : win,
        input  : field_name
    });
    return false;
}
</pre>
<p>
	これで一応上の画像のようになるんですが、ちょっと問題が・・・。</p>
<p>
	これ起動するところまではいいんですが、フォームフィールドにパスが入ってくれないんです。</p>
<p>
	原因はいろいろ考えられますが、面倒くさくなったので、ひとまずおいておきます。<br />
	気が向いたら調べてみようかと思います。</p>
]]></description>
 <category>WEB関係</category>
<comments>http://www.tom-gs.com/blog/index.php?itemid=235</comments>
 <pubDate>Sun, 28 Feb 2010 01:50:19 +0900</pubDate>
</item><item>
 <title><![CDATA[HTML5のInternet Explorer対応]]></title>
 <link>http://www.tom-gs.com/blog/index.php?itemid=234</link>
<description><![CDATA[<p>
	次世代のマークアップ言語HTML5。一部では利用が始まっています。</p>
<p>
	FirefoxやGoogle Chrome、iPhoneでは対応されており、モダンブラウザの中ではIE（バージョン8でも）だけがサポートしてません。W3Cからの正式な勧告は今年中には出るといわれています。</p>
<p>
	またもマイクロソフトは制作者の足かせを作ってしまいました。</p>
<p>
	ですがまったく使えないというわけではありません。</p>
<p>
	HTML5の大きな変化は、新たに要素が追加された点です。これは検索エンジンがより内容を拾いやすいようにということらしいです。</p>
<p>
	<a href="http://www.html5.jp/" target="_blank">HTML5.JP</a>でも紹介されている内容や雑誌で見た情報によると、アニメーションを動的に生成するCanvasという仕様が盛り込まれており、未実装のIEにもjQueryプラグインで実装可能なのだとか。実際<a href="http://japan.cnet.com/clip/global/story/0,3800097347,20408889,00.htm" target="_blank">AppleはAdobe Flashを批判</a>し、これに移行すべきと言っています。</p>
<p>
	ということもあり、問題はブラウザの依存関係ではなく、リッチコンテンツの制作にも大きく響きそうです。</p>
<p>
	<br />
	前置きが長くなりましたが、IEでHTML5を使えるようにする方法です。</p>
<p>
	一番の問題は新たに追加された要素がIEでは認識されず、CSSのレイアウトや一部で表示できないものがあるということです。これの解決方法は単純でJavaScriptでcreateElementしてやればいいだけなのです。</p>
<pre>document.createElement(&#39;footer&#39;);</pre>
<p>
	気になっていたのですが、これはたとえば属性値が違うもの（idやclassなど）に関係なく、単にその要素をドキュメント上に作成するだけで、それぞれのスタイルが適用されます。つまりid=&quot;wrapper&quot;のsection要素を作ったり、id=&quot;rightColumn&quot;のsection要素を作ったりするのではなく、document.createElement(&#39;section&#39;)とするだけでいいのです。</p>
<p>
	しかしこれには注意があって、例によってonloadやdomReadyのときに生成してもうまく動いてくれません。その時点では要素はもう既に読み込まれたあとなので、HTML5の要素をcreateElementするのは順番に読み込まれたときでなければいけません。</p>
<p>
	以下のページでHTML5で追加されたすべての要素を生成してくれるJavaScriptが配布されています。これをできるだけ早い段階（HEADタグのすべてのSCRIPTタグの前）で読み込んでやればいいわけです。</p>
<p>
	<a href="http://www.html5.jp/html5doctor/how-to-get-html5-working-in-ie-and-firefox-2.html" target="_blank">解説ページ</a>／<a href="http://remysharp.com/downloads/html5.js" target="_blank">スクリプトダウンロード</a></p>
]]></description>
 <category>WEB関係</category>
<comments>http://www.tom-gs.com/blog/index.php?itemid=234</comments>
 <pubDate>Fri, 26 Feb 2010 02:40:36 +0900</pubDate>
</item><item>
 <title><![CDATA[Joomla!にCKEditorをインストールしてみた]]></title>
 <link>http://www.tom-gs.com/blog/index.php?itemid=233</link>
<description><![CDATA[<p>
	English version is below.</p>
<p>
	Joomla!にCKEditorをインストールしてみました。<br />
	いくつか種類があるのですが、私は公式で配布されている以下のやつをインストール。<br />
	<a href="http://extensions.joomla.org/extensions/edition/editors/9897" target="_blank">http://extensions.joomla.org/extensions/edition/editors/9897</a></p>
<p>
	ファイルブラウザであるCKFinderが使えるのはいいのですが、少々不具合っぽいものがあるので、その対処方法も含めてのインストール手順です。</p>
<p>
	といっても、Joomla!の基本的なインストール。私はZIPでダウンロードして、管理画面上でExtensions＞Install/Uninstallの画面でUpload Package Fileで落としたZIPをアップロードしてインストールしてます。<br />
	そして、Site＞Global Configurationの画面で、Default WYSIWYG Editorを「Editor - CKEditor」に設定です。<br />
	で、ひとまず気になっているファイルブラウザが動くかを確認・・・。</p>
<p>
	動かない！</p>
<p>
	「The file browser is disabled for security reasons. Please contact your system administrator and check the CKFinder configuration file.」</p>
<p style="text-align: center;">
	<a href="/blog/media/blog/20100221001b.png" rel="lightbox"><img alt="" height="48" src="/blog/media/blog/20100221001a.png" width="300" /><br />
	</a></p>
<p>
	というエラーが表示されました。<br />
	これはCKFinderが内部のエラーコードで500になったときに出力されるエラーです。<br />
	で、デバッグ開始。<br />
	コード自体は問題ないのですが、突き詰めていくと、ログイン状態を管理しているセッションコードを保持しているDBテーブルへの参照に問題があることが判明。<br />
	私はインストール時にDBプレフィックス（接頭辞）を変更しているので、このようなエラーが発生していたようです。</p>
<p>
	で、修正すべきポイントは/plugins/editors/ckfinder/config.phpの32行目。ちょうどSQLの記述がありますが、FROM句に「jos_」のプレフィックス。<br />
	デフォルトでインストールすればこれになりますが、これではプレフィックス変えてる人には使えません。<br />
	「jos_」を「#__」に変更すると正常に動きます。<br />
	SQLの後にsetQueryしているので、このときにプレフィックスが付与されます。</p>
<p>
	あとはExtensions＞Plugin Manager＞Editor - CKEditorでLanguage Nameを「Japanese」、Colorを見慣れている「#CCCCCC」（念のためもともとの値は「#6B6868」）、Shift Enter Modeがなぜか「P Elements」になっているので「BR Elements」に設定しました。</p>
<p>
	ただ<a href="http://extensions.joomla.org/extensions/edition/editors" target="_blank">JCE</a>みたいに記事閲覧マネージャ的なものがほしいところです。<br />
	あれはあれで結構便利なので、だれか付けてくれないでしょうか！</p>
<hr />
<p>
	<strong>Joomla! extension &#39;CKEditor 2.0 for Joomla!&#39; has a bug. The file browser does not work on my Joomla!(Ver.1.5)<br />
	</strong></p>
<p>
	When I use the file browser of CKEditor (CKFinder), it warns you with message like &#39;<span style="color: rgb(255, 140, 0);"><strong>The file browser is disabled for security reasons. Please contact your system administrator and check the CKFinder configuration file.</strong></span>&#39;<br />
	This means CKFinder&#39;s internal error code &#39;500&#39; is returned.</p>
<p>
	So I checked this scripts and found resolution. You can modify this easily.<br />
	You can find this bug in <span style="color: rgb(255, 140, 0);"><strong>/plugins/editors/ckfinder/config.php on line 32</strong></span>, running SQL to check the login authentication.<br />
	FROM statement has &#39;jos_&#39; prefix. This prefix is given to name of database tables in default setting installation. <br />
	But I changed this prefix. So this statement must be changed from &#39;FROM <span style="color: rgb(255, 140, 0);"><strong>jos_</strong></span>session&#39; to &#39;FROM <span style="color: rgb(255, 140, 0);"><strong>#__</strong></span>session&#39;, the sign &#39;#__&#39; is replaced in funtion setQuery and run.<br />
	You can use the file browser of CKEditor for Joomla! correctly.</p>
]]></description>
 <category>WEB関係</category>
<comments>http://www.tom-gs.com/blog/index.php?itemid=233</comments>
 <pubDate>Sun, 21 Feb 2010 02:41:50 +0900</pubDate>
</item><item>
 <title><![CDATA[写真を使ったアート]]></title>
 <link>http://www.tom-gs.com/blog/index.php?itemid=232</link>
<description><![CDATA[<p>
	お久しぶりです。最近は仕事が忙しく、あまりサイトをかまっていませんでした。スケジュール的にもいろいろタイトすぎて、若干余裕はないのですが、今回の祝日は久々に休めたので、ちょっと体が楽になりました。</p>
<div class="material material-left">
	<a href="/blog/media/blog/20100212001b.png" rel="lightbox"><img align="" alt="" height="203" src="/blog/media/blog/20100212001a.png" width="200" /></a></div>
<p>
	Illustratorを使うまでもないけど、すごく簡単に作れるアート。写真をもとにテキトーにパスを打って、色を付けるっていうピカソっぽいアート。意外と面白かったし、さほど時間もかからない。色はセンスってところですかね。私の作ったものにセンスがあるのかどうかは別として。</p>
<p>
	今度はこの手法で風景とかやってみたいですね。でも、街の風景とかは意外と直線的な物体が多いから形的には面白くないかも。（色的には面白いかも抱けど）</p>
]]></description>
 <category>General</category>
<comments>http://www.tom-gs.com/blog/index.php?itemid=232</comments>
 <pubDate>Fri, 12 Feb 2010 02:33:38 +0900</pubDate>
</item><item>
 <title><![CDATA[CKEditor　セッティングのカスタマイズ]]></title>
 <link>http://www.tom-gs.com/blog/index.php?itemid=231</link>
<description><![CDATA[<p>
	CKEditorをNucleusで使いやすいように設定を変更してみた。<br />
	使ってて思い出したのですが、私がなぜTinyMCEを押していたのかというと、TinyMCEはCSSの編集をできる機能がついている。<br />
	インターフェースはDreamweaverと同じ。<br />
	これは、記述法を知っている人なら自由に編集できるなと思ったのだ。</p>
<p>
	問題のCKEditorですが、今回もCSS編集機能は実装されていない。<br />
	基本的にはFCKEditorと同じみたいだ。<br />
	特徴は以下のページで紹介されている。</p>
<p>
	<a href="http://ckeditor.com/why-choose" target="_blank">http://ckeditor.com/why-choose<br />
	</a></p>
<p>
	設定したいのは以下のとおり。</p>
<ul>
	<li>
		画像を左右にフロートするスタイル</li>
	<li>
		コードを部分（preタグ）のスタイル</li>
	<li>
		テンプレートの追加の仕方（勉強的な意味で）</li>
</ul>
<p>
	&nbsp;</p>
<h4>
	<strong>画像を左右にフロートさせる／コードを部分（preタグ）のスタイル<br />
	</strong></h4>
<p>
	これは簡単。configファイルに設定追加するだけだ。<br />
	デフォルトはCKEditorのデフォルトのスタイルが一覧化される。<br />
	これを、変更するにはCKEditorを初期化する処理の前（replace()メソッドなどを実行する前）に以下のコードを追加する。</p>
<pre>CKEDITOR.addStylesSet( &#39;myStyles&#39;, [
    // Block Styles
    { name : &#39;Image Float Left&#39; , element : &#39;div&#39;, styles : { &#39;float&#39; : &#39;left&#39; , &#39;margin&#39; : &#39;10px&#39; } },
    { name : &#39;Image Float Right&#39;, element : &#39;div&#39;, styles : { &#39;float&#39; : &#39;right&#39;, &#39;margin&#39; : &#39;10px&#39; } },
    { name : &#39;Bordered Image Float Left&#39; , element : &#39;div&#39;, styles : { &#39;border&#39; : &#39;1px solid #666&#39;, &#39;float&#39; : &#39;left&#39; , &#39;margin&#39; : &#39;10px&#39; } },
    { name : &#39;Bordered Image Float Right&#39;, element : &#39;div&#39;, styles : { &#39;border&#39; : &#39;1px solid #666&#39;, &#39;float&#39; : &#39;right&#39;, &#39;margin&#39; : &#39;10px&#39; } },
    { name : &#39;Code&#39;, element : &#39;pre&#39;, styles : { &#39;background&#39; : &#39;#E4EFFC&#39;, &#39;border-left&#39; : &#39;5px solid #7CB1ED&#39;, &#39;color&#39; : &#39;#175CA9&#39;, &#39;font-family&#39; : &#39;ＭＳ ゴシック&#39;, &#39;font-size&#39; : &#39;12px&#39;, &#39;padding&#39; : &#39;5px 10px&#39; } }
]);
CKEDITOR.config.stylesCombo_stylesSet = &#39;myStyles&#39;;
</pre>
<p>
	追加したコードは、画像を左右にフロートさせる、画像にボーダーをつけて左右にフロートさせる、preタグをスタイルするの5種類。<br />
	addStylesSet()の第2引数は以下の形式。</p>
<pre>[
    {
        name: &#39;スタイル欄に表示される名前&#39;,
        element: &#39;タグの名前&#39;,
        attributes: {
            &#39;属性名&#39;: &#39;値&#39;,
            &#39;属性名&#39;: &#39;値&#39;,
            &#39;属性名&#39;: &#39;値&#39;
        },
        styles: {
            &#39;CSSプロパティ&#39;: &#39;値&#39;,
            &#39;CSSプロパティ&#39;: &#39;値&#39;,
            &#39;CSSプロパティ&#39;: &#39;値&#39;
        }
    }
]
</pre>
<p>
	attributesもstylesも任意。今回の私の設定では、属性はひとつも設定していない。<br />
	&nbsp;</p>
<h4>
	<strong>テンプレートの追加の仕方<br />
	</strong></h4>
<p>
	以下のような内容のJavaScriptファイルを作る。</p>
<pre>CKEDITOR.addTemplates(&#39;default&#39;,{
    imagesPath:CKEDITOR.getUrl(CKEDITOR.plugins.getPath(&#39;templates&#39;)+&#39;templates/images/&#39;),
        {
            title:&#39;2-Column Layout&#39;,
            image:&#39;template3.gif&#39;,
            description:&#39;Layout with 2 columns.&#39;,
            html:&#39;&lt;table border=&quot;0&quot;&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&#39;
        }
    ]}
);
</pre>
<p>
	そしたら、configに以下を追加します。追加ポイントはスタイルのときと同じです。</p>
<pre>CKEDITOR.config.templates_files = [ &#39;作ったファイルへのパス&#39; ];
</pre>
<p>
	ちなみに作ったファイルの元となるものがckeditor/plugins/templates/templates/default.jsになります。<br />
	&nbsp;</p>
]]></description>
 <category>Nucleus</category>
<comments>http://www.tom-gs.com/blog/index.php?itemid=231</comments>
 <pubDate>Mon, 25 Jan 2010 00:07:48 +0900</pubDate>
</item><item>
 <title><![CDATA[我流HTMLコーディング規約]]></title>
 <link>http://www.tom-gs.com/blog/index.php?itemid=230</link>
<description><![CDATA[<p>
	仕事上いろんなHTMLを扱うが、一番いやなケースがテーブルレイアウトされたHTML。<br />
	特にtdタグの中にtableタグを入れ子し、さらにtdとspacer.gifで隣の要素のマージンを調整しているケースは最悪だ。</p>
<p>
	この手の手法は、テーブルレイアウトが主流だった（今も使っている人もいると思うが）数年前では当たり前だった。<br />
	タグにwidth属性やheight属性を記述しており、CSSは色や線など装飾程度にしか使っていないという考えのサイト。<br />
	<br />
	XHTMLの場合は、完全にCSSを外部化した上で、要素にidやclassを振るので、個人的にはメンテナンスもしやすいと考えている。<br />
	テーブルレイアウトはtableタグがたくさんでてくるので、どれがページ全体のフレームになっているのかわかりにくい。</p>
<p>
	そこで私が普段気をつけているHTML、CSS、JavaScriptのコーディング方法を紹介する。</p>
<p>
	参考にしたもの</p>
<ul>
	<li>
		プログラム言語の命名規則</li>
	<li>
		JavaScriptプラグイン（Lightbox）などが生成するHTML</li>
</ul>
<p>
	&nbsp;</p>
<h3>
	<strong>CSS、JavaScript、小さいプログラムはひとつのディレクトリにまとめる</strong></h3>
<p>
	私の恩師の方法を参考にしている。<br />
	ドキュメントルート、またはサイトのルートとなるディレクトリに、commonsourceというディレクトリを作って、その中にさらに、css、images、js、scriptsというようにディレクトリを分け、それぞれのディレクトリにそれぞれのファイルを入れる。<br />
	ディレクトリの定義は以下の通り。</p>
<ul>
	<li>
		css<br />
		スタイルシートファイルを保管するためのディレクトリ。基本的にこのディレクトリ以下にはディレクトリは作成されない。CSSファイルはメインとなるdefault.css以外にコンテンツの名前などで名前を付けて管理する。</li>
	<li>
		images<br />
		画像を保管するためのディレクトリ。</li>
	<li>
		js<br />
		JavaScriptを保管するためのディレクトリ。パッケージ化されていない、比較的規模の小さいJavaScriptを格納する。</li>
	<li>
		scripts<br />
		パッケージ化されているJavaScriptプラグインや問い合わせフォームなどのプログラムを格納。たいていディレクトリに分けて入れる（Lightboxなど）。</li>
</ul>
<p>
	恩師の場合はcommonsourceとしているが私はcommonとしている。commonはほかのプログラムでも使われる可能性があるので、避けたほうがいいかもしれない。<br />
	こうしている理由はいくつかあるが、大きくはPHPなどのプログラムがモジュールやライブラリと多くディレクトリを分ける可能性があるため。実際、CMSではそのようなことがあるのでこれにしているし、このほうがすっきりします。<br />
	&nbsp;</p>
<h3>
	<strong>文字コードは必ずUTF-8にする</strong></h3>
<p>
	これは最近のウェブサイトでは必須だろう。サーバー環境などやむをえない場合を除いてHTML、CSS、JavaScriptはUTF-8で保存する。<br />
	PHPを使う場合なども同じ。<br />
	理由はいくつかあるがJavaScriptの処理体系がUTF-8になっているため、Ajaxの戻り値もUTF-8になる。<br />
	またHTMLがXHTML互換のため、先頭に&lt;?xml encoding=&quot;utf-8&quot; version=&quot;1.0&quot;?&gt;とつけなくてはならなかったことなども理由のひとつ。<br />
	&nbsp;</p>
<h3>
	<strong>id属性、class属性の命名規則をはっきりさせる</strong></h3>
<p>
	概ねのこれらの値を設定するときは、単語の区切りを_（アンダーバー）にすることが多いように見受けられる。<br />
	私の場合以下のような規則でつけている。</p>
<ul>
	<li>
		id属性<br />
		1文字目は英小文字、区切り文字は英大文字<br />
		（例）：wrapper、contentWrapper、newsHeadlineArea1</li>
	<li>
		class属性<br />
		すべて英小文字、区切り文字は-（ハイフン）<br />
		（例）formfield、content-articles、content-article-header</li>
</ul>
<p>
	&nbsp;</p>
<h3>
	<strong>id属性はツリー関係で一意ではなくドキュメント全体で一意にする</strong></h3>
<p>
	CSSだとたとえば以下のような書き方ができる。</p>
<pre>div.content #wrapper {・・・}
div.article #wrapper {・・・}</pre>
<p>
	CSS的にはこれらは性格に位置を特定できるが、JavaScriptではこれは使えないので、id=&quot;wrapper&quot;がそのHTMLの中で1回しか出てこないようにコーディングする。<br />
	これはつまり、CSSのidに対するスタイルにタグ名を平気しなくて良くなる。</p>
<pre>冗長的な書き方の例　div#wrapper
推奨される書き方の例　#wrapper</pre>
<p>
	&nbsp;</p>
<h3>
	<strong>テーブルレイアウトは極力避け、名前はわかりやすく</strong></h3>
<p>
	HTMLの意味的にはテーブルは表組みで何らかの一覧がそこに存在していると思われる。<br />
	そうでない使い方はしないことだ。ただフォーム関係など、CSSがとっても面倒くさくなるケースはあると思うので、良識の範囲内で使う。</p>
<p>
	またidやclass、name属性につける値は読んで意味のわかるものにしておこう。<br />
	のちのメンテナンスがしやすくなる。<br />
	&nbsp;</p>
<h3>
	<strong>HTMLコードの見易さ、タグの意味を優先して記述する</strong></h3>
<p>
	ページのデザインやレイアウトのことではなくHTMLのコードの記述の仕方である。<br />
	HTML中のテキストの体裁はどうでもいいので、私は長文をぶち込む際も見栄えの改行位置でHTML中は改行しない。つまり「～でした。&lt;br /&gt;しかし、～」と書く。<br />
	この場合、長文テキストなので、いくつかの段落に分かれているだろうから、pタグを使って段落を囲み、HTML中のpタグは1行で書く。<br />
	詳しくは私のコードを見てもらえばいいだろう。<br />
	それから、インライン要素（プレーンテキストを含む）はブロックレベルのタグで囲み、その前後にむだなタブやスペースはつけない。そういったものはブロックレベルタグの前後つけて、HTML自体の入れ子構造がわかりやすいようにコーディングしていく。<br />
	&nbsp;</p>
<h3>
	<strong>JavaScriptはJavaのコーディング規約に従って書く</strong></h3>
<p>
	高級言語Javaには以下のような習慣上の決まりがある。守らなくてもいいのだが、これらにしたがって記述することによって効率を図るということだ。</p>
<ul>
	<li>
		変数名・メソッド名<br />
		1文字目は英小文字、区切り文字は英大文字<br />
		（例）countStudent、totalSum、salesTax1</li>
	<li>
		クラス名<br />
		1文字目は英大文字、区切り文字も英大文字<br />
		（例）HelloWorldApp、FixedNumber</li>
	<li>
		定数名<br />
		すべて英大文字、区切りは_（アンダバー）<br />
		（例）MAX_SPEED</li>
</ul>
<p>
	JavaScriptに定数という概念はないので、定数として扱った気でいよう。<br />
	JavaScriptにビルトインされている関数や定数、変数もすべてこの形式に従っている。特に理由のないときはこの形式にする。</p>
]]></description>
 <category>WEB関係</category>
<comments>http://www.tom-gs.com/blog/index.php?itemid=230</comments>
 <pubDate>Sat, 23 Jan 2010 20:36:07 +0900</pubDate>
</item><item>
 <title><![CDATA[NucleusのCKEditorプラグイン「NP_CKEditor」]]></title>
 <link>http://www.tom-gs.com/blog/index.php?itemid=229</link>
<description><![CDATA[<p>
	個人的にCKEditorをNucleusに実装したわけですが、よく探したら、結構前にCKEditorのプラグインが公開されているんですね。<a href="http://kyms.ne.jp/" target="_blank">http://kyms.ne.jp/</a>さんで作られているようで、MODｘ用にはすでにファイルブラウザが実装されているみたいです。</p>
<p>
	<a href="http://japan.nucleuscms.org/bb/viewtopic.php?t=4338" target="_blank">NP_CKEditor<br />
	</a></p>
<p>
	<a href="http://japan.nucleuscms.org/wiki/plugins:mitasnom" target="_blank">NP_Mitasnom</a>のようにプラグインのオプション設定はまだ実装されていないみたいですが、CKEditorを実装する分には問題ありません。しかもNucleusのmedia.phpをカスタマイズしたものをファイルブラウザとして実装しているので、いち早くCKEditorの実装したい方にはとてもお勧めです。</p>
<p>
	CKFinderは実装されていないので、別途実装する必要があります。中級者以上の方ならがんばって実装してみてはいかがでしょうか？　NP_CKEditorのckeditorのディレクトリにckfinderを設置して、NP_CKEditor.phpの81行目を以下のように変える。</p>
<pre>$str .= &quot;CKEDITOR.config.filebrowserBrowseUrl      = &#39;{$adminurl}ckfinder/ckfinder.html&#39;;&quot; . BR;
$str .= &quot;CKEDITOR.config.filebrowserImageBrowseUrl = &#39;{$adminurl}ckfinder/ckfinder.html?Type=Images&#39;;&quot; . BR;
$str .= &quot;CKEDITOR.config.filebrowserFlashBrowseUrl = &#39;{$adminurl}ckfinder/ckfinder.html?Type=Flash&#39;;&quot; . BR;
$str .= &quot;CKEDITOR.config.filebrowserUploadUrl      = &#39;{$adminurl}ckfinder/core/connector/php/connector.php?command=QuickUpload&amp;type=Files&#39;;&quot; . BR;
$str .= &quot;CKEDITOR.config.filebrowserImageUploadUrl = &#39;{$adminurl}ckfinder/core/connector/php/connector.php?command=QuickUpload&amp;type=Images&#39;;&quot; . BR;
$str .= &quot;CKEDITOR.config.filebrowserFlashUploadUrl = &#39;{$adminurl}ckfinder/core/connector/php/connector.php?command=QuickUpload&amp;type=Flash&#39;;&quot; . BR;
</pre>
<p>
	でCKFinderのconfigファイルを環境に合わせた設定に変更すれば動くはず（詳細は<a href="http://tom-gs.com/blog/index.php?itemid=228">前回の記事</a>を参照）。</p>
<p>
	実際に検証していないので、なんともいえませんが、これでOKなはずです。</p>
]]></description>
 <category>Nucleus</category>
<comments>http://www.tom-gs.com/blog/index.php?itemid=229</comments>
 <pubDate>Wed, 20 Jan 2010 00:31:32 +0900</pubDate>
</item><item>
 <title><![CDATA[NucleusにCKEditorとCKFinderを実装するプラグインの超いい加減な作り方]]></title>
 <link>http://www.tom-gs.com/blog/index.php?itemid=228</link>
<description><![CDATA[<p>
	<a href="http://www.tom-gs.com/blog/index.php?itemid=227">前回の記事</a>の続編です。</p>
<p>
	Nucleusの次期バージョンはおそらくPHP5完全対応になるだろうから、プラグインの作り方も変わってくると思うんですよね。<br />
	だからというのは理由になりませんが、面倒くさかったので超いい加減なプラグインを作ってしまいました。<br />
	その作り方です（笑）。</p>
<p>
	ちなみに私が使っているのはNucleusCMS 3.41です。</p>
<p>
	まずnucleus/plugins/にNP_CK.phpというファイルを作りました。<br />
	中身はこんな感じです。（圧縮してます）</p>
<pre>&lt;?php
class NP_CK extends NucleusPlugin {
    function getName() {return &#39;NP_CK&#39;;}
    function getAuthor() {return &#39;Tom Goodsun&#39;;}
    function getURL() {return &#39;http://www.tom-gs.com/&#39;;}
    function getVersion() {return &#39;1.0&#39;;}
    function getDescription() {return &#39;Plugin to implement CKEditor and CKFinder.&#39;;}
    function install() {/* Do nothing */}
    function getEventList() {return array(&#39;AdminPrePageHead&#39;);}
    function event_AdminPrePageHead(&amp;$data){
        $action = $data[&#39;action&#39;];
        $extrahead = &quot;\n&quot;;
        if ($action == &#39;createitem&#39; || $action == &#39;itemedit&#39;){
            $extrahead .= &#39;&lt;!-- tom goodsun --&gt;&#39; . &quot;\n&quot;;
            $extrahead .= &#39;&lt;script type=&quot;text/javascript&quot; src=&quot;&#39; . $this-&gt;getAdminURL(). &#39;ckeditor/nucleus.php&quot;&gt;&lt;/script&gt;&#39; . &quot;\n&quot;;
            $extrahead .= &#39;&lt;link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;&#39; . $this-&gt;getAdminURL(). &#39;ckeditor/nucleus.css&quot; /&gt;&#39; . &quot;\n&quot;;
        }
        $data[&#39;extrahead&#39;] .= $extrahead;
    }
}
?&gt;
</pre>
<p>
	次にnucleus/plugins/にckというディレクトリを作りました。<br />
	その中にckeditorとckfinderというディレクトリを作りました。<br />
	公式サイトからパッケージをダウンロードして、解凍した中身をそれぞれのディレクトリに入れました。CKFinderはPHP版をダウンロードしました。</p>
<p>
	&nbsp;</p>
<p>
	<strong>CKEditorの設定<br />
	</strong>上記プログラムのevent_AdminPrePageHead()という関数を見てもわかるとおりJavaScriptとして、nucleus.phpを読み込むことでCKEditorを実装します。</p>
<p>
	nucleus/plugins/ck/ckeditor/nucleus.phpの内容は以下の通り（JavaScriptもPHPが使えるっていう裏技（？）です）</p>
<pre>&lt;?php
// config.phpを使うと認証系とかもやってくれる
require(&#39;../../../../config.php&#39;);
if (!$member-&gt;isLoggedIn()) {exit(&#39;Not logged in.&#39;);}
$url = $member-&gt;getURL();
?&gt;
var nucleusConfig = {
    toolbar: &#39;NP_CK&#39;,
    language: &#39;ja&#39;,
    toolbar_NP_CK : [/* ツールバーの設定は割愛（実際してます！） */],

    // CKFinder integrated code
    filebrowserBrowseUrl      : &#39;&lt;?php echo $url; ?&gt;nucleus/plugins/ck/ckfinder/ckfinder.html&#39;,
    filebrowserImageBrowseUrl : &#39;&lt;?php echo $url; ?&gt;nucleus/plugins/ck/ckfinder/ckfinder.html?Type=Images&#39;,
    filebrowserFlashBrowseUrl : &#39;&lt;?php echo $url; ?&gt;nucleus/plugins/ck/ckfinder/ckfinder.html?Type=Flash&#39;,
    filebrowserUploadUrl      : &#39;&lt;?php echo $url; ?&gt;nucleus/plugins/ck/ckfinder/core/connector/php/connector.php?command=QuickUpload&amp;type=Files&#39;,
    filebrowserImageUploadUrl : &#39;&lt;?php echo $url; ?&gt;nucleus/plugins/ck/ckfinder/core/connector/php/connector.php?command=QuickUpload&amp;type=Images&#39;,
    filebrowserFlashUploadUrl : &#39;&lt;?php echo $url; ?&gt;nucleus/plugins/ck/ckfinder/core/connector/php/connector.php?command=QuickUpload&amp;type=Flash&#39;,
}

function createCkeditor(){
    CKEDITOR.replace(&#39;body&#39;, nucleusConfig); // 本文
    CKEDITOR.replace(&#39;more&#39;, nucleusConfig); // 本文の続き
}

if ( typeof console != &#39;undefined&#39; ){console.log();}

if ( window.addEventListener ){
    window.addEventListener( &#39;load&#39;, createCkeditor, false );
}else if ( window.attachEvent ){
    window.attachEvent( &#39;onload&#39;, createCkeditor );
}
</pre>
<p>
	これでCKEditorの設定は終わり。CKEditorの設定でCKFinderの設定もしてしまったので、とっととCKFinderの設定もやっちゃいましょう。</p>
<p>
	&nbsp;</p>
<p>
	<strong>CKFinderの設定<br />
	</strong>nucleus/plugins/ck/ckfinder/config.phpの設定を変えるだけです。<br />
	まずはNucleusを使う前提なので、プログラムの先頭に以下を追加。</p>
<pre>require(&#39;../../../../../../../config.php&#39;);
if (!$member-&gt;isLoggedIn()) {exit(&#39;Not logged in.&#39;);}
</pre>
<p>
	CheckAuthentication()関数の戻り値はtrueにする。</p>
<pre>function CheckAuthentication(){return true;}
</pre>
<p>
	$baseUrlの初期値を変更</p>
<pre>$baseUrl = preg_replace(&#39;/(http|https):\/\/&#39; . $_SERVER[&#39;SERVER_NAME&#39;] . &#39;/&#39;, &#39;&#39;, $member-&gt;getURL() . &#39;media/&#39;);
</pre>
<p>
	$config[&#39;Thumbnails&#39;]はお好みの設定に。<br />
	enabledをtrueにするとサムネール表示ができる。</p>
<p>
	これで終わり。<br />
	あとはNucleusの管理画面からプラグインをインストールするだけ。</p>
<p>
	ちなみにCKFinderのブラウザ画面はNucleusのconfig.phpがインクルードされるので、認証エラーになっちゃうんですね。<br />
	問題点といえばレンタルサーバーだとサーバー変数が期待通りの値になっていないことがあるみたいなので、注意することぐらいですかね。</p>
]]></description>
 <category>Nucleus</category>
<comments>http://www.tom-gs.com/blog/index.php?itemid=228</comments>
 <pubDate>Mon, 18 Jan 2010 01:41:52 +0900</pubDate>
</item><item>
 <title><![CDATA[NucleusにCKEditorとCKFinderを入れてみた]]></title>
 <link>http://www.tom-gs.com/blog/index.php?itemid=227</link>
<description><![CDATA[<p>
	一足早く自分が使っているNucleusにCKEditorとCKFinderを入れてみた。しばらく使い続けて使いやすいかどうかを確認していこうかと思っています。</p>
<p>
	個人的な予想として、両者とも使いやすいような気がする。特にファイルブラウザーとしてCKFinderを使うことで、Nucleusに限らず今まで弱かったファイルブラウザー部分が強化されるのではないだろうか。</p>
<p style="text-align: center;">
	<a href="/blog/media/blog/20100116001-2.png" rel="lightbox"><img alt="CKEditorとCKFinder" height="230" src="/blog/media/blog/20100116001-1.png" width="300" /></a></p>
<p style="text-align: center;">
	ひとまず、CKEditorとCKFinderを使えるようにしたのだけど、とりあえずはじめてでもあるNucleusのプラグインとして作ってみようといろいろやってみました。</p>
<p>
	CKEditorがFCKEditorの後継版ということで、NucleusのFCKEditorプラグインであるNP_Mitasnomをベースに作ろうかと思いましたが、どうもよくわからない。設定系には互換がありそうなのですが、面倒くさかったので、プラグインを登録して、設定も何もいじくらないただ実装するだけプラグインを作ってためしました。</p>
<p>
	自宅のVM環境では2種類ためしたのですが、登録処理にバグがあるみたいで、一度では登録できない。登録の確認ってボタンを押さないと確定できない。まぁそこはそれでなんとかなるので、いいのだけど、レンタルサーバーにインストールしたときNucleusへのパスがうまく取れてないみたいだ。ちょっと無理やりだけど、うまく動くように調整したが、汎用的なプログラムにはなっていないので、配布はできない。</p>
<p>
	記事を書くだけならこのサーバーブラウザは使いやすい。GDライブラリを使っているので、サムネール表示をするなら、PHPの場合だと、GDライブラリがインストールされている必要がある。なくてもエラーにならないので、安心を。</p>
<p>
	これの再配布だけど、CKEditorは再配布できますよね。実際しているところもありますし。でもCKFinderって再配布可能なんですかね？フリー利用もできるけど、商用利用はライセンス必要なんじゃないんすかね。</p>
<p>
	急場で作ったものなので、私はもっと質のいいプラグインの登場を待ちたいと思います。（他力本願！）</p>
]]></description>
 <category>Nucleus</category>
<comments>http://www.tom-gs.com/blog/index.php?itemid=227</comments>
 <pubDate>Sat, 16 Jan 2010 19:36:58 +0900</pubDate>
</item><item>
 <title><![CDATA[メリークリスマス2009]]></title>
 <link>http://www.tom-gs.com/blog/index.php?itemid=226</link>
<description><![CDATA[<p>最近ほんとに寒いです。もうすぐクリスマスですね。</p><div class="material material-right"><a href="/blog/media/blog/20091221001b.png" rel="lightbox"><img src="/blog/media/blog/20091221001a.png" alt="メリークリスマスをマイケル・ジャクソンでアレンジしてみました。" title="メリークリスマスをマイケル・ジャクソンでアレンジしてみました。" width="200" height="222" /></a></div>
<p>私はいつもと同じクリスマスです。独り身で一緒にいてくれる人はいませんが、26日に飲む約束を取り付けました。気分だけでもクリスマスに浸ろうとさらっとイラストを描きました。メリークリスマスをマイケル・ジャクソンのSmooth CriminalのPVでおなじみの「アオっ！」のポーズでアレンジしてみました。ボーンを書いてから肉付けしていったんですが、全体的に左斜め上に傾いている、特徴的なシルエットです。</p>]]></description>
 <category>勝手にデザインしてみました</category>
<comments>http://www.tom-gs.com/blog/index.php?itemid=226</comments>
 <pubDate>Mon, 21 Dec 2009 02:41:36 +0900</pubDate>
</item>
  </channel>
</rss>