Dream of Electric Sheep

WEBやプログラムの忘備録

jQuery で　ページトップ　に戻る処理

jQuery

昨日は画面作りで久々に１日 HTML・CSS・jQuery を触ってました。

今回はjQueryのちょいネタを書きます。

 

・jQuery で　ページトップ　に戻る処理

html

<div id="go_top">TOP</div>

ボタン部分に相当する部分を<div>でつくります。位置はCSSで指定するので<body>の中ならどこに書いても構いません。

 

css

#go_top{
    position: fixed;
    bottom:10px;
    right:10px;
    width:50px;
    height:50px;
    line-height:50px;
    text-align:center;
    background-color: #666666;
    cursor:pointer;
}

右下に固定で表示されるようにしています。位置の指定に関する記述は　position: fixed;　bottom:10px;　right:10px;　の3行です。それ以外は見た目に関する記述ですが、例なのでここではあえてシンプルなものを指定しています。

 

jQuery(Java Script)

$(function(){
    $("#go_top").click(function () {
        $('html,body').animate({ scrollTop: 0 }, 'fast');
        return false;
    });
});

  記述はたったこれだけ。ボタン部分(<div id="go_top">)がクリックされると<body>タブのスクロールトップを0にまで戻します。animate()の第2引数を変えることでスクロールスピードを変えられます。'fast'、'slow' の他数値でミリ秒を指定できます。

 

CakePHP 2.5.8. で beforeSave() を使うときにでるエラー

PHP

Model クラスで beforeSave() メソッド（save()の前に行う処理を記述する）を使用したところ、

Declaration of User::beforeSave() should be compatible with Model::beforeSave($options = Array)

というエラーがでました。beforeSave() メソッドを書くときに、

public function beforeSave($options = array()) {
    ・
    ・
    ・
}

というように引数を設定してやることでエラーは出なくなりました。新しいバージョンのCakePHPでは引数に $options を与えてやる必要があるみたいだです(どのバージョンからかまでは調べてません)。

CakePHP 2.5.8. でファイルのアップロード

PHP

タイトルの通り、ファイルのアップロードを試してみました。
コードは以下の通りです。

・POSTするHTML側

 <form action="[コントローラーのURL]" enctype="multipart/form-data" method="post">
    ・
    ・
     <input name="foo_file" type="file" value="" />
     <input type="submit" value="送信" />
</form>

・受ける側コントローラーのアクションメソッド

function index() {
        //パラメータよりイメージ情報を取得
        $image = $this->params['form']['foo_file'];
        
        //イメージ保存先パス
        $img_save_path = IMAGES.DS.'save_files' ;
        
        //イメージの保存処理
        move_uploaded_file($image['tmp_name'], $img_save_path.DS.$image['name']);
}

結果、できてしまえばたった3行で済んだのですが、これだけ調べるのに昨日の午後まるまる使ってしまいました。

まず、送る側の <form> タグは属性 enctype="multipart/form-data" を指定します。これはCakePHPに限らずファイルのアップロードをする際には必ずする記述ですね。

で、このフォームから送った <input type="file"> の情報は、コントローラーのアクションメソッド内で、$this->data[パラメーター名]　では取り出せません。print_r() を使ったりして調べたところ、<input type="file">に関する情報は $this->params['form'][パラメーター名] で取り出せることがわかりました。

さらに、この中には連想配列で複数の情報が含まれており、

[name] => ファイル名
[type] => ファイルの種類
[tmp_name] => アップロードファイルを一時保存したパス
[error] => エラーの数
[size] => ファイルのサイズ

が情報として取得されます。

アップロードされたファイルは [tmp_name] のパスに一時ファイルとして保存され、アクションメソッド終了と同時に一時ファイルは削除される、という動きをしているようです。
なので、アクションメソッドの中で一時ファイルを任意の場所にコピーしてやればファイルのアップロードはできます。
上記アクションメソッド中のコードでは3行目がそのコピー処理を行っていて、2行目はコピー先のパスを生成する処理の記述です。こちらは保存したいパスやファイル名により変わってくる部分です。

ちなみに保存パス生成時に使っている定数で、IMAGES は CakePHP のイメージフォルダのパス([CakePHPのルートパス]/app/webroot/img)、DS はパスセパレータ(OSで使用しているものを自動でつけてくれる　Windowsなら\、linuxなら/ など)を表します。

Aptana3.4.2にERMasterを入れてみる

Aptana

DB設計をするためのツールとして前々から気になっていたのがEclipse用のプラグイン、ERMaster。DB設計の神ツールらしいです。

http://www.atmarkit.co.jp/ait/articles/1001/21/news128.html

Eclipseをベースに作られているAptanaでも動くはずなので試してみました。

 

■準備作業

・GEF(Graphical Editing Framework)プラグインをインストール
ERMasterはGEFに依存性があるらしく、これを入れてないとERMasterのインストール中にエラーが出てしまいます。以下サイトからダウンロードします。

http://www.eclipse.org/gef/

英語サイトでちょっとわかりづらいですが、Downloadページの　"Downloadable P2 Repositories and SDK dropins"　って書いてあるあたりのhereってリンクから行ったページで、All-In-One SDK (Runtime, Source, Examples)をダウンロードしました。ダウンロードしたファイルは　GEF-ALL-3.9.101.zip　です。これを解凍し、出来たフォルダの中にある　features、plugins　の2つのフォルダをAptana本体のフォルダの中に上書きします(日本語化プラグインを入れる手順と同じですね)。

・MySQLのJDBCを配置
ERMasterからDBに接続するためにはJDBCが必要になります。JDBCとはJavaからRDBに接続するためのブリッジです。AptanaのベースであるEclipseはJavaで書かれているので、JDBCが必要になるのです。JDBCは各RDBごとに専用のものがあるのですが、今回はMySQLを使用するのでMySQL用のJDBCを入手し、設置します。MySQLは現在Oracle配下になってしまっているので、MySQL用JDBCをダウンロードするにはオラクルプロフィールのアカウントが必要です。めんどくさいですね。ダウンロードサイトはこちら

http://dev.mysql.com/downloads/connector/j/

ですが、ダウンロードできるのはインストーラーです。欲しいのはjarファイルなのですが、インストーラーを起動してもjarがどこにできるのか良くわからなかったので、以下URLよりjarをダウンロードしました。

http://dev.mysql.com/downloads/connector/j/5.0.html

ダウンロードしたファイルは　mysql-connector-java-5.0.8.zip　で、解凍してできたものの中にある　mysql-connector-java-5.0.8-bin.jar　がJDBC本体です。こちらを任意の場所に設置します。

 

■REMasterのインストール
Aptanaを起動し、以下の操作をします。

①メニューの　ヘルプ→新規ソフトウェアのインストール
②作業対象の[追加]をクリック
③名前：ERMaster
ロケーション：http://ermaster.sourceforge.net/update-site/を入力（名前は任意のもので良い）、[OK]をクリック
④名前の ERMaster にチェックを入れ、[次へ]をクリック
⇒GEFがインストール済みでないと、必須項目がないのでここでインストールエラーとなる
⑤確認画面が表示されるので[次へ]をクリック
⑥ライセンスが表示されるので、同意するにチェックして[完了]をクリック
⑦Apatanを再起動

 

これでERMasterのインストールは完了です。使用するときは、Aptanaのメニューの ファイル→新規→その他 で ERMaster を選びます。

早速ER図を描いてみましたが、操作がわかりやすく超便利です。ER図を描くための操作は画面左側にあるメニューを選択して行いますが、画面を右クリックすることで色々な機能が使えるみたいです。試してみたいくつかの機能を紹介します。

 

・リバースエンジニアリング

右クリック→インポート→データベース

データベースにある既存のテーブルから自動的にER図を描き出してくれます。これはすごい！感動します！Seasar2のひがやすをさんも絶賛の機能です。
この機能を使うとき、DBの接続設定を行いますが、使用するDBにあわせたJDBCも指定する必要があります。MySQLの場合は上記のjarファイルを指定します。

 

・ER図の物理表記/論理表記

右クリック→表示→ビューモード→物理 or 論理 or 論理/物理

ER図のテーブル名/カラム名の表記を、実際DB上に作る名称か設計上の日本語名か表示を切り替えることが出来ます。論理名/物理名は、テーブル設計を書くときにきちんと記述しておく必要があります。

 

・ER図のエクセルファイルへの書き出し

右クリック→エクスポート→Excel

きれいにER図が描けても、Aptana(Eclipse)上でしか開いて見る事が出来ないのであればあまり意味がありませんよね。ところがこの機能を使えば、ER図とテーブル設計図をエクセルファイルに書き出してくれます。ER図はERMasterの画面をそのまま画像化したものですが、テーブル設計はきちんとセルに描いてくれます。

 

・DDLのエクスポート

右クリック→エクスポート→DDL

DDLってのはDB上にテーブルを作るためのSQLです。つまりCREATE文。ERMaster上でグラフィカルにDB設計を行うだけで、実際にテーブルを作るためのSQLが自動で出来ちゃうんです！すごく便利！キモとなる機能と言っていいですね！

しかし、ここで大きな落とし穴が…

非常に残念なことですが、Aptana3.4.2に入れたERMasterではこの機能が動きませんでした…
Eclipse4.3にERMasterを入れて試したところ、無事にエクスポートできました。Aptana3.4.2のバグなんでしょうか。Eclipseにプラグイン版のAptanaを入れて使えばいいのかも知れません。あるいは、パッケージ版でも新しいAptanaなら動くかもしれません(こちらはまだ試してません)。いずれにしてもとても残念です。Aptana3.4.2をずっとメインで使ってきたので…

 

 

CakePHPをちょっと触ってみて

PHP

なかなかブログの更新できてません(汗)

勉強中のCakePHPで、複数のテーブル絡めた簡単なサンプルアプリを作ってみるあたりまでは出来ました。まだまだ勉強中なのですが、小規模なWEBアプリを組むのにはなかなか面白いなあ、と思いました。反面、もともと自分がメインで扱ってたJavaと考え方が異なるところも結構あって、なじみがないというか、不慣れというか、そんな面も結構ありました。

例えば、CakePHPはControllerとviewでのデータの受け渡しに連想配列を使いますが、Javaでは基本的にデータの受け渡しにはオブジェクトを使用していたので、ちょっと違和感を感じました。PHPではもともとオブジェクト指向言語じゃなかったので、PHP文化圏では連想配列の方がなじみやすいのかもしれませんが。

あとViewがタグだけで記述できないので、ロジックの分離がうまく出来ない場合もあるのかなと思いました。これは書き手(プログラマ)による部分大きいと思いますが。CakePHPでヘルパーというViewのための機能が用意されていますが、記述方法がPHPの書き方そのままです。一方、Javaの代表的(だった)MVCフレームワークのStrutsでは、表示に必要なデータや、繰り返し処理等のロジックをタグ形式で書くことが出来ます。Viewではこのタグのみで記述を行えば本来ControllerでやるべきロジックをViewから完全に排除できます。HTMLタグとJavaプログラミング以外にStrutsのタグ(正確にはStruts用に作られたJSPのカスタムタグ)の使い方を覚える必要があるため学習コストは高くなるのでどちらがいいか判断は分かれると思いますが、個人的にはStrutsの考え方はなかなか優秀だったと思います。

CakePHPのModelはなかなか優秀なORマッパーだと思いました。ただ、複雑な処理を行うとき、SQLを直接発行したりトランザクションを管理したりできるのかな？と思いました。現在勉強に使っている参考書にはそれらにまったく触れてません。しかしネットで検索してみるとどちらもCakePHPで対応しているみたいです。時間のあるときにそちらのほうも調べてみたいと思います。また、CakePHPでの標準的な手法がどうなのか(SQLやトランザクションを使わないのが普通なのかそうじゃないのか)が気になります。

せっかくなのでCakePHPで勉強した内容をメモとしてブログに残したいなあと思ってます。しかしなかなか時間が…

CakePHPを試す

PHP

PHPを使って簡単なマスタメンテ機能的なWEBアプリを組むことになりました。

やはりなにかフレームワークを使用したほうがいいかと思い、CakePHPについて調べてみることにしました。

WEBで検索してみるとPHPのフレームワークは本当にたくさんあるみたいなのですが、日本ではCakePHPの人気が高く、本やWEBなどで情報が入手しやすいだろうと思ったこと、そして現在お世話になっているコワーキングスペースCo-Edoの田中さんがCakePHPに相当詳しい方ということで困ったときは助言がいただけることを期待しつつ、CakePHPを使ってみることにしました。

ちなみにアメリカでは　Laravel　というフレームワークの人気が急上昇しているようですね。

 

というわけで、まずは　CakePHP　を導入するところから初めてみたいと思います。

 CakePHPのダウンロードは以下サイトから
http://cakephp.jp/

f:id:turkey246:20150304123714j:plain

 最新版の　cakephp-2.5.8.zip　をダウンロードしました。

 ダウンロードした　zip　を解凍し、PHPと連携済みの　Apache　のドキュメントルート以下に設置します。

自分の環境では　C:\xampp\htdocs\cake\cake_sample_1　以下に解凍したフォルダに含まれるすべてのファイルをコピーしました。C:\xampp\htdocs　が　Apache　のドキュメントルートです。

Apache　を起動した状態で、ブラウザで

http://localhost/cake/cake_sample_1/

にアクセスしてみます。

f:id:turkey246:20150304124750j:plain

 

動作はしているみたいですね。

では、これからいろいろ勉強してみたいと思います。

 

 

HTMLコーディングに苦手意識のある人ほど Aptana を活用して欲しい

Aptana

htmlコーディング自体はそれほど難しくないと自分は考えます。
基本的に、

・開始タグと終了タグで要素を挟み込む
・タグを入れ子にして階層構造（ツリー構造）をとる

の2点のポイントさえ理解すれば、構造の把握は割りとしやすいものだと思います。

htmlに苦手意識を感じている初学者の多くは、構造の把握のコツがうまくつかめていないことが原因と思われます。
確かに、複雑なページ構成になってくるとステップ数（行数）も増え、階層構造も深くなり、構造を把握することが難しくなってきます。
そんな状態でタグの記述を間違え、きちんと閉じられていなかったり、きちんと入れ子になってなくて入れ違いに記述してしまったりすると、ブラウザで表示すると「あれ、想定と全然ちがう！」となり、間違いを直すにも修正すべき箇所がさっぱりわからず「htmlは難しいー」となってしまうのではないかと思います。

htmlの構造の把握のコツをつかむにはもちろん書くことになれるということも重要ですが、

・構造がわかりやすい書き方をする
・構造をわかりやすくしてくれるツールを活用する

ということが大切だと思います。

というわけで、htmlの構造を把握するのに役に立つ Aptana の機能をいくつか紹介したいと思います。

 

ソースフォーマット

構造がわかりやすい書き方とは、ずばりインデントをきちんと打つということです。
インデントをきちんと打っていれば、視覚的にタグの階層がわかります。
逆にインデントをまったく打っていなければ、htmlに書きなれている人でも構造を把握するのは困難かと思います。
また、ちゃんとインデントを打っているつもりでも、ずれてきちゃったりするとかえって構造の把握を間違えてしまう原因となってしまいます。
Aptana のソースフォーマットを使えば、一発で自動にインデントをきれいに打ってくれるので、間違いもなくばっちり構造を把握できます。

f:id:turkey246:20150303222509j:plain

こんな感じの構造がわかりにくいインデントなしのソースが、メニューバーの　ソース　→　フォーマット　をするだけで

f:id:turkey246:20150303222619j:plain

 一発できれいにインデントの打たれたソースに変換されます。

 

ソースコードの折りたたみ

きれいにインデントが打たれているソースでも、行数が多くなると全体構造をつかみにくくなります。
開始タグがある行の行数が表示されている部分の右側に、マイナスマークが表示されているので、そいつをクリックしてやるとタグが折りたたまれます。

f:id:turkey246:20150303223325j:plain

子要素が全て非表示となりすっきりとした表示となるので、全体の構造をつかみたいときなどに活用すると作業が楽になります。
折りたたんだタグにはプラスマークが表示され、プラスマークをクリックすると再び展開します。

また、きちんとタグが閉じられていないとうまく折りたたみが出来ないので、タグの記述ミスを探すときにも役に立ちます。

 

アウトラインビュー

f:id:turkey246:20150303223951j:plain

アウトラインで、タグの構造をディレクトリのように表示してくれます。
アウトラインが画面上に表示されていない場合は、メニューバーの

ウィンドウ　→　ビューの表示　→　アウトライン

で表示できます。