2015年3月 – 踊る犬.netブログ (旧)

iOS 7 Style Frosted Glass Top-Bar with CSS3

`named-region` is not coming yet

iOS 7’s frosted glass style UI is beautiful. Let’s build it on the web.
There are a couple examples out there for applying blur effect to navigation bar or image.
But these examples are not perfect.
If you use filter: blur, the edges aren’t blurred and still sharp.
Using html2canvas is better but it’s not able to blur cross-domain images.

Even though actually there is a perfect solution using the experimental web platform features on Google Chrome.
So it seems that it’s only a matter of time until we can use named-region.

However, I found a solution not using the experimental features(a proof of concept).
It is a little tricky but works fine on the famous browsers even on iOS safari.
It’s usable if you have a simple web page.

DEMO

Here is live demo.
Source, and video:

Copy all DOMs into blurry viewport, blur and scroll it

How it does is pretty simple.
The entire document is copied into blurry content wrapper at loading time.
And it applies blur effect to the entire content.
The blurry viewport scrolls corresponding to the scroll position of the page when you scroll down the page.

Duplicated DOMs potentially causes bug on your web page

This solution works fine though duplicated DOMs always exist on your document.
It could be a potential of bugs in CSS and DOM manipulation.
Be careful if you use this method.

[Mac] 特定のアプリケーションをショートカット一発でアクティブにする方法

同時に沢山のアプリを使っていると切り替えが面倒になる

アプリケーションの切り替えショートカットといえばCommand + Tabですよね。
でも、アプリケーションが最後に使用した順に並ぶので、切り替えるたびに順番が入れ替わってしまいます。
職業柄、複数のブラウザやターミナルを頻繁に交互に切り替えるのですが、切り替えるアプリケーションが３つ以上になると間違えることが多くなります。
さらに、Command + Tabによる切り替え方法は非効率的です。
3つ前のアプリケーションをアクティブにするためには、Commandを押下しながらTabを3回も押さなければなりません。

アプリケーションが３つ以上になった時に起こる混乱と、無駄なキータイピングを改善したい！

アプリケーションごとに固有のショートカットキーを割り当ててアクティブにしたい

切り替えたいアプリケーションは多くて5つ程度です。
なら、それぞれに固有のショートカットキーを割り当てれば全て解決します。
例えば：

Chrome: Command + Option + Shift + 1
Safari: Command + Option + Shift + 2
Calendar: Command + Option + Shift + 3

さっそく、手元のMacを設定してみましょう。

設定手順

Step 1. Automatorでサービスを作成する

まずは上記アイコンのAutomatorを起動してください。
Command + Nで新規作成します。

上記画面が表示されたら、「Service」を選択してください。

Step 2. サービスを No Input, Any application に設定

上記画面の右上に注目してください。
Service receives [no input] in [any application] となるように、ドロップダウンリストの項目を選択してください。

Step 3. 起動したいアプリケーションを指定

検索欄に launch と打つと、 Launch Applicationという項目が残るはずです。
この項目を、右側のペインにドラッグ＆ドロップしてください。
Launch Applicationという項目が追加されたら、その中のドロップダウンリストをクリックして、アプリケーションを選んでください。

できたら、Command + Sで保存します。適当な名前をつけてください。

Step 4. System Preferencesでキーを割り当てる

以下の手順で設定画面を開きます:

System Preferences → Keyboard → Shortcuts

左側のリストからServicesを選択してください。
その次に、右側のリストを下の方までスクロールしてください。
下記のような画面が表示されるはずです。

あなたが先ほどAutomationで作成したサービスが表示されているはずです。
それに、ショートカットを割り当てましょう。

Step 5. 動作確認

割り当てたら、さっそくショートカットキーを押してみてください。
もしアプリケーションが起動していなければ、起動します。
すでに起動済みであれば、そのアプリケーションが前面に表示されます。

キーコンビネーションが悩ましい

押しやすいキーコンビネーションは大抵アプリケーションに割り当てられてしまっています。
もし環境設定とアプリケーションのショートカットが重複してしまった場合、現在使用中のアプリケーションのショートカットが優先されるようです。
ですので、重複せず、なおかつ押しやすいコンビネーションが望ましいです。
僕はひとまずCommand + Option + Shift + Numberでやってみようと思います。
もしいいコンビネーションがあれば是非コメントください＾＾