カテゴリー: PHP

CodeIgniter ViewとCSSの思考(2)

簡単にモックを書いてみました。
足りない要素もあるわけですが、勢いのままにとりあえず作ってみました。

CSSがない状態

CSSなし
CSSがない状態の表示
テキストリンクをクリックすると実際に作ったhtmlファイルが表示され、画像をクリックするとキャプチャが表示されます。
素のHTMLです。次のＣＳＳがある状態は、このＨＴＭＬにCSSの設定を足したものになります。

CSSがある状態：boxsubが右側

floatを右に設定したもの
CSSがある状態：boxsubが右側の場合
boxmainとboxsubをfloat:leftで設定をしています。文書としては、boxmainのほうが先に記述していますが、表示は右側になっています。

CSSがある状態：boxsubが左側

floatを左に設定したもの
CSSがある状態：boxsubが左側
boxmainとboxsubをfloat:rightで設定をしています。表示が左側になっています。
ID名をbox_rightのように、右左を表す表記にすると、ＣＳＳの設定によってＩＤの表す方角が嘘になってしまうため、役割である「メイン」「サブ」という命名をしています。

カレンダーについては、次のサイトを参考にさせていただきました。
A CSS styled calendar
カレンダーを複数設置する場合を考え、#calendarではなく、.calendarとして設定をしています。

（つづく）
#とりあえず寝ます(^_^;)
#MacIE5.2 で表示崩れがあったのでCSSを修正。うっかりうっかり。
#WinXP IE6 Firefox でとりあえず確認。
#Mac IE5.2 Firefox Opera9.27 Safari3.1.1 でとりあえず確認
#もちょっと調整したい部分もあるけど、とりあえずなのでこれでｗ
#テーブルの基本設定もいれとかないと不便なことに気がついた・・・・・（汗）
#ページャーも必要だね！

CodeIgniter ViewとCSSの思考

どう書くべきなのかを悩みつつ、viewファイルの作り方とCSSについて悩んでみました。
もくもく会なるものを知り、たまには自宅を飛び出して・・・ということで浅草国際通りのデニーズにていろいろ考え中。
いきなりNEKOGET MYFACEをCodeigniterで書くのは大変だった！ということで簡単に日記っぽいアプリをコーディングしてみました。どう書くべき？を悩みながらなので遅々としているわけですが、なんとか書けそうかなぁ？まで到達。

PC用のviewの組み立てについて

基本ファイル views/common/*
  • views/common/base.php
  • views/common/header.php
  • views/common/footer.php

controllers/hoge.phpで記述されるviewは必ず次のような書き方になる。

<?
$data['header'] = $this->load->view('common/header',$data,TRUE);
$data['footer']  = $this->load->view('common/footer',$data,TRUE);
$this->load->view('common/base',$data);
?>

当初考えたbase.phpの中身

・・・省略
<body>
    <?=$header;?>
    <?=$box;?>
    <?=$footer;?>
</body>
・・・省略

考え直したbase.phpの中身

・・・省略
<body>
<?=$header;?>
<div id="box">
    <? if(isset($boxmain)){ ?>
        <div id="boxmain"><?=$boxmain; ?></div>
    <? } ?>
        <? if(isset($boxsub)){ ?>
        <div id="boxsub"><?=$boxsub; ?></div>
     <? } ?>
 </div>
<?=$footer;?>
</body>
・・・省略

２カラムのレイアウトにしてみました。
id=”boxmain” はメインのコンテンツ
id=”boxsub” はメニューリンク等、サブコンテンツとなります。

CSS的にはfloatの設定をすれば、boxsubを右側に表示をさせることも左側に表示をさせることもできるので、文書としては先にメイン、次にサブ内容を表示させます。

先日参加したアクセシビリティセミナーでの教訓として、メインとなる文書は最初の方にあった方がいいということで、このような構成です。３カラムにするだけの情報量が無いことと、私自身が３カラムはあまり好きではないため、２カラムで作成。

id名にleft,right等をつけないのは、CSSの書き方によってid名が嘘になる為。

CSSの構造化
  • htmlタグに対する共通設定
  • フォントの設定
  • headerの設定
  • boxの設定
  • footerの設定
  • h1,h2,h3,h4,h5,h6に対する設定

(課題:これだけでは足りないはずなので、ここは後でさらに考える)

SKINテーマを切り替え可能にするフォルダ構成
  • /skin/テーマ名/images/*(画像ファイル）
  • /skin/テーマ名/css/*.css

テーマ名をconfigで設定することで、スキンテーマを切り替え可能にします。
cssファイルから呼び出される画像ファイルは、cssファイルから見た相対パスで取得できるため、テーマ名が切り替わることで、適用されるCSSファイルが変更され、そのCSSファイルから見た画像ファイルが利用できます。
また、スキンテーマを作成する際のモックファイルを準備しやすくなります。

モックファイルのセット
  • /index.html
  • /skin/テーマ名/css/*.css
  • /skin/テーマ名/images/画像ファイル

CSSファイルを１枚にするか？ 複数にするか？

これはすごく悩む訳で・・・・
CSSのclassの設定を class=”class1 class2″ といった設定ではなく、できるだけxhtmlの構造を生かしてのCSSにしたいと思います。
#追記：勉強用に書いているものは単純なつくりなので、とりあえずは1枚で対応してみます。

  • #header ul .glovalnavi{…}
  • #header li {…}
  • #header li a {…}
  • #header li a:hover{…}

(つづく）
#下書きも書かずに考えながら書いてるので、随時更新ですw
#そろそろバッテリー切れだ(残0:18)　　2008.08.03 01:01
#codeがわかりやすくなるようにプラグインを追加　http://www.chameleonic.org/plugin/php-hilightstring
#プラグインにあわせて、ちょっとだけ修正　2008.08.03 2:10

4日間勉強会レポート

WEBアクセシビリティセミナー
HTML(XHTML)を書く姿勢、FLASHの作り方に対する私自身の姿勢を大きく変えるセミナーです。
本で読む知識も大事ですが、実際に読み上げソフト等を利用されている方々のお話を聞けたことに感激しました。

セミナー後、とてもよくWEBアクセシビリティについてまとまっている場所を見つけました。
すでにまとめが終わっているようですが、コミュニティに参加してみました。
http://mixi.jp/view_bbs.pl?id=31611761&comm_id=3391803
(mixiアカウントが必要です）
私も調べたり作ったりな事をこのブログでまとめていこうと思います。

まるごと実践rhaco勉強会
勉強不足名ままに参加をしたrhaco勉強会でした。
嬉しかったことまとめ

  • tokushimaさんがとても面白く素敵な人だったこと。
  • 個々一番さん、nazoさんがとても親切に教えてくださり、嬉しかったこと。
  • 個々一番さんの（モテ）カバンがかわいすぎで、欲しかった事。
  • 懇親会で向かい合わせにお話できた方が、徳島の方だった事。
  • rhacoをcakephpの中に入れて使ってるよ発言にびっくりしたこと
  • rhacoをcakephpの中に入れて使うと変数名がぶつかってしまうんだよと、いう話を聞いたこと
  • rhacoの団扇がかわいすぎる事
  • rhacoの名刺がわいすぎる事
  • rhacoのかわいすぎる名刺をいただいたこと
  • rhacoはTDDでできてること（ＴＤＤに挑戦してみたい私には、萌えポイント強）
  • むちゃくちゃ楽しかったのに、顔を覚えられない自分の猫頭にちょっと絶望

PHPCon前日Hackathon
参加された皆様、お疲れ様でした。
そして素敵な時間をありがとうございました（＾－＾）ノ
ざっくりとしたまとめ

  • 16時に春日旅館へ到着できた！
  • 春日旅館の旅館風情ありっぷりに感動
  • EMacsに出会った！
  • Macbook AirのUSキーボードに触らせていただいた！
  • Macbook Airを持たせていただいた！（軽い！！）
  • Ｍａｃｂｏｏｋ Airフラグが立った！
  • インストール失敗したかと思っていたMAMPPが普通に動いてた！
  • IRCで出会ってた方々に会えた！（ネット越しに数年お付き合いがあったはずなのに初対面！）
  • たくさん話ができた！話が聞けた！面白かった！！！
  • 配信機材を横目に見れただけでもう、感激！
  • 2時頃寝てしまったことを、翌朝後悔（ＴＡＴ）・・・
  • 公開された写真に写った自分の後姿のデブっぷりにかなり絶望・・・

PHPカンファレンス
前日Hackathonの流れから、会場設営から参加をさせていただきました。

PHPカンファレンス会場設中風景
PHPカンファレンス会場設後風景

結局懇親会後の二次会（PHP肉）にも参加をさせていただき、まるごとPHPカンファレンスを楽しむことができました。

ＰＨＰカンファレンスの動画については、ニコニコ動画にて公開されています。（cojiさんのサイトで纏められています。）
http://techtalk.jp/2008/07/php2008.html

4日間の感想とTODO
ここ数ヶ月間、壁にぶつかり、いろんなことから逃げだしちゃってたワケですが、そのもやもやから少し抜け出せた気がします。連日4日間という強行スケジュールの中で、心の中にあったもやもやっとした、それでいて重たいものが軽くなった気がしています。
1つ1つもイベントでしたが、この4日間勉強会というものも1つの大きな私のイベントでした。
得たものはあまりにも大きく、またここで得た事を腐らせないためにも、さらに頑張れる私になりたいと思います。
この4日間出会えた全ての人に感謝（＝人＝）・・・ありがとうございました！

私が私であるためにも、私以上に成長するためにも、前に進みたいと思います。

PHPカンファレンスに参加してきました。

昨日はPHPカンファレンスに参加をしました。
前日Hackathonの流れから、スタッフな方々が準備をされている時間帯から参加をさせていただきました。椅子並べにパンフ組み等事前準備から参加させていただいて、良い講演を聴き、パネルディスカッションが楽しく、会場の片付けのお手伝いをしてから懇親会へと、丸ごとＰＨＰカンファレンスを楽しませていただきました。
ご一緒させていただいた皆様、本当にありがとうございました！そしてお疲れ様でした！
来年も行きます！（言い切っちゃった！）

配信すごい！
今回のすごく良かった点は、ustでのリアルタイム配信があったこと。
ustを拝見しながら、目の前の講演を聴き、ＩＲＣチャットで参加もできました。

http://www.nicovideo.jp/mylist/7638087
リアルタイム配信すごい！と思っていたわけですが、朝検索したらニコニコ動画にすでに昨日の動画がアップされているというすごさ！！！！
iogiさん、cojiさん、配信に関わったすべての皆様！本当にありがとうございました！！！！

TODO:体力をつける！（痩せないと体が動かないね）
TODO:勉強不足をましにする！
TODO:4日間の反省をまとめてみる！

MEMO:http://ll.jus.or.jp/2008/

PHPCon前Hackathonメモ

norikoさまのメモにならって、メモをとることにしてみますw

~20:00 MAC環境充実中
eclips日本語化はできた。
ターミナル使ってたらitarmがいいよということで、インストール
eclipsいいよねが、emacsいいよねってことでとりあえずインストール
（でも使い方わからない・・・）
Mac率非常に高いです。
Mac Air率もかなり高い。
ポチッと注文ボタンを押してしまいそうな衝動をぐっと我慢（滝汗）
れぱーどに入っているphpが5.2だということを知る（4だと思ってた）

20:00~21:00?
自己紹介（第１回）が開始。
食事のため外にでてしまっている人がいるため、第２回があるらしい。

?~22:00
ご飯をたべにいってきました。
刀削麺。
おいしかったけど量多かったー

22:00~?
猛烈なMac Air素敵ぷりにあてられつつ、NEKOGET MyFACEをCodeIgniterで書き始めてみる。
まずはsvn co URL(準備不足w）

?~01:27
眠くなったので、自室にもどりますー

?~07:40
自室でしっかり睡眠
シャワって身支度w

7:40~
お片づけ開始

7/19　実践まるごとrhaco勉強会にいってきました

7/19:実践まるごとrhaco勉強会に行ってきました。

勉強会前イベント（謎）
予定では、３０分ぐらい前には会場近くのお店で涼んでいて・・・・
まぁ、予定通り迷子になり３０分ほど遅刻
軽く日射病だったらしく頭痛がガンガンしつつ、参加。
もう、「会場にたどり着く」が一番大きなイベントだったかもしれません。

で、rhaco勉強会。
今回もまったく予習もできていないまま参加をしてきました（反省）
PHPが動く環境は用意していたもののDBの用意ができていなかったため、sshで自宅環境で実践。
hallo worldまでが早いんですよという話（懇親会で後聞）の通り、動いたよってところまでとても早かったです。
予習ができていなかった私は、「わーいうごいたー♪」で勉強会は終了。
予習は本当に大事。

懇親会
eclipsで作業された方が、補完がすばらしかったというお話を聞きました。
eclipsで復習せねばです。（sshでviで作業しちゃったw）
丁度席を訪れてくださったtokushimaさんが補完の為に書き直した部分もありますよ的な話がありました。
消えないコードは？に対しては、テストが書かれてないものは変わる可能性があるそうです。rhacoはTDD♪

個人的に・・・
懇親会会場で向かいに座った方が、徳島の方♪
しかも以前事務所として借りていたビルにある会社にお勤めという奇遇♪
東京で、なんともうれしい出会いでした〜

TODOとか反省とか?
やはり勉強が足りてないです。せっかく勉強会に参加してもわからないままで参加するよりも予習しておかないと面白さ半減（TAT)
現在CodeIgniterを勉強中で、試しにコードを書いてみるという状態になっているので、落ち着いたら一度ちゃんとさわってみたいなと思います。

予定の半分が完了

7/18:Webアクセシビリティー・セミナー
7/19:実践まるごとrhaco勉強会
の2つが完了。

今日はHackathon、明日はPHPカンファレンス。

迷子による体力消耗が今回の一番の課題だと、痛感中です……orz