JavaScriptなどのプラグインを使用せず、CSSのみでフォームのラジオボタンやチェックボックスを画像で装飾する方法です。
さまざまな方法があると思いますが、1つの方法としてご参考いただければと思います。
まず、例えば以下のような未選択状態と選択状態のものを並べた装飾画像を1つ用意します。
今回は横幅15px、縦幅15pxの画像を縦に並べたもので装飾してみます。
次にHTMLの用意です。
<label><input type="radio" name="radio" /><span class="image"></span>ラジオボタン1</label> <label><input type="radio" name="radio" /><span class="image"></span>ラジオボタン2</label> <label><input type="radio" name="radio" /><span class="image"></span>ラジオボタン3</label> <label><input type="checkbox" /><span class="image"></span>チェックボックス1</label> <label><input type="checkbox" /><span class="image"></span>チェックボックス2</label> <label><input type="checkbox" /><span class="image"></span>チェックボックス3</label>
FuelPHPのOilコマンドを使ったソース生成がものすごく便利です。
コマンドラインからOilコマンドを実行するだけで、Model、ViewやControllerクラスを自動生成してくれます。
また、Model生成時には、DBに定義したテーブルをcreateしてくれたり、cronジョブを実行してくれたりと、MVCフレームワーク特有のめんどくさい準備作業を自動化してくれます。
以下、今回確認した環境です。
- Windows 7
- xampp 1.8.2
- FuelPHP 1.7.2
軽量で柔軟性に優れいていると話題のFuelPHPをWindows環境にインストールしてみます。
FuelPHP » A simple, flexible, community driven PHP5.3 framework.
今回検証した環境は以下の通りです。
- FuelPHP 1.7.2
- PHP 5.4.19
- xampp 1.8.2
- Windows 7
PHPはxamppのものを使います。
FuelPHPはPHP 5.3以上で動作するという事なので、要件は満たしています。
登録・エントリーフォームなどでよくみかける「住所検索」ボタン、実際に実装する機会があったので、ライブラリ「ajaxzip3」を試してみました。
ajaxzip3/ajaxzip3.github.io · GitHub
結果から申し上げると、非常に簡単に導入することができました。
「世界一、簡単に設置できる郵便番号検索を目指して!」のキャッチコピーもすばらしいですね。
iPhoneやAndroidなどスマフォサイトでtableを閲覧する場合に、以下のように横にボリュームが大きいと表示崩れが発生する場合があります。
dummy | dummy | dummy | dummy | dummy | dummy |
---|---|---|---|---|---|
dummy | dummy | dummy | dummy | dummy | dummy |
この問題の回避策のひとつとして、横スクロールさせる方法があります。
スマフォブラウザではframe、iframe要素などでスクロールバーを表示させない仕様ですが、
実は、スタイルで指定してあげれば、スクロールバーが表示されなくとも、スクロール操作は可能なのです。
jQueryプラグインを組込む場合、jQueryのバージョンに依存して動作したりしなかったりという事が稀にあります。
例えば、以下のようにjQuery 1.4.4を読み込んでいる既存のページを考えます。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script src="jquery.sample.js"></script>
任意のプラグイン「jquery.sample.js」は1.4.4には対応しておらず、1.8以上のjQueryを必要とするため、
上記のような順でライブラリを読み込むとエラーが発生します。
ここで、1.4.4はCMSのテンプレートとして組み込まれており、サイト全体への影響なども踏まえて簡単にはバージョンアップはできません。
本来、それらの影響を踏まえてバージョンアップすることが望ましいですが、
「バージョンアップできない」という判断に至ったとします。
最近マシンが重くなり、eclipseを使った開発も少しストレスを感じるようになりました。
そこで別のIDEへの乗り換えを検討しているのですが、今回はeclipse orionの環境構築にチャレンジです。
「eclipse orion」はeclipseを更に静的web開発に特化させた開発環境で、HTML、CSS、JavaScriptエディタです。
(基本的にPHPなどプログラムには対応していないので注意が必要です)
webベースでブラウザ上にエディタを展開するのが大きな特徴で、ブラウザでそのままプレビュも行えます。
いわゆるクラウド風ですね。
基本的には以下のサイトからサービスアカウントを作成し、ソースはクラウド上で管理します。
Orion – Open Source Web and Cloud Development Environment
ブラウザ上で動作させるので、eclipseに比べるとだいぶ動作は軽くなるというメリットがあります。
さらに、クラウド上で完結するため、開発の場所を選びません。
しかし、仕事上、ソースなどの管理をクラウドに移行するにはセキュリティや運用上のハードルがあります。
そこで、今回はorionの開発環境をローカルに構築し、ローカルのソースで開発できる環境を作ってみます。
ちなみに私が試した今回の内容は、Windows 7上でorion 8.0をインストールしました。
アプリ開発ブーム?の中、私は個人的にその市場への参入をためらっていました。
- iPhone、Androidなどアプリブームは、現在がピークであって、数十年という将来を見越すと衰退するのではないか。
- その割には、Object-CやJAVAなど習得する技術の多さ、実機や開発環境導入など設備コスト、個人で参入するには敷居が高い。
100年先に残っているのは結局Webなのではないか、という考えから、とりあえずWeb一本で通していく所存でした。
しかし、「deep link」や「PhoneGap」といったキーワードの登場により、アプリとWebの境界線がなくなるのではないか、今後共存の道が開けていくのではないかという考えに変わりました。