Posts tagged JavaScript

markItUp! を CakePHP で使用するヘルパー

0

jQuery を使用したブラウザで使用できる高機能マークアップエディタ markItUp! で紹介した markItUP を CakePHP で使用するヘルパーが Bakery に紹介されていました。
markItUp! jQuery universal markup editor Helper | The Bakery, Everything CakePHP : Articles

元の記事のままやってみたのですが一部うまく動作しなかった部分がありましたので、実際に私がやった手順を紹介します。
(続きを読む…)

jQuery を使用したブラウザで使用できる高機能マークアップエディタ markItUp!

1

jQuery を使用したブラウザで使用できる高機能なマークアップエディタです。
markItUp! Universal Markup Editor

まずはデモでどのようなエディタができるかを見てみるのが早いかと思います。
HTML
Wiki 記法
Mac OS 風
(続きを読む…)

jQuery で属性値を変更するには set ではなく attr メソッド

0

jQuery で属性値を変更する方法を Google で検索すると

$('#hoge').set('href', 'http://www.syuhari.jp/');

というやり方が結構ヒットするのですが、jQuery1.2.x では

$('#hoge').attr('href', 'http://www.syuhari.jp/');

のように attr メソッドを使用します。

参考:Attributes/attr – jQuery JavaScript Library

WordPress の管理画面で jQuery を使用する場合の注意点

1

WordPress の管理画面で使用するプラグインを作成しているのですが、jQuery を使用するときの注意点です。

jQuery は prototype.js などの $ を使用するライブラリと同時に使用できるように設計されています。jQuery にはprototype.js で定義した $ を上書きしないようにする方法があります。

jQuery.noConflict();

を jquery.js ファイルの一番最後に書き加えることにより $ を上書きしないように元に戻します。
(続きを読む…)

WordPress を高速化する5つの方法

17

WordPress を高速化する5つの方法です。

  1. テーマの効率化
  2. PHP の高速化
  3. ページキャッシュプラグインの使用
  4. MySQL クエリキャッシュ
  5. MySQL テーブル最適化

(続きを読む…)

WordPress API フックの使い方

1

API フックとは

プラグインやテーマの動作を WordPress 本体に連動させることができます。WordPress 本体に修正を加えなくてもカスタマイズできます。

アクションとフィルタ

API フックにはアクションとフィルタがあります。アクションは WordPress で発生するイベントによって実行されます。イベントは投稿やテンプレートの変更などユーザが行う行動です。フィルタはテーマなどで出力するテキストデータを変更するものです。
(続きを読む…)

ブログにコードを表示するときに便利な dp.SyntaxHighlighter

3

今までのデザインでは pre タグ or code タグで PHP などのコードを表示していましたが、今回のサーバ移転&デザイン変更を機にコードの表示に SyntaxHighlighter を使用してみました。

syntaxhighlighter – Google Code

特徴

  • 多言語対応のシンタックスハイライト
  • 行番号を付加
  • クリックするだけでクリップボードへのコピーが可能(IEのみ)
  • 別ウィンドウでソースを表示可能
  • コードの印刷が可能
  • JavaScriptオフの状態では、テキストエリアにてコードが表示される

(続きを読む…)

QRコード生成ツールを作りました

2

ちょっと仕事で QR コードをいじる機会があったのでせっかくなので QR コードを生成するツールを作ってみました。

QRコード無料作成ツール – QRcodeMaker

3通りの方法で QR コードを生成できます。

  • URLを入力して HTMLタグを生成する
  • img タグに引数を与えて生成する
  • JavaScript をページに設置して生成する

最初の2つはよくあるけど、最後のJavaScript を貼り付けてそのページの URL の QR コードを生成するのは見たことがないのでよいかと。
共通のテンプレートを使用していてページ毎にそれぞれの URL の QR コードを表示したい場合などに便利かと思います。(需要があるか分かりませんが。。。)

実際にこのエントリに JavaScript を貼り付けてみました。下の QR コードがそれです。

よろしければ使ってみてください。

CakePHP Ajax のフォームを作成する

5

今さらなのですが CakePHP1.1 で Ajax のフォームを作成するというのをやったのでメモしておきます。

Ajax , Javascript ヘルパーを使用できるようにする

コントローラで Ajax, Javascritp ヘルパーを使用できるようにする。
var $helpers = array('Ajax', 'Javascript');

prototype.js を読み込む

webroot/js に prototype.js を配置し、ビューで読み込みます。
<?php echo $javascript->link('prototype'); ?>

ビューでフォームを作成する

今回は submit ボタンを押した後、更新中には submit ボタンを消して変わりに「更新中」というメッセージを表示し、更新終了後にメッセージをボタンの下の id=ajax_message に表示するようにしました。

<?php
$options = array(
    "update" => "ajax_message",
    "loading" => "Element.hide('ajax_button'); Element.show('ajax_loading');",
    "complete" => "Element.show('ajax_button'); Element.hide('ajax_loading');",
    );
echo $ajax->form("/controller/action/", "post", $options);
?>
<?php echo $html->input('Model/Field', array('type'=>'text')); ?><br>
<input type="submit" id="ajax_button">
<div id="ajax_loading" style="display:none;">更新中...</div>
<div id="ajax_message"></div>

$ajax->form の $options の
“update” で更新するメッセージ領域を指定し、
“loading”でアップロード中の動き、
“complete” で処理終了後の動き
を指定しています。

コントローラに Ajax で処理するアクションを作成

function action() {
    $this->layout = 'ajax';
    /* $this->data にフォームの内容が渡るので必要な処理を書く */
    $this->Model->id = $this->data['Model']['id'];
    $this->Model->saveField("Field", $this->data['Model']['Field'], true);
}

$this->layout で ‘ajax’ を指定して余計なヘッダ、フッタが出ないようにします。

Ajax で出力するビューを作成する

上のコントローラのアクションで出力するビューを作成します。
上の例では saveField でフォームから送られてきたデータを使用して更新処理しています。その結果によってメッセージを送信します。

<?php
if($msg=$error->messageFor('Model/Field')) {
    echo $msg;
} else {
    echo "更新しました";
}
?>

CakePHP jQuery を使用した Ajax ファイルアップロード

6

下記ページを参考にさせていただきました。
“jQueryを使ったAjaxファイルアップロード” フォーラム – CakePHP Users in Japan
David Golding Design Blog -

上記ページでは jQuery を使用してテキストファイルをアップロードしてテキストの内容を表示するというものですが、画像をアップロードしてアップロードした画像をフォームの下に Ajax を利用して表示するというのをやってみました。

jQuery 使用準備

jquery.js と jquery.form.js を app/webroot/js/ 以下に配置します。
アップロードするビューで上記 JavaScript ファイルを読み込むため下記コードをビューに追加します。
<?php echo $javascript->link(array('jquery.js','jquery.form.js')); ?>

ビューにアップロードするフォームを作成する

今回は users コントローラの form アクションでフォームを表示します。Ajax の処理を行うのは users コントローラの upload アクションです。
views/users/form.ctp

<h1>upload test</h1>
<?php echo $form->create('User',array('name'=>'uploadForm','id'=>'uploadForm','type'=>'file'));?>
<?php echo $form->input('upload_file',array('label'=>'Upload Text File ','type'=>'file'));?>
<?php echo $form->button('アップロード',array('onClick'=>'$('#uploadForm').ajaxSubmit({target: '#uploadFile',url: '/users/upload'}); return false;'));?>
</form>
<div id="uploadFile"></div>

コントローラの処理

views/users/form.ctp から「アップロード」ボタンを押すと users/upload アクションの $this->data にアップロードファイルの情報が入ってきます。ここでは mime タイプによって JPEG ファイルのみをアップロードできるようにしています。アップロード後に views/users/upload.ctp を出力します。

function upload() {
    if (!$this->data['User']['upload_file']) {
        $this->set('error','アップロードするファイルを選択してください');
	$this->render('upload','ajax');
    } else {
	if ($this->data['User']['upload_file']['type'] != 'image/jpeg') {
	    $this->set('error','アップロードできる画像は JPEG のみです');
	    $this->render('upload','ajax');
	} else {
	    $filename = '/files/'.intval(rand()).'.jpg';
	    rename($this->data['User']['upload_file']['tmp_name'], WWW_ROOT.$filename);
	    $this->set('filename', $filename);
	    $this->render('upload','ajax');
	}
    }
}

Ajax が返すビューを作成する

/users/upload で処理した結果を返すビューを作成します。今回は veiws/users/upload.ctp として作成しました。ここで img タグによりアップロードしたファイルを表示しています。

<?php if (!empty($error)): ?>
<p><?php echo $error;?></p>
<?php else: ?>
<p>Upload successful</p>
<?php echo $html->image($filename); ?>
<?php endif; ?>

以上で jQuery を使用して Ajax で画像のアップロードができます。

Go to Top