2010年 12月 の投稿一覧

Navicat9 Lite

仕事先でNavicatというGUIのRDB管理ツールを教えてもらったので、使用方法などをメモ。

MySQLやPostgreSQLなどのRDBを操作するとき、基本的にはコマンドライン(Windowsならコマンドプロンプト、linuxならtera term)で直接SQL文を書いているが、ただ単にテーブルデータの一覧が見たい時とかはちょっと面倒くさい。こんな時はNavicatを使うと、とても楽。

Navicatには有料版と無料版(Navicat Lite版)があり、無料版は一部機能が制限されているが、普通に使用するには何も問題ない。

インストールは簡単。

まずはNavicat9 Liteをダウンロード。

アンケートに応えて、メルマガ購読すればダウンロード出来る。

インストールは、ダウンロードしたインストーラを起動して画面にしたがってクリックしていけば、あっという間に完了。

起動後、最初に設定するのはDBへの接続設定。

ローカルマシンのPosgfreSQLに接続したいので、「接続」→「PostgreSQL」をクリックして接続設定画面を表示する。

ホスト名・ポート・初期データベース・ユーザー名・パスワードを入力して確認ボタンをクリックすれば接続設定が保存される。(初期データベースは空で登録した)

作成した接続設定をダブルクリックすると、DB一覧が表示される。
DB名をダブルクリックすると、テーブル情報が表示される。

 

このNavicatはテーブル、ビュー、ファンクション(ストアドプロシージャ)など基本的な操作が出来るだけでなく、ユーザー管理やダンプ出力、SQLを直接記述してクエリを実行できる。

本番環境は、外部からDB接続するのは難しいだろうが、ローカル開発環境ならGUIで楽にRDBが管理ができる。すばらしい。

でも、こういう便利ツールに慣れてしまうと、本番サーバーにログインして調査するときにSQL文が書けなくなったりしてしまう気が、、、

追記:

「ツール」「オプション」「基本-ドッキング」「ドッキングを使用-ウィンドウをドック-メインウィンドウに」

これで、テーブルデータを表示したとき、別Windowではなく、同一Window内に表示される。

jQueryとmootools

JavaScriptのフレームワークとして、これまではmootoolsを使ってきたのだが、自分の周りを見渡すと自分がマイノリティーであることが発覚。みんな、jQueryを使ってた。。。

という訳で、jQueryについて少し調べてみた。

まずは、Googleトレンド(国内)

あれ、、、mootoolsが0、、、

次にGoogleキーワード検索の件数

jQuery 38,200,000件 検索結果
mootols 2,530,00件 検索結果

圧倒的だ、、、

 

Amazonで本を検索

jQuery 132件 検索結果
mootools 8件 検索結果

圧倒的だ、、、
てか、mootoolsの日本語の本は無いんだ、、、

 

フォーラムの投稿件数

jQuery 75620件 参考リンク
mootools 13112件 参考リンク

 

こんなにmootoolsがマイナーだとは思わなかった。。。

2、3年前にドキュメントを見たときは、絶対mootolsのほうが使いやすいと思ったけど、
jQueryのドキュメントがこんなにも充実していたのは知らなかった。

長いものには巻かれたほうが良いので、今後はjQueryにします。
とりあえず、

jQuery 日本語リファレンス

を読みながら慣れていこうと思う。
 

CKFinderの設置方法

前回設置したCKEditorにCKFinderを設置するこになった。
というわけで、設置方法をメモる。

1.CKFinderをダウンロード

2.ダウンロードしたCKFinderをサーバーに設置

基本的には、公式サイトにドキュメントがあるので、そちらを参考にすればOK。
CKEditor Developers Guide
CKFinder Developers Guide

設置場所はどこでも良いが、CKEditorが設置しているのと同じディレクトリにする。
/home/username/public/js/ckfinder/
(CKEditorは、/home/username/public/js/ckeditor/ に設置している)

3.ckfinder/config.php を修正

・ライセンスコードを記述

$config['LicenseName'] = 'hoge';
$config['LicenseKey'] = 'fuga';

・CheckAuthentication関数を変更
    ログインユーザー(管理者)のみファイルアップロードが可能にしたいので、認証ロジックを組み込む。

function CheckAuthentication()
{
    include 'lib/Admin/Auth.php';
    return AdminAuth::isAuthorized();
}

※【AdminAuth】クラスは自作クラス

・baseURLを変更
    ログインユーザーごとにアップロードディレクトリを変更する。

if ( CheckAuthentication() )
{
    $identity = AdminAuth::getInstance()->getIdentity();
    $baseUrl = '/uploads/'.$identity->userid.'/';
}

4.CKEditorを組み込んでいる入力画面を修正

・jsファイルを読み込み

<script type="text/javascript" src="/js/ckfinder/ckfinder.js"></script>

・CKEditorのtoolbar に ['Image','Flash'] を追記

・CKEditorにCKFinderをセットアップ

var editor = CKEDITOR.replace( 'editor' , {
    ・・・
    config.filebrowserBrowseUrl      = '/js/kcfinder/browse.php?type=files';
    config.filebrowserImageBrowseUrl = '/js/kcfinder/browse.php?type=images';
    config.filebrowserFlashBrowseUrl = '/js/kcfinder/browse.php?type=flash';
    config.filebrowserUploadUrl      = '/js/kcfinder/upload.php?type=files';
    config.filebrowserImageUploadUrl = '/js/kcfinder/upload.php?type=images';
    config.filebrowserFlashUploadUrl = '/js/kcfinder/upload.php?type=flash';
});

・イメージプロパティダイアログやFlashプロパティダイアログのタブの順番が気にくわないので、アップロードタブを一番左にセットする 参考
 

CKEDITOR.on( 'dialogDefinition', function( ev )
{
    var dialogName = ev.data.name;
    var dialogDefinition = ev.data.definition;
    if ( dialogName == 'image' || dialogName == 'flash' )
    {
        var contents = dialogDefinition.getContents( 'Upload' );
        dialogDefinition.removeContents( 'Upload' );
        dialogDefinition.addContents( contents, 'info' );
    }
});

これで、CKFinderを使えるようになった。

CKEditorにYoutube貼りつけボタンを追加する

今回、CKEditorにYoutube動画貼付け用のpluginを追加することになったので、設置方法をメモる。

インストールしたpluginは

の2つ。

設置方法は

1.ソースをDLして解凍

2.youtubeフォルダとmediaembedフォルダをCKEditorのpluginフォルダ(ckeditor/plugins/)へコピー

3.ckeditor/config.js に config.extraPlugins = 'youtube,ediaembed'; を追加 (MediaEmbedのreadme.txtには「config.extraPlugins = 'MediaEmbed';」と記述されていたが、すべて小文字にしないと動かなかった、、、)

CKEDITOR.editorConfig = function( config ){
    ...
    config.extraPlugins = 'youtube,ediaembed';
};

4.ツールバーに'MediaEmbed','Youtube' を追加 参考ページ

CKEDITOR.editorConfig = function( config )
{
    ...
    config.toolbar = 'MyToolbar';
    config.toolbar_MyToolbar =
    [
        ...
        ['MediaEmbed','Youtube']
    ];
};

これで、とりあえず利用可能な状態になる。

次に日本語化をする。

CKEditorのpluginを日本語化するには、各pluginごとにlang/ja.jsファイルを作成する必要がある。

幸い、Youtube pluginには lang/en.js があったので、それをコピーして編集すればOK。

1.ckeditor/plugins/youtube/plugin.js の「lang」設定に「ja」を追加

CKEDITOR.plugins.add('youtube',{
    lang:['en','uk','ja'],
    ...
})

2. ckeditor/plugins/youtube/lang/en.js をコピーして ja.js を作成して、必要に応じて日本語化する

Youtube plugin はこれでおしまい。

 

問題はMediaEmbed plugin。。。 langディレクトリがない、、、

というわけで、多言語に対応できるよう修正する

1.ckeditor/plugins/mediaembed/plugin.js を以下のように修正する

( function() {
    CKEDITOR.plugins.add( 'mediaembed',{
        lang:['en','ja'],
        requires: [ 'iframedialog' ],
        init: function( editor ){
            var me = this;
            CKEDITOR.dialog.add( 'MediaEmbedDialog', function (){
                return {
                    title     : editor.lang.mediaembed.title,
                    minWidth  : 550,
                    minHeight : 200,
                    contents  : [{
                        id       : 'iframe',
                        label    : 'Embed Media',
                        expand   : true,
                        elements : [{
                            type  : 'html',
                            id    : 'pageMediaEmbed',
                            label : 'Embed Media',
                            style : 'width : 100%;margin:0;padding:0;',
                            //html  : '<iframe src="'+me.path+'/dialogs/mediaembed.html" frameborder="0" name="iframeMediaEmbed" id="iframeMediaEmbed" allowtransparency="1" style="width:100%;margin:0;padding:0;"></iframe>'
                            html  : '<style> body { font: normal 12px Arial,Helvetica,Tahoma,Verdana,Sans-Serif; } #embed { width: 100%; height: 110px; margin: 5px 0 0 0; border: 1px solid #a0a0a0; font: normal 11px Courier, Fixedsys, serif; background-color: #ffffff; }</style> '+editor.lang.mediaembed.inputMsg+'<br /><textarea id="embed" /></textarea>'
                        }]
                    }],
                    onOk : function(){
                        //  CKEditorを複数設置した場合、うまく動作しなかったので修正
                        /*
                        for (var i=0; i<window.frames.length; i++) {
                            alert(window.frames[i].name);
                            if(window.frames[i].name == 'pageMediaEmbed') {
                                var content = window.frames[i].document.getElementById("embed").value;
                            }
                        }*/
                        var content = document.getElementById("embed").value;
                        final_html = 'MediaEmbedInsertData|---' + escape('<div class="media_embed">'+content+'</div>') + '---|MediaEmbedInsertData';
                        this.getParentEditor().insertHtml(final_html);
                        updated_editor_data = this.getParentEditor().getData();
                        clean_editor_data = updated_editor_data.replace(final_html,'<div class="media_embed">'+content+'</div>');
                        this.getParentEditor().setData(clean_editor_data);
                    }
                };
            });
            editor.addCommand( 'MediaEmbed', new CKEDITOR.dialogCommand( 'MediaEmbedDialog' ) );
            editor.ui.addButton( 'MediaEmbed', {
                label: editor.lang.mediaembed.button,
                command: 'MediaEmbed',
                icon: this.path + 'images/icon.gif
            });
        }
    });
})();

2.ckeditor/plugins/youtube/lang/en.js を作成

CKEDITOR.plugins.setLang('mediaembed', 'en',{
    mediaembed :{
        title : 'Embed Media Dialog',
        button : 'Embed Media',
        inputMsg : 'Paste Embed Code Here: '
    }
});

3.ckeditor/plugins/youtube/lang/ja.js を作成

CKEDITOR.plugins.setLang('mediaembed', 'ja',
{
    mediaembed :{
        title : '動画タグ',
        button : '動画タグ',
        inputMsg : '動画の埋め込みコードを貼り付けてください'
    }
});

これで、日本語化できました。。。