Posts tagged link
ブログにコードを表示するときに便利な dp.SyntaxHighlighter
4今までのデザインでは pre タグ or code タグで PHP などのコードを表示していましたが、今回のサーバ移転&デザイン変更を機にコードの表示に SyntaxHighlighter を使用してみました。
syntaxhighlighter – Google Code
特徴
- 多言語対応のシンタックスハイライト
- 行番号を付加
- クリックするだけでクリップボードへのコピーが可能(IEのみ)
- 別ウィンドウでソースを表示可能
- コードの印刷が可能
- JavaScriptオフの状態では、テキストエリアにてコードが表示される
WordPress テーマを作成する(2)
1前回は style.css と index.php だけを作成して最低限のブログを表示させました。なぜこれだけのファイルで表示ができるかというと選択しているテーマに必要なファイルがない場合は wp-content/thmems/default 内のファイルを使用するためです。
今回はヘッダファイルとフッタファイルを作成します。
ヘッダファイル
テーマディレクトリに header.php を作成し下記のような内容にしました。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <title><?php bloginfo('name'); ?> <?php wp_title(); ?></title> <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats --> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <?php wp_head(); ?> </head> <body> <div id="page"> <div id="header"> <h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1> <div class="description"><?php bloginfo('description'); ?></div> </div>
ゼロから書くのは大変なので default/header.php をコピーして必要最低限のみ残してみました。
フッタファイルの作成
ヘッダ同様に footer.php ファイルを作成し、下記のようにしました。
<div id="footer"> <?php bloginfo('name'); ?> Powered by <a href="http://wordpress.org/">WordPress</a><br /> <a href="<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a> and <a href="<?php bloginfo('comments_rss2_url'); ?>">Comments (RSS)</a>. </div> </div> <?php wp_footer(); ?> </body> </html>
ヘッダとフッタのみのブログができました
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 で画像のアップロードができます。
CakePHP HTML ヘルパーで出力されるタグを変更する方法
2ヘルパーで出力されるタグを変更する方法です。
やりたいこと
ビューで
< ?php echo $html->link('Love CakePHP', 'http://www.cakephp.org'); ?>
と書くと
<div class="link"><a href="http://www.cakephp.org" >Love CakePHP</a></div>
と div タグで囲んで表示するようにしたい。
概要
app/config 内に変更したいタグを定義してヘルパーの親クラス(AppHelper) で定義したタグを読み込むという方法です。
CakePHP1.1 と 1.2 で少し方法が違います。
CakePHP1.1
app/config に tags.ini.php というファイルを作成しここにタグを定義すると自動的に反映されます。
app/config/tags.ini.php
link = <div class="link"><a href="%s" %s>%s</a></div>
CakePHP1.2
app/config/tags.php
< ?php $tags = array( 'link' => '<div class="link"><a href="%s" %s>%s</a></div>' ); ?>
app/app_helper.php
< ?php class AppHelper extends Helper { function __construct() { parent::__construct(); $this->loadConfig(); } } ?>
CakePHP 1.2 の AppHelper::loadConfig は以下のようになっていてデフォルトでは app/config/tags.php を読み込み $this->tags にマージします。
function loadConfig($name = 'tags') { if (file_exists(APP . 'config' . DS . $name .'.php')) { require(APP . 'config' . DS . $name .'.php'); if (isset($tags)) { $this->tags = array_merge($this->tags, $tags); } } return $this->tags; }
AppHelper のコンストラクタで
$this->loadConfig("hoge.php");
とすれば hoge.php のように任意のファイルを読み込んでマージすることができます。
HTML ヘルパーが使用するタグは cake/libs/view/helpers/html.php で $tags として定義されています。
この中のフォーム関連のタグは Form ヘルパーでも使用していますので、上記の方法で Formヘルパーで使用するタグも変更できます。
CakePHP JQuery ヘルパー
3JQuery helper for CakePHP ( PQuery port ) at NGCoders
CakePHP から JQuery を簡単に使うことができます。
正確には PQuery ヘルパーかもしれません。PQuery は JQuery を PHP から簡単に使用するライブラリで PQuery ヘルパーと同じ開発者が開発しています。
参考:PQuery – PHP and JQuery at NGCoders
インストール
JQuery helper for CakePHP ( PQuery port ) at NGCoders から JQuery ヘルパーをダウンロードし、解凍した pquery.php を /app/views/helpers にコピーします。
そのほかに jquery.js ファイルも必要になります。こちらもダウンロードして /app/webroot/js にコピーします。
コントローラ
Pquery ヘルパーと Javascritp ヘルパーを使用します
var $helpers = array('Pquery', 'Javascript');
ビュー
jquery.js の読み込み
<?php echo $javascript->link('jquery.js'); ?>
使用例
トグルボタン
<div id='msg'>Message...</div> <?php echo $pquery->link_to_function('toggle', $pquery->toggle('#msg'));?>
フォームで送信された内容により HTML を更新
入力したテキストを /controller/action/ に GET で送信し、id=idtoupdate に受け取った HTML を表示する
<?php echo $pquery->form_remote_tag(array('url'=>'/controller/action/','update'=>'#idtoupdate'));?> <input type='text' name='field' /> <input type='submit' /> <div id='idtoupdate'></div>
pquery.php を見ると色々なメソッドがあります。使い方はソースを見ればすぐに分かると思います。
WordPress の Simple Tagging プラグインで表示する関連エントリのはてブ数を表示する方法
1このブログは Simple Tagging というプラグインを使用して各エントリにタグをつけています。このプラグインを使用するとタグから各エントリの関連エントリを自動的に表示することができます。詳しくは下記エントリをご覧ください。
WordPress でタグを使えるようにしてみた
今回はこの関連エントリのはてなブックマーク数を表示するようにする方法です。
こんなイメージです。
関連エントリを表示するタグ
<?php STP_RelatedPosts(); ?>
この STP_RelatedPosts 関数の第1引数は表示フォーマットを指定するので、そこにはてブ数を表示するようなフォーマットを指定します。
<?php STP_RelatedPosts('<li><a href="%permalink%" title="%title% (%date%)">%title%</a> <a href="http://b.hatena.ne.jp/entry/%permalink%"><img src="http://b.hatena.ne.jp/entry/image/%permalink%" alt="" /></a>'); ?>
これで関連エントリにはてブ数が表示されるようになりました。