デザイナー向けCakePHP勉強会に行ってきました #CakePHP4d

久しぶりに本来のこのブログの趣旨(だった)技術ネタが書ける…トホホ。
普段、勉強会とかあまり行ったことなかったんですが、Cakeはほんの少し趣味でかじってとても面白いと思ってたこともあり、Cakeを普段から触られてる方々のお話聞きたいなぁと思い、勇気を出して行ってきました。
デザイナー向けということもあってか、参加者の女性率が非常に高く、また皆さんとてもフレンドリーに色々教えていただき、意義深く楽しい会でした。懇親会も含め参加できて大変よかったです。


以下メモ&感想などをつれづれと。

開会ごあいさつ by @mon_satさん

メモ
  • デザイナーとプログラマーの架け橋としてこの勉強会を企画
  • デザイナーがCake(のview部分の書き方)を知っていればもっと質のよいサイトがもっと速く作れる
  • 終わったらブログに書きましょう。アウトプットしないと知識は身にならない。
個人的感想とか
  • TLでも同様の意見多数見かけましたが、@mon_satさんの司会がわかりやすく親切でとても良かったです。ありがとうございました。
  • デザイナーがCakeを知ってるとすごく良いというのは、自分でもやってみて実感したところなので非常に共感でした。デザイナー自身も楽だし速いしもっとやりたいことができると思います。(そんな自信持って言うほどCakeできませんが…きっとそう!)Cake以外やったことないので他のフレームワークを知らないんですが、Cakeの考え方はすんなりと飲み込めたのでデザイナーの思考と相性の良いフレームワークなのではないかと勝手に思っています。Cakeの規約や思想にしたがってデザインしていけるので自然とデザインも楽で速くなる。しかも、下記で@kara_dさんもおっしゃってましたが、アジャイリーな手順で素早くデザインを組みつつ、コード上でトライアンドエラーを繰り返しながらベストプラクティスを模索していける感じがあります。いわゆる、Photoshopでがっちりデザインを組んでから、さぁその通りにコーディング…みたいなのとはまた全然違ったアプローチですが、使ってみて改善を繰り返すことによってどんどんよいものにしていけるWebアプリケーションのデザインには向いている手法だと思います。で、何よりこのやり方だと作っててすごく気持ち良いです。

CakePHPについての基礎知識 by 市川さん @cakephper

メモ
  • フレームワークとは?
    • CMSや非フレームワークをの限界をクリアする
    • よく使う処理を共通化して再利用できる。恩恵を受けるにはルールを覚えることが必要。フレームワークごとにルール/思想が異なるのでそれを理解すること。
  • CakePHPとは?
  • 思想
    • 役割をファイルでわける(MVC
    • デフォルト設定で色々やってくれる(嫌なものは自分で外す)
      • フレームワークによっては、必要なものをそのたびに足していかないと動かないものもある。CakePHPは全部入りなので最初から動く。
  • Viewの基本
<?php ?>で記述
    • Smartyは追加設定が必要
    • Helper
      • HTMLコードを出力するPHPコード
      • 共通なレイアウト、パーツは独立させて再利用
  • Cakeの特徴
    • 利用者が多い(仕事が多い、保守・引き継ぎ)
    • プラグインが充実
    • 開発サイクル・コミュニティが活発
    • ドキュメントが充実
      • 公式ドキュメント、本、ブログなど
    • デザインファイルが独立
      • 不要なPHPコードの混在防止
  • 注意点
    • 覚える事がそれなりにある
    • 思想を理解しないと混乱する/イラつく
    • 簡単な問合せフォーム1画面作るのには不向き
    • 表示結果がプログラム実行後にしかわからない
  • Webアプリは最終的にはHTML/JS/CSSが出力するからプログラマ、デザイナ双方で歩み寄る、それぞれの良いところで落とし所を見つけていくのが必要。Viewに関して両者で話しあってルールを作るなどすると良い
    • ヘルパー使うor使わない
    • 共通部品のパーツ化するorしない
    • 表示確認用サーバ環境を作る
個人的感想とか
  • 懇親会でも私のしょーもない質問に丁寧に答えていただき、@cakephperさん本当にありがとうございました。
  • ちなみに私のしょーもない質問は「viewには皆さんどのようにインデントをつけてるのか?htmlでインデントつけてても途中でPHP混ざるからわけわからなくなりませんか?」という内容で市川さんのお答えは、そのままhtmlのインデントに続けて、php内もインデントをつけていく、というお答えでした。私と同じだ。ちなみに人それぞれでスタンダードはないとのこと。言われてみればそうだよなぁ。。
  • Cakeの特徴の「利用者が多い」というのは私達のようなデザイナー上がりの初心者にもすごくメリットで、自分と同じようなステータスの方がかなり多くCakeに挑戦してブログに日本語Tipsを残してくださってるおかげで、プロのPGの方なら聞くまでもないような初歩的なところもググれば大体わかるというのが非常にありがたいです。それでもしょーもない事にハマって半日うだうだアレしたりしますが、メジャーなフレームワークであるおかげでそういう時間をだいぶ短縮することができたと思います。
  • この会通して皆さんCakeの「世界観・思想」という言葉を多く使われるのがとても印象的でした。私も実際使ってみて、しみじみMVCは思想だなぁと感じました。データベースからひっぱってくるデータの組み合わせ、処理の仕方によって世界の見え方を定義する…みたいな考え方(と私は理解しているんですが違ったらすみません)は非常に今っぽくてグッとくる。

CakePHPのデザイン周りについて(初級編) by 滝下さん @ecworks_masap

スライド「CakePHPのデザイン周辺」(PDF)

メモ

viewswebroot内を編集すればCakePHPがデザインできる」

  • PHPはDBアクセス、計算、表示などを好きなところにバラバラと書かれている。→CakePHPMVCにそれぞれを役割分割
  • CakePHP等のフレームワーク処理の最小単位
    • コントローラー(中くらいの処理)
    • アクション(最小単位の処理)
  • URLはこうなる
http://www.example.com/controllers/action/params/......
    • コントローラ名は複数形・小文字
    • アクションは小文字なら何でもOK
    • 1アクションにつき1ビューの関係(ただし処理によって複数ビューを使い分けることも可能)
  • CakePHPのビューは3種類
    • ビューテンプレートファイル(各アクションに一対一でひもづける。一般的にviewと言われるのはこれ。)
    • レイアウト(ページ間で共通の大枠のレイアウトを定義)
    • エレメント(共通パーツ)
  • デザイン関連のファイルの置き場所
    • app/views/→デザイン関連のviewファイルの置き場
    • app/webroot/→css,img,jsなどの置き場
    • 基本、/app/配下のもの以外はめったにいじらない。
  • パス指定・サイト内リンク
    • 普通にパスを指定すると、URL生成のルールいかんでリンク切れすることがある。
    • HTMLヘルパーを使うことで、リンク切れの発生を防げる
<?php echo $this->Html->link->...?>
  • 代表的なヘルパー
    • Htmlヘルパー
    • Formヘルパー
    • Pagenateヘルパー
  • ヘルパー色々あるけどよく使われるのとあまり使われないのがある
    • Form、image、Linkのヘルパーはよく使われる。
    • divとかpとかのヘルパーを使うプログラマーはめったに居ない。
  • controllerにダミーの変数入れて回す環境をプログラマーに作ってもらって、viewの書き方を練習するとよい。
個人的感想とか
  • 込み入った部分はスライドを見て頂いた方がわかりやすいと思います。ファイル別の役割とかもっと細かに解説してくださってます。メモが追いつきませんでした。。すみません。
  • 非常にわかりやすくviewの使い方を解説して下さりありがとうございました。実際いじったことない人もこのスライドをみながら思い出しながら実践するとすんなり理解ができると思います。
  • divとかpとかのヘルパーを使うプログラマーはめったにいない>やっぱりそうなんですね…html書いた方が早いもんね。linkはヘルパー使うとリンク切れの発生を防げるというのは気づいてませんでした。おおお確かに。

MVCのVを極めしWebデザイナーになる by 原さん @kara_d

メモ
  • Webサイト→情報構造設計が主体
  • Webアプリ→インタラクションやUXが主体
  • デザイナーがビューをまるっと担当できると何が良いのか?
    • インタラクションのデザインで試行錯誤できる
    • 修正対応の切り分け
    • モデルおよびコントローラのことを踏まえていながら、デザイナーサイドからユーザーの提案ができる
    • 作業の同時進行による工期の短縮
    • ウォーターフォール型以外の、アジャイルな進め方が可能になる
  • 学習ステップ その0(CakePHPを学ばないでより良い開発をするには)
  • 学習ステップ その1
    • まずCakePHPをダウンロード
  • 学習ステップ その2→Cakeのフォルダ構造に慣れる
    • webroot内だけでページを作ってみる
    • パスは絶対パス(/img/hoge.png
    • /webroot/index.php をいじる
  • 学習ステップ その3→cakeのビューの書き方に慣れる
    • pages内でページを作ってみる
    • レイアウト、pages内
      • default.ctp
      • hoge.ctp
http://インストールした場所/pages/hoge/
  • 学習ステップ その4→pages内で作ったページを、エレメント、ヘルパーを使ったものに置き換えてみる
  • CakePHPは様々な方法でViewを書くことができる
    • Smarty
    • PHPTAL
    • MTCAKE→MTと同じようにCakeがかけるヘルパー
  • プログラマーにやってもらったほうがいいこと
    • 命名規則の設定(ドキュメント化)
    • 基本的にビューが持っている情報をまとめる
    • 画面五都の使用可能タグ(変数)をまとめる(ドキュメント化)
    • テンプレートシステムの組み込み
    • ファンクショナルタグ(制御機能付きタグの発行)
  • デザイナーもできること
  • ※ソースの管理とドキュメントの管理もバージョン管理システムを使うと便利
  • 共同でタグ辞典を作るといい→※WordPressではタグ辞典がある
個人的感想とか
  • イケてるデザイナーでありながらCakePHPもjsもバリバリできるという@kara_dさん。なんというスーパーマンでしょうか…同じデザイナーとして尊敬の限りです。
  • デザイナーがCakeわかると良いメリットの部分でうおぉと非常に共感。手順がFlashに似ているというのもとてもとても共感。書きだしてみてちょっとやり直してまた書きだして…という感じ、確かにすごく似てる。
  • 学習手順も非常に参考になりました。ありがとうございました!自分でも試してみたいと思います。

PHPTAL/CakePHP-TALTAL by 野島さん @nojimage

メモ
  • PHPTAL=テンプレートエンジン
  • TAL = Template Attribute Language
  • 表示のためのロジックをXHTMLXML)で表示
  • zopeのTALをPHPへ移植したもの
  • 日本語リファレンスあり
  • ブラウザ確認すると元のHTMLそのままの状態の表示で見れる
  • 表示のためのロジックを組み込んでもデザインを壊さないので、ロジックを追加したあとでもデザイナー側で見た目の調整が可能
  • よく使う構文は12個しかない
個人的感想とか
  • なんと福岡からzenpreで参加。すごい。未来。
  • プレゼン内にちょいちょい挟まれるユーモアがツボでした。"not smart"とか。
  • PHPTAL使いやすそうですね。プレビューで見た目が崩れないというのがナイス。

CakePHPのpaginatorのデザイン周り by @ogaaaanさん

メモ
  • pagenatorとはよくある"ページング"、あの大量なデータの羅列をページ分けして1ページ目2ページ目とリンクを貼るアレ、本来は作るのが非常にめんどくさいが、CakeのPagenatorヘルパーを使うとらくちん。
  • 外側のclass名はpagerとかちょっと違うのにするとかぶらなくて良い。
個人的感想とか
  • なんとスライドが表示できなくなるというトラブルに見舞われたにもかかわらず、スライドなしでpagenatorをあたかも落語のような語り口で楽しくそしてわかりやすくご説明になった@ogaaaanさん。なんだかすごいものを見せていただいた感があります。本当にありがとうございました。
  • 表示できなかったスライドも楽しくわかりやすくて良かったです。まさにデザイナーとプログラマーを行ったりきたり出来る方なのだなぁと。尊敬。




以上、まとめと感想でした。

わかりやすく楽しいプレゼンをたくさん見せていただき、こんな会が無料で参加できてしまっていいのか…と思いました。また懇親会もとても楽しく、スタッフの方々も隅々までとても気を使っていただき大変感謝。本当にありがとうございました!また続編などやって下さる事ありましたらぜひ参加したいです。特にGit for デザイナーに期待。。
しかしせっかく懇切丁寧に教えていただいても、結局コーディングは自分で書いてみなければなんともアレなので、引き続き自分で書いてみたいと思います。未経験のデザイナーさんもとりあえずCakeをダウンロードしてゴニョゴニョ書いてみると良いかと思います。

私のCakePHP学習手順

というわけで、一応私の学習した手順をこの場で簡単に共有してみます。私はもともと動機としては、仕事のことはあまり視野になくて、単純に趣味でWebプログラミングやってみたいなということではじめたのでView以外のことも学びましたが、仕事でViewの部分を使いこなしたいという目的が第一であれば、先の@kara_dさんによるやり方の方が早いと思われます。

  • CakePHPブログチュートリアルをやってみる。
    • 簡単なブログっぽいものが作れちゃうというCake公式のチュートリアルです。
    • 所要時間は多分2〜3時間。基礎がある人ならもっと早いのかな。
    • PHPの基本的な知識が必要とありますが、ググりながら頑張れば多分いけるんじゃないかと。うん、大丈夫。多分大丈夫。
    • 開発環境がないとPHPは動きませんが、開発環境の構築についてもし知識がなければレンタルサーバなどに直接ファイルをおいてやってみるのが手っ取り早いでしょう(MySQLの使えるサーバが良いです)。開発環境について学び、環境整えるだけで多少時間を食うのでその間に気持ちが萎える恐れがあります。
    • これひと通りやると、こんな自分でもWebサービスみたいなものが作れちゃうのか!という感動と、大体MVCで何ができるのかが大まかにざっと感覚で掴めて、MVCスゲー!Cakeスゲー!となってテンションあがって次のステップへのやる気が出ます。
  • とりあえずXAMPP入れとくと色々楽かも
    • ApacheMySQLなど、Webプログラムが動かせる環境を一括してインストールしてくれるアレです。Macならそんなの無くても動くのですが、色々セットになってるので入れておくと楽だと思って私は入れました。
  • 何か初心者向けのCakePHP本一冊買って1から学びつつ作ってみる。
    • 私はこれ使いました。(今回のスピーカーの方々の本ではなかったので書くべきかちょっと迷いましたが…うぅ、すみません。。)初心者向けとして大変良い本です。プログラムの知識なしでもわりとすんなり入れるかと思います。(私の持ってるのはCakePHP 1.3用ではなかったのですが、1.3用が出ているようなのでそっちをおすすめ。)




  • 本を学んでだいたいわかったかなと思ったら自分の作りたいサイトをとりあえず作れるところから作ってみる。
    • 自分の作りたいものを作ってみるとより理解が深まります。特にデザイナーならデザインの部分のやりやすさに感動できるのはこのあたり。
    • 自分もここまだまだなのでがんばります。。(実は途中で投げたまま半年以上経ってる…orz)

最後になりましたが、今回のスピーカーをして下さった方々の本も紹介させていただきます。

Pocket詳解 CakePHP辞典
Pocket詳解 CakePHP辞典
posted with amazlet at 11.07.24
滝下 真玄
秀和システム
売り上げランキング: 105387


ウェブデザインコーディネートカタログ
黒野 明子 秋野 琢 小山 智久 原 一浩 柳谷 真志
技術評論社
売り上げランキング: 18754


本当にありがとうございました。