appMobiの使用報告を…
昨日言ってた「appMobi XDK」使ってみたんで報告を。
うーん…なんだろ。。。
使いづらいです。
別に、日本語じゃないからとかそういうことじゃないんですよね。
xCode使ったときは、結構直感的に分かったので。
慣れなんでしょうか？
売りになってる重要なところがクラウドサービスで課金制なのがちょっと…。
よくわかんないけど、じゃあPaypalでいいかな～とか思ってたりします。
Bump送金とかも出来るし。
スマホアプリ組み込み用の決済モジュールをAPIで提供してくれたりとかしないかな…。
あ、そうそう。
このブログなんですが、月間PVがようやく１万を超えました。
下手なこと書けないですね…。
「jQuery Mobile」か「「jQ.Mobi」か。スマホ向けフレームワークが面白い件。
jQuery Mobile、早くも時期バージョンについてアナウンス
毎日目を通す情報サイトのひとつに「Publickey」ってのがあるんですが、その中から二つの気になる記事について。
その一つ目が、このブログでもおなじみ（？）jQuery Mobileです。
昨年の11月に正式版「jQuery Mobile 1.0」が登場したばかりのjQuery Mobileですが、早くも時期バージョンについて「jQuery Mobile公式ブログ」でアナウンスとのこと。
（Upcoming Releases: 1.0.1, 1.1, and beyond）
さっそく覗いてみたので、φ(｀д´)ﾒﾓﾒﾓ...
まずは、ver.1.0.1にてメンテナンスリリース。
We’re planning on releasing our first maintenance release for 1.0 within the next two weeks. This will consist of bug fixes and minor improvements to 1.0 after which we’ll focus on getting 1.1 out the door.
２週間以内ね…仕事が早いな、ぅをい！
でもって、1.1の方は…というと、以下のような項目が上がってます。
・AMD Support: Dependency management, flexible builds and improved code structure.
・True fixed toolbars: Lightweight, CSS-based & broadly compatible.
・Improved AJAX page transitions: Smoother, faster.
1つ目のAMD…ですが、これはAsynchronous Module Definition（非同期モジュール定義）のことで、某半導体メーカーではありませぬ。
何をするかっていうと、jQuery Mobileの内部構造を一新して実行時に必要に応じてモジュールをダウンロードしたりできるように対応するらしいです。
2つ目のTrue fixed toolbarsは、固定のヘッダやフッタを完全にFixedの状態でスクロールさせるようにするとのこと。現在は、スクロール時には消えて、スクロール終了後にまた現れる仕様になってます。
ま、個人的にはあまり実装されなくてもいいんですが。
ただでさえ狭い画面が、ヘッダとフッタに占領されて、表示領域が狭くなるのは…と思うので。
3つ目はAjaxによるページ遷移をスムーズに、より早くするそうな。
これ、後から書くjQ.Mobiが死ぬほど早くてビックリでした。
個人的には、あんなに早くなくてもいいかな…とか思っているのですが。
個人的に気になったのが、Ver.1.2から追加されるウィジェットなんですけど、中でもこれは
江工工工ｴｴｴｴｴｴｪｪｪｪｪｪ(ﾟДﾟ)ｪｪｪｪｪｪｴｴｴｴｴｴ工工工
ってなりました。
そう、ポップアップリスト。
発表が遅いから、jQuery使って組み込むっての授業でやっちまったYO！
というわけで、せっかく教えたことが無駄になりそうな悪寒。
On deck, we have a popup component that is basically a small overlay that can hold any content or widget which makes it super easy to build a menu, tooltip, alert, dialog or even a lightbox with just a link and a few lines of HTML.
まあ、あれだ…基本機能として、任意のコンテンツやウィジェットを保持できる小型の「オーバーレイポップアップコンポーネント」を実装するZE! それはとっても簡単にメニュー、ツールチップ、アラート、ダイアログ、あるいはライボトックスでさえも、数行のHTMLとリンクで構築できるYO！
This is different from a dialog because it actually overlays the current page instead of navigating to a new page so it has a different effect.
これは現在表示しているページとは別の新しいページを読み込んできて現在のページを覆うから、ダイアログとは違うんだぜ、YOU!
たぶん、そんな感じです。
期待(´∀｀∩)↑age↑
iOSとAndroidに最適化したJavaScriptフレームワーク「jQ.Mobi」
jQuery Mobileより小さくて高速…てか早すぎて恐い！
で、もう一つがこちら。
jQ.Mobiのコンセプトは、jQueryとjQuery Mobileの機能のサブセットを、iOSとAndroid向け（Webkit向け）に最適化したものだそうです。
このフレームワークの売りはズバリ、（ファイルの）軽さと（動作）スピードです。
で、実際に試してみました。
うん、たしかに軽い。
サクサク動く。
…が、ちょっと勘違いしてないかなぁ？
授業でも言ったんだけど、やっぱり「アニメーションスピードもUX（ユーザーエクスペリエンス）の大事な要素」なわけで。
タッチしたあとに一瞬の間があって、いきなりシュッと動くのは、心臓に悪いです。
ゲームエンジンってのならともかくとして、こういったフレームワークは別にスピードにこだわる必要はないんじゃないかなぁ…。
ご年配の方が操作したら
ビックリ(ﾟдﾟ)！
▼
;y=ｰ( ﾟдﾟ)･∵. ﾀｰﾝ （死亡…）
ってなりかねません。
やっぱり、イージングとかして滑らかかつ高速…ってのを目指して欲しいです。
今はまだβ版なので、Ver.1.0の正式版ではそのあたりを修正して欲しいな…と。
"if you know JQuery, you know JQ.Mobi"
名前からしてjQueryを意識しているこのフレームワークですが
Our goal was simply to make a version of the JQuery *language* that is optimized for webkit smart devices (ie the overwhelming majority of the smart device market).
私たちの目標は、webkitのスマートデバイス（すなわち、スマートデバイス市場の圧倒的多数）に最適化されているjQueryの*言語*のバージョンを作ることでした。
ってことで、最初からそのつもりで付けた名前みたいです。
ieって「すなわち」って訳すんですね。
最初は
ie not overwhelming majority of the smart device market.
IEはスマートデバイス市場の圧倒的多数ではありません
って言ってるのかと思いました。
とりあえず、今週末は開発環境「appMobi{!}」を試してみたいと思います。
コードのサイズとベンチマーク結果は、以下のような感じみたいです。
ちなみに、Webでベンチマークテストが出来ます。お試しあれ。
http://jsperf.com/jqm3/4
CSS3のTransformsで色々アニメーションできるので、無駄なスクリプトはいらな(ry
Transforms can be animated in a variety of CSS3
どうすか？
回っちゃってますか？
今回設定したCSSはこんな感じです。
/*◆◆◆◆◆◆◆◆◆アイコン回転◆◆◆◆◆◆◆◆◆◆◆*/
div.spinning_icons a{
width:32px;
height:32px;
display:inline-block;
text-indent:-9999em;
background-position:0 0;
background-repeat:no-repeat;
z-index:2000;
overflow:hidden;
margin-left:10px;
float:left;
/*アニメーションさせながら元に戻す*/
transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
}
/*===============<a>タグをアニメーションさせる==========*/
div.spinning_icons a:hover{
transform: rotate(750deg) scale(1.5);
-webkit-transform: rotate(750deg) scale(1.5);
-moz-transform: rotate(750deg) scale(1.5);
-ms-transform: rotate(750deg) scale(1.5);
/* アニメーションの秒数を設定 */
transition: transform 1s ease-out;
-webkit-transition: -webkit-transform 1s ease-out;
-moz-transition: -moz-transform 1s ease-out;
-ms-transition: -moz-transform 1s ease-out;
}
/*===============アイコン画像==============*/
.twitter{ background:url('http://webmage.pro/blog_img/icons/twitter_32.png'); }
.delicious{ background:url('http://webmage.pro/blog_img/icons/delicious_32.png'); }
.digg{ background:url('http://webmage.pro/blog_img/icons/digg_32.png'); }
.dribbble{ background:url('http://webmage.pro/blog_img/icons/dribbble_32.png'); }
.email{ background:url('http://webmage.pro/blog_img/icons/email_32.png'); }
.facebook{ background:url('http://webmage.pro/blog_img/icons/facebook_32.png'); }
.flickr{ background:url('http://webmage.pro/blog_img/icons/flickr_32.png'); }
.foursquare{ background:url('http://webmage.pro/blog_img/icons/foursquare_32.png'); }
.linkedin{ background:url('http://webmage.pro/blog_img/icons/linkedin_32.png'); }
.rss{ background:url('http://webmage.pro/blog_img/icons/rss_32.png'); }
.stumbleupon{ background:url('http://webmage.pro/blog_img/icons/stumbleupon_32.png'); }
.youtube{ background:url('http://webmage.pro/blog_img/icons/youtube_32.png'); }
あとは、ページ内に
<div class="spinning_icons">
<a href="#" class="twitter" title="twitter">Twitter</a>
<a href="#" class="delicious" title="delicious">Delicious</a>
<a href="#" class="digg" title="digg">Digg</a>
<a href="#" class="dribbble" title="dribbble">Dribbble</a>
<a href="#" class="email" title="email">Email</a>
<a href="#" class="facebook" title="facebook">Facebook</a>
<a href="#" class="flickr" title="flickr">Flickr</a>
<a href="#" class="foursquare" title="foursquare">Foursquare</a>
<a href="#" class="linkedin" title="linkedin">Linkedin</a>
<a href="#" class="rss" title="rss">RSS</a>
<a href="#" class="stumbleupon" title="stumbleupon">Stumbleupon</a>
<a href="#" class="youtube" title="youtube">YouTube</a>
</div>
こんな感じでタグを記述しているだけです。
いろいろ書いてあるように見えますが、ほとんどサイズ云々の設定がしてあるので、実際のアニメーションはこの部分で設定されてます。
▼
div.spinning_icons a:hover{
transform: rotate(750deg) scale(1.5);
-webkit-transform: rotate(750deg) scale(1.5);
-moz-transform: rotate(750deg) scale(1.5);
-ms-transform: rotate(750deg) scale(1.5);
/* アニメーションの秒数を設定 */
transition: transform 1s ease-out;
-webkit-transition: -webkit-transform 1s ease-out;
-moz-transition: -moz-transform 1s ease-out;
-ms-transition: -moz-transform 1s ease-out;
}
transform: rotate(750deg) scale(1.5);
▲ ▲
750°回転 1.5倍に拡大
transition: transform 1s ease-out;
▲
transformの部分を１秒でease-outする
という…。
簡単な設定です。
「-webkit-…」とか「-moz-」とか書いてあるのは、まだW3Cで正式に仕様が固まってないからで、いずれは
transform: rotate(750deg) scale(1.5);
transition: transform 1s ease-out;
って２行書くだけでよくなるみたいです。
うーん…簡単ですね。
ちなみに、transformのプロパティは
transform-origin → transformの支点を設定
rotate → 回転
translate → 移動
scale → 拡大／縮小
skew → X軸，Y軸へのゆがみ
backface-visibility → 要素の裏側の可視，不可視
perspective → 奥行き
perspective-origin → 奥行きの支点
transform-style → 2D（flat）と3Dの指定
とゆー感じで色々あります。
プロパティがいろいろあるし、見ながらじゃないとわからないよ…('A`)
って人は、こちらへどうぞ。
http://westciv.com/tools/transforms/index.html
かなり捗りますぞ。
でも、「translate → 移動」ってあまり使わないんじゃないかと思うんですよね。
ホバー前とホバー後の位置を変えるだけで、「transition: all 1s …」ってやればアニメーションするし。
ホバーアクション以外にアニメーション使うことってなかなか無いんですが…。
JavaScriptだけでFLASHに負けないゲームを作れる「enchant.js」が凄い。
えー。。。。
上記のゲームは、「9leap」で公開されているゲームをiFrameで表示したものです。
うーん…凄い。
もはやFLASHいらずですね。
9leapで公開されているゲームはほとんど（？）「enchant.js」というHTML5 + JavaScriptベースのライブラリ（ゲームエンジン）で作られているそうです。
▼「enchant.js」はこちら▼
http://enchantjs.com/ja/?s=ja
たまに思うのですが、こういうのを無料で公開するメリットって何なんでしょう？
EC-CUBEはオープンソースとして公開しても、ちゃんとマネタイズの仕組みはあるんです。
例えば、決済会社の決済モジュール利用料から、ロックオンに幾らかコミッションが入ってくるようなビジネスモデルですし、「AD EBiS」ってサービスと組み合わせることで、マネタイズを図っていたりします。
でも、jQueryとか今回のenchant.jsとか、こういうものはどこでマネタイズ出来ているんだろう…ということをたまに考えるわけです。
オープンソースのマネタイズは、ただ単に作ったアプリ（サービス）に広告を掲載してどうこうする…とかいうのとは違うので、けっこう謎です。
オープンソースの価値の上に SaaS モデルを再定義する…というビジネスモデルは、オープンソースを「使う」側がやるマネタイズ。
これがオープンソースのいいところでもあるんですが…。
オープンソースで、色々な人が開発に参加
▼
開発コストがめちゃめちゃ安くすむ
▼
出来上がったオープンソースを「使って」サービスを行う（マネタイズ）
この流れなら「それ」をオープンソース化するメリットはあるんですけど…。
でも、jQueryとか今回のenchant.jsとかは、そういうのとはまた違った感じがするんです。
iPhone/Android向け投稿型ゲームサイト9leapがドコモの"dメニュー"で本日から配信開始
こういうのは、やっぱりDocomoがお金を払っているんでしょうかねぇ…。
enchant.jsをオープンソースで配布
▼
コンテストを行い、優秀なコンテンツを集める
▼
集まったコンテンツを有料でDocomoに提供
▼
enchant.jsがマネタイズ出来て( ﾟДﾟ)ｳﾏｰ By.ユビキタスエンターテインメント
▼
販促用にこれだけのコンテンツ作るのにかかるコスト考えたら、安くて( ﾟДﾟ)ｳﾏｰ By.Docomo
▼
これだけのライブラリ（ゲームエンジン）が無料で使えて( ﾟДﾟ)ｳﾏｰ By.開発者
って感じなんでしょうか…。
PHPでWebへのリンクがあったら、正規表現で<a>タグを生成する。
http://～で始まる文字列を自動的にリンクに変えたい。
文字列にURLが入ってる場合には、その文字列全体を<a>タグで囲んで<li>タグに入れる…というのをしたいと思います。
jQuery-Mobileでリストにリンクを貼りたい時なんかに使います。
1/15に書いたエントリーで、TwitterのAPIを使って文字列を取得してくるというのをやったわけですが、この文字列の中に「http://…」で始まる文字列があった場合には、その文字列全体をリンクで囲みたい、と。
URLが文字列の中に入っているかどうかは、正規表現で調べます。
今回使う正規表現のURLパターンはこんな感じです。
/http:\/\/[0-9a-z_,.:;&=+*%$#!?@()~\'\/-]+/i
前回やったTwiitterのAPIを使ってユーザーのツイートを取得してくるコードは、以下のように変更出来ます。
//Tweetを取得するためのURLを設定
$url = "http://api.twitter.com/1/statuses/user_timeline.json?screen_name=ikuzo1930&page=" . $_POST['page'];
//file_get_contents()で取得したJSONコードをjson_decodeでデコード
$tweet = json_decode(file_get_contents($url));
foreach ($tweet as $val){
// 文字列を$strに入れる
$str = $val->text;
// URLの正規表現パターンを設定
$pattern = '/http:\/\/[0-9a-z_,.:;&=+*%$#!?@()~\'\/-]+/i';
// 文字全体を<a>タグで囲んじゃう。
$replace = '<a href="$0" data-ajax="false">' . $str . '</a>';
//preg_macth()でURLが含まれているか調べて置き換え。
//URLが存在する場合は置き換えるんだけど$strが重複するのでtrim()
$replaced = ( preg_match($pattern, $str) <> 0 )? trim( preg_replace($pattern, $replace, $str), $str ) : $str;
//出力
echo "<li>" . $replaced . "</li>\n";
}
だいたい、こんな感じです。
もし、文字列全体ではなくURLにリンクを貼りたい場合には、以下のように変更です。
多分…。
//Tweetを取得するためのURLを設定
$url = "http://api.twitter.com/1/statuses/user_timeline.json?screen_name=ikuzo1930&page=" . $_POST['page'];
//file_get_contents()で取得したJSONコードをjson_decodeでデコード
$tweet = json_decode(file_get_contents($url));
foreach ($tweet as $val){
// 文字列を$strに入れる
$str = $val->text;
// URLの正規表現パターンを設定
$pattern = '/http:\/\/[0-9a-z_,.:;&=+*%$#!?@()~\'\/-]+/i';
// 文字全体を<a>タグで囲んじゃう。
$replace = '<a href="$0">$0</a>';
//preg_macth()でURLが含まれているか調べて置き換え。
$replaced = preg_replace($pattern, $replace, $str);
//出力
echo "<li>" . $replaced . "</li>\n";
}
もし、文字列にURLが入っていたらリンクを自動生成するなんて時には使えるかもしれません。
以下は、自分用メモ。
メールアドレスのパターン
/^[-._a-zA-Z0-9\/]+@[-._a-z0-9]+\.[a-z]{2,4}$/
URLパターン
/^(?:http|https):\/\/[\w,.:;&=+*%$#!?@()~\'\/-]+$/
電話番号
/^0\d{1,4}[-(]?\d{1,4}[-)]?\d{3,4}$/
マルチバイト文字の正規表現パターン
"全角カタカナ" + "スペース" だけで構成されてるかをチェックするパターン
^[ ァ-ヶー]+$
"全角ひらがな" + "スペース" だけで構成されてるかをチェックするパターン
^[ ぁ-んー]+$
半角カナが含まれているかチェックするパターン
[｡-ﾟ]
…と。
まあ、色々と正規表現をメモしているわけですが
 |
新品価格 |
こんなのとかあるぐらいですから、正規表現は難しいです。
高え…。
オライリーの本の中でも、高い方の部類に入るんじゃないかな…？
「PHP使いはもう正規表現をblogに書くな」と言わせないでくれ
弾さんのこんなエントリーもあるくらいなので、一朝一夕には理解も使いこなすことも出来ないのが正規表現の奥深さです。
まあ、僕はPHPerとして「ブログに正規表現を書いてしまった」わけですが…。
実際に今回書いたURLのマッチパターンですが、「日本語ドメイン」（お名前.comにたいなやつね）にはマッチしませんし、パラメータ付きのURLにもマッチしません。
たとえば、パラメータ付きのURLの場合だと
/(http|https):\/\/([-._a-z\d]+\.[a-z]{2,4})([\w,.:;&=+*%$#!@()~\'\/-]*)\??([\w,.:;&=+*%$#!?@()~\'\/-]*)/
こんな感じにも書けたりするみたいですが…。
$pattern = '/(http|https):\/\/([-._a-z\d]+\.[a-z]{2,4})([\w,.:;&=+*%$#!@()~\'\/-]*)\??([\w,.:;&=+*%$#!?@()~\'\/-]*)/';
$str = 'http://www.example.com/none/index.php?param=0123&data=999';
$match = array();
preg_match($pattern, $str, $match);
var_export($match);
上記の出力結果
array (
0 => 'http://www.example.com/none/index.php?param=0123&data=999',
1 => 'http',
2 => 'www.example.com',
3 => '/none/index.php',
4 => 'param=0123&data=999',
)
無駄に正規表現を使うよりもparse_url()を使うとか、選択肢はたくさんあると思います。
$url = 'http://username:password@hostname/path?arg=value#anchor';
print_r(parse_url($url));
?>
上の例の出力は以下となります。
Array
(
[scheme] => http
[host] => hostname
[user] => username
[pass] => password
[path] => /path
[query] => arg=value
[fragment] => anchor
)
パンくずリストを自動生成するような場合とか
$list = $_SERVER['PHP_SELF'];
//区切り文字"/"で配列に入れる
$data = explode('/', $list);
こんな処理をしたりする場合もありますし。
要は使い分けなのかなーと思います。
There's more than one way to do it.
やりかたは色々あるし。
高齢者にとって、買い物がしやすいサイトとは…（カート内のユーザビリティ）
シニアマーケットを意識しなければECサイトの売上は伸びない
先日、カート内やページトップに電話番号を掲載しているECサイトが少ない…という話をしました。
やっぱり、電話で注文できるというのは嬉しいものです。
特に、ネット慣れしていない人にとっては
「ちゃんと注文出来てるかどうか」
「個人情報を入力するのは、抵抗がある」
なんて意見が多く見られます。
僕の会社のECサイトでお買い物をした人も、買い物をしたあとに「ちゃんと注文が出来ていますか？」と電話でお問い合わせがあるくらいです。
やっぱり、不安なんでしょうね。
不安と言えば、カード決済。
よく、カードを選択のプルダウンメニューがついてますが、あれってあんまり意味がないんです。
EC-CUBEの決済モジュールにはそんなものついてません。
なぜなら、カード番号でカード会社が解るので、別にメニューとしてなくてもいいんです。
よく、カスタマイズの相談で
「カード選択フォームを付けて欲しい」
ってのがあるんですが、無理無理。
カード会社に送信されるデータに、そんなものは必要ないからです。
一応、選択はできるようにしてありますが、データ自体はカード会社にとってみれば邪魔なモノ。
選択したカードと入力したカードの番号が一致しなかったら決済が失敗してしまうので、わざわざそんなことをする必要もありませんし。
逆に、お客様を混乱させてしまうので必要ないということを言うと
「楽天はできる」
としか言わない。
そんなにいいですかね？…楽天。
値段が安い以外は、ごちゃごちゃしていて使いづらいし、ユーザビリティは最悪。
個人的にはAmazonのほうが100倍使いやすいです。
そもそも、EC-CUBEで構築するようなサイトを楽天と同じようなユーザビリティにするってこと自体がおかしいんじゃないかな…と思います。
楽天が楽天が…って、楽天がなんぼのもんじゃぃ！
って思うわけです、僕としては。
せっかくEC-CUBEを使って自由にカスタマイズ出来るのであれば、下記のサイトのようにユーザーに配慮したUIを取り入れてデザインしたほうがいいんです。
で、これがそのサイトのカートページです。
ちゃんとユーザーに配慮したデザインになってます。
僕が以前に指摘していた「カート内に電話番号」どころか、FAX番号まで掲載されてます。
FAX番号が載っているのは、結構いいですよ～。
ページをそのまま印刷してFAXできたりもします。
みなさん、CSSのメディアタイプ、使ってますか？
印刷は印刷用のCSSを適用出来るんですよ。
つまり、ブラウザで見るままではなく、FAXで送信するのに適したデザインにすることが出来るんです。
印刷時に、通常は隠れている住所などを入力する枠が印刷されて、すぐにFAXできるとか最高ですよね。
ま、僕の知る限り、そこまでしているECサイトはお目にかかったことがありません。
という訳で、みなさんもECサイトをやる際には上記の「たまご屋」さんのサイトを参考にしてみてください。
PHPとAjaxを使って「もっと読む」ボタンをjQuery-Mobileページに簡単に実装。
Create a Twitter-Like "Load More" button using Ajax and PHP
TwitterのつぶやきをPHPで取得してAjaxでDOMに追加していくってのをやってみたので、メモしておきます。
まずは、jQueryMobileで作ったHTMLソースを…。
---- tweet.html ----
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>My Tweet</title>
<!-- jQuery-Mobile -->
<link href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
<link href="/css/site.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div data-role="page" id="toppage" data-theme="c">
<div data-role="header" data-backbtn="false">
<h1><p class="svgfont">t</p>My tweet.</a></h1>
</div>
<div data-role="content" data-theme="c">
<ul data-role="listview" data-theme="d" data-inset="false" id="tweet" style="margin-bottom:10px;"></ul>
<a href="#" id="more" onclick="loadMore();" data-role="button" id="loading">もっと見る</a>
</div>
<div data-role="footer">
<nav data-role="navbar">
<ul>
<li><a href="#"><p class="svgfont">c</p>News</a></li>
<li><a href="#"><p class="svgfont">f</p>FaceBook</a></li>
<li><a href="twitter.html"><p class="svgfont">t</p>Twitter</a></li>
<li><a href="#"><p class="svgfont">@</p>Contact</a></li>
</ul>
</nav>
</div>
</div>
<!-- jQuery-Mobile -->
<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
<!--/ jQuery-Mobile -->
<!--Ajax-->
<script>
var page = 1;
function loadMore() {
$(".ui-btn-text").html("読み込み中...");
$.post('tweet.php', {
page : page
},
function(res){
$(".ui-btn-text").html("もっと読む");
$("#tweet").append(res).listview('refresh');
});
page++;
}//loadMore
$(function(){
loadMore();
});
</script>
<!-- / Ajax -->
</body>
</html>
次は、Tweetを読み込んで<li>を生成するtweet.phpのソースです。
---- tweet.php ----
<?php
$url = "http://api.twitter.com/1/statuses/user_timeline.json?screen_name=ikuzo1930&page=" . $_POST['page'];
$tweet = json_decode(file_get_contents($url));
foreach ($tweet as $val){
echo "<li>" . $val->text . "</li>\n";
}
?>
svgフォントはおいといて、基本的にはこの2つのファイルだけで動きます。
必要なjQuery,jQuery-mobile.js,jQuery-mobile.cssは全部CDNで読み込んでますので。
まずはPHPの方の説明からいきましょう。
基本的には、何もやっていないです。
http://api.twitter.com/1/statuses/user_timeline.json?screen_name=ikuzo1930&page=" . $_POST['page'];
上記のTwitterのJSON-APIからfile_get_contents()で情報を取得してきてjson_decode()でデコード。
foreachで<li>～</li>を生成してます。
本当に、それだけです。
URLの「&page=」のパラメータに入る数字は、tweet.htmlからpostで渡されますが、これは後で。
まあ、こんな感じで生成した要素をAjaxでDOMに追加しているわけです。
PHPの方はあまり説明することがないので、本題にいきましょう。
<!--Ajax-->
<script>
pageパラメータの初期値を設定。
var pageNo = 1;
ボタンをクリックしたときに呼ばれる(onclick="loadMore();"でコール)
function loadMore() {
ボタンの中の文字を変更
jQueryMobileは<a data-role="button">でボタンを作ると自動的に
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">
</span>
が生成されるので、今回はCSSセレクタを.ui-btn-textにしておく
$(".ui-btn-text").html("読み込み中...");
$.post{"key1": "value1", "key2": "value2"…}とう形でデータをpost
今回は{page : pageNo}でデータをtweet.phpにPOST
$.post('tweet.php', {
page : pageNo
},
function(res){
ボタンの表示を戻す
$(".ui-btn-text").html("もっと読む");
<ul id="tweet">～</ul>の中に取得してきたデータ「res」を追加
jQueryMobileで<li>装飾する場合は.listview('refresh')を使う。
.page()でもいいみたいなんですが、うまいこと動かなかったのでとりあえず。
ul要素を含むHTMLを装飾したい場合はlistview()を使うけど
今回のようにli要素しかない場合はlistview('refresh')を使用DEATH。
まあ、ほとんどの場合、li要素の追加ですよね。
$("#tweet").append(res).listview('refresh');
});
変数pageNoの値を１プラスします。
pageNo++;
}//loadMore
ページが読み込まれたときに、とりあえず１ページ目をロードするので
loadMore()を呼びます。
$(function(){
loadMore();
});
</script>
<!-- / Ajax -->
よくよく考えてみたら、ボタンの表示を変えるCSSセレクタは"#loading .ui-btn-text"かな？
ま、今回は別のリストは無いので動くんでいいかなっと。
…とか思ったら、nav要素の中身も全部表示が変わっちゃってるから、やっぱり直してください。
こんな感じに読み込み中…って出て、読み込みが完了したらリストがDOMに追加されて、文字も元に戻るはずです。
数値を書くだけで、自動的にグラフを作成してくれるjQueryプラグイン「Peity」
数値を書くだけで円グラフやら線グラフ、棒グラフを作成してくれるjQueryプラグインがあったので、メモ。
あんまり使い道なさそうなんだけど…。
まずはHTMLのソースを…
<span class="pie">1/5</span>
<span class="pie">226/360</span>
<span class="pie">0.52/1.561</span>
<span class="line">5,3,9,6,5,9,7,3,5,2</span>
<span class="bar">5,3,9,6,5,9,7,3,5,2</span>
<ul>
<li>
<span class="graph"></span>
<select>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4" selected>4</option>
<option value="5">5</option>
</select>
</li>
<li>
<span class="graph"></span>
<select>
<option value="0">0</option>
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</li>
<li>
<span class="graph"></span>
<select>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected>3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</li>
</ul>
<div class="diameter">
<span data-colour="red" data-diameter="200">35/100</span>
<span data-colour="orange" data-diameter="36">2/7</span>
<span data-colour="yellow" data-diameter="32">3/7</span>
<span data-colour="green" data-diameter="28">4/7</span>
<span data-colour="blue" data-diameter="24">5/7</span>
<span data-colour="indigo" data-diameter="20">6/7</span>
<span data-colour="violet" data-diameter="16">7/7</span>
</div>
こんな感じで、要素内に数値を入れるだけで、以下のようなグラフを作成してくれちゃいます。
1/5226/3600.52/1.561
5,3,9,6,5,9,7,3,5,2
35/100
2/7
3/7
4/7
5/7
6/7
7/7
peity.jsの入手はこちらから。
http://benpickles.github.com/peity/
jQueryを読み込んだ後に、peity.jsを読み込みます。
でもって、こんな感じで設定。
<script>
$(function(){
$("span.pie").peity("pie");
$(".line").peity("line");
$(".bar").peity("bar");
//CUSTOM
$("select").change(function() {
$(this)
.siblings("span.graph")
.text($(this).val() + "/" + 5).change()
}).change()
var chartUpdate = function(event, value, max) { $("#notice").text("Chart updated: " + value + "/" + max) }
$("span.graph").peity("pie").bind("chart:changed", chartUpdate);
//サイズ、カラー指定アリの円グラフ
$(".diameter span").peity("pie", {
colours: function() {
return ["#dddddd", this.getAttribute("data-colour")]
},
diameter: function() {
return this.getAttribute("data-diameter")
}
})
});
</script
基本的には
$("span.pie").peity("pie");
$(".line").peity("line");
$(".bar").peity("bar");
の3つだけで動くことは動くのですが、peity.jsの中身を弄ってサイズやカラー変更しなければなりません。
たとえば、円グラフの場合
peity.add(
'pie',
{
colours: ['#FFF4DD', '#FF9900'],
delimeter: '/',
diameter: 100
},
function(opts).....
赤字の部分を変更です。
colours（カラー）、delimeter（区切り記号）、diameter（グラフのサイズ）という感じです。
「Line（線グラフ）」や「Bar（棒グラフ）」も、設定場所は簡単に見つけることが出来るのでいじることは出来ますが、「サイズ、カラー指定アリの円グラフ」でやったように、data-colour="red"みたいな感じでHTMLソースで変更できるようにしておいたほうが捗ります。
lolipopで拡張子htmlのファイルをphpとして動かす。
.htaccessに
AddHandler php5.2-script htm
AddHandler php5.2-script html
こんな感じ。
LolipopはCGI版で動いている模様。
通常のモジュール版なら
AddType application/x-httpd-php .htm .html
こうなんですけどね。
XcodeでiPhoneアプリ作成。といっても「UIWebView」でWeb表示するだけですが。
Creating an iPhone app in Xcode.
How to Display a Web site Using "UIWebView"
あーそろそろやらなきゃな…iPhoneアプリ作成。
今年の初めからそんなことを考えていたのですが、とりあえずxCodeつかってやってみました。
休日に、ジュンク堂で６時間ほど立ち読みして、いろいろと良い本がないかと見て回ったんですが…。
FLASHで作れたり、TitaniumとかPhoneGAPとかいろいろありすぎて、結局どれを使うか考えが纏まらなかったので、今回はxCodeを使って作ってみることにしました。
をい！
前回FLASHで作る言うとったやんか！
…というツッコミは置いといて。
Objective-Cか…。
全然関係ないですが、最近のアプリ開発はUIやらコンポーネントやら（つまりオブジェクト）を選んで、それに対して何かを実行したり動作させたりするんですよね。
かなり便利です。
普段、コードしか見ないので。
Webで使うボタンとかのUIも、基本的にはCSS…つまりコードで実装しちゃいますし、フォーム部品なんかもブラウザ提供の有りものを使いますし。
それが目に見えるUIとして提供されるか、コード群として提供されるかの違いだけなんですけど、やっぱり見ながら云々ってのはいいですね。
前にVBをやったときも、そう思ったんですけど。
FLASHのコンポーネントみたいなもんですかね。
やたら制作しやすいです。
で、本題。
時間もなかったので、今回はシングルビューで「UIWebView」を使ってWebページを読み込んでくるというアプリをつくりました。
基本、Web屋なんで「実は中身は全部Webアプリだよーん(ﾟ∀ﾟ)ｱﾋｬ」なアプリにした方が色々捗るわけです。
こんな感じの仕上がりです。
▼▼だらだらと長くなりそうなんで、PDFにまとめてみました。▼▼
[webview.pdf (3.8MB)]
よかったら見てみて下さい。
あ、そうそう…。
コードはまだまだ完全じゃありません。
あくまでも「Webページを読み込んできて表示する」という動作をさせてるだけなので、完成ではないですよ。
一応、シミュレータでは動きましたが…。
xCodeのインストールから作成まで、ほんの３時間程度あれば出来ちゃいます。
が、しかし。
「なにやら、アプリ制作が流行ってるらしいから、乗らなければ…」
なんて感じで始めてもしょうがないんですよね。
とくにWebアプリをわざわざネイティブアプリに読み込んできて表示するだけ…のアプリの場合。
僕の場合は、MobileSafariより表示領域が大きく取れるので、前回のエントリーの「縦書きページ」を読み込む「ニュースリーダーアプリ」にしてみようという目論見があってのこと。
やっぱり、新聞とかってなぜか「縦書き」のほうが見やすいんですよね。
というわけで、縦書きのニュース記事を読み込んできて表示出来るアプリを作って新聞社に売り込みに行こうかと思ったわけです。
まあ、単なる妄想ですけどね。
iPhoneに産経新聞のアプリを入れてるんですが、あれって紙面をそのままのレイアウトで表示jするだけで情報の整理が出来てないから、iPhoneで見るのはしんどいし。
ちゃんと情報を整理してあげて、読みたい記事だけを選んで読めるような感じにしてあげて、さらに「縦書き」ってのが必要なんじゃないかと思うわけです。
新聞だけでなく、ラノベとかケータイ小説系の表示にもいいかも。
需要があるかどうかはわかりませんが、せっかく縦長サイズデバイスなんで、縦書きにはこだわっていきたいと思います。
今、日本の家電メーカーに一番必要なものは、「どんなライフスタイルを人々に提供したいか」というビジョンとパッション（＝熱い思い）だと思う。どのOSを使うのかとか、何メガピクセルのカメラを搭載するとかは、何らかの目的を達成するための「道具」に過ぎない。そして、売り上げとか利益とかマーケットシェアは「結果」にしか過ぎない。
中島聡ブログ「Life is beautiful」より引用
まったくもっておっしゃるとおりです。
「どんなライフスタイルを人々に提供したいか」ということでいうと、さっき言ったように「情報を整理してあげて、読みたい記事だけを選んで読めるような感じにしてあげて、さらに『縦書き』」って体験（エクスペリエンス）を提供したいと思います。
デバイスやプラットフォーム、開発環境…なんてのはそのためのただの道具ですからね…ホント。
売り上げとか利益とかマーケットシェアは「結果」にしか過ぎない。
個人的にこのフレーズが好きです。