オムニバーのアイコン、もしくは右クリックによるコンテクストメニューから管理パネルを表示させると、以下のように「広告」が表示されます。
この設定が「表示する」の場合はこのような状態です。
「表示しない」にした場合、このような状態になります。
Chrome ウェブストア - myFacebookStyle
3/21/2013
3/05/2013
README.md に変更しました
github での README を、全て README.md 形式に変更しました。
これにより、読みやすくなったと思います。
はてな記法っぽくて凄く使いやすいですね、Markdown。
↓参考にしたところ。ありがとうございました。
脱GitHub初心者を目指す人のREADMEマークダウン使いこなし術 | ゆっくりと…
これにより、読みやすくなったと思います。
はてな記法っぽくて凄く使いやすいですね、Markdown。
↓参考にしたところ。ありがとうございました。
脱GitHub初心者を目指す人のREADMEマークダウン使いこなし術 | ゆっくりと…
「jquery.utility.js」を公開しました。
先日リニューアルした「京巡りガイド」の開発時に派生してできた「jquery.utility.js」を公開しました。
jquery.utility.js
tx()やcreate()、isMail()などの機能を提供するjQueryプラグインです。
.create(tagName, elements)
.tx(string)
.changeClass(remove, add)
.doScroll(target)
.isMobile(target)
.isMail(value)
.addJS(file)
.addCSS(file)
.print(target)
確認環境
サンプルの実行結果は、jquery.utility.js | Archives | Flügel でご覧ください。
jquery.utility.js
tx()やcreate()、isMail()などの機能を提供するjQueryプラグインです。
.create(tagName, elements)
.create() は、ほぼ .append() と似ていますが、生成する方法が異なります。
第一引数 tagName は、'div' や 'span' などのタグ名を記載します。
第二引数 elements は、生成する要素に与えるデータを Object 形式で定義します。
'css' の場合は、$(selector).css({color: 'rgb(255, 0, 0)'}) と同じ形式です。font-size などハイフンが入る値の場合は、css: {'font-size': '1.2em'} のように引用符で囲んでください。
'data' の場合は、data: {name: 'user name'} のように Object 形式で指定します。name-01 などハイフンが入る値の場合は、data: {'name-01': 'user name 01'} のように引用符で囲んでください。
また、上記以外の場合、'title/text' のようにスラッシュで区切ることで、同じ値を複数の属性に定義できます。
第一引数 tagName は、'div' や 'span' などのタグ名を記載します。
第二引数 elements は、生成する要素に与えるデータを Object 形式で定義します。
'css' の場合は、$(selector).css({color: 'rgb(255, 0, 0)'}) と同じ形式です。font-size などハイフンが入る値の場合は、css: {'font-size': '1.2em'} のように引用符で囲んでください。
'data' の場合は、data: {name: 'user name'} のように Object 形式で指定します。name-01 などハイフンが入る値の場合は、data: {'name-01': 'user name 01'} のように引用符で囲んでください。
また、上記以外の場合、'title/text' のようにスラッシュで区切ることで、同じ値を複数の属性に定義できます。
$('#create')
.create('input', {
id: 'create_input',
'placeholder/title/value': 'Fill in your name'
})
.create('a', {
id: 'a',
href: 'http://jquery.com/',
'title/html': 'A',
data: {
href: 'http://jquery.com/',
tag: function() {
return 'a';
}
},
css: {
color: 'rgb(255, 0, 0)',
'font-size': function() {
return '1.2em';
}
}
})
;
.create('input', {
id: 'create_input',
'placeholder/title/value': 'Fill in your name'
})
.create('a', {
id: 'a',
href: 'http://jquery.com/',
'title/html': 'A',
data: {
href: 'http://jquery.com/',
tag: function() {
return 'a';
}
},
css: {
color: 'rgb(255, 0, 0)',
'font-size': function() {
return '1.2em';
}
}
})
;
.tx(string)
.tx() は、要素に title と html に同じ値を入れたい場合などに使用できます。
img 要素と input 要素（type:image）に使う場合は、alt と title に string が入ります。
input 要素（type:text）、input 要素（type:search）、input 要素（type:url）、input 要素（type:tel）、textarea 要素に使う場合は、title と placeholder に string が入ります。
その他の場合は title と html に string が入ります。
強制的に上記の 2 つの属性に string が入るので、個別に指定したい場合は、.tx() を使わず、.attr() などで個別に指定してください。
img 要素と input 要素（type:image）に使う場合は、alt と title に string が入ります。
input 要素（type:text）、input 要素（type:search）、input 要素（type:url）、input 要素（type:tel）、textarea 要素に使う場合は、title と placeholder に string が入ります。
その他の場合は title と html に string が入ります。
強制的に上記の 2 つの属性に string が入るので、個別に指定したい場合は、.tx() を使わず、.attr() などで個別に指定してください。
$('body')
.find('#tx1').tx('tx1').end()
.find('#tx2').tx('tx2').end()
;
.find('#tx1').tx('tx1').end()
.find('#tx2').tx('tx2').end()
;
.changeClass(remove, add)
.toggleClass() は、あれば削除、なければ追加をしますが、.changeClass() は、強制的に第一引数を削除、第二引数を追加します。
$('#changeClass2').changeClass('blue', 'red');
.doScroll(target)
.doScroll() は、画面スクロールを行います。引数 target が以下の場合、次のような挙動になります。
- 与えられている場合：target の場所を position() で取得し、スクロールします。
- 与えられない場合：ページの一番上（x: 0, y: 0）へスクロールします。
$(document)
.on('click', '#btn_doScroll1', function() {
$().doScroll('#btn_doScroll2');
})
.on('click', '#btn_doScroll2', function() {
$().doScroll();
})
;
.on('click', '#btn_doScroll1', function() {
$().doScroll('#btn_doScroll2');
})
.on('click', '#btn_doScroll2', function() {
$().doScroll();
})
;
.isMobile(target)
.isMobile() は、アクセスしたデバイスがモバイルかどうかを UserAgent で判定します。引数 target が以下の場合、次のような挙動になります。
- 与えられない場合：iPhone/iPad/iPod/Android であるかの結果を true/false で返します。
- 'iPhone' の場合：iPhone であるかの結果を true/false で返します。
- 'iPad' の場合：iPad であるかの結果を true/false で返します。
- 'iPod' の場合：iPod であるかの結果を true/false で返します。
- 'iOS' の場合：iPhone/iPad/iPod であるかの結果を true/false で返します。
- true の場合：iPhone/iPad/iPod/iOS であるかの結果を Object 形式で返します。
var isMobile = $().isMobile(true);
$('#isMobile')
.create('p', {'title/text': 'mobile: ' + $().isMobile()})
.create('p', {'title/text': 'iPhone: ' + $().isMobile('iPhone')})
.create('p', {'title/text': 'iPad: ' + $().isMobile('iPad')})
.create('p', {'title/text': 'iPod: ' + $().isMobile('iPod')})
.create('p', {'title/text': 'iOS: ' + isMobile.iOS})
;
$('#isMobile')
.create('p', {'title/text': 'mobile: ' + $().isMobile()})
.create('p', {'title/text': 'iPhone: ' + $().isMobile('iPhone')})
.create('p', {'title/text': 'iPad: ' + $().isMobile('iPad')})
.create('p', {'title/text': 'iPod: ' + $().isMobile('iPod')})
.create('p', {'title/text': 'iOS: ' + isMobile.iOS})
;
.isMail(value)
.isMail() は、判定する値がメールアドレスかどうか（xx@xx.xx）を true/false で返します。引数 value が以下の場合、次のような挙動になります。
- 与えられている場合：与えられた value がメールアドレスかどうかの判定をします。
- 与えられない場合：$(this).val() を値として、メールアドレスかどうかの判定をします。
$(document)
.on('keyup', '#isMail', function() {
$('#result').tx('isMail: ' + $('#isMail').isMail());
})
;
.on('keyup', '#isMail', function() {
$('#result').tx('isMail: ' + $('#isMail').isMail());
})
;
.addJS(file)
.addJS() は、head 要素の一番最後に JavaScript ファイルを追加します。
$().addJS('sample.js');
.addCSS(file)
.addCSS() は、head 要素の一番最後に CSS ファイルを追加します。
$().addCSS('sample.css');
.print(target)
.print() は、console.log() を行います。引数 target が以下の場合、次のような挙動になります。
- 与えられている場合：console.log(target) を実行します。
- 与えられない場合：concole.log($(this)) を実行します。
var isMobile = $().isMobile(true);
$('#print')
.print(isMobile)
.print()
;
$('#print')
.print(isMobile)
.print()
;
確認環境
- Chrome/Safari/Firefox/Opera/IE8+
- iPhone/iPad/iPod touch/Android
サンプルの実行結果は、jquery.utility.js | Archives | Flügel でご覧ください。
3/04/2013
「京巡りガイド」の機能を少し変更しました
先日 リニューアルした京巡りガイド ですが、機能を少し変更しました。
変更点は以下の通りです。
今後、機能の追加・変更・削除や、神社仏閣・飲食店などのスポットデータの追加があれば、モーダルウィンドウでお知らせします。
変更点は以下の通りです。
- 詳細ページでの出発地が「現在地」の場合、および「現在地最寄りで検索」を選んだ場合に現在地の再取得と「現在地最寄りで検索」のヒット件数の更新を行うように修正。
- 路線ページで、路線中にある駅名やバス停名を押すことで、出発地はそのままで目的地を変更して詳細ページを表示する導線を追加。
- スマートフォンで本サイトを表示した場合、画面下部のメニューに「現在地地図」を追加。
今後、機能の追加・変更・削除や、神社仏閣・飲食店などのスポットデータの追加があれば、モーダルウィンドウでお知らせします。
2/28/2013
「京巡りガイド」をリニューアルしました
去年一度リニューアルした「京巡りガイド」ですが、この度またリニューアルしました。
京巡りガイド
動作環境：iPhone/Android 4/Google Chrome/Safari/Firefox/Opera
このウェブサービスは、京都市には色んな名所旧跡があるけど、それらはなかなか電車で行きづらいところにあるけど、バスだと巡りやすいということを踏まえ、様々な神社仏閣・名所・ホテル・飲食店などを電車とバスでルート案内する目的で作っています。
これに付随して、ホテルなら楽天トラベルなどで予約を、飲食店なら食べログで情報取得を、すぐにできるようにしてあります。
京巡りガイド | Archives | Flügel にて詳しい説明をさせていただいておりますので、ご興味があればご一読ください。
今回の変更点は以下の通りです。
1. jQuery Mobile の撤廃し、独自 UI へ変更
2. 内部構造の一新につき、より正確なルート案内を実現
3. ルート案内には徒歩時間も考慮
4. Twitter/Facebook/foursquare への同時投稿
5. Facebook/foursquare でのチェックインは予め ID があるのでそのまま投稿
6. スポットデータを約 900 件へ増加
7. Android 4 での GPS 対応
京都での観光の際に、お役に立てたら幸いです。
京巡りガイド
京巡りガイド
動作環境：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 にも対応させました。
京都での観光の際に、お役に立てたら幸いです。
京巡りガイド
2/21/2013
2/15/2013
Android で現在地を Geolocation API で取得できないとき
ちょっとハマったので。
デスクトップの Chrome でも iPhone でも取得できた Geolocation API での現在地が、何故か Android では取得できずにエラーになりました。何故だ何故だと 2 時間ぐらいハマった挙げ句の結果を記しておきます。
デスクトップの Chrome でも iPhone でも取得できた Geolocation API での現在地が、何故か Android では取得できずにエラーになりました。何故だ何故だと 2 時間ぐらいハマった挙げ句の結果を記しておきます。
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
これを読み込ませましょう...。navigator.geolocation.getCurrentPosition(success, error, {enableHighAccuracy: true})
あと、「enableHighAccuracy: true」もお忘れなく...。
Subscribe to:
Posts (Atom)