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

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

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


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


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

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

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

以前にも lifehacker さんには ご紹介 いただきましたが、再度掲載されました！

今回は「広告非表示」と「上に戻るボタン」を追加で紹介いただいています。

ありがとうございました！

Facebookの機能を3倍アップできる拡張機能 : ライフハッカー［日本版］

Sleipnir Mobile の「ほかのアプリから開く」が便利

本日、Sleipnir Mobile がアップデートされましたね！早速アップデートするんですが、そのリリース通知エントリーで気になる部分がありました。

iOS なのに、どんなアプリからもページを次々に開ける！Sleipnir Mobile for iPhone / iPad 2.3 をリリースしました！ (フェンリル | デベロッパーズブログ)

「どんなアプリからもページを次々に開ける」？
ちょっと意味がわかりかねます、と思って読むと、「コピー」という動作を行うと、バックグラウンドで Sleipnir たんがリンクを開いてくれるようなのです。しかも余計な文字が混ざってても大丈夫とか。こういう余計な文字が混ざってる状態から URL を抜き出すのって、意外と面倒な処理ですが、やってくれてるようです。

ということで、実際にやってみました。

設定する

まずは Sleipnir を開いて、下のバーの右から 2 つめを押します。


次に、設定画面左上の歯車アイコンを押します。


「アシスト」の「ほかのアプリから開く」を押します。


デフォルトではオフになってるので、「オン」にします。

いざ実食

まずは Twitter から。
コピーする


開かれる


** Facebook
コピーする


開かれる



** tumblr.
コピーする


開かれる



** Safari
コピーする


開かれる

開かれてるか確認

上記 4 回の動作で 4 つのタブが生成されています。

状況によっては「おぃ！」っていう場面があるやもしれませんが、非常に便利ですね！

iTunes App Store で見つかる iPhone、iPod touch、iPad 対応 Sleipnir Mobile - Web ブラウザ

myFacebookStyle を新タイムラインに対応させました

Facebook の見た目を自由に変えられる Chrome 拡張「myFacebookStyle」ですが、この度新タイムラインに対応させました。

今回は非常に多くの class が変更されており、以前から酷かったのですが、変わらず「._4lh」とか「._5vf」とか全くもってわけわかめなクラス名が付けられており、難儀しました。Facebook さんは、意味の通るクラス名を付けてほしいとですよ...。

Chrome ウェブストア - myFacebookStyle

Facebook の見た目を自由に変えられる Chrome 拡張「myFacebookStyle」ですが、この度右側に出てくる広告を非表示にする設定を追加しました。

オムニバーのアイコン、もしくは右クリックによるコンテクストメニューから管理パネルを表示させると、以下のように「広告」が表示されます。


この設定が「表示する」の場合はこのような状態です。


「表示しない」にした場合、このような状態になります。


Chrome ウェブストア - myFacebookStyle

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

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

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

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 にも対応させました。

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

Sleipnir 4.0 でツイートできそうなのにどれを押しても無反応の場合の対処

Sleipnir 4.0 for Mac がリリースされましたね！
Web ブラウザ Sleipnir 4 for Mac - アドレスバーすら取り払った究極の先端的ウェブブラウザ

アドレスバーを取り払うというある意味賭けに出ましたが、使う内に慣れるような気はします。


URL を表示させたい場合は、上の画像のドメインが表示されている部分をクリックすると、表示されます。


元ブラウザ開発テスタのぼくの血が、久しぶりに騒ぐ現象に出会いました。。

さて、この Sleipnir の左上に、矢印のアイコンが表示されています。それを押すと、ツイートできるような画面が表示されます。が、できないという現象です。ツイートはおろか、キャンセルもできない、ブックマークを押そうとしてもダメ、他のタブを開こうとしても無反応でした。これを Twitter で問いかけたところ、開発担当の方とやりとりすることができました。現象を説明していくと、どうやら以前のバージョンでの設定が残っていたらしく、これが邪魔していたようです。教えていただいた以下の要領で解決しました。

1. 一度 Sleipnir を落とす
2. ターミナルで「defaults delete jp.co.fenrir.sleipnir kTwitterUsername」を実行する
3. Sleipnir を再起動する

https://twitter.com/fenrir_iphone/status/294370681766961152

この現象で困ってる方は、是非試してみてください。

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 にて公開しています。

Search Capsule をリリースしました。

Google 検索や iTunes 検索をはじめとする様々なウェブサービスの検索結果ページへ、この「SearchCapsule」1つでジャンプできる Chrome の機能拡張をリリースしました。既存の60種に加え、簡単な操作でウェブサービスの追加もできます。
※以前「goSearchForYou」としてリリースしていた拡張のリニューアルです。

Chrome ウェブストア - SearchCapsule

インストール後、F12 もしくは Alt キーと一緒にクリックすると、検索ボックスが表示されます。


このウェブサービスを選ぶセレクトボックスは、ただサービスを表示するだけではありません。例えば、SearchCapsuleで「YouTube 動画検索」を行ったとします。すると、その直後からは「YouTube 動画検索」が一番上に表示されます。


これは検索を行う度、独自にポイントを計算しているので、よく使うサービスほど上位に表示されるようになります。この自動並び替えを使いたくない場合は、オプション画面の「使用頻度による自動並び替えを有効にする」のチェックを外します。外している間も計算自体は継続して行いますので、再びチェックしたときには、過去のポイントが全て反映されます。



SearchCapsuleを呼び出したり引っ込めたりするには、ショートカットキー（以下の通り）を使います。
-開く時（どちらもオプション画面で変更可）
--F1～F12 キー
--Shift / Alt / Command(Mac) / Ctrl(Win) キーを押しながらクリック
-閉じる時
--検索ボックスから離れたところをクリック（オプション画面で設定可）
--開く時のショートカットキー（オプション画面で設定可）

ショートカットキーを変更したい場合は、オプション画面で変更できます。



なお、テキストボックスに文字が入っている場合、セレクトボックスの項目を変更することで、検索を開始します。この自動発動をやめたい場合は、オプション画面の「ウェブサービスの切り替えでの自動検索を有効にする」のチェックを外します。


方向キーの「↑」と「Return キー」もしくは「Enter キー」を一緒に押して検索すると、新規タブで開きます。



各ウェブサービスの編集モードも備えています。「項目の非表示」「項目の並び替え」「名前の編集」「項目の削除」の操作をすることができます。


チェックを外すと、セレクトボックス内に表示されなくなります。もちろん、チェックを再び入れると、表示されるようになります。



項目名をドラッグ&ドロップすることにより、並び替えることができます。



鉛筆ボタンを押すことで、名前の変更ができます。



ゴミ箱ボタンを押すことで、項目を削除できます。削除した項目の復帰はできません。



オプション画面で「表示時にショートカットキーを押すことで非表示にする」のチェックを外している場合、開く時のキー（初期値は F12）を文字が選択された状態で押すと、入力ボックスに選択した文字が挿入されます。



初期値として定義されているウェブサービスは以下の通りです。
Google/Google[画像]/Google[地図]/YouTubeGoogle[ニュース]/Google[ブログ]/Google[書籍]/Google[ショッピング]/iTunesストア/Wikipedia/amazon/駅探乗り換え/えきから時刻表/Chromeウェブストア/livedoor[天気]/Yahoo![ニュース]/Yahoo![ショッピング]/Yahoo![オークション]/Yahoo![ファイナンス]/Yahoo![知恵袋]/OKWave/Goo[郵便番号]/Goo[国語辞書]/Goo[英和辞書]/Goo[和英辞書]/Goo[車]/Goo[バイク]/食べログ/ぐるなび/Twitter/Facebook/tumblr./flickr/Pinterest/github/ニコニコ動画/Ustream/価格.com/ヨドバシカメラ/ビックカメラ/ベルメゾン/ニッセン/セシール/楽天[市場]/楽天[オークション]/楽天[トラベル]/じゃらん/JTB/はてな[ブックマーク]/はてな[ダイアリー]/HOMES/チケットぴあ/映画.com/QLife/クックパッド/素材辞典/Cosmeet/リクナビNEXT/リクルート進学ネット/マイナビバイト

ウェブサービスを追加する方法はとても簡単です。
追加したいウェブサービスのウェブページを開き、対象とするテキストボックスでクリックした上で、F9 キー（オプション画面で変更可）を押します。すると、追加画面が表示されるので、項目名を入力し、「追加」ボタンを押します。追加できるウェブサービスは、<form>要素内にテキストボックスを持ち、実行先がJavaScriptでなく、文字コードがUTF-8・Shift_JIS・EUC-JPのどれかの場合です。


追加したウェブサービスは、一番下に追加されます。


追加済みのウェブサービスの場合は、項目名を変更することができます。


また、他のChromeと設定情報を共有したい場合は、共有元のChromeでオプション画面を開き、「エクスポート」を押してファイルを保存します。次に、共有先のChromeでオプション画面を開き、ファイルを選択して「インポート」を押すと、共有元の情報に上書きされます。Chrome間での同期はできません。


Chrome ウェブストア - SearchCapsule