PHP」タグアーカイブ

流行りのフレームワークで作りました!「暗記の井戸クラウド」をβリリース

Javascript(jQuery)のMVCフレームワークというのか、いわゆるBackbone.jsと、アプリケーションサーバが不要なCakePHPを組み合わせた「暗記の井戸クラウド」をβリリースします。

スマホ版
タブレット版
PC版

※上記URLの最初にある「krapsiup」は、「quizpark」から来ています。お気づきになられた方もいらっしゃるかと思いますが、「park」を並べ替えると「krap」に、「quiz」を鏡面でみる(裏から眺める?)と「siup」になります

暗記の井戸シリーズの中でコード量が圧倒的に少なくなったにも関わらず、結構いろいろ拡張できそうな予感もあり、面白いと感じています。

とりあえずは、本サイトで紹介している「暗記データ例」を、PCでもスマホでも同じデータをいつでもどこでも参照できるようにしました。例えオフラインになっても最後にアクセスしたデータが残ってますので、気合を入れて暗記に集中できます。

画面は3種類あります

BOX画面、LIST画面、QUIZ画面の3種類。他に各種設定や編集画面がありますが、主なものは左記の3つです。

  • [BOX画面]メールボックスのリストような画面で、クイズ(問題)の集まりのリストです。
  • [LIST画面]メールボックスのような画面で、クイズ(問題)の集まりです。
  • [QUIZ画面]メッセージのような画面で、、クイズ(問題)の詳細です。画面の上半分にクイズ(問題)、下半分にアンサー(解答)、がそれぞれ表示されます

タイムトライアル機能を入れました

タイムトライアル機能?を入れてみました。画面の上半分をタッチ(もしくはクリック)すると機能をON/OFFできます。
※タイムトライアルの時間を変更できます。「BOX画面」下の「Settings」から「TimeTrialInterval」の数字を変更します。単位は秒数です(初期値は10)

「QUIZ画面」の前後移動は画面のタッチで

「QUIZ画面」の下半分の左側をタッチするとひとつ前の問題の「QUIZ画面」に移動します。右半分をタッチするとひとつ後の問題の「QUIZ画面」に移動します

※前後への移動でなく任意の問題の「QUIZ画面」に移動したい場合には、一旦LIST画面に戻ってから問題を選択します

関連する記事・ページ

暗記データ例 | 暗記の井戸HTML5
あなた方は神です!?古いCakePHPの導入で先人の知恵を拝借

お世話になったリンク

[CakePHP] JSON出力時にstring型をint型に戻す | XPages、ロータスノーツ・ドミノのモバイル・WEBアプリの開発・相談ならKTrick LLC.
AJAX ? CakePHP Cookbook v1.3 documentation
CakePHPでビューやレイアウトを使わない方法。 | Wataame Frog
Cakephp 1.3系でBackbone.jsの生成したjsonを受け取る。 – Qiita [キータ]

以上です。

あなた方は神です!?古いCakePHPの導入で先人の知恵を拝借

現在開発中のシステムではDBアクセスにCakephpを使っています。最新版で開発したものを、レンタルサーバの環境に合わせて調整する必要があり、その際に苦労したことを書いてみたいと思います。個人と組織。そのいづれがその能力を発揮できるのか。システム開発で参考になるネットの情報は個人から発信された情報が殆どだと思います。この記事がその一助になればと思います。

「Cakephp」とは

「Cakephp」とは、小・中規模WEBアプリケーションでは大きなシェアを占めるPHPのフレームワークのひとつです。サーバ(DBへのアクセスが主体)とのアクセスモジュールとしてみると、生PHPで書くのとは格段に違う生産性と読み易さが得られますし、単体でもMVCが構築できる秀逸なオープンソースです。

現在利用している「HostGator」などの格安レンタルサーバでもPHPがデフォルトで導入されています。今ご覧になっている本ブログのCMSであるWordPress自体がまさにPHPで書かれていて、MySQL仕様のDBともPHPでアクセスします。

生のPHPで書くシステムを企業やら行政やら金融やらで使えるようにする場合、コード量は現在の10倍以上になるでしょう。いろいろなケースに想定しないといけないからです。生PHPで簡単に書いたコードは「裸でジャングルに入るようなもの」なんでしょうね。

それに比べるとCakephpなどのフレームワークでは、「裸で」に比べるとかなり改善されるようです。いろいろ例外的な状況への対処が簡単な仕組みにカプセル化されているとのこと。すばらしいですね。これまで一生懸命条件分岐のコードを書いていたのは「何だったんだろう!あの時間を返してくれ!」と思わせるものがあります。

こうしてみるとメリットばかりのように見えますが、そうでもありません。学習のためのコストが掛かったりします。そしてもうひとつ重要なのがレンタルサーバなど自分で自由に環境構築できない場所での扱いです。例えば「HostGator」の場合PHPの版数がちょっと古いんです。古いのは安定につながるのでそれはそれで仕方ありませんが、こうした新しいものを取り入れるときにちょっとした障壁になりえます。

「HostGator」でCakePHP2.xxが使えない

「HostGator」がサポートするPHPの現在の版数は5.2.17です。CakePHP2.xxのサポート版数より低いです。フレームワークによってはベースとなるシステムの版数が低くても使えるものが多いんですけどね。CakePHPは違いました。受け付けてくれません

で、結局開発につかったCakePHP2.xxではなくCakePHP1.xxを導入せざるを得なくなりました。それでもJavaサーブレットやStrutsに比べるとかなりましです。Tomcat6などのアプリケーションサーバ環境自体を用意する必要がないからです。

格安レンタルサーバでアプリケーションサーバ環境をデフォルトで用意してくれるところはあるのでしょうかね。

新しい版から古い版へのフレームワークのマイグレーションは大変?

古い版のものには、リリースされて時間が経つ分皆が使っているので、情報が揃っています。ただ、新しい版のものでできたことを古い版でやろうとするとちょっと敷居が高いです。

もちろん、いきなりレンタルサーバにUPLOADしてコードをいじることはありません。まずはローカルな環境で古いCakePHP1.xxを入れて、それから本番環境にマイグレーションします。

ただし、ローカルに構築したそうした環境で動作するからといってレンタルサーバにそれをそのままコピペしても同じように動くとは限りません。逆に「まったく同じに動くことはないのだ」と思ったほうが幸せになれます

日本語のシステムなら「database.php」の「utf8」設定を有効に

これも「まったく同じに動くことはないのだ」のひとつですが、「database.php」の「utf8」設定を、ローカルでは外して動作していました。このときの「動作していました」の意味はキチンと日本語が見れましたの意味です。レンタルサーバでは日本語がみな「????????」と表記されるのです。まず、DBの中身をいろいろ調べ、次にローカルとの間でコードの違いを調べました。これに数時間も費やして、結局「utf8」を陽に設定すれば即解決しました。

JSON用のserialize機能がCakePHP1.xxにはない!

開発中のシステムは、CakePHPが動くサーバとAjaxで通信するAjaxアプリケーションから構成されます。こうした場合情報のやりとりにはJSONを使うのが定石のようですので、CakePHP2.xxでもそうした実装をしていました。たった2行書くだけでJSONをserialize出力できる便利な機能があるんですね。

ところがこの機能がCakePHP1.xxにはありません。当然ローカル環境でも遭遇しました。そこで、「お世話になったリンク」にもあるように、(CakePHP2.xxでは必要なかった)Viewの定義と、デフォルトLayoutsをバイパスしてあげることの2点で問題が解決しました。

Controller内でArray_map関数を使うとエラーになってしまう

次に、CakePHPのController定義で、レスポンスオブジェクトにある余計な情報を削除するため、Array_map関数をつかったところ、レンタルサーバでエラーになりました。ローカル環境では全く問題なかったのに。不思議です。

function index(){

    $this->layout = "";
    $shares = $this->Share->find('all');
    $shares = array_map(funtion($e){
        return $e['Share'];
    },$shares);
    $this->set('datas', $shares);
}

結局、次のように無名関数の定義を止めたら通りました。

function index(){

    function res($e){return $e['Share'];}// only Hostgator does this way!!!

    $this->layout = "";
    $shares = $this->Share->find('all');
    $shares = array_map("res",$shares);
    $this->set('datas', $shares);
}

極めつけはこれ。こんな情報どこにもなかった。あなたは神です

以上はCakePHPがDBにアクセスして一覧を出力するところに関連する部分になります。

ここからは通信方向が逆でAjaxアプリからCakePHPへのXmlHttpRequstのPUTリクエストに関するものです。POSTでも同じ方向のやりとりが発生します。URL情報と並行してテキストやストリームなどの情報が渡されます。

CakePHPのController定義内でこの情報にアクセスするには「this.requst」というオブジェクトを使います。でも下記リンクにもあるようにこれがあろうことか「null(空の意味)」になってしまいお手上げ状態です。いろいろ調べても本来渡されてくるべき情報がないので途方にくれていたところ、本当に凄い裏技を発見、というか、凄い裏技を発見した方がいました。こんな発見必要ないひとには本当に何でもないことですが、開発している最中にこれに出会ったときには「神がいらした」と感動しました。

Cakephp 1.3系でBackbone.jsの生成したjsonを受け取る。 – Qiita [キータ]

$this->data = json_decode(file_get_contents('php://input'));

こんなコードどうやって調べたんだろう!

結構複雑でわかりにくい話ですみません

関連する記事・ページ

お世話になったリンク

[CakePHP] JSON出力時にstring型をint型に戻す | XPages、ロータスノーツ・ドミノのモバイル・WEBアプリの開発・相談ならKTrick LLC.
AJAX ? CakePHP Cookbook v1.3 documentation
CakePHPでビューやレイアウトを使わない方法。 | Wataame Frog
Cakephp 1.3系でBackbone.jsの生成したjsonを受け取る。 – Qiita [キータ]

以上です。

WordPress:ブログのURLを変更したい

ブログのURLを変更したい

WordPressの設置方法について、インストールしたURLと設置したい(訪問者に見せたい)URLを別にしたい場合があると思います。このトピックを扱った記事は結構多いのですが、ほとんどがルートURLへの設置場所変更の方法についてのもので、ルートURL以外への設置場所変更の方法がなかったので、ここに記します。ここでは「インストールしたURLと同レベルのURLに設置する」場合を説明します。

このブログ自体、最近jblogからblogに設置場所を変更しました(インストールURLは変更せずに)。マニュアルで設定したリンクなど、もしかするとjblogのままのものもあるかも知れませんがそれはそれできちんと表示できるようです。ここでは、

http://krasavkana.com/jblog:インストールURL
http://krasavkana.com/blog:設置URL

のように、設置URLをインストールURLと同レベルのところにおきたい場合の方法です。

手順は、

  1. WordPressに管理者でLOGINして、「設定」にある「サイトのアドレス (URL)」を変更する
  2. 自宅サーバやレンタルサーバにて、(ファイルマネージャなどで)設置URLのフォルダを新規作成する
  3. index.phpおよび.htaccessをインストールURLから設置URLのフォルダにコピーする
  4. 設置URLにコピーしたindex.phpを編集する
  5. パーマリンクをデフォルトから変更している場合は再設定する

以上でOKのようです。設置URLにコピーした.htaccessを変更する必要もありませんでした

WordPressに管理者でLOGINして、「設定」にある「サイトのアドレス (URL)」を変更する

(変更前)

サイトのアドレス(URL):http://krasavkana.com/jblog

(変更後)

サイトのアドレス(URL):http://krasavkana.com/blog

自宅サーバやレンタルサーバにて、設置URLのフォルダを新規作成する

ファイルマネージャなどのマニュアルを参照してください

index.phpおよび.htaccessをインストールURLから設置URLの(ファイルマネージャなどで)フォルダにコピーする

ファイルマネージャなどのマニュアルを参照してください

設置URLにコピーしたindex.phpを編集する

ファイルマネージャなどのマニュアルを参照してください。たとえば、

http://krasavkana.com/blog/index.php
<?php
/**
 * Front to the WordPress application. This file doesn't do anything, but loads
 * wp-blog-header.php which does and tells WordPress to load the theme.
 *
 * @package WordPress
 */

/**
 * Tells WordPress to load the WordPress theme and output it.
 *
 * @var bool
 */
define('WP_USE_THEMES', true);

/** Loads the WordPress Environment and Template */
require('../jblog/wp-blog-header.php');
?>

の最後の行を変更。同列のフォルダ(URL)に設置する場合はドット2つを使って相対パスを指定する必要があります

(変更前)

require('./wp-blog-header.php');

(変更後)

require('../jblog/wp-blog-header.php');

パーマリンクをデフォルトから変更している場合は再設定する

「設定」-「パーマリンク設定」

参考にしたもの

WordPress を専用ディレクトリに配置する – WordPress Codex 日本語版

c 2011 KrasavKana

H1,H2のスタイルを変更する!テーマTwentyelevenのカスタマイズ(2)

最近あまり人気がないのか、最新デフォルトテーマであるTwentyelevenに関するカスタマイズ記事が多くないように感じましたので、ここに(自分が試したことだけですが)情報を残します。

  1. ブログ名を画像にする
  2. H1,H2のスタイルを変更する

H1,H2のスタイルを変更する

このブログ自体がその実験場と化していますが、テーマTwentyelevenのH1,H2のスタイルを変えました。

変更したソースは1つ。

  1. style.cssの変更

style.cssの変更

720行目あたりに

.entry-title {
	clear: both;
	color: #222;
	font-size: 26px;
	font-weight: bold;
	line-height: 1.5em;
	padding-bottom: .3em;
	padding-top: 15px;
	padding-left: 20px;
	border-left: 15px solid #556b2f;/* customized at 20111008JST0938 refer to http://www.colordic.org/ */
	border-bottom: 1px solid #808080;/* customized at 20111008JST0938 */
}

の最後の2行を追加。もちろんほかの設定でも面白いと思います。

756行目あたりに

.entry-content h1,
.entry-content h2,
.comment-content h1,
.comment-content h2 {
	color: #000;
	font-weight: bold;
	margin: 0 0 .8125em;
	border-bottom: 3px solid #808080;/* customized at 20111008JST0938 */
}

の最後の1行を追加。実例は本ブログを見てください

お世話になったリンク

デフォルトテーマのカスタマイズ:ブログタイトルを画像にする

デフォルトテーマのカスタマイズ:見出しタグの変更

以上です。

ブログ名を画像にする!テーマTwentyelevenのカスタマイズ(1)

最近あまり人気がないのか、最新デフォルトテーマであるTwentyelevenに関するカスタマイズ記事が多くないように感じましたので、ここに(自分が試したことだけですが)情報を残します。

  1. ブログ名を画像にする
  2. H1,H2のスタイルを変更する

ブログ名を画像にする

このブログ自体がその実験場と化していますが、テーマTwentyelevenのブログ名表示を画像表示に変えました。

変更したソースは3つ。

  1. images/title.jpgの追加
  2. header.phpの変更
  3. style.cssの変更

images/title.jpgの追加

  • PS6で作成
  • サイズは386×128

header.phpの変更

73行目あたりを

<hgroup>
<h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<img class="entry-img" src="<?php echo get_template_directory_uri(); ?>/images/title.jpg" />
</a></span></h1>
<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>

に変更する

style.cssの変更

930行目あたりに

.entry-img {/* customized at 20111008JST0938 */
	max-width:  386px;
	max-height: 128px;
}

を入れる。Class指定を用いています。もちろんほかの方法でも可能だと思います。現在使っている画像のサイズを最大値として指定しています。

お世話になったリンク

デフォルトテーマのカスタマイズ:ブログタイトルを画像にする

デフォルトテーマのカスタマイズ:見出しタグの変更

以上です。