Backbone.js と jQuery.mmenu を使ったスライドナビゲーション - present
Backbone でモバイル版の UI を作っていて、 Facebook や Gmail の iPhone アプリみたいな、 スライド表示されるメニューを実装したくなった。 そういったメニューを実装するための jQuery プラグインは既にいくつか存在していて、 Sidr - A jQuery plugin for creating side menus jakiestfu / Snap.js jPanelMenu | A jQuery Plugin あたりを試してみたけど、どれもシックリこない。 そんな中、最近 jQuery.mmenu っていう jQuery プラグインを知った。 jQuery.mmenu » slick app look-alike sliding menus for your mobile website 触ってみた感じ、自分が求めているものに一番近い。今のところは
Bootstrap を使ってデザインしたアプリに Sidr でメニューを作成 - present
Twitter Bootstrap はレスポンシブ Web デザインをサポートしているから、 小さい画面ではナビゲーションバーのメニューが隠れて、代わりにボタンが表示される。 このボタンをタップするとメニューがドロップダウン(?)表示されるんだけど、これ好みじゃない。 Facebook や Gmail の iPhone アプリみたいに、横からスライド表示されるメニューにしたい。 そこで、Sidr と Bootstrap を組み合わせて、それっぽいメニューを実装してみた。 Sidr - A jQuery plugin for creating side menus この手のメニューを実装するプラグインは Sidr のほかに PageSlide や Snap なんかがあるけど、 試した中では Sidr が一番 Bootstrap と組み合わせやすかった。他のは動かすだけで一苦労。 Bootst
Twitter Bootstrap 付属のアイコン画像より Font Awesome - present
Twitter Bootstrap が提供するアイコンは、 画像ファイルだから拡大すると見苦しいし、 色も黒と白の2色しかないので、 テーマをカスタマイズする場合の使い勝手がイマイチ。 そこで最近、Web フォント形式のアイコン『Font Awesome』を使い始めた。 Font Awesome, the iconic font designed for use with Twitter Bootstrap Bootstrap ライクなデザインのアイコンフォントが、なんと 249 個。 Bootstrap が提供するアイコンと同じデザインのものも含まれているので、 全部フォントで置き換えられる。 というか、icon-* 系のクラスはフォントを使ったものに上書きされてしまうんだけど。 フォントなので拡大しても粗くならないし、CSS で色も変更できる。 Rails で使うなら、font-awe
Gmail スタイルのショートカットを実装できる『Mousetrap』 - present
Web アプリにショートカットを実装したくて、ライブラリを探していたら、良いの見つけた。 『Mousetrap』。 ccampbell/mousetrap JavaScript でショートカットを実装するライブラリでは shortcuts.js が有名だけど、後発の Mousetrap は shortcuts.js と同等のことができる。さらに Mousetrap が優れていて、個人的にツボだったのは、Gmail の g, i で受信箱に移動 g, a ですべてのメールに移動 *, a ですべてのメールを選択 みたいな、キーを組み合わせるタイプのショートカットも実装できること。コイツがやりたかったんだ。 使い方は簡単で、Mousetrap.bind メソッドにショートカットキーの文字列と、実行したい関数を渡すだけ。Mousetrap を使ったサンプルは次の通り。余命宣告された Google
jquery-mockjax 使えよ色々と捗るぞ - present
jQuery や Backbone.js で UI を開発していて面倒なのが、サーバー側の API を呼び出す部分の実装です。呼び出したい API が既に実装されていないと、細かいところまで作り込めません。 あと、上手く動かなかったときも面倒です。原因がクライアント側ならすぐ直せますが、サーバー側だった場合、サーバー側のコードを修正して、テストまでしないといけません。効率悪いですよね。 できれば、クライアント側の開発はクライアント側だけで完結したい。さらに欲を言えば、最終的にサーバー側の API を呼び出すように修正するとき、出来るだけ少ない修正で済むようにしたい。 API 呼び出しを抽象化してダミーの処理と差し替えたり、jQuery.ajax を上書きしたり、色々工夫して最後に行き着いたのが『jquery-mockjax』。 appendto/jquery-mockjax · GitHu
AppEngine 新料金体系を受けて方針変更 - present
Twitter で AppEngine の新料金体系が話題になっていますね。一部抜粋。 サービスによって多少の違いがあるけど、大体今の料金の7〜8倍程度に ロジック見直して、どの程度まで下げられるか。このままだと、ほとんどのサービスを停止せざるを得ないレベル #gaeja 2011-09-01 08:01:35 via Twitter for iPhone appengineの管理コンソールで現料金と新料金がみられるようになっているのでみんな報告しよう。自分のでもアプリはこれまで無料の範囲内だったけど月40$くらいになりそう。これは許容範囲内だけど他の人のを見てると高くなりすぎる #gaeja 2011-09-02 13:50:04 via HootSuite この新料金体制のままなら自分ならappengineを使い続けないだろう。二倍以内のコストアップなら許容範囲内だけどTL、ML見てる
CSSフレームワーク『BlueTrip』が想像以上にすごい - present
CSS フレームワークを再認識 CSS フレームワークって、名前だけは知っていましたが、どういうものなのか全く知りませんでした。次の記事を読むまでは。 404 Not Found - ゆーすけべー日記 確かに、これは便利そうですね！ さっそく、CSS フレームワークを導入してみます。 BlueTrip を導入 CSS フレームワークはいろいろありますが、今回は先の記事で紹介されていた BlueTrip を導入してみます。 次のページからアーカイブをダウンロードし、解凍して css ファイルと画像を static フォルダに配置。 BlueTrip CSS Framework | A beautiful and full-featured CSS framework HTML の head 部に、下記を追加。 <link rel="stylesheet" href="css/screen.c
参考になりそうなオープンソースのGAEアプリ - present
GAE アプリを開発しているけど、Python と GAE の両方とも初心者なので、どう実装したらいいのか迷う。そこで、「オープンソースのGAE向けアプリを参考にすればいいじゃないか」と考え、ネットで探してみた。 kay-framework - A web framework made specifically for Google App Engine - Google Project Hosting GAE に特化して開発された Python フレームワーク。 アプリの開発に使ってもいいし、オレオレフレームワーク開発の参考にするのもアリ。 google-app-engine-oil - Yet another web framework on App Engine - Google Project Hosting Ruby on Rails を意識して作られた GAE/Python 向
はてなダイアリーの更新情報を Twitter に投稿するなら TwitterFeed の方が便利 - present
ブログの更新情報を Twitter に投稿するなら、以前紹介した Twitbacker よりも TwitterFeed の方が便利です。 twitterfeed.com : feed your blog to twitter TwitterFeed は登録した RSS フィードを一定の間隔でチェックし、更新されていた場合は自動で Twitter に投稿してくれます。 Twitbacker は毎回 ping を送信する必要がありましたが、TwitterFeed なら RSS フィードを登録するだけ。後は勝手にチェックして、勝手に投稿してくれます。 特にはてなダイアリーの場合、ping 送信先を設定できません。記事を保存する際に、毎回トラックバック URL で指定する必要があります。 Twitbacker を使っていた頃は、少しでも楽をするために Greasemonkey スクリプトを使ってい
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
