最近CodeIgniterでとある団体のホームページを作ることになりました。
サーバはどうしようかな~と考えましたが、今後も大きくなりそうなのでさくらのビジネスプロに決定!
ってなわけでまずはさくらのレンタルサーバにCodeIgniterをぶち込むことから始めます。
1.CodeIgniterダウンロード
まずは下記のリンクからCodeIgniterをダウンロード(2010/11/26現在のversionは1.7.2)して解凍します。
http://codeigniter.com/downloads/
2.FTPでアップロード
さくらのレンタルサーバへ解凍したフォルダごと/home/xxxxx/www直下にアップロード。
3.Teratermでログイン
cshが使いにくすぎるのでとりあえずbashにしました。
参考:http://www.hazama.nu/t2o2/archives/002697.shtml
落ち着いたらzsh入れます。
4.Config直下のファイルを編集
さくらの環境に合わせてデータベース等の設定ファイルを編集します。
5.vimインストール
なんと(いや普通か)vimが入ってなかったので、インストールしました。
参考:http://dameninngenn.sblo.jp/article/35264757.html
※上記のサイトだとパスを通していないため、.bashrcに下記を追記。
PATH="$PATH"":$HOME/local/bin
6..htaccess設定
さくらのレンタルサーバだとURLルーティングに癖があるらしいので下記のサイトを参考に.htaccessを設定
参考:http://d.hatena.ne.jp/mcatm/20090415/1239807899
ちなみにこんな感じです。
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond $1 !^(index\.php|css|robots\.txt|js|images)
RewriteRule ^(.*)$ /index.php?/$1 [L]
7.動作確認
適当なcontrollerとviewを用意して動作確認。
おお!普通にいけた。
Symfonyのときはさくらに随分泣かされたのでちょっと感動。
これで開発できる環境が整ったので、一気に仕上げるぞ~
CodeIgniterにおいてURLにデフォルトで含まれるindex.phpを消すには、以下の内容を.htaccessに記述し、ドキュメントルート直下に配置すればOKです。
- RewriteEngine on
- RewriteCond $1 !^(index\.php|css|js|images)
- RewriteRule ^(.*)$ /index.php/$1 [L]
RewriteCondの値は必要に応じて適時追加してください。
今回はjavascriptのベクターグラフィックライブラリであるRaphaelを紹介。
前回紹介したdojoライブラリでは細かいところまでいじれなかったため、Raphaelを使ってみることにした。
・使用方法
・Raphaelをダウンロードする
ここのページの右上からダウンロードできる。
・htmlファイルを作成する
上記でダウンロードしたjsファイルをインクルードする
- <script src="../js/raphael/raphael.js" type="text/javascript"></script>
- <script src="../js/raphael/sample.js" type="text/javascript"></script>
-
-
・jsファイルを作成する
実際に描画する処理を書く
- window.onload = function () {
-
- var paper = Raphael("holder", 400, 400);
-
- var circle = paper.circle(200, 200, 100);
-
- circle.attr({"fill": "skyblue", "stroke": "#000", "stroke-width": 4});
-
- var rect = paper.rect(220, 240, 30, 30);
-
- rect.attr({"fill": "red"});
-
- var ellipse = paper.ellipse(200, 100, 30, 40);
- };
ちなみにサンプルはこちら
【参考】
http://www.skuare.net/test/raphael_1.html
http://raphaeljs.com/reference.html
今回はdojo1.3を使ってグラフを作ってみたのでメモ。
javascriptでグラフを作成できるライブラリは他にもあったが、
・javascriptで記述している(画像を吐き出すわけではない)
・フリー(タダ)
・円グラフでonclickイベントが拾える(実装も簡単)
の理由からdojoを採用した。
時間が無かったので、ドキュメントのサンプルを参考に作成し、
データ項目をクリックした際にonclickイベントを取得できるようにした。
サンプル:http://y2-space.com/program/dojotest.html
【参考】
dojo:http://www.dojotoolkit.org/
リファレンス:http://api.dojotoolkit.org/jsdoc/1.3.2/dojox.charting
dojo.chartingリファレンス:http://docs.dojocampus.org/dojox/charting
フリッカーのグルーピングのようなドラッグ&ドロップで画像を操作する機能を実装したいと思い、色々と調べてみた。
symfonyのJavascriptヘルパーの中身を調べていたら
draggable_element()
drop_receiving_element()
の2つのヘルパーで実装できることが判明。
まずはドラッグするための機能を説明する。
- <div id="product_list" class="product">
- <?php foreach($products as $id => $title): ?>
- <?php echo image_tag('product'.$id, array(
- 'id' => 'product_'.$id,
- 'alt' => $title,
- 'class' => 'products'
- )) ?>
- <?php echo draggable_element('product_'.$id, array('revert' => true)) ?>
- <?php endforeach ?>
- </div>
draggable_element(ドラッグさせたい要素のid, [オプション])
で指定した要素をドラッグ出来るようになる。
draggable_elementは次のパラメーターを受け取る。
| パラメーター |
説明 |
| revert |
trueに設定した場合、要素が放たれたときに元の位置に戻るようになる。
また任意の関数を呼び出すことも可能。 |
| ghosting |
要素をクローンして、要素が放たれても元の位置に戻らないようになる。 |
| snap |
falseに設定した場合、スナッピングされない。 |
次にドロップの機能を説明する。
- <?php forearch ($labels as $label) : ?>
- <div id="label_<?php echo $label->getId() ?>">
- <span id="count_<?php echo $label->getId() ?>">0</span>
- <span id="indicator_<?php echo $label->getId() ?>">loading now....</span>
- <?= drop_receiving_element('label_'.$label->getId(), array(
- 'url' => 'blg/add?label_id='.$label->getId(),
- 'accept' => 'product',
- 'update' => array(
- 'success' => 'count_'.$label->getId(),
- 'failure' => 'error_'.$label->getId()
- ),
- 'method' => 'GET',
- 'hoverclass' => 'label-active',
- 'script' => 'true',
- 'confirm' => '"'.$label->getLabelName().'に追加しますが、よろしいですか?"',
- 'loading' => 'Element.show("indicator_'.$label->getId().'")',
- 'complete' => 'Element.hide("indicator_'.$label->getId().'")',
- )) ?>
- </div>
drop_receiving_element(ドロップさせたい要素のid, [オプション])
で指定した要素をドロップ出来るようになる。
drop_receiving_elementは次のパラメーターを受け取る。
| パラメーター |
説明 |
| url |
ドロップされたときに実行するurl |
| accept |
ドロップさせる要素を文字列またはcssクラスで指定する。 |
| update |
更新する要素を指定する。配列を指定することで成功時と失敗時の要素を指定できる。 |
| method |
POST、GETなどを指定する。 |
| script |
trueの場合、指定したアクションでjavascriptを実行できる |
| hoverclass |
要素をドラッグしている最中(ドラッグしているがドロップはしていないとき)のcssクラスを指定する |
| confirm |
確認ダイアログに表示する文字列を指定する |
またdrop_receiving_elementに限ったことではないが、
symfonyのajaxヘルパーには以下のようなコールバックのトリガーが設定されている。
| コールバック |
説明 |
| before |
クエストが初期化される前 |
| after |
リクエストが初期化された直後で読み込まれる前 |
| loading |
ブラウザからのデータでリモートの文章が読み込まれているとき |
| loaded |
ブラウザがリモートの文章を読み込み終えたとき |
| interactive |
ユーザーが読み込みを終えずにリモートの文章とやりとりしているとき |
| success |
XMLHttpRequest が完了し、HTTP ステータスコードが 2XX のとき |
| failure |
XMLHttpRequest が完了し、HTTP ステータスコードが 2XX でないとき |
| 404 |
url が 404 ステータスを返すとき |
| complete |
XMLHttpRequest が完了したとき ( 失敗であろうと成功であろうと ) |
参考:第11章-Ajaxの統合
symfony book 日本語ドキュメント Javascriptヘルパー
普通にウェブプログラミングをしていると、ハイパーリンク内で特定のスクリプトのトリガーを引きたくなるときがある。
「戻る」や「ポップアップ」機能がその代表例とも言えるだろう。
symfonyにはjavascriptヘルパーが用意されており、これらを用いると比較簡単にリンク処理をすることができる。
- <?php
-
- echo link_to_function('戻る', 'history.back()');
-
-
- echo button_to_function('削除', 'if confirm("本当に削除してもよろしいですか?"){ do_delete(); }');
-
-
- ?>
ちなみにpear内のJavascriptHelper.phpには次のように書かれていた。
- <?php
-
-
-
-
-
-
-
-
- function link_to_function($name, $function, $html_options = array())
- {
- $html_options = _parse_attributes($html_options);
-
- $html_options['href'] = isset($html_options['href']) ? $html_options['href'] : '#';
- $html_options['onclick'] = $function.'; return false;';
-
- return content_tag('a', $name, $html_options);
- }
-
-
-
-
-
-
-
-
- function button_to_function($name, $function, $html_options = array())
- {
- $html_options = _parse_attributes($html_options);
-
- $html_options['onclick'] = $function.'; return false;';
- $html_options['type'] = 'button';
- $html_options['value'] = $name;
-
- return tag('input', $html_options);
- }
-
- ?>
ヘルパーのファイルを探索すれば、意外に便利なものが見つかるかもしれない。
変数を用いて定数、メソッドを呼ぶ方法をメモ。
まず以下のようなクラスを考える。
- <?php
- class Hoge {
- const bar = "uho";
- static pubilc function boo($v) {
- echo $v;
- }
- }
- ?>
定数を抜き出したい場合はcall_user_funcではなく、constantを用いて
- <?php
- $model = "Hoge";
- echo constant($model."::bar");
-
- ?>
とすればOK。
逆にスタティックメソッドを呼び出したい場合は
- <?php
- $model = "Hoge";
- echo call_user_func(array($model, "boo"), "test");
-
- ?>
のようにすればOK。
今回は表示したグラフのデータにリンクを貼る方法を紹介。
データは棒グラフのサンプルに含まれている「chart_with_gradient_fills」を使用した。
ちなみにデータはここでダウンロードできる。
・データへのリンクの貼り方
まず注意して欲しいのはデータ形式がcsvかxmlかでリンクの貼り方が変ってくる。
・XMLの場合
データ形式がxmlの場合、タグにurl属性をつけるだけでリンクを貼る事が可能。
例としては以下のようになる。
- <a href="http://www.text.xom">aaa</a>
・CSVの場合
データ形式がcsvの場合、データファイルにurl属性を持たせることができないため、セッティングファイルを変更する。
データラベルにリンクを貼るにはcolumタグとlink_targetを変更する必要がある。
例としては以下のようになる。
- <column>
-
- .............
-
- <data_labels>
-
-
-
- </data_labels>
-
- .............
-
- <link_target>_top</link_target>
-
- .............
-
- </column>
以下は実際にサンプルにリンクを貼った例。
You need to upgrade your Flash Player
まだまだ勉強不足だなー。
次はamMapでも調べてみるか。
amCharts:http://www.amcharts.com/
今回はフラッシュの画像を作ってくれるamChartsを紹介。
GoogleChart以外になんかいいツールはないかなと探していたところ、発見したのでメモ。
なんといってもこの利点はフラッシュで動的なグラフが作成できるところ。
urlを投げたら画像が帰ってくるGoogleChartよりはちょっとめんどくさいけど、慣れればいい感じw
詳しいやり方はこちらに書いてあるので割愛。
ちなみに無料ですがグラフの左上にちょっとした広告が入るそうです。
今回はPHPの文字列操作ではまったネタをメモ。
文字列から数文字抜き出す時に、2バイト文字(日本語)を1バイトで抜き出してしまうという問題。
結論から言うとmb_substrの前にmb_language,mb_internal_encodingを指定してあげると綺麗に抜き出せるらしい。
- //文字コード設定
- mb_language("Japanese");
-
- mb_internal_encoding("EUC");
- $str = "ほげほげhogehogeうほうほuhouho";
-
- //最初から10文字を切り抜く
- $str = mb_substr($str,"0","10");
- echo $str;</td>
出力結果は以下
となる。
mb関連の関数は勝手にマルチバイトに対応してくれると思ったら、そうでもなかったというオチ。
設定ファイルとアプリケーションの内部エンコーディングが同じだったら追加する必要はないかも。