カテゴリー: 8. Web開発

FacebookのWallをblogに表示する

自分のfacebookのwallをblogに表示したい場合のプラグイン設置方法。
少し修正しようとしたらすっかりやり方を忘れていてイチから調べるハメになったので覚書です。
・Like Boxというpluginを使います。
まず、Like Boxのfacebookページにアクセス。
画面がいきなりパラメータ設定画面なので、facebookページのURLを貼り付けて、高さとか幅を指定して GetCodeボタンを押すと、iframeとFBMLのコードが表示されるのでiframeのコードをコピペして、blogに表示したい部分に貼り付けると、そこにfacebookのwallが自動連携されて表示されるようになります。
私が利用したblogはこちら→ こちょうのゆめ

左サイドバーにfacebookのブロックが表示されています。

CakePHPその後

CakePHPでのシステム開発
CAKEPHPを使って野洲高校DBを構築! これまでの流れ。
2月 Xampp と CakePHPをインストール
   DB設計を行い、22個のテーブルをmysqlで作成
   CakePHPのbakeでテーブルの関連付けを行う
   CakePHPのbakeを使ってテーブルの更新画面を作成
3月 更新画面を使って、マスター類を入力。
 さて、ここにきて、新たな問題が。
 
bakeを使って作成した更新画面は、デザイン的にも動作的にもかなり改善しないと使えない。
cakePHPの本にも、bakeで基本的な部分を作ってから それを修正していけば良いと書いてある。
ただ、php自体のスキルがあまりにも貧弱なので、「修正」作業をどのようにやったら良いのか見当もつかない。
bakeでの画面作成は 本当に簡単。 あっという間に画面が作れます。 ただし、以下のスキル不足により それ以上踏み出せないという事態に。
 不足しているスキルと知識
 
 ・phpの文法
 ・cakephpの構造
 ・SQL
 特に、cakePHPの構造については、CakePHP独自の表記方法も含めて参考書の字面は追えてもわかっていないレベル。 これでは修正作業など程遠い。
 
そこで、やはり最初からコツコツいくしかない と あっけなく方針変更に至りました。 
eclipse + PDT で まずは簡単な画面からコツコツ作っていくことにしました。 
eclipseも、数ヶ月前にテスト的に使ってみた頃から比べると かなりとっつき易く感じられるようになりました。 これも、cakephpでなんやかんやと悩んだおかげかなと思っています。
昨日、Windows7 64bit環境の私のメインマシンに Xampp と eclipse(PDT) をインストールしました。64bit環境でも一応phpのdebugも出来たので動くようです。
1歩進んで2歩さがる みたいな展開ですが、とりあえず後退していようが 向きだけは前方を見ていないとね、ということで。 頑張っていこう!
というわけで、
プログラミング未経験から始めるPHP入門というWebでの教則本に従って Eclipse上でイチから勉強しています。 とりあえず、昨日までに 条件分岐と繰り返しのところまでいきました。  やはり、すぐにデバッグできて結果がわかるのが良いですね。
eclipseのphphエディタは 自動補完機能が素晴らしくて感動的ですwwww

Yasu Database

今週末は家に引きこもって 野洲高校のDB設計をしていました。
例のCakePHPを使って作るシステムです。
野洲の公式戦結果、選手情報、ゴールシーン動画 の3つを縦横無尽に関連付けて検索できるシステムです。
細かいところでは、会場の情報、対戦相手の情報などもあります。
テーブルの数は21個にもなってしまいました。
CakePHPのScaffoldで一応データのメンテナンスが出来るところのまで作りました。
ここから、画面を作りこんでいきます。
しかし、データの投入、、というか入力が大変そうだ。 5月連休に3日ぐらいかけて一気にやろうと思います。 それまでにはきちんとしたシステムとして完成させないといけません。
コードDBもあるしなぁ。。。。。
野洲DBとコードDB。
完成して公開したら、両方ともに凄いアクセスになりそうな気がします。
?????
[覚書]
DBのテーブル作成
1.白紙にフリーハンドでテーブルの大体の構造をラクガキ
2.それにあわせてエディターでSQLのCREATE TABLE文を作成
3.phpmyadminでSQL実行→Table作成
4.DBDedignerのリバースエンジニアリング機能を使ってER図作成。
  テーブル間の関係は手で紐付けした。
DBDesignerからmysqlが接続できないトラブルあり
  こちらで回避方法を確認

mysql>> SET PASSWORD FOR ‘your id’@’your mysql host name’
  = OLD_PASSWORD(‘new your password’);

OLD_PASSWORD は OLD_PASSWORDそのものを入力する。 new your passwordは現在のpassword。
5.cake bakeでモデルとscaffoldのcontrollerを作成

CakePHP Model

Webシステム開発の記事ばかりで申し訳ありません。
さて、今日から少しずつ”開発”していきます。
まずは、モデルからです。
今回使用するテーブルは7つ。
1.コードテーブル
2.key変換テーブル
3.区分テーブル
4.拡張子テーブル
5.テンションテーブル
6.flat-sharpテーブル
7.on_bテーブル
基本は1,3,4,5,6,7を組み合わせてコードを表現します。
7つのモデルについて、CakePHP規約に則って名前を決めておきました。

次はDBの作成です。

DBの作成とテーブルの作成

それではDBを作ります。
DBの作成は、phpmyadminでボタン一つで作成できます。
今回使用するDBは chord という名前にしました。 既にutf-8化してあるので安心です。
次に、テーブルの作成です。
一番最初に、Key変換テーブルを作成しました。
テーブル名は henkans です。 CakePHP規約にテーブル名は「英語の複数形」というのがあり、henkansです。
phpmyadminでテーブルを作ることが出来ますが、今回は、SQLに慣れるため全てSQLで作っていきます。

CREATE TABLE henkans (
id UNSIGNED AUTO_INCREMENT PRIMARY KEY,
scale_bango VARCHAR(5),
scale_kigo VARCHAR(5),
key_chord VARCHAR(5),
key_bango VARCHAR(5),
chord_kigo VARCHAR(5),
henkans_memo TEXT,
created DATETIME DEFAULT NULL,
modified DATETIME DEFAULT NUULL
);

テーブルの構造は、主キーはidでAuto_Incrementです。 CakePHPの規約にそうしなさいと書いてあるので今回7つのテーブルは全てそのような構造になっています。 私の感覚では、主キーが連番というのはどうもしっくりいかないのですが、規約通りということで。
SQLはPHPmyadminで発行します。

とりあえず、テーブルひとつだけ設定完了!

mysqlクライアント起動せずorz

クライアントのmysqlを起動しようとすると次のようなエラーが出ます。

mysql: unknown variable ‘default-characterset=utf8’

あぁまたutf8ですか、そうですか。。。
今回はググッてもそれらしき記事にぶつかりません。

my.ini が悪いのか、php.ini が悪いのか、もうひとつ環境作ってみて何も弄らない状態で試してみようかな。
↑追記:素の状態でも同じエラーが出ました。
それとも、
phpmyadminはきちんと動くのでSQLはそちらでやることにして、今回のエラーは見なかったことにしようかな。。。まぁバグということで。。
でも、後々、大問題に発展しそうな気もするし。

Xampp + CakePHP : 開発を始める

Xampp + CakePHP : 開発を始める
 えっーーと、何をするのかというと、完成品のイメージは、「コードのキー変換システム」です。
 
 コードというのは音楽の和音のことですが、例えばKey=C のDmは KeyがF# に変わったら 何になるのか(答えG#m) というのを簡単に答えてくれる画面(プログラム)です。 本当はその先にもっと遠大な計画があるのですが、とりあえず最初はここまで。
 それでは、ここからは、Web開発超初心者がCakePHPと格闘して疲れ果てる経過を記録することになります。
 
 格闘する前に、事前準備として、いくつかの作業をやっておくことにします。
 
 一つ目は、DBの作成。 名前はchord。
 二つ目は、作業用のフォルダーの作成。 名前はchordにします。 あっ、これ既に前の日にやってました。
 
 というところまでで眠くなって明日へ!
 
 

Xampp : mysqlが落ちる

Xampp : mysqlが落ちる
XamppにCakePHPを入れていろいろといじっている最中にMysqlが動かなくなりました。
Xampp Control Panelで起動をかけても10秒程度で落ちてしまうのですorz
ネットで調べても同様のトラブルは無いようです。apacheが落ちるというのはたくさん事例があるんだけどなぁ。。
30分ほどいろいろ調べたり、php.ini や my.ini をデフォルトに戻したりしてみましたが変わらず。。。
仕方ないので再度最初からインストールし直そうと思って、最後に何気なくXampp Control PanelのPort-checkのボタンを押したところ、Portの状態が表示されました。
mysqlが、ナント xaio で起動されていました!!
実は、その1時間ほど前に、Xamppとの比較を見るために Xaio(Xamppの親戚みたいなもの)で一度apacheを起動していたのです。 当然のことながら、最後にxaioのstop-bacthも流したのですが、なぜかmysqldだけ落ちずつ残ったままになっていたのでした。
既にmysqldが走っているのでその上にまた走らせたというのが原因でした。
タスクマネージャでXaioのmysaldを殺したら すんなりうまくいきました。
まぁレアケースですが、気がついて良かった。。。。疲れた。。

CakePHPインストール

CakePHPインストール
ようやく本尊までたどりつきました。
CakePHP公式に行ってCakePHPをダウンロードしてきましょう。
私は、Ver.1.2.6がStableの最新版だったのでそれをダウンロードしました。
(1)Xamppへの組み込み
zipでダウンロードして早速適当な場所に解凍します。
解凍したフォルダーの名前は「cakephp-cakephp1x-ef18ab2」となっていますが、それを「chord」という名前に変更します(この名前はなんでも良い)。(注:Ver1.2.5では、解凍したフォルダーの2番目の階層が該当しました、Verによって違うみたいですね)
そして、cakeフォルダーを丸ごとコピーして、Xamppのhtdocsのフォルダーに貼り付けます。要はXampp上のhttpのドキュメントルート上にそのままcakeを入れてしまいます。 本番環境ではあまりよろしくないのですが、開発環境だから まぁいいか! というノリです。 きちんとやりたい方は、
貼り付け先(xampphtdocsにcakeというフォルダーを作っておくこと)
・・xampphtdocscake
貼り付けた結果は、こんな構成になっているはずです。
・・xampphtdocscakechord
                    app
                    cake
                    vendors
(2)pathの設定
   マイコンピュータ→詳細設定→環境変数 
   
   環境変数のwindowにて ユーザ環境変数のpathを追加する。
   
   c:xampp にxamppをインストールした場合の例は、
   
   c:xamppphp;c:xamppmysqlbin;C:xampphtdocscakechordcakeconsole;C:xampphtdocscakechord
一応これで、CakePHPが使えるようになった。。。ハズ。。。

XAMPP mysqlのutf-8化

mysqlのutf-8化
——————————–
とりあえず環境は以下の通り、
OS WindowsXP ServicePack3
Memory 2GB
Xampp 1.7.3
PHP 5.3.1
mysql 5.1.41
———————————
昨日、phpのutf-8化をやりましたが、今日はDatabaseのmysqlの文字コードをutf-8に変更します。
この作業をやっておかないと後々大変面倒なことになります。
デフォルトの文字コードがlatain1ナントカというものに設定されているので、作るDB、作るテーブルが全てその文字コードになってしまいます。
さて、やりかたはいつものようにネット依存で。 これも非常にたくさんの記事がヒットします。
今回はgoogleで「Xampp mysql utf-8 1.7」という文字列で検索。
じぶたれ航路さんの記事を参考に以下を実施しました。
・私がインストールしたXampp Ver1.7.3 ではこの記事に記載の方法でOKとなります(たぶん。。。) ただし、XamppのVersionによって、いろいろとやり方が異なるようですのでご注意ください。
[Xampp Versionによる違い]
 
・Xampp Ver1.7.1と1.7.2は少しややこしそうです。いろいろな記事を読んでみると、my.ini を修正した後 my.cnf に名前を変更するようなことが書いてありました(記事によって様々なやり方で問題をクリアしていました)。1.7.1,1.7.2の方は最新版をインストールし直した方が良いと思います。
  
・Xampp 1.7.0以前の場合は、my.ini ではなくて my.cnf が設定ファイルなのですが、cnfという拡張子がwindowsの「短縮ダイヤル」と同じで、デフォルトのWindows folderの設定だと拡張子が見えないとのことです。 これも、phpの古いVersionを使いたい等の事情がない限りは最新版をインストールすることをお勧めします。
(1)my.iniの修正
b
   ・・xamppmysqlbinmy.ini をエディタで修正。

   
   [mysqld]の部分に次の2つのフレーズを追加
   
   [mysqld]
   ・・・
   ・・・
   
   default-character-set=utf8
   skip-character-set-client-handshake

   ・・・
修正後はいつものように utf-8 BOM無し で保存。
(2)mysqlを再起動
   Xampp Controllerからmysqlを再起動します。
   
(3)確認
   ・ブラウザで http://localhost/phpmyadmin/ にアクセス。
   ・SQL 実行画面に行き次のSQLを実行する。
   
   
   show variables like “char%”;
   

  

これでうまくいったのではないかと思います。

Xamppのインストール

今日はXamppのインストール
Xamppは、Windows環境で Appach,PHP,mysql,pearlなどのサーバ環境がお手軽に構築できてしまう優れものです。
(1)XAMPPインストールは、こちらからXamppのインストーラ(exe)をPCにダウンロードするところから始まります。
インストールのディレクトリは適当で良いと思いますが、例えばC:を指定したら、c:xamppというフォルダーが出来てそこにインストールされます。
(2)解凍が終わるとそのままDos窓が立ち上がって 質問が表示されます。 詳細はここを参考にしてください。
(3)全て終わったら、次は 文字コードUTF-8が使えるようにする設定です。
  これは、GLSLを使ったOPENGLプログラミングさんを参考にしました。
???以下参照

output_buffering = Off < - 文字コードを統一するならOff : : 途中略 : : ; PHP's built-in default is text/html default_mimetype = "text/html" ;default_charset = "iso-8859-1" default_charset = "UTF-8" <- PHPがhtmlに出力するヘッダコード : : 途中略 : : [mbstring] ; language for internal character representation. mbstring.language = Japanese <- 日本語 ; internal/script encoding. ; Some encoding cannot work as internal encoding. ; (e.g. SJIS, BIG5, ISO-2022-*) ;;;mbstring.internal_encoding = EUC-JP mbstring.internal_encoding = UTF-8 <- 内部コードをUTF-8 ; http input encoding. mbstring.http_input = auto <- 入力を自動判定 ; http output encoding. mb_output_handler must be ; registered as output buffer to function ;;;mbstring.http_output = SJIS mbstring.http_output = UTF-8 <- 出力をUTF-8 ; enable automatic encoding translation according to ; mbstring.internal_encoding setting. Input chars are ; converted to internal encoding by setting this to On. ; Note: Do _not_ use automatic encoding translation for ; portable libs/applications. mbstring.encoding_translation = On <- 内部エンコードに従って変換 ; automatic encoding detection order. ; auto means mbstring.detect_order = auto <- 判定順はオート ; substitute_character used when character cannot be converted ; one from another mbstring.substitute_character = none; <- 変換できないと時の振る舞い ; overload(replace) single byte functions by mbstring functions. ; mail(), ereg(), etc are overloaded by mb_send_mail(), mb_ereg(), ; etc. Possible values are 0,1,2,4 or combination of them. ; For example, 7 for overload everything. ; 0: No overload ; 1: Overload mail() function ; 2: Overload str*() functions ; 4: Overload ereg*() functions mbstring.func_overload = 0 <- mb系の関数オーバーロードなし

これをUTF-8 BOM無でphp.iniに上書き保存します。
(4)試しにapache起動
  デスクトップにXamp Control Panelのショートカットが出来ているはずなのでそれをダブルクリック。
  Control Panelが表示されたらApacheをスタートする。
(5)ブラウザで http://localhost/xampp を読み込み
 
 左メニューのphpinfo()をクリックしてmbstringの項目が設定どおりになっていればOK

 明日は、mysqlのUTF-8化を実施します。
しかし、インターネットの情報がなかったら一年間考えてもわからないかもしれない。 先人の皆様、有難うございます!

CakePHPの開発環境

CakePHPの開発環境
開発環境の整理
OS Windows7 64bit
Webサーバ
apache
Database
mysql5.4.41
PHP 5.3.1
→ apacheとmysqlとPHPは xampp を使う。
Xamppは、apacheとmysqlとPHPをWindows上で簡単に動かすことが出来るフリーのパッケージ。
apacheもmysqlもPHPも別々にインストールして動かすことももちろん出来るが、xamppは難しい諸設定ファイルを書かなくてすむので初心者にはうってつけ。
phpフレームワーク
CakePHP
Editor
Uneditor

CakePHPでWebシステム

ただでさえ多いカテゴリーをまた増やしてしまいました。 >8.Web開発 -1. CakePHP
いままではXoopsというCMS(Contents Management System)を使ってBlogを作ってきましたが、やはり、インタラクティブなサイトを自分の思う通りに作ろうとすると 「自作」するしかありません。 
インタラクティブなサイトを自作する となると、JavaやPhpなどのProgram言語を使って作っていくことになります。
今までは、Web Programing という世界にびびってしまって手を出していなかったのですが、最近ようやく未知の世界へチャレンジする踏ん切りがつきました。
それで、どの言語を使おうかと色々と悩みましたが、最終的にrubyとphpが残り、プロバイダの利用環境を考慮してphpに決定!!
そして、「どうせやるならMVCモデルで!」ということで、phpのMVCモデルのフレームワークを調べて CakePHPを使ってみることにしました。
昔、汎用機のCOBOL言語やDOS BASICはやったことがあるのですが、それ以降はProgramingの世界から遠ざかっているので素人同然、いや、変に昔の知識があるだけにまったく何も知らない人以上にマスターするのに苦労するかもしれません。
50才を過ぎてアタマが更に固くなってきているので、新しいことを覚えるのは苦痛ですが、まぁぼちぼちとやっていくしかないです。。。 
今回、特に、如何にしてProgramingを体得するのかという点で、意識的にやってみようと思っていることがあります。
それは、
 同じprogramのソースを何度も何度も繰り返し書くこと。
とにかく手で覚えることにしようと思います。 
このカテゴリでは、CakePhpの設定なども含めて、私の備忘録的なものになると思います。
頑張れ自分!!!

Xoops移転とバージョンアップ

この週末、もうひとつの趣味サイトである こちょうのゆめ を Xoops2.0.16a-JP から Xoops Cube Legacy 2.1.7 にバージョンアップしました。バージョンアップと言うよりは、引越しを伴ったバージョンアップと言ったほうが良いかもしれません。
実施日時 2009年5月22日?24日

実施方法

DB及びXOOPSソースは新規に別の場所に作成し、データを移行。 最後にドメイン設定を変更する。

実施手順

1. 旧データが入っている 旧DB のデータを phpmyadmin を使用してエクスポート。
・SQLタイプ
・Create table は 「if not exist」を追加
・Insert は 「ignore」 を追加
・文字コードの変換はしない(EUCのまま)

2. 新しいディレクトリを作成

・trust-pathはwwwと同じレベルに新規作成したが後々うまくいかなかったので、データ領域内に後で再作成した。sakura internetはwwwと同レベルでも問題ないはずなので何かが間違っていたのだと思います。

3. Xoops Cube Legacy を新しいディレクトリにUpload

・パッケージはXoopsCubeの公式にあるものを使用したが、trust-pathの設定で手間取ったことや、protectorなど必須モジュールも入っていない状態だったので面倒な作業が必要だった。 出来れば、protectorやtrust-pathの設定も自動でやってしまうパッケージを利用したほうが良いと思います。 ホダ塾というサイトに至れりつくせりの素晴らしいパッケージがあります。 そちらを使ったら良かったと後悔しています。 ホダ塾にはXoopsデザインに関する非常にわかりやすい解説もあり素晴らしいサイトです。

2009/7/15追記  ホダ塾のxoopsは、文字コードをUTF-8化していてそこらへんが絡むエラーが出る可能性があります。 初心者には不向きと思います。

4. 使用するモジュールを新しいディレクトリにUpload

・最新バージョンをupload。 具体的には、wordpressME, x_movie, cclink,chanoEnq,bluesBBS,protector,ALTSYS,MultiMenu,Waffle,PiCal。

5. Xoopsのインストール

・DBは別のDBを作成済で、それを指定。
・テーブル接頭語は 旧DBと同じとした。
・表示URLは 素のURLを入れておく。
・最初に登録する管理者ユーザは旧の管理者ユーザとは別のものにしておく。

6. mainfile.phpを修正

・xoops trust-pathの記述を追加
7. モジュールのインストール

8. 旧データのバックアップSQLを修正

・CREATE Database は 削除
・なぜかコメントがあるとエラーが出たのでコメントを全てカット
・Userテーブル以外のSystem系テーブルはカット
→これはこのままでも良かったのかもしれませんが。。。

9. 新DBにデータをインポート

・phpmyadminにてインポート
→ 何度かエラーが出てSQLを修正した。

10.添付ファイル等が保存されているディレクトリを新しい場所にコピー

→ これを忘れると画像が表示されない等の不具合発生!。出来れば最初の段階にやっておくべきだった。

11. この段階で、各モジュールがうまく動作するか確認する。

・ユーザモジュールで旧管理者ユーザの管理レベルを「管理者」に再設定しておく(何故か設定が外れていた)

12. テーマの選定と設定、レイアウト、ブロックの配置、オリジナルブロックの再作成を行う。

→いろいろなフリー配布のテーマをダウンロードして比較したのですが、結局defaultを使用しました。

13. 全てがOKとなった段階で mainfile.php を修正

・表示URLを正規のドメインに変更

14. DNSの設定変更

・正規ドメインの指定を旧ディレクトリのURLから新ディレクトリのURLへ変更する。

15. バージョンアップ完了!!

・旧DBとソース類は しばらくそのまま置いておきます。 1Week経過したら消します。

ここまで、土日のほぼ全ての時間を費やしてしまいました。 まぁデザイン関係などがいきあたりばったりだったのが響きました。

出来上がったサイトは こちらです。

Google Adsense 携帯バージョン

Google Adsense携帯バージョンの導入
こちょうのゆめの携帯BBSにGoogle Adsenseを導入しました。
PC用と同様にGoogle Adsの画面で設定したソースを貼るだけなんですが、少しだけトラブルで躓いてしまいました。
躓き? :PCで確認できない
ソースをコピペしてサイトにuploadしてからPCで確認したところ、広告が表示されていません。 Google Adsの説明画面では 「48時間以内に広告が表示されます」とあったので待ちました48H。 それでも表示されず。。。。 さすがにこれはおかしいだろ ということで、、、、
ネットで色々調べると、どうやらPCで見る場合は携帯画面シミュレータというソフトでサイトを確認しないと広告が出ないらしいことがわかりました。
早速ダウンロードして確認したところ きちんと広告が表示されました!!!
「48Hたたないと表示されない」という文言がgoogleのサイトにあるので丸々2日間ムダにしてしまったわけです。 このパターンで悩んでいる人って多いんじゃないかな。
躓き? :文字化け
やっと広告が出現するようになったものの、見事に文字化けしていました。
文字コードの設定というのがあるのですが、設定画面で 文字コードの選択肢がありデフォルトは「自動選択」です。 当然自動でうまいことしてくれると思ってデフォルトのままコピペしましたが結果は文字化けでした。 ソースを貼り付けるhtmlやphpと同じ文字コードを指定すると当たり前ですが文字化けはなくなりました。 こんなことなら最初から「自動選択」なんていう選択肢は入れないで欲しいなぁ。。。
一応、出来た携帯サイトは こちらです。