京巡りガイドの機能を僅かに追加しました。

京都における観光地やホテルなどのルート案内、および情報を閲覧をできる「京巡りガイド」ですが、検索ページ・詳細ページにおいてバス停に付帯情報がある場合に表示するように機能を追加しました。

検索ページや詳細ページにおいて、バス停の立つ場所が色々と分かれて複雑である場合、京都市バス®サイト内の説明ページへのリンクを表示します。


また、「○○経由のみ停車」「○○ゆきのみ停車」「○○ゆきバス停は1本東」などの付帯情報がある場合も、一緒に表示します。


なお、今回も登録データを追加しており、1,000 件を超えました。

また、これは登録側のことですが、Google Maps のマイマップではデータの管理を行うにあたり、UI がだいぶとイケてないので、マイマップを DB にすることをやめ、独自でバックエンドをこしらえました。ただ、近日中に全て WordPress として稼働させる予定です。

【京巡りガイド】
http://guide794.info/

「京巡りガイド」の機能を少し変更しました

先日 リニューアルした京巡りガイド ですが、機能を少し変更しました。

変更点は以下の通りです。

1. 詳細ページでの出発地が「現在地」の場合、および「現在地最寄りで検索」を選んだ場合に現在地の再取得と「現在地最寄りで検索」のヒット件数の更新を行うように修正。
2. 路線ページで、路線中にある駅名やバス停名を押すことで、出発地はそのままで目的地を変更して詳細ページを表示する導線を追加。
3. スマートフォンで本サイトを表示した場合、画面下部のメニューに「現在地地図」を追加。

今後、機能の追加・変更・削除や、神社仏閣・飲食店などのスポットデータの追加があれば、モーダルウィンドウでお知らせします。

「京巡りガイド」をリニューアルしました

去年一度リニューアルした「京巡りガイド」ですが、この度またリニューアルしました。

京巡りガイド
動作環境：iPhone/Android 4/Google Chrome/Safari/Firefox/Opera

このウェブサービスは、京都市には色んな名所旧跡があるけど、それらはなかなか電車で行きづらいところにあるけど、バスだと巡りやすいということを踏まえ、様々な神社仏閣・名所・ホテル・飲食店などを電車とバスでルート案内する目的で作っています。
これに付随して、ホテルなら楽天トラベルなどで予約を、飲食店なら食べログで情報取得を、すぐにできるようにしてあります。

京巡りガイド | Archives | Flügel にて詳しい説明をさせていただいておりますので、ご興味があればご一読ください。

今回の変更点は以下の通りです。

1. jQuery Mobile の撤廃し、独自 UI へ変更

前回のリニューアルでは、jQuery Mobile を使ってみるという面があったので、全面 jQuery Mobile でしたが、個人的な好き嫌いもあって今回全て撤廃し、UI は独自に構築しています。jQuery Mobile に頼っていた画面遷移は Backbone.js を使っています。

2. 内部構造の一新につき、より正確なルート案内を実現

今までは、データベース代わりに使っていた Google Maps のマイマップで得られる KML を分解して使っていましたが、今回はその KML から一度 json に変更したものを読み込んでいます。それにより、内部での情報管理や計算がしやすくなり、データの読み込みスピードも速くなりました。また、最初のリリースから手をつけていなかったロジックも全面的に変更し、ルートの計測がより正確になりました。

3. ルート案内には徒歩時間も考慮

上記とも関連しますが、今回は出発地と目的地で案内する最寄りの駅やバス停までの徒歩時間もルートの時間として計算していますので、今までよりももっと現実味のある案内になりました。なお、徒歩時間は、一般的には分速 80m ですが、道路区画や信号等も考慮しなければならないので、分速 60m で計算しています。

4. Twitter/Facebook/foursquare への同時投稿

以前から Twitter と Facebook への投稿はできましたが、今回は Facebook/foursquare でのチェックインも可能にしております。

5. Facebook/foursquare でのチェックインは予め ID があるのでそのまま投稿

チェックインを行うには通常、その場所（大抵は現在地）から検索して、該当の場所にチェックインという流れですが、データには予め該当するチェックイン ID を記録しているので、検索せずにそのままチェックインできます。

6. スポットデータを約 900 件へ増加

このウェブサービスで使用しているデータは、上述したように、Google Maps のマイマップ機能を使って、ひとつひとつピンを立て、そのピンに様々な情報を記録し、データベース代わりとして使っています。このピンを今回約 900 件へと増加させました。

7. Android 4 での GPS 対応

以前は iOS 端末と Android 2.x 系でのみ有効だった GPS 機能を、今回は Android 4 にも対応させました。

京都での観光の際に、お役に立てたら幸いです。
京巡りガイド

CSS3 によるローディングアニメーションを生成する jQuery プラグイン jquery.cssloading.js をリリースしました

CSS3 によるローディングアニメーションを生成する jQuery プラグインを作ってみました。iOS や Android といった、スマートフォン用のプラグインという位置づけです。cssloading() でアニメーション開始、stopcssloading() でアニメーション停止を行います。アニメーションの形やスピードなどは、プロパティを与えて設定します。
GitHub: jquery.cssloading.js

☆確認環境
iOS/Android

☆プロパティ一覧

• type：アニメーションの形（dot/line/square/block/eddy）
• width：表示されるアニメーションのサイズ（数値）
• color：色（CSSで定義できる値）
• size：表示されるひとつひとつのサイズ（数値）
• items：表示されるアイテムの数（数値、「type」が「dot」の場合は円を構成する数、それ以外は1行の数）
• speed：アニメーションのスピード（ミリ秒）
• clockwise：右回りか左回りか（「true」が右回り、「false」が左回り）
• direction：アニメーションを行う起点の方向（「left」「right」「top」「bottom」）
• shape：表示されるひとつひとつの形（「circle」「square」）

☆使用できるプロパティの種類

• dot：direction/shape以外
• line：width/clockwise以外、「direction」は「left」または「right」
• square：width/direction以外
• block：width/clockwise以外
• eddy：width/direction以外

☆ファイルの読み込み

<script type='text/javascript' src='http://code.jquery.com/jquery-latest.js'></script>
<script type='text/javascript' src='jquery.cssloading.min.js'></script>

☆html

<button>Play/Stop</button>
<div id='loading'></div>

☆JavaScript（dot）

// 開始
var option = {
  type: 'dot',
  width: 100,
  color: 'rgba(0, 102, 255, .9)',
  size: 3,
  items: 30,
  speed: 1000,
  clockwise: false
};
$('#loading').cssloading(option);

// 終了
$('#loading').stopcssloading();

☆結果
flugel.bizでご確認ください。


☆JavaScript（line）

// 開始
var option = {
  type: 'line',
  color: 'rgba(255, 255, 255, .9)',
  size: 5,
  items: 10,
  speed: 1000,
  direction: 'left',
  shape: 'square'
};
$('#loading').cssloading(option);

// 終了
$('#loading').stopcssloading();

☆結果
flugel.bizでご確認ください。

その他のサンプルは jquery.cssloading.js | Archives | Flügel にて公開しています。

「京巡りガイド」を公開しました

昨年、京都で遊ぼう！ として公開した、京都での観光名所やホテル等の観光案内（ルート検索付き）のウェブサービスですが、今回「京巡りガイド」としてリニューアル公開しました。
以前は JavaScript ベタ書きでしたが、今回 jQuery + jQuery Mobile で構築してみました。データを読み込むのに Cache_Lite をかましてるので、3 時間はキャッシュから取得します。ローディングアニメーションは、自作の jQuery プラグイン「jquery.wakeup.js」を使ってます。

京巡りガイド

**動作確認環境
スマートフォン

• iPhone 4 以降
• iPod touch(iOS 4) 以降
• Android(OS 2.3) 以降

タブレット

• 新しい iPad

パソコン

• Safari 5 以降
• Chrome 20 以降
• Firefox 14 以降

「京巡りガイド」では、GPS現在地や指定した出発地から目的地までのルートを検索できます。ルートは、JRや私鉄、地下鉄の各鉄道や市バスを利用した結果が検索されます。
検索画面では次の情報を見られます。駅とバス停では時刻表、ホテルとショップでは電話番号、神社仏閣と観光スポットでは写真、全てのカテゴリで地図を表示します。
詳細画面では次の情報を見られます。駅とバス停では乗り換えられる距離にある駅やバス停、ホテルとショップでは電話番号とルート検索、神社仏閣では写真とWikipediaの情報とルート検索、観光スポットでは写真とルート検索、全てのカテゴリで地図および近くに駅があった場合は食べログサイトへのリンクを表示します。また、ルート検索の保存も可能です。

神社仏閣やホテルなどの一覧を見る

「検索して選ぶ」でホテル名などを入力（セレクトメニューでカテゴリを絞ることも可能）するか、「カテゴリから選ぶ」「最寄りの施設から選ぶ」でのボタンを押すと一覧ページが表示されます。
「検索して選ぶ」では、よみがなでも検索できます。「カテゴリから選ぶ」で表示した場合、初期状態では「五十音順」の「あ行」になっています。「五十音順」では「あ行」「か行」「さ行」「た行」「な行」「は行」「ま行」「や～ん」を、「近距離順」では「500m以内」「1km以内」「2km以内」を選べます。

「基本情報」では、「読み方」「（出発地からの）直線距離」「路線（駅・バス停のみ）」「Tel（ホテル・ショップのみ）」が表示されます。また、「時刻表」（駅・バス停のみ）は「駅から時刻表」（駅）・「京都市バス」（バス停）へ、「予約」（ホテル・ショップのみ）は「楽天トラベル」もしくは「るるぶ」へ、「評価」（ショップのみ）は「食べログ（掲載されている場合のみ）」へ、それぞれジャンプします。「写真」（神社仏閣・観光スポットのみ）を押すと、Google画像検索での該当施設を検索した結果が表示され、「Tel」（ホテル・ショップのみ）は電話をその場でかけられます。また、「出発地にする」を押して、出発地に指定することができます。
「地図」を開くと、出発地が青いピンで、該当施設を赤いピンで表示した地図が表示されます。
「ルートなどの詳細」を押すと、出発地から該当施設までのルートなどを示すページに移ります。

ルートなどの詳細を見る

一覧ページで「ルートなどの詳細」を押すと、出発地から該当施設までの電車やバスによるルートや周辺地図などの詳細ページが表示されます。
「基本情報」では、一覧ページでの「基本情報」に加え、「目的地周辺の飲食店」として、該当施設の周囲1km以内にある駅を元に検索した「食べログ」へのリンク（周囲に駅がない場合は表示されません）が、神社仏閣の場合はWikipediaの情報が、それぞれ表示されます。

「ルート」を開くと、最大3件までルート情報が表示されます。駅やバス停の情報と、路線や時刻表（駅の場合は「駅から時刻表」、バス停の場合は「京都市バス」にジャンプします）、乗り換え（ある場合）のボタンが表示されます。
また、出発地から経由地も含めた該当施設までの大まかな地図も表示します。

「乗り換え」を押すと乗り換え元と乗り換え先をピンで示した地図を表示します。

「（該当施設）周辺地図」を開くと、該当施設周辺の地図を表示します。大きな地図で見る場合（iOSの場合は地図アプリに自動切り替え）は、「大きな地図で見る」を押してください。

「SNS連携」を開くと、TwitterとFacebookへ投稿できるエリアが表示されます。投稿したくない共有先はフリップスイッチでオフにできます。投稿するには、ナビゲーションエリア（パソコンやiPadは画面左、その他は画面下）にある「SNS連携」を開いて接続します。

降りる駅までの情報を見る

詳細ページの「ルート」内の路線名を押すと、路線内の駅やバス停の一覧ページが表示されます。乗車駅・バス停は赤で、降車駅・バス停は黄で表示されます。
※バスの場合は、往路と復路で通るバス停が異なるので、目安とお考えください。

「乗り換え」を押すと、その駅やバス停で乗り換えられる路線が表示されます。

foursquareのExplorer機能を使って現在地から近くの施設を探す

foursquareのExplorer機能を使って、現在地から近くの施設を探すことができます。ナビゲーションエリア（パソコンやiPadは画面左、その他は画面下）にある「SNS連携」を開いてfoursquareに接続します。

ナビゲーションエリアにある「最寄りの施設から選ぶ」内の「explorer」を押し、表示されたページで「飲食店」「カフェ」「バー」「ショップ」「美術館等」を選ぶと、結果が表示されます。電話番号が登録されている場合は、電話ボタンが表示されます。また、foursquareでのvenueページへジャンプするボタンも表示されます。

ルート検索を保存する

全てのページは、「このページを保存」を押すことにより、端末内のストレージに情報を保存することができます。

出発地が現在地で詳細ページを保存した場合は、次回アクセスした際の現在地からルートを計測します。

保存したページを削除したい場合は、「削除モード」を押してモードを変更し、削除したいページを押してから「削除」を押してください。

GPS計測について

GPSはGeolocation API を用いて計測しており、スマートフォン端末でのGPS設定が有効の場合に発動しますが、パソコンでアクセスした場合は取得せずに、現在地を「京都駅」としています。

京都で遊ぼう！の SNS 連携を強化しました

京都で遊ぼう！ の SNS 連携を強化しました。


現在連携できる対象サービスは以下の通りです。

文字 post

• Twitter
• Facebook
• tumblr.

画像 post

• TwitPic
• Facebook
• tumblr.
• Flickr

※iPhone などの iOS では input type='hidden' が無効化されるのでスマートフォンでの画像アップロードは Android でのみ有効です。

京都で遊ぼう！説明ページ
京都で遊ぼう！

簡易的なスマートフォン用ウェブページの対応

ウェブページを作ったはいいけど、スマートフォンの対応が必要な場合は確実に増えてくると思う。しかし、それ用のウェブページを作るなんて、ナンセンスだと思う。以下の meta タグを入れるだけで、スマートフォンの場合は /css/m.css を読み込んでくれる。

☆css の読み込み

<link type="text/css" rel="stylesheet" href="/css/m.css" media="only screen and (max-device-width:960px)" />

ここで、max-device-width を 960px にしているのは、現在スマートフォンの最高解像度を持つ iPhone4 の画面を横にした場合を考慮している。Android は 854px なのでこれに含まれる。この css をパソコン用の css の後に記述すれば、携帯用に値を上書きしてくれる。

☆js の振り分け

var device = (window.innerWidth > 960) ? true : false;

これも必要な場合に device の値を参照すれば処理を振り分けることができる。

ただ、これは単に画面サイズによって振り分けてるだけなので、キチンと userAgent を取って処理を分けた方がいいのも事実。あくまでも、「簡易的に」対応する場合に限られる。

iPod Touch のカレンダーでも Google カレンダーと同期してくれる

Google カレンダーと同期している場合、iPhone って、外出先でカレンダーを更新するともちろん同期してくれるのは当然だけど、iPod Touch でも同じだった。

iPod Touch のカレンダーを Google カレンダーと同期させ、外出先に持って行く。もちろん Wi-Fi 環境はないので、たとえなにかを入力したりしても、iPod の中だけの更新になるけど、家に帰って Wi-Fi 環境に繋ぐと、自動的に Google カレンダーと同期してくれて便利。

iPhone いらないかもなぁ。

月額 8 円の Android 環境

京都市右京区にある京都ファミリーの電気売り場だったところに、先週金曜 29 日にミドリ電化がオープンしたので、なにかええもんないかと行ってみた。用事もないのに冷蔵庫やオーディオを見たり、マッサージチェアを座ってみて 75,000 円！？とあまりの安さに驚愕したり、iPod は売ってるが Mac は売ってないと愕然としたり。その後、au から出る新しい Android を見たいなと売り場に行くと、引っかかってしまった。

販売員が実に熱心に攻撃してくる。なんせ月額 8 円で Android が手に入りますよ旦那、と。Universal 料の 8 円だけ。残りはミドリさんに負担してもらってます、と矢継ぎ早に攻めてくる。通話とか通信とか、au の回線を使えばその分料金は発生するけど、Wi-Fi で使う分には 8 円でいけるわけですよ、と価格トークは止まらない。割引は 2 年間なので、8 円なら 2 年使っても 192 円と、ありえないでしょ？とおクチが冴え渡る。とりあえず他のお客がその販売員に話しかけたときに脱出したけど、、、気になる。Android 環境が 8 円で手に入るとは、非常に気になる。しかし、そんなつもりでミドリに来ていないので、一切の証明書を持っていない。

すると、「お取り置きしますよ」と予想された答えが返ってきた。どうやら昨日は 25 台入荷したが全て売り切れ、今日の昼に急遽 5 台入荷して、今 2 台売れているらしい。確かに、棚に貼ってある紙には 1 と 2 に「×」がしてある。まぁこれ自体促進のための虚偽かもしれないとも思いつつ、やっぱり気になるので、決断。8 円ならいいか、と。名前と電話番号を渡して、帰宅。

雨の中往復し、証明書等必要なものを持って再び来店。さっきの販売員が新しい獲物に食らいついているのでしばらく待っていると、見知らぬ番号から電話が。聞いたことのない声のお姉ちゃんだ。何かを期待したのも束の間、目の前で電話をかけている販売員だった。本当に帰ってくるか心配だったんだろうが、「あなたの後ろにいます」と言って電話を切り、カウンターへ。契約を済ませて家路につくが、慣れない靴で雨の中歩いているため靴擦れでかなり痛い。右足を引き摺りながら帰り、早速開封してみた。



はっきり言って携帯「電話」じゃないな、これ。さっきのお姉ちゃんに尋ねてみたけど、通話するときはスピーカーとマイクか、専用のヘッドセットでやるらしい。どうもヘッドセットというと怪しげなヘッドギアを思い出してしまうが、そうではないらしい。まぁ通話をする予定はないのでいいけど。

まず Wi-Fi の設定をし、「設定 -> 通信 -> モバイルネットワーク設定」でパケット通信を切る。これをしないとパケット代として請求されてしまうらしい。Google アカウントの設定も済ませ、色々と使ってみた。iPod touch ではホーム画面のスクロールは簡単にできるが、IS01 ではタイミングが必要なのか、何回かトライしてようやくできる感じ。ブラウザのスクロールも iPod touch に比べてぎこちない。Apple はこの辺をじっくりと作り込んであるなぁという印象。

画面はさすがにデカいのでとても見やすい。ブラウザもストレスない感じで使える。なによりも iPod touch にないのは物理的なキーボード。これは非常に良い。説明書を見ずに使ったが、ALT キーと一緒に押して出る文字や SHIFT キーと一緒に押して出る文字等、すぐに気づいた。それでも出ない記号は ALT キーも SHIFT キーも一緒に押したら出た。色々立ち上げて家のアイコンのボタンを押したらホーム画面に戻るけど、「起動中アプリ」には残ってしまう。はて、と思ったが、なにか起動中に家のボタンの左にある終話キーみたいなのを押したら、ちゃんと終了してくれた。

iPod touch と同じ Wi-Fi 環境であるにも関わらず、iPod touch の Safari よりも高速であると感じた。かなりサクサクと表示してくれる。それと、iPod touch では Wi-Fi を切らないと電池消耗が激しいけど、IS01 はそんなことはない気がする。

ま、新しいオモチャってことで、楽しんでみよっと。

新しい iPod touch

アップル - iPod touch - FaceTime、Retinaディスプレイなど、魅力を満載。

やはり新しい iPod touch が出た。毎年 9 月にはモデルチェンジしているから、期待していたけど、やっぱり出た。そして、欲しい。
今までは iPhone とのざっくりした違いを、通話とカメラとどこでもネットワークへ接続ができるかどうかだと思ってたけど、そのカメラが装着されたことにより、余計に魅力的に感じる。美しい Retina ディスプレイもとっても気になる。

糞フトバンクなどにはビタ一文ともやりたくないので、iPod touch の機能拡充にはいつも期待している。そんな中今年、iPod touch を買ったのはいいけど、一番安い 8 GB モデルだから、iOS4 にアップデートしても、ほとんどの機能を使うことができない。壁紙機能すら使えない。だからなおさら、気になる。。。ま、しばらくは我慢の日々だろうなぁ。

携帯電話用に Google が勝手に変換するのを防ぐ

せっかく携帯版ウェブサイトを作って、パソコン版のトップページに携帯電話からのアクセス振り分けを仕込んだとしても、携帯版の Google から表示すると、携帯サイトへジャンプしない。Google が勝手に携帯電話用に変換してしまっている。確かに便利な機能ではあると思うけど、こうやってせっかく仕込んだ振り分けが機能しないのは実に困る。そこで、下記のたった 1 行をパソコン版ウェブページの <head> 内に記述するだけで、これを回避することができる。

下記は www.xxx.com というパソコン版のウェブページに、携帯版のウェブページである www.xxx.com/m/ へジャンプさせる場合。

<link rel="alternate" media="handheld" href="http://www.xxx.com/m/">

php で携帯用に画像を自動で画像を縮小する

携帯版ウェブサイトは、表示できる 1 ページの容量がパソコン版に比べ大幅に制限されているため、画像がデカ過ぎたりするとそれだけでぐんにょりした感じになってしまう。なので、画像がデカい場合は自動で縮小し、表示できるようにするという、パソコン版ではあまり想定しないような配慮も必要となる。

そこで、php でページを自動生成する場合、自動で縮小をする処理を書いておけば大方回避できる。下記は一例として、ファイル名からサイズを取得し、100000 bytes 以上の場合に縮小画像を生成し、表示するものを書いてみる。縮小サイズの横幅は 200px としている。

// 画像ファイル名を変数 imgFile に代入
$imgFile = "./img/xxx.jpg";
// ファイルサイズを取得し、100000 bytes 以上の場合、
// 画像縮小処理の copyImgForMobile() を実行する
if (filesize($imgFile) >= 100000) {
// copyImgForMobile() で縮小画像のファイル名を imgFile に代入
  $imgFile = copyImgForMobile($imgFile);
}
// 画像を表示
  echo = "<div align='center'><img src='". $imgFile. "' width='200' alt='' title=''></div>¥n");

// 画像の縮小処理
function copyImgForMobile($imgFileName) {
// ファイルの横幅を変数 imgWidth に、高さを変数 imgHeight に代入
  list($imgWidth,$imgHeight) = getimagesize($imgFileName);
// 縮小する画像のリソースを変数 imgResource に代入
  $imgResource = @imagecreatefromjpeg($imgFileName);
// 縮小後の横幅を 200px に固定し、変数 imgWidthSmall に代入
  $imgWidthSmall = 200;
// 横幅を縮小する割合から縮小後の高さを変数 imgHeightSmall に代入
  $imgHeightSmall = ($imgWidthSmall / $imgWidth) * $imgHeight;
// TrueColor イメージを新規に作成し、変数 imgCopy に代入
  $imgCopy = imagecreatetruecolor($imgWidthSmall, $imgHeightSmall);
// 画像の縮小を実行する
  imagecopyresized($imgCopy, $imgResource, 0, 0, 0, 0, $imgWidthSmall, $imgHeightSmall, $imgWidth, $imgHeight);
// ファイル名を名称部分と拡張しに分け、変数 imgFileStr に代入
  $imgFileStr = explode(".", $imgFileName);
// ファイル名部分の最後に「携帯用」として「_m」を付け、縮小後のファイル名を生成
  $imgFileNameNew = $imgFileStr[0]. "_m". $imgFileStr[1];
// 縮小後の画像を出力する
  imagejpeg($imgCopy, $imgFileNameNew);
// 縮小後のファイル名を返す
  return $imgFileNameNew;
}

携帯サイトで外部 CSS のようにスタイル付けをする

携帯サイトはあまりにも制限が多く、Javascript を携帯サイトで使えないため、なかなか美しいサイトを Flash 抜きでは作りづらい。正直、携帯サイトってうんざりすることが多い。もしターゲットユーザに壮年以上を含める場合、壮年以上の人は携帯の機種変更を長年していないことも案外多く、最新機種に併せた作り方ではレイアウトがイカれてしまったりする。こんな場合は table だって使えないし、CSS だって使わない方が無難だろう。しかし現代のウェブページの制作に慣れてしまうと、CSS の便宜性は使いたい。できれば 1 ファイルで管理したいから外部 CSS を使いたい。そんなときはどうすれば良いのか。

まず、スタイルを CSS ファイルに書かなければならないということはない。php に書いてしまえばいい。ページも php にすれば、include で読み込み、変数をスタイルとして使えばできる。例えば、文字色の赤や大きい文字を設定する場合は、こんな風にすればできる。

★/css/css.php

<?php
  $colorRed = " color='#ff0000'";
  $fontBig = " size='+3'";
?>

★/index.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
    <title>タイトル</title>
    <? include "css/css.php"; ?>
  </head>
  <body>
    <font<? echo $colorRed; ?>>文字色が赤</font><br>
    <font<? echo $fontBig; ?>>文字サイズ大きめ</font><br>
    <font<? echo $colorRed. $fontBig; ?>>文字色が赤で文字サイズが大きめ</font><br>
  </body>
  </html>

php を include しているので head 内に放り込む必要はないけど、css の感覚からこう表記してみた。これだったら、私のようにプログラミング能力が高くない人でもスタイルを一括管理できる。

携帯ブラウザでの真ん中のソフトキーの表記を変える

携帯サイトでウェブページを閲覧する場合、ブラウザ一番下部の場所に「決定」とか「選択」とか表示されている部分があると思う。この表記は title 属性を読み込んでおり、a 要素や input 要素等に title 属性を仕込んでおけば、「決定」とかの部分が title 属性の文字となる。

この「決定」とかはフォーカスが当たらないと表示されないので、img 要素に指定しても意味はない。私が確認した要素は下記の通り。

a 要素
input 要素
option 要素

select 要素は記述しても変わらなかった。

上記は現在、私が使っているキャリアである au 機にて確認したもの。

QR コードを自動生成する

パソコン版ウェブサイトにて、例えば多く抱えるそれぞれの店舗ページに QR コードを載せたい、みたいなことがあるかもしれない。そんな場合は、固定のトップページへ誘導する QR コードよりも、携帯サイト内のその店舗のページへ誘導する QR コードの方がユーザビリティがいいと思う。しかしその QR コードをいちいち嵌め込んでいられない。

私が作ったものではなく単なる紹介ではあるけど、これを使うと簡単にできる。
QR コード・バーコード

このウェブサイト内にある「QR コード クラス ライブラリ」を使えば本当に簡単。私は Server Side のスクリプトは php しか扱えないので、php 版を使っている。使い方は「QR コード クラス ライブラリ」内の README.txt に詳しく記載されている。

パソコン版ウェブサイトトップページで携帯からのアクセスを振り分ける

This summary is not available. Please click here to view the post.

iPhone、iPad、iPod touch の User Agent と php での振り分け

自分用の備忘録として、iPhone、iPad、iPod touch の User Agent を残そうと思う。

ただ、私は iPod touch しかなく、iPhone と iPad は他所に掲載されていた情報に、iOS4 の情報を上書きして、下記に載せてみた。iPod touch の User Agent は実際に表示させた結果なので、間違いはない。「like Mac OS X;」の後に続く言語は、機器ごとに異なる。

• iPhone
  Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0 like Mac OS X; en) AppleWebKit/532.9
  (KHTML, like Gecko) Version/4.0.5 Mobile/1A543a Safari/419.3


• iPad
  Mozilla/5.0(iPad; U; CPU iPhone OS 4_0 like Mac OS X; en-us) AppleWebKit/532.9
  (KHTML, like Gecko) Version/4.0.5 Mobile/7B314 Safari/531.21.10


• iPod touch
  Mozilla/5.0 (iPod; U; CPU iPhone OS 4_0 like Mac OS X; de-de) AppleWebKit/532.9
  (KHTML, like Gecko) Version/4.0.5 Mobile/8A293 Safari/6531.22.7

おまけに、php での振り分け方も。

$agent = $_SERVER['HTTP_USER_AGENT'];
if (preg_match("/^iPhone|iPod|iPad/i", $agent)) {
// 処理
}

なぜ売れるのか？ロングヒット端末 NTT ドコモ「AQUOS SHOT SH-01B」の秘密に迫る

なぜ売れるのか？ロングヒット端末 NTT ドコモ「AQUOS SHOT SH-01B」の秘密に迫る

昔、ドコモはシャープを参入させるのが嫌だった。何故かは忘れた。しかし携帯カメラのあまりの人気に、携帯カメラの開発が高度だったシャープの参入を許した。

というような話を聞いたことがあるので、もしかしたらドコモにとっては皮肉なのかもしれない。

しかし日本の携帯電話は全てスマートフォン化すべきだと思っている。ウェブに関わる人間としての意見に過ぎないが、通常の携帯電話に搭載されているブラウザで閲覧するにはもう限りがあると思う。そもそも数年前までのブラウザは、Opera などを搭載しているものもあったが、メーカーが自社開発していたりして、性能にかなり差があった。さらにキャリアごとに html 等に対する独自規格が発達し過ぎて、制作側としてはかなりめんどくさかった。hdml などその最たる例であり、絵文字の記述方法は現在も糞フトバンクだけ違う。ブラウザではないが、アドレス登録用の QR コードの記述方法はドコモだけ違う。

スマートフォン化することにより、Android の Chrome や iPhone の Safari、Opera 等を搭載した機種が増えれば、開発側としてもメリットがあるし、閲覧側としても今までよりも情報量の多いウェブページを見られることになる。W3C 準拠を前提としたブラウザを搭載していれば、それだけ独自テストを行う時間は少なくなるし、より精度の高いページに仕上げることが可能になる。

もう一つ、ブラウザがアップデートされれば、携帯電話に搭載されているブラウザもアップデートできるような仕組みにするべきだと思う。この機種にはこのブラウザのこの版が固定されているから、開発側としては過去にリリースされている何百台という携帯電話のために膨大な時間や労力・経費がかかってしまっている。もちろん割り切れば少なくて済む話だが。。。

そして、高齢者向けの携帯電話もスマートフォン化すれば、タッチパネルになることで物理的なボタンを排除できる。物理的なボタンが排除されるということは、そのボタンを製造するコストは下がるし、メーカーはボタンに変わる、高齢者にとって判りやすい明示的なボタン UI を作ることができる。物理的ではないので、ボタンの大きさや表現は自由になるし、メーカーの腕の見せ所ともなる。

もう携帯電話のガラパゴス化はうんざりだ。鎖国という江戸幕府の悪政が現在にも、そして未来にも影響を及ぼしている。

携帯電話の SIM ロック、解除を要請へ--総務省

携帯電話の SIM ロック、解除を要請へ--総務省

もし SIM フリーになれば個人的にはとても嬉しい。糞フトバンクと契約しなくても iPhone を使えるようになるかもしれないからだ。どうも先日来、この SIM フリーに対して抗議しているのは糞フトバンクだけど、そりゃそうだろうなと思う。

私が望んでいるように、糞フトバンクと契約せずに iPhone を使いたい、もしくはディズニーモバイルを使いたいという人は結構いるように思う。そのユーザから料金を吸い上げるチャンスがなくなるし、妥協して糞フトバンクと契約していたユーザは元のキャリアに戻ることになれば、かなりの収入減になる見込みになると思う。それだけ、魅力的な端末と揃え、広告に金をかけてきた証でもある。ただ、その妄想的な手段でしか囲い込みを果たせていないのが、糞フトバンクの現状だ。そして、この SIM フリーになることによって、我々ユーザは大きな恩恵を受けることになる。それは料金だ。

現在の携帯電話利用料金が高いのは、糞フトバンクのアクセスチャージが高いことに起因している、というのは有名な話だ。アクセスチャージというのは例えば、au ユーザである A さんが docomo ユーザである B さんに電話をしたとする。すると着信させるためには、B さんの電話にたどり着くために docomo 回線の中を徘徊する必要がある。その時の回線使用料として、au は docomo に支払うことになる、という仕組み。糞フトバンクはこの他社へ請求することになるアクセスチャージが高い。請求されたキャリアは、その分を利用料引き上げという措置により賄う。これで au と docomo の料金が高くなり、「ではウチも」ということで糞フトバンクも便乗値上げを行う。

要は、糞フトバンクの利用者が増えれば増える程、利用料はどんどん上がっていくという構図になる。従って、前述したように、魅惑的な端末を docomo や au ユーザが糞フトバンクと契約せずに使えるようになると、この糞フトバンクからアクセスチャージされる回数が減り、その分料金を安くできるという理屈になる。

尤も、現時点でも糞フトバンク携帯には電話をかけないようにすれば、SIM フリーにならなくても可能かもしれないが。糞フトバンク、ダメ、ゼッタイ。

さらに、何度も言っているが、糞フトバンクは日本人から吸い上げる料金には、糞フトバンクを使っている在日朝鮮人の料金も含まれている。あなたが支払っている料金は、どっかの在日の分も一緒に支払っているのだ。SIM フリーになって糞フトバンクが携帯電話業界撤退に値する打撃を与えられることを期待する。

SIM フリーは日本国にとって、利益となる。

ドコモ、「L-02B」の販売を一時停止 - 110/118/119へ接続できない不具合

ドコモ、「L-02B」の販売を一時停止 - 110/118/119へ接続できない不具合

さすが朝鮮の反日製品。緊急電話が繋がらないなんて、笑止千万。というか、LG などの堕落企業と何故ドコモが契約しているのか、甚だ疑問に感じる。

昔、寒損電子の携帯に関わったことがあるが、朝鮮人て本当に仕事をしない。だらしない。なんというか、働いているこっちが馬鹿らしく思えてくる。詳しいことはまた後日に改めて。。。