• mysql2json.classでわずか3分でmysqlをjsonに変換そして保存！
• CentOSからWordPressのインストール
• isset() は複数の引数が入れられる
• 全国対応のテーブル設計
• Cakephpで会員制サイト サイトの機能設計
• Cakephp入門第2弾始動！！Cakephpで会員制掲示板を作ってみよう！
• 半角と全角の混じる文字列から文字化けせずに切り取る
• .htaccessでPCサイトとスマートフォンサイト切り替え
• jQuerymobile×WordPressでスマートフォンテーマを作ろう！
• jQuery Mobile ThemeRollerを使ってスマートフォンオリジナルテーマを作ろう！

mysql2json.classでわずか3分でmysqlをjsonに変換そして保存！

PHP×Mysql×jsonそして保存をわずか3分で！

Ajaxベースで検索を行うならjson。変換して、保存してしまえばデータベースへのクエリが減り、高速サクサクサイトが作れてしまいます。
そんなわけでPHP×Mysql×jsonそして保存をわずか3分で実装したいと思います。

mysql2json.class

PHPからmysqlのデータをjson化するわけですが、とっても便利なクラスがあるので紹介します。

mysql2json.classを使ってMysqlをjsonに変換！

以下は文字コードがutf-8であることを想定して行っています。
mysql2json.class.phpを先に呼び出し、Mysqlの接続設定を書いて、json変換したい内容をSQLで記述、JSONに変換を行うのが一連の流れです。

include("mysql2json.class.php");

//データベース関係 ここではutf-8 を想定
mb_language('Japanese');
ini_set('mbstring.detect_order', 'auto');
ini_set('mbstring.http_input'  , 'auto');
ini_set('mbstring.http_output' , 'pass');
ini_set('mbstring.internal_encoding', 'UTF-8');
ini_set('mbstring.script_encoding'  , 'UTF-8');
ini_set('mbstring.substitute_character', 'none');
mb_regex_encoding('UTF-8');
//MySQL接続設定
define("DBHOST", "localhost");
define("DBNAME", "");
define("DBUSER", "");
define("DBPASS", "");

//接続
$conn = mysql_connect(DBHOST, DBUSER, DBPASS) or die();
mysql_select_db(DBNAME, $conn);
mysql_set_charset('utf8');

//SQL実行
$num = 0;
$sql = "SELECT * FROM table";
$result = mysql_query($sql, $conn);
$num = mysql_affected_rows();

// JSONに変換
$objJSON = new mysql2json();

JSONデータをテキストとして保存する

$objJSON = new mysql2json();　と記述してあげると、jsonとして呼び出すには

$string = trim($objJSON->getJSON($result,$num));
echo $string; 

でもせっかくJSON作ったので、これを保存してあげます。あらかじめJSONがあれば、Mysqlに接続すらしないで、JSONからデータの呼び出しが出来ますもんね。AJAXベースで検索システムを作る時には最適です。
$objJSON = new mysql2json();　からの続きです。

$filepath = "json.txt"; // json保存用。パーミッションは666
$string = trim($objJSON->getJSON($result,$num)); // 書き込みたい文字列を変数に格納
$fp = fopen($filepath, "w"); // 新規書き込みモードで開く
@fwrite( $fp, $string, strlen($string) ); // ファイルへの書き込み
fclose($fp);

CentOSからWordPressのインストール

CentOSからWordpressのインストール

サーバー内にドメインを設定したらFTPでWordpressをアップロードすればよいのだけれど、何だかんだ面倒なのでCentOSのSSHコマンドからWordpressをインストールしたのでメモしておきます。

ドメインの設定

お名前.comにてドメインを取得しておきました。以下動作はドメインの設定が完了していることを前提に記事を書いていきます。

DNSレコード参考

以下コマンドから実行

SSHログインして、以下コマンドを順番通り打ってください。

バーチャルホスト追加

バーチャルホストはあらかじめバーチャルホストの許可の設定をしておく必要があります。

ユーザーの追加

ユーザーにパスワード

追加したユーザーのディレクトリパーミッション変更

これやっておかないと、バーチャルサーバー追加しても見れなかったりする

追加したユーザーのディレクトリにpublic_html追加

public_htmlフォルダの所有者を変更。

これやっておかないと、FTPからフォルダの操作ができない

最新版Wordpressの日本語版ダウンロード

ダウンロードしたwordpressのzipファイルをpublic_htmlフォルダに移動

現在地をpublic_htmlに

wordpressを解凍

wordpressのフォルダのパーミッション

wordpressフォルダのパーミッションを777に。これをやらないとconfig.phpが生成されない。

Apach再起動

後はブラウザより設定

ここまで出来たら、ブラウザからデータベースやデータベースのユーザーを設定し、インストールを完了させます。



wordpressのパーミッションが777でないと・・・このようなエラーが出る

wordpressのパーミッションを元に戻す

isset() は複数の引数が入れられる

isset() は複数の引数が入れられる

if(isset($a) && isset($b) && isset($c)){
echo "It is ALL setting!"
}

issetはこんな風にカンマで区切って複数チェックすることが出来ます。

if(isset($a, $b, $c)){
echo "It is ALL setting!"
}

知らなかった～。便利ね。

全国対応のテーブル設計

全国対応のテーブル設計

さて、ではMysqlに、テーブル設計を始めていきましょうか。
ちょっとCakephpの技術的な部分からはそれてしまうかもしれませんが　全国に対応したようなサイトを作る際のテーブル設計の方法を学びたいと思います。
データベースはMysql、文字コードはutf-8generalciをご用意下さい。
なお、この記事の内容のSQLはこの記事の一番下から、Mysqlのdumpファイルがダウンロードできます。地区、都道府県などよろしければ使って下さい。

全国対応のデータベーステーブル設計

全国版に対応したようなサイトを作る際、テーブル設計は大きく３つに分けることが出来ます。

さらにここから町や番地まで分けて行くならもう一つテーブルがあるとよいでしょう。
ではMysqlにテーブルを作って行きます。

全国対応のテーブルをMysql内に作成

Cakephpのテーブルの命名規則についてはご存じですか？命名規則の通りに作っていくと後が楽ですよ。逆に命名規則に反して作ると後のModel内でけっこう面倒なことをしなければならないのです。

地区を大きく分けるテーブルについてはそれほど悩まなくて大丈夫だと思います。

地区を大きく分けるテーブル

都道府県

市や区

市や区などは、最初は最低限から始まり、後で増えていく可能性が高いので、件数が増えた時に自由に表示順位を変えられるように『sort』というフィールドも用意しました。(初期なのでデータはNULLですが。)

複数テーブル連携予定の命名規則

ちょっとおさらいなのですが、基本的な命名規則では

英単語で複数系ですが、英単語2つを組み合わせてテーブル名としたい場合はhoge_areasとしてアンダーバーデ区切り、2語目を必ず複数系にしてあげます。(テーブルが増えたときとか、よく使います)
さて、複数テーブルを連携する場合はもう一つ命名規則があります。

複数テーブルの命名規則

では、都道府県を管理するprefecturesテーブルを見てみましょう。

foreignKeyのイメージ

おまけ：ストレージエンジンはMysql5.5からInnoDBがデフォ

ENGINE(ストレージエンジン)は私は何でもInnoDB(イーノデービー)を使います。5.5からだいぶ速度が向上し、もともとInnoDBはトランザクション機能がついているが、MyISAM(マイアイサム)に比べると検索スピードが劣るから、検索を考えた場合はMyISAMを選んだほうがよい、というのがありましたがMysql5.5からはInnoDBがデフォルトのストレージエンジンになり、InnoDBの速度もだいぶ向上したので　特別理由がなければMysqlのテーブルのストレージエンジンはInnoDBをオススメします。ただし、古いMysql5.0とかを利用している場合はMysqlを使ったほうがいいっちゃいいかもしれません。そこは臨機応変にお願いします。

Mysqlのdumpファイル

都道府県を一つ一つデータを入れていくのは大変なので、地区と、都道府県、小エリア3つのテーブルのdumpファイルを用意しました。
以下のファイルをダウンロードして、phpmyadminよりインポートを行えばITかあさんと同じ全国対応のテーブルの構築は完了します。
(小エリアのareasテーブルのデータは各自追加するなり減らすなりしてください。)

Mysqlのdumpファイルインポート方法

念のためにインポート方法を動画にて解説。さくらのレンタルサーバーで行いました。
さくらのレンタルサーバーはMysqlが5.5がデフォルト。

Cakephpで会員制サイト サイトの機能設計

会員制掲示板の基本機能を決める

会員制掲示板の基本機能を決めていきましょう。
基本機能をしっかり決めることで効率のよいWEBアプリケーション開発に繋がります。

前回少し触れましたが、ITかあさんは昔けっこうあったバンドメンバー募集サイトを作りたいと思います。

サイトの基本機能

マスター管理

ユーザー

非ユーザー

非ユーザーについては新規スレッドが立てられずに閲覧と返信のみに留めるようにしましょうか

機能を元にデータベース上に必要なテーブルを考える

ではここまでの機能やカテゴリーを踏まえて必要なテーブルを考えます。
日本全国に対応したエリアテーブルがちょっとしたミソになります。

エリアを管理するテーブル設計

私は全国希望のエリアでカテゴリー分けをするようなサイトではエリアの管理だけで3つのテーブルを使うことが多いです。

・東北北海道、関東、関西などざっくりとしたブロック分け(districts)
・関東なら、さらに東京、埼玉など都道府県を分けるテーブル(prefectures)
・都道府県からさらに細かい小エリアに分けるテーブル(areas)

その他必要なテーブル

後のテーブル管理はそれほど悩むこともありません。
エリア情報を管理するテーブルと合わせると10テーブルほどで完了しますね。

・ユーザー管理テーブル(users)
・マスターログインの管理テーブル(masters)
・楽器パート管理テーブル(parts)
・カテゴリー管理テーブル(categories)
・掲示板テーブル(threads)
・掲示板に対するメッセージ返信テーブル(messages)
・サイト内お知らせテーブル(informations)

次回は全国対応のエリア分けのテーブル設計についての記事を書きたいと思います

Cakephp入門第2弾始動！！Cakephpで会員制掲示板を作ってみよう！

Cakephpで会員制サイトの基本的を学ぼう

さてCakephp入門のアクセスでITかあさんのブログは成り立っているようなものなんですがCakephp入門終了からしばらく経って、読み返してみると、自分自身も入門している状態で書き始めたために文章もひどいもんだなあ、と。
ただ、ITかあさんは一度したクソは見ない主義(表現汚い上にダメ人間)なので、改めて書き直すくらいなら、もっと質のよいCakephp入門記事を書くべきだと思い、第2弾をスタートさせたいと思います。

今回の目標

主にこの3つをやっていきたいと思います。私はCakephpに出会ってから本格的なプログラマー生活が始まったのですが 設計のコツなども踏まえてお伝え出来ればと思います。
全１０回くらいに渡って基本的なCakephpの開発フローをお伝えし、終了未定でプラグインの入れ込みなどお伝え出来ればと考えています。

ITかあさんは今回のネタでこんなの作ります

ITかあさんはかつて『かあさん』になるまでは音楽の専門学校通ってバンド組んだり、ライブハウスで歌ったりと音楽漬けな日々を送っていたのですが、そんなかあさんですので、バンドメンバー募集掲示板みたいなのをずっと作りたいと思っていて完全放置プレイだったので今回のCakephp入門第2弾始動をきっかけにそんなものを作ってみたいなと思っています。
やや大きな規模のサイトになりますので、そういった大規模サイト構築のフローをITかあさんと一緒に学んで頂ければ幸いです。

半角と全角の混じる文字列から文字化けせずに切り取る

半角と全角の混じる文字列から文字化けせずに切り取る

下記のような形だと、1バイトと2バイトが混じるため、最後の文字が文字化けしてしまうことがあります。

substr関数

$str = 'あいssえおsssかfきsくsけsこ';
echo substr($str, 0, 7);

mb_substr関数

このように第4引数に文字コードを指定してあげると、1バイトと2バイトが混じった文字列でも文字化けすることなく自在に切り取ることが出来ます。
mb_substr関数は、1バイトだろうが、マルチバイトだろうが各一文字をカウントして、指定された長さにして返すのが特徴です。
日本語を含む文字列操作はこちらを使ったほうが良さそうです。メモメモ。

$str = 'あいssえおsssかfきsくsけsこ';
echo mb_substr($str, 0, 7,'UTF-8');

.htaccessでPCサイトとスマートフォンサイト切り替え

.htaccessでスマートフォンサイトへリダイレクト

jQuerymobileでサイトを作って公開したら、スマートフォンサイトでPCサイトにアクセスしてきたら
PC版サイトのフォルダ直下に以下のコードを.htaccessとして設置します。
ここではhttp://smp.example.com/をスマートフォンサイトURLと仮定して、
スマートフォンがPCサイトへアクセスしてきた場合、スマートフォン版のURLへリダイレクトする方法です。

RewriteEngine On
RewriteCond %{REQUEST_URI} !^smp.*$
RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod|Android|BlackBerry|Windows.Phone) [NC]
#ipadはPC版に。
RewriteCond %{HTTP_USER_AGENT} !iPad [NC]
RewriteRule ^$ http:\/\/smp.example.com\/ [R=301,L]

.htaccessでスマートフォンサイトからPCサイトへの切り替えリンク

ただし、上記の場合だとスマートフォンサイトからPCサイトを閲覧したい場合も問答無用でリダイレクトされてしまうので、
PCサイトへの切り替えリンクのURLには以下のようにパラメータを付与してあげます。

viewmode=pcのパラメータを持っていた場合はリダイレクトを行わないという.htaccessの記述を加えればOKです。

RewriteEngine On
RewriteCond %{REQUEST_URI} !^smp.*$
RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod|Android|BlackBerry|Windows.Phone) [NC]
#ipadはPC版に。
RewriteCond %{HTTP_USER_AGENT} !iPad [NC]
#viewmode=pc　パラメータ持っていた場合はリダイレクトしない
RewriteCond %{HTTP_COOKIE} !viewmode=pc
RewriteCond %{QUERY_STRING} !viewmode=pc

RewriteRule ^$ http:\/\/smp.example.com\/ [R=301,L]

jQuerymobile×WordPressでスマートフォンテーマを作ろう！

jQuerymobileでWordpressテーマを作る

さて、ここまでの仕上げとしてjQuerymobile×Wordpressテーマを作ることにしましょう。今回は今までのおさらいでまだPHPのタグは入れずに静的なページ遷移を作っておきます。Wordpressのテーマタグはのちほど入れていきます。
あらかじめ作っておくページは

正確には３つ以外にも404ページや検索結果ページなどたくさんあるのですが、記事ページのレイアウトを利用することにして、ざっと作っておくことにします。
jQuerymobileの基本ファイルは前回の記事を参考にして基本ファイルを作って下さい。
以下の記事を参考にすると、jQuerymobileのCSSやJavascript、オリジナルカラーも一緒にダウンロードすることが出来ます。

まずはトップページ

まずはトップの見た目から。

このレイアウトのやり方は以前のこちらの記事を参考にして下さい。

ソースコード

トップページのソースコードです。

<!DOCTYPE html>
  <html>
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQueryMobileでスマートフォンサイトを作ろう</title>
  
  <!--jQueryMobileThemeRollerで作ったオリジナルカラー-->
  <link rel="stylesheet" href="themes/kaasan.min.css" />
  
  <!--jQueryMobileのCSS-->
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile.structure-1.0.1.min.css" />
  
  <!--jquery-->
  <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  
  <!--戻るボタンの設置-->
  <script>
  $(document).bind("mobileinit", function() {
  $.mobile.page.prototype.options.addBackBtn = true;
  });
  </script>
  
<!--jquery.mobileのJavascript-->
  <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
  
  <!--さらに独自でCSSを記入したい場合は一番最後に-->
  <link rel="stylesheet" href="./themes/common.css" />
  </head>
  <body>
  
  <!--div data-role="page"で表示部分全体を囲う-->
  <div data-role="page" data-theme="a">
  <header data-role="header" data-position="inline"><h1>ITかあさん</h1>
  </header>
<!--div data-role="content" コンテンツ部分ここから　sectionタグでもよい。-->
  <div data-role="content" data-theme="a">
  
  <!--リストっぽい表示にさせたい-->
  <ul data-role="listview"> 　
  <li>
  <a href="archives.html">
  <img src="./images/cakephp.gif" alt="cakephp" width="50" height="50"class="ui-li-ico"/>
  CakePHP入門<br>
  <span class="small">Cakephp入門を世界で一番優しく　余計なくらい丁寧に解説するをモットーに、現在執筆中</span>
  <span class="ui-li-count">3</span>
  </a>
  </li>
  <li>
  <a href="archives.html">
  <img src="./images/jquery.gif" alt="cakephp" width="50" height="50"class="ui-li-ico"/>
  jQuery<br>
  <span class="small">jQueryがとにかく好きです。そんな私のJquery雑記帳です。 </span>
  <span class="ui-li-count">3</span>
  </a>
  </li>
  <li>
  <a href="archives.html">
  <img src="./images/php.gif" alt="cakephp" width="50" height="50"class="ui-li-ico"/>
  PHP雑記帳<br>
  <span class="small">Cakephp入門を世界で一番優しく　余計なくらい丁寧に解説するをモットーに、現在執筆中</span>
  <span class="ui-li-count">3</span>
  </a>
  </li>
  <li>
  <a href="archives.html">
  <img src="./images/html.gif" alt="cakephp" width="50" height="50"class="ui-li-ico"/>
  WEBテクニック<br>
  <span class="small">WEBデザイナーとしての顔も持つITかあさんのコーディングを中心としたテクニックを公開します。</span>
  <span class="ui-li-count">3</span>
  </a>
  </li>
  </ul>
  </div>
  
<footer data-role="footer" data-position="inline">
<!--ui-gridで、boxに分割。今回は２分割に-->
  <div class="ui-grid-a">
  <div class="ui-block-a">
  <form method="get" action="act.html"> 
  <input type="search" name="search" id="search-basic" value="" /> 
  </form>
</div>
<div class="ui-block-b"><a title="ITかあさん" href="http://www.kaasan.info">ITかあさん</a></div>
</div> 
</footer>
  </div>
  </body>
  </html>

カテゴリー内記事一覧

カテゴリー内に記事を一覧で表示するページです。シンプルなリスト表示になっている他は、ヘッダー内にホームに戻るボタンが設置されている点です。

ソースコード

<!DOCTYPE html>
  <html>
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQueryMobileでスマートフォンサイトを作ろう</title>
  <link rel="stylesheet" href="themes/kaasan.min.css" />
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile.structure-1.0.1.min.css" />
  <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  <script>
  $(document).bind("mobileinit", function() {
  $.mobile.page.prototype.options.addBackBtn = true;
  });
  </script>
  <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
  <link rel="stylesheet" href="./themes/common.css" />
  </head>
  <body>
  
  <div data-role="page" data-theme="a">
  <header data-role="header" data-position="inline"><h1>jQueryMobileでスマートフォンサイトを作ろう</h1>
  <!--ヘッダー内にhomeボタンを追加する-->  <a href="index.html" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
  </header>
<div data-role="content" data-theme="a">
  <!--シンプルなリスト表示-->
  <ul data-role="listview">
  <li><a href="single.html">jQueryMobileのダウンロードと設置</a></li>
  <li><a href="single.html">jQueryMobile　リンク、ページ遷移について</a></li>
  <li><a href="single.html">jQueryMobile　スマートフォンっぽいリスト表示</a></li>
  <li><a href="single.html">jQueryMobile　リスト表示をアレンジ</a></li>
  <li><a href="single.html">jQueryMobile　ナビゲーション表示</a></li>
  <li><a href="single.html">jQueryMobile　ラジオボタン、チェックボックス</a></li>
  <li><a href="single.html">jQueryMobile　toggle</a></li>
  <li><a href="single.html">jQuerymobile カラムのレイアウト調整</a></li>
  <li><a href="single.html">jQueryMobile にオリジナルjavascriptを記述する方法</a></li>
  <li><a href="single.html">Google アナリティクスをjQuerymobile内で使う</a></li>
<li><a href="single.html">jQuery Mobile ThemeRollerを使ってスマートフォンオリジナルテーマを作ろう！</a></li>
</ul>
  </div>
  
  <footer data-role="footer" data-position="inline">
<div class="ui-grid-a">
  <div class="ui-block-a">
  <form method="get" action="act.html"> 
  <input type="search" name="search" id="search-basic" value="" /> 
  </form>
  </div>
<div class="ui-block-b"><a title="ITかあさん" href="http://www.kaasan.info">ITかあさん</a></div>
  </div> 
</footer>
    
  </div>
  </body>
  </html>

記事ページ

記事ページは特に開設する部分がないので飛ばします。

ダウンロード

今回の記事の内容をzipファイルに固めました。必要に応じて利用してください。

jQuery Mobile ThemeRollerを使ってスマートフォンオリジナルテーマを作ろう！

jQuery Mobile ThemeRollerを使ってオリジナルテーマを作ろう！

jQuerymobileを使って基本的なレイアウトの方法が分かったところで自分でテーマを自分で作っていきましょう。
そこで便利なのがjQuery Mobile ThemeRoller！
ヘッダーやフッター、ボタンなどのアイテムのカラーやフォントを自由に変更することが出来ます。これでぐっとデザインの時間短縮が出来ることでしょう。
自分で作ったテーマはjQuery Mobileの基本ファイルが全てパッケージ化されてダウンロードすることが出来、すぐに動かすことが出来ます！ぜひみなさんも試してみてください。