2011 9月 ITかあさん

ITかあさん

2011年09月27日| jQueryMobileでスマートフォンサイトを作ろう

jQueryMobile　toggle

jQueryMobile　toggleを表示


DEMO
 
;

jQueryMobileではtoggleも用意されています。上記はtoggleで渡された情報を取得するスクリプトです。
selectタグとdata-role=”slider”を組み合わせることで、スマートフォンサイトUIっぽいtoggleの実装が出来ます。
『どちらか必ず選ぶ』という意味ではradioが妥当な気もするのですが、レイアウトが崩れてしまうようで、selectのみ実装可能なようです。



Toggleを作ってみよう


現在選択中のvalueの値を取得します
2011年09月26日| cakephp雑記帳

CSVダウンロード機能ならやっぱりCakephp　CSV Hepler！

CakephpではCSVダウンロードに便利なヘルパー　CSV Heplerが存在した

マスター管理画面の追加機能でCSVダウンロードを機能追加することになり、CSV Heplerがすごく便利だったのでメモしてみんなにも伝えたい！
基本的な使い方は下記のURLの通りです。
なお、PHP5より利用可能です。
私はCakephp1.3.5にて作業し、問題なく動作することが確認できました。

参考URL

CakePHP – CSVダウンロード（エクスポート）機能を実装する『CSV Helper』 まとめ　高橋です

ちょっとだけ解説

基本的には参考URLの通りに作業すれば何ら問題ありません。すごく簡単です。任意のファイル名は日本語でもなんでも自由に設定できます。int型のデータを日本語に置き換えることもできるようで、この場合変数名はフィールド名と一致させておけばよいようです。
実は長らくCakephp触っていて、初めてcompactという関数に出会ったのですが、setと違い、変数を一度にまとめて設定できる関数のようです。

//CSVダウンロード	
function csv() {
        Configure::write('debug', 0); // 警告を出さない
        $this->layout = false;
        $filename = '相互リンク' . date('YmdHis'); // 任意のファイル名
    　  $category= array('1' => 'カテゴリー１', '2' => 'カテゴリー2');// データを文字列に変換できる
        $th = array('id','permission','category','url','name','email','created'); // 表の一行目を作成
        $td = $this->Link->find('all'); //表の内容を取得
        $this->set(compact('filename', 'th', 'td'));
    }

いや～、Cakephpってホント素晴らしいですよね。

2011年09月22日| cakephp雑記帳

Cakephp saveエラーでの出力

Cakephp saveエラーでデータの登録が失敗した場合の処理を別ける方法です。

Controller

if ($this->Item->save($this->data['Item'])) {
$this->redirect('/items');
}else{
$this->set('error', 'データを登録できませんでした');
}

View

if (!empty($error)) {
        echo '' . $error . '';
    }

ifで分岐させただけでした・・・でもデータが登録出来なかったときとするならば、単純にこれで十分ですね。

2011年09月21日| jQueryMobileでスマートフォンサイトを作ろう

jQueryMobile　ラジオボタン、チェックボックス

jQueryMobileでフォームを出力しましょう。jQueryMobileでは多彩なフォームUIを用意してくれています。
フォームを使いこなせれば、jQueryMobileをUIにして、アプリなんかも作れそうですね。
数が多いので、フォームのパーツごとに記事を書きたいと思います。

jQueryMobile　フォーム（form）の書き出し

フォームの基本的な書き方については通常のHTMLと何ら変わりありませんが、スマートフォンの場合はHTML5で書いていくのがよいでしょう。

チェックボックス：checkbox

レイアウトの変更については前回のナビゲーションレイアウトについての記事が参考になるかと思います。
controlgroupで囲ってあげると、パーツをグループ化することができ、逆にはずすと２つ目のチェックボックスのように３つバラバラになります。

3つ目は、チェックボックスの箱が隠れているものの、これも立派なチェックボックス。
ただどうしても他のパーツのようにチェックボックスの箱を表示してあげることが出来ませんでした。
3つを横並びにするにはCSSの追加が必要になります。CSS記述についてはソースコードを参照してください。

フォームパーツはfieldcontainで囲う

フォームのパーツ全体はdata-role=”fieldcontain”で必ず囲ってあげましょう。
囲ってあげないとレイアウトがくずれてしまうようです。











ラジオボタンあれこれ

DEMO

ラジオボタン：radio

ラジオボタン(radio)も、チェックボックスと全く一緒ですね。
ソースはほとんど一緒になります。
３つ目のラジオボタンですが、やはり3つ横並びにすると、ラジオボタンの枠が消えてしまいます。
でも、ちゃんとラジオボタンのように１つしか選択できないので、特に問題は無さそうです。











ラジオボタンあれこれ













ラジオボタンあれこれ

DEMO

ラジオボタン、チェックボックスを横並びにすると…

非常に残念なのですが、ラジオボタン、チェックボックスをそれぞれ横並びにすると自動でボタンの様なスタイルがあたり、動作は問題ないものの、見た目が全くラジオもチェックボックスも一緒なのでユーザビリティ的にやや難がありそうです。
3つ横並びにしたい時はCSSにおいて　記述をもう少し追加してあげる必要がありそうです。
(それはまたの機会ということで・・・・)

2011年09月16日| 物欲ノート

ハイクオリティー・サザエさんクッキーをもらった

旦那の実家からサザエさんクッキーをもらった

旦那の実家からサザエさんクッキーをもらったんです。
丸いクッキーにどうせサザエさんがプリントしてあるだけだろうと思ったら、

ところがどっこい！

なんかムダにクオリティーが高いぞ！？しかも家計図付き！！

そんなわけでサザエさん一家(クッキー)を順に紹介していきます

波平さん

一家の大黒柱、波平さんがやさしく微笑んでいます。うっかり髪の毛2本で海平さんってオチは・・・・

ありませんでした。

おフネさん

一家の優しいお母さんはクッキーになっても慎ましやかなお顔をしています。

サザエさん

ご存知主役のサザエさん。しかし残念なことにディテールが細かいせいか、一家のクッキーの中で一番サイズが小さく、主役のオーラが感じられません。

タラちゃん

ワカメちゃん

・・・・あまり２人の区別がつきませんでした。ま、ここはスルーで。

タマ

ディテールが一番単純だからでしょうか、全体の中で一番大きく、オーラ出してます。

カツオくん

磯野家のムードメーカーのカツオ君。何かやたらと
坊主のイボのクオリティーが高い。

緊急事態発生！マスオさんが行方不明だ

ここまで順調だったサザエさん一家の捜索でしたが、お父さんが何枚も連続して出てくるばかりで一向にマスオさんが出てきません。

居候だから、仕方ないのかな・・・

と、諦めていたその時！！

マスオ発見！！

これと言って、普通なのですが、クッキー50枚中マスオさんはたったの一枚しかありませんでした

即、息子の餌食になる。さらば、マスオ兄さん・・・・

ちょっと携帯で写真撮っただけなので表示が薄いんですが、
実際はもうちょっと顔がはっきりしていて、クオリティーが高かったです。
お味は普通のおいしいクッキーでしたよん。

2011年09月15日| PHP雑記帳

PHPディレクトリ作成　mkdir

mkdir($dir, 0777)でパーミッションが変更されない。

どうしてもmkdirだけでパーミッション777にならなければ、chmod($dir, 0777)も一緒に使ってみるといいみたい。
知りませんでした・・・

//ディレクトリ、無ければ作成		
		if(!is_dir($dir)) {
		mkdir($dir, 0777);
		chmod($dir, 0777);
		}
2011年09月14日| jQueryMobileでスマートフォンサイトを作ろう

jQueryMobile　ナビゲーション表示

ちょっと更新が遅れましたが、jQueryMobile　ナビゲーションについてです。ヘッダーやフッターにナビゲーションを表示して、よりスマートフォンサイトっぽく仕上げていきましょう。

ヘッダーにナビゲーションを表示する

まずはヘッダー内に下記のようにdata-role=”navbar”でリンクを設置して下さい。
なお、class=”ui-btn-active”とすると、リンクをアクティブ状態にすることが出来ます。

jQuery Mobile

余白を埋める

先ほどのheaderのナビゲーションは変に余白がありましたが、それをきっちり並ぶようにします。基本的にはaタグを裸で設置するのを止めて、liタグで囲ってあげるようにしただけです。

jQuery Mobile

DEMO

ヘッダーナビゲーションは5個が限界？？

ヘッダーにナビゲーションを設置する際、ナビゲーションが6個を超えると2列表示に切り替わります。6個以上のヘッダーナビゲーションは常に2列表示です。

DEMO

“content”の基本的なナビゲーション

ナビゲーションはヘッダーだけではありませんね。data-role=”content”の中にもナビゲーションを表示してみましょう。
複数ボタンがあり、それらをグループとして結合させたい場合はdata-role=”controlgroup”を使います。
デフォルトでは横同士で結合ですが、data-type=”horizontal”を設定すると、縦同士で結合することが出来ます。
なお、一番したはフォームのボタンです。

DEMO

ナビゲーションにアイコンを追加する

(ここから追加)
さきほどナビゲーションを少しアレンジしてアイコンを表示してみたいと思います。data-iconはアイコンの種類を、data-iconposはアイコンの場所を設定することが出来ます。

DEMO

data-iconのパラメータについて

data-iconposには下記の通りのパラメータが設定できます。

設定 アイコン
alert 注意(びっくりマーク)
data-icon=”arrow-l” 左矢印
data-icon="arrow-r" 右矢印
data-icon="arrow-u" 上矢印
data-icon="arrow-d" 下矢印
data-icon="delete" ×印
data-icon="plus" ＋印
data-icon="minus" －印
data-icon="check" レ点
data-icon="gear" ギア
data-icon="refresh" 再読込
data-icon="forward" 前進
data-icon="back" 後退
data-icon="grid" グリッド
data-icon="star" 星
data-icon="alert" アラート
data-icon="info" びっくりマーク
data-icon="home" 家
data-icon="search" 虫眼鏡

data-iconposのパラメータについて

data-iconposはアイコンの表示場所を設定できます。

bottom テキストより下
left テキストに対して左側
notext テキスト無しで、アイコンだけを表示
right テキストに対して右側
top テキストよりも上
2011年09月13日| cakephp雑記帳

Cakephpの命名規則を完全無視して作ってみた

Cakephpにはテーブル名をつけるのにも、フィールド名をつけるのにも、コントローラーにも命名規則がありますが、この命名規則に沿わない、いや、むしろ完全無視してアプリケーションを作ってみました。
元々Cakephpベースで作られていないサイトに対して、新規で別の管理画面を作ろうと思った時、命名規則に全く沿わないテーブル、フィールド名ですでに構築されていまして、そのデータのままCakephpを何とか利用しようと思って今回の記事の結果にたどり着いたわけです。

命名規則に反したテーブル、id

本来命名規則に沿って作ることがCakephp開発の前提なのですが、Cakephpではなから作るつもりなかったものを、Cakephpで機能を追加しようと思ったら、現状のテーブル名、フィールド名のまま開発していかなければなりません。

  元の名前 命名規則
テーブル名 banner banners
連番(プライマリ) seq id

テーブル名が命名規則から外れていた時のModelの書き方

  
class Banner extends AppModel
{
var $name = ‘Banner’;
     function __construct() {
      $id = array("id"=>false,//idでプライマリならtrue
                      "table"=>"banner",//テーブル名
);
//$idになりうるprimaryKeyのフィールド名を定義
      parent::__construct($id);
      $this->primaryKey = "seq";
  }
}

コントローラーが命名規則と外れた場合

コントローラーについては悩む点は特になく、ただ自動でdataに入らないので、$this->Post->read();で読み込んだものが、自動でview側に渡らないので、$this->setしてあげる必要あり。

function edit($id = null) {
$this->Banner->id = $id;
if (empty($this->data)) {
$this->data = $this->Banner->read();
$this->set(‘data’, $this->data);
} else {
if ($this->Banner->save($this->data['Banner'])) {
$this->redirect(‘/url’);
}
}
}

一通り命名規約から外れた際のフォームヘルパー(formヘルパー)の書き方

モデル名とコントローラー名に影響されることが多いのがフォームヘルパー(formヘルパー)だったりします。
例えば、RecCompanyモデルを使っているのに、コントローラーの名前がCompaniesだった時。
基本的には毎回正しいモデル名を割り当ててあげる必要があり、けっこう面倒です。

$form->create

  
echo $form->create(‘RecCompany’, 
array(‘type’ => ‘post’, ‘url’ => ‘/companies/recruit/’.$id));

$form->input

  
echo $form->input(‘RecCompany.message’,array(
‘label’=> false,
‘size’ => false,
‘div’=>false,
‘class’=>’inp-form required’,
‘id’=>false
)
);

何事も規約を守ったほうがCakephpの機能を最大限に活かすことが出来ますね。

2011年09月09日| jQueryMobileでスマートフォンサイトを作ろう

jQueryMobile　リスト表示をアレンジ

前回の記事でjQueryMobileでのリスト表示について書きましたが、さらにこのリスト表示のデザインをカスタマイズすることが出来ます。

リストタグのリンクを２つに分ける

jQueryMobileでは一つのリストタグの中に２つのリンクを持たせると、
スタイルを自動で２つに分けてくれます。

マークアップ

<ul data-role="listview">
 　
<li>
 　　　
<a href="#">メインのリンク</a>
 　　　
<a href="#">サブリンク</a>
 　
</li>
 　
<li>
 　　　
<a href="#">メインのリンク</a>
 　　　
<a href="#">サブリンク</a>
 　
</li>
 　
<li>
 　　　
<a href="#">メインのリンク</a>
 　　　
<a href="#">サブリンク</a>

</li>

</ul>

プレビュー

DEMO

リストタグのリンクを3つに分ける

jQueryMobileでは1つのリストの中に２つ以上のリンクを持たせることが出来るのですが、1つのリストに3つのリンクを持たせてるとこのようになります。
これは、デフォルトではｊQueryMobileがリストの中の最初と最後のリンクにしかスタイルをあててくれないためです。

真ん中のリンクにクラスを当てる。

真ん中のリンクについては自動でクラスが当たらないため、自分で書いてあげる必要があります。

<li>

<a href="#">メインのリンク</a>

<a href="#" class="ui-link-inherit">サブリンク：1</a>

<a href="#">サブリンク：2</a>

</li>

DEMO

リストに画像を設置する

こんな風にちょっとTwitter風の画像付きリスト表示をしたいと思います。

マークアップ

<li>

<a href="#">
<img src="./images/no-image.gif" alt="hogehoge" width="50" height="50"/>

サブリンク：1</a>

<a href="#">サブリンク：2</a>

</li>


画像が左に寄りすぎていたり、画像とテキストの間に隙間が開きすぎていたりと色々と収まりが悪いですね。

DEMO

画像付きのリストのCSSを変更する

jquery.mobile.min.cssを直接変更するのは、別のところに不具合が起きたら嫌なので今回はHTMLファイルに直接書こうと思います。
HTMLの修正は行いません。直接同一のHTMLにCSSの記述を追加してあげてください。
当然画像の大きさによって高さも変更になるでしょうが、デフォルトではmin-height: 60pxになっています。ここは自分でちょうどいい高さに変更してあげてください。後は書きのposition:absoluteをやめて、paddingを調整してあげてください。

<style>

.ui-li-has-thumb .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-thumb {

padding-left: 10px;

min-height: 50px;

}

.ui-li-thumb, .ui-li-icon {

position: inherit;

}

</style>

DEMO

最後にspanでツイート数(？)も表示して完成です。

<li>

<a href="#">

<img src="./images/no-image.gif" alt="hogehoge" width="50" height="50"
class="ui-li-ico"/>

サブリンク：1

<span class="ui-li-count">3</span>

</a>

<a href="#">サブリンク：2</a>

</li>

DEMO

なかなか　カッコよく出来ましたね。
次回はナビゲーションメニューについてです。
更新は月曜日を予定しています。お楽しみに！

2011年09月08日| jQueryMobileでスマートフォンサイトを作ろう

jQueryMobile　スマートフォンっぽいリスト表示

今回はjQueryMobile　リスト表示についてです。前回までで簡単な文字の表示やリンク、ページ遷移について書きましたが、いよいよスマートフォンらしいレイアウトを作りたいと思います。

ベーシックなリスト表示

ulタグ、またはolタグに対して、data-role="listview"属性を付与してあげるだけでスタイルが自動で当たります。
さらに、リストで　かつ　リンクがある場合は自動で矢印も表示されます。

プレビュー

マークアップ

マークアップについては、contentの中身以外は前回と同じなので省略してあります。

<div class="content" data-role="content">

<h3>ベーシックなリスト:ul</h3>

<ul data-role="listview">

<li><a href="#">リンクあり</a></li>

<li>リンク無し</li>

</ul>

<br/>

<h3>ベーシックなリスト:ol</h3>

<ol data-role="listview">

<li><a href="#">リンクあり</a></li>

<li>リンク無し</li>

</ol>

</div>
DEMO

リスト表示中にdata role=”divider”で分割

さきほどは見出しタグで見た目を区切りましたが、liタグ中にもdata role=”divider”で区切ることが出来ます。

プレビュー

マークアップ

<div class="content" data-role="content">

<ul data-role="listview">

<li data-role="divider">リンク1</li>

<li><a href="#">リンク</a></li>

<li><a href="#">リンク</a></li>

<li><a href="#">リンク</a></li>

<li data-role="divider">リンク2</li>

<li><a href="#">リンク</a></li>

<li><a href="#">リンク</a></li>

<li><a href="#">リンク</a></li>

</ul>

</div>
DEMO

リストを入れ子にするとページ遷移できる

リストを下記マークアップのようにすると、リンクを作っていないのに、子要素のul、孫要素のulまでまるでリンクのようにページ遷移することが出来ます。

マークアップ

<div class="content" data-role="content">

<ul data-role="listview">

  <li>親:li

    <ul>

      <li>子:li

        <ul>

        <li data-role="divider">以下 孫:li</li>

        <li>孫:li(1)</li>

        <li>孫:li(2)</li>

        </ul>

      </li>

    </ul>

  </li>

</ul>

</div>
DEMO

入れ子リストに補足する

例えば入れ子になっているリストの要素数を入れたり、補足する文字列を入れたり、何かと使えそうなspan class=”ui-li-count”

<div class="content" data-role="content">

<ul data-role="listview">

  <li>親:li

    <ul>

      <li>子:li<a href="#"><span class="ui-li-count">hogehoge</span></a>

        <ul>

        <li data-role="divider">以下 孫:li</li>

        <li>孫:li(1)</li>

        <li>孫:li(2)</li>

        </ul>

      </li>

    </ul>

  </li>

</ul>

</div>
DEMO

リストの表示についてはもっとアレンジすることが出来るのですが、長くなってしまったのでまた次回！
次回はTwitter風のリスト表示にチャレンジします

« »