まー、なんでかっていうとFLASHを勉強していたとき、「Progression」というフレームワークを使ってみたところActionScriptの考え方（というかオブジェクト指向というかそんなようなもの）をヒジョーに分かりやすく体感できたのでPHPも同じような戦法で、と思いまして。

CodeIgniterを選んだ理由は・・・直感です。

で、本題ですが、、
とりあえず本とか買う前に自分に使いこなせるかどうかを判断するために初心者向けのエントリーをまとめてみました。

• PHPフレームワーク「CodeIgniter」：まずは試す！【Article TEDIA】※会員登録しないと見れないです（無料）
  MVCの基本的な流れというか、そういった感じのものを知ることができます。難易度は低め。
• CodeIgniter 入門【IBM】
  設定から完成まで1時間程度でできるチュートリアルです。PHPを全く触ったことのなかった僕でもデータベース（mysql）を使ったアプリケーションができてしまったという、本当にオススメの記事です。
• 【blog.paz-para.com】
  CodeIgniterだけでなく、PHP関連のエントリーが充実しています。内容も非常に分かりやすい！

チュートリアル形式のものがなかなか見つからなかったのですが、個人的には【IBM】の記事が

あと、あたりまえの話ですが、本家のサイトがすごく勉強になります。
とりあえず一般的なトピックを一通り読むと雰囲気はつかめるかと思います。

• CodeIgniter ユーザガイド 日本語版

そんな時、僕が使って調子が良かったのが、

→selectivizr.js

<script type="text/javascript" src="jquery.js"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="selectivizr.js"></script>
<noscript><link rel="stylesheet" href="[fallback css]" /></noscript><![endif]-->

使えるセレクターの種類は、ライブラリーに依存するみたいです。
リンク先に一覧が出ているので参考にしてください。

→selectivizr.js

デザイナーたるもの、オリジナルのマップを作るのが本来の姿ではありますが、なかなかそこに時間を割けないのも本音。

さて、そのグーグルマップでありますが、インラインフレームで埋め込む場合、デフォルトの設定ではふきだしが出てしまいます（たぶん）。

で、わりと簡単に消すことができる事がわかったのでメモ。

&iwloc=B

をURLの最後「output=embed」のあとにつけて

output=embed&iwloc=B

にすればおｋー！

それはインデント！！

タブ×2個でインデントされているのが非常に気に入らなかったのです。
一行二行ぐらいなら、自分で消すのもまぁよかったのですが、Zen cordingに慣れてきて、「div>ul>li*3>a」とか結構入れ子にして使うようになってきたらまぁインデントを消すのがめんどくさいのなんのって！

「普通に入力したほうが早いんジャマイカ・・・」って感じでした。

【Mac】ユーザ名/ライブラリ/Application Suppor/Adobe/DreamweaverCS4/ja_JP/Configuration/Commands/ZenCoding/

【Win】Documents and Settings/ユーザ名/Application Data/Adobe/Dreamweaver CS4/ja_JP/Configuration\/Commands/ZenCoding/

多分このへんにある「zen_dreamweaver.js」というファイルの十数行目（テキトーですいません）の

var indentSize = dw.getPreferenceInt('Source Format', 'Indent Size', 1),

これを

var indentSize = dw.getPreferenceInt('Source Format', 'Indent Size', 0),

に変更して保存。

あとは、dreamweaverの環境設定でカテゴリ「コードフォーマット」の「インデント」の項目で調整してください。

ちなみに僕はタブ1個が好きです！

何が悪くて動かないか解らない時なんか頭に血がのぼってて、結構気付きにくいと思います。
皆さんも気をつけなはれー。

ずーっとAS3の勉強していたのに、iphoneやらipadやらの問題で下火になりつつあるFLASH・・・
寂しい限りです。

FLASHの代わりに勢いの出てきたjavascript、今までなら迷わずFLASHを使っていたトップページのスライドショーなども素敵なライブラリが見事にこなしてしまいます。

僕が注目したのは「coda-slider-2.0」。

毎度のことながら特に僕が語る必要もないのですが、せっかくエントリーを書くのに何もしないのでは面白くありませんよね。

そこで、便利な使い方が色々できる「coda-slider-2.0」の機能の一部をあえて外し、トップページのスライドショーに使うためだけに改造してみました。

→69カスタマイズサンプル

いつものようにjsファイルを読み込みます。
jquery-1.3.2.min.js //jquery本体
jquery.easing.1.3.js //イージングライブラリ(?)
jquery.coda-slider-2.0.js //coda-slider-2.0
coda-slider-69.css //カスタマイズしたスタイルシート

そして本体のコード

<script type="text/javascript">
	 $().ready(function() {
	 $('#coda-slider').codaSlider({
	 dynamicArrows: false,
	 dynamicTabs: false,
	 autoSlide: true,
	 autoSlideInterval: 5000,
	 autoSlideStopWhenClicked: true
	 });
 });
</script>

<div class="coda-slider-wrapper">
    <div class="coda-slider preload" id="coda-slider">
        <div class="panel">
	    <p><a href="#"><img /></a></p>
        </div>
        <div class="panel">
       	    <p><a href="#"><img /></a></p>
        </div>
        <div class="panel">
            <p><a href="#"><img /></a></p>
        </div>
        <div class="panel">
            <p><a href="#"><img /></a></p>
        </div>
    </div><!-- .coda-slider -->	
    <div id="coda-nav-1" class="coda-nav">
        <ul>
            <li class="tab1"><a href="#1">パネル1</a></li>
	    <li class="tab2"><a href="#2">パネル2</a></li>
	    <li class="tab3"><a href="#3">パネル3</a></li>
	    <li class="tab4"><a href="#4">パネル4</a></li>
        </ul>
    </div>	
</div>

#coda-sliderは任意の名前ですよ。
わかると思いますが<img />の部分は表記を省略してあります。
今回、画像のサイズは900px/300pxにしてありますが、もちろん他のサイズでもちゃんと動きます（CSSは調整してください）

いかがでしょうか？
まぁ、普通にコーディングされている方なら特にこんなエントリー見なくてもできると思いますが（汗

今回カスタマイズしたCSSファイルはこちら

※当然のことながら、このプログラムを使ったことによって体の一部がカッチカチになったとしても責任は持ちませんのでご了承ください！！

なんともお美しそうな方ではありませんか、じゅるり・・・はっ！

というか、こちらのエントリー読んでいただければ僕からは特にいうことなかったですね。うん。

div#contents>ul>li*5>a

ctrl + ,を押すと・・・

<div id="contents">
	<ul>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
	</ul>
</div>

ね、簡単でしょう?

※特に難しいことはしていませんが自己責任でお願いします。

※ちなみに僕の場合はMacを使っているので、ローカル環境はMAMPで構築しています。

今回はこちらのサイトを参考にさせていただきました。
→Mac OSXローカルにMAMPでサイト制作環境を構築【アークウェブWebデザインSandBox】

MAMPで仮想サーバーにアクセスすると、初期設定では

http://localhost:8888

になっていると思います。

これを今回は仮に、

• http://localhost:8001 ⇒MovableType用（フォルダ名「MT」）
• http://localhost:8002 ⇒ECCUBE用（フォルダ名「EC」）
• http://localhost:8003 ⇒WordPress用（フォルダ名「WP」）

として設定してみようと思います。

/Application/MAMP/conf/apache/httpd.conf

をテキストエディタなどで修正します。
[Listen 8888]と書かれているところの下にポート番号を追加する。

Listen 8888　//見つけ出した場所
Listen 8001 //MovableType用
Listen 8002 //ECCUBE用
Listen 8003 //WordPress用

ポート番号とフォルダの関連付けをする

Listen 8888
Listen 8001
Listen 8002
Listen 8003 

<virtualhost :8001="">
DocumentRoot &quot;/Applications/MAMP/htdocs/MT&quot;
</virtualhost>

<virtualhost :8002="">
DocumentRoot &quot;/Applications/MAMP/htdocs/EC&quot;
</virtualhost>

<virtualhost :8003="">
DocumentRoot &quot;/Applications/MAMP/htdocs/WP&quot;
</virtualhost>

MAMPからApacheを再起動させればちゃんと動くはず。
「MT」にアクセスするときは

http://localhost:8001

で見れると思います。

さっそくサンプルソースをダウンロードし、パブリッシュ。

「うむ、すばらしい！」赤丸が「わさー」と出ています。

しかし、今回はタイムラインアニメーションで使いたかったので、自由に出したり止めたりできないと、使えません。ぐぐってみると、こんな記事が見つかりました。

→AS3のオープンソースライブラリ「stardust」でパーティクルをお勉強(2)

なんとすばらしい！賢い人はいっぱいいるもんだと。

ClockMakerさんのドキュメントクラスを外部クラス？として呼び出し、

var stardustMC:クラス名 = new クラス名();
addChild(stardustMC);

呼び出すと「わさー」。

stardustMC.emitter.active = false;

で、すとっぷ。

うむ、また明日続き書こ。自由ですいません。

・htmlの最後に読み込んでも上手く機能しない？

他のjsと共にページ最後に読み込ませたところ、上手く機能しませんでした。
なので、もしかしたらヘッダー内で読み込ませた方が良いかもです。

また詳しく理解出来たら報告します。

なんだかよく分からない自信を持ち、調子に乗って来たら自分の事を戒めてくれるアプリ。 誰か作って。