以前にも 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

README.md に変更しました

github での README を、全て README.md 形式に変更しました。

これにより、読みやすくなったと思います。

はてな記法っぽくて凄く使いやすいですね、Markdown。


↓参考にしたところ。ありがとうございました。
脱GitHub初心者を目指す人のREADMEマークダウン使いこなし術 | ゆっくりと…

「jquery.utility.js」を公開しました。

先日リニューアルした「京巡りガイド」の開発時に派生してできた「jquery.utility.js」を公開しました。

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' のようにスラッシュで区切ることで、同じ値を複数の属性に定義できます。

$('#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';
      }
    }
  })
;

.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() などで個別に指定してください。

$('body')
  .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）へスクロールします。

$().mobile() で true と判定された場合は、上記の場所へのスムーススクロールのアニメーション無しのジャンプになります。

$(document)
  .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})
;

.isMail(value)

.isMail() は、判定する値がメールアドレスかどうか（xx@xx.xx）を true/false で返します。引数 value が以下の場合、次のような挙動になります。

• 与えられている場合：与えられた value がメールアドレスかどうかの判定をします。
• 与えられない場合：$(this).val() を値として、メールアドレスかどうかの判定をします。

$(document)
  .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()
;

確認環境

• Chrome/Safari/Firefox/Opera/IE8+
• iPhone/iPad/iPod touch/Android

サンプルの実行結果は、jquery.utility.js | Archives | Flügel でご覧ください。

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

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

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

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

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