スクロールするとヘッダがシュッと消えるアレを実現するJS「Headroom.js」

Pocket

下の方にスクロールすると、上部のバーがシュッと消えるアレ、ありますよね。アレ。そういうのはHeadroom.jsで簡単に実装できるようです。

Continue reading…

クレジットカードの入力画面が超ユーザーフレンドリーになるJS「Card」

Pocket

iOSがフラットデザインになったのを契機に猫も杓子もフラットデザインな今日この頃ですが、一般的にはそれ以前のスキューモーフィックデザインの方がユーザーフレンドリーなようです。やっぱり現実と同じ見た目がコンピューター上でも展開されると、「これと同じ使い方で良いんだ!」と安心できますからね。

Continue reading…

ついにGoogleがクロール時にJavaScriptを実行した形でページを読んでくれるように

Pocket

JavaScriptで動的に生成しているページだとGoogleが適切にクロールできないためSEOに良くない(PhantomJSなどであらかじめレンダリングしたものをクローリングさせる必要がある)といった問題がありましたが、ついにJavaScriptを実行した状態のページをクロールしてくれるようになるようです。(ソース元:Understanding web pages better

Continue reading…

WordPressテーマのsassコンパイルやminifyをGulpでやる

Pocket

頑なにWordPressテーマのビルドをrubyの自動化ツールであるGuardを使ってやってきたのですが、フロントエンドに関しては、今どきはnodeを使ったほうがバージョンアップも盛んですし情報も充実しています。

というわけでnodeの今どきのビルドツールであるGulpを使ってビルドするようにしてみました。

Continue reading…

モバイルアプリ向けUIフレームワークionicを学べるサイトが公式にできていた

Pocket

過去にionicというモバイルアプリ向けUIフレームワークを紹介する記事を書いたのですが、そんなionicを学べるサイトが公式にできていました:Learn ionic

Continue reading…

Railsで外部JavaScriptライブラリなどのAssetを管理するなら、bower-railsが便利

Pocket

みなさま、Railsで外部のJavaScriptライブラリ、例えばUnderscore.jsなどを管理するとき、どんな方法を使っていますか? ファイルを落としてきてvendor/以下につっこんでますか?

でもそれだと、いざバージョンアップしようと思ったときに面倒ですし、バグがあるのでバージョンを戻したい、といったときにも不便です。そもそもバージョンを管理できていません。

そんなとき、JSの世界ではBowerというツールでライブラリを管理します。Rubyの世界でのBundlerのようなものです。これをRailsで簡単に使えるようにしたのがbower-railsです。

Continue reading…

HTMLでパワポっぽいスライドを作るための軽量フレームワークbespoke.js

Pocket

例えば「このページの内容をパワポっぽくスライド表示するモードが欲しい」なんていうとき、役に立つフレームワークです。

bespoke.js

Continue reading…

「あああ、せっかく書いた内容が消えちゃった><」を防ぐjQueryプラグイン、Garlic.js

Pocket

「ブラウザ上で長い返信を書いていたのに、目を話した隙にiPhoneがスリープモードになっていて、スリープモード解除してブラウザを見ようとしたら、なぜか勝手に再読み込みされて返信内容が消えてしまった・・・( ˘ω˘)」なんてことはありませんか? 僕はたまにあります。

こんな事故が起こらないようにするのもWebサービスとしてのおもてなしかも知れません。そんなおもてなしを簡単に実現できるのがGarlic.jsです。

Continue reading…

node-webkitでの開発をはじめるならSublimeTextも便利

Pocket

nodeベースでGUIアプリを開発する「node-webkit」みたいな記事を読んでnode-webkitに興味を持たれる方も多いのではないでしょうか。この記事みたいにgruntタスクを書いて開発を進めるのも良いのですが、ちょこっとした実験程度であればSublimeTextのBuildを使うのも便利です。

Continue reading…

久しぶりにCordova(PhoneGap)を触っているけれども、あらゆる動作が簡単なコマンドラインで実行できるおかげで本当に使いやすくなった

Pocket

Cordova(PhoneGap)を試していた時は、今よりも大分使いにくいものだったという印象がある。

新しいプロジェクトを作るときも、~/dev_tools/phonegap-2.2.0/lib/ios/bin/create ...みたいな感じで各デバイスのライブラリパスから同じ名前のコマンドを実行させる形だったので、「え、これ、マルチプラットフォームとかどうやるのよ」と、ユーザーを相当悩ませる感じの仕組みだった。

そのためか、PhoneGap BuildMonacaというビルドツールが大変便利で、むしろこういうビルドツールがないとやってられない状況にあったと思う。

Continue reading…